/*
Theme Name: Ensemble Site
Theme URI: https://github.com/kraftwerk-mkt/ensemble
Author: Kraftwerk Marketing by Fabian Holtz
Description: Theme der Ensemble-Verkaufsseite. Kopf, Navigation, Fuss, Hintergrund und Seitenlook 1:1 aus der statischen Seite (build.py in ~/Downloads/site). Kein Child-Theme von ensemble-theme: die Verkaufsseite verwaltet keine Veranstaltungen.
Version: 1.1.1
Requires at least: 6.4
Requires PHP: 8.0
License: GNU General Public License v2 or later
Text Domain: ensemble-site
*/

/* ==========================================================================
   !!! PFLICHTREGEL (Fabian, 08.10.2026) !!!
   KEINE INLINE-STILE. Neue Abschnitte und jede Aenderung an den Seiten der
   Verkaufsseite NUR mit den Klassen und Variablen aus design/components.css
   (im Theme: style.css Teil 1) bauen. Kein style="...", keine festen Farb-,
   Schrift-, Groessen- oder Abstandswerte im HTML. Fehlt ein Baustein: in
   components.css ergaenzen, vorher mit Fabian absprechen.
   Kurzreferenz: Projekt-Dokument claude/ENSEMBLE-SITE-REGEL-KEINE-INLINE-STILE.md
   ========================================================================== */


/* ------------------------------------------------------------------------
   Teil 1 — unveraendert aus dist/assets/style.css der statischen Seite.
   Aenderungen am Look gehoeren zuerst dorthin (DESIGN_CSS in build.py) und
   werden dann hierher uebernommen, damit beide Quellen gleich bleiben.
   ------------------------------------------------------------------------ */
/* Design-Tokens (08.10.2026): Farben und Schrift der ganzen Seite.
   Die Designseiten verwenden nur noch diese Variablen. Gold und Blau
   stehen einmal als R,G,B (fuer Transparenzen) und daraus als Farbe:
   eine Aenderung an --gold-rgb wirkt ueberall. */
