/*
 Theme Name:   Peggy Luck Theme
 Theme URI:    https://peggyluck.de
 Description:  Ein von Lichtsignale gestaltetes Theme für Peggy Luck, auf Grundlage des Design-Systems „Peggy Luck“ (Young Serif & Spectral · φ 1,618 · π 3,1416). Zwei Farbwelten: Natur und Kosmos.
 Author:       Lichtsignale
 Author URI:   https://lichtsignale.de
 Template:     generatepress
 Version:      2.0
*/

/* =====================================================================
   PEGGY LUCK · DESIGN-SYSTEM FÜR GENERATEPRESS
   ---------------------------------------------------------------------
   Alles steht in DIESER Datei, damit sie unter
   Design → Theme-Datei-Editor → style.css vollständig lesbar und
   bearbeitbar bleibt. Es gibt keine zweite CSS-Datei.

   Zwei Farbwelten:
     Natur  (Standard)  – Tiefgrün, Rinde, Laubgrün
     Kosmos (Nachtwelt) – Weltraum, Pflaume, Kristall
   Umschaltung über  <html data-farbwelt="kosmos">
   (alternativ wird  data-welt="kosmos"  ebenfalls erkannt).

   ---------------------------------------------------------------------
   INHALT
   ---------------------------------------------------------------------
    0 · Schriften · selbst gehostet
    1 · Primitive · die rohen Markenfarben
    2 · Semantik · Rollen-Tokens je Farbwelt
    3 · Skalen · Schrift (√φ), Raum (Fibonacci + π), Form
    4 · Brücke zu GeneratePress & WordPress
    5 · Grundlagen · html, body, Typografie, Links, Fokus
    6 · Layout · Container und Abschnittsraum
    7 · Kopfbereich · Top-Bar, Header, Branding
    8 · Navigation · Desktop, Mobil, Off-Canvas, Sticky, Suche
    9 · Inhalt · Artikel, Seiten, Archiv, Seitenkopf
   10 · Fließtext · .entry-content
   11 · Meta · Kategorien, Tags, Weiterlesen, Blättern
   12 · Buttons und Bauteile
   13 · Formulare und Suche
   14 · Seitenleiste und Widgets
   15 · Fußbereich
   16 · Kommentare
   17 · GenerateBlocks
   18 · WooCommerce · Grundzüge
   19 · Bild-Rezepte · Bogen, Kreis, Karte, Kosmos-Tönung
   20 · Hilfsklassen
   21 · Farbwelt-Umschalter
   22 · Responsive Feinschliff
   23 · Barrierefreiheit, Bewegung, Druck
   24 · Termine · Plugin „Calendar Events“ (LSCE)
   25 · Startseite · die Abschnitte aus dem Entwurf
   26 · Anfrageformular · WPForms
   27 · Einzelfälle

   ---------------------------------------------------------------------
   LADEREIHENFOLGE (darum funktioniert das Überschreiben)
   ---------------------------------------------------------------------
   GeneratePress lädt in dieser Reihenfolge:
     1. generate-style   – assets/css/all.css, das Theme-Grundgerüst
     2. <style> inline   – Customizer-Ausgabe; hängt via
                           wp_add_inline_style() an generate-style und
                           enthält u. a. :root{--accent;--base;…}
     3. generate-child   – DIESE Datei (style.css)

   Weil diese Datei zuletzt kommt, genügt GLEICHE Spezifität, um
   GeneratePress zu überschreiben – „!important“ ist fast nie nötig und
   steht hier nur an drei Stellen, jeweils im Code begründet.

   Wichtig: GeneratePress erzeugt aus den „Global Colors“ des Customizers
   echte CSS-Variablen  :root{--base;--base-2;--base-3;--contrast;
   --contrast-2;--contrast-3;--accent}. Diese biegen wir in Abschnitt 4
   auf unsere eigenen Tokens um – dann folgt die komplette Theme- und
   Block-Ausgabe automatisch der Marke und kippt beim Weltwechsel mit.

   Eigene Tokens heißen durchgängig  --pl-*  , damit sie nicht mit
   GeneratePress-, GenerateBlocks- oder WordPress-Variablen kollidieren.
   ===================================================================== */


/* =====================================================================
   0 · SCHRIFTEN · SELBST GEHOSTET
   ---------------------------------------------------------------------
   Young Serif und Spectral liegen in assets/fonts/ und werden von hier
   geladen — nicht mehr vom Google-CDN. Damit verlaesst beim Seitenaufruf
   keine IP-Adresse mehr den eigenen Server (LG Muenchen I, 3 O 17493/20).

   Beide Schriften stehen unter der SIL Open Font License; Selbsthosting
   ist ausdruecklich erlaubt.

   Geladen werden nur die Schnitte, die das System benutzt:
     Young Serif  400
     Spectral     300 · 400 · 500 · 300 kursiv · 400 kursiv

   Jeder Schnitt kommt in zwei Teilmengen, latin und latin-ext. Ueber
   unicode-range holt der Browser nur, was die Seite wirklich braucht —
   eine deutsche Seite laedt in aller Regel nur latin.

   Die Pfade sind relativ zu DIESER Datei. Verschiebst du style.css,
   musst du sie mitziehen.
   ===================================================================== */

/* Young Serif 400 */
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/young-serif-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Young Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/young-serif-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 300 */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-300-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-300-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 300 kursiv */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-300-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url('assets/fonts/spectral-300-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 400 */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 400 kursiv */
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/spectral-400-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Spectral 500 */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/spectral-500-normal-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/spectral-500-normal-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* =====================================================================
   1 · PRIMITIVE · DIE ROHEN MARKENFARBEN
   Nur hier stehen Hex-Werte. Wer die Marke nachjustiert, fasst nur
   diesen Abschnitt an.
   ===================================================================== */
:root {
  /* --- Welt „Natur“ ------------------------------------------------ */
  --pl-c-tiefgruen:   #1F3B2D;  /* Fläche, Seitengrund      */
  --pl-c-waldgrund:   #16291F;  /* Tiefe, zweite Fläche     */
  --pl-c-moos:        #2B4534;  /* Hover, dritte Fläche     */
  --pl-c-rinde:       #22180F;  /* Band, Footer             */
  --pl-c-erdreich:    #3A2A1C;  /* Print-Schrift, Band      */
  --pl-c-laubgruen:   #93B36A;  /* Akzent                   */
  --pl-c-laub-tief:   #7C9A5B;  /* Akzent gedeckt           */
  --pl-c-lichtgruen:  #B9D08A;  /* Akzent hell, selten      */
  --pl-c-pergament:   #F4EDDE;  /* Schrift auf dunkel       */
  --pl-c-pergament-2: #DBCEB7;  /* Lauftext                 */
  /* Meta, gedaempft. Der Entwurf nennt hier #A2937C — auf dem
     Seitengrund Tiefgruen ergibt das nur 4,07:1 und auf dem Moosband
     3,49:1. Beides liegt unter den 4,5:1, die normaler Text nach
     WCAG AA braucht. Eine Spur heller loest das auf allen vier
     Flaechen (5,0 bis 8,3) und bleibt im selben Sandton.
     In der Kosmos-Welt stimmt der Entwurfswert; dort steht er unten
     unveraendert. */
  --pl-c-pergament-3: #BFB199;  /* Meta, gedämpft           */
  --pl-c-btn-ink:     #1B2E15;  /* Schrift auf Laubgrün     */

  /* --- Welt „Kosmos“ ----------------------------------------------- */
  --pl-c-weltraum:    #16101E;
  /* „Tiefe“ der Nachtwelt. Das Design-System führt an dieser Stelle
     #132218 (ein Grün) – ein Rest aus der Naturwelt, der im Kosmos
     weder zur Seitenfarbe passt noch sichtbar von ihr abweicht.
     Hier steht deshalb dasselbe Verhältnis wie in der Naturwelt:
     eine Spur dunkler als der Seitengrund, gleicher Farbton. */
  --pl-c-weltraum-tief: #110B18;
  --pl-c-pflaume:     #241A33;
  --pl-c-nachtrinde:  #1D1710;
  --pl-c-nachterde:   #2A2036;
  --pl-c-sternlicht:  #F0E8D9;
  --pl-c-sternlicht-2:#D9CCB6;
  --pl-c-sternlicht-3:#A79BB2;

  /* --- Fell · immer punktuell, nie Fläche --------------------------- */
  --pl-c-fell:        #C7B299;
  --pl-c-fell-tief:   #A8927A;

  /* --- Kristall · immer nur Funke ----------------------------------- */
  --pl-c-kristall-1:  #CDB8E6;  /* Violett */
  --pl-c-kristall-2:  #AEE0D6;  /* Mint    */
  --pl-c-kristall-3:  #F0C9D9;  /* Rosé    */

  /* --- Papier (Print-Vorschauen, helle Karten) ---------------------- */
  --pl-c-lite-bg:     #F4EDDE;
  --pl-c-lite-ink:    #22180F;
  --pl-c-lite-mute:   #6E5A45;
  --pl-c-lite-line:   #DAD0BC;
}


/* =====================================================================
   2 · SEMANTIK · ROLLEN-TOKENS JE FARBWELT
   Ab hier haben Tokens eine Bedeutung, keine Farbe mehr.
   Standard = Natur.
   ===================================================================== */
:root {
  --pl-bg:            var(--pl-c-tiefgruen);
  --pl-bg-deep:       var(--pl-c-waldgrund);
  --pl-bg-hover:      var(--pl-c-moos);
  --pl-band:          var(--pl-c-rinde);
  --pl-band-2:        var(--pl-c-erdreich);

  --pl-ink:           var(--pl-c-pergament);
  --pl-ink-soft:      var(--pl-c-pergament-2);
  --pl-ink-mute:      var(--pl-c-pergament-3);

  --pl-accent:        var(--pl-c-laubgruen);
  --pl-accent-deep:   var(--pl-c-laub-tief);
  --pl-accent-light:  var(--pl-c-lichtgruen);

  --pl-fur:           var(--pl-c-fell);
  --pl-fur-deep:      var(--pl-c-fell-tief);

  --pl-line:          rgba(244, 237, 222, .15);
  --pl-line-strong:   rgba(244, 237, 222, .34);

  --pl-btn-bg:        var(--pl-c-laubgruen);
  --pl-btn-ink:       var(--pl-c-btn-ink);

  --pl-lite-bg:       var(--pl-c-lite-bg);
  --pl-lite-ink:      var(--pl-c-lite-ink);
  --pl-lite-mute:     var(--pl-c-lite-mute);
  --pl-lite-line:     var(--pl-c-lite-line);

  /* Kristall – Verlauf und Deckkraft. Nie als Fläche einsetzen. */
  --pl-kristall: linear-gradient(102deg,
                   var(--pl-c-kristall-1),
                   var(--pl-c-kristall-2) 38%,
                   var(--pl-c-kristall-3) 68%,
                   var(--pl-c-lichtgruen));
  --pl-kristall-a: .62;

  /* Fokusring – der Kristallschein */
  --pl-focus-line: var(--pl-c-kristall-2);
  --pl-focus-ring: 0 0 0 2px rgba(205, 184, 230, .35);
}

/* --- Welt „Kosmos“ · beide Schreibweisen werden unterstützt --------- */
html[data-farbwelt="kosmos"],
html[data-welt="kosmos"],
[data-farbwelt="kosmos"],
[data-welt="kosmos"] {
  --pl-bg:            var(--pl-c-weltraum);
  --pl-bg-deep:       var(--pl-c-weltraum-tief);
  --pl-bg-hover:      var(--pl-c-pflaume);
  --pl-band:          var(--pl-c-nachtrinde);
  --pl-band-2:        var(--pl-c-nachterde);

  --pl-ink:           var(--pl-c-sternlicht);
  --pl-ink-soft:      var(--pl-c-sternlicht-2);
  --pl-ink-mute:      var(--pl-c-sternlicht-3);

  --pl-accent:        var(--pl-c-kristall-1);
  --pl-accent-deep:   var(--pl-c-kristall-2);
  --pl-accent-light:  var(--pl-c-kristall-3);

  --pl-line:          rgba(240, 232, 217, .14);
  --pl-line-strong:   rgba(205, 184, 230, .40);

  --pl-btn-bg:        var(--pl-c-kristall-1);
  --pl-btn-ink:       var(--pl-c-weltraum);

  --pl-lite-bg:       #EDE6F3;
  --pl-lite-ink:      #241A33;
  --pl-lite-mute:     #5B4C6B;
  --pl-lite-line:     #D7CBE4;
}


/* =====================================================================
   3 · SKALEN · SCHRIFT (√φ), RAUM (Fibonacci + π), FORM
   Weltunabhängig. Größenverhältnisse und Rhythmus leben nur hier.
   ---------------------------------------------------------------------
   Schrift: Basis 17 px, jede Stufe × √φ = 1,272.
            Zwei Stufen ergeben exakt den Goldenen Schnitt.
   Raum:    Bauteil-Abstände nach Fibonacci (5 · 8 · 13 · 21 · 34 · 55),
            Abschnittsabstände als π-Vielfache des Taktes 8
            (50 = 16π · 79 = 25π · 126 = 40π · 201 = 64π).
   ===================================================================== */
:root {
  /* --- Schriftfamilien --------------------------------------------- */
  --pl-font-display: "Young Serif", Georgia, "Times New Roman", serif;
  --pl-font-text:    "Spectral", Georgia, "Times New Roman", serif;

  /* --- Schriftstufen (fluid, Endwerte = die Skala des Systems) ------ */
  --pl-fs-display: clamp(2.8125rem, 7.4vw, 7.25rem);       /*  45 – 116 */
  --pl-fs-h1:      clamp(2.5rem,    6vw,   5.75rem);       /*  40 –  92 */
  --pl-fs-h2:      clamp(2.1875rem, 5vw,   4.5rem);        /*  35 –  72 */
  --pl-fs-h3:      clamp(1.71875rem, 3.4vw, 2.78125rem);   /* 27,5– 44,5*/
  --pl-fs-h4:      clamp(1.35rem,   2.2vw, 1.71875rem);    /* 21,6– 27,5*/
  --pl-fs-h5:      1.35rem;                                /* 21,6      */
  --pl-fs-h6:      1.0625rem;                              /* 17        */
  --pl-fs-lead:    clamp(1.1875rem, 1.6vw, 1.35rem);       /*  19 – 21,6*/
  --pl-fs-body:    1.0625rem;                              /* 17        */
  --pl-fs-small:   0.96875rem;                             /* 15,5      */
  --pl-fs-label:   0.84375rem;                             /* 13,5      */

  /* --- Schriftstaerken ------------------------------------------------
     Der Entwurf sieht fuer den Fliesstext Spectral 300 vor. Auf dem
     dunklen Grund traegt das nicht: helle Schrift auf dunkler Flaeche
     wirkt duenner als umgekehrt, und ein 300er Serif verliert dabei die
     Haarstriche. 400 ist der Schnitt, der hier dasselbe Bild ergibt,
     das 300 auf hellem Papier macht.
     Eine Stufe hoeher (500) geht auch — nur diesen Wert aendern. */
  --pl-fw-body:  400;
  --pl-fw-stark: 500;

  /* --- Laufweite ---------------------------------------------------- */
  --pl-track-display: -.022em;   /* Young Serif ab 35 px       */
  --pl-track-title:   -.02em;
  --pl-track-label:    .22em;    /* Overlines, Labels          */
  --pl-track-button:   .2em;     /* Buttons                    */
  --pl-track-nav:      .16em;    /* Navigation                 */

  /* --- Zeilenabstände ---------------------------------------------- */
  --pl-lh-display: .9;
  --pl-lh-title:   .96;
  --pl-lh-h4:      1.2;
  --pl-lh-lead:    1.55;
  --pl-lh-body:    1.618;        /* φ                          */

  /* --- Satzbreite --------------------------------------------------- */
  --pl-measure:      62ch;
  --pl-measure-narrow: 44ch;

  /* --- Raum · Fibonacci (innerhalb von Bauteilen) ------------------- */
  --pl-sp-1: 0.3125rem;   /*  5 */
  --pl-sp-2: 0.5rem;      /*  8 */
  --pl-sp-3: 0.8125rem;   /* 13 */
  --pl-sp-4: 1.3125rem;   /* 21 */
  --pl-sp-5: 2.125rem;    /* 34 */
  --pl-sp-6: 3.4375rem;   /* 55 */

  /* --- Raum · π-Stufen (zwischen Bauteilen und Abschnitten) --------- */
  --pl-space-in:      3.125rem;    /*  50 px = 16π · innerhalb Gruppe */
  --pl-space-group:   4.9375rem;   /*  79 px = 25π · zwischen Gruppen */
  --pl-space-section: 7.875rem;    /* 126 px = 40π · Abschnitt        */
  --pl-space-chapter: 12.5625rem;  /* 201 px = 64π · Kapitel          */

  /* Fluide Varianten für Seitenabschnitte */
  --pl-pad-section: clamp(3.125rem, 7vw, 7.875rem);
  --pl-pad-inline:  clamp(1.3125rem, 3vw, 3.125rem);

  /* --- Form --------------------------------------------------------- */
  --pl-radius:      4px;      /* Karten, Bilder – NIE mehr        */
  --pl-radius-pill: 999px;    /* Buttons, Pills, Eingabefelder    */
  --pl-arch: 50% 50% 4px 4px / 42% 42% 4px 4px;  /* Bogen         */
  --pl-hairline: 1px;

  /* --- Bewegung ------------------------------------------------------ */
  --pl-ease:  cubic-bezier(.2, .7, .3, 1);
  --pl-dur:   .22s;
  --pl-dur-slow: .4s;

  /* --- Breiten ------------------------------------------------------- */
  --pl-content-max: 1440px;
}


/* =====================================================================
   4 · BRÜCKE ZU GENERATEPRESS & WORDPRESS
   GeneratePress schreibt seine Global Colors als :root-Variablen und
   nutzt sie in der eigenen Customizer-Ausgabe sowie im Block-Editor.
   Wir hängen sie an unsere Tokens – dann folgt alles automatisch.
   ---------------------------------------------------------------------
   Empfehlung: im Customizer → Farben → Global Colors trotzdem einmalig
   dieselben Hex-Werte eintragen, damit der Block-Editor im Backend
   ebenfalls stimmt (dort greift diese Datei nicht).
     contrast   #F4EDDE      base     #1F3B2D
     contrast-2 #DBCEB7      base-2   #16291F
     contrast-3 #A2937C      base-3   #22180F
     accent     #93B36A
   ===================================================================== */
:root,
html[data-farbwelt="kosmos"],
html[data-welt="kosmos"] {
  --contrast:   var(--pl-ink);
  --contrast-2: var(--pl-ink-soft);
  --contrast-3: var(--pl-ink-mute);
  --base:       var(--pl-bg);
  --base-2:     var(--pl-bg-deep);
  --base-3:     var(--pl-band);
  --accent:     var(--pl-accent);

  /* GeneratePress-Suchmodal */
  --gp-search-modal-bg-color:         var(--pl-bg-deep);
  --gp-search-modal-text-color:       var(--pl-ink);
  --gp-search-modal-overlay-bg-color: rgba(22, 41, 31, .88);
}

/* WordPress-Farbklassen (Block-Editor-Palette) an die Marke hängen. */
.has-pl-tiefgruen-color            { color: var(--pl-c-tiefgruen); }
.has-pl-tiefgruen-background-color { background-color: var(--pl-c-tiefgruen); }
.has-pl-rinde-color                { color: var(--pl-c-rinde); }
.has-pl-rinde-background-color     { background-color: var(--pl-c-rinde); }
.has-pl-laubgruen-color            { color: var(--pl-c-laubgruen); }
.has-pl-laubgruen-background-color { background-color: var(--pl-c-laubgruen); }
.has-pl-pergament-color            { color: var(--pl-c-pergament); }
.has-pl-pergament-background-color { background-color: var(--pl-c-pergament); }
.has-pl-fell-color                 { color: var(--pl-c-fell); }
.has-pl-fell-background-color      { background-color: var(--pl-c-fell); }


/* =====================================================================
   5 · GRUNDLAGEN · HTML, BODY, TYPOGRAFIE, LINKS
   ===================================================================== */
html {
  /* Beide Welten sind dunkel: Formular-Widgets und Scrollbalken
     sollen das wissen. */
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* Platz für die sticky Navigation */
}

body {
  background-color: var(--pl-bg);
  color: var(--pl-ink);
  font-family: var(--pl-font-text);
  font-weight: var(--pl-fw-body);
  font-size: var(--pl-fs-body);
  line-height: var(--pl-lh-body);
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;

  /* Ausdruecklich zurueck auf die Vorgabe des Systems.
     GeneratePress setzt in main.css -webkit-font-smoothing: antialiased.
     Die Graustufen-Glaettung macht Schrift auf macOS duenner — auf
     hellem Grund ein Gewinn, auf dunklem genau der falsche Weg. Mit der
     Subpixel-Glaettung bekommt der Fliesstext seine Strichstaerke
     zurueck. Auf Windows und Linux aendert sich dadurch nichts. */
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
}

/* Die Flächen, die GeneratePress selbst einfärbt, mitnehmen. */
.site,
.site-content,
.container.grid-container,
.separate-containers .site-main,
.one-container .site-content {
  background-color: transparent;
}

/* --- Überschriften ------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.entry-title,
.page-title,
.widget-title,
.comments-title,
.comment-reply-title,
.gb-headline {
  font-family: var(--pl-font-display);
  font-weight: 400;
  color: var(--pl-ink);
  text-wrap: balance;
}

h1, .entry-title {
  font-size: var(--pl-fs-h1);
  line-height: var(--pl-lh-display);
  letter-spacing: var(--pl-track-display);
  margin: 0 0 var(--pl-sp-5);
}

h2 {
  font-size: var(--pl-fs-h2);
  line-height: var(--pl-lh-title);
  letter-spacing: var(--pl-track-display);
  margin: 0 0 var(--pl-sp-4);
}

h3 {
  font-size: var(--pl-fs-h3);
  line-height: 1.02;
  letter-spacing: var(--pl-track-title);
  margin: 0 0 var(--pl-sp-4);
}

h4 {
  font-size: var(--pl-fs-h4);
  line-height: var(--pl-lh-h4);
  letter-spacing: -.01em;
  margin: 0 0 var(--pl-sp-3);
}

h5 {
  font-size: var(--pl-fs-h5);
  line-height: 1.3;
  margin: 0 0 var(--pl-sp-3);
}

h6 {
  font-family: var(--pl-font-text);
  font-weight: 500;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0 0 var(--pl-sp-3);
}

/* Der π-Weißraum über einer Überschrift: rund π × Schriftgröße.
   Nur wenn sie nicht das erste Element ist. */
.entry-content > h2:not(:first-child) { margin-top: var(--pl-space-group); }
.entry-content > h3:not(:first-child) { margin-top: var(--pl-space-in); }
.entry-content > h4:not(:first-child) { margin-top: var(--pl-sp-6); }

/* --- Fließtext ------------------------------------------------------ */
p { margin: 0 0 var(--pl-sp-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 500; color: var(--pl-ink); }
em, i     { font-style: italic; }

small { font-size: var(--pl-fs-small); color: var(--pl-ink-mute); }

/* Die zweite Stimme: Spectral kursiv */
.entry-content em,
.entry-content i { color: var(--pl-ink-soft); }

/* --- Links ---------------------------------------------------------- */
a {
  color: var(--pl-accent);
  text-decoration: none;
  transition: color var(--pl-dur) var(--pl-ease),
              text-decoration-color var(--pl-dur) var(--pl-ease),
              border-color var(--pl-dur) var(--pl-ease);
}
a:hover,
a:focus-visible { color: var(--pl-ink); }

/* Im Fließtext sind Links unterstrichen – dünn, mit Abstand. */
.entry-content a:not([class]),
.comment-content a:not([class]) {
  color: var(--pl-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  text-underline-offset: .18em;
}
.entry-content a:not([class]):hover,
.comment-content a:not([class]):hover {
  color: var(--pl-ink);
  text-decoration-color: currentColor;
}

::selection { background: var(--pl-accent); color: var(--pl-btn-ink); }

/* --- Fokus · der Kristallschein ------------------------------------- */
:focus-visible {
  outline: 2px solid var(--pl-focus-line);
  outline-offset: 2px;
  border-radius: var(--pl-radius);
}
/* GeneratePress schaltet den Fokus bei Mausbedienung ab – das ist ok,
   die Tastaturbedienung bleibt davon unberührt. */
.using-mouse :focus { outline: 0; }

.skip-link:focus {
  background: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  border-radius: var(--pl-radius);
  font-family: var(--pl-font-text);
  font-weight: 500;
}


/* =====================================================================
   6 · LAYOUT · CONTAINER UND ABSCHNITTSRAUM
   ===================================================================== */
.grid-container { max-width: var(--pl-content-max); }

/* Innenabstand der Container folgt der π-Skala statt GP-Standard. */
.separate-containers .inside-article,
.separate-containers .comments-area,
.separate-containers .page-header,
.separate-containers .paging-navigation,
.one-container .site-content {
  padding: clamp(1.3125rem, 3vw, 3.125rem);
}

/* Abstand zwischen den Karten im Archiv: π-Stufe „innerhalb Gruppe“. */
.separate-containers .site-main > *:not(:last-child) {
  margin-bottom: var(--pl-space-in);
}
.separate-containers .inside-right-sidebar,
.separate-containers .inside-left-sidebar {
  margin-top: 0;
}

/* Die vertikale Luft der Hauptspalte. */
.separate-containers .site-main,
.one-container .site-content {
  padding-top: var(--pl-pad-section);
  padding-bottom: var(--pl-pad-section);
}

.home.one-container .site-content{
  padding-bottom: 0 !important;
}

/* Vollbreite Inhalte dürfen wirklich voll sein. */
.entry-content > .alignfull {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: 100vw;
  width: auto;
}


/* =====================================================================
   7 · KOPFBEREICH · TOP-BAR, HEADER, BRANDING
   ===================================================================== */

/* --- GeneratePress Top-Bar · das Rindenband ------------------------- */
.top-bar {
  background-color: var(--pl-band);
  color: var(--pl-ink-mute);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
}
.top-bar a { color: var(--pl-ink-soft); }
.top-bar a:hover { color: var(--pl-accent); }
.inside-top-bar { padding: var(--pl-sp-3) var(--pl-pad-inline); }
.top-bar .widget-title {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  color: var(--pl-ink-mute);
}

/* --- Header --------------------------------------------------------- */
.site-header {
  background-color: var(--pl-bg-deep);   /* Waldgrund #16291F – das Kopfband */
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}
.inside-header {
  padding: var(--pl-sp-4) var(--pl-pad-inline);
  max-width: var(--pl-content-max);
}

.site-branding-container { gap: var(--pl-sp-3); }

.main-title,
.site-title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: clamp(1.1875rem, 2vw, 1.71875rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.main-title a,
.main-title a:hover { color: var(--pl-ink); }

.site-description {
  font-family: var(--pl-font-text);
  font-weight: 300;
  font-style: italic;
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
  margin-top: var(--pl-sp-1);
  letter-spacing: 0;
  text-transform: none;
}

.site-logo img,
.site-header .header-image {
  border-radius: 0;   /* Logos bekommen nie einen Radius */
}


/* =====================================================================
   8 · NAVIGATION
   Desktop, Untermenüs, Mobil, Off-Canvas (GP Premium), Sticky, Suche.
   ===================================================================== */
.main-navigation,
.secondary-navigation {
  background-color: transparent;
}
.main-navigation .inside-navigation {
  max-width: var(--pl-content-max);
  padding-left: var(--pl-pad-inline);
  padding-right: var(--pl-pad-inline);
}

/* GeneratePress reiht die Menüpunkte mit float auf. Für eine Reihe, in
   der Textlinks und Pillen auf einer Mittelachse sitzen, braucht es
   Flexbox. Im aufgeklappten Mobilmenü gewinnt GP mit der höheren
   Spezifität (.main-navigation.toggled …) wieder – dort bleibt es beim
   gestapelten Block. */
.main-navigation .main-nav > ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-sp-1);
}
.main-navigation .main-nav > ul > li { float: none; }

/* Menüpunkte – Spectral, Versalien, weit gesperrt. */
.main-navigation .main-nav ul li a,
.secondary-navigation .main-nav ul li a,
.main-navigation .menu-toggle,
.main-navigation .menu-bar-items {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
  color: var(--pl-ink);
  line-height: 1;
}
.main-navigation .main-nav ul li a {
  padding: var(--pl-sp-4) var(--pl-sp-4);
}

/* Zustand: Hover, aktuelle Seite. Statt Fläche eine Haarlinie. */
.main-navigation .main-nav ul li > a {
  position: relative;
}
.main-navigation .main-nav ul li > a::after {
  content: "";
  position: absolute;
  left: var(--pl-sp-4);
  right: var(--pl-sp-4);
  bottom: calc(var(--pl-sp-4) - 10px);
  height: 1px;
  background: var(--pl-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--pl-dur) var(--pl-ease);
}
.main-navigation .main-nav ul li:hover > a::after,
.main-navigation .main-nav ul li.sfHover > a::after,
.main-navigation .main-nav ul li[class*="current-menu"] > a::after {
  transform: scaleX(1);
}
.main-navigation .main-nav ul li:hover > a,
.main-navigation .main-nav ul li.sfHover > a,
.main-navigation .main-nav ul li[class*="current-menu"] > a,
.main-navigation .main-nav ul li a:focus-visible {
  color: var(--pl-accent);
  background-color: transparent;
}

/* --- Untermenüs ----------------------------------------------------- */
.main-navigation ul ul {
  background-color: var(--pl-bg-deep);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius);
  box-shadow: none;              /* Das System kennt keine Schatten. */
  padding: var(--pl-sp-2) 0;
  min-width: 15rem;
}
.main-navigation .main-nav ul ul li a {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  color: var(--pl-ink-soft);
  padding: var(--pl-sp-3) var(--pl-sp-4);
}
.main-navigation .main-nav ul ul li a::after { content: none; }
.main-navigation .main-nav ul ul li:hover > a,
.main-navigation .main-nav ul ul li.sfHover > a,
.main-navigation .main-nav ul ul li[class*="current-menu"] > a {
  background-color: var(--pl-bg-hover);
  color: var(--pl-accent);
}
.main-navigation ul ul li:not(:last-child) {
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}

/* =====================================================================
   8.1 · BAUTEILE IM MENÜ · HANDLUNGSKNOPF UND FARBWELT-UMSCHALTER
   ---------------------------------------------------------------------
   Zwei Menüpunkte sind keine Menüzeilen, sondern Bauteile:
     .pl-nav-cta  – „Anfragen“, gefüllte Pille mit Kristall-Lichtkante
     .pl-welt     – der Umschalter zwischen Natur und Kosmos, Kontur

   Die Klassen setzt functions.php automatisch. Du kannst sie auch von
   Hand vergeben: Design → Menüs → oben rechts „Ansicht anpassen“ →
   „CSS-Klassen“ anhaken, dann im Menüpunkt eintragen.
   ===================================================================== */

/* Beide tragen keine Hover-Haarlinie – sie haben ihre eigene Form. */
.main-navigation .main-nav ul li.pl-nav-cta > a::after,
.main-navigation .main-nav ul li.pl-welt > a::after { content: none; }

.main-navigation .main-nav ul li.pl-nav-cta,
.main-navigation .main-nav ul li.pl-welt { margin-left: var(--pl-sp-2); }

.main-navigation .main-nav ul li.pl-nav-cta > a,
.main-navigation .main-nav ul li.pl-welt > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6em;
  padding: .8125rem 1.75rem;          /* 13 / 28 */
  border-radius: var(--pl-radius-pill);
  line-height: 1.2;
  white-space: nowrap;
  transition: background-color var(--pl-dur) var(--pl-ease),
              border-color var(--pl-dur) var(--pl-ease),
              color var(--pl-dur) var(--pl-ease);
}

