/* MeisterKlug – Stylesheet
   Grundlage: Vorlage meisterklug.html (Tokens und Dark Mode unverändert).
   Schriften: Alegreya (Überschriften), Archivo (Text), IBM Plex Mono (Preise, Codes) lokal;
   Bello (Akzente) kommt über Adobe Fonts, siehe _Layout.cshtml. */

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/alegreya-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Alegreya";
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url("../fonts/alegreya-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 96%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 700;
  font-stretch: 96%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/ibm-plex-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Layout: Meisterbetrieb-Ordnung — Kopf mit Wappen, Hero, Live-Demo (Telefon + Abholliste), drei Module, Branchen, Preise, Kontakt */
:root{
  /* Farben aus dem MeisterKlug-Siegel: Grün (Scheibe), Gold (Rand, Krone), Lila (Band), Rot (Wurst), Blau (Messergriffe), Creme (Schriftzug) */
  --bg:#FAF6EC;
  --surface:#FFFFFF;
  --fg:#16201B;
  --muted:#5B5E54;
  --line:#E6DDC9;
  --ink:#0F3324;
  --ink-fg:#FFFFFF;
  --brass:#9A6510;
  --brass-soft:#FBE8C2;
  --paper:#FFFDF8;
  --ok:#2F6B45;
  --warn:#B0090D;
  --gold:#F2A31B;
  --gold-gross:#C27F0A;
  --rot:#B0090D;
  --lila:#5B1A62;
  --blau:#2A3FB0;
  --gruen:#1F5A3A;
  /* feste Logofarben, gleich in hell und dunkel */
  --logo-gruen:#0B2519;
  --logo-lila:#3A0A3F;
  --logo-gold:#F6AF2F;
  --logo-creme:#F9EFDC;
  --f-display:"Alegreya",Georgia,"Times New Roman",serif;
  --f-body:"Archivo","Segoe UI",system-ui,sans-serif;
  --f-script:"bello-pro","Alegreya",Georgia,serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --wrap:1180px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#0A1A12;--surface:#102419;--fg:#F4ECDA;--muted:#B8B4A2;--line:#26392D;
    --ink:#F2A31B;--ink-fg:#0A1A12;--brass:#F2B341;--brass-soft:#3A2B0E;--paper:#14291D;--ok:#86CFA0;--warn:#FF8A7E;
    --gold-gross:#F2B341;--rot:#FF8A7E;--lila:#D9A8E0;--blau:#A9B8FF;--gruen:#86CFA0;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0A1A12;--surface:#102419;--fg:#F4ECDA;--muted:#B8B4A2;--line:#26392D;
  --ink:#F2A31B;--ink-fg:#0A1A12;--brass:#F2B341;--brass-soft:#3A2B0E;--paper:#14291D;--ok:#86CFA0;--warn:#FF8A7E;
  --gold-gross:#F2B341;--rot:#FF8A7E;--lila:#D9A8E0;--blau:#A9B8FF;--gruen:#86CFA0;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:16px;line-height:1.6;font-stretch:96%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bg)}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brass);outline-offset:2px;border-radius:6px}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
h1,h2,h3{font-family:var(--f-display);font-weight:700;text-wrap:balance;margin:0;line-height:1.1}
h1{font-size:clamp(44px,6.6vw,80px);letter-spacing:-0.01em;font-weight:500}
h2{font-size:clamp(34px,4.4vw,52px)}
h3{font-size:28px}
p{margin:0}
b,strong{font-weight:600}
.eyebrow{font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--brass)}
.lead{font-size:19px;color:var(--muted);max-width:58ch}

/* Kopf */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:1px solid var(--line)}
.bar{display:flex;align-items:center;gap:24px;min-height:72px;flex-wrap:wrap;padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-family:var(--f-display);font-weight:700;font-size:30px;color:var(--fg)}
.brand .k{color:var(--brass)}
.kopf-nav{display:flex;gap:20px;flex-wrap:wrap;margin-left:auto}
.kopf-nav a{text-decoration:none;font-weight:600;color:var(--muted);font-size:16px;padding:6px 0}
.kopf-nav a:hover{color:var(--fg)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:0 22px;border-radius:999px;font-weight:600;font-size:16px;text-decoration:none;border:2px solid var(--ink);cursor:pointer;background:transparent}
.btn-solid{background:var(--ink);color:var(--ink-fg)}
.btn-solid:hover{filter:brightness(1.12)}
.btn-ghost{color:var(--fg)}
.btn-ghost:hover{background:var(--surface)}
.btn[disabled]{opacity:.45;cursor:not-allowed;filter:none}
@media (max-width:820px){.kopf-nav{display:none}.bar .btn{margin-left:auto}}
/* Zehn Links (seit dem Thekenblick): etwas enger, damit der Kopf ab 1180 px einzeilig bleibt */
@media (min-width:821px){.kopf-nav{gap:14px}.kopf-nav a{font-size:15px}}
@media (min-width:821px) and (max-width:1179px){.kopf-nav{gap:11px}.kopf-nav a{font-size:14.5px}}

/* Hero */
.hero{padding-block:64px 72px}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.hero-copy{display:flex;flex-direction:column;gap:24px;min-width:0}
.hero h1 em{font-style:normal;color:var(--gold-gross);font-family:var(--f-script);font-weight:400}
.hero-ctas{display:flex;gap:12px;flex-wrap:wrap}
.trust{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:15px}
.trust span{display:inline-flex;align-items:center;gap:6px}
.trust svg{color:var(--ok)}
.hero-crest{display:flex;justify-content:center}
.hero-crest img{width:min(100%,460px);height:auto}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr;gap:32px}.hero-crest{order:-1}.hero-crest img{width:min(80%,320px)}}

/* Abschnitte */
section{padding-block:80px}
.sec-head{display:flex;flex-direction:column;gap:14px;margin-bottom:44px;max-width:760px}
.band{background:var(--surface);border-block:1px solid var(--line)}

/* Demo */
.demo-grid{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:48px;align-items:start}
.phone{background:var(--surface);border:10px solid var(--fg);border-radius:40px;height:720px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 30px 60px -30px rgba(15,30,22,.5);min-width:0}
.phone-top{display:flex;justify-content:center;padding-block:10px 6px}
.phone-top span{width:90px;height:6px;border-radius:3px;background:var(--line)}
.screen{flex:1;overflow-y:auto;padding:4px 18px 18px;display:flex;flex-direction:column;gap:14px;min-height:0}
.screen-foot{border-top:1px solid var(--line);padding:12px 16px 16px;display:flex;gap:10px;background:var(--surface)}
.screen-foot .btn{flex:1;min-height:48px;padding:0 14px;font-size:15px}
@media (max-width:860px){.demo-grid{grid-template-columns:1fr}.phone{height:660px;border-width:8px;border-radius:30px;max-width:420px;width:100%;margin:0 auto}}

.mail-meta{font-size:13px;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:10px;display:flex;flex-direction:column;gap:2px}
.mail-meta b{color:var(--fg)}
.shop{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.1}
.small{font-size:14px;color:var(--muted)}
.prod{border:1px solid var(--line);border-radius:14px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.prod-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.prod-name{font-weight:700;line-height:1.3}
.prod-price{font-family:var(--f-mono);font-weight:500;white-space:nowrap;font-variant-numeric:tabular-nums}
.prod-meta{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.allerg{font-size:12.5px;color:var(--muted)}
.badge{display:inline-flex;align-items:center;font-size:12px;font-weight:700;padding:2px 9px;border-radius:999px;background:var(--brass-soft);color:var(--fg)}
.badge.warn{background:transparent;border:1.5px solid var(--warn);color:var(--warn)}
.add{min-height:40px;border-radius:999px;border:2px solid var(--ink);background:var(--ink);color:var(--ink-fg);font-weight:600;font-size:14px;padding:0 14px;cursor:pointer}
.stepper{display:inline-flex;align-items:center;border:2px solid var(--ink);border-radius:999px;overflow:hidden}
.stepper button{width:40px;height:38px;border:0;background:transparent;font-size:20px;font-weight:700;cursor:pointer}
.stepper button:hover{background:var(--bg)}
.stepper output{min-width:28px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1.5px solid var(--line);border-radius:10px;overflow:hidden}
.seg button{border:0;border-right:1.5px solid var(--line);background:transparent;padding:8px 4px;font-size:12.5px;font-weight:600;line-height:1.2;cursor:pointer;min-height:44px}
.seg button:last-child{border-right:0}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg)}
.total{display:flex;justify-content:space-between;font-weight:700;font-size:18px;border-top:2px solid var(--fg);padding-top:10px;font-variant-numeric:tabular-nums}
.label{font-weight:700;font-size:15px}
.opts{display:flex;flex-direction:column;gap:8px}
.opt{display:flex;gap:12px;align-items:flex-start;text-align:left;border:2px solid var(--line);border-radius:12px;padding:12px;background:var(--paper);cursor:pointer;width:100%}
.opt[aria-pressed="true"]{border-color:var(--ink);background:var(--surface);box-shadow:inset 0 0 0 1px var(--ink)}
.opt[disabled]{opacity:.5;cursor:not-allowed}
.opt .dot{flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);margin-top:2px}
.opt[aria-pressed="true"] .dot{border-color:var(--ink);background:radial-gradient(var(--ink) 0 45%,transparent 50%)}
.opt b{display:block}
.opt span{font-size:14px;color:var(--muted)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{min-height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line);background:var(--paper);font-size:14px;font-weight:600;cursor:pointer}
.chip[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg);border-color:var(--ink)}
.chip[disabled]{opacity:.4;cursor:not-allowed;text-decoration:line-through}
.sum{display:flex;flex-direction:column;gap:4px;font-size:14px}
.sum div{display:flex;justify-content:space-between;gap:12px}
.sum span:last-child{text-align:right;color:var(--muted)}
.done{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding-top:8px}
.done svg{color:var(--ok)}
.code{font-family:var(--f-mono);font-size:36px;letter-spacing:.3em;font-weight:500;padding:10px 18px 10px 26px;border:2px dashed var(--brass);border-radius:12px}

.side{display:flex;flex-direction:column;gap:28px;min-width:0}
.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.steps li{display:flex;gap:14px;align-items:baseline;padding:10px 12px;border-radius:10px;color:var(--muted)}
.steps li .n{font-family:var(--f-mono);font-size:13px;min-width:22px}
.steps li b{color:var(--muted);font-weight:700}
.steps li.on{background:var(--surface);color:var(--fg);border:1px solid var(--line)}
.steps li.on b{color:var(--fg)}
.steps li.past b{color:var(--fg)}
.ticket{background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:12px;font-family:var(--f-mono);font-size:14px;box-shadow:0 16px 34px -26px rgba(15,30,22,.5)}
.ticket-head{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;font-family:var(--f-body)}
.ticket-head strong{font-family:var(--f-display);font-size:25px;font-weight:700}
.status{font-family:var(--f-body);font-size:13px;font-weight:700;padding:3px 10px;border-radius:999px;border:1.5px solid var(--muted);color:var(--muted)}
.status.new{border-color:var(--ok);color:var(--ok)}
.trow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;border-bottom:1px dashed var(--line)}
.trow span:last-child{text-align:right;color:var(--muted)}
.tnote{font-family:var(--f-body);font-size:14px;color:var(--warn);font-weight:600}
.demo-hint{font-size:14px;color:var(--muted)}

/* Module */
.module{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;padding-block:44px;border-top:1px solid var(--line)}
.module-title{display:flex;flex-direction:column;gap:12px;min-width:0}
.module-title .num{font-family:var(--f-script);font-weight:400;font-size:68px;line-height:.95;color:var(--m,var(--brass))}
.module-title p{color:var(--muted)}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;list-style:none;margin:0;padding:0}
.feat li{display:flex;flex-direction:column;gap:4px;min-width:0}
.feat b{font-size:18px}
.feat span{color:var(--muted);font-size:16px}
@media (max-width:860px){.module{grid-template-columns:1fr;gap:28px}.feat{grid-template-columns:1fr}}

/* Branchen */
.trades-foot{margin-top:20px;font-size:14px;color:var(--muted)}

.rules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.rules div{display:flex;flex-direction:column;gap:8px;min-width:0}
.rules p{color:var(--muted)}
@media (max-width:860px){.rules{grid-template-columns:1fr;gap:28px}}

.paket .amount{font-family:var(--f-display);font-weight:700;font-size:40px;line-height:1}
.paket .amount small{font-family:var(--f-body);font-weight:600;font-size:16px;color:var(--muted)}
.paket ul{margin:0;padding-left:20px;color:var(--muted);display:flex;flex-direction:column;gap:6px}
.paket .btn{margin-top:auto}

.contact{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px}
.contact-info{display:flex;flex-direction:column;gap:18px;min-width:0}
.contact-info dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0}
.contact-info dt{font-weight:700}
.contact-info dd{margin:0;color:var(--muted);user-select:all}
form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:28px;min-width:0}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field.full{grid-column:1/-1}
label{font-weight:700;font-size:15px}
input,select,textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--bg);border:1.5px solid var(--line);border-radius:8px;padding:10px 12px;min-height:46px;width:100%}
input:focus,select:focus,textarea:focus{border-color:var(--ink);outline:none}
textarea{min-height:110px;resize:vertical}
.form-msg{grid-column:1/-1;font-weight:600;color:var(--ok)}
@media (max-width:860px){.contact{grid-template-columns:1fr}form{grid-template-columns:1fr}}

footer{border-top:1px solid var(--line);padding-block:32px 40px;color:var(--muted);font-size:15px}
.foot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;align-items:center}
.foot nav{display:flex;gap:20px;flex-wrap:wrap;margin:0}
.foot nav a{text-decoration:none;font-weight:600;padding:6px 0}

/* ---------------------------------------------------------------
   Ergänzungen für die ASP.NET-Umsetzung
   --------------------------------------------------------------- */

/* Ersatz für die Inline-Styles der Vorlage (CSP ohne 'unsafe-inline') */
.ticket-label{margin-bottom:10px}
.mail-intro{margin-top:6px}
.prod-name .small{font-weight:400}
.ticket .small{font-family:var(--f-body)}
.form-msg.is-error{color:var(--warn)}

/* Fehlermeldung im Demo-Telefon */
.screen-msg{font-size:14px;font-weight:600;color:var(--warn)}

/* Honigtopf im Kontaktformular: für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}

/* Pflicht-Haken im Kontaktformular (Anfrage als Unternehmer, § 14 BGB) */
.haken{display:flex;align-items:flex-start;gap:12px;font-weight:600;line-height:1.45;cursor:pointer}
.haken input{flex:none;width:22px;height:22px;min-height:0;margin:1px 0 0;padding:0;accent-color:var(--ink);cursor:pointer}
.haken input[aria-invalid="true"]{outline:2px solid var(--warn);outline-offset:2px}

/* Impressum, Datenschutz, Fehlerseiten */
.legal{padding-block:64px 80px}
.legal h1{font-size:clamp(34px,4.4vw,52px);font-weight:700}
.legal-body{display:flex;flex-direction:column;gap:10px;max-width:760px}
.legal-body h2{font-size:28px}
.legal-body h2:not(:first-child){margin-top:22px}
.legal-body p{color:var(--muted)}

/* ---------------------------------------------------------------
   Branchen, Fotos, Module, Pakete (Logofarben)
   --------------------------------------------------------------- */
.abrechnung[hidden]{display:none}

/* Branchen-Umschalter im Hero */
.branchenwahl{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;margin:0;border:1.5px solid var(--line);border-radius:999px;background:var(--surface);align-self:flex-start}
.branchenwahl a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:0 16px;border-radius:999px;text-decoration:none;font-weight:600;font-size:15px;color:var(--muted)}
.branchenwahl a:hover{color:var(--fg);background:var(--bg)}
.branchenwahl a[aria-current="page"]{background:var(--ink);color:var(--ink-fg)}
@media (max-width:520px){.branchenwahl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:18px;align-self:stretch}}

