/* Antonia Consulting — Stylesheet
   Umsetzung von docs/design/antonia/DESIGN.md. Werte dort ändern, nicht hier improvisieren.
   Schriften werden selbst gehostet (DESIGN.md 3.2) — keine CDN-Einbindung, damit keine
   Daten an Dritte gehen und kein Cookie-Banner nötig wird. */

/* ---------- Schriften ---------------------------------------------------- */
/* Alle drei sind VARIABLE FONTS: eine Datei je Zeichensatz deckt den gesamten
   Gewichtsbereich ab — deshalb sechs Dateien (3 Familien x latin/latin-ext),
   nicht sechs Schnitte.

   Source Serif bewusst OHNE optische Groessenachse (opsz) geladen: spart 59 %
   Dateigroesse (119 -> 50 KB) und bringt bei 17-23px keinen sichtbaren Vorteil.

   Der latin-ext-Satz wird nur geladen, wenn ein Zeichen daraus vorkommt. Bei
   deutschen Texten laedt der Browser also nur die drei latin-Dateien (123 KB);
   latin-ext greift erst bei polnischen, tschechischen oder tuerkischen Namen. */

@font-face{font-family:'Jost';
  src:url('schriften/jost-latin.woff2') format('woff2');
  font-weight:100 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:'Jost';
  src:url('schriften/jost-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'SourceSerif';
  src:url('schriften/source-serif-latin.woff2') format('woff2');
  font-weight:200 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:'SourceSerif';
  src:url('schriften/source-serif-latin-ext.woff2') format('woff2');
  font-weight:200 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:'Inter';
  src:url('schriften/inter-latin.woff2') format('woff2');
  font-weight:100 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:'Inter';
  src:url('schriften/inter-latin-ext.woff2') format('woff2');
  font-weight:100 900;font-style:normal;font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
    U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,
    U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Marken-Token ------------------------------------------------- */
:root{
  --papier:#FFFFFF;
  --weinrot:#A91D4C;
  --weinrot-dunkel:#8C1740;
  --schiefer:#3C4650;
  --creme:#FBF7EE;
  --tinte:#1C1814;
  --nebel:#6D6258;
  --strich:#E8E2D6;

  --display:'Jost','Century Gothic','Futura',system-ui,sans-serif;
  --text:'SourceSerif',Georgia,'Times New Roman',serif;
  --util:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;

  --breite:1160px;
  --spalte:680px;
  --rand:40px;
}

/* ---------- Grundlagen --------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--papier);
  color:var(--tinte);
  font-family:var(--text);
  font-size:19px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--weinrot);text-decoration:none}
a:hover{color:var(--weinrot-dunkel)}

/* Sichtbarer Fokus — nie entfernen (DESIGN.md 11) */
:focus-visible{outline:2px solid var(--weinrot);outline-offset:3px;border-radius:2px}

.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}

/* Sprungmarke für Tastaturnutzung */
.sprung{position:absolute;left:-9999px;background:var(--weinrot);color:#fff;
        padding:12px 20px;font-family:var(--util);font-size:16px;z-index:100}
.sprung:focus{left:16px;top:16px;color:#fff}

/* ---------- Typografie (DESIGN.md 3.3) ----------------------------------- */
h1,h2,h3{font-family:var(--display);font-weight:300;line-height:1.15;margin:0}
h1{font-size:44px;letter-spacing:-.01em}
h2{font-size:30px;font-weight:400;margin-bottom:24px}
h3{font-size:21px;font-weight:400;margin-bottom:8px}
p{margin:0 0 24px}
p:last-child{margin-bottom:0}

.eyebrow{font-family:var(--display);font-size:13px;font-weight:400;
         letter-spacing:.14em;text-transform:uppercase;color:var(--nebel);
         margin:0 0 16px}
.intro{font-size:23px;line-height:1.6}
.util{font-family:var(--util);font-size:14px;color:var(--nebel);line-height:1.4}
.daten{font-family:var(--util);font-size:16px;color:var(--tinte)}

/* ---------- Aufbau ------------------------------------------------------- */
.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:var(--spalte)}
section{padding:96px 0;border-top:1px solid var(--strich)}
section.creme{background:var(--creme)}
section.dunkel{background:var(--schiefer);color:var(--creme);border-top:none}
section.dunkel h2,section.dunkel h3{color:var(--creme)}
section.dunkel .eyebrow{color:rgba(251,247,238,.7)}
section.dunkel p{color:rgba(251,247,238,.88)}
section.dunkel a{color:var(--creme);border-bottom-color:var(--creme)}
section.eng{padding:64px 0}

/* ---------- Kopf --------------------------------------------------------- */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:24px;
      padding:24px 0;border-bottom:1px solid var(--strich)}
