/*
Theme Name: SL Lookbook
Theme URI: https://www.my-sl-stories.de/
Author: Markes
Description: Magazin-Theme für My Second Life. Nummerierte Looks im Cinemascope-Raster, strukturiertes Creditsheet, andockende Navigation. Alle Schriften und Skripte liegen lokal im Theme, es werden keine externen Dienste geladen.
Version: 1.0.26
Requires at least: 6.0
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sl-lookbook
Tags: blog, two-columns, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   Schriften — lokal im Theme, keine externen Anfragen.
   Bodoni Moda und Archivo stehen unter der SIL Open Font
   License 1.1; das Mitliefern im Theme ist ausdrücklich erlaubt.
   ============================================================ */

@font-face {
  font-family: "Bodoni Moda SL";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/bodoni-moda-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Archivo SL";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/archivo-latin.woff2") format("woff2");
}

/* ============================================================
   Tokens
   ============================================================ */

:root {
  color-scheme: dark;

  --ground:    #141013;
  --ground-2:  #1d181c;
  --ground-3:  #262029;
  --ink:       #f0eaed;
  --ink-mid:   #b3a7ad;
  --ink-mute:  #928590;
  --rule:      #2e262c;
  --accent:    #d6516b;
  --accent-solid: #c43f59;
  --brass:     #c39a5c;
  --shadow:    rgba(0, 0, 0, 0.55);

  --f-display: "Bodoni Moda SL", "Bodoni MT", Didot, Georgia, serif;
  --f-text:    "Archivo SL", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  --shell: 78rem;
  --step: clamp(1rem, 3.5vw, 2.5rem);

  --masthead-h: 0px;
  --chrome: 4.5rem;

  scroll-padding-top: calc(var(--chrome) + 0.75rem);
}

@media (prefers-color-scheme: light) {
  :root {
    color-scheme: light;
    --ground:   #e9e6e8;
    --ground-2: #f4f2f3;
    --ground-3: #dedadc;
    --ink:      #191418;
    --ink-mid:  #4d434a;
    --ink-mute: #6f636b;
    --rule:     #d2ccd0;
    --accent:   #b32d4a;
    --accent-solid: #b32d4a;
    --brass:    #8a6a2f;
    --shadow:   rgba(25, 20, 24, 0.2);
  }
}

/* ============================================================
   Grundlagen
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 16px;
  line-height: 1.6;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
}

img, video, iframe, embed, object { max-width: 100%; }
img { height: auto; display: block; }

a { color: inherit; text-decoration: none; }

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.screen-reader-text,
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  background: var(--accent-solid);
  color: #fff;
  padding: 0.6rem 1rem;
  font-size: 0.85rem;
  z-index: 100;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

.wrap {
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: var(--step);
}

.eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
}

/* ============================================================
   Kopfleiste — rollt mit, dockt oben an
   ============================================================ */

.masthead {
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
}

.masthead__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.5rem var(--step) 1.2rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.masthead.is-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  box-shadow: 0 8px 28px var(--shadow);
}

.admin-bar .masthead.is-fixed { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .masthead.is-fixed { top: 46px; }
}

.masthead.is-fixed .masthead__in {
  padding-block: 0.55rem 0.5rem;
  align-items: center;
}

.masthead.is-fixed .site-title,
.masthead.is-fixed .custom-logo { font-size: clamp(1.1rem, 3vw, 1.45rem); }

.masthead.is-fixed .custom-logo { max-height: 2rem; width: auto; }

.masthead-spacer { height: 0; }

#nav-sentinel { display: block; height: 1px; margin-bottom: -1px; }

.site-title {
  font-family: var(--f-display);
  font-size: clamp(1.6rem, 4vw, 2.3rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  margin: 0;
  white-space: nowrap;
}

.site-title em { font-style: normal; color: var(--accent); }

.site-description { margin: 0.2rem 0 0; font-size: 0.8rem; color: var(--ink-mute); }

.custom-logo { max-height: 3rem; width: auto; }

.main-nav ul {
  display: flex;
  gap: 1.4rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  min-width: 0;
}

.main-nav a {
  display: inline-block;
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.main-nav a:hover,
.main-nav .current-menu-item > a {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

/* Navigation und Sprachumschalter stehen nebeneinander */
.masthead__nav {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  flex-wrap: wrap;
  min-width: 0;
}

/* Ohne diese Zeile schrumpft der Navigationsblock nicht: ein Flex-Element
   ist mindestens so breit wie sein Inhalt (`min-width: auto`), und die
   Menüpunkte tragen `white-space: nowrap`. Auf schmalen Fenstern schob die
   Leiste sich deshalb über den rechten Rand hinaus, statt zu scrollen —
   sichtbar wurde das nur nicht, weil `body` waagerecht abschneidet. */
.main-nav { min-width: 0; }

/* ---- Ausklappknopf (nur Telefon; die Regeln dazu im Umbruch unten) ---- */

/* Sichtbar wird der Knopf erst im Telefon-Umbruch. Die Zeile steht bewusst
   allein und mit niedriger Spezifität — sonst käme die Regel dort nicht mehr
   dagegen an. */
.nav-toggle { display: none; }

/* Alles Übrige mit `.masthead` davor: Elementors Kit legt **jedem** Knopf der
   Seite sein altes Rot unter — `.elementor-kit-6103 button` (0,1,1), samt
   Montserrat, Schlagschatten und runden Ecken. Gegen 0,1,1 verliert ein
   einzelner Klassenselektor, und die Kit-CSS lädt zudem nach dem Theme. */
.masthead .nav-toggle {
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.2rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-mid);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
}

.masthead .nav-toggle:hover { color: var(--ink); }

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.15rem;
  height: 1px;
  background: currentColor;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.nav-toggle__bars { position: relative; }

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

.nav-toggle__bars::before { top: -5px; }
.nav-toggle__bars::after { top: 5px; }

/* Offen: aus den drei Strichen wird ein Kreuz. */
.masthead.is-open .nav-toggle__bars { background: transparent; }
.masthead.is-open .nav-toggle__bars::before { transform: translateY(5px) rotate(45deg); }
.masthead.is-open .nav-toggle__bars::after { transform: translateY(-5px) rotate(-45deg); }

/* … und aus „Menü" wird „Schließen". Beide Beschriftungen stehen im Markup
   (header.php), damit sie übersetzbar bleiben. */
.nav-toggle__auf { display: none; }
.masthead.is-open .nav-toggle__zu { display: none; }
.masthead.is-open .nav-toggle__auf { display: inline; }

/* Der Untermenü-Knopf entsteht erst in nav.js und gilt nur im Panel. */
.sub-toggle { display: none; }

/* ---- Suche im Kopf ---- */

/* Ohne JavaScript täte der Knopf nichts — dann bleibt stattdessen das
   Formular offen stehen (siehe `.masthead__search` weiter unten). Erst
   nav.js setzt `search-js` und dreht beides um. Die Zeile steht bewusst
   allein und mit niedriger Spezifität. */
.search-toggle { display: none; }
.masthead.search-js .search-toggle { display: inline-flex; }

/* `.masthead` davor aus demselben Grund wie beim Ausklappknopf: Elementors
   `.elementor-kit-6103 button` (0,1,1) lädt nach dem Theme und legt jedem
   Knopf sein altes Rot samt Montserrat unter. */
.masthead .search-toggle {
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.2rem;
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-mid);
  font: inherit;
  font-size: 0.78rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease;
}

.masthead .search-toggle:hover { color: var(--ink); }
.masthead.is-searching .search-toggle { color: var(--accent); }

.search-toggle__icon {
  display: block;
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  flex: none;
}

/* „Suche" wird beim Aufklappen zu „Schließen" — beide Beschriftungen stehen
   im Markup (header.php), damit sie übersetzbar bleiben. */
.search-toggle__auf { display: none; }
.masthead.is-searching .search-toggle__zu { display: none; }
.masthead.is-searching .search-toggle__auf { display: inline; }

/* Eigene Zeile in der Kopfleiste: das 100-%-Flex-Element bricht unter
   Wortmarke und Navigation um. */
.masthead__search { flex: 1 0 100%; }

.masthead.search-js .masthead__search { display: none; }
.masthead.search-js.is-searching .masthead__search { display: block; }

.masthead__search .search-form {
  margin: 0.9rem 0 0.2rem auto;
  max-width: 30rem;
}

/* ---- Sprachumschalter ---- */

.lang-switch ul {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--ink-mute);
}

