/* =============================================================================
   Hundehüttengaudi - Design-System
   Abgeleitet aus Logo, Flyer (außen/innen), Plakat und Visitenkarte.
   Handcodiert, kein Framework, keine externen Requests.
   ============================================================================= */

/* ---------- 1. Schriften (selbst gehostet, DSGVO) ---------------------------
   Brandguide: genau zwei Schriften. Inter für alles Lesbare, Permanent Marker
   ausschließlich für die Wortmarke und ganz vereinzelte Markenmomente. Eine
   dritte Schrift ist ausdrücklich ausgeschlossen.                            */
@font-face{font-family:'Inter';src:url('../fonts/inter-400.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Marker';src:url('../fonts/PermanentMarker-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}

/* ---------- 2. Design Tokens -------------------------------------------------
   Übernommen aus Markenrichtlinien/designguide.md, Abschnitt 8. Werte werden
   nicht nachgemischt, im Code stehen nur Variablen, keine losen Hex-Werte.  */
:root{
  /* Hintergrund und Flächen */
  --cream:#F9F7EC;
  --cream-2:#F2EEDF;
  --paper:#FFFFFF;
  --clay:#DEC9B4;
  --clay-2:#E9DCCB;
  --clay-3:#CBB49C;

  /* Marke, Akzent, Dunkel */
  --sand:#926846;
  --brand:#8C5738;
  --brand-600:#7B4B30;
  --brand-700:#653D27;
  --dark:#56322C;
  --dark-2:#43261F;
  --ink:#1D1D1B;

  /* Text und Linien */
  --ink-70:#4A4644;
  --ink-50:#6E6864;
  --line:rgba(29,29,27,.14);

  /* Abgestufte Deckkräfte der beiden hellen Töne. Vorher standen dieselben
     Werte an elf Stellen als handgemischtes rgba im Code, was der Designguide
     ausschließt. Jetzt einmal benannt, überall referenziert.               */
  --cream-86:rgba(249,247,236,.86);
  --cream-80:rgba(249,247,236,.80);
  --cream-55:rgba(249,247,236,.55);
  --cream-16:rgba(249,247,236,.16);
  --clay-28:rgba(222,201,180,.28);
  --ink-10:rgba(29,29,27,.10);

  /* Funktionale Farben aus dem Designguide, Abschnitt 1. Nur für Status,
     nie als Deko oder große Fläche. Bisher wurden sie auf der Seite nicht
     gebraucht, der Hinweiskasten auf den Rechtstexten braucht sie jetzt. */
  --warn:#C67D1E; --warn-flaeche:#F8EACF; --warn-text:#7A4E12;

  /* Der Fokusring war mit 38 Prozent Deckkraft gegen Cream bei 1,73 zu 1 und
     auf der braunen Schaltfläche rechnerisch unsichtbar. WCAG 1.4.11 verlangt
     3 zu 1. Jetzt volldeckend: 5,5 zu 1 gegen Cream, 6,9 zu 1 gegen
     Dunkelbraun, beides nachgerechnet.
     Reihenfolge mit Absicht: innen ein heller Saum, der das Element vom Ring
     trennt, außen der eigentliche Ring. Andersherum verschwände der Ring auf
     der braunen Schaltfläche in ihrer eigenen Fläche.                     */
  --focus-ring:0 0 0 3px var(--cream),0 0 0 6px var(--brand);
  --focus-ring-dark:0 0 0 3px var(--dark),0 0 0 6px var(--clay);

  /* Schatten, warm getönt und weich */
  --sh-sm:0 1px 2px rgba(86,50,44,.10);
  --sh-md:0 8px 22px rgba(86,50,44,.12);
  --sh-lg:0 20px 46px rgba(86,50,44,.16);

  /* Radien. Die Signaturform ist bewusst leicht schief. */
  --r-xs:6px;
  --r-sm:10px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;
  --r-organic:22px 8px 22px 8px;
  --r-pill:999px;

  /* Bewegung. Über 420ms geht in der Oberfläche nichts. */
  --dur-1:140ms;
  --dur-2:240ms;
  --dur-3:420ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-io:cubic-bezier(.7,0,.3,1);
  --ease-spring:cubic-bezier(.34,1.4,.5,1);

  /* Abstandsleiter auf 4 und 8 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px; --sp-10:128px;
  /* Sektionen atmen, bleiben aber auf der Leiter */
  --sp-sec:clamp(3rem,1.6rem + 4vw,6rem);

  /* Ausgangswert für Ankersprünge, falls kein JavaScript läuft. Sonst wird
     er zur Laufzeit aus der tatsächlichen Höhe der Kopfzeile gesetzt.    */
  --anchor-offset:90px;

  /* Raster */
  --maxw:1180px;
  --gutter:clamp(1rem,4vw,2.5rem);

  /* Typoskala, Grundgröße 17px */
  --font-ui:'Inter',system-ui,sans-serif;
  --font-logo:'Marker',cursive;
  --fs-body:1rem;
  --fs-small:0.875rem;
  --fs-label:0.75rem;
  --fs-lead:1.125rem;
  /* Die Skala muss nach unten mitgehen. Vorher standen H3 und H4 als feste
     Werte da und H1 und H2 hatten Untergrenzen, die auf jedem Handy gewonnen
     haben: H1 lag dort bei 44 Pixeln, H2 bei 34, H3 bei 28. Auf 390 Pixel
     Breite ist das keine Überschrift mehr, das ist ein Plakat.
     Die Obergrenzen sind unverändert, am Schreibtisch ändert sich nichts. */
  --fs-h4:clamp(1.1rem,.95rem + .8vw,1.333rem);
  --fs-h3:clamp(1.25rem,.95rem + 1.5vw,1.666rem);
  --fs-h2:clamp(1.5rem,1rem + 2.6vw,2.6rem);
  /* Zwischenstufe unterhalb H2, für Blocktitel, die in einer langen Reihe
     stehen und die Sektionsüberschrift nicht überholen dürfen: die sieben
     Kursbausteine und die Überschrift im Handlungsband. Steht als eigene
     Stufe im Designguide, damit daraus keine Einzelfälle werden.          */
  --fs-h2-sm:clamp(1.35rem,1rem + 1.6vw,2.3rem);
  --fs-h1:clamp(1.85rem,1.1rem + 3.4vw,3.4rem);
  --fs-display:clamp(2.8rem,1.6rem + 4vw,5rem);
  --lh-normal:1.6;
  --tr-tight:-0.02em;
}
/* Grundgröße 17 Pixel, alle rem-Werte hängen daran. Bewusst als Prozentwert:
   17/16 der Grundschrift des Browsers. Bei Standardeinstellung sind das exakt
   17 Pixel, wer im Browser eine größere Grundschrift eingestellt hat, bekommt
   sie aber nicht stillschweigend zurückgesetzt.                            */
html{font-size:106.25%}

/* ---------- 3. Grundlagen --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
/* Die Reveals starten seitlich versetzt und ragen dabei kurz über den Rand.
   overflow-x:clip fängt das ab, ohne wie overflow:hidden position:sticky
   im Dokument zu brechen. */
/* scroll-padding-top fängt native Ankersprünge ab, etwa beim Wechsel von
   einer Unterseite auf index.html#kontakt. Ohne das läge der Abschnitts-
   anfang unter der fixierten Kopfzeile.                                   */
html{-webkit-text-size-adjust:100%;overflow-x:clip;scroll-padding-top:var(--anchor-offset)}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--font-ui);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
  /* Nimmt die Doppeltipp-Verzögerung auf Touchgeräten und ersetzt das blaue
     Standardrechteck durch einen Ton aus der Palette. Die Schaltflächen haben
     eine organische Form, das Rechteck lag sichtbar daneben.              */
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(140,87,56,.18);
}
img,svg{display:block;max-width:100%}
img{height:auto}
p{margin:0}
/* Typoskala aus dem Designguide, Abschnitt 2. Überschriften mit Laufweite
   minus 0.02em, Fließtext neutral.                                        */
/* Deutsche Wörter werden lang. Bei starkem Textzoom oder auf 320 Pixel
   breiten Geräten passt "Beratungsgespräch" sonst in keine Zeile mehr und
   schiebt den ganzen Kasten über den Rand. hyphens trennt sauber nach den
   Regeln der Sprache, overflow-wrap greift erst, wenn auch das nicht reicht.
   Wichtig ist dabei anywhere und nicht break-word: nur anywhere senkt auch
   die Mindestbreite des Kastens.                                          */
/* Trennen ja, aber nicht um jeden Preis. Ohne Untergrenze zerlegt der Browser
   auch "jeden" zu "je-den", und das sieht im Vorspann nach Druckfehler aus.
   Erst ab sieben Buchstaben wird getrennt, und nie mit weniger als drei
   Buchstaben vor oder nach dem Strich. Deutsche Bandwurmwörter, auf die es
   hier ankommt, sind alle länger.
   Die Eigenschaft kennen Chrome und Firefox, Safari nutzt die eigene
   Schreibweise mit Vorsilbe. Wo keine von beiden greift, bleibt es beim
   bisherigen Verhalten, kaputt geht nichts.                               */
h1,h2,h3,h4,.prose,.lead,.no-list p,.step p,.offer p,.course p{
  hyphens:auto;overflow-wrap:anywhere;
  hyphenate-limit-chars:7 3 3;
  -webkit-hyphenate-limit-before:3;-webkit-hyphenate-limit-after:3}
h1,h2,h3,h4{margin:0;font-family:var(--font-ui);letter-spacing:var(--tr-tight);text-wrap:balance}
/* Zeilenabstand der Überschriften. Vorher stand H1 auf 1.1 und die übrigen auf
   1.25. Nachgemessen blieben bei 57,8 Pixel Schriftgröße nur 5,8 Pixel Luft
   zwischen zwei Zeilen, auf dem Handy 3,2. Bei einer fetten Schrift mit hoher
   x-Höhe stößt das Unterlängen-g der einen Zeile fast in die Versalhöhe der
   nächsten. Jetzt 1.18 und 1.3.                                           */
h1{font-size:var(--fs-h1);font-weight:800;line-height:1.18}
/* Die Textfarbe der Sektionsüberschrift steht hier ein einziges Mal. Vorher
   trug jede zweite Überschrift dieselbe Angabe als style-Attribut.       */
h2{font-size:var(--fs-h2);font-weight:800;line-height:1.3;color:var(--dark)}
.on-dark h2,.band h2{color:var(--cream)}
figure{margin:0}
/* Der versteckte Behälter für das Icon-Set */
.icon-defs{position:absolute}
h3{font-size:var(--fs-h3);font-weight:700;line-height:1.3}
h4{font-size:var(--fs-h4);font-weight:700;line-height:1.3}
a{color:inherit;text-decoration:none}
/* ol muss mit in den Reset. Sonst behält die Zeitachse, die eine geordnete
   Liste ist, die 40 Pixel Innenabstand des Browsers, und ihre verbindende
   Linie läuft neben den Punkten statt durch sie hindurch.                */
ul,ol{margin:0;padding:0;list-style:none}
::selection{background:var(--brand);color:var(--cream)}
/* Der Fokusring wird nie entfernt, Wert kommt aus dem Token. */
:focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
/* Auf den dunklen Flächen kehrt sich der Ring um, sonst läge Marken-Braun auf
   Dunkelbraun und wäre bei 1,27 zu 1 praktisch unsichtbar.                */
.band :focus-visible,.on-dark :focus-visible,
.mobile-nav :focus-visible,.site-footer :focus-visible{box-shadow:var(--focus-ring-dark)}
/* Ein Schatten wird im erzwungenen Farbmodus von Windows nicht gezeichnet.
   Dort bliebe ohne diese Regel gar kein Fokus übrig.                      */
@media (forced-colors:active){
  :focus-visible,.btn:focus-visible{outline:3px solid Highlight;outline-offset:2px}
}
/* Ziel des Sprunglinks und der Ankersprünge. Der Fokus wird per JavaScript
   dorthin gesetzt, sichtbar umranden muss man einen ganzen Abschnitt nicht. */
main:focus,section:focus,[tabindex="-1"]:focus{outline:none;box-shadow:none}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.section{position:relative;padding-block:var(--sp-sec)}
/* Ein Abschnitt, der beim Ansprung die Fensterhöhe ausfüllt. Ohne das bliebe
   unter dem kurzen Kontaktabschnitt der dunkle Seitenfuß im Bild stehen.
   Der Wert kommt aus derselben Variable wie der Ankersprung, das JavaScript
   hält sie an der tatsächlichen Höhe der Kopfzeile.                        */
.section--fill{display:flex;align-items:center;min-height:calc(100dvh - var(--anchor-offset))}
.section--fill>.wrap{width:100%}
/* Flächenwechsel und Polsterausnahmen als Klassen. Vorher standen dieselben
   Werte als style-Attribut in den Seiten, was die Komponentenbibliothek
   ausdrücklich ausschließt.                                               */
.section--cream2{background:var(--cream-2);--ring:var(--cream-2)}
.section--clay2{background:var(--clay-2);--ring:var(--clay-2)}
/* Schließt direkt an den Seitenkopf an, der sein Fußpolster schon mitbringt */
/* Folgt direkt auf einen Abschnitt, der sein Fußpolster schon mitbringt, und
   nimmt deshalb nur das halbe Kopfpolster. Vorher stand hier 0. Damit begann
   das Handlungsband unmittelbar an der Farbkante des Abschnitts darüber und
   klebte daran fest.                                                      */
.section--flush-top{padding-top:var(--sp-7)}
/* Einleitung direkt unter dem Seitenkopf, der sein Fußpolster schon hat */
.section--intro{padding-top:var(--sp-6)}
/* Trägt selbst kein Polster, die Blöcke darin bringen ihres mit */
.section--bare{padding-block:0}
/* Zeilenlänge im Fließtext 60 bis 75 Zeichen */
.prose{max-width:68ch;text-wrap:pretty;color:var(--ink-70)}
.lead{font-size:var(--fs-lead);line-height:1.75;color:var(--ink-70);max-width:62ch;text-wrap:pretty}
.lead--wide{max-width:70ch}
/* Der senkrechte Takt steht hier, nicht als style-Attribut an jedem Absatz.
   Vorher stand margin-top:var(--sp-4) zwanzigmal einzeln im Markup.      */
*+.prose,*+.lead{margin-top:var(--sp-4)}
.brush+h1,.brush+h2,.eyebrow+h1,.eyebrow+h2{margin-top:var(--sp-4)}
/* Der Kopf eines Abschnitts: Pinselstrich oder Label, darunter der Lead */
.sec-head{margin-bottom:var(--sp-6)}
.sec-head--airy{margin-bottom:var(--sp-7)}
.hand{font-family:var(--font-logo);font-weight:400;font-size:clamp(1.05rem,2.2vw,1.3rem);letter-spacing:.01em;color:var(--brand);line-height:1.35;margin-top:var(--sp-4)}
/* Für Text, der nur vorgelesen werden soll. Derzeit nicht im Einsatz,
   bleibt als Werkzeug stehen.                                            */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

.skip-link{position:fixed;top:0;left:var(--gutter);z-index:200;transform:translateY(-120%);background:var(--dark);color:var(--cream);padding:.85em 1.5em;border-radius:0 0 var(--r-md) var(--r-md);font-weight:700;transition:transform var(--dur-2) var(--ease-out)}
.skip-link:focus-visible{transform:translateY(0)}

/* ---------- 4. Pinselstrich-Label (Signature) ------------------------------- */
/* Genau wie auf dem Plakat: das Sektionslabel sitzt auf einem gemalten Strich.
   Beim Scrollen malt sich der Strich per clip-path von links nach rechts. */
/* Der Strich trägt das Label. Zwei Dinge müssen dafür stimmen.

   Erstens die Größe: bei fester H3-Größe brach „Schön, dass Sie da sind" auf
   einem schmalen Gerät auf zwei Zeilen um. Der Strich zog sich dabei in die
   Höhe, seine gemalten Enden liefen auseinander, und der Text stand nicht mehr
   darauf, sondern darüber hinaus. Deshalb skaliert das Label mit der
   Fensterbreite und bleibt einzeilig, geprüft bis hinunter auf 320 Pixel mit
   dem längsten vorkommenden Label.

   Zweitens das Polster: es steht in em und hängt jetzt an der Größe des Labels
   selbst, nicht mehr am geerbten Fließtext. Vorher blieb das Polster gleich,
   während die Schrift wuchs, und der Text rutschte an die linke Kante des
   Strichs.                                                                 */
.brush{position:relative;display:inline-block;max-width:100%;
  font-size:clamp(1rem,4.6vw,var(--fs-h3));
  padding:.5em 1.55em .6em 1.45em;isolation:isolate}
/* Der Pinselstrich trägt auf den meisten Abschnitten die einzige sichtbare
   Überschrift. Als span war er für Vorlesewerkzeuge keine, die darunter
   liegenden h3 hingen damit ohne Elternüberschrift in der Luft. Jetzt ist er
   ein echtes h2, die Basisregeln für h2 werden hier zurückgenommen, damit
   sich am Aussehen nichts ändert.                                          */
h2.brush{font-weight:inherit;line-height:inherit;letter-spacing:normal;text-wrap:wrap;color:inherit;hyphens:manual;overflow-wrap:normal}
.brush::before{
  content:'';position:absolute;inset:-.35em -.6em -.4em -.7em;z-index:-1;
  background:url('../img/pinsel-brand.png') left center/100% 100% no-repeat;
  transition:clip-path var(--dur-3) var(--ease-out);
}
/* Ohne JavaScript malt sich nichts, dann steht der Strich sofort da. Sonst
   läge das Sektionslabel in Cream auf Cream und wäre unsichtbar.        */
.js .brush::before{clip-path:inset(0 100% 0 0)}
.brush.is-painted::before{clip-path:inset(0 0 0 0)}
.brush-text{
  font-family:var(--font-ui);font-weight:700;
  font-size:1em;line-height:1.2;color:var(--cream);letter-spacing:-.01em;
  white-space:nowrap;
}
.brush--clay::before{background-image:url('../img/pinsel-clay.png')}
.brush--clay .brush-text{color:var(--dark)}
.brush--cream::before{background-image:url('../img/pinsel-cream.png')}
.brush--cream .brush-text{color:var(--dark)}

/* kleines Label ohne Strich */
.eyebrow{
  display:inline-block;font-family:var(--font-ui);font-weight:700;
  font-size:var(--fs-label);line-height:1.4;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand);margin-bottom:var(--sp-3);
}
.on-dark .eyebrow{color:var(--clay)}

