/* WordPress-Ergänzungen zum Vorschau-CSS (zuz.css). Hier von Hand pflegen. */

/* Grundlagen */
body{margin:0}
[hidden]{display:none!important}
img{max-width:100%;height:auto}
/* Imagify packt Bilder in <picture>: das Element soll keine eigene Box bilden, damit .ratio img & Co. weiter greifen */
picture{display:contents}
.screen-reader-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip-link:focus{position:fixed;top:8px;left:8px;z-index:100;width:auto;height:auto;clip:auto;overflow:visible;padding:12px 16px;background:var(--zest);color:var(--ink);font:600 12.5px/1 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;text-decoration:none}
.meta a,.author b a{color:inherit;text-decoration:none}
.meta a:hover,.author b a:hover{text-decoration:underline;text-decoration-color:var(--zest)}

/* Kopf: Suchknopf als Link (funktioniert auch ohne JavaScript), Formular im Feld */
.s-trig{text-decoration:none}
.s-field form{display:flex;align-items:center;gap:10px;width:100%;height:100%;margin:0}
.wm--svg{display:block;line-height:0}
.wm--svg svg{height:calc(var(--s) * .78);width:auto;display:block;overflow:visible}
.wm--svg .amp{fill:var(--zest);stroke:var(--ink)}

/* Seitenzahlen von paginate_links() */
.pager .current{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 12px;background:var(--ink);color:var(--paper);border:1px solid var(--ink)}
.pager .dots{border:0}
.pager .prev{margin-right:auto}

