@charset "UTF-8";
/*──────────────────────────────────────────────
  COMPONENTS.CSS – Sections, Footer, Module
  © 2026 seltsam. STUDIO FÜR VISUELLE MEDIEN
──────────────────────────────────────────────*/

/*──────────────────────────────────────────────
  SECTION BASE
──────────────────────────────────────────────*/
.section {
 padding: var(--space-section) 0;
 background-color: var(--section-bg-light);
 color: var(--section-text-light);
}

.section .section-content > :last-child {
 margin-bottom: 0;
}

/* Abschnittstitel: einheitlich als Mono-Label über dem Inhalt */
.section-title {
 margin: 0 0 var(--space-lg);
 font-family: var(--font-mono);
 font-size: var(--font-size-xs);
 font-weight: var(--font-weight-medium);
 letter-spacing: 0.1em;
 text-transform: uppercase;
 color: var(--color-muted);
}

/*──────────────────────────────────────────────
  VARIANTEN (im Backend unter "Darstellung")
──────────────────────────────────────────────*/

/* Hell: Frachtpapier */
.variant-light {
 background-color: var(--section-bg-light);
 color: var(--section-text-light);
}

/* Dunkel: Hafenwasser */
.variant-dark {
 background-color: var(--section-bg-dark);
 color: var(--section-text-dark);
}

/* Highlight: Klinker */
.variant-highlight {
 background-color: var(--section-bg-accent);
 color: var(--section-text-accent);
}

.variant-dark .section-title,
.variant-highlight .section-title {
 color: var(--color-fog);
}
.variant-highlight .section-title {
 color: rgba(243, 241, 236, 0.8);
}

.variant-dark a:not(.btn) {
 color: var(--color-link-on-ink);
}
.variant-dark a:not(.btn):hover {
 color: var(--color-paper);
}
.variant-highlight a:not(.btn) {
 color: var(--color-paper);
}
.variant-highlight a:not(.btn):hover {
 color: var(--color-ink);
}
.variant-dark li::marker,
.variant-highlight li::marker {
 color: currentColor;
}

/*──────────────────────────────────────────────
  TEXT / TEXT + BILD
──────────────────────────────────────────────*/
.section-text .section-content,
.section-textbild .section-content {
 max-width: 68ch;
 font-size: var(--font-size-md);
}
.section-text .section-content p,
.section-textbild .section-content p,
.section-text .section-content ul,
.section-textbild .section-content ul {
 font-size: inherit;
}
.section-text h2,
.section-textbild h2 {
 font-size: var(--font-size-xl);
 margin-bottom: var(--space-lg);
}

.section-textbild img {
 width: 100%;
 height: auto;
 border-radius: var(--radius-base);
}

/* Kontaktdaten groß (Telefon/Mail-Links in dunklen Text-Abschnitten) */
.variant-dark .section-content a[href^="tel:"],
.variant-dark .section-content a[href^="mailto:"] {
 font-family: var(--font-display);
 font-weight: var(--font-weight-display);
 font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem);
 line-height: 1.1;
 text-decoration: none;
 overflow-wrap: anywhere;
}
.variant-dark .section-content a[href^="tel:"]:hover,
.variant-dark .section-content a[href^="mailto:"]:hover {
 text-decoration: underline;
 text-decoration-thickness: 2px;
}

/*──────────────────────────────────────────────
  CLAIM-LEISTE (templates/sections/claim.php)
──────────────────────────────────────────────*/
.section-claim {
 padding: 2.25rem 0 2.75rem;
 border-top: 1px solid rgba(243, 241, 236, 0.1);
}
.section-claim .claim-lines {
 display: grid;
 grid-template-columns: repeat(2, minmax(0, 1fr));
 gap: 1rem 3rem;
}
.section-claim p {
 margin: 0;
 font-family: var(--font-display);
 font-weight: var(--font-weight-bold);
 font-size: var(--font-size-lg);
 line-height: var(--line-height-tight);
 text-wrap: balance;
}
.section-claim strong,
.section-claim em,
.section-claim b {
 font-style: normal;
 font-weight: inherit;
 color: var(--color-brick-soft);
}
.section-claim.variant-light strong,
.section-claim.variant-light em,
.section-claim.variant-light b {
 color: var(--color-brick);
}
.section-claim.variant-highlight strong,
.section-claim.variant-highlight em,
.section-claim.variant-highlight b {
 color: var(--color-ink);
}

/*──────────────────────────────────────────────
  SPALTEN / LEISTUNGEN (templates/sections/spalten.php)
──────────────────────────────────────────────*/
.spalten-grid {
 display: grid;
 grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr));
 border-top: 2px solid currentColor;
}
.spalte {
 display: flex;
 flex-direction: column;
 gap: 0.5rem;
 padding: 1.1rem 1.25rem 0.5rem 0;
}
.spalte + .spalte {
 padding-left: 1.25rem;
 border-left: 1px solid var(--color-line);
}
.spalte-label {
 font-family: var(--font-mono);
 font-size: 11px;
 letter-spacing: 0.04em;
 color: var(--color-brick);
}
.spalte h3 {
 margin: 0;
 font-size: clamp(1.5rem, 1.2rem + 0.8vw, 1.75rem);
 line-height: 1;
 hyphens: manual;
}
.spalte p,
.spalte ul {
 margin: 0;
 font-size: 0.9375rem;
 color: var(--color-text-soft);
}
.variant-dark .spalte p,
.variant-dark .spalte ul,
.variant-highlight .spalte p,
.variant-highlight .spalte ul {
 color: inherit;
 opacity: 0.85;
}
.variant-dark .spalte + .spalte {
 border-left-color: rgba(243, 241, 236, 0.15);
}
.variant-dark .spalte-label {
 color: var(--color-brick-soft);
}

