/* nissa-Theme
   Aufbau: Leiste oben · Kopfzeile · vollbreite Abschnitte mit wechselnden Hintergründen · grosse Fusszeile.
   Farben, Schrift, Ecken und Seitenbreite werden im Adminbereich unter «Design» eingestellt
   und als Variablen (--c1, --c2, --dark, --rad, --wrap, --font …) in die Seite geschrieben. */

@font-face{font-family:"Archivo";src:url("fonts/archivo-latin.woff2") format("woff2-variations");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Manrope";src:url("fonts/manrope-latin.woff2") format("woff2-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("fonts/source-serif-4-latin.woff2") format("woff2-variations");font-weight:200 900;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/inter-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url("fonts/space-grotesk-latin.woff2") format("woff2-variations");font-weight:300 700;font-display:swap}
@font-face{font-family:"Playfair Display";src:url("fonts/playfair-display-latin.woff2") format("woff2-variations");font-weight:400 900;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url("fonts/jakarta-latin.woff2") format("woff2-variations");font-weight:200 800;font-display:swap}

:root{
  --c1:#0b63c5;--c1-text:#0b63c5;--on-c1:#fff;--c2:#ffb400;--on-c2:#10161f;--dark:#111c2d;--bg:#fff;
  --ink:#16202e;--soft:#566275;--line:#e4e8ef;--grey:#f4f6f9;
  --wrap:1320px;--rad:14px;--rad-s:10px;--rad-btn:999px;
  --font:"Archivo",system-ui,sans-serif;--font-h:"Archivo",system-ui,sans-serif;--h-stretch:112%;
  --pad:clamp(3.5rem,7vw,6.5rem);
  --shadow:0 1px 2px rgba(16,24,40,.05),0 12px 32px -14px rgba(16,24,40,.22);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:1.0625rem;line-height:1.65;color:var(--ink);background:var(--bg);overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--c1-text)}
h1,h2,h3,h4{font-family:var(--font-h);font-stretch:var(--h-stretch);margin:0 0 .5em;line-height:1.12;font-weight:800;letter-spacing:-.015em;hyphens:auto;overflow-wrap:break-word}
h1{font-size:clamp(2.4rem,5.2vw,4.2rem)}
h2{font-size:clamp(1.8rem,3.2vw,2.7rem)}
h3{font-size:1.25rem;font-weight:700;letter-spacing:-.005em}
p{margin:0 0 1em}
ul{margin:0 0 1em;padding-left:1.2em}
:focus-visible{outline:3px solid var(--c1);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-999px;top:0;background:var(--dark);color:#fff;padding:.7em 1em;z-index:100}.skip:focus{left:0}
.wrap{width:min(var(--wrap),100% - 2.5rem);margin-inline:auto}
.hp{position:absolute;left:-9999px}

/* ---------- Knöpfe ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;
  padding:.95rem 1.7rem;border-radius:var(--rad-btn);background:var(--c1);color:var(--on-c1);border:2px solid var(--c1);cursor:pointer;transition:transform .15s,filter .15s,background .15s,color .15s}
.btn:hover{filter:brightness(.9);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--c1-text);border-color:currentColor}
.btn.ghost:hover{background:var(--c1);color:var(--on-c1);filter:none}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.75rem}
.btn-row.mitte{justify-content:center}

/* ---------- Leiste ganz oben ---------- */
.topbar{background:var(--dark);color:#c9d2e0;font-size:.875rem}
.topbar .wrap{display:flex;justify-content:space-between;align-items:center;gap:1rem;min-height:42px;flex-wrap:wrap}
.tb-l{display:flex;flex-wrap:wrap;gap:.25rem 1.75rem}
.tb-l a,.tb-l span{display:inline-flex;align-items:center;gap:.45rem;color:inherit;text-decoration:none}
.tb-l a:hover{color:#fff}
.tb-l svg{color:var(--c2)}
.social{display:flex;gap:.4rem}
.social a{width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:inherit;transition:background .15s,color .15s}
.social a:hover{background:var(--c1);color:var(--on-c1)}
@media (max-width:760px){.topbar .social,.tb-l span{display:none}.tb-l{gap:.25rem 1rem}}

/* ---------- Kopfzeile ---------- */
.site-head{position:sticky;top:0;z-index:50;background:var(--bg);border-bottom:1px solid var(--line);transition:box-shadow .2s}
.site-head.scrolled{box-shadow:0 8px 30px -12px rgba(16,24,40,.25)}
.bar{display:flex;align-items:center;gap:1.5rem;min-height:84px}
.logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--ink);flex:none}
.logo img{height:44px;width:auto}
/* Logo leuchtet beim Darüberfahren leicht in der Hauptfarbe */
.logo img,.logo-text{transition:filter .3s ease,transform .3s ease}
.logo:hover img,.logo:focus-visible img,.logo:hover .logo-text,.logo:focus-visible .logo-text{filter:drop-shadow(0 0 5px color-mix(in srgb,var(--c1) 55%,transparent)) drop-shadow(0 0 14px color-mix(in srgb,var(--c1) 30%,transparent)) brightness(1.06);transform:scale(1.02)}
@media (prefers-reduced-motion:reduce){.logo img,.logo-text{transition:none}.logo:hover img,.logo:hover .logo-text{transform:none}}
.logo-text{font-family:var(--font-h);font-stretch:var(--h-stretch);font-weight:900;font-size:1.45rem;letter-spacing:-.02em}
.logo-text::first-letter{color:var(--c1)}
.nav{margin-left:auto;display:flex;align-items:center;gap:1.25rem}
.nav>ul{display:flex;gap:.1rem;list-style:none;margin:0;padding:0}
.nav li{margin:0;position:relative}
.nav ul a,.nav ul button{font:inherit;font-size:1rem;font-weight:600;color:var(--ink);text-decoration:none;background:none;border:0;cursor:pointer;padding:.7rem .9rem;border-radius:var(--rad-s);display:flex;align-items:center;gap:.4rem;white-space:nowrap}
.nav ul a:hover,.nav ul button:hover{color:var(--c1-text)}
.nav>ul>li>[aria-current="page"],.nav>ul>li.aktiv>button{color:var(--c1-text);box-shadow:inset 0 -3px 0 var(--c1);border-radius:0}
.nav .has-sub>button::after{content:"";width:.42em;height:.42em;border-right:2px solid;border-bottom:2px solid;transform:rotate(45deg) translateY(-2px)}
.sub{position:absolute;top:calc(100% + .6rem);left:0;min-width:250px;list-style:none;margin:0;padding:.5rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad-s);box-shadow:var(--shadow);display:none}
.sub::before{content:"";position:absolute;left:0;right:0;top:-.7rem;height:.7rem}
.sub a{font-weight:500;border-radius:calc(var(--rad-s) / 1.5)}
.sub a:hover,.sub [aria-current="page"]{background:var(--grey)}
.has-sub.open>.sub{display:block}
@media (hover:hover) and (min-width:1101px){.has-sub:hover>.sub,.has-sub:focus-within>.sub{display:block}}
.nav-cta{padding:.75rem 1.4rem;font-size:.95rem}
.burger{display:none;margin-left:auto;width:48px;height:48px;border-radius:var(--rad-s);border:0;background:var(--grey);cursor:pointer;position:relative}
.burger span,.burger span::before,.burger span::after{content:"";position:absolute;left:13px;right:13px;height:2px;background:var(--ink);border-radius:2px;transition:transform .2s}
.burger span{top:23px}.burger span::before{left:0;right:0;top:-7px}.burger span::after{left:0;right:0;top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
  .bar{flex-wrap:wrap;min-height:70px}.logo img{height:38px}
  .burger{display:block}
  .nav{display:none;width:100%;margin:0;flex-direction:column;align-items:stretch;gap:.5rem;padding:0 0 1.25rem;max-height:calc(100vh - 80px);overflow:auto}
  .nav.open{display:flex}
  .nav>ul{flex-direction:column;gap:0}
  .nav ul a,.nav ul button{width:100%;justify-content:space-between;padding:.9rem .5rem;white-space:normal;border-bottom:1px solid var(--line);border-radius:0}
  .nav>ul>li>[aria-current="page"],.nav>ul>li.aktiv>button{box-shadow:none}
  .sub{position:static;box-shadow:none;border:0;background:var(--grey);margin:0;border-radius:0;padding:0 0 0 .75rem}
  .sub::before{display:none}
}

/* ---------- Hero ---------- */
.hero{position:relative;background:var(--dark);color:#fff;overflow:hidden}
.hero .slides{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.hero .slides::-webkit-scrollbar{display:none}
.hero .slide{position:relative;flex:0 0 100%;scroll-snap-align:start;display:flex;align-items:center;min-height:min(var(--hero-h,560px),90vh);padding:5rem 0 6rem}
.hero.mittel .slide{min-height:450px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-bg[src*="ewald-pammer"]{object-position:center 12%}
.hero .slide::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,color-mix(in srgb,var(--dark) 92%,transparent) 0%,color-mix(in srgb,var(--dark) 70%,transparent) 45%,color-mix(in srgb,var(--dark) 15%,transparent) 100%)}
.hero .slide.mitte::before{background:color-mix(in srgb,var(--dark) 68%,transparent)}
.hero .wrap{position:relative;z-index:2}
.hero-txt{max-width:45rem}
.slide.mitte .hero-txt{margin-inline:auto;text-align:center}
.slide.mitte .btn-row{justify-content:center}
.hero h1,.hero h2{font-size:clamp(2.5rem,5.6vw,4.6rem);font-weight:900;margin-bottom:.35em;text-wrap:balance}
.hero-lead{font-size:clamp(1.1rem,1.6vw,1.35rem);color:#dbe2ee;max-width:56ch;margin:0}
.slide.mitte .hero-lead{margin-inline:auto}
.hero .btn.ghost{color:#fff;border-color:rgba(255,255,255,.7)}
.hero .btn.ghost:hover{background:#fff;color:var(--dark);border-color:#fff}
.kicker{display:inline-flex;align-items:center;gap:.7rem;font-weight:700;font-size:.95rem;color:var(--c1-text);margin:0 0 .9rem}
.kicker::before{content:"";width:34px;height:3px;background:var(--c2);border-radius:2px}
.hero .kicker,.bg-dunkel .kicker,.bg-bild .kicker,.bg-farbe .kicker{color:#fff}
.s-arrow{position:absolute;z-index:3;top:50%;transform:translateY(-50%);width:54px;height:54px;border-radius:50%;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.12);cursor:pointer;display:grid;place-items:center;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.s-arrow:hover{background:var(--c1);border-color:var(--c1)}
.s-arrow::before{content:"";width:11px;height:11px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateX(2px) rotate(45deg)}
.s-arrow.next::before{transform:translateX(-2px) rotate(-135deg)}
.s-arrow.prev{left:1.5rem}.s-arrow.next{right:1.5rem}
.s-ctrl{position:absolute;z-index:3;left:0;right:0;bottom:1.75rem;display:flex;justify-content:center;align-items:center;gap:.7rem}
.s-dots{display:flex;gap:.45rem}
.s-dots button{width:34px;height:5px;border-radius:3px;border:0;padding:0;background:rgba(255,255,255,.35);cursor:pointer}
.s-dots button[aria-current="true"]{background:var(--c2)}
.s-pause{width:26px;height:26px;border-radius:50%;border:0;background:rgba(255,255,255,.2);cursor:pointer;position:relative}
.s-pause::before,.s-pause::after{content:"";position:absolute;top:8px;width:3px;height:10px;background:#fff;border-radius:1px}
.s-pause::before{left:9px}.s-pause::after{right:9px}
.s-pause.paused::before{left:10px;top:7px;width:0;height:0;background:none;border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;border-radius:0}
.s-pause.paused::after{display:none}
@media (max-width:1100px){.s-arrow{display:none}.hero .slide{padding:3.5rem 0 5rem;min-height:min(var(--hero-h,560px),90vh)}}

/* ---------- Titelbereich der Unterseiten ---------- */
.page-head{background:var(--dark);color:#fff;padding:clamp(3rem,6vw,5.5rem) 0;position:relative;background-size:cover;background-position:center;isolation:isolate}
.page-head::after{content:"";position:absolute;right:0;bottom:0;width:min(38vw,520px);height:10px;background:linear-gradient(90deg,var(--c1),var(--c2));z-index:1}
.page-head.mit-bild::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--dark) 72%,transparent);z-index:-1}
.page-head h1{font-size:clamp(2.2rem,4.6vw,3.6rem);margin-bottom:.3em}
.page-head .lead{font-size:clamp(1.05rem,1.5vw,1.3rem);color:#d5ddea;max-width:62ch;margin:0}
.crumbs{font-size:.9rem;color:#aebace;margin-bottom:1.1rem;display:flex;flex-wrap:wrap;gap:.45rem}
.crumbs a{color:inherit;text-decoration:none}.crumbs a:hover{color:#fff;text-decoration:underline}
.crumbs [aria-hidden]{opacity:.5}

/* ---------- Abschnitte ---------- */
.sec{padding:var(--pad) 0;position:relative;background-size:cover;background-position:center;isolation:isolate}
.sec.kompakt{padding:clamp(2rem,4vw,3.25rem) 0}
.bg-grau{background:var(--grey)}
.bg-farbe{background:var(--c1);color:var(--on-c1)}
.bg-dunkel,.bg-bild{background-color:var(--dark);color:#e6ebf3}
.bg-bild::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--dark) 80%,transparent);z-index:-1}
.bg-dunkel h2,.bg-bild h2,.bg-dunkel h3,.bg-bild h3{color:#fff}
.bg-farbe a:not(.btn),.bg-dunkel a:not(.btn),.bg-bild a:not(.btn){color:inherit}
.bg-farbe .btn,.cta .btn{background:var(--on-c1);color:var(--c1);border-color:var(--on-c1)}
.bg-farbe .btn.ghost,.cta .btn.ghost{background:transparent;color:var(--on-c1);border-color:currentColor}
.bg-farbe .btn.ghost:hover,.cta .btn.ghost:hover{background:var(--on-c1);color:var(--c1)}
.sec-head{max-width:760px;margin:0 auto clamp(2.25rem,4vw,3.5rem);text-align:center}
.sec-head.links{margin-left:0;text-align:left}
.sec-head h2{text-wrap:balance}
.sec-lead{font-size:1.15rem;color:var(--soft);margin:0}
.bg-farbe .sec-lead,.bg-dunkel .sec-lead,.bg-bild .sec-lead{color:inherit;opacity:.85}
.sec-head:not(.links) .kicker::after{content:"";width:34px;height:3px;background:var(--c2);border-radius:2px}
.schmal{max-width:820px;margin-inline:auto}
.prose>*:last-child{margin-bottom:0}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);margin-top:1.4em}.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose h3{margin-top:1.4em}
.prose li{margin-bottom:.4em}
.prose a:not(.btn){font-weight:600;text-underline-offset:3px}
.note{color:var(--soft);font-size:.95rem}

/* Moderne Punkte-Liste (statt schlichtem Browser-Bullet) – goldener Kreis mit Haken, im
   Prose-Text per <ul class="pp-liste"> nutzbar. Wiederverwendbar für alle Textblöcke. */
.prose ul.pp-liste{list-style:none;margin:1.1rem 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem}
.prose ul.pp-liste li{display:flex;align-items:center;gap:.7rem;margin:0;font-weight:700;color:var(--dark,var(--ink))}
.prose ul.pp-liste li::before{content:"";flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--c2,#ffb400) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310161f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='5 13 10 18 19 7'/%3E%3C/svg%3E") no-repeat center/16px}

.grid{display:grid;gap:clamp(1.25rem,2.2vw,2rem)}
.g2{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}
@media (max-width:1100px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:700px){.g2,.g3,.g4{grid-template-columns:1fr}}

/* Monatshits/Angebots-Kacheln (auch für «Brot des Tages» genutzt) */
.monatshit{position:relative;display:flex;align-items:center;gap:1.1rem;padding:1rem 1.1rem;border-radius:var(--rad);background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;text-align:left;transition:transform .2s,box-shadow .2s,border-color .2s}
a.monatshit:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.08);border-color:color-mix(in srgb,var(--c1) 35%,var(--line))}
.monatshit figure{margin:0;flex:0 0 96px;width:96px;height:96px;border-radius:calc(var(--rad) - 4px);overflow:hidden}.monatshit figure img{width:100%;height:100%;object-fit:cover;display:block}
.mh-icon{flex:0 0 64px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text)}
.mh-body{display:flex;flex-direction:column;align-items:flex-start;gap:.15rem;flex:1;min-width:0}
.mh-kz{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c1-text)}
.monatshit h3{margin:0;font-size:1.05rem;line-height:1.3}.monatshit p{margin:.1rem 0 0;color:var(--soft);font-size:.9rem}
.mh-preis{margin-top:.5rem;display:inline-block;padding:.3rem .75rem;border-radius:999px;background:color-mix(in srgb,var(--c2) 22%,#fff);color:var(--c1-text);font-size:.92rem;font-weight:800;line-height:1.35;white-space:pre-line}
.bg-dunkel .monatshit,.bg-farbe .monatshit,.bg-bild .monatshit{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.15)}
.bg-dunkel .mh-kz,.bg-farbe .mh-kz{color:var(--c2)}.bg-dunkel .mh-preis,.bg-farbe .mh-preis{background:rgba(255,255,255,.12);color:#fff}
@media (max-width:560px){.monatshit{padding:.85rem}.monatshit figure{flex-basis:76px;width:76px;height:76px}}

/* «Heute»-Hervorhebung (z.B. bei «Brot des Tages») – passender Eintrag bekommt Rahmen, Schatten und Badge */
.monatshit.mh-heute{border-color:var(--c1);border-width:2px;box-shadow:0 10px 28px color-mix(in srgb,var(--c1) 20%,transparent)}
.mh-heute-badge{position:absolute;top:-.6rem;left:1rem;padding:.28rem .75rem;border-radius:999px;background:var(--c1);color:var(--on-c1);font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.ausdruck-studio .monatshit.mh-heute{border:0;border-bottom:2px solid var(--dark);background:color-mix(in srgb,var(--bg) 80%,#fff)}
.ausdruck-studio .mh-heute-badge{background:var(--dark);color:#fff}

/* Vorteile */
.feature{position:relative;display:block;padding:2rem 1.75rem;border-radius:var(--rad);background:#fff;border:1px solid var(--line);text-decoration:none;color:inherit;transition:transform .2s,box-shadow .2s,border-color .2s}
.bg-grau .feature{border-color:transparent;box-shadow:var(--shadow)}
.feature:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.f-ic{width:64px;height:64px;border-radius:var(--rad-s);display:grid;place-items:center;margin-bottom:1.25rem;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text);transition:background .2s,color .2s}
.feature:hover .f-ic{background:var(--c1);color:var(--on-c1)}
.feature p{color:var(--soft);margin:0}
.bg-farbe .feature,.bg-dunkel .feature,.bg-bild .feature{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.16);color:inherit;box-shadow:none}
.bg-farbe .feature p,.bg-dunkel .feature p,.bg-bild .feature p{color:inherit;opacity:.85}
.bg-farbe .f-ic,.bg-dunkel .f-ic,.bg-bild .f-ic{background:rgba(255,255,255,.14);color:#fff}

/* Karten */
.card{position:relative;display:flex;flex-direction:column;background:#fff;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);color:var(--ink);transition:transform .2s,box-shadow .2s}
.bg-grau .card{border-color:transparent;box-shadow:var(--shadow)}
.card.linked:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
.card-img{overflow:hidden;aspect-ratio:3/2;background:var(--grey)}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card.linked:hover .card-img img{transform:scale(1.05)}
.card.full .card-img{aspect-ratio:auto}.card.full .card-img img{height:auto;object-fit:contain}
.card .body{padding:1.6rem 1.7rem 1.8rem;display:flex;flex-direction:column;flex:1}
.card .body p{color:var(--soft)}
.card h3 a{text-decoration:none;color:inherit}
.card h3 a::after{content:"";position:absolute;inset:0}
.more{margin-top:auto;padding-top:.6rem;display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--c1-text)}
.more svg{transition:transform .2s}.card.linked:hover .more svg{transform:translateX(4px)}
.datum{font-size:.875rem;font-weight:600;color:var(--c1-text)!important;margin-bottom:.5rem}

/* Bild + Text – der versetzte Farbrahmen hinter dem Bild ist das Erkennungszeichen des Themes */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.split figure{margin:0 1.25rem 1.25rem 0;position:relative}
.split figure::before{content:"";position:absolute;inset:1.25rem -1.25rem -1.25rem 1.25rem;background:var(--c2);border-radius:var(--rad);z-index:-1}
.split.flip figure{order:2;margin:0 0 1.25rem 1.25rem}
.split.flip figure::before{inset:1.25rem 1.25rem -1.25rem -1.25rem}
.split figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--rad);box-shadow:var(--shadow)}
.split figure.fmt-hoch img{aspect-ratio:3/4}
.split figure.fmt-quadrat img{aspect-ratio:1/1}
.split figure.contain::before{display:none}
.split figure.contain img{aspect-ratio:auto;object-fit:contain;box-shadow:none;max-height:80vh}
@media (max-width:900px){.split{grid-template-columns:1fr}.split.flip figure{order:0}}

/* Zahlen */
.counters{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem;text-align:center}
.counter b{display:block;font-family:var(--font-h);font-stretch:var(--h-stretch);font-size:clamp(2.6rem,5vw,4rem);font-weight:900;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.bg-weiss .counter b,.bg-grau .counter b{color:var(--c1-text)}
.counter>span{display:block;margin-top:.6rem;font-weight:600;opacity:.85}

/* Aufruf-Streifen */
.cta{background:var(--c1);color:var(--on-c1);padding:clamp(3rem,5.5vw,4.75rem) 0;position:relative;background-size:cover;background-position:center;isolation:isolate;overflow:hidden}
.cta::after{content:"";position:absolute;right:-6rem;top:-6rem;width:22rem;height:22rem;border-radius:50%;border:3.5rem solid color-mix(in srgb,var(--on-c1) 10%,transparent);z-index:-1}
.cta.mit-bild::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--c1) 86%,transparent);z-index:-1}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap}
.cta .wrap>div:first-child{flex:1 1 480px;min-width:0}
.cta .btn-row{flex:none;max-width:100%}   /* max-width: auf dem Handy brechen die Knöpfe um, statt rechts abgeschnitten zu werden */
.cta h2{margin-bottom:.25em;font-size:clamp(1.7rem,3vw,2.5rem)}
.cta p{margin:0;font-size:1.1rem;opacity:.9;max-width:60ch}
.cta .btn-row{margin-top:0}

/* Kundenstimmen */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.25rem,2.2vw,2rem)}
.quote{margin:0;padding:2.25rem 2rem 2rem;background:#fff;color:var(--ink);border-radius:var(--rad);border:1px solid var(--line);display:flex;flex-direction:column;position:relative}
.bg-grau .quote{border-color:transparent;box-shadow:var(--shadow)}
.q-ic{color:var(--c2);margin-bottom:.75rem}
.quote blockquote{margin:0 0 1.5rem;font-size:1.08rem;flex:1}
.quote blockquote p{margin:0}
.quote figcaption{display:flex;align-items:center;gap:.9rem;padding-top:1.25rem;border-top:1px solid var(--line);font-size:.92rem;color:var(--soft)}
.quote figcaption img,.q-ini{width:52px;height:52px;border-radius:50%;object-fit:cover;flex:none}
.q-ini{display:grid;place-items:center;background:var(--c1);color:var(--on-c1);font-weight:800;font-size:1.2rem}
.quote figcaption b{display:block;color:var(--ink);font-size:1rem}
@media (max-width:1000px){.quotes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(86%,420px);overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem}.quote{scroll-snap-align:start}}

/* Logo-Reihe */
.logos{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem clamp(2rem,5vw,4.5rem)}
.logos img{max-height:56px;width:auto;max-width:180px;filter:grayscale(1);opacity:.6;transition:filter .2s,opacity .2s}
.logos a:hover img,.logos span:hover img{filter:none;opacity:1}

/* Team */
.person{text-align:center}
.person img,.p-ini{width:100%;aspect-ratio:1;object-fit:cover;border-radius:var(--rad);margin-bottom:1.2rem}
.p-ini{display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 12%,#fff);color:var(--c1-text);font-family:var(--font-h);font-size:4rem;font-weight:900}
.person h3{margin-bottom:.15em}
.rolle{color:var(--c1-text);font-weight:600;margin-bottom:.6rem}
.person p{color:var(--soft);font-size:.97rem;margin-bottom:.5em}

/* Preistafeln */
.plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:clamp(1.25rem,2.2vw,2rem);align-items:stretch}
.plan{display:flex;flex-direction:column;padding:2.25rem 2rem;border-radius:var(--rad);background:#fff;color:var(--ink);border:1px solid var(--line)}
.plan.top{border:2px solid var(--c1);box-shadow:var(--shadow);position:relative}
.plan.top::before{content:"Beliebt";position:absolute;top:-.95rem;left:2rem;background:var(--c2);color:var(--on-c2);font-weight:800;font-size:.8rem;padding:.3rem .9rem;border-radius:var(--rad-btn)}
.preis{margin:0 0 1.4rem;padding-bottom:1.4rem;border-bottom:1px solid var(--line);color:var(--soft)}
.preis b{font-family:var(--font-h);font-size:2.4rem;font-weight:900;color:var(--ink);letter-spacing:-.02em}
.plan ul{list-style:none;padding:0;margin:0 0 2rem;flex:1}
.plan li{display:flex;gap:.6rem;padding:.4rem 0}
.plan li svg{color:var(--c1-text);flex:none;margin-top:.3rem}

/* FAQ */
.faq{max-width:900px;margin-inline:auto;display:grid;gap:.75rem}
.faq details{background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--rad-s);padding:0 1.5rem}
.faq details[open]{border-color:var(--c1);box-shadow:var(--shadow)}
.faq summary{list-style:none;cursor:pointer;font-weight:700;font-size:1.1rem;padding:1.25rem 2.5rem 1.25rem 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:.25rem;top:50%;width:.6rem;height:.6rem;border-right:2.5px solid var(--c1-text);border-bottom:2.5px solid var(--c1-text);transform:translateY(-70%) rotate(45deg);transition:transform .2s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .prose{padding:0 0 1.4rem;color:var(--soft)}

/* Kontakt */
.contact{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:start}
@media (max-width:900px){.contact{grid-template-columns:1fr}}
.c-list{list-style:none;padding:0;margin:1.5rem 0 0;display:grid;gap:1.4rem}
.c-list li{display:flex;gap:1.1rem;align-items:flex-start}
.c-ic{width:52px;height:52px;border-radius:var(--rad-s);display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text)}
.c-list b{display:block;font-size:.9rem;color:var(--soft);font-weight:600}
.c-list a{color:inherit;text-decoration:none;font-weight:600}.c-list a:hover{color:var(--c1-text)}
.c-form{background:#fff;color:var(--ink);padding:clamp(1.5rem,3vw,2.5rem);border-radius:var(--rad);border:1px solid var(--line);box-shadow:var(--shadow)}
.kform .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
@media (max-width:600px){.kform .row{grid-template-columns:1fr}}
.kform label{display:block;font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.kform input,.kform textarea{width:100%;font:inherit;color:var(--ink);padding:.9rem 1rem;border-radius:var(--rad-s);border:1px solid #cfd6e1;background:#fff;transition:border-color .15s,box-shadow .15s}
.kform input:focus,.kform textarea:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 18%,transparent)}
.kform textarea{resize:vertical;min-height:150px}
.f-note{font-size:.875rem;color:var(--soft);margin:.9rem 0 1.25rem}
.f-err{font-weight:700;color:#b3124f;background:#fdeef4;border:1px solid #f3c0d3;padding:.8rem 1rem;border-radius:var(--rad-s)}
.bf-wrap h2{margin-bottom:1.4rem}
.bf-grid{display:grid;grid-template-columns:290px 1fr 320px;gap:1.4rem;align-items:start}
.bf-links,.bf-mitte,.bf-rechts{display:flex;flex-direction:column;gap:1.2rem;min-width:0}
.bf-karte{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.2rem 1.3rem}
.bf-karte h3{font-size:1rem;margin:0 0 .9rem;display:flex;align-items:center;gap:.5rem}
.bf-karte h4{font-size:.92rem;margin:0 0 .3rem}
.bf-karte h4 small{font-weight:400;color:var(--soft);font-size:.78rem}
.bf-schritt,.bf-icon{flex:none;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--c1);color:var(--on-c1);font-size:.78rem;font-weight:700;display:flex;align-items:center;justify-content:center}
.bf-korb{position:sticky;top:1.2rem}
.bf-leer{color:var(--soft);font-size:.9rem;margin:0}
.bf-korb-zeile{display:flex;justify-content:space-between;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--line);font-size:.85rem}
.bf-korb-zeile:first-child{padding-top:0}
.bf-korb-zeile-info b{display:block;font-size:.88rem}
.bf-korb-zeile-info small{color:var(--soft);display:block;margin-top:.15rem;line-height:1.4}
.bf-korb-entfernen{background:none;border:0;color:var(--soft);cursor:pointer;font-size:.78rem;text-decoration:underline;padding:0;margin-top:.3rem}
.bf-korb-total{display:flex;justify-content:space-between;font-weight:700;padding:.8rem 0 .2rem;margin-top:.2rem}
.bf-senden{width:100%;margin-top:.8rem}
.bf-senden:disabled{opacity:.5;cursor:not-allowed}
.bf-produktliste{display:flex;flex-direction:column;gap:.3rem}
.bf-gruppe{font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--soft);margin:.8rem 0 .2rem}
.bf-gruppe:first-child{margin-top:0}
.bf-produkt-zeile{display:flex;align-items:center;gap:.7rem;padding:.55rem .6rem;border-radius:var(--rad-s);cursor:pointer;border:1px solid transparent}
.bf-produkt-zeile:hover{background:var(--grey)}
.bf-produkt-zeile:has(input:checked){border-color:var(--c1);background:color-mix(in srgb,var(--c1) 8%,#fff)}
.bf-produkt-zeile input{flex:none}
.bf-pbild{flex:none;width:44px;height:44px;border-radius:var(--rad-s);overflow:hidden;background:var(--grey)}
.bf-pbild img{width:100%;height:100%;object-fit:cover}
.bf-pinfo{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.bf-pinfo b{font-size:.9rem;line-height:1.25}
.bf-pinfo small{color:var(--soft);font-size:.78rem}
.bf-allerg-hinweis{color:var(--soft);font-size:.8rem;margin:0 0 .7rem}
.bf-feld{margin-bottom:.9rem}
.bf-feld:last-child{margin-bottom:0}
.bf-feld>label{display:block;font-size:.85rem;font-weight:700;margin-bottom:.4rem}
.bf-feld>label small{font-weight:400;color:var(--soft)}
.bf-groessen-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(9rem,1fr));gap:.6rem}
.bf-groesse{display:flex;flex-direction:column;gap:.15rem;padding:.75rem .9rem;border:1px solid #cfd6e1;border-radius:var(--rad-s);cursor:pointer}
.bf-groesse:has(input:checked){border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 15%,transparent)}
.bf-groesse input{position:absolute;opacity:0}
.bf-groesse b{font-size:.92rem}
.bf-groesse span{color:var(--soft);font-size:.82rem}
.bf-opts{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.6rem}
.bf-opts:last-child{margin-bottom:0}
.bf-opt{display:flex;align-items:center;gap:.4rem;padding:.5rem .8rem;border:1px solid #cfd6e1;border-radius:999px;font-size:.86rem;cursor:pointer}
.bf-opt:has(input:checked){border-color:var(--c1);background:color-mix(in srgb,var(--c1) 10%,#fff)}
.bf-opt input{margin:0}
.bf-opt-check{border-radius:var(--rad-s)}
.bf-summe{display:flex;align-items:baseline;gap:.5rem;font-size:1.15rem;margin:1rem 0 .3rem}
.bf-summe-hinweis{font-size:.78rem;font-weight:400;color:var(--soft)}
.bf-hinzufuegen{width:100%;margin-top:.5rem}
.bf-vorschau{margin-bottom:1rem}
.bf-vorschau-innen{display:flex;align-items:center;gap:1.6rem;background:var(--grey);border-radius:var(--rad-s);padding:1.2rem 1.4rem;flex-wrap:wrap}
.bf-stapel{flex:none;display:flex;flex-direction:column;align-items:center;width:9rem}
.bf-deckel{width:8.4rem;height:1.7rem;border-radius:50%;background:linear-gradient(180deg,var(--c2),color-mix(in srgb,var(--c2) 70%,#7a4a12));box-shadow:0 2px 4px rgba(0,0,0,.15);margin-bottom:-.35rem;position:relative;z-index:3}
.bf-lage-grafik{width:8.8rem;height:1.55rem;border-radius:40%;background:linear-gradient(180deg,#fff,var(--grey));border:1px solid var(--line);margin-top:-.3rem;display:flex;align-items:center;justify-content:center;box-shadow:0 1px 2px rgba(0,0,0,.08);position:relative}
.bf-lage-nr{width:1.5rem;height:1.5rem;border-radius:50%;background:var(--c1);color:var(--on-c1);font-size:.72rem;font-weight:700;display:flex;align-items:center;justify-content:center;position:absolute;left:-.5rem}
.bf-boden{width:8.2rem;height:1.1rem;border-radius:0 0 40% 40%;background:color-mix(in srgb,var(--c2) 55%,#7a4a12);margin-top:-.3rem}
.bf-stapel-text{flex:1 1 14rem;display:flex;flex-direction:column;gap:.35rem}
.bf-stapel-zeile{font-size:.86rem;margin:0}
.bf-stapel-zeile small{color:var(--soft);text-transform:uppercase;font-size:.7rem;letter-spacing:.03em}
.bf-lagen{display:flex;flex-direction:column;gap:.9rem;margin-bottom:.6rem}
.bf-lage{padding:.7rem .8rem;background:var(--grey);border-radius:var(--rad-s)}
.bf-lage-titel{font-size:.85rem;font-weight:700;margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem}
.bf-lage-titel small{font-weight:400;color:var(--soft);text-transform:uppercase;font-size:.7rem}
.bf-wie-erste{margin-left:auto;background:none;border:0;color:var(--c1-text);font-size:.76rem;text-decoration:underline;cursor:pointer;padding:0}
.bf-anzahl-zeile{display:flex;align-items:center;justify-content:space-between;margin-bottom:.9rem}
.bf-anzahl-zeile label{font-size:.85rem;font-weight:700}
.bf-stepper{display:flex;align-items:center;border:1px solid #cfd6e1;border-radius:var(--rad-s);overflow:hidden}
.bf-stepper button{width:2.2rem;height:2.2rem;border:0;background:var(--grey);font-size:1.1rem;cursor:pointer;line-height:1}
.bf-stepper button:hover{background:#e7ebf1}
.bf-stepper input{width:2.6rem;text-align:center;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);font:inherit;height:2.2rem}
@media (max-width:980px){.bf-grid{grid-template-columns:1fr}.bf-korb{position:static}}
.map{border:0;width:100%;height:min(60vh,460px);border-radius:var(--rad);display:block;margin-top:clamp(2rem,4vw,3.5rem)}
.map-gate{margin-top:clamp(2rem,4vw,3.5rem);border-radius:var(--rad);overflow:hidden;background:var(--grey);border:1px solid var(--line);position:relative}
.map-gate::before{content:"";display:block;padding-top:42%}
.map-btn{position:absolute;inset:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;gap:.9rem;background:none;border:0;cursor:pointer;padding:1.5rem;text-align:left;font:inherit;color:var(--ink)}
.map-btn:hover{background:color-mix(in srgb,var(--c1) 5%,transparent)}
.map-btn svg{flex:none;width:44px;height:44px;padding:10px;border-radius:50%;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text)}
.map-btn b{display:block;font-size:1.05rem;margin-bottom:.2rem}
.map-btn span{color:var(--soft);font-size:.92rem;max-width:46ch}
.map-btn a{position:relative;z-index:1}
.map-gate iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.standorte-2col{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 2rem;padding:var(--pad) 0}
.standorte-2col .standort-card h3{margin-top:0}
.standorte-2col .map-gate{margin-top:1.2rem}
@media (max-width:760px){.standorte-2col{grid-template-columns:1fr;gap:2.5rem}}

/* Galerie, Tabelle */
.gallery{display:grid;gap:1rem}
.gallery.g6{grid-template-columns:repeat(6,1fr)}
@media (max-width:1100px){.gallery.g6{grid-template-columns:repeat(4,1fr)}.gallery.g4,.gallery.g3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.gallery.g6{grid-template-columns:repeat(3,1fr)}}
.gallery figure{margin:0;overflow:hidden;border-radius:var(--rad-s);background:var(--grey)}
.gallery img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .4s}
.gallery figure:hover img{transform:scale(1.05)}
.gallery figcaption{padding:.7rem .9rem;font-weight:600;font-size:.95rem;background:#fff;color:var(--ink)}
.table-scroll{overflow-x:auto}
table.prices{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums;background:#fff;color:var(--ink);border-radius:var(--rad-s);overflow:hidden;border:1px solid var(--line)}
table.prices td{padding:1rem 1.25rem;border-bottom:1px solid var(--line)}
table.prices tr:last-child td{border-bottom:0}
table.prices tr:nth-child(even) td{background:var(--grey)}
table.prices td:last-child{text-align:right;font-weight:700;white-space:nowrap}

/* ---------- Fusszeile ---------- */
.site-foot{background:var(--dark);color:#b6c1d2;font-size:.97rem}
.foot{display:flex;flex-wrap:wrap;gap:clamp(2rem,4vw,3.5rem);padding-top:clamp(3.5rem,6vw,5.5rem);padding-bottom:clamp(2.5rem,4vw,3.5rem)}
.foot>*{flex:1 1 170px;min-width:0}
.foot>.f-about{flex:1.7 1 300px}
@media (max-width:760px){.foot>.f-about{flex-basis:100%}.foot>*{flex-basis:40%}}
.site-foot .logo{color:#fff;margin-bottom:1.1rem}
.site-foot .logo-text::first-letter{color:var(--c2)}
.f-about p{max-width:42ch}
.site-foot .social{margin-top:1.25rem}
.site-foot .social a{background:rgba(255,255,255,.08);color:#fff}
.site-foot .social a:hover{background:var(--c1);color:var(--on-c1)}
.site-foot h2{font-family:var(--font);font-stretch:100%;font-size:1.05rem;color:#fff;margin-bottom:1.2rem;letter-spacing:0;padding-bottom:.8rem;position:relative}
.site-foot h2::after{content:"";position:absolute;left:0;bottom:0;width:36px;height:3px;background:var(--c2);border-radius:2px}
.site-foot ul{list-style:none;padding:0;margin:0}
.site-foot li{margin-bottom:.55rem}
.site-foot a{color:inherit;text-decoration:none}
.site-foot a:hover{color:#fff}
.site-foot nav a:hover{padding-left:.3rem;transition:padding .15s}
.site-foot address{font-style:normal}
.copy-line{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.35rem 1.5rem;margin:0;padding:1.5rem 0;border-top:1px solid rgba(255,255,255,.12);font-size:.875rem;color:#8f9bb0}

/* ---------- Einblenden beim Scrollen (nur mit JavaScript, sonst ist alles sofort sichtbar) ---------- */
@media (prefers-reduced-motion:no-preference){
  html.js .anim .rv{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
  html.js .anim .rv.in{opacity:1;transform:none}
  html.js .anim .grid>.rv:nth-child(2),html.js .anim .quotes>.rv:nth-child(2),html.js .anim .counters>.rv:nth-child(2),html.js .anim .plans>.rv:nth-child(2){transition-delay:.1s}
  html.js .anim .grid>.rv:nth-child(3),html.js .anim .quotes>.rv:nth-child(3),html.js .anim .counters>.rv:nth-child(3),html.js .anim .plans>.rv:nth-child(3){transition-delay:.2s}
  html.js .anim .grid>.rv:nth-child(4),html.js .anim .counters>.rv:nth-child(4){transition-delay:.3s}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
@media print{.rv{opacity:1!important;transform:none!important}}

/* ---------- Bild vergrössern (Lightbox) ---------- */
img.zoomable{cursor:zoom-in}
html.lb-open{overflow:hidden}
.lightbox{border:0;padding:0;margin:0;width:100vw;height:100vh;max-width:none;max-height:none;background:rgba(10,16,28,.93);color:#fff}
.lightbox[open]{display:grid;grid-template-columns:auto 1fr auto;align-items:center}
.lightbox::backdrop{background:transparent}
.lightbox figure{margin:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;padding:3.5rem .5rem 1.25rem;min-width:0;cursor:zoom-out}
.lightbox img{max-width:100%;max-height:calc(100vh - 7.5rem);width:auto;height:auto;object-fit:contain;border-radius:var(--rad-s);background:#fff;cursor:default}
.lightbox figcaption{display:flex;gap:1rem;align-items:baseline;font-size:.92rem;text-align:center}
.lb-n{opacity:.65;font-variant-numeric:tabular-nums;white-space:nowrap}
.lb-x,.lb-nav{border:1px solid rgba(255,255,255,.35);background:rgba(255,255,255,.12);color:#fff;border-radius:50%;width:48px;height:48px;cursor:pointer;display:grid;place-items:center}
.lb-x:hover,.lb-nav:hover{background:var(--c1);border-color:var(--c1)}
.lb-x{position:fixed;top:1rem;right:1rem;z-index:2}
.lb-x::before,.lb-x::after{content:"";position:absolute;width:18px;height:2px;background:#fff;border-radius:2px}
.lb-x::before{transform:rotate(45deg)}.lb-x::after{transform:rotate(-45deg)}
.lb-nav{margin:0 1rem}
.lb-nav::before{content:"";width:10px;height:10px;border-left:2.5px solid #fff;border-bottom:2.5px solid #fff;transform:translateX(2px) rotate(45deg)}
.lb-next::before{transform:translateX(-2px) rotate(-135deg)}
.lightbox.einzeln .lb-nav{visibility:hidden}
.lightbox :focus-visible{outline-color:#fff}
@media (max-width:700px){.lb-nav{position:fixed;bottom:1rem;margin:0;z-index:2}.lb-prev{left:1rem}.lb-next{right:1rem}.lightbox[open]{grid-template-columns:1fr}.lightbox figure{padding-bottom:4.5rem}}

/* ======================================================================
   ERWEITERUNGEN: mehr Hintergründe, Hero-Stile, Kopf-/Fusszeilen-Varianten,
   Untermenü mit Beschreibung, Zeitleiste, Video
   ====================================================================== */

/* ---------- Mehr Hintergründe ---------- */
.bg-akzent{background:var(--c2);color:var(--on-c2)}
.bg-akzent h2,.bg-akzent h3{color:inherit}
.bg-akzent a:not(.btn){color:inherit}
.bg-akzent .btn{background:var(--on-c2);color:var(--c2);border-color:var(--on-c2)}
.bg-akzent .btn.ghost{background:transparent;color:var(--on-c2);border-color:currentColor}
.bg-akzent .btn.ghost:hover{background:var(--on-c2);color:var(--c2)}
.bg-akzent .sec-lead{color:inherit;opacity:.85}
.bg-verlauf{background:linear-gradient(135deg,var(--c1),var(--c2));color:var(--on-c1)}
.bg-verlauf h2,.bg-verlauf h3{color:inherit}
.bg-verlauf a:not(.btn){color:inherit}
.bg-verlauf .btn{background:var(--on-c1);color:var(--c1);border-color:var(--on-c1)}
.bg-verlauf .btn.ghost{background:transparent;color:var(--on-c1);border-color:currentColor}
.bg-verlauf .btn.ghost:hover{background:var(--on-c1);color:var(--c1)}
.bg-verlauf .sec-lead{color:inherit;opacity:.9}
.bg-verlauf .feature,.bg-akzent .feature{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.2);color:inherit;box-shadow:none}
.bg-verlauf .feature p,.bg-akzent .feature p{color:inherit;opacity:.85}
.bg-verlauf .f-ic,.bg-akzent .f-ic{background:rgba(255,255,255,.18);color:inherit}
.bg-verlauf .kicker,.bg-akzent .kicker{color:inherit}

/* ---------- Hero-Stile ---------- */
.hero.stil-karte{background:transparent;padding:1.5rem 0 0}
.hero.stil-karte .hero-frame{border-radius:var(--rad);overflow:hidden;background:var(--dark)}
.hero.stil-karte .slide{min-height:min(var(--hero-h,460px),90vh)}
.hero.stil-modern .slide{align-items:flex-end;padding:3rem 0 2.9rem;min-height:min(var(--hero-h,400px),90vh)}
.hero.stil-modern .slide::before{background:linear-gradient(180deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.18) 45%,color-mix(in srgb,var(--dark) 90%,transparent) 100%)}
.hero.stil-modern .slide.mitte::before{background:linear-gradient(180deg,rgba(0,0,0,.1) 0%,color-mix(in srgb,var(--dark) 82%,transparent) 100%)}
.hero.stil-modern .hero-txt{max-width:40rem}
.hero.stil-modern h1,.hero.stil-modern h2{font-size:clamp(1.7rem,3.4vw,2.7rem);font-weight:800;margin-bottom:.25em;letter-spacing:-.01em}
.hero.stil-modern .hero-lead{font-size:clamp(.95rem,1.2vw,1.1rem);color:rgba(255,255,255,.9);max-width:52ch}
.hero.stil-modern .kicker{display:inline-block;padding:.32rem .8rem;border-radius:999px;background:rgba(255,255,255,.16);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);font-size:.74rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 .7rem;color:#fff}
.hero.stil-modern .kicker::before{display:none}
.hero.stil-modern .btn-row{margin-top:1rem;gap:.6rem}.hero.stil-modern .btn{padding:.6rem 1.1rem;font-size:.9rem}
.hero.stil-modern .s-arrow{display:none}
.hero.stil-modern .s-ctrl{left:auto;right:max(1.25rem,calc((100% - var(--wrap)) / 2));bottom:1.2rem;justify-content:flex-end}
.hero.stil-modern .s-dots button{width:26px;height:4px}.hero.stil-modern .s-pause{width:22px;height:22px}
.hero.stil-modern .s-pause::before,.hero.stil-modern .s-pause::after{top:6px;height:9px;width:2.5px}.hero.stil-modern .s-pause::before{left:7px}.hero.stil-modern .s-pause::after{right:7px}
.hero.stil-modern .s-pause.paused::before{left:8px;top:5px;border-left-width:8px;border-top-width:5px;border-bottom-width:5px}
@media (max-width:1100px){.hero.stil-modern .slide{padding:2.5rem 0 2.6rem;min-height:min(var(--hero-h,400px),90vh)}}
@media (max-width:640px){.hero.stil-modern .slide{min-height:min(var(--hero-h,400px),90vh);padding-bottom:2.8rem}.hero.stil-modern .s-ctrl{right:1rem;bottom:.9rem}}
/* Editorial: Textkachel + Foto mit versetztem Rahmen */
.hero.stil-editorial{background:var(--bg);color:var(--ink)}
body .hero.stil-editorial .slide{display:grid;grid-template-columns:minmax(340px,11fr) 13fr;align-items:stretch;padding:0;min-height:min(var(--hero-h,430px),90vh)}
.hero.stil-editorial .slide::before{display:none}
.hero.stil-editorial .ed-text{background:var(--dark);color:#fff;display:flex;align-items:center;padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem);position:relative;overflow:hidden}
.hero.stil-editorial .ed-text::after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border:1px solid color-mix(in srgb,var(--c2) 55%,transparent);border-radius:50%;pointer-events:none}
.hero.stil-editorial .ed-text::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--c2)}
.hero.stil-editorial .ed-text-in{position:relative;max-width:34rem;width:100%}
.hero.stil-editorial .ed-nr{display:block;font-family:var(--font-h);font-size:clamp(2.4rem,4vw,3.4rem);line-height:1;color:var(--c2);margin-bottom:1rem;font-weight:600;letter-spacing:.02em}
.hero.stil-editorial .ed-nr small{font-size:.9rem;letter-spacing:.2em;color:rgba(255,255,255,.55);margin-left:.4rem;font-family:var(--font);font-weight:500;vertical-align:.5em}
.hero.stil-editorial .kicker{color:var(--c2)}
.hero.stil-editorial h1,.hero.stil-editorial h2{font-size:clamp(1.5rem,2.5vw,2.4rem);letter-spacing:.02em;color:#fff;margin-bottom:.4em;text-shadow:none;hyphens:manual;overflow-wrap:normal;word-break:normal}
.hero.stil-editorial .hero-lead{color:rgba(255,255,255,.85);font-size:clamp(.98rem,1.2vw,1.1rem);text-shadow:none}
.hero.stil-editorial .btn-row{margin-top:1.4rem}
.hero.stil-editorial .btn{background:var(--c2);border-color:var(--c2);color:var(--dark)}
.hero.stil-editorial .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}.hero.stil-editorial .btn.ghost:hover{background:#fff;color:var(--dark);border-color:#fff}
.hero.stil-editorial .ed-bild{position:relative;overflow:hidden;background:var(--grey)}
.hero.stil-editorial .ed-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero.stil-editorial .ed-rahmen{position:absolute;inset:clamp(.9rem,2vw,1.6rem);border:1px solid color-mix(in srgb,var(--c2) 80%,#fff);pointer-events:none;mix-blend-mode:screen}
.hero.stil-editorial .ed-rahmen::after{content:"";position:absolute;left:-1px;bottom:-1px;width:54px;height:54px;border-left:5px solid var(--c2);border-bottom:5px solid var(--c2)}
.hero.stil-editorial .s-arrow{top:auto;bottom:1.5rem;transform:none;width:44px;height:44px;border-color:rgba(255,255,255,.4);background:transparent;left:auto}
.hero.stil-editorial .s-arrow.prev{left:auto;right:calc(54.17% + 1.5rem + 52px)}.hero.stil-editorial .s-arrow.next{right:calc(54.17% + 1.5rem)}
.hero.stil-editorial .ed-text{padding-bottom:calc(clamp(2rem,4vw,3.5rem) + 2.2rem)}
.hero.stil-editorial .s-ctrl{left:auto;right:clamp(.9rem,2vw,1.6rem);bottom:clamp(.9rem,2vw,1.6rem);justify-content:flex-end}
.hero.stil-editorial .s-dots button{width:40px;height:3px;background:rgba(255,255,255,.55)}.hero.stil-editorial .s-dots button[aria-current="true"]{background:var(--c2)}
.hero.stil-editorial .s-pause{background:rgba(0,0,0,.35)}
@media (max-width:900px){
  body .hero.stil-editorial .slide{grid-template-columns:1fr;grid-template-rows:auto 1fr;min-height:0;padding:0}
  .hero.stil-editorial .ed-bild{order:-1;aspect-ratio:16/10;min-height:0}
  .hero.stil-editorial .ed-text{padding:1.6rem 1.25rem 3.2rem}
  .hero.stil-editorial .ed-nr{font-size:1.8rem;margin-bottom:.5rem}
  .hero.stil-editorial .s-arrow{display:none}
  .hero.stil-editorial .s-ctrl{right:1.25rem;bottom:1rem;left:auto}
}
/* Hell geteilt: Foto links, Text rechts auf hellem Grund */
.hero.stil-hell{background:var(--bg);color:var(--ink)}
body .hero.stil-hell .slide{display:grid;grid-template-columns:13fr 11fr;align-items:stretch;padding:0;min-height:min(var(--hero-h,430px),90vh)}
.hero.stil-hell .slide::before{display:none}
.hero.stil-hell .ed-bild{position:relative;overflow:hidden;background:var(--grey)}
.hero.stil-hell .ed-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hero.stil-hell .ed-rahmen{display:none}
.hero.stil-hell .ed-text{display:flex;align-items:center;padding:clamp(2rem,4vw,3.5rem) clamp(1.5rem,4vw,3.5rem);background:var(--bg);position:relative}
.hero.stil-hell .ed-text::before{content:"";position:absolute;left:0;top:clamp(2rem,4vw,3.5rem);bottom:clamp(2rem,4vw,3.5rem);width:1px;background:color-mix(in srgb,var(--c2) 60%,var(--line))}
.hero.stil-hell .ed-text-in{max-width:32rem;width:100%}
.hero.stil-hell .ed-nr{display:block;font-family:var(--font-h);font-size:1rem;letter-spacing:.2em;color:var(--c2);margin-bottom:1.2rem}
.hero.stil-hell .ed-nr small{font-size:.8rem;color:var(--soft);margin-left:.3rem}
.hero.stil-hell .ed-nr-leer{height:2px;width:48px;background:var(--c2);margin-bottom:1.4rem}
.hero.stil-hell .kicker,.hero.stil-band .kicker{color:var(--c1-text)}
.hero.stil-hell .s-pause,.hero.stil-band .s-pause{background:rgba(0,0,0,.35)}
.hero.stil-hell h1,.hero.stil-hell h2{font-size:clamp(1.6rem,2.6vw,2.5rem);color:var(--dark);text-shadow:none;letter-spacing:.02em;hyphens:manual;overflow-wrap:normal;word-break:normal}
.hero.stil-hell .hero-lead{color:var(--soft);text-shadow:none;font-size:clamp(.98rem,1.2vw,1.1rem)}
.hero.stil-hell .btn.ghost{color:var(--c1-text);border-color:var(--c1-text)}.hero.stil-hell .btn.ghost:hover{background:var(--c1);color:var(--on-c1);border-color:var(--c1)}
.hero.stil-hell .s-arrow{top:auto;bottom:1.4rem;transform:none;width:42px;height:42px;left:auto;border-color:var(--line);background:#fff}
.hero.stil-hell .s-arrow::before{border-color:var(--ink)}.hero.stil-hell .s-arrow:hover::before{border-color:#fff}
.hero.stil-hell .s-arrow.prev{right:calc(1.5rem + 50px)}.hero.stil-hell .s-arrow.next{right:1.5rem}
.hero.stil-hell .s-ctrl{left:1.25rem;right:auto;bottom:1.1rem;justify-content:flex-start}
.hero.stil-hell .s-dots button{width:34px;height:3px;background:color-mix(in srgb,var(--dark) 20%,transparent)}.hero.stil-hell .s-dots button[aria-current="true"]{background:var(--c2)}
@media (max-width:900px){body .hero.stil-hell .slide{grid-template-columns:1fr;min-height:0;padding:0}.hero.stil-hell .ed-bild{aspect-ratio:16/10;order:-1}.hero.stil-hell .ed-text{padding:1.5rem 1.25rem 3.6rem}.hero.stil-hell .ed-text::before{display:none}.hero.stil-hell .s-arrow{display:none}.hero.stil-hell .s-ctrl{left:1.25rem;bottom:1rem}}
/* Klassisch: Foto randlos, Text mittig im Doppelrahmen */
.hero.stil-klassisch .slide{align-items:center;justify-content:center;padding:3.5rem 0}
.hero.stil-klassisch .slide::before{background:color-mix(in srgb,var(--dark) 55%,transparent)}
.hero.stil-klassisch .hero-txt{margin-inline:auto;text-align:center;max-width:44rem;padding:2.2rem 2.6rem;border:1px solid color-mix(in srgb,var(--c2) 85%,#fff);position:relative;background:color-mix(in srgb,var(--dark) 25%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.hero.stil-klassisch .hero-txt::before{content:"";position:absolute;inset:6px;border:1px solid color-mix(in srgb,var(--c2) 55%,transparent);pointer-events:none}
.hero.stil-klassisch .kicker{color:var(--c2);justify-content:center}
.hero.stil-klassisch .kicker::before{background:var(--c2)}.hero.stil-klassisch .kicker::after{content:"";width:22px;height:1px;background:var(--c2)}
.hero.stil-klassisch h1,.hero.stil-klassisch h2{font-size:clamp(1.8rem,3.4vw,3.1rem);letter-spacing:.05em}
.hero.stil-klassisch .hero-lead{margin-inline:auto;color:rgba(255,255,255,.9)}
.hero.stil-klassisch .btn-row{justify-content:center}
.hero.stil-klassisch .btn:not(.ghost){background:var(--c2);border-color:var(--c2);color:var(--dark)}.hero.stil-klassisch .btn.ghost{border-color:var(--c2);color:#fff}
.hero.stil-klassisch .s-arrow{width:44px;height:44px;border-color:color-mix(in srgb,var(--c2) 70%,transparent);background:transparent}
.hero.stil-klassisch .s-dots button{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.5)}.hero.stil-klassisch .s-dots button[aria-current="true"]{background:var(--c2)}
/* Band: Foto oben, helles Textband ragt ins Bild */
.hero.stil-band{background:var(--bg)}
body .hero.stil-band .slide{align-items:flex-end;padding:clamp(9rem,22vw,16rem) 0 0;min-height:min(var(--hero-h,430px),90vh)}
.hero.stil-band .slide::before{background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.18) 100%)}
.hero.stil-band .hero-bg{bottom:clamp(2rem,5vw,3.5rem);height:auto}
.hero.stil-band .wrap{position:relative;z-index:2}
.hero.stil-band .hero-txt{max-width:none;width:min(100%,58rem);display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(1rem,3vw,2.5rem);align-items:end;background:var(--bg);color:var(--ink);padding:clamp(1.2rem,2.4vw,1.8rem) clamp(1.4rem,3vw,2.4rem) 0;border-top:4px solid var(--c2);margin-top:auto}
.hero.stil-band .kicker{color:var(--c1-text);grid-column:1}
.hero.stil-band h1,.hero.stil-band h2{grid-column:1;color:var(--dark);text-shadow:none;font-size:clamp(1.7rem,3vw,2.7rem);letter-spacing:.03em;margin:0}
.hero.stil-band .hero-lead{grid-column:2;grid-row:1/3;color:var(--soft);text-shadow:none;font-size:.98rem;padding-bottom:.35rem;border-left:1px solid color-mix(in srgb,var(--c2) 60%,var(--line));padding-left:1.5rem}
.hero.stil-band .btn-row{grid-column:1/-1;margin-top:.9rem;padding-bottom:0}
.hero.stil-band .btn.ghost{color:var(--c1-text);border-color:var(--c1-text)}
.hero.stil-band .s-arrow{top:clamp(1rem,3vw,2rem);transform:none;width:42px;height:42px}
.hero.stil-band .s-arrow.prev{left:auto;right:calc(1.5rem + 50px)}.hero.stil-band .s-arrow.next{right:1.5rem}
.hero.stil-band .s-ctrl{bottom:auto;top:clamp(1.3rem,3.6vw,2.6rem);left:1.5rem;right:auto;justify-content:flex-start}
.hero.stil-band .s-dots button{width:30px;height:3px;background:rgba(255,255,255,.7)}.hero.stil-band .s-dots button[aria-current="true"]{background:var(--c2)}
@media (max-width:800px){.hero.stil-band .hero-txt{grid-template-columns:1fr}.hero.stil-band .hero-lead{grid-column:1;grid-row:auto;border-left:0;padding-left:0;margin-top:.6rem}.hero.stil-band .s-arrow{display:none}}
.hero.stil-farbe{background:linear-gradient(135deg,var(--c1),color-mix(in srgb,var(--c2) 70%,var(--c1)))}
.hero.stil-farbe .slide::before{display:none}
.hero.stil-farbe .hero-lead{color:rgba(255,255,255,.9)}

/* ---------- Kopfzeile: Stile ---------- */
@media (min-width:1101px){
  .site-head.stil-zentriert .bar{flex-direction:column;align-items:center;gap:.3rem;position:relative;min-height:0;padding-top:.7rem;padding-bottom:.6rem}
  .site-head.stil-zentriert .logo{margin:0}
  .site-head.stil-zentriert .nav{margin:0}
  .site-head.stil-zentriert .nav>ul{margin-inline:auto}
  .site-head.stil-zentriert .nav-cta{position:absolute;right:0;top:50%;transform:translateY(-50%)}
}
.site-head.transparent{position:absolute;left:0;right:0;top:0;z-index:20;background:transparent;border-bottom-color:transparent}
.site-head.transparent:not(.scrolled) .logo-text,.site-head.transparent:not(.scrolled) .nav ul a,.site-head.transparent:not(.scrolled) .nav ul button{color:#fff}
.site-head.transparent:not(.scrolled) .nav ul a:hover,.site-head.transparent:not(.scrolled) .nav ul button:hover{color:var(--c2)}
.site-head.transparent:not(.scrolled) .burger span,.site-head.transparent:not(.scrolled) .burger span::before,.site-head.transparent:not(.scrolled) .burger span::after{background:#fff}
.site-head.transparent:not(.scrolled) .burger{background:rgba(255,255,255,.14)}
.site-head.transparent.scrolled{position:sticky;background:#fff;border-bottom-color:var(--line)}
.site-head.transparent + .topbar{display:none}
.site-head.transparent ~ main .hero:first-child{margin-top:calc(-1 * var(--head-h,84px))}

/* ---------- Untermenü mit Beschreibung ---------- */
.sub.mit-text{min-width:300px;padding:.6rem}
.sub.mit-text a{align-items:flex-start;gap:.7rem;padding:.7rem .6rem}
.sub-ic{width:36px;height:36px;border-radius:var(--rad-s);display:grid;place-items:center;flex:none;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text)}
.sub.mit-text b{display:block;font-weight:700}
.sub.mit-text small{display:block;color:var(--soft);font-weight:400;font-size:.82rem;margin-top:.1rem}
@media (max-width:1100px){.sub.mit-text{padding:0}.sub-ic{background:transparent;color:var(--c1-text)}}

/* ---------- Fusszeile: kompakt ---------- */
.site-foot.kompakt .foot-k{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.75rem;padding:1.5rem 0}
.site-foot.kompakt .logo{margin:0}
.site-foot.kompakt .fk-links{display:flex;flex-wrap:wrap;gap:0 1.25rem;margin-right:auto}
.site-foot.kompakt .fk-links a{font-size:.92rem}
.site-foot.kompakt .copy-line{flex-basis:100%;border-top:1px solid rgba(255,255,255,.12);padding-top:1rem;margin:0}

/* ---------- Zeitleiste ---------- */
.timeline{max-width:760px;margin-inline:auto;position:relative;padding-left:2.5rem}
.timeline::before{content:"";position:absolute;left:.55rem;top:.4rem;bottom:.4rem;width:2px;background:var(--line)}
.tl-item{position:relative;padding-bottom:2.25rem}
.tl-item:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:-2.5rem;top:.2rem;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--c1);border:3px solid #fff;box-shadow:0 0 0 2px var(--c1)}
.tl-jahr{display:inline-block;font-weight:800;color:var(--c1-text);font-size:.9rem;margin-bottom:.25rem}
.tl-body h3{margin-bottom:.3rem}
.tl-body p{color:var(--soft);margin:0}

/* ---------- Video (Klick-Schranke) ---------- */
.video-gate{position:relative;border-radius:var(--rad);overflow:hidden;background:var(--dark) center/cover no-repeat;isolation:isolate}
.video-gate::before{content:"";display:block;padding-top:56.25%}
.video-gate::after{content:"";position:absolute;inset:0;background:rgba(10,16,28,.28);z-index:0}
.video-btn{position:absolute;inset:0;width:100%;height:100%;border:0;background:none;cursor:pointer;display:grid;place-items:center;z-index:1}
.video-play{width:84px;height:84px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--dark);display:grid;place-items:center;transition:transform .2s,background .2s}
.video-play svg:first-child{display:none}
.video-btn:hover .video-play{transform:scale(1.08);background:#fff}
.video-gate iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;z-index:2}

/* ---------- Cookie-Banner (nur sichtbar, wenn im Admin eingeschaltet) ---------- */
.cookiebar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--dark);color:#e6ebf3;box-shadow:0 -8px 30px rgba(0,0,0,.25)}
.cookiebar[hidden]{display:none}
.cookiebar .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.5rem;padding:1rem 0}
.cookiebar p{margin:0;flex:1 1 320px;font-size:.92rem;color:#cdd5e4}
.cookiebar a{color:#fff;text-decoration:underline}
.cookiebar-btns{display:flex;gap:.6rem;flex:none}
.cookiebar .btn{padding:.7rem 1.3rem;font-size:.92rem}
.cookiebar .btn.ghost{color:#fff;border-color:rgba(255,255,255,.5)}
.cookiebar .btn.ghost:hover{background:rgba(255,255,255,.12)}
@media (max-width:560px){.cookiebar-btns{width:100%}.cookiebar-btns .btn{flex:1}}

/* ======================================================================
   15 KOPFZEILEN-STILE — die drei bekannten (standard/zentriert/transparent)
   bleiben oben definiert; hier die zwölf weiteren als reine Aufsätze auf
   demselben Markup (Logo, Burger, Menü, Knopf).
   ====================================================================== */
.head-tel{display:none;align-items:center;gap:.4rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap;margin-left:auto}
.site-head.stil-kontakt .head-tel{display:flex}
.site-head.stil-kontakt .nav{margin-left:1.25rem}
@media (max-width:1100px){.site-head.stil-kontakt .head-tel span{display:none}}

/* 4. Gespiegelt */
.site-head.stil-rechts .bar{flex-direction:row-reverse}
.site-head.stil-rechts .nav{margin-left:0;margin-right:auto;flex-direction:row-reverse}
.site-head.stil-rechts .nav-cta{order:-1}
@media (max-width:1100px){.site-head.stil-rechts .bar{flex-direction:row}.site-head.stil-rechts .nav{flex-direction:column}}

/* 5. Dreispaltig: Logo fix mittig via Grid */
@media (min-width:1101px){
  .site-head.stil-dreispaltig .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
  .site-head.stil-dreispaltig .logo{grid-column:2;justify-self:center}
  .site-head.stil-dreispaltig .nav{grid-column:1/2;grid-row:1;margin:0;justify-self:start}
  .site-head.stil-dreispaltig .nav-cta{grid-column:3;grid-row:1;justify-self:end;margin-left:0}
  .site-head.stil-dreispaltig .burger{grid-column:3}
}

/* 6. Minimal: immer eingeklappt, auch am Desktop */
.site-head.stil-minimal .burger{display:block}
.site-head.stil-minimal .nav{display:none;position:fixed;inset:0;background:#fff;padding:6rem 1.5rem 2rem;overflow:auto;z-index:60}
.site-head.stil-minimal .nav.open{display:flex;flex-direction:column}
.site-head.stil-minimal .nav>ul{flex-direction:column;gap:0;width:100%}
.site-head.stil-minimal .nav ul a,.site-head.stil-minimal .nav ul button{font-size:1.3rem;padding:.9rem .5rem;border-bottom:1px solid var(--line)}
.site-head.stil-minimal .nav-cta{margin-top:1.5rem;align-self:flex-start}

/* 7. Dunkel */
.site-head.stil-dunkel{background:var(--dark);border-bottom-color:rgba(255,255,255,.12)}
.site-head.stil-dunkel .logo-text,.site-head.stil-dunkel .nav ul a,.site-head.stil-dunkel .nav ul button{color:#fff}
.site-head.stil-dunkel .nav ul a:hover,.site-head.stil-dunkel .nav ul button:hover{color:var(--c2)}
.site-head.stil-dunkel .burger{background:rgba(255,255,255,.12)}
.site-head.stil-dunkel .burger span,.site-head.stil-dunkel .burger span::before,.site-head.stil-dunkel .burger span::after{background:#fff}
.site-head.stil-dunkel .sub{background:var(--dark);border-color:rgba(255,255,255,.14)}
.site-head.stil-dunkel .sub a{color:#fff}.site-head.stil-dunkel .sub a:hover{background:rgba(255,255,255,.08)}

/* 8. Mit Akzentlinie */
.site-head.stil-umrandet{border-bottom:3px solid var(--c2)}

/* 9. Schwebende Insel */
.site-head.stil-insel{background:transparent;border:0;position:sticky;top:.75rem}
.site-head.stil-insel .bar{background:#fff;border-radius:999px;box-shadow:var(--shadow);border:1px solid var(--line);padding-left:1.4rem}
@media (max-width:1100px){.site-head.stil-insel .bar{border-radius:var(--rad)}}

/* 10. Gross */
.site-head.stil-gross .bar{min-height:110px}
.site-head.stil-gross .logo img{height:56px}
.site-head.stil-gross .logo-text{font-size:1.8rem}

/* 11. Schmal */
.site-head.stil-schmal .bar{min-height:52px}
.site-head.stil-schmal .logo img{height:30px}
.site-head.stil-schmal .nav ul a,.site-head.stil-schmal .nav ul button{padding:.45rem .7rem;font-size:.92rem}

/* 12. Karte */
.site-head.stil-karte{background:transparent;border:0;position:sticky;top:.75rem}
.site-head.stil-karte .bar{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);border:1px solid var(--line)}

/* 13. Menü auf Akzentfarbe */
.site-head.stil-akzent{background:var(--c2)}
.site-head.stil-akzent .logo-text,.site-head.stil-akzent .nav ul a,.site-head.stil-akzent .nav ul button{color:var(--on-c2)}
.site-head.stil-akzent .nav>ul>li>[aria-current="page"],.site-head.stil-akzent .nav>ul>li.aktiv>button{box-shadow:inset 0 -3px 0 var(--on-c2)}
.site-head.stil-akzent .nav-cta{background:var(--on-c2);color:var(--c2);border-color:var(--on-c2)}

/* 14. Unterstrichen */
.site-head.stil-unterstrichen .nav ul a,.site-head.stil-unterstrichen .nav ul button{position:relative}
.site-head.stil-unterstrichen .nav>ul>li>a::after,.site-head.stil-unterstrichen .nav>ul>li>button::after{content:"";position:absolute;left:.9rem;right:.9rem;bottom:.3rem;height:2px;background:var(--c1);transform:scaleX(0);transition:transform .2s}
.site-head.stil-unterstrichen .nav>ul>li>a:hover::after,.site-head.stil-unterstrichen .nav>ul>li>button:hover::after{transform:scaleX(1)}

/* ======================================================================
   15 FUSSZEILEN-STILE
   ====================================================================== */
.foot-cta{background:var(--c1);color:var(--on-c1)}
.foot-cta .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;padding:1.5rem 0}
.foot-cta span{font-weight:700;font-size:1.1rem}
.foot-cta .btn{background:var(--on-c1);color:var(--c1);border-color:var(--on-c1)}

/* 3. Zentriert */
.site-foot.stil-mitte .foot{text-align:center;justify-items:center}
.site-foot.stil-mitte .foot>*{display:flex;flex-direction:column;align-items:center}
.site-foot.stil-mitte address{text-align:center}
.site-foot.stil-mitte h2::after{left:50%;transform:translateX(-50%)}
.site-foot.stil-mitte .social{justify-content:center}

/* 5. Hell */
.site-foot.stil-hell{background:var(--grey);color:var(--ink)}
.site-foot.stil-hell .logo-text{color:var(--ink)}
.site-foot.stil-hell h2{color:var(--ink)}
.site-foot.stil-hell a{color:var(--soft)}
.site-foot.stil-hell a:hover{color:var(--ink)}
.site-foot.stil-hell .social a{background:#fff;color:var(--ink);border:1px solid var(--line)}
.site-foot.stil-hell .copy-line{border-top-color:var(--line);color:var(--soft)}

/* 6. Karten */
.site-foot.stil-karten .foot{gap:1rem}
.site-foot.stil-karten .foot>nav,.site-foot.stil-karten .foot>div{background:rgba(255,255,255,.06);border-radius:var(--rad-s);padding:1.25rem 1.4rem}

/* 8. Mit Akzentlinie oben */
.site-foot.stil-akzent_rand{border-top:4px solid var(--c2)}

/* 9. Grosses Logo */
.site-foot.stil-grosses_logo .f-about .logo img{height:64px}
.site-foot.stil-grosses_logo .f-about .logo-text{font-size:2.1rem}

/* 11. Spalten mittig */
@media (min-width:900px){.site-foot.stil-spalten_mittig .foot{justify-content:center;text-align:center}.site-foot.stil-spalten_mittig .foot>nav,.site-foot.stil-spalten_mittig .foot>div{flex:0 1 220px}}

/* 12. Grosszügig */
.site-foot.stil-hoch .foot{padding-top:clamp(4.5rem,7vw,7rem);padding-bottom:clamp(3.5rem,5vw,5rem)}

/* 13. Akzentfarbe */
.site-foot.stil-akzentfarbe{background:var(--c2);color:var(--on-c2)}
.site-foot.stil-akzentfarbe .logo-text,.site-foot.stil-akzentfarbe h2{color:var(--on-c2)}
.site-foot.stil-akzentfarbe .logo-text::first-letter{color:var(--on-c2)}
.site-foot.stil-akzentfarbe a{color:var(--on-c2);opacity:.85}
.site-foot.stil-akzentfarbe a:hover{opacity:1}
.site-foot.stil-akzentfarbe h2::after{background:var(--on-c2)}
.site-foot.stil-akzentfarbe .social a{background:rgba(0,0,0,.12);color:var(--on-c2)}
.site-foot.stil-akzentfarbe .copy-line{border-top-color:rgba(0,0,0,.15)}

/* 14. Schlicht */
.site-foot.stil-schlicht h2{padding-bottom:0;margin-bottom:.7rem}
.site-foot.stil-schlicht h2::after{display:none}
.site-foot.stil-schlicht .foot{padding-top:clamp(2.5rem,4vw,3.5rem)}

/* 15. Mit Rahmen */
.site-foot.stil-rahmen{padding:1.5rem}
.site-foot.stil-rahmen .foot{border:1px solid rgba(255,255,255,.14);border-radius:var(--rad);padding:clamp(1.75rem,3vw,3rem)}

/* ======================================================================
   NEUE BAUSTEINE
   ====================================================================== */

/* Schritte (horizontaler Ablauf) */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:2rem}
.schritt{position:relative;padding-top:.5rem}
.schritt-nr{display:inline-flex;align-items:center;justify-content:center;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--c1);color:var(--on-c1);font-weight:800;font-size:1.15rem;margin-bottom:1rem}
.schritt h3{margin:0 0 .4rem}
.schritt p{margin:0;color:var(--soft)}

/* Vorher/Nachher-Vergleich */
.vgl{position:relative;aspect-ratio:16/10;border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);max-width:900px;margin-inline:auto;user-select:none;touch-action:pan-y}
.vgl-nachher,.vgl-vorher{position:absolute;inset:0}
.vgl-nachher img,.vgl-vorher-in img{width:100%;height:100%;object-fit:cover;display:block}
.vgl-vorher{width:50%;overflow:hidden}
.vgl-vorher-in{width:200%;max-width:none}
.vgl-griff{position:absolute;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;display:flex;align-items:center;justify-content:center;cursor:ew-resize}
.vgl-griff::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.15)}
.vgl-griff span{position:relative;width:40px;height:40px;border-radius:50%;background:#fff;box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.vgl-griff span::before{content:"◂▸";font-size:.85rem;letter-spacing:.15rem;color:var(--ink)}
.vgl-tag{position:absolute;bottom:.9rem;background:rgba(17,24,39,.72);color:#fff;font-size:.78rem;font-weight:700;padding:.3rem .7rem;border-radius:999px;pointer-events:none}
.vgl-tag-l{left:.9rem}.vgl-tag-r{right:.9rem}

/* Bewertungen */
.bewertungen{text-align:center;max-width:420px;margin-inline:auto}
.bw-sterne{display:flex;justify-content:center;gap:.15rem;color:#f5a524}
.bw-sterne .ic{width:24px;height:24px}
.bw-zahl{font-weight:700;font-size:1.15rem;margin:.6rem 0 .1rem}

/* Trenner */
.trenner-s{height:1.5rem}
.trenner-m{height:3.5rem}
.trenner-l{height:6.5rem}
.trenner.mit-linie{display:flex;align-items:center}
.trenner.mit-linie::after{content:"";display:block;width:100%;height:1px;background:var(--line)}

/* Grosses Zitat */
.gross-zitat{max-width:760px;margin:0 auto;text-align:center;border:0;padding:0}
.gross-zitat p{font-size:clamp(1.35rem,2.6vw,1.9rem);font-weight:700;line-height:1.4;color:var(--ink);margin:0 0 1.1rem;font-style:normal}
.gross-zitat footer{font-size:.95rem;color:var(--soft)}
.gross-zitat footer span{display:block;font-size:.85rem;opacity:.8}

/* Download-Liste */
.downloads{display:flex;flex-direction:column;gap:.8rem}
.dl-item{display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad-s);text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
.dl-item:hover{box-shadow:var(--shadow);border-color:var(--c1)}
.dl-item b{display:block;color:var(--ink)}
.dl-item small{display:block;color:var(--soft);font-size:.85rem;margin-top:.1rem}
.dl-item em{margin-left:auto;font-style:normal;font-size:.75rem;font-weight:700;color:var(--soft);background:var(--grey);padding:.25rem .55rem;border-radius:6px}

/* Öffnungszeiten */
.oz-tabelle{width:100%;border-collapse:collapse;margin-bottom:.8rem}
.oz-tabelle td{padding:.55rem 0;border-bottom:1px solid var(--line)}
.oz-tabelle td:first-child{font-weight:600;padding-right:1.5rem}
.oz-tabelle tr:last-child td{border-bottom:0}

/* ---------- Neun weitere Bausteine ---------- */

/* Statistik-Balken */
.komp{margin-bottom:1.3rem}
.komp-kopf{display:flex;justify-content:space-between;font-weight:600;margin-bottom:.4rem}
.komp-bar{height:10px;border-radius:999px;background:var(--grey);overflow:hidden}
.komp-fill{height:100%;background:var(--c1);border-radius:999px;transition:width 1s ease}

/* Newsletter */
.newsletter{max-width:560px;margin:0 auto;text-align:center}
.newsletter h2{margin:0 0 .5rem}
.nl-form{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap;justify-content:center}
.nl-form input{flex:1 1 260px;padding:.75rem 1rem;border:1px solid var(--line);border-radius:var(--rad-s);font:inherit}

/* Auszeichnungen */
.auszeichnungen{display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center}
.ausz{display:flex;flex-direction:column;align-items:center;gap:.5rem;width:130px;text-align:center}
.ausz img{width:72px;height:72px;object-fit:contain}
.ausz span{font-size:.82rem;color:var(--soft);font-weight:600}

/* Social-Leiste */
.social-leiste{display:flex;align-items:center;justify-content:center;gap:1rem;flex-wrap:wrap}
.social-leiste span{font-weight:700}
.social-leiste .social{margin:0}

/* Vor-/Nachteile */
.vgl-liste{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem}
.vgl-liste h3{margin:0 0 1rem}
.vgl-liste ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.vgl-liste li{display:flex;align-items:flex-start;gap:.6rem}
.vgl-liste li .ic{color:var(--ok);flex:none;margin-top:.1rem}
.vgl-liste ul.minus li .ic{color:#b3124f}
@media (max-width:700px){.vgl-liste{grid-template-columns:1fr}}

/* Grosse Zahl */
.grosszahl{text-align:center;max-width:500px;margin:0 auto}
.gz-zahl{display:block;font-size:clamp(3rem,7vw,5rem);font-weight:800;color:var(--c1);line-height:1}
.grosszahl h3{margin:.6rem 0 .4rem}
.grosszahl p{color:var(--soft);margin:0}

/* Angebotsliste */
.angebotsliste{display:flex;flex-direction:column;gap:.3rem}
.angebot-zeile{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1rem 0;border-bottom:1px dashed var(--line)}
.angebot-zeile:last-child{border-bottom:0}
.angebot-zeile b{color:var(--ink)}
.angebot-zeile p{margin:.25rem 0 0;color:var(--soft);font-size:.9rem}
.angebot-preis{font-weight:700;white-space:nowrap;color:var(--c1)}

/* Kontaktperson */
.kontaktperson{display:flex;gap:2rem;align-items:center;max-width:620px;margin:0 auto;flex-wrap:wrap}
.kp-bild{width:140px;height:140px;border-radius:50%;overflow:hidden;flex:none}
.kp-bild img{width:100%;height:100%;object-fit:cover}
.kontaktperson h3{margin:0}
.kp-rolle{color:var(--c1);font-weight:600;margin:.15rem 0 .6rem}
.kp-kontakt{display:flex;gap:1.2rem;margin-top:.8rem;flex-wrap:wrap}
.kp-kontakt a{display:inline-flex;align-items:center;gap:.4rem;color:inherit;text-decoration:none;font-size:.9rem}
.kp-kontakt a:hover{color:var(--c1)}

/* ---------- Acht weitere Bausteine ---------- */

/* Bild-Text-Strecke */
.showcase{display:flex;flex-direction:column;gap:clamp(3rem,6vw,5rem)}
.showcase-item{margin:0}

/* Vergleichsmatrix */
table.matrix{width:100%;border-collapse:collapse}
table.matrix th,table.matrix td{padding:.8rem 1rem;text-align:center;border-bottom:1px solid var(--line)}
table.matrix th:first-child,table.matrix td:first-child{text-align:left;font-weight:600}
table.matrix thead th{font-weight:700;color:var(--c1)}
.mx-ja{color:var(--ok)}
.mx-nein{color:var(--soft);opacity:.5}

/* Countdown */
.countdown{text-align:center}
.countdown h2{margin:0 0 1.3rem}
.cd-zahlen{display:flex;justify-content:center;gap:1.2rem;flex-wrap:wrap}
.cd-zahlen div{background:var(--dark);color:#fff;border-radius:var(--rad-s);padding:1rem 1.3rem;min-width:80px}
.cd-zahlen span{display:block;font-size:2rem;font-weight:800;line-height:1}
.cd-zahlen small{font-size:.72rem;text-transform:uppercase;letter-spacing:.05em;opacity:.75}

/* Icon-Liste */
ul.iconliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.9rem}
ul.iconliste li{display:flex;align-items:center;gap:.8rem}
ul.iconliste .ic{color:var(--c1);flex:none}

/* Stellenangebote */
.stellen{display:flex;flex-direction:column;gap:.7rem}
.stelle{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.1rem 1.3rem;background:#fff;border:1px solid var(--line);border-radius:var(--rad-s);text-decoration:none;color:inherit;transition:box-shadow .15s,border-color .15s}
a.stelle:hover{box-shadow:var(--shadow);border-color:var(--c1)}
.stelle b{display:block;color:var(--ink)}
.stelle p{margin:.2rem 0 0;color:var(--soft);font-size:.88rem}

/* Statement-Banner */
.statement{background:var(--c1);color:var(--on-c1);padding:clamp(3rem,7vw,5.5rem) 0;text-align:center;background-size:cover;background-position:center}
.statement.mit-bild{position:relative}
.statement.mit-bild::before{content:"";position:absolute;inset:0;background:rgba(10,10,20,.55)}
.statement .wrap{position:relative}
.statement p{font-size:clamp(1.5rem,3.2vw,2.4rem);font-weight:800;line-height:1.3;max-width:900px;margin:0 auto}

/* Vertrauens-Leiste */
.vertrauen{display:flex;flex-wrap:wrap;justify-content:center;gap:1.6rem}
.vt-item{display:flex;align-items:center;gap:.5rem;color:var(--soft);font-size:.88rem;font-weight:600}
.vt-item .ic{color:var(--c1)}

/* ---------- Formular-Baukasten: Kontrollkästchen-Feld ---------- */
.kform-check label{display:flex;align-items:center;gap:.5rem;font-weight:400}
.kform-check input{width:auto}

/* ---------- Kundenbewertungen: Sterne-Eingabe und kleine Sterne-Anzeige ---------- */
.bw-eingabe{display:flex;flex-direction:row-reverse;justify-content:flex-end;gap:.2rem;margin-bottom:1.1rem}
.bw-eingabe input{position:absolute;opacity:0;width:1px;height:1px}
.bw-eingabe label{cursor:pointer;color:#d8dce3;transition:color .12s}
.bw-eingabe label:hover,.bw-eingabe label:hover ~ label,.bw-eingabe input:checked ~ label{color:#f5a524}
.bw-sterne-klein{display:flex;gap:.1rem;color:#f5a524;margin-bottom:.5rem}
.bw-sterne-klein .ic{width:16px;height:16px}
.f-ok{background:#e9f7ef;color:#0f7a4a;padding:.8rem 1rem;border-radius:var(--rad-s);font-weight:600}

/* ---------- Zwölf weitere Bausteine (Katalog-Ergänzung) ---------- */

/* Mehrspaltiger Text */
.spaltentext.sp2{columns:2;column-gap:2.5rem}
.spaltentext.sp3{columns:3;column-gap:2rem}
.spaltentext.sp4{columns:4;column-gap:1.6rem}
@media (max-width:800px){.spaltentext{columns:1!important}}

/* Reiter (Tabs) */
.tabs-nav{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-bottom:1.6rem}
.tabs-btn{padding:.6rem 1.3rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-weight:600;cursor:pointer;color:var(--soft)}
.tabs-btn.aktiv{background:var(--c1);color:var(--on-c1);border-color:var(--c1)}
.tabs-panel{display:none;max-width:760px;margin:0 auto}
.tabs-panel.aktiv{display:block}

/* Wall of Love */
.wall{columns:3;column-gap:1rem}
.wall-item{break-inside:avoid;background:#fff;border:1px solid var(--line);border-radius:var(--rad-s);padding:1.1rem 1.3rem;margin-bottom:1rem}
.wall-item p{margin:0 0 .5rem;font-size:.92rem}
@media (max-width:800px){.wall{columns:1}}

/* Fallstudie */
.case-study{max-width:900px;margin:0 auto}
.case-study h3{text-align:center;margin-bottom:1.6rem}
.cs-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem}
.cs-label{display:block;font-weight:700;color:var(--c1);font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;margin-bottom:.4rem}
@media (max-width:750px){.cs-grid{grid-template-columns:1fr}}

/* Masonry-Galerie */
.masonry{columns:3;column-gap:.9rem}
.masonry figure{break-inside:avoid;margin:0 0 .9rem}
.masonry img{width:100%;display:block;border-radius:var(--rad-s)}
.masonry figcaption{font-size:.8rem;color:var(--soft);margin-top:.3rem}
@media (max-width:800px){.masonry{columns:2}}

/* PDF-Viewer */
.pdf-frame{width:100%;height:70vh;border:1px solid var(--line);border-radius:var(--rad-s)}

/* Lauftext */
.marquee{overflow:hidden;background:var(--dark);padding:.9rem 0;white-space:nowrap}
.marquee-track{display:inline-block;animation:marquee-lauf 22s linear infinite}
.marquee-track span{display:inline-block;color:#fff;font-weight:700;padding:0 2.5rem}
@keyframes marquee-lauf{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Speisekarte */
.speisekarte{display:flex;flex-direction:column;gap:.3rem}
.sk-zeile{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;padding:1rem 0;border-bottom:1px dashed var(--line)}
.sk-zeile:last-child{border-bottom:0}
.sk-zeile p{margin:.2rem 0 0;color:var(--soft);font-size:.9rem}
.sk-zeile small{display:block;color:var(--soft);font-size:.76rem;font-style:italic;margin-top:.2rem}

/* Social-Sharing */
.social-share{display:flex;align-items:center;justify-content:center;gap:1rem}
.social-share span{font-weight:700;margin-right:.3rem}
.social-share a{display:inline-flex;width:40px;height:40px;border-radius:50%;background:var(--grey);align-items:center;justify-content:center;color:var(--ink)}
.social-share a:hover{background:var(--c1);color:var(--on-c1)}

/* Schwebender Kontakt-Button */
.schweber{position:fixed;right:1.3rem;bottom:1.3rem;z-index:70;display:flex;align-items:center;gap:.5rem;background:var(--c1);color:var(--on-c1);padding:.9rem;border-radius:999px;box-shadow:0 10px 30px rgba(0,0,0,.25);text-decoration:none}
.schweber span{font-weight:700;padding-right:.3rem;display:none}
@media (min-width:700px){.schweber span{display:inline}}
.schweber-whatsapp{background:#25d366;color:#fff}

/* Balkendiagramm */
.balken{display:flex;flex-direction:column;gap:.9rem}
.balken-zeile{display:grid;grid-template-columns:140px 1fr 50px;align-items:center;gap:.8rem}
.balken-label{font-size:.88rem;font-weight:600}
.balken-spur{height:14px;border-radius:999px;background:var(--grey);overflow:hidden}
.balken-fuell{height:100%;background:var(--c1);border-radius:999px}
.balken-wert{text-align:right;font-weight:700;font-size:.88rem}

/* ======================================================================
   FORMULAR-STILE (Kontakt & Kontaktformular)
   ====================================================================== */

/* Dunkel */
.kform-stil-dunkel .c-form,.kform-solo-stil-dunkel .kform{background:var(--dark);color:#fff}
.kform-stil-dunkel .c-form label,.kform-solo-stil-dunkel .kform label{color:#fff}
.kform-stil-dunkel .c-form input,.kform-stil-dunkel .c-form textarea,.kform-solo-stil-dunkel .kform input,.kform-solo-stil-dunkel .kform textarea{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#fff}
.kform-stil-dunkel .c-form .f-note,.kform-solo-stil-dunkel .kform .f-note{color:rgba(255,255,255,.65)}

/* Minimal */
.kform-stil-minimal .c-form,.kform-solo-stil-minimal .kform{background:transparent;border:0;box-shadow:none;padding:0}
.kform-stil-minimal .kform input,.kform-stil-minimal .kform textarea,.kform-solo-stil-minimal .kform input,.kform-solo-stil-minimal .kform textarea{border:0;border-bottom:2px solid #cfd6e1;border-radius:0;padding:.7rem .2rem;background:transparent}
.kform-stil-minimal .kform input:focus,.kform-stil-minimal .kform textarea:focus,.kform-solo-stil-minimal .kform input:focus,.kform-solo-stil-minimal .kform textarea:focus{border-color:var(--c1);box-shadow:none}

/* Rund */
.kform-stil-rund .c-form,.kform-solo-stil-rund .kform{border-radius:2rem}
.kform-stil-rund .kform input,.kform-stil-rund .kform textarea,.kform-solo-stil-rund .kform input,.kform-solo-stil-rund .kform textarea{border-radius:999px;padding:.9rem 1.4rem}
.kform-stil-rund .kform textarea,.kform-solo-stil-rund .kform textarea{border-radius:1.4rem}
.kform-stil-rund .kform button,.kform-solo-stil-rund .kform button{border-radius:999px}

/* Akzent-Rahmen */
.kform-stil-akzent .c-form,.kform-solo-stil-akzent .kform{border:2px solid var(--c1);box-shadow:none;position:relative}
.kform-stil-akzent .c-form::before,.kform-solo-stil-akzent .kform::before{content:"";position:absolute;top:-2px;left:-2px;right:-2px;height:6px;background:var(--c1);border-radius:var(--rad) var(--rad) 0 0}

/* Seitlich (versetzte, grosszügige Karte) */
.kform-stil-seitlich .c-form{margin-top:2.5rem;box-shadow:0 24px 60px -20px rgba(16,24,40,.25);padding:clamp(2rem,4vw,3.2rem)}
.kform-solo-stil-seitlich .kform{box-shadow:0 24px 60px -20px rgba(16,24,40,.25);padding:clamp(2rem,4vw,3.2rem)}

/* Zentriert, einspaltig */
.kform-stil-zentriert{display:block;max-width:640px;margin:0 auto}
.kform-stil-zentriert .c-info{margin-bottom:2.5rem;text-align:center}
.kform-stil-zentriert .c-info .clist{justify-content:center}
.kform-solo-stil-zentriert{max-width:560px}

/* Modern: Kontakt-Kacheln, runde Formularkarte, weiche Felder */
.kform-stil-modern{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(1.6rem,4vw,3.4rem)}
.kform-stil-modern.c-solo{display:block}
.kform-stil-modern .c-info .prose{font-size:1.05rem;max-width:52ch}
.ck-liste{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem}
.c-info>.ck-liste:first-child{margin-top:0}
.c-solo .ck-liste{grid-template-columns:repeat(2,minmax(0,1fr));max-width:980px;margin-inline:auto}
.ck-liste li{position:relative;display:flex;gap:1rem;align-items:center;background:#fff;color:var(--ink);border-radius:18px;padding:1rem 1.15rem;
  box-shadow:0 0 0 1px rgba(16,24,40,.05),0 14px 34px -26px rgba(16,24,40,.4);transition:transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s}
.ck-liste li.oben{align-items:flex-start}
.ck-liste li>div{min-width:0;flex:1}
.ck-liste .c-ic{width:48px;height:48px;border-radius:14px;transition:background .25s,color .25s}
.ck-liste b{display:block;font-size:.74rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--c1-text,var(--c1));margin-bottom:.2rem}
.ck-liste .ck-w{display:block;font-weight:700;font-size:1.02rem;line-height:1.45;color:inherit;text-decoration:none;overflow-wrap:anywhere}
.ck-liste a::after{content:"";position:absolute;inset:0;border-radius:18px}
.ck-route{display:inline-block;margin-top:.35rem;font-size:.86rem;font-weight:700;color:var(--c1-text,var(--c1));text-decoration:none}
.ck-pf{flex:none;align-self:center;color:var(--soft);transition:transform .25s,color .25s}
.ck-liste li.klick:hover{transform:translateY(-3px);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 22px 44px -26px rgba(16,24,40,.5)}
.ck-liste li.klick:hover .c-ic{background:var(--c1);color:var(--on-c1,#fff)}
.ck-liste li.klick:hover .ck-pf{transform:translateX(4px);color:var(--c1-text,var(--c1))}
.ck-zeiten{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.2rem 1.1rem;margin:0;font-size:.95rem;line-height:1.45}
.ck-zeiten dt{font-weight:700;white-space:nowrap}
.ck-zeiten dd{margin:0}
.ck-zeiten dd.ganz{grid-column:1/-1}
.kform-stil-modern .c-form,.kform-solo-stil-modern .kform{background:#fff;color:var(--ink);border:0;border-radius:22px;padding:clamp(1.4rem,3vw,2.4rem);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 24px 56px -32px rgba(16,24,40,.45)}
.kform-stil-modern .kform label,.kform-solo-stil-modern .kform label{font-size:.82rem;font-weight:700;color:var(--soft)}
.kform-stil-modern .kform input,.kform-stil-modern .kform textarea,.kform-stil-modern .kform select,
.kform-solo-stil-modern .kform input,.kform-solo-stil-modern .kform textarea,.kform-solo-stil-modern .kform select{border:1.5px solid transparent;border-radius:12px;background:#f3f4f6}
.kform-stil-modern .kform input:hover,.kform-stil-modern .kform textarea:hover,.kform-solo-stil-modern .kform input:hover,.kform-solo-stil-modern .kform textarea:hover{background:#eceef1}
.kform-stil-modern .kform input:focus,.kform-stil-modern .kform textarea:focus,.kform-stil-modern .kform select:focus,
.kform-solo-stil-modern .kform input:focus,.kform-solo-stil-modern .kform textarea:focus,.kform-solo-stil-modern .kform select:focus{background:#fff;border-color:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 16%,transparent);outline:none}
.kform-stil-modern .kform>div,.kform-solo-stil-modern .kform>div{margin-bottom:1rem}
.kform-stil-modern .kform .kform-check label,.kform-solo-stil-modern .kform .kform-check label{font-size:.95rem;color:var(--ink)}
.kform-stil-modern .kform .kform-check input,.kform-solo-stil-modern .kform .kform-check input{width:auto}
.kform-stil-modern .kform button.btn,.kform-solo-stil-modern .kform button.btn{width:100%;justify-content:center;padding-block:1rem}
.kform-stil-modern+.map-gate{border:0;border-radius:22px;box-shadow:0 0 0 1px rgba(16,24,40,.05),0 20px 46px -30px rgba(16,24,40,.4)}
.kform-stil-modern+.map-gate::before{padding-top:max(34%,280px)}
@media (max-width:900px){.kform-stil-modern{grid-template-columns:1fr}}
@media (max-width:700px){.c-solo .ck-liste{grid-template-columns:1fr}}

/* Geteilt: Infos auf Farbfläche, ein gemeinsamer Rahmen */
.kform-stil-geteilt{display:grid;grid-template-columns:.85fr 1.15fr;gap:0;border-radius:var(--rad);overflow:hidden;box-shadow:var(--shadow);align-items:stretch}
.kform-stil-geteilt .c-info{background:var(--c1);color:var(--on-c1);padding:clamp(2rem,4vw,3rem)}
.kform-stil-geteilt .c-info a{color:var(--on-c1)}
.kform-stil-geteilt .c-form{border:0;box-shadow:none;border-radius:0}
@media (max-width:800px){.kform-stil-geteilt{grid-template-columns:1fr}}
.kform-stil-geteilt .c-list b{color:rgba(255,255,255,.7)}
.kform-stil-dunkel .c-info b{color:rgba(255,255,255,.55)}

/* Kontaktangaben-Seite je Stil sichtbar unterscheiden (nicht nur das Formular) */
.kform-stil-dunkel .c-ic{background:var(--dark);color:#fff}
.kform-stil-minimal .c-list{gap:1.1rem}
.kform-stil-minimal .c-ic{background:transparent;color:var(--c1);width:auto;height:auto}
.kform-stil-minimal .c-list li{border-left:2px solid var(--line);padding-left:1rem}
.kform-stil-rund .c-ic{border-radius:50%}
.kform-stil-akzent .c-ic{background:var(--c1);color:var(--on-c1)}
.kform-stil-seitlich .c-ic{width:64px;height:64px}
.kform-stil-seitlich .c-list{gap:1.9rem}
.kform-stil-zentriert .c-list{grid-template-columns:repeat(2,minmax(200px,1fr));justify-content:center;max-width:560px;margin-inline:auto}
.kform-stil-geteilt .c-ic{background:rgba(255,255,255,.18);color:#fff}

/* Stellen & Bewerbung */
.jobs{display:grid;gap:1.25rem;margin-bottom:3rem}
.job{background:#fff;border:1px solid var(--line);border-radius:var(--rad);padding:1.6rem 1.8rem}
.bg-grau .job,.bg-farbe .job,.bg-akzent .job,.bg-verlauf .job,.bg-dunkel .job,.bg-bild .job{box-shadow:0 8px 30px rgba(0,0,0,.06)}
.job-kopf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.4rem 1.5rem;margin-bottom:.8rem}
.job-kopf h3{margin:0;font-size:1.35rem}
.job-meta{margin:0;color:var(--soft,#666);font-size:.92rem;display:flex;gap:.55rem;flex-wrap:wrap}
.job-meta span{opacity:.5}
.job .prose{margin-bottom:1rem}
.job .btn{margin-top:.3rem}
#bewerbung h3{margin:0 0 .8rem}
.kform select{width:100%;font:inherit;color:var(--ink);padding:.9rem 1rem;border-radius:var(--rad-s);border:1px solid #cfd6e1;background:#fff}
.kform input[type=file]{padding:.6rem;background:var(--grey,#f4f4f6);cursor:pointer}
.f-ok{background:#e7f6ec;color:#155d2e;padding:.9rem 1rem;border-radius:var(--rad-s);margin:0 0 1rem;font-weight:600}

/* ---- Ausdruck «Studio»: cremiger Grund, dunkelbraune Blöcke, klare serifenlose Titel mit feiner Linie, Karten ohne Rahmen ---- */
body.ausdruck-studio{--rad:10px;--rad-s:8px;--rad-btn:8px;--ink:color-mix(in srgb,var(--dark) 86%,#ffffff);--soft:color-mix(in srgb,var(--dark) 62%,#ffffff);--grey:color-mix(in srgb,var(--bg) 92%,var(--dark) 8%);--line:color-mix(in srgb,var(--bg) 84%,var(--dark) 16%);font-weight:400;line-height:1.6}
.ausdruck-studio p,.ausdruck-studio li{font-weight:400}
.ausdruck-studio h1,.ausdruck-studio h2,.ausdruck-studio h3{font-weight:500;letter-spacing:-.01em;text-transform:none;line-height:1.15}
.ausdruck-studio h2{font-weight:450}
.ausdruck-studio h2{font-size:clamp(1.45rem,2.3vw,1.95rem)}.ausdruck-studio h3{font-weight:600;font-size:1.05rem}
.ausdruck-studio .prose{font-size:.97rem}.ausdruck-studio .prose a:not(.btn){font-weight:600;text-decoration-thickness:1px}
.ausdruck-studio .kicker{font-family:var(--font);font-weight:600;font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-bottom:.6rem}
.ausdruck-studio .kicker::before,.ausdruck-studio .sec-head:not(.links) .kicker::after{display:none}
.ausdruck-studio .sec-head{max-width:none;margin-bottom:clamp(1.5rem,3vw,2.25rem);padding-bottom:.9rem;border-bottom:1px solid color-mix(in srgb,var(--dark) 30%,transparent)}
.ausdruck-studio .sec-head h2{margin:0}
.ausdruck-studio .sec-head p{color:var(--soft);font-size:.95rem;margin:.5rem 0 0}
.ausdruck-studio .sec-head.links{display:grid;grid-template-columns:1fr minmax(0,24rem);gap:.4rem 3rem;align-items:end}
.ausdruck-studio .sec-head.links .kicker{grid-column:1/-1;margin:0 0 .2rem}
.ausdruck-studio .sec-head.links h2{grid-column:1}
.ausdruck-studio .sec-head.links .sec-lead{grid-column:2;margin:0 0 .15rem;text-align:left}
.ausdruck-studio .sec-head:not(.links) .sec-lead{max-width:40rem;margin-inline:auto}
.ausdruck-studio .bg-dunkel .sec-head,.ausdruck-studio .bg-bild .sec-head,.ausdruck-studio .bg-farbe .sec-head{border-color:rgba(255,255,255,.3)}
.ausdruck-studio .bg-dunkel .sec-head p,.ausdruck-studio .bg-bild .sec-head p,.ausdruck-studio .bg-dunkel .kicker{color:rgba(255,255,255,.72)}
.ausdruck-studio .bg-dunkel,.ausdruck-studio .bg-bild{color:color-mix(in srgb,var(--bg) 85%,transparent)}
.ausdruck-studio .btn{font-weight:600;letter-spacing:0;text-transform:none;font-size:.9rem;padding:.75rem 1.4rem;border-width:1px}
.ausdruck-studio .btn:hover{transform:none;filter:brightness(1.1)}
.ausdruck-studio .btn.ghost{color:var(--dark);border-color:color-mix(in srgb,var(--dark) 45%,transparent)}
.ausdruck-studio .btn.ghost:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.ausdruck-studio .card,.ausdruck-studio .feature,.ausdruck-studio .monatshit,.ausdruck-studio .laden-karte,.ausdruck-studio .schritte.karten .schritt{background:transparent;border:0;box-shadow:none;border-radius:0}
.ausdruck-studio .card:hover,.ausdruck-studio .feature:hover{transform:none;box-shadow:none}
.ausdruck-studio .card-img{border-radius:var(--rad-s)}
.ausdruck-studio .card .body{padding:.85rem 0 0}
.ausdruck-studio .card h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;margin-bottom:.3rem}
.ausdruck-studio .card .body p{font-size:.9rem;color:var(--soft)}
.ausdruck-studio .card h3 a::after{display:none}
.ausdruck-studio .feature{padding:1.25rem 0}
.ausdruck-studio .f-ic{width:56px;height:56px;border:1px solid color-mix(in srgb,var(--dark) 40%,transparent);background:transparent;color:var(--dark);border-radius:50%}
.ausdruck-studio .feature h3{font-size:.95rem}.ausdruck-studio .feature p{font-size:.9rem;color:var(--soft)}
.ausdruck-studio .counter b{font-weight:500;letter-spacing:-.02em}.ausdruck-studio .counter>span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--soft)}
.ausdruck-studio .gallery figure{border-radius:0;background:transparent}.ausdruck-studio .gallery figure img{border-radius:var(--rad-s)}.ausdruck-studio .gallery figcaption{background:transparent;padding:.6rem 0 0;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600}
.ausdruck-studio .bg-dunkel .gallery figcaption{color:#fff}
.ausdruck-studio .monatshit{padding:1rem 0;border-bottom:1px solid var(--line)}
.ausdruck-studio .mh-icon{border:1px solid color-mix(in srgb,var(--dark) 35%,transparent);background:transparent;color:var(--dark)}
.ausdruck-studio .mh-kz{letter-spacing:.18em;color:var(--soft)}.ausdruck-studio .mh-preis{background:var(--dark);color:#fff;border-radius:6px}
.ausdruck-studio .bg-dunkel .monatshit{border-color:rgba(255,255,255,.18)}.ausdruck-studio .bg-dunkel .mh-icon{border-color:rgba(255,255,255,.4);color:#fff}.ausdruck-studio .bg-dunkel .mh-preis{background:var(--bg);color:var(--dark)}
.ausdruck-studio .laden-karte{padding:1rem 0;border-bottom:1px solid var(--line)}
.ausdruck-studio .laden-karte h3{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase}
.ausdruck-studio .laden-karte li a{background:transparent;border:1px solid var(--line);color:var(--dark)}
.ausdruck-studio .laeden-hinweis{background:var(--dark);color:#fff;border-radius:var(--rad)}.ausdruck-studio .laeden-hinweis .btn{background:var(--bg);color:var(--dark);border-color:var(--bg)}
.ausdruck-studio .schritte.karten .schritt{padding:1.2rem 0;border-top:1px solid color-mix(in srgb,var(--dark) 30%,transparent)}
.ausdruck-studio .schritt-nr{background:transparent;border:1px solid color-mix(in srgb,var(--dark) 40%,transparent);color:var(--dark);border-radius:50%;box-shadow:none}
.ausdruck-studio .faq details{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:0}.ausdruck-studio .faq details[open]{box-shadow:none}
.ausdruck-studio .split figure::before{display:none}.ausdruck-studio .split figure{margin:0}.ausdruck-studio .split figure img{border-radius:var(--rad)}
.ausdruck-studio .video-gate{border-radius:var(--rad)}
.ausdruck-studio .cta{background:var(--dark);color:#fff}.ausdruck-studio .cta h2{color:#fff}.ausdruck-studio .cta p{color:rgba(255,255,255,.75)}
.ausdruck-studio .cta .btn{background:var(--bg);color:var(--dark);border-color:var(--bg)}.ausdruck-studio .cta .btn.ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.5)}
.ausdruck-studio .site-head .nav ul a,.ausdruck-studio .site-head .nav ul button{font-weight:500;letter-spacing:0;text-transform:none;font-size:.92rem}
.ausdruck-studio .site-head.stil-dunkel .nav>ul>li>[aria-current="page"],.ausdruck-studio .site-head.stil-dunkel .nav>ul>li.aktiv>button{background:transparent;color:#fff;box-shadow:none;border-radius:0;text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px}
.ausdruck-studio .site-head .nav-cta{background:var(--bg);color:var(--dark);border-color:var(--bg);border-radius:var(--rad-btn);padding:.6rem 1.2rem;font-size:.88rem}
.ausdruck-studio .site-head .nav-cta:hover{background:#fff}
.ausdruck-studio .site-head .logo-text{font-family:var(--font);font-weight:600;letter-spacing:-.01em}
.ausdruck-studio .site-foot{color:rgba(255,255,255,.72)}.ausdruck-studio .site-foot h2{font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600}.ausdruck-studio .site-foot h2::after{width:100%;height:1px;background:rgba(255,255,255,.25)}
.ausdruck-studio .bf2-raster h2,.ausdruck-studio .bf2-raster h3{text-transform:none;letter-spacing:0;font-weight:600}
@media (max-width:760px){.ausdruck-studio .sec-head.links{grid-template-columns:1fr}.ausdruck-studio .sec-head.links .sec-lead{grid-column:1}}

/* Slider «Studio»: Foto randlos und abgedunkelt, grosser Titel in kurzen Zeilen, Knöpfe als Textlinks mit Pfeil */
.hero.stil-studio .slide{align-items:center;padding:5rem 0 4.5rem}
.hero.stil-studio .slide::before{background:linear-gradient(180deg,rgba(25,14,6,.4) 0%,rgba(25,14,6,.52) 60%,rgba(25,14,6,.66) 100%)}
.hero.stil-studio .hero-txt{max-width:none;display:grid;grid-template-columns:minmax(0,40rem) 1fr;gap:1rem 2rem;align-items:end}
.hero.stil-studio .kicker{grid-column:1;color:rgba(255,255,255,.8);font-family:var(--font);font-weight:600;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase}
.hero.stil-studio .kicker::before{display:none}
.hero.stil-studio h1,.hero.stil-studio h2{grid-column:1;font-weight:500;font-size:clamp(2.3rem,5.4vw,4.6rem);letter-spacing:-.025em;line-height:1.02;text-transform:none;text-shadow:0 2px 20px rgba(0,0,0,.25);margin-bottom:.4em}
.hero.stil-studio .hero-lead{grid-column:1;font-size:clamp(.95rem,1.15vw,1.08rem);max-width:30rem;color:rgba(255,255,255,.88);font-weight:400;text-shadow:none}
.hero.stil-studio .btn-row{grid-column:2;grid-row:1/4;align-self:end;justify-content:flex-end;gap:2rem;margin:0}
.hero.stil-studio .btn,.hero.stil-studio .btn.ghost{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.75);border-radius:0;padding:0 0 .4rem;color:#fff;font-size:1rem;font-weight:500;letter-spacing:0;text-transform:none;gap:.6rem}
.hero.stil-studio .btn::after{content:"↗";font-size:1.05em;line-height:1;transition:transform .2s}
.hero.stil-studio .btn:hover,.hero.stil-studio .btn.ghost:hover{background:transparent;color:#fff;border-color:#fff;filter:none;transform:none}
.hero.stil-studio .btn:hover::after{transform:translate(3px,-3px)}
.hero.stil-studio .s-arrow{width:44px;height:44px;top:auto;bottom:1.5rem;transform:none;border-color:rgba(255,255,255,.5)}
.hero.stil-studio .s-arrow.prev{left:1.5rem}.hero.stil-studio .s-arrow.next{left:calc(1.5rem + 54px);right:auto}
.hero.stil-studio .s-ctrl{left:auto;right:1.5rem;bottom:1.8rem;justify-content:flex-end}
.hero.stil-studio .s-dots button{width:30px;height:2px;background:rgba(255,255,255,.5)}.hero.stil-studio .s-dots button[aria-current="true"]{background:#fff}
@media (max-width:900px){.hero.stil-studio .hero-txt{grid-template-columns:1fr}.hero.stil-studio .btn-row{grid-column:1;grid-row:auto;justify-content:flex-start;margin-top:1rem}.hero.stil-studio .slide{padding:4rem 0 5rem}.hero.stil-studio .s-arrow{display:none}.hero.stil-studio .s-ctrl{left:1.25rem;right:auto;justify-content:flex-start;bottom:1.3rem}}
/* Studio ohne Foto: weiches Licht, feine Kreise und Raster statt Bild – nur wenn kein Bild gesetzt ist */
.hero.stil-studio .slide:not(:has(.hero-bg)){background:radial-gradient(ellipse 60% 70% at 78% 30%,color-mix(in srgb,var(--c2) 26%,transparent),transparent 70%),radial-gradient(ellipse 50% 60% at 15% 90%,color-mix(in srgb,var(--c1) 40%,transparent),transparent 70%),linear-gradient(160deg,color-mix(in srgb,var(--dark) 92%,#fff) 0%,var(--dark) 100%)}
.hero.stil-studio .slide:not(:has(.hero-bg))::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 120px)}
.hero.stil-studio .slide:not(:has(.hero-bg))::after{content:"";position:absolute;right:-8vw;top:50%;width:min(52vw,640px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:1px solid color-mix(in srgb,var(--c2) 45%,transparent);background:radial-gradient(circle,color-mix(in srgb,var(--c2) 10%,transparent) 0 58%,transparent 59%);box-shadow:0 0 0 48px color-mix(in srgb,var(--c2) 3%,transparent),0 0 0 49px color-mix(in srgb,var(--c2) 22%,transparent);pointer-events:none;z-index:1}
.hero.stil-studio .slide:not(:has(.hero-bg)) h1,.hero.stil-studio .slide:not(:has(.hero-bg)) h2{text-shadow:none}
@media (max-width:900px){.hero.stil-studio .slide:not(:has(.hero-bg))::after{width:110vw;right:-55vw;top:auto;bottom:-40vw;transform:none}}

/* Slider «Klein»: niedrig, heller Grund, Serifen-Titel, kleine Kennzeichnung, dunkler Knopf (Vorlage: Preorder-Karten) */
.hero.stil-klein{background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
body .hero.stil-klein .slide{align-items:center;padding:clamp(2.2rem,4vw,3.5rem) 0 clamp(3rem,5vw,4rem);min-height:min(var(--hero-h,230px),90vh)}
.hero.stil-klein .slide::before{content:"";background:radial-gradient(ellipse 45% 80% at 85% 50%,color-mix(in srgb,var(--c2) 14%,transparent),transparent 70%)}
.hero.stil-klein .hero-txt{max-width:46rem}
.hero.stil-klein .kicker{font-family:var(--font);font-weight:600;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:var(--c1-text);margin-bottom:.7rem}
.hero.stil-klein .kicker::before{display:none}
.hero.stil-klein h1,.hero.stil-klein h2{font-weight:400;font-size:clamp(1.7rem,3.3vw,2.7rem);line-height:1.12;letter-spacing:-.01em;color:var(--dark);text-shadow:none;text-transform:none;margin-bottom:.45em}
.hero.stil-klein .hero-lead{color:var(--soft);font-size:clamp(.95rem,1.1vw,1.05rem);max-width:34rem;text-shadow:none;font-weight:400}
.hero.stil-klein .btn-row{margin-top:1.3rem;gap:.7rem}
.hero.stil-klein .btn{background:var(--dark);border-color:var(--dark);color:#fff;font-family:var(--font);font-weight:600;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;padding:.8rem 1.5rem;border-radius:3px}
.hero.stil-klein .btn::after{display:none}
.hero.stil-klein .btn.ghost{background:transparent;color:var(--dark);border-color:color-mix(in srgb,var(--dark) 40%,transparent)}
.hero.stil-klein .btn.ghost:hover{background:var(--dark);color:#fff;border-color:var(--dark)}
.hero.stil-klein .slide.mitte .hero-txt{margin-inline:auto;text-align:center}
.hero.stil-klein .s-arrow{width:38px;height:38px;top:auto;bottom:1.1rem;transform:none;border-color:color-mix(in srgb,var(--dark) 30%,transparent);background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none}
.hero.stil-klein .s-arrow::before{border-color:var(--dark)}.hero.stil-klein .s-arrow:hover{background:var(--dark)}.hero.stil-klein .s-arrow:hover::before{border-color:#fff}
.hero.stil-klein .s-arrow.prev{left:auto;right:calc(1.5rem + 46px)}.hero.stil-klein .s-arrow.next{right:1.5rem}
.hero.stil-klein .s-ctrl{left:1.5rem;right:auto;bottom:1.35rem;justify-content:flex-start}
.hero.stil-klein .s-pause{background:color-mix(in srgb,var(--dark) 12%,transparent)}.hero.stil-klein .s-pause::before,.hero.stil-klein .s-pause::after{background:var(--dark)}
.hero.stil-klein .s-dots button{width:26px;height:2px;background:color-mix(in srgb,var(--dark) 22%,transparent)}.hero.stil-klein .s-dots button[aria-current="true"]{background:var(--dark)}
@media (max-width:700px){.hero.stil-klein .s-arrow{display:none}body .hero.stil-klein .slide{padding-bottom:3.2rem}}
/* Studio: warmer, atmosphärischer Seitenhintergrund statt flacher Fläche – sanfte Lichthöfe in den
   Ecken, dezentes Korn. Bleibt hinter allen Abschnitten mit eigener Deckfarbe (bg-grau/-farbe/-dunkel)
   verborgen und scheint nur durch die hellen Bereiche (Hero, weisse Abschnitte). */
body.ausdruck-studio{
  background:
    radial-gradient(ellipse 900px 620px at 8% 0%, color-mix(in srgb, var(--c2) 18%, transparent), transparent 60%),
    radial-gradient(ellipse 760px 640px at 104% 6%, color-mix(in srgb, var(--c1) 12%, transparent), transparent 62%),
    var(--bg);
  background-repeat:no-repeat;
}

/* Studio: keine weissen Kästen – alles in Creme-Tönen (Formulare, Karten, Tabellen, Dialoge) */
.ausdruck-studio .c-form,.ausdruck-studio .quote,.ausdruck-studio .plan,.ausdruck-studio .bf-karte,.ausdruck-studio .dl-item,.ausdruck-studio .stelle,.ausdruck-studio .wall-item,.ausdruck-studio .job,.ausdruck-studio .kontaktperson,.ausdruck-studio table.prices,.ausdruck-studio .tabs-btn{background:color-mix(in srgb,var(--bg) 60%,#fff);border-color:var(--line)}
.ausdruck-studio .bg-grau .c-form,.ausdruck-studio .bg-grau .quote,.ausdruck-studio .bg-grau .plan,.ausdruck-studio .bg-grau .dl-item,.ausdruck-studio .bg-grau .stelle,.ausdruck-studio .bg-grau .job{background:var(--bg)}
.ausdruck-studio .kform input,.ausdruck-studio .kform textarea,.ausdruck-studio .kform select,.ausdruck-studio .ta-form select,.ausdruck-studio .bf2 input,.ausdruck-studio .bf2 textarea,.ausdruck-studio .bf2 select{background:color-mix(in srgb,var(--bg) 35%,#fff);border-color:color-mix(in srgb,var(--dark) 22%,transparent);border-radius:4px}
.ausdruck-studio .kform input:focus,.ausdruck-studio .kform textarea:focus,.ausdruck-studio .kform select:focus{border-color:var(--dark);box-shadow:none;background:#fff}
.ausdruck-studio .kform label,.ausdruck-studio .ta-form label{font-family:var(--font);font-weight:600;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--dark)}
.ausdruck-studio .kform .btn,.ausdruck-studio .ta-form .btn{background:var(--dark);border-color:var(--dark);color:#fff;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;padding:.85rem 1.6rem;border-radius:3px}
.ausdruck-studio .ta-drop{background:color-mix(in srgb,var(--bg) 60%,#fff);border-color:color-mix(in srgb,var(--dark) 30%,transparent)}
.ausdruck-studio .bf2-karte,.ausdruck-studio .bf2-kat,.ausdruck-studio .bf2-art,.ausdruck-studio .bf2-zahl,.ausdruck-studio .bf2-stufe span,.ausdruck-studio .bf2-chip span,.ausdruck-studio .bf2-feld input,.ausdruck-studio .bf2-feld select,.ausdruck-studio .bf2-feld textarea,.ausdruck-studio .bf2-pos-ctl button:not(.bf2-weg),.ausdruck-studio .bf2-dialog-zu{background:color-mix(in srgb,var(--bg) 60%,#fff)}
.ausdruck-studio .bf2-dialog,.ausdruck-studio .bf2-dialog-kopf{background:var(--bg)}
/* Studio: leichtere Schriftgewichte (Fraunces wirkt sonst zu fett) */
.ausdruck-studio h1,.ausdruck-studio h2,.ausdruck-studio h3,.ausdruck-studio h4{font-weight:400}
.ausdruck-studio h3{font-weight:500}
.ausdruck-studio .hero h1,.ausdruck-studio .hero h2{font-weight:300}
.ausdruck-studio .hero.stil-klein h1,.ausdruck-studio .hero.stil-klein h2{font-weight:300}
.ausdruck-studio .counter b{font-weight:300}
.ausdruck-studio .site-head .logo-text,.ausdruck-studio .site-foot .logo-text{font-weight:500}
.ausdruck-studio .card h3,.ausdruck-studio .feature h3,.ausdruck-studio .laden-karte h3,.ausdruck-studio .gallery figcaption{font-weight:500}
.ausdruck-studio .bf2-raster h2,.ausdruck-studio .bf2-raster h3,.ausdruck-studio .bf2-dialog h2{font-weight:400}
.ausdruck-studio .bf2 strong,.ausdruck-studio .bf2 b,.ausdruck-studio .bf2 label,.ausdruck-studio .bf2-stufe span b,.ausdruck-studio .bf2-art b{font-weight:500}
.ausdruck-studio strong,.ausdruck-studio b,.ausdruck-studio .kform label{font-weight:500}
.ausdruck-studio .btn{font-weight:500}
.ausdruck-studio .site-head .nav ul a,.ausdruck-studio .site-head .nav ul button{font-weight:400}
.ausdruck-studio .mh-preis,.ausdruck-studio .kicker,.ausdruck-studio .counter>span{font-weight:500}
.ausdruck-studio .faq summary{font-weight:500}
.ausdruck-studio .bf2-wrap>h2,.ausdruck-studio .bf2-wrap h2,.ausdruck-studio .bf2-wrap h3{font-weight:400}

/* Klein: rechte Seite – Bild als runde Karte oder dunkle Nummern-Karte */
.hero.stil-klein .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,4vw,4rem);align-items:center}
.hero.stil-klein .kl-seite{position:relative;justify-self:end;width:100%;max-width:40rem}
.hero.stil-klein .kl-bild{position:relative;border-radius:var(--rad);overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.hero.stil-klein .kl-bild img{display:block;width:100%;aspect-ratio:16/11;object-fit:cover;border-radius:var(--rad)}
.hero.stil-klein .kl-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,14,10,.05) 0%,rgba(20,14,10,.5) 100%);pointer-events:none}
.hero.stil-klein .kl-karte{aspect-ratio:16/9;border-radius:var(--rad);background:linear-gradient(150deg,color-mix(in srgb,var(--dark) 88%,#fff),var(--dark));color:#fff;padding:1.5rem 1.7rem;display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;box-shadow:0 20px 40px -24px rgba(0,0,0,.45)}
.hero.stil-klein .kl-nr{font-family:var(--font-h);font-weight:300;font-size:clamp(3rem,6vw,5rem);line-height:1;color:var(--c2);letter-spacing:-.02em}
.hero.stil-klein .kl-nr small{font-family:var(--font);font-size:.8rem;letter-spacing:.2em;margin-left:.6rem;color:rgba(255,255,255,.6);font-weight:500;vertical-align:super}
.hero.stil-klein .kl-kk{margin-top:.6rem;font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.8);font-weight:500}
.hero.stil-klein .kl-ring{position:absolute;right:-18%;top:-40%;width:75%;aspect-ratio:1;border-radius:50%;border:1px solid color-mix(in srgb,var(--c2) 55%,transparent);box-shadow:inset 0 0 0 28px color-mix(in srgb,var(--c2) 8%,transparent),inset 0 0 0 29px color-mix(in srgb,var(--c2) 40%,transparent);pointer-events:none}
.hero.stil-klein .slide.mitte .wrap{grid-template-columns:1fr}.hero.stil-klein .slide.mitte .kl-seite{display:none}
@media (max-width:820px){.hero.stil-klein .wrap{grid-template-columns:1fr}.hero.stil-klein .kl-seite{justify-self:stretch;max-width:none}.hero.stil-klein .kl-karte{aspect-ratio:auto;min-height:7.5rem;padding:1.1rem 1.3rem}.hero.stil-klein .kl-nr{font-size:2.4rem}}
/* Logos: Kopfzeilen-Logo grösser, Logo-Reihe in Farbe (Volg, Battle of Taste) */
.ausdruck-studio .logo img{height:76px}
.ausdruck-studio .logos img{filter:none;opacity:1;max-height:96px;max-width:220px}
.ausdruck-studio .logos{gap:2rem clamp(2.5rem,7vw,6rem)}
@media (max-width:600px){.ausdruck-studio .logo img{height:58px}.ausdruck-studio .logos img{max-height:70px}}
.ausdruck-studio .site-head:not(.stil-dunkel) .nav-cta{background:var(--dark);color:#fff;border-color:var(--dark)}.ausdruck-studio .site-head:not(.stil-dunkel) .nav-cta:hover{background:var(--c1);border-color:var(--c1)}
.ausdruck-studio .site-head:not(.stil-dunkel) .nav>ul>li>[aria-current="page"]{text-decoration:underline;text-underline-offset:.5em;text-decoration-thickness:1px;background:transparent;color:var(--dark)}
@media (max-width:820px){.hero.stil-klein .kl-bild{margin-top:1.2rem}}

/* Klein: ohne Bild einspaltig – keine Karte rechts, Text bis 52rem, feine Goldlinie links */
.hero.stil-klein .kl-karte{display:none}
.hero.stil-klein .slide:not(:has(.kl-bild)) .wrap{grid-template-columns:1fr}
.hero.stil-klein .slide:not(:has(.kl-bild)) .hero-txt{max-width:52rem;padding-left:1.4rem;border-left:2px solid var(--c2)}
.hero.stil-klein .slide:not(:has(.kl-bild)) .hero-lead{max-width:40rem}
.hero.stil-klein .slide:not(:has(.kl-bild))::before{background:radial-gradient(ellipse 40% 90% at 90% 50%,color-mix(in srgb,var(--c2) 12%,transparent),transparent 70%)}
.ausdruck-studio .site-foot .copy-line{color:rgba(255,255,255,.55);border-top-color:rgba(255,255,255,.15)}.ausdruck-studio .site-foot .copy-line .credit{color:rgba(255,255,255,.55)}.ausdruck-studio .site-foot .copy-line a.credit:hover{color:#fff}
/* Studio: Eingabefelder in Creme statt weiss, Datei-Knopf dunkel */
.ausdruck-studio .kform input,.ausdruck-studio .kform textarea,.ausdruck-studio .kform select,.ausdruck-studio .ta-form select,.ausdruck-studio .bf2 input,.ausdruck-studio .bf2 textarea,.ausdruck-studio .bf2 select,.ausdruck-studio .bf2-feld input,.ausdruck-studio .bf2-feld select,.ausdruck-studio .bf2-feld textarea{background:color-mix(in srgb,var(--bg) 90%,var(--dark) 10%);border-color:color-mix(in srgb,var(--dark) 25%,transparent)}
.ausdruck-studio .bg-grau .kform input,.ausdruck-studio .bg-grau .kform textarea,.ausdruck-studio .bg-grau .kform select{background:color-mix(in srgb,var(--bg) 96%,var(--dark) 4%)}
.ausdruck-studio .kform input:focus,.ausdruck-studio .kform textarea:focus,.ausdruck-studio .kform select:focus{background:var(--bg);border-color:var(--dark)}
.ausdruck-studio .kform input[type="file"]{padding:.55rem .6rem}
.ausdruck-studio .kform input[type="file"]::file-selector-button{font:inherit;font-size:.78rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;background:var(--dark);color:#fff;border:0;border-radius:3px;padding:.55rem 1rem;margin-right:.9rem;cursor:pointer}
.ausdruck-studio .kform input[type="file"]::file-selector-button:hover{background:var(--c1)}
.ausdruck-studio .bf2-stufe span,.ausdruck-studio .bf2-chip span,.ausdruck-studio .bf2-zahl,.ausdruck-studio .bf2-pos-ctl button:not(.bf2-weg){background:color-mix(in srgb,var(--bg) 92%,var(--dark) 8%)}

/* ================== 20 neue Hero-Stile (modern, wie bei grossen Baukästen) ================== */

/* Mesh: verschwommene Farbflecken, Text auf Glas-Karte */
.hero.stil-mesh .slide::before{background:radial-gradient(circle at 15% 20%,color-mix(in srgb,var(--c1) 55%,transparent),transparent 45%),radial-gradient(circle at 85% 75%,color-mix(in srgb,var(--c2) 55%,transparent),transparent 45%),color-mix(in srgb,var(--dark) 55%,transparent)}
.hero.stil-mesh .hero-txt{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);border-radius:1.5rem;padding:clamp(1.6rem,3vw,2.6rem);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}

/* Diagonal: Bild/Farbe schräg geteilt */
.hero.stil-diagonal .slide::before{background:var(--dark);clip-path:polygon(0 0,58% 0,42% 100%,0 100%)}
.hero.stil-diagonal .hero-bg{clip-path:polygon(38% 0,100% 0,100% 100%,54% 100%)}
.hero.stil-diagonal .hero-txt{max-width:30rem}

/* Marquee: dünnes animiertes Laufband unter dem Titel */
.hero.stil-marquee .hero-lead{position:relative;padding-top:1rem;overflow:hidden}
.hero.stil-marquee .hero-lead::before{content:"";position:absolute;top:0;left:0;height:4px;width:200%;background:repeating-linear-gradient(90deg,var(--c2) 0 18px,transparent 18px 34px);animation:heroMarquee 6s linear infinite}
@keyframes heroMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Bento: Eck-Kacheln auf dem Bild */
.hero.stil-bento .slide::after{content:"";position:absolute;z-index:1;inset:1.4rem;border:2px solid rgba(255,255,255,.4);border-radius:1.1rem;pointer-events:none}
.hero.stil-bento .slide::before{background:linear-gradient(90deg,color-mix(in srgb,var(--dark) 90%,transparent) 0%,color-mix(in srgb,var(--dark) 55%,transparent) 50%,transparent 100%)}
body .hero.stil-bento .wrap::after{content:"";position:absolute;z-index:1;top:2.4rem;right:2.4rem;width:64px;height:64px;border-radius:.9rem;background:var(--c2);box-shadow:-78px 0 0 -10px rgba(255,255,255,.35),0 78px 0 -10px rgba(255,255,255,.2)}

/* Kino: sehr dunkel, breite Balken oben/unten wie ein Filmstill */
.hero.stil-kino .slide::before{background:color-mix(in srgb,var(--dark) 78%,transparent)}
.hero.stil-kino .slide::after{content:"";position:absolute;z-index:1;left:0;right:0;top:0;height:9%;background:#000}
.hero.stil-kino .slide{box-shadow:inset 0 -9vh 0 0 #000}

/* Zahl: riesige, blasse Folien-Nummer im Hintergrund */
.hero.stil-zahl .slides{counter-reset:heroNr}
.hero.stil-zahl .slide{counter-increment:heroNr}
.hero.stil-zahl .slide::after{content:counter(heroNr,decimal-leading-zero);position:absolute;z-index:1;right:2vw;bottom:-4vw;font-family:var(--font-h);font-weight:800;font-size:min(28vw,20rem);line-height:1;color:rgba(255,255,255,.1);pointer-events:none}

/* Zitat: grosses Anführungszeichen, ruhiger Text mittig */
.hero.stil-zitat .slide{align-items:center;text-align:center}
.hero.stil-zitat .wrap{display:flex;justify-content:center}
.hero.stil-zitat .hero-txt{max-width:44rem;margin-inline:auto}
.hero.stil-zitat .hero-txt::before{content:"\201C";display:block;font-family:Georgia,serif;font-size:7rem;line-height:1;color:var(--c2);margin-bottom:-1.2rem}
.hero.stil-zitat h1,.hero.stil-zitat h2{font-family:Georgia,serif;font-weight:400;font-size:clamp(1.8rem,3.6vw,3rem)}
.hero.stil-zitat .kicker,.hero.stil-zitat .btn-row{justify-content:center}

/* Duoton: Bild in zwei Farben eingefärbt */
.hero.stil-duoton .hero-bg{filter:grayscale(1) contrast(1.15)}
.hero.stil-duoton .slide::before{mix-blend-mode:color;background:linear-gradient(120deg,var(--c1),var(--c2))}
.hero.stil-duoton .slide::after{content:"";position:absolute;inset:0;z-index:1;background:color-mix(in srgb,var(--dark) 30%,transparent)}
.hero.stil-duoton h1,.hero.stil-duoton h2{text-transform:uppercase;letter-spacing:.01em}

/* Postkarte: feiner Doppelrahmen mit Eck-Marke */
.hero.stil-postkarte .hero-bg{inset:1.8rem}
.hero.stil-postkarte .slide::after{content:"";position:absolute;z-index:1;inset:1.8rem;border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(255,255,255,.25);outline-offset:6px;pointer-events:none}
.hero.stil-postkarte .wrap::after{content:"";position:absolute;z-index:1;top:2.6rem;right:2.6rem;width:54px;height:54px;border:2px dashed rgba(255,255,255,.6);border-radius:50%}

/* Glas: Text auf schwebender Milchglas-Karte */
.hero.stil-glas .slide{align-items:flex-end;padding-bottom:3.5rem}
.hero.stil-glas .hero-txt{background:rgba(20,16,12,.38);border:1px solid rgba(255,255,255,.18);border-radius:1.25rem;padding:clamp(1.4rem,2.6vw,2.2rem);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* Rail: Folien-Nummern senkrecht am Rand statt Punkte */
.hero.stil-rail .s-ctrl{left:1.6rem;right:auto;top:50%;bottom:auto;transform:translateY(-50%);flex-direction:column}
.hero.stil-rail .s-dots{flex-direction:column}
.hero.stil-rail .s-dots button{width:5px;height:30px;border-radius:3px}
.hero.stil-rail .s-pause{display:none}

/* Blase: grosser farbiger Kreis schaut hinter dem Text hervor */
.hero.stil-blase .wrap::before{content:"";position:absolute;z-index:0;left:-6vw;bottom:-10vw;width:32vw;height:32vw;min-width:280px;min-height:280px;border-radius:50%;background:color-mix(in srgb,var(--c2) 70%,transparent);filter:blur(2px)}
.hero.stil-blase .hero-txt{position:relative;z-index:1}

/* Linie: reduziert, dünne Linien, viel Weissraum */
.hero.stil-linie .slide::before{background:color-mix(in srgb,var(--dark) 45%,transparent)}
.hero.stil-linie .hero-txt{border-top:1px solid rgba(255,255,255,.55);border-bottom:1px solid rgba(255,255,255,.55);padding:1.6rem 0}
.hero.stil-linie .kicker{text-transform:uppercase;letter-spacing:.3em;font-size:.72rem;font-weight:600}
.hero.stil-linie .kicker::before{display:none}
.hero.stil-linie h1,.hero.stil-linie h2{font-weight:400}

/* Streifen: schräge Farbflächen, kein Bild nötig */
.hero.stil-streifen .slide::before{background:repeating-linear-gradient(115deg,var(--dark) 0 120px,color-mix(in srgb,var(--dark) 92%,var(--c1) 8%) 120px 240px,color-mix(in srgb,var(--dark) 85%,var(--c2) 15%) 240px 360px)}

/* Polaroid: Bild leicht gedreht wie ein Sofortbild */
.hero.stil-polaroid{overflow:visible}
.hero.stil-polaroid .slide::before{background:color-mix(in srgb,var(--dark) 55%,transparent)}
.hero.stil-polaroid .hero-bg{width:calc(100% - 5rem);height:calc(100% - 7.5rem);top:2.2rem;left:2.8rem;border:10px solid #fdfdfb;border-bottom-width:3.2rem;border-radius:2px;box-shadow:0 24px 46px rgba(0,0,0,.4);transform:rotate(-2.2deg)}
.hero.stil-polaroid .wrap::before{content:"";position:absolute;z-index:1;top:-.6rem;left:12%;width:88px;height:30px;background:rgba(255,239,150,.55);transform:rotate(-8deg)}

/* Ticker: schmaler Laufband-Balken ganz unten */
.hero.stil-ticker .slide{padding-bottom:calc(5.5rem + 2.4rem)}
.hero.stil-ticker .slide::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:2.4rem;background:var(--c1);overflow:hidden}
.hero.stil-ticker .wrap::after{content:"";position:absolute;z-index:3;left:0;right:0;bottom:.85rem;height:2px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.85) 0 22px,transparent 22px 44px);animation:heroMarquee 7s linear infinite;width:200%}

/* Doppelbild: ein Bild, optisch als zwei Panels mit Naht */
.hero.stil-doppelbild .slide::after{content:"";position:absolute;z-index:2;inset:0;left:50%;width:6px;transform:translateX(-50%);background:var(--bg,#fff)}
.hero.stil-doppelbild .hero-bg{filter:saturate(1.05)}
.hero.stil-doppelbild .slide{align-items:center;justify-content:center;text-align:center}
.hero.stil-doppelbild .wrap{display:flex;justify-content:center}
.hero.stil-doppelbild .hero-txt{max-width:30rem;background:rgba(20,16,12,.55);border-radius:1rem;padding:clamp(1.3rem,2.4vw,2rem);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}

/* Neon: dunkler Grund, Titel mit Leuchtrand */
.hero.stil-neon .slide::before{background:radial-gradient(ellipse at 30% 30%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 60%),color-mix(in srgb,var(--dark) 88%,transparent)}
.hero.stil-neon h1,.hero.stil-neon h2{text-shadow:0 0 12px color-mix(in srgb,var(--c2) 85%,transparent),0 0 32px color-mix(in srgb,var(--c2) 45%,transparent)}
.hero.stil-neon .kicker{border:1px solid var(--c2);border-radius:99px;padding:.3rem .9rem;box-shadow:0 0 14px color-mix(in srgb,var(--c2) 55%,transparent)}
.hero.stil-neon .kicker::before{display:none}

/* Gestapelt: mehrere versetzte Karten hinter dem Text (SaaS-Look) */
.hero.stil-karten3 .hero-txt{position:relative;background:var(--dark);border-radius:1.1rem;padding:clamp(1.6rem,3vw,2.4rem);box-shadow:0 30px 60px rgba(0,0,0,.4)}
.hero.stil-karten3 .hero-txt::before,.hero.stil-karten3 .hero-txt::after{content:"";position:absolute;inset:0;border-radius:1.1rem;background:color-mix(in srgb,var(--dark) 70%,var(--c2) 30%);z-index:-1}
.hero.stil-karten3 .hero-txt::before{transform:translate(14px,14px) rotate(2.5deg)}
.hero.stil-karten3 .hero-txt::after{transform:translate(-14px,20px) rotate(-3deg);background:color-mix(in srgb,var(--dark) 70%,var(--c1) 30%)}

/* Wolke: weiche, schwebende Farbwolken */
.hero.stil-wolke .slide::before{background:color-mix(in srgb,var(--dark) 40%,transparent)}
.hero.stil-wolke .wrap::before,.hero.stil-wolke .wrap::after{content:"";position:absolute;z-index:0;border-radius:50%;filter:blur(40px);opacity:.55;animation:heroWolke 12s ease-in-out infinite alternate}
.hero.stil-wolke .wrap::before{left:-4vw;top:-6vw;width:22vw;height:22vw;min-width:220px;min-height:220px;background:var(--c1)}
.hero.stil-wolke .wrap::after{right:-3vw;bottom:-8vw;width:26vw;height:26vw;min-width:240px;min-height:240px;background:var(--c2);animation-delay:2s}
.hero.stil-wolke .hero-txt{position:relative;z-index:1}
@keyframes heroWolke{from{transform:translateY(0) scale(1)}to{transform:translateY(-18px) scale(1.06)}}

/* ================= Kopf & Fuss – 20 neue Kopfzeilen-Stile (16–35) ================= */
.site-head.stil-glas{background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom-color:rgba(17,28,45,.08)}
.site-head.stil-glas.transparent:not(.scrolled){background:rgba(17,28,45,.28);border-bottom-color:transparent}

.site-head.stil-verlauf{background:linear-gradient(100deg,var(--c1),color-mix(in srgb,var(--c1) 55%,var(--c2)));border-bottom:0}
.site-head.stil-verlauf .logo-text,.site-head.stil-verlauf .nav ul a,.site-head.stil-verlauf .nav ul button{color:#fff}
.site-head.stil-verlauf .nav ul a:hover,.site-head.stil-verlauf .nav ul button:hover{color:var(--dark)}
.site-head.stil-verlauf .burger{background:rgba(255,255,255,.18)}.site-head.stil-verlauf .burger span,.site-head.stil-verlauf .burger span::before,.site-head.stil-verlauf .burger span::after{background:#fff}

.site-head.stil-doppelzeile .bar{flex-wrap:wrap;row-gap:.6rem;padding-block:.9rem}
.site-head.stil-doppelzeile .logo{flex-basis:100%;justify-content:center;display:flex}
.site-head.stil-doppelzeile .nav{flex-basis:100%;margin:0;justify-content:center}
.site-head.stil-doppelzeile .nav>ul{margin-inline:auto}

.site-head.stil-info_gestapelt .bar{flex-wrap:wrap;row-gap:.5rem;padding-block:.8rem}
.site-head.stil-info_gestapelt .logo{flex-basis:100%;justify-content:center;display:flex}
.site-head.stil-info_gestapelt .head-tel{display:flex;flex-basis:100%;justify-content:center;font-size:.85rem;color:var(--soft);order:2}
.site-head.stil-info_gestapelt .nav{flex-basis:100%;order:3;margin:0;justify-content:center;border-top:1px solid var(--line);padding-top:.6rem}
.site-head.stil-info_gestapelt .nav>ul{margin-inline:auto}

.site-head.stil-brutal{background:#fff;border-bottom:3px solid var(--ink);box-shadow:0 6px 0 -2px var(--c2)}
.site-head.stil-brutal .nav ul a,.site-head.stil-brutal .nav ul button{border-radius:0}
.site-head.stil-brutal .nav>ul>li>[aria-current="page"],.site-head.stil-brutal .nav>ul>li.aktiv>button{box-shadow:none;background:var(--ink);color:#fff}

.site-head.stil-pillen .nav>ul{gap:.4rem}
.site-head.stil-pillen .nav ul a,.site-head.stil-pillen .nav ul button{border-radius:var(--rad-btn);border:1.5px solid var(--line)}
.site-head.stil-pillen .nav ul a:hover,.site-head.stil-pillen .nav ul button:hover{border-color:var(--c1);color:var(--c1-text)}
.site-head.stil-pillen .nav>ul>li>[aria-current="page"],.site-head.stil-pillen .nav>ul>li.aktiv>button{background:var(--c1);color:var(--on-c1);border-color:var(--c1);box-shadow:none}

.site-head.stil-seitenrand{border-bottom:0;box-shadow:inset 6px 0 0 var(--c1),inset -6px 0 0 var(--c2)}

.site-head.stil-mittig_split .bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center}
.site-head.stil-mittig_split .logo{grid-column:2;grid-row:1;justify-self:center;z-index:1}
.site-head.stil-mittig_split .nav{grid-column:1/-1;grid-row:1;display:grid;grid-template-columns:1fr auto 1fr;margin:0}
.site-head.stil-mittig_split .nav>ul{grid-column:1;justify-self:end;padding-right:calc(var(--wrap,1320px) * .18)}
.site-head.stil-mittig_split .nav-cta{grid-column:3;justify-self:start;margin-left:calc(var(--wrap,1320px) * .18)}
@media (max-width:1100px){.site-head.stil-mittig_split .nav{display:block}}

.site-head.stil-editorial{border-bottom:1px solid var(--ink)}
.site-head.stil-editorial .logo-text{font-family:"Source Serif 4",Georgia,serif;font-weight:700;font-size:1.6rem;letter-spacing:0}
.site-head.stil-editorial .nav ul a,.site-head.stil-editorial .nav ul button{font-weight:500;letter-spacing:.02em}

.site-head.stil-monochrom{background:#fff;filter:grayscale(1)}
.site-head.stil-monochrom:hover,.site-head.stil-monochrom:focus-within{filter:none}

.site-head.stil-neonrand{border-bottom:2px solid var(--c1);box-shadow:0 2px 18px -2px color-mix(in srgb,var(--c1) 70%,transparent)}

.site-head.stil-karten_schwebend{background:transparent;border:0;position:sticky;top:.6rem}
.site-head.stil-karten_schwebend .bar{background:#fff;border-radius:var(--rad);box-shadow:var(--shadow);border-top:4px solid var(--c2)}

.site-head.stil-kompakt_icons .nav>ul{display:none}
.site-head.stil-kompakt_icons .burger{display:grid}
.site-head.stil-kompakt_icons .bar{min-height:60px}

.site-head.stil-logo_ueberlappend{overflow:visible}
.site-head.stil-logo_ueberlappend .bar{overflow:visible}
.site-head.stil-logo_ueberlappend .logo{margin-bottom:-1.8rem;background:#fff;padding:.5rem .9rem;border-radius:var(--rad-s);box-shadow:var(--shadow);z-index:2;position:relative}

.site-head.stil-volltonfarbe{background:var(--c1);border-bottom:0}
.site-head.stil-volltonfarbe .logo-text,.site-head.stil-volltonfarbe .nav ul a,.site-head.stil-volltonfarbe .nav ul button{color:var(--on-c1)}
.site-head.stil-volltonfarbe .nav ul a:hover,.site-head.stil-volltonfarbe .nav ul button:hover{opacity:.75}
.site-head.stil-volltonfarbe .nav-cta{background:var(--on-c1);color:var(--c1);border-color:var(--on-c1)}
.site-head.stil-volltonfarbe .burger{background:rgba(255,255,255,.2)}.site-head.stil-volltonfarbe .burger span,.site-head.stil-volltonfarbe .burger span::before,.site-head.stil-volltonfarbe .burger span::after{background:#fff}

.site-head.stil-rahmenbox{background:transparent;border:0}
.site-head.stil-rahmenbox .bar{margin-top:.8rem;border:1.5px solid var(--ink);border-radius:var(--rad)}

.site-head.stil-punktlinie{border-bottom:2px dotted var(--soft)}

.site-head.stil-grossflaechig .bar{flex-wrap:wrap;row-gap:1rem;min-height:170px;justify-content:center;align-content:center;padding-block:1.5rem}
.site-head.stil-grossflaechig .logo{flex-basis:100%;justify-content:center;display:flex}
.site-head.stil-grossflaechig .logo img{height:60px}.site-head.stil-grossflaechig .logo-text{font-size:2rem}
.site-head.stil-grossflaechig .nav{flex-basis:100%;margin:0;justify-content:center}

.site-head.stil-schatten_stufen{position:relative;border-bottom:0}
.site-head.stil-schatten_stufen::after{content:"";position:absolute;left:1.5rem;right:1.5rem;bottom:-6px;height:6px;background:color-mix(in srgb,var(--c1) 16%,#fff);border-radius:0 0 10px 10px;z-index:-1}

.site-head.stil-aufgeraut{background-image:repeating-linear-gradient(135deg,color-mix(in srgb,var(--ink) 3%,transparent) 0 2px,transparent 2px 10px)}

/* ================= 20 neue Fusszeilen-Stile (16–35) ================= */
.site-foot.stil-mesh{position:relative;overflow:hidden}
.site-foot.stil-mesh::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 15%,color-mix(in srgb,var(--c1) 45%,transparent),transparent 45%),radial-gradient(circle at 88% 80%,color-mix(in srgb,var(--c2) 35%,transparent),transparent 45%);pointer-events:none}
.site-foot.stil-mesh .wrap{position:relative}

.site-foot.stil-verlauf{background:linear-gradient(170deg,var(--dark),color-mix(in srgb,var(--dark) 55%,var(--c1)))}

.site-foot.stil-grossraster h2{font-size:1.4rem;font-family:var(--font-h);font-stretch:var(--h-stretch);color:#fff}
.site-foot.stil-grossraster h2::after{display:none}

.site-foot.stil-minimalzeile{background:var(--dark)}
.site-foot.stil-minimalzeile .foot{padding-block:1.4rem}
.site-foot.stil-minimalzeile .foot nav,.site-foot.stil-minimalzeile .foot>div:not(.f-about){display:none}
.site-foot.stil-minimalzeile .foot{border-top:1px solid rgba(255,255,255,.14)}

.site-foot.stil-baender .foot{border-top:1px solid rgba(255,255,255,.12);padding-top:clamp(3rem,5vw,4.5rem)}
.site-foot.stil-baender .pl-h2{border-top:1px solid rgba(255,255,255,.12);padding-top:1.5rem}

.site-foot.stil-pastell{background:color-mix(in srgb,var(--c2) 18%,#fff);color:var(--ink)}
.site-foot.stil-pastell .logo-text,.site-foot.stil-pastell h2{color:var(--ink)}
.site-foot.stil-pastell a{color:var(--soft)}.site-foot.stil-pastell a:hover{color:var(--ink)}
.site-foot.stil-pastell .social a{background:#fff;color:var(--ink)}
.site-foot.stil-pastell .copy-line{border-top-color:rgba(17,28,45,.12);color:var(--soft)}

.site-foot.stil-kontrastrahmen .foot>nav,.site-foot.stil-kontrastrahmen .foot>div{border:1px solid rgba(255,255,255,.18);border-radius:var(--rad-s);padding:1.1rem 1.3rem;background:transparent}

.site-foot.stil-grosszuegig_zentriert .foot{text-align:center;padding-top:clamp(3.5rem,6vw,5.5rem)}
.site-foot.stil-grosszuegig_zentriert .f-about{flex:1 1 100%;display:flex;flex-direction:column;align-items:center}
.site-foot.stil-grosszuegig_zentriert .f-about p{font-size:1.5rem;font-family:var(--font-h);font-weight:700;color:#fff;max-width:34rem}
.site-foot.stil-grosszuegig_zentriert .social{justify-content:center}
.site-foot.stil-grosszuegig_zentriert .foot>nav,.site-foot.stil-grosszuegig_zentriert .foot>div:not(.f-about){flex-basis:170px}

.site-foot.stil-seitenleiste .foot>.f-about{flex:0 0 240px;border-right:1px solid rgba(255,255,255,.12);padding-right:1.5rem}

.site-foot.stil-dunkel_verlauf{position:relative;overflow:hidden;background:var(--dark)}
.site-foot.stil-dunkel_verlauf::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 20% 0%,color-mix(in srgb,var(--c1) 30%,transparent),transparent 50%),radial-gradient(circle at 90% 100%,color-mix(in srgb,var(--c2) 22%,transparent),transparent 50%)}
.site-foot.stil-dunkel_verlauf .wrap{position:relative}

.site-foot.stil-grossbanner .foot-cta{background:var(--dark);color:#fff;border-bottom:3px solid var(--c2)}
.site-foot.stil-grossbanner .foot-cta span{font-size:1.5rem;font-family:var(--font-h)}
.site-foot.stil-grossbanner .foot-cta .btn{background:var(--c1);color:var(--on-c1);border-color:var(--c1)}

.site-foot.stil-kartenreihe .foot{flex-wrap:nowrap;overflow-x:auto;padding-bottom:1rem}
.site-foot.stil-kartenreihe .foot>nav,.site-foot.stil-kartenreihe .foot>div{flex:0 0 240px;background:rgba(255,255,255,.06);border-radius:var(--rad-s);padding:1.2rem 1.3rem}

.site-foot.stil-punktraster{background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:16px 16px}

.site-foot.stil-doppellinie{border-top:1px solid rgba(255,255,255,.28)}
.site-foot.stil-doppellinie .foot{border-top:1px solid rgba(255,255,255,.12);margin-top:6px;padding-top:calc(clamp(3.5rem,6vw,5.5rem) - 6px)}

.site-foot.stil-asymmetrisch .foot>.f-about{flex:2.6 1 340px}
.site-foot.stil-asymmetrisch .f-about p{font-size:1.05rem}

.site-foot.stil-ikonleiste .social{order:-1;margin:0 0 1rem}
.site-foot.stil-ikonleiste .social a{width:42px;height:42px}

.site-foot.stil-streifen{background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.035) 0 10px,transparent 10px 20px)}

.site-foot.stil-eckig_scharf .foot>nav,.site-foot.stil-eckig_scharf .foot>div{border:1px solid rgba(255,255,255,.22)}
.site-foot.stil-eckig_scharf h2::after{border-radius:0}

.site-foot.stil-farbblock .f-about{background:var(--c1);color:var(--on-c1);border-radius:var(--rad-s);padding:1.4rem 1.5rem;margin-top:calc(-1 * clamp(3.5rem,6vw,5.5rem) + 1.4rem)}
.site-foot.stil-farbblock .f-about .logo{color:var(--on-c1)}.site-foot.stil-farbblock .f-about .logo-text::first-letter{color:var(--on-c1)}
.site-foot.stil-farbblock .f-about .social a{background:rgba(0,0,0,.15);color:var(--on-c1)}

.site-foot.stil-weich_rund{background:transparent;padding:1.2rem}
.site-foot.stil-weich_rund .foot,.site-foot.stil-weich_rund>.wrap{background:var(--dark);border-radius:calc(var(--rad) * 1.6)}
.site-foot.stil-weich_rund .foot{padding-left:clamp(1.75rem,3vw,3rem);padding-right:clamp(1.75rem,3vw,3rem)}
.site-foot.stil-weich_rund>.wrap:last-child{padding:0 clamp(1.75rem,3vw,3rem) 1.4rem}

/* ================= Partner-/Kundenlogos (Fusszeile) ================= */
.pl-h2{margin-top:1.75rem}
.partner-logos{display:grid;grid-template-columns:repeat(var(--pl-spalten,4),1fr);gap:.9rem;align-items:center}
.partner-logos a,.partner-logos span{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:var(--rad-s);padding:.7rem 1rem;min-height:56px}
.partner-logos img{max-height:34px;width:auto;max-width:130px;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.partner-logos a:hover img{filter:none;opacity:1}
@media (max-width:760px){.partner-logos{grid-template-columns:repeat(2,1fr)}}

/* ================= Hauptmenü: 6 Dropdown-Arten ================= */
.nav-select select{font:inherit;font-weight:600;padding:.6rem 2.2rem .6rem 1rem;border-radius:var(--rad-btn);border:1.5px solid var(--line);background:#fff;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 1.1rem) center,calc(100% - .8rem) center;background-size:6px 6px;background-repeat:no-repeat}

.has-sub.split{display:flex;align-items:center;padding-right:.2rem}
.has-sub.split>a{padding-right:.35rem}
.sub-pfeil{width:1.9rem;height:1.9rem;border:0;background:transparent;border-radius:var(--rad-s);cursor:pointer;display:grid;place-items:center;flex:none}
.sub-pfeil:hover{background:var(--grey)}
.sub-pfeil::after{content:"";width:.4em;height:.4em;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg) translateY(-2px)}

.nav-stil-mega .sub.mega{position:fixed;left:1.25rem;right:1.25rem;top:var(--mm-top,var(--head-h,76px));width:auto;max-width:var(--wrap,1320px);margin-inline:auto;min-width:0;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:.3rem .6rem;padding:1.1rem}
.nav-stil-mega .has-sub.open>.sub.mega{display:grid}

.nav-stil-flyout .sub{top:0;left:calc(100% + .6rem);min-width:230px;animation:flyoutEin .15s ease both}
.nav-stil-flyout .has-sub{position:relative}
@keyframes flyoutEin{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@media (max-width:1100px){.nav-stil-flyout .sub{left:0;top:calc(100% + .6rem)}}

/* ================= Mega-Menü mit eigenen Feldern (Admin → «Mega-Menü») =================
   Immer helles Feld mit dunkler Schrift – unabhängig vom Kopfzeilen-Stil (dunkel, transparent,
   Verlauf …), deshalb mit #hauptnav, damit keine Kopfzeilen-Regel die Farben überschreibt. */
#hauptnav .sub.mega-plus{background:#fff;color:var(--ink);border:1px solid var(--line);padding:0;list-style:none}
#hauptnav .mega-plus a{color:var(--ink);white-space:normal}
#hauptnav .mega-plus ul{list-style:none;margin:0;padding:0;display:block}
.mm-inner{display:flex;gap:1.75rem;padding:1.5rem 1.75rem}
.mm-spalten{flex:1 1 auto;min-width:0;display:grid;grid-template-columns:repeat(var(--mm-cols,3),minmax(0,1fr));gap:1.25rem 1.5rem;align-content:start}
.mm-titel{margin:0 0 .45rem;padding:0 .6rem .45rem;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--soft);border-bottom:1px solid var(--line)}
#hauptnav .mm-titel a{display:inline;padding:0;font:inherit;color:inherit;background:none}
#hauptnav .mm-titel a:hover{color:var(--c1-text);background:none}
#hauptnav .mm-links a{display:flex;align-items:flex-start;gap:.7rem;padding:.55rem .6rem;font-size:.95rem;font-weight:500;border-radius:calc(var(--rad-s) / 1.5);line-height:1.3}
#hauptnav .mm-links a:hover,#hauptnav .mm-links [aria-current="page"]{background:var(--grey);color:var(--ink)}
.mm-ic{width:32px;height:32px;flex:none;border-radius:var(--rad-s);display:grid;place-items:center;background:color-mix(in srgb,var(--c1) 11%,#fff);color:var(--c1-text)}
.mm-t{display:block;min-width:0}
.mm-t b{display:block;font-weight:650}
.mm-t small{display:block;color:var(--soft);font-weight:400;font-size:.82rem;margin-top:.15rem}
.mm-badge{display:inline-block;vertical-align:.1em;margin-left:.3rem;padding:.1rem .45rem;border-radius:99px;font-style:normal;font-size:.68rem;font-weight:700;letter-spacing:.03em;background:var(--c2);color:var(--on-c2)}
.mm-intro{flex:0 0 220px;padding-right:1.5rem;border-right:1px solid var(--line)}
#hauptnav .mm-intro-t{margin:0 0 .5rem;font-family:var(--font-h);font-size:1.25rem;font-weight:700;line-height:1.2;color:var(--ink)}
.mm-intro p{margin:0 0 .9rem;color:var(--soft);font-size:.92rem;line-height:1.5}
#hauptnav .mega-plus .mm-btn{display:inline-flex;padding:.6rem 1.1rem;font-size:.9rem;font-weight:700;background:var(--c1);color:var(--on-c1);border:2px solid var(--c1);border-radius:var(--rad-btn)}
#hauptnav .mega-plus .mm-btn:hover{color:var(--on-c1);filter:brightness(.92)}
.mm-teaser{flex:0 0 270px;display:flex;flex-direction:column;border-radius:var(--rad-s);overflow:hidden;background:var(--grey);text-decoration:none}
#hauptnav .mega-plus a.mm-teaser{padding:0}
.mm-teaser-bild{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--line)}
.mm-teaser-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
a.mm-teaser:hover .mm-teaser-bild img{transform:scale(1.04)}
.mm-teaser-body{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.1rem 1.15rem}
.mm-kicker{font-size:.72rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c1-text)}
.mm-teaser-body b{font-size:1.05rem;font-weight:700;line-height:1.25;color:var(--ink)}
.mm-teaser-body small{font-size:.86rem;color:var(--soft);line-height:1.45;font-weight:400}
.mm-mehr{margin-top:.3rem;font-size:.88rem;font-weight:700;color:var(--c1-text)}
.mm-mehr::after{content:" →"}
.mm-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:.8rem 1.75rem;background:var(--grey);border-top:1px solid var(--line);font-size:.9rem;color:var(--soft)}
#hauptnav .mm-fuss a{display:inline-flex;padding:.2rem 0;font-weight:700;color:var(--c1-text);background:none}
#hauptnav .mm-fuss a::after{content:" →";white-space:pre}
#hauptnav .mm-fuss a:hover{text-decoration:underline;background:none}

@media (min-width:1101px){
  #hauptnav .sub.mega-plus{position:fixed;left:1.25rem;right:1.25rem;top:var(--mm-top,var(--head-h,76px));width:auto;min-width:0;margin-inline:auto;
    max-width:min(var(--wrap,1320px),calc(100vw - 2.5rem));max-height:calc(100vh - var(--mm-top,var(--head-h,76px)) - 1rem);overflow:auto;box-shadow:var(--shadow)}
  #hauptnav .sub.mega-plus.mm-mittel{max-width:min(960px,calc(100vw - 2.5rem))}
  #hauptnav .sub.mega-plus.mm-schmal{max-width:min(680px,calc(100vw - 2.5rem))}
  #hauptnav .sub.mega-plus::before{top:-1.6rem;height:1.6rem}
  #hauptnav .has-sub.open>.sub.mega-plus,#hauptnav .has-sub:hover>.sub.mega-plus,#hauptnav .has-sub:focus-within>.sub.mega-plus{display:block;animation:mmEin .16s ease both}
  .mm-schmal .mm-teaser,.mm-mittel .mm-teaser{flex-basis:220px}
  .mm-schmal .mm-intro{display:none}
}
@media (hover:none) and (min-width:1101px){#hauptnav .has-sub:hover:not(.open)>.sub.mega-plus{display:none}}
@keyframes mmEin{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){#hauptnav .sub.mega-plus{animation:none!important}}
@media (min-width:1101px) and (max-width:1280px){.mm-intro{display:none}}

/* Handy & Tablet: das Feld wird Teil der aufgeklappten Menüliste */
@media (max-width:1100px){
  #hauptnav .sub.mega-plus{position:static;box-shadow:none;border:0;border-radius:0;background:var(--grey);max-width:none;padding:0 0 .4rem .75rem}
  #hauptnav .has-sub.open>.sub.mega-plus{display:block}
  #hauptnav .mega-plus a{width:auto;justify-content:flex-start;border-bottom:0}
  .mm-inner{display:block;padding:0}
  .mm-intro{display:none}
  .mm-spalten{display:block}
  .mm-spalte+.mm-spalte{margin-top:.4rem}
  .mm-titel{padding:.8rem .5rem .35rem;margin:0;border:0}
  #hauptnav .mm-links a{padding:.75rem .5rem;border-radius:0;border-bottom:1px solid var(--line);font-size:1rem}
  .mm-ic{width:28px;height:28px;background:transparent}
  .mm-t small{display:none}
  .mm-teaser{flex-direction:row;align-items:center;margin:.6rem .5rem .2rem 0;background:#fff}
  .mm-teaser-bild{flex:0 0 88px;aspect-ratio:1}
  .mm-teaser-body{padding:.7rem .9rem}
  .mm-teaser-body small{display:none}
  .mm-fuss{padding:.75rem .5rem;background:transparent;border:0}
  .mm-fuss>span:empty{display:none}
}

/* ================= Mega-Menü: weitere Darstellungen (Kopf & Fuss → Dropdown-Art 7–13) =================
   Gleiche Inhalte wie «Mega-Menü» (Admin → Mega-Menü), nur anderes Aussehen. Gilt am Desktop;
   auf Handy/Tablet erscheinen alle als aufgeklappte Liste wie beim normalen Mega-Menü. */
@media (min-width:1101px){
  /* 7. Dunkel */
  #hauptnav.mmv-dunkel .sub.mega-plus,#hauptnav.mmv-dunkel .sub.mega{background:var(--dark);border-color:color-mix(in srgb,#fff 12%,var(--dark));color:#e6ebf3}
  #hauptnav.mmv-dunkel .mega-plus a,#hauptnav.mmv-dunkel .sub.mega a{color:#fff}
  #hauptnav.mmv-dunkel .mm-links a:hover,#hauptnav.mmv-dunkel .sub.mega a:hover,#hauptnav.mmv-dunkel .mm-links [aria-current="page"],#hauptnav.mmv-dunkel .sub.mega [aria-current="page"]{background:color-mix(in srgb,#fff 9%,var(--dark));color:#fff}
  #hauptnav.mmv-dunkel .mm-links [aria-current="page"]{box-shadow:inset 3px 0 0 var(--c2)}
  #hauptnav.mmv-dunkel .mm-titel{color:var(--c2);border-color:color-mix(in srgb,#fff 14%,var(--dark))}
  #hauptnav.mmv-dunkel .mm-t small,#hauptnav.mmv-dunkel .mm-intro p{color:#aab6c8}
  #hauptnav.mmv-dunkel .mm-intro{border-color:color-mix(in srgb,#fff 14%,var(--dark))}
  #hauptnav.mmv-dunkel .mm-intro-t,#hauptnav.mmv-dunkel .mm-teaser-body b{color:#fff}
  #hauptnav.mmv-dunkel .mm-ic{background:color-mix(in srgb,var(--c2) 18%,var(--dark));color:var(--c2)}
  #hauptnav.mmv-dunkel .mm-teaser{background:color-mix(in srgb,#fff 6%,var(--dark))}
  #hauptnav.mmv-dunkel .mm-teaser-body small{color:#aab6c8}
  #hauptnav.mmv-dunkel .mm-kicker,#hauptnav.mmv-dunkel .mm-mehr,#hauptnav.mmv-dunkel .mm-fuss a{color:var(--c2)}
  #hauptnav.mmv-dunkel .mm-fuss{background:color-mix(in srgb,#000 22%,var(--dark));border-color:color-mix(in srgb,#fff 10%,var(--dark));color:#aab6c8}

  /* 8. Farbspalte: Einleitung als farbiger Block */
  #hauptnav.mmv-farbig .mm-inner.mit-intro{padding-left:0;padding-top:0;padding-bottom:0}
  #hauptnav.mmv-farbig .mm-intro{flex-basis:260px;border:0;margin:0;padding:1.75rem 1.6rem;background:var(--c1);color:var(--on-c1)}
  #hauptnav.mmv-farbig .mm-intro-t{color:var(--on-c1);font-size:1.45rem}
  #hauptnav.mmv-farbig .mm-intro p{color:color-mix(in srgb,var(--on-c1) 82%,transparent)}
  #hauptnav.mmv-farbig .mega-plus .mm-btn{background:var(--c2);border-color:var(--c2);color:var(--on-c2)}
  #hauptnav.mmv-farbig .mm-spalten,#hauptnav.mmv-farbig .mm-teaser{margin:1.5rem 0}
  #hauptnav.mmv-farbig .mm-teaser{margin-right:1.75rem}
  #hauptnav.mmv-farbig .mm-ic{background:var(--c1);color:var(--on-c1)}

  /* 9. Kacheln: jeder Link als Karte */
  #hauptnav.mmv-kacheln .mm-spalten{gap:1.5rem}
  #hauptnav.mmv-kacheln .mm-titel{border:0;padding-left:0}
  #hauptnav.mmv-kacheln .mm-links{display:grid!important;gap:.6rem}
  #hauptnav.mmv-kacheln .mm-links a{flex-direction:row;align-items:center;padding:.8rem .9rem;border:1px solid var(--line);border-radius:var(--rad-s);background:#fff;transition:border-color .15s,box-shadow .15s,transform .15s}
  #hauptnav.mmv-kacheln .mm-links a:hover{background:#fff;border-color:var(--c1);box-shadow:0 6px 18px -10px color-mix(in srgb,var(--c1) 60%,transparent);transform:translateY(-1px)}
  #hauptnav.mmv-kacheln .mm-ic{width:40px;height:40px;background:var(--c1);color:var(--on-c1)}
  #hauptnav.mmv-kacheln .sub.mega-plus{background:var(--grey)}
  #hauptnav.mmv-kacheln .mm-intro{border-color:var(--line)}

  /* 10. Bildspalte: grosses Bild links, Text auf dem Bild */
  #hauptnav.mmv-bild .mm-inner.mit-teaser{padding-left:0;padding-top:0;padding-bottom:0}
  #hauptnav.mmv-bild .mm-teaser{order:-1;flex-basis:330px;position:relative;border-radius:0;min-height:300px;background:var(--dark)}
  #hauptnav.mmv-bild .mm-teaser-bild{position:absolute;inset:0;aspect-ratio:auto}
  #hauptnav.mmv-bild .mm-teaser-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,color-mix(in srgb,var(--dark) 92%,transparent) 15%,transparent 75%)}
  #hauptnav.mmv-bild .mm-teaser-body{position:relative;margin-top:auto;padding:1.4rem}
  #hauptnav.mmv-bild .mm-teaser-body b{color:#fff;font-size:1.25rem}
  #hauptnav.mmv-bild .mm-teaser-body small{color:#dfe5ee}
  #hauptnav.mmv-bild .mm-kicker,#hauptnav.mmv-bild .mm-mehr{color:var(--c2)}
  #hauptnav.mmv-bild .mm-intro,#hauptnav.mmv-bild .mm-spalten{margin:1.5rem 0}
  #hauptnav.mmv-bild .mm-spalten{margin-right:1.75rem}

  /* 11. Vollbreite: von Rand zu Rand, Akzentlinie oben */
  #hauptnav.mmv-band .sub.mega-plus,#hauptnav.mmv-band .sub.mega{left:0;right:0;max-width:none;border-radius:0;border-width:0 0 1px;border-top:4px solid var(--c2);box-shadow:0 24px 40px -24px rgba(0,0,0,.35)}
  #hauptnav.mmv-band .mm-inner{max-width:var(--wrap,1320px);margin-inline:auto;padding:2rem clamp(1.25rem,3vw,2.5rem)}
  #hauptnav.mmv-band .mm-fuss{padding-inline:max(1.75rem,calc((100vw - var(--wrap,1320px)) / 2 + 2rem))}
  #hauptnav.mmv-band .mm-intro-t{font-size:1.6rem}

  /* 12. Editorial: ohne Symbole, grosse Schrift, feine Trennlinien */
  #hauptnav.mmv-linien .mm-ic{display:none}
  #hauptnav.mmv-linien .mm-spalte+.mm-spalte{border-left:1px solid var(--line);padding-left:1.5rem}
  #hauptnav.mmv-linien .mm-titel{border:0;padding-left:0;color:var(--c1-text);letter-spacing:.1em}
  #hauptnav.mmv-linien .mm-links a{padding:.45rem 0;font-family:var(--font-h);font-size:1.15rem;border-radius:0}
  #hauptnav.mmv-linien .mm-links a:hover{background:none;color:var(--c1-text)}
  #hauptnav.mmv-linien .mm-links a:hover b{text-decoration:underline;text-decoration-color:var(--c2);text-decoration-thickness:2px;text-underline-offset:4px}
  #hauptnav.mmv-linien .mm-t b{font-weight:600}
  #hauptnav.mmv-linien .mm-t small{font-family:var(--font);font-size:.82rem}
  #hauptnav.mmv-linien .mm-intro-t{font-size:1.7rem;font-weight:600}
  #hauptnav.mmv-linien .mm-teaser{background:none;border-left:1px solid var(--line);border-radius:0;padding-left:1.5rem}
  #hauptnav.mmv-linien .mm-teaser-body{padding:.9rem 0 0}
  #hauptnav.mmv-linien .mm-fuss{background:none}

  /* 13. Kompakt: schmal und dicht, nur die Links */
  #hauptnav.mmv-kompakt .sub.mega-plus{max-width:min(820px,calc(100vw - 2.5rem))}
  #hauptnav.mmv-kompakt .mm-intro,#hauptnav.mmv-kompakt .mm-teaser,#hauptnav.mmv-kompakt .mm-ic,#hauptnav.mmv-kompakt .mm-t small{display:none}
  #hauptnav.mmv-kompakt .mm-inner{padding:1rem 1.2rem}
  #hauptnav.mmv-kompakt .mm-spalten{gap:.6rem 1.2rem}
  #hauptnav.mmv-kompakt .mm-links a{padding:.35rem .5rem;font-size:.92rem}
  #hauptnav.mmv-kompakt .mm-titel{font-size:.72rem;margin-bottom:.3rem}
  #hauptnav.mmv-kompakt .mm-fuss{padding:.6rem 1.2rem;font-size:.85rem}
}

/* ================= Karten: einfarbige Symbol-Bilder in Haupt-/Akzentfarbe einfärben =================
   Für Bilder wie «weisses Symbol auf rotem Grund»: das Bild wird zu Schwarz/Weiss gemacht und dann
   mit der Wunschfarbe verrechnet – die Fläche bekommt die Farbe, das Symbol bleibt hell (bzw. wird
   dunkel, wenn die Farbe selbst sehr hell ist, z.B. Gelb). */
.grid.bf .card-img{position:relative;isolation:isolate;background:#000}
.grid.bf .card-img img{filter:grayscale(1) contrast(12)}
.grid.bf .card-img::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:var(--bf-farbe)}
.grid.bf-dunkelsymbol .card-img{background:#fff}
.grid.bf-dunkelsymbol .card-img img{filter:grayscale(1) contrast(12) invert(1)}
.grid.bf-dunkelsymbol .card-img::after{mix-blend-mode:multiply}
.grid.bf-c1{--bf-farbe:var(--c1)}
.grid.bf-c2{--bf-farbe:var(--c2)}
.grid.bf-dunkel{--bf-farbe:var(--dark)}
/* eingefärbte Symbole: alle Karten gleich hoch, Symbol nie abgeschnitten, Grösse wählbar */
.grid.bf .card-img,.grid.bf .card.full .card-img{aspect-ratio:3/2}
.grid.bf .card-img img,.grid.bf .card.full .card-img img{height:100%;object-fit:contain;scale:var(--bf-s,1)}

/* ================= Ausdruck «Energie» (Elektro, Technik, Handwerk) =================
   Kantig und kraftvoll: Versalien-Titel, Kennzeichnung mit Blitz, Akzentbalken, Knöpfe mit Pfeil. */
.ausdruck-energie{--blitz:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M13 2 4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E")}
.ausdruck-energie h1,.ausdruck-energie h2{text-transform:uppercase;letter-spacing:-.01em;font-weight:900;line-height:1.02}
.ausdruck-energie h3{font-weight:800}
.ausdruck-energie .kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.8rem;font-weight:800;color:var(--ink)}
.ausdruck-energie .bg-dunkel .kicker,.ausdruck-energie .hero .kicker,.ausdruck-energie .bg-bild .kicker{color:#fff}
.ausdruck-energie .kicker::before{width:22px;height:22px;border-radius:0;background:var(--c1);-webkit-mask:var(--blitz) center/contain no-repeat;mask:var(--blitz) center/contain no-repeat}
.ausdruck-energie .sec-head h2::after{content:"";display:block;width:64px;height:5px;margin:.55em auto 0;background:var(--c1)}
.ausdruck-energie .sec-head.links h2::after{margin-left:0}
.ausdruck-energie .btn{text-transform:uppercase;letter-spacing:.06em;font-size:.9rem;font-weight:800;padding:1.05rem 1.6rem}
.ausdruck-energie .btn:not(.ghost)::after{content:"";width:16px;height:16px;flex:none;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.ausdruck-energie .btn:hover::after{transform:translateX(4px)}
.ausdruck-energie .hero .btn.ghost{border-width:2px}
/* Karten und Vorteile: Akzentbalken, der beim Darüberfahren wächst */
.ausdruck-energie .feature,.ausdruck-energie .card{border-radius:var(--rad-s);overflow:hidden}
.ausdruck-energie .feature::after,.ausdruck-energie .card::after{content:"";position:absolute;left:0;bottom:0;height:4px;width:100%;background:var(--c1);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.ausdruck-energie .feature:hover::after,.ausdruck-energie .card:hover::after{transform:scaleX(1)}
.ausdruck-energie .f-ic{background:var(--dark);color:var(--c1);border-radius:var(--rad-s)}
.ausdruck-energie .feature:hover .f-ic{background:var(--c1);color:var(--on-c1)}
/* Zahlen: grosse Ziffern mit Akzent-Zusatz */
.ausdruck-energie .counter b{font-weight:900}
.ausdruck-energie .bg-dunkel .counter b,.ausdruck-energie .bg-bild .counter b{color:var(--c1)}
.ausdruck-energie .counter{position:relative}
.ausdruck-energie .counters .counter+.counter::before{content:"";position:absolute;left:-1rem;top:15%;bottom:15%;width:1px;background:color-mix(in srgb,currentColor 22%,transparent)}
/* Seitenkopf mit schräger Unterkante */
.ausdruck-energie .page-head{clip-path:polygon(0 0,100% 0,100% calc(100% - 38px),0 100%)}
.ausdruck-energie .page-head h1::after{content:"";display:block;width:64px;height:5px;margin-top:.45em;background:var(--c1)}
/* Bilder neben Text: versetzter Akzentrahmen */
.ausdruck-energie .split figure{position:relative;overflow:visible}
.ausdruck-energie .split figure::before{content:"";position:absolute;inset:18px -18px -18px 18px;border:4px solid var(--c1);z-index:-1}
.ausdruck-energie .split.flip figure::before{inset:18px 18px -18px -18px}
.ausdruck-energie .bg-akzent,.ausdruck-energie .bg-farbe{background-image:repeating-linear-gradient(135deg,transparent 0 22px,color-mix(in srgb,#000 5%,transparent) 22px 23px)}

/* ================= Animationen «Lebhaft» (Design → Art der Animationen) =================
   Nur wenn «Abschnitte beim Scrollen einblenden» an ist; respektiert «Bewegung reduzieren». */
@media (prefers-reduced-motion:no-preference){
  html.js .anim-energie .rv{transform:translateY(46px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,.8,.24,1)}
  html.js .anim-energie .grid>.rv:nth-child(5),html.js .anim-energie .grid>.rv:nth-child(6){transition-delay:.15s}
  /* Bilder wischen von links herein */
  /* (das beobachtete Element selbst bleibt unbeschnitten, sonst meldet der Browser es nie als sichtbar) */
  html.js .anim-energie .split figure.rv>img,html.js .anim-energie .card.rv .card-img{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s .1s cubic-bezier(.7,0,.2,1)}
  html.js .anim-energie .split figure.rv.in>img,html.js .anim-energie .card.rv.in .card-img{clip-path:inset(0 0 0 0)}
  html.js .anim-energie .split figure.rv{transform:none}
  /* Abschnitts-Titel: Akzentbalken fährt aus */
  html.js .anim-energie .sec-head.rv h2::after{transform:scaleX(0);transition:transform .7s .35s cubic-bezier(.2,.7,.2,1)}
  html.js .anim-energie .sec-head.rv.in h2::after{transform:scaleX(1)}
  /* Hero: Bild zoomt langsam, Text steigt nacheinander auf */
  .anim-energie .hero-bg{animation:energieZoom 18s ease-out both}
  .anim-energie .hero .kicker,.anim-energie .hero h1,.anim-energie .hero h2,.anim-energie .hero-lead,.anim-energie .hero .btn-row{animation:energieAuf .9s cubic-bezier(.16,.8,.24,1) both}
  .anim-energie .hero h1,.anim-energie .hero h2{animation-delay:.12s}
  .anim-energie .hero-lead{animation-delay:.26s}
  .anim-energie .hero .btn-row{animation-delay:.4s}
  /* Lichtkante, die über die Knöpfe läuft */
  .anim-energie .btn:not(.ghost){position:relative;overflow:hidden;isolation:isolate}
  .anim-energie .btn:not(.ghost)::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;z-index:-1;pointer-events:none;
    background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:energieGlanz 4.5s ease-in-out infinite}
  .anim-energie .btn:hover::before{animation-duration:1.2s}
  /* Karten heben sich deutlicher */
  .anim-energie .card:hover,.anim-energie .feature:hover{transform:translateY(-8px);box-shadow:0 22px 40px -22px rgba(0,0,0,.35)}
  .anim-energie .card .card-img img{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
  .anim-energie .card:hover .card-img img{transform:scale(1.08)}
  /* Symbole pulsieren leicht beim Darüberfahren */
  .anim-energie .feature:hover .f-ic svg,.anim-energie .ikon:hover svg{animation:energiePuls .6s ease}
}
@keyframes energieZoom{from{transform:scale(1.14)}to{transform:scale(1)}}
@keyframes energieAuf{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:none}}
@keyframes energieGlanz{0%,70%{left:-60%}100%{left:130%}}
@keyframes energiePuls{0%,100%{transform:scale(1)}40%{transform:scale(1.22) rotate(-6deg)}}
/* Häkchen-Liste in Texten: <ul class="haken"> */
.prose ul.haken,ul.haken{list-style:none;padding:0;margin:1.2rem 0;display:grid;gap:.55rem}
ul.haken li{position:relative;padding-left:2rem;font-weight:600}
ul.haken li::before{content:"";position:absolute;left:0;top:.15em;width:1.3rem;height:1.3rem;border-radius:var(--rad-s);background:var(--c1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.2'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/70% no-repeat}
/* Energie: Slider-Pfeile eckig unten rechts statt über dem Titel, Knopf im Mega-Menü einzeilig */
.ausdruck-energie .hero.stil-voll .s-arrow{top:auto;bottom:2rem;transform:none;border-radius:var(--rad-s);width:50px;height:50px}
.ausdruck-energie .hero.stil-voll .s-arrow.prev{left:auto;right:calc(1.5rem + 60px)}
.ausdruck-energie .hero.stil-voll .s-arrow:hover::before{border-color:var(--on-c1)}
#hauptnav .mega-plus .mm-btn{white-space:nowrap}
.ausdruck-energie #hauptnav .mega-plus .mm-btn{font-size:.78rem;padding:.75rem 1rem}
.ausdruck-energie .nav-cta{white-space:nowrap;padding:.9rem 1.2rem;font-size:.8rem}
@media (min-width:1101px) and (max-width:1380px){.ausdruck-energie .nav-cta::after{display:none}}
@media (min-width:1101px) and (max-width:1380px){.ausdruck-energie .head-tel{display:none}}

/* ================= Mega-Menü: moderne Darstellungen 14–20 ================= */
@media (min-width:1101px){
  /* 14. Glas: Milchglas mit weichem Schatten */
  #hauptnav.mmv-glas .sub.mega-plus{background:color-mix(in srgb,#fff 82%,transparent);-webkit-backdrop-filter:blur(18px) saturate(1.6);backdrop-filter:blur(18px) saturate(1.6);
    border:1px solid color-mix(in srgb,#fff 70%,transparent);border-radius:22px;box-shadow:0 30px 60px -20px rgba(15,25,45,.35),inset 0 1px 0 rgba(255,255,255,.8)}
  #hauptnav.mmv-glas .mm-fuss{background:color-mix(in srgb,#fff 40%,transparent);border-color:color-mix(in srgb,#fff 60%,transparent);border-radius:0 0 22px 22px}
  #hauptnav.mmv-glas .mm-links a:hover{background:color-mix(in srgb,#fff 70%,transparent)}
  #hauptnav.mmv-glas .mm-ic{background:#fff;box-shadow:0 4px 12px -6px rgba(0,0,0,.25)}
  #hauptnav.mmv-glas .mm-teaser{background:color-mix(in srgb,#fff 60%,transparent);border-radius:16px}
  #hauptnav.mmv-glas .mm-titel,#hauptnav.mmv-glas .mm-intro{border-color:color-mix(in srgb,var(--dark) 10%,transparent)}

  /* 15. Reiter: links die Gruppen, rechts die Links der gewählten Gruppe */
  #hauptnav.mmv-tabs .mm-spalten{position:relative;display:block;min-height:250px}
  #hauptnav.mmv-tabs .mm-spalte{width:230px}
  #hauptnav.mmv-tabs .mm-titel{margin:0 0 .25rem;padding:.75rem 1rem;border:0;border-radius:var(--rad-s);font-size:.88rem;letter-spacing:.03em;text-transform:none;color:var(--ink);cursor:default;position:relative}
  #hauptnav.mmv-tabs .mm-titel::after{content:"›";position:absolute;right:1rem;font-size:1.2rem;line-height:1;top:50%;transform:translateY(-55%);opacity:.4}
  #hauptnav.mmv-tabs .mm-links{position:absolute;left:250px;right:0;top:0;display:none!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:.3rem .8rem;padding-left:1.5rem;border-left:1px solid var(--line);min-height:100%;align-content:start}
  #hauptnav.mmv-tabs .mm-spalte:first-child .mm-links{display:grid!important}
  #hauptnav.mmv-tabs .mm-spalte:first-child .mm-titel{background:var(--c1);color:var(--on-c1)}
  #hauptnav.mmv-tabs .mm-spalten:has(.mm-spalte:not(:first-child):hover) .mm-spalte:first-child .mm-links{display:none!important}
  #hauptnav.mmv-tabs .mm-spalten:has(.mm-spalte:not(:first-child):hover) .mm-spalte:first-child .mm-titel{background:none;color:var(--ink)}
  #hauptnav.mmv-tabs .mm-spalte:hover .mm-links{display:grid!important}
  #hauptnav.mmv-tabs .mm-spalte:hover .mm-titel{background:var(--c1);color:var(--on-c1)}
  #hauptnav.mmv-tabs .mm-spalte:hover .mm-titel::after{opacity:1}

  /* 16. Verlauf: Farbverlauf, helle Schrift */
  #hauptnav.mmv-verlauf .sub.mega-plus{background:linear-gradient(125deg,var(--c1) 0%,color-mix(in srgb,var(--c1) 45%,var(--dark)) 45%,var(--dark) 100%);border:0;color:#fff}
  #hauptnav.mmv-verlauf .mega-plus a,#hauptnav.mmv-verlauf .mm-intro-t,#hauptnav.mmv-verlauf .mm-teaser-body b{color:#fff}
  #hauptnav.mmv-verlauf .mm-titel{color:rgba(255,255,255,.7);border-color:rgba(255,255,255,.18)}
  #hauptnav.mmv-verlauf .mm-t small,#hauptnav.mmv-verlauf .mm-intro p,#hauptnav.mmv-verlauf .mm-teaser-body small{color:rgba(255,255,255,.75)}
  #hauptnav.mmv-verlauf .mm-intro{border-color:rgba(255,255,255,.18)}
  #hauptnav.mmv-verlauf .mm-links a:hover,#hauptnav.mmv-verlauf .mm-links [aria-current="page"]{background:rgba(255,255,255,.12);color:#fff}
  #hauptnav.mmv-verlauf .mm-links [aria-current="page"]{box-shadow:inset 3px 0 0 #fff}
  #hauptnav.mmv-verlauf .mm-ic{background:rgba(255,255,255,.14);color:#fff}
  #hauptnav.mmv-verlauf .mm-teaser{background:rgba(255,255,255,.1)}
  #hauptnav.mmv-verlauf .mm-kicker,#hauptnav.mmv-verlauf .mm-mehr,#hauptnav.mmv-verlauf .mm-fuss a{color:var(--c2)}
  #hauptnav.mmv-verlauf .mm-fuss{background:rgba(0,0,0,.18);border-color:rgba(255,255,255,.12);color:rgba(255,255,255,.75)}
  #hauptnav.mmv-verlauf .mega-plus .mm-btn{background:#fff;border-color:#fff;color:var(--dark)}

  /* 17. Nummern: 01, 02 … grosse Ziffern, keine Symbole */
  #hauptnav.mmv-nummern .mm-spalten{counter-reset:mmnr}
  #hauptnav.mmv-nummern .mm-ic{display:none}
  #hauptnav.mmv-nummern .mm-links li{counter-increment:mmnr}
  #hauptnav.mmv-nummern .mm-links a{align-items:baseline;gap:.9rem;padding:.6rem .4rem;border-bottom:1px solid var(--line);border-radius:0}
  #hauptnav.mmv-nummern .mm-links a::before{content:counter(mmnr,decimal-leading-zero);font-family:var(--font-h);font-size:1.5rem;font-weight:800;line-height:1;color:color-mix(in srgb,var(--c1) 35%,transparent);min-width:2.2rem;transition:color .2s}
  #hauptnav.mmv-nummern .mm-links a:hover{background:none}
  #hauptnav.mmv-nummern .mm-links a:hover::before{color:var(--c1-text)}
  #hauptnav.mmv-nummern .mm-titel{border:0;color:var(--ink);font-size:.82rem}

  /* 18. Schwebend: abgelöste, stark gerundete Karte; Pfeil erscheint beim Darüberfahren */
  #hauptnav.mmv-schwebend .sub.mega-plus{margin-top:14px;border-radius:28px;border:0;box-shadow:0 40px 80px -30px rgba(15,25,45,.45),0 0 0 1px color-mix(in srgb,var(--dark) 6%,transparent);overflow:hidden;animation:mmSchweben .28s cubic-bezier(.2,.8,.2,1) both}
  #hauptnav.mmv-schwebend .sub.mega-plus::after{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,var(--c1),var(--c2))}
  #hauptnav.mmv-schwebend .mm-links a{position:relative;padding-right:2rem;border-radius:14px}
  #hauptnav.mmv-schwebend .mm-links a::after{content:"→";position:absolute;right:.8rem;top:50%;transform:translate(-6px,-50%);opacity:0;transition:.2s;color:var(--c1-text);font-weight:700}
  #hauptnav.mmv-schwebend .mm-links a:hover::after{opacity:1;transform:translate(0,-50%)}
  #hauptnav.mmv-schwebend .mm-ic{border-radius:50%}
  #hauptnav.mmv-schwebend .mm-teaser{border-radius:20px}
  #hauptnav.mmv-schwebend .mm-fuss{border:0}

  /* 19. Neon: dunkel mit leuchtenden Akzentkanten */
  #hauptnav.mmv-neon .sub.mega-plus{background:#070b14;border:1px solid color-mix(in srgb,var(--c1) 55%,transparent);color:#dfe6f2;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--c1) 25%,transparent),0 0 40px -6px color-mix(in srgb,var(--c1) 55%,transparent),0 30px 60px -20px #000}
  #hauptnav.mmv-neon .mega-plus a,#hauptnav.mmv-neon .mm-intro-t,#hauptnav.mmv-neon .mm-teaser-body b{color:#fff}
  #hauptnav.mmv-neon .mm-titel{color:var(--c1);border-color:color-mix(in srgb,var(--c1) 30%,transparent);text-shadow:0 0 12px color-mix(in srgb,var(--c1) 70%,transparent)}
  #hauptnav.mmv-neon .mm-t small,#hauptnav.mmv-neon .mm-intro p,#hauptnav.mmv-neon .mm-teaser-body small{color:#8d9ab0}
  #hauptnav.mmv-neon .mm-intro{border-color:color-mix(in srgb,var(--c1) 25%,transparent)}
  #hauptnav.mmv-neon .mm-ic{background:transparent;color:var(--c1);border:1px solid color-mix(in srgb,var(--c1) 60%,transparent);box-shadow:0 0 12px -2px color-mix(in srgb,var(--c1) 70%,transparent)}
  #hauptnav.mmv-neon .mm-links a:hover,#hauptnav.mmv-neon .mm-links [aria-current="page"]{color:#fff;background:color-mix(in srgb,var(--c1) 12%,transparent);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c1) 45%,transparent)}
  #hauptnav.mmv-neon .mm-teaser{background:#0e1422;border:1px solid color-mix(in srgb,var(--c1) 25%,transparent)}
  #hauptnav.mmv-neon .mm-kicker,#hauptnav.mmv-neon .mm-mehr,#hauptnav.mmv-neon .mm-fuss a{color:var(--c1)}
  #hauptnav.mmv-neon .mm-fuss{background:#05080f;border-color:color-mix(in srgb,var(--c1) 25%,transparent);color:#8d9ab0}

  /* 20. Pillen: Links als runde Chips */
  #hauptnav.mmv-pillen .mm-intro,#hauptnav.mmv-pillen .mm-ic,#hauptnav.mmv-pillen .mm-t small{display:none}
  #hauptnav.mmv-pillen .mm-titel{border:0;padding-left:0}
  #hauptnav.mmv-pillen .mm-links{display:flex!important;flex-wrap:wrap;gap:.5rem}
  #hauptnav.mmv-pillen .mm-links a{padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:#fff;font-size:.9rem;transition:background .15s,color .15s,border-color .15s,transform .15s}
  #hauptnav.mmv-pillen .mm-links a:hover{background:var(--c1);border-color:var(--c1);color:var(--on-c1);transform:translateY(-2px)}
  #hauptnav.mmv-pillen .mm-links a:hover .mm-badge{background:var(--on-c1);color:var(--c1)}
  #hauptnav.mmv-pillen .sub.mega-plus{background:var(--grey);border-radius:20px}
  #hauptnav.mmv-pillen .mm-teaser{background:#fff;border-radius:16px}
  #hauptnav.mmv-pillen .mm-fuss{background:transparent}
}
@keyframes mmSchweben{from{opacity:0;transform:translateY(-10px) scale(.98)}to{opacity:1;transform:none}}

/* ================= Ausdruck «Klar» (Mobilität, Energie, Technik) =================
   Kräftige Titel in normaler Schreibweise, Kennzeichnung in der Hauptfarbe, Pfeil-Knöpfe,
   die erste Kachelreihe nach dem Hero überlappt das Bild als weisse Leiste. */
.ausdruck-klar h1,.ausdruck-klar h2{font-weight:700;letter-spacing:-.025em;line-height:1.08}
.ausdruck-klar h3{font-weight:700;letter-spacing:-.01em}
.ausdruck-klar .kicker{font-size:.95rem;font-weight:700;color:var(--c1-text);gap:.5rem}
.ausdruck-klar .kicker::before{width:8px;height:8px;border-radius:50%;background:var(--c1);box-shadow:0 0 0 4px color-mix(in srgb,var(--c1) 22%,transparent)}
.ausdruck-klar .hero .kicker,.ausdruck-klar .bg-dunkel .kicker,.ausdruck-klar .bg-bild .kicker{color:#fff}
.ausdruck-klar .btn{font-weight:700;padding:1.05rem 1.9rem}
.ausdruck-klar .btn:not(.ghost)::after{content:"";width:15px;height:15px;flex:none;background:currentColor;transition:transform .2s;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center/contain no-repeat}
.ausdruck-klar .btn:hover::after{transform:translateX(4px)}
.ausdruck-klar .hero .btn.ghost{background:#fff;color:var(--dark);border-color:#fff}
.ausdruck-klar .hero .btn.ghost:hover{background:var(--c1);border-color:var(--c1);color:var(--on-c1)}
/* Kopfzeile über dem Bild: weisser Knopf rechts */
.ausdruck-klar .site-head.transparent:not(.scrolled) .nav-cta{background:#fff;border-color:#fff;color:var(--dark)}
.ausdruck-klar .site-head.transparent:not(.scrolled) .nav-cta:hover{background:var(--c1);border-color:var(--c1);color:var(--on-c1)}
.ausdruck-klar .site-head.transparent:not(.scrolled) .nav ul a:hover,.ausdruck-klar .site-head.transparent:not(.scrolled) .nav ul button:hover{color:var(--c1)}
/* Erste Kachelreihe nach dem Hero: weisse Leiste, die ins Bild ragt */
.ausdruck-klar .hero+.sec{padding-top:0;background:var(--bg)}
.ausdruck-klar .hero+.sec>.wrap{position:relative;z-index:4;margin-top:-80px}
.ausdruck-klar .hero+.sec .grid{gap:0;background:#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.35);border-radius:var(--rad-s);overflow:hidden}
.ausdruck-klar .hero+.sec .feature{border:0;border-radius:0;text-align:center;padding:2.2rem 1.4rem;background:#fff}
.ausdruck-klar .hero+.sec .feature+.feature{border-left:1px solid var(--line)}
.ausdruck-klar .hero+.sec .f-ic{margin-inline:auto;background:none;color:var(--c1-text);width:58px;height:58px}
.ausdruck-klar .hero+.sec .f-ic svg{width:44px;height:44px;stroke-width:1.4}
.ausdruck-klar .hero+.sec .feature:hover{transform:none;box-shadow:none;background:color-mix(in srgb,var(--c1) 7%,#fff)}
.ausdruck-klar .hero+.sec .feature h3{font-size:1.05rem}
.ausdruck-klar .hero+.sec .feature p{font-size:.88rem}
@media (max-width:900px){.ausdruck-klar .hero+.sec>.wrap{margin-top:-40px}.ausdruck-klar .hero+.sec .feature+.feature{border-left:0;border-top:1px solid var(--line)}}
/* Vorteile allgemein: Symbol in Hauptfarbe, Karte mit feiner Linie */
.ausdruck-klar .f-ic{background:color-mix(in srgb,var(--c1) 14%,#fff);color:var(--c1-text);border-radius:50%}
.ausdruck-klar .feature:hover .f-ic{background:var(--c1);color:var(--on-c1)}
/* Karten: «Mehr erfahren» in Hauptfarbe, Bild zoomt */
.ausdruck-klar .card{border-radius:var(--rad-s)}
.ausdruck-klar .card .more{color:var(--c1-text)}
/* Zahlen auf dunklem Grund in Hauptfarbe */
.ausdruck-klar .bg-dunkel .counter b,.ausdruck-klar .bg-bild .counter b{color:var(--c1)}
/* Seitenkopf: grosse Titel, Brotkrumen in Hauptfarbe */
.ausdruck-klar .page-head h1{font-weight:700}
.ausdruck-klar .page-head .crumbs a{color:var(--c1)}
.ausdruck-klar .hero+.sec{position:relative;z-index:5}
.ausdruck-klar .hero.stil-voll .s-arrow{top:auto;bottom:7.5rem;transform:none;border-radius:var(--rad-s);width:50px;height:50px}
.ausdruck-klar .hero.stil-voll .s-arrow.prev{left:auto;right:calc(1.5rem + 60px)}

/* ================= Text-Lesbarkeit «Kräftig» (Design → Text-Lesbarkeit, Standard) =================
   Gegen «neblige» Texte: etwas stärkere Schrift, dunklere Nebentexte, keine künstlich verdickten
   Schriften (Browser-Fettung verschmiert die Kanten), Titel ohne weiche Schatten. Farben werden aus
   der jeweiligen Textfarbe abgeleitet, damit warme Paletten (z.B. Studio/Bäckerei) warm bleiben. */
body.lesbar{font-weight:450;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:auto;-moz-osx-font-smoothing:auto;
  --soft:color-mix(in srgb,var(--ink) 86%,var(--bg,#fff))}
body.lesbar :where(p,li,td,dd){font-weight:470}
body.lesbar h1,body.lesbar h2,body.lesbar h3,body.lesbar h4{text-shadow:none;font-synthesis:none}
body.lesbar .hero h1,body.lesbar .hero h2{text-shadow:0 1px 1px rgba(0,0,0,.18)}
body.lesbar .hero-lead{font-weight:500;color:#eef2f7}
body.lesbar .sec-lead{color:color-mix(in srgb,var(--ink) 88%,var(--bg,#fff))}
body.lesbar .bg-dunkel,body.lesbar .bg-bild{color:#f1f4f9}
body.lesbar .bg-dunkel .sec-lead,body.lesbar .bg-bild .sec-lead{color:#dfe5ee}
body.lesbar .site-foot,body.lesbar footer{-webkit-font-smoothing:auto}

/* ================= Weitere Schriften (selbst gehostet, nur lateinische Zeichen inkl. Umlaute) ================= */
@font-face{font-family:"Montserrat";src:url("fonts/montserrat-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Poppins";src:url("fonts/poppins-latin-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Raleway";src:url("fonts/raleway-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito-latin.woff2") format("woff2-variations");font-weight:200 1000;font-display:swap}
@font-face{font-family:"Rubik";src:url("fonts/rubik-latin.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Work Sans";src:url("fonts/work-sans-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Sans";src:url("fonts/dm-sans-latin.woff2") format("woff2-variations");font-weight:100 1000;font-display:swap}
@font-face{font-family:"Figtree";src:url("fonts/figtree-latin.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Lexend";src:url("fonts/lexend-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Sora";src:url("fonts/sora-latin.woff2") format("woff2-variations");font-weight:100 800;font-display:swap}
@font-face{font-family:"Urbanist";src:url("fonts/urbanist-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Red Hat Display";src:url("fonts/red-hat-display-latin.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Open Sans";src:url("fonts/open-sans-latin.woff2") format("woff2-variations");font-weight:300 800;font-display:swap}
@font-face{font-family:"Roboto";src:url("fonts/roboto-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Barlow";src:url("fonts/barlow-latin-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Bricolage Grotesque";src:url("fonts/bricolage-grotesque-latin.woff2") format("woff2-variations");font-weight:200 800;font-display:swap}
@font-face{font-family:"Oswald";src:url("fonts/oswald-latin.woff2") format("woff2-variations");font-weight:200 700;font-display:swap}
@font-face{font-family:"Bebas Neue";src:url("fonts/bebas-neue-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Unbounded";src:url("fonts/unbounded-latin.woff2") format("woff2-variations");font-weight:200 900;font-display:swap}
@font-face{font-family:"Lora";src:url("fonts/lora-latin.woff2") format("woff2-variations");font-weight:400 700;font-display:swap}
@font-face{font-family:"Merriweather";src:url("fonts/merriweather-latin.woff2") format("woff2-variations");font-weight:300 900;font-display:swap}
@font-face{font-family:"Roboto Slab";src:url("fonts/roboto-slab-latin.woff2") format("woff2-variations");font-weight:100 900;font-display:swap}
@font-face{font-family:"DM Serif Display";src:url("fonts/dm-serif-display-latin-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("fonts/eb-garamond-latin.woff2") format("woff2-variations");font-weight:400 800;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url("fonts/cormorant-garamond-latin.woff2") format("woff2-variations");font-weight:300 700;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url("fonts/bodoni-moda-latin.woff2") format("woff2-variations");font-weight:400 900;font-display:swap}
@font-face{font-family:"Caveat";src:url("fonts/caveat-latin.woff2") format("woff2-variations");font-weight:400 700;font-display:swap}
@font-face{font-family:"Dancing Script";src:url("fonts/dancing-script-latin.woff2") format("woff2-variations");font-weight:400 700;font-display:swap}
/* Bebas Neue gibt es nur in einer Stärke – Titel nicht künstlich fetten */

/* ================= Team: Darstellungen der Fotos ================= */
.grid[class*="team-"]{grid-template-columns:repeat(var(--team-sp,4),minmax(0,1fr))}
@media (max-width:1000px){.grid[class*="team-"]{grid-template-columns:repeat(min(var(--team-sp,4),3),minmax(0,1fr))}}
@media (max-width:640px){.grid[class*="team-"]{grid-template-columns:repeat(2,minmax(0,1fr))}.grid.team-kompakt{grid-template-columns:1fr}}
.p-bild{position:relative}
.person .p-bild img,.person .p-bild .p-ini{display:block}
/* Rund */
.team-rund .p-bild{width:min(190px,80%);margin:0 auto 1.1rem;border-radius:50%;padding:5px;transition:box-shadow .25s}
.team-rund .p-bild img,.team-rund .p-ini{border-radius:50%;margin:0}
.team-rund .person:hover .p-bild{box-shadow:0 0 0 3px var(--c1)}
/* Hochformat mit Name auf dem Bild */
.team-hoch .person{position:relative;border-radius:var(--rad);overflow:hidden;text-align:left}
.team-hoch .p-bild img,.team-hoch .p-ini{aspect-ratio:3/4;margin:0;border-radius:0;transition:transform .6s}
.team-hoch .person:hover .p-bild img{transform:scale(1.05)}
.team-hoch .p-txt{position:absolute;left:0;right:0;bottom:0;padding:3rem 1.1rem 1rem;background:linear-gradient(to top,color-mix(in srgb,var(--dark) 88%,transparent),transparent);color:#fff}
.team-hoch .p-txt h3{color:#fff;margin:0}.team-hoch .rolle{color:var(--c2);margin:.15rem 0 0;font-size:.9rem}
.team-hoch .p-txt p:not(.rolle){color:#e3e8ef;font-size:.85rem;margin:.4rem 0 0}
/* Karte */
.team-karte .person{background:#fff;border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:transform .25s,box-shadow .25s}
.team-karte .p-bild img,.team-karte .p-ini{margin:0;border-radius:0;aspect-ratio:4/3.6}
.team-karte .p-txt{padding:1.1rem 1rem 1.3rem;border-top:3px solid var(--c1)}
.team-karte .person:hover{transform:translateY(-6px);box-shadow:var(--shadow)}
/* Schwarzweiss -> Farbe */
.team-sw .p-bild{overflow:hidden;border-radius:var(--rad);margin-bottom:1.1rem}
.team-sw .p-bild img{margin:0;filter:grayscale(1) contrast(1.05);transition:filter .45s,transform .6s}
.team-sw .person:hover .p-bild img{filter:none;transform:scale(1.04)}
/* Versetzter Rahmen */
.team-rahmen .p-bild{margin:0 12px 1.6rem 0}
.team-rahmen .p-bild::before{content:"";position:absolute;inset:12px -12px -12px 12px;border:3px solid var(--c2);border-radius:var(--rad);z-index:-1;transition:inset .25s}
.team-rahmen .person{position:relative;z-index:0}
.team-rahmen .p-bild img,.team-rahmen .p-ini{margin:0}
.team-rahmen .person:hover .p-bild::before{inset:6px -6px -6px 6px}
/* Kompakt: kleines rundes Foto, Text daneben */
.grid.team-kompakt{gap:.9rem 1.5rem}
.team-kompakt .person{display:flex;align-items:center;gap:1rem;text-align:left;padding:.7rem;border-radius:var(--rad-s);transition:background .2s}
.team-kompakt .person:hover{background:var(--grey)}
.team-kompakt .p-bild{flex:none;width:76px}
.team-kompakt .p-bild img,.team-kompakt .p-ini{width:76px;height:76px;border-radius:50%;margin:0;font-size:1.6rem}
.team-kompakt h3{font-size:1.02rem;margin:0}.team-kompakt .rolle{font-size:.86rem;margin:.1rem 0 0}
.team-kompakt .p-txt p:not(.rolle){font-size:.85rem;margin:.25rem 0 0}
/* Rechner / externe Seite einbinden */
.einbett{max-width:960px;margin:0 auto;border-radius:var(--rad);overflow:hidden;border:1px solid var(--line);background:#fff;box-shadow:var(--shadow)}
.einbett iframe{display:block;width:100%;border:0}
.einbett-gate{max-width:960px;margin:0 auto;height:min(var(--eh,760px),70vh)}
.einbett-gate::before{display:none}
.einbett-link{text-align:center;margin:1rem 0 0;font-weight:600}
.anker{position:relative;top:calc(-1 * var(--head-h,90px))}
.einbett-knopf{text-align:center}.einbett-knopf .btn{font-size:1.1rem;padding:1.15rem 2.2rem}.einbett-knopf p{margin:.8rem 0 0;font-size:.9rem}

/* ================= PDFs ansehen und herunterladen ================= */
.dl-pdf{padding:0;gap:0}
.dl-pdf .dl-haupt{flex:1;display:flex;align-items:center;gap:1rem;padding:1rem 1.2rem;color:inherit;text-decoration:none;min-width:0}
.dl-pdf .dl-haupt em{margin-left:auto}
.dl-btn{flex:none;align-self:stretch;display:inline-flex;align-items:center;gap:.4rem;padding:0 1rem;border-left:1px solid var(--line);font-size:.85rem;font-weight:700;color:var(--c1-text);text-decoration:none;white-space:nowrap}
.dl-btn:hover{background:color-mix(in srgb,var(--c1) 8%,#fff)}
@media (max-width:560px){.dl-pdf{flex-wrap:wrap}.dl-pdf .dl-haupt{flex-basis:100%}.dl-btn{flex:1;justify-content:center;padding:.7rem;border-left:0;border-top:1px solid var(--line)}.dl-btn+.dl-btn{border-left:1px solid var(--line)}.dl-laden span{display:inline}}
.pdf-dlg{width:min(1100px,96vw);height:92vh;max-height:none;padding:0;border:0;border-radius:var(--rad);overflow:hidden;box-shadow:0 30px 80px rgba(0,0,0,.45);background:#fff}
.pdf-dlg::backdrop{background:rgba(10,15,25,.7)}
.pdf-dlg[open]{display:flex;flex-direction:column}
.pdf-kopf{display:flex;align-items:center;gap:.6rem;padding:.7rem .9rem .7rem 1.2rem;border-bottom:1px solid var(--line);background:#fff}
.pdf-kopf b{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)}
.pdf-kopf a,.pdf-kopf button{display:inline-flex;align-items:center;gap:.35rem;padding:.55rem .9rem;border-radius:var(--rad-btn);border:1px solid var(--line);background:#fff;color:var(--ink);font:inherit;font-size:.85rem;font-weight:700;text-decoration:none;cursor:pointer}
.pdf-kopf a.pdf-laden{background:var(--c1);border-color:var(--c1);color:var(--on-c1)}
.pdf-kopf button{width:40px;height:40px;justify-content:center;padding:0;font-size:1.3rem;line-height:1}
.pdf-dlg iframe{flex:1;width:100%;border:0;background:#525659}
html.pdf-offen{overflow:hidden}

/* ---------- Hero: Text-Grösse & Position pro Folie ---------- */
.hero .slides .slide.ht :is(h1,h2){font-size:var(--ht-fs)}
.hero .slides .slide.htp-v-o{align-items:flex-start}
.hero .slides .slide.htp-v-m{align-items:center}
.hero .slides .slide.htp-v-u{align-items:flex-end}
.hero .slides .slide.htp .hero-txt{text-align:left}
.hero .slides .slide.htp-h-l .hero-txt{margin-left:0;margin-right:auto}
.hero .slides .slide.htp-h-r .hero-txt{margin-left:auto;margin-right:0}
.hero .slides .slide.htp-h-m .hero-txt{margin-inline:auto;text-align:center}
.hero .slides .slide.htp-h-m .hero-lead{margin-inline:auto}
.hero .slides .slide.htp-h-m .btn-row{justify-content:center}
.hero .slides .slide.htp-h-l .btn-row,.hero .slides .slide.htp-h-r .btn-row{justify-content:flex-start}
.hero .slides .slide.hb-schmal .hero-txt{max-width:28rem}
.hero .slides .slide.hb-breit .hero-txt{max-width:60rem}
.hero .slides .slide.hb-voll .hero-txt{max-width:none}
.hero .slides .slide.hb-breit .hero-lead,.hero .slides .slide.hb-voll .hero-lead{max-width:70ch}
/* Abdunkelung folgt dem Text, damit er lesbar bleibt (nur bei den Stilen mit Verlauf) */
.hero.stil-voll .slides .slide.htp-h-r::before{background:linear-gradient(270deg,color-mix(in srgb,var(--dark) 92%,transparent) 0%,color-mix(in srgb,var(--dark) 70%,transparent) 45%,color-mix(in srgb,var(--dark) 15%,transparent) 100%)}
.hero.stil-voll .slides .slide.htp-h-m::before{background:color-mix(in srgb,var(--dark) 68%,transparent)}
.hero.stil-modern .slides .slide.htp-v-o::before{background:linear-gradient(0deg,rgba(0,0,0,.04) 0%,rgba(0,0,0,.18) 45%,color-mix(in srgb,var(--dark) 90%,transparent) 100%)}
.hero.stil-modern .slides .slide.htp-v-m::before{background:color-mix(in srgb,var(--dark) 55%,transparent)}
@media (max-width:700px){
  .hero .slides .slide.htp-h-r .hero-txt{margin-left:0;margin-right:auto}
  .hero .slides .slide.hb-schmal .hero-txt{max-width:none}
}
/* Hero: Abdunkelung pro Folie heller stellen (Feld bild_hell) – Text bekommt dafür einen weichen Schatten */
.hero .slides .slide.hh::before,.hero .slides .slide.hh::after{opacity:var(--hh,1)}
.hero .slides .slide.hh .hero-txt :is(h1,h2,.hero-lead){text-shadow:0 2px 14px rgba(0,0,0,.55),0 1px 3px rgba(0,0,0,.35)}
.hero .slides .slide.hh .hero-lead{color:#fff}

/* ---------- Diagramm: gestapelte Balken ---------- */
.dg{max-width:62rem;margin-inline:auto}
.dg-legende{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:0;margin:0 0 1.6rem;font-size:.92rem;font-weight:600}
.dg-legende li{display:flex;align-items:center;gap:.5rem}
.dg-f{width:14px;height:14px;border-radius:4px;display:inline-block}
.dg-gruppe+.dg-gruppe{margin-top:1.6rem}
.dg-gt{font-size:1.05rem;margin:0 0 .6rem}
.dg-zeile{display:grid;grid-template-columns:minmax(4.5rem,9rem) 1fr minmax(7.5rem,auto);align-items:center;gap:.4rem 1rem;margin:.5rem 0}
.dg-zeile.ohne-total{grid-template-columns:minmax(4.5rem,9rem) 1fr}
.dg-lbl{font-weight:600;font-size:.95rem}
.dg-bar{display:flex;height:2.4rem;border-radius:8px;overflow:hidden;background:color-mix(in srgb,var(--ink,#1a2433) 6%,transparent)}
.dg-seg{flex:0 0 var(--w);display:flex;align-items:center;justify-content:center;min-width:0;color:#fff;font-size:.82rem;transition:flex-basis 1s cubic-bezier(.2,.8,.2,1)}
.dg-seg+.dg-seg{box-shadow:inset 2px 0 0 rgba(255,255,255,.55)}
.dg-seg b{font-weight:700;white-space:nowrap;overflow:hidden}
.dg-seg.dg-eng b{display:none}
.dg-sum{font-weight:800;font-size:1.05rem;white-space:nowrap}
.dg-sum small{font-weight:500;font-size:.78rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.dg-c1{background:var(--c1);color:var(--on-c1,#fff)}
.dg-c2{background:var(--c2);color:var(--on-c2,#111)}
.dg-dunkel{background:var(--dark);color:#fff}
.dg-hell{background:color-mix(in srgb,var(--c1) 35%,#fff);color:var(--dark)}
.dg-grau{background:#9aa3ae;color:#fff}
.dg-gruen{background:#2f9e5b;color:#fff}
.dg-orange{background:#e8892b;color:#fff}
html.js .anim .dg.rv:not(.in) .dg-seg{flex-basis:0}
.dg-tab{margin-top:1.6rem;border:1px solid var(--line,#e3e7ee);border-radius:10px;background:var(--bg,#fff)}
.dg-tab summary{cursor:pointer;padding:.8rem 1.1rem;font-weight:600}
.dg-tab-in{overflow-x:auto;padding:0 1.1rem 1rem}
.dg-tab table{width:100%;border-collapse:collapse;font-size:.92rem}
.dg-tab th,.dg-tab td{padding:.5rem .6rem;border-bottom:1px solid var(--line,#e3e7ee);text-align:right;white-space:nowrap}
.dg-tab th:first-child,.dg-tab thead th:first-child{text-align:left}
.dg-einheit,.dg-hinweis{font-size:.85rem;color:color-mix(in srgb,var(--ink) 62%,transparent);margin:.8rem 0 0}
@media (max-width:640px){
  .dg-zeile,.dg-zeile.ohne-total{grid-template-columns:1fr auto}
  .dg-lbl{grid-column:1}.dg-sum{grid-column:2;grid-row:1;text-align:right}
  .dg-bar{grid-column:1/-1;height:2rem}
  .dg-seg b{font-size:.75rem}
}
/* Blog: eigenes Video (MP4/WebM) */
.blog-video{margin:0}
.blog-video video{display:block;width:100%;max-height:75vh;border-radius:var(--rad-s,10px);background:#000}
.blog-video figcaption{font-size:.9rem;margin-top:.5rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}
/* Blog: Titelbild gross im Beitrag */
.blog-titelbild{margin:0 0 1.8rem}
.blog-titelbild img{display:block;width:100%;height:auto;max-height:70vh;object-fit:cover;border-radius:var(--rad-s,10px)}

/* ---------- Liegenschaften & freie Wohnungen ---------- */
.lg-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:.8rem;margin:0 0 clamp(1.6rem,3vw,2.6rem)}
.lg-stats span{display:inline-flex;align-items:center;gap:.6rem;padding:.55rem 1.2rem .55rem .7rem;border-radius:999px;background:#fff;border:1px solid var(--line);font-weight:600;font-size:.95rem}
.lg-stats b{display:grid;place-items:center;min-width:2rem;height:2rem;padding:0 .5rem;border-radius:999px;background:var(--dark);color:#fff;font-size:.95rem}
.lg-stats .frei b{background:#12a05c}
.lg-liste{display:grid;gap:clamp(1.6rem,3vw,2.6rem)}
.lg-haus{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 1px 2px rgba(16,24,40,.04),0 24px 60px -34px rgba(16,24,40,.35);scroll-margin-top:120px;transition:box-shadow .3s}
.lg-haus:hover{box-shadow:0 1px 2px rgba(16,24,40,.05),0 30px 70px -32px rgba(16,24,40,.45)}
.lg-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.lg-haus.ohne-bild .lg-kopf{grid-template-columns:1fr}
.lg-haus:nth-child(even) .lg-bild{order:2}
.lg-bild{position:relative;overflow:hidden;min-height:340px}
.lg-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.lg-haus:hover .lg-bild img{transform:scale(1.05)}
.lg-badge{position:absolute;top:1.1rem;left:1.1rem;z-index:1;font-style:normal;font-weight:700;font-size:.82rem;padding:.45rem .95rem .45rem .8rem;border-radius:999px;background:rgba(255,255,255,.94);color:#0b6b3d;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);box-shadow:0 6px 18px -8px rgba(0,0,0,.4);display:inline-flex;align-items:center;gap:.5rem}
.lg-badge::before{content:"";width:9px;height:9px;border-radius:50%;background:#12a05c;box-shadow:0 0 0 4px rgba(18,160,92,.2)}
.lg-badge.res{color:#8a5a00}.lg-badge.res::before{background:#e0a100;box-shadow:0 0 0 4px rgba(224,161,0,.2)}
.lg-haus:nth-child(even) .lg-badge{left:auto;right:1.1rem}
.lg-haus.ohne-bild .lg-badge{position:static;margin:.2rem 0 .8rem;box-shadow:none;background:#dcf5e6}
.lg-info{padding:clamp(1.6rem,3.6vw,3rem);display:flex;flex-direction:column;justify-content:center}
.lg-adr{display:flex;align-items:center;gap:.4rem;margin:0 0 .5rem;font-size:.8rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--c1-text,var(--c1))}
.lg-info h3{font-size:clamp(1.45rem,2.4vw,2rem);line-height:1.15;margin:0 0 1rem;letter-spacing:-.01em}
.lg-chips{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;padding:0;margin:0 0 1.1rem}
.lg-chips li{padding:.38rem .9rem;border-radius:999px;background:color-mix(in srgb,var(--c1) 9%,#fff);color:var(--c1-text,var(--c1));font-weight:700;font-size:.86rem}
.lg-info .prose{font-size:.95rem}
.lg-info .prose ul{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0}
.lg-info .prose li{padding:.3rem .8rem;border:1px solid var(--line);border-radius:999px;font-size:.87rem;margin:0}
.lg-info .prose li::before{display:none}
.lg-pill{display:inline-block;font-style:normal;font-weight:700;font-size:.8rem;padding:.3rem .75rem;border-radius:999px;background:#dcf5e6;color:#0f7a4a}
.lg-pill.res{background:#fff3d6;color:#8a5a00}
.lg-wohnungen{margin:clamp(.8rem,1.6vw,1.2rem);border-radius:18px;padding:1.1rem clamp(.9rem,2vw,1.5rem) 1.2rem;background:color-mix(in srgb,var(--c1) 5%,#f6f7f9)}
.lg-wt{font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.07em;color:var(--c1-text,var(--c1));margin:0 0 .7rem}
.lg-wg{background:#fff;border-radius:14px;margin:.6rem 0;box-shadow:0 1px 2px rgba(16,24,40,.06);transition:box-shadow .25s}
.lg-wg:hover,.lg-wg[open]{box-shadow:0 10px 28px -16px rgba(16,24,40,.35)}
.lg-wg summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto auto auto;gap:.6rem 1.2rem;align-items:center;padding:1rem 1.2rem}
.lg-wg summary::-webkit-details-marker{display:none}
.lg-wg summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin:0 .3rem .25rem;transition:transform .25s}
.lg-wg[open] summary::after{transform:rotate(-135deg);margin-bottom:-.2rem}
.lg-wg-t b{display:block;font-size:1.05rem}
.lg-wg-t small,.lg-wg-m small{display:block;font-size:.84rem;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.lg-wg-m{text-align:right}
.lg-wg-m b{font-size:1.15rem;color:var(--c1-text,var(--c1))}
.lg-wg-body{padding:0 1.2rem 1.3rem;border-top:1px solid var(--line)}
.lg-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.6rem;margin:1.1rem 0}
.lg-fakten div{padding:.75rem .95rem;border-radius:12px;background:#f5f6f8}
.lg-fakten dt{font-size:.74rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:color-mix(in srgb,var(--ink) 58%,transparent);margin:0 0 .2rem}
.lg-fakten dd{margin:0;font-weight:700;font-size:1rem;line-height:1.3}
.lg-fakten .total{background:color-mix(in srgb,var(--c1) 9%,#fff)}
.lg-fakten .total dd{color:var(--c1-text,var(--c1))}
.lg-wg-body>p{margin:.9rem 0 0;max-width:70ch}
.lg-bilder{margin:1rem 0;gap:.5rem}
.lg-bilder img{aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.lg-wg .btn-row{margin-top:1rem}
.lg-wg.reserviert summary{opacity:.75}
.lg-leer{text-align:center;color:color-mix(in srgb,var(--ink) 62%,transparent)}
.lg-frei{max-width:920px;margin-inline:auto}
.lg-frei .lg-wg{border:1px solid var(--line)}
/* Standort-Karte je Haus */
.lg-karte{margin-top:1.4rem}
.lg-karte summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;padding:.6rem 1.15rem .6rem .95rem;border:1.5px solid var(--line);border-radius:999px;font-weight:700;font-size:.92rem;transition:border-color .2s,color .2s,background .2s}
.lg-karte summary::-webkit-details-marker{display:none}
.lg-karte summary svg{color:var(--c1-text,var(--c1))}
.lg-karte summary:hover,.lg-karte[open] summary{border-color:var(--c1);color:var(--c1-text,var(--c1));background:color-mix(in srgb,var(--c1) 5%,#fff)}
.lg-karte-in{margin-top:.9rem}
.lg-karte .map-gate{margin-top:0;border-radius:16px;opacity:1!important;transform:none!important}
.lg-karte .map-gate::before{padding-top:62%}
.lg-karte .map-btn{flex-direction:column;text-align:center;gap:.5rem;padding:1rem}
.lg-karte-link{margin:.6rem 0 0;font-size:.88rem}
@media (max-width:820px){
  .lg-kopf{grid-template-columns:1fr}
  .lg-haus:nth-child(even) .lg-bild{order:0}
  .lg-haus:nth-child(even) .lg-badge{left:1.1rem;right:auto}
  .lg-bild{min-height:0;aspect-ratio:16/10}
  .lg-wg summary{grid-template-columns:1fr auto}
  .lg-wg-s{grid-column:1/-1;grid-row:2}
  .lg-wg summary::after{grid-column:2;grid-row:1}
  .lg-wg-m{grid-column:1/-1;text-align:left;grid-row:3}
  .lg-fakten{grid-template-columns:repeat(2,minmax(0,1fr));gap:.45rem}
  .lg-fakten div{padding:.65rem .7rem}
  .lg-fakten .breit,.lg-fakten div:last-child:nth-child(odd),.lg-fakten .breit~div:last-child:nth-child(even){grid-column:1/-1}
  .lg-fakten .breit~div:last-child:nth-child(odd){grid-column:auto}
  .lg-fakten dt{font-size:.68rem;letter-spacing:.03em}
  .lg-fakten dd{font-size:.94rem;overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
  .lg-wg summary{padding:.9rem 1rem}
  .lg-wg-body{padding:0 1rem 1.1rem}
}

/* ---------- Blog-Beitrag: Darstellung «Modern» (.bp) ---------- */
.bp-kopf{background:linear-gradient(180deg,color-mix(in srgb,var(--c1) 6%,var(--grey)),var(--grey));padding:clamp(2.2rem,5vw,4rem) 0 clamp(2.2rem,5vw,3.6rem)}
.bp.mit-bild .bp-kopf{padding-bottom:clamp(6rem,14vw,11rem)}
.bp-kopf-in{max-width:860px;margin-inline:auto;text-align:center}
.bp-zurueck{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem 1rem .45rem .8rem;border-radius:999px;background:#fff;color:var(--ink);font-weight:700;font-size:.86rem;text-decoration:none;box-shadow:0 0 0 1px rgba(16,24,40,.07);transition:color .2s,box-shadow .2s}
.bp-zurueck svg{transform:rotate(180deg);transition:transform .25s}
.bp-zurueck:hover{color:var(--c1-text,var(--c1));box-shadow:0 0 0 1.5px var(--c1)}
.bp-zurueck:hover svg{transform:rotate(180deg) translateX(3px)}
.bp-datum{display:flex;justify-content:center;align-items:center;gap:.4rem;margin:1.4rem 0 .7rem;font-size:.86rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--c1-text,var(--c1))}
.bp-kopf h1{font-size:clamp(2rem,4.4vw,3.3rem);line-height:1.1;letter-spacing:-.015em;margin:0;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
.bp-lead{margin:1.1rem auto 0;max-width:60ch;font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.55;color:var(--soft)}
.bp-bild{max-width:1040px;margin:calc(-1 * clamp(4.6rem,11vw,8.6rem)) auto 0;border-radius:24px;overflow:hidden;box-shadow:0 30px 70px -36px rgba(16,24,40,.55);background:var(--grey)}
.bp-bild img{display:block;width:100%;height:auto;max-height:min(74vh,660px);object-fit:cover}
.bp-inhalt{max-width:720px;margin:clamp(2rem,4.5vw,3.4rem) auto clamp(2.4rem,5vw,4rem);font-size:1.08rem;line-height:1.75}
.bp-inhalt>p:first-child{font-size:1.18em;line-height:1.6;color:var(--ink)}
.bp-inhalt img{border-radius:16px}

/* ---------- Stellen: moderne, aufklappbare Karten (.jb) ---------- */
.jb-liste{display:grid;gap:clamp(1rem,2vw,1.4rem);margin-bottom:clamp(2.4rem,5vw,3.6rem)}
.jb{background:#fff;color:var(--ink);border-radius:22px;box-shadow:0 0 0 1px rgba(16,24,40,.05),0 20px 46px -30px rgba(16,24,40,.4);scroll-margin-top:130px;transition:box-shadow .3s}
.jb:hover,.jb[open]{box-shadow:0 0 0 1px rgba(16,24,40,.05),0 30px 60px -30px rgba(16,24,40,.5)}
.jb summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1.1rem;align-items:center;padding:clamp(1.1rem,2.4vw,1.6rem) clamp(1.1rem,2.6vw,1.9rem);border-radius:22px}
.jb summary::-webkit-details-marker{display:none}
.jb summary:focus-visible{outline:3px solid color-mix(in srgb,var(--c1) 45%,transparent);outline-offset:2px}
.jb-ic{display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:color-mix(in srgb,var(--c1) 10%,#fff);color:var(--c1-text,var(--c1));transition:background .25s,color .25s}
.jb[open] .jb-ic,.jb summary:hover .jb-ic{background:var(--c1);color:var(--on-c1,#fff)}
.jb-t b{display:block;font-size:clamp(1.15rem,2vw,1.4rem);line-height:1.2;letter-spacing:-.01em}
.jb-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.55rem}
.jb-chips em{display:inline-flex;align-items:center;gap:.35rem;font-style:normal;font-weight:600;font-size:.84rem;padding:.3rem .75rem;border-radius:999px;background:#f3f4f6;color:var(--ink)}
.jb-chips svg{color:var(--c1-text,var(--c1));flex:0 0 auto}
.jb-auf{display:inline-flex;align-items:center;gap:.6rem;font-weight:700;font-size:.9rem;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--line);white-space:nowrap;transition:border-color .2s,color .2s}
.jb-auf i{font-style:normal}
.jb-auf .auf,.jb[open] .jb-auf .zu{display:none}
.jb[open] .jb-auf .auf{display:inline}
.jb-auf::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;transition:transform .25s}
.jb[open] .jb-auf::after{transform:rotate(-135deg);margin-top:4px}
.jb summary:hover .jb-auf{border-color:var(--c1);color:var(--c1-text,var(--c1))}
.jb-body{padding:0 clamp(1.1rem,2.6vw,1.9rem) clamp(1.3rem,2.6vw,1.9rem);border-top:1px solid var(--line)}
.jb-body>.jb-prose{margin:1.3rem 0 0;max-width:75ch;font-size:1.02rem}
.jb-body>.jb-schluss{font-size:.92rem;color:var(--soft)}
.jb-teile{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.9rem;margin-top:1.3rem}
.jb-teile section{background:#f6f7f9;border-radius:16px;padding:1.2rem 1.3rem 1.3rem}
.jb-teile h4{margin:0 0 .8rem;font-size:.78rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;color:var(--c1-text,var(--c1))}
.jb-teile ul,.jb-prose ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.jb-prose ul{margin:.8rem 0}
.jb-teile li,.jb-prose li{position:relative;margin:0;padding-left:1.75rem;font-size:.96rem;line-height:1.45}
.jb-teile li::before,.jb-prose li::before{content:"";position:absolute;left:0;top:.12em;width:1.15rem;height:1.15rem;border-radius:50%;background:var(--c1);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm5.7 8.3-6.4 6.9a1 1 0 0 1-1.45.02L6.3 12.6a1 1 0 1 1 1.4-1.4l2.8 2.85 5.7-6.1a1 1 0 1 1 1.5 1.35z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill-rule='evenodd' d='M12 1a11 11 0 1 0 0 22 11 11 0 0 0 0-22zm5.7 8.3-6.4 6.9a1 1 0 0 1-1.45.02L6.3 12.6a1 1 0 1 1 1.4-1.4l2.8 2.85 5.7-6.1a1 1 0 1 1 1.5 1.35z'/%3E%3C/svg%3E") center/contain no-repeat}
.jb-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:.9rem 1.6rem;margin-top:1.5rem}
.jb-fuss .btn{margin:0}
.jb-fuss .btn svg{transition:transform .25s}
.jb-fuss .btn:hover svg{transform:translateX(4px)}
.jb-frage{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;font-size:.92rem;color:var(--soft)}
.jb-frage a{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap}
.jb-frage a:hover{color:var(--c1-text,var(--c1))}
.jb-frage svg{color:var(--c1-text,var(--c1))}
.jb-form{background:#fff;color:var(--ink);border-radius:22px;padding:clamp(1.4rem,3.4vw,2.4rem);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 20px 46px -30px rgba(16,24,40,.4);scroll-margin-top:130px}
#bewerbung.jb-form h3{font-size:clamp(1.3rem,2.2vw,1.6rem);margin:0 0 1rem}
@media (max-width:640px){
  .jb summary{grid-template-columns:auto minmax(0,1fr);gap:.8rem .9rem}
  .jb-ic{width:44px;height:44px;border-radius:13px;align-self:start}
  .jb-auf{grid-column:1/-1;justify-content:center}
  .jb-fuss .btn{width:100%;justify-content:center}
}

/* ---------- Aktuelles: moderne Karten (.nw-karten) und Knopf «Alle News» ---------- */
.nw-karten{gap:clamp(1rem,1.8vw,1.5rem)}
.nw-k{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.05),0 20px 46px -30px rgba(16,24,40,.4);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s}
.nw-k.linked:hover,.nw-k:focus-within{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 30px 60px -28px rgba(16,24,40,.5)}
.nw-b{position:relative;aspect-ratio:3/2;overflow:hidden;background:var(--grey)}
.nw-b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.nw-k.linked:hover .nw-b img{transform:scale(1.06)}
.nw-k .nw-datum{margin:0 0 .7rem;font-size:.78rem;font-weight:700;letter-spacing:.02em;color:var(--c1-text,var(--c1))}
.nw-k .nw-b .nw-datum{position:absolute;left:.9rem;bottom:.9rem;margin:0;padding:.38rem .8rem;border-radius:999px;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 6px 16px -8px rgba(0,0,0,.4)}
.nw-tx{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.4rem 1.5rem}
.nw-k h3{font-size:1.18rem;line-height:1.25;margin:0 0 .6rem;-webkit-hyphens:manual;hyphens:manual;overflow-wrap:break-word;text-wrap:balance}
.nw-k h3 a{color:inherit;text-decoration:none}
.nw-k h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.nw-t{margin:0 0 1.1rem;font-size:.95rem;line-height:1.55;color:var(--soft);display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.nw-mehr{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.9rem;color:var(--c1-text,var(--c1))}
.nw-mehr svg{transition:transform .25s}
.nw-k.linked:hover .nw-mehr svg{transform:translateX(5px)}
.nw-alle{margin-top:clamp(1.6rem,3vw,2.4rem)}
.nw-alle .btn svg{transition:transform .25s}
.nw-alle .btn:hover svg{transform:translateX(4px)}

/* ---------- Karten: alternative Darstellungen (.cv-<variante>) ---------- */
/* Grundgerüst für alle Varianten */
.cv-grid{gap:clamp(.7rem,1.4vw,1rem)}
.cv-k{position:relative;display:flex;flex-direction:column;border-radius:16px;transition:background .25s,border-color .25s,transform .25s,box-shadow .25s,color .25s}
.cv-k h3{margin:0;font-size:1.06rem;line-height:1.25;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.cv-k h3 a{color:inherit;text-decoration:none}
.cv-k h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.cv-k p{margin:.35rem 0 0;font-size:.88rem;line-height:1.42}
.cv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:.6rem}
.cv-ic{width:54px;height:54px;border-radius:12px;overflow:hidden;flex:none;display:block;background:color-mix(in srgb,var(--c1) 12%,transparent)}
.cv-ic img{width:100%;height:100%;object-fit:cover;display:block}
.cv-ic.cv-leer{display:none}
.cv-nr{display:none;font-weight:800;color:var(--c1-text,var(--c1))}
.cv-pf{opacity:.5;transition:transform .25s,opacity .25s;margin-left:auto}
.cv-k.linked:hover .cv-pf{opacity:1;transform:translateX(3px)}

/* 1 Dunkles Band */
.cv-band{background:var(--dark);border-radius:var(--rad,22px);padding:clamp(1rem,2.4vw,1.8rem)}
.cv-band .cv-k,.cv-hell .cv-k{padding:1.2rem 1.25rem;height:176px}
.cv-band .cv-k{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);color:#fff}
.cv-band .cv-ic{box-shadow:0 0 0 1px rgba(255,255,255,.18)}
.cv-band .cv-txt,.cv-hell .cv-txt{position:absolute;left:1.25rem;right:1.25rem;bottom:1.1rem}
.cv-band .cv-k p,.cv-hell .cv-k p{max-height:0;opacity:0;overflow:hidden;transition:max-height .3s,opacity .3s}
.cv-band .cv-k.linked:hover,.cv-band .cv-k:focus-within,.cv-hell .cv-k.linked:hover,.cv-hell .cv-k:focus-within{background:var(--c1);border-color:var(--c1);color:var(--on-c1,#fff);transform:translateY(-3px);box-shadow:0 18px 40px -18px rgba(0,0,0,.5)}
.cv-band .cv-k.linked:hover p,.cv-band .cv-k:focus-within p,.cv-hell .cv-k.linked:hover p,.cv-hell .cv-k:focus-within p{max-height:4.2em;opacity:1}
.cv-band .cv-k.linked:hover .cv-ic,.cv-hell .cv-k.linked:hover .cv-ic{box-shadow:0 0 0 2px rgba(255,255,255,.85)}
/* 2 Helle Kacheln */
.cv-hell .cv-k{background:#fff;border:1px solid var(--line);color:var(--ink)}
@media (hover:none) and (min-width:701px){.cv-band .cv-k,.cv-hell .cv-k{height:auto;min-height:176px;justify-content:space-between;gap:1rem}.cv-band .cv-txt,.cv-hell .cv-txt{position:static}.cv-band .cv-k p,.cv-hell .cv-k p{max-height:none;opacity:.8}}
@media (max-width:700px){.cv-band .cv-grid,.cv-hell .cv-grid{grid-template-columns:repeat(2,1fr)}.cv-band .cv-k,.cv-hell .cv-k{height:auto;min-height:118px;padding:.9rem;justify-content:space-between;gap:.8rem}
  .cv-band .cv-txt,.cv-hell .cv-txt{position:static}.cv-band .cv-k p,.cv-hell .cv-k p{display:none}.cv-band .cv-ic,.cv-hell .cv-ic{width:42px;height:42px;border-radius:10px}.cv-band .cv-k h3,.cv-hell .cv-k h3{font-size:.9rem}}

/* 3 Kompakt */
.cv-kompakt .cv-k{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 14px -6px rgba(0,0,0,.18)}
.cv-kompakt .cv-top{display:block;position:relative}
.cv-kompakt .cv-ic{width:100%;height:auto;aspect-ratio:2.2/1;border-radius:0}
.cv-kompakt .cv-pf{position:absolute;right:.8rem;bottom:-1.9rem;color:var(--c1-text,var(--c1))}
.cv-kompakt .cv-txt{padding:1rem 1.15rem 1.15rem}
.cv-kompakt .cv-k p{color:var(--soft);font-size:.85rem}
.cv-kompakt .cv-k.linked:hover{transform:translateY(-4px);box-shadow:var(--shadow)}

/* 4 Symbol links */
.cv-links .cv-k{flex-direction:row;align-items:center;gap:1rem;background:#fff;padding:1rem;box-shadow:0 2px 14px -6px rgba(0,0,0,.18)}
.cv-links .cv-top{flex:none}
.cv-links .cv-ic{width:68px;height:68px;border-radius:14px}
.cv-links .cv-pf{display:none}
.cv-links .cv-k p{color:var(--soft);font-size:.84rem}
.cv-links .cv-k.linked:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.cv-links .cv-k.linked:hover h3{color:var(--c1-text,var(--c1))}

/* 5 Schnellzugriff (App-Symbole) */
.cv-schnell .cv-grid{grid-template-columns:repeat(var(--cv-n),minmax(0,1fr))}
.cv-schnell .cv-k{align-items:center;text-align:center;gap:.6rem}
.cv-schnell .cv-top{display:block;width:100%}
.cv-schnell .cv-ic{width:100%;height:auto;aspect-ratio:1;border-radius:18px;box-shadow:0 8px 20px -10px rgba(0,0,0,.4);transition:transform .25s}
.cv-schnell .cv-pf,.cv-schnell .cv-k p{display:none}
.cv-schnell .cv-k h3{font-size:.92rem}
.cv-schnell .cv-k.linked:hover .cv-ic{transform:translateY(-4px) scale(1.03)}
@media (max-width:900px){.cv-schnell .cv-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:480px){.cv-schnell .cv-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.cv-schnell .cv-k h3{font-size:.8rem}.cv-schnell .cv-ic{border-radius:14px}}

/* 6 Bento */
.cv-bento .cv-grid{grid-auto-rows:minmax(150px,auto);grid-auto-flow:dense}
.cv-bento .cv-k{background:#fff;border:1px solid var(--line);border-radius:20px;padding:1.2rem;justify-content:space-between;gap:1rem}
.cv-bento .cv-ic{width:48px;height:48px;border-radius:50%}
.cv-bento .cv-k p{color:var(--soft);font-size:.84rem}
.cv-bento .cv-k:first-child{grid-column:span 2;grid-row:span 2;background:var(--c1);color:var(--on-c1,#fff);border:0;padding:1.8rem}
.cv-bento .cv-k:first-child h3{font-size:clamp(1.5rem,2.6vw,2.1rem)}
.cv-bento .cv-k:first-child p{color:inherit;opacity:.85;font-size:1rem}
.cv-bento .cv-k:first-child .cv-ic{width:72px;height:72px;box-shadow:0 0 0 3px rgba(255,255,255,.35)}
.cv-bento .cv-k:nth-child(6){grid-column:span 2;background:var(--dark);color:#fff;border:0}
.cv-bento .cv-k:nth-child(6) p{color:rgba(255,255,255,.75)}
.cv-bento .cv-k.linked:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
@media (max-width:700px){.cv-bento .cv-k:first-child,.cv-bento .cv-k:nth-child(6){grid-column:auto;grid-row:auto}}

/* 7 Editorial-Liste */
.cv-liste .cv-grid{grid-template-columns:1fr;gap:0;border-top:1px solid var(--line)}
.cv-liste .cv-k{display:grid;grid-template-columns:3.2rem minmax(0,1.1fr) minmax(0,1.6fr) 2rem;align-items:center;gap:1rem;padding:1.15rem .9rem;border-radius:12px;border-bottom:1px solid var(--line)}
.cv-liste .cv-top{display:contents}
.cv-liste .cv-ic{display:none}
.cv-liste .cv-nr{display:block;grid-column:1;grid-row:1}
.cv-liste .cv-pf{grid-column:4;grid-row:1}
.cv-liste .cv-txt{display:contents}
.cv-liste .cv-k h3{grid-column:2;grid-row:1;font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:-.01em}
.cv-liste .cv-k p{grid-column:3;grid-row:1;margin:0;color:var(--soft)}
.cv-liste .cv-k.linked:hover{background:var(--c1);color:var(--on-c1,#fff);border-bottom-color:transparent}
.cv-liste .cv-k.linked:hover .cv-nr,.cv-liste .cv-k.linked:hover p{color:inherit}
@media (max-width:700px){.cv-liste .cv-k{grid-template-columns:2.4rem 1fr 1.6rem}.cv-liste .cv-k p{grid-column:2/4;grid-row:2}}

/* 8 Runde Symbole */
.cv-rund .cv-k{align-items:center;text-align:center;padding:.6rem}
.cv-rund .cv-top{display:block}
.cv-rund .cv-ic{width:96px;height:96px;border-radius:50%;margin:0 auto .9rem;box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 12%,transparent);transition:transform .25s,box-shadow .25s}
.cv-rund .cv-pf{display:none}
.cv-rund .cv-k p{color:var(--soft);font-size:.86rem}
.cv-rund .cv-k.linked:hover .cv-ic{transform:translateY(-4px);box-shadow:0 0 0 6px color-mix(in srgb,var(--c1) 30%,transparent)}
.cv-rund .cv-k.linked:hover h3{color:var(--c1-text,var(--c1))}

/* 9 Foto-Kacheln */
.cv-foto .cv-k{overflow:hidden;aspect-ratio:1/1;color:#fff;justify-content:flex-end;border-radius:18px;background:var(--dark)}
.cv-foto .cv-top{position:absolute;inset:0}
.cv-foto .cv-ic{width:100%;height:100%;border-radius:0}
.cv-foto .cv-ic img{transition:transform .6s}
.cv-foto .cv-top::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.78) 100%)}
.cv-foto .cv-pf{position:absolute;top:1rem;right:1rem;z-index:2;color:#fff;opacity:.85}
.cv-foto .cv-txt{position:relative;z-index:1;padding:1.2rem}
.cv-foto .cv-k h3{font-size:1.15rem}
.cv-foto .cv-k p{max-height:0;opacity:0;overflow:hidden;transition:max-height .35s,opacity .35s;color:rgba(255,255,255,.9)}
.cv-foto .cv-k.linked:hover .cv-ic img{transform:scale(1.06)}
.cv-foto .cv-k.linked:hover p,.cv-foto .cv-k:focus-within p{max-height:5em;opacity:1}
@media (hover:none),(max-width:700px){.cv-foto .cv-k p{max-height:none;opacity:1}}
@media (max-width:700px){.cv-foto .cv-grid{grid-template-columns:repeat(2,1fr)}.cv-foto .cv-k{aspect-ratio:3/4}.cv-foto .cv-k p{display:none}.cv-foto .cv-txt{padding:.8rem}.cv-foto .cv-k h3{font-size:.95rem}}

/* 10 Rahmen */
.cv-rahmen .cv-k{background:#fff;border:1px solid var(--line);border-top:4px solid var(--c1);border-radius:12px;padding:1.3rem 1.3rem 1.2rem;gap:1rem}
.cv-rahmen .cv-ic{width:46px;height:46px;border-radius:10px}
.cv-rahmen .cv-k p{color:var(--soft);font-size:.86rem}
.cv-rahmen .cv-k.linked:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--c1)}

/* 11 Akzent */
.cv-akzent .cv-k{background:var(--c1);color:var(--on-c1,#fff);padding:1.3rem;gap:1.1rem}
.cv-akzent .cv-ic{width:56px;height:56px;border-radius:14px;box-shadow:0 0 0 2px rgba(255,255,255,.6)}
.cv-akzent .cv-k p{opacity:.88}
.cv-akzent .cv-k.linked:hover{transform:translateY(-4px);filter:brightness(.92);box-shadow:var(--shadow)}

/* 12 Pillen */
.cv-pillen .cv-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:.7rem}
.cv-pillen .cv-k{flex-direction:row;align-items:center;gap:.6rem;background:#fff;border:1px solid var(--line);border-radius:999px;padding:.4rem 1.1rem .4rem .4rem}
.cv-pillen .cv-ic{width:40px;height:40px;border-radius:50%}
.cv-pillen .cv-top{flex:none}
.cv-pillen .cv-pf,.cv-pillen .cv-k p{display:none}
.cv-pillen .cv-k h3{font-size:.95rem;white-space:nowrap}
.cv-pillen .cv-k.linked:hover{background:var(--c1);border-color:var(--c1);color:var(--on-c1,#fff)}

/* 13 Nummern */
.cv-nummern .cv-k{background:#fff;border-left:3px solid var(--c1);border-radius:0 12px 12px 0;padding:1.2rem 1.3rem;gap:.5rem}
.cv-nummern .cv-ic{display:none}
.cv-nummern .cv-nr{display:block;font-size:2.4rem;line-height:1;letter-spacing:-.03em}
.cv-nummern .cv-k p{color:var(--soft);font-size:.86rem}
.cv-nummern .cv-k.linked:hover{transform:translateY(-3px);box-shadow:var(--shadow)}

/* Symbol (SVG) statt kleinem Bild – für alle Karten-Darstellungen */
.cv-ic.cv-svg{display:grid;place-items:center;color:var(--c1-text,var(--c1))}
.cv-ic.cv-svg svg{width:58%;height:58%}
.cv-band .cv-svg,.cv-akzent .cv-svg,.cv-foto .cv-svg,.cv-bento .cv-k:first-child .cv-svg,.cv-bento .cv-k:nth-child(6) .cv-svg{background:rgba(255,255,255,.14);color:#fff}

/* 14 Bild beim Darüberfahren: helle Karte, beim Hover blendet ein Foto mit Farbverlauf kreisförmig ein */
.cv-hoverbild .cv-grid{gap:clamp(1rem,2vw,1.6rem)}
.cv-hoverbild .cv-k{background:#fff;border-radius:8px;padding:clamp(1.6rem,2.6vw,2.4rem);gap:1.3rem;overflow:hidden;box-shadow:0 14px 44px -22px rgba(16,24,40,.28);isolation:isolate}
.cv-hoverbild .cv-bg{position:absolute;inset:0;z-index:-1;background:var(--c1) center/cover no-repeat;opacity:0;transform:scale(1.14);clip-path:circle(0% at 16% 20%);
  transition:clip-path .7s cubic-bezier(.2,.8,.2,1),opacity .35s,transform 1.4s cubic-bezier(.2,.8,.2,1)}
.cv-hoverbild .cv-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(125deg,color-mix(in srgb,var(--c1) 96%,transparent) 0%,color-mix(in srgb,var(--c1) 80%,transparent) 45%,color-mix(in srgb,var(--dark) 78%,transparent) 100%)}
.cv-hoverbild .cv-ic{width:64px;height:64px;border-radius:10px;background:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.cv-hoverbild .cv-ic.cv-svg svg{width:100%;height:100%;stroke-width:1.3}
.cv-hoverbild .cv-pf{display:none}
.cv-hoverbild .cv-k h3{font-size:clamp(1.15rem,1.7vw,1.4rem);transition:color .3s}
.cv-hoverbild .cv-k p{color:var(--soft);font-size:.95rem;line-height:1.6;margin-top:.7rem;transition:color .3s}
.cv-hoverbild .cv-mehr{display:inline-flex;align-items:center;gap:.5rem;margin-top:1.1rem;font-weight:700;color:var(--c1-text,var(--c1));transition:color .3s}
.cv-hoverbild .cv-mehr svg{transition:transform .3s}
.cv-hoverbild .cv-k.linked:hover,.cv-hoverbild .cv-k:focus-within{color:#fff;transform:translateY(-4px);box-shadow:0 26px 60px -24px rgba(16,24,40,.5)}
.cv-hoverbild .cv-k.linked:hover .cv-bg,.cv-hoverbild .cv-k:focus-within .cv-bg{opacity:1;transform:scale(1);clip-path:circle(150% at 16% 20%)}
.cv-hoverbild .cv-k.linked:hover p,.cv-hoverbild .cv-k:focus-within p{color:rgba(255,255,255,.92)}
.cv-hoverbild .cv-k.linked:hover .cv-mehr,.cv-hoverbild .cv-k.linked:hover .cv-svg,.cv-hoverbild .cv-k:focus-within .cv-mehr,.cv-hoverbild .cv-k:focus-within .cv-svg{color:#fff}
.cv-hoverbild .cv-k.linked:hover .cv-mehr svg{transform:translateX(5px)}
.cv-hoverbild .cv-k.linked:hover .cv-ic{transform:scale(1.08) rotate(-4deg)}
@media (prefers-reduced-motion:reduce){.cv-hoverbild .cv-bg{transition:opacity .2s;clip-path:none;transform:none}}
/* Bild beim Darüberfahren: Stärke des Farbverlaufs */
.cv-hoverbild.cv-hs-mittel .cv-bg::after{background:linear-gradient(125deg,color-mix(in srgb,var(--c1) 82%,transparent) 0%,color-mix(in srgb,var(--c1) 48%,transparent) 50%,color-mix(in srgb,var(--dark) 55%,transparent) 100%)}
.cv-hoverbild.cv-hs-leicht .cv-bg::after{background:linear-gradient(125deg,color-mix(in srgb,var(--c1) 62%,transparent) 0%,color-mix(in srgb,var(--c1) 22%,transparent) 45%,color-mix(in srgb,var(--dark) 45%,transparent) 100%)}
.cv-hoverbild.cv-hs-mittel .cv-k.linked:hover .cv-txt,.cv-hoverbild.cv-hs-leicht .cv-k.linked:hover .cv-txt{text-shadow:0 1px 3px rgba(0,0,0,.45),0 2px 14px rgba(0,0,0,.45)}
.cv-hoverbild.cv-hs-leicht .cv-k.linked:hover .cv-ic{filter:drop-shadow(0 1px 4px rgba(0,0,0,.5))}

/* ---------- Kopfzeile «Spalte links»: Logo und Menü als feste Spalte am linken Rand ---------- */
.kopf-unten{display:none}
@media (min-width:1101px){
  body.kopf-spalte{--spalte:300px;padding-left:var(--spalte)}
  body.kopf-spalte>.topbar{display:none}
  body.kopf-spalte .site-head{position:fixed;inset:0 auto 0 0;width:var(--spalte);border-bottom:0;border-right:1px solid var(--line);
    background:color-mix(in srgb,var(--bg) 93%,var(--c1));overflow-y:auto;box-shadow:none;scrollbar-width:thin}
  body.kopf-spalte .site-head .bar{width:auto;max-width:none;margin:0;min-height:100%;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;padding:2.6rem 2.3rem 1.9rem}
  body.kopf-spalte .site-head .logo{justify-content:center;margin:0 0 2.8rem}
  body.kopf-spalte .site-head .logo img{max-width:100%;object-fit:contain}
  body.kopf-spalte .site-head .burger{display:none}
  body.kopf-spalte .site-head .nav{display:flex;margin:0;flex-direction:column;align-items:flex-start;gap:1.5rem;width:100%}
  body.kopf-spalte .site-head .nav>ul{flex-direction:column;gap:0;width:100%}
  body.kopf-spalte .site-head .nav ul a,body.kopf-spalte .site-head .nav ul button{width:100%;justify-content:space-between;padding:.36rem 0;font-weight:500;color:var(--soft);white-space:normal;text-align:left;border-radius:0}
  body.kopf-spalte .site-head .nav ul a:hover,body.kopf-spalte .site-head .nav ul button:hover{color:var(--ink)}
  body.kopf-spalte .site-head .nav ul [aria-current="page"],body.kopf-spalte .site-head .nav>ul>li.aktiv>button{color:var(--c1-text);font-weight:700;box-shadow:none}
  body.kopf-spalte .site-head .nav .has-sub>.sub{display:none;position:static;min-width:0;margin:.1rem 0 .5rem;padding:0 0 0 .9rem;border:0;border-left:1px solid var(--line);border-radius:0;background:none;box-shadow:none}
  body.kopf-spalte .site-head .nav .has-sub.open>.sub,body.kopf-spalte .site-head .nav .has-sub.aktiv>.sub{display:block}
  body.kopf-spalte .site-head .sub::before{display:none}
  body.kopf-spalte .site-head .sub a{font-size:.94em;padding:.28rem 0}
  body.kopf-spalte .site-head .sub a:hover,body.kopf-spalte .site-head .sub [aria-current="page"]{background:none}
  body.kopf-spalte .site-head .nav-cta{align-self:flex-start}
  body.kopf-spalte .kopf-unten{display:block;margin-top:auto;padding-top:2.5rem;font-size:.9rem;line-height:1.55;color:var(--soft)}
  body.kopf-spalte .kopf-unten p{margin:0 0 .9rem}
  body.kopf-spalte .kopf-unten a{color:inherit;text-decoration:none}
  body.kopf-spalte .kopf-unten a:hover{color:var(--c1-text)}
  body.kopf-spalte .kopf-unten .social{display:flex;gap:.5rem;margin:0 0 1rem}
  body.kopf-spalte .kopf-unten .social a{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--ink) 40%,var(--bg));color:var(--bg)}
  body.kopf-spalte .kopf-unten .social a:hover{background:var(--c1);color:var(--on-c1)}
  body.kopf-spalte .kopf-unten .kopf-recht{display:grid;gap:.1rem;margin:0}
}

/* ---------- Bildstreifen: hohe Streifen nebeneinander, Klick klappt den Text über einem grossen Foto auf ---------- */
.bst{--bst-hoehe:max(100vh,560px);--bst-fl:var(--dark);--bst-tx:#f4eee6;--bst-tx2:rgba(255,255,255,.72);--bst-reiter:6.2rem;background:var(--bst-fl);color:var(--bst-tx)}
body:not(.kopf-spalte) .bst-h-voll{--bst-hoehe:max(calc(100vh - 90px),560px)}
.bst-h-mittel{--bst-hoehe:max(68vh,480px)}.bst-h-klein{--bst-hoehe:max(46vh,380px)}
.bst-f-farbe{--bst-fl:var(--c1);--bst-tx:var(--on-c1);--bst-tx2:color-mix(in srgb,var(--on-c1) 78%,transparent)}
.bst-f-hell{--bst-fl:var(--grey);--bst-tx:var(--ink);--bst-tx2:var(--soft)}
.bst-raster{display:grid;grid-template-columns:repeat(var(--bst-n,4),minmax(0,1fr));grid-auto-flow:dense;min-height:var(--bst-hoehe)}
.bst-s{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;text-align:left;text-decoration:none;cursor:pointer;transition:background .25s}
div.bst-s{cursor:default}
.bst-b{display:block;flex:none;height:calc(var(--bst-hoehe) * .58);overflow:hidden;background:linear-gradient(165deg,color-mix(in srgb,var(--c2) 75%,#fff),color-mix(in srgb,var(--c1) 55%,var(--dark)))}
.bst-b.n2{background:linear-gradient(165deg,color-mix(in srgb,var(--c1) 45%,#fff),color-mix(in srgb,var(--c1) 80%,var(--dark)))}
.bst-b.n3{background:linear-gradient(165deg,color-mix(in srgb,var(--c2) 45%,#fff),color-mix(in srgb,var(--c2) 70%,var(--dark)))}
.bst-b.n4{background:linear-gradient(165deg,color-mix(in srgb,var(--c1) 30%,#fff),color-mix(in srgb,var(--c2) 60%,var(--dark)))}
.bst-b img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.bst-t{display:block;flex:1;padding:1.6rem 1.5rem 2rem;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.38)}
.bst-f-hell .bst-t{box-shadow:inset 1px 0 0 var(--line)}
.bst-tt{display:block;font-family:var(--font-h);font-size:clamp(1.2rem,1.75vw,1.7rem);font-weight:600;line-height:1.15;overflow-wrap:anywhere}
.bst-kurz{display:block;margin-top:.55rem;font-size:.95rem;line-height:1.5;color:var(--bst-tx2)}
a.bst-s:hover,button.bst-s:hover,.bst-s:focus-visible{background:rgba(255,255,255,.08)}
.bst-f-hell a.bst-s:hover,.bst-f-hell button.bst-s:hover{background:rgba(0,0,0,.05)}
a.bst-s:hover .bst-b img,button.bst-s:hover .bst-b img{transform:scale(1.06)}
.bst-s:focus-visible{outline:3px solid var(--c2);outline-offset:-3px}
.bst-p{grid-column:1/-1;position:relative;min-height:calc(var(--bst-hoehe) - var(--bst-reiter));background:var(--grey) center/cover no-repeat;color:var(--ink)}
.bst-p[hidden]{display:none}
html:not(.js) .bst-p[hidden]{display:block}
.bst-feld{position:relative;width:min(100%,max(50%,460px));min-height:inherit;padding:clamp(2rem,5vw,4.5rem) clamp(1.4rem,4.5vw,4.25rem);background:color-mix(in srgb,var(--bg) 88%,transparent);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.bst-feld h2{margin:0 3.2rem 1.4rem 0;font-size:clamp(1.45rem,2.2vw,2rem);font-weight:500;line-height:1.3}
.bst-feld .prose{max-width:46ch}
.bst-feld .prose>*:last-child{margin-bottom:0}
.bst-link{margin:1.4rem 0 0}
.bst-link a{color:inherit;text-decoration:underline;text-underline-offset:.22em}
.bst-link a:hover{color:var(--c1-text)}
.bst-zu{position:absolute;top:clamp(1.6rem,4.4vw,4rem);right:clamp(1rem,3vw,3rem);width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;transition:background .2s,transform .2s}
.bst-zu:hover{background:rgba(0,0,0,.07);transform:translateY(-2px)}
.anim .bst.offen .bst-p:not([hidden]) .bst-feld{animation:bst-ein .45s ease both}
@keyframes bst-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (min-width:761px){
  .bst.offen .bst-raster{grid-template-rows:auto 1fr}
  .bst.offen .bst-b,.bst.offen .bst-kurz{display:none}
  .bst.offen .bst-s{justify-content:flex-end;min-height:var(--bst-reiter)}
  .bst.offen .bst-t{flex:none;padding:1.1rem 1.5rem 1.2rem}
  .bst.offen .bst-s[aria-expanded="true"]{background:rgba(0,0,0,.3);box-shadow:inset 0 -4px 0 var(--c2)}
  .bst-f-hell.offen .bst-s[aria-expanded="true"]{background:var(--bg)}
}
@media (max-width:760px){
  .bst{--bst-hoehe:0px}
  .bst-raster{grid-template-columns:repeat(2,minmax(0,1fr));min-height:0}
  .bst-b{height:42vw;max-height:230px}
  .bst-t{padding:1rem 1rem 1.3rem}
  .bst-s[aria-expanded="true"]{background:rgba(0,0,0,.3);box-shadow:inset 0 -4px 0 var(--c2)}
  .bst-p{min-height:0;background-image:none!important;background-color:var(--bg)}
  .bst-feld{width:100%;min-height:0;background:var(--bg);-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media (prefers-reduced-motion:reduce){.bst-b img,.bst-zu{transition:none}.anim .bst.offen .bst-p .bst-feld{animation:none}}

/* ---------- Hero: sechs weitere Stile ---------- */
/* Bogen: heller Grund, Foto rechts in einem grossen Torbogen */
.hero.stil-bogen{background:var(--grey);color:var(--ink)}
.hero.stil-bogen .slide::before{display:none}
.hero.stil-bogen .hero-bg{inset:auto clamp(1.25rem,6vw,7rem) 0 auto;width:min(36%,470px);height:86%;border-radius:999px 999px 0 0;box-shadow:0 0 0 10px var(--bg),0 0 0 11px var(--line)}
.hero.stil-bogen .hero-txt{max-width:min(36rem,54%)}
.hero.stil-bogen h1,.hero.stil-bogen h2{color:var(--ink)}
.hero.stil-bogen .hero-lead{color:var(--soft)}
.hero.stil-bogen .kicker{color:var(--c1-text)}
.hero.stil-bogen .btn.ghost{color:var(--ink);border-color:var(--ink)}
.hero.stil-bogen .btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero.stil-bogen .s-arrow{background:var(--bg);border-color:var(--line)}
.hero.stil-bogen .s-arrow::before{border-color:var(--ink)}
.hero.stil-bogen .s-arrow:hover::before{border-color:#fff}
.hero.stil-bogen .s-dots button,.hero.stil-bogen .s-pause{background:color-mix(in srgb,var(--ink) 28%,transparent)}
.hero.stil-bogen .s-dots button[aria-current="true"]{background:var(--c1)}
@media (max-width:800px){.hero.stil-bogen .hero-bg{width:46%;height:58%;right:-7%;opacity:.4}.hero.stil-bogen .hero-txt{max-width:none}}

/* Seitenband: Text auf einer Farbfläche links, Foto randlos rechts */
.hero.stil-seitenband .slide::before{background:linear-gradient(90deg,var(--c1) 0 44%,transparent 44%)}
.hero.stil-seitenband .slide::after{content:"";position:absolute;z-index:1;top:0;bottom:0;left:44%;width:10px;background:var(--c2)}
.hero.stil-seitenband .hero-bg{left:44%;width:56%}
.hero.stil-seitenband .hero-txt{max-width:min(31rem,38%)}
.hero.stil-seitenband h1,.hero.stil-seitenband h2{color:var(--on-c1);font-size:clamp(2rem,3.7vw,3.3rem)}
.hero.stil-seitenband .hero-lead{color:color-mix(in srgb,var(--on-c1) 86%,transparent)}
.hero.stil-seitenband .kicker{color:var(--on-c1)}
.hero.stil-seitenband .btn:not(.ghost){background:var(--c2);border-color:var(--c2);color:var(--on-c2)}
.hero.stil-seitenband .btn.ghost{color:var(--on-c1);border-color:color-mix(in srgb,var(--on-c1) 70%,transparent)}
@media (max-width:800px){
  .hero.stil-seitenband .slide{align-items:flex-end;padding-top:15rem}
  .hero.stil-seitenband .slide::before{background:linear-gradient(180deg,transparent 0 13rem,var(--c1) 13rem)}
  .hero.stil-seitenband .slide::after{left:0;right:0;top:13rem;bottom:auto;width:auto;height:8px}
  .hero.stil-seitenband .hero-bg{left:0;width:100%;height:13rem}
  .hero.stil-seitenband .hero-txt{max-width:none}
}

/* Spotlight: Rand stark abgedunkelt, heller Lichtkegel hinter dem mittigen Text */
.hero.stil-spot .slide::before,.hero.stil-spot .slide.mitte::before{background:radial-gradient(ellipse 46% 62% at 50% 46%,color-mix(in srgb,var(--dark) 30%,transparent) 0%,color-mix(in srgb,var(--dark) 84%,transparent) 68%,var(--dark) 100%)}
.hero.stil-spot .hero-txt{margin-inline:auto;text-align:center;max-width:40rem}
.hero.stil-spot .hero-lead{margin-inline:auto}
.hero.stil-spot .btn-row{justify-content:center}
.hero.stil-spot h1,.hero.stil-spot h2{text-shadow:0 2px 34px rgba(0,0,0,.55)}
.hero.stil-spot .kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.78rem}
.hero.stil-spot .kicker::before{display:none}

/* Innenrahmen: feine helle Linie mit Abstand rund um den ganzen Hero */
.hero.stil-innenrahmen{--ir:clamp(.9rem,2.2vw,1.8rem)}
.hero.stil-innenrahmen .slide::before,.hero.stil-innenrahmen .slide.mitte::before{background:color-mix(in srgb,var(--dark) 56%,transparent)}
.hero.stil-innenrahmen .slide::after{content:"";position:absolute;z-index:1;inset:var(--ir);border:1px solid rgba(255,255,255,.78);pointer-events:none}
.hero.stil-innenrahmen .hero-txt{margin-inline:auto;text-align:center;max-width:42rem}
.hero.stil-innenrahmen .hero-lead{margin-inline:auto}
.hero.stil-innenrahmen .btn-row{justify-content:center}
.hero.stil-innenrahmen h1,.hero.stil-innenrahmen h2{font-weight:500}
.hero.stil-innenrahmen .kicker{text-transform:uppercase;letter-spacing:.28em;font-size:.74rem;font-weight:600}
.hero.stil-innenrahmen .kicker::before,.hero.stil-innenrahmen .kicker::after{content:"";width:24px;height:1px;background:#fff;border-radius:0}
.hero.stil-innenrahmen .s-ctrl{bottom:calc(var(--ir) + 1rem)}
.hero.stil-innenrahmen .s-arrow.prev{left:calc(var(--ir) + .9rem)}.hero.stil-innenrahmen .s-arrow.next{right:calc(var(--ir) + .9rem)}

/* Magazin: riesiger Titel in Grossbuchstaben unten über die ganze Breite */
.hero.stil-magazin .slide{align-items:flex-end;padding-bottom:5.5rem}
.hero.stil-magazin .slide::before,.hero.stil-magazin .slide.mitte::before{background:linear-gradient(180deg,color-mix(in srgb,var(--dark) 12%,transparent) 0%,color-mix(in srgb,var(--dark) 40%,transparent) 45%,color-mix(in srgb,var(--dark) 95%,transparent) 100%)}
.hero.stil-magazin .hero-txt{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:clamp(1.5rem,4vw,4rem);align-items:end;text-align:left}
.hero.stil-magazin .kicker{grid-column:1/-1;justify-self:start}
.hero.stil-magazin h1,.hero.stil-magazin h2{grid-column:1/-1;font-size:clamp(2.6rem,8.4vw,7.6rem);line-height:.94;text-transform:uppercase;letter-spacing:-.03em;margin-bottom:.28em;overflow-wrap:anywhere}
.hero.stil-magazin .hero-lead{grid-column:1;max-width:60ch;margin:0;padding-top:1rem;border-top:1px solid rgba(255,255,255,.5)}
.hero.stil-magazin .btn-row{grid-column:2;margin-top:0;justify-content:flex-end}
@media (max-width:800px){.hero.stil-magazin .hero-txt{grid-template-columns:1fr}.hero.stil-magazin .btn-row{grid-column:1;justify-content:flex-start;margin-top:1.2rem}}

/* Lamellen: Foto rechts in schrägen Streifen mit Lücken */
.hero.stil-lamellen .slide::before{display:none}
.hero.stil-lamellen .hero-bg{left:auto;right:0;width:58%;-webkit-mask-image:repeating-linear-gradient(100deg,#000 0 92px,transparent 92px 106px);mask-image:repeating-linear-gradient(100deg,#000 0 92px,transparent 92px 106px)}
.hero.stil-lamellen .slide::after{content:"";position:absolute;z-index:1;top:0;bottom:0;right:0;width:58%;background:linear-gradient(90deg,var(--dark) 0%,color-mix(in srgb,var(--dark) 35%,transparent) 28%,transparent 60%);pointer-events:none}
.hero.stil-lamellen .hero-txt{max-width:min(34rem,46%)}
@media (max-width:800px){.hero.stil-lamellen .hero-bg{width:100%;opacity:.38}.hero.stil-lamellen .slide::after{display:none}.hero.stil-lamellen .hero-txt{max-width:none}}

/* ---------- Hero: zwölf weitere Stile ---------- */
/* Gemeinsam für helle Stile (dunkle Schrift, dunkle Steuerung) */
.hero.stil-kreis,.hero.stil-hellverlauf{background:var(--grey);color:var(--ink)}
.hero.stil-kreis h1,.hero.stil-kreis h2,.hero.stil-hellverlauf h1,.hero.stil-hellverlauf h2,.hero.stil-textkarte h1,.hero.stil-textkarte h2{color:var(--ink)}
.hero.stil-kreis .hero-lead,.hero.stil-hellverlauf .hero-lead,.hero.stil-textkarte .hero-lead{color:var(--soft)}
.hero.stil-kreis .kicker,.hero.stil-hellverlauf .kicker,.hero.stil-textkarte .kicker{color:var(--c1-text)}
.hero.stil-kreis .btn.ghost,.hero.stil-hellverlauf .btn.ghost,.hero.stil-textkarte .btn.ghost{color:var(--ink);border-color:var(--ink)}
.hero.stil-kreis .btn.ghost:hover,.hero.stil-hellverlauf .btn.ghost:hover,.hero.stil-textkarte .btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero.stil-kreis .s-arrow,.hero.stil-hellverlauf .s-arrow{background:var(--bg);border-color:var(--line)}
.hero.stil-kreis .s-arrow::before,.hero.stil-hellverlauf .s-arrow::before{border-color:var(--ink)}
.hero.stil-kreis .s-arrow:hover::before,.hero.stil-hellverlauf .s-arrow:hover::before{border-color:#fff}
.hero.stil-kreis .s-dots button,.hero.stil-kreis .s-pause,.hero.stil-hellverlauf .s-dots button,.hero.stil-hellverlauf .s-pause{background:color-mix(in srgb,var(--ink) 28%,transparent)}
.hero.stil-kreis .s-dots button[aria-current="true"],.hero.stil-hellverlauf .s-dots button[aria-current="true"]{background:var(--c1)}

/* Kreis: Foto rechts als grosser Kreis mit Farbring */
.hero.stil-kreis .slide::before{display:none}
.hero.stil-kreis .hero-bg{inset:50% clamp(1.5rem,7vw,8rem) auto auto;width:min(36%,470px);height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;box-shadow:0 0 0 12px var(--bg),0 0 0 15px var(--c2),30px 24px 0 0 color-mix(in srgb,var(--c1) 20%,transparent)}
.hero.stil-kreis .hero-txt{max-width:min(36rem,52%)}
@media (max-width:800px){.hero.stil-kreis .hero-bg{width:58%;right:-16%;opacity:.35;box-shadow:none}.hero.stil-kreis .hero-txt{max-width:none}}

/* Bildkarte: dunkler Grund, Foto rechts als Karte mit versetzter Farbfläche */
.hero.stil-bildkarte .slide::before{display:none}
.hero.stil-bildkarte .hero-bg{inset:12% clamp(1.5rem,6vw,7rem) 12% auto;width:min(42%,580px);height:76%;border-radius:var(--rad);box-shadow:18px 18px 0 var(--c2)}
.hero.stil-bildkarte .hero-txt{max-width:min(34rem,46%)}
@media (max-width:800px){.hero.stil-bildkarte .hero-bg{inset:0;width:100%;height:100%;border-radius:0;box-shadow:none;opacity:.3}.hero.stil-bildkarte .hero-txt{max-width:none}}

/* Textkarte: Foto randlos, Text auf einer hellen Karte mit Farbkante */
.hero.stil-textkarte .slide::before,.hero.stil-textkarte .slide.mitte::before{background:color-mix(in srgb,var(--dark) 22%,transparent)}
.hero.stil-textkarte .hero-txt{max-width:35rem;background:var(--bg);color:var(--ink);padding:clamp(1.5rem,3vw,2.6rem);border-top:6px solid var(--c1);border-radius:0 0 var(--rad) var(--rad);box-shadow:0 30px 60px -22px rgba(0,0,0,.5)}
.hero.stil-textkarte h1,.hero.stil-textkarte h2{font-size:clamp(1.9rem,3.4vw,3rem)}

/* Rechts: Text und Abtönung auf der rechten Seite */
.hero.stil-rechts .slide::before{background:linear-gradient(270deg,color-mix(in srgb,var(--dark) 92%,transparent) 0%,color-mix(in srgb,var(--dark) 70%,transparent) 45%,color-mix(in srgb,var(--dark) 15%,transparent) 100%)}
.hero.stil-rechts .slide:not(.mitte) .hero-txt{margin-left:auto;text-align:right}
.hero.stil-rechts .slide:not(.mitte) .hero-lead{margin-left:auto}
.hero.stil-rechts .slide:not(.mitte) .btn-row{justify-content:flex-end}
.hero.stil-rechts .slide:not(.mitte) .kicker{flex-direction:row-reverse}

/* Hell überblendet: Foto randlos, links weich ins Helle, dunkle Schrift */
.hero.stil-hellverlauf{background:var(--bg)}
.hero.stil-hellverlauf .slide::before{background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 90%,transparent) 36%,color-mix(in srgb,var(--bg) 25%,transparent) 66%,transparent 100%)}
.hero.stil-hellverlauf .slide.mitte::before{background:color-mix(in srgb,var(--bg) 80%,transparent)}
@media (max-width:800px){.hero.stil-hellverlauf .slide::before{background:color-mix(in srgb,var(--bg) 84%,transparent)}}

/* Schwarzweiss: Foto in Graustufen, Farbe nur bei Kennzeichnung und Knopf */
.hero.stil-schwarzweiss .hero-bg{filter:grayscale(1) contrast(1.08)}
.hero.stil-schwarzweiss .slide::before{background:linear-gradient(90deg,rgba(12,12,12,.88) 0%,rgba(12,12,12,.58) 50%,rgba(12,12,12,.2) 100%)}
.hero.stil-schwarzweiss .slide.mitte::before{background:rgba(12,12,12,.62)}
.hero.stil-schwarzweiss .kicker{color:var(--c2);text-transform:uppercase;letter-spacing:.14em;font-size:.82rem}

/* Marker: Titel wie mit dem Leuchtstift unterlegt */
.hero.stil-marker .kicker{display:flex}
.hero.stil-marker .slide.mitte .kicker{justify-content:center}
.hero.stil-marker h1,.hero.stil-marker h2{display:inline;font-size:clamp(1.9rem,4.2vw,3.5rem);line-height:1.5;color:var(--on-c2);background:var(--c2);padding:.06em .3em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.hero.stil-marker .hero-lead{margin-top:1.4rem}

/* Sucher: vier feine Winkel um den mittigen Text */
.hero.stil-sucher .slide::before,.hero.stil-sucher .slide.mitte::before{background:color-mix(in srgb,var(--dark) 58%,transparent)}
.hero.stil-sucher .hero-txt{margin-inline:auto;text-align:center;max-width:44rem;padding:clamp(1.8rem,3.6vw,3.2rem);
  background:linear-gradient(#fff,#fff) top left/36px 2px no-repeat,linear-gradient(#fff,#fff) top left/2px 36px no-repeat,
    linear-gradient(#fff,#fff) top right/36px 2px no-repeat,linear-gradient(#fff,#fff) top right/2px 36px no-repeat,
    linear-gradient(#fff,#fff) bottom left/36px 2px no-repeat,linear-gradient(#fff,#fff) bottom left/2px 36px no-repeat,
    linear-gradient(#fff,#fff) bottom right/36px 2px no-repeat,linear-gradient(#fff,#fff) bottom right/2px 36px no-repeat}
.hero.stil-sucher .hero-lead{margin-inline:auto}
.hero.stil-sucher .btn-row{justify-content:center}
.hero.stil-sucher .kicker{text-transform:uppercase;letter-spacing:.2em;font-size:.76rem}
.hero.stil-sucher .kicker::before{width:9px;height:9px;border-radius:50%;background:var(--c2)}

/* Gitter: feines Linienraster über dunklem Grund */
.hero.stil-gitter .hero-bg{opacity:.5}
.hero.stil-gitter .slide::before,.hero.stil-gitter .slide.mitte::before{background:
  repeating-linear-gradient(0deg,rgba(255,255,255,.08) 0 1px,transparent 1px 46px),
  repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 1px,transparent 1px 46px),
  linear-gradient(90deg,color-mix(in srgb,var(--dark) 94%,transparent) 0%,color-mix(in srgb,var(--dark) 50%,transparent) 100%)}
.hero.stil-gitter .slide:not(.mitte) .hero-txt{border-left:2px solid var(--c2);padding-left:1.5rem}
.hero.stil-gitter .kicker{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;text-transform:uppercase;letter-spacing:.1em;font-size:.8rem;color:var(--c2)}
.hero.stil-gitter .kicker::before{content:">_";width:auto;height:auto;background:none}

/* Welle: unten eine weiche Wellenkante als Übergang zum Inhalt */
.hero.stil-welle{--welle:clamp(46px,7vw,110px)}
.hero.stil-welle .slide{padding-bottom:calc(var(--welle) + 4.5rem)}
.hero.stil-welle .slide::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:-1px;height:var(--welle);background:var(--bg);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72c200-66 380-62 560-22s340 62 520 24 240-52 360-40v86H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72c200-66 380-62 560-22s340 62 520 24 240-52 360-40v86H0z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.hero.stil-welle .s-ctrl{bottom:calc(var(--welle) + .7rem)}

/* Schrägkante: der ganze Hero ist unten schräg abgeschnitten */
.hero.stil-kante{--kante:clamp(28px,6vw,90px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--kante)),0 100%)}
.hero.stil-kante .slide{padding-bottom:calc(var(--kante) + 4.5rem)}
.hero.stil-kante .s-ctrl{bottom:calc(var(--kante) + .6rem)}

/* Mosaik: Foto rechts als Raster aus neun Kacheln mit Lücken */
.hero.stil-mosaik .slide::before{display:none}
.hero.stil-mosaik .hero-bg{inset:8% clamp(1rem,4vw,4.5rem) 8% auto;width:min(46%,640px);height:84%;
  -webkit-mask-image:repeating-linear-gradient(90deg,#000 0 calc(33.334% - 10px),transparent calc(33.334% - 10px) 33.334%),repeating-linear-gradient(180deg,#000 0 calc(33.334% - 10px),transparent calc(33.334% - 10px) 33.334%);
  mask-image:repeating-linear-gradient(90deg,#000 0 calc(33.334% - 10px),transparent calc(33.334% - 10px) 33.334%),repeating-linear-gradient(180deg,#000 0 calc(33.334% - 10px),transparent calc(33.334% - 10px) 33.334%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.hero.stil-mosaik .hero-txt{max-width:min(34rem,46%)}
@media (max-width:800px){.hero.stil-mosaik .hero-bg{inset:0;width:100%;height:100%;opacity:.32}.hero.stil-mosaik .hero-txt{max-width:none}}

/* ---------- Hero: Stärke der Abtönung pro Folie (Feld bild_hell) ---------- */
/* Stärker: eine zusätzliche, gleichmässige Schicht in der Farbe der Abtönung über dem Bild */
.hero .slides .slide.hd-d1::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--dark) 28%,transparent)}
.hero .slides .slide.hd-d2::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--dark) 52%,transparent)}
.hero.stil-hellverlauf .slides .slide.hd-d1::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--bg) 30%,transparent)}
.hero.stil-hellverlauf .slides .slide.hd-d2::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--bg) 55%,transparent)}
/* Schwächer bei hellen Stilen: Schrift bleibt dunkel, bekommt statt des dunklen Schattens einen hellen Schein */
.hero:is(.stil-hellverlauf,.stil-kreis,.stil-bogen,.stil-textkarte,.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .slides .slide.hh .hero-txt :is(h1,h2,.hero-lead){text-shadow:none}
.hero:is(.stil-hellverlauf,.stil-kreis,.stil-bogen,.stil-textkarte,.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .slides .slide.hh .hero-lead{color:var(--soft)}
.hero.stil-hellverlauf .slides .slide.hh .hero-txt :is(h1,h2,.hero-lead,.kicker){text-shadow:0 0 14px var(--bg),0 0 5px var(--bg),0 0 2px var(--bg)}
.hero.stil-hellverlauf .slides .slide.hh .hero-lead{color:var(--ink)}

/* ---------- Hero: dreizehn weitere Stile ---------- */
/* Gemeinsam für helle Stile (dunkle Schrift, dunkle Steuerung) */
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten){background:var(--grey);color:var(--ink)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) :is(h1,h2){color:var(--ink)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .hero-lead{color:var(--soft)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .kicker{color:var(--c1-text)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .btn.ghost{color:var(--ink);border-color:var(--ink)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .btn.ghost:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .s-arrow{background:var(--bg);border-color:var(--line)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .s-arrow::before{border-color:var(--ink)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .s-arrow:hover::before{border-color:#fff}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) :is(.s-dots button,.s-pause){background:color-mix(in srgb,var(--ink) 28%,transparent)}
.hero:is(.stil-blatt,.stil-blob,.stil-bildlinks,.stil-hellunten) .s-dots button[aria-current="true"]{background:var(--c1)}
/* Gemeinsam: Foto als Form rechts neben dem Text */
.hero:is(.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis,.stil-versetzt) .slide::before{display:none}
.hero:is(.stil-sechseck,.stil-blatt,.stil-blob,.stil-versetzt) .hero-txt{max-width:min(35rem,50%)}
@media (max-width:800px){
  .hero:is(.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis,.stil-versetzt) .hero-bg{width:62%;right:-18%;opacity:.32;box-shadow:none}
  .hero:is(.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis,.stil-versetzt) .hero-txt{max-width:none}
  .hero.stil-sechseck .slide::after{display:none}
}

/* Sechseck */
.hero.stil-sechseck .hero-bg{z-index:1;inset:50% clamp(1.5rem,6vw,7rem) auto auto;width:min(36%,480px);height:auto;aspect-ratio:1/1.12;transform:translateY(-50%);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hero.stil-sechseck .slide::after{content:"";position:absolute;z-index:0;top:50%;right:calc(clamp(1.5rem,6vw,7rem) - 22px);width:min(36%,480px);aspect-ratio:1/1.12;transform:translateY(calc(-50% + 20px));background:var(--c2);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}

/* Blatt */
.hero.stil-blatt .hero-bg{inset:50% clamp(1.5rem,7vw,8rem) auto auto;width:min(34%,440px);height:auto;aspect-ratio:1/1.15;transform:translateY(-50%);border-radius:0 50% 0 50%;box-shadow:24px 24px 0 color-mix(in srgb,var(--c1) 20%,transparent)}

/* Blob */
.hero.stil-blob .hero-bg{inset:50% clamp(1.5rem,7vw,8rem) auto auto;width:min(38%,500px);height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:58% 42% 48% 52%/52% 46% 54% 48%;box-shadow:0 0 0 16px color-mix(in srgb,var(--c2) 32%,transparent);animation:heroBlob 14s ease-in-out infinite alternate}
@keyframes heroBlob{0%{border-radius:58% 42% 48% 52%/52% 46% 54% 48%}50%{border-radius:44% 56% 58% 42%/46% 58% 42% 54%}100%{border-radius:52% 48% 40% 60%/58% 44% 56% 42%}}
@media (prefers-reduced-motion:reduce){.hero.stil-blob .hero-bg{animation:none}}

/* Halbkreis */
.hero.stil-halbkreis .hero-bg{inset:50% auto auto auto;right:clamp(-13rem,-9vw,-3rem);width:min(50%,700px);height:auto;aspect-ratio:1;transform:translateY(-50%);border-radius:50%;box-shadow:0 0 0 12px var(--c2),0 0 0 44px color-mix(in srgb,var(--c2) 16%,transparent)}
.hero.stil-halbkreis .hero-txt{max-width:min(35rem,48%)}
@media (max-width:800px){.hero.stil-halbkreis .hero-txt{max-width:none}.hero.stil-halbkreis .hero-bg{right:-24%}}

/* Versetzt */
.hero.stil-versetzt .hero-bg{inset:8% clamp(1rem,5vw,6rem) 8% auto;width:min(44%,600px);height:84%;
  -webkit-mask:linear-gradient(#000,#000) left top/calc(50% - 9px) 86% no-repeat,linear-gradient(#000,#000) right bottom/calc(50% - 9px) 86% no-repeat;
  mask:linear-gradient(#000,#000) left top/calc(50% - 9px) 86% no-repeat,linear-gradient(#000,#000) right bottom/calc(50% - 9px) 86% no-repeat}

/* Etikett */
.hero.stil-etikett .slide::before,.hero.stil-etikett .slide.mitte::before{background:color-mix(in srgb,var(--dark) 30%,transparent)}
.hero.stil-etikett .hero-txt{max-width:31rem;background:var(--c2);color:var(--on-c2);padding:clamp(1.7rem,3.2vw,2.6rem);transform:rotate(-2deg);outline:2px dashed color-mix(in srgb,var(--on-c2) 50%,transparent);outline-offset:-12px;box-shadow:0 26px 54px -18px rgba(0,0,0,.55)}
.hero.stil-etikett :is(h1,h2){color:var(--on-c2);font-size:clamp(1.8rem,3.2vw,2.8rem);text-shadow:none!important}
.hero.stil-etikett .hero-lead{color:color-mix(in srgb,var(--on-c2) 86%,transparent)!important;text-shadow:none!important}
.hero.stil-etikett .kicker{color:var(--on-c2)}
.hero.stil-etikett .kicker::before{background:var(--on-c2)}
.hero.stil-etikett .btn:not(.ghost){background:var(--dark);border-color:var(--dark);color:#fff}
.hero.stil-etikett .btn.ghost{color:var(--on-c2);border-color:var(--on-c2)}
.hero.stil-etikett .btn.ghost:hover{background:var(--on-c2);color:var(--c2);border-color:var(--on-c2)}

/* Kontur */
.hero.stil-kontur .slide::before,.hero.stil-kontur .slide.mitte::before{background:color-mix(in srgb,var(--dark) 72%,transparent)}
.hero.stil-kontur .hero-txt{max-width:none}
.hero.stil-kontur :is(h1,h2){font-size:clamp(2.6rem,7.6vw,6.8rem);line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;overflow-wrap:anywhere;color:#fff}
@supports (-webkit-text-stroke:1px #fff){.hero.stil-kontur :is(h1,h2){color:transparent;-webkit-text-stroke:2px #fff;text-shadow:none!important}}
@media (max-width:800px){@supports (-webkit-text-stroke:1px #fff){.hero.stil-kontur :is(h1,h2){-webkit-text-stroke-width:1.4px}}}

/* Verlaufstitel */
.hero.stil-verlaufstitel :is(h1,h2){color:#fff}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero.stil-verlaufstitel :is(h1,h2){background:linear-gradient(90deg,#fff 0%,var(--c2) 55%,color-mix(in srgb,var(--c2) 55%,var(--c1)) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none!important;padding-bottom:.08em}
}

/* Bild links */
.hero.stil-bildlinks{background:var(--bg)}
.hero.stil-bildlinks .slide::before{display:none}
.hero.stil-bildlinks .hero-bg{width:48%}
.hero.stil-bildlinks .slide::after{content:"";position:absolute;z-index:1;left:48%;top:12%;bottom:12%;width:6px;background:var(--c2)}
.hero.stil-bildlinks .hero-txt,.hero.stil-bildlinks .slide.mitte .hero-txt{margin-left:54%;margin-right:0;max-width:none;text-align:left}
.hero.stil-bildlinks .slide.mitte .btn-row{justify-content:flex-start}
.hero.stil-bildlinks :is(h1,h2){font-size:clamp(2rem,3.8vw,3.4rem)}
.hero.stil-bildlinks .s-arrow.prev{left:calc(48% + 1.5rem)}
@media (max-width:800px){
  .hero.stil-bildlinks .slide{padding-top:16rem}
  .hero.stil-bildlinks .hero-bg{width:100%;height:14rem}
  .hero.stil-bildlinks .slide::after{left:0;right:0;top:14rem;bottom:auto;width:auto;height:6px}
  .hero.stil-bildlinks .hero-txt,.hero.stil-bildlinks .slide.mitte .hero-txt{margin-left:0}
}

/* Hell von unten */
.hero.stil-hellunten{background:var(--bg)}
.hero.stil-hellunten .slide{align-items:flex-end;padding-bottom:4.75rem}
.hero.stil-hellunten .slide::before,.hero.stil-hellunten .slide.mitte::before{background:linear-gradient(180deg,transparent 0%,transparent 26%,color-mix(in srgb,var(--bg) 84%,transparent) 60%,var(--bg) 90%)}
.hero.stil-hellunten .slides .slide.hh .hero-txt :is(h1,h2,.hero-lead,.kicker){text-shadow:0 0 14px var(--bg),0 0 5px var(--bg),0 0 2px var(--bg)}
.hero.stil-hellunten .slides .slide.hh .hero-lead{color:var(--ink)}
.hero.stil-hellunten .slides .slide.hd-d1::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--bg) 30%,transparent)}
.hero.stil-hellunten .slides .slide.hd-d2::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--bg) 55%,transparent)}

/* Farbschleier */
.hero.stil-farbschleier .hero-bg{filter:grayscale(1) contrast(1.05)}
.hero.stil-farbschleier .slide::before,.hero.stil-farbschleier .slide.mitte::before{background:linear-gradient(120deg,color-mix(in srgb,var(--c1) 93%,transparent) 0%,color-mix(in srgb,var(--c1) 62%,transparent) 100%)}
.hero.stil-farbschleier :is(h1,h2,.kicker){color:var(--on-c1)}
.hero.stil-farbschleier .hero-lead{color:color-mix(in srgb,var(--on-c1) 88%,transparent)}
.hero.stil-farbschleier .btn:not(.ghost){background:var(--on-c1);border-color:var(--on-c1);color:var(--c1)}
.hero.stil-farbschleier .btn.ghost{color:var(--on-c1);border-color:color-mix(in srgb,var(--on-c1) 70%,transparent)}
.hero.stil-farbschleier .slides .slide.hd-d1::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--c1) 30%,transparent)}
.hero.stil-farbschleier .slides .slide.hd-d2::before{box-shadow:inset 0 0 0 200vmax color-mix(in srgb,var(--c1) 55%,transparent)}

/* Abgerundet */
.hero.stil-rundunten{border-radius:0 0 clamp(26px,5vw,72px) clamp(26px,5vw,72px)}
.hero.stil-rundunten .slide{padding-bottom:6.5rem}

/* Spitze */
.hero.stil-spitze{--sp:clamp(22px,4vw,54px);clip-path:polygon(0 0,100% 0,100% calc(100% - var(--sp)),calc(50% + var(--sp) * 1.5) calc(100% - var(--sp)),50% 100%,calc(50% - var(--sp) * 1.5) calc(100% - var(--sp)),0 calc(100% - var(--sp)))}
.hero.stil-spitze .slide{padding-bottom:calc(var(--sp) + 5rem)}
.hero.stil-spitze .s-ctrl{bottom:calc(var(--sp) + .9rem)}

/* ---------- Hero: Bilder im Bild (kleine verlinkte Bilder je Folie, Anordnung über «bib_art») ---------- */
.hero-bib{position:relative;z-index:2;display:flex;gap:.9rem}
.bib{position:relative;display:block;min-width:0;color:var(--ink);text-decoration:none;background:#fff;border-radius:var(--rad-s);overflow:hidden;box-shadow:0 18px 40px -16px rgba(0,0,0,.6);transition:transform .25s,box-shadow .25s}
.bib-b{display:block;aspect-ratio:4/3;overflow:hidden;background:var(--grey)}
.bib-b img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.bib:hover{transform:translateY(-5px);box-shadow:0 26px 50px -18px rgba(0,0,0,.72)}
a.bib:hover .bib-b img{transform:scale(1.06)}
a.bib:focus-visible{outline:3px solid var(--c2);outline-offset:3px}
.bib-t{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.35rem .5rem;padding:.5rem .7rem;font-size:.88rem;line-height:1.25;text-shadow:none}
.bib-t b{flex:1 1 auto;font-weight:700;min-width:min(100%,5.2em);overflow-wrap:break-word;hyphens:auto}
.bib-k{flex:none;font-size:.76rem;font-weight:700;color:var(--on-c1);background:var(--c1);border-radius:var(--rad-btn);padding:.25rem .65rem;white-space:nowrap}
/* Bilder neben dem Text (Reihe, Stapel, Spalte, Collage) */
.hero:is(.bib-reihe,.bib-stapel,.bib-spalte,.bib-collage) .slide.mit-bib .wrap{display:flex;align-items:center;justify-content:space-between;gap:clamp(1.5rem,4vw,3.5rem)}
.hero:is(.bib-reihe,.bib-stapel,.bib-spalte,.bib-collage) .slide.mit-bib .hero-txt{flex:1 1 0;min-width:0;margin-inline:0}
/* Reihe */
.hero.bib-reihe .slide.mit-bib .wrap{align-items:flex-end}
.hero.bib-reihe .hero-bib{flex:0 1 44%;max-width:600px}
.hero.bib-reihe .bib{flex:1;padding:5px 5px 0}
.hero.bib-reihe .bib-b{border-radius:calc(var(--rad-s) - 3px)}
/* Stapel */
.hero.bib-stapel .hero-bib{flex:0 1 44%;max-width:540px;gap:0;justify-content:center;padding:1.6rem 0}
.hero.bib-stapel .bib{flex:0 0 46%;padding:7px 7px 0;margin-left:-13%}
.hero.bib-stapel .bib:first-child{margin-left:0}
.hero.bib-stapel .bib:nth-child(4n+1){transform:rotate(-6deg)}
.hero.bib-stapel .bib:nth-child(4n+2){transform:rotate(4deg) translateY(16px)}
.hero.bib-stapel .bib:nth-child(4n+3){transform:rotate(-3deg) translateY(-12px)}
.hero.bib-stapel .bib:nth-child(4n+4){transform:rotate(5deg) translateY(8px)}
.hero.bib-stapel a.bib:hover,.hero.bib-stapel a.bib:focus-visible{transform:rotate(0) scale(1.07);z-index:5}
/* Spalte */
.hero.bib-spalte .hero-bib{flex:0 1 36%;max-width:410px;flex-direction:column;gap:.6rem;padding:.7rem;border-radius:var(--rad);background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.hero.bib-spalte .bib{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;box-shadow:none}
.hero.bib-spalte .bib-b{aspect-ratio:1}
.hero.bib-spalte .bib-t{flex-direction:column;align-items:flex-start;gap:.35rem}
.hero.bib-spalte a.bib:hover{transform:translateX(5px);box-shadow:none}
/* Collage */
.hero.bib-collage .hero-bib{flex:0 1 48%;max-width:630px;display:grid;grid-template-columns:1.25fr 1fr;grid-auto-rows:minmax(130px,1fr);gap:.7rem;min-height:min(390px,58vh)}
.hero.bib-collage .bib:first-child{grid-row:span 2}
.hero.bib-collage .bib-b,.hero.bib-leiste .bib-b{position:absolute;inset:0;aspect-ratio:auto}
.hero.bib-collage .bib-t,.hero.bib-leiste .bib-t{position:absolute;left:0;right:0;bottom:0;color:#fff;background:linear-gradient(180deg,transparent,rgba(0,0,0,.8));padding:1.8rem .8rem .6rem}
/* Kreise */
.hero.bib-kreise .hero-bib{margin-top:1.8rem;gap:1.3rem;flex-wrap:wrap}
.hero.bib-kreise .slide.mitte .hero-bib{justify-content:center}
.hero.bib-kreise .bib{width:clamp(84px,9vw,118px);background:none;box-shadow:none;overflow:visible;text-align:center;color:inherit}
.hero.bib-kreise .bib-b{aspect-ratio:1;border-radius:50%;border:3px solid #fff;box-shadow:0 0 0 3px var(--c2),0 12px 24px -10px rgba(0,0,0,.6)}
.hero.bib-kreise .bib-t{display:block;padding:.55rem 0 0;font-size:.82rem}
.hero.bib-kreise .bib-k{display:none}
.hero.bib-kreise a.bib:hover{box-shadow:none}
/* Leiste */
.hero.bib-leiste .slide.mit-bib{align-items:flex-end;padding-bottom:0}
.hero.bib-leiste .hero-bib{margin-top:clamp(1.8rem,4vw,3rem);gap:.6rem}
.hero.bib-leiste .bib{flex:1;aspect-ratio:16/10;border-radius:var(--rad-s) var(--rad-s) 0 0;box-shadow:0 -10px 30px -14px rgba(0,0,0,.6)}
.hero.bib-leiste a.bib:hover{transform:translateY(-6px)}
.hero.bib-leiste .s-ctrl{bottom:auto;top:1.1rem}
@media (max-width:900px){
  .hero:is(.bib-reihe,.bib-stapel,.bib-spalte,.bib-collage) .slide.mit-bib .wrap{flex-direction:column;align-items:stretch}
  .hero:is(.bib-reihe,.bib-stapel,.bib-spalte,.bib-collage) .slide.mit-bib .hero-txt{flex:none;max-width:none}
  .hero:is(.bib-reihe,.bib-stapel,.bib-spalte,.bib-collage) .hero-bib{flex:none;max-width:none;width:100%}
  .hero.bib-collage .hero-bib{min-height:300px}
  .hero.bib-reihe .bib-t{font-size:.78rem;padding:.4rem .45rem}
  .hero.bib-leiste .hero-bib{flex-wrap:wrap}
  .hero.bib-leiste .bib{flex:1 1 40%}
}

/* ---------- Hero: Position der «Bilder im Bild» (Feld bib_pos; «Leiste» bleibt immer unten) ---------- */
.hero[class*="bibpos-"]:not(.bib-leiste) .slide.mit-bib .wrap{display:flex;justify-content:space-between;gap:clamp(1.5rem,4vw,3.5rem)}
.hero[class*="bibpos-"]:not(.bib-leiste) .slide.mit-bib .hero-txt{flex:1 1 0;min-width:0;margin-inline:0}
.hero:is(.bibpos-lo,.bibpos-lm,.bibpos-lu):not(.bib-leiste) .slide.mit-bib .wrap{flex-direction:row-reverse}
.hero:is(.bibpos-ro,.bibpos-lo):not(.bib-leiste) .slide.mit-bib .wrap{align-items:flex-start}
.hero:is(.bibpos-rm,.bibpos-lm):not(.bib-leiste) .slide.mit-bib .wrap{align-items:center}
.hero:is(.bibpos-ru,.bibpos-lu):not(.bib-leiste) .slide.mit-bib .wrap{align-items:flex-end}
.hero:is(.bibpos-unter,.bibpos-ueber):not(.bib-leiste) .slide.mit-bib .wrap{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.hero.bibpos-ueber:not(.bib-leiste) .slide.mit-bib .wrap{flex-direction:column-reverse}
.hero:is(.bibpos-unter,.bibpos-ueber):not(.bib-leiste) .slide.mit-bib .hero-txt{flex:none}
.hero:is(.bibpos-unter,.bibpos-ueber):not(.bib-leiste):not(.bib-kreise) .slide.mit-bib .hero-bib{flex:none;width:min(100%,640px);max-width:none}
/* Kreise neben dem Text statt darunter */
.hero.bib-kreise:is(.bibpos-ro,.bibpos-rm,.bibpos-ru,.bibpos-lo,.bibpos-lm,.bibpos-lu) .hero-bib{flex:0 1 42%;margin-top:0;justify-content:center}
.hero.bib-kreise:is(.bibpos-unter,.bibpos-ueber) .hero-bib{margin-top:0}
/* «Stapel» neben dem Text: etwas Abstand zum Rand, damit die schrägen Bilder nicht unter den Slider-Pfeilen liegen */
@media (min-width:901px){.hero.slider.bib-stapel:not(.bibpos-unter):not(.bibpos-ueber) .slide.mit-bib .hero-bib{margin-inline:1.5rem}}
/* «Spalte» über/unter dem Text: Kärtchen nebeneinander statt gestapelt – sonst wird das Bild sehr hoch */
.hero.bib-spalte:is(.bibpos-unter,.bibpos-ueber) .slide.mit-bib .hero-bib{flex-direction:row;width:min(100%,940px)}
.hero.bib-spalte:is(.bibpos-unter,.bibpos-ueber) .bib{flex:1 1 0;min-width:0;grid-template-columns:76px minmax(0,1fr)}
@media (max-width:900px){
  .hero[class*="bibpos-"]:not(.bib-leiste) .slide.mit-bib .wrap{flex-direction:column;align-items:stretch}
  .hero.bibpos-ueber:not(.bib-leiste) .slide.mit-bib .wrap{flex-direction:column-reverse}
  .hero[class*="bibpos-"]:not(.bib-leiste) .slide.mit-bib .hero-txt{flex:none;max-width:none}
  .hero[class*="bibpos-"]:not(.bib-leiste) .slide.mit-bib .hero-bib{flex:none;width:100%;max-width:none}
  .hero.bib-spalte:is(.bibpos-unter,.bibpos-ueber) .slide.mit-bib .hero-bib{flex-direction:column}
  .hero.bib-spalte:is(.bibpos-unter,.bibpos-ueber) .bib{flex:none;grid-template-columns:92px minmax(0,1fr)}
}

/* ---------- Einbettung: Breite und Rahmen wählbar (Felder «breite» / «rahmen») ---------- */
.einbett.eb-breit,.einbett-gate.eb-breit{max-width:1200px}
.einbett.eb-voll,.einbett-gate.eb-voll{max-width:none}
.einbett.eb-ohne{border:0;border-radius:0;box-shadow:none;background:none}
/* Sehr hoher Rahmen auf dem Handy: so hoch wie der Bildschirm – man scrollt in der Liste, die Seite bleibt erreichbar */
@media (max-width:700px){.einbett.eb-hoch iframe{height:82vh!important;height:82svh!important}}

/* ---------- Team: lange E-Mail-Adressen und Funktionen brechen um, statt in die Nachbarkarte zu ragen ---------- */
.person .p-txt{min-width:0}
.person .p-txt p,.person .p-txt a{overflow-wrap:anywhere}
@media (max-width:600px){.grid[class*="team-"]:not(.team-kompakt) .person p{font-size:.84rem}.grid[class*="team-"]:not(.team-kompakt) .person h3{font-size:1rem}}

/* ---------- Karten / Vorteile: Darstellung «Offen» – ohne Kästen, Symbol, grosse Umriss-Zahl, Trennlinien ---------- */
.cv-offen{overflow:hidden;--cvo-linie:var(--line);--cvo-zahl:color-mix(in srgb,var(--ink) 24%,transparent);--cvo-fuell:var(--dark)}
.cv-offen .cv-grid{gap:0;margin-right:-1px;border-top:1px solid var(--cvo-linie)}
.cv-offen .cv-k{border-radius:0;padding:clamp(1.5rem,2.4vw,2.3rem) clamp(1.3rem,2.2vw,2rem) clamp(1.9rem,2.8vw,2.7rem);gap:1.3rem;overflow:hidden;isolation:isolate;
  box-shadow:inset -1px 0 0 var(--cvo-linie),inset 0 -1px 0 var(--cvo-linie)}
.cv-offen .cv-k::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--cvo-fuell);transform:translateY(101%);transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cv-offen .cv-k::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c1);transform:scaleX(0);transform-origin:left;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.cv-offen .cv-top{align-items:center}
.cv-offen .cv-ic{width:46px;height:46px;border-radius:0;background:none;overflow:visible}
.cv-offen .cv-ic:not(.cv-svg){width:64px;height:64px;border-radius:12px;overflow:hidden}
.cv-offen .cv-ic.cv-svg svg{width:100%;height:100%;stroke-width:1.5}
.cv-offen .cv-nr{display:block;margin-left:auto;font-size:clamp(3rem,4.6vw,4.2rem);font-weight:900;line-height:.85;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px var(--cvo-zahl);transition:-webkit-text-stroke-color .35s}
.cv-offen .cv-pf{position:absolute;right:clamp(1.3rem,2.2vw,2rem);bottom:1.1rem;margin:0}
.cv-offen .cv-k.linked{padding-bottom:3.1rem}
.cv-offen .cv-k h3{font-size:clamp(1.15rem,1.55vw,1.38rem);letter-spacing:-.01em}
.cv-offen .cv-k p{margin-top:.6rem;font-size:.95rem;line-height:1.55;color:var(--soft);transition:color .35s}
@media (hover:hover){
  .cv-offen .cv-k:hover{color:#fff}
  .cv-offen .cv-k:hover::before{transform:none}
  .cv-offen .cv-k:hover::after{transform:scaleX(1)}
  .cv-offen .cv-k:hover p{color:rgba(255,255,255,.8)}
  .cv-offen .cv-k:hover .cv-nr{-webkit-text-stroke-color:var(--c1)}
  .cv-offen .cv-k:hover .cv-ic.cv-svg{color:#fff}
}
/* auf dunklem oder farbigem Abschnitt: helle Linien, Füllung in der Hauptfarbe bzw. dunkel */
.sec:is(.bg-dunkel,.bg-farbe,.bg-akzent,.bg-verlauf,.bg-bild) .cv-offen{--cvo-linie:rgba(255,255,255,.2);--cvo-zahl:rgba(255,255,255,.38);--cvo-fuell:var(--c1)}
.sec:is(.bg-farbe,.bg-akzent,.bg-verlauf) .cv-offen{--cvo-fuell:var(--dark)}
.sec:is(.bg-dunkel,.bg-farbe,.bg-akzent,.bg-verlauf,.bg-bild) .cv-offen .cv-k p{color:rgba(255,255,255,.78)}
.sec:is(.bg-dunkel,.bg-bild) .cv-offen .cv-ic.cv-svg{color:var(--c1)}
.sec:is(.bg-farbe,.bg-akzent,.bg-verlauf) .cv-offen .cv-ic.cv-svg{color:#fff}
@media (hover:hover){.sec.bg-dunkel .cv-offen .cv-k:hover .cv-nr,.sec.bg-bild .cv-offen .cv-k:hover .cv-nr{-webkit-text-stroke-color:#fff}}
@media (max-width:700px){.cv-offen .cv-k{gap:.9rem}.cv-offen .cv-nr{font-size:2.8rem}}

/* ---------- Logo-Reihe: gross und in Originalfarbe (Feld «farbig») ---------- */
.logos.farbig{gap:2rem clamp(2.5rem,6vw,5.5rem)}
.logos.farbig img{filter:none;opacity:1;max-height:74px;max-width:210px;transition:transform .25s}
.logos.farbig a:hover img{transform:translateY(-3px)}
.bg-dunkel .logos.farbig img,.bg-bild .logos.farbig img{filter:brightness(0) invert(1)}
@media (max-width:600px){.logos.farbig img{max-height:54px;max-width:140px}}

/* ---------- Standort-Karte: Anordnung «Nebeneinander» + Öffnungszeiten ---------- */
.so-zeiten b{display:block;margin-bottom:.2rem;color:var(--ink)}
.standort-neben{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center}
.standort-neben .so-text h3{font-size:clamp(1.3rem,2vw,1.7rem);margin-bottom:.5em}
.standort-neben .so-text p{margin:0 0 1.1em}
.standort-neben .map-gate{margin-top:0}
.standort-neben .map-gate::before{padding-top:56%}
.bg-dunkel .so-zeiten b,.bg-bild .so-zeiten b{color:#fff}
@media (max-width:800px){.standort-neben{grid-template-columns:1fr}}

/* ---------- Video-Raster (Baustein «videoliste») ---------- */
.vl-grid{gap:clamp(1.2rem,2.4vw,2rem) clamp(1rem,2vw,1.6rem)}
.vl-k{margin:0;display:flex;flex-direction:column}
.vl-k .video-gate{border-radius:var(--rad);transition:transform .25s,box-shadow .25s}
.vl-k .video-gate::after{background:linear-gradient(180deg,rgba(10,16,28,.05) 40%,rgba(10,16,28,.5));transition:opacity .25s}
.vl-k .video-play{width:58px;height:58px;background:var(--c1);color:var(--on-c1,#fff);box-shadow:0 8px 24px -8px rgba(0,0,0,.5)}
.vl-k .video-play svg,.vl-k .video-play svg:first-child{display:block;width:22px;height:22px}
.vl-k .video-btn:hover .video-play{background:var(--c1);transform:scale(1.12)}
.vl-k:hover .video-gate{transform:translateY(-4px);box-shadow:var(--shadow)}
.vl-k figcaption{margin-top:.8rem;font-family:var(--font-h);font-weight:700;font-size:1.02rem;line-height:1.3;color:var(--ink)}
.bg-dunkel .vl-k figcaption,.bg-bild .vl-k figcaption,.bg-farbe .vl-k figcaption{color:#fff}

/* ---------- Lasche am rechten Bildschirmrand (Design: «cta_lasche») ---------- */
.cta-lasche{position:fixed;right:0;top:clamp(150px,34vh,300px);z-index:65;display:flex;align-items:center;gap:.7rem;height:64px;padding:0 1rem 0 1.25rem;
  background:var(--dark);color:#fff;text-decoration:none;border-radius:999px 0 0 999px;box-shadow:0 0 0 2px rgba(255,255,255,.55),0 10px 30px -10px rgba(0,0,0,.45);transition:background .25s,padding .25s}   /* heller Ring: bleibt auch auf dunklem Grund sichtbar */
.cta-lasche svg{flex:none;width:30px;height:30px}
.cta-lasche span{max-width:0;overflow:hidden;white-space:nowrap;font-family:var(--font-h);font-weight:700;font-size:.95rem;transition:max-width .35s ease}
.cta-lasche:hover,.cta-lasche:focus-visible{background:var(--c1);color:var(--on-c1,#fff);padding-right:1.3rem}
.cta-lasche:hover span,.cta-lasche:focus-visible span{max-width:16rem}
@media (max-width:700px){.cta-lasche{top:auto;bottom:5.5rem;height:52px;padding:0 .8rem 0 1rem}.cta-lasche svg{width:24px;height:24px}.cta-lasche span{display:none}}
@media print{.cta-lasche{display:none}}

/* ---------- Formular: Hinweis unter einem Feld (z.B. Fotos hochladen) ---------- */
.kform .f-hinweis{display:block;margin-top:.35rem;font-size:.82rem;color:var(--soft)}

/* ---------- Fahrzeug-Highlights (Baustein «fahrzeug_tipps») ---------- */
.ft-grid{gap:clamp(1rem,2vw,1.6rem)}
.ft-k{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border:1px solid var(--line);border-radius:var(--rad);overflow:hidden;transition:transform .25s,box-shadow .25s,border-color .25s}
.ft-k.linked:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.ft-bild{position:relative;aspect-ratio:4/3;background:var(--grey);overflow:hidden}
.ft-bild img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.ft-k.linked:hover .ft-bild img{transform:scale(1.05)}
.ft-leer{position:absolute;inset:0;display:grid;place-items:center;color:color-mix(in srgb,var(--ink) 22%,transparent)}
.ft-marke{position:absolute;left:0;top:1rem;background:var(--c1);color:var(--on-c1,#fff);font-size:.74rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:.35rem .8rem .35rem .9rem;border-radius:0 999px 999px 0}
.ft-txt{display:flex;flex-direction:column;gap:.8rem;flex:1;padding:1.15rem 1.25rem 1.2rem}
.ft-k h3{margin:0;font-size:1.12rem;line-height:1.25;color:var(--ink);text-transform:none;letter-spacing:0}
.ft-k h3 a{color:inherit;text-decoration:none}
.ft-k h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.ft-fakten{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.35rem}
.ft-fakten li{font-size:.8rem;font-weight:600;color:var(--soft);background:var(--grey);border-radius:999px;padding:.22rem .7rem}
.ft-fuss{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;padding-top:.9rem;border-top:1px solid var(--line)}
.ft-preis{font-family:var(--font-h);font-size:1.35rem;font-weight:800;color:var(--c1-text,var(--c1));letter-spacing:-.01em}
.ft-pf{color:var(--soft);transition:transform .25s,color .25s}
.ft-k.linked:hover .ft-pf{transform:translateX(4px);color:var(--c1-text,var(--c1))}
.ft-grid+.btn-row{margin-top:2rem}

.bw-knoepfe{margin-top:1.2rem}

/* Karten: Etikett – kleine Zeile über dem Titel (z.B. «4 Jahre · EFZ») */
.cv-et{display:inline-block;align-self:flex-start;margin-bottom:.55rem;padding:.28em .7em;border-radius:99px;background:color-mix(in srgb,var(--c1) 11%,transparent);color:var(--c1-text);font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;line-height:1.35;transition:background .35s,color .35s}
.card .body .cv-et{margin-bottom:.7rem}
.sec:is(.bg-dunkel,.bg-farbe,.bg-akzent,.bg-verlauf,.bg-bild) .cv-et,.cv-akzent .cv-et,.cv-band .cv-et,.cv-foto .cv-et{background:rgba(255,255,255,.16);color:#fff}
@media (hover:hover){.cv-offen .cv-k:hover .cv-et,.cv-hoverbild .cv-k:hover .cv-et,.cv-hell .cv-k:hover .cv-et{background:rgba(255,255,255,.16);color:#fff}}
/* Fusszeile auf dem Handy: lange Titel («Öffnungszeiten») nicht mitten im Wort umbrechen */
@media (max-width:520px){.site-foot .foot h2{font-size:clamp(.78rem,3.5vw,1.05rem);letter-spacing:0}}
/* Stellenkarte: in den Ausdrücken «Energie» und «Klar» bringt der Knopf schon einen Pfeil mit – keinen zweiten zeigen */
:is(.ausdruck-energie,.ausdruck-klar) .jb-fuss .btn>svg{display:none}

/* ---------- Anlässe / Events (.ev-liste): Karte mit Bild, Datums-Marke, Angaben und Knopf ---------- */
.ev-liste{gap:clamp(1rem,1.8vw,1.5rem)}
.ev-k{position:relative;display:flex;flex-direction:column;background:#fff;color:var(--ink);border-radius:22px;overflow:hidden;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 18px 40px -28px rgba(16,24,40,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.ev-k.linked:hover,.ev-k:focus-within{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(16,24,40,.05),0 30px 60px -28px rgba(16,24,40,.5)}
.ev-b{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--dark)}
.ev-b img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ev-k.linked:hover .ev-b img{transform:scale(1.06)}
.ev-k.ohne-bild .ev-b{aspect-ratio:auto;min-height:6.6rem;background:linear-gradient(120deg,var(--dark),color-mix(in srgb,var(--dark) 72%,var(--c1)))}
.ev-tag{position:absolute;left:1rem;top:1rem;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:3.7rem;padding:.5rem .6rem .45rem;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 10px 24px -12px rgba(0,0,0,.55);line-height:1}
.ev-tag b{font-family:var(--font-h);font-size:1.65rem;font-weight:800;letter-spacing:-.02em}
.ev-tag.lang b{font-size:1.2rem}
.ev-tag span{margin-top:.28rem;font-size:.7rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--c1-text,var(--c1))}
.ev-et{position:absolute;right:1rem;top:1rem;padding:.34rem .8rem;border-radius:999px;background:var(--c1);color:var(--on-c1,#fff);font-size:.72rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.ev-tx{display:flex;flex-direction:column;flex:1;padding:1.35rem 1.4rem 1.5rem}
.ev-k h3{font-size:1.22rem;line-height:1.25;margin:0 0 .75rem;text-wrap:balance;overflow-wrap:break-word}
.ev-k h3 a{color:inherit;text-decoration:none}
.ev-k h3 a::after{content:"";position:absolute;inset:0;z-index:1}
.ev-meta{list-style:none;margin:0 0 .9rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem 1.1rem;font-size:.88rem;font-weight:600}
.ev-meta li{display:inline-flex;align-items:center;gap:.4rem;margin:0}
.ev-meta svg{flex:none;color:var(--c1-text,var(--c1))}
.ev-t{margin:0 0 1.1rem;font-size:.95rem;line-height:1.55;color:var(--soft)}
.ev-mehr{margin-top:auto;display:inline-flex;align-items:center;gap:.4rem;font-weight:800;font-size:.9rem;color:var(--c1-text,var(--c1))}
.ev-mehr svg{transition:transform .25s}
.ev-k.linked:hover .ev-mehr svg{transform:translateX(5px)}
.ev-k.vorbei .ev-b img{filter:grayscale(1);opacity:.75}
.ev-k.vorbei .ev-et{background:#6b7280;color:#fff}
.ev-leer{text-align:center}

/* ---------- Newsletter-Anmeldung: Feld, Hinweis, Meldungen; Darstellung «Banner» ---------- */
.newsletter .nl-form{align-items:stretch}
.newsletter .nl-form input[type=email]{min-width:0;background:#fff;color:var(--ink)}
.newsletter .nl-form .btn{margin:0;flex:none}
.newsletter .nl-hinweis{margin:.8rem 0 0;font-size:.82rem;line-height:1.5;color:var(--soft)}
.newsletter .nl-hinweis a{color:inherit}
.newsletter .f-ok,.newsletter .f-err{margin:1rem 0 0;text-align:left}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nl-banner{max-width:none;text-align:left;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(1.8rem,4vw,3.2rem);border-radius:calc(var(--rad) + 10px);background:linear-gradient(120deg,var(--dark),color-mix(in srgb,var(--dark) 78%,var(--c1)));color:#fff}
.nl-banner::after{content:"";position:absolute;right:-90px;top:-90px;width:280px;height:280px;border-radius:50%;border:44px solid rgba(255,255,255,.06);z-index:-1}
.nl-banner h2{color:#fff;margin:0 0 .5rem;font-size:clamp(1.5rem,2.6vw,2.1rem)}
.nl-banner .nl-kopf p{margin:0;color:rgba(255,255,255,.82)}
.nl-banner .nl-form{margin-top:0;justify-content:flex-start;flex-wrap:nowrap}
.nl-banner .nl-form input[type=email]{flex:1 1 auto;border-color:transparent;border-radius:999px;padding:.85rem 1.2rem}
.nl-banner .nl-hinweis{color:rgba(255,255,255,.66)}
.nl-banner .f-ok,.nl-banner .f-err{margin:0 0 1rem}
@media (max-width:860px){.nl-banner{grid-template-columns:1fr}}
@media (max-width:520px){.nl-banner .nl-form{flex-wrap:wrap}.nl-banner .nl-form .btn{width:100%;justify-content:center}}
.nl-ab{text-align:center}

/* ---------- Kundenstimmen: Sterne und Darstellung «Schieber» ---------- */
.q-sterne{display:inline-flex;gap:.18rem;margin-bottom:1rem}
.q-sterne i{width:1.15rem;height:1.15rem;background:#d5d9e0;clip-path:polygon(50% 2%,62% 36%,98% 36%,69% 58%,80% 94%,50% 72%,20% 94%,31% 58%,2% 36%,38% 36%)}
.q-sterne i.an{background:#f5a623}
.q-sl{position:relative}
.quotes.q-schieber{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:calc((100% - 2 * clamp(1.25rem,2.2vw,2rem)) / 3);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:.4rem .2rem 1rem;margin:0 -.2rem;outline-offset:4px}
.quotes.q-schieber::-webkit-scrollbar{display:none}
.q-schieber .quote{scroll-snap-align:start}
@media (max-width:1000px){.quotes.q-schieber{grid-auto-columns:calc((100% - clamp(1.25rem,2.2vw,2rem)) / 2)}}
@media (max-width:640px){.quotes.q-schieber{grid-auto-columns:88%}}
.q-steuer{display:flex;align-items:center;justify-content:center;gap:1rem;margin-top:.6rem}
.q-steuer[hidden]{display:none}
.q-pf{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:grid;place-items:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s,opacity .2s}
.q-pf.q-zur svg{transform:rotate(180deg)}
.q-pf:hover:not(:disabled){background:var(--c1);border-color:var(--c1);color:var(--on-c1,#fff)}
.q-pf:disabled{opacity:.35;cursor:default}
.q-punkte{display:flex;gap:.45rem}
.q-punkte button{width:9px;height:9px;padding:0;border:0;border-radius:50%;background:color-mix(in srgb,var(--ink) 22%,transparent);cursor:pointer;transition:width .25s,background .25s}
.q-punkte button[aria-current]{width:26px;border-radius:99px;background:var(--c1)}
.sec:is(.bg-dunkel,.bg-farbe,.bg-akzent,.bg-verlauf,.bg-bild) .q-punkte button{background:rgba(255,255,255,.35)}
.sec:is(.bg-dunkel,.bg-farbe,.bg-akzent,.bg-verlauf,.bg-bild) .q-punkte button[aria-current]{background:#fff}
/* Hero: Video als Hintergrund verhält sich wie das Bild */
video.hero-bg{object-fit:cover;pointer-events:none}
/* Karten «Offen» mit vier Spalten: auf dem Handy zwei pro Reihe statt alle untereinander */
@media (max-width:640px){
  .cv-offen .cv-grid.g4{grid-template-columns:1fr 1fr}
  .cv-offen .cv-grid.g4 .cv-k{padding:1.1rem .9rem 2.6rem;gap:.7rem}
  .cv-offen .cv-grid.g4 .cv-nr{font-size:2rem}
  .cv-offen .cv-grid.g4 .cv-ic{width:34px;height:34px}
  .cv-offen .cv-grid.g4 h3{font-size:1.02rem;overflow-wrap:anywhere;hyphens:auto}
  .cv-offen .cv-grid.g4 .cv-k p{font-size:.86rem;line-height:1.45;margin-top:.4rem}
  .cv-offen .cv-grid.g4 .cv-pf{right:.9rem;bottom:.8rem}
}

/* Auszüge (Anlässe, News auf der Startseite): auf dem Handy eine Reihe zum Wischen – spart viel Höhe */
@media (max-width:640px){
  .grid.hy-reihe{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:84%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -1.25rem;padding:.3rem 1.25rem 1.2rem;scroll-padding-left:1.25rem}
  .grid.hy-reihe::-webkit-scrollbar{display:none}
  .grid.hy-reihe>*{scroll-snap-align:start}
  html.js .grid.hy-reihe>.rv{opacity:1;transform:none}
}
/* Foto-Kacheln zu dritt: auf dem Handy die erste breit, die zwei anderen nebeneinander (statt 2 + 1 mit Lücke) */
@media (max-width:640px){
  .cv-foto .cv-grid[style*="--cv-n:3"]{grid-template-columns:1fr 1fr}
  .cv-foto .cv-grid[style*="--cv-n:3"]>.cv-k:first-child{grid-column:1 / -1;aspect-ratio:16/9}
}

/* Anlässe: Fenster mit den Informationen (öffnet beim Klick auf die Karte) */
.ev-dlg{border:0;padding:0;width:min(760px,calc(100vw - 1.6rem));max-height:min(88vh,900px);border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 40px 90px -30px rgba(0,0,0,.6);overflow:hidden}
.ev-dlg[open]{display:flex;flex-direction:column}
.ev-dlg::backdrop{background:rgba(10,16,28,.72);backdrop-filter:blur(3px)}
.ev-dlg-b{position:relative;flex:none;aspect-ratio:16/7;background:var(--dark);overflow:hidden}
.ev-dlg-b img{width:100%;height:100%;object-fit:cover;display:block}
.ev-dlg-b .ev-et{left:1.4rem;right:auto;top:auto;bottom:1.1rem}
.ev-dlg-tx{padding:clamp(1.3rem,3vw,2.2rem);overflow-y:auto;overscroll-behavior:contain}
.ev-dlg-tx>.ev-et{position:static;display:inline-block;margin-bottom:.9rem}
.ev-dlg h2{font-size:clamp(1.4rem,3vw,2rem);line-height:1.15;margin:0 0 1rem;text-wrap:balance}
.ev-dlg .ev-meta{font-size:.95rem;gap:.5rem 1.4rem;margin-bottom:1.3rem;padding-bottom:1.2rem;border-bottom:1px solid var(--line)}
.ev-dlg .prose{font-size:1rem}
.ev-dlg .btn-row{margin-top:1.6rem}
.ev-x{position:absolute;right:.9rem;top:.9rem;z-index:2;width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.94);color:var(--ink);cursor:pointer;box-shadow:0 6px 18px -8px rgba(0,0,0,.5)}
.ev-x::before,.ev-x::after{content:"";position:absolute;left:50%;top:50%;width:17px;height:2px;background:currentColor;border-radius:2px}
.ev-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.ev-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.ev-x:hover{background:var(--c1);color:var(--on-c1,#fff)}
html.ev-offen{overflow:hidden}
@media (max-width:560px){.ev-dlg{max-height:92vh}.ev-dlg-b{aspect-ratio:16/9}.ev-dlg .btn-row .btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.ev-dlg[open]{animation:ev-auf .28s cubic-bezier(.2,.8,.2,1)}@keyframes ev-auf{from{opacity:0;transform:translateY(18px) scale(.98)}}}

/* ---------- Anzeige «Jetzt geöffnet / Geschlossen» ---------- */
.offen-pille{display:inline-flex;align-items:center;gap:.45rem;white-space:nowrap;font-weight:600}
.offen-pille i{width:.6rem;height:.6rem;border-radius:50%;background:#9aa3b2;flex:none}
.offen-pille.an i{background:#22c55e;box-shadow:0 0 0 0 rgba(34,197,94,.55);animation:offen-puls 2.2s infinite}
@keyframes offen-puls{70%{box-shadow:0 0 0 7px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (prefers-reduced-motion:reduce){.offen-pille.an i{animation:none}}
.offen-pille b{font-weight:700}
.offen-pille .op-zusatz{font-weight:500;opacity:.8}
.topbar .tb-l .offen-pille{display:inline-flex;color:#fff}
.offen-pille.op-zeile{display:flex;margin:.25rem 0 .45rem;font-size:.92rem}
@media (max-width:760px){.topbar .tb-l .offen-pille .op-zusatz{display:none}}
/* ---------- Abschnitt mit Überschrift als eigene Spalte ---------- */
@media (min-width:961px){
  .sec.kopf-seite>.wrap{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.75fr);gap:clamp(2rem,5vw,5rem);align-items:start}
  .sec.kopf-seite .sec-head{margin:0;max-width:none;position:sticky;top:calc(var(--head-h,84px) + 1.5rem)}
  .sec.kopf-seite .sec-inhalt>.grid.g3,.sec.kopf-seite .sec-inhalt>.grid.g4,.sec.kopf-seite .sec-inhalt .cv-grid.g3,.sec.kopf-seite .sec-inhalt .cv-grid.g4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.sec.kopf-seite .sec-head h2{font-size:clamp(1.7rem,3vw,2.5rem)}
.sec.kopf-seite .sec-inhalt{min-width:0}
/* ---------- Kundenstimmen: lange Texte gekürzt, «Mehr lesen» klappt auf ---------- */
.quote .q-text{display:-webkit-box;-webkit-line-clamp:6;line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.quote.q-offen .q-text{display:block;-webkit-line-clamp:unset;line-clamp:unset}
.q-mehr{margin-top:.6rem;padding:0;border:0;background:none;font:inherit;font-size:.9rem;font-weight:800;color:var(--c1-text,var(--c1));cursor:pointer}
.q-mehr:hover{text-decoration:underline}
.q-schieber .quote{align-self:start}
/* ---------- Formular im Fenster (Link «seite#fenster») ---------- */
.fm-dlg{width:min(640px,calc(100vw - 1.6rem))}
.fm-dlg .ev-dlg-tx{padding-top:clamp(1.6rem,3vw,2.4rem)}
.fm-dlg h2{padding-right:3rem}
.fm-dlg .fm-lead{margin:-.3rem 0 1.4rem;color:var(--soft)}
.fm-dlg .ev-x{box-shadow:none;background:var(--grey)}
.fm-dlg .kform{margin:0}
@media (max-width:480px){.topbar{font-size:.8rem}.topbar .tb-l{gap:.2rem .75rem}}

/* ---------- Handy: Hero-Stile mit «Foto als Form rechts» ----------
   Bisher lag das Foto dort blass und angeschnitten hinter dem Text. Jetzt steht es als eigenes Bild über dem Text. */
@media (max-width:800px){
  .hero:is(.stil-versetzt,.stil-bildkarte,.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis) .slide{flex-direction:column;align-items:stretch;justify-content:flex-start;min-height:0;padding:1.25rem 0 3.8rem}
  .hero:is(.stil-versetzt,.stil-bildkarte,.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis) .hero-bg{position:relative;inset:auto;right:auto;order:-1;flex:none;align-self:center;height:auto;opacity:1;transform:none}
  .hero:is(.stil-versetzt,.stil-bildkarte,.stil-sechseck,.stil-blatt,.stil-halbkreis) .hero-bg{animation:none;scale:none}
  .hero:is(.stil-versetzt,.stil-bildkarte) .hero-bg{width:calc(100% - 2.5rem);aspect-ratio:16/10;margin:0 0 1.7rem}
  .hero.stil-bildkarte .hero-bg{width:calc(100% - 2.5rem - 10px);margin:0 10px 2.3rem 0;border-radius:var(--rad);box-shadow:10px 10px 0 var(--c2)}
  .hero:is(.stil-sechseck,.stil-blatt,.stil-blob,.stil-halbkreis) .hero-bg{width:min(62%,290px);margin:.6rem auto 1.9rem}
  .hero.stil-halbkreis .hero-bg{box-shadow:0 0 0 8px var(--c2),0 0 0 22px color-mix(in srgb,var(--c2) 16%,transparent);margin-top:1.6rem;margin-bottom:2.6rem}
  .hero.stil-blatt .hero-bg{box-shadow:12px 12px 0 color-mix(in srgb,var(--c1) 20%,transparent)}
  .hero.stil-blob .hero-bg{box-shadow:0 0 0 9px color-mix(in srgb,var(--c2) 32%,transparent);margin-top:1.2rem}
}