/* ==========================================================================
   Einheit (06.10.2026)
   Wird auf allen Seiten als letztes Stylesheet geladen. Hier stehen die
   gemeinsamen Bausteine, damit alle Bereiche gleich aussehen:
   Grundwerte (Tokens), vier Kartentypen, Mehr-Links, Knöpfe, Kasten,
   Abstands-Klassen und kleine Korrekturen.
   ========================================================================== */

/* ---------- 1. Grundwerte ---------- */
:root{
  --radius-s:8px; --radius:14px; --radius-pill:999px;
  --dunkel-buehne:#161616;           /* alle Fast-Schwarz-Töne */
  --rahmen:1px solid var(--gravur-stark);
  --karte-grund:var(--creme-hoch);
  --karte-abstand:clamp(20px,2.4vw,26px);
  --akzent-kante:4px;
  --sperr-label:.14em;
  /* Schriftskala */
  --fs-xs:.78rem; --fs-s:.88rem; --fs-text:1rem; --fs-l:1.12rem;
  --fs-h1:clamp(2.2rem,4.6vw,3.05rem);
  --fs-h2:clamp(1.75rem,3.2vw,2.25rem);
  --fs-h3:clamp(1.12rem,1.6vw,1.25rem);
  /* Unterpaletten einzelner Bereiche zeigen auf die Hauptfarben */
  --kirsch:var(--rot-flae); --kirsch-tief:var(--rot-text);
}

