/* =================================================================================================
busbaer.de — Redesign nach eisbaer-software.de (Stilschicht, Stufe "Redesign")
⚠️ ERZEUGT, NICHT VON HAND GEPFLEGT. Quelle ist 'redesign-es.css' unter
'portierung/muster/'; erzeugt mit 'portierung/baue-design-css.ps1'. Aenderungen hier gehen
beim naechsten Bau verloren.
Erzeugt am 2026-10-07 16:59.
⚠️ Diese Datei wird NUR geladen bei '?design=redesign' oder wenn
BUSBAER_DESIGN_STUFE=redesign gesetzt ist. Sie ist die ZWEITE Stufe und laesst die
Stufe 'Shop' (busbaer-neu.css) voellig unberuehrt.
Sie entsteht aus ZWEI Quellen: 'muster/redesign.css' (von Hand gepflegt) und
'muster/redesign-akzent.generiert.css' (von 'muster/erzeuge-akzent.php' AUS DEN
Theme-Stylesheets gelesen - die Akzentfarbe steht dort an 506 Stellen).
⚠️ Das viele '!important' ist kein Versehen: die Schicht liegt NACH den 24 Stylesheets des
Themes von 2016 und muss sich gegen deren ID-Selektoren durchsetzen. Erst wenn das Theme
abgeloest wird, koennen sie weg.
================================================================================================= */
:root {
--akzent: #5b7f95;
--akzent-dunkel: #4a6b7f;
--akzent-schwach:rgba(91,127,149,.10);
--auf-akzent: #ffffff;
--text: #252525;
--es-ink: #252525;
--es-ink2: #42454a;
--es-mut: #737373;
--es-linie: #e4e4e4;
--es-grund: #ffffff;
--es-flaeche: #ffffff; /* Karten, Kaesten (2026-10-06, Hell/Dunkel) */
--es-bildgrund: #ffffff; /* Produktbilder: weiss in BEIDEN Modi */
--es-kopf-grund: rgba(255,255,255,.92);
--es-grund2: #fafafa;
--es-schatten: 0 14px 38px rgba(37,37,37,.09);
--es-schatten-k: 0 4px 16px rgba(37,37,37,.06);
--es-rund: 14px;
--es-breite: 1180px;
--es-schrift: "Roboto","Segoe UI",system-ui,-apple-system,Helvetica,Arial,sans-serif;
}
body.es-seite { margin: 0; background: var(--es-grund) !important; color: var(--es-ink); font-family: var(--es-schrift); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
.es-seite .es-wrap { max-width: var(--es-breite); margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.es-seite .es-wrap *, .es-seite .es-wrap *::before, .es-seite .es-wrap *::after { box-sizing: border-box; }
/* ---------- Knoepfe ---------- */
.es-seite .es-knopf { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 10px; font: 700 14px/1.2 var(--es-schrift); cursor: pointer; text-decoration: none !important; border: 1.5px solid transparent; transition: background .2s, color .2s, border-color .2s, box-shadow .2s, transform .15s; white-space: nowrap; }
.es-seite .es-knopf-gross { padding: 12px 22px; font-size: 15px; }
.es-seite .es-knopf-voll { background: var(--akzent) !important; color: #fff !important; box-shadow: 0 4px 14px rgba(37,37,37,.12); }
.es-seite .es-knopf-voll:hover { background: var(--akzent-dunkel) !important; transform: translateY(-1px); }
.es-seite .es-knopf-leer { background: var(--es-flaeche) !important; color: var(--es-ink) !important; border-color: var(--es-linie); }
.es-seite .es-knopf-leer:hover { border-color: var(--akzent); color: var(--akzent) !important; }
/* ---------- Kopf ---------- */
.es-kopf { position: sticky; top: 0; z-index: 1000; background: var(--es-kopf-grund); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--es-linie); }
.es-kopf-zeile { display: flex; align-items: center; gap: 28px; height: 70px; }
.es-seite .es-marke { font: 800 20px/1 var(--es-schrift); letter-spacing: .2px; text-decoration: none !important; white-space: nowrap; }
.es-seite .es-marke .b1 { color: var(--es-ink) !important; }
.es-seite .es-marke .b2 { color: var(--akzent) !important; }
.es-navi { display: flex; align-items: center; gap: 4px; flex: 1; }
.es-punkt { position: relative; }
.es-seite .es-punkt > a { display: block; padding: 24px 12px; color: var(--es-ink2) !important; font: 500 15px/22px var(--es-schrift); text-decoration: none !important; transition: color .2s; white-space: nowrap; }
.es-seite .es-punkt > a:hover { color: var(--akzent) !important; }
/* Hauptpunkte mit Untermenue sind Knoepfe (kein Seitenwechsel beim Klick, 2026-10-06). Sie sehen aus
wie die Links daneben. */
.es-seite .es-menue-knopf { display: block; padding: 24px 12px; margin: 0; border: 0; background: none; cursor: pointer; color: var(--es-ink2); font: 500 15px/22px var(--es-schrift); white-space: nowrap; transition: color .2s; }
.es-seite .es-menue-knopf:hover, .es-punkt.offen > .es-menue-knopf, .es-punkt:has(.es-menue :focus) > .es-menue-knopf { color: var(--akzent); }
.es-seite .es-menue-knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: -6px; border-radius: 8px; }
.es-hat-menue > .es-menue-knopf::after { content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .6; transition: transform .2s; }
.es-punkt.offen > .es-menue-knopf::after { transform: translateY(0) rotate(225deg); }
.es-menue { display: none; position: absolute; top: 100%; left: 0; min-width: 240px; padding: 10px; background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten); }
.es-punkt:not(.zu):hover >.es-menue, .es-punkt.offen > .es-menue, .es-punkt:has(.es-menue :focus) > .es-menue { display: block; }
/* Breite Menues (Werkzeuge, Hardware): je Gruppe eine Spalte. Die Gruppen sind SUBGRIDS ueber
dieselben Zeilen - damit stehen Titel und Eintraege aller Spalten auf gleicher Hoehe, auch wenn ein
Titel oder Name umbricht (2026-10-06, "Werkzeuge ... auf gleicher Hoehe"). --spalten/--zeilen setzt
die Vorlage (Anzahl Gruppen / groesste Gruppe + Titelzeile). */
.es-menue-breit { display: none; min-width: 760px; left: -20px; }
.es-punkt:not(.zu):hover >.es-menue-breit, .es-punkt.offen > .es-menue-breit, .es-punkt:has(.es-menue :focus) > .es-menue-breit { display: grid; grid-template-columns: repeat(var(--spalten, 4), minmax(0, 1fr)); grid-auto-rows: auto; column-gap: 14px; row-gap: 2px; padding: 18px; }
.es-menue-breit .es-menue-gruppe { display: grid; grid-row: span var(--zeilen, 4); grid-template-rows: subgrid; align-content: start; }
.es-menue-breit .es-menue-titel { align-self: start; }
.es-seite .es-menue-alle { display: block; grid-column: 1 / -1; margin-top: 8px; padding: 10px 8px 2px; border-top: 1px solid var(--es-linie); color: var(--akzent) !important; font: 700 13.5px/1.3 var(--es-schrift); text-decoration: none !important; }
.es-seite .es-menue-alle:hover { text-decoration: underline !important; }
.es-menue-titel { font: 800 11.5px/1.4 var(--es-schrift); letter-spacing: 1.6px; text-transform: uppercase; color: var(--akzent); padding: 4px 8px 8px; }
.es-seite .es-menue-eintrag { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 9px; color: var(--es-ink2) !important; font: 500 14px/1.3 var(--es-schrift); text-decoration: none !important; }
.es-seite .es-menue-eintrag:hover { background: var(--akzent-schwach); color: var(--es-ink) !important; }
.es-menue-eintrag img { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 28px; }
.es-menue-ohne { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 28px; background: var(--es-grund2); border: 1px solid var(--es-linie); }
/* Werkzeuge ohne Produkt-Icon: Lucide-Icon der Shop-Kategorie im getoenten Kaestchen (2026-10-06) */
.es-menue-lucide { width: 28px; height: 28px; border-radius: 7px; flex: 0 0 28px; display: grid; place-items: center; background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.2); color: var(--akzent); }
.es-aktionen { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.es-aktionen form { margin: 0; }
.es-seite .es-sprachknopf { padding: 8px 12px; font: 700 13px/1 var(--es-schrift); border-radius: 8px; border: 1.5px solid var(--es-linie); background: var(--es-flaeche); color: var(--es-ink2); cursor: pointer; }
.es-seite .es-sprachknopf:hover { border-color: var(--akzent); color: var(--akzent); }
.es-warenkorb span { font-size: 12px; }
@media (max-width: 1100px) {
.es-kopf-zeile { flex-wrap: wrap; height: auto; padding-top: 12px; padding-bottom: 6px; gap: 10px 20px; }
.es-navi { order: 3; flex-basis: 100%; overflow-x: auto; }
.es-seite .es-punkt > a, .es-seite .es-menue-knopf { padding: 10px 12px; }
.es-menue-breit { min-width: 0; }
.es-punkt:not(.zu):hover >.es-menue-breit, .es-punkt.offen > .es-menue-breit, .es-punkt:has(.es-menue :focus) > .es-menue-breit { grid-template-columns: 1fr 1fr; min-width: 480px; }
}
/* ---------- Inhalt der Unterseiten ---------- */
.es-inhalt { min-height: 50vh; }
/* ---------- Startseite: Startflaeche ---------- */
.es-start { color: var(--es-ink); font-family: var(--es-schrift); line-height: 1.6; }
.es-start h1, .es-start h2, .es-start h3, .es-start p { margin: 0; font-family: var(--es-schrift); text-transform: none; }
.es-hero { position: relative; padding: 96px 0 40px; text-align: center; overflow: hidden; }
.es-hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
background-image: linear-gradient(var(--es-linie) 1px, transparent 1px), linear-gradient(90deg, var(--es-linie) 1px, transparent 1px);
background-size: 58px 58px;
-webkit-mask-image: radial-gradient(ellipse 72% 52% at 50% 0%, #000 30%, transparent 100%);
mask-image: radial-gradient(ellipse 72% 52% at 50% 0%, #000 30%, transparent 100%); }
.es-hero > * { position: relative; z-index: 1; }
.es-pill { display: inline-flex; gap: 9px; align-items: center; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--es-linie); background: var(--es-flaeche); color: var(--es-ink2); font-size: 13px; font-weight: 600; margin-bottom: 26px; }
.es-punkt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); }
.es-start .es-hero h1 { font-size: clamp(38px, 6vw, 68px); line-height: 1.06; font-weight: 900; letter-spacing: -1.6px; margin-bottom: 22px; color: var(--es-ink); }
.es-hero .es-grad { color: var(--akzent); }
.es-start .es-lead { font-size: clamp(17px, 2.1vw, 21px); color: var(--es-mut); max-width: 680px; margin: 0 auto 36px; }
.es-hero-knoepfe { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.es-trust { margin-top: 40px; color: var(--es-mut); font-size: 13.5px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; }
.es-trust span { display: flex; align-items: center; gap: 7px; }
.es-trust b { color: var(--akzent); font-weight: 800; }
/* ---------- Startseite: Programmfenster ---------- */
.es-seite .es-stage { margin: 56px auto 0; max-width: 1000px; }
.es-term { border: 1px solid #0e0f14; border-radius: 12px; overflow: hidden; background: #12131a; box-shadow: 0 26px 60px rgba(37,37,37,.24); text-align: left; }
.es-winbar { display: flex; align-items: center; justify-content: space-between; height: 40px; padding-left: 14px; background: #12131a; border-bottom: 1px solid #24262f; }
.es-wintitle { display: flex; align-items: center; gap: 9px; color: #e8eaf2; font-size: 13px; font-weight: 600; }
.es-wintitle img { width: 18px; height: 18px; border-radius: 4px; }
.es-winrechts { display: flex; align-items: center; height: 100%; }
.es-winmenu { display: flex; gap: 16px; color: #969cb2; font-size: 12.5px; padding-right: 14px; }
.es-winctrls { display: flex; height: 100%; }
.es-winctrls b { width: 42px; display: grid; place-items: center; color: #969cb2; font-size: 12px; font-weight: 400; }
.es-knx-tools { display: flex; align-items: center; gap: 14px; padding: 11px 14px; background: #12131a; border-bottom: 1px solid #24262f; flex-wrap: wrap; }
.es-knx-scan { background: #78b038; color: #fff; font-weight: 700; border-radius: 8px; padding: 8px 20px; font-size: 13px; }
.es-knx-live { border: 1px solid #3a3d4a; color: #c4c8d4; border-radius: 8px; padding: 7px 16px; font-size: 13px; }
.es-knx-fld { display: flex; align-items: center; gap: 8px; color: #969cb2; font-size: 12.5px; }
.es-knx-num { background: #1c1e28; border: 1px solid #3a3d4a; border-radius: 6px; padding: 4px 10px; color: #e8eaf2; min-width: 34px; text-align: center; }
.es-knx-combo { background: #1c1e28; border: 1px solid #3a3d4a; border-radius: 6px; padding: 5px 12px; color: #e8eaf2; display: flex; align-items: center; gap: 22px; }
.es-knx-combo .arw { color: #969cb2; }
.es-knx-tblwrap { overflow-x: auto; background: #1c1e28; }
table.es-knx-tbl { width: 100%; min-width: 720px; border-collapse: collapse; font-size: 12px; margin: 0; }
.es-knx-tbl th { text-align: left; color: #969cb2; font-weight: 600; padding: 9px 12px; background: #23252f; border: 0; border-bottom: 1px solid #12131a; white-space: nowrap; font-size: 11px; }
.es-knx-tbl td { padding: 8px 12px; color: #d4d7e0; border: 0; border-bottom: 1px solid #23252f; white-space: nowrap; font-family: "Cascadia Code", Consolas, monospace; font-size: 11.5px; background: transparent; }
.es-knx-tbl .nm { font-family: var(--es-schrift); }
.es-rolle { display: inline-block; padding: 2px 9px; border-radius: 11px; font-size: 10.5px; font-weight: 700; margin-right: 5px; }
.es-rolle.router { color: #8fce4f; background: rgba(120,176,56,.18); }
.es-rolle.iface { color: #7fb0c6; background: rgba(91,127,149,.20); }
.es-knx-status { display: flex; justify-content: space-between; gap: 10px; padding: 7px 14px; background: #12131a; border-top: 1px solid #24262f; color: #7f8598; font-size: 11px; }
.es-cap { text-align: center; color: var(--es-mut); font-size: 14px; margin-top: 18px !important; }
/* ---------- Startseite: Abschnitte ---------- */
.es-sec { padding: 84px 0; }
.es-sec.es-alt { background: var(--es-grund2); border-top: 1px solid var(--es-linie); border-bottom: 1px solid var(--es-linie); }
.es-sec-kopf { text-align: center; max-width: 720px; margin: 0 auto 52px; }
.es-eyebrow { color: var(--akzent); font-weight: 800; letter-spacing: 2px; font-size: 13px; text-transform: uppercase; }
.es-start h2 { font-size: clamp(28px, 4vw, 44px); line-height: 1.15; font-weight: 900; letter-spacing: -1px; margin: 12px 0 14px; color: var(--es-ink); }
.es-sec-kopf p, .es-band p { color: var(--es-mut); font-size: 17px; }
.es-band p { font-size: 16px; margin-bottom: 18px; }
.es-g4 { display: grid; gap: 22px; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 940px) { .es-g4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .es-g4 { grid-template-columns: 1fr; } }
.es-vcard { padding: 26px; border-radius: var(--es-rund); border: 1px solid var(--es-linie); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); transition: transform .2s, box-shadow .2s, border-color .2s; }
.es-vcard:hover { transform: translateY(-4px); box-shadow: var(--es-schatten); }
.es-vic { width: 44px; height: 44px; border-radius: 11px; display: grid; place-items: center; margin-bottom: 16px; background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.2); }
.es-vic svg { width: 22px; height: 22px; stroke: var(--akzent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.es-start .es-vcard h3 { font-size: 17px; margin-bottom: 7px; color: var(--es-ink); font-weight: 700; }
.es-vcard p { color: var(--es-mut); font-size: 14.5px; }
/* Werkzeugkarten - 1:1 nach eisbaer-software.de ('.tool', '.a-*', '.badge', '.tool-dl'). Die Farbe
je Werkzeug steckt in --c/--c-soft; Balken oben, Aufzaehlungspunkte und Knopf sind immer CI-Blau,
genau wie dort. */
.es-start .a-orange { --c: #e95b0c; --c-soft: rgba(233,91,12,.10); }
.es-start .a-blue { --c: #5b7f95; --c-soft: rgba(91,127,149,.12); }
.es-start .a-green { --c: #78b038; --c-soft: rgba(120,176,56,.12); }
.es-start .a-slate { --c: #42454a; --c-soft: rgba(66,69,74,.08); }
.es-start .a-navy { --c: #1e2a33; --c-soft: rgba(30,42,51,.08); }
.es-start .a-terracotta { --c: #9c3b2e; --c-soft: rgba(156,59,46,.10); }
.es-toolgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; }
@media (max-width: 820px) { .es-toolgrid { grid-template-columns: 1fr; } }
.es-tool { display: flex; flex-direction: column; padding: 34px; border-radius: 20px; border: 1px solid var(--es-linie); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s, border-color .2s; }
.es-tool::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: #5b7f95; }
.es-tool:hover { transform: translateY(-5px); box-shadow: var(--es-schatten); border-color: rgba(91,127,149,.34); }
.es-tool-kopf { margin-bottom: 6px; }
.es-tool-text { font-size: 26px; font-weight: 900; letter-spacing: -.5px; color: var(--es-ink); margin-bottom: 14px; line-height: 1.2; }
.es-tool-text .es-ink { color: var(--es-ink); }
.es-tool-text .es-c { color: var(--c); }
.es-tool-wortmarke { height: 38px; width: auto; max-width: 70%; display: block; margin-bottom: 14px; }
.es-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: var(--c-soft, var(--akzent-schwach)); color: var(--c, var(--akzent)); border: 1px solid var(--c-soft, var(--akzent-schwach)); }
.es-start .es-tool-desc { color: var(--es-ink2); font-size: 16px; margin: 14px 0 18px; }
.es-start ul.es-tool-punkte { list-style: none; display: flex; flex-direction: column; gap: 9px; margin: 0 0 24px; padding: 0; }
.es-start .es-tool-punkte li { color: var(--es-ink2); font-size: 14.5px; padding-left: 24px; position: relative; margin: 0; line-height: 1.6; }
.es-start .es-tool-punkte li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: #5b7f95; }
.es-tool-aktionen { margin-top: auto; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.es-seite .es-tool-dl { color: var(--es-mut) !important; font-size: 13.5px; font-weight: 700; display: inline-flex; align-items: center; gap: 6px; text-decoration: none !important; }
.es-seite .es-tool-dl:hover { color: var(--akzent) !important; }
.es-tool-dl svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.es-chips { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 900px; margin: 0 auto; }
.es-seite .es-chip { display: inline-flex; align-items: center; padding: 11px 18px; border-radius: 12px; border: 1px solid var(--es-linie); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); font-size: 15px; font-weight: 600; color: var(--es-ink2) !important; text-decoration: none !important; transition: transform .15s, border-color .2s, color .2s; }
.es-seite a.es-chip:hover { transform: translateY(-2px); border-color: rgba(91,127,149,.34); color: var(--akzent) !important; }
.es-band { display: grid; grid-template-columns: 1.2fr 1fr; gap: 26px; align-items: center; }
@media (max-width: 820px) { .es-band { grid-template-columns: 1fr; } }
.es-ccard { padding: 30px; border-radius: var(--es-rund); border: 1px solid var(--es-linie); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); }
.es-ccard p { color: var(--es-ink2); font-size: 15px; margin-bottom: 18px; }
.es-seite .es-ccard a:not(.es-knopf) { color: var(--akzent-dunkel) !important; font-weight: 700; }
.es-kurs-titel { color: var(--es-mut); font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.es-kurs-datum { font-size: 28px; font-weight: 900; letter-spacing: -.5px; color: var(--es-ink); }
/* ---------- Fuss ---------- */
.es-fuss { border-top: 1px solid var(--es-linie); background: var(--es-grund2); color: var(--es-mut); font: 14px/1.6 var(--es-schrift); padding-top: 48px; }
.es-fuss-raster { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 32px; }
@media (max-width: 900px) { .es-fuss-raster { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .es-fuss-raster { grid-template-columns: 1fr; } }
.es-fuss p { margin: 10px 0 0; color: var(--es-mut); }
.es-fuss-kontakt { font-size: 13px; }
.es-fuss-titel { color: var(--es-ink); font-weight: 800; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase; margin-bottom: 10px; }
.es-fuss-spalte { display: flex; flex-direction: column; gap: 8px; }
.es-seite .es-fuss a:not(.es-knopf) { color: var(--es-ink2) !important; font-weight: 600; text-decoration: none !important; }
.es-seite .es-fuss a:not(.es-knopf):hover { color: var(--akzent) !important; }
.es-suche { display: flex; gap: 8px; margin-top: 16px; max-width: 360px; }
.es-seite .es-suche input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 1.5px solid var(--es-linie); border-radius: 10px; background: var(--es-flaeche); font: 14px var(--es-schrift); color: var(--es-ink); }
.es-suche input:focus { outline: none; border-color: var(--akzent); }
.es-fuss-unten { margin-top: 36px; padding: 18px 24px 26px; border-top: 1px solid var(--es-linie); font-size: 12.5px; }
/* ---------- Anmeldedialog der eigenstaendigen Seiten (layout/es/_anmelden.html.twig) ---------- */
.es-dialog { width: min(420px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten); color: var(--es-ink); font-family: var(--es-schrift); }
.es-dialog::backdrop { background: rgba(20,24,28,.45); }
.es-dialog-kopf { display: flex; align-items: center; justify-content: space-between; padding: 18px 22px; border-bottom: 1px solid var(--es-linie); }
.es-dialog-titel { font-size: 18px; font-weight: 800; }
.es-dialog-zu { border: 0; background: none; font-size: 16px; color: var(--es-mut); cursor: pointer; padding: 4px 8px; }
.es-dialog-form { display: flex; flex-direction: column; gap: 14px; padding: 22px; }
.es-dialog-form label { display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; font-weight: 600; color: var(--es-ink2); }
.es-dialog-form input { height: 42px; padding: 0 12px; border: 1.5px solid var(--es-linie); border-radius: 10px; font: 15px var(--es-schrift); color: var(--es-ink); }
.es-dialog-form input:focus { outline: none; border-color: var(--akzent); }
.es-dialog-form .es-knopf { justify-content: center; }
.es-dialog-fuss { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.es-seite .es-dialog-fuss a { color: var(--akzent-dunkel) !important; font-weight: 600; text-decoration: none !important; }
.es-dialog-hinweis { margin: 0; color: var(--es-mut); font-size: 14px; }
.es-dialog-meldung { padding: 10px 12px; border-radius: 10px; font-size: 14px; }
.es-dialog-meldung.ok { background: rgba(120,176,56,.12); color: #3f6b16; }
.es-dialog-meldung.fehler { background: rgba(156,59,46,.10); color: #8a2f23; }
/* =================================================================================================
SHOP im Redesign (2026-10-06) - Vorlagen unter templates/shop/es/
Auftrag des Betreibers: "den Shop aufs neue Design umstellen ... gleich alles angehen".
Die Shop-Seiten sind im Redesign EIGENSTAENDIG (kein Theme-CSS, kein Bootstrap, kein jQuery) -
siehe layout/es/rahmen.html.twig. Alles hier ist deshalb auf '.es-shop' begrenzt und braucht
kein '!important' gegen das Theme. Kategoriebilder bleiben vorerst die bisherigen Kacheln
(Festlegung des Betreibers, 2026-10-06).
================================================================================================= */
.es-shop { color: var(--es-ink); font: 15px/1.6 var(--es-schrift); }
.es-shop *, .es-shop *::before, .es-shop *::after { box-sizing: border-box; }
.es-shop h1, .es-shop h2, .es-shop h3, .es-shop p { font-family: var(--es-schrift); text-transform: none; }
.es-shop a { color: var(--akzent-dunkel); text-decoration: none; }
.es-shop a:hover { color: var(--akzent); }
.es-shop img { max-width: 100%; height: auto; }
/* ---------- Seitenkopf + Brotkrume ---------- */
.es-shop-kopf { background: var(--es-grund2); border-bottom: 1px solid var(--es-linie); padding: 20px 0 18px; position: relative; overflow: hidden; }
.es-shop-kopf::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
background-image: linear-gradient(var(--es-linie) 1px, transparent 1px), linear-gradient(90deg, var(--es-linie) 1px, transparent 1px);
background-size: 58px 58px; -webkit-mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 20%, transparent 100%); mask-image: radial-gradient(ellipse 60% 90% at 85% 0%, #000 20%, transparent 100%); }
.es-shop-kopf > .es-wrap { position: relative; z-index: 1; }
.es-shop-krume { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13.5px; color: var(--es-mut); margin-bottom: 6px; }
.es-shop-krume a { color: var(--es-mut); font-weight: 600; }
.es-shop-krume a:hover { color: var(--akzent); }
.es-shop-krume > span { color: #bcbcbc; }
.es-shop-krume .es-shop-krume-hier { color: var(--es-ink2); }
.es-shop-kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.es-shop-kopf h1 { margin: 0; font-size: clamp(24px, 3vw, 32px); line-height: 1.15; font-weight: 900; letter-spacing: -.6px; color: var(--es-ink); }
.es-shop-lead { margin-top: 6px; max-width: 760px; color: var(--es-mut); font-size: 15.5px; }
.es-shop-lead p { margin: 0 0 8px; }
/* ---------- Kategorien-Navigation (_navi.html.twig) ----------
Ersetzt die Tastenleiste (vom Betreiber zweimal abgelehnt, 2026-10-06): eine ruhige Liste links
mit Icon je Kategorie, wie die Seitennavigation einer Dokumentation. */
.es-shop-mit-navi { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 36px; align-items: start; }
@media (max-width: 900px) { .es-shop-mit-navi { grid-template-columns: 1fr; gap: 20px; } }
.es-shop-navi { position: sticky; top: 90px; border: 1px solid var(--es-linie); border-radius: var(--es-rund); background: var(--es-flaeche); padding: 10px; }
@media (max-width: 900px) { .es-shop-navi { position: static; } }
.es-shop-navi summary { list-style: none; cursor: default; padding: 6px 10px 10px; font: 800 11.5px/1.4 var(--es-schrift); letter-spacing: 1.6px; text-transform: uppercase; color: var(--akzent); }
.es-shop-navi summary::-webkit-details-marker { display: none; }
@media (max-width: 900px) { .es-shop-navi summary { cursor: pointer; } .es-shop-navi summary::after { content: " ▾"; } }
.es-shop-navi nav { display: flex; flex-direction: column; gap: 1px; }
.es-shop .es-shop-navi-punkt { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--es-ink2); font-size: 14px; font-weight: 500; line-height: 1.3; }
.es-shop .es-shop-navi-punkt .es-shop-icon { flex: 0 0 18px; color: var(--es-mut); }
.es-shop .es-shop-navi-punkt:hover { background: var(--akzent-schwach); color: var(--es-ink); }
.es-shop .es-shop-navi-punkt:hover .es-shop-icon { color: var(--akzent); }
.es-shop .es-shop-navi-punkt.offen { color: var(--es-ink); font-weight: 700; }
.es-shop .es-shop-navi-punkt.offen .es-shop-icon { color: var(--akzent); }
.es-shop .es-shop-navi-punkt.aktiv { background: var(--akzent-schwach); color: var(--akzent-dunkel); font-weight: 700; box-shadow: inset 3px 0 0 var(--akzent); }
.es-shop .es-shop-navi-punkt.aktiv .es-shop-icon { color: var(--akzent); }
.es-shop-navi-unter { display: flex; flex-direction: column; gap: 1px; margin: 2px 0 6px 19px; padding-left: 10px; border-left: 1px solid var(--es-linie); }
.es-shop .es-shop-navi-punkt.klein { padding: 5px 10px; font-size: 13.5px; }
.es-shop-haupt { min-width: 0; }
.es-shop-block + .es-shop-block { margin-top: 40px; }
/* ---------- Kategoriekarten mit Icon (_kategorie-karte.html.twig) ----------
Im Stil der "Warum"-Karten der Startseite: Icon im getoenten Quadrat. */
.es-shop-kats { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.es-shop-haupt .es-shop-kats { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.es-shop .es-shop-kat { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--es-linie); border-radius: var(--es-rund); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); color: var(--es-ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.es-shop .es-shop-kat:hover { transform: translateY(-3px); box-shadow: var(--es-schatten); border-color: rgba(91,127,149,.34); color: var(--es-ink); }
.es-shop-kat-icon { flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px; display: grid; place-items: center; background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.2); color: var(--akzent); }
.es-shop-kat-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.es-shop-kat-name { font-weight: 700; font-size: 15.5px; line-height: 1.3; }
.es-shop-kat-unter { font-size: 12.5px; color: var(--es-mut); line-height: 1.45; }
.es-shop .es-shop-kat .es-shop-pfeil { opacity: .5; transition: opacity .2s, transform .2s; }
.es-shop .es-shop-kat:hover .es-shop-pfeil { opacity: 1; transform: translateX(3px); }
/* Filter-Tasten der Bestellverwaltung (Form wie "Registrieren"/"Anmelden") */
.es-shop-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.es-shop-chips.links { margin-bottom: 16px; }
.es-shop .es-shop-chip { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; border: 1.5px solid var(--es-linie); background: var(--es-flaeche); color: var(--es-ink); font: 700 14px/1.2 var(--es-schrift); white-space: nowrap; transition: background .2s, color .2s, border-color .2s, box-shadow .2s; }
.es-shop .es-shop-chip:hover { border-color: var(--akzent); color: var(--akzent); }
.es-shop .es-shop-chip.aktiv { background: var(--akzent); border-color: var(--akzent); color: #fff; box-shadow: 0 4px 14px rgba(37,37,37,.12); }
.es-shop .es-shop-chip.aktiv:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); color: #fff; }
.es-shop .es-shop-chip.klein { padding: 6px 12px; font-size: 13px; }
/* ---------- Abschnitte ---------- */
.es-shop-sek { padding: 44px 0; }
.es-shop-sek.oben { padding-top: 32px; }
.es-shop-sek.alt { background: var(--es-grund2); border-top: 1px solid var(--es-linie); border-bottom: 1px solid var(--es-linie); }
.es-shop-sek-kopf { display: flex; align-items: baseline; gap: 12px; margin-bottom: 20px; }
.es-shop-anzahl { font-size: 12.5px; font-weight: 700; color: var(--es-mut); background: var(--es-grund2); border: 1px solid var(--es-linie); border-radius: 999px; padding: 1px 9px; }
.es-shop-leer { color: var(--es-mut); margin: 0 0 14px; }
.es-shop-mut { color: var(--es-mut); font-weight: 400; }
.es-shop-nowrap { white-space: nowrap; }
/* ---------- Artikelkarten ---------- */
.es-shop-raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.es-shop .es-shop-artikel { position: relative; display: flex; flex-direction: column; border: 1px solid var(--es-linie); border-radius: var(--es-rund); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); overflow: hidden; color: var(--es-ink); transition: transform .2s, box-shadow .2s, border-color .2s; }
.es-shop .es-shop-artikel::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--akzent); opacity: 0; transition: opacity .2s; }
.es-shop .es-shop-artikel:hover { transform: translateY(-4px); box-shadow: var(--es-schatten); border-color: rgba(91,127,149,.34); color: var(--es-ink); }
.es-shop .es-shop-artikel:hover::before { opacity: 1; }
.es-shop-artikel-bild { display: grid; place-items: center; aspect-ratio: 4 / 3; padding: 16px; background: var(--es-bildgrund); border-bottom: 1px solid var(--es-linie); }
.es-shop-artikel-bild img { max-height: 100%; width: auto; object-fit: contain; }
.es-shop-artikel-text { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px 18px; flex: 1; }
.es-shop-artikel-name { font-weight: 700; font-size: 15.5px; line-height: 1.35; }
.es-shop-artikel-teaser { color: var(--es-mut); font-size: 13.5px; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.es-shop-artikel-fuss { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 6px; }
.es-shop-pfeil { color: var(--akzent); font-weight: 800; }
/* ---------- Preise ---------- */
.es-shop-preis { font-weight: 800; font-size: 17px; color: var(--es-ink); white-space: nowrap; }
.es-shop-preis.gross { font-size: 32px; font-weight: 900; letter-spacing: -.5px; }
.es-shop-b2b { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--akzent-dunkel); background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.2); border-radius: 8px; padding: 4px 9px; line-height: 1.4; }
.es-shop-b2b a { font-weight: 800; }
/* ---------- Artikelseite ---------- */
.es-shop-produkt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: start; }
@media (max-width: 860px) { .es-shop-produkt { grid-template-columns: 1fr; } }
.es-shop-galerie-haupt { display: grid; place-items: center; aspect-ratio: 1 / 1; padding: 24px; border: 1px solid var(--es-linie); border-radius: var(--es-rund); background: var(--es-bildgrund); box-shadow: var(--es-schatten-k); }
.es-shop-galerie-reihe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.es-shop-daumen { width: 72px; height: 72px; padding: 6px; border: 1.5px solid var(--es-linie); border-radius: 10px; background: var(--es-bildgrund); cursor: pointer; }
.es-shop-daumen.aktiv, .es-shop-daumen:hover { border-color: var(--akzent); }
.es-shop-kaufbox { padding: 28px; border: 1px solid var(--es-linie); border-radius: 20px; background: var(--es-flaeche); box-shadow: var(--es-schatten-k); position: relative; overflow: hidden; }
.es-shop-kaufbox::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--akzent); }
.es-shop-bestellnr { margin: 0 0 10px; font-size: 13px; color: var(--es-mut); }
.es-shop-kaufbox-preis { margin-bottom: 4px; }
.es-shop-steuer { margin: 0 0 16px; font-size: 13.5px; color: var(--es-mut); }
.es-shop-teaser { color: var(--es-ink2); font-size: 15.5px; margin-bottom: 22px; }
.es-shop-teaser p { margin: 0 0 8px; }
.es-shop .es-shop-inkorb { width: 100%; justify-content: center; }
.es-shop-meldung { margin-bottom: 20px; padding: 12px 16px; border-radius: 12px; font-size: 14.5px; border: 1px solid transparent; }
.es-shop-meldung.ok { background: rgba(120,176,56,.12); border-color: rgba(120,176,56,.28); color: #3f6b16; }
.es-shop-meldung.ok a { color: #3f6b16; font-weight: 800; }
.es-shop-meldung.fehler { background: rgba(156,59,46,.08); border-color: rgba(156,59,46,.25); color: #8a2f23; }
/* Reiter: ohne JavaScript stehen alle Inhalte untereinander (mit Ueberschrift), mit JS als Reiter. */
.es-shop-reiter { display: none; }
.es-shop-js .es-shop-reiter { display: flex; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid var(--es-linie); margin-bottom: 24px; }
.es-shop-reiter-knopf { padding: 11px 18px; border: 0; border-bottom: 2.5px solid transparent; margin-bottom: -1px; background: none; font: 700 14.5px/1 var(--es-schrift); color: var(--es-mut); cursor: pointer; }
.es-shop-reiter-knopf:hover { color: var(--es-ink); }
.es-shop-reiter-knopf.aktiv { color: var(--akzent); border-bottom-color: var(--akzent); }
.es-shop-panel { margin-bottom: 28px; }
.es-shop-panel-titel { font-size: 20px; font-weight: 800; margin: 0 0 12px; }
.es-shop-js .es-shop-panel-titel { display: none; }
.es-shop-text { max-width: 900px; color: var(--es-ink2); font-size: 15.5px; }
.es-shop-text ul { padding-left: 20px; }
.es-shop-text li { margin-bottom: 5px; }
.es-shop-text table { border-collapse: collapse; width: 100%; margin: 10px 0; font-size: 14px; }
.es-shop-text td, .es-shop-text th { border-bottom: 1px solid var(--es-linie); padding: 7px 10px; text-align: left; vertical-align: top; }
.es-shop-datenblatt a { font-weight: 700; }
/* ---------- Karten, Tabellen, Formulare (Warenkorb, Kasse, Verwaltung) ---------- */
.es-shop-karte { background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k); padding: 24px 26px; margin-bottom: 22px; }
.es-shop-karte p { margin: 0 0 10px; }
.es-shop-karte-titel { font-size: 18px; font-weight: 800; margin: 0 0 16px; color: var(--es-ink); }
.es-shop-schmal { max-width: 640px; }
.es-shop-stapel > * { margin-bottom: 22px; }
.es-shop-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.es-shop-zwei > .es-shop-karte { margin-bottom: 0; }
@media (max-width: 760px) { .es-shop-zwei { grid-template-columns: 1fr; } }
.es-shop-tabelle-wrap { overflow-x: auto; }
table.es-shop-tabelle { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.es-shop-tabelle th { text-align: left; font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--es-mut); padding: 10px 12px; border-bottom: 1px solid var(--es-linie); background: var(--es-grund2); }
.es-shop-tabelle td { padding: 12px; border-bottom: 1px solid var(--es-linie); vertical-align: middle; }
.es-shop-tabelle tfoot th { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--es-ink2); background: none; border-bottom: 0; padding: 7px 12px; }
.es-shop-tabelle tfoot td { border-bottom: 0; padding: 7px 12px; }
.es-shop-tabelle tfoot tr.summe th, .es-shop-tabelle tfoot tr.summe td { font-size: 17px; font-weight: 900; color: var(--es-ink); border-top: 2px solid var(--es-ink); padding-top: 12px; }
.es-shop-tabelle .r { text-align: right; }
.es-shop-tabelle .m { text-align: center; }
.es-shop-tabelle.klein { font-size: 13px; }
.es-shop-tabelle.klein td { padding: 4px 0; border-bottom: 1px dashed var(--es-linie); }
.es-shop-korb-bild { width: 84px; }
.es-shop-korb-bild img { width: 64px; height: 64px; object-fit: contain; border: 1px solid var(--es-linie); border-radius: 10px; padding: 4px; background: var(--es-bildgrund); }
.es-shop-korb-name > a { font-weight: 700; color: var(--es-ink); }
.es-shop-menge { width: 72px; height: 38px; text-align: center; border: 1.5px solid var(--es-linie); border-radius: 10px; font: 15px var(--es-schrift); }
.es-shop .es-shop-entfernen { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--es-mut); font-size: 20px; line-height: 1; }
.es-shop .es-shop-entfernen:hover { background: rgba(156,59,46,.1); color: #9c3b2e; }
.es-shop-leiste-unten { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 20px; }
.es-shop-zurueck { font-weight: 700; }
.es-shop-knoepfe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.es-shop-hinweis { margin-top: 20px; padding: 18px 20px; background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.2); border-radius: 12px; }
.es-shop-hinweis p { margin: 0 0 12px; }
.es-shop .es-knopf.klein { padding: 6px 12px; font-size: 13px; }
.es-shop .es-knopf { color: inherit; }
.es-shop .es-knopf-voll, .es-shop .es-knopf-voll:hover { color: #fff; }
.es-shop .es-knopf-leer { color: var(--es-ink); }
.es-shop-kasse-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px; }
.es-shop-kasse-raster > .es-shop-karte { margin-bottom: 0; }
@media (max-width: 860px) { .es-shop-kasse-raster { grid-template-columns: 1fr; } }
.es-shop-felder { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
@media (max-width: 520px) { .es-shop-felder { grid-template-columns: 1fr; } }
.es-shop-feld { display: flex; flex-direction: column; gap: 5px; font-size: 13px; font-weight: 600; color: var(--es-ink2); }
.es-shop-feld.breit { grid-column: 1 / -1; }
.es-shop-feld.klein { margin-top: 8px; max-width: 320px; font-size: 12.5px; }
.es-shop-feld abbr { color: #9c3b2e; text-decoration: none; }
.es-shop input[type=text], .es-shop input[type=email], .es-shop select { height: 42px; padding: 0 12px; border: 1.5px solid var(--es-linie); border-radius: 10px; background: var(--es-flaeche); font: 15px var(--es-schrift); color: var(--es-ink); width: 100%; }
.es-shop input[type=text]:focus, .es-shop input[type=number]:focus, .es-shop select:focus { outline: none; border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-schwach); }
.es-shop-wahl { display: flex; flex-direction: column; gap: 8px; }
.es-shop-option { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1.5px solid var(--es-linie); border-radius: 12px; cursor: pointer; transition: border-color .2s, background .2s; }
.es-shop-option:hover { border-color: rgba(91,127,149,.45); }
.es-shop-option:has(input:checked) { border-color: var(--akzent); background: var(--akzent-schwach); }
.es-shop-option input { accent-color: var(--akzent); width: 18px; height: 18px; margin: 0; }
.es-shop-option img { height: 22px; width: auto; }
.es-shop-option strong { margin-left: auto; white-space: nowrap; }
.es-shop-lizenzhinweis { margin: 12px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--akzent-schwach); color: var(--akzent-dunkel); font-size: 14px; }
.es-shop-haken { display: flex; gap: 10px; align-items: flex-start; margin-top: 16px; font-size: 14px; color: var(--es-ink2); }
.es-shop-haken input { accent-color: var(--akzent); width: 18px; height: 18px; margin: 2px 0 0; flex: 0 0 18px; }
.es-shop-haken p { margin: 0; display: inline; }
.es-shop-bestellen { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--es-linie); }
.es-shop-bestellen-summe { display: flex; flex-direction: column; }
.es-shop-bestellen-summe span { font-size: 13px; color: var(--es-mut); font-weight: 600; }
.es-shop-bestellen-summe strong { font-size: 26px; font-weight: 900; letter-spacing: -.5px; }
/* Verwaltung */
.es-shop-status { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 700; background: var(--es-grund2); color: var(--es-mut); border: 1px solid var(--es-linie); }
.es-shop-status.ok { background: rgba(120,176,56,.12); color: #3f6b16; border-color: rgba(120,176,56,.25); }
.es-shop-status.offen { background: rgba(156,59,46,.08); color: #8a2f23; border-color: rgba(156,59,46,.22); }
.es-shop-statuszeile { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; }
.es-shop-inline { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.es-shop-codes { margin: 8px 0 12px; padding: 12px 14px; background: var(--es-grund2); border: 1px solid var(--es-linie); border-radius: 10px; font: 13.5px/1.5 "Cascadia Code", Consolas, monospace; white-space: pre-wrap; }
.es-shop-warnung { color: #8a2f23; font-size: 14px; }
.es-shop-seiten { display: flex; flex-wrap: wrap; gap: 6px; }
.es-shop-info { background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); padding: 24px 28px; color: var(--es-ink2); font-size: 14.5px; }
.es-shop-info h1, .es-shop-info h2, .es-shop-info h3 { font-size: 18px; font-weight: 800; color: var(--es-ink); margin: 0 0 10px; }
.es-shop-info ul { padding-left: 20px; margin: 6px 0 0; }
.es-unsichtbar { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* =================================================================================================
NEWS-KACHEL der Startseite (2026-10-06) - Kartenform wie die Werkzeugkarten ('.es-tool'),
Meldungen laufen durch, unten der Weg zu allen News samt Archiv.
================================================================================================= */
.es-news-sek { padding-top: 0; }
.es-news { position: relative; overflow: hidden; padding: 30px 34px; border-radius: 20px; border: 1px solid var(--es-linie); background: var(--es-flaeche, #fff); box-shadow: var(--es-schatten-k); }
.es-news::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--akzent); }
.es-news-kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.es-news-steuer { display: flex; align-items: center; gap: 10px; }
.es-news-pfeil { width: 32px; height: 32px; border-radius: 9px; border: 1.5px solid var(--es-linie); background: var(--es-flaeche, #fff); color: var(--es-ink2); font: 700 15px/1 var(--es-schrift); cursor: pointer; }
.es-news-pfeil:hover { border-color: var(--akzent); color: var(--akzent); }
.es-news-punkte { display: flex; gap: 6px; }
.es-news-punkt { width: 9px; height: 9px; padding: 0; border-radius: 50%; border: 0; background: var(--es-linie); cursor: pointer; transition: background .2s, transform .2s; }
.es-news-punkt.aktiv { background: var(--akzent); transform: scale(1.25); }
.es-news-buehne { display: grid; }
.es-seite .es-news-meldung { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; opacity: 0; visibility: hidden; transition: opacity .45s; color: var(--es-ink) !important; text-decoration: none !important; }
.es-seite .es-news-meldung.aktiv { opacity: 1; visibility: visible; }
.es-news-datum { font-size: 13px; font-weight: 700; color: var(--akzent); letter-spacing: .3px; }
.es-news-titel { font-size: clamp(20px, 2.4vw, 26px); font-weight: 900; letter-spacing: -.4px; line-height: 1.25; }
.es-news-text { color: var(--es-ink2); font-size: 15.5px; line-height: 1.6; max-width: 900px; }
.es-news-weiter { font-size: 14px; font-weight: 700; color: var(--akzent-dunkel); margin-top: 2px; }
.es-seite .es-news-meldung:hover .es-news-titel { color: var(--akzent); }
.es-news-fuss { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--es-linie); }
@media (prefers-reduced-motion: reduce) { .es-seite .es-news-meldung { transition: none; } }
/* ---------- Startseite: Schulungskachel (2026-10-06) - gleiche Kachelform wie die News ---------- */
.es-schulung { position: relative; overflow: hidden; padding: 30px 34px; border-radius: 20px; border: 1px solid var(--es-linie); background: var(--es-flaeche); box-shadow: var(--es-schatten-k); }
.es-schulung::before { content: ""; position: absolute; left: 0; top: 0; height: 4px; width: 100%; background: var(--akzent); }
.es-schulung-kopf { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 22px; }
.es-start .es-schulung-kopf h2 { font-size: clamp(22px, 2.6vw, 30px); font-weight: 900; letter-spacing: -.5px; line-height: 1.2; margin: 6px 0 6px; }
.es-start .es-schulung-kopf p { color: var(--es-mut); font-size: 16px; }
.es-schulung-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.es-schulung-kurs { display: flex; flex-direction: column; gap: 10px; padding: 20px; border: 1px solid var(--es-linie); border-radius: var(--es-rund); background: var(--es-grund2); }
.es-schulung-titelzeile { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.es-start .es-schulung-titelzeile h3 { font-size: 18px; font-weight: 800; line-height: 1.3; color: var(--es-ink); }
.es-schulung-preis { font-weight: 800; color: var(--es-ink); white-space: nowrap; }
.es-schulung-preis small { font-weight: 500; font-size: 12px; color: var(--es-mut); }
.es-schulung-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.es-schulung-chip { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: var(--akzent-schwach); color: var(--akzent-dunkel); }
.es-start .es-schulung-text { color: var(--es-ink2); font-size: 14.5px; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.es-schulung-termine { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.es-schulung-termine li { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 10px; background: var(--es-flaeche); border: 1px solid var(--es-linie); font-size: 14px; }
.es-schulung-datum { font-weight: 800; color: var(--es-ink); white-space: nowrap; }
.es-schulung-ort { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--es-grund2); color: var(--es-ink2); border: 1px solid var(--es-linie); white-space: nowrap; }
.es-schulung-ort.online { background: var(--akzent-schwach); color: var(--akzent-dunkel); border-color: transparent; }
.es-schulung-frei { color: var(--es-mut); font-size: 13px; }
.es-schulung-frei .knapp { color: #b45309; }
.es-schulung-frei .voll { color: #b91c1c; }
.es-seite .es-schulung-buchen { padding: 6px 12px; border-radius: 8px; background: var(--akzent); color: #fff !important; font-weight: 700; font-size: 13px; text-decoration: none !important; white-space: nowrap; }
.es-seite .es-schulung-buchen:hover { background: var(--akzent-dunkel); }
.es-start .es-schulung-leer { color: var(--es-mut); }
html[data-theme="dunkel"] .es-schulung-frei .knapp { color: #f0b46a; }
html[data-theme="dunkel"] .es-schulung-frei .voll { color: #f28b8b; }
@media (max-width: 560px) {
.es-schulung { padding: 24px 20px; }
.es-schulung-raster { grid-template-columns: 1fr; }
.es-schulung-termine li { grid-template-columns: 1fr auto; }
}
/* =================================================================================================
HELL / DUNKEL (2026-10-06) - Auftrag des Betreibers: "Hell Dunkel Modus mit Icon fehlt".
Der Schalter setzt 'data-theme="dunkel"' am (Skript in layout/es/rahmen.html.twig,
Wahl in localStorage 'busbaer_thema', ohne Wahl gilt die Systemeinstellung).
⚠️ 'color-scheme' an :root - sonst zeichnet der Browser Kaestchen, Auswahlfelder und Bildlauf-
leisten weiter hell (Fund vom 2026-09-20, Newsletter-Optik).
⚠️ Produktbilder behalten '--es-bildgrund: #fff' - die Fotos haben selbst weissen Grund.
================================================================================================= */
:root { color-scheme: light; }
html[data-theme="dunkel"] {
color-scheme: dark;
--text: #e8eaed;
--es-ink: #e8eaed;
--es-ink2: #c9ced4;
--es-mut: #a1a9b1;
--es-linie: #2f3a44;
--es-grund: #12171c;
--es-grund2: #161c22;
--es-flaeche: #1a2026;
--es-kopf-grund: rgba(18,23,28,.92);
--akzent-dunkel: #9dbdd0;
--akzent-schwach:rgba(127,163,184,.14);
--es-schatten: 0 14px 38px rgba(0,0,0,.45);
--es-schatten-k: 0 4px 16px rgba(0,0,0,.35);
/* die uebernommenen Werkzeugseiten (eigene :root-Variablen; html[...] schlaegt :root) */
--bg: #12171c; --bg-soft: #161c22; --bg-soft2: #1d242b;
/* ⚠️ '--slate' bleibt: die Werkzeugseiten benutzen es als HINTERGRUND der Tabellenkoepfe (ein
dunkles Band mit heller Schrift) - umgedeutet wurden die Koepfe hell (gemessen 2026-10-06). */
--ink: #e8eaed; --ink-2: #c9ced4; --muted: #a1a9b1; --line: #2f3a44;
--blue-soft: rgba(127,163,184,.16); --slate-soft: rgba(255,255,255,.06);
--shadow: 0 14px 38px rgba(0,0,0,.45); --shadow-sm: 0 4px 16px rgba(0,0,0,.35);
}
html[data-theme="dunkel"] body.es-seite { background: var(--es-grund) !important; color: var(--es-ink); }
html[data-theme="dunkel"] .es-hero::after { opacity: .18; }
html[data-theme="dunkel"] .es-shop-tabelle tfoot tr.summe th, html[data-theme="dunkel"] .es-shop-tabelle tfoot tr.summe td { border-top-color: var(--es-ink); }
html[data-theme="dunkel"] .es-shop-meldung.ok { color: #b5dd8a; } html[data-theme="dunkel"] .es-shop-meldung.ok a { color: #b5dd8a; }
html[data-theme="dunkel"] .es-shop-meldung.fehler, html[data-theme="dunkel"] .es-shop-status.offen, html[data-theme="dunkel"] .es-shop-warnung { color: #f0a497; }
html[data-theme="dunkel"] .es-shop-status.ok { color: #b5dd8a; }
html[data-theme="dunkel"] .es-dialog { background: var(--es-flaeche); color: var(--es-ink); }
html[data-theme="dunkel"] .es-dialog-form input { background: var(--es-grund2); color: var(--es-ink); border-color: var(--es-linie); }
/* Werkzeugseiten: die festen weissen Flaechen ihres eigenen CSS (gezaehlt am 2026-10-06) */
html[data-theme="dunkel"] .es-nativ .es-inhalt :is(.ccard, .info, .card, .vcard, .figure, .faq-item, .cta-box, .tablewrap, .shot-wrap, .lightbox-inner, .pd-list li, .lang-btn, .btn-ghost, .pill, .chip, .tbl-wrap, .bus-fig, .lib-filter, .lic-card, .dsim-sw, .dsim-kpi, .dsim-btn, .dsim-seg button) { background: var(--es-flaeche) !important; color: var(--es-ink); }
/* Der Schalter im Kopf: Sonne im dunklen, Mond im hellen Zustand (zeigt, wohin man schaltet) */
.es-seite .es-themaknopf { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border-radius: 10px; border: 1.5px solid var(--es-linie); background: var(--es-flaeche); color: var(--es-ink2); cursor: pointer; }
.es-seite .es-themaknopf:hover { border-color: var(--akzent); color: var(--akzent); }
.es-themaknopf .es-icon-sonne { display: none; }
html[data-theme="dunkel"] .es-themaknopf .es-icon-sonne { display: inline; }
html[data-theme="dunkel"] .es-themaknopf .es-icon-mond { display: none; }/* Lesbarkeit im Dunkelmodus - gemessen mit muster/Miss-Kontrast-Dunkel.js (2026-10-06).
Die Werkzeugkarten faerben ihren Akzent ueber '--c' je Klasse; Navy/Schiefer/Terrakotta lagen auf
dunklem Grund bei 1,1 bis 2,4:1. Nur '--c' wird umgestellt - das trifft Schrift, Badge und Linien
der Karte, nicht die Flaechen anderer Elemente. */
html[data-theme="dunkel"] .a-navy { --c: #9fb3c2; --c-soft: rgba(159,179,194,.14); }
html[data-theme="dunkel"] .a-slate { --c: #c3c8ce; --c-soft: rgba(195,200,206,.12); }
html[data-theme="dunkel"] .a-terracotta { --c: #e39a8b; --c-soft: rgba(227,154,139,.14); }
html[data-theme="dunkel"] .a-blue { --c: #8fb2c6; --c-soft: rgba(143,178,198,.14); }
/* Werkzeugseiten: '--navy' dient ueberwiegend als Schrift-/Akzentfarbe; die einzige Flaeche mit
heller Schrift darauf (die Schrittnummern '.step .no') bekommt ihren dunklen Ton ausdruecklich. */
html[data-theme="dunkel"] .es-nativ .es-inhalt { --navy: #9fb3c2; }
html[data-theme="dunkel"] .es-nativ .es-inhalt .step .no { background: #2c3e4c !important; }
html[data-theme="dunkel"] .es-nativ .es-inhalt .dec-tbl th small { color: #b3b9c0 !important; }
html[data-theme="dunkel"] .es-nativ .es-inhalt .protochip { color: #5cc6c9 !important; }
/* Akzentblau als SCHRIFT (Ueberschriften-Zeile, Kategorien-Titel, aktiver Reiter): heller */
html[data-theme="dunkel"] :is(.es-eyebrow, .es-shop-navi summary, .es-shop-reiter-knopf.aktiv, .es-menue-titel) { color: #8fb2c6; }
html[data-theme="dunkel"] .es-shop-reiter-knopf.aktiv { border-bottom-color: #8fb2c6; }/* Wortmarken (KNX2GO, ModEye26) sind dunkle Grafiken - im Dunkelmodus Helligkeit umkehren, Farbton
behalten (invert + hue-rotate 180deg). */
html[data-theme="dunkel"] .es-tool-wortmarke { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
/* ==========================================================================================
PRODUKTSEITEN im Redesign (2026-10-06) - Vorlage templates/produkte/es/detail.html.twig
Der Inhalt ist der Areablock des Dokuments (pricingtable, pricingblock, intro, Spalten-Bricks)
mit Theme-Klassen. Das Theme ist hier NICHT geladen; diese Regeln geben den Bausteinen ein
eigenes Aussehen und gelten nur unter '.es-produkt'. Font-Awesome wird fuer diese Seiten
gesondert eingebunden (layout/es/rahmen.html.twig), damit die Haken/Kreuze erscheinen.
⚠️ Kein '/' + '*' in diesem Kommentar - das Bauskript zaehlt es als Kommentaranfang.
========================================================================================== */
.es-produkt { font: 400 15px/1.6 var(--es-schrift); color: var(--es-ink); }
.es-produkt img { max-width: 100%; height: auto; }
.es-produkt .container { max-width: none; width: auto; padding: 0; margin: 0; }
.es-produkt .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.es-produkt .row > [class*="col-"] { box-sizing: border-box; width: 100%; padding: 0 12px; }
.es-produkt .vc_col-sm-12 { width: 100%; }
.es-produkt .clear { clear: both; }
.es-produkt .visible-xs { display: none !important; }
@media (min-width: 768px) {
.es-produkt .row > .col-sm-12 { width: 100%; } .es-produkt .row > .col-sm-9 { width: 75%; }
.es-produkt .row > .col-sm-7 { width: 58.333%; } .es-produkt .row > .col-sm-6 { width: 50%; }
.es-produkt .row > .col-sm-5 { width: 41.667%; } .es-produkt .row > .col-sm-4 { width: 33.333%; }
.es-produkt .row > .col-sm-3 { width: 25%; }
.es-produkt .row > .five-three { width: 60%; } .es-produkt .row > .five-two { width: 40%; }
}
@media (max-width: 767px) {
.es-produkt .hidden-xs { display: none !important; }
.es-produkt .visible-xs { display: block !important; }
}
.es-produkt .pimcore_area_content { margin-bottom: 32px; }
.es-produkt h2, .es-produkt h3 { color: var(--es-ink); font-family: var(--es-schrift); }
.es-produkt a:not(.ts-bt-pricing):not(.cta_pricing) { color: var(--akzent-dunkel); }
/* Einleitungen und Abschnittstitel */
.es-produkt .ts-section-title { color: var(--es-mut) !important; font-size: 17px; line-height: 1.6; max-width: 820px; margin: 0 auto 8px; text-align: center; }
.es-produkt .ts-section-title p:empty, .es-produkt .ts-section-title h2:empty, .es-produkt .ts-section-title p:only-child:empty { display: none; }
.es-produkt .ts-section-title h2 { font: 700 28px/1.25 var(--es-schrift); margin: 0 0 10px; color: var(--es-ink); }
.es-produkt .ts-intro-section { text-align: center; margin: 8px 0 20px; }
/* Preistabelle (Brick pricingtable): Kopfzeile mit Produktkarten, darunter Merkmalszeilen */
.es-produkt .ts-pricingtable-5 table { width: 100%; border-collapse: separate; border-spacing: 16px 0; table-layout: fixed; margin: 0 -16px; width: calc(100% + 32px); }
.es-produkt .ts-pricingtable-5 td { vertical-align: top; padding: 0; }
.es-produkt .ts-pricingtable-5 tr.section-info > td:first-child { width: 26%; }
.es-produkt .ts-pricingtable-5 .ts-pricing-img figure { margin: 0; position: sticky; top: 90px; }
.es-produkt .ts-pricingtable-5 .ts-pricing-img img { border-radius: var(--es-rund); background: var(--es-bildgrund); display: block; margin: 0 auto; }
.es-produkt .ts-pricing-item { background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k); padding: 24px 20px 22px; text-align: center; height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.es-produkt .ts-pricing-item > span:first-child img { width: 96px; height: 96px; object-fit: contain; background: var(--es-bildgrund); border-radius: 12px; padding: 6px; box-sizing: border-box; }
.es-produkt .ts-pricing-item .price-title { font: 700 19px/1.3 var(--es-schrift); margin: 14px 0 12px; }
.es-produkt .ts-pricing-item .desc { font-size: 14px; color: var(--es-mut); margin: 6px 0 18px; flex: 1 1 auto; }
.es-produkt .ts-pricing-item .desc p { margin: 0 0 4px; }
.es-produkt .ts-pricing-item .desc strong { color: var(--es-ink); }
.es-produkt .ts-pricing-item .ts-bt-pricing { align-self: center; }
/* die Preisangaben sind redaktionelles HTML mit festen Farben und 'float' - vereinheitlichen */
.es-produkt .price-unit-vat, .es-produkt .price-unit { color: var(--es-mut); font-size: 14px; line-height: 1.4; }
.es-produkt .price-unit-vat .price-unit-vat { background: var(--akzent-schwach); border-radius: 12px; padding: 12px 10px; }
.es-produkt .price-unit [style*="color"], .es-produkt .price [style*="color"] { color: inherit !important; }
.es-produkt .price-unit [style*="float"] { float: none !important; display: inline !important; }
.es-produkt .price-unit br { display: none; }
.es-produkt .price-unit .unit { display: inline; }
.es-produkt .price-unit .price { font: 700 22px/1.2 var(--es-schrift); color: var(--akzent-dunkel); }
.es-produkt .price-unit > .price:first-child { font-size: 26px; color: var(--es-ink); }
.es-produkt .price-unit > span:not(.price):not(.unit) { display: block; margin-top: 6px; }
/* Merkmalszeilen */
.es-produkt .ts-pricingtable-5 table + table td, .es-produkt .ts-pricingtable-5 .list-feature td { border-bottom: 1px solid var(--es-linie); padding: 9px 4px; font-size: 13.5px; text-align: center; color: var(--es-ink); }
.es-produkt .ts-pricingtable-5 .list-feature td:first-child { text-align: left; color: var(--es-mut); font-weight: 500; }
.es-produkt .ts-pricingtable-5 .list-feature:hover td { background: var(--akzent-schwach); }
.es-produkt .ts-pricingtable-5 td.title-feature { border-bottom: 2px solid var(--akzent) !important; padding: 28px 4px 8px !important; text-align: left !important; font: 700 13px/1.3 var(--es-schrift) !important; letter-spacing: .08em; color: var(--akzent-dunkel) !important; text-transform: uppercase; }
.es-produkt .ts-pricingtable-5 tr.list-feature:empty { display: none; }
.es-produkt .ts-icon-check .fa { color: #3c9b5a; font-size: 16px; }
.es-produkt .ts-icon-close .fa { color: #b8b8b8; font-size: 15px; }
html[data-theme="dunkel"] .es-produkt .ts-icon-check .fa { color: #7fcf95; }
html[data-theme="dunkel"] .es-produkt .ts-icon-close .fa { color: #6c7680; }
/* letzte Zeile der Tabelle: PDF-Knoepfe (pricing-footer) */
.es-produkt .ts-pricingtable-5 .pricing-footer, .es-produkt .ts-pricingtable-5 td.pricing-footer { background: none !important; padding: 18px 4px !important; text-align: center; border: 0 !important; }
/* Merkmale auf dem Telefon (visible-xs in der Karte) */
.es-produkt .section-feature { text-align: left; margin: 0 0 16px; }
.es-produkt .section-feature .title-feature { font: 700 12px/1.3 var(--es-schrift); letter-spacing: .08em; color: var(--akzent-dunkel); margin: 16px 0 6px; padding-bottom: 4px; border-bottom: 2px solid var(--akzent); }
.es-produkt .section-feature ul { list-style: none; margin: 0; padding: 0; }
.es-produkt .section-feature ul:empty { display: none; }
.es-produkt .section-feature li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--es-linie); font-size: 13px; }
.es-produkt .section-feature li label { color: var(--es-mut); font-weight: 500; margin: 0; }
@media (max-width: 767px) {
.es-produkt .ts-pricingtable-5 table { display: block; margin: 0; width: 100%; }
.es-produkt .ts-pricingtable-5 tbody, .es-produkt .ts-pricingtable-5 tr.section-info { display: block; }
.es-produkt .ts-pricingtable-5 tr.section-info > td { display: block; width: auto !important; margin-bottom: 16px; }
.es-produkt .ts-pricingtable-5 .ts-pricing-img { display: none !important; }
}
/* Lizenzkarten (Brick pricingblock) */
.es-produkt .ts-pricing-table-style3 { background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k); padding: 24px 18px 22px; text-align: center; margin-bottom: 24px; display: flex; flex-direction: column; min-height: calc(100% - 24px); box-sizing: border-box; }
.es-produkt .ts-pricing-table-style3.active { border: 2px solid var(--akzent); box-shadow: var(--es-schatten); }
.es-produkt .ts-pricing-table-style3 .price-icon img { width: 72px; height: 72px; object-fit: contain; }
.es-produkt .ts-pricing-table-style3 .price-title h3 { font: 700 20px/1.3 var(--es-schrift); margin: 12px 0 6px; }
.es-produkt .ts-pricing-table-style3 .price-title { align-self: start; }
.es-produkt .ts-pricing-table-style3 .price-title h3 { margin-bottom: 4px; }
/* Untertitel: Blocksatz, schliesst direkt unter dem Titel an (Auftrag 2026-10-07) */
.es-produkt .ts-pricing-table-style3 .price-title p { font-size: 13.5px; line-height: 1.5; color: var(--es-mut); margin: 0 0 12px;
text-align: justify; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; text-indent: 0; }
.es-produkt .ts-pricing-table-style3 .price-unit { margin: 0 0 14px; }
.es-produkt .ts-pricing-table-style3 .price { font: 400 14px/1.4 var(--es-schrift) !important; color: var(--es-mut) !important; background: var(--akzent-schwach); border-radius: 12px; padding: 12px 8px; }
.es-produkt .ts-pricing-table-style3 .price [style*="font-size"] { font-size: 24px !important; font-weight: 700; color: var(--es-ink) !important; line-height: 1.3; }
.es-produkt .ts-pricing-table-style3 .price div:empty, .es-produkt .ts-pricing-table-style3 .price div:has(> br:only-child) { display: none; }
.es-produkt .ts-pricing-table-style3 .price p { margin: 6px 0 0; }
.es-produkt .ts-pricing-table-style3 ul { list-style: none; margin: 0 0 18px; padding: 0; text-align: left; flex: 1 1 auto; }
.es-produkt .ts-pricing-table-style3 li { position: relative; padding: 6px 0 6px 24px; border-bottom: 1px solid var(--es-linie); font-size: 13.5px; }
.es-produkt .ts-pricing-table-style3 li::before { content: ""; position: absolute; left: 2px; top: 11px; width: 12px; height: 7px; border-left: 2px solid var(--akzent); border-bottom: 2px solid var(--akzent); transform: rotate(-45deg); }
.es-produkt .ts-pricing-table-style3 > p:last-child { margin: 0; }
/* leere Merkmalszeilen (redaktionell angelegt, ohne Text) zeigten nur einen Haken */
.es-produkt .ts-pricing-table-style3 li:empty { display: none; }
/* der grosse Betrag steht immer auf eigener Zeile (der
dahinter ist ausgeblendet, s. o.) */
.es-produkt .ts-pricing-table-style3 .price [style*="font-size"] { display: block; }
/*
Lizenzkarten auf GLEICHEN HOEHEN (2026-10-07, Auftrag des Betreibers fuer /produkte/lizenzen
und /lizenzen_v4). Jede Karte steckt in einer eigenen Spalte und dort in sechs Huellen; ihre
Teile (Symbol, Titel, Preis, Liste, Knopf) standen deshalb je nach Textlaenge verschieden hoch.
Jetzt bildet die Zeile eines Spalten-Bricks ein Raster mit fuenf Zeilen, und jede Karte nimmt
diese Zeilen per 'subgrid' auf - Titel, Preisfeld, Liste und Knopf liegen in allen Karten einer
Zeile auf derselben Hoehe. Die Huellen dazwischen werden mit 'display: contents' durchlaessig.
5-column-content: die beiden Haelften (five-three/five-two) samt ihren inneren Zeilen ebenso.
Nur ab 768 px; darunter stehen die Karten ohnehin untereinander. Im Editiermodus gilt diese
Datei nicht (es_nativ ist dort aus).
Die leeren Fuelldivs im Preisfeld entfernt der Filter es_ohne_fuelldivs (Brick-Vorlage).
*/
@media (min-width: 768px) {
.es-produkt .row:has(> [class*="col-sm-"] > .pimcore_area_pricingblock) { display: grid; grid-template-rows: repeat(5, auto); column-gap: 0; }
.es-produkt .row:has(> .col-sm-4 > .pimcore_area_pricingblock) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.es-produkt .row:has(> .col-sm-3 > .pimcore_area_pricingblock) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.es-produkt .row:has(> .col-sm-6 > .pimcore_area_pricingblock) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.es-produkt .row:has(> .five-three .pimcore_area_pricingblock) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); column-gap: 0; }
.es-produkt .row:has(> .five-three .pimcore_area_pricingblock) > .five-three,
.es-produkt .row:has(> .five-three .pimcore_area_pricingblock) > .five-two,
.es-produkt .row:has(> .five-three .pimcore_area_pricingblock) > .five-three > .row,
.es-produkt .row:has(> .five-three .pimcore_area_pricingblock) > .five-two > .row { display: contents; }
.es-produkt .row > [class*="col-sm-"]:has(> .pimcore_area_pricingblock),
.es-produkt .five-three > .row > [class*="col-sm-"],
.es-produkt .five-two > .row > [class*="col-sm-"] { width: auto; grid-row: span 5; }
.es-produkt [class*="col-sm-"]:has(> .pimcore_area_pricingblock) { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); min-width: 0; }
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock,
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .wpb_wrapper,
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .vc_row,
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .wpb_column,
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .vc_column-inner { display: contents; }
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .ts-pricing-table-style3 { display: grid; grid-template-rows: subgrid; grid-template-columns: minmax(0, 1fr); grid-row: span 5; min-height: 0; min-width: 0; overflow-wrap: break-word; }
/* die hervorgehobene Karte: 2px-Rand wuerde ihren Inhalt um 1px verschieben -> Rand 1px plus Ring */
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .ts-pricing-table-style3.active { border-width: 1px; border-color: var(--akzent); box-shadow: 0 0 0 1px var(--akzent), var(--es-schatten); }
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .ts-pricing-table-style3 .price-unit { display: flex; }
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .ts-pricing-table-style3 .price { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; }
}
/* Bild-Brick mit Bildunterschrift (areas/image, 2026-10-07) */
.es-produkt figure.es-bild, .es-artikel figure.es-bild { margin: 0; }
.es-bild-unterschrift { margin-top: 8px; font-size: 12.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--es-mut); text-align: center; }
@media (min-width: 768px) {
.es-produkt [class*="col-sm-"] > .pimcore_area_pricingblock .ts-pricing-table-style3 > p:last-child { align-self: end; }
}
/* Knoepfe der Bausteine im Stil der es-Knoepfe */
.es-produkt .ts-bt-pricing, .es-produkt .cta_pricing, .es-produkt .ts-style-button-cta a, .es-produkt a.ts-style-button-cta {
display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 10px; background: var(--akzent) !important;
color: #fff !important; font: 700 14px/1.2 var(--es-schrift); text-decoration: none !important; border: 0; text-transform: none; letter-spacing: 0; transition: background .2s, transform .15s; }
.es-produkt .ts-bt-pricing:hover, .es-produkt .cta_pricing:hover { background: var(--akzent-dunkel) !important; transform: translateY(-1px); }
html[data-theme="dunkel"] .es-produkt .ts-bt-pricing:hover, html[data-theme="dunkel"] .es-produkt .cta_pricing:hover { background: #4a6b7f !important; }
/* Spalten-Bricks (2/3/4/5-column-content) und Bild/Text */
.es-produkt [class*="-columns-content-section"] .fa { font-size: 30px; color: var(--akzent); margin-bottom: 10px; }
.es-produkt [class*="-columns-content-section"] h3 { font: 700 18px/1.3 var(--es-schrift); }
.es-produkt .ts-action-section { background: var(--akzent-schwach); border-radius: var(--es-rund); padding: 24px; }
.es-produkt-zurueck { margin: 22px 0 0; }
.es-produkt-zurueck a { color: var(--akzent-dunkel); font-weight: 700; text-decoration: none; }/* leere Lizenzkarten (Brick ohne Inhalt, auf /produkte/lizenzen vorhanden) nicht als Kasten zeigen */
.es-produkt .pimcore_area_pricingblock:has(.price-title h3:empty):has(.price:empty) { display: none; }
.es-produkt .ts-pricing-table-style3 .price:empty { display: none; }
/* Produktseiten mit Preistabelle im Aufbau der Shop-Produktseite (2026-10-07,
produkte/es/detail.html.twig, Daten aus App\Site\ProduktSeiteExtension). Galerie, Reiter und
Panels kommen aus den es-shop-Regeln; hier nur die Varianten und die Datentabelle. */
/* kein Kasten um die Varianten-Kacheln (Kasten im Kasten, siehe Miss-Verschachtelte-Kaesten.js) */
.es-shop-kaufbox.es-pv-kaufbox { display: flex; flex-direction: column; gap: 16px; padding: 0; border: 0; background: none; box-shadow: none; overflow: visible; }
.es-shop-kaufbox.es-pv-kaufbox::before { display: none; }
/* Seiten ohne Produktfoto (Gateways): das Icon der Produktgruppe statt eines leeren Bildfelds */
.es-pv-icon { width: 38%; height: auto; color: var(--akzent); opacity: .85; }
.es-pv-icon svg { width: 100%; height: auto; display: block; }
.es-pv-icon svg * { stroke-width: 1.1; }
.es-pv-einleitung { color: var(--es-mut); font-size: 16px; line-height: 1.6; }
.es-pv-einleitung p { margin: 0 0 8px; }
.es-pv-einleitung br:first-child { display: none; }
.es-pv-varianten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.es-pv-variante { background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k);
padding: 18px; display: flex; flex-direction: column; gap: 10px; }
.es-pv-kopf { display: flex; align-items: center; gap: 12px; }
.es-pv-bild { width: 56px; height: 56px; object-fit: contain; background: var(--es-bildgrund); border-radius: 10px; padding: 4px; box-sizing: border-box; flex: 0 0 auto; }
.es-pv-titel { margin: 0; font: 700 17px/1.3 var(--es-schrift); color: var(--es-ink); }
.es-pv-preis .price-unit-vat { margin: 0; }
.es-pv-betraege { background: var(--akzent-schwach); border-radius: 12px; padding: 12px 14px; }
.es-pv-brutto { font: 800 22px/1.3 var(--es-schrift); color: var(--es-ink); }
.es-pv-netto { font: 700 16px/1.4 var(--es-schrift); color: var(--akzent-dunkel); margin-top: 2px; }
.es-pv-brutto span, .es-pv-netto span { font-size: 13px; font-weight: 400; color: var(--es-mut); }
.es-pv-text { font-size: 14px; color: var(--es-mut); flex: 1 1 auto; }
.es-pv-text p { margin: 0 0 4px; }
.es-pv-text strong { color: var(--es-ink); }
.es-pv-text p:empty { display: none; }
.es-pv-knopf { align-self: flex-start; }
.es-pv-tabelle-huelle { overflow-x: auto; }
.es-pv-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.es-pv-tabelle thead th { text-align: center; font: 700 13px/1.3 var(--es-schrift); color: var(--akzent-dunkel); border-bottom: 2px solid var(--akzent); padding: 10px 12px; }
.es-pv-tabelle tbody th { text-align: left; font-weight: 500; color: var(--es-mut); width: 34%; padding: 9px 12px; border-bottom: 1px solid var(--es-linie); }
.es-pv-tabelle td { text-align: center; padding: 9px 12px; border-bottom: 1px solid var(--es-linie); color: var(--es-ink); }
.es-pv-tabelle tbody tr:hover > * { background: var(--akzent-schwach); }
.es-pv-ja { color: #3c9b5a; font-weight: 700; font-size: 16px; }
.es-pv-nein { color: #b8b8b8; }
html[data-theme="dunkel"] .es-pv-ja { color: #7fcf95; }
html[data-theme="dunkel"] .es-pv-nein { color: #6c7680; }
.es-pv-pdfs { list-style: none; margin: 0; padding: 0; }
.es-pv-pdfs li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--es-linie); }
.es-pv-pdfs a { font-weight: 700; color: var(--akzent-dunkel); }
.es-pv-pdfs span { color: var(--es-mut); font-size: 13px; }
/* DOWNLOAD-BEREICH im Redesign (2026-10-07) - Vorlagen unter download/es. Navigation links und
Kopf aus den es-shop-Regeln; hier die Karten je Datei. */
.es-dl-suche { display: flex; gap: 8px; }
.es-dl-suche input { font: 400 15px/1.2 var(--es-schrift); padding: 10px 14px; border: 1px solid var(--es-linie); border-radius: 10px; background: var(--es-flaeche); color: var(--es-ink); min-width: 220px; }
.es-dl-suche input:focus { outline: 2px solid var(--akzent); outline-offset: 1px; }
.es-dl-suche .es-knopf { padding: 0 14px; display: inline-flex; align-items: center; }
.es-dl-gruppe { scroll-margin-top: 90px; }
.es-dl-liste { display: flex; flex-direction: column; gap: 14px; }
.es-dl { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 20px; align-items: start; padding: 18px;
background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k); scroll-margin-top: 90px; }
.es-dl:target { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-schwach); }
.es-dl-bild img { display: block; width: 150px; height: auto; max-height: 110px; object-fit: contain; border-radius: 8px; background: var(--es-bildgrund); }
.es-dl-mehr { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12px; }
.es-dl-mehr a { color: var(--akzent-dunkel); }
.es-dl-symbol { display: grid; place-items: center; width: 150px; height: 80px; border-radius: 10px; background: var(--akzent-schwach); color: var(--akzent); }
.es-dl-titel { margin: 0 0 6px; font: 700 17px/1.3 var(--es-schrift); color: var(--es-ink); }
.es-dl-text { font-size: 14.5px; line-height: 1.6; color: var(--es-ink); }
.es-dl-text p { margin: 0 0 6px; }
.es-dl-text a { color: var(--akzent-dunkel); }
/* Installationshinweis (.NET, Adminrechte, Windows-Update) als Kasten - Filter es_installationshinweis */
.es-dl-hinweisbox { margin: 12px 0 8px; padding: 10px 16px; background: var(--akzent-schwach); border: 1px solid rgba(91,127,149,.25); border-left: 4px solid var(--akzent); border-radius: 10px; font-size: 14px; }
.es-dl-hinweisbox > summary { cursor: pointer; list-style: none; font-weight: 700; color: var(--akzent-dunkel); display: flex; align-items: center; gap: 8px; }
.es-dl-hinweisbox > summary::-webkit-details-marker { display: none; }
.es-dl-hinweisbox > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; }
.es-dl-hinweisbox[open] > summary::before { transform: rotate(45deg); }
.es-dl-hinweisbox[open] > summary { margin-bottom: 8px; }
.es-dl-hinweisbox p:last-child { margin-bottom: 0; }
.es-dl-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 8px; font-size: 12.5px; color: var(--es-mut); }
.es-dl-bewertung { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; font-size: 12.5px; color: var(--es-mut); }
.es-dl-sterne, .es-dl-bewerten { display: inline-flex; align-items: center; gap: 2px; }
.es-dl-bewerten-text { margin-right: 4px; }
.es-dl-stern svg, .es-dl-wahl svg { display: block; }
.es-dl-stern { color: #c9ced4; }
.es-dl-stern.an { color: #e0a526; }
.es-dl-stern.an svg { fill: currentColor; }
.es-dl-wahl { background: none; border: 0; padding: 2px; cursor: pointer; color: #c9ced4; border-radius: 4px; }
.es-dl-wahl.an { color: #e0a526; }
.es-dl-wahl.an svg { fill: currentColor; }
.es-dl-wahl:focus-visible { outline: 2px solid var(--akzent); }
.es-dl-aktion { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; min-width: 150px; }
.es-dl-aktion .es-knopf { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.es-dl-gesperrt { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; line-height: 1.45; color: var(--es-mut); text-align: left; max-width: 190px; }
.es-dl-gesperrt svg { flex: 0 0 auto; margin-top: 1px; }
html[data-theme="dunkel"] .es-dl-stern, html[data-theme="dunkel"] .es-dl-wahl { color: #4b5560; }
@media (max-width: 760px) {
.es-dl { grid-template-columns: 1fr; }
.es-dl-bild img, .es-dl-symbol { width: 100%; max-height: 160px; }
.es-dl-aktion { align-items: flex-start; }
.es-dl-suche input { min-width: 0; width: 100%; }
}
/* SCHULUNGSTERMIN im Redesign (2026-10-07) - Vorlage training/es/detail.html.twig */
.es-schulung-detail-raster { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; align-items: start; }
@media (max-width: 900px) { .es-schulung-detail-raster { grid-template-columns: 1fr; } }
.es-schulung-detail-text { font-size: 16px; margin-bottom: 18px; }
.es-schulung-detail-block { margin: 0 0 24px; padding-top: 18px; border-top: 1px solid var(--es-linie); }
.es-schulung-detail-block > .es-eyebrow { margin-bottom: 10px; }
.es-schulung-detail-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 700px) { .es-schulung-detail-zwei { grid-template-columns: 1fr; } }
.es-schulung-detail-zwei h3 { margin: 0 0 8px; }
.es-schulung-detail-zwei h3 small { display: block; font-size: 13px; font-weight: 500; color: var(--es-mut); margin-top: 2px; }
.es-schulung-box { position: sticky; top: 90px; }
.es-schulung-fakten { margin: 0 0 16px; }
.es-schulung-fakten > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--es-linie); }
.es-schulung-fakten dt { font: 700 12px/1.5 var(--es-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--es-mut); }
.es-schulung-fakten dd { margin: 0; font-size: 14.5px; color: var(--es-ink); }
.es-schulung-fakten small { color: var(--es-mut); }
.es-schulung-status { font-weight: 700; }
.es-schulung-status.frei { color: #3c8a50; } .es-schulung-status.knapp { color: #b8730c; } .es-schulung-status.voll { color: #b3412f; }
html[data-theme="dunkel"] .es-schulung-status.frei { color: #7fcf95; } html[data-theme="dunkel"] .es-schulung-status.knapp { color: #f0b860; } html[data-theme="dunkel"] .es-schulung-status.voll { color: #f09080; }
.es-schulung-preisbox { background: var(--akzent-schwach); border-radius: 12px; padding: 14px 16px; margin-bottom: 16px; }
.es-schulung-preiszahl { font: 800 26px/1.2 var(--es-schrift); color: var(--es-ink); }
.es-schulung-preisinfo { font-size: 13px; color: var(--es-mut); margin-top: 2px; }
.es-schulung-aktion { display: flex; flex-direction: column; gap: 12px; }
.es-schulung-aktion .es-knopf { justify-content: center; }
.es-schulung-aktion form { margin: 0; display: flex; }
.es-schulung-aktion form .es-knopf { flex: 1 1 auto; }
.es-schulung-knoepfe { display: flex; gap: 8px; } .es-schulung-knoepfe .es-knopf { flex: 1 1 0; }
.es-schulung-hinweis { margin: 0; font-size: 14px; color: var(--es-mut); }
.es-schulung-tn { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.es-schulung-auswahl-unten .ts-aufbau-label, .es-schulung-detail .ts-aufbau-label { border-radius: 8px; color: #252525; }
.es-schulung-detail noscript .ts-bt { display: inline-block; margin-top: 8px; color: var(--akzent-dunkel); font-weight: 700; }
/* Formulare aus Theme-Vorlagen auf eigenstaendigen Seiten (Schulungsbuchung): Bootstrap-Raster,
'form-control', 'ts-bt' und die Teilnehmertabelle - nur unter '.es-formular'. */
.es-formular { margin-top: 32px; padding: 24px; background: var(--es-flaeche); border: 1px solid var(--es-linie); border-radius: var(--es-rund); box-shadow: var(--es-schatten-k); scroll-margin-top: 90px; }
.es-formular h3 { margin: 0 0 14px; font: 800 22px/1.3 var(--es-schrift); color: var(--es-ink); }
.es-formular h4 { margin: 20px 0 10px; font: 700 13px/1.3 var(--es-schrift); letter-spacing: .08em; text-transform: uppercase; color: var(--akzent-dunkel); }
.es-formular p { margin: 0 0 10px; font-size: 14px; color: var(--es-ink); }
.es-formular .row { display: flex; flex-wrap: wrap; margin: 0 -8px; }
.es-formular .row > [class*="col-"] { box-sizing: border-box; width: 100%; padding: 0 8px 12px; }
@media (min-width: 768px) {
.es-formular .row > .col-sm-2 { width: 16.667%; } .es-formular .row > .col-sm-3 { width: 25%; }
.es-formular .row > .col-sm-4 { width: 33.333%; } .es-formular .row > .col-sm-6 { width: 50%; }
.es-formular .row > .col-sm-12 { width: 100%; }
}
.es-formular label { display: block; font-size: 12.5px; font-weight: 600; color: var(--es-mut); margin-bottom: 4px; }
.es-formular .red { color: #b3412f; margin-left: 2px; }
.es-formular .form-control, .es-formular input[type="text"], .es-formular input[type="email"], .es-formular select, .es-formular textarea {
display: block; width: 100%; box-sizing: border-box; font: 400 14.5px/1.3 var(--es-schrift); padding: 9px 11px; border: 1px solid var(--es-linie);
border-radius: 8px; background: var(--es-grund); color: var(--es-ink); }
.es-formular .form-control:focus, .es-formular input:focus, .es-formular select:focus, .es-formular textarea:focus { outline: 2px solid var(--akzent); outline-offset: 0; border-color: var(--akzent); }
.es-formular table { width: 100%; border-collapse: collapse; margin: 6px 0 14px; }
.es-formular table td { padding: 4px; }
.es-formular .title-compare-table td { font: 700 12px/1.3 var(--es-schrift); letter-spacing: .06em; text-transform: uppercase; color: var(--akzent-dunkel); border-bottom: 2px solid var(--akzent); padding: 8px 4px; }
.es-formular .teilnehmerzeile td:first-child { width: 32px; text-align: center; color: var(--es-mut); font-size: 13px; }
.es-formular .btn { display: inline-flex; align-items: center; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--es-linie); background: var(--es-flaeche);
color: var(--es-ink); font: 700 13.5px/1.2 var(--es-schrift); cursor: pointer; text-decoration: none; }
.es-formular .btn:hover { border-color: var(--akzent); }
.es-formular .btn.btn-xs { padding: 4px 10px; font-size: 12.5px; border-radius: 8px; }
.es-formular .btn.btn-link { border: 0; background: none; color: var(--akzent-dunkel); }
.es-formular .ts-bt { display: inline-flex; align-items: center; padding: 9px 16px; border-radius: 10px; border: 1px solid var(--es-linie); background: var(--es-flaeche);
color: var(--es-ink); font: 700 14px/1.2 var(--es-schrift); cursor: pointer; text-decoration: none; }
.es-formular button.ts-bt[value="buchen"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.es-formular .ts-bt:hover { border-color: var(--akzent); }
.es-formular .training-content { margin: 6px 0 14px; font-size: 14px; }
.es-formular .ts-message.error { background: rgba(156,59,46,.08); border: 1px solid rgba(156,59,46,.25); color: #8a2f23; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; }
.es-formular .ts-message.error ul { margin: 0; padding-left: 18px; }
@media (max-width: 760px) { .es-formular table thead { display: none; } .es-formular .teilnehmerzeile { display: grid; grid-template-columns: 1fr 1fr; } .es-formular .teilnehmerzeile td:first-child { display: none; } }
html[data-theme="dunkel"] .es-formular .ts-message.error { color: #f09080; }
/* Allgemeine Formularseiten (includes/_es-huelle-kopf: Kontakt, Partnersuche ...) */
.es-formularseite .container { max-width: none; width: auto; padding: 0; margin: 0; }
/* Tabellen mit fester Breite im Fliesstext (Kontaktseite: width=1148, breiter als der Kasten) */
.es-artikel .pimcore_area_wysiwyg table[width], .es-artikel .pimcore_area_wysiwyg table[style*="width"] { width: 100% !important; max-width: 100%; }
.es-artikel .pimcore_area_wysiwyg table img { max-width: 100%; height: auto; }
/* Bausteine ueber dem Formular: deren Raster nicht ueber den Kasten hinausziehen (das Kontaktbild
ragte mit den negativen Raendern von .es-produkt .row rechts heraus) */
.es-formularseite .pimcore_area_content .row { margin-left: 0; margin-right: 0; }
.es-formularseite .pimcore_area_content .row > [class*="col-"]:first-child { padding-left: 0; }
.es-formularseite .pimcore_area_content .row > [class*="col-"]:last-child { padding-right: 0; }
.es-formularseite .form-group { margin-bottom: 12px; }
.es-formularseite .page-header { margin: 0 0 18px; }
.es-formularseite textarea { min-height: 160px; }
.es-formularseite button.ts-bt[type="submit"] { background: var(--akzent); border-color: var(--akzent); color: #fff; margin-top: 8px; }
.es-formularseite hr { border: 0; border-top: 1px solid var(--es-linie); margin: 18px 0; }
.es-formularseite label > input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--akzent); vertical-align: -3px; margin-right: 6px; }
.es-formularseite label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; font-size: 14px; font-weight: 400; color: var(--es-ink); margin-top: 26px; }
.es-formularseite .captcha img, .es-formularseite img[src*="captcha"] { border-radius: 8px; max-width: 100%; }
/* Konto, Registrierung, Haendler (alte Vorlagen in der Huelle): Bootstrap-Reste ersetzen */
.es-formularseite .modal { display: none !important; } /* Bootstrap-Modals: ersetzt durch #es-alt-dialog */
.es-formularseite .page-header h1 { display: none; } /* steht schon im Seitenkopf */
.es-formularseite .page-header .lead { font-size: 16px; color: var(--es-mut); margin: 0; }
.es-formularseite .alert { border-radius: 10px; padding: 12px 16px; margin: 0 0 14px; font-size: 14.5px; border: 1px solid transparent; }
.es-formularseite .alert-success { background: rgba(120,176,56,.12); border-color: rgba(120,176,56,.28); color: #3f6b16; }
.es-formularseite .alert-danger, .es-formularseite .alert-warning { background: rgba(156,59,46,.08); border-color: rgba(156,59,46,.25); color: #8a2f23; }
html[data-theme="dunkel"] .es-formularseite .alert-success { color: #b5dd8a; }
html[data-theme="dunkel"] .es-formularseite .alert-danger, html[data-theme="dunkel"] .es-formularseite .alert-warning { color: #f09080; }
.es-formularseite .ts-message.error { background: rgba(156,59,46,.08); border: 1px solid rgba(156,59,46,.25); color: #8a2f23; border-radius: 10px; padding: 10px 14px; margin-bottom: 14px; display: flex; gap: 10px; }
.es-formularseite .ts-message .fa, .es-formularseite .ts-close { display: none; }
.es-formularseite .input-radio, .es-formularseite input[type="radio"] { width: 16px; height: 16px; accent-color: var(--akzent); vertical-align: -3px; margin: 0 6px 0 0; }
.es-formularseite label:has(> input[type="radio"]) { display: inline-flex; align-items: center; font-size: 14px; font-weight: 400; color: var(--es-ink); margin: 0 16px 6px 0; }
.es-formularseite .nobullet { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.es-formularseite .nobullet .input-group-btn { display: contents; }
.es-formularseite .nobullet li { display: flex; align-items: center; gap: 6px; }
.es-formularseite .nobullet li > label { display: inline; margin: 0; font-size: 14px; font-weight: 400; color: var(--es-ink); }
/* AGB im Registrierungs-/Kontoformular: Rollkasten statt voller Laenge (im alten Theme ebenso) */
.es-formularseite .agb { max-height: 280px; overflow: auto; border: 1px solid var(--es-linie); border-radius: 10px; padding: 12px 16px; font-size: 13.5px; background: var(--es-grund); margin-bottom: 10px; }
.es-formularseite .agb h1, .es-formularseite .agb h2 { font-size: 17px; margin: 10px 0 6px; }
.es-formularseite .agb h3, .es-formularseite .agb h4 { font-size: 15px; margin: 10px 0 4px; }
.es-formularseite .checkbox label { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 400; color: var(--es-ink); }
/* Reiter (ersetzt easyResponsiveTabs, Skript in includes/_es-huelle-fuss) */
.es-formularseite .ts-horizontalTab ul.resp-tabs-list { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: 0; margin: 0 0 18px; border-bottom: 1px solid var(--es-linie); }
.es-formularseite .ts-horizontalTab ul.resp-tabs-list > li { padding: 10px 14px; font: 600 14.5px/1.2 var(--es-schrift); color: var(--es-mut); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.es-formularseite .ts-horizontalTab ul.resp-tabs-list > li:hover { color: var(--es-ink); }
.es-formularseite .ts-horizontalTab ul.resp-tabs-list > li.resp-tab-active { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); }
.es-formularseite .ts-horizontalTab ul.resp-tabs-list > li:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
.es-formularseite .resp-accordion { display: none; }
/* Reiter als Verweise (Helpdesk-Filter '?status='): das umschliesst das */
.es-formularseite .es-reiter-links ul.resp-tabs-list > a { text-decoration: none; margin-bottom: -1px; }
.es-formularseite .es-reiter-links ul.resp-tabs-list > a > li { list-style: none; padding: 10px 14px; font: 600 14.5px/1.2 var(--es-schrift); color: var(--es-mut); border-bottom: 2px solid transparent; }
.es-formularseite .es-reiter-links ul.resp-tabs-list > a:hover > li { color: var(--es-ink); }
.es-formularseite .es-reiter-links ul.resp-tabs-list > a > li.resp-tab-active { color: var(--akzent-dunkel); border-bottom-color: var(--akzent); }
/* Helpdesk-Liste der Mitarbeiter: 11 Spalten - kompakter, und als letzte Sicherung waagerecht
rollbar statt die ganze Seite zu verbreitern (gemessen 54 px Ueberlauf bei 1440 px) */
.es-formularseite .ts-section-title:has(> #hdtabs) { overflow-x: auto; }
.es-formularseite #hdtabs ~ table.ts-compare-table td { padding: 7px 6px; font-size: 13px; }
.es-formularseite #hdtabs ~ table.ts-compare-table .btn { white-space: nowrap; }
.es-formularseite #hdtabs ~ table.ts-compare-table tr.title-compare-table td { text-transform: none; letter-spacing: 0; font-size: 12px; }
.es-formularseite #hdtabs ~ table.ts-compare-table tr.title-compare-table td a { color: var(--es-ink); }
.es-formularseite .ts-hd-suche { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 6px; }
.es-formularseite .ts-hd-suche .form-group { flex: 1 1 320px; margin: 0; }
.es-hd-kachel, .es-hd-kachel:hover, .es-formularseite .es-reiter-links ul.resp-tabs-list > a, .es-formularseite .es-reiter-links ul.resp-tabs-list > a:hover { text-decoration: none !important; }
/* '.ts-section-title' ist auf Inhaltsseiten eine Unterzeile (820 px, zentriert); in Forum und
Helpdesk umschliesst dieselbe Klasse die ganze Tabelle */
.es-formularseite .ts-section-title { max-width: none; text-align: left; color: var(--es-ink) !important; font-size: inherit; }
/* Blaetterleiste (includes/paging.html.twig) auf eigenstaendigen Seiten: ohne Bootstrap stand sie
als Aufzaehlung untereinander (Meldung 2026-10-07). Waagerecht, Seitenknoepfe im Stil der Pillen. */
.es-shop ul.pagination { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 22px 0 6px; padding: 0; justify-content: center; }
.es-shop ul.pagination > li { margin: 0; padding: 0; list-style: none; }
.es-shop ul.pagination > li::before { content: none; }
.es-shop ul.pagination > li > a, .es-shop ul.pagination > li > span { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px; border: 1.5px solid var(--es-linie); border-radius: 10px; background: var(--es-flaeche); color: var(--es-ink); font-weight: 600; font-size: 14px; text-decoration: none !important; }
.es-shop ul.pagination > li > a:hover { border-color: var(--akzent); color: var(--akzent); }
.es-shop ul.pagination > li.active > a { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); pointer-events: none; }
.es-shop ul.pagination > li.disabled > span { opacity: .4; }
/* Helpdesk-Kacheln (helpdesk/_kacheln, Redesign-Zweig) */
.es-hd-kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0 0 22px; }
.es-hd-kachel { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--es-linie); border-radius: 12px; background: var(--es-flaeche); color: var(--es-ink); text-decoration: none; font-weight: 600; font-size: 15px; }
.es-hd-kachel:hover { border-color: var(--akzent); }
.es-hd-kachel.aktiv { border-color: var(--akzent); background: var(--akzent-schwach); }
.es-hd-kachel-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--akzent-schwach); color: var(--akzent-dunkel); flex: none; }
@media (max-width: 767px) { .es-hd-kacheln { grid-template-columns: 1fr; } }
/* Helpdesk-Kommentare: Karte, Kopfzeile (Name · Firma · Datum Uhrzeit) in einer Reihe.
Die Float-Regeln aus dem