/* Artikeltext: Blöcke aus dem Editor */
.art-body > *{max-width:100%}
.art-body .wp-block-image{margin:2em 0}
.art-body .wp-block-image img{width:100%;height:auto}
.art-body .wp-block-image figcaption,.art-body .wp-element-caption{margin-top:10px;font:400 15px/1.45 var(--f-text);font-style:italic;color:var(--muted);text-align:left}
.art-body .wp-block-gallery{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px!important;margin:0 0 1.2em}
.art-body .wp-block-gallery > figure.wp-block-image,.art-body .wp-block-gallery .blocks-gallery-item{margin:0!important;width:auto!important;aspect-ratio:1/1;overflow:hidden;background:#e9e4d8;cursor:zoom-in}
.art-body .wp-block-gallery img{width:100%!important;height:100%!important;object-fit:cover;transition:transform .4s ease}
.art-body .wp-block-gallery figure:hover img{transform:scale(1.03)}
.art-body .wp-block-gallery figure figcaption{display:none}
.art-body .wp-block-gallery > figcaption{grid-column:1 / -1}
@media (max-width:600px){.art-body .wp-block-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}}
.art-body .wp-block-quote,.art-body blockquote{margin:1.6em 0;padding:0 0 0 22px;border-left:3px solid var(--zest);font-style:italic}
.art-body .wp-block-quote cite{display:block;margin-top:8px;font:600 11px/1.3 var(--f-ui);font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.art-body .wp-block-pullquote{margin:2em 0;padding:24px 0;border-block:2px solid var(--ink);text-align:left}
.art-body .wp-block-pullquote blockquote{border:0;padding:0;margin:0;font-family:var(--f-display);font-size:clamp(24px, 2.4vw, 30px);line-height:1.25}
.art-body .wp-block-embed,.art-body iframe{max-width:100%}
.art-body .wp-block-embed{margin:2em 0}
.art-body .wp-block-separator{border:0;border-top:1px solid var(--line);margin:2em 0}
.art-body h3{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(21px, 2vw, 25px);line-height:1.2;margin:1.4em 0 .5em}
.art-body ol{padding-left:1.3em;margin:0 0 1.2em}
.nfig{margin:0 0 1.6em}
.nfig img{width:100%;height:auto}
.art-tags{margin-top:2em}
.art-tags span{font-weight:600;text-transform:uppercase;letter-spacing:.12em;font-size:11px}

/* Kommentare */
.cmts{padding-block:24px 56px}
.cmt-list{list-style:none;margin:0 0 32px;padding:0}
.cmt-list .children{list-style:none;margin:0;padding-left:28px;border-left:1px solid var(--line)}
.cmt{padding:18px 0;border-bottom:1px solid var(--line)}
.cmt-h{display:flex;gap:12px;align-items:baseline;font:500 12.5px/1.4 var(--f-ui);letter-spacing:.06em}
.cmt-h b{font-family:var(--f-display);font-size:18px;letter-spacing:0}
.cmt-h time{color:var(--muted)}
.cmt-t{font-size:17px;line-height:1.6}
.cmt-r a{font:600 11px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase}
.cmt-wait,.cmt-note{font:500 12.5px/1.5 var(--f-ui);color:var(--muted)}
.cmt-form-h{font-family:var(--f-display);font-weight:var(--w-display);font-size:26px;margin:0 0 12px}
.comment-form label{display:block;margin-bottom:6px;font:600 11px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase}
.comment-form input[type=text],.comment-form input[type=email],.comment-form input[type=url],.comment-form textarea{width:100%;border:0;border-bottom:1px solid var(--ink);background:transparent;padding:10px 0;font:400 17px/1.5 var(--f-text);color:var(--ink);border-radius:0}
.comment-form p{margin:0 0 18px}

/* Kontaktformular */
.cform-msg{margin:0;padding:12px 14px;font:500 15px/1.45 var(--f-ui);background:var(--zest-wash);border-left:3px solid var(--zest)}
.cform-msg--fehler{background:#F6E5E1;border-left-color:var(--red)}
.cf-hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Startseite */
.home-ad{padding-bottom:48px}

/* Seiten */
.legal-body--solo{padding-block:40px 72px}

/* Über uns aus Blöcken (Muster „Über uns & Kontakt“) */
.zuz-about .wp-block-group__inner-container{display:contents}
.zuz-about figure{margin:0}
.zuz-about .wp-block-image img{width:100%;height:auto}
.zuz-about p.kicker{margin:0}
.zuz-about .ab-fig img{aspect-ratio:4/3;object-fit:cover}
.zuz-about .ab-fig figcaption{margin-top:10px;font-size:15px;line-height:1.4;color:var(--muted);text-align:left}
.zuz-about .btns{gap:12px}
.zuz-about .btns .wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 20px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);font:600 12.5px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;transition:background .2s,color .2s}
.zuz-about .btns .wp-block-button__link:hover{background:var(--ink);color:var(--paper)}
.zuz-about .btns .is-z .wp-block-button__link{background:var(--zest)}
.zuz-about .btns .is-z .wp-block-button__link:hover{background:var(--ink);color:var(--zest)}
.zuz-about .ab-stats p{margin:0}
.zuz-about .ab-stats .ab-num{font-family:var(--f-display);font-weight:var(--w-display);font-size:clamp(36px, 4vw, 56px);line-height:1;font-variant-numeric:lining-nums}
.zuz-about .ab-stats .ab-lab{font:600 11px/1.3 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.zuz-about .person figure{width:168px}
.zuz-about .person p{margin:0 0 6px}
.zuz-about .person .meta{margin:0 0 14px}
.zuz-about .person-more a{display:inline-block;margin-top:14px;box-shadow:none;font:600 11px/1 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;text-decoration:underline;text-decoration-color:var(--zest);text-decoration-thickness:2px;text-underline-offset:5px}
.zuz-about .wp-block-quote{margin:0;padding:0;border:0;display:flex;flex-direction:column;gap:22px}
.zuz-about .ab-quote-img img{aspect-ratio:4/3;object-fit:cover}
.zuz-about p.ab-tile{margin:0;padding:0;border:0;display:block}
.zuz-about .ab-tile a{display:flex;flex-direction:column;gap:8px;padding:22px 0 6px;border-top:2px solid var(--ink);text-decoration:none;box-shadow:none}
.zuz-about .ab-tile a:hover b{text-decoration:underline;text-decoration-color:var(--zest);text-decoration-thickness:3px;text-underline-offset:4px}
.zuz-about .ab-coll img{aspect-ratio:auto;margin:0}
.zuz-about .ab-coll figure:first-child img{aspect-ratio:3/4;object-fit:cover}
.zuz-about .ab-coll figure:last-child img{aspect-ratio:4/3;object-fit:cover}
.zuz-about .ab-coll figure:last-child{margin-bottom:12%}
.zuz-about .ab-jury-img img{aspect-ratio:3/4;object-fit:cover}
.zuz-about .tl .tl-t{font-size:18px;line-height:1.5}
.zuz-about .ab-promise .ab-pr-t{display:block;font-size:17px;line-height:1.6;color:var(--muted)}
.zuz-about .ab-sec-tight{padding-top:0}
.zuz-about .ab-contact > p:empty{display:none}
@media (max-width:900px){.zuz-about .ab-fig{order:-1;margin-inline:calc(-1 * max(18px, var(--gutter-l)))}}
@media (max-width:760px){.zuz-about .person figure{width:96px}.zuz-about .ab-quote-img{margin-inline:calc(-1 * max(18px, var(--gutter-l)))}}

/* Anzeigenplätze (Plugin-Modul „Anzeigen“), im Look des Themes */
.adslot[hidden],.adslot [hidden]{display:none!important}
.adslot__label{display:block;margin:0 0 8px;font:600 11px/1.2 var(--f-ui);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);text-align:left}
.adslot__item{display:block;text-decoration:none;box-shadow:none}
.adslot__bild{display:block;max-width:100%;height:auto;margin:0 auto}
.adslot--rail{position:sticky;top:calc(var(--hs) + 24px);width:300px;max-width:100%}
@media (max-width:1419px){.adslot--rail{position:static;width:auto}}
@media (max-width:760px){.adslot__item[data-geraet="desktop"]{display:none!important}}
@media (min-width:761px){.adslot__item[data-geraet="mobil"]{display:none!important}}