/* ---------- 5. Buttons ------------------------------------------------------
   Alle Schaltflächen haben dieselbe klassische Pillenform. Beim Überfahren
   kippt die Schaltfläche in ihr Gegenteil: Flächenfarbe und Schriftfarbe
   tauschen die Rollen.

   Der Farbwechsel wird nicht überblendet, sondern läuft als Kreis, der genau
   an der Stelle aufgeht, an der der Zeiger die Fläche betreten hat. Beim
   Verlassen zieht er sich zu der Stelle zusammen, an der er sie verlässt.
   Dadurch reagiert die Schaltfläche auf die tatsächliche Bewegung und nicht
   auf einen festen Ankerpunkt. Ein Effekt, keine Verschiebung der Fläche.
   --------------------------------------------------------------------------- */
.btn{
  position:relative;isolation:isolate;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;
  /* Kein echter Rahmen. Ein 2px-Rahmen liegt außerhalb der Polsterfläche,
     die Füllfarbe reicht dort nicht hin und der Seitenhintergrund schien als
     heller Saum durch. Der Ring wird weiter unten als eigene Ebene über der
     Füllung gezeichnet, das Polster gleicht die 2px aus.                   */
  border:0;padding:calc(.78em + 2px) calc(1.55em + 2px);
  /* Signaturform aus dem Designguide: leicht schief, nie steif. */
  border-radius:var(--r-organic);
  box-shadow:var(--btn-lift,var(--sh-sm));
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small);
  letter-spacing:.01em;
  cursor:pointer;
  color:var(--c-base);
  transition:transform var(--dur-2) var(--ease-out),
             box-shadow var(--dur-2) var(--ease-out);
}
/* Kurve für den Farbkreis. Der Radius soll linear wachsen, dann läuft die
   Wellenfront mit gleichbleibender Geschwindigkeit über die Fläche. Vorher
   stand hier eine eigene Bezierkurve, also eine vierte Kurve neben den drei
   erlaubten, die zudem flach startete und genau den Moment verzögerte, den
   das Auge verfolgt. linear ist hier die physikalisch richtige Wahl.      */
:root{--ease-btn:linear}

/* Farbe ausdrücklich setzen, nicht erben. In der Navigation gewinnt sonst
   .nav a mit höherer Spezifität und die Grundschrift wird dunkelbraun. */
