/* Fotoflicker — Ratgeber-, Preis- und Fragen-Seiten. Baut auf basis.css + stil.css auf (gleiche Tokens, gleiche Album-Bausteine).
   Konzept: eine Seite aus dem Album-Anhang — links der Text, rechts am Rand die angeheftete Notiz „Auf einen Blick“. */

/* Kopf: ruhig auf Fotokarton, kein Video */
.seitenkopf{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;padding-bottom:18px}
.seitenkopf .marke{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--sepia)}
.seitenkopf .marke img{width:38px;height:auto}
.seitenkopf .marke b{font:400 1.4rem/1 var(--display)}
.kopfnav{display:flex;align-items:center;gap:6px 22px;font-size:.98rem}
.kopfnav a{color:var(--sepia-weich);text-decoration:none;padding:10px 0}
.kopfnav a:hover{color:var(--sepia);text-decoration:underline;text-underline-offset:4px}
.kopfnav a[aria-current="page"]{color:var(--sepia);text-decoration:underline;text-decoration-color:var(--garn);text-decoration-thickness:2px;text-underline-offset:6px}
.kopfnav .nummer{display:inline-flex;align-items:center;gap:.45em;color:var(--sepia);white-space:nowrap}
.kopfnav .nummer svg{width:20px;height:20px;color:var(--wa-dunkel)}
@media (max-width:760px){.kopfnav .ziel{display:none}.kopfnav .nummer span{display:none}.kopfnav .nummer{padding:10px}.kopfnav .nummer svg{width:26px;height:26px}}

/* Brotkrumen */
.brotkrumen ol{list-style:none;margin:0 0 18px;padding:0;display:flex;flex-wrap:wrap;gap:2px 0;font-size:.9rem;color:var(--silber)}
.brotkrumen li{display:inline-flex;align-items:center}
.brotkrumen li + li::before{content:"/";margin:0 .55em;color:var(--silber-hell)}
.brotkrumen a{color:var(--sepia-weich);text-underline-offset:3px}

/* Auftakt: Frage + Kurzantwort links, ein Abzug rechts */
.auftakt{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:clamp(28px,5vw,80px);align-items:center;padding-top:clamp(12px,3vw,40px)}
.auftakt.ohne-bild{grid-template-columns:minmax(0,1fr);max-width:860px}
.auftakt h1{font-size:clamp(2.1rem,4vw,3.3rem);line-height:1.05;margin:0 0 .45em;max-width:20ch}
.auftakt.ohne-bild h1{max-width:22ch}
.auftakt .kurz{font-size:clamp(1.12rem,1.5vw,1.3rem);line-height:1.6;color:var(--sepia);max-width:40em;margin:0 0 1.1em}
.auftakt .kurz strong{font-weight:700}
.stand{font-size:.9rem;line-height:1.55;color:var(--silber);margin:0}
.stand::before{content:"";display:inline-block;vertical-align:middle;width:40px;height:2px;margin:0 12px 3px 0;background:repeating-linear-gradient(90deg,var(--garn) 0 7px,transparent 7px 11px)}
.stand a{color:var(--sepia-weich);text-underline-offset:3px;white-space:nowrap}
.auftakt .bild{justify-self:center;width:100%;max-width:460px}
.auftakt .bild.quer{max-width:560px}
.auftakt .abzug{transform:rotate(1.4deg)}
.auftakt .abzug .beschriftung{font-size:1rem}
@media (max-width:860px){
  .auftakt{grid-template-columns:1fr;gap:28px}
  .auftakt .bild{max-width:420px}
  .auftakt .bild.quer{max-width:520px}
}
@media (max-width:420px){.auftakt .bild.hoch{max-width:300px}}

