/* fasannet.at v4 (owner-approved 2026-10-25), v5 consistency pass at the end of this file. Same system as fasannet.com v3 (see ../../../fasannet-com/planning/design/DESIGN.md);
   .at-specific: orange is the action colour (filled buttons, CTAs). The one stylesheet of every .at page. See ../DESIGN.md "v4". */
@font-face{font-family:'Inter';src:url(inter-latin.woff2?h=3100e775e8) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';src:url(inter-latin-ext.woff2?h=34b9c504ca) format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0100-024F,U+0259,U+1E00-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Bricolage Grotesque';src:url(BricolageGrotesque-var.woff2?h=9bbe6bcce7) format('woff2');font-weight:200 800;font-display:swap}

:root{
  /* shared with .com */
  --ink:#000; --paper:#fff; --silver:#c8c7cd; --muted:#4a4a4a;
  --navy:#1b2380; --navy-h:#141a66; --navy-mist:#eceefb; --orange-mist:#fff3ec; --cream:#f1f1e9;
  --display:'Bricolage Grotesque',system-ui,sans-serif; --sans:'Inter',system-ui,-apple-system,sans-serif;
  --t-display:56px; --t-heading:32px; --t-sub:24px;
  --r-btn:6px; --r-card:12px; --r-panel:24px; --r-pill:9999px;
  --max:1200px; --section:80px; --gap:16px; --gutter:24px;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* .at only */
  --action:#c24703; --action-h:#a83e00; --label:#a83e00; --ok:#1f7a4d;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:400 16px/1.5 var(--sans);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
p{margin:0 0 16px}
b,strong{font-weight:700}
.wrap{max-width:calc(var(--max) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}

/* type */
.display,.heading,.sub{font-family:var(--display);font-weight:500;line-height:1;letter-spacing:-.01em;margin:0}
.display{font-size:var(--t-display)}
.heading{font-size:var(--t-heading);line-height:1.05}
.sub{font-size:var(--t-sub)}
.eyebrow{font:600 12px/2 var(--sans);letter-spacing:.083em;text-transform:uppercase;margin:0 0 8px}
.small{font-size:14px;line-height:1.6}
.caption{font-size:12px;line-height:1.3}
.muted{color:var(--muted)}
.link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;transition:text-underline-offset .15s}
.link:hover{text-underline-offset:5px}
@media (max-width:640px){:root{--t-display:40px;--t-heading:28px;--t-sub:22px}}

/* buttons: orange = action (the .at difference), ghost and white as on .com */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 16px/1.25 var(--sans);padding:12px 24px;border-radius:var(--r-btn);text-decoration:none;border:1px solid transparent;cursor:pointer;transition:background .15s,color .15s,border-color .15s,transform .15s var(--ease)}
.btn:active{transform:translateY(1px)}
.btn .arr{display:inline-block;transition:transform .2s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}
.btn-primary{background:var(--action);color:#fff}
.btn-primary:hover{background:var(--action-h)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--orange-mist)}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--orange-mist)}
.btn-sm{padding:8px 16px;font-size:15px}
.pill-white{display:inline-block;background:#fff;color:var(--navy);border-radius:var(--r-btn);font-weight:700;padding:3px 12px;font-size:13px;text-decoration:none;margin-left:10px}

/* announcement bar */
.announce{background:var(--navy);color:#fff;font-size:14px;text-align:center;padding:8px var(--gutter)}

/* nav */
.nav{position:sticky;top:0;z-index:30;border-bottom:1px solid var(--silver);background:#fff;transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 1px 0 var(--silver),0 8px 24px rgba(0,0,0,.04)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:72px}
.nav img{height:30px;width:auto}
.nav .links{display:flex;gap:24px;margin-left:auto;font-size:15px}
.nav .links a{position:relative;text-decoration:none;white-space:nowrap}
.nav .links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform .25s var(--ease)}
.nav .links a:hover::after,.nav .links a[aria-current]::after{transform:scaleX(1)}
/* the phone number carries .lang so motion.js copies it into the mobile menu (it copies .wrap > .lang and .wrap > .btn) */
.nav .tel{font-size:14px;font-weight:600;text-decoration:none;white-space:nowrap}
.nav .wrap > .btn{white-space:nowrap}
@media (max-width:1180px){.nav .wrap > .tel{display:none}}
@media (max-width:1040px){.nav .links{display:none}.nav .wrap > .btn{margin-left:auto}}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;padding:0 10px;background:none;border:1px solid var(--silver);border-radius:var(--r-btn);cursor:pointer}
.nav-toggle span{display:block;height:2px;background:var(--ink);border-radius:1px;transition:transform .2s var(--ease),opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1040px){.nav-toggle{display:inline-flex}}
@media (min-width:1041px){.nav-panel{display:none!important}}
@media (max-width:480px){.nav .wrap{gap:12px}.nav .wrap > .nav-toggle{margin-left:auto}}

/* sections and surfaces */
.section{padding:var(--section) 0}
.band-navy{background:var(--navy);color:#fff}
.band-mist{background:var(--navy-mist)}
.band-orange{background:var(--cream)} /* v5: one content tint; alias kept for ratgeber pages built from the .com builder */
.band-cream{background:var(--cream)}
.hair{border:0;border-top:1px solid var(--ink);margin:0}
.card{border:1px solid var(--silver);border-radius:var(--r-card);padding:24px;background:#fff}
.panel{border-radius:var(--r-card);padding:24px;background:#fff;transition:transform .25s var(--ease)}
.panel:hover{transform:translateY(-2px)}
.panel .sub{font-size:20px;line-height:1.1;margin-bottom:10px}
.panel p{font-size:14px;line-height:1.6;margin:0}
.ck-n{display:block;font-family:var(--display);font-size:14px;color:var(--label);margin-bottom:10px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:40px}
.sec-head p{margin:0}
.split>*,.grid2>*,.grid3>*,.sec-head>*,.hero .wrap>*{min-width:0}
@media (max-width:960px){.grid3{grid-template-columns:1fr}}
@media (max-width:760px){.split,.grid2,.sec-head{grid-template-columns:1fr;gap:24px}}

/* hero */
.hero{padding:56px 0 48px}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.hero .display{max-width:12ch;margin:12px 0 20px}
.hero p.lead{font-size:18px;line-height:1.5;max-width:44ch;margin-bottom:28px}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.hero .fine{margin:20px 0 0;font-size:14px;color:var(--muted)}
.crumb{font-size:14px;color:var(--muted);margin-bottom:8px}
.crumb a{color:inherit}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr;gap:40px}}

/* fact strip (the .com trust strip, with facts instead of client names) */
.trust{text-align:center;padding:0 0 64px}
.trust .row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px 40px;margin-top:24px;font-weight:600;color:#3a3a3a}
.trust .row span{white-space:nowrap}

/* product view ("show, don't describe"): white card on a band, or bordered on white */
.proto{background:#fff;color:var(--ink);border-radius:var(--r-panel);padding:32px}
.proto.line{border:1px solid var(--silver)}
.proto-h{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding-bottom:12px;border-bottom:1px solid var(--ink)}
.proto-h .eyebrow{margin:0}
.proto-c{margin:14px 0 0}
.proto-l{list-style:none;margin:0;padding:0}
.proto-l li{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid var(--silver);font-size:15px}
.proto-l span{min-width:0}
.proto-l b{font-weight:700;text-align:right}
.proto-l .hl{color:var(--navy)}
@media (max-width:560px){.proto{padding:22px}}

/* status words in demos */
.st{font-size:12px;font-weight:700;white-space:nowrap}
.st.ok{color:var(--ok)}
.st.warn{color:var(--label)}
.st.info{color:var(--navy)}
.st::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;margin-right:6px;vertical-align:1px}

/* demo: replacement device timeline (home hero) */
.tl{list-style:none;margin:0;padding:0}
.tl li{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--silver)}
.tl time{font:600 14px/1.4 var(--sans);font-variant-numeric:tabular-nums;color:var(--muted)}
.tl b{display:block;font-size:15px;font-weight:600;line-height:1.35}
.tl small{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px}
.tl-sum{display:flex;justify-content:space-between;gap:12px;margin-top:14px;padding:12px 14px;border-radius:var(--r-card);background:var(--navy-mist);font-size:14px}
.tl-sum b{color:var(--navy)}
@media (max-width:560px){.tl li{grid-template-columns:44px minmax(0,1fr)}.tl .st{grid-column:2}}

/* demo: device overview / monthly report */
.dev{width:100%;border-collapse:collapse;font-size:14px}
.dev th{font:600 11px/1.3 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);text-align:left;padding:12px 8px 8px 0}
.dev td{padding:12px 8px 12px 0;border-top:1px solid var(--silver);vertical-align:top}
.dev td:first-child b{display:block;font-weight:600}
.dev td:first-child small{font-size:12px;color:var(--muted)}
.dev-wrap{overflow-x:auto}
.kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0 4px}
.kpis div{background:var(--navy-mist);border-radius:var(--r-card);padding:12px 14px}
.kpis b{display:block;font:500 26px/1 var(--display);color:var(--navy)}
.kpis span{font-size:12px;color:var(--muted)}
@media (max-width:560px){.dev .hide-s{display:none}}

