/* showcase.css — inrema-design Skin (Editorial-Bold) fuer index-neu.html.
   Nur Ueberschreibungen auf Basis von main.css. Kritik: P5 H4 A4 S5 Z4 V4 */

/* --- Typo-Paarung: Display auf Ueberschriften, ruhige Body --- */
h1,h2,h3,h4,.hero h1,.shead h2,.kicker,.step h3,.vcard__b h3,.icard h3,.tile h3{font-family:var(--display)}
body{font-family:var(--sans);letter-spacing:-.005em}
.hero h1{font-weight:800;letter-spacing:-.035em}
.shead h2{font-weight:800}
.lead{color:var(--ink-2)}

/* --- Generischen Blob raus, Swoosh rein --- */
.blob{display:none!important}
/* Signatur-Swoosh im Hero (aus dem Logo abgeleitet) */
.hero__swoosh{position:absolute;z-index:0;right:-4%;top:6%;width:min(58vw,720px);pointer-events:none;opacity:.9}
.hero__swoosh path{fill:none;stroke:var(--red);stroke-width:7;stroke-linecap:round}
.hero__grid{grid-template-columns:1.15fr .85fr}
.hero__media{transform:rotate(-1.2deg);border-radius:4px 22px 22px 22px}  /* eine gebrochene Ecke statt rundum-generisch */

/* Eyebrow: kleiner Swoosh statt Balken */
.eyebrow{color:var(--red)}
.eyebrow::before{width:34px;height:8px;background:none;border-radius:0;
  -webkit-mask:url("../img/swoosh.svg") no-repeat center/contain;mask:url("../img/swoosh.svg") no-repeat center/contain;background-color:var(--red)}

