/* ============ 0. LOKAL GEHOSTETE WEBFONTS (Fraunces, Hanken Grotesk) ============ */
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-latin.woff2") format("woff2-variations"),
      url("/assets/fonts/fraunces-latin.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces";
  src:url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2-variations"),
      url("/assets/fonts/fraunces-italic-latin.woff2") format("woff2");
  font-weight:300 900;
  font-style:italic;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Hanken Grotesk";
  src:url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2-variations"),
      url("/assets/fonts/hanken-grotesk-latin.woff2") format("woff2");
  font-weight:300 800;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Fraunces Fallback";
  src:local("Georgia");
  size-adjust:105.5%;
  ascent-override:92.7%;
  descent-override:24.2%;
  line-gap-override:0%;
}
@font-face{
  font-family:"Hanken Fallback";
  src:local("Arial");
  size-adjust:97.6%;
  ascent-override:102.4%;
  descent-override:31%;
  line-gap-override:0%;
}

/* =====================================================================
   Dorette Paul e.K. — Gemeinsames Stylesheet (assets/style.css)
   Ein Stylesheet fuer alle Seiten. Mobile-first, WCAG-AA, reduced-motion.
   Aufbau:
     1. Design-Tokens (:root)            — woertlich aus der Blaupause
     2. Reset & globale Basis            — woertlich aus der Blaupause
     3. Papierwolle-Textur (body::before)
     4. Layout-Helfer (.wrap, section, .cta)
     5. Typografie (.eyebrow, h1–h3, .kopf)
     6. Header / Wortmarke / Navigation  + Mobil-Navigation (NEU)
     7. Buttons (.btn, .btn-fest, .btn-rand)
     8. Hero (.faeden/.faden/.kugel/.scroll-hint, .marken-zeile)
     9. Reveal-System (.auf, .d1–.d4)
    10. Produktwelten (.welten/.welt/.faserstrich)
    11. Zahlen-Band (.zahlen/.stat)
    12. Geschichte / Zeitstrahl (.zeit/.epoche)
    13. Handwerk-Zitat (.zitat)
    14. Sortiment (.tags/.tag)
    15. Kontakt (.kontakt-karte/.adresse)
    16. Footer
    --- NEUE Komponenten (BUILD-SPEC Abschnitt 4.2) ---
    17. Fotos (.foto) & Platzhalter (.foto-platzhalter)
    18. Formular (.formular/.feld/Felder)
    19. Katalog (.katalog-grid/.kat-karte)
    20. Reportage (.reportage/.reportage-block)
    21. Rechtstext (.rechtstext)
    22. Brotkrumen (.brotkrumen)
    --- global ---
    23. Responsive @media (mobile-first hochskaliert)
    24. prefers-reduced-motion
   ===================================================================== */


/* ============ 1. DESIGN-TOKENS (woertlich aus index.original.html) ============ */
:root{
  /* Papierwolle & Bonbon */
  --papier:#FBF5E9;        /* warmes Cremeweiß, Papierwolle */
  --papier-tief:#F3E9D4;   /* abgesetzte Flächen */
  --tinte:#2E2622;         /* warmes Sepia-Schwarz für Text */
  --tinte-weich:#6A5B4F;   /* gedämpfter Fließtext */
  --ostergras:#4F8C3A;     /* Leitfarbe: das Grün der Papierwolle */
  --ostergras-tief:#33632A;
  --bonbon-pink:#E2638F;   /* Chenille-Tupfer */
  --safran:#EBA92E;
  --himmel:#5FA9CF;
  --beere:#9E2B4E;         /* tiefer Kontrastakzent */

  --max:1180px;
  --r:18px;
  --schatten:0 18px 40px -22px rgba(46,38,34,.45);
  --schatten-tief:0 30px 70px -30px rgba(46,38,34,.55);
  --serif:"Fraunces","Fraunces Fallback",Georgia,serif;
  --sans:"Hanken Grotesk","Hanken Fallback",Arial,sans-serif;
}


/* ============ 2. RESET & GLOBALE BASIS (woertlich) ============ */
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:5.5rem}
body{
  font-family:var(--sans);
  background:var(--papier);
  color:var(--tinte);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}

/* Sichtbarer Tastatur-Fokus auf ALLEN interaktiven Elementen */
:focus-visible{outline:3px solid var(--ostergras);outline-offset:3px;border-radius:4px}

/* Skip-Link (WCAG 2.4.1 Bypass Blocks): ausserhalb des Bildes geparkt,
   bei Tastatur-Fokus sichtbar oben links — ueberspringt den fixierten Header. */
.skip{
  position:absolute;left:-999px;top:0;z-index:100;
  font-family:var(--sans);font-weight:700;font-size:.92rem;
  background:var(--ostergras);color:#fff;
  padding:.7rem 1.1rem;border-radius:12px;box-shadow:var(--schatten);
}
.skip:focus{left:1rem;top:1rem}


/* ============ 3. PAPIERWOLLE-TEXTUR, sehr dezent (woertlich) ============ */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background:
    radial-gradient(circle at 18% 12%, rgba(235,169,46,.06), transparent 38%),
    radial-gradient(circle at 84% 8%, rgba(95,169,207,.06), transparent 36%),
    radial-gradient(circle at 70% 88%, rgba(226,99,143,.05), transparent 40%);
}


