/* Studio Ella Fleur · Design Tokens
   Stand: 7. Oktober 2026 · Quelle: Website-Konzept Abschnitt 9, Logo final 6b-1, Startseite Entwurf C
   Nur heller Modus. Alle Kontraste gegen Papier #F7F4EF geprüft (WCAG 2.2 AA). */

:root {
  /* Farben nach Rolle */
  --farbe-grund: #F7F4EF;          /* Papier: Seitenhintergrund */
  --farbe-flaeche: #EDE7DE;        /* Leinen: Fragen, Formulare, kleine Wegweiser-Karten, Über mich */
  --farbe-text: #1F3A30;           /* Tiefgrün: Text, Logo, Knöpfe, Fußzeile (11,2 : 1) */
  --farbe-aktion: #1F3A30;         /* Hauptknopf */
  --farbe-aktion-hover: #2B4A3F;   /* Tiefgrün hell */
  --farbe-nebentext: #56605A;      /* Moosgrau, nur auf hellem Grund (≥ 4,96 : 1) */
  --farbe-feldrand: #857B72;       /* Kiesel: Rahmen von Eingabefeldern (≥ 3,1 : 1) */
  --farbe-fehler: #9E2F25;         /* Ziegel: Fehler, immer mit Text (≥ 5,5 : 1) */
  --farbe-linie: #D8D0C4;          /* Stein: Trennlinien hell; Nebentext auf Tiefgrün (8,05 : 1) */
  --farbe-text-invers: #F7F4EF;    /* Text auf Tiefgrün */
  --farbe-fokus: #1F3A30;          /* Fokus auf hellem Grund */
  --farbe-fokus-invers: #F7F4EF;   /* Fokus auf Tiefgrün */
  --farbe-feld: #FFFFFF;           /* Hintergrund von Eingabefeldern */

  /* Saisonflächen: nur hinter „Diese Woche im Atelier“ und dem Saisonbrief.
     Nie für Knöpfe, Links, Linien oder Zustände. Wechsel im März, Juni, September, Dezember. */
  --saison-fruehling: #F3E2DF;
  --saison-sommer: #F1E8C6;
  --saison-herbst: #F3DED0;
  --saison-winter: #EADDE3;
  --saison-aktuell: var(--saison-winter); /* Livegang Januar 2027 */

  /* Schriften der Website (lokal als WOFF2, nur lateinischer Zeichensatz, max. 4 Dateien) */
  --schrift-titel: "Newsreader", Georgia, "Times New Roman", serif;
  --schrift-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  /* Nur im Logo, nie als Webschrift laden: Marcellus (STUDIO, ELLA) und Cormorant Garamond 600 (Fleur).
     Das Logo kommt als SVG mit Pfaden auf die Seite. */

  /* Schriftgrößen: Handy → Desktop (1.440 px) */
  --groesse-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.75rem);    /* 40 → 76 px */
  --groesse-h2: clamp(1.875rem, 1.3rem + 2.3vw, 3.25rem);  /* 30 → 52 px */
  --groesse-h3: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);  /* 22 → 28 px */
  --groesse-zitat: clamp(1.625rem, 1.1rem + 1.9vw, 2.75rem); /* 26 → 44 px, Newsreader kursiv */
  --groesse-text: clamp(1.0625rem, 1rem + 0.2vw, 1.125rem); /* 17 → 18 px */
  --groesse-klein: 0.9375rem;   /* 15 px */
  --groesse-mini: 0.875rem;     /* 14 px, Preisbeispiele, Bildunterschriften */
  --groesse-rubrik: 0.8125rem;  /* 13 px, Versalien, +0,08 em */
  --zeilenhoehe-titel: 1.05;
  --zeilenhoehe-text: 1.6;
  --gewicht-titel: 300;         /* 300–350 */
  --gewicht-text: 400;
  --gewicht-betont: 500;
  --sperrung-rubrik: 0.08em;
  /* Regel: Newsreader nie kleiner als 20 px. */

  /* Abstände */
  --abstand-1: 4px;
  --abstand-2: 8px;
  --abstand-3: 12px;
  --abstand-4: 16px;
  --abstand-5: 24px;
  --abstand-6: 32px;
  --abstand-7: 48px;
  --abstand-8: 64px;
  --abstand-9: 96px;
  --abstand-10: 144px;
  --abstand-abschnitt: clamp(64px, 4rem + 5vw, 144px);

  /* Raster */
  --inhalt-max: 1280px;
  --rand-handy: 20px;    /* 4 Spalten, 16 px Abstand */
  --rand-tablet: 32px;   /* 8 Spalten, 24 px Abstand */
  --rand-desktop: 64px;  /* 12 Spalten, 24 px Abstand */
  --spaltenabstand: 24px;

  /* Form */
  --radius-bild: 0;
  --radius-knopf: 2px;
  --radius-feld: 2px;
  --hoehe-knopf: 48px;
  --hoehe-kopf-handy: 56px;
  --hoehe-kopf-zeile1: 64px;
  --hoehe-kopf-zeile2: 44px;   /* Mindesthöhe */
  --klickziel-min: 24px;
  --fokus-ring: 2px solid var(--farbe-fokus);
  --fokus-abstand: 3px;
  /* Keine Schatten. */

  /* Bewegung */
  --zeit-150: 150ms;
  --zeit-250: 250ms;
  --zeit-300: 300ms;
  --zeit-600: 600ms;
  --zeit-900: 900ms;
  --zeit-1200: 1200ms;
  --zeit-1600: 1600ms;
  --versatz: 80ms;
  --kurve-erscheinen: cubic-bezier(0.22, 1, 0.36, 1);
  --kurve-signatur: cubic-bezier(0.65, 0, 0.35, 1);
}

/* Haltepunkte (in Media Queries nicht als Variable nutzbar):
   Tablet ab 768 px · Desktop mit zweizeiliger Kopfzeile ab 1.024 px */

/* Studio Ella Fleur · Stylesheet
   Die Tokens kommen aus ../../02-design/tokens.css (build.mjs stellt sie voran).
   Aufbau: Grundlagen → Schrift → Bausteine → Seitenblöcke → Haltepunkte → Bewegung → Druck */