.lang-switch li + li::before {
  content: "/";
  margin-right: 0.55rem;
  color: var(--rule);
}

.lang-switch a {
  padding-block: 0.2rem;
  border-bottom: 1px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.lang-switch a:hover { color: var(--ink); }

.lang-switch [aria-current="true"] {
  color: var(--ink);
  border-bottom-color: var(--brass);
}

/* Untermenüs flach ausklappen statt Hover-Panel */
.main-nav .sub-menu {
  display: none;
  position: absolute;
  background: var(--ground-2);
  border: 1px solid var(--rule);
  padding: 0.5rem 0.7rem;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 5;
}
.main-nav li { position: relative; }
.main-nav li:hover > .sub-menu,
.main-nav li:focus-within > .sub-menu { display: flex; }

/* ============================================================
   Titelplatte
   ============================================================ */

.plate-hero { position: relative; margin-top: 2.2rem; }

.plate-hero__frame {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--ground-3);
}

.plate-hero__frame img { width: 100%; height: 100%; object-fit: cover; }

.plate-hero__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 7, 9, 0.85) 0%, rgba(10, 7, 9, 0.18) 44%, transparent 72%);
}

.plate-hero__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0 var(--step) 1.4rem;
  display: flex;
  align-items: flex-end;
  gap: clamp(0.8rem, 3vw, 2rem);
  z-index: 2;
}

.plate-no {
  font-family: var(--f-display);
  font-weight: 400;
  line-height: 0.78;
  letter-spacing: -0.03em;
  color: #fff;
  font-size: clamp(3.2rem, 11vw, 8.5rem);
  flex: none;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.plate-hero__text { padding-bottom: 0.7rem; min-width: 0; }

.plate-hero__eyebrow {
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin: 0;
}

.plate-hero__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 3.4vw, 2.4rem);
  line-height: 1.1;
  margin: 0.2rem 0 0.45rem;
  color: #fff;
  text-wrap: balance;
}

.plate-hero__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  margin: 0;
  list-style: none;
  padding: 0;
}

/* ============================================================
   Markenleiste
   ============================================================ */

.brands {
  margin-top: 2.6rem;
  border-block: 1px solid var(--rule);
  padding-block: 1rem;
}

.brands__head {
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.8rem;
  font-weight: 400;
}

.brands__list, .tagcloud, .archive-desc .button {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.brands__list a, .tagcloud a, .plate__link, .archive-desc .button a {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem; 
  border: 1px solid var(--rule);
  padding: 0.32rem 0.7rem;
  font-size: 0.8rem;
  color: var(--ink-mid);
  transition: border-color 0.18s ease, color 0.18s ease, background-color 0.18s ease;
}
.brands__list a:hover, .tagcloud a:hover, .plate__link:hover, .archive-desc .button a:hover { color: var(--ink); border-color: var(--accent); background: var(--ground-2); }

.brands__n { font-size: 0.7rem; color: var(--ink-mute); font-variant-numeric: tabular-nums; }

/* ============================================================
   Plattenraster
   ============================================================ */

.grid-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin: 3rem 0 1.2rem;
  flex-wrap: wrap;
}

.grid-head h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.4rem, 3.2vw, 2rem);
  margin: 0;
  line-height: 1.1;
}

.plates {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(1.2rem, 3vw, 2.4rem) clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.plate { min-width: 0; }
.plate--wide { grid-column: span 7; }
.plate--slim { grid-column: span 5; }

.plate__link { display: block; }

.plate__frame {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--ground-3);
}

.plate__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s cubic-bezier(0.2, 0.6, 0.3, 1);
}

.plate__link:hover .plate__frame img { transform: scale(1.03); }

.plate__num {
  position: absolute;
  left: 0.6rem;
  bottom: 0.35rem;
  font-family: var(--f-display);
  font-size: clamp(1.7rem, 4.5vw, 3rem);
  line-height: 0.8;
  color: #fff;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.plate__body { padding-top: 0.75rem; }

.plate__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  line-height: 1.15;
  margin: 0 0 0.35rem;
  text-wrap: balance;
  transition: color 0.18s ease;
}

.plate__link:hover .plate__title { color: var(--accent); }

.plate__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.7rem;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  list-style: none;
  padding: 0;
}

.plate__meta .sep { color: var(--rule); }

.plate--essay .plate__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(10, 7, 9, 0.6), transparent 55%);
}

.tag-essay {
  display: inline-block;
  font-size: 0.64rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass);
  border: 1px solid var(--brass);
  padding: 0.15rem 0.45rem;
  margin-bottom: 0.5rem;
}

/* ============================================================
   Einzelbeitrag
   ============================================================ */

.post-hero { position: relative; margin-top: 1.8rem; }

.post-hero__frame {
  position: relative;
  aspect-ratio: 2 / 1;
  overflow: hidden;
  background: var(--ground-3);
}

.post-hero__frame img { width: 100%; height: 100%; object-fit: cover; }

.post-head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0 clamp(1rem, 3vw, 2.2rem);
  align-items: start;
  margin-top: 1.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--rule);
}

.post-head__no {
  font-family: var(--f-display);
  font-size: clamp(2.6rem, 8vw, 5.5rem);
  line-height: 0.8;
  color: var(--accent);
  letter-spacing: -0.03em;
}