.btn-l{display:inline-flex;align-items:center;gap:.6em;color:var(--c-base);white-space:nowrap}
/* Die zweite Textebene liegt absolut über der ersten, nicht daneben. Ein
   Raster hätte hier nicht getragen, weil .nav a mit höherer Spezifität ein
   eigenes display setzt und die Ebenen nebeneinander gerutscht wären.     */
.btn-l-inv{
  position:absolute;inset:0;padding:inherit;justify-content:center;
  color:var(--c-inv);clip-path:circle(0px at var(--bx,50%) var(--by,50%));
}
/* die Gegenfarbe, die aufgeht */
.btn::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:var(--btn-inv,var(--cream));
  clip-path:circle(0px at var(--bx,50%) var(--by,50%));
}
/* Fläche und Schriftebene laufen exakt gleich. Der Zielradius wird aus dem
   Eintrittspunkt berechnet, eine feste Prozentangabe würde je nach
   Eintrittsstelle eine Ecke stehen lassen. Zurück schneller als hin.      */
.btn::before,.btn-l-inv{transition:clip-path var(--dur-1) var(--ease-btn)}

/* Der Ring. Als eigene Ebene, weil ein eingesetzter Schatten zur
   Hintergrundebene gehört und von der Füllung mit negativem z-Index
   überdeckt würde.                                                        */
.btn::after{
  content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 2px var(--btn-ring,transparent);
  /* Ring und Pfeil sind Mikrobewegungen. Vorher liefen beide in 420ms, der
     Ring hing nach dem Verlassen also fast eine halbe Sekunde nach.      */
  transition:box-shadow var(--dur-1) var(--ease-out);
}
.btn svg{width:1.15em;height:1.15em;flex:none;fill:currentColor;transition:transform var(--dur-1) var(--ease-out)}

.btn-primary{background:var(--brand);--c-base:var(--cream);--c-inv:var(--brand-600);--btn-inv:var(--cream);--btn-lift:var(--sh-sm)}
/* Die Kontur lag mit Clay 3 bei 1,85 zu 1 auf Cream. Sand bringt sie auf
   3,4 zu 1 und bleibt dabei in der Palette.                              */
.btn-secondary{background:transparent;--c-base:var(--dark);--c-inv:var(--cream);--btn-inv:var(--dark);--btn-ring:var(--sand);--btn-lift:none}
.on-dark .btn-secondary{--c-base:var(--cream);--c-inv:var(--dark);--btn-inv:var(--cream);--btn-ring:rgba(249,247,237,.45)}
/* Im braunen Band muss die Gegenfarbe deutlich dunkler sein als das Band,
   sonst verschwindet die Schaltfläche beim Umschlagen darin. */
.cta-band .btn-primary{background:var(--cream);--c-base:var(--brand-600);--c-inv:var(--cream);--btn-inv:var(--dark)}

@media (hover:hover) and (pointer:fine){
  /* Zustand Hover aus dem Designguide: 2px anheben, Farbe eine Stufe
     dunkler, weicher Schatten. Die Abdunklung übernimmt hier der Kreis.  */
  .btn:hover{transform:translateY(-2px);box-shadow:var(--sh-md)}
  .btn:hover::before,.btn:hover .btn-l-inv{
    clip-path:circle(var(--br,150%) at var(--bx,50%) var(--by,50%));
    transition-duration:var(--dur-3);
  }
  .btn:hover svg{transform:translateX(3px)}
  .btn-primary:hover{--btn-ring:var(--brand)}
  .btn-secondary:hover{--btn-ring:var(--dark)}
  .on-dark .btn-secondary:hover{--btn-ring:var(--cream)}
  .cta-band .btn-primary:hover{--btn-ring:var(--cream)}
}
/* Zustand Aktiv: zurück auf Grundhöhe, Farbe Brand 700. Druckfeedback läuft
   auf der kürzesten Stufe, alles darüber fühlt sich schwammig an.        */
.btn:active{transform:translateY(0) scale(.98);box-shadow:var(--sh-sm);transition-duration:var(--dur-1)}
.btn-primary:active{--btn-inv:var(--clay-2);--c-inv:var(--brand-700)}
.btn-secondary:active{--btn-inv:var(--brand-700)}

/* Zustand Fokus: sichtbarer Ring, der Kreis geht aus der Mitte auf */
.btn:focus-visible{outline:none;box-shadow:var(--focus-ring),var(--sh-md)}
.btn:focus-visible::before,.btn:focus-visible .btn-l-inv{clip-path:circle(120% at 50% 50%)}
.btn-primary:focus-visible{--btn-ring:var(--brand)}
.btn-secondary:focus-visible{--btn-ring:var(--dark)}
.on-dark .btn-secondary:focus-visible{--btn-ring:var(--cream)}
.cta-band .btn-primary:focus-visible{--btn-ring:var(--cream)}

/* Zustand Gesperrt: halbe Deckkraft, kein Zeiger, keine Bewegung */
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;pointer-events:none;transform:none;box-shadow:none}

/* Ohne JavaScript gibt es die zweite Textebene nicht. Dann bleibt die
   Schaltfläche einfarbig, statt dass die Grundschrift auf der Gegenfarbe
   landet und unlesbar wird. */
.btn:not(.btn--fx)::before{display:none}

@media (prefers-reduced-motion:reduce){
  .btn,.btn::before,.btn-l-inv,.btn::after{transition:none}
  .btn:hover{transform:none}
  .btn:hover svg{transform:none}
}

/* Textlink mit wachsender Unterlinie */
.arrow-link{display:inline-flex;align-items:center;gap:.45em;min-height:44px;font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small);color:var(--brand)}
.arrow-link svg{width:1.05em;height:1.05em;fill:currentColor;transition:transform var(--dur-2) var(--ease-out)}
.arrow-link .u{display:block;height:2px;background:currentColor;width:100%;transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease-out)}
.arrow-link span.lbl{display:inline-block}
@media (hover:hover) and (pointer:fine){
  .arrow-link:hover svg{transform:translateX(4px)}
  .arrow-link:hover .u{transform:scaleX(1)}
}
.on-dark .arrow-link{color:var(--clay)}

/* ---------- 6. Kopfzeile ---------------------------------------------------- */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:100;
  transition:background-color var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out),padding var(--dur-2) var(--ease-out);
  padding-block:clamp(.7rem,1.6vw,1.1rem);
}
/* Bei offenem Menü liegt die dunkle Menüfläche hinter der Kopfzeile. Damit das
   Logo dort auf hellem Grund steht, bekommt die Kopfzeile ihre helle Fläche,
   unabhängig davon, wie weit vorher gescrollt wurde.

   Vorher stand hier filter:brightness(0) invert(1) auf dem Logo. Das ist aus
   zwei Gründen falsch: der Brandguide verbietet das Umfärben des Logos, und
   sobald die Kopfzeile schon ihre helle Fläche trug, weil vor dem Öffnen des
   Menüs gescrollt worden war, stand ein weißes Logo auf Cream und war
   praktisch unsichtbar.                                                    */
.site-header.nav-open,
.site-header.is-stuck{background:rgba(249,247,237,.94);backdrop-filter:blur(14px);box-shadow:0 1px 0 rgba(29,29,27,.08),0 10px 30px -22px rgba(86,50,44,.5)}
/* Bei offenem Menü zusätzlich der kompakte Zustand. Das spart rund 18 Pixel
   Kopfhöhe, die das Menü darunter für seine Punkte braucht.               */
.site-header.nav-open,
.site-header.is-stuck{padding-block:.55rem}
.site-header.nav-open .logo img{transform:scale(.84)}
.header-inner{display:flex;align-items:center;gap:var(--sp-4);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.logo{flex:none;display:block}
/* Untergrenze 148 Pixel: der Brandguide setzt für das volle Logo 140 Pixel
   Mindestbreite fest und verlangt darunter die Bildmarke ohne Wortmarke.
   Vorher lief die Spanne bis 122 und im kompakten Zustand bis 104 Pixel,
   die Unterzeile war dort nicht mehr lesbar.
   Gestaucht wird über transform, nicht über width. width ist eine Layout-
   Eigenschaft und rechnete beim ersten Scrollen das Flexlayout der Kopfzeile
   neu, genau in dem Moment, in dem auch backdrop-filter zugeschaltet wird. */
.logo img{width:clamp(148px,13vw,168px);transform-origin:left center}
.is-stuck .logo img{transform:scale(.84)}
.nav{margin-left:auto;display:flex;align-items:center;gap:clamp(.4rem,1.4vw,1.5rem)}
/* -----------------------------------------------------------------------
   Menüpunkte: die wandernde Pfote

   Statt eines Feldes hinter dem Wort sitzt eine einzelne kleine Pfote
   unterhalb der Zeile und markiert die aktuelle Seite. Sie bewegt sich nur
   waagerecht, die Höhe bleibt fest. Beim Überfahren läuft sie zur Vorschau
   mit, nach dem Klick läuft sie über den Seitenwechsel hinweg von der alten
   zur neuen Seite. Unterwegs hüpft sie leicht und dreht sich in
   Laufrichtung, im Stand steht sie still.
   ----------------------------------------------------------------------- */
.nav{position:relative}
.nav-paw{
  position:absolute;left:0;bottom:-3px;width:19px;height:19px;margin-left:-9.5px;
  fill:var(--brand);opacity:0;pointer-events:none;
  transition:opacity var(--dur-2) var(--ease-out);
  will-change:transform;
}
.nav-paw.is-on{opacity:.92}

.nav a{
  position:relative;
  display:inline-flex;align-items:center;min-height:44px;padding:.6em .55em;
  font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small);
  color:var(--dark);
  transition:color var(--dur-1) var(--ease-out);
}
.nav a[aria-current="page"]{color:var(--brand-600)}
@media (hover:hover) and (pointer:fine){
  .nav a:hover{color:var(--brand-600)}
}
.nav a:focus-visible{color:var(--brand-600)}

.nav a.btn{margin-left:clamp(.3rem,1vw,.8rem);padding:calc(.78em + 2px) calc(1.55em + 2px)}
.nav a.btn-primary{--c-base:var(--cream);--c-inv:var(--brand-600)}

@media (prefers-reduced-motion:reduce){
  .nav-paw{transition:none}
}

/* Unter 900 Pixel steht das mobile Menü, das Klappfeld wird nicht gebraucht. */
/* Ab hier steht das mobile Menü, das Klappfeld wird nicht gebraucht. Der
   Wert liegt jetzt auf demselben Haltepunkt wie das Layout: zwischen 901
   und 1000 Pixel stand vorher die Desktop-Navigation über einspaltigem
   Inhalt, was zwar lief, aber unbeabsichtigt war.                       */