/* ---------- Schriften (lokal, nur lateinischer Zeichensatz) ---------- */
@font-face{font-family:"Newsreader";font-style:normal;font-weight:300 500;font-display:swap;src:url("/fonts/newsreader-normal.woff2") format("woff2")}
@font-face{font-family:"Newsreader";font-style:italic;font-weight:300 500;font-display:swap;src:url("/fonts/newsreader-italic.woff2") format("woff2")}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:400 500;font-display:swap;src:url("/fonts/hankengrotesk-normal.woff2") format("woff2")}
/* Ersatzschriften, per size-adjust angeglichen, damit nichts springt */
@font-face{font-family:"Newsreader Ersatz";src:local("Georgia"),local("Times New Roman");size-adjust:96%;ascent-override:92%;descent-override:24%;line-gap-override:0%}
@font-face{font-family:"Hanken Ersatz";src:local("Segoe UI"),local("Arial");size-adjust:98%;ascent-override:94%;descent-override:24%;line-gap-override:0%}
:root{
  --schrift-titel:"Newsreader","Newsreader Ersatz",Georgia,serif;
  --schrift-text:"Hanken Grotesk","Hanken Ersatz",system-ui,-apple-system,"Segoe UI",sans-serif;
  --saison-aktuell:var(--saison-herbst);
}
html[data-saison="fruehling"]{--saison-aktuell:var(--saison-fruehling)}
html[data-saison="sommer"]{--saison-aktuell:var(--saison-sommer)}
html[data-saison="herbst"]{--saison-aktuell:var(--saison-herbst)}
html[data-saison="winter"]{--saison-aktuell:var(--saison-winter)}