/* ============ 4. LAYOUT-HELFER ============ */
.wrap{width:min(100% - 2.6rem, var(--max));margin-inline:auto}
section{position:relative;z-index:1}
main{position:relative;z-index:1}

/* Gemeinsamer Button-Cluster (Hero, Kontakt, Katalog …) — einmal definiert */
.cta{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center}


/* ============ 5. TYPOGRAFIE ============ */
.eyebrow{
  font-family:var(--sans);font-weight:700;font-size:.74rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--ostergras-tief);
  display:inline-flex;align-items:center;gap:.6rem;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--ostergras);border-radius:2px}

h1,h2,h3{font-family:var(--serif);font-weight:560;line-height:1.05;letter-spacing:-.01em}

/* Abschnitts-Titelblock */
.kopf{max-width:62ch;margin-bottom:3.2rem}
.kopf h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:1rem 0 .8rem}
.kopf p{font-size:1.08rem;color:var(--tinte-weich)}


/* ============ 6. HEADER / WORTMARKE / NAVIGATION ============ */
header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:1.1rem clamp(1.3rem,4vw,3rem);
  transition:background .35s ease, box-shadow .35s ease, padding .35s ease;
}
header.fest{
  background:color-mix(in srgb,var(--papier) 86%, transparent);
  backdrop-filter:blur(12px);
  box-shadow:0 1px 0 rgba(46,38,34,.08);
  padding-block:.7rem;
}

/* Wortmarke */
.marke{font-family:var(--serif);font-weight:600;font-size:1.34rem;letter-spacing:-.01em;
  display:flex;align-items:center;gap:.6rem;position:relative;z-index:70}
.marke b{font-weight:600}
.marke small{font-family:var(--sans);font-weight:600;font-size:.6rem;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tinte-weich)}
.marke .knoten{width:14px;height:14px;border-radius:50%;background:var(--bonbon-pink);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--bonbon-pink) 30%,transparent)}

/* Navigations-Links (nur das Hauptmenue #hauptnav, nicht Brotkrumen/Footer) */
#hauptnav a.lnk{font-weight:600;font-size:.92rem;color:var(--tinte-weich);position:relative;
  transition:color .25s}
#hauptnav a.lnk::after{content:"";position:absolute;left:0;bottom:-5px;height:2px;width:0;
  background:var(--ostergras);transition:width .28s ease}
#hauptnav a.lnk:hover{color:var(--tinte)}
#hauptnav a.lnk:hover::after{width:100%}

/* Aktiver Navigationspunkt (aria-current="page" + .lnk-aktiv) */
#hauptnav a.lnk.lnk-aktiv,
#hauptnav a.lnk[aria-current="page"]{color:var(--tinte)}
#hauptnav a.lnk.lnk-aktiv::after,
#hauptnav a.lnk[aria-current="page"]::after{width:100%}

/* --- Mobil-Navigation (NEU): Button [data-nav-toggle] + Overlay nav.offen --- */
/* Mobile-first: das Menue ist standardmaessig ein Overlay, der Button ist sichtbar. */
[data-nav-toggle]{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--sans);font-weight:700;font-size:.86rem;letter-spacing:.06em;
  background:color-mix(in srgb,var(--papier) 70%, transparent);
  border:none;cursor:pointer;color:var(--tinte);
  padding:.6rem .9rem;border-radius:12px;
  box-shadow:inset 0 0 0 2px rgba(46,38,34,.2);
  position:relative;z-index:70;
  transition:box-shadow .2s ease, background .2s ease;
}
[data-nav-toggle]:hover{box-shadow:inset 0 0 0 2px var(--tinte)}

/* Hamburger-Strich (falls der Button ein <span> als Icon enthaelt) */
[data-nav-toggle] .nav-balken,
[data-nav-toggle] .nav-balken::before,
[data-nav-toggle] .nav-balken::after{
  content:"";display:block;width:20px;height:2px;border-radius:2px;
  background:currentColor;transition:transform .25s ease, opacity .2s ease;
}
[data-nav-toggle] .nav-balken{position:relative}
[data-nav-toggle] .nav-balken::before{position:absolute;top:-6px}
[data-nav-toggle] .nav-balken::after{position:absolute;top:6px}
[data-nav-toggle][aria-expanded="true"] .nav-balken{background:transparent}
[data-nav-toggle][aria-expanded="true"] .nav-balken::before{transform:translateY(6px) rotate(45deg)}
[data-nav-toggle][aria-expanded="true"] .nav-balken::after{transform:translateY(-6px) rotate(-45deg)}

/* Overlay-Menue: geschlossener Grundzustand.
   WICHTIG: nur #hauptnav, damit Brotkrumen-<nav> und Footer-<nav>
   nicht faelschlich als bildschirmfuellendes, verstecktes Overlay gestylt werden. */
