/* MES Blog – blog.mes.wien. Farben aus dem Corporate Design (MES Blau, Akzent, Dunkel, Hell, Signal), Systemschrift.
   Dunkles Schema über prefers-color-scheme oder den Knopf im Kopf (data-schema auf <html>). */

:root {
    --blau: #679cff;
    --akzent: #0055aa;
    --dunkel: #222222;
    --hell: #f5f7fb;
    --signal: #ff8a3d;

    --grund: #ffffff;
    --flaeche: var(--hell);
    --karte: #ffffff;
    --text: var(--dunkel);
    --leise: #5b6475;
    --linie: #e3e8f2;
    --link: var(--akzent);
    --ueberschrift2: var(--akzent);
    --kopf-grund: rgb(255 255 255 / .78);
    --schatten: 0 1px 2px rgb(16 24 40 / .06), 0 8px 24px -8px rgb(16 24 40 / .12);
    --schatten-hoch: 0 2px 4px rgb(16 24 40 / .06), 0 24px 48px -16px rgb(0 85 170 / .28);

    --schrift: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --mono: ui-monospace, "Cascadia Code", "SF Mono", Consolas, monospace;
    --breite: 1200px;
    --lesebreite: 70ch;
    --rund: 18px;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root:not([data-schema="hell"]) {
        --grund: #0d1220;
        --flaeche: #131a2c;
        --karte: #161e33;
        --text: #e8ecf5;
        --leise: #9aa5bd;
        --linie: #26304a;
        --link: var(--blau);
        --ueberschrift2: var(--blau);
        --kopf-grund: rgb(13 18 32 / .75);
        --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -8px rgb(0 0 0 / .5);
        --schatten-hoch: 0 2px 4px rgb(0 0 0 / .3), 0 24px 48px -16px rgb(103 156 255 / .3);
        color-scheme: dark;
    }
}

:root[data-schema="dunkel"] {
    --grund: #0d1220;
    --flaeche: #131a2c;
    --karte: #161e33;
    --text: #e8ecf5;
    --leise: #9aa5bd;
    --linie: #26304a;
    --link: var(--blau);
    --ueberschrift2: var(--blau);
    --kopf-grund: rgb(13 18 32 / .75);
    --schatten: 0 1px 2px rgb(0 0 0 / .3), 0 8px 24px -8px rgb(0 0 0 / .5);
    --schatten-hoch: 0 2px 4px rgb(0 0 0 / .3), 0 24px 48px -16px rgb(103 156 255 / .3);
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
body {
    margin: 0;
    font: 17px/1.65 var(--schrift);
    color: var(--text);
    background: var(--grund);
    -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--link); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -.02em; margin: 0 0 .5em; }