/* --- Primär · „Anfragen“ ---------------------------------------------- */
.main-navigation .main-nav ul li.pl-nav-cta > a {
  position: relative;
  overflow: hidden;
  background-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  font-weight: 500;
  letter-spacing: var(--pl-track-button);
  border: var(--pl-hairline) solid transparent;
}
/* Die Lichtkante – der einzige Glanz am Knopf. */
.main-navigation .main-nav ul li.pl-nav-cta > a::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 21%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--pl-c-kristall-3), var(--pl-c-kristall-2), transparent);
  opacity: .9;
  pointer-events: none;
}
.main-navigation .main-nav ul li.pl-nav-cta:hover > a,
.main-navigation .main-nav ul li.pl-nav-cta > a:focus-visible,
.main-navigation .main-nav ul li.pl-nav-cta[class*="current-menu"] > a {
  background-color: var(--pl-accent-light);
  color: var(--pl-btn-ink);
}

/* --- Sekundär · der Farbwelt-Umschalter -------------------------------- */
.main-navigation .main-nav ul li.pl-welt > a {
  background: transparent;
  color: var(--pl-ink-mute);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  font-weight: 400;
}
.main-navigation .main-nav ul li.pl-welt:hover > a,
.main-navigation .main-nav ul li.pl-welt > a:focus-visible,
.main-navigation .main-nav ul li.pl-welt > a[aria-pressed="true"] {
  color: var(--pl-ink);
  border-color: var(--pl-ink-mute);
  background: transparent;
}
/* Er ist ein Schalter, kein Weg zu einer Seite. */
.main-navigation .main-nav ul li.pl-welt > a { cursor: pointer; }


/* --- Sticky-Navigation (GP Premium) --------------------------------- */
.main-navigation.navigation-stick,
.main-navigation.is_stuck,
.main-navigation.sticky-enabled.navigation-stick {
  background-color: color-mix(in srgb, var(--pl-bg-deep) 92%, transparent);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}

/* --- Mobil-Kopf (GP Premium) ------------------------------------------
   Unterhalb des Umbruchpunkts blendet GeneratePress .site-header aus und
   zeigt stattdessen nav#mobile-header mit eigener Marke und eigenem
   Umschalter. Der braucht dieselbe Fläche wie das Kopfband oben. */
.main-navigation.mobile-header-navigation,
.main-navigation.mobile-header-navigation.has-branding {
  background-color: var(--pl-bg-deep);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}
.mobile-header-navigation .inside-navigation {
  padding-left: var(--pl-sp-4);
  padding-right: var(--pl-sp-4);
}
.navigation-branding .main-title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: clamp(1.0625rem, 4.5vw, 1.35rem);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin: 0;
}
.navigation-branding .main-title a { color: var(--pl-ink); }
.navigation-branding img,
.navigation-branding .site-logo img { border-radius: 0; }

/* --- Mobiles Menü ---------------------------------------------------- */
button.menu-toggle,
button.menu-toggle:hover,
button.menu-toggle:focus {
  background-color: transparent;
  color: var(--pl-ink);
}
.menu-toggle .mobile-menu {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
}
.main-navigation .mobile-bar-items a,
.main-navigation .menu-bar-item > a { color: var(--pl-ink); }
.main-navigation .mobile-bar-items a:hover,
.main-navigation .menu-bar-item > a:hover { color: var(--pl-accent); }

.main-navigation.toggled .main-nav > ul {
  background-color: var(--pl-bg-deep);
  border-top: var(--pl-hairline) solid var(--pl-line);
}
.main-navigation.toggled .main-nav ul li a {
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-4) var(--pl-pad-inline);
}
.main-navigation.toggled .main-nav ul li a::after { content: none; }
.main-navigation.toggled ul ul {
  border: 0;
  border-radius: 0;
  background-color: color-mix(in srgb, var(--pl-band) 60%, transparent);
}

/* --- Die beiden Bauteile im aufgeklappten Mobilmenü -------------------
   Auf dem Schreibtisch stehen sie als Pillen in der Reihe. Im Schubfach
   wären sie als Menüzeilen mit Trennlinie falsch: dort werden daraus
   zwei zentrierte Knöpfe am Fuß der Liste, mit Luft ringsum und ohne
   die Zeilentrennlinie der übrigen Punkte. */
.main-navigation.toggled .main-nav ul li.pl-nav-cta > a,
.main-navigation.toggled .main-nav ul li.pl-welt > a {
  display: block;
  text-align: center;
  padding: 1.0625rem 2.125rem;         /* 17 / 34 */
  border-radius: var(--pl-radius-pill);
  white-space: normal;
}
.main-navigation.toggled .main-nav ul li.pl-nav-cta > a {
  border: var(--pl-hairline) solid transparent;
  margin: var(--pl-sp-5) var(--pl-pad-inline) var(--pl-sp-3);
}
.main-navigation.toggled .main-nav ul li.pl-welt > a {
  border: var(--pl-hairline) solid var(--pl-line-strong);
  margin: 0 var(--pl-pad-inline) var(--pl-sp-5);
}

/* --- Off-Canvas / Slideout (GP Premium) ------------------------------ */
.slideout-navigation,
.slideout-navigation.main-navigation {
  background-color: var(--pl-bg-deep);
  border-left: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-5) 0;
}
.slideout-navigation .slideout-menu li a {
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
  color: var(--pl-ink);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}
.slideout-navigation .slideout-menu li a:hover { color: var(--pl-accent); }
.slideout-overlay { background-color: rgba(22, 24, 15, .6); }
.slideout-navigation .slideout-exit { color: var(--pl-ink-mute); }

/* --- Navigations-Suche ----------------------------------------------- */
.navigation-search input[type="search"],
.navigation-search input[type="search"]:focus {
  background-color: var(--pl-bg-deep);
  color: var(--pl-ink);
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-body);
  border-radius: 0;
  border: 0;
}
.navigation-search input::placeholder { color: var(--pl-ink-mute); }

/* --- Suchmodal (GP 3.x) ---------------------------------------------- */
.search-modal .search-modal-form input[type="search"] {
  font-family: var(--pl-font-display);
  font-size: clamp(1.71875rem, 4vw, 2.78125rem);
  color: var(--pl-ink);
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
}


/* =====================================================================
   9 · INHALT · ARTIKEL, SEITEN, ARCHIV, SEITENKOPF
   ===================================================================== */

/* Archiv/Blog: die Karte. 4 px Radius, 1 px Linie, kein Schatten. */
.separate-containers .inside-article {
  background-color: var(--pl-bg-deep);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  transition: border-color var(--pl-dur) var(--pl-ease);
}
.separate-containers .inside-article:hover {
  border-color: var(--pl-line-strong);
}

/* Einzelbeitrag und Seite: ruhige Leseansicht ohne Kartenrahmen. */
.single .separate-containers .inside-article,
.page .separate-containers .inside-article {
  background-color: transparent;
  border-color: transparent;
}
.single .separate-containers .inside-article:hover,
.page .separate-containers .inside-article:hover {
  border-color: transparent;
}

/* --- Beitragstitel --------------------------------------------------- */
.entry-header { margin-bottom: var(--pl-sp-4); }

.entry-title {
  font-size: var(--pl-fs-h2);
  line-height: var(--pl-lh-title);
  letter-spacing: var(--pl-track-display);
  margin: 0 0 var(--pl-sp-3);
}
.single .entry-title,
.page .entry-title { font-size: var(--pl-fs-h1); }

.entry-title a { color: var(--pl-ink); }
.entry-title a:hover { color: var(--pl-accent); }

/* --- Seitenkopf (page-header) ---------------------------------------- */
.page-header,
.inside-page-header {
  background-color: var(--pl-band);
  color: var(--pl-ink);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
}
.page-header .page-title { font-size: var(--pl-fs-h2); }
.page-header .taxonomy-description,
.page-header .archive-description {
  font-size: var(--pl-fs-lead);
  line-height: var(--pl-lh-lead);
  color: var(--pl-ink-soft);
  max-width: var(--pl-measure);
  margin-top: var(--pl-sp-4);
}

/* --- Beitragsbilder --------------------------------------------------- */
.post-image img,
.page-header-image img,
.page-header-image-single img {
  border-radius: var(--pl-radius);
  width: 100%;
}
.post-image { margin-bottom: var(--pl-sp-4); }


/* =====================================================================
   10 · FLIESSTEXT · .entry-content
   ===================================================================== */
.entry-content,
.entry-summary,
.comment-content {
  font-size: var(--pl-fs-body);
  line-height: var(--pl-lh-body);
  color: var(--pl-ink-soft);
}

/* Satzbreite nur bei Beiträgen begrenzen – gebaute Seiten
   (GenerateBlocks) sollen ihre Breite behalten. Für einzelne Bereiche
   gibt es zusätzlich die Hilfsklasse .pl-measure. */
.single .entry-content > p,
.single .entry-content > ul,
.single .entry-content > ol,
.single .entry-content > dl,
.single .entry-content > blockquote,
.single .entry-content > h2,
.single .entry-content > h3,
.single .entry-content > h4,
.single .entry-content > h5,
.single .entry-content > h6,
.single .entry-content > .wp-block-paragraph,
.single .entry-content > .wp-block-list,
.single .entry-content > .wp-block-heading {
  max-width: var(--pl-measure);
}

/* Der Vorlauf / Lead */
.pl-lead,
.entry-content > p.has-large-font-size:first-of-type,
.entry-summary > p:first-of-type {
  font-size: var(--pl-fs-lead);
  line-height: var(--pl-lh-lead);
  color: var(--pl-ink-soft);
  margin-bottom: var(--pl-sp-5);
}

/* --- Listen ----------------------------------------------------------- */
.entry-content ul,
.entry-content ol,
.comment-content ul,
.comment-content ol {
  margin: 0 0 var(--pl-sp-4) var(--pl-sp-4);
  padding: 0;
}
.entry-content li { margin-bottom: var(--pl-sp-2); }

