:root{
    --dark:#004080;
    --blue:#007BB2;
    --ink:#2B3A47;
    --muted:#5E6E7C;
    --paper:#FFFFFF;
    --grey:#F4F7F9;
    --line:#E1E7EC;
    --radius:6px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  section[id], div[id]{scroll-margin-top:100px;}
  body{background:var(--paper); color:var(--ink); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:17px; line-height:1.65; -webkit-font-smoothing:antialiased;}
  h1,h2,h3,h4{color:var(--dark); font-weight:700; line-height:1.18;}
  a{color:inherit;}
  img{max-width:100%;}
  .wrap{max-width:1120px; margin:0 auto; padding:0 20px;}

  /* ---------- Header ---------- */
  header{position:sticky; top:0; background:rgba(255,255,255,0.97); backdrop-filter:blur(6px); border-bottom:1px solid var(--line); z-index:100;}
  .headerbar{display:flex; align-items:center; gap:10px; padding:12px 20px; max-width:1120px; margin:0 auto;}
  .headerbar > a:first-child{flex-shrink:0;}
  .brand-logo{height:42px; width:auto; display:block;}
  @media (min-width:641px){ .brand-logo{height:58px;} .headerbar{min-height:84px;} }
  @media (max-width:640px){ body{font-size:16px;} }
  .header-cta{display:flex; align-items:center; gap:18px; margin-left:auto;}
  .header-cta .btn{white-space:nowrap;}
  .tel-head{display:none; align-items:center; gap:8px; font-size:16.5px; font-weight:600; color:var(--dark); text-decoration:none; white-space:nowrap;}
  .tel-head svg{width:18px; height:18px; color:var(--blue);}
  .tel-head:hover{color:var(--blue);}

  /* Menü-Button mit Dropdown */
  .menu-wrap{position:relative; flex-shrink:0;}
  .menu-btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; height:44px; min-width:44px; padding:0 12px; border:1px solid #D3DDE5; border-radius:var(--radius); background:#fff; color:var(--dark); font:inherit; font-size:15px; font-weight:600; cursor:pointer; transition:border-color .2s, background .2s;}
  .menu-btn:hover, .menu-btn[aria-expanded="true"]{border-color:var(--dark);}
  .menu-btn:focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  .menu-label{display:none;}
  .burger{position:relative; display:block; width:22px; height:22px; flex-shrink:0;}
  .burger svg{position:absolute; left:0; top:0; width:22px; height:22px; transition:opacity .2s, transform .25s;}
  .burger .ic-close{opacity:0; transform:rotate(-90deg);}
  .menu-btn[aria-expanded="true"] .ic-menu{opacity:0; transform:rotate(90deg);}
  .menu-btn[aria-expanded="true"] .ic-close{opacity:1; transform:none;}
  .menu-panel{position:absolute; right:0; top:calc(100% + 12px); width:min(290px, calc(100vw - 32px)); display:flex; flex-direction:column; padding:8px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 18px 44px rgba(0,64,128,.16); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .2s, transform .2s, visibility 0s linear .2s; z-index:120;}
  .menu-panel.open{opacity:1; visibility:visible; transform:none; transition:opacity .2s, transform .2s;}
  .menu-panel a{display:flex; align-items:center; gap:10px; padding:12px 14px; border-radius:8px; text-decoration:none; color:var(--ink); font-size:16px; font-weight:500;}
  .menu-panel a::after{content:""; margin-left:auto; width:7px; height:7px; border-top:2px solid #A9BBC9; border-right:2px solid #A9BBC9; transform:rotate(45deg); flex-shrink:0;}
  .menu-panel a:hover, .menu-panel a:focus-visible{background:var(--grey); color:var(--dark); outline:none;}
  .menu-panel a:hover::after{border-color:var(--blue);}
  .menu-tag{font-size:11.5px; font-weight:600; color:var(--blue); background:#E7F2F8; border-radius:20px; padding:3px 9px;}
  .menu-panel a.menu-call{margin-top:6px; padding-top:14px; border-top:1px solid var(--line); border-radius:0 0 8px 8px; flex-direction:column; align-items:flex-start; gap:2px;}
  .menu-panel a.menu-call::after{display:none;}
  .menu-call small{font-size:13px; font-weight:600; color:var(--muted);}
  .menu-call strong{font-size:18px; color:var(--dark);}
  .btn{display:inline-flex; align-items:center; gap:8px; text-decoration:none; font-weight:600; border-radius:var(--radius); border:1.5px solid transparent; transition:background .2s, color .2s, border-color .2s; cursor:pointer;}
  .btn-sm{padding:10px 18px; font-size:15px;}
  .btn-md{padding:14px 24px; font-size:16px;}
  .btn-dark{background:var(--dark); color:#fff;}
  .btn-dark:hover{background:#003367;}
  .btn-blue{background:var(--blue); color:#fff;}
  .btn-blue:hover{background:#00689A;}
  .btn-ghost{border-color:var(--dark); color:var(--dark); background:transparent;}
  .btn-ghost:hover{background:var(--dark); color:#fff;}
  .btn-ghost-light{border-color:#fff; color:#fff; background:transparent;}
  .btn-ghost-light:hover{background:#fff; color:var(--dark);}

  /* ---------- Hero ---------- */
  .hero{position:relative; overflow:hidden; background:linear-gradient(135deg,#F8FBFD 0%,#EDF4FA 50%,#D9EAF6 100%);}
  .hero::before{content:""; position:absolute; width:640px; height:640px; right:-180px; top:-220px; border-radius:50%; background:radial-gradient(circle, rgba(0,123,178,.15) 0%, rgba(0,123,178,0) 70%); pointer-events:none;}
  .hero-grid{position:relative; padding:52px 20px 84px;}
  .hero-text{position:relative; z-index:2;}
  .hero h1 .accent{color:var(--blue);}
  .hero-mark{position:absolute; z-index:1; top:24px; right:-56px; height:250px; width:auto; opacity:.07; pointer-events:none; user-select:none;}
  .hero-side{position:relative; z-index:2; margin-top:30px; display:grid; gap:12px;}
  .hero-card{display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px 14px 18px; text-decoration:none; box-shadow:0 14px 34px rgba(0,64,128,.14); transition:transform .25s, box-shadow .25s;}
  .hero-card:hover{transform:translateY(-2px); box-shadow:0 18px 40px rgba(0,64,128,.20);}
  .hc-dot{position:relative; width:11px; height:11px; border-radius:50%; background:#22B55B; flex-shrink:0;}
  .hc-dot::after{content:""; position:absolute; inset:0; border-radius:50%; background:#22B55B; animation:heroPulse 2s ease-out infinite;}
  .hc-text{display:flex; flex-direction:column; line-height:1.25;}
  .hc-label{font-size:13.5px; font-weight:600; color:var(--muted); letter-spacing:.3px;}
  .hc-tel{font-size:20px; font-weight:700; color:var(--dark);}
  .hc-icon{width:40px; height:40px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-left:6px;}
  .hc-icon svg{width:18px; height:18px;}
  .hc-job{width:22px; height:22px; color:var(--blue); flex-shrink:0; margin:0 -5px 0 -5px;}
  .hc-icon.dark{background:var(--dark);}
  .hc-text{flex-grow:1;}
  .hero-wave{position:absolute; left:0; bottom:-1px; width:100%; height:44px; display:block; z-index:1;}
  /* Einblend-Animation: startet erst, wenn die Seite wirklich sichtbar ist */
  .anim:not(.anim-go) .hero-text > *, .anim:not(.anim-go) .hero-card, .anim:not(.anim-go) .hero-mark{opacity:0;}
  .anim-go .hero-text > *{animation:heroUp .9s cubic-bezier(.2,.7,.2,1) both;}
  .anim-go .hero-text > :nth-child(1){animation-delay:.05s;}
  .anim-go .hero-text > :nth-child(2){animation-delay:.17s;}
  .anim-go .hero-text > :nth-child(3){animation-delay:.31s;}
  .anim-go .hero-text > :nth-child(4){animation-delay:.45s;}
  .anim-go .hero-card{animation:heroUp .9s .65s cubic-bezier(.2,.7,.2,1) both;}
  .anim-go .hero-card + .hero-card{animation-delay:.8s;}
  .anim-go .hero-mark{animation:heroMark 1.6s .1s ease-out both;}
  @keyframes heroUp{from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:none;}}
  @keyframes heroMark{from{opacity:0; transform:translateY(34px) scale(.96);} to{transform:none;}}
  @keyframes heroFade{from{opacity:0;}}
  @keyframes heroPulse{0%{transform:scale(1); opacity:.6;} 100%{transform:scale(2.8); opacity:0;}}
  .eyebrow{color:var(--blue); font-weight:600; font-size:14.5px; letter-spacing:.4px; margin-bottom:14px;}
  .hero h1{font-size:clamp(29px,6vw,50px); max-width:18ch;}
  .hero p.lead{margin-top:18px; font-size:clamp(17px,2.2vw,19.5px); color:var(--muted); max-width:56ch;}
  .hero-actions{margin-top:28px; display:flex; gap:12px; flex-wrap:wrap;}

  /* ---------- Trust badges ---------- */
  .badges{background:#fff; border-bottom:1px solid var(--line);}
  .badge-grid{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px; background:var(--line);}
  .badge{background:#fff; padding:20px 16px; display:flex; align-items:flex-start; gap:10px;}
  .badge svg{flex-shrink:0; width:20px; height:20px; margin-top:2px;}
  .badge span{min-width:0; font-size:15.5px; font-weight:600; color:var(--dark); line-height:1.4; -webkit-hyphens:manual; hyphens:manual; overflow-wrap:break-word;}

  .area-grid{display:flex; flex-wrap:wrap; gap:10px; margin-top:24px;}
  .area-chip{background:#fff; border:1px solid var(--line); border-radius:20px;
    padding:8px 16px; font-size:15px; font-weight:500; color:var(--dark);}
  .area-note{margin-top:24px; font-size:16.5px; color:var(--muted);}

  /* ---------- Sections ---------- */
  section{padding:60px 0;}
  .sec-label{font-size:14px; color:var(--blue); font-weight:600; letter-spacing:.4px; margin-bottom:10px;}
  .sec-title{font-size:clamp(24px,4.4vw,34px); margin-bottom:14px; max-width:24ch;}
  .sec-intro{color:var(--muted); font-size:17px; max-width:62ch; margin-bottom:40px;}
  .bg-grey{background:var(--grey); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}

  /* ---------- Leistungen ---------- */
  .svc-grid{display:grid; grid-template-columns:1fr; gap:20px;}
  .svc{background:#fff; border:1px solid var(--line); border-radius:8px; padding:28px 24px; transition:box-shadow .25s, transform .25s;}
  .svc:hover{box-shadow:0 10px 28px rgba(0,64,128,.10); transform:translateY(-3px);}
  .svc-icon{width:44px; height:44px; margin-bottom:18px;}
  .svc h3{font-size:20px; margin-bottom:10px;}
  .svc p{font-size:16px; color:var(--muted); margin-bottom:16px;}
  .svc a{font-size:14.5px; font-weight:600; color:var(--blue); text-decoration:none;}
  .svc a:hover{text-decoration:underline;}

  /* ---------- Über uns ---------- */
  .about-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:center;}
  .about-photo{aspect-ratio:3/4; max-width:320px; width:100%; border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,64,128,.14);}
  .about-photo img{width:100%; height:100%; object-fit:cover; display:block;}
  .about-name{font-size:22px; margin-bottom:4px;}
  .about-role{color:var(--blue); font-weight:600; font-size:16px; margin-bottom:20px;}
  .about-grid p{color:var(--muted); font-size:17px; margin-bottom:14px; max-width:56ch;}

  /* ---------- Vorteile ---------- */
  .why-grid{display:grid; grid-template-columns:1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden;}
  .why{background:#fff; padding:24px 22px;}
  .why-num{font-size:13.5px; font-weight:600; color:var(--blue); margin-bottom:8px;}
  .why h3{font-size:18px; margin-bottom:6px;}
  .why p{font-size:16px; color:var(--muted);}

  /* ---------- Karriere ---------- */
  .job-grid{display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:44px;}
  .job{background:#fff; border:1px solid var(--line); border-radius:10px; padding:24px 22px; display:flex; flex-direction:column; transition:box-shadow .25s, transform .25s;}
  .job:hover{box-shadow:0 10px 28px rgba(0,64,128,.10); transform:translateY(-3px);}
  .job-tag{align-self:flex-start; font-size:12.5px; font-weight:600; color:var(--blue); background:#E7F2F8; border-radius:20px; padding:4px 11px; margin-bottom:14px;}
  .job h3{font-size:19px; margin-bottom:8px;}
  .job p{font-size:16px; color:var(--muted); margin-bottom:16px; flex-grow:1;}
  .job a{font-size:14.5px; font-weight:600; color:var(--blue); text-decoration:none;}
  .job a:hover{text-decoration:underline;}
  .perks{list-style:none; margin:4px 0 6px;}
  .perks li{display:flex; gap:10px; align-items:flex-start; padding:9px 0; font-size:16px; line-height:1.45; color:#fff; border-bottom:1px solid rgba(255,255,255,.14);}
  .perks li:last-child{border-bottom:none;}
  .perks svg{flex-shrink:0; width:18px; height:18px; margin-top:1px;}
  .career-direct{margin-top:18px; padding-top:18px; border-top:1px solid rgba(255,255,255,.18); font-size:15.5px; color:#C5D9E8;}
  .career-direct a{color:#fff; font-weight:600;}
  .file-hint{font-size:13.5px; color:#93A3B0; margin-top:6px;}

  /* ---------- Kontakt ---------- */
  .contact-grid{display:grid; grid-template-columns:1fr; gap:36px; align-items:start;}
  .contact-card{position:relative; overflow:hidden; background:var(--dark); color:#fff; border-radius:10px; padding:30px 26px;}
  .contact-card > *{position:relative; z-index:1;}
  .contact-card::after{content:""; position:absolute; z-index:0; right:-46px; bottom:-34px; width:230px; height:290px; background:url("/bilder/wasserzeichen-weiss.png") no-repeat center / contain; opacity:.09; pointer-events:none;}
  .contact-card h3{color:#fff; font-size:19px; margin-bottom:20px;}
  .cc-row{padding:14px 0; border-bottom:1px solid rgba(255,255,255,.18);}
  .cc-row:last-of-type{border-bottom:none;}
  .cc-label{font-size:13.5px; color:#9EC2DC; margin-bottom:3px;}
  .cc-row a, .cc-row span{color:#fff; font-size:17px; font-weight:600; text-decoration:none;}
  .contact-card .btn{margin-top:18px; width:100%; justify-content:center;}

  form{background:#fff; border:1px solid var(--line); border-radius:10px; padding:28px 24px;}
  .f-row{margin-bottom:16px;}
  .f-two{display:grid; grid-template-columns:1fr; gap:16px;}
  label{display:block; font-size:14px; font-weight:500; color:var(--muted); margin-bottom:6px;}
  input,select,textarea{width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:12px 13px; font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; font-size:16px; color:var(--ink); background:#fff;}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}
  textarea{min-height:120px; resize:vertical;}
  input[type=file]{padding:10px; font-size:15px; color:var(--muted);}
  .consent{display:flex; gap:10px; align-items:flex-start; margin:18px 0 20px;}
  .consent input{width:auto; margin-top:4px;}
  .consent label{font-size:13.5px; line-height:1.55; margin:0;}
  .hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden;}
  .hinweis{padding:14px 16px; border-radius:var(--radius); font-size:15.5px; margin-bottom:18px; line-height:1.5;}
  .hinweis.ok{background:#E8F5EC; border:1px solid #BCE0C8; color:#1E6B36;}
  .hinweis.fehler{background:#FDECEA; border:1px solid #F5C6C2; color:#93231B;}
  .hinweis a{color:inherit; font-weight:600;}
  .form-note{font-size:13.5px; color:#93A3B0; margin-top:14px;}

  /* ---------- Footer ---------- */
  footer{background:var(--dark); color:#C5D9E8; padding:48px 0 26px;}
  .foot-grid{display:grid; grid-template-columns:1fr; gap:30px; margin-bottom:32px;}
  footer h4{color:#fff; font-size:15px; margin-bottom:12px; letter-spacing:.3px;}
  footer a, footer span, footer p{color:#C5D9E8; text-decoration:none; font-size:15.5px;}
  footer a:hover{color:#fff;}
  .fline{display:block; margin-bottom:7px;}
  .foot-logo{display:inline-block; margin-bottom:16px;}
  .foot-logo img{height:52px; width:auto; display:block;}
  .foot-bottom{border-top:1px solid rgba(255,255,255,.16); padding-top:18px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; font-size:13.5px; color:#8FB0C8;}
  .foot-bottom a{font-size:13.5px; color:#8FB0C8;}

  /* ---------- Mobile sticky CTA ---------- */
  .mobile-bar{position:fixed; left:0; right:0; bottom:0; display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); z-index:90; box-shadow:0 -3px 16px rgba(0,0,0,.10);}
  .mobile-bar a{display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 8px; text-decoration:none; font-size:15.5px; font-weight:600; color:#fff;}
  .mb-call{background:var(--dark);}
  .mb-wa{background:#25D366;}
  .mobile-bar svg{width:17px; height:17px;}
  body{padding-bottom:56px;}

  /* ---------- Desktop ---------- */
  @media (min-width:720px){
    .svc-grid{grid-template-columns:repeat(2,1fr);}
    .job-grid{grid-template-columns:repeat(2,1fr);}
    .why-grid{grid-template-columns:repeat(2,1fr);}
    .f-two{grid-template-columns:1fr 1fr;}
    .about-grid{grid-template-columns:320px 1fr;}
    .foot-grid{grid-template-columns:1.4fr 1fr 1fr;}
    section{padding:76px 0;}
  }
  @media (min-width:960px){
    .tel-head{display:inline-flex;}
    .badge-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
    .badge span{-webkit-hyphens:none; hyphens:none;}
    .hero-grid{display:grid; grid-template-columns:1.2fr .8fr; align-items:center; gap:40px; padding:92px 20px 116px;}
    .hero-mark{top:50%; right:10px; height:430px; margin-top:-215px; opacity:.13;}
    .hero-side{margin-top:0; align-self:end; justify-self:start; margin-bottom:-18px;}
    .svc-grid{grid-template-columns:repeat(3,1fr);}
    .why-grid{grid-template-columns:repeat(3,1fr);}
    .job-grid{grid-template-columns:repeat(4,1fr);}
    .contact-grid{grid-template-columns:.85fr 1.15fr; gap:44px;}
    .mobile-bar{display:none;}
    body{padding-bottom:0;}
  }

  /* Kopfzeile: Logo links, Telefon + Angebot mittig, Menü rechts */
  @media (min-width:720px){
    .headerbar{display:grid; grid-template-columns:1fr auto 1fr; gap:20px;}
    .headerbar > a:first-child{justify-self:start;}
    .header-cta{justify-self:center; margin-left:0;}
    .menu-wrap{justify-self:end;}
    .menu-btn{padding:0 16px 0 14px;}
    .menu-label{display:inline;}
  }
  @media (max-width:479px){
    .badge{padding:16px 12px; gap:8px;}
    .badge span{font-size:14.5px;}
    .headerbar{padding:10px 16px;}
    .header-cta .btn{padding:9px 12px; font-size:14px;}
    .menu-btn{height:42px; min-width:42px; padding:0;}
  }
  @media (max-width:399px){ .brand-logo{height:36px;} }
  @media (max-width:359px){ .header-cta{display:none;} .menu-wrap{margin-left:auto;} }

  /* ---------- Effekte beim Scrollen ---------- */
  header{transition:box-shadow .3s, border-color .3s;}
  header.scrolled{box-shadow:0 8px 28px rgba(0,64,128,.09); border-bottom-color:transparent;}
  .scroll-progress{position:absolute; left:0; right:0; bottom:-1px; height:3px; background:linear-gradient(90deg,#007BB2,#004080); transform:scaleX(0); transform-origin:0 50%; pointer-events:none;}
  html.rv .sec-label:not(.in),
  html.rv .sec-title:not(.in),
  html.rv .sec-intro:not(.in),
  html.rv .svc:not(.in),
  html.rv .job:not(.in),
  html.rv .why-grid:not(.in),
  html.rv .about-photo:not(.in),
  html.rv .about-grid > div:last-child:not(.in),
  html.rv .area-grid:not(.in),
  html.rv .area-note:not(.in),
  html.rv .contact-card:not(.in),
  html.rv section form:not(.in){opacity:0; transform:translateY(28px);}
  html.rv .rv-go{transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.2,1) !important; transition-delay:var(--rv-d,0s) !important;}

  @media (prefers-reduced-motion:reduce){
    *{transition:none !important; scroll-behavior:auto !important;}
    .svc:hover{transform:none;}
    .anim-go .hero-text > *, .anim-go .hero-card, .anim-go .hero-mark{animation-name:heroFade !important;}
    .hc-dot::after{animation:none !important;}
  }

  .headerbar picture{display:block;}


  .foot-hours{display:flex; flex-direction:column; gap:2px; margin-top:14px; font-size:14.5px;}
  .foot-hours span{font-size:14.5px;}
  footer .foot-hours .foot-247{color:#fff; font-weight:600;}
  footer span.fline{line-height:1.5;}

  /* ---------- Nachtmodus: dunkles Design, wenn das Gerät auf dunkel steht ---------- */
  @media (prefers-color-scheme: dark){
    :root{--ink:#D5E0EA; --muted:#9AAEBF; --paper:#0D1825; --grey:#112032; --line:#22374C; color-scheme:dark;}
    h1,h2,h3,h4{color:#EAF2F9;}
    header{background:rgba(13,24,37,.94);}
    header.scrolled{box-shadow:0 8px 28px rgba(0,0,0,.45);}
    .tel-head, .hc-tel, .menu-call strong, .badge span, .area-chip{color:#EAF2F9;}
    .tel-head svg, .tel-head:hover, .hero h1 .accent, .eyebrow, .sec-label, .about-role, .why-num, .svc a, .job a, .hc-job{color:#4DB3EA;}
    .menu-btn{background:#132436; border-color:#2A425A; color:#EAF2F9;}
    .menu-btn:hover, .menu-btn[aria-expanded="true"]{border-color:#7FA6C7;}
    .menu-panel{background:#132436; border-color:var(--line); box-shadow:0 18px 44px rgba(0,0,0,.5);}
    .menu-panel a:hover, .menu-panel a:focus-visible{background:#1A2F45; color:#fff;}
    .menu-panel a::after{border-color:#5E7890;}
    .menu-tag, .job-tag{background:rgba(77,179,234,.14); color:#7CC8F0;}
    .btn-dark, .hc-icon.dark{background:#0B5AA6;}
    .btn-dark:hover{background:#0C66BC;}
    .btn-ghost{border-color:#7FA6C7; color:#EAF2F9;}
    .btn-ghost:hover{background:#EAF2F9; border-color:#EAF2F9; color:#0D1825;}
    .hero{background:linear-gradient(135deg,#0D1825 0%,#10233A 55%,#0F2E4D 100%);}
    .hero-mark{opacity:.16;}
    .hero-wave path{fill:var(--paper);}
    .hero-card{background:#132436; border-color:var(--line); box-shadow:0 14px 34px rgba(0,0,0,.45);}
    .badges, .badge{background:var(--paper);}
    .badge svg{stroke:#4DB3EA;}
    .area-chip, .svc, .job, .why, form{background:#132436;}
    .svc:hover, .job:hover{box-shadow:0 10px 28px rgba(0,0,0,.45);}
    .svc-icon{stroke:#7CC8F0;}
    input, select, textarea{background:#0D1825; color:var(--ink); border-color:#2A425A;}
    input::placeholder, textarea::placeholder{color:#6F8597;}
    .hinweis.ok{background:#12301F; border-color:#1F5A36; color:#9BE2B5;}
    .hinweis.fehler{background:#3A1717; border-color:#6B2A2A; color:#F5AFA8;}
    .form-note, .file-hint{color:#7E92A3;}
    .contact-card{box-shadow:0 0 0 1px rgba(255,255,255,.06);}
    footer{background:#091521; border-top:1px solid var(--line);}
    .about-photo{box-shadow:0 8px 24px rgba(0,0,0,.45);}
  }

/* =====================================================================
   Bausteine für die Leistungsseiten
   ===================================================================== */
.hero-sub .hero-grid{padding-top:34px; padding-bottom:84px;}
.crumbs{position:relative; z-index:2; display:flex; flex-wrap:wrap; gap:6px; font-size:14px; color:var(--muted); margin-bottom:22px;}
.crumbs a{color:var(--muted); text-decoration:none;}
.crumbs a:hover{color:var(--blue); text-decoration:underline;}
.crumbs span[aria-hidden]{opacity:.6;}
.lead-big{font-size:clamp(17px,2.2vw,19.5px);}
.prose{max-width:66ch;}
.prose p{margin-bottom:16px; color:var(--ink);}
.prose h3{font-size:21px; margin:30px 0 10px;}
.split{display:grid; grid-template-columns:1fr; gap:36px; align-items:start;}
.checklist{list-style:none; margin:6px 0 18px;}
.checklist li{position:relative; padding:7px 0 7px 30px; line-height:1.5;}
.checklist li::before{content:""; position:absolute; left:4px; top:12px; width:12px; height:7px; border-left:2.4px solid var(--blue); border-bottom:2.4px solid var(--blue); transform:rotate(-45deg);}
.alert{border-radius:10px; padding:20px 22px; margin:6px 0 24px; border:1px solid #F5C6C2; background:#FDF1EF; color:#7A2119;}
.alert strong{display:block; font-size:17px; margin-bottom:6px; color:#93231B;}
.alert ol{margin:8px 0 0 20px;}
.alert li{margin-bottom:4px;}
.faq{max-width:820px;}
.faq details{background:#fff; border:1px solid var(--line); border-radius:10px; margin-bottom:12px; overflow:hidden;}
.faq summary{cursor:pointer; list-style:none; padding:18px 52px 18px 22px; font-weight:600; color:var(--dark); font-size:17px; position:relative;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:""; position:absolute; right:24px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2.2px solid var(--blue); border-bottom:2.2px solid var(--blue); transform:rotate(45deg); transition:transform .25s;}
.faq details[open] summary::after{transform:rotate(-135deg); margin-top:-2px;}
.faq .faq-a{padding:0 22px 20px; color:var(--muted);}
.faq .faq-a p{margin-bottom:10px;}
.faq .faq-a a{color:var(--blue); font-weight:600;}
.cta-band{background:linear-gradient(135deg,#004080,#00609E); color:#fff; border-radius:14px; padding:38px 30px; display:flex; flex-wrap:wrap; gap:22px; align-items:center; justify-content:space-between; position:relative; overflow:hidden;}
.cta-band h2{color:#fff; font-size:clamp(22px,3.6vw,30px); margin-bottom:6px;}
.cta-band p{color:#C5D9E8; max-width:52ch;}
.cta-band .actions{display:flex; flex-wrap:wrap; gap:12px; position:relative; z-index:1;}
.cta-band::after{content:""; position:absolute; right:-40px; bottom:-60px; width:230px; height:290px; background:url("/bilder/wasserzeichen-weiss.png") no-repeat center / contain; opacity:.09; pointer-events:none;}
.btn-white{background:#fff; color:var(--dark);}
.btn-white:hover{background:#E7F2F8;}
.more-links{display:flex; flex-wrap:wrap; gap:12px; margin-top:22px;}
.more-links a{display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border:1px solid var(--line); border-radius:30px; background:#fff; color:var(--dark); font-weight:600; font-size:15px; text-decoration:none; transition:border-color .2s, color .2s;}
.more-links a:hover{border-color:var(--blue); color:var(--blue);}
.call-big{display:inline-flex; align-items:center; gap:14px; margin-top:26px; padding:16px 26px 16px 18px; background:#C62828; color:#fff; border-radius:12px; text-decoration:none; box-shadow:0 14px 30px rgba(198,40,40,.28); transition:transform .2s, box-shadow .2s;}
.call-big:hover{transform:translateY(-2px); box-shadow:0 18px 36px rgba(198,40,40,.34);}
.call-big .ci{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;}
.call-big .ci svg{width:22px; height:22px;}
.call-big small{display:block; font-size:13.5px; font-weight:600; opacity:.9;}
.call-big strong{display:block; font-size:24px; line-height:1.15;}
.menu-panel a.menu-sub{padding:9px 14px 9px 28px; font-size:15px; color:var(--muted);}
@media (min-width:720px){ .foot-grid.has-4{grid-template-columns:1.3fr 1fr 1fr 1fr;} }
@media (min-width:960px){
  .split{grid-template-columns:1.25fr .75fr; gap:48px;}
  .split .contact-card{position:sticky; top:110px;}
}
html.rv .faq:not(.in), html.rv .cta-band:not(.in), html.rv .prose:not(.in), html.rv .split .contact-card:not(.in){opacity:0; transform:translateY(28px);}
@media (prefers-color-scheme: dark){
  .crumbs a{color:var(--muted);}
  .alert{background:#3A1717; border-color:#6B2A2A; color:#F5C9C4;}
  .alert strong{color:#FFB4AB;}
  .faq details{background:#132436;}
  .faq summary{color:#EAF2F9;}
  .faq summary::after{border-color:#4DB3EA;}
  .faq .faq-a a, .checklist li::before{color:#4DB3EA; border-color:#4DB3EA;}
  .more-links a{background:#132436; color:#EAF2F9;}
  .more-links a:hover{color:#4DB3EA; border-color:#4DB3EA;}
  .cta-band{background:linear-gradient(135deg,#0B3E70,#0B5AA6);}
  .btn-white{color:#0D1825;}
  .menu-panel a.menu-sub{color:var(--muted);}
}

/* Bewertungs-Button im Footer */
.foot-review{display:inline-flex; align-items:center; gap:10px; margin-top:18px; padding:9px 16px; border:1px solid rgba(255,255,255,.35); border-radius:30px; color:#fff !important; font-weight:600; font-size:14.5px !important; text-decoration:none; transition:background .2s, border-color .2s;}
.foot-review:hover{background:rgba(255,255,255,.1); border-color:#fff;}
.foot-review .stars{color:#FBBC04; letter-spacing:1px; font-size:14px;}