.burger{display:none;width:48px;height:48px;align-items:center;justify-content:center;background:var(--cream);color:var(--dark);border:0;border-radius:var(--r-pill);margin-left:auto;cursor:pointer;box-shadow:var(--sh-md);transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out)}
.burger[aria-expanded="true"]{background:var(--cream);color:var(--dark)}
.burger:active{transform:scale(.94)}
.burger svg{width:22px;height:22px;fill:currentColor}
.burger .ic-x{display:none}
.burger[aria-expanded="true"] .ic-menu{display:none}
.burger[aria-expanded="true"] .ic-x{display:block}

/* Das untere Polster nimmt den Homeindikator mit auf, sonst liegt die
   Telefonnummer darunter. Der Abgang läuft auf der kürzesten Stufe: ein
   Aufgang darf Zeit brauchen, ein Abgang soll nicht warten lassen.      */
.mobile-nav{position:fixed;inset:0;z-index:99;background:var(--dark);color:var(--cream);display:flex;flex-direction:column;justify-content:flex-start;overflow-y:auto;overscroll-behavior:contain;/* Der linke Rand ist absichtlich breiter als der rechte. In dem Streifen sitzt
   die Pfote, die den aktuellen Punkt markiert. Vorher schob sich jeder Link
   selbst per margin-left nach rechts, die Adresszeile darunter aber nicht, und
   der Telefonlink erbte das margin ein zweites Mal. Ergebnis waren drei
   verschiedene linke Kanten. Jetzt macht das Polster den Platz, und alles
   darin steht auf derselben Linie.                                        */
gap:var(--sp-3);padding:calc(var(--anchor-offset) + var(--sp-5)) var(--gutter) calc(var(--sp-5) + env(safe-area-inset-bottom)) calc(var(--gutter) + 1.6rem);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1)}
.mobile-nav.is-open{opacity:1;visibility:visible;transform:translateY(0);transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out),visibility 0s}
/* Sechs Hauptpunkte, sieben Bausteine und die Kontaktzeile müssen zusammen auf
   einen Handybildschirm passen. Vorher lag die Schrift bei clamp(1.6rem,7vw,
   2.4rem), auf einem 390 Pixel breiten Gerät also bei 27 Pixeln, so groß wie
   eine Sektionsüberschrift. Der Inhalt war 1045 Pixel hoch und lief bei jedem
   gängigen Handy über. Jetzt liegt die Skala zwischen H4 und H3, das ist immer
   noch deutlich größer als der Fließtext und passt in eine Ansicht.        */
.mobile-nav a{position:relative;align-self:flex-start;display:flex;align-items:center;min-height:48px;font-family:var(--font-ui);font-weight:800;font-size:clamp(1.2rem,4.4vw,var(--fs-h3));letter-spacing:-.02em;padding:0;color:var(--cream)}
/* im mobilen Menü steht die Pfote links neben dem aktuellen Punkt */
.mobile-nav a::before{
  content:'';position:absolute;left:-1.5rem;top:50%;width:18px;height:18px;margin-top:-9px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23DEC9B4'%3E%3Cpath d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72ZM168,208a24,24,0,0,1-9.45-1.93,80.14,80.14,0,0,0-61.19,0A24,24,0,0,1,88,208a24,24,0,0,1-11.36-45.15,51.22,51.22,0,0,0,24.5-30.72,28,28,0,0,1,53.72,0,51.27,51.27,0,0,0,24.5,30.72A24,24,0,0,1,168,208Z'/%3E%3C/svg%3E") center/contain no-repeat;
  opacity:0;transform:translateX(-6px) scale(.6) rotate(-20deg);
  transition:opacity var(--dur-1) var(--ease-out),transform var(--dur-3) var(--ease-spring);
}
.mobile-nav a[aria-current="page"]::before{opacity:1;transform:translateX(0) scale(1) rotate(-8deg)}

@media (max-width:62.5em){
  .nav{display:none}
  .burger{display:inline-flex}
}

/* ---------- 7. Hero --------------------------------------------------------- */
/* Unten kein eigenes Polster: den Abstand zum nächsten Abschnitt setzt
   allein dessen Kopfpolster. Sonst addieren sich beide und der Bereich unter
   den Schaltflächen reißt weiter auf als jeder andere Abschnittswechsel.

   Bewusst ohne overflow:clip. Bei niedrigen Fenstern liegt die Bildfigur
   genau auf der Unterkante, und der Zuschnitt hätte Schlagschatten und die
   weiche Blobkante hart abgeschnitten. Waagerecht hält bereits
   overflow-x:hidden am body alles zusammen, die Eckformen sitzen ohnehin
   innerhalb und wandern beim Scrollen nur nach oben.                     */
.hero{position:relative;min-height:100dvh;display:flex;align-items:center;padding-block:clamp(7rem,16vw,9rem) 0}
/* Der Abstand zwischen Textspalte und Bild wächst mit der Fensterbreite.
   Vorher stand hier ein fester Wert von 32 Pixeln. Nachgemessen lief die
   längste Zeile des Vorspanns damit bis auf 40 Pixel an das Bild heran, und
   der Punkt hinter "Mittelpunkt" stand noch näher. Der Seitenkopf der
   Unterseiten hatte 48, also waren die beiden auch untereinander uneinig.
   Jetzt dieselbe Rechnung für beide: 48 Pixel im Minimum, 96 im Maximum.  */
.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.85fr);
  gap:clamp(var(--sp-7),5.5vw,var(--sp-9));align-items:center;width:100%}
/* Die Textspalte sitzt etwas höher als die Bildmitte. So bleibt unter den
   Schaltflächen Luft und der Blick wird nach unten weitergeführt. */
.hero-copy{align-self:start;margin-top:clamp(0px,2.6vw,42px)}
.hero h1{font-size:var(--fs-h1);color:var(--dark)}
.hero h1 .accent{color:var(--brand)}
.hero .lead{margin-top:var(--sp-4)}
.hero-cta{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}

/* Foto in organischer Blobmaske, Formen aus dem Flyer abgenommen */
.blob-photo{position:relative}
.blob-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:48% 52% 46% 54%/40% 38% 62% 60%;outline:1px solid var(--ink-10);outline-offset:-1px;box-shadow:var(--sh-lg)}
.blob-photo::before{content:'';position:absolute;inset:-4% -6% 2% -8%;background:var(--clay);border-radius:52% 48% 58% 42%/46% 56% 44% 54%;z-index:-1}

/* gestreute Pfoten. Ohne aspect-ratio fällt ein SVG ohne viewBox auf die
   Standardhöhe von 150 Pixeln zurück, die Pfote sitzt darin mittig und damit
   deutlich unterhalb der angegebenen Stelle.                             */
.paws{position:absolute;inset:0;pointer-events:none;z-index:0}
.paws svg{position:absolute;aspect-ratio:1;height:auto;fill:var(--brand);opacity:.14}

/* Blob-Ecken (Flyer-Formen). Die Farbe kommt über currentColor aus dem Token,
   im Markup steht kein Hexwert mehr.                                     */
.corner{position:absolute;pointer-events:none;line-height:0;color:var(--clay)}
.corner svg{display:block}
.corner-tl{top:0;left:0;width:min(38vw,470px)}
.corner-tr{top:0;right:0;width:min(26vw,330px)}

/* ---------- 8. Dunkles Band (Haltung) --------------------------------------- */
.band{position:relative;background:var(--dark);color:var(--cream);padding-block:var(--sp-sec)}
.band::before,.band::after{content:'';position:absolute;left:0;right:0;height:clamp(40px,6vw,90px);background:inherit}
.band::before{top:0;transform:translateY(-99%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C260,10 430,96 660,52 C860,14 1010,72 1200,26 L1200,100 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,100 C260,10 430,96 660,52 C860,14 1010,72 1200,26 L1200,100 Z' fill='%23000'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}
.band::after{bottom:0;transform:translateY(99%);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C220,74 420,4 640,44 C840,80 1020,20 1200,66 L1200,0 Z' fill='%23000'/%3E%3C/svg%3E") top/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C220,74 420,4 640,44 C840,80 1020,20 1200,66 L1200,0 Z' fill='%23000'/%3E%3C/svg%3E") top/100% 100% no-repeat}
.band .wrap{position:relative;z-index:1}

.stance{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:var(--sp-6) var(--sp-7);align-items:start}
.stance h2{font-size:var(--fs-h2);color:var(--cream)}
.no-list{display:grid;gap:var(--sp-4)}
.no-list li{padding-bottom:var(--sp-4);border-bottom:1px solid var(--clay-28)}
.no-list li:last-child{border-bottom:0;padding-bottom:0}
.no-list b{display:block;font-family:var(--font-ui);font-weight:800;font-size:var(--fs-h3);color:var(--clay);margin-bottom:.35em}
.no-list p{font-size:var(--fs-small);color:var(--cream-80);max-width:52ch}
/* Der Lead im dunklen Band. Stand vorher als style-Attribut in drei Seiten. */
.on-dark .lead,.band .lead{color:var(--cream-86)}

/* ---------- 9. Angebote: asymmetrisches Collagenraster ---------------------- */
.offers{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--sp-4)}
.offer{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);border-radius:var(--r-xl);padding:var(--sp-4);
  box-shadow:var(--sh-md);overflow:hidden;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out);
}
.offer-media{position:relative;border-radius:var(--r-lg);overflow:hidden;flex:none}
.offer-media img{width:100%;display:block;object-fit:cover;transition:transform var(--dur-3) var(--ease-out)}
.offer-body{padding:var(--sp-4) var(--sp-3) var(--sp-2)}
.offer h3{font-size:var(--fs-h3);color:var(--dark)}
.offer p{margin-top:.6em;font-size:var(--fs-small);color:var(--ink-70);text-wrap:pretty}
.offer .arrow-link{margin-top:var(--sp-4)}
.offer--lead{grid-column:span 7}
.offer--lead .offer-media img{aspect-ratio:16/11}
.offer--side{grid-column:span 5}
.offer--side .offer-media img{aspect-ratio:16/10}
.offer--wide{grid-column:span 12;flex-direction:row;align-items:stretch;gap:var(--sp-5)}
.offer--wide .offer-media{position:relative;width:min(42%,420px);align-self:stretch;min-height:280px}
.offer--wide .offer-media img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
.offer--wide .offer-body{display:flex;flex-direction:column;justify-content:center;padding-block:var(--sp-4);max-width:60ch}
@media (hover:hover) and (pointer:fine){
  .offer:hover{transform:translateY(-5px);box-shadow:var(--sh-lg)}
  .offer:hover .offer-media img{transform:scale(1.045)}
}
/* Papier-Sprenkel wie im Flyer */
.speckles{position:absolute;inset:0;pointer-events:none;opacity:.22;
  background-image:radial-gradient(circle,var(--clay) 1.6px,transparent 1.7px),radial-gradient(circle,var(--clay) 2.6px,transparent 2.7px);
  background-size:180px 160px,260px 240px;background-position:0 0,90px 70px}