#hauptnav{
  position:fixed;inset:0;z-index:60;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.6rem;
  padding:5rem 1.5rem 3rem;
  background:color-mix(in srgb,var(--papier) 97%, transparent);
  backdrop-filter:blur(14px);
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-10px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
#hauptnav.offen{opacity:1;visibility:visible;pointer-events:auto;transform:none}
#hauptnav a.lnk{font-size:1.35rem}
#hauptnav .btn{font-size:1rem;margin-top:.6rem}


/* ============ 7. BUTTONS ============ */
.btn{
  font-family:var(--sans);font-weight:700;font-size:.92rem;cursor:pointer;border:none;
  padding:.72rem 1.4rem;border-radius:999px;display:inline-flex;align-items:center;gap:.5rem;
  text-align:center;
  transition:transform .2s ease, box-shadow .25s ease, background .25s ease;
}
/* Primaer-Button: dunkles Ostergras als Default fuer AA-Kontrast (weiss auf
   --ostergras-tief ~7:1; das hellere --ostergras erreichte nur ~4.1:1). */
.btn-fest{background:var(--ostergras-tief);color:#fff;box-shadow:0 10px 22px -10px var(--ostergras)}
.btn-fest:hover{transform:translateY(-2px);box-shadow:0 16px 28px -10px var(--ostergras-tief);
  background:color-mix(in srgb,var(--ostergras-tief) 82%, #000)}
.btn-rand{background:transparent;color:var(--tinte);box-shadow:inset 0 0 0 2px rgba(46,38,34,.25)}
.btn-rand:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 2px var(--tinte)}


/* ============ 8. HERO ============ */
.hero{min-height:100svh;display:flex;align-items:center;padding:6.5rem 0 4rem;overflow:hidden}
.hero .inhalt{max-width:23ch;position:relative;z-index:3}
.hero h1{
  font-size:clamp(2.7rem,8.2vw,6.2rem);
  font-weight:540;margin:1.3rem 0;
  font-variation-settings:"opsz" 144;
}
.hero h1 .gras{color:var(--ostergras-tief);font-style:italic}
.hero h1 .feder{color:var(--beere);font-style:italic}
.hero p.lead{font-size:clamp(1.05rem,1.6vw,1.28rem);color:var(--tinte-weich);max-width:46ch;
  margin-bottom:2rem}
.hero .marken-zeile{margin-top:2.6rem;display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center;
  font-size:.82rem;color:var(--tinte-weich);font-weight:600}
.hero .marken-zeile span{display:inline-flex;align-items:center;gap:.5rem}
.dot{width:8px;height:8px;border-radius:50%;display:inline-block}

/* Chenille-Faeden Buehne */
.faeden{position:absolute;inset:0;z-index:1;pointer-events:none}
.faeden svg{position:absolute;width:min(720px,86vw);height:auto;right:-30%;top:50%;
  transform:translateY(-50%);opacity:.4}
.faden{fill:none;stroke-linecap:round;stroke-width:15;
  stroke-dasharray:1600;stroke-dashoffset:1600;
  animation:zeichnen 2.1s cubic-bezier(.65,0,.35,1) forwards;
  transform-box:fill-box;transform-origin:center;
}
.faden.f1{stroke:var(--bonbon-pink);animation-delay:.15s}
.faden.f2{stroke:var(--safran);animation-delay:.45s}
.faden.f3{stroke:var(--ostergras);animation-delay:.75s}
.faden.f4{stroke:var(--himmel);animation-delay:1.05s}
.faden.f5{stroke:var(--beere);animation-delay:1.35s;stroke-width:11}
@keyframes zeichnen{to{stroke-dashoffset:0}}

/* sanftes Wogen, startet nachdem alle gezeichnet sind */
.faeden.wogt .faden{animation:wogen var(--sw,7s) ease-in-out infinite;animation-delay:var(--wd,0s);stroke-dashoffset:0}
@keyframes wogen{
  0%,100%{transform:rotate(0) translateY(0)}
  25%{transform:rotate(.5deg) translateY(-7px)}
  50%{transform:rotate(.8deg) translateY(-11px)}
  75%{transform:rotate(.3deg) translateY(-4px)}
}

/* sehr langsames Helligkeits-Atmen der Fadengruppe; 19s bewusst gewaehlt,
   da es zu den Faden-Dauern (7/7.5/8/8.5/9s) kein nahes gemeinsames Vielfaches
   hat -- das Gesamtbild wiederholt sich dadurch praktisch nie sichtbar */
.faeden.wogt svg{animation:faeden-atmen 19s ease-in-out infinite}
@keyframes faeden-atmen{0%,100%{opacity:.34}50%{opacity:.46}}

/* schwebende Bonbon-Kuegelchen */
.kugel{position:absolute;border-radius:50%;z-index:2;filter:url(#flausch);opacity:.92;
  animation:schweben 9s ease-in-out infinite}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-22px)}}

.scroll-hint{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-weich);
  display:flex;flex-direction:column;align-items:center;gap:.5rem;z-index:3}
.scroll-hint .pfeil{width:1px;height:34px;background:var(--tinte-weich);position:relative;overflow:hidden}
.scroll-hint .pfeil::after{content:"";position:absolute;inset:0;background:var(--ostergras);
  animation:laufen 1.8s ease-in-out infinite}
