@charset "UTF-8";
/* =========================================================
   SH-Heilpraktiker – Global Styles
   Build with Dart Sass (empfohlen)
   ========================================================= */
/* 0) Projekt-Variablen (CSS Custom Properties) */
/* =========================================
   Variables
   ========================================= */
:root {
  /* Grundfarben */
  --bg: #ffffff;
  --fg: #202425;
  --muted: #5e6a6f;
  --brand-1: rgb(111, 192, 89);
  --brand: #1b7f6b;
  --brand-2: #0e5e4f;
  --surface: #f4f6f7;
  /* FIX: Erweiterte Farbpalette (optional für künftige Komponenten) */
  --error: #c62828; /* Rot für Fehlermeldungen */ /* FIX */
  --success: #2e7d32; /* Grün für positive Aktionen */ /* FIX */
  --warning: #f9a825; /* Gelb für Hinweise */ /* FIX */
  --info: #0277bd; /* Blau für neutrale Infos */ /* FIX */
  /* Radii & Schatten */
  --radius: 14px;
  --radius-sm: 8px; /* FIX */
  --radius-lg: 20px; /* FIX */
  --shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  --shadow-sm: 0 3px 10px rgba(0, 0, 0, 0.06); /* FIX */
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.12); /* FIX */
  /* Fokus-Stile */
  --focus-ring: 3px solid #1b7f6b;
  --focus-ring-soft: 3px solid #6fb8aa;
  /* Layout & Höhe */
  --hero-height: 48vh;
  --header-h: 48px;
  /* Tint-Defaults (sanfter Verlauf) */
  --tint-a: 0.12;
  --tint-b: 0.06;
  /* FIX: Fallback für abgerundete Container in alten Browsern */
}
@supports not (border-radius: max(1px)) {
  :root {
    --radius: 12px;
  }
}
:root {
  /* FIX: Dark-Mode-Basiswerte (optional) */
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101313;
    --fg: #eaeaea;
    --muted: #9aa1a5;
    --surface: #1a1d1e;
    --shadow: 0 4px 18px rgba(0, 0, 0, 0.5);
  }
}

/* 1) Fonts
   - Schalter hier konfigurieren:
     @use 'fonts' with ($use-custom-fonts: false);
     (true = Century Gothic laden, false = Systemfonts)
*/
/* =========================================
   Century Gothic – Custom Font Integration
   ========================================= */
/* Schalter: true = eigene Fonts aktiv, false = Standardsystem */
/* zentraler Pfad (einfach wartbar) */
/* Nur laden, wenn aktiviert */
/* Normal (400) */
@font-face {
  font-family: "CenturyGothic";
  src: local("Century Gothic"), local("CenturyGothic"), url("/assets/fonts/CenturyGothic.woff2") format("woff2"), url("/assets/fonts/CenturyGothic.woff") format("woff"), url("/assets/fonts/GOTHIC.TTF") format("truetype"); /* Fallback */
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  font-synthesis: none; /* verhindert künstliches Fett/Kursiv (FF/Chrome) */
}
/* Bold (700) */
@font-face {
  font-family: "CenturyGothic";
  src: local("Century Gothic Bold"), local("CenturyGothic-Bold"), url("/assets/fonts/CenturyGothic-Bold.woff2") format("woff2"), url("/assets/fonts/CenturyGothic-Bold.woff") format("woff"), url("/assets/fonts/GOTHICB.TTF") format("truetype"); /* Fallback */
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  font-synthesis: none;
}
/* Italic (400 italic) */
@font-face {
  font-family: "CenturyGothic";
  src: local("Century Gothic Italic"), local("CenturyGothic-Italic"), url("/assets/fonts/CenturyGothic-Italic.woff2") format("woff2"), url("/assets/fonts/CenturyGothic-Italic.woff") format("woff"), url("/assets/fonts/GOTHICI.TTF") format("truetype"); /* Fallback */
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  font-synthesis: none;
}
/* Bold Italic (700 italic) */
@font-face {
  font-family: "CenturyGothic";
  src: local("Century Gothic Bold Italic"), local("CenturyGothic-BoldItalic"), url("/assets/fonts/CenturyGothic-BoldItalic.woff2") format("woff2"), url("/assets/fonts/CenturyGothic-BoldItalic.woff") format("woff"), url("/assets/fonts/GOTHICBI.TTF") format("truetype"); /* Fallback */
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  font-synthesis: none;
}
/* Globale Aktivierung */
body {
  font-family: "CenturyGothic", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* optional, wenn gewünscht:
     text-rendering: optimizeLegibility;
  */
}

/* 2) Resets / Base – muss früh kommen */
/* =========================================
   Reset / Base
   ========================================= */
/* Box-Modell vereinheitlichen */
*, *::before, *::after {
  box-sizing: border-box;
} /* FIX */
/* Basis-HTML */
html {
  /* Sanftes Scrollen – aber respektiere Nutzer, die reduzierte Bewegung wünschen */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%; /* FIX: iOS Zoom/Textgröße konsistent */
  text-size-adjust: 100%; /* FIX */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  } /* FIX: A11y – kein erzwungenes smooth scroll */
}
/* Nullränder/-abstände */
html, body {
  margin: 0;
  padding: 0;
}

/* Body-Basis */
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
  color: var(--fg);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased; /* FIX: glattere Schrift auf WebKit */
  -moz-osx-font-smoothing: grayscale; /* FIX */
}

/* Medien-Defaults: responsive by default */
img, svg, video, canvas {
  max-width: 100%; /* FIX */
  height: auto; /* FIX */
  display: block; /* FIX: vermeidet inline-gap-Effekte */
}

/* Form-Controls erben Basis-Schrift (für konsistentes Look & Feel) */
input, button, textarea, select {
  font: inherit; /* FIX */
  color: inherit; /* FIX */
}

/* Links: Unterstreichung nur bei Hover/Fokus (Basis-Reset, optional) */
a {
  color: inherit; /* FIX: nutzt aktuelle Textfarbe */
  text-decoration: none; /* FIX */
}

a:hover, a:focus-visible {
  text-decoration: underline; /* FIX */
  outline-offset: 2px; /* FIX */
}

/* Headings: konsistente Abstände (kleiner Reset) */
h1, h2, h3, h4, h5, h6 {
  margin: 0.6em 0 0.35em; /* FIX */
  line-height: 1.2; /* FIX */
}

/* Listen: konsistente Abstände */
ul, ol {
  padding-left: 1.25rem;
  margin: 0.4em 0 0.8em;
} /* FIX */
/* Tabellen: Basis */
table {
  border-collapse: collapse;
  width: 100%;
} /* FIX */
/* Anker-Offsets für Sprungmarken */
#unsere-angebote,
#kontakt-oeffnung,
#ueber-uns,
#datenschutz {
  scroll-margin-top: var(--header-h);
}

/* 3) Typografie-Basis (Headings, Links, …) */
/* =========================================
   Typography (Headings, Paragraphs)
   ========================================= */
h1, h2, h3, h4 {
  line-height: 1.25;
  letter-spacing: 0.2px;
  margin: 0 0 12px 0;
}

/* — Hauptüberschrift — */
h1 {
  font-size: clamp(1.8rem, 2vw + 1rem, 2.4rem);
  font-weight: 700;
  margin-top: 24px;
}

/* — Zweite Ebene — */
h2 {
  font-size: clamp(1.5rem, 1.6vw + 1rem, 2rem);
  font-weight: 650;
  margin-top: 20px;
}

/* — Dritte Ebene — */
h3 {
  font-size: clamp(1.25rem, 1vw + 0.9rem, 1.6rem);
  font-weight: 600;
  margin-top: 16px;
}

/* — Zwischenebene knapp über Fließtext — */
h4 {
  font-size: clamp(1.05rem, 0.6vw + 0.85rem, 1.2rem);
  font-weight: 550;
  margin-top: 12px;
}