/* ---------- Grundlagen ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:80px}
body{margin:0;background:var(--farbe-grund);color:var(--farbe-text);font-family:var(--schrift-text);font-size:var(--groesse-text);line-height:var(--zeilenhoehe-text);font-weight:var(--gewicht-text);-webkit-font-smoothing:antialiased;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
body:has(dialog[open]){overflow:hidden}
img,svg,video{display:block;max-width:100%}
img{height:auto;object-fit:cover;background:var(--farbe-flaeche)}
picture{display:block}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{color:var(--farbe-aktion-hover)}
:focus-visible{outline:var(--fokus-ring);outline-offset:var(--fokus-abstand)}
.fuss :focus-visible,.dunkel :focus-visible{outline-color:var(--farbe-fokus-invers)}
h1,h2,h3,h4{font-family:var(--schrift-titel);font-weight:var(--gewicht-titel);line-height:1.1;margin:0;text-wrap:balance;hyphens:manual}
h1{font-size:var(--groesse-h1);line-height:var(--zeilenhoehe-titel);letter-spacing:-.01em}
h2{font-size:var(--groesse-h2)}
h3{font-size:var(--groesse-h3);font-weight:400;line-height:1.2}
h4{font-family:var(--schrift-text);font-size:var(--groesse-text);font-weight:500}
p,ul,ol,dl,blockquote,figure,table{margin:0}
p+p,.text>*+*{margin-top:1em}
ul.liste,ol.liste{padding-left:1.2em}
ul.liste li+li,ol.liste li+li{margin-top:.4em}
strong,b{font-weight:500}
small,.klein{font-size:var(--groesse-klein)}
.mini{font-size:var(--groesse-mini)}
.neben{color:var(--farbe-nebentext)}
.zahl,.preis,td.zahl,.tabellenziffern{font-variant-numeric:tabular-nums}
hr{border:0;border-top:1px solid var(--farbe-linie);margin:var(--abstand-6) 0}
.inhalt{max-width:var(--inhalt-max);margin-inline:auto;padding-inline:var(--rand-handy)}
.inhalt--schmal{max-width:760px}
.inhalt--text{max-width:680px}
.abschnitt{margin-top:var(--abstand-abschnitt)}
.abschnitt--eng{margin-top:var(--abstand-8)}
/* Rubrikzeile: kursive Serife statt gesperrter Versalien (Umsetzung, Abschnitt 10 des Design Systems) */
.rubrik{font-family:var(--schrift-titel);font-style:italic;font-weight:300;font-size:clamp(19px,1rem + .4vw,22px);line-height:1.3;letter-spacing:0;text-transform:none;color:var(--farbe-nebentext);margin:0}
.rubrik--versal,.fuss .rubrik{font-family:var(--schrift-text);font-style:normal;font-size:var(--groesse-rubrik);font-weight:var(--gewicht-betont);letter-spacing:var(--sperrung-rubrik);text-transform:uppercase}
.rubrik+h1,.rubrik+h2,.rubrik+h3{margin-top:var(--abstand-2)}
.kopfzeile-abschnitt{margin-bottom:var(--abstand-6)}
.kopfzeile-abschnitt p.einleitung{margin-top:var(--abstand-4);max-width:34em}
.einleitung{font-size:calc(var(--groesse-text) * 1.12);max-width:34em}
.visuell-versteckt{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sprunglink{position:absolute;left:var(--rand-handy);top:-100px;z-index:50;background:var(--farbe-aktion);color:var(--farbe-text-invers);padding:12px 20px;border-radius:var(--radius-knopf);text-decoration:none}
.sprunglink:focus{top:12px;color:var(--farbe-text-invers)}
.platzhalter{color:var(--farbe-nebentext)}
.hinweis{background:var(--farbe-flaeche);padding:var(--abstand-4) var(--abstand-5);border-radius:var(--radius-feld);font-size:var(--groesse-klein)}
.hinweis--vorschau{background:var(--farbe-text);color:var(--farbe-text-invers);text-align:center;padding:8px var(--rand-handy);font-size:var(--groesse-mini)}
.hinweis--vorschau a{color:inherit}

/* ---------- Knöpfe und Links ---------- */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:var(--hoehe-knopf);padding:10px 28px;background:var(--farbe-aktion);color:var(--farbe-text-invers);border:1px solid var(--farbe-aktion);border-radius:var(--radius-knopf);font:var(--gewicht-betont) 16px/1.2 var(--schrift-text);text-decoration:none;cursor:pointer;text-align:center;transition:background-color var(--zeit-150),border-color var(--zeit-150),color var(--zeit-150)}
.knopf:hover{background:var(--farbe-aktion-hover);border-color:var(--farbe-aktion-hover);color:var(--farbe-text-invers)}
.knopf:active{background:#163028;border-color:#163028}
.knopf[disabled],.knopf[aria-disabled="true"]{background:var(--farbe-linie);border-color:var(--farbe-linie);color:var(--farbe-nebentext);cursor:not-allowed}
.knopf--neben{background:transparent;color:var(--farbe-text);border-color:var(--farbe-text)}
.knopf--neben:hover{background:var(--farbe-flaeche);color:var(--farbe-text);border-color:var(--farbe-aktion-hover)}
.knopf--invers{background:var(--farbe-text-invers);color:var(--farbe-text);border-color:var(--farbe-text-invers)}
.knopf--invers:hover{background:var(--farbe-flaeche);color:var(--farbe-text);border-color:var(--farbe-flaeche)}
.knopf--laedt{position:relative;color:transparent;pointer-events:none}
.knopf--laedt::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--farbe-text-invers);border-right-color:transparent;border-radius:50%;animation:drehen 900ms linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.knopf--breit{width:100%}
.textlink{font-weight:var(--gewicht-betont);text-decoration:underline;text-underline-offset:.2em}
.knopfzeile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--abstand-4)}
.knopfzeile--reihe{flex-direction:row;flex-wrap:wrap;align-items:center;gap:var(--abstand-4) var(--abstand-5)}
.links{display:flex;flex-wrap:wrap;gap:var(--abstand-3) var(--abstand-5);font-size:16px}
.links a{min-height:24px}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:40;background:var(--farbe-grund);border-bottom:1px solid var(--farbe-linie);transition:transform var(--zeit-300) var(--kurve-erscheinen)}
.kopf.ist-versteckt{transform:translateY(-100%)}
.kopf-zeile{min-height:var(--hoehe-kopf-handy);display:flex;align-items:center;justify-content:space-between;gap:var(--abstand-5)}
.logo-quer{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.logo-quer svg{width:168px;height:auto}
.kopf-rechts{display:flex;align-items:center;gap:4px;font-size:14px}
.kopf-rechts a,.kopf-rechts button{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;min-width:44px;justify-content:center;padding:0 8px;color:var(--farbe-text)}
.kopf-rechts .nur-desktop{display:none}
.menue-knopf{background:none;border:0;font:var(--gewicht-betont) 15px var(--schrift-text);cursor:pointer}
.nav{display:none}
.nav a{text-decoration:none;min-height:44px;display:inline-flex;align-items:center;position:relative}
.nav a::after{content:"";position:absolute;left:0;right:0;bottom:8px;height:1px;background:var(--farbe-text);transform:scaleX(0);transform-origin:left;transition:transform var(--zeit-300) var(--kurve-erscheinen)}
.nav a:hover::after,.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav a.leise{color:var(--farbe-nebentext)}
.kopf.ist-kompakt .nav{display:none}

/* Menü als Überlagerung (Handy und Tablet) */
.menue{border:0;padding:0;margin:0;max-width:none;max-height:none;width:100%;height:100dvh;background:var(--farbe-grund);color:var(--farbe-text);inset:0}
.menue::backdrop{background:rgba(31,58,48,.4)}
.menue-innen{padding:var(--abstand-3) var(--rand-handy) var(--abstand-7);display:flex;flex-direction:column;min-height:100%}
.menue-kopf{display:flex;align-items:center;justify-content:space-between;min-height:var(--hoehe-kopf-handy)}
.menue-schliessen{background:none;border:0;font:var(--gewicht-betont) 15px var(--schrift-text);min-height:44px;min-width:44px;cursor:pointer;color:var(--farbe-text);display:inline-flex;align-items:center;gap:8px}
.menue-liste{list-style:none;padding:0;margin:var(--abstand-6) 0 0;display:flex;flex-direction:column}
.menue-liste a{display:flex;align-items:center;min-height:56px;font-family:var(--schrift-titel);font-size:30px;font-weight:300;text-decoration:none;border-bottom:1px solid var(--farbe-linie)}
.menue-liste a.leise{color:var(--farbe-nebentext);font-size:26px}
.menue-liste a[aria-current="page"]{font-weight:400}
.menue-fuss{margin-top:auto;padding-top:var(--abstand-6);display:flex;flex-direction:column;gap:var(--abstand-3);font-size:16px}
.menue-fuss a{min-height:24px}
.menue[open]{animation:einblenden var(--zeit-250) var(--kurve-erscheinen)}
@keyframes einblenden{from{opacity:0}to{opacity:1}}

/* ---------- Erster Bildschirm ---------- */
.hero{display:flex;flex-direction:column}
.hero-bild img{width:100%;height:min(260px,36svh);object-position:var(--fokus,50% 45%)}
.hero-text{padding:var(--abstand-5) var(--rand-handy) 0;display:flex;flex-direction:column;gap:18px}
.h1 .vers{display:block;font-family:var(--schrift-text);font-size:var(--groesse-rubrik);font-weight:var(--gewicht-betont);letter-spacing:var(--sperrung-rubrik);text-transform:uppercase;color:var(--farbe-nebentext);margin-bottom:12px;line-height:1.4}
.h1 .gross{display:block}
/* Wörter, die aus der Grundlinie aufsteigen (Eröffnung) oder beim Scrollen wachsen (Diese Woche) */
.wort{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.14em;margin-bottom:-.14em}
.wort>span{display:inline-block}
.unterzeile{max-width:26em}
.leistungen{font-size:14px;line-height:28px}
.leistungen a{white-space:nowrap}
.fakten{margin-top:var(--abstand-2);padding-top:var(--abstand-4);border-top:1px solid var(--farbe-linie);font-size:var(--groesse-klein);color:var(--farbe-nebentext);max-width:36em}
.hero .textlink{display:none}

/* Seitenkopf der Bereichsseiten */
.seitenkopf{padding-top:var(--abstand-7)}
.seitenkopf .einleitung{margin-top:var(--abstand-5)}
.seitenkopf .knopfzeile{margin-top:var(--abstand-6)}

/* ---------- Diese Woche im Atelier ---------- */
.woche{background:var(--saison-aktuell);margin-top:var(--abstand-7)}
.woche .inhalt{padding-block:var(--abstand-6);display:flex;flex-direction:column;gap:var(--abstand-4)}
.woche-text{display:flex;flex-direction:column;gap:var(--abstand-4)}
.woche-titel{color:var(--farbe-text)}
.woche-titel .datum{color:var(--farbe-nebentext)}
.woche-satz{font-family:var(--schrift-titel);font-weight:300;font-size:clamp(26px,1.2rem + 1.4vw,40px);line-height:1.25;text-wrap:balance}
.farben{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}
.farben li{display:flex;align-items:center;gap:8px}
.punkt{width:20px;height:20px;border-radius:50%;flex:none}
.punkt--rand{border:1px solid var(--farbe-feldrand)}
.woche-bild img{width:100%;aspect-ratio:3/2}

/* ---------- Wegweiser ---------- */
.karten-gross{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5) 14px}
.karte{text-decoration:none;display:flex;flex-direction:column;gap:6px;color:var(--farbe-text)}
.karte .bild{overflow:hidden}
.karte img{width:100%;transition:transform var(--zeit-600) var(--kurve-erscheinen)}
.karte:hover img{transform:scale(1.03)}
.karte .titel{margin-top:8px;font-family:var(--schrift-titel);font-size:20px;line-height:1.2;position:relative;display:inline-block;align-self:flex-start}
.karte .titel::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:1px;background:var(--farbe-text);transform:scaleX(0);transform-origin:left;transition:transform var(--zeit-300) var(--kurve-erscheinen)}
.karte:hover .titel::after{transform:scaleX(1)}
.karte:first-child{grid-column:1/-1}
.karte:first-child img{aspect-ratio:3/2}
.karte:first-child .titel{font-size:26px}
.karte:not(:first-child) img{aspect-ratio:4/5}
.karte .satz{display:none;font-size:16px}
.karte .klein{color:var(--farbe-nebentext);font-size:var(--groesse-mini)}
.karten-klein{margin-top:var(--abstand-5);display:grid;gap:10px}
.karte-klein{background:var(--farbe-flaeche);padding:18px 20px;text-decoration:none;display:flex;flex-direction:column;gap:4px;min-height:48px;color:var(--farbe-text);transition:background-color var(--zeit-150)}
.karte-klein:hover{background:#E6DFD3}
.karte-klein .titel{font-family:var(--schrift-titel);font-size:22px;line-height:1.2}
.karte-klein:hover .titel{text-decoration:underline;text-underline-offset:.15em;text-decoration-thickness:1px}
.karte-klein .satz{font-size:15px}
.karte-klein .klein{color:var(--farbe-nebentext);font-size:var(--groesse-mini)}
.karte-klein--aktion{background:var(--saison-aktuell)}

/* ---------- Stationen: holen, binden, bringen ---------- */
.station{display:flex;flex-direction:column}
.station .bild{overflow:hidden}
.station .bild img{width:100%}
.station .text{padding:var(--abstand-4) var(--rand-handy) 0;display:flex;flex-direction:column;gap:8px}
.station .text h3{font-weight:300;font-size:clamp(30px,1.4rem + 1.2vw,44px);line-height:1.1}
.station+.station{margin-top:var(--abstand-7)}
.st1 img{aspect-ratio:3/2}
.st3 img{aspect-ratio:4/5}
.st2 .bild{width:300px;max-width:calc(100% - 70px);margin-left:auto;margin-right:var(--rand-handy)}
.st2 img{aspect-ratio:4/5}

/* ---------- Beleza ---------- */
.beleza{display:flex;flex-direction:column;gap:var(--abstand-4)}
.beleza-text{display:flex;flex-direction:column;gap:var(--abstand-4)}
.beleza-bilder{display:flex;gap:var(--abstand-4);align-items:flex-end}
.beleza-bilder .b1,.beleza-bilder .b2{overflow:hidden}
.beleza-bilder img{aspect-ratio:4/5}
.beleza-bilder .b1{width:58%}
.beleza-bilder .b2{width:42%}

/* ---------- Über mich ---------- */
.ueber{background:var(--farbe-flaeche)}
.ueber .inhalt{padding-block:var(--abstand-7);display:flex;flex-direction:column-reverse;gap:var(--abstand-5)}
.ueber img{width:100%;aspect-ratio:4/5}
.ueber-text{display:flex;flex-direction:column;gap:18px}
.ueber-text p{max-width:34em}
.zitat{font-family:var(--schrift-titel);font-style:italic;font-weight:300;font-size:var(--groesse-zitat);line-height:1.25;text-wrap:balance}
.zitat--klein{font-size:clamp(22px,1.1rem + 1vw,30px)}
.zitat cite{display:block;font-family:var(--schrift-text);font-style:normal;font-size:var(--groesse-klein);color:var(--farbe-nebentext);margin-top:var(--abstand-3)}

/* ---------- Meine Arbeiten ---------- */
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5) 14px}
.kachel{text-decoration:none;color:var(--farbe-text);display:flex;flex-direction:column;gap:8px}
.kachel .bild{overflow:hidden}
.kachel img{aspect-ratio:4/5;width:100%;transition:transform var(--zeit-600) var(--kurve-erscheinen)}
.kachel:hover img{transform:scale(1.03)}
.kachel .titel{font-family:var(--schrift-titel);font-size:20px;line-height:1.2}
.kachel .klein{color:var(--farbe-nebentext);font-size:var(--groesse-mini)}
figcaption,.bildunterschrift{font-size:var(--groesse-mini);color:var(--farbe-nebentext);margin-top:8px}

