/* ============================================================
   Elektro Gradinger – Design in Logo-Farben
   Blau #1c63ad (Logo) · Anthrazit #131c26 · Akzent Gelb #ffc400
   Font: Manrope (lokal)
   ============================================================ */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;
  src:url('/assets/fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --blau:#1c63ad; --blau-d:#134c88; --blau-hell:#eaf2fa;
  --ink:#131c26; --ink-2:#2a3644; --grau:#5c6b7c; --linie:#e2e9f1;
  --gelb:#ffc400; --gelb-d:#e6b000;
  --bg:#f7fafc; --radius:18px;
  --schatten:0 6px 24px rgba(19,40,66,.09);
  --schatten-gross:0 16px 44px rgba(19,40,66,.16);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{font-family:'Manrope',system-ui,'Segoe UI',Arial,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7;font-size:17px}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau)}
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}

/* Skip-Link (Barrierefreiheit) */
.skip-link{position:absolute;left:-999px;top:0;background:var(--gelb);color:#131c26;padding:.7em 1.2em;z-index:200;font-weight:700;border-radius:0 0 10px 0}
.skip-link:focus{left:0}
:focus-visible{outline:3px solid var(--gelb);outline-offset:2px}

/* Topbar */
.topbar{background:var(--ink);color:#cfe0f2;font-size:14.5px}
.topbar-in{display:flex;justify-content:space-between;align-items:center;gap:1em;padding-top:.45em;padding-bottom:.45em;flex-wrap:wrap}
.topbar-info{font-weight:600}
.topbar-tel{color:var(--gelb);font-weight:800;text-decoration:none;white-space:nowrap}
.topbar-tel:hover{text-decoration:underline}

/* Header */
.kopf{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 2px 14px rgba(19,40,66,.08)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:1.4em;padding-top:.55em;padding-bottom:.55em}
.logo img{width:130px;height:auto}
.nav ul{display:flex;align-items:center;gap:.35em;list-style:none}
.nav a{display:block;padding:.55em .85em;color:var(--ink-2);text-decoration:none;font-weight:700;font-size:15.5px;border-radius:10px;transition:background .15s,color .15s}
.nav a:hover{background:var(--blau-hell);color:var(--blau)}
.nav a[aria-current="page"]{color:var(--blau);background:var(--blau-hell)}
.nav-cta{margin-left:.5em}
.burger{display:none;background:none;border:0;cursor:pointer;padding:10px;align-items:center;gap:.55em;font-family:inherit}
.burger-linien{display:block}
.burger-linien span{display:block;width:26px;height:3px;background:var(--ink);margin:5px 0;border-radius:2px;transition:transform .2s,opacity .2s,background .2s}
.burger-text{font-size:.72em;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink);transition:color .2s}
.nav-titel{display:none}

/* Buttons */
.btn{display:inline-block;padding:.8em 1.7em;border-radius:14px;text-decoration:none;font-weight:800;font-size:16px;border:0;cursor:pointer;transition:transform .12s,box-shadow .2s;font-family:inherit}
.btn:hover{transform:translateY(-2px)}
.btn-blau{background:var(--blau);color:#fff!important;box-shadow:0 6px 18px rgba(28,99,173,.35)}
.btn-blau:hover{background:var(--blau-d)}
.btn-gelb{background:var(--gelb);color:#131c26!important;box-shadow:0 6px 18px rgba(255,196,0,.4)}
.btn-gelb:hover{background:var(--gelb-d)}
.btn-hell{background:#fff;color:var(--blau)!important;border:2px solid #ffffff55}
.btn-hell:hover{background:var(--blau-hell)}

/* Hero */
.hero{position:relative;color:#fff;overflow:hidden;background:var(--ink)}
.hero picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(105deg,rgba(12,26,42,.94) 0%,rgba(17,48,82,.78) 45%,rgba(28,99,173,.35) 100%);z-index:1}
.hero-in{position:relative;z-index:2;padding:6.5em 22px 6em;max-width:1180px;margin:0 auto}
.hero .eyebrow{color:var(--gelb)}
.hero h1{font-size:clamp(2rem,4.6vw,3.4rem);line-height:1.12;font-weight:800;max-width:14em}
.hero p.sub{font-size:clamp(1.05rem,1.9vw,1.35rem);color:#dbe7f4;margin:.9em 0 0;max-width:34em;font-weight:600}
.hero-btns{display:flex;gap:.9em;margin-top:2em;flex-wrap:wrap}
.hero-punkte{display:flex;gap:1.6em;margin-top:2.6em;flex-wrap:wrap;color:#cfe0f2;font-weight:700;font-size:15px}
.hero-punkte span::before{content:"✔";color:var(--gelb);margin-right:.45em}

/* Abschnitte */
.abschnitt{padding:4.6em 0}
.abschnitt.hell{background:#fff}
.abschnitt.dunkel{background:var(--ink);color:#e6edf5}
.abschnitt.dunkel h2{color:#fff}
.eyebrow{display:block;font-size:13px;font-weight:800;letter-spacing:2.5px;text-transform:uppercase;color:var(--blau);margin-bottom:.5em}
h2{font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.2;font-weight:800;margin-bottom:.5em}
.einleitung{max-width:46em;color:var(--grau);font-size:1.06em}
.dunkel .einleitung{color:#b9c8d9}
.mittig{text-align:center}
.mittig .einleitung{margin:0 auto}

/* Leistungs-Karten */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1.6em;margin-top:2.4em}
.karte{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--schatten);display:flex;flex-direction:column;transition:transform .18s,box-shadow .25s}
.karte:hover{transform:translateY(-6px);box-shadow:var(--schatten-gross)}
.karte picture img{width:100%;height:200px;object-fit:cover}
.karte-in{padding:1.4em 1.5em 1.6em;display:flex;flex-direction:column;gap:.5em;flex:1}
.karte h3{font-size:1.2em;font-weight:800;color:var(--ink)}
.karte p{color:var(--grau);font-size:.97em;flex:1}
.karte .mehr{font-weight:800;text-decoration:none;color:var(--blau)}
.karte .mehr:hover{text-decoration:underline}

/* Listen-Grid (alle Leistungen) */
.leistungs-liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.6em 1.6em;margin-top:1.8em;list-style:none}
.leistungs-liste li{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:.65em 1em .65em 2.4em;position:relative;font-weight:600;color:var(--ink-2)}
.leistungs-liste li::before{content:"⚡";position:absolute;left:.8em;color:var(--blau)}
.dunkel .leistungs-liste li{background:#1b2836;border-color:#28394d;color:#dbe7f4}

/* Zweispalter */
.zwei{display:grid;grid-template-columns:1.05fr .95fr;gap:3.4em;align-items:center;margin-top:2.2em}
.zwei picture img{border-radius:var(--radius);box-shadow:var(--schatten-gross);width:100%;object-fit:cover}
.zwei h3{font-size:1.25em;margin:1.1em 0 .35em;font-weight:800}
.check-liste{list-style:none;margin-top:.6em}
.check-liste li{padding:.3em 0 .3em 1.9em;position:relative;color:var(--ink-2);font-weight:600}
.check-liste li::before{content:"✔";position:absolute;left:.2em;color:var(--blau);font-weight:800}

/* Zeitleiste (Unternehmen) */
.zeit{border-left:3px solid var(--blau-hell);margin:1.6em 0 0 .4em;padding-left:1.6em;display:grid;gap:1.2em}
.zeit div{position:relative}
.zeit div::before{content:"";position:absolute;left:-2.05em;top:.45em;width:13px;height:13px;border-radius:50%;background:var(--gelb);border:3px solid var(--blau)}
.zeit b{color:var(--blau);display:block;font-size:.95em}

/* Notdienst-Band */
.notdienst{background:linear-gradient(105deg,var(--blau) 0%,var(--blau-d) 100%);color:#fff;border-radius:var(--radius);padding:2em 2.4em;display:flex;align-items:center;gap:1.6em;flex-wrap:wrap;justify-content:space-between;box-shadow:var(--schatten-gross);margin-top:2.6em}
.notdienst h3{font-size:1.35em;font-weight:800}
.notdienst p{color:#d5e4f4;max-width:34em}

/* Referenz-Karten */
.ref-hinweis{font-size:.9em;color:var(--grau);margin-top:2em}

/* Kontakt */
.kontakt-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:2.6em;margin-top:2.4em;align-items:start}
.info-karte{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:1.8em 1.9em}
.info-karte h3{font-weight:800;font-size:1.1em;margin-bottom:.5em;color:var(--blau)}
.info-karte + .info-karte{margin-top:1.4em}
.info-karte a{font-weight:700}
.formular{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:2em 2.1em}
.feld{margin-bottom:1.15em}
.feld label{display:block;font-weight:800;font-size:.92em;margin-bottom:.35em;color:var(--ink-2)}
.feld input,.feld textarea{width:100%;padding:.85em 1em;border:2px solid var(--linie);border-radius:12px;font-family:inherit;font-size:16px;background:#fbfdff;transition:border-color .15s}
.feld input:focus,.feld textarea:focus{outline:none;border-color:var(--blau)}
.pflicht{color:#c0392b}
.zustimm{display:flex;gap:.6em;align-items:flex-start;font-size:.92em;color:var(--grau);margin-bottom:1.2em}
.zustimm input{margin-top:.3em;width:18px;height:18px;accent-color:var(--blau)}
.hp{position:absolute!important;left:-9999px!important;opacity:0;height:0;overflow:hidden}
.hinweis{padding:1em 1.3em;border-radius:12px;font-weight:700;margin-bottom:1.4em}
.hinweis.ok{background:#e8f5ee;border:2px solid #0a7d33;color:#0a7d33}
.hinweis.fehler{background:#fdecec;border:2px solid #a32020;color:#a32020}

/* Stellenanzeige (Karriere) */
.stelle{background:#fff;border-radius:var(--radius);box-shadow:var(--schatten);padding:2.2em 2.4em;margin-top:2.2em}
.stelle h3{color:var(--blau);font-size:1.45em;font-weight:800}
.stelle .stelle-meta{display:flex;gap:.6em;flex-wrap:wrap;margin:.9em 0 1.4em}
.stelle .tag{background:var(--blau-hell);color:var(--blau);border-radius:99px;padding:.25em .95em;font-weight:800;font-size:.85em}
.stelle h4{margin:1.5em 0 .4em;font-size:1.05em;font-weight:800;color:var(--ink)}
.stelle ul{list-style:none}
.stelle ul li{padding:.22em 0 .22em 1.7em;position:relative;color:var(--ink-2)}
.stelle ul li::before{content:"▸";position:absolute;left:.3em;color:var(--gelb-d);font-weight:800}
.stelle-btns{display:flex;gap:.9em;flex-wrap:wrap;margin-top:1.8em}

/* CTA-Band + Footer */
.cta-band{background:linear-gradient(105deg,var(--blau) 0%,var(--blau-d) 100%);color:#fff;padding:3.2em 0}
.cta-band-in{display:flex;justify-content:space-between;align-items:center;gap:2em;flex-wrap:wrap}
.cta-band h2{color:#fff;margin-bottom:.2em}
.cta-band p{color:#d5e4f4}
.cta-band-btns{display:flex;gap:.9em;flex-wrap:wrap}
.fuss{background:var(--ink);color:#b9c8d9;padding:3.4em 0 0;font-size:15px}
.fuss-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2.4em;padding-bottom:2.6em}
.fuss h3{color:#fff;font-size:1em;font-weight:800;margin-bottom:.7em}
.fuss ul{list-style:none}
.fuss li{margin:.35em 0}
.fuss a{color:#b9c8d9;text-decoration:none}
.fuss a:hover{color:var(--gelb)}
.fuss-logo{background:#fff;border-radius:12px;display:inline-block;padding:.6em .9em;margin-bottom:1em}
.fuss .ico{color:var(--gelb);flex:none}
.fuss h3 .ico{vertical-align:-3px;margin-right:.45em}
.fuss-adresse{font-style:normal;display:grid;gap:.55em}
.zeile-ico{display:flex;gap:.6em;align-items:flex-start;line-height:1.55}
.zeile-ico .ico{margin-top:.18em}
.zeile-ico a{word-break:break-all}
.fuss-links li a{display:inline-flex;align-items:center;gap:.35em}
.fuss-links .ico{color:#5c7089;transition:color .15s,transform .15s}
.fuss-links a:hover .ico{color:var(--gelb);transform:translateX(2px)}
.fuss-notdienst .zeile-ico{align-items:center}
.fuss-notdienst .zeile-ico .ico{margin-top:0}
.fuss-notdienst{color:var(--gelb);font-weight:700;margin-top:.7em}
.fuss-klein{font-size:.85em;color:#7b8b9d;margin-top:.8em}
.fuss-zeile{border-top:1px solid #22303f;text-align:center;padding:1.2em;font-size:.85em;color:#7b8b9d}
.fuss p{margin:.35em 0}

/* Nach-oben-Button */
.nach-oben{position:fixed;right:20px;bottom:20px;width:52px;height:52px;border-radius:14px;background:var(--blau);color:#fff;border:0;font-size:24px;font-weight:800;cursor:pointer;box-shadow:0 8px 24px rgba(19,40,66,.35);opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .25s,transform .25s,background .15s;z-index:150}
.nach-oben.sichtbar{opacity:1;pointer-events:auto;transform:translateY(0)}
.nach-oben:hover{background:var(--gelb);color:#131c26}

/* Scroll-Reveal */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .6s ease,transform .6s ease}
.reveal.da{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* Unterseiten-Hero */
.seiten-kopf{background:linear-gradient(105deg,var(--ink) 0%,#17364f 60%,var(--blau) 130%);color:#fff;padding:4.2em 0 3.6em}
.seiten-kopf h1{font-size:clamp(1.7rem,3.6vw,2.7rem);font-weight:800;line-height:1.15;max-width:20em}
.seiten-kopf .eyebrow{color:var(--gelb)}
.seiten-kopf p{color:#dbe7f4;max-width:44em;margin-top:.8em;font-weight:600}

/* Responsive */
@media (max-width:980px){
  .zwei{grid-template-columns:1fr;gap:2em}
  .kontakt-grid{grid-template-columns:1fr}
  .fuss-in{grid-template-columns:1fr 1fr}
}
@media (max-width:780px){
  .burger{display:flex}
  .nav{position:fixed;inset:0;top:0;display:none;z-index:120;padding:6.4em 1.6em 2.4em;overflow-y:auto;
    background:radial-gradient(680px 420px at 88% -8%,rgba(255,196,0,.14),transparent 60%),
      radial-gradient(680px 460px at -10% 108%,rgba(36,120,200,.42),transparent 62%),
      linear-gradient(152deg,#0f1822 0%,#152638 60%,#1b4a7e 135%)}
  .nav::before{content:"";position:absolute;inset:0;pointer-events:none;
    background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
    background-size:44px 44px}
  .nav.offen{display:block;animation:nav-rein .25s ease both}
  @keyframes nav-rein{from{opacity:0}to{opacity:1}}
  .nav-titel{display:flex;align-items:center;justify-content:center;gap:.7em;position:relative;
    color:var(--gelb);font-size:.8em;font-weight:800;letter-spacing:.3em;text-transform:uppercase;margin-bottom:1.5em}
  .nav-titel::before,.nav-titel::after{content:"";width:36px;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,var(--gelb))}
  .nav-titel::after{background:linear-gradient(90deg,var(--gelb),transparent)}
  .nav ul{flex-direction:column;align-items:stretch;gap:.55em;max-width:21em;margin:0 auto;position:relative}
  .nav a{color:#fff;font-size:1.12em;text-align:center;padding:.8em 1.2em;border-radius:14px;
    background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09)}
  .nav a:hover,.nav a[aria-current="page"]{background:rgba(255,255,255,.13);color:var(--gelb);border-color:rgba(255,196,0,.4)}
  .nav a.nav-cta{margin:1.1em 0 0;border:0;background:linear-gradient(135deg,#ffd23f 0%,#ffbe00 100%)}
  .nav a.nav-cta:hover{background:linear-gradient(135deg,#ffc400 0%,#eaaa00 100%);color:#131c26}
  .nav.offen li{animation:nav-item .34s ease both}
  .nav.offen li:nth-child(1){animation-delay:.04s}
  .nav.offen li:nth-child(2){animation-delay:.08s}
  .nav.offen li:nth-child(3){animation-delay:.12s}
  .nav.offen li:nth-child(4){animation-delay:.16s}
  .nav.offen li:nth-child(5){animation-delay:.2s}
  .nav.offen li:nth-child(6){animation-delay:.24s}
  .nav.offen li:nth-child(7){animation-delay:.3s}
  @keyframes nav-item{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .burger.offen .burger-linien span:nth-child(1){transform:translateY(8px) rotate(45deg)}
  .burger.offen .burger-linien span:nth-child(2){opacity:0}
  .burger.offen .burger-linien span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .burger.offen{position:relative;z-index:130}
  .burger.offen .burger-linien span{background:#fff}
  .burger.offen .burger-text{color:#fff}
  .hero-in{padding-top:4.2em;padding-bottom:4.2em}
  .abschnitt{padding:3.2em 0}
  .topbar-in{justify-content:center;text-align:center}
  .stelle{padding:1.6em 1.3em}
  .formular{padding:1.5em 1.2em}
}
@media (max-width:520px){
  .fuss-in{grid-template-columns:1fr}
  .hero-punkte{gap:.7em;flex-direction:column}
}

/* ============================================================
   V2 DESIGN-POLISH – State of the Art Feinschliff
   (Overrides; Basis-Regeln oben bleiben unangetastet)
   ============================================================ */
::selection{background:var(--blau);color:#fff}
body{background:#f6f9fc}

/* Header: Glas-Effekt + Verdichtung beim Scrollen */
/* Blur auf ::before statt .kopf: backdrop-filter am Element selbst macht den
   Header zum Containing Block und bricht das position:fixed-Mobilmenü */
.kopf{background:rgba(255,255,255,.88);transition:box-shadow .25s}
.kopf::before{content:"";position:absolute;inset:0;z-index:-1;-webkit-backdrop-filter:saturate(1.3) blur(12px);backdrop-filter:saturate(1.3) blur(12px)}
.kopf.gescrollt{box-shadow:0 6px 26px rgba(19,40,66,.16)}

/* Buttons: Gradients + satteres Feedback */
.btn{border-radius:16px;letter-spacing:.2px}
.btn-blau{background:linear-gradient(135deg,#2472c4 0%,#134c88 100%)}
.btn-blau:hover{background:linear-gradient(135deg,#1c63ad 0%,#0f3f70 100%)}
.btn-gelb{background:linear-gradient(135deg,#ffd23f 0%,#ffbe00 100%)}
.btn-gelb:hover{background:linear-gradient(135deg,#ffc400 0%,#eaaa00 100%)}
.btn:active{transform:translateY(0) scale(.98)}

/* Eyebrow mit Akzent-Linie */
.eyebrow{display:inline-flex;align-items:center;gap:.6em}
.eyebrow::before{content:"";width:26px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--gelb),var(--blau))}
.hero .eyebrow::before,.seiten-kopf .eyebrow::before{background:var(--gelb)}

/* Hero: Glow, feines Raster, schräge Unterkante, Glas-Chips */
.hero{clip-path:polygon(0 0,100% 0,100% calc(100% - 3vw),0 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46em 24em at 82% 18%,rgba(255,196,0,.16),transparent 60%),
             radial-gradient(40em 26em at 12% 88%,rgba(36,114,196,.35),transparent 65%),
             repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,transparent 1px 90px)}
.hero-in{padding-bottom:8em}
.hero h1{letter-spacing:-.5px;text-wrap:balance}
.hero h1 .hl{background:linear-gradient(0deg,rgba(255,196,0,.42) 0 .28em,transparent .28em);border-radius:3px;padding:0 .06em}
.hero-punkte span{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.18);border-radius:99px;padding:.45em 1.1em;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.hero-punkte{gap:.8em}

/* Ueberlappende Stat-Karten unter dem Hero */
.stats{position:relative;z-index:5;margin-top:-4.2em}
.stats-in{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1em}
.stat{background:#fff;border-radius:18px;box-shadow:0 14px 38px rgba(19,40,66,.14);padding:1.25em 1.4em;text-align:center;border-top:3px solid var(--gelb)}
.stat b{display:block;font-size:1.75em;color:var(--blau);font-weight:800;line-height:1.15;letter-spacing:-.5px}
.stat span{color:var(--grau);font-size:.86em;font-weight:700}
.stat b .zaehler{color:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;letter-spacing:inherit}
@media (max-width:980px){.stats-in{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.stats{margin-top:-2.6em}.stats-in{gap:.7em}.stat{padding:1em .8em}.stat b{font-size:1.35em}}

/* Karten: Bild-Zoom, Akzentlinie, weicherer Look */
.karte{border-radius:20px;position:relative}
.karte::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:2;border-radius:20px 20px 0 0;background:linear-gradient(90deg,var(--gelb),var(--blau));opacity:0;transition:opacity .25s}
.karte:hover::before{opacity:1}
.karte picture{overflow:hidden;display:block}
.karte picture img{transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.karte:hover picture img{transform:scale(1.06)}

/* Zweispalter-Bild mit Rahmen-Akzent */
.zwei picture{position:relative;display:block}
.zwei picture::after{content:"";position:absolute;inset:-14px 14px 14px -14px;border:3px solid var(--blau-hell);border-radius:22px;z-index:-1}

/* Notdienst-Band: Blitz-Wasserzeichen + Glow */
.notdienst{position:relative;overflow:hidden;border-radius:22px;background:linear-gradient(115deg,#2472c4 0%,#134c88 78%)}
.notdienst::after{content:"";position:absolute;right:-30px;top:-42px;width:240px;height:300px;opacity:.14;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") no-repeat center/contain;transform:rotate(12deg)}
.notdienst>*{position:relative;z-index:1}

/* CTA-Band: Punktmuster + schraege Oberkante */
.cta-band{position:relative;overflow:hidden;clip-path:polygon(0 2.2vw,100% 0,100% 100%,0 100%);padding-top:4.4em}
.cta-band::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(rgba(255,255,255,.14) 1.5px,transparent 1.5px);background-size:26px 26px;opacity:.5}
.cta-band .wrap{position:relative;z-index:1}

/* Seiten-Kopf: Glow + schraege Kante wie Hero */
.seiten-kopf{position:relative;overflow:hidden;clip-path:polygon(0 0,100% 0,100% calc(100% - 2vw),0 100%);padding-bottom:4.4em}
.seiten-kopf::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(38em 20em at 85% 20%,rgba(255,196,0,.14),transparent 60%),
             radial-gradient(30em 18em at 8% 90%,rgba(36,114,196,.3),transparent 65%)}
.seiten-kopf .wrap{position:relative;z-index:1}

/* Formular & Infokarten runder */
.formular,.info-karte,.stelle{border-radius:20px}
.feld input,.feld textarea{border-radius:13px}

/* Nach-oben-Button: rund + Gradient */
.nach-oben{border-radius:50%;background:linear-gradient(135deg,#2472c4,#134c88)}
.nach-oben:hover{background:linear-gradient(135deg,#ffd23f,#ffbe00);color:#131c26}

/* Sanfterer Reveal (Stagger-Delay setzt JS) */
.reveal{transform:translateY(26px)}

/* Fix: Stat-Karten duerfen auf schmalen Screens umbrechen/schrumpfen */
.stats-in{align-items:stretch}
.stat{min-width:0}
.stat b,.stat span{overflow-wrap:anywhere}
@media (max-width:520px){.stat b{font-size:1.12em}.stat span{font-size:.8em}}

/* ============================================================
   V3 – Icon-Konsistenz (nur SVG, keine Emojis) + Footer-Politur
   ============================================================ */
/* Highlight-Marker im Hero: liegt jetzt IM Textfluss statt darunter */
.hero h1 .hl{background:linear-gradient(180deg,transparent 58%,rgba(255,196,0,.5) 58%);border-radius:4px;padding:0 .08em}

/* Buttons & Links mit Inline-Icons sauber ausrichten */
.btn{display:inline-flex;align-items:center;gap:.5em}
.btn .ico{flex:none}
.karte .mehr{display:inline-flex;align-items:center;gap:.3em}
.karte .mehr .ico{transition:transform .18s}
.karte .mehr:hover .ico{transform:translateX(3px)}

/* Topbar-Icons */
.topbar-info,.topbar-tel{display:inline-flex;align-items:center;gap:.45em}
.topbar-info .ico{color:var(--gelb)}
.topbar-tel .ico{color:currentColor}

/* Hero-Chips: SVG-Check statt ✔-Pseudo */
.hero-punkte span{display:inline-flex;align-items:center;gap:.5em}
.hero-punkte span::before{content:none}
.hero-punkte .ico{color:var(--gelb)}

/* Stat-Karte mit Blitz-Icon */
.stat b{display:flex;align-items:center;justify-content:center;gap:.3em}
.stat b .ico{color:var(--gelb-d)}
.stat b,.stat span{overflow-wrap:normal;hyphens:manual}
@media (max-width:520px){.stat b,.stat span{overflow-wrap:anywhere}}

/* Notdienst-Band: Icon in der Überschrift */
.notdienst h3{display:flex;align-items:center;gap:.45em}
.notdienst h3 .ico{color:var(--gelb)}

/* Listen-Bullets als SVG (statt Emoji): Blitz + Check im Stroke-Stil */
.leistungs-liste li{padding-left:2.5em}
.leistungs-liste li::before{content:"";width:16px;height:16px;top:.85em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c63ad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") no-repeat center/contain}
.check-liste li::before{content:"";width:17px;height:17px;top:.5em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c63ad' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7'/%3E%3C/svg%3E") no-repeat center/contain}

/* Kontakt-Infokarten: Icon-Zeilen + Überschriften */
.info-karte h3{display:flex;align-items:center;gap:.5em}
.info-karte h3 .ico{color:var(--gelb-d)}
.kontakt-zeile{display:flex;align-items:center;gap:.55em;margin-top:.7em}
.kontakt-zeile .ico{color:var(--blau);flex:none}
.kontakt-zeile a{font-weight:700;word-break:break-all}
.notdienst-zeile{color:var(--blau);font-weight:800;align-items:flex-start}
.notdienst-zeile .ico{color:var(--gelb-d);margin-top:.2em}

/* Footer: Farbakzent-Linie oben, ruhigere Rhythmik, Notdienst-Chip */
.fuss{position:relative;padding-top:3.8em}
.fuss::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--gelb) 0%,var(--blau) 55%,var(--ink) 100%)}
.fuss h3{text-transform:uppercase;letter-spacing:1.4px;font-size:.82em;color:#8fa2b8;display:flex;align-items:center;gap:.5em;margin-bottom:.9em}
.fuss h3 .ico{color:var(--gelb);vertical-align:0;margin-right:0}
.fuss-in{gap:2.8em;padding-bottom:3em}
.fuss-links li{margin:.5em 0}
.fuss-adresse{gap:.65em}
.fuss .zeile-text{display:block;line-height:1.6}
.fuss-logo{margin-bottom:1.2em}
.fuss-notdienst{display:flex;gap:.6em;align-items:flex-start;background:rgba(255,196,0,.07);border:1px solid rgba(255,196,0,.35);border-radius:12px;padding:.75em .95em;margin-top:1em;line-height:1.5}
.fuss-notdienst .ico{color:var(--gelb);flex:none;margin-top:.15em}
.fuss-notdienst b{color:var(--gelb)}

/* Hero-Highlight final: klare gelbe Akzent-Unterstreichung statt Marker-Balken */
.hero h1 .hl{background:none;padding:0;border-radius:0;
  text-decoration:underline;text-decoration-color:var(--gelb);
  text-decoration-thickness:.14em;text-underline-offset:.18em}

/* ============================================================
   V4 – Button-Animationen (Glanz-Sweep, Lift, Ring, Puls)
   ============================================================ */
.btn{position:relative;overflow:hidden;
  transition:transform .22s cubic-bezier(.2,.7,.3,1.35),box-shadow .28s ease,background .2s ease}
/* Glanz-Streifen, der beim Hover ueber den Button laeuft */
.btn::after{content:"";position:absolute;top:-2px;bottom:-2px;left:-75%;width:50%;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.5) 50%,transparent 100%);
  transform:skewX(-20deg);pointer-events:none;transition:none;opacity:0}
.btn:hover::after{opacity:1;left:135%;transition:left .6s ease,opacity .1s}
.btn:hover{transform:translateY(-3px)}
.btn-blau:hover{box-shadow:0 14px 30px rgba(28,99,173,.45)}
.btn-gelb:hover{box-shadow:0 14px 30px rgba(255,190,0,.55)}
.btn-hell:hover{box-shadow:0 12px 26px rgba(16,42,74,.2)}
.btn:active{transform:translateY(-1px) scale(.96);transition-duration:.08s}
/* Icon "klingelt" kurz beim Hover (Telefon & Co.) */
@keyframes eg-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
.btn:hover .ico{animation:eg-ring .55s ease}
/* Notfall-Button: dezenter Aufmerksamkeits-Puls */
@keyframes eg-puls{0%,100%{box-shadow:0 6px 18px rgba(255,196,0,.4)}50%{box-shadow:0 6px 30px rgba(255,196,0,.8)}}
.nav-cta{animation:eg-puls 2.8s ease-in-out infinite}
.nav-cta:hover{animation:none}
/* Nach-oben-Button huepft leicht beim Hover */
.nach-oben:hover{transform:translateY(-4px)}
.nach-oben:active{transform:translateY(-1px) scale(.94)}
/* Formular-Submit erbt alles ueber .btn – Fokusring bleibt sichtbar */
.btn:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
.btn-gelb:focus-visible{outline-color:var(--blau)}

/* Telefon-Link im Fließtext mit Icon */
.tel-inline{display:inline-flex;align-items:center;gap:.3em;white-space:nowrap;font-weight:800;text-decoration:none;color:var(--blau)}
.tel-inline .ico{color:var(--blau);flex:none}
.tel-inline:hover{text-decoration:underline}

/* Footer: Cookie-frei-Hinweis als Chip (analog Notdienst-Chip, gruen) */
.fuss-cookiefrei{display:flex;gap:.6em;align-items:flex-start;background:rgba(64,190,120,.08);border:1px solid rgba(64,190,120,.35);border-radius:12px;padding:.75em .95em;margin-top:1em;line-height:1.5;color:#9fd8b7;font-size:.92em}
.fuss-cookiefrei .ico{color:#4fc47f;flex:none;margin-top:.15em}

/* Komplett-Überblick: individuelle Service-Icons statt Einheits-Bullet */
.leistungs-liste li{display:flex;align-items:center;gap:.7em;padding:.65em 1em}
.leistungs-liste li::before{content:none}
.leistungs-liste li .ico{color:var(--blau);flex:none}

/* ============================================================
   V6 – Komplett-Überblick als einheitliche Kacheln (Icon oben)
   ============================================================ */
.leistungs-liste{grid-template-columns:repeat(auto-fill,minmax(205px,1fr));grid-auto-rows:1fr;gap:1em}
.leistungs-liste li{flex-direction:column;align-items:center;justify-content:flex-start;text-align:center;
  gap:.75em;padding:1.35em 1em 1.25em;border-radius:16px;font-size:.95em;line-height:1.45;
  transition:transform .16s ease,box-shadow .22s ease,border-color .2s}
.leistungs-liste li:hover{transform:translateY(-4px);box-shadow:var(--schatten);border-color:#cfe0f2}
.leistungs-liste li .ico{width:46px;height:46px;padding:11px;background:var(--blau-hell);border-radius:13px;color:var(--blau)}
.leistungs-liste li span{display:block}
@media (max-width:520px){.leistungs-liste{grid-template-columns:repeat(2,1fr);gap:.7em}
  .leistungs-liste li{padding:1em .6em;font-size:.85em}
  .leistungs-liste li .ico{width:38px;height:38px;padding:9px}}

/* Entwickler-Credit unter dem Footer */
.fuss-credit{text-align:center;padding:0 1em 1.4em;background:var(--ink)}
.fuss-credit a{color:#7b8b9d;font-size:.82em;text-decoration:none;display:inline-flex;align-items:center;gap:.35em;transition:color .15s}
.fuss-credit a:hover{color:#b9c8d9}
.fuss-credit .herz{flex:none;animation:eg-herz 2.2s ease-in-out infinite}
@keyframes eg-herz{0%,100%{transform:scale(1)}12%{transform:scale(1.22)}24%{transform:scale(1)}}

/* Google-Bewertungen auf der Startseite */
.bewertungen{display:grid;grid-template-columns:minmax(240px,.8fr) 1.6fr;gap:1.6em;margin-top:2.2em;align-items:stretch}
.bewertung-summe{background:#fff;border-radius:20px;box-shadow:var(--schatten);padding:2em 1.6em;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5em;text-align:center;border-top:3px solid var(--gelb)}
.bewertung-zahl{font-size:3.2em;font-weight:800;color:var(--ink);line-height:1;letter-spacing:-1px}
.sterne{display:inline-flex;gap:.15em}
.bewertung-anzahl{color:var(--grau);font-weight:700;font-size:.95em}
.bewertung-summe .btn{margin-top:.9em;font-size:14.5px;padding:.7em 1.4em}
.bewertung-karte{background:#fff;border-radius:20px;box-shadow:var(--schatten);padding:1.8em 2em;display:flex;flex-direction:column;gap:.9em;border-top:3px solid var(--blau)}
.bewertung-karte blockquote{margin:0;color:var(--ink-2);line-height:1.75;font-size:1.02em}
.bewertung-tags{display:flex;gap:.5em;flex-wrap:wrap}
.bewertung-tags .tag{background:var(--blau-hell);color:var(--blau);border-radius:99px;padding:.25em .9em;font-weight:700;font-size:.82em}
.bewertung-quelle{color:var(--grau);font-size:.88em;font-weight:600}
@media (max-width:820px){.bewertungen{grid-template-columns:1fr}}

/* Komplett-Überblick V2: kompakte, ausgewogene Kacheln */
.leistungs-liste li{justify-content:center;gap:.55em;padding:1.25em .9em;min-height:8.2em}
.leistungs-liste .ll-titel{font-weight:700;color:var(--ink);line-height:1.3}
.leistungs-liste .ll-sub{font-size:.8em;color:var(--grau);font-weight:600;line-height:1.35;margin-top:-.2em}

/* Bewertungs-Summenkarte: zwei Buttons kompakt */
.bewertung-summe .btn+.btn{margin-top:.35em}

/* Bewertungs-Einbauten: Hero-Chip, Kontakt-Karte, Karriere-Badge */
.hero-punkte a.hero-google{display:inline-flex;align-items:center;gap:.45em;color:#fff;text-decoration:none;
  background:rgba(255,196,0,.16);border:1px solid rgba(255,196,0,.45);border-radius:99px;padding:.45em 1.1em;
  font-weight:800;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .15s}
.hero-punkte a.hero-google:hover{background:rgba(255,196,0,.3)}
.bewertung-mini{display:flex;align-items:center;gap:.5em;font-size:1.02em;color:var(--ink-2)}
.info-bewertung .kontakt-zeile a{font-weight:700}
.google-badge{display:inline-flex;align-items:center;gap:.5em;background:#fff;border:2px solid var(--blau-hell);
  border-radius:99px;padding:.45em 1.1em;text-decoration:none;color:var(--ink-2);font-weight:700;font-size:.95em;
  transition:border-color .15s,box-shadow .2s}
.google-badge:hover{border-color:var(--gelb);box-shadow:var(--schatten)}

/* Google-Kopfzeile in Rezensions-Karten */
.google-kopf{display:flex;align-items:center;gap:.8em;padding-bottom:.9em;border-bottom:1px solid var(--linie)}
.g-kreis{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;background:#fff;border:1px solid var(--linie);border-radius:50%;box-shadow:0 2px 8px rgba(19,40,66,.08);flex:none}
.google-kopf-text{display:flex;flex-direction:column;gap:.15em}
.google-kopf-text b{color:var(--ink);font-size:1.02em}
.google-kopf-text small{display:inline-flex;align-items:center;gap:.4em;color:var(--grau);font-weight:700;font-size:.85em}

/* Autor der Rezension */
.bewertung-autor{margin-top:.7em;font-weight:800;color:var(--ink);font-style:normal;font-size:.95em}

/* Anliegen-Auswahl im Formular */
.feld select{width:100%;padding:.85em 1em;border:2px solid var(--linie);border-radius:13px;font-family:inherit;font-size:16px;background:#fbfdff;transition:border-color .15s}
.feld select:focus{outline:none;border-color:var(--blau)}

/* Mobil-Fix: lange Wörter in Kachel-Grid und Stellenanzeige umbrechen */
@media (max-width:520px){
	.leistungs-liste{grid-template-columns:repeat(2,minmax(0,1fr))}
	.leistungs-liste .ll-titel,.leistungs-liste .ll-sub{overflow-wrap:anywhere;hyphens:auto}
	.stelle h3,.stelle li,.stelle .tag{overflow-wrap:anywhere}
}

/* Bewerbungsformular (Karriere) – Datei-Feld mit eigener (deutscher)
   Beschriftung: natives Input unsichtbar, Label-Box übernimmt die Bedienung */
.bewerbung-formular{max-width:46em;margin-top:2.6em;scroll-margin-top:6em}
.datei-input{position:absolute;left:0;top:0;width:1px;height:1px;opacity:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.datei-box{display:flex;flex-wrap:wrap;align-items:center;gap:.4em .9em;width:100%;margin:0;padding:.75em .9em;border:2px dashed var(--linie);border-radius:13px;background:#fbfdff;cursor:pointer;font-weight:400;transition:border-color .15s}
.datei-box:hover{border-color:var(--blau)}
.datei-input:focus-visible + .datei-box{border-color:var(--blau);border-style:solid;box-shadow:0 0 0 4px rgba(28,99,173,.12)}
.datei-knopf{display:inline-flex;align-items:center;gap:.45em;background:var(--blau-hell);color:var(--blau);font-weight:700;font-size:.92em;padding:.5em 1em;border-radius:9px;flex:none}
.datei-hinweis{font-size:.85em;color:var(--grau);margin:.5em 0 0}
#bw-datei-info{font-size:.85em;color:var(--grau);font-weight:600;word-break:break-word}
#bw-datei-info.gewaehlt{color:var(--blau)}
#bw-datei-info.fehler-text{color:#a32020}

/* Notfall-Button im Header: .nav a:hover (hellblauer Pill) übersteuerte den
   gelben Button-Hover -> explizit Gelb-Verlauf beibehalten */
.nav a.nav-cta:hover{background:linear-gradient(135deg,#ffc400 0%,#eaaa00 100%);color:#131c26}

/* ---------------------------------------------------------------
   Urlaubshinweis (CMS-gepflegt, /admin) – Popup auf allen Seiten.
   Sichtbar erst, wenn main.js die Klasse .offen setzt; ohne JS bleibt
   das Element durch das hidden-Attribut ausgeblendet.
   --------------------------------------------------------------- */
.urlaub-lage{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:1.2em;
  background:rgba(9,18,30,.66);backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);
  opacity:0;transition:opacity .3s ease}
.urlaub-lage.offen{opacity:1}
.urlaub-lage[hidden]{display:none}

.urlaub-box{position:relative;width:100%;max-width:30em;background:#fff;border-radius:26px;overflow:hidden;
  box-shadow:0 30px 80px rgba(5,15,28,.5),0 4px 14px rgba(5,15,28,.3);
  transform:translateY(18px) scale(.965);opacity:.4;
  transition:transform .42s cubic-bezier(.16,.84,.3,1.03),opacity .3s ease;
  max-height:calc(100vh - 2.4em);overflow-y:auto}
.urlaub-lage.offen .urlaub-box{transform:none;opacity:1}
.urlaub-box:focus{outline:none}

/* Kopf im Hero-Look: dunkles Navy, Goldschimmer, feines Gitter, Blitz-Wasserzeichen */
.urlaub-kopf{position:relative;overflow:hidden;padding:2.4em 2em 2.9em;text-align:center;color:#fff;
  background:
    radial-gradient(560px 300px at 86% -20%,rgba(255,196,0,.22),transparent 60%),
    radial-gradient(620px 360px at -12% 120%,rgba(36,120,200,.5),transparent 62%),
    linear-gradient(150deg,#0f1822 0%,#152638 55%,#1b4a7e 128%)}
.urlaub-kopf::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:38px 38px;
  -webkit-mask-image:radial-gradient(120% 120% at 50% 0,#000 40%,transparent 78%);
  mask-image:radial-gradient(120% 120% at 50% 0,#000 40%,transparent 78%)}
.urlaub-kopf::after{content:"";position:absolute;right:-34px;top:-46px;width:190px;height:240px;opacity:.13;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ffffff'%3E%3Cpath d='M13 2 4 14h6l-1 8 9-12h-6z'/%3E%3C/svg%3E") no-repeat center/contain;transform:rotate(13deg)}
.urlaub-kopf>*{position:relative;z-index:1}
.urlaub-vorschau-fahne{position:absolute;top:0;left:0;z-index:4;background:var(--gelb);color:#0f2033;font-weight:800;
  font-size:.72em;letter-spacing:.06em;text-transform:uppercase;padding:.32em .8em;border-radius:0 0 12px 0;box-shadow:0 3px 10px rgba(20,40,66,.3)}

.urlaub-ikon{display:grid;place-items:center;width:70px;height:70px;border-radius:50%;margin:0 auto .85em;color:#ffcf33;
  background:radial-gradient(circle at 50% 38%,rgba(255,206,51,.34),rgba(255,206,51,.10) 62%,transparent 74%);
  box-shadow:0 0 0 1.5px rgba(255,206,51,.4),0 0 34px rgba(255,196,0,.34);
  animation:urlaub-puls 3.6s ease-in-out infinite}
@keyframes urlaub-puls{0%,100%{box-shadow:0 0 0 1.5px rgba(255,206,51,.4),0 0 26px rgba(255,196,0,.28)}
  50%{box-shadow:0 0 0 1.5px rgba(255,206,51,.55),0 0 40px rgba(255,196,0,.46)}}
.urlaub-kopf .eyebrow{justify-content:center;color:#ffce33}
.urlaub-kopf .eyebrow::before{background:linear-gradient(90deg,var(--gelb),#ffffff88)}
.urlaub-kopf h2{font-size:1.62em;line-height:1.16;margin:.42em 0 .05em;color:#fff;letter-spacing:-.01em}

.urlaub-zeitraum{display:inline-flex;align-items:center;gap:.5em;font-weight:800;color:#0f2033;font-size:.98em;
  background:linear-gradient(135deg,#ffd23f,#ffbe00);border-radius:30px;padding:.5em 1.2em;
  margin-top:.95em;margin-bottom:-1.35em;position:relative;z-index:3;
  box-shadow:0 8px 20px rgba(20,40,66,.28),0 2px 5px rgba(20,40,66,.2)}
.urlaub-zeitraum .ico{flex:none}
.urlaub-bis{opacity:.6;font-weight:700;margin:0 .05em}

.urlaub-body{padding:2.5em 2em 1.9em;text-align:center}
#urlaub-text{color:var(--ink-2);font-size:1.03em;margin:0 auto;max-width:26em}

.urlaub-notdienst{display:flex;align-items:center;gap:.9em;text-align:left;margin-top:1.35em;padding:.9em 1.1em;
  border-radius:15px;text-decoration:none;color:var(--ink);
  background:linear-gradient(100deg,#fff8e6,#fffdf6);border:1.5px solid #ffe08a;
  transition:border-color .16s,box-shadow .16s,transform .16s}
.urlaub-notdienst:hover{border-color:#ffc400;box-shadow:0 8px 22px rgba(255,190,0,.28);transform:translateY(-2px)}
.urlaub-nd-ikon{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;
  background:var(--gelb);color:#0f2033;box-shadow:0 4px 12px rgba(255,190,0,.4)}
.urlaub-nd-text{display:flex;flex-direction:column;line-height:1.3;flex:1}
.urlaub-nd-text b{font-size:.88em;color:var(--ink-2);font-weight:700}
.urlaub-nd-tel{font-size:1.08em;font-weight:800;color:var(--blau)}
.urlaub-notdienst>.ico{flex:none;color:var(--grau)}
.urlaub-notdienst:hover>.ico{color:var(--blau)}

.urlaub-btns{display:flex;gap:.7em;justify-content:center;flex-wrap:wrap;margin-top:1.6em}
.urlaub-btns .btn{display:inline-flex;align-items:center;gap:.5em;padding:.78em 1.6em}
.urlaub-zweit{background:var(--blau-hell);color:var(--blau)!important;border:2px solid #d3e3f4;text-decoration:none}
.urlaub-zweit:hover{background:#dceafa;border-color:#b9d3ee}

.urlaub-zu{position:absolute;top:.85em;right:.85em;z-index:2;width:36px;height:36px;display:grid;place-items:center;
  border:0;border-radius:50%;background:rgba(255,255,255,.16);color:#fff;cursor:pointer;
  backdrop-filter:blur(2px);transition:background .16s,transform .16s}
.urlaub-zu:hover{background:rgba(255,255,255,.3);transform:rotate(90deg)}
.urlaub-zu:focus-visible,.urlaub-btns .btn:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}

@media (max-width:520px){
  .urlaub-kopf{padding:2.1em 1.4em 1.8em}
  .urlaub-kopf h2{font-size:1.4em}
  .urlaub-body{padding:2.35em 1.35em 1.6em}
  .urlaub-btns .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){
  .urlaub-lage{opacity:1}
  .urlaub-box{transform:none;opacity:1}
  .urlaub-ikon{animation:none}
  .urlaub-zu:hover{transform:none}
}