:root{
  --gold-rgb:232,196,138;
  --blue-rgb:53,130,196;
  --gold:rgb(var(--gold-rgb));
  --gold-deep:#c99a55;
  --gold-pale:#f0e4cd;
  --gold-muted:#8a7c60;
  --on-gold:#1a1206;
  --blue:rgb(var(--blue-rgb));
  --blue-light:#5aa3e0;
  --blue-deep:#2271b1;
  --blue-dark:#2f6ea8;
  --ok:#4caf50;
  --accent-green:#10b981;
  --accent-indigo:#6366f1;
  --warn:#f0b849;
  --white:#fff;
  --heading:#f0f0f0;
  --text:#e0e0e0;
  --text-soft:#c8c8c8;
  --text-c0:#c0c0c0;
  --body:#b4b4b4;
  --dim:#a0a0a0;
  --muted:#8a8a8a;
  --mute:#8b9298;
  --faint:#787878;
  --faint-2:#6a6a6a;
  --border-strong:#505050;
  --grey-4d:#4d4d4d;
  --grey-4a:#4a4a4a;
  --grey-48:#484848;
  --border-soft:#454545;
  --border:#404040;
  --grey-3d:#3d3d3d;
  --grey-3a:#3a3a3a;
  --grey-38:#383838;
  --grey-36:#363636;
  --grey-34:#343434;
  --grey-33:#333;
  --surface-hi:#303030;
  --grey-2e:#2e2e2e;
  --surface:#2c2c2c;
  --surface-2:#272727;
  --surface-3:#262626;
  --surface-4:#242424;
  --grey-23:#232323;
  --bg:#1e1e1e;
  --font-sans:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif;
  --font-mono:'Courier New',monospace;
  --line:rgba(255,255,255,.09); --panel:#22262a; --maxw:1000px; --wide:1280px;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
/* Die geschlossene Mobil-Schublade liegt rechts ausserhalb; ohne das hier
   laesst sie die Seite auf dem Telefon seitlich scrollen. */
html{overflow-x:hidden;}
body{
  background:radial-gradient(130% 85% at 50% -10%, #2b3947 0%, #242424 42%, #1e1e1e 80%) no-repeat #1e1e1e;
  background-attachment:fixed; color:var(--text);
  font-family:var(--font-sans);
  font-size:17px; line-height:1.7; -webkit-font-smoothing:antialiased;
}
a{color:var(--gold); text-decoration:none;}
a:hover{color:#f5dcb4;}

/* Animationen aus dem Design */
@keyframes str-sweep{0%{transform:translateY(-40%);opacity:0}12%{opacity:.9}88%{opacity:.9}100%{transform:translateY(140%);opacity:0}}
@keyframes str-breathe{0%,100%{opacity:.18;transform:scaleX(1)}50%{opacity:.55;transform:scaleX(1.8)}}
@keyframes eq{0%,100%{transform:scaleY(.22)}50%{transform:scaleY(1)}}
@keyframes halo{0%,100%{transform:translate3d(0,0,0) scale(1);opacity:.55}50%{transform:translate3d(0,-40px,0) scale(1.12);opacity:.8}}
@keyframes row-in{from{opacity:0;transform:translateX(-26px) rotate(-.6deg)}to{opacity:1;transform:none}}
@keyframes bow{0%,100%{transform:scaleY(.5);opacity:.5}50%{transform:scaleY(1.25);opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* Header + Navigation mit Dropdown */
html{scroll-padding-top:82px;}
.site-head-bar{position:sticky;top:0;z-index:16;background:rgba(18,18,20,.72);backdrop-filter:saturate(140%) blur(12px);-webkit-backdrop-filter:saturate(140%) blur(12px);border-bottom:1px solid rgba(255,255,255,.07);}
.site-head{position:relative;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 52px;max-width:var(--wide);margin:0 auto;}
.brand{display:flex;align-items:center;gap:14px;}
.brand-logo-h{height:38px;width:auto;display:block;flex:none;}
.brand-mark{height:26px;width:auto;display:block;flex:none;}
.brand-name{font-size:26px;font-weight:700;letter-spacing:.01em;color:var(--text);}
.brand-sub{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#787878;}
.site-nav{display:flex;align-items:center;gap:30px;font-size:14px;}
.site-nav>a,.nav-drop-top{color:var(--dim);transition:color .2s;}
.site-nav>a:hover,.nav-drop-top:hover,.site-nav>a.active,.nav-drop-top.active{color:#fff;}
.nav-drop{position:relative;display:inline-flex;align-items:center;}
.nav-drop-top::after{content:"\25BE";margin-left:6px;font-size:10px;color:#787878;}
.nav-menu{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(-6px);margin-top:14px;
  display:flex;flex-direction:column;min-width:210px;padding:8px;border-radius:14px;background:var(--panel);
  border:1px solid var(--line);box-shadow:0 20px 46px rgba(0,0,0,.5);opacity:0;visibility:hidden;
  transition:opacity .18s ease,transform .18s ease;z-index:6;}
.nav-menu::before{content:"";position:absolute;top:-14px;left:0;right:0;height:14px;}
.nav-drop:hover .nav-menu,.nav-drop:focus-within .nav-menu{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);}
.nav-menu a{padding:9px 14px;border-radius:9px;color:var(--dim);white-space:nowrap;font-size:14px;}
.nav-menu a:hover{background:rgba(232,196,138,.10);color:var(--gold);}
/* Features-Panel: zwei Ebenen (Gruppe -> Feature) nebeneinander statt als
   Kaskade. 19 Eintraege in einer Spalte waeren eine Liste, keine Navigation.
   Rechtsbuendig an "Features" verankert, damit das breite Panel nie ueber den
   rechten Rand laeuft -- zentriert wuerde es das ab etwa 1100px tun. */
.nav-mega{left:auto;right:0;transform:translateY(-6px);
  width:max-content;max-width:min(700px,calc(100vw - 44px));padding:14px;}
.nav-drop:hover .nav-mega,.nav-drop:focus-within .nav-mega{transform:translateY(0);}
.nav-mega-all{display:block;margin:0 0 10px;padding:9px 12px !important;border-radius:9px;
  font-size:13px !important;font-weight:600;color:var(--gold) !important;
  background:rgba(232,196,138,.07);border:1px solid rgba(232,196,138,.20);}
.nav-mega-all:hover{background:rgba(232,196,138,.14);}
/* Mehrspalten-Fluss statt Grid: bei einem Grid haette jede Zeile die Hoehe
   ihrer laengsten Spalte -- unter "Angebot & Verkauf" (2 Eintraege) klaffte
   dann die Luecke der 5 Eintraege von "Menschen & Kontakt". Die Gruppen
   fliessen jetzt und duerfen nur nicht umbrechen. */
.nav-mega-grid{columns:3;column-gap:14px;}
.nav-mega-col{display:block;break-inside:avoid;-webkit-column-break-inside:avoid;
  page-break-inside:avoid;margin:0 0 12px;}
.nav-mega-label{display:block;padding:0 12px 6px;font-size:10.5px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:#787878;white-space:nowrap;}
.nav-mega-col a{display:block;padding:6px 12px !important;font-size:13.5px;}
@media (max-width:1180px){.nav-mega-grid{columns:2;}}
/* Seitenname neben der Wortmarke braucht Platz, den Navigation und Burger hier noetiger haben */
@media (max-width:1120px){.brand-sub{display:none;}}

.nav-cta{padding:9px 18px;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));
  color:#1a1206 !important;font-weight:600;font-size:13px;}
.nav-cta:hover{color:#1a1206 !important;filter:brightness(1.06);}

/* Mobil-Navigation: Hamburger + Drawer, per Klasse an <body> gesteuert */
.nav-burger{display:none;flex:none;width:40px;height:40px;padding:0;align-items:center;justify-content:center;
  gap:5px;flex-direction:column;background:transparent;border:1px solid var(--line);border-radius:10px;
  cursor:pointer;position:relative;z-index:8;}
.nav-burger-bar{display:block;width:20px;height:2px;border-radius:2px;background:var(--text);transition:transform .22s ease,opacity .18s ease;}
body.nav-open .nav-burger{border-color:rgba(232,196,138,.4);}
body.nav-open .nav-burger-bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
body.nav-open .nav-burger-bar:nth-child(2){opacity:0;}
body.nav-open .nav-burger-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

.mobile-nav{display:none;}

main{position:relative;z-index:2;}

/* Addon-Karten: der Einsatz. Blau sind die Stimmen, das eine Gold ist der
   Einsatz des Dirigenten — beim Ueberfahren spielt das Icon ihn einmal.
   Dieselbe Huellkurve und dieselbe Dauer wie ein Einsatz in der Hero-Animation. */
.addon-card{transition:border-color .2s ease,transform .2s ease,box-shadow .2s ease;}
.addon-card:hover{border-color:var(--gold) !important;transform:translateY(-3px);
  box-shadow:0 12px 32px rgba(0,0,0,.34);}
/* Feature-Chips im Funktionen-Hub: der volle Umfang auf einen Blick, ohne die
   Seite zu einer zweiten Feature-Übersicht zu machen. Bewusst ohne Lift und
   Schatten wie .addon-card — 19 huepfende Pillen waeren Unruhe. */
.fn-chip{transition:border-color .2s ease,color .2s ease,background-color .2s ease;}
.fn-chip:hover{border-color:var(--gold) !important;color:var(--gold) !important;
  background:rgba(232,196,138,.07) !important;}
@media (max-width:820px){
  /* Auf dem Handy sonst 19 Pillen untereinander — Innenabstand und Schrift
     runter, damit wieder mehrere in eine Zeile passen. */
  .fn-band{padding:32px 22px !important;}
  .fn-chip{padding:7px 13px !important;font-size:13px !important;}
}
.addon-icon{flex:none;overflow:visible;}
.addon-icon [stroke="#e8c48a"]{transition:stroke-width .5s ease;}
.addon-card:hover .addon-icon [stroke="#e8c48a"]{animation:cue 1.15s ease-out both;}
@keyframes cue{
  0%{stroke-width:1.5;filter:none}
  12%{stroke-width:3.1;filter:drop-shadow(0 0 6px rgba(232,196,138,.9))}
  100%{stroke-width:1.5;filter:drop-shadow(0 0 0 rgba(232,196,138,0))}
}
@media (prefers-reduced-motion: reduce){
  .addon-card:hover .addon-icon [stroke="#e8c48a"]{animation:none;stroke-width:2.4;}
  .addon-card:hover{transform:none;}
}

/* Hero-Animation: das Orchester-Oval unter der Headline */
.hero-orchestra{width:100%;max-width:860px;margin:56px auto 0;aspect-ratio:5 / 2.1;min-height:280px;}
.orchester-band{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:0 52px 40px;}
.orchester-band .hero-orchestra{margin-top:0;}
/* Animation als Hintergrund des Hero: liegt hinter dem Text, reicht breiter
   als die Textspalte und wird zu den Raendern hin weggeblendet. */
.hero-has-bg{position:relative;}
.hero-has-bg>*:not(.hero-bg){position:relative;z-index:1;}
.hero-bg{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:min(1240px,100vw);height:76%;z-index:0;pointer-events:none;opacity:.5;
  -webkit-mask-image:radial-gradient(120% 92% at 50% 92%,#000 48%,transparent 82%);
  mask-image:radial-gradient(120% 92% at 50% 92%,#000 48%,transparent 82%);}
.hero-bg .hero-orchestra{max-width:none;margin:0;height:100%;min-height:0;aspect-ratio:auto;}
.hero-orchestra canvas{display:block;width:100%;height:100%;}
@media (max-width:820px){
  .hero-orchestra{margin-top:40px;aspect-ratio:4 / 2.4;min-height:260px;}
}

/* Markdown-Seiten (Detail + Recht) im Design-Look */
.page{max-width:var(--maxw);margin:0 auto;padding:64px 52px 90px;position:relative;z-index:2;animation:rise .7s ease both;}
.page .back{font-size:14px;color:var(--mute);}
.page .back:hover{color:var(--gold);}
.kicker{margin-top:22px;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.page h1{font-size:clamp(38px,5vw,60px);font-weight:700;line-height:1.05;letter-spacing:-.025em;margin:16px 0 0;
  background:linear-gradient(135deg,var(--blue-light),#2271b1);-webkit-background-clip:text;background-clip:text;color:transparent;}
.page--legal h1{background:none;-webkit-text-fill-color:initial;color:#f0f0f0;}
.prose{margin-top:8px;}
.prose>p:first-of-type{font-size:19px;color:var(--text);}
.prose h2{font-size:29px;font-weight:700;letter-spacing:-.015em;margin:64px 0 16px;padding-top:30px;border-top:1px solid var(--line);color:#f0f0f0;}
.prose h3{font-size:20px;margin:36px 0 12px;color:#f0f0f0;}
.prose p{color:var(--dim);margin:18px 0;}
.prose strong{color:#f2ece2;font-weight:650;}
.prose em{color:var(--mute);}
.prose a{color:var(--blue-light);}
.prose ul,.prose ol{color:var(--dim);padding-left:22px;}
.prose li{margin:10px 0;}
.prose li::marker{color:var(--gold);}
.prose hr{border:0;border-top:1px solid var(--line);margin:50px 0;}
.prose blockquote{border-left:3px solid var(--gold);margin:26px 0;padding:4px 0 4px 22px;color:var(--mute);font-style:italic;}
.prose table{width:100%;border-collapse:collapse;margin:26px 0;font-size:15px;}
.prose th,.prose td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line);}
.prose th{color:var(--gold);font-weight:600;font-size:13px;letter-spacing:.04em;text-transform:uppercase;}
/* "Mehr erfahren" auf Detailseiten (Skript: nav.js), 10.10.2026 */
.prose-mehr-knopf{display:none;}
@media (max-width:760px){
  .prose--mehr .prose-mehr{display:none;}
  .prose--mehr.prose--offen .prose-mehr{display:block;}
  /* zugeklappt: Trennlinie vor "Weiter im Stueck" faellt weg, die Ueberschrift hat ihre eigene */
  .prose--mehr:not(.prose--offen) .prose-mehr + hr{display:none;}
  .prose-mehr-knopf{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin:30px 0 10px;padding:14px 18px;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--gold);font:inherit;font-size:16px;font-weight:600;cursor:pointer;}
  .prose-mehr-knopf::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .2s ease;}
  .prose--offen .prose-mehr-knopf::after{transform:translateY(2px) rotate(-135deg);}
  .prose-mehr-knopf:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
}
.prose td{color:var(--dim);}

.draft-banner{border:1px solid rgba(232,196,138,.4);border-radius:12px;
  background:linear-gradient(160deg,rgba(232,196,138,.08),rgba(53,130,196,.05));
  padding:18px 22px;margin:0 0 30px;font-size:15px;color:var(--dim);line-height:1.6;}
.draft-banner strong{color:var(--gold);}
.draft-banner code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;color:var(--gold);}

/* Bild-/Videoplätze */
.shot{margin:40px 0;}
.shot img,.shot video{width:100%;height:auto;border-radius:12px;display:block;border:1px solid var(--line);background:#000;}
.shot figcaption{margin-top:12px;font-size:14px;color:var(--mute);text-align:center;font-style:italic;}
.slot-empty{border:2px dashed rgba(232,196,138,.35);border-radius:14px;
  background:linear-gradient(160deg,rgba(232,196,138,.05),rgba(53,130,196,.05));padding:44px 32px;text-align:center;}
.slot-badge{display:inline-block;padding:4px 12px;border-radius:20px;background:var(--gold);color:#1a1206;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.slot-id{margin-top:16px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;letter-spacing:.1em;color:var(--gold);}
.slot-title{margin-top:6px;font-size:20px;font-weight:650;color:#efe6d8;}
.slot-motiv{margin:12px auto 0;max-width:560px;font-size:14px;color:var(--mute);line-height:1.6;}
.slot-format{margin-top:12px;font-size:12px;letter-spacing:.06em;color:#6f7a84;text-transform:uppercase;}

/* Footer */
.site-foot{position:relative;z-index:2;border-top:1px solid #383838;padding:30px 52px;max-width:var(--wide);
  margin:60px auto 0;display:flex;justify-content:space-between;align-items:center;gap:14px 30px;flex-wrap:wrap;font-size:13px;color:#6a6a6a;}
.foot-links{display:flex;gap:16px;flex-wrap:wrap;}
.site-foot a{color:var(--mute);}
.site-foot a:hover{color:var(--gold);}
.foot-note{color:#5e666b;}
.foot-brand{display:flex;align-items:center;gap:16px;}
.foot-logo{height:84px;width:auto;display:block;flex:none;opacity:.92;}

@media (max-width:820px){
  .site-head{padding:18px 22px;gap:14px;}
  .site-nav{display:none;}
  .nav-burger{display:flex;}

  .mobile-nav{display:block;position:fixed;inset:0;z-index:19;
    background:#1c1c1e;
    background:radial-gradient(130% 85% at 50% -10%, #2b3947 0%, #242424 42%, #1e1e1e 80%) no-repeat #1e1e1e;
    transform:translateX(100%);visibility:hidden;opacity:0;
    transition:transform .28s ease,opacity .28s ease,visibility 0s linear .28s;
    overflow-y:auto;}
  body.nav-open{overflow:hidden;}
  body.nav-open .mobile-nav{transform:translateX(0);visibility:visible;opacity:1;
    transition:transform .28s ease,opacity .28s ease,visibility 0s;}

  .mobile-nav-head{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;
    border-bottom:1px solid var(--line);}
  .mobile-nav-head .brand-name{font-size:22px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px;}
  .mobile-nav-close{width:40px;height:40px;border:1px solid var(--line);border-radius:10px;background:transparent;
    color:var(--text);font-size:24px;line-height:1;cursor:pointer;}

  .mobile-nav-links{display:flex;flex-direction:column;padding:18px 22px 48px;gap:2px;}
  .mobile-nav-links>a{padding:15px 6px;font-size:18px;color:var(--text);border-bottom:1px solid var(--line);}
  .mobile-nav-links>a.active{color:var(--gold);}
  .mobile-nav-group-label{margin-top:16px;padding:0 6px;font-size:12px;font-weight:600;letter-spacing:.12em;
    text-transform:uppercase;color:var(--mute);}
  .mobile-nav-links a.mobile-nav-sub{padding:13px 6px 13px 20px;font-size:16px;color:var(--dim);
    border-bottom:1px solid var(--line);}
  .mobile-nav-links a.mobile-nav-sub.active{color:var(--gold);}
  .mobile-nav-group-label.mobile-nav-group-sub{margin-top:12px;padding-left:20px;
    font-size:10.5px;color:#6a6a6a;}
  .mobile-nav-cta{margin-top:22px;text-align:center;border-bottom:none !important;font-size:16px;padding:14px 18px;}
  /* Gruppen (16.10.2026): Zeile mit Link + Plus, Unterpunkte klappen (nav.js). */
  .mobile-nav-row{display:flex;align-items:center;border-bottom:1px solid var(--line);}
  .mobile-nav-row>a{flex:1 1 auto;padding:15px 6px;font-size:18px;color:var(--text);}
  .mobile-nav-row>a.active{color:var(--gold);}
  .mobile-nav-toggle{flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--mute);font-size:26px;line-height:1;cursor:pointer;padding:0;}
  .mobile-nav-toggle span{display:inline-block;transition:transform .2s ease;}
  .mobile-nav-toggle[aria-expanded="true"]{color:var(--gold);}
  .mobile-nav-toggle[aria-expanded="true"] span{transform:rotate(45deg);}
  .mobile-nav-block{display:flex;flex-direction:column;gap:2px;}
  .mobile-nav-block[hidden]{display:none;}
  .mobile-nav-block .mobile-nav-group-label.mobile-nav-group-sub:first-child{margin-top:8px;}

  /* Lange deutsche Woerter in Ueberschriften sprengen sonst die Zeile */
  main h1,main h2,.page h1{overflow-wrap:break-word;hyphens:auto;}
  /* Designer-Sektionen tragen 52px Rand inline; auf dem Telefon zu viel */
  main section[style],main .d-is-sec{padding-left:22px !important;padding-right:22px !important;}
  /* Vergleichstabelle hat min-width:640px — ihr Kasten scrollt, nicht die Seite */
  main div:has(> table){overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .page{padding:40px 22px 60px;}
  .prose h2{margin-top:46px;font-size:24px;}
  .site-foot{padding:26px 22px;}
  .foot-logo{height:62px;}
  .brand-mark{height:22px;}
  .brand-logo-h{height:32px;}
}

@media (max-width:560px){
  /* auto-fit-Raster mit 220-340px Mindestbreite passen hier nicht mehr nebeneinander */
  main [style*="minmax("],main .d-is-fit{grid-template-columns:1fr !important;}
  /* Flex-Spalten mit 200-280px Mindestbreite: hier darf schrumpfen (640px = Tabelle, bleibt) */
  main div[style*="min-width:2"],main .d-is-shrink{min-width:0 !important;}
  /* Hero-Ueberschrift: bei 52px passt "Veranstaltungen," hier in keine Zeile und
     wird mitten im Wort umgebrochen. Kleiner gesetzt bleibt das Wort ganz. */
  main h1{font-size:clamp(32px,10.6vw,44px) !important;}
  /* Der Faecher sitzt hier eng auf den Buchstaben — deshalb zurueckhaltender */
  .hero-bg{opacity:.0;}
}


/* ==========================================================================
   Doku (07.10.2026) — Handbuch unter /doku/. Eigene Seitenform: links die
   Kapitel, rechts der Text. Farben, Schrift und .prose kommen vom Rest der
   Seite; hier steht nur, was die Doku anders braucht.
   ========================================================================== */
.doku{max-width:var(--wide);margin:0 auto;padding:48px 52px 90px;position:relative;z-index:2;
  display:grid;grid-template-columns:250px minmax(0,1fr);gap:56px;align-items:start;animation:rise .7s ease both;}
.doku-nav{position:sticky;top:104px;max-height:calc(100vh - 128px);overflow-y:auto;padding-right:8px;font-size:14px;}
.doku-nav>summary{display:none;}
.doku-nav-home{display:block;font-weight:650;color:#f0f0f0;margin-bottom:6px;}
.doku-nav-home:hover,.doku-nav-home.active{color:var(--gold);}
.doku-nav-label{display:block;margin:26px 0 8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.doku-nav a.doku-nav-link{display:block;padding:5px 0 5px 14px;border-left:1px solid var(--line);color:var(--dim);line-height:1.35;}
.doku-nav a.doku-nav-link:hover{color:var(--text);border-left-color:var(--mute);}
.doku-nav a.doku-nav-link.active{color:var(--gold);border-left-color:var(--gold);}
.doku-main{min-width:0;max-width:820px;}
.doku-main .kicker{margin-top:0;}
.doku-main h1{font-size:clamp(32px,4vw,46px);font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:14px 0 0;color:#f0f0f0;}
.doku-main .prose h2{font-size:25px;margin:52px 0 14px;padding-top:26px;}
.doku-main .prose h3{font-size:18px;margin:30px 0 10px;}
.doku-main .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.88em;color:var(--gold);
  background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:5px;padding:1px 6px;overflow-wrap:anywhere;}
.doku-main .prose pre{background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;margin:22px 0;}
.doku-main .prose pre code{background:none;border:0;padding:0;color:var(--text);overflow-wrap:normal;}
.doku-main .prose table{display:block;overflow-x:auto;}
.doku-pager{display:flex;justify-content:space-between;gap:20px;margin-top:64px;padding-top:26px;border-top:1px solid var(--line);font-size:15px;}
.doku-pager a{color:var(--dim);max-width:48%;}
.doku-pager a:hover{color:var(--gold);}
.doku-pager small{display:block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:4px;}
.doku-pager .doku-next{margin-left:auto;text-align:right;}
.doku-help{margin-top:40px;font-size:14px;color:var(--mute);}
.doku-help a{color:var(--blue-light);}
/* Startseite der Doku: Kapitel als Listen */
.doku-index{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin-top:8px;}
.doku-index-group{grid-column:1/-1;margin:38px 0 0;font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
.doku-index a.doku-card{display:block;padding:18px 20px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
  transition:border-color .2s ease,transform .2s ease;}
.doku-index a.doku-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.doku-card-title{display:block;font-weight:650;color:#f0f0f0;font-size:16px;}
.doku-card-desc{display:block;margin-top:6px;font-size:14px;line-height:1.5;color:var(--dim);}
.site-nav a.nav-help{color:var(--mute);}
.site-nav a.nav-help:hover,.site-nav a.nav-help.active{color:var(--gold);}
@media (max-width:980px){
  .doku{grid-template-columns:1fr;gap:26px;padding:30px 22px 60px;}
  .doku-nav{position:static;max-height:none;overflow:visible;padding:0;border:1px solid var(--line);border-radius:12px;background:var(--panel);}
  .doku-nav>summary{display:block;cursor:pointer;padding:14px 18px;font-weight:650;color:#f0f0f0;list-style:none;}
  .doku-nav>summary::-webkit-details-marker{display:none;}
  .doku-nav>summary::after{content:"+";float:right;color:var(--gold);}
  .doku-nav[open]>summary::after{content:"\2013";}
  .doku-nav-inner{padding:0 18px 18px;}
  .doku-pager{flex-direction:column;}
  .doku-pager a{max-width:none;}
  .doku-pager .doku-next{text-align:left;margin-left:0;}
}
@media (prefers-reduced-motion: reduce){.doku{animation:none;}.doku-index a.doku-card{transition:none;}}


/* ==========================================================================
   !!! PFLICHTREGEL (Fabian, 08.10.2026) !!!
   KEINE INLINE-STILE. Neue Abschnitte und jede Aenderung an den Seiten der
   Verkaufsseite NUR mit den Klassen und Variablen aus design/components.css
   (im Theme: style.css Teil 1) bauen. Kein style="...", keine festen Farb-,
   Schrift-, Groessen- oder Abstandswerte im HTML. Fehlt ein Baustein: in
   components.css ergaenzen, vorher mit Fabian absprechen.
   Kurzreferenz: Projekt-Dokument claude/ENSEMBLE-SITE-REGEL-KEINE-INLINE-STILE.md
   ========================================================================== */

/* ==========================================================================
   Bausteine der Designseiten (Stufe 2, 08.10.2026). Erzeugt aus den
   frueheren Inline-Stilen: eine Klasse je Variante, gruppiert nach Rolle,
   haeufigste Variante zuerst (Zahl in Klammern = Vorkommen).
   ========================================================================== */
/* ==========================================================================
   System der Designseiten (Stufe 2b, 08.10.2026)
   Abschnitte, Kicker und Ueberschriften. Wer hier einen Wert aendert,
   aendert ihn auf allen Designseiten. Feinabstaende ueber die Hilfsklassen
   am Ende (pt-/pb-, mt-/mb-).
   ========================================================================== */
:root{
  /* Breiten */
  --w-narrow:900px; --w-text:1000px; --w-hero:1080px; --w-normal:1180px; --w-wide:1240px;
  --pad-x:52px;
  /* Abstaende (Abschnitte) */
  --space-xs:20px; --space-s:40px; --space-m:60px; --space-l:80px; --space-xl:100px; --space-xxl:120px;
  /* Ueberschriften */
  --hd-hero-xl:clamp(52px,7.4vw,104px);
  --hd-hero:clamp(44px,6.2vw,84px);
  --hd-display:clamp(40px,5.4vw,72px);
  --hd-section:clamp(34px,4vw,52px);
  --hd-sub:clamp(28px,3vw,40px);
  --hd-title:28px;
  --hd-card:24px;
  --hd-item-lg:20px;
  --hd-item:18px;
  --gradient-heading:linear-gradient(135deg,var(--blue-light),var(--blue-deep));
}

/* --- Abschnitte --- */
main .sec{position:relative;z-index:2;max-width:var(--w-normal);margin:0 auto;padding:var(--space-l) var(--pad-x);}
main .sec--narrow{max-width:var(--w-narrow);}
main .sec--text{max-width:var(--w-text);}
main .sec--hero{max-width:var(--w-hero);}
main .sec--wide{max-width:var(--w-wide);}
main .sec--center{text-align:center;}
main .sec--rise{animation:rise .8s ease both;}
main .sec--line{border-top:1px solid var(--grey-38);}

/* --- Kicker (Overline) --- */
main .overline{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);}
main .overline--small{font-size:12px;letter-spacing:.12em;}
main .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:7px 16px;border-radius:999px;
  border:1px solid rgba(var(--gold-rgb),.28);background:rgba(var(--gold-rgb),.06);
  font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);}
main .eyebrow--blue{border-color:rgba(var(--blue-rgb),.35);background:rgba(var(--blue-rgb),.08);color:var(--blue-light);}

/* --- Ueberschriften --- */
main .hd{font-family:var(--font-sans);font-weight:700;color:var(--heading);margin:0;}
main .hd-hero-xl{font-size:var(--hd-hero-xl);line-height:1.02;letter-spacing:-.02em;}
main .hd-hero{font-size:var(--hd-hero);line-height:1.04;letter-spacing:-.02em;}
main .hd-display{font-size:var(--hd-display);line-height:1.06;letter-spacing:-.02em;}
main .hd-section{font-size:var(--hd-section);line-height:1.06;}
main .hd-sub{font-size:var(--hd-sub);line-height:1.1;}
main .hd-title{font-size:var(--hd-title);}
main .hd-card{font-size:var(--hd-card);}
main .hd-item-lg{font-size:var(--hd-item-lg);font-weight:600;}
main .hd-item{font-size:var(--hd-item);font-weight:600;}
main .hd-gradient{background:var(--gradient-heading);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* --- Farben (Kicker) --- */
main .c-gold{color:var(--gold);}
main .c-blue-light{color:var(--blue-light);}
main .c-faint{color:var(--faint-2);}

/* --- Hilfsklassen Abstand --- */
main .pt-xs{padding-top:var(--space-xs);}  main .pb-xs{padding-bottom:var(--space-xs);}
main .pt-s{padding-top:var(--space-s);}    main .pb-s{padding-bottom:var(--space-s);}
main .pt-m{padding-top:var(--space-m);}    main .pb-m{padding-bottom:var(--space-m);}
main .pt-xl{padding-top:var(--space-xl);}  main .pb-xl{padding-bottom:var(--space-xl);}
main .pt-xxl{padding-top:var(--space-xxl);} main .pb-xxl{padding-bottom:var(--space-xxl);}
main .mt-10{margin-top:10px;} main .mt-16{margin-top:16px;} main .mt-24{margin-top:24px;}
main .mb-6{margin-bottom:6px;} main .mb-8{margin-bottom:8px;} main .mb-10{margin-bottom:10px;} main .mb-12{margin-bottom:12px;}

/* ==========================================================================
   System, Teil 2 (Stufe 2c, 08.10.2026): Buttons, Panels (Cards), Layout
   ========================================================================== */
:root{
  --btn-pad:14px 28px; --btn-pad-lg:15px 32px; --btn-pad-sm:12px 20px; --btn-pad-xs:11px 24px;
  --btn-size:15px; --btn-size-lg:16px; --btn-size-sm:14.5px; --btn-size-xs:13.5px;
  --btn-shadow:0 12px 40px rgba(var(--gold-rgb),.18);
  --panel-radius:12px;
  --panel-bg:linear-gradient(165deg,var(--surface-hi),var(--surface-2));
  --panel-pad:28px; --panel-pad-s:24px; --panel-pad-l:32px; --panel-pad-xl:44px 48px;
}

/* --- Buttons --- */
main .btn{display:inline-block;text-align:center;text-decoration:none;border-radius:999px;
  padding:var(--btn-pad);font-size:var(--btn-size);font-weight:600;}
main .btn--gold{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--on-gold);box-shadow:var(--btn-shadow);}
main .btn--ghost{border:1px solid var(--border-strong);background:rgba(255,255,255,.03);color:var(--text);font-weight:500;}
main .btn--outline{border:1px solid rgba(var(--gold-rgb),.5);color:var(--gold);}
main .btn--lg{padding:var(--btn-pad-lg);font-size:var(--btn-size-lg);}
main .btn--sm{padding:var(--btn-pad-sm);font-size:var(--btn-size-sm);}
main .btn--xs{padding:var(--btn-pad-xs);font-size:var(--btn-size-xs);}
main .btn--block{display:block;}
main .btn--push{margin-top:auto;}
/* Verweis-Chips (Funktionen -> Features) */
main .btn-chip{display:inline-block;text-decoration:none;padding:9px 16px;border-radius:999px;border:1px solid var(--border-soft);
  background:rgba(255,255,255,.03);color:var(--text-soft);font-size:14px;font-weight:500;white-space:nowrap;}

/* --- Panels (Cards) --- */
main .panel{border:1px solid var(--border);border-radius:var(--panel-radius);background:var(--panel-bg);padding:var(--panel-pad);}
main .panel--pad-0{padding:0;}
main .panel--pad-s{padding:var(--panel-pad-s);}
main .panel--pad-l{padding:var(--panel-pad-l);}
main .panel--pad-xl{padding:var(--panel-pad-xl);}
main .panel--gold{border-color:rgba(var(--gold-rgb),.4);background:linear-gradient(170deg,rgba(var(--gold-rgb),.08),var(--surface-2));}
main .panel--dashed{border:1px dashed rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.03);}
main .panel--dashed-neutral{border:1px dashed var(--grey-4a);background:none;}
main .panel--glow{background:radial-gradient(120% 120% at 0% 0%, rgba(var(--gold-rgb),.10), var(--surface) 45%, var(--surface-3));}
main .panel--interactive{transition:all .2s ease;}
main .panel--link{text-decoration:none;}

/* --- Layout-Hilfen --- */
main .flex{display:flex;}
main .col{flex-direction:column;}
main .wrap{flex-wrap:wrap;}
main .items-center{align-items:center;}
main .justify-between{justify-content:space-between;}
main .justify-center{justify-content:center;}
main .gap-12{gap:12px;} main .gap-16{gap:16px;} main .gap-22{gap:22px;} main .gap-32{gap:32px;}
main .ovh{overflow:hidden;}
main .rel{position:relative;}
main .maxw-680{max-width:680px;}
main .anim-row{animation:row-in .6s cubic-bezier(.22,1,.36,1) 0s both;}
main .delay-1{animation-delay:.07s;} main .delay-2{animation-delay:.14s;}

/* ==========================================================================
   Weitere Bausteine (noch nicht zusammengelegt, Stufe 2)
   ========================================================================== */
/* --- Absaetze (Rest) --- */


/* --- Inline-Text (Rest) --- */
main .d-span-25{width:38px;height:38px;border-radius:6px;background:var(--gold);box-shadow:0 0 0 2px rgba(var(--gold-rgb),.35);}
main .d-span-24{width:38px;height:38px;border-radius:6px;background:var(--blue);}
main .d-span-23{width:38px;height:38px;border-radius:6px;background:var(--accent-indigo);}
main .d-span-22{width:38px;height:38px;border-radius:6px;background:var(--accent-green);}
main .d-span-19{padding:8px 14px;border-radius:8px;border:1px solid rgba(var(--gold-rgb),.4);}
main .d-span-21{padding:8px 14px;border-radius:8px;border:1px solid var(--grey-4a);}
main .d-span-20{padding:8px 14px;border-radius:8px;border:1px solid var(--grey-4a);}
main .d-span-26{width:44px;height:30px;border-radius:2px;border:1px solid var(--border-strong);}
main .d-span-27{width:44px;height:30px;border-radius:6px;border:1px solid rgba(var(--gold-rgb),.5);}
main .d-span-2{padding-top:18px;}
main .d-span-18{padding:15px 32px;border-radius:20px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--on-gold);box-shadow:0 12px 40px rgba(var(--gold-rgb),.16);}
main .d-span-8{position:absolute;left:0;}

/* --- Pillen / Badges (Rest) --- */
main .d-pill-7{padding:10px 18px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.28);background:rgba(var(--gold-rgb),.06);}
main .d-pill-2{padding:10px 18px;border-radius:999px;border:1px solid var(--border);}
main .d-pill-6{padding:10px 18px;border-radius:999px;border:1px dashed rgba(var(--gold-rgb),.35);}
main .d-pill-9{width:44px;height:30px;border-radius:999px;border:1px solid var(--border-strong);}
main .d-pill-8{position:absolute;top:-11px;left:30px;padding:4px 12px;border-radius:999px;background:var(--gold);color:var(--on-gold);}
main .d-pill-4{margin-left:12px;padding:3px 11px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.42);background:rgba(var(--gold-rgb),.07);vertical-align:middle;text-transform:none;}
main .d-pill{margin-left:9px;padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.42);background:rgba(var(--gold-rgb),.07);vertical-align:middle;}
main .d-pill-3{margin-left:9px;padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--blue-rgb),.55);background:rgba(var(--blue-rgb),.10);vertical-align:middle;}
main .d-pill-5{margin-left:9px;padding:2px 9px;border-radius:999px;border:1px solid rgba(var(--gold-rgb),.75);background:rgba(var(--gold-rgb),.14);vertical-align:middle;}

/* --- Hervorhebung --- */
main .d-strong{color:var(--heading);font-weight:600;} /* 11 */

/* --- Kursiv --- */
main .d-em{color:var(--faint);} /* 2 */
main .d-em-2{color:var(--heading);font-style:normal;font-weight:600;} /* 2 */

/* --- Links --- */
main .d-link-2{color:var(--blue-light);} /* 3 */
main .d-link-3{color:var(--gold);} /* 1 */

/* --- Illustrationen (Balken, Farbfelder, Equalizer) --- */
main .d-deco{height:6px;width:10px;border-radius:4px;background:var(--grey-36);} /* 3 */
main .d-deco-2{width:8px;height:6px;border-radius:2px;background:rgba(var(--gold-rgb),.5);} /* 3 */
main .d-deco-3{height:6px;flex:1;border-radius:4px;background:var(--border);} /* 2 */
main .d-deco-4{height:7px;flex:1;border-radius:4px;background:var(--border-soft);} /* 2 */
main .d-deco-5{width:9px;height:7px;border-radius:2px;background:rgba(var(--gold-rgb),.75);} /* 2 */
main .d-deco-6{height:13px;width:82%;border-radius:4px;background:linear-gradient(90deg,var(--blue-light),var(--blue));} /* 1 */
main .d-deco-7{height:6px;flex:1;border-radius:4px;background:var(--grey-3d);} /* 1 */
main .d-deco-8{height:7px;flex:1;border-radius:4px;background:var(--grey-4a);} /* 1 */
main .d-deco-9{height:7px;width:11px;border-radius:4px;background:var(--grey-3a);} /* 1 */
main .d-deco-10{height:7px;width:13px;border-radius:4px;background:var(--grey-3a);} /* 1 */
main .d-deco-11{height:7px;width:14px;border-radius:4px;background:var(--grey-3a);} /* 1 */
main .d-deco-12{height:8px;width:100%;border-radius:4px;background:var(--grey-4a);margin-top:12px;} /* 1 */
main .d-deco-13{height:8px;width:64%;border-radius:4px;background:var(--grey-3a);margin-top:7px;} /* 1 */
main .d-deco-14{height:8px;width:88%;border-radius:4px;background:var(--border);margin-top:7px;} /* 1 */
main .d-deco-15{height:9px;width:58%;border-radius:4px;background:rgba(var(--gold-rgb),.75);margin-top:9px;} /* 1 */
main .d-deco-16{margin-top:22px;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) 0%,var(--gold) 62%,rgba(var(--blue-rgb),.18) 62%);} /* 1 */
main .d-deco-17{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--blue-light),var(--blue-dark));opacity:.55;} /* 1 */
main .d-deco-18{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--border-soft),var(--grey-34));} /* 1 */
main .d-deco-19{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));opacity:.5;} /* 1 */
main .d-deco-20{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--grey-48),var(--grey-36));} /* 1 */
main .d-deco-21{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--grey-4a),var(--grey-38));} /* 1 */
main .d-deco-22{padding-top:100%;border-radius:4px;background:linear-gradient(135deg,var(--grey-4d),var(--grey-3a));} /* 1 */
main .d-deco-23{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--blue-light),rgba(var(--blue-rgb),.1));transform-origin:bottom;animation:eq 2.4s ease-in-out infinite .5s;} /* 1 */
main .d-deco-24{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--blue-light),rgba(var(--blue-rgb),.1));transform-origin:bottom;animation:eq 3.4s ease-in-out infinite .3s;} /* 1 */
main .d-deco-25{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--blue-light),rgba(var(--blue-rgb),.1));transform-origin:bottom;animation:eq 4.1s ease-in-out infinite .15s;} /* 1 */
main .d-deco-26{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(var(--gold-rgb),.1));transform-origin:bottom;animation:eq 2.1s ease-in-out infinite .7s;} /* 1 */
main .d-deco-27{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(var(--gold-rgb),.1));transform-origin:bottom;animation:eq 2.6s ease-in-out infinite;} /* 1 */
main .d-deco-28{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(var(--gold-rgb),.1));transform-origin:bottom;animation:eq 3.7s ease-in-out infinite 1.1s;} /* 1 */
main .d-deco-29{width:3px;height:100%;border-radius:3px;background:linear-gradient(180deg,var(--gold),rgba(var(--gold-rgb),.1));transform-origin:bottom;animation:eq 3s ease-in-out infinite .9s;} /* 1 */
main .d-deco-30{width:9px;height:7px;border-radius:2px;background:var(--blue-light);} /* 1 */

