/* mynotsoperfectlife - Gestaltung nach dem früheren WordPress-Theme „Ashe“, ohne fremden Code.
   Farben als Variablen, dunkles Design über prefers-color-scheme oder html[data-theme]. */

/* Handschrift nur für „not so perfect“ im Seitentitel (site_title_html) */
@font-face { font-family: "Caveat"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url(../fonts/caveat-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/open-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: normal; font-weight: 300 800; font-display: swap;
  src: url(../fonts/open-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url(../fonts/open-sans-latin-wght-italic.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Open Sans"; font-style: italic; font-weight: 300 800; font-display: swap;
  src: url(../fonts/open-sans-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-display-latin-wght-normal.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Playfair Display"; font-style: normal; font-weight: 400 900; font-display: swap;
  src: url(../fonts/playfair-display-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #f6f6f6;
  --text: #3f3f3f;
  --heading: #111111;
  --muted: #6b6b6b;          /* Datum, Zähler (4.9:1 statt früher #a1a1a1) */
  --accent: #ca9b52;         /* Gold des alten Themes: Linien, Flächen, Hover */
  --accent-text: #8a5f1d;    /* Gold als Schrift/Link: mindestens 4.5:1 auf Weiß */
  --on-accent: #111111;
  --border: #e6e6e6;
  --error: #b3261e;          /* Fehlertext und -rahmen: 6.5:1 auf Weiß */
  --overlay: rgb(0 0 0 / .6);
  /* Kopfbild: in der Mitte (hinter dem Titel) dunkler, zu den Rändern heller - Titel lesbar, Bild bleibt sichtbar */
  --hero-shade: radial-gradient(ellipse 70% 75% at 50% 50%, rgb(0 0 0 / .52), rgb(0 0 0 / .22) 100%);
  --font-body: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-head: "Playfair Display", Georgia, "Times New Roman", serif;
  --content: 46rem;
  --wide: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --radius: 2px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #16181b; --surface: #1e2125; --text: #d2d2d2; --heading: #f3f3f3; --muted: #a3a3a3;
    --accent: #d4a961; --accent-text: #e2bb78; --on-accent: #16181b; --border: #2e3237; --overlay: rgb(0 0 0 / .8);
    --hero-shade: radial-gradient(ellipse 70% 75% at 50% 50%, rgb(0 0 0 / .6), rgb(0 0 0 / .35) 100%);
    --error: #ff8a80;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #16181b; --surface: #1e2125; --text: #d2d2d2; --heading: #f3f3f3; --muted: #a3a3a3;
  --accent: #d4a961; --accent-text: #e2bb78; --on-accent: #16181b; --border: #2e3237; --overlay: rgb(0 0 0 / .8);
  --hero-shade: radial-gradient(ellipse 70% 75% at 50% 50%, rgb(0 0 0 / .6), rgb(0 0 0 / .35) 100%);
  --error: #ff8a80;
}

/* Farbschema Flieder (Admin → Einstellungen): nur die Akzentfarben und eine leicht violette Fläche.
   Kontraste wie bei Gold: --accent-text mindestens 4.5:1 zur Seite, Schrift auf --accent mindestens 7:1.
   Die dunklen Varianten sind spezifischer als die helle, damit sie in jeder Reihenfolge gewinnen. */
:root[data-palette="lilac"] { --accent: #b39ddb; --accent-text: #6a4c9c; --surface: #f6f4f9; --border: #e7e2ee; }
@media (prefers-color-scheme: dark) {
  :root[data-palette="lilac"]:not([data-theme="light"]) { --accent: #c5b3e6; --accent-text: #cdb9f0; --surface: #1f1d25; --border: #34303d; }
}
:root[data-palette="lilac"][data-theme="dark"] { --accent: #c5b3e6; --accent-text: #cdb9f0; --surface: #1f1d25; --border: #34303d; }

/* --- Grundlagen ------------------------------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 5rem; }
/* breite Bildschirme: Grundschrift größer (in %, damit die Einstellung im Browser zählt); alle Breiten sind in rem,
   Textspalte, Menü und Fußzeile wachsen also mit, die Zeilenlänge bleibt gleich */
@media (width >= 87.5rem) { html { font-size: 106.25%; } }  /* ab 1400 px: 17 px */
@media (width >= 112.5rem) { html { font-size: 112.5%; } }  /* ab 1800 px: 18 px */
body { margin: 0; background: var(--bg); color: var(--text); font: 400 1rem/1.75 var(--font-body); overflow-wrap: break-word; }
img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: contents; } /* AVIF mit WebP-Rückfall (image_html): das <img> darin verhält sich wie ohne <picture> */
a { color: var(--accent-text); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--heading); }
:focus-visible { outline: 2px solid var(--accent-text); outline-offset: 2px; }
[hidden] { display: none !important; } /* sonst würden display-Regeln (z. B. .nav-icon) verborgene Knöpfe wieder zeigen */
/* Fokus auf dunklem Grund (Kopfbild, Bildansicht): weiß mit dunklem Hof, auf jedem Bild sichtbar */
.site-hero :focus-visible, .lightbox-dialog :focus-visible { outline-color: #fff; box-shadow: 0 0 0 5px rgb(0 0 0 / .55); }
h1, h2, h3, h4 { font-family: var(--font-head); font-weight: 400; color: var(--heading); line-height: 1.25; margin: 1.6em 0 .6em; }
p, ul, ol, figure, blockquote { margin: 0 0 1.25em; }
hr { border: 0; border-top: 1px solid var(--border); width: 80%; margin: 2.5rem auto; }
button { font: inherit; color: inherit; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
.icon-sm { width: 1rem; height: 1rem; }
.skip-link { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: .75rem 1rem; background: var(--heading); color: var(--bg); }
.skip-link:focus { top: 1rem; }

/* --- Kopf: Bild mit Seitentitel, darunter die Navigation ------------------------------------------------------- */
.site-hero { position: relative; display: grid; place-items: center; min-height: clamp(13rem, 30vw, 26rem); overflow: hidden; background: #333; }
.site-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* unscharfe Mini-Vorschau unter dem Kopfbild (Media::placeholder), bis das echte Bild geladen ist; Rand durch scale verdeckt */
.site-hero-lqip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(16px); scale: 1.1; }
.site-hero::after { content: ""; position: absolute; inset: 0; background: var(--hero-shade); }
/* so breit wie die Menüzeile (--wide abzüglich Rand): der Titel füllt diese Breite genau aus */
.site-branding { position: relative; z-index: 1; width: min(100%, var(--wide)); text-align: center; padding: 2rem var(--gutter); color: #fff;
  container-type: inline-size; }
/* Titel: Überschriftenschrift, „not so perfect“ in warmem Gold als Handschrift - das Unperfekte steckt im Namen */
.site-title { margin: 0; font: 500 clamp(2rem, 6.2vw, 5rem)/1.1 var(--font-head); letter-spacing: 0; }
.title-hand { font: 600 1.12em/1 "Caveat", cursive; color: #ffdea0; }
/* Einpassen: Schriftgröße = Containerbreite / --title-k (Breite des Titels in em; site.js misst nach dem Laden der Schrift nach) */
@supports (width: 1cqi) { .site-title { font-size: calc(100cqi / var(--title-k, 8.533)); white-space: nowrap; } }
/* Schatten in zwei Stufen: weicher Hof gegen helle Flächen, enger Schatten für scharfe Kanten */
.site-title a { position: relative; display: inline-block; color: #fff; text-decoration: none;
  text-shadow: 0 2px 4px rgb(0 0 0 / .45), 0 0 24px rgb(0 0 0 / .45); }
/* Eintippen beim Betreten der Website, alles bleibt Text: theme.js setzt .hero-intro (zuerst steht nur „My life“),
   site.js setzt .hero-go, sobald Kopfbild und Schrift da sind; ein feiner goldener Cursor blendet sanft genau in der Mitte
   zwischen „My“ und „life“ ein, dann erscheinen die Buchstaben von „not so perfect“ einzeln (Schriftgröße 0 -> normal),
   leicht unregelmäßig wie beim Tippen; der Cursor wandert mit (er steht am Ende von .title-hand) und blendet danach aus.
   Rückfall ohne .hero-go (Skript fehlt): nach 4 s steht alles da. Ohne .hero-intro steht der Titel sofort ganz da. */
.hero-intro .tl, .hero-intro .tl-gap { font-size: 0; animation: tl-in 0s 4s forwards; }
.hero-intro .site-description { opacity: 0; animation: hero-rise 1.5s ease-out 4s forwards; }
.hero-go .tl { animation: tl-in 0s linear var(--tl-d, 2s) forwards; }
.hero-go .tl-gap { animation: tl-in 0s linear 2s forwards; } /* Leerzeichen vor „life“ kommt mit dem ersten Buchstaben */
.title-hand::after { content: ""; display: inline-block; width: 0; height: .7em; margin-right: -.04em; vertical-align: -.02em;
  border-left: .04em solid #ffdea0; border-radius: 1px; opacity: 0; }
.hero-go .title-hand::after { animation: caret 5s linear forwards; }
.hero-go .tl:nth-child(1) { --tl-d: 2.00s; }
.hero-go .tl:nth-child(2) { --tl-d: 2.16s; }
.hero-go .tl:nth-child(3) { --tl-d: 2.30s; }
.hero-go .tl:nth-child(4) { --tl-d: 2.52s; }
.hero-go .tl:nth-child(5) { --tl-d: 2.70s; }
.hero-go .tl:nth-child(6) { --tl-d: 2.84s; }
.hero-go .tl:nth-child(7) { --tl-d: 3.06s; }
.hero-go .tl:nth-child(8) { --tl-d: 3.22s; }
.hero-go .tl:nth-child(9) { --tl-d: 3.36s; }
.hero-go .tl:nth-child(10) { --tl-d: 3.50s; }
.hero-go .tl:nth-child(11) { --tl-d: 3.66s; }
.hero-go .tl:nth-child(12) { --tl-d: 3.80s; }
.hero-go .tl:nth-child(13) { --tl-d: 3.94s; }
.hero-go .tl:nth-child(14) { --tl-d: 4.12s; }
.hero-go .site-description { animation: hero-rise 2.2s ease-out 5.8s forwards; }
@keyframes tl-in { to { font-size: 1em; } }
/* ab 0,6 s sanft ein (bis 1,4 s), bis zum ersten Buchstaben (2 s) mittig in der Lücke (-.13em: halbes Leerzeichen,
   gemessen), beim Tippen ruhig am Wortende, ab 4,4 s aus (Prozent von 5 s) */
@keyframes caret {
  0%, 12% { opacity: 0; translate: -.13em 0; }
  28%, 39.2% { opacity: 1; translate: -.13em 0; }
  40%, 88% { opacity: 1; translate: 0 0; }
  98%, 100% { opacity: 0; translate: 0 0; }
}
@keyframes hero-rise { from { opacity: 0; translate: 0 .4rem; } to { opacity: 1; translate: 0 0; } }
.site-description { display: inline-block; margin: .9rem 0 0; padding: .3rem .9rem; border-radius: 999px; background: rgb(0 0 0 / .35);
  font-size: clamp(.875rem, 1.5vw, 1.0625rem); font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 3px rgb(0 0 0 / .6); }

.main-nav { position: sticky; top: 0; z-index: 20; background: var(--bg); border-block: 1px solid var(--border); box-shadow: 0 1px 6px rgb(0 0 0 / .04); }
.main-nav-inner { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gutter); min-height: 3.75rem; display: flex; align-items: center; gap: 1rem; }
/* Menü links, Werkzeuge rechts - beide bündig mit der breiten Ebene (Kacheln, Fußzeile) */
.main-nav .menu { flex: 1; display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0 2rem; list-style: none; margin: 0; padding: 0; }
.menu > li > a, .sub-toggle { display: inline-flex; align-items: center; gap: .35rem; min-height: 3.75rem; color: var(--heading); text-decoration: none;
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; }
.menu a:hover, .menu a[aria-current="page"], .sub-toggle:hover { color: var(--accent-text); }
.icon-ext { width: .75rem; height: .75rem; margin-left: -.1rem; } /* Pfeil hinter „Instagram“: öffnet in neuem Tab */
.has-sub { position: relative; }
.sub-menu { position: absolute; left: 50%; top: 100%; translate: -50% 0; min-width: 13rem; list-style: none; margin: 0; padding: .5rem 0;
  background: var(--bg); border: 1px solid var(--border); box-shadow: 0 6px 20px rgb(0 0 0 / .08); display: none; z-index: 5; }
.has-sub.open > .sub-menu, .has-sub:focus-within > .sub-menu { display: block; }
@media (hover: hover) { .has-sub:hover > .sub-menu { display: block; } }
.sub-menu a { display: block; padding: .55rem 1.25rem; color: var(--heading); text-decoration: none; font-size: .875rem; }
.sub-menu .sub-child a { padding-left: 2.25rem; }
.nav-tools { display: flex; align-items: center; gap: .25rem; }
.nav-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; background: none; border: 0; color: var(--heading); cursor: pointer; border-radius: 50%; }
.nav-icon:hover { color: var(--accent-text); }
/* Sprachwahl DE | HU: Schrift wie das Menü, aktuelle Sprache in Gold und unterstrichen (nicht nur über die Farbe) */
.lang-seg { display: inline-flex; align-items: center; margin-right: .35rem; }
.lang-opt { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-width: 2.75rem; height: 2.75rem; padding: 0 .55rem;
  font-size: .75rem; font-weight: 600; letter-spacing: .1em; color: var(--muted); text-decoration: none; transition: color .2s; }
.lang-opt + .lang-opt::before { content: ""; position: absolute; left: 0; top: 50%; translate: 0 -50%; width: 1px; height: 1rem; background: var(--border); }
a.lang-opt:hover { color: var(--heading); }
.lang-opt.is-current { color: var(--accent-text); }
.lang-opt.is-current::after { content: ""; position: absolute; left: .55rem; right: .55rem; bottom: .55rem; height: 2px; background: var(--accent-text); }
/* Hell/Dunkel: Schiebeschalter mit Sonne/Mond, der Knopf (Seitenhintergrund, Symbol in Gold) gleitet zur gewählten Seite */
.theme-toggle { display: inline-grid; place-items: center; min-width: 3.75rem; height: 2.75rem; padding: 0 .25rem; border: 0; background: none; cursor: pointer; border-radius: 999px; }
.theme-track { position: relative; display: block; width: 3.4rem; height: 1.85rem; border-radius: 999px; background: var(--surface);
  border: 1px solid var(--border); transition: background .3s, border-color .3s; }
.theme-ico { position: absolute; top: 50%; translate: 0 -50%; width: .95rem; height: .95rem; color: var(--muted); }
.theme-ico-sun { left: .4rem; } .theme-ico-moon { right: .4rem; }
.theme-knob { position: absolute; top: 2px; left: 2px; display: grid; place-items: center; width: calc(1.85rem - 6px); height: calc(1.85rem - 6px);
  border-radius: 50%; background: var(--bg); color: var(--accent-text); box-shadow: 0 0 0 1px var(--muted), 0 1px 3px rgb(0 0 0 / .15);
  transition: transform .3s cubic-bezier(.4, .2, .2, 1), background .3s; }
.theme-knob .icon { width: .9rem; height: .9rem; }
.knob-moon, [data-theme="dark"] .knob-sun { display: none; }
[data-theme="dark"] .knob-moon { display: block; }
[data-theme="dark"] .theme-knob { transform: translateX(1.55rem); }
.theme-toggle:hover .theme-track { border-color: var(--accent); }
.theme-toggle:focus-visible { outline: none; }
.theme-toggle:focus-visible .theme-track { outline: 2px solid var(--accent-text); outline-offset: 2px; }
@media (max-width: 26rem) { .lang-opt { min-width: 2.1rem; padding: 0 .4rem; } .lang-opt.is-current::after { left: .4rem; right: .4rem; } .theme-toggle { min-width: 3.5rem; } }
/* breit: Kopfmenü; schmal: Menüknopf mit demselben Inhalt (render_drawer) - nie beides */
@media (max-width: 60rem) { .js .main-nav .menu { display: none; } .main-nav-inner { justify-content: space-between; } }
html:not(.js) .drawer-open, html:not(.js) .search-open, html:not(.js) .search-item { display: none; } /* ohne Skript gehen Dialoge nicht */
@media (width > 60rem) { .main-nav .drawer-open { display: none; } }

/* --- Inhalt --------------------------------------------------------------------------------------------------- */
.main-content { display: block; max-width: var(--wide); margin: 0 auto; padding: clamp(2rem, 5vw, 3.5rem) var(--gutter) 4rem; outline: none; }
/* alles im Inhaltsbereich auf Textbreite, auch die Kacheln (Empfehlungen, Neueste Beiträge auf der Startseite) */
.post, .page, .archive-header, .post-list, .post-nav, .related-posts, .comments, .subscribe-box, .pagination { max-width: var(--content); margin-inline: auto; }
.post-header { text-align: center; margin-bottom: 2rem; }
.post-categories { margin: 0 0 .5rem; font-size: .75rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.post-categories a { color: var(--accent-text); text-decoration: none; }
.post-title { margin: 0; font-size: clamp(1.75rem, 4vw, 2.25rem); letter-spacing: .01em; }
.post-title a { color: inherit; text-decoration: none; }
.post-title a:hover { color: var(--accent-text); }
.post-meta { margin-top: .6rem; font-family: var(--font-head); color: var(--muted); }
.post-meta-full { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; row-gap: .4rem; }
.meta-group { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; }
.meta-actions::before { content: "·" / ""; margin: 0 .5rem; }
@media (max-width: 40rem) {
  .meta-actions { flex-basis: 100%; }
  .meta-actions::before { display: none; }
}
.post-content { font-size: 1.0625rem; }
/* schmale Bildschirme: lange (v. a. ungarische) Wörter trennen statt überlaufen lassen */
@media (max-width: 37.5rem) { .post-content, .post-title, .archive-title, .comment p { hyphens: auto; -webkit-hyphens: auto; } }
.post-content > :first-child { margin-top: 0; }
.post-content h2 { font-size: 1.6rem; } .post-content h3 { font-size: 1.35rem; } .post-content h4 { font-size: 1.15rem; }
.dropcap > p:first-of-type::first-letter { float: left; font: 400 4.6em/.8 var(--font-head); color: var(--heading); margin: .08em .12em 0 0; }
blockquote { border-left: 3px solid var(--accent); padding: .25rem 0 .25rem 1.25rem; font-family: var(--font-head); font-size: 1.2rem; color: var(--heading); }
blockquote footer { font: .875rem var(--font-body); color: var(--muted); margin-top: .5rem; }
mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; }

.figure a { display: block; }
.figure img { margin-inline: auto; }
.figure figcaption, .gallery figcaption, .video figcaption { font-size: .8125rem; color: var(--muted); text-align: center; margin-top: .5rem; }
/* Bildunterschrift im Beitrag: als Leiste direkt am Bild (Fläche, Goldlinie, kursiv), klar vom Fließtext abgesetzt */
.figure figcaption, .video figcaption { margin-top: 0; padding: .55rem 1rem .6rem; background: var(--surface); border-bottom: 2px solid var(--accent);
  color: var(--text); font-style: italic; line-height: 1.5; }
/* --float-extra setzt site.js: ragt der Absatz daneben nur ein, zwei Zeilen unter das Bild, läuft er ganz daneben */
.align-left { float: left; margin: .35rem 1.75rem calc(1rem + var(--float-extra, 0px)) 0; max-width: 50%; }
.align-right { float: right; margin: .35rem 0 calc(1rem + var(--float-extra, 0px)) 1.75rem; max-width: 50%; }
.post-content p { text-wrap: pretty; } /* keine einzelnen Wörter in der letzten Zeile (Browser ohne Unterstützung: wie bisher) */
.align-left.size-medium, .align-right.size-medium { width: 18.75rem; }
.align-center { clear: both; }
.post-content::after { content: ""; display: table; clear: both; }
@media (max-width: 37.5rem) {
  .align-left, .align-right { float: none; max-width: 100%; width: auto !important; margin: 0 0 1.25rem; }
}

/* Galerie als Karussell: Nachbarbilder angeschnitten und abgedunkelt, Scroll-Snap (Wischen), Steuerung per site.js */
.gallery { clear: both; margin: 2rem 0 2.25rem; }
.gallery-viewport { position: relative; }
.gallery-track { display: flex; gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  list-style: none; margin: 0; padding: 0; overscroll-behavior-x: contain; }
.gallery.js .gallery-track { scrollbar-width: none; }
.gallery.js .gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { flex: 0 0 82%; scroll-snap-align: center; transition: opacity .5s ease, transform .5s ease; }
.gallery.js .gallery-slide { opacity: .45; transform: scale(.94); }
.gallery.js .gallery-slide.is-active { opacity: 1; transform: none; }
.gallery-slide:first-child { margin-left: 9%; } .gallery-slide:last-child { margin-right: 9%; }
.gallery-slide figure { position: relative; margin: 0; border-radius: var(--radius); overflow: hidden; background: #111; }
.gallery-slide a { display: block; position: relative; }
/* Fokus als Ebene über dem Bild: außen schneiden Figur (overflow) und Laufleiste ab, und das vergrößerte Bild (transform)
   läge über einem outline; dunkler und weißer Ring nach innen, sichtbar auf jedem Bild */
.gallery-slide a:focus-visible { outline: none; }
.gallery-slide a:focus-visible::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  box-shadow: inset 0 0 0 3px #111, inset 0 0 0 6px #fff; }
.gallery-slide img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; transition: transform 6s ease; }
.gallery-slide.is-active img { transform: scale(1.03); }
.gallery-slide figcaption { position: absolute; inset: auto 0 0; margin: 0; padding: 2rem 1rem .75rem; color: #fff; text-align: left;
  font-size: .875rem; background: linear-gradient(rgb(0 0 0 / 0), rgb(0 0 0 / .6) 1.4rem, rgb(0 0 0 / .8)); } /* Schrift mind. 4.5:1 */
.gallery-arrow { position: absolute; top: 50%; translate: 0 -50%; z-index: 2; display: grid; place-items: center; width: 3rem; height: 3rem;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: #111; cursor: pointer; box-shadow: 0 2px 10px rgb(0 0 0 / .25);
  transition: background .2s, transform .2s; }
.gallery-arrow:hover { background: var(--accent); transform: scale(1.06); }
.gallery-prev { left: .25rem; } .gallery-next { right: .25rem; }
.gallery-controls { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: .9rem; }
.gallery-controls[hidden], .gallery-arrow[hidden] { display: none; }
.gallery-play { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--border); border-radius: 50%;
  background: none; color: var(--heading); cursor: pointer; }
.gallery-play .icon-play, .gallery-play[aria-pressed="false"] .icon-pause { display: none; }
.gallery-play[aria-pressed="false"] .icon-play { display: block; }
/* Kurzvideo statt GIF (gif_video_html): wie ein Bild, Knopf zum Anhalten unten links auf dem Video */
.gif-video { position: relative; }
.gif-video video { display: block; width: 100%; height: auto; margin-inline: auto; background: #111; }
.gallery-slide .gif-video video { aspect-ratio: 3 / 2; object-fit: cover; }
.gif-video-toggle { position: absolute; left: .6rem; bottom: .6rem; z-index: 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / .9); color: #111; cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / .3); }
.gif-video-toggle .icon-play, .gif-video-toggle[aria-pressed="false"] .icon-pause { display: none; }
.gif-video-toggle[aria-pressed="false"] .icon-play { display: block; }
.gallery-slide figcaption ~ .gif-video-toggle, .gallery-slide:has(figcaption) .gif-video-toggle { bottom: 2.6rem; }
.gallery-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: .1rem; max-width: 70%; }
.gallery-dots button { width: 1.75rem; height: 1.75rem; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.gallery-dots button::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: var(--border);
  box-shadow: inset 0 0 0 1px var(--muted); transition: background .3s, transform .3s; }
.gallery-dots button[aria-current="true"]::before { background: var(--accent-text); box-shadow: none; transform: scale(1.35); }
.gallery-count { font-size: .8125rem; color: var(--muted); min-width: 3.5rem; text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 37.5rem) {
  .gallery-slide { flex-basis: 88%; } .gallery-slide:first-child { margin-left: 6%; } .gallery-slide:last-child { margin-right: 6%; }
  .gallery-arrow { width: 2.5rem; height: 2.5rem; }
}

.video-facade { position: relative; aspect-ratio: 16 / 9; display: grid; place-content: center; gap: .5rem; text-align: center;
  background: var(--surface); border: 1px solid var(--border); padding: 1rem; }
.video-play { display: inline-flex; align-items: center; gap: .6rem; font-weight: 600; color: var(--heading); text-decoration: none; }
.video-play .icon { width: 3rem; height: 3rem; color: var(--accent-text); }
.video-note { margin: 0; font-size: .8125rem; color: var(--muted); }
.video iframe { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

.post-footer { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border); display: grid; gap: 1.25rem; justify-items: center; }
.post-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; margin: 0; padding: 0; }
.post-tags a, .tag-cloud a { display: inline-block; padding: .2rem .75rem; border: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .8125rem; }
.post-tags a:hover, .tag-cloud a:hover { border-color: var(--accent); color: var(--accent-text); }
.share { text-align: center; }
.share-title { margin: 0 0 .75rem; font: 600 .75rem var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.share ul { display: flex; gap: .5rem; justify-content: center; list-style: none; margin: 0; padding: 0; }
.share a, .share button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--border);
  background: none; color: var(--heading); cursor: pointer; }
.share a:hover, .share button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }

.post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 3rem; padding-block: 1.5rem; border-block: 1px solid var(--border); }
.post-nav a { display: grid; gap: .25rem; text-decoration: none; color: var(--heading); }
.post-nav-next { text-align: right; grid-column: 2; justify-items: end; }
.post-nav-label { display: inline-flex; align-items: center; gap: .35rem; font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.post-nav-title { font-family: var(--font-head); font-size: 1.1rem; }
.post-nav a:hover .post-nav-title { color: var(--accent-text); }

.section-title { text-align: center; font: 600 .875rem var(--font-body); letter-spacing: .15em; text-transform: uppercase; margin: 3.5rem 0 1.5rem; }
.section-title a { color: inherit; text-decoration: none; display: inline-block; padding: .5rem 0; }
.related-posts ul { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1.5rem; list-style: none; padding: 0; margin: 0; }
.related-posts li { text-align: center; }
.related-posts a { display: block; color: var(--heading); text-decoration: none; }
.related-posts img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: .75rem; }
.related-title { display: block; font-family: var(--font-head); font-size: 1.125rem; line-height: 1.35; }
.related-posts a:hover .related-title { color: var(--accent-text); }
.related-posts time { font-size: .8125rem; color: var(--muted); }

.comment-list, .comment-list ol { list-style: none; margin: 0; padding: 0; }
.comment-list ol { margin-left: clamp(1rem, 4vw, 2.5rem); }
.comment { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.comment header { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; margin-bottom: .5rem; }
.comment-author { font-weight: 700; color: var(--heading); }
.comment-date { font-size: .8125rem; color: var(--muted); }
.badge { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--accent); color: var(--on-accent); padding: .05rem .45rem; }
.comment p { margin: 0 0 .75rem; }
/* Kommentare: direkt unter dem Artikel, mit eigener Fläche; Sprachmarke und Filter */
/* Abo-Seite: zwei Wege (E-Mail, RSS-Feed) */
.sub-ways { display: grid; gap: 1.5rem; margin-top: 2rem; }
.sub-way { padding: clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--border); border-radius: 4px; }
.sub-way h2 { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin: 0 0 .5rem; font: 400 1.5rem/1.3 var(--font-head); color: var(--heading); }
.sub-way h2 .icon { color: var(--accent-text); }
.sub-badge { font: 600 .6875rem var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text);
  border: 1px solid currentColor; border-radius: 999px; padding: .15rem .55rem; }
.sub-way > p { margin: 0 0 .75rem; }
.sub-way .form { margin-top: 1.25rem; }
.feed-url { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.feed-url code { padding: .45rem .7rem; background: var(--surface); border-radius: 4px; overflow-wrap: anywhere; }
.feed-url .button { display: inline-flex; align-items: center; gap: .4rem; }
.subscribe-box-alt { margin: 1rem 0 0 !important; font-size: .9375rem; }
.subscribe-box-alt a { display: inline-flex; align-items: center; gap: .35rem; }

/* Hinweis unter jedem Beitrag: Benachrichtigung per E-Mail */
.subscribe-box { box-sizing: border-box; margin-top: 2.5rem; padding: clamp(1.25rem, 4vw, 2rem); text-align: center; border: 1px solid var(--border); border-radius: 4px; }
.subscribe-box h2 { margin: .25rem 0 .5rem; font: 400 1.5rem/1.3 var(--font-head); color: var(--heading); }
.subscribe-box p { margin: 0 auto 1.25rem; max-width: 34rem; }
.subscribe-box-icon { display: block; margin: 0 auto; width: 2rem; height: 2rem; color: var(--accent-text); }
.comments { margin-top: 2.5rem; padding: clamp(1.25rem, 4vw, 2rem); background: var(--surface); border-top: 3px solid var(--accent); }
.comments .section-title { margin-top: 0; }
.comment { border-bottom-color: color-mix(in srgb, var(--border) 70%, var(--text) 10%); }
.comments-note { margin: -.5rem 0 1rem; text-align: center; font-size: .9375rem; color: var(--muted); }
.comment-filter { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1rem; }
.comment-filter[hidden] { display: none; }
.comment-filter button { min-height: 2.5rem; padding: 0 1rem; border: 1px solid var(--border); border-radius: 999px; background: var(--bg);
  color: var(--heading); font: 600 .875rem var(--font-body); cursor: pointer; }
.comment-filter button span { color: var(--muted); font-weight: 400; margin-left: .2rem; }
.comment-filter button[aria-pressed="true"] { background: var(--accent); border-color: var(--heading); color: var(--on-accent); box-shadow: inset 0 0 0 1px var(--heading); }
.comment-filter button[aria-pressed="true"] span { color: inherit; }
.flag { display: inline-block; width: 1.125rem; height: .75rem; border-radius: 2px; box-shadow: 0 0 0 1px rgb(0 0 0 / .18); flex: none; }
.comment-filter button { display: inline-flex; align-items: center; gap: .4rem; }
.lang-badge { display: inline-flex; align-items: center; gap: .3rem; padding: .05rem .45rem .05rem .3rem; border: 1px solid var(--border); border-radius: 999px; font-size: .75rem; font-weight: 700;
  letter-spacing: .06em; color: var(--muted); background: var(--bg); }
.other-lang > .comment { border-left: 3px solid var(--border); padding-left: .9rem; }
.comment-list li[hidden] { display: none; }
.post-comments-link, .post-jump { display: inline-flex; align-items: center; gap: .3rem; color: var(--accent-text); font-family: var(--font-body); font-size: .875rem; }
.meta-sep { margin: 0 .5rem; }
.comment-author { margin: 0; font: 700 1rem var(--font-body); color: var(--heading); display: flex; align-items: center; gap: .5rem; }
.comment-reply { margin-top: .25rem; background: none; border: 0; padding: .4rem 0; min-height: 2.75rem; color: var(--accent-text); text-decoration: underline;
  text-underline-offset: .2em; cursor: pointer; font-size: .875rem; }
.comment-form { margin-top: 2.5rem; }
.comment-form .section-title { margin-top: 0; }
.reply-to { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; padding: .75rem 1rem; background: var(--surface); }
.reply-to[hidden] { display: none; }
.form-note { margin: 0; color: var(--muted); font-size: .9375rem; }
.req { font-weight: 400; color: var(--muted); font-size: .8125rem; }
/* Fehler: Rahmen per Schatten, damit der Fokusrahmen (outline) sichtbar bleibt; Text darunter aus site.js checkFields */
.form [aria-invalid="true"] { border-color: var(--error) !important; box-shadow: 0 0 0 1px var(--error); }
.field-error { margin: .3rem 0 0; color: var(--error); font-size: .875rem; font-weight: 600; }
/* leer: nicht display:none, sonst sagen Screenreader die erste Meldung der Live-Region oft nicht an */
.form-status:empty { padding: 0; border: 0; }
.form-status[data-state="ok"] { border-left-color: #2e7d4f; }

/* --- Listen --------------------------------------------------------------------------------------------------- */
.archive-header { text-align: center; margin-bottom: 2.5rem; }
.archive-title { margin: 0; font-size: clamp(1.5rem, 3.5vw, 2rem); }
.archive-page { color: var(--muted); margin: .25rem 0 0; }
.archive-intro { margin-top: 1rem; text-align: left; }
/* Beitragslisten: kompakte Zeilen (post_card) - Bild links ein Drittel, Text rechts; ganze Zeile klickbar über den Titel-Link */
.post-card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); grid-template-rows: auto 1fr;
  gap: .5rem 1.5rem; padding-block: 1.5rem; border-bottom: 1px solid var(--border); }
.post-card:first-child { padding-top: 0; }
.post-card-media { grid-row: 1 / span 2; }
.post-card-media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.post-card .post-header { text-align: left; margin: 0; }
.post-card .post-categories { margin-bottom: .25rem; }
.post-card .post-title { font-size: clamp(1.25rem, 2.5vw, 1.5rem); }
.post-card .post-meta { margin-top: .25rem; font-size: .9375rem; }
.post-excerpt { margin: 0; }
.post-card.no-media .post-header, .post-card.no-media .post-excerpt { grid-column: 1 / -1; }
.post-card .post-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.post-card .post-categories a { position: relative; z-index: 2; }
.post-card:hover .post-title a { color: var(--accent-text); }
@media (max-width: 37.5rem) {
  /* Handy: kleines quadratisches Bild neben Titel und Datum, Auszug darunter über die ganze Breite */
  .post-card { grid-template-columns: 6rem minmax(0, 1fr); grid-template-rows: auto; gap: .75rem 1rem; }
  .post-card-media { grid-row: 1; }
  .post-card-media img { aspect-ratio: 1; }
  .post-card .post-excerpt { grid-column: 1 / -1; font-size: .9375rem; }
}
.button { display: inline-block; padding: .65rem 1.5rem; border: 1px solid var(--heading); color: var(--heading); text-decoration: none;
  font-family: inherit; font-size: .75rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; background: none; cursor: pointer; }
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination { margin-top: 2.5rem; } /* Abstand zur letzten Zeile der Beitragsliste */
.pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; list-style: none; padding: 0; }
.pagination a { display: inline-flex; align-items: center; gap: .35rem; min-width: 2.75rem; min-height: 2.75rem; justify-content: center; padding: 0 .75rem;
  border: 1px solid var(--border); color: var(--heading); text-decoration: none; font-size: .875rem; }
