/* Dörig 2026-09-24: Unterseiten im Stil der neuen Startseite.
   Liegt NACH style.css/components.css und überschreibt nur Aussehen, nicht Aufbau.
   Kopf/Fuss/Schwebeknöpfe tragen eigene Klassen (kopf, knav, fuss, schwebe), damit
   die alten Regeln für .hdr/.nav/.ft nicht greifen; app.js findet sie weiter über
   die IDs hdr/nav/burger. */
:root{
  --navy:#0057B8; --deep:#003B7E; --abyss:#06182E; --accent:#6DB6E6; --water:#EAF4FB;
  --ink:#111820; --muted:#4E5864; --papier:#FBFCFD; --linie:#DCE3EA;
  --ff-b:"Poppins",system-ui,sans-serif; --r:18px;
}
body{background:var(--papier)}
:focus-visible{outline:3px solid var(--navy);outline-offset:3px;border-radius:6px}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto 0;z-index:100;background:rgba(251,252,253,.95);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--linie)}
.kopf__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.klogo{display:flex;align-items:center;min-height:44px;min-width:0}
.klogo img{height:58px;width:auto}
.knav{display:flex;align-items:center;gap:4px}
.knav a{font:600 .92rem var(--ff-d);text-decoration:none;padding:12px 10px;border-radius:10px;color:var(--ink);white-space:nowrap}
.knav a:hover,.knav a[aria-current=page]{color:var(--navy)}
.knav .knav__cta{background:var(--navy);color:#fff;padding:12px 18px;margin-left:8px}
.knav .knav__cta:hover{background:var(--deep);color:#fff}
.kburger{display:none;width:48px;height:48px;border:0;background:none;cursor:pointer;border-radius:10px}
.kburger span{display:block;width:24px;height:2px;background:var(--ink);margin:6px auto;transition:transform .3s}
@media (max-width:1180px){
  .kburger{display:block}
  .knav{position:fixed;inset:76px 0 auto 0;flex-direction:column;align-items:stretch;background:var(--papier);padding:12px var(--gut) 24px;border-bottom:1px solid var(--linie);transform:translateY(-120%);visibility:hidden;transition:transform .35s var(--ease),visibility .35s}
  .knav.open{transform:none;visibility:visible}
  .knav a{padding:14px 8px;font-size:1.05rem}
  .knav .knav__cta{margin:10px 0 0;text-align:center}
  .kburger[aria-expanded=true] span:first-child{transform:translateY(4px) rotate(45deg)}
  .kburger[aria-expanded=true] span:last-child{transform:translateY(-4px) rotate(-45deg)}
  .klogo img{height:46px}
}

/* Seiten-Hero: Kante statt gerader Linie, Display-Typo wie Startseite */
.phero{clip-path:polygon(0 0,100% 0,100% calc(100% - 5vw),62% 100%,0 calc(100% - 2vw));padding-bottom:clamp(4rem,9vh,6rem)}
.phero::after{background:linear-gradient(100deg,rgba(6,24,46,.9) 0%,rgba(6,24,46,.7) 50%,rgba(0,59,126,.35) 100%)}
.phero h1{font-weight:800;letter-spacing:-.035em;font-size:clamp(2.2rem,1.4rem + 4vw,5rem)}
.eyebrow{font:600 .8rem var(--ff-d);letter-spacing:.18em;text-transform:uppercase;color:#CFE6F7}
.crumbs{color:#CFE6F7}

/* Überschriften und Kicker */
.kicker{color:var(--navy);letter-spacing:.2em;display:flex;align-items:center;gap:12px}
.kicker::before{content:"";width:26px;height:2px;background:currentColor;flex:none}
.sec--dark .kicker,.endcta .kicker{color:var(--accent)}
.h2{font-weight:800;letter-spacing:-.03em}
.sec__lead{color:var(--muted)}
.sec--dark{background:var(--abyss)}

/* Knöpfe: Pillen wie auf der Startseite */
.btn{border-radius:999px;min-height:48px}
.btn--lg{min-height:52px}

/* Karten und Bilder: runder, weicher Schatten beim Hover */
.icard,.ref,.split__media img,.duo__media img,.media{border-radius:var(--r)}
.icard{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.icard:hover{transform:translateY(-4px);box-shadow:0 30px 60px -32px rgba(0,59,126,.45)}

/* Abschluss */
.endcta{background:var(--abyss);position:relative;clip-path:polygon(0 3vw,38% 0,100% 2vw,100% 100%,0 100%);padding-top:clamp(5rem,10vw,8rem)}

/* Fuss */
.fuss{background:#040F1D;color:#AFC4D6;padding:56px 0 40px;font-size:.93rem}
.fuss__in{display:grid;grid-template-columns:auto 1fr;gap:40px;align-items:start;max-width:var(--wrap);margin:0 auto;padding:0 var(--gut)}
.fuss__marke{display:block;width:240px;max-width:100%;padding:6px 0}
.fuss__marke img{width:100%;height:auto}
.fuss nav{display:flex;flex-wrap:wrap;gap:4px 8px;justify-content:flex-end}
.fuss nav a{text-decoration:none;padding:10px 8px;min-height:44px;display:inline-flex;align-items:center}
.fuss nav a:hover{color:#fff}
.fuss__notiz{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.1);padding-top:22px;margin:0;font-size:.85rem;color:#93AABF}
@media (max-width:900px){.fuss__in{grid-template-columns:1fr}.fuss nav{justify-content:flex-start}}

/* Schwebeknöpfe */
.schwebe{position:fixed;right:16px;bottom:16px;z-index:90;display:flex;flex-direction:column;gap:10px}
.schwebe a,.schwebe button{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;box-shadow:0 12px 30px -10px rgba(6,24,46,.55);color:#fff}
.schwebe svg{width:24px;height:24px}
.s-wa{background:#1B8A4B}.s-tel{background:var(--navy)}
.s-hoch{background:var(--ink);opacity:0;pointer-events:none;transition:opacity .3s}
.s-hoch.an{opacity:1;pointer-events:auto}
@media (max-width:900px){.schwebe{right:12px;bottom:12px;gap:8px}.schwebe a,.schwebe button{width:48px;height:48px}}
@media not all{.knav,.icard,.s-hoch{transition:opacity .2s!important}.icard:hover{transform:none}}

/* Lange Komposita (Datenschutzerklärung, Saisoneröffnung) bei 360/375 px */
.phero h1,h2,h3{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.faq__a,.faq__a p{overflow-wrap:anywhere}
@media (max-width:420px){.phero h1{font-size:2rem}}
.offen{white-space:normal}

/* Untertitel unter der Seiten-H1 (Sanierung, Gespräch 05.10.2026) */
.phero__unter{font:700 clamp(1.1rem,.9rem + 1vw,1.45rem)/1.3 var(--ff-d);color:var(--accent);margin:.7rem 0 0;letter-spacing:-.01em}