/* --- Raster (Rest) --- */
main .d-grid-4{border:1px solid var(--border);border-radius:14px;padding:44px 48px;background:radial-gradient(120% 140% at 100% 0%, rgba(var(--blue-rgb),.12), var(--surface) 45%, var(--surface-3));}

/* --- Zeilen (Flex) (Rest) --- */
main .d-row-14{height:64px;opacity:.65;}
main .d-row-26{height:200px;background:repeating-linear-gradient(135deg,rgba(var(--blue-rgb),.10) 0 8px,rgba(var(--blue-rgb),.03) 8px 16px);}
main .d-row-27{height:200px;background:repeating-linear-gradient(135deg,rgba(var(--gold-rgb),.10) 0 8px,rgba(var(--gold-rgb),.03) 8px 16px);}
main .d-row-10{flex:0 0 auto;min-width:240px;}
main .d-row-4{gap:4px 10px;}
main .d-row-2{padding:24px 26px;}
main .d-row-11{height:210px;border-bottom:1px solid var(--grey-33);background:radial-gradient(120% 140% at 20% 0%, rgba(var(--blue-rgb),.14), var(--grey-23) 55%);}
main .d-row-29{width:78%;}
main .d-row-28{width:41%;}
main .d-row-6{padding-left:11px;}
main .d-row{padding-bottom:14px;border-bottom:1px solid var(--grey-38);}

