/* Ariane Lindhorst - Stilblatt der entschiedenen Fassung, 02.11.2026.

   Festgelegt von Chris und Ariane:
     Grund Naturweiss #FAF9F6 · Wortmarke in Didot, immer 60 % des Rasters ·
     Erklaertext mittig darunter, gerade (nicht kursiv) · Raster aus zwei
     Bildern je Reihe mit gemeinsamer Hoehe, nichts beschnitten ·
     unter jedem Bild links der Name, rechts "Add to shortlist".

   Geometrie gemessen an elkedostal.com am 02.11.2026: Aussenrand 6vw,
   Spaltenabstand 72 px bei 1440 (= 5vw), Zeilenabstand derselbe Wert.

   Was bewusst fehlt: Linien, Rahmen, Schatten, Passepartout,
   Versal-Etiketten, Mittelpunkt-Ketten, Nummernmarken, Einblendbewegung
   auf Bildern. */

@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/BodoniModa-var.ttf") format("truetype-variations");font-weight:300 700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("assets/fonts/BodoniModa-var-italic.ttf") format("truetype-variations");font-weight:300 700;font-style:italic;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-var.ttf") format("truetype-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Jost";src:url("assets/fonts/Jost-var-italic.ttf") format("truetype-variations");font-weight:100 900;font-style:italic;font-display:swap}
/* GFS Didot (SIL Open Font License) faengt alles auf, was keine Didot im
   Geraet hat - also alles ausser Mac und iPhone. */
@font-face{font-family:"GFS Didot";src:url("assets/fonts/GFSDidot.ttf") format("truetype");font-weight:400;font-display:swap}

:root{
  --papier:#FAF9F6;
  --tinte:#111111;
  --leise:#86847F;
  --rand:clamp(22px,6vw,110px);
  --spalt:clamp(16px,5vw,86px);
  --reihe:clamp(44px,5vw,86px);
  --didot:"Didot","GFS Didot","Bodoni Moda",serif;
  --serif:"Bodoni Moda","Didot",serif;
  --sans:"Jost","Avenir Next",sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--papier);color:var(--tinte);font-family:var(--sans);
  font-size:15px;line-height:1.48;-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:auto}
/* Bewegte Aufnahmen sitzen im Raster wie Standbilder. Bei abgeschalteter
   Bewegung bleibt das Vorschaubild stehen - das Anhalten uebernimmt site.js,
   weil CSS einen laufenden Film nicht stoppen kann. */