@media (max-width: 991.98px) {
 .spalten-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 .spalte:nth-child(odd) {
  padding-left: 0;
  border-left: 0;
 }
 .spalte:nth-child(n+3) {
  border-top: 1px solid var(--color-line);
 }
}

/*──────────────────────────────────────────────
  CARDS (Standard-Typ, falls genutzt)
──────────────────────────────────────────────*/
.section-cards .card {
 border-radius: var(--radius-base);
 background: var(--color-white);
 color: var(--color-text);
}
.section-cards .card h3 {
 font-size: var(--font-size-md);
 margin-top: 0;
}

/*──────────────────────────────────────────────
  BILD / PARALLAX
──────────────────────────────────────────────*/
.section-bild {
 padding: 0 !important;
}
.section-bild img {
 display: block;
 width: 100%;
 height: auto;
}

.section-parallax {
 position: relative;
 height: clamp(320px, 50vw, 640px);
 padding: 0 !important;
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-paper);
 text-align: center;
 overflow: hidden;
 background: var(--color-ink);
}
.parallax-bg {
 position: absolute;
 top: -13%;
 left: 0;
 width: 100%;
 height: 180%;
 background-size: cover;
 background-position: center;
 background-repeat: no-repeat;
 will-change: transform;
}
.section-parallax .section-content {
 position: relative;
 z-index: 1;
}
@media (max-width: 768px) {
 .parallax-bg {
  top: 0;
  height: 100%;
  transform: none !important;
 }
}

/*──────────────────────────────────────────────
  ACCORDION (falls Holm es im Editor nutzt)
──────────────────────────────────────────────*/
.accordion-item {
 background: transparent;
 border: 0;
 border-bottom: 1px solid var(--color-line);
}
.accordion-item:first-of-type {
 border-top: 1px solid var(--color-line);
}
.accordion-button {
 background: transparent;
 color: inherit;
 font-family: var(--font-display);
 font-weight: var(--font-weight-display);
 font-size: var(--font-size-md);
 text-transform: uppercase;
 padding: 1.1rem 0;
 box-shadow: none;
}
.accordion-button:not(.collapsed) {
 background: transparent;
 color: var(--color-brick);
 box-shadow: none;
}
.accordion-button:focus {
 box-shadow: none;
}
.accordion-body {
 padding: 0 0 1.5rem;
}

/*──────────────────────────────────────────────
  EINGEBETTETE VIDEOS (Zwei-Klick-Lösung aus functions.js)
──────────────────────────────────────────────*/
.video_iframeoverlay {
 padding: 1.5rem;
 background: var(--color-paper-2);
 font-size: var(--font-size-sm);
}

/*──────────────────────────────────────────────
  FOOTER (leckrCMS/plugins/themevariables/plugin.footer.php)
──────────────────────────────────────────────*/
.site-footer {
 background: var(--color-ink);
 color: var(--color-paper);
 padding: var(--space-xl) 0 0;
 font-size: var(--font-size-sm);
 border-top: 1px solid rgba(243, 241, 236, 0.1);
}
.site-footer .footer-grid {
 display: grid;
 grid-template-columns: 1.4fr 1fr 1fr 1fr;
 gap: 2rem;
 padding-bottom: var(--space-xl);
}
.site-footer .footer-logo {
 display: block;
 height: 30px;
 width: auto;
 margin-bottom: 1rem;
}
.site-footer .footer-claim {
 margin: 0;
 color: var(--color-fog);
 max-width: 26em;
}
.site-footer h2 {
 margin: 0 0 0.75rem;
 font-family: var(--font-mono);
 font-size: var(--font-size-xs);
 font-weight: var(--font-weight-medium);
 letter-spacing: 0.1em;
 color: var(--color-fog);
}
.site-footer p {
 font-size: inherit;
 margin: 0;
}
.site-footer a {
 color: var(--color-paper);
 text-decoration: none;
}
.site-footer a:hover {
 color: var(--color-brick-soft);
 text-decoration: underline;
}
.site-footer ul {
 list-style: none;
 padding: 0;
 margin: 0;
 font-size: inherit;
}
.site-footer .nav-link {
 padding: 0 0 0.35rem;
 color: var(--color-paper);
}
.site-footer .footer-bar {
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
 gap: 0.5rem 2rem;
 padding: 1.1rem 0 1.4rem;
 border-top: 1px solid rgba(243, 241, 236, 0.1);
 font-family: var(--font-mono);
 font-size: var(--font-size-xs);
 color: var(--color-fog);
}

@media (max-width: 991.98px) {
 .site-footer .footer-grid {
  grid-template-columns: 1fr 1fr;
 }
 .site-footer .footer-brand {
  grid-column: 1 / -1;
 }
}

/*──────────────────────────────────────────────
  HANDY
──────────────────────────────────────────────*/
@media (max-width: 575.98px) {
 .section-claim .claim-lines {
  grid-template-columns: 1fr;
 }
 .spalten-grid {
  grid-template-columns: 1fr;
 }
 .spalte,
 .spalte + .spalte {
  padding: 1rem 0 0.75rem;
  border-left: 0;
 }
 .spalte + .spalte {
  border-top: 1px solid var(--color-line);
 }
 .site-footer .footer-grid {
  grid-template-columns: 1fr;
 }
}