/* ============================================================
   Wie das Leben so spielt
   Teil derselben Markenfamilie wie christinaleicht.de:
   gleiches Papierweiss, gleiches Dunkel, gleiches Gold, Raleway fuer
   Navigation und Beschriftungen. Fuer die Geschichten selbst eine
   Leseschrift (Newsreader). Fotos werden nie beschnitten, sie liegen
   wie Abzuege mit weissem Rand auf dem Papier.
   Schriften und Bilder liegen auf demselben Server wie die Seite.
   Newsreader, Raleway: SIL Open Font License 1.1
   ============================================================ */
@font-face{font-family:"Newsreader"; font-style:normal; font-weight:200 500; font-display:swap;
  src:url("schrift/newsreader.woff2") format("woff2")}
@font-face{font-family:"Newsreader"; font-style:italic; font-weight:400; font-display:swap;
  src:url("schrift/newsreader-italic.woff2") format("woff2")}
@font-face{font-family:"Raleway"; font-style:normal; font-weight:100 900; font-display:swap;
  src:url("schrift/raleway.woff2") format("woff2")}

:root{
  /* Farben wie christinaleicht.de */
  --papier:     #FAF7F1;
  --papier-2:   #F2EDE4;   /* ruhige Flaeche fuer einen Abschnitt */
  --abzug:      #FFFFFF;   /* weisser Fotorand */
  --text:       #26221E;
  --text-stark: #14110D;
  --text-leise: #6B6259;   /* 5.6:1 auf Papier */
  --dunkel:     #221D18;
  --gold:       #B98A2E;   /* nur Linien und Flaechen */
  --gold-tief:  #8E6B26;   /* fuer kleine Schrift, 4.9:1 */
  --linie:      rgba(38,34,30,.14);

  --lese: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --ui:   "Raleway", -apple-system, "Segoe UI", sans-serif;

  /* Abstaende: 8er-Raster */
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem; --s7:7rem;
  --gutter: clamp(1.25rem, 5vw, 4rem);
  --breit: 72rem;     /* gleiche Inhaltsbreite wie christinaleicht.de */
  --spalte: 40rem;    /* Lesespalte, ca. 68 Zeichen */
  --ease: cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%; scroll-padding-top:5rem}
body{
  background:var(--papier); color:var(--text);
  font-family:var(--lese); font-size:1.1875rem; line-height:1.7;
  font-optical-sizing:auto; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
img{display:block; max-width:100%; height:auto}
a{color:inherit}
::selection{background:rgba(185,138,46,.22)}
:focus-visible{outline:1.5px solid var(--gold); outline-offset:3px}
.sprung{
  position:absolute; left:1rem; top:-4rem; z-index:60;
  background:var(--dunkel); color:#fff; padding:.6rem 1rem;
  font-family:var(--ui); font-size:.875rem; text-decoration:none;
}
.sprung:focus{top:1rem}

.wrap{max-width:var(--breit); margin-inline:auto; padding-inline:var(--gutter)}

/* Beschriftungen wie die Kicker auf christinaleicht.de */
.kicker{
  font-family:var(--ui); font-size:.75rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--gold-tief);
}
.meta{
  font-family:var(--ui); font-size:.8125rem; font-weight:500;
  letter-spacing:.04em; color:var(--text-leise);
}
.meta span[aria-hidden]{margin-inline:.55em}

/* --- Foto als Abzug: weisser Rand, nie beschnitten -------------- */
.abzug{
  background:var(--abzug);
  padding:clamp(.5rem, 1.1vw, .875rem);
  box-shadow:0 1px 2px rgba(34,29,24,.06), 0 14px 34px -16px rgba(34,29,24,.22);
}
.abzug img{width:100%; height:auto}
/* In Rastern: gleicher Rahmen fuer alle, Bild darin vollstaendig */
.abzug.fest{aspect-ratio:4/3; display:flex; align-items:center; justify-content:center}
.abzug.fest img{width:100%; height:100%; object-fit:contain}

