/* ================================================================
   Schriften — lokal eingebunden, keine Verbindung zu Google
   Dateien gehören in den Ordner:  schriften/
   Bezugsquelle: gwfh.mranftl.com  (Format: woff2, latin)
   ================================================================ */

@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo-v19-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo-v19-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Archivo";
  src:url("schriften/archivo-v19-latin-800.woff2") format("woff2");
  font-weight:800; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"Source Serif 4";
  src:url("schriften/source-serif-4-v13-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Source Serif 4";
  src:url("schriften/source-serif-4-v13-latin-600.woff2") format("woff2");
  font-weight:600; font-style:normal; font-display:swap;
}

@font-face{
  font-family:"IBM Plex Mono";
  src:url("schriften/ibm-plex-mono-v19-latin-regular.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("schriften/ibm-plex-mono-v19-latin-500.woff2") format("woff2");
  font-weight:500; font-style:normal; font-display:swap;
}

  :root{
    --marmor:      #E7E8E4;
    --marmor-hell: #F3F4F1;
    --tinte:       #191A18;
    --grau:        #61645D;
    --linie:       #C7C9C2;
    --dunkelrot:   #9E1B2F;

    --display: "Archivo", "Helvetica Neue", Arial, sans-serif;
    --body:    "Source Serif 4", Georgia, "Times New Roman", serif;
    --mono:    "IBM Plex Mono", "SFMono-Regular", Consolas, monospace;

    --rand: clamp(20px, 6vw, 96px);
    --spalte: 980px;
  }

  *,*::before,*::after{ box-sizing:border-box; }

  html{ scroll-behavior:smooth; }

  body{
    margin:0;
    background:var(--marmor);
    color:var(--tinte);
    font-family:var(--body);
    font-size:clamp(17px,1.05vw + 14px,20px);
    line-height:1.62;
    -webkit-font-smoothing:antialiased;
  }

  .wrap{ max-width:var(--spalte); margin:0 auto; padding:0 var(--rand); }

  /* ---------- Utility-Typo ---------- */
  .mono{
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.16em;
    text-transform:uppercase;
    color:var(--grau);
    font-weight:500;
  }

  /* ---------- Hero ---------- */
  .hero{ padding:clamp(48px,9vh,104px) 0 clamp(32px,5vh,56px); }

  /* minmax(0,..) verhindert, dass langer Text die Spalte aufbläht */
  .intro-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(28px,5vw,56px);
    align-items:start;
  }
  .intro-bild{ margin:0; width:100%; }

  .hero-eyebrow{ margin:0 0 20px; }

  .hero-name{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(44px,8.5vw,92px);
    line-height:.92;
    letter-spacing:-.025em;
    text-transform:uppercase;
    margin:0 0 22px;
  }


  .hero-satz{
    font-size:clamp(20px,1.5vw + 14px,27px);
    line-height:1.3;
    margin:0;
    max-width:46ch;
  }

  /* ---------- Spec-Leiste ---------- */
  .spec{
    margin-top:clamp(40px,6vh,64px);
    border-top:1px solid var(--linie);
    border-bottom:1px solid var(--linie);
    padding:14px 0;
    display:flex;
    flex-wrap:wrap;
    gap:8px 17px;
    letter-spacing:.10em;   /* enger als .mono, damit alles in eine Zeile passt */
  }
  .spec span{ white-space:nowrap; }
  .spec span::after{
    content:"·";
    margin-left:17px;
    color:var(--linie);
  }
  .spec span:last-child::after{ content:none; }

  /* Auf schmalen Bildschirmen darf sie umbrechen */
  @media (max-width:880px){
    .spec{ gap:6px 14px; }
    .spec span::after{ margin-left:14px; }
  }

  /* ---------- Bildplatzhalter ---------- */
  .bild{
    position:relative;
    background:var(--marmor-hell);
    border:1px solid var(--linie);
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:24px;
  }
  .bild::before,.bild::after{
    content:"";
    position:absolute;
    width:12px; height:12px;
    border:solid var(--grau);
    opacity:.5;
  }
  .bild::before{ top:9px; left:9px; border-width:1px 0 0 1px; }
  .bild::after{ bottom:9px; right:9px; border-width:0 1px 1px 0; }
  .bild p{ margin:0; max-width:26ch; }
  .bild img{ width:100%; height:100%; object-fit:cover; display:block; }

  .bild-portrait{ aspect-ratio:4/5; }
  .bild-quer{ aspect-ratio:3/2; }
  .bild-breit{ aspect-ratio:16/9; }

  /* Sobald ein echtes Foto drin ist: kein Innenabstand, keine Eckmarken */
  .bild.hat-foto{ padding:0; border-color:rgba(0,0,0,.08); }
  .bild.hat-foto::before,
  .bild.hat-foto::after{ display:none; }

  .bild-voll{ margin:clamp(28px,5vh,44px) 0 0; }

  .haltung-grid{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:clamp(24px,4vw,52px);
    align-items:center;
    margin-top:clamp(28px,5vh,44px);
  }
  .haltung-grid .haltung{ margin:0; }

  .bildpaar{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:clamp(12px,2vw,22px);
    margin:clamp(28px,5vh,44px) 0;
  }

  figcaption{ margin-top:10px; }

  /* ---------- Abschnitte ---------- */
  .block{ padding:clamp(40px,7vh,72px) 0; }

  .block-titel{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(23px,1.6vw + 16px,32px);
    line-height:1.15;
    letter-spacing:-.015em;
    margin:0 0 24px;
    max-width:32ch;
  }

  .block p{ margin:0 0 1.05em; max-width:62ch; }
  .block p:last-child{ margin-bottom:0; }

  .lead{ font-size:1.12em; }

  strong{ font-weight:600; }

  /* ---------- Zeitachse ---------- */
  .zeit{ border-top:1px solid var(--linie); }

  .etappe{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:clamp(16px,3vw,44px);
    padding:clamp(26px,4vh,38px) 0;
    border-bottom:1px solid var(--linie);
  }

  .jahr{
    font-family:var(--mono);
    font-size:13px;
    letter-spacing:.06em;
    color:var(--dunkelrot);
    padding-top:.35em;
    font-weight:500;
  }

  .etappe h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.06em;
    letter-spacing:0;
    margin:0 0 .55em;
  }
  .etappe p{ margin:0 0 .9em; max-width:58ch; }
  .etappe p:last-child{ margin-bottom:0; }

  /* ---------- Zitat / Haltung ---------- */
  .haltung{
    border-left:3px solid var(--dunkelrot);
    padding:4px 0 4px clamp(18px,3vw,30px);
    margin:clamp(28px,5vh,44px) 0 0;
  }
  .haltung p{
    font-size:clamp(20px,1.5vw + 15px,27px);
    line-height:1.32;
    margin:0;
    max-width:24ch;
  }

  /* ---------- Kontakt ---------- */
  .kontakt{
    border-top:1px solid var(--linie);
    padding:clamp(48px,8vh,88px) 0 clamp(56px,9vh,96px);
  }
  .kontakt .block-titel{ margin-bottom:18px; }
  .kontakt p{ max-width:52ch; }

  .cta{
    display:inline-block;
    margin-top:26px;
    background:var(--tinte);
    color:var(--marmor);
    text-decoration:none;
    font-family:var(--mono);
    font-size:12px;
    letter-spacing:.14em;
    text-transform:uppercase;
    padding:17px 32px;
    transition:background .18s ease, transform .18s ease;
    border:none;
    cursor:pointer;
  }
  .cta:hover{ background:var(--dunkelrot); transform:translateY(-2px); }
  .cta:focus-visible{ outline:2px solid var(--dunkelrot); outline-offset:3px; }

  /* ---------- Formular ---------- */
  .formular{ margin-top:clamp(28px,4vh,40px); max-width:560px; }
  .feld{ margin-bottom:18px; }
  .feld label{
    display:block;
    margin-bottom:7px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--grau);
  }
  .feld input,
  .feld textarea{
    width:100%;
    background:var(--marmor-hell);
    border:1px solid var(--linie);
    padding:13px 14px;
    font-family:var(--body);
    font-size:16px;
    color:var(--tinte);
    border-radius:0;
    -webkit-appearance:none;
  }
  .feld textarea{ min-height:150px; resize:vertical; }
  .feld input:focus,
  .feld textarea:focus{
    outline:2px solid var(--dunkelrot);
    outline-offset:1px;
    border-color:transparent;
  }

  /* Spam-Falle: für Menschen unsichtbar, für Bots ausfüllbar */
  .falle{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .meldung{
    padding:14px 16px;
    margin-bottom:22px;
    border-left:3px solid var(--dunkelrot);
    background:var(--marmor-hell);
  }
  .meldung p{ margin:0; font-size:.95em; }
  .meldung-ok{ border-left-color:#2E7D4F; }


  .fuss{
    border-top:1px solid var(--linie);
    padding:22px 0 40px;
    display:flex;
    flex-wrap:wrap;
    gap:10px 26px;
  }

  /* ---------- Reveal ---------- */
  .reveal{ opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease; }
  .reveal.sichtbar{ opacity:1; transform:none; }

  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
    .reveal{ opacity:1; transform:none; transition:none; }
    .cta{ transition:none; }
    .cta:hover{ transform:none; }
  }

  /* ---------- Mobil ---------- */
  @media (max-width:760px){
    .intro-grid{ grid-template-columns:1fr; gap:26px; }
    .intro-bild{ margin-top:6px; }
    .etappe{ grid-template-columns:1fr; gap:10px; }
    .jahr{ padding-top:0; }
    .bildpaar{ grid-template-columns:1fr; }
    .haltung-grid{ grid-template-columns:1fr; }
  }

  /* ================================================================
     Ergänzungen: Navigation, Suche-Block, Galerie
     ================================================================ */

  /* ---------- Kopfzeile mit Navigation ---------- */
  .navleiste{
    border-bottom:1px solid var(--linie);
  }
  .navleiste .wrap{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:20px;
    padding-top:18px;
    padding-bottom:18px;
  }
  .navleiste a{
    color:var(--grau);
    text-decoration:none;
    border-bottom:1px solid transparent;
    padding-bottom:2px;
  }
  .navleiste a:hover,
  .navleiste a[aria-current="page"]{
    color:var(--tinte);
    border-bottom-color:var(--dunkelrot);
  }
  .navleiste nav{ display:flex; gap:20px; }

  /* ---------- Suche-Block (Startseite, ganz oben) ---------- */
  .suche{
    padding:clamp(36px,6vh,64px) 0 clamp(32px,5vh,56px);
    border-bottom:1px solid var(--linie);
  }
  .suche .block-titel{
    font-size:clamp(26px,2vw + 17px,38px);
    max-width:22ch;
    margin-bottom:20px;
  }
  .suche p{ margin:0 0 1.05em; max-width:58ch; }
  .suche p:last-of-type{ margin-bottom:0; }

  .eckdaten{
    margin-top:clamp(26px,4vh,38px);
    display:flex;
    flex-wrap:wrap;
    gap:8px 17px;
    letter-spacing:.10em;
  }
  .eckdaten span{ white-space:nowrap; }
  .eckdaten span::after{
    content:"·";
    margin-left:17px;
    color:var(--linie);
  }
  .eckdaten span:last-child::after{ content:none; }

  /* ---------- Galerie ---------- */
  .galerie{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:clamp(10px,1.6vw,18px);
    margin-top:clamp(26px,4vh,40px);
  }
  .galerie figure{ margin:0; }

  @media (max-width:880px){
    .galerie{ grid-template-columns:repeat(2,1fr); }
  }
  @media (max-width:520px){
    .galerie{ grid-template-columns:1fr; }
  }

  .hinweis-leer{
    border:1px dashed var(--linie);
    background:var(--marmor-hell);
    padding:26px;
    margin-top:26px;
  }
  .hinweis-leer p{ margin:0; max-width:58ch; }

  /* ---------- Kurzbiografie ---------- */
  .kurzbio-grid{
    display:grid;
    grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
    gap:clamp(28px,5vw,56px);
    align-items:start;
  }
  .weiterlesen{
    display:inline-block;
    margin-top:6px;
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--tinte);
    text-decoration:none;
    border-bottom:1px solid var(--dunkelrot);
    padding-bottom:3px;
  }
  .weiterlesen:hover{ color:var(--dunkelrot); }

  @media (max-width:760px){
    .kurzbio-grid{ grid-template-columns:1fr; gap:26px; }
    .navleiste .wrap{ flex-direction:column; align-items:flex-start; gap:10px; }
  }

  /* ---------- Serien-Titel (Stil aus dem Portfolio-PDF) ---------- */
  .serie{ margin-top:clamp(48px,7vh,80px); }
  .serie:first-of-type{ margin-top:clamp(30px,4vh,44px); }

  .serie-titel{
    font-family:var(--display);
    font-size:clamp(15px,.5vw + 13px,18px);
    font-weight:800;
    letter-spacing:.24em;
    text-transform:uppercase;
    color:var(--tinte);
    margin:0 0 10px;
  }
  .serie-titel::after{
    content:"";
    display:block;
    width:44px;
    height:3px;
    background:var(--dunkelrot);
    margin-top:12px;
  }
  .serie-unter{
    font-family:var(--body);
    font-size:.94em;
    color:var(--tinte);
    margin:14px 0 0;
    max-width:56ch;
  }

  /* ---------- Rechtstexte ---------- */
  .recht h2{
    font-family:var(--display);
    font-weight:600;
    font-size:clamp(19px,1vw + 15px,23px);
    margin:clamp(30px,4vh,44px) 0 12px;
  }
  .recht h2:first-of-type{ margin-top:clamp(20px,3vh,30px); }
  .recht h3{
    font-family:var(--display);
    font-weight:600;
    font-size:1.02em;
    margin:24px 0 8px;
  }
  .recht p, .recht li{ max-width:64ch; }
  .recht ul{ margin:0 0 1.05em; padding-left:1.2em; }
  .recht li{ margin-bottom:.4em; }
  .recht a{ color:var(--tinte); text-decoration:underline; text-underline-offset:3px; }
  .recht a:hover{ color:var(--dunkelrot); }

  .luecke{
    background:#FBE9A7;
    padding:1px 5px;
    border-bottom:1px solid #C9A227;
  }

  /* ---------- Formatierung der generierten Rechtstexte ---------- */
  .recht h1{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(26px,2vw + 18px,38px);
    letter-spacing:-.02em;
    margin:0 0 30px;
  }
  .recht ul.index{
    list-style:none;
    padding:0;
    margin:0 0 1.4em;
    border-left:2px solid var(--linie);
    padding-left:clamp(16px,2.5vw,26px);
  }
  .recht ul.index li{ margin-bottom:.3em; }
  .recht a.index-link{
    font-family:var(--body);
    font-size:.92em;
    text-decoration:none;
    border-bottom:1px solid transparent;
  }
  .recht a.index-link:hover{ border-bottom-color:var(--dunkelrot); }

  .recht ul.m-elements,
  .recht ul.glossary{
    background:var(--marmor-hell);
    border:1px solid var(--linie);
    list-style:none;
    padding:clamp(16px,2.4vw,24px);
    margin:0 0 1.3em;
  }
  .recht ul.m-elements li,
  .recht ul.glossary li{
    margin-bottom:.85em;
    font-size:.92em;
    line-height:1.55;
    max-width:none;
  }
  .recht ul.m-elements li:last-child,
  .recht ul.glossary li:last-child{ margin-bottom:0; }

  .recht p.seal{
    margin-top:clamp(34px,5vh,50px);
    padding-top:18px;
    border-top:1px solid var(--linie);
    font-family:var(--mono);
    font-size:11px;
    letter-spacing:.08em;
    text-transform:none;
    color:var(--grau);
  }
  .recht p.seal a{ color:var(--grau); }

  /* Lange URLs im Fliesstext umbrechen statt überlaufen lassen */
  .recht a{ overflow-wrap:anywhere; }

  /* Sicherheitsnetz: sehr lange Abschnitte nie dauerhaft ausblenden.
     Falls JS fehlschlaegt oder der Beobachter nicht ausloest, bleibt
     der Inhalt trotzdem sichtbar. */
  .recht .reveal,
  .recht.reveal{ opacity:1 !important; transform:none !important; }

  /* "Arbeiten" als klar uebergeordnete Ueberschrift */
  .arbeiten-titel{
    font-family:var(--display);
    font-weight:800;
    font-size:clamp(28px,2.2vw + 18px,42px);
    letter-spacing:-.02em;
    text-transform:none;
    margin:0 0 6px;
  }

  /* ---------- Galerie: Bilder im Originalformat, nie beschnitten ----------
     Die Bildplatzhalter der uebrigen Seiten haben ein festes Seitenverhaeltnis.
     In der Galerie soll dagegen der Ausschnitt gelten, den du beim Export
     festgelegt hast — hoch, quer oder quadratisch, gemischt ist kein Problem. */
  .galerie{ align-items:start; }

  .galerie .bild{
    aspect-ratio:auto;
    display:block;
    padding:0;
    height:auto;
  }
  .galerie .bild img{
    width:100%;
    height:auto;
    display:block;
    object-fit:fill;
  }

  /* Knopf im Suche-Block etwas absetzen, seit die Eckdaten-Leiste entfaellt */
  .suche .cta{ margin-top:clamp(28px,4vh,40px); }