h2 { color: var(--ueberschrift2); }
::selection { background: var(--blau); color: #fff; }

.unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprungmarke { position: absolute; left: 12px; top: -60px; z-index: 100; padding: 10px 16px; background: var(--akzent); color: #fff; border-radius: 8px; }
.sprungmarke:focus { top: 12px; }

.rahmen { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.rahmen-schmal { max-width: calc(var(--lesebreite) + 48px); }

/* Lesefortschritt (nur Artikel) */
.lesefortschritt { position: fixed; inset: 0 0 auto; height: 3px; z-index: 60; pointer-events: none; }
.lesefortschritt span { display: block; height: 100%; background: linear-gradient(90deg, var(--blau), var(--akzent) 70%, var(--signal)); transform-origin: 0 50%; transform: scaleX(0); }

/* Kopf */
.kopf {
    position: sticky; top: 0; z-index: 50;
    background: var(--kopf-grund);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--linie);
}
.kopf-innen { max-width: var(--breite); margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }
.marke img { width: 40px; height: 40px; border-radius: 10px; }
.marke-name { font-weight: 800; font-size: 1.25rem; letter-spacing: -.03em; }
.marke-name::before { content: "/"; color: var(--blau); margin-right: 6px; font-weight: 400; }
.hauptmenue { display: flex; align-items: center; gap: 16px; margin-left: auto; }
.hauptmenue ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.hauptmenue a { display: block; padding: 6px 12px; border-radius: 999px; color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500; transition: background .2s, color .2s; }
.hauptmenue a:hover { background: var(--flaeche); color: var(--link); }
.hauptmenue .aktiv a { background: var(--akzent); color: #fff; }
.sprachen { display: flex; gap: 2px; font-size: .8rem; font-family: var(--mono); }
.sprachen a { padding: 4px 8px; border-radius: 6px; color: var(--leise); text-decoration: none; }
.sprachen a[aria-current] { color: var(--text); background: var(--flaeche); }
.schema-knopf, .menue-knopf {
    border: 1px solid var(--linie); background: var(--karte); color: var(--text);
    width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; cursor: pointer; flex: none;
}
.schema-knopf svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.schema-knopf .mond { display: none; }
:root[data-schema="dunkel"] .schema-knopf .sonne { display: none; }
:root[data-schema="dunkel"] .schema-knopf .mond { display: block; }
@media (prefers-color-scheme: dark) {
    :root:not([data-schema]) .schema-knopf .sonne { display: none; }
    :root:not([data-schema]) .schema-knopf .mond { display: block; }
}
.menue-knopf { display: none; margin-left: auto; }
.menue-striche, .menue-striche::before, .menue-striche::after { display: block; width: 18px; height: 2px; background: currentColor; border-radius: 2px; transition: transform .25s; }
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ""; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* Hinweise (Banner) */
.inhalt > .hinweis { max-width: var(--breite); margin: 16px auto 0; padding: 12px 20px; border-radius: 12px; background: var(--flaeche); border-left: 4px solid var(--blau); }
.hinweis p { margin: 0; }
.hinweis-wichtig { border-left-color: var(--signal) !important; }

/* Bühne (Startseite) */
.buehne { position: relative; overflow: hidden; isolation: isolate; padding: 96px 0 72px; border-bottom: 1px solid var(--linie); }
.buehne::before {
    content: ""; position: absolute; inset: 0; z-index: -2;
    background-image:
        linear-gradient(var(--linie) 1px, transparent 1px),
        linear-gradient(90deg, var(--linie) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 30% 40%, #000 30%, transparent 75%);
    opacity: .7;
}
.buehne-deko { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kreis { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; animation: schweben 18s ease-in-out infinite alternate; }
.kreis-1 { width: 420px; height: 420px; background: var(--blau); top: -120px; right: 8%; }
.kreis-2 { width: 300px; height: 300px; background: var(--akzent); bottom: -140px; right: 30%; animation-delay: -6s; opacity: .4; }
.kreis-3 { width: 180px; height: 180px; background: var(--signal); top: 30%; right: -40px; animation-delay: -12s; opacity: .35; }
@keyframes schweben {
    from { transform: translate(0, 0) scale(1); }
    to { transform: translate(-40px, 30px) scale(1.12); }
}
.buehne-innen { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.dachzeile { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 20px; padding: 6px 14px 6px 10px; border: 1px solid var(--linie); border-radius: 999px; background: var(--karte); font: 500 .8rem/1 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--signal); box-shadow: 0 0 0 4px rgb(255 138 61 / .2); }
.buehne-titel {
    font-size: clamp(2.6rem, 6.5vw, 5.2rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.02; max-width: 15ch; margin-bottom: 24px;
    background: linear-gradient(110deg, var(--text) 30%, var(--akzent) 65%, var(--blau));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
:root[data-schema="dunkel"] .buehne-titel { background-image: linear-gradient(110deg, var(--text) 35%, var(--blau) 75%, #a8c6ff); }
@media (prefers-color-scheme: dark) { :root:not([data-schema="hell"]) .buehne-titel { background-image: linear-gradient(110deg, var(--text) 35%, var(--blau) 75%, #a8c6ff); } }
.buehne-text { font-size: clamp(1.1rem, 2vw, 1.35rem); color: var(--leise); max-width: 46ch; margin: 0 0 32px; }
.rubriken { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.rubriken a {
    display: inline-block; padding: 10px 18px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem;
    color: var(--text); background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten);
    transition: transform .2s, border-color .2s, color .2s;
}
.rubriken a:hover { transform: translateY(-2px); border-color: var(--blau); color: var(--link); }
.rubriken a::before { content: "#"; color: var(--blau); margin-right: 4px; font-family: var(--mono); }

/* Seitenkopf (Standard) */
.seitenkopf { padding: 72px 0 40px; background: linear-gradient(180deg, var(--flaeche), transparent); }
.seitenkopf h1 { font-size: clamp(2.2rem, 5vw, 3.6rem); font-weight: 850; letter-spacing: -.04em; }
.seitenkopf h1::after { content: ""; display: block; width: 64px; height: 5px; margin-top: 20px; border-radius: 3px; background: linear-gradient(90deg, var(--blau), var(--signal)); }
.seitenkopf-text { font-size: 1.2rem; color: var(--leise); max-width: 60ch; margin: 0; }
.seitenkopf-text p { margin: 0 0 .6em; }

/* Rubrik- und Themenseiten */
.sammlung-art { margin: 0 0 14px; font: 500 .85rem/1.4 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--leise); }
.sammlung-art a { color: var(--link); text-decoration: none; }
.sammlung-art a:hover { text-decoration: underline; }
.sammlung-zeichen { color: var(--blau); margin-right: 6px; }
.sammlung-kopf .rubriken { margin-top: 24px; }

/* Rubrik an Artikel und Karte, Themen am Artikelende */
.artikel-rubrik { margin: 0 0 12px; }
.artikel-rubrik a, .karte-rubrik { font: 600 .78rem/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--link); text-decoration: none; }
.artikel-rubrik a:hover, .karte-rubrik:hover { text-decoration: underline; }
.karte-rubrik { position: relative; z-index: 2; }
.themen { margin-top: 8px; margin-bottom: 32px; }
.sammlung-leer { padding: 48px 0; color: var(--leise); font-size: 1.1rem; }
.blaettern { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 16px; margin: 56px 0 24px; color: var(--leise); }

/* Blöcke in Spalten */
.bloecke { display: flex; flex-wrap: wrap; gap: 0 32px; padding: 48px 0 24px; }
.block { flex: 1 1 100%; min-width: 0; margin-bottom: 32px; }
.breite-haelfte { flex-basis: calc(50% - 16px); }
.breite-drittel { flex-basis: calc(33.333% - 22px); }
.breite-zweidrittel { flex-basis: calc(66.666% - 11px); }
.breite-viertel { flex-basis: calc(25% - 24px); }
.block-text, .block-bildmittext .text { max-width: var(--lesebreite); }
.block-bildmittext { display: flex; gap: 32px; align-items: center; }
.block-bildmittext figure { margin: 0; flex: 1 1 45%; }
.block-bildmittext figure img { border-radius: var(--rund); }
.block-bildmittext .text { flex: 1 1 55%; }
.bild-rechts { flex-direction: row-reverse; }
.block-bild figure { margin: 0; }
.block-bild img { border-radius: var(--rund); }
.block-bild figcaption { font-size: .9rem; color: var(--leise); margin-top: 8px; }

.knopf, .teilen {
    display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
    font: 600 1rem/1 var(--schrift); text-decoration: none; color: #fff; background: var(--akzent);
    box-shadow: 0 6px 20px -6px rgb(0 85 170 / .6); transition: transform .2s, box-shadow .2s;
}
.knopf:hover { transform: translateY(-2px); box-shadow: 0 10px 28px -8px rgb(0 85 170 / .7); }

/* Artikelliste als Magazin */
.abschnitt-titel { font-size: 1rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--leise); display: flex; align-items: center; gap: 16px; margin-bottom: 28px; }
.abschnitt-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 28px; }
.karte {
    position: relative; display: flex; flex-direction: column; background: var(--karte); border: 1px solid var(--linie);
    border-radius: var(--rund); overflow: hidden; box-shadow: var(--schatten); transition: transform .3s cubic-bezier(.2, .7, .2, 1), box-shadow .3s, border-color .3s;
}
.karte:hover { transform: translateY(-6px); box-shadow: var(--schatten-hoch); border-color: rgb(103 156 255 / .5); }
.karte-bild { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.karte:hover .karte-bild img { transform: scale(1.05); }
.karte-zeichen {
    position: absolute; right: -0.08em; bottom: -0.28em; font-size: 9rem; font-weight: 900; line-height: 1; letter-spacing: -.06em;
    color: transparent; -webkit-text-stroke: 2px rgb(255 255 255 / .55); transition: transform .6s cubic-bezier(.2, .7, .2, 1);
}
.karte:hover .karte-zeichen { transform: translate(-8px, -6px) rotate(-4deg); }
.motiv-0 { background: radial-gradient(circle at 20% 20%, var(--blau), transparent 60%), linear-gradient(135deg, var(--akzent), #0a2a55); }
.motiv-1 { background: radial-gradient(circle at 80% 10%, var(--signal), transparent 55%), linear-gradient(135deg, var(--blau), var(--akzent)); }
.motiv-2 { background: repeating-linear-gradient(45deg, rgb(255 255 255 / .07) 0 12px, transparent 12px 24px), linear-gradient(160deg, #0a2a55, var(--akzent) 60%, var(--blau)); }
.motiv-3 { background: radial-gradient(circle at 70% 80%, var(--blau), transparent 50%), radial-gradient(circle at 10% 90%, var(--signal), transparent 40%), linear-gradient(200deg, var(--dunkel), #0a2a55); }
.karte-text { display: flex; flex-direction: column; flex: 1; padding: 22px 24px 24px; }
.karte-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; font: .78rem/1.4 var(--mono); color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.abzeichen { padding: 3px 8px; border-radius: 6px; background: var(--signal); color: var(--dunkel); font-weight: 700; }
.karte-titel { font-size: 1.3rem; font-weight: 750; margin: 0 0 10px; }
.karte-titel a { color: var(--text); text-decoration: none; }
.karte-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: var(--rund); }
.karte-titel a:focus-visible { outline: none; }
.karte:focus-within { outline: 3px solid var(--blau); outline-offset: 3px; }
.karte-teaser { margin: 0 0 18px; color: var(--leise); font-size: .98rem; }
.karte-weiter { margin: auto 0 0; font-weight: 600; color: var(--link); font-size: .95rem; }
.pfeil { display: inline-block; transition: transform .25s; }
.karte:hover .pfeil { transform: translateX(5px); }

.karte-gross { grid-column: 1 / -1; display: grid; grid-template-columns: 1.4fr 1fr; }
.karte-gross .karte-bild { aspect-ratio: auto; min-height: 380px; }
.karte-gross .karte-zeichen { font-size: 18rem; }
.karte-gross .karte-text { padding: 40px; justify-content: center; }
.karte-gross .karte-titel { font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 850; letter-spacing: -.035em; }
.karte-gross .karte-teaser { font-size: 1.1rem; }

/* Artikel */
.artikel-kopf { padding: 64px 0 40px; text-align: left; }
.artikel-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 24px; font: .82rem/1.4 var(--mono); color: var(--leise); text-transform: uppercase; letter-spacing: .03em; }
.zurueck { color: var(--link); text-decoration: none; font-weight: 600; }
.artikel-titel { font-size: clamp(2.2rem, 5.5vw, 4rem); font-weight: 850; letter-spacing: -.045em; line-height: 1.05; margin-bottom: 24px; }
.artikel-lead { font-size: clamp(1.15rem, 2.2vw, 1.4rem); line-height: 1.5; color: var(--leise); margin: 0; }
.artikel-bild { margin: 0 auto 56px; }
.artikel-bild img { width: 100%; border-radius: calc(var(--rund) + 6px); box-shadow: var(--schatten-hoch); }
.artikel-band { height: 14px; margin: 0 auto 56px; padding: 0; border-radius: 999px; max-width: calc(var(--breite) - 48px); }
.artikel-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, var(--lesebreite)) minmax(0, 1fr); gap: 48px; }
.artikel-raster .prosa { grid-column: 2; }
.toc { grid-column: 1; grid-row: 1; justify-self: end; width: 100%; max-width: 240px; }
.toc:not([hidden]) { display: block; position: sticky; top: 100px; align-self: start; }
.toc-titel { font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--leise); margin: 0 0 14px; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--linie); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -2px; border-left: 2px solid transparent; color: var(--leise); text-decoration: none; font-size: .9rem; line-height: 1.35; }
.toc a:hover { color: var(--text); }
.toc a.aktiv { color: var(--link); border-left-color: var(--blau); font-weight: 600; }

.prosa { font-size: 1.12rem; line-height: 1.75; }
.prosa > :first-child { margin-top: 0; }
.prosa > p:first-of-type::first-letter { float: left; font-size: 3.6em; line-height: .9; font-weight: 850; margin: .06em .1em 0 0; color: var(--akzent); }
:root[data-schema="dunkel"] .prosa > p:first-of-type::first-letter { color: var(--blau); }
.prosa h2 { font-size: 1.75rem; margin: 2.2em 0 .6em; }
.prosa h3 { font-size: 1.3rem; margin: 1.8em 0 .5em; }
.prosa ul, .prosa ol { padding-left: 1.3em; }
.prosa li { margin: .35em 0; }
.prosa li::marker { color: var(--blau); }
.prosa blockquote { margin: 2em 0; padding: 20px 28px; border-left: 4px solid var(--signal); background: var(--flaeche); border-radius: 0 14px 14px 0; font-size: 1.15rem; }
.prosa blockquote p { margin: 0; }
.prosa code { font-family: var(--mono); font-size: .88em; padding: .15em .4em; border-radius: 6px; background: var(--flaeche); border: 1px solid var(--linie); }
.prosa pre { padding: 20px 24px; border-radius: 14px; background: #0d1220; color: #e8ecf5; overflow-x: auto; font-size: .92rem; line-height: 1.6; }
.prosa pre code { background: none; border: 0; padding: 0; color: inherit; }
.prosa table { width: 100%; border-collapse: collapse; margin: 2em 0; font-size: .98rem; }
.prosa th, .prosa td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--linie); }
.prosa th { font-weight: 700; background: var(--flaeche); }
.prosa img { border-radius: 14px; margin: 2em 0; }
.prosa hr { border: 0; height: 1px; background: var(--linie); margin: 3em 0; }
.artikel-fuss { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; padding-top: 32px; padding-bottom: 80px; margin-top: 48px; border-top: 1px solid var(--linie); }
.teilen { background: var(--karte); color: var(--text); border: 1px solid var(--linie); box-shadow: none; }

/* 404 */
.nicht-gefunden { padding: 96px 24px; text-align: center; }
.nicht-gefunden-code {
    font-size: clamp(7rem, 22vw, 14rem); font-weight: 900; line-height: 1; letter-spacing: -.06em; margin: 0 0 8px;
    background: linear-gradient(120deg, var(--blau), var(--akzent) 60%, var(--signal)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.nicht-gefunden p { color: var(--leise); max-width: 50ch; margin: 0 auto 24px; }

/* Fuß */
.fuss { margin-top: 80px; background: #0a0f1c; color: #c3cbdc; }
.fuss a { color: #fff; text-decoration: none; }
.fuss a:hover { color: var(--blau); }
.fuss-innen { max-width: var(--breite); margin: 0 auto; padding: 64px 24px 40px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
.fuss-titel {
    font-size: clamp(2rem, 4vw, 3rem); font-weight: 850; letter-spacing: -.04em; line-height: 1.05; margin: 0 0 16px;
    background: linear-gradient(110deg, #fff 40%, var(--blau)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.fuss-marke p { max-width: 44ch; }
.fuss-link { font-weight: 600; }
.fuss-ueberschrift { font: 600 .75rem/1 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: #8390ab; margin: 6px 0 16px; }
.fuss ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.fuss-zeile { max-width: var(--breite); margin: 0 auto; padding: 20px 24px 32px; border-top: 1px solid #1f2840; font: .8rem/1.4 var(--mono); color: #8390ab; }

/* Schmale Bildschirme */
@media (max-width: 960px) {
    .artikel-raster { grid-template-columns: minmax(0, 1fr); }
    .artikel-raster .prosa { grid-column: 1; }
    .toc:not([hidden]) { position: static; grid-row: auto; max-width: none; padding: 20px; background: var(--flaeche); border-radius: 14px; }
    .karte-gross { grid-template-columns: 1fr; }
    .karte-gross .karte-bild { min-height: 0; aspect-ratio: 16 / 9; }
    .karte-gross .karte-text { padding: 24px; }
    .fuss-innen { grid-template-columns: 1fr 1fr; }
    .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 820px) {
    .menue-knopf { display: grid; }
    .hauptmenue {
        position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch;
        padding: 12px 24px 20px; background: var(--grund); border-bottom: 1px solid var(--linie); box-shadow: var(--schatten);
    }
    .hauptmenue.offen { display: flex; }
    .hauptmenue ul { flex-direction: column; }
    .hauptmenue a { padding: 12px 14px; border-radius: 12px; font-size: 1.05rem; }
    .kopf-innen { gap: 12px; }
}
@media (max-width: 768px) {
    body { font-size: 16px; }
    .rahmen, .kopf-innen, .buehne-innen { padding-left: 16px; padding-right: 16px; }
    .buehne { padding: 64px 0 48px; }
    .kreis-1 { width: 260px; height: 260px; right: -60px; }
    .breite-haelfte, .breite-drittel, .breite-zweidrittel, .breite-viertel { flex-basis: 100%; }
    .block-bildmittext, .bild-rechts { flex-direction: column; align-items: stretch; }
    .karten { grid-template-columns: 1fr; gap: 20px; }
    .artikel-kopf { padding-top: 40px; }
    .prosa { font-size: 1.05rem; }
    .fuss-innen { grid-template-columns: 1fr; gap: 32px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    html { scroll-behavior: auto; }
}
@media print {
    .kopf, .fuss, .toc, .artikel-fuss, .lesefortschritt, .buehne-deko { display: none !important; }
    body { color: #000; background: #fff; }
}

/* Autor: Porträt auf der Startseite, Autorbox unter Artikeln (YouTube-Kanal „Klugscheißen mit Stefan“) */
.buehne-innen { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 48px; }
.portraet { position: relative; margin: 0; width: 300px; text-align: center; }
.portraet img {
    width: 280px; height: 280px; margin: 0 auto; border-radius: 50%; object-fit: cover; background: #fff;
    border: 6px solid var(--karte); box-shadow: 0 0 0 2px var(--blau), var(--schatten-hoch);
    transition: transform .4s cubic-bezier(.2, .7, .2, 1);
}
.portraet:hover img { transform: rotate(-3deg) scale(1.03); }
.portraet-blase {
    position: absolute; top: 4px; left: -64px; z-index: 1; max-width: 190px; padding: 10px 16px; border-radius: 18px 18px 4px 18px;
    background: var(--signal); color: var(--dunkel); font-weight: 700; font-size: .95rem; line-height: 1.3; text-align: left;
    box-shadow: var(--schatten); animation: wippen 4s ease-in-out infinite;
}
@keyframes wippen { 50% { transform: translateY(-6px) rotate(-2deg); } }
.portraet figcaption { display: grid; gap: 2px; margin-top: 18px; }
.portraet figcaption a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 800; font-size: 1.1rem; color: var(--text); text-decoration: none; }
.portraet figcaption a:hover { color: var(--link); }
.portraet figcaption span:last-child { font: .78rem/1.4 var(--mono); color: var(--leise); text-transform: uppercase; letter-spacing: .04em; }
.yt { display: inline-block; flex: none; width: 26px; height: 18px; border-radius: 5px; background: #ff0033; position: relative; }
.yt::after { content: ""; position: absolute; left: 10px; top: 5px; border-style: solid; border-width: 4px 0 4px 7px; border-color: transparent transparent transparent #fff; }

.autor { margin-top: 64px; }
.autor-karte {
    display: flex; gap: 24px; align-items: flex-start; padding: 28px; border-radius: var(--rund);
    background: linear-gradient(135deg, var(--flaeche), var(--karte)); border: 1px solid var(--linie);
}
.autor-karte img { width: 96px; height: 96px; flex: none; border-radius: 50%; background: #fff; border: 3px solid var(--karte); box-shadow: 0 0 0 2px var(--blau); }
.autor-karte p { margin: 0; }
.autor-titel { font: .75rem/1.4 var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--leise); }
.autor-name { font-size: 1.3rem; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 8px !important; }
.autor-text { color: var(--leise); margin-bottom: 14px !important; }
.autor-kanal { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; text-decoration: none; }
.artikel-fuss { margin-top: 32px; }

@media (max-width: 960px) {
    .buehne-innen { grid-template-columns: 1fr; }
    .portraet { justify-self: center; order: -1; width: auto; }
    .portraet img { width: 200px; height: 200px; }
    .portraet-blase { left: auto; right: calc(50% + 60px); top: -6px; }
}
@media (max-width: 560px) {
    .portraet-blase { right: auto; left: 0; top: -14px; font-size: .85rem; }
    .autor-karte { flex-direction: column; padding: 22px; }
}