/* Aufzählung mit der Facette statt eines Punktes. */
.entry-content ul:not([class]) { list-style: none; margin-left: 0; }
.entry-content ul:not([class]) > li {
  position: relative;
  padding-left: var(--pl-sp-4);
}
.entry-content ul:not([class]) > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--pl-kristall);
  opacity: var(--pl-kristall-a);
}
.entry-content ol:not([class]) { list-style: none; counter-reset: pl-num; margin-left: 0; }
.entry-content ol:not([class]) > li {
  position: relative;
  padding-left: var(--pl-sp-5);
  counter-increment: pl-num;
}
.entry-content ol:not([class]) > li::before {
  content: counter(pl-num, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-small);
  color: var(--pl-fur);       /* Ziffern in Fellfarbe */
  line-height: inherit;
}

/* --- Zitate ------------------------------------------------------------ */
blockquote,
.wp-block-quote {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h4);
  line-height: 1.25;
  color: var(--pl-ink);
  border: 0;
  border-left: var(--pl-hairline) solid var(--pl-accent);
  margin: var(--pl-space-in) 0;
  padding: var(--pl-sp-1) 0 var(--pl-sp-1) var(--pl-sp-5);
  max-width: var(--pl-measure);
}
blockquote p { margin-bottom: var(--pl-sp-3); }
blockquote cite,
.wp-block-quote cite,
.wp-block-quote__citation {
  display: block;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-style: normal;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin-top: var(--pl-sp-3);
}
.wp-block-pullquote {
  border-top: var(--pl-hairline) solid var(--pl-line);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-6) 0;
  color: var(--pl-ink);
}

/* --- Trenner ------------------------------------------------------------ */
hr,
.wp-block-separator {
  border: 0;
  height: 1px;
  background: var(--pl-line);
  margin: var(--pl-space-group) 0;
  max-width: none;
}
/* Einmal pro Seite darf der Trenner ein Kristallfunke sein. */
.wp-block-separator.is-style-wide,
.pl-hairline-kristall {
  background: linear-gradient(90deg,
    transparent,
    var(--pl-c-kristall-1),
    var(--pl-c-kristall-2),
    var(--pl-c-kristall-3),
    transparent);
  opacity: var(--pl-kristall-a);
}

/* --- Bilder, Figuren, Bildlegenden -------------------------------------- */
figure { margin: var(--pl-space-in) 0; }
.entry-content img,
.wp-block-image img {
  border-radius: var(--pl-radius);
  height: auto;
}
figcaption,
.wp-caption-text,
.wp-block-image figcaption,
.gallery-caption {
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-small);
  line-height: 1.45;
  color: var(--pl-ink-mute);
  margin-top: var(--pl-sp-3);
  text-align: left;
}
.wp-caption { max-width: 100%; }

/* --- Tabellen ------------------------------------------------------------ */
.entry-content table,
.wp-block-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--pl-fs-small);
  margin-bottom: var(--pl-sp-5);
}
.entry-content th,
.entry-content td,
.wp-block-table th,
.wp-block-table td {
  border: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-3) var(--pl-sp-4);
  text-align: left;
}
.entry-content th,
.wp-block-table th {
  font-family: var(--pl-font-text);
  font-weight: 500;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  border-bottom-color: var(--pl-line-strong);
}
/* Breite Tabellen dürfen scrollen statt das Layout zu sprengen. */
.wp-block-table { overflow-x: auto; }

/* --- Code ---------------------------------------------------------------- */
code, kbd, samp, pre {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: .9em;
}
code, kbd {
  background-color: color-mix(in srgb, var(--pl-ink) 8%, transparent);
  color: var(--pl-ink);
  border-radius: var(--pl-radius);
  padding: .12em .4em;
}
pre,
.wp-block-code {
  background-color: var(--pl-bg-deep);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4);
  overflow: auto;
  color: var(--pl-ink-soft);
}
pre code { background: none; padding: 0; }


/* =====================================================================
   11 · META · KATEGORIEN · TAGS · WEITERLESEN · BLÄTTERN
   ===================================================================== */
.entry-meta,
.posted-on,
.byline,
.comments-link,
footer.entry-meta {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  line-height: 1.6;
}
.entry-meta a { color: var(--pl-ink-mute); }
.entry-meta a:hover { color: var(--pl-accent); }
.entry-meta .gp-icon { opacity: .7; }

/* Datum in Fellfarbe – die „Ziffernrolle“ des Systems. */
.entry-meta .posted-on time,
.entry-meta .posted-on .updated { color: var(--pl-fur); }

/* --- Kategorien & Schlagworte als Pillen -------------------------------- */
.entry-header .cat-links,
.entry-header .tags-links,
footer.entry-meta .cat-links,
footer.entry-meta .tags-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-sp-2);
}
.cat-links a,
.tags-links a,
.post-categories a {
  display: inline-block;
  font-size: var(--pl-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-soft);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: .38em 1em;
  line-height: 1.2;
}
.cat-links a:hover,
.tags-links a:hover,
.post-categories a:hover {
  color: var(--pl-accent);
  border-color: var(--pl-accent);
}

/* --- Weiterlesen --------------------------------------------------------- */
.read-more-container { margin-top: var(--pl-sp-4); }
.read-more-container a.more-link,
a.more-link {
  display: inline-block;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  color: var(--pl-ink);
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  padding-bottom: var(--pl-sp-1);
  text-decoration: none;
}
.read-more-container a.more-link:hover,
a.more-link:hover {
  color: var(--pl-accent);
  border-bottom-color: var(--pl-accent);
}

/* --- Blättern & Beitragsnavigation ---------------------------------------- */
.paging-navigation,
.post-navigation,
.posts-navigation,
.comment-navigation {
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
}
.paging-navigation .nav-links { display: flex; flex-wrap: wrap; gap: var(--pl-sp-2); }
.paging-navigation .nav-links > * {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--pl-sp-3);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  color: var(--pl-ink-soft);
}
.paging-navigation .nav-links a:hover {
  border-color: var(--pl-accent);
  color: var(--pl-accent);
}
.paging-navigation .nav-links .current {
  background-color: var(--pl-btn-bg);
  border-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  font-weight: 500;
}
.post-navigation {
  border-top: var(--pl-hairline) solid var(--pl-line);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-5) 0;
  margin: var(--pl-space-group) 0;
}
.post-navigation a { color: var(--pl-ink); }
.post-navigation a:hover { color: var(--pl-accent); }


/* =====================================================================
   12 · BUTTONS UND BAUTEILE
   ---------------------------------------------------------------------
   Zu den Gutenberg-Buttons: GeneratePress setzt
     .wp-block-button .wp-block-button__link { font-size: inherit }   (0-2-0)
     a.wp-block-button__link:not(.has-background) { color:#fff }      (0-2-1)
   Ein blosses .wp-block-button__link (0-1-0) verliert dagegen. Deshalb
   steht hier ueberall  .wp-block-button a.wp-block-button__link .
   Primär: Laubgrün gefüllt, Pille, oben eine Kristall-Haarlinie.
   Sekundär: 1 px Kristallkontur.
   Regel aus dem System: nie zwei Kristallkonturen nebeneinander.
   ===================================================================== */
button,
.button,
a.button,
input[type="button"],
input[type="reset"],
input[type="submit"],
html input[type="button"],
.wp-block-button a.wp-block-button__link,
.gb-button,
.wp-element-button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--pl-font-text);
  font-weight: 500;
  font-size: var(--pl-fs-label);
  line-height: 1.2;
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  text-decoration: none;
  background-color: var(--pl-btn-bg);
  background-image: none;
  color: var(--pl-btn-ink);
  border: var(--pl-hairline) solid transparent;
  border-radius: var(--pl-radius-pill);
  padding: 1.0625rem 2.125rem;   /* 17 / 34 – Fibonacci */
  cursor: pointer;
  transition: background-color var(--pl-dur) var(--pl-ease),
              color var(--pl-dur) var(--pl-ease),
              transform var(--pl-dur) var(--pl-ease);
}

/* Die Lichtkante: eine Kristall-Haarlinie am oberen Rand.
   Nicht auf <input>, dort sind Pseudoelemente wirkungslos. */
button::before,
.button::before,
a.button::before,
.wp-block-button a.wp-block-button__link::before,
.gb-button::before,
.wp-element-button::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 21%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--pl-c-kristall-3), var(--pl-c-kristall-2), transparent);
  opacity: .9;
  pointer-events: none;
}

button:hover,
.button:hover,
a.button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.wp-block-button a.wp-block-button__link:hover,
.gb-button:hover,
.wp-element-button:hover {
  background-color: var(--pl-accent-light);
  color: var(--pl-btn-ink);
  transform: translateY(-1px);
}
button:active,
.button:active,
input[type="submit"]:active,
.wp-block-button a.wp-block-button__link:active,
.gb-button:active { transform: translateY(0); }

/* --- Rücknahme für Bedien-Buttons ------------------------------------------
   Menü-Umschalter, Suchmodal, Off-Canvas-Schließer usw. sind Werkzeuge,
   keine Handlungsaufforderungen – sie dürfen nicht wie Buttons aussehen. */
button.menu-toggle,
.mobile-bar-items button,
.menu-bar-item button,
.main-navigation .menu-toggle,
.search-modal button,
.search-modal .search-modal-form button,
.slideout-exit,
button.slideout-exit,
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close,
.dropdown-menu-toggle {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: 0;
  padding: 0 var(--pl-sp-3);
  color: var(--pl-ink);
  overflow: visible;
  transform: none;
  text-transform: none;
  letter-spacing: 0;
}
button.menu-toggle::before,
.mobile-bar-items button::before,
.menu-bar-item button::before,
.search-modal button::before,
.slideout-exit::before,
.wp-block-navigation__responsive-container-open::before,
.wp-block-navigation__responsive-container-close::before,
.dropdown-menu-toggle::before { content: none; }

button.menu-toggle:hover,
.mobile-bar-items button:hover,
.menu-bar-item button:hover,
.search-modal button:hover,
.slideout-exit:hover {
  background: transparent;
  color: var(--pl-accent);
  transform: none;
}

/* Der Menü-Umschalter behält seine Beschriftung im Marken-Stil. */
.menu-toggle .mobile-menu {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
}

/* --- Sekundär · Kristallkontur -------------------------------------------- */
.pl-btn-secondary,
.wp-block-button.is-style-outline > a.wp-block-button__link,
.gb-button.pl-btn-secondary {
  /* Zwei Hintergründe: innen die Fläche, außen der Kristall als Rand. */
  background-image: linear-gradient(var(--pl-band), var(--pl-band)),
                    var(--pl-kristall);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  background-color: transparent;
  border: var(--pl-hairline) solid transparent;
  color: var(--pl-ink);
  font-weight: 400;
}
.pl-btn-secondary::before,
.wp-block-button.is-style-outline > a.wp-block-button__link::before { content: none; }
.pl-btn-secondary:hover,
.wp-block-button.is-style-outline > a.wp-block-button__link:hover {
  background-color: transparent;
  color: var(--pl-accent);
}

/* --- Textlink-Button („Mehr lesen“) ---------------------------------------- */
.pl-btn-text {
  display: inline-block;
  background: none;
  border: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: 0;
  padding: 0 0 var(--pl-sp-1);
  color: var(--pl-ink);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
}
.pl-btn-text::before { content: none; }
.pl-btn-text:hover {
  background: none;
  color: var(--pl-accent);
  border-bottom-color: var(--pl-accent);
  transform: none;
}

/* --- Zurück-nach-oben (GP Premium) ------------------------------------------ */
a.generate-back-to-top {
  background-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  border-radius: 50%;
}
a.generate-back-to-top:hover,
a.generate-back-to-top:focus {
  background-color: var(--pl-accent-light);
  color: var(--pl-btn-ink);
}


/* =====================================================================
   13 · FORMULARE UND SUCHE
   ===================================================================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="number"],
input[type="date"],
textarea,
select {
  width: 100%;
  max-width: 100%;
  background-color: transparent;
  color: var(--pl-ink);
  font-family: var(--pl-font-text);
  font-weight: var(--pl-fw-body);
  font-size: var(--pl-fs-body);
  line-height: 1.4;
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: .9375rem 1.3125rem;   /* 15 / 21 */
  transition: border-color var(--pl-dur) var(--pl-ease),
              box-shadow var(--pl-dur) var(--pl-ease);
}
textarea {
  border-radius: var(--pl-radius);
  min-height: 12rem;
  padding: var(--pl-sp-4);
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--pl-ink-mute) 50%),
                    linear-gradient(135deg, var(--pl-ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 21px) center, calc(100% - 15px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 3rem;
}

input::placeholder,
textarea::placeholder { color: var(--pl-ink-mute); opacity: 1; }

/* Fokus: 2 px Kristallschein – sichtbar, aber ohne Lärm. */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: var(--pl-focus-line);
  box-shadow: var(--pl-focus-ring);
}

label {
  display: block;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin-bottom: var(--pl-sp-2);
}

input[type="checkbox"],
input[type="radio"] {
  width: auto;
  accent-color: var(--pl-accent);
  margin-right: var(--pl-sp-2);
}

fieldset {
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-5);
  margin-bottom: var(--pl-sp-5);
}
legend {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  padding: 0 var(--pl-sp-3);
}

/* --- Suchformular ------------------------------------------------------------ */
.search-form,
.wp-block-search__inside-wrapper {
  display: flex;
  gap: var(--pl-sp-3);
  align-items: center;
  border: 0;
}
.wp-block-search__input { border-radius: var(--pl-radius-pill); }
.widget .search-field { padding: .75rem 1.3125rem; }
.widget_search .search-submit,
.wp-block-search__button { flex: 0 0 auto; }


/* =====================================================================
   14 · SEITENLEISTE UND WIDGETS
   ===================================================================== */
.widget-area .widget,
.sidebar .widget {
  background-color: transparent;
  border: 0;
  border-top: var(--pl-hairline) solid var(--pl-line);
  border-radius: 0;
  padding: var(--pl-sp-4) 0 0;
  margin-bottom: var(--pl-space-in);
}
.sidebar .widget:last-child { margin-bottom: 0; }

.widget-title {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-accent);
  margin-bottom: var(--pl-sp-4);
}

.widget ul,
.widget ol { margin: 0; padding: 0; list-style: none; }
.widget ul li {
  padding: var(--pl-sp-3) 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  font-size: var(--pl-fs-small);
  line-height: 1.45;
}
.widget ul li:last-child { border-bottom: 0; padding-bottom: 0; }
.widget a { color: var(--pl-ink-soft); }
.widget a:hover { color: var(--pl-accent); }
.widget p { font-size: var(--pl-fs-small); color: var(--pl-ink-soft); }

/* Zähler in Fellfarbe */
.widget_categories li,
.widget_archive li { color: var(--pl-fur); }

.tagcloud { display: flex; flex-wrap: wrap; gap: var(--pl-sp-2); }
.tagcloud a {
  display: inline-block;
  /* GP/WP setzt hier eine Inline-Schriftgröße pro Tag – die wollen wir
     bewusst überschreiben, damit die Pillen einheitlich bleiben. */
  font-size: var(--pl-fs-label) !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-soft);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: .38em 1em;
  line-height: 1.2;
}
.tagcloud a:hover { color: var(--pl-accent); border-color: var(--pl-accent); }

#wp-calendar { font-size: var(--pl-fs-small); }
#wp-calendar caption {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  padding-bottom: var(--pl-sp-3);
}
#wp-calendar th,
#wp-calendar td { border-color: var(--pl-line); }


/* =====================================================================
   15 · FUSSBEREICH
   ---------------------------------------------------------------------
   Eine durchgehende Fläche in Waldgrund, keine einzige Trennlinie.
   Die Gliederung entsteht allein aus Weißraum, Größen und der grünen
   Overline über jeder Spalte.

   Spaltenmaß: die erste Spalte (Name + Satz) steht zu den drei
   Menüspalten im Goldenen Schnitt.

   GeneratePress baut den Fußbereich mit Flexbox und einem
   -40px/+40px-Trick für die Spaltenabstände. Beides wird hier auf ein
   Raster mit echtem gap umgestellt.
   ===================================================================== */
.site-footer,
.site-footer .footer-widgets,
.footer-widgets,
.site-info {
  background-color: var(--pl-bg-deep);   /* Waldgrund */
  color: var(--pl-ink-soft);
  border: 0;
}

/* Die Polsterung sitzt am Container, nicht am äußeren Block. */
.footer-widgets { padding: 0; }
.site-footer .footer-widgets-container {
  padding: var(--pl-pad-section) var(--pl-pad-inline) var(--pl-space-in);
  max-width: var(--pl-content-max);
}

/* --- Spaltenraster ---------------------------------------------------- */
.site-footer .footer-widgets-container .inside-footer-widgets {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) repeat(3, minmax(0, 1fr));
  gap: var(--pl-space-in);
  margin-left: 0;                 /* GeneratePress-Versatz zurücknehmen */
}
.site-footer .footer-widgets-container .inner-padding {
  padding: 0;                     /* Gegenstück zum Versatz oben */
}

/* --- Widgets im Fußbereich · ohne Rahmen, ohne Linien ------------------ */
.footer-widgets .widget {
  background-color: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin: 0 0 var(--pl-sp-4);
}
.footer-widgets .widget:last-child { margin-bottom: 0; }

/* Der Name in der ersten Spalte */
.footer-widgets .wp-block-heading,
.footer-widgets .widget > h4 {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h4);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--pl-ink);
  margin: 0 0 var(--pl-sp-4);
}

/* Der Satz darunter */
.footer-widgets .widget p {
  font-size: var(--pl-fs-body);
  line-height: 1.45;
  color: var(--pl-ink-soft);
  max-width: 34ch;
  margin: 0;
}

/* Spaltenüberschriften – die grüne Overline */
.footer-widgets .widget-title {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-accent);
  margin: 0 0 var(--pl-sp-4);
}

/* Menülisten – keine Trennlinien, ruhiger Zeilenabstand */
.footer-widgets .widget ul,
.footer-widgets .widget ol {
  margin: 0;
  padding: 0;
  list-style: none;
}
.footer-widgets .widget ul li {
  border: 0;
  padding: var(--pl-sp-1) 0;
  font-size: var(--pl-fs-body);
  line-height: 1.45;
}
.footer-widgets .widget ul li:last-child { padding-bottom: 0; }
.footer-widgets a { color: var(--pl-ink-soft); text-decoration: none; }
.footer-widgets a:hover,
.footer-widgets a:focus-visible { color: var(--pl-accent); }


/* =====================================================================
   15.1 · FUSSZEILE · COPYRIGHT UND RECHTLICHES
   Beide Seiten tragen dieselbe Schriftgröße, Laufweite und Farbe –
   sie sind eine Zeile, kein Über- und Untergeordnetes.
   ===================================================================== */
.site-info {
  color: var(--pl-ink-mute);
  text-align: left;
  padding: 0;
}
.site-info .inside-site-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pl-sp-3) var(--pl-sp-5);
  max-width: var(--pl-content-max);
  margin: 0 auto;
  /* Die einzige Linie im Fußbereich. Sie sitzt am Innencontainer, damit
     sie auf der Satzkante beginnt und endet – nicht über die volle
     Fensterbreite. Darüber und darunter derselbe Abstand: 34 px. */
  border-top: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-5) var(--pl-pad-inline);
}

/* GeneratePress arbeitet hier mit float – im Flex-Raster stört das. */
.footer-bar-align-right .copyright-bar,
.footer-bar-align-right .footer-bar,
.footer-bar-align-left .copyright-bar,
.footer-bar-align-left .footer-bar,
.footer-bar-align-center .copyright-bar,
.footer-bar-align-center .footer-bar { float: none; }

/* Die Reihenfolge im Markup ist Leiste → Copyright; die Ausrichtung
   des Customizers wird über order nachgebildet. */
.footer-bar-align-right .copyright-bar { order: 0; }
.footer-bar-align-right .footer-bar    { order: 1; text-align: right; }
.footer-bar-align-left  .footer-bar    { order: 0; text-align: left; }
.footer-bar-align-left  .copyright-bar { order: 1; text-align: right; }