/* — Standardtext (leicht angehoben für bessere Lesbarkeit) — */
p {
  font-size: clamp(1rem, 0.8vw + 0.8rem, 1.1rem);
  line-height: 1.55;
  font-weight: 450;
  margin: 0 0 12px 0;
}

/* — Betonung (kräftig, kursiv, ruhig im Satzfluss) — */
strong {
  font-weight: 700; /* deutlich stärker, echtes Bold */
  font-style: italic; /* sanfte Kursive für lebendigere Betonung */
  letter-spacing: 0.05px;
  line-height: inherit;
  vertical-align: baseline;
  font-size: 1em;
}

/* — Kombination p strong: ruhige, aber markante Hervorhebung — */
p strong {
  font-weight: 700;
  font-style: italic;
  font-size: 1em;
}

/* — Links: schlicht, ohne Unterstreichung, mit sanftem Hover-Effekt — */
a {
  text-decoration: none;
  transition: color 0.25s ease, filter 0.25s ease, text-shadow 0.25s ease;
  color: inherit;
  text-underline-offset: 2px;
  text-decoration-thickness: 1.5px;
}

/* — sanfter Hover-Effekt — */
a:hover {
  filter: brightness(1.1);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

/* — Links mit Schatten — */
.shadow a,
a.shadow {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* — Varianten hell/dunkel — */
body:not(.dark) a:hover {
  color: #0044cc;
}

body.dark a:hover {
  color: #66aaff;
}

/* — Tastaturfokus — */
a:focus-visible {
  outline: var(--focus-ring);
  outline-offset: 2px;
  text-decoration: underline;
}

/* — Motion-Respect — */
@media (prefers-reduced-motion: reduce) {
  a {
    transition: none !important;
  }
}
/* 4) Utilities (Textfarben, Spacing, Schatten, Prose, Abstände, …) */
/* =========================================
   Utilities (Text, Spacing, Schatten, Prose, Padding, Margins)
   ========================================= */
/* ===== Typo-Kleinkram ===== */
.lead {
  font-size: 1.125rem;
  line-height: 1.7;
}

.small {
  font-size: 0.95rem;
  color: var(--muted);
}

.large {
  font-size: 1.3rem;
  font-weight: 600;
}

.quote {
  font-style: italic;
  color: var(--brand);
}

.section {
  padding: 28px 0;
}

/* =========================================
   TXT-UTILITIES (vereinheitlicht)
   – Farben, Ausrichtungen, Blocksatz
   – inkl. Abwärtskompatibilität (Aliasse)
   ========================================= */
/* ---- Farben (neue Syntax) ---- */
.txt-white {
  color: #fff !important;
}

.txt-light-grey {
  color: hsl(0, 0%, 66%) !important;
}

.txt-dark-grey {
  color: hsl(0, 0%, 33%) !important;
}

.txt-black {
  color: #000 !important;
}

.txt-brand {
  color: var(--brand) !important;
}

.txt-brand-2 {
  color: var(--brand-2) !important;
}

.txt-muted {
  color: var(--muted) !important;
}

.txt-red {
  color: #c00 !important;
}

.txt-green {
  color: seagreen !important;
}

.txt-blue {
  color: #0066cc !important;
}

.txt-yellow {
  color: rgb(255, 255, 0) !important;
}

.txt-orange {
  color: rgb(255, 127, 0) !important;
}

/* ---- Ausrichtung (neue Syntax) ---- */
.txt-left {
  text-align: left !important;
}

.txt-right {
  text-align: right !important;
}

.txt-center {
  text-align: center !important;
}

.txt-justify {
  text-align: justify !important;
  text-justify: inter-word; /* gleichmäßige Wortabstände */
  hyphens: auto; /* Silbentrennung bei <html lang="de"> */
  -webkit-hyphens: auto; /* FIX: Safari/WebKit */
  -ms-hyphens: auto; /* FIX: alter Edge/IE-Fallback (nicht schädlich) */
}

/* ---- Umfließender Text neben Floats ---- */
.txt-float {
  overflow: auto;
} /* BFC zur Containment von Floats */
/* =========================================
   Prose / Lesbarkeit
   – Eine Variante: bis zu 65 Zeichen, mobil flexibel
   ========================================= */
.prose {
  width: min(100%, 65ch); /* nie breiter als 65ch, schrumpft auf schmalen Screens */
  line-height: 1.7;
  overflow-wrap: anywhere; /* bricht lange Wörter/URLs zuverlässig */
  hyphens: auto; /* Silbentrennung (mit lang="de" im HTML) */
  -webkit-hyphens: auto; /* FIX */
  -ms-hyphens: auto; /* FIX */
  margin-inline: auto; /* Block kann zentriert werden (z. B. .mx-auto) */
  padding-inline: clamp(0.5ch, 1vw, 1.5ch); /* Dynamischer Rand: 0.5ch–1.5ch */
  /* FIX: hübschere Zeilenumbrüche in modernen Browsern (optional, no-op sonst) */
}
@supports (text-wrap: pretty) {
  .prose {
    text-wrap: pretty;
  }
}

/* =========================================
   Spacing Utilities
   ========================================= */
/* vertikale Abstände (historische Namen beibehalten) */
.spacer-w06 {
  margin: 6px 0 !important;
} /* vorher 06px */
.spacer-w12 {
  margin: 12px 0 !important;
}

.spacer-w24 {
  margin: 24px 0 !important;
}

.spacer-w36 {
  margin: 36px 0 !important;
}

.spacer-w48 {
  margin: 48px 0 !important;
}

.spacer-w60 {
  margin: 60px 0 !important;
}

.spacer-w72 {
  margin: 72px 0 !important;
}

.spacer-w84 {
  margin: 84px 0 !important;
}

.spacer-w96 {
  margin: 96px 0 !important;
}

.spacer-h06 {
  height: 6px !important;
}

.spacer-h12 {
  height: 12px !important;
}

.spacer-h24 {
  height: 24px !important;
}

.spacer-h36 {
  height: 36px !important;
}

.spacer-h48 {
  height: 48px !important;
}

.spacer-h60 {
  height: 60px !important;
}

.spacer-h72 {
  height: 72px !important;
}

.spacer-h84 {
  height: 84px !important;
}

.spacer-h96 {
  height: 96px !important;
}

/* =========================================
   Additive Spacer (neue Variante)
   ========================================= */
/* Konfiguration */
/* Schrittweite in px (1 = jede px-Stufe) */
/* maximale generierte Höhe in px */
/* 1) Basis: summiert alle möglichen Komponenten-Variablen */
/* optionaler Direktwert per inline style */
/* Obergrenze robust bestimmen (auch wenn max/step nicht ganzzahlig) */
.spacer {
  display: block;
  height: calc(var(--spacer-height, 0px) + var(--h1, 0px) + var(--h2, 0px) + var(--h3, 0px) + var(--h4, 0px) + var(--h5, 0px) + var(--h6, 0px) + var(--h7, 0px) + var(--h8, 0px) + var(--h9, 0px) + var(--h10, 0px) + var(--h11, 0px) + var(--h12, 0px) + var(--h13, 0px) + var(--h14, 0px) + var(--h15, 0px) + var(--h16, 0px) + var(--h17, 0px) + var(--h18, 0px) + var(--h19, 0px) + var(--h20, 0px) + var(--h21, 0px) + var(--h22, 0px) + var(--h23, 0px) + var(--h24, 0px) + var(--h25, 0px) + var(--h26, 0px) + var(--h27, 0px) + var(--h28, 0px) + var(--h29, 0px) + var(--h30, 0px) + var(--h31, 0px) + var(--h32, 0px) + var(--h33, 0px) + var(--h34, 0px) + var(--h35, 0px) + var(--h36, 0px) + var(--h37, 0px) + var(--h38, 0px) + var(--h39, 0px) + var(--h40, 0px) + var(--h41, 0px) + var(--h42, 0px) + var(--h43, 0px) + var(--h44, 0px) + var(--h45, 0px) + var(--h46, 0px) + var(--h47, 0px) + var(--h48, 0px) + var(--h49, 0px) + var(--h50, 0px) + var(--h51, 0px) + var(--h52, 0px) + var(--h53, 0px) + var(--h54, 0px) + var(--h55, 0px) + var(--h56, 0px) + var(--h57, 0px) + var(--h58, 0px) + var(--h59, 0px) + var(--h60, 0px) + var(--h61, 0px) + var(--h62, 0px) + var(--h63, 0px) + var(--h64, 0px) + var(--h65, 0px) + var(--h66, 0px) + var(--h67, 0px) + var(--h68, 0px) + var(--h69, 0px) + var(--h70, 0px) + var(--h71, 0px) + var(--h72, 0px) + var(--h73, 0px) + var(--h74, 0px) + var(--h75, 0px) + var(--h76, 0px) + var(--h77, 0px) + var(--h78, 0px) + var(--h79, 0px) + var(--h80, 0px) + var(--h81, 0px) + var(--h82, 0px) + var(--h83, 0px) + var(--h84, 0px) + var(--h85, 0px) + var(--h86, 0px) + var(--h87, 0px) + var(--h88, 0px) + var(--h89, 0px) + var(--h90, 0px) + var(--h91, 0px) + var(--h92, 0px) + var(--h93, 0px) + var(--h94, 0px) + var(--h95, 0px) + var(--h96, 0px) + var(--h97, 0px) + var(--h98, 0px) + var(--h99, 0px) + var(--h100, 0px)) !important; /* gewinnt bei Kombination mit alten fixen Klassen */
}

/* 2) Generator: jede Klasse setzt EINE eigene Variable (kein Überschreiben, daher additiv) */
.spacer-h1 {
  --h1: 1px;
}

.spacer-h2 {
  --h2: 2px;
}

.spacer-h3 {
  --h3: 3px;
}

.spacer-h4 {
  --h4: 4px;
}

.spacer-h5 {
  --h5: 5px;
}

.spacer-h6 {
  --h6: 6px;
}

.spacer-h7 {
  --h7: 7px;
}

.spacer-h8 {
  --h8: 8px;
}

.spacer-h9 {
  --h9: 9px;
}

.spacer-h10 {
  --h10: 10px;
}

.spacer-h11 {
  --h11: 11px;
}

.spacer-h12 {
  --h12: 12px;
}

.spacer-h13 {
  --h13: 13px;
}

.spacer-h14 {
  --h14: 14px;
}

.spacer-h15 {
  --h15: 15px;
}

.spacer-h16 {
  --h16: 16px;
}

.spacer-h17 {
  --h17: 17px;
}

.spacer-h18 {
  --h18: 18px;
}

.spacer-h19 {
  --h19: 19px;
}

.spacer-h20 {
  --h20: 20px;
}

.spacer-h21 {
  --h21: 21px;
}

.spacer-h22 {
  --h22: 22px;
}

.spacer-h23 {
  --h23: 23px;
}

.spacer-h24 {
  --h24: 24px;
}

.spacer-h25 {
  --h25: 25px;
}

.spacer-h26 {
  --h26: 26px;
}

.spacer-h27 {
  --h27: 27px;
}

.spacer-h28 {
  --h28: 28px;
}

.spacer-h29 {
  --h29: 29px;
}

.spacer-h30 {
  --h30: 30px;
}

.spacer-h31 {
  --h31: 31px;
}

.spacer-h32 {
  --h32: 32px;
}

.spacer-h33 {
  --h33: 33px;
}

.spacer-h34 {
  --h34: 34px;
}

.spacer-h35 {
  --h35: 35px;
}

.spacer-h36 {
  --h36: 36px;
}

.spacer-h37 {
  --h37: 37px;
}

.spacer-h38 {
  --h38: 38px;
}

.spacer-h39 {
  --h39: 39px;
}

.spacer-h40 {
  --h40: 40px;
}

.spacer-h41 {
  --h41: 41px;
}

.spacer-h42 {
  --h42: 42px;
}

.spacer-h43 {
  --h43: 43px;
}

.spacer-h44 {
  --h44: 44px;
}

.spacer-h45 {
  --h45: 45px;
}

.spacer-h46 {
  --h46: 46px;
}

.spacer-h47 {
  --h47: 47px;
}

.spacer-h48 {
  --h48: 48px;
}

.spacer-h49 {
  --h49: 49px;
}

.spacer-h50 {
  --h50: 50px;
}

.spacer-h51 {
  --h51: 51px;
}

.spacer-h52 {
  --h52: 52px;
}

.spacer-h53 {
  --h53: 53px;
}

.spacer-h54 {
  --h54: 54px;
}

.spacer-h55 {
  --h55: 55px;
}

.spacer-h56 {
  --h56: 56px;
}

.spacer-h57 {
  --h57: 57px;
}

.spacer-h58 {
  --h58: 58px;
}

.spacer-h59 {
  --h59: 59px;
}

.spacer-h60 {
  --h60: 60px;
}

.spacer-h61 {
  --h61: 61px;
}

.spacer-h62 {
  --h62: 62px;
}

.spacer-h63 {
  --h63: 63px;
}

.spacer-h64 {
  --h64: 64px;
}

.spacer-h65 {
  --h65: 65px;
}

.spacer-h66 {
  --h66: 66px;
}

.spacer-h67 {
  --h67: 67px;
}

.spacer-h68 {
  --h68: 68px;
}

.spacer-h69 {
  --h69: 69px;
}

.spacer-h70 {
  --h70: 70px;
}

.spacer-h71 {
  --h71: 71px;
}

.spacer-h72 {
  --h72: 72px;
}

.spacer-h73 {
  --h73: 73px;
}

.spacer-h74 {
  --h74: 74px;
}

.spacer-h75 {
  --h75: 75px;
}

.spacer-h76 {
  --h76: 76px;
}

.spacer-h77 {
  --h77: 77px;
}

.spacer-h78 {
  --h78: 78px;
}

.spacer-h79 {
  --h79: 79px;
}

.spacer-h80 {
  --h80: 80px;
}

.spacer-h81 {
  --h81: 81px;
}

.spacer-h82 {
  --h82: 82px;
}

.spacer-h83 {
  --h83: 83px;
}

.spacer-h84 {
  --h84: 84px;
}

.spacer-h85 {
  --h85: 85px;
}

.spacer-h86 {
  --h86: 86px;
}

.spacer-h87 {
  --h87: 87px;
}

.spacer-h88 {
  --h88: 88px;
}

.spacer-h89 {
  --h89: 89px;
}

.spacer-h90 {
  --h90: 90px;
}

.spacer-h91 {
  --h91: 91px;
}

.spacer-h92 {
  --h92: 92px;
}

.spacer-h93 {
  --h93: 93px;
}

.spacer-h94 {
  --h94: 94px;
}

.spacer-h95 {
  --h95: 95px;
}

.spacer-h96 {
  --h96: 96px;
}

.spacer-h97 {
  --h97: 97px;
}

.spacer-h98 {
  --h98: 98px;
}

.spacer-h99 {
  --h99: 99px;
}

.spacer-h100 {
  --h100: 100px;
}

/* =========================================
   Schatten-Utilities (Text)
   ========================================= */
.txt-shadow-white {
  text-shadow: 0 0 2px rgb(255, 255, 255), 0 0 4px rgba(255, 255, 255, 0.8);
}

.txt-shadow-black {
  text-shadow: 0 0 2px rgb(0, 0, 0), 0 0 4px rgba(0, 0, 0, 0.8);
}

.txt-shadow-blue {
  text-shadow: 0 0 2px rgb(0, 80, 160), 0 0 4px rgba(0, 80, 160, 0.8);
}

.txt-shadow-green {
  text-shadow: 0 0 2px rgb(27, 127, 107), 0 0 6px rgba(27, 127, 107, 0.8);
}

.txt-outline {
  color: currentColor;
  -webkit-text-stroke: 2px #000;
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
}

/* =========================================
   Padding & Margins (variabel + feste Stufen)
   ========================================= */
.pad-x {
  padding-inline: var(--px, 0);
} /* usage: style="--px:16px" */
.pad-y {
  padding-block: var(--py, 0);
} /* usage: style="--py:12px" */
.margin-left-px {
  margin-left: var(--ml, 0px);
}

.margin-right-px {
  margin-right: var(--mr, 0px);
}

.margin-x-px {
  margin-left: var(--mx, 0px);
  margin-right: var(--mx, 0px);
}

.ml-0 {
  margin-left: 0;
}

.mr-0 {
  margin-right: 0;
}

.ml-4 {
  margin-left: 4px;
}

.mr-4 {
  margin-right: 4px;
}

.ml-8 {
  margin-left: 8px;
}

.mr-8 {
  margin-right: 8px;
}

.ml-12 {
  margin-left: 12px;
}

.mr-12 {
  margin-right: 12px;
}

.ml-16 {
  margin-left: 16px;
}

.mr-16 {
  margin-right: 16px;
}

.ml-24 {
  margin-left: 24px;
}

.mr-24 {
  margin-right: 24px;
}

.ml-32 {
  margin-left: 32px;
}

.mr-32 {
  margin-right: 32px;
}

.ml-48 {
  margin-left: 48px;
}

.mr-48 {
  margin-right: 48px;
}

.mx-0 {
  margin-left: 0;
  margin-right: 0;
}

.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}

.mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

/* 5) Figure / Square / Bild-Utilities */
/* =========================================
   Figure & Square Components (+ Responsive)
   ========================================= */
/* Basis-Figure */
.figure,
figure.figure {
  --figure-gap-x: 1rem; /* horizontaler Abstand zum umfließenden Text */
  --figure-gap-y: .5rem; /* vertikaler Abstand */
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: var(--figure-gap-y) auto;
  text-align: center;
}

/* klassische float-Varianten nach außen */
.figure.left,
figure.left,
figure.figure.left {
  float: left;
  margin: var(--figure-gap-y) var(--figure-gap-x) var(--figure-gap-y) 0;
  text-align: left;
}

.figure.right,
figure.right,
figure.figure.right {
  float: right;
  margin: var(--figure-gap-y) 0 var(--figure-gap-y) var(--figure-gap-x);
  text-align: right;
}

.figure.align-mid,
figure.align-mid,
figure.figure.align-mid {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  float: none;
}

/* Align-Varianten mit gleicher Logik (falls im Content genutzt) */
.figure.align-left,
figure.align-left,
figure.figure.align-left {
  float: left;
  margin: var(--figure-gap-y) var(--figure-gap-x) var(--figure-gap-y) 0;
  text-align: left;
}

.figure.align-right,
figure.align-right,
figure.figure.align-right {
  float: right;
  margin: var(--figure-gap-y) 0 var(--figure-gap-y) var(--figure-gap-x);
  text-align: right;
}

/* Figures in txt-float-Kontext: gleicher Abstand, aber explizit auf den Container bezogen */
.txt-float > .figure.align-left,
.txt-float > figure.align-left {
  margin: var(--figure-gap-y) var(--figure-gap-x) var(--figure-gap-y) 0;
}

.txt-float > .figure.align-right,
.txt-float > figure.align-right {
  margin: var(--figure-gap-y) 0 var(--figure-gap-y) var(--figure-gap-x);
}

/* Bilder in Figures */
.figure img,
figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Caption im Figure-Kontext */
.figure .caption,
figure .caption,
figure figcaption {
  font-size: 0.85em;
  line-height: 1.35;
  margin-top: 0.4em;
  opacity: 0.85;
}

/* =========================================================
   Figures im Fließtext (.prose)
   ========================================================= */
/* Grundabstände und Float-Clear im Prosa-Kontext */
:where(.prose) > .figure,
:where(.prose) > figure {
  margin-top: var(--figure-gap-y);
  margin-bottom: var(--figure-gap-y);
}

/* Float-Clear, damit .prose nicht „ausläuft“ */
:where(.prose)::after {
  content: "";
  display: block;
  clear: both;
}

/* Linksbündige Figur mit Textumfluss innerhalb .prose */
:where(.prose) > .figure.align-left,
:where(.prose) > figure.align-left {
  float: left;
  margin: var(--figure-gap-y) var(--figure-gap-x) var(--figure-gap-y) 0;
}

/* Rechtsbündige Figur mit Textumfluss innerhalb .prose */
:where(.prose) > .figure.align-right,
:where(.prose) > figure.align-right {
  float: right;
  margin: var(--figure-gap-y) 0 var(--figure-gap-y) var(--figure-gap-x);
}

/* =========================================
   Quadratischer Medien-Container (.sq)
   ========================================= */
.sq {
  --sq-size: 180px;
  --sq-bg: transparent;
  /* Border-Konfiguration:
     Standard: KEIN sichtbarer Rahmen */
  --sq-border-width: 0px;
  --sq-border-color: #d2d7da;
  width: var(--sq-size);
  aspect-ratio: 1/1; /* quadratisch */
  background: var(--sq-bg);
  border: var(--sq-border-width) solid var(--sq-border-color);
  border-radius: var(--radius);
  display: grid; /* zentrieren */
  place-items: center;
  overflow: hidden;
  box-sizing: border-box;
  contain: layout paint;
  /* Fallback, falls aspect-ratio nicht unterstützt/greift */
}
@supports not (aspect-ratio: 1/1) {
  .sq {
    height: var(--sq-size);
  }
}

/* Bild IMMER vollständig & mittig einpassen */
.sq img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  /* EXIF-Orientierung respektieren (besonders bei Handyfotos) */
  image-orientation: from-image;
  /* „Max“-Bremsen aus Resets/anderen Regeln neutralisieren */
  max-width: none;
  max-height: none;
}

