/*
 * Hermes – Ghost-Theme für Carsten Hermes
 * Aufbau nach Entwurf 5 (mockup/entwurf-5.html), Farben aus der CI-Farbwelt (ci/farbwelt.html):
 * 60 % Papier und Weiß, 30 % Petrol, 10 % Sonne. Farbiger Text erst ab Petrol 600.
 */

/* Schriften (SIL Open Font License, selbst gehostet) */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url("../fonts/atkinson-hyperlegible-next-kursiv.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Atkinson Hyperlegible Mono"; src: url("../fonts/atkinson-hyperlegible-mono.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Serif 4"; src: url("../fonts/source-serif-4-kursiv.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
    /* Petrol-Skala; 700 ist die Markenfarbe und kommt aus Ghosts Akzentfarbe */
    --p50: #EEF9FA;
    --p100: #DDF1F4;
    --p200: #C2E3EA;
    --p300: #95C7D4;
    --p400: #63A3B7;
    --p600: #1C708E;
    --petrol: var(--ghost-accent-color, #005F7F);
    --p800: #01465F;
    --tiefsee: #043246;
    --tinte: #04202D;

    /* Begleiter */
    --papier: #FAF6EF;
    --sand: #F0EBDF;
    --hell: #FCFAF6;
    --weiss: #FFFFFF;
    --weich: #54676E;
    --text-dunkel: #2A3F47;
    --linie: #E2DCCF;
    --sonne: #F67E4E;
    --sonne-hover: #F9976F;
    --sonne-hell: #FDE3D6;
    --fehler: #AF2B25;

    /* Ghost-Einstellung „Schriften“ hat Vorrang */
    --titel: var(--gh-font-heading, "Atkinson Hyperlegible Next"), system-ui, -apple-system, "Segoe UI", sans-serif;
    --text: var(--gh-font-body, "Atkinson Hyperlegible Next"), system-ui, -apple-system, "Segoe UI", sans-serif;
    --mono: "Atkinson Hyperlegible Mono", ui-monospace, Menlo, monospace;
    --serif: "Source Serif 4", Georgia, serif;

    --breite: 1200px;
    --schatten: 0 1px 3px rgba(4, 32, 45, .1);
}

/* Grundlagen */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 17px/1.6 var(--text); -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; height: auto; }
[hidden] { display: none !important; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
:focus-visible { outline: 3px solid var(--petrol); outline-offset: 3px; }
.sprungmarke { position: absolute; left: 16px; top: -100px; z-index: 50; padding: 10px 16px; border-radius: 4px; background: var(--tinte); color: var(--weiss); }
.sprungmarke:focus { top: 16px; }
.huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; }
.huelle-schmal { max-width: 760px; margin: 0 auto; padding: 0 20px; }
.mittig { text-align: center; }

/* Knöpfe: Petrol, fast eckig, Monoschrift in Versalien */
.knopf, .kg-product-card-button, .kg-product-card-btn-accent { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 30px; border: 2px solid var(--petrol); border-radius: 4px; background: var(--petrol); color: var(--weiss); font: 700 14px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; }
.knopf:hover, .kg-product-card-button:hover { background: var(--p800); border-color: var(--p800); }
.knopf--rahmen { background: var(--weiss); border-color: var(--tinte); color: var(--tinte); }
.knopf--rahmen:hover { background: var(--tinte); border-color: var(--tinte); color: var(--weiss); }
.knopf--klein { min-height: 44px; padding: 10px 18px; font-size: 13px; }
.knopfreihe { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 32px; }
.textlink { font-weight: 700; text-underline-offset: 4px; }

/* Abschnitte: mittiger Kopf, kleine graue Zeile darüber */
.kopfzeile { max-width: 700px; margin: 0 auto 44px; text-align: center; }
.vorzeile { margin-bottom: 10px; color: var(--weich); font-size: 16px; }
.h2 { font: 800 clamp(30px, 3.4vw, 42px)/1.15 var(--titel); letter-spacing: -0.015em; text-wrap: balance; }
.unterzeile { margin-top: 12px; color: var(--weich); }
.abschnitt { padding-block: clamp(64px, 8vw, 104px); }
.bg-sand { background: var(--sand); }
.bg-hell { background: var(--hell); }
.bg-weiss { background: var(--weiss); }
.raster-fuss { margin-top: 40px; }

/* Bausteine: Karten aus dem Ghost-Editor. Ghosts Produkt-CSS ist abgeschaltet (card_assets), jeder Abschnitt gestaltet sie selbst. */
.baustein .kg-card { margin: 0; }
.baustein > :not(.kg-card) { display: none; }
.kg-product-card-title { font: inherit; }
.kg-product-card-description p + p { margin-top: 8px; }

/* Kopf: bleibt oben, verschwindet beim Runterscrollen */
.kopf { position: sticky; top: 0; z-index: 20; background: var(--weiss); border-bottom: 1px solid var(--linie); transition: transform .3s ease; }
.kopf.ist-weg { transform: translateY(-100%); }
.kopf .huelle { display: flex; align-items: center; gap: 28px; height: 72px; }
.marke { display: flex; align-items: center; gap: 10px; font: 800 21px/1 var(--titel); letter-spacing: -0.01em; text-decoration: none; white-space: nowrap; }
.marke img { width: auto; max-height: 40px; }
.signet { flex: none; width: 30px; height: 30px; color: var(--petrol); }
.nav .menue { display: flex; gap: 22px; margin: 0; padding: 0; list-style: none; }
.nav a { font: 700 13px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.nav a:hover, .nav a.ist-aktiv { color: var(--petrol); }
.nav-extra { display: none; }
.kopf-rechts { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.kopf-symbol, .menueknopf { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 4px; background: none; cursor: pointer; }
.kopf-symbol:hover, .menueknopf:hover { background: var(--papier); }
.kopf-symbol svg, .menueknopf svg { width: 24px; height: 24px; }
.kopf-telefon { position: relative; display: flex; align-items: center; gap: 8px; min-width: 44px; height: 44px; padding-inline: 10px; border-radius: 4px; font: 700 13px/1 var(--mono); white-space: nowrap; text-decoration: none; }
.kopf-telefon:hover { background: var(--papier); color: var(--petrol); }
.kopf-telefon svg { flex: none; width: 22px; height: 22px; }
.kopf-telefon span { position: absolute; top: calc(100% + 6px); left: 50%; padding: 9px 12px; border-radius: 4px; background: var(--tinte); color: #fff; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: opacity .15s; }
.kopf-telefon:hover span, .kopf-telefon:focus-visible span { opacity: 1; }
@media (min-width: 1560px) {
    .kopf .huelle { max-width: 1340px; }
    .kopf-telefon span { position: static; padding: 0; background: none; color: inherit; opacity: 1; transform: none; }
}
.menueknopf { display: none; }

/* Startbereich: Text links, Buch auf Petrol-Bögen rechts */
.held { position: relative; overflow: hidden; }
.held .huelle { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; min-height: 600px; padding-top: 56px; }
.held-links { align-self: center; padding-bottom: 56px; }
.held-vorzeile { color: var(--weich); font-weight: 600; }
.h1 { margin-top: 14px; font: 800 clamp(40px, 5vw, 62px)/1.06 var(--titel); letter-spacing: -0.025em; text-wrap: balance; }
/* Textmarker zieht sich beim Laden über das Wort */
.markiert { background: linear-gradient(var(--sonne), var(--sonne)) no-repeat 0 92% / 0 30%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .8s .4s cubic-bezier(.2, .7, .2, 1); }
.markiert.ist-da { background-size: 100% 30%; }
.held--seite .h1 { margin-top: 0; font-size: clamp(34px, 4vw, 50px); }
.held-text { max-width: 46ch; margin-top: 20px; font-size: 19px; color: var(--text-dunkel); }
.zahlen { display: flex; flex-wrap: wrap; gap: 28px 40px; margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--linie); }
.zahlen .kg-product-card-title { font: 800 30px/1 var(--titel); letter-spacing: -0.02em; }
.zahlen .kg-product-card-description { font-size: 14px; color: var(--weich); }

.buehne { position: relative; align-self: end; width: 100%; height: 580px; }
.buehne::before, .buehne::after { content: ""; position: absolute; border-radius: 50%; animation: auftritt 1s ease-out both; }
.buehne::before { left: -40px; top: -110px; width: 1280px; height: 1280px; background: var(--p100); }
.buehne::after { left: 60px; top: -10px; width: 1080px; height: 1080px; background: var(--petrol); }
@keyframes auftritt { from { opacity: 0; transform: translateY(14px); } }
@keyframes aufstieg { from { opacity: 0; transform: translateY(70px); } }
.buch3d { position: absolute; z-index: 1; left: calc(50% - 130px); top: 48px; display: block; width: 280px; perspective: 1600px; animation: aufstieg 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.buch-koerper { position: relative; display: block; transform-style: preserve-3d; transform: rotateY(-28deg) rotateX(5deg); transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.buch3d:hover .buch-koerper { transform: rotateY(-12deg) rotateX(3deg); }
.buch-koerper img { width: 100%; border-radius: 2px 5px 5px 2px; }
/* Falz am Buchrücken und ein Hauch Glanz */
.buch-koerper::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 2px 5px 5px 2px; background: linear-gradient(90deg, rgba(0, 0, 0, .35) 0, rgba(255, 255, 255, .22) 2.5%, rgba(0, 0, 0, .12) 5%, transparent 9%, transparent 70%, rgba(255, 255, 255, .08)); }
/* Seitenschnitt: steht rechts senkrecht nach hinten */
.buch-koerper::after { content: ""; position: absolute; top: 4px; bottom: 4px; left: calc(100% - 3px); width: 40px; transform-origin: left center; transform: rotateY(90deg); background: repeating-linear-gradient(90deg, #FBF8F2 0 2px, #E4DED2 2px 3px); }
.buch-schatten { position: absolute; left: 4%; right: -6%; bottom: -34px; height: 40px; border-radius: 50%; background: radial-gradient(closest-side, rgba(1, 20, 30, .55), transparent); filter: blur(4px); }

/* Plaketten am Buch: Karte mit Bild = rundes Foto, ohne Bild = Buch-Symbol */
.plaketten .kg-product-card { position: absolute; z-index: 2; animation: auftritt .7s .4s cubic-bezier(.2, .7, .2, 1) both; }
.plaketten .kg-product-card:nth-of-type(1) { top: 12%; left: -40px; }
.plaketten .kg-product-card:nth-of-type(2) { top: 72%; right: -56px; animation-delay: .6s; }
.plaketten .kg-product-card:nth-of-type(n+3) { display: none; }
.plaketten .kg-product-card-container { display: grid; grid-template-columns: auto auto; column-gap: 10px; align-items: center; padding: 10px 16px 10px 10px; border-radius: 14px; background: var(--weiss); box-shadow: 0 10px 28px -10px rgba(4, 32, 45, .3); font-size: 14px; line-height: 1.25; }
.plaketten .kg-product-card-image { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.plaketten .kg-product-card-container:not(:has(img))::before { content: ""; grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; background: var(--petrol) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.5C10 5 7.5 4.5 4 4.5v14c3.5 0 6 .5 8 2 2-1.500 4.500-2 8-2v-14c-3.500 0-6 .5-8 2zM12 6.5v14'/%3E%3C/svg%3E") center / 22px no-repeat; }
.plaketten .kg-product-card-title { align-self: end; font-weight: 800; font-size: 15px; }
.plaketten .kg-product-card-description { align-self: start; }

/* Zu Gast bei */
/* Gremien: Teil des Briefs, die Logos einfarbig dunkel, darunter das Amt. Die ganze Spalte ist der Link */
.gremien { max-width: 900px; margin: 40px auto 0; padding-top: 36px; border-top: 2px dotted var(--p300); }
.gremien-kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 32px; margin-bottom: 28px; }
.gremien-kopf h2 { font: 800 24px/1.2 var(--titel); }
.gremien-reihe { display: grid; grid-template-columns: repeat(5, 1fr); }
.gremien-reihe .kg-product-card-container { position: relative; height: 100%; padding: 2px 16px 18px; border-left: 1px solid var(--linie); }
.gremien-reihe .kg-card:first-child .kg-product-card-container { padding-left: 0; border-left: 0; }
.gremien-reihe .kg-card:last-child .kg-product-card-container { padding-right: 0; }
.gremien-reihe .kg-product-card-image { display: block; width: 100%; height: 56px; object-fit: contain; object-position: left center; filter: brightness(0); opacity: .8; transition: opacity .2s ease; }
.gremien-reihe .kg-product-card-container:hover .kg-product-card-image { opacity: 1; }
.gremien-reihe .kg-product-card-title-container, .gremien-reihe .kg-product-card-button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.gremien-reihe .kg-product-card-description { margin-top: 16px; color: var(--weich); font-size: 14.5px; line-height: 1.45; transition: color .2s ease; }
.gremien-reihe .kg-product-card-container:hover .kg-product-card-description { color: var(--tinte); }
.gremien-reihe .kg-product-card-button, .gremien-reihe .kg-product-card-button:hover { position: absolute; inset: 0; min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.gremien-reihe .kg-product-card-button::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--petrol); transform: scaleX(0); transform-origin: left; transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
.gremien-reihe .kg-card:first-child .kg-product-card-button::after { left: 0; }
.gremien-reihe .kg-card:last-child .kg-product-card-button::after { right: 0; }
.gremien-reihe .kg-product-card-button:hover::after, .gremien-reihe .kg-product-card-button:focus-visible::after { transform: scaleX(1); }

/* Hervorgehobenes Angebot: Bild links, Text mittig rechts */
.angebot .kg-product-card-container { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto auto auto 1fr; row-gap: 14px; overflow: hidden; max-width: 1080px; margin: 0 auto; border-radius: 16px; background: var(--weiss); text-align: center; }
.angebot .kg-product-card-image { grid-column: 1; grid-row: 1 / -1; width: 100%; height: 100%; min-height: 340px; object-fit: cover; }
.angebot .kg-product-card-title-container { grid-column: 2; grid-row: 2; padding: 40px 40px 0; }
.angebot .kg-product-card-title { font: 800 28px/1.2 var(--titel); letter-spacing: -0.01em; text-wrap: balance; }
.angebot .kg-product-card-description { grid-column: 2; grid-row: 3; padding-inline: 40px; color: var(--weich); }
.angebot .kg-product-card-button { grid-column: 2; grid-row: 4; justify-self: center; margin-bottom: 40px; }

/* Einstieg nach Rolle: von hell nach Petrol, wie der Weg von der Station zur Leitung */
.rollen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.rollen .kg-product-card { --farbe: var(--p200); --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23005F7F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 26h9l4-10 6 20 5-14 3 4h13'/%3E%3C/svg%3E"); }
.rollen .kg-product-card:nth-of-type(2) { --farbe: var(--p400); --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23005F7F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='17' cy='15' r='6'/%3E%3Ccircle cx='33' cy='19' r='5'/%3E%3Cpath d='M6 40c0-7 5-12 11-12s11 5 11 12M27 40c0-5 3-9 7-9s8 4 8 9'/%3E%3C/svg%3E"); }
.rollen .kg-product-card:nth-of-type(3) { --farbe: var(--petrol); --auf: var(--weiss); --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23005F7F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='10' y='8' width='28' height='34' rx='3'/%3E%3Cpath d='M18 8V5h12v3M16 20h16M16 27h16M16 34h9'/%3E%3C/svg%3E"); }
.rollen .kg-product-card-container { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 15px; background: var(--weiss); box-shadow: var(--schatten); text-align: center; }
.rollen .kg-product-card-image { display: none; }
.rollen .kg-product-card-title-container { position: relative; padding: 18px 20px 46px; background: var(--farbe); color: var(--auf, var(--tinte)); }
.rollen .kg-product-card-title-container::after { content: ""; position: absolute; left: -10%; right: -10%; bottom: -36px; height: 60px; border-radius: 50%; background: var(--weiss); }
.rollen .kg-product-card-title { font: 800 26px/1.2 var(--titel); letter-spacing: -0.01em; }
.rollen .kg-product-card-description { flex: 1; padding: 0 22px; }
.rollen .kg-product-card-description::before { content: ""; position: relative; z-index: 1; display: block; width: 76px; height: 76px; margin: -38px auto 14px; border-radius: 50%; background: var(--weiss) var(--symbol) center / 42px no-repeat; }
.rollen .kg-product-card-description p:first-child { padding-bottom: 16px; border-bottom: 2px dotted var(--linie); font: 500 15px/1.5 var(--mono); }
.rollen .kg-product-card-description p + p { margin: 18px 0 22px; }
.schlagworte { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.schlagworte span { padding: 4px 12px; border-radius: 100px; background: color-mix(in srgb, var(--farbe) 28%, transparent); font-size: 14px; }
.rollen .kg-product-card-button { margin: auto 22px 22px; border-color: var(--farbe); border-radius: 8px; background: var(--farbe); color: var(--auf, var(--tinte)); }
.rollen .kg-product-card-button:hover { border-color: var(--farbe); background: var(--farbe); filter: brightness(.95); }

/* Fünf Schritte: Illustration oben bündig, letzter Schritt ist das Ziel */
.schritte { display: grid; grid-template-columns: repeat(5, 1fr); gap: 22px; max-width: 1100px; margin: 0 auto; counter-reset: schritt; }
.schritte .kg-product-card { position: relative; counter-increment: schritt; }
.schritte .kg-product-card + .kg-product-card::before { content: "→"; position: absolute; left: -19px; top: 50%; transform: translateY(-50%); color: var(--p300); font-size: 18px; }
.schritte .kg-product-card-container { height: 100%; overflow: hidden; padding-bottom: 26px; border-radius: 12px; background: var(--weiss); box-shadow: var(--schatten); text-align: center; }
.schritte .kg-product-card-image { width: 100%; aspect-ratio: 1; object-fit: cover; }
.schritte .kg-product-card-title-container { margin-top: 18px; padding-inline: 16px; }
.schritte .kg-product-card-title-container::before { content: counter(schritt); display: block; font: 500 40px/1 var(--titel); color: var(--p300); }
.schritte .kg-product-card-title { margin-top: 12px; font: 800 19px/1.25 var(--titel); }
.schritte .kg-product-card-description { margin-top: 8px; padding-inline: 16px; font-size: 15px; line-height: 1.45; color: var(--weich); }
.schritte .kg-product-card:last-of-type .kg-product-card-container { background: var(--petrol); color: var(--weiss); }
.schritte .kg-product-card:last-of-type .kg-product-card-title-container::before { color: var(--sonne-hover); }
.schritte .kg-product-card:last-of-type .kg-product-card-description { color: var(--p100); }

/* Brief */
.brief { display: grid; grid-template-columns: 200px 1fr; gap: 36px; max-width: 900px; margin: 0 auto; padding-top: 44px; border-top: 2px dotted var(--p300); }
.brief img { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; }
.brief h2 { font: 800 24px/1.2 var(--titel); }
.brief-text { margin-top: 12px; font: 400 19px/1.65 var(--serif); }
.brief-text p + p { margin-top: 12px; }
.unterschrift { margin-top: 16px; font: italic 400 24px/1 var(--serif); color: var(--petrol); }
.brief-fuss { max-width: 900px; margin: 40px auto 0; padding-top: 32px; border-top: 2px dotted var(--p300); text-align: center; }

/* So arbeite ich mit Ihnen: Symbol, Überschrift, Text, Bild, Link */
.leistungen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.leistungen .kg-product-card { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2304202D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='13' y='4' width='14' height='20' rx='7'/%3E%3Cpath d='M7 19a13 13 0 0 0 26 0M20 32v5M13 37h14'/%3E%3C/svg%3E"); }
.leistungen .kg-product-card:nth-of-type(2) { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2304202D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='6' width='32' height='22' rx='2'/%3E%3Cpath d='M12 34h16M20 28v6M10 14h12M10 20h8'/%3E%3C/svg%3E"); }
.leistungen .kg-product-card:nth-of-type(3) { --symbol: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%2304202D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9a3 3 0 0 1 3-3h17a3 3 0 0 1 3 3v10a3 3 0 0 1-3 3H14l-6 5v-5a3 3 0 0 1-3-3z'/%3E%3Cpath d='M32 15h1a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3v4l-5-4H19'/%3E%3C/svg%3E"); }
.leistungen .kg-product-card-container { display: flex; flex-direction: column; align-items: center; height: 100%; text-align: center; }
.leistungen .kg-product-card-container::before { content: ""; order: 0; width: 40px; height: 40px; background: var(--symbol) center / contain no-repeat; }
.leistungen .kg-product-card-title-container { order: 1; margin-top: 12px; }
.leistungen .kg-product-card-title { font: 800 21px/1.2 var(--titel); }
.leistungen .kg-product-card-description { order: 2; max-width: 30ch; margin-top: 6px; color: var(--weich); }
.leistungen .kg-product-card-image { order: 3; width: 100%; aspect-ratio: 4 / 3; margin-top: auto; border-radius: 16px; object-fit: cover; }
.leistungen .kg-product-card-button { order: 4; min-height: 0; margin-top: 14px; padding: 0; border: 0; background: none; color: inherit; font: 700 17px/1.6 var(--text); letter-spacing: 0; text-transform: none; text-decoration: underline; text-underline-offset: 4px; }
.leistungen .kg-product-card-button:hover { background: none; color: var(--petrol); }
.leistungen .kg-product-card-description { margin-bottom: 22px; }

/* Was sich ändert: von Papier zu Petrol */
.wandel { display: grid; grid-template-columns: repeat(3, 1fr); overflow: hidden; max-width: 1080px; margin: 0 auto; border-radius: 15px; counter-reset: wandel; }
.wandel .kg-product-card { counter-increment: wandel; background: var(--papier); }
.wandel .kg-product-card:nth-of-type(2) { background: var(--p100); }
.wandel .kg-product-card:nth-of-type(3) { background: var(--petrol); color: var(--weiss); }
.wandel .kg-product-card-container { display: flex; flex-direction: column; height: 100%; padding: 40px 34px; }
.wandel .kg-product-card-container::before { content: counter(wandel, decimal-leading-zero); font: 800 44px/1 var(--titel); color: var(--p300); }
.wandel .kg-product-card:nth-of-type(3) .kg-product-card-container::before { color: var(--sonne-hover); }
.wandel .kg-product-card-image { display: none; }
.wandel .kg-product-card-title { margin-top: 10px; font: 800 25px/1.2 var(--titel); letter-spacing: -0.01em; }
.wandel .kg-product-card-description { display: flex; flex: 1; flex-direction: column; margin-top: 10px; color: var(--weich); }
.wandel .kg-product-card:nth-of-type(3) .kg-product-card-description { color: var(--p100); }
.wandel .kg-product-card-description p + p { margin-top: auto; padding-top: 28px; font-weight: 600; }

/* Beiträge */
.raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.beitrag { display: flex; flex-direction: column; overflow: hidden; border-radius: 15px; background: var(--weiss); box-shadow: var(--schatten); }
.beitrag-bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--p100); container-type: inline-size; text-decoration: none; }
.beitrag-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s cubic-bezier(.2, .7, .2, 1); }
.beitrag:hover .beitrag-bild img { transform: scale(1.03); }
/* Ohne Beitragsbild: Themenname groß auf Petrol hell */
.beitrag-wort { position: absolute; left: 16px; bottom: 10px; color: var(--p300); font: 800 min(4.5rem, calc((100cqw - 32px) / (var(--len, 6) * .56)))/1 var(--titel); letter-spacing: -0.03em; white-space: nowrap; }
.beitrag-text { padding: 20px 24px 24px; }
.beitrag h3 { margin-top: 10px; font: 800 21px/1.25 var(--titel); letter-spacing: -0.005em; }
.beitrag h3 a { text-decoration: none; }
.beitrag h3 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.beitrag-meta { margin-top: 8px; font-size: 14px; color: var(--weich); }
/* Ghost liefert die Lesezeit leer, wenn der Beitrag für Gäste gesperrt ist: dann auch kein Komma */
.lesezeit::before { content: ", "; }
.lesezeit:empty { display: none; }
.kennzeichen { display: inline-block; padding: 3px 9px; border-radius: 4px; background: var(--p100); font: 700 11px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.k-folge { background: var(--petrol); color: var(--weiss); }
.k-sprechstunde { background: var(--sonne-hell); }
.k-mitglied { background: var(--tiefsee); color: var(--weiss); }

/* Podcast und Buch */
.paar { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.karte { overflow: hidden; border-radius: 15px; background: var(--weiss); box-shadow: var(--schatten); }
.karte-bild { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.karte-inhalt { padding: 28px 30px 32px; }
.karte h3 { font: 800 26px/1.2 var(--titel); letter-spacing: -0.01em; }
.karte-inhalt > p { margin-top: 8px; color: var(--weich); }
.karte-inhalt > .knopf { margin-top: 22px; }
.folgen ul { margin: 18px 0 0; padding: 0; list-style: none; }
.folgen a { display: block; padding: 12px 0; border-top: 1px solid var(--linie); font-weight: 700; text-decoration: none; }
.folgen a:hover { text-decoration: underline; text-underline-offset: 3px; }
.buch-karte { display: grid; grid-template-columns: 1fr 180px; gap: 24px; align-items: center; padding: 30px; background: var(--p100); }
.buch-karte img { width: 180px; border-radius: 4px; box-shadow: 0 18px 30px -14px rgba(0, 0, 0, .45); }
.buch-karte .karte-inhalt { padding: 0; }

/* Leitfaden */
.leitfaden { position: relative; max-width: 1080px; margin: 0 auto; padding: 64px clamp(24px, 6vw, 80px) 52px; border-radius: 16px; background: var(--weiss); text-align: center; }
.siegel { display: grid; place-items: center; width: 96px; height: 96px; margin: 0 auto 22px; border-radius: 50%; background: var(--sonne); box-shadow: inset 0 0 0 5px var(--weiss), inset 0 0 0 7px var(--tinte); font: 700 13px/1.15 var(--mono); text-transform: uppercase; letter-spacing: .04em; transform: rotate(-8deg); }
.leitfaden .h2 { max-width: 20ch; margin: 0 auto; }
.leitfaden > p:not(.siegel) { max-width: 54ch; margin: 14px auto 0; color: var(--weich); }
.leitfaden > .leitfaden-ok { color: var(--tinte); font-weight: 700; }
.anmeldung { max-width: 700px; margin: 28px auto 0; }
.anmeldung-feld { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.anmeldung input { flex: 1 1 220px; width: 0; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid var(--tinte); border-radius: 4px; background: var(--weiss); color: var(--tinte); font: inherit; }
.anmeldung-ok, .anmeldung-fehler { display: none; margin-top: 14px; font-weight: 700; }
.anmeldung.success .anmeldung-feld { display: none; }
.anmeldung.success .anmeldung-ok { display: block; }
.anmeldung.error .anmeldung-fehler { display: block; color: var(--fehler); }
.anmeldung.loading button { opacity: .6; pointer-events: none; }
.leitfaden > .kleingedruckt { font-size: 14px; }

/* Termine: fettes Datum links, Titel und Ort in der Mitte, Knopf rechts */
.termine { max-width: 900px; margin: 0 auto; padding: 8px 32px; border-radius: 15px; background: var(--weiss); }
.termine .kg-product-card-container { display: grid; grid-template-columns: 150px 1fr auto; column-gap: 20px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--linie); color: var(--weich); font-size: 15px; }
.termine .kg-product-card:last-of-type .kg-product-card-container { border-bottom: 0; }
.termine .kg-product-card-image { display: none; }
.termine .kg-product-card-description, .termine .kg-product-card-description p { display: contents; }
.termine strong { grid-column: 1; grid-row: 1 / 3; color: var(--tinte); font: 700 15px/1.3 var(--mono); text-transform: uppercase; }
.termine .kg-product-card-title-container { grid-column: 2; grid-row: 1; color: var(--tinte); }
.termine .kg-product-card-title { font-weight: 700; font-size: 18px; }
.termine .kg-product-card-button { grid-column: 3; grid-row: 1 / 3; min-height: 40px; padding: 8px 14px; border-color: var(--tinte); background: var(--weiss); color: var(--tinte); font-size: 12px; }
.termine .kg-product-card-button:hover { border-color: var(--tinte); background: var(--tinte); color: var(--weiss); }

/* Stimmen */
.stimmen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 20px; }
.stimmen .kg-product-card-container { display: flex; flex-direction: column; height: 100%; padding: 40px 30px 32px; border-radius: 15px; background: var(--weiss); }
.stimmen .kg-product-card-container::before { content: "“"; display: block; height: 44px; overflow: hidden; font: 800 72px/1 var(--serif); color: var(--sonne); }
.stimmen .kg-product-card-image { display: none; }
.stimmen .kg-product-card-description { order: 1; font-size: 18px; font-weight: 600; line-height: 1.5; }
.stimmen .kg-product-card-title-container { order: 2; margin-top: auto; padding-top: 18px; }
.stimmen .kg-product-card-title { font: 500 14px/1.4 var(--mono); text-transform: uppercase; }

/* Häufige Fragen: Ghosts Toggle-Karten */
.fragen { max-width: 860px; margin: 0 auto; border-top: 1px solid var(--linie); }
.fragen .kg-toggle-card { margin: 0; padding: 0; border-bottom: 1px solid var(--linie); border-radius: 0; background: none; box-shadow: none; }
.fragen .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 24px 0; cursor: pointer; }
.fragen .kg-toggle-heading-text { margin: 0; font: 800 19px/1.35 var(--titel); }
.fragen .kg-toggle-card-icon { flex: none; width: 24px; height: 24px; margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.fragen .kg-toggle-card-icon svg { display: none; }
.fragen .kg-toggle-card-icon::after { content: "+"; display: block; font: 400 30px/24px var(--text); transition: transform .2s; }
.fragen .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon::after { transform: rotate(45deg); }
.fragen .kg-toggle-card .kg-toggle-content { color: var(--text-dunkel); font-size: inherit; line-height: inherit; }
.fragen .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-content { padding-bottom: 24px; }
.fragen .kg-toggle-card .kg-toggle-content p { max-width: 70ch; margin: 0; }

/* Artikel und Seiten */
.artikel-kopf { padding-top: clamp(40px, 6vw, 72px); }
.artikel-titel, .themenkopf-titel, .inhalt { overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; }
.artikel-titel { margin-top: 14px; font: 800 clamp(34px, 4.6vw, 56px)/1.08 var(--titel); letter-spacing: -0.022em; text-wrap: balance; }
.artikel-unter { max-width: 60ch; margin-top: 18px; font: 400 22px/1.5 var(--serif); color: var(--text-dunkel); }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; font: 500 14px/1.4 var(--mono); color: var(--weich); }
.artikel-thema { padding: 4px 12px; border-radius: 100px; background: var(--p100); color: var(--tinte); font-weight: 700; text-decoration: none; }
.artikel-thema:hover { background: var(--petrol); color: var(--weiss); }
.artikel-meta .lesezeit::before { content: ""; }
.artikel-meta .lesezeit:not(:empty)::before { content: "·  "; }
.artikel-kopf .kennzeichen { margin-top: 18px; }
.lesefortschritt { position: fixed; left: 0; right: 0; top: 0; z-index: 30; height: 3px; pointer-events: none; }
.lesefortschritt > div { height: 100%; background: var(--sonne); transform: scaleX(0); transform-origin: left; }
.artikel-bild { max-width: var(--breite); margin: 40px auto 0; padding-inline: 20px; }
.artikel-bild img { width: 100%; max-height: 640px; border-radius: 16px; object-fit: cover; }
.artikel-bild figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--weich); }

/* Inhalt aus dem Ghost-Editor */
.artikel-rumpf { position: relative; }
.inhaltsverzeichnis { position: sticky; top: 110px; float: left; width: 200px; margin: 48px 0 0 calc(50% - 360px - 232px); font-size: 14px; }
.inhaltsverzeichnis > p { margin-bottom: 10px; font: 700 12px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--weich); }
.inhaltsverzeichnis ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--linie); }
.inhaltsverzeichnis a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--weich); text-decoration: none; line-height: 1.35; }
.inhaltsverzeichnis a:hover { color: var(--tinte); }
.inhaltsverzeichnis a.ist-aktiv { border-left-color: var(--petrol); color: var(--tinte); font-weight: 700; }
@media (max-width: 1240px) { .inhaltsverzeichnis { display: none; } }
.inhalt { display: grid; grid-template-columns: [full-start] minmax(20px, 1fr) [wide-start] minmax(0, 160px) [main-start] min(720px, calc(100% - 40px)) [main-end] minmax(0, 160px) [wide-end] minmax(20px, 1fr) [full-end]; margin-top: 40px; padding-bottom: 56px; font-size: 19px; line-height: 1.7; }
.inhalt > * { grid-column: main-start / main-end; }
.inhalt > .kg-width-wide { grid-column: wide-start / wide-end; }
.inhalt > .kg-width-full { grid-column: full-start / full-end; }
.inhalt > * + * { margin-top: 1.1em; }
.inhalt h2 { margin-top: 1.8em; font: 800 32px/1.2 var(--titel); letter-spacing: -0.01em; }
.inhalt h3 { margin-top: 1.5em; font: 800 24px/1.25 var(--titel); }
.inhalt h2 + *, .inhalt h3 + * { margin-top: .6em; }
.inhalt a:not(.knopf, .kg-btn, .kg-product-card-button, .kg-bookmark-container) { color: var(--p600); text-underline-offset: 3px; }
.inhalt ul, .inhalt ol { padding-left: 1.3em; }
.inhalt li + li { margin-top: .4em; }
.page-ueber-mich .inhalt ul:has(> li > strong:first-child) { padding: 0; list-style: none; border-top: 1px solid var(--linie); }
.page-ueber-mich .inhalt ul:has(> li > strong:first-child) > li { display: grid; grid-template-columns: 6em 1fr; gap: 16px; margin: 0; padding: 13px 0; border-bottom: 1px solid var(--linie); }
.page-ueber-mich .inhalt li > strong:first-child { color: var(--petrol); font-weight: 800; font-variant-numeric: tabular-nums; }
.vita { border-bottom: 1px solid var(--linie); }
.inhalt > :not(.vita) + .vita { border-top: 1px solid var(--linie); }
.inhalt > .vita + .vita { margin-top: 0; }
.vita summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; font: 800 19px/1.35 var(--titel); cursor: pointer; list-style: none; }
.vita summary::-webkit-details-marker { display: none; }
.vita summary::after { content: "+"; font: 400 30px/24px var(--text); transition: transform .2s; }
.vita[open] summary::after { transform: rotate(45deg); }
.vita > * + * { margin-top: 1em; }
.vita > :last-child { margin-bottom: 28px; }
.vita > p > strong:only-child { display: block; margin-top: .6em; font: 800 19px/1.3 var(--titel); }
.inhalt blockquote:not([class]) { margin-inline: 0; padding-left: 24px; border-left: 4px solid var(--sonne); font: italic 400 23px/1.45 var(--serif); }
.inhalt .kg-callout-card { border-radius: 12px; }
.inhalt .kg-callout-card-blue, .inhalt .kg-callout-card-grey { background: var(--p100); }
.inhalt .kg-callout-card-yellow { background: var(--sonne-hell); }
.inhalt .kg-bookmark-container { border: 1px solid var(--linie); border-radius: 12px; background: var(--weiss); box-shadow: none; }
.inhalt .kg-bookmark-title { font-weight: 800; }
.inhalt strong { font-weight: 800; }
.inhalt hr { height: 1px; margin-block: 2.5em; border: 0; background: var(--linie); }
.inhalt figcaption { margin-top: 10px; font-size: 14px; text-align: center; color: var(--weich); }
.inhalt .kg-image-card:not(.kg-width-full) img { border-radius: 16px; }
.gh-content .kg-button-card a.kg-btn { min-height: 52px; padding: 14px 30px; border-radius: 4px; font: 700 14px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; }
.inhalt .kg-toggle-card { background: var(--weiss); }
.inhalt .kg-callout-card { border-radius: 12px; }
.inhalt .kg-product-card-container { display: grid; gap: 12px; padding: 24px; border-radius: 15px; background: var(--weiss); box-shadow: var(--schatten); }
.inhalt .kg-product-card-title { font: 800 22px/1.25 var(--titel); }
.inhalt .kg-product-card-image { border-radius: 8px; }
.inhalt .kg-product-card-button { justify-self: start; }
.inhalt .kg-product-card-rating { display: flex; gap: 2px; }
.inhalt .kg-product-card-rating-star { width: 20px; height: 20px; opacity: .2; }
.inhalt .kg-product-card-rating-star svg { width: 100%; height: 100%; fill: currentColor; }
.inhalt .kg-product-card-rating-active { opacity: 1; }
.kommentare { padding-bottom: 64px; }
.inhalt > .sperre { position: relative; grid-column: wide-start / wide-end; margin-top: 0; padding-top: 140px; }
.sperre-schleier { position: absolute; left: 0; right: 0; top: -180px; height: 320px; background: linear-gradient(to bottom, transparent, var(--papier) 72%); pointer-events: none; }
.sperre-karte { position: relative; overflow: hidden; padding: 56px clamp(24px, 6vw, 72px) 48px; border-radius: 20px; background: var(--tiefsee); color: var(--weiss); text-align: center; }
.sperre-karte::before { content: ""; position: absolute; left: -20%; top: -70%; width: 80%; aspect-ratio: 1; border-radius: 50%; background: var(--petrol); opacity: .55; }
.sperre-karte > * { position: relative; }
.siegel--sperre { width: 104px; height: 104px; background: var(--sonne); box-shadow: inset 0 0 0 5px var(--tiefsee), inset 0 0 0 7px var(--sonne); font-size: 11px; letter-spacing: .03em; }
.sperre-titel { max-width: 22ch; margin: 0 auto; font: 800 clamp(28px, 3.4vw, 40px)/1.12 var(--titel); letter-spacing: -0.02em; text-wrap: balance; }
.sperre-text { max-width: 50ch; margin: 16px auto 0; font-size: 18px; line-height: 1.55; color: var(--p100); }
.sperre-liste { display: grid; gap: 10px; max-width: 46ch; margin: 28px auto 0; padding: 0; list-style: none; text-align: left; font-size: 17px; line-height: 1.4; }
.sperre-liste li { position: relative; padding-left: 32px; }
.sperre-liste li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--sonne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304202D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 12px no-repeat; }
.sperre-preis { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 28px; font-size: 16px; color: var(--p200); }
.sperre-preis b { font: 800 22px/1 var(--titel); color: var(--weiss); }
.sperre .knopfreihe { justify-content: center; margin-top: 28px; }
.sperre .knopf { border-color: var(--sonne); background: var(--sonne); color: var(--tinte); }
.sperre .knopf:hover { border-color: var(--sonne-hover); background: var(--sonne-hover); }
.sperre .textlink { color: var(--p200); }
.sperre :focus-visible { outline-color: var(--sonne); }

/* Autor am Ende */
.autor { display: flex; gap: 22px; align-items: center; margin-top: 8px; padding: 28px 0 56px; border-top: 1px solid var(--linie); }
.autor img { flex: none; width: 88px; height: 88px; border-radius: 50%; object-fit: cover; }
.autor-name { font: 800 19px/1.2 var(--titel); }
.autor-bio { margin-top: 6px; color: var(--weich); }
.autor .textlink { display: inline-block; margin-top: 8px; }

/* Podcast-Player: die Konsole */
.folge-platz { margin-top: 36px; }
.folge-platz:empty { display: none; }
.folge { position: relative; overflow: hidden; padding: clamp(20px, 3vw, 32px); border-radius: 22px; background: var(--tiefsee); color: var(--weiss); box-shadow: 0 30px 60px -36px rgba(4, 32, 45, .7); outline: none; }
.folge::before { content: ""; position: absolute; right: -30%; top: -90%; width: 90%; aspect-ratio: 1; border-radius: 50%; background: var(--petrol); opacity: .5; pointer-events: none; }
.folge > * { position: relative; }
.folge-kopf { display: grid; grid-template-columns: 160px 1fr; gap: 26px; align-items: center; }
.folge-cover { position: relative; width: 160px; aspect-ratio: 1; border-radius: 14px; }
.folge-cover::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle closest-side, rgba(246, 126, 78, .6), transparent 100%); filter: blur(16px); opacity: 0; transition: opacity .6s; }
.folge.laeuft .folge-cover::before { opacity: 1; animation: atmen 3.2s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(1.12); } }
.folge-cover img { position: relative; width: 100%; height: 100%; border-radius: 14px; object-fit: cover; box-shadow: 0 18px 34px -14px rgba(0, 0, 0, .75); }
.folge-sendung { font: 700 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--p300); }
.folge-titel { margin-top: 6px; font: 800 clamp(21px, 2.5vw, 28px)/1.18 var(--titel); letter-spacing: -0.012em; text-wrap: balance; }
.folge-zeile { margin-top: 10px; font: 500 13px/1.4 var(--mono); color: var(--p200); }
.folge-kapitel-jetzt { min-height: 1.5em; margin-top: 8px; font-size: 15px; color: var(--sonne); }
.folge-kapitel-jetzt:not(:empty)::before { content: "▸ "; }
.folge-klang { display: block; width: 100%; height: 56px; margin-top: 22px; cursor: pointer; }
.folge-steuerung { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.folge-play { display: grid; place-items: center; width: 64px; height: 64px; margin-right: 6px; border: 0; border-radius: 50%; background: var(--sonne); color: var(--tinte); cursor: pointer; transition: transform .15s, box-shadow .3s; }
.folge-play:hover { transform: scale(1.05); }
.folge.laeuft .folge-play { box-shadow: 0 0 0 8px rgba(246, 126, 78, .18); }
.folge-play svg { width: 30px; height: 30px; fill: currentColor; }
.folge-sprung, .folge-tempo, .folge-teilen { display: grid; place-items: center; height: 44px; min-width: 44px; padding: 0 10px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 100px; background: none; color: var(--weiss); font: 700 12px/1 var(--mono); cursor: pointer; }
.folge-sprung { position: relative; }
.folge-sprung svg { width: 22px; height: 22px; }
.folge-sprung span { position: absolute; font-size: 9px; letter-spacing: 0; top: 50%; transform: translateY(-45%); }
.folge-teilen { grid-auto-flow: column; gap: 6px; padding: 0 14px 0 10px; }
.folge-teilen svg { width: 18px; height: 18px; }
.folge-sprung:hover, .folge-tempo:hover, .folge-teilen:hover { border-color: var(--weiss); }
.folge-zeit { margin-left: auto; font: 500 14px/1 var(--mono); color: var(--p200); font-variant-numeric: tabular-nums; }
.folge-zeit > span:first-child { color: var(--weiss); }
.folge-weiter { margin-top: 14px; padding: 8px 14px; border: 0; border-radius: 100px; background: rgba(255, 255, 255, .1); color: var(--weiss); font-size: 14px; cursor: pointer; }
.folge-weiter:hover { background: rgba(255, 255, 255, .18); }
.folge-leiste { display: flex; gap: 3px; height: 28px; margin-top: 10px; padding-block: 10px; cursor: pointer; }
.folge-leiste:focus-visible { outline-color: var(--sonne); outline-offset: 6px; border-radius: 4px; }
.folge-segment { position: relative; min-width: 4px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .18); transition: background-color .15s; }
.folge-leiste:hover .folge-segment { background: rgba(255, 255, 255, .28); }
.folge-fuellung { width: 0; height: 100%; background: var(--sonne); }
.folge-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 14px; font: 700 13px/1 var(--mono); }
.folge-kapitel-knopf { padding: 8px 0; border: 0; background: none; color: var(--weiss); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 4px; }
.folge-kapitel-knopf::before { content: "▾ "; display: inline-block; transition: transform .2s; }
.folge-kapitel-knopf[aria-expanded="true"]::before { transform: rotate(180deg); }
.folge-abos { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.folge-abos-wort { margin-right: 6px; color: var(--p300); font-weight: 500; }
.folge-abo { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 12px 0 9px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 100px; color: var(--weiss); font: 600 13px/1 var(--text); text-decoration: none; transition: background-color .15s, border-color .15s; }
.folge-abo:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .4); }
.folge-abo svg { width: 18px; height: 18px; fill: currentColor; }
.folge-kapitel { margin: 18px 0 0; padding: 0; list-style: none; border-top: 1px solid rgba(255, 255, 255, .15); }
.folge-kapitel button { display: grid; grid-template-columns: 64px 1fr; gap: 12px; width: 100%; padding: 10px 6px; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .08); background: none; color: var(--weiss); font: inherit; font-size: 15px; text-align: left; cursor: pointer; }
.folge-kapitel button:hover { background: rgba(255, 255, 255, .06); }
.folge-kapitel-zeit { font: 500 13px/1.5 var(--mono); color: var(--p200); }
.folge-kapitel .ist-aktiv button { color: var(--sonne); }
.folge-kapitel .ist-aktiv .folge-kapitel-zeit { color: var(--sonne); }
.folge.fehler::after { content: "Das Audio lässt sich gerade nicht laden."; display: block; margin-top: 12px; color: var(--sonne); }
.folge-mini { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; display: grid; grid-template-columns: 44px 1fr auto auto; align-items: center; gap: 14px; padding: 10px 16px; background: var(--tiefsee); color: var(--weiss); box-shadow: 0 -10px 30px -16px rgba(4, 32, 45, .6); }
.folge-mini-linie { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(255, 255, 255, .15); }
.folge-mini-linie > div { height: 100%; width: 0; background: var(--sonne); }
.folge-mini img { width: 44px; height: 44px; border-radius: 8px; }
.folge-mini-titel { overflow: hidden; font-weight: 700; font-size: 15px; white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.folge-mini-play, .folge-mini-zu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; color: var(--tinte); cursor: pointer; }
.folge-mini-play { background: var(--sonne); }
.folge-mini-play svg { width: 20px; height: 20px; fill: currentColor; }
.folge-mini-zu { background: none; color: var(--p200); font-size: 24px; }
body.hat-mini { padding-bottom: 72px; }
@media (max-width: 560px) {
    .folge { border-radius: 18px; }
    .folge-kopf { grid-template-columns: 92px 1fr; gap: 14px; align-items: start; }
    .folge-cover { width: 92px; }
    .folge-kapitel-jetzt { grid-column: 1 / -1; margin-top: 4px; }
    .folge-klang { height: 44px; margin-top: 16px; }
    .folge-steuerung { flex-wrap: wrap; gap: 8px; }
    .folge-play { width: 56px; height: 56px; margin-right: 2px; }
    .folge-teilen span { display: none; }
    .folge-teilen { padding: 0; }
    .folge-zeit { width: 100%; margin-left: 0; margin-top: 2px; }
    .folge-fuss { flex-direction: column; align-items: flex-start; }
    .folge-abos { flex-wrap: nowrap; max-width: 100%; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
    .folge-abos::-webkit-scrollbar { display: none; }
    .folge-abo { flex: none; }
    .folge-mini { grid-template-columns: 40px 1fr auto auto; gap: 10px; padding: 8px 12px; }
    .folge-mini img { width: 40px; height: 40px; }
    .inhaltsverzeichnis { display: none; }
    .autor { flex-direction: column; align-items: flex-start; }
}

/* Themen-, Tag- und Autorenseite */
.themenkopf { padding-block: clamp(48px, 7vw, 88px); background: var(--p100); }
.themenkopf-titel { font: 800 clamp(36px, 5vw, 60px)/1.08 var(--titel); letter-spacing: -0.02em; }
.themenkopf-text { max-width: 60ch; margin-top: 14px; font-size: 19px; color: var(--text-dunkel); }
.themenkopf-zahl { margin-top: 18px; font: 700 14px/1.4 var(--mono); text-transform: uppercase; letter-spacing: .05em; }
.themen-liste { display: flex; flex-wrap: wrap; gap: 10px; margin: 24px 0 0; padding: 0; list-style: none; }
.themen-liste a { display: block; padding: 8px 16px; border-radius: 100px; background: var(--weiss); font-weight: 600; text-decoration: none; }
.themen-liste a:hover { background: var(--petrol); color: var(--weiss); }
.autorkopf { display: flex; align-items: center; gap: clamp(20px, 4vw, 48px); }
.autorkopf-bild { flex: none; width: clamp(96px, 14vw, 180px); aspect-ratio: 1; border-radius: 50%; object-fit: cover; }

/* Shownotes: Gruppen statt fortlaufender Liste */
.inhalt > .shownotes { grid-column: wide-start / wide-end; margin-top: 2.6em; font-size: 16px; line-height: 1.45; }
.shownotes-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 20px; }
.inhalt .shownotes h2 { margin: 0; }
.shownotes-kopf p { color: var(--weich); font: 500 14px/1.4 var(--mono); }
.shownotes-gruppe { --ton: var(--p100); margin-top: 16px; overflow: hidden; border-radius: 16px; background: var(--weiss); box-shadow: var(--schatten); }
.shownotes-gruppe--recht { --ton: var(--sand); }
.shownotes-gruppe--buecher { --ton: var(--sonne-hell); }
.shownotes-gruppe--medien { --ton: var(--p200); }
.shownotes-gruppe--mehr { --ton: var(--sand); }
.inhalt .shownotes h3 { display: flex; align-items: center; gap: 12px; margin: 0; padding: 14px 20px; border-bottom: 1px solid var(--linie); font: 800 17px/1.25 var(--titel); }
.shownotes h3 i { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--ton); color: var(--tinte); }
.shownotes h3 svg { width: 19px; height: 19px; }
.shownotes-zahl { margin-left: auto; color: var(--weich); font: 500 13px/1 var(--mono); }
.inhalt .shownotes ul { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; background: var(--linie); list-style: none; }
.inhalt .shownotes li { margin: 0; background: var(--weiss); }
.inhalt .shownotes li:last-child:nth-child(odd) { grid-column: 1 / -1; }
.inhalt .shownotes .sn { display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 15px 20px; color: var(--tinte); text-decoration: none; transition: background-color .15s; }
.inhalt .shownotes a.sn:hover { background: var(--p50); }
.inhalt .shownotes a.sn:hover .sn-titel { color: var(--petrol); }
.sn-titel { font-weight: 700; hyphens: manual; }
.sn-zusatz { color: var(--weich); font-size: 14px; }
.sn-quelle { margin-top: auto; padding-top: 4px; color: var(--p600); font: 500 12px/1.4 var(--mono); }
a.sn .sn-quelle::after { content: " ↗"; }
.shownotes-mehr { width: 100%; padding: 13px; border: 0; border-top: 1px solid var(--linie); background: none; color: var(--petrol); font: 700 13px/1 var(--mono); letter-spacing: .03em; cursor: pointer; }
.shownotes-mehr:hover { background: var(--p50); }
@media (max-width: 700px) {
    .inhalt .shownotes ul { grid-template-columns: 1fr; }
}

