/* MeisterFreund – 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 MeisterFreund-Wappen: Grün (Scheibe), Gurkengrün, Gold (Rand, Krone), Orange (Brot, Prompt 134a), Gold (Schriftzug „Klug“), Lila/Violett (Band),
     Rot (Wurst), Blau (Messergriffe), Stahl (Klingen), Creme (Schriftzug). Prompt 130a: alle Farben des neuen Wappens. */
  --bg:#FAF6EC;
  --surface:#FFFFFF;
  --fg:#16201B;
  --muted:#5B5E54;
  --line:#E6DDC9;
  --ink:#0F3324;
  --ink-fg:#FFFFFF;
  --brass:#9A6510;
  --brass-soft:#FBE8C2;
  --paper:#FFFDF8;
  --ok:#228307; /* Gurkengrün: frisch, bio, erledigt (Prompt 135a) */
  --warn:#C01A13;
  --gold:#F2A31B;
  --gold-gross:#C27F0A;
  --rot:#C01A13;
  --lila:#450959;
  --blau:#012D8D;
  --gruen:#1F5A3A;
  --gurke:#228307;
  --orange:#FD8E09;
  --orange-tief:#EF6401;
  /* feste Logofarben, gleich in hell und dunkel */
  --logo-gruen:#0B2519;
  --logo-lila:#380544;
  --logo-gold:#F6AF2F;
  --logo-creme:#F9EFDC;
  --logo-gurke:#228307;
  --logo-orange:#FD8E09;
  --logo-violett:#3F0653;
  --logo-blau:#012D8D;
  --logo-rot:#C01A13;
  --logo-goldgelb:#FDBB2A;
  --logo-stahl:#A5A5A4;
  --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:#9BD88A;--warn:#FF8A7E;
    --gold-gross:#F2B341;--rot:#FF8A7E;--lila:#D9A8E0;--blau:#A9B8FF;--gruen:#86CFA0;--gurke:#9BD88A;--orange:#FFB54A;
    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:#9BD88A;--warn:#FF8A7E;
  --gold-gross:#F2B341;--rot:#FF8A7E;--lila:#D9A8E0;--blau:#A9B8FF;--gruen:#86CFA0;--gurke:#9BD88A;--orange:#FFB54A;
  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:.75;cursor:not-allowed;filter:none;background:var(--logo-stahl);border-color:var(--logo-stahl);color:#0B2519;box-shadow: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)}