/* Varianten
   ---------------------------------- */
/* plain: kein Rahmen, kein Hintergrund */
.sq.plain {
  --sq-bg: transparent;
  --sq-border-width: 0;
}

/* filled: Hintergrund + automatisch Rahmen */
.sq.filled {
  --sq-bg: var(--surface);
  --sq-border-width: 1px; /* Border automatisch an */
}

/* weißer Hintergrund, Border optional über .border/.shadow/etc. */
.sq.white {
  --sq-bg: #fff;
}

/* expliziter Rahmen (optional) */
.sq.border {
  --sq-border-width: 1px;
  --sq-border-color: #c8cfd3;
}

/* explizit „kein Rahmen“, falls nötig:
   Kannst du bei Bedarf wieder aktivieren – im Moment nicht mehr erforderlich */
/* .sq.no-border { --sq-border-width: 0; } */
/* Größen-Utilities */
.sq-100 {
  --sq-size: 100px;
}

.sq-120 {
  --sq-size: 120px;
}

.sq-140 {
  --sq-size: 140px;
}

.sq-160 {
  --sq-size: 160px;
}

.sq-180 {
  --sq-size: 180px;
}

.sq-200 {
  --sq-size: 200px;
}

.sq-220 {
  --sq-size: 220px;
}

.sq-240 {
  --sq-size: 240px;
}