/* Eingeloggt: fester Kopf unter der WordPress-Leiste */
body.admin-bar .hdr{top:32px}
body.admin-bar::before{display:none}
@media screen and (max-width:782px){body.admin-bar .hdr{top:46px}}
@media screen and (max-width:600px){#wpadminbar{position:fixed}}

/* Bündige Spalten: Aufmacher + Seitenliste (Rubrik), Karte + Stapel (Startseite).
   Beide Spalten enden auf gleicher Höhe. Das Bild gibt in der Höhe nach (flacher als 1,6 : 1 wird es nie),
   die Liste verteilt den Platz gleichmäßig, die Trennlinien liegen immer mittig zwischen zwei Einträgen.
   Rubrik: bis 1279 px vier Einträge, ab 1280 px fünf; der fünfte steht schmaler stattdessen oben in der Artikelliste. */
.rside .rowc--weit{display:none}
@media (min-width:901px){
  .rtop{align-items:stretch}
  .rtop .rlead,.split .card{display:flex;flex-direction:column;container-type:inline-size}
  .rtop .rlead{gap:16px;align-items:stretch}
  .rtop .rlead > .ratio,.split .card > .ratio{aspect-ratio:auto;flex:1 0 auto;min-height:62cqi}
  .rtop .rlead > .ratio img,.split .card > .ratio img{position:absolute;inset:0}
  .rside,.stack{display:flex;flex-direction:column;justify-content:flex-start;gap:0}
  .rside .rowc,.stack .rowc{flex:2 1 auto;padding-block:22px;align-content:center;border-top:1px solid var(--line)}
  .stack .rowc{padding-block:24px}
  .rside .rowc:first-child,.stack .rowc:first-child{flex-grow:1;padding-top:0;border-top:0;align-content:start}
  .rside .rowc:last-child,.stack .rowc:last-child{flex-grow:1;padding-bottom:0;align-content:end}
}
@media (min-width:901px) and (max-width:1279px){
  .rside .rowc:has(+ .rowc--weit),.stack .rowc:nth-child(3){flex-grow:1;padding-bottom:0;align-content:end}
}
@media (min-width:1280px){
  .rside .rowc--weit{display:grid}
  .card--schmal{display:none}
}

/* Inhaltsverzeichnis im Artikel, gestaltet wie bei Impressum und Datenschutz:
   ab 1340 px links neben dem Text und mitlaufend, darunter als zugeklappter Kasten am Textanfang.
   Zwischenüberschriften der Ebene 3 erscheinen nur unter dem gerade gelesenen Abschnitt. */
.atoc--seite{display:none}
.atoc ol{list-style:none;margin:0;padding:0;display:grid;gap:2px;border-left:1px solid var(--line)}
.atoc a{display:block;padding:6px 0 6px 14px;margin-left:-1px;border-left:2px solid transparent;font:400 15px/1.35 var(--f-text);color:var(--muted);text-decoration:none}
.atoc a:hover,.atoc a[aria-current]{color:var(--ink);border-left-color:var(--zest)}
.atoc li > ol{display:none;border-left:0;margin:0 0 4px}
.atoc li > ol a{padding-left:28px;font-size:14px}
.atoc--seite li.is-open > ol{display:grid}
.atoc-h{margin:0 0 14px}
.art-body .atoc ol{margin:0;padding:0}
.art-body .atoc li{margin:0}
.art-body .atoc a,.art-body .atoc a:hover{box-shadow:none}
.atoc--box{margin:0 0 32px;border:1px solid var(--line);background:var(--paper);padding:14px 16px}
.atoc--box summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:12px}
.atoc--box summary::-webkit-details-marker{display:none}
.atoc--box summary::after{content:"+";margin-left:auto;font:400 20px/1 var(--f-ui)}
.atoc--box[open] summary::after{content:"–"}
.atoc--box[open] summary{margin-bottom:12px}
.atoc-n{font:italic 400 15px/1 var(--f-text);color:var(--muted)}
.art-body h2[id],.art-body h3[id]{scroll-margin-top:calc(var(--hs) + 24px)}
@media (min-width:1440px){
  .apage.has-toc{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,48rem) minmax(0,1fr);column-gap:40px;padding-inline:24px}
  .apage.has-toc > .atoc--seite{display:block;grid-column:1;grid-row:1;justify-self:end;width:100%;max-width:240px;margin-top:44px;position:sticky;top:calc(var(--hs) + 28px);align-self:start;max-height:calc(100vh - var(--hs) - 56px);overflow:auto}
  .apage.has-toc > .amain{grid-column:2;grid-row:1;min-width:0}
  .apage.has-toc .col{max-width:none;margin:0;padding-inline:0}
  .apage.has-toc .atoc--box{display:none}
}
@media (min-width:1440px) and (max-width:1439px){
  .apage.has-toc > .arail{grid-column:2;grid-row:2;margin-inline:0;padding-inline:0}
}
@media (min-width:1440px){
  .apage.has-toc{column-gap:48px;padding-inline:32px}
  .apage.has-toc > .arail{grid-row:1}
}