.kopf .logo{width:184px}
.hauptnav{display:flex;gap:28px;font-family:var(--display);font-size:14px;
          font-weight:400;letter-spacing:.06em;text-transform:uppercase}
.hauptnav a{color:var(--tinte);padding-bottom:4px;border-bottom:1px solid transparent}
.hauptnav a:hover,.hauptnav a[aria-current="page"]{color:var(--weinrot);
                                                    border-bottom-color:var(--weinrot)}

/* ---------- Einstieg ----------------------------------------------------- */
.hero{padding:112px 0 64px}
.hero h1{font-size:64px;max-width:16ch}
.hero .beleg{font-family:var(--util);font-size:16px;color:var(--nebel);margin:32px 0 40px}
.bildband{aspect-ratio:16/5;background:linear-gradient(#e9e4da,#d8d2c6);
          display:flex;align-items:center;justify-content:center;text-align:center;
          font-family:var(--util);font-size:14px;color:var(--nebel);padding:24px}

/* Aufblenden beim Laden (DESIGN.md 8) */
.auf{opacity:0;animation:aufblenden .7s ease-out forwards}
.auf-1{animation-delay:.1s} .auf-2{animation-delay:.2s}
@keyframes aufblenden{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .auf{opacity:1;animation:none;transform:none}
}

/* ---------- Slogan ------------------------------------------------------- */
.slogan{font-family:var(--display);font-weight:300;font-size:30px;line-height:1.3;
        color:var(--weinrot);margin:0;text-align:center}
/* Weinrot auf Schiefer ist verboten (1,36:1) — DESIGN.md 2.3.
   Gilt fuer JEDE dunkle Flaeche, auch den Fussbereich. */
section.dunkel .slogan,.fuss .slogan{color:var(--creme)}

/* ---------- Knöpfe und Links --------------------------------------------- */
.knopf{display:inline-block;background:var(--weinrot);color:#fff;
       font-family:var(--util);font-weight:500;font-size:16px;
       padding:14px 28px;border-radius:2px;border:none;cursor:pointer;
       transition:background .15s ease}
.knopf:hover{background:var(--weinrot-dunkel);color:#fff}
.textlink{font-family:var(--util);font-size:16px;color:var(--weinrot);
          border-bottom:1px solid var(--weinrot);padding-bottom:4px;
          transition:border-width .15s ease}
.textlink:hover{border-bottom-width:2px}
.hero .textlink{margin-left:28px}

/* ---------- Häuser-Register (Signaturelement, DESIGN.md 5) --------------- */
.register{margin-top:40px}
.haus{border-top:1px solid var(--strich);padding:20px 0;display:flex;
      justify-content:space-between;align-items:baseline;gap:24px}
section.dunkel .haus{border-top-color:rgba(251,247,238,.22)}
.haus .strasse{font-family:var(--display);font-size:21px;font-weight:400;line-height:1.2}
.haus .art{font-size:17px;margin:4px 0 0}
.haus .ort{font-family:var(--util);font-size:14px;color:var(--nebel);
           white-space:nowrap;text-align:right}
section.dunkel .haus .ort{color:rgba(251,247,238,.65)}

/* ---------- Wege / Teaser ------------------------------------------------ */
.wege{display:grid;grid-template-columns:repeat(3,1fr);gap:40px;margin-top:40px}
.weg{border-top:1px solid var(--strich);padding-top:24px}
.weg h3{margin-bottom:12px}

/* ---------- Ablauf (einzige Stelle mit Nummerierung, DESIGN.md 7) -------- */
.ablauf{counter-reset:schritt;list-style:none;margin:40px 0 0;padding:0}
.ablauf li{counter-increment:schritt;position:relative;padding:0 0 24px 56px;
           border-bottom:1px solid var(--strich);margin-bottom:24px}
.ablauf li:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.ablauf li::before{content:counter(schritt);position:absolute;left:0;top:2px;
                   font-family:var(--display);font-size:21px;font-weight:300;
                   color:var(--weinrot);width:32px;text-align:right}
.ablauf b{font-family:var(--display);font-weight:400;font-size:19px;display:block;
          margin-bottom:4px}

/* ---------- Formular ----------------------------------------------------- */
.feld{margin-bottom:24px;max-width:var(--spalte)}
.feld label{display:block;font-family:var(--util);font-size:15px;font-weight:500;
            margin-bottom:6px}
.feld input,.feld textarea{width:100%;font-family:var(--util);font-size:16px;
       padding:12px 14px;border:1px solid var(--strich);border-radius:2px;
       background:var(--papier);color:var(--tinte)}
.feld input:focus,.feld textarea:focus{border-color:var(--weinrot);outline-offset:1px}
.feld textarea{min-height:140px;resize:vertical}
.feld .hinweis{font-family:var(--util);font-size:14px;color:var(--nebel);margin-top:6px}

/* ---------- Fuß ---------------------------------------------------------- */
.fuss{background:var(--schiefer);color:rgba(251,247,238,.88);padding:64px 0 40px}
.fuss a{color:var(--creme)}
.fuss .spalten{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px;
               padding-bottom:40px;border-bottom:1px solid rgba(251,247,238,.22)}
.fuss h3{font-size:15px;font-family:var(--display);font-weight:400;
         letter-spacing:.14em;text-transform:uppercase;color:rgba(251,247,238,.7);
         margin-bottom:16px}
.fuss ul{list-style:none;margin:0;padding:0;font-family:var(--util);font-size:16px}
.fuss li{margin-bottom:10px}
.fuss .schluss{display:flex;justify-content:space-between;gap:24px;
               padding-top:24px;font-family:var(--util);font-size:14px;
               color:rgba(251,247,238,.6)}

/* ---------- Rechtstexte -------------------------------------------------- */
.rechtstext{max-width:var(--spalte)}
.rechtstext h2{margin-top:56px}
.rechtstext h2:first-child{margin-top:0}
.rechtstext h3{margin-top:32px}
.rechtstext dl{margin:0 0 24px}
.rechtstext dt{font-family:var(--util);font-size:15px;font-weight:500;color:var(--nebel);
               margin-top:16px}
.rechtstext dd{margin:2px 0 0}

/* Offene Stelle — darf niemals live gehen (siehe LIESMICH.md) */
.offen{background:#FFF4E5;border-left:3px solid #C77700;padding:12px 16px;
       font-family:var(--util);font-size:15px;color:#6B4200;margin:0 0 24px;
       border-radius:0 2px 2px 0}
.offen b{font-weight:500}

/* ---------- Topbar (Design-Entwurf 08/2026, docs/design/antonia/entwuerfe) --
   Erreichbarkeitszeiten kommen erst mit Carmens Antwort auf Frage A4 dazu. */
.topbar{background:var(--schiefer);color:rgba(251,247,238,.88);
        font-family:var(--util);font-size:14px}
.topbar .zeile{display:flex;justify-content:space-between;gap:8px 24px;
               padding:10px 0;flex-wrap:wrap}
.topbar .ort{color:rgba(251,247,238,.65)}
.topbar a{color:var(--creme)}
.topbar a:hover{color:#fff}

/* ---------- Hero-Bühne (Design-Entwurf 08/2026) --------------------------- */
.hero-buehne{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,420px);
             gap:64px;align-items:center}
.hero .akzent{color:var(--weinrot)}
.bildkarte{position:relative;aspect-ratio:4/5;
           background:repeating-linear-gradient(135deg,
             #F3EDE1 0 10px,#EDE5D6 10px 20px);
           border:1px solid var(--strich);border-radius:2px}
.badge{position:absolute;left:-24px;bottom:32px;background:var(--papier);
       border:1px solid var(--strich);border-radius:2px;padding:14px 18px;
       box-shadow:0 8px 24px rgba(28,24,20,.08);max-width:260px}
.badge .titel{font-family:var(--util);font-size:12px;font-weight:600;
              letter-spacing:.14em;text-transform:uppercase;color:var(--weinrot);
              margin:0 0 4px}
.badge p{font-family:var(--util);font-size:14px;color:var(--nebel);margin:0;
         line-height:1.4}

/* ---------- Mobil -------------------------------------------------------- */
@media (max-width:860px){
  .wege{grid-template-columns:1fr;gap:32px}
  .fuss .spalten{grid-template-columns:1fr 1fr}
  .hero-buehne{grid-template-columns:1fr;gap:40px}
  .bildkarte{aspect-ratio:16/9;max-width:520px}
  .badge{left:16px;bottom:16px}
}
@media (max-width:640px){
  :root{--rand:24px}
  body{font-size:17px}
  h1{font-size:30px} h2{font-size:24px} h3{font-size:19px}
  .hero{padding:64px 0 40px}
  .hero h1{font-size:38px}
  .hero .textlink{margin-left:0;display:inline-block;margin-top:20px}
  .intro{font-size:20px}
  section{padding:64px 0}
  .hauptnav{display:none}
  .haus{flex-direction:column;gap:4px}
  .haus .ort{text-align:left}
  .fuss .spalten{grid-template-columns:1fr}
  .fuss .schluss{flex-direction:column;gap:8px}
}