/* senio:tec – Stylesheet v3 nach ki:faktum Brandbook v1.3
   Warm & nahbar für die Zielgruppe: helle Brandbook-Neutralfarben (Mist/White/Fog),
   Hive Amber als Leitfarbe (senio:tec-Claimfarbe), Doppelpunkt-Dots als Signatur.
   Große Schrift, große Anruf-Elemente, keine Tech-Effekte. */

@font-face{
  font-family:'Nunito';
  font-style:normal;
  font-weight:200 1000;
  font-display:swap;
  src:url('fonts/nunito-latin-var.woff2') format('woff2');
}

:root{
  --cyan:#00D4E0; --cyan-deep:#00B6CB; --lime:#A8E63A; --amber:#FFC107; --orange:#FF8A00;
  --amber-soft:#FFF4D6; --amber-line:#F3DFA0; --amber-text:#8A6508;
  --deepspace:#08111F; --steel:#5A6573; --fog:#C7D0DA; --mist:#F4F6F8; --white:#FFFFFF;
  --maxw:1080px;
  --shadow:0 6px 24px rgba(8,17,31,.07);
  --grad:linear-gradient(90deg,var(--cyan) 0%,var(--cyan-deep) 25%,var(--lime) 55%,var(--amber) 80%,var(--orange) 100%);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} }

body{
  margin:0; font-family:'Nunito',system-ui,sans-serif;
  background:var(--mist); color:var(--deepspace);
  font-size:20px; line-height:1.7;
}

/* ============ Wortmarke / Doppelpunkt (Brandbook, unverändert) ============ */
.wordmark{display:inline-flex;align-items:center;font-weight:800;letter-spacing:-0.01em;white-space:nowrap;}
.wordmark .txt{display:inline-block;color:currentColor;}
.wordmark.on-light{color:var(--deepspace);}
.wordmark.on-dark{color:var(--white);}
.wordmark .gradient-ai{
  background-image:var(--grad);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent!important;color:transparent!important;
}
.colon{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:.20em;height:1em;margin:0 .045em;gap:.14em;position:relative;top:.02em;flex:none;}
.colon .dot{width:.20em;height:.20em;border-radius:50%;flex:none;
  background:radial-gradient(circle at 68% 28%, #A8F5FF 0%, var(--cyan) 42%, var(--cyan-deep) 100%);
  box-shadow:0 0 .04em rgba(255,255,255,.5) inset;}

/* ============ Grundlayout ============ */
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px;}
a{color:var(--cyan-deep);}
a:focus-visible,button:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:3px;border-radius:4px;}
h1,h2,h3{line-height:1.25;font-weight:800;letter-spacing:-0.01em;}
h1{font-size:clamp(31px,4.4vw,44px);margin:.35em 0 .45em;}
h2{font-size:clamp(26px,3.3vw,33px);margin:0 0 .55em;}
h3{font-size:22px;margin:0 0 .4em;}
p{margin:.5em 0 1em;}
.eyebrow{color:var(--amber-text);font-size:15px;letter-spacing:.08em;font-weight:800;text-transform:uppercase;}
.sub{color:var(--steel);max-width:700px;}
.center{text-align:center;}
.center .sub{margin:0 auto;}