/* Copyright und Rechtslinks: exakt gleich groß und gleich laut. */
.site-info .copyright-bar,
.site-info .footer-bar,
.site-info .footer-bar .widget ul li,
.site-info .footer-bar .widget ul li a {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  line-height: 1.4;
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}
.site-info .footer-bar .widget {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
.site-info .footer-bar .widget_nav_menu > div > ul {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-2) var(--pl-sp-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-info .footer-bar .widget ul li {
  border: 0;
  padding: 0;
  margin: 0;
}
.site-info a { color: var(--pl-ink-mute); text-decoration: none; }
.site-info a:hover,
.site-info a:focus-visible { color: var(--pl-accent); }


/* =====================================================================
   15.2 · FUSSBEREICH AUF SCHMALEN BILDSCHIRMEN
   ===================================================================== */
@media (max-width: 900px) {
  .site-footer .footer-widgets-container .inside-footer-widgets {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--pl-sp-6);
  }
  /* Name und Satz nehmen die volle Breite. */
  .site-footer .footer-widgets-container .inside-footer-widgets > div:first-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 768px) {
  .site-footer .footer-widgets-container {
    padding: var(--pl-sp-6) var(--pl-sp-4) var(--pl-sp-5);
  }
  .site-footer .footer-widgets-container .inside-footer-widgets {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--pl-sp-6);
  }
  /* GeneratePress schaltet hier auf Spalte um – wir bleiben beim Raster. */
  .site-footer .footer-widgets .footer-widgets-container .inside-footer-widgets {
    display: grid;
    margin: 0;
  }
  .site-footer .footer-widgets-container .inside-footer-widgets > div:not(:last-child) {
    margin-bottom: 0;
  }
  .footer-widgets .widget p { max-width: none; }

  .site-info .inside-site-info {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--pl-sp-4) var(--pl-sp-4);
  }
  .footer-bar-align-right .copyright-bar,
  .footer-bar-align-left .copyright-bar { order: 1; text-align: left; }
  .footer-bar-align-right .footer-bar,
  .footer-bar-align-left .footer-bar { order: 0; text-align: left; }
}


/* =====================================================================
   16 · KOMMENTARE
   ===================================================================== */
.comments-area { color: var(--pl-ink-soft); }
.comments-title,
.comment-reply-title {
  font-size: var(--pl-fs-h3);
  margin-bottom: var(--pl-sp-5);
}
.comment-list { list-style: none; margin: 0; padding: 0; }
.comment-body {
  border-top: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-5) 0;
}
.comment-author .fn,
.comment-author cite {
  font-family: var(--pl-font-display);
  font-style: normal;
  font-size: var(--pl-fs-h5);
  color: var(--pl-ink);
}
.comment-meta .avatar { border-radius: 50%; }
.comment-metadata,
.comment-metadata a {
  font-size: var(--pl-fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}
.comment-content .reply a {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  color: var(--pl-accent);
}
.comment-form-comment textarea { width: 100%; }
.comment-form-cookies-consent label {
  display: inline;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--pl-fs-small);
}


/* =====================================================================
   17 · GENERATEBLOCKS
   Die per Block gesetzten Werte (Farben, Abstände) sollen weiterhin
   gewinnen – deshalb hier nur Grundstimmung und Marken-Hilfsklassen.
   ===================================================================== */
.gb-container { color: var(--pl-ink); }
.gb-container p,
.gb-text { color: var(--pl-ink-soft); }

.gb-headline {
  font-family: var(--pl-font-display);
  font-weight: 400;
  letter-spacing: var(--pl-track-title);
  color: var(--pl-ink);
}

/* Marken-Hilfsklassen für Container („Erweitert → Zusätzliche CSS-Klasse“) */
.gb-container.pl-card,
.gb-element.pl-card,
.pl-card {
  background-color: var(--pl-bg-deep);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
}
.gb-container.pl-band,
.gb-element.pl-band,
.pl-band {
  background-color: var(--pl-band);
  color: var(--pl-ink);
}
.gb-container.pl-forest,
.gb-element.pl-forest,
.pl-forest {
  background-color: var(--pl-bg-deep);
  color: var(--pl-ink);
}
/* Helle Fläche (Pergament) – z. B. für Print-nahe Abschnitte */
.pl-paper {
  background-color: var(--pl-lite-bg);
  color: var(--pl-lite-ink);
  border: var(--pl-hairline) solid var(--pl-lite-line);
  border-radius: var(--pl-radius);
}
.pl-paper h1, .pl-paper h2, .pl-paper h3,
.pl-paper h4, .pl-paper h5 { color: var(--pl-lite-ink); }
.pl-paper p { color: var(--pl-lite-mute); }
.pl-paper a { color: var(--pl-accent-deep); }


/* =====================================================================
   18 · WOOCOMMERCE · GRUNDZÜGE
   Nur so viel, dass der Shop nicht aus der Marke fällt. Details bitte
   bei Bedarf hier ergänzen.
   ===================================================================== */
.woocommerce .woocommerce-message,
.woocommerce .woocommerce-info,
.woocommerce .woocommerce-error {
  background-color: var(--pl-bg-deep);
  border-top-color: var(--pl-accent);
  border-radius: var(--pl-radius);
  color: var(--pl-ink-soft);
  font-size: var(--pl-fs-small);
}
.woocommerce ul.products li.product .woocommerce-loop-product__title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h5);
  color: var(--pl-ink);
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price {
  font-family: var(--pl-font-display);
  color: var(--pl-fur);
  font-size: var(--pl-fs-h5);
}
.woocommerce div.product .product_title { font-size: var(--pl-fs-h2); }
.woocommerce ul.products li.product img,
.woocommerce div.product div.images img { border-radius: var(--pl-radius); }
.woocommerce span.onsale {
  background-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  border-radius: var(--pl-radius-pill);
}
.woocommerce .woocommerce-tabs ul.tabs { border-bottom: var(--pl-hairline) solid var(--pl-line); }
.woocommerce table.shop_table,
.woocommerce table.shop_table td,
.woocommerce table.shop_table th { border-color: var(--pl-line); }
.woocommerce .quantity .qty { border-radius: var(--pl-radius-pill); text-align: center; }


/* =====================================================================
   19 · BILD-REZEPTE
   Bogen · Kreis · Karte · Vollbreite · Kosmos-Tönung
   Als CSS-Klassen im Editor („Zusätzliche CSS-Klasse“) verwendbar.
   ===================================================================== */
.pl-arch,
.pl-arch img {
  border-radius: var(--pl-arch);
  overflow: hidden;
}
.pl-circle,
.pl-circle img {
  border-radius: 50%;
  aspect-ratio: 1;
  object-fit: cover;
  overflow: hidden;
}
.pl-frame,
.pl-frame img {
  border-radius: var(--pl-radius);
  border: var(--pl-hairline) solid var(--pl-line);
  overflow: hidden;
}
/* Das Kopfbild-Format des Systems: 1,618 : 1 */
.pl-golden,
.pl-golden img { aspect-ratio: 1.618 / 1; object-fit: cover; width: 100%; }

/* Bühnen-/Archivmotive in Schwarzweiß */
.pl-bw img, img.pl-bw { filter: grayscale(1) contrast(1.04); }

/* Nachtwelt: Fotos entsättigt auf 62 %, leicht kühl.
   Greift nur in der Welt „Kosmos“ und nur bei .pl-photo. */
html[data-farbwelt="kosmos"] .pl-photo img,
html[data-welt="kosmos"] .pl-photo img,
html[data-farbwelt="kosmos"] img.pl-photo,
html[data-welt="kosmos"] img.pl-photo {
  filter: saturate(.62) contrast(1.06) hue-rotate(-8deg) brightness(.94);
}

/* Text über Bild braucht immer eine Abdunkelung. */
.pl-overlay { position: relative; }
.pl-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    color-mix(in srgb, var(--pl-bg) 85%, transparent),
    color-mix(in srgb, var(--pl-bg) 25%, transparent) 62%,
    transparent);
  pointer-events: none;
}
.pl-overlay > * { position: relative; z-index: 1; }


/* =====================================================================
   20 · HILFSKLASSEN · DIE BAUTEILE DES SYSTEMS
   ===================================================================== */

/* Overline / Label – die Zeile über jeder Überschrift */
.pl-overline {
  display: block;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--pl-accent);
  margin-bottom: var(--pl-sp-3);
}
.pl-overline--fell { color: var(--pl-fur); }
.pl-overline--still { color: var(--pl-ink-mute); }

/* Display-Titel für Hero-Bereiche */
.pl-display {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-display);
  line-height: var(--pl-lh-display);
  letter-spacing: var(--pl-track-display);
  margin: 0;
}
/* Die zweite Stimme im Titel */
.pl-voice {
  font-family: var(--pl-font-text);
  font-weight: 300;
  font-style: italic;
  letter-spacing: -.01em;
  color: var(--pl-accent);
}

/* Satzbreiten */
.pl-measure        { max-width: var(--pl-measure); }
.pl-measure-narrow { max-width: var(--pl-measure-narrow); }

/* Haarlinien */
.pl-hairline { height: 1px; background: var(--pl-line); border: 0; }
.pl-hairline--strong { background: var(--pl-line-strong); }
.pl-hairline--fell { background: var(--pl-fur); opacity: .5; }

/* Facette (9 px, gedreht) und Fellpunkt */
.pl-facette,
.pl-dot {
  display: inline-block;
  flex: 0 0 auto;
  vertical-align: middle;
}
.pl-facette {
  width: 9px; height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--pl-kristall);
  opacity: var(--pl-kristall-a);
}
.pl-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pl-fur);
}

/* Ziffern und Marginalien in Fellfarbe */
.pl-num {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h4);
  color: var(--pl-fur);
  line-height: 1;
}
.pl-margin-note {
  font-size: var(--pl-fs-small);
  color: var(--pl-fur);
  font-style: italic;
}

/* Das Siegel: Kreis mit Punkt */
.pl-seal {
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 1.5px solid var(--pl-accent);
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
}
.pl-seal::before {
  content: "";
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pl-accent);
}

/* Abschnittsraum als Klasse – die π-Stufen */
.pl-section          { padding-block: var(--pl-pad-section); }
.pl-section--chapter { padding-block: clamp(4.9375rem, 10vw, 12.5625rem); }
.pl-stack-in    > * + * { margin-top: var(--pl-space-in); }
.pl-stack-group > * + * { margin-top: var(--pl-space-group); }

/* Farbbänder für ganze Abschnitte */
.pl-bg-forest { background-color: var(--pl-bg-deep); color: var(--pl-ink); }
.pl-bg-bark   { background-color: var(--pl-band);    color: var(--pl-ink); }
.pl-bg-earth  { background-color: var(--pl-band-2);  color: var(--pl-ink); }

/* Der Goldene Schnitt als Spaltenaufteilung */
.pl-split-golden {
  display: grid;
  grid-template-columns: minmax(0, 1.618fr) minmax(0, 1fr);
  gap: clamp(2.125rem, 4vw, 4.9375rem);
  align-items: start;
}
@media (max-width: 768px) {
  .pl-split-golden { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   21 · FARBWELT-UMSCHALTER
   Passt zum vorhandenen GeneratePress-Element-Snippet
   (.pl-topbar / .pl-world-switch / .pl-dot).
   Im neuen System ohne Himmelsverlauf: ein Rindenband mit Haarlinie.
   ===================================================================== */
.pl-topbar {
  background-color: var(--pl-band);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  color: var(--pl-ink-mute);
}
.pl-topbar__inner {
  max-width: var(--pl-content-max);
  margin: 0 auto;
  padding: var(--pl-sp-3) var(--pl-pad-inline);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--pl-sp-4);
  flex-wrap: wrap;
}
.pl-topbar__tag {
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  display: inline-flex;
  align-items: center;
  gap: .6em;
}
.pl-topbar__tag::before {
  content: "";
  width: 9px; height: 9px;
  border-radius: 2px;
  transform: rotate(45deg);
  background: var(--pl-kristall);
  opacity: var(--pl-kristall-a);
}

.pl-world-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-sp-1);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: var(--pl-sp-1);
  background: transparent;
}
/* Die Umschalter-Knöpfe sind KEINE Buttons im Marken-Sinn –
   sie müssen die Button-Grundregeln oben zurücknehmen. */
.pl-world-switch button,
.pl-world-switch button:hover {
  background: transparent;
  background-image: none;
  border: 0;
  border-radius: var(--pl-radius-pill);
  padding: var(--pl-sp-2);
  color: var(--pl-ink-mute);
  transform: none;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  gap: var(--pl-sp-2);
  opacity: .5;
  transition: opacity var(--pl-dur) var(--pl-ease),
              box-shadow var(--pl-dur) var(--pl-ease);
}
.pl-world-switch button::before { content: none; }
.pl-world-switch button:hover { opacity: .85; }
.pl-world-switch button[aria-pressed="true"] {
  opacity: 1;
  box-shadow: 0 0 0 1px var(--pl-line-strong);
}
.pl-world-switch .pl-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18);
}
.pl-world-switch button[data-world="wald"]   .pl-dot,
.pl-world-switch button[data-world="natur"]  .pl-dot {
  background: linear-gradient(135deg, var(--pl-c-tiefgruen), var(--pl-c-laubgruen));
}
.pl-world-switch button[data-world="kosmos"] .pl-dot {
  background: linear-gradient(135deg, var(--pl-c-weltraum),
              var(--pl-c-kristall-1) 60%, var(--pl-c-kristall-2));
}

/* Ein-Knopf-Variante */
.pl-world-toggle,
.pl-world-toggle:hover {
  display: inline-flex;
  align-items: center;
  gap: var(--pl-sp-2);
  background: transparent;
  background-image: none;
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: var(--pl-sp-2) var(--pl-sp-4);
  color: var(--pl-ink);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
  transform: none;
}
.pl-world-toggle::before { content: none; }
.pl-world-toggle .pl-dot { background: var(--pl-kristall); width: 14px; height: 14px; }

/* Weicher Weltwechsel */
body,
.site-header,
.top-bar,
.site-footer,
.footer-widgets,
.site-info,
.separate-containers .inside-article,
.page-header,
.main-navigation ul ul,
.slideout-navigation {
  transition: background-color var(--pl-dur-slow) var(--pl-ease),
              color var(--pl-dur-slow) var(--pl-ease),
              border-color var(--pl-dur-slow) var(--pl-ease);
}


/* =====================================================================
   22 · RESPONSIVE FEINSCHLIFF
   GeneratePress schaltet das mobile Menü standardmäßig bei 768 px.
   ===================================================================== */
@media (max-width: 1024px) {
  :root {
    --pl-pad-section: clamp(2.125rem, 6vw, 4.9375rem);
  }
}

@media (max-width: 768px) {
  :root {
    --pl-measure: 100%;
  }
  .inside-header { padding: var(--pl-sp-3) var(--pl-sp-4); }
  .separate-containers .inside-article,
  .separate-containers .comments-area,
  .separate-containers .page-header,
  .one-container .site-content { padding: var(--pl-sp-4); }

  .separate-containers .site-main > *:not(:last-child) {
    margin-bottom: var(--pl-sp-6);
  }
  blockquote { padding-left: var(--pl-sp-4); margin: var(--pl-sp-6) 0; }
  .post-navigation { margin: var(--pl-sp-6) 0; }

  /* Buttons dürfen auf schmalen Geräten die volle Breite nehmen. */
  .wp-block-buttons.is-vertical .wp-block-button,
  .wp-block-button.pl-btn-block .wp-block-button__link { width: 100%; text-align: center; }
}

@media (max-width: 480px) {
  body { font-size: 1rem; }
  .paging-navigation .nav-links > * { min-width: 2.5rem; min-height: 2.5rem; }
}


/* =====================================================================
   23 · BARRIEREFREIHEIT, BEWEGUNG, DRUCK
   ===================================================================== */

/* Mindestgröße für Tippziele */
.main-navigation .main-nav ul li a,
.paging-navigation .nav-links > *,
button, .button, input[type="submit"] { min-height: 44px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (prefers-contrast: more) {
  :root {
    --pl-line:        rgba(244, 237, 222, .34);
    --pl-line-strong: rgba(244, 237, 222, .6);
    --pl-ink-mute:    var(--pl-ink-soft);
  }
}

/* --- Druck: das System kippt auf Papier ins Helle ---------------------- */
@media print {
  :root {
    --pl-bg: #FFFFFF;
    --pl-bg-deep: #FFFFFF;
    --pl-band: #FFFFFF;
    --pl-ink: #3A2A1C;          /* Erdreich als Schriftfarbe */
    --pl-ink-soft: #3A2A1C;
    --pl-ink-mute: #6E5A45;
    --pl-accent: #7C9A5B;
    --pl-line: #DAD0BC;
    --pl-line-strong: #DAD0BC;
  }
  body { background: #fff; color: var(--pl-ink); font-size: 12pt; line-height: 1.62; }
  .site-header,
  .main-navigation,
  .top-bar,
  .pl-topbar,
  .sidebar,
  .footer-widgets,
  .comments-area,
  .paging-navigation,
  .post-navigation,
  a.generate-back-to-top { display: none !important; }  /* Druckansicht: hart ausblenden */
  .entry-content a::after { content: " (" attr(href) ")"; font-size: 9.4pt; color: var(--pl-ink-mute); }
  h1, h2, h3 { break-after: avoid; }
  figure, blockquote, table { break-inside: avoid; }
}

/* =====================================================================
   24 · TERMINE · PLUGIN „CALENDAR EVENTS“ (LSCE)
   ---------------------------------------------------------------------
   Das Plugin läuft hier bewusst OHNE eigenes Design
   (Einstellungen → Termine → Design ≠ „Standard“). Übrig bleibt
   semantisches Markup mit den Klassen .lsec-* (Listen, Kalender, Karten,
   Formular) und .lsce-event-* (Eckdaten auf der Einzelseite).
   Beides bekommt hier seine Gestalt aus dem Design-System.

   Zwei Dinge, die das Plugin dem CSS ausdrücklich überlässt:
     · die Trennpunkte in  ul.lsec-meta  (li + li::before)
     · den Platzhalter in  a.lsec-thumb[data-placeholder]  (ohne Bild)
   ===================================================================== */

/* --- Wurzel und Aufräumen ------------------------------------------- */
.lsec {
  font-family: var(--pl-font-text);
  color: var(--pl-ink);
}
.lsec *,
.lsec *::before,
.lsec *::after { box-sizing: border-box; }

/* Listen des Plugins sind Layout, keine Aufzählungen. */
.lsec ul,
.lsec ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
.lsec ul > li::before,
.lsec ol > li::before { content: none; }

/* Links im Plugin tragen oft keine Klasse – die Unterstreichung aus dem
   Fließtext darf hier nicht greifen. */
.lsec a:not([class]),
.lsce-event-single-meta a:not([class]) {
  text-decoration: none;
  color: var(--pl-ink);
}
.lsec a:not([class]):hover,
.lsce-event-single-meta a:not([class]):hover { color: var(--pl-accent); }


/* =====================================================================
   24.1 · KALENDERANSICHT · Jahr → Monat → Woche → Termin
   ===================================================================== */
.lsec-calendar > .lsec-year + .lsec-year { margin-top: var(--pl-space-group); }

/* --- Jahr ------------------------------------------------------------ */
.lsec-year__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--pl-sp-3) var(--pl-sp-4);
  border-top: var(--pl-hairline) solid var(--pl-line-strong);
  padding-top: var(--pl-sp-4);
  margin-bottom: var(--pl-sp-5);
}
.lsec-year__title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h3);
  line-height: 1;
  letter-spacing: var(--pl-track-title);
  color: var(--pl-ink);
  margin: 0;
}
.lsec-year__count {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}

/* --- Monat ------------------------------------------------------------ */
.lsec-month + .lsec-month { margin-top: var(--pl-space-in); }

.lsec-month__head {
  display: flex;
  align-items: center;
  gap: var(--pl-sp-4);
  margin-bottom: var(--pl-sp-4);
}
.lsec-month__title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h4);
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--pl-ink);
  margin: 0;
  flex: 0 0 auto;
}
/* Der Steg zwischen Monatsname und Zähler: eine Haarlinie. */
.lsec-month__rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--pl-line);
}
.lsec-month__count {
  flex: 0 0 auto;
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-small);
  color: var(--pl-fur);          /* Ziffern in Fellfarbe */
  line-height: 1;
}

/* --- Woche ------------------------------------------------------------ */
.lsec-week + .lsec-week { margin-top: var(--pl-sp-6); }

.lsec-week__label {
  display: flex;
  align-items: center;
  gap: .6em;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin-bottom: var(--pl-sp-3);
}
.lsec-week__label::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pl-fur);
  flex: 0 0 auto;
}

/* Ohne Jahres-/Monats-/Wochenköpfe bleibt der Rhythmus trotzdem stehen. */
.lsec-calendar--no-year .lsec-year__head,
.lsec-calendar--no-month .lsec-month__head,
.lsec-calendar--no-week .lsec-week__label { display: none; }


/* =====================================================================
   24.2 · DER EINZELNE TERMIN IN DER LISTE
   Aufbau:  Datum · Bild · Text · Preis + Knopf
   ===================================================================== */
.lsec-cal-item,
.lsec-list-item {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--pl-sp-4) var(--pl-sp-5);
  padding: var(--pl-sp-5) 0;
  border-top: var(--pl-hairline) solid var(--pl-line);
}
.lsec-week__events > .lsec-cal-item:first-child,
.lsec-list > .lsec-list-item:first-child {
  border-top-color: var(--pl-line-strong);
}

/* Der nächste Termin bekommt die eine Kristall-Haarlinie der Seite. */
.lsec-cal-item--next::before,
.lsec-list-item--next::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 1px;
  background: var(--pl-kristall);
  opacity: var(--pl-kristall-a);
}