/* rows appear one by one when the demo scrolls into view (like the .com AI inbox) */
@media (prefers-reduced-motion:no-preference){
  .js [data-play] [data-row]{opacity:0;transform:translateY(6px)}
  .js [data-play].in [data-row]{animation:row .4s var(--ease) forwards;animation-delay:calc(.25s + var(--i,0) * .4s)}
}
@keyframes row{to{opacity:1;transform:none}}

/* bullet list with short dashes */
.dash{list-style:none;margin:0;padding:0}
.dash li{position:relative;padding:8px 0 8px 22px;border-bottom:1px solid var(--silver)}
.dash li::before{content:"";position:absolute;left:0;top:19px;width:10px;height:1px;background:var(--ink)}
.band-navy .dash li{border-color:rgba(255,255,255,.25)}
.band-navy .dash li::before{background:#fff}

/* packages (the .com .pkg, unused there because .com shows no prices) */
.pkg{display:flex;flex-direction:column;border:1px solid var(--silver);border-radius:var(--r-card);padding:28px;background:#fff;transition:border-color .2s,transform .25s var(--ease)}
.pkg:hover{border-color:var(--ink);transform:translateY(-2px)}
.pkg .eyebrow{margin:0}
.pkg .price{font:500 48px/1 var(--display);letter-spacing:-.02em;margin:14px 0 4px}
.pkg .price small{font:400 14px var(--sans);color:var(--muted);letter-spacing:0}
.pkg .for{font-size:14px;color:var(--muted);margin:0 0 16px;padding-bottom:16px;border-bottom:1px solid var(--silver)}
.pkg ul{list-style:none;margin:0 0 24px;padding:0;font-size:14px;line-height:1.5}
.pkg li{padding:5px 0 5px 22px;position:relative}
.pkg li::before{content:"";position:absolute;left:0;top:14px;width:10px;height:1px;background:var(--ink)}
.pkg li.no{color:var(--muted)}
.pkg li.no::before{content:"–";background:none;top:5px;width:auto;height:auto}
.pkg .btn{margin-top:auto}
.pkg.feat{border:2px solid var(--navy);padding:27px}
.pkg.feat:hover{border-color:var(--navy)}
.pkg .tag{align-self:flex-start;background:var(--navy);color:#fff;font:600 11px/1 var(--sans);letter-spacing:.083em;text-transform:uppercase;padding:6px 10px;border-radius:var(--r-pill);margin-bottom:12px}
.pkg .tag-space{height:23px;margin-bottom:12px}
@media (max-width:960px){.pkg .tag-space{display:none}}
.terms{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 28px;margin:28px 0 0;font-size:14px;color:var(--muted)}
.terms b{color:var(--ink);font-weight:600}

/* compact package tiles (home) */
.pk{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--ink);padding-top:16px}
.pk .price{font:500 40px/1 var(--display);letter-spacing:-.02em}
.pk .price small{font:400 14px var(--sans);color:var(--muted);letter-spacing:0}
.pk p{font-size:14px;line-height:1.6;color:var(--muted);margin:4px 0 0}
.pk .eyebrow{display:flex;gap:10px;align-items:center;margin:0}
.pk .tag{background:var(--navy);color:#fff;font:600 10px/1 var(--sans);letter-spacing:.083em;padding:4px 8px;border-radius:var(--r-pill)}

/* tables */
.tbox{background:#fff;border:1px solid var(--silver);border-radius:var(--r-card);overflow-x:auto}
.tbl{width:100%;border-collapse:collapse;font-size:15px}
.tbl th,.tbl td{padding:13px 16px;text-align:left;border-top:1px solid var(--silver);vertical-align:top}
.tbl thead th{border-top:0;font:600 12px/1.4 var(--sans);letter-spacing:.07em;text-transform:uppercase;color:var(--muted);background:#fff}
.tbl thead th b{display:block;font:500 20px/1.1 var(--display);letter-spacing:-.01em;text-transform:none;color:var(--ink);margin-top:2px}
.tbl thead th.rec{color:var(--navy)}
.tbl td:not(:first-child),.tbl th:not(:first-child){text-align:center;white-space:nowrap}
.tbl.vals td:last-child,.tbl.vals th:last-child{text-align:right}
.tbl .y{color:var(--navy);font-weight:700}
.tbl .n{color:#8a8a8a}
.tbl td.col-rec{background:#f7f8fe}
.tbl tbody tr:hover td{background:#fafafb}

/* calculator (preise) */
.calc .field{display:block;font-size:14px;font-weight:600;margin:20px 0 8px}
.calc-n{display:grid;grid-template-columns:minmax(0,1fr) 88px;gap:16px;align-items:center}
.calc input[type=range]{width:100%;accent-color:var(--navy)}
.quick{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:#fff;border:1px solid var(--silver);border-radius:999px;padding:5px 12px;font:500 13px/1.2 var(--sans);cursor:pointer;color:var(--ink)}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--navy);border-color:var(--navy);color:#fff}
.seg{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.seg legend{font-size:14px;font-weight:600;margin:20px 0 8px;padding:0}
.seg label{position:relative;display:flex;flex-direction:column;gap:2px;border:1px solid var(--silver);border-radius:var(--r-btn);padding:10px 12px;cursor:pointer;font-weight:700;font-size:15px}
.seg label small{font-weight:400;font-size:12px;color:var(--muted)}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg label:has(input:checked){border-color:var(--navy);background:var(--navy-mist);box-shadow:inset 0 0 0 1px var(--navy)}
.seg label:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.calc-out{margin:24px 0 16px;padding:20px 0 0;border-top:1px solid var(--ink)}
.calc-out .eyebrow{margin:0}
.calc-sum{font:500 56px/1 var(--display);letter-spacing:-.02em;margin:6px 0 8px}
.calc-line{font-size:14px;color:var(--muted);margin:0}
.calc .btn{width:100%}
@media (max-width:420px){.seg{grid-template-columns:1fr}.calc-sum{font-size:44px}}

/* steps */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.steps li{border-top:1px solid var(--ink);padding-top:16px}
.steps .n{font-family:var(--display);font-size:24px;line-height:1;display:block;margin-bottom:16px}
.steps p{font-size:14px;line-height:1.6;margin:8px 0 0}
.steps .m{display:inline-block;margin-top:12px;font-size:12px;font-weight:600;color:var(--navy);background:#fff;border-radius:999px;padding:3px 10px}
@media (max-width:960px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}

/* portrait tile */
.tile{border-radius:var(--r-card);overflow:hidden;background:#f4f4f6;border:1px solid var(--silver)}
.tile img{width:100%;height:100%;object-fit:cover}

/* faq */
.faq details{border-top:1px solid var(--silver)}
.faq details:last-child{border-bottom:1px solid var(--silver)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:24px;padding:20px 0;font-weight:700;transition:color .15s}
.faq summary:hover{color:var(--navy)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:400;font-size:22px;line-height:1}
.faq details[open] summary::after{content:"−"}
.faq details p{margin:0 0 20px;max-width:65ch}
.faq a{color:var(--navy)}

/* forms */
.field{display:block;font-size:14px;font-weight:600;margin-bottom:12px}
.field small{font-weight:400;color:var(--muted)}
.input{display:block;width:100%;margin-top:6px;font:400 16px/1.5 var(--sans);padding:10px 12px;border:1px solid var(--silver);border-radius:var(--r-btn);background:#fff;color:var(--ink)}
.input:focus{outline:2px solid var(--navy);outline-offset:0;border-color:var(--navy)}
textarea.input{resize:vertical;min-height:84px}
.calc-n .input{margin:0;text-align:center}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:420px){.row2{grid-template-columns:1fr}}
.form-note{font-size:12px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.form-note a{color:inherit}
.reach{margin-top:28px;font-size:15px;line-height:1.7}
.reach b{display:block;font-size:12px;letter-spacing:.083em;text-transform:uppercase}
.reach p{margin:0 0 14px}
.reach a{text-decoration:none}
.reach a:hover{text-decoration:underline}

/* footer */
.foot{background:#fff;border-top:1px solid var(--ink);padding:56px 0 32px;font-size:14px}
.foot .cols{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:32px}
.foot img{height:28px;width:auto;margin-bottom:16px}
.foot h2,.foot h4{font:600 12px/2 var(--sans);letter-spacing:.083em;text-transform:uppercase;margin:0 0 8px;color:var(--ink)}
.foot ul{list-style:none;margin:0;padding:0;line-height:2}
.foot a{text-decoration:none}
.foot a:hover{text-decoration:underline}
.foot .base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:40px;padding-top:20px;border-top:1px solid var(--silver);color:var(--muted)}
@media (max-width:760px){.foot .cols{grid-template-columns:1fr 1fr}}
@media (max-width:420px){.foot .cols{grid-template-columns:1fr}}

/* back-to-top button and contact card: contact-card.css (shared with .com) */

/* motion */
.js .rv{opacity:0;transform:translateY(16px);transition:opacity .6s var(--ease) var(--d,0ms),transform .6s var(--ease) var(--d,0ms)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:no-preference){.js:not(.reduce) [data-reveal]:not(.rv):not(.in),.js:not(.reduce) [data-stagger]>*:not(.rv):not(.in){opacity:0}}
.reduce *,.reduce *::before,.reduce *::after{animation:none!important;transition:none!important}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}

/* value tables inside cards (preise: Stundensatz, Bestandscheck) */
.card .tbl{font-size:14px}
.card .tbl td{padding:10px 0}
.card .tbl td:last-child{padding-left:12px;white-space:nowrap}
.nobr{white-space:nowrap}
.swipe{display:none;font-size:12px;color:var(--muted);margin:0 0 8px}
@media (max-width:760px){.swipe{display:block}}

.ic-box{display:grid;place-items:center;width:48px;height:48px;border-radius:10px;background:#eceefb;margin-bottom:14px}

.abc-strip{padding:24px 0}
.abc-strip .abc-box{display:flex;align-items:center;gap:28px;padding:20px 28px;border:1px solid var(--silver);border-radius:var(--r-card);background:#fff}
.abc-strip .abc-logo img{width:110px;height:auto}
.abc-strip p{margin:0;flex:1}
.abc-strip .btn{white-space:nowrap}
@media (max-width:760px){.abc-strip .abc-box{flex-direction:column;align-items:flex-start;gap:14px}}

/* ── v4 rollout components (subpages, shop pages, legal pages) ── */

/* fact row under the hero: big figure, short line (replaces the v3 .facts4 boxes) */
.facts{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:var(--gap);padding:0 0 64px}
.facts>div{border-top:1px solid var(--ink);padding-top:14px;min-width:0}
.facts b{display:block;font:500 28px/1.1 var(--display);letter-spacing:-.01em;margin-bottom:6px}
.facts span{display:block;font-size:14px;line-height:1.5;color:var(--muted)}
@media (max-width:860px){.facts{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:28px}}

/* hero with a photo instead of a demo */
.hero .tile{aspect-ratio:4/3}
.hero .tile.sq{aspect-ratio:1/1;max-width:520px;justify-self:end}
@media (max-width:900px){.hero .tile.sq{justify-self:start}}
.hero .display.wide{max-width:15ch}

/* list boxes: "Machen wir" / "Machen wir nicht", "Enthalten" / "Nicht enthalten" */
.lists{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.lists>*{min-width:0}
.lists .card{padding:28px}
.lists h3{font:500 20px/1.15 var(--display);margin:0 0 12px}
.lists.one{grid-template-columns:1fr}
@media (max-width:760px){.lists{grid-template-columns:1fr}}
.ticks,.cross{list-style:none;margin:0;padding:0;font-size:15px;line-height:1.5}
.ticks li,.cross li{position:relative;padding:9px 0 9px 28px;border-top:1px solid var(--silver)}
.ticks li:first-child,.cross li:first-child{border-top:0}
.ticks li::before{content:"";position:absolute;left:3px;top:15px;width:11px;height:6px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.cross li{color:var(--muted)}
.cross li::before{content:"–";position:absolute;left:4px;top:9px;color:var(--muted)}
.dash.plain li:last-child{border-bottom:0}


/* small print under a block */
.fineprint{font-size:14px;line-height:1.6;color:var(--muted);margin:20px 0 0;max-width:80ch}
.fineprint.center{margin-left:auto;margin-right:auto;text-align:center}

/* steps: optional third line in small caps size */
.steps b{display:block;line-height:1.35}
.steps.c3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:960px){.steps.c3{grid-template-columns:1fr}}

/* callout row: text left, ghost button right */
.callout{display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;border:1px solid var(--silver);border-radius:var(--r-card);padding:28px 32px;background:#fff}
.callout h2{font:500 24px/1.15 var(--display);margin:0 0 6px}
.callout p{margin:0;max-width:62ch;color:var(--muted)}
@media (max-width:560px){.callout{padding:22px}}

/* opening hours card (shop pages) */
.hours{margin:0}
.hours dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px 24px;margin:0}
.hours dt{font-weight:700}
.hours dd{margin:0;color:var(--muted)}
.hours .note{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--silver);font-size:14px;color:var(--muted)}
@media (max-width:420px){.hours dl{grid-template-columns:1fr;gap:2px}.hours dd{margin-bottom:10px}}

/* quote line (nis2) */
.quote-line{font:500 26px/1.2 var(--display);letter-spacing:-.01em;margin:24px 0;padding-left:20px;border-left:2px solid #fff}

/* demo: market ranges on one axis (was-kostet-it-betreuung) */
.rng{list-style:none;margin:16px 0 0;padding:0}
.rng li{padding:12px 0;border-bottom:1px solid var(--silver)}
.rng .t{display:flex;justify-content:space-between;gap:12px;font-size:14px;margin-bottom:8px}
.rng .t b{font-weight:700;white-space:nowrap}
.rng .bar{position:relative;height:10px;border-radius:999px;background:#f1f1f4}
.rng .bar i{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--navy-mist);box-shadow:inset 0 0 0 1px #c9cdeb}
.rng .bar i.at{background:var(--navy);box-shadow:none}
.proto .axis{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:10px}

/* demo: two-column check rows (question → answer / evidence) */
.qa{list-style:none;margin:0;padding:0}
.qa li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 16px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--silver);font-size:15px}
.qa li>span{min-width:0}
.qa small{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:2px}
@media (max-width:480px){.qa li{grid-template-columns:1fr}}

/* legal pages: page header, switcher, "Auf dieser Seite" with scroll-spy, prose */
.legal-head{padding:56px 0 40px;border-bottom:1px solid var(--silver)}
.legal-head .display{font-size:48px;margin:12px 0 16px}
.legal-head p.lead{max-width:60ch;color:var(--muted);margin:0}
@media (max-width:640px){.legal-head .display{font-size:34px}}
.legal-grid{display:grid;grid-template-columns:240px minmax(0,1fr);gap:64px;align-items:start}
.legal-side{position:sticky;top:96px;display:grid;gap:32px;font-size:14px}
.legal-nav{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.legal-nav a{display:block;padding:8px 12px;margin-left:-12px;border-radius:var(--r-btn);color:var(--muted);text-decoration:none;transition:background .15s,color .15s}
.legal-nav a:hover{color:var(--ink);background:#f4f4f6}
.legal-nav a[aria-current]{color:var(--navy);font-weight:700;background:var(--navy-mist)}
.legal-toc ol{position:relative;list-style:none;margin:0;padding:0;border-left:1px solid var(--silver);max-height:calc(100vh - 340px);overflow:auto}
.legal-toc ol::before{content:"";position:absolute;left:-1px;top:0;width:2px;height:calc(var(--p,0) * 100%);background:var(--navy);transition:height .15s linear}
.legal-toc a{display:block;padding:6px 0 6px 14px;color:var(--muted);text-decoration:none;line-height:1.35;transition:color .2s}
.legal-toc a:hover,.legal-toc a.done{color:var(--ink)}
.legal-toc a.on{color:var(--navy);font-weight:700}
.legal-toc li.part a{font-weight:700;color:var(--ink);padding-top:12px}
.prose{max-width:72ch;font-size:17px;line-height:1.7;min-width:0;overflow-wrap:anywhere}
.prose h2{font:500 26px/1.15 var(--display);letter-spacing:-.01em;margin:44px 0 14px;padding-top:40px;border-top:1px solid var(--silver);scroll-margin-top:96px}
.prose h2.part{font-size:32px;border-top:1px solid var(--ink);margin-top:64px}
.prose>h2:first-child,.prose .legal-card+h2{border-top:0;padding-top:0;margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul{list-style:none;padding:0}
.prose ul li{position:relative;padding-left:22px;margin:6px 0}
.prose ul li::before{content:"";position:absolute;left:2px;top:.8em;width:10px;height:1px;background:var(--ink)}
.prose a{color:var(--navy);text-underline-offset:3px}
.prose a:hover{text-underline-offset:5px}
.legal-card{border:1px solid var(--silver);border-radius:var(--r-card);padding:24px 28px;margin:0 0 48px;font-size:16px;background:#fff}
.legal-card h2,.legal-card .eyebrow{font:600 12px/2 var(--sans);letter-spacing:.083em;text-transform:uppercase;color:var(--ink);margin:0 0 8px;padding:0;border:0}
.legal-card p{margin:0}
.legal-box{background:var(--navy-mist);border-radius:var(--r-card);padding:20px 24px;margin:0 0 16px;font-size:16px}
.legal-box p:last-child{margin:0}
@media (max-width:900px){
  .legal-grid{grid-template-columns:minmax(0,1fr);gap:28px}
  .legal-side{position:static}
  .legal-toc{display:none}
  .legal-nav{display:flex;flex-wrap:wrap;gap:8px}
  .legal-nav a{margin:0;border:1px solid var(--silver);background:#fff}
}
.qa.cols li{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 32px}
.qa li.h{padding:16px 0 8px}
.qa li.h .eyebrow{margin:0}
.qa.cols b{font-weight:600}
@media (max-width:640px){.qa.cols li{grid-template-columns:1fr}.qa.cols li.h span+span{display:none}.qa.cols li b{color:var(--navy)}}
.pkg .price.s{font-size:36px}
.band-navy .proto .link{color:var(--ink)}
.card .qa li:last-child{border-bottom:0}
.section:not([class*="band-"]) .steps .m{background:var(--navy-mist)}
.legal-head + .section{padding-top:56px}
@media (max-width:900px){.legal-head + .section{padding-top:32px}.legal-side nav .eyebrow{display:none}}

.entry{margin:0 0 20px}
.entry img{display:block;width:100%;max-width:420px;height:auto;border-radius:var(--r-card)}
.entry figcaption{font-size:13px;color:var(--muted);margin-top:8px}
.hours .hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:16px;padding:14px 0;border-top:1px solid var(--silver)}
.hours .hrow:first-of-type{border-top:0;padding-top:4px}
.hours .hrow span{font-weight:600}
.hours .hrow b{font:600 20px/1.2 var(--display);text-align:right;white-space:nowrap}
.hours .hrow b a{color:inherit;text-decoration:none}
.hours .hrow small{grid-column:1/-1;color:var(--muted);font-size:14px;margin-top:2px}
@media (max-width:420px){.hours .hrow{grid-template-columns:1fr}.hours .hrow b{text-align:left}}
.callouts{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.callouts .callout{flex-direction:column;align-items:flex-start;justify-content:space-between;height:100%}
@media (max-width:860px){.callouts{grid-template-columns:1fr}}
.panel .more{margin-top:12px;font-weight:600}
.foot .foot-addr{line-height:1.6;margin-top:14px}
.owner-sign{margin:24px 0 8px;line-height:1.3}
.owner-sign b{display:block;font-size:16px}
.owner-sign span{display:block;font-size:14px;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:12px;align-items:center}

/* abc membership: the number field appears when the box is ticked */
.abc-field{margin:4px 0 16px}
.abc-field .check{display:flex;gap:10px;align-items:center;font-size:15px;cursor:pointer}
.abc-field .check input{width:18px;height:18px;margin:0;accent-color:var(--navy,#1b2380)}
.abc-field .abc-nr{display:none;margin-top:10px}
.abc-field:has(input[name=abc]:checked) .abc-nr{display:block}

.foot .abc-mark{display:inline-flex;align-items:center;gap:8px;text-decoration:none;color:inherit;opacity:.85}
.foot .abc-mark img{width:44px;height:auto;display:block}
.foot .abc-mark:hover{opacity:1}
.foot .base-r{display:inline-flex;align-items:center;gap:20px;flex-wrap:wrap}
.foot .base{align-items:center}


/* ───────────── v5: one system (2026-10-25). Every repeated part has one definition here (see ../DESIGN.md "v5"). ───────────── */
/* type: balanced headings, no orphans (plus build-time   joining, build_pages.no_orphans), tabular figures */
.display,.heading,.sub,.callout h2,.lists h3,summary{text-wrap:balance}
p,li,.lead,.intro{text-wrap:pretty}
.facts b,.pkg .price,.pk .price,.calc-sum,.hours .hrow b,.tbl td,.kpis b,.steps .n,.tl time{font-variant-numeric:tabular-nums}
.eyebrow{color:var(--ink)}
.band-navy .eyebrow{color:#fff}
/* intro: right column of a section head, or under a split heading */
.intro{margin:0;font-size:16px;line-height:1.55;color:var(--muted);max-width:56ch}
.band-navy .intro{color:#dfe3f5}
.sec-head{margin-bottom:48px}
.sec-head .intro{justify-self:start}
/* split heading (left column of a two-column section): eyebrow, heading, body, note, actions */
.sh .heading{max-width:20ch}
.sh .body{margin:20px 0 0;max-width:46ch}
.sh .intro{margin-top:20px;max-width:46ch}
.sh .note{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:46ch}
.sh .btns{margin-top:28px}
.sh .btns+.note{margin-top:12px}
.band-navy .sh .note{color:#dfe3f5}
.split.mid{align-items:center}
/* one gap between blocks inside a section */
.after{margin-top:48px}
.fineprint{margin-top:24px}

/* icon box: the ONE container for drawn icons. 48 px, radius 12, icon 30 px; navy mist on white, white on tints */
.ico{width:48px;height:48px;flex:none;border-radius:var(--r-card);background:var(--navy-mist);display:grid;place-items:center;margin:0}
.ico svg{width:30px;height:30px;display:block}
.band-cream .ico,.band-mist .ico{background:#fff}
.band-cream .card .ico,.band-cream .panel .ico,.band-cream .callout .ico,.band-cream .proto .ico{background:var(--navy-mist)}
.band-navy .ico{background:#fff}
/* inline icon: 20 px, one colour */
svg.i{width:20px;height:20px;flex:none;display:block}

/* card: the ONE content card (feature panels, list boxes, packages, hours). Hairline, radius 12, padding 28 */
.card,.panel,.lists .card,.pkg,.callout{border:1px solid var(--silver);border-radius:var(--r-card);background:#fff;padding:28px}
.pkg.feat{padding:27px}
.panel{display:flex;flex-direction:column}
.panel:hover{transform:none}
.panel>.ico{margin-bottom:20px}
.panel .sub,.lists h3,.card>.sub{font:500 20px/1.15 var(--display);letter-spacing:-.01em;margin:0 0 8px}
.panel p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.panel p+p{margin-top:12px}
.panel .more{margin-top:auto;padding-top:16px;font-weight:600}
.card>.eyebrow{margin-bottom:12px}
@media (max-width:560px){
  .card,.panel,.lists .card,.pkg,.callout{padding:22px}
  .pkg.feat{padding:21px}
  .panel{display:grid;grid-template-columns:48px minmax(0,1fr);gap:0 16px}
  .panel>.ico{grid-row:1/4;margin:0}
  .panel>*:not(.ico){grid-column:2}
}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--gap)}
.grid4>*{min-width:0}
@media (max-width:960px){.grid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.grid4,.grid2{grid-template-columns:1fr}}

/* feature rows: icon box | title + one line (home "Was jeden Monat mitläuft") */
.featl{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.featl li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--silver)}
.featl b{display:block;font-weight:600;line-height:1.35}
.featl span{display:block;font-size:15px;line-height:1.5;color:var(--muted)}

/* process steps: the ONE step component. Hairline on top, icon box left, number right, title 20, text 15 muted, optional tag */
.steps{gap:40px 32px}
.steps li{border-top:1px solid var(--ink);padding-top:20px;min-width:0}
.st-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}
.st-top .n{font:500 16px/1 var(--display);letter-spacing:.02em;color:var(--muted);margin:0}
.steps .sub{font-size:20px;line-height:1.15;margin:0 0 8px}
.steps li>p{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.steps .m{margin-top:14px;font-size:12px;font-weight:600;color:var(--navy);background:var(--navy-mist);border-radius:999px;padding:3px 10px}
.band-cream .steps .m,.band-mist .steps .m{background:#fff}
@media (max-width:560px){.steps{gap:28px}}

/* list marks: one tick (navy), one dash (muted) — lists, packages, comparison table */
.pkg li,.pk li{padding:6px 0 6px 26px}
.pkg li::before,.ticks li::before,.tick{content:"";position:absolute;left:3px;top:13px;width:11px;height:6px;border:0;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg);background:none}
.pkg li.no::before{content:"";left:3px;top:17px;width:10px;height:2px;border:0;background:#9a9a9a;transform:none}
.ticks li::before{top:16px}
.pkg li.no{color:var(--muted)}
.tbl .y{display:inline-block;position:relative;width:14px;height:14px;font-size:0;color:transparent}
.tbl .y::before{content:"";position:absolute;left:2px;top:2px;width:10px;height:5px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy);transform:rotate(-45deg)}
.tbl .n{display:inline-block;width:10px;height:2px;background:#9a9a9a;font-size:0;vertical-align:middle;color:transparent}

/* callout: the ONE callout. Icon box (or logo) | eyebrow, title, text | ghost button */
.callout{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;flex-wrap:nowrap}
.callout .eyebrow{color:var(--navy);margin:0 0 6px}
.callout h2,.callout h3{font:500 20px/1.15 var(--display);letter-spacing:-.01em;margin:0 0 6px}
.callout p{margin:0;color:var(--muted);font-size:15px;line-height:1.6;max-width:64ch}
.callout.abc p{color:var(--ink)}
.callout .btn{white-space:nowrap}
.abc-logo img{width:104px;height:auto;display:block}
.callouts{gap:var(--gap)}
.callouts .callout{grid-template-columns:48px minmax(0,1fr);align-items:start;height:100%}
.callouts .callout .btn{grid-column:2;justify-self:start;align-self:end}
@media (max-width:760px){.callout{grid-template-columns:1fr;gap:16px}.callouts .callout{grid-template-columns:1fr}.callouts .callout .btn{grid-column:1}}
.abc-strip{padding:0 0 64px}

/* facts under the hero: optional icon box above the figure */
.facts .ico{margin-bottom:16px}
.facts>div{padding-top:20px}
.facts b{font-size:26px}

/* hours / price rows (shop pages): the ONE row list. Optional icon box left */
.hours .hrow{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:16px 0}
.hours .hrow.has-ic{grid-template-columns:48px minmax(0,1fr) auto;column-gap:16px}
.hours .hrow.has-ic small{grid-column:2/-1}
.hours .hrow:first-of-type{padding-top:8px}
@media (max-width:420px){.hours .hrow.has-ic{grid-template-columns:48px minmax(0,1fr)}.hours .hrow.has-ic b{grid-column:2;text-align:left}}

/* contact ways: rows with the icon box (phone, WhatsApp, e-mail) */
.ways{list-style:none;margin:28px 0 0;padding:0;border-top:1px solid var(--silver);max-width:440px}
.ways li{display:grid;grid-template-columns:48px minmax(0,1fr);gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--silver)}
.ways b{display:block;font:600 12px/1.6 var(--sans);letter-spacing:.083em;text-transform:uppercase}
.ways a{font-weight:600;text-decoration:none}
.ways a:hover{text-decoration:underline}
.ways span{display:block;font-size:15px;line-height:1.5;color:var(--muted)}
.ways span a{color:var(--ink)}
.contact .display{max-width:12ch}
.contact .intro{margin-top:20px;max-width:42ch}
.contact .note{margin:16px 0 0;font-size:14px;line-height:1.6;color:var(--muted);max-width:46ch}
form.card{padding:32px}
@media (max-width:560px){form.card{padding:22px}}
.form-btn{width:100%}

/* buttons with an inline icon */
.btn svg.i{margin-left:-4px}

/* FAQ side note */
.faq-side{margin-top:16px}

/* quote line on navy */
.quote-line{border-left-color:var(--action)}

/* photo inside a split column */
.tile.sq.mw{max-width:460px}
.tile.sq.sm{max-width:360px}
.sh .tile{margin-top:28px}
/* small helpers replacing inline styles */
.card>.ico,.pkg>.ico{margin-bottom:20px}
.card-note{font-size:14px;line-height:1.6;color:var(--muted);margin:16px 0 0}
.card-text{font-size:15px;line-height:1.6;color:var(--muted);margin:0}
.card-logo img{width:120px;margin:4px 0 12px}
.qa-card{padding:8px 28px}
@media (max-width:560px){.qa-card{padding:4px 22px}}
.pkg-text{font-size:15px;line-height:1.6;color:var(--muted);margin:12px 0 0}
.calc-note{margin:12px 0 0;line-height:1.5}
.sh>.tbox,.sh>.dash,.sh>.hours,.sh>.lists{margin-top:28px}
.sh>.hours+.note{margin-top:16px}
.consent{margin:4px 0 16px}
.ts-slot{margin:0 0 16px}
.form-ok{margin:0;font-size:17px;line-height:1.5}
/* form result (contact-card.js): ok only after HTTP 2xx, otherwise the error with phone and e-mail */
.form-msg{margin:14px 0 0;padding:12px 14px;border-radius:var(--r-btn);font-size:15px;line-height:1.5;border:1px solid var(--silver);background:#fff}
.form-msg.ok{border-color:#2e7d4f;background:#eef7f1}
.form-msg.err{border-color:#b3261e;background:#fdf0ef}
.form-msg a{color:inherit}
form[data-busy] .form-btn{opacity:.6;pointer-events:none}
/* 404 */
.links404 a.card{display:flex;flex-direction:column;color:var(--ink);text-decoration:none;transition:border-color .2s}
.links404 a.card:hover{border-color:var(--ink)}
.links404 .sub{font-size:20px;margin:0 0 6px}
.links404 p{margin:0 0 12px;color:var(--muted);font-size:15px}
.links404 .more{margin-top:auto;font-size:14px;font-weight:600}
.quote-line+p{margin:0}
.facts span{text-wrap:pretty}
.band-navy .proto .eyebrow{color:var(--ink)}
.tile.sq{aspect-ratio:1/1}
.pk .price{margin:0}
.steps .sub a{color:inherit;text-decoration-thickness:1px;text-underline-offset:3px}
.trust:has(+.abc-strip){padding-bottom:40px}
.featl+.note,.sh>.featl{margin-top:24px}
.sh>.featl+.note{margin-top:20px}
.section:not([class*="band-"]) .proto:not(.line){border:1px solid var(--silver)}

/* Guard: the icon box must never be restyled by generic "li span"/".facts span" rules */
span.ico{display:inline-grid !important;place-items:center !important;flex:none !important;width:48px !important;height:48px !important;margin-top:0 !important;font-size:inherit !important;line-height:1 !important}
span.ico svg{width:30px !important;height:30px !important;display:block !important}

/* step tags (price, duration) aligned on one line at the bottom of each step */
.steps li{display:flex;flex-direction:column}
.steps li > p{margin-bottom:14px}
.steps li > .m{margin-top:auto;align-self:flex-start}

/* mobile menu (same pattern as fasanelektro): a sheet under the header, large links, current page marked,
   header button and phone/language link at the end, page behind does not scroll */
@media (max-width:1040px){
  .nav-panel{position:fixed;left:0;right:0;top:var(--menu-top,72px);bottom:0;z-index:60;display:flex;flex-direction:column;gap:20px;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-top:1px solid var(--silver);padding:4px var(--gutter) calc(24px + env(safe-area-inset-bottom));opacity:0;transform:translateY(-6px);transition:opacity .18s var(--ease),transform .18s var(--ease)}
  .nav-panel[hidden]{display:none}
  .nav-panel.open{opacity:1;transform:none}
  .mp-links a{display:flex;justify-content:space-between;align-items:center;padding:15px 0;border-bottom:1px solid var(--silver);font:600 20px/1.2 var(--display);color:var(--ink);text-decoration:none}
  .mp-links a::after{content:"";width:9px;height:9px;border-right:2px solid var(--muted,#6b6f80);border-top:2px solid var(--muted,#6b6f80);transform:rotate(45deg);margin-right:4px}
  .mp-links a[aria-current]{color:var(--navy);box-shadow:inset 3px 0 0 var(--navy);padding-left:12px;text-decoration:none}
  .mp-cta{display:grid;gap:10px}
  .mp-cta .btn{order:-1;display:flex;justify-content:center;width:100%;min-height:50px;font-size:16px;background:var(--action);border-color:var(--action);color:#fff}
  .mp-cta .lang,.mp-cta .tel{display:block;text-align:center;padding:8px 0;font-weight:600;color:var(--ink);text-decoration:none}
  html.menu-open{overflow:hidden}
  html.menu-open .cc,html.menu-open .to-top{display:none!important}
}
@media (prefers-reduced-motion:reduce){.nav-panel{transition:none;transform:none}}
/* Einwilligungen in den Anfrageformularen (consent Pflicht, spaeter freiwillig) */
.form-check{display:flex;gap:10px;align-items:flex-start;font-size:15px;line-height:1.45;margin:2px 0 12px;cursor:pointer}
.form-check input{width:18px;height:18px;margin:2px 0 0;flex:none;accent-color:var(--navy,#1b2380)}
.form-check a{text-decoration:underline}

/* phones: the header keeps its contact button (sales point on every page, next to the menu), and small text links get a
   finger-sized tap area (WCAG 2.5.8) without changing how they look */
@media (max-width:480px){
  .nav .wrap > .btn{display:inline-flex;margin-left:auto;padding:8px 12px;font-size:14px;white-space:nowrap}
  .nav .wrap > .btn + .nav-toggle,.nav .wrap > .nav-toggle{margin-left:0}
}
@media (max-width:600px){
  .foot a,.crumb a{display:inline-block;padding:10px 0}
  .post-share a,.post-share button{padding:12px 6px}
}

/* first screen: the first section is visible from the first paint, without the reveal animation (motion.js skips it).
   Otherwise the hero heading, the largest element on a phone, only appears after the script and the fade (slow LCP). */
.js section:first-of-type [data-reveal],.js section:first-of-type[data-reveal],.js section:first-of-type [data-stagger]>*{opacity:1!important;transform:none!important;transition:none!important}