.sq-260 {
  --sq-size: 260px;
}

.sq-280 {
  --sq-size: 280px;
}

.sq-300 {
  --sq-size: 300px;
}

.sq-320 {
  --sq-size: 320px;
}

.sq-340 {
  --sq-size: 340px;
}

.sq-360 {
  --sq-size: 360px;
}

.sq-380 {
  --sq-size: 380px;
}

.sq-400 {
  --sq-size: 400px;
}

.sq-fluid {
  width: 100%;
} /* behält aspect-ratio 1/1 und skaliert in Breite */
/* =========================================================
   Schatten-Varianten für Figures & Squares
   ========================================= */
/* Schwarzer Schatten – neutrales Verhalten */
.fig-shadow-black, .sq.shadow {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}

/* Weißer „Glow“ */
.fig-shadow-white {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
}

/* Verhalten auf .sq:
   Schatten → Border automatisch an + passende Farbe */
.sq.fig-shadow-black, .sq.shadow {
  --sq-border-width: 1px;
  --sq-border-color: #fff;
}

.sq.fig-shadow-white {
  --sq-border-width: 1px;
  --sq-border-color: #000;
}

/* Verhalten auf .figure (falls direkt genutzt) */
.figure.fig-shadow-black, .figure.sq.shadow,
figure.fig-shadow-black,
figure.sq.shadow {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  border: 1px solid #fff;
}