/* Angemeldet: mitlaufende Teile unter der Adminleiste (32 px) halten. */
@media screen and (min-width:783px){
  body.admin-bar .apage.has-toc > .atoc--seite,body.admin-bar .legal-toc,body.admin-bar .rail-ad,body.admin-bar .apage > .arail > .rail-ad .adslot{top:calc(var(--hs) + 60px)}
  body.admin-bar .apage.has-toc > .atoc--seite,body.admin-bar .legal-toc{max-height:calc(100vh - var(--hs) - 88px)}
  body.admin-bar .art-body h2[id],body.admin-bar .art-body h3[id],body.admin-bar .legal-body h2{scroll-margin-top:calc(var(--hs) + 56px)}
}

/* Eigene FAQ: Gruppe .zuz-faq mit WordPress-Aufklapp-Blöcken (ersetzt die früheren Yoast-FAQ, läuft ohne Plugin). */
.art-body .zuz-faq{margin:1.6em 0;border-top:2px solid var(--ink)}
.art-body .zuz-faq details{margin:0;border-bottom:1px solid var(--line)}
.art-body .zuz-faq summary{position:relative;display:block;padding:16px 44px 16px 0;cursor:pointer;list-style:none;font-family:var(--f-display);font-weight:var(--w-display);font-size:20px;line-height:1.3}
.art-body .zuz-faq summary::-webkit-details-marker{display:none}
.art-body .zuz-faq summary::after{content:"+";position:absolute;right:6px;top:15px;font:400 24px/1 var(--f-ui);color:var(--muted)}
.art-body .zuz-faq details[open] summary::after{content:"–"}
.art-body .zuz-faq summary:hover{text-decoration:underline;text-decoration-color:var(--zest);text-decoration-thickness:3px;text-underline-offset:4px}
.art-body .zuz-faq details > :not(summary){margin-top:0}
.art-body .zuz-faq details > :last-child{margin-bottom:18px}
@media (max-width:760px){.art-body .zuz-faq summary{font-size:18.5px}}
/* Block-Tabellen im Tabellenrahmen des Plugins: WordPress-Zellrahmen durch die Linien der Seite ersetzen. */
.ztable .wp-block-table{margin:0;overflow:visible}
.ztable .wp-block-table thead,.ztable .wp-block-table tfoot{border:0}
.ztable .wp-block-table th,.ztable .wp-block-table td{border-width:0 0 1px;border-style:solid;border-color:var(--line)}
.ztable .wp-block-table figcaption{margin:8px 0 0;font:400 14px/1.4 var(--f-ui);color:var(--muted);text-align:left}