/* --- Kopfzeile ------------------------------------------------- */
/* Kopfleiste bleibt beim Scrollen oben stehen */
.kopfleiste{position:sticky; top:0; z-index:10; background:var(--papier); border-bottom:1px solid rgba(34,29,24,.08)}
.top{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
  padding-block:calc(var(--s3) + env(safe-area-inset-top)) var(--s3);
}
.marke{
  font-family:var(--ui); font-size:.9375rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase; text-decoration:none; color:var(--text-stark);
}
.top nav{display:flex; gap:var(--s4); white-space:nowrap; font-family:var(--ui); font-size:.875rem; font-weight:500; letter-spacing:.03em}
.top nav a{text-decoration:none; color:var(--text); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .3s var(--ease)}
.top nav a:hover{border-bottom-color:var(--gold)}

/* --- Startseite: Einstieg -------------------------------------- */
.banner{
  /* Titelfoto als Banner ueber die ganze Breite. Der Ausschnitt zeigt
     Berge, Horizont und Stein; unten wird abgeschnitten. */
  position:relative; overflow:hidden; isolation:isolate;
  height:min(78vh, 46rem); min-height:26rem;
  display:flex; align-items:flex-end;
  background:var(--dunkel); color:#fff;
}
.banner-bild{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:60% 8%;
  will-change:transform;
}
.banner::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(to right, rgba(20,17,13,.5) 0%, rgba(20,17,13,.2) 38%, rgba(20,17,13,0) 55%),
    linear-gradient(to top, rgba(20,17,13,.55) 0%, rgba(20,17,13,.15) 40%, rgba(20,17,13,0) 65%);
}
.banner-text{width:100%; padding-bottom:clamp(var(--s5), 8vh, var(--s6)); will-change:opacity, transform}
.banner h1{
  font-weight:240; font-size:clamp(2.75rem, 5vw, 4.75rem);
  line-height:1; letter-spacing:-.025em; color:#fff; text-wrap:balance;
  text-shadow:0 1px 24px rgba(0,0,0,.25);
}
.banner h1 span{display:block}
.banner .einleitung{margin-top:var(--s3); max-width:26rem; font-size:clamp(1.15rem,1.8vw,1.375rem); line-height:1.45; color:#fff}

@media (prefers-reduced-motion:no-preference){
  /* Das Titelfoto wird beim ersten Laden scharf; beim Scrollen bewegt es
     sich langsamer als die Seite und die Schrift blendet aus (einstieg.js) */
  .banner-bild{animation:scharf 2.2s var(--ease) .15s both}
  @keyframes scharf{from{filter:blur(18px) saturate(.6); opacity:.4}}
}
/* Parallax direkt im Browser, an die Scrollposition gekoppelt. Das laeuft
   auch am Handy fluessig; einstieg.js springt nur bei alten Browsern ein. */
@supports (animation-timeline: scroll()){
  @media (prefers-reduced-motion:no-preference){
    .banner-bild{
      animation:scharf 2.2s var(--ease) .15s both, gleiten linear both;
      animation-timeline:auto, scroll(root);
      animation-range:normal, 0 100vh;
    }
    .banner-text{animation:ausblenden linear both; animation-timeline:scroll(root); animation-range:0 40vh}
    @keyframes gleiten{to{transform:translate3d(0,40vh,0)}}
    @keyframes ausblenden{to{opacity:0; transform:translate3d(0,8vh,0)}}
  }
}

/* --- Abschnitte ------------------------------------------------ */
.abschnitt{padding-block:clamp(var(--s5),8vh,var(--s6))}
.abschnitt > .kopf{
  display:flex; align-items:center; gap:var(--s2); margin-bottom:var(--s5);
}
.abschnitt > .kopf::after{content:""; flex:1; height:1px; background:var(--linie)}

/* --- Karten ---------------------------------------------------- */
.karte{position:relative}
.karte h2 a,.karte h3 a{text-decoration:none; color:inherit}
.karte h2 a::after,.karte h3 a::after{content:""; position:absolute; inset:0; z-index:1}
.karte a:focus-visible{outline:none}
.karte:has(a:focus-visible){outline:1.5px solid var(--gold); outline-offset:8px}
.karte .abzug{transition:transform .5s var(--ease), box-shadow .5s var(--ease)}
.karte:hover .abzug{transform:translateY(-3px); box-shadow:0 1px 2px rgba(34,29,24,.06), 0 20px 40px -18px rgba(34,29,24,.3)}
.karte .meta{margin-top:var(--s3)}
.karte h2,.karte h3{
  font-weight:350; letter-spacing:-.012em; line-height:1.15; color:var(--text-stark);
  font-size:clamp(1.5rem, 2.2vw, 1.75rem); margin-top:var(--s1); text-wrap:balance;
}
.karte .teaser{margin-top:var(--s1); color:var(--text-leise); font-size:1.0625rem; line-height:1.6}
.weiter{
  display:inline-block; margin-top:var(--s2);
  font-family:var(--ui); font-size:.875rem; font-weight:600; letter-spacing:.02em; color:var(--text-stark);
  border-bottom:1px solid var(--gold); padding-bottom:2px;
}
.karte .etikett{display:block; margin-bottom:var(--s2)}

.karte.gross{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(var(--s4),5vw,var(--s6)); align-items:center;
}
.karte.gross .meta{margin-top:0}
.karte.gross h2{font-size:clamp(2.1rem, 3.8vw, 3.1rem); font-weight:300; line-height:1.05}
.karte.gross .teaser{font-size:1.1875rem; max-width:32ch}

.raster{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--s6) clamp(var(--s3),3vw,var(--s5))}