/* Podcast-Seite */
.podcast-kopf { position: relative; overflow: hidden; padding-block: clamp(48px, 7vw, 88px); background: var(--tiefsee); color: var(--weiss); }
.podcast-kopf::before { content: ""; position: absolute; right: -10%; top: -60%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: var(--petrol); opacity: .5; }
.podcast-kopf-innen { position: relative; display: grid; grid-template-columns: 240px 1fr; gap: clamp(24px, 4vw, 48px); align-items: center; }
.podcast-cover { width: 240px; aspect-ratio: 1; border-radius: 16px; object-fit: cover; box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); }
.podcast-vorzeile { font: 700 12px/1.4 var(--mono); letter-spacing: .05em; text-transform: uppercase; color: var(--p300); }
.podcast-titel { margin-top: 10px; font: 800 clamp(32px, 4.4vw, 54px)/1.08 var(--titel); letter-spacing: -0.02em; text-wrap: balance; }
.podcast-text { max-width: 58ch; margin-top: 16px; font-size: 19px; line-height: 1.5; color: var(--p100); }
.podcast-zahl { margin-top: 18px; font: 700 14px/1.4 var(--mono); color: var(--sonne); }
.folge-platz--seite { margin-top: 16px; }
.podcast-shownotes { margin-top: 18px; text-align: center; }
@media (max-width: 700px) {
    .podcast-kopf-innen { grid-template-columns: 1fr; }
    .podcast-cover { width: 180px; }
}