@keyframes laufen{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}


/* ============ 9. REVEAL-SYSTEM ============ */
.auf{opacity:0;transform:translateY(34px);
  transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1)}
.auf.sichtbar{opacity:1;transform:none}
.auf.d1{transition-delay:.08s}
.auf.d2{transition-delay:.16s}
.auf.d3{transition-delay:.24s}
.auf.d4{transition-delay:.32s}


/* ============ 10. PRODUKTWELTEN ============ */
.welten{padding:clamp(3.5rem,9vw,7rem) 0}
.welten-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
.welt{
  position:relative;background:#fff;border-radius:var(--r);padding:2.2rem 1.9rem 2.4rem;
  box-shadow:var(--schatten);overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.welt::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .35s ease;
  background:radial-gradient(120% 90% at 50% 0%, var(--akz, var(--ostergras)) 0%, transparent 55%)}
.welt:hover{transform:translateY(-10px);box-shadow:var(--schatten-tief)}
.welt:hover::before{opacity:.08}
.welt .ikon{width:74px;height:74px;margin-bottom:1.4rem}
.welt h3{font-size:1.55rem;margin-bottom:.6rem}
.welt p{color:var(--tinte-weich);font-size:1rem}
.welt .faserstrich{position:absolute;left:0;right:0;bottom:0;height:6px;
  background:var(--akz,var(--ostergras));
  transform:scaleX(0);transform-origin:left;transition:transform .4s ease;filter:url(#flausch)}
.welt:hover .faserstrich{transform:scaleX(1)}

/* Jahres-/Kategorie-Label (in .welt und .kat-karte).
   Feste, kontraststarke Textfarbe (~6:1 auf Weiss) statt der dekorativen
   Akzentfarbe --akz (Himmelblau/Pink/Gras reissen auf Weiss die AA-Grenze).
   Die Akzentfarbe bleibt den Flaechen/Strichen (.faserstrich) vorbehalten. */
.marke-jahr{display:inline-block;font-weight:700;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ostergras-tief)}
.welt .marke-jahr{margin-top:1.3rem}


/* ============ 11. ZAHLEN-BAND ============ */
.zahlen{background:var(--ostergras-tief);color:var(--papier);padding:clamp(3rem,7vw,5rem) 0;
  position:relative;overflow:hidden}
/* fasriger Flausch-Schleier statt Dashboard-Streifen — Papierwolle-Anmutung */
.zahlen::after{content:"";position:absolute;inset:0;opacity:.5;pointer-events:none;filter:url(#flausch);
  background:
    radial-gradient(circle at 15% 26%, color-mix(in srgb,var(--safran) 40%,transparent), transparent 42%),
    radial-gradient(circle at 84% 30%, color-mix(in srgb,var(--himmel) 34%,transparent), transparent 44%),
    radial-gradient(circle at 70% 80%, color-mix(in srgb,var(--bonbon-pink) 34%,transparent), transparent 46%),
    radial-gradient(circle at 28% 82%, color-mix(in srgb,var(--papier) 22%,transparent), transparent 48%)}
.zahlen .wrap{position:relative;z-index:1}
.zahlen-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2.4rem;text-align:center}
/* Werte wie auf Papierwolle notiert: feststehend, mit fasrigem Faden-Unterstrich */
.stat .num{font-family:var(--serif);font-size:clamp(2.6rem,6vw,4.2rem);font-weight:560;line-height:1;
  display:inline-block;position:relative}
.stat .num::after{content:"";position:absolute;left:6%;right:6%;bottom:-.26em;height:5px;border-radius:3px;
  background:var(--safran);filter:url(#flausch);opacity:.9}
.stat .num .plus{color:var(--safran)}
.stat .num .vor{display:block;font-family:var(--sans);font-weight:700;font-size:.26em;letter-spacing:.18em;
  text-transform:uppercase;color:var(--safran);margin-bottom:.3em;line-height:1}
.stat .lab{display:block;margin-top:1rem;font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:color-mix(in srgb,var(--papier) 78%,transparent);font-weight:600}


/* ============ 12. GESCHICHTE / ZEITSTRAHL ============ */
.geschichte{padding:clamp(3.5rem,9vw,7rem) 0}
.zeit{position:relative;margin-top:2rem;padding-left:0}
.zeit::before{content:"";position:absolute;left:calc(56px + .4rem);top:10px;bottom:10px;width:3px;
  background:repeating-linear-gradient(var(--ostergras) 0 9px, transparent 9px 17px);border-radius:3px}
.epoche{display:grid;grid-template-columns:56px 1fr;gap:1.2rem;padding:1.4rem 0;position:relative}
.epoche .jahr{font-family:var(--serif);font-weight:600;font-size:1.1rem;color:var(--ostergras-tief);
  text-align:right;padding-top:.1rem}
.epoche .txt{position:relative;padding-left:1.6rem}
.epoche .txt::before{content:"";position:absolute;left:-.55rem;top:.55rem;width:16px;height:16px;
  border-radius:50%;background:var(--papier);box-shadow:0 0 0 4px var(--ostergras);transform:translateX(-50%)}
.epoche.akzent .txt::before{background:var(--bonbon-pink);box-shadow:0 0 0 4px var(--bonbon-pink)}
.epoche h3{font-size:1.32rem;margin-bottom:.35rem}
.epoche p{color:var(--tinte-weich);max-width:54ch}

/* Pillenliste (z. B. Beliebtheits-Faktenkasten: DE / CH / BE / IT) */
.laender{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem}
.laender span{font-size:.78rem;font-weight:600;background:var(--papier-tief);color:var(--tinte-weich);
  padding:.28rem .7rem;border-radius:999px}


/* ============ 13. HANDWERK-ZITAT ============ */
.zitat{padding:clamp(3.5rem,8vw,6rem) 0;text-align:center}
.zitat blockquote{font-family:var(--serif);font-size:clamp(1.7rem,4.4vw,3rem);font-weight:480;
  line-height:1.18;max-width:20ch;margin:1.5rem auto 0}
.zitat blockquote .hl{
  background:linear-gradient(transparent 64%, color-mix(in srgb,var(--safran) 55%,transparent) 0);
  padding:0 .1em}
.zitat cite{display:block;margin-top:1.8rem;font-family:var(--sans);font-style:normal;font-weight:700;
  font-size:.86rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte-weich)}


/* ============ 14. SORTIMENT-LISTE ============ */
.sortiment{padding:clamp(3.5rem,8vw,6rem) 0}
.tags{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.tag{font-weight:600;font-size:1rem;background:#fff;border-radius:999px;padding:.7rem 1.3rem;
  box-shadow:var(--schatten);display:inline-flex;align-items:center;gap:.6rem;
  transition:transform .25s ease, box-shadow .25s ease;cursor:default}
.tag:hover{transform:translateY(-4px) rotate(-1.5deg);box-shadow:var(--schatten-tief)}
.tag .pkt{width:11px;height:11px;border-radius:50%;flex:none}


/* ============ 15. KONTAKT ============ */
.kontakt{padding:clamp(3.5rem,9vw,7rem) 0 0}
.kontakt-karte{background:var(--tinte);color:var(--papier);border-radius:28px;
  padding:clamp(2.4rem,5vw,4.4rem);display:grid;grid-template-columns:1fr;gap:2.2rem;
  box-shadow:var(--schatten-tief);position:relative;overflow:hidden}
.kontakt-karte::before{content:"";position:absolute;right:-60px;top:-60px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(var(--bonbon-pink),transparent 70%);
  opacity:.5;filter:url(#flausch)}
.kontakt-karte h2{color:var(--papier);font-size:clamp(2rem,4.4vw,3.1rem)}
.kontakt-karte .eyebrow{color:var(--safran)}
.kontakt-karte .eyebrow::before{background:var(--safran)}
.kontakt-karte p{color:color-mix(in srgb,var(--papier) 80%,transparent);margin-top:1rem;max-width:42ch}
.kontakt-karte .cta{margin-top:2rem}
.kontakt-karte .btn-rand{color:var(--papier);box-shadow:inset 0 0 0 2px rgba(251,245,233,.35)}
.kontakt-karte .btn-rand:hover{box-shadow:inset 0 0 0 2px var(--papier)}
.adresse{display:flex;flex-direction:column;gap:1.1rem;position:relative;z-index:1}
.adresse .zeile{display:flex;gap:.9rem;align-items:flex-start}
.adresse .zeile .ks{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  color:var(--safran);width:74px;flex:none;padding-top:.2rem}
.adresse .zeile a:hover{color:var(--safran)}


/* ============ 16. FOOTER ============ */
footer{padding:3rem 0 3.4rem;text-align:center}
footer .ft-marke{font-family:var(--serif);font-size:1.5rem;font-weight:600}
footer .ft-sub{color:var(--tinte-weich);font-size:.9rem;margin-top:.5rem}
footer .ft-links{margin-top:1.4rem;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;
  font-size:.86rem}
footer .ft-links a{color:var(--tinte-weich);font-weight:600}
footer .ft-links a:hover{color:var(--ostergras)}


/* =====================================================================
   NEUE KOMPONENTEN (BUILD-SPEC Abschnitt 4.2)
   ===================================================================== */

/* ============ 17. FOTO (echtes Bild) ============ */
.foto{margin:0;position:relative;display:block}
.foto img{
  width:100%;height:100%;object-fit:cover;
  background:#fff;
  border-radius:var(--r);
  box-shadow:var(--schatten);
}
/* bewusste, leichte Unperfektion: opt-in-Drehung ueber .gedreht (links/rechts) */
.foto.gedreht img,
.foto-platzhalter.gedreht{transform:rotate(-1.4deg)}
.foto.gedreht-r img,
.foto-platzhalter.gedreht-r{transform:rotate(1deg)}
.foto figcaption{
  margin-top:.85rem;font-size:.84rem;font-weight:600;color:var(--tinte-weich);
  line-height:1.45;
}
/* optionales Seitenverhaeltnis auch fuer echte Bilder */
.foto[data-ratio] img{aspect-ratio:var(--fr,4/3);object-fit:cover}

/* ---- FOTO-PLATZHALTER (klar markiert, niemals als echtes Bild) ---- */
.foto-platzhalter{
  position:relative;isolation:isolate;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;
  text-align:center;padding:1.8rem 1.4rem;
  aspect-ratio:4/3;                       /* Standardverhaeltnis */
  border-radius:var(--r);
  background:var(--papier-tief);
  box-shadow:inset 0 0 0 2px rgba(46,38,34,.12);
}
/* abgesetzter, gestrichelter Rahmen */
.foto-platzhalter::after{
  content:"";position:absolute;inset:10px;border-radius:calc(var(--r) - 6px);
  border:2px dashed color-mix(in srgb,var(--tinte) 28%, transparent);
  pointer-events:none;
}
/* dekoratives Flausch-Inlay (fasrige Chenille-Anmutung) */
.foto-platzhalter::before{
  content:"";position:absolute;inset:0;z-index:-1;opacity:.55;filter:url(#flausch);
  background:
    radial-gradient(circle at 28% 30%, color-mix(in srgb,var(--bonbon-pink) 24%,transparent), transparent 46%),
    radial-gradient(circle at 76% 66%, color-mix(in srgb,var(--ostergras) 22%,transparent), transparent 48%),
    radial-gradient(circle at 62% 18%, color-mix(in srgb,var(--safran) 22%,transparent), transparent 44%),
    radial-gradient(circle at 20% 80%, color-mix(in srgb,var(--himmel) 20%,transparent), transparent 46%);
}
.foto-platzhalter .fp-label{
  position:relative;z-index:1;
  /* Fraunces kursiv: handschriftliche, leicht persoenliche Bild-Beschriftung */
  font-family:var(--serif);font-style:italic;font-weight:600;font-size:1.05rem;line-height:1.25;color:var(--tinte);
  background:color-mix(in srgb,var(--papier) 90%, transparent);
  padding:.5rem .95rem;border-radius:11px;box-shadow:var(--schatten);
  max-width:26ch;
}
.foto-platzhalter .fp-hinweis{
  position:relative;z-index:1;
  font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tinte-weich);
  display:inline-flex;align-items:center;gap:.45rem;
}
.foto-platzhalter .fp-hinweis::before{content:"";width:8px;height:8px;border-radius:50%;
  background:var(--safran)}

/* Seitenverhaeltnisse per data-ratio (Platzhalter + Bilder) */
.foto-platzhalter[data-ratio="1/1"],
.foto[data-ratio="1/1"]{--fr:1/1;aspect-ratio:1/1}
.foto-platzhalter[data-ratio="3/4"],
.foto[data-ratio="3/4"]{--fr:3/4;aspect-ratio:3/4}
.foto-platzhalter[data-ratio="4/3"],
.foto[data-ratio="4/3"]{--fr:4/3;aspect-ratio:4/3}
.foto-platzhalter[data-ratio="3/2"],
.foto[data-ratio="3/2"]{--fr:3/2;aspect-ratio:3/2}
.foto-platzhalter[data-ratio="16/9"],
.foto[data-ratio="16/9"]{--fr:16/9;aspect-ratio:16/9}


/* =====================================================================
   PRINZIP 5 — BEWUSSTE UNPERFEKTION IM RUHEZUSTAND
   Fotos/Platzhalter liegen schon ohne Hover leicht schief, abwechselnd
   nach links und rechts geneigt — wie von Hand aufs Papier gelegt.
   Statische Neigung (keine Animation): bleibt bei reduced-motion erhalten.
   Die Karten/Spalten haben genug Innenabstand, sodass ~1.4deg nicht
   beschnitten wird. Steuerung ueber --tilt, damit einzelne Stellen die
   Richtung wechseln koennen.
   ===================================================================== */
.welt .foto-platzhalter, .welt .foto img,
.kat-karte .foto-platzhalter, .kat-karte .foto img,
.reportage-block .foto-platzhalter, .reportage-block .foto img,
.geschichte .foto-platzhalter, .geschichte .foto img,
.sortiment .foto-platzhalter, .sortiment .foto img{
  transform:rotate(var(--tilt,-1.4deg));
}
/* jede zweite Karte / jeder zweite Reportage-Block kippt in die Gegenrichtung */
.welten-grid > *:nth-child(2n) .foto-platzhalter,
.welten-grid > *:nth-child(2n) .foto img,
.katalog-grid > *:nth-child(2n) .foto-platzhalter,
.katalog-grid > *:nth-child(2n) .foto img,
.reportage-block:nth-of-type(2n) .foto-platzhalter,
.reportage-block:nth-of-type(2n) .foto img{
  --tilt:1deg;
}
/* gepaarte Reportage-Bilder zusaetzlich gegeneinander neigen */
.reportage-block .foto-platzhalter:nth-of-type(2n),
.reportage-block .foto:nth-of-type(2n) img{
  --tilt:1.1deg;
}

/* Zeitstrahl-Jahre minimal vertikal versetzt — keine schnurgerade Reihe */
.epoche:nth-child(2n) .jahr{transform:translateY(.22rem)}
.epoche:nth-child(2n+1) .jahr{transform:translateY(-.14rem)}


/* ============ 18. FORMULAR (Kontakt / Anfrage) ============ */
.formular{display:flex;flex-direction:column;gap:1.3rem}
.feld{display:flex;flex-direction:column;gap:.45rem}
.feld label{font-weight:700;font-size:.9rem;color:var(--tinte)}
.feld input,
.feld textarea,
.feld select{
  font-family:var(--sans);font-size:1rem;color:var(--tinte);width:100%;
  background:#fff;
  border:2px solid rgba(46,38,34,.2);
  border-radius:14px;
  padding:.8rem 1rem;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.feld textarea{min-height:8.5rem;resize:vertical;line-height:1.5}
.feld input::placeholder,
.feld textarea::placeholder{color:color-mix(in srgb,var(--tinte-weich) 70%, transparent)}

/* eigener Auswahl-Pfeil fuer select */
.feld select{
  appearance:none;-webkit-appearance:none;-moz-appearance:none;
  padding-right:2.7rem;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232E2622' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1rem center;
}

/* klare Focus-States (zusaetzlich zum globalen :focus-visible) */
.feld input:focus,
.feld textarea:focus,
.feld select:focus{
  outline:none;
  border-color:var(--ostergras);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--ostergras) 22%, transparent);
}

/* Fehlerzustand */
.feld-fehler{color:var(--beere);font-size:.82rem;font-weight:700;margin-top:.1rem}
.feld input[aria-invalid="true"],
.feld textarea[aria-invalid="true"],
.feld select[aria-invalid="true"]{
  border-color:var(--beere);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--beere) 16%, transparent);
}


/* ============ 19. KATALOG ============ */
.katalog-grid{display:grid;grid-template-columns:1fr;gap:1.4rem}
.kat-karte{
  background:#fff;border-radius:var(--r);box-shadow:var(--schatten);padding:1.2rem;
  display:flex;flex-direction:column;gap:.7rem;overflow:hidden;isolation:isolate;
  transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s ease;
}
.kat-karte:hover{transform:translateY(-8px);box-shadow:var(--schatten-tief)}
.kat-karte .foto,
.kat-karte .foto-platzhalter{margin-bottom:.3rem}
.kat-karte h3{font-size:1.4rem;margin-top:.2rem}
.kat-karte p{color:var(--tinte-weich);font-size:.98rem;flex:1}
.kat-karte .marke-jahr{margin-top:.1rem}
.kat-karte .btn{margin-top:.6rem;align-self:flex-start}

/* Eine querformatige, hervorgehobene Karte bricht das gleichfoermige Raster bewusst auf */
.kat-karte.quer{grid-column:1 / -1}
.kat-karte.quer .quer-text{display:flex;flex-direction:column;gap:.7rem;flex:1}
@media (min-width:680px){
  .kat-karte.quer{flex-direction:row;align-items:center;gap:1.6rem;padding:1.4rem}
  .kat-karte.quer > .foto-platzhalter{flex:0 0 44%;margin-bottom:0}
}
@media (min-width:900px){
  .kat-karte.quer{grid-column:span 2}
}


/* ============ 20. REPORTAGE (Magazin-Layout, Geschichte) ============ */
.reportage{display:flex;flex-direction:column;gap:clamp(3.5rem,8vw,7rem);
  padding:clamp(2rem,5vw,4rem) 0}
.reportage-block{display:grid;grid-template-columns:1fr;gap:2rem;align-items:center}
.reportage-block > *{min-width:0}
.reportage-block .eyebrow{margin-bottom:.4rem}
.reportage-block h2,
.reportage-block h3{font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.4rem 0 .9rem}
.reportage-block p{color:var(--tinte-weich);font-size:1.06rem;max-width:50ch}
.reportage-block p + p{margin-top:1rem}


/* ============ 21. RECHTSTEXT (Impressum / Datenschutz) ============ */
.rechtstext{max-width:68ch;margin-inline:auto;padding:1.5rem 0 4rem}
.rechtstext h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:1.4rem}
.rechtstext h2{font-size:1.5rem;margin:2.6rem 0 .8rem}
.rechtstext h3{font-size:1.18rem;margin:1.8rem 0 .5rem}
.rechtstext p{color:var(--tinte-weich);margin-bottom:1rem;line-height:1.8}
.rechtstext a{color:var(--ostergras-tief);text-decoration:underline;text-underline-offset:2px}
.rechtstext a:hover{color:var(--ostergras)}
.rechtstext ul,
.rechtstext ol{margin:1rem 0 1rem 1.3rem;color:var(--tinte-weich)}
.rechtstext li{margin-bottom:.45rem;line-height:1.7}
.rechtstext dl{margin:1.1rem 0;display:grid;gap:.3rem}
.rechtstext dt{font-weight:700;color:var(--tinte);margin-top:.8rem}
.rechtstext dd{color:var(--tinte-weich);margin:0}


/* ============ 22. BROTKRUMEN ============ */
/* erstes Element auf Unterseiten: muss den fixierten Header freihalten */
.brotkrumen{
  padding-top:6.5rem;
  font-size:.86rem;font-weight:600;color:var(--tinte-weich);
  display:flex;align-items:center;flex-wrap:wrap;gap:.55rem;
}
.brotkrumen a{color:var(--tinte-weich)}
.brotkrumen a:hover{color:var(--ostergras)}
.brotkrumen [aria-current="page"],
.brotkrumen .aktuell{color:var(--tinte)}
.brotkrumen .trenner{opacity:.5;color:var(--tinte-weich)}


/* =====================================================================
   23. RESPONSIVE — mobile-first hochskaliert (Breakpoints 560 / 900)
   ===================================================================== */

@media (min-width:560px){
  .hero{padding-top:8rem}
  .faeden svg{opacity:.55}

  /* Zeitstrahl groesser */
  .zeit::before{left:calc(72px + .8rem)}
  .epoche{grid-template-columns:72px 1fr;gap:2.4rem}
  .epoche .jahr{font-size:1.32rem}
}

@media (min-width:680px){
  .katalog-grid{grid-template-columns:repeat(2,1fr)}
}

@media (min-width:900px){
  /* --- Desktop-Navigation: Overlay aufloesen, Links in einer Reihe --- */
  [data-nav-toggle]{display:none}
  #hauptnav{
    position:static;inset:auto;z-index:auto;
    flex-direction:row;align-items:center;gap:2rem;
    padding:0;background:none;backdrop-filter:none;
    opacity:1;visibility:visible;pointer-events:auto;transform:none;transition:none;
  }
  #hauptnav a.lnk{font-size:.92rem}
  #hauptnav .btn{font-size:.92rem;margin-top:0}

  /* mehrspaltige Raster */
  .welten-grid{grid-template-columns:repeat(3,1fr);gap:1.4rem}
  .zahlen-grid{grid-template-columns:repeat(4,1fr);gap:2rem}
  .katalog-grid{grid-template-columns:repeat(3,1fr)}
  .kontakt-karte{grid-template-columns:1.1fr .9fr;gap:3rem}

  /* faden-Buehne weit sichtbar */
  .faeden svg{opacity:1;right:-4%}

  /* Reportage: zweispaltig, abwechselnd Text/Bild fuer Magazin-Rhythmus */
  .reportage-block{grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)}
  .reportage-block:nth-of-type(even) > :first-child{order:2}
}