video.bewegt{display:block;width:100%;height:auto;object-fit:cover;background:#e8e5df}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid var(--tinte);outline-offset:3px}
::selection{background:var(--tinte);color:var(--papier)}

/* ───────── Kopfzeile am Telefon: Name links, Menue rechts ─────────
   Am Rechner ausgeblendet. Die Menueseite legt sich ueber die ganze
   Flaeche - so, wie es auf Chris' Portfolio geloest ist. */
.mkopf{display:none}
.menueseite{display:none}

/* ───────── Kopf ───────── */
.kopf{display:flex;justify-content:center;padding:clamp(18px,2.2vw,30px) var(--rand) 0}
.menue{display:flex;gap:clamp(16px,2.4vw,36px);flex-wrap:wrap;justify-content:center}
.menue a{font-size:13px;font-weight:500;color:var(--leise)}
.menue a.an,.menue a:hover{color:var(--tinte)}

.mitte{padding:clamp(40px,6vw,104px) var(--rand) clamp(40px,5.5vw,92px);text-align:center}
/* Die Wortmarke nimmt immer genau 60 % der Rasterbreite ein. Der Faktor ist
   gemessen: "Ariane Lindhorst" in Didot ist 7,832 mal so breit wie die
   Schriftgroesse, also 100/7,832 = 12,768cqw im 60-Prozent-Kasten. */
.marke-kasten{width:60%;margin:0 auto;container-type:inline-size}
.wortmarke{
  font-family:var(--didot);font-optical-sizing:auto;font-weight:400;
  font-size:clamp(2rem,6.7vw,6.6rem);
  font-size:12.768cqw;
  line-height:.92;letter-spacing:0;white-space:nowrap;
}
 /* Der Satz steht in einem eigenen Kasten, etwas schmaler als der Name, und
    seine Groesse haengt an der Kastenbreite (cqw). Dadurch faellt der Umbruch
    bei JEDER Fensterbreite an derselben Stelle - der Satz laeuft immer ueber
    genau drei Zeilen. Der Wert ist gemessen, nicht geschaetzt. */
.satz-kasten{width:55%;margin:clamp(18px,2.2vw,34px) auto 0;container-type:inline-size}
.satz{text-align:center;font-size:4.34cqw;line-height:1.38}

/* Unterseiten: Seitentitel statt Wortmarke */
.seitentitel{font-family:var(--didot);font-weight:400;
  font-size:clamp(1.9rem,5vw,4.2rem);line-height:1}
.untertitel{margin-top:clamp(12px,1.4vw,20px);color:var(--leise);
  font-size:clamp(.95rem,1.2vw,1.08rem)}

/* ───────── Raster ───────── */
.raster{padding:0 var(--rand) clamp(56px,7vw,110px);display:grid;row-gap:var(--reihe)}
.reihe{display:flex;gap:var(--spalt);align-items:flex-end}
.kachel{display:flex;flex-direction:column}
.bu{display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  margin-top:11px;font-size:13px;font-weight:500}
.bu .name{color:var(--tinte)}
.bu .kurz{font:inherit;font-weight:500;background:none;border:none;
  color:var(--leise);cursor:pointer;padding:0}
.bu .kurz:hover,.bu .kurz[aria-pressed="true"]{color:var(--tinte)}

/* ───────── Strecke ───────── */
.strecke{padding:0 var(--rand) clamp(56px,7vw,110px);display:grid;row-gap:var(--reihe);
  max-width:1500px;margin:0 auto}
.strecke .breit{width:100%}
.strecke .schmal{width:min(100%,66%);margin:0 auto}
.strecke .paar{display:flex;gap:var(--spalt);align-items:flex-end}
.weiter{padding:0 var(--rand) clamp(60px,8vw,120px);display:flex;
  justify-content:space-between;align-items:flex-end;gap:30px}
.weiter .wm{font-family:var(--didot);font-size:clamp(1.6rem,4vw,3rem);line-height:1}
.weiter .vor{display:block;color:var(--leise);font-size:13px;margin-bottom:6px}
.weiter .mini{width:clamp(80px,10vw,140px)}

/* ───────── Fliesstext (About, Personal Styling, Recht) ───────── */
.text{padding:0 var(--rand) clamp(56px,7vw,110px);max-width:min(100%,1180px);margin:0 auto}
.text p+p{margin-top:1em}
.spalten-2{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(30px,5vw,90px);
  align-items:start}
.vorspann{font-size:clamp(1.05rem,1.7vw,1.5rem);line-height:1.4;max-width:30em}
.zitat-gross{font-family:var(--didot);font-size:clamp(1.4rem,3.2vw,2.6rem);
  line-height:1.22;max-width:18em;margin-bottom:clamp(28px,4vw,56px)}
.leise{color:var(--leise)}
.namen{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:14px}
.namen span{font-size:14px}
.portrait{max-width:380px;margin-bottom:clamp(24px,3vw,40px)}
.sprachwahl{display:flex;gap:14px;margin-bottom:clamp(20px,2.6vw,34px)}
.sp-btn{font:inherit;font-size:13px;font-weight:500;background:none;border:none;
  color:var(--leise);cursor:pointer;padding:0}
.sp-btn[aria-pressed="true"]{color:var(--tinte)}

/* ───────── Kontaktband: farblich abgesetzt, am Fuss von About ───────── */
.kontakt{background:var(--tinte);color:var(--papier);
  padding:clamp(44px,6vw,104px) var(--rand)}
.kontakt h2{font-family:var(--didot);font-weight:400;
  font-size:clamp(1.8rem,4.4vw,3.4rem);line-height:1;margin-bottom:clamp(28px,4vw,56px)}
/* 🔴 Die drei Spalten tragen die ganze Seitenbreite. Vorher waren sie
   gedrittelt und alle drei linksbuendig - auf einem breiten Schirm stand
   hinter der dritten Spalte eine halbe Bildschirmbreite leer (Chris,
   02.11.2026). Jetzt sitzt die erste am linken, die letzte am rechten Rand. */
.kontakt .saeulen{display:flex;justify-content:space-between;
  gap:clamp(26px,4vw,96px);flex-wrap:wrap}
.kontakt .saeule{flex:0 1 auto;max-width:34ch}
.kontakt .saeule:nth-child(2){text-align:center}
.kontakt .saeule:last-child{text-align:right}
.kontakt .saeule h3{font-size:12px;font-weight:500;letter-spacing:.02em;
  color:rgba(250,249,246,.55);margin-bottom:12px}
.kontakt .saeule p,.kontakt .saeule a{display:block;font-size:15px;line-height:1.62}
.kontakt .saeule a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.kontakt .schluss{margin-top:clamp(34px,4.6vw,76px);display:flex;gap:26px;
  flex-wrap:wrap;font-size:13px;color:rgba(250,249,246,.55)}
.kontakt .schluss a:hover{color:#fff}

.ablauf-schluss{margin-top:16px;font-size:14px;color:var(--leise)}
.ablauf-schluss a{border-bottom:1px solid currentColor}
.ablauf-schluss a:hover{color:var(--tinte)}

/* ───────── Fuss ───────── */
.fuss{padding:0 var(--rand) clamp(44px,6vw,90px);display:flex;gap:26px;
  flex-wrap:wrap;font-size:13px;font-weight:500;color:var(--leise)}
.fuss a:hover{color:var(--tinte)}

/* ───────── Kontaktseite ─────────
   Alles mit dem Daumen erreichbar: jede Zeile ist ein Ziel, das die
   richtige App oeffnet - Mail, Telefon, Karte, Kontaktkarte. */
.kontaktseite{padding:0 var(--rand) clamp(50px,7vw,100px);
  max-width:min(100%,860px);margin:0 auto}
.kontaktseite .gross{display:block;font-family:var(--didot);font-weight:400;
  font-size:clamp(1.6rem,4.4vw,2.8rem);line-height:1.12;
  padding:clamp(14px,1.8vw,22px) 0;border-bottom:0}
.kontaktseite .gross small{display:block;font-family:var(--sans);
  font-size:12px;font-weight:500;color:var(--leise);margin-bottom:4px;
  letter-spacing:.01em}
.kontaktseite .gross:hover{font-style:italic}
.kontaktseite .adresse{margin-top:clamp(30px,4vw,56px)}
.kontaktseite .adresse p{font-size:clamp(1rem,1.5vw,1.2rem);line-height:1.45}
.kontaktseite .adresse .weg{display:inline-block;margin-top:14px;font-size:13px;
  font-weight:500;color:var(--leise)}
.kontaktseite .adresse .weg:hover{color:var(--tinte)}
.kontaktseite .karte{margin-top:clamp(26px,3.4vw,44px);max-width:420px}
.kontaktseite .karte svg{width:100%;height:auto;display:block}
.kontaktseite .karte figcaption{margin-top:9px;font-size:12px;color:var(--leise)}

/* ───────── Shortlist ───────── */
.sl-liste{padding:0 var(--rand) clamp(56px,7vw,110px);display:grid;
  grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--spalt) var(--spalt);
  list-style:none}
.sl-leer{padding:0 var(--rand) clamp(60px,8vw,120px);max-width:34em;color:var(--leise)}

/* ───────── Rechtstexte ───────── */
.recht{padding:0 var(--rand) clamp(56px,7vw,110px);max-width:min(100%,820px);margin:0 auto}
.recht .sprung{display:flex;gap:22px;flex-wrap:wrap;margin-bottom:clamp(34px,4.4vw,70px);
  font-size:13px;font-weight:500;color:var(--leise)}
.recht .sprung a:hover{color:var(--tinte)}
.recht section{margin-bottom:clamp(50px,7vw,110px);scroll-margin-top:30px}
.recht h2{font-family:var(--didot);font-weight:400;
  font-size:clamp(1.5rem,3.4vw,2.6rem);line-height:1.05;margin-bottom:clamp(20px,2.6vw,38px)}
.recht h3{font-size:15px;font-weight:600;margin:clamp(26px,3vw,44px) 0 10px}
.recht p{font-size:15px;line-height:1.56;max-width:70ch}
.recht p+p{margin-top:.9em}
.recht .reihe-fein{display:grid;grid-template-columns:auto 1fr;gap:6px 28px;
  margin-bottom:26px;max-width:46em}
.recht .reihe-fein dt{color:var(--leise);font-size:13px}
.recht .reihe-fein dd{font-size:15px}

/* ───────── Der Text hellt sich beim Lesen auf ─────────
   Genau der Effekt der AiLaik-Startseite ("words illuminate with scroll"):
   die Woerter stehen auf 18 Prozent Deckkraft und gehen auf volle Tinte,
   waehrend der Abschnitt durch das Sichtfeld laeuft. Gilt nur fuer
   Lesetext (About, Personal Styling), nie fuer Bilder, nie fuer die
   Rechtstexte - dort muss jedes Wort von der ersten Sekunde an lesbar sein.
   Ohne JavaScript greift nichts davon, weil alles an .js haengt. */
.js .lesetext .mw{opacity:.18;transition:opacity .55s cubic-bezier(.22,1,.36,1)}
.js .lesetext .mw.an{opacity:1}
@media (prefers-reduced-motion:reduce){
  .js .lesetext .mw{opacity:1!important;transition:none}
}

/* ───────── Legal-Band, farblich abgesetzt vom schwarzen Kontaktband ───────── */
.rechtsband{background:#EAE7E0;color:var(--tinte);
  padding:clamp(34px,4.4vw,72px) var(--rand)}
.rechtsband h2{font-family:var(--didot);font-weight:400;
  font-size:clamp(1.3rem,2.6vw,2rem);line-height:1;margin-bottom:clamp(18px,2.2vw,30px)}
.rechtsband .wege{display:flex;gap:clamp(20px,3vw,48px);flex-wrap:wrap;font-size:14px}
.rechtsband .wege a{border-bottom:1px solid transparent}
.rechtsband .wege a:hover{border-bottom-color:var(--tinte)}
.rechtsband p{margin-top:clamp(18px,2.2vw,30px);font-size:13px;color:#6E6C66;max-width:52em}

/* ───────── Schlusszeile, mittig ───────── */
.schlusszeile{padding:clamp(26px,3.4vw,52px) var(--rand) clamp(34px,4vw,64px);
  text-align:center;font-size:13px;color:var(--leise)}
.schlusszeile a{margin:0 10px}
.schlusszeile a:hover{color:var(--tinte)}
.schlusszeile .c{display:block;margin-top:10px;font-size:12px}

/* ───────── Bewegung: genau eine, nur auf der Kopfschrift ───────── */
@media (prefers-reduced-motion:no-preference){
  .auftakt{animation:auf 1s cubic-bezier(.16,1,.3,1) both}
  @keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
}

@media(max-width:860px){
  .spalten-2{grid-template-columns:1fr}
  .kontakt .saeulen{gap:clamp(26px,4vw,52px)}
  .kontakt .saeule{max-width:28ch}
}
/* ═════════ Telefon ═════════
   Eigene Loesung, keine Verkleinerung. Grundsatz: die Bilder laufen ueber
   die ganze Breite und tragen die Seite, der Text sitzt im Rand daneben.
   Was am Rechner nebeneinander steht, steht hier untereinander - aber die
   Bilder verlieren dabei keinen Millimeter. */
@media(max-width:700px){
  :root{--rand:20px;--spalt:0px;--reihe:clamp(34px,9vw,54px)}

  /* Die Menueleiste des Rechners faellt weg, dafuer die Telefon-Kopfzeile */
  .kopf{display:none}
  .mkopf{
    display:flex;justify-content:space-between;align-items:baseline;
    padding:calc(14px + env(safe-area-inset-top)) var(--rand) 0;
  }
  .mkopf .name{font-family:var(--didot);font-size:17px;letter-spacing:.01em}
  /* Der uebliche Menueknopf: drei Striche. Kein Wort daneben. */
  .mkopf{justify-content:flex-end}
  .mkopf .name{display:none}
  .mkopf .schalter,.menueseite .schalter{
    background:none;border:0;cursor:pointer;color:var(--tinte);
    width:26px;height:26px;padding:0;position:relative;flex:0 0 auto}
  .mkopf .schalter span,.menueseite .schalter span{
    position:absolute;left:3px;right:3px;height:1.5px;background:currentColor;
    transition:transform .25s ease,opacity .2s ease}
  .mkopf .schalter span:nth-child(1){top:7px}
  .mkopf .schalter span:nth-child(2){top:12.5px}
  .mkopf .schalter span:nth-child(3){top:18px}
  .menueseite .schalter span:nth-child(1){top:12.5px;transform:rotate(45deg)}
  .menueseite .schalter span:nth-child(2){opacity:0}
  .menueseite .schalter span:nth-child(3){top:12.5px;transform:rotate(-45deg)}

  .menueseite{
    position:fixed;inset:0;z-index:60;background:var(--papier);
    display:flex;flex-direction:column;justify-content:space-between;
    padding:calc(14px + env(safe-area-inset-top)) var(--rand)
            calc(28px + env(safe-area-inset-bottom));
  }
  .menueseite[hidden]{display:none}
  body.menue-offen{overflow:hidden}
  .menueseite .zeile{display:flex;justify-content:space-between;align-items:baseline}
  .menueseite .zeile .name{font-family:var(--didot);font-size:17px}
  .menueseite .wege{display:flex;flex-direction:column;gap:clamp(10px,2.6vw,18px);
    margin:auto 0}
  .menueseite .wege a{font-family:var(--didot);font-size:clamp(2rem,11vw,3rem);
    line-height:1.04}
  .menueseite .wege a .zahl{font-family:var(--sans);font-size:14px;
    vertical-align:super;margin-left:6px;color:var(--leise)}
  .menueseite .wege a.an{font-style:italic}
  .menueseite .fein{display:flex;flex-direction:column;gap:7px;
    align-items:center;text-align:center;font-size:13px;font-weight:500;
    color:var(--tinte)}
  .menueseite .fein .recht{color:var(--leise);font-weight:500}

  /* Kopfbereich feiner: kleinerer Satz, engerer Zeilenabstand */
  .mitte{padding:clamp(22px,6vw,34px) var(--rand) clamp(24px,6.5vw,38px)}
  .marke-kasten{width:100%}
  .satz-kasten{width:88%;margin-top:clamp(12px,3.4vw,18px)}
  .satz{font-size:4.34cqw;line-height:1.34}
  .seitentitel{font-size:clamp(2rem,11vw,2.9rem)}
  .untertitel{font-size:13.5px;margin-top:8px}

  /* Raster: ein Bild je Reihe, mit schmalem Rand (Chris 02.11.) */
  .reihe{flex-direction:column;gap:var(--reihe)}
  .kachel{flex:1 1 auto!important}
  .bu{margin-top:10px;font-size:13px}

  /* Strecke: derselbe schmale Rand */
  .strecke .paar{flex-direction:column;gap:var(--reihe)}
  .strecke .schmal,.strecke .paar figure{width:100%}
  .weiter{flex-direction:column;align-items:flex-start;padding-left:var(--rand);padding-right:var(--rand)}
  .weiter .mini{width:34%}

  /* Fliesstext: eine Spalte, Kundenliste kompakt */
  .text{padding-left:var(--rand);padding-right:var(--rand)}
  .spalten-2{grid-template-columns:1fr;gap:clamp(26px,7vw,40px)}
  .zitat-gross{font-size:clamp(1.3rem,6.4vw,1.9rem);max-width:none;
    margin-bottom:clamp(22px,6vw,34px)}
  .vorspann{font-size:1.05rem;max-width:none}
  .portrait{max-width:none;width:100%}
  .namen{gap:3px 12px}
  .namen span{font-size:13px}

  /* Personal Styling: Bilder mit demselben schmalen Rand */
  .text figure{width:100%}
  .text .reihe{gap:var(--reihe)}

  /* Kontakt- und Legal-Band */
  .kontakt{padding:clamp(34px,9vw,52px) var(--rand)}
  .kontakt h2{font-size:clamp(1.9rem,10vw,2.6rem);margin-bottom:26px}
  .kontakt .saeulen{flex-direction:column;gap:26px}
  .kontakt .saeule,.kontakt .saeule:nth-child(2),
  .kontakt .saeule:last-child{text-align:left;max-width:none}
  .kontakt .schluss{margin-top:30px}
  .rechtsband{padding:clamp(26px,7vw,40px) var(--rand)}
  .rechtsband .wege{gap:12px 20px}

  .recht{padding-left:var(--rand);padding-right:var(--rand)}
  .recht h2{font-size:clamp(1.4rem,7vw,2rem)}
  .schlusszeile{padding-left:var(--rand);padding-right:var(--rand)}
  .schlusszeile a{display:inline-block;margin:0 8px}

  .sl-liste{padding-left:var(--rand);padding-right:var(--rand);
    grid-template-columns:1fr 1fr;gap:18px}
}