/* Live-Demo mit Rechenkern (Prompt 92): Stück/Gramm, ca.-Preis, Ausverkauft-Wahl, Abholschein */
.stepper output{padding:0 4px;white-space:nowrap}
.sum .sum-preis{white-space:nowrap}
.demo-details{margin-top:-4px;font-size:13px;line-height:1.4}
.demo-einheit{max-width:220px}
.demo-regel-label{margin-bottom:-6px;font-size:13px;font-weight:600}
.abholschein{display:flex;flex-direction:column;gap:8px;padding:14px;border-radius:12px;border:1.5px dashed var(--brass);background:var(--paper)}
.abholschein ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.abholschein li{display:flex;flex-direction:column;gap:2px;font-size:13.5px;line-height:1.4}
.abholschein li span{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.abholschein li.fehlt span{color:var(--warn)}
.abholschein .total{font-size:16px}

/* 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(56,5,68,.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;overflow:clip;isolation:isolate} /* clip: schneidet ab, ohne verschiebbar zu werden (Fokus, Prompt 319) */
.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 #380544/#450959, Wurstrot #C01A13, Messerblau #012D8D, 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:#228307;
  --regenbogen:linear-gradient(90deg,#FDBB2A 0%,#FD8E09 17%,#C01A13 33%,#3F0653 50%,#012D8D 67%,#228307 83%,#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:#C01A13}
.m-werbung{--m-fest:#450959}
.m-assistent{--m-fest:#012D8D}
.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:#C01A13;--b-zeichen:url(../img/grafik/zeichen-metzgerei.svg)}
.b-bio-hof,.branchenwahl a[href$="/bio-hof"]{--b:var(--gurke);--b-fest:#228307;--b-zeichen:url(../img/grafik/zeichen-bio-hof.svg)}
.b-dorfladen,.branchenwahl a[href$="/dorfladen"]{--b:var(--lila);--b-fest:#450959;--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-goldgelb));-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;--f:var(--orange)}
.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;--f:var(--gurke)}
.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(56,5,68,.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:#C01A13}
.highlight:nth-child(5n+3){--h:var(--lila);--h-fest:#450959}
.highlight:nth-child(5n+4){--h:var(--blau);--h-fest:#012D8D}
.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(192,26,19,.22),transparent 70%),url(../img/grafik/muster.svg) 0 0/180px,linear-gradient(135deg,#0B2519,#1F5A3A 50%,#380544)}
.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:#C01A13;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:#C01A13;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:#C01A13;font-size:13px;font-weight:700;white-space:nowrap;box-shadow:0 0 0 1.5px rgba(192,26,19,.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,#C01A13,#450959)}
.vn-balken.b3 i{width:44%;background:linear-gradient(90deg,#012D8D,#450959)}
.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:#450959}
.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,#C01A13,#450959 60%,#380544);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:#C01A13}
.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,#FD8E09,#C01A13,#450959,#012D8D,#228307,#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:#450959}.z-rot{--z:#C01A13}.z-blau{--z:#012D8D}
.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:#C01A13}
.aktion.blau{background-color:#012D8D}
.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(69,9,89,.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,#450959,#C01A13,#F6AF2F,#450959,#F6AF2F) border-box;animation:umlauf 5s linear infinite;box-shadow:0 30px 60px -28px rgba(56,5,68,.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,#450959,#380544);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%,#380544 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(69,9,89,.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:#012D8D;--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,#C01A13 68%,#380544);--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(56,5,68,.94) 34%,rgba(56,5,68,.35)),url(../img/fotos/metzgerei-mittag-480.webp)}
.monitor .folie:nth-child(3){background-image:linear-gradient(90deg,rgba(192,26,19,.92) 34%,rgba(192,26,19,.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:#C01A13;--s-text:#C01A13}
.stz-lila{--s:#450959;--s-text:#450959}
.stz-blau{--s:#012D8D;--s-text:#012D8D}
.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,#450959,#380544);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:var(--orange);--b-fest:#FD8E09;--b-text:var(--logo-gruen);--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,#012D8D 55%,#450959);--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%,#380544);--b-zeichen:url(../img/grafik/zeichen-cafe.svg)}
.b-restaurant,.branchenwahl a[href$="/restaurant"]{--b:var(--lila);--b-fest:#380544;--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,#450959 70%,#C01A13);--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,#012D8D 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}
}

/* Fotokranz, Zeigen mit der Maus (Prompt 319): Das Foto wächst weich auf doppelte Größe, immer zur Siegelmitte hin
   (Ecken aus der Ecke, Randfotos vom Rand weg), mit Goldrand, tiefem Schatten und einem Glanzstreifen. Die übrigen
   Fotos treten etwas zurück. Gilt für alle Rastergrößen, nur auf Geräten mit Maus und ab Tablet-Breite. Beim
   Zurückschrumpfen bleibt das Foto oben, bis es wieder klein ist (z-index mit Verzögerung). */
@media (hover:hover) and (min-width:901px){
  .mosaik-kachel:not(.mosaik-frei){
    transition:transform .5s cubic-bezier(.2,.9,.25,1.12),box-shadow .5s ease,filter .4s ease,z-index 0s linear .5s}
  .mosaik-kachel:not(.mosaik-frei)::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(115deg,transparent 30%,rgba(249,239,220,.55) 45%,rgba(253,187,42,.35) 52%,transparent 66%);
    transform:translateX(-130%)}
  .mosaik-kachel:not(.mosaik-frei):is(:hover,:focus-visible){z-index:6;transform:scale(2);
    box-shadow:0 0 0 2px #F6AF2F,0 0 0 4px rgba(56,5,68,.55),0 30px 50px -18px rgba(11,37,25,.75);
    transition:transform .5s cubic-bezier(.2,.9,.25,1.12),box-shadow .5s ease,filter .4s ease,z-index 0s}
  .mosaik-kachel:not(.mosaik-frei):is(:hover,:focus-visible)::after{transform:translateX(130%);transition:transform .9s ease-out .15s}
  .mosaik:has(.mosaik-kachel:not(.mosaik-frei):is(:hover,:focus-visible)) .mosaik-kachel:not(:hover,:focus-visible){filter:brightness(.72) saturate(.85)}

  /* Wachstumsrichtung je Feld: oben links, oben, oben rechts, links, rechts, unten links, unten, unten rechts */
  .mosaik-4 .mosaik-kachel:nth-of-type(1){transform-origin:0 0}
  .mosaik-4 .mosaik-kachel:nth-of-type(2){transform-origin:100% 0}
  .mosaik-4 .mosaik-kachel:nth-of-type(3){transform-origin:0 100%}
  .mosaik-4 .mosaik-kachel:nth-of-type(4){transform-origin:100% 100%}

  .mosaik-9 .mosaik-kachel:nth-of-type(1){transform-origin:0 0}
  .mosaik-9 .mosaik-kachel:nth-of-type(2){transform-origin:50% 0}
  .mosaik-9 .mosaik-kachel:nth-of-type(3){transform-origin:100% 0}
  .mosaik-9 .mosaik-kachel:nth-of-type(4){transform-origin:0 50%}
  .mosaik-9 .mosaik-kachel:nth-of-type(5){transform-origin:100% 50%}
  .mosaik-9 .mosaik-kachel:nth-of-type(6){transform-origin:0 100%}
  .mosaik-9 .mosaik-kachel:nth-of-type(7){transform-origin:50% 100%}
  .mosaik-9 .mosaik-kachel:nth-of-type(8){transform-origin:100% 100%}

  .mosaik-16 .mosaik-kachel:nth-of-type(1){transform-origin:0 0}
  .mosaik-16 .mosaik-kachel:is(:nth-of-type(2),:nth-of-type(3)){transform-origin:50% 0}
  .mosaik-16 .mosaik-kachel:nth-of-type(4){transform-origin:100% 0}
  .mosaik-16 .mosaik-kachel:is(:nth-of-type(5),:nth-of-type(7)){transform-origin:0 50%}
  .mosaik-16 .mosaik-kachel:is(:nth-of-type(6),:nth-of-type(8)){transform-origin:100% 50%}
  .mosaik-16 .mosaik-kachel:nth-of-type(9){transform-origin:0 100%}
  .mosaik-16 .mosaik-kachel:is(:nth-of-type(10),:nth-of-type(11)){transform-origin:50% 100%}
  .mosaik-16 .mosaik-kachel:nth-of-type(12){transform-origin:100% 100%}

  .mosaik-25 .mosaik-kachel:nth-of-type(1){transform-origin:0 0}
  .mosaik-25 .mosaik-kachel:is(:nth-of-type(2),:nth-of-type(3),:nth-of-type(4)){transform-origin:50% 0}
  .mosaik-25 .mosaik-kachel:nth-of-type(5){transform-origin:100% 0}
  .mosaik-25 .mosaik-kachel:is(:nth-of-type(6),:nth-of-type(8),:nth-of-type(10)){transform-origin:0 50%}
  .mosaik-25 .mosaik-kachel:is(:nth-of-type(7),:nth-of-type(9),:nth-of-type(11)){transform-origin:100% 50%}
  .mosaik-25 .mosaik-kachel:nth-of-type(12){transform-origin:0 100%}
  .mosaik-25 .mosaik-kachel:is(:nth-of-type(13),:nth-of-type(14),:nth-of-type(15)){transform-origin:50% 100%}
  .mosaik-25 .mosaik-kachel:nth-of-type(16){transform-origin:100% 100%}
}
/* Weniger Bewegung gewünscht: Vergrößerung ohne Animation, kein Glanzstreifen */
@media (hover:hover) and (min-width:901px) and (prefers-reduced-motion:reduce){
  .mosaik-kachel:not(.mosaik-frei),.mosaik-kachel:not(.mosaik-frei):is(:hover,:focus-visible){transition:none}
  .mosaik-kachel:not(.mosaik-frei)::after{display:none}
}

/* ---------- Regionale Begriffe (Prompt 88): „Spricht wie Ihre Kundschaft“, Schaubild mit Regionen-Chips ----------
   Nur Siegelfarben; das Band ist die lila Schleife aus dem Siegel, das Funkeln markiert regionale Wörter.
   Skript: wwwroot/js/regional.js (Klassen rb-raus/rb-rein, data-aktiv). */
.rb-abschnitt{position:relative;background:
  radial-gradient(40% 55% at 92% 18%,color-mix(in srgb,var(--lila) 8%,transparent),transparent 70%),
  radial-gradient(35% 45% at 4% 90%,color-mix(in srgb,var(--gold) 10%,transparent),transparent 70%),var(--bg)}
.rb-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:56px;align-items:center}
.rb-raster .sec-head{margin-bottom:0}
.rb-text{margin:0;color:var(--fg);font-weight:600;max-width:52ch}
.rb-schaubild{position:relative;padding:26px 26px 22px;border-radius:24px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--gold);
  box-shadow:0 26px 50px -32px rgba(15,30,22,.5)}
.rb-kopf{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 12px;margin-bottom:14px}
.rb-frage{margin:0;display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.rb-frage .zeichen{width:20px;height:20px;color:var(--rot)}
.rb-band{flex:none;padding:5px 20px;background:var(--logo-lila);color:var(--logo-creme);font-family:var(--f-display);font-weight:700;font-size:15px;line-height:1.25;
  clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%,10px 50%)}
.rb-chips{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:18px}
.rb-chip{min-height:44px;padding:0 12px;color:var(--fg);font-family:inherit;line-height:1.15;transition:background-color .2s,border-color .2s,color .2s}
.rb-chip:hover{border-color:var(--gold-gross)}
.rb-chip[aria-pressed="true"]{color:var(--ink-fg)}
.rb-chip:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.rb-woerter{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;perspective:700px}
.rb-karte{position:relative;display:flex;flex-direction:column;gap:6px;min-height:96px;padding:14px 16px;border-radius:16px;background:var(--paper);
  border:1.5px solid var(--line);transition:border-color .25s,background-color .25s}
.rb-karte:last-child:nth-child(odd){grid-column:1/-1}
.rb-grund{padding-right:22px;font-size:13px;color:var(--muted)}
.rb-grund small{margin-right:3px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.rb-wort{display:block;font-family:var(--f-display);font-weight:700;font-size:clamp(22px,2.2vw,27px);line-height:1.1;color:var(--gruen);
  overflow-wrap:anywhere;transform-origin:50% 0}
.rb-wort.rb-lang{font-size:clamp(19px,1.8vw,22px)}
.rb-karte.rb-anders{border-color:color-mix(in srgb,var(--gold) 60%,var(--line));background:color-mix(in srgb,var(--gold) 9%,var(--paper))}
.rb-karte.rb-anders .rb-wort{color:var(--lila)}
.rb-karte.rb-anders::after{content:"";position:absolute;top:11px;right:11px;width:14px;height:14px;background:var(--gold-gross);
  -webkit-mask:url(../img/grafik/funkel.svg) center/contain no-repeat;mask:url(../img/grafik/funkel.svg) center/contain no-repeat}
.rb-satz{margin:18px 0 0;padding:14px 18px;border-radius:14px;background:var(--brass-soft)}
.rb-satz figcaption{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brass)}
.rb-satz blockquote{margin:4px 0 0}
.rb-satz p{margin:0;font-family:var(--f-display);font-size:20px;line-height:1.35;transform-origin:50% 0}
.rb-hinweis{margin:14px 0 0;font-size:13px;color:var(--muted)}
.rb-status{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Wechsel: wegklappen, tauschen, aufklappen (die globale Regel für prefers-reduced-motion schaltet das ab, regional.js tauscht dann sofort) */
.rb-raus .rb-wort,.rb-raus .rb-satz p{opacity:0;transform:rotateX(80deg);transition:opacity .18s ease-in,transform .18s ease-in}
.rb-rein .rb-wort,.rb-rein .rb-satz p{animation:rb-klapp .42s cubic-bezier(.2,.9,.25,1.15) both}
.rb-rein .rb-karte:nth-child(2) .rb-wort{animation-delay:.05s}
.rb-rein .rb-karte:nth-child(3) .rb-wort{animation-delay:.1s}
.rb-rein .rb-karte:nth-child(4) .rb-wort{animation-delay:.15s}
.rb-rein .rb-satz p{animation-delay:.18s}
@keyframes rb-klapp{from{opacity:0;transform:rotateX(-80deg)}to{opacity:1;transform:none}}
@media (max-width:900px){.rb-raster{grid-template-columns:1fr;gap:32px}}
/* Handy: Chips zweispaltig, Wörter als Liste (Wort links groß, bundesweite Form rechts klein) */
@media (max-width:520px){
  .rb-schaubild{padding:20px 16px 18px;border-radius:20px}
  .rb-chips{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rb-chip{font-size:14px}
  .rb-woerter{grid-template-columns:1fr;gap:8px}
  .rb-karte{flex-direction:row-reverse;align-items:center;justify-content:space-between;gap:10px;min-height:62px;padding:10px 14px}
  .rb-karte:last-child:nth-child(odd){grid-column:auto}
  .rb-grund{flex:none;max-width:36%;padding-right:18px;text-align:right;line-height:1.25}
  .rb-grund small{display:block;margin:0}
  .rb-wort{font-size:22px}
  .rb-wort.rb-lang{font-size:18px}
  .rb-karte.rb-anders::after{top:50%;right:10px;margin-top:-7px}
  .rb-satz p{font-size:18px}
}

/* ---------- Preise: sieben Stufen, Gründerpreis, Preisschild je Leistung in vier Zuständen (Prompts 148/150) ---------- */
.gruender-zaehler{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin-top:18px;padding:10px 18px;border-radius:14px;background:var(--brass-soft);border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);color:var(--fg);font-size:16px;max-width:62ch}
.gruender-zahl{font-weight:700;color:var(--lila)}
.gruender-voll .gruender-zahl{color:var(--rot)}
.pakete-gross-titel{margin:54px 0 10px;font-size:clamp(24px,3vw,32px);color:var(--muted);font-weight:500;text-align:center}
.pakete.pakete-gross{grid-template-columns:repeat(2,minmax(0,1fr));padding-top:20px}
@media (min-width:621px){.pakete.pakete-gross{max-width:900px;margin:0 auto}}
.pakete-gross .paket{padding:24px 26px 24px;background:color-mix(in srgb,var(--surface) 70%,var(--bg));box-shadow:none}
.paket-enthaelt{margin-top:-8px;font-size:14px;font-weight:700;color:var(--p)}
.paket .amount{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px}
.paket .amount small{white-space:nowrap}
.paket-alt{font-family:var(--f-body);font-size:20px;font-weight:600;color:var(--muted);text-decoration-thickness:2px;text-decoration-color:var(--rot);flex:0 0 100%;line-height:1.1}
.paket-gruender{margin-top:-8px;font-size:13px;font-weight:700;color:var(--lila);letter-spacing:.02em}
.paket-gratis-text{min-height:0}
.paket-vorteil{padding:10px 12px;border-radius:10px;background:var(--brass-soft);font-size:14px;line-height:1.45;color:var(--fg)}
.paket-vorteil p+p{margin-top:4px}
.paket-heute{font-size:14px;color:var(--muted);padding-top:10px;border-top:1px solid var(--line)}
.paket-heute b{color:var(--fg)}
.paket ul.leistungen{gap:8px}
.paket li.leistung{padding-left:26px;line-height:1.4}
.paket li.leistung::before{display:none}
.leistung-stand{display:inline-block;font-style:normal;font-size:12px;font-weight:700;padding:1px 8px;border-radius:999px;white-space:nowrap;vertical-align:1px;border:1px solid currentColor}
.leistung-laeuft .leistung-stand{color:var(--ok)}
.leistung-demo .leistung-stand{color:var(--blau)}
.leistung-woche .leistung-stand{color:var(--brass)}
.leistung-vorbereitung .leistung-stand{color:var(--muted)}
.leistung-vorbereitung .leistung-text{color:var(--muted)}
/* Zeichen: vier verschiedene Formen, damit sie auch ohne Farbe unterscheidbar sind */
.ls{position:absolute;left:0;top:.2em;width:18px;height:18px;flex:none}
.ls-laeuft{border-radius:50%;background:var(--ok)}
.ls-laeuft::after{content:"";position:absolute;left:5px;top:3px;width:5px;height:9px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.ls-demo{border-radius:50%;border:2px solid var(--blau)}
.ls-demo::after{content:"";position:absolute;left:5px;top:2.5px;border-style:solid;border-width:4px 0 4px 7px;border-color:transparent transparent transparent var(--blau)}
.ls-woche{border-radius:50%;border:2px solid var(--brass)}
.ls-woche::after{content:"";position:absolute;left:6.5px;top:2px;width:2px;height:6px;background:var(--brass);box-shadow:3px 4px 0 -0px var(--brass)}
.ls-vorbereitung{border-radius:50%;border:2px dashed var(--muted)}
.paket-knoepfe{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:stretch;padding-top:6px}
.paket-knoepfe .btn{margin-top:0;text-align:center;justify-content:center}
.paket-link{align-self:center;font-weight:700;font-size:15px;color:var(--fg);text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px;text-decoration-thickness:2px;min-height:40px;display:inline-flex;align-items:center}
.paket-link:hover{text-decoration-color:var(--rot)}
.gutes-tun{margin-top:40px;padding:22px 26px;border-radius:16px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--gruen);max-width:78ch}
.gutes-tun-titel{margin:0 0 8px;color:var(--ink)}
.gutes-tun p{margin:0 0 10px}
.gutes-tun p:last-child{margin-bottom:0}
.gutes-tun b{color:var(--brass)}
.legende{margin-top:48px;padding:22px 26px;border-radius:16px;background:var(--surface);border:1px solid var(--line)}
.legende-titel{font-size:22px;margin-bottom:12px}
.legende ul{list-style:none;margin:0 0 14px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 22px}
.legende li{position:relative;padding-left:28px;font-size:15px;color:var(--muted);line-height:1.45}
.legende li b{display:block;color:var(--fg)}
.legende>p{font-size:15px;color:var(--muted)}
.legende a,.preise-module a{color:var(--fg);font-weight:700}
.preise-module{margin-top:22px;text-align:center;font-weight:600;color:var(--muted)}
@media (max-width:1180px){.legende ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.pakete.pakete-gross{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.legende ul{grid-template-columns:1fr}.legende{padding:18px}}
/* Preisseite: Kennenlernpaket, Module, Aufpreise, Einmalleistungen, Verbrauch (Preismodell, Montag-Paket) */
.kennenlernen{margin-top:34px;padding:18px 24px;border-radius:16px;border:2px solid var(--gold);background:var(--surface);text-align:center}
.kennenlernen h3{font-size:22px;margin-bottom:6px}
.kennenlernen p{margin:0;color:var(--muted);text-wrap:balance}
.kennenlernen strong{color:var(--fg)}
.zubuchen{margin-top:44px}
.zubuchen h3{font-size:24px;margin-bottom:6px}
.zubuchen-lead,.zubuchen-fuss{color:var(--muted);font-size:15px;margin:0 0 14px;max-width:70ch}
.zubuchen-fuss{margin:14px 0 0}
.preis-tabelle{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.preis-tabelle table{width:100%;border-collapse:collapse;font-size:15px}
.preis-tabelle th,.preis-tabelle td{padding:10px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.preis-tabelle thead th{font-size:13px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.preis-tabelle tbody tr:last-child>*{border-bottom:0}
.preis-tabelle tbody th{font-weight:700}
.preis-tabelle small{display:block;margin-top:2px;font-weight:400;font-size:13px;color:var(--muted);line-height:1.4}
.verbrauch-spalten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.bestpreis-zeile{margin:34px auto 0;max-width:80ch;text-align:center;color:var(--muted);text-wrap:balance}
.bestpreis-zeile strong{color:var(--fg)}
@media (max-width:760px){
  .verbrauch-spalten{grid-template-columns:1fr}
  .preis-tabelle thead{display:none}
  .preis-tabelle table,.preis-tabelle tbody,.preis-tabelle tr,.preis-tabelle th,.preis-tabelle td{display:block;width:100%}
  .preis-tabelle tr{padding:8px 0;border-bottom:1px solid var(--line)}
  .preis-tabelle tbody tr:last-child{border-bottom:0}
  .preis-tabelle th,.preis-tabelle td{border-bottom:0;padding:3px 14px}
  .preis-tabelle td[data-label]::before{content:attr(data-label) ": ";font-weight:700;color:var(--muted);font-size:13px}
}