/* =====================================================================
   ANIMATIONEN — Herstellungsprozess visualisiert
   ===================================================================== */
.animations{
  margin:2.4rem 0;padding:2.4rem 0;
  background:linear-gradient(135deg, rgba(79,140,58,.04) 0%, rgba(95,169,207,.04) 100%);
  border-top:1px solid rgba(79,140,58,.12);
  border-bottom:1px solid rgba(79,140,58,.12);
}

.animations .kopf{
  margin-bottom:2.4rem;
}

.animations .kopf .eyebrow{
  color:var(--ostergras);font-weight:700;
}

.animations .kopf h2{
  color:var(--tinte);margin-bottom:0.8rem;
}

.animations .kopf p{
  color:var(--tinte-weich);font-size:1.02rem;max-width:52ch;
}

/* Grid fuer 3 Animationen (mobile: 1 Spalte) */
.animations-grid{
  display:grid;grid-template-columns:1fr;gap:2rem;
}

.animation-container{
  padding:1.8rem;background:#fff;border-radius:var(--r);
  border-left:4px solid var(--bonbon-pink);box-shadow:var(--schatten);
  transition:box-shadow .3s ease, transform .3s ease;
}

.animation-container:hover{
  box-shadow:var(--schatten-tief);
  transform:translateY(-2px);
}