/* ---------- Saisonbrief ---------- */
.brief{background:var(--saison-aktuell)}
.brief .inhalt{max-width:720px;padding-block:var(--abstand-7);display:flex;flex-direction:column;gap:14px}
.brief h2{font-size:clamp(30px,1.5rem + 1.2vw,44px)}
.brief-form{display:flex;flex-direction:column;gap:12px}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--farbe-text);color:var(--farbe-text-invers);font-size:15px;margin-top:var(--abstand-abschnitt)}
.fuss a{color:var(--farbe-text-invers);text-decoration:none}
.fuss a:hover{text-decoration:underline;color:var(--farbe-text-invers)}
.fuss .inhalt{padding-block:var(--abstand-7)}
.fuss-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--abstand-6)}
.fuss-spalte{display:flex;flex-direction:column;gap:6px}
.fuss-spalte a{min-height:24px;display:inline-block}
.fuss .rubrik{color:var(--farbe-linie);margin-bottom:6px}
.fuss .neben{color:var(--farbe-linie)}
.fuss-logo svg{width:150px;height:auto}
.recht{margin-top:var(--abstand-7);padding-top:var(--abstand-5);border-top:1px solid var(--farbe-aktion-hover);display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px}
.recht a{color:var(--farbe-linie);text-decoration:underline;min-height:24px;display:inline-flex;align-items:center}
.brief+.fuss,.woche+.fuss{margin-top:0}

