.elementor-kit-9{--e-global-color-primary:#000000;--e-global-color-secondary:#FFFFFF;--e-global-color-text:#3F3F3F;--e-global-color-accent:#000000;--e-global-color-3e5c198:#FFFFFF;--e-global-color-7a17810:#000000;--e-global-color-185526b:#F6F6F6;--e-global-color-bf26d3b:#E7E7E7;--e-global-color-dsgrau:#8A8A8A;--e-global-color-dshgrau:#B5B5B5;--e-global-color-dslinie:#F1F1F1;--e-global-typography-primary-font-family:"Cormac Thin";--e-global-typography-primary-font-size:19px;--e-global-typography-primary-font-weight:400;--e-global-typography-primary-line-height:1.6em;--e-global-typography-secondary-font-family:"Oswald";--e-global-typography-secondary-font-size:13px;--e-global-typography-secondary-font-weight:300;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-secondary-letter-spacing:1px;--e-global-typography-text-font-family:"Cormac Thin";--e-global-typography-text-font-size:17px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.5em;--e-global-typography-accent-font-family:"Oswald";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:300;--e-global-typography-accent-text-transform:uppercase;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:0.3px;--e-global-typography-dstitel-font-family:"Oswald";--e-global-typography-dstitel-font-size:clamp(30px, 3.75vw, 54px);--e-global-typography-dstitel-font-weight:300;--e-global-typography-dstitel-text-transform:uppercase;--e-global-typography-dstitel-line-height:1.1em;--e-global-typography-dstitel-letter-spacing:0px;--e-global-typography-dsbtitl-font-family:"Oswald";--e-global-typography-dsbtitl-font-size:88px;--e-global-typography-dsbtitl-font-weight:300;--e-global-typography-dsbtitl-text-transform:uppercase;--e-global-typography-dsbtitl-line-height:1.02em;--e-global-typography-dsbtitl-letter-spacing:0px;--e-global-typography-dsgross-font-family:"Oswald";--e-global-typography-dsgross-font-size:40px;--e-global-typography-dsgross-font-weight:300;--e-global-typography-dsgross-text-transform:uppercase;--e-global-typography-dsgross-line-height:1.08em;--e-global-typography-dsgross-letter-spacing:0px;--e-global-typography-dsabsch-font-family:"Oswald";--e-global-typography-dsabsch-font-size:28px;--e-global-typography-dsabsch-font-weight:300;--e-global-typography-dsabsch-text-transform:uppercase;--e-global-typography-dsabsch-line-height:1.15em;--e-global-typography-dsabsch-letter-spacing:0px;--e-global-typography-dsklein-font-family:"Oswald";--e-global-typography-dsklein-font-size:22px;--e-global-typography-dsklein-font-weight:300;--e-global-typography-dsklein-text-transform:uppercase;--e-global-typography-dsklein-line-height:1.2em;--e-global-typography-dsklein-letter-spacing:0px;--e-global-typography-dslogo-font-family:"Oswald";--e-global-typography-dslogo-font-size:31px;--e-global-typography-dslogo-font-weight:300;--e-global-typography-dslogo-text-transform:uppercase;--e-global-typography-dslogo-line-height:1em;--e-global-typography-dslogo-letter-spacing:0px;--e-global-typography-dsmenue-font-family:"Oswald";--e-global-typography-dsmenue-font-size:40px;--e-global-typography-dsmenue-font-weight:300;--e-global-typography-dsmenue-text-transform:uppercase;--e-global-typography-dsmenue-line-height:1.2em;--e-global-typography-dsmenue-letter-spacing:0px;--e-global-typography-dsgrtxt-font-family:"Cormac Thin";--e-global-typography-dsgrtxt-font-size:21px;--e-global-typography-dsgrtxt-font-weight:400;--e-global-typography-dsgrtxt-line-height:1.55em;--e-global-typography-dsbild-font-family:"Cormac Thin";--e-global-typography-dsbild-font-size:15px;--e-global-typography-dsbild-font-weight:400;--e-global-typography-dsbild-line-height:1.5em;--e-global-typography-dsmenu-font-family:"Cormac Thin";--e-global-typography-dsmenu-font-size:16px;--e-global-typography-dsmenu-font-weight:400;--e-global-typography-dsmenu-text-transform:uppercase;--e-global-typography-dsmenu-line-height:1.2em;--e-global-typography-dsmenu-letter-spacing:0.5px;color:#494949;font-family:"Cormac Thin", Sans-serif;font-size:17px;line-height:1.4em;}.elementor-kit-9 button,.elementor-kit-9 input[type="button"],.elementor-kit-9 input[type="submit"],.elementor-kit-9 .elementor-button{background-color:transparent;color:var( --e-global-color-3e5c198 );background-image:linear-gradient(180deg, #353434 0%, #000000 100%);border-radius:4px 4px 4px 4px;}.elementor-kit-9 button:hover,.elementor-kit-9 button:focus,.elementor-kit-9 input[type="button"]:hover,.elementor-kit-9 input[type="button"]:focus,.elementor-kit-9 input[type="submit"]:hover,.elementor-kit-9 input[type="submit"]:focus,.elementor-kit-9 .elementor-button:hover,.elementor-kit-9 .elementor-button:focus{background-color:transparent;color:var( --e-global-color-3e5c198 );background-image:linear-gradient(180deg, var( --e-global-color-7a17810 ) 0%, var( --e-global-color-text ) 100%);border-radius:4px 4px 4px 4px;}.elementor-kit-9 e-page-transition{background-color:#FFBC7D;}.elementor-kit-9 p{margin-block-end:40px;}.elementor-kit-9 a{color:var( --e-global-color-primary );}.elementor-kit-9 h1{color:var( --e-global-color-primary );font-family:"Oswald", Sans-serif;font-size:1.4em;font-weight:300;text-transform:uppercase;line-height:1em;}.elementor-kit-9 h2{color:var( --e-global-color-primary );font-family:"Oswald", Sans-serif;font-size:1.4em;font-weight:300;text-transform:uppercase;line-height:1em;}.elementor-kit-9 h3{color:#000000;font-family:"Oswald", Sans-serif;font-size:1.3em;font-weight:300;line-height:1em;}.elementor-kit-9 h4{color:var( --e-global-color-primary );font-family:"Oswald", Sans-serif;font-size:22px;font-weight:300;line-height:1.2em;}.elementor-kit-9 label{color:var( --e-global-color-7a17810 );}.elementor-kit-9 input:not([type="button"]):not([type="submit"]),.elementor-kit-9 textarea,.elementor-kit-9 .elementor-field-textual{color:var( --e-global-color-7a17810 );accent-color:var( --e-global-color-accent );background-color:var( --e-global-color-3e5c198 );}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1280px;}.e-con{--container-max-width:1280px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){margin-block-end:30px;}.elementor-element{--widgets-spacing:30px 30px;--widgets-spacing-row:30px;--widgets-spacing-column:30px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{background-color:var( --e-global-color-3e5c198 );--lightbox-ui-color:var( --e-global-color-3e5c198 );--lightbox-ui-color-hover:var( --e-global-color-accent );--lightbox-text-color:var( --e-global-color-3e5c198 );--lightbox-header-icons-size:15px;--lightbox-navigation-icons-size:15px;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-9{--e-global-typography-primary-font-size:19px;--e-global-typography-secondary-font-size:13px;--e-global-typography-text-font-size:17px;--e-global-typography-accent-font-size:15px;--e-global-typography-dsbtitl-font-size:56px;--e-global-typography-dsgross-font-size:36px;--e-global-typography-dsabsch-font-size:24px;--e-global-typography-dsklein-font-size:22px;--e-global-typography-dsgrtxt-font-size:21px;--e-global-typography-dsbild-font-size:15px;font-size:19px;line-height:1.4em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-9{--e-global-typography-primary-font-size:17px;--e-global-typography-secondary-font-size:12px;--e-global-typography-text-font-size:16px;--e-global-typography-accent-font-size:13px;--e-global-typography-dsbtitl-font-size:36px;--e-global-typography-dsgross-font-size:28px;--e-global-typography-dsabsch-font-size:22px;--e-global-typography-dsklein-font-size:20px;--e-global-typography-dsgrtxt-font-size:19px;--e-global-typography-dsbild-font-size:14px;font-size:17px;line-height:1.35em;}.elementor-kit-9 p{margin-block-end:20px;}.elementor-kit-9 h1{font-size:1.3em;line-height:1em;}.elementor-kit-9 h2{font-size:1.4em;line-height:1em;}.elementor-kit-9 h3{font-size:1.2em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* --- Bestehende Regel (vor 2026-10-30 vorhanden): Seitentitel des Themes ausblenden --- */
h1.entry-title {
    display: none !important;
}


/* ==========================================================================
   DAVID STEGMANN – ZENTRALES CSS
   --------------------------------------------------------------------------
   Ablageort : Elementor → Website-Einstellungen → Benutzerdefiniertes CSS
               (Site Settings → Custom CSS). Wirkt auf der ganzen Website
               UND in der Editor-Vorschau.
   Gegenstück: JavaScript liegt unter Elementor → Custom Code →
               "DS – Filter Listen (JS)".
   Stand     : 2026-10-30 (Artwork-Slider ergänzt)
   --------------------------------------------------------------------------
   PRINZIP
   - Inhalte stehen ausschließlich in Elementor-Widgets (Überschrift,
     Text-Editor, Preisliste, Button). Kein HTML-Widget.
   - Gestaltung kommt aus diesem CSS. Die Widgets tragen nur eine
     CSS-Klasse (Widget → Erweitert → CSS-Klassen).
   - Farben verweisen auf die globalen Farben aus den Website-Einstellungen
     (var(--e-global-color-…)). Ändert man dort eine Farbe, folgt diese Datei.
   - Alle Klassen beginnen mit "ds-" (David Stegmann).

   INHALT
   0. Design-Variablen
   1. Seitenkopf            .ds-kopf, .ds-titel, .ds-titel-grau
   2. Leiste (Filter/Nav)   .ds-leiste, .ds-filter-link, .ds-dekade-link, .ds-label
   3. Jahres-Zeile          .ds-jahr, .ds-jahr-titel
   4. Eintragsliste         .ds-liste, .ds-kat-a, .ds-kat-b  (Preisliste-Widget)
   5. Fließtext (About)     .ds-text, .ds-signatur
   6. Filter-Zustände       body[data-ds-filter]
   7. Artwork-Slider        .ds-werk-titel, .ds-werk-slider, .ds-werk-zaehler
   8. Responsive            Tablet ≤1023px, Mobil ≤767px
   9. Kontaktseite          .ds-kontakt-bereich, .ds-kontakt-form, .ds-ort
  10. Boxed-Variante        .ds-boxed (Inhalt mittig, max. 1200px; Linien bleiben voll breit)
   ========================================================================== */


/* --------------------------------------------------------------------------
   0. DESIGN-VARIABLEN
   Globale Farben aus Elementor werden hier nur "umbenannt".
   Alle Werte sind globale Farben/Schriften (Website-Einstellungen →
   Globale Farben / Globale Schriftarten, Präfix "DS"). Der Wert nach dem
   Komma ist nur ein Rückfallwert.
   -------------------------------------------------------------------------- */
/* Hinweis: Variablen hängen bewusst am <body>, nicht an :root – Elementor
   definiert die globalen Farben/Schriften an body.elementor-kit-9. */
body {
  --ds-farbe-schwarz:     var(--e-global-color-primary, #000000);  /* global "Primär"     */
  --ds-farbe-akzent:      var(--e-global-color-accent, #000000);   /* global "Accent" – seit 2026-10-31 Schwarz (monochrom, vorher Petrol #0A585D) */
  --ds-farbe-linie:       var(--e-global-color-bf26d3b, #E7E7E7);  /* global "Altsilber"  */
  --ds-farbe-grau:        var(--e-global-color-dsgrau, #8a8a8a);   /* global "DS Grau"        */
  --ds-farbe-hellgrau:    var(--e-global-color-dshgrau, #b5b5b5);  /* global "DS Hellgrau"    */
  --ds-farbe-linie-hell:  var(--e-global-color-dslinie, #f1f1f1);  /* global "DS Linie hell"  */
  --ds-farbe-leiste-bg:   rgba(255, 255, 255, .96);

  --ds-schrift-titel: var(--e-global-typography-dstitel-font-family, Oswald), sans-serif;   /* global "DS Titel (Oswald)" */
  --ds-schrift-text:  var(--e-global-typography-primary-font-family, "Cormac Thin"), sans-serif;

  --ds-rand-basis: 40px;            /* seitlicher Innenabstand (responsive unten)          */
  /* Seitenrand fließend (2026-10-31): mind. --ds-rand-basis, sonst 6 % der Fensterbreite;
     Inhalt wird bei --ds-box-breite gedeckelt. Gilt für ALLE Seiten (vorher: voll vs. boxed 1200). */
  --ds-rand: max(var(--ds-rand-basis), 6vw, calc((100vw - var(--ds-box-breite)) / 2));
  --ds-box-breite: 1560px;          /* Inhaltsbreite für .ds-boxed (wie Startseite)       */
}


/* --------------------------------------------------------------------------
   1. SEITENKOPF
   Container  .ds-kopf        → Abstand oben/unten + seitlich
   Überschrift .ds-titel       → z. B. "2008–2022" (schwarz)
   Überschrift .ds-titel-grau  → z. B. "Media"     (grau, zusätzlich zu .ds-titel)
   -------------------------------------------------------------------------- */
.e-con.ds-kopf {
  padding: 72px var(--ds-rand) 56px;
  gap: 0;
}
.elementor-widget.ds-titel .elementor-heading-title {
  margin: 0;
  /* Globaler Stil „Seitentitel“ */
  font-family: var(--e-global-typography-dstitel-font-family), sans-serif;
  font-weight: var(--e-global-typography-dstitel-font-weight);
  font-size: var(--e-global-typography-dstitel-font-size);
  line-height: var(--e-global-typography-dstitel-line-height);
  letter-spacing: var(--e-global-typography-dstitel-letter-spacing, 0);
  text-transform: var(--e-global-typography-dstitel-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
.elementor-widget.ds-titel-grau .elementor-heading-title {
  color: var(--ds-farbe-grau);
}


/* --------------------------------------------------------------------------
   2. LEISTE (Filter links, Dekaden-Sprünge rechts)
   Container .ds-leiste            → Linien oben/unten, klebt beim Scrollen oben
   Container .ds-leiste--statisch  → gleiche Optik, klebt NICHT (About)
   Button    .ds-filter-link       → Filter "All / Publications / Online" …
             Link-Feld des Buttons: #filter-alle | #filter-kat-a | #filter-kat-b
   Button    .ds-dekade-link       → Sprung zu Jahr, Link-Feld z. B. #md-2022
   Überschrift .ds-label           → reine Beschriftung (About)
   Überschrift .ds-label-akzent    → Beschriftung in Akzentfarbe
   -------------------------------------------------------------------------- */
/* Anordnung bewusst auch hier (nicht nur in den Container-Einstellungen):
   so bleibt die Leiste einzeilig, selbst wenn die seitenbezogene
   Elementor-CSS-Datei kurz fehlt (z. B. direkt nach "Cache leeren"). */
.e-con.ds-leiste {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: var(--wp-admin--admin-bar--height, 0px);
  z-index: 50;
  margin-bottom: 64px;
  padding: 0 var(--ds-rand);
  min-height: 72px;
  background: var(--ds-farbe-leiste-bg);
  border-top: 1px solid var(--ds-farbe-linie);
  border-bottom: 1px solid var(--ds-farbe-linie);
}
.e-con.ds-leiste--statisch {
  position: static;
  background: #fff;
}
/* Gruppen innerhalb der Leiste (Filter-Gruppe, Dekaden-Gruppe) */
.e-con.ds-leiste-gruppe {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  --width: auto;
  width: auto;
  flex: 0 0 auto;
  gap: 28px;
  padding: 0;
}
.e-con.ds-leiste-gruppe > .elementor-widget {
  margin: 0;
}

/* Buttons als schlichte Textlinks darstellen.
   !important nur bei Hintergrund/Farbe, weil das Kit Buttons global einfärbt. */
.elementor-widget.ds-filter-link .elementor-button,
.elementor-widget.ds-dekade-link .elementor-button {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  padding: 12px 0;
  background: none !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* Globaler Stil „Navigation“ */
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  text-decoration: none;
  color: var(--ds-farbe-grau) !important;
}
.elementor-widget.ds-filter-link .elementor-button:hover,
.elementor-widget.ds-dekade-link .elementor-button:hover {
  color: var(--ds-farbe-schwarz) !important;
}
.elementor-widget.ds-filter-link .elementor-button:focus-visible,
.elementor-widget.ds-dekade-link .elementor-button:focus-visible {
  outline: 1px solid var(--ds-farbe-akzent);
  outline-offset: 4px;
}
/* aktiver Filter (Klasse setzt das JavaScript) */
.elementor-widget.ds-filter-link.is-aktiv .elementor-button,
.elementor-widget.ds-filter-link.is-aktiv .ds-anzahl {
  color: var(--ds-farbe-akzent) !important;
}
/* Zähler hinter dem Filternamen (wird vom JavaScript automatisch berechnet) */
.ds-anzahl {
  margin-left: 6px;
  color: var(--ds-farbe-hellgrau);
}

/* Beschriftungen in der Leiste (About: "Biography", Geburtsdaten) */
.elementor-widget.ds-label .elementor-heading-title {
  margin: 0;
  padding: 12px 0;
  /* Globaler Stil „Navigation“ (wie die Filter in der Leiste) */
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  color: var(--ds-farbe-grau);
}
.elementor-widget.ds-label-akzent .elementor-heading-title {
  color: var(--ds-farbe-akzent);
}


/* --------------------------------------------------------------------------
   3. JAHRES-ZEILE
   Container  .ds-jahr        → 12-Spalten-Raster, Linie oben
              CSS-ID des Containers = Sprungziel, z. B. md-2022 / ex-2025
   Überschrift .ds-jahr-titel  → Jahreszahl links (Spalte 1–2)
   Alle anderen Widgets im Container stehen rechts (Spalte 3–12).
   Der letzte Jahres-Container der Seite bekommt automatisch Abstand nach unten.
   -------------------------------------------------------------------------- */
.e-con.ds-jahr {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-auto-rows: auto;
  column-gap: 24px;
  row-gap: 0;
  align-items: start;
  padding: 22px var(--ds-rand) 26px;
  border-top: 1px solid var(--ds-farbe-linie);
  scroll-margin-top: calc(var(--wp-admin--admin-bar--height, 0px) + 90px);
}
.e-con.ds-jahr:last-child {
  padding-bottom: 180px;
}
.e-con.ds-jahr > .elementor-widget {
  margin: 0;
  grid-column: 3 / 13;
  width: auto;
  max-width: none;
}
.e-con.ds-jahr > .elementor-widget.ds-jahr-titel {
  grid-column: 1 / 3;
  grid-row: 1 / span 20;
}
.elementor-widget.ds-jahr-titel .elementor-heading-title {
  margin: 0;
  padding-top: 2px;
  /* Globaler Stil „Abschnittstitel“ */
  font-family: var(--e-global-typography-dsabsch-font-family), sans-serif;
  font-weight: var(--e-global-typography-dsabsch-font-weight);
  font-size: var(--e-global-typography-dsabsch-font-size);
  line-height: var(--e-global-typography-dsabsch-line-height);
  letter-spacing: var(--e-global-typography-dsabsch-letter-spacing, 0);
  text-transform: var(--e-global-typography-dsabsch-text-transform, none);
  color: var(--ds-farbe-schwarz);
}


/* --------------------------------------------------------------------------
   4. EINTRAGSLISTE (Elementor-Widget "Preisliste")
   Zuordnung der Preisliste-Felder:
     Titel        → Titel des Artikels / der Ausstellung
     Beschreibung → Medium + Datum + Sprache / Ort
     Preis        → Kategorie-Etikett (Print, Online, Solo, Duo, Group …)
     Link         → optional; mit Link erscheint ein ↗ hinter dem Titel
   Klassen am Widget:
     .ds-liste  + .ds-kat-a → erste Filterkategorie (Publications / Solo & Duo …),
                              Etikett in Akzentfarbe
     .ds-liste  + .ds-kat-b → zweite Filterkategorie (Online / Group …)
   -------------------------------------------------------------------------- */
.elementor-widget.ds-liste .elementor-price-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
/* !important nötig: Elementor schreibt den Zeilenabstand der Preisliste
   (Standard 20px) mit sehr hoher Spezifität pro Widget. */
.elementor-widget.ds-liste .elementor-price-list li {
  margin: 0 !important;
  padding: 0;
}
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-item {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 4fr) 88px;
  align-items: baseline;
  gap: 24px;
  margin: 0;
  padding: 5px 0;
  text-decoration: none;
}
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-text,
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-header {
  display: contents;
}
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-separator,
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-image {
  display: none;
}
/* Titel */
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-title {
  grid-column: 1;
  grid-row: 1;
  margin: 0;
  padding: 0;
  /* Globaler Stil „Fließtext klein“ – Gewicht 400 dort fest (Preisliste vererbt sonst 600 -> künstliche Fettung) */
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing, 0);
  text-transform: var(--e-global-typography-text-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
/* Beschreibung */
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-description {
  grid-column: 2;
  grid-row: 1;
  margin: 0;
  padding: 0;
  /* Globaler Stil „Fließtext klein“ */
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing, 0);
  text-transform: var(--e-global-typography-text-text-transform, none);
  color: var(--ds-farbe-grau);
}
/* "Preis" = Kategorie-Etikett */
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-price {
  grid-column: 3;
  grid-row: 1;
  margin: 0;
  padding: 0;
  /* Globaler Stil „Label“ */
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  font-size: var(--e-global-typography-secondary-font-size);
  line-height: var(--e-global-typography-secondary-line-height);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0);
  text-transform: var(--e-global-typography-secondary-text-transform, none);
  text-align: right;
  color: var(--ds-farbe-grau);
}
.elementor-widget.ds-liste.ds-kat-a .elementor-price-list .elementor-price-list-price {
  color: var(--ds-farbe-akzent);
}
/* Verlinkte Einträge: dezente Unterstreichung + Pfeil ↗ */
.elementor-widget.ds-liste a.elementor-price-list-item .elementor-price-list-title {
  border-bottom: 1px solid var(--ds-farbe-linie);
  justify-self: start;
  transition: color .2s, border-color .2s;
}
.elementor-widget.ds-liste a.elementor-price-list-item .elementor-price-list-title::after {
  content: "\2009\2197";
  font-family: var(--ds-schrift-titel);
  font-size: .8em;
  color: var(--ds-farbe-grau);
}
.elementor-widget.ds-liste a.elementor-price-list-item:hover .elementor-price-list-title {
  color: var(--ds-farbe-akzent);
  border-color: var(--ds-farbe-akzent);
}


/* --------------------------------------------------------------------------
   5. FLIESSTEXT (About)
   Text-Editor   .ds-text      → Absätze, Spalte 3–10, max. 46em breit
   Überschrift   .ds-signatur  → Autor/Signatur unter dem Text
   -------------------------------------------------------------------------- */
.e-con.ds-jahr > .elementor-widget.ds-text,
.e-con.ds-jahr > .elementor-widget.ds-signatur {
  grid-column: 3 / 11;
  max-width: 46em;
}
.elementor-widget.ds-text p {
  margin: 0 0 1.2em;
  /* Globaler Stil „Fließtext“ */
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: var(--e-global-typography-primary-font-size);
  line-height: var(--e-global-typography-primary-line-height);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, 0);
  text-transform: var(--e-global-typography-primary-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
.elementor-widget.ds-signatur .elementor-heading-title {
  margin: 2em 0 0;
  /* Globaler Stil „Label“ */
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  font-size: var(--e-global-typography-secondary-font-size);
  line-height: var(--e-global-typography-secondary-line-height);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0);
  text-transform: var(--e-global-typography-secondary-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
/* Foto neben dem Text (About):
   Container zusätzlich Klasse .ds-jahr--bild, Bild-Widget Klasse .ds-bild.
   Bild rechts (Spalte 8–12, bleibt beim Scrollen stehen), Text Spalte 3–7.
   Tablet/Mobil: Bild über dem Text (Reihenfolge im Editor: Bild vor Text). */
.e-con.ds-jahr--bild > .elementor-widget.ds-text,
.e-con.ds-jahr--bild > .elementor-widget.ds-signatur {
  grid-column: 3 / 8;
  max-width: none;
}
.e-con.ds-jahr > .elementor-widget.ds-bild {
  grid-column: 8 / 13;
  grid-row: 1 / span 20;
  position: sticky;
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 110px);
}
.elementor-widget.ds-bild img {
  display: block;
  width: 100%;
  height: auto;
}


/* --------------------------------------------------------------------------
   6. FILTER-ZUSTÄNDE
   Das JavaScript setzt am <body> data-ds-filter="alle|kat-a|kat-b".
   Ausgeblendet werden die nicht passenden Listen und Jahre ohne Treffer.
   -------------------------------------------------------------------------- */
body[data-ds-filter="kat-a"] .elementor-widget.ds-liste.ds-kat-b,
body[data-ds-filter="kat-b"] .elementor-widget.ds-liste.ds-kat-a,
body[data-ds-filter="kat-a"] .e-con.ds-jahr:not(:has(.ds-kat-a)),
body[data-ds-filter="kat-b"] .e-con.ds-jahr:not(:has(.ds-kat-b)) {
  display: none;
}


/* --------------------------------------------------------------------------
   7. ARTWORK-SLIDER (Seite Artwork, Elementor-Widget "Bild Karussell")
   Überschrift .ds-label .ds-werk-titel → H1 "Artwork", klein über dem Slider
   Bild-Karussell .ds-werk-slider       → Bilder, Pfeile, Bildunterschrift
     Farbe/Größe von Pfeilen und Bildunterschrift: im Widget (Stil-Tab),
     Farbe = globale Farbe "DS Grau". Hier nur die Bildhöhe.
     Bildunterschrift = Feld "Beschriftung" des Bildes in der Mediathek.
   .ds-werk-zaehler                     → "1 / 31", setzt das JavaScript
   -------------------------------------------------------------------------- */
.elementor-widget.ds-werk-titel {
  padding: 20px var(--ds-rand) 0;
}
/* Werk immer ganz sichtbar, nie beschnitten */
.elementor-widget.ds-werk-slider .swiper-slide-image {
  width: 100%;
  height: 80vh;
  object-fit: contain;
}
.ds-werk-zaehler {
  margin-top: 6px;
  text-align: center;
  /* Globaler Stil „Label“ */
  font-family: var(--e-global-typography-secondary-font-family), sans-serif;
  font-weight: var(--e-global-typography-secondary-font-weight);
  font-size: var(--e-global-typography-secondary-font-size);
  line-height: var(--e-global-typography-secondary-line-height);
  letter-spacing: var(--e-global-typography-secondary-letter-spacing, 0);
  text-transform: var(--e-global-typography-secondary-text-transform, none);
  color: var(--ds-farbe-hellgrau);
}


/* --------------------------------------------------------------------------
   8. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 1366px) {
  body { --ds-rand-basis: 30px; }
}

/* Tablet */
@media (max-width: 1023px) {
  /* Jahrestitel Tablet: Größe kommt aus globalem Stil (alle Breakpoints) */
  .e-con.ds-jahr > .elementor-widget.ds-text,
  .e-con.ds-jahr > .elementor-widget.ds-signatur { grid-column: 3 / 13; }
  .e-con.ds-jahr > .elementor-widget.ds-bild { grid-column: 3 / 13; grid-row: auto; position: static; margin-bottom: 32px; }

  /* Eintrag zweizeilig: Titel + Etikett oben, Beschreibung darunter */
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-item {
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 2px 16px;
  }
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-description { grid-row: 2; grid-column: 1 / 2; }
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-price       { grid-row: 1; grid-column: 2 / 3; }

  .elementor-widget.ds-werk-slider .swiper-slide-image { height: 57vh; }
}

/* Mobil */
@media (max-width: 767px) {
  body { --ds-rand-basis: 20px; }

  .e-con.ds-kopf { padding-top: 40px; padding-bottom: 36px; }

  .e-con.ds-leiste { min-height: 64px; margin-bottom: 28px; }
  .e-con.ds-leiste-gruppe { gap: 20px; }
  /* Filter + Label mobil: Größe kommt aus globalem Stil (alle Breakpoints) */

  .e-con.ds-jahr {
    display: flex;
    flex-direction: column;
    align-items: stretch;   /* alle Listen volle Breite */
    gap: 12px;
    padding-top: 20px;
    padding-bottom: 22px;
  }
  .e-con.ds-jahr:last-child { padding-bottom: 96px; }
  /* Jahrestitel mobil: Größe kommt aus globalem Stil (alle Breakpoints) */

  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-item {
    padding: 8px 0;
    border-top: 1px solid var(--ds-farbe-linie-hell);
  }
  /* Listen mobil: Größe kommt aus globalem Stil (alle Breakpoints) */
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-price { /* Größe kommt aus globalem Stil (alle Breakpoints) */ }

  /* Fließtext mobil: Größe kommt aus globalem Stil (alle Breakpoints) */
  /* Signatur mobil: Größe kommt aus globalem Stil (alle Breakpoints) */

  .elementor-widget.ds-werk-slider .swiper-slide-image { height: 53vh; }
}


/* --------------------------------------------------------------------------
   9. KONTAKTSEITE (Seite Contact)
   Aufbau: Kopf (.ds-kopf, Titel links + Intro rechts) → Formular → Galerien.
   Container   .ds-kontakt-bereich → Abschnitt mit Linie oben + seitlichem
                                      Abstand (zusammen mit .ds-boxed)
   Formular    .ds-kontakt-form    → Optik komplett in den Widget-Einstellungen
                                      (Stil-Tab: Felder mit Rahmen, Button):
                                      hier nur der Einwilligungstext.
   Container   .ds-ort             → Galerie-Kasten; Rahmen/Abstand in den
                                      Container-Einstellungen (kein CSS nötig)
   Felder, Empfänger, Texte: im Formular-Widget (Inhalt-Tab).
   -------------------------------------------------------------------------- */
.e-con.ds-kontakt-bereich {
  padding: 48px var(--ds-rand) 64px;
  border-top: 1px solid var(--ds-farbe-linie);
}
.e-con.ds-kontakt-bereich:last-child {
  padding-bottom: 96px;
}
/* Einwilligung (Feldtyp "Akzeptanz"): steht in einer Zeile mit dem Button */
.elementor-widget.ds-kontakt-form .elementor-field-type-acceptance {
  align-self: center;
}
.elementor-widget.ds-kontakt-form .elementor-field-type-acceptance .elementor-field-subgroup label {
  /* Globaler Stil „Bildunterschrift“ */
  font-family: var(--e-global-typography-dsbild-font-family), sans-serif;
  font-weight: var(--e-global-typography-dsbild-font-weight);
  font-size: var(--e-global-typography-dsbild-font-size);
  line-height: var(--e-global-typography-dsbild-line-height);
  letter-spacing: var(--e-global-typography-dsbild-letter-spacing, 0);
  text-transform: var(--e-global-typography-dsbild-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
.elementor-widget.ds-kontakt-form .elementor-field-type-acceptance input {
  accent-color: var(--ds-farbe-akzent);
}
/* Senden-Button: Farben (schwarz/weiß, Hover invertiert) stehen im Widget.
   Website-Einstellungen → Buttons enthalten einen dunklen Verlauf als
   Hintergrundbild, den das Formular-Widget nicht abschalten kann. */
.elementor-widget.ds-kontakt-form .elementor-button {
  background-image: none;
}

@media (max-width: 767px) {
  .e-con.ds-kontakt-bereich { padding-top: 32px; padding-bottom: 48px; }
  .e-con.ds-kontakt-bereich:last-child { padding-bottom: 72px; }
}


/* --------------------------------------------------------------------------
   10. BOXED-VARIANTE
   Klasse .ds-boxed an einem Haupt-Container (Erweitert → CSS-Klassen):
   Inhalt läuft nicht über die volle Breite, sondern mittig mit max.
   --ds-box-breite (1200px, wie die Startseite). Trennlinien bleiben voll breit.
   Funktioniert, weil alle ds-Bereiche ihren seitlichen Abstand aus --ds-rand
   nehmen. Genutzt auf: Contact.
   -------------------------------------------------------------------------- */
/* Seit 2026-10-31 ohne eigene Wirkung: alle Seiten nutzen die fließende --ds-rand aus Abschnitt 1.
   Klasse bleibt als Markierung an den Containern stehen. */
.e-con.ds-boxed {
  --ds-rand: inherit;
}

/* --------------------------------------------------------------------------
   11. BILD LINKS + ZITAT + HANDSIGNATUR (About, 2026-10-31)
   Modifier .ds-jahr--bild-links am ds-jahr-Container (zusätzlich zu
   .ds-jahr--bild): Die Bildspalte steht links (Spalten 3–6), Spalte 6–7
   bleibt als Luft frei, Text und Signatur rechts (7–13). Die Bildspalte ist ein eigener Container
   .ds-bildspalte mit Foto (.ds-bild), Zitat (.ds-zitat) und Label.
   Nicht sticky, weil Foto + Zitat zusammen höher als der Bildschirm sind.
   Genutzt auf: About (ID 1089).
   -------------------------------------------------------------------------- */
.e-con.ds-jahr--bild-links > .e-con.ds-bildspalte {
  grid-area: 1 / 3 / span 20 / 6;
  padding: 0;
  gap: 0;
}
.e-con.ds-jahr--bild-links > .elementor-widget.ds-text,
.e-con.ds-jahr--bild-links > .elementor-widget.ds-signatur,
.e-con.ds-jahr--bild-links > .elementor-widget.ds-unterschrift {
  grid-column: 7 / 13;
  max-width: none;
}

/* Bildunterschrift: linksbündig, nicht kursiv, in DS Textgrau (Abschnitt 12) */
.ds-bildspalte .elementor-widget.ds-bild figcaption,
.ds-bildspalte .elementor-widget.ds-bild .widget-image-caption {
  margin-top: 12px;
  text-align: left;
  font-style: normal;
  /* Globaler Stil „Bildunterschrift“ */
  font-family: var(--e-global-typography-dsbild-font-family), sans-serif;
  font-weight: var(--e-global-typography-dsbild-font-weight);
  font-size: var(--e-global-typography-dsbild-font-size);
  line-height: var(--e-global-typography-dsbild-line-height);
  letter-spacing: var(--e-global-typography-dsbild-letter-spacing, 0);
  text-transform: var(--e-global-typography-dsbild-text-transform, none);
  color: var(--ds-farbe-text-grau);
}

/* Zitat unter dem Foto, mit Haarlinie abgesetzt; Anführungszeichen hängt */
.ds-bildspalte .elementor-widget.ds-zitat {
  margin-top: 36px;
  padding-top: 22px;
  border-top: 1px solid var(--ds-farbe-linie);
}
/* Browser-Standardeinzug des Blockquotes entfernen */
.elementor-widget.ds-zitat blockquote {
  margin: 0;
  padding: 0;
}
.elementor-widget.ds-zitat p {
  margin: 0;
  /* Globaler Stil „Fließtext“ */
  font-family: var(--e-global-typography-primary-font-family), sans-serif;
  font-weight: var(--e-global-typography-primary-font-weight);
  font-size: var(--e-global-typography-primary-font-size);
  line-height: var(--e-global-typography-primary-line-height);
  letter-spacing: var(--e-global-typography-primary-letter-spacing, 0);
  text-transform: var(--e-global-typography-primary-text-transform, none);
  text-indent: -0.42em;
  color: var(--ds-farbe-schwarz);
}

/* Handsignatur (.ds-unterschrift, Schrift „Housky“) entfernt 2026-11-10 – ungenutzt, nur Oswald + Cormac Thin. */

@media (max-width: 1023px) {
  .e-con.ds-jahr--bild-links > .e-con.ds-bildspalte {
    grid-area: auto / 3 / auto / 10; /* Tablet: Foto bewusst nicht volle Breite */
    padding: 0;
    margin-bottom: 32px;
  }
  .e-con.ds-jahr--bild-links > .elementor-widget.ds-text,
  .e-con.ds-jahr--bild-links > .elementor-widget.ds-signatur,
  .e-con.ds-jahr--bild-links > .elementor-widget.ds-unterschrift {
    grid-column: 3 / 13;
  }
}
@media (max-width: 767px) {
  .e-con.ds-jahr--bild-links > .e-con.ds-bildspalte { margin-bottom: 20px; }
  /* Zitat mobil: Größe kommt aus globalem Stil (alle Breakpoints) */
  .elementor-widget.ds-unterschrift { margin: 32px 0 -56px !important; }
  
}

/* --------------------------------------------------------------------------
   12. LESBARKEIT / KONTRAST (2026-10-31)
   Die Text-Schrift „Cormac Thin“ ist sehr dünn. DS Grau (#8a8a8a) erreicht
   auf Weiß nur 3,45 : 1 – zu wenig für kleine Texte (WCAG AA: 4,5 : 1).
   --ds-farbe-text-grau = DS Grau, um 30 % abgedunkelt (≈ #616161, ca. 6,2 : 1),
   abgeleitet aus dem globalen Wert, damit es bei Farbänderungen mitzieht.
   Für kleine graue Texte verwenden; große Titel (ds-titel-grau) bleiben DS Grau.
   -------------------------------------------------------------------------- */
body {
  --ds-farbe-text-grau: color-mix(in srgb, var(--ds-farbe-grau) 70%, #000);
}

/* Contact: Platzhalter im Formular dunkler (Elementor-Standard: 60 % Deckkraft) */
.elementor-widget.ds-kontakt-form .elementor-field-textual::placeholder {
  color: var(--ds-farbe-schwarz);
  opacity: 0.75;
}

/* Contact: Adressen der Galerien in den Ort-Karten (.ds-ort).
   Auf die Kinder gesetzt, damit die Widget-Farbe (DS Grau) überschrieben wird. */
.e-con.ds-ort .elementor-widget-text-editor p,
.e-con.ds-ort .elementor-widget-text-editor .elementor-widget-container {
  color: var(--ds-farbe-text-grau);
}

/* --------------------------------------------------------------------------
   13. MOBIL-FEINSCHLIFF LISTEN (Media, Exhibition) (2026-10-31)
   a) Titel in der Preisliste nicht auf 80 % begrenzen (Elementor-Standard).
   b) Mobil: Kategorie-Label über den Titel, Titel und Ort volle Breite –
      sonst laufen lange Ausstellungstitel über 5 Zeilen.
   c) Mobil: Klebende Filterleiste kompakt, wenn sie in 2 Zeilen umbricht
      (vorher 120 px hoch durch 30 px Zeilenabstand).
   -------------------------------------------------------------------------- */
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-title {
  max-width: none;
}
@media (max-width: 767px) {
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-item {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px 0;
  }
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-price {
    grid-area: 1 / 1;
    text-align: left;
  }
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-title { grid-area: 2 / 1; }
  .elementor-widget.ds-liste .elementor-price-list .elementor-price-list-description { grid-area: 3 / 1; }
  .e-con.ds-leiste { row-gap: 0; column-gap: 20px; }
  .e-con.ds-leiste > .e-con.ds-leiste-gruppe { column-gap: 16px; }
}

/* --------------------------------------------------------------------------
   14. ARTWORK-KARUSSELL: LAZYLOAD OHNE BROKEN-ICON (2026-10-31)
   Noch nicht geladene Bilder haben ein leeres src. Der Browser zeigte dann ein
   Broken-Icon und den Alt-Text in der Link-Farbe (Petrol). Jetzt: Bild bis zum
   Laden unsichtbar, Alt-Text nie sichtbar, Lade-Spinner in DS Grau.
   -------------------------------------------------------------------------- */
.elementor-image-carousel .swiper-slide-image {
  color: transparent;
}
.elementor-image-carousel .swiper-lazy:not(.swiper-lazy-loaded) {
  opacity: 0;
}
.elementor-image-carousel-wrapper .swiper-lazy-preloader {
  --swiper-preloader-color: var(--ds-farbe-grau);
  border-color: var(--ds-farbe-grau);
  border-top-color: transparent;
}
/* Werk-Beschriftung unter dem Bild: DS Textgrau statt DS Grau (mehr Kontrast,
   ca. 6,2 : 1 statt 3,45 : 1). Farbe im Widget dafür geleert. */
.elementor-widget.ds-werk-slider .elementor-image-carousel-caption {
  color: var(--ds-farbe-text-grau);
}
/* Handy: keine Pfeile im Werk-Slider – gewischt wird mit dem Finger */
@media (max-width: 767px) {
  /* !important nötig: Elementor/Swiper setzt die Pfeile mit höherer Spezifität auf flex */
  .elementor-widget.ds-werk-slider .elementor-swiper-button {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   15. MONOCHROM (2026-10-31)
   Petrol entfernt: globale Akzentfarbe und Link-Farbe sind jetzt Schwarz.
   Damit Links im Fließtext trotzdem erkennbar bleiben, sind sie unterstrichen.
   -------------------------------------------------------------------------- */
.elementor-widget-text-editor a,
.elementor-widget.ds-kontakt-form .elementor-field-type-acceptance a {
  color: var(--ds-farbe-schwarz);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: var(--ds-farbe-hellgrau);
}
.elementor-widget-text-editor a:hover,
.elementor-widget.ds-kontakt-form .elementor-field-type-acceptance a:hover {
  text-decoration-color: var(--ds-farbe-schwarz);
}

/* --------------------------------------------------------------------------
   16. AUSNAHME BREITE: HOME + ARTWORK (2026-10-31)
   Die fließende --ds-rand (Abschnitt 1) gilt nicht für die Startseite (ID 2)
   und Artwork (ID 1083): dort bleibt der Rand wie bisher bei --ds-rand-basis,
   damit die Werke die volle Breite nutzen. Neue Seiten mit voller Breite hier
   ergänzen.
   -------------------------------------------------------------------------- */
body.page-id-2,
body.page-id-1083 {
  --ds-rand: var(--ds-rand-basis);
}

/* --------------------------------------------------------------------------
   17. ABSCHNITT OHNE TITELSPALTE (2026-10-31)
   Modifier .ds-jahr--ohne-titel am ds-jahr-Container: Es gibt keinen
   Abschnittstitel links, die Widgets nutzen die volle Rasterbreite (1–13).
   Genutzt auf: News (ID 3148) – Aufmacher und Liste beginnen am linken Rand.
   -------------------------------------------------------------------------- */
.e-con.ds-jahr--ohne-titel > .elementor-widget {
  grid-column: 1 / 13;
}

/* --------------------------------------------------------------------------
   18. RECHTSTEXTE: IMPRINT + PRIVACY (2026-10-31)
   Klasse .ds-legal am Inhalts-Container (Kopf darüber ist ein normaler .ds-kopf).
   Gleicher seitlicher Rand, Trennlinie und Abstände wie die ds-jahr-Abschnitte;
   Überschriften in der Titelschrift, Fließtext wie .ds-text, max. Zeilenlänge.
   Die h1 im Datenschutztext wird ausgeblendet – der Seitentitel steht im Kopf.
   -------------------------------------------------------------------------- */
.e-con.ds-legal {
  padding: 40px var(--ds-rand) 180px;
  border-top: 1px solid var(--ds-farbe-linie);
}
.e-con.ds-legal > .e-con {
  width: 100%;
  max-width: 46em;
  padding: 0;
}
.ds-legal .elementor-widget-text-editor h1:first-child {
  display: none;
}
.ds-legal h1, .ds-legal h2,
.ds-legal .elementor-widget-heading .elementor-heading-title {
  margin: 1.6em 0 0.6em;
  /* Globaler Stil „Abschnittstitel“ */
  font-family: var(--e-global-typography-dsabsch-font-family), sans-serif;
  font-weight: var(--e-global-typography-dsabsch-font-weight);
  font-size: var(--e-global-typography-dsabsch-font-size);
  line-height: var(--e-global-typography-dsabsch-line-height);
  letter-spacing: var(--e-global-typography-dsabsch-letter-spacing, 0);
  text-transform: var(--e-global-typography-dsabsch-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
/* Überschrift-Widgets (Imprint): Abstand kommt aus dem Container-Gap */
.ds-legal .elementor-widget-heading .elementor-heading-title { margin: 1em 0 0; }
.ds-legal h3 {
  margin: 1.4em 0 0.4em;
  /* Globaler Stil „Navigation“ */
  font-family: var(--e-global-typography-accent-font-family), sans-serif;
  font-weight: var(--e-global-typography-accent-font-weight);
  font-size: var(--e-global-typography-accent-font-size);
  line-height: var(--e-global-typography-accent-line-height);
  letter-spacing: var(--e-global-typography-accent-letter-spacing, 0);
  text-transform: var(--e-global-typography-accent-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
.ds-legal p, .ds-legal .elementor-widget-text-editor {
  /* Globaler Stil „Fließtext klein“ */
  font-family: var(--e-global-typography-text-font-family), sans-serif;
  font-weight: var(--e-global-typography-text-font-weight);
  font-size: var(--e-global-typography-text-font-size);
  line-height: var(--e-global-typography-text-line-height);
  letter-spacing: var(--e-global-typography-text-letter-spacing, 0);
  text-transform: var(--e-global-typography-text-text-transform, none);
  color: var(--ds-farbe-schwarz);
}
.ds-legal p { margin: 0 0 1.1em; }
@media (max-width: 767px) {
  .e-con.ds-legal { padding-top: 24px; padding-bottom: 96px; }
  .ds-legal h1, .ds-legal h2,
  /* Rechtstexte Titel mobil: Größe kommt aus globalem Stil (alle Breakpoints) */
}

/* --------------------------------------------------------------------------
   19. KONSISTENZ (2026-10-31)
   a) Kleine graue Texte einheitlich in DS Textgrau (≈ 6,2 : 1 statt 3,45 : 1
      bzw. 2,1 : 1): Leisten-Labels, Listen-Beschreibungen, Listen-Kategorien,
      Zähler in den Filtern.
   b) Handy: überall derselbe Seitenrand (--ds-rand-basis, 20 px).
   -------------------------------------------------------------------------- */
.elementor-widget.ds-label .elementor-heading-title,
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-description,
.elementor-widget.ds-liste .elementor-price-list .elementor-price-list-price,
.ds-anzahl {
  color: var(--ds-farbe-text-grau);
}
.elementor-widget.ds-label-akzent .elementor-heading-title,
.elementor-widget.ds-liste.ds-kat-a .elementor-price-list .elementor-price-list-price {
  color: var(--ds-farbe-schwarz);
}
/* Inaktive Filter-/Dekaden-Links und Werk-Zähler ebenfalls in DS Textgrau
   (!important wie in der Ursprungsregel, Abschnitt Filter) */
.elementor-widget.ds-filter-link .elementor-button,
.elementor-widget.ds-dekade-link .elementor-button {
  color: var(--ds-farbe-text-grau) !important;
}
.elementor-widget.ds-filter-link .elementor-button:hover,
.elementor-widget.ds-dekade-link .elementor-button:hover,
.elementor-widget.ds-filter-link.is-aktiv .elementor-button {
  color: var(--ds-farbe-schwarz) !important;
}
.ds-werk-zaehler {
  color: var(--ds-farbe-text-grau);
}
@media (max-width: 767px) {
  body { --ds-rand: var(--ds-rand-basis); }
}

/* --------------------------------------------------------------------------
   20. FOOTER IMMER AM UNTEREN RAND (2026-11-01)
   Sticky Footer ohne feste Position: Der body ist eine Flex-Spalte mit
   mindestens Fensterhöhe, der Footer schiebt sich per margin-top:auto nach
   unten. Kurze Seiten: Footer sitzt am Fensterrand. Lange Seiten: Footer
   folgt normal nach dem Inhalt und ist per Scrollen erreichbar.
   Abzug der WP-Admin-Leiste, damit eingeloggt kein Leer-Scroll entsteht.
   Ersetzt das frühere Element-CSS im Footer-Template 59
   (#dsfooter { position: relative; top: 11vh; } – schob den Footer über
   das Seitenende hinaus, dadurch nicht erreichbar).
   -------------------------------------------------------------------------- */
body {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
body > * { flex-shrink: 0; }
body > .elementor-location-footer { margin-top: auto; }

/* --------------------------------------------------------------------------
   21. ARTWORK-PFEILE: KREIS MIT HAARLINIE (2026-11-01)
   Vor/Zurück im Werk-Slider (.ds-werk-slider, Artwork ID 1083) als runde
   Buttons: 52 px Kreis, 1 px Linie in „Altsilber“ (#e7e7e7, wie die
   Galerie-Karten auf Contact), leicht weißer Grund. Hover: Linie schwarz.
   Icongröße (14 px) und Farbe (Primär) sind im Widget eingestellt – hier
   nur Kreis und Linie, dafür hat das Bild-Karussell keine Einstellung.
   Mobil bleiben die Pfeile ausgeblendet (Abschnitt 14).
   -------------------------------------------------------------------------- */
.elementor-widget.ds-werk-slider .elementor-swiper-button {
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  border: 1px solid var(--e-global-color-bf26d3b);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.8);
  transition: border-color 0.2s, background-color 0.2s;
}
.elementor-widget.ds-werk-slider .elementor-swiper-button:hover,
.elementor-widget.ds-werk-slider .elementor-swiper-button:focus-visible {
  border-color: var(--e-global-color-primary);
  background: #fff;
}

/* --------------------------------------------------------------------------
   22. ARTWORK: LADEZUSTAND IM WERK-SLIDER (2026-11-01)
   Beim Blättern lädt das nächste Bild per Lazyload nach. Vorher:
   a) Ein Bild ohne Quelle wird vom Browser wie Text behandelt – die Höhe
      (80 vh, Werk-Slider-Abschnitt) griff nicht, der Slide schrumpfte auf
      ca. 56 px. Spinner saß oben, die Beschriftung rutschte nach oben.
      → display:block: Das Bild hat schon vor dem Laden seine volle Höhe.
   b) Statt des runden Spinners ein feiner Ladebalken: 1 px Haarlinie in
      Altsilber, darauf gleitet ein schwarzes Segment. Genau in der
      Bildmitte (top = halbe Bildhöhe). Erscheint erst nach 0,3 s –
      bei schnellem Laden sieht man nichts.
   c) Beschriftung bleibt unsichtbar, bis das Bild geladen ist; Bild und
      Beschriftung blenden dann gemeinsam weich ein.
   Ergänzt Abschnitt 14 (Lazyload ohne Broken-Icon). Nur .ds-werk-slider.
   -------------------------------------------------------------------------- */
.elementor-widget.ds-werk-slider .swiper-slide-image {
  display: block;
  transition: opacity 0.4s ease;
}
.elementor-widget.ds-werk-slider .elementor-image-carousel-caption {
  transition: opacity 0.4s ease;
}
.elementor-widget.ds-werk-slider .swiper-lazy:not(.swiper-lazy-loaded) ~ .elementor-image-carousel-caption {
  opacity: 0;
  visibility: hidden;
}

/* Ladebalken (ersetzt den Swiper-Spinner; !important gegen die Swiper-
   Animation „swiper-preloader-spin“) */
.elementor-widget.ds-werk-slider .swiper-lazy-preloader {
  top: 40vh;                         /* halbe Bildhöhe (80 vh) */
  left: 50%;
  width: 160px;
  height: 1px;
  margin: 0 0 0 -80px;
  border: 0;
  border-radius: 0;
  background: var(--e-global-color-bf26d3b);
  overflow: hidden;
  opacity: 0;
  animation: ds-lade-einblenden 0.3s ease 0.3s forwards !important;
}
.elementor-widget.ds-werk-slider .swiper-lazy-preloader::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 30%;
  height: 100%;
  background: var(--e-global-color-primary);
  animation: ds-lade-balken 1.1s ease-in-out infinite;
}
@keyframes ds-lade-einblenden { to { opacity: 1; } }
@keyframes ds-lade-balken {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}
@media (max-width: 1023px) {
  .elementor-widget.ds-werk-slider .swiper-lazy-preloader { top: 28.5vh; } /* Bild 57 vh */
}
@media (max-width: 767px) {
  .elementor-widget.ds-werk-slider .swiper-lazy-preloader { top: 26.5vh; width: 120px; margin-left: -60px; } /* Bild 53 vh */
}
@media (prefers-reduced-motion: reduce) {
  .elementor-widget.ds-werk-slider .swiper-lazy-preloader::after { animation-duration: 3s; }
}

/* --------------------------------------------------------------------------
   23. NEWS-LISTE: DATUM VOR DEM TITEL, EINE ZEILE (2026-11-01)
   Klasse .ds-news-liste am Beiträge-Widget der News-Seite (ID 3148,
   Widget 689c9f4, Offset 1). Das Beiträge-Widget (Skin „Klassisch“) gibt
   immer erst den Titel, dann das Datum aus und hat keine Einstellung für
   die Reihenfolge. Hier: Textbereich als Zeile, Datum per order nach vorn,
   feste Datumsbreite, damit die Titel untereinander fluchten (Datumsformat
   „01. November 2026“, WP-Einstellungen → Allgemein: d. F Y). Lange Titel
   brechen nur in ihrer eigenen Spalte um. Typografie/Farben/Linien bleiben
   im Widget eingestellt.
   -------------------------------------------------------------------------- */
.elementor-widget.ds-news-liste .elementor-post__text {
  display: flex;
  flex-direction: row; /* Elementor setzt hier column */
  align-items: baseline;
  column-gap: 32px;
}
.elementor-widget.ds-news-liste .elementor-post__meta-data {
  order: -1;
  flex: 0 0 10.5em; /* Platz für das längste Datum „30. September 2026“ */
  margin: 0;
  padding: 0;
  white-space: nowrap;
}
.elementor-widget.ds-news-liste .elementor-post__title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0 !important; /* Widget setzt Titel-Abstand (4 px) mit hoher Spezifität */
}
@media (max-width: 767px) {
  .elementor-widget.ds-news-liste .elementor-post__text { column-gap: 16px; }
}

/* --------------------------------------------------------------------------
   24. BEITRAG: MAUS-TOOLTIP „PREVIOUS / NEXT“ (2026-11-01)
   Optik des Tooltips, der auf Beitragsseiten dem Mauszeiger folgt
   (linke Fensterhälfte = previous, rechte = next). Das Element erzeugt
   Custom Code 4253, Punkt 7. Vorher Inline-Styles im HTML-Widget b829fc8
   des Beitrags-Templates 3382 (entfernt). Position (left/top) und
   Sichtbarkeit (opacity) setzt das Skript.
   -------------------------------------------------------------------------- */
.ds-folge-tooltip {
  position: fixed;
  z-index: 999;
  padding: 8px 12px;
  border-radius: 4px;
  background: #fff;
  color: var(--ds-farbe-schwarz);
  font-family: var(--ds-schrift-text);
  font-size: 1rem;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  pointer-events: none;
  opacity: 0;
}

/* --------------------------------------------------------------------------
   25. BEITRAG: KOPF MIT OPTIONALEM BEITRAGSBILD (2026-11-01)
   Beitrags-Template (Kopf-Container „Kopf – Farbfeld“). Der Kopf ist fest
   schwarz (globale Farbe; Feld ds_sektionsfarbe am 2026-11-10 abgeschafft). Steht im Beitrag das benutzerdefinierte Feld
   ds_kopfbild = ja (klein geschrieben), bekommt der Kopf per dynamischem Tag
   die Klasse .ds-kopfbild-ja. Dann wird die Bildebene (.ds-kopf-bildebene,
   Hintergrund = Beitragsbild + 40 % Abdunklung, im Widget eingestellt) über
   die Farbfläche gelegt und die Texte (.ds-kopf-text) bekommen einen Schatten.
   Ohne Feld: Bildebene ausgeblendet, reine Farbfläche, kein Schatten.
   -------------------------------------------------------------------------- */
.e-con > .e-con.ds-kopf-bildebene {
  display: none;
}
.e-con.ds-kopfbild-ja > .e-con.ds-kopf-bildebene {
  display: flex;
  position: absolute;
  inset: 0;
  z-index: 0;
  width: auto;
  max-width: none;
}
.e-con.ds-kopfbild-ja > .elementor-widget {
  position: relative;
  z-index: 1;
}
/* Mit Bild: Überzeile und Datum voll weiß statt 75 % (sonst auf hellen Werken unlesbar) */
.e-con.ds-kopfbild-ja .ds-kopf-text .elementor-heading-title,
.e-con.ds-kopfbild-ja .ds-kopf-text .elementor-icon-list-text {
  color: #fff;
}
.e-con.ds-kopfbild-ja .ds-kopf-text .elementor-heading-title,
.e-con.ds-kopfbild-ja .ds-kopf-text .elementor-icon-list-text {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 2px 18px rgba(0, 0, 0, 0.35);
}

/* --------------------------------------------------------------------------
   26. NEWS-AUFMACHER: BEITRAGSBILD NICHT BESCHNEIDEN (2026-11-10)
   News-Seite (3148), Beiträge-Widgets „Aufmacher“ (Desktop 23b058a, Mobil
   4cd4484) mit Klasse ds-news-aufmacher. Elementor legt das Bild in einen Rahmen
   mit festem Bildverhältnis (0,66) und füllt ihn per Skript – freigestellte
   Werke auf Weiß wurden dabei abgeschnitten. Hier wird das Bild vollständig
   in den Rahmen eingepasst (contain); überstehender Platz bleibt weiß.
   Masonry (natürliche Höhe) bietet Elementor nur bei mehreren Spalten.
   -------------------------------------------------------------------------- */
.elementor-widget.ds-news-aufmacher .elementor-post__thumbnail img {
  position: absolute;
  top: 0 !important;        /* Elementor setzt top/left 50 % + translate */
  left: 0 !important;
  width: 100% !important;   /* überschreibt elementor-fit-height (Skript) */
  height: 100% !important;
  max-width: none;
  transform: none !important; /* Elementor: scale(1.01) translate(-50%,-50%) */
  object-fit: contain;
  object-position: center center;
}

/* --------------------------------------------------------------------------
   27. TYPOGRAFIE ÜBER GLOBALE STILE (2026-11-10)
   Alle Schriftgrößen kommen aus Website-Einstellungen → Globale Schriftarten
   (nur Oswald 300 + Cormac Thin). Widgets sind direkt verknüpft; die Klassen
   oben (ds-titel, ds-label, ds-jahr-titel, ds-liste, ds-text, ds-zitat,
   ds-legal …) lesen die Werte über var(--e-global-typography-<id>-…).
   Tablet/Mobil-Größen stehen im globalen Stil, nicht hier.
   IDs: primary = Fließtext · text = Fließtext klein · secondary = Label ·
   accent = Navigation · dstitel = Seitentitel · dsbtitl = Beitragstitel ·
   dsgross = Titel groß · dsabsch = Abschnittstitel · dsklein = Titel klein ·
   dslogo = Logo · dsmenue = Mobilmenü · dsgrtxt = Fließtext groß ·
   dsbild = Bildunterschrift · dsmenu = Hauptmenü (Desktop-Menüleiste,
   Cormac Thin)
   -------------------------------------------------------------------------- */
/* Bildunterschriften im Beitragstext (Gutenberg-Bildblock) = „Bildunterschrift“ */
.elementor-widget-theme-post-content figcaption,
.elementor-widget-theme-post-content .wp-element-caption {
  font-family: var(--e-global-typography-dsbild-font-family), sans-serif;
  font-size: var(--e-global-typography-dsbild-font-size);
  line-height: var(--e-global-typography-dsbild-line-height);
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Cormac Thin';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.eot');
	src: url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.eot?#iefix') format('embedded-opentype'),
		url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.woff2') format('woff2'),
		url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.woff') format('woff'),
		url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.ttf') format('truetype'),
		url('https://davidstegmann.de/wp-content/uploads/Cormac-Thin.svg#CormacThin') format('svg');
}
/* End Custom Fonts CSS */