.animation-container h3{
  font-size:1.18rem;color:var(--tinte);margin-bottom:1.2rem;
  font-family:var(--serif);font-weight:700;
}

.animation-container p{
  margin-top:1rem;color:var(--tinte-weich);font-size:.96rem;line-height:1.5;
}

/* Animation-Container (Canvas-Area) */
#chenille-animation,
#easter-grass-animation,
#steam-roller-animation{
  border:1px solid rgba(79,140,58,.2) !important;
  border-radius:6px !important;
  padding:20px !important;
  background:#fafafa !important;
  min-height:200px;display:flex;align-items:center;justify-content:center;
  font-size:.9rem;color:var(--tinte-weich);
}

/* Farbige Akzente pro Animation */
.animation-container:nth-child(1){border-left-color:var(--bonbon-pink)}
.animation-container:nth-child(2){border-left-color:var(--ostergras)}
.animation-container:nth-child(3){border-left-color:var(--himmel)}

/* Responsive fuer Tablet + Desktop */
@media (min-width:680px){
  .animations-grid{grid-template-columns:repeat(2,1fr)}
  .animation-container:nth-child(3){grid-column:1/2}
}

@media (min-width:900px){
  .animations-grid{grid-template-columns:repeat(3,1fr);gap:2.2rem}
  .animation-container:nth-child(3){grid-column:auto}
}


/* =====================================================================
   24. REDUCED MOTION — alle Animationen abschaltbar (woertlich + erweitert)
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto}
  .faden{stroke-dashoffset:0}
  .auf{opacity:1;transform:none}
  html{scroll-behavior:auto}
}