/* --- Satz aus den Geschichten (statisch) ----------------------- */
.satz{padding-block:clamp(var(--s5),10vh,var(--s7)); text-align:center}
.satz blockquote{
  font-style:italic; font-weight:400; color:var(--text-stark);
  font-size:clamp(1.6rem, 3.4vw, 2.6rem); line-height:1.3;
  max-width:30ch; margin-inline:auto; text-wrap:balance;
}
.satz figcaption{margin-top:var(--s3)}
.satz figcaption a{text-decoration:none; border-bottom:1px solid var(--gold)}

/* --- Ueber die Autorin ----------------------------------------- */
.ueber{background:var(--papier-2)}
.ueber .innen{
  display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr);
  gap:clamp(var(--s4),6vw,var(--s7)); align-items:center;
  padding-block:clamp(var(--s6),10vh,var(--s7));
}
.ueber .abzug{max-width:22rem}
.ueber .credit{margin-top:var(--s2); font-family:var(--ui); font-size:.75rem; color:var(--text-leise)}
.ueber h2{font-weight:300; font-size:clamp(2rem,3.6vw,2.9rem); line-height:1.05; color:var(--text-stark); margin-top:var(--s2)}
.ueber .zitat{margin-top:var(--s3); font-size:1.25rem; line-height:1.6; max-width:38ch}
.pfeil{
  display:inline-block; margin-top:var(--s4); text-decoration:none;
  font-family:var(--ui); font-size:.9375rem; font-weight:600; color:var(--text-stark);
  border-bottom:1px solid var(--gold); padding-bottom:3px;
  transition:color .3s var(--ease);
}
.pfeil::after{content:" →"}
.pfeil:hover{color:var(--gold-tief)}

/* --- Abo-Hinweis ----------------------------------------------- */
.abo{
  border-top:1px solid var(--linie); border-bottom:1px solid var(--linie);
  padding-block:var(--s5);
  display:flex; flex-wrap:wrap; gap:var(--s3) var(--s5); align-items:center; justify-content:space-between;
}
.abo p{font-size:clamp(1.35rem,2.4vw,1.75rem); font-weight:300; line-height:1.3; max-width:26ch; color:var(--text-stark)}
.abo p em{color:var(--text-leise)}
.knopf{
  display:inline-block; text-decoration:none;
  font-family:var(--ui); font-size:.875rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:var(--dunkel); padding:1rem 1.6rem;
  transition:background .3s var(--ease);
}
.knopf:hover{background:var(--gold-tief)}
.startseite .abo{margin-block:clamp(var(--s6),10vh,var(--s7)) 0}

/* --- Beitrag --------------------------------------------------- */
.beitrag header{
  max-width:var(--spalte); margin-inline:auto;
  padding-block:clamp(var(--s5),9vh,var(--s7)) var(--s5);
}
.beitrag h1{
  font-weight:260; letter-spacing:-.022em; line-height:1.04; color:var(--text-stark);
  font-size:clamp(2.4rem, 5.6vw, 4.1rem); margin-top:var(--s2); text-wrap:balance;
}
.beitrag .byline{margin-top:var(--s3)}
.beitrag .byline a{text-decoration:none; color:var(--text-stark); border-bottom:1px solid var(--gold)}