/* --- Sonstige Container (Rest) --- */
main .d-box-10{height:190px;border-bottom:1px solid var(--grey-33);}
main .d-box-11{padding:22px 24px;}
main .d-box-15{padding:28px;}
main .d-box-13{flex:1 1 420px;min-width:280px;}
main .d-box-19{overflow-x:auto;}
main .d-box-3{height:210px;border-bottom:1px solid var(--grey-33);}
main .d-box-22{width:78%;text-align:left;}
main .d-box-12{border-top:1px solid var(--grey-38);padding-top:20px;}
#es-wizard-demo .d-box-4.d-box-4{color:var(--es-muted);} /* 4 */

/* --- Bilder --- */
main .d-img{width:100%;height:100%;object-fit:cover;object-position:top;display:block;} /* 8 */
main .d-img-2{width:100%;height:auto;display:block;} /* 6 */
main .d-img-3{width:100%;display:block;} /* 2 */
main .d-img-4{width:100%;height:100%;display:block;object-fit:cover;object-position:top;} /* 2 */

/* --- Abbildungen --- */
main .d-figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--grey-33);box-shadow:0 18px 50px rgba(0,0,0,.35);} /* 3 */
main .d-figure-2{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--grey-33);box-shadow:0 20px 55px rgba(0,0,0,.4);} /* 2 */
main .d-figure-3{margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);height:320px;} /* 2 */
main .d-figure-4{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--grey-33);box-shadow:0 30px 80px rgba(0,0,0,.4);} /* 1 */
main .d-figure-5{margin:0;border:1px solid var(--border);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.03);} /* 1 */
main .d-figure-6{margin:44px 0 0;border:1px solid var(--grey-33);border-radius:12px;overflow:hidden;box-shadow:0 20px 55px rgba(0,0,0,.4);} /* 1 */