/* Doppelpunkt-Signatur als Abschnittsmarke */
.sec-mark{display:flex;gap:11px;justify-content:center;margin:0 0 16px;}
.sec-mark.left{justify-content:flex-start;}
.sec-mark span{width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 68% 28%, #A8F5FF 0%, var(--cyan) 42%, var(--cyan-deep) 100%);}

/* ============ Header ============ */
header.site{background:var(--white);border-bottom:1px solid #E7EBEF;position:sticky;top:0;z-index:40;}
header.site .bar{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 0;}
header.site .wordmark{font-size:34px;}
header.site nav{display:flex;gap:24px;flex-wrap:wrap;}
header.site nav a{color:var(--deepspace);text-decoration:none;font-weight:700;font-size:17px;}
header.site nav a:hover{color:var(--cyan-deep);}

/* Anruf-Button: warm, groß, freundlich */
.btn-call{display:inline-flex;align-items:center;gap:11px;background:var(--amber);color:var(--deepspace);
  font-weight:800;text-decoration:none;padding:14px 26px;border-radius:999px;font-size:20px;
  box-shadow:0 3px 0 #D9A406, var(--shadow);transition:transform .12s ease;}
.btn-call:hover{background:#FFCE33;transform:translateY(-1px);}
.btn-call:active{transform:translateY(1px);box-shadow:0 1px 0 #D9A406;}
.btn-call svg{flex:none;}
.btn-ghost{display:inline-block;font-weight:800;text-decoration:none;color:var(--deepspace);
  border:2px solid var(--fog);border-radius:999px;padding:13px 26px;font-size:19px;background:var(--white);}
.btn-ghost:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);}

/* ============ Hero: warm, persönlich, mit Anruf-Karte ============ */
.hero{background:linear-gradient(180deg,var(--amber-soft) 0%, var(--mist) 100%);
  border-bottom:1px solid #EDE7D5;padding:58px 0 56px;position:relative;overflow:hidden;}
.hero .grid{display:block;max-width:820px;margin:0 auto;text-align:center;position:relative;z-index:1;}
.hero .wordmark{font-size:clamp(38px,6vw,56px);margin:8px 0 4px;}
.hero .claimline{font-weight:800;color:var(--amber-text);font-size:clamp(17px,2.3vw,21px);margin:0 0 16px;}
.hero p.lead{font-size:clamp(20px,2.4vw,23px);max-width:640px;color:#2A3542;margin-left:auto;margin-right:auto;}
.trust{display:flex;gap:10px 26px;flex-wrap:wrap;padding:0;margin:22px 0 0;list-style:none;color:#3D4956;font-weight:700;font-size:18px;justify-content:center;}
.trust li::before{content:"✓";color:var(--cyan-deep);font-weight:900;margin-right:8px;}

/* Die Anruf-Karte – das Herzstück */
.call-card{background:var(--white);border-radius:22px;box-shadow:var(--shadow);
  padding:32px 30px 28px;text-align:center;border-top:6px solid var(--amber);}
.call-card .cc-title{font-weight:800;font-size:22px;margin:0 0 4px;}
.call-card .cc-sub{color:var(--steel);font-size:17px;margin:0 0 14px;}
.call-card .tel{display:block;font-size:clamp(30px,3.6vw,40px);font-weight:900;color:var(--deepspace);
  text-decoration:none;letter-spacing:.01em;margin:2px 0 12px;}
.call-card .tel:hover{color:var(--cyan-deep);}
.call-card .btn-call{width:100%;justify-content:center;font-size:21px;padding:16px 20px;}
.call-card .cc-note{color:var(--steel);font-size:16px;margin:14px 0 0;line-height:1.55;}
.call-card .cc-note b{color:var(--deepspace);}

/* ============ Sektionen ============ */
section{padding:62px 0;}
section.alt{background:var(--white);border-top:1px solid #E7EBEF;border-bottom:1px solid #E7EBEF;}

/* "Kommt Ihnen das bekannt vor?" */
.known{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px;margin-top:26px;}
.known .k{background:var(--white);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;
  font-size:19px;display:flex;gap:14px;align-items:flex-start;}
section.alt .known .k{background:var(--mist);box-shadow:none;border:1px solid #E7EBEF;}
.known .k .q{flex:none;width:34px;height:34px;border-radius:50%;background:var(--amber-soft);
  border:1px solid var(--amber-line);display:flex;align-items:center;justify-content:center;
  font-weight:900;color:var(--amber-text);font-size:18px;}
.known .k p{margin:2px 0 0;color:#2A3542;}
.known-answer{margin:26px auto 0;max-width:720px;text-align:center;font-size:21px;font-weight:700;color:var(--deepspace);}

/* Leistungen: weiche Karten, warme Icons */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:30px;}
.card{background:var(--mist);border:1px solid #E7EBEF;border-radius:18px;padding:26px 24px;}
section:not(.alt) .card{background:var(--white);box-shadow:var(--shadow);border:none;}
.card .ic{width:56px;height:56px;border-radius:50%;background:var(--amber-soft);border:1px solid var(--amber-line);
  display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
.card p{color:var(--steel);font-size:18px;margin-bottom:0;}

/* Ablauf */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px;margin-top:34px;counter-reset:step;}
.step{background:var(--white);border-radius:18px;box-shadow:var(--shadow);padding:28px 24px 24px;position:relative;}
.step::before{counter-increment:step;content:counter(step);position:absolute;top:-20px;left:22px;
  width:40px;height:40px;border-radius:50%;background:var(--amber);color:var(--deepspace);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;
  box-shadow:0 2px 0 #D9A406;}
.step p{color:var(--steel);font-size:18px;margin-bottom:0;}

/* Persönliches Versprechen (Zitat) */
.promise{max-width:760px;margin:30px auto 0;background:var(--white);border-radius:22px;box-shadow:var(--shadow);
  padding:34px 36px;border-left:6px solid var(--amber);}
.promise blockquote{margin:0;font-size:clamp(20px,2.5vw,24px);font-weight:700;line-height:1.55;color:#1B2531;}
.promise .who{margin:14px 0 0;color:var(--steel);font-size:17px;font-weight:700;}

/* Preise */
.price-box{background:var(--white);border-radius:22px;box-shadow:var(--shadow);border-top:6px solid var(--amber);
  padding:36px 32px 30px;display:grid;gap:8px;max-width:660px;margin:30px auto 0;}
.price-box .big{font-size:clamp(42px,6vw,56px);font-weight:900;color:var(--deepspace);}
.price-box .big small{font-size:.4em;font-weight:700;color:var(--steel);}
.price-box ul{list-style:none;margin:12px 0 0;padding:0;color:#3D4956;font-size:18px;display:grid;gap:10px;}
.price-box ul li::before{content:"✓";color:var(--cyan-deep);font-weight:900;margin-right:9px;}
.price-note{color:var(--steel);font-size:16px;max-width:660px;margin:16px auto 0;text-align:center;}

/* Über mich mit Foto */
.about{display:grid;grid-template-columns:.62fr 1.38fr;gap:40px;align-items:start;}
@media(max-width:860px){.about{grid-template-columns:1fr;max-width:560px;margin:0 auto;}}
.about .photo{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);background:var(--white);}
.about .photo img,.about .photo svg{display:block;width:100%;height:auto;}
.about .photo .cap{padding:14px 18px;font-size:16px;color:var(--steel);text-align:center;}
.about .photo .cap b{color:var(--deepspace);display:block;font-size:18px;}
.about p{color:#2A3542;}
.about b{color:var(--deepspace);}

/* Interaktive Umkreiskarte (Leaflet, selbst gehostet) */
.zone-map-fig{margin:28px auto 0;max-width:900px;}
.zone-map-l{height:clamp(360px,65vh,620px);border-radius:16px;border:1px solid #DDE3E8;background:var(--mist);
  position:relative;z-index:0;}  /* eigener Stacking-Context: Karte bleibt unter dem Header */
.zone-map-fig figcaption{font-size:15px;color:var(--steel);margin-top:8px;text-align:center;}
.leaflet-container{font-family:inherit;font-size:15px;}
.leaflet-control-zoom a{width:46px;height:46px;line-height:44px;font-size:28px;}
.leaflet-control-zoom a:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:-3px;}
.map-town-w{background:none;border:none;}
.map-town{display:inline-block;transform:translate(-50%,-50%);background:var(--white);border:2px solid #38424E;
  border-radius:999px;padding:4px 13px;font-weight:700;font-size:14px;color:var(--deepspace);
  text-decoration:none;white-space:nowrap;box-shadow:0 1px 3px rgba(8,17,31,.15);}
a.map-town:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);}
a.map-town:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px;}
.map-standort{background:var(--deepspace);color:var(--white);border-color:var(--deepspace);margin-top:26px;}
.zone-map-l .leaflet-interactive{cursor:pointer;}
.leaflet-popup-content{font-size:18px;line-height:1.55;margin:14px 18px;}
.mp-fee{font-weight:800;font-size:21px;color:var(--deepspace);}
@media(max-width:640px){.map-town{font-size:12px;padding:2px 9px;}}

/* Umkreiskarte (Einsatzgebiet-Seite, statisches OSM-Bild, selbst gehostet, zoombar) */
.zone-map{max-width:760px;margin:28px auto 0;}
.zone-map figure{margin:0;}
.zone-map figcaption{font-size:14px;color:var(--steel);margin-top:8px;text-align:center;}
.map-legend{list-style:none;padding:0;margin:16px 0 0;display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:center;}
.map-legend li{font-size:20px;font-weight:700;color:var(--deepspace);display:flex;align-items:center;}
.ml-ring{display:inline-block;width:26px;height:26px;border-radius:50%;margin-right:10px;flex:none;}
.ml-solid{border:4px solid #007A8A;}
.ml-dash{border:4px dashed #007A8A;}
.ml-dot{border:4px dotted #007A8A;}
.map-zoom{position:relative;overflow:hidden;border-radius:16px;border:1px solid #DDE3E8;touch-action:pan-y;}
.map-zoom.zoomed{touch-action:none;}
.map-zoom.zoomed img{cursor:grab;}
.map-zoom img{width:100%;height:auto;display:block;transform-origin:center;transition:transform .15s ease;user-select:none;-webkit-user-drag:none;}
.map-controls{position:absolute;top:12px;right:12px;display:flex;flex-direction:column;gap:8px;}
.map-controls button{width:54px;height:54px;border-radius:12px;font-size:32px;font-weight:800;line-height:1;
  background:var(--white);border:2px solid #B7C0C9;color:var(--deepspace);cursor:pointer;box-shadow:var(--shadow);}
.map-controls button:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);}
.map-controls button:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px;}
@media(max-width:640px){.zone-map{display:none;}}  /* mobil: Listen reichen */

/* Anfahrtskosten-Rechner */
.fee-finder{max-width:640px;margin:34px auto 40px;background:var(--white);border:1px solid #DDE3E8;
  border-radius:16px;padding:26px 30px;box-shadow:var(--shadow);}
.fee-finder h3{margin:0 0 16px;font-size:24px;}
.ff-row{margin-bottom:16px;}
.ff-row label{display:block;font-size:19px;font-weight:700;margin-bottom:6px;}
.ff-opt{font-weight:400;color:var(--steel);}
.ff-row input{width:100%;box-sizing:border-box;font-size:22px;padding:14px 16px;border:2px solid #B7C0C9;
  border-radius:12px;background:var(--mist);color:var(--deepspace);}
.ff-row input:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:1px;border-color:var(--cyan-deep);}
.ff-btn{width:100%;font-size:21px;border:0;cursor:pointer;justify-content:center;}
.fee-result{font-size:21px;line-height:1.6;margin:18px 0 0;padding:0;}
.fee-result.ok{background:#EAF8EE;border:2px solid #9CD6AC;border-radius:12px;padding:16px 20px;}
.fee-result.warn{background:var(--amber-soft);border:2px solid var(--amber-line);border-radius:12px;padding:16px 20px;}
.fee-price{font-size:26px;font-weight:800;color:var(--deepspace);}
.ff-note{font-size:15px;color:var(--steel);margin:12px 0 0;}

/* Einsatzgebiet – einfache Boxen mit Orten als unterstrichene Links */
.zone-simple{background:var(--white);border:1px solid #DDE3E8;border-radius:16px;padding:20px 26px;margin-top:18px;}
.zone-simple h3{margin:0 0 8px;font-size:22px;}
.area-list{margin:0;font-size:21px;line-height:2;color:var(--deepspace);}
.area-list a{color:var(--cyan-deep);text-decoration:underline;text-underline-offset:4px;font-weight:600;white-space:nowrap;}
.area-list a:hover{color:var(--deepspace);}
.area-list a:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px;border-radius:4px;}
.zone-note{font-size:20px;margin-top:20px;}

/* Einsatzgebiet – einfach & barrierefrei: große Ziele, klarer Kontrast, Fokus sichtbar */
.area-chips{display:flex;flex-wrap:wrap;gap:14px;margin-top:24px;list-style:none;padding-left:0;}
.area-chips li{flex:none;display:flex;}
.area-chips a{display:inline-flex;align-items:center;background:var(--white);border:2px solid #B7C0C9;
  box-shadow:var(--shadow);border-radius:999px;padding:14px 26px;text-decoration:none;color:var(--deepspace);
  font-weight:700;font-size:20px;min-height:48px;}
.area-chips a:hover{border-color:var(--cyan-deep);color:var(--cyan-deep);}
.area-chips a:focus-visible{outline:3px solid var(--cyan-deep);outline-offset:2px;}
.area-chips a.here{background:var(--amber-soft);border-color:var(--amber-line);}
section.alt .area-chips a{box-shadow:none;border:2px solid #B7C0C9;background:var(--mist);}

/* FAQ */
details{background:var(--white);border-radius:16px;box-shadow:var(--shadow);margin-bottom:14px;padding:6px 24px;}
section.alt details{box-shadow:none;border:1px solid #E7EBEF;background:var(--mist);}
details summary{font-weight:800;font-size:20px;padding:16px 0;cursor:pointer;}
details[open] summary{color:var(--amber-text);}
details p{color:var(--steel);margin-top:0;font-size:18px;}

/* Kontakt (große Anruf-Karte nochmals) */
.contact-final{max-width:660px;margin:28px auto 0;}

/* Lokalseiten */
.breadcrumb{font-size:16px;color:var(--steel);padding:18px 0 0;text-align:center;}
.breadcrumb a{color:var(--steel);}
.local-hero{background:linear-gradient(180deg,var(--amber-soft) 0%, var(--mist) 100%);
  border-bottom:1px solid #EDE7D5;padding:10px 0 48px;}
.local-hero .grid{display:block;max-width:820px;margin:14px auto 0;text-align:center;}
.local-hero p.lead{font-size:21px;color:#2A3542;max-width:640px;margin-left:auto;margin-right:auto;}
.local-facts{display:flex;gap:10px 26px;flex-wrap:wrap;list-style:none;padding:0;margin:20px 0 0;color:#3D4956;font-weight:700;font-size:18px;justify-content:center;}
.local-facts li::before{content:"✓";color:var(--cyan-deep);font-weight:900;margin-right:8px;}
.neighbors{margin-top:8px;}
.local-body p{color:#2A3542;}

/* Footer */
footer.site{background:var(--deepspace);color:var(--fog);padding:46px 0 96px;font-size:17px;}
footer.site .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px;}
@media(max-width:760px){footer.site .cols{grid-template-columns:1fr;}}
footer.site .wordmark{font-size:24px;margin-bottom:8px;}
footer.site a{color:var(--fog);}
footer.site a:hover{color:var(--cyan);}
footer.site ul{list-style:none;padding:0;margin:8px 0 0;display:grid;gap:6px;}
footer.site b{color:var(--white);}
footer.site .fam{font-size:14px;color:#7C8998;margin-top:16px;}
footer.site .fam a{color:#AEB9C6;text-decoration:underline;text-underline-offset:3px;}
footer.site .fam a:hover{color:var(--cyan);}
.fam-wm{font-size:inherit;font-weight:800;}
.fam-wm .colon{top:.06em;}

/* Mobile Anruf-Leiste */
.callbar{position:fixed;left:0;right:0;bottom:0;background:var(--white);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));display:none;z-index:50;
  border-top:1px solid #E7EBEF;box-shadow:0 -6px 24px rgba(8,17,31,.08);}
.callbar .btn-call{width:100%;justify-content:center;font-size:21px;}
@media(max-width:760px){
  .callbar{display:block;}
  header.site .bar .btn-call{display:none;}
  header.site nav{display:none;}
}

/* Skiplink */
.skip{position:absolute;left:-9999px;top:0;background:var(--white);color:var(--deepspace);padding:10px 16px;z-index:100;font-weight:800;}
.skip:focus{left:12px;top:12px;}

/* ============ v4-Ergänzungen: Anfahrtszonen, Steuerbonus, Hub ============ */
.zones{width:100%;max-width:860px;margin:22px auto 0;border-collapse:separate;border-spacing:0;
  background:var(--white);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;font-size:18px;}
.zones th{background:var(--amber-soft);color:var(--amber-text);text-align:left;padding:14px 20px;
  font-size:15px;letter-spacing:.06em;text-transform:uppercase;}
.zones td{padding:16px 20px;border-top:1px solid #EFF2F5;vertical-align:top;}
.zones td span{color:var(--steel);font-size:16px;font-weight:400;}
.zones td.fee{font-weight:900;font-size:24px;white-space:nowrap;}
.zones tr.hl td{background:var(--amber-soft);}
.zones td:last-child{color:var(--steel);font-size:17px;}
@media(max-width:640px){.zones td:last-child{display:none;}.zones th:last-child{display:none;}}

.tax-box{display:flex;gap:22px;align-items:flex-start;background:var(--white);border-radius:18px;
  box-shadow:var(--shadow);border-left:6px solid var(--cyan-deep);padding:26px 28px;
  max-width:860px;margin:26px auto 0;}
section.alt .tax-box{box-shadow:none;border:1px solid #E7EBEF;border-left:6px solid var(--cyan-deep);}
.tax-badge{flex:none;width:92px;height:92px;border-radius:50%;background:var(--cyan-deep);color:var(--white);
  display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:900;font-size:28px;line-height:1;}
.tax-badge span{font-size:13px;font-weight:800;letter-spacing:.05em;margin-top:3px;}
.tax-box h3{margin-top:0;}
.tax-box p{color:#2A3542;font-size:18px;margin-bottom:0;}
.tax-box .fine{display:block;color:var(--steel);font-size:15px;margin-top:8px;}
@media(max-width:560px){.tax-box{flex-direction:column;}}

.zone-card{background:var(--white);border-radius:22px;box-shadow:var(--shadow);padding:28px 30px;margin-bottom:18px;}
.zone-card .zc-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:4px;}
.zone-card h2{margin:0;}
.zc-fee{flex:none;text-align:center;background:var(--amber-soft);border:1px solid var(--amber-line);
  border-radius:16px;padding:10px 18px;font-weight:900;font-size:26px;line-height:1.1;}
.zc-fee span{display:block;font-size:13px;font-weight:800;color:var(--amber-text);letter-spacing:.05em;text-transform:uppercase;}
.zone-card.z1{border-top:6px solid var(--amber);}
.zone-card.z2{border-top:6px solid var(--cyan-deep);}
.zone-card.z3{border-top:6px solid var(--fog);}

.about .photo img{max-width:260px;margin:0 auto;display:block;border-radius:22px 22px 0 0;}