/* ---------- Schriften (selbst gehostet, SIL OFL 1.1, Lizenzen in fonts/) ---------- */
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-regular-latin-ext.woff2) format('woff2');
  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:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-regular-latin.woff2) format('woff2');
  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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-italic-latin-ext.woff2) format('woff2');
  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:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;
  src:url(../fonts/instrument-serif-italic-latin.woff2) format('woff2');
  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:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/manrope-variable-latin-ext.woff2) format('woff2');
  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:'Manrope';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/manrope-variable-latin.woff2) format('woff2');
  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}

/* ---------- Tokens aus dem Designkonzept „Abendlicht“ ---------- */
:root{
  --elfenbein:#F6F1E8;   /* Hintergrund, ca. 60 % */
  --indigo:#2A3563;      /* Überschriften, Wortmarke, dunkle Flächen, Links */
  --nachtblau:#1C2340;   /* Fließtext */
  --messing:#E2B35B;     /* nur Hauptbutton, Punkt der Wortmarke, Markierungsstrich */
  --messing-hover:#D3A245;
  --altrosa:#D9A5A0;     /* ruhige Flächen, Labels auf Indigo */
  --linie:#DCD5C8;
  --weiss:#FFFFFF;
  --indigo-linie:#4A5487;

  --serif:'Instrument Serif',Georgia,serif;
  --sans:Manrope,system-ui,-apple-system,'Segoe UI',sans-serif;

  --rand:20px;           /* Seitenrand mobil */
  --abschnitt:64px;      /* Abstand zwischen Abschnitten mobil */
}
@media (min-width:768px){
  :root{ --rand:40px; --abschnitt:96px; }
}

/* ---------- Basis (mobil zuerst) ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--elfenbein);color:var(--nachtblau);
  font-family:var(--sans);font-size:16px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:var(--indigo);text-decoration:underline;text-underline-offset:3px}
a:hover{color:var(--nachtblau)}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px}

.container{max-width:1200px;margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:var(--abschnitt) 0}
.abschnitt + .abschnitt{border-top:1px solid var(--linie)}

/* Typografie */
.label{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--indigo);margin:0}
.strich{width:32px;height:4px;background:var(--messing);border-radius:2px}
h1,h2,h3{font-family:var(--serif);font-weight:400;color:var(--indigo);margin:0}
h1{font-size:40px;line-height:1.05}
h2{font-size:32px;line-height:1.1}
h3{font-size:24px;line-height:1.2}
p{margin:0;max-width:70ch}
.lead{font-size:16px}
.klein{font-size:14px;line-height:1.5}
@media (min-width:768px){
  h1{font-size:64px} h2{font-size:44px} h3{font-size:28px}
  body,.lead{font-size:17px}
}
.kopf{display:flex;flex-direction:column;gap:16px;margin-bottom:40px;max-width:720px}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;min-height:48px;
  padding:14px 28px;border-radius:999px;font-family:var(--sans);font-weight:600;font-size:16px;
  text-decoration:none;cursor:pointer;border:0;line-height:1.2;
}
.btn-haupt{background:var(--messing);color:var(--nachtblau)}
.btn-haupt:hover{background:var(--messing-hover);color:var(--nachtblau)}
.btn-kontur{border:1.5px solid var(--indigo);color:var(--indigo);background:transparent;padding:12.5px 26px}
.btn-kontur:hover{background:var(--indigo);color:var(--elfenbein)}