.post-head__title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4.2vw, 2.9rem);
  line-height: 1.08;
  margin: 0 0 0.5rem;
  text-wrap: balance;
}

.post-head__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0;
  list-style: none;
  padding: 0;
}

.post-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 22rem;
  gap: clamp(1.8rem, 4vw, 3.5rem);
  margin-top: 2.2rem;
  align-items: start;
}

/* Ohne Creditsheet (Erzähltext, statische Seite) läuft der Text einspaltig,
   aber in lesbarer Breite statt über die volle Seite. */
.post-cols--single {
  grid-template-columns: minmax(0, 68ch);
  justify-content: center;
}

/* Volle Schalenbreite — für Seiten, die ihr Layout selbst mitbringen
   (Elementor-Sektionen, SiteOrigin-Raster). Kein schmaler Lesekorridor, aber
   auch keine Creditsheet-Spalte: eine einzige Spalte über die ganze Schale. */
.post-cols--wide {
  grid-template-columns: minmax(0, 1fr);
  justify-content: stretch;
}

/* Baukastenseiten laufen randlos: `sl_lookbook_page_article()` gibt sie ohne
   `.wrap` aus (Titel und Beitragsbild bleiben in der Schale). Seit 1.0.22 gilt
   dasselbe für Beiträge, die einen Container auf „Volle Breite" mitbringen
   (`sl_lookbook_post_brings_layout()`, single.php) — dort fällt dafür die
   Creditsheet-Seitenspalte weg und das Sheet rückt als `.credits--inline`
   unter den Inhalt. Vollbreite und Seitenspalte gehen nicht zusammen: was bis
   zum Fensterrand läuft, liefe über die Spalte.

   Grund ist Elementors Breitenmodell — ein Container ganz oben in der Seite
   misst sich am Elternelement (`max-width: min(100%, var(--width))`,
   `--width: 100%`). In der 78-rem-Schale hieße „Vollbreite" 78 rem. Ohne
   Schale stimmen beide Fälle von selbst:

   · Vollbreite (`.e-con-full`, gestreckte Sektion) füllt das Fenster,
   · Boxed (`.e-con-boxed`) bleibt bei seiner Inhaltsbreite und steht mittig —
     `--content-width: min(100%, var(--container-max-width, 1140px))`, die
     Elementor je Breakpoint in der Kit-CSS setzt.

   Die Seitenabstände kommen damit ebenfalls aus Elementor (Container-Polster
   der Kit-Einstellungen), nicht mehr aus `var(--step)`. */
.post-cols--bleed {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

.post-head--page { grid-template-columns: minmax(0, 1fr); }

.post-body { min-width: 0; }

.post-body p {
  max-width: 62ch;
  margin: 0 0 1.1rem;
  color: var(--ink-mid);
  text-wrap: pretty;
}

.post-body > p:first-of-type {
  font-size: 1.12rem;
  color: var(--ink);
  line-height: 1.55;
}

.post-body h2,
.post-body h3,
.post-body h4 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 2rem 0 0.6rem;
  scroll-margin-top: var(--chrome);
}

.post-body h2 { font-size: 1.5rem; }
.post-body h3 { font-size: 1.25rem; }
.post-body h4 { font-size: 1.1rem; }

.post-body a { color: var(--accent); border-bottom: 1px solid transparent; }
.post-body a:hover { border-bottom-color: var(--accent); }

.post-body ul, .post-body ol { color: var(--ink-mid); max-width: 62ch; }

/* Die Zeilenlänge oben gilt dem Lesen — sie darf nur Fließtext-Aufzählungen
   treffen. Die Listen des Themes sind Raster und füllen die ganze Spalte:
   gedeckelt kämen im Empfehlungsraster statt drei nur zwei Karten je Reihe,
   und die Farbe der Metazeile würde überschrieben (`.post-body ul` ist
   spezifischer als `.plate__meta`). */
.post-body .more__list,
.post-body .entry-attachments { max-width: none; color: inherit; }

/* Fließtext auch dann auf Lesebreite halten, wenn er nicht in `<p>` steckt.
   In vier alten Beiträgen (502, 615, 762, 9850) liegt der Text roh im
   Texteditor-Widget, ohne Absatzauszeichnung — die Regel `.post-body p` greift
   dort nicht, und seit diese Beiträge über die volle Schale laufen, zöge sich
   die Zeile auf 1148 px. Gedeckelt wird deshalb der Texteditor selbst.

   Eingegrenzt auf `.single-look` (die Beitragshülle) und `--wide`: auf
   Baukastenseiten benutzen dieselben Widgets ihre volle Breite, dort wäre ein
   Deckel falsch. */
.single-look .post-cols--wide .elementor-widget-text-editor > .elementor-widget-container {
  max-width: 62ch;
}

/* Die Metazeile behält ihr gedämpftes Grau — `inherit` wäre hier falsch. */
.post-body .plate__meta { max-width: none; color: var(--ink-mute); }

/* ---- Plattenraster im Beitragsfluss ----

   `sl_lookbook_plates_for_post_grid()` ersetzt die EA-Beitragswand der
   Baukastenseiten durch dasselbe Raster wie auf der Startseite. Dort steht es
   frei in der Schale, hier in der Lesespalte — und deren Regeln sind fast alle
   spezifischer als die Plattenklassen (0,1,1 gegen 0,1,0): `.post-body ul`
   kappt das Raster auf 62 Zeichen, `.post-body h3` überschreibt Größe und
   Abstand des Plattentitels, `.post-body a` färbt die ganze Karte im Akzent und
   unterstreicht sie beim Überfahren. Deshalb hier zurückgenommen. */
.post-body .plates { max-width: none; color: inherit; }

/* ---- Bildergalerie ------------------------------------------------------
   Raster mit Filterleiste. Die Leiste ist ohne JavaScript verborgen: erst
   `assets/js/gallery.js` setzt `gallery--js` und macht sie damit sichtbar —
   sonst stünden Knöpfe da, die nichts tun. Ohne Skript sind schlicht alle
   Bilder zu sehen, dasselbe Muster wie bei der Telefonnavigation.

   Wie beim Plattenraster stehen die Regeln doppelt mit `.post-body` davor:
   die Lesespalte ist mit 0,1,1 spezifischer als eine einzelne Klasse und
   kapert sonst Breite, Farbe und Aufzählungspunkte. */
.gallery { margin: 2rem 0; }

.gallery__filter {
  display: none;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.2rem;
}

.gallery--js .gallery__filter { display: flex; }

/* Mit `body` davor, weil Elementors Kit-CSS jedem `button` der Seite sein
   altes Rot unterlegt (`.elementor-kit-6103 button`, 0,1,1, später geladen). */