/* ---------- 10. Tagesablauf (echte Abfolge, darum Zeitmarken) --------------- */
/* Die Zeitachse rechnet ihre Verbindungslinie aus der Spaltenzahl aus, statt
   sie auf vier Spalten zu trimmen. Der Ablauf auf der ESA-Seite läuft
   dreispaltig, dort ragte die Linie vorher beidseitig über den ersten und
   letzten Punkt hinaus.                                                  */
.day{--cols:4;position:relative;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--sp-4)}
.day::before{content:'';position:absolute;top:32px;left:calc(50% / var(--cols));right:calc(50% / var(--cols));height:2px;background:repeating-linear-gradient(90deg,var(--clay) 0 10px,transparent 10px 20px)}
.day--3{--cols:3}
.step{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);text-align:center;align-items:center}
/* flex:none ist Pflicht. In der gestapelten Ansicht steht der Schritt als
   Flexzeile, und ohne diese Angabe drückt der Text den Kreis in der Breite
   zusammen: aus dem Kreis wird ein hochkant stehendes Oval.               */
.step-dot{flex:none;width:64px;height:64px;border-radius:50%;background:var(--cream);border:2px solid var(--brand);display:grid;place-items:center;color:var(--brand);box-shadow:0 0 0 8px var(--ring,var(--cream))}
.step-dot svg{width:28px;height:28px;fill:currentColor}
.step-time{font-family:var(--font-ui);font-weight:800;font-size:var(--fs-small);color:var(--brand);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.step h3{font-size:var(--fs-h3);color:var(--dark);margin-top:.18em;margin-bottom:.3em}
.step p{font-size:var(--fs-small);color:var(--ink-70);max-width:26ch;text-wrap:pretty}

/* ---------- 11. Über mich: gerissener Papierrahmen --------------------------- */
.torn{background:var(--paper);padding:clamp(9px,1.3vw,15px);box-shadow:var(--sh-lg);
  clip-path:polygon(0% 0%,7.1% 1.0%,14.3% .5%,21.4% 2.1%,28.6% .2%,35.7% 1.7%,42.9% 1.2%,50% .2%,57.1% 1.6%,64.3% .1%,71.4% 1.4%,78.6% .2%,85.7% .3%,92.9% 1.4%,100% 0%,97.4% 7.1%,99.6% 14.3%,99.3% 21.4%,98% 28.6%,97% 35.7%,98.2% 42.9%,98.7% 50%,96.9% 57.1%,99.9% 64.3%,97.3% 71.4%,99.1% 78.6%,99.5% 85.7%,99.6% 92.9%,100% 100%,92.9% 99%,85.7% 97.4%,78.6% 99.4%,71.4% 98.1%,64.3% 98%,57.1% 98.8%,50% 98.2%,42.9% 99.8%,35.7% 99.8%,28.6% 99.3%,21.4% 97.8%,14.3% 98.6%,7.1% 99%,0% 100%,1.9% 92.9%,1.5% 85.7%,1% 78.6%,2.5% 71.4%,2.2% 64.3%,.8% 57.1%,1.8% 50%,1.7% 42.9%,2.8% 35.7%,2.3% 28.6%,.9% 21.4%,3.1% 14.3%,.4% 7.1%)}
.torn img{width:100%;aspect-ratio:4/5;object-fit:cover}
/* 9/7 ist exakt das Seitenverhältnis der Fotos in diesem Rahmen (900x700).
   Vorher stand hier 16/11, das schnitt jedem Bild zwölf Prozent der Höhe ab,
   oben und unten je sechs. Bei knapp gefassten Motiven ging dabei der Kopf
   verloren. Passt der Rahmen zur Quelle, wird gar nichts beschnitten.      */
.torn--wide img{aspect-ratio:9/7}
.values{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.chip{display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:.45em 1.05em;border-radius:var(--r-pill);background:var(--clay-2);color:var(--dark);font-family:var(--font-ui);font-weight:700;font-size:var(--fs-small)}
.chip svg{width:1.05em;height:1.05em;fill:var(--brand)}

/* ---------- 12. Impressionen: gekippte Polaroids ---------------------------- */
/* Zwei Ebenen mit Absicht: der Träger .pola-wrap gehört dem Scrolleffekt,
   die Karte .pola gehört dem Stylesheet. Vorher schrieb GSAP sein transform
   direkt auf .pola, und ein inline gesetztes transform schlägt jede Regel im
   Stylesheet. Damit griffen weder die Grunddrehung noch der Hover, der
   Effekt stand im Code und war am Bildschirm nie zu sehen.              */
/* Sechs Bilder auf der Startseite, deshalb drei Spalten: zwei volle Zeilen
   statt vier plus zwei mit einer Lücke am Ende. Die vollständige Sammlung
   steht auf der Galerieseite.                                            */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-6) var(--sp-5)}
.pola-wrap{display:block}
.pola{display:block;margin:0;background:var(--paper);padding:10px 10px clamp(30px,3.4vw,42px);box-shadow:var(--sh-md);
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.pola img{width:100%;aspect-ratio:1;object-fit:cover;outline:1px solid var(--ink-10);outline-offset:-1px}
.pola figcaption{margin-top:.7em;font-family:var(--font-logo);font-size:var(--fs-small);color:var(--ink-70);text-align:center}
.pola-wrap:nth-child(4n+1) .pola{transform:rotate(-2.4deg)}
.pola-wrap:nth-child(4n+2) .pola{transform:rotate(1.6deg)}
.pola-wrap:nth-child(4n+3) .pola{transform:rotate(-1.1deg)}
.pola-wrap:nth-child(4n+4) .pola{transform:rotate(2.6deg)}
@media (hover:hover) and (pointer:fine){
  .pola-wrap:hover .pola,.pola-wrap:focus-within .pola{transform:rotate(0deg) translateY(-6px);box-shadow:var(--sh-lg)}
}

/* ---------- 12b. Galerieseite: Collagenraster und Lichtkasten --------------- */
/* Sechs Spalten. Ein quadratisches Bild nimmt zwei, ein liegendes drei. Damit
   wechselt der Takt zeilenweise zwischen drei und zwei Bildern, statt vier
   gleiche Kacheln in Reih und Glied zu stellen.                           */
.gallery-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:var(--sp-6) var(--sp-5)}
.gallery-grid .pola-wrap{grid-column:span 2}
.gallery-grid .pola-wrap--breit{grid-column:span 3}
.gallery-grid .pola-wrap--breit .pola img{aspect-ratio:4/3}
/* Die Drehung folgt hier der Position im Sechserraster, nicht dem Vierertakt */
.gallery-grid .pola-wrap:nth-child(6n+1) .pola{transform:rotate(-2.2deg)}
.gallery-grid .pola-wrap:nth-child(6n+2) .pola{transform:rotate(1.4deg)}
.gallery-grid .pola-wrap:nth-child(6n+3) .pola{transform:rotate(-1deg)}
.gallery-grid .pola-wrap:nth-child(6n+4) .pola{transform:rotate(2.2deg)}
.gallery-grid .pola-wrap:nth-child(6n+5) .pola{transform:rotate(-1.6deg)}
.gallery-grid .pola-wrap:nth-child(6n+6) .pola{transform:rotate(1.1deg)}
.pola-link{display:block;border-radius:var(--r-xs);cursor:zoom-in}
.gallery-hint{margin-top:var(--sp-7);font-size:var(--fs-small);color:var(--ink-50);text-align:center}
/* Verweis von der Startseite auf die vollständige Galerie */
.gallery-mehr{margin-top:var(--sp-6);text-align:center}

/* Lichtkasten. Eigener kleiner Baustein, kein Fremdpaket. Aufgang in --dur-2,
   Abgang in --dur-1: ein Aufgang darf Zeit brauchen, ein Abgang nicht.   */
.lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;
  padding:clamp(1rem,4vw,3rem);
  background:rgba(29,29,27,.86);backdrop-filter:blur(6px);
  opacity:0;visibility:hidden;
  /* visibility bekommt bewusst keine Dauer, sondern nur eine Verzögerung beim
     Schließen. Mit einer Dauer meldet der Browser im nächsten Bild noch
     hidden, und ein Element in einem unsichtbaren Kasten nimmt keinen Fokus
     an: der Sprung in den Lichtkasten schlug damit fehl.                 */
  transition:opacity var(--dur-1) var(--ease-out),visibility 0s linear var(--dur-1)}
.lightbox.is-open{opacity:1;visibility:visible;
  transition:opacity var(--dur-2) var(--ease-out),visibility 0s}
.lightbox[hidden]{display:none}
.lb-fig{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);
  max-width:min(100%,1120px);margin:0}
.lb-fig img{max-width:100%;max-height:calc(100dvh - 11rem);width:auto;height:auto;
  object-fit:contain;background:var(--paper);padding:clamp(8px,1vw,12px);
  box-shadow:var(--sh-lg);
  transform:scale(.965);opacity:0;
  transition:transform var(--dur-2) var(--ease-spring),opacity var(--dur-1) var(--ease-out)}
.lightbox.is-open .lb-fig img{transform:none;opacity:1}
.lb-cap{font-family:var(--font-logo);font-size:var(--fs-lead);color:var(--cream);text-align:center}
.lb-zaehler{font-size:var(--fs-small);color:var(--cream-55);font-variant-numeric:tabular-nums}
.lb-knopf{position:absolute;display:grid;place-items:center;width:52px;height:52px;
  border:0;border-radius:var(--r-pill);cursor:pointer;
  background:var(--cream);color:var(--dark);box-shadow:var(--sh-md);
  transition:transform var(--dur-1) var(--ease-out),background-color var(--dur-1) var(--ease-out)}