/* ---------- 1b. Bausteine, die bisher als <style> in einzelnen Seiten standen ---------- */
@font-face{font-family:"Caveat";src:url("/liebeserklaerungen/schriften/caveat-latin-700-normal.woff2") format("woff2");font-weight:700;font-display:swap}
#liebeserklaerungen .lez-liste{list-style:none;margin:2.2em 0 0;padding:6px 6px 22px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(200px,1fr);gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
#liebeserklaerungen .lez-liste::-webkit-scrollbar{display:none}
#liebeserklaerungen .lez-liste li{scroll-snap-align:start}
#liebeserklaerungen .lez-karte{height:100%;display:flex;flex-direction:column;gap:6px;text-decoration:none;color:#17120f;background:#fffaf0;border:3px solid #17120f;border-radius:20px;overflow:hidden;padding-bottom:20px;transition:transform .15s ease,box-shadow .15s ease}
#liebeserklaerungen .lez-karte:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 #17120f}
#liebeserklaerungen .lez-karte:focus-visible{outline:3px solid #e34554;outline-offset:3px}
#liebeserklaerungen .lez-karte img{display:block;max-width:100%;height:auto;width:100%;aspect-ratio:3/2;object-fit:cover;border-bottom:3px solid #17120f;margin-bottom:10px}
#liebeserklaerungen .lez-nr{padding:0 20px;font-family:"Caveat",cursive;font-weight:700;font-size:23px;color:#b8283a}
#liebeserklaerungen .lez-p{padding:0 20px;font-size:15px;line-height:1.5;color:#3a2f27}
#liebeserklaerungen .lez-alle{display:inline-block;margin-top:1.2em;font-weight:700;color:#17120f;text-decoration:none;border-bottom:3px solid #e34554;padding-bottom:3px}
#liebeserklaerungen h2 .lez-herz{width:.78em;height:.78em;margin-right:.18em;vertical-align:-.06em;flex:none}
@media (prefers-reduced-motion:reduce){#liebeserklaerungen .lez-karte{transition:none}}
.start-geraete{list-style:none;padding:0;margin:2.2em 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px}
.start-geraete a{display:flex;flex-direction:column;height:100%;padding:12px 12px 14px;border:1px solid rgba(38,40,43,.16);border-radius:14px;background:#fff8ea;color:inherit;text-decoration:none}
.start-geraete a:hover{background:var(--creme)}
.start-geraete img{width:100%;height:120px;object-fit:contain;background:#F2E3C4;border-radius:10px;margin-bottom:10px}
.start-geraete small{font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--rot-text)}
.start-geraete b{margin-top:2px;line-height:1.3}
.start-geraete b::after{content:"\00a0\2192";color:var(--rot-flae)}
@media(max-width:860px){.start-geraete{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:520px){.start-geraete{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- 2. Überschriften ---------- */
main h1:not(.start h1):not(.start-kopf h1){font-size:var(--fs-h1)}
.start-kopf h1{font-size:var(--fs-h1)}
main section > .huelle > h2:not(.kapitel){font-size:var(--fs-h2)}
.artikel-schluss h2{font-size:clamp(1.25rem,2.8vw,1.55rem)}
/* Bandname auf Albumseiten: nah am Titel, aber eine Stufe kleiner */
.albumkopf-kuenstler{font-size:clamp(1.3rem,2.8vw,1.75rem)}

/* ---------- 3. Karten: vier Typen ----------
   A Standard  – alles, was man anklickt und liest
   B Akzent    – Aussagen und Entscheidungen (roter Rand links)
   C Bühne     – alles, was man bedient oder abspielt (dunkel)
   D Liebe     – Liebeserklärungen (verspielt, aber im System)          */

/* A: Standardkarte */
.karte,
.lesekarte,
.ls-kacheln a,
.weiterliste a,
.start-geraete a,
.lx-liste li,
.brief, .kalender-rahmen{
  background:var(--karte-grund);
  border:var(--rahmen);
  border-radius:var(--radius);
  box-shadow:none;
}
.karte, .lesekarte, .ls-kacheln a, .weiterliste a, .start-geraete a{
  transition:transform .15s ease, border-color .15s ease;
}
.karte:hover, .lesekarte:hover, .ls-kacheln a:hover, .weiterliste a:hover, .start-geraete a:hover{
  background:var(--karte-grund); border-color:var(--dunkel); transform:translateY(-2px); box-shadow:none;
}
.lx-liste li:not(.lx-folgt):hover{border-color:var(--dunkel)}
.lx-liste li.lx-live{background:var(--dunkel-buehne); border-color:var(--dunkel-buehne)}
.weiterliste a{border-top:var(--rahmen)}
.lesekarte .karten-bild{border-radius:10px; background:var(--creme)}

/* B: Akzentkarte – roter Rand links, sonst wie A, kein Schatten */
.karte--akzent,
.stimme, .wegkarte, .bst-karte, .feld, .ls-karte{
  background:var(--karte-grund);
  border:var(--rahmen);
  border-left:var(--akzent-kante) solid var(--rot-flae);
  border-radius:var(--radius);
  box-shadow:none;
}
.wegkarte + .wegkarte{border-left-color:var(--rot-flae)}
.stimme:hover, .wegkarte:hover{box-shadow:none; transform:translateY(-2px)}
.ls-karte{border-top:var(--rahmen)}
/* Knopf in der Weg-Karte: Kontur statt Schwarz gefüllt */
.wegkarte .taste{background:transparent; color:var(--dunkel); border:2px solid var(--dunkel)}
.wegkarte:hover .taste{background:var(--rot-flae); border-color:var(--rot-flae); color:#fff}

/* C: Bühnenkarte */
.karte--buehne{background:var(--dunkel-buehne); border-color:var(--dunkel-buehne); color:var(--creme)}
.karte--buehne a, .karte--buehne .pfeil{color:var(--rot-hell)}

/* D: Liebeserklärung – Illustration, Handschrift-Nummer, kursiver Titel;
   2 px Rahmen statt 3, Radius 14, Grund wie A, Titel in der Serifenschrift der Seite */
body #liebeserklaerungen .lez-karte, .le-karte{
  background:var(--karte-grund); color:var(--dunkel);
  border:2px solid var(--dunkel); border-radius:var(--radius);
}
body #liebeserklaerungen .lez-karte:hover, .le-karte:hover{transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--dunkel)}
body #liebeserklaerungen .lez-karte img, .le-karte img{border-bottom-width:2px; border-bottom-color:var(--dunkel)}
body #liebeserklaerungen .lez-nr{color:var(--rot-flae)}
body #liebeserklaerungen .lez-t{padding:0 20px; font-family:var(--serif); font-style:italic; font-weight:400;
  font-size:clamp(1.25rem,1.7vw,1.5rem); line-height:1.15; hyphens:manual; overflow-wrap:normal}
body #liebeserklaerungen .lez-p{color:var(--grau)}
body #liebeserklaerungen .lez-liste{grid-auto-columns:minmax(220px,1fr)}

/* ---------- 4. Mehr-Links: ein Stil ---------- */
.mehr-link, .strecke-weiter a, .alle-alben a, body #liebeserklaerungen .lez-alle, .alben-mehr a{
  color:var(--rot-text); font-weight:700; font-size:.95rem;
  text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px;
  border-bottom:none; padding-bottom:0;
}
.mehr-link:hover, .strecke-weiter a:hover, .alle-alben a:hover, body #liebeserklaerungen .lez-alle:hover{color:var(--dunkel)}
.pfeil, .album-mehr, .mehr{color:var(--rot-text); font-weight:700}

/* ---------- 5. Kästen: rote Kante = Information, schwarze = persönlich; Label immer rot ---------- */
.einschub .schild, .einschub > .schild{color:var(--rot-text)}

/* ---------- 6. Faktenleiste in Artikeln: festes Raster statt verwaistem Feld ---------- */
@media (min-width:700px){
  .albumkopf .datenzeile, .artikel .albumdaten{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px 0}
  .albumkopf .datenzeile li, .artikel .albumdaten li{border-right:1px solid var(--gravur-stark); padding:0 18px 0 0; margin-right:18px}
  .albumkopf .datenzeile li:last-child, .artikel .albumdaten li:last-child{border-right:none; margin-right:0}
}

/* ---------- 7. Abstands-Klassen (ersetzen Inline-Styles) ---------- */
.mt-05{margin-top:.5em !important} .mt-06{margin-top:.6em !important} .mt-1{margin-top:1em !important} .mt-12{margin-top:1.2em !important}
.mt-14{margin-top:1.4em !important} .mt-16{margin-top:1.6em !important} .mt-18{margin-top:1.8em !important} .mt-2{margin-top:2em !important}
.mt-24{margin-top:2.4em !important} .mt-26{margin-top:2.6em !important} .mt-3{margin-top:3em !important}
.link-leise{color:inherit !important; text-decoration-thickness:1px !important; text-underline-offset:.18em !important}
.fuss-logo{width:126px; height:auto; margin-bottom:15px} .fuss-h4-abstand{margin-top:22px}

/* ---------- 8. Kleine Korrekturen ---------- */
/* Tippflächen mindestens 44 px (Optik bleibt, nur die Trefferfläche wächst) */
.bst-punkt{position:relative}
.bst-punkt::after{content:""; position:absolute; inset:-18px -8px}
@media (max-width:760px){
  .pk-liste a{padding-top:10px; padding-bottom:10px}
  a[download], .pr-fotos a{display:inline-block; padding:10px 0}
}
/* Dachzeile der Anlage: Trenner nie allein am Zeilenende */
@media (max-width:560px){
  .ritual{display:flex; flex-wrap:wrap; justify-content:center; column-gap:.5em}
  .ritual i{display:none}
  .ritual span + i + span::before{content:""}
}
.leiste{flex-wrap:wrap; row-gap:4px} .leiste > span{white-space:nowrap}
/* Anlage: Geschichten-Karten in einer Reihe statt 3 + 1 */
#geschichten .leseliste{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fuss-claim{max-width:34ch}
.mt-22{margin-top:2.2em !important}
.abst-bild{margin:.5em 0 1.3em !important; overflow:hidden !important}
.abst-block{margin:2em 0 1.4em !important}
.abst-kopf{margin-top:1.1em !important; margin-bottom:clamp(30px,4vw,44px) !important}
.zitat-rand{clear:both !important; margin:1.6em 0 1.8em !important; max-width:28ch !important; font-size:clamp(1.25rem,2.6vw,1.6rem) !important; border-left:5px solid var(--rot) !important; padding-left:.75em !important}
.zelle-linie{padding:.5em !important; border-bottom:1px solid rgba(0,0,0,.15) !important}
/* Liebeserklärungen-Reihe: Pfeile links und rechts, gleiche Form wie bei den Schritten zur Session (.bst-pfeil) */
#liebeserklaerungen .lez-viewport{position:relative}
#liebeserklaerungen .lez-pfeil{top:calc(50% - 8px)}
#liebeserklaerungen .lez-pfeil-links{left:-27px}
#liebeserklaerungen .lez-pfeil-rechts{right:-27px}
#liebeserklaerungen .lez-pfeil[hidden]{display:none}
#liebeserklaerungen .lez-pfeil:disabled{opacity:0; pointer-events:none}
@media (max-width:760px){
  #liebeserklaerungen .lez-pfeil{width:44px; height:44px; border-width:4px}
  #liebeserklaerungen .lez-pfeil-links{left:-6px}
  #liebeserklaerungen .lez-pfeil-rechts{right:-6px}
}
#liebeserklaerungen .lez-liste{-webkit-mask-image:none; mask-image:none}
#liebeserklaerungen .lez-liste.lez-mehr-rechts{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent); mask-image:linear-gradient(90deg,#000 88%,transparent)}
/* Eckdaten im dunklen Kopf (Unternehmen, Privat): Trennlinien hell wie auf der Startseite */
.dunkel .hero-manifest{border-color:rgba(242,227,196,.28)}
.dunkel .hero-manifest span{border-color:var(--gravur-d)}
/* Dunkle Hero-Karte (Start, Unternehmen, Privat): kompakter, damit sie auf
   üblichen Laptop-Bildschirmen ganz zu sehen ist */
.start.dunkel .start-kopf h1{font-size:clamp(1.75rem,3.3vw,2.45rem)}
@media (min-width:900px){
  .start.dunkel{padding-top:clamp(28px,2.8vw,40px); padding-bottom:clamp(26px,2.4vw,34px)}
  .start.dunkel .geraet video, .start.dunkel .geraet .ersatz{aspect-ratio:2.3/1; height:auto; object-fit:cover}
  .start.dunkel .start-visual{gap:14px}
  .start.dunkel .start-text{margin-top:.8em}
  .start.dunkel .hero-manifest{margin:1.1em 0}
  .start.dunkel .hero-manifest span{padding-top:10px; padding-bottom:10px}
  /* Zwei Wege-Kacheln nebeneinander statt untereinander */
  .start.dunkel .hero-neben{display:grid; grid-template-columns:1fr 1fr; gap:12px}
  .start.dunkel .hero-neben > .hero-weg{order:1}
  .start.dunkel .hero-neben > .hero-weg:only-of-type{grid-column:1 / -1}
  .start.dunkel .hero-neben > .hero-archiv, .start.dunkel .hero-neben > .hero-wege{grid-column:1 / -1}
  .start.dunkel .hero-neben > .hero-archiv{order:2}
}
/* Startseite: Hinweis auf die Essay-Reihe Bandbreite unter den Liebeserklärungen (dunkle Karte, Foto links) */
.bb-teaser{display:grid; grid-template-columns:minmax(0,240px) minmax(0,1fr); align-items:stretch; margin-top:clamp(28px,3.4vw,40px);
  background:var(--dunkel-buehne); color:var(--creme); border-radius:var(--radius); overflow:hidden; text-decoration:none;
  box-shadow:6px 6px 0 var(--rot-flae); transition:transform .15s ease, box-shadow .15s ease}
.bb-teaser:hover{transform:translate(-2px,-2px); box-shadow:8px 8px 0 var(--rot-flae)}
.bb-teaser-bild{width:100%; height:100%; min-height:170px; object-fit:cover; display:block}
.bb-teaser-inhalt{display:flex; flex-direction:column; gap:8px; padding:clamp(18px,2.2vw,26px) clamp(20px,2.6vw,32px)}
.bb-teaser-schild{font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--rot-hell)}
.bb-teaser-titel{font-family:var(--serif); font-style:italic; font-size:clamp(1.35rem,2.2vw,1.7rem); line-height:1.15; color:var(--creme)}
.bb-teaser-text{color:var(--grau-hell); font-size:.95rem; line-height:1.55; max-width:56ch}
.bb-teaser-mehr{margin-top:2px; color:var(--rot-hell); font-weight:700; font-size:.95rem; text-decoration:underline; text-decoration-thickness:2px; text-underline-offset:4px}
@media (max-width:620px){.bb-teaser{grid-template-columns:1fr}.bb-teaser-bild{min-height:0; aspect-ratio:2.2/1}}
/* Hauptmenü: „Bibliothek“ mit Liebeserklärungen, Bandbreite, Journal und Lexikon */
.kopf nav .lesen-knopf{gap:9px}
.kopf nav .nav-herz-ico{width:24px; height:24px; flex:none; transition:transform .18s ease}
.kopf nav .lesen-gruppe:hover .nav-herz-ico, .kopf nav .lesen-knopf[aria-expanded="true"] .nav-herz-ico{transform:scale(1.12) rotate(-6deg)}
@media (prefers-reduced-motion:reduce){.kopf nav .nav-herz-ico{transition:none}}