body .gallery__btn {
  padding: 0.42rem 0.9rem;
  background: transparent;
  border: 1px solid var(--rule);
  border-radius: 0;
  box-shadow: none;
  color: var(--ink-mid);
  font-family: var(--f-text);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

body .gallery__btn:hover { color: var(--ink); border-color: var(--ink-mute); }

body .gallery__btn.is-active {
  color: var(--ink);
  border-color: var(--accent);
}

.gallery__grid,
.post-body .gallery__grid {
  display: grid;
  gap: 1rem;
  list-style: none;
  margin: 0;
  padding: 0;
  max-width: none;
  color: inherit;
}

.gallery__grid--2 { grid-template-columns: repeat(2, 1fr); }
.gallery__grid--3 { grid-template-columns: repeat(3, 1fr); }
.gallery__grid--4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .gallery__grid--3,
  .gallery__grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
  .gallery__grid--2,
  .gallery__grid--3,
  .gallery__grid--4 { grid-template-columns: 1fr; }
}

.gallery__item { margin: 0; }

.gallery__link,
.post-body .gallery__link {
  display: block;
  color: inherit;
  border-bottom: 0;
}

.gallery__frame {
  overflow: hidden;
  background: var(--ground-2);
  aspect-ratio: 3 / 2;
}

.gallery__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery__link:hover .gallery__img { transform: scale(1.03); }

.gallery__body { padding: 0.55rem 0 0; }

.gallery__title,
.post-body .gallery__title {
  display: block;
  font-family: var(--f-display);
  font-size: 1rem;
  line-height: 1.25;
  color: var(--ink);
}

.gallery__text,
.post-body .gallery__text {
  display: block;
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}

.gallery__leer {
  color: var(--ink-mute);
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

@media (prefers-reduced-motion: reduce) {
  .gallery__img { transition: none; }
  .gallery__link:hover .gallery__img { transform: none; }
}

/* Die Elementor-Hülle der Teamkarte still stellen.
   Auf den Redakteursseiten trägt sie noch die Farben des alten hellen Themes
   (Fläche #f5f5f5, Rahmen 3 px im Rostrot #c83d1d) — gemessen ragte sie unten
   23 px unter der Karte hervor. Früher gab es dafür eine Regel, die sie auf die
   Theme-Token umfärbte; das war richtig, solange das EA-Widget selbst keine
   Fläche mitbrachte. `.team` bringt Fläche und Rahmen jetzt mit, es stünde dort
   also ein zweiter Rahmen. Deshalb neutralisieren statt umfärben.
   `!important`, weil Elementors seitenbezogene CSS nach dem Theme lädt und
   spezifischer ist. Wer die Karte gestalten will, nimmt den Stil-Reiter des
   Widgets — der zielt auf `.team`. */
.elementor-widget-sl-team > .elementor-widget-container {
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* ---- Teamkarte ----------------------------------------------------------
   Eine Sofortbildaufnahme: Bild oben, darunter Name, Rolle und Symbolreihe.
   Die Kippung kommt nicht von hier, sondern aus Elementors
   `_transform_rotateZ_effect` am Element — sie überlebt dadurch den Wechsel
   vom alten EA-Widget auf `sl-team`.

   Die Regeln stehen doppelt mit `.post-body` davor, weil die Lesespalte
   spezifischer ist als eine einzelne Klasse (0,1,1 gegen 0,1,0) und sonst
   Schriftgröße, Farbe und Abstände kapert — dieselbe Falle wie beim
   Plattenraster. */
.team,
.post-body .team {
  position: relative;
  margin: 0;
  padding: 0.9rem 0.9rem 1.1rem;
  background: var(--ground-2);
  border: 1px solid var(--accent);
  max-width: 22rem;
}

/* Overlay-Ebene für den Stil-Reiter. Ohne eingestellte Farbe ist sie
   durchsichtig und damit wirkungslos; `pointer-events: none` hält Klicks von
   den Sociallinks darunter fern. */
.team::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: transparent;
  pointer-events: none;
  z-index: 0;
}

/* Inhalt über das Overlay heben. */
.team__frame,
.team__body { position: relative; z-index: 1; }

.team--center { text-align: center; }
.team--left   { text-align: left; }
.team--right  { text-align: right; }

.team__frame { margin: 0 0 0.9rem; overflow: hidden; }

.team__img {
  width: 100%;
  height: auto;
  display: block;
}

.team__body { margin: 0; }

.team__name,
.post-body .team__name {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--accent);
  margin: 0 0 0.2rem;
}

.team__role,
.post-body .team__role {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mid);
  margin: 0;
}

.team__text,
.post-body .team__text {
  font-size: 0.9rem;
  color: var(--ink-mid);
  margin: 0.7rem 0 0;
  max-width: none;
}

.team__social,
.post-body .team__social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  max-width: none;
}

.team--center .team__social { justify-content: center; }
.team--right .team__social  { justify-content: flex-end; }

.team__social a,
.post-body .team__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 44 px Zielfläche — auf dem Telefon sonst kaum zu treffen. */
  min-width: 44px;
  min-height: 44px;
  color: var(--accent);
  font-size: 1.05rem;
  border-bottom: 0;
  transition: color 0.18s ease, transform 0.18s ease;
}

.team__social a:hover,
.post-body .team__social a:hover {
  color: var(--ink);
  transform: translateY(-2px);
  border-bottom: 0;
}

.team__social svg { width: 1em; height: 1em; fill: currentColor; }

/* Die Hülle des Widgets „Plattenraster". Anders als `.more` am Beitragsfuß
   trägt sie keine Trennlinie: der Block steht mitten in einer Seite, wo eine
   Linie eine Gliederung behaupten würde, die es nicht gibt.
   `.post-body h2` (0,1,1) würde die Überschrift sonst kapern — dieselbe Falle
   wie bei `.plate__title` eine Regel weiter oben. */
.plates-block { margin: 2.5rem 0; }

.plates-block > h2,
.post-body .plates-block > h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 1.1rem;
  scroll-margin-top: var(--chrome);
}

.post-body .plate__title {
  font-size: clamp(1.05rem, 2.2vw, 1.4rem);
  margin: 0 0 0.35rem;
}

.post-body .plate__link,
.post-body .plate__link:hover {
  color: inherit;
  border-bottom: 0;
}

.post-body img,
.post-body figure { margin-inline: 0; }

.post-body figure { margin-block: 1.4rem; }

.post-body figcaption {
  font-size: 0.78rem;
  color: var(--ink-mute);
  margin-top: 0.4rem;
}

.post-body blockquote {
  margin: 1.4rem 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--accent);
  color: var(--ink);
}

.post-body table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.post-body th, .post-body td { padding: 0.5rem 0.6rem; border-bottom: 1px solid var(--rule); text-align: left; }

.post-body .wp-block-image,
.post-body .wp-caption { max-width: 100%; }

