/* ==========================================================================
GNM Block-Theme · Idee 02 Lila
Farben/Schriften kommen aus theme.json (var(--wp--preset--…)).
========================================================================== */
:root {
--gnm-ink: var(--wp--preset--color--ink, #242424);
--gnm-paper: var(--wp--preset--color--paper, #F9F9F7);
--gnm-lila: var(--wp--preset--color--lila, #A875FF);
--gnm-orange: var(--wp--preset--color--orange, #F4A261);
--gnm-radius: 22px;
}
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(h1, h2, h3, h4) { text-wrap: balance; }
:where(p) { text-wrap: pretty; }
/* --------------------------------------------------------------------------
Klammer (Bracket): Linie oben + links mit runder Ecke, Label hängt dran
-------------------------------------------------------------------------- */
.is-style-klammer,
.is-style-klammer-lila,
.is-style-klammer-hell {
position: relative;
border-top: 2px solid var(--gnm-ink);
border-left: 2px solid var(--gnm-ink);
border-top-left-radius: var(--gnm-radius);
padding-left: clamp(16px, 1.9vw, 26px) !important;
padding-bottom: 4px;
}
.is-style-klammer-lila { border-color: var(--gnm-lila); }
.is-style-klammer-hell { border-color: #fff; }
/* Label direkt im Klammer-Block hängt an der oberen Linie */
.is-style-klammer > .is-style-label:first-child,
.is-style-klammer > .is-style-label-lila:first-child,
.is-style-klammer-lila > .is-style-label:first-child,
.is-style-klammer-lila > .is-style-label-lila:first-child,
.is-style-klammer-hell > .is-style-label:first-child,
.is-style-klammer-hell > .is-style-label-lila:first-child {
margin-top: 0 !important;
margin-bottom: clamp(16px, 1.7vw, 24px);
}
/* --------------------------------------------------------------------------
Labels (Tags)
-------------------------------------------------------------------------- */
.is-style-label,
.is-style-label-lila {
display: inline-block;
width: fit-content;
margin-block: 0;
padding: 7px 14px 8px;
border-radius: 0 0 8px 8px;
background: var(--gnm-ink);
color: #fff;
font-family: var(--wp--preset--font-family--geist) !important;
font-size: clamp(14px, 1.45vw, 21px) !important;
font-weight: 600 !important;
letter-spacing: .12em !important;
line-height: 1.15 !important;
text-transform: uppercase;
}
.is-style-label-lila { background: var(--gnm-lila); color: #fff; }
.is-style-label a, .is-style-label-lila a { color: inherit; text-decoration: none; }
.is-style-kicker {
font-size: 11px !important;
font-weight: 700;
letter-spacing: .14em;
text-transform: uppercase;
}
.is-style-hand {
font-family: var(--wp--preset--font-family--caveat) !important;
font-weight: 700;
line-height: 1.1;
}
/* Rubrik-Pills (Kategorien/Schlagwörter) */
.is-style-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.is-style-pills a,
.is-style-pills .wp-block-post-terms__separator + a {
display: inline-flex; align-items: center;
height: 26px; padding: 0 11px;
border: 1px solid currentColor; border-radius: 999px;
text-decoration: none; color: inherit;
}
.is-style-pills .wp-block-post-terms__separator { display: none; }
.is-style-pills a:hover { background: var(--gnm-ink); color: #fff; }
/* --------------------------------------------------------------------------
Hervorhebungen in Überschriften
… → lila Rahmen (wie „Menschen.“)
… → orange Unterstreichung (wie „nebenan.“)
-------------------------------------------------------------------------- */
mark.gnm-box {
background: transparent !important;
color: inherit;
display: inline-block;
padding: 0 .12em .04em;
border: 3px solid var(--gnm-lila);
border-radius: .12em;
line-height: 1.02;
}
mark.gnm-unter {
background: linear-gradient(var(--gnm-orange), var(--gnm-orange)) no-repeat 0 92% / 100% .2em !important;
color: inherit;
}
/* --------------------------------------------------------------------------
Buttons (Pills)
-------------------------------------------------------------------------- */
.wp-block-button .wp-block-button__link { transition: background .2s, color .2s, transform .2s; display: inline-flex; align-items: center; gap: 12px; }
.wp-block-button .wp-block-button__link::after { content: "→"; font-size: 1.05em; transition: transform .2s; }
.wp-block-button.no-arrow .wp-block-button__link::after { content: none; }
.wp-block-button .wp-block-button__link:hover::after { transform: translateX(4px); }
.wp-block-button.is-style-orange .wp-block-button__link {
background: var(--gnm-orange); border-color: var(--gnm-orange); color: var(--gnm-ink); font-weight: 600;
}
.wp-block-button.is-style-orange .wp-block-button__link:hover { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff; }
.wp-block-button.is-style-dunkel .wp-block-button__link {
background: var(--wp--preset--color--button, #2B2B2B); border-color: var(--wp--preset--color--button, #2B2B2B); color: #fff;
}
.wp-block-button.is-style-dunkel .wp-block-button__link:hover { background: var(--gnm-lila); border-color: var(--gnm-lila); }
.wp-block-button.is-style-hell .wp-block-button__link { border-color: #fff; color: #fff; }
.wp-block-button.is-style-hell .wp-block-button__link:hover { background: #fff; color: var(--gnm-ink); }
/* Bilder: Zoom */
.is-style-zoom { overflow: hidden; border-radius: 6px; }
.is-style-zoom img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.is-style-zoom:hover img, .wp-block-post:hover .is-style-zoom img { transform: scale(1.05); }
/* --------------------------------------------------------------------------
Kopfzeile
-------------------------------------------------------------------------- */
.gnm-header {
position: sticky; top: 0; z-index: 50;
background: color-mix(in srgb, var(--gnm-paper) 92%, transparent);
backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--gnm-ink);
}
.admin-bar .gnm-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .gnm-header { top: 46px; } }
.gnm-header__row { min-height: 84px; }
.gnm-header .wp-block-site-logo img,
.gnm-header .gnm-logo img { height: 42px; width: auto; display: block; }
/* Pill-Navigation */
.gnm-pills .wp-block-navigation-item__content,
.gnm-actions .gnm-pill a {
display: inline-flex; align-items: center;
height: 40px; padding: 0 18px !important;
border: 1px solid var(--gnm-ink); border-radius: 999px;
font-size: 15px; line-height: 1; text-decoration: none;
transition: background .2s, color .2s;
}
.gnm-pills .wp-block-navigation-item__content:hover,
.gnm-actions .gnm-pill a:hover { background: var(--gnm-ink); color: #fff; }
.gnm-pills .current-menu-item > .wp-block-navigation-item__content { background: var(--gnm-ink); color: #fff; }
.gnm-actions .gnm-pill { margin: 0; }
.gnm-actions .gnm-pill--cta a { background: var(--gnm-orange); border-color: var(--gnm-orange); font-weight: 600; }
.gnm-actions .gnm-pill--cta a:hover { background: var(--gnm-ink); border-color: var(--gnm-ink); }
/* Runde Icon-Knöpfe (Suche, Konto) */
.gnm-round .wp-block-search__button,
.gnm-round-link a {
width: 40px; height: 40px; min-width: 40px; padding: 0 !important;
border: 1px solid var(--gnm-ink) !important; border-radius: 50% !important;
background: transparent !important; color: var(--gnm-ink) !important;
display: inline-flex; align-items: center; justify-content: center;
}
.gnm-round .wp-block-search__button:hover,
.gnm-round-link a:hover { background: var(--gnm-ink) !important; color: #fff !important; }
.gnm-round .wp-block-search__button svg { width: 20px; height: 20px; fill: currentColor; }
.gnm-round-link { margin: 0; }
.gnm-round-link a svg { width: 18px; height: 18px; }
/* Hamburger (Overlay-Menü) */
.gnm-burger .wp-block-navigation__responsive-container-open { width: 40px; height: 40px; }
.gnm-burger .wp-block-navigation__responsive-container.is-menu-open {
background: var(--gnm-ink) !important; color: #fff !important; padding: 32px var(--wp--preset--spacing--page);
}
.gnm-burger .is-menu-open .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--newsreader); font-weight: 700;
font-size: clamp(32px, 4.5vw, 56px); letter-spacing: -.03em; line-height: 1.05;
text-decoration: none;
}
.gnm-burger .is-menu-open .wp-block-navigation-item__content:hover { color: var(--gnm-lila); }
@media (max-width: 1100px) {
.gnm-pills, .gnm-hide-tablet { display: none !important; }
}
@media (max-width: 600px) {
.gnm-hide-mobile { display: none !important; }
.gnm-header__row { min-height: 64px; }
.gnm-header .gnm-logo img { height: 34px; }
}
/* --------------------------------------------------------------------------
Fußzeile
-------------------------------------------------------------------------- */
.gnm-footer { background: var(--gnm-ink); color: #fff; }
.gnm-footer a { color: #fff; }
.gnm-footer .gnm-claim mark { background: none; color: var(--gnm-orange); }
.gnm-footer__main a {
font-family: var(--wp--preset--font-family--newsreader); font-weight: 700;
font-size: clamp(22px, 2.1vw, 30px); letter-spacing: -.02em; text-decoration: none;
background: linear-gradient(var(--gnm-lila), var(--gnm-lila)) no-repeat 0 100% / 0 3px;
transition: background-size .3s;
}
.gnm-footer__main a:hover { background-size: 100% 3px; }
.gnm-footer__legal a { color: #cfcfcf; text-decoration: none; font-size: 14px; }
.gnm-footer__legal a:hover { color: var(--gnm-orange); }
.gnm-footer .wp-block-social-links .wp-social-link {
background: transparent !important; color: #fff !important;
border: 1.5px solid #fff; border-radius: 50%;
}
.gnm-footer .wp-block-social-links .wp-social-link a { padding: 10px; }
.gnm-footer .wp-block-social-links .wp-social-link:hover { background: var(--gnm-lila) !important; border-color: var(--gnm-lila); transform: none; }
/* --------------------------------------------------------------------------
Ticker
-------------------------------------------------------------------------- */
.gnm-ticker { display: flex; align-items: center; height: 40px; overflow: hidden; background: var(--gnm-ink); color: #fff; border-radius: 4px; }
.gnm-ticker__label { flex-shrink: 0; height: 100%; display: flex; align-items: center; padding: 0 18px; background: var(--gnm-orange); color: var(--gnm-ink); font-size: 12px; font-weight: 700; letter-spacing: .12em; }
.gnm-ticker__win { overflow: hidden; flex: 1; }
.gnm-ticker__track { display: flex; width: max-content; animation: gnm-tick 45s linear infinite; }
.gnm-ticker:hover .gnm-ticker__track { animation-play-state: paused; }
.gnm-ticker__track a { color: #fff; text-decoration: none; font-size: 14px; font-weight: 500; padding: 0 18px; white-space: nowrap; }
.gnm-ticker__track a::after { content: "✦"; color: var(--gnm-orange); font-size: 12px; margin-left: 36px; }
.gnm-ticker__track a:hover { color: var(--gnm-orange); }
@keyframes gnm-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .gnm-ticker__track { animation: none; } }
/* --------------------------------------------------------------------------
Allgemein
-------------------------------------------------------------------------- */
.gnm-sec-head { align-items: flex-end !important; }
.gnm-dark { background: var(--gnm-ink); color: #fff; }
.gnm-dark a { color: #fff; }
.wp-block-post-title a { text-decoration: none; }
.wp-block-post-title a:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.wp-block-query-pagination a { text-decoration: none; }
/* Feinschliff Schritt 1 */
.gnm-actions .gnm-pill a, .gnm-pills .wp-block-navigation-item__content { white-space: nowrap; }
.gnm-actions .gnm-round, .gnm-actions .wp-block-search__inside-wrapper { margin: 0; display: flex; align-items: center; }
.is-style-klammer > .is-style-label + *,
.is-style-klammer-lila > .is-style-label-lila + *,
.is-style-klammer-hell > .is-style-label + * { margin-top: 0 !important; }
@media (max-width: 600px) {
.gnm-header__row { gap: 8px !important; }
.gnm-actions .gnm-pill a { height: 36px; padding: 0 14px !important; font-size: 14px; }
.gnm-round .wp-block-search__button { width: 36px; height: 36px; min-width: 36px; }
}
/* --------------------------------------------------------------------------
Schritt 2 · Startseite
-------------------------------------------------------------------------- */
.gnm-ticker__dup { display: contents; }
.gnm-ticker__label { text-decoration: none; }
.gnm-claim-h1 { margin-bottom: 0; }
/* Große Geschichte: Bild mit drehendem NEU-Button */
.gnm-hero__bild { position: relative; margin: 0; }
.gnm-hero__bild img { width: 100%; object-fit: cover; }
.gnm-hero__bild::after {
content: "NEU";
position: absolute; right: clamp(16px, 2.5vw, 36px); top: clamp(16px, 2.5vw, 36px);
width: clamp(72px, 8.9vw, 128px); aspect-ratio: 1; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--gnm-orange); color: var(--gnm-ink);
font-family: var(--wp--preset--font-family--newsreader); font-weight: 700;
font-size: clamp(20px, 2.4vw, 34px); letter-spacing: -.02em;
pointer-events: none;
}
.gnm-hero__titel a { text-decoration: none; }
.gnm-hero .wp-block-post-excerpt__excerpt { margin: 0; }
/* „Weiterlesen“-Link als Pill-Button */
.wp-block-read-more.gnm-weiter {
display: inline-flex; align-items: center; gap: 12px; width: fit-content;
height: 48px; padding: 0 22px; border: 1.5px solid var(--gnm-ink); border-radius: 999px;
font-size: 16px; font-weight: 500; text-decoration: none; transition: background .2s, color .2s;
}
.wp-block-read-more.gnm-weiter::after { content: "→"; transition: transform .2s; }
.wp-block-read-more.gnm-weiter:hover { background: var(--gnm-ink); color: #fff; }
.wp-block-read-more.gnm-weiter:hover::after { transform: translateX(4px); }
/* Abschnittskopf: Titel links, Button rechts */
.gnm-sec-head { gap: 24px; }
.gnm-sec-head h2 { margin: 0; }
.gnm-sec-head p { margin: 0; }
@media (max-width: 781px) {
.gnm-hero .wp-block-columns { gap: 20px; }
}
/* --------------------------------------------------------------------------
Bewegung (aus dem HTML-Prototyp Idee 02)
-------------------------------------------------------------------------- */
/* Wortwechsler im Claim: 4 Wörter, je ~2 s sichtbar */
mark.gnm-rot { display: inline-block; height: 1.12em; overflow: hidden; vertical-align: bottom; }
.gnm-rot__track { display: flex; flex-direction: column; animation: gnm-rot 10s cubic-bezier(.7,0,.2,1) infinite; }
.gnm-rot__track span { display: block; height: 1.12em; line-height: 1.04; }
@keyframes gnm-rot {
0%, 18% { transform: translateY(0); }
25%, 43% { transform: translateY(-1.12em); }
50%, 68% { transform: translateY(-2.24em); }
75%, 93% { transform: translateY(-3.36em); }
100% { transform: translateY(-4.48em); }
}
/* Große Geschichte: langsamer Zoom (Ken Burns) */
.gnm-hero__bild img { animation: gnm-kb 22s ease-in-out infinite alternate; transform-origin: 50% 50%; }
@keyframes gnm-kb { from { transform: scale(1); } to { transform: scale(1.09) translate(-1.5%, 1%); } }
/* Titel: orange Unterstreichung wächst beim Überfahren */
.wp-block-post .wp-block-post-title a,
.gnm-hero__titel a {
text-decoration: none;
background: linear-gradient(var(--gnm-orange), var(--gnm-orange)) no-repeat 0 100% / 0 .22em;
transition: background-size .35s ease;
}
.wp-block-post:hover .wp-block-post-title a,
.wp-block-post-title a:focus-visible { background-size: 100% .22em; text-decoration: none; }
.gnm-hero__titel mark.gnm-unter { background-size: 100% .2em !important; }
/* Buttons & Pills: Überfahren = Orange (wie im Prototyp) */
:where(.wp-block-button:not(.is-style-orange):not(.is-style-dunkel):not(.is-style-hell)) .wp-block-button__link:hover,
.wp-block-read-more.gnm-weiter:hover,
.gnm-pills .wp-block-navigation-item__content:hover,
.gnm-actions .gnm-pill:not(.gnm-pill--cta) a:hover,
.gnm-round-link a:hover,
.gnm-round .wp-block-search__button:hover {
background: var(--gnm-orange) !important; border-color: var(--gnm-orange) !important; color: var(--gnm-ink) !important;
}
.gnm-actions .gnm-pill--cta a:hover { transform: translateY(-2px); }
.gnm-actions .gnm-pill--cta a { transition: transform .2s, background .2s; }
@media (prefers-reduced-motion: reduce) {
.gnm-rot__track, .gnm-hero__bild img, .gnm-ticker__track { animation: none !important; }
.is-style-zoom img { transition: none; }
}
/* Wortwechsler: Wort mittig im Rahmen, Grundlinie wie „über“ */
mark.gnm-box.gnm-rot { height: 1.1em; line-height: 1.1em; padding: 0 .14em; vertical-align: -.2em; text-align: center; }
.gnm-rot__track span { height: 1.1em; line-height: 1.02em; padding-top: .04em; }
@keyframes gnm-rot {
0%, 18% { transform: translateY(0); }
25%, 43% { transform: translateY(-1.1em); }
50%, 68% { transform: translateY(-2.2em); }
75%, 93% { transform: translateY(-3.3em); }
100% { transform: translateY(-4.4em); }
}
/* --------------------------------------------------------------------------
Schritt 3 · Rubriken, ePaper, Hören & Spielen, Karussells
-------------------------------------------------------------------------- */
.gnm-sub { margin: 0; color: var(--wp--preset--color--mute); font-size: var(--wp--preset--font-size--m); }
.gnm-meta { color: var(--wp--preset--color--mute); }
.gnm-meta p { margin: 0; }
/* Dunkle Abschnitte */
.gnm-dark { color: #fff; }
.gnm-dark :where(h1,h2,h3,h4,.wp-block-post-title, .wp-block-post-title a) { color: #fff; }
.gnm-dark .gnm-sub, .gnm-dark .gnm-meta-dunkel, .gnm-dark .wp-block-post-date { color: #bdbdbd; }
.gnm-dark .is-style-pills a { color: #fff; border-color: #fff; }
.gnm-dark .is-style-pills a:hover { background: #fff; color: var(--gnm-ink); }
.gnm-dark .is-style-klammer-lila { border-color: var(--gnm-lila); }
.gnm-dark + .gnm-dark { margin-top: 0 !important; }
main > .alignfull.gnm-dark:last-child { margin-bottom: 0; }
.gnm-unter-lila mark.gnm-unter { background-image: linear-gradient(var(--gnm-lila), var(--gnm-lila)) !important; }
.gnm-kicker-orange a { color: var(--gnm-orange) !important; text-decoration: none; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; font-size: 12px; }
.gnm-liste .wp-block-post { padding-bottom: 20px; margin-bottom: 20px !important; border-bottom: 1px solid rgba(255,255,255,.2); }
.gnm-liste .wp-block-post-title { margin: 0; }
/* Karussell */
.gnm-karussell .wp-block-post-template {
display: flex !important; flex-wrap: nowrap; gap: 24px; overflow-x: auto;
scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px;
margin-right: calc(-1 * var(--wp--preset--spacing--page));
}
.gnm-karussell .wp-block-post-template::-webkit-scrollbar { display: none; }
.gnm-karussell .wp-block-post-template > li { flex: 0 0 clamp(240px, 21vw, 300px); scroll-snap-align: start; margin: 0 !important; }
.gnm-pfeile { display: flex; gap: 10px; }
.gnm-pfeil {
width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid var(--gnm-ink);
background: transparent; color: var(--gnm-ink); font-size: 18px; cursor: pointer; transition: background .2s;
}
.gnm-pfeil:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-karussell-sec .gnm-sec-head > .wp-block-group:first-child { flex: 1 1 auto; }
/* ePaper (lila Block, Cover-Fächer) */
.gnm-epaper {
display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: clamp(24px, 4vw, 48px);
background: var(--gnm-lila); border-radius: 24px; padding: clamp(28px, 4.4vw, 64px); color: var(--gnm-ink); overflow: hidden;
}
.gnm-epaper__fan { position: relative; }
.gnm-epaper__note {
font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: clamp(22px, 2vw, 30px);
margin: 0 0 8px; text-align: center; display: flex; justify-content: center; align-items: flex-start; gap: 6px; color: var(--gnm-ink);
}
.gnm-epaper__note svg { width: 48px; height: 40px; transform: translateY(14px) rotate(8deg); }
.gnm-fan { position: relative; height: clamp(260px, 28vw, 400px); }
.gnm-fan__c {
position: absolute; top: 50%; left: 50%; width: 46%; aspect-ratio: 3/4;
transform-origin: 50% 90%; transition: transform .5s cubic-bezier(.2,.7,.2,1);
box-shadow: 0 18px 40px rgba(36,36,36,.28); border-radius: 4px; overflow: hidden; background: #fff;
}
.gnm-fan__c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gnm-fan__c0 { transform: translate(-95%, -50%) rotate(-9deg); z-index: 1; }
.gnm-fan__c2 { transform: translate(-5%, -50%) rotate(9deg); z-index: 1; }
.gnm-fan__c1 { transform: translate(-50%, -54%); z-index: 2; width: 50%; }
.gnm-epaper:hover .gnm-fan__c0 { transform: translate(-112%, -50%) rotate(-15deg); }
.gnm-epaper:hover .gnm-fan__c2 { transform: translate(12%, -50%) rotate(15deg); }
.gnm-epaper:hover .gnm-fan__c1 { transform: translate(-50%, -60%) scale(1.04); }
.gnm-epaper__text { text-align: center; }
.gnm-epaper__kicker { margin: 0 0 14px; font-size: 13px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-epaper__h { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: .98; letter-spacing: -.035em; }
.gnm-epaper__lead { margin: 18px auto 0; max-width: 34ch; font-size: var(--wp--preset--font-size--m); }
.gnm-epaper__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 26px; }
.gnm-btn {
display: inline-flex; align-items: center; gap: 12px; height: 48px; padding: 0 22px;
border: 1.5px solid var(--gnm-ink); border-radius: 999px; color: var(--gnm-ink); text-decoration: none; font-size: 16px; font-weight: 500;
transition: background .2s, color .2s;
}
.gnm-btn::after { content: "→"; transition: transform .2s; }
.gnm-btn:hover::after { transform: translateX(4px); }
.gnm-btn:hover { background: var(--gnm-ink); color: #fff; }
.gnm-btn--dunkel { background: var(--wp--preset--color--button, #2B2B2B); border-color: var(--wp--preset--color--button, #2B2B2B); color: #fff; }
.gnm-btn--dunkel:hover { background: var(--gnm-paper); border-color: var(--gnm-paper); color: var(--gnm-ink); }
@media (max-width: 860px) {
.gnm-epaper { grid-template-columns: 1fr; }
}
/* Podcast-Player (Anmutung) */
.gnm-rund img { border-radius: 999px; }
.gnm-player {
display: flex; align-items: center; gap: 18px; padding: 12px 20px 12px 12px;
background: rgba(255,255,255,.07); border-radius: 999px; color: #fff; text-decoration: none;
}
.gnm-player__play {
flex: 0 0 56px; height: 56px; border-radius: 50%; background: var(--gnm-orange); color: var(--gnm-ink);
display: flex; align-items: center; justify-content: center; font-size: 18px; transition: transform .2s;
}
.gnm-player:hover .gnm-player__play { transform: scale(1.08); }
.gnm-player__wave {
flex: 1; height: 34px;
background:
repeating-linear-gradient(90deg, var(--gnm-lila) 0 3px, transparent 3px 7px);
-webkit-mask: linear-gradient(90deg, #000 45%, rgba(0,0,0,.35) 45%);
mask: linear-gradient(90deg, #000 45%, rgba(0,0,0,.35) 45%);
clip-path: polygon(0 40%,3% 20%,6% 55%,9% 10%,12% 45%,15% 30%,18% 60%,21% 5%,24% 50%,27% 25%,30% 65%,33% 15%,36% 45%,39% 35%,42% 60%,45% 0,48% 50%,51% 30%,54% 55%,57% 20%,60% 45%,63% 10%,66% 55%,69% 30%,72% 60%,75% 15%,78% 45%,81% 25%,84% 55%,87% 10%,90% 40%,93% 30%,96% 50%,100% 35%,100% 65%,96% 50%,93% 70%,90% 60%,87% 90%,84% 45%,81% 75%,78% 55%,75% 85%,72% 40%,69% 70%,66% 45%,63% 90%,60% 55%,57% 80%,54% 45%,51% 70%,48% 50%,45% 100%,42% 40%,39% 65%,36% 55%,33% 85%,30% 35%,27% 75%,24% 50%,21% 95%,18% 40%,15% 70%,12% 55%,9% 90%,6% 45%,3% 80%,0 60%);
}
.gnm-player__xp { font-size: 13px; color: #bdbdbd; }
/* Quiz-Fortschritt */
.gnm-quizbar { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.gnm-quizbar span { height: 6px; border-radius: 6px; background: rgba(255,255,255,.18); }
.gnm-quizbar span.is-on { background: var(--gnm-orange); }
@media (max-width: 600px) {
.gnm-karussell .wp-block-post-template > li { flex-basis: 72vw; }
.gnm-pfeile { display: none; }
}
/* Große Geschichte: Titelgröße begrenzen (lange Titel) */
.gnm-hero__titel { font-size: clamp(40px, 5.8vw, 84px) !important; }
/* Abschnittskopf: Titel nimmt Platz, Aktionen rechts zusammen */
.gnm-sec-head > .wp-block-group:first-child { flex: 1 1 520px; }
/* Kein Abstand zwischen Hauptbereich und Fußzeile (dunkle Abschnitte gehen nahtlos über) */
.wp-site-blocks > .wp-block-template-part:last-child,
.wp-site-blocks > footer { margin-block-start: 0; }
main.wp-block-group > :last-child { margin-bottom: 0; }
main.wp-block-group > .alignfull.gnm-dark:last-child + * { margin-top: 0; }
/* GNM+: altes Herz-Icon im Titel ausblenden, stattdessen orange Pill */
.wp-block-post-title img.icon_title,
h1 img.icon_title, h2 img.icon_title, h3 img.icon_title { display: none !important; }
.is-style-pills a[href$="/gnm-plus/"],
.is-style-pills a[rel~="tag"][href*="/gnm-plus"] {
background: var(--gnm-orange); border-color: var(--gnm-orange) !important; color: var(--gnm-ink) !important; font-weight: 700;
}
.is-style-pills a[href$="/gnm-plus/"]:hover { background: var(--gnm-ink); border-color: var(--gnm-ink) !important; color: #fff !important; }
.gnm-sec-actions { margin-left: auto; }
/* --------------------------------------------------------------------------
0.3.1 · ePaper nach Prototyp (promo5), Podcast mit Gast-Foto, Sterne
-------------------------------------------------------------------------- */
.gnm-epaper { display: none; } /* alte Variante */
.gnm-epaper5 {
display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 440px); column-gap: 40px; align-items: center;
background: var(--gnm-lila); border-radius: 24px; padding: clamp(28px, 3.9vw, 56px) clamp(24px, 4.4vw, 64px);
color: var(--gnm-ink); overflow: hidden; position: relative;
}
.gnm-fan5 { position: relative; aspect-ratio: 698 / 430; max-width: 698px; width: 100%; }
.gnm-fan5__c {
position: absolute; width: 30%; aspect-ratio: 3 / 4; border: 5px solid #fff; background: #fff;
box-shadow: 0 18px 34px rgba(0,0,0,.28); transition: transform .45s cubic-bezier(.2,.7,.2,1); display: block;
}
.gnm-fan5__c img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gnm-fan5__f1 { left: 0; top: 22.3%; transform: rotate(-13deg); }
.gnm-fan5__f2 { left: 14.9%; top: 16.7%; transform: rotate(-6deg); z-index: 1; }
.gnm-fan5__f4 { left: 55%; top: 16.7%; transform: rotate(6deg); z-index: 1; }
.gnm-fan5__f3 { left: 69.9%; top: 22.3%; transform: rotate(13deg); }
.gnm-fan5__f0 { left: 33.2%; top: 10.2%; width: 34.4%; z-index: 3; }
.gnm-epaper5:hover .gnm-fan5__f1 { transform: rotate(-17deg) translateX(-10px); }
.gnm-epaper5:hover .gnm-fan5__f3 { transform: rotate(17deg) translateX(10px); }
.gnm-epaper5:hover .gnm-fan5__f0 { transform: translateY(-10px); }
.gnm-fan5__note {
position: absolute; left: 57%; top: -1%; z-index: 4; white-space: nowrap; transform: rotate(-4deg);
font-family: var(--wp--preset--font-family--caveat); font-weight: 700; font-size: clamp(22px, 2.4vw, 34px); line-height: 1;
}
.gnm-fan5__pfeil { position: absolute; left: 43%; top: -1.5%; width: 15.8%; z-index: 4; color: var(--gnm-ink); }
.gnm-zeichnen { stroke-dasharray: 240; stroke-dashoffset: 240; animation: gnm-zeichnen 2.6s .2s ease-out forwards; }
@keyframes gnm-zeichnen { to { stroke-dashoffset: 0; } }
.gnm-epaper5__text { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.gnm-epaper5__kicker { font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-epaper5__h { margin: 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(40px, 4.4vw, 64px); line-height: .98; letter-spacing: -.035em; }
.gnm-epaper5__lead { font-size: 18px; max-width: 32ch; }
.gnm-epaper5__btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
@media (max-width: 900px) {
.gnm-epaper5 { grid-template-columns: 1fr; row-gap: 24px; }
.gnm-fan5 { margin-top: 28px; }
}
@media (prefers-reduced-motion: reduce) { .gnm-zeichnen { animation: none; stroke-dashoffset: 0; } }
/* Podcast (nach Prototyp hs2) */
.gnm-pod { display: flex; flex-direction: column; gap: 18px; }
.gnm-pod__ep { display: flex; align-items: center; gap: 22px; }
.gnm-pod__bild { width: clamp(96px, 9.2vw, 132px); height: auto; aspect-ratio: 1; border-radius: 50%; object-fit: cover; flex-shrink: 0; transform: rotate(-6deg); }
.gnm-pod__txt { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gnm-pod__meta { font-size: 13px; color: #a8a8a8; letter-spacing: .04em; }
.gnm-pod__h { font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.025em; color: #fff; text-decoration: none; }
.gnm-pod__h:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .12em; }
.gnm-pod__by { font-size: 16px; color: #cfcfcf; }
.gnm-pod__player { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1.5px solid #3a3a3a; border-radius: 999px; --gnm-fortschritt: 33%; }
.gnm-pod__play { width: 52px; height: 52px; border-radius: 50%; background: var(--gnm-orange); color: var(--gnm-ink); border: 0; display: flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; transition: transform .2s; }
.gnm-pod__play svg { width: 22px; height: 22px; }
.gnm-pod__play:hover { transform: scale(1.08); }
.is-playing .gnm-pod__play svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.gnm-pod__wave { display: flex; align-items: center; gap: 3px; height: 34px; flex: 1; overflow: hidden; min-width: 0;
-webkit-mask: linear-gradient(90deg, #000 var(--gnm-fortschritt), rgba(0,0,0,.35) var(--gnm-fortschritt));
mask: linear-gradient(90deg, #000 var(--gnm-fortschritt), rgba(0,0,0,.35) var(--gnm-fortschritt)); }
.gnm-pod__wave i { display: block; width: 4px; flex-shrink: 0; border-radius: 2px; background: var(--gnm-lila); }
.gnm-pod__xp { font-size: 13px; color: #a8a8a8; white-space: nowrap; }
/* Sterne */
.gnm-sterne { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; }
.gnm-sterne__bar { position: relative; letter-spacing: 2px; color: #d6d3cc; font-size: 17px; line-height: 1; }
.gnm-sterne__bar::before { content: "★★★★★"; position: absolute; inset: 0; width: var(--w); overflow: hidden; color: var(--gnm-orange); white-space: nowrap; }
.gnm-sterne__wert { font-weight: 600; color: var(--wp--preset--color--mute); }
.wp-block-shortcode:empty { display: none; }
@media (max-width: 600px) {
.gnm-fan5__note { left: 44%; top: -6%; font-size: 20px; }
.gnm-fan5__pfeil { left: 30%; top: -7%; }
}
/* --------------------------------------------------------------------------
0.4.0 · Reels, GutSparen, GNM+, WhatsApp, Newsletter, GNM App
-------------------------------------------------------------------------- */
/* Reels: Laufband mit orangem Duoton, beim Überfahren Farbe + Zoom */
.gnm-reels-fenster { overflow: hidden; margin-right: calc(-1 * var(--wp--preset--spacing--page, 0px)); }
.gnm-reels { gap: 0 !important; width: max-content; }
.gnm-reels.is-laufend { animation: gnm-reel 40s linear infinite; }
.gnm-reels:hover { animation-play-state: paused; }
@keyframes gnm-reel { to { transform: translateX(-50%); } }
.gnm-reels .gnm-reel {
position: relative; isolation: isolate; flex: 0 0 auto; margin: 0 16px 0 0 !important;
width: 240px; height: 400px; border-radius: 14px; overflow: hidden; background: var(--gnm-orange);
}
.gnm-reel a { display: block; height: 100%; color: #fff; }
.gnm-reel img {
width: 100% !important; height: 100% !important; object-fit: cover; display: block;
filter: grayscale(1) contrast(1.15) brightness(1.1); mix-blend-mode: multiply; transition: transform .5s, filter .4s;
}
.gnm-reel::before { content: ""; position: absolute; inset: 0; background: var(--gnm-orange); mix-blend-mode: multiply; opacity: .55; z-index: 1; pointer-events: none; transition: opacity .4s; }
.gnm-reel::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(0,0,0,.72)); z-index: 1; pointer-events: none; }
.gnm-reel:hover::before { opacity: 0; }
.gnm-reel:hover img { filter: none; mix-blend-mode: normal; transform: scale(1.08); }
.gnm-reel a::before {
content: ""; position: absolute; left: 16px; top: 16px; z-index: 2; width: 44px; height: 44px; border-radius: 50%;
background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6v12l10-6z' fill='%23242424'/%3E%3C/svg%3E") center / 16px no-repeat;
animation: gnm-puls 2.4s ease-out infinite;
}
@keyframes gnm-puls { 0% { box-shadow: 0 0 0 0 rgba(244,162,97,.7); } 70% { box-shadow: 0 0 0 14px rgba(244,162,97,0); } 100% { box-shadow: 0 0 0 0 rgba(244,162,97,0); } }
.gnm-reel figcaption {
position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; margin: 0 !important; pointer-events: none;
color: #fff; font-family: var(--wp--preset--font-family--newsreader); font-size: 26px; line-height: 1; font-weight: 700; text-align: left;
}
.editor-styles-wrapper .gnm-reels { animation: none; flex-wrap: wrap !important; width: auto; }
/* GutSparen */
.gnm-gs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) 260px; gap: 18px; align-items: stretch; }
.gnm-gs--leer { grid-template-columns: minmax(0, 520px); }
.gnm-gs__karte {
display: flex; flex-direction: column; gap: 8px; padding: 18px; border-radius: 22px; background: var(--gnm-lila);
color: var(--gnm-ink) !important; text-decoration: none; transition: transform .25s, box-shadow .25s;
}
.gnm-gs__karte:hover { transform: translateY(-4px); box-shadow: 6px 6px 0 var(--gnm-orange); }
.gnm-gs__kicker { font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.gnm-gs__firma { font-family: var(--wp--preset--font-family--newsreader); font-size: 28px; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; }
.gnm-gs__wert { width: fit-content; padding: 2px 9px; border-radius: 6px; background: #fff; font-family: var(--wp--preset--font-family--newsreader); font-size: 20px; font-weight: 700; line-height: 1.15; }
.gnm-gs__text { font-size: 14px; line-height: 1.45; }
.gnm-gs__mehr { margin-top: auto; padding-top: 12px; border-top: 1px solid rgba(36,36,36,.35); font-size: 13px; font-weight: 600; }
.gnm-gs__mehr::after { content: " →"; }
.gnm-gs__mehr em { font-style: normal; margin-left: 6px; padding: 1px 8px; border-radius: 999px; background: var(--gnm-orange); font-size: 11px; font-weight: 700; }
.gnm-gs__alle { display: flex; flex-direction: column; justify-content: space-between; gap: 16px; padding: 22px; border-radius: 22px; background: var(--gnm-ink); color: #fff; }
.gnm-gs__alle div { display: flex; flex-direction: column; gap: 8px; }
.gnm-gs__alle b { font-family: var(--wp--preset--font-family--newsreader); font-size: 30px; line-height: 1; font-weight: 700; }
.gnm-gs__alle span { font-size: 14px; color: #cfcfcf; }
.gnm-gs__btn {
display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; height: 46px; padding: 0 22px;
border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink) !important; font-weight: 600; text-decoration: none; transition: transform .2s;
}
.gnm-gs__btn::after { content: "→"; }
.gnm-gs__btn:hover { transform: translateY(-2px); }
/* GNM+ Karte */
.gnm-plus-karte .is-style-kicker { margin: 0; }
.gnm-plus-karte h2 { margin: 0; }
.gnm-plus-karte p { margin: 0; }
.gnm-btn-rand .wp-block-button__link { background: transparent !important; border: 1.5px solid var(--gnm-ink) !important; color: var(--gnm-ink) !important; }
.gnm-btn-rand .wp-block-button__link:hover { background: var(--gnm-ink) !important; color: #fff !important; }
/* WhatsApp */
.gnm-wa h2 { margin: 0 0 14px; font-size: clamp(38px, 4.4vw, 64px) !important; }
.gnm-meta-klein { margin: 0; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-btn-wa .wp-block-button__link::before {
content: ""; width: 20px; height: 20px; background: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 0 0-8.6 15.1L2 22l5-1.3A10 10 0 1 0 12 2zm4.5 12.1c-.2-.1-1.5-.7-1.7-.8s-.4-.1-.6.1-.6.8-.8 1-.3.2-.5.1a6.7 6.7 0 0 1-3.3-2.9c-.3-.4.2-.4.7-1.3.1-.2 0-.3 0-.4l-.8-1.8c-.2-.5-.4-.4-.6-.4h-.5a1 1 0 0 0-.7.3 3 3 0 0 0-.9 2.2 5.2 5.2 0 0 0 1.1 2.7 11.8 11.8 0 0 0 4.5 4c1.7.7 2.3.8 3.2.6a2.7 2.7 0 0 0 1.8-1.3 2.2 2.2 0 0 0 .2-1.3c-.1-.1-.2-.2-.4-.3z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.gnm-btn-wa .wp-block-button__link::after { content: none; }
.gnm-wa__chat { display: flex; flex-direction: column; gap: 10px; padding: 18px; border-radius: 24px; background: #FDF1E7; transform: rotate(1deg); margin-right: 12px; color: var(--gnm-ink); }
.gnm-wa__kopf { display: flex; align-items: center; gap: 10px; padding: 0 4px 10px; border-bottom: 1px solid #f0dcc9; font-size: 14px; font-weight: 600; }
.gnm-wa__punkt { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gnm-orange); font-family: var(--wp--preset--font-family--newsreader); font-size: 15px; font-weight: 700; }
.gnm-wa__msg { margin: 0; max-width: 88%; padding: 12px 14px 8px; border-radius: 4px 16px 16px 16px; background: #fff; font-size: 15px; line-height: 1.45; }
.gnm-wa__msg span { display: block; margin-top: 2px; text-align: right; font-size: 11px; color: #8a8a8a; }
/* Newsletter */
.gnm-nl h2 { margin: 0 0 12px; }
.gnm-nl__form { display: flex; flex-direction: column; gap: 10px; }
.gnm-nl__form label { font-size: 13px; font-weight: 600; }
.gnm-nl__form > div { display: flex; gap: 10px; }
.gnm-nl__form input {
flex: 1 1 auto; min-width: 0; height: 56px; padding: 0 22px; border: 1.5px solid var(--gnm-ink); border-radius: 999px;
background: #fff; font: inherit; font-size: 17px; color: var(--gnm-ink);
}
.gnm-nl__form input:focus { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-nl__form button {
display: inline-flex; align-items: center; gap: 10px; height: 56px; padding: 0 26px; border: 0; border-radius: 999px; cursor: pointer;
background: var(--gnm-orange); color: var(--gnm-ink); font: inherit; font-size: 16px; font-weight: 600; transition: background .2s, color .2s;
}
.gnm-nl__form button:hover { background: var(--gnm-ink); color: #fff; }
.gnm-nl__form button span { display: inline-flex; animation: gnm-hupf 1.6s ease-in-out infinite; }
@keyframes gnm-hupf { 50% { transform: translateX(5px); } }
/* GNM App */
.gnm-app { overflow: hidden; scroll-margin-top: 90px; }
.gnm-bald { display: inline-flex; align-items: center; height: 22px; margin-left: 10px; padding: 0 9px; border-radius: 999px; background: var(--gnm-ink); color: var(--gnm-lila); font-size: 10px; font-weight: 700; letter-spacing: .12em; vertical-align: middle; }
.gnm-app__psst { margin: 0 !important; color: var(--gnm-lila); font-size: clamp(28px, 2.8vw, 40px) !important; transform: rotate(-3deg); width: fit-content; }
.gnm-app__titel { margin: 10px 0 0 !important; font-size: clamp(44px, 6.4vw, 92px) !important; line-height: .9 !important; letter-spacing: -.045em; }
.gnm-app__titel span { color: var(--gnm-lila); }
.gnm-app__text { max-width: 640px; margin-top: 22px !important; color: #d9d9d9; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.5; }
.gnm-app__tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.gnm-app__tab {
height: 44px; padding: 0 18px; border: 1.5px solid #fff; border-radius: 999px; background: transparent; color: #fff;
font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; transition: transform .2s, background .2s, color .2s;
}
.gnm-app__tab:hover { transform: translateY(-2px) rotate(-1.5deg); }
.gnm-app__tab.is-aktiv { background: var(--gnm-lila); border-color: var(--gnm-lila); color: var(--gnm-ink); }
.gnm-app__caps { min-height: 30px; margin-top: 16px; }
.gnm-app__cap { display: none; margin: 0; color: var(--gnm-orange); font-size: 17px; font-weight: 500; }
.gnm-app__cap.is-aktiv { display: block; }
.gnm-app__cap::before { content: "→ "; }
.gnm-app__dl { display: flex; align-items: center; gap: 22px; margin-top: 40px; padding-top: 32px; border-top: 1px solid #3a3a3a; flex-wrap: wrap; }
.gnm-app__qr { padding: 10px; background: #fff; border-radius: 14px; line-height: 0; transform: rotate(-3deg); box-shadow: 4px 4px 0 var(--gnm-lila); }
.gnm-app__qr img { width: 132px; height: 132px; }
.gnm-app__scan { display: flex; flex-direction: column; color: #fff; }
.gnm-app__scan .is-style-hand { font-size: 32px; }
.gnm-app__scan svg { transform: scaleX(-1) rotate(-60deg); margin: 2px 0 0 -10px; }
.gnm-app__stores { display: flex; flex-direction: column; gap: 10px; }
.gnm-app__store { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 18px 0 14px; border: 1.5px solid #fff; border-radius: 999px; color: #fff; }
.gnm-app__store > span { display: flex; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.1; }
.gnm-app__store small { font-size: 11px; font-weight: 500; letter-spacing: .04em; opacity: .75; }
.gnm-app__buehne { position: relative; height: 740px; display: flex; align-items: center; justify-content: center; }
.gnm-app__phone { position: relative; width: 320px; height: 670px; animation: gnm-schweben 6s ease-in-out infinite; }
@keyframes gnm-schweben { 0%, 100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-12px) rotate(0); } }
.gnm-app__screen { position: absolute; left: 3px; top: 3px; width: 314px; height: 664px; overflow: hidden; border-radius: 46px; background: var(--gnm-paper); }
.gnm-app__screen img { display: none; width: 100%; height: auto; }
.gnm-app__screen img.is-aktiv { display: block; animation: gnm-einblenden .35s ease-out; }
@keyframes gnm-einblenden { from { opacity: 0; transform: translateY(8px); } }
.gnm-app__rahmen { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.gnm-zeichnen { stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: gnm-zeichnen 2.6s .2s ease-out forwards; }
@keyframes gnm-zeichnen { to { stroke-dashoffset: 0; } }
.gnm-app__xp { position: absolute; z-index: 3; padding: 9px 14px; border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink); font-size: 15px; font-weight: 700; box-shadow: 3px 3px 0 #fff; animation: gnm-wackeln 5s ease-in-out infinite; }
.gnm-app__xp1 { left: 6px; top: 150px; --r: -10deg; }
.gnm-app__xp2 { right: -6px; top: 470px; --r: 6deg; animation-delay: -2s; }
@keyframes gnm-wackeln { 0%, 100% { transform: rotate(var(--r)) translateY(0); } 50% { transform: rotate(var(--r)) translateY(-6px); } }
.gnm-app__stern { position: absolute; right: 30px; top: 50px; color: var(--gnm-lila); animation: gnm-drehen 16s linear infinite; }
@keyframes gnm-drehen { to { transform: rotate(360deg); } }
.gnm-app__notiz { position: absolute; left: -60px; bottom: 110px; z-index: 3; color: var(--gnm-orange); font-size: 30px; transform: rotate(-6deg); }
@media (max-width: 1100px) {
.gnm-gs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
.gnm-reels .gnm-reel { width: 190px; height: 320px; }
.gnm-reel figcaption { font-size: 22px; }
.gnm-gs { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 10px; margin-right: calc(-1 * var(--wp--preset--spacing--page, 16px)); padding-right: var(--wp--preset--spacing--page, 16px); }
.gnm-gs > * { scroll-snap-align: start; }
.gnm-gs--leer { grid-auto-columns: 100%; }
.gnm-wa__chat { margin: 8px 0 0; transform: none; }
.gnm-nl__form > div { flex-direction: column; }
.gnm-nl__form button { justify-content: center; }
.gnm-app__buehne { height: 700px; margin-top: 8px; transform: scale(.84); transform-origin: top center; margin-bottom: -112px; }
.gnm-app__notiz { display: none; }
.gnm-app__qr, .gnm-app__scan { display: none; }
.gnm-app__dl { margin-top: 28px; padding-top: 24px; }
.gnm-app__stores { flex-direction: row; flex-wrap: wrap; }
.gnm-app__tab { height: 40px; padding: 0 14px; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
.gnm-reels.is-laufend, .gnm-app__phone, .gnm-app__xp, .gnm-app__stern, .gnm-reel a::before, .gnm-nl__form button span { animation: none !important; }
.gnm-reels-fenster { overflow-x: auto; }
.gnm-zeichnen { animation: none; stroke-dashoffset: 0; }
}
/* --------------------------------------------------------------------------
0.4.1 · ePaper-Karte in der Klammer, Cover scharf und ohne Rahmen; Hören & Spielen in Geist
-------------------------------------------------------------------------- */
.gnm-epaper-klammer { padding-bottom: 0; }
.gnm-epaper-klammer .gnm-epaper5 { border-radius: 0 0 0 0; }
.gnm-fan5__c {
border: 0; background: transparent; aspect-ratio: auto; border-radius: 3px; overflow: hidden;
box-shadow: 0 22px 40px rgba(36,36,36,.30), 0 4px 10px rgba(36,36,36,.18);
backface-visibility: hidden; will-change: transform;
}
.gnm-fan5__c img, .gnm-fan5__img { width: 100%; height: auto; object-fit: contain; display: block; }
.gnm-epaper5__kicker { font-size: 13px; }
.gnm-epaper5__lead { font-weight: 500; }
/* Hören & Spielen: Sätze in Geist Halbfett statt Newsreader Fett */
.gnm-pod__h, .gnm-satz {
font-family: var(--wp--preset--font-family--geist) !important; font-weight: 600 !important;
letter-spacing: -.015em !important; line-height: 1.15 !important;
}
.gnm-pod__h { font-size: clamp(22px, 2.1vw, 30px); }
.gnm-satz { font-size: clamp(22px, 2.1vw, 30px) !important; }
/* --------------------------------------------------------------------------
0.4.2 · WhatsApp-Karte, Newsletter-Klammer rechts, Fußzeile schließt mit Klammer unten
-------------------------------------------------------------------------- */
/* WhatsApp: graue Karte */
.gnm-wa2 {
background: #F1F0EC; border: 1px solid #d9d7d0; padding: clamp(28px, 4.4vw, 64px) !important; margin: 0 !important;
}
.gnm-wa2__h { margin: 0 !important; font-size: clamp(40px, 5.2vw, 76px) !important; line-height: .98 !important; letter-spacing: -.04em; }
.gnm-wa2__sub { margin: 18px 0 0 !important; font-size: clamp(18px, 1.9vw, 26px); }
.gnm-wa2__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 22px 28px; margin-top: 28px; }
.gnm-wa2__btn {
display: inline-flex; align-items: center; gap: 16px; min-height: 72px; padding: 0 30px;
background: var(--gnm-orange); color: var(--gnm-ink) !important; text-decoration: none;
font-size: clamp(20px, 2vw, 28px); font-weight: 600; transition: background .2s, color .2s;
}
.gnm-wa2__btn span { margin-left: 18px; transition: transform .2s; }
.gnm-wa2__btn:hover { background: var(--gnm-ink); color: #fff !important; }
.gnm-wa2__btn:hover span { transform: translateX(5px); }
.gnm-wa2__qr { display: flex; align-items: center; gap: 18px; }
.gnm-wa2__qr img { width: 92px; height: 92px; border: 1px solid #d9d7d0; }
.gnm-wa2__qr span { max-width: 12ch; color: #6a3fd1; font-size: 18px; font-weight: 600; line-height: 1.25; }
.gnm-wa2__post { background: #fff; box-shadow: 0 14px 34px rgba(36,36,36,.16); font-size: 13px; color: var(--gnm-ink); }
.gnm-wa2__kopf { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid #ececec; }
.gnm-wa2__kopf b { display: block; font-size: 13px; }
.gnm-wa2__kopf small { display: block; font-size: 10.5px; }
.gnm-wa2__logo { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--gnm-ink); color: #fff; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; }
.gnm-wa2__tag { display: block; padding: 12px 0 8px; text-align: center; font-size: 10px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #777; }
.gnm-wa2__blase { display: flex; flex-direction: column; gap: 4px; margin: 0 12px 14px; padding: 4px 4px 8px; border-radius: 10px; background: #ECECEA; color: var(--gnm-ink) !important; text-decoration: none; }
.gnm-wa2__blase img.gnm-wa2__bild { width: 100% !important; height: auto !important; aspect-ratio: 5 / 2 !important; object-fit: cover; border-radius: 7px; filter: grayscale(1) contrast(1.1); margin-bottom: 6px; transition: filter .4s; }
.gnm-wa2__blase:hover img.gnm-wa2__bild { filter: none; }
.gnm-wa2__t { padding: 0 6px; font-weight: 700; line-height: 1.3; }
.gnm-wa2__x { padding: 0 6px; line-height: 1.4; }
.gnm-wa2__l { padding: 2px 6px 0; color: #2a6fb5; font-size: 11.5px; }
.gnm-wa2__z { padding: 0 6px; text-align: right; color: #8a8a8a; font-size: 10px; }
/* Newsletter: Klammer läuft nach rechts und biegt rechts nach unten */
.gnm-klammer-rechts {
position: relative; border-top: 2px solid var(--gnm-lila); border-right: 2px solid var(--gnm-lila);
border-top-right-radius: var(--gnm-radius); padding-right: clamp(16px, 1.9vw, 26px) !important; padding-bottom: 4px;
}
.gnm-klammer-rechts > .is-style-label-lila:first-child { margin-top: 0 !important; margin-bottom: clamp(16px, 1.7vw, 24px); }
.gnm-klammer-rechts > .is-style-label-lila + * { margin-top: 0 !important; }
.gnm-nl2 { gap: 20px 48px !important; padding: clamp(22px, 2.6vw, 34px) clamp(22px, 4.4vw, 64px); border: 1.5px solid var(--gnm-ink); border-radius: 14px; }
.gnm-nl2__h { flex: 1 1 380px; margin: 0 !important; font-size: clamp(30px, 3.2vw, 46px) !important; line-height: 1.02 !important; letter-spacing: -.035em; }
.gnm-nl2__form { flex: 0 1 640px; display: flex; flex-direction: column; gap: 10px; min-width: min(100%, 320px); }
.gnm-nl2__form label { font-size: 13px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--mute); }
.gnm-nl2__form > div { display: flex; }
.gnm-nl2__form input { flex: 1 1 auto; min-width: 0; height: 62px; padding: 0 20px; border: 1.5px solid var(--gnm-ink); border-right: 0; border-radius: 0; background: #fff; font: inherit; font-size: 18px; color: var(--gnm-ink); }
.gnm-nl2__form input:focus { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-nl2__form button { height: 62px; padding: 0 28px; border: 0; border-radius: 0; background: var(--gnm-lila); color: var(--gnm-ink); font: inherit; font-size: 18px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s; }
.gnm-nl2__form button:hover { background: var(--gnm-ink); color: #fff; }
/* Fußzeile: Klammer unten links schließt die Seite */
.gnm-klammer-unten {
gap: 24px 40px !important; padding: 10px 0 34px clamp(24px, 6vw, 104px);
border-left: 2px solid var(--gnm-lila); border-bottom: 2px solid var(--gnm-lila); border-bottom-left-radius: var(--gnm-radius);
}
.gnm-footer__main a { font-family: var(--wp--preset--font-family--geist); font-weight: 500; font-size: clamp(19px, 1.6vw, 24px); letter-spacing: 0; }
.gnm-footer .wp-block-social-links .wp-social-link { width: 58px; height: 58px; display: grid; place-items: center; }
.gnm-footer .wp-block-social-links .wp-social-link a { padding: 0; }
.gnm-footer .wp-block-social-links .wp-social-link svg { width: 22px; height: 22px; }
.gnm-footer__legal { padding-left: clamp(24px, 3vw, 40px); }
.gnm-footer__legal a, .gnm-footer__copy { margin: 0; font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #cfcfcf; }
.gnm-footer__legal a { color: #fff; }
@media (max-width: 781px) {
.gnm-wa2__btn { width: 100%; justify-content: center; min-height: 62px; }
.gnm-wa2__qr { display: none; }
.gnm-nl2__form > div { flex-direction: column; gap: 10px; }
.gnm-nl2__form input { border-right: 1.5px solid var(--gnm-ink); }
.gnm-klammer-unten { padding-left: 22px; }
.gnm-footer .wp-block-social-links .wp-social-link { width: 42px; height: 42px; }
.gnm-footer .wp-block-social-links { gap: 8px !important; }
.gnm-footer .wp-block-social-links .wp-social-link svg { width: 18px; height: 18px; }
.gnm-footer__legal { padding-left: 0; }
}
/* --------------------------------------------------------------------------
0.4.3 · GNM App: dunkelgrau (hebt sich von der Fußzeile ab), einklappbar
-------------------------------------------------------------------------- */
.gnm-app { background-color: #323232 !important; transition: padding .35s ease; }
.gnm-app .is-style-klammer-lila { position: relative; }
.gnm-bald { background: #242424; }
.gnm-app__toggle {
position: absolute; right: 0; top: -1px; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px;
border: 1.5px solid #fff; border-top: 0; border-radius: 0 0 10px 10px; background: transparent; color: #fff;
font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s;
}
.gnm-app__toggle:hover { background: var(--gnm-lila); border-color: var(--gnm-lila); color: var(--gnm-ink); }
.gnm-app__toggle svg { transition: transform .3s; }
.gnm-app__kurz { display: none; margin: 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.03em; }
.gnm-app__kurz span { color: var(--gnm-lila); }
.gnm-app.is-zu { padding-top: 36px !important; padding-bottom: 36px !important; }
.gnm-app.is-zu .gnm-app__raster { display: none !important; }
.gnm-app.is-zu .gnm-app__kurz { display: block; }
.gnm-app.is-zu .gnm-app__toggle svg { transform: rotate(180deg); }
.gnm-app:not(.is-zu) .gnm-app__raster { animation: gnm-einblenden .4s ease-out; }
@media (max-width: 600px) {
.gnm-app__toggle { position: static; display: flex; width: fit-content; margin: 0 0 16px auto; border-top: 1.5px solid #fff; border-radius: 999px; }
.gnm-app__toggle-txt { font-size: 13px; }
}
/* --------------------------------------------------------------------------
0.4.4 · Mobil-Durchgang (390 px)
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
/* Zweitgeschichten als kompakte Zeilen: Bild links, Text rechts (wie GuteZukunft-Liste) */
.gnm-mobil-zeile .wp-block-post-template { display: flex !important; flex-direction: column; gap: 0 !important; margin-top: 8px; }
.gnm-mobil-zeile .wp-block-post-template > li {
display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 16px; row-gap: 6px; align-content: start;
padding: 16px 0; border-top: 1px solid var(--wp--preset--color--line, #e4e2dc);
}
.gnm-mobil-zeile .wp-block-post-template > li > .wp-block-group:only-child { display: contents; }
.gnm-mobil-zeile .wp-block-post-featured-image { grid-column: 1; grid-row: 1 / span 4; margin: 0 !important; aspect-ratio: 1 !important; }
.gnm-mobil-zeile .wp-block-post-featured-image img { aspect-ratio: 1 !important; height: 100% !important; }
.gnm-mobil-zeile li > *:not(.wp-block-post-featured-image),
.gnm-mobil-zeile li > .wp-block-group:only-child > *:not(.wp-block-post-featured-image) { grid-column: 2; margin: 0 !important; }
.gnm-mobil-zeile .wp-block-post-title { font-size: 20px !important; line-height: 1.12 !important; }
.gnm-mobil-zeile .is-style-pills a { height: 22px; padding: 0 9px; font-size: 11px; }
.gnm-mobil-zeile .wp-block-post-excerpt { display: none; }
/* Claim etwas kleiner, damit „Nachrichten“ sauber in eine Zeile passt */
.gnm-claim-h1 { font-size: clamp(44px, 12.4vw, 56px) !important; }
/* Podcast: Meta in einer Zeile, Titel ruhiger */
.gnm-pod__ep { align-items: flex-start; gap: 16px; }
.gnm-pod__bild { width: 84px; }
.gnm-pod__meta { font-size: 12px; }
.gnm-pod__h { font-size: 21px; }
.gnm-pod__player { padding: 10px 12px; gap: 12px; }
.gnm-pod__play { width: 46px; height: 46px; }
/* WhatsApp-Karte: weniger Innenabstand */
.gnm-wa2 { padding: 26px 20px !important; }
.gnm-wa2__h { font-size: 38px !important; }
/* GNM App: Label-Pill nicht umbrechen, Bühne ohne Leerraum */
.gnm-app__lab-zusatz { display: none; }
.gnm-bald { margin-left: 6px; }
.gnm-app__buehne { margin-bottom: -190px; }
.gnm-app__xp1 { left: 0; }
.gnm-app__xp2 { right: 0; }
/* Abschnittsabstände etwas enger */
main.wp-block-group { --wp--style--block-gap: 64px; }
}
/* ==========================================================================
0.5.0 · Rubriken: Seitenmenü, Übersicht „Entdecken“, Rubrikseite
========================================================================== */
.gnm-seiten-h1 { margin: 0 !important; font-size: clamp(48px, 7vw, 104px) !important; line-height: .92 !important; letter-spacing: -.045em; }
.gnm-entdecken-kopf .gnm-sub { max-width: 46ch; }
/* Raster: Menü links, Inhalt rechts */
.gnm-mit-seite { display: grid; grid-template-columns: 220px minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; margin-top: var(--wp--preset--spacing--40) !important; }
.gnm-mit-seite > * { margin: 0 !important; }
.gnm-seite { position: sticky; top: 104px; max-height: calc(100vh - 128px); overflow-y: auto; scrollbar-width: thin; }
/* Seitenmenü */
.gnm-sm { display: flex; flex-direction: column; gap: 6px; padding: 4px 0 4px 18px; border-left: 2px solid var(--gnm-lila); }
.gnm-sm__titel { margin: 0 0 4px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--wp--preset--color--mute); }
.gnm-sm__mehr-titel { margin-top: 18px; }
.gnm-sm__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gnm-sm__liste a {
position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
padding: 6px 0; color: var(--gnm-ink); text-decoration: none; font-size: 16px; line-height: 1.25; transition: color .2s;
}
.gnm-sm__liste a small { font-size: 12px; color: var(--wp--preset--color--mute); font-variant-numeric: tabular-nums; }
.gnm-sm__liste a::before { content: ""; position: absolute; left: -20px; top: 50%; width: 2px; height: 0; background: var(--gnm-ink); transform: translateY(-50%); transition: height .25s; }
.gnm-sm__liste a:hover span { text-decoration: underline; text-decoration-color: var(--gnm-orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.gnm-sm__liste a.is-aktiv { font-weight: 700; }
.gnm-sm__liste a.is-aktiv::before { height: 70%; width: 4px; left: -21px; background: var(--gnm-ink); }
.gnm-sm__mehr a { font-size: 14px; color: var(--wp--preset--color--mute); }
.gnm-sm__alle { margin-bottom: 14px; font-size: 13px; font-weight: 600; color: var(--gnm-ink); text-decoration: none; }
.gnm-sm__alle:hover { color: #6a3fd1; }
/* Abschnitte je Rubrik */
.gnm-entdecken { display: flex; flex-direction: column; gap: clamp(56px, 6vw, 96px); }
.gnm-rs { scroll-margin-top: 110px; }
.gnm-rs__kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 22px; }
.gnm-rs__kopf h2 { margin: 0; font-size: clamp(40px, 5vw, 76px); line-height: .95; letter-spacing: -.04em; }
.gnm-rs__alle {
font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(17px, 1.6vw, 24px); letter-spacing: .06em; text-transform: uppercase;
color: #5B33C6 !important; text-decoration: none; white-space: nowrap;
}
.gnm-rs__alle span { display: inline-block; transition: transform .2s; }
.gnm-rs__alle:hover span { transform: translateX(5px); }
.gnm-rs__klammer { border-top: 2px solid var(--gnm-lila); border-left: 2px solid var(--gnm-lila); border-top-left-radius: var(--gnm-radius); padding: 28px 0 6px 32px; }
.gnm-rs__inhalt { display: grid; gap: 32px; }
.gnm-rs--raster .gnm-rs__inhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnm-rs--essen .gnm-rs__inhalt { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.gnm-rs--quer .gnm-rs__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.gnm-rs--feature .gnm-rs__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
/* Karten */
.gnm-k { position: relative; min-width: 0; }
.gnm-k__bild { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 3; background: #e9e7e1; }
.gnm-k__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.gnm-k:hover .gnm-k__bild img { transform: scale(1.04); }
.gnm-k__plus { position: absolute; left: 0; top: 0; z-index: 1; padding: 6px 12px; background: var(--gnm-orange); color: var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-size: 20px; font-weight: 600; line-height: 1; }
.gnm-k__txt { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; }
.gnm-k__kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-k__titel { margin: 0; font-size: clamp(22px, 2vw, 30px); line-height: 1.08; letter-spacing: -.025em; }
.gnm-k__titel a { color: inherit; text-decoration: none; background: linear-gradient(var(--gnm-orange), var(--gnm-orange)) no-repeat 0 100% / 0 2px; transition: background-size .3s; }
.gnm-k:hover .gnm-k__titel a { background-size: 100% 2px; }
.gnm-k__meta { margin: 4px 0 0; font-size: 12px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: #4a4a4a; }
.gnm-k__sterne { width: fit-content; padding: 8px 14px; background: #fff; border-radius: 8px; }
.gnm-k__sterne .gnm-sterne__bar { font-size: 20px; }
/* Querkarte: Text links, Bild rechts */
.gnm-k--quer { display: grid; grid-template-columns: minmax(0, 1fr) 38%; background: #fff; box-shadow: 0 2px 10px rgba(36,36,36,.10); min-height: 210px; }
.gnm-k--quer .gnm-k__bild { order: 2; aspect-ratio: auto; height: 100%; }
.gnm-k--quer .gnm-k__txt { order: 1; justify-content: center; padding: 22px 18px; }
.gnm-k--quer .gnm-k__titel { font-size: clamp(21px, 1.8vw, 28px); hyphens: auto; }
/* Aufmacher: Text zentriert links, großes Bild rechts; darunter zwei Zeilen */
.gnm-k--feature { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) 58%; gap: 40px; align-items: center; padding-bottom: 32px; margin-bottom: 28px; border-bottom: 1px solid #d9d7d0; }
.gnm-k--feature .gnm-k__bild { order: 2; aspect-ratio: 16 / 10; }
.gnm-k--feature .gnm-k__txt { order: 1; align-items: center; text-align: center; gap: 18px; padding: 0 12px; }
.gnm-k--feature .gnm-k__titel { font-size: clamp(36px, 4.4vw, 68px); line-height: .98; letter-spacing: -.04em; }
.gnm-k--zeile { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 20px; align-items: start; }
.gnm-k--zeile .gnm-k__bild { order: 2; aspect-ratio: 1; }
.gnm-k--zeile .gnm-k__txt { order: 1; padding-top: 0; gap: 6px; }
.gnm-k--zeile .gnm-k__titel { font-size: clamp(22px, 2vw, 30px); }
.gnm-k--zeile + .gnm-k--zeile { margin-top: 22px; padding-top: 22px; border-top: 1px solid #d9d7d0; } /* Nr. 45: Abstand zwischen den Artikeln in der Liste */
/* Rubrikseite */
.gnm-rubrik-kopf .gnm-sub, .gnm-rubrik-kopf .wp-block-term-description { margin: 0; max-width: 60ch; }
.gnm-rubrik-zahl { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: #5B33C6; }
.gnm-archiv-klammer { padding-top: 28px !important; }
.gnm-archiv .wp-block-post-template { gap: 40px 32px !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
@media (max-width: 1100px) { .gnm-archiv .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px) { .gnm-archiv .wp-block-post-template { grid-template-columns: minmax(0, 1fr) !important; } }
.gnm-archiv-txt { padding-top: 14px; }
.gnm-archiv-titel { margin: 0 !important; font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.08 !important; letter-spacing: -.025em; }
.gnm-archiv-titel a { text-decoration: none; }
.gnm-archiv-auszug { display: none; margin: 0; color: #4a4a4a; }
.gnm-archiv-auszug .wp-block-post-excerpt__more-text { display: none; }
/* Seite 1: erster Artikel als Aufmacher über die volle Breite */
body:not(.paged) .gnm-archiv .wp-block-post-template > li:first-child { grid-column: 1 / -1; padding-bottom: 36px; border-bottom: 1px solid #d9d7d0; }
body:not(.paged) .gnm-archiv li:first-child .gnm-archiv-karte { display: grid; grid-template-columns: minmax(0, 1fr) 58%; gap: 40px; align-items: center; }
body:not(.paged) .gnm-archiv li:first-child .wp-block-post-featured-image { order: 2; margin: 0; aspect-ratio: 16 / 10 !important; }
body:not(.paged) .gnm-archiv li:first-child .wp-block-post-featured-image img { aspect-ratio: 16 / 10 !important; }
body:not(.paged) .gnm-archiv li:first-child .gnm-archiv-txt { order: 1; padding: 0; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 18px; }
body:not(.paged) .gnm-archiv li:first-child .gnm-archiv-titel { font-size: clamp(36px, 4.4vw, 64px) !important; line-height: .98 !important; letter-spacing: -.04em; }
body:not(.paged) .gnm-archiv li:first-child .gnm-archiv-auszug { display: block; font-size: 18px; }
.gnm-seiten { margin-top: 56px !important; gap: 8px; font-weight: 600; }
.gnm-seiten a, .gnm-seiten .page-numbers { display: inline-grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; color: var(--gnm-ink); text-decoration: none; }
.gnm-seiten .page-numbers.current { background: var(--gnm-ink); color: #fff; }
.gnm-seiten .page-numbers.dots { border: 0; }
.gnm-seiten a:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
@media (max-width: 1100px) {
.gnm-rs--essen .gnm-rs__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-k--quer { min-height: 180px; }
}
@media (max-width: 900px) {
/* Menü wird zur klebenden Pill-Leiste unter der Kopfzeile */
.gnm-mit-seite { grid-template-columns: minmax(0, 1fr); margin-top: 8px !important; }
body.category main.wp-block-group { padding-top: 12px !important; }
.gnm-seite {
position: sticky; top: var(--gnm-kopf-hoehe, 64px); z-index: 20; max-height: none; overflow: visible;
margin: 0 calc(-1 * var(--wp--preset--spacing--page, 16px)) 24px !important; padding: 10px 0; background: var(--gnm-paper); border-bottom: 1px solid #e4e2dc;
}
.gnm-sm { flex-direction: row; align-items: center; gap: 8px; padding: 0 var(--wp--preset--spacing--page, 16px); border: 0; overflow-x: auto; scrollbar-width: none; }
.gnm-sm::-webkit-scrollbar { display: none; }
.gnm-sm__titel, .gnm-sm__mehr, .gnm-sm__mehr-titel { display: none; }
.gnm-sm__liste { flex-direction: row; gap: 8px; }
.gnm-sm__liste a { padding: 0 14px; height: 36px; align-items: center; border: 1.5px solid var(--gnm-ink); border-radius: 999px; white-space: nowrap; font-size: 14px; }
.gnm-sm__liste a small, .gnm-sm__liste a::before { display: none; }
.gnm-sm__liste a.is-aktiv { background: var(--gnm-ink); color: #fff; }
.gnm-sm__alle { margin: 0; white-space: nowrap; font-size: 14px; }
.gnm-rs { scroll-margin-top: 130px; }
.gnm-rs__klammer { padding-left: 16px; padding-top: 20px; }
.gnm-rs--raster .gnm-rs__inhalt, .gnm-rs--quer .gnm-rs__inhalt { grid-template-columns: minmax(0, 1fr); }
.gnm-k--feature { grid-template-columns: minmax(0, 1fr); gap: 18px; }
.gnm-k--feature .gnm-k__bild { order: 0; }
.gnm-k--feature .gnm-k__txt { padding: 0; }
.gnm-rs--feature .gnm-rs__inhalt { grid-template-columns: minmax(0, 1fr); gap: 20px; }
.gnm-k--zeile { grid-template-columns: minmax(0, 1fr) 96px; }
body:not(.paged) .gnm-archiv li:first-child .gnm-archiv-karte { grid-template-columns: minmax(0, 1fr); gap: 18px; }
body:not(.paged) .gnm-archiv li:first-child .wp-block-post-featured-image { order: 0; }
.gnm-archiv-klammer { padding-left: 16px !important; }
}
@media (max-width: 600px) {
.gnm-rs--essen .gnm-rs__inhalt { grid-template-columns: minmax(0, 1fr); }
.gnm-rs--raster .gnm-k, .gnm-rs--essen .gnm-k { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; align-items: start; }
.gnm-rs--raster .gnm-k__bild, .gnm-rs--essen .gnm-k__bild { aspect-ratio: 1 !important; }
.gnm-rs--raster .gnm-k__txt, .gnm-rs--essen .gnm-k__txt { padding-top: 0; gap: 6px; }
.gnm-rs--raster .gnm-k__titel, .gnm-rs--essen .gnm-k__titel, .gnm-k--quer .gnm-k__titel, .gnm-k--zeile .gnm-k__titel { font-size: 20px; }
.gnm-k__plus { font-size: 13px; padding: 4px 7px; }
.gnm-k__sterne { padding: 4px 8px; }
.gnm-k__sterne .gnm-sterne__bar { font-size: 15px; }
.gnm-k__meta { font-size: 11px; }
.gnm-k--quer { grid-template-columns: minmax(0, 1fr) 112px; min-height: 0; }
.gnm-k--quer .gnm-k__txt { padding: 14px; }
.gnm-rs__alle { font-size: 15px; }
.gnm-archiv .wp-block-post-template > li:not(:first-child) .gnm-archiv-karte,
body.paged .gnm-archiv li:first-child .gnm-archiv-karte { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; }
.gnm-archiv .wp-block-post-template > li:not(:first-child) .gnm-archiv-txt { padding-top: 0; }
.gnm-archiv .wp-block-post-template > li:not(:first-child) .wp-block-post-featured-image img { aspect-ratio: 1 !important; }
.gnm-archiv .wp-block-post-template { gap: 22px !important; }
.gnm-archiv-titel { font-size: 20px !important; }
}
/* ==========================================================================
0.6.0 · All News & Rubrikseite nach Entwurf „Idee 02 Lila“
========================================================================== */
/* Reels aus eigenen Inhalten */
.gnm-reels { display: flex; flex-wrap: nowrap; }
.gnm-reel figcaption small { display: block; margin-top: 8px; font-family: var(--wp--preset--font-family--geist); font-size: 11px; font-weight: 700; letter-spacing: .1em; color: var(--gnm-orange); }
/* All News: Kopf */
.gnm-an-h1 { margin: 0 !important; font-size: clamp(64px, 11vw, 168px) !important; line-height: .86 !important; letter-spacing: -.05em; }
.gnm-an-h1 em { font-style: italic; font-weight: 600; background: linear-gradient(var(--gnm-lila), var(--gnm-lila)) no-repeat 0 82% / 100% .26em; padding: 0 .04em; }
.gnm-an-unter { margin-top: 26px !important; }
.gnm-an-unter p { margin: 0; }
.gnm-an-hinweis { font-size: 13px; color: var(--wp--preset--color--mute); }
/* Themen-Leiste (horizontal) */
.gnm-themen { padding-bottom: 8px; }
.gnm-themen > .is-style-label { margin: 0 0 18px !important; }
.gnm-themen__reihe { display: flex; flex-wrap: wrap; gap: 8px; }
.gnm-thema {
display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border: 1.5px solid var(--gnm-ink); border-radius: 999px;
color: var(--gnm-ink) !important; text-decoration: none; font-size: 14px; font-weight: 500; white-space: nowrap; transition: background .2s, border-color .2s;
}
.gnm-thema:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-thema.is-aktiv { background: var(--gnm-lila); border-color: var(--gnm-lila); font-weight: 600; }
/* Im Fokus / Topstory */
.gnm-fokus > .is-style-label { margin: 0 0 22px !important; }
.gnm-fokus__bild { position: relative; display: block; overflow: hidden; border-radius: 6px; aspect-ratio: 16 / 7.6; }
.gnm-fokus__bild img { width: 100%; height: 100%; object-fit: cover; display: block; animation: gnm-kenburns 18s ease-in-out infinite alternate; }
@keyframes gnm-kenburns { to { transform: scale(1.06); } }
.gnm-fokus__knopf {
position: absolute; right: 22px; top: 22px; display: grid; place-items: center; width: clamp(72px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%;
background: var(--gnm-orange); color: var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(16px, 1.6vw, 24px); text-transform: uppercase;
animation: gnm-drehen-sanft 8s ease-in-out infinite;
}
@keyframes gnm-drehen-sanft { 50% { transform: rotate(-10deg); } }
.gnm-fokus__unten { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px 48px; align-items: end; margin-top: 24px; }
.gnm-fokus__pills { display: flex; gap: 6px; margin-bottom: 14px; }
.gnm-pill-klein { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border: 1px solid currentColor; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.gnm-pill-klein--plus { background: var(--gnm-orange); border-color: var(--gnm-orange); color: var(--gnm-ink); }
.gnm-fokus__titel { margin: 0; font-size: clamp(44px, 7vw, 108px); line-height: .9; letter-spacing: -.045em; }
.gnm-fokus__titel a { color: inherit; text-decoration: none; }
mark.gnm-mark { color: inherit; background: linear-gradient(var(--gnm-orange), var(--gnm-orange)) no-repeat 0 88% / 100% .3em; padding: 0 .03em; }
mark.gnm-mark--lila { background-image: linear-gradient(var(--gnm-lila), var(--gnm-lila)); }
.gnm-fokus__text { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.gnm-fokus__meta { margin: 0 0 16px; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-fokus__aktionen { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.gnm-knopf { display: inline-flex; align-items: center; gap: 12px; height: 46px; padding: 0 22px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; color: var(--gnm-ink) !important; text-decoration: none; font-weight: 500; transition: background .2s, border-color .2s; }
.gnm-knopf:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-rund { display: inline-grid; place-items: center; width: 46px; height: 46px; border: 1.5px solid var(--gnm-ink); border-radius: 50%; background: transparent; color: var(--gnm-ink); cursor: pointer; transition: background .2s; }
.gnm-rund:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-rund--klein { width: 34px; height: 34px; border-width: 1px; }
.gnm-rund.is-kopiert::after { content: "Link kopiert"; position: absolute; transform: translateY(-34px); font-size: 11px; background: var(--gnm-ink); color: #fff; padding: 3px 8px; border-radius: 6px; white-space: nowrap; }
/* Kurz gelesen */
.gnm-kurz-band { padding-top: 32px !important; padding-bottom: 32px !important; }
.gnm-kurz__innen > .is-style-label-lila { margin: 0 0 18px !important; }
.gnm-kurz ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnm-kurz li { display: flex; gap: 16px; padding: 4px 24px 4px 0; }
.gnm-kurz li + li { padding-left: 24px; border-left: 1px solid #3a3a3a; }
.gnm-kurz__nr { font-family: var(--wp--preset--font-family--geist); font-size: clamp(30px, 2.8vw, 42px); font-weight: 600; line-height: 1; color: var(--gnm-lila); }
.gnm-kurz li > div { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.gnm-kurz .gnm-pill-klein { color: #fff; }
.gnm-kurz__t { color: #fff !important; text-decoration: none; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(19px, 1.7vw, 24px); line-height: 1.12; }
.gnm-kurz__t:hover { text-decoration: underline; text-decoration-color: var(--gnm-orange); }
.gnm-kurz__meta { margin: 0; font-size: 12px; color: #a8a8a8; }
/* All News: Rubriken-Abschnitte ohne Seitenmenü über volle Breite */
.gnm-an .gnm-entdecken { gap: clamp(64px, 7vw, 112px); }
.gnm-rs__kopf > div p { margin: 8px 0 0; }
.gnm-rs__klammer--label { padding-top: 0; }
.gnm-rs__klammer--label > .is-style-label { margin: 0 0 22px !important; }
/* Rubrikseite: Kopf */
.gnm-rt__pfad { margin: 0 0 8px; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-rt__pfad a { color: var(--gnm-ink); }
.gnm-rt__zeile { display: flex; align-items: center; gap: 24px 48px; flex-wrap: wrap; }
.gnm-rt__h1 { margin: 0; font-size: clamp(72px, 13vw, 200px); line-height: .86; letter-spacing: -.05em; }
.gnm-rt__kreis { display: grid; place-items: center; align-content: center; width: clamp(88px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%; background: var(--gnm-lila); box-shadow: 4px 4px 0 var(--gnm-ink); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(-8deg); }
.gnm-rt__kreis b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(30px, 3vw, 44px); line-height: 1; letter-spacing: 0; }
.gnm-rt__text { max-width: 38ch; margin: 28px 0 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.4; }
/* In 60 Sekunden: Kreise */
.gnm-60 > .is-style-label { margin: 0 0 20px !important; }
.gnm-kreise { display: flex; align-items: center; gap: 20px 40px; }
.gnm-kreise__reihe { display: flex; gap: 22px; overflow-x: auto; padding: 4px 4px 8px; scrollbar-width: none; }
.gnm-kreise__reihe::-webkit-scrollbar { display: none; }
.gnm-kreis { flex: 0 0 auto; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--gnm-ink) !important; text-decoration: none; text-align: center; }
.gnm-kreis__bild { width: 84px; height: 84px; padding: 3px; border-radius: 50%; border: 2.5px solid var(--gnm-lila); background: #fff; transition: transform .25s; }
.gnm-kreis__bild img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: multiply; background: var(--gnm-lila); }
.gnm-kreis__bild { background: var(--gnm-lila); }
.gnm-kreis:hover .gnm-kreis__bild { transform: scale(1.06) rotate(-3deg); }
.gnm-kreis:hover img { filter: none; mix-blend-mode: normal; }
.gnm-kreis__t { font-size: 12px; font-weight: 600; line-height: 1.2; }
.gnm-kreise__notiz { position: relative; flex: 0 0 auto; margin: 0; color: var(--gnm-orange); font-size: clamp(22px, 2vw, 30px) !important; transform: rotate(-4deg); }
.gnm-kreise__notiz svg { display: block; margin: 4px 0 0 40px; }
/* Rubrikseite: Liste */
.gnm-lk { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; }
.gnm-lk__h { margin: 0; font-size: clamp(40px, 5.6vw, 84px); line-height: .95; letter-spacing: -.04em; }
.gnm-lk .gnm-sub { margin: 10px 0 0; }
.gnm-ansicht { display: inline-flex; padding: 4px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; }
.gnm-ansicht button { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: var(--gnm-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gnm-ansicht button.is-aktiv { background: var(--gnm-ink); color: #fff; }
.gnm-rubrik-filter { margin-bottom: 26px; }
.gnm-archiv2 .wp-block-post-template { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin: 0; padding: 0; }
.gnm-archiv2 .wp-block-post-template > li:first-child { grid-column: span 2; }
.gnm-archiv2 .wp-block-post-template > li:first-child .gnm-a2__titel { font-size: clamp(30px, 3vw, 44px) !important; }
.gnm-a2 { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.gnm-a2__bild { position: relative; }
.gnm-a2__bild .wp-block-post-featured-image { margin: 0; }
.gnm-archiv2 li:first-child .gnm-a2__bild .wp-block-post-featured-image img { aspect-ratio: 16 / 8.4 !important; }
.gnm-bild-label { position: absolute; left: 12px; top: 12px; z-index: 1; padding: 4px 9px; border-radius: 4px; background: var(--gnm-lila); color: var(--gnm-ink); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.gnm-a2__txt { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gnm-a2__txt > * { margin: 0 !important; }
.gnm-a2__txt .is-style-pills { display: none; }
.gnm-a2__txt .is-style-pills:has(a[href*="gnm-plus"]) { display: flex; }
.gnm-a2__titel { font-size: clamp(22px, 1.9vw, 28px) !important; line-height: 1.08 !important; letter-spacing: -.025em; }
.gnm-a2__titel a { text-decoration: none; }
.gnm-a2__auszug { font-size: 14px; line-height: 1.5; color: #3d3d3d; }
.gnm-a2__auszug .wp-block-post-excerpt__more-link { display: none; }
.gnm-a2__fuss { margin-top: auto !important; padding-top: 6px; }
.gnm-a2__fuss .gnm-k__meta { margin: 0; text-transform: none; letter-spacing: 0; font-size: 12px; color: var(--wp--preset--color--mute); }
/* Liste */
.gnm-archiv2.is-liste .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 0; }
.gnm-archiv2.is-liste .wp-block-post-template > li { grid-column: auto; padding: 22px 0; border-top: 1px solid #d9d7d0; }
.gnm-archiv2.is-liste .gnm-a2 { flex-direction: row; gap: 28px; align-items: center; }
.gnm-archiv2.is-liste .gnm-a2__bild { flex: 0 0 240px; }
.gnm-archiv2.is-liste .gnm-a2__bild img { aspect-ratio: 16 / 10 !important; }
.gnm-archiv2.is-liste li:first-child .gnm-a2__titel { font-size: clamp(22px, 1.9vw, 28px) !important; }
/* Weitere Geschichten */
.gnm-mehr-wrap { display: flex; justify-content: center; margin-top: 56px; }
.gnm-mehr {
display: inline-flex; align-items: center; gap: 18px; height: 64px; padding: 0 12px 0 30px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: transparent; cursor: pointer;
font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; color: var(--gnm-ink);
}
.gnm-mehr span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--gnm-lila); font-family: var(--wp--preset--font-family--geist); font-size: 22px; font-weight: 500; transition: transform .3s; }
.gnm-mehr:hover span { transform: rotate(90deg); }
.gnm-mehr.is-laedt span { animation: gnm-drehen 1s linear infinite; }
.gnm-js .gnm-archiv2 .gnm-seiten { display: none; }
.gnm-kat > .gnm-app, .gnm-kat > .wp-block-group.alignfull:last-child { margin-top: var(--wp--preset--spacing--60) !important; }
@media (max-width: 1000px) {
.gnm-archiv2 .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-kurz ol { grid-template-columns: minmax(0, 1fr); }
.gnm-kurz li + li { padding-left: 0; border-left: 0; border-top: 1px solid #3a3a3a; padding-top: 16px; margin-top: 12px; }
}
@media (max-width: 781px) {
/* Themen als wischbare Leiste */
.gnm-themen__reihe { flex-wrap: nowrap; overflow-x: auto; margin-right: calc(-1 * var(--wp--preset--spacing--page, 16px)); padding-right: 16px; scrollbar-width: none; }
.gnm-themen__reihe::-webkit-scrollbar { display: none; }
.gnm-fokus__bild { aspect-ratio: 4 / 3.4; }
.gnm-fokus__unten { grid-template-columns: minmax(0, 1fr); }
.gnm-fokus__titel { font-size: clamp(40px, 11.5vw, 56px); }
.gnm-kreise { flex-direction: column; align-items: flex-start; }
.gnm-kreise__notiz { display: none; }
.gnm-archiv2 .wp-block-post-template { grid-template-columns: minmax(0, 1fr); gap: 32px; }
.gnm-archiv2 .wp-block-post-template > li:first-child { grid-column: auto; }
.gnm-archiv2.is-liste .gnm-a2 { gap: 14px; align-items: flex-start; }
.gnm-archiv2.is-liste .gnm-a2__bild { flex-basis: 112px; }
.gnm-archiv2.is-liste .gnm-a2__auszug { display: none; }
.gnm-archiv2.is-liste .gnm-a2__titel { font-size: 19px !important; }
.gnm-archiv2.is-liste .gnm-bild-label { display: none; }
.gnm-rt__kreis { width: 76px; }
.gnm-mehr { height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .gnm-fokus__bild img, .gnm-fokus__knopf { animation: none; } }
.gnm-a2 > *, .gnm-a2__bild > * { margin: 0 !important; }
.gnm-a2__bild .wp-block-post-featured-image img { aspect-ratio: 16 / 10 !important; height: auto !important; }
.gnm-kreise { min-width: 0; max-width: 100%; }
.gnm-kreise__reihe { min-width: 0; max-width: 100%; }
@media (max-width: 781px) { .gnm-kreise { display: block; } .gnm-60 { overflow: hidden; } }
@media (max-width: 781px) {
.gnm-rt__zeile { flex-wrap: nowrap; justify-content: space-between; }
.gnm-rt__h1 { font-size: clamp(56px, 17vw, 88px); }
.gnm-rt__kreis { width: 74px; flex: 0 0 74px; font-size: 7.5px; letter-spacing: .06em; }
.gnm-rt__kreis b { font-size: 26px; }
/* Raster auf dem Handy: erste Geschichte groß, der Rest als kompakte Zeilen */
.gnm-archiv2:not(.is-liste) .wp-block-post-template { gap: 0; }
.gnm-archiv2:not(.is-liste) .wp-block-post-template > li:first-child { padding-bottom: 24px; }
.gnm-archiv2:not(.is-liste) .wp-block-post-template > li:not(:first-child) { padding: 18px 0; border-top: 1px solid #d9d7d0; }
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-a2 { flex-direction: row; gap: 14px; align-items: flex-start; }
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-a2__bild { flex: 0 0 112px; }
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-a2__bild img { aspect-ratio: 1 !important; }
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-bild-label,
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-a2__auszug { display: none; }
.gnm-archiv2:not(.is-liste) li:not(:first-child) .gnm-a2__titel { font-size: 19px !important; }
.gnm-archiv2 .gnm-a2__txt { gap: 6px; }
}
.gnm-mehr[hidden] { display: none !important; }
/* ==========================================================================
0.6.1 · All News: feste Rubrik-Layouts, farbige Bänder, Ticker oben
========================================================================== */
:root { --gnm-pfirsich: #FDF1E7; --gnm-lila-hell: #F1E9FF; }
.gnm-ticker-oben { margin: 0 !important; }
.gnm-ticker-oben .gnm-ticker { border-radius: 0; margin: 0; }
.gnm-an-rubriken { display: flex; flex-direction: column; gap: clamp(72px, 7vw, 112px); }
/* Volle Breite ohne Querscrollen */
.gnm-band { position: relative; padding-block: clamp(56px, 6vw, 96px); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); background: var(--band); }
.gnm-band--pfirsich { --band: var(--gnm-pfirsich); }
.gnm-band--lila { --band: var(--gnm-lila-hell); }
.gnm-band--dunkel { --band: var(--gnm-ink); color: #fff; }
.gnm-band--dunkel a, .gnm-band--dunkel h2, .gnm-band--dunkel h3 { color: #fff; }
.gnm-band--dunkel .gnm-an-s__klammer { border-color: #fff; }
.gnm-band--dunkel .gnm-an__meta, .gnm-band--dunkel .gnm-an-s__unter { color: #bdbdbd; }
.gnm-band--dunkel .gnm-knopf { border-color: #fff; color: #fff !important; }
.gnm-band--dunkel .gnm-pill-klein:not(.gnm-pill-klein--plus) { color: #fff; }
.gnm-band + .gnm-band { margin-top: calc(-1 * clamp(72px, 7vw, 112px)); }
/* Kopf */
.gnm-an-s__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 22px; }
.gnm-an-s__kopf h2 { margin: 0; font-size: clamp(44px, 6vw, 92px); line-height: .92; letter-spacing: -.045em; }
.gnm-an-s__unter { margin: 12px 0 0; font-size: 16px; color: #4a4a4a; }
.gnm-knopf--klein { height: 44px; padding: 0 20px; font-size: 14px; font-weight: 600; white-space: nowrap; background: transparent; }
.gnm-an-s__klammer { border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: var(--gnm-radius); padding: 0 0 4px clamp(16px, 2.3vw, 34px); }
.gnm-an-s__klammer > .is-style-label, .gnm-an-s__klammer > .is-style-label-lila { margin: 0 0 26px !important; }
.gnm-an-s__inhalt { display: grid; gap: 30px; align-items: start; }
/* Karten */
.gnm-an-k { min-width: 0; }
.gnm-an-k__bild { display: block; overflow: hidden; border-radius: 6px; background: #e9e7e1; }
.gnm-an-k__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.gnm-an-k:hover .gnm-an-k__bild img { transform: scale(1.04); }
.gnm-an-k__txt { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 16px; }
.gnm-an-k__titel { margin: 0; font-size: clamp(21px, 1.8vw, 27px); line-height: 1.1; letter-spacing: -.025em; }
.gnm-an-k__titel a, .gnm-an-z__titel a, .gnm-an-bz__titel a { color: inherit; text-decoration: none; background: linear-gradient(var(--gnm-orange), var(--gnm-orange)) no-repeat 0 100% / 0 2px; transition: background-size .3s; }
.gnm-an-k:hover .gnm-an-k__titel a, .gnm-an-z__titel a:hover, .gnm-an-bz:hover .gnm-an-bz__titel a { background-size: 100% 2px; }
.gnm-an-k.is-gross .gnm-an-k__titel { font-size: clamp(30px, 3vw, 44px); line-height: 1.02; letter-spacing: -.035em; }
.gnm-an__meta { margin: 0; font-size: 13px; color: var(--wp--preset--color--mute); }
/* Layouts */
.gnm-an-s--aufmacher .gnm-an-s__inhalt { grid-template-columns: 1.45fr 1fr 1fr; }
.gnm-an-s--essen .gnm-an-s__inhalt { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gnm-an-s--essen .gnm-an-k:nth-child(2) { margin-top: 96px; }
.gnm-an-s--essen .gnm-an-k:nth-child(4) { margin-top: 54px; }
.gnm-an-s--drei .gnm-an-s__inhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnm-an-s--quer .gnm-an-s__inhalt { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gnm-an-s--feature .gnm-an-s__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 40px; }
.gnm-an-s--zukunft .gnm-an-s__inhalt { grid-template-columns: 1.1fr 1fr; gap: 40px; }
/* Bildzeilen */
.gnm-an-liste { border-top: 1px solid currentColor; border-color: rgba(127,127,127,.4); }
.gnm-an-bz { display: grid; grid-template-columns: 120px minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 16px 0; border-bottom: 1px solid rgba(127,127,127,.4); }
.gnm-an-bz__bild { display: block; aspect-ratio: 4 / 2.8; overflow: hidden; border-radius: 4px; }
.gnm-an-bz__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gnm-an-bz__txt { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.gnm-an-bz__pills { display: flex; gap: 6px; flex-wrap: wrap; }
.gnm-an-bz__pills:empty { display: none; }
.gnm-an-bz__titel { margin: 0; font-size: clamp(19px, 1.6vw, 23px); line-height: 1.12; letter-spacing: -.02em; }
.gnm-an-bz__pfeil { font-size: 18px; transition: transform .2s; }
.gnm-an-bz:hover .gnm-an-bz__pfeil { transform: translateX(4px); }
/* Drei Rubriken nebeneinander: Bild + höchstens zwei Folgetexte */
.gnm-an-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; align-items: start; }
.gnm-an-trio--2 .gnm-an-trio { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-an-trio--1 .gnm-an-trio { grid-template-columns: minmax(0, 1fr); max-width: 33%; }
.gnm-an-trio__spalte { border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: var(--gnm-radius); padding: 0 0 4px clamp(16px, 1.9vw, 26px); scroll-margin-top: 110px; }
.gnm-an-trio__spalte > .is-style-label, .gnm-an-trio__spalte > .is-style-label-lila { margin: 0 0 22px !important; }
.gnm-an-trio__zeilen { margin: 18px 0 24px; border-top: 1.5px solid var(--gnm-ink); }
.gnm-an-z { padding: 14px 0; border-bottom: 1px solid #d9d7d0; }
.gnm-an-z__titel { margin: 0 0 6px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(18px, 1.45vw, 21px); font-weight: 700; line-height: 1.15; letter-spacing: -.02em; }
.gnm-an-z__titel .gnm-pill-klein { height: 20px; font-size: 9.5px; vertical-align: 3px; margin-left: 4px; }
/* Good Work: großes Bild mit Textkarte */
.gnm-an-s--goodwork .gnm-an-s__inhalt { grid-template-columns: 1.6fr 1fr; gap: 28px; }
.gnm-an-gw { position: relative; min-height: 100%; }
.gnm-an-gw__bild { display: block; height: 100%; min-height: 460px; overflow: hidden; border-radius: 6px; }
.gnm-an-gw__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s; }
.gnm-an-gw:hover .gnm-an-gw__bild img { transform: scale(1.03); }
.gnm-an-gw__karte { position: absolute; left: 24px; bottom: 24px; max-width: min(78%, 520px); display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 22px 26px; background: #fff; border-radius: 8px; box-shadow: 0 10px 30px rgba(36,36,36,.15); }
.gnm-an-gw__karte div { display: flex; gap: 6px; }
.gnm-an-gw__karte .gnm-an-k__titel { font-size: clamp(26px, 2.6vw, 38px); line-height: 1.02; }
.gnm-an-gw__rechts { display: flex; flex-direction: column; gap: 26px; }
/* Bänder: Karten auf Farbe */
.gnm-band--pfirsich .gnm-k--quer, .gnm-band--lila .gnm-k--quer { box-shadow: none; }
@media (max-width: 1100px) {
.gnm-an-s--essen .gnm-an-s__inhalt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-an-s--essen .gnm-an-k:nth-child(n) { margin-top: 0; }
.gnm-an-s--quer .gnm-an-s__inhalt { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
.gnm-an-trio, .gnm-an-trio--2 .gnm-an-trio { grid-template-columns: minmax(0, 1fr); gap: 48px; }
.gnm-an-trio--1 .gnm-an-trio { max-width: none; }
.gnm-an-s--aufmacher .gnm-an-s__inhalt { grid-template-columns: 1fr 1fr; }
.gnm-an-s--aufmacher .gnm-an-k.is-gross { grid-column: 1 / -1; }
.gnm-an-s--zukunft .gnm-an-s__inhalt, .gnm-an-s--goodwork .gnm-an-s__inhalt, .gnm-an-s--feature .gnm-an-s__inhalt { grid-template-columns: minmax(0, 1fr); }
.gnm-an-gw__bild { min-height: 0; aspect-ratio: 4 / 3; }
.gnm-an-gw__karte { position: relative; left: auto; bottom: auto; z-index: 1; max-width: none; margin: 14px 0 0; } /* Nr. 42: Karte unter dem Bild statt darüber (nichts überlappt) */
.gnm-an-gw__karte div { flex-wrap: wrap; }
}
@media (max-width: 600px) {
.gnm-an-s--aufmacher .gnm-an-s__inhalt, .gnm-an-s--essen .gnm-an-s__inhalt, .gnm-an-s--drei .gnm-an-s__inhalt { grid-template-columns: minmax(0, 1fr); gap: 0; }
.gnm-an-s--aufmacher .gnm-an-k:not(.is-gross), .gnm-an-s--essen .gnm-an-k:not(:first-child), .gnm-an-s--drei .gnm-an-k:not(:first-child),
.gnm-an-gw__rechts .gnm-an-k { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid rgba(127,127,127,.35); }
.gnm-an-s--aufmacher .gnm-an-k:not(.is-gross) .gnm-an-k__bild, .gnm-an-s--essen .gnm-an-k:not(:first-child) .gnm-an-k__bild, .gnm-an-s--drei .gnm-an-k:not(:first-child) .gnm-an-k__bild, .gnm-an-gw__rechts .gnm-an-k__bild { aspect-ratio: 1 !important; }
.gnm-an-s--aufmacher .gnm-an-k:not(.is-gross) .gnm-an-k__txt, .gnm-an-s--essen .gnm-an-k:not(:first-child) .gnm-an-k__txt, .gnm-an-s--drei .gnm-an-k:not(:first-child) .gnm-an-k__txt, .gnm-an-gw__rechts .gnm-an-k__txt { padding-top: 0; gap: 6px; }
.gnm-an-s .gnm-an-k:first-child, .gnm-an-k.is-gross { padding-bottom: 20px; }
.gnm-an-k__titel { font-size: 20px; }
.gnm-an-k.is-gross .gnm-an-k__titel, .gnm-an-s .gnm-an-k:first-child .gnm-an-k__titel { font-size: 26px; }
.gnm-an-gw__rechts { gap: 0; }
.gnm-an-bz { grid-template-columns: 96px minmax(0, 1fr); }
.gnm-an-bz__pfeil { display: none; }
.gnm-an-s__kopf .gnm-knopf--klein { height: 38px; padding: 0 14px; font-size: 13px; }
}
/* ==========================================================================
0.7.0 · Seitenmenü (Burger) nach Entwurf „Menü“
========================================================================== */
.gnm-burger-knopf { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; background: transparent; color: var(--gnm-ink); cursor: pointer; border-radius: 50%; transition: background .2s; }
.gnm-burger-knopf:hover { background: var(--gnm-lila-hell); }
.gnm-mn { position: fixed; inset: 0; z-index: 9999; }
.gnm-mn[hidden] { display: none; }
.gnm-mn__dimmer { position: absolute; inset: 0; background: rgba(36,36,36,.55); opacity: 0; transition: opacity .3s; }
.gnm-mn__blick { position: absolute; left: min(520px, 46vw); top: 80px; margin: 0; color: #fff; font-size: 30px !important; transform: rotate(-4deg); opacity: 0; transition: opacity .4s .2s; pointer-events: none; }
.gnm-mn__panel {
position: absolute; left: 0; top: 0; bottom: 0; width: min(480px, 100%); overflow-y: auto; overscroll-behavior: contain;
background: var(--gnm-lila); color: var(--gnm-ink); padding: 0 26px 32px; transform: translateX(-100%); transition: transform .35s cubic-bezier(.2,.7,.2,1); outline: none;
}
.gnm-mn.is-offen .gnm-mn__dimmer, .gnm-mn.is-offen .gnm-mn__blick { opacity: 1; }
.gnm-mn.is-offen .gnm-mn__panel { transform: none; }
body.gnm-mn-offen { overflow: hidden; }
.gnm-mn a { color: var(--gnm-ink); text-decoration: none; }
.gnm-mn__kopf { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; justify-content: space-between; margin: 0 -26px 20px; padding: 14px 26px; background: var(--gnm-lila); border-bottom: 1.5px solid var(--gnm-ink); }
.gnm-mn__zu { display: grid; place-items: center; width: 40px; height: 40px; border: 0; background: transparent; color: var(--gnm-ink); cursor: pointer; border-radius: 50%; }
.gnm-mn__zu:hover { background: rgba(255,255,255,.35); }
.gnm-mn__logo img { height: 34px; width: auto; display: block; }
.gnm-mn__plus { display: inline-flex; align-items: center; height: 36px; padding: 0 16px; border-radius: 999px; background: var(--gnm-orange); font-weight: 700; font-size: 14px; }
.gnm-mn__suche { position: relative; display: flex; align-items: center; }
.gnm-mn__suche svg { position: absolute; left: 18px; pointer-events: none; }
.gnm-mn__suche input { width: 100%; height: 54px; padding: 0 18px 0 48px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; box-shadow: 4px 4px 0 var(--gnm-ink); font: inherit; font-size: 17px; color: var(--gnm-ink); }
.gnm-mn__suche input:focus { outline: 3px solid #fff; outline-offset: 2px; }
.gnm-mn__gefragt { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 28px; }
.gnm-mn__gefragt .is-style-hand { color: var(--gnm-orange); font-size: 22px; margin-right: 2px; text-shadow: 0 0 1px rgba(0,0,0,.15); }
.gnm-mn__chip { display: inline-flex; align-items: center; height: 32px; padding: 0 13px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; font-size: 13px; font-weight: 600; transition: background .2s; }
.gnm-mn__chip:hover { background: var(--gnm-orange); }
.gnm-mn__block { border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: var(--gnm-radius); padding: 0 0 6px 20px; margin-bottom: 26px; }
.gnm-mn__block > .is-style-label { margin: 0 0 16px !important; }
.gnm-mn__all { display: inline-flex; align-items: baseline; gap: 10px; margin-bottom: 10px; font-family: var(--wp--preset--font-family--newsreader); font-size: 40px; font-weight: 700; letter-spacing: -.035em; line-height: 1; background: linear-gradient(#fff, #fff) no-repeat 0 92% / 100% .22em; }
.gnm-mn__all span { font-family: var(--wp--preset--font-family--geist); font-size: 20px; transition: transform .2s; }
.gnm-mn__all:hover span { transform: translateX(5px); }
.gnm-mn__rubriken { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.gnm-mn__rubriken a { display: block; padding: 9px 0; border-bottom: 1px solid rgba(36,36,36,.3); font-family: var(--wp--preset--font-family--newsreader); font-size: 19px; font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }
.gnm-mn__rubriken a:hover, .gnm-mn__rubriken a[aria-current] { background: linear-gradient(#fff, #fff) no-repeat 0 calc(100% - 6px) / 100% 3px; }
.gnm-mn__lesen { list-style: none; margin: 0; padding: 0; }
.gnm-mn__lesen a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid rgba(36,36,36,.3); }
.gnm-mn__lesen b { font-family: var(--wp--preset--font-family--newsreader); font-size: 22px; letter-spacing: -.02em; }
.gnm-mn__lesen small { flex-basis: 100%; font-size: 12px; opacity: .8; }
.gnm-mn__lesen a:hover b { text-decoration: underline; text-decoration-color: #fff; text-decoration-thickness: 3px; text-underline-offset: 4px; }
.gnm-mn__bald { display: inline-flex; align-items: center; height: 18px; padding: 0 8px; border-radius: 999px; background: var(--gnm-ink); color: var(--gnm-orange); font-family: var(--wp--preset--font-family--geist); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; vertical-align: middle; }
.gnm-mn__abo { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; padding: 20px; border-radius: 14px; background: var(--gnm-ink); color: #fff !important; box-shadow: 5px 5px 0 #fff; transition: transform .2s; }
.gnm-mn__abo:hover { transform: translate(-2px, -2px); }
.gnm-mn__abo-k { font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gnm-lila); }
.gnm-mn__abo b { font-family: var(--wp--preset--font-family--newsreader); font-size: 28px; line-height: 1; letter-spacing: -.03em; }
.gnm-mn__abo em { font-style: normal; color: var(--gnm-lila); }
.gnm-mn__abo-t { font-size: 13px; color: #d9d9d9; }
.gnm-mn__abo-btn { display: flex; justify-content: space-between; align-items: center; height: 44px; margin-top: 6px; padding: 0 18px; border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink); font-weight: 600; font-size: 14px; }
.gnm-mn__app { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-bottom: 26px; padding: 14px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: #fff; }
.gnm-mn__app b { display: block; font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; }
.gnm-mn__app small { display: block; font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-mn__mehr-t { margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-mn__mehr { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
.gnm-mn__mehr a { font-size: 14px; }
.gnm-mn__mehr a:hover { text-decoration: underline; }
@media (max-width: 600px) {
.gnm-mn__panel { width: 100%; padding-inline: 18px; }
.gnm-mn__kopf { margin-inline: -18px; padding-inline: 18px; }
.gnm-mn__blick { display: none; }
.gnm-mn__rubriken { grid-template-columns: 1fr; }
.gnm-mn__rubriken a { font-size: 26px; padding: 11px 0; }
.gnm-mn__all { font-size: 46px; }
}
@media (prefers-reduced-motion: reduce) { .gnm-mn__panel, .gnm-mn__dimmer { transition: none; } }
/* Kopfzeile: „Entdecken“ lila auf All News und Rubrikseiten */
body.category .gnm-pills .wp-block-navigation-item:first-child > a,
body.page-template-entdecken .gnm-pills .wp-block-navigation-item:first-child > a,
.gnm-pills .current-menu-item > a { background: var(--gnm-lila) !important; border-color: var(--gnm-lila) !important; }
/* ==========================================================================
0.7.0 · Rubrikseite: Feinschliff nach Entwurf
========================================================================== */
.gnm-rt__zeile { align-items: flex-end; }
.gnm-rt__kreis { margin-bottom: 18px; }
.gnm-zeit { display: none; margin: 0; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-lecker { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; width: 100%; padding: 10px 14px; border: 1.5px solid var(--gnm-ink); border-radius: 12px; background: #fff; }
.gnm-lecker__k { display: inline-flex; align-items: center; height: 20px; padding: 0 9px; border-radius: 999px; background: var(--gnm-ink); color: #fff; font-size: 9.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gnm-lecker .gnm-sterne__bar::before { color: #7A4FE0; }
.gnm-lecker .gnm-sterne__wert { color: var(--gnm-ink); }
.gnm-fokus .gnm-lecker { max-width: 320px; margin: 4px 0 14px; }
/* Karten mit Rahmen (je Rubrik abgestimmt) */
.gnm-archiv2 .gnm-a2 { transition: transform .25s, box-shadow .25s; }
body.category-good-food-stories .gnm-a2, body.category-good-work .gnm-a2,
body.category-gutezukunft .gnm-a2, body.category-fuereinander .gnm-a2, body.category-bildung .gnm-a2 {
padding: 12px 12px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 12px; background: #fff;
}
body.category-gutezukunft .gnm-a2, body.category-fuereinander .gnm-a2, body.category-bildung .gnm-a2 { border-color: var(--gnm-lila); }
body.category-good-food-stories .gnm-a2:hover, body.category-good-work .gnm-a2:hover { box-shadow: 5px 5px 0 var(--gnm-orange); transform: translate(-2px, -2px); }
body.category-gutezukunft .gnm-a2:hover, body.category-fuereinander .gnm-a2:hover, body.category-bildung .gnm-a2:hover { box-shadow: 5px 5px 0 var(--gnm-lila); transform: translate(-2px, -2px); }
/* Farbband hinter der Liste */
body.category-good-food-stories .gnm-kat-liste, body.category-good-work .gnm-kat-liste { --band: var(--gnm-pfirsich); }
body.category-gutezukunft .gnm-kat-liste, body.category-bildung .gnm-kat-liste, body.category-tiere .gnm-kat-liste { --band: var(--gnm-lila-hell); }
body.category-good-food-stories .gnm-kat-liste, body.category-good-work .gnm-kat-liste,
body.category-gutezukunft .gnm-kat-liste, body.category-bildung .gnm-kat-liste, body.category-tiere .gnm-kat-liste {
padding-block: clamp(56px, 6vw, 96px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax);
}
body.category-gutezukunft .gnm-a2, body.category-bildung .gnm-a2, body.category-tiere .gnm-a2 { background: #fff; }
/* Liste wie im Entwurf „Wissenschaft“: Zeit links, Text, Bild rechts */
.gnm-archiv2.is-liste .gnm-zeit { display: block; }
@media (min-width: 782px) {
.gnm-archiv2.is-liste .gnm-a2 { display: grid; grid-template-columns: 140px minmax(0, 1fr) 240px; gap: 28px; align-items: start; padding: 0; border: 0; background: none; box-shadow: none !important; transform: none !important; }
.gnm-archiv2.is-liste .gnm-a2__bild { grid-column: 3; grid-row: 1; flex: none; }
.gnm-archiv2.is-liste .gnm-a2__txt { grid-column: 1 / 3; grid-row: 1; display: grid; grid-template-columns: 140px minmax(0, 1fr); column-gap: 28px; row-gap: 8px; align-content: start; }
.gnm-archiv2.is-liste .gnm-a2__txt > * { grid-column: 2; }
.gnm-archiv2.is-liste .gnm-a2__txt > .gnm-zeit, .gnm-archiv2.is-liste .gnm-a2__txt > .is-style-pills { grid-column: 1; }
.gnm-archiv2.is-liste .gnm-a2__txt > .gnm-zeit { grid-row: 1; }
.gnm-archiv2.is-liste .gnm-a2__txt > .is-style-pills { grid-row: 2; }
.gnm-archiv2.is-liste .gnm-a2__txt > .gnm-a2__titel { grid-row: 1; font-size: clamp(24px, 2.2vw, 32px) !important; }
.gnm-archiv2.is-liste .gnm-a2__auszug { display: block; }
.gnm-archiv2.is-liste .gnm-bild-label { display: none; }
}
.gnm-kat .gnm-wa2, .gnm-kat > .wp-block-group.alignwide.is-style-klammer-lila:has(.gnm-wa2) { margin-top: var(--wp--preset--spacing--60); }
.gnm-mn, .gnm-mn *, .gnm-mn *::before, .gnm-mn *::after { box-sizing: border-box; }
.gnm-mn__all { display: flex; width: fit-content; }
.gnm-mn__blick { left: 510px; }
.gnm-lecker { box-sizing: border-box; }
@media (min-width: 782px) {
.gnm-rt__zeile { display: block; }
.gnm-rt__h1 { display: inline; }
.gnm-rt__kreis { display: inline-grid; vertical-align: middle; margin: 0 0 0 clamp(16px, 2vw, 32px); position: relative; top: -.1em; }
}
.gnm-rt__zeile > p { display: inline; margin: 0; } .gnm-rt__zeile > br { display: none; }
/* ==========================================================================
0.8.0 · ePaper / Magazin (Übersicht und Ausgabe)
========================================================================== */
body.gnm-bereich-epaper .gnm-pills .wp-block-navigation-item:nth-child(2) > a { background: var(--gnm-lila) !important; border-color: var(--gnm-lila) !important; }
.gnm-magazin > .gnm-ah, .gnm-magazin > p:first-child + .gnm-ah { margin-top: 0 !important; }
/* Hero */
.gnm-ah { --band: #EEEBE6; padding-block: 40px clamp(56px, 6vw, 88px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.gnm-ah--einzel { --band: var(--gnm-pfirsich); }
.gnm-ah .gnm-rt__pfad { margin-bottom: 14px; }
.gnm-ah__klammer { border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: var(--gnm-radius); padding: 0 0 6px clamp(16px, 2.3vw, 34px); }
.gnm-ah__klammer > .is-style-label { margin: 0 0 22px !important; }
.gnm-ah__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 420px); gap: 32px clamp(32px, 5vw, 88px); align-items: center; }
.gnm-ah__kicker { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-ah__pills { display: flex; gap: 6px; }
.gnm-ah__titel { margin: 10px 0 0; font-size: clamp(64px, 9.4vw, 140px); line-height: .88; letter-spacing: -.05em; }
.gnm-ah__titel .gnm-mark { background-size: 100% .2em; }
.gnm-ah__satz { max-width: 44ch; margin: 22px 0 18px; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.45; }
.gnm-ah__text > .gnm-ah__kicker:not(:first-child) { margin-bottom: 12px; color: var(--wp--preset--color--mute); }
.gnm-ah__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; }
.gnm-knopf--orange { background: var(--gnm-orange); border-color: var(--gnm-orange); font-weight: 600; }
.gnm-knopf--orange:hover { background: var(--gnm-ink) !important; border-color: var(--gnm-ink) !important; color: #fff !important; }
.gnm-knopf--dunkel { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff !important; font-weight: 600; }
.gnm-knopf--dunkel:hover { background: var(--gnm-lila) !important; border-color: var(--gnm-lila) !important; color: var(--gnm-ink) !important; }
.gnm-ah__login { margin: 16px 0 0; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-ah__login a { color: var(--gnm-ink); font-weight: 600; }
.gnm-ah__cover { position: relative; display: block; width: min(100%, 400px); justify-self: center; transform: rotate(3deg); transition: transform .45s cubic-bezier(.2,.7,.2,1); }
.gnm-ah__cover img { display: block; width: 100%; height: auto; border-radius: 2px; box-shadow: 14px 14px 0 var(--gnm-lila), 0 30px 50px rgba(36,36,36,.28); }
.gnm-ah--einzel .gnm-ah__cover { transform: rotate(0); }
.gnm-ah--einzel .gnm-ah__cover img { box-shadow: 10px 10px 0 var(--gnm-lila), 0 30px 50px rgba(36,36,36,.22); }
.gnm-ah__cover:hover { transform: rotate(0) translateY(-8px); }
.gnm-ah--einzel .gnm-ah__cover:hover { transform: rotate(-2deg) translateY(-6px); }
.gnm-ah__nr { position: absolute; right: -28px; top: -30px; display: grid; place-items: center; width: clamp(76px, 7vw, 104px); aspect-ratio: 1; border-radius: 50%; background: var(--gnm-lila); box-shadow: 4px 4px 0 var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(26px, 2.6vw, 38px); font-weight: 700; color: var(--gnm-ink); transform: rotate(-6deg); }
.gnm-ah--einzel .gnm-ah__nr { display: none; }
.gnm-ah__notiz { position: absolute; left: -96px; bottom: 30px; color: var(--gnm-orange); font-size: clamp(20px, 1.9vw, 28px) !important; line-height: 1.05; transform: rotate(-10deg); text-shadow: 0 0 1px rgba(0,0,0,.08); }
.gnm-ah--einzel .gnm-ah__notiz { left: auto; right: -40px; top: -48px; bottom: auto; transform: rotate(8deg); }
/* Archiv */
.gnm-aa__kopf h2, .gnm-lm__kopf h2, .gnm-faq h2 { margin: 0; font-size: clamp(48px, 6.6vw, 100px); line-height: .92; letter-spacing: -.045em; }
.gnm-aa__zahl { margin: 10px 0 22px; font-size: 14px; color: var(--wp--preset--color--mute); }
.gnm-aa .is-style-klammer > .is-style-label, .gnm-aa__klammer > .is-style-label { margin: 0 0 18px !important; }
.gnm-aa__jahre { margin-bottom: 26px; }
button.gnm-thema { background: transparent; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.gnm-aa__jahre .gnm-thema.is-aktiv { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff !important; }
.gnm-aa__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px clamp(20px, 2.6vw, 40px); }
.gnm-ak { display: flex; flex-direction: column; color: var(--gnm-ink) !important; text-decoration: none; }
.gnm-ak[hidden] { display: none; }
.gnm-ak__cover { position: relative; display: block; aspect-ratio: 3 / 4; padding: 0 6% 0; }
.gnm-ak__cover img { width: 100%; height: 100%; object-fit: cover; display: block; box-shadow: 0 14px 28px rgba(36,36,36,.22); transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s; }
.gnm-ak:nth-child(3n+1) .gnm-ak__cover img { transform: rotate(-1.5deg); }
.gnm-ak:nth-child(3n+3) .gnm-ak__cover img { transform: rotate(1.5deg); }
.gnm-ak:hover .gnm-ak__cover img { transform: translateY(-10px) rotate(0); box-shadow: 0 26px 40px rgba(36,36,36,.28); }
.gnm-ak__neu { position: absolute; right: 2%; top: -10px; padding: 3px 9px; border-radius: 6px; background: var(--gnm-lila); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; transform: rotate(8deg); }
.gnm-ak__zeile { display: flex; justify-content: space-between; margin-top: 22px; padding-top: 10px; border-top: 5px solid var(--gnm-ink); font-size: 11px; font-weight: 600; letter-spacing: .06em; }
.gnm-ak__mehr { transition: transform .2s; }
.gnm-ak:hover .gnm-ak__mehr { transform: translateX(4px); color: #5B33C6; }
.gnm-ak__titel { margin-top: 6px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2vw, 28px); font-weight: 700; line-height: 1.08; letter-spacing: -.025em; }
/* Abo-Karte */
.gnm-abo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 340px); gap: 32px; align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: 18px; background: var(--gnm-lila); box-shadow: 8px 8px 0 var(--gnm-ink); }
.gnm-abo__k { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-abo h2 { margin: 0; max-width: 11ch; font-size: clamp(44px, 5.6vw, 84px); line-height: .9; letter-spacing: -.045em; }
.gnm-abo__l > p:not(.gnm-abo__k) { margin: 18px 0; font-size: 16px; }
.gnm-abo__knoepfe { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.gnm-abo__notiz { color: var(--gnm-orange); font-size: 24px !important; transform: rotate(-5deg); text-shadow: 0 0 1px rgba(0,0,0,.1); }
.gnm-abo__liste { list-style: none; margin: 0; padding: 10px 22px; border-radius: 12px; background: var(--gnm-ink); color: #fff; }
.gnm-abo__liste li { display: flex; gap: 14px; align-items: baseline; padding: 14px 0; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(18px, 1.6vw, 22px); font-weight: 700; }
.gnm-abo__liste li + li { border-top: 1px solid #3a3a3a; }
.gnm-abo__liste span { font-family: var(--wp--preset--font-family--geist); font-size: 11px; font-weight: 600; color: var(--gnm-lila); }
/* FAQ */
.gnm-faq h2 { margin-bottom: 22px; }
.gnm-faq .is-style-klammer > .is-style-label { margin: 0 0 6px !important; }
.gnm-faq details { border-bottom: 1.5px solid var(--gnm-ink); }
.gnm-faq summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer; list-style: none; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(20px, 1.9vw, 26px); font-weight: 700; letter-spacing: -.02em; }
.gnm-faq summary::-webkit-details-marker { display: none; }
.gnm-faq__plus { position: relative; flex: 0 0 38px; height: 38px; border: 1.5px solid var(--gnm-ink); border-radius: 50%; transition: background .2s; }
.gnm-faq__plus::before, .gnm-faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); transition: transform .25s; }
.gnm-faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.gnm-faq details[open] .gnm-faq__plus::after { transform: translate(-50%, -50%) rotate(0); }
.gnm-faq summary:hover .gnm-faq__plus { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-faq__a p { max-width: 64ch; margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
/* Ausgabe: Lesemoment */
.gnm-lm__kopf { margin-bottom: 22px; }
.gnm-lm .is-style-klammer > .is-style-label { margin: 0 0 20px !important; }
.gnm-lm__wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gnm-lm__k { display: flex; gap: 18px; align-items: flex-start; padding: 20px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; color: var(--gnm-ink) !important; text-decoration: none; transition: transform .2s, box-shadow .2s, background .2s; }
.gnm-lm__k b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(40px, 4vw, 58px); line-height: .9; }
.gnm-lm__k span { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.gnm-lm__k strong { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(24px, 2.2vw, 32px); line-height: 1; }
.gnm-lm__k small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-lm__k.is-aktiv { background: var(--gnm-lila); }
.gnm-lm__k:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--gnm-ink); }
.gnm-lm__viewer { position: relative; margin-top: 20px; padding: clamp(18px, 2.4vw, 32px); border: 1.5px dashed var(--gnm-ink); border-radius: 14px; scroll-margin-top: 100px; }
.gnm-lm__blick { position: absolute; left: 22px; top: -18px; margin: 0; padding: 0 8px; background: var(--gnm-paper); color: var(--gnm-orange); font-size: 26px !important; }
/* 0.33.3: Mit Steady-Paywall braucht der Bereich Platz für die Karte (Widget füllt von der Marke bis zum Ende des Bereichs). */
.gnm-lm__viewer--pw { min-height: max(1100px, 125vh); }
.gnm-lm__viewer iframe { display: block; width: 100%; max-width: 1100px; height: auto; aspect-ratio: 9 / 7; margin: 0 auto; border: 0; border-radius: 6px; background: #fff; }
.gnm-lm__viewer > p:empty { display: none; }
@media (max-width: 900px) {
.gnm-ah__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-ah__cover { order: -1; width: min(72%, 320px); margin: 30px 0 10px; }
.gnm-ah__notiz { left: auto; right: -64px; bottom: auto; top: 46%; }
.gnm-ah--einzel .gnm-ah__notiz { right: -24px; top: -40px; }
.gnm-ah__nr { right: -20px; top: -24px; }
.gnm-aa__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 18px; }
.gnm-abo, .gnm-lm__wahl { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
.gnm-ah__titel { font-size: clamp(54px, 16vw, 72px); }
.gnm-ah__notiz { right: -54px; font-size: 18px !important; }
.gnm-ak__titel { font-size: 18px; }
.gnm-ak__zeile { flex-direction: column; gap: 2px; font-size: 10px; }
.gnm-ak__mehr { display: none; }
.gnm-aa__jahre { flex-wrap: nowrap; }
.gnm-lm__viewer { padding: 14px; }
.gnm-lm__viewer iframe { aspect-ratio: 3 / 4; }
}
.gnm-ah__notiz { z-index: 3; left: -118px; bottom: 18px; }
.gnm-ah__cover img { position: relative; z-index: 1; }
.gnm-ah__nr { z-index: 2; }
body.gnm-bereich-epaper .gnm-pills .wp-block-navigation-item:first-child > a { background: transparent !important; border-color: var(--gnm-ink) !important; }
.gnm-ah--einzel .gnm-ah__notiz { right: 6px; top: -56px; }
/* ==========================================================================
0.9.0 · Artikel nach Entwurf „Artikel“
========================================================================== */
.gnm-fortschritt { position: fixed; left: 0; right: 0; top: 0; z-index: 200; height: 4px; pointer-events: none; }
.admin-bar .gnm-fortschritt { top: 32px; }
.gnm-fortschritt span { display: block; height: 100%; width: 100%; background: var(--gnm-lila); transform-origin: 0 50%; transform: scaleX(var(--gnm-gelesen, 0)); }
/* Zwei Lesebalken waren doppelt gemoppelt (und der lila lief in den Text): Ist der orange Balken links (Worth the Read) sichtbar („shown“), entfällt der lila oben. Fehlt er oder ist er (noch) nicht eingeblendet, bleibt der lila als Ersatz. */
body:has(#wtr-progress.shown) .gnm-fortschritt { display: none; }
/* Kopf */
.gnm-ak2__klammer { border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: var(--gnm-radius); padding: 0 0 0 clamp(16px, 2.3vw, 34px); }
.gnm-ak2__klammer > .is-style-label { margin: 0 0 20px !important; }
.gnm-ak2__pills { display: flex; flex-wrap: wrap; gap: 6px; }
.gnm-ak2__titel { margin: 14px 0 0; max-width: 15ch; font-size: clamp(48px, 8vw, 120px); line-height: .92; letter-spacing: -.045em; overflow-wrap: break-word; }
.gnm-ak2__titel .gnm-mark { background-size: 100% .2em; }
.gnm-ak2__unter { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 380px); gap: 24px 56px; align-items: end; margin-top: 28px; }
.gnm-ak2__unter:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }
.gnm-ak2__vorspann { max-width: 46ch; margin: 0; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.45; }
.gnm-ak2__meta { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 26px; padding: 18px 0 22px; border-top: 1px solid #d9d7d0; }
.gnm-ak2__autor { display: flex; align-items: center; gap: 12px; }
.gnm-ak2__autor b { display: block; font-size: 14px; }
.gnm-ak2__autor b a { color: inherit; text-decoration: none; }
.gnm-ak2__autor b a:hover { text-decoration: underline; }
.gnm-ak2__autor small { display: block; font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-av { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 50%; background: var(--gnm-lila); box-shadow: 2px 2px 0 var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-size: 20px; font-weight: 700; }
.gnm-ak2__tools { display: flex; gap: 8px; }
.gnm-rund { font: inherit; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: 15px; text-decoration: none; position: relative; }
/* Anhören-Player (dunkle Pille) */
.gnm-ap { display: flex; align-items: center; gap: 14px; padding: 10px 18px 10px 10px; border-radius: 999px; background: var(--gnm-ink); color: #fff; --gnm-fortschritt: 0%; }
.gnm-ap button { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border: 0; border-radius: 50%; background: var(--gnm-lila); color: var(--gnm-ink); cursor: pointer; transition: transform .2s; }
.gnm-ap button:hover { transform: scale(1.06); }
.gnm-ap button svg { width: 20px; height: 20px; }
.gnm-ap.is-playing button svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.gnm-ap > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gnm-ap__k { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gnm-lila); }
.gnm-ap .gnm-pod__wave { height: 24px; }
.gnm-ap .gnm-pod__wave i { background: #fff; width: 3px; }
/* Bild */
.gnm-ak2__bild { margin: 0; }
.gnm-ak2__bild img { display: block; width: 100%; height: auto; max-height: 720px; object-fit: cover; border-radius: 6px; }
.gnm-ak2__bild figcaption { margin-top: 10px; font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--mute); }
/* Leseraster: Werkzeug | Text | Seitenleiste */
.gnm-lese { display: grid; grid-template-columns: 56px minmax(0, 680px) minmax(240px, 320px); justify-content: space-between; gap: 32px; align-items: start; }
.gnm-lese > * { margin: 0 !important; }
.gnm-lese__links, .gnm-lese__rechts { position: sticky; top: 110px; }
.gnm-wz { display: flex; flex-direction: column; gap: 10px; }
/* Fließtext */
.gnm-text { font-size: var(--gnm-schrift, 18px); line-height: 1.7; }
.gnm-text > * { margin-block: 0 1.1em; }
.gnm-text > p:first-of-type::first-letter { float: left; margin: .08em .14em 0 0; padding: .06em .12em 0; background: var(--gnm-lila); border-radius: 4px; box-shadow: 3px 3px 0 var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-size: 3.4em; font-weight: 700; line-height: .8; }
.gnm-text h2 { margin: 1.8em 0 .55em; font-size: clamp(28px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -.03em; scroll-margin-top: 110px; }
.gnm-text h2 strong, .gnm-text h3 strong { font-weight: inherit; }
.gnm-text h3 { margin: 1.6em 0 .5em; font-size: clamp(22px, 2vw, 27px); line-height: 1.15; letter-spacing: -.02em; }
.gnm-text a { color: inherit; text-decoration: underline; text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-text a:hover { text-decoration-color: var(--gnm-orange); }
.gnm-text figure { margin-block: 1.6em; }
.gnm-text figcaption, .gnm-text .wp-element-caption { font-size: 12px; letter-spacing: .04em; color: var(--wp--preset--color--mute); }
.gnm-text img { border-radius: 6px; height: auto; }
.gnm-text blockquote, .gnm-text .wp-block-quote { margin: 1.8em 0; padding: 0; border: 0; }
.gnm-text blockquote::before { content: "“"; display: block; height: .5em; color: var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader); font-size: 96px; font-weight: 700; line-height: 1; }
.gnm-text blockquote p { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(26px, 2.6vw, 36px); font-weight: 700; line-height: 1.12; letter-spacing: -.025em; }
.gnm-text blockquote cite { font-size: 13px; font-style: normal; color: var(--wp--preset--color--mute); }
.gnm-text mark[class*="has-"] { background: none !important; }
.gnm-text h2 mark, .gnm-text h2 a[href="#audio"] { color: inherit !important; text-decoration: none; }
.gnm-text .wp-block-audio { padding: 14px; border-radius: 14px; background: var(--gnm-ink); }
.gnm-text .wp-block-audio audio { width: 100%; }
.gnm-text .wp-block-table table { width: 100%; border-collapse: collapse; font-size: 15px; }
.gnm-text .wp-block-table th, .gnm-text .wp-block-table td { padding: 10px 12px; border-bottom: 1px solid #d9d7d0; text-align: left; }
.gnm-text .wp-block-table thead th { border-bottom: 2px solid var(--gnm-ink); }
.gnm-text details, .gnm-text .wp-block-accordion-item { border-bottom: 1.5px solid var(--gnm-ink); }
.gnm-text ul, .gnm-text ol { padding-left: 1.2em; }
.gnm-text li::marker { color: #6a3fd1; font-weight: 700; }
/* Kurz gesagt */
.gnm-text .is-style-kurz-gesagt { position: relative; padding: 22px 26px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: var(--gnm-lila); box-shadow: 6px 6px 0 var(--gnm-ink); font-size: 15px; line-height: 1.5; }
.gnm-text .is-style-kurz-gesagt::after { content: "In 20 Sekunden"; position: absolute; right: 20px; top: 18px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-text .is-style-kurz-gesagt .gnm-kg__titel, .gnm-text .is-style-kurz-gesagt > p:first-child { margin: 0 0 10px; font-family: var(--wp--preset--font-family--caveat); font-size: 30px; font-weight: 700; line-height: 1; }
.gnm-text .is-style-kurz-gesagt > p:first-child::first-letter { all: unset; }
.gnm-text .is-style-kurz-gesagt ol { list-style: none; counter-reset: kg; margin: 0; padding: 0; }
.gnm-text .is-style-kurz-gesagt li { counter-increment: kg; display: flex; gap: 10px; margin: 0 0 8px; }
.gnm-text .is-style-kurz-gesagt li::before { content: counter(kg); flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: var(--gnm-ink); color: #fff; font-size: 11px; font-weight: 700; }
/* Aus dem WhatsApp-Kanal */
.gnm-text .is-style-kanal-zitat { max-width: 440px; padding: 14px; border-radius: 16px; background: var(--gnm-pfirsich); font-size: 14px; line-height: 1.5; }
.gnm-text .is-style-kanal-zitat::before { content: "Aus dem GNM-Kanal auf WhatsApp"; display: block; margin-bottom: 10px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-text .is-style-kanal-zitat > p { margin: 0; padding: 12px 14px 22px; border-radius: 4px 14px 14px 14px; background: #fff; position: relative; }
.gnm-text .is-style-kanal-zitat > p::after { content: "GNM-Kanal"; position: absolute; right: 12px; bottom: 6px; font-size: 10px; color: #8a8a8a; }
.gnm-text .is-style-kanal-zitat > p::first-letter { all: unset; }
/* Seitenleiste */
.gnm-toc { border-top: 2px solid var(--gnm-ink); padding-top: 12px; margin-bottom: 24px; }
.gnm-toc > p { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-toc ol { list-style: none; margin: 0; padding: 0; }
.gnm-toc a { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid #d9d7d0; color: var(--gnm-ink); text-decoration: none; font-family: var(--wp--preset--font-family--geist); font-size: 16px; font-weight: 600; line-height: 1.3; transition: color .2s; }
.gnm-toc a span { font-family: var(--wp--preset--font-family--geist); font-size: 11px; font-weight: 600; color: var(--wp--preset--color--mute); padding-top: 3px; }
.gnm-toc a:hover, .gnm-toc a.is-aktiv { color: #5B33C6; }
.gnm-toc a.is-aktiv span { color: #5B33C6; }
.gnm-lohnt { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 20px; border-radius: 14px; background: var(--gnm-ink); color: #fff !important; text-decoration: none; box-shadow: 5px 5px 0 var(--gnm-lila); }
.gnm-lohnt .is-style-hand { color: var(--gnm-lila); font-size: 28px; }
.gnm-lohnt > span:nth-child(2) { font-size: 13px; line-height: 1.5; color: #d9d9d9; }
.gnm-lohnt b { padding: 1px 7px; border-radius: 999px; background: var(--gnm-lila); color: var(--gnm-ink); font-size: 11px; }
.gnm-lohnt__btn { width: fit-content; padding: 8px 16px; border: 1.5px solid #fff; border-radius: 999px; font-size: 13px; font-weight: 600; }
.gnm-lohnt .gnm-mn__bald { position: absolute; right: 16px; top: 18px; }
/* Ende */
.gnm-ae { margin-top: 2.4em; }
.gnm-ae__stern { display: block; text-align: center; color: var(--gnm-lila); font-size: 22px; }
.gnm-ae__leit { margin: 22px 0 26px; padding: 20px 0; border-block: 2px solid var(--gnm-ink); text-align: center; }
.gnm-ae__leit small, .gnm-ae__teilen small, .gnm-ae__themen > small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-ae__leit p { max-width: 22ch; margin: 8px auto 0; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2vw, 27px); font-weight: 700; line-height: 1.12; letter-spacing: -.02em; }
.gnm-ae__teilen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 20px 22px; border-radius: 14px; background: var(--gnm-pfirsich); }
.gnm-ae__teilen b { display: block; margin: 4px 0; font-family: var(--wp--preset--font-family--newsreader); font-size: 22px; line-height: 1.05; }
.gnm-ae__teilen span { font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-ae__knoepfe { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gnm-ae__knoepfe .gnm-rund { width: 40px; height: 40px; background: #fff; }
.gnm-ae__kanal { margin: 12px 0 26px; font-size: 13px; }
.gnm-ae__kanal a { color: inherit; font-weight: 700; }
.gnm-ae__themen { margin-bottom: 22px; }
.gnm-ae__themen > small { margin-bottom: 10px; }
.gnm-ae__autor { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1.5px solid var(--gnm-ink); }
.gnm-ae__autor > span:nth-child(2) { flex: 1; }
.gnm-ae__autor small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-ae__autor b { font-family: var(--wp--preset--font-family--newsreader); font-size: 22px; }
/* Weitere Perspektiven */
.gnm-wps__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gnm-wp { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 12px 12px 16px; border: 1.5px solid var(--gnm-lila); border-radius: 12px; background: #fff; transition: transform .2s, box-shadow .2s; }
.gnm-wp:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--gnm-lila); }
.gnm-wp__bild { position: relative; display: block; width: 100%; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; }
.gnm-wp__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gnm-wp h3 { margin: 0; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.1; letter-spacing: -.02em; }
.gnm-wp h3 a { color: inherit; text-decoration: none; }
.gnm-wp p { margin: 0; font-size: 14px; line-height: 1.45; color: #3d3d3d; }
/* Good-Newsletter */
.gnm-gnl > .is-style-label { margin: 0 0 14px !important; }
.gnm-gnl__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 520px); gap: 24px 48px; align-items: end; }
.gnm-gnl h2 { margin: 0; font-size: clamp(40px, 5vw, 72px); line-height: .95; letter-spacing: -.04em; }
.gnm-gnl__form { display: flex; flex-direction: column; gap: 8px; }
.gnm-gnl__form > label:first-child { font-size: 13px; font-weight: 600; }
.gnm-gnl__form > div { display: flex; gap: 8px; }
.gnm-gnl__form input[type=email] { flex: 1; min-width: 0; height: 52px; padding: 0 20px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; font: inherit; font-size: 16px; }
.gnm-gnl__form button { height: 52px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink); font: inherit; font-weight: 600; cursor: pointer; }
.gnm-gnl__form button:hover { background: var(--gnm-ink); color: #fff; }
.gnm-gnl__ok { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-gnl__ok a { color: inherit; }
@media (max-width: 1100px) {
.gnm-lese { grid-template-columns: 48px minmax(0, 1fr); }
.gnm-lese__rechts { grid-column: 2; position: static; }
}
@media (max-width: 781px) {
.gnm-lese { grid-template-columns: minmax(0, 1fr); }
.gnm-lese__links { display: none; }
.gnm-lese__rechts { grid-column: auto; }
.gnm-ak2__unter { grid-template-columns: minmax(0, 1fr); }
.gnm-ak2__titel { font-size: clamp(40px, 11.5vw, 56px); }
.gnm-ak2__bild { margin-inline: calc(-1 * var(--wp--preset--spacing--page, 16px)); }
.gnm-ak2__bild img { border-radius: 0; }
.gnm-ak2__bild figcaption { padding-inline: var(--wp--preset--spacing--page, 16px); }
.gnm-wps__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-gnl__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-gnl__form > div { flex-direction: column; }
.gnm-ae__teilen { padding: 18px; }
}
.gnm-ap .gnm-pod__wave { flex: none; width: 100%; height: 24px; }
.gnm-gnl__ok { display: block; }
.gnm-gnl__ok input { margin: 0 6px 0 0; vertical-align: -2px; }
@media (max-width: 781px) { .gnm-gnl__form input[type=email] { flex: none; height: 52px; } .gnm-ak2__meta { flex-wrap: nowrap; } .gnm-ak2__tools .gnm-rund { width: 40px; height: 40px; } }
/* ==========================================================================
0.10.0 · Podcast Weltaufgang (Übersicht und Folge)
========================================================================== */
body.gnm-bereich-podcast .gnm-pills .wp-block-navigation-item:nth-child(3) > a { background: var(--gnm-lila) !important; border-color: var(--gnm-lila) !important; }
.gnm-pc { display: flex; flex-direction: column; gap: clamp(64px, 7vw, 112px); }
.gnm-fz[hidden] { display: none !important; }
/* Kopf */
.gnm-pc__h1 { margin: 6px 0 0; font-size: clamp(76px, 15vw, 230px); line-height: .82; letter-spacing: -.055em; }
.gnm-pc__unter { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 32px; margin-top: 22px; }
.gnm-pc__claim { margin: 0 0 8px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(26px, 2.8vw, 40px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.gnm-pc__unter .gnm-sub { max-width: 54ch; }
.gnm-pc__hoeren { display: flex; flex-wrap: wrap; gap: 8px; }
.gnm-pc__hoeren .gnm-knopf svg { flex: 0 0 auto; }
/* Neuestes Gespräch */
.gnm-pc__neu > .is-style-label { margin: 0 0 22px !important; }
.gnm-pc__buehne { position: relative; overflow: hidden; border-radius: 8px; aspect-ratio: 16 / 7.4; background: var(--gnm-ink); }
.gnm-pc__buehne > img { width: 100%; height: 100%; object-fit: cover; display: block; animation: gnm-kenburns 20s ease-in-out infinite alternate; }
.gnm-pc__neu-k { position: absolute; right: 26px; top: 26px; display: grid; place-items: center; width: clamp(70px, 6.6vw, 96px); aspect-ratio: 1; border-radius: 50%; background: var(--gnm-orange); font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(16px, 1.6vw, 22px); font-weight: 700; text-transform: uppercase; animation: gnm-drehen-sanft 8s ease-in-out infinite; }
.gnm-pc__balken { position: absolute; left: 22px; right: 22px; bottom: 22px; display: flex; align-items: center; gap: 16px; padding: 12px 24px 12px 12px; border-radius: 999px; background: rgba(36,36,36,.9); backdrop-filter: blur(6px); color: #fff; --gnm-fortschritt: 0%; }
.gnm-pc__balken > button, .gnm-fz .gnm-mp button, .gnm-aza > button { display: grid; place-items: center; flex: 0 0 auto; border: 0; border-radius: 50%; background: var(--gnm-lila); color: var(--gnm-ink); cursor: pointer; transition: transform .2s; }
.gnm-pc__balken > button { width: 58px; height: 58px; }
.gnm-pc__balken > button svg { width: 22px; height: 22px; }
.gnm-pc__balken > button:hover, .gnm-mp button:hover, .gnm-aza > button:hover { transform: scale(1.07); }
.is-playing > button svg path, .gnm-pc__balken.is-playing > button svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.gnm-pc__balken > div { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.gnm-pc__balken-t { color: #fff !important; text-decoration: none; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(20px, 2.2vw, 32px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gnm-pc__balken .gnm-pod__wave { height: 22px; }
.gnm-pc__balken .gnm-pod__wave i, .gnm-fp .gnm-pod__wave i { background: #fff; width: 3px; }
/* Folgenliste */
.gnm-pc__play-notiz { color: var(--gnm-orange); font-size: clamp(22px, 2vw, 30px) !important; transform: rotate(-5deg); }
.gnm-pc__filter { margin-bottom: 8px; }
.gnm-pc__filter .gnm-thema.is-aktiv { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff !important; }
.gnm-fz { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 18px 28px; align-items: center; padding: 26px 18px 26px 0; border-bottom: 1.5px solid var(--gnm-ink); }
.gnm-fz__bild { display: block; width: 132px; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: 5px 5px 0 var(--gnm-lila); transition: transform .3s; }
.gnm-fz:hover .gnm-fz__bild { transform: rotate(-4deg) scale(1.03); }
.gnm-fz__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.gnm-fz__txt { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.gnm-fz__k { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-fz h3 { margin: 0; font-size: clamp(26px, 3vw, 42px); line-height: 1; letter-spacing: -.035em; }
.gnm-fz h3 a { color: inherit; text-decoration: none; }
.gnm-fz h3 a:hover { text-decoration: underline; text-decoration-color: var(--gnm-orange); text-decoration-thickness: 3px; }
.gnm-fz--woche h3 { font-size: clamp(22px, 2.2vw, 30px); }
.gnm-fz__teaser { max-width: 64ch; margin: 2px 0 6px; font-size: 14px; line-height: 1.5; color: #3d3d3d; }
.gnm-mp { display: flex; align-items: center; gap: 14px; max-width: 480px; --gnm-fortschritt: 0%; }
.gnm-mp button { width: 40px; height: 40px; }
.gnm-mp button svg { width: 16px; height: 16px; }
.gnm-mp .gnm-pod__wave { height: 22px; flex: 1; }
.gnm-mp .gnm-pod__wave i { background: var(--gnm-ink); width: 3px; }
.gnm-mp small { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--wp--preset--color--mute); white-space: nowrap; }
.gnm-fz__aktion { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Hör, wo du willst */
.gnm-pc__wo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 26px 28px; border: 1.5px solid var(--gnm-ink); border-radius: 16px; }
.gnm-pc__wo .is-style-hand { margin: 0; color: var(--gnm-orange); font-size: clamp(26px, 2.6vw, 36px) !important; }
/* Artikel zum Anhören */
.gnm-pc__aza .is-style-klammer > .is-style-label { margin: 0 0 14px !important; }
.gnm-aza__liste { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--gnm-ink); }
.gnm-aza { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid #d9d7d0; --gnm-fortschritt: 0%; background: linear-gradient(var(--gnm-lila-hell), var(--gnm-lila-hell)) no-repeat 0 0 / var(--gnm-fortschritt) 100%; }
.gnm-aza > button { width: 44px; height: 44px; }
.gnm-aza > button svg { width: 16px; height: 16px; }
.gnm-aza small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--mute); }
.gnm-aza b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(19px, 1.7vw, 24px); letter-spacing: -.02em; }
.gnm-aza__min { font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-aza > a { font-size: 13px; font-weight: 600; color: var(--gnm-ink); }
.gnm-aza__hinweis { margin: 12px 0 0; font-size: 12px; color: var(--wp--preset--color--mute); }
/* Folge: dunkler Kopf */
body.gnm-podcast-folge .gnm-podcast { padding-top: 0 !important; }
.gnm-fh { --band: var(--gnm-ink); padding-block: 36px clamp(110px, 10vw, 150px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); color: #fff; }
.gnm-fh .gnm-rt__pfad, .gnm-fh .gnm-rt__pfad a { color: #cfcfcf; }
.gnm-fh__klammer { margin-top: 12px; border-top: 2px solid var(--gnm-lila); border-left: 2px solid var(--gnm-lila); border-top-left-radius: var(--gnm-radius); padding: 0 0 6px clamp(16px, 2.3vw, 34px); }
.gnm-fh__klammer > .is-style-label-lila { margin: 0 0 18px !important; }
.gnm-fh__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 400px); gap: 32px 56px; align-items: center; }
.gnm-fh__kicker { margin: 0 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #d9d9d9; }
.gnm-fh__gross { margin: 0; color: var(--gnm-lila); font-size: clamp(56px, 8vw, 124px); line-height: .88; letter-spacing: -.05em; }
.gnm-fh__klein { margin: 18px 0 0; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(28px, 3.4vw, 50px); font-weight: 700; line-height: 1; letter-spacing: -.03em; }
.gnm-fh__sub { max-width: 46ch; margin: 16px 0 0; font-size: 17px; color: #d9d9d9; }
.gnm-fh__kreis { position: relative; width: 100%; max-width: 400px; aspect-ratio: 1; justify-self: center; }
.gnm-fh__kreis svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; animation: gnm-drehen 40s linear infinite; }
.gnm-fh__kreis text { fill: var(--gnm-lila); font-family: var(--wp--preset--font-family--geist); font-size: 22px; font-weight: 700; letter-spacing: 4px; }
.gnm-fh__kreis img { position: absolute; inset: 15%; width: 70%; height: 70%; object-fit: cover; border-radius: 50%; border: 4px solid var(--gnm-lila); }
/* Folge: großer lila Player */
.gnm-fp { position: relative; z-index: 2; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px 20px; align-items: center; margin-top: calc(-1 * clamp(64px, 6vw, 96px)) !important; padding: 22px 26px; border-radius: 18px; background: var(--gnm-lila); box-shadow: 8px 8px 0 var(--gnm-ink); --gnm-fortschritt: 0%; }
.gnm-fp__play { display: grid; place-items: center; width: 70px; height: 70px; border: 2px solid var(--gnm-ink); border-radius: 50%; background: #fff; color: var(--gnm-ink); cursor: pointer; transition: transform .2s; }
.gnm-fp__play:hover { transform: scale(1.06); }
.gnm-fp__play svg { width: 26px; height: 26px; }
.gnm-fp.is-playing .gnm-fp__play svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
.gnm-fp__mitte small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-fp__mitte b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2.2vw, 30px); font-variant-numeric: tabular-nums; }
.gnm-fp__tempo { display: flex; gap: 6px; }
.gnm-fp__tempo button { height: 32px; padding: 0 12px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.gnm-fp__tempo button.is-aktiv { background: #fff; }
.gnm-fp__welle { grid-column: 1 / -1; cursor: pointer; }
.gnm-fp .gnm-pod__wave { height: 46px; gap: 4px; }
.gnm-fp .gnm-pod__wave i { background: var(--gnm-ink); width: 4px; }
.gnm-fp__hinweis { grid-column: 1 / -1; margin: 0; font-size: 11px; }
.gnm-fp__hinweis a { color: inherit; }
/* Folge: Text */
.gnm-lese--folge .gnm-lese__mitte .gnm-fz__k { margin-bottom: 6px; }
.gnm-fu__h { margin: 0 0 18px; font-size: clamp(44px, 5.4vw, 80px); line-height: .92; letter-spacing: -.045em; }
.gnm-fu__text > p:first-of-type::first-letter { all: unset; }
.gnm-fu__lh { margin: 32px 0 14px; font-size: clamp(26px, 2.4vw, 34px); letter-spacing: -.03em; }
.gnm-lz__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.gnm-lz { position: relative; display: block; padding: 14px 40px 14px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 12px; color: var(--gnm-ink) !important; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.gnm-lz:hover { transform: translate(-2px, -2px); box-shadow: 4px 4px 0 var(--gnm-lila); }
.gnm-lz small { display: block; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--wp--preset--color--mute); }
.gnm-lz b { font-family: var(--wp--preset--font-family--newsreader); font-size: 19px; }
.gnm-lz > span { position: absolute; right: 14px; top: 12px; }
.gnm-wh { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, 1fr); overflow: hidden; border-radius: 16px; background: var(--gnm-ink); color: #fff !important; text-decoration: none; }
.gnm-wh img { width: 100%; height: 100%; min-height: 260px; object-fit: cover; display: block; transition: transform .6s; }
.gnm-wh:hover img { transform: scale(1.04); }
.gnm-wh__txt { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 16px; padding: clamp(24px, 4vw, 52px); }
.gnm-wh__txt small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gnm-lila); }
.gnm-wh__txt b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(32px, 4.4vw, 64px); line-height: .95; letter-spacing: -.04em; }
.gnm-wh .gnm-knopf { border-color: #fff; color: #fff !important; }
@media (max-width: 900px) {
.gnm-fh__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-fh__kreis { order: -1; max-width: 260px; }
.gnm-lz__raster { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 781px) {
.gnm-pc__buehne { aspect-ratio: 4 / 4.6; }
.gnm-pc__balken { flex-wrap: nowrap; left: 12px; right: 12px; bottom: 12px; border-radius: 18px; padding: 10px; }
.gnm-pc__balken > button { width: 48px; height: 48px; }
.gnm-pc__balken-t { white-space: normal; font-size: 19px; }
.gnm-pc__balken .gnm-pod__wave { display: none; }
.gnm-fz { grid-template-columns: 76px minmax(0, 1fr); gap: 12px 16px; align-items: start; padding-right: 0; }
.gnm-fz__bild { width: 76px; box-shadow: 3px 3px 0 var(--gnm-lila); }
.gnm-fz__aktion { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; }
.gnm-fz h3 { font-size: 23px; }
.gnm-fz__teaser { display: none; }
.gnm-mp small { display: none; }
.gnm-aza { grid-template-columns: auto minmax(0, 1fr); }
.gnm-aza__min { display: none; }
.gnm-aza > a { grid-column: 2; }
.gnm-fp { grid-template-columns: auto minmax(0, 1fr); padding: 16px; }
.gnm-fp__tempo { grid-column: 1 / -1; }
.gnm-fp__play { width: 56px; height: 56px; }
.gnm-wh { grid-template-columns: minmax(0, 1fr); }
.gnm-wh img { min-height: 0; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) { .gnm-fh__kreis svg, .gnm-pc__buehne > img, .gnm-pc__neu-k { animation: none; } }
.gnm-fh__kreis { overflow: hidden; border-radius: 50%; }
.gnm-text { overflow-wrap: anywhere; }
.gnm-fp__welle { min-width: 0; overflow: hidden; }
.gnm-fp .gnm-pod__wave { width: 100%; }
@media (max-width: 781px) { .gnm-fp .gnm-pod__wave { gap: 3px; } .gnm-fp .gnm-pod__wave i { width: 3px; } }
.gnm-lz, .gnm-lz b, .gnm-wh__txt b, .gnm-fh__gross, .gnm-fh__klein { overflow-wrap: anywhere; min-width: 0; } .gnm-lz b { display: block; } .gnm-lz__raster > * { min-width: 0; }
.gnm-fp .gnm-pod__wave { justify-content: space-between; } .gnm-fp .gnm-pod__wave i { flex: 1 1 0; max-width: 6px; min-width: 2px; }
/* ==========================================================================
0.11.0 · GNM+ Abo, Firmen-Abo, Für Unternehmen
========================================================================== */
.gnm-seite-abo, .gnm-seite-firma { display: flex; flex-direction: column; gap: clamp(64px, 7vw, 112px); }
.gnm-angebot > .gnm-dark:last-child, .gnm-angebot > .gnm-app { margin-top: clamp(64px, 7vw, 112px) !important; }
.gnm-ab__h { margin: 0; font-size: clamp(44px, 6.4vw, 96px); line-height: .92; letter-spacing: -.045em; }
.gnm-ab > .gnm-an-s__unter { margin-top: 12px; }
.gnm-ab__k { margin-top: 22px; }
.gnm-ab__k > .is-style-label { margin: 0 0 22px !important; }
.gnm-faq--innen details:first-child { border-top: 1.5px solid var(--gnm-ink); }
/* Abo: Hero */
.gnm-abo-h { --band: var(--gnm-pfirsich); padding-block: 8px clamp(56px, 6vw, 88px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); margin-top: -40px !important; padding-top: 40px; }
.gnm-abo-h__buehne { position: relative; aspect-ratio: 1 / .92; width: 100%; max-width: 460px; justify-self: center; }
.gnm-abo-h__kreis { position: absolute; left: 14%; top: 10%; width: 82%; aspect-ratio: 1; border-radius: 50%; background: var(--gnm-lila); }
.gnm-abo-h__cover { position: absolute; width: 40%; height: auto; box-shadow: 0 18px 30px rgba(36,36,36,.28); }
.gnm-abo-h__cover--0 { left: 22%; top: 2%; transform: rotate(4deg); z-index: 2; }
.gnm-abo-h__cover--1 { left: 0; top: 12%; transform: rotate(-8deg); z-index: 1; }
.gnm-abo-h__karte { position: absolute; right: -4%; bottom: 2%; z-index: 3; width: 46%; padding: 10px; border-radius: 10px; background: var(--gnm-ink); color: #fff !important; text-decoration: none; box-shadow: 6px 6px 0 #fff, 0 16px 30px rgba(36,36,36,.3); transform: rotate(2deg); transition: transform .3s; }
.gnm-abo-h__karte:hover { transform: rotate(0) translateY(-4px); }
.gnm-abo-h__karte small { display: block; margin-bottom: 6px; font-size: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gnm-lila); }
.gnm-abo-h__karte img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 6px; display: block; }
.gnm-abo-h__karte b { display: block; margin-top: 8px; font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; line-height: 1.05; }
.gnm-abo-h__gratis { position: absolute; right: 2%; top: -2%; z-index: 4; display: grid; place-items: center; width: 92px; aspect-ratio: 1; border: 2px solid var(--gnm-ink); border-radius: 50%; background: #fff; font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; font-weight: 700; line-height: 1; text-align: center; transform: rotate(8deg); }
/* Pakete */
.gnm-pk__schalter { display: flex; width: fit-content; margin: 0 auto 26px; padding: 4px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; }
.gnm-pk__schalter button { height: 38px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.gnm-pk__schalter button.is-aktiv { background: var(--gnm-ink); color: var(--gnm-lila); }
.gnm-pk__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.gnm-pk { position: relative; display: flex; flex-direction: column; padding: clamp(22px, 2.6vw, 34px); border-radius: 16px; border: 1.5px solid var(--gnm-ink); }
.gnm-pk--dunkel { background: var(--gnm-ink); color: #fff; }
.gnm-pk--lila { background: var(--gnm-lila); box-shadow: 8px 8px 0 var(--gnm-ink); }
.gnm-pk__k { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-pk--dunkel .gnm-pk__k { color: var(--gnm-lila); }
.gnm-pk h3 { margin: 6px 0 4px; font-size: clamp(40px, 4.4vw, 64px); line-height: .95; letter-spacing: -.04em; }
.gnm-pk__preis { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 0; }
.gnm-pk__preis b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(32px, 3.4vw, 48px); letter-spacing: -.03em; }
.gnm-pk__preis span { font-size: 15px; font-weight: 600; }
.gnm-pk__preis--gross b { font-size: clamp(48px, 5vw, 72px); }
.gnm-pk__hinweis { margin: 2px 0 18px; padding-bottom: 18px; border-bottom: 1px solid currentColor; font-size: 12px; opacity: .8; }
.gnm-pk ul { list-style: none; margin: 0 0 24px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.gnm-pk li { display: flex; gap: 10px; }
.gnm-pk li::before { content: "✓"; font-weight: 700; }
.gnm-pk--firma li::before { content: ""; flex: 0 0 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--gnm-lila); }
.gnm-pk__btn { display: flex; align-items: center; justify-content: space-between; margin-top: auto; height: 50px; padding: 0 22px; border-radius: 999px; background: var(--gnm-lila); color: var(--gnm-ink) !important; text-decoration: none; font-weight: 600; transition: transform .2s; }
.gnm-pk--lila .gnm-pk__btn { background: var(--gnm-ink); color: var(--gnm-lila) !important; }
.gnm-pk--firma .gnm-pk__btn { background: transparent; border: 1.5px solid var(--gnm-ink); }
.gnm-pk--firma.gnm-pk--dunkel .gnm-pk__btn { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-pk__btn:hover { transform: translateY(-2px); }
.gnm-pk__tag { position: absolute; right: 18px; top: -12px; padding: 4px 12px; border-radius: 999px; background: var(--gnm-lila); color: var(--gnm-ink); font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; transform: rotate(4deg); }
.gnm-pk__fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; margin-top: 20px; font-size: 13px; }
.gnm-pk__fuss a, .gnm-pk__notiz a { color: inherit; font-weight: 700; }
.gnm-pk__notiz { margin: 14px 0 22px; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 24px 28px; border-radius: 16px; background: var(--gnm-lila); color: var(--gnm-ink) !important; text-decoration: none; }
.gnm-banner b { display: block; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(28px, 3vw, 42px); line-height: 1; letter-spacing: -.03em; }
.gnm-banner small { font-size: 13px; }
/* Vorteile (Abo) */
.gnm-vt { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gnm-vt__k { position: relative; overflow: hidden; min-height: 230px; padding: 24px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; }
.gnm-vt__k--lila { background: var(--gnm-lila); }
.gnm-vt__k small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-vt__k h3 { margin: 6px 0 10px; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -.03em; }
.gnm-vt__k p { max-width: 36ch; margin: 0; font-size: 14px; }
.gnm-vt__cover { display: flex; justify-content: flex-end; margin: 18px -10px -40px 0; }
.gnm-vt__cover img { position: static !important; width: 26% !important; margin-left: -6%; transform: rotate(-4deg) !important; box-shadow: 0 8px 18px rgba(36,36,36,.3); }
.gnm-vt__cover img:nth-child(even) { transform: rotate(5deg) translateY(-8px) !important; }
/* Firmen-Seiten: Kopf */
.gnm-fu-k__h1 { position: relative; margin: 6px 0 0; font-size: clamp(76px, 14vw, 216px); line-height: .85; letter-spacing: -.055em; }
.gnm-fu-k__h1--lang { font-size: clamp(54px, 8.8vw, 132px); max-width: 12ch; }
.gnm-fu-k__h1 .is-style-hand { position: absolute; right: 0; bottom: -.32em; color: var(--gnm-orange); font-size: clamp(22px, 2.4vw, 36px) !important; letter-spacing: 0; transform: rotate(-5deg); }
.gnm-fu-k__h1--lang .is-style-hand { right: auto; left: 52%; }
.gnm-fu-k__claim { max-width: 26ch; margin: 56px 0 14px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(28px, 3vw, 42px); font-weight: 700; line-height: 1.05; letter-spacing: -.03em; }
.gnm-fu-k .gnm-sub { max-width: 60ch; }
.gnm-springe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; }
.gnm-springe small { margin-right: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
/* Firmen-Abo: Vorteile */
.gnm-vk__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gnm-vk { padding: 22px; border-radius: 14px; background: var(--gnm-pfirsich); }
.gnm-vk h3 { margin: 0 0 14px; font-size: clamp(22px, 2vw, 28px); line-height: 1.05; letter-spacing: -.02em; }
.gnm-vk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14px; }
.gnm-vk li { display: flex; gap: 10px; }
.gnm-vk li::before { content: ""; flex: 0 0 12px; height: 12px; margin-top: 4px; border-radius: 50%; background: var(--gnm-lila); }
.gnm-vk__chips { margin-top: 18px; }
.gnm-themen__reihe span.gnm-thema { cursor: default; }
.gnm-themen__reihe span.gnm-thema:hover { background: transparent; border-color: var(--gnm-ink); }
/* Stimmen */
.gnm-stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.gnm-stimme { margin: 0; padding: 20px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; }
.gnm-stimme blockquote { margin: 0 0 14px; font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; font-weight: 600; line-height: 1.3; }
.gnm-stimme figcaption { font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-stimme figcaption b { display: block; color: var(--gnm-ink); }
/* Für Unternehmen: dunkles Angebotsband */
.gnm-ang__band { --band: var(--gnm-ink); padding-block: clamp(56px, 6vw, 96px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); color: #fff; }
.gnm-ang__band .gnm-ab__h { color: #fff; margin-bottom: 22px; }
.gnm-ang__klammer { border-top: 2px solid var(--gnm-lila); border-left: 2px solid var(--gnm-lila); border-top-left-radius: var(--gnm-radius); padding: 0 0 6px clamp(16px, 2.3vw, 34px); }
.gnm-ang__klammer > .is-style-label-lila { margin: 0 0 22px !important; }
.gnm-ang__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.gnm-ang { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 22px 24px; border: 1px solid #3f3f3f; border-radius: 14px; color: #fff !important; text-decoration: none; transition: border-color .2s, transform .2s; }
.gnm-ang:hover { border-color: var(--gnm-lila); transform: translateY(-3px); }
.gnm-ang > b { font-family: var(--wp--preset--font-family--newsreader); font-size: 44px; line-height: 1; color: var(--gnm-lila); }
.gnm-ang h3 { margin: 0; color: #fff; font-size: clamp(26px, 2.6vw, 38px); line-height: 1; letter-spacing: -.03em; }
.gnm-ang p { margin: 0 0 8px; font-size: 14px; color: #cfcfcf; }
.gnm-ang .gnm-knopf { border-color: #fff; color: #fff !important; }
/* Für Unternehmen: Blöcke 01–04 */
.gnm-blk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); gap: 24px 56px; align-items: start; }
.gnm-blk__text p { margin: 0 0 14px; font-size: 16px; line-height: 1.6; }
.gnm-blk__text a:not(.gnm-knopf) { color: inherit; }
.gnm-blk__text .gnm-knopf { margin-top: 8px; }
.gnm-blk__nr { display: block; margin-bottom: 14px; color: var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(72px, 8vw, 120px); font-weight: 700; line-height: .85; -webkit-text-stroke: 1.5px var(--gnm-ink); }
.gnm-blk__box { padding: 18px 20px; border-radius: 14px; background: var(--gnm-pfirsich); }
.gnm-blk__box small { display: block; margin-bottom: 6px; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-blk__box b { font-family: var(--wp--preset--font-family--newsreader); font-size: 21px; line-height: 1.2; }
.gnm-haken { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 15px; }
.gnm-haken li { display: flex; gap: 10px; }
.gnm-haken li::before { content: "✓"; display: grid; place-items: center; flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--gnm-lila); font-size: 11px; font-weight: 700; }
/* Kontakt + Formular */
.gnm-david { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin-bottom: 18px; padding: 24px 28px; border-radius: 16px; background: var(--gnm-ink); color: #fff; }
.gnm-david b { display: block; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(28px, 3vw, 40px); line-height: 1; letter-spacing: -.03em; }
.gnm-david small { font-size: 12px; color: #cfcfcf; }
.gnm-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; padding: clamp(20px, 2.6vw, 32px); border-radius: 16px; background: var(--gnm-pfirsich); }
.gnm-form__voll { grid-column: 1 / -1; }
.gnm-form__f { display: flex; flex-direction: column; gap: 6px; }
.gnm-form__f > span, .gnm-form legend { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-form input[type=text], .gnm-form input[type=email], .gnm-form input[type=tel], .gnm-form textarea { width: 100%; box-sizing: border-box; padding: 13px 18px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; color: var(--gnm-ink); }
.gnm-form textarea { border-radius: 16px; resize: vertical; }
.gnm-form input:focus, .gnm-form textarea:focus { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-form fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gnm-form legend { margin-bottom: 8px; }
.gnm-form__chip { position: relative; cursor: pointer; }
.gnm-form__chip input { position: absolute; opacity: 0; }
.gnm-form__chip span { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.gnm-form__chip span::before { content: ""; width: 14px; height: 14px; border: 1.5px solid var(--gnm-ink); border-radius: 3px; }
.gnm-form__chip input[type=radio] + span::before { border-radius: 50%; }
.gnm-form__chip input:checked + span { background: var(--gnm-lila); }
.gnm-form__chip input:checked + span::before { background: var(--gnm-ink); box-shadow: inset 0 0 0 2px var(--gnm-lila); }
.gnm-form__chip input:focus-visible + span { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-form__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.gnm-form__fuss small { font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-form__fuss small a { color: inherit; }
.gnm-form .gnm-knopf { cursor: pointer; font: inherit; font-weight: 600; }
.gnm-form__hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gnm-form__fehler { margin: 0; padding: 12px 16px; border-radius: 12px; background: #fff; border: 1.5px solid #c0392b; font-size: 14px; }
.gnm-form--ok { display: block; text-align: center; }
.gnm-form--ok .is-style-hand { margin: 0; color: var(--gnm-orange); font-size: 44px !important; }
@media (max-width: 900px) {
.gnm-pk__raster, .gnm-vt, .gnm-vk__raster, .gnm-stimmen, .gnm-ang__raster, .gnm-blk { grid-template-columns: minmax(0, 1fr); }
.gnm-abo-h__buehne { order: -1; max-width: 340px; margin-top: 20px; }
.gnm-blk__rechts { order: -1; }
.gnm-blk__nr { font-size: 64px; margin-bottom: 8px; }
}
@media (max-width: 600px) {
.gnm-form { grid-template-columns: minmax(0, 1fr); }
.gnm-fu-k__h1 { font-size: clamp(56px, 18vw, 80px); }
.gnm-fu-k__h1--lang { font-size: clamp(44px, 12.5vw, 60px); }
.gnm-fu-k__h1 .is-style-hand { position: static; display: block; margin-top: 12px; }
.gnm-fu-k__claim { margin-top: 28px; }
.gnm-abo-h__gratis { width: 72px; font-size: 14px; }
.gnm-pk--lila { box-shadow: 5px 5px 0 var(--gnm-ink); }
}
.gnm-fu-k__h1--lang .is-style-hand { left: auto; right: 0; bottom: -.55em; }
/* ==========================================================================
0.12.0 · Über uns, Kontakt, Mitmachen, GutSparen, B Corp
========================================================================== */
.gnm-sk { position: relative; }
.gnm-uu__stift, .gnm-kt__brief { position: absolute; right: 0; top: clamp(40px, 6vw, 110px); width: clamp(70px, 9vw, 130px); height: auto; color: var(--gnm-ink); }
.gnm-kt__brief { right: 4%; }
.gnm-uu__bild { margin: 0; }
.gnm-uu__bild picture { display: block; }
.gnm-uu__bild img { width: 100%; height: auto; max-height: 900px; object-fit: cover; border-radius: 14px; display: block; box-shadow: 0 18px 40px -24px rgba(36,36,36,.35); }
.gnm-uu__mosaik { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 8px; padding: 18px; border-radius: 14px; background: var(--gnm-pfirsich); }
.gnm-uu__mosaik span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: 20px; }
.gnm-uu__mosaik span:nth-child(3n) { background: var(--gnm-orange); }
.gnm-uu__mosaik span:nth-child(5n) { background: var(--gnm-ink); color: #fff; }
.gnm-uu__bild figcaption { margin-top: 10px; font-size: 13px; color: var(--wp--preset--color--mute); }
.gnm-uu__bild figcaption .is-style-hand { color: #6a3fd1; font-size: 22px; margin-right: 4px; }
.gnm-uu__band { --band: var(--gnm-ink); padding-block: clamp(48px, 6vw, 88px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); color: #fff; }
.gnm-uu__satz { margin: 0 0 20px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(52px, 8vw, 120px); font-weight: 700; line-height: .9; letter-spacing: -.045em; }
.gnm-uu__satz s { color: var(--gnm-lila); text-decoration-color: #fff; text-decoration-thickness: .08em; }
.gnm-uu__band > p:last-child { max-width: 46ch; margin: 0; color: #d9d9d9; font-size: 17px; }
.gnm-uu__mission { border-top: 1.5px solid var(--gnm-ink); }
.gnm-uu__m { display: grid; grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1.5fr); gap: 16px 32px; padding: 26px 0; border-bottom: 1.5px solid var(--gnm-ink); }
.gnm-uu__nr { font-family: var(--wp--preset--font-family--newsreader); font-size: 28px; font-weight: 700; }
.gnm-uu__m h3 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1; letter-spacing: -.025em; }
.gnm-uu__m p { margin: 0 0 12px; font-size: 15px; line-height: 1.55; }
.gnm-uu__zitat { margin: 0; padding: 20px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: var(--gnm-lila); box-shadow: 6px 6px 0 var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(20px, 1.9vw, 27px); font-weight: 700; line-height: 1.2; }
.gnm-uu__wahl { display: inline-flex; padding: 4px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; margin-bottom: 10px; }
.gnm-uu__wahl button { height: 34px; padding: 0 14px; border: 0; border-radius: 999px; background: transparent; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.gnm-uu__wahl button.is-aktiv { background: var(--gnm-ink); color: var(--gnm-lila); }
.gnm-uu__antwort { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2vw, 28px) !important; font-weight: 700; }
.gnm-uu__team { --band: var(--gnm-pfirsich); padding-block: clamp(48px, 6vw, 88px); background: var(--band); box-shadow: 0 0 0 100vmax var(--band); clip-path: inset(0 -100vmax); }
.gnm-uu__team .is-style-klammer > .is-style-label { margin: 0 0 18px !important; }
.gnm-team__tabs { margin-bottom: 18px; }
.gnm-team__tabs button.gnm-thema { gap: 8px; }
.gnm-team__tabs button.gnm-thema b { display: grid; place-items: center; min-width: 22px; height: 22px; border-radius: 50%; background: var(--gnm-lila); font-size: 11px; }
.gnm-team__tabs .gnm-thema.is-aktiv { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff !important; }
.gnm-team__liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.gnm-team__liste[hidden] { display: none; }
.gnm-team__liste li { display: block; overflow: hidden; padding: 0; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; animation: gnm-einblenden .3s ease-out; }
.gnm-team__liste .gnm-av { flex-basis: 40px; height: 40px; font-size: 15px; }
.gnm-team__liste b { display: block; font-size: 14px; }
.gnm-team__liste small { display: block; font-size: 11px; color: var(--wp--preset--color--mute); line-height: 1.3; }
.gnm-team__job { margin: 18px 0 0; font-size: 14px; }
.gnm-team__job a { color: inherit; font-weight: 700; }
.gnm-wege { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gnm-weg { display: flex; flex-direction: column; min-height: 230px; padding: 20px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; color: var(--gnm-ink) !important; text-decoration: none; transition: transform .2s, box-shadow .2s; }
.gnm-weg:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--gnm-ink); }
.gnm-weg h3 { margin: 0 0 8px; font-size: clamp(24px, 2.2vw, 30px); letter-spacing: -.02em; }
.gnm-weg p { margin: 0; font-size: 14px; }
.gnm-weg span { margin-top: auto; padding-top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-weg--lila { background: var(--gnm-lila); }
.gnm-weg--dunkel { background: var(--gnm-ink); color: #fff !important; }
.gnm-weg--dunkel h3 { color: #fff; }
.gnm-weg--dunkel span { color: var(--gnm-lila); }
/* Nummerierte Karten (Kontakt, Mitmachen) */
.gnm-nk__raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.gnm-nk { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: clamp(20px, 2.4vw, 30px); border: 1.5px solid var(--gnm-ink); border-radius: 16px; scroll-margin-top: 110px; }
.gnm-nk__nr { color: var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader); font-size: 44px; font-weight: 700; line-height: .9; -webkit-text-stroke: 1px var(--gnm-ink); }
.gnm-nk h3 { margin: 0; font-size: clamp(28px, 2.8vw, 40px); line-height: 1; letter-spacing: -.03em; }
.gnm-nk p { margin: 0; font-size: 15px; }
.gnm-nk > .gnm-knopf, .gnm-nk .gnm-mail { margin-top: auto; }
.gnm-nk .gnm-mail + .gnm-knopf { margin-top: 0; }
.gnm-mail { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.gnm-mail > a { display: inline-flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: var(--gnm-pfirsich); color: var(--gnm-ink) !important; text-decoration: none; font-weight: 600; font-size: 14px; }
.gnm-mail > a:hover { background: var(--gnm-orange); }
.gnm-mail button { cursor: pointer; font: inherit; font-size: 13px; position: relative; }
.gnm-knopf--aus { opacity: .55; pointer-events: none; }
.gnm-knopf--hell { border-color: #fff !important; color: #fff !important; }
.gnm-hilfe { position: relative; padding: clamp(26px, 3.6vw, 48px); border-radius: 18px; background: var(--gnm-lila); box-shadow: 8px 8px 0 var(--gnm-ink); scroll-margin-top: 110px; }
.gnm-hilfe h2 { margin: 0 0 12px; font-size: clamp(36px, 4.8vw, 72px); line-height: .95; letter-spacing: -.04em; }
.gnm-hilfe > p:not(.gnm-abo__k) { max-width: 52ch; margin: 0 0 18px; }
.gnm-hilfe__notiz { position: absolute; right: 32px; bottom: 26px; color: var(--gnm-orange); font-size: clamp(22px, 2.2vw, 32px) !important; transform: rotate(-6deg); text-shadow: 0 0 1px rgba(0,0,0,.15); }
.gnm-social__reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.gnm-social { display: inline-flex; align-items: center; height: 60px; padding: 0 26px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; color: var(--gnm-ink) !important; text-decoration: none; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2vw, 28px); font-weight: 700; transition: background .2s; }
.gnm-social:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
/* Mitmachen */
.gnm-jobs { list-style: none; width: 100%; margin: 4px 0 8px; padding: 0; }
.gnm-jobs a { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; padding: 10px 0; border-bottom: 1px solid #d9d7d0; color: var(--gnm-ink) !important; text-decoration: none; }
.gnm-jobs b { font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; }
.gnm-jobs small { flex-basis: 100%; font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-jobs a:hover b { text-decoration: underline; text-decoration-color: var(--gnm-orange); }
.gnm-nk__raster + .gnm-banner { margin-top: 22px; }
.gnm-zeit-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: clamp(26px, 3.6vw, 48px); border-radius: 18px; background: var(--gnm-ink); color: #fff; }
.gnm-zeit-band h2 { margin: 0 0 10px; color: #fff; font-size: clamp(36px, 4.8vw, 68px); line-height: .95; letter-spacing: -.04em; }
.gnm-zeit-band h2 span { color: var(--gnm-lila); }
.gnm-zeit-band p { margin: 0; color: #d9d9d9; font-size: 14px; }
/* GutSparen */
.gnm-vk__nr { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; }
.gnm-vk p { margin: 0; font-size: 14px; }
.gnm-gs2__suche { display: flex; gap: 10px; margin-bottom: 14px; }
.gnm-gs2__suche input { flex: 1; min-width: 0; height: 50px; padding: 0 22px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; font: inherit; font-size: 15px; }
.gnm-gs2__suche input:focus { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-gs2 .gnm-themen__reihe { margin-bottom: 22px; }
.gnm-gs2 .gnm-thema.is-aktiv { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff !important; }
.gnm-gs2__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.gnm-gc { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 12px 12px 14px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: #fff; }
.gnm-gc[hidden] { display: none; }
.gnm-gc__logo { display: grid; place-items: center; width: 100%; height: 96px; border-radius: 10px; background: var(--gnm-pfirsich); }
.gnm-gc__logo img { max-width: 70%; max-height: 64px; width: auto; height: auto; object-fit: contain; }
.gnm-gc__logo b { font-family: var(--wp--preset--font-family--newsreader); font-size: 24px; }
.gnm-gc h3 { margin: 2px 0 0; font-size: clamp(22px, 1.9vw, 27px); line-height: 1.05; letter-spacing: -.02em; }
.gnm-gc__text { margin: 0; font-size: 13px; line-height: 1.45; color: #3d3d3d; }
.gnm-gc__code { display: flex; width: 100%; margin-top: auto; border: 1.5px dashed var(--gnm-ink); border-radius: 999px; overflow: hidden; }
.gnm-gc__code code { flex: 1; padding: 10px 14px; font-family: var(--wp--preset--font-family--geist); font-size: 14px; font-weight: 700; letter-spacing: .08em; }
.gnm-gc__code button { position: relative; padding: 0 14px; border: 0; border-left: 1.5px dashed var(--gnm-ink); background: transparent; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; cursor: pointer; }
.gnm-gc__code button:hover { background: var(--gnm-lila-hell); }
.gnm-gc__ohne { margin: auto 0 0; font-size: 12px; color: var(--wp--preset--color--mute); }
.gnm-gc__btn { width: 100%; box-sizing: border-box; margin-top: 4px; background: var(--gnm-ink); color: var(--gnm-lila) !important; height: 44px; font-size: 14px; }
.gnm-gc--partner { justify-content: space-between; background: var(--gnm-lila); color: var(--gnm-ink) !important; text-decoration: none; }
.gnm-gc--partner small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-gc--partner h3 { font-size: clamp(26px, 2.2vw, 32px); }
.gnm-gc--partner .gnm-pk__btn { width: 100%; box-sizing: border-box; background: var(--gnm-ink); color: var(--gnm-lila) !important; }
.gnm-gs2__leer { margin: 12px 0 0; font-size: 14px; }
/* B Corp */
.gnm-bc__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.gnm-bc { display: flex; flex-direction: column; gap: 10px; }
.gnm-bc__bild { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; }
.gnm-bc__bild img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.gnm-bc:hover .gnm-bc__bild img { transform: scale(1.04); }
.gnm-bc h3 { margin: 0; font-size: clamp(21px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -.02em; }
.gnm-bc h3 a { color: inherit; text-decoration: none; }
.gnm-bc p { margin: 0; font-size: 13px; color: #3d3d3d; }
.gnm-pill-klein--dunkel { background: var(--gnm-ink); border-color: var(--gnm-ink); color: var(--gnm-lila); }
@media (max-width: 1100px) {
.gnm-gs2__raster, .gnm-wege { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-team__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 781px) {
.gnm-uu__m { grid-template-columns: 44px minmax(0, 1fr); }
.gnm-uu__m > div { grid-column: 1 / -1; }
.gnm-nk__raster, .gnm-bc__raster, .gnm-team__liste { grid-template-columns: minmax(0, 1fr); }
.gnm-uu__stift, .gnm-kt__brief { position: static; display: block; width: 64px; margin-top: 12px; }
.gnm-hilfe__notiz { position: static; display: block; margin-top: 14px; }
.gnm-team__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.gnm-social { height: 50px; padding: 0 18px; }
}
@media (max-width: 600px) {
.gnm-gs2__raster, .gnm-wege { grid-template-columns: minmax(0, 1fr); }
.gnm-gs2__suche .gnm-knopf { display: none; }
}
.gnm-sk > .gnm-ah__kicker { margin-bottom: 10px; }
/* 0.12.1 – Bilder im Seiteninhalt (auch aus alten Divi-Seiten) nie breiter als die Spalte */
.wp-block-post-content img { max-width: 100%; height: auto; }
.wp-block-post-content .wp-block-image img { border-radius: 10px; }
/* ==========================================================================
0.13.0 – Rechtliches (Impressum, Datenschutz, Cookies, AGB)
========================================================================== */
.gnm-recht { --nf: var(--wp--preset--font-family--newsreader); --gf: var(--wp--preset--font-family--geist); }
.gnm-recht__pfad { font-size: 12px; color: var(--wp--preset--color--mute, #6b6b6b); margin-bottom: 6px; }
.gnm-recht__pfad a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gnm-recht__titelzeile { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; border-bottom: 2px solid var(--gnm-ink); padding-bottom: 14px; }
.gnm-recht__h1 { margin: 0; font-family: var(--nf); font-weight: 700; font-size: clamp(64px, 12vw, 190px); line-height: .82; letter-spacing: -.055em; overflow-wrap: anywhere; }
.gnm-recht__notiz { flex: 0 0 auto; max-width: 300px; text-align: right; padding-bottom: 10px; }
.gnm-recht__marke { display: inline-block; padding: 5px 10px; border-radius: 6px; background: var(--gnm-ink); color: #fff; font-family: var(--gf); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; box-shadow: 4px 4px 0 var(--gnm-lila); }
.gnm-recht__notiz p { margin: 10px 0 0; font-size: 15px; line-height: 1.45; }
.gnm-recht__pills { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0 0; }
.gnm-recht__pills-label { margin-right: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gnm-recht__pill { padding: 8px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; color: var(--gnm-ink); font-size: 14px; text-decoration: none; transition: background .15s; }
.gnm-recht__pill:hover { background: var(--gnm-lila-hell); }
.gnm-recht__pill.is-aktiv { background: var(--gnm-ink); color: #fff; }
.gnm-recht__raster { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); margin-top: clamp(36px, 4vw, 56px); }
.gnm-recht__inhalt { position: sticky; top: calc(var(--gnm-kopf-hoehe, 64px) + 24px); align-self: start; max-height: calc(100vh - var(--gnm-kopf-hoehe, 64px) - 48px); overflow: auto; font-size: 12.5px; }
.gnm-recht__inhalt-label { margin: 0 0 8px; padding-bottom: 8px; border-bottom: 1px solid var(--gnm-ink); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.gnm-recht__inhalt ol { list-style: none; margin: 0; padding: 0; }
.gnm-recht__inhalt li a { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #e3e1da; color: var(--gnm-ink); text-decoration: none; line-height: 1.35; }
.gnm-recht__inhalt li a span { flex: 0 0 18px; color: #8a8a8a; font-variant-numeric: tabular-nums; }
.gnm-recht__inhalt li a:hover, .gnm-recht__inhalt li a.is-aktiv { color: #6a3fd1; }
.gnm-recht__hand { margin: 18px 0 0; color: var(--gnm-orange); font-size: 24px !important; line-height: 1.05; transform: rotate(-4deg); transform-origin: left; }
.gnm-recht__haupt { min-width: 0; }
.gnm-recht__haupt > .is-style-label { margin-bottom: 8px !important; }
.gnm-recht__zeile { display: grid; grid-template-columns: 54px minmax(160px, 260px) minmax(0, 1fr); gap: 0 22px; padding: 26px 0; border-bottom: 1.5px solid var(--gnm-ink); scroll-margin-top: calc(var(--gnm-kopf-hoehe, 64px) + 20px); }
.gnm-recht__nr { font-family: var(--nf); font-weight: 700; font-size: 22px; font-variant-numeric: tabular-nums; }
.gnm-recht__h2 { margin: 0; font-family: var(--nf); font-weight: 700; font-size: clamp(22px, 2vw, 28px); line-height: 1.12; letter-spacing: -.02em; overflow-wrap: anywhere; hyphens: auto; }
.gnm-recht__gruppe { display: block; margin-bottom: 6px; font-family: var(--gf); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #6a3fd1; }
.gnm-recht__text { min-width: 0; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.gnm-recht__text > :first-child { margin-top: 0; }
.gnm-recht__text > :last-child { margin-bottom: 0; }
.gnm-recht__text p { margin: 0 0 .9em; }
.gnm-recht__text h2, .gnm-recht__text h3, .gnm-recht__text h4, .gnm-recht__text h5 { margin: 1.4em 0 .5em; font-family: var(--nf); font-weight: 700; font-size: 19px; line-height: 1.25; }
.gnm-recht__text ul, .gnm-recht__text ol { margin: 0 0 1em; padding-left: 1.2em; }
.gnm-recht__text li { margin-bottom: .35em; }
.gnm-recht__text a { color: var(--gnm-ink); text-decoration: underline; text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-recht__text table { width: 100%; border-collapse: collapse; font-size: 14px; display: block; overflow-x: auto; }
.gnm-recht__text td, .gnm-recht__text th { padding: 6px 8px; border: 1px solid #d9d7d0; text-align: left; vertical-align: top; }
.gnm-recht__zeile:first-of-type .gnm-recht__text > p:first-child strong:only-child { font-family: var(--nf); font-size: 22px; }
.gnm-recht__zeile--alle .gnm-recht__h2 { grid-column: 2; }
.gnm-recht__liste { grid-column: 3; min-width: 0; }
.gnm-recht__klapp { border-bottom: 1px solid #d9d7d0; scroll-margin-top: calc(var(--gnm-kopf-hoehe, 64px) + 20px); }
.gnm-recht__klapp:first-child { border-top: 1px solid #d9d7d0; }
.gnm-recht__klapp summary { display: grid; grid-template-columns: 34px minmax(0, 1fr) 30px; align-items: center; gap: 12px; padding: 13px 0; cursor: pointer; list-style: none; }
.gnm-recht__klapp summary::-webkit-details-marker { display: none; }
.gnm-recht__klapp summary .gnm-recht__nr { font-family: var(--gf); font-weight: 400; font-size: 12px; color: #8a8a8a; }
.gnm-recht__kt { font-family: var(--nf); font-weight: 700; font-size: 18px; line-height: 1.25; }
.gnm-recht__kt .gnm-recht__gruppe { margin-bottom: 2px; }
.gnm-recht__plus { position: relative; width: 28px; height: 28px; border: 1.5px solid var(--gnm-ink); border-radius: 50%; transition: background .15s, transform .2s; }
.gnm-recht__plus::before, .gnm-recht__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 11px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.gnm-recht__plus::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .2s; }
.gnm-recht__klapp[open] .gnm-recht__plus { background: var(--gnm-lila); border-color: var(--gnm-lila); color: #fff; }
.gnm-recht__klapp[open] .gnm-recht__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.gnm-recht__klapp summary:hover .gnm-recht__kt { color: #6a3fd1; }
.gnm-recht__klapp .gnm-recht__text { padding: 4px 0 22px 46px; }
.gnm-recht__alle { margin-top: 16px; padding: 8px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: transparent; font: inherit; font-size: 13px; cursor: pointer; }
.gnm-recht__alle:hover { background: var(--gnm-lila-hell); }
.gnm-recht__stand { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--gnm-lila); font-size: 12.5px; color: #6b6b6b; }
.gnm-recht__mehr { font-weight: 600; }
@media (max-width: 1100px) {
.gnm-recht__zeile { grid-template-columns: 44px minmax(0, 1fr); }
.gnm-recht__zeile .gnm-recht__text, .gnm-recht__liste { grid-column: 2; margin-top: 12px; }
.gnm-recht__zeile--alle .gnm-recht__h2 { grid-column: 2; }
}
@media (max-width: 860px) {
.gnm-recht__titelzeile { flex-direction: column; align-items: flex-start; }
.gnm-recht__notiz { text-align: left; max-width: none; padding-bottom: 0; }
.gnm-recht__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-recht__inhalt { position: static; max-height: none; }
.gnm-recht__inhalt ol { max-height: 260px; overflow: auto; }
.gnm-recht__hand { display: none; }
.gnm-recht__pills { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
.gnm-recht__pill { flex: 0 0 auto; }
}
@media (max-width: 560px) {
.gnm-recht__zeile { grid-template-columns: minmax(0, 1fr); padding: 20px 0; }
.gnm-recht__nr { font-size: 15px; color: #8a8a8a; }
.gnm-recht__zeile .gnm-recht__h2, .gnm-recht__zeile .gnm-recht__text, .gnm-recht__liste { grid-column: 1; }
.gnm-recht__klapp .gnm-recht__text { padding-left: 0; }
.gnm-recht__text { font-size: 15.5px; }
}
.gnm-recht__zeile--alle > .gnm-recht__nr { font-size: 16px; white-space: nowrap; padding-top: 4px; }
/* ==========================================================================
0.13.0 – Mediadaten & Werbemöglichkeiten
========================================================================== */
.gnm-md .gnm-fu-k__h1 { max-width: 9ch; }
.gnm-md-zahlen, .gnm-md-karten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 22px; }
.gnm-md-zahl { display: flex; flex-direction: column; gap: 4px; padding: 22px 24px; border-radius: 16px; background: var(--gnm-pfirsich); color: var(--gnm-ink); text-decoration: none; transition: transform .2s; }
.gnm-md-zahl:hover { transform: translateY(-3px); }
.gnm-md-zahl small { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-md-zahl b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(40px, 4.6vw, 64px); line-height: 1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.gnm-md-zahl span { font-size: 13px; color: #5d5d5d; }
.gnm-md-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; padding-top: 26px; }
.gnm-md-paket { display: flex; flex-direction: column; padding: 26px 24px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 18px; background: #fff; }
.gnm-md-paket--dunkel { background: var(--gnm-ink); color: #fff; border-color: var(--gnm-ink); box-shadow: 8px 8px 0 var(--gnm-lila); }
.gnm-md-paket__name { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-md-paket__preis { margin: 6px 0 0; display: flex; align-items: baseline; gap: 4px; }
.gnm-md-paket__preis b { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(44px, 4.4vw, 60px); line-height: 1; letter-spacing: -.03em; }
.gnm-md-paket__preis span { font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: 26px; }
.gnm-md-paket__imp { margin: 6px 0 16px; padding-bottom: 14px; border-bottom: 1px solid currentColor; font-size: 13px; opacity: .75; }
.gnm-md-paket ul { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 9px; font-size: 14.5px; }
.gnm-md-paket li { position: relative; padding-left: 20px; line-height: 1.4; }
.gnm-md-paket li::before { content: ""; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--gnm-lila); }
.gnm-md-paket__hinweis { margin: 0 0 10px; font-size: 12px; opacity: .75; }
.gnm-md-paket__bcc { margin: auto 0 16px; padding: 12px 14px; border-radius: 10px; background: var(--gnm-pfirsich); color: var(--gnm-ink); font-size: 12.5px; line-height: 1.45; }
.gnm-md-paket--dunkel .gnm-md-paket__bcc { background: #3a3a3a; color: #fff; }
.gnm-md-paket__knopf { justify-content: space-between; width: 100%; box-sizing: border-box; }
.gnm-md-paket--dunkel .gnm-md-paket__knopf { color: var(--gnm-ink) !important; background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-md-chips { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 18px; }
.gnm-md-chip { padding: 7px 14px; border: 1.5px solid var(--gnm-ink); border-radius: 999px; font-size: 13px; }
.gnm-md-chip:first-child { background: var(--gnm-lila-hell); border-color: var(--gnm-lila); }
.gnm-md-karte { padding: 22px 24px; border-radius: 16px; background: var(--gnm-pfirsich); }
.gnm-md-karte h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2vw, 28px); line-height: 1.1; letter-spacing: -.02em; }
.gnm-md-karte p { margin: 0; font-size: 14px; line-height: 1.5; }
.gnm-md-karte--nr > span { display: block; margin-bottom: 10px; font-size: 12px; font-weight: 700; color: #6a3fd1; }
.gnm-md-formen { margin-top: 26px; border-top: 1.5px solid var(--gnm-ink); }
.gnm-md-form { border-bottom: 1px solid #d9d7d0; }
.gnm-md-form summary { display: grid; grid-template-columns: minmax(0, 1fr) auto 30px; align-items: center; gap: 14px; padding: 15px 0; cursor: pointer; list-style: none; }
.gnm-md-form summary::-webkit-details-marker { display: none; }
.gnm-md-form__name { font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(19px, 1.7vw, 23px); }
.gnm-md-form summary:hover .gnm-md-form__name { color: #6a3fd1; }
.gnm-md-form__preis { padding: 5px 12px; border-radius: 999px; background: var(--gnm-ink); color: #fff; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.gnm-md-form[open] .gnm-recht__plus { background: var(--gnm-lila); border-color: var(--gnm-lila); color: #fff; }
.gnm-md-form[open] .gnm-recht__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.gnm-md-form__text { max-width: 760px; padding: 0 0 22px; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.gnm-md-form__text h3, .gnm-md-form__text h4 { margin: 1.2em 0 .4em; font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; }
.gnm-md-form__text ul, .gnm-md-form__text ol { padding-left: 1.2em; margin: 0 0 1em; }
.gnm-md-form__text li { margin-bottom: .3em; }
.gnm-md-form__text a { color: var(--gnm-ink); text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-md-form__text img { display: block; max-width: min(100%, 520px); height: auto; margin: 10px 0; border-radius: 12px; box-shadow: 0 10px 30px -18px rgba(0,0,0,.4); }
.gnm-md-netto { margin: 14px 0 0; font-size: 12.5px; color: #6b6b6b; }
.gnm-md-logos { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; padding-top: 24px; }
.gnm-md-logo { display: grid; place-items: center; aspect-ratio: 3 / 2; padding: 10px 12px; border: 1px solid #e3e1da; border-radius: 12px; background: #fff; }
.gnm-md-logo img { max-width: 100%; max-height: 46px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .8; transition: filter .2s, opacity .2s; }
.gnm-md-logo:hover img { filter: none; opacity: 1; }
.gnm-md-zw { margin: 36px 0 14px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -.02em; }
.gnm-md-stimmen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.gnm-md-stimme { display: flex; flex-direction: column; margin: 0; padding: 18px; border: 1.5px solid var(--gnm-ink); border-radius: 16px; background: #fff; }
.gnm-md-stimme__logo { display: grid; place-items: center; height: 78px; margin-bottom: 14px; border-radius: 10px; background: var(--gnm-pfirsich); }
.gnm-md-stimme:nth-child(3n+2) .gnm-md-stimme__logo { background: var(--gnm-lila-hell); }
.gnm-md-stimme__logo img { max-height: 48px; max-width: 70%; object-fit: contain; }
.gnm-md-stimme blockquote { margin: 0 0 14px; font-family: var(--wp--preset--font-family--newsreader); font-style: italic; font-size: 17px; line-height: 1.4; }
.gnm-md-stimme figcaption { margin-top: auto; display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.gnm-md-stimme figcaption small { color: #6b6b6b; }
.gnm-md-stimme figcaption a { margin-top: 8px; font-size: 13px; font-weight: 600; color: var(--gnm-ink); }
@media (max-width: 1100px) { .gnm-md-logos { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 900px) {
.gnm-md-pakete, .gnm-md-stimmen { grid-template-columns: minmax(0, 1fr); }
.gnm-md-paket--dunkel { box-shadow: 5px 5px 0 var(--gnm-lila); }
}
@media (max-width: 700px) {
.gnm-md-zahlen, .gnm-md-karten { grid-template-columns: minmax(0, 1fr); }
.gnm-md-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnm-md-form summary { grid-template-columns: minmax(0, 1fr) 30px; }
.gnm-md-form__preis { grid-column: 1; grid-row: 2; justify-self: start; }
.gnm-md-form .gnm-recht__plus { grid-column: 2; grid-row: 1 / span 2; }
}
/* 0.13.0 – Reel-Player */
.gnm-reel--leer a, .gnm-reel__leer { display: block; }
.gnm-reel__leer { width: 100%; height: 100%; min-height: 100%; background: radial-gradient(circle at 30% 25%, var(--gnm-lila) 0, #6a3fd1 45%, var(--gnm-ink) 100%); }
.gnm-kreis__bild .gnm-reel__leer { border-radius: 50%; }
[data-gnm-reel] { cursor: pointer; }
html.gnm-rl-offen { overflow: hidden; }
.gnm-rl { position: fixed; inset: 0; z-index: 100000; display: grid; place-items: center; }
.gnm-rl[hidden] { display: none; }
.gnm-rl__dimmer { position: absolute; inset: 0; background: rgba(24, 20, 32, .88); backdrop-filter: blur(4px); }
.gnm-rl__buehne { position: relative; display: grid; grid-template-columns: 56px auto 56px; align-items: center; gap: 14px; max-width: 100vw; }
.gnm-rl__rahmen { position: relative; grid-column: 2; width: min(400px, calc((100vh - 120px) * 9 / 16), calc(100vw - 150px)); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: var(--gnm-ink); box-shadow: 10px 10px 0 var(--gnm-lila); }
.gnm-rl__rahmen.is-video { background: #fff; }
.gnm-rl__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.gnm-rl__cover { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(.3) brightness(.45); }
.gnm-rl__hinweis { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 12px; padding: 22px; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,.75) 30%); }
.gnm-rl__kicker { margin: 0; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gnm-orange); }
.gnm-rl__play { align-self: flex-start; display: inline-flex; align-items: center; gap: 10px; height: 48px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink); font: inherit; font-weight: 600; cursor: pointer; }
.gnm-rl__play:hover { background: #fff; }
.gnm-rl__text { margin: 0; font-size: 12.5px; line-height: 1.45; opacity: .9; }
.gnm-rl__text a { color: #fff; }
.gnm-rl__immer { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; }
.gnm-rl__immer input { accent-color: var(--gnm-lila); width: 16px; height: 16px; }
.gnm-rl__zu { position: absolute; top: -6px; right: 0; z-index: 2; width: 44px; height: 44px; border: 1.5px solid #fff; border-radius: 50%; background: transparent; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.gnm-rl__zu:hover, .gnm-rl__nav:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); color: var(--gnm-ink); }
.gnm-rl__nav { width: 52px; height: 52px; border: 1.5px solid #fff; border-radius: 50%; background: transparent; color: #fff; font-size: 30px; line-height: 1; cursor: pointer; }
.gnm-rl__nav[hidden] { visibility: hidden; display: block; }
.gnm-rl__nav--zurueck { grid-column: 1; } .gnm-rl__nav--weiter { grid-column: 3; }
.gnm-rl__fuss { grid-column: 2; display: flex; justify-content: space-between; gap: 12px; margin: 0; color: #fff; font-size: 14px; }
.gnm-rl__fuss b { font-family: var(--wp--preset--font-family--newsreader); font-size: 18px; }
.gnm-rl__quelle { color: #fff; white-space: nowrap; font-size: 13px; }
@media (max-width: 600px) {
.gnm-rl__buehne { grid-template-columns: minmax(0, 1fr); padding: 56px 12px 12px; }
.gnm-rl__rahmen, .gnm-rl__fuss { grid-column: 1; }
.gnm-rl__rahmen { width: min(100%, calc((100vh - 150px) * 9 / 16)); justify-self: center; box-shadow: 6px 6px 0 var(--gnm-lila); }
.gnm-rl__nav { position: absolute; top: 6px; z-index: 2; width: 44px; height: 44px; font-size: 24px; }
.gnm-rl__nav--zurueck { left: 12px; } .gnm-rl__nav--weiter { left: 64px; }
.gnm-rl__zu { top: 6px; right: 12px; }
.gnm-rl__fuss { flex-direction: column; gap: 4px; }
}
.gnm-md .gnm-ab__h { overflow-wrap: anywhere; hyphens: manual; }
/* ==========================================================================
0.14.0 – Grundseiten: Suche, Archive, 404, normale Seiten
========================================================================== */
.gnm-grund-kopf { --nf: var(--wp--preset--font-family--newsreader); --gf: var(--wp--preset--font-family--geist); margin-bottom: clamp(8px, 2vw, 24px); }
.gnm-grund-kopf__h1--lang { font-size: clamp(48px, 8vw, 128px); }
.gnm-grund-kopf__raute { color: var(--gnm-lila); }
.gnm-grund-kopf__themen { margin-top: 26px; }
.gnm-grund-kopf .gnm-recht__notiz p { font-size: 16px; }
.gnm-suche { display: flex; align-items: center; gap: 12px; margin-top: 24px; padding: 8px 8px 8px 20px; border: 2px solid var(--gnm-ink); border-radius: 999px; background: #fff; max-width: 900px; box-shadow: 6px 6px 0 var(--gnm-lila); }
.gnm-suche:focus-within { box-shadow: 6px 6px 0 var(--gnm-orange); }
.gnm-suche input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: clamp(16px, 1.6vw, 20px); padding: 10px 0; }
.gnm-suche input::-webkit-search-cancel-button { cursor: pointer; }
.gnm-suche .gnm-knopf { flex: 0 0 auto; color: #fff !important; background: var(--gnm-ink); }
.gnm-suche .gnm-knopf:hover { background: var(--gnm-orange); color: var(--gnm-ink) !important; }
.gnm-archiv-seite > .gnm-archiv-k { margin-top: 8px; }
.gnm-leer { padding: 18px 0 8px; }
.gnm-leer__hand { margin: 0; color: var(--gnm-orange); font-size: 30px !important; transform: rotate(-3deg); transform-origin: left; }
.gnm-leer__text { max-width: 640px; margin: 6px 0 22px; font-size: 17px; }
.gnm-grund-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; padding-top: 18px; }
.gnm-autor { display: flex; gap: 22px; align-items: center; margin-top: 24px; max-width: 820px; }
.gnm-autor__bild { flex: 0 0 auto; width: 110px; height: 110px; border-radius: 50%; border: 2px solid var(--gnm-ink); box-shadow: 5px 5px 0 var(--gnm-lila); object-fit: cover; }
.gnm-autor__kicker { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #6a3fd1; }
.gnm-autor__bio { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.gnm-404 { display: flex; flex-direction: column; }
.gnm-404 .gnm-recht__h1 { font-size: clamp(96px, 18vw, 260px); }
.gnm-404__hand { margin: 34px 0 8px; color: var(--gnm-orange); font-size: 30px !important; transform: rotate(-3deg); transform-origin: left; }
.gnm-404__wege { display: flex; flex-wrap: wrap; gap: 10px; }
.gnm-404__neu { margin-top: clamp(48px, 6vw, 88px); }
.gnm-seite__kopf { max-width: 1100px; }
.gnm-seite__h1 { font-size: clamp(56px, 9vw, 150px); border-bottom: 2px solid var(--gnm-ink); padding-bottom: 14px; }
.gnm-seite__auszug { max-width: 760px; margin: 18px 0 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.2; }
.gnm-seite__bild { margin: 8px 0 0; max-width: 1100px; }
.gnm-seite__bild img { display: block; width: 100%; height: auto; max-height: 620px; object-fit: cover; border-radius: 16px; }
.gnm-seite__text { font-size: 17px; line-height: 1.65; }
.gnm-seite__text > * { overflow-wrap: anywhere; }
.gnm-seite__text h2 { margin-top: 1.8em; font-size: clamp(28px, 3vw, 40px); line-height: 1.1; letter-spacing: -.025em; }
.gnm-seite__text h3 { margin-top: 1.5em; font-size: clamp(21px, 2vw, 26px); }
.gnm-seite__text a:not(.wp-block-button__link):not(.gnm-knopf) { color: var(--gnm-ink); text-decoration: underline; text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-seite__text ul, .gnm-seite__text ol { padding-left: 1.2em; }
.gnm-seite__text li { margin-bottom: .4em; }
.gnm-seite__text blockquote { margin: 1.6em 0; padding: 4px 0 4px 22px; border-left: 4px solid var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader); font-style: italic; font-size: 22px; }
.gnm-seite__text img { max-width: 100%; height: auto; border-radius: 12px; }
.gnm-seite__text table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; font-size: 15px; }
.gnm-seite__text td, .gnm-seite__text th { padding: 8px 10px; border: 1px solid #d9d7d0; text-align: left; }
@media (max-width: 860px) {
.gnm-grund-trio { grid-template-columns: minmax(0, 1fr); }
.gnm-suche { padding-left: 14px; box-shadow: 4px 4px 0 var(--gnm-lila); }
.gnm-suche .gnm-knopf { padding: 0 16px; }
.gnm-autor { align-items: flex-start; }
.gnm-autor__bild { width: 76px; height: 76px; }
}
@media (max-width: 480px) {
.gnm-suche .gnm-knopf { font-size: 0; gap: 0; width: 46px; padding: 0; justify-content: center; }
.gnm-suche .gnm-knopf span { font-size: 18px; }
}
/* 0.14.3 – LinkedIn-Beiträge im Reel-Player: Karte statt Hochformat */
.gnm-rl__rahmen--post { width: min(504px, calc(100vw - 150px)); aspect-ratio: auto; height: min(860px, calc(100vh - 120px)); background: #fff; }
.gnm-rl__rahmen--post iframe { overflow: auto; }
@media (max-width: 600px) { .gnm-rl__rahmen--post { width: 100%; height: calc(100vh - 160px); } }
/* 0.15.0 – Steady-Checkout auf der Abo-Seite */
.gnm-steady { padding-top: 22px; }
.gnm-steady__rahmen { position: relative; min-height: 120px; padding: clamp(14px, 2vw, 26px); border: 1.5px solid var(--gnm-ink); border-radius: 18px; background: #fff; box-shadow: 8px 8px 0 var(--gnm-lila); }
.gnm-steady.is-ersatz .gnm-steady__rahmen { display: none; }
.gnm-steady__laden { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; color: #6b6b6b; }
.gnm-steady__punkt { width: 10px; height: 10px; border-radius: 50%; background: var(--gnm-lila); animation: gnm-puls 1s ease-in-out infinite alternate; }
@keyframes gnm-puls { from { opacity: .3; transform: scale(.8); } to { opacity: 1; transform: scale(1.1); } }
#steady-checkout-container { width: 100%; }
.gnm-steady__ersatz[hidden] { display: none; }
.gnm-steady__hinweis { margin: 16px 0 0; font-size: 13px; color: #6b6b6b; }
@media (max-width: 600px) { .gnm-steady__rahmen { padding: 8px; box-shadow: 5px 5px 0 var(--gnm-lila); } }
.gnm-steady__laden[hidden] { display: none; }
.gnm-steady.is-steady .gnm-steady__rahmen { padding: 0; overflow: hidden; }
/* 0.15.1 – Danke-Seite nach dem Abo */
.gnm-danke__kopf { position: relative; max-width: 1100px; padding-top: 8px; }
.gnm-danke__h1 { position: relative; margin: 8px 0 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(56px, 9.5vw, 150px); line-height: .9; letter-spacing: -.05em; }
.gnm-danke__h1 .is-style-hand { display: block; margin-top: 14px; color: var(--gnm-orange); font-size: clamp(26px, 3vw, 44px) !important; letter-spacing: 0; transform: rotate(-3deg); transform-origin: left; }
.gnm-danke__claim { max-width: 780px; margin: 24px 0 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.2; }
.gnm-danke__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.gnm-danke__knoepfe .gnm-knopf.is-kopiert::after { content: " ✓ kopiert"; }
.gnm-danke__schritte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 22px; }
.gnm-danke__schritte .gnm-nk { display: flex; flex-direction: column; }
.gnm-danke__schritte .gnm-nk .gnm-knopf { margin-top: auto; align-self: flex-start; }
.gnm-danke__schritte .gnm-nk:nth-child(2) { background: var(--gnm-lila-hell); }
.gnm-danke__ausgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; padding-top: 22px; }
.gnm-danke__ausgabe { display: flex; flex-direction: column; gap: 8px; color: var(--gnm-ink); text-decoration: none; }
.gnm-danke__ausgabe img { width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; box-shadow: 8px 8px 0 var(--gnm-lila); transition: transform .25s; }
.gnm-danke__ausgabe:hover img { transform: rotate(-1.5deg) translateY(-4px); }
.gnm-danke__ausgabe span { font-family: var(--wp--preset--font-family--newsreader); font-weight: 700; font-size: 20px; margin-top: 8px; }
.gnm-danke__ausgabe small { font-size: 13px; color: #6a3fd1; font-weight: 600; }
.gnm-danke__faq { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 28px; align-items: start; padding-top: 18px; }
.gnm-danke__faq .gnm-faq__a ol { padding-left: 1.2em; }
.gnm-danke__faq .gnm-faq__a a { color: var(--gnm-ink); text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-danke__frage { padding: 22px; border-radius: 16px; background: var(--gnm-pfirsich); }
.gnm-danke__frage .is-style-hand { margin: 0 0 6px; color: var(--gnm-orange); font-size: 28px !important; }
.gnm-danke__frage p { margin: 0 0 14px; }
.gnm-danke__alle { margin: 24px 0 0; }
@media (max-width: 1000px) { .gnm-danke__schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gnm-danke__faq { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .gnm-danke__schritte, .gnm-danke__ausgaben { grid-template-columns: minmax(0, 1fr); } .gnm-danke__ausgaben { gap: 28px; } .gnm-danke__ausgabe img { box-shadow: 5px 5px 0 var(--gnm-lila); } }
/* ==========================================================================
0.17.0 · Update 2 – Feinschliff (G01–G12, A07)
Gemeinsame Werte: Abstand Pfad→Titel, Rand am Handy, Platz unten (Steady-Leiste),
Ebenen (z-index): Inhalt < Nach-oben 900 < Steady-Leiste 2000 < Menü 9999 < Reel-Player 100000.
========================================================================== */
:root {
--gnm-pfad-abstand: clamp(12px, calc(8px + 1.1vw), 24px);
--gnm-rand: 16px;
--gnm-unten: 0px; /* von gnm.js gesetzt: Höhe der Steady-Newsletter-Leiste, wenn sichtbar */
--gnm-lila-dunkel: #6A3FD1; /* Lila für weiße Schrift (Kontrast 6,5:1 statt 3,2:1) */
--gnm-pfeil-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
}
/* G01 · Suche in der Kopfzeile ------------------------------------------- */
/* Kopfzeile ist sticky und damit schon Bezugsrahmen für das Suchfeld darunter. */
.gnm-ks { position: static; display: flex; align-items: center; }
.gnm-ks__knopf {
box-sizing: border-box; flex: 0 0 auto; width: 40px; height: 40px; min-width: 40px; padding: 0; margin: 0;
display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--gnm-ink); border-radius: 50%; background: transparent; color: var(--gnm-ink); cursor: pointer;
}
.gnm-ks__knopf:hover, .gnm-ks__knopf[aria-expanded="true"] { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-ks__knopf:focus-visible, .gnm-ks__zu:focus-visible, .gnm-ks__los:focus-visible { outline: 3px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-ks__panel {
position: absolute; left: 0; right: 0; top: 100%; z-index: 60; box-sizing: border-box;
display: flex; align-items: flex-start; gap: 10px; padding: 14px var(--wp--preset--spacing--page, var(--gnm-rand)) 18px;
background: var(--gnm-paper, #F9F9F7); border-bottom: 1.5px solid var(--gnm-ink); box-shadow: 0 12px 24px rgba(36,36,36,.08);
}
.gnm-ks__panel[hidden] { display: none; }
.gnm-ks__form { flex: 1 1 auto; min-width: 0; margin: 0; }
.gnm-ks__label { display: block; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.gnm-ks__zeile { display: flex; gap: 8px; min-width: 0; }
.gnm-ks__feld {
box-sizing: border-box; flex: 1 1 auto; min-width: 0; width: 100%; height: 48px; margin: 0; padding: 0 18px;
border: 1.5px solid var(--gnm-ink); border-radius: 999px; background: #fff; color: var(--gnm-ink); font: inherit; font-size: 16px; /* 16px: kein Zoom auf iOS */
}
.gnm-ks__feld:focus { outline: 3px solid var(--gnm-lila); outline-offset: 1px; }
.gnm-ks__los { box-sizing: border-box; flex: 0 0 auto; height: 48px; padding: 0 18px; border: 0; border-radius: 999px; background: var(--gnm-ink); color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.gnm-ks__los:hover { background: var(--gnm-orange); color: var(--gnm-ink); }
.gnm-ks__zu { box-sizing: border-box; flex: 0 0 auto; width: 44px; height: 44px; margin-top: 24px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--gnm-ink); border-radius: 50%; background: transparent; color: var(--gnm-ink); cursor: pointer; }
.gnm-ks__zu:hover { background: var(--gnm-ink); color: #fff; }
.gnm-ks__leer { margin: 8px 0 0; font-size: 13px; color: #8a2b0a; }
@media (max-width: 600px) {
.gnm-ks__knopf { width: 36px; height: 36px; min-width: 36px; }
.gnm-ks__los { padding: 0 14px; }
}
/* Kopfzeile: feste, gleichmäßige Abstände, nichts schiebt sich aus dem Bild */
.gnm-header__row { min-width: 0; }
.gnm-header__row > * { min-width: 0; }
.gnm-actions { flex-shrink: 0; }
.gnm-logo img { display: block; max-width: 100%; height: auto; }
/* G02 · Pfeile als ausgerichtete Symbole, Chips, App-Hinweis ---------------- */
.gnm-pfeil-i { display: inline-block; flex: 0 0 auto; width: 1em; height: 1em; min-width: 16px; min-height: 16px; max-width: 20px; max-height: 20px; font-size: 0 !important; line-height: 0; vertical-align: -0.15em;
background: currentColor; -webkit-mask: var(--gnm-pfeil-svg) no-repeat center / contain; mask: var(--gnm-pfeil-svg) no-repeat center / contain; }
.wp-block-button .wp-block-button__link::after { content: "" !important; width: 18px; height: 18px; flex: 0 0 18px; background: currentColor;
-webkit-mask: var(--gnm-pfeil-svg) no-repeat center / contain; mask: var(--gnm-pfeil-svg) no-repeat center / contain; }
.wp-block-button.no-arrow .wp-block-button__link::after { content: none !important; }
.gnm-pfeil { box-sizing: border-box; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; font-size: 0 !important; }
.gnm-pfeil::before { content: ""; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--gnm-pfeil-svg) no-repeat center / contain; mask: var(--gnm-pfeil-svg) no-repeat center / contain; }
.gnm-pfeil[data-gnm-scroll="-1"]::before { transform: scaleX(-1); }
.gnm-mn__bald, .gnm-bald, .gnm-pill-klein--dunkel { color: #fff !important; } /* „Kommt bald“ auf dunkel: weiß */
.gnm-mn__app b { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.gnm-mn__app b .gnm-mn__bald { margin: 0; }
.gnm-mn__app > span:last-child, .gnm-mn__all .gnm-pfeil-i { flex-shrink: 0; }
.gnm-mn__zu, .gnm-burger-knopf { min-width: 44px; min-height: 44px; }
/* G03 · Abstände und Unterstreichungen ------------------------------------- */
mark.gnm-box { margin-inline-start: .12em; } /* echtes Leerzeichen bleibt im Text; Abstand schützt auch bei Übersetzung */
mark.gnm-rot { max-width: 100%; }
.gnm-rot__track span { white-space: nowrap; }
.gnm-rt__pfad, .gnm-recht__pfad, .gnm-ah .gnm-rt__pfad { margin-bottom: var(--gnm-pfad-abstand) !important; }
/* Unterstreichung folgt genau dem Text (auch über Zeilenumbrüche), nie über die Wortbreite hinaus */
mark.gnm-unter, mark.gnm-mark {
background: none !important;
text-decoration-line: underline; text-decoration-color: var(--gnm-orange); text-decoration-thickness: .2em;
text-underline-offset: .04em; text-decoration-skip-ink: none;
-webkit-box-decoration-break: clone; box-decoration-break: clone;
}
mark.gnm-mark--lila { text-decoration-color: var(--gnm-lila); }
.gnm-unter-lila mark.gnm-unter { text-decoration-color: var(--gnm-orange); } /* GuteZukunft: nur die orange Linie */
.gnm-unter-lila mark.gnm-unter, .gnm-hero__titel mark.gnm-unter, .gnm-ah__titel .gnm-mark, .gnm-ak2__titel .gnm-mark { background-image: none !important; background-size: 0 0 !important; }
/* Titel mit hervorgehobenem Wort: keine zweite (wachsende) Linie beim Überfahren */
.wp-block-post-title a:has(mark.gnm-unter), .gnm-hero__titel a:has(mark.gnm-unter) { background-size: 0 0 !important; }
.gnm-claim mark { margin-inline-start: .1em; }
/* G04 · Ein Badge für alle ----------------------------------------------- */
.gnm-pill-klein, .is-style-pills a, .taxonomy-category.is-style-pills a, .gnm-k__plus {
font-family: var(--wp--preset--font-family--geist), system-ui, sans-serif !important; font-style: normal;
display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1 !important; box-sizing: border-box; vertical-align: middle;
}
.gnm-k__plus { font-size: 13px; font-weight: 700; letter-spacing: .06em; padding: 6px 10px; }
.gnm-an-z__titel .gnm-pill-klein { vertical-align: .2em; }
.gnm-an-s--quer .gnm-an-s__inhalt { align-items: stretch; }
.gnm-an-s--quer .gnm-k--quer { height: 100%; }
@media (max-width: 781px) { .gnm-an-s--quer .gnm-k--quer { height: auto; } }
/* G05 · Ticker: lesbares Tempo (JS), Pause-Knopf, ohne Bewegung als scrollbare Liste */
.gnm-ticker { position: relative; }
.gnm-ticker__pause { box-sizing: border-box; flex: 0 0 auto; width: 44px; height: 100%; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-left: 1px solid rgba(255,255,255,.18); background: transparent; color: #fff; cursor: pointer; order: 3; }
.gnm-ticker__pause:hover, .gnm-ticker__pause:focus-visible { background: rgba(255,255,255,.12); outline: 2px solid var(--gnm-orange); outline-offset: -2px; }
.gnm-ticker__pause svg { width: 16px; height: 16px; }
.gnm-ticker:hover .gnm-ticker__track, .gnm-ticker:focus-within:not(:has(.gnm-ticker__pause:focus)) .gnm-ticker__track, .gnm-ticker.is-pausiert .gnm-ticker__track { animation-play-state: paused; } /* Fokus auf einem Ticker-Link hält an; der Pause-Knopf selbst steuert per aria-pressed */
.gnm-ticker.is-handbetrieb .gnm-ticker__win { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.gnm-ticker.is-handbetrieb .gnm-ticker__win::-webkit-scrollbar { display: none; }
.gnm-ticker.is-handbetrieb .gnm-ticker__track { animation: none !important; transform: none !important; }
.gnm-ticker.is-handbetrieb .gnm-ticker__dup { display: none; }
@media (prefers-reduced-motion: reduce) {
.gnm-ticker__win { overflow-x: auto; }
.gnm-ticker__dup { display: none !important; }
.gnm-ticker__pause { display: none; }
}
/* G06 · Magazin, GNM+, Testphase ------------------------------------------ */
.is-style-label-lila { background: var(--gnm-lila-dunkel) !important; color: #fff !important; }
.gnm-fan5__pfeil { left: calc(50.4% - 7.9%) !important; } /* über dem mittleren (neuesten) Cover zentriert */
@media (max-width: 600px) {
.gnm-fan5__pfeil { left: calc(50.4% - 9%) !important; width: 18% !important; top: -9% !important; }
.gnm-fan5__note { left: 50% !important; transform: translateX(-12%) rotate(-4deg) !important; top: -10% !important; }
.gnm-epaper-klammer .gnm-fan5 { margin-top: 44px; }
}
.gnm-plus-karte .gnm-btn-rand .wp-block-button__link::after { content: none !important; } /* nur die Haupt-Aktion trägt den Pfeil */
.gnm-plus-karte .wp-block-buttons { flex-wrap: wrap; gap: 10px; }
.gnm-plus-karte .wp-block-button { max-width: 100%; }
.gnm-plus-karte .wp-block-button__link { white-space: normal; text-align: left; }
.gnm-abo-h__gratis { display: flex !important; align-items: center; justify-content: center; width: auto !important; min-width: 92px; min-height: 92px; padding: .6em; box-sizing: border-box; }
.gnm-abo-h__gratis-text { display: block; line-height: 1.05; text-align: center; }
@media (max-width: 781px) { .gnm-abo-h__gratis { min-width: 76px; min-height: 76px; font-size: 14px; padding: .55em; } }
/* G07 · App-Vorschau (ohne Deko-Notch) und Podcast-Folge --------------------- */
.gnm-app__rahmen rect:not(.gnm-zeichnen) { display: none; }
/* Podcast-Folge: dunkle Karte und lila Player teilen einen Abstandswert (Überlappung) und dieselben Ränder.
Der Elternblock ist eine Flex-Spalte mit Lücke – die wird eingerechnet, sonst entsteht ein leerer dunkler Streifen. */
.gnm-pc--folge { --gnm-pc-luecke: 64px; --gnm-fp-ueber: clamp(44px, 5vw, 72px); --gnm-fp-luft: clamp(24px, 2.6vw, 40px); row-gap: var(--gnm-pc-luecke); }
.gnm-pc--folge > .gnm-fh { padding-bottom: calc(var(--gnm-fp-ueber) + var(--gnm-fp-luft)) !important; }
.gnm-pc--folge > .gnm-fp { margin-top: calc(-1 * (var(--gnm-fp-ueber) + var(--gnm-pc-luecke))) !important; box-sizing: border-box; }
@media (max-width: 781px) {
.gnm-pc--folge { --gnm-pc-luecke: 48px; }
.gnm-pc--folge > .gnm-fp { width: 100%; margin-inline: 0; }
}
/* G08 · Nach oben ----------------------------------------------------------- */
.gnm-nachoben-halter { position: sticky; bottom: calc(16px + var(--gnm-unten) + env(safe-area-inset-bottom, 0px)); z-index: 900; height: 0; margin: 0 !important; pointer-events: none; display: flex; justify-content: flex-end; max-width: none !important; }
.gnm-nachoben {
position: absolute; right: 0; bottom: 0; box-sizing: border-box; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center;
border: 1.5px solid var(--gnm-ink); border-radius: 50%; background: #fff; color: var(--gnm-ink); cursor: pointer; pointer-events: auto;
box-shadow: 3px 3px 0 var(--gnm-lila); opacity: 0; transform: translateY(8px); visibility: hidden; transition: opacity .2s, transform .2s, visibility 0s .2s;
}
.gnm-nachoben.is-sichtbar { opacity: 1; transform: none; visibility: visible; transition: opacity .2s, transform .2s; }
.gnm-nachoben:hover { background: var(--gnm-orange); }
.gnm-nachoben:focus-visible { outline: 3px solid var(--gnm-lila); outline-offset: 3px; }
.gnm-nachoben svg { width: 20px; height: 20px; }
@media (prefers-reduced-motion: reduce) { .gnm-nachoben { transition: none !important; } }
/* G09 · Reel-Texte: höchstens zwei Zeilen, nie übereinander ------------------ */
.gnm-kreis__t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; max-width: 100%; }
.gnm-reel figcaption { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: break-word; }
.gnm-reels-leer { margin: 0; padding: 18px 0; font-size: 16px; }
/* G10–G12 · Reel-Player ---------------------------------------------------- */
.gnm-rl__medien { position: absolute; inset: 0; }
.gnm-rl__laden, .gnm-rl__fehler { position: absolute; inset: 0; display: grid; place-content: center; gap: 12px; padding: 24px; text-align: center; color: #fff; background: rgba(24,20,32,.6); }
.gnm-rl__laden::before { content: ""; justify-self: center; width: 36px; height: 36px; border: 3px solid rgba(255,255,255,.3); border-top-color: #fff; border-radius: 50%; animation: gnm-dreh 1s linear infinite; }
@keyframes gnm-dreh { to { transform: rotate(360deg); } }
.gnm-rl__fehler a { color: var(--gnm-orange); font-weight: 600; }
.gnm-rl__text-voll { display: block; margin-top: 4px; font-family: var(--wp--preset--font-family--geist); font-size: 13px; font-weight: 400; line-height: 1.4; opacity: .9; }
.gnm-rl__nav, .gnm-rl__zu { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.gnm-rl__nav svg, .gnm-rl__zu svg { width: 22px; height: 22px; }
.gnm-rl__zu:focus-visible, .gnm-rl__nav:focus-visible { outline: 3px solid var(--gnm-orange); outline-offset: 3px; }
@media (max-width: 600px), (max-height: 500px) {
.gnm-rl { place-items: stretch; }
.gnm-rl__buehne {
box-sizing: border-box; width: 100%; height: 100vh; height: 100dvh; max-width: none;
grid-template-columns: 44px 44px minmax(0, 1fr) 44px; grid-template-rows: auto minmax(0, 1fr) auto;
grid-template-areas: "zurueck weiter . zu" "medien medien medien medien" "fuss fuss fuss fuss";
column-gap: 12px; row-gap: 10px;
padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
}
.gnm-rl__nav { position: static; width: 44px; height: 44px; }
.gnm-rl__nav--zurueck { grid-area: zurueck; } .gnm-rl__nav--weiter { grid-area: weiter; }
.gnm-rl__zu { position: static; grid-area: zu; width: 44px; height: 44px; }
.gnm-rl__rahmen, .gnm-rl__rahmen--post {
grid-area: medien; position: relative; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; justify-self: stretch;
background: transparent; box-shadow: none; border-radius: 0; overflow: visible; container-type: size;
}
.gnm-rl__rahmen .gnm-rl__medien {
position: absolute; inset: 0; margin: auto; width: min(100cqw, 100cqh * 9 / 16); height: auto; aspect-ratio: 9 / 16; max-height: 100cqh;
border-radius: 14px; overflow: hidden; background: var(--gnm-ink); box-shadow: 4px 4px 0 var(--gnm-lila);
}
.gnm-rl__rahmen.is-video, .gnm-rl__rahmen--post.is-video { background: transparent; box-shadow: none; }
.gnm-rl__rahmen.is-video .gnm-rl__medien { background: #fff; }
.gnm-rl__rahmen--post .gnm-rl__medien { width: 100%; height: 100%; aspect-ratio: auto; }
.gnm-rl__fuss { grid-area: fuss; flex-direction: column; gap: 2px; max-height: 30vh; overflow: auto; }
.gnm-rl__fuss b { font-size: 16px; line-height: 1.2; }
.gnm-rl__hinweis { padding: 16px; gap: 10px; }
}
@media (max-height: 500px) and (orientation: landscape) { /* quer: Video in voller Höhe, Text daneben, Knöpfe außen */
.gnm-rl__buehne { grid-template-columns: 44px auto minmax(0, 1fr) 44px; grid-template-rows: 44px 44px minmax(0, 1fr); grid-template-areas: "zurueck medien fuss zu" "weiter medien fuss ." ". medien fuss ."; column-gap: 16px; row-gap: 12px; }
.gnm-rl__nav--weiter { position: static; }
.gnm-rl__rahmen, .gnm-rl__rahmen--post { width: calc((100dvh - 20px) * 9 / 16); }
.gnm-rl__fuss { align-self: end; max-height: 100%; max-width: 420px; }
.gnm-rl__hinweis { padding: 12px; gap: 8px; overflow-y: auto; max-height: 100%; font-size: 12px; }
.gnm-rl__hinweis .gnm-rl__text { font-size: 11.5px; line-height: 1.35; }
}
html.gnm-rl-offen, html.gnm-rl-offen body, html.gnm-mn-offen body { overflow: hidden; }
/* G02 · Pfeil bei „All News“ im Menü mittig zur Schrift (Flex-Grundlinie eines leeren Symbols lag sonst unten) */
.gnm-mn__all { align-items: center; }
.gnm-mn__all .gnm-pfeil-i { width: 24px; height: 24px; max-width: 24px; max-height: 24px; vertical-align: middle; }
.gnm-gnl__form button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gnm-rl__fehler { background: var(--gnm-ink); } /* G11: Fehlerhinweis auf ruhigem dunklem Grund statt grauer Fläche */
/* ==========================================================================
0.18.0 · Update 3 · Redesign (R01–R04, A05)
========================================================================== */
:root { --gnm-ticket-blass: #F7F2FF; --gnm-ticket-lila: #D9C5FF; --gnm-ticket-orange: #FBC98E; --gnm-fb: #0866FF; --gnm-insta: #D62976; }
/* R01 · GutSparen-Ticket (nur die Karten) ---------------------------------- */
.gnm-gs--ticket .gnm-gs__ticket {
--stub: 64px; --kerbe: 10px;
position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--stub); gap: 0; padding: 0; min-height: 220px;
border-radius: 18px; background: var(--gnm-ticket-blass); box-shadow: inset 0 0 0 1px #E3D6FA;
-webkit-mask: radial-gradient(circle var(--kerbe) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--kerbe) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
mask: radial-gradient(circle var(--kerbe) at calc(100% - var(--stub)) 0, #0000 98%, #000) top / 100% 51% no-repeat, radial-gradient(circle var(--kerbe) at calc(100% - var(--stub)) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
}
.gnm-gs--ticket .gnm-gs__ticket:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px #C9B1F7; }
.gnm-gs--ticket .gnm-gs__ticket:focus-visible { outline: 3px solid var(--gnm-ink); outline-offset: 3px; }
.gnm-gs__rumpf { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px 18px 16px 20px; }
.gnm-gs--ticket .gnm-gs__kicker { color: #6A3FD1; opacity: 1; }
.gnm-gs--ticket .gnm-gs__firma { font-size: clamp(22px, 2vw, 28px); overflow-wrap: anywhere; hyphens: auto; }
.gnm-gs__strich { width: 34px; height: 4px; border-radius: 2px; background: var(--gnm-orange); }
.gnm-gs--ticket .gnm-gs__wert { background: #fff; box-shadow: inset 0 0 0 1px #E3D6FA; font-size: 17px; }
.gnm-gs--ticket .gnm-gs__text { font-size: 14.5px; }
.gnm-gs__fuss { margin-top: auto; padding-top: 12px; border-top: 1px solid #DCCFF3; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.gnm-gs--ticket .gnm-gs__mehr { margin: 0; padding: 0; border: 0; font-size: 14px; font-weight: 700; }
.gnm-gs__info { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 11.5px; color: #55525c; }
.gnm-gs__plus { padding: 1px 8px; border-radius: 999px; background: var(--gnm-orange); color: var(--gnm-ink); font-weight: 700; font-size: 11px; }
.gnm-gs__abschnitt { display: grid; place-items: center; border-left: 2px dashed rgba(36,36,36,.45); background: var(--gnm-ticket-lila); border-radius: 0 18px 18px 0; color: var(--gnm-ink); }
.gnm-gs__abschnitt svg { width: 30px; height: 30px; transition: transform .2s; }
.gnm-gs__ticket:hover .gnm-gs__abschnitt svg { transform: translate(2px, -2px); }
.gnm-gs--ticket > .gnm-gs__ticket:nth-child(3n+2) .gnm-gs__abschnitt { background: var(--gnm-ticket-orange); }
@media (max-width: 781px) {
.gnm-gs--ticket .gnm-gs__ticket { --stub: 52px; min-height: 0; }
.gnm-gs__rumpf { padding: 18px 14px 14px 16px; }
}
@media (prefers-reduced-motion: reduce) { .gnm-gs--ticket .gnm-gs__ticket:hover { transform: none; } }
/* R04 · Farben: Firmen-Abo-Vorteile (1 bleibt, 2 Orange, 3 GNM-Lila) und Reichweite (Facebook-Blau, Instagram-Pink, Website GNM-Lila) */
.gnm-seite-firma .gnm-vk__raster > .gnm-vk:nth-child(2) { background: var(--gnm-orange); }
.gnm-seite-firma .gnm-vk__raster > .gnm-vk:nth-child(3) { background: var(--gnm-lila); }
.gnm-seite-firma .gnm-vk__raster > .gnm-vk:nth-child(2) li::before { background: var(--gnm-ink); }
.gnm-seite-firma .gnm-vk__raster > .gnm-vk:nth-child(3) li::before { background: #fff; box-shadow: inset 0 0 0 2px var(--gnm-ink); }
.gnm-md-zahl--facebook { background: var(--gnm-fb); color: #fff; } /* Weiß auf #0866FF: 4,8:1 */
.gnm-md-zahl--instagram { background: var(--gnm-insta); color: #fff; } /* Weiß auf #D62976: 4,7:1 */
.gnm-md-zahl--website { background: var(--gnm-lila); color: var(--gnm-ink); } /* Ink auf #A875FF: 4,9:1 */
.gnm-md-zahl--facebook span, .gnm-md-zahl--instagram span { color: #fff; }
.gnm-md-zahl--website span { color: var(--gnm-ink); }
.gnm-md-zahl:focus-visible { outline: 3px solid var(--gnm-ink); outline-offset: 3px; }
/* R03 · Rubrik-Reels als Kacheln: quadratisch (Desktop), Hochformat 3:4 (Handy) – keine Kreise mehr */
.gnm-kreise--kacheln .gnm-kreise__reihe { gap: 16px; padding: 4px 4px 10px; }
.gnm-kreise--kacheln .gnm-kachel { width: clamp(112px, 9.5vw, 136px); align-items: stretch; text-align: left; gap: 8px; }
.gnm-kreise--kacheln .gnm-kreis__bild { position: relative; display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--gnm-lila-hell); box-shadow: 3px 3px 0 var(--gnm-lila); }
.gnm-kreise--kacheln .gnm-kreis__bild img { width: 100%; height: 100%; border-radius: 0; object-fit: cover; filter: none; mix-blend-mode: normal; background: none; transition: transform .3s; }
.gnm-kreise--kacheln .gnm-kreis__bild .gnm-reel__leer { border-radius: 0; }
.gnm-kreise--kacheln .gnm-kachel:hover .gnm-kreis__bild { transform: translateY(-3px); }
.gnm-kreise--kacheln .gnm-kachel:hover img { transform: scale(1.04); }
.gnm-kreise--kacheln .gnm-kachel:focus-visible { outline: none; }
.gnm-kreise--kacheln .gnm-kachel:focus-visible .gnm-kreis__bild { outline: 3px solid var(--gnm-ink); outline-offset: 3px; }
.gnm-kachel__play { position: absolute; left: 8px; bottom: 8px; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.92); }
.gnm-kachel__play::before { content: ""; position: absolute; left: 11px; top: 8px; border-left: 9px solid var(--gnm-ink); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.gnm-kreise--kacheln .gnm-kreis__t { font-size: 13px; line-height: 1.25; }
@media (max-width: 781px) {
.gnm-kreise--kacheln .gnm-kachel { width: 128px; }
.gnm-kreise--kacheln .gnm-kreis__bild { aspect-ratio: 3 / 4; }
}
@media (prefers-reduced-motion: reduce) { .gnm-kreise--kacheln .gnm-kachel:hover .gnm-kreis__bild, .gnm-kreise--kacheln .gnm-kachel:hover img { transform: none; } }
/* R03 · Themen-Pills in einer Reihe mit Vor/Zurück (Rubrikseiten, u. a. Good News Thoughts) */
.gnm-pillband { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.gnm-pillband .gnm-themen__reihe { flex-wrap: nowrap; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x proximity; scrollbar-width: none; margin-right: 0 !important; padding: 4px 2px; }
.gnm-pillband .gnm-themen__reihe::-webkit-scrollbar { display: none; }
.gnm-pillband .gnm-thema { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; }
.gnm-pillband .gnm-thema:focus-visible { outline: 3px solid var(--gnm-ink); outline-offset: 2px; }
.gnm-pillband__nav { box-sizing: border-box; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--gnm-ink); border-radius: 50%; background: #fff; color: var(--gnm-ink); cursor: pointer; }
.gnm-pillband__nav[hidden] { display: none; }
.gnm-pillband__nav svg { width: 20px; height: 20px; }
.gnm-pillband__nav:disabled { opacity: .35; cursor: default; }
.gnm-pillband__nav:not(:disabled):hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-pillband__nav:focus-visible { outline: 3px solid var(--gnm-ink); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .gnm-pillband .gnm-themen__reihe { scroll-behavior: auto; } }
/* R02 · Hör-Lounge: große Geschichte (hell-lila) + kompakte Liste, ein Player, echte Fortschrittsanzeige */
.gnm-hl__kopf { align-items: flex-end; }
.gnm-hl__alle { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gnm-ink) !important; text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.gnm-hl__alle svg, .gnm-hl__lesen svg { width: 16px; height: 16px; }
.gnm-hl__klammer > .is-style-label { margin: 0 0 18px !important; }
.gnm-hl__raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(24px, 3vw, 44px); padding-bottom: 18px; }
.gnm-hl--allein .gnm-hl__raster { grid-template-columns: minmax(0, 760px); }
.gnm-hl__feature { display: flex; flex-direction: column; gap: 10px; padding: clamp(16px, 1.8vw, 24px); border-radius: 18px; background: var(--gnm-lila-hell); min-width: 0; }
.gnm-hl__bild-link { display: block; }
.gnm-hl__bild { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; background: #e4d8fb; }
.gnm-hl__ersatz { display: grid; place-items: center; color: #6A3FD1; background: linear-gradient(135deg, #E4D6FF, #F7F2FF); }
.gnm-hl__bild.gnm-hl__ersatz svg { width: 64px; height: 64px; }
.gnm-hl__kicker { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #6A3FD1; }
.gnm-hl__plus { padding: 1px 8px; border: 1.5px solid currentColor; border-radius: 999px; letter-spacing: .06em; }
.gnm-hl__titel { margin: 0; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(26px, 2.6vw, 40px); line-height: 1.05; letter-spacing: -.025em; overflow-wrap: break-word; }
.gnm-hl__text { margin: 0; font-size: 15.5px; line-height: 1.5; color: #3b3a40; }
.gnm-hl__meta { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; font-size: 12.5px; color: #5d5b63; }
.gnm-hl__hoer { display: inline-flex; align-items: center; gap: 5px; font-weight: 600; color: var(--gnm-ink); font-variant-numeric: tabular-nums; }
.gnm-hl__hoer svg { width: 15px; height: 15px; }
.gnm-hl__spieler { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 14px; margin-top: 6px; padding-top: 14px; border-top: 1px solid #D8C8F6; }
.gnm-hl__gross-play { box-sizing: border-box; display: grid; place-items: center; width: 60px; height: 60px; padding: 0; border: 0; border-radius: 50%; background: var(--gnm-orange); color: var(--gnm-ink) !important; cursor: pointer; transition: transform .2s; }
.gnm-hl__gross-play svg { width: 24px; height: 24px; }
.gnm-hl__gross-play:hover { transform: scale(1.05); }
.gnm-hl__gross-play:focus-visible, .gnm-hl__klein-play:focus-visible, .gnm-hl__lesen:focus-visible, .gnm-hl__alle:focus-visible { outline: 3px solid var(--gnm-ink); outline-offset: 3px; }
.gnm-hl__steuer { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "jetzt zeit" "seek seek"; gap: 4px 10px; align-items: center; min-width: 0; }
.gnm-hl__jetzt { grid-area: jetzt; font-weight: 700; }
.gnm-hl__zeit { grid-area: zeit; font-size: 12.5px; font-variant-numeric: tabular-nums; color: #5d5b63; }
.gnm-hl__seek { grid-area: seek; width: 100%; height: 24px; margin: 0; accent-color: #6A3FD1; cursor: pointer; }
.gnm-hl__seek:disabled { cursor: default; opacity: .55; }
.gnm-hl__spieler--plus .gnm-hl__gross-play { text-decoration: none; }
.gnm-hl__plus-text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: #4a4850; }
.gnm-hl__plus-text b { font-size: 15px; color: var(--gnm-ink); }
.gnm-hl__fehler { margin: 0; padding: 8px 12px; border-radius: 10px; background: #fff; font-size: 13px; color: #8a2a2a; }
.gnm-hl__fehler a { color: inherit; font-weight: 700; }
.gnm-hl__lesen { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding-top: 10px; border-top: 1px solid #D8C8F6; font-weight: 700; color: var(--gnm-ink) !important; text-decoration: underline; text-underline-offset: 4px; }
.gnm-hl__feature .gnm-hl__lesen { width: 100%; }
.gnm-hl__liste { min-width: 0; border-left: 1.5px solid var(--gnm-ink); padding-left: clamp(18px, 2.4vw, 34px); }
.gnm-hl__liste-h { margin: 0 0 10px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(24px, 2.2vw, 34px); letter-spacing: -.02em; }
.gnm-hl__zeilen { list-style: none; margin: 0; padding: 0; }
.gnm-hl__zeile { display: grid; grid-template-columns: 88px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid #d9d7d0; }
.gnm-hl__zeile:last-child { border-bottom: 0; }
.gnm-hl__mini { display: block; width: 88px; height: 88px; object-fit: cover; border-radius: 10px; background: #e4d8fb; }
.gnm-hl__mini.gnm-hl__ersatz svg { width: 34px; height: 34px; }
.gnm-hl__mitte { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.gnm-hl__zeile-t { font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(18px, 1.5vw, 22px); line-height: 1.12; letter-spacing: -.015em; overflow-wrap: break-word; }
.gnm-hl__balken { display: block; height: 3px; border-radius: 2px; background: transparent; overflow: hidden; }
.gnm-hl__balken i { display: block; width: 0; height: 100%; background: #6A3FD1; }
.gnm-hl__zeile.is-playing .gnm-hl__balken { background: #E4D6FF; }
.gnm-hl__aktion { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gnm-hl__klein-play { box-sizing: border-box; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #6A3FD1; border-radius: 50%; background: #fff; color: #6A3FD1 !important; cursor: pointer; text-decoration: none; transition: transform .2s; }
.gnm-hl__klein-play svg { width: 18px; height: 18px; }
.gnm-hl__klein-play:hover, .gnm-hl__zeile.is-playing .gnm-hl__klein-play { background: #6A3FD1; color: #fff !important; }
.gnm-hl__klein-play:disabled { opacity: .4; cursor: default; }
.gnm-hl__lesen--klein { padding: 0; border: 0; font-size: 13px; }
.gnm-hl__lesen--klein svg { width: 13px; height: 13px; }
.gnm-hl__feature.is-playing .gnm-hl__gross-play { background: var(--gnm-ink); color: #fff !important; }
@media (max-width: 900px) {
.gnm-hl__raster { grid-template-columns: minmax(0, 1fr); gap: 22px; }
.gnm-hl__liste { border-left: 0; padding-left: 0; border-top: 1.5px solid var(--gnm-ink); padding-top: 14px; }
.gnm-hl__kopf { flex-direction: column; align-items: flex-start; gap: 10px; }
}
@media (max-width: 480px) {
.gnm-hl__zeile { grid-template-columns: 64px minmax(0, 1fr) auto; gap: 12px; }
.gnm-hl__mini { width: 64px; height: 64px; }
.gnm-hl__gross-play { width: 56px; height: 56px; }
.gnm-hl__meta .gnm-hl__lese { display: none; }
}
@media (prefers-reduced-motion: reduce) { .gnm-hl__gross-play, .gnm-hl__klein-play { transition: none; } .gnm-hl__gross-play:hover { transform: none; } }
.gnm-hl__mini.gnm-hl__ersatz, .gnm-hl__bild.gnm-hl__ersatz { display: grid; place-items: center; }
.gnm-hl__lesen--klein { white-space: nowrap; }
.gnm-hl__klein-play.gnm-hl__zum-artikel { border-style: dashed; color: var(--gnm-ink) !important; border-color: var(--gnm-ink); }
.gnm-hl__klein-play.gnm-hl__zum-artikel:hover { background: var(--gnm-orange); border-color: var(--gnm-orange); }
.gnm-hl .is-laedt [data-gnm-hl-play] { animation: gnm-hl-puls 1s ease-in-out infinite; }
@keyframes gnm-hl-puls { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .gnm-hl .is-laedt [data-gnm-hl-play] { animation: none; } }
.gnm-gs--ticket .gnm-gs__firma { overflow-wrap: break-word; }
.gnm-gs--ticket .gnm-gs__firma--lang { font-size: clamp(18px, 1.5vw, 22px); line-height: 1.12; hyphens: auto; overflow-wrap: anywhere; }
/* ==========================================================================
0.19.0 · Stabilisierung nach dem Review (F02–F09, F11)
========================================================================== */
:root { --gnm-tief-lila: #2E1A6B; }
/* F03 · Luft für mehrzeilige Newsreader-Überschriften. Kurze Seitentitel bleiben groß und dicht,
Satz-Überschriften (Artikel, Aufmacher, Abschnitte) bekommen mehr Zeilenabstand und weniger negative Laufweite. */
.gnm-ak2__titel { line-height: 1.04; letter-spacing: -.02em; max-width: 18ch; }
.gnm-k--feature .gnm-k__titel, .gnm-fokus__titel, .gnm-archiv li:first-child .gnm-archiv-titel, .gnm-hl__titel { line-height: 1.05; letter-spacing: -.02em; }
.gnm-an-s__kopf h2, .gnm-aa__kopf h2, .gnm-lm__kopf h2, .gnm-faq h2, .gnm-abo h2, .gnm-rs__kopf h2, .gnm-gnl h2, .gnm-ab__h, .gnm-fu__h, .gnm-pk h3, .gnm-epaper__h, .gnm-epaper5__h, .gnm-wa2__h, .gnm-lk__h, .gnm-hilfe h2, .gnm-zeit-band h2, .gnm-uu__satz { line-height: 1.02; letter-spacing: -.025em; }
.gnm-rt__h1, .gnm-an-h1, .gnm-pc__h1, .gnm-recht__h1, .gnm-fu-k__h1, .gnm-ah__titel, .gnm-fh__gross, .gnm-seiten-h1, .gnm-danke__h1, .gnm-app__titel { line-height: .96 !important; letter-spacing: -.035em; }
.gnm-rt__h1--lang { font-size: clamp(44px, 7vw, 112px); line-height: 1.02 !important; letter-spacing: -.025em; max-width: 16ch; }
.gnm-fokus__titel, .gnm-k--feature .gnm-k__titel { text-wrap: balance; }
/* Unterstreichung: unter den Unterlängen, mit Abstand zum Nachbarwort */
mark.gnm-unter, mark.gnm-mark { text-underline-offset: .12em; text-decoration-thickness: .14em; text-decoration-skip-ink: auto; }
mark.gnm-unter + *, * + mark.gnm-unter { margin-inline-start: 0; }
/* F04 · Lesbare Größen und Kontraste */
.gnm-ap__k { font-size: 12.5px; letter-spacing: .08em; color: #D4BCFF; } /* hell-lila auf Anthrazit: 8,6:1 */
.gnm-fp__hinweis { font-size: 13px; line-height: 1.45; color: var(--gnm-ink); } /* Podigee-Hinweis lesbar */
.gnm-abo__notiz { color: var(--gnm-ink) !important; font-size: 26px !important; text-shadow: none; } /* „Auch als Geschenk-Abo!“ auf Lila */
.gnm-lese--folge .gnm-lese__mitte .gnm-fz__k { margin-bottom: 20px; font-size: 12px; }
.gnm-lese--folge .gnm-lese__mitte .gnm-fz__k + h2 { line-height: 1.04; }
/* F05 · Kopf-Player: echter Fortschritt statt Deko-Welle, Zeit, Zustände */
.gnm-ap > div { gap: 6px; }
.gnm-ap__leiste { display: flex; align-items: center; gap: 10px; min-width: 0; }
.gnm-ap__seek { flex: 1; min-width: 60px; height: 22px; margin: 0; accent-color: #D4BCFF; cursor: pointer; }
.gnm-ap__seek:disabled { opacity: .45; cursor: default; }
.gnm-ap__zeit { font-size: 12.5px; color: #fff; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gnm-ap__status { font-size: 12.5px; color: #F4D7BD; min-height: 0; }
.gnm-ap__status:empty { display: none; }
.gnm-ap.is-playing button svg path { d: initial; } /* Symbol tauscht jetzt das Skript */
.gnm-ap.is-laedt button { animation: gnm-hl-puls 1s ease-in-out infinite; }
.gnm-ap.is-fehler button { background: #8a8a8a; cursor: default; }
.gnm-ap button:focus-visible, .gnm-ap a:focus-visible, .gnm-ap__seek:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gnm-ap--gesperrt { gap: 12px; }
.gnm-ap__schloss { display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 50%; background: var(--gnm-orange); color: var(--gnm-ink); }
.gnm-ap__schloss svg { width: 20px; height: 20px; }
.gnm-ap__hinweis { font-size: 13px; line-height: 1.4; color: #fff; }
.gnm-ap__hinweis a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
/* 0.34.0 · Kennzeichnung KI-Stimme unter dem Kopf-Player */
.gnm-ap-wrap { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gnm-ap__ki { margin: 0; padding: 0 6px; font-size: 13px; line-height: 1.45; color: var(--gnm-ink); opacity: .82; }
.gnm-ap__ki b { font-weight: 700; }
.gnm-ap__ki a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.gnm-ap--im-text { margin: 1.4em 0; }
.gnm-audio-verweis { margin: 1.2em 0; font-size: 15px; }
.gnm-audio-verweis a { font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .gnm-ap.is-laedt button { animation: none; } }
/* F02 · Steady-Vorschau: sauber begrenzt, sanft auslaufend */
.gnm-paywall-vorschau { position: relative; max-height: 22em; overflow: hidden; }
.gnm-paywall-vorschau::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6em; background: linear-gradient(rgba(249,249,247,0), var(--gnm-paper)); pointer-events: none; }
.gnm-paywall-vorschau img { max-width: 100%; height: auto; }
.gnm-paywall-vorschau__ende { margin: 0; }
/* F06 · „Kurz gesagt“ auch in Orange (gleicher Aufbau: Klammer-Karte, Handschrift-Label, nummerierte Punkte) */
.gnm-text .is-style-kurz-gesagt-orange { position: relative; padding: 22px 26px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: var(--gnm-orange); color: var(--gnm-ink); box-shadow: 6px 6px 0 var(--gnm-ink); font-size: 15px; line-height: 1.5; }
.gnm-text .is-style-kurz-gesagt-orange::after { content: "In 20 Sekunden"; position: absolute; right: 20px; top: 18px; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.gnm-text .is-style-kurz-gesagt-orange .gnm-kg__titel, .gnm-text .is-style-kurz-gesagt-orange > p:first-child { margin: 0 0 10px; font-family: var(--wp--preset--font-family--caveat); font-size: 30px; font-weight: 700; line-height: 1; }
.gnm-text .is-style-kurz-gesagt-orange > p:first-child::first-letter { all: unset; }
.gnm-text .is-style-kurz-gesagt-orange ol { margin: 0; padding: 0; list-style: none; counter-reset: gnm-kg; }
.gnm-text .is-style-kurz-gesagt-orange ol li { position: relative; margin: 0 0 8px; padding-left: 34px; counter-increment: gnm-kg; }
.gnm-text .is-style-kurz-gesagt-orange ol li::before { content: counter(gnm-kg); position: absolute; left: 0; top: 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--gnm-ink); color: #fff; font-size: 11px; font-weight: 700; }
.gnm-text .is-style-hinweis-orange { padding: 18px 22px !important; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: var(--gnm-orange) !important; color: var(--gnm-ink) !important; box-shadow: 4px 4px 0 var(--gnm-ink); font-size: 15px; }
.gnm-text .is-style-hinweis-orange a { color: var(--gnm-ink); text-decoration-color: var(--gnm-ink); }
/* F07 · Heft getrennt von der Rubrik, Themen-Filter beschriftet */
.gnm-pill-klein--heft { text-decoration: none; color: var(--gnm-ink); background: #fff; }
.gnm-pill-klein--heft:hover { background: var(--gnm-lila-hell); }
.gnm-pillband__titel { margin: 0 0 8px !important; font-size: 13px; font-weight: 600; color: #4a4850; }
.gnm-pillband__titel a { color: inherit; font-weight: 500; }
/* F09 · Erste Firmen-Abo-Vorteilskarte mit Kontur (wie die Print-Paketkarte) */
.gnm-seite-firma .gnm-vk__raster > .gnm-vk:nth-child(1) { border: 1.5px solid var(--gnm-ink); }
/* F08 · Hinweis, wenn die Plattform den eigenen Play-Klick verlangt */
.gnm-rl__tipp { position: absolute; left: 50%; top: 14px; transform: translateX(-50%); z-index: 3; max-width: calc(100% - 24px); margin: 0; padding: 8px 14px; border-radius: 999px; background: rgba(36,36,36,.88); color: #fff; font-size: 13px; line-height: 1.3; text-align: center; pointer-events: none; transition: opacity .4s; }
.gnm-rl__tipp.is-weg { opacity: 0; }
/* F06 · Alte GNM+-Hinweise in Artikeln (Absatz mit Hintergrund #fcb9003b, rund 100 Artikel) im Karten-Design in Orange – nur Darstellung, Inhalt unverändert */
.gnm-text p.has-background[style*="#fcb9003b" i] { padding: 18px 22px !important; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: var(--gnm-orange) !important; color: var(--gnm-ink) !important; box-shadow: 4px 4px 0 var(--gnm-ink); font-size: 15px !important; line-height: 1.5; }
.gnm-text p.has-background[style*="#fcb9003b" i] a { color: var(--gnm-ink); text-decoration-color: var(--gnm-ink); font-weight: 600; }
/* ==========================================================================
0.20.0 · F12 GNM Aktionskarte (gnm/cta) – Fläche/Text aus freigegebenen Paaren
========================================================================== */
.gnm-cta { --gnm-cta-flaeche: #F1E9FF; --gnm-cta-text: #2E1A6B; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: center; margin-block: clamp(28px, 4vw, 48px); padding: clamp(24px, 3.6vw, 44px); border-radius: 24px; background: var(--gnm-cta-flaeche); color: var(--gnm-cta-text); box-sizing: border-box; }
.gnm-cta--papier { border: 1px solid var(--gnm-line, #E4E2DD); }
.gnm-cta .gnm-cta__text { display: grid; gap: 12px; min-width: 0; }
.gnm-cta .gnm-cta__kicker { margin: 0; font-family: var(--wp--preset--font-family--geist, sans-serif); font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: inherit; }
.gnm-cta .gnm-cta__titel { margin: 0; font-family: var(--wp--preset--font-family--newsreader, Georgia, serif); font-size: clamp(26px, 2.6vw, 38px); line-height: 1.08; letter-spacing: -0.02em; color: inherit; text-wrap: balance; overflow-wrap: break-word; hyphens: auto; }
.gnm-cta .gnm-cta__unter { margin: 0; font-size: 16px; line-height: 1.5; color: inherit; max-width: 52ch; }
.gnm-cta .gnm-cta__knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0; }
.gnm-cta .wp-block-button { max-width: 100%; margin: 0; }
.gnm-cta .wp-block-button__link { white-space: normal; text-align: left; text-decoration: none; }
.gnm-cta .gnm-btn-rand .wp-block-button__link { border-color: currentColor !important; color: inherit !important; }
.gnm-cta .gnm-btn-rand .wp-block-button__link::after { content: none !important; }
.gnm-cta--dunkel .gnm-btn-rand .wp-block-button__link:hover, .gnm-cta--tiefviolett .gnm-btn-rand .wp-block-button__link:hover { background: #fff !important; color: var(--gnm-ink) !important; }
.gnm-cta .gnm-cta__bild { margin: 0; min-width: 0; }
.gnm-cta .gnm-cta__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 16px; }
.gnm-cta :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
@media (min-width: 782px) {
.gnm-cta--bild-rechts { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.gnm-cta--bild-links { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.gnm-cta--bild-links .gnm-cta__bild { order: -1; }
}
@media (max-width: 781px) {
.gnm-cta .gnm-cta__bild { order: -1; }
}
.gnm-cta--bild-oben .gnm-cta__bild { order: -1; }
.gnm-cta--bild-oben .gnm-cta__img { aspect-ratio: 16 / 7; }
/* Im Artikel: Textbreite, eigene Überschrift nicht als Kapitel stylen */
.gnm-text .gnm-cta h2.gnm-cta__titel { margin: 0; padding: 0; border: 0; }
.gnm-text .gnm-cta p { margin: 0; }
/* 0.20.0 · Rubrik-Kopf auf 320 px: langer Rubrikname + Kreis passten nicht (8 px Überlauf, Pill-Knopf verdeckt) */
@media (max-width: 781px) {
.gnm-rt__zeile { column-gap: 16px; }
.gnm-rt__h1 { min-width: 0; overflow-wrap: break-word; hyphens: auto; }
}
/* --------------------------------------------------------------------------
Ticket D + R2-02 · Lange deutsche Komposita in grossen Titeln
Ans Ende von assets/css/gnm.css anhaengen – nach den bestehenden Titelregeln,
damit diese Regeln gewinnen, ohne !important zu brauchen.
Ursache (R2-02): .gnm-fokus__titel hat gar kein overflow-wrap, erbt also
„normal“. „Mutationskrankheit“ (18 Zeichen) kann deshalb nirgends brechen und
ragt bei 390px rund 24px, bei 320px rund 52px ueber den Rand.
Silbentrennung ist die eigentliche Reparatur, nicht eine kleinere Schrift:
ein laengeres Kompositum (z. B. „Lebensmittelrettungsinitiative“, 30 Zeichen)
wuerde jede Groesse wieder sprengen. overflow-wrap bleibt als Netz fuer den
Fall, dass der Browser keine deutschen Trennmuster hat.
Voraussetzung: (WordPress-Spracheinstellung). Ohne
korrektes lang-Attribut trennt kein Browser deutsch – dann greift nur das Netz.
-------------------------------------------------------------------------- */
/* Grosse Titel, die lange Komposita tragen koennen.
Bewusst die ganze Familie: R2-02 merkt selbst an, dass eine reparierte
Auswahl nichts ueber die anderen aussagt. */
.gnm-ak2__titel,
.gnm-fokus__titel,
.gnm-hero__titel,
.gnm-hl__titel,
.gnm-k--feature .gnm-k__titel,
.gnm-archiv li:first-child .gnm-archiv-titel {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 10 4 4; /* erst ab 10 Zeichen trennen, nie winzige Reste */
overflow-wrap: break-word; /* Netz, falls keine Trennmuster vorhanden sind */
word-break: normal; /* ausdruecklich NICHT break-all */
max-width: 100%;
min-width: 0;
}
/* Links in Titeln erben die Regeln nicht automatisch, wenn sie Blockkontext bilden. */
.gnm-ak2__titel a,
.gnm-fokus__titel a,
.gnm-hl__titel a,
.gnm-k--feature .gnm-k__titel a {
-webkit-hyphens: inherit;
hyphens: inherit;
overflow-wrap: inherit;
}
/* Telefon: etwas ruhigere Groessen. Zweitrangig – die Trennung oben macht die
Arbeit. Die Untergrenzen bleiben bewusst gross genug, um den Titel als Titel
zu lesen; die Schrift wird nicht kleingerechnet, bis der Fehler verschwindet. */
@media (max-width: 600px) {
.gnm-ak2__titel {
font-size: clamp(34px, 9.5vw, 50px);
line-height: 1.06;
letter-spacing: -.02em;
}
.gnm-fokus__titel {
font-size: clamp(34px, 9.5vw, 50px);
line-height: 1.06;
letter-spacing: -.02em;
}
/* Die Markierung soll beim Umbruch nicht zerfallen. */
.gnm-ak2__titel .gnm-mark,
.gnm-fokus__titel .gnm-mark {
text-decoration-thickness: .08em;
text-underline-offset: .1em;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
}
}
@media (max-width: 380px) {
.gnm-ak2__titel,
.gnm-fokus__titel {
font-size: clamp(30px, 9.5vw, 40px);
}
}
/* text-wrap: balance (Zeile ~2950) und Silbentrennung vertragen sich; bei sehr
vielen Zeilen schaltet der Browser balance ohnehin ab. Nichts zu tun –
hier nur dokumentiert, damit es niemand versehentlich „repariert“. */
/* --------------------------------------------------------------------------
Ticket E · „Kommt bald" am Quiz-Teaser
Ans Ende von assets/css/gnm.css anhaengen.
Reine Beschriftung, kein Verhalten. Der Hinweis steht im dunklen Abschnitt,
deshalb helle Schrift auf dem Lila des Abschnitts.
-------------------------------------------------------------------------- */
.gnm-bald {
display: inline-block;
margin: 0 0 12px !important;
padding: 3px 10px 4px;
border: 1px solid var(--gnm-lila, #A875FF);
border-radius: 999px;
color: var(--gnm-lila, #A875FF);
font-weight: 600;
letter-spacing: .06em;
text-transform: uppercase;
line-height: 1.3;
}
/* --------------------------------------------------------------------------
Ticket F · Freiraum unter dem Inhalt, solange die Steady-Leiste steht
Ans Ende von assets/css/gnm.css anhaengen. OPTIONAL – erst nach der
Provider-Einstellung, siehe README.
Das Theme misst die Leiste bereits (assets/js/gnm.js, Zeile 644 ff.) und
legt ihre Hoehe in --gnm-unten ab. Bisher liest genau EINE Regel diese
Variable: der „Nach oben"-Knopf (Zeile 2711). Der Seiteninhalt selbst
bekommt keinen Freiraum, deshalb verdeckt die Leiste das Seitenende.
--gnm-unten ist 0px, solange keine Leiste sichtbar ist. Ohne Leiste
kostet diese Regel also nichts.
Was hier bewusst NICHT passiert: kein Ausblenden der Leiste, kein Zugriff
auf Steadys Shadow DOM, kein Eingriff in ein fremdes iframe. Die Leiste
gehoert Steady und wird in Steady eingestellt.
-------------------------------------------------------------------------- */
.wp-site-blocks {
padding-bottom: var(--gnm-unten, 0px);
transition: padding-bottom .15s linear;
}
/* Anker springen sonst hinter die Leiste. */
html {
scroll-padding-bottom: calc(var(--gnm-unten, 0px) + 16px);
}
@media (prefers-reduced-motion: reduce) {
.wp-site-blocks { transition: none; }
}
/* --------------------------------------------------------------------------
Ticket I · „Hören & Spielen" auf Telefonen
Ans Ende von assets/css/gnm.css anhaengen.
Zwei getrennte Fehler, beide auf dem Beweisfoto zu sehen:
1. Die beiden Spalten stehen auf dem Telefon nebeneinander statt untereinander.
2. Im Podcast-Block steht das runde Foto neben dem Text und laesst ihm rund
100px. Der Titel zerfaellt dadurch mitten im Wort („Eltern/schaf/t").
Zu 1: Im Theme steht KEINE Regel zu .wp-block-column und nichts wird aus dem
Core abgemeldet. Die Ursache liegt also nicht in den Theme-Dateien, sondern
in gespeichertem Inhalt (isStackedOnMobile: false) oder in einem Plugin, das
wp-block-library abmeldet. Beides ist von hier aus nicht einsehbar.
Deshalb ist diese Regel bewusst unabhaengig von der Ursache gebaut:
display:grid ersetzt das Flex-Layout vollstaendig, also greift sie auch dann,
wenn .is-not-stacked-on-mobile gesetzt ist oder die Core-Regel gar nicht
geladen wird. Das !important steht nur dort, wo Core seine Layout-Regeln
selbst mit !important setzt – sonst waere es wirkungslos.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
/* 1 · Spalten untereinander – unabhaengig davon, warum sie es nicht tun */
.gnm-hoeren-spielen .gnm-hoeren-spielen__columns {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 6vw, 40px);
align-items: start !important;
}
.gnm-hoeren-spielen .gnm-hoeren-spielen__columns > .wp-block-column {
flex-basis: auto !important;
width: auto !important;
min-width: 0;
max-width: 100%;
}
/* 2 · Podcast: Portrait ueber den Text, Titel bekommt die volle Breite */
.gnm-hoeren-spielen .gnm-pod__ep {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.gnm-hoeren-spielen .gnm-pod__bild {
width: 84px;
transform: rotate(-4deg);
}
.gnm-hoeren-spielen .gnm-pod__txt {
width: 100%;
min-width: 0;
}
/* Der Titel darf wieder als Titel lesbar sein. line-height braucht
!important, weil Zeile 747 im Theme bereits !important setzt. */
.gnm-hoeren-spielen .gnm-pod__h {
font-size: clamp(22px, 6.2vw, 28px);
line-height: 1.18 !important;
word-break: normal;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 10 4 4;
}
.gnm-hoeren-spielen .gnm-pod__meta,
.gnm-hoeren-spielen .gnm-pod__by {
word-break: normal;
overflow-wrap: break-word;
}
/* Abspielleiste bleibt eine benutzbare Zeile */
.gnm-hoeren-spielen .gnm-pod__player {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
padding: 10px 14px;
width: 100%;
}
.gnm-hoeren-spielen .gnm-pod__play {
flex-shrink: 0;
width: 46px;
height: 46px;
}
/* Quizfrage und Knopf: natuerliche Breite, kein Abschneiden */
.gnm-hoeren-spielen .gnm-satz {
font-size: clamp(22px, 6.2vw, 28px) !important;
line-height: 1.18 !important;
word-break: normal;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
.gnm-hoeren-spielen .wp-block-button__link {
white-space: normal;
width: auto;
}
}
/* Sehr schmale Telefone (320px): nur die Groessen etwas ruhiger. Die Struktur
oben bleibt gleich – der Fehler wird nicht durch Kleinrechnen kaschiert. */
@media (max-width: 380px) {
.gnm-hoeren-spielen .gnm-pod__h,
.gnm-hoeren-spielen .gnm-satz {
font-size: clamp(20px, 6.4vw, 24px) !important;
}
.gnm-hoeren-spielen .gnm-pod__bild { width: 72px; }
}
/* --------------------------------------------------------------------------
Ticket L · Hinweiszeile, wenn gefiltert wird, die Themen-Reihe aber aus ist.
Ans Ende von assets/css/gnm.css anhaengen.
Erbt die vorhandene .gnm-pillband__titel-Gestaltung; der Modifier setzt nur
den Abstand, den sonst die Pill-Reihe darunter mitbringt.
-------------------------------------------------------------------------- */
.gnm-pillband__titel--nur-filter { margin-bottom: clamp(16px, 2vw, 26px); }
.gnm-pillband__titel--nur-filter b { font-weight: 600; }
/* --------------------------------------------------------------------------
Ticket M · Einklappbarer WhatsApp-Abschnitt (.gnm-wa3)
Ans Ende von assets/css/gnm.css anhaengen.
Die alten .gnm-wa2-Regeln bleiben unangetastet: bestehende, noch nicht
umgestellte Instanzen sehen weiter aus wie bisher.
Kein fester Hoehen-Crop – beim Aufklappen steht der ganze Inhalt da.
-------------------------------------------------------------------------- */
.gnm-wa3 { background: #F1F0EC; border: 1px solid #d9d7d0; padding: clamp(22px, 3vw, 40px) !important; }
.gnm-wa3__kopf {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 18px 32px;
}
.gnm-wa3__text { min-width: 0; flex: 1 1 320px; }
.gnm-wa3__h {
display: block;
font-family: var(--wp--preset--font-family--newsreader);
font-size: clamp(26px, 3.2vw, 44px);
line-height: 1.04;
letter-spacing: -.03em;
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
}
.gnm-wa3__sub { display: block; margin-top: 8px; font-size: clamp(15px, 1.4vw, 19px); color: #4a4a4a; }
.gnm-wa3__btn { flex: 0 0 auto; }
/* Aufklapp-Schalter: nur Text und Chevron, kein Link darin. */
.gnm-wa3__mehr { margin-top: 20px; border-top: 1px solid #d9d7d0; }
.gnm-wa3__summary {
display: flex;
align-items: center;
gap: 10px;
padding: 14px 2px 0;
font-size: 15px;
font-weight: 600;
color: #6a3fd1;
cursor: pointer;
list-style: none;
width: fit-content;
}
.gnm-wa3__summary::-webkit-details-marker { display: none; }
.gnm-wa3__summary:focus-visible { outline: 2px solid var(--gnm-ink); outline-offset: 3px; border-radius: 4px; }
.gnm-wa3__chevron svg { width: 18px; height: 18px; display: block; transition: transform .2s; }
.gnm-wa3__mehr[open] .gnm-wa3__chevron svg { transform: rotate(180deg); }
.gnm-wa3__inhalt {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 26px 40px;
padding-top: 22px;
}
.gnm-wa3__vorschau { flex: 1 1 300px; max-width: 340px; min-width: 0; }
@media (max-width: 781px) {
.gnm-wa3__kopf { gap: 16px; }
.gnm-wa3__btn { width: 100%; justify-content: center; }
.gnm-wa3__inhalt { gap: 22px; }
.gnm-wa3__vorschau { max-width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.gnm-wa3__chevron svg { transition: none; }
}
/* --------------------------------------------------------------------------
Ticket N · Teilen-Karte: drei vollstaendige Presets
Ans Ende von assets/css/gnm.css anhaengen.
Jeder Ton bringt Flaeche, Label, Ueberschrift, Hilfstext, Symbolrahmen,
Hover und Fokus mit. Nur den Hintergrund zu tauschen reicht nicht: der
Hilfstext traegt mit var(--wp--preset--color--mute) eine eigene Farbe
(Zeile 1730) und .gnm-rund hat background:#fff (Zeile 1732) – beide
wuerden auf Schwarz unlesbar.
Der orange Haupt-Knopf „Teilen …" bleibt in allen Toenen unveraendert.
-------------------------------------------------------------------------- */
.gnm-ae__teilen { background: var(--tk-flaeche, var(--gnm-pfirsich)); color: var(--tk-text, inherit); }
.gnm-ae__teilen small { color: var(--tk-label, inherit); }
.gnm-ae__teilen b { color: var(--tk-text, inherit); }
.gnm-ae__teilen span { color: var(--tk-leise, var(--wp--preset--color--mute)); }
.gnm-ae__teilen .gnm-ae__knoepfe .gnm-rund {
background: var(--tk-knopf-flaeche, #fff);
border-color: var(--tk-knopf-rand, var(--gnm-ink));
color: var(--tk-knopf-text, var(--gnm-ink));
}
.gnm-ae__teilen .gnm-ae__knoepfe .gnm-rund:hover {
background: var(--gnm-orange);
border-color: var(--gnm-orange);
color: var(--gnm-ink);
}
.gnm-ae__teilen .gnm-ae__knoepfe .gnm-rund:focus-visible {
outline: 2px solid var(--tk-fokus, var(--gnm-ink));
outline-offset: 2px;
}
/* 1 · Anthrazit – Standard */
.gnm-ae__teilen.is-ton-ink {
--tk-flaeche: var(--gnm-ink);
--tk-text: #FFFFFF;
--tk-label: #F4A261;
--tk-leise: #CFCCC6;
--tk-knopf-flaeche: transparent;
--tk-knopf-rand: #FFFFFF;
--tk-knopf-text: #FFFFFF;
--tk-fokus: #F4A261;
}
/* 2 · Hell · Pfirsich – der bisherige Zustand, unveraendert */
.gnm-ae__teilen.is-ton-hell {
--tk-flaeche: var(--gnm-pfirsich);
--tk-text: var(--gnm-ink);
--tk-label: var(--gnm-ink);
--tk-leise: var(--wp--preset--color--mute);
--tk-knopf-flaeche: #fff;
--tk-knopf-rand: var(--gnm-ink);
--tk-knopf-text: var(--gnm-ink);
--tk-fokus: var(--gnm-ink);
}
/* 3 · Lavendel */
.gnm-ae__teilen.is-ton-lavendel {
--tk-flaeche: var(--gnm-lila-hell);
--tk-text: #2E1A6B;
--tk-label: #4A2FA8;
--tk-leise: #4A4458;
--tk-knopf-flaeche: #fff;
--tk-knopf-rand: #2E1A6B;
--tk-knopf-text: #2E1A6B;
--tk-fokus: #4A2FA8;
}
/* --------------------------------------------------------------------------
Ticket O · Cookie-Karte im GNM-Design
Ans Ende von assets/css/gnm.css anhaengen.
Alle Klassennamen stammen aus Borlabs' eigener kompilierter CSS-Datei
(/wp-content/cache/borlabs-cookie/1/borlabs-cookie-1-de.css, 231 Klassen) –
nicht geraten. Borlabs 3.4.6 rendert den Dialog ins LICHT-DOM, nicht in eine
Shadow Root: externes CSS erreicht ihn also. Geprueft am 1. November.
Gestaltet wird ausschliesslich das Aussehen. Kategorien, Texte, Links und
Dienste sind Borlabs-KONFIGURATION und gehoeren nicht hierher – siehe README.
Werte aus references/cookie-designer/Main.dc.html.
-------------------------------------------------------------------------- */
.brlbs-cmpnt-container {
--gck-flaeche: rgba(255, 255, 255, .52);
--gck-flaeche-fest: #FBF8F4; /* Rueckfall ohne Blur – siehe unten */
--gck-text: #1F1F23;
--gck-leise: #3A3A42;
--gck-linie: rgba(31, 31, 35, .14);
--gck-lila: #6B3FD4;
--gck-orange: #F4A261;
--gck-radius: 34px 16px 16px 16px;
}
/* ---------- Karte ---------- */
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box {
background: var(--gck-flaeche-fest);
color: var(--gck-text);
border: 1.5px solid var(--gck-text);
border-radius: var(--gck-radius);
box-shadow: 0 24px 60px rgba(31, 31, 35, .22);
}
/*
* Glas nur, wenn der Browser es kann UND nicht „weniger Transparenz" gewuenscht
* ist. Ein Einwilligungsdialog, den man schlecht liest, ist ein rechtliches
* Problem, kein gestalterisches – deshalb ist die deckende Flaeche der Standard
* und das Glas die Zugabe.
*/
@supports (backdrop-filter: blur(22px)) or (-webkit-backdrop-filter: blur(22px)) {
@media (prefers-reduced-transparency: no-preference) {
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box {
background: var(--gck-flaeche);
-webkit-backdrop-filter: blur(22px) saturate(140%);
backdrop-filter: blur(22px) saturate(140%);
}
}
}
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-backdrop { background: rgba(31, 31, 35, .45); }
/* ---------- Kopf ---------- */
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-header,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-headline {
font-family: var(--wp--preset--font-family--newsreader, Georgia, serif);
font-weight: 700;
letter-spacing: -.02em;
color: var(--gck-text);
}
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-headline { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; }
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-description,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-entrance-description {
font-family: var(--wp--preset--font-family--geist, system-ui, sans-serif);
font-size: 14.5px;
line-height: 1.55;
color: var(--gck-leise);
}
/* ---------- Kategorien ---------- */
.brlbs-cmpnt-container .brlbs-cmpnt-card-group-form-control {
border-bottom: 1px solid var(--gck-linie);
padding-block: 12px;
}
.brlbs-cmpnt-container .brlbs-cmpnt-card-group-form-control:last-child { border-bottom: 0; }
/* Schalter in GNM-Lila */
.brlbs-cmpnt-container .brlbs-cmpnt-btn-switch[aria-checked="true"],
.brlbs-cmpnt-container .brlbs-cmpnt-checkbox:checked {
background-color: var(--gck-lila);
border-color: var(--gck-lila);
}
.brlbs-cmpnt-container .brlbs-cmpnt-btn-switch:focus-visible,
.brlbs-cmpnt-container .brlbs-cmpnt-checkbox:focus-visible {
outline: 2px solid var(--gck-lila);
outline-offset: 2px;
}
/* „Notwendig" ist fest an – das muss man sehen, nicht nur nicht klicken koennen. */
.brlbs-cmpnt-container .brlbs-cmpnt-btn-switch:disabled,
.brlbs-cmpnt-container .brlbs-cmpnt-checkbox:disabled {
opacity: 1;
background-color: var(--gck-leise);
border-color: var(--gck-leise);
cursor: not-allowed;
}
/* ---------- Aktionen ---------- */
.brlbs-cmpnt-container .brlbs-cmpnt-btn {
border-radius: 999px;
font-family: var(--wp--preset--font-family--geist, system-ui, sans-serif);
font-weight: 600;
letter-spacing: .01em;
}
/* Hauptaktion orange, wie im Entwurf. */
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-buttons .brlbs-cmpnt-btn:not(.brlbs-cmpnt-btn-preferences):not(.brlbs-cmpnt-btn-selection) {
background: var(--gck-orange);
border-color: var(--gck-text);
color: var(--gck-text);
}
/* Die beiden Nebenaktionen gleichwertig und sichtbar – nicht als Fussnote. */
.brlbs-cmpnt-container .brlbs-cmpnt-btn-preferences,
.brlbs-cmpnt-container .brlbs-cmpnt-btn-selection {
background: transparent;
border: 1.5px solid var(--gck-text);
color: var(--gck-text);
}
.brlbs-cmpnt-container .brlbs-cmpnt-btn:focus-visible {
outline: 2px solid var(--gck-lila);
outline-offset: 2px;
}
/* ---------- Fuss ---------- */
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-footer,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-bar-links {
font-size: 13px;
color: var(--gck-leise);
}
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-footer a,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-bar-links a { color: var(--gck-lila); }
/* ---------- Telefon ---------- */
@media (max-width: 480px) {
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box {
border-radius: 22px 12px 12px 12px;
max-height: calc(100dvh - 32px);
overflow-y: auto;
}
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-buttons { flex-direction: column; }
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-buttons .brlbs-cmpnt-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-box-entrance,
.brlbs-cmpnt-container .brlbs-cmpnt-dialog-bar-entrance { animation: none !important; transition: none !important; }
}
/* --------------------------------------------------------------------------
Ticket R · GNM Rezept (Muster gnm/rezept)
Werte aus references/recipe-designer/Recipe.dc.html uebernommen.
Alles unter .gnm-rezept gekapselt: normale Artikel bleiben unberuehrt.
gnm.css wird per wp_enqueue_style UND add_editor_style geladen – Editor und
Website lesen daher dieselben Regeln, ohne zweite Datei.
Keine feste Hoehe, kein overflow:hidden: Rezepte duerfen beliebig lang sein.
-------------------------------------------------------------------------- */
.gnm-rezept {
--rz-creme: #FAF3E8;
--rz-ink: #1F1F23;
--rz-leise: #3A3A42;
--rz-orange: #F4A261;
--rz-orange-tief: #8A5114; /* Referenz #B97E3C traegt nur 3,15:1 – fuer Text zu hell */
--rz-orange-deko: #B97E3C; /* Referenzwert, nur fuer grosse Schrift/Dekor */
--rz-lila: #6B3FD4;
--rz-lila-hell: #F1EAFD;
--rz-lila-linie: #E9DDFB;
--rz-notiz: #FFF4DD;
background: var(--rz-creme);
color: var(--rz-ink);
padding: clamp(22px, 3.4vw, 46px);
border-radius: var(--gnm-radius, 22px);
font-family: 'Geist', system-ui, sans-serif;
}
.gnm-rezept > * + * { margin-block-start: clamp(22px, 2.6vw, 34px); }
/* Kopf in der vorhandenen GNM-Klammer, Label „Rezept“ haengt an der Linie */
.gnm-rezept__kopf { border-color: var(--rz-ink); }
.gnm-rezept__titel {
font-family: 'Newsreader', Georgia, serif;
font-size: clamp(32px, 4.2vw, 54px);
line-height: 1.04;
letter-spacing: -.03em;
margin: 0;
padding-bottom: 10px;
border-bottom: 3px solid var(--rz-orange);
display: inline-block;
}
.gnm-rezept__intro { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.55; color: var(--rz-leise); max-width: 62ch; }
.gnm-rezept__byline { font-size: 14px; color: var(--rz-leise); margin-bottom: 0; }
/* Bild: 16:9, responsiv, keine feste Leinwand */
.gnm-rezept__bild { margin: 0; }
.gnm-rezept__bild img { width: 100%; height: auto; display: block; border-radius: 10px; background: #EDE4D6; }
.gnm-rezept__bild figcaption { font-size: 13px; color: var(--rz-leise); margin-top: 8px; }
/* Zeit · Portionen · Niveau */
.gnm-rezept__werte { gap: 12px; }
.gnm-rezept__werte > .wp-block-column {
background: #fff;
border: 1px solid var(--rz-lila-linie);
border-radius: 12px;
padding: 14px 16px;
}
.gnm-rezept__wert-l { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--rz-lila); }
.gnm-rezept__wert-v { margin: 4px 0 0; font-family: 'Newsreader', Georgia, serif; font-size: clamp(18px, 1.6vw, 22px); line-height: 1.2; }
/* Zutaten und Utensilien */
.gnm-rezept__h {
font-family: 'Newsreader', Georgia, serif;
font-size: clamp(22px, 2.1vw, 30px);
line-height: 1.15;
letter-spacing: -.02em;
margin: 0 0 14px;
}
.gnm-rezept__zutaten { background: var(--rz-lila-hell); border-radius: 14px; padding: clamp(16px, 1.8vw, 24px); }
.gnm-rezept__zliste, .gnm-rezept__uliste { margin: 0; padding: 0; list-style: none; }
.gnm-rezept__zliste li {
display: grid;
grid-template-columns: minmax(78px, max-content) 1fr;
gap: 4px 14px;
padding: 9px 0;
border-bottom: 1px solid var(--rz-lila-linie);
font-size: 15px;
line-height: 1.4;
}
.gnm-rezept__zliste li:last-child { border-bottom: 0; }
.gnm-rezept__zliste li strong { font-weight: 600; color: var(--rz-lila); }
.gnm-rezept__uliste li { position: relative; padding: 7px 0 7px 24px; font-size: 15px; line-height: 1.4; }
.gnm-rezept__uliste li::before {
content: "";
position: absolute;
left: 4px; top: 15px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--rz-orange);
}
/* „Gut zu wissen!“ – orange Notiz mit lila Versatzschatten */
.gnm-rezept__tipp {
background: var(--rz-notiz);
border: 2px solid var(--rz-orange);
border-radius: 14px;
padding: clamp(16px, 1.8vw, 22px);
box-shadow: 7px 7px 0 var(--rz-lila-hell);
}
.gnm-rezept__tipp p { font-size: 15px; line-height: 1.55; margin: 0; }
.gnm-rezept__tipp-h {
font-family: 'Newsreader', Georgia, serif;
font-size: clamp(19px, 1.7vw, 24px);
margin: 0 0 8px !important;
color: var(--rz-orange-tief);
}
/* Zubereitung */
.gnm-rezept__h--zub { margin-bottom: 6px; }
.gnm-rezept__teil {
font-size: 12px;
font-weight: 600;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--rz-lila);
margin: clamp(20px, 2.2vw, 28px) 0 10px;
}
.gnm-rezept__schritte { margin: 0; padding: 0; list-style: none; counter-reset: none; }
.gnm-rezept__schritte li {
position: relative;
padding: 0 0 18px 52px;
font-size: 15.5px;
line-height: 1.6;
}
.gnm-rezept__schritte li::before {
content: counter(list-item);
position: absolute;
left: 0; top: -2px;
width: 34px; height: 34px;
display: grid;
place-items: center;
border-radius: 50%;
background: var(--rz-lila);
color: #fff;
font-family: 'Newsreader', Georgia, serif;
font-size: 17px;
line-height: 1;
}
.gnm-rezept__schritte li:last-child { padding-bottom: 0; }
/* Gruss – Caveat bleibt auf diesen einen Akzent begrenzt */
.gnm-rezept__gruss { border-top: 1px solid var(--rz-lila-linie); padding-top: clamp(18px, 2vw, 26px); }
.gnm-rezept__appetit {
font-family: 'Caveat', cursive;
font-size: clamp(30px, 3.2vw, 42px);
line-height: 1;
color: var(--rz-orange-deko);
margin: 0 0 8px !important;
}
.gnm-rezept__signatur { font-size: 14px; line-height: 1.5; color: var(--rz-leise); margin: 0; }
/* Telefon: Spalten stapeln, Reihenfolge und Nummerierung bleiben erhalten */
@media (max-width: 781px) {
.gnm-rezept__werte { gap: 8px; }
.gnm-rezept__werte > .wp-block-column { padding: 12px 14px; }
.gnm-rezept__listen > .wp-block-column { flex-basis: 100% !important; }
.gnm-rezept__utensilien { margin-top: 18px; }
.gnm-rezept__zliste li { grid-template-columns: 1fr; gap: 2px; }
.gnm-rezept__schritte li { padding-left: 44px; }
.gnm-rezept__schritte li::before { width: 30px; height: 30px; font-size: 15px; }
.gnm-rezept__tipp { box-shadow: 5px 5px 0 var(--rz-lila-hell); }
}
/* Druck: Schatten und Flaechen sparen, Inhalt bleibt vollstaendig */
@media print {
.gnm-rezept { background: #fff; padding: 0; }
.gnm-rezept__tipp { box-shadow: none; }
.gnm-rezept__schritte li, .gnm-rezept__zliste li { break-inside: avoid; }
}
/* --------------------------------------------------------------------------
Ticket U · Kontomenue
Ans Ende von assets/css/gnm.css anhaengen.
Der Knopf uebernimmt die vorhandene .gnm-round-link-Gestaltung, damit er
neben Suche und „Für Unternehmen" sitzt, als waere er immer da gewesen.
-------------------------------------------------------------------------- */
.gnm-konto { position: relative; margin: 0; }
.gnm-konto__anmelden,
.gnm-konto__knopf {
display: inline-flex;
align-items: center;
gap: 7px;
height: 38px;
padding: 0 6px;
border: 1.5px solid var(--gnm-ink);
border-radius: 999px;
background: transparent;
color: var(--gnm-ink);
font: inherit;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: background .2s, color .2s;
}
.gnm-konto__anmelden { width: 38px; justify-content: center; padding: 0; }
.gnm-konto__knopf { padding: 0 12px 0 10px; }
.gnm-konto__anmelden svg,
.gnm-konto__knopf > svg { width: 18px; height: 18px; flex-shrink: 0; }
.gnm-konto__anmelden:hover,
.gnm-konto__knopf:hover { background: var(--gnm-ink); color: #fff; }
.gnm-konto__anmelden:focus-visible,
.gnm-konto__knopf:focus-visible { outline: 2px solid var(--gnm-lila); outline-offset: 2px; }
.gnm-konto__label { white-space: nowrap; }
.gnm-konto__pfeil svg { width: 14px; height: 14px; display: block; transition: transform .2s; }
.gnm-konto__knopf[aria-expanded="true"] .gnm-konto__pfeil svg { transform: rotate(180deg); }
.gnm-konto__menue {
position: absolute;
right: 0;
top: calc(100% + 8px);
z-index: 60;
min-width: 240px;
margin: 0;
padding: 6px;
list-style: none;
background: #fff;
border: 1.5px solid var(--gnm-ink);
border-radius: 14px;
box-shadow: 5px 5px 0 var(--gnm-lila);
}
.gnm-konto__menue li { margin: 0; }
.gnm-konto__eintrag {
display: block;
padding: 10px 12px;
border-radius: 9px;
color: var(--gnm-ink);
font-size: 14.5px;
text-decoration: none;
}
.gnm-konto__eintrag:hover { background: var(--gnm-lila-hell, #F1E9FF); }
.gnm-konto__eintrag:focus-visible { outline: 2px solid var(--gnm-lila); outline-offset: -2px; }
/* Im Hauptmenue (Telefon). Ticket U: dort gab es bisher gar keinen Kontoweg. */
.gnm-mn__konto { margin-bottom: 18px; }
.gnm-mn__anmelden { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.gnm-mn__konto-liste { margin: 0; padding: 0; list-style: none; }
.gnm-mn__konto-liste li + li { margin-top: 2px; }
.gnm-mn__konto-liste a { display: block; padding: 9px 0; font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
.gnm-konto__anmelden, .gnm-konto__knopf, .gnm-konto__pfeil svg { transition: none; }
}
/* --------------------------------------------------------------------------
Runde 2, Punkt 9 · Kontosymbol erschien doppelt — meine Regression.
Ursache: .gnm-konto__knopf setzt display:inline-flex. Das HTML-Attribut
[hidden] wirkt nur ueber die Browser-Standardregel (display:none) und hat
geringere Spezifitaet — meine Klasse hat sie schlicht ueberstimmt. Knopf und
Anmeldelink waren dadurch gleichzeitig sichtbar.
Ans Ende von assets/css/gnm.css anhaengen (nach dem Ticket-U-Block).
-------------------------------------------------------------------------- */
.gnm-konto [hidden],
.gnm-konto__knopf[hidden],
.gnm-konto__anmelden[hidden],
.gnm-konto__menue[hidden],
.gnm-mn__konto [hidden] { display: none !important; }
/* --------------------------------------------------------------------------
Runde 2, Punkte 1 und 3 · „Datenschutzerk|laerung"
Ursache (nicht aus dieser Runde, sondern aus 0.21.1): gnm.css Zeile 2272
setzt fuer .gnm-recht__h1 `overflow-wrap: anywhere`. Das bricht an JEDER
Stelle und ohne Trennstrich — daher „Datenschutzerk / laerung".
Neu: deutsche Silbentrennung mit Trennstrich. Der Browser trennt dann an
Sprachgrenzen (Daten-schutz-erklae-rung).
UND — das war der eigentliche Wunsch — die Redaktion kann selbst bestimmen,
wo getrennt wird: ein weiches Trennzeichen () im Titel gewinnt immer.
Datenschutzerklaerung -> Datenschutz-
erklaerung
Ans Ende von assets/css/gnm.css anhaengen.
-------------------------------------------------------------------------- */
.gnm-recht__h1,
.gnm-seiten-h1,
.gnm-rt__h1,
.gnm-an-h1,
.gnm-pc__h1,
.gnm-danke__h1 {
/* anywhere ersetzt: bricht sonst mitten im Wort, ohne Trennstrich */
overflow-wrap: break-word;
word-break: normal;
-webkit-hyphens: auto;
hyphens: auto;
/* Erst ab 8 Zeichen trennen, nie weniger als 3 stehen lassen. */
hyphenate-limit-chars: 8 4 3;
}
/*
* Ein gesetztes schlaegt die automatische Trennung: dann trennt der
* Browser NUR dort. Deshalb hier nichts weiter noetig — aber dokumentiert,
* damit niemand hyphens:auto entfernt und sich wundert.
*/
/* --------------------------------------------------------------------------
Runde 2, Punkt 10 · „Unsere neueste Ausgabe!" ueberlappt auf dem Telefon
mit dem Pfeil und den Covern.
Auf schmalen Schirmen bekommt die Notiz eine eigene Zeile ueber den Covern,
statt absolut darueber zu liegen.
Ans Ende von assets/css/gnm.css anhaengen.
-------------------------------------------------------------------------- */
@media (max-width: 600px) {
.gnm-epaper5__notiz,
.gnm-fan5__notiz,
.gnm-epaper-klammer .is-style-hand {
position: static !important;
transform: none !important;
display: block;
margin: 0 0 10px;
text-align: center;
max-width: 100%;
}
}
/* --------------------------------------------------------------------------
Runde 2, Punkte 4–7 · Platzierungs-Labels auf den Karten sichtbar.
Ans Ende von assets/css/gnm.css anhaengen.
-------------------------------------------------------------------------- */
.gnm-labels { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.gnm-label {
display: inline-block;
padding: 3px 9px 4px;
border-radius: 999px;
font-size: 10.5px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
line-height: 1.3;
border: 1px solid currentColor;
}
.gnm-label--trending { color: #8A3D06; }
.gnm-label--besondere { color: #5B31C4; }
.gnm-label--woche { color: #136034; }
.gnm-label--meist { color: var(--gnm-ink); }
/* --------------------------------------------------------------------------
Ticket Y · Kontomenue ohne Symbol
Wenn das Symbol im Dashboard abgewaehlt ist, steht im Anmeldelink das Wort
„Anmelden". Die feste Breite von 38px muss dann weg, sonst wird der Text
abgeschnitten.
-------------------------------------------------------------------------- */
.gnm-konto__anmelden--text {
width: auto;
padding: 0 14px;
font-size: .875rem;
font-weight: 600;
white-space: nowrap;
}
/* --------------------------------------------------------------------------
Z4 · Umbruch bestimmt die Redaktion, nicht das Theme
Keine automatische Silbentrennung mehr in Titeln und Überschriften. Gebrochen
wird nur dort, wo die Redaktion mit Alt+Enter (Mac: Option+Enter) eine
Umbruchstelle gesetzt hat – ohne Trennstrich:
Datenschutz|erklärung -> Datenschutz
erklärung
!important, weil über 20 frühere Regeln `hyphens: auto` einzeln setzen.
`overflow-wrap: break-word` bleibt als letztes Netz, damit nichts seitlich
aus dem Bild ragt, wenn jemand KEINE Stelle gesetzt hat.
-------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.wp-block-post-title, .wp-block-post-title a,
[class*="titel"], [class*="__h1"], [class*="__h2"], [class$="__h"], [class*="__h "],
.gnm-pod__h, .gnm-wa3__h, .gnm-gs__firma, .gnm-gs__firma--lang, .gnm-cta__titel {
-webkit-hyphens: manual !important;
hyphens: manual !important;
}
html .wp-block-post-title {
word-break: normal; /* WordPress setzt `break-word` = Bruch an jeder Stelle */
overflow-wrap: break-word;
}
/* --------------------------------------------------------------------------
Z6 · Hoeren & Spielen auf dem Telefon: Spalten untereinander
Ursache: Die gespeicherte Startseite (Datenbank) hat ihre EIGENE, aeltere
Kopie dieses Abschnitts. Dort fehlen die Klassen `gnm-hoeren-spielen` und
`gnm-hoeren-spielen__columns`, und die Spalten tragen
`is-not-stacked-on-mobile`. Die Regeln aus Ticket I haengen an genau diesen
Klassen – sie trafen deshalb nie. Auf dem Telefon standen zwei 158px schmale
Spalten nebeneinander.
Jetzt erkennt die Regel den Abschnitt am INHALT (Spalten, die eine
Podcast-Karte enthalten) und ist damit unabhaengig davon, welche Kopie
gespeichert ist. Ticket-I-Regeln bleiben unveraendert darueber stehen.
(Silbentrennung bleibt aus, siehe Z4.)
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
/* 1 · Spalten untereinander – unabhaengig davon, warum sie es nicht tun */
.wp-block-columns:has(> .wp-block-column .gnm-pod) {
display: grid !important;
grid-template-columns: minmax(0, 1fr);
gap: clamp(28px, 6vw, 40px);
align-items: start !important;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) > .wp-block-column {
flex-basis: auto !important;
width: auto !important;
min-width: 0;
max-width: 100%;
}
/* 2 · Podcast: Portrait ueber den Text, Titel bekommt die volle Breite */
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__ep {
flex-direction: column;
align-items: flex-start;
gap: 14px;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__bild {
width: 84px;
transform: rotate(-4deg);
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__txt {
width: 100%;
min-width: 0;
}
/* Der Titel darf wieder als Titel lesbar sein. line-height braucht
!important, weil Zeile 747 im Theme bereits !important setzt. */
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__h {
font-size: clamp(22px, 6.2vw, 28px);
line-height: 1.18 !important;
word-break: normal;
overflow-wrap: break-word;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__meta,
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__by {
word-break: normal;
overflow-wrap: break-word;
}
/* Abspielleiste bleibt eine benutzbare Zeile */
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__player {
display: flex;
flex-wrap: nowrap;
align-items: center;
gap: 12px;
padding: 10px 14px;
width: 100%;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__play {
flex-shrink: 0;
width: 46px;
height: 46px;
}
/* Quizfrage und Knopf: natuerliche Breite, kein Abschneiden */
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-satz {
font-size: clamp(22px, 6.2vw, 28px) !important;
line-height: 1.18 !important;
word-break: normal;
overflow-wrap: break-word;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .wp-block-button__link {
white-space: normal;
width: auto;
}
}
/* Sehr schmale Telefone (320px): nur die Groessen etwas ruhiger. Die Struktur
oben bleibt gleich – der Fehler wird nicht durch Kleinrechnen kaschiert. */
@media (max-width: 380px) {
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__h,
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-satz {
font-size: clamp(20px, 6.4vw, 24px) !important;
}
.wp-block-columns:has(> .wp-block-column .gnm-pod) .gnm-pod__bild { width: 72px; }
}
/* ==========================================================================
0.23.0 · Ticket Z8 · Handy: nichts darf breiter sein als der Bildschirm
Ursachen: width:100% + Innenabstand (content-box), nowrap-Knoepfe, Flex-Kinder
mit min-width:auto, absolut platzierte Notiz am ePaper-Cover.
========================================================================== */
.gnm-wa2__btn, .gnm-wa3__btn, .gnm-pod__player { box-sizing: border-box; max-width: 100%; }
@media (max-width: 781px) {
/* Lange deutsche Knopftexte (z. B. „Alle: Technik und Innovation →“) duerfen umbrechen. */
.gnm-knopf--klein.gnm-knopf--klein { height: auto; min-height: 44px; padding-block: 9px; white-space: normal; max-width: 100%; min-width: 0; line-height: 1.25; text-align: center; }
/* Kartenzeile: Textspalte darf schrumpfen; ein langes Wort bricht nur, wenn es sonst nicht passt. */
.gnm-a2__txt { min-width: 0; }
.gnm-a2__titel, .gnm-a2__titel a { overflow-wrap: break-word; }
.gnm-a2__titel a { max-width: 100%; }
/* ePaper: die handschriftliche Notiz bleibt am Cover und ragt nicht aus dem Bild. */
.gnm-ah .gnm-ah__notiz { left: auto; right: 0; bottom: auto; top: 46%; max-width: 50%; }
.gnm-ah.gnm-ah--einzel .gnm-ah__notiz { left: auto; right: 0; top: -40px; }
/* Sicherheitsnetz: kuenftig eingefuegte breite Inhalte (Einbettungen, Tabellen) erzeugen kein Seitwaerts-Wackeln. */
html { overflow-x: hidden; overflow-x: clip; }
}
/* ==========================================================================
0.25.0 · Ticket Z9 · „Wie lecker?“ unter den Good Food Stories
Das Stimmfeld selbst gestaltet GD Rating System; hier nur der Rahmen.
========================================================================== */
.gnm-lecker { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; box-sizing: border-box; max-width: 100%; margin: 44px 0 0; padding: 20px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; background: #fff; }
.gnm-lecker__frage { margin: 0; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(22px, 2.4vw, 28px); font-weight: 700; line-height: 1.1; }
.gnm-lecker__feld { min-width: 0; }
.gnm-lecker__hinweis { flex: 1 0 100%; margin: 0; font-size: 13px; color: var(--wp--preset--color--mute); }
/* ==========================================================================
0.25.1 · Ticket Z10 · Rezeptvorlage: Feinschliff nach dem Test im Artikel
1. Label „Rezept“ steht ueber dem Titel (war am Desktop daneben, weil der Titel inline-block war).
2. Hochformat-Fotos im 16:9-Rahmen: Ausschnitt weiter unten (dort liegt meist das Gericht).
Je Rezept aenderbar ueber „Zusaetzliche CSS-Klasse(n)“ am Bildblock: gnm-rezept__bild--oben | --mitte.
3. Zutaten ohne Mengenangabe (Pfeffer, „nach Geschmack“) stehen buendig in der Textspalte, mit Strich davor.
========================================================================== */
.gnm-rezept__kopf > .is-style-label { display: block; }
.gnm-rezept__titel { display: block; width: fit-content; max-width: 100%; }
.gnm-rezept__bild img { object-position: 50% 80%; }
.gnm-rezept__bild.gnm-rezept__bild--oben img { object-position: 50% 15%; }
.gnm-rezept__bild.gnm-rezept__bild--mitte img { object-position: 50% 50%; }
.gnm-rezept__zliste li:not(:has(> strong:first-child))::before { content: "\2013"; color: var(--rz-lila); font-weight: 600; }
@media (max-width: 781px) {
.gnm-rezept__zliste li:not(:has(> strong:first-child))::before { content: none; }
}
/* ==========================================================================
0.26.0 · Ticket Z12 · Sichtkorrekturen
Ans Ende von assets/css/gnm.css. Spätere Regeln gewinnen.
========================================================================== */
/* #18/#11 · Teilen-Symbol: eigenes Drei-Punkte-Symbol (PHP), hier nur sauber ausrichten */
.gnm-rund svg { display: block; }
/* #25 · Hamburger größer (Handy, Tablet, Desktop) */
.gnm-burger-knopf { width: 48px; height: 48px; min-width: 48px; min-height: 48px; }
.gnm-burger-knopf svg { width: 28px; height: 28px; stroke-width: 1.5; }
/* #26 · Suche und Profil: gleiche Größe, gleiche Linienstärke */
.gnm-ks__knopf { width: 40px; height: 40px; min-width: 40px; border: 1.5px solid var(--gnm-ink); }
.gnm-konto__anmelden, .gnm-konto__knopf { height: 40px; border-width: 1.5px; }
.gnm-konto__anmelden { width: 40px; }
.gnm-konto__anmelden svg, .gnm-konto__knopf > svg { width: 20px; height: 20px; flex-shrink: 0; stroke-width: 1.8; }
.gnm-ks__knopf svg { width: 22px; height: 22px; flex-shrink: 0; stroke-width: 1.5; }
@media (max-width: 600px) {
.gnm-ks__knopf { width: 40px; height: 40px; min-width: 40px; }
/* Angemeldet: nur das Symbol, damit die Kopfzeile auf dem Handy nicht überläuft */
.gnm-konto__label, .gnm-konto__pfeil { display: none; }
.gnm-konto__knopf { width: 40px; padding: 0; justify-content: center; }
}
/* Nr. 43 · Handy: das ganze Logo bleibt sichtbar (vorher nur das Herz). Es schrumpft mit der Breite mit, statt abgeschnitten zu werden;
dafür rücken Menü-Knopf, Suche, Konto und „GNM+ testen“ enger zusammen. */
@media (max-width: 600px) {
.gnm-header__row { gap: 6px !important; }
.gnm-header__row > .wp-block-group:first-child { flex: 1 1 auto; min-width: 0; gap: 4px !important; }
.gnm-header .gnm-logo { flex: 0 1 118px; min-width: 56px; width: auto; overflow: visible; }
.gnm-header .gnm-logo img { width: 100% !important; max-width: 118px !important; height: auto !important; max-height: 34px; object-fit: contain; object-position: left center; }
.gnm-burger-knopf { flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px; margin-right: -2px; }
.gnm-header .gnm-actions { flex: 0 0 auto; gap: 6px !important; }
.gnm-actions .gnm-pill a { height: 38px; padding: 0 12px !important; font-size: 13px; white-space: nowrap; }
.gnm-ks__knopf, .gnm-konto__anmelden, .gnm-konto__knopf { width: 38px; height: 38px; min-width: 38px; }
}
/* #17 · ePaper-Notiz: neben dem Cover statt darüber – orange auf orange verschwindet */
.gnm-ah__notiz {
left: auto !important; right: calc(100% + 26px) !important; top: auto !important; bottom: 22px !important;
text-align: right; white-space: nowrap; color: #e8731a;
text-shadow: 0 0 2px #faf9f6, 0 0 6px #faf9f6;
}
/* #10 · Handy: Notiz unter dem Cover, mittig – nichts überlappt */
@media (max-width: 781px) {
.gnm-ah__notiz { left: 50% !important; right: auto !important; bottom: -46px !important; transform: translateX(-50%) rotate(-4deg); text-align: center; }
.gnm-ah__cover { margin-bottom: 40px; }
}
/* #10 · Startseite „Unsere neueste Ausgabe!“: Pfeil und Text auf dem Handy getrennt */
@media (max-width: 600px) {
.gnm-epaper-klammer .gnm-fan5 { margin-top: 64px; }
.gnm-fan5__note { left: 50% !important; top: -15% !important; transform: translateX(-50%) rotate(-4deg) !important; text-align: center; }
.gnm-fan5__pfeil { top: -7% !important; }
}
/* #12 · „Kommt bald“-Plakette sitzt mittig im Label, nicht oben */
.gnm-bald {
display: inline-flex !important; align-items: center; justify-content: center; box-sizing: border-box;
height: 24px; margin: 0 0 0 12px !important; padding: 0 11px !important; line-height: 1; vertical-align: middle;
}
.is-style-label-lila:has(> .gnm-bald), .is-style-label:has(> .gnm-bald) { display: inline-flex !important; align-items: center; }
/* #14 · GNM-App: „Dein Garten wächst mit!“ weit genug links vom Handy, lesbar auf Dunkel */
.gnm-app__notiz { left: -108px !important; text-align: right; white-space: nowrap; text-shadow: 0 0 3px #2b2b2b, 0 0 8px #2b2b2b; }
@media (max-width: 1180px) { .gnm-app__notiz { display: none; } }
/* #16 · „Zum Beitrag →“: Pfeil auf einer Linie mit dem Text */
.gnm-md-stimme figcaption a { display: inline-flex !important; align-items: center; gap: 6px; width: fit-content; line-height: 1.2; }
.gnm-md-stimme figcaption a .gnm-pfeil-i { vertical-align: middle; margin: 0; }
/* #13 · Reels: alle gleich orange (Duoton), Emoji klein, leerer Platzhalter im gleichen Ton */
.gnm-reels .gnm-reel > a > img:not(.emoji) { filter: url(#gnm-duotone) !important; mix-blend-mode: normal !important; }
.gnm-reels .gnm-reel:hover > a > img:not(.emoji) { filter: none !important; }
.gnm-reel::before { display: none !important; }
.gnm-reel img.emoji, .gnm-reel figcaption img {
width: 1em !important; height: 1em !important; display: inline !important; vertical-align: -.1em;
filter: none !important; mix-blend-mode: normal !important; transform: none !important; object-fit: contain;
}
.gnm-reel--leer .gnm-reel__leer, .gnm-reel__leer { background: linear-gradient(160deg, #f4a261 0, #b4571a 55%, #2a1608 100%) !important; }
/* #23 · Newsletter-Abschnitt mit eingebettetem Steady-Formular */
.gnm-nl2:has(.gnm-nl2__steady) { display: block; }
.gnm-nl2:has(.gnm-nl2__steady) .gnm-nl2__h { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.gnm-nl2__steady { width: 100%; min-height: 120px; }
.gnm-nl2__ersatz[hidden] { display: none; }
/* #28 · Cookie-Knopf: Hinweis, falls der Dialog nicht aufgeht */
.gnm-cookie-hinweis { margin: 10px 0 0; font-size: 14px; }
/* Platz über den großen Seitentiteln: Punkte vom Ü stoßen nicht mehr ans kleine Label */
.gnm-fu-k .gnm-ah__kicker { margin-bottom: 22px; }
.gnm-fu-k__h1, .gnm-ak2__titel { padding-top: .16em; }
/* ==========================================================================
0.26.1 · Ticket Z13 · Newsletter-Einbettung: kompakter, ohne Doppelrahmen; Steady-Leiste weicht
========================================================================== */
.gnm-nl2:has(.gnm-nl2__steady) { border: 0 !important; padding: 0 !important; background: transparent !important; }
.gnm-nl2__steady { width: 100%; max-width: 580px; margin-left: auto !important; margin-right: auto !important; }
/* Solange der Newsletter-Abschnitt im Bild ist, bleibt die Steady-Leiste unten weg (Handy: sie lag darüber) */
html.gnm-nl-sichtbar steady-newsletter { display: none !important; }
.gnm-anker { display: block; height: 0; scroll-margin-top: 110px; }
/* ==========================================================================
0.27.0 · Z14 — Darstellung, Partnerstimmen, Überschriftenzeile
========================================================================== */
/* --- Überschriftenzeile: Knopf „Alle Geschichten“ sitzt auf der Höhe der Überschrift (nicht der Einleitung) --- */
.gnm-sec-head, .gnm-rs__kopf, .gnm-an-s__kopf {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto;
column-gap: 24px;
row-gap: 0;
align-items: center !important;
}
.gnm-sec-head > .wp-block-group:first-child,
.gnm-rs__kopf > div:first-child,
.gnm-an-s__kopf > div:first-child { display: contents !important; }
.gnm-sec-head h2, .gnm-rs__kopf h2, .gnm-an-s__kopf h2 { grid-column: 1; grid-row: 1; margin: 0; }
.gnm-sec-head > .wp-block-group:first-child > :not(h2),
.gnm-rs__kopf > div:first-child > :not(h2),
.gnm-an-s__kopf > div:first-child > :not(h2) { grid-column: 1; grid-row: 2; margin: 10px 0 0 !important; }
.gnm-sec-head > .wp-block-buttons, .gnm-rs__kopf > a, .gnm-an-s__kopf > a, .gnm-an-s__kopf > .gnm-knopf {
grid-column: 2; grid-row: 1; align-self: center; margin: 0;
}
@media (max-width: 560px) {
.gnm-sec-head, .gnm-rs__kopf, .gnm-an-s__kopf { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
.gnm-sec-head > .wp-block-buttons, .gnm-rs__kopf > a, .gnm-an-s__kopf > a, .gnm-an-s__kopf > .gnm-knopf { grid-column: 1; grid-row: 3; justify-self: start; margin-top: 14px; }
}
/* --- Einleitungszeilen aus (ganze Website: GNM → Darstellung · je Abschnitt: „Einleitung zeigen“) --- */
.gnm-ohne-untertitel .gnm-sec-head > .wp-block-group:first-child > :not(h2),
.gnm-ohne-untertitel .gnm-rs__kopf > div:first-child > :not(h2),
.gnm-ohne-untertitel .gnm-an-s__kopf > div:first-child > :not(h2),
.gnm-ohne-untertitel .gnm-an-s__unter, .gnm-ohne-untertitel .gnm-lk .gnm-sub, .gnm-ohne-untertitel .gnm-ab > .gnm-an-s__unter,
.gnm-ohne-unter .gnm-sec-head > .wp-block-group:first-child > :not(h2),
.gnm-ohne-unter .gnm-rs__kopf > div:first-child > :not(h2),
.gnm-ohne-unter .gnm-an-s__kopf > div:first-child > :not(h2),
.gnm-ohne-unter .gnm-an-s__unter, .gnm-ohne-unter .gnm-lk .gnm-sub,
.gnm-ohne-unter.gnm-sec-head > .wp-block-group:first-child > :not(h2),
.gnm-ohne-unter .gnm-sec-head p { display: none !important; }
/* --- Nummern 01/02/03 aus (Standard) --- */
.gnm-ohne-nr .gnm-vk__nr, .gnm-ohne-nr .gnm-uu__nr, .gnm-ohne-nr .gnm-nk__nr, .gnm-ohne-nr .gnm-kurz__nr,
.gnm-ohne-nr .gnm-blk__nr, .gnm-ohne-nr .gnm-md-karte__nr { display: none !important; }
.gnm-ohne-nr .gnm-uu__m { grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); }
@media (max-width: 700px) { .gnm-ohne-nr .gnm-uu__m { grid-template-columns: minmax(0, 1fr); } }
/* --- Partnerstimmen: neue Karten --- */
.gnm-st { --st-orange: #D4621A; margin: clamp(48px, 6vw, 96px) 0 0; }
.gnm-st__eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gnm-ink); }
.gnm-st__eyebrow b { color: var(--st-orange); font-weight: 700; }
.gnm-st__eyebrow span { color: var(--st-orange); }
.gnm-st__h { margin: 0 0 clamp(24px, 3vw, 44px); font-family: var(--wp--preset--font-family--newsreader); font-weight: 500; font-size: clamp(38px, 6vw, 92px); line-height: .98; letter-spacing: -.035em; text-wrap: balance; }
.gnm-st__punkt { color: var(--gnm-orange); }
.gnm-st__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 24px); align-items: stretch; }
.gnm-st__karte { --st-bg: var(--gnm-lila-hell); --st-fg: var(--gnm-ink); --st-mute: #55525f; --st-linie: rgba(36,36,36,.22); --st-marke: var(--st-orange);
position: relative; display: flex; flex-direction: column; margin: 0; padding: clamp(22px, 2.2vw, 32px); border-radius: 22px; background: var(--st-bg); color: var(--st-fg); }
.gnm-st__karte--lila { --st-bg: #ECE5FC; }
.gnm-st__karte--pfirsich { --st-bg: #FCEEE3; }
.gnm-st__karte--dunkel { --st-bg: #45227E; --st-fg: #fff; --st-mute: rgba(255,255,255,.82); --st-linie: rgba(255,255,255,.28); --st-marke: var(--gnm-orange); }
.gnm-st__kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.gnm-st__marke { display: inline-flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--st-marke); }
.gnm-st__marke::after { content: ""; width: clamp(60px, 8vw, 110px); height: 1.5px; background: currentColor; opacity: .85; }
.gnm-st__q { display: grid; place-items: center; width: 52px; height: 52px; flex: 0 0 52px; border: 1.5px solid var(--gnm-orange); border-radius: 50%; color: var(--gnm-orange); }
.gnm-st__karte:not(.gnm-st__karte--dunkel) .gnm-st__q { color: var(--st-orange); border-color: var(--st-orange); }
.gnm-st__logo { display: block; margin: 0 0 18px; }
.gnm-st__logo img { display: block; width: auto; height: auto; max-width: 84px; max-height: 76px; object-fit: contain; }
.gnm-st__karte blockquote { margin: 0 0 clamp(22px, 2.4vw, 34px); padding: 0; border: 0; font-family: var(--wp--preset--font-family--newsreader); font-style: normal; font-weight: 400; font-size: clamp(21px, 1.95vw, 30px); line-height: 1.24; letter-spacing: -.005em; color: inherit; overflow-wrap: break-word; hyphens: manual; text-wrap: pretty; }
.gnm-st__karte figcaption { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: auto; padding-top: 18px; border-top: 1px solid var(--st-linie); }
.gnm-st__wer { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gnm-st__wer b { font-size: 15px; font-weight: 600; color: inherit; }
.gnm-st__wer small { font-size: 13px; line-height: 1.35; color: var(--st-mute); }
.gnm-st__link { display: inline-flex; align-items: center; gap: 12px; flex: 0 0 auto; padding-left: 14px; border-left: 1px solid var(--st-linie); font-size: 13px; font-weight: 600; color: inherit; text-decoration: none; white-space: nowrap; }
.gnm-st__link:hover span { text-decoration: underline; text-underline-offset: 3px; }
.gnm-st__pfeil { display: grid; place-items: center; width: 34px; height: 34px; border: 1.5px solid var(--gnm-orange); border-radius: 50%; color: var(--gnm-orange); transition: background .15s, color .15s; }
.gnm-st__karte:not(.gnm-st__karte--dunkel) .gnm-st__pfeil { color: var(--st-orange); border-color: var(--st-orange); }
.gnm-st__link:hover .gnm-st__pfeil, .gnm-st__link:focus-visible .gnm-st__pfeil { background: var(--gnm-orange); color: var(--gnm-ink); }
.gnm-st__link:focus-visible { outline: 3px solid var(--gnm-orange); outline-offset: 4px; border-radius: 8px; }
@media (max-width: 1060px) { .gnm-st__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) {
.gnm-st__raster { grid-template-columns: minmax(0, 1fr); }
.gnm-st__karte figcaption { flex-wrap: wrap; }
}
/* --- Menüs & Navigation: jeder Punkt beginnt mit Großbuchstaben (auch bei Browser-Übersetzung); „ePaper“ bleibt Markenschreibweise --- */
.gnm-mn a:not([href*="epaper"])::first-letter,
.gnm-mn a:not([href*="epaper"]) > b::first-letter,
.wp-block-navigation-item__content:not([href*="epaper"])::first-letter,
.gnm-mn__lesen a:not([href*="epaper"]) > b::first-letter { text-transform: uppercase; }
/* --- 0.27.0 · Z14 (Punkt 36): Knöpfe auf dunklem Grund – weiße Schrift statt Lila (GutSparen-Angebote, „Partner werden“) --- */
.gnm-gc__btn, .gnm-pk--lila .gnm-pk__btn, .gnm-gc--partner .gnm-pk__btn { color: #fff !important; font-weight: 700; }
.gnm-gc__btn:hover, .gnm-pk--lila .gnm-pk__btn:hover, .gnm-gc--partner .gnm-pk__btn:hover { background: var(--gnm-lila); color: var(--gnm-ink) !important; }
.gnm-gc__btn:focus-visible, .gnm-pk--lila .gnm-pk__btn:focus-visible { outline: 3px solid var(--gnm-orange); outline-offset: 3px; }
/* --- 0.27.0 · Z14: 404-Seite (Entwurf „NotFound“) --- */
.gnm-404n { position: relative; display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; padding: clamp(16px, 3vw, 40px) 0 clamp(24px, 4vw, 56px); }
.gnm-404n__karte { position: relative; box-sizing: border-box; padding: 64px 0 0 clamp(22px, 3vw, 40px); border-top: 2px solid var(--gnm-ink); border-left: 2px solid var(--gnm-ink); border-top-left-radius: 34px; }
.gnm-404n__tag { position: absolute; top: -2px; left: clamp(22px, 3vw, 40px); padding: 9px 16px 10px; border-radius: 0 0 8px 8px; background: #222; color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-404n__hand { margin: 0 !important; color: var(--gnm-lila-dunkel, #6B3FD4) !important; font-size: 46px !important; line-height: 1; transform: rotate(-3deg); transform-origin: left; }
.gnm-404n__h1 { margin: 12px 0 0; font-family: var(--wp--preset--font-family--newsreader); font-weight: 600; font-size: clamp(36px, 4.6vw, 58px); line-height: 1.06; letter-spacing: -.01em; text-wrap: balance; }
.gnm-404n__mark { background: linear-gradient(transparent 84%, var(--gnm-orange) 84%); }
.gnm-404n__text { max-width: 540px; margin: 18px 0 0; font-size: 19px; line-height: 1.55; color: #3a3a42; }
.gnm-404n__suche { display: flex; gap: 10px; max-width: 560px; margin: 26px 0 0; }
.gnm-404n__suche input { flex: 1; min-width: 0; box-sizing: border-box; height: 54px; padding: 0 22px; border: 2px solid var(--gnm-ink); border-radius: 99px; background: rgba(255,255,255,.7); font: inherit; font-size: 16px; color: var(--gnm-ink); }
.gnm-404n__suchen, .gnm-404n__knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 54px; padding: 0 28px; border: 2px solid var(--gnm-ink); border-radius: 99px; background: transparent; color: var(--gnm-ink); font: inherit; font-size: 16px; font-weight: 700; text-decoration: none; cursor: pointer; }
.gnm-404n__suchen { border-color: var(--gnm-orange); background: var(--gnm-orange); }
.gnm-404n__knopf--dunkel { background: var(--gnm-ink); color: #fff; }
.gnm-404n__suchen:hover, .gnm-404n__knopf:hover { transform: translateY(-1px); }
.gnm-404n__wege { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.gnm-404n__beliebt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 26px; padding-bottom: 8px; }
.gnm-404n__beliebt b { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: #3a3a42; }
.gnm-404n__beliebt a { padding: 7px 15px; border: 1.5px solid var(--gnm-ink); border-radius: 99px; font-size: 14px; color: var(--gnm-ink); text-decoration: none; }
.gnm-404n__beliebt a:hover { background: var(--gnm-ink); color: #fff; }
.gnm-404n__suche input:focus-visible, .gnm-404n__suchen:focus-visible, .gnm-404n__knopf:focus-visible, .gnm-404n__beliebt a:focus-visible { outline: 3px solid var(--gnm-lila-dunkel, #6B3FD4); outline-offset: 3px; }
.gnm-404n__rechts { display: flex; flex-direction: column; gap: 28px; align-items: stretch; }
.gnm-404n__zahl { display: block; width: 100%; max-width: 400px; height: auto; color: var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader); font-weight: 600; }
.gnm-404n__erklaert { box-sizing: border-box; max-width: 380px; padding: 20px 24px 24px; border-radius: 18px; background: #222; color: #fff; box-shadow: 6px 6px 0 #B79CF5; }
.gnm-404n__hand2 { margin: 0 !important; color: #CDB8FA !important; font-size: 32px !important; line-height: 1; }
.gnm-404n__erklaert ul { margin: 12px 0 0; padding: 0 0 0 18px; font-size: 15px; line-height: 1.6; }
@media (max-width: 900px) {
.gnm-404n { grid-template-columns: minmax(0, 1fr); }
.gnm-404n__rechts { display: contents; }
.gnm-404n__zahl { order: -1; max-width: 220px; }
.gnm-404n__erklaert { order: 1; max-width: none; }
}
@media (max-width: 560px) {
.gnm-404n__karte { padding-top: 58px; }
.gnm-404n__hand { font-size: 38px !important; }
.gnm-404n__suche { flex-direction: column; }
.gnm-404n__suchen, .gnm-404n__knopf { width: 100%; }
}
/* --- 0.27.0 · Z14: Hauptseiten – Hintergrund --- */
body.gnm-seitenfarbe-weiss { background: #fff; }
body.gnm-seitenfarbe-pfirsich { background: var(--gnm-pfirsich, #FDF1E7); }
body.gnm-seitenfarbe-lila { background: var(--gnm-lila-hell, #F1E9FF); }
body.gnm-seitenfarbe-sand { background: #F5EFE4; }
/* 0.32.3: Menü und Suche in einem Knopf – eigener Such-Knopf in der Kopfzeile entfällt (auch bei gespeicherter Kopfzeilen-Vorlage) */
.gnm-header .gnm-ks { display: none !important; }
/* 0.33.0: Abo-Seite – neue Abschnitte (Ablauf, Bekannt aus); Stimmen und FAQ nutzen die vorhandenen Stile */
.gnm-schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin: 0; padding: 0; list-style: none; }
.gnm-schritt { position: relative; margin: 0; padding: 22px 22px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 14px; }
.gnm-schritt__nr { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: 0 0 12px; border-radius: 50%; background: var(--gnm-ink); color: var(--gnm-paper); font-size: 15px; font-weight: 700; }
.gnm-schritt h3 { margin: 0 0 6px; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.05; letter-spacing: -.02em; }
.gnm-schritt p { margin: 0; font-size: 14px; max-width: 40ch; }
.gnm-bekannt { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 22px 44px; margin: 0; padding: 0; list-style: none; }
.gnm-bekannt__logo { margin: 0; }
.gnm-bekannt__logo img { display: block; width: auto; max-width: 160px; max-height: 48px; filter: grayscale(1); opacity: .85; transition: opacity .15s, filter .15s; }
.gnm-bekannt__logo a:hover img, .gnm-bekannt__logo a:focus-visible img { filter: none; opacity: 1; }
@media (max-width: 600px) { .gnm-bekannt { gap: 18px 28px; } .gnm-bekannt__logo img { max-width: 120px; max-height: 40px; } }
/* 0.34.5 · Ticker als Zeitleiste in der Klammer (Startseite) und Ticker-Seite im Stil der Podcast-Liste */
.gnm-zl { box-sizing: border-box; padding-bottom: clamp(20px, 2.4vw, 32px); }
/* 0.34.6 · Startseite: Abstand zwischen Hero-Rahmen und Ticker-Rahmen (vorher 0), beide gleich breit und mittig; Hero kompakter (Bild 2,2:1, Titel kleiner) */
.gnm-zl { margin-block-start: 64px !important; }
.is-style-klammer:has(> .gnm-hero) { padding-bottom: clamp(28px, 3.2vw, 48px); }
.gnm-hero__bild img { aspect-ratio: 2.2 / 1; height: auto !important; }
.gnm-hero__titel { font-size: clamp(36px, 4.6vw, 64px) !important; }
@media (max-width: 700px) { .gnm-zl { margin-block-start: 40px !important; } .gnm-hero__bild img { aspect-ratio: 4 / 3; } }
.gnm-zl__liste { list-style: none; margin: 0; padding: 6px 0 0; display: grid; gap: 34px; }
.gnm-zl__eintrag { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 24px; padding-left: 44px; }
.gnm-zl__eintrag::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: -34px; width: 6px; border-radius: 3px; background: #ebe9e2; }
.gnm-zl__eintrag:last-child::before { bottom: 0; }
.gnm-zl__punkt { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--gnm-orange); box-shadow: 0 0 0 4px var(--wp--preset--color--base, #faf9f6); z-index: 1; }
.gnm-zl__inhalt { min-width: 0; }
.gnm-zl__titel { margin: 0; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 500; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.01em; }
.gnm-zl__titel a { color: inherit; text-decoration: none; }
.gnm-zl__titel a:hover, .gnm-zl__titel a:focus-visible { text-decoration: underline; text-decoration-color: var(--gnm-orange); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.gnm-zl__datum { margin: 10px 0 0; font-size: 14px; font-weight: 700; }
.gnm-zl__text { margin: 10px 0 0; max-width: 72ch; font-size: 16px; line-height: 1.55; }
.gnm-zl__teilen { align-self: start; }
.gnm-zl__alle { margin: 34px 0 10px; }
@media (max-width: 600px) { .gnm-zl__eintrag { grid-template-columns: minmax(0, 1fr); padding-left: 36px; } .gnm-zl__teilen { display: none; } }
.gnm-tk { display: flex; flex-direction: column; gap: clamp(32px, 4vw, 56px); }
.gnm-tk .gnm-rt { margin: 0; }
.gnm-tk__liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 64px); }
.gnm-tk__liste .gnm-fz { grid-template-columns: 104px minmax(0, 1fr); align-items: start; gap: 12px 22px; padding: 26px 0; }
.gnm-tk__liste .gnm-fz__bild { width: 104px; }
.gnm-tk__liste .gnm-fz__aktion { grid-column: 2; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.gnm-tk__liste .gnm-fz h3 { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.1; letter-spacing: -.02em; }
.gnm-tk__liste .gnm-fz__teaser { display: block; margin: 2px 0 0; font-size: 15px; }
.gnm-fz__k time { white-space: nowrap; }
.gnm-fz__bild { text-decoration: none; color: inherit; }
.gnm-fz__initial { text-decoration: none; display: grid; place-items: center; width: 100%; height: 100%; background: var(--gnm-lila-hell, #ece6fb); color: var(--gnm-ink); font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 700; font-size: 52px; line-height: 1; }
.gnm-tk__mehr { text-decoration: none; }
@media (max-width: 900px) { .gnm-tk__liste { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .gnm-tk__liste .gnm-fz { grid-template-columns: 76px minmax(0, 1fr); gap: 10px 16px; } .gnm-tk__liste .gnm-fz__bild { width: 76px; } .gnm-fz__initial { font-size: 38px; } .gnm-tk__liste .gnm-fz__teaser { display: block; } }
/* 0.34.8 · GutSparen-Banner als Gutschein-Karte (Entwurf Digi „GutSparen.dc.html“): Kopfzeile mit Unterstreichung und „Alle Angebote →“,
lila Karte mit Rahmen rechts/unten, schräges weißes Logo-Schild, gestrichelter Abriss mit Code, Kerbe, dunkles Etikett unten rechts.
Nur Theme-CSS; das Plugin (GutSparen Offers) bleibt unverändert und blendet die Folien weiter per .is-active ein und aus. */
.gnm-anz { box-sizing: border-box; display: block; }
.gnm-anz__kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.gnm-anz__titel { margin: 0; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(30px, 3vw, 38px); line-height: 1.1; color: var(--gnm-ink); }
.gnm-anz__titel span { background: linear-gradient(transparent 84%, var(--gnm-orange) 84%); }
.gnm-anz__alle { font-size: 15px; font-weight: 700; color: #A85A15; text-decoration: none; }
.gnm-anz__alle:hover, .gnm-anz__alle:focus-visible { text-decoration: underline; }
.gnm-anz .gso-banner-carousel { display: grid; gap: 30px; width: 100%; padding: 0; margin-top: 74px; }
.gnm-anz .gso-banner-track { overflow: visible; }
.gnm-anz .gso-banner-slide-shell { position: relative; display: block; min-height: 0; overflow: visible; border: 0; border-right: 2px solid var(--gnm-ink); border-bottom: 2px solid var(--gnm-ink); border-radius: 26px 26px 36px 26px; background: var(--gnm-lila-hell, #F1EAFD); box-shadow: 0 18px 40px rgba(31, 31, 35, .10); }
.gnm-anz .gso-banner-slide-shell::after { content: "GutSparen"; position: absolute; right: 40px; bottom: 0; padding: 10px 16px 9px; border-radius: 8px 8px 0 0; background: var(--gnm-ink); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-anz .gso-banner-slide-content { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-rows: auto auto 1fr; align-items: start; gap: 0; min-width: 0; padding: 0; background: none; color: var(--gnm-ink); }
.gnm-anz .gso-banner-slide-heading { display: contents; }
.gnm-anz .gso-banner-slide-content::before { content: "GutSparen"; grid-column: 1; grid-row: 1; padding: 62px 44px 0 48px; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3A3A42; }
.gnm-anz .gso-banner-slide-title { grid-column: 1; grid-row: 2; margin: 8px 0 0; padding: 0 44px 0 48px; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(32px, 3.6vw, 46px); line-height: 1.05; color: var(--gnm-ink); }
.gnm-anz .gso-banner-slide-description { grid-column: 1; grid-row: 3; margin: 0; padding: 16px 44px 70px 48px; font-size: 18px; line-height: 1.55; color: #2E2E35; }
.gnm-anz .gso-banner-slide-description p { max-width: 640px; margin: 0; color: inherit; font-size: inherit; line-height: inherit; }
.gnm-anz .gso-banner-slide-logo { position: absolute; left: 48px; top: -34px; z-index: 2; display: grid; place-items: center; width: 176px; height: 66px; margin: 0; padding: 8px 16px; box-sizing: border-box; border-radius: 14px; background: #fff; box-shadow: 0 10px 24px rgba(31, 31, 35, .22); transform: rotate(-3deg); }
.gnm-anz .gso-banner-slide-logo img, .gnm-anz .gso-banner-logo-image { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; }
.gnm-anz .gso-banner-ad-label { position: absolute; right: 22px; top: 22px; z-index: 2; display: inline-flex; align-items: center; padding: 4px 11px; border: 1.5px solid var(--gnm-ink); border-radius: 99px; background: #fff; color: var(--gnm-ink); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.gnm-anz .gso-banner-slide-actions { position: relative; grid-column: 2; grid-row: 1 / span 3; align-self: stretch; display: flex; flex-direction: column; gap: 0; box-sizing: border-box; min-width: 0; margin: 0; padding: 62px 40px 70px 36px; border-left: 2px dashed var(--gnm-ink); }
.gnm-anz .gso-banner-slide-actions::after { content: ""; position: absolute; left: -16px; top: -16px; width: 30px; height: 30px; border-radius: 50%; background: var(--gnm-paper); }
.gnm-anz .gso-banner-slide-actions:has(.gso-banner-slide-code)::before { content: "Dein Code"; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #3A3A42; }
.gnm-anz .gso-banner-slide-code { display: flex; align-items: stretch; justify-content: space-between; gap: 0; margin: 8px 0 0; padding: 0; overflow: hidden; border: 2px dashed var(--gnm-ink); border-radius: 14px; background: #fff; color: var(--gnm-ink); }
.gnm-anz .gso-banner-slide-code-value { flex: 1; min-width: 0; padding: 14px 0; text-align: center; background: none; color: inherit; font-weight: 700; font-size: 22px; letter-spacing: .08em; overflow-wrap: anywhere; }
.gnm-anz .gso-banner-slide-copy { height: auto; padding: 0 14px; border: 0; border-left: 2px dashed var(--gnm-ink); border-radius: 0; background: var(--gnm-paper); color: var(--gnm-ink); font: 700 11px/1 inherit; letter-spacing: .12em; text-transform: uppercase; cursor: pointer; }
.gnm-anz .gso-banner-slide-copy:hover, .gnm-anz .gso-banner-slide-copy:focus-visible { background: var(--gnm-ink); color: #fff; }
.gnm-anz .gso-banner-slide-button { display: flex; align-items: center; justify-content: center; width: 100%; height: 54px; margin-top: 16px; box-sizing: border-box; border: 2px solid var(--gnm-orange); border-radius: 99px; background: var(--gnm-orange); color: var(--gnm-ink); font-size: 17px; font-weight: 700; text-decoration: none; white-space: normal; text-align: center; box-shadow: none; }
.gnm-anz a.gso-banner-slide-button:hover, .gnm-anz a.gso-banner-slide-button:focus-visible { background: var(--gnm-ink); border-color: var(--gnm-ink); color: #fff; }
.gnm-anz .gso-banner-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 16px; padding: 0; border: 0; }
.gnm-anz .gso-banner-control { display: grid; place-items: center; width: 44px; height: 44px; padding: 0 0 3px; border: 2px solid var(--gnm-ink); border-radius: 50%; background: transparent; color: var(--gnm-ink); font-size: 24px; line-height: 1; cursor: pointer; }
.gnm-anz .gso-banner-control:hover, .gnm-anz .gso-banner-control:focus-visible { background: var(--gnm-ink); color: #fff; }
.gnm-anz .gso-banner-dots { display: flex; align-items: center; gap: 8px; }
.gnm-anz .gso-banner-dot { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: #C9B8F2; cursor: pointer; transition: width .25s, background .25s; }
.gnm-anz .gso-banner-dot.is-active { width: 36px; border-radius: 5px; background: var(--gnm-orange); }
.gnm-anz .gso-banner-rotation-toggle { display: inline-flex; align-items: center; gap: 8px; height: 44px; min-height: 0; margin-left: 12px; padding: 0 20px; border: 2px solid var(--gnm-ink); border-radius: 99px; background: transparent; color: var(--gnm-ink); font-size: 15px; font-weight: 700; cursor: pointer; }
.gnm-anz .gso-banner-rotation-toggle:hover, .gnm-anz .gso-banner-rotation-toggle:focus-visible { background: var(--gnm-ink); color: #fff; }
.gnm-anz .gso-banner-slide-shell:not(:has(.gso-banner-slide-logo)) .gso-banner-slide-content::before { padding-top: 48px; }
@media (max-width: 860px) {
.gnm-anz .gso-banner-carousel { margin-top: 60px; gap: 24px; }
.gnm-anz .gso-banner-slide-content { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto auto; }
.gnm-anz .gso-banner-slide-content::before { padding: 58px 22px 0 22px; }
.gnm-anz .gso-banner-slide-title { padding: 0 22px; }
.gnm-anz .gso-banner-slide-description { padding: 14px 22px 28px; font-size: 16px; }
.gnm-anz .gso-banner-slide-logo { left: 22px; width: 150px; height: 58px; }
.gnm-anz .gso-banner-ad-label { right: 16px; top: 16px; }
.gnm-anz .gso-banner-slide-actions { grid-column: 1; grid-row: 4; padding: 30px 22px 64px; border-left: 0; border-top: 2px dashed var(--gnm-ink); }
.gnm-anz .gso-banner-slide-actions::after { left: -17px; top: -16px; }
.gnm-anz .gso-banner-slide-shell::after { right: 22px; }
.gnm-anz .gso-banner-rotation-toggle { margin-left: 0; }
}
.gnm-anz .gso-banner-slide-title { text-decoration: underline; text-decoration-color: var(--gnm-orange); text-decoration-thickness: .1em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
/* ==========================================================================
0.35.0 · Abo-Seite: Ablauf waagerecht, „Dein Extra“, Hero Wall (Notizpapier über die ganze Breite)
Farben der Karten kommen als CSS-Variablen aus GNM → Abo-Seite (--karte-bg, --punkt-bg, --ex-bg, --ex-fg, --hw-*).
========================================================================== */
.gnm-seite-abo .gnm-steady { padding-top: 10px; }
.gnm-seite-abo .gnm-steady__hinweis { margin-top: 12px; }
/* Ablauf: Karten nebeneinander auf einer waagerechten Linie, Punkt (Nummer) auf der Linie */
.gnm-an-s__unter + .gnm-ab__k, .gnm-ab__h + .gnm-an-s__unter { margin-top: 12px; }
.gnm-schritte--h { position: relative; display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 18px; margin: 0; padding: 52px 0 6px; list-style: none; counter-reset: none; }
.gnm-schritte--h::before { content: ""; position: absolute; left: 17px; right: 17px; top: 14px; height: 6px; border-radius: 3px; background: #ebe9e2; }
.gnm-schritte--h .gnm-schritt { position: relative; margin: 0; padding: 22px 22px 24px; border: 1.5px solid var(--gnm-ink); border-radius: 18px; background: var(--karte-bg, #fff); }
.gnm-schritte--h .gnm-schritt__nr { position: absolute; left: 0; top: -52px; width: 34px; height: 34px; margin: 0; background: var(--punkt-bg, var(--gnm-orange)); color: var(--gnm-ink); border: 3px solid var(--gnm-paper); box-shadow: 0 0 0 1.5px var(--gnm-ink); box-sizing: border-box; }
.gnm-schritte--h .gnm-schritt h3 { margin: 0 0 8px; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.1; letter-spacing: -.01em; }
.gnm-schritte--h .gnm-schritt p { margin: 0; max-width: none; font-size: 15px; line-height: 1.5; }
.gnm-schritte--h .gnm-schritt p + p { margin-top: 8px; }
@media (max-width: 1000px) { .gnm-schritte--h { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 62px; } .gnm-schritte--h::before { display: none; } .gnm-schritte--h .gnm-schritt::after { content: ""; position: absolute; left: 17px; right: -18px; top: -37px; height: 6px; border-radius: 3px; background: #ebe9e2; z-index: -1; } .gnm-schritte--h .gnm-schritt:nth-child(even)::after { display: none; } }
@media (max-width: 640px) {
.gnm-schritte--h { grid-template-columns: minmax(0, 1fr); padding: 6px 0 6px 52px; row-gap: 18px; }
.gnm-schritte--h::before { display: block; left: 14px; right: auto; top: 18px; bottom: 18px; width: 6px; height: auto; }
.gnm-schritte--h .gnm-schritt::after, .gnm-schritte--h .gnm-schritt:nth-child(even)::after { display: none; }
.gnm-schritte--h .gnm-schritt__nr { left: -52px; top: 18px; }
}
/* Dein Extra */
.gnm-ex-sec { display: flex; flex-direction: column; gap: 52px; }
.gnm-ex { position: relative; display: grid; grid-template-columns: minmax(220px, 300px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 4vw, 56px); box-sizing: border-box; padding: clamp(44px, 4vw, 56px) clamp(24px, 4vw, 56px) clamp(28px, 3vw, 40px); border: 2px solid var(--gnm-ink); border-radius: 26px; background: var(--ex-bg, #F4A261); color: var(--ex-fg, var(--gnm-ink)); box-shadow: 6px 6px 0 var(--gnm-lila); }
.gnm-ex__etikett { position: absolute; left: clamp(20px, 3vw, 36px); top: -18px; display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 16px; border-radius: 99px; background: var(--gnm-ink); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-ex__buehne { position: relative; height: 230px; }
.gnm-ex__mag { position: absolute; display: block; width: 46%; height: auto; aspect-ratio: 3 / 4; border-radius: 4px; object-fit: cover; background: var(--gnm-lila); box-shadow: 0 10px 22px rgba(36, 36, 36, .28); }
.gnm-ex__mag--0 { left: 4%; top: 14%; transform: rotate(-9deg); }
.gnm-ex__mag--1 { left: 30%; top: 4%; transform: rotate(5deg); z-index: 1; }
.gnm-ex__mag--2 { left: 18%; top: 22%; transform: rotate(-2deg); z-index: 2; }
.gnm-ex__mag--lila { background: var(--gnm-lila); }
.gnm-ex__mag--dunkel { background: var(--gnm-ink); }
.gnm-ex__geschenk { position: absolute; right: 0; top: -6px; z-index: 3; display: grid; place-items: center; width: 56px; height: 56px; border: 1.5px solid var(--gnm-ink); border-radius: 50%; background: #fff; transform: rotate(8deg); }
.gnm-ex__kopf { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; opacity: .85; }
.gnm-ex__name { margin: 10px 0 0; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; }
.gnm-ex__name span { text-decoration: underline; text-decoration-thickness: .07em; text-underline-offset: .12em; text-decoration-skip-ink: none; }
.gnm-ex__satz { margin: 14px 0 0; max-width: 40ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.45; }
@media (max-width: 760px) { .gnm-ex { grid-template-columns: minmax(0, 1fr); padding-top: 52px; } .gnm-ex__buehne { height: 200px; max-width: 280px; margin: 0 auto; width: 100%; } }
/* Hero Wall: Notizpapier von Rand zu Rand */
body:has(.gnm-hw) { overflow-x: clip; }
.gnm-hw { position: relative; width: 100vw; margin-inline: calc(50% - 50vw); --hw-linie: max(64px, calc((100vw - 1312px) / 2 - 24px)); }
.gnm-hw__papier { position: relative; background-color: var(--hw-papier, #FFFDF8); background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 31px, rgba(110, 130, 160, .24) 31px, rgba(110, 130, 160, .24) 32px); background-position: 0 24px; border-top: 2px solid var(--gnm-ink); border-bottom: 1px solid rgba(36, 36, 36, .2); box-shadow: 0 18px 40px rgba(36, 36, 36, .08); overflow: hidden; }
.gnm-hw__papier::before { content: ""; position: absolute; left: var(--hw-linie); top: 0; bottom: 0; width: 2px; background: rgba(244, 162, 97, .75); }
.gnm-hw__papier::after { content: ""; position: absolute; left: calc(var(--hw-linie) - 46px); top: 110px; width: 26px; height: 26px; border-radius: 50%; background: var(--gnm-paper); box-shadow: inset 0 2px 4px rgba(36, 36, 36, .35), 0 260px 0 -0px var(--gnm-paper), 0 520px 0 0 var(--gnm-paper); }
.gnm-hw__in { position: relative; box-sizing: border-box; width: 100%; max-width: calc(1312px + var(--hw-linie) + 32px); margin: 0 auto; padding: clamp(72px, 7vw, 96px) clamp(16px, 3vw, 36px) clamp(56px, 5vw, 80px) calc(var(--hw-linie) + 30px); }
@media (min-width: 1500px) { .gnm-hw__in { max-width: none; width: min(100%, calc(100% - (100vw - 1312px) / 2 + 24px)); margin: 0 0 0 auto; padding-left: 30px; } }
.gnm-hw__tab { position: absolute; top: -2px; left: calc(var(--hw-linie) + 30px - 16px); margin: 0; padding: 9px 16px 10px; border-radius: 0 0 8px 8px; background: var(--gnm-ink); color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.gnm-hw__h { margin: 0; max-width: 900px; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(34px, 4.6vw, 56px); line-height: 1.08; color: var(--gnm-ink); }
.gnm-hw__h span { background: linear-gradient(transparent 84%, var(--gnm-orange) 84%); }
.gnm-hw__intro { max-width: 760px; margin: 22px 0 0; font-size: clamp(17px, 1.5vw, 19px); line-height: 1.6; color: #2E2E35; }
.gnm-hw__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding: 0; list-style: none; }
.gnm-hw__chip { margin: 0; padding: 8px 16px; border: 1.5px solid var(--gnm-ink); border-radius: 99px; background: var(--hw-chip, var(--gnm-orange)); color: var(--gnm-ink); font-size: 15px; line-height: 1.3; }
.gnm-hw__chip--anonym { background: var(--hw-anonym, var(--gnm-lila)); font-weight: 700; }
.gnm-hw__zitate { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 40px; }
.gnm-hw__zitat { position: relative; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; margin: 0; padding: 40px 26px 22px; border: 1.5px solid var(--gnm-ink); border-radius: 22px; background: var(--hw-zitat, #fff); }
.gnm-hw__anf { position: absolute; left: 22px; top: -4px; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: 96px; line-height: 1; color: var(--gnm-orange); }
.gnm-hw__zitat blockquote { margin: 18px 0 0; font-size: 17px; line-height: 1.6; color: #2E2E35; }
.gnm-hw__zitat figcaption { display: flex; align-items: center; gap: 12px; margin-top: 22px; padding-top: 16px; border-top: 1px solid rgba(36, 36, 36, .18); font-size: 14px; line-height: 1.35; }
.gnm-hw__zitat figcaption b { display: block; }
.gnm-hw__zitat figcaption small { display: block; font-size: 13px; color: #3A3A42; }
.gnm-hw__ini { flex: 0 0 44px; display: grid; place-items: center; width: 44px; height: 44px; border: 1.5px solid var(--gnm-ink); border-radius: 50%; background: var(--gnm-lila); font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: 20px; }
@media (max-width: 700px) { .gnm-hw { --hw-linie: 30px; } .gnm-hw__papier::after { display: none; } .gnm-hw__in { padding-left: 46px; padding-right: 16px; } .gnm-hw__tab { left: 30px; } }
.gnm-stimme { background: var(--karte-bg, transparent); }
.gnm-hw__in { padding-right: max(16px, calc((100vw - 1312px) / 2 + 24px)); }
@media (max-width: 700px) { .gnm-hw__in { padding-right: 16px; } .gnm-hw__chip { padding: 7px 12px; font-size: 14px; } }
/* 0.35.1 · Hero Wall: Überschrift in Caveat (Handschrift) passend zum Notizpapier; Fotos in den Zitat-Karten */
.gnm-hw__h { font-family: var(--wp--preset--font-family--caveat), 'Caveat', 'Bradley Hand', cursive; font-weight: 700; font-size: clamp(44px, 6.2vw, 84px); line-height: 1; letter-spacing: 0; }
.gnm-hw__h span { background: linear-gradient(transparent 80%, var(--gnm-orange) 80%, var(--gnm-orange) 92%, transparent 92%); padding: 0 .08em; }
.gnm-hw__ini--foto { overflow: hidden; background: var(--gnm-lila); }
.gnm-hw__ini--foto img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gnm-hw__zitat { background: var(--hw-zitat, #fff); }
.gnm-schritte--h .gnm-schritt { background: var(--karte-bg, #fff); }
/* 0.36.0 · Banner: ohne Kopf (Ticker-Seite) und einklappbar (Artikel) */
.gnm-anz--ohne-kopf .gso-banner-carousel { margin-top: 48px; }
.gnm-anz--klapp { margin-block: 12px 8px; }
.gnm-anz__rechts { display: inline-flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.gnm-anz__schalter { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; border: 2px solid var(--gnm-ink); border-radius: 99px; background: transparent; color: var(--gnm-ink); font: 700 13px/1 inherit; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.gnm-anz__schalter:hover, .gnm-anz__schalter:focus-visible { background: var(--gnm-ink); color: #fff; }
.gnm-anz__pfeil { width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .2s; }
.gnm-anz--zu .gnm-anz__pfeil { transform: translateY(1px) rotate(-135deg); }
.gnm-anz--zu .gnm-anz__koerper { max-height: 0; overflow: hidden; visibility: hidden; }
.gnm-anz--zu .gnm-anz__kopf { margin-bottom: 0; }
@media (prefers-reduced-motion: reduce) { .gnm-anz__pfeil { transition: none; } }
@media (max-width: 700px) { .gnm-anz--klapp .gnm-anz__kopf { align-items: center; } .gnm-anz__rechts { gap: 12px; } }
/* 0.36.1: Aufzählungen in FAQ-Antworten (Abo-Seite) */
.gnm-faq__t { max-width: 64ch; margin: 0 0 22px; font-size: 15px; line-height: 1.55; }
.gnm-abo-liste { margin: 8px 0 16px; padding: 0 0 0 1.25em; list-style: disc; }
.gnm-abo-liste li { margin: 0 0 6px; padding-left: 2px; }
.gnm-abo-liste li::marker { color: var(--gnm-orange); }
/* ==========================================================================
0.37.0 · Rubrik-Satz in einer Zeile, Ticker-Zeitleiste mit Scroll-Fortschritt, Hover der Schritt-Karten
========================================================================== */
.gnm-rt__text { max-width: none; margin: 22px 0 0; font-size: clamp(15px, 1.35vw, 19px); line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 640px) { .gnm-rt__text { white-space: normal; } }
.gnm-rt__text--edit { cursor: text; border-radius: 6px; outline: 1.5px dashed transparent; outline-offset: 4px; transition: outline-color .2s, background-color .2s; }
.gnm-rt__text--edit:hover, .gnm-rt__text--edit:focus-visible { outline-color: var(--gnm-lila); }
.gnm-rt__text--edit.is-edit { white-space: normal; text-overflow: clip; outline: 2px solid var(--gnm-lila); background: #fff; padding: 2px 8px; margin-left: -8px; }
.gnm-rt__text--edit.is-sp { opacity: .5; }
.gnm-rt__leer { color: var(--wp--preset--color--mute); font-style: italic; }
/* Ticker-Zeitleiste: Punkte und Linie leuchten mit dem Scrollen auf (nur mit JS; ohne JS bleibt alles wie vorher) */
.gnm-zl__eintrag::after { content: ""; position: absolute; left: 8px; top: 8px; bottom: -34px; width: 6px; border-radius: 3px; background: var(--gnm-orange); transform: scaleY(var(--f, 0)); transform-origin: top; opacity: 0; transition: opacity .3s; pointer-events: none; }
.gnm-zl__eintrag:last-child::after { bottom: 0; }
.gnm-zl__punkt { transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), box-shadow .35s, background-color .35s, opacity .35s; }
.gnm-zl--js .gnm-zl__eintrag::after { opacity: 1; }
.gnm-zl--js .gnm-zl__punkt { transform: scale(.72); opacity: .55; }
.gnm-zl--js .gnm-zl__eintrag.is-erreicht .gnm-zl__punkt { transform: scale(1); opacity: 1; box-shadow: 0 0 0 4px var(--wp--preset--color--base, #faf9f6), 0 0 0 9px rgba(244, 162, 97, .35); }
.gnm-zl--js .gnm-zl__eintrag.is-aktuell .gnm-zl__punkt { transform: scale(1.3); box-shadow: 0 0 0 4px var(--wp--preset--color--base, #faf9f6), 0 0 0 11px rgba(244, 162, 97, .5); }
.gnm-zl__eintrag:hover .gnm-zl__punkt { transform: scale(1.3); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gnm-zl__punkt, .gnm-zl__eintrag::after { transition: none; } }
/* Schritt-Karten („Was nach dem Abo passiert“): Farbwechsel beim Hover, reihum Lila, Orange, Schwarz */
.gnm-schritte--h .gnm-schritt { --akz: var(--gnm-lila); --akz-text: var(--gnm-ink); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background-color .28s ease; }
.gnm-schritte--h .gnm-schritt:nth-child(3n+2) { --akz: var(--gnm-orange); --akz-text: var(--gnm-ink); }
.gnm-schritte--h .gnm-schritt:nth-child(3n) { --akz: var(--gnm-ink); --akz-text: #fff; }
.gnm-schritte--h .gnm-schritt__nr { transition: background-color .28s ease, color .28s ease, transform .28s ease; }
.gnm-schritte--h .gnm-schritt:hover, .gnm-schritte--h .gnm-schritt:focus-within { transform: translateY(-4px); border-color: var(--akz); box-shadow: 6px 6px 0 var(--akz); background-image: linear-gradient(color-mix(in srgb, var(--akz) 8%, transparent), color-mix(in srgb, var(--akz) 8%, transparent)); }
.gnm-schritte--h .gnm-schritt:hover .gnm-schritt__nr, .gnm-schritte--h .gnm-schritt:focus-within .gnm-schritt__nr { background: var(--akz); color: var(--akz-text); transform: scale(1.1); }
@media (hover: none) { .gnm-schritte--h .gnm-schritt:hover { transform: none; } }
@media (prefers-reduced-motion: reduce) { .gnm-schritte--h .gnm-schritt, .gnm-schritte--h .gnm-schritt__nr { transition: none; } .gnm-schritte--h .gnm-schritt:hover { transform: none; } }
.gnm-faq__t p { margin: 0 0 10px; }
.gnm-faq__t > :last-child { margin-bottom: 0; }
/* 0.40.1 · Große Geschichte: keine Lücke mehr über der Überschrift.
Die rechte Spalte (Kurztext, Datum, Knopf) war schmal und hoch; die Überschrift sitzt unten und ließ oben Leerraum.
Jetzt 58/42, Kurztext höchstens 5 Zeilen, kein zusätzlicher Abstand unter den Spalten. Mobil unverändert. */
@media (min-width: 782px) {
.gnm-hero .wp-block-columns { margin-bottom: 0; }
.gnm-hero .wp-block-columns > .wp-block-column:first-child { flex-basis: 58% !important; }
.gnm-hero .wp-block-columns > .wp-block-column:last-child { flex-basis: 42% !important; padding-bottom: 6px !important; }
.gnm-hero .wp-block-post-excerpt__excerpt { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 0.41.1 · Startseite, nur Desktop (ab 1100 px): Spruch in einer Zeile, fett, höchstens 60 px.
„Gute Nachrichten über [Wort]“ steht nebeneinander, die „Große Geschichte“ rückt höher.
Bild und Texte der Geschichte bleiben wie zuvor. Unter 1100 px (Tablet, Handy) unverändert zweizeilig. */
@media (min-width: 1100px) {
.gnm-claim-h1 { font-size: clamp(38px, 3.2vw, 60px) !important; font-weight: 700; white-space: nowrap; line-height: 1.1; }
.gnm-claim-h1 br { display: none; }
/* 0.41.2 · weniger Abstand zwischen Kopfmenü und Spruch (vorher 80 px, jetzt 40 px) */
main:has(.gnm-claim-h1) { padding-top: 16px !important; }
}
/* 0.41.3 · Seitenköpfe. (1) „Alle Good News“ immer in einer Zeile, Schriftart und -stil unverändert; die Größe bleibt bis 168 px
wie bisher und schrumpft nur, wenn die Zeile sonst nicht in die Breite passt (Handy). (2) Nur Desktop (ab 1100 px):
weniger Abstand zwischen Kopfmenü und Seitenkopf (All News 72 → 32 px, Rubrikseiten 104 → 80 px). */
.gnm-an-h1 { white-space: nowrap; font-size: min(clamp(64px, 11vw, 168px), calc((100vw - 48px) / 6.6)) !important; }
.gnm-an-h1 br { display: none; }
@media (min-width: 1100px) {
main:has(.gnm-an-h1) { padding-top: 8px !important; }
main:has(.gnm-rt__h1) { padding-top: 16px !important; }
}
/* 0.41.8 · Ticker-Seite: Überschrift in einer Zeile; GutSparen-Banner im Originaldesign (Gutschein-Karte), nur niedriger (Entwurf Digi „banner reduced size“).
Desktop: drei Spalten (Name | Beschreibung | Code + Knopf) statt gestapelt. Nur auf der Ticker-Seite (.gnm-tk); Startseite und Artikel bleiben unverändert. Das Plugin bleibt unangetastet. */
.gnm-rt__h1--ticker { white-space: nowrap; font-size: min(clamp(40px, 7vw, 112px), calc((100vw - 32px) / 7.6)) !important; }
.gnm-rt__h1--ticker br { display: none; }
.gnm-tk .gnm-anz .gso-banner-carousel { margin-top: 0; gap: 14px; }
@media (min-width: 861px) {
.gnm-tk .gnm-anz .gso-banner-slide-shell::after { padding: 7px 14px 6px; font-size: 11px; }
.gnm-tk .gnm-anz .gso-banner-slide-content { grid-template-columns: minmax(200px, 320px) minmax(0, 1fr) 340px; grid-template-rows: 1fr; min-height: 160px; align-items: center; }
.gnm-tk .gnm-anz .gso-banner-slide-content::before { display: none; }
.gnm-tk .gnm-anz .gso-banner-slide-title { grid-column: 1; grid-row: 1; margin: 0; padding: 46px 20px 0 36px; font-size: clamp(28px, 2.8vw, 38px); line-height: 1.05; }
.gnm-tk .gnm-anz .gso-banner-slide-description { grid-column: 2; grid-row: 1; padding: 0 28px 0 0; font-size: 17px; line-height: 1.55; align-self: center; }
.gnm-tk .gnm-anz .gso-banner-slide-logo { left: 52px; top: -24px; width: 108px; height: 74px; padding: 8px 12px; }
.gnm-tk .gnm-anz .gso-banner-ad-label { left: 178px; right: auto; top: 12px; font-size: 10px; padding: 2px 9px; }
.gnm-tk .gnm-anz .gso-banner-slide-actions { grid-column: 3; grid-row: 1; align-self: stretch; align-items: flex-end; justify-content: center; padding: 30px 28px 40px 36px; }
.gnm-tk .gnm-anz .gso-banner-slide-actions:has(.gso-banner-slide-code)::before { display: none; }
.gnm-tk .gnm-anz .gso-banner-slide-code { min-width: 220px; margin: 0; }
.gnm-tk .gnm-anz .gso-banner-slide-code-value { padding: 8px 14px; font-size: 18px; }
.gnm-tk .gnm-anz .gso-banner-slide-copy { padding: 0 12px; }
.gnm-tk .gnm-anz a.gso-banner-slide-button { width: auto; min-width: 168px; height: 36px; margin-top: 12px; padding: 0 20px; font-size: 15px; }
}
/* Handy/Tablet: Originaldesign gestapelt, nur etwas enger */
@media (max-width: 860px) {
.gnm-tk .gnm-anz .gso-banner-slide-description { padding: 10px 22px 18px; font-size: 15px; }
.gnm-tk .gnm-anz .gso-banner-slide-actions { padding: 22px 22px 52px; }
}
/* 0.41.10 · „Topstory“ (Rubrikseiten) und „Im Fokus“ (All News) im Stil der Startseiten-Geschichte:
Überschrift und Kurztext im gleichen Verhältnis (58/42, Überschrift ca. 64 px fett, Kurztext ca. 25 px, höchstens 5 Zeilen).
Vorher: Überschrift bis 108 px neben einem 16-px-Text in schmaler Spalte. Nur ab 901 px; darunter unverändert. */
@media (min-width: 901px) {
.gnm-fokus__unten { grid-template-columns: minmax(0, 58fr) minmax(0, 42fr); }
.gnm-fokus__titel { font-size: clamp(36px, 3.45vw, 64px); font-weight: 700; }
.gnm-fokus__text { font-size: clamp(17px, 1.35vw, 25px); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
}
/* 0.42.1 · Challenge-Seite: Vorteile, Inhalte und Schritte als Kästchen nebeneinander */
.gnm-ch-grid { display: grid; gap: 16px; grid-template-columns: 1fr; margin: 8px 0 32px; }
.gnm-ch-grid > .gnm-ch-box { background: var(--gnm-lila-hell); border-radius: 18px; padding: 24px 24px 22px; margin: 0; }
.gnm-ch-box > :first-child { margin-top: 0; }
.gnm-ch-box > :last-child { margin-bottom: 0; }
.gnm-ch-box h3 { font-size: clamp(20px, 1.6vw, 24px); line-height: 1.2; margin: 0 0 8px; }
.gnm-ch-box p { font-size: 16px; line-height: 1.5; margin: 0; }
.gnm-ch-grid--4 { counter-reset: gnm-ch; }
.gnm-ch-grid--4 > .gnm-ch-box { background: var(--gnm-pfirsich); }
@media (min-width: 640px) {
.gnm-ch-grid--3, .gnm-ch-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
.gnm-ch-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.gnm-ch-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.gnm-ch-grid--5 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.gnm-ch-grid--5 > .gnm-ch-box { grid-column: span 2; }
.gnm-ch-grid--5 > .gnm-ch-box:nth-child(n+4) { grid-column: span 3; }
}
@media (min-width: 640px) and (max-width: 959px) {
.gnm-ch-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gnm-ch-grid--5 > .gnm-ch-box:last-child { grid-column: 1 / -1; }
}
/* 0.43.1 · Kopfzeile: Pillen immer mittig. Das Navigations-Stylesheet des Cores (.wp-block-navigation .wp-block-navigation-item__content, display:block) hatte auf Seiten, die ihr Stylesheet erst im Inhalt einhängen (z. B. Challenge), die spätere Reihenfolge und schob den Text an den oberen Rand. Höhere Spezifität macht das unabhängig von der Reihenfolge. */
.gnm-header .gnm-pills .wp-block-navigation-item__content,
.gnm-header .gnm-actions .gnm-pill a { display: inline-flex; align-items: center; height: 40px; line-height: 1; padding: 0 18px !important; box-sizing: border-box; }
.gnm-header .gnm-pills .wp-block-navigation-item__content .wp-block-navigation-item__label { display: inline; line-height: 1; }
/* 0.43.2 · Über uns: Texte vor der Mission, Team-Namen als Links, Profilfotos */
.gnm-team__p { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 16px 10px 10px; color: inherit; text-decoration: none; }
a.gnm-team__p { transition: background-color .15s ease; }
a.gnm-team__p:hover { background: var(--gnm-pfirsich, #fdeee3); }
a.gnm-team__p:hover b { text-decoration: underline; text-underline-offset: 3px; }
a.gnm-team__p:focus-visible { outline: 3px solid var(--gnm-lila, #9b6bff); outline-offset: -3px; border-radius: 999px; }
.gnm-team__p > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.gnm-team__liste img.gnm-av--foto { display: block; width: 40px; height: 40px; flex: 0 0 40px; object-fit: cover; border-radius: 50%; box-shadow: 2px 2px 0 var(--gnm-ink); background: var(--gnm-lila); }
.gnm-uu__intro { padding-block: clamp(40px, 5vw, 72px) clamp(8px, 2vw, 24px); }
.gnm-uu__intro-gitter { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); }
.gnm-uu__text { min-width: 0; padding-left: clamp(16px, 2vw, 28px); border-left: 4px solid var(--gnm-lila); }
.gnm-uu__text--b { border-left-color: var(--gnm-orange, #f5a35b); }
.gnm-uu__textkopf { margin: 0 0 18px; font-family: var(--wp--preset--font-family--newsreader); font-size: clamp(30px, 3.6vw, 46px); font-weight: 700; line-height: 1.05; letter-spacing: -.025em; text-wrap: balance; color: var(--gnm-ink); }
.gnm-uu__text p { text-wrap: pretty; max-width: 62ch; margin: 0 0 14px; font-size: 17px; line-height: 1.65; color: var(--gnm-ink); }
.gnm-uu__text p:last-child { margin-bottom: 0; }
@media (min-width: 900px) { .gnm-uu__intro-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; } }
/* 0.43.4 · FAQ aus Details-Blöcken: Listen, Zwischenüberschriften, Links */
.gnm-faq__t ul, .gnm-faq__t ol { margin: 8px 0 16px; padding: 0 0 0 1.35em; }
.gnm-faq__t ul { list-style: disc; }
.gnm-faq__t ol { list-style: decimal; }
.gnm-faq__t li { margin: 0 0 6px; padding-left: 2px; }
.gnm-faq__t li::marker { color: var(--gnm-orange); }
.gnm-faq__t li > ul, .gnm-faq__t li > ol { margin: 6px 0 4px; }
.gnm-faq__t h3, .gnm-faq__t h2 { margin: 16px 0 6px; font-family: var(--wp--preset--font-family--geist); font-size: 16px; font-weight: 700; line-height: 1.3; }
.gnm-faq__t a { color: inherit; text-decoration-color: var(--gnm-lila); text-decoration-thickness: 2px; text-underline-offset: 3px; overflow-wrap: anywhere; }
/* --------------------------------------------------------------------------
0.45.2 · Kleine Handy-Korrekturen (iPhone-Test 11.11.2026)
1) Grosse Titel brachen mitten im Wort (Wirtschaf|t, Füreinan|der, Gesundh|eit, Weltaufgan|g),
weil der Browser nicht trennt und die Schrift breiter war als die Zeile. Jetzt passt die Schrift
zur Zeilenbreite (längstes Wort ca. 5,4 em, Podcast-Titel 5,7 em; Rubrik: Breite minus Rand 32, Kreis 74, Abstand 16).
2) Podcast-Player: Tempo-Knöpfe und Datenschutz-Link hatten Standard-Blau auf Lila.
3) Mediadaten „Werbeformen“: feine Kontur um die aufklappbaren Karten.
-------------------------------------------------------------------------- */
@media (max-width: 781px) {
.gnm-rt__h1 { font-size: min(clamp(56px, 17vw, 88px), calc((100vw - 122px) / 5.4)); }
.gnm-pc__h1 { font-size: min(clamp(76px, 15vw, 230px), calc((100vw - 32px) / 5.7)); }
}
.gnm-fp__tempo button { color: var(--gnm-ink); }
.gnm-fp .gnm-fp__hinweis a { color: var(--gnm-ink); text-decoration: underline; }
.gnm-md-form { border: 1px solid rgba(36, 36, 36, .16); border-radius: 12px; padding-inline: 16px; background: rgba(255, 255, 255, .4); }
.gnm-md-form + .gnm-md-form { margin-top: 10px; }
/* --------------------------------------------------------------------------
0.45.3 · Korrekturen aus dem Android-Test (11.11.2026)
Dunkelmodus-Korrekturen stehen in gnm-dunkel.css und gnm-dunkel-auto.css (Notiz-Schein, Cover-Kontur,
GutSparen-Schrift, „Gerade gefragt“ beim Darüberfahren, Label-Abstand).
-------------------------------------------------------------------------- */
/* 53 · „GNM+ testen“: im Dunkelmodus trägt der Absatz die orange Fläche, deshalb auch dort rund */
.gnm-pill--cta { border-radius: 999px; }
/* 60 · Menü-/Suche-Symbol größer */
.gnm-burger-knopf { width: 52px; height: 52px; min-width: 52px; min-height: 52px; }
.gnm-burger-knopf svg { width: 34px; height: 34px; }
/* 63 · Kleine Karten (Liste neben dem Aufmacher) im Dunkelmodus mit Innenabstand */
html[data-gnm-theme="dark"] body.gnm-dm-ok .gnm-rs--feature .gnm-k--zeile { padding: 14px 14px 14px 16px; }
/* Über uns, Handy: Stift in derselben Zeile wie der Titel */
@media (max-width: 781px) {
.gnm-sk:has(> .gnm-uu__stift) { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; }
.gnm-sk:has(> .gnm-uu__stift) > * { grid-column: 1 / -1; }
.gnm-sk:has(> .gnm-uu__stift) > .gnm-fu-k__h1 { grid-column: 1; font-size: min(70px, calc((100vw - 100px) / 4.4)) !important; white-space: nowrap; }
.gnm-sk:has(> .gnm-uu__stift) > .gnm-uu__stift { grid-column: 2; margin: 0; width: 56px; justify-self: end; }
}
/* 0.45.5 Grosse Geschichte: Titel direkt unter dem Bild (vorher unten an die hohe Spalte gedrueckt, grosse Luecke) */
.gnm-hero .wp-block-columns > .wp-block-column { align-self: flex-start; }
/* 0.45.6 Dunkelmodus: Korrekturen 53-81 (Hover lesbar, Chips, Karten-Texte, Listen-Innenabstand, Bild-Platzhalter) */
html[data-gnm-theme="dark"] body.gnm-dm-ok :is(.gnm-rund, .gnm-nachoben, .gnm-pfeil, .gnm-gnl__form button, .gnm-knopf, .gnm-pill--cta a, .gnm-ch__knopf, .gnm-ch__chip, .gnm-kb__knopf, .gnm-wa2__btn, .wp-block-button:not(.is-style-orange) .wp-block-button__link, .gso-banner-control, .gso-banner-rotation-toggle):is(:hover, :focus-visible) { background: #ece9e2 !important; border-color: #ece9e2 !important; color: #121316 !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok .gnm-wa2__btn:is(:hover, :focus-visible) :is(svg, path) { fill: currentColor !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok :is(.gso-banner-control, .gso-banner-rotation-toggle) { color: #ece9e2 !important; border-color: rgba(236, 233, 226, .6) !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok .gso-banner-slide-button:is(:hover, :focus-visible) { background: #ece9e2 !important; border-color: #ece9e2 !important; color: #17102f !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok :is(.wp-block-social-links .wp-block-social-link-anchor, .gnm-app__toggle, .gnm-mn__zu):is(:hover, :focus-visible), html[data-gnm-theme="dark"] body.gnm-dm-ok :is(.wp-block-social-links .wp-block-social-link-anchor, .gnm-app__toggle):is(:hover, :focus-visible) span { color: #121316 !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok summary:hover span { color: #ece9e2 !important; }
html[data-gnm-theme="dark"] body.gnm-dm-ok .gnm-form__chip input:checked + span { background: #ece9e2; border-color: #ece9e2; color: #121316; }
html[data-gnm-theme="dark"] body.gnm-dm-ok a.gnm-md-zahl:is(.gnm-md-zahl--instagram, .gnm-md-zahl--facebook) span { color: rgba(255, 255, 255, .92); }
html[data-gnm-theme="dark"] body.gnm-dm-ok a.gnm-md-zahl.gnm-md-zahl--website span { color: #1a1a1f; }
html[data-gnm-theme="dark"] body.gnm-dm-ok :is(.gnm-st__karte--lila, .gnm-st__karte--pfirsich) small { color: rgba(236, 233, 226, .78); }
@media (min-width: 782px) { html[data-gnm-theme="dark"] body.gnm-dm-ok .gnm-archiv2.is-liste .gnm-a2 { padding: 16px 0 16px 18px; } }
@media (max-width: 781px) { html[data-gnm-theme="dark"] body.gnm-dm-ok .gnm-archiv2.is-liste .gnm-a2 { padding: 12px 0 12px 14px; } }
/* Bild-Platzhalter: nur wenn ein Bild nicht laedt (kaputtes img zeigt sein ::before), sonst unsichtbar */
.wp-block-post-featured-image img, .gnm-a2__bild img { position: relative; color: transparent; }
.wp-block-post-featured-image img::before, .gnm-a2__bild img::before { content: ""; position: absolute; inset: 0; background: #e6e1d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='9' fill='%23F4A261'/%3E%3C/svg%3E") center / 24% no-repeat; }
html[data-gnm-theme="dark"] .wp-block-post-featured-image img::before, html[data-gnm-theme="dark"] .gnm-a2__bild img::before { background-color: #2a2b31; }
/* 0.46.0 FAQ der Abo-Seite: Gruppen-Ueberschriften (GNM > Abo-Seite > FAQ > + Gruppe) */
.gnm-faq__gruppe { margin: 32px 0 6px; font-family: var(--wp--preset--font-family--newsreader), Georgia, serif; font-weight: 600; font-size: clamp(20px, 2vw, 26px); line-height: 1.2; color: var(--gnm-ink); }
.gnm-faq__gruppe:first-child { margin-top: 0; }