/* Seitenwechsel */
.seiten { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 56px; }
.seiten-zahl { font-size: 15px; color: var(--weich); }

/* Fehlerseite */
.fehler-code { font: 800 clamp(64px, 12vw, 140px)/1 var(--titel); letter-spacing: -0.03em; color: var(--p300); }
.fehler .h2 { margin-top: 12px; }
.fehler-text { max-width: 56ch; margin-top: 14px; font-size: 18px; color: var(--weich); }

/* Fuß: Tiefsee, Sonne als einziger heller Akzent */
.fuss { background: var(--tiefsee); color: var(--weiss); }
.fuss .knopf { border-color: var(--sonne); background: var(--sonne); color: var(--tinte); }
.fuss .knopf:hover { border-color: var(--sonne-hover); background: var(--sonne-hover); }
.fuss :focus-visible { outline-color: var(--sonne); }
.fuss .signet { color: var(--sonne); }
.fuss-kopf { padding: 72px 20px 64px; text-align: center; }
.fuss-kopf .h2 { max-width: 18ch; margin: 0 auto; }
.fuss-kopf > p { margin-top: 12px; opacity: .85; }
.fuss .anmeldung input { border-color: var(--weiss); }
.fuss .anmeldung.error .anmeldung-fehler { color: var(--sonne); }
.fuss-spalten { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 32px; padding-block: 48px; border-top: 1px solid rgba(255, 255, 255, .2); }
.fuss-spalten p { margin-top: 12px; font-size: 15px; opacity: .8; }
.fuss h3 { margin-bottom: 12px; font: 700 13px/1 var(--mono); letter-spacing: .05em; text-transform: uppercase; opacity: .7; }
.fuss ul { margin: 0; padding: 0; list-style: none; }
.fuss li { padding: 4px 0; }
.fuss a { text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss-recht { padding-block: 18px 28px; border-top: 1px solid rgba(255, 255, 255, .2); font-size: 13px; opacity: .75; }

/* Breiten */
@media (max-width: 1180px) {
    .nav { display: none; }
    .menueknopf { display: grid; }
    .nav.offen { display: block; position: absolute; left: 0; right: 0; top: 72px; padding: 8px 20px 20px; background: var(--weiss); border-bottom: 1px solid var(--linie); }
    .nav.offen .menue { flex-direction: column; gap: 0; }
    .nav.offen .menue a { display: block; padding: 16px 0; border-bottom: 1px solid var(--linie); font-size: 14px; }
}
@media (max-width: 1100px) {
    .schritte { grid-template-columns: repeat(3, 1fr); }
    .schritte .kg-product-card + .kg-product-card::before { display: none; }
}
@media (max-width: 900px) {
    .held .huelle { grid-template-columns: 1fr; min-height: 0; padding-top: 36px; }
    .held-links { padding-bottom: 0; }
    .buehne { justify-self: stretch; width: auto; height: 420px; margin: 8px -20px 0; }
    .buehne::before { left: calc(50% - 300px); top: 20px; width: 600px; height: 600px; }
    .buehne::after { left: calc(50% - 240px); top: 80px; width: 480px; height: 480px; }
    .buch3d { left: calc(50% - 95px); top: 50px; width: 200px; }
    .plaketten .kg-product-card:nth-of-type(1) { top: 8%; left: 16px; }
    .plaketten .kg-product-card:nth-of-type(2) { top: 74%; right: 16px; }
    .angebot .kg-product-card-container { grid-template-columns: 1fr; grid-template-rows: none; }
    .angebot .kg-product-card-image, .angebot .kg-product-card-title-container, .angebot .kg-product-card-description, .angebot .kg-product-card-button { grid-column: 1; grid-row: auto; }
    .angebot .kg-product-card-image { min-height: 220px; }
    .angebot .kg-product-card-title-container { padding: 24px 24px 0; }
    .angebot .kg-product-card-description { padding-inline: 24px; }
    .angebot .kg-product-card-button { margin-bottom: 28px; }
    .paar, .leistungen, .wandel, .rollen, .raster { grid-template-columns: 1fr; }
    .brief { grid-template-columns: 1fr; }
    .buch-karte { grid-template-columns: 1fr 120px; }
    .buch-karte img { width: 120px; }
    .fuss-spalten { grid-template-columns: 1fr 1fr; }
    .fuss-spalten > :first-child { grid-column: 1 / -1; }
    .autorkopf { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 560px) {
    body { font-size: 16px; }
    .kopf-konto, .kopf-symbol, .kopf-rechts .lang { display: none; }
    .kopf .huelle { gap: 12px; padding-inline: 16px; }
    .kopf-rechts { gap: 4px; }
    .kopf-rechts .knopf { min-height: 40px; padding: 8px 10px; font-size: 11px; }
    .nav.offen .nav-extra { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
    .marke { font-size: 18px; }
    .signet { width: 26px; height: 26px; }
@media (max-width: 389px) { .marke { font-size: 16px; } }
@media (max-width: 374px) { .kopf-telefon { display: none; } }
    .plaketten { display: none; }
    .schritte { grid-template-columns: 1fr 1fr; }
    .schritte .kg-product-card:last-of-type { grid-column: 1 / -1; }
    .schritte .kg-product-card:last-of-type .kg-product-card-image { aspect-ratio: 16 / 9; }
    .termine { padding: 4px 20px; }
    .termine .kg-product-card-container { grid-template-columns: 1fr; row-gap: 6px; }
    .termine strong, .termine .kg-product-card-title-container, .termine .kg-product-card-button { grid-column: 1; grid-row: auto; }
    .termine strong { order: -1; }
    .termine .kg-product-card-button { order: 1; }
    .termine .kg-product-card-button { justify-self: start; margin-top: 6px; }
    .buch-karte { grid-template-columns: 1fr; }
}
/* Karten für Podcastfolgen und Newsletter-Ausgaben */
.eintraege { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin: 0; padding: 0; list-style: none; }
.eintrag { display: flex; }
.eintrag > a { display: flex; flex-direction: column; width: 100%; padding: 26px 28px 24px; border-radius: 15px; background: var(--weiss); box-shadow: var(--schatten); color: var(--tinte); text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.eintrag > a:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(4, 32, 45, .14); }
.eintrag-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.eintrag-nr { font: 800 40px/1 var(--titel); letter-spacing: -0.02em; color: var(--p600); }
.eintrag-kopf time { margin-left: auto; font: 500 13px/1.4 var(--mono); color: var(--weich); white-space: nowrap; }
.eintrag-titel { font: 800 20px/1.25 var(--titel); letter-spacing: -0.005em; }
.eintrag-gast { display: block; margin-top: 6px; font: italic 400 18px/1.3 var(--serif); letter-spacing: 0; color: var(--petrol); }
.eintrag-text { display: -webkit-box; margin-top: 12px; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; color: var(--weich); font-size: 15px; line-height: 1.5; }
.eintrag-aktion { margin-top: auto; padding-top: 18px; font: 700 12px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--petrol); }
.eintrag > a:hover .eintrag-aktion { text-decoration: underline; text-underline-offset: 4px; }
.folgen-kopf { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin-bottom: 36px; }
.folgen-suche { flex: 0 1 380px; width: 0; min-width: 0; min-height: 52px; padding: 12px 16px; border: 2px solid var(--tinte); border-radius: 4px; background: var(--weiss); color: var(--tinte); font: inherit; }
.folgen-leer { margin-top: 12px; text-align: center; color: var(--weich); }

/* Publikationen: Kopf mit Zahlen und Jahresgrafik, darunter das Verzeichnis */
.pub-zahlen { display: flex; flex-wrap: wrap; gap: 20px 40px; margin: 28px 0 0; }
.pub-zahlen > div { display: flex; flex-direction: column-reverse; }
.pub-zahlen dd { margin: 0; font: 800 34px/1 var(--titel); letter-spacing: -0.02em; }
.pub-zahlen dt { margin-top: 4px; font-size: 14px; color: var(--weich); }
.pub-grafik { max-width: 560px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--linie); }
.pub-grafik > p { margin-bottom: 12px; font-size: 14px; color: var(--weich); }
.pub-balken { display: flex; align-items: flex-end; gap: 2px; height: 92px; border-bottom: 1px solid var(--linie); }
.pub-balken button { position: relative; display: flex; flex: 1; align-items: flex-end; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.pub-balken i { display: block; width: 100%; height: calc(var(--h, 0) * 100%); border-radius: 4px 4px 0 0; background: var(--petrol); transition: height .35s cubic-bezier(.2, .7, .2, 1), background-color .2s ease, opacity .2s ease; }
.pub-balken button:hover i { background: var(--p800); }
.pub-balken.hat-auswahl button:not([aria-pressed="true"]) i { opacity: .35; }
.pub-balken button:hover::after, .pub-balken button:focus-visible::after { content: attr(data-tipp); position: absolute; left: 50%; bottom: calc(100% + 6px); z-index: 3; padding: 4px 8px; border-radius: 4px; background: var(--tinte); color: var(--weiss); font: 500 12px/1.3 var(--mono); white-space: nowrap; transform: translateX(-50%); pointer-events: none; }
.pub-achse { display: flex; justify-content: space-between; margin-top: 6px; font: 500 12px/1.4 var(--mono); color: var(--weich); }

.pub-abschnitt { padding-top: clamp(32px, 4vw, 56px); }
.pub-leiste { position: sticky; top: 0; z-index: 10; display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 340px); gap: 12px 24px; align-items: center; margin-inline: -20px; padding: 14px 20px; background: var(--papier); border-bottom: 1px solid var(--linie); scroll-margin-top: 72px; transition: top .3s ease; }
.kopf:not(.ist-weg) ~ main .pub-leiste { top: 72px; }
.pub-leiste .folgen-suche { flex: none; width: 100%; min-height: 44px; padding-block: 8px; }
.pub-filter { display: flex; flex-wrap: wrap; gap: 6px; }
.pub-filter--themen { grid-column: 1 / -1; flex-wrap: nowrap; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); }
.pub-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 14px; border: 1px solid var(--linie); border-radius: 999px; background: var(--weiss); color: var(--tinte); font: 600 14px/1.2 var(--titel); cursor: pointer; white-space: nowrap; }
.pub-chip:hover { border-color: var(--tinte); }
.pub-chip b { font: 500 12px/1 var(--mono); color: var(--weich); }
.pub-chip[aria-pressed="true"] { border-color: var(--tiefsee); background: var(--tiefsee); color: var(--weiss); }
.pub-chip[aria-pressed="true"] b { color: var(--p200); }
.pub-treffer { margin-top: 20px; font: 500 13px/1.4 var(--mono); color: var(--weich); }
.pub-jahr { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 24px; margin-top: 20px; padding-top: 24px; border-top: 2px dotted var(--p300); }
.pub-jahreszahl { position: sticky; top: 136px; align-self: start; transition: top .3s ease; font: 800 clamp(38px, 4.2vw, 56px)/1 var(--titel); letter-spacing: -0.02em; color: var(--p600); }
.kopf:not(.ist-weg) ~ main .pub-jahreszahl { top: 208px; }
.pub-eintraege { margin: 0; padding: 0; list-style: none; }
.pub-eintrag { max-width: 78ch; padding-block: 18px; }
.pub-eintrag + .pub-eintrag { border-top: 1px solid var(--linie); }
.pub-eintrag:first-child { padding-top: 4px; }
.pub-titel { font: 700 19px/1.35 var(--titel); }
.pub-autoren { margin-top: 6px; font-size: 15px; line-height: 1.5; color: var(--weich); }
.pub-autoren b { font-weight: 700; color: var(--tinte); }
.pub-ort { margin-top: 4px; font: italic 400 16px/1.45 var(--serif); color: var(--text-dunkel); }
.pub-unten { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin-top: 10px; min-height: 24px; font: 500 13px/1.4 var(--mono); }
.pub-thema { color: var(--p600); }
.pub-aktion { padding: 0; border: 0; background: none; color: var(--weich); font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.pub-aktion:hover { color: var(--tinte); }
@media (hover: hover) {
    .pub-aktion { opacity: 0; transition: opacity .15s ease; }
    .pub-eintrag:hover .pub-aktion, .pub-aktion:focus-visible { opacity: 1; }
}

/* Anmeldeseite: nur die Anmeldung, ohne Menü und Fuß */
:is(.page-signup, .page-login) :is(.kopf, .lesezeichen, .fuss) { display: none; }
.anmeldeseite { display: grid; grid-template-columns: 1fr 1fr; min-height: 100dvh; }
.anmeldeseite-form { display: flex; flex-direction: column; gap: 32px; padding: clamp(24px, 3.4vw, 48px); background: var(--papier); }
.anmeldeseite-mitte { width: min(480px, 100%); margin: auto; }
.anmeldeseite h1 { font: 800 clamp(38px, 4.4vw, 60px)/1.06 var(--titel); letter-spacing: -0.02em; text-wrap: balance; }
.anmeldeseite-text { margin-top: 18px; font: 400 20px/1.5 var(--serif); }
.anmeldeseite .anmeldung { margin: 28px 0 0; }
.anmeldeseite .anmeldung input { flex-basis: 100%; }
.anmeldeseite .anmeldung .knopf { flex: 1 1 100%; }
.anmeldeseite .kleingedruckt { margin-top: 14px; color: var(--weich); font-size: 14px; line-height: 1.5; }
.anmeldeseite-konto { margin-top: 16px; font-size: 15px; }
.anmeldeseite-weiter { margin-top: 24px; }
.anmeldeseite-recht ul { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.anmeldeseite-recht a { color: var(--weich); }
.anmeldeseite-buehne { position: relative; display: grid; place-items: center; overflow: hidden; padding: clamp(48px, 6vw, 88px) clamp(24px, 4vw, 64px); background: var(--tiefsee); }
.anmeldeseite-buehne::before, .anmeldeseite-buehne::after { content: ""; position: absolute; border-radius: 50%; }
.anmeldeseite-buehne::before { left: 12%; top: 18%; width: 130%; aspect-ratio: 1; background: var(--p800); }
.anmeldeseite-buehne::after { left: 34%; top: 40%; width: 130%; aspect-ratio: 1; background: var(--petrol); }
.brief-blatt { position: relative; z-index: 1; width: min(440px, 100%); padding: 44px 40px 40px; background: var(--hell); color: var(--tinte); box-shadow: 0 40px 80px rgba(4, 32, 45, .45); transform: rotate(-2deg); animation: aufstieg 1.1s cubic-bezier(.2, .7, .2, 1) both; }
.brief-blatt::before { content: ""; position: absolute; top: -8px; right: 34px; width: 40px; height: 104px; background: var(--sonne); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 12px), 0 100%); }
.brief-blatt > img { width: 76px; height: 76px; margin-bottom: 22px; border-radius: 50%; object-fit: cover; }
.brief-blatt .brief-text { margin: 0; }
.brief-blatt .brief-text p + p { margin-top: 12px; }
.brief-blatt .brief-text p:first-child { font-weight: 600; font-size: 24px; line-height: 1.25; }