/* ---- Elementor im Spaltenlayout bändigen ----

   Elementor streckt Sektionen mit „elementor-section-stretched" per JavaScript
   auf die volle Fensterbreite: es schreibt Breite und Versatz als
   Inline-Stil an das Element. Im Originaltheme läuft der Inhalt über die ganze
   Seite, dort passt das. Hier steht er in einer 760-px-Spalte neben dem
   Creditsheet — ungebremst sprengt die Sektion die Spalte, läuft über die
   volle Fensterbreite und unter dem klebenden Creditsheet hindurch.

   Inline-Stile lassen sich nur mit !important überstimmen.

   Auf Baukastenseiten (`.post-cols--bleed`) ist das kein Verlust: dort steht
   `.post-body` schon randlos, „100 %" ist die Fensterbreite. Und zwar die
   nutzbare — anders als 100vw rechnet sie den Rollbalken heraus und erzeugt
   keinen waagerechten Überlauf.

   Seit 1.0.22 gilt das auch für randlose **Beiträge**: Wer einen Beitrag über
   `_sl_bleed` von Hand randlos stellt, obwohl er noch auf Sektionen steht,
   bekommt seine gestreckten Sektionen damit auf volle Fensterbreite —
   gemessen 1905 px bei 1905 px Fenster, ohne Überlauf. Es braucht also keine
   eigene Regel für den Fall. */
.post-body .elementor-section-stretched {
  width: 100% !important;
  max-width: 100% !important;
  left: auto !important;
  right: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Visual Portfolio bringt dieselbe Unart mit: „Stretch" schreibt per
   JavaScript Fensterbreite und einen negativen Rand ins Element, das Raster
   sprengt die Schale und liegt auf beiden Seiten unter dem Fensterrand.
   Ebenfalls nur mit !important zu bändigen. */
.post-body .vp-portfolio__stretch {
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Elementor-Spalten dürfen im schmalen Rahmen umbrechen statt zu quetschen. */
.post-body .elementor-container { flex-wrap: wrap; }

.post-body .elementor-widget-wrap { min-width: 0; }

/* ---- Baukasten-Flächen auf die Theme-Palette ziehen ----

   Die Seiten stammen aus dem hellen Originaltheme: Sektionen und Karten tragen
   Weiß- und Grautöne (#f5f5f5, rgba(255,255,255,.76)) direkt in der von
   Elementor erzeugten Seiten-CSS, dazu das alte Rostrot #c83d1d. Auf dem
   dunklen Grund sind das leuchtende Platten mit hellem Text darauf — teils
   unlesbar, im Fall der schwarzen Überschrift unsichtbar.

   Die Farben werden hier nicht gelöscht, sondern auf die Token gelegt: im
   Dunkelmodus dunkle Flächen, im Hellmodus wieder helle. Elementor schreibt
   sie elementbezogen (`.elementor-6109 .elementor-element-4d78…`, 0,2,0), das
   Rot der Widgets kommt aus dem Plugin — beides braucht !important, weil die
   Seiten-CSS nach dem Theme geladen wird.

   Gilt für alle Baukastenseiten, nicht nur die Redakteursseiten. */
.post-body .elementor-section > .elementor-background-overlay,
.post-body .elementor-inner-section {
  background-color: var(--ground-2) !important;
  background-image: none !important;
}

.post-body .elementor-inner-section {
  border: 1px solid var(--rule);
}

/* Dieselben Flächen in der Container-Fassung.

   Die Regeln oben greifen an der Struktur (`elementor-section`,
   `elementor-inner-section`). Wird eine Seite auf Container umgestellt, gibt es
   diese Klassen nicht mehr — die Fläche heißt dann `.e-con` und die alte
   Hellfarbe schlägt ungebremst durch. Auf „Luanes World" war das eine
   1905 × 3859 px große #F5F5F5-Platte auf dem dunklen Grund.

   Statt die Selektorenliste zu verdoppeln, wird die Farbe an ihrer Quelle
   umgelegt: #F5F5F5 ist die globale Elementor-Farbe `133b681` („lightgray") aus
   dem Kit und steckt in 71 Objekten — 179-mal als Hintergrund, Overlay oder
   Rahmen. CSS-Variablen erben, und die nähere Deklaration gewinnt gegen die des
   Vorfahren (`.elementor-kit-6103` am body), unabhängig von der
   Ladereihenfolge. Kein !important nötig.

   Wirkt dadurch für beide Strukturen zugleich und überlebt jede weitere
   Section→Container-Umstellung.

   Eine bewusste Nebenwirkung: dieselbe Farbe steht an genau einer Stelle als
   Linkfarbe (`color_link`); dieser Link nimmt hier den Flächenton an. */
.post-body {
  --e-global-color-133b681: var(--ground-2);
}

/* Beitragswand und Teamkarten der Essential Addons sind auf die eigenen
   Widgets `sl-plates` und `sl-team` umgestellt; ihre Regeln sind entfallen.
   Gestaltet wird jetzt in den Abschnitten „Teamkarte" und beim Plattenraster.
   Vom Plugin bleibt nur noch der Lesefortschritt weiter unten. */

/* Überschriften folgen der Theme-Schrift und -Farbe. Ein Teil der Seiten setzt
   sie in der Elementor-CSS auf Schwarz — auf dem dunklen Grund unsichtbar. Die
   Angabe ist elementbezogen und steht in einer später geladenen Datei; ohne
   !important bliebe sie stehen. */
.post-body .elementor-widget-heading .elementor-heading-title {
  color: var(--ink) !important;
  font-family: var(--f-display);
}

/* ---- Lesefortschritt (Essential Addons) ----

   Der Balken gehört nicht dem Theme, sondern den Seiteneinstellungen der
   Elementor-Seite; er hängt fest oben im Fenster (`position: fixed`,
   z-index 999999) und liegt damit über der Kopfleiste. Sein Rot #810000 ist die
   Sekundärfarbe des alten Palm-Beach-Themes und steht in der seitenbezogenen
   Elementor-CSS, die nach dem Theme lädt.

   Aus dem 5-px-Block wird eine 3-px-Linie im Akzent: dieselbe Farbe, mit der
   die Kopfleiste den aktiven Menüpunkt unterstreicht, und dünn genug, um die
   Kopfleiste nicht zu zerschneiden. Die Schiene bleibt durchsichtig — eine
   durchlaufende Linie über die ganze Fensterbreite konkurriert sonst mit der
   Unterkante der Kopfleiste.

   `!important` allein reicht hier **nicht**: die Seiten-CSS setzt Höhe und
   Farbe selbst mit `!important`, und zwar über
   `.eael-reading-progress-wrap .eael-reading-progress …` (0,2,0 bzw. 0,3,0).
   Bei gleicher Wichtigkeit entscheidet die Spezifität, bei Gleichstand die
   spätere Datei — und das ist ihre. Deshalb dieselbe Kette plus `body`. */
body .eael-reading-progress-wrap .eael-reading-progress,
body .eael-reading-progress-wrap .eael-reading-progress .eael-reading-progress-fill {
  height: 3px !important;
}

body .eael-reading-progress-wrap .eael-reading-progress {
  background-color: transparent !important;
}

body .eael-reading-progress-wrap .eael-reading-progress .eael-reading-progress-fill {
  background-color: var(--accent) !important;
  background-image: none !important;
}

/* ---- Lesefortschritt (eigene Leiste) ------------------------------------
   Ersetzt die Erweiterung der Essential Addons: dieselbe Optik — 3 px im
   Akzent auf durchsichtiger Schiene —, aber ohne Plugin.

   `z-index: 70` liegt über der andockenden Kopfleiste (60), damit die Linie
   auch dann sichtbar bleibt, wenn die Leiste oben klebt. Sie ist deutlich
   niedriger als die 999999 des Plugins: über Menü-Panel und Lightbox soll die
   Linie nicht liegen.

   Gefüllt wird über `transform: scaleX()` statt über die Breite — das läuft
   auf dem Compositor und erzwingt kein Neuberechnen des Layouts bei jedem
   Bildlauf.

   **Die Schiene ist schwach getönt**, nicht durchsichtig. Der Entwurf ließ sie
   durchsichtig, damit keine durchgehende Linie mit der Unterkante der
   Kopfleiste konkurriert. In der Praxis war die Leiste dadurch am Seitenanfang
   buchstäblich nicht vorhanden — kein Hinweis, dass es sie gibt. `var(--rule)`
   ist das Haarlinien-Token des Themes: dezent genug, um nicht zu konkurrieren,
   und es passt sich Hell und Dunkel von selbst an. */
.readbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--rule);
  z-index: 70;
  pointer-events: none;
}