.lb-knopf svg{width:22px;height:22px;fill:currentColor}
.lb-schliessen{top:clamp(.75rem,2.5vw,1.5rem);right:clamp(.75rem,2.5vw,1.5rem)}
.lb-zurueck{left:clamp(.75rem,2.5vw,1.5rem);top:50%;margin-top:-26px}
.lb-weiter{right:clamp(.75rem,2.5vw,1.5rem);top:50%;margin-top:-26px}
.lb-zurueck svg{transform:rotate(180deg)}
@media (hover:hover) and (pointer:fine){
  .lb-knopf:hover{background:var(--clay);transform:scale(1.06)}
}
.lb-knopf:active{transform:scale(.94)}
.lb-knopf:focus-visible{box-shadow:var(--focus-ring-dark)}
@media (max-width:40em){
  .lb-knopf{width:46px;height:46px}
  .lb-zurueck,.lb-weiter{top:auto;bottom:clamp(.75rem,3vw,1.25rem);margin-top:0}
  .lb-fig img{max-height:calc(100dvh - 14rem)}
}
@media (prefers-reduced-motion:reduce){
  .lightbox,.lb-fig img,.lb-knopf{transition:none}
  .lb-fig img{transform:none;opacity:1}
}

/* ---------- 12c. Rechtstexte ------------------------------------------------ */
/* Impressum und Datenschutz. Eine Spalte, ruhig gesetzt, ohne Bilder und ohne
   Bewegung. Diese Seiten werden gelesen, nicht angeschaut.               */
.legal{max-width:70ch}
.legal h2{font-size:var(--fs-h3);margin-top:var(--sp-8)}
/* Nur das erste Element im Rechtstext verliert sein Kopfpolster, und die erste
   Überschrift direkt nach einem Hinweiskasten. Vorher stand hier
   h2:first-of-type. Auf der AGB-Seite steht der Adressblock vor der ersten
   Überschrift, und die klebte dadurch an der Adresse.                      */
.legal>*:first-child{margin-top:0}
.legal .hinweis+h2{margin-top:0}
.legal h3{font-size:var(--fs-h4);margin-top:var(--sp-6)}
.legal p,.legal ul{margin-top:var(--sp-4);color:var(--ink-70);text-wrap:pretty}
.legal ul{display:grid;gap:var(--sp-2);padding-left:1.25em;list-style:disc}
.legal li{color:var(--ink-70)}
.legal a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){.legal a:hover{color:var(--brand-700)}}
.legal address{font-style:normal;margin-top:var(--sp-4);color:var(--ink-70);line-height:1.9}
/* Wortmarke der Agentur im Impressum. Feste Breite statt voller Spaltenbreite,
   sonst stünde sie größer da als die Wortmarke der Kundin in der Kopfzeile.
   Das Tippziel bekommt 44 Pixel wie jedes andere auch. */
.urheber-logo{margin-top:var(--sp-5)}
.urheber-logo a{display:inline-flex;align-items:center;min-height:44px}
.urheber-logo img{display:block;width:clamp(150px,22vw,190px);height:auto}
.legal dl{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-2) var(--sp-5);margin-top:var(--sp-4);
  font-size:var(--fs-small)}
.legal dt{font-weight:700;color:var(--dark)}
.legal dd{margin:0;color:var(--ink-70)}
@media (max-width:40em){.legal dl{grid-template-columns:1fr;gap:0}
  .legal dd{margin-bottom:var(--sp-3)}}
/* Offene Punkte, die von der Kundin kommen müssen. Bewusst auffällig, damit
   niemand die Seite mit Platzhaltern online stellt.                      */
.offen{display:inline-block;padding:.15em .5em;border-radius:var(--r-xs);
  background:var(--warn-flaeche);color:var(--warn-text);font-weight:700;font-size:.9em}
.hinweis{margin-top:var(--sp-6);padding:var(--sp-5);border-radius:var(--r-lg);
  background:var(--warn-flaeche);color:var(--warn-text)}
.hinweis b{display:block;margin-bottom:var(--sp-2);color:var(--warn-text)}
.legal .hinweis p{color:var(--warn-text)}

/* ---------- 13. Kontaktkarte (Flyer-Baustein) ------------------------------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:var(--sp-6);align-items:start}
.card{background:var(--paper);border-radius:var(--r-xl);padding:var(--sp-5);box-shadow:var(--sh-md)}
.card h3{font-size:var(--fs-h3);color:var(--dark);margin-bottom:var(--sp-4)}
.contact-list{display:grid;gap:var(--sp-3)}
.contact-list li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start}
.contact-list .ic{width:40px;height:40px;flex:none;border-radius:var(--r-pill);background:var(--brand);display:grid;place-items:center}
.contact-list .ic svg{width:19px;height:19px;fill:var(--cream)}
/* overflow-wrap:anywhere statt break-word: nur diese Variante senkt auch die
   Mindestbreite des Kastens. Ohne sie zwang die E-Mail-Adresse als ein
   einziges unteilbares Wort die Kontaktkarte auf 306 Pixel und schob sie auf
   schmalen Geräten über den rechten Rand.                                */
.contact-list a,.contact-list span,.contact-list .mail-knopf{display:flex;align-items:center;align-self:center;min-width:0;overflow-wrap:anywhere;min-height:44px;font-size:var(--fs-small);color:var(--ink-70);line-height:1.5}

/* ---------- E-Mail-Schaltflächen ------------------------------------------
   Die Adressen stehen nirgends als Verweis im Dokument, sonst zeigte sie die
   Statusleiste beim Überfahren und der Seiteninspektor. Stattdessen baut das
   Skript aus dem Text eine Schaltfläche, die das Ziel erst beim Klick bildet.
   Diese Schaltflächen müssen aussehen wie das, was sie ersetzen, deshalb hier
   nur der Grundreset. Trägt ein Knopf zusätzlich .btn, gilt dessen Aussehen,
   darum die Ausnahme.                                                      */
.mail-knopf{cursor:pointer;font-family:inherit;letter-spacing:inherit}
.mail-knopf:not(.btn){font-size:inherit;font-weight:inherit;line-height:inherit;
  color:inherit;background:none;border:0;padding:0;text-align:left}
/* Im Rechtstext wie die übrigen Verweise dort */
.legal .mail-knopf{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:.2em}
@media (hover:hover) and (pointer:fine){.legal .mail-knopf:hover{color:var(--brand-700)}}
.mail-knopf:focus-visible{box-shadow:var(--focus-ring);border-radius:var(--r-xs)}
.site-footer .mail-knopf:focus-visible{box-shadow:var(--focus-ring-dark)}
.contact-list a{font-weight:600;color:var(--dark)}
@media (hover:hover) and (pointer:fine){.contact-list a:hover{color:var(--brand)}}
.hours{background:var(--clay-2);border-radius:var(--r-lg);padding:var(--sp-4);margin-top:var(--sp-4)}
.hours dl{display:grid;grid-template-columns:auto 1fr;gap:.35em var(--sp-4);margin:0;font-size:var(--fs-small)}
.hours dt{font-family:var(--font-ui);font-weight:700;color:var(--dark)}
.hours dd{margin:0;color:var(--ink-70);font-variant-numeric:tabular-nums}
.hours .note{margin-top:.7em;font-size:var(--fs-label);color:var(--ink-70)}

/* ---------- 14. Fußzeile ---------------------------------------------------- */
/* Kontaktzeilen mit runden Icon-Kreisen wie auf Flyer und Plakat */
.site-footer{background:var(--dark-2);color:var(--cream-80);padding-block:var(--sp-7) var(--sp-5);font-size:var(--fs-small)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:var(--sp-6)}
/* Als h4 sprang die Überschriftenfolge auf den Unterseiten von h2 direkt auf
   h4. Die Fußzeile trägt jetzt h2, das Aussehen bleibt unverändert.      */
.footer-grid .footer-head{font-family:var(--font-ui);font-size:var(--fs-small);font-weight:700;line-height:1.4;letter-spacing:.14em;text-transform:uppercase;color:var(--clay);margin:0 0 var(--sp-3)}
.footer-grid a{display:flex;align-items:center;min-height:44px;padding:.35em 0;color:var(--cream-80);transition:color var(--dur-1) var(--ease-out)}
.footer-grid .contact-line{align-items:center;padding-block:.3em}
@media (hover:hover) and (pointer:fine){.footer-grid a:hover{color:var(--cream)}}
/* Brandguide: auf dunklem Grund sitzt das Logo immer auf einem hellen Feld,
   nie direkt auf Braun. Umfärben ist ausdrücklich nicht erlaubt, deshalb
   bekommt es hier eine Cream-Fläche statt eines Filters.                  */
.footer-logo-plate{display:inline-block;background:var(--cream);border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);margin-bottom:var(--sp-4);box-shadow:var(--sh-sm)}
.footer-logo{width:180px;display:block}
.footer-bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:var(--sp-3) var(--sp-5);margin-top:var(--sp-6);padding-top:var(--sp-4);border-top:1px solid var(--cream-16);font-size:var(--fs-label);color:var(--cream-55)}
.footer-bottom a{color:inherit;text-decoration:underline;text-underline-offset:.25em}
/* Die Urheberzeile bekommt eine eigene Reihe. In einer Reihe mit den
   Rechtslinks und der Webadresse reichte der Platz schon bei 1440 Pixeln
   nicht mehr, die Links brachen um und die Zeile wirkte gedrängt. */
.footer-bottom>p:first-child{flex-basis:100%}
/* Trennpunkt als eigenes Element, nicht als Zeichen im Text, damit er auf
   schmalen Geräten verschwinden kann, wo beide Angaben untereinander stehen. */
.punkt{margin-inline:.55em;opacity:.55}
@media (max-width:40em){
  /* Untereinander statt nebeneinander. Die beiden Hälften stehen jeweils in
     einem eigenen span, sonst würde jedes lose Textstück zu einem eigenen
     Flex-Element und die Wörter liefen zusammen. */
  .footer-bottom>p:first-child{display:flex;flex-direction:column;gap:var(--sp-1)}
  .punkt{display:none}
}
@media (hover:hover) and (pointer:fine){.footer-bottom a:hover{color:var(--cream)}}
/* Auch hier gilt die Mindestgröße für Bedienelemente, sonst sind die beiden
   Links auf dem Handy kaum zu treffen.                                   */
.footer-legal{display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-5)}
.footer-legal a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- 15. Unterseiten-Kopf -------------------------------------------- */
.page-hero{position:relative;padding-block:clamp(8rem,17vw,11rem) var(--sp-7);overflow:clip}
/* Text links, Bild rechts, wie auf der Startseite. Die Startseite trägt ihr
   Foto in der organischen Blobmaske, hier steht es in der Papierkarte mit
   gerissener Kante. Beide Rahmen stehen im Brandguide, die Karte gehört laut
   Bildwelt auf ruhige Flächen, und genau das ist ein Seitenkopf. So bleibt die
   Verwandtschaft sichtbar, ohne dass die Unterseite die Startseite nachbaut. */
.page-hero-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.88fr);
  gap:clamp(var(--sp-7),5.5vw,var(--sp-9));align-items:center;margin-top:var(--sp-5)}