/* Hero-Bild: Mosaik auf der Übersicht, Foto mit Siegel auf Branchenseiten */
.mosaik{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;min-width:0}
.mosaik-kachel{position:relative;display:block;border-radius:18px;overflow:hidden;aspect-ratio:1/1;text-decoration:none;background:var(--brass-soft)}
.mosaik-kachel img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}
.mosaik-kachel:hover img{transform:scale(1.05)}
.mosaik-kachel span{position:absolute;background:var(--logo-gruen);color:var(--logo-creme);font-weight:700;font-size:14px;padding:4px 12px;border-radius:999px}
.mosaik-kachel:nth-of-type(1) span{left:10px;top:10px}
.mosaik-kachel:nth-of-type(2) span{right:10px;top:10px}
.mosaik-kachel:nth-of-type(3) span{left:10px;bottom:10px}
.mosaik-kachel:nth-of-type(4) span{right:10px;bottom:10px}
.mosaik-siegel{position:absolute;left:50%;top:50%;width:44%;height:auto;transform:translate(-50%,-50%);filter:drop-shadow(0 12px 20px rgba(0,0,0,.35));pointer-events:none}
.hero-foto{position:relative;min-width:0;margin-bottom:24px}
.hero-foto>img:first-child{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;background:var(--brass-soft);box-shadow:0 30px 60px -30px rgba(15,30,22,.5)}
.hero-siegel{position:absolute;left:-26px;bottom:-30px;width:150px;height:auto;filter:drop-shadow(0 10px 18px rgba(0,0,0,.35))}
@media (max-width:900px){
  .mosaik,.hero-foto{order:-1;width:100%;max-width:460px;margin-inline:auto}
  .hero-siegel{width:96px;left:-6px;bottom:-22px}
}

/* Branchen-Kacheln (Übersicht) */
.branchen-kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.branche-kachel{display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--fg);transition:transform .2s ease,box-shadow .2s ease}
.branche-kachel:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(15,30,22,.45)}
.branche-kachel img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;background:var(--brass-soft)}
.branche-kachel-text{display:flex;flex-direction:column;gap:8px;padding:18px 20px 20px;flex:1}
.branche-kachel-name{font-family:var(--f-display);font-weight:700;font-size:28px;line-height:1.1}
.branche-kachel-liste{font-size:14px;color:var(--muted)}
.branche-kachel-mehr{margin-top:auto;padding-top:6px;font-weight:700;color:var(--brass)}
@media (max-width:1060px){.branchen-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.branchen-kacheln{grid-template-columns:1fr}}

/* Highlights und Galerie der Branchenseite */
.highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.highlight{display:flex;flex-direction:column;min-width:0;background:var(--bg);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.highlight img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;background:var(--brass-soft)}
.highlight-text{display:flex;flex-direction:column;gap:8px;padding:18px 20px 22px}
.highlight h3{font-size:24px}
.highlight p{color:var(--muted);font-size:15.5px}
.galerie{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.galerie li{min-width:0}
.galerie img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:var(--brass-soft)}
@media (max-width:960px){.highlights{grid-template-columns:repeat(2,minmax(0,1fr))}.galerie{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.highlights{grid-template-columns:1fr}.galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}}

/* Module: jede Farbe des Siegels steht für ein Modul */
.m-laden{--m:var(--gold-gross)}
.m-treue{--m:var(--rot)}
.m-werbung{--m:var(--lila)}
.m-assistent{--m:var(--blau)}
.m-betrieb{--m:var(--gruen)}
.module-title img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;margin-top:10px;border-radius:14px;border-bottom:5px solid var(--m);background:var(--brass-soft)}
.feat b::before{content:"";display:inline-block;width:9px;height:9px;margin-right:9px;border-radius:50%;background:var(--m,var(--gold));vertical-align:.1em}
@media (max-width:420px){.module-title .num{font-size:56px}}

/* Reservierung */
.spotlight{--m:var(--rot);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.spotlight-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:24px;border-bottom:6px solid var(--rot);background:var(--brass-soft)}
.spotlight-text{display:flex;flex-direction:column;gap:18px;min-width:0}
.spotlight .feat{margin-top:10px}
@media (max-width:860px){.spotlight{grid-template-columns:1fr;gap:32px}}