/* Platzhalter: klar als Entwurf erkennbar */
.platzhalter{
  border-radius:14px;
  background:repeating-linear-gradient(135deg,var(--indigo) 0 10px,#323E70 10px 20px);
  display:flex;align-items:flex-end;padding:14px;
}
.platzhalter.hell{background:repeating-linear-gradient(135deg,var(--linie) 0 10px,#E6E0D5 10px 20px)}
.platzhalter.rosa{background:repeating-linear-gradient(135deg,var(--altrosa) 0 10px,#E0B2AD 10px 20px)}
.platzhalter span{font-size:12px;font-weight:600;background:var(--elfenbein);color:var(--nachtblau);padding:4px 8px;border-radius:4px}
.ph{background:#FBEFD6;color:var(--nachtblau);padding:0 4px;border-radius:3px;font-weight:600}

/* Karten */
.karte{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.raster{display:grid;gap:16px}
@media (min-width:768px){ .raster-2{grid-template-columns:repeat(2,1fr)} }
@media (min-width:1024px){ .raster-4{grid-template-columns:repeat(4,1fr)} .raster-3{grid-template-columns:repeat(3,1fr)} }
@media (min-width:768px) and (max-width:1023px){ .raster-4,.raster-3{grid-template-columns:repeat(2,1fr)} }

/* ---------- Kopfzeile ---------- */
.kopfzeile{border-bottom:1px solid var(--linie)}
.kopfzeile .container{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:16px;padding-bottom:16px}
.wortmarke{font-family:var(--serif);font-size:28px;line-height:1;color:var(--indigo);text-decoration:none}
.wortmarke .punkt{color:var(--messing)}
.nav{display:none}
@media (min-width:1024px){
  .kopfzeile .container{padding-top:24px;padding-bottom:24px}
  .wortmarke{font-size:32px}
  .nav{display:flex;align-items:center;gap:32px;font-size:15px;font-weight:500}
  .nav a{color:var(--nachtblau);text-decoration:none}
  .nav a:hover{text-decoration:underline}
  .nav .btn{padding:12px 22px}
}
.kopf-link{font-size:14px;font-weight:600}
@media (min-width:1024px){ .kopf-link{display:none} }

/* ---------- 1 Startbereich ---------- */
.start{padding:32px 0 0}
.start-raster{display:grid;gap:32px}
.start-text{display:flex;flex-direction:column;gap:16px}
.start-text .btn{width:100%}
.start-foto{height:420px;margin:0 calc(var(--rand) * -1 + 14px)}
@media (min-width:768px){
  .start{padding:72px 0 0}
  .start-raster{grid-template-columns:1fr 1fr;gap:56px;align-items:center}
  .start-text{gap:24px}
  .start-text .btn{width:auto;align-self:flex-start}
  .start-foto{height:520px;margin:0}
}
.fakten{display:grid;border-top:1px solid var(--linie);margin-top:40px}
.fakt{padding:20px 0;display:flex;flex-direction:column;gap:2px}
.fakt + .fakt{border-top:1px solid var(--linie)}
.fakt strong{font-family:var(--serif);font-weight:400;font-size:24px;color:var(--indigo);line-height:1.2}
@media (min-width:768px){
  .fakten{grid-template-columns:repeat(3,1fr);margin-top:72px}
  .fakt{padding:24px 32px 24px 0}
  .fakt + .fakt{border-top:0;border-left:1px solid var(--linie);padding-left:32px}
}

/* ---------- 2 Vertrauen ---------- */
.stimme{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:12px}
.stimme blockquote{margin:0;font-family:var(--serif);font-size:24px;line-height:1.25;color:var(--indigo)}

/* ---------- 4 Über mich ---------- */
.ueber{display:grid;gap:32px}
.ueber-foto{height:440px}
.ueber-text{display:flex;flex-direction:column;gap:16px}
@media (min-width:768px){
  .ueber{grid-template-columns:5fr 7fr;gap:56px;align-items:start}
  .ueber-foto{height:560px;position:sticky;top:24px}
}
.hinweisbox{background:var(--altrosa);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:8px;color:var(--nachtblau)}
.hinweisbox h3{color:var(--nachtblau)}

/* ---------- 5 Ablauf ---------- */
.schritte{list-style:none;margin:0 0 56px;padding:0;display:grid;gap:24px;counter-reset:schritt}
.schritte li{display:flex;gap:16px}
.schritte li::before{
  counter-increment:schritt;content:counter(schritt);
  font-family:var(--serif);font-size:36px;line-height:1;color:var(--indigo);min-width:28px;
}
.schritte h3{font-size:22px;margin-bottom:4px}
@media (min-width:1024px){
  .schritte{grid-template-columns:repeat(5,1fr);gap:32px}
  .schritte li{flex-direction:column;gap:8px}
}
.abend{background:var(--indigo);color:var(--elfenbein);border-radius:12px;padding:32px 24px;display:flex;flex-direction:column;gap:24px}
.abend h3,.abend h4{color:var(--elfenbein)}
.abend .label{color:var(--altrosa)}
.abend-liste{display:grid;gap:24px;margin:0;padding:0;list-style:none}
.abend-liste li{border-top:1px solid var(--indigo-linie);padding-top:16px;display:flex;flex-direction:column;gap:6px}
.abend-liste h4{font-family:var(--serif);font-weight:400;font-size:24px;line-height:1.2;margin:0}
.abend .ph{background:var(--altrosa)}
@media (min-width:768px){
  .abend{padding:48px}
  .abend-liste{grid-template-columns:repeat(2,1fr);gap:32px 48px}
}
@media (min-width:1024px){ .abend-liste{grid-template-columns:repeat(3,1fr)} }

/* ---------- 6 Fragen ---------- */
.fragen{display:grid;gap:0;border-top:1px solid var(--linie)}
.frage{padding:24px 0;border-bottom:1px solid var(--linie);display:flex;flex-direction:column;gap:8px}
.frage h3{font-size:24px}
@media (min-width:1024px){
  .fragen{grid-template-columns:repeat(2,1fr);column-gap:56px}
}

/* ---------- 7 Anfrage ---------- */
.anfrage{display:grid;gap:40px}
@media (min-width:1024px){ .anfrage{grid-template-columns:5fr 7fr;gap:72px;align-items:start} }
.formular{background:var(--weiss);border:1px solid var(--linie);border-radius:12px;padding:24px;display:grid;gap:20px}
@media (min-width:768px){
  .formular{padding:40px;grid-template-columns:1fr 1fr;column-gap:24px}
  .formular .breit{grid-column:1 / -1}
}
.feld{display:flex;flex-direction:column;gap:8px}
.feld label{font-size:14px;font-weight:600}
.feld .optional{font-weight:400}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:16px;color:var(--nachtblau);
  background:var(--elfenbein);border:1px solid var(--linie);border-radius:8px;
  padding:12px 14px;min-height:48px;width:100%;
}
.feld textarea{min-height:140px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--indigo);outline-offset:1px;border-color:var(--indigo)}
.feld .hilfe{font-size:14px;line-height:1.5}
.formular .btn{width:100%}
@media (min-width:768px){ .formular .btn{width:auto;justify-self:start} }
.alternativ{display:flex;flex-direction:column;gap:12px}

/* ---------- Fußbereich ---------- */
.fuss{background:var(--indigo);color:var(--elfenbein);padding:56px 0 40px}
.fuss .container{display:grid;gap:32px}
.fuss .wortmarke{color:var(--elfenbein);font-size:40px}
.fuss .label{color:var(--altrosa)}
.fuss a{color:var(--elfenbein)}
.fuss-links{display:flex;flex-wrap:wrap;gap:8px 24px;font-size:14px;border-top:1px solid var(--indigo-linie);padding-top:24px}
@media (min-width:768px){
  .fuss .container{grid-template-columns:1fr 1fr;align-items:end}
  .fuss-links{grid-column:1 / -1}
}

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.textseite{max-width:760px;display:flex;flex-direction:column;gap:40px}
.textseite section{display:flex;flex-direction:column;gap:12px}
.textseite address{font-style:normal}
.textseite dl{margin:0;display:grid;gap:0 16px}
.textseite dd + dt{margin-top:8px}
@media (min-width:768px){ .textseite dl{grid-template-columns:auto 1fr;row-gap:4px} .textseite dd + dt{margin-top:0} }
.textseite dt{font-weight:600}
.textseite dd{margin:0}
.textseite ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}