/* ---------- Bereichsseiten: Belegstreifen, Sprungmarken, Umschalter ---------- */
.beleg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:start;margin-top:var(--abstand-6)}
.beleg--drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.beleg img{aspect-ratio:4/5;width:100%}
.beleg .fakt{grid-column:1/-1;font-family:var(--schrift-titel);font-style:italic;font-size:clamp(20px,1rem + 1vw,26px);line-height:1.3;padding:var(--abstand-4) 0;border-top:1px solid var(--farbe-linie)}
.beleg .fakt cite{display:block;font-family:var(--schrift-text);font-style:normal;font-size:var(--groesse-mini);color:var(--farbe-nebentext);margin-top:6px}
.sprung{display:flex;flex-wrap:wrap;gap:4px 20px;list-style:none;padding:0;margin:var(--abstand-6) 0 0;font-size:16px}
.sprung a{display:inline-flex;align-items:center;min-height:32px;text-decoration:none;border-bottom:1px solid var(--farbe-linie)}
.sprung a:hover{border-color:var(--farbe-text)}
.umschalter{display:flex;gap:4px;margin-top:var(--abstand-6);border-bottom:1px solid var(--farbe-linie)}
.umschalter a{flex:1;text-align:center;padding:14px 8px;text-decoration:none;font-weight:var(--gewicht-betont);border-bottom:2px solid transparent;margin-bottom:-1px;min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.umschalter a[aria-current="page"]{border-bottom-color:var(--farbe-text)}
.umschalter a:not([aria-current]){color:var(--farbe-nebentext)}
.umschalter a:hover{color:var(--farbe-text)}

/* ---------- Preise, Rechnungen, Ablauf, Fragen, Tabellen ---------- */
.preisliste{display:grid;gap:12px;list-style:none;padding:0;margin:0}
.preisliste li{display:flex;justify-content:space-between;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--farbe-linie)}
.preisliste .preis{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:var(--gewicht-betont)}
.preisliste .neben{display:block;font-size:var(--groesse-klein)}
.rechnung{background:var(--farbe-flaeche);padding:var(--abstand-5);border-radius:var(--radius-feld)}
.rechnung h4{margin-bottom:12px}
.rechnung dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0}
.rechnung dt{margin:0}
.rechnung dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.rechnung .summe{grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:16px;border-top:1px solid var(--farbe-feldrand);padding-top:8px;margin-top:4px;font-weight:var(--gewicht-betont)}
.ablauf{list-style:none;padding:0;margin:0;counter-reset:schritt;display:grid;gap:var(--abstand-4)}
.ablauf li{counter-increment:schritt;position:relative;padding-left:52px;max-width:64ch}
.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:2px;font-family:var(--schrift-titel);font-size:24px;line-height:1;color:var(--farbe-nebentext)}
.ablauf strong{display:block}
.fragen{border-top:1px solid var(--farbe-linie)}
.fragen details{border-bottom:1px solid var(--farbe-linie)}
.fragen summary{list-style:none;cursor:pointer;padding:16px 36px 16px 0;font-weight:var(--gewicht-betont);position:relative;min-height:48px}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary::after{content:"+";position:absolute;right:4px;top:12px;font-size:24px;font-weight:300;font-family:var(--schrift-titel);transition:transform var(--zeit-250)}
.fragen details[open] summary::after{transform:rotate(45deg)}
.fragen .antwort{padding:0 0 16px;max-width:60ch}
.fragen--offen .frage{padding:16px 0;border-bottom:1px solid var(--farbe-linie)}
.fragen--offen .frage p+p{margin-top:6px}
.tabelle{width:100%;border-collapse:collapse;font-size:var(--groesse-klein)}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px 10px 0;border-bottom:1px solid var(--farbe-linie);vertical-align:top}
.tabelle th{font-weight:var(--gewicht-betont)}
.tabelle td.zahl,.tabelle th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.zusagen{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.zusagen li{padding-left:28px;position:relative}
.zusagen li::before{content:"";position:absolute;left:0;top:.55em;width:14px;height:1px;background:var(--farbe-text)}
.zweispaltig{display:grid;gap:var(--abstand-6)}
.dreispaltig{display:grid;gap:var(--abstand-5)}
.kasten{background:var(--farbe-flaeche);padding:var(--abstand-5);border-radius:var(--radius-feld)}
.kasten--rand{background:none;border:1px solid var(--farbe-linie)}
.kasten h3{margin-bottom:12px}
.kasten .liste{margin-top:12px}
.termine{list-style:none;padding:0;margin:0;border-top:1px solid var(--farbe-linie)}
.termin{display:grid;grid-template-columns:1fr auto;gap:8px 16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--farbe-linie)}
.termin .wann{font-weight:var(--gewicht-betont)}
.termin .was{color:var(--farbe-nebentext);font-size:var(--groesse-klein)}
.termin .plaetze{font-size:var(--groesse-mini);color:var(--farbe-nebentext)}
.termin .knopf{min-height:40px;padding:6px 18px;font-size:15px}
.termin--ausgebucht .wann{color:var(--farbe-nebentext)}
.vasen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--abstand-5) 14px}
.vase{display:flex;flex-direction:column;gap:6px}
.vase img{aspect-ratio:4/5;width:100%;object-fit:cover}
.vase .name{font-weight:var(--gewicht-betont)}
.vase .menge{display:flex;align-items:center;gap:8px;margin-top:4px}
.vase .menge input{width:72px}
.vase .menge label{font-size:var(--groesse-mini)}
.set{display:flex;gap:16px;align-items:center;padding:16px 0;border-top:1px solid var(--farbe-linie);border-bottom:1px solid var(--farbe-linie)}
.set .preis{margin-left:auto;font-weight:var(--gewicht-betont);white-space:nowrap}
.budget{display:flex;flex-wrap:wrap;gap:8px}
.budget label{border:1px solid var(--farbe-feldrand);border-radius:999px;padding:8px 14px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;min-height:40px}
.budget input{margin:0}
.budget label:has(input:checked){background:var(--farbe-text);color:var(--farbe-text-invers);border-color:var(--farbe-text)}