/* Vergangene Termine treten zurück, verschwinden aber nicht. */
.lsec-cal-item--past,
.lsec-list-item--past { opacity: .55; }

/* Abgesagt: der Titel wird durchgestrichen. */
.lsec-cal-item--cancelled .lsec-event__title,
.lsec-list-item--cancelled .lsec-event__title {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--pl-ink-mute);
}

/* --- Datumsblock ------------------------------------------------------ */
.lsec-date {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  min-width: 3.5rem;
  line-height: 1;
}
.lsec-date__dow,
.lsec-date__mon {
  font-size: var(--pl-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}
.lsec-date__day {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: 2.1875rem;          /* 35 px – Stufe H3 der Skala */
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--pl-fur);          /* Ziffern in Fellfarbe */
}
/* Heute: der Tag rückt in die Akzentfarbe. */
.lsec-date--today .lsec-date__day { color: var(--pl-accent); }
.lsec-date--today .lsec-date__dow { color: var(--pl-accent); }

/* --- Bild -------------------------------------------------------------- */
.lsec-thumb {
  flex: 0 0 clamp(7rem, 14vw, 11rem);
  display: block;
  aspect-ratio: 1.618 / 1;       /* das Format des Systems */
  overflow: hidden;
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background-color: var(--pl-bg-deep);
}
.lsec-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
  transition: transform var(--pl-dur-slow) var(--pl-ease);
}
.lsec-cal-item:hover .lsec-thumb img,
.lsec-list-item:hover .lsec-thumb img { transform: scale(1.03); }

/* Ohne Beitragsbild liefert das Plugin ein leeres <a data-placeholder>.
   Wir blenden es aus, damit keine Reihe leerer Kästen entsteht.
   Wer den Platzhalter sehen möchte, kommentiert die nächste Regel aus –
   die Gestaltung dafür steht direkt darunter bereit. */
.lsec-thumb[data-placeholder] { display: none; }

.lsec-thumb[data-placeholder]::after {
  content: attr(data-placeholder);
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}

/* --- Textspalte -------------------------------------------------------- */
.lsec-cal-item__body,
.lsec-list-item__body {
  flex: 1 1 20rem;
  min-width: 0;
}

.lsec-event__title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h4);
  line-height: 1.1;
  letter-spacing: -.012em;
  color: var(--pl-ink);
  margin: 0 0 var(--pl-sp-3);
}
.lsec-event__title a { color: inherit; text-decoration: none; }
.lsec-event__title a:hover { color: var(--pl-accent); }

.lsec-event__series {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0 0 var(--pl-sp-2);
}
.lsec-event__series strong { font-weight: 500; color: var(--pl-ink-soft); }

/* Metazeile – die Trennpunkte kommen laut Plugin ausdrücklich aus dem CSS. */
.lsec-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
  line-height: 1.4;
  margin: 0 0 var(--pl-sp-3);
}
.lsec-meta > li { margin: 0; }
.lsec-meta > li + li::before {
  content: "·";
  color: var(--pl-fur);
  margin: 0 .62em;
}
.lsec-meta__strong { font-weight: 500; color: var(--pl-ink-soft); }

.lsec-event__excerpt {
  font-size: var(--pl-fs-body);
  line-height: var(--pl-lh-body);
  color: var(--pl-ink-soft);
  max-width: 58ch;
  margin: 0;
}
.lsec-event__excerpt:empty { display: none; }

/* --- Preis- und Knopfspalte -------------------------------------------- */
.lsec-cal-item__aside,
.lsec-list-item__foot,
.lsec-card__foot {
  flex: 0 0 auto;
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--pl-sp-3);
  text-align: right;
}

.lsec-pricing {
  display: flex;
  flex-direction: column;
  align-items: inherit;
  gap: var(--pl-sp-1);
}
.lsec-price {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h5);
  line-height: 1;
  color: var(--pl-fur);          /* Beträge sind Ziffern */
  white-space: nowrap;
}
.lsec-price--free { color: var(--pl-accent); }
.lsec-price--open,
.lsec-price--soli { color: var(--pl-fur); }
.lsec-price__note {
  font-size: var(--pl-fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}


/* =====================================================================
   24.2.1 · DIE LISTENANSICHT
   ---------------------------------------------------------------------
   Die Liste hat ein eigenes Raster, weil sie anders gebaut ist als der
   Kalender: das Plugin steckt Kopf, Auszug UND Preisblock gemeinsam in
   .lsec-list-item__body.

     article.lsec-list-item
       a.lsec-thumb
       div.lsec-list-item__body
         div.lsec-list-item__head     Titel · Datum/Zeit · Ort
         p.lsec-event__excerpt
         div.lsec-list-item__foot     Preis · Knopf

   Damit der Preisblock rechts neben den Text kommt statt darunter, löst
   display:contents die Zwischenebene auf — dann liegen Kopf, Auszug und
   Fuß direkt im Raster der Zeile.

     Breit:  Bild | Text        | Preis
                  | Auszug      | Knopf
     Schmal: alles untereinander, Preis und Knopf zuletzt nebeneinander

   Alles gilt für beliebig viele Termine untereinander: gleiche
   Spaltenbreiten, gleiche Haarlinien, gleiche Knopfkante.
   ===================================================================== */
.lsec-list-item {
  display: grid;
  grid-template-columns:
    clamp(6.5rem, 11vw, 9.5rem)      /* Bild   */
    minmax(0, 1fr)                    /* Text   */
    minmax(9.5rem, 11.5rem);          /* Preis  */
  grid-template-areas:
    "bild kopf preis"
    "bild text preis";
  align-items: start;
  column-gap: clamp(1.3125rem, 2.4vw, 2.125rem);
  row-gap: var(--pl-sp-3);
  padding: var(--pl-sp-5) var(--pl-sp-4);
  margin-inline: calc(var(--pl-sp-4) * -1);
  transition: background-color var(--pl-dur) var(--pl-ease);
}
.lsec-list-item:hover { background-color: var(--pl-bg-hover); }

/* Termine ohne Beitragsbild ruecken auf zwei Spalten zusammen. */
.lsec-list-item:not(:has(> .lsec-thumb)),
.lsec-list-item--no-thumb {
  grid-template-columns: minmax(0, 1fr) minmax(9.5rem, 11.5rem);
  grid-template-areas:
    "kopf preis"
    "text preis";
}

/* Die Zwischenebene aufloesen — sie ist nur ein Behaelter. */
.lsec-list-item__body { display: contents; }

.lsec-list-item > .lsec-thumb {
  grid-area: bild;
  flex: none;
  width: 100%;
  aspect-ratio: 1 / 1;
}
.lsec-list-item__head        { grid-area: kopf; }
.lsec-list-item .lsec-event__excerpt { grid-area: text; }
.lsec-list-item__foot        { grid-area: preis; }

/* --- Der Textteil ------------------------------------------------------ */
.lsec-list-item .lsec-event__title {
  font-size: clamp(1.5rem, 2.4vw, 2.1875rem);
  line-height: 1.06;
  margin: 0 0 var(--pl-sp-3);
}

/* Datum und Uhrzeit sind die Hauptinformation einer Terminliste —
   Young Serif in Fellfarbe, so gross wie ein Vorlauf. */
.lsec-list-item__head .lsec-meta:first-of-type {
  font-family: var(--pl-font-display);
  font-size: clamp(1.1875rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  color: var(--pl-fur);
  column-gap: 0;
  margin-bottom: var(--pl-sp-2);
}
/* Der Trennpunkt haengt am vorherigen Eintrag, nicht am naechsten:
   bricht die Zeile um, bleibt er oben stehen statt die neue Zeile zu
   eroeffnen. */
.lsec-list-item__head .lsec-meta:first-of-type > li + li::before { content: none; }
.lsec-list-item__head .lsec-meta:first-of-type > li:not(:last-child)::after {
  content: " ·";
  margin-right: .5em;
  color: var(--pl-fur-deep);
}

/* Der Ort bleibt eine Nebenangabe. */
.lsec-list-item__head .lsec-meta + .lsec-meta {
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
  margin-bottom: 0;
}

/* Der Auszug haelt die Zeilen kurz, damit lange und kurze Termine in
   einer Liste dieselbe Hoehe bekommen. */
.lsec-list-item .lsec-event__excerpt {
  font-size: var(--pl-fs-small);
  line-height: 1.6;
  color: var(--pl-ink-mute);
  max-width: 62ch;
  margin: 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
}

/* --- Die Preisspalte ---------------------------------------------------- */
.lsec-list-item__foot {
  display: grid;
  justify-items: end;
  align-content: start;
  gap: var(--pl-sp-3);
  margin-left: 0;
  text-align: right;
}
.lsec-list-item__foot .lsec-pricing {
  align-items: flex-end;
  gap: 2px;
}
.lsec-list-item__foot .lsec-price {
  font-size: var(--pl-fs-h4);
  line-height: 1;
  white-space: nowrap;
}
.lsec-list-item__foot .lsec-price__note {
  font-size: var(--pl-fs-label);
  letter-spacing: .1em;
  line-height: 1.35;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  text-wrap: balance;
}
/* Ein Knopf, der ueber alle Termine hinweg dieselbe Kante hat. */
.lsec-list-item__foot .lsec-btn {
  width: 100%;
  text-align: center;
  padding-inline: var(--pl-sp-3);
}


/* --- Die Liste auf schmalen Bildschirmen -------------------------------
   Bild, Text, dann Preis und Knopf darunter — nebeneinander, damit die
   Zeile nicht unnoetig hoch wird. */
@media (max-width: 781px) {
  .lsec-list-item,
  .lsec-list-item:not(:has(> .lsec-thumb)),
  .lsec-list-item--no-thumb {
    grid-template-columns: clamp(4.5rem, 22vw, 7rem) minmax(0, 1fr);
    grid-template-areas:
      "bild kopf"
      "text text"
      "preis preis";
    row-gap: var(--pl-sp-4);
    padding-inline: 0;
    margin-inline: 0;
  }
  .lsec-list-item:not(:has(> .lsec-thumb)),
  .lsec-list-item--no-thumb {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "kopf" "text" "preis";
  }
  .lsec-list-item .lsec-event__excerpt { -webkit-line-clamp: 3; line-clamp: 3; }

  .lsec-list-item__foot {
    grid-auto-flow: column;
    justify-items: start;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    padding-top: var(--pl-sp-3);
    border-top: var(--pl-hairline) solid var(--pl-line);
  }
  .lsec-list-item__foot .lsec-pricing { align-items: flex-start; }
  .lsec-list-item__foot .lsec-price__note { text-align: left; }
  .lsec-list-item__foot .lsec-btn { width: auto; padding-inline: var(--pl-sp-5); }
}

@media (max-width: 420px) {
  /* justify-content muss zurueck auf normal — sonst bleibt die Spur aus
     der Zeilenfassung schmal und der Knopf waechst nicht mit. */
  .lsec-list-item__foot {
    grid-auto-flow: row;
    justify-content: normal;
    justify-items: stretch;
    gap: var(--pl-sp-4);
  }
  .lsec-list-item__foot .lsec-btn { width: 100%; }
}


/* =====================================================================
   24.3 · KNÖPFE DES PLUGINS
   .lsec-btn           – der zweite Weg, Kontur
   .lsec-btn--primary  – gefüllte Pille mit Kristall-Lichtkante
   ===================================================================== */
.lsec-btn {
  display: inline-block;
  position: relative;
  overflow: hidden;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  line-height: 1.2;
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--pl-ink);
  background: transparent;
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: .8125rem 1.75rem;
  cursor: pointer;
  transition: color var(--pl-dur) var(--pl-ease),
              border-color var(--pl-dur) var(--pl-ease),
              background-color var(--pl-dur) var(--pl-ease),
              transform var(--pl-dur) var(--pl-ease);
}
.lsec-btn:hover {
  color: var(--pl-accent);
  border-color: var(--pl-accent);
  transform: translateY(-1px);
}

.lsec-btn--primary {
  background-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  border-color: transparent;
  font-weight: 500;
}
.lsec-btn--primary::before {
  content: "";
  position: absolute;
  left: 21%;
  right: 21%;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--pl-c-kristall-3), var(--pl-c-kristall-2), transparent);
  opacity: .9;
  pointer-events: none;
}
.lsec-btn--primary:hover {
  background-color: var(--pl-accent-light);
  color: var(--pl-btn-ink);
  border-color: transparent;
}

.lsec-btn--sm  { font-size: var(--pl-fs-label); padding: .625rem 1.3125rem; }
.lsec-btn--lg  { padding: 1.0625rem 2.125rem; }
.lsec-btn--block { display: block; width: 100%; text-align: center; }
.lsec-btn--quiet {
  border-color: transparent;
  padding-left: 0;
  padding-right: 0;
  color: var(--pl-ink-mute);
}
.lsec-btn--quiet:hover { transform: none; border-color: transparent; }
.lsec-btn[disabled],
.lsec-btn[aria-disabled="true"] {
  opacity: .45;
  pointer-events: none;
}


/* =====================================================================
   24.4 · STATUS · ABZEICHEN, PLÄTZE, HINWEISE
   ===================================================================== */
.lsec-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-2);
  margin-bottom: var(--pl-sp-3);
}
.lsec-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--pl-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.2;
  color: var(--pl-ink-mute);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  padding: .34em .95em;
}
/* Kategorie */
.lsec-badge--solid {
  color: var(--pl-accent);
  border-color: transparent;
  background-color: color-mix(in srgb, var(--pl-accent) 16%, transparent);
}
/* Zustand mit Punkt: „noch wenige Plätze“ */
.lsec-badge--dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.lsec-badge--almost { color: var(--pl-fur); border-color: var(--pl-fur-deep); }
.lsec-badge--full,
.lsec-badge--soldout { color: var(--pl-ink-mute); }
.lsec-badge--cancelled {
  color: var(--pl-ink-mute);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Platzanzeige */
.lsec-capacity {
  font-size: var(--pl-fs-label);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  display: flex;
  flex-direction: column;
  gap: var(--pl-sp-1);
  min-width: 8rem;
}
.lsec-capacity__bar {
  display: block;
  height: 2px;
  background: var(--pl-line);
  border-radius: var(--pl-radius-pill);
  overflow: hidden;
}
.lsec-capacity__fill {
  display: block;
  height: 100%;
  width: var(--lsec-capacity, 0%);
  background: var(--pl-accent);
  border-radius: inherit;
}
.lsec-capacity--low  .lsec-capacity__fill { background: var(--pl-fur); }
.lsec-capacity--full .lsec-capacity__fill { background: var(--pl-fur-deep); }

/* Hinweise */
.lsec-notice,
.lsec-status-note {
  font-size: var(--pl-fs-small);
  line-height: 1.5;
  color: var(--pl-ink-soft);
  border-left: var(--pl-hairline) solid var(--pl-accent);
  padding: var(--pl-sp-3) var(--pl-sp-4);
  margin: 0 0 var(--pl-sp-4);
}
.lsec-notice--quiet {
  border-left-color: var(--pl-line-strong);
  color: var(--pl-ink-mute);
}
.lsec-error {
  display: block;
  font-size: var(--pl-fs-small);
  color: var(--pl-c-kristall-3);
  margin-top: var(--pl-sp-2);
}

/* Nichts gefunden */
.lsec-empty {
  border-top: var(--pl-hairline) solid var(--pl-line);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-space-in) 0;
  text-align: center;
}
.lsec-empty__title {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h4);
  color: var(--pl-ink);
  margin: 0 0 var(--pl-sp-3);
}
.lsec-empty__text {
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
  margin: 0;
}


/* =====================================================================
   24.5 · WEITERE ANSICHTEN · RASTER, FILTER, BLÄTTERN
   ===================================================================== */

/* --- Karten-Raster ---------------------------------------------------- */
.lsec-grid {
  display: grid;
  grid-template-columns: repeat(var(--lsec-cols, 3), minmax(0, 1fr));
  gap: var(--pl-space-in);
}
@media (max-width: 900px) { .lsec-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .lsec-grid { grid-template-columns: minmax(0, 1fr); } }

.lsec-card {
  display: flex;
  flex-direction: column;
  gap: var(--pl-sp-4);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4);
  transition: border-color var(--pl-dur) var(--pl-ease);
}
.lsec-card:hover { border-color: var(--pl-line-strong); }
.lsec-card .lsec-thumb { flex: 0 0 auto; width: 100%; }
.lsec-card__body { flex: 1 1 auto; }
.lsec-card__foot {
  margin-left: 0;
  align-items: flex-start;
  text-align: left;
  border-top: var(--pl-hairline) solid var(--pl-line);
  padding-top: var(--pl-sp-3);
}
.lsec-card--cancelled { opacity: .6; }

/* --- Filterleiste ------------------------------------------------------ */
.lsec-toolbar { margin-bottom: var(--pl-space-in); }
.lsec-chipbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-2);
}
/* .lsec-chip ist ein <button> – die Grundregeln für Buttons zurücknehmen. */
.lsec-chip,
.lsec-chip:hover {
  background: transparent;
  background-image: none;
  overflow: visible;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-soft);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  padding: .5em 1.1em;
  min-height: 0;
  transform: none;
  cursor: pointer;
}
.lsec-chip::before { content: none; }
.lsec-chip:hover { color: var(--pl-accent); border-color: var(--pl-accent); }
.lsec-chip[aria-pressed="true"],
.lsec-chip[aria-current="true"] {
  background: var(--pl-btn-bg);
  border-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  font-weight: 500;
}

/* --- Blättern ---------------------------------------------------------- */
.lsec-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-sp-2);
  margin-top: var(--pl-space-in);
  padding-top: var(--pl-sp-4);
  border-top: var(--pl-hairline) solid var(--pl-line);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-nav);
  text-transform: uppercase;
}
.lsec-pagination a,
.lsec-pagination [aria-current="page"] {
  display: inline-grid;
  place-items: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0 var(--pl-sp-3);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius-pill);
  color: var(--pl-ink-soft);
  text-decoration: none;
}
.lsec-pagination a:hover { border-color: var(--pl-accent); color: var(--pl-accent); }
.lsec-pagination [aria-current="page"] {
  background: var(--pl-btn-bg);
  border-color: var(--pl-btn-bg);
  color: var(--pl-btn-ink);
  font-weight: 500;
}
.lsec-pagination__gap { color: var(--pl-ink-mute); padding: 0 var(--pl-sp-2); }


/* =====================================================================
   24.6 · DIE EINZELSEITE EINES TERMINS
   ---------------------------------------------------------------------
   Aufbau der Seite (so liefert das Plugin sie ohne eigenes Design):

     h1.entry-title              der Titel
     .lsce-event-single-meta     die Eckdaten als <dl>
     ein Block mit dem Text      Beschreibung der Veranstaltung
     form.lsec-form              die Anmeldung

   Achtung: hier heisst der Praefix lsce-, im Rest des Plugins lsec-.
   ===================================================================== */

/* --- Kein leerer Rand -------------------------------------------------
   GeneratePress steht fuer Termine auf „Seitenleiste rechts“. Ist dort
   kein Widget, verschenkt das ein Drittel der Breite. Sobald du ein
   Widget einsetzt, greift die Ausnahme von selbst wieder. */
.single-lsce_event .sidebar:not(:has(.widget)) { display: none; }
.single-lsce_event .site-content:not(:has(.sidebar .widget)) .content-area { width: 100%; }

/* --- Kopf ------------------------------------------------------------- */

/* Das Beitragsbild steht bei GeneratePress ueber dem Titel
   (.featured-image .page-header-image-single, noch vor .entry-header).
   Ueber die volle Spalte waere es hier zu wuchtig — es bleibt schmal
   und laesst dem Titel den Vortritt. */
.single-lsce_event .featured-image {
  width: 480px;
  max-width: 100%;
  margin: 0 0 2em;
}

.single-lsce_event .entry-header { margin-bottom: var(--pl-sp-5); }
.single-lsce_event .entry-title {
  font-size: var(--pl-fs-h1);
  max-width: 18ch;
}

/* --- Eckdaten · das Band unter dem Titel ------------------------------- */
.lsce-event-single-meta {
  border-top: var(--pl-hairline) solid var(--pl-line-strong);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-sp-5) 0;
  margin-bottom: var(--pl-space-in);
}

/* Vier Paare nebeneinander: Beschriftung oben, Wert darunter.
   grid-auto-flow:column fuellt Spalte fuer Spalte — genau die Reihung,
   die ein <dl> aus dt/dd braucht. */
.lsce-event-meta {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: var(--pl-sp-2) var(--pl-sp-5);
  margin: 0;
}
.lsce-event-meta-label {
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0;
}
.lsce-event-meta dd {
  margin: 0;
  font-size: var(--pl-fs-body);
  line-height: 1.45;
  color: var(--pl-ink);
}
/* Datum und Uhrzeit sind Ziffern — die tragen im System Fellfarbe. */
.lsce-event-date,
.lsce-event-time {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h5);
  line-height: 1.15;
  color: var(--pl-fur);
}
.lsce-event-location { color: var(--pl-ink-soft); }
.lsce-event-price    { color: var(--pl-fur); }