.figure.fig-shadow-white,
figure.fig-shadow-white {
  box-shadow: 0 0 18px rgba(255, 255, 255, 0.9);
  border: 1px solid #000;
}

/* Alte Klasse .shadow als Alias für „schwarzer Schatten“ (Abwärtskompatibilität) */
/* =========================================================
   Eigenständige Caption-Variante (falls ohne .figure genutzt)
   ========================================================= */
.caption {
  font-size: 8px;
  line-height: 1.2;
  color: var(--muted);
  text-align: center;
  max-width: var(--sq-size);
}

.caption-sm {
  font-size: 10px;
  line-height: 1.25;
}

/* =========================================================
   Bild-Fit-Utilities (optional nutzbar außerhalb .sq)
   ========================================================= */
.img-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.img-contain {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

/* =========================================================
   Responsive Figure-Alignment (float aufbrechen & zentrieren)
   ========================================================= */
@media (max-width: 700px) {
  /* klassische Varianten */
  .figure.left,
  .figure.right,
  figure.left,
  figure.right {
    float: none;
    display: block;
    margin: 0.5rem auto 1rem;
    text-align: center;
  }
  /* Align-Varianten (falls aus Utilities genutzt) */
  .figure.align-left,
  .figure.align-right,
  figure.align-left,
  figure.align-right {
    float: none;
    display: block;
    margin: 0.5rem auto 1rem;
    text-align: center;
  }
  /* Bilder skalieren */
  .figure img,
  figure img {
    max-width: 100%;
    height: auto;
  }
  /* Optional: innerhalb .prose identisches Verhalten */
  :where(.prose) .figure.align-left,
  :where(.prose) .figure.align-right,
  :where(.prose) figure.align-left,
  :where(.prose) figure.align-right {
    float: none;
    display: block;
    margin: 0.5rem auto 1rem;
    text-align: center;
  }
}
/* 6) Layout-Grundlagen (Container, Header, Footer, Grid-Rahmen) */
/* =========================================
   Layout: Container, Header, Nav, Footer, Grid
   ========================================= */
/* Container */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box; /* FIX: verhindert Überlauf inkl. Padding */
}

/* Header (ohne NAV-Definitionen) */
header.site {
  position: sticky;
  top: 0;
  background: var(--bg);
  border-bottom: 1px solid #e8ecef;
  z-index: 1000;
  padding: 0;
  text-align: left;
  /* FIX: stabileres Rendering bei sticky + Schatten/Filter */
  will-change: transform; /* FIX */
  backface-visibility: hidden; /* FIX */
}

/* Footer */
footer.site {
  margin-top: 60px;
  border-top: 1px solid #e8ecef;
  padding: 26px 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* Grid (generisch) */
.grid {
  display: grid;
  gap: var(--gap, 18px); /* FIX: konfigurierbares Gap */
}

.grid.cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
} /* FIX: minmax(0,1fr) für FF */
@media (max-width: 900px) {
  .grid.cols-3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  } /* FIX */
}
@media (max-width: 600px) {
  .grid.cols-3 {
    grid-template-columns: 1fr;
  } /* FIX */
}
/* removed: NAV styles -> see _nav.scss */
/* --- Mobile-Feinschliff --------------------------------------------------- */
@media (max-width: 600px) {
  .container {
    padding: 0 12px;
  } /* FIX: etwas kompakter auf sehr kleinen Screens */
}
/* 7) Butterfly (Overlay/Animation) */
/* =========================================
   🦋 Butterfly – sichtbar & mit Glow
   ========================================= */
.butterfly {
  position: fixed;
  left: 0;
  top: 0;
  /* width: 28px; height: 28px; */
  width: 32px;
  height: 32px;
  font-size: 28px;
  line-height: 28px;
  transform: translate(-50%, -50%) rotate(0deg);
  z-index: 10050; /* über Drawer/Backdrop */
  pointer-events: none; /* kein Hover nötig; Recolor via JS */
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.2s ease, filter 0.3s ease;
  filter: hue-rotate(0deg) saturate(150%);
  --butterfly-glow: transparent;
  /* NEU: eigener Stacking-Kontext, damit ::after sichtbar bleibt */
  isolation: isolate;
  /* FIX: bessere Performance & stabileres Rendering in FF/Chrome */
  will-change: transform, opacity, filter; /* FIX */
  contain: layout style paint; /* FIX */
  backface-visibility: hidden; /* FIX */
}

.butterfly--visible {
  opacity: 1;
}

@keyframes butterfly-flutter {
  0% {
    transform: translate(-50%, -50%) rotate(-10deg);
  }
  50% {
    transform: translate(-50%, -50%) rotate(8deg);
  }
  100% {
    transform: translate(-50%, -50%) rotate(-10deg);
  }
}
.butterfly--flying {
  animation: butterfly-flutter 0.6s ease-in-out infinite;
}

.butterfly--landed {
  animation: none;
  transform: translate(-50%, -90%) rotate(0deg);
  opacity: 1;
}

/* Klick-Effekt: Butterfly kurz vergrößern und blinken */
.butterfly--clicked {
  transform: translate(-50%, -50%) scale(1.8) rotate(0deg);
  animation: butterfly-click-blink 0.25s ease-in-out alternate 6;
}

/* Leichtes Aufblitzen beim Klick */
@keyframes butterfly-click-blink {
  from {
    opacity: 1;
  }
  to {
    opacity: 0.35;
  }
}
/* NEU: über dem Glow rendern */
.butterfly__wings {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
  transform-origin: 50% 50%;
  position: relative;
  z-index: 1;
}

.butterfly__wings img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* NEU: z-index 0 statt -1 → bleibt sichtbar hinter den Wings */
.butterfly::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--butterfly-glow);
  filter: blur(8px);
  z-index: 0;
  transition: background 0.25s ease, filter 0.25s ease;
  pointer-events: none; /* FIX: kein Hit-Test auf dem Glow */
}

/* Safety: sichtbar auch ohne Animation */
@media (prefers-reduced-motion: reduce) {
  .butterfly {
    /* Animationen runterfahren, aber Sichtbarkeit erhalten */
    transition: opacity 0.2s linear; /* FIX: einfache Transition statt Mehrfach-Props */
  }
  .butterfly--flying {
    animation: none !important;
  } /* FIX */
}
/* =========================================
   Tinkerbell-Style Trail statt statischem Glow
   ========================================= */
/* Alten statischen Glow deaktivieren */
.butterfly::after,
.butterfly__glow {
  opacity: 0;
  background: transparent;
  filter: none;
  box-shadow: none;
}

/* =========================================
   Butterfly – TinkerBell-Trail
   ========================================= */
