/* wohltage.de – Basis-Layout (Magazin). Farben, Schriften, Ecken, Kartenformen kommen aus dem Stil
   (static/themes/<key>.css, gescoped mit [data-theme]); hier läuft alles über Variablen.
   Neue Elemente immer mit Variablen bauen, damit alle Stile mitziehen. */

/* ---------------------------------------------------------------- Schriften (selbst gehostet, Fontsource).
   Browser laden nur, was ein Stil wirklich benutzt. */
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-soft.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("/fonts/fraunces-soft-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/fonts/lora-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Lora"; src: url("/fonts/lora-wght-italic.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Gloock"; src: url("/fonts/gloock-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-wght.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Newsreader"; src: url("/fonts/newsreader-wght-italic.woff2") format("woff2"); font-weight: 200 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Instrument Sans"; src: url("/fonts/instrument-sans-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Special Elite"; src: url("/fonts/special-elite-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Homemade Apple"; src: url("/fonts/homemade-apple-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IM Fell English"; src: url("/fonts/im-fell-english-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "IM Fell English SC"; src: url("/fonts/im-fell-english-sc-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-wght.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }
@font-face { font-family: "EB Garamond"; src: url("/fonts/eb-garamond-wght-italic.woff2") format("woff2"); font-weight: 400 800; font-style: italic; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Courier Prime"; src: url("/fonts/courier-prime-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-wght.woff2") format("woff2"); font-weight: 200 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Source Serif 4"; src: url("/fonts/source-serif-wght-italic.woff2") format("woff2"); font-weight: 200 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("/fonts/shippori-mincho-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Shippori Mincho"; src: url("/fonts/shippori-mincho-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Yeseva One"; src: url("/fonts/yeseva-one-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Jost"; src: url("/fonts/jost-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Cabin Sketch"; src: url("/fonts/cabin-sketch-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Bodoni Moda"; src: url("/fonts/bodoni-moda-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-wght.woff2") format("woff2"); font-weight: 400 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Alegreya"; src: url("/fonts/alegreya-wght-italic.woff2") format("woff2"); font-weight: 400 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Alegreya SC"; src: url("/fonts/alegreya-sc-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("/fonts/caveat-wght.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Young Serif"; src: url("/fonts/young-serif-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Franklin"; src: url("/fonts/libre-franklin-wght.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

/* ---------------------------------------------------------------- Variablen (Standardwerte; Stile überschreiben) */
:root {
  --bg: #FBF6EC; --bg-2: #F3EADB; --surface: #FFFFFF; --paper: none;
  --ink: #2E2A24; --ink-soft: #6A6157; --line: #2E2A24;
  --accent: #B5653A; --accent-2: #E9C46A; --on-accent: #FFFFFF; --link: #9A4F28; --accent-ink: var(--accent);
  --t-sun: #F6DFA4; --t-rose: #F2CFC4; --t-sage: #D3DECB; --t-sky: #D2DFEA; --t-clay: #EBC7AA;
  --t-ink: color-mix(in srgb, var(--ink) 55%, transparent); --ph-glow: rgba(255,255,255,.55);
  --f-display: Georgia, serif; --f-body: Georgia, serif; --f-ui: system-ui, sans-serif; --f-hand: var(--f-display);
  --h-weight: 600; --h-transform: none; --h-spacing: -.01em; --h-line: 1.08; --h-style: normal;
  --em-style: italic; --em-color: var(--accent);
  --body-size: 1.0625rem; --prose-size: 1.16rem; --prose-line: 1.72;
  --bw: 1px; --radius: 12px; --radius-lg: 20px; --pill: 999px;
  --shadow: 0 4px 18px rgba(60, 40, 20, .08); --shadow-lg: 0 14px 40px rgba(60, 40, 20, .14);
  --card-bg: var(--surface); --card-border: var(--bw) solid color-mix(in srgb, var(--line) 14%, transparent);
  --card-radius: var(--radius); --card-shadow: var(--shadow); --card-rotate: 0deg;
  --media-radius: 0; --img-radius: var(--radius-lg); --img-border: none; --img-shadow: var(--shadow-lg); --img-filter: none;
  --header-bg: var(--bg); --foot-bg: #2E2A24; --foot-ink: #F6EFE3;
  --mark-bg: color-mix(in srgb, var(--accent-2) 60%, transparent);
  --wrap: 1200px; --text: 690px;
}

*, *::before, *::after { box-sizing: border-box; }
/* Stil-Haken: Elemente mit .x sind unsichtbar, bis ein Design-Stil sie einschaltet */
.x { display: none; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); background-image: var(--paper); color: var(--ink);
  font: 400 var(--body-size)/1.62 var(--f-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent); }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
h1, h2, h3 { font-family: var(--f-display); font-weight: var(--h-weight); text-transform: var(--h-transform);
  letter-spacing: var(--h-spacing); line-height: var(--h-line); font-style: var(--h-style); margin: 0; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }
.wrap--text { width: min(100% - 32px, var(--text)); margin-inline: auto; }
.wrap--wide { width: min(100% - 32px, 1000px); margin-inline: auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--bg); padding: 8px 14px; z-index: 200; }
.skip:focus { left: 8px; }
button { font: inherit; color: inherit; cursor: pointer; }
.linklike { background: none; border: 0; padding: 0; color: var(--link); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; font-weight: 700; }
code { font-size: .9em; background: var(--bg-2); padding: 1px 5px; border-radius: 4px; }
.mi { width: 1.05em; height: 1.05em; vertical-align: -.16em; margin-right: 4px; display: inline-block; }
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--accent); color: var(--on-accent); border: var(--bw) solid var(--accent);
  border-radius: var(--pill); padding: 10px 20px; font: 700 .98rem/1.1 var(--f-ui); text-decoration: none; }
.btn:hover { filter: brightness(1.06); }
.btn--small { padding: 7px 14px; font-size: .88rem; }
.btn--ghost { background: transparent; color: var(--ink); border-color: color-mix(in srgb, var(--line) 35%, transparent); }
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border-radius: var(--pill); background: var(--bg-2);
  font: 600 .84rem/1.3 var(--f-ui); text-decoration: none; color: var(--ink); border: var(--bw) solid transparent; }
.tag:hover, .tag.is-on { background: var(--accent); color: var(--on-accent); }
.tag small { opacity: .7; font-weight: 500; }
.kicker { margin: 0 0 10px; font: 700 .8rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.kicker__cat { display: inline-block; padding: 4px 10px; border-radius: var(--pill); background: var(--t-sage); color: var(--ink); text-decoration: none; }
.kicker__cat--sun { background: var(--t-sun); } .kicker__cat--rose { background: var(--t-rose); } .kicker__cat--sage { background: var(--t-sage); }
.kicker__cat--sky { background: var(--t-sky); } .kicker__cat--clay { background: var(--t-clay); }
.kicker__season { color: var(--accent-ink); }

/* ---------------------------------------------------------------- Header (Magazin-Kopf: Logo + Suche, darunter Rubriken) */
.top { background: var(--header-bg); border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 18%, transparent); position: relative; z-index: 50; }
.top__in { display: flex; align-items: center; gap: 20px; padding: 16px 0 12px; }
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.logo__mark { width: 44px; height: 44px; }
.logo__word, .foot__logo { font: var(--h-weight) 1.7rem/1 var(--f-display); letter-spacing: var(--h-spacing); font-style: var(--h-style); }
.logo__word b, .foot__logo b { color: var(--accent-ink); font-weight: inherit; }
.logo__word small, .foot__logo small { font-size: .55em; opacity: .6; font-family: var(--f-ui); font-weight: 600; font-style: normal; letter-spacing: 0; }
.top__claim { margin: 0; font: italic 500 .98rem/1.3 var(--f-body); color: var(--ink-soft); padding-left: 18px; border-left: var(--bw) solid color-mix(in srgb, var(--line) 25%, transparent); }
.search-mini { margin-left: auto; display: flex; align-items: center; background: var(--surface); border: var(--bw) solid color-mix(in srgb, var(--line) 25%, transparent);
  border-radius: var(--pill); padding: 2px 4px 2px 14px; width: 270px; position: relative; }
.search-mini input { border: 0; background: none; font: 400 .95rem/1 var(--f-ui); padding: 9px 4px; flex: 1; min-width: 0; outline: none; color: var(--ink); }
.search-mini button { border: 0; background: none; padding: 6px 8px; color: var(--ink-soft); display: grid; }
.dice { border: var(--bw) solid color-mix(in srgb, var(--line) 25%, transparent); background: var(--surface); color: var(--accent-ink); border-radius: var(--pill); width: 44px; height: 44px; display: grid; place-items: center; padding: 0; flex-shrink: 0; }
.dice__ico { width: 26px; height: 26px; }
.dice.is-rolling .dice__ico { animation: roll .35s ease-in-out; }
@keyframes roll { to { transform: rotate(360deg); } }
.rubriken { border-top: var(--bw) solid color-mix(in srgb, var(--line) 12%, transparent); }
.rubriken__in { display: flex; gap: 4px; justify-content: center; flex-wrap: wrap; padding: 8px 0; }
.rubriken__a { font: 600 .98rem/1 var(--f-ui); text-decoration: none; padding: 9px 14px; border-radius: var(--pill); white-space: nowrap; color: var(--ink); }
.rubriken__a:hover { background: var(--bg-2); }
.rubriken__a[aria-current] { background: var(--accent); color: var(--on-accent); }
.search-mobile { display: none; }

/* Suchvorschau */
.has-suggest { position: relative; }
.suggest { position: absolute; top: calc(100% + 8px); right: 0; width: min(440px, 92vw); background: var(--surface); color: var(--ink); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); border: var(--bw) solid color-mix(in srgb, var(--line) 15%, transparent); padding: 8px; z-index: 80; max-height: 70vh; overflow: auto; }
.search-big .suggest { left: 0; right: auto; width: 100%; }
.suggest__count { margin: 4px 8px 8px; font: 500 .88rem/1.3 var(--f-ui); color: var(--ink-soft); }
.suggest__item { display: grid; grid-template-columns: 72px 1fr; gap: 12px; padding: 8px; border-radius: calc(var(--radius) * .7); text-decoration: none; align-items: center; }
.suggest__item:hover, .suggest__item.is-active { background: var(--bg-2); }
.suggest__item img, .suggest__item > span:first-child { width: 72px; height: 48px; object-fit: cover; border-radius: 6px; background: var(--t-sage); }
.suggest__meta, .result__meta { display: block; font: 700 .72rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .07em; color: var(--ink-soft); }
.suggest__title { display: block; font: var(--h-weight) 1.08rem/1.15 var(--f-display); }
.suggest__desc { display: block; font: 400 .84rem/1.35 var(--f-ui); color: var(--ink-soft); }
.suggest__all { display: block; text-align: center; padding: 10px; font: 700 .9rem/1 var(--f-ui); color: var(--link); }
mark { background: var(--mark-bg); color: inherit; padding: 0 1px; }

/* ---------------------------------------------------------------- Platzhalter (bis es Artikelbilder gibt) */
.ph { aspect-ratio: 3 / 2; width: 100%; display: grid; place-items: center; color: var(--t-ink);
  background: radial-gradient(circle at 28% 30%, var(--ph-glow), transparent 55%), var(--t-sage); }
.ph--sun { background-color: var(--t-sun); } .ph--rose { background-color: var(--t-rose); } .ph--sage { background-color: var(--t-sage); }
.ph--sky { background-color: var(--t-sky); } .ph--clay { background-color: var(--t-clay); }
.ph__motif { width: 26%; max-width: 150px; height: auto; opacity: .75; }

/* ---------------------------------------------------------------- Startseite */
.lead { padding: 30px 0 10px; }
.lead__date { margin: 0 0 6px; font: 600 .92rem/1.3 var(--f-ui); color: var(--ink-soft); }
.lead__h1 { font-size: clamp(1.9rem, 3.6vw, 3rem); max-width: 22em; margin-bottom: 26px; overflow-wrap: break-word; }
.lead__h1 em { font-style: var(--em-style); color: var(--em-color); font-weight: inherit; }
.lead__grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 34px; align-items: start; }
.feature__link { display: grid; text-decoration: none; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); }
.feature__media { overflow: hidden; border-radius: var(--media-radius); }
.feature__media img { width: 100%; filter: var(--img-filter); }
.feature__body { padding: 22px 26px 24px; }
.feature__title { font-size: clamp(1.7rem, 3vw, 2.5rem); margin-bottom: 10px; overflow-wrap: break-word; }
.feature__text { margin: 0 0 12px; font-size: 1.12rem; color: var(--ink-soft); }
.feature__link:hover .feature__title { text-decoration: underline; text-decoration-thickness: 2px; text-decoration-color: var(--accent); text-underline-offset: 5px; }
.feature--hub { margin-bottom: 28px; }
.feature--hub .feature__link { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; }
.side__h { margin: 0 0 6px; font: 800 .8rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.side__list { list-style: none; margin: 0; padding: 0; counter-reset: s; }
.side__list li { border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 15%, transparent); }
.side__list a { display: grid; gap: 4px; padding: 16px 0 16px 46px; position: relative; text-decoration: none; }
.side__list a::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: 12px; font: var(--h-weight) 2.1rem/1 var(--f-display); color: var(--accent-ink); font-style: var(--h-style); }
.side__list strong { font: var(--h-weight) 1.28rem/1.15 var(--f-display); font-style: var(--h-style); letter-spacing: var(--h-spacing); }
.side__list a:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }
.side__list small { color: var(--ink-soft); font-size: .93rem; line-height: 1.4; }
.side__cat { font: 700 .7rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }

.ding { margin: 34px 0 10px; display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; padding: 24px 28px;
  background: var(--t-sun); border-radius: var(--radius-lg); border: var(--card-border); box-shadow: var(--card-shadow); }
.ding__ico { width: 64px; height: 64px; border-radius: 50%; background: var(--surface); color: var(--accent-ink); display: grid; place-items: center; }
.ding__ico svg { width: 38px; height: 38px; }
.ding__h { margin: 0 0 4px; font: 800 .8rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.ding__text { margin: 0; font: var(--h-weight) clamp(1.25rem, 2.2vw, 1.6rem)/1.25 var(--f-display); font-style: var(--h-style); color: var(--ink); }
.ding__from { margin: 8px 0 0; font: 500 .92rem/1.3 var(--f-ui); color: color-mix(in srgb, var(--ink) 75%, transparent); }
.ding__from a { color: var(--ink); font-weight: 700; }
.ding.is-new .ding__text { animation: pop .4s ease; }
@keyframes pop { from { opacity: 0; transform: translateY(6px); } }

.block { padding: 34px 0 6px; }
.block__head { display: flex; justify-content: space-between; align-items: end; gap: 16px; margin-bottom: 8px; }
.block__intro { margin: 0 0 22px; color: var(--ink-soft); max-width: 46em; }
.section-title { font-size: clamp(1.55rem, 2.8vw, 2.2rem); display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.section-title a { text-decoration: none; }
.section-title small { font: 500 .95rem/1.2 var(--f-ui); color: var(--ink-soft); text-transform: none; letter-spacing: 0; font-style: normal; }
.block__head .section-title { margin: 0; }
.st__ico { width: 38px; height: 38px; color: var(--accent-ink); flex-shrink: 0; }
.more { font: 700 .95rem/1.2 var(--f-ui); text-decoration: none; white-space: nowrap; color: var(--link); }
.more:hover { text-decoration: underline; }

.band { padding: 36px 0 34px; margin-top: 26px; background: color-mix(in srgb, var(--t-sage) 45%, var(--bg)); }
.band--sun { background: color-mix(in srgb, var(--t-sun) 40%, var(--bg)); } .band--rose { background: color-mix(in srgb, var(--t-rose) 40%, var(--bg)); }
.band--sky { background: color-mix(in srgb, var(--t-sky) 45%, var(--bg)); } .band--clay { background: color-mix(in srgb, var(--t-clay) 40%, var(--bg)); }
.band + .band { margin-top: 0; }

.grid { display: grid; gap: 24px; }
.grid--3 { grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.grid--band { grid-template-columns: 1.4fr 1fr 1fr; }

.card { position: relative; transform: rotate(var(--card-rotate)); }
.card:nth-child(even) { transform: rotate(calc(var(--card-rotate) * -1)); }
.card__link { display: flex; flex-direction: column; height: 100%; text-decoration: none; background: var(--card-bg); border: var(--card-border);
  border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s; }
.card__link:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.card__media { overflow: hidden; border-radius: var(--media-radius); }
.card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; filter: var(--img-filter); }
.card__body { padding: 16px 20px 18px; display: grid; gap: 6px; align-content: start; flex: 1; }
.card__kicker { font: 700 .72rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.card__title { font-size: 1.4rem; line-height: 1.14; overflow-wrap: break-word; }
.card--big .card__title { font-size: 1.75rem; }
.card__text { margin: 0; color: var(--ink-soft); font-size: .97rem; line-height: 1.5; }
.card__meta { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font: 600 .8rem/1.3 var(--f-ui); color: var(--ink-soft); }
.card__meta span + span::before { content: "·"; margin-right: 14px; opacity: .6; }
.card__link:hover .card__title { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 4px; }

.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.tile { display: flex; gap: 18px; align-items: center; padding: 22px 26px; text-decoration: none; background: var(--card-bg); border: var(--card-border); border-radius: var(--radius-lg); box-shadow: var(--card-shadow); }
.tile__ico { width: 52px; height: 52px; color: var(--accent-ink); flex-shrink: 0; }
.tile strong { display: block; font: var(--h-weight) 1.5rem/1.1 var(--f-display); font-style: var(--h-style); }
.tile small { color: var(--ink-soft); font-size: .95rem; }
.tile:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }

.words { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.word { display: grid; gap: 4px; padding: 18px 20px; text-decoration: none; border-radius: var(--radius); background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); }
.word strong { font: var(--h-weight) 1.6rem/1.05 var(--f-display); font-style: var(--h-style); color: var(--accent-ink); }
.word small { font: 700 .72rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); }
.word span { font-size: .93rem; line-height: 1.45; color: var(--ink-soft); }

.about { padding: 46px 0 14px; max-width: 760px; }
.about h2 { font-size: 1.7rem; margin-bottom: 12px; }
.about p { color: var(--ink-soft); }
.about a { color: var(--link); font-weight: 700; }

/* ---------------------------------------------------------------- Hubs (Rubriken, Themen, Sammlungen, Über, Rechtliches) */
.hub { padding: 22px 0 10px; }
.crumbs ol { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font: 500 .86rem/1.3 var(--f-ui); color: var(--ink-soft); }
.crumbs li + li::before { content: "›"; margin-right: 6px; opacity: .6; }
.crumbs a { text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.hub__head { padding: 30px 34px; border-radius: var(--radius-lg); background: var(--t-sage); margin-bottom: 28px; }
.hub__head--sun { background: var(--t-sun); } .hub__head--rose { background: var(--t-rose); } .hub__head--sky { background: var(--t-sky); } .hub__head--clay { background: var(--t-clay); }
.hub__head .kicker { color: color-mix(in srgb, var(--ink) 70%, transparent); }
.hub__title { font-size: clamp(2.2rem, 5vw, 3.6rem); hyphens: auto; overflow-wrap: break-word; color: var(--ink); }
.hub__intro { margin: 12px 0 0; font-size: 1.15rem; max-width: 40em; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.hub__count { margin: 14px 0 0; font: 700 .85rem/1 var(--f-ui); color: color-mix(in srgb, var(--ink) 70%, transparent); }
.hub__other { margin: 40px 0 10px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.hub__other p { margin: 0 6px 0 0; font: 700 .9rem/1 var(--f-ui); }
.tagnav { display: flex; flex-wrap: wrap; gap: 8px; margin: -8px 0 26px; }
.hub .prose { padding-bottom: 10px; }
.legal .prose, .hub > .prose { margin-left: 0; }

.wordlist { display: grid; gap: 14px; }
.wordrow { display: grid; grid-template-columns: 180px 1fr; gap: 22px; align-items: center; text-decoration: none; background: var(--card-bg); border: var(--card-border); border-radius: var(--card-radius); overflow: hidden; box-shadow: var(--card-shadow); }
.wordrow__media { display: block; align-self: stretch; }
.wordrow__media .ph, .wordrow__media picture, .wordrow__media img { height: 100%; }
.wordrow__media .ph__motif { width: 34%; }
.wordrow__media img { aspect-ratio: 3 / 2; object-fit: cover; }
.wordrow__body { display: grid; gap: 4px; padding: 14px 20px 14px 0; }
.wordrow__body strong { font: var(--h-weight) 1.6rem/1.1 var(--f-display); font-style: var(--h-style); }
.wordrow__body small { font: 700 .74rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.wordrow__body span { color: var(--ink-soft); }
.wordrow:hover strong { text-decoration: underline; text-decoration-color: var(--accent); }

/* ---------------------------------------------------------------- Artikel */
.art__head { padding: 26px 0 8px; text-align: left; }
.art__title { font-size: clamp(2.1rem, 5vw, 3.5rem); hyphens: manual; overflow-wrap: break-word; }
.art__tagline { margin: 14px 0 0; font: italic 400 clamp(1.15rem, 2vw, 1.35rem)/1.45 var(--f-body); color: var(--ink-soft); }
.art__meta { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font: 600 .86rem/1.3 var(--f-ui); color: var(--ink-soft); }
.art__meta span + span::before { content: "·"; margin-right: 16px; opacity: .6; }
.art__hero { margin-top: 24px; margin-bottom: 0; display: grid; justify-items: center; }
.art__hero picture, .art__hero .ph { border-radius: var(--img-radius); overflow: hidden; border: var(--img-border); box-shadow: var(--img-shadow); }
.art__hero picture { max-width: 100%; }
.art__frame { position: relative; max-width: 100%; }
/* nie beschnitten: ganze Bildfläche, max. ~52 % Fensterhöhe, damit Titel + Bild auf den ersten Bildschirm passen */
.art__hero img { width: auto; max-height: 52vh; max-width: 100%; filter: var(--img-filter); }
.art__hero .ph { width: min(100%, calc(52vh * 1.5)); }

.wcard { margin-top: 26px; margin-bottom: 8px; padding: 18px 22px; border-radius: var(--radius); background: var(--card-bg); border: var(--card-border); box-shadow: var(--card-shadow); }
.wcard__h { margin: 0 0 10px; font: 800 .74rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .12em; color: var(--accent-ink); }
.wcard__grid { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 18px; }
.wcard__grid > div { display: grid; grid-template-columns: 30px 1fr; column-gap: 8px; align-items: center; }
.wcard__ico { width: 28px; height: 28px; color: var(--accent-ink); grid-row: span 2; }
.wcard dt { font: 700 .72rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.wcard dd { margin: 0; font: 700 1rem/1.3 var(--f-ui); }
.wcard dd a { color: var(--link); }
.wcard__word { display: grid; gap: 10px; margin-bottom: 14px; padding-bottom: 14px; border-bottom: var(--bw) dashed color-mix(in srgb, var(--line) 25%, transparent); }
.wcard__word p { margin: 0; display: grid; grid-template-columns: 30px 1fr; gap: 8px; align-items: start; font-size: 1.04rem; line-height: 1.45; }
.wcard__word b { display: block; font: 700 .72rem/1.4 var(--f-ui); text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); }
.wcard__word .wcard__ico { grid-row: auto; }
.wcard__jump { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; font: 700 .9rem/1.2 var(--f-ui); }
.wcard__jump > a:first-child { color: var(--link); margin-right: auto; }

.prose { font-size: var(--prose-size); line-height: var(--prose-line); padding-top: 18px; }
.prose > p:first-child { font-size: 1.22em; line-height: 1.5; font-weight: 500; }
.prose h2 { font-size: clamp(1.55rem, 3vw, 2rem); margin: 1.7em 0 .5em; }
.prose h3 { font-size: 1.3rem; margin: 1.4em 0 .4em; }
.prose p, .prose ul, .prose ol { margin: 0 0 1em; }
.prose ul, .prose ol { padding-left: 1.3em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--accent-ink); font-weight: 700; }
.prose strong { font-weight: 700; }
.prose em { font-style: italic; }
.prose a { color: var(--link); }
.prose a.autolink { font-weight: 700; text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.prose blockquote { margin: 1.2em 0; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--accent); font-style: italic; color: var(--ink-soft); }
.prose table { border-collapse: collapse; width: 100%; font-size: .95em; margin: 0 0 1.2em; }
.prose th, .prose td { padding: 8px 10px; border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 18%, transparent); text-align: left; }

.trytoday { margin-top: 30px; }
.trytoday__in { display: grid; grid-template-columns: auto 1fr; gap: 18px; padding: 24px 26px; border-radius: var(--radius-lg);
  background: var(--t-sun); border: var(--card-border); box-shadow: var(--card-shadow); position: relative; }
.trytoday__ico { width: 46px; height: 46px; color: var(--accent-ink); background: var(--surface); border-radius: 50%; padding: 8px; }
.trytoday__h { margin: 0 0 4px; font: 800 .8rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .12em; color: color-mix(in srgb, var(--ink) 75%, transparent); }
.trytoday__text { margin: 0; font: var(--h-weight) clamp(1.25rem, 2.4vw, 1.5rem)/1.3 var(--f-display); font-style: var(--h-style); color: var(--ink); }
.trytoday__more { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.trytoday__more .linklike { color: var(--ink); }
.trytoday.is-done .trytoday__in { background: var(--t-sage); }

.cozy { margin-top: 34px; margin-bottom: 0; text-align: center; padding: 26px 10px 8px; }
.cozy__q { margin: 0; font: var(--h-weight) clamp(1.5rem, 3.4vw, 2.2rem)/1.25 var(--f-display); font-style: italic; color: var(--ink); quotes: "„" "“"; }
.cozy__q::before { content: open-quote; color: var(--accent-ink); }
.cozy__q::after { content: close-quote; color: var(--accent-ink); }
.cozy__by { margin-top: 12px; font: 600 .88rem/1.4 var(--f-ui); color: var(--ink-soft); }
.cozy__by a { color: var(--link); }

.share { margin: 34px 0 6px; padding: 20px 22px; border-radius: var(--radius); background: var(--bg-2); }
.share--bar { margin-top: 46px; }
.share__h { margin: 0 0 12px; font: var(--h-weight) 1.2rem/1.25 var(--f-display); font-style: var(--h-style); }
.share__btns { display: flex; flex-wrap: wrap; gap: 8px; }
.share__btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: var(--pill); background: var(--surface); color: var(--ink);
  border: var(--bw) solid color-mix(in srgb, var(--line) 22%, transparent); font: 700 .88rem/1 var(--f-ui); text-decoration: none; }
.share__btn:hover { border-color: var(--accent); }
.share__btn--wa { background: #1F8F4E; color: #FFFFFF; border-color: #1F8F4E; }
.share__btn.is-done { background: var(--accent); color: var(--on-accent); }

.faq { margin-top: 38px; }
.faq h2 { font-size: clamp(1.5rem, 3vw, 1.9rem); margin-bottom: 14px; }
.faq details { border-bottom: var(--bw) solid color-mix(in srgb, var(--line) 18%, transparent); padding: 4px 0; }
.faq summary { cursor: pointer; font: 700 1.08rem/1.35 var(--f-ui); padding: 12px 30px 12px 0; list-style: none; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; position: absolute; right: 4px; top: 8px; font-size: 1.5rem; color: var(--accent-ink); }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 0 0 14px; color: var(--ink-soft); }

.art__foot { margin-top: 30px; }
.sources__h { font: 800 .8rem/1.2 var(--f-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--ink-soft); margin-bottom: 8px; }
.sources ol { margin: 0; padding-left: 1.3em; font-size: .92rem; color: var(--ink-soft); }
.sources li { margin-bottom: 4px; overflow-wrap: anywhere; }
.sources a { color: var(--ink-soft); }
.art__note { margin: 20px 0 0; font-size: .88rem; color: var(--ink-soft); padding: 12px 16px; border-radius: var(--radius); border: var(--bw) dashed color-mix(in srgb, var(--line) 25%, transparent); }
.art__note a { color: inherit; font-weight: 700; }

.related { margin-top: 50px; padding-top: 30px; border-top: var(--bw) solid color-mix(in srgb, var(--line) 15%, transparent); }
.related__more { margin: 20px 0 0; color: var(--ink-soft); font-size: .98rem; }
.related__more a { color: var(--link); font-weight: 600; }

/* ---------------------------------------------------------------- Suche */
.search-big { display: flex; gap: 8px; background: var(--surface); border: var(--bw) solid color-mix(in srgb, var(--line) 30%, transparent); border-radius: var(--pill); padding: 6px; box-shadow: var(--shadow); max-width: 620px; position: relative; }
.search-big input { flex: 1; min-width: 0; border: 0; background: none; font: 400 1.08rem/1 var(--f-ui); padding: 10px 14px; outline: none; color: var(--ink); }
.search-big button { border: 0; background: var(--accent); color: var(--on-accent); font: 700 1rem/1 var(--f-ui); border-radius: var(--pill); padding: 10px 22px; }
.search-status { margin: 18px 0 10px; color: var(--ink-soft); }
.results { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 760px; }
.result a { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; text-decoration: none; padding: 10px; border-radius: var(--radius); background: var(--card-bg); border: var(--card-border); }
.result img, .result a > span:first-child { width: 120px; height: 80px; object-fit: cover; border-radius: 8px; background: var(--t-sage); }
.result__title { display: block; font: var(--h-weight) 1.3rem/1.15 var(--f-display); }
.result__desc { display: block; color: var(--ink-soft); font-size: .95rem; }

.notfound__code { margin: 0; font: var(--h-weight) 4rem/1 var(--f-display); color: var(--accent-ink); }

.sitemap__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px 34px; }
.sitemap__grid h2 { font-size: 1.35rem; margin: 18px 0 8px; }
.sitemap__grid h2 a { text-decoration: none; }
.sitemap__list { list-style: none; padding: 0; margin: 0; }
.sitemap__list li { padding: 4px 0; }
.sitemap__list small { color: var(--ink-soft); }

/* ---------------------------------------------------------------- Footer */
.foot { margin-top: 56px; background: var(--foot-bg); color: var(--foot-ink); padding: 44px 0 26px; }
.foot__in { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 30px; }
.foot__logo { margin: 0 0 10px; }
.foot__logo b { color: var(--accent-2); }
.foot__claim { margin: 0 0 12px; opacity: .9; }
.foot__note { margin: 0; font-size: .86rem; opacity: .75; }
.foot__note a { color: inherit; }
.foot nav { display: grid; gap: 6px; align-content: start; font: 500 .95rem/1.4 var(--f-ui); }
.foot nav a { text-decoration: none; opacity: .88; }
.foot nav a:hover { opacity: 1; text-decoration: underline; }
.foot__h { margin: 0 0 4px; font: 800 .76rem/1 var(--f-ui); text-transform: uppercase; letter-spacing: .12em; opacity: .65; }
.foot__btn { background: none; border: 0; padding: 0; text-align: left; opacity: .88; font: inherit; color: inherit; }
.foot__copy { margin-top: 30px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--foot-ink) 18%, transparent); font-size: .85rem; opacity: .65; }

/* ---------------------------------------------------------------- Stil-Labor */
.stile__hint { color: var(--ink-soft); margin-top: -8px; }
.stile__list { display: grid; gap: 22px; margin-bottom: 40px; }
.stile__item { background: var(--surface); border: 1px solid color-mix(in srgb, var(--line) 18%, transparent); border-radius: 14px; padding: 14px; color: var(--ink); }
.stile__list .stile__item { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.stile__item.is-current { outline: 3px solid var(--accent); }
.stile__shots { display: grid; grid-template-columns: 3fr 1fr; gap: 10px; align-items: start; }
.stile__shots img { border-radius: 8px; border: 1px solid color-mix(in srgb, var(--line) 15%, transparent); width: 100%; }
.stile__item h3 { font-size: 1.35rem; margin: 6px 0 6px; }
.stile__item p { margin: 0 0 8px; font-size: .95rem; }
.stile__links { display: flex; gap: 8px; flex-wrap: wrap; }
.stile__key { color: var(--ink-soft); font-size: .85rem !important; }
.stile__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 20px; margin-bottom: 40px; }
.stile__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.stile__pair img { border-radius: 8px; width: 100%; }
.stile__grid--fav { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.stile__icons { display: flex; gap: 14px; align-items: end; padding: 14px; background: #FFF8EC; border-radius: 10px; margin-bottom: 8px; }
.devswitch { position: fixed; right: 12px; bottom: 12px; z-index: 300; display: flex; gap: 6px; align-items: center; background: #222; color: #fff; padding: 8px 10px;
  border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.35); font: 600 13px/1 system-ui, sans-serif; }
.devswitch button, .devswitch select { background: #3a3a3a; color: #fff; border: 0; border-radius: 6px; padding: 6px 8px; font: inherit; }
.devswitch a { color: #FFD66B; padding: 0 4px; }

/* ---------------------------------------------------------------- Handy & Tablet */
@media (max-width: 1060px) {
  .top__claim { display: none; }
  .grid--band { grid-template-columns: 1fr 1fr; }
  .grid--band .card--big { grid-column: 1 / -1; }
  .foot__in { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .lead__grid { grid-template-columns: 1fr; }
  .feature--hub .feature__link { grid-template-columns: 1fr; }
  .stile__list .stile__item { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .top__in { padding: 12px 0 10px; gap: 12px; }
  .search-mini { display: none; }
  .dice { margin-left: auto; width: 42px; height: 42px; }
  .logo__word { font-size: 1.5rem; }
  .logo__mark { width: 38px; height: 38px; }
  .rubriken__in { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 8px 0; width: 100%; padding-inline: 16px; }
  .rubriken__in::-webkit-scrollbar { display: none; }
  .search-mobile { display: block; padding: 0 0 12px; }
  .search-mobile input { width: 100%; border: var(--bw) solid color-mix(in srgb, var(--line) 25%, transparent); background: var(--surface); color: var(--ink);
    border-radius: var(--pill); padding: 11px 16px; font: 400 1rem/1 var(--f-ui); }
  .search-mobile .suggest { left: 0; right: 0; width: auto; }
  .lead { padding-top: 20px; }
  .ding { grid-template-columns: 1fr; gap: 12px; padding: 20px; }
  .ding__ico { width: 48px; height: 48px; }
  .ding__ico svg { width: 28px; height: 28px; }
  .grid--band, .grid--3, .grid--4 { grid-template-columns: 1fr; }
  .grid--band .card--big { grid-column: auto; }
  .card--big .card__title { font-size: 1.5rem; }
  .feature__body { padding: 18px 18px 20px; }
  .block__head { flex-wrap: wrap; }
  .hub__head { padding: 22px 20px; }
  .wordrow { grid-template-columns: 1fr; gap: 0; }
  .wordrow__media .ph { aspect-ratio: 5 / 1; }
  .wordrow__media .ph__motif { width: 12%; }
  .wordrow__body { padding: 12px 16px 16px !important; }
  .wordrow__body { padding: 10px 12px 10px 0; }
  .wordrow__body strong { font-size: 1.3rem; }
  .trytoday__in { grid-template-columns: 1fr; padding: 20px; }
  .wcard { padding: 16px; }
  .wcard__grid { grid-template-columns: 1fr 1fr; }
  .result a { grid-template-columns: 84px 1fr; }
  .result img, .result a > span:first-child { width: 84px; height: 56px; }
  .foot__in { grid-template-columns: 1fr; gap: 22px; }
  .stile__grid { grid-template-columns: 1fr; }
  .card, .card:nth-child(even) { transform: none; }
  .art__meta span + span::before, .card__meta span + span::before { content: none; }
  .art__meta, .card__meta { gap: 2px 14px; }
  .art__title { hyphens: auto; }
}