/* ==== Feinschliff 1.1.0 ==== */
/* Ruhigere Farben: etwas weicheres Schwarz, Newsletter-Band zart statt kräftig gelb, Bestwertung ohne schwarzen Block, dünnere Linkmarkierung. */
:root{--ink:#1C1A17}
.newsletter{background:var(--zest-wash);border-block:1px solid var(--line)}
.score--top{background:var(--zest);color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.art-body a{box-shadow:inset 0 -.22em 0 var(--zest)}
.art-body a:hover{box-shadow:inset 0 -1.1em 0 var(--zest)}

/* Abschnittsköpfe mit gelbem Punkt: größer, etwas mehr Luft davor. */
.sec-head h2,.beliebt-h{font-size:15px;letter-spacing:.14em;gap:16px}
.sec-head h2::before,.beliebt-h::before{width:12px;height:12px}
.sec-head{margin-bottom:36px}
.sec{padding-top:76px}
.sec[style*="padding-top:0"] > .sec-head:first-child{margin-top:20px}
@media (max-width:760px){.sec-head h2,.beliebt-h{font-size:13.5px}.sec{padding-top:52px}.sec-head{margin-bottom:26px}}

/* Titelbild im Artikel: Originalformat im Seitenraster (1,5:1 bis 1,85:1) statt Panorama über die volle Breite. */
.ahero--frei{height:auto;overflow:visible;background:none;padding:clamp(20px,3vw,40px) max(16px,var(--gutter-r)) 0 max(16px,var(--gutter-l))}
.ahero--frei img{position:static;display:block;width:min(1240px,100%,calc((100vh - var(--hs) - 140px) * var(--r)));height:auto;aspect-ratio:var(--r);margin:0 auto;object-fit:cover}
@media (max-width:900px){.ahero--frei{height:auto;padding:0}.ahero--frei img{width:100%}}
.shero-img{aspect-ratio:var(--r,4/5)}

/* Artikel einen Hauch breiter. */
@media (min-width:1420px){.apage{grid-template-columns:minmax(0,1fr) minmax(0,48rem) minmax(0,1fr)}}

/* Randspalte: Newsletter, „Gerade gern gelesen" und Tipp laufen gemeinsam mit, solange keine Anzeige dort steht.
   Wie weit sie beim Lesen nach oben rückt, rechnet zuz.js aus (Lesefortschritt). */
.rail-stick{display:flex;flex-direction:column;gap:44px}
.arail .rail-stick > .rail-nl{display:none}
@media (min-width:1420px){
  .apage > .arail{align-self:stretch}
  .apage > .arail > .rail-stick{position:sticky;top:calc(var(--hs) + 28px)}
  .apage > .arail--ad > .rail-stick{position:static}
  .apage > .arail > .rail-stick > .rail-nl{display:grid}
}
/* Mitlaufende Teile brauchen das Fenster als Scrollbereich: clip schneidet seitlich ab, ohne den Body
   selbst zum Scrollbereich zu machen (overflow-x:hidden täte das, sobald html ebenfalls overflow setzt). */
@supports (overflow:clip){body{overflow-x:clip}}
@media (min-width:1200px){.arch .arail .rail-stick > .rail-nl{display:grid}}
.rail-tipp{display:grid;gap:6px;margin-top:-28px;padding:16px 18px 18px;background:var(--zest-wash);color:inherit;text-decoration:none}
.rail-tipp b{font-family:var(--f-display);font-weight:var(--w-display);font-size:19px;line-height:1.2}
.rail-tipp-t{font-size:15px;line-height:1.45;color:var(--muted)}
.rail-tipp:hover b{text-decoration:underline;text-decoration-color:var(--zest);text-decoration-thickness:3px;text-underline-offset:4px}
.arail--arch .rail-tipp{display:none}

/* Autorenkasten mit Foto. */
.author .ava{flex:none;display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.author .ava img,.author img.ava{display:block;width:64px;height:64px;border-radius:50%;object-fit:cover}

/* Kommentare mit Profilbild; Gäste bekommen ein neutrales Symbol (lokal, ohne Gravatar). */
.cmt{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start}
.cmt-ava{display:block;width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--paper-2)}
.cmt-ava img,img.cmt-ava{display:block;width:44px;height:44px;border-radius:50%;object-fit:cover}
.cmt-b{min-width:0}

/* Newsletter-Popup: ruhiger Hintergrund (abgedunkelt, leicht unscharf und entsättigt, zur Mitte heller),
   Schließen-Knopf bleibt beim Scrollen im Fenster stehen, auf dem Handy kompakte Leiste. */
html .zuz-nlp-hg{background:radial-gradient(ellipse 70% 70% at 50% 50%, rgba(28,26,23,.50) 0%, rgba(28,26,23,.72) 60%, rgba(28,26,23,.86) 100%);-webkit-backdrop-filter:blur(7px) saturate(.7);backdrop-filter:blur(7px) saturate(.7)}
html .zuz-nlp-box{overflow:hidden;box-shadow:0 30px 90px rgba(10,9,8,.38),0 0 0 1px rgba(255,255,255,.06)}
html .zuz-nlp-in{max-height:calc(100vh - 48px);overflow:auto;overscroll-behavior:contain}
html .zuz-nlp-x{background:transparent}
html .zuz-nlp-x:hover{background:var(--zest-wash)}
@media (max-width:600px){
  html .zuz-nlp-hg{background:rgba(28,26,23,.62)}
  html .zuz-nlp-box,html .zuz-nlp-box--bild{max-height:min(78vh,560px)}
  html .zuz-nlp-in{max-height:min(78vh,560px);padding-top:28px}
  html .zuz-nlp-x{top:6px;right:6px;width:44px;height:44px;background:rgba(251,250,247,.96)}
  html .zuz-nlp-t{font-size:23px}
  html .zuz-nlp-klein{font-size:12px}
}

/* Startseiten-Aufmacher: Bild im eigenen Format, nichts abgeschnitten. Text links, Bild rechts; schmal untereinander. */
.lead.lead--frei{height:auto;overflow:visible;background:none;color:var(--ink);border-bottom:1px solid var(--line)}
.lead.lead--frei::after{content:none}
.lead--frei .lead-in{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:64px;align-items:stretch;padding-block:44px 56px}
.lead--frei .lead-txt{display:flex;flex-direction:column;align-items:flex-start;gap:18px;min-width:0}
.lead--frei h1{color:var(--ink);text-shadow:none;font-size:clamp(32px, 3.2vw, 50px);line-height:1.08}
.lead--frei p{color:var(--muted);text-shadow:none;font-size:clamp(17px, 1.3vw, 19.5px);line-height:1.5;max-width:34em}
.lead--frei .meta{margin-top:auto;padding-top:16px;width:100%;border-top:1px solid var(--line);color:var(--muted)}
.lead--frei .lead-img{--lh:clamp(360px, calc(100vh - var(--hb) - 150px), 620px);width:min(calc(var(--lh) * var(--r)), 820px, 54vw);aspect-ratio:var(--r);overflow:hidden;background:var(--paper-2)}
.lead--frei .lead-img picture{display:block;width:100%;height:100%}
.lead--frei .lead-img img{position:static;display:block;width:100%;height:100%;object-fit:cover}
.lead--frei:hover h1{text-decoration:underline;text-decoration-color:var(--zest);text-decoration-thickness:3px;text-underline-offset:6px}
@media (max-width:1023px){
  .lead--frei .lead-in{grid-template-columns:minmax(0,1fr);gap:24px;padding-block:28px 44px}
  .lead--frei .lead-img{order:-1;justify-self:center;width:min(100%, calc(72vh * var(--r)))}
  .lead--frei .meta{margin-top:4px}
}
@media (max-width:760px){
  .lead--frei .lead-in{padding-top:0;gap:20px}
  .lead--frei .lead-img{width:calc(100% + 2 * max(18px, var(--gutter-l)));max-width:none;margin-inline:calc(-1 * max(18px, var(--gutter-l)))}
  .lead--frei h1{font-size:clamp(28px, 7.4vw, 36px)}
}

/* Admin-Leiste (nur angemeldet): Imagify setzt Bilder in <picture> und verschiebt die Klasse dorthin. */
#wpadminbar #wp-admin-bar-site-name > .ab-item picture.site-icon img{width:20px;height:20px;max-width:20px;max-height:20px;min-width:20px;min-height:20px;border-radius:2px}
#wpadminbar .quicklinks li picture.blavatar img{width:16px;height:16px;margin:0 8px 2px -2px;border-radius:2px}

/* 1.1.1 – Startseiten-Aufmacher kompakter: fester Mittelweg statt Originalformat (oben und unten zusammen höchstens etwa 16 % weg), Bild höchstens 520 px hoch. */
.lead--frei .lead-in{padding-block:40px 48px}
.lead--frei .lead-img{--lh:clamp(340px, calc(100vh - var(--hb) - 170px), 520px)}

/* 1.1.1 – Themenseiten: ein Bildformat (4:5) für Kopf und Familien-Leiste. */
.fam-t .ratio{aspect-ratio:4/5}
@media (max-width:900px){.thead-img{aspect-ratio:4/5;width:min(100%, 440px)}}
@media (max-width:760px){.thead-img{width:auto;max-height:68vh}}

/* 1.1.2 – Rezeptkarte (Vorlage „Rezeptkarte"), Rezeptbox (automatisch in Cocktail-Artikeln), Empfehlungsbox und
   Familienhinweis: eine hellgelbe Karte im Zestenton, zarter als der Newsletter-Kasten. Aufbau wie die Manhattan-Karte. */
:root{--karte:#FDF8E7;--karte-rand:#EEE3C3;--karte-linie:#EAE0C2}
.art-body .zuz-rezeptkarte,.art-body .zuz-rezeptbox,.art-body .zuz-empfehlung{box-sizing:border-box;margin:2rem 0;padding:24px 28px;border:1px solid var(--karte-rand);border-radius:6px;background:var(--karte);color:var(--ink)}
.art-body .zuz-rezeptbox{padding:20px 26px 16px}
.art-body :is(.zuz-rezeptkarte,.zuz-rezeptbox,.zuz-empfehlung) :is(p,ul,ol,li){margin:0;font-family:var(--f-ui);font-size:17px;line-height:1.55}
.art-body :is(.zuz-rezeptkarte__label,.zuz-rezeptkarte__zwischentitel,.zuz-rezeptbox__label,.zuz-empfehlung__label){font:600 12px/1.4 var(--f-ui);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.art-body .zuz-rezeptbox .zuz-rezeptbox__label--zubereitung{margin-top:18px}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__titel{margin:4px 0 6px;font-family:var(--f-display);font-weight:var(--w-display);font-size:26px;line-height:1.2}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__meta{padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--karte-linie);font-size:14px;color:var(--muted)}
.art-body .zuz-rezeptkarte .wp-block-columns{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin:0}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__titel + :is(.wp-block-columns,.zuz-rezeptkarte__zwischentitel){margin-top:12px;padding-top:14px;border-top:1px solid var(--karte-linie)}
.art-body .zuz-rezeptkarte .wp-block-column{min-width:0;flex-basis:auto}
.art-body :is(.zuz-rezeptkarte__zutaten,.zuz-rezeptbox__zutaten,.zuz-empfehlung__liste){list-style:none;padding:0}
.art-body :is(.zuz-rezeptkarte__zutaten,.zuz-rezeptbox__zutaten) li{padding:7px 0;border-bottom:1px solid var(--karte-linie)}
.art-body .zuz-rezeptbox__zutaten li:last-child{border-bottom:0}
.art-body .zuz-rezeptbox .zuz-rezeptbox__menge{font-weight:600;margin-right:.3em}
.art-body .zuz-rezeptbox .zuz-rezeptbox__menge:empty{display:none}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__garnitur{padding-top:8px}
.art-body :is(.zuz-rezeptkarte__text,.zuz-rezeptbox__text){padding-top:2px}
.art-body :is(.zuz-rezeptkarte__schritte,.zuz-rezeptbox__schritte){margin:0;padding-left:1.3em}
.art-body :is(.zuz-rezeptkarte__schritte,.zuz-rezeptbox__schritte) li{padding:3px 0;list-style:decimal}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__tipp{margin-top:16px;color:var(--muted)}
.art-body .zuz-rezeptkarte .zuz-rezeptkarte__fuss{margin-top:16px;padding-top:12px;border-top:1px solid var(--karte-linie);color:var(--muted);font-size:15px}
.art-body .zuz-rezeptkarte.is-kompakt{margin:1.4rem 0 1.8rem;padding:18px 22px}
.art-body .zuz-rezeptkarte.is-kompakt .zuz-rezeptkarte__titel{font-size:22px}
.art-body .zuz-empfehlung{padding:20px 28px 8px}
.art-body .zuz-empfehlung .zuz-empfehlung__liste li{padding:14px 0;border-bottom:1px solid var(--karte-linie)}
.art-body .zuz-empfehlung .zuz-empfehlung__liste li:last-child{border-bottom:0}
.art-body .zuz-empfehlung .zuz-empfehlung__liste li > strong:first-child{display:block;margin-bottom:4px;font-family:var(--f-display);font-weight:var(--w-display);font-size:19px;line-height:1.3}
.art-body .zuz-familienhinweis{margin:0 0 1.8rem;padding:12px 16px;background:var(--karte);border-left:3px solid var(--zest);font-family:var(--f-ui);font-size:15px;line-height:1.5}
@media (min-width:900px){.art-body .zuz-rezeptkarte .wp-block-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}}
@media (max-width:600px){.art-body .zuz-rezeptkarte,.art-body .zuz-rezeptbox,.art-body .zuz-empfehlung,.art-body .zuz-rezeptkarte.is-kompakt{padding:18px}}

/* Werbekennzeichnung: Jeder Link mit rel="sponsored" im Artikel bekommt automatisch das Label „Anzeige". */
.art-body a[rel~="sponsored"]::after{content:"Anzeige";display:inline-block;margin-left:6px;padding:0 5px;font:600 10px/16px var(--f-ui);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:3px;vertical-align:2px}

/* 1.1.2 – Startseite: Zeile „Cocktail-Familie des Tages" in der Cocktail-Rubrik. */
.rowc--fam .kicker{color:var(--ink)}

/* 1.1.2 – Ausklappmenü mit zwei Spalten: Spalten so breit wie der längste Eintrag, nichts läuft über. */
.dd--cols ul{grid-template-columns:repeat(2,max-content);min-width:0;column-gap:0}