/* --- Bildunterschriften --- */
main .d-figcaption{font-size:13.5px;color:var(--muted);padding:12px 16px;background:var(--surface-4);} /* 2 */
main .d-figcaption-2{font-size:13.5px;line-height:1.5;color:var(--muted);padding:13px 18px;background:var(--surface-4);} /* 1 */

/* --- Icons --- */
main .d-svg{flex:none;margin-top:2px;} /* 21 */
main .d-svg-2{margin-bottom:16px;} /* 1 */

/* --- Listen --- */
main .d-ul{list-style:none;padding:0;margin:20px 0 0;font-size:14.5px;line-height:1.7;color:var(--body);} /* 1 */

/* --- Listenpunkte --- */
main .d-li{padding-left:22px;position:relative;} /* 3 */

/* --- Tabelle --- */
main .d-tbl-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px;} /* 1 */

/* --- Tabellenzeilen --- */
main .d-tbl-tr{border-bottom:1px solid var(--grey-33);} /* 9 */
main .d-tbl-tr-2{border-bottom:2px solid var(--border);} /* 1 */

/* --- Tabellenkoepfe --- */
main .d-tbl-th{text-align:center;padding:12px 14px;color:var(--gold);font-weight:600;} /* 3 */
main .d-tbl-th-2{text-align:center;padding:12px 14px;color:var(--blue-light);font-weight:600;} /* 1 */
main .d-tbl-th-3{text-align:left;padding:12px 14px;color:var(--faint);font-weight:600;font-size:13px;letter-spacing:.06em;} /* 1 */