/* --- Echtes Icon-System statt Emojis --- */
.path-card .ic,.icard .ic{width:52px;height:52px;display:grid;place-items:center;background:var(--red-050);border-radius:14px;flex:0 0 auto}
.ic svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.appbar .ic{background:none}
.appbar .ic svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}
.chat-fab svg{width:26px;height:26px;stroke:#fff;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.icon-inline{width:1em;height:1em;vertical-align:-.12em;stroke:currentColor;fill:none;stroke-width:1.8}

/* --- Karten entschlacken: Hairline statt Schatten-Soup, Asphalt fuer Sekundaeres --- */
.vcard,.step,.icard,.loc-card{box-shadow:none;border:1px solid var(--line);background:var(--paper)}
.vcard:hover,.loc-card:hover{box-shadow:0 14px 34px -18px rgba(21,23,28,.35)}
a.step:hover,a.icard:hover{box-shadow:0 14px 34px -18px rgba(21,23,28,.35)}
.step .k,.vcard__b .tag,.icard h3+*{}
.step .k{color:var(--asphalt)}
.step::before{color:var(--bg-2)}
.hero__stats{border-top-color:var(--ink)}
.hero__stats span{color:var(--asphalt)}

/* --- Section-Divider: durchgehender Swoosh (Peak-Motiv) --- */
.rule-swoosh{display:block;width:100%;height:22px;color:var(--red);overflow:hidden}
.rule-swoosh svg{width:100%;height:100%}
.rule-swoosh path{fill:none;stroke:currentColor;stroke-width:3;opacity:.55}

/* --- Marquee: Stern raus, Swoosh-Trenner --- */
.band__grp span::after{content:"";width:14px;height:6px;margin-left:1.3rem;display:inline-block;
  -webkit-mask:url("../img/swoosh.svg") no-repeat center/contain;mask:url("../img/swoosh.svg") no-repeat center/contain;background-color:rgba(255,255,255,.6)}

/* --- Scroll-gezeichneter Swoosh links (Signatur, nativ scroll-timeline + JS-Fallback) --- */
.roadline{position:fixed;top:0;left:max(10px,calc((100vw - 1280px)/2 - 30px));width:34px;height:100vh;z-index:5;pointer-events:none}
.roadline svg{width:100%;height:100%}
.roadline .rl-base{fill:none;stroke:var(--line);stroke-width:3}
.roadline .rl-draw{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round}
@media (max-width:1360px){.roadline{display:none}}
@media (prefers-reduced-motion:reduce){.hero__media{transform:none}}

/* --- OSM-Embed-Karte (iframe): gleiche Rundung/Rahmen wie .map-ph --- */
iframe.fgs-map{display:block;width:100%;height:420px;border:2px solid var(--line);border-radius:22px;background:var(--bg-2)}
.fgs-mapwrap{align-self:start}
.fgs-mapnote{margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.fgs-mapnote a{color:var(--red);font-weight:700;text-decoration:none}
.fgs-mapnote a:hover{text-decoration:underline}
/* Standortsuche ueber der Liste */
.loc-search{display:block;margin-bottom:.7rem}
.loc-search input{width:100%;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:var(--r);
  background:var(--paper);color:var(--ink);font:inherit;font-size:1rem}
.loc-search input:focus{outline:none;border-color:var(--red);box-shadow:var(--ring)}
/* Popup-Inhalt */
.fgs-pop{display:grid;gap:.25rem;min-width:180px}
.fgs-pop b{color:var(--ink);font-size:1.05rem;font-family:var(--display)}
.fgs-pop__adr,.fgs-pop__zeit{color:var(--ink-2);font-size:.9rem}
.fgs-pop__link{color:var(--red);font-weight:800;text-decoration:none;margin-top:.3rem}
.fgs-pop__link:hover{text-decoration:underline}

/* === Feedback 2026-08-17: Swoosh/Roadline entfernen, Nav stabilisieren, AppBar 4-spaltig === */
.hero__swoosh{display:none!important}          /* Hero-Bogen (2 Linien) raus */
.roadline{display:none!important}              /* linker Scroll-Streifen raus */
.eyebrow::before{-webkit-mask:none!important;mask:none!important;background:var(--red)!important;width:30px!important;height:3px!important;border-radius:2px}
.band__grp span::after{-webkit-mask:none!important;mask:none!important;background:none!important;content:"·"!important;width:auto!important;height:auto!important;color:rgba(255,255,255,.55)!important;font-size:1.5rem!important;margin-left:1.3rem}
/* Nav immer als ruhige Leiste (kein Aufpoppen beim Scrollen) */
.nav{background:rgba(251,248,244,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav.stuck{box-shadow:0 2px 20px rgba(21,23,28,.06)}
.appbar{grid-template-columns:repeat(4,1fr)}

/* === Kontakt: grosses eingebettetes Co-Pilot-Fenster (kein Oeffnen unten rechts) === */
.copilot-grid{display:grid;grid-template-columns:1fr minmax(240px,300px);gap:1.4rem;align-items:stretch}
@media(max-width:860px){.copilot-grid{grid-template-columns:1fr}}
.chat-panel--embed{position:static;right:auto;bottom:auto;z-index:auto;width:100%;max-width:none;
  transform:none;opacity:1;pointer-events:auto;box-shadow:0 24px 60px -30px rgba(21,23,28,.35);
  display:flex;flex-direction:column;min-height:560px}
.chat-panel--embed .chat-body{flex:1 1 auto;max-height:none;min-height:320px}
.copilot-side{display:grid;gap:1rem;align-content:start}
.copilot-side .icard{margin:0}
/* Sende-Button in Markenrot statt WhatsApp-Gruen (Co-Pilot ist nicht WhatsApp) */
.chat-foot button{background:var(--red)}
/* Wo ein grosses Inline-Fenster steht (Kontaktseite), das schwebende FAB ausblenden */
body:has(.chat-panel--embed) .chat-fab,
body:has(.chat-panel--embed) #chatPanel{display:none!important}

/* === Ratgeber-/Artikel-Seiten: breite, gerahmte Landing-Optik statt schmaler Lesespalte === */
.section:has(> .wrap.prose){background:var(--bg-soft)}
.wrap.prose{max-width:940px;background:var(--paper);border:1px solid var(--line);border-radius:24px;
  padding:clamp(1.6rem,4.5vw,3.4rem);box-shadow:0 30px 70px -45px rgba(21,23,28,.45)}
.wrap.prose>.reveal>p:first-child{font-size:1.2rem;color:var(--ink)}
@media(max-width:600px){.wrap.prose{border-radius:16px}}

/* === Landing-Baustein: helle Bild-Text-Sektion im Wechsel (mediarow) === */
.mediarow{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(1.4rem,4vw,3.2rem);align-items:center}
.mediarow + .mediarow{margin-top:clamp(2rem,5vw,3.6rem)}
.mediarow__img{border-radius:22px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 26px 60px -38px rgba(21,23,28,.55);order:2}
.mediarow__img img{width:100%;height:100%;object-fit:cover;display:block}
.mediarow__b{order:1}
.mediarow__b h2{font-size:clamp(1.5rem,3vw,2.15rem);letter-spacing:-.02em;margin:.5rem 0 .7rem}
.mediarow__b p{color:var(--ink-2);line-height:1.75;margin:0 0 1rem;font-size:1.05rem}
.mediarow--rev .mediarow__img{order:1}
.mediarow--rev .mediarow__b{order:2}
@media(max-width:820px){.mediarow{grid-template-columns:1fr}.mediarow__img,.mediarow--rev .mediarow__img{order:-1}}

/* === Landing-Bausteine: Fakten-Streifen, Checkliste, Callout === */
.factbar{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem}
.factbar div{text-align:center;padding:1.5rem 1rem;border:1px solid var(--line);border-radius:18px;background:var(--paper)}
.factbar b{display:block;font-family:var(--display);font-size:clamp(1.4rem,2.4vw,1.9rem);color:var(--red);letter-spacing:-.02em;line-height:1}
.factbar span{display:block;color:var(--asphalt);font-size:.88rem;margin-top:.45rem}
@media(max-width:700px){.factbar{grid-template-columns:1fr 1fr}}
.checklist{display:grid;gap:.85rem;margin:0;padding:0;list-style:none}
.checklist li{display:grid;grid-template-columns:auto 1fr;gap:.75rem;align-items:start;font-size:1.05rem;color:var(--ink-2);line-height:1.55}
.checklist svg{width:24px;height:24px;stroke:var(--red);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto;margin-top:.1rem}
.checklist b{color:var(--ink)}
.callout{border:1px solid var(--line);border-left:5px solid var(--red);border-radius:18px;background:var(--paper);padding:clamp(1.4rem,3.4vw,2.4rem)}
.callout .eyebrow{margin-bottom:.5rem}
.callout h2{margin:.1rem 0 .7rem;font-size:clamp(1.4rem,2.6vw,1.9rem)}
.callout p{color:var(--ink-2);line-height:1.75;margin:0 0 1rem}

/* === FIX: Step-Überschrift kollidierte mit der grossen Nummer === */
.step{overflow:hidden}
.step .k,.step h3,.step p{position:relative;z-index:1}
.step h3{font-size:1.15rem;line-height:1.15;overflow-wrap:normal;word-break:normal}
/* grosse Nummer als Wasserzeichen nach unten-rechts, hinter den Text */
.step::before{font-size:3rem;top:auto;bottom:.3rem;right:.7rem;z-index:0;line-height:1}

/* === FIX: Nav deckend statt durchscheinend (kein Durchbluten von Hero-Inhalten) === */
.nav{background:var(--paper)!important;backdrop-filter:none!important;border-bottom:1px solid var(--line)}
.nav.stuck{box-shadow:0 2px 20px rgba(21,23,28,.06)}

/* === Klickbare Karten sichtbar machen (Link-Affordance) === */
a.icard{cursor:pointer}
.icard__go{display:inline-block;margin-top:.7rem;color:var(--red);font-weight:800;font-size:.9rem}
a.icard:hover .icard__go{text-decoration:underline}
a.icard:hover h3{color:var(--red)}

/* === Ausgewogene CTA-Verteilung: finaler CTA mit 3 Aktionen (dunkler Block) === */
.cta__actions{display:flex;gap:.7rem;justify-content:center;flex-wrap:wrap}
.cta .pill--ghost{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.cta .pill--ghost:hover{background:rgba(255,255,255,.14);border-color:#fff}

/* === FIX: dekorativer Verlauf fing Klicks ab → CTAs rechts unklickbar === */
.cta::after,.feature::after{pointer-events:none}
.cta__actions,.cta .pill,.feature .pill{position:relative;z-index:2}

/* === Co-Pilot: grüner, sanft pulsierender Status-Punkt (online-Signal) === */
.chat-head .dot{background:#25D366!important;box-shadow:0 0 0 0 rgba(37,211,102,.55)!important;animation:dotpulse 2s ease-out infinite}
@keyframes dotpulse{0%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}70%{box-shadow:0 0 0 9px rgba(37,211,102,0)}100%{box-shadow:0 0 0 0 rgba(37,211,102,0)}}
@media(prefers-reduced-motion:reduce){.chat-head .dot{animation:none}}

/* === Mobil: schwebendes Chat-FAB raus (Co-Pilot steckt in der App-Bar) === */
@media(max-width:980px){.chat-fab{display:none!important}}
.appbar button{background:none;border:0;cursor:pointer;font:inherit;display:flex;flex-direction:column;align-items:center;gap:.15rem;padding:.5rem 0;font-size:.66rem;font-weight:700;color:var(--ink)}

/* === Newsbereich: Zeitungs-Optik === */
.news-ticker{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem;background:var(--ink);color:#fff;border-radius:16px;padding:.9rem 1.2rem;font-weight:700;margin:0 0 1.6rem}
.news-ticker .nt-dot{width:10px;height:10px;border-radius:50%;background:#25D366;box-shadow:0 0 0 0 rgba(37,211,102,.55);animation:dotpulse 2s ease-out infinite;flex:0 0 auto}
.news-ticker .nt-label{color:var(--red-2);text-transform:uppercase;font-size:.72rem;letter-spacing:.08em}
.news-ticker b{color:#fff}
.news-ticker span.nt-sub{color:var(--on-dark-mut);font-weight:600}
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.news-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--paper);text-decoration:none;color:inherit;transition:.2s var(--ease)}
.news-card:hover{box-shadow:0 18px 44px -24px rgba(21,23,28,.4);transform:translateY(-3px)}
.news-card:hover h3{color:var(--red)}
.news-card>img{width:100%;aspect-ratio:16/10;object-fit:cover;display:block}
.news-card__b{padding:1rem 1.2rem 1.25rem;display:flex;flex-direction:column;gap:.45rem;flex:1}
.news-card .cat{align-self:flex-start;background:var(--red);color:#fff;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em;padding:.22rem .6rem;border-radius:999px}
.news-card h3{font-size:1.15rem;margin:0;line-height:1.2}
.news-card p{color:var(--ink-2);font-size:.93rem;margin:0;line-height:1.5}
.news-card .news-more{color:var(--red);font-weight:800;font-size:.85rem;margin-top:auto}
.news-card--lead{grid-column:1 / -1;flex-direction:row;align-items:stretch}
.news-card--lead>img{width:46%;aspect-ratio:auto;min-height:260px}
.news-card--lead .news-card__b{justify-content:center;padding:2rem}
.news-card--lead h3{font-size:clamp(1.4rem,2.6vw,2rem)}
.news-card--lead p{font-size:1.02rem}
@media(max-width:820px){.news-grid{grid-template-columns:1fr 1fr}.news-card--lead{flex-direction:column}.news-card--lead>img{width:100%;aspect-ratio:16/10;min-height:0}.news-card--lead .news-card__b{padding:1.2rem}}
@media(max-width:560px){.news-grid{grid-template-columns:1fr}}
/* Desktop-Nav News-Button */
.nav__r .pill--news{display:none}
@media(min-width:721px){.nav__r .pill--news{display:inline-flex}}
.pill--news{background:#fff;border-color:var(--line);color:var(--ink)}
.pill--news:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* === News-Redaktion (Editor auf der Login-Seite) === */
.cms-form{display:grid;gap:.3rem;max-width:560px}
.cms-form label{font-weight:800;font-size:.85rem;color:var(--ink);margin-top:.7rem}
.cms-form input,.cms-form select,.cms-form textarea{border:1.5px solid var(--line);border-radius:12px;padding:.7rem .9rem;font-family:inherit;font-size:.95rem;outline:none;background:var(--paper);color:var(--ink)}
.cms-form input:focus,.cms-form select:focus,.cms-form textarea:focus{border-color:var(--red)}
.cms-list{display:grid;gap:.6rem}
.cms-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;border:1px solid var(--line);border-radius:12px;padding:.7rem 1rem;background:var(--paper)}
.cms-del{background:var(--ink)!important;color:#fff!important;border-color:var(--ink)!important;cursor:pointer}

/* === Mobil-Fixes 2026-08-17 (Hero-Overflow, Nav/Logo, App-Bar, Co-Pilot-Glow) === */
@media(max-width:560px){
  .hero h1{font-size:clamp(2.05rem,10vw,3rem);letter-spacing:-.03em}
  .hero h1 .l2{overflow-wrap:normal;word-break:normal}
}
@media(max-width:720px){
  /* Top-Nav entschlacken: "Jetzt anmelden" steckt in der App-Bar -> Header nur Logo + Menü, Logo bekommt Luft */
  .nav__r .pill--red{display:none}
  .brand img{height:38px}
  .nav .wrap{padding-block:.55rem}
}
/* App-Bar deckend + über dem Laufband (Labels klar lesbar) */
.appbar{background:var(--paper)!important;backdrop-filter:none!important;border-top:1px solid var(--line);z-index:60;box-shadow:0 -2px 16px rgba(21,23,28,.08)}
/* Co-Pilot in der App-Bar: sauberer roter Kreis-Button + dezenter Puls-Ring (kein Schmier) */
.appbar a[data-chat]{color:var(--red)}
.appbar a[data-chat] .ic{position:relative;width:36px;height:36px;border-radius:50%;background:var(--red);display:grid;place-items:center;box-shadow:0 5px 14px rgba(227,10,23,.35);margin-top:-6px}
.appbar a[data-chat] .ic svg{stroke:#fff;width:19px;height:19px}
.appbar a[data-chat] .ic::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--red);animation:cpring 2.4s var(--ease) infinite}
@keyframes cpring{0%{opacity:.5;transform:scale(1)}70%,100%{opacity:0;transform:scale(1.7)}}
@media(prefers-reduced-motion:reduce){.appbar a[data-chat] .ic::after{animation:none;opacity:0}}