/* Raster: Artikel + Randnotiz */
.raster{display:grid;grid-template-columns:minmax(0,1fr) 350px;gap:clamp(32px,6vw,96px);align-items:start;padding-top:clamp(40px,6vw,80px)}
.raster > .blick{grid-column:2;grid-row:1;position:sticky;top:24px}
.raster > .artikel{grid-column:1;grid-row:1}
@media (max-width:960px){
  .raster{grid-template-columns:1fr;padding-top:36px}
  .raster > .blick{grid-column:1;grid-row:1;position:static;max-width:520px}
  .raster > .artikel{grid-row:2}
}

/* Randnotiz „Auf einen Blick“: angeheftetes Blatt */
.blick{background:var(--abzug);padding:26px 24px 22px;border-radius:2px;box-shadow:var(--schatten-abzug);position:relative;transform:rotate(-.6deg)}
.blick::before{content:"";position:absolute;top:-9px;left:50%;width:84px;height:20px;transform:translateX(-50%) rotate(-2deg);background:rgba(232,220,190,.9);box-shadow:0 1px 2px rgba(0,0,0,.12)}
.blick h2{font-size:1.45rem;margin:0 0 .6em}
.blick dl{margin:0 0 20px;display:grid;gap:10px}
.blick dl div{display:grid;gap:1px;padding-bottom:10px;border-bottom:1px dashed rgba(179,38,46,.3)}
.blick dl div:last-child{border-bottom:0;padding-bottom:0}
.blick dt{font-size:.85rem;color:var(--silber);line-height:1.3}
.blick dd{margin:0;font-size:1rem;line-height:1.45;color:var(--sepia)}
.blick .knopf{width:100%;font-size:1rem;padding:.85em .9em;white-space:nowrap}
.blick .danach{margin:10px 0 0;font-size:.88rem;line-height:1.45;color:var(--sepia-weich);text-align:center}

/* Artikel-Typografie */
.artikel{max-width:68ch;font-size:1.08rem}
.artikel > :first-child{margin-top:0}
.artikel h2{font-size:clamp(1.6rem,2.8vw,2.2rem);margin:2em 0 .5em;position:relative;padding-top:20px}
.artikel h2::before{content:"";position:absolute;left:0;top:0;width:52px;height:2.5px;background:repeating-linear-gradient(90deg,var(--garn) 0 8px,transparent 8px 13px)}
.artikel > h2:first-child{margin-top:0}
.artikel h3{font-size:1.3rem;margin:1.5em 0 .35em}
.artikel p{margin:0 0 1em;color:var(--sepia)}
.artikel a{color:var(--sepia);text-decoration-color:var(--garn);text-decoration-thickness:1.5px;text-underline-offset:3px}
.artikel a:hover{color:var(--garn-dunkel)}
.artikel strong{font-weight:700}
.artikel :where(ul:not(.weiter,.sprung)){list-style:none;padding:0;margin:0 0 1.2em;display:grid;gap:8px}
.artikel :where(ul:not(.weiter,.sprung) > li){position:relative;padding-left:1.6em}
.artikel :where(ul:not(.weiter,.sprung) > li)::before{content:"×";position:absolute;left:.1em;top:-.02em;color:var(--garn);font:400 1.15em/1.5 var(--display)}
.artikel .merke{background:var(--abzug);border-left:3px solid var(--garn);padding:14px 18px;margin:1.4em 0;font-size:1rem}
.artikel .merke p:last-child{margin:0}

/* Schrittfolge (echte Reihenfolge) — nutzt .schritte-liste aus stil.css, hier kompakter */
.artikel .schritte-liste{max-width:none;gap:22px;margin:1.2em 0 1.6em}
.artikel .schritte-liste::before{top:18px;bottom:18px}
.artikel .schritte-liste b{font-size:1.2rem}
.artikel .schritte-liste p{margin:0;color:var(--sepia-weich);font-size:1rem}

/* Zwei Notizen nebeneinander: „Das hilft“ / „Lieber lassen“ */
.zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin:1.4em 0 1.6em;padding:6px 2px}
.zwei .notiz{padding:20px 20px 16px}
.zwei .notiz b{font-size:1.25rem;margin-bottom:8px}
.zwei .notiz ul{margin:0;gap:7px}
.zwei .notiz li{font-size:.97rem;line-height:1.45;color:var(--sepia)}
.zwei .notiz.lassen li::before{content:"–";color:var(--silber)}
.zwei .notiz.hilft li::before{content:"+";color:var(--garn)}
@media (max-width:640px){.zwei{grid-template-columns:1fr}}