/* --- Tabellenzellen --- */
main .d-tbl-td{text-align:center;color:var(--ok);} /* 23 */
main .d-tbl-td-2{text-align:center;color:var(--border-strong);} /* 13 */
main .d-tbl-td-3{padding:10px 14px;color:var(--dim);} /* 8 */
main .d-tbl-td-4{text-align:center;color:var(--dim);} /* 4 */
main .d-tbl-td-5{padding:10px 14px;color:var(--dim);font-weight:600;} /* 2 */

/* --- Formular-Labels --- */
main .d-label{display:block;font-size:13px;font-weight:600;color:var(--body);margin:0 0 6px;} /* 4 */

/* --- Formularfelder --- */
main .d-input{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:9px;border:1px solid var(--grey-4a);background:var(--bg);color:var(--heading);font-size:15px;margin:0 0 16px;} /* 2 */

/* --- Auswahlfelder --- */
main .d-select{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:9px;border:1px solid var(--grey-4a);background:var(--bg);color:var(--heading);font-size:15px;margin:0 0 16px;} /* 1 */

/* --- Textfelder --- */
main .d-textarea{width:100%;box-sizing:border-box;padding:12px 14px;border-radius:9px;border:1px solid var(--grey-4a);background:var(--bg);color:var(--heading);font-size:15px;line-height:1.5;resize:vertical;margin:0 0 20px;} /* 1 */

/* --- Formular-Buttons --- */
main .d-button{width:100%;cursor:pointer;padding:14px 24px;border:none;border-radius:999px;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--on-gold);font-weight:700;font-size:15px;box-shadow:0 12px 40px rgba(var(--gold-rgb),.18);} /* 1 */

/* ==========================================================================
   System, Teil 3 (Stufe 2d, 08.10.2026): Text und Hilfsklassen
   ========================================================================== */
:root{
  --txt-lead:clamp(19px,2vw,23px); --txt-lg:17px; --txt:16px; --txt-sm:15px; --txt-xs:13.5px; --txt-micro:12px; --txt-quote:22px;
}
/* --- Fliesstext (Absaetze) --- */
main .txt-lead{font-size:var(--txt-lead);line-height:1.5;color:var(--text-soft);margin:0;}
main .txt-lg{font-size:var(--txt-lg);line-height:1.75;color:var(--dim);margin:0;}
main .txt{font-size:var(--txt);line-height:1.7;color:var(--dim);margin:0;}
main .txt-sm{font-size:var(--txt-sm);line-height:1.65;color:var(--dim);margin:0;}
main .txt-xs{font-size:var(--txt-xs);line-height:1.6;color:var(--dim);margin:0;}
main .txt-micro{font-size:var(--txt-micro);line-height:1.55;color:var(--dim);margin:0;}
main .txt-quote{font-size:var(--txt-quote);line-height:1.5;color:var(--gold);font-style:italic;margin:0;}

/* --- Hilfsklassen (stehen bewusst zuletzt, damit sie gewinnen) --- */
main .c-blue-light{color:var(--blue-light);}
main .c-body{color:var(--body);}
main .c-dim{color:var(--dim);}
main .c-faint{color:var(--faint-2);}
main .c-gold{color:var(--gold);}
main .c-gold-muted{color:var(--gold-muted);}
main .c-gold-pale{color:var(--gold-pale);}
main .c-heading{color:var(--heading);}
main .c-muted{color:var(--muted);}
main .c-note{color:var(--faint);}
main .c-text{color:var(--text);}
main .center{text-align:center;}
main .col{flex-direction:column;}
main .cols-3{grid-template-columns:repeat(3,1fr);}
main .cols-220{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));}
main .cols-230{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));}
main .cols-240{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}
main .cols-260{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));}
main .cols-280{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
main .cols-300{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));}
main .cols-320{grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
main .cols-340{grid-template-columns:repeat(auto-fit,minmax(340px,1fr));}
main .cols-fill-330{grid-template-columns:repeat(auto-fill,minmax(330px,1fr));}
main .flex{display:flex;}
main .fs-11{font-size:11px;}
main .fs-12{font-size:12px;}
main .fs-13{font-size:13px;}
main .fs-14{font-size:14px;}
main .fs-15{font-size:15px;}
main .fs-16{font-size:16px;}
main .fs-18{font-size:18px;}
main .fs-20{font-size:20px;}
main .fs-26{font-size:26px;}
main .fs-28{font-size:28px;}
main .fs-32{font-size:32px;}
main .fs-38{font-size:38px;}
main .fs-40{font-size:40px;}
main .fw-600{font-weight:600;}
main .fw-700{font-weight:700;}
main .gap-4{gap:4px;}
main .gap-8{gap:8px;}
main .gap-12{gap:12px;}
main .gap-16{gap:16px;}
main .gap-20{gap:20px;}
main .gap-22{gap:22px;}
main .gap-24{gap:24px;}
main .gap-32{gap:32px;}
main .gap-40{gap:40px;}
main .gap-48{gap:48px;}
main .gap-56{gap:56px;}
main .grid{display:grid;}
main .grow{flex:1;}
main .ib{display:inline-block;}
main .italic{font-style:italic;}
main .items-baseline{align-items:baseline;}
main .items-center{align-items:center;}
main .items-end{align-items:flex-end;}
main .items-stretch{align-items:stretch;}
main .justify-between{justify-content:space-between;}
main .justify-center{justify-content:center;}
main .justify-end{justify-content:flex-end;}
main .ls-04{letter-spacing:.04em;}
main .ls-05{letter-spacing:.05em;}
main .ls-12{letter-spacing:.12em;}
main .ls-14{letter-spacing:.14em;}
main .m-0{margin:0;}
main .mb-6{margin-bottom:6px;}
main .mb-8{margin-bottom:8px;}
main .mb-10{margin-bottom:10px;}
main .mb-12{margin-bottom:12px;}
main .mb-16{margin-bottom:16px;}
main .mb-20{margin-bottom:20px;}
main .mb-24{margin-bottom:24px;}
main .mono{font-family:var(--font-mono);}
main .mt-4{margin-top:4px;}
main .mt-8{margin-top:8px;}
main .mt-10{margin-top:10px;}
main .mt-12{margin-top:12px;}
main .mt-16{margin-top:16px;}
main .mt-20{margin-top:20px;}
main .mt-24{margin-top:24px;}
main .mt-28{margin-top:28px;}
main .mt-32{margin-top:32px;}
main .mt-40{margin-top:40px;}
main .mt-48{margin-top:48px;}
main .mt-64{margin-top:64px;}
main .mt-auto{margin-top:auto;}
main .mw-240{max-width:240px;}
main .mw-360{max-width:360px;}
main .mw-560{max-width:560px;}
main .mw-600{max-width:600px;}
main .mw-640{max-width:640px;}
main .mw-680{max-width:680px;}
main .mw-720{max-width:720px;}
main .mw-760{max-width:760px;}
main .mw-820{max-width:820px;}
main .mx-auto{margin-left:auto;margin-right:auto;}
main .ovh{overflow:hidden;}
main .rel{position:relative;}
main .wrap{flex-wrap:wrap;}

/* ==========================================================================
   Support-Chat (15.10.2026, Runde 2) — Seite /support/ (template-support.php,
   assets/js/support.js). Nur fuer Programm, Pro, Agentur; Zugang per Token
   aus dem Ensemble-Plugin. Alle Werte aus den Variablen oben; der Bot-Text
   laeuft in .prose und erbt Listen, Tabellen und Code von dort.
   Aufbau: 70/30 am Desktop (Chat-Rahmen | Themen + Installation), eine
   Spalte am Handy. Eingabe am Boden des Rahmens, Pfeil im Feld.
   ========================================================================== */
:root{ --support-h:62vh; --support-h-min:420px; --support-h-max:760px; }
main .support-layout{display:grid;grid-template-columns:minmax(0,7fr) minmax(260px,3fr);gap:22px;align-items:start;}
main .support-side{display:flex;flex-direction:column;gap:16px;}

/* Rahmen */
main .support-frame{display:flex;flex-direction:column;overflow:hidden;height:clamp(var(--support-h-min),var(--support-h),var(--support-h-max));}
main .support-head{display:flex;align-items:center;gap:12px;padding:14px 20px;border-bottom:1px solid var(--border);background:var(--surface-3);}
main .support-head-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(76,175,80,.18);flex:none;}
main .support-head-text{display:flex;flex-direction:column;line-height:1.3;}
main .support-head-text strong{font-size:var(--txt-sm);color:var(--heading);font-weight:600;}
main .support-head-text span{font-size:var(--txt-micro);color:var(--mute);}