/* Lesezeichen: Newsletter von jeder Seite aus. Hängt hinter dem Kopf; ist der Kopf weg, reicht es bis zum Fensterrand */
.lesezeichen { --rand: clamp(8px, calc(50vw - 640px), 64px); position: fixed; z-index: 15; top: 0; right: var(--rand); display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 10px; width: 46px; height: 226px; padding: 0 0 28px; border: 0; background: none; color: var(--tinte); cursor: pointer; filter: drop-shadow(0 6px 10px rgba(4, 32, 45, .28)); animation: band-rein .7s .8s cubic-bezier(.2, .7, .2, 1) backwards; transition: transform .25s cubic-bezier(.2, .7, .2, 1); }
.lesezeichen::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--sonne); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 14px), 0 100%); }
.lesezeichen:hover, .lesezeichen:focus-visible { transform: translateY(10px); }
.lesezeichen:hover::before { background: var(--sonne-hover); }
.lesezeichen span { writing-mode: vertical-rl; font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.lesezeichen svg { flex: none; width: 22px; height: 22px; }
@keyframes band-rein { from { transform: translateY(-100%); } }

.brief-karte { position: fixed; inset: 238px clamp(8px, calc(50vw - 640px), 64px) auto auto; width: min(380px, calc(100vw - 24px)); height: fit-content; max-height: calc(100dvh - 250px); margin: 0; padding: 28px; overflow: auto; border: 0; border-top: 5px solid var(--sonne); border-radius: 4px 4px 16px 16px; background: var(--weiss); color: var(--tinte); box-shadow: 0 24px 60px rgba(4, 32, 45, .28); opacity: 0; transform: translateY(-12px); transition: opacity .25s ease, transform .25s cubic-bezier(.2, .7, .2, 1), display .25s allow-discrete, overlay .25s allow-discrete; }
.brief-karte:popover-open { opacity: 1; transform: none; }
@starting-style { .brief-karte:popover-open { opacity: 0; transform: translateY(-12px); } }
.brief-karte h2 { padding-right: 28px; font: 600 25px/1.2 var(--serif); }
.brief-karte h2 + p { margin-top: 10px; font: 400 17px/1.55 var(--serif); }
.brief-karte .anmeldung { margin-top: 20px; }
.brief-karte .knopf { flex: 1 1 100%; }
.brief-karte .kleingedruckt { margin-top: 12px; color: var(--weich); font-size: 14px; line-height: 1.5; }
.brief-zu { position: absolute; top: 10px; right: 10px; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 4px; background: none; color: var(--weich); cursor: pointer; }
.brief-zu:hover { background: var(--papier); color: var(--tinte); }
.brief-zu svg { width: 20px; height: 20px; }
@supports not selector(:popover-open) { .lesezeichen, .brief-karte { display: none; } }

@media (max-width: 1000px) {
    .eintraege { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .pub-leiste { position: static; grid-template-columns: minmax(0, 1fr); }
    .pub-filter { flex-wrap: nowrap; margin-inline: -20px; padding-inline: 20px; overflow-x: auto; scrollbar-width: none; }
    .pub-jahr { grid-template-columns: minmax(0, 1fr); gap: 8px; }
    .pub-jahreszahl { position: static; }
    .anmeldeseite { grid-template-columns: 1fr; min-height: 0; }
    .anmeldeseite-form { min-height: 100dvh; }
}
@media (max-width: 640px) {
    .eintraege { grid-template-columns: 1fr; gap: 16px; }
    .folgen-suche { flex: 1 1 100%; }
    .brief-blatt { padding: 36px 26px 30px; }
}
@media (max-width: 900px) {
    /* Auf dem Handy geht es mit dem Kopf weg und kommt mit ihm zurück, damit es nicht über dem Text steht */
    .lesezeichen { right: 8px; width: 34px; height: 114px; padding-bottom: 20px; transition: transform .3s ease; }
    .lesezeichen::after { content: ""; position: absolute; inset: 0 -8px -10px; } /* größere Tippfläche */
    .lesezeichen span { display: none; }
    .lesezeichen svg { width: 20px; height: 20px; }
    .kopf.ist-weg ~ .lesezeichen { transform: translateY(-100%); }
    .brief-karte { inset: 12px 12px auto 12px; width: auto; max-height: calc(100dvh - 24px); padding: 24px 20px; }
}
@media (max-width: 900px) {
    .gremien-reihe { grid-template-columns: 1fr; }
    .gremien-reihe .kg-product-card-container, .gremien-reihe .kg-card:first-child .kg-product-card-container { display: grid; grid-template-columns: 124px 1fr; align-items: center; gap: 18px; padding: 18px 0; border-left: 0; border-top: 1px solid var(--linie); }
    .gremien-reihe .kg-product-card-image { height: 50px; }
    .gremien-reihe .kg-product-card-description { margin: 0; }
    .gremien-reihe .kg-product-card-button::after { left: 0; right: 0; }
}
@media (max-width: 560px) {
    .anmeldung .knopf { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}