/* Dunkelgrüner Abschnitt wie die Scheibe im Siegel */
.band-tief{background:var(--logo-gruen);color:var(--logo-creme);border-block:3px solid var(--logo-gold);--fg:var(--logo-creme);--muted:#CFC6AE;--brass:var(--logo-gold);--line:#24442F}
.band-tief h3{color:var(--logo-gold)}

/* Fuß */
footer{background:var(--logo-gruen);color:#CFC6AE;border-top:3px solid var(--logo-gold);--brass:var(--logo-gold)}
footer nav a{color:var(--logo-creme)}
footer nav a:hover{color:var(--logo-gold)}

/* Pakete */
.abrechnung{display:inline-flex;gap:4px;padding:4px;margin-bottom:40px;border:1.5px solid var(--line);border-radius:999px;background:var(--bg)}
.abrechnung button{min-height:42px;padding:0 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:600;cursor:pointer}
.abrechnung button[aria-pressed="true"]{background:var(--ink);color:var(--ink-fg)}
.abrechnung-spar{margin-left:6px;font-size:12px;font-weight:700;color:var(--rot)}
.abrechnung button[aria-pressed="true"] .abrechnung-spar{color:inherit}
.pakete{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;align-items:stretch;padding-top:14px}
.paket{position:relative;display:flex;flex-direction:column;gap:14px;min-width:0;padding:28px 22px 24px;background:var(--surface);border:1px solid var(--line);border-radius:16px}
.paket h3{font-size:26px}
.paket-unter{margin-top:-8px;font-size:15px;color:var(--muted)}
.paket .amount{font-size:38px}
.paket-jahr{font-size:14px;color:var(--muted);min-height:2.6em}
.paket ul{list-style:none;padding:0;font-size:15px}
.paket li{position:relative;padding-left:22px}
.paket li::before{content:"";position:absolute;left:2px;top:.45em;width:11px;height:6px;border-left:2px solid var(--ok);border-bottom:2px solid var(--ok);transform:rotate(-45deg)}
.paket.bestseller{border:2px solid var(--lila);box-shadow:0 24px 44px -26px rgba(58,10,63,.55);transform:translateY(-10px)}
.ribbon{position:absolute;top:-15px;left:50%;transform:translateX(-50%);padding:6px 26px;background:var(--logo-lila);color:var(--logo-gold);font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;clip-path:polygon(0 0,100% 0,calc(100% - 12px) 50%,100% 100%,0 100%,12px 50%)}
.garantie{display:flex;gap:18px;align-items:center;margin-top:44px;padding:22px 26px;border-radius:16px;background:var(--brass-soft);color:var(--fg)}
.garantie svg{flex:none;color:var(--ok)}
.preise-fuss{margin-top:26px;font-size:15px;color:var(--muted);text-align:center;text-wrap:balance}
.preise-fuss strong{color:var(--fg)}
@media (max-width:1180px){.pakete{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:34px}}
@media (max-width:860px){.pakete{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pakete{grid-template-columns:1fr}.paket.bestseller{transform:none}.garantie{flex-direction:column;align-items:flex-start}}

/* ---------------------------------------------------------------
   Wirkung: Animationen, Ticker, Vorschauen, Regler, Vorteile, Aktionen
   --------------------------------------------------------------- */

/* Einblenden beim Scrollen (Klasse „js“ setzt wirkung.js im Kopf) */
.js .zeigen{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .zeigen.sichtbar{opacity:1;transform:none}
.js .zeigen-gruppe>*{opacity:0;transform:translateY(26px) scale(.98);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .zeigen-gruppe.sichtbar>*{opacity:1;transform:none}
.zeigen-gruppe.sichtbar>*:nth-child(2){transition-delay:.08s}
.zeigen-gruppe.sichtbar>*:nth-child(3){transition-delay:.16s}
.zeigen-gruppe.sichtbar>*:nth-child(4){transition-delay:.24s}
.zeigen-gruppe.sichtbar>*:nth-child(5){transition-delay:.32s}
.zeigen-gruppe.sichtbar>*:nth-child(6){transition-delay:.4s}
.zeigen-gruppe.sichtbar>*:nth-child(n+7){transition-delay:.46s}

/* Hero: leuchtende Farbflächen in Logofarben, schwebende Live-Meldungen */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before,.hero::after{content:"";position:absolute;z-index:-1;border-radius:50%;filter:blur(70px);opacity:.45;pointer-events:none}
.hero::before{width:520px;height:520px;right:-120px;top:-160px;background:radial-gradient(circle,var(--gold) 0,transparent 65%);animation:schweben 16s ease-in-out infinite alternate}
.hero::after{width:460px;height:460px;left:-180px;bottom:-200px;background:radial-gradient(circle,var(--lila) 0,transparent 65%);opacity:.22;animation:schweben 19s ease-in-out infinite alternate-reverse}
@keyframes schweben{from{transform:translate(0,0) scale(1)}to{transform:translate(-60px,50px) scale(1.15)}}
.hero-bild{position:relative;min-width:0}
.live{position:absolute;right:-14px;top:18px;z-index:2;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;width:min(300px,70%)}
.live li{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:14px;background:var(--surface);color:var(--fg);font-size:14px;font-weight:600;line-height:1.3;box-shadow:0 18px 36px -18px rgba(15,30,22,.55);border:1px solid var(--line);transition:opacity .45s ease,transform .45s ease}
.live li:nth-child(n+3){display:none}
.live li:nth-child(2){opacity:.88;transform:scale(.96) translateX(10px)}
.live li.geht{opacity:0;transform:translateY(-14px) scale(.96)}
.live-punkt{flex:none;width:10px;height:10px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 0 rgba(47,107,69,.5);animation:puls 1.8s ease-out infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(47,107,69,.45)}100%{box-shadow:0 0 0 12px rgba(47,107,69,0)}}
@media (max-width:900px){.live{right:6px;top:auto;bottom:-18px;width:min(280px,80%)}.live li:nth-child(2){display:none}}

/* Buttons mit Glanz */
.btn{position:relative;overflow:hidden;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}
.btn:hover{transform:translateY(-2px)}
.btn-solid{box-shadow:0 10px 24px -14px rgba(15,51,36,.8)}
.btn-solid::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35) 45%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn-solid:hover::after{transform:translateX(120%)}
.btn-gold{background:var(--logo-gold);border-color:var(--logo-gold);color:#1A1203}
.btn .pfeil{transition:transform .2s ease}
.btn:hover .pfeil{transform:translateX(4px)}

/* Live-Ticker unter dem Hero */
.ticker{overflow:hidden;background:var(--logo-lila);color:var(--logo-creme);border-block:2px solid var(--logo-gold);padding-block:12px}
.ticker-spur{display:flex;width:max-content;animation:ticker 38s linear infinite}
.ticker:hover .ticker-spur{animation-play-state:paused}
.ticker ul{display:flex;list-style:none;margin:0;padding:0}
.ticker li{display:flex;align-items:center;gap:12px;padding:0 26px;white-space:nowrap;font-weight:600;font-size:15px}
.ticker li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--logo-gold)}
.ticker-label{flex:none;align-self:center;margin-right:8px;padding:3px 12px;border-radius:999px;background:var(--logo-gold);color:var(--logo-lila);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
@keyframes ticker{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* Animierte Zahlen */
.zahlen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:56px}
.zahl{padding:24px 22px;border-radius:18px;background:var(--surface);border:1px solid var(--line);text-align:center}
.zahl b{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5vw,60px);line-height:1;color:var(--gold-gross);font-variant-numeric:tabular-nums}
.zahl span{display:block;margin-top:8px;color:var(--muted);font-size:15px}
@media (max-width:760px){.zahlen{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Vorteile */
.vorteile{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.vorteil{display:flex;gap:16px;align-items:flex-start;padding:22px;border-radius:16px;background:var(--surface);border:1px solid var(--line);transition:transform .2s ease,box-shadow .2s ease}
.vorteil:hover{transform:translateY(-4px);box-shadow:0 18px 36px -24px rgba(15,30,22,.45)}
.vorteil-icon{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:var(--brass-soft);color:var(--m,var(--gold-gross))}
.vorteil h3{font-size:22px;margin-bottom:6px}
.vorteil p{color:var(--muted);font-size:15.5px}
@media (max-width:960px){.vorteile{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.vorteile{grid-template-columns:1fr}}

/* Aktionen und Boni */
.aktionen{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:56px}
.aktion{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:26px 22px 22px;border-radius:18px;color:var(--logo-creme);overflow:hidden;background:var(--logo-gruen);border:2px solid var(--logo-gold)}
.aktion::after{content:"";position:absolute;right:-40px;top:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(246,175,47,.35),transparent 70%)}
.aktion.lila{background:var(--logo-lila)}
.aktion.rot{background:#6A0622}
.aktion.blau{background:#18257C}
.aktion-marke{align-self:flex-start;padding:3px 10px;border-radius:999px;background:var(--logo-gold);color:#1A1203;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.aktion h3{color:var(--logo-gold);font-size:26px}
.aktion p{color:#E9E0CB;font-size:15px}
.aktion .btn{margin-top:auto;align-self:flex-start;border-color:var(--logo-gold);color:var(--logo-creme)}
.aktion .btn:hover{background:rgba(255,255,255,.08)}
@media (max-width:1060px){.aktionen{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.aktionen{grid-template-columns:1fr}}

/* Regler (Grillplaner, Rechner) */
.planer{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
.regler-feld{display:flex;flex-direction:column;gap:8px;margin-bottom:22px}
.regler-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.regler-kopf output{font-family:var(--f-display);font-weight:700;font-size:28px;color:var(--gold-gross);font-variant-numeric:tabular-nums}
input[type="range"]{-webkit-appearance:none;appearance:none;width:100%;min-height:32px;padding:0;border:0;background:transparent;cursor:pointer}
input[type="range"]::-webkit-slider-runnable-track{height:8px;border-radius:999px;background:linear-gradient(90deg,var(--gold) 0,var(--gold) var(--anteil,50%),var(--line) var(--anteil,50%))}
input[type="range"]::-moz-range-track{height:8px;border-radius:999px;background:var(--line)}
input[type="range"]::-moz-range-progress{height:8px;border-radius:999px;background:var(--gold)}
input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none;width:26px;height:26px;margin-top:-9px;border-radius:50%;background:var(--ink);border:3px solid var(--logo-gold);box-shadow:0 4px 10px rgba(0,0,0,.25)}
input[type="range"]::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:var(--ink);border:3px solid var(--logo-gold)}
input[type="range"]:focus-visible{outline:3px solid var(--brass);outline-offset:4px}
.ergebnis{position:relative;padding:28px;border-radius:20px;background:var(--surface);border:2px solid var(--gold);box-shadow:0 26px 50px -30px rgba(15,30,22,.55)}
.ergebnis-gross{font-family:var(--f-display);font-weight:700;font-size:clamp(40px,5vw,56px);line-height:1;color:var(--gold-gross);font-variant-numeric:tabular-nums}
.ergebnis-titel{font-family:var(--f-display);font-weight:700;font-size:28px;margin-bottom:6px}
.ergebnis ul{list-style:none;margin:16px 0;padding:0;display:flex;flex-direction:column;gap:8px}
.ergebnis li{display:flex;justify-content:space-between;gap:12px;padding-bottom:8px;border-bottom:1px dashed var(--line)}
.ergebnis li span:last-child{font-family:var(--f-mono);color:var(--muted);white-space:nowrap}
.ergebnis .small{margin-top:10px}
.ergebnis.wackeln{animation:wackeln .35s ease}
@keyframes wackeln{30%{transform:scale(1.015)}100%{transform:none}}
@media (max-width:860px){.planer{grid-template-columns:1fr}}

/* Vorschauen in den Modulen */
.vorschau{margin-top:22px}
.monitor{position:relative;padding:12px;border-radius:14px;background:#111;box-shadow:0 22px 40px -24px rgba(0,0,0,.7)}
.monitor::after{content:"";position:absolute;left:50%;bottom:-16px;width:90px;height:16px;transform:translateX(-50%);background:#2A2A2A;clip-path:polygon(18% 0,82% 0,100% 100%,0 100%)}
.monitor-bild{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:6px;background:var(--logo-gruen)}
.folie{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:6px;padding:6% 8%;color:var(--logo-creme);opacity:0;animation:folien 12s infinite}
.folie:nth-child(2){animation-delay:4s;background:var(--logo-lila)}
.folie:nth-child(3){animation-delay:8s;background:#6A0622}
.folie small{color:var(--logo-gold);font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:11px}
.folie b{font-family:var(--f-script);font-weight:400;font-size:clamp(26px,3.4vw,38px);line-height:1.05;color:var(--logo-gold)}
.folie span{font-size:14px}
@keyframes folien{0%{opacity:0;transform:scale(1.04)}4%,30%{opacity:1;transform:none}36%,100%{opacity:0}}
.chat{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:18px;background:#E9E3D6;border:1px solid var(--line)}
.blase{max-width:85%;padding:9px 13px;border-radius:14px;font-size:14.5px;line-height:1.35;color:#16201B;box-shadow:0 2px 4px rgba(0,0,0,.08)}
.blase.kunde{align-self:flex-end;background:#D7F5C9;border-bottom-right-radius:4px}
.blase.mk{align-self:flex-start;background:#FFFFFF;border-bottom-left-radius:4px}
.blase small{display:block;margin-bottom:2px;font-size:11px;font-weight:700;color:var(--blau)}
.js .chat .blase{opacity:0;transform:translateY(10px)}
.chat.sichtbar .blase{opacity:1;transform:none;transition:opacity .4s ease,transform .4s ease}
.chat.sichtbar .blase:nth-child(2){transition-delay:.9s}
.chat.sichtbar .blase:nth-child(3){transition-delay:1.8s}
.chat.sichtbar .blase:nth-child(4){transition-delay:2.7s}
.chat.sichtbar .blase:nth-child(5){transition-delay:3.6s}
.chat.sichtbar .blase:nth-child(6){transition-delay:4.5s}
.stempel{padding:20px;border-radius:18px;background:var(--surface);border:2px dashed var(--rot)}
.stempel-kopf{display:flex;justify-content:space-between;gap:10px;font-weight:700;margin-bottom:12px}
.stempel-felder{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.stempel-felder span{aspect-ratio:1/1;border-radius:50%;border:2px solid var(--line);display:grid;place-items:center}
.stempel-felder span.voll{border-color:var(--rot);background:var(--rot)}
.stempel-felder span.voll::after{content:"";width:40%;height:22%;border-left:3px solid #fff;border-bottom:3px solid #fff;transform:rotate(-45deg) translate(1px,-2px)}
.js .stempel-felder span.voll{transform:scale(.3);opacity:0}
.stempel.sichtbar .stempel-felder span.voll{transform:none;opacity:1;transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .2s}
.stempel.sichtbar .stempel-felder span:nth-child(2){transition-delay:.1s}
.stempel.sichtbar .stempel-felder span:nth-child(3){transition-delay:.2s}
.stempel.sichtbar .stempel-felder span:nth-child(4){transition-delay:.3s}
.stempel.sichtbar .stempel-felder span:nth-child(5){transition-delay:.4s}
.stempel.sichtbar .stempel-felder span:nth-child(6){transition-delay:.5s}
.stempel.sichtbar .stempel-felder span:nth-child(7){transition-delay:.6s}
.stempel.sichtbar .stempel-felder span:nth-child(8){transition-delay:.7s}
.stempel p{margin-top:12px;color:var(--muted);font-size:14.5px}

/* CTA-Abschnitt und mobile CTA-Leiste */
.cta-band{background:linear-gradient(120deg,var(--logo-gruen) 0,#14402B 55%,var(--logo-lila) 120%);color:var(--logo-creme);text-align:center}
.cta-band h2{color:var(--logo-creme)}
.cta-band h2 em{font-style:normal;font-family:var(--f-script);font-weight:400;color:var(--logo-gold)}
.cta-band .lead{color:#E2D9C3;margin-inline:auto}
.cta-band .sec-head{align-items:center;margin-inline:auto}
.cta-band .hero-ctas{justify-content:center}
.cta-band .btn-ghost{color:var(--logo-creme);border-color:var(--logo-creme)}
.cta-leiste{position:fixed;left:0;right:0;bottom:0;z-index:30;display:none;gap:10px;padding:10px max(16px,env(safe-area-inset-left,0px)) calc(10px + env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -10px 30px -20px rgba(0,0,0,.5);transform:translateY(110%);transition:transform .3s ease}
.cta-leiste .btn{flex:1;min-height:46px}
.cta-leiste.an{transform:none}
@media (max-width:820px){.cta-leiste:not([hidden]){display:flex}footer{padding-bottom:90px}}

@media (prefers-reduced-motion: reduce){
  .ticker-spur{animation:none;flex-wrap:wrap}
  .folie{animation:none}.folie:first-child{opacity:1}
  .hero::before,.hero::after{animation:none}
}
.seg.seg-zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.seg.seg-zwei button{font-size:15px}

/* Funktionslisten oben ausrichten, auch wenn die Titelspalte mit Foto und Vorschau höher ist */
.module .feat,.spotlight .feat{align-content:start}

/* ===============================================================
   Siegel-Grafik, Farbe und Eye Candy (Backlog B6)
   Vorgabe des Inhabers: nur Firmenfarben und Logo, eigene Bilder.
   Farben ausschließlich aus dem Siegel: Dunkelgrün #0B2519/#1F5A3A, Gold #F6AF2F/#F2A31B/#C27F0A,
   Brotbraun #9A6510, Lila #3A0A3F/#5B1A62, Wurstrot #B0090D, Messerblau #2A3FB0, Creme #F9EFDC/#FBE8C2, Weiß
   (dazu die Dunkel-Varianten der Tokens oben). Verläufe nur zwischen diesen Farben, sonst Transparenzstufen.
   Grafiken (wwwroot/img/grafik): Funkel-Stern, Ähre, Krone, Strahlenkranz, gezackter Siegelrand (Plakette,
   Zacken), Funkel-Muster. Zeichen im Markup: Views/Home/_Zeichen.cshtml. Dekoration ist aria-hidden.
   Bewegung nur ohne prefers-reduced-motion (globale Regel oben schaltet Animationen ab).
   =============================================================== */
:root{
  --ok:#1F5A3A;
  --regenbogen:linear-gradient(90deg,#F6AF2F 0%,#B0090D 25%,#5B1A62 50%,#2A3FB0 75%,#1F5A3A 100%);
  --folie:linear-gradient(105deg,#9A6510 0%,#C27F0A 28%,#F2A31B 44%,#C27F0A 60%,#9A6510 100%);
  --folie-hell:linear-gradient(105deg,#F6AF2F 0%,#F6AF2F 32%,#F9EFDC 46%,#F6AF2F 60%,#F6AF2F 100%);
  --gold-rand:linear-gradient(135deg,#F9EFDC 0%,#F6AF2F 30%,#F2A31B 60%,#C27F0A 100%);
  --schatten-weich:0 24px 48px -30px rgba(11,37,25,.6);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--folie:var(--folie-hell);--schatten-weich:0 24px 48px -26px rgba(0,0,0,.8)}}
:root[data-theme="dark"]{--folie:var(--folie-hell);--schatten-weich:0 24px 48px -26px rgba(0,0,0,.8)}

/* Feste Modul- und Branchenfarben für gefüllte Flächen (gleich in hell und dunkel, weiße Schrift lesbar) */
.m-laden{--m-fest:#C27F0A}
.m-treue{--m-fest:#B0090D}
.m-werbung{--m-fest:#5B1A62}
.m-assistent{--m-fest:#2A3FB0}
.m-betrieb{--m-fest:#1F5A3A}
.b-baeckerei,.branchenwahl a[href$="/baeckerei"]{--b:var(--gold-gross);--b-fest:#9A6510;--b-zeichen:url(../img/grafik/zeichen-baeckerei.svg)}
.b-metzgerei,.branchenwahl a[href$="/metzgerei"]{--b:var(--rot);--b-fest:#B0090D;--b-zeichen:url(../img/grafik/zeichen-metzgerei.svg)}
.b-bio-hof,.branchenwahl a[href$="/bio-hof"]{--b:var(--gruen);--b-fest:#1F5A3A;--b-zeichen:url(../img/grafik/zeichen-bio-hof.svg)}
.b-dorfladen,.branchenwahl a[href$="/dorfladen"]{--b:var(--lila);--b-fest:#5B1A62;--b-zeichen:url(../img/grafik/zeichen-dorfladen.svg)}

/* Zeichen (Inline-SVG aus _Zeichen.cshtml) */
.zeichen{display:inline-block;flex:none;width:1.25em;height:1.25em;vertical-align:-.2em}

/* ---------- Überschriften: Funkel-Sterne und Gold-Folie ---------- */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";flex:none;width:13px;height:13px;background:currentColor;-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat;animation:funkel-puls 3.6s ease-in-out infinite}
@keyframes funkel-puls{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:.7}}
h2 em,.cta-band h2 em{
  font-style:normal;font-family:var(--f-script);font-weight:400;font-size:1.04em;
  color:var(--gold-gross);background:var(--folie);background-size:250% 100%;background-position:100% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  padding:0 .1em .06em;margin:0 -.04em;-webkit-box-decoration-break:clone;box-decoration-break:clone;
  animation:folie 7s ease-in-out infinite;
}
@keyframes folie{0%{background-position:100% 0}55%,100%{background-position:-60% 0}}
h2 .m-laden,h2 .m-treue,h2 .m-werbung,h2 .m-assistent,h2 .m-betrieb{color:var(--m)}
@media (forced-colors: active){h2 em,.cta-band h2 em,.hero-akzent>span,.aktion h3{background:none;-webkit-text-fill-color:currentColor;color:CanvasText}}

/* ---------- Funkel-Sterne (Partial _Funkeln) ---------- */
.funkeln{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.funkeln~.wrap{position:relative;z-index:1}
.funkeln i{position:absolute;width:var(--g,16px);aspect-ratio:1/1;background:var(--f,var(--logo-gold));-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat;opacity:0;animation:funkeln 5s ease-in-out infinite var(--v,0s)}
.funkeln i:nth-child(1){left:3%;top:14%;--g:22px;--v:.2s}
.funkeln i:nth-child(2){left:46%;top:7%;--g:12px;--v:1.6s;--f:var(--lila)}
.funkeln i:nth-child(3){left:94%;top:10%;--g:18px;--v:3.1s}
.funkeln i:nth-child(4){left:89%;top:70%;--g:26px;--v:.9s;--f:var(--rot)}
.funkeln i:nth-child(5){left:6%;top:82%;--g:14px;--v:2.4s;--f:var(--lila)}
.funkeln i:nth-child(6){left:58%;top:93%;--g:16px;--v:3.8s}
.funkeln i:nth-child(7){left:72%;top:46%;--g:10px;--v:4.4s;--f:var(--blau)}
.funkeln-hell i{--f:var(--logo-gold)}
.funkeln-hell i:nth-child(2n){--f:var(--logo-creme)}
.funkeln-dezent i{--f:var(--gold)}
@keyframes funkeln{0%,100%{opacity:0;transform:scale(.3) rotate(0)}45%{opacity:.95;transform:scale(1) rotate(60deg)}60%{opacity:.8;transform:scale(.9) rotate(80deg)}}
@media (prefers-reduced-motion: reduce){.funkeln i{opacity:.5;transform:none}}

/* ---------- Kopf: Glas, Modulfarben, Lesefortschritt ---------- */
header{background:color-mix(in srgb,var(--bg) 86%,transparent);-webkit-backdrop-filter:saturate(1.5) blur(12px);backdrop-filter:saturate(1.5) blur(12px)}
.kopf-fortschritt{position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--regenbogen);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.kopf-nav a{position:relative}
.kopf-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:3px;background:var(--m,var(--gold));transform:scaleX(0);transition:transform .25s ease}
.kopf-nav a:hover::after,.kopf-nav a[aria-current="page"]::after{transform:scaleX(1)}
.brand img{transition:transform .5s cubic-bezier(.3,1.5,.5,1)}
.brand:hover img{transform:rotate(-10deg) scale(1.08)}
@media (max-width:440px){
  .bar{gap:10px;min-height:60px}
  .brand{font-size:23px;gap:7px}
  .brand img{width:42px;height:auto}
  .bar .btn{min-height:40px;padding:0 14px;font-size:14px}
}

/* ---------- Buttons: Leuchten und Glanz ---------- */
.btn-leuchten{animation:leuchten 2.8s ease-in-out infinite}
@keyframes leuchten{0%,100%{box-shadow:0 0 0 0 rgba(246,175,47,.6),0 12px 30px -12px rgba(246,175,47,.8)}50%{box-shadow:0 0 0 12px rgba(246,175,47,0),0 12px 30px -12px rgba(246,175,47,.8)}}
.btn-gold{color:var(--logo-gruen)}
.btn-gold::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 20%,rgba(249,239,220,.6) 45%,transparent 70%);transform:translateX(-120%);transition:transform .7s ease}
.btn-gold:hover::after{transform:translateX(120%)}

/* ---------- Kippen beim Zeigen (wirkung.js setzt --kx/--ky) ---------- */
[data-kippen]{--kx:0deg;--ky:0deg;--kh:0px}
[data-kippen],.js .zeigen-gruppe.sichtbar>[data-kippen]{transform:perspective(900px) translateY(var(--kh)) rotateX(var(--ky)) rotateY(var(--kx))}
[data-kippen]:hover{--kh:-6px}
.js .zeigen-gruppe.sichtbar.fertig>*:nth-child(n){transition-delay:0s}
.js .zeigen-gruppe.sichtbar.fertig>[data-kippen]{transition:transform .25s ease,box-shadow .3s ease}

/* ---------- Strahlenkranz hinter dem Siegel ---------- */
.siegel-strahlen{position:absolute;aspect-ratio:1/1;background:url(../img/grafik/strahlen.svg) center/contain no-repeat;pointer-events:none;animation:drehen 60s linear infinite}
@keyframes drehen{to{rotate:360deg}}
@keyframes siegel-schweben{from{translate:0 0;rotate:-2deg}to{translate:0 -8px;rotate:2deg}}
@keyframes wippen{from{translate:0 0}to{translate:0 -7px}}

/* ---------- Hero ---------- */
.hero{padding-block:72px 84px;background:
  radial-gradient(42% 55% at 78% 30%,color-mix(in srgb,var(--gold) 20%,transparent),transparent 70%),
  radial-gradient(35% 45% at 8% 92%,color-mix(in srgb,var(--lila) 14%,transparent),transparent 70%),
  url(../img/grafik/muster-gold.svg) 0 0/180px,var(--bg)}
.hero::before{opacity:.5}
.hero::after{background:radial-gradient(circle,var(--rot) 0,transparent 65%);opacity:.12}
/* Akzent auf dem lila Band wie der Schriftzug im Siegel.
   Prompt 59: Die Schrift (die Tinte, nicht die Zeilenbox) sitzt optisch mittig zwischen den beiden Goldlinien.
   Maße in em der Akzentschrift: Band --ak-band-o unter der Oberkante bis --ak-band-u über der Unterkante, Goldlinien
   --ak-linie vom Bandrand und --ak-dicke dick. Die Innenabstände sind auf Bello gemessen (Oberlänge .79em, ohne
   Unterlänge .08em; mit f, g, p, y, G, P bis .25em, dafür die Klasse „unterlaenge“ aus _Hero.cshtml): je .12em Luft.
   hero.js misst die Tinte in der tatsächlich geladenen Schrift (auch in der Ersatzschrift, wenn Bello nicht lädt)
   und verschiebt nur die Schrift (--ak-dy). Das Band bleibt, wie es ist, nichts springt. */
.hero h1 em.hero-akzent{--ak-band-o:.06;--ak-band-u:.02;--ak-linie:.1;--ak-dicke:.05;position:relative;display:inline-block;isolation:isolate;margin:.14em 0 .06em -.06em;padding:.25em .5em .14em;line-height:1.1;font-size:min(.92em,10vw);white-space:nowrap;color:var(--logo-gold)}
.hero h1 em.hero-akzent.unterlaenge{padding-bottom:.31em}
.hero-akzent>span{display:inline-block;transform:translateY(var(--ak-dy,0em));color:var(--logo-gold);background:var(--folie-hell);background-size:250% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;padding:0 .08em;animation:folie 7s 1.4s ease-in-out infinite}
.ak-sonde{display:inline-block;width:0;height:0;vertical-align:baseline}
.hero-akzent::before,.hero-akzent::after{content:"";position:absolute;pointer-events:none}
.hero-akzent::before{inset:calc(var(--ak-band-o)*1em) 0 calc(var(--ak-band-u)*1em);z-index:-1;border-radius:3px;
  background:linear-gradient(var(--logo-gold),var(--logo-gold)) 0 calc(var(--ak-linie)*1em)/100% calc(var(--ak-dicke)*1em) no-repeat,linear-gradient(var(--logo-gold),var(--logo-gold)) 0 calc(100% - var(--ak-linie)*1em)/100% calc(var(--ak-dicke)*1em) no-repeat,linear-gradient(180deg,var(--lila),var(--logo-lila));
  box-shadow:0 .14em .3em -.12em rgba(58,10,63,.7)}
.hero-akzent::after{inset:.32em -.44em -.16em;z-index:-2;background:var(--logo-lila);clip-path:polygon(0 0,100% 0,calc(100% - .3em) 50%,100% 100%,0 100%,.3em 50%)}
@media (prefers-reduced-motion: no-preference){
  .hero-akzent::before{animation:band-auf .9s .25s cubic-bezier(.2,.8,.2,1) both}
  .hero-akzent::after{animation:band-auf .9s .45s cubic-bezier(.2,.8,.2,1) both}
}
@keyframes band-auf{from{transform:scaleX(0)}to{transform:none}}
@media (max-width:520px){.hero h1 em.hero-akzent{margin-left:.34em}}
.hero .btn-solid{box-shadow:0 14px 30px -14px color-mix(in srgb,var(--ink) 90%,transparent)}
.trust span{padding:6px 12px 6px 10px;border-radius:999px;background:color-mix(in srgb,var(--surface) 75%,transparent);border:1px solid var(--line)}

/* Branchen-Umschalter mit Logo-Zeichen und Branchenfarbe */
.branchenwahl{box-shadow:0 10px 24px -20px rgba(11,37,25,.6)}
.branchenwahl a{gap:7px}
.branchenwahl a::before{content:"";flex:none;width:18px;height:18px;background:var(--b,currentColor);-webkit-mask:var(--b-zeichen) center/contain no-repeat;mask:var(--b-zeichen) center/contain no-repeat;transition:transform .3s cubic-bezier(.3,1.6,.5,1)}
.branchenwahl a:hover{background:color-mix(in srgb,var(--b) 12%,transparent)}
.branchenwahl a:hover::before{transform:rotate(-12deg) scale(1.2)}
.branchenwahl a[aria-current="page"]{background:var(--b-fest);color:var(--b-text,#fff);box-shadow:0 8px 18px -10px var(--b-fest)}
.branchenwahl a[aria-current="page"]::before{background:var(--b-text,var(--logo-gold))}

/* Mosaik der Übersicht: Ken-Burns, Strahlenkranz, schwebendes Siegel */
.mosaik-kachel{border-radius:22px;box-shadow:0 22px 40px -28px rgba(11,37,25,.7)}
.mosaik-kachel img{animation:kenburns 22s ease-in-out infinite alternate}
.mosaik-kachel:nth-of-type(3n+2) img{animation-delay:-6s;transform-origin:20% 30%}
.mosaik-kachel:nth-of-type(3n) img{animation-delay:-11s;transform-origin:70% 80%}
.mosaik-kachel:nth-of-type(4n) img{animation-delay:-16s;transform-origin:80% 20%}
.mosaik-kachel:hover img{animation-play-state:paused}
@keyframes kenburns{from{transform:scale(1.02)}to{transform:scale(1.14) translate(-2%,-1%)}}
.mosaik-kachel span{display:inline-flex;align-items:center;gap:6px;background:var(--b-fest);color:var(--b-text,#fff);box-shadow:0 6px 14px -6px rgba(11,37,25,.6)}
.mosaik-kachel span .zeichen{width:16px;height:16px;color:var(--b-text,var(--logo-gold))}
.mosaik-strahlen{left:50%;top:50%;width:82%;translate:-50% -50%;z-index:1;opacity:.85}
.mosaik-siegel{z-index:2;animation:siegel-schweben 5s ease-in-out infinite alternate}

/* Branchenseite: Foto mit farbigem Rahmen, Polaroids, Siegel mit Strahlen */
.hero-foto{isolation:isolate}
.hero-rahmen{position:absolute;inset:22px -18px -18px 22px;z-index:-1;border-radius:30px;background:url(../img/grafik/muster.svg) 0 0/140px,linear-gradient(135deg,var(--logo-gold),var(--b-fest,var(--lila)) 55%,var(--logo-lila));rotate:3deg;box-shadow:var(--schatten-weich)}
.hero-foto-bild{display:block;border-radius:24px;overflow:hidden;background:var(--brass-soft);box-shadow:0 30px 60px -30px rgba(11,37,25,.55)}
.hero-foto-bild img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;animation:kenburns 24s ease-in-out infinite alternate}
.hero-polaroid{position:absolute;z-index:2;width:150px;padding:7px 7px 9px;background:#fff;border-radius:5px;box-shadow:0 18px 30px -14px rgba(11,37,25,.6);animation:wippen 6s ease-in-out infinite alternate}
.hero-polaroid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px}
.hero-polaroid>span{display:block;margin-top:5px;font-family:var(--f-script);font-size:15px;line-height:1.1;color:var(--logo-gruen);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero-polaroid.hp1{left:-34px;top:-30px;rotate:-8deg}
.hero-polaroid.hp2{right:-30px;bottom:-40px;rotate:7deg;animation-delay:-3s}
.hero-strahlen{left:-90px;bottom:-110px;width:330px;z-index:1;opacity:.9}
.hero-siegel{z-index:3;animation:siegel-schweben 5s ease-in-out infinite alternate}
.live{z-index:4}
@media (max-width:900px){
  .hero-polaroid{width:112px}
  .hero-polaroid>span{font-size:13px}
  .hero-polaroid.hp1{left:-8px;top:-24px}
  .hero-polaroid.hp2{right:-6px;bottom:-30px}
  .hero-rahmen{inset:16px -8px -12px 14px}
  .hero-strahlen{left:-50px;bottom:-70px;width:210px}
}

/* ---------- Gezackter Rand wie das Siegel: Ticker, dunkle Bänder, CTA, Fuß ---------- */
.ticker{position:relative;z-index:3;overflow:hidden;overflow-x:clip;overflow-y:visible;border-block:0;padding-block:16px;background:url(../img/grafik/muster.svg) 0 0/180px,var(--logo-lila)}
.ticker::before,.ticker::after,.band-tief::before,.band-tief::after,.cta-band::before,.cta-band::after,footer::before{
  content:"";position:absolute;left:0;right:0;height:14px;z-index:3;pointer-events:none;background:url(../img/grafik/zacken-lila.svg) 0 0/24px 14px repeat-x}
.ticker::before,.band-tief::before,.cta-band::before,footer::before{top:-13px}
.ticker::after,.band-tief::after,.cta-band::after{bottom:-13px;transform:scaleY(-1)}
.band-tief::before,.band-tief::after,.cta-band::before,footer::before{background-image:url(../img/grafik/zacken-gruen.svg)}
.ticker-spur{animation-duration:46s}
.ticker li::before{width:13px;height:13px;border-radius:0;background:var(--logo-gold);-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat}
.ticker-label{box-shadow:0 0 0 3px rgba(246,175,47,.25)}

/* ---------- Branchen: Farbflächen, Kacheln mit Plakette ---------- */
#branchen{position:relative;padding-top:96px;background:
  radial-gradient(40% 50% at 0% 0%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%),
  radial-gradient(36% 48% at 100% 20%,color-mix(in srgb,var(--lila) 11%,transparent),transparent 70%),
  radial-gradient(40% 40% at 60% 100%,color-mix(in srgb,var(--rot) 8%,transparent),transparent 70%),var(--surface)}
.branche-kachel{position:relative;border:0;border-radius:24px;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--b) 9%,var(--surface)));box-shadow:0 0 0 1px color-mix(in srgb,var(--b) 22%,var(--line)),0 26px 44px -34px rgba(11,37,25,.7)}
.branche-kachel:hover{box-shadow:0 0 0 2px var(--b),0 34px 60px -30px color-mix(in srgb,var(--b-fest) 70%,transparent)}
.branche-kachel-bild{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--brass-soft)}
.branche-kachel-bild img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.branche-kachel:hover .branche-kachel-bild img{transform:scale(1.08)}
.branche-plakette{--pk:66px;--m-fest:var(--b-fest);z-index:1;margin:-38px 0 -18px 18px}
/* Plakette: Siegelrand in Gold, innen die Modul- bzw. Branchenfarbe */
.branche-plakette,.plakette{display:inline-grid;place-items:center;width:var(--pk,64px);aspect-ratio:1/1;flex:none;position:relative;isolation:isolate;color:#fff}
.branche-plakette::before,.plakette::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--gold-rand);-webkit-mask:url(../img/grafik/plakette.svg) center/contain no-repeat;mask:url(../img/grafik/plakette.svg) center/contain no-repeat;transition:rotate .8s cubic-bezier(.3,1.4,.5,1);filter:drop-shadow(0 6px 8px rgba(11,37,25,.3))}
.branche-plakette::after,.plakette::after{content:"";position:absolute;inset:14%;z-index:-1;border-radius:50%;background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--m-fest,var(--logo-gruen)) 72%,#fff),var(--m-fest,var(--logo-gruen)) 62%);box-shadow:inset 0 0 0 2px rgba(249,239,220,.55)}
.branche-plakette .zeichen,.plakette .zeichen{width:46%;height:46%}
.branche-kachel:hover .branche-plakette::before,a:hover>.plakette::before,.plakette:hover::before{rotate:40deg}
.branche-kachel-name{color:var(--fg)}
.branche-kachel-mehr{color:var(--b);display:inline-flex;align-items:center;gap:6px}
.branche-kachel-mehr span{transition:transform .2s}
.branche-kachel:hover .branche-kachel-mehr span{transform:translateX(5px)}
.branche-kachel::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--b)}

/* Highlights der Branchenseiten: Karten in den Farben des Siegels */
.highlight{--h:var(--gold-gross);--h-fest:#C27F0A;position:relative;border:0;border-radius:22px;background:linear-gradient(180deg,var(--surface) 40%,color-mix(in srgb,var(--h) 10%,var(--surface)));box-shadow:0 0 0 1px color-mix(in srgb,var(--h) 22%,var(--line)),0 24px 40px -32px rgba(11,37,25,.65)}
.highlight:nth-child(5n+2){--h:var(--rot);--h-fest:#B0090D}
.highlight:nth-child(5n+3){--h:var(--lila);--h-fest:#5B1A62}
.highlight:nth-child(5n+4){--h:var(--blau);--h-fest:#2A3FB0}
.highlight:nth-child(5n){--h:var(--gruen);--h-fest:#1F5A3A}
.highlight-bild{position:relative;display:block;overflow:hidden;background:var(--brass-soft)}
.highlight-bild img{transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.highlight:hover .highlight-bild img{transform:scale(1.07)}
.highlight-funkel{position:absolute;left:14px;bottom:-1px;display:grid;place-items:center;width:46px;height:30px;border-radius:14px 14px 0 0;background:var(--surface);color:var(--h)}
.highlight-funkel .zeichen{width:20px;height:20px;animation:funkel-puls 3.6s ease-in-out infinite}
.highlight::after{content:"";position:absolute;left:20px;right:20px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--h)}
.highlight:hover{box-shadow:0 0 0 2px var(--h),0 30px 50px -30px color-mix(in srgb,var(--h-fest) 65%,transparent)}

/* ---------- Fotoleiste: Polaroids, endlos, gegenläufig (nur eigene Fotos) ---------- */
.fotoleiste{display:flex;flex-direction:column;gap:14px;margin-top:56px;padding-block:18px 10px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.fotoleiste-reihe{overflow:hidden;padding-block:14px 18px}
.fotoleiste-band{display:flex;width:max-content;animation:leiste 90s linear infinite}
.fotoleiste-reihe.rueckwaerts .fotoleiste-band{animation-direction:reverse;animation-duration:100s}
.fotoleiste:hover .fotoleiste-band{animation-play-state:paused}
.fotoleiste-spur{display:flex;gap:24px;list-style:none;margin:0;padding:0 24px 0 0}
.polaroid{--dreh:-2.5deg;flex:none;width:250px;padding:10px 10px 12px;background:#fff;border-radius:6px;box-shadow:0 18px 30px -18px rgba(11,37,25,.55),0 0 0 1px rgba(11,37,25,.05);rotate:var(--dreh);transition:rotate .35s ease,scale .35s ease}
.polaroid:nth-child(4n+2){--dreh:2deg}
.polaroid:nth-child(4n+3){--dreh:-1deg}
.polaroid:nth-child(4n){--dreh:3deg}
.polaroid:hover{rotate:0deg;scale:1.07}
.polaroid img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:2px;background:var(--brass-soft)}
.polaroid-text{display:block;margin-top:8px;font-family:var(--f-script);font-size:19px;line-height:1.15;color:var(--logo-gruen);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@keyframes leiste{to{transform:translateX(-50%)}}
@media (max-width:620px){.polaroid{width:180px;padding:7px 7px 9px}.polaroid-text{font-size:16px}.fotoleiste-spur{gap:16px;padding-right:16px}.fotoleiste{margin-top:40px}}
@media (prefers-reduced-motion: reduce){.fotoleiste-reihe{overflow-x:auto}.fotoleiste-spur[aria-hidden]{display:none}}

/* ---------- Vorher/Nachher-Regler ---------- */
.vn-abschnitt{position:relative;background:
  radial-gradient(45% 60% at 100% 0%,color-mix(in srgb,var(--gruen) 12%,transparent),transparent 70%),
  radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),var(--bg)}
.vn{--pos:50%;position:relative;border-radius:30px;touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:ew-resize;box-shadow:0 0 0 3px var(--logo-gold),0 40px 80px -40px rgba(11,37,25,.75)}
.vn-buehne{position:relative;border-radius:30px;overflow:hidden}
.vn-seite{padding:70px 26px 28px}
.vn-ohne{position:relative;z-index:1}
.vn-mit{position:absolute;inset:0;z-index:2;clip-path:inset(0 0 0 var(--pos))}
/* ohne: Papier in Creme und Brotbraun */
.vn-ohne{color:var(--logo-gruen);background:repeating-linear-gradient(0deg,rgba(154,101,16,.07) 0 1px,transparent 1px 28px),linear-gradient(160deg,#F9EFDC,#FBE8C2)}
/* mit: Siegelgrün bis Bandlila, Goldlicht */
.vn-mit{color:var(--logo-creme);background:radial-gradient(50% 70% at 85% 0%,rgba(246,175,47,.32),transparent 70%),radial-gradient(40% 60% at 0% 100%,rgba(176,9,13,.22),transparent 70%),url(../img/grafik/muster.svg) 0 0/180px,linear-gradient(135deg,#0B2519,#1F5A3A 50%,#3A0A3F)}
.vn-marke{position:absolute;top:20px;display:inline-flex;align-items:center;gap:8px;padding:7px 16px;border-radius:999px;font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.vn-ohne .vn-marke{left:20px;background:rgba(154,101,16,.16);color:#9A6510}
.vn-mit .vn-marke{right:20px;background:var(--logo-gold);color:var(--logo-gruen);box-shadow:0 8px 20px -8px rgba(246,175,47,.8)}
.vn-marke .zeichen{width:15px;height:15px}
.vn-szenen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}
.vn-szene{display:flex;flex-direction:column;align-items:center;gap:14px;min-width:0}
.vn-bild{position:relative;width:100%;height:230px;display:grid;place-items:center}
.vn-titel{font-family:var(--f-display);font-weight:700;font-size:23px;line-height:1.1;text-align:center}
.vn-ohne .vn-titel{color:#9A6510}
.vn-mit .vn-titel{color:var(--logo-gold)}
.vn-pinnwand{border-radius:12px;border:6px solid rgba(154,101,16,.55);background:rgba(154,101,16,.14)}
.vn-notiz{position:absolute;width:48%;padding:12px 10px;font-family:var(--f-script);font-size:17px;line-height:1.12;color:var(--logo-gruen);background:#fff;box-shadow:0 8px 12px -6px rgba(11,37,25,.35)}
.vn-notiz::before{content:"";position:absolute;left:50%;top:-5px;width:11px;height:11px;margin-left:-5px;border-radius:50%;background:#B0090D;box-shadow:0 2px 2px rgba(11,37,25,.35)}
.vn-notiz.n1{left:5%;top:7%;rotate:-7deg;background:#FBE8C2}
.vn-notiz.n2{right:4%;top:12%;rotate:6deg}
.vn-notiz.n3{left:9%;bottom:8%;rotate:4deg;background:#F9EFDC}
.vn-notiz.n4{right:6%;bottom:5%;rotate:-4deg;background:#FBE8C2}
.vn-hoerer{display:grid;place-items:center;width:104px;height:104px;border-radius:50%;background:rgba(154,101,16,.16);color:#9A6510;box-shadow:inset 0 0 0 3px rgba(154,101,16,.3);animation:klingeln 2.4s ease-in-out infinite}
.vn-hoerer .zeichen{width:50px;height:50px}
.vn-ring{position:absolute;font-family:var(--f-script);font-size:26px;color:#B0090D;animation:ring 1.2s ease-in-out infinite}
.vn-ring.r1{left:12%;top:16%;rotate:-14deg}
.vn-ring.r2{right:12%;top:24%;rotate:12deg;animation-delay:.6s}
.vn-verpasst{position:absolute;left:50%;bottom:16px;translate:-50% 0;padding:6px 12px;border-radius:10px;background:#fff;color:#B0090D;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 1.5px rgba(176,9,13,.4),0 6px 10px -6px rgba(11,37,25,.4)}
.vn-verpasst.v2{bottom:46px;rotate:-3deg;opacity:.7}
@keyframes klingeln{0%,40%,100%{rotate:0deg}5%,15%,25%{rotate:-12deg}10%,20%,30%{rotate:12deg}}
@keyframes ring{0%,100%{opacity:.25;scale:.9}50%{opacity:1;scale:1.08}}
.vn-kiste{align-content:end;padding-bottom:6px}
.vn-uhr{position:absolute;right:8%;top:6%;padding:6px 12px;border-radius:999px;background:rgba(154,101,16,.16);color:#9A6510;font-family:var(--f-mono);font-size:14px;font-weight:500}
.vn-brote{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:center;width:72%;margin-bottom:-18px;color:#9A6510}
.vn-brote .zeichen{width:58px;height:58px;margin:-8px -6px;fill:var(--logo-gold)}
.vn-brote .zeichen:nth-child(2){rotate:-14deg}
.vn-brote .zeichen:nth-child(4){rotate:10deg}
.vn-korb{display:block;width:80%;height:46px;border-radius:8px 8px 14px 14px;background:linear-gradient(180deg,#C27F0A,#9A6510);box-shadow:inset 0 5px 0 rgba(249,239,220,.25),0 10px 16px -10px rgba(11,37,25,.5)}
.vn-karte{width:100%;max-width:300px;display:flex;flex-direction:column;gap:8px;padding:16px 16px 14px;border-radius:18px;background:#fff;color:var(--logo-gruen);box-shadow:0 24px 40px -22px rgba(0,0,0,.7),0 0 0 2px rgba(246,175,47,.55)}
.vn-karte-kopf{display:flex;align-items:center;gap:8px;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#9A6510;padding-bottom:6px;border-bottom:1px dashed rgba(154,101,16,.3)}
.vn-karte-kopf .zeichen{width:16px;height:16px;color:#C27F0A}
.vn-zeile{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:600;line-height:1.25}
.vn-zeile .zeichen{width:22px;height:22px;padding:4px;border-radius:50%;background:#1F5A3A;color:#fff;stroke-width:3.2}
.vn-gespraech{display:flex;flex-direction:column;justify-content:center;gap:10px;padding-inline:4%}
.vn-blase{max-width:86%;padding:10px 13px;border-radius:16px;font-size:14px;line-height:1.3;color:var(--logo-gruen);box-shadow:0 10px 18px -12px rgba(0,0,0,.6)}
.vn-blase.kunde{align-self:flex-end;background:#FBE8C2;border-bottom-right-radius:4px}
.vn-blase.mk{align-self:flex-start;background:#fff;border-bottom-left-radius:4px}
.vn-kanaele{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:4px}
.vn-kanaele span{display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:999px;background:rgba(246,175,47,.16);color:var(--logo-gold);font-size:12.5px;font-weight:700;box-shadow:inset 0 0 0 1.5px rgba(246,175,47,.5)}
.vn-kanaele .zeichen{width:13px;height:13px}
.vn-balken{display:grid;grid-template-columns:96px minmax(0,1fr);align-items:center;gap:10px;font-size:13.5px;font-weight:600}
.vn-balken i{display:block;height:13px;border-radius:999px;background:linear-gradient(90deg,#F6AF2F,#C27F0A);width:86%;transform-origin:0 50%}
.vn-balken.b2 i{width:66%;background:linear-gradient(90deg,#B0090D,#5B1A62)}
.vn-balken.b3 i{width:44%;background:linear-gradient(90deg,#2A3FB0,#5B1A62)}
.vn.sichtbar .vn-balken i{animation:wachsen 1.2s .3s cubic-bezier(.2,.8,.2,1) both}
.vn.sichtbar .vn-balken.b2 i{animation-delay:.45s}
.vn.sichtbar .vn-balken.b3 i{animation-delay:.6s}
@keyframes wachsen{from{transform:scaleX(0)}}
.vn-tipp{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:12.5px;font-weight:600;color:#5B1A62}
.vn-tipp .zeichen{width:14px;height:14px;color:#C27F0A}
.vn-griff{position:absolute;top:0;bottom:0;left:var(--pos);width:0;z-index:3;pointer-events:none}
.vn-griff::before{content:"";position:absolute;top:0;bottom:0;left:-2px;width:4px;background:linear-gradient(180deg,#F9EFDC,#F6AF2F 50%,#F9EFDC);box-shadow:0 0 16px 2px rgba(246,175,47,.75)}
.vn-knopf{position:absolute;left:0;top:50%;translate:-50% -50%;display:grid;place-items:center;width:60px;height:60px;border-radius:50%;background:var(--logo-gruen);color:var(--logo-gold);border:4px solid var(--logo-gold);box-shadow:0 12px 26px -8px rgba(0,0,0,.6);transition:scale .2s}
.vn-knopf::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(246,175,47,.7);animation:knopf-puls 2.2s ease-out infinite}
@keyframes knopf-puls{from{opacity:1;scale:.8}to{opacity:0;scale:1.35}}
.vn:hover .vn-knopf,.vn.zieht .vn-knopf{scale:1.1}
.vn-regler{position:absolute;left:0;bottom:0;width:1px;height:1px;margin:0;padding:0;min-height:0;border:0;opacity:0;pointer-events:none}
.vn-regler:focus-visible+.vn-griff .vn-knopf{outline:3px solid var(--brass);outline-offset:5px}
.vn-paare{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.vn-paare li{display:flex;flex-direction:column;gap:8px;padding:16px 18px;border-radius:18px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -26px rgba(11,37,25,.6)}
.vn-vorher{font-size:14.5px;color:var(--muted);text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--rot) 70%,transparent);text-decoration-thickness:2px}
.vn-nachher{display:flex;align-items:center;gap:10px;font-weight:700}
.vn-nachher .zeichen{width:32px;height:32px;padding:7px;border-radius:50%;background:var(--logo-gold);color:var(--logo-gruen);stroke-width:3}
@media (max-width:860px){
  .vn-seite{padding:62px 16px 20px}
  .vn-szenen{grid-template-columns:1fr;gap:16px}
  .vn-bild{height:178px;max-width:340px}
  .vn-szene{gap:8px}
  .vn-titel{font-size:20px}
  .vn-notiz{font-size:14.5px;padding:9px 8px}
  .vn-hoerer{width:84px;height:84px}
  .vn-hoerer .zeichen{width:40px;height:40px}
  .vn-marke{top:16px;font-size:11.5px;padding:6px 11px}
  .vn-ohne .vn-marke{left:12px}.vn-mit .vn-marke{right:12px}
  .vn-karte{padding:12px 13px 11px;gap:6px}
  .vn-paare{grid-template-columns:1fr}
}
@media (max-width:400px){.vn-marke{letter-spacing:.04em}.vn-blase{font-size:13px}.vn-zeile{font-size:13px}}

/* ---------- Reservierung ---------- */
.reservierung-abschnitt{background:linear-gradient(180deg,color-mix(in srgb,var(--rot) 7%,var(--bg)),var(--bg) 85%)}
.spotlight-foto{position:relative;isolation:isolate}
.spotlight-rahmen{position:absolute;inset:-16px 22px 26px -16px;z-index:-1;border-radius:30px;background:url(../img/grafik/muster.svg) 0 0/140px,linear-gradient(140deg,#B0090D,#5B1A62 60%,#3A0A3F);rotate:-3deg;box-shadow:var(--schatten-weich)}
.spotlight-bild{display:block;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(11,37,25,.55)}
.spotlight-bild img{border-radius:0;border-bottom:0;transition:transform 1s cubic-bezier(.2,.8,.2,1)}
.spotlight-foto:hover .spotlight-bild img{transform:scale(1.06)}
.spotlight-karte{position:absolute;right:-18px;bottom:28px;z-index:2;display:flex;flex-direction:column;gap:2px;padding:12px 16px 14px;border-radius:16px;background:var(--surface);color:var(--fg);border:1px solid var(--line);box-shadow:0 22px 40px -18px rgba(11,37,25,.6);font-size:14px;animation:wippen 5s ease-in-out infinite alternate}
.spotlight-karte b{font-family:var(--f-display);font-size:19px}
.spotlight-karte-kopf{display:flex;align-items:center;gap:8px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok)}
.spotlight-marke{position:absolute;left:18px;top:18px;z-index:2;display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;background:var(--logo-lila);color:var(--logo-gold);font-weight:700;font-size:13.5px;box-shadow:0 10px 20px -10px rgba(11,37,25,.6)}
.spotlight-marke .zeichen{width:15px;height:15px}
@media (max-width:860px){.spotlight-karte{right:-4px;bottom:16px}.spotlight-rahmen{inset:-10px 10px 18px -8px}}

/* ---------- Merkmal-Karten (Module, Reservierung) ---------- */
.module-abschnitt .feat,.spotlight .feat{gap:14px}
.module-abschnitt .feat li,.spotlight .feat li{padding:16px 18px 17px;border-radius:18px;background:color-mix(in srgb,var(--surface) 86%,transparent);border:1px solid color-mix(in srgb,var(--m) 20%,var(--line));box-shadow:0 12px 26px -24px rgba(11,37,25,.6);transition:box-shadow .25s ease,border-color .25s}
.module-abschnitt .feat li:hover,.spotlight .feat li:hover{border-color:color-mix(in srgb,var(--m) 55%,var(--line));box-shadow:0 18px 32px -22px color-mix(in srgb,var(--m-fest,var(--m)) 70%,transparent)}
.feat b::before{width:13px;height:13px;border-radius:0;background:var(--m,var(--gold));-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat;vertical-align:-.05em}
.feat li:hover b::before{animation:funkel-puls 1.2s ease-in-out}
.feat a{color:var(--m);font-weight:600}

/* ---------- Module: farbige Flächen je Modul, Plaketten mit Logo-Zeichen ---------- */
.modul-plaketten{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;margin:-6px 0 22px}
.modul-plakette{display:flex;flex-direction:column;align-items:center;gap:10px;padding:20px 8px 16px;border-radius:26px;text-decoration:none;background:linear-gradient(180deg,color-mix(in srgb,var(--m) 12%,var(--surface)),var(--surface));border:1px solid color-mix(in srgb,var(--m) 25%,var(--line));box-shadow:0 18px 34px -30px rgba(11,37,25,.6);transition:transform .3s cubic-bezier(.3,1.5,.5,1),box-shadow .3s}
.js .zeigen-gruppe.sichtbar>.modul-plakette:hover{transform:translateY(-6px) rotate(-1.5deg)}
.modul-plakette:hover{box-shadow:0 26px 40px -26px color-mix(in srgb,var(--m-fest) 75%,transparent)}
.modul-plakette .plakette{--pk:86px}
.modul-plakette-name{font-family:var(--f-script);font-size:27px;line-height:1;color:var(--m)}
.module-abschnitt .module{position:relative;isolation:isolate;overflow:hidden;margin-top:26px;padding:48px clamp(20px,4vw,52px);border-top:0;border-radius:34px;
  background:
    radial-gradient(55% 70% at 100% 0%,color-mix(in srgb,var(--m) 17%,transparent),transparent 70%),
    linear-gradient(160deg,color-mix(in srgb,var(--m) 10%,var(--surface)),color-mix(in srgb,var(--m) 4%,var(--bg)));
  box-shadow:0 0 0 1px color-mix(in srgb,var(--m) 22%,transparent),0 30px 60px -48px rgba(11,37,25,.7);scroll-margin-top:90px}
.module-abschnitt .module::before{content:"";position:absolute;right:-70px;top:-70px;z-index:-1;width:300px;height:300px;background:var(--m);opacity:.08;-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat;animation:drehen 80s linear infinite}
.module-abschnitt .m-treue.module,.module-abschnitt .m-assistent.module{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
.module-abschnitt .m-treue.module .module-title,.module-abschnitt .m-assistent.module .module-title{order:2}
.module-title .num{display:flex;align-items:center;gap:14px;font-size:64px}
.modul-zeichen{--pk:66px}
.modul-foto{display:block;margin-top:10px;border-radius:20px;overflow:hidden;box-shadow:0 0 0 4px var(--surface),0 0 0 6px var(--m),0 24px 40px -26px rgba(11,37,25,.7);rotate:-1.5deg;transition:rotate .4s ease}
.m-treue .modul-foto,.m-assistent .modul-foto{rotate:1.5deg}
.module:hover .modul-foto{rotate:0deg}
.module-title .modul-foto img{margin-top:0;border-radius:0;border-bottom:0;transition:transform 1.2s cubic-bezier(.2,.8,.2,1)}
.module:hover .modul-foto img{transform:scale(1.06)}
@media (max-width:960px){.modul-plaketten{display:flex;flex-wrap:wrap;justify-content:center}.modul-plakette{flex:0 1 calc(33.333% - 11px)}}
@media (max-width:860px){
  .module-abschnitt .m-treue.module,.module-abschnitt .m-assistent.module{grid-template-columns:1fr}
  .module-abschnitt .m-treue.module .module-title,.module-abschnitt .m-assistent.module .module-title{order:0}
  .module-abschnitt .module{padding:32px 18px;border-radius:26px}
}
@media (max-width:520px){
  .modul-plaketten{gap:10px}.modul-plakette{flex-basis:calc(33.333% - 7px);padding:14px 4px 12px;border-radius:20px}
  .modul-plakette .plakette{--pk:60px}.modul-plakette-name{font-size:19px}
  .module-title .num{font-size:50px;gap:10px}.modul-zeichen{--pk:52px}
}
/* Vorschauen in den Modulen, nur Logofarben */
.stempel{background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--rot) 6%,var(--surface)));box-shadow:0 18px 34px -26px rgba(11,37,25,.6)}
.monitor{background:var(--logo-gruen);box-shadow:0 0 0 2px rgba(246,175,47,.5),0 22px 40px -24px rgba(11,37,25,.8)}
.monitor::after{background:#1F5A3A}
.folie{background-image:url(../img/grafik/muster.svg);background-size:150px}
.folie:nth-child(1){background-color:#1F5A3A}
.folie:nth-child(3){background-color:#B0090D}
.chat{background:#F9EFDC;border-color:color-mix(in srgb,var(--gold) 35%,transparent)}
.blase{color:var(--logo-gruen);box-shadow:0 2px 6px rgba(11,37,25,.12)}
.blase.kunde{background:#FBE8C2}
.blase.mk{background:#fff}

/* ---------- Demo und Grillplaner ---------- */
.demo-abschnitt{position:relative;background:
  radial-gradient(40% 50% at 15% 60%,color-mix(in srgb,var(--gold) 16%,transparent),transparent 70%),
  radial-gradient(35% 45% at 95% 15%,color-mix(in srgb,var(--blau) 9%,transparent),transparent 70%),var(--surface)}
.phone{position:relative;box-shadow:0 0 0 2px var(--logo-gold),0 40px 70px -30px rgba(11,37,25,.6),0 0 90px -20px color-mix(in srgb,var(--gold) 55%,transparent)}
.steps li.on{background:linear-gradient(90deg,color-mix(in srgb,var(--gold) 16%,var(--surface)),var(--surface));border-color:color-mix(in srgb,var(--gold) 45%,var(--line))}
.steps li.on .n{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--logo-gruen);color:var(--logo-gold)}
.ticket{border-top:4px solid var(--gold)}
.glut{position:relative;background:
  radial-gradient(45% 60% at 100% 100%,color-mix(in srgb,var(--rot) 14%,transparent),transparent 70%),
  radial-gradient(40% 55% at 70% 100%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%),var(--surface)}

/* Ergebnis-Karten mit umlaufendem Rand in den Logofarben */
@property --winkel{syntax:"<angle>";inherits:false;initial-value:0deg}
.ergebnis-glanz{border:3px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--winkel),#F6AF2F,#B0090D,#5B1A62,#2A3FB0,#1F5A3A,#F6AF2F) border-box;animation:umlauf 6s linear infinite;box-shadow:0 30px 60px -34px rgba(11,37,25,.6)}
@keyframes umlauf{to{--winkel:360deg}}
.rechner-abschnitt{background:
  radial-gradient(40% 55% at 0% 0%,color-mix(in srgb,var(--blau) 10%,transparent),transparent 70%),
  radial-gradient(40% 50% at 100% 100%,color-mix(in srgb,var(--gruen) 10%,transparent),transparent 70%),var(--surface)}
input[type="range"]::-webkit-slider-runnable-track{background:linear-gradient(90deg,#C27F0A 0,var(--gold) var(--anteil,50%),var(--line) var(--anteil,50%))}

/* ---------- Vorteile: Zahlen als Plaketten mit Siegelrand ---------- */
#vorteile{position:relative;background:
  radial-gradient(35% 40% at 100% 10%,color-mix(in srgb,var(--lila) 10%,transparent),transparent 70%),
  radial-gradient(30% 40% at 0% 60%,color-mix(in srgb,var(--blau) 8%,transparent),transparent 70%),var(--bg)}
.zahlen{gap:24px}
.zahl{display:flex;flex-direction:column;align-items:center;gap:10px;padding:0;background:none;border:0}
.zahl .zahl-plakette{display:grid;margin:0;color:inherit;font-size:inherit}
.zahl-plakette{position:relative;isolation:isolate;display:grid;place-items:center;width:min(100%,196px);aspect-ratio:1/1;transition:scale .35s cubic-bezier(.3,1.6,.5,1)}
.zahl-plakette::before{content:"";position:absolute;inset:0;z-index:-2;background:conic-gradient(from 20deg,#F9EFDC,#F6AF2F,#C27F0A,#F6AF2F,#F9EFDC,#F6AF2F,#C27F0A,#F9EFDC);-webkit-mask:url(../img/grafik/plakette.svg) center/contain no-repeat;mask:url(../img/grafik/plakette.svg) center/contain no-repeat;animation:drehen 40s linear infinite;filter:drop-shadow(0 14px 18px rgba(11,37,25,.35))}
.zahl-plakette::after{content:"";position:absolute;inset:12%;z-index:-1;border-radius:50%;background:url(../img/grafik/muster.svg) 0 0/120px,radial-gradient(circle at 32% 26%,color-mix(in srgb,var(--z) 68%,#fff),var(--z) 62%);box-shadow:inset 0 0 0 3px rgba(249,239,220,.7),inset 0 -14px 24px rgba(11,37,25,.3)}
.zahl:nth-child(2) .zahl-plakette::before{animation-direction:reverse}
.zahl b{color:var(--logo-creme);font-size:clamp(36px,4.4vw,54px);text-shadow:0 3px 0 rgba(11,37,25,.25)}
.zahl>span:last-child{margin-top:0;max-width:18ch;font-weight:600;color:var(--fg)}
.z-gruen{--z:#1F5A3A}.z-lila{--z:#5B1A62}.z-rot{--z:#B0090D}.z-blau{--z:#2A3FB0}
.js .zeigen-gruppe.sichtbar>.zahl:hover .zahl-plakette{scale:1.05}
@media (max-width:760px){.zahlen{row-gap:30px}.zahl-plakette{width:min(100%,150px)}}

.vorteil{position:relative;overflow:hidden;background:linear-gradient(150deg,color-mix(in srgb,var(--m) 9%,var(--surface)),var(--surface) 60%);border-color:color-mix(in srgb,var(--m) 20%,var(--line))}
.vorteil-icon{background:linear-gradient(140deg,color-mix(in srgb,var(--m-fest) 72%,#fff),var(--m-fest));color:#fff;border-radius:16px;rotate:-6deg;box-shadow:0 12px 20px -12px var(--m-fest);transition:rotate .35s cubic-bezier(.3,1.6,.5,1),scale .35s}
.vorteil:hover .vorteil-icon{rotate:4deg;scale:1.1}
.vorteil::after{content:"";position:absolute;right:-24px;bottom:-24px;width:90px;height:90px;background:var(--m);opacity:.07;-webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat;transition:opacity .3s,rotate .6s}
.vorteil:hover::after{opacity:.16;rotate:45deg}

/* Aktionen: Logofarben, Funkel-Muster, Glanz, Logo-Zeichen */
.aktion{--folie:var(--folie-hell);background-image:url(../img/grafik/muster.svg),linear-gradient(160deg,rgba(249,239,220,.08),transparent 50%);background-size:160px,auto;box-shadow:0 26px 44px -30px rgba(11,37,25,.75)}
.aktion.rot{background-color:#B0090D}
.aktion.blau{background-color:#2A3FB0}
.aktion p{color:rgba(249,239,220,.9)}
.aktion-marke{color:var(--logo-gruen)}
.aktion::before{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(249,239,220,.18),transparent);transform:skewX(-18deg);animation:glanzlicht 7s ease-in-out infinite;pointer-events:none}
.aktion:nth-child(2)::before{animation-delay:1.7s}
.aktion:nth-child(3)::before{animation-delay:3.4s}
.aktion:nth-child(4)::before{animation-delay:5.1s}
@keyframes glanzlicht{0%{left:-60%}30%,100%{left:130%}}
.aktion-zeichen{position:absolute;right:14px;top:14px;color:rgba(246,175,47,.85);transition:rotate .5s cubic-bezier(.3,1.6,.5,1)}
.aktion-zeichen .zeichen{width:34px;height:34px}
.aktion:hover .aktion-zeichen{rotate:-14deg}
.aktion h3{background:var(--folie-hell);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:folie 7s ease-in-out infinite}
.aktion-marke{position:relative;padding:4px 14px;border-radius:3px;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 50%,100% 100%,0 100%,8px 50%)}

/* ---------- Grundsätze und dunkle Bänder: Zackenrand, Funkel-Muster, Ähren ---------- */
.band-tief{position:relative;--folie:var(--folie-hell);border-block:0;background:url(../img/grafik/muster.svg) 0 0/180px,radial-gradient(45% 70% at 100% 100%,rgba(91,26,98,.45),transparent 70%),radial-gradient(40% 60% at 0% 0%,rgba(246,175,47,.12),transparent 70%),var(--logo-gruen)}
.grundsaetze .sec-head{align-items:center;text-align:center;margin-inline:auto}
.aehren-titel{display:flex;align-items:center;justify-content:center;gap:16px}
.aehren-titel::before,.aehren-titel::after{content:"";flex:none;width:30px;height:76px;background:url(../img/grafik/aehre.svg) center/contain no-repeat;rotate:-18deg}
.aehren-titel::after{transform:scaleX(-1);rotate:18deg}
.grundsaetze .rules>div{align-items:center;text-align:center;padding:26px 22px 24px;border-radius:24px;background:rgba(249,239,220,.05);border:1px solid rgba(246,175,47,.22)}
.regel-plakette{--pk:78px;--m-fest:#1F5A3A;color:var(--logo-gold);margin-bottom:4px}
.grundsaetze .rules>div:hover .regel-plakette::before{rotate:40deg}
@media (max-width:520px){.aehren-titel{gap:8px}.aehren-titel::before,.aehren-titel::after{width:20px;height:52px}}

/* ---------- Preise: umlaufender Rand für den Bestseller, Krone, Garantie-Plakette ---------- */
.preise-abschnitt{position:relative;background:
  radial-gradient(40% 45% at 50% 30%,color-mix(in srgb,var(--lila) 12%,transparent),transparent 70%),
  radial-gradient(35% 40% at 0% 100%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),var(--surface)}
.paket{--p:var(--gold);box-shadow:0 20px 40px -34px rgba(11,37,25,.6);transition:box-shadow .3s,border-color .3s}
.paket::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:5px;border-radius:0 0 5px 5px;background:var(--p)}
.paket-2{--p:var(--rot)}.paket-3{--p:var(--lila)}.paket-4{--p:var(--blau)}.paket-5{--p:var(--gruen)}
.paket:hover{border-color:color-mix(in srgb,var(--p) 50%,var(--line));box-shadow:0 26px 46px -30px color-mix(in srgb,var(--p) 60%,transparent)}
.paket li::before{border-color:var(--p)}
.paket.bestseller{border:3px solid transparent;background:linear-gradient(var(--surface),var(--surface)) padding-box,conic-gradient(from var(--winkel),#F6AF2F,#5B1A62,#B0090D,#F6AF2F,#5B1A62,#F6AF2F) border-box;animation:umlauf 5s linear infinite;box-shadow:0 30px 60px -28px rgba(58,10,63,.6),0 0 60px -20px rgba(246,175,47,.5)}
.paket.bestseller::before{display:none}
.bestseller-krone{position:absolute;left:50%;top:-58px;width:62px;height:44px;translate:-50% 0;background:url(../img/grafik/krone.svg) center/contain no-repeat;filter:drop-shadow(0 6px 8px rgba(11,37,25,.3));animation:krone-wippen 3s ease-in-out infinite}
@keyframes krone-wippen{0%,100%{rotate:-5deg}50%{rotate:5deg}}
.ribbon{padding:7px 30px;background:linear-gradient(180deg,#5B1A62,#3A0A3F);box-shadow:0 6px 12px -6px rgba(11,37,25,.6)}
.pakete{padding-top:58px}
.garantie{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--brass-soft),color-mix(in srgb,var(--gold) 22%,var(--brass-soft)));border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.garantie-plakette{position:relative;isolation:isolate;flex:none;display:grid;place-items:center;align-content:center;width:92px;aspect-ratio:1/1;color:var(--logo-gold);line-height:1;text-align:center}
.garantie-plakette::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--gold-rand);-webkit-mask:url(../img/grafik/plakette.svg) center/contain no-repeat;mask:url(../img/grafik/plakette.svg) center/contain no-repeat;animation:drehen 30s linear infinite}
.garantie-plakette::after{content:"";position:absolute;inset:13%;z-index:-1;border-radius:50%;background:var(--logo-gruen);box-shadow:inset 0 0 0 2px rgba(249,239,220,.6)}
.garantie-plakette b{font-family:var(--f-display);font-size:30px}
.garantie-plakette small{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}

/* ---------- CTA-Band: Siegel mit Strahlenkranz ---------- */
.cta-band{position:relative;overflow-x:clip;padding-block:84px 100px;background:
  radial-gradient(50% 60% at 50% 0%,rgba(246,175,47,.24),transparent 70%),
  url(../img/grafik/muster.svg) 0 0/180px,
  linear-gradient(180deg,#0B2519 0%,#1F5A3A 45%,#3A0A3F 100%);--folie:var(--folie-hell)}
.cta-band::after{background-image:url(../img/grafik/zacken-lila.svg)}
.cta-band .lead{color:rgba(249,239,220,.88)}
.cta-siegel{position:relative;width:150px;margin:0 auto 22px}
.cta-siegel img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 14px 22px rgba(11,37,25,.5));animation:siegel-schweben 5s ease-in-out infinite alternate}
.cta-siegel .siegel-strahlen{left:50%;top:50%;width:210%;translate:-50% -50%;opacity:.8}
.cta-band .eyebrow{color:var(--logo-gold)}
@media (max-width:620px){.cta-siegel{width:112px}}

/* ---------- Kontakt ---------- */
.kontakt-abschnitt{position:relative;background:
  radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),
  radial-gradient(30% 40% at 100% 0%,color-mix(in srgb,var(--gruen) 10%,transparent),transparent 70%),var(--bg)}
.contact-info dl{gap:12px 16px;align-items:center}
.contact-info dt{position:relative;display:inline-flex;align-items:center;gap:10px}
.contact-info dt::before{content:"";flex:none;width:36px;height:36px;border-radius:50%;background:var(--logo-gruen);box-shadow:inset 0 0 0 1.5px rgba(246,175,47,.6)}
.contact-info dt::after{content:"";position:absolute;left:9px;top:50%;width:18px;height:18px;margin-top:-9px;background:var(--logo-gold);-webkit-mask:url(../img/grafik/zeichen-telefon.svg) center/contain no-repeat;mask:url(../img/grafik/zeichen-telefon.svg) center/contain no-repeat}
.contact-info dt:nth-of-type(2)::after{-webkit-mask-image:url(../img/grafik/zeichen-mail.svg);mask-image:url(../img/grafik/zeichen-mail.svg)}
.contact-info dt:nth-of-type(3)::after{-webkit-mask-image:url(../img/grafik/zeichen-ort.svg);mask-image:url(../img/grafik/zeichen-ort.svg)}
#demo-form{position:relative;border:0;border-radius:24px;box-shadow:0 0 0 1px var(--line),0 40px 70px -46px rgba(11,37,25,.7);overflow:hidden}
#demo-form::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--regenbogen)}
#demo-form input:focus,#demo-form select:focus,#demo-form textarea:focus{border-color:var(--gold-gross);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent)}

/* ---------- Fuß: Siegel, Funkel-Muster, Zackenrand ---------- */
footer{position:relative;margin-top:14px;padding-block:72px 34px;border-top:0;color:rgba(249,239,220,.8);background:url(../img/grafik/muster.svg) 0 0/180px,radial-gradient(45% 70% at 100% 0%,rgba(91,26,98,.5),transparent 70%),radial-gradient(35% 50% at 0% 100%,rgba(246,175,47,.1),transparent 70%),var(--logo-gruen)}
.fuss{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:36px;padding-bottom:36px;border-bottom:1px solid rgba(249,239,220,.14)}
.fuss-marke{display:flex;flex-direction:column;gap:6px;min-width:0}
.fuss-siegel{position:relative;width:104px;margin-bottom:8px}
.fuss-siegel img{position:relative;display:block;width:100%;height:auto;filter:drop-shadow(0 10px 16px rgba(0,0,0,.4))}
.fuss-siegel .siegel-strahlen{left:50%;top:50%;width:200%;translate:-50% -50%;opacity:.5}
.fuss-name{font-family:var(--f-display);font-weight:700;font-size:30px;line-height:1.1;color:var(--logo-creme)}
.fuss-name .k{color:var(--logo-gold)}
.fuss-claim{max-width:34ch}
.fuss-motto{font-family:var(--f-script);font-size:25px;line-height:1.2;color:var(--logo-gold)}
.fuss-spalte{display:flex;flex-direction:column;align-items:flex-start;gap:9px;margin:0;min-width:0}
.fuss-spalte b{margin-bottom:4px;color:var(--logo-gold);font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.fuss-spalte a{color:var(--logo-creme);text-decoration:none;font-weight:500;overflow-wrap:anywhere}
.fuss-spalte a:not(.btn):hover{color:var(--logo-gold)}
.fuss-spalte a[class^="m-"]{display:inline-flex;align-items:center;gap:9px}
.fuss-spalte a[class^="m-"]::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--m-fest);box-shadow:0 0 0 2px rgba(249,239,220,.35)}
.fuss-spalte .fuss-knopf{margin-top:8px;min-height:42px;font-size:15px;color:var(--logo-gruen)}
.foot{padding-top:24px}
.foot nav a{color:var(--logo-creme)}
.fuss-b2b{flex-basis:100%;margin:0 0 4px;font-size:14px;color:rgba(249,239,220,.72)}
@media (max-width:960px){.fuss{grid-template-columns:repeat(3,minmax(0,1fr))}.fuss-marke{grid-column:1/-1}}
@media (max-width:560px){.fuss{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 20px}.fuss-spalte:last-child{grid-column:1/-1}}

/* ---------- Rechtliches: dezent ---------- */
.legal{position:relative;background:radial-gradient(40% 50% at 100% 0%,color-mix(in srgb,var(--gold) 12%,transparent),transparent 70%),var(--bg)}
.legal-body{padding:30px clamp(18px,4vw,40px);border-radius:24px;background:var(--surface);border:1px solid var(--line);box-shadow:0 30px 60px -50px rgba(11,37,25,.6)}

/* ---------- Bewegung reduziert: Endzustände sichtbar ---------- */
@media (prefers-reduced-motion: reduce){
  /* Die globale Regel oben erfasst keine Pseudo-Elemente */
  *::before,*::after{animation:none!important;transition:none!important}
  .hero-akzent>span,h2 em,.aktion h3{background-position:50% 0}
}
@media (max-width:820px){footer{padding-bottom:110px}}
.vorteil-icon .zeichen{width:27px;height:27px}

/* Empfehlungen: Farbfläche und Logo-Zeichen */
#empfehlungen{background:
  radial-gradient(40% 50% at 0% 100%,color-mix(in srgb,var(--rot) 8%,transparent),transparent 70%),
  radial-gradient(35% 45% at 100% 0%,color-mix(in srgb,var(--gold) 14%,transparent),transparent 70%),var(--surface)}
.ef-symbol{border-radius:50%;background:var(--logo-gruen);color:var(--logo-gold);box-shadow:inset 0 0 0 1.5px rgba(246,175,47,.6)}
.ef-symbol .zeichen{width:24px;height:24px}

/* Handy: Funkel-Sterne nicht über Text, Polaroids und Siegel im Bild halten */
@media (max-width:860px){.funkeln i:nth-child(2),.funkeln i:nth-child(7){display:none}}
@media (max-width:900px){
  .hero-polaroid.hp2{top:-24px;bottom:auto;right:-6px}
  .hero-siegel{left:4px}
  .hero-strahlen{left:-46px}
}

/* Drehende Plaketten und Strahlen dürfen keinen waagerechten Überlauf erzeugen */
main,footer{overflow-x:clip}

/* ---------- Bis zu acht Branchen (Supermarkt, Imbiss, Döner kommen dazu) ---------- */
.b-supermarkt,.branchenwahl a[href$="/supermarkt"]{--b:var(--blau);--b-fest:#2A3FB0;--b-zeichen:url(../img/grafik/zeichen-supermarkt.svg)}
.b-imbiss,.branchenwahl a[href$="/imbiss"]{--b:color-mix(in srgb,var(--rot) 70%,var(--lila));--b-fest:color-mix(in srgb,#B0090D 68%,#3A0A3F);--b-zeichen:url(../img/grafik/zeichen-imbiss.svg)}
.b-doener,.branchenwahl a[href$="/doener"]{--b:var(--gold-gross);--b-fest:#C27F0A;--b-text:var(--logo-gruen);--b-zeichen:url(../img/grafik/zeichen-doener.svg)}

/* Umschalter: bei mehr als vier Branchen auf schmalen Bildschirmen eine wischbare Chip-Leiste */
.branchenwahl{max-width:100%;min-width:0}
.branchenwahl:has(>a:nth-child(5)){border-radius:26px}
@media (max-width:900px){
  .branchenwahl:has(>a:nth-child(5)){display:flex;flex-wrap:nowrap;align-self:stretch;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;padding-right:44px;border-radius:999px;
    -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
  .branchenwahl:has(>a:nth-child(5))::-webkit-scrollbar{display:none}
  .branchenwahl:has(>a:nth-child(5)) a{flex:none;scroll-snap-align:start}
}

/* Branchen-Kacheln: flexibel für 4 bis 8 Branchen, letzte Reihe mittig */
.branchen-kacheln{display:flex;flex-wrap:wrap;justify-content:center;gap:20px}
.branche-kachel{flex:1 1 240px;max-width:calc((100% - 60px) / 4)}
@media (max-width:1060px){.branche-kachel{max-width:calc((100% - 20px) / 2)}}
@media (max-width:560px){
  .branchen-kacheln{gap:14px}
  .branche-kachel{flex-basis:100%;max-width:none;flex-direction:row;min-height:156px}
  .branche-kachel-bild{flex:0 0 38%;aspect-ratio:auto}
  .branche-kachel-bild img{height:100%;aspect-ratio:auto}
  .branche-plakette{position:absolute;left:calc(38% - 24px);top:12px;margin:0;--pk:48px}
  .branche-kachel-text{padding:14px 14px 18px 30px;gap:6px}
  .branche-kachel-name{font-size:23px}
  .branche-kachel-liste{display:none}
  .branche-kachel::after{left:auto;right:14px;width:30%}
}

/* Hero-Mosaik: ab fünf Branchen 3 × 3 mit dem Siegel in der Mitte */
.mosaik-mitte{display:none}
.mosaik-9{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.mosaik-9 .mosaik-mitte{display:block;grid-area:2/2}
.mosaik-9 .mosaik-kachel{border-radius:16px}
.mosaik-9 .mosaik-kachel span{left:6px;right:auto;top:auto;bottom:6px;max-width:calc(100% - 12px);padding:3px 9px;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mosaik-9 .mosaik-siegel{width:40%}
.mosaik-frei{display:grid;place-items:center;background:url(../img/grafik/muster.svg) 0 0/120px,radial-gradient(circle at 50% 40%,rgba(246,175,47,.3),transparent 70%),var(--logo-gruen)}
.mosaik-9 .mosaik-kachel.mosaik-frei span,.mosaik-kachel.mosaik-frei span{position:static;flex-direction:column;gap:4px;max-width:none;padding:0;background:none;box-shadow:none;color:var(--logo-gold);font-family:var(--f-script);font-weight:400;font-size:19px;white-space:normal;text-align:center}
.mosaik-frei .zeichen{width:26px;height:26px}
@media (max-width:520px){
  .mosaik-9{gap:6px}
  .mosaik-9 .mosaik-kachel:not(.mosaik-frei) span{font-size:0;gap:0;padding:5px}
  .mosaik-9 .mosaik-kachel:not(.mosaik-frei) span .zeichen{width:15px;height:15px}
  .mosaik-frei span{font-size:15px}
}
@media (max-width:560px){.branche-kachel-mehr{display:block}}

/* Hero-Akzent: lange Texte kleiner, damit das Band in die Spalte passt */
.hero h1 em.hero-akzent.lang{font-size:min(.8em,8.6vw)}
.hero h1 em.hero-akzent.sehr-lang{font-size:min(.68em,7.4vw)}
.hero h1 em.hero-akzent.extra-lang{font-size:min(.58em,6.2vw)}

/* ---------- Eigene Fotos als Illustration: Live-Demo, Grillplaner, CTA, Kontakt, Monitor ---------- */
.prod-top{align-items:center;gap:12px}
.prod-text{flex:1;min-width:0}
.prod-bild{flex:none;display:block;width:58px;height:58px;border-radius:50%;object-fit:cover;background:var(--brass-soft);box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--logo-gold),0 8px 14px -8px rgba(11,37,25,.6)}
.prod-siegel{display:grid;place-items:center;background:radial-gradient(circle at 50% 40%,#1F5A3A,#0B2519)}
.prod-siegel img{width:80%;height:auto}
.prod-bild.klein{width:30px;height:30px;box-shadow:0 0 0 1.5px var(--logo-gold)}
.prod-bild.mini{width:24px;height:24px;box-shadow:0 0 0 1.5px var(--logo-gold)}
.sum-artikel,.trow-artikel{display:inline-flex;align-items:center;gap:8px;min-width:0}
.done-artikel{list-style:none;margin:6px 0 2px;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.done-artikel li{display:flex;flex-direction:column;align-items:center;gap:6px;max-width:96px;font-size:12.5px;font-weight:600;line-height:1.25;text-align:center}
.planer-fotos{position:relative;height:250px;margin-top:8px}
.planer-polaroid{position:absolute;width:240px}
.planer-polaroid.p1{left:2%;top:10px;--dreh:-4deg}
.planer-polaroid.p2{left:44%;top:40px;width:200px;--dreh:5deg}
.cta-band .wrap{position:relative}
.cta-polaroid{position:absolute;z-index:0;width:190px;display:none}
.cta-polaroid.c1{left:0;top:-24px;--dreh:-8deg}
.cta-polaroid.c2{left:60px;top:190px;width:170px;--dreh:5deg}
.cta-polaroid.c3{right:0;top:-18px;--dreh:7deg}
.cta-polaroid.c4{right:56px;top:196px;width:170px;--dreh:-5deg}
.cta-band .sec-head,.cta-siegel{position:relative;z-index:1}
@media (min-width:1100px){.cta-polaroid{display:block}}
.kontakt-polaroid{display:block;width:min(100%,380px);margin-top:10px;--dreh:-2deg}
.monitor .folie{background-size:cover;background-position:center}
.monitor .folie:nth-child(1){background-image:linear-gradient(90deg,rgba(11,37,25,.94) 34%,rgba(11,37,25,.35)),url(../img/fotos/metzgerei-grill-480.webp)}
.monitor .folie:nth-child(2){background-image:linear-gradient(90deg,rgba(58,10,63,.94) 34%,rgba(58,10,63,.35)),url(../img/fotos/metzgerei-mittag-480.webp)}
.monitor .folie:nth-child(3){background-image:linear-gradient(90deg,rgba(176,9,13,.92) 34%,rgba(176,9,13,.3)),url(../img/fotos/baeckerei-galerie-4-480.webp)}
@media (max-width:860px){.planer-fotos{height:220px;max-width:420px}.planer-polaroid{width:200px}.planer-polaroid.p2{width:170px;left:auto;right:2%}}
@media (max-width:400px){.planer-polaroid{width:170px}.planer-polaroid.p2{width:150px}}
.polaroid.planer-polaroid.p1{--dreh:-4deg}.polaroid.planer-polaroid.p2{--dreh:5deg}.polaroid.kontakt-polaroid{--dreh:-2deg}

/* ---------- Schaltpult-Teaser auf allen Startseiten (Views/Home/_SchaltpultTeaser.cshtml) ----------
   Dunkelgrünes Band mit Zackenrand (band-tief), Kacheln je Werkzeug mit eigenem Foto, Nummer als Siegel-Plakette
   und Farbstreifen in der Werkzeugfarbe. Kacheln haben feste Farben, weil das Band in hell und dunkel gleich ist. */
.stz-teaser{overflow:hidden}
.stz-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:end;margin-bottom:44px}
.stz-kopf .sec-head{margin-bottom:0}
.stz-schritte{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.stz-schritte li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:14px;align-items:center;padding:12px 16px;border-radius:18px;background:rgba(249,239,220,.06);border:1px solid rgba(246,175,47,.25)}
.stz-schritte b{font-family:var(--f-display);font-size:21px;line-height:1.15;color:var(--logo-creme)}
.stz-schritte li>span:last-child{grid-column:2;font-size:14.5px;line-height:1.4;color:#CFC6AE}
.stz-schritt-nr{grid-row:span 2;display:grid;place-items:center;width:46px;aspect-ratio:1/1;border-radius:50%;font-family:var(--f-display);font-weight:700;font-size:24px;color:var(--logo-gruen);background:radial-gradient(circle at 35% 30%,#F9EFDC,#F6AF2F 55%,#C27F0A);box-shadow:0 0 0 3px rgba(246,175,47,.3),0 8px 16px -8px rgba(0,0,0,.6)}
.stz-kacheln{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.stz-kacheln>li{display:flex;min-width:0}
.stz-kachel{--s:#F6AF2F;--s-text:#8A5A0E;position:relative;display:flex;flex-direction:column;flex:1;min-width:0;overflow:hidden;border-radius:22px;background:#FFFDF8;color:var(--logo-gruen);text-decoration:none;box-shadow:0 0 0 1px rgba(246,175,47,.35),0 24px 40px -30px rgba(0,0,0,.8);transition:box-shadow .3s ease}
.stz-kachel:hover{box-shadow:0 0 0 3px var(--s),0 30px 50px -28px rgba(0,0,0,.9)}
.stz-kachel::after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:4px;border-radius:4px 4px 0 0;background:var(--s)}
.stz-rot{--s:#B0090D;--s-text:#B0090D}
.stz-lila{--s:#5B1A62;--s-text:#5B1A62}
.stz-blau{--s:#2A3FB0;--s-text:#2A3FB0}
.stz-gruen{--s:#1F5A3A;--s-text:#1F5A3A}
.stz-bild{display:block;overflow:hidden;aspect-ratio:3/2;background:#FBE8C2}
.stz-bild img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.stz-kachel:hover .stz-bild img{transform:scale(1.08)}
.stz-nr{position:absolute;left:12px;top:12px;z-index:1;display:grid;place-items:center;width:42px;aspect-ratio:1/1;isolation:isolate;font-family:var(--f-display);font-weight:700;font-size:19px;line-height:1;color:#fff}
.stz-nr::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--gold-rand);-webkit-mask:url(../img/grafik/plakette.svg) center/contain no-repeat;mask:url(../img/grafik/plakette.svg) center/contain no-repeat;filter:drop-shadow(0 4px 6px rgba(11,37,25,.4));transition:rotate .8s cubic-bezier(.3,1.4,.5,1)}
.stz-nr::after{content:"";position:absolute;inset:16%;z-index:-1;border-radius:50%;background:var(--s)}
.stz-gold .stz-nr{color:var(--logo-gruen)}
.stz-kachel:hover .stz-nr::before{rotate:40deg}
.stz-text{display:flex;flex-direction:column;gap:6px;padding:16px 18px 22px;flex:1;min-width:0}
.stz-titel{font-family:var(--f-display);font-weight:700;font-size:22px;line-height:1.15;overflow-wrap:anywhere;hyphens:auto}
.stz-kurz{font-size:14.5px;line-height:1.45;color:#4A4D44}
.stz-mehr{margin-top:auto;padding-top:6px;display:inline-flex;gap:6px;font-weight:700;font-size:15px;color:var(--s-text)}
.stz-mehr span{transition:transform .2s}
.stz-kachel:hover .stz-mehr span{transform:translateX(5px)}
.stz-alle{--s:#F6AF2F;--s-text:#F6AF2F;background:radial-gradient(circle at 50% 28%,rgba(246,175,47,.3),transparent 62%),linear-gradient(160deg,#5B1A62,#3A0A3F);color:var(--logo-creme)}
.stz-alle .stz-kurz{color:#EBDDEE}
.stz-siegel{position:relative;display:grid;place-items:center;aspect-ratio:3/2;overflow:hidden}
.stz-siegel img{position:relative;width:44%;height:auto;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));animation:siegel-schweben 5s ease-in-out infinite alternate}
.stz-siegel .siegel-strahlen{left:50%;top:50%;width:92%;translate:-50% -50%;opacity:.7}
@media (max-width:1060px){
  .stz-kopf{grid-template-columns:1fr;gap:28px}
  .stz-kacheln{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .stz-kacheln{grid-template-columns:1fr;gap:12px}
  .stz-kachel{flex-direction:row;min-height:118px}
  .stz-bild,.stz-siegel{flex:0 0 34%;aspect-ratio:auto}
  .stz-nr{left:8px;top:8px;width:34px;font-size:16px}
  .stz-text{padding:12px 14px 16px;gap:4px}
  .stz-titel{font-size:19px}
  .stz-kurz{font-size:13.5px}
  .stz-schritte li{padding:10px 12px}
  .stz-schritte b{font-size:19px}
}

/* Datenschutz: Unterabschnitte und Listen (Abschnitt 5, Ansprache von Betrieben) */
.legal-body h3{font-size:22px;margin-top:10px}
.legal-body ul{margin:0;padding-left:1.2em;color:var(--muted);display:flex;flex-direction:column;gap:4px}
.legal-body h2[id]{scroll-margin-top:96px}

/* ---------- Elf Branchen (Prompt 58): Asia-Imbiss, Pizzeria, Eiscafé, Restaurant ----------
   Branchenfarben nur aus dem Siegel: Asia = Wurstrot mit Gold (Lackrot), Pizzeria = Siegelgrün dunkel mit Gold,
   Eiscafé = Messerblau mit Lila (Heidelbeere), Café = Brotbraun mit Bandlila (Kaffeebraun, Prompt 61),
   Restaurant = Bandlila dunkel mit Gold. */
.b-asia-imbiss,.branchenwahl a[href$="/asia-imbiss"]{--b:color-mix(in srgb,var(--rot) 78%,var(--gold));--b-fest:color-mix(in srgb,#B0090D 78%,#F2A31B);--b-zeichen:url(../img/grafik/zeichen-asia-imbiss.svg)}
.b-pizzeria,.branchenwahl a[href$="/pizzeria"]{--b:var(--gruen);--b-fest:#0B2519;--b-text:var(--logo-gold);--b-zeichen:url(../img/grafik/zeichen-pizzeria.svg)}
.b-eiscafe,.branchenwahl a[href$="/eiscafe"]{--b:color-mix(in srgb,var(--blau) 55%,var(--lila));--b-fest:color-mix(in srgb,#2A3FB0 55%,#5B1A62);--b-zeichen:url(../img/grafik/zeichen-eiscafe.svg)}
.b-cafe,.branchenwahl a[href$="/cafe"]{--b:color-mix(in srgb,var(--gold-gross) 62%,var(--lila));--b-fest:color-mix(in srgb,#9A6510 60%,#3A0A3F);--b-zeichen:url(../img/grafik/zeichen-cafe.svg)}
.b-restaurant,.branchenwahl a[href$="/restaurant"]{--b:var(--lila);--b-fest:#3A0A3F;--b-text:var(--logo-gold);--b-zeichen:url(../img/grafik/zeichen-restaurant.svg)}

/* Umschalter als eigene Leiste über dem Hero: auf großen Bildschirmen zentriert in zwei Reihen,
   bis 900 px eine wischbare Leiste (Regeln oben), die aktuelle Branche rollt hero.js ins Bild */
.hero{padding-top:30px}
.branchenwahl-rahmen{display:flex;justify-content:center;margin-bottom:40px}
.branchenwahl-rahmen .branchenwahl{align-self:auto;justify-content:center}
.branchenwahl-rahmen .branchenwahl a{min-height:38px;padding:0 13px;font-size:14.5px}
@media (min-width:901px){.branchenwahl-rahmen .branchenwahl{max-width:1060px}}
@media (max-width:900px){
  .hero{padding-top:20px}
  .branchenwahl-rahmen{margin-bottom:24px}
  .branchenwahl-rahmen .branchenwahl{width:100%;justify-content:flex-start}
}

/* Hero-Mosaik ab neun Branchen: 4 × 4, das Siegel belegt die mittleren vier Felder */
.mosaik-16{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mosaik-16 .mosaik-mitte{display:block;grid-area:2/2/4/4}
.mosaik-16 .mosaik-kachel{border-radius:14px}
.mosaik-16 .mosaik-kachel span{left:5px;right:auto;top:auto;bottom:5px;max-width:calc(100% - 10px);padding:3px 8px;font-size:11.5px;line-height:1.15;white-space:normal}
.mosaik-16 .mosaik-kachel span .zeichen{width:14px;height:14px}
.mosaik-16 .mosaik-siegel{width:42%}
.mosaik-16 .mosaik-strahlen{width:66%}
.mosaik-16 .mosaik-kachel.mosaik-frei span{font-size:15px}
.mosaik-16 .mosaik-frei .zeichen{width:20px;height:20px}
@media (max-width:520px){
  .mosaik-16{gap:5px}
  .mosaik-16 .mosaik-kachel{border-radius:11px}
  .mosaik-16 .mosaik-kachel:not(.mosaik-frei) span{font-size:0;gap:0;padding:4px}
  .mosaik-16 .mosaik-kachel:not(.mosaik-frei) span .zeichen{width:13px;height:13px}
  .mosaik-16 .mosaik-kachel.mosaik-frei span{font-size:12.5px}
}

/* Siegel-Platzhalter (Views/Home/_Bild.cshtml), solange das eigene Foto fehlt: Siegel mit Strahlenkranz auf Siegelgrün,
   Glanz in der Branchenfarbe, Plakette mit dem Branchenzeichen. Bausteine sind <i>, die Bild-Regeln der Container
   (img, span) werden hier zurückgesetzt. */
.platzhalter{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:3/2;overflow:hidden;isolation:isolate;font-style:normal;
  background:url(../img/grafik/muster.svg) 0 0/120px,radial-gradient(62% 72% at 50% 46%,color-mix(in srgb,var(--ph,var(--b-fest,#1F5A3A)) 80%,transparent),transparent 74%),radial-gradient(circle at 50% 38%,#1F5A3A,#0B2519)}
.platzhalter-hero,.platzhalter-modul{aspect-ratio:4/3}
.platzhalter .platzhalter-strahlen{left:50%;top:50%;width:94%;translate:-50% -50%;opacity:.5;z-index:0}
.platzhalter img.platzhalter-siegel{position:relative;z-index:1;display:block;width:44%;max-width:280px;height:auto;aspect-ratio:auto;object-fit:contain;margin:0;border:0;border-radius:0;background:none;box-shadow:none;transform:none;transition:scale .6s cubic-bezier(.2,.8,.2,1),transform .4s ease;filter:drop-shadow(0 12px 18px rgba(0,0,0,.45));animation:siegel-schweben 5s ease-in-out infinite alternate}
.platzhalter .platzhalter-plakette{position:absolute;right:5%;top:7%;z-index:2;--pk:clamp(34px,17%,82px);--m-fest:var(--b-fest);color:var(--b-text,#fff);animation:wippen 4s ease-in-out infinite alternate}
.platzhalter-titel{position:absolute;left:6%;bottom:6%;z-index:2;font-family:var(--f-script);font-style:normal;font-size:clamp(22px,4.4vw,38px);line-height:1;color:var(--logo-gold);text-shadow:0 3px 10px rgba(0,0,0,.45)}
.mosaik-kachel .platzhalter{position:absolute;inset:0;aspect-ratio:auto;height:100%}
/* Highlights ohne Foto: Glanz in der Kartenfarbe (Gold, Rot, Lila, Blau, Grün), damit sechs Platzhalter nicht gleich aussehen */
.highlight .platzhalter{--ph:var(--h-fest)}
.highlight:nth-child(2n) .platzhalter-siegel{justify-self:start;margin-left:16%}
.highlight:nth-child(3n) .platzhalter-siegel{justify-self:end;margin-right:16%}
/* Übersicht mit 4 × 4: die Live-Meldung hängt unter dem Mosaik statt über den Kacheln */
@media (min-width:901px){
  .hero-bild:has(.mosaik-16) .live{top:auto;bottom:-64px}
  .hero-bild:has(.mosaik-16) .live li:nth-child(2){display:none}
}
.mosaik-kachel .platzhalter-plakette{display:none}
.mosaik-kachel img.platzhalter-siegel{width:62%;animation:none}
.mosaik-kachel:hover img.platzhalter-siegel{transform:rotate(-8deg) scale(1.06)}
.branche-kachel:hover .platzhalter-siegel,.highlight:hover .platzhalter-siegel,.spotlight-foto:hover .platzhalter-siegel{scale:1.06}
.branche-kachel-bild .platzhalter{aspect-ratio:4/3}
.branche-kachel-bild .platzhalter-plakette{display:none}
@media (max-width:560px){.branche-kachel-bild .platzhalter{height:100%;aspect-ratio:auto}}
.hero-foto-platzhalter .platzhalter-plakette{top:auto;right:auto;left:5%;bottom:7%;--pk:clamp(48px,16%,86px)}
.hero-foto-platzhalter .platzhalter-titel{left:auto;right:6%;bottom:8%}

/* Fuß: elf Branchen in zwei Spalten */
.fuss{grid-template-columns:minmax(0,1.3fr) minmax(0,1.7fr) minmax(0,.8fr) minmax(0,1fr)}
.fuss-spalte[aria-label="Branchen"]{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:22px;align-content:start}
.fuss-spalte[aria-label="Branchen"] b{grid-column:1/-1}
@media (max-width:960px){.fuss{grid-template-columns:repeat(3,minmax(0,1fr))}.fuss-spalte[aria-label="Branchen"]{grid-column:span 2}}
@media (max-width:560px){.fuss{grid-template-columns:repeat(2,minmax(0,1fr))}.fuss-spalte[aria-label="Branchen"]{grid-column:1/-1}}

/* Tageskarte & Kundenstopper (Prompt 61): Highlight mit Tafel-Vorschau auf Bäckerei, Imbiss, Café und Restaurant */
.tk-hinweis{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:36px;align-items:center;margin-top:28px;padding:26px;border-radius:26px;background:linear-gradient(135deg,color-mix(in srgb,var(--b,var(--gold)) 10%,var(--surface)),var(--surface));box-shadow:0 0 0 1px color-mix(in srgb,var(--b,var(--gold)) 25%,var(--line)),0 26px 44px -34px rgba(11,37,25,.7)}
.tk-tafel{position:relative;display:flex;flex-direction:column;gap:12px;padding:22px 24px 18px;border-radius:14px;rotate:-2deg;color:var(--logo-creme);
  background:url(../img/grafik/muster.svg) 0 0/140px,radial-gradient(70% 60% at 30% 20%,rgba(246,175,47,.16),transparent 70%),var(--logo-gruen);box-shadow:0 0 0 6px #9A6510,0 0 0 8px var(--logo-gold),0 30px 46px -26px rgba(11,37,25,.8);transition:rotate .5s cubic-bezier(.3,1.5,.5,1)}
.tk-hinweis:hover .tk-tafel{rotate:0deg}
.tk-tafel-kopf{display:flex;align-items:center;gap:8px;font-family:var(--f-script);font-size:34px;line-height:1.1;color:var(--logo-gold)}
.tk-tafel-kopf .zeichen{width:20px;height:20px;animation:funkel-puls 3.6s ease-in-out infinite}
.tk-tafel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.tk-tafel li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:6px;border-bottom:1px dashed rgba(249,239,220,.25);font-size:16px;font-weight:600}
.tk-tafel li b{font-family:var(--f-mono);font-weight:500;color:var(--logo-gold);white-space:nowrap}
.tk-tafel-fuss{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#CFC6AE}
.tk-text{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.tk-text h3{font-size:30px}
.tk-text p{color:var(--muted);font-size:16px}
.tk-neu{display:inline-block;padding:4px 12px;border-radius:999px;background:var(--logo-gold);color:var(--logo-gruen);font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
@media (max-width:760px){.tk-hinweis{grid-template-columns:1fr;gap:26px;padding:20px}.tk-tafel{rotate:-1deg}.tk-text h3{font-size:26px}}

/* ---------- Sechzehn Branchen (Prompt 67): Tante-Emma-Laden, Konditorei, Feinkost & Käse, Weingut & Hofbrauerei ----------
   Farben nur aus dem Siegel: Konditorei = Creme mit Brotbraun (Sahne), Feinkost = Siegelgrün mit Gold (Olive),
   Weingut = Bandlila mit Wurstrot (Bordeaux), Tante Emma = Messerblau mit Siegelgrün (Petrol). */
.b-konditorei,.branchenwahl a[href$="/konditorei"]{--b:color-mix(in srgb,var(--gold-gross) 70%,var(--rot));--b-fest:#FBE8C2;--b-text:#9A6510;--b-zeichen:url(../img/grafik/zeichen-konditorei.svg)}
.b-feinkost,.branchenwahl a[href$="/feinkost"]{--b:color-mix(in srgb,var(--gruen) 60%,var(--gold-gross));--b-fest:color-mix(in srgb,#1F5A3A 60%,#C27F0A);--b-zeichen:url(../img/grafik/zeichen-feinkost.svg)}
.b-weingut,.branchenwahl a[href$="/weingut"]{--b:color-mix(in srgb,var(--lila) 70%,var(--rot));--b-fest:color-mix(in srgb,#5B1A62 70%,#B0090D);--b-zeichen:url(../img/grafik/zeichen-weingut.svg)}
.b-tante-emma-laden,.branchenwahl a[href$="/tante-emma-laden"]{--b:color-mix(in srgb,var(--blau) 50%,var(--gruen));--b-fest:color-mix(in srgb,#2A3FB0 50%,#1F5A3A);--b-zeichen:url(../img/grafik/zeichen-tante-emma-laden.svg)}
/* Konditorei: helle Fläche, deshalb Rand statt Schatten */
.branchenwahl a[href$="/konditorei"][aria-current="page"]{box-shadow:inset 0 0 0 1.5px #C27F0A}
.mosaik-kachel.b-konditorei span{box-shadow:inset 0 0 0 1px #C27F0A,0 6px 14px -6px rgba(11,37,25,.6)}

/* Umschalter: auf großen Bildschirmen genau zwei Reihen à acht */
@media (min-width:1100px){
  .branchenwahl-rahmen .branchenwahl:has(>a:nth-child(16)){display:grid;grid-template-columns:repeat(8,auto);justify-content:center;max-width:none}
  .branchenwahl-rahmen .branchenwahl:has(>a:nth-child(16)) a{padding:0 12px;font-size:14px}
}

/* Hero-Mosaik ab 13 Branchen: 5 × 5, sechzehn Kacheln als Kranz um ein großes Siegel */
.mosaik-25{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.mosaik-25 .mosaik-mitte{display:block;grid-area:2/2/5/5}
.mosaik-25 .mosaik-kachel{border-radius:12px}
.mosaik-25 .mosaik-kachel span{left:4px;right:auto;top:auto;bottom:4px;max-width:calc(100% - 8px);padding:2px 7px;font-size:10.5px;line-height:1.15;white-space:normal}
.mosaik-25 .mosaik-kachel span .zeichen{width:12px;height:12px}
.mosaik-25 .mosaik-siegel{width:52%}
.mosaik-25 .mosaik-strahlen{width:80%}
@media (max-width:620px){
  .mosaik-25{gap:4px}
  .mosaik-25 .mosaik-kachel{border-radius:9px}
  .mosaik-25 .mosaik-kachel:not(.mosaik-frei) span{font-size:0;gap:0;padding:3px}
  .mosaik-25 .mosaik-kachel:not(.mosaik-frei) span .zeichen{width:12px;height:12px}
}
@media (min-width:901px){
  .hero-bild:has(.mosaik-25) .live{top:auto;bottom:-64px}
  .hero-bild:has(.mosaik-25) .live li:nth-child(2){display:none}
}