/* H&S Automaten – Stylesheet
   Farben und Formen nach H&S Corporate Design (Dunkelblau #113B60 / Orange #F18528). */

/* Schriften lokal eingebunden (variable Schriften, SIL Open Font License) – keine Verbindung zu Google */
@font-face{font-family:'Lexend';font-style:normal;font-weight:500 700;font-display:swap;src:url('../fonts/lexend-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:'Montserrat';font-style:normal;font-weight:400 800;font-display:swap;src:url('../fonts/montserrat-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}

:root{
  --navy:#113B60; --orange:#F18528; --blue:#3E6C95; --orange-l:#F7A64D;
  --gg:#5F7972; --off:#F5F4F2; --text:#33495E; --white:#fff; --line:#e3e7eb;
  --max:1200px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;scroll-padding-top:100px}
body{font-family:Montserrat,Arial,sans-serif;color:var(--text);background:var(--white);line-height:1.65;font-size:16px}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:Lexend,Montserrat,Arial,sans-serif;color:var(--navy);line-height:1.2;font-weight:700}
h1{font-size:clamp(1.8rem,3.4vw,2.6rem)}
h2{font-size:clamp(1.6rem,3vw,2.3rem)}
h3{font-size:clamp(1.3rem,2.2vw,1.7rem)}
.initial::first-letter{color:var(--orange);font-size:1.45em;line-height:0}
.label{font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.78rem;color:var(--orange);display:block;margin-bottom:.7rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
section{padding:90px 0}
.muted{background:var(--off)}
.center{text-align:center}
.lead{font-size:1.1rem}
.center .lead{max-width:760px;margin:14px auto 0}
.btn{display:inline-block;background:var(--orange);color:#fff;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.85rem;padding:15px 30px;border-radius:2px;border:0;cursor:pointer;transition:background .2s;font-family:inherit}
.btn:hover{background:var(--orange-l)}
.btn.ghost{background:transparent;border:2px solid currentColor;padding:13px 28px}
.btn.ghost:hover{background:#fff;color:var(--navy);border-color:#fff}
.btn.navy{background:var(--navy)}
.btn.navy:hover{background:var(--blue)}
.btns{display:flex;gap:14px;flex-wrap:wrap}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:16px;z-index:200;background:#fff;padding:10px 16px}

/* ---------- Kopfbereich ---------- */
.topbar{background:var(--navy);color:#fff;font-size:.82rem}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px;flex-wrap:wrap}
.topbar a:hover{color:var(--orange-l)}
section[id]{scroll-margin-top:110px}
header.main{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 14px rgba(17,59,96,.08)}
header.main .wrap{display:flex;align-items:center;justify-content:space-between;height:100px;gap:24px}
.logo img{height:80px;width:auto}
nav.menu{display:flex;gap:28px;align-items:center}
nav.menu > .item{position:relative}
nav.menu > .item > a{font-weight:600;color:var(--navy);font-size:.95rem;padding:38px 0;display:block}
nav.menu > .item > a:hover,nav.menu > .item.current > a{color:var(--orange)}
.drop{position:absolute;top:100%;left:-20px;background:#fff;min-width:250px;box-shadow:0 12px 30px rgba(17,59,96,.15);border-top:3px solid var(--orange);padding:10px 0;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.item:hover .drop,.item:focus-within .drop{opacity:1;visibility:visible;transform:none}
.drop a{display:block;padding:8px 22px;font-size:.9rem;color:var(--navy)}
.drop a:hover{background:var(--off);color:var(--orange)}
.burger{display:none;background:none;border:0;font-size:1.8rem;color:var(--navy);cursor:pointer}

/* ---------- Startseiten-Slider (abgesetztes Bild) ---------- */
.hero{background:var(--off);padding:36px 0 56px;position:relative}
.hero::before{content:"";position:absolute;left:0;top:0;width:260px;height:260px;background:var(--navy);clip-path:polygon(0 0,100% 0,0 100%)}
.hero-frame{position:relative;max-width:1320px;margin:0 auto;padding:0 24px}
.hero-frame::after{content:"";position:absolute;right:6px;bottom:-18px;width:38%;height:55%;border-right:6px solid var(--orange);border-bottom:6px solid var(--orange);pointer-events:none}
.slider{position:relative;height:clamp(400px,56vh,520px);overflow:hidden;background:var(--navy);box-shadow:0 24px 50px rgba(17,59,96,.25);z-index:1}
.slide{position:absolute;inset:0;opacity:0;transition:opacity 1s ease;background-size:cover;background-position:center;background-color:var(--blue)}
.slide.active{opacity:1;z-index:1}
.slide::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,59,96,.93) 0%,rgba(17,59,96,.72) 48%,rgba(17,59,96,.08) 100%)}
.slide.cutout{background:radial-gradient(circle at 75% 45%,#4f7fa8 0%,var(--blue) 30%,var(--navy) 75%)}
.slide.cutout::before{background:linear-gradient(90deg,rgba(17,59,96,.85) 0%,rgba(17,59,96,.35) 50%,rgba(17,59,96,0) 70%)}
.stage{position:absolute;right:9%;top:50%;transform:translateY(-50%);height:82%;width:auto;max-width:40%;object-fit:contain;filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));z-index:1}
.stage.photo{height:78%;border:6px solid #fff;box-shadow:0 22px 40px rgba(0,0,0,.4);filter:none;object-fit:cover;aspect-ratio:3/4}
.slide .wrap{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;color:#fff;padding:0 72px;max-width:none}
.kicker{font-size:.9rem;font-weight:600;color:var(--orange-l);margin-bottom:14px}
.slide .claim{font-family:Lexend,Montserrat,Arial,sans-serif;font-weight:700;margin:0;opacity:1;color:#fff;font-size:clamp(2.1rem,4.6vw,3.6rem);max-width:680px}
.slide .claim::first-letter{color:var(--orange);font-size:1.35em;line-height:0}
.slide p{max-width:520px;font-size:1.08rem;margin:16px 0 28px;opacity:.95}
.slider::after,.banner::after{content:"";position:absolute;right:0;bottom:0;width:min(34vw,380px);height:80px;background:var(--orange);clip-path:polygon(28% 0,100% 0,100% 100%,0 100%);z-index:2}
/* Slide-Gestaltung: zweifarbiger Claim, Symbolleiste, Lichtspuren zum Automaten */
.slider{height:clamp(500px,68vh,600px)}
.slide .wrap{padding-bottom:56px}
.slide .kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.78rem;font-weight:800}
.claim{font-size:clamp(2rem,4vw,3.3rem)!important;line-height:1.02;text-transform:uppercase;letter-spacing:-.01em;max-width:58%}
.claim.lang{font-size:clamp(1.8rem,3.3vw,2.75rem)!important}
.claim::first-letter{color:inherit!important;font-size:1em!important}
.claim span{display:block;color:#fff}
.claim em{display:block;font-style:normal;color:var(--orange)}
.slide p{margin:18px 0 22px}
.feats{list-style:none;display:flex;margin:0 0 28px}
.feats li{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;padding:0 20px;font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;max-width:120px;line-height:1.25}
.feats li:first-child{padding-left:0;align-items:flex-start;text-align:left}
.feats li + li{border-left:1px solid rgba(255,255,255,.28)}
.feats svg{width:36px;height:36px;fill:none;stroke:var(--orange-l);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
/* Gestalteter Hintergrund für freigestellte Automaten */
.slide.cutout{background:linear-gradient(118deg,#0a2540 0%,var(--navy) 46%,#17436b 100%)}
.slide.cutout::before{display:none}
.deco{position:absolute;inset:0;z-index:0;overflow:hidden;--glow:241,133,40;--cx:73%}
.deco.glow-b{--glow:125,175,225}
/* Lichtkegel hinter dem Automaten */
.deco::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 34% 58% at var(--cx) 46%,rgba(var(--glow),.42),rgba(var(--glow),.08) 55%,transparent 75%)}
/* Punkteraster, zur Textseite hin ausgeblendet */
.deco::after{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1.2px,transparent 1.4px);background-size:22px 22px;
  -webkit-mask:linear-gradient(90deg,transparent 35%,#000 70%);mask:linear-gradient(90deg,transparent 35%,#000 70%)}
/* Diagonale Fläche (H&S-Formensprache) */
.deco .band{position:absolute;top:0;bottom:0;right:-4%;width:50%;background:linear-gradient(180deg,rgba(62,108,149,.5),rgba(62,108,149,.12));clip-path:polygon(26% 0,100% 0,100% 100%,0 100%)}
.deco .band::before{content:"";position:absolute;top:0;bottom:0;left:0;width:100%;background:linear-gradient(180deg,rgba(var(--glow),.9),rgba(var(--glow),.2));clip-path:polygon(25.4% 0,26.2% 0,.8% 100%,0 100%)}
/* Schräge, kantige Leuchtrahmen hinter dem Automaten (keine Kreise – CI) */
.deco .ring{position:absolute;left:var(--cx);top:50%;transform:translate(-50%,-50%) skewX(-14deg)}
.deco .r1{width:min(26vw,330px);height:78%;border:2px solid rgba(var(--glow),.55);box-shadow:0 0 50px rgba(var(--glow),.25),inset 0 0 50px rgba(var(--glow),.12)}
.deco .r2{width:min(32vw,410px);height:92%;border:1.5px solid rgba(255,255,255,.14);margin-left:28px;margin-top:10px}
/* Bodenschatten */
.deco .floor{position:absolute;left:var(--cx);bottom:5%;width:30%;height:9%;transform:translateX(-50%);background:radial-gradient(ellipse at center,rgba(0,0,0,.55),transparent 70%)}
/* Großes Kontur-Wort */
.deco .word{position:absolute;right:-1%;bottom:-4%;font:700 clamp(90px,13vw,200px)/1 Lexend,sans-serif;text-transform:uppercase;color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.09);letter-spacing:-.02em;white-space:nowrap}
.slide.cutout .stage{height:88%;right:auto;left:73%;top:50%;transform:translate(-50%,-50%);max-width:40%;z-index:1;filter:drop-shadow(0 26px 30px rgba(0,0,0,.55))}
.slide.cutout .stage.photo{filter:none}
.slide.active .deco .r1{animation:pulse 1.4s ease-out}
@keyframes pulse{from{opacity:0;transform:translate(-50%,-50%) skewX(-14deg) scale(.9)}to{opacity:1;transform:translate(-50%,-50%) skewX(-14deg) scale(1)}}
.slidenav{position:absolute;left:0;right:0;bottom:26px;z-index:3}
.slidenav .wrap{display:flex;gap:8px;flex-wrap:wrap;padding:0 72px;max-width:none}
.slidenav button{border:0;background:rgba(255,255,255,.14);color:#fff;font:600 .72rem Montserrat,sans-serif;padding:7px 11px;cursor:pointer;letter-spacing:.03em}
.slidenav button:hover{background:rgba(255,255,255,.28)}
.slidenav button.active{background:var(--orange)}
.arrow{position:absolute;top:50%;z-index:3;transform:translateY(-50%);background:rgba(255,255,255,.12);border:0;color:#fff;width:48px;height:48px;font-size:1.4rem;cursor:pointer}
.arrow:hover{background:var(--orange)}
.arrow.prev{left:16px}.arrow.next{right:16px}

/* ---------- Unterseiten-Kopf (gleiche Bildsprache wie der Slider) ---------- */
.banner{position:relative;min-height:340px;overflow:hidden;background:radial-gradient(circle at 75% 45%,#4f7fa8 0%,var(--blue) 30%,var(--navy) 75%);box-shadow:0 24px 50px rgba(17,59,96,.25);z-index:1;display:flex;align-items:center}
.banner.has-photo{background-size:cover;background-position:center}
.banner.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(17,59,96,.93) 0%,rgba(17,59,96,.7) 50%,rgba(17,59,96,.1) 100%)}
.banner .inner{position:relative;z-index:2;padding:48px 72px 70px;color:#fff;max-width:720px}
.banner h1{color:#fff;font-size:clamp(2rem,4vw,3.1rem)}
.banner h1::first-letter{color:var(--orange);font-size:1.35em;line-height:0}
.banner p{font-size:1.08rem;margin:14px 0 24px;opacity:.95}
.banner .stage{height:84%;max-width:34%}
.crumbs{font-size:.8rem;color:#c9d6e2;margin-bottom:14px}
.crumbs a:hover{color:var(--orange-l)}
.crumbs span{margin:0 6px;opacity:.6}

/* ---------- Finder-Balken ---------- */
.finder{background:var(--navy);padding:46px 0;color:#fff;position:relative;overflow:hidden}
.finder::before{content:"";position:absolute;left:0;top:0;width:120px;height:120px;background:var(--blue);clip-path:polygon(0 0,100% 0,0 100%)}
.finder form{display:grid;grid-template-columns:1.1fr 1fr 1fr auto;gap:18px;align-items:center;position:relative}
.finder .finder-title{font-family:Lexend,Montserrat,Arial,sans-serif;line-height:1.2;font-weight:700;opacity:1;color:#fff;font-size:clamp(1.3rem,2.2vw,1.7rem)}
.finder .finder-title::first-letter{color:var(--orange);font-size:1.35em;line-height:0}
select,input,textarea{font:inherit;color:var(--navy);border:1px solid #cfd6dd;padding:14px;width:100%;background:#fff;border-radius:2px}
select:focus,input:focus,textarea:focus{outline:2px solid var(--orange);border-color:transparent}

/* ---------- Einleitung ---------- */
.intro{display:grid;grid-template-columns:1.15fr 1fr;gap:64px;align-items:center}
.intro .sub{font-size:1.15rem;color:var(--blue);margin-top:14px;font-weight:500}
.intro p{margin-top:18px}
.pic{aspect-ratio:4/3;background:linear-gradient(135deg,var(--blue),var(--navy));overflow:hidden;position:relative}
.pic img{width:100%;height:100%;object-fit:cover}
.pic.frame{overflow:visible}
.pic.frame::after{content:"";position:absolute;right:-14px;bottom:-14px;width:45%;height:45%;border-right:6px solid var(--orange);border-bottom:6px solid var(--orange);pointer-events:none}
/* Musterbilder (freigestellt) stehen in einem „Showroom“: dunkler Raum, Licht von unten, Podest, oranger Viertelkreis */
.pic:has(.is-muster){display:flex;align-items:center;justify-content:center;padding:30px 30px 34px;isolation:isolate;
  background:
    radial-gradient(ellipse 38% 7% at 50% 93%,rgba(0,0,0,.5),transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%,rgba(125,175,225,.45),transparent 70%),
    linear-gradient(160deg,#0b2540 0%,var(--navy) 45%,#1d4a73 100%)}
.pic:has(.is-muster)::before{content:"";position:absolute;inset:0;z-index:-1;
  background:repeating-linear-gradient(135deg,rgba(255,255,255,.06) 0 1px,transparent 1px 18px);
  -webkit-mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%);mask:radial-gradient(ellipse 80% 70% at 50% 40%,#000 30%,transparent 80%)}
/* Oranger Diagonal-Keil mit parallel laufender Lichtkante (H&S-Formensprache, kantig) */
.pic:has(.is-muster)::after{content:"";position:absolute;z-index:-1;right:0;bottom:0;width:48%;height:34%;
  background:
    linear-gradient(var(--orange),var(--orange)) no-repeat right bottom/100% 100%;
  clip-path:polygon(38% 0,100% 0,100% 100%,0 100%);
  box-shadow:none}
.zz.rev .pic:has(.is-muster)::after{right:auto;left:0;clip-path:polygon(0 0,62% 0,100% 100%,0 100%)}
/* dünne Lichtkante parallel zum Keil, als zusätzliche Hintergrundebene */
.zz .pic:has(.is-muster){background-image:
    linear-gradient(118deg,transparent 64.2%,rgba(247,166,77,.75) 64.4%,rgba(247,166,77,.75) 64.8%,transparent 65%),
    radial-gradient(ellipse 38% 7% at 50% 93%,rgba(0,0,0,.5),transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%,rgba(125,175,225,.45),transparent 70%),
    linear-gradient(160deg,#0b2540 0%,var(--navy) 45%,#1d4a73 100%)}
.zz.rev .pic:has(.is-muster){background-image:
    linear-gradient(62deg,transparent 35%,rgba(247,166,77,.75) 35.2%,rgba(247,166,77,.75) 35.6%,transparent 35.8%),
    radial-gradient(ellipse 38% 7% at 50% 93%,rgba(0,0,0,.5),transparent 70%),
    radial-gradient(ellipse 70% 45% at 50% 100%,rgba(125,175,225,.45),transparent 70%),
    linear-gradient(160deg,#0b2540 0%,var(--navy) 45%,#1d4a73 100%)}
/* absolut positioniert: Prozent-Höhen in aspect-ratio-Boxen löst Safari nicht zuverlässig auf */
.pic .is-muster{position:absolute;top:30px;left:30px;width:calc(100% - 60px);height:calc(100% - 64px);object-fit:contain;filter:drop-shadow(0 18px 22px rgba(0,0,0,.45))}
.usp{list-style:none;margin-top:26px;display:grid;gap:10px}
.usp li{font-weight:600;color:var(--navy);padding-left:30px;position:relative}
.usp li::before{content:"";position:absolute;left:0;top:.35em;width:16px;height:16px;background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- Zickzack ---------- */
.zz{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.zz + .zz{margin-top:90px}
.zz.rev .pic{order:2}
.zz p{margin:16px 0 26px}
.zz ul,.checks{list-style:none;margin:-8px 0 26px;display:grid;gap:8px}
.zz li,.checks li{padding-left:26px;position:relative}
.zz li::before,.checks li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%)}
.snackery-logo{display:block;height:84px;width:auto;box-sizing:content-box;padding:12px 30px 12px 22px;margin-bottom:18px;background:var(--navy);clip-path:polygon(0 0,100% 0,100% 72%,calc(100% - 22px) 100%,0 100%)}

/* ---------- Fließtext ---------- */
.prose{max-width:820px}
.prose.center-block{margin:0 auto}
.prose h2{margin:0 0 18px}
.prose h3{margin:36px 0 12px;font-size:1.3rem}
.prose p{margin-bottom:16px}
.prose ul,.prose ol{margin:0 0 20px 0;padding-left:0;list-style:none;display:grid;gap:8px}
.prose ul li{padding-left:26px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:12px;background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%)}
.prose ol{counter-reset:n}
.prose ol li{padding-left:38px;position:relative;counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:0;width:26px;height:26px;background:var(--navy);color:#fff;font-weight:700;font-size:.8rem;display:flex;align-items:center;justify-content:center}
.prose a{color:var(--orange);font-weight:600}
.prose a:hover{color:var(--navy)}
.prose strong{color:var(--navy)}
.prose.numbered{counter-reset:abschnitt}
.prose.numbered h2::before{counter-increment:abschnitt;content:counter(abschnitt) ". "}
.two-col{display:grid;grid-template-columns:1.4fr 1fr;gap:64px;align-items:start}

/* ---------- Karten / Vorteile ---------- */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:48px}
.cards.c2{grid-template-columns:repeat(2,1fr)}
.cards.c4{grid-template-columns:repeat(4,1fr)}
.card{background:#fff;padding:34px 28px;box-shadow:0 6px 24px rgba(17,59,96,.07);border-bottom:4px solid transparent;transition:.2s;display:flex;flex-direction:column}
.muted .card{background:#fff}
a.card:hover{border-bottom-color:var(--orange);transform:translateY(-4px)}
.card h3{font-size:1.2rem;margin-bottom:10px}
.card p{flex:1}
.card .more{margin-top:16px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;color:var(--orange)}
.icon{width:58px;height:58px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex:none}
.icon img{width:42px;height:42px;object-fit:contain}
.icon svg{width:28px;height:28px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* Ausstattungsliste */
.spec{columns:2;column-gap:40px;list-style:none;margin-top:26px}
.spec li{break-inside:avoid;padding:10px 0 10px 26px;border-bottom:1px solid var(--line);position:relative}
.spec li::before{content:"";position:absolute;left:0;top:1.05em;width:12px;height:12px;background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- Automaten-Kacheln ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:48px}
.tile{position:relative;aspect-ratio:4/5;overflow:hidden;background:radial-gradient(circle at 60% 40%,#4f7fa8 0%,var(--blue) 35%,var(--navy) 80%);display:block}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.tile img.is-muster{object-fit:contain;padding:24px 24px 70px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.4))}
.tile:hover img{transform:scale(1.05)}
.tile.foto img.is-muster{object-fit:cover;padding:0;filter:none}
.tile.beratung{background:var(--orange);color:#fff;display:flex;flex-direction:column;justify-content:center}
.tile.beratung::before{content:"";position:absolute;left:0;top:0;width:45%;height:30%;background:var(--navy);clip-path:polygon(0 0,100% 0,0 100%)}
.tile.beratung .txt{position:relative;padding:28px 24px 70px;font-size:.95rem;line-height:1.5}
.tile.beratung .label{color:var(--navy);margin-bottom:10px}
.tile.beratung strong{display:block;font-family:Lexend,sans-serif;font-size:1.35rem;line-height:1.2;margin-bottom:8px}
.tile.beratung .cap{background:none}
.tile.beratung .cap i{background:var(--navy)}
.tile.beratung:hover{background:var(--orange-l)}
.tile .cap{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(transparent,rgba(17,59,96,.92));color:#fff;font-family:Lexend,sans-serif;font-weight:700;display:flex;justify-content:space-between;align-items:end;gap:10px}
.tile .cap i{font-style:normal;background:var(--orange);width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex:none}

/* ---------- Hersteller ---------- */
.brands{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;margin-top:40px}
.brands div{height:84px;background:#fff;display:flex;align-items:center;justify-content:center;font-family:Lexend,sans-serif;font-weight:700;font-size:1.15rem;color:var(--navy);letter-spacing:.02em;border-bottom:3px solid var(--orange);box-shadow:0 6px 20px rgba(17,59,96,.06);text-align:center;padding:0 10px}
.brands img{max-height:48px;max-width:80%;object-fit:contain}

/* ---------- Referenzen ---------- */
.head-row{display:flex;justify-content:space-between;align-items:end;gap:20px;flex-wrap:wrap;margin-bottom:44px}
.ref-slider{position:relative}
.ref-track{display:flex;gap:28px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;padding:6px 4px 30px}
.ref-track::-webkit-scrollbar{display:none}
.ref{flex:0 0 calc((100% - 56px)/3);scroll-snap-align:start;background:#fff;box-shadow:0 8px 28px rgba(17,59,96,.1);display:flex;flex-direction:column;border-bottom:4px solid var(--orange)}
.ref-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.ref .ph{aspect-ratio:4/5;background:linear-gradient(135deg,var(--blue),var(--navy));overflow:hidden;position:relative}
.ref .ph img{width:100%;height:100%;object-fit:cover}
.ref .ph:has(.is-muster){background:#fff;display:flex;align-items:center;justify-content:center;padding:18px}
.ref .ph .is-muster{object-fit:contain}
.ref .ph .tag{position:absolute;left:0;bottom:0;background:var(--navy);color:#fff;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.07em;padding:8px 14px}
.ref .who{padding:22px 24px 0}
.ref h3{font-size:1.2rem}
.ref .firma{font-weight:700;color:var(--orange);margin-top:2px}
.ref .ort{font-size:.85rem;color:var(--gg);font-weight:600;margin-top:2px}
.ref .ort::before{content:"";display:inline-block;width:9px;height:9px;background:var(--orange);clip-path:polygon(50% 100%,0 0,100% 0);margin-right:7px}
.ref blockquote{margin:18px 24px 26px;padding:18px 0 0;border-top:1px solid var(--line);font-style:italic;font-size:.95rem;position:relative;flex:1}
.ref blockquote::before{content:"“";position:absolute;right:0;top:-6px;font:700 4rem/1 Lexend,sans-serif;color:var(--orange);opacity:.25}
.ref-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:6px}
.ref-dots{display:flex;gap:8px}
.ref-dots button{width:30px;height:5px;border:0;background:#cfd6dd;cursor:pointer;padding:0}
.ref-dots button.active{background:var(--orange)}
.ref-arrows{display:flex;gap:8px}
.ref-arrows button{width:46px;height:46px;border:0;background:var(--navy);color:#fff;font-size:1.3rem;cursor:pointer}
.ref-arrows button:hover{background:var(--orange)}

/* ---------- FAQ ---------- */
.faq{max-width:900px;margin:40px auto 0}
.faq details{background:#fff;margin-bottom:12px;box-shadow:0 4px 16px rgba(17,59,96,.06);border-left:4px solid transparent;transition:border-color .2s}
.faq details[open]{border-left-color:var(--orange)}
.faq summary{cursor:pointer;list-style:none;padding:20px 60px 20px 24px;font-family:Lexend,sans-serif;font-weight:700;color:var(--navy);position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);width:28px;height:28px;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.faq details[open] summary::after{content:"–";background:var(--orange)}
.faq .answer{padding:0 24px 22px}
.faq .answer p{margin-bottom:12px}
.faq .answer ul{list-style:none;display:grid;gap:6px;margin-bottom:12px}
.faq .answer li{padding-left:22px;position:relative}
.faq .answer li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--orange);clip-path:polygon(0 0,100% 50%,0 100%)}

/* ---------- Ablauf ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:52px;counter-reset:s}
.step{position:relative;padding-top:64px}
.step::before{counter-increment:s;content:"0" counter(s);position:absolute;top:0;left:0;font-family:Lexend,sans-serif;font-size:3rem;font-weight:700;color:var(--orange);line-height:1}
.step h3{font-size:1.15rem;margin-bottom:8px}

/* ---------- Aufruf-Balken ---------- */
.cta{background:var(--orange) center/cover no-repeat;position:relative;padding:100px 0;color:#fff;overflow:hidden}
.cta::before{content:"";position:absolute;inset:0;background:rgba(241,133,40,.9)}
.cta::after{content:"";position:absolute;left:0;top:0;width:240px;height:100%;background:var(--navy);clip-path:polygon(0 0,100% 0,40% 100%,0 100%)}
.cta .wrap{position:relative;z-index:1;max-width:860px;text-align:center}
.cta h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.6rem)}
.cta h2::first-letter{color:var(--navy);font-size:1.35em;line-height:0}
.cta p{font-size:1.1rem;margin:20px auto 32px;max-width:700px}
.cta .btns{justify-content:center}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:1fr 1.4fr;gap:56px}
.person{background:var(--navy);color:#fff;padding:40px 34px;position:relative;overflow:hidden;align-self:start}
.person::after{content:"";position:absolute;right:0;bottom:0;width:140px;height:46px;background:var(--orange);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.person h3{color:#fff}
.portrait{width:130px;height:130px;border-radius:50%;background:var(--blue);overflow:hidden;margin-bottom:20px;border:4px solid var(--orange)}
.portrait img{width:100%;height:100%;object-fit:cover}
.person ul{list-style:none;margin:22px 0 30px;display:grid;gap:10px}
.person li b{color:var(--orange-l);font-weight:600;display:inline-block;min-width:80px}
.person a:hover{color:var(--orange-l)}
.q{font-weight:800;font-style:italic;text-transform:uppercase;color:var(--orange-l);letter-spacing:.04em;margin-top:6px;font-size:.88rem}
.cform .row{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px}
.cform label{font-size:.82rem;font-weight:600;color:var(--navy);display:block;margin-bottom:5px}
.cform .full{margin-bottom:16px}
.cform .check{display:flex;gap:10px;align-items:flex-start;font-size:.85rem;margin-bottom:22px;font-weight:400;color:var(--text)}
.cform .check input{width:auto;margin-top:4px}
.cform .check a{color:var(--orange);font-weight:600}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.note{font-size:.8rem;color:var(--gg);margin-top:12px}
.form-msg{margin-top:16px;padding:14px 18px;font-weight:600;display:none}
.form-msg.ok{display:block;background:#e9f3ec;color:#1d5a32;border-left:4px solid #2f8a4c}
.form-msg.err{display:block;background:#fdecea;color:#8a1f12;border-left:4px solid #c0392b}

/* ---------- Abschluss + Fußzeile ---------- */
.closing{background:var(--navy);color:#c9d6e2;padding:90px 0 0}
.closing h2{color:#fff}
.closing h2::first-letter{color:var(--orange);font-size:1.35em;line-height:0}
.closing .sub{color:var(--orange-l);font-weight:600;margin-top:10px}
.boxes{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin:48px 0 70px}
.box{background:var(--blue);padding:40px 36px;position:relative;overflow:hidden;color:#fff}
.box::after{content:"";position:absolute;right:0;bottom:0;width:120px;height:40px;background:var(--orange);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.box .label{color:var(--orange-l)}
.box h3{color:#fff;margin-bottom:10px}
.box p{margin-bottom:24px;opacity:.92}
footer.closing.slim{padding-top:64px}
footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;font-size:.92rem}
footer h4{color:#fff;font-family:Montserrat,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;margin-bottom:16px}
footer ul{list-style:none;display:grid;gap:8px}
footer a:hover{color:var(--orange-l)}
footer .bottom{margin-top:52px;border-top:1px solid rgba(255,255,255,.12);padding:20px 0;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.82rem}
footer .bottom button{background:none;border:0;color:inherit;font:inherit;cursor:pointer}
footer .bottom button:hover{color:var(--orange-l)}
.flogo{display:inline-block;margin-bottom:16px;background:#fff;padding:10px 14px}
.flogo img{height:56px}

/* ---------- Cookie-Hinweis ---------- */
.consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;max-width:560px;background:#fff;box-shadow:0 18px 50px rgba(17,59,96,.3);border-top:5px solid var(--orange);padding:24px 26px;display:none}
.consent.show{display:block}
.consent h3{font-size:1.1rem;margin-bottom:8px}
.consent p{font-size:.88rem;margin-bottom:16px}
.consent p a{color:var(--orange);font-weight:600}
.consent .btns .btn{padding:12px 20px;font-size:.78rem}
.consent .cats{display:grid;gap:10px;margin:0 0 18px}
.consent .cats .check{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;cursor:pointer}
.consent .cats .check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--orange)}
.consent .btn.ghost{background:transparent;color:var(--navy);border:2px solid var(--navy)}

.staging{position:fixed;right:16px;bottom:16px;z-index:99;background:var(--navy);color:#fff;font-size:.75rem;padding:8px 12px;border-left:4px solid var(--orange)}

/* ---------- Responsive ---------- */
@media (max-width:1000px){
  nav.menu{display:none}
  .burger{display:block}
  nav.menu.open{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:100px;left:0;right:0;background:#fff;padding:10px 24px 20px;box-shadow:0 12px 30px rgba(17,59,96,.15);max-height:calc(100vh - 100px);overflow:auto}
  nav.menu.open > .item > a{padding:12px 0}
  nav.menu.open .drop{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 8px 12px;min-width:0}
  nav.menu.open .drop a{padding:6px 0}
  .arrow{display:none}
  .slidenav button{display:block;width:28px;height:5px;padding:0;font-size:0}
  .slide .wrap,.slidenav .wrap{padding:0 32px}
  .stage{right:4%;max-width:42%;opacity:.35}
  .slide p{max-width:70%}
  .deco{--cx:76%}
  .deco .word{font-size:90px}
  .slide.cutout .stage{left:76%}
  .feats li{padding:0 12px;max-width:96px;font-size:.62rem}
  .feats svg{width:28px;height:28px}
  .banner .inner{padding:40px 32px 70px}
  .hero::before{width:140px;height:140px}
  .finder form{grid-template-columns:1fr}
  .intro,.zz,.two-col,.contact{grid-template-columns:1fr;gap:36px}
  .zz.rev .pic{order:0}
  .ref{flex-basis:calc((100% - 28px)/2)}
  .ref-grid,.cards,.cards.c4{grid-template-columns:1fr 1fr}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .brands{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:1fr 1fr}
  .boxes{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  section{padding:64px 0}
  .zz + .zz{margin-top:64px}
  .wrap{padding:0 16px}
  .topbar .hide-s{display:none}
  .ref{flex-basis:86%}
  .ref-grid,.cards,.cards.c2,.cards.c4,.steps{grid-template-columns:1fr}
  .tiles{grid-template-columns:1fr 1fr;gap:12px}
  .brands{grid-template-columns:1fr 1fr}
  .spec{columns:1}
  .cform .row{grid-template-columns:1fr}
  footer .cols{grid-template-columns:1fr}
  .slider::after,.banner::after{height:50px}
  .hero{padding:16px 0 36px}
  .hero-frame{padding:0 12px}
  .slide .wrap,.slidenav .wrap{padding:0 22px}
  .slide .wrap{padding-bottom:50px}
  .slider{height:auto;min-height:560px}
  .slide p{max-width:100%;font-size:.98rem}
  .feats li{padding:0 9px;max-width:78px;font-size:.56rem}
  .feats li:nth-child(n+4){display:none}
  .deco .word,.deco .r2{display:none}
  .deco .band{width:70%}
  .slide .btns .ghost{display:none}
  .banner .inner{padding:32px 22px 64px}
  .banner .stage{opacity:.25}
  .cta::after{width:90px}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
}

/* Schnellkontakt-Leiste nur auf dem Handy */
.mobilbar{display:none}
@media (max-width:720px){
  .mobilbar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:200;box-shadow:0 -6px 20px rgba(17,59,96,.18);padding-bottom:env(safe-area-inset-bottom,0px);background:var(--navy)}
  .mobilbar a{display:flex;align-items:center;justify-content:center;min-height:52px;font-weight:800;font-size:.85rem;letter-spacing:.06em;text-transform:uppercase;color:#fff}
  .mobilbar a.on{background:var(--orange)}
  body{padding-bottom:calc(52px + env(safe-area-inset-bottom,0px))}
  .consent{bottom:calc(64px + env(safe-area-inset-bottom,0px))}
  .staging{bottom:60px}
}

/* Vergleichstabellen */
.tbl.panel{background:#fff;padding:0;box-shadow:0 6px 20px rgba(17,59,96,.06);margin-top:36px}
table.vergleich{border-collapse:collapse;width:100%;min-width:560px;font-size:.92rem}
.vergleich th{background:var(--navy);color:#fff;text-align:left;padding:14px 16px;font-family:Montserrat,sans-serif;font-weight:800;font-size:.78rem;letter-spacing:.06em;text-transform:uppercase}
.vergleich td{padding:12px 16px;border-bottom:1px solid #E6E8EB;vertical-align:top}
.vergleich tr:nth-child(even) td{background:#FDF6EF}
.vergleich a{color:var(--orange);font-weight:700}