.butterfly-trail-dot {
  position: fixed;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  pointer-events: none;
  /* TinkerBell-Farbe */
  background: #fff8c2;
  box-shadow: 0 0 4px rgba(255, 248, 194, 0.9), 0 0 12px rgba(255, 248, 194, 0.8), 0 0 22px rgba(255, 248, 194, 0.6);
  transform: translate(-50%, -50%) scale(0.3);
  opacity: 0;
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
  /* knapp unter dem Schmetterling (10050) */
  z-index: 10040;
}

.butterfly-trail-dot.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.butterfly-trail-dot.is-fading {
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.1);
}

/* 8) Layer-System (L0/L1/L2 für Seitenaufbau) */
/* =========================================
   LAYER – paralleles Testlayout zur HERO (autark & gescoped)
   Struktur:
   L0: .layer
   L1: .layer-top | .layer-mid | .layer-btm
   L2: .layer-top-left|mid|right, .layer-mid-*, .layer-btm-*
   L0/L1/L2 getrennt steuerbar, L2-Overlay nur explizit
   ========================================= */
/* -------- L0: Grundgerüst + optionales Global-Overlay -------- */
.layer {
  /* =========================
     Abstands-Variablen (L0/L1/L2)
     ========================= */
  --L0-x: 0px; /* Außenabstand links/rechts der gesamten Section (nur boxed) */
  --L0-y: 0px; /* Außenabstand oben/unten der gesamten Section (L0) */
  --L1-x: 6px; /* Innenabstand horizontal auf L1-Ebene (Container) */
  --L1-y: 6px; /* Innenabstand vertikal + Zeilenabstand (top/mid/btm) */
  --L2-x: 6px; /* Abstand horizontal: zwischen Zellen + Zell-Innenabstand */
  --L2-y: 6px; /* Zell-Innenabstand vertikal */
  /* =========================
     L0: technisches Layout
     ========================= */
  position: relative;
  /* Keine Mindesthöhe mehr – Höhe folgt dem Inhalt */
  display: flex;
  align-items: stretch;
  /* Außenabstände nur vertikal (horizontal wird durch Full-bleed geregelt) */
  margin-top: var(--L0-y);
  margin-bottom: var(--L0-y);
  /* Auto-Grid-Min (nur optional genutzt) */
  --layer-col-min: 340px;
  /* L0-Defaults (nur diese Layer; Fallback für L1/L2) */
  --opac-rgb-l0: 255 255 255; /* R G B */
  --opac-a-l0: 0; /* 0..1 */
  --cell-bg-l0: none; /* optionales Default-Zellbild */
  background-color: transparent;
  /* ===== Full-bleed: immer an Viewportbreite koppeln ===== */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Opt-Out: boxed Variante (zentriert, falls benötigt) */
.layer.boxed {
  width: auto;
  margin-left: auto;
  margin-right: auto;
  padding-inline: var(--L0-x);
}

/* Mini-Variante – behält nur das Innenpadding (ohne Mindesthöhe)
   → kann via .layer.mini { --L1-x / --L1-y / --L2-x / --L2-y } angepasst werden */
.layer.mini > .container {
  padding: var(--layer-mini-pad, 32px 20px);
}

/* L0-Hintergrundbild (optional) */
.layer > .layer-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
  z-index: 0;
  background-color: var(--bg);
}

/* Inhalt über Bild: Container ist das Zeilen-Grid (ersetzt .hero-split) */
.layer > .container {
  position: relative;
  color: #fff;
  z-index: 2;
  display: grid;
  grid-auto-rows: auto; /* Zeilenhöhe = höchste Zelle */
  row-gap: var(--L1-y); /* Abstand zwischen .layer-top / .layer-mid / .layer-btm */
  width: 100%;
  /* Innenabstand für L1-Content (oben/unten/links/rechts) */
  padding-inline: var(--L1-x);
  padding-block: var(--L1-y);
  /* Globale Container-Limits neutralisieren → echte Viewportbreite nutzen */
  max-width: none;
  margin: 0;
  box-sizing: border-box;
}

/* Globaler Layer-Schimmer + globaler Opac (nur L0-Ebene) */
.layer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(0, 0, 0, 0.08) 60%, rgba(255, 255, 255, 0)), linear-gradient(rgb(var(--opac-rgb-l0)/var(--opac-a-l0)), rgb(var(--opac-rgb-l0)/var(--opac-a-l0)));
}

/* ---------------------------------
   L1: Zeilen (Grid + Zeilen-Overlay)
   --------------------------------- */
.layer-top,
.layer-mid,
.layer-btm {
  position: relative;
  display: grid;
  column-gap: var(--L2-x); /* horizontaler Abstand zwischen Zellen (L2) */
  row-gap: var(--L2-y); /* vertikaler Abstand in der Zeile (falls nötig) */
  align-items: stretch; /* Zellen gleichen sich in der Höhe an */
  width: 100%;
  /* Fallback: 1 Spalte */
  grid-template-columns: 1fr;
}

/* ---- Spaltenlogik via :has() – TOP ---- */
.layer-top:has(> .layer-top-left):has(> .layer-top-mid):has(> .layer-top-right) {
  grid-template-columns: repeat(3, 1fr);
}

.layer-top:has(> .layer-top-left):has(> .layer-top-right):not(:has(> .layer-top-mid)),
.layer-top:has(> .layer-top-left):has(> .layer-top-mid):not(:has(> .layer-top-right)),
.layer-top:has(> .layer-top-mid):has(> .layer-top-right):not(:has(> .layer-top-left)) {
  grid-template-columns: repeat(2, 1fr);
}

.layer-top:has(> .layer-top-left):not(:has(> .layer-top-mid, > .layer-top-right)),
.layer-top:has(> .layer-top-mid):not(:has(> .layer-top-left, > .layer-top-right)),
.layer-top:has(> .layer-top-right):not(:has(> .layer-top-left, > .layer-top-mid)) {
  grid-template-columns: 1fr;
}

/* ---- Spaltenlogik via :has() – MID ---- */
.layer-mid:has(> .layer-mid-left):has(> .layer-mid-mid):has(> .layer-mid-right) {
  grid-template-columns: repeat(3, 1fr);
}

.layer-mid:has(> .layer-mid-left):has(> .layer-mid-right):not(:has(> .layer-mid-mid)),
.layer-mid:has(> .layer-mid-left):has(> .layer-mid-mid):not(:has(> .layer-mid-right)),
.layer-mid:has(> .layer-mid-mid):has(> .layer-mid-right):not(:has(> .layer-mid-left)) {
  grid-template-columns: repeat(2, 1fr);
}

.layer-mid:has(> .layer-mid-left):not(:has(> .layer-mid-mid, > .layer-mid-right)),
.layer-mid:has(> .layer-mid-mid):not(:has(> .layer-mid-left, > .layer-mid-right)),
.layer-mid:has(> .layer-mid-right):not(:has(> .layer-mid-left, > .layer-mid-mid)) {
  grid-template-columns: 1fr;
}

/* ---- Spaltenlogik via :has() – BTM ---- */
.layer-btm:has(> .layer-btm-left):has(> .layer-btm-mid):has(> .layer-btm-right) {
  grid-template-columns: repeat(3, 1fr);
}

.layer-btm:has(> .layer-btm-left):has(> .layer-btm-right):not(:has(> .layer-btm-mid)),
.layer-btm:has(> .layer-btm-left):has(> .layer-btm-mid):not(:has(> .layer-btm-right)),
.layer-btm:has(> .layer-btm-mid):has(> .layer-btm-right):not(:has(> .layer-btm-left)) {
  grid-template-columns: repeat(2, 1fr);
}