.readbar__fill {
  display: block;
  height: 100%;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  will-change: transform;
}

.admin-bar .readbar { top: 32px; }

@media screen and (max-width: 782px) {
  .admin-bar .readbar { top: 46px; }
}

.entry-attachments {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  margin: 1.6rem 0 0;
  padding: 0;
  list-style: none;
}

.entry-attachments img { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; }

/* Der Bildlink öffnet Elementors Betrachter.
   Das Vorzeichen `.post-body` ist nötig, weil `.post-body a` (0,1,1) sonst die
   Akzentfarbe und den Unterstrich der Fließtextlinks aufzwingt — dieselbe
   Stelle, an der schon `.gallery__link` ausgenommen ist. Der Fokusring kommt
   global aus der Regel oben. */
.entry-attachments__link,
.post-body .entry-attachments__link {
  position: relative;
  display: block;
  color: inherit;
  border-bottom: 0;
  overflow: hidden;
}

/* Die überzähligen Aufnahmen hängen nur als Glieder der Bilderfolge im Markup.
   Das `hidden`-Attribut allein genügt hier nicht sicher: eine spätere
   `display`-Regel auf `li` schlüge es. */
.entry-attachments__folge[hidden] { display: none; }

/* „+7" am letzten Bild — der einzige Hinweis darauf, dass der Betrachter mehr
   zeigt als das Raster. */
.entry-attachments__mehr {
  /* Oben rechts, nicht unten: unten rechts sitzt in diesen Aufnahmen das
     Wasserzeichen der Fotografin. */
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  padding: 0.15rem 0.5rem;
  /* Der Kasten liegt auf einem Foto, nicht auf der Seitenfläche — deshalb
     fest dunkel mit heller Schrift statt `--ground`/`--ink`. Im Hellmodus
     kippt `--ink` auf ein dunkles Grau und wäre hier unlesbar. */
  background: rgba(20, 16, 19, 0.82);
  color: #f0eaed;
  font-family: var(--f-text);
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.entry-attachments__link img { transition: transform 0.4s ease; }
.entry-attachments__link:hover img { transform: scale(1.03); }

@media (prefers-reduced-motion: reduce) {
  .entry-attachments__link img { transition: none; }
  .entry-attachments__link:hover img { transform: none; }
}

/* ============================================================
   Creditsheet
   ============================================================ */

.credits {
  position: sticky;
  top: calc(var(--chrome) + 0.6rem);
  border: 1px solid var(--rule);
  background: var(--ground-2);
  padding: 1.2rem 1.25rem 1.35rem;
}

/* Im Textfluss platziert (Elementor-Widget oder Shortcode) darf es nicht
   kleben — es steht ja mitten im Inhalt und hat keine eigene Spalte. */
.credits--inline {
  position: static;
  max-width: 34rem;
  margin: 2rem 0;
}

.credits--leer {
  color: var(--ink-mute);
  font-size: 0.85rem;
}

.credits--leer p { margin: 0; }

.credits__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.7rem;
  border-bottom: 1px solid var(--rule);
}

.credits__head h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.25rem;
  margin: 0;
  line-height: 1;
}

.credits__sum {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-variant-numeric: tabular-nums;
}

.credits__group + .credits__group { margin-top: 1.3rem; }

.credits__cat {
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 1px solid var(--rule);
  font-weight: 400;
}

.credits dl { margin: 0; display: grid; gap: 0.75rem; }

.credit { display: grid; gap: 0.1rem; min-width: 0; }

.credit dt {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.credit dd { margin: 0; min-width: 0; }

.credit__item {
  display: block;
  font-size: 0.94rem;
  line-height: 1.35;
  overflow-wrap: break-word;
  color: var(--ink-mid);
}

.credit__brand {
  font-family: var(--f-display);
  font-weight: 600;
  color: var(--ink);
}

a.credit__brand { border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
a.credit__brand:hover { color: var(--accent); border-bottom-color: var(--accent); }

.credit__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.7rem;
  margin-top: 0.2rem;
}

.price {
  font-size: 0.84rem;
  font-variant-numeric: tabular-nums;
  color: var(--brass);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.price--alt { color: var(--ink-mute); }

.event {
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  border: 1px solid var(--rule);
  padding: 0.1rem 0.4rem;
  transition: color 0.18s ease, border-color 0.18s ease;
}
a.event:hover { color: var(--accent); border-color: var(--accent); }

.credits__place {
  margin-top: 1.3rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
  font-size: 0.84rem;
  color: var(--ink-mid);
  text-wrap: pretty;
}

.credits__place span {
  display: block;
  font-size: 0.66rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 0.3rem;
}

/* ============================================================
   Weiterlesen, Blättern, Fuß
   ============================================================ */

.more { margin-top: 3.5rem; padding-top: 1.6rem; border-top: 1px solid var(--rule); }

.more h2 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 1.1rem;
  scroll-margin-top: var(--chrome);
}

.more__list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ---- Blätterlinks ----

   Drei Quellen, ein Aussehen: `sl_lookbook_pagination()` (Archiv, Blogindex,
   Suche), `wp_link_pages()` in geteilten Beiträgen und die
   Kommentar-Blätterung des Cores.

   `paginate_links()` liefert mit `type => list` eine **Liste**: ein `<ul>`, das
   selbst die Klasse `page-numbers` trägt, und darin ein `<li>` je Seite. Das
   hatte zwei Folgen — die Kästchenregel unten griff auch auf das `<ul>` und
   legte einen Rahmen um die ganze Blätterung, und die `<li>` blieben
   `list-item` mit Aufzählungspunkt, standen also untereinander statt in einer
   Reihe. Deshalb bekommt die Hülle hier ein Flexraster und die Kästchenregel
   ein `:not(ul)`. */
.pagination,
.comments-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pagination {
  margin-top: 3rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rule);
}