/* --- Beschreibung ------------------------------------------------------
   Alles im Inhalt ausser Eckdaten und Formular bekommt Lesebreite. */
.single-lsce_event .entry-content > *:not(.lsce-event-single-meta):not(:has(.lsec-form)) {
  max-width: 66ch;
}
/* Der Untertitel steht unter dem Titel, nicht neben ihm. */
.single-lsce_event .entry-content h2:not(.lsec-form__title) {
  font-size: var(--pl-fs-h3);
  margin-bottom: var(--pl-sp-5);
}
.single-lsce_event .entry-content p { margin-bottom: var(--pl-sp-4); }


/* =====================================================================
   24.7 · DAS ANMELDEFORMULAR
   ---------------------------------------------------------------------
   Das Formular ist der Zweck der Seite. Es steht deshalb als eigene
   Karte da, in bequemer Ausfuellbreite (48 rem) und mit Feldern, die
   gross genug sind, um sie auf dem Telefon zu treffen.

   Reihenfolge im Markup, an die sich die Regeln halten:
     .lsec-form__head      Titel und Einleitung
     .lsec-summary         was gebucht wird
     .lsec-fieldset        die Felder
       .lsec-field         ein Feld (kann geschachtelt sein)
       .lsec-form__row     zwei Felder nebeneinander
       .lsec-tiers         die Beitragsstufen (Radio)
       .lsec-checks        Bezahlung (Radio) und Einwilligung (Checkbox)
     .lsec-form__actions   Knopf und Hinweis
   ===================================================================== */
.lsec-form {
  max-width: 48rem;
  margin: var(--pl-space-group) auto 0;
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background-color: var(--pl-bg-deep);
  padding: clamp(1.375rem, 3vw, 3.125rem);
  scroll-margin-top: 6rem;   /* fuer den Sprung aus #lsec-anmeldung */
}

/* Honigtopf gegen Spam — muss unsichtbar bleiben. */
.lsec-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Kopf des Formulars ------------------------------------------------ */
.lsec-form__head { margin-bottom: var(--pl-sp-5); }
.lsec-form__title {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: var(--pl-fs-h3);
  line-height: 1.02;
  letter-spacing: var(--pl-track-title);
  margin: 0 0 var(--pl-sp-3);
}
.lsec-form__intro {
  font-size: var(--pl-fs-body);
  line-height: 1.6;
  color: var(--pl-ink-soft);
  max-width: 52ch;
  margin: 0;
}

/* --- Zusammenfassung · was gebucht wird -------------------------------- */
.lsec-summary {
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background-color: rgba(0, 0, 0, .16);
  padding: var(--pl-sp-4);
  margin-bottom: var(--pl-space-in);
}
.lsec-summary__title {
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-accent);
  margin-bottom: var(--pl-sp-3);
}
.lsec-summary__event { margin-bottom: var(--pl-sp-4); }
.lsec-summary__name {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h5);
  line-height: 1.15;
  color: var(--pl-ink);
  margin: 0 0 var(--pl-sp-2);
}
.lsec-summary__when,
.lsec-summary__where {
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-soft);
  margin: 0;
}
.lsec-summary__when span + span::before { content: " · "; color: var(--pl-fur); }
.lsec-summary__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--pl-sp-2) var(--pl-sp-4);
  padding-top: var(--pl-sp-3);
  border-top: var(--pl-hairline) solid var(--pl-line);
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
}
.lsec-summary__total > span:last-child {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-body);
  color: var(--pl-fur);
  text-align: right;
}
.lsec-summary__note {
  font-size: var(--pl-fs-label);
  color: var(--pl-ink-mute);
  margin: var(--pl-sp-3) 0 0;
}

/* --- Felder ------------------------------------------------------------ */
.lsec-fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* Der Abstand zwischen den Bloecken haengt an der Reihenfolge, nicht am
   einzelnen Bauteil.
   Das ist wichtig, weil auf der ersten Ebene des Fieldsets dreierlei
   nebeneinander steht: .lsec-field (Name, Dein Beitrag, Bezahlung),
   .lsec-form__row (die E-Mail-Zeile) und .lsec-checks (Einwilligung).
   Haengt der Abstand nur an .lsec-field, bringt die E-Mail-Zeile keinen
   mit — und der naechste Block klebt an ihr. Eine Regel auf Geschwister
   trifft alle drei gleich. */
/* Erst der Reset — kein Bauteil bringt eigenen Aussenabstand mit … */
.lsec-field { margin: 0; }
/* … dann der Rhythmus. Beide haben dieselbe Spezifitaet (0-1-0), die
   Reihenfolge entscheidet: stuende der Reset danach, waeren die
   .lsec-field-Bloecke wieder ohne Abstand. */
.lsec-fieldset > * + * { margin-top: var(--pl-space-in); }

.lsec-form__row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--pl-sp-4);
}

/* Die Beschriftung steht ueber dem Feld, in Versalien. */
.lsec-label {
  display: block;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0 0 var(--pl-sp-3);
}
/* Die Unterbeschriftung steht NACH dem Feld — sie erklaert, was in dem
   Kasten darueber steht, und darf nicht wie eine Ueberschrift wirken. */
.lsec-sublabel {
  display: block;
  margin: var(--pl-sp-2) 0 0 var(--pl-sp-4);
  font-size: var(--pl-fs-small);
  letter-spacing: 0;
  text-transform: none;
  color: var(--pl-ink-mute);
}
.lsec-req { color: var(--pl-accent); margin-left: .3em; }
.lsec-hint {
  display: block;
  font-size: var(--pl-fs-small);
  line-height: 1.55;
  color: var(--pl-ink-mute);
  border: 0;
  padding: 0;
  margin: 0 0 var(--pl-sp-3);
  max-width: 56ch;
}

/* Eingabefelder: gefuellt statt durchsichtig — auf dunklem Grund ist
   der Kasten sonst kaum zu finden. */
.lsec-form .lsec-input,
.lsec-form .lsec-textarea,
.lsec-form input[type="text"],
.lsec-form input[type="email"],
.lsec-form input[type="tel"],
.lsec-form input[type="number"],
.lsec-form textarea,
.lsec-form select {
  width: 100%;
  min-height: 3.25rem;
  background-color: color-mix(in srgb, var(--pl-ink) 6%, transparent);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  color: var(--pl-ink);
  font-size: 1.0625rem;
}
.lsec-form textarea { min-height: 10rem; border-radius: var(--pl-radius); }
.lsec-form .lsec-input:hover { border-color: var(--pl-ink-mute); }

/* Fehlerhafte Felder */
.lsec-field--error .lsec-input,
.lsec-field--error .lsec-textarea { border-color: var(--pl-c-kristall-3); }
.lsec-error {
  display: block;
  font-size: var(--pl-fs-small);
  color: var(--pl-c-kristall-3);
  margin-top: var(--pl-sp-2);
}

/* --- Auswahlkaesten · Radio und Checkbox ------------------------------- */
.lsec-form input[type="radio"],
.lsec-form input[type="checkbox"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0;
  flex: 0 0 auto;
  accent-color: var(--pl-accent);
  cursor: pointer;
}

.lsec-tiers,
.lsec-checks {
  display: grid;
  gap: var(--pl-sp-3);
}

/* Wichtig: .lsec-tier und .lsec-check sind <label>-Elemente. Aus
   Abschnitt 13 erben sie sonst Versalien und Sperrung — die gehoeren
   der Feldbeschriftung, nicht dem Fliesstext darin. */
.lsec-tier,
.lsec-check {
  text-transform: none;
  letter-spacing: normal;
}

/* Beitragsstufen: Radio · Name und Erlaeuterung · Betrag */
.lsec-tier {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "wahl name betrag"
    "wahl text betrag";
  align-items: center;
  column-gap: var(--pl-sp-4);
  row-gap: 2px;
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4);
  cursor: pointer;
  transition: border-color var(--pl-dur) var(--pl-ease),
              background-color var(--pl-dur) var(--pl-ease);
}
.lsec-tier input { grid-area: wahl; }
.lsec-tier__name {
  grid-area: name;
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h5);
  line-height: 1.15;
  color: var(--pl-ink);
}
.lsec-tier__desc {
  grid-area: text;
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
}
.lsec-tier__amount {
  grid-area: betrag;
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h4);
  line-height: 1;
  color: var(--pl-fur);
  white-space: nowrap;
}
.lsec-tier:hover { border-color: var(--pl-line-strong); }
.lsec-tier:has(input:checked) {
  border-color: var(--pl-accent);
  background-color: color-mix(in srgb, var(--pl-accent) 12%, transparent);
}
.lsec-tier:has(input:checked) .lsec-tier__amount { color: var(--pl-accent); }
.lsec-tier:has(input:focus-visible) {
  border-color: var(--pl-focus-line);
  box-shadow: var(--pl-focus-ring);
}

/* Bezahlung und Einwilligung */
.lsec-check {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  column-gap: var(--pl-sp-4);
  cursor: pointer;
  font-size: var(--pl-fs-small);
  line-height: 1.55;
  color: var(--pl-ink-soft);
}
.lsec-check input { margin-top: .18em; }
/* Die Kasten-Variante ist eine Wahlmoeglichkeit, die schlichte eine
   Zustimmung — die bekommt keinen Rahmen. */
.lsec-check--box {
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4);
  transition: border-color var(--pl-dur) var(--pl-ease),
              background-color var(--pl-dur) var(--pl-ease);
}
.lsec-check--box:hover { border-color: var(--pl-line-strong); }
.lsec-check--box:has(input:checked) {
  border-color: var(--pl-accent);
  background-color: color-mix(in srgb, var(--pl-accent) 12%, transparent);
}
.lsec-check:has(input:focus-visible) {
  border-radius: var(--pl-radius);
  box-shadow: var(--pl-focus-ring);
}
.lsec-check__title {
  display: block;
  font-size: var(--pl-fs-body);
  font-weight: 500;
  color: var(--pl-ink);
}
.lsec-check__hint {
  display: block;
  margin-top: 2px;
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
}
.lsec-check a { color: var(--pl-accent); text-decoration: underline; text-underline-offset: .18em; }

/* Der Block, der erst nach der Wahl erscheint (z. B. die Bankdaten).
   Das Plugin schaltet ihn ueber das hidden-Attribut. */
.lsec-conditional[hidden] { display: none; }
.lsec-conditional {
  margin-top: var(--pl-sp-3);
  padding-left: var(--pl-sp-4);
  border-left: var(--pl-hairline) solid var(--pl-accent);
}
.lsec-conditional .lsec-hint { margin: 0; }

/* --- Teile, die nur manche Termine zeigen -----------------------------
   Mehrtermin-Veranstaltungen lassen ein Datum waehlen, Reihen zeigen
   ihre Einzeltermine, und optionale Felder klappen auf. Dieser Termin
   hat nichts davon — die Regeln stehen trotzdem hier, damit auch eine
   Reihe oder ein Workshop mit mehreren Terminen sauber aussieht. */

/* Datumswahl */
.lsec-dates {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-3);
}
.lsec-date-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 4.5rem;
  padding: var(--pl-sp-3);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  text-transform: none;
  letter-spacing: normal;
  cursor: pointer;
  transition: border-color var(--pl-dur) var(--pl-ease),
              background-color var(--pl-dur) var(--pl-ease);
}
.lsec-date-chip input { position: absolute; opacity: 0; pointer-events: none; }
.lsec-date-chip__dow {
  font-size: var(--pl-fs-label);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}
.lsec-date-chip__day {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h5);
  line-height: 1;
  color: var(--pl-fur);
}
.lsec-date-chip:hover { border-color: var(--pl-line-strong); }
.lsec-date-chip--selected,
.lsec-date-chip:has(input:checked) {
  border-color: var(--pl-accent);
  background-color: color-mix(in srgb, var(--pl-accent) 12%, transparent);
}
.lsec-date-chip--full { opacity: .4; pointer-events: none; }

/* Einzeltermine einer Reihe */
.lsec-sessions { display: grid; gap: var(--pl-sp-3); }
.lsec-session {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--pl-sp-4);
  row-gap: 2px;
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4);
  text-transform: none;
  letter-spacing: normal;
}
.lsec-session__no {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-small);
  color: var(--pl-fur);
}
.lsec-session__date,
.lsec-session__topic { font-size: var(--pl-fs-body); color: var(--pl-ink); }
.lsec-session__note { font-size: var(--pl-fs-small); color: var(--pl-ink-mute); }
.lsec-session__price {
  font-family: var(--pl-font-display);
  color: var(--pl-fur);
  white-space: nowrap;
}
.lsec-session--next { border-color: var(--pl-accent); }
.lsec-session--past { opacity: .5; }
.lsec-sessions--pick .lsec-session { cursor: pointer; }
.lsec-sessions--pick .lsec-session:has(input:checked) {
  border-color: var(--pl-accent);
  background-color: color-mix(in srgb, var(--pl-accent) 12%, transparent);
}

/* Aufklappbare Zusatzfelder */
.lsec-disclosure__toggle {
  background: none;
  border: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: 0;
  padding: 0 0 var(--pl-sp-1);
  min-height: 0;
  overflow: visible;
  transform: none;
  color: var(--pl-ink);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  cursor: pointer;
}
.lsec-disclosure__toggle::before { content: none; }
.lsec-disclosure__toggle:hover {
  background: none;
  transform: none;
  color: var(--pl-accent);
  border-bottom-color: var(--pl-accent);
}
.lsec-disclosure__hint { font-size: var(--pl-fs-small); color: var(--pl-ink-mute); }

/* Betrag mit Einheit dahinter, freier Betrag mit Regler */
.lsec-inputgroup {
  display: flex;
  align-items: center;
  gap: var(--pl-sp-3);
}
.lsec-inputgroup .lsec-input { flex: 1 1 8rem; }
.lsec-inputgroup__suffix {
  flex: 0 0 auto;
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h5);
  color: var(--pl-fur);
}
.lsec-range { width: 100%; accent-color: var(--pl-accent); }
.lsec-amount__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-sp-3);
}
.lsec-amount__scale,
.lsec-tierline {
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-mute);
}
.lsec-optional {
  color: var(--pl-ink-mute);
  text-transform: none;
  letter-spacing: normal;
  margin-left: .4em;
}


/* --- Absenden ---------------------------------------------------------- */
.lsec-form__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pl-sp-4);
  margin-top: var(--pl-space-in);
  padding-top: var(--pl-sp-5);
  border-top: var(--pl-hairline) solid var(--pl-line);
}
.lsec-form__note {
  font-size: var(--pl-fs-label);
  letter-spacing: .08em;
  color: var(--pl-ink-mute);
}

/* Breite Fassung des Formulars, wenn das Plugin sie anfordert */
.lsec-form--wide { max-width: 60rem; }


/* --- Kleinigkeiten aus den anderen Ansichten --------------------------- */
.lsec-price--range { color: var(--pl-fur); }

.lsec-list-item__head { margin-bottom: var(--pl-sp-3); }
.lsec-list-item--no-thumb .lsec-thumb { display: none; }

.lsec-when {
  font-size: var(--pl-fs-small);
  color: var(--pl-ink-soft);
}

/* Schluessel-Wert-Zeilen (Ort, Dauer, Plaetze …) */
.lsec-kv { display: grid; gap: var(--pl-sp-2); margin: 0; }
.lsec-kv__row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-2) var(--pl-sp-4);
  padding: var(--pl-sp-2) 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  font-size: var(--pl-fs-small);
}
.lsec-kv__row:last-child { border-bottom: 0; }
.lsec-kv__key {
  flex: 0 0 8rem;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}
.lsec-kv__val { flex: 1 1 12rem; color: var(--pl-ink); }


/* --- Danke-Seite ------------------------------------------------------- */
.lsec-success {
  max-width: 48rem;
  margin: var(--pl-space-group) auto 0;
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background-color: var(--pl-bg-deep);
  padding: clamp(1.375rem, 3vw, 3.125rem);
  text-align: center;
}
.lsec-success__mark {
  display: inline-grid;
  place-items: center;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  border: 1.5px solid var(--pl-accent);
  color: var(--pl-accent);
  margin-bottom: var(--pl-sp-4);
}
.lsec-success__title {
  font-family: var(--pl-font-display);
  font-size: var(--pl-fs-h3);
  margin: 0 0 var(--pl-sp-3);
}
.lsec-success__text { color: var(--pl-ink-soft); margin: 0; }


/* =====================================================================
   24.7.1 · DAS FORMULAR AUF SCHMALEN BILDSCHIRMEN
   ===================================================================== */
@media (max-width: 900px) {
  .lsce-event-meta {
    grid-template-rows: repeat(4, auto);
    gap: var(--pl-sp-2) var(--pl-sp-5);
  }
}