.layer-btm:has(> .layer-btm-left):not(:has(> .layer-btm-mid, > .layer-btm-right)),
.layer-btm:has(> .layer-btm-mid):not(:has(> .layer-btm-left, > .layer-btm-right)),
.layer-btm:has(> .layer-btm-right):not(:has(> .layer-btm-left, > .layer-btm-mid)) {
  grid-template-columns: 1fr;
}

/* L1: Direkter Content muss über dem Zeilen-Overlay (::before) liegen */
.layer-top > *, .layer-top > :not(.layer-top-left):not(.layer-top-mid):not(.layer-top-right),
.layer-mid > :not(.layer-mid-left):not(.layer-mid-mid):not(.layer-mid-right),
.layer-btm > :not(.layer-btm-left):not(.layer-btm-mid):not(.layer-btm-right) {
  position: relative;
  z-index: 2;
}

/* Zeilen-Overlay (unter Inhalt)
   Standard: transparent
   Nur wenn L1 selbst --opac-rgb-l1 / --opac-a-l1 gesetzt bekommt
   (z. B. über .layer-top.opac-2 oder data-opac auf der Zeile)
*/
.layer-top::before,
.layer-mid::before,
.layer-btm::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--opac-rgb-l1, 255 255 255)/var(--opac-a-l1, 0));
}

/* ---------------------------------
   L2: Zellen (Base → Opac → Content)
   --------------------------------- */
.layer-top-left, .layer-top-mid, .layer-top-right,
.layer-mid-left, .layer-mid-mid, .layer-mid-right,
.layer-btm-left, .layer-btm-mid, .layer-btm-right {
  /* Wichtig: L2 erbt KEIN Opac von L1 – nur explizit gesetztes L2! */
  --opac-rgb: var(--opac-rgb-l2, 255 255 255);
  --opac-a: var(--opac-a-l2, 0);
  /* Base-Bilder dürfen weiter von L1/L0 kommen */
  --cell-bg: var(--cell-bg-l2, var(--cell-bg-l1, var(--cell-bg-l0, none)));
  position: relative; /* für ::before/::after */
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
  align-items: center;
  min-width: 0;
  min-height: 0; /* verhindert ungewolltes Überlaufen bei viel Inhalt */
  /* Innenabstand für L2-Content (Texte/Bilder) */
  padding-inline: var(--L2-x);
  padding-block: var(--L2-y);
}

/* Zell-Base (als Background über ::before) – z = 0 */
.layer-top-left::before, .layer-top-mid::before, .layer-top-right::before,
.layer-mid-left::before, .layer-mid-mid::before, .layer-mid-right::before,
.layer-btm-left::before, .layer-btm-mid::before, .layer-btm-right::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: var(--cell-bg);
  background-size: cover;
  background-position: center;
}

/* Alternative Zell-Base als <img> – ebenfalls z = 0 */
.layer .cell-base {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Zell-Overlay (Opac) – über Base, unter Content – z = 1 */
.layer-top-left::after, .layer-top-mid::after, .layer-top-right::after,
.layer-mid-left::after, .layer-mid-mid::after, .layer-mid-right::after,
.layer-btm-left::after, .layer-btm-mid::after, .layer-btm-right::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgb(var(--opac-rgb)/var(--opac-a));
}

/* Content liegt über Overlay – z = 2 */
.layer-top-left > *, .layer-top-mid > *, .layer-top-right > *,
.layer-mid-left > *, .layer-mid-mid > *, .layer-mid-right > *,
.layer-btm-left > *, .layer-btm-mid > *, .layer-btm-right > * {
  position: relative;
  z-index: 2;
  margin-top: 0 !important;
}

/* ---------------------------------
   Bild-Helfer (analog zu HERO)
   --------------------------------- */
.layer .sq {
  display: flex;
  align-items: center;
  justify-content: center;
}
@supports not (aspect-ratio: 1/1) {
  .layer .sq {
    height: var(--sq-size);
  }
}

/* Stufen */
.layer .sq.sq-200 {
  --sq-size: 200px;
}

.layer .sq.sq-180 {
  --sq-size: 180px;
}

.layer .sq.sq-160 {
  --sq-size: 160px;
}

.layer .sq.sq-140 {
  --sq-size: 140px;
}

@media (max-width: 900px) {
  .layer .sq.sq-200 {
    --sq-size: 180px;
  }
  .layer .sq.sq-180 {
    --sq-size: 160px;
  }
  .layer .sq.sq-160 {
    --sq-size: 140px;
  }
  .layer .sq.sq-140 {
    --sq-size: 120px;
  }
}
@media (max-width: 600px) {
  .layer .sq.sq-200 {
    --sq-size: 160px;
  }
  .layer .sq.sq-180 {
    --sq-size: 140px;
  }
  .layer .sq.sq-160 {
    --sq-size: 120px;
  }
  .layer .sq.sq-140 {
    --sq-size: 100px;
  }
}
/* Bilder in .sq */
.layer .sq > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
  image-orientation: from-image;
}

/* ---------------------------------
   Figuren / Captions / Textfluss
   --------------------------------- */
.layer .prose .figure,
.layer .txt-justify .figure {
  display: block;
}

.layer .prose .figure.align-left,
.layer .txt-justify .figure.align-left {
  float: left;
  margin: var(--figure-gap-y) var(--figure-gap-x) var(--figure-gap-y) 0;
}

.layer .prose .figure.align-right,
.layer .txt-justify .figure.align-right {
  float: right;
  margin: var(--figure-gap-y) 0 var(--figure-gap-y) var(--figure-gap-x);
}

.layer .prose .figure.align-mid,
.layer .txt-justify .figure.align-mid,
.layer .prose .figure:not(.align-left):not(.align-right),
.layer .txt-justify .figure:not(.align-left):not(.align-right) {
  float: none;
  display: block;
  width: fit-content;
  max-width: 100%;
  margin: var(--figure-gap-y) auto;
  text-align: center;
}

.layer .prose .figure .sq,
.layer .txt-justify .figure .sq {
  display: block;
}

.layer .prose .figure .caption,
.layer .txt-justify .figure .caption {
  display: block;
  width: 100%;
}

.layer .prose::after,
.layer .txt-justify::after {
  content: "";
  display: block;
  clear: both;
}

/* ---------------------------------
   Layout / Utilities / Accessibility
   --------------------------------- */
.layer .vc {
  justify-content: center !important;
}

/* Zell-Ausrichtung links, wenn .txt-left auf der Zelle sitzt */
.layer-top-left.txt-left, .layer-top-mid.txt-left, .layer-top-right.txt-left,
.layer-mid-left.txt-left, .layer-mid-mid.txt-left, .layer-mid-right.txt-left,
.layer-btm-left.txt-left, .layer-btm-mid.txt-left, .layer-btm-right.txt-left {
  align-items: flex-start !important;
}

/* Vollhöhe & Scroll analog zu HERO (nur wenn explizit gewünscht) */
.layer-full {
  min-height: calc(min(100dvh, 100vh) - var(--header-h));
}

.layer-scroll {
  max-height: calc(min(100dvh, 100vh) - var(--header-h));
  overflow-y: auto;
}

/* Bewegungsreduktion */
@media (prefers-reduced-motion: reduce) {
  .layer-img,
  .layer::after {
    transition: none !important;
    animation: none !important;
  }
}
/* Text-Ausrichtung utilities im Layer-Scope */
.layer .txt-left {
  text-align: left !important;
}

.layer .txt-center {
  text-align: center !important;
}

.layer .txt-right {
  text-align: right !important;
}

/* Optionale schmale Lesespalte; zentriert, wenn txt-center */
.layer .prose {
  max-width: var(--prose-w, 65ch);
}

.layer .prose.txt-center {
  margin-left: auto;
  margin-right: auto;
}