.text{max-width:var(--spalte); margin-inline:auto; font-size:clamp(1.125rem,1.4vw,1.25rem); line-height:1.72}
.text > * + *{margin-top:1.25em}
.text strong{font-weight:500; color:var(--text-stark)}
.text h2,.text h3,.text h4{font-weight:400; line-height:1.2; margin-top:2em; color:var(--text-stark)}
.text h2{font-size:1.6em}
.text h3,.text h4{font-size:1.3em}
.text a{text-decoration-color:var(--gold); text-underline-offset:.2em}
.text blockquote{border-left:2px solid var(--gold); padding-left:1.2em; font-style:italic; color:var(--text-leise)}
.text ul,.text ol{padding-left:1.3em}
.text hr{border:0; height:1px; background:var(--linie); margin-block:2.5em}
.text figure{margin-block:2.5em}
/* Fotos im Text: Hochformat nicht riesig, Querformat darf etwas breiter als die Spalte */
/* Breite aus Seitenverhaeltnis: Hochformate werden nie hoeher als 78% des Bildschirms */
.text figure.abzug{--rand:clamp(.5rem, 1.1vw, .875rem); --hoch:78vh;
  width:min(100%, calc(var(--hoch) * var(--ar, 1.5) + 2 * var(--rand))); margin-inline:auto}
.text figure.breit{width:min(calc(100vw - 2 * var(--gutter)), 52rem); margin-left:50%; transform:translateX(-50%)}
.text figcaption{margin-top:.6rem; text-align:center; font-family:var(--ui); font-size:.8125rem; color:var(--text-leise)}
.text .abo{margin-block:3.5em 0}

.nach{
  max-width:var(--spalte); margin:var(--s5) auto 0;
  display:flex; justify-content:space-between; gap:var(--s3); flex-wrap:wrap;
  font-family:var(--ui); font-size:.875rem; font-weight:500;
}
.nach a{text-decoration:none; color:var(--text-leise)}
.nach a:hover{color:var(--text-stark)}
.nachbarn{
  margin-top:clamp(var(--s6),10vh,var(--s7)); padding-top:var(--s5); border-top:1px solid var(--linie);
  display:grid; grid-template-columns:1fr 1fr; gap:clamp(var(--s3),4vw,var(--s5));
}

/* --- Fusszeile wie christinaleicht.de -------------------------- */
.fuss{
  margin-top:clamp(var(--s6),10vh,var(--s7));
  background:var(--dunkel); color:rgba(247,243,236,.65);
  padding:var(--s4) var(--gutter) calc(var(--s4) + env(safe-area-inset-bottom));
  font-family:var(--ui); font-size:.85rem; letter-spacing:.02em; text-align:center; line-height:2;
}
.fuss a{color:rgba(247,243,236,.85); text-decoration:none; transition:color .3s var(--ease)}
.fuss a:hover{color:#fff}
.fuss .punkt{opacity:.45; margin:0 .55em}

/* --- Rechtliches ----------------------------------------------- */
.recht{max-width:var(--spalte); margin-inline:auto; padding-top:clamp(var(--s5),9vh,var(--s7))}
.recht h1{font-weight:280; font-size:clamp(2.2rem,4.6vw,3.2rem); letter-spacing:-.015em; margin-bottom:var(--s4); color:var(--text-stark)}
.recht h2{font-family:var(--ui); font-size:.75rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-tief); margin:var(--s4) 0 .7rem}
.recht p{font-size:1.0625rem; line-height:1.7; margin-bottom:1rem}
.recht .stand{font-size:.875rem; color:var(--text-leise)}

/* --- Tablet ---------------------------------------------------- */
@media (max-width:1000px){
  .raster{grid-template-columns:repeat(2, minmax(0,1fr))}
}
/* --- Handy ----------------------------------------------------- */
@media (max-width:700px){
  body{font-size:1.125rem}
  .top nav a:not(:last-child){display:none}
  .marke{font-size:.8125rem; letter-spacing:.16em}
  .banner{height:68vh; min-height:24rem}
  .karte.gross{grid-template-columns:1fr}
  .karte.gross .meta{margin-top:var(--s1)}
  .raster{grid-template-columns:1fr}
  .ueber .innen{grid-template-columns:1fr}
  .ueber .abzug{max-width:16rem}
  .nachbarn{grid-template-columns:1fr}
  .text figure.abzug{--hoch:70vh}
}