/* Verlauf */
main .support-log{flex:1 1 auto;min-height:0;overflow-y:auto;display:flex;flex-direction:column;gap:16px;padding:22px 20px;scroll-behavior:smooth;}
main .support-msg{max-width:82%;font-size:var(--txt-sm);line-height:1.6;}
main .support-msg--user{align-self:flex-end;padding:11px 16px;border-radius:18px 18px 4px 18px;background:rgba(var(--gold-rgb),.14);border:1px solid rgba(var(--gold-rgb),.3);color:var(--heading);white-space:pre-wrap;}
main .support-msg--bot{align-self:flex-start;color:var(--text);}
main .support-msg--bot::before{content:"Assistent";display:block;font-size:var(--txt-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);margin-bottom:6px;}
main .support-msg--bot .prose>:first-child{margin-top:0;}
main .support-msg--bot .prose>:last-child{margin-bottom:0;}
main .support-msg--bot .prose p{margin:0 0 12px;font-size:var(--txt-sm);color:var(--text);}
main .support-msg--bot .prose ul,main .support-msg--bot .prose ol{margin:0 0 12px;color:var(--text);}
main .support-msg--bot .prose h3{font-size:var(--hd-item);margin:16px 0 6px;padding:0;border:0;}
main .support-msg--bot .prose table{margin:12px 0;font-size:var(--txt-xs);display:block;overflow-x:auto;}
main .support-msg--bot .prose code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em;color:var(--gold);}
main .support-msg--bot .prose pre{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;overflow-x:auto;margin:12px 0;}
main .support-msg--bot .prose pre code{color:var(--text);}
main .support-msg--hinweis{align-self:center;max-width:100%;padding:8px 14px;border-radius:10px;border:1px dashed var(--grey-4a);color:var(--dim);font-size:var(--txt-xs);text-align:center;}
main .support-quellen{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;}
main .support-quellen-label{font-size:var(--txt-micro);letter-spacing:.12em;text-transform:uppercase;color:var(--mute);align-self:center;margin-right:4px;}
main .support-quellen .btn-chip{font-size:var(--txt-micro);padding:4px 10px;color:var(--text-soft);}
main .support-typing{display:inline-flex;gap:5px;align-items:center;color:var(--mute);font-size:var(--txt-xs);}
main .support-typing i{width:6px;height:6px;border-radius:50%;background:var(--gold);opacity:.35;animation:support-dot 1.2s infinite ease-in-out;}
main .support-typing i:nth-child(2){animation-delay:.2s;}
main .support-typing i:nth-child(3){animation-delay:.4s;}
@keyframes support-dot{0%,80%,100%{opacity:.25;transform:translateY(0);}40%{opacity:1;transform:translateY(-3px);}}

/* Eskalation (im Rahmen, ueber der Eingabe) */
main .support-eskalation{padding:16px 20px;border-top:1px dashed rgba(var(--gold-rgb),.45);background:rgba(var(--gold-rgb),.04);}
main .support-eskalation .ens-form input,main .support-eskalation .ens-form textarea{margin-bottom:12px;}
main .support-eskalation .ens-form textarea{min-height:80px;}
main .support-eskalation .ens-form button[type="submit"]{width:auto;}

/* Eingabe, am Boden angedockt: eigenes helles Feld mit Rahmen, Gold im Fokus */
main .support-input{display:flex;align-items:flex-end;gap:10px;padding:12px 14px;border-top:1px solid var(--border);background:var(--surface-3);}
main .support-input textarea{flex:1 1 auto;margin:0;padding:10px 14px;min-height:44px;max-height:160px;border:1px solid var(--border-strong);border-radius:12px;background:var(--surface-hi);color:var(--heading);font-size:var(--txt-sm);font-family:inherit;line-height:1.5;resize:none;outline:none;box-shadow:none;}
main .support-input textarea:focus{outline:none;border-color:rgba(var(--gold-rgb),.6);box-shadow:0 0 0 3px rgba(var(--gold-rgb),.12);}
main .support-input textarea::placeholder{color:var(--dim);}
main .support-send{flex:none;width:44px;height:44px;border-radius:50%;border:0;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:var(--on-gold);box-shadow:var(--btn-shadow);}
main .support-send[disabled]{opacity:.4;cursor:default;box-shadow:none;}

/* Seitenspalte */
main .support-pills{display:flex;flex-direction:column;gap:6px;margin-top:10px;}
main .support-pills .btn-chip{cursor:pointer;background:none;font-family:inherit;text-align:left;font-size:var(--txt-xs);font-weight:400;padding:7px 12px;color:var(--text-soft);border-color:var(--border);white-space:normal;}
main .support-pills .btn-chip:hover{border-color:rgba(var(--gold-rgb),.5);color:var(--gold);}
main .support-info{margin:10px 0 8px;display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:var(--txt-xs);}
main .support-info dt{color:var(--mute);}
main .support-info dd{margin:0;color:var(--text-soft);}
main .support-foot{font-size:var(--txt-micro);color:var(--faint);margin:0;line-height:1.5;}
main .support-foot a{color:var(--blue-light);}
main .support-state{text-align:center;}
main .support-state[hidden],main .support-layout[hidden],main .support-eskalation[hidden]{display:none;}

@media (max-width:900px){
  main .support-layout{grid-template-columns:1fr;}
  main .support-side .panel:nth-child(2){display:none;}
  main .support-side .panel{padding:14px 16px;}
  main .support-side .overline{margin-bottom:0;}
  main .support-pills{flex-direction:row;flex-wrap:wrap;margin-top:8px;}
  main .support-frame{height:clamp(var(--support-h-min),70vh,var(--support-h-max));}
  main .support-msg{max-width:92%;}
}
@media (prefers-reduced-motion: reduce){main .support-typing i{animation:none;opacity:.7;}main .support-log{scroll-behavior:auto;}}


/* ==========================================================================
   Cookie-Hinweis (15.10.2026) — Einwilligung fuer Google Analytics.
   Markup: ensemble_site_cookie_banner() in functions.php, Logik in
   assets/js/consent.js. Der Hinweis sitzt am Ende von <main> (damit die
   main-Regeln fuer Buttons greifen) und liegt fest am unteren Rand.
   Nur zwei gleichwertige Buttons: Ablehnen (ghost) und Zustimmen (gold).
   Der Footer-Link .consent-open oeffnet den Hinweis erneut.
   ========================================================================== */
main .consent{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:0 20px 20px;pointer-events:none;}
main .consent[hidden]{display:none;}
main .consent-box{pointer-events:auto;margin:0 auto;max-width:var(--w-text);display:flex;align-items:center;gap:20px;padding:18px 22px;
  border:1px solid var(--border-strong);border-radius:16px;background:var(--surface-3);box-shadow:0 18px 60px rgba(0,0,0,.45);}
main .consent-text{flex:1 1 auto;margin:0;font-size:var(--txt-sm);line-height:1.55;color:var(--text);}
main .consent-text a{color:var(--blue-light);}
main .consent-actions{display:flex;gap:10px;flex:none;}
main .consent-actions .btn{cursor:pointer;font-family:inherit;}
@media (max-width:700px){
  main .consent{padding:0 12px 12px;}
  main .consent-box{flex-direction:column;align-items:stretch;gap:14px;padding:16px;}
  main .consent-actions{justify-content:stretch;}
  main .consent-actions .btn{flex:1 1 0;}
}


/* ==========================================================================
   Schutz (16.10.2026) — inc/schutz.php.
   .ens-hp: Honeypot-Feld im Kontaktformular. Aus dem Bild geschoben statt
   display:none, weil Bots display:none erkennen und das Feld dann auslassen.
   .ens-mail: Adresse, die nav.js aus data-u/data-d zusammensetzt; bis dahin
   steht "E-Mail anzeigen". Keine eigene Optik, erbt .btn oder den Linkstil.
   ========================================================================== */
main .ens-hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden;}
main .ens-hp input{width:1px;height:1px;}

/* ------------------------------------------------------------------------
   Teil 2 — nur WordPress. Nichts davon aendert den Look der Seite.
   ------------------------------------------------------------------------ */

/* Admin-Leiste: der klebende Kopf rutscht unter sie, sonst verdeckt sie ihn. */
body.admin-bar .site-head-bar{top:32px;}
body.admin-bar .mobile-nav{top:32px;}
body.admin-bar{--wp-admin--admin-bar--height:32px;}
@media (max-width:782px){
  body.admin-bar .site-head-bar{top:46px;}
  body.admin-bar .mobile-nav{top:46px;}
}

/* WordPress-Bildklassen im Fliesstext (Markdown-Seiten). */
.prose img{max-width:100%;height:auto;}
.prose .alignleft{float:left;margin:6px 24px 12px 0;}
.prose .alignright{float:right;margin:6px 0 12px 24px;}
.prose .aligncenter{display:block;margin:24px auto;}
.prose .wp-caption{max-width:100%;}
.prose .wp-caption-text{margin-top:12px;font-size:14px;color:var(--mute);text-align:center;font-style:italic;}
.screen-reader-text{position:absolute !important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0;}