/* ---------- Formulare ---------- */
.formular{display:flex;flex-direction:column;gap:var(--abstand-5);max-width:640px}
.feldgruppe{display:flex;flex-direction:column;gap:6px}
.feldgruppe label,.feldgruppe .legende{font-weight:var(--gewicht-betont)}
.feldgruppe .hilfe{font-size:var(--groesse-klein);color:var(--farbe-nebentext)}
.feldgruppe .hilfe[lang="en"]{font-style:italic}
.feld{min-height:48px;border:1px solid var(--farbe-feldrand);border-radius:var(--radius-feld);background:var(--farbe-feld);padding:10px 14px;font:inherit;font-size:16px;color:var(--farbe-text);width:100%}
.feld:focus-visible{outline:var(--fokus-ring);outline-offset:2px;border-color:var(--farbe-text)}
.feld[aria-invalid="true"]{border-color:var(--farbe-fehler);border-width:2px}
.feld[disabled]{background:var(--farbe-flaeche);color:var(--farbe-nebentext)}
textarea.feld{min-height:132px;resize:vertical}
select.feld{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%231F3A30' stroke-width='1.5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{padding:0;font-weight:var(--gewicht-betont);margin-bottom:8px}
.optionen{display:flex;flex-direction:column;gap:8px}
.optionen--reihe{flex-direction:row;flex-wrap:wrap;gap:8px 20px}
.option{display:flex;align-items:flex-start;gap:10px;min-height:24px;cursor:pointer}
.option input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--farbe-text);flex:none}
.option .neben{display:block;font-size:var(--groesse-klein)}
.wahl{display:grid;gap:8px}
.wahl label{border:1px solid var(--farbe-feldrand);border-radius:var(--radius-feld);padding:12px 14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;cursor:pointer;min-height:48px}
.wahl label:has(input:checked){border-color:var(--farbe-text);box-shadow:inset 0 0 0 1px var(--farbe-text)}
.wahl input{width:20px;height:20px;margin:0;accent-color:var(--farbe-text)}
.wahl .preis{font-variant-numeric:tabular-nums;white-space:nowrap}
.wahl .neben{display:block;font-size:var(--groesse-klein)}
.fehler{color:var(--farbe-fehler);font-size:var(--groesse-klein);font-weight:var(--gewicht-betont)}
.fehler:empty{display:none}
.fehlerliste{border:2px solid var(--farbe-fehler);padding:16px 20px;border-radius:var(--radius-feld)}
.fehlerliste h2{font-family:var(--schrift-text);font-size:18px;font-weight:var(--gewicht-betont);color:var(--farbe-fehler)}
.fehlerliste ul{margin:8px 0 0;padding-left:1.2em}
.fehlerliste a{color:var(--farbe-fehler)}
.fehlerliste[hidden]{display:none}
.erfolg{border-left:3px solid var(--farbe-text);padding:12px 16px;background:var(--farbe-flaeche)}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.zusammenfassung{background:var(--farbe-flaeche);padding:var(--abstand-5);border-radius:var(--radius-feld);display:grid;gap:8px}
.zusammenfassung dl{display:grid;grid-template-columns:1fr auto;gap:6px 16px;margin:0}
.zusammenfassung dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.zusammenfassung .summe{border-top:1px solid var(--farbe-feldrand);padding-top:8px;font-weight:var(--gewicht-betont);grid-column:1/-1;display:grid;grid-template-columns:1fr auto;gap:16px}
.schritt{font-size:var(--groesse-rubrik);letter-spacing:var(--sperrung-rubrik);text-transform:uppercase;color:var(--farbe-nebentext);font-weight:var(--gewicht-betont)}
.rechtshinweis{font-size:var(--groesse-klein);color:var(--farbe-nebentext);max-width:60ch}
.kopieren{display:inline-flex;align-items:center;gap:8px;background:none;border:1px solid var(--farbe-text);border-radius:var(--radius-knopf);min-height:40px;padding:6px 16px;font:var(--gewicht-betont) 15px var(--schrift-text);color:var(--farbe-text);cursor:pointer}
.kopieren:hover{background:var(--farbe-grund)}

/* ---------- Mobile Aktionsleiste ---------- */
.aktionsleiste{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--farbe-grund);border-top:1px solid var(--farbe-linie);padding:10px var(--rand-handy);display:flex;gap:12px;align-items:center;transform:translateY(110%);transition:transform var(--zeit-300) var(--kurve-erscheinen)}
.aktionsleiste.ist-sichtbar{transform:none}
.aktionsleiste .knopf{flex:1}
body:has(.aktionsleiste.ist-sichtbar){padding-bottom:72px}

/* ---------- Bestätigung, 404, Druckseiten ---------- */
.bestaetigung{padding-top:var(--abstand-7)}
.bestaetigung .ablauf{margin-top:var(--abstand-6)}
.druckkopf{display:none}