@media (max-width: 560px) {
  .lsce-event-meta {
    grid-auto-flow: row;
    grid-auto-columns: auto;
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .lsce-event-meta-label { margin-top: var(--pl-sp-4); }
  .lsce-event-meta > dt:first-of-type { margin-top: 0; }

  .lsec-form { padding: var(--pl-sp-4); border-radius: var(--pl-radius); }

  /* Betrag unter den Namen, sonst wird die Zeile zu eng. */
  .lsec-tier {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "wahl name"
      "wahl betrag"
      "wahl text";
    row-gap: var(--pl-sp-1);
  }
  .lsec-tier__amount { text-align: left; }

  .lsec-form__actions > .lsec-btn { width: 100%; text-align: center; }
}


/* =====================================================================
   24.8 · SCHMALE BILDSCHIRME
   ===================================================================== */
/* Nur die Kalenderansicht — die Liste bringt ihre eigene Fassung
   in Abschnitt 24.2.1 mit und darf hier nicht mit hineingeraten. */
@media (max-width: 768px) {
  .lsec-cal-item {
    gap: var(--pl-sp-3) var(--pl-sp-4);
    padding: var(--pl-sp-4) 0;
  }
  /* Datum und Titel nebeneinander, alles Weitere darunter. */
  .lsec-cal-item__body { flex: 1 1 100%; }

  .lsec-cal-item__aside {
    flex: 1 1 100%;
    margin-left: 0;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    text-align: left;
  }
  .lsec-cal-item .lsec-pricing { align-items: flex-start; }
  .lsec-cal-item .lsec-thumb { flex: 0 0 5.5rem; }
  .lsec-date { flex-direction: row; align-items: baseline; gap: .4em; min-width: 0; }
  .lsec-date__day { font-size: var(--pl-fs-h5); }
  .lsec-cal-item .lsec-event__excerpt { font-size: var(--pl-fs-small); }
  .lsec-form__row--auto { grid-template-columns: minmax(0, 1fr); }
}


/* =====================================================================
   25 · STARTSEITE · DIE ABSCHNITTE AUS DEM ENTWURF
   ---------------------------------------------------------------------
   Gehört zur Datei startseite-gutenberg.html im Theme-Ordner. Dort
   stehen nur Inhalt und Klassen, die Gestalt steht hier.

   Alle Abschnitte sind Core-Gutenberg-Blöcke (Gruppe, Spalten,
   Überschrift, Bild, Buttons) — kein Plugin nötig, nichts, was beim
   Einfügen verloren geht.

   Aufbau:
     25.1  Abschnitt und Abschnittskopf
     25.2  Hero mit Siegel
     25.3  Die Arbeit
     25.4  Angebote als Liste
     25.5  Drei Stimmen
     25.6  Über mich mit Zeitleiste
     25.7  Rahmen für Gedanken und Termine
     25.8  Shop
     25.9  Anfragen und Newsletter
     25.10 Bildplätze und Knopf-Varianten
     25.11 Schmale Bildschirme
     25.12 Gedanken · GenerateBlocks-Abfrage-Loop
     25.13 Termine · die kurze Fassung
   ===================================================================== */


/* =====================================================================
   25.1 · ABSCHNITT · das Band über die volle Fensterbreite
   ---------------------------------------------------------------------
   Der Block trägt „Volle Breite“ (alignfull). GeneratePress löst das
   mit festen Pixelwerten aus dem Customizer — die passen nicht zu
   unserem Innenabstand. Deshalb rechnen wir hier selbst: das Band
   läuft von Kante zu Kante, sein Inhalt bleibt auf Satzbreite.
   ===================================================================== */
.pl-abschnitt,
.entry-content .alignfull.pl-abschnitt,
.entry-content > .pl-abschnitt {
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: clamp(3.4375rem, 9vw, 7.875rem) var(--pl-pad-inline);
}
/* GeneratePress bringt keine theme.json mit. Deshalb legt WordPress beim
   Ausliefern um JEDE Gruppe wieder den alten Container
   .wp-block-group__inner-container (wp_restore_group_inner_container in
   wp-includes/block-supports/layout.php). Der säße mitten in unseren
   Rastern: aus vier Rasterspalten würde eine einzige, und GeneratePress
   gäbe ihm zusätzlich 40 px Innenabstand.

   display:contents nimmt ihm die eigene Box — die Kinder liegen wieder
   direkt im Raster ihrer Gruppe. Gilt nur innerhalb von .pl-abschnitt,
   der Rest der Seite bleibt unberührt. */
.pl-abschnitt .wp-block-group__inner-container { display: contents; }

.pl-abschnitt > *,
.pl-abschnitt > .wp-block-group__inner-container > * {
  max-width: var(--pl-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Das Moosband – die vierte Fläche, nur für „Termine“. */
.pl-bg-moss { background-color: var(--pl-bg-hover); color: var(--pl-ink); }

/* --- Abschnittskopf: Titel links, Beitext oder Weg rechts ------------- */
.pl-abschnittskopf {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--pl-sp-4) var(--pl-sp-6);
  margin-bottom: clamp(2.125rem, 4.4vw, 4.5rem);
}
/* Achtung: die Kinder sitzen eine Ebene tiefer, im display:contents-
   Container von WordPress. Fuer das Layout zaehlt das nicht, fuer die
   Selektoren schon — deshalb hier beide Wege. */
.pl-abschnittskopf > h2,
.pl-abschnittskopf > * > h2 { margin: 0; }
.pl-abschnittskopf > p,
.pl-abschnittskopf > * > p  { margin: 0; max-width: 46ch; }

.pl-abschnittskopf__neben {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--pl-sp-4) var(--pl-sp-5);
}
.pl-abschnittskopf__neben > *,
.pl-abschnittskopf__neben > * > * { margin: 0; }
/* Ohne Satzbreite draengt der Beitext die Ueberschrift in die naechste
   Zeile — im Entwurf stehen beide nebeneinander. */
.pl-abschnittskopf__neben .pl-still { max-width: 38ch; }

/* Der stille Beitext – überall dort, wo etwas nur begleitet. */
.pl-still {
  font-size: var(--pl-fs-small);
  line-height: 1.7;
  color: var(--pl-ink-mute);
}

/* „Alle Beiträge“, „Alle Termine“ – der Weg weiter */
.pl-mehr { margin: 0; }
.entry-content .pl-mehr a {
  display: inline-block;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  color: var(--pl-ink);
  text-decoration: none;
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  padding-bottom: var(--pl-sp-1);
  white-space: nowrap;
}
.entry-content .pl-mehr a:hover { color: var(--pl-accent); border-bottom-color: var(--pl-accent); }

/* Die Akzentzeile in der großen Überschrift */
.pl-akzent { color: var(--pl-accent); }

/* Links in den Abschnitten sind Titel und Wege, kein Fliesstext. Die
   Regel aus Abschnitt 5 (.entry-content a:not([class])) unterstreicht
   sie sonst und faerbt sie gruen. */
.entry-content .pl-abschnitt a:not([class]) { text-decoration: none; }


/* =====================================================================
   25.2 · HERO
   ===================================================================== */
.pl-hero { padding-top: clamp(3.5rem, 7vw, 6.875rem); }

.pl-hero__raster { gap: clamp(1.75rem, 4vw, 4.75rem); align-items: flex-end; }

.pl-hero .pl-display {
  /* Die Groesse ist so gedeckelt, dass „Singen. Tanzen.“ auf einer Zeile
     bleibt — auch wenn der Satzspiegel bei 1440 px aufhoert zu wachsen. */
  font-size: clamp(2.8125rem, 6.6vw, 5.75rem);
  margin: 0 0 var(--pl-sp-5);
}
.pl-hero .pl-lead    { max-width: 58ch; margin-bottom: var(--pl-sp-5); }

/* Das Portrait im Bogen, mit dem Siegel davor */
.pl-hero__medien { position: relative; }
.pl-hero__bild img {
  width: 100%;
  height: clamp(25rem, 48vw, 47.5rem);
  object-fit: cover;
  object-position: 62% 30%;
}

/* --- Siegel · der Kreis mit der umlaufenden Schrift ------------------- */
.pl-siegel {
  position: absolute;
  left: clamp(-3.5rem, -4vw, -1.25rem);
  bottom: clamp(1.5rem, 4vw, 4rem);
  width: clamp(8.25rem, 12vw, 11.625rem);
  height: clamp(8.25rem, 12vw, 11.625rem);
  color: var(--pl-ink);
  pointer-events: none;
  z-index: 2;          /* liegt vor dem Portrait, nicht dahinter */
}
.pl-siegel svg {
  width: 100%;
  height: 100%;
  animation: pl-spin 54s linear infinite;
}
.pl-siegel__text {
  font-family: var(--pl-font-text);
  font-size: 14.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  fill: var(--pl-accent);
}
.pl-siegel__kern { fill: var(--pl-accent); }

@keyframes pl-spin { to { transform: rotate(360deg); } }


/* =====================================================================
   25.3 · DIE ARBEIT
   ===================================================================== */
.pl-arbeit { gap: clamp(1.75rem, 4vw, 5.25rem); }
.pl-arbeit .pl-still { max-width: 34ch; }

/* Der große Satz – Young Serif, aber ruhiger als eine Überschrift */
.pl-aussage {
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: clamp(1.625rem, 3.4vw, 3.625rem);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--pl-ink);
  text-wrap: pretty;
  margin: 0;
}

.pl-werte {
  margin-top: clamp(2.125rem, 4vw, 4rem);
  padding-top: clamp(1.5rem, 2.6vw, 2.5rem);
  border-top: var(--pl-hairline) solid var(--pl-line);
  gap: clamp(1.125rem, 2.4vw, 2.75rem);
}
.pl-werte__titel {
  font-size: clamp(1.25rem, 1.7vw, 1.75rem);
  line-height: 1.15;
  margin: 0 0 var(--pl-sp-2);
}


/* =====================================================================
   25.4 · ANGEBOTE · die Liste
   ===================================================================== */
.pl-liste { border-top: var(--pl-hairline) solid var(--pl-line); }

.pl-liste__zeile {
  display: grid;
  grid-template-columns:
    clamp(3.25rem, 5vw, 6rem)
    minmax(0, 1fr)
    minmax(0, 1.05fr)
    clamp(1.75rem, 3vw, 3.5rem);
  gap: clamp(1rem, 2.4vw, 2.75rem);
  align-items: baseline;
  padding: clamp(1.5rem, 2.9vw, 2.875rem) var(--pl-sp-4);
  margin-inline: calc(var(--pl-sp-4) * -1);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  transition: background-color var(--pl-dur) var(--pl-ease);
}
.pl-liste__zeile:hover { background-color: var(--pl-bg-hover); }

/* Der Pfeil kommt aus dem CSS, nicht aus dem Inhalt. */
.pl-liste__zeile::after {
  content: "→";
  justify-self: end;
  align-self: baseline;
  font-size: clamp(1.125rem, 1.6vw, 1.625rem);
  line-height: 1;
  color: var(--pl-accent);
}

.pl-liste__nr {
  font-family: var(--pl-font-display);
  font-size: clamp(.875rem, 1.1vw, 1.125rem);
  letter-spacing: .06em;
  color: var(--pl-accent);
  margin: 0;
}
.pl-liste__titel {
  font-size: clamp(1.5rem, 2.6vw, 2.75rem);
  line-height: 1.08;
  letter-spacing: -.015em;
  margin: 0;
}
.entry-content .pl-liste__titel a { color: var(--pl-ink); text-decoration: none; }
.entry-content .pl-liste__zeile:hover .pl-liste__titel a { color: var(--pl-ink); }

.pl-liste__text > p,
.pl-liste__text > * > p { margin: 0; color: var(--pl-ink-soft); }
.pl-liste__format {
  margin-top: var(--pl-sp-3) !important;   /* schlägt die Absatzregel oben */
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
}


/* =====================================================================
   25.5 · DREI STIMMEN
   ===================================================================== */
.pl-stimmen { gap: clamp(1.125rem, 2.2vw, 2.5rem); }

.pl-stimme {
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: min(50%, 13.75rem) min(50%, 13.75rem) var(--pl-radius) var(--pl-radius)
               / 24% 24% var(--pl-radius) var(--pl-radius);
  background-color: rgba(0, 0, 0, .14);
  padding: clamp(1.875rem, 3.4vw, 3.5rem) clamp(1.375rem, 2.4vw, 2.5rem) clamp(1.75rem, 3vw, 2.75rem);
  text-align: center;
}
.pl-stimme > *,
.pl-stimme > * > * { margin-bottom: var(--pl-sp-4); }
.pl-stimme > *:last-child,
.pl-stimme > * > *:last-child { margin-bottom: 0; }
.pl-stimme__titel {
  font-size: clamp(1.375rem, 2.1vw, 2.125rem);
  line-height: 1.14;
  margin: 0 0 var(--pl-sp-4);
}


/* =====================================================================
   25.6 · ÜBER MICH
   ===================================================================== */
.pl-uebermich { gap: clamp(1.875rem, 4.6vw, 5.625rem); align-items: flex-start; }
.pl-uebermich__bild img {
  width: 100%;
  height: clamp(22.5rem, 44vw, 41.25rem);
  object-fit: cover;
  object-position: 54% 40%;
}

.pl-zeitleiste {
  margin-top: clamp(1.5rem, 2.6vw, 2.5rem);
  border-top: var(--pl-hairline) solid var(--pl-line);
}
.pl-zeit {
  display: grid;
  grid-template-columns: clamp(4rem, 7vw, 7.5rem) minmax(0, 1fr);
  gap: clamp(.875rem, 2vw, 2.25rem);
  padding: clamp(1.125rem, 2vw, 1.875rem) 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line);
}
.pl-zeit__jahr {
  font-family: var(--pl-font-display);
  font-size: clamp(.9375rem, 1.15vw, 1.25rem);
  color: var(--pl-accent);
  margin: 0;
}
.pl-zeit__text {
  font-size: var(--pl-fs-body);
  line-height: 1.68;
  color: var(--pl-ink-soft);
  margin: 0;
}

/* Das Zitat am Ende – groß, in Akzentfarbe, ohne Linie */
.pl-zitat {
  border: 0;
  padding: 0;
  margin: clamp(1.875rem, 3.2vw, 3rem) 0 0;
  max-width: none;
}
.pl-zitat p {
  font-family: var(--pl-font-display);
  font-size: clamp(1.375rem, 2.3vw, 2.375rem);
  line-height: 1.2;
  color: var(--pl-accent);
  margin: 0;
}
.pl-zitat cite {
  display: block;
  margin-top: var(--pl-sp-3);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  font-style: normal;
}
.pl-zitat cite::before { content: "— "; }


/* =====================================================================
   25.7 · RAHMEN FÜR GEDANKEN UND TERMINE
   Der Hinweiskasten verschwindet, sobald du den echten Block einsetzt
   und ihn löschst.
   ===================================================================== */
.pl-platzhalter {
  border-top: var(--pl-hairline) solid var(--pl-line);
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  padding: var(--pl-space-in) var(--pl-sp-4);
  text-align: center;
}
.pl-platzhalter p {
  margin: 0;
  font-size: var(--pl-fs-small);
  font-style: italic;
  color: var(--pl-ink-mute);
}
.pl-platzhalter strong { font-style: normal; color: var(--pl-ink-soft); }


/* =====================================================================
   25.8 · SHOP · auf Pergament
   ===================================================================== */
.pl-shop { gap: clamp(1.25rem, 2.6vw, 3rem); }

.pl-ware {
  border-bottom: var(--pl-hairline) solid var(--pl-lite-line);
  padding-bottom: clamp(1.125rem, 2vw, 1.75rem);
}
.pl-ware__bild { margin: 0 0 clamp(1.125rem, 2vw, 1.75rem); }
.pl-ware__bild img {
  width: 100%;
  height: clamp(14.375rem, 24vw, 23.75rem);
  object-fit: cover;
}
.pl-ware__art {
  margin: 0 0 var(--pl-sp-2);
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-lite-mute);
}
.pl-ware__titel {
  font-size: clamp(1.3125rem, 1.9vw, 2rem);
  line-height: 1.12;
  margin: 0 0 var(--pl-sp-3);
}
.entry-content .pl-ware__titel a { color: var(--pl-lite-ink); text-decoration: none; }
.entry-content .pl-ware__titel a:hover { color: var(--pl-accent-deep); }
.pl-ware p:last-child { margin: 0; font-size: var(--pl-fs-small); color: var(--pl-lite-mute); }

/* Auf Pergament kippt auch der stille Beitext ins Dunkle. */
.pl-paper .pl-still { color: var(--pl-lite-mute); }


/* =====================================================================
   25.9 · ANFRAGEN UND NEWSLETTER
   ===================================================================== */
.pl-anfrage { gap: clamp(2rem, 5vw, 6rem); align-items: center; }
.pl-anfrage .pl-lead { max-width: 52ch; }
.pl-anfrage .pl-still { margin-top: var(--pl-sp-4); }
.pl-anfrage .pl-still a {
  color: var(--pl-ink);
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  text-decoration: none;
}

.pl-newsletter {
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  background-color: rgba(0, 0, 0, .18);
  padding: clamp(1.625rem, 2.8vw, 2.75rem);
}
.pl-newsletter__titel {
  font-size: clamp(1.1875rem, 1.6vw, 1.625rem);
  line-height: 1.2;
  margin: 0 0 var(--pl-sp-4);
}
.pl-newsletter p { color: var(--pl-ink-soft); margin-bottom: var(--pl-sp-5); }


/* =====================================================================
   25.10 · BILDPLÄTZE UND KNOPF-VARIANTEN
   ===================================================================== */

/* Leere Bildplaetze lassen sich NICHT gestalten: WordPress liefert einen
   Bild-Block ohne Quelle gar nicht erst aus (wp-includes/blocks/image.php,
   render_block_core_image bricht ohne src ab). Im Editor siehst du den
   Platzhalter und kannst ihn fuellen — im Frontend ist bis dahin nichts da.
   Deshalb steht hier auch keine Regel dafuer. */

/* Der zweite Weg im Hero: ein Textlink in Knopfgröße */
.pl-btn-text-wrap a.wp-block-button__link {
  background: none;
  background-image: none;
  border: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: 0;
  padding: var(--pl-sp-4) var(--pl-sp-2);
  overflow: visible;
  color: var(--pl-ink);
  font-weight: 400;
}
.pl-btn-text-wrap a.wp-block-button__link::before { content: none; }
.pl-btn-text-wrap a.wp-block-button__link:hover {
  background: none;
  color: var(--pl-accent);
  border-bottom-color: var(--pl-accent);
  transform: none;
}

/* Der Knopf im Newsletter-Kasten: Kontur statt Fläche */
.pl-btn-secondary-wrap a.wp-block-button__link {
  background-color: transparent;
  background-image: none;
  color: var(--pl-accent);
  border: var(--pl-hairline) solid var(--pl-accent);
  font-weight: 400;
}
.pl-btn-secondary-wrap a.wp-block-button__link::before { content: none; }
.pl-btn-secondary-wrap a.wp-block-button__link:hover {
  background-color: var(--pl-accent);
  color: var(--pl-btn-ink);
}


/* =====================================================================
   25.11 · SCHMALE BILDSCHIRME
   Core-Spalten brechen von sich aus bei 781 px um. Was darüber hinaus
   nötig ist, steht hier.
   ===================================================================== */
@media (max-width: 900px) {
  .pl-liste__zeile {
    grid-template-columns: clamp(2.5rem, 6vw, 3.5rem) minmax(0, 1fr) clamp(1.5rem, 3vw, 2rem);
    align-items: start;
  }
  /* Titel und Text rücken untereinander in dieselbe Spalte. */
  .pl-liste__titel { grid-column: 2; }
  .pl-liste__text  { grid-column: 2; margin-top: var(--pl-sp-3); }
  .pl-liste__nr    { grid-row: 1; }
  .pl-liste__zeile::after { grid-row: 1; grid-column: 3; }
}

@media (max-width: 781px) {
  .pl-abschnitt { padding: clamp(2.125rem, 8vw, 3.4375rem) var(--pl-sp-4); }

  /* Das Siegel hat neben dem gestapelten Bild keinen Platz mehr. */
  .pl-siegel {
    position: static;
    margin: calc(var(--pl-sp-5) * -1) auto 0;
    width: 7.5rem;
    height: 7.5rem;
  }
  .pl-hero__bild img { height: clamp(18rem, 70vw, 26rem); }
  .pl-uebermich__bild img { height: clamp(16rem, 66vw, 24rem); }

  .pl-stimme { border-radius: min(50%, 9rem) min(50%, 9rem) var(--pl-radius) var(--pl-radius) / 18% 18% var(--pl-radius) var(--pl-radius); }

  .pl-abschnittskopf { gap: var(--pl-sp-3); }
  .pl-abschnittskopf__neben { flex-direction: column; align-items: flex-start; }
}


/* =====================================================================
   25.12 · GEDANKEN · der Abfrage-Loop aus GenerateBlocks
   ---------------------------------------------------------------------
   Markup, das der Loop liefert:

     div[class^="gb-looper-"]
       div.gb-loop-item
         img            Beitragsbild
         h2 > a         Titel
         p              Datum
         p              Auszug

   Zwei Dinge zur Einordnung:

   1. Diese Regeln ueberschreiben absichtlich, was im Block eingestellt
      ist. GenerateBlocks schreibt seine Werte in Klassen wie
      .gb-loop-item-aa36b480 (Spezifitaet 0-1-0) und laedt sie NACH
      dieser Datei. Mit zwei Klassen (.pl-gedanken .gb-loop-item, also
      0-2-0) gewinnen wir unabhaengig von der Reihenfolge.
      Wer die Karten kuenftig im Editor steuern will, nimmt diesen
      Abschnitt heraus.

   2. Das Datum steht im Markup UNTER dem Titel, im Entwurf darueber.
      Die Reihenfolge dreht `order` — angesprochen ueber die Stellung
      (h2 + p), nicht ueber die Hash-Klassen, die sich beim naechsten
      Speichern aendern koennen.
   ===================================================================== */
.pl-gedanken [class*="gb-looper"] {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  gap: clamp(1.25rem, 2.6vw, 3rem);
}

.pl-gedanken .gb-loop-item {
  --karte-pad: clamp(1.5rem, 2.6vw, 2.625rem);

  display: grid;
  align-content: start;
  gap: 0;
  padding: 0;
  background-color: var(--pl-bg-deep);
  border: var(--pl-hairline) solid var(--pl-line);
  border-radius: var(--pl-radius);
  overflow: hidden;
  transition: border-color var(--pl-dur) var(--pl-ease);
}
.pl-gedanken .gb-loop-item:hover { border-color: var(--pl-line-strong); }

/* Bild oben, randlos, fester Ausschnitt */
.pl-gedanken .gb-loop-item > img {
  order: 1;
  display: block;
  width: 100%;
  height: clamp(11.875rem, 20vw, 18.75rem);
  object-fit: cover;
  border-radius: 0;
  margin: 0;
}

/* Datum · wandert nach oben und wird zur Overline */
.pl-gedanken .gb-loop-item > h2 + p {
  order: 2;
  margin: var(--karte-pad) var(--karte-pad) var(--pl-sp-3);
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  line-height: 1.4;
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-accent);
}

/* Titel */
.pl-gedanken .gb-loop-item > h2 {
  order: 3;
  margin: 0 var(--karte-pad) var(--pl-sp-3);
  font-family: var(--pl-font-display);
  font-weight: 400;
  font-size: clamp(1.375rem, 2.3vw, 2.375rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--pl-ink);
  text-wrap: balance;
}
.pl-gedanken .gb-loop-item > h2 a { color: inherit; text-decoration: none; }
.pl-gedanken .gb-loop-item:hover > h2 a { color: var(--pl-accent); }

/* Auszug */
.pl-gedanken .gb-loop-item > h2 + p + p {
  order: 4;
  margin: 0 var(--karte-pad) var(--karte-pad);
  font-size: var(--pl-fs-body);
  line-height: 1.7;
  color: var(--pl-ink-soft);
}

/* Auf der Startseite blaettert niemand — der leere Kasten faellt weg. */
.pl-gedanken .gb-query-loop-pagination { display: none; }


/* =====================================================================
   25.13 · TERMINE · die kurze Fassung auf der Startseite
   ---------------------------------------------------------------------
   Auf der Terminseite steht die ausfuehrliche Liste (Abschnitt 24.2.1):
   Bild, Auszug, Preis, gefuellter Knopf. Auf der Startseite ist sie ein
   Verzeichnis — vier Spalten in einer Zeile:

     Datum   Titel                        Ort        Aktion

   Dafuer werden .lsec-list-item__body UND .lsec-list-item__head
   aufgeloest, damit Titel, Datum, Ort und Knopf gemeinsam im Raster der
   Zeile liegen. Die Reihenfolge im Markup (Titel · Datum · Ort) dreht
   grid-column.

   Die Regeln stehen bewusst hier und nicht in 24.2.1: sie gelten nur
   innerhalb von .pl-termine.

   Jedes der vier Teile bekommt grid-row: 1 ausdruecklich mit. Ohne das
   legt die Auto-Platzierung den Titel — im Markup steht er vor dem
   Datum, gehoert aber in Spalte 2 — in eine eigene Zeile, und das Datum
   rutscht darunter.
   ===================================================================== */