.page-hero h1{font-size:var(--fs-h1);color:var(--dark);max-width:16ch}
.page-hero .lead{margin-top:var(--sp-4)}
/* Die Karte hängt minimal schief, ein Grad reicht. Alles darüber wirkt gewollt. */
.page-hero-media{transform:rotate(1.1deg)}
.page-hero-media img{width:100%;aspect-ratio:5/4;object-fit:cover}
.crumbs{display:flex;gap:.5em;align-items:center;font-size:var(--fs-small);color:var(--ink-70);margin-bottom:var(--sp-4)}
.crumbs a{display:inline-flex;align-items:center;min-height:40px;font-weight:600;color:var(--brand)}
.crumbs svg{width:.85em;height:.85em;fill:var(--clay-3);opacity:.7}

.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--sp-7);align-items:center}
.two-col--top{align-items:start}
/* Die Seiten wechseln die Bildseite von Abschnitt zu Abschnitt: erst rechts,
   dann links, dann wieder rechts. Getauscht wird nur die Anzeige, nicht die
   Reihenfolge im Dokument. So steht am Bildschirm das Bild links, während
   Vorlesewerkzeuge und die gestapelte Ansicht weiter mit der Überschrift
   beginnen. Gestapelt fällt der Tausch deshalb weg.                        */
.two-col.flip>figure{order:-1}
/* Pfoten-Liste aus der Komponentenbibliothek. Aufzählungen tragen die Pfote
   als Zeichen, so wie auf Flyer und Plakat. Die Pfote nimmt die Textfarbe
   der Liste an und lässt sich damit pro Liste einfärben.                  */
.paw-bullets{display:grid;gap:var(--sp-3);margin-top:var(--sp-4);color:var(--brand)}
.paw-bullets li{display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);align-items:start;
  font-size:var(--fs-body)}
/* Die Pfote erbt ihre Farbe von der Liste, der Text steht auf dem Eintrag.
   Genau so lässt sie sich pro Liste einfärben, wie im Beispiel der
   Komponentenbibliothek: Marken-Braun auf hell, Sand auf Dunkelbraun.    */
.paw-bullets li>*{color:var(--ink-70)}
.paw-bullets li::before{
  content:'';width:18px;height:18px;flex:none;margin-top:.18em;
  background:currentColor;
  /* Bewusst als Daten-URI, nicht als eigene Datei: eine externe SVG-Maske wird
     beim Öffnen per Doppelklick über file:// blockiert und die Pfote bliebe
     unsichtbar. Eingebettet läuft sie auch offline.                        */
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72Z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256'%3E%3Cpath d='M212,80a28,28,0,1,0,28,28A28,28,0,0,0,212,80Zm0,40a12,12,0,1,1,12-12A12,12,0,0,1,212,120ZM72,108a28,28,0,1,0-28,28A28,28,0,0,0,72,108ZM44,120a12,12,0,1,1,12-12A12,12,0,0,1,44,120ZM92,88A28,28,0,1,0,64,60,28,28,0,0,0,92,88Zm0-40A12,12,0,1,1,80,60,12,12,0,0,1,92,48Zm72,40a28,28,0,1,0-28-28A28,28,0,0,0,164,88Zm0-40a12,12,0,1,1-12,12A12,12,0,0,1,164,48Zm23.12,100.86a35.3,35.3,0,0,1-16.87-21.14,44,44,0,0,0-84.5,0A35.25,35.25,0,0,1,69,148.82,40,40,0,0,0,88,224a39.48,39.48,0,0,0,15.52-3.13,64.09,64.09,0,0,1,48.87,0,40,40,0,0,0,34.73-72Z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.on-dark .paw-bullets{color:var(--sand)}
.on-dark .paw-bullets li>*{color:rgba(249,247,237,.86)}

.cta-band{background:var(--brand);color:var(--cream);border-radius:var(--r-xl);padding:var(--sp-6);display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--sp-5);align-items:center;box-shadow:var(--sh-md)}
.cta-band h2{color:var(--cream)}
/* .85 ergab auf Marken-Braun rechnerisch 4,51 zu 1, also die Grenze auf der
   zweiten Nachkommastelle. Voll deckend sind es 5,5 zu 1.               */
.cta-band p{margin-top:.6em;color:var(--cream);max-width:46ch;font-size:var(--fs-small)}
.cta-band h2{font-size:var(--fs-h2-sm)}
/* Die Schaltfläche im Band wird oben im Button-Abschnitt gesetzt. */

/* ---------- 16. Motion ------------------------------------------------------ */
/* Auftritt beim Scrollen, vier Richtungen für Abwechslung im Rhythmus.
   Alle Startzustände hängen an der Klasse .js, die main.js als erste
   Anweisung setzt. Fällt das Skript aus, blockiert der Browser es oder ist
   es schlicht abgeschaltet, steht der Inhalt sofort sichtbar da. Vorher
   startete auf der Kursseite die halbe Seite auf opacity:0 und wäre ohne
   JavaScript leer geblieben.                                            */
.js .rise{opacity:0;transform:translateY(22px)}
.rise.is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.js .rise-l{opacity:0;transform:translateX(-26px)}
.rise-l.is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.js .rise-r{opacity:0;transform:translateX(26px)}
.rise-r.is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.js .rise-pop{opacity:0;transform:scale(.94) translateY(14px)}
.rise-pop.is-in{opacity:1;transform:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-3) var(--ease-spring)}
.parallax{will-change:transform}

/* Überschriften Wort für Wort, mit leichter Drehung. Läuft einmal je Element.
   Dauer bewusst auf --dur-2: bei --dur-3 lief die längste Überschrift auf der
   Kursseite mit acht Wörtern insgesamt 805 Millisekunden, nachgemessen. Mit
   --dur-2 sind es 625, und der Satz steht, bevor der Blick weiterzieht.   */
.split-words{--wd:0ms}
.split-words .wl{display:inline-block;overflow:hidden;vertical-align:bottom;padding-bottom:.06em;max-width:100%}
.js .split-words .w{display:inline-block;transform:translateY(105%) rotate(5deg);opacity:0}
.split-words .w{display:inline-block}
.split-words.is-in .w{transform:none;opacity:1;transition:transform var(--dur-2) var(--ease-out) var(--wd),opacity var(--dur-1) var(--ease-out) var(--wd)}

/* Bild schiebt sich frei, Motiv zoomt dabei zurück */
/* Der Zuschnitt sitzt bewusst auf dem Bild, nicht auf dem Rahmen. Lag er auf
   dem Rahmen, war dieser auf null Höhe geschnitten, und genau das meldet ein
   IntersectionObserver als nicht sichtbar. Das Element wartete damit auf ein
   Signal, das es sich selbst verbaut hatte, und blieb dauerhaft leer.      */
.js .reveal-clip img{clip-path:inset(0 0 100% 0);transform:scale(1.14);
  transition:clip-path var(--dur-3) var(--ease-out),transform var(--dur-3) var(--ease-out)}
.reveal-clip.is-in img{clip-path:inset(0 0 0% 0);transform:scale(1)}

/* Blob im Hero atmet dauerhaft. Bewusste Abweichung vom Designguide, der
   Dauerschleifen ausschließt: auf ausdrücklichen Wunsch wiederhergestellt,
   weil die Marke lebendig wirken soll. Sehr langsam und mit kleiner
   Amplitude, damit es nicht zappelt. Bei prefers-reduced-motion aus.     */
@keyframes blobmorph{
  0%,100%{border-radius:48% 52% 45% 55%/41% 39% 61% 59%}
  33%{border-radius:54% 46% 55% 45%/47% 55% 45% 53%}
  66%{border-radius:44% 56% 49% 51%/55% 45% 55% 45%}
}
/* Die Tonfläche dahinter geht ganz leicht mit, damit die Bewegung nicht nur
   an der Kante sichtbar ist. Bewusst so klein, dass man sie eher spürt als
   sieht: wenige Pixel Versatz, unter einem halben Grad Drehung.           */
@keyframes blobback{
  0%,100%{border-radius:52% 48% 58% 42%/46% 56% 44% 54%;transform:translate3d(0,0,0) rotate(0deg)}
  33%{border-radius:56% 44% 52% 48%/52% 48% 52% 48%;transform:translate3d(-2.5px,2px,0) rotate(-0.4deg)}
  66%{border-radius:48% 52% 56% 44%/44% 56% 44% 56%;transform:translate3d(2px,-1.5px,0) rotate(0.35deg)}
}
/* border-radius kann nicht auf dem Compositor laufen, jeder Bildwechsel ist
   ein echter Repaint eines großen Fotos samt Schatten. Die Schleife selbst
   ist so gewollt, sie läuft aber nur, solange der Hero wirklich zu sehen ist.
   Sobald er aus dem Bild gescrollt ist, steht sie.                       */
.blob-photo img{animation:blobmorph 24s var(--ease-io) infinite;animation-play-state:paused}
.blob-photo::before{animation:blobback 30s var(--ease-io) infinite;animation-play-state:paused}
.blob-photo.is-live img,.blob-photo.is-live::before{animation-play-state:running}

/* Lesefortschritt als dünne Linie unter der Kopfzeile */
.progress{position:fixed;top:0;left:0;height:3px;width:100%;transform:scaleX(0);transform-origin:left;background:var(--brand);z-index:101;pointer-events:none}

/* Karten kippen sanft unter dem Zeiger.
   Der Zustand während des Kippens hängt an einer Klasse, nicht an einem
   inline gesetzten transition-Wert. Vorher überschrieb das JavaScript die
   ganze Kurzschreibweise und nahm der Karte dauerhaft ihre Schatten-
   Überblendung, und nach dem ersten Verlassen lief jeder weitere Hover in
   420 statt in 240 Millisekunden.                                        */
.tilt,.offer{transform-style:preserve-3d;
  transition:transform var(--dur-2) var(--ease-out),box-shadow var(--dur-2) var(--ease-out)}
.tilt.is-tilt,.offer.is-tilt{transition:transform var(--dur-1) linear,box-shadow var(--dur-2) var(--ease-out)}
/* Der Lichtfleck wird geschoben statt bei jeder Zeigerbewegung neu gemalt.
   Ein Radialverlauf über die volle Kartenfläche war der teuerste Posten im
   ganzen Zeigerpfad.                                                     */
.offer-shine{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit;opacity:0;
  transition:opacity var(--dur-2) var(--ease-out)}
.offer-glow{position:absolute;left:0;top:0;width:680px;height:680px;margin:-340px 0 0 -340px;
  background:radial-gradient(circle closest-side,rgba(255,255,255,.42),transparent);
  will-change:transform}