/* ---------- Komponentenseite ---------- */
.muster{border:1px dashed var(--farbe-linie);padding:var(--abstand-5);margin-top:var(--abstand-4)}
.muster-titel{font-family:var(--schrift-text);font-size:var(--groesse-rubrik);letter-spacing:var(--sperrung-rubrik);text-transform:uppercase;color:var(--farbe-nebentext);margin-bottom:12px}
.farbfelder{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
.farbfeld{border:1px solid var(--farbe-linie);padding:8px;font-size:var(--groesse-mini)}
.farbfeld span{display:block;height:56px;margin-bottom:6px}

/* ---------- Tablet ab 768 px ---------- */
@media (min-width:768px){
  .inhalt{padding-inline:var(--rand-tablet)}
  .hero-text{padding:var(--abstand-6) var(--rand-tablet) 0}
  .hero-bild img{height:auto;aspect-ratio:3/2}
  .hero .textlink{display:inline}
  .karte .satz{display:block}
  .karten-klein{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-5)}
  .brief-form{flex-direction:row;align-items:flex-end}
  .brief-form .feldgruppe{flex:1}
  .station .text{padding-inline:var(--rand-tablet)}
  .st2 .bild{margin-right:var(--rand-tablet)}
  .zweispaltig{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dreispaltig{grid-template-columns:repeat(3,minmax(0,1fr))}
  .kacheln{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--abstand-5)}
  .vasen{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-5)}
  .beleg{gap:var(--abstand-5)}
  .beleg:has(.fakt){grid-template-columns:repeat(4,minmax(0,1fr))}
  .beleg .fakt{grid-column:auto;border:0;padding:0;align-self:center}
  .preisliste{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--abstand-5)}
  .preisliste li{flex-direction:column;justify-content:flex-start;gap:4px;border-top:1px solid var(--farbe-linie);border-bottom:0;padding:12px 0 0}
  .optionen{flex-direction:row;flex-wrap:wrap;gap:8px 24px}
  .wahl--reihe{grid-template-columns:repeat(3,minmax(0,1fr))}
  .seitenkopf{padding-top:var(--abstand-8)}
}

/* ---------- Desktop ab 1.024 px ---------- */
@media (min-width:1024px){
  .inhalt{padding-inline:var(--rand-desktop)}
  .kopf-zeile{min-height:var(--hoehe-kopf-zeile1)}
  .kopf-rechts{gap:8px}
  .kopf-rechts .nur-desktop{display:inline-flex}
  .menue-knopf{display:none}
  .nav{display:flex;flex-wrap:wrap;align-items:center;gap:0 32px;min-height:var(--hoehe-kopf-zeile2);font-size:14px;border-top:1px solid var(--farbe-linie)}
  .hero{display:flex;flex-direction:row;max-width:1440px;margin-inline:auto}
  .hero-bild{flex:6 1 0;min-width:0}
  .hero-bild img{aspect-ratio:4/5;max-height:800px;height:auto;width:100%}
  .hero-text{flex:6 1 0;padding:var(--abstand-8) var(--rand-desktop) var(--abstand-8) 80px;justify-content:center;gap:28px}
  .leistungen{display:none}
  .seitenkopf{padding-top:var(--abstand-9)}
  .woche .inhalt{flex-direction:row;align-items:center;gap:56px;padding-block:var(--abstand-8)}
  .woche-text{flex:1}
  .woche-bild{flex:1;min-width:0}
  .karten-gross{grid-template-columns:2fr 1fr 1fr;align-items:end;gap:var(--abstand-5)}
  .karte:first-child{grid-column:auto}
  .karte .titel{font-size:26px}
  .karte:first-child .titel{font-size:32px}
  .karten-klein .karte-klein{padding:28px}
  .station{flex-direction:row;align-items:center;gap:var(--abstand-8);max-width:1440px;margin-inline:auto}
  .station .text{padding:0 var(--rand-desktop) 0 0;flex:5 1 0}
  .station+.station{margin-top:var(--abstand-9)}
  .st1 .bild{flex:7 1 0;min-width:0}
  .st2{max-width:1280px;padding:0 var(--rand-desktop);flex-direction:row-reverse}
  .st2 .bild{flex:5 1 0;width:auto;max-width:none;margin:0}
  .st2 img{max-height:640px;width:100%}
  .st2 .text{padding:0}
  .st3 .bild{flex:4 1 0;min-width:0;margin-left:160px}
  .st3 img{max-height:640px;width:100%}
  .beleza{flex-direction:row;align-items:center;gap:var(--abstand-8)}
  .beleza-text{flex:1}
  .beleza-bilder{flex:1}
  .ueber .inhalt{flex-direction:row;align-items:center;gap:var(--abstand-8);padding-block:var(--abstand-9)}
  .ueber-text{flex:7 1 0}
  .ueber picture{flex:5 1 0;min-width:0}
  .brief .inhalt{padding-block:var(--abstand-9);text-align:center;align-items:center}
  .brief-form{align-self:stretch;text-align:left}
  .fuss .inhalt{padding-top:var(--abstand-9)}
  .zweispaltig--breit{grid-template-columns:7fr 5fr;gap:var(--abstand-8)}
  .aktionsleiste{display:none}
  body:has(.aktionsleiste.ist-sichtbar){padding-bottom:0}
  .fragen .antwort{max-width:64ch}
}

/* ==========================================================================
   Bewegung · „Blumen, wie sie wachsen“
   1 Eröffnung beim Laden: Wörter steigen aus der Grundlinie, dann der Rest. Nur einmal.
   2 Signatur: ein Stiel im linken Rand wächst mit dem Scrollen, Blätter öffnen sich, oben blüht die Blüte.
   3 Bilder wachsen von unten, an das Scrollen gekoppelt. Texte stehen still.
   4 Tiefe: Fotos der Stationen und im Beleza-Block treiben langsamer als der Text.
   5 Diese Woche: der Satz wächst Wort für Wort, die Farbpunkte springen auf wie Knospen.
   6 Rechnungen und Abläufe bauen sich Zeile für Zeile auf.
   Grundlage: CSS-Scroll-Animationen (@supports). Ohne sie: JavaScript-Rückfall für Stiel und Bilder.
   Bewegung reduzieren: alles aus, alle Endzustände sofort.
   ========================================================================== */