.pagination a[aria-current="page"], .pagination a:hover { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pagination a[aria-current="page"] { border-color: var(--heading); box-shadow: inset 0 0 0 1px var(--heading); } /* nicht nur Farbe */
.not-found { text-align: center; margin-bottom: 3rem; }
/* 404 (not_found_svg): sie rollt an die Treppe heran (Rad dreht passend zur Strecke: 70 / 182 Umfang) und schiebt dabei
   zweimal mit beiden Armen an (Oberkörper geht dabei mit), bremst, schaut hoch und kratzt sich am Kopf (dazu das „?“),
   zum Schluss hebt sie den Arm. Der Oberkörper kippt in der Hüfte (.nf-body), die Arme drehen in Schulter (.nf-arm-*) und
   Ellbogen (.nf-fore-*), n = vorderer, f = hinterer Arm; Winkel aus der
   Armlänge so gerechnet, dass die Hand auf dem Greifreifen liegt. Endstellung = gezeichnete Stellung: ohne Bewegung
   (prefers-reduced-motion) steht alles gleich am Ziel. Nach 3,3 s ist Ruhe, keine Endlosschleife (WCAG 2.2.2). */
.nf-art { max-width: 26rem; margin: 1.5rem auto 1.75rem; color: var(--heading); }
.nf-art svg { display: block; width: 100%; height: auto; }
.nf-ground { stroke: var(--border); }
.nf-stairs { fill: var(--surface); }
.nf-sign { fill: var(--bg); stroke: var(--accent-text); }
.nf-post { stroke: var(--accent-text); }
.nf-sign-text { fill: var(--accent-text); stroke: none; font: 600 20px var(--font-head); }
.nf-what { fill: var(--accent-text); stroke: none; font: 600 32px var(--font-head); animation: nf-what .5s ease-out 2.1s both; }
.nf-chair { animation: nf-roll 1.4s cubic-bezier(.3, .7, .4, 1) .2s both; }
.nf-wheel { transform-box: fill-box; transform-origin: center; animation: nf-spin 1.4s cubic-bezier(.3, .7, .4, 1) .2s both; }
.nf-body, .nf-arm-n, .nf-fore-n, .nf-arm-f, .nf-fore-f, .nf-head { transform-origin: 0 0; }
.nf-body { animation: nf-body 1.6s ease-in-out .2s both; }
.nf-arm-n { animation: nf-arm-n 3.1s ease-in-out .2s both; }
.nf-fore-n { animation: nf-fore-n 3.1s ease-in-out .2s both; }
.nf-arm-f { animation: nf-arm-f 1.25s ease-in-out .2s both; }
.nf-fore-f { animation: nf-fore-f 1.25s ease-in-out .2s both; }
.nf-head { animation: nf-head 1.7s ease-in-out 1.6s both; }
@keyframes nf-roll { from { transform: translateX(-70px); } }
@keyframes nf-spin { from { transform: rotate(-138deg); } }
@keyframes nf-what { from { opacity: 0; transform: translateY(6px); } }
/* Oberkörper: beim Schieben nach vorn, beim Ausholen aufrecht, beim Anhalten nickt er nach */
@keyframes nf-body {
  0%, 41%, 78% { transform: none; } 22%, 59% { transform: rotate(8deg); } 88% { transform: rotate(5deg); } }
/* vorderer Arm: anschieben (hinten greifen, nach vorn schieben, Hand hoch zurück) ×2, bremsen, Kopf kratzen, Arm hoch */
@keyframes nf-arm-n {
  0%, 21% { transform: rotate(170.5deg); } 11%, 31% { transform: rotate(140.4deg); } 16%, 35.5% { transform: rotate(199.5deg); }
  40%, 52% { transform: rotate(159.2deg); } 63%, 87% { transform: rotate(0deg); } 100% { transform: none; } }
@keyframes nf-fore-n {
  0%, 21% { transform: rotate(-7deg); } 11%, 31% { transform: rotate(1.6deg); } 16%, 35.5% { transform: rotate(-72deg); }
  40%, 52% { transform: rotate(-17.6deg); } 63%, 83%, 87% { transform: rotate(-67deg); } 68%, 78% { transform: rotate(-56deg); }
  73% { transform: rotate(-74deg); } 100% { transform: none; } }
/* hinterer Arm schiebt im Gleichtakt mit und bleibt dann bremsend auf dem Reifen (gezeichnete Stellung) */
@keyframes nf-arm-f {
  0%, 52% { transform: rotate(64.4deg); } 28%, 76% { transform: rotate(30.3deg); } 40%, 88% { transform: rotate(84.8deg); }
  100% { transform: none; } }
@keyframes nf-fore-f {
  0%, 52% { transform: rotate(-70deg); } 28%, 76% { transform: rotate(-55deg); } 40%, 88% { transform: rotate(-116.4deg); }
  100% { transform: none; } }
/* Kopf: hoch zur Treppe schauen, solange sie sich kratzt */
@keyframes nf-head { 18%, 76% { transform: rotate(-10deg); } }
.not-found .nf-ways { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; }
.not-found + .not-found { padding-top: 2rem; border-top: 1px solid var(--border); }

/* --- Formulare ------------------------------------------------------------------------------------------------ */
.form { display: grid; gap: 1.1rem; margin-top: 2rem; }
.form label { display: block; font-weight: 600; font-size: .9375rem; color: var(--heading); margin-bottom: .3rem; }
.form input:not([type="checkbox"]):not([type="radio"]), .form textarea, .form select {
  width: 100%; padding: .7rem .8rem; border: 1px solid var(--muted); border-radius: var(--radius); /* Rahmen mind. 3:1 (1.4.11) */
  background: var(--bg); color: var(--text); font: inherit; }
.form textarea { min-height: 10rem; resize: vertical; }
.form .check { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; }
.form .check input { margin-top: .4rem; width: 1.1rem; height: 1.1rem; accent-color: var(--accent-text); }
.form .hint { font-size: .8125rem; color: var(--muted); margin: .3rem 0 0; }
.nl-langs { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; }
.nl-langs legend { font-weight: 600; font-size: .9375rem; color: var(--heading); margin-bottom: .3rem; padding: 0; }
.nl-langs .check { align-items: center; min-height: 2.75rem; }
.form .check input[type="radio"] { margin-top: 0; width: 1.1rem; height: 1.1rem; accent-color: var(--accent-text); }
.form .hp { position: absolute; left: -10000px; }
.form-status { padding: .9rem 1rem; border-left: 4px solid var(--accent); background: var(--surface); }
.form-status[data-state="error"] { border-color: var(--error); }

/* --- Fuß ------------------------------------------------------------------------------------------------------ */
.site-footer { background: var(--surface); margin-top: 2rem; }
.footer-widgets { max-width: var(--wide); margin: 0 auto; padding: 3.5rem var(--gutter) 2rem; display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); }
.widget-title { display: flex; align-items: center; gap: 1rem; margin: 0 0 1rem; font: 400 1rem var(--font-head); letter-spacing: .1em; text-transform: uppercase; color: var(--heading); }
.widget-title::before, .widget-title::after { content: ""; flex: 1; border-top: 1px solid var(--border); }
.site-footer ul, .drawer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { border-bottom: 1px solid var(--border); }
.site-footer li a { display: inline-block; padding: .6rem 0; color: var(--text); text-decoration: none; }
.site-footer li a:hover { color: var(--accent-text); }
/* „Dies & Das“: Links mit Symbol davor; „Blog durchsuchen“, „Als App installieren“ (site.js) sind Knöpfe, die genauso aussehen */
.site-footer li a.footer-ico { display: inline-flex; align-items: center; gap: .4rem; }
.footer-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .6rem 0; border: 0; background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.footer-btn:hover { color: var(--accent-text); }
.count-list .count-n { margin-left: .15rem; color: var(--muted); font-size: .875rem; }
.count-list a:hover .count-n { color: inherit; }
.footer-bottom { max-width: var(--wide); margin: 0 auto; padding: 1.25rem var(--gutter) 2rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: .875rem; }
.footer-bottom ul { display: flex; gap: 1rem; }
.footer-bottom li { border: 0; }
.footer-bottom li a { padding: .25rem 0; }
.copyright { margin: 0; color: var(--muted); }
/* Blogname als Schriftzug im Text (wordmark_html, brand_text): wie im Kopf, „not so perfect“ in Handschrift und in dem
   Gold, das auch Links haben (lesbar auf hellem und dunklem Grund) */