/* Beispiele: Abzüge mit Vergleichs-Schieber */
.bsp-reihe{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 24px;margin:1.4em 0 .6em;padding:6px 4px;align-items:start}
.bsp-reihe figure{margin:0}
.bsp-reihe .abzug:nth-child(odd){transform:rotate(-.7deg)}
.bsp-reihe .abzug:nth-child(even){transform:rotate(.8deg)}
.bsp-reihe .beschriftung{font-size:.95rem}
@media (max-width:640px){.bsp-reihe{grid-template-columns:1fr;gap:32px}}
.artikel .fussnote,.fussnote-klein{font-size:.88rem;color:var(--silber);margin-top:12px;line-height:1.5}

/* Preisliste als echte Tabelle */
.preisliste{width:100%;border-collapse:collapse;margin:1em 0 1.4em;font-size:1rem}
.preisliste caption{text-align:left;font-size:.9rem;color:var(--silber);padding-bottom:10px;caption-side:bottom;padding-top:10px}
.preisliste th,.preisliste td{padding:14px 10px 14px 0;border-bottom:2px dashed rgba(179,38,46,.3);text-align:left;vertical-align:top}
.preisliste thead th{font:700 .85rem/1.3 var(--body);color:var(--silber);border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--karton-tief);padding-bottom:8px}
.preisliste tbody th{font:400 1.12rem/1.3 var(--display);color:var(--sepia)}
.preisliste tbody th small{display:block;font:400 .88rem/1.4 var(--body);color:var(--sepia-weich);margin-top:3px}
.preisliste td.betrag{font:400 1.25rem/1.2 var(--display);text-align:right;white-space:nowrap;padding-right:0}
.preisliste thead th.betrag{text-align:right;padding-right:0}
.preisliste tr.gratis td.betrag{color:var(--garn)}

/* Weiterlesen */
.weiter{list-style:none;margin:1em 0 0;padding:0;border-top:2px dashed rgba(179,38,46,.3)}
.weiter li{border-bottom:2px dashed rgba(179,38,46,.3);padding:0}
.weiter a{display:grid;gap:2px;padding:16px 0;text-decoration:none;color:var(--sepia)}
.weiter a b{font:400 1.25rem/1.25 var(--display)}
.weiter a span{font-size:.97rem;color:var(--sepia-weich);line-height:1.5}
.weiter a:hover b{color:var(--garn-dunkel);text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:4px}

/* Fragen-Seite: Gruppen */
.fragen-seite .faq{max-width:none}
.fragen-seite .faq h2{margin-top:1.8em}
.fragen-seite .faq details p + p{margin-top:.6em}
.fragen-seite .faq details a{color:var(--sepia);text-decoration-color:var(--garn);text-underline-offset:3px}
.sprung{display:flex;flex-wrap:wrap;gap:8px 10px;margin:0 0 8px;padding:0;list-style:none}
.sprung a{display:inline-block;padding:8px 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--silber-hell);text-decoration:none;color:var(--sepia);font-size:.95rem}
.sprung a:hover{box-shadow:inset 0 0 0 1.5px var(--sepia)}

/* Schluss-Band auf Unterseiten etwas kompakter */
.schluss.kompakt{padding:clamp(48px,7vw,96px) 0}
.schluss.kompakt h2{font-size:clamp(1.8rem,3.4vw,2.6rem)}

/* Mobil: der Knopf direkt unter der Kurzantwort, damit niemand erst an Bild und Notiz vorbeiscrollen muss */
.auftakt .sofort{display:none}
@media (max-width:960px){.auftakt .sofort{display:block;margin:20px 0 0}.auftakt .sofort .knopf{width:100%;max-width:420px}}