.comments-pagination { margin-top: 1.6rem; }

/* Die Liste aus `paginate_links()` ist selbst ein Flex-Kind — sie reiht ihre
   Punkte weiter, statt sie zu stapeln. */
.pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 0;
}

.pagination li { margin: 0; }

/* Das Kästchen gilt den einzelnen Punkten, nicht der Liste ringsum.
   `wp_link_pages()` (geteilte Beiträge) hängt seine Links ohne Klasse direkt in
   die Hülle — daher der Kindselektor. */
.pagination .page-numbers:not(ul),
.pagination > a,
.comments-pagination .page-numbers {
  display: inline-block;
  padding: 0.35rem 0.7rem;
  border: 1px solid var(--rule);
  color: var(--ink-mid);
}

.pagination .page-numbers:not(ul):hover,
.pagination > a:hover,
.comments-pagination .page-numbers:hover { color: var(--ink); border-color: var(--accent); }

.pagination .page-numbers.current,
.comments-pagination .page-numbers.current { background: var(--accent-solid); color: #fff; border-color: var(--accent-solid); }

/* Die Punkte zwischen den Seitenzahlen sind kein Ziel — kein Kästchen. */
.pagination .page-numbers.dots,
.comments-pagination .page-numbers.dots {
  border-color: transparent;
  color: var(--ink-mute);
  padding-inline: 0.2rem;
}

.site-foot {
  margin-top: 4.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.78rem;
  color: var(--ink-mute);
}

.site-foot__in {
  max-width: var(--shell);
  margin: 0 auto;
  padding: 1.6rem var(--step) 3rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
}

.site-foot p { margin: 0; }

.site-foot ul {
  display: flex;
  gap: 1.1rem;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-foot a { border-bottom: 1px solid transparent; transition: color 0.18s ease, border-color 0.18s ease; }
.site-foot a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ============================================================
   Startseiten-Extras, Archivtext, Kommentare
   ============================================================ */

.grid-head--more {
  justify-content: center;
  border-top: 1px solid var(--rule);
  padding-top: 1.8rem;
  margin-top: 2.5rem;
}

.more-link {
  font-family: var(--f-display);
  font-size: 1.2rem;
  color: var(--ink);
  border-bottom: 2px solid var(--accent);
  padding-bottom: 0.15rem;
  transition: color 0.18s ease;
}
.more-link:hover { color: var(--accent); }

.archive-desc {
  margin-top: 0.8rem;
  max-width: 62ch;
  color: var(--ink-mid);
}
.archive-desc p { margin: 0 0 0.6rem; }

.comments {
  max-width: 68ch;
  margin: 3.5rem auto 0;
  padding-top: 1.6rem;
  border-top: 1px solid var(--rule);
}

.comments__title,
.comment-reply-title {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 1.4rem;
  margin: 0 0 1.2rem;
}

.comment-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
}

.comment-list ol { list-style: none; padding-left: 1.4rem; }

.comment-list li { margin-bottom: 1.4rem; }

.comment-body {
  border: 1px solid var(--rule);
  padding: 1rem 1.1rem;
  background: var(--ground-2);
}

.comment-author { font-weight: 600; }
.comment-author .avatar { border-radius: 50%; margin-right: 0.6rem; vertical-align: middle; }
.comment-metadata { font-size: 0.75rem; color: var(--ink-mute); margin-top: 0.2rem; }
.comment-metadata a { color: inherit; }

.comment-form { display: grid; gap: 0.9rem; }
.comment-form label { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-mute); }

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
  width: 100%;
  background: var(--ground-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.7rem;
}

.comment-form textarea { min-height: 8rem; resize: vertical; }

.comment-form .submit,
.form-submit input {
  background: var(--accent-solid);
  color: #fff;
  border: 0;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  justify-self: start;
}

.comment-form .submit:hover,
.form-submit input:hover { filter: brightness(1.08); }

.comments__closed { color: var(--ink-mute); font-style: italic; }

/* ============================================================
   Suche und Fehlerseite
   ============================================================ */

.page-intro { margin-top: 2.4rem; padding-bottom: 1.2rem; border-bottom: 1px solid var(--rule); }

.page-intro h1 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: clamp(1.6rem, 4vw, 2.6rem);
  margin: 0 0 0.4rem;
  line-height: 1.1;
  text-wrap: balance;
}

.search-form { display: flex; gap: 0.5rem; margin-top: 1.2rem; flex-wrap: wrap; }

.search-form input[type="search"] {
  flex: 1 1 14rem;
  min-width: 0;
  background: var(--ground-2);
  border: 1px solid var(--rule);
  color: var(--ink);
  font: inherit;
  font-size: 0.9rem;
  padding: 0.5rem 0.7rem;
}

/* `body` davor aus demselben Grund wie beim Ausklappknopf: Elementors
   `.elementor-kit-6103 button` ist gleich spezifisch (0,1,1) und lädt später —
   ohne das Vorzeichen trug der Suchknopf site-weit das alte Rot #810000
   samt Montserrat. */
body .search-form button {
  background: var(--accent-solid);
  color: #fff;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.5rem 1.1rem;
  cursor: pointer;
}

body .search-form button:hover { filter: brightness(1.08); }

/* ============================================================
   Umbrüche — Tablet 768, Desktop 1025 laut style.md
   ============================================================ */

@media (max-width: 1024px) {
  .plate--wide,
  .plate--slim { grid-column: span 6; }

  .post-cols { grid-template-columns: minmax(0, 1fr); }

  .credits { position: static; }
}