.wordmark { font-family: var(--font-head); font-weight: 500; font-style: normal; white-space: nowrap; color: var(--heading); }
.wm-hand { font: 600 1.15em/1 "Caveat", cursive; color: var(--accent-text); }
.footer-legal ul { display: flex; flex-wrap: wrap; gap: .25rem 1.25rem; }
.footer-legal a { font-weight: 600; }
.footer-legal .footer-admin { display: inline-flex; align-items: center; gap: .3rem; }
/* Osterei (site.js): kleiner Smiley unten links in der Ecke (Tippfläche 37 px, Symbol bündig mit dem Text darüber);
   ein Klick schickt einen großen Rollstuhl mit Wheelie unten über den Bildschirm, der erste Spruch kommt mit Blitzer (ein
   einzelner weicher roter Blitz von rechts unten wie bei echten Blitzern mit Rotfilter, kein Flackern). Sie schiebt mit
   beiden Armen an (Oberkörper geht mit) und reißt beim Wheelie den Arm hoch, genau wenn es blitzt; Winkel wie auf der
   404-Seite (A greifen, B schieben, C ausholen, siehe nf-arm-n) */
.egg { display: inline-flex; align-self: center; margin: -.15rem; padding: .15rem; border: 0; border-radius: 50%;
  background: none; color: var(--muted); cursor: pointer; }