:root{--farbe-bluete:#E9B8C0}
.hero-bild{overflow:hidden}

/* 1 Eröffnung */
html.js .hero .wort>span{transform:translateY(112%);animation:aufsteigen 760ms var(--kurve-erscheinen) both;animation-delay:calc(140ms + var(--i,0) * 95ms)}
html.js .hero .unterzeile,html.js .hero .knopfzeile,html.js .hero .leistungen,html.js .hero .fakten{animation:nachkommen 600ms var(--kurve-erscheinen) both;animation-delay:calc(520ms + var(--j,0) * 110ms)}
html.js .hero .knopfzeile{--j:1}html.js .hero .leistungen{--j:2}html.js .hero .fakten{--j:3}
html.js .hero-bild img{animation:ankommen var(--zeit-1600) var(--kurve-erscheinen) both}
@keyframes aufsteigen{from{transform:translateY(112%)}to{transform:none}}
@keyframes nachkommen{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes ankommen{from{transform:scale(1.04)}to{transform:scale(1)}}

/* 2 (Der Stiel im Rand ist am 7. Oktober 2026 auf Ellas Wunsch entfallen.) */

/* 3 Bilder wachsen von unten (Rückfall mit JavaScript: Klasse ist-sichtbar) */
html.js .wachsen{clip-path:inset(100% 0 0 0)}
html.js .wachsen.ist-sichtbar{clip-path:inset(0);transition:clip-path var(--zeit-900) var(--kurve-signatur)}
html.js .erscheinen{opacity:0}
html.js .erscheinen.ist-sichtbar{opacity:1;transition:opacity var(--zeit-600) var(--kurve-erscheinen)}
.farben li{--i:0}
.parallax img{scale:1.1}

/* Scroll-gekoppelt, wo der Browser es kann */
@supports (animation-timeline: view()){
  html.js .wachsen,html.js .wachsen.ist-sichtbar{clip-path:inset(100% 0 0 0);transition:none;animation:wachsen linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .beleg picture,.kacheln .bild,.karte .bild,.vase .bild,.ueber picture,.zweispaltig>picture,.zweispaltig figure{animation:wachsen linear both;animation-timeline:view();animation-range:entry 0% entry 55%}
  html.js .erscheinen,html.js .erscheinen.ist-sichtbar{opacity:1;transition:none}
  /* 4 Tiefe */
  .parallax img{animation:treiben linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .parallax--leicht img{animation-name:treiben-leicht}
  .station h3{animation:aufgehen linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
  /* 5 Diese Woche */
  .woche-satz .wort>span{animation:wort-wachsen linear both;animation-timeline:view();animation-range:entry calc(0% + var(--i,0) * 4%) entry calc(45% + var(--i,0) * 4%)}
  .farben li{animation:knospe linear both;animation-timeline:view();animation-range:entry calc(10% + var(--i) * 9%) entry calc(60% + var(--i) * 9%)}
  /* 6 Zeile für Zeile */
  .rechnung dl>dt,.rechnung dl>dd,.ablauf>li,.zusagen>li,.termine>li,.preisliste>li{animation:zeile linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .rechnung .summe{animation:summe linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
  .zitat{animation:aufgehen linear both;animation-timeline:view();animation-range:entry 0% entry 60%}
}
@keyframes wachsen{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0)}}
@keyframes treiben{from{transform:translateY(-4.5%)}to{transform:translateY(4.5%)}}
@keyframes treiben-leicht{from{transform:translateY(-2%)}to{transform:translateY(2%)}}
@keyframes aufgehen{from{opacity:.12;transform:translateY(.35em)}to{opacity:1;transform:none}}
@keyframes wort-wachsen{from{opacity:.15;transform:translateY(.45em)}to{opacity:1;transform:none}}
@keyframes knospe{0%{opacity:0;transform:scale(.2)}65%{opacity:1;transform:scale(1.18)}100%{opacity:1;transform:scale(1)}}
@keyframes zeile{from{opacity:.2;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes summe{from{opacity:.2;border-top-color:transparent}to{opacity:1;border-top-color:var(--farbe-feldrand)}}
.fragen details[open] .antwort{animation:aufklappen var(--zeit-250) var(--kurve-erscheinen)}
@keyframes aufklappen{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  html.js .hero .wort>span,html.js .hero .unterzeile,html.js .hero .knopfzeile,html.js .hero .leistungen,html.js .hero .fakten,html.js .hero-bild img{animation:none;transform:none;opacity:1}
  html.js .wachsen,html.js .wachsen.ist-sichtbar,.beleg picture,.kacheln .bild,.karte .bild,.vase .bild,.ueber picture,.zweispaltig>picture,.zweispaltig figure{animation:none;clip-path:none;transition:none}
  .parallax img,.station h3,.woche-satz .wort>span,.farben li,.rechnung dl>dt,.rechnung dl>dd,.ablauf>li,.zusagen>li,.termine>li,.preisliste>li,.rechnung .summe,.zitat{animation:none;transform:none;opacity:1;scale:1}
  html.js .erscheinen{opacity:1}
  *,*::before,*::after{transition-duration:150ms!important;animation-duration:1ms!important;scroll-behavior:auto!important}
  .karte:hover img,.kachel:hover img{transform:none}
}

/* ---------- Druck ---------- */
@media print{
  .kopf,.fuss,.aktionsleiste,.menue,.sprunglink,.hinweis--vorschau,.nicht-drucken{display:none!important}
  body{background:#fff;color:#000;font-size:11pt}
  .druckkopf{display:block;margin-bottom:12mm;font-size:10pt;border-bottom:1px solid #000;padding-bottom:4mm}
  a{text-decoration:none;color:#000}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt}
  .inhalt{max-width:none;padding:0}
  img,picture{display:none}
  .druckseite img,.druckseite picture{display:block;max-width:60mm}
  h2,h3{break-after:avoid}
  .kasten,.rechnung{border:1px solid #000;background:none}
  @page{size:A4;margin:18mm}
}