.pl-termine .lsec-list { border-top: var(--pl-hairline) solid var(--pl-line); }

.pl-termine .lsec-list-item,
.pl-termine .lsec-list-item--no-thumb {
  display: grid;
  grid-template-columns:
    clamp(6rem, 10vw, 10.5rem)     /* Datum  */
    minmax(0, 1fr)                  /* Titel  */
    minmax(0, .8fr)                 /* Ort    */
    auto;                           /* Aktion */
  grid-template-areas: none;
  /* baseline statt center: Datum, Titel und Ort haben verschiedene
     Schriftgroessen — auf der Grundlinie liest sich die Zeile als eine. */
  align-items: baseline;
  column-gap: clamp(1rem, 2.4vw, 2.75rem);
  row-gap: var(--pl-sp-2);
  padding: clamp(1.25rem, 2.4vw, 2.25rem) 0;
  margin-inline: 0;
  border-top: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line);
  background-color: transparent;
}
.pl-termine .lsec-list-item:hover { background-color: transparent; }

.pl-termine .lsec-list-item__body,
.pl-termine .lsec-list-item__head { display: contents; }

/* Datum — Young Serif, aber in Pergament statt Fell: hier ist es die
   Ordnung der Liste, keine beilaeufige Ziffer. */
.pl-termine .lsec-list-item__head .lsec-meta:first-of-type {
  grid-column: 1;
  grid-row: 1;
  font-family: var(--pl-font-display);
  font-size: clamp(1.0625rem, 1.5vw, 1.625rem);
  line-height: 1.2;
  color: var(--pl-ink);
  margin: 0;
}
.pl-termine .lsec-list-item__head .lsec-meta:first-of-type > li:not(:last-child)::after {
  content: " ·";
  margin-right: .4em;
  color: var(--pl-ink-mute);
}

/* Titel — im Verzeichnis ruhig, in Spectral statt Young Serif. */
.pl-termine .lsec-list-item .lsec-event__title {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--pl-font-text);
  font-weight: var(--pl-fw-body);
  font-size: clamp(1.0625rem, 1.35vw, 1.4375rem);
  line-height: 1.3;
  letter-spacing: 0;
  color: var(--pl-ink);
  margin: 0;
}
.pl-termine .lsec-event__title a { color: inherit; }
.pl-termine .lsec-list-item:hover .lsec-event__title a { color: var(--pl-accent); }

/* Ort */
.pl-termine .lsec-list-item__head .lsec-meta + .lsec-meta {
  grid-column: 3;
  grid-row: 1;
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-small);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0;
}

/* Aktion — ein Weg, kein Knopf. */
.pl-termine .lsec-list-item__foot {
  /* grid-area: preis aus 24.2.1 zuruecknehmen — der Name existiert hier
     nicht mehr und wuerde eine eigene Rasterzeile aufmachen. */
  grid-area: auto;
  grid-column: 4;
  grid-row: 1;
  display: block;
  gap: 0;
  margin: 0;
  padding: 0;
  border: 0;
  text-align: right;
}
.pl-termine .lsec-btn,
.pl-termine .lsec-btn--primary {
  display: inline-block;
  width: auto;
  min-height: 0;
  overflow: visible;
  transform: none;
  background: none;
  background-color: transparent;
  border: 0;
  border-bottom: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: 0;
  padding: 0 0 var(--pl-sp-1);
  color: var(--pl-accent);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  white-space: nowrap;
}
.pl-termine .lsec-btn::before { content: none; }
.pl-termine .lsec-btn:hover {
  background: none;
  background-color: transparent;
  transform: none;
  color: var(--pl-ink);
  border-bottom-color: var(--pl-accent);
}

/* Was im Verzeichnis nichts zu suchen hat. Soll der Preis mit, genuegt
   das Loeschen von .lsec-pricing in dieser Zeile. */
.pl-termine .lsec-event__excerpt,
.pl-termine .lsec-pricing,
.pl-termine .lsec-thumb { display: none; }


/* --- Beide Teile auf schmalen Bildschirmen ---------------------------- */
@media (max-width: 781px) {
  .pl-gedanken [class*="gb-looper"] { grid-template-columns: minmax(0, 1fr); }

  /* Datum, Titel und Ort untereinander, die Aktion rechts daneben. */
  .pl-termine .lsec-list-item,
  .pl-termine .lsec-list-item--no-thumb {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: none;
    align-items: start;
    row-gap: var(--pl-sp-1);
    padding: var(--pl-sp-4) 0;
  }
  .pl-termine .lsec-list-item__head .lsec-meta:first-of-type { grid-column: 1; grid-row: 1; }
  .pl-termine .lsec-list-item .lsec-event__title             { grid-column: 1; grid-row: 2; }
  .pl-termine .lsec-list-item__head .lsec-meta + .lsec-meta  { grid-column: 1; grid-row: 3; }
  .pl-termine .lsec-list-item__foot {
    grid-column: 2;
    grid-row: 1 / 4;
    align-self: center;
  }
}


/* =====================================================================
   26 · ANFRAGEFORMULAR · WPFORMS
   ---------------------------------------------------------------------
   Das Formular auf /anfragen/ laeuft mit dem modernen Renderer
   (.wpforms-render-modern). Der arbeitet mit eigenen CSS-Variablen —
   deshalb gehen die Farben ueber diese Variablen und nicht ueber ein
   Dutzend Einzelregeln. Das Plugin macht seine Arbeit weiter, nur eben
   mit unseren Werten.

   Wo die Variablen herkommen:
     · Die FARBEN setzt WPForms auf :root (inline, wpforms-modern-full).
       Setzen wir sie am Container, gewinnen wir immer — ein Wert am
       Element schlaegt einen geerbten.
     · Die GROESSEN setzt WPForms pro Formular auf #wpforms-406.… (1-1-0).
       Dagegen kaeme nur "!important" an. Deshalb greifen wir bei Hoehe
       und Innenabstand direkt an den Feldern an, nicht an den Variablen.

   Warum ueberall .wpforms-container.wpforms-render-modern und nicht
   nur .wpforms-container: die Stylesheets des Plugins laden NACH dieser
   Datei. Bei gleicher Spezifitaet gewinnt WPForms — mit der zweiten
   Klasse liegen wir eine Stufe darueber und gewinnen unabhaengig von
   der Reihenfolge.

   Willst du die Feldgroesse im Plugin steuern: WPForms → Formular →
   Feld → Erweitert → Feldgroesse. „Gross“ kommt unseren 52 px am
   naechsten.
   ===================================================================== */

/* --- 26.1 · Farben ueber die Variablen des Plugins --------------------- */
.wpforms-container {
  --wpforms-field-background-color: color-mix(in srgb, var(--pl-ink) 6%, transparent);
  --wpforms-field-border-color: var(--pl-line-strong);
  --wpforms-field-border-color-spare: var(--pl-ink-mute);
  --wpforms-field-text-color: var(--pl-ink);
  --wpforms-field-menu-color: var(--pl-bg-deep);
  --wpforms-field-border-radius: var(--pl-radius-pill);

  --wpforms-label-color: var(--pl-ink-mute);
  --wpforms-label-sublabel-color: var(--pl-ink-mute);
  --wpforms-label-error-color: var(--pl-c-kristall-3);

  --wpforms-button-background-color: var(--pl-btn-bg);
  --wpforms-button-background-color-alt: var(--pl-accent-light);
  --wpforms-button-text-color: var(--pl-btn-ink);
  --wpforms-button-text-color-alt: var(--pl-btn-ink);
  --wpforms-button-border-radius: var(--pl-radius-pill);
  --wpforms-button-border-size: 0;

  --wpforms-icon-choices-color: var(--pl-accent);

  /* Rahmen und Polsterung der Karte. Das Plugin setzt sie in
     div.wpforms-container-full:not(:empty) — Spezifitaet 0-2-1, gegen
     die eine eigene Regel nicht ankommt. Ueber seine Variablen schon. */
  --wpforms-container-padding: clamp(1.375rem, 3vw, 3.125rem);
  --wpforms-background-color: var(--pl-bg-deep);
  --wpforms-container-border-style: solid;
  --wpforms-container-border-width: var(--pl-hairline);
  --wpforms-container-border-color: var(--pl-line);
  --wpforms-container-border-radius: var(--pl-radius);
}

/* --- 26.2 · Der Rahmen · dieselbe Karte wie beim Anmeldeformular ------- */
.wpforms-container.wpforms-render-modern {
  max-width: 48rem;
  margin-inline: auto;
}

/* Der Abstand zwischen den Feldern folgt der Reihenfolge, nicht dem
   einzelnen Feld — genau wie im Anmeldeformular (Abschnitt 24.7). */
.wpforms-container.wpforms-render-modern .wpforms-field { padding: 0; margin: 0; }
.wpforms-container.wpforms-render-modern .wpforms-field-container > .wpforms-field + .wpforms-field {
  margin-top: var(--pl-space-in);
}

/* Die beiden Spam-Fallen des Plugins bleiben, wie sie sind — sie duerfen
   nur keinen Abstand aufreissen. Nicht ausblenden: WPForms versteckt sie
   bewusst anders als mit display:none. */
.wpforms-container.wpforms-render-modern .wpforms-field:has(input[tabindex="-1"]) {
  margin: 0;
  padding: 0;
}

/* --- 26.3 · Beschriftungen -------------------------------------------- */
.wpforms-container.wpforms-render-modern .wpforms-field-label,
.wpforms-container.wpforms-render-modern legend.wpforms-field-label {
  display: block;
  font-family: var(--pl-font-text);
  font-weight: 400;
  font-size: var(--pl-fs-label);
  line-height: 1.4;
  letter-spacing: var(--pl-track-label);
  text-transform: uppercase;
  color: var(--pl-ink-mute);
  margin: 0 0 var(--pl-sp-3);
  padding: 0;
}
.wpforms-container.wpforms-render-modern .wpforms-required-label {
  color: var(--pl-accent);
  margin-left: .3em;
}

/* Die Unterbeschriftung steht NACH dem Feld und erklaert es — sie darf
   nicht wie eine Ueberschrift wirken. */
.wpforms-container.wpforms-render-modern .wpforms-field-sublabel {
  display: block;
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-small);
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pl-ink-mute);
  margin: var(--pl-sp-2) 0 0 var(--pl-sp-4);
}
.wpforms-container.wpforms-render-modern .wpforms-field-description {
  font-size: var(--pl-fs-small);
  line-height: 1.55;
  color: var(--pl-ink-mute);
  margin-top: var(--pl-sp-2);
}

/* Fieldset und Legende bringen im Browser eigene Abstaende mit. */
.wpforms-container.wpforms-render-modern fieldset {
  border: 0;
  padding: 0;
  margin: 0;
}

/* --- 26.4 · Felder ----------------------------------------------------- */
.wpforms-container.wpforms-render-modern input[type="text"],
.wpforms-container.wpforms-render-modern input[type="email"],
.wpforms-container.wpforms-render-modern input[type="tel"],
.wpforms-container.wpforms-render-modern input[type="url"],
.wpforms-container.wpforms-render-modern input[type="number"],
.wpforms-container.wpforms-render-modern input[type="date"],
.wpforms-container.wpforms-render-modern select,
.wpforms-container.wpforms-render-modern textarea {
  width: 100%;
  max-width: 100%;
  height: auto;
  min-height: 3.25rem;
  font-family: var(--pl-font-text);
  font-weight: var(--pl-fw-body);
  font-size: 1.0625rem;
  line-height: 1.4;
  padding: .9375rem 1.3125rem;
  color: var(--pl-ink);
  background-color: color-mix(in srgb, var(--pl-ink) 6%, transparent);
  border: var(--pl-hairline) solid var(--pl-line-strong);
  border-radius: var(--pl-radius-pill);
  box-shadow: none;
  transition: border-color var(--pl-dur) var(--pl-ease),
              box-shadow var(--pl-dur) var(--pl-ease);
}
.wpforms-container.wpforms-render-modern textarea {
  min-height: 10rem;
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-4) 1.3125rem;
  resize: vertical;
}
.wpforms-container.wpforms-render-modern input:hover,
.wpforms-container.wpforms-render-modern select:hover,
.wpforms-container.wpforms-render-modern textarea:hover { border-color: var(--pl-ink-mute); }

.wpforms-container.wpforms-render-modern input:focus,
.wpforms-container.wpforms-render-modern select:focus,
.wpforms-container.wpforms-render-modern textarea:focus {
  outline: none;
  border-color: var(--pl-focus-line);
  box-shadow: var(--pl-focus-ring);
}
.wpforms-container.wpforms-render-modern ::placeholder { color: var(--pl-ink-mute); opacity: 1; }

/* Zwei Felder nebeneinander (Vor- und Nachname). WPForms rechnet die
   Haelften in Prozent aus; ein Raster mit gap ist verlaesslicher. */
/* Zwei Felder nebeneinander (Vor- und Nachname).
   Das Plugin gibt den Bloecken in
   .wpforms-container .wpforms-form .wpforms-field .wpforms-field-row
   .wpforms-field-row-block  (0-5-0) width:100%. Statt dagegen
   anzuschreiben, bleibt die Zeile Flexbox: dort zaehlt flex-basis, und
   width wird gar nicht erst herangezogen. */
.wpforms-container.wpforms-render-modern .wpforms-field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pl-sp-4);
}
/* Die Zeile traegt ein Clearfix-::before/::after aus alten Float-Zeiten.
   Im Flex-Container werden daraus zwei zusaetzliche, unsichtbare
   Flex-Elemente — und damit aus einer Luecke drei. Die beiden Felder
   werden dadurch um 2 x 21 px schmaler als der Rest des Formulars. */
.wpforms-container.wpforms-render-modern .wpforms-field-row::before,
.wpforms-container.wpforms-render-modern .wpforms-field-row::after {
  content: none;
}
.wpforms-container.wpforms-render-modern .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block {
  flex: 1 1 13rem;
  margin: 0;
  padding: 0;
}

/* Inhaltsfelder (Datenschutzhinweis o. ae.). Das Plugin gibt ihnen ueber
   .wpforms-field-medium 60 % Breite und legt innen noch einmal ein
   .wpforms-field-row an — beides passt hier nicht: ein Hinweis laeuft
   ueber die ganze Karte und ist keine Feldzeile. */
.wpforms-container.wpforms-render-modern .wpforms-field-content > .wpforms-field-row {
  display: block;
  width: 100%;
  max-width: none;
}
.wpforms-container.wpforms-render-modern .wpforms-field-content p {
  font-size: var(--pl-fs-small);
  line-height: 1.6;
  color: var(--pl-ink-mute);
  margin: 0 0 var(--pl-sp-3);
}
.wpforms-container.wpforms-render-modern .wpforms-field-content p:last-child { margin-bottom: 0; }
.wpforms-container.wpforms-render-modern .wpforms-field-content a {
  color: var(--pl-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}


/* --- 26.5 · Auswahlfeld ------------------------------------------------ */
.wpforms-container.wpforms-render-modern select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
  /* Eigener Pfeil — der des Plugins ist fuer helle Felder gezeichnet
     und auf unserem dunklen Grund kaum zu sehen. */
  background-image:
    linear-gradient(45deg, transparent 50%, var(--pl-ink-mute) 50%),
    linear-gradient(135deg, var(--pl-ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 27px) center, calc(100% - 21px) center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
}
.wpforms-container.wpforms-render-modern select option {
  background-color: var(--pl-bg-deep);
  color: var(--pl-ink);
}

/* Ankreuzfelder und Auswahlpunkte, falls das Formular welche bekommt */
.wpforms-container.wpforms-render-modern input[type="checkbox"],
.wpforms-container.wpforms-render-modern input[type="radio"] {
  width: 1.25rem;
  height: 1.25rem;
  min-height: 0;
  margin: 0 var(--pl-sp-2) 0 0;
  accent-color: var(--pl-accent);
  border-radius: 0;
  background: none;
}
.wpforms-container.wpforms-render-modern .wpforms-field-checkbox li,
.wpforms-container.wpforms-render-modern .wpforms-field-radio li {
  display: flex;
  align-items: flex-start;
  gap: var(--pl-sp-3);
  margin-bottom: var(--pl-sp-3);
}
.wpforms-container.wpforms-render-modern .wpforms-field-checkbox label,
.wpforms-container.wpforms-render-modern .wpforms-field-radio label {
  font-size: var(--pl-fs-small);
  line-height: 1.5;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pl-ink-soft);
  margin: 0;
}

/* --- 26.6 · Absenden --------------------------------------------------- */
.wpforms-container.wpforms-render-modern .wpforms-submit-container {
  margin-top: var(--pl-space-in);
  padding-top: var(--pl-sp-5);
  border-top: var(--pl-hairline) solid var(--pl-line);
  text-align: left;
}
.wpforms-container.wpforms-render-modern button.wpforms-submit {
  position: relative;
  overflow: hidden;
  display: inline-block;
  width: auto;
  height: auto;
  min-height: 3.25rem;
  font-family: var(--pl-font-text);
  font-weight: 500;
  font-size: var(--pl-fs-label);
  line-height: 1.2;
  letter-spacing: var(--pl-track-button);
  text-transform: uppercase;
  color: var(--pl-btn-ink);
  background-color: var(--pl-btn-bg);
  border: 0;
  border-radius: var(--pl-radius-pill);
  padding: 1.0625rem 2.125rem;
  cursor: pointer;
  transition: background-color var(--pl-dur) var(--pl-ease),
              transform var(--pl-dur) var(--pl-ease);
}
.wpforms-container.wpforms-render-modern button.wpforms-submit:hover,
.wpforms-container.wpforms-render-modern button.wpforms-submit:focus-visible {
  background-color: var(--pl-accent-light);
  color: var(--pl-btn-ink);
  transform: translateY(-1px);
}
.wpforms-container.wpforms-render-modern button.wpforms-submit[disabled] { opacity: .5; pointer-events: none; }
.wpforms-container.wpforms-render-modern .wpforms-submit-spinner { margin-left: var(--pl-sp-3); }

/* --- 26.7 · Fehler, Hinweise, Bestaetigung ----------------------------- */
.wpforms-container.wpforms-render-modern label.wpforms-error,
.wpforms-container.wpforms-render-modern em.wpforms-error,
.wpforms-container.wpforms-render-modern .wpforms-error-container {
  display: block;
  font-family: var(--pl-font-text);
  font-size: var(--pl-fs-small);
  font-style: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--pl-c-kristall-3);
  margin-top: var(--pl-sp-2);
}
.wpforms-container.wpforms-render-modern input.wpforms-error,
.wpforms-container.wpforms-render-modern select.wpforms-error,
.wpforms-container.wpforms-render-modern textarea.wpforms-error { border-color: var(--pl-c-kristall-3); }

.wpforms-confirmation-container-full,
.wpforms-container.wpforms-render-modern .wpforms-confirmation-container-full {
  max-width: 48rem;
  margin: var(--pl-space-in) auto;
  background-color: color-mix(in srgb, var(--pl-accent) 12%, transparent);
  border: 0;
  border-left: var(--pl-hairline) solid var(--pl-accent);
  border-radius: var(--pl-radius);
  padding: var(--pl-sp-5);
  color: var(--pl-ink-soft);
}
.wpforms-confirmation-container-full p:last-child { margin-bottom: 0; }

.wpforms-error-noscript,
.wpforms-container.wpforms-render-modern .wpforms-error-noscript {
  font-size: var(--pl-fs-small);
  color: var(--pl-c-kristall-3);
}

/* --- 26.8 · Schmale Bildschirme ---------------------------------------- */
@media (max-width: 560px) {
  .wpforms-container.wpforms-render-modern { padding: var(--pl-sp-4); }
  /* Nicht flex-direction:column — dort waere flex-basis eine HOEHE und
     jedes Feld bekaeme 13 rem Leerraum. Nur die Grundbreite auf voll. */
  .wpforms-container.wpforms-render-modern .wpforms-form .wpforms-field .wpforms-field-row .wpforms-field-row-block {
    flex: 1 1 100%;
  }
  .wpforms-container.wpforms-render-modern button.wpforms-submit { width: 100%; text-align: center; }
}


/* =====================================================================
   27 · EINZELFÄLLE
   Kurzlebige Korrekturen, die (noch) keinem System folgen.
   Was sich hier wiederholt, gehört nach oben in einen Abschnitt.
   ===================================================================== */

/* Die kleinen SVG-Symbole vor Datum und Autor in der Beitrags-Meta
   bleiben aus – die Metazeile trägt sich über Versalien und Laufweite. */
.entry-meta .gp-icon { display: none; }