.egg .icon { width: 2rem; height: 2rem; }
.egg:hover { color: var(--accent-text); }
.egg:hover .icon { animation: egg-wiggle .5s ease-in-out; }
.egg-ride { position: fixed; inset: auto 0 .5rem; z-index: 55; height: 10rem; overflow: hidden; pointer-events: none; }
/* 6 s: bis zum Wheelie (2,4 s) flott, danach rollt sie gemütlich hinaus: Rad dreht langsamer, Fahrtwind weg,
   Pferdeschwanz weht ruhiger, zwei lockere Schübe (site.js entfernt alles nach 6,1 s) */
.egg-car { position: absolute; left: 0; bottom: 0; width: 7.2rem; height: 10rem; color: var(--accent-text);
  animation: egg-ride 6s cubic-bezier(.4, 0, .6, 1) forwards; }
/* Wheelie dreht um den Aufstandspunkt des großen Rads (x 0, y 155.5 im viewBox -55 0 115 160) */
.egg-car svg { width: 100%; height: 100%; overflow: visible; transform-origin: 47.8% 97.2%; animation: egg-wheelie 6s ease-in-out forwards; }
.egg-wheel { transform-box: fill-box; transform-origin: center; animation: egg-spin .45s linear 5, egg-spin 1.2s linear 2.25s infinite; }
.egg-hair { transform-box: fill-box; transform-origin: 100% 0;
  animation: egg-hair .25s ease-in-out 10 alternate, egg-hair .6s ease-in-out 2.5s infinite alternate; }
