/* Versicherung Krawietz – gemeinsames Design aller Unterseiten (aus Entwurf 16 abgeleitet)
   Helles „Stadtplan“-Blatt, Archivo, Navy + Signalblau, der Faden als wiederkehrendes Motiv. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:300 800;font-stretch:62% 125%;font-display:swap;src:url("/assets/fonts/archivo-latin-var.woff2") format("woff2")}
:root{
  --paper:#f3f6fb; --surface:#ffffff; --ink:#0e2442; --navy:#102a50; --steel:#55667f;
  --rule:#d3dcea; --signal:#1f5bff; --signal-tint:#e4ecff; --ok:#0b7a53; --off:#b4473a; --wa:#15803d;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --gl:max(16px,env(safe-area-inset-left,0px)); --gr:max(16px,env(safe-area-inset-right,0px));
  --sec:clamp(64px,9vw,112px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.65 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:60;background:var(--surface)}
a{color:inherit}
img,video{max-width:100%;height:auto;display:block}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px;border-radius:4px}
[tabindex="-1"]:focus{outline:none}
.band :focus-visible,.modal :focus-visible,.cookie :focus-visible,.sonder :focus-visible{outline-color:#9fbaff}
[hidden]{display:none!important}
section[id],[id^="faq-"],h2[id],main{scroll-margin-top:96px}
.skip{position:absolute;left:-9999px;top:0}
.skip:focus{left:16px;top:calc(8px + env(safe-area-inset-top,0px));z-index:70;background:var(--surface);padding:10px 14px;border-radius:8px}
.sr,.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.w{max-width:1240px;margin:0 auto;padding-left:var(--gl);padding-right:var(--gr)}
.w.narrow{max-width:calc(860px + 32px)}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:700;color:var(--ink);overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
h1{font-stretch:125%;font-size:clamp(2.2rem,5.6vw,4.4rem);line-height:1;letter-spacing:-.03em}
h2{font-stretch:125%;font-size:clamp(1.7rem,3.4vw,2.6rem);line-height:1.06;letter-spacing:-.022em}
h3{font-stretch:110%;font-size:1.18rem;line-height:1.25}
p{margin:0}
.textlink,main p a:not([class]),main li:not(.crumbs li)>a:not([class]),.prose a{color:var(--signal);font-weight:600;text-decoration:underline;text-decoration-color:rgba(31,91,255,.35);text-decoration-thickness:2px;text-underline-offset:4px;padding-block:6px 1px}
.textlink:hover,main p a:not([class]):hover,main li a:not([class]):hover,.prose a:hover{text-decoration-color:currentColor}
main a:not([class]){padding-block:6px 1px}
.band .textlink,.band p a:not([class]),.band li a:not([class]){color:#9fbaff;text-decoration-color:rgba(159,186,255,.45)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--signal)}
.eyebrow::before{content:"";width:22px;height:2px;border-radius:2px;background:currentColor}
.band .eyebrow{color:#9fbaff}
.fine{font-size:.86rem;line-height:1.55;color:var(--steel)}
.band .fine{color:#b9c6dc}

/* ---------- Header ---------- */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--rule)}
.top>.w{display:flex;align-items:center;gap:12px 24px;padding-block:10px}
.top .logo img{height:44px;width:auto}
.top nav:not(.mnav){display:flex;gap:22px;margin-left:auto;font-size:.95rem}
.top nav a,.top nav button{text-decoration:none;color:var(--steel);background:none;border:0;padding:0;font:inherit;cursor:pointer}
.top nav a:hover,.top nav button:hover,.top nav a[aria-current="page"]{color:var(--ink)}
.top nav a[aria-current="page"]{box-shadow:inset 0 -2px var(--signal)}
.call{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 16px;border-radius:10px;background:var(--navy);color:#fff;white-space:nowrap;font-variant-numeric:tabular-nums}
.call:hover{background:var(--signal)}
.menu-btn{display:none;flex:none;width:44px;height:44px;border-radius:10px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;padding:0;align-content:center;justify-items:center;gap:5px}
.menu-btn span{display:block;width:20px;height:2px;border-radius:2px;background:var(--navy);transition:transform .3s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mnav{border-top:1px solid var(--rule);background:var(--surface);overflow:hidden}
.mnav .w{display:grid;padding-block:8px 16px}
.top .mnav a,.top .mnav button{display:block;width:100%;text-align:left;padding:14px 4px;border-bottom:1px solid var(--rule);text-decoration:none;font-stretch:110%;font-weight:600;font-size:1.12rem;color:var(--navy)}
.top .mnav a:hover,.top .mnav button:hover{color:var(--signal)}
.mnav .w>:last-child{border-bottom:0}
@media (max-width:1060px){.top nav:not(.mnav){display:none}.call{margin-left:auto}.menu-btn{display:grid}}
@media (min-width:1061px){.mnav{display:none!important}}
@media (max-width:420px){.call span{display:none}.call{padding:10px 12px}.top .logo img{height:40px}}
.progress{position:absolute;left:0;right:0;bottom:-1px;height:3px;pointer-events:none}
.progress svg{display:block;width:100%;height:9px;overflow:visible;transform:translateY(-3px)}
.progress path{fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round}
.progress circle{fill:var(--signal)}

/* Betriebsferien-Hinweis */
.sonder{background:var(--navy);color:#eef3fb;font-size:.92rem}
.sonder .w{display:flex;align-items:center;gap:12px;padding-block:10px}
.sonder p{flex:1}
.sonder button{flex:none;width:36px;height:36px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;cursor:pointer;font-size:1.2rem;line-height:1}
.sonder .lg{display:none}
@media (min-width:640px){.sonder .lg{display:inline}.sonder .sm{display:none}}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:13px 22px;border-radius:12px;font:600 1rem/1.2 var(--f);text-decoration:none;cursor:pointer;border:1.5px solid var(--navy);color:var(--navy);background:rgba(255,255,255,.75);text-align:center;transition:background .2s,color .2s,border-color .2s,transform .2s}
.btn:hover{background:#fff}
.btn.solid{background:var(--signal);border-color:var(--signal);color:#fff}
.btn.solid:hover{background:var(--navy);border-color:var(--navy)}
.btn .arr{display:inline-block;transition:transform .25s}
.btn:hover .arr{transform:translateX(4px)}
.band .btn{background:transparent;color:#fff;border-color:rgba(255,255,255,.45)}
.band .btn:hover{border-color:#fff;background:rgba(255,255,255,.08)}
.band .btn.solid{background:#fff;color:var(--navy);border-color:#fff}
.band .btn.solid:hover{background:var(--signal-tint)}
.btn[disabled]{opacity:.6;cursor:progress}
.actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn{max-width:100%}
.actions>*,.cta-row>*,.btnrow>*{min-width:0}

/* ---------- Seitenkopf (Unterseiten) ---------- */
.phero{position:relative;overflow:hidden;background:linear-gradient(180deg,var(--surface) 0%,var(--paper) 100%);border-bottom:1px solid var(--rule);isolation:isolate}
.phero::before{content:"";position:absolute;inset:0 0 0 38%;z-index:-2;background:url("/assets/hero-1280.webp") right bottom/cover no-repeat;opacity:.22;-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 55%);mask-image:linear-gradient(90deg,transparent 0%,#000 55%)}
.phero>.w{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:40px 64px;align-items:center;padding-block:clamp(36px,6vw,72px) clamp(56px,8vw,104px)}
.phero.noimg>.w{grid-template-columns:minmax(0,1fr)}
.phero .copy{position:relative;z-index:2;max-width:760px}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;margin:0 0 28px;padding:0;list-style:none;font-size:.9rem;color:var(--steel)}
.crumbs li+li::before{content:"";display:inline-block;width:14px;height:1.5px;margin-right:8px;vertical-align:middle;background:var(--rule)}
.crumbs a{text-decoration:none;display:inline-block;padding-block:4px}
.crumbs a:hover{color:var(--signal)}
.crumbs [aria-current]{color:var(--ink);font-weight:600}
.phero .eyebrow{margin-bottom:18px}
.phero h1{max-width:18ch;font-size:clamp(2.1rem,4.6vw,3.9rem);font-stretch:118%;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.phero.long h1{font-size:clamp(1.9rem,3.9vw,3.2rem);max-width:24ch}
.phero .lead{margin-top:22px;max-width:58ch;font-size:clamp(1.05rem,1.5vw,1.22rem);line-height:1.6;color:var(--ink)}
.phero .lead+.lead{margin-top:12px;color:var(--steel);font-size:1.05rem}
.phero .chips{margin-top:22px}
.phero .meta{display:flex;align-items:center;gap:14px;margin-top:26px;font-size:.95rem}
.phero .meta img{width:48px;height:48px;border-radius:999px;object-fit:cover}
.phero .meta b{display:block}
.phero .meta span{color:var(--steel);font-size:.9rem}
.phero .media{position:relative;z-index:2;justify-self:end;width:100%;max-width:440px}
.phero .media img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:22px;box-shadow:0 30px 60px -30px rgba(14,36,66,.45);border:1px solid var(--rule);background:var(--surface)}
.phero .media.portrait img{aspect-ratio:4/5;object-position:50% 20%}
.phero .media .node{position:absolute;left:-7px;top:50%;width:14px;height:14px;border-radius:999px;background:var(--signal);box-shadow:0 0 0 6px var(--signal-tint);transform:translateY(-50%)}
.phero-thread{position:absolute;inset:0;z-index:1;pointer-events:none;width:100%;height:100%;overflow:visible}
.phero-thread path{fill:none;stroke:var(--signal);stroke-width:1.6;stroke-linecap:round;opacity:.55}
.phero-thread .t2{stroke:var(--navy);opacity:.18;stroke-width:1.2}
.phero .status{margin-top:22px}
@media (max-width:860px){
  .phero>.w{grid-template-columns:minmax(0,1fr);gap:32px}
  .phero::before{background-image:url("/assets/hero-800.webp");inset:auto 0 0 0;height:46%;opacity:.16;-webkit-mask-image:linear-gradient(180deg,transparent,#000 70%);mask-image:linear-gradient(180deg,transparent,#000 70%)}
  .phero .media{justify-self:start;max-width:520px}
  .phero .media .node{left:50%;top:-7px;transform:translateX(-50%)}
}

/* ---------- Abschnitte ---------- */
.sec{padding-block:var(--sec)}
.sec.surface{background:var(--surface)}
.sec+.sec.surface,.sec.surface+.sec:not(.surface):not(.band){border-top:1px solid var(--rule)}
.sec.tight{padding-block:0 var(--sec);margin-top:calc(var(--sec) * -.55)}
.sec>.w>h2,.sec .head h2{margin-bottom:22px}
.sec h2{position:relative}
.sec h2.thr{padding-top:22px}
.sec h2.thr::before{content:"";position:absolute;left:0;top:0;width:56px;height:2px;border-radius:2px;background:var(--signal);transform-origin:left;transform:scaleX(var(--d,1));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.sec h2.thr::after{content:"";position:absolute;left:calc(56px * var(--d,1));top:-3px;width:8px;height:8px;border-radius:999px;background:var(--signal);transform:translateX(-4px);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.sec h2.thr.pre{--d:0}
.text-center h2.thr::before,.center h2.thr::before{left:50%;margin-left:-28px}
.sec h3{margin-bottom:10px}
.sec p+p{margin-top:14px}
.sec .w>p,.sec .w.narrow p{max-width:68ch}
.sec .w>p:not(.fine){color:#2b3d58}
.sec .w>h2+p{margin-top:0}
.sec .w>*+.grid,.sec .w>*+.checks,.sec .w>*+.chips,.sec .w>*+.faq,.sec .w>*+.tbl,.sec .w>*+.cards{margin-top:28px}
.sec .w>.grid+p,.sec .w>.checks+p,.sec .w>.chips+p{margin-top:24px}
.center,.text-center{text-align:center}
.center p,.text-center p{margin-inline:auto}
.center .actions,.text-center .actions,.text-center .btnrow{justify-content:center}
.btnrow{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* Navy-Band */
.band{position:relative;background:var(--navy);color:#eef3fb;overflow:hidden;isolation:isolate}
.band h2,.band h3,.band h4,.band strong{color:#fff}
.band p,.band li{color:#d3ddef}
.band .w>p:not(.fine){color:#d3ddef}
.band .bthread{position:absolute;inset:0;z-index:-1;width:100%;height:100%;pointer-events:none}
.band .bthread path{fill:none;stroke:#9fbaff;stroke-width:1.4;stroke-linecap:round;opacity:.45}
.band .bthread .t2{stroke:#fff;opacity:.12}
.band h2.thr::before,.band h2.thr::after{background:#9fbaff}
.band .card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14)}
.band .chip{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.25);color:#eef3fb}
.band .checks li::before{border-color:#9fbaff}
.band .checks li::after{background:#9fbaff}

/* Raster und Karten */
.grid{display:grid;gap:20px;grid-template-columns:minmax(0,1fr);margin:0;padding:0;list-style:none}
@media (min-width:640px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.grid.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.grid.m2{grid-template-columns:repeat(2,minmax(0,1fr))}
.card{position:relative;background:var(--surface);border:1px solid var(--rule);border-radius:18px;padding:clamp(20px,2.4vw,28px);transition:border-color .25s,box-shadow .25s,transform .25s}
.sec.surface .card:not(.dark){background:var(--paper)}
.card.dark{background:var(--navy);border-color:var(--navy);color:#eef3fb}
.card.dark h3,.card.dark h4,.card.dark strong{color:#fff}
.card.dark li,.card.dark p{color:#d3ddef}
.card.dark .fine{color:#b9c6dc}
.card.dark .checks li::before{border-color:#9fbaff}
.card.dark .checks li::after{background:#9fbaff}
.card.flat{padding:0;overflow:hidden}
.card.row{display:flex;gap:16px;align-items:flex-start}
.card.row>div{min-width:0}
a.card{display:block;text-decoration:none}
a.card:hover,.card:has(a:hover){border-color:var(--signal);box-shadow:0 18px 40px -26px rgba(31,91,255,.55)}
.card picture,.card>img{display:block}
.card.flat img{width:100%;aspect-ratio:16/10;object-fit:cover}
.card.flat .body{padding:20px 22px 24px;display:flex;flex-direction:column;gap:8px;flex:1}
.card.flat{display:flex;flex-direction:column}
.card .ico{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:12px;background:var(--signal-tint);font-size:1.35rem;line-height:1}
.card.dark .ico{background:rgba(255,255,255,.1)}
.card ul:not(.checks):not(.rows){list-style:none;margin:12px 0 0;padding:0;display:grid;gap:2px}
.card ul:not(.checks):not(.rows) a{display:inline-block;padding-block:5px;text-decoration:none;font-weight:600;color:var(--navy)}
.card ul:not(.checks):not(.rows) a:hover{color:var(--signal)}
.card .stretch{position:static}
.card .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.kat{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--signal)}
.datum{font-size:.88rem;color:var(--steel);margin-top:auto;padding-top:6px}

/* Weiterführende Links */
.links{list-style:none;margin:0;padding:0;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:640px){.links{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){.links.c3{grid-template-columns:repeat(3,minmax(0,1fr))}.links.c4{grid-template-columns:repeat(4,minmax(0,1fr))}}
.lcard{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;min-height:64px;padding:16px 18px;border-radius:14px;border:1px solid var(--rule);background:var(--surface);text-decoration:none;font-weight:700;font-stretch:105%;color:var(--navy);transition:border-color .25s,box-shadow .25s,color .25s}
.sec.surface .lcard{background:var(--paper)}
.lcard>span:first-child{min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.lcard .arr{color:var(--signal);transition:transform .25s}
.lcard:hover{border-color:var(--signal);color:var(--signal);box-shadow:0 18px 40px -26px rgba(31,91,255,.55)}
.lcard:hover .arr{transform:translateX(4px)}
.grid.split{align-items:start}
@media (min-width:1000px){.grid.split{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.card.dark h2{color:#fff;font-size:1.5rem;margin-bottom:6px}
.card+.btn,.card+a.btn{margin-top:16px}
.map{display:flex;flex-direction:column}
.map-ph{flex:1}

/* Häkchen-Listen */
.checks{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checks li{position:relative;padding-left:34px;line-height:1.55}
.checks li::before{content:"";position:absolute;left:0;top:.18em;width:20px;height:20px;border-radius:999px;border:1.5px solid var(--signal);box-sizing:border-box}
.checks li::after{content:"";position:absolute;left:6px;top:calc(.18em + 6px);width:8px;height:8px;border-radius:999px;background:var(--signal)}
.checks.boxed{gap:12px}
.checks.boxed li{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:14px 16px 14px 48px}
.checks.boxed li::before{left:16px;top:calc(14px + .18em)}
.checks.boxed li::after{left:22px;top:calc(20px + .18em)}
@media (min-width:760px){.checks.two{grid-template-columns:repeat(2,minmax(0,1fr))}}
ol.steps{list-style:none;counter-reset:s;margin:0;padding:0;display:grid;gap:14px}
ol.steps>li{counter-increment:s;position:relative;padding-left:52px;min-height:36px}
ol.steps>li::before{content:counter(s);position:absolute;left:0;top:-2px;width:36px;height:36px;border-radius:999px;display:grid;place-items:center;font-weight:700;font-stretch:125%;color:var(--signal);background:var(--signal-tint)}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none}
.chip{display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;border-radius:10px;border:1px solid var(--rule);background:var(--surface);font-size:.92rem;font-weight:600;color:var(--navy);text-decoration:none}
a.chip:hover{border-color:var(--signal);color:var(--signal)}

/* Zitat */
.quote{border-left:3px solid var(--signal);padding:6px 0 6px 22px;font-stretch:112%;font-size:clamp(1.2rem,2.2vw,1.6rem);line-height:1.35;font-weight:600;color:var(--navy);margin-bottom:28px}
.quote p{color:inherit!important}

/* Tabellen */
.tbl{overflow-x:auto;margin:24px 0;border:1px solid var(--rule);border-radius:14px;background:var(--surface)}
.tbl table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.tbl th,.tbl td{text-align:left;vertical-align:top;padding:12px 16px;border-bottom:1px solid var(--rule)}
.tbl th{background:var(--paper);font-weight:700;font-size:.85rem;letter-spacing:.04em;text-transform:uppercase;color:var(--steel)}
.tbl tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:var(--navy)}

/* FAQ */
.faq{border-top:1px solid var(--rule)}
.faq-item{border-bottom:1px solid var(--rule)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;background:none;border:0;cursor:pointer;text-align:left;font:600 1.05rem/1.4 var(--f);color:var(--ink)}
.faq-q:hover{color:var(--signal)}
.faq-ic{flex:none;position:relative;width:30px;height:30px;border-radius:999px;border:1.5px solid var(--rule);transition:border-color .25s,background .25s,transform .35s}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.5px;background:var(--navy);transform:translate(-50%,-50%)}
.faq-ic::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .35s}
.faq-q[aria-expanded="true"] .faq-ic{border-color:var(--signal);background:var(--signal)}
.faq-q[aria-expanded="true"] .faq-ic::before{background:#fff}
.faq-q[aria-expanded="true"] .faq-ic::after{transform:translate(-50%,-50%) rotate(0);background:#fff}
.faq-a{overflow:hidden}
.faq-a>div{padding:0 50px 22px 0;color:#2b3d58;white-space:pre-line;line-height:1.6}

/* Artikel */
.prose{font-size:1.08rem;line-height:1.75;color:#1d2f4b;max-width:720px}
.sec .prose p{max-width:none}
.prose h2+*{margin-top:14px}
.author+p,.author+.fine{margin-top:18px}
.prose>*+*{margin-top:18px}
.prose h2{font-size:clamp(1.45rem,2.6vw,1.95rem);margin-top:48px;margin-bottom:-2px;scroll-margin-top:96px}
.prose h3{font-size:1.2rem;margin-top:32px}
.prose ul:not(.checks):not(.links):not(.chips):not(.grid),.prose ol{padding-left:0;list-style:none;display:grid;gap:10px}
.prose ul:not(.checks):not(.links):not(.chips):not(.grid)>li{position:relative;padding-left:28px}
.prose ul:not(.checks):not(.links):not(.chips):not(.grid)>li::before{content:"";position:absolute;left:4px;top:.72em;width:10px;height:2px;border-radius:2px;background:var(--signal)}
.prose ol{counter-reset:o}
.prose ol>li{counter-increment:o;position:relative;padding-left:40px}
.prose ol>li::before{content:counter(o);position:absolute;left:0;top:.1em;width:28px;height:28px;border-radius:999px;display:grid;place-items:center;font-size:.85rem;font-weight:700;color:var(--signal);background:var(--signal-tint)}
.prose strong{color:var(--ink)}
address{font-style:normal}
.prose .card{margin-top:16px}
.prose .box{background:var(--signal-tint);border-left:3px solid var(--signal);border-radius:0 14px 14px 0;padding:18px 22px}
.prose .box p{color:var(--navy);font-weight:500}
.prose .tbl{margin:28px 0}
.author{display:flex;gap:20px;align-items:center;margin-top:48px;padding:22px;border:1px solid var(--rule);border-radius:18px;background:var(--surface)}
.author img{width:76px;height:76px;border-radius:999px;object-fit:cover;flex:none}
.author .eyebrow{margin-bottom:4px}
.author b{display:block;font-size:1.08rem}
.author p{font-size:.95rem;color:var(--steel)}
.article-foot{margin-top:28px}
.toc{display:none}

/* Videos */
.vgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@media (min-width:760px){.vgrid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.vgrid{grid-template-columns:repeat(4,minmax(0,1fr))}}
.vgrid.inline{grid-template-columns:repeat(auto-fill,minmax(160px,220px))}
.vcard{display:flex;flex-direction:column;gap:12px}
.vframe{position:relative;aspect-ratio:9/16;border-radius:18px;overflow:hidden;background:var(--navy);box-shadow:0 20px 40px -26px rgba(14,36,66,.6)}
.vframe video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.vcard h3,.vcard .vt{font-size:1rem;line-height:1.3;font-stretch:105%;font-weight:700;margin:0}
.vcard .vm{font-size:.82rem;color:var(--steel);margin-top:4px}
.vcard a{font-size:.92rem}
.vbox{background:var(--surface);border:1px solid var(--rule);border-radius:22px;padding:clamp(20px,3vw,32px);margin-bottom:40px}
.vbox h2{font-size:1.4rem;margin:6px 0 20px}
.band .vcard .vm{color:#b9c6dc}

/* Ratgeber-Hinweise und Übersicht */
.rlist{list-style:none;margin:0;padding:0;display:grid;gap:14px}
@media (min-width:760px){.rlist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rcard{display:flex;gap:18px;align-items:center;height:100%;padding:14px;border-radius:16px;border:1px solid var(--rule);background:var(--surface);text-decoration:none;transition:border-color .25s,box-shadow .25s}
.rcard:hover{border-color:var(--signal);box-shadow:0 18px 40px -26px rgba(31,91,255,.55)}
.rcard img{width:104px;height:78px;border-radius:12px;object-fit:cover;flex:none}
.rcard .rt{display:block;font-weight:700;font-stretch:105%;line-height:1.3}
.rcard .rm{display:block;margin-top:4px;font-size:.88rem;color:var(--steel)}
.sec.surface .rcard{background:var(--paper)}
.head{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 32px;margin-bottom:28px}
.head h2{margin:6px 0 0}
.head a{padding-block:6px 1px}

/* Kontaktliste, Karte */
.clist{list-style:none;margin:20px 0 0;padding:0;display:grid;gap:18px}
.clist li{display:grid;gap:2px}
.clist .lbl{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#9fbaff}
.card:not(.dark) .clist .lbl{color:var(--signal)}
.clist a{text-decoration:none;font-weight:600}
.clist a:hover{text-decoration:underline}
.map{border:1px solid var(--rule);border-radius:18px;overflow:hidden;background:var(--surface)}
.map-ph{min-height:360px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:32px;text-align:center;background:linear-gradient(rgba(243,246,251,.88),rgba(243,246,251,.92)),url("/assets/hero-800.webp") center/cover}
.map-ph b{font-size:1.15rem}
.map iframe{display:block;width:100%;height:420px;border:0}

/* Bürostatus */
.status{display:inline-flex;align-items:center;gap:8px;border-radius:999px;border:1px solid var(--rule);padding:6px 14px;font-size:.88rem;font-weight:600;background:var(--surface)}
.status .lamp{width:10px;height:10px;border-radius:999px;background:var(--off);position:relative}
.status.on .lamp{background:var(--ok)}
.status.on .lamp::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--ok);opacity:.5;animation:ping 1.8s ease-out infinite}
@keyframes ping{from{transform:scale(.6);opacity:.7}to{transform:scale(1.6);opacity:0}}
.status-note{display:block;font-size:.8rem;font-weight:700;color:var(--signal);margin-bottom:6px}

/* Abschluss-CTA */
.cta-links{margin-top:44px;padding-top:32px;border-top:1px solid rgba(255,255,255,.14)}
.cta-links .chips{margin-top:14px}
.band a.chip:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.1)}
.cta .w{position:relative}
.cta h2{font-size:clamp(1.9rem,4vw,3rem)}
.cta p{max-width:58ch}
.cta .cta-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.cta.text-center .cta-row{justify-content:center}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:44px 64px;background:var(--surface);font-size:.95rem}
.foot{display:grid;grid-template-columns:minmax(0,1.2fr) repeat(3,minmax(0,1fr));gap:32px}
.foot img{height:44px;width:auto}
.foot h3{font-size:.95rem;margin-bottom:8px;font-stretch:100%}
.foot p,.foot address{font-style:normal;color:var(--steel)}
.foot a{text-decoration:none;display:inline-block;padding-block:4px}
.foot a:hover{color:var(--signal)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;color:var(--steel)}
.legal{margin-top:36px;padding-top:20px;border-top:1px solid var(--rule);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;color:var(--steel);font-size:.88rem}
.legal nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.legal a,.legal button{display:inline-block;padding-block:4px;text-decoration:none;background:none;border:0;font:inherit;color:inherit;cursor:pointer}
.legal a:hover,.legal button:hover{color:var(--signal)}
@media (max-width:900px){.foot{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.foot{grid-template-columns:minmax(0,1fr)}}

/* WhatsApp schwebend (mobil) */
.wa{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;display:none;align-items:center;gap:6px;padding:9px 13px;border-radius:12px;background:var(--wa);color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;box-shadow:0 12px 30px -10px rgba(14,36,66,.5);transition:opacity .25s,transform .25s}
.wa svg{width:17px;height:17px;fill:currentColor}
.wa.away{opacity:0;transform:translateY(12px);pointer-events:none}
@media (max-width:860px){.wa{display:inline-flex}}

/* ---------- Anfrage-Fenster ---------- */
.modal{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px}
.modal .shade{position:absolute;inset:0;background:rgba(14,36,66,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.modal .panel{position:relative;width:100%;max-width:560px;max-height:92vh;overflow-y:auto;background:var(--surface);border-radius:22px;box-shadow:0 40px 80px -30px rgba(14,36,66,.6);padding:clamp(24px,4vw,36px)}
.modal .x{position:absolute;top:14px;right:14px;width:44px;height:44px;border-radius:999px;border:1px solid var(--rule);background:var(--surface);cursor:pointer;font-size:1.4rem;line-height:1;color:var(--navy)}
.modal h2{font-size:clamp(1.5rem,3vw,2rem);padding-right:48px}
.modal .sub{color:var(--steel);margin:8px 0 20px}
.modal .alt{display:flex;flex-wrap:wrap;gap:8px 18px;margin:0 0 20px;font-size:.95rem}
.modal .alt a{color:var(--signal);font-weight:600;text-decoration:none;padding-block:4px}
.form{display:grid;gap:14px}
.form .two{display:grid;gap:14px}
@media (min-width:560px){.form .two{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:grid;gap:6px}
.field label{font-size:.9rem;font-weight:600}
.field input,.field textarea{width:100%;min-width:0;font:inherit;color:var(--ink);background:var(--paper);border:1px solid var(--rule);border-radius:10px;padding:12px 14px;resize:vertical}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--signal);box-shadow:0 0 0 3px var(--signal-tint)}
.form .fine a{color:var(--signal)}
.form-status{font-size:.95rem;min-height:1.2em}
.form-status.ok{color:var(--ok)}
.form-status.err{color:var(--off)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* Cookie-Hinweis */
.cookie{position:fixed;left:calc(16px + env(safe-area-inset-left,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));right:16px;z-index:150;max-width:420px;background:var(--navy);color:#eef3fb;border-radius:18px;padding:20px;box-shadow:0 30px 60px -24px rgba(14,36,66,.7);font-size:.92rem}
.cookie a{color:#9fbaff;display:inline-block;padding-block:6px}
.cookie .row{display:flex;gap:10px;margin-top:14px}
.cookie button{flex:1;min-height:44px;border-radius:10px;font:600 .95rem var(--f);cursor:pointer;border:1.5px solid rgba(255,255,255,.4);background:transparent;color:#fff}
.cookie button[data-consent="ja"]{background:#fff;color:var(--navy);border-color:#fff}

/* Bewegung: Startzustände nur, wenn JS läuft und Bewegung erlaubt ist */
.js-motion .rv{opacity:0;transform:translateY(22px)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important}
  .js-motion .rv{opacity:1;transform:none}
}
@media print{.top,.wa,.cookie,.modal,footer,.sonder,.phero-thread,.bthread{display:none!important}.band{background:none;color:#000}}

/* Links als Pillen-Knöpfe (Variante B) */
.pill{display:inline-flex;align-items:center;gap:10px;min-height:44px;max-width:100%;padding:9px 18px 9px 14px;border-radius:12px;border:1px solid var(--rule);background:#fff;color:var(--navy);font:600 .95rem/1.25 var(--f);text-decoration:none;box-shadow:0 1px 0 rgba(14,36,66,.04);transition:border-color .2s,color .2s,box-shadow .2s,transform .2s;vertical-align:middle}
.pill.noi{padding:9px 14px 9px 18px}
.pill>span{min-width:0;overflow-wrap:anywhere}
.pill .pi{width:18px;height:18px;flex:none;fill:none;stroke:var(--signal);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.pill:hover{border-color:var(--signal);color:var(--signal);box-shadow:0 12px 28px -18px rgba(31,91,255,.7);transform:translateY(-1px)}
.pill.noi:hover .pi{transform:translateX(3px)}
.pill.solid{background:var(--navy);border-color:var(--navy);color:#fff}
.pill.solid .pi{stroke:#9fbaff}
.pill.solid:hover{background:var(--signal);border-color:var(--signal);color:#fff}
.band .pill.solid,.vband .pill.solid{background:#fff;border-color:#fff;color:var(--navy)}
.band .pill.solid .pi,.vband .pill.solid .pi{stroke:var(--signal)}
.band .pill.solid:hover,.vband .pill.solid:hover{background:#e4ecff;color:var(--navy)}
.psep{display:inline-block;width:1px;height:28px;background:var(--rule);margin:0 4px;align-self:center}
.band .psep,.vband .psep{background:rgba(255,255,255,.22)}
@media (max-width:560px){.psep{display:none}}
.vsocial{display:flex!important;flex-wrap:wrap;align-items:center;gap:12px!important;margin-top:26px}
.vsocial a.pill{border-bottom:1px solid rgba(255,255,255,.28)!important;padding-block:9px!important;color:#fff}
.vsocial a.pill.solid{border-bottom-color:#fff!important;color:var(--navy)}
.vsocial a.pill:hover{border-bottom-color:#fff!important}
.srow{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;margin-top:24px}
.srow .slab{font-size:.8rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--steel);margin-right:4px}
.band .pill,.card.dark .pill,.g-detail .pill,.vband .pill{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.28);color:#fff;box-shadow:none}
.band .pill .pi,.card.dark .pill .pi,.g-detail .pill .pi,.vband .pill .pi{stroke:#9fbaff}
.band .pill:hover,.card.dark .pill:hover,.g-detail .pill:hover,.vband .pill:hover{border-color:#fff;color:#fff;background:rgba(255,255,255,.12)}
.head .pill{flex:none}
.vcard .pill{align-self:flex-start;font-size:.88rem;min-height:40px;padding:7px 14px 7px 11px}
.author .pill{margin-top:4px}
dd .pill,.clist .pill{margin-top:6px}
.grid:has(>.vcard){grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
@media (min-width:760px){.grid:has(>.vcard){grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1080px){.grid:has(>.vcard){grid-template-columns:repeat(4,minmax(0,1fr))}}
.card.dark .status,.band .status{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}

/* Listen aus Links: Zeilen mit Pfeil (Variante 1) */
ul.rows{list-style:none;margin:10px 0 0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);column-gap:24px;border-top:1px solid var(--rule)}
.rowlink{display:flex;align-items:center;justify-content:space-between;gap:12px;height:100%;min-height:46px;padding:11px 8px;border-bottom:1px solid var(--rule);color:var(--navy);font-weight:600;line-height:1.3;text-decoration:none;transition:background .2s,color .2s,padding .25s}
.rowlink>span{min-width:0;overflow-wrap:break-word;hyphens:auto}
.rowlink .pi{width:16px;height:16px;flex:none;fill:none;stroke:var(--signal);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.rowlink:hover{background:var(--signal-tint);color:var(--signal);padding-left:14px}
.rowlink:hover .pi{transform:translateX(3px)}
.card.dark .rowlink,.band .rowlink{color:#fff;border-color:rgba(255,255,255,.16)}
.card.dark .rowlink .pi,.band .rowlink .pi{stroke:#9fbaff}
.card.dark .rowlink:hover,.band .rowlink:hover{background:rgba(255,255,255,.08);color:#fff}
.card ul.rows{margin-top:14px}
@media (min-width:1000px){.w>ul.rows{grid-template-columns:repeat(2,minmax(0,1fr))}}

.card h3 a,.card h2 a,article h3 a{text-decoration:none;color:inherit}
.card h3 a:hover,article h3 a:hover{color:var(--signal)}

/* Überzeilen wie auf der Startseite: normale Schreibweise, kein Sperrsatz */
.eyebrow,.kat,.clist .lbl,.srow .slab,.tbl th{text-transform:none!important;letter-spacing:0!important}
.eyebrow{font-size:.95rem!important;font-weight:600!important}
.eyebrow::before{display:none}
.kat{font-size:.88rem!important;font-weight:600!important}
.clist .lbl,.srow .slab{font-size:.9rem!important;font-weight:600!important}
.tbl th{font-size:.9rem!important;color:var(--ink)!important}

/* Anfrage-Fenster: Anrufen und WhatsApp als Symbol-Knöpfe */
.modal .alt{display:flex;align-items:center;gap:10px;margin:0 0 22px}
.modal .alt span{font-size:.92rem;color:var(--steel);margin-right:4px}
.ib{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;border:1px solid var(--rule);background:#fff;color:var(--signal);transition:border-color .2s,background .2s,color .2s,transform .2s}
.ib svg{width:22px;height:22px}
.ib .ib-tel{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ib:hover{border-color:var(--signal);background:var(--signal);color:#fff;transform:translateY(-1px)}
.ib.wa-ib{color:var(--wa)}
.ib.wa-ib svg{fill:currentColor}
.ib.wa-ib:hover{border-color:var(--wa);background:var(--wa);color:#fff}
.modal .alt a.ib{padding:0;color:var(--signal)}
.modal .alt a.ib.wa-ib{color:var(--wa)}
.modal .alt a.ib:hover{color:#fff}

/* Impressum: links das Thema, rechts die Angaben */
.imp .lg{border-top:1px solid var(--rule)}
.lg-row{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 40px;padding:28px 0;border-bottom:1px solid var(--rule)}
@media (min-width:760px){.lg-row{grid-template-columns:minmax(0,.9fr) minmax(0,2fr)}}
.lg-h{font-size:1.12rem;font-stretch:110%;line-height:1.3;margin:0;color:var(--ink)}
.lg-body{color:#2b3d58;line-height:1.6}
.lg-body p{margin:0}
.sec .lg-body p+p{margin-top:6px}
.lg-body address{font-style:normal}
.lg-body .grp+.grp{margin-top:18px;padding-top:18px;border-top:1px dashed var(--rule)}
.lg-body .lead-line{font-weight:600;color:var(--ink);margin-bottom:4px}
.lg-body a{color:var(--signal);font-weight:600;text-decoration:underline;text-decoration-color:rgba(31,91,255,.35);text-decoration-thickness:2px;text-underline-offset:4px}
.kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 22px;margin:0}
.kv dt{color:var(--steel);font-size:.95rem}
.kv dd{margin:0;overflow-wrap:anywhere}
.ilist{list-style:none;margin:0;padding:0;display:grid;gap:8px 28px}
@media (min-width:640px){.ilist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ilist li{position:relative;padding-left:18px;line-height:1.45}
.ilist li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:999px;background:var(--signal)}
.lg-h{hyphens:manual;-webkit-hyphens:manual}
.kv dd a{color:inherit!important;font-weight:400!important;text-decoration:none!important;padding:0}
.kv dd a:hover{text-decoration:underline!important;text-decoration-color:var(--rule)!important;text-underline-offset:4px}
/* Videos im Ratgeber („Kurz erklärt“): kompakte Karten statt volle Breite */
section[data-video-gruppe]{margin:0 0 clamp(36px,5vw,56px);padding:clamp(18px,3vw,28px);border:1px solid var(--rule);border-radius:16px;background:var(--paper)}
section[data-video-gruppe] h2{margin-top:6px}
section[data-video-gruppe] > div:has(>.vcard){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px;margin-top:18px}
@media (min-width:600px){section[data-video-gruppe] > div:has(>.vcard){grid-template-columns:repeat(auto-fill,minmax(160px,210px))}}
section[data-video-gruppe] .vt{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
/* Kontakt-Knopf schwebend (Update 21.6): Sprechblase öffnet WhatsApp, Anrufen, Anfrage im Bogen */
.wa.kfab{position:fixed;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:55;display:block;width:56px;height:56px;padding:0;gap:0;background:none;border:0;border-radius:0;box-shadow:none;transition:opacity .25s,transform .25s}.wa.kfab.away{opacity:0;transform:translateY(12px);pointer-events:none}.kmain{position:relative;width:100%;height:100%;border-radius:50%;border:2px solid rgba(255,255,255,.85);background:#102a50;display:grid;place-items:center;cursor:pointer;padding:0;box-shadow:0 10px 26px -8px rgba(14,36,66,.6);transition:background .2s}.kmain:hover,.kopt:hover{background:#1a3a6b}.kmain svg{position:absolute;width:26px;height:26px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s,opacity .2s}.kmain .kx{stroke-width:2.2;opacity:0;transform:rotate(-90deg)}.kfab.open .kmain .kc{opacity:0;transform:rotate(90deg)}.kfab.open .kmain .kx{opacity:1;transform:none}.kdot{position:absolute;top:-1px;right:-1px;width:14px;height:14px;border-radius:50%;background:#25D366;border:2px solid #fff;transition:opacity .2s}.kfab.open .kdot{opacity:0}.kopt{position:absolute;right:4px;bottom:4px;width:48px;height:48px;border-radius:50%;display:grid;place-items:center;background:#102a50;border:2px solid rgba(255,255,255,.85);box-shadow:0 10px 22px -8px rgba(14,36,66,.55);padding:0;cursor:pointer;color:#fff;opacity:0;pointer-events:none;transform:scale(.4);transition:transform .32s cubic-bezier(.2,.9,.3,1.25),opacity .2s,background .2s;transition-delay:calc(var(--i)*45ms)}.kopt svg{width:22px;height:22px}.k-wa svg{fill:#25D366}.k-tel svg,.k-form svg{fill:none;stroke:#fff;stroke-width:1.9;stroke-linejoin:round;stroke-linecap:round}.kfab.open .kopt{opacity:1;pointer-events:auto}.kfab.open .k-wa{transform:translate(0,-92px)}.kfab.open .k-tel{transform:translate(-66px,-66px)}.kfab.open .k-form{transform:translate(-92px,0)}.kmain:focus-visible,.kopt:focus-visible{outline:3px solid #1f5bff;outline-offset:3px}@media (min-width:861px){.wa.kfab{right:24px;bottom:24px;width:60px;height:60px}.kmain svg{width:28px;height:28px}.kopt{width:52px;height:52px}.kopt svg{width:24px;height:24px}.kfab.open .k-wa{transform:translate(0,-98px)}.kfab.open .k-tel{transform:translate(-70px,-70px)}.kfab.open .k-form{transform:translate(-98px,0)}}@media (prefers-reduced-motion:reduce){.wa.kfab,.kopt,.kmain svg{transition:none}}
.wa.kfab.ckhide{visibility:hidden;opacity:0}