@media (hover:hover) and (pointer:fine){.offer:hover .offer-shine{opacity:1}}

/* Icons reagieren auf Hover */
@media (hover:hover) and (pointer:fine){
  .chip{transition:transform var(--dur-2) var(--ease-out),background-color var(--dur-2) var(--ease-out)}
  .chip:hover{transform:translateY(-3px) rotate(-1.5deg);background:var(--clay)}
  .step:hover .step-dot{transform:scale(1.08) rotate(-6deg)}
  .contact-list li:hover .ic{transform:rotate(-8deg) scale(1.06)}
}
.step-dot{transition:transform var(--dur-2) var(--ease-spring),background-color var(--dur-2) var(--ease-out)}
.contact-list .ic{transition:transform var(--dur-2) var(--ease-spring)}
/* Einzige transition-Deklaration für das Logo. Vorher stand oben im Kopfzeilen-
   Abschnitt eine zweite, die diese hier ohnehin nie erreicht hat.         */
.logo img{transition:transform var(--dur-2) var(--ease-out)}
@media (hover:hover) and (pointer:fine){
  .logo:hover img{transform:rotate(-1.5deg) scale(1.02)}
  .is-stuck .logo:hover img{transform:rotate(-1.5deg) scale(.86)}
}

/* Zeitachse zeichnet sich */
.js .day::before{transform:scaleX(0);transform-origin:left}
.day.is-drawn::before{transform:scaleX(1);transition:transform var(--dur-3) var(--ease-out)}

/* Pfotenspur, die dem Zeiger folgt. Nur Maus, nur Desktop, sehr leise. */
/* Kein will-change: die Web Animations API befördert transform und opacity
   während der Laufzeit ohnehin. Fest gesetzt hielte es 34 unsichtbare
   Elemente dauerhaft als eigene Ebenen im Speicher.                      */
.paw-trail{position:fixed;top:0;left:0;width:30px;height:30px;pointer-events:none;z-index:98;opacity:0;fill:var(--brand);
  filter:drop-shadow(0 0 1.5px var(--cream)) drop-shadow(0 1px 2px rgba(86,50,44,.25))}

/* Sprungmarken-Leiste auf langen Seiten */
/* Sprungmarken sind Navigation, deshalb Verweise und keine Schaltflächen.
   Als button waren sie ohne JavaScript tot, ließen sich nicht mit der
   mittleren Maustaste öffnen und ihr Ziel nicht kopieren.
   Der Punkt lag vorher in Clay bei 1,49 zu 1 auf Cream. Clay 3 mit dunklem
   Saum bringt ihn über die geforderten 3 zu 1.                          */

/* Kursblöcke */
.course{position:relative;padding-block:var(--sp-7)}
.course + .course{border-top:1px solid rgba(29,29,27,.10)}
.course-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:var(--sp-6) var(--sp-7);align-items:start}
.course-grid.flip>figure{order:-1}
.course h2{font-size:var(--fs-h2-sm);color:var(--dark);margin-bottom:var(--sp-4)}
.course .prose + .prose{margin-top:var(--sp-4)}
/* Hängt am gemessenen Kopfzeilenabstand statt an einem festen Wert. Ändert
   die Kopfzeile ihre Höhe, wandert der klebende Bildrahmen mit.         */
.course figure{margin:0;position:sticky;top:calc(var(--anchor-offset) + var(--sp-5))}
.facts{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-5)}
.fact{display:inline-flex;align-items:center;gap:.5em;min-height:40px;padding:.4em 1em;border-radius:var(--r-pill);background:var(--cream-2);color:var(--dark);font-size:var(--fs-small);font-weight:600}
.fact svg{width:1.05em;height:1.05em;fill:var(--brand)}
@media (max-width:62.5em){
  .course-grid{grid-template-columns:1fr}
  .course-grid.flip>figure{order:0}
  .course figure{position:static}
}

/* ---------- 17. Responsiv --------------------------------------------------- */
@media (max-width:62.5em){
  .hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .hero-copy{align-self:auto;margin-top:0}
  /* Gestapelt steht das Foto unten, hier braucht der Hero sein Fußpolster
     zurück, sonst klebt der nächste Abschnitt daran. */
  .hero{padding-bottom:var(--sp-sec)}
  .blob-photo{max-width:520px;margin-inline:auto}
  .stance,.contact,.two-col{grid-template-columns:1fr;gap:var(--sp-5)}
  .two-col.flip>figure{order:0}
  .page-hero-grid{grid-template-columns:1fr;gap:var(--sp-6)}
  .page-hero-media{max-width:520px;margin-inline:auto;transform:rotate(.8deg)}
  .two-col .torn{max-width:460px}
  .offer--lead,.offer--side{grid-column:span 12}
  .day{grid-template-columns:repeat(2,1fr);row-gap:var(--sp-6)}
  .day::before{display:none}
  .gallery{grid-template-columns:repeat(2,1fr);gap:var(--sp-5) var(--sp-4)}
  /* Im Collagenraster der Galerieseite werden aus drei Bildern je Zeile zwei,
     das liegende Bild nimmt die volle Zeile.                             */
  .gallery-grid{gap:var(--sp-5) var(--sp-4)}
  .gallery-grid .pola-wrap{grid-column:span 3}
  .gallery-grid .pola-wrap--breit{grid-column:span 6}
  .footer-grid{grid-template-columns:1fr 1fr}
  .cta-band{grid-template-columns:1fr}
}
@media (max-width:40em){
  .hero{min-height:auto;padding-block:clamp(6.5rem,22vw,8rem) var(--sp-sec)}
  .offer--wide{flex-direction:column}
  .offer--wide .offer-media{width:100%;min-height:0}
  .offer--wide .offer-media img{position:static;height:auto;aspect-ratio:16/10}
  .gallery{grid-template-columns:repeat(2,1fr)}
  /* Auf dem Handy steht jedes Bild allein. Zwei Polaroids nebeneinander
     wären hier so klein, dass man nichts mehr erkennt.                   */
  .gallery-grid .pola-wrap,.gallery-grid .pola-wrap--breit{grid-column:span 6}
  /* Gestapelt kippt die Zeitachse von waagerecht auf senkrecht. Die Linie
     verschwand hier bisher ganz, damit war die Abfolge auf dem Handy nicht
     mehr als Abfolge zu erkennen. Jetzt läuft sie durch die Mitte der Punkte,
     von der Mitte des ersten bis zur Mitte des letzten, und zeichnet sich
     beim Eintritt ins Bild genauso wie am Schreibtisch.                   */
  /* Senkrecht wird die Linie nicht einmal für die ganze Liste gezogen, sondern
     als eigenes Stück je Schritt. Eine durchgehende Linie müsste wissen, wo
     der letzte Punkt sitzt, und würde sonst über ihn hinaus ins Textfeld
     laufen. Jedes Stück läuft von der Mitte des eigenen Punktes bis zur Mitte
     des nächsten, das sind die eigene Höhe plus der Zeilenabstand. Beim
     letzten Schritt entfällt es.                                          */
  .day{grid-template-columns:1fr;text-align:left;row-gap:var(--sp-5)}
  .day::before{display:none}
  .step::before{content:'';position:absolute;left:27px;top:28px;width:2px;
    height:calc(100% + var(--sp-5));
    background:repeating-linear-gradient(180deg,var(--clay) 0 10px,transparent 10px 20px)}
  .step:last-child::before{display:none}
  .step{flex-direction:row;text-align:left;align-items:flex-start;gap:var(--sp-4)}
  .step-dot{width:56px;height:56px;box-shadow:0 0 0 6px var(--ring,var(--cream))}
  .step p{max-width:none}
  /* Auf schmalen Geräten zählt jeder Pixel Innenraum */
  .card{padding:var(--sp-4)}
  .footer-grid{grid-template-columns:1fr}
  /* Die Blob-Ecken duerfen auf dem Handy keinen Text verdecken */
  .corner-tl{display:none}
  .corner-tr{top:0;width:44vw}
  .hero{padding-block:clamp(9.5rem,31vw,11.5rem) var(--sp-sec)}
  .page-hero{padding-block:clamp(9.5rem,31vw,11.5rem) var(--sp-6)}
  .paws svg:nth-child(2){display:none}
}

/* ---------- 18. Reduzierte Bewegung ----------------------------------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
  .rise,.rise-l,.rise-r,.rise-pop,
  .js .rise,.js .rise-l,.js .rise-r,.js .rise-pop{opacity:1;transform:none}
  .split-words .w,.js .split-words .w{transform:none;opacity:1}
  .reveal-clip img,.js .reveal-clip img{clip-path:none;transform:none}
  .brush::before,.js .brush::before{clip-path:inset(0 0 0 0)}
  .day::before,.js .day::before{transform:scaleX(1)}
  .pola-wrap{transform:none !important}
  .parallax{transform:none !important}
  .paws svg,.corner{transform:none !important}
  .blob-photo img,.blob-photo::before{animation:none}
  .paw-trail,.progress{display:none}
}
/* Wird die Systemeinstellung erst während des Besuchs umgestellt, kann das
   Stylesheet die von GSAP inline gesetzten Werte nicht mehr erreichen.
   main.js setzt dann diese Klasse und räumt zusätzlich die laufenden
   Zeitachsen ab.                                                         */
.reduce-motion .paws svg,.reduce-motion .corner,
.reduce-motion .parallax,.reduce-motion .pola-wrap{transform:none !important}
.reduce-motion .blob-photo img,.reduce-motion .blob-photo::before{animation:none}

/* ---------- 19. Druck ------------------------------------------------------- */
@media print{
  body{background:var(--paper)}
  .site-header,.mobile-nav,.paws,.corner,.speckles,.progress,.paw-trail{display:none}
  .js .rise,.js .rise-l,.js .rise-r,.js .rise-pop{opacity:1;transform:none}
  .js .split-words .w{opacity:1;transform:none}
  .js .reveal-clip img{clip-path:none;transform:none}
  .js .brush::before{clip-path:inset(0 0 0 0)}
}

/* ---------- 20. Kontaktzeilen im Fuß ---------------------------------------- */
.contact-line{display:flex;align-items:center;gap:var(--sp-3);min-height:44px;color:var(--cream-86)}
.contact-line>span{min-width:0;overflow-wrap:anywhere}
.contact-ico{width:34px;height:34px;flex:none;border-radius:var(--r-pill);background:var(--sand);display:grid;place-items:center}
.contact-ico svg{width:17px;height:17px;fill:var(--cream)}