/* Kontaktformular (Contact Form 7). Werte 1:1 von den Inline-Styles der
   Formular-Karte auf kontakt.html, damit das Plugin-Formular aussieht wie das
   gezeichnete. Reihenfolge der Felder bleibt im CF7-Formular-Markup. */
.wpcf7 label,
.ens-form label{display:block;font-size:13px;font-weight:600;color:#b4b4b4;margin:0 0 6px;}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 select,
.wpcf7 textarea,
.ens-form input[type="text"],
.ens-form input[type="email"],
.ens-form select,
.ens-form textarea{
  width:100%;box-sizing:border-box;padding:12px 14px;border-radius:9px;border:1px solid #4a4a4a;
  background:#1e1e1e;color:#f0f0f0;font-size:15px;font-family:inherit;margin:0 0 16px;}
.wpcf7 textarea,.ens-form textarea{line-height:1.5;resize:vertical;margin-bottom:20px;}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus,
.ens-form input:focus,.ens-form select:focus,.ens-form textarea:focus{
  outline:none;border-color:rgba(232,196,138,.6);box-shadow:0 0 0 3px rgba(232,196,138,.12);}
.wpcf7 .wpcf7-form-control-wrap{display:block;}
.wpcf7 input[type="submit"],
.wpcf7 button[type="submit"],
.ens-form button[type="submit"]{
  width:100%;cursor:pointer;padding:14px 24px;border:none;border-radius:999px;
  background:linear-gradient(135deg,#e8c48a,#c99a55);color:#1a1206;font-weight:700;font-size:15px;
  font-family:inherit;box-shadow:0 12px 40px rgba(232,196,138,.18);}
.wpcf7 input[type="submit"]:hover,.wpcf7 button[type="submit"]:hover,
.ens-form button[type="submit"]:hover{filter:brightness(1.06);}
.wpcf7 .wpcf7-spinner{display:block;margin:12px auto 0;}
.wpcf7 .wpcf7-acceptance label{display:flex;gap:10px;align-items:flex-start;font-weight:400;color:#a0a0a0;font-size:14px;line-height:1.55;}
.wpcf7 .wpcf7-acceptance input[type="checkbox"]{margin:4px 0 0;accent-color:#e8c48a;}
/* Rueckmeldungen: dieselbe Kartensprache wie der Rest der Seite */
.wpcf7 .wpcf7-response-output{margin:18px 0 0;padding:12px 16px;border-radius:10px;font-size:14px;
  border:1px solid rgba(232,196,138,.4);background:rgba(232,196,138,.07);color:var(--text);}
.wpcf7 form.sent .wpcf7-response-output{border-color:rgba(53,130,196,.5);background:rgba(53,130,196,.10);}
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output,
.wpcf7 form.spam .wpcf7-response-output{border-color:rgba(214,92,92,.5);background:rgba(214,92,92,.10);}
.wpcf7 .wpcf7-not-valid-tip{display:block;margin:-10px 0 14px;font-size:13px;color:#e39a9a;}
.wpcf7 .wpcf7-not-valid{border-color:rgba(214,92,92,.6);}

/* Doku unter der Admin-Leiste: die klebende Kapitel-Leiste rutscht mit. */
body.admin-bar .doku-nav{top:136px;}
@media (max-width:980px){body.admin-bar .doku-nav{top:auto;}}

/* Downloads (08.10.2026) — [ensemble_site_download], inc/downloads.php.
   Gleiche Karte wie der Block "Free herunterladen" der statischen Seite,
   rechts das Formular des Ensemble Newsletters. Der Newsletter liest nur
   --ensemble-* Variablen; die setzen wir hier auf die Farben der Seite. */
.site-dl{position:relative;z-index:2;max-width:1240px;margin:0 auto;padding:20px 52px 56px;
  --ensemble-card-bg:#242424;--ensemble-card-border:#454545;--ensemble-card-radius:12px;--ensemble-card-padding:24px;
  --ensemble-text:#e0e0e0;--ensemble-text-muted:#8a8a8a;--ensemble-primary:#e8c48a;--ensemble-primary-light:rgba(232,196,138,.18);
  --ensemble-button-bg:linear-gradient(135deg,#e8c48a,#c99a55);--ensemble-button-text:#1a1206;--ensemble-button-radius:999px;--ensemble-danger:#f66;}
.site-dl-box{border:1px solid #404040;border-radius:16px;padding:36px 40px;background:linear-gradient(165deg,#2e2e2e,#262626);
  display:flex;flex-wrap:wrap;gap:32px;align-items:flex-start;justify-content:space-between;}
.site-dl-text{flex:1 1 420px;min-width:260px;}
.site-dl-text h2{font-weight:700;font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:0;color:#f0f0f0;}
.site-dl-text p{font-size:16px;line-height:1.7;color:#a0a0a0;margin:14px 0 0;max-width:560px;}
.site-dl-text .site-dl-meta{font-size:13.5px;line-height:1.6;color:#787878;}
.site-dl-btn{display:inline-block;margin-top:24px;text-align:center;text-decoration:none;padding:14px 26px;border-radius:999px;
  background:linear-gradient(135deg,#e8c48a,#c99a55);color:#1a1206;font-weight:700;font-size:15px;box-shadow:0 10px 30px rgba(232,196,138,.18);}
.site-dl-btn--ghost{margin-top:0;display:block;padding:11px 26px;border:1px solid #505050;background:rgba(255,255,255,.03);color:#c0c0c0;font-weight:600;font-size:13.5px;box-shadow:none;}
.site-dl-soon{color:#e8c48a !important;}
.site-dl-updates{flex:0 1 380px;min-width:260px;}
.site-dl-note{font-size:12px;line-height:1.55;color:#6a6a6a;margin:10px 0 0;text-align:center;}
.site-dl .esn-form-card{max-width:none;}
.site-dl .esn-form-title{font-size:18px;font-weight:650;color:#f0f0f0;}
.site-dl .esn-form-intro{font-size:13.5px;line-height:1.6;}
.site-dl .esn-form .ensemble-btn{width:100%;font-weight:700;}
@media (max-width:760px){.site-dl{padding:16px 20px 40px;}.site-dl-box{padding:26px 22px;}}

/* Theme-Schaukasten (08.10.2026) — [ensemble_site_themes], inc/themes.php. */
.site-themes{position:relative;z-index:2;max-width:1180px;margin:0 auto;padding:60px 52px;}
.site-themes-kicker{font-size:14px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#3582c4;}
.site-themes h2{font-weight:700;font-size:clamp(34px,4vw,52px);line-height:1.06;margin:16px 0 0;color:#f0f0f0;}
.site-themes-lead{font-size:17px;line-height:1.7;color:#b4b4b4;margin:18px 0 0;max-width:640px;}
.site-themes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:22px;margin-top:38px;}
.site-theme-card{display:flex;flex-direction:column;border:1px solid #404040;border-radius:14px;overflow:hidden;background:linear-gradient(180deg,#2c2c2c,#262626);}
.site-theme-card:first-child{border-color:rgba(232,196,138,.4);}
.site-theme-bild{aspect-ratio:16/10;background:linear-gradient(135deg,#333,#242424);display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:1px solid #383838;}
.site-theme-bild img{width:100%;height:100%;object-fit:cover;display:block;}
.site-theme-platzhalter{font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#6a6a6a;}
.site-theme-body{display:flex;flex-direction:column;flex:1;padding:26px 28px 28px;}
.site-theme-body h3,.site-theme-eigen h3{font-size:24px;font-weight:700;margin:0;color:#f0f0f0;}
.site-theme-stil{font-style:italic;font-size:15px;color:#e8c48a;margin:4px 0 0;}
.site-theme-preis{display:flex;align-items:baseline;gap:8px;margin:18px 0 0;}
.site-theme-preis span{font-weight:700;font-size:34px;color:#f0f0f0;}
.site-theme-preis small{font-size:14px;color:#787878;}
.site-theme-body p{font-size:14.5px;line-height:1.65;color:#b4b4b4;margin:12px 0 22px;flex:1;}
.site-theme-actions{display:flex;flex-wrap:wrap;gap:10px;}
.site-theme-btn{flex:1 1 auto;display:inline-block;text-align:center;text-decoration:none;padding:12px 22px;border-radius:999px;background:linear-gradient(135deg,#e8c48a,#c99a55);color:#1a1206;font-weight:600;font-size:14.5px;}
.site-theme-btn--ghost{background:rgba(255,255,255,.03);border:1px solid #505050;color:#e0e0e0;font-weight:500;}
.site-theme-btn--outline{flex:0 0 auto;background:none;border:1px solid rgba(232,196,138,.5);color:#e8c48a;}
.site-theme-btn.is-disabled{color:#6a6a6a;border-color:#3a3a3a;cursor:default;}
.site-theme-card.is-soon{border-style:dashed;background:rgba(255,255,255,.015);}
.site-theme-card.is-soon .site-theme-stil{color:#787878;}
.site-theme-eigen{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;margin-top:22px;padding:30px 32px;border:1px dashed rgba(232,196,138,.45);border-radius:14px;background:rgba(232,196,138,.03);}
.site-theme-eigen-text{flex:1 1 460px;}
.site-theme-eigen p{font-size:14.5px;line-height:1.65;color:#b4b4b4;margin:12px 0 0;max-width:680px;}
.site-themes-hinweis{font-size:13.5px;color:#787878;margin:22px 0 0;}
.site-themes-hinweis a{color:#e8c48a;}
@media (max-width:760px){.site-themes{padding:40px 20px;}.site-themes-grid{grid-template-columns:1fr;}.site-theme-eigen{padding:24px 22px;}}