@media (max-width: 767px) {
  .plate--wide,
  .plate--slim { grid-column: span 12; }

  .entry-attachments { grid-template-columns: minmax(0, 1fr); }

  .post-head { grid-template-columns: minmax(0, 1fr); gap: 0.35rem; }

  /* Bildunterschrift verlässt den Rahmen, sonst läuft sie aus dem 2:1-Bild */
  .plate-hero__frame::after { display: none; }

  .plate-hero__cap {
    position: static;
    padding: 0.9rem 0 0;
    flex-direction: row;
    align-items: baseline;
    gap: 0.75rem;
  }

  .plate-no {
    font-size: clamp(2.4rem, 13vw, 3.6rem);
    color: var(--accent);
    text-shadow: none;
  }

  .plate-hero__text { padding-bottom: 0; }
  .plate-hero__title { color: var(--ink); }
  .plate-hero__eyebrow { color: var(--ink-mute); }
  .plate-hero__meta { color: var(--ink-mute); }

  .masthead__in { align-items: center; gap: 0.5rem 1rem; padding-bottom: 0.9rem; }

  /* Ohne JavaScript bleibt die Navigation als scrollbare Leiste stehen —
     lieber wischen als ein Knopf, der nichts tut. */
  .main-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    gap: 1.15rem;
    padding-bottom: 2px;
  }

  .main-nav ul::-webkit-scrollbar { display: none; }

  .masthead.is-fixed .masthead__in { padding-block: 0.5rem 0.55rem; }

  /* ---- Telefonnavigation ----

     `display: contents` löst den Navigationsblock auf: Knopf, Sprachwahl und
     Navigation werden selbst zu Flex-Elementen der Kopfleiste. Nur so kann das
     Panel unter Wortmarke und Knopf über die **ganze** Leistenbreite laufen,
     ohne dass es aus seinem Kasten ausbrechen müsste — es bleibt im Fluss,
     schiebt die Seite nach unten und braucht keine absolute Lage, die mit der
     andockenden Kopfleiste ins Gehege käme.

     Zugeklappt wird erst, wenn nav.js läuft (Klasse `nav-js`). */
  .masthead__nav { display: contents; }

  /* Wortmarke, Sprachwahl und Knopf teilen sich eine Zeile — bei der
     Grundgröße reichte die Breite eines Telefons dafür nicht, der Knopf fiel
     in eine zweite Reihe und kostete die angedockte Leiste eine Zeilenhöhe. */
  .site-title {
    order: 1;
    font-size: clamp(1.3rem, 5.6vw, 1.75rem);
  }

  .lang-switch { order: 2; margin-left: auto; }
  .masthead.search-js .search-toggle { order: 3; }
  .nav-toggle { display: inline-flex; order: 4; }
  .masthead__search { order: 5; }
  .main-nav { order: 6; flex: 1 0 100%; }

  /* Auf dem Telefon reicht die Breite für Wortmarke, Sprachwahl und **zwei**
     beschriftete Knöpfe nicht — beide zeigen deshalb nur ihr Symbol, sonst
     fiele der Menüknopf in eine zweite Reihe und kostete auch die angedockte
     Leiste eine Zeilenhöhe (gemessen 119 statt 74 px). Der Text bleibt für
     Vorleseprogramme da (dieselben Werte wie `.screen-reader-text`). */
  .nav-toggle__label,
  .search-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  /* Ohne Beschriftung wäre die Trefferfläche nur noch so groß wie das Symbol.
     Die Mindestmaße halten sie fingergerecht, ohne die Leiste zu erhöhen. */
  .masthead .nav-toggle,
  .masthead .search-toggle {
    justify-content: center;
    gap: 0;
    min-width: 2.4rem;
    min-height: 2.4rem;
    padding-inline: 0.2rem;
  }

  .masthead__search .search-form { max-width: none; margin-top: 0.7rem; }

  .masthead.nav-js .main-nav { display: none; }
  .masthead.nav-js.is-open .main-nav {
    display: block;
    max-height: calc(100dvh - var(--chrome) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--rule) transparent;
    border-top: 1px solid var(--rule);
    margin-top: 0.2rem;
  }

  .masthead.nav-js.is-open .main-nav ul {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    overflow: visible;
    gap: 0;
    padding-bottom: 0;
    font-size: 0.82rem;
  }

  .masthead.nav-js.is-open .main-nav li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--rule);
  }

  .masthead.nav-js.is-open .main-nav li:last-child { border-bottom: 0; }

  /* 44 px hohe Ziele — eine Fingerkuppe braucht das. */
  .masthead.nav-js.is-open .main-nav a {
    flex: 1;
    padding-block: 0.85rem;
    border-bottom: 0;
  }

  .masthead.nav-js.is-open .main-nav .current-menu-item > a { color: var(--accent); }

  /* Drei Klassen davor — auch das ist eine Antwort auf Elementors
     `.elementor-kit-6103 button` (siehe oben beim Ausklappknopf). */
  .masthead.nav-js.is-open .sub-toggle {
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--ink-mute);
    cursor: pointer;
  }

  /* Winkel nach unten, aufgeklappt nach oben — aus zwei Kanten gebaut,
     damit kein Bild und keine Schrift dafür nötig ist. */
  .masthead.nav-js.is-open .sub-toggle span {
    display: block;
    width: 0.5rem;
    height: 0.5rem;
    border-right: 1px solid currentColor;
    border-bottom: 1px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
  }

  .masthead.nav-js.is-open .menu-item-has-children.is-open > .sub-toggle span {
    transform: translateY(2px) rotate(-135deg);
  }

  .masthead.nav-js.is-open .menu-item-has-children.is-open > .sub-toggle { color: var(--ink); }

  /* Das Untermenü verlässt seine Hover-Lage und wird eine eingerückte Reihe.
     Ohne JavaScript gibt es keinen Knopf — dann steht es offen. */
  .masthead.nav-js.is-open .main-nav .sub-menu {
    position: static;
    flex-basis: 100%;
    display: none;
    background: none;
    border: 0;
    border-top: 1px solid var(--rule);
    padding: 0 0 0 1.1rem;
    gap: 0;
  }

  .masthead.nav-js.is-open .menu-item-has-children.is-open > .sub-menu { display: flex; }

  .masthead.nav-js.is-open .sub-menu a {
    color: var(--ink-mid);
    padding-block: 0.7rem;
  }
}

/* Sehr schmale Telefone (360 px und darunter): Wortmarke, Sprachwahl und die
   beiden Symbolknöpfe bleiben nur mit engeren Abständen in einer Zeile. */
@media (max-width: 374px) {
  .masthead__in { gap: 0.5rem 0.6rem; }

  .masthead .nav-toggle,
  .masthead .search-toggle { min-width: 2.2rem; }
}

/* ============================================================
   Bewegung
   ============================================================ */

@media (prefers-reduced-motion: no-preference) {
  .anim-frame img { animation: sl-settle 0.9s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
  .anim-rise { animation: sl-rise 0.6s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
  .anim-rise--2 { animation-delay: 0.08s; }
  .anim-rise--3 { animation-delay: 0.16s; }
  .masthead.is-fixed { animation: sl-drop 0.26s cubic-bezier(0.2, 0.6, 0.3, 1) both; }
}

@keyframes sl-settle {
  from { transform: scale(1.05); opacity: 0.4; }
  to   { transform: scale(1); opacity: 1; }
}

@keyframes sl-rise {
  from { opacity: 0; transform: translateY(0.9rem); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sl-drop {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .plate__frame img,
  .main-nav a,
  .site-foot a,
  .event,
  a.credit__brand { transition: none; }
}