/* ---------------------------------
   UTILITIES – OPAC (scoped auf .layer)
   ---------------------------------

   Wichtig: "opac" nur an Row/Zelle verwenden!
   Erlaubte Targets:
     - .layer-top, .layer-mid, .layer-btm (L1 → Zeilen-Overlay)
     - .layer-*-left|mid|right (L2 → Zellen-Overlay)
   "opac" an .prose/.figure/.quote/etc. wird ignoriert (keine Wirkung).
*/
/* Global-Stufen → L0 (wirkt auf den globalen Layer-Schleier ::after) */
.layer.opac-1 {
  --opac-rgb-l0: 255 255 255;
  --opac-a-l0: .20;
}

.layer.opac-2 {
  --opac-rgb-l0: 255 255 255;
  --opac-a-l0: .40;
}

.layer.opac-3 {
  --opac-rgb-l0: 255 255 255;
  --opac-a-l0: .60;
}

.layer.opac-4 {
  --opac-rgb-l0: 255 255 255;
  --opac-a-l0: .80;
}

.layer.opac-5 {
  --opac-rgb-l0: 255 255 255;
  --opac-a-l0: 1;
}

/* Zeilen-Stufen → L1 */
.layer .layer-top.opac-1,
.layer .layer-mid.opac-1,
.layer .layer-btm.opac-1 {
  --opac-rgb-l1: 255 255 255;
  --opac-a-l1: .20;
}

.layer .layer-top.opac-2,
.layer .layer-mid.opac-2,
.layer .layer-btm.opac-2 {
  --opac-rgb-l1: 255 255 255;
  --opac-a-l1: .40;
}

.layer .layer-top.opac-3,
.layer .layer-mid.opac-3,
.layer .layer-btm.opac-3 {
  --opac-rgb-l1: 255 255 255;
  --opac-a-l1: .60;
}

.layer .layer-top.opac-4,
.layer .layer-mid.opac-4,
.layer .layer-btm.opac-4 {
  --opac-rgb-l1: 255 255 255;
  --opac-a-l1: .80;
}

.layer .layer-top.opac-5,
.layer .layer-mid.opac-5,
.layer .layer-btm.opac-5 {
  --opac-rgb-l1: 255 255 255;
  --opac-a-l1: 1;
}

/* Zellen-Stufen → L2 */
.layer .layer-top-left.opac-1, .layer .layer-top-mid.opac-1, .layer .layer-top-right.opac-1,
.layer .layer-mid-left.opac-1, .layer .layer-mid-mid.opac-1, .layer .layer-mid-right.opac-1,
.layer .layer-btm-left.opac-1, .layer .layer-btm-mid.opac-1, .layer .layer-btm-right.opac-1 {
  --opac-rgb-l2: 255 255 255;
  --opac-a-l2: .20;
}

.layer .layer-top-left.opac-2, .layer .layer-top-mid.opac-2, .layer .layer-top-right.opac-2,
.layer .layer-mid-left.opac-2, .layer .layer-mid-mid.opac-2, .layer .layer-mid-right.opac-2,
.layer .layer-btm-left.opac-2, .layer .layer-btm-mid.opac-2, .layer .layer-btm-right.opac-2 {
  --opac-rgb-l2: 255 255 255;
  --opac-a-l2: .40;
}

.layer .layer-top-left.opac-3, .layer .layer-top-mid.opac-3, .layer .layer-top-right.opac-3,
.layer .layer-mid-left.opac-3, .layer .layer-mid-mid.opac-3, .layer .layer-mid-right.opac-3,
.layer .layer-btm-left.opac-3, .layer .layer-btm-mid.opac-3, .layer .layer-btm-right.opac-3 {
  --opac-rgb-l2: 255 255 255;
  --opac-a-l2: .60;
}

.layer .layer-top-left.opac-4, .layer .layer-top-mid.opac-4, .layer .layer-top-right.opac-4,
.layer .layer-mid-left.opac-4, .layer .layer-mid-mid.opac-4, .layer .layer-mid-right.opac-4,
.layer .layer-btm-left.opac-4, .layer .layer-btm-mid.opac-4, .layer .layer-btm-right.opac-4 {
  --opac-rgb-l2: 255 255 255;
  --opac-a-l2: .80;
}

.layer .layer-top-left.opac-5, .layer .layer-top-mid.opac-5, .layer .layer-top-right.opac-5,
.layer .layer-mid-left.opac-5, .layer .layer-mid-mid.opac-5, .layer .layer-mid-right.opac-5,
.layer .layer-btm-left.opac-5, .layer .layer-btm-mid.opac-5, .layer .layer-btm-right.opac-5 {
  --opac-rgb-l2: 255 255 255;
  --opac-a-l2: 1;
}

/* Freie Farbe/Alpha via data-Attribut:
   data-opac="r g b a"
   - Row (L1):   setzt --opac-rgb-l1 / --opac-a-l1
   - Zelle (L2): setzt --opac-rgb-l2 / --opac-a-l2
   - Layer (L0): setzt --opac-rgb-l0 / --opac-a-l0
*/
/* ---------------------------------
   RESPONSIVE – Spaltenanzahl nach Viewport
   --------------------------------- */
/* Tablet & kleiner: max. 2 Spalten */
@media (max-width: 900px) {
  .layer-top,
  .layer-mid,
  .layer-btm {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* Smartphone: immer 1 Spalte untereinander */
@media (max-width: 600px) {
  .layer-top,
  .layer-mid,
  .layer-btm {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* 9) Tints (sanfte Verlaufs-Overlays) */
/* =========================================
   Tints (sanfter Verlauf für beliebige Bereiche)
   ========================================= */
.tint {
  position: relative;
  isolation: isolate;
  overflow: hidden; /* FIX: Verlauf an abgerundeten Kanten sauber clippen */
}

.tint::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: -1; /* unterhalb des Inhalts, oberhalb des Backgrounds */
  border-radius: inherit; /* FIX: übernimmt Rundungen des Elternelements */
  /* FIX: robuste Defaults & konfigurierbarer Winkel */
  /* Hinweis: var(..., fallback) stellt sicher, dass es auch ohne .tint-* Klassen neutral bleibt */
  background: linear-gradient(var(--tint-angle, 180deg), rgba(0, 0, 0, var(--tint-a, 0)), rgba(0, 0, 0, var(--tint-b, 0)) 60%, rgba(255, 255, 255, 0));
}

/* Feine Intensität */
.tint-0 {
  --tint-a: 0.00;
  --tint-b: 0.00;
}

.tint-1 {
  --tint-a: 0.08;
  --tint-b: 0.04;
}

.tint-2 {
  --tint-a: 0.12;
  --tint-b: 0.06;
}

.tint-3 {
  --tint-a: 0.16;
  --tint-b: 0.08;
}

.tint-4 {
  --tint-a: 0.20;
  --tint-b: 0.10;
}

/* Optional: Farbvariante über RGB-Variable (nur wenn du möchtest)
   .tint-dark  { --tint-rgb: 0,0,0; } 
   .tint-brand { --tint-rgb: 27,127,107; }
   und dann in der Gradient-Definition statt 0,0,0 -> var(--tint-rgb, 0,0,0)
   (hier nicht aktiv, um dein bestehendes Verhalten beizubehalten)
*/
/* Container mit Tint leicht „glasig“ hinterlegen (optional) */
.container.section.tint {
  background-color: rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  padding: 28px 20px;
}

/* =========================================================
   Optional: Print-Basis (sehr schlank)
   ========================================================= */
@media print {
  :root {
    --bg: #fff;
    --fg: #000;
    --surface: #fff;
  }
  body {
    background: #fff !important;
    color: #000 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  header.site,
  .jump-top,
  .butterfly {
    display: none !important;
  }
  a {
    text-decoration: underline;
    color: #000 !important;
  }
  /* Layout-Bereiche möglichst ohne Schatten/Overlays drucken */
  .container.section,
  .layer {
    box-shadow: none !important;
    background: #fff !important;
  }
}