.egg-speed { animation: egg-speed .2s steps(2) 12, egg-fade .4s 2.4s forwards; }
.egg-body, .egg-arm-n, .egg-fore-n, .egg-arm-f, .egg-fore-f { transform-origin: 0 0; animation: 6s ease-in-out forwards; }
.egg-body { animation-name: egg-body; }
.egg-arm-n { animation-name: egg-arm-n; }
.egg-fore-n { animation-name: egg-fore-n; }
.egg-arm-f { animation-name: egg-arm-f; }
.egg-fore-f { animation-name: egg-fore-f; }
.egg-flash { position: fixed; inset: 0; z-index: 54; opacity: 0; pointer-events: none; animation: egg-flash .6s ease-out 1.5s;
  background: radial-gradient(ellipse 90% 85% at 85% 100%, #ff3020, rgb(255 48 32 / .45) 55%, transparent); }
@keyframes egg-wiggle { 25% { transform: rotate(-12deg); } 75% { transform: rotate(8deg); } }
@keyframes egg-ride { from { translate: -7.5rem 0; } 25.2% { translate: calc(45vw - 3.6rem) 0; } 37.2% { translate: calc(55vw - 3.6rem) 0; } to { translate: 100vw 0; } }
@keyframes egg-hair { from { transform: rotate(-10deg); } to { transform: rotate(8deg); } }
@keyframes egg-wheelie { 0%, 22.8% { transform: none; } 27%, 36% { transform: rotate(-22deg); } 39.6%, 100% { transform: none; } }
@keyframes egg-spin { to { transform: rotate(360deg); } }
@keyframes egg-speed { 50% { opacity: .3; } }
@keyframes egg-fade { to { opacity: 0; } }
@keyframes egg-flash { 8% { opacity: .75; } }
/* dreimal flott anschieben, beim Wheelie (24,6-34,8 %) Arm hoch mit kurzem Winken, hinterer Arm hält dann den Reifen,
   danach zwei lockere Schübe und ausrollen */
@keyframes egg-body {
  0%, 5.4%, 7.2%, 12.6%, 14.4%, 19.8%, 24.6%, 34.8%, 40%, 58%, 64%, 82%, 88%, 100% { transform: none; }
  3.6%, 10.8%, 18%, 52%, 76% { transform: rotate(8deg); } }
@keyframes egg-arm-n {
  0%, 7.2%, 14.4%, 40%, 64%, 88%, 100% { transform: rotate(170.5deg); } 3.6%, 10.8%, 18%, 52%, 76% { transform: rotate(140.4deg); }
  5.4%, 12.6%, 19.8%, 58%, 82% { transform: rotate(199.5deg); } 24.6%, 34.8% { transform: rotate(0deg); } }
@keyframes egg-fore-n {
  0%, 7.2%, 14.4%, 40%, 64%, 88%, 100% { transform: rotate(-7deg); } 3.6%, 10.8%, 18%, 52%, 76% { transform: rotate(1.6deg); }
  5.4%, 12.6%, 19.8%, 58%, 82% { transform: rotate(-72deg); } 24.6%, 31.8%, 34.8% { transform: rotate(0deg); } 28.2% { transform: rotate(-20deg); } }
@keyframes egg-arm-f {
  0%, 7.2%, 14.4%, 40%, 64%, 88%, 100% { transform: rotate(64.4deg); } 3.6%, 10.8%, 18%, 52%, 76% { transform: rotate(30.3deg); }
  5.4%, 12.6%, 19.8%, 58%, 82% { transform: rotate(84.8deg); } 24.6%, 34.8% { transform: none; } }
@keyframes egg-fore-f {
  0%, 7.2%, 14.4%, 40%, 64%, 88%, 100% { transform: rotate(-70deg); } 3.6%, 10.8%, 18%, 52%, 76% { transform: rotate(-55deg); }
  5.4%, 12.6%, 19.8%, 58%, 82% { transform: rotate(-116.4deg); } 24.6%, 34.8% { transform: none; } }
/* Desktop (Kopfmenü sichtbar): Fußzeile kompakter; auf Handy und Tablet bleibt sie luftig mit großen Tippflächen.
   Zielgrößen bleiben über 24 px (Listen ca. 36 px, Schlagwörter ca. 27 px). */
@media (width > 60rem) {
  .footer-widgets { padding: 2rem var(--gutter) 1rem; gap: 1.5rem 3rem; }
  .widget-title { margin-bottom: .5rem; font-size: .9375rem; }
  .site-footer li a, .footer-btn { padding: .3rem 0; font-size: .9375rem; }
  .site-footer .tag-cloud a { padding: .1rem .6rem; }
  .tag-cloud { gap: .3rem; }
  .footer-bottom { padding: .75rem var(--gutter) 1.25rem; }
}

/* --- Dialoge: Seitenleiste, Suche, Lightbox ------------------------------------------------------------------- */
dialog { color: var(--text); background: var(--bg); border: 0; padding: 0; }
dialog::backdrop { background: var(--overlay); }
.dialog-close { position: absolute; top: .5rem; right: .5rem; z-index: 2; }
.drawer { margin: 0; height: 100dvh; max-height: none; width: min(22rem, 90vw); padding: 3.5rem 1.75rem 2rem; overflow-y: auto; }
.drawer[open] { animation: slide-in .25s ease-out; }
.drawer-menu > li > a, .drawer .sub-toggle { min-height: 2.75rem; display: flex; align-items: center; gap: .35rem; color: var(--heading); text-decoration: none;
  font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; background: none; border: 0; padding: 0; cursor: pointer; }
.drawer .sub-menu { position: static; translate: none; border: 0; box-shadow: none; padding: 0 0 .5rem; background: none; min-width: 0; }
/* nur der Knopf klappt auf und zu - nicht Fokus oder Maus wie im Kopfmenü (sonst bleibt es nach dem Antippen offen) */
.drawer .has-sub:not(.open) > .sub-menu { display: none; }
.drawer .sub-menu a { padding: .4rem 1rem; }
.drawer a[aria-current="page"] { color: var(--accent-text); } /* wie im Kopfmenü */
@media (hover: hover) { .drawer a:hover, .drawer .sub-toggle:hover { color: var(--accent-text); } } /* auf Touch bliebe es nach dem Tippen farbig */
.drawer .sub-toggle .icon { transition: rotate .2s; }
.drawer .has-sub.open > .sub-toggle .icon { rotate: 180deg; }
/* offenes Menü: Seite dahinter bleibt stehen, Wischen im Menü läuft nicht auf die Seite durch */
html:has(.drawer[open]) { overflow: hidden; }
.drawer { overscroll-behavior: contain; }
/* „Dies & Das“ unter dem Hauptmenü: leiser, normale Schreibweise, mit Symbol wie in der Fußzeile */
.drawer-title { margin: 1.5rem 0 .25rem; padding-top: 1.25rem; border-top: 1px solid var(--border);
  font: 600 .75rem var(--font-body); letter-spacing: .15em; text-transform: uppercase; color: var(--muted); }
.drawer-misc a { min-height: 2.75rem; display: flex; align-items: center; gap: .5rem; color: var(--text); text-decoration: none; }
.tag-cloud { display: flex; flex-wrap: wrap; gap: .4rem; }
.site-footer .tag-cloud li { border: 0; }
.site-footer .tag-cloud a { padding: .2rem .75rem; }
@keyframes slide-in { from { translate: -100% 0; } }

.install-dialog { width: min(30rem, 100vw - 2rem); margin: auto; padding: 1.5rem 1.5rem .75rem; border-radius: var(--radius); }
.install-dialog h2 { margin: 0 2.5rem .75rem 0; font: 400 1.375rem var(--font-head); color: var(--heading); }

.search-dialog { width: min(46rem, 100vw - 2rem); margin: 10vh auto auto; max-height: 75vh; overflow-y: auto; border-radius: var(--radius); }
.search-form { position: sticky; top: 0; display: flex; align-items: center; gap: .75rem; padding: .75rem 3.5rem .75rem 1.25rem; background: var(--bg); border-bottom: 1px solid var(--border); }
.search-form input { flex: 1; border: 0; background: none; color: var(--heading); font: 1.25rem var(--font-head); padding: .5rem 0; outline: none; }
.search-form:has(input:focus-visible) { box-shadow: inset 0 -3px 0 var(--accent-text); } /* Fokus statt outline: ganze Leiste unterstrichen */
.search-form .dialog-close { top: .6rem; }
.search-results { list-style: none; margin: 0; padding: .5rem .75rem 1rem; }
/* ganze Zeile klickbar: der Link (nur der Titel als Linktext) spannt sich per ::after über den Eintrag */
.search-results li { position: relative; padding: .75rem .5rem; border-bottom: 1px solid var(--border); border-radius: var(--radius); }
.search-results li:has(a):hover { background: var(--surface); }
.search-results li:has(a:focus-visible) { outline: 2px solid var(--accent-text); outline-offset: -2px; }
.search-results a { font-family: var(--font-head); font-size: 1.125rem; color: var(--heading); text-decoration: none; }
.search-results a::after { content: ""; position: absolute; inset: 0; }
.search-results a:focus-visible { outline: none; }
.search-results li:hover a { color: var(--accent-text); }
.search-results small { display: block; color: var(--muted); }
.search-results p { margin: .25rem 0 0; font-size: .875rem; }

/* Bildansicht: Bild so groß wie möglich, die Seite scheint leicht durch; Klick irgendwo (außer auf Knöpfe) schließt (site.js) */
.lightbox-dialog { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; background: rgb(0 0 0 / .78); color: #fff;
  cursor: zoom-out; }
.lightbox-dialog::backdrop { background: none; backdrop-filter: blur(3px); }
.lightbox-dialog figure { height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: .75rem; }
.lightbox-dialog img { flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; }
.lightbox-dialog figcaption { flex: none; max-width: 46rem; margin-top: .6rem; padding: .35rem .9rem; border-radius: var(--radius);
  background: rgb(0 0 0 / .6); text-align: center; font-size: .9375rem; } /* weiß auf mind. 78 % Schwarz: über 10:1 */
.lightbox-dialog figcaption:empty { display: none; }
.lightbox-dialog .nav-icon { color: #fff; background: rgb(0 0 0 / .5); } /* Knöpfe liegen über dem Bild */
.lightbox-dialog .nav-icon:hover { color: #fff; background: rgb(0 0 0 / .8); }
.lightbox-prev, .lightbox-next { position: absolute; top: 50%; translate: 0 -50%; }
.lightbox-prev { left: .5rem; } .lightbox-next { right: .5rem; }

/* Weicher Übergang zwischen den Seiten (wie beim alten Theme): View Transitions für Seitenwechsel, reines CSS.
   Chrome/Edge/Safari blenden über, andere Browser wechseln wie bisher sofort. Menüleiste bleibt dabei stehen. */
@view-transition { navigation: auto; }
.main-nav { view-transition-name: main-nav; }
::view-transition-old(root) { animation: .25s ease-in both page-out; }
::view-transition-new(root) { animation: .4s ease-out both page-in; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; } }

/* Leiste für Angemeldete (site.js): unten links, über allem, nicht im Druck */
/* Kurze Meldung unten (z. B. „Link kopiert“), über der Editorleiste */
.toast { position: fixed; left: 50%; bottom: 4.5rem; z-index: 60; max-width: calc(100% - 2rem); margin: 0; padding: .6rem 1.1rem;
  transform: translate(-50%, .5rem); border-radius: 999px; background: var(--heading); color: var(--bg); font-size: .9375rem;
  box-shadow: 0 4px 16px rgb(0 0 0 / .2); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.toast:not(.is-error, .is-egg)::before { content: "✓" / ""; margin-right: .4rem; font-weight: 700; }
.toast.is-egg { bottom: 11.5rem; border-radius: 1rem; text-align: center; } /* über dem Rollstuhl, Sprüche brechen um */
/* Leiste für Angemeldete (site.js): immer im Gegensatz zur Seite - hell dunkel, dunkel hell -, damit sie sich in
   beiden Modi abhebt; leicht durchscheinend, feiner Rand und Schatten. Schrift mindestens 7:1, das × mindestens 4.5:1.
   Eingeklappt (×) bleibt nur der runde Knopf zum Aufklappen. */
.editor-bar { --eb-bg: rgb(22 24 27 / .9); --eb-text: #fff; --eb-muted: #c4c4c4; --eb-hover: rgb(255 255 255 / .13);
  --eb-ring: rgb(255 255 255 / .16); --eb-shadow: rgb(0 0 0 / .3);
  position: fixed; left: .75rem; bottom: .75rem; z-index: 50; display: flex; align-items: center; gap: .1rem;
  max-width: calc(100vw - 1.5rem); padding: .2rem; border-radius: 999px; background: var(--eb-bg); color: var(--eb-text);
  box-shadow: 0 0 0 1px var(--eb-ring), 0 3px 12px var(--eb-shadow); font-size: .8125rem; line-height: 1.2;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); view-transition-name: editor-bar; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .editor-bar { --eb-bg: rgb(244 242 238 / .93); --eb-text: #16181b; --eb-muted: #4f5257;
    --eb-hover: rgb(0 0 0 / .08); --eb-ring: rgb(0 0 0 / .2); --eb-shadow: rgb(0 0 0 / .6); }
}
:root[data-theme="dark"] .editor-bar { --eb-bg: rgb(244 242 238 / .93); --eb-text: #16181b; --eb-muted: #4f5257;
  --eb-hover: rgb(0 0 0 / .08); --eb-ring: rgb(0 0 0 / .2); --eb-shadow: rgb(0 0 0 / .6); }
.editor-bar a, .editor-bar button { display: inline-flex; align-items: center; gap: .35rem; min-height: 2rem; padding: 0 .7rem;
  border-radius: 999px; color: inherit; text-decoration: none; background: none; border: 0; font: inherit; font-weight: 600;
  white-space: nowrap; cursor: pointer; }
.editor-bar .editor-bar-main { background: var(--accent); color: var(--on-accent); }
.editor-bar button { width: 2rem; padding: 0; justify-content: center; color: var(--eb-muted); }
.editor-bar .editor-bar-open { color: var(--eb-text); }
.editor-bar :focus-visible { outline: 2px solid var(--eb-text); outline-offset: 1px; }
@media (hover: hover) {
  .editor-bar a:hover, .editor-bar button:hover { background: var(--eb-hover); color: var(--eb-text); }
  .editor-bar .editor-bar-main:hover { background: var(--accent); color: var(--on-accent); filter: brightness(1.08); }
}
@media (max-width: 26rem) { .editor-bar a { padding: 0 .55rem; } } /* ungarische Texte sind länger */
@media print { .editor-bar, .toast { display: none; } }
/* Hinweisleiste der Vorschau aus dem Editor (Builder::preview): ganz oben, im Gegensatz zur Seite wie der Sprunglink */
.preview-bar { margin: 0; padding: .6rem var(--gutter); background: var(--heading); color: var(--bg);
  border-bottom: 3px solid var(--accent); font-size: .875rem; line-height: 1.4; text-align: center; }
.preview-bar strong { margin-right: .35rem; text-transform: uppercase; letter-spacing: .06em; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-intro .tl, .hero-intro .tl-gap { font-size: inherit; } .hero-intro .site-description { opacity: 1; } /* Titel sofort ganz */
}
@media print {
  .main-nav, .site-footer, .share, .subscribe-box, .post-nav, .related-posts, dialog, .skip-link, .preview-bar { display: none !important; }
  .site-hero { min-height: 0; background: none; } .site-hero-img, .site-hero-lqip, .site-hero::after { display: none; }
  .site-title a, .site-title .title-hand, .site-description { color: #000; text-shadow: none; background: none; }
  body { font-size: 11pt; }
  :root { --bg: #fff !important; --surface: #fff !important; --text: #222 !important; --heading: #000 !important;
    --muted: #555 !important; --border: #ccc !important; --accent-text: #6b4a16 !important; }
  .gallery-track { flex-wrap: wrap; overflow: visible; gap: .5rem; }
  .gallery-slide, .gallery.js .gallery-slide { flex: 0 0 calc(50% - .25rem); margin: 0 !important; opacity: 1; transform: none; }
  .gallery-slide figcaption { position: static; color: #222; background: none; padding: .25rem 0 0; }
  .gallery-arrow, .gallery-controls, .comment-form, .comment-reply, .comment-filter, .video-facade { display: none !important; }
}