*{box-sizing:border-box}
   html {
     scroll-behavior: smooth;
   }

   body{margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;line-height:1.50 }
   .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

   :root{
     --bg:#f7f8fb;
     --panel:#ffffff;
     --surface:#ffffff;
     --text:#0f172a;
     --muted:#475569;
     --brand:#35577B;      /* Blau */
     --brand-2:#35577B;
     --stroke:rgba(2,6,23,.1);
     --shadow:0 10px 30px rgba(2,6,23,.08);

     --tone-2-bg: color-mix(in hsl, var(--bg) 92%, #eaf0f7);
     --tone-3-bg: color-mix(in hsl, var(--bg) 88%, #dde7f3);
     --tone-4-bg: color-mix(in hsl, var(--bg) 84%, #d4e1ef);
     --sep-shadow: rgba(2, 6, 23, .06);

     --brand-logo-h:72px;      /* Logo-Höhe (beide Modi gleich) */
     --brand-wordmark-h:30px;  /* Wortmarken-Höhe (beide Modi gleich) */
   }
   /* Mobile Defaults */
   @media (max-width:980px){
     :root{
       --brand-logo-h:60px;
       --brand-wordmark-h:26px;
     }
     .header-mail::after{
      content: "" !important;
     }
   }

   :root[data-theme="dark"]{
     --bg:#0b1220;
     --panel:#0e172a;
     --surface:#0f1a30;
     --text:#e6ecff;
     --muted:#b5c0d0;
     --brand:#f6c453;      /* Gold-Akzent u.a. */
     --brand-2:#ffd277;
     --stroke:rgba(255,255,255,.15);
     --shadow:0 10px 30px rgba(0,0,0,.35);

     --tone-2-bg:#0b1426;
     --tone-3-bg:#0a1326;
     --tone-4-bg:#091223;
     --sep-shadow: rgba(255,255,255,.08);
   }

   .container{width:min(1100px,92%);margin-inline:auto}
   .section{padding:clamp(64px,9vw,110px) 0;color:var(--text)}
   .section-kicker{color:var(--brand);text-transform:uppercase;letter-spacing:.1em;font-weight:800;margin:0 0 .5rem}
   h1,h2,h3,h4{margin:.2rem 0 .6rem;line-height:1.2}
   p{color:var(--text);opacity:.9}
   a{color:#1f6feb;text-decoration:none}
   :root[data-theme="dark"] a{color:var(--brand-2);text-decoration: none;}
   a:hover{text-decoration:underline}

   .skiplink{position:absolute;left:-9999px}
   .skiplink:focus{left:1rem;top:1rem;padding:.5rem .75rem;background:#fff;color:#111;border-radius:.5rem;z-index:9999}

   .site-header{position:sticky;top:0;z-index:50;backdrop-filter:saturate(140%) blur(8px);background:color-mix(in hsl,var(--bg) 85%, transparent);border-bottom:1px solid var(--stroke);transition:box-shadow .3s ease, background .3s ease}
   .site-header.is-elevated{box-shadow:var(--shadow)}
   :root[data-theme="dark"] .site-header{background:#0b1220;border-bottom:1px solid rgba(255,255,255,.15)}
   :root[data-theme="dark"] .nav-link{color:#e6ecff;opacity:1}
   :root[data-theme="dark"] .nav-link:hover{color:var(--brand)}
   .nav-wrap{display:flex;align-items:center;gap:1rem;padding:.8rem 0}

   .brand{display:flex;align-items:center;gap:.6rem;text-decoration:none}
   .brand .logo-light,
   .brand .logo-dark,
   .brand .wordmark-light,
   .brand .wordmark-dark{display:none}
   html[data-theme="light"] .brand .logo-light,
   html[data-theme="light"] .brand .wordmark-light{display:block !important}
   html[data-theme="light"] .brand .logo-dark,
   html[data-theme="light"] .brand .wordmark-dark{display:none !important}
   html[data-theme="dark"] .brand .logo-dark,
   html[data-theme="dark"] .brand .wordmark-dark{display:block !important}
   html[data-theme="dark"] .brand .logo-light,
   html[data-theme="dark"] .brand .wordmark-light{display:none !important}
   .brand .logo-light,
   .brand .logo-dark{
     height:var(--brand-logo-h);
     width:auto;
     object-fit:contain;
   }
   .brand .wordmark-light,
   .brand .wordmark-dark{
     height:var(--brand-wordmark-h);
     width:auto;
     object-fit:contain;
     display:block;
   }
   .brand .wordmark{display:none !important}

   .nav{display:flex;align-items:center;gap:clamp(.6rem,2vw,1rem);margin-left:auto}
   .nav-link{color:var(--text);opacity:.9;padding:.5rem .75rem;border-radius:.5rem;transition:color .2s ease, transform .15s ease, text-underline-offset .2s ease}
   .nav-link:hover,.nav-link:focus{color:var(--brand);text-decoration:underline;text-underline-offset:4px;transform:scale(1.06)}

   .nav-link{
     text-decoration: none;
     transition: transform .18s ease, color .20s ease;
   }
   .nav-link:hover,
   .nav-link:focus-visible{
     text-decoration: none;
     color: var(--brand);
     transform: translateY(-2px) scale(1.04);
   }
   @media (prefers-reduced-motion: reduce){
     .nav-link{ transition: color .2s ease; }
     .nav-link:hover,.nav-link:focus-visible{ transform: none; }
   }

   .nav .nav-item.has-dropdown{ position:relative }
   .nav .dropdown-toggle{
     background:none;border:0;padding:.5rem .75rem;font:inherit;color:inherit;
     cursor:pointer;display:inline-flex;align-items:center;gap:.35rem;border-radius:.5rem
   }
   .nav .has-dropdown .caret{ transition: transform .2s ease }

   .nav .dropdown{
     position:absolute;top:100%;left:0;min-width:260px;margin:.5rem 0 0;padding:.5rem 0;
     list-style:none;background:var(--surface);border:1px solid var(--stroke);
     box-shadow:0 10px 30px rgba(0,0,0,.12);border-radius:12px;z-index:60;

     opacity:0; visibility:hidden; transform: translateY(6px);
     pointer-events:none;
     transition: opacity .18s ease, transform .18s ease, visibility .18s step-end;
   }
   /* Öffnen */
   .nav .has-dropdown:hover .dropdown,
   .nav .has-dropdown:focus-within .dropdown{
     opacity:1; visibility:visible; transform: translateY(0);
     pointer-events:auto;
     transition: opacity .18s ease, transform .18s ease, visibility 0s;
   }
   .nav .has-dropdown:hover .caret,
   .nav .has-dropdown:focus-within .caret{ transform: rotate(180deg) }

   /* Einträge */
   .nav .dropdown>li>a{
     display:block;padding:.6rem 1rem;text-decoration:none;font-size:.95rem;line-height:1.2;
     color:var(--text);white-space:nowrap;transition:background-color .15s ease, color .15s ease, transform .15s ease;border-radius:8px
   }
   .nav .dropdown>li>a:hover,
   .nav .dropdown>li>a:focus{
     background:rgba(53,87,123,.08);
     color:#35577B;
     transform:translateX(2px)
   }
   :root[data-theme="dark"] .nav .dropdown{background:#0f1a30;border-color:rgba(255,255,255,.15)}
   :root[data-theme="dark"] .nav .dropdown>li>a:hover,
   :root[data-theme="dark"] .nav .dropdown>li>a:focus{
     background:rgba(246,196,83,.14);
     color:var(--brand);
   }
   /* Dropdown Hover-Bridge */
   .nav .has-dropdown{ position:relative; }
   .nav .has-dropdown::after{
     content:""; position:absolute; left:0; right:0; top:100%; height:12px;
   }


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;

  padding: .7rem 1rem;
  border-radius: .75rem;
  font-weight: 700;

  border: 1px solid transparent;
  box-sizing: border-box;

  background-clip: padding-box;

  transition:
    box-shadow .2s ease,
    background .2s ease,
    border-color .2s ease,
    color .2s ease;
}

/* Hover – nur visuell */
.btn:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}

/* Aktiver Zustand */
.btn:active {
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
}

/* Primary */
.btn-primary {
  background: linear-gradient(180deg, var(--brand-2), var(--brand));
  color: #fff;
}

/* Sekundär */
.btn-secondary {
  background: #111827;
  color: #fff;
}

:root[data-theme="dark"] .btn-secondary {
  background: #ffffff;
  color: #111;
}

/* Outline */
.btn-outline {
  background: transparent;
  color: var(--text);
  border-color: var(--stroke);
}

.btn-outline:hover {
  background: rgba(0,0,0,.04);
}

:root[data-theme="dark"] .btn-outline:hover {
  background: rgba(255,255,255,.06);
}


/* Icons dürfen Hover nicht beeinflussen */
.header-mail img {
  pointer-events: none;
}

/* Sicherheit für Pseudo-Elemente / Animationen */
.header-mail {
  position: relative;
  overflow: hidden;
  
}


   /* Theme Switcher */
   .theme-switcher{display:flex;gap:.4rem;align-items:center;margin-left:1rem}
   .theme-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--stroke);background:var(--panel);display:grid;place-items:center;color:#111;cursor:pointer;transition:transform .12s ease, background .2s ease, border-color .2s ease}
   :root[data-theme="dark"] .theme-btn{background:#0f1a30;border-color:rgba(255,255,255,.15);color:#e6ecff}
   .theme-btn:hover{transform:translateY(-1px)}
   .theme-btn[aria-pressed="true"]{outline:2px solid var(--brand);outline-offset:2px}

   .nav-toggle{display:none;background:none;border:0;margin-left:auto}
   .burger{width:24px;height:2px;background:var(--text);position:relative}
   .burger::before,.burger::after{content:"";position:absolute;left:0;width:24px;height:2px;background:var(--text)}
   .burger::before{top:-7px}.burger::after{top:7px}

   .hero{position:relative;padding:0;min-height:92vh;display:grid;place-items:center;overflow:hidden;background:var(--bg)}
   .hero-center{position:relative;z-index:2;text-align:center;padding-top:42px;padding:clamp(80px,12vh,140px) 0}
   :root:not([data-theme="dark"]) .hero-center .hero-eyebrow,
   :root:not([data-theme="dark"]) .hero-center .hero-title,
   :root:not([data-theme="dark"]) .hero-center .hero-sub { color:#ffffff; }
   .hero-eyebrow{color:var(--brand);margin:0;font-size:clamp(18px,2vw,20px)}
   .hero-title{font-size:clamp(36px,7vw,64px)}
   .hero-title .accent{color:var(--brand)}
   .hero-sub{max-width:70ch;margin-inline:auto}
   .hero-actions{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin:1rem 0 1.2rem}

   .hero-wordmark{
     height: clamp(60px, 7vw, 100px);   /* → deutlich größer */
     margin: 0 auto 10px;
     display: block;
     image-rendering: auto;
   }
   .hero-wordmark-light,
   .hero-wordmark-dark{display:none}
   html[data-theme="light"] .hero-wordmark-light{display:block}
   html[data-theme="dark"]  .hero-wordmark-dark{display:block}
   .hero .hero-title{margin-top:6px}

   /* Stats */
   .hero-stats{display:flex;gap:1.6rem;justify-content:center}
   .stat-number{font-size:clamp(24px,5vw,40px);font-weight:800;color:#35577B}
   :root[data-theme="dark"] .stat-number{color:var(--brand)}
   .stat-label{color:#ffffff;font-weight:700}

   /* Slideshow */
   .hero-slideshow{position:absolute;inset:0;width:100%;overflow:hidden}
   .slide{position:absolute;inset:0;background-position:center;background-size:cover;opacity:0;transition:opacity 1s ease;will-change:transform,opacity}
   .slide.is-top{opacity:1}
   .slide.zoom{animation:kenburns 6s ease forwards}
   @keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1.18)}}
   .slideshow-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.38),rgba(0,0,0,.38));pointer-events:none}

   .about{background:linear-gradient(180deg,var(--bg),color-mix(in hsl,var(--bg) 86%, #cfd8e3) 60%,var(--bg))}
   :root[data-theme="dark"] .about{background:linear-gradient(180deg,var(--bg),#0a152d 60%,var(--bg))}
   .grid-2{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,3vw,40px);align-items:start}
   .list-check{list-style:none;padding:0;margin:1rem 0;display:grid;gap:.4rem}
   .list-check li::before{content:"✔";color:var(--brand);margin-right:.6rem}
   .about-cards{display:grid;gap:14px}
   .info-card{background:var(--surface);border:1px solid var(--stroke);border-radius:16px;padding:18px 18px 16px;box-shadow:var(--shadow);transition:transform .35s ease, box-shadow .4s ease}
   .info-card:hover{transform:translateY(-2px)}

   .btn-outline.btn-outline-accent{border:1px solid var(--stroke);color:var(--text);background:transparent}
   .btn-outline.btn-outline-accent:hover{background:#35577B;color:#fff;border-color:#35577B}
   :root[data-theme="dark"] .btn-outline.btn-outline-accent:hover{background:var(--brand);color:#111;border-color:var(--brand)}

   .services{background:color-mix(in hsl,var(--bg) 92%, #e5e7eb)}
   :root[data-theme="dark"] .services{background:#0a1326}
   .cards{margin-top:22px;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2.4vw,22px)}
   .card{background:var(--surface);border:1px solid var(--stroke);border-radius:18px;overflow:hidden;box-shadow:var(--shadow);transition:transform .35s ease, box-shadow .4s ease, border-color .4s ease}
   .card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.18);border-color:rgba(0,0,0,.08)}
   :root[data-theme="dark"] .card:hover{border-color:rgba(255,255,255,.18)}
   .card img{width:100%;height:200px;object-fit:cover;display:block}
   .card-body{padding:16px 16px 18px}
   .card-body h4{margin:.2rem 0 .4rem}
   .card-body p{margin:0 0 .6rem;color:var(--muted)}
   .card-link{font-weight:800;color:var(--brand);display:inline-flex;align-items:center;gap:.3rem;transition:transform .2s ease, filter .2s ease}
   .card-link:hover{transform:translateY(-3px);filter:brightness(.88)}

   .testimonials{background:color-mix(in hsl,var(--bg) 94%, #e2e8f0)}
   :root[data-theme="dark"] .testimonials{background:#0a1326}
   .t-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,3vw,26px);margin-top:18px}
   .t-card{
     background:var(--surface);
     border:1px solid var(--stroke);
     border-radius:18px;
     box-shadow:var(--shadow);
     padding:22px 22px 18px;
     transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease;
     will-change:transform;
   }
   .t-card:hover{transform:scale(1.03);box-shadow:0 20px 44px rgba(0,0,0,.18)}
   .t-stars{display:flex;gap:6px;margin-bottom:10px;color:var(--brand)}
   .t-stars svg{width:20px;height:20px;fill:currentColor}
   .t-quote{font-size:1.02rem;line-height:1.6;color:var(--text);opacity:.95}
   .t-author{margin-top:12px;font-weight:800;color:var(--brand)}
   /* Entrance directions */
   [data-reveal="left"]{opacity:0;transform:translateX(-40px)}
   [data-reveal="right"]{opacity:0;transform:translateX(40px)}
   [data-reveal].revealed{opacity:1 !important;transform:none !important;transition:opacity .9s ease, transform .9s ease}

   .fancy-contact{
     position:relative;overflow:hidden;
     padding-left:0; padding-right:0;
     background:
             radial-gradient(1000px 400px at -10% 10%, color-mix(in hsl, var(--brand) 18%, transparent) 0%, transparent 60%),
             radial-gradient(900px 360px at 110% 80%, color-mix(in hsl, var(--brand) 14%, transparent) 0%, transparent 60%),
             conic-gradient(from 180deg at 50% 50%, color-mix(in hsl,var(--bg) 95%, #cbd5e1) 0 25%, transparent 25% 50%, color-mix(in hsl,var(--bg) 95%, #cbd5e1) 50% 75%, transparent 75% 100%);
     background-blend-mode: overlay, overlay, normal;
   }
   :root[data-theme="dark"] .fancy-contact{
     background:
             radial-gradient(1000px 420px at -10% 10%, color-mix(in hsl, var(--brand) 12%, transparent) 0%, transparent 60%),
             radial-gradient(900px 380px at 110% 80%, color-mix(in hsl, var(--brand) 10%, transparent) 0%, transparent 60%),
             conic-gradient(from 180deg at 50% 50%, #0b1220 0 25%, #0a1526 25% 50%, #0b1220 50% 75%, #0a1526 75% 100%);
   }
   .fancy-contact > .container{width:min(1100px,92%);margin-inline:auto;padding-inline:clamp(10px,2vw,20px)}

   /* Glas-Karten */
   .glass{background:color-mix(in hsl, var(--surface) 80%, transparent);border:1px solid var(--stroke);border-radius:16px;box-shadow:var(--shadow);backdrop-filter: blur(6px) saturate(120%)}
   .contact .grid-2{gap:clamp(20px,3vw,32px)}
   .contact-info.glass{padding:16px;padding-left:24px}
   /* Oberer Kontaktblock komplett linksbündig */
   .contact-info.glass { text-align: left !important; }
   .contact-info.glass .contact-list--plain { text-align: left !important; justify-content: flex-start !important; display: block; }
   .contact-info.glass .contact-list--plain li { display: flex; justify-content: flex-start; }
   .contact-info.glass .contact-actions { justify-content: flex-start !important; }
   .contact-info.glass .icon-btn { margin-right: .35rem; margin-left: 0 !important; }

   /* Kontakt: Icon-Leiste */
   .contact-actions{display:flex;gap:.6rem;margin-top:.6rem}
   .icon-btn{width:44px;height:44px;border-radius:999px;display:grid;place-items:center;background:var(--panel);color:var(--text);border:1px solid var(--stroke);box-shadow:var(--shadow);transition:transform .15s ease, background .2s ease, color .2s ease, border-color .2s ease, filter .2s ease}
   .icon-btn svg{width:22px;height:22px}
   .icon-btn:hover{transform:translateY(-2px);color:#fff;background:var(--brand);border-color:transparent;filter:saturate(115%)}
   :root[data-theme="dark"] .icon-btn{background:#0f1a30;color:#e6ecff;border-color:rgba(255,255,255,.18)}
   :root[data-theme="dark"] .icon-btn:hover{background:var(--brand);color:#111}

   /* Formular */
   .form{padding:16px;display:grid;gap:.7rem}
   .form label{display:grid;gap:.3rem;color:var(--text)}
   input,textarea{background:color-mix(in hsl,var(--panel) 86%, #eef2ff);color:var(--text);border:1px solid var(--stroke);border-radius:10px;padding:.7rem .8rem;transition:border-color .2s ease, box-shadow .2s ease}
   :root[data-theme="dark"] input,:root[data-theme="dark"] textarea{background:#0e1a31;color:#fff;border-color:rgba(255,255,255,.18)}
   input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in hsl,var(--brand) 35%, transparent)}
   .form-note{color:var(--muted);font-size:.9rem}

   #contact .btn-primary{color:#fff}
   :root[data-theme="dark"] #contact .btn-primary{color:#111}
   :root[data-theme="dark"] #contact .btn-primary:hover{color:#111}

   .site-footer{border-top:1px solid var(--stroke);background:color-mix(in hsl,var(--bg) 85%, #e5e7eb);color:var(--muted); position:relative;}
   :root[data-theme="dark"] .site-footer{background:#091220}
   .footer-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:14px;padding:22px 0}

   .foot-brand .logo-light,
   .foot-brand .logo-dark{display:none !important}

   /* Neue Wortmarke-Bilder im Footer (links) */
   .foot-brand .wm-light{display:block;height:56px}
   .foot-brand .wm-dark{display:none;height:56px}
   :root[data-theme="dark"] .foot-brand .wm-light{display:none}
   :root[data-theme="dark"] .foot-brand .wm-dark{display:block}

   /* Rechtsspaltige Legal-Links + blaue Pipes – EINZEILIG */
   .foot-legal{
     display:flex;align-items:center;justify-content:flex-end;
     gap:.25rem;
     flex-wrap:nowrap;
     white-space:nowrap;
   }
   .foot-legal a{
     color:var(--text);opacity:.9;text-decoration:none;padding:.25rem 0;
   }
   .foot-legal a:hover{
     color:var(--brand);text-decoration:underline;text-underline-offset:3px;
   }
   .foot-legal .pipe{ margin:0 .5rem; color:#35577B; }
   :root[data-theme="dark"] .foot-legal .pipe{color:#35577B}

   /* Footer: Hover ohne Unterstreichung */
   .foot-legal a{
     color: var(--text);
     opacity: .9;
     text-decoration: none;
     padding: .25rem 0;
     display: inline-block;
     transition: transform .18s ease, color .20s ease;
   }
   .foot-legal a:hover,
   .foot-legal a:focus-visible{
     text-decoration: none;
     color: var(--brand);
     transform: translateY(-2px);
   }
   @media (prefers-reduced-motion: reduce){
     .foot-legal a{ transition: color .2s ease; }
     .foot-legal a:hover,.foot-legal a:focus-visible{ transform: none; }
   }

   /* Mini-Credit ganz rechts unten */
   .site-footer .icons8-credit{
     position:absolute; right:8px; bottom:6px;
     font-size:10.5px; line-height:1; opacity:.65;
     color: var(--muted);
   }
   .site-footer .icons8-credit a{
     color: inherit; text-decoration: underline; text-underline-offset:2px;
   }
   .site-footer .icons8-credit a:hover{ color: var(--brand); }

   .to-top{position:fixed;right:18px;bottom:18px;width:42px;height:42px;border-radius:50%;border:1px solid var(--stroke);background:var(--panel);color:var(--text);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s ease, transform .25s ease, visibility .25s}
   .to-top.is-visible{opacity:1;visibility:visible;transform:translateY(0)}

   [data-reveal]{opacity:0;transform:translateY(16px)}
   .revealed{opacity:1 !important;transform:none !important;transition:opacity 1s ease, transform 1s ease}
   [data-reveal="fade"]{transform:none}
   [data-reveal][data-delay="0.05"]{transition-delay:.2s}
   [data-reveal][data-delay="0.1"]{transition-delay:.4s}

   .btn-anim{background:linear-gradient(90deg, var(--brand) 0%, color-mix(in hsl, var(--brand) 80%, black) 50%, var(--brand) 100%);background-size:200% 100%}
   .btn-anim:hover{background-position:100% 0}
   .btn-swap{position:relative;overflow:hidden}
   .btn-swap .txt-default{transition:transform .3s ease, opacity .3s ease}
   .btn-swap::after{content:attr(data-hover);position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(8px);transition:transform .3s ease, opacity .3s ease;color:inherit}
   .btn-swap:hover .txt-default{opacity:0;transform:translateY(-8px)}
   .btn-swap:hover::after{opacity:1;transform:translateY(0)}

   :root[data-theme="dark"] .site-header .nav .btn-primary{color:#000 !important}
   :root[data-theme="dark"] .site-header .nav .btn-primary:hover{color:#000 !important}
   :root[data-theme="dark"] .hero .btn-primary{color:#111 !important}
   :root[data-theme="dark"] .hero .btn-primary:hover{color:#111 !important}

   .tone-2:not(.hero):not(.fancy-contact){ background: var(--tone-2-bg); }
   .tone-3:not(.hero):not(.fancy-contact){ background: var(--tone-3-bg); }
   .tone-4:not(.hero):not(.fancy-contact){ background: var(--tone-4-bg); }

   .has-sep{ position: relative; z-index: 0; }
   .has-sep::before{
     content:""; position:absolute; left:0; right:0; top:-18px; height:18px; pointer-events:none;
     background: linear-gradient(to bottom, var(--sep-shadow), transparent); opacity:.9;
   }
   .has-sep::after{
     content:""; position:absolute; left:0; right:0; bottom:-18px; height:18px; pointer-events:none;
     background: linear-gradient(to top, var(--sep-shadow), transparent); opacity:.9;
   }
   .has-sep{ box-shadow: 0 -1px 0 0 var(--stroke) inset; }

   .contact-list--plain {
     list-style: none;
     margin: .6rem 0 0;
     padding: 0;
     display: grid;
     gap: .25rem;
   }
   .contact-list--plain li strong { margin-right: .35rem; }

   /* Map oben, kompakter */
   .map-stack .map-block{
     display:flex;
     justify-content:center;
     align-items:center;
     padding:0 !important;
   }
   .map-stack .map-frame{
     width:100%;
     max-width:900px;
     height:350px;
     margin:auto;
     border-radius:16px;
     overflow:hidden;
     border:1px solid var(--stroke);
     box-shadow:var(--shadow);
     background:var(--panel);
   }
   .map-stack .map-embed{width:100%;height:100%;border:0;}

   /* Rechte Info-Karten wie Startseiten-Kontakt zentrieren */
   .map-grid .info-block { text-align: center; padding: 32px 26px; }
   .map-grid .info-block h2 { margin-bottom: 8px; line-height: 1.25; }
   .map-grid .info-block p,
   .map-grid .info-block ul,
   .map-grid .info-block li { margin: 4px auto; font-size: 15.5px; line-height: 1.42; }

   /* Stundenliste zentrieren */
   .map-grid .hours { margin: 10px auto; text-align: center; }

   .contact-mini-grid .mini-card .contact-actions{
     display:flex !important;
     width:100%;
     justify-content:center !important;
     align-items:center;
     text-align:center;
     margin-top:10px;
   }
   .contact-mini-grid .mini-card .icon-btn{ margin:0 6px !important; }
   .contact-mini-grid .mini-card .contact-list--plain{ display:grid !important; justify-content:center !important; text-align:center !important; }
   .contact-mini-grid .mini-card .contact-list--plain li{ justify-content:center !important; }

   /* Kontaktliste zentriert anzeigen */
   .contact-list--plain { text-align: center; }
   .contact-list--plain li { justify-content: center; }

   /* Standort Icon Styling */
   .location-icon { display: flex; justify-content: center; margin-bottom: 10px; }
   .location-icon svg { width: 38px; height: 38px; fill: var(--brand); }
   /* Dark-mode Icon weiß */
   :root[data-theme="dark"] .location-icon svg { fill: #ffffff; }

   /* Hover-Anheben für Info-Blöcke (>1.05, weicher) */
   .info-block{ transition:transform .35s ease, box-shadow .35s ease, border-color .35s ease; }
   .info-block:hover{
     transform:translateY(-6px) scale(1.06);
     box-shadow: 0 18px 38px rgba(0,0,0,.13);
     border-color:rgba(0,0,0,.08);
   }
   :root[data-theme="dark"] .info-block:hover{ border-color:rgba(255,255,255,.18); }

   /* Responsiv: Map über Infos stapeln */
   @media (max-width: 900px){
     .map-grid{ grid-template-columns: 1fr; grid-template-rows: auto; }
     .map-block{ grid-row:auto; }
     .nav-right {
      margin-left: auto;
      position: fixed;
      right:5%;
    }
   }

   /* Grid für die drei kleinen Karten */
   .contact-mini-grid{
     margin-top:18px;
     display:grid;
     grid-template-columns: repeat(3, 1fr);
     gap: clamp(14px, 2.5vw, 22px);
   }
   .mini-card{ text-align:center; padding:22px 18px; }
   .mini-icon{ display:grid; place-items:center; margin-bottom:8px; }
   .mini-icon svg{ width:30px; height:30px; fill: var(--brand); }
   :root[data-theme="dark"] .mini-icon svg{ fill:#fff; }

   .mini-title{ margin:.2rem 0 .3rem; font-weight:800; letter-spacing:.02em; }
   .mini-line{ margin:.2rem 0; color:var(--text); opacity:.95; }

   :root[data-theme="dark"] .map-grid .mini-card { background: #0e192e !important; border-color: rgba(255,255,255,0.15); }
   :root[data-theme="dark"] .contact,
   :root[data-theme="dark"] .map-grid { background: #0b1221 !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card h3,
   :root[data-theme="dark"] .contact-mini-grid .mini-card h4 { color: #f6c453 !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card svg { color: #f6c453 !important; fill: #f6c453 !important; }
   :root[data-theme="dark"] .map-grid .mini-card .icon-btn { background: #0b1221 !important; border-color: rgba(255,255,255,0.18); }
   :root[data-theme="dark"] .map-grid .location-icon svg { fill: #f6c453 !important; }
   :root[data-theme="dark"] .map-grid .mini-card,
   :root[data-theme="dark"] .map-grid .mini-card p,
   :root[data-theme="dark"] .map-grid .mini-card li { color: #e8eefc !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card .icon-btn svg { color: #ffffff !important; fill: #ffffff !important; stroke: #ffffff !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card .icon-btn { border-color: rgba(246,196,83,0.35) !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card .icon-btn:hover svg { color: #ffd98c !important; fill: #ffd98c !important; }
   :root[data-theme="dark"] .contact-mini-grid .mini-card .icon-btn:hover { box-shadow: 0 0 12px rgba(246,196,83,0.45) !important; }

   /* Kontakt Überschrift */
   .contact-headline {
     text-align: center;
     font-size: clamp(26px, 4vw, 34px);
     font-weight: 800;
     margin-bottom: 30px;
     color: var(--brand);
   }
   :root[data-theme="dark"] .contact-headline { color: #f6c453; }

   /* reCAPTCHA spacing */
   .g-recaptcha { margin: 12px 0; }

   @media (max-width:980px){
     .grid-2{grid-template-columns:1fr}
     .cards{grid-template-columns:1fr 1fr}
     .t-grid{grid-template-columns:1fr}
     .nav-toggle{display:block}
     .nav{position:absolute;inset:60px 0 auto 0;background:var(--panel);border-bottom:1px solid var(--stroke);transform:translateY(-12px);opacity:0;pointer-events:none;padding:.6rem .9rem;flex-wrap:wrap;justify-content:center;z-index:55}
     .nav.is-open{transform:translateY(0);opacity:1;pointer-events:auto}
     .nav-right {
      margin-left: auto;
      position: fixed;
      right:5%;
    }
     /* Größen kommen über Tokens; hier nur zur Sicherheit gesetzt */
     .brand .logo-light,
     .brand .logo-dark{height:var(--brand-logo-h)}
     .brand .wordmark-light,
     .brand .wordmark-dark{height:var(--brand-wordmark-h)}

     /* Dropdown mobil: blockfluss statt absolute */
     .nav .has-dropdown{width:100%}
     .nav .dropdown{position:static;opacity:1;visibility:visible;transform:none;pointer-events:auto;box-shadow:none;border:0;background:transparent;padding:.25rem 0 .5rem;margin:0}
     .nav .dropdown>li>a{padding:.55rem 0;border-radius:0}
   }
   @media (max-width:640px){ .cards{grid-template-columns:1fr} }

   /* === Kontakt-Hintergrund nach unten gespiegelt duplizieren === */
   .fancy-contact { position: relative; isolation: isolate; }
   .fancy-contact::after{
     content:"";
     position:absolute;
     left:0; right:0; bottom:-30%;
     height:60%;
     pointer-events:none;
     z-index:-1;
     background:
             radial-gradient(1000px 400px at -10% 10%, color-mix(in hsl, var(--brand) 18%, transparent) 0%, transparent 60%),
             radial-gradient(900px 360px at 110% 80%, color-mix(in hsl, var(--brand) 14%, transparent) 0%, transparent 60%),
             conic-gradient(from 180deg at 50% 50%, color-mix(in hsl,var(--bg) 95%, #cbd5e1) 0 25%, transparent 25% 50%, color-mix(in hsl,var(--bg) 95%, #cbd5e1) 50% 75%, transparent 75% 100%);
     transform: scaleY(-1);
     opacity:.9;
     mask-image: linear-gradient(to bottom, rgba(0,0,0,.9), rgba(0,0,0,0));
   }
   :root[data-theme="dark"] .fancy-contact::after{
     background:
             radial-gradient(1000px 420px at -10% 10%, color-mix(in hsl, var(--brand) 12%, transparent) 0%, transparent 60%),
             radial-gradient(900px 380px at 110% 80%, color-mix(in hsl, var(--brand) 10%, transparent) 0%, transparent 60%),
             conic-gradient(from 180deg at 50% 50%, #0b1220 0 25%, #0a1526 25% 50%, #0b1220 50% 75%, #0a1526 75% 100%);
   }

   .contact.tone-3.has-sep { background: var(--tone-3-bg); }
   .contact.tone-4.has-sep { background: var(--tone-4-bg); }
   :root[data-theme="dark"] .contact.tone-3.has-sep { background:#0a1326; }
   :root[data-theme="dark"] .contact.tone-4.has-sep { background:#091223; }

   @media (min-width: 1200px){
     .map-stack .map-frame{ max-width: 820px; height: 340px; }
   }

   :root[data-theme="dark"] .mini-title { color:#f6c453 !important; }
   :root[data-theme="dark"] .contact-info h2,
   :root[data-theme="dark"] .contact-info .section-kicker { color:#f6c453; }

   .contact-mini-grid .mini-card .contact-actions{ justify-content:center !important; }

   :root{ --error: #b42318; --error-bg: color-mix(in hsl, #b42318 12%, transparent); }
   :root[data-theme="dark"]{ --error: #ffb4a8; --error-bg: color-mix(in hsl, #ffb4a8 16%, transparent); }

   /* Feld-Wrapper */
   .form label{ position: relative; }

   .input-hint{ display:none; margin-top:6px; font-size:13px; line-height:1.35; color:var(--error); }

   /* rote Umrandung & sanfter Glow bei Ungültigkeit */
   .form label:has(input[aria-invalid="true"]) input,
   .form label:has(textarea[aria-invalid="true"]) textarea{
     border-color: var(--error);
     box-shadow: 0 0 0 3px var(--error-bg);
   }
   .form label:has(input[aria-invalid="true"]) .input-hint,
   .form label:has(textarea[aria-invalid="true"]) .input-hint{ display:block; }

   @media (prefers-reduced-motion: reduce){
     .form input, .form textarea{ transition: none; }
   }

   /* Design-konforme Fehlfarben */
   :root{ --error:#b3261e; }
   :root[data-theme="dark"]{ --error:#ffb4ab; }

   /* Fehlzustand sichtbar machen */
   input.is-invalid, textarea.is-invalid {
     border-color: var(--error) !important;
     box-shadow: 0 0 0 3px color-mix(in hsl, var(--error) 28%, transparent);
   }

   /* Fehltexte unter den Feldern */
   .field-error{ margin-top:.35rem; font-size:.9rem; line-height:1.35; color: var(--error); }
   #captcha-error{ margin-top:.5rem; }

   /* Galerie Minimal */
   .gallery-landing { display: flex; align-items: center; justify-content: center; padding: 160px 0; background: var(--bg); }
   .brand-title { font-size: 2.0rem; font-weight: 700; color: #ffffff; margin-bottom: .3rem; text-align: center; }
   .gallery-title { font-size: 3rem; font-weight: 800; color: var(--text); text-align: center; }

   /* Linie unter Galerie Titel */
   .gallery-title { position: relative; display: inline-block; padding-bottom: 12px; }
   .gallery-title::after { content: ""; display: block; width: 90px; height: 3px; background-color: #35577B; margin: 10px auto 0; border-radius: 2px; }

   /* Galerie – zentriert & sauber */
   .gallery-hero{ background: var(--bg); min-height: calc(100vh - 120px); display: grid; place-items: center; padding: clamp(60px, 12vh, 120px) 0; }
   .gallery-wrap{ text-align: center; }
   .gallery-brand{ margin: 0 0 8px; font-weight: 800; color: #35577B; font-size: clamp(18px, 3.2vw, 26px); }
   :root[data-theme="dark"] .gallery-brand{ color: var(--brand); }

   .gallery-title{ margin: 0; font-weight: 800; font-size: clamp(28px, 4vw, 44px); color: var(--text); position: relative; display: inline-block; padding-bottom: 14px; }
   .gallery-title::after{ content:""; display:block; width: 200px; height: 3px; margin: 12px auto 0; background-color: #35577B; border-radius: 2px; }
   :root[data-theme="dark"] .gallery-title::after { background-color: var(--brand); }

   /* Weißer Button mit blauer Schrift — ohne Rahmen */
   .btn-white-blue { background: #ffffff; color: #35577B; border: none; }
   .btn-white-blue:hover { background: #ffffff !important; color: #35577B !important; border: none; }
   /* Dark Mode */
   :root[data-theme="dark"] .btn-white-blue { background: #f6c453; color: #122033; border: none; }
   :root[data-theme="dark"] .btn-white-blue:hover { background: #f6c453 !important; color: #122033 !important; border: none; }

   .impressum-wordmark img { height: 46px; }
   @media (min-width: 1024px) { .impressum-wordmark img { height: 56px; } }
   .impressum-card .info-card { position: relative; }

   .imp-meta { display: grid; gap: 6px; margin-bottom: 12px; font-size: 0.95rem; }
   .imp-meta a { text-decoration: none; font-weight: 600; color: var(--text); position: relative; transition: transform .18s ease, color .18s ease; }
   .imp-meta a:hover { transform: translateY(-1px); color: #35577B; }
   :root[data-theme="dark"] .imp-meta a:hover { color: var(--brand); }

   @media (min-width: 860px) {
     .imp-meta { position: absolute; top: 18px; right: 18px; text-align: right; margin-bottom: 0; }
     .impressum-card .info-card { padding-right: clamp(28px, 6vw, 72px); }
   }
   .imp-meta a::after {
     content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px;
     background: linear-gradient(90deg, #35577B, transparent 70%);
     transform: scaleX(.2); transform-origin: left;
     transition: transform .22s ease, background .22s ease;
   }
   :root[data-theme="dark"] .imp-meta a::after { background: linear-gradient(90deg, var(--brand), transparent 70%); }
   .imp-meta a:hover::after { transform: scaleX(1); }

   .gallery-hero--compact { padding: clamp(40px, 8vh, 72px) 0 0; }
   .impressum-wordmark { display:grid; place-items:center; margin-bottom:8px; }
   .impressum-wordmark img { height: 46px; width:auto; }
   @media (min-width:1024px){ .impressum-wordmark img { height:56px; } }

   .imp-grid{ display:grid; gap: clamp(16px, 2vw, 28px); grid-template-columns: 1fr; }
   @media (min-width:760px){ .imp-grid{ grid-template-columns: repeat(2, 1fr); } }
   @media (min-width:1100px){ .imp-grid{ grid-template-columns: repeat(3, 1fr); } }

   /* Farben je Theme */
   :root { --imp-bg: #35577B; --imp-fg: #ffffff; }
   :root[data-theme="dark"] { --imp-bg: var(--brand); --imp-fg: #000; }

   /* Block-Karte */
   .imp-card{
     background: var(--imp-bg);
     color: var(--imp-fg);
     border-radius: 16px;
     padding: clamp(18px, 2.2vw, 28px);
     box-shadow: 0 10px 22px rgba(0,0,0,.12);
     transform: translateZ(0);
     transition: box-shadow .28s ease, transform .28s ease, filter .28s ease;
     will-change: transform;
   }
   .imp-card:hover{
     animation: imp-pop .45s cubic-bezier(.2, .9, .2, 1) 1;
     transform: translateY(-4px) scale(1.01);
     box-shadow: 0 16px 36px rgba(0,0,0,.18);
     filter: saturate(1.02);
   }
   @keyframes imp-pop{
     0%{ transform: translateY(0) scale(1); }
     40%{ transform: translateY(-6px) scale(1.02); }
     70%{ transform: translateY(-3px) scale(1.006); }
     100%{ transform: translateY(-4px) scale(1.01); }
   }
   .imp-card h2, .imp-card h3{ margin: 0 0 .6rem; font-weight: 800; letter-spacing: .2px; transition: transform .2s ease, text-shadow .2s ease; }
   .imp-card h2:hover, .imp-card h3:hover{ transform: translateY(-1px); text-shadow: 0 1px 0 rgba(0,0,0,.05); }
   .imp-list{ list-style: none; padding: 0; margin: .1rem 0 .8rem; }
   .imp-card a{ color: var(--imp-fg); font-weight: 700; text-Decoration: none; position: relative; }
   .imp-card a::after{ content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px; background: rgba(255,255,255,.85); transform: scaleX(.2); transform-origin: left; transition: transform .22s ease, opacity .22s ease; }
   :root[data-theme="dark"] .imp-card a::after{ background: rgba(0,0,0,.8); }
   .imp-card a:hover::after{ transform: scaleX(1); }
   .imp-divider{ border: none; height: 1px; background: rgba(255,255,255,.35); margin: .9rem 0; }
   :root[data-theme="dark"] .imp-divider{ background: rgba(0,0,0,.35); }
   .imp-bank{ margin: .3rem 0 0; line-height: 1.5; }

   .imp-section { padding: clamp(40px, 8vh, 72px) 0; }
   .gallery-title{ margin:0; font-weight:800; font-size:clamp(28px,4vw,44px); color:var(--text); display:inline-block; padding-bottom:14px; transition:transform .25s ease, letter-spacing .25s ease; }
   .gallery-title::after{ content:""; display:block; width:220px; height:3px; margin:12px auto 0; border-radius:2px; background:#35577B; transition:width .25s ease, background-color .25s ease; }
   :root[data-theme="dark"] .gallery-title::after{ background:var(--brand); }
   .gallery-title:hover{ transform:translateY(-2px); letter-spacing:.3px; }
   .gallery-title:hover::after{ width:260px; }

   :root{
     --brand-surface-fg: #ffffff;
     --brand-surface-grad: linear-gradient(135deg, #3f6e9f 0%, #35577B 55%, #2b4c6e 100%);
   }
   :root[data-theme="dark"]{
     --brand-surface-fg: #000000;
     --brand-surface-grad: linear-gradient(135deg, #ffe199 0%, #f6c453 55%, #dda93a 100%);
     --bg: #0a1020 !important;
     --panel: #0d162d !important;
     --surface: #0f1a30 !important;
   }
   .imp-section{ background: color-mix(in hsl, var(--bg) 96%, #eaf0f7) !important; }
   :root[data-theme="dark"] .imp-section{ background: linear-gradient(180deg, #0a1020, #0b1426 60%, #0a1020) !important; }

   .imp-grid.imp-grid--2x1{
     display: grid !important;
     gap: clamp(16px, 2vw, 28px) !important;
     grid-template-columns: 1fr !important;
     grid-template-areas: "A" "B" "C" !important;
     margin-top: clamp(18px, 3vh, 28px) !important;
   }
   @media (min-width:760px){
     .imp-grid.imp-grid--2x1{
       grid-template-columns: 1fr 1fr !important;
       grid-template-areas:
         "A B"
         "C C" !important;
     }
   }
   @media (min-width:1100px){
     .imp-grid.imp-grid--2x1{
       grid-template-columns: 1fr 1fr !important;
       grid-template-areas:
         "A B"
         "C C" !important;
     }
   }
   .imp-a{ grid-area: A !important; }
   .imp-b{ grid-area: B !important; }
   .imp-c{ grid-area: C !important; min-height: clamp(320px, 40vh, 560px) !important; display:flex !important; flex-direction:column !important; }

   .imp-card{
     background: var(--brand-surface-grad) !important;
     color: var(--brand-surface-fg) !important;
   }

   .site-header .nav-bar{
     width:100%;
     max-width:100%;
     padding: .8rem clamp(12px, 3vw, 28px);
     display:grid;
     grid-template-columns: 1fr minmax(520px, 1100px) 1fr;
     align-items:center;
     gap: 12px;
   }
   .nav-left{ display:flex; align-items:center; gap: .8rem; justify-self:start; }
   .nav-center{ display:flex; align-items:center; justify-self:center; }
   .nav-right{ display:flex; align-items:center; gap: .8rem; justify-self:end; }
   .site-header .nav-bar .nav{
     margin-left: 0 !important;
     display:flex;
     align-items:center;
     gap: clamp(.6rem, 2vw, 1rem);
     justify-content: center;
   }
   .header-mail{ margin-left: .4rem; }
    .header-mail .mail-text{transition:transform .3s ease, opacity .3s ease}
    .header-mail::after{content:attr(data-hover);padding: 4px 8px;position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(6px);transition:transform .3s ease, opacity .3s ease;color:inherit}
    .header-mail:hover .mail-text{opacity:0;transform:translateY(-6px)}
    .header-mail:hover::after{opacity:1;transform:translateY(0)}

@media (max-width:980px){
     .site-header .nav-bar{ grid-template-columns: 1fr auto 1fr; }
   }

   /* Mailto-Button Schriftfarbe abhängig vom Theme */
   .site-header .header-mail{ color:#000 !important; }
   .site-header .header-mail:hover,.site-header .header-mail:focus{ color:#000 !important; }
   html[data-theme="light"] .site-header .header-mail{ color:#ffffff !important; }
   html[data-theme="dark"]  .site-header .header-mail{ color:#000000 !important; }
   html[data-theme="light"] .site-header .header-mail:hover,
   html[data-theme="light"] .site-header .header-mail:focus{ color:#ffffff !important; }
   html[data-theme="dark"]  .site-header .header-mail:hover,
   html[data-theme="dark"]  .site-header .header-mail:focus{ color:#000000 !important; }

   .gallery-stack { width:min(1100px,92%); margin-inline:auto; }

   /* Galerie-Grid */
   .gallery-grid{
     list-style:none; margin:22px 0 0; padding:0;
     display:grid; gap:clamp(10px,1.8vw,16px);
     grid-template-columns: repeat(3, 1fr);
   }
   @media (max-width: 980px){ .gallery-grid{ grid-template-columns: repeat(2, 1fr);} }
   @media (max-width: 640px){ .gallery-grid{ grid-template-columns: 1fr; } }

   /* Galerie-Item: Startzustand = unten + unsichtbar */
   .g-item{
     position:relative;
     overflow:hidden;
     border-radius:14px;
     background:var(--surface);
     border:1px solid var(--stroke);
     box-shadow:var(--shadow);

     opacity: 0;
     transform: translateY(18px);
     transition:
             opacity .8s ease-out,
             transform .8s ease-out,
             box-shadow .35s ease;
   }

   /* Wenn sichtbar → Fade-In + leichter Lift */
   .g-item.is-visible{
     opacity: 1;
     transform: translateY(0);
   }

   .g-thumb{
     width:100%;
     height:260px;
     object-fit:cover;
     display:block;
     transition:transform .6s ease;
   }

   .g-item:hover{
     transform: translateY(-4px);
     box-shadow:0 18px 40px rgba(0,0,0,.18);
   }

   .g-item:hover .g-thumb{
     transform:scale(1.12);
   }

   @media (max-width:640px){
     .g-thumb{ height:220px; }
   }


   .gallery-hero{ padding-top: clamp(50px, 8vh, 120px) !important; padding-bottom: clamp(10px, 4vh, 60px) !important; }
   .gallery-wrap{ margin-bottom: clamp(5px, 2vh, 20px); }

   a.btn,.btn,.btn:hover,.btn:focus,
   .btn-primary,.btn-primary:hover,.btn-primary:focus,
   .btn-outline,.btn-outline:hover,.btn-outline:focus,
   .btn-white-blue,.btn-white-blue:hover,.btn-white-blue:focus { text-decoration: none !important; }

   /* Speziell für „Unsere Leistungen“ */
   a[href$="#services"], a[href$="index.html#services"],
   a[href$="#services"]:hover, a[href$="index.html#services"]:hover,
   a[href$="#services"]:focus, a[href$="index.html#services"]:focus,
   a[href$="#services"]:focus-visible, a[href$="index.html#services"]:focus-visible{
     text-decoration: none !important;
   }

   .hero-copy{ display:flex; flex-direction:column; align-items:center; gap:18px; }

   .services-line-wrap{
    width: 150%;
     max-width: none;
  margin-right: 0;
     display:flex;
     justify-content:center;

   }
   .services-line{
     display:inline-flex;
     align-items:center;
     gap:clamp(10px,1.4vw,20px);     /* etwas enger, damit alles auf eine Zeile passt */
     white-space:nowrap;
     color:#fff;
     font-size:clamp(13px,1.2vw,17px); /* adaptiv kleiner, um in einer Zeile zu bleiben */
     text-shadow:0 2px 6px rgba(0,0,0,.35);
     padding-bottom:2px;
   }
   .services-line li{
     display:inline-flex;
     align-items:center;
     gap:6px;
     padding:3px 0;
     transition:transform .18s ease, color .18s ease, filter .18s ease;
     will-change: transform;
   }
   .services-line li:hover{
     transform: translateY(-2px); /* bewegt Icon + Wort gemeinsam */
   }
   /* alte Bild-Icon-Klasse bleibt aus kompatibilitätsgründen, wird aber nicht genutzt */
   .svc-ico-img{
     width:22px; height:22px; margin-right:6px; vertical-align:middle;
     filter: brightness(0) invert(1) contrast(118%)
     drop-shadow(0 0 0.6px rgba(255,255,255,.9))
     drop-shadow(0 0 0.6px rgba(255,255,255,.9));
     transition: transform .18s ease, filter .18s ease;
   }
   .services-line li:hover .svc-ico-img{
     transform: scale(1.02) rotate(-3deg);
     filter:
             brightness(1) invert(0) contrast(120%)
             drop-shadow(0 0 4px currentColor);
   }
   html[data-theme="light"] .services-line li:hover{ color:#35577B; }
   html[data-theme="dark"]  .services-line li:hover{ color:#f6c453; }

   /* >>> NEU: Services-Icons per Mask + Fallback <<< */
   .services-line .svc-ico{
     width:22px;
     height:22px;
     display:inline-block;
     flex:0 0 22px;
     vertical-align:middle;
     transition: transform .18s ease, filter .18s ease;
   }

   /* Primär: per CSS-Mask, färbbar via currentColor */
   .services-line .svc-ico{
     background-color: currentColor;
     -webkit-mask: var(--ico) no-repeat center / contain;
     mask: var(--ico) no-repeat center / contain;
     /* leichte Outline für bessere Lesbarkeit auf Fotos */
     filter:
             drop-shadow(0 0 0.6px rgba(255,255,255,.9))
             drop-shadow(0 0 0.6px rgba(0,0,0,.28));
   }

   /* Fallback: wenn Mask nicht unterstützt wird */
   @supports not (-webkit-mask: url("")) {
     .services-line .svc-ico{
       background-color: transparent;
       background-image: var(--ico);
       background-repeat: no-repeat;
       background-position: center;
       background-size: contain;
       filter: none;
     }
   }

   /* Hover-Effekt für beide Varianten */
   .services-line li:hover .svc-ico{
     transform: scale(1.06) rotate(-6deg);
     filter:
             drop-shadow(0 0 4px currentColor)
             drop-shadow(0 0 8px currentColor);
   }

   :root[data-theme="light"] .gallery-title::after { background-color: #35577B !important; }
   :root[data-theme="dark"]  .gallery-title::after { background-color: #f6c453 !important; }

   .card h4{
     display:flex;
     align-items:center;
     gap:.5rem;
   }
   .h-ico{
     width:22px;
     height:22px;
     display:inline-block;
     background-repeat:no-repeat;
     background-position:center;
     background-size:contain;
   }

   /* Icon-Zuordnungen (nutzt deine vorhandenen Icons aus /images/icons/) */
   .h-ico.ico-sanierung      { background-image:url('images/icons/home-50.png'); }
   .h-ico.ico-bauarbeiten    { background-image:url('images/icons/build-50.png'); }
   .h-ico.ico-maler          { background-image:url('images/icons/roller-24.png'); }
   .h-ico.ico-boden          { background-image:url('images/icons/floor-64.png'); }
   .h-ico.ico-fliesen        { background-image:url('images/icons/tiles-50.png'); }        /* falls nicht vorhanden -> alternatives Icon wählen */
   .h-ico.ico-fassade        { background-image:url('images/icons/structural-50.png'); }
   .h-ico.ico-trockenbau     { background-image:url('images/icons/wall-50.png'); }          /* falls nicht vorhanden -> alternatives Icon wählen */
   .h-ico.ico-wasser         { background-image:url('images/icons/cracked-pipe-50.png'); }
   .h-ico.ico-bad            { background-image:url('images/icons/bath-50.png'); }          /* falls nicht vorhanden -> alternatives Icon wählen */

   /* "Mehr erfahren" im Leistungen-Anker nicht unterstreichen */
   .card-link,
   .card-link:hover,
   .card-link:focus{
     text-decoration:none !important;
   }

   :root[data-theme="dark"] #contact .contact-info h2{
     color:#ffffff !important;
   }
   .simple-icons li {
     display: flex;
     align-items: center;
     gap: 8px;
     font-weight: 600;
     margin-bottom: 6px;
   }

   .svc-icon {
     width: 22px;
     height: 22px;
     object-fit: contain;
     transition: transform .2s ease;
   }

   .simple-icons li:hover .svc-icon {
     transform: scale(1.15);
   }

   body.impressum-page .imp-card,
   .imp-section .imp-card,
   .impressum .imp-card{
     color: var(--imp-fg) !important;
   }

   /* Alle üblichen Textelemente im Block auf --imp-fg zwingen */
   body.impressum-page .imp-card h1,
   body.impressum-page .imp-card h2,
   body.impressum-page .imp-card h3,
   body.impressum-page .imp-card h4,
   body.impressum-page .imp-card h5,
   body.impressum-page .imp-card h6,
   body.impressum-page .imp-card p,
   body.impressum-page .imp-card li,
   body.impressum-page .imp-card a,
   body.impressum-page .imp-card small,
   body.impressum-page .imp-card span,
   body.impressum-page .imp-card strong,
   body.impressum-page .imp-card em,
   body.impressum-page .imp-card address,
   body.impressum-page .imp-card dt,
   body.impressum-page .imp-card dd,
   .imp-section .imp-card h1,
   .imp-section .imp-card h2,
   .imp-section .imp-card h3,
   .imp-section .imp-card h4,
   .imp-section .imp-card h5,
   .imp-section .imp-card h6,
   .imp-section .imp-card p,
   .imp-section .imp-card li,
   .imp-section .imp-card a,
   .imp-section .imp-card small,
   .imp-section .imp-card span,
   .imp-section .imp-card strong,
   .imp-section .imp-card em,
   .imp-section .imp-card address,
   .imp-section .imp-card dt,
   .imp-section .imp-card dd{
     color: var(--imp-fg) !important;
     opacity: 1 !important; /* keine Abdunklung */
     text-decoration: none; /* Grundzustand ohne Unterstreichung */
   }

   body.impressum-page .imp-card a,
   .imp-section .imp-card a{
     text-decoration: none !important;
     position: relative;
     font-weight: 700;
   }
   body.impressum-page .imp-card a::after,
   .imp-section .imp-card a::after{
     content:"";
     position:absolute; left:0; right:0; bottom:-2px; height:2px; border-radius:1px;
     background: currentColor; /* nimmt var(--imp-fg) an */
     opacity:.85;
     transform: scaleX(.2);
     transform-origin: left;
     transition: transform .22s ease, opacity .22s ease;
   }
   body.impressum-page .imp-card a:hover::after,
   .imp-section .imp-card a:hover::after{
     transform: scaleX(1);
     opacity: 1;
   }

   body.impressum-page .imp-meta a,
   .imp-section .imp-meta a{
     color: var(--imp-fg) !important;
     text-decoration: none !important;
   }
   body.impressum-page .imp-meta a::after,
   .imp-section .imp-meta a::after{
     background: currentColor !important;
   }

   /* Trennlinie im Block bleibt sichtbar (passt sich automatisch an) */
   body.impressum-page .imp-divider,
   .imp-section .imp-divider{
     background: color-mix(in hsl, currentColor 35%, transparent);
   }

   /* SVG/Icons im Block auf Textfarbe setzen */
   body.impressum-page .imp-card svg,
   .imp-section .imp-card svg{
     color: var(--imp-fg) !important;
     fill: currentColor !important;
     stroke: currentColor !important;
   }

   body.impressum-page .imp-card .pipe,
   .imp-section .imp-card .pipe{
     color: var(--imp-fg) !important;
     opacity:.85;
   }

   /* Korrektur: Tippfehler in einer vorhandenen Regel beheben */
   .imp-card a{ text-decoration: none; }  /* statt textDecoration */

   /* === Unsere Leistungen: Alles linksbündig === */
   #services .cards {
     text-align: left !important;
   }

   #services .card {
     text-align: left !important;
   }

   #services .card-body {
     text-align: left !important;
     display: flex;
     flex-direction: column;
     align-items: flex-start !important;
   }

   #services .card-body h4,
   #services .card-body p,
   #services .card-body .card-link {
     text-align: left !important;
     justify-content: flex-start !important;
   }

   /* Icon + Titel links ausrichten */
   #services .card-body h4 {
     display: flex;
     align-items: center;
     gap: .5rem;
     width: 100%;
     justify-content: flex-start !important;
   }

   .hero-actions {
     display: flex;
     justify-content: center;
     gap: 16px;
     flex-wrap: wrap;
     margin-top: -0.5rem;
   }

   /* sorgt dafür dass sie mobil untereinander gehen */
   @media (max-width: 600px) {
     .hero-actions {
       flex-direction: column;
       align-items: center;
     }
   }

   .cards .card {
     transition: transform 0.25s ease, box-shadow 0.25s ease;
     transform: translateY(0);
     box-shadow: 0 2px 6px rgba(0,0,0,0.10);
   }

   .cards .card:hover {
     transform: translateY(-20px);
     box-shadow: 0 6px 16px rgba(0,0,0,0.18);
   }

   .sub-hero {
     position: relative;
     height: 55vh;
     background-size: cover;
     background-position: center;
     display: flex;
     align-items: center;
     justify-content: center;
   }

   .sub-hero .hero-overlay {
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,0.45);
   }

   .hero-underline {
     width: 120px;
     height: 4px;
     margin: 12px auto 0;
     background: var(--accent);
     border-radius: 2px;
   }

   .container.narrow {
     max-width: 800px;
   }

   .hero-sub{
     position: relative;
     min-height: min(72vh, 760px);
     padding: clamp(80px, 12vh, 160px) 0;
     overflow: hidden;
     background: transparent !important;   /* killt evtl. geerbte Hintergründe/Splits */
   }

   .hero-sub .hero-media,
   .hero-sub .hero-img{
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     display: block;
   }

   .hero-sub .hero-img{
     object-fit: cover;           /* füllt den Bereich sauber aus */
     object-position: center;     /* Fokus mittig */
     image-rendering: auto;       /* verhindert Pixel-Treppchen */
     filter: contrast(1.04) saturate(1.04);
     transform: translateZ(0);    /* schärferes Rendering bei manchen GPUs */
   }

   /* sehr sanftes, gleichmäßiges Overlay (keine Halbierung) */
   .hero-sub .hero-veil{
     content: "";
     position: absolute;
     inset: 0;
     background: rgba(0,0,0,.32); /* EINHEITLICH, kein Verlauf -> kein „Split“ */
     pointer-events: auto;
   }

   .hero-sub .hero-center{
     position: relative;
     z-index: 2;
   }

   [data-theme="dark"] .hero-sub .hero-veil{
     background: rgba(0,0,0,.40);
   }

   @media (max-width: 640px){
     .hero-sub{ min-height: 64vh; }
   }
   .brand img {
     height: 48px;
     width: auto;
   }

   [data-theme="dark"] .logo-light { display:none; }
   [data-theme="dark"] .logo-dark { display:inline; }

   [data-theme="light"] .logo-dark { display:none; }
   [data-theme="light"] .logo-light { display:inline; }

   /* ✅ Lightbox */
   .lightbox {
     position: fixed;
     inset: 0;
     background: rgba(0,0,0,0.85);
     display: none;
     justify-content: center;
     align-items: center;
     z-index: 9999;
     cursor: zoom-out;
   }

   .lightbox img {
     max-width: 90%;
     max-height: 90%;
     border-radius: 8px;
     box-shadow: 0 20px 40px rgba(0,0,0,0.4);
     animation: zoomIn .25s ease;
   }

   @keyframes zoomIn {
     from { transform: scale(0.85); opacity: 0; }
     to { transform: scale(1); opacity: 1; }
   }

   /* ✅ Cursor */
   .g-thumb {
     cursor: zoom-in;
   }

   /* Services-Titel zentrieren */
   .section.services .section-kicker,
   .section.services #svc-title{
     text-align: center;
     margin-left: auto;
     margin-right: auto;
   }

   .section.services .section-kicker{ margin-bottom: .25rem; }
   .section.services #svc-title{ margin-bottom: 1.25rem; }

   .services-line li {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 10px;
   }

   .services-line a {
     display: flex;
     align-items: center;
     color: white;               /* Standardfarbe */
     text-decoration: none;      /* Keine Unterstreichung */
     transition: color 0.3s ease;
   }

   .services-line a:hover {
     color: #35577B;             /* Blau beim Hover im Lightmode */
     text-decoration: none;
   }

   /* Icon-Effekt */
   .services-line .svc-icon {
     width: 24px;
     height: 24px;
     transition: all 0.3s ease;
     margin-right: 4%;
   }

   .services-line a:hover .svc-icon {
     transform: scale(1.1);
     filter: brightness(1.2);
   }

   [data-theme="dark"] .services-line a {
     color: white;               /* Schrift weiß im Darkmode */
   }

   [data-theme="dark"] .services-line a:hover {
     color: #f6c453;             /* Gold beim Hover im Darkmode */
   }

   [data-theme="dark"] .services-line .svc-icon {
     filter: brightness(1.1);    /* leicht aufgehellte Icons */
   }

   /* Aktiver Menüpunkt */
   .nav-link.active {
     color: #35577B;
     font-weight: 600;
     transition: color 0.3s ease;
   }

   [data-theme="dark"] .nav-link.active {
     color: #f6c453;
   }

   .nav a.is-active {
     font-weight: 800;
     color: var(--accent-color);
   }
   .nav-link.active,
   .dropdown-toggle.active {
     font-weight: 800 !important;
     color: var(--brand) !important;
   }

   /* Light Mode Farbe */
   html[data-theme="light"] .nav-link.active {
     color: #35577B !important;
   }

   /* Dark Mode Farbe */
   html[data-theme="dark"] .nav-link.active {
     color: #f6c453 !important;
   }


   #about .about-text,
   #about .about-cards,
   #about .about-cta {
     opacity: 0;
     will-change: transform, opacity;
     transition: transform 0.9s ease, opacity 0.9s ease;
   }

   /* Text aus GANZ LINKS */
   #about .about-text {
     transform: translateX(-100px);
   }

   /* Cards aus GANZ RECHTS */
   #about .about-cards {
     transform: translateX(100px);
   }

   /* Button von GANZ UNTEN */
   #about .about-cta {
     transform: translateY(80px);
     display: inline-flex;
   }

   /* Sichtbar-Zustand */
   #about.is-visible .about-text,
   #about.is-visible .about-cards,
   #about.is-visible .about-cta {
     opacity: 1;
     transform: translateX(0) translateY(0);
   }

   /* leichte Verzögerung */
   #about.is-visible .about-cards {
     transition-delay: 0.15s;
   }

   /* BUTTON → 1 Sekunde Verzögerung */
   #about.is-visible .about-cta {
     transition-delay: 0.9s;
   }
   /* Performance: Leistungen block entlasten */
   #services .cards {
     content-visibility: auto;
     contain-intrinsic-size: 900px;
   }

   #services .card {
     will-change: transform;
   }
   .cards {
     overflow: visible !important;
   }
   .section.services {
     overflow: visible !important;
   }
   .section.services .container {
     overflow: visible !important;
   }
   .cards {
     padding-bottom: 30px;
     padding-right: 30px;
     padding-left: 30px;
   }
   .svc-carousel {
     padding-bottom: 0px;
   }
   /* Initialzustand – Karten unsichtbar */
   .card[data-reveal] {
     opacity: 0;
     transform: translateY(20px);
     transition:
             opacity 0.6s ease-out,
             transform 0.6s ease-out;
     transition-delay: 0.8s; /* <-- 0.8s Wartezeit */
   }

   /* Wenn geladen / im Viewport */
   .card.revealed {
     opacity: 1;
     transform: translateY(0);
   }

   /* Optional: Hover-Effekt sauber */
   .card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 32px rgba(0,0,0,0.12);
   }
   /* === Leistungen auf der Startseite: 0.8s später einblenden === */
   #services .card[data-reveal] {
     opacity: 0;
     transform: translateY(16px);
   }

   /* Wenn .revealed per JS gesetzt wird → sanft reinfahren */
   #services .card.revealed {
     opacity: 1 !important;
     transform: translateY(0) !important;
     transition: opacity 0.6s ease-out 0.8s,
     transform 0.6s ease-out 0.8s;
   }
   #services .card[data-reveal] {
     opacity: 0;
     transition: transform 0.9s ease-out, opacity 0.9s ease-out;
   }

   /* 1–3: von links */
   #services .card:nth-child(1),
   #services .card:nth-child(2),
   #services .card:nth-child(3) {
     transform: translateX(-80px);
   }

   /* 4–6: von rechts */
   #services .card:nth-child(4),
   #services .card:nth-child(5),
   #services .card:nth-child(6) {
     transform: translateX(80px);
   }

   /* 7–9: wieder von links */
   #services .card:nth-child(7),
   #services .card:nth-child(8),
   #services .card:nth-child(9) {
     transform: translateX(-80px);
   }

   /* Wenn sichtbar → einblenden */
   #services .card.revealed {
     opacity: 1 !important;
     transform: translateX(0) !important;
   }

   /* Optional: leichter Delay für schöne Staffelung */
   #services .card:nth-child(1).revealed { transition-delay: .1s; }
   #services .card:nth-child(2).revealed { transition-delay: .2s; }
   #services .card:nth-child(3).revealed { transition-delay: .3s; }
   #services .card:nth-child(4).revealed { transition-delay: .35s; }
   #services .card:nth-child(5).revealed { transition-delay: .45s; }
   #services .card:nth-child(6).revealed { transition-delay: .55s; }
   #services .card:nth-child(7).revealed { transition-delay: .6s; }
   #services .card:nth-child(8).revealed { transition-delay: .7s; }
   #services .card:nth-child(9).revealed { transition-delay: .8s; }
   /* Karten unter "Unsere Leistungen" bündig mit der Überschrift */
   #services .cards {
     padding-left: 0;
     padding-right: 0;
   }
   .cards {
     padding: 10 !important;
   }
   /* --- Schatten dürfen NICHT abgeschnitten werden --- */
   .section.services,
   .section.services .container,
   #services,
   #services .cards,
   #services .svc-carousel,
   #services .svc-track {
     overflow: visible !important;
   }
   #services.has-sep {
     box-shadow: none;          /* keine harte Linie im Abschnitt */
   }

   #services.has-sep::after {
     display: none;             /* kein unterer Verlauf / keine „Kante“ */
   }

   #services .container {
     padding-bottom: 32px;
   }

   .lang-switch {
     display: flex;
     align-items: center;
     gap: 8px;          /* <-- Abstand zwischen den Flaggen */
   }

   .lang-switch a {
     padding: 0 !important;
     margin: 0 !important;
     display: inline-flex;
     align-items: center;
   }

   .lang-switch img {
     width: 30px;       /* falls du überall 30px willst */
     height: auto;
     display: block;

    }
   .nav .lang-switch {
     display: flex;
     align-items: center;
     gap: 8px;           /* Abstand zwischen den Flaggen */
     margin-left: auto;  /* schiebt die Flaggen ganz nach rechts im Nav-Menü */
   }

   /* Links der Flaggen ohne extra Padding/Margin */
   .nav .lang-switch a {
     padding: 0 !important;
     margin: 0 !important;
     display: inline-flex;
     align-items: center;
   }

   .nav .lang-switch img {
     width: 26px;        /* etwas kleiner, damit es dezenter wirkt */
     height: auto;
     display: block;
   }

   @media (max-width: 980px) {
     .nav .lang-switch {
       margin-left: 0;
       width: 100%;
       justify-content: center;
       margin-top: 4px;
     }
   }
   /* Einheitliche Größe für alle Flaggen im Header */
   .lang-switch img {
     width: 30px;
     height: auto;
     display: block;
   }
   .lang-switch img {
     width: 30px;
     height: auto;
     display: block;
   }

   /* Abstand zwischen den Flaggen */
   .lang-switch a {
     display: inline-flex;
     align-items: center;
     margin-left: 12px;   /* Abstand zur vorherigen Flagge */
   }

   .lang-switch {
     gap: 12px !important;
     display: flex !important;
     align-items: center;
   }

   .t-card {
     position: relative;
     opacity: 0;
     transform: translateY(20px);
     transition:
             opacity .7s ease-out,
             transform .7s cubic-bezier(.25,.1,.25,1),
             box-shadow .25s ease,
             scale .25s ease;
     box-shadow: 0 8px 22px rgba(0,0,0,.10);
     border-radius: 18px;
   }

   /* Hover Effekt */
   .t-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 18px 38px rgba(0,0,0,.18);
     scale: 1.01;
   }

   /* Sichtbar, wenn data-reveal aktiv wird */
   .t-card.revealed {
     opacity: 1;
   }

   /* Linke Bewertung → kommt von links */
   .t-card[data-reveal="left"] {
     transform: translateX(-60px);
   }
   .t-card[data-reveal="left"].revealed {
     transform: translateX(0);
   }

   .t-card[data-reveal="right"] {
     transform: translateX(60px);
   }
   .t-card[data-reveal="right"].revealed {
     transform: translateX(0);
   }

   .about-cards .info-card[data-reveal="fade"] {
     opacity: 0;
     transform: translateX(80px);     /* von rechts */
     transition: transform .8s ease, opacity .8s ease;
   }

   .about-cards .info-card.revealed {
     opacity: 1;
     transform: translateX(0);
   }

   .about-cards .info-card:nth-child(1).revealed {
     transition-delay: 0.4s;
   }

   .about-cards .info-card:nth-child(2).revealed {
     transition-delay: 0.5s;
   }

   .about-cards .info-card:nth-child(3).revealed {
     transition-delay: 0.6s;
   }

   .hero .hero-actions {
     opacity: 1;
     transform: translateY(40px);
     transition: opacity 0.8s ease, transform 0.8s ease;
   }

   .hero .hero-actions.revealed {
     opacity: 1;
     transform: translateY(0);
     transition-delay: 0.8s; /* <-- 0.8 Sekunden warten */
   }

   #contact .glass {
     transition:
             transform 0.25s ease,
             box-shadow 0.25s ease;
   }

   /* Hover-Effekt */
   #contact .glass:hover {
     transform: translateY(-4px);        /* leicht anheben */
     box-shadow: 0 16px 32px rgba(0,0,0,0.12); /* stärkerer Schatten */
   }
   /* Hintergrund Overlay */
   .cookie-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(2px);
     z-index: 9998;
     opacity: 1;
   }

   #cookie-banner {
     position: fixed;
     bottom: 30px;
     left: 50%;
     transform: translateX(-50%);
     width: 40%;
     max-width: 820px;
     z-index: 9999;
   }

   .cookie-banner__inner {
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 18px 45px rgba(0, 0, 0, 0.25);
     padding: 20px 28px 16px; /* ✅ kleiner Abstand unten */
     display: flex;
     flex-direction: column;
     gap: 1px;
   }

   .cookie-banner__text-wrap {
     margin-bottom: 4px; /* ✅ Text näher an Buttons */
     line-height: 1.4;
   }

   .cookie-banner__buttons {
     display: flex;
     justify-content: center;   /* ✅ zentriert */
     gap: 10px;                 /* ✅ weniger Abstand */
     margin-top: 6px;
     flex-wrap: nowrap;         /* ✅ zwingt eine Reihe */
   }

   .cookie-btn {
     padding: 10px 18px;
     border-radius: 25px;
     font-size: 14px;
     font-weight: 600;
     cursor: pointer;
     border: none;
     white-space: nowrap;
     transition: 0.2s;
   }

   .cookie-btn--primary {
     background: #35577B;
     color: white;
   }
   .cookie-btn--primary:hover {
     background: #304361;
     transform: translateY(-1px);
   }

   /* Secondary */
   .cookie-btn--secondary {
     background: #d1d3d5;
     color: #000000;
   }
   .cookie-btn--secondary:hover {
     background: #fbfbfb;
   }

   /* Ghost */
   .cookie-btn--ghost {
     justify-content: center;
     background: #f0f0f0;
     border: 1px solid #b9babb;
     color: #000000;
   }
   .cookie-btn--ghost:hover {
     background: #f1f3f5;
   }
   #cookie-banner,
   .cookie-banner__inner,
   .cookie-btn {
     pointer-events: auto !important;
   }
   .cookie-banner {
     transform: translate(-50%, 40px);
     opacity: 0;
     transition: transform 0.45s ease-out, opacity 0.45s ease-out;
   }

   .cookie-banner.cookie-slide-up {
     transform: translate(-50%, 0);
     opacity: 1;
   }

   .cookie-banner {
     transform: translate(-50%, 120%);
     opacity: 0;
     transition: transform 0.45s ease-out, opacity 0.45s ease-out;
   }

   .cookie-banner.cookie-slide-up {
     transform: translate(-50%, 0);
     opacity: 1;
   }
   .cookie-service {
     margin-top: 0.6rem;
     margin-bottom: 1.3rem;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
     background: #f9fafb;
     padding: 0.6rem 0.8rem;
   }
   :root[data-theme="dark"] .cookie-service{
     background: #0f1a30;
     color: #fff;

   }
   .cookie-service__toggle {
     width: 100%;
     background: transparent;
     border: none;
     padding: 0;
     margin: 0;
     display: flex;
     justify-content: space-between;
     align-items: center;
     cursor: pointer;
     font-size: 0.85rem;
     font-weight: 600;
     color: #000000;
   }

   .cookie-service__name {
     font-weight: 600;
   }

   .cookie-service__more {
     font-size: 0.8rem;
     color: #000000;
   }

   .cookie-service__body {
     margin-top: 0.5rem;
     font-size: 0.8rem;
     color: #000000;
   }

   .cookie-service__desc {
     margin: 0 0 0.5rem;
   }

   .cookie-service__meta {
     margin: 0;
     padding: 0;
   }

   .cookie-service__meta div {
     margin-bottom: 0.25rem;
   }

   .cookie-service__meta dt {
     font-weight: 600;
     font-size: 0.78rem;
     color: #111827;
   }

   .cookie-service__meta dd {
     margin: 0;
     font-size: 0.78rem;
     color: #000000;
   }

   .cookie-service__meta a {
     color: #000000;
     text-decoration: underline;
     text-decoration-thickness: 1px;
   }
   #cookie-banner {
     pointer-events: auto !important;
   }

   .cookie-banner__inner {
     pointer-events: auto !important;
   }

   .cookie-overlay {
     pointer-events: auto;
   }
   .cookie-banner__title {
     text-align: center;
     font-weight: 600;
     margin-bottom: 12px;
   }

   .cookie-banner__title::after {
     content: "";
     display: block;
     width: 60%;
     height: 2px;
     background: #e5e7eb; /* hellgrau wie dein Design */
     margin: 8px auto 0;
     border-radius: 2px;
   }
   .cookie-banner__buttons {
     border-top: 1px solid #d1d3d5 !important;
     width: 60%;
     padding-top: 12px;
     margin: 0 auto;
     margin-bottom: -10px;   /* zentriert */
     text-align: center; /* Buttons mittig ausrichten */
   }
   .cookie-banner__text-wrap {
     text-align: center;
   }
   .cookie-overlay {
     pointer-events: none !important;
   }
   .cookie-modal {
     position: fixed;
     inset: 0;                /* top:0; right:0; bottom:0; left:0 */
     display: none;           /* NICHT immer sichtbar */
     z-index: 10000;
   }

   /* Wenn sichtbar */
   .cookie-modal.cookie-modal--visible {
     display: block;
   }

   .cookie-modal__backdrop {
     position: absolute;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     backdrop-filter: blur(2px);
   }

   .cookie-modal__dialog {
     position: relative;
     max-width: 720px;
     
     background: #ffffff;
     border-radius: 18px;
     box-shadow: 0 22px 55px rgba(0, 0, 0, 0.35);
     max-height: 88vh;
     overflow: auto;
     padding: 20px 24px;
   }

   .cookie-modal__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     margin-bottom: 8px;
   }

   .cookie-modal__close {
     border: none;
     background: transparent;
     font-size: 1.2rem;
     cursor: pointer;
   }
   .cookie-service__body {
     display: none;
   }

   /* wenn geöffnet */
   .cookie-service.is-open .cookie-service__body {
     display: block;
   }
   .cookie-switch {
     position: relative;
     display: inline-block;
     width: 48px;
     height: 26px;
     cursor: pointer;
   }

   .cookie-switch input {
     opacity: 0;
     width: 0;
     height: 0;
   }

   .cookie-switch__slider {
     position: absolute;
     inset: 0;
     background: #d1d5db;
     border-radius: 999px;
     transition: 0.25s;
   }

   .cookie-switch__slider::before {
     content: "";
     position: absolute;
     height: 20px;
     width: 20px;
     left: 3px;
     bottom: 3px;
     background: white;
     border-radius: 50%;
     transition: 0.25s;
   }
   :root[data-theme="dark"] .cookie-switch input:checked + .cookie-switch__slider {
     background: #f6c453;
   }
   .cookie-switch input:checked + .cookie-switch__slider {
     background: #35577B;
   }


   .cookie-switch input:checked + .cookie-switch__slider::before {
     transform: translateX(22px);
   }
   /* Linie unter Modal-Titel */
   .cookie-modal__header {
     border-bottom: 2px solid #e5e7eb;
     padding-top: 0px;
     padding-bottom: 10px;
     margin-bottom: 12px;
   }

   .cookie-group:first-of-type {
     border-bottom: 2px solid #d3d9e3 !important;
     padding-bottom: 0px;
     padding-top: 0px;
     border-top: none !important;

   }

   .cookie-essential-header {
     display: flex;
     justify-content: space-between;
     align-items: center;
   }

   /* deaktivierter Toggle */
   .cookie-toggle--disabled {
     opacity: 0.5;
     cursor: not-allowed;
   }

   .cookie-toggle--disabled input:disabled + .cookie-toggle__slider {
     background-color: #bfc6cc;
   }

   .cookie-toggle--disabled input:disabled + .cookie-toggle__slider::before {
     background-color: #ffffff;
   }
   .cookie-toggle--locked {
     cursor: not-allowed;
   }

   .cookie-toggle--locked input:disabled + .cookie-toggle__slider {
     background-color: #9ca3af;      /* etwas dunkleres Grau */
     opacity: 0.9;
   }

   .cookie-toggle--locked input:disabled + .cookie-toggle__slider::before {
     /* Knopf bleibt rechts, weil checked */
     transform: translateX(18px);
   }

   .cookie-group__header {
     display: flex;
     align-items: center;
     gap: 0.6rem;
   }
   .cookie-banner__title {
     display: inline-flex !important;
     align-items: center !important;
     gap: 0.6rem !important;
     margin: 0 auto !important;
     text-align: center !important;
   }


   .cookie-title-icon {
     width: 28px !important;
     height: 28px !important;
     flex-shrink: 0 !important;
     display: block !important;
   }

   .cookie-banner__links {
     margin-top: 300%;
     text-align: center;
     font-size: 0.85rem;
     display: flex;
     justify-content: center;
     gap: 100px; 
   }

   .cookie-banner__links a {
     color: #35577B;
     text-decoration: none; 
     cursor: pointer;
   }

   .cookie-banner__links a:hover {
     opacity: 0.7; 
   }
   .cookie-banner__title {
     display: inline-flex !important;
     align-items: center !important;
     gap: 0.6rem !important;
     white-space: nowrap !important;   
   }


   .cookie-banner__inner {
     position: relative !important;
   }

   .cookie-banner__title {
     display: flex !important;
     align-items: center !important;   
     justify-content: center !important;
     gap: 0.6rem !important;
     white-space: nowrap !important;
     width: 100% !important;
   }

   .cookie-banner__title::before,
   .cookie-banner__title::after {
     content: "" !important;
     flex: 1 1 auto !important;        
     height: 2px !important;
     background: #e5e7eb !important;   /* graue Linie */
   }

   .cookie-title-icon {
     flex-shrink: 0 !important;        /* Icon bleibt stabil */
   }
  
   .cookie-banner__title {
     display: flex !important;
     align-items: center !important;
     justify-content: center !important;
     width: 100% !important;
     gap: 0.75rem !important;
   }

   /* Linien links und rechts */
   .cookie-banner__title::before,
   .cookie-banner__title::after {
     content: "" !important;
     flex: 1 1 0 !important;      /* beide Seiten flexibel, gleich lang */
     height: 2px !important;
     background: #e5e7eb !important;
   }

   .cookie-banner__title-content {
     display: inline-flex !important;
     align-items: center !important;
     gap: 0.5rem !important;
     white-space: nowrap !important;
   }

   .cookie-title-icon {
     width: 24px !important;
     height: 24px !important;
     flex-shrink: 0 !important;
   }
   .cookie-banner__title::after {
     transform: translateY(-4px) !important;  
   }
   .cookie-banner__links {
     display: flex !important;
     justify-content: space-evenly !important; 
     width: 100% !important;
     margin-top: 1rem !important;
   }

   .cookie-banner__links a {
     text-decoration: none !important;
   }
   .cookie-banner__links {
     display: flex !important;
     justify-content: center !important; 
     margin-top: 1rem !important;
   }

   .cookie-banner__links a:first-child {
     margin-right: 20px !important;  
   }

   .cookie-banner__links a:last-child {
     margin-left: 20px !important;  
   }
   .cookie-banner__buttons {
     position: relative !important;
     padding-bottom: 0.8rem !important; 
   }

   .cookie-banner__buttons::after {
     content: "" !important;
     position: absolute !important;
     bottom: 0 !important;
     left: 50% !important;
     transform: translateX(-50%) !important;
     width: 150% !important;          /* kannst du anpassen */
     max-width: 600px !important;    
     height: 2px !important;
     background: #e5e7eb !important; /* gleiche graue Linie */
   }
   
   .cookie-fab {
     position: fixed;
     left: 18px;
     bottom: 18px;          /* sitzt wie der Pfeil, nur links */

     width: 46px;
     height: 46px;
     border-radius: 50%;
     border: none;

     background: #35577B;  
     display: flex;         
     align-items: center;
     justify-content: center;

     cursor: pointer;
     box-shadow: 0 8px 22px rgba(0,0,0,.28);
     z-index: 12000;        /* über Overlay/Modal usw. */

     transition:
             transform .18s ease,
             box-shadow .18s ease,
             background .18s ease,
             opacity .18s ease;
   }

   .cookie-fab:hover,
   .cookie-fab:focus-visible {
     transform: translateY(-2px);
     box-shadow: 0 12px 30px rgba(0,0,0,.35);
     opacity: 0.96;
     outline: none;
   }

   .cookie-fab-icon {
     width: 24px;
     height: 24px;
     display: block;
     object-fit: contain;
   }

   .cookie-fab-icon--dark  { display: none; }
   .cookie-fab-icon--light { display: block; }

   html[data-theme="dark"] .cookie-fab {
     background: #0a1326;
   }

   html[data-theme="dark"] .cookie-fab-icon--light { display: none; }
   html[data-theme="dark"] .cookie-fab-icon--dark  { display: block; }

   @media (max-width: 640px) {
     .cookie-fab {
       width: 42px;
       height: 42px;
       left: 14px;
       bottom: 14px;
     }

     .cookie-fab-icon {
       width: 22px;
       height: 22px;
     }
   }
   .cookie-banner.cookie-visible ~ .cookie-fab {
     animation: cookiePulse 1.6s ease-in-out infinite;
   }

   @keyframes cookiePulse {
     0%   { transform: scale(1); }
     50%  { transform: scale(1.08); }
     100% { transform: scale(1); }
   }
   .cookie-fab:hover {
     transform: scale(1.12) !important;
     box-shadow: 0 12px 30px rgba(0,0,0,.28);
   }
   .cookie-banner {
     position: fixed;
     left: 50%;
     transform: translateX(-50%) translateY(100%);
     bottom: 0;
     width: 100%;
     max-width: 900px;
     opacity: 0;
     transition: transform .45s ease, opacity .45s ease;
     z-index: 9998;
   }

   .cookie-banner.is-open {
     transform: translateX(-50%) translateY(0);
     opacity: 1;
   }
   #cookie-banner {
     position: fixed !important;
     left: 50% !important;
     bottom: 0 !important;

     transform: translateX(-50%) translateY(100%) !important;
     opacity: 0 !important;

     transition: transform .45s ease, opacity .45s ease !important;
     pointer-events: none !important;
     z-index: 9998 !important;
   }

   #cookie-banner.is-visible {
     transform: translateX(-50%) translateY(0) !important;
     opacity: 1 !important;
     pointer-events: auto !important;
   }

   #cookie-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    backdrop-filter: blur(2px);
    z-index: 9998;
  
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  
    transition: opacity .35s ease;
  }
  
  #cookie-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
   .cookie-banner__inner {
     margin-bottom: 40px;  
   }
   html[data-theme="dark"] .cookie-banner {
     border: 1px solid rgba(246, 196, 83, 0.35) !important; /* #F6C453 mit leichter Transparenz */
   }
   html[data-theme="dark"] .cookie-fab {
     background: #F6C453 !important;
     border: 1px solid rgba(0,0,0,0.25); /* leichter Kontrast */
   }
   .cookie-switch--locked {
     opacity: 0.55;
     pointer-events: none;
   }

   .cookie-switch--locked .cookie-switch__slider {
     background: var(--accent, #35577B);
   }


   @media (max-width: 600px) {
     .cookie-banner__buttons {
       flex-direction: column;
       align-items: stretch;
     }

     .cookie-btn {
       width: 100%;
       text-align: center;
     }
   }

   @media (min-width: 601px) and (max-width: 900px) {
     .cookie-banner__buttons {
       flex-wrap: wrap;
       justify-content: center;
     }

     .cookie-btn {
       flex: 1 1 45%;   /* ungefähr halbe Breite */
       min-width: 140px;
     }
   }

   @media (min-width: 901px) {
     .cookie-banner__buttons {
       flex-direction: row;
       flex-wrap: nowrap;
       justify-content: center;
     }

     .cookie-btn {
       width: auto;
     }
   }
   .cookie-banner__buttons {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     gap: 0.5rem !important;
     flex-wrap: nowrap !important;

     width: 100% !important;
     max-width: 600px !important;
     margin: 0.8rem auto 0 !important;
     text-align: center !important;
   }

   .cookie-btn {
     border-radius: 999px;
     padding: 0.45rem 0.9rem;
     font-size: 0.85rem;
     border: 1px solid transparent;
     cursor: pointer;
     white-space: nowrap;
   }
   @media (max-width: 600px) {
     .cookie-banner__buttons {
       flex-direction: column !important;
       align-items: stretch !important;
     }

     .cookie-btn {
       width: 100% !important;
       text-align: center !important;
     }
   }

   @media (min-width: 601px) and (max-width: 900px) {
     .cookie-banner__buttons {
       flex-wrap: wrap !important;
       justify-content: center !important;
     }

     .cookie-btn {
       flex: 1 1 45% !important;
       min-width: 150px;
     }
   }

   @media (min-width: 901px) {
     .cookie-banner__buttons {
       flex-direction: row !important;
       flex-wrap: nowrap !important;
       justify-content: center !important;
     }

     .cookie-btn {
       width: auto !important;
     }
   }
   .cookie-banner__buttons {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     gap: 0.5rem !important;

     flex-wrap: wrap !important;       
     width: 100% !important;
     max-width: 600px !important;
     margin: 0.8rem auto 0 !important;
     text-align: center !important;
   }

   .cookie-btn {
     flex: 0 1 auto !important;
     min-width: 170px !important;      
     white-space: nowrap !important;
   }

   @media (max-width: 480px) {
     .cookie-banner__buttons {
       flex-direction: column !important;
       align-items: stretch !important;
     }

     .cookie-btn {
       width: 100% !important;
       min-width: 0 !important;
     }
   }
   .cookie-banner__buttons {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     gap: 0.6rem !important;

     flex-wrap: wrap !important;     
     width: 100% !important;
     max-width: 620px !important;
     margin: 0.9rem auto 0 !important;
   }

   .cookie-btn {
     flex: 0 0 auto !important;
     min-width: 190px !important;     
     white-space: nowrap !important;
   }

   @media (max-width: 420px) {
     .cookie-btn {
       width: 100% !important;
       min-width: 0 !important;
     }
   }
   #cookie-banner {
    position: fixed;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%) translateY(40px);
    opacity: 0;
    pointer-events: none;
  
    transition: transform .45s ease, opacity .45s ease;
    z-index: 9999;
  }
  
  #cookie-banner.is-visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  

   @media (max-width: 940px) {
     #cookie-banner {
       width: 90vw !important;     /* 90% der Viewport-Breite */
       max-width: 90vw !important;
     }
   }

   @media (max-width: 520px) {
     #cookie-banner {
       width: 94vw !important;
       max-width: 94vw !important;
     }
   }
   #cookie-banner {
     position: fixed !important;
     left: 50% !important;
     bottom: 0 !important;
     transform: translateX(-50%) translateY(100%) !important;
     opacity: 0 !important;
     pointer-events: none !important;
     z-index: 9998 !important;

     width: 900px !important;      /* deine “Designbreite” */
     max-width: 900px !important;
   }

   #cookie-banner.is-visible {
     transform: translateX(-50%) translateY(0) !important;
     opacity: 1 !important;
     pointer-events: auto !important;
   }

   @media (max-width: 940px) {
     #cookie-banner {
       width: 90vw !important;     /* 90% der Viewport-Breite */
       max-width: 90vw !important;
     }
   }

   @media (max-width: 520px) {
     #cookie-banner {
       width: 94vw !important;
       max-width: 94vw !important;
     }
   }
   .cookie-banner__buttons::before,
   .cookie-banner__buttons::after,
   .cookie-banner__links::after,
   .cookie-banner hr,
   #cookie-banner::before,
   #cookie-banner::after {
     content: none !important;
     display: none !important;
   }

   .cookie-banner__links {
     position: relative !important;
     display: flex !important;
     justify-content: center !important;
     gap: 3rem !important;

     margin-top: 0.1rem !important;
     padding-top: 0.1rem !important;
     padding-bottom: 0.3rem;
     margin-bottom: 0.3rem;
     border-top: 0.5px !important;
   }

   .cookie-banner__links::before {
     content: "" !important;
     position: absolute !important;
     top: 0 !important;
     left: 50% !important;
     transform: translateX(-50%) !important;

     width: 88% !important;        /* passt sich dem Banner an */
     max-width: 560px !important;  /* Deckel für große Screens */
     height: 0.5px !important;

     background: #d1d5db !important;
     border-radius: 1px !important;
   }
   .cookie-banner__inner {
     padding: 1.6rem 2rem 1.5rem !important;
   }

   .cookie-banner__title {
     margin-bottom: 1rem !important;
   }

   .cookie-banner__text-wrap {
     margin-top: 0.6rem !important;
     margin-bottom: 0.8rem !important;
   }

   .cookie-banner__text {
     margin: 0.4rem 0 0 !important;
     line-height: 1.45 !important;
   }

   .cookie-banner__buttons {
     margin-top: 1.0rem !important;
   }

   .cookie-banner__links {
     margin-top: 1.2rem !important;
     padding-top: 0.75rem !important;
   }

   .cookie-banner__links::before {
     top: 0 !important;
   }

   .cookie-banner__buttons {
     display: flex !important;
     justify-content: center !important;
     align-items: center !important;
     gap: 0.8rem !important;

     flex-wrap: wrap !important;          /* darf umbrechen */
     width: 100% !important;
     margin-top: 1.1rem !important;
   }

   .cookie-btn {
     flex: 0 0 auto !important;
     min-width: 210px !important;         
     white-space: nowrap !important;
   }

   @media (max-width: 420px) {
     .cookie-banner__buttons {
       flex-direction: column !important;
       align-items: stretch !important;
     }

     .cookie-btn {
       width: 100% !important;
       min-width: 0 !important;
     }
   }
   @media (max-width: 700px) {
     .cookie-banner__buttons {
       display: flex !important;
       flex-direction: column !important;
       align-items: stretch !important;
       gap: 0.6rem !important;
     }

     .cookie-btn {
       width: 100% !important;
       flex: none !important;
       min-width: 0 !important;
       white-space: nowrap !important;
     }
   }

   @media (min-width: 700px) and (max-width: 1023px) {
     .cookie-banner__buttons {
       display: flex !important;
       flex-wrap: wrap !important;
       justify-content: center !important;
       align-items: center !important;
       gap: 0.7rem !important;
     }

     .cookie-btn {
       flex: none !important;
       min-width: 210px !important; /* hier kannst du bei Bedarf spielen */
       white-space: nowrap !important;
     }
   }

   @media (min-width: 1024px) {
     .cookie-banner__buttons {
       display: flex !important;
       flex-wrap: nowrap !important;        
       justify-content: center !important;
       align-items: center !important;
       gap: 0.75rem !important;
     }

     .cookie-btn {
       flex: 1 1 0 !important;              /* dürfen kleiner werden */
       min-width: 0 !important;             /* alte min-width überschreiben */
       white-space: nowrap !important;      /* Text bleibt einzeilig */
     }
   }
   .cookie-banner__buttons {
     margin-top: 0.6rem !important;   /* vorher größer */
   }

   .cookie-banner__links {
     margin-top: 0.9rem !important;   /* Abstand vor Linie */
     padding-top: 0.6rem !important;  /* Abstand Linie → Links */
   }

   .cookie-banner__links::before {
     height: 0.5px !important;
   }
   .cookie-banner__buttons {
     padding-bottom: 0.7rem !important;   /* vorher größer → Linie rückt hoch */
   }

   .cookie-banner__links {
     margin-top: 0.6rem !important;       /* weniger Abstand von oben */
     padding-top: 0.5rem !important;      /* Linie näher an Buttons */
   }
   .cookie-banner__buttons::before {
     top: 42% !important;   /* ← vorher 50% */
   }

   .cookie-banner__links::before {
     top: -5px !important;  /* ← zieht Linie leicht nach oben */
   }
   #cookie-banner {
     position: fixed !important;
     left: 50% !important;
     bottom: 0 !important;
     transform: translateX(-50%) translateY(40px) !important;
     opacity: 0 !important;
     pointer-events: none !important;
     z-index: 9998 !important;
     transition: transform 0.45s ease-out, opacity 0.45s ease-out !important;
   }

   #cookie-overlay {
     opacity: 0 !important;
     visibility: hidden !important;
     transition: opacity 0.35s ease-out !important;
   }

   #cookie-overlay.is-visible {
     opacity: 1 !important;
     visibility: visible !important;
   }

   #cookie-banner.is-visible {
     transform: translateX(-50%) translateY(0) !important;
     opacity: 1 !important;
     pointer-events: auto !important;
   }

   #cookie-banner.is-visible .cookie-banner__inner {
     animation: cookiePopIn 0.4s ease-out;
   }

   @media (prefers-reduced-motion: reduce) {
     #cookie-banner,
     #cookie-overlay {
       transition: none !important;
     }
     #cookie-banner.is-visible .cookie-banner__inner {
       animation: none !important;
     }
   }

   @keyframes cookiePopIn {
     from {
       transform: translateY(10px) scale(0.97);
       opacity: 0;
     }
     to {
       transform: translateY(0) scale(1);
       opacity: 1;
     }
   }
   .ds-img--light,
   .ds-img--dark {
     display: none !important;
   }

   html[data-theme="light"] .ds-img--light {
     display: block !important;
   }

   html[data-theme="dark"] .ds-img--dark {
     display: block !important;
   }

   .accessibility-page .section,
   .accessibility-page .gallery-wrap {
     width: 100%;
     max-width: none;
   }

   .accessibility-page h1,
   .accessibility-page h2,
   .accessibility-page p,
   .accessibility-page ul {
     max-width: none;
     width: 100%;
   }
   .page-barrierefreiheit .section.tone-2.has-sep {
     padding-top: 4rem; /* ggf. anpassen, z.B. 4.5rem */
   }

   .page-barrierefreiheit .bf-content {
     max-width: 1000px;          /* wie ein länglicher Textblock */
     margin: 2.5rem auto 4rem;  /* zentriert, Abstand nach oben/unten */
     padding: 0 1.5rem;         /* etwas Luft links/rechts für kleine Screens */
     line-height: 1.7;
   }

   .page-barrierefreiheit .bf-content h2 {
     margin-top: 2.4rem;
     margin-bottom: 0.6rem;
   }

   .page-barrierefreiheit .bf-content ul {
     margin-left: 1.5rem;
     margin-bottom: 1.5rem;
   }
   .cookie-modal__footer {
     padding-top: 25px;
     display: flex;
     justify-content: space-between;
     gap: 16px;          /* fixer Abstand zwischen Buttons */
   }

   .cookie-modal__footer button {
     flex: 1;            /* alle Buttons gleich breit */
   }
   .cookie-btn {
     display: inline-flex;
     align-items: center;     /* vertikal zentriert */
     justify-content: center; /* horizontal zentriert */
     text-align: center;
     white-space: nowrap;

   }
   .cookie-service__toggle {
     pointer-events: auto !important;
     cursor: pointer;
     position: relative;
     z-index: 5;
   }
   .cookie-service {
     pointer-events: auto;
   }
   .cookie-banner__title_one,
   .cookie-banner__title-content_one,
   .cookie-banner__title_one span {
     text-align: left;
     font-size: 14px;
     font-weight: 700; /* fett */
   }
   .cookie-modal__header {
     display: flex !important;
     align-items: center !important;
     justify-content: space-between !important;
     gap: 16px !important;
     padding-bottom: 12px !important;
   }

   .cookie-banner__title_one {
     margin: 0 !important;
   }

   .cookie-banner__title-content_one {
     display: flex !important;
     align-items: center !important;
     gap: 8px !important;
   }

   .cookie-modal__close {
     margin-left: auto !important;
     background: transparent !important;
     border: none !important;
     font-size: 20px !important;
     line-height: 1 !important;
     cursor: pointer !important;
     color: #374151 !important;
     padding: 4px !important;
   }

   .cookie-modal__close:hover {
     color: #111827 !important;
   }

   .cookie-modal__close {
     width: 32px !important;
     height: 32px !important;
     border-radius: 50% !important;
   }

   .cookie-modal__close:hover {
     background: rgba(0, 0, 0, 0.05) !important;
   }
   .cookie-banner__title_one span {
     font-size: 20px !important;   /* vorher kleiner → jetzt klar & präsent */
     font-weight: 600 !important;
     line-height: 1.2 !important;
   }

   .cookie-title-icon_one {
     width: 26px !important;
     height: 26px !important;
     flex-shrink: 0 !important;    /* verhindert Zusammendrücken */
   }

   .cookie-service--maps {
     border-top: 1px solid #e5e7eb !important;
   }

   .cookie-modal__header,
   .cookie-group,
   .cookie-service {
     border-color: #d3d9e3 !important; ;
   }

   .page-barrierefreiheit .bf-content {
     position: relative;
   }

   .page-barrierefreiheit .bf-illustration {
     position: absolute;
     top: 3.2rem;              /* ggf. feinjustieren */
     right: 4rem;              /* dort, wo dein rotes Quadrat war */
     width: 360px;
     max-width: 40%;
     aspect-ratio: 4 / 3;
     display: flex;
     align-items: center;
     justify-content: center;
     pointer-events: none;     /* Klicks gehen weiterhin zum Text */
   }

   .page-barrierefreiheit .bf-illustration-img {
     width: 70%;
     height: 100%;
     margin-top: 30%;
     object-fit: contain;
     display: block;
   }

   @media (max-width: 900px) {
     .page-barrierefreiheit .bf-illustration {
       position: static;
       margin: 2rem auto 0;
       width: 260px;
       margin-top: 30%;
       max-width: 70%;
       pointer-events: auto;
     }
   }

   .cookie-group__text,
   .cookie-service__desc,
   .cookie-service__body p {
     font-size: 0.95rem;     /* ca. 14.4px */
     line-height: 1.45;
   }

   :root[data-theme="dark"] .cookie-overlay {
     background: rgba(15, 23, 42, 0.75);
   }

   :root[data-theme="dark"] .cookie-banner,
   :root[data-theme="dark"] .cookie-modal__dialog {
     background: var(--panel);
     color: var(--text);
     border: 1px solid var(--stroke);
     box-shadow: 0 20px 40px rgba(0,0,0,0.45);
   }

   :root[data-theme="dark"] .cookie-banner__text,
   :root[data-theme="dark"] .cookie-modal__intro,
   :root[data-theme="dark"] .cookie-group__text,
   :root[data-theme="dark"] .cookie-service__desc,
   :root[data-theme="dark"] .cookie-service__meta,
   :root[data-theme="dark"] .cookie-group__title,
   :root[data-theme="dark"] .cookie-group__badge,
   :root[data-theme="dark"] .cookie-service__name,
   :root[data-theme="dark"] .cookie-service__more,
   :root[data-theme="dark"] .cookie-banner__title span{
     color: var(--text) !important;
   }
   :root[data-theme="dark"] .cookie-banner__title_one span {
     color: white !important;
   }
   :root[data-theme="dark"] .cookie-banner__links a,
   :root[data-theme="dark"] .cookie-service__meta a {
     color: var(--brand-2);
     text-decoration: underline;
     text-underline-offset: 2px;
   }

   :root[data-theme="dark"] .cookie-banner__links a:hover,
   :root[data-theme="dark"] .cookie-service__meta a:hover {
     color: var(--brand);
   }

   :root[data-theme="dark"] .cookie-btn {
     border-radius: 999px;
     font-weight: 600;
   }

   :root[data-theme="dark"] .cookie-btn--primary {
     background: var(--brand);
     color: #111827;
     border: 1px solid transparent;
     box-shadow: 0 10px 24px rgba(0,0,0,0.35);
   }

   :root[data-theme="dark"] .cookie-btn--primary:hover {
     filter: brightness(1.03);
     transform: translateY(-1px);
   }

   :root[data-theme="dark"] .cookie-btn--secondary {
     background: transparent;
     color: var(--text);
     border: 1px solid var(--stroke);
   }

   :root[data-theme="dark"] .cookie-btn--secondary:hover {
     background: rgba(148,163,184,0.12);
   }

   :root[data-theme="dark"] .cookie-btn--ghost {
     background: transparent;
     color: var(--text);
     border: 1px solid transparent;
   }

   :root[data-theme="dark"] .cookie-btn--ghost:hover {
     background: rgba(148,163,184,0.08);
   }

   :root[data-theme="dark"] .cookie-group {
     background: rgba(15, 23, 42, 0.78);

     border-color: #374151 !important;
   }

   :root[data-theme="dark"] .cookie-service__body {
     background: rgba(15, 23, 42, 0.9);
     border-radius: 10px;
     border: 1px solid rgba(148,163,184,0.5);
   }

   .cookie-fab-icon--light,
   .cookie-fab-icon--dark {
     display: none;
   }

   :root[data-theme="light"] .cookie-fab-icon--light {
     display: block;
   }

   :root[data-theme="dark"] .cookie-fab-icon--dark {
     display: block;
   }

   :root[data-theme="dark"] .cookie-banner__title-content span,
   :root[data-theme="dark"] .cookie-banner__title-content_one span {
     color: white !important; /* dein Gold im Dark-Mode */
   }

   :root[data-theme="dark"] .cookie-banner__text,
   :root[data-theme="dark"] .cookie-modal__intro,
   :root[data-theme="dark"] .cookie-group__text,
   :root[data-theme="dark"] .cookie-service__desc,
   :root[data-theme="dark"] .cookie-service__meta,
   :root[data-theme="dark"] .cookie-group__title,
   :root[data-theme="dark"] .cookie-group__badge {
     color: #ffffff !important;
   }

   /* Links im Cookie-Bereich: leicht goldig */
   :root[data-theme="dark"] .cookie-banner__links a,
   :root[data-theme="dark"] .cookie-service__meta a {
     color: var(--brand) !important;
     text-decoration: underline;
     text-underline-offset: 2px;
   }
   :root[data-theme="dark"] .cookie-banner__links a:hover,
   :root[data-theme="dark"] .cookie-service__meta a:hover {
     color: #ffd98c !important; /* etwas helleres Gold beim Hover */
   }
   :root[data-theme="dark"] .cookie-banner__inner {
     background: var(--panel);              /* gleiche dunkle Fläche wie deine Cards/Header */
     color: #ffffff;                        /* Grundtext weiß */
     border-radius: 22px;
     border: 1px solid #374151;
     box-shadow: 0 30px 80px rgba(0,0,0,0.7);
   }


   :root[data-theme="dark"] .cookie-banner__title-content span {
     color: white !important;        /* dein Gold */
   }

   :root[data-theme="dark"] .cookie-banner__text,
   :root[data-theme="dark"] .cookie-banner__links a {
     color: #ffffff !important;
   }


   #cookie-banner.cookie-banner {
     border: none !important;
     box-shadow: none !important;
     outline: none !important;
     background: transparent !important;
   }
   .cookie-title-icon {
     content: url("images/cookies.png"); /* Icon für hellen Hintergrund */
   }

   :root[data-theme="dark"] .cookie-title-icon {
     content: url("images/cookies_gold.png"); /* Icon für dunklen Hintergrund */
   }

   :root[data-theme="dark"] .cookie-banner__title::before,
   :root[data-theme="dark"] .cookie-banner__title::after {
     content: "" !important;
     flex: 1 1 0 !important;      /* beide Seiten flexibel, gleich lang */
     height: 2px !important;
     background: #e5e7eb !important;
   }
   :root[data-theme="dark"] .cookie-banner__title::before,
   :root[data-theme="dark"] .cookie-banner__title::after {
     content: "" !important;
     flex: 1 1 0 !important;
     height: 1px !important;
     background: #374151 !important;  /* gleiche Farbe wie Lightmode */
   }
   .cookie-group {
     margin-top: 15px;

   }
   .cookie-service:first-of-type {
     border-bottom: 1px solid #e5e7eb !important;
     padding-bottom: 20px !important;
     margin-bottom: 20px !important;
   }
   .map-embed iframe + .map-placeholder {
     display: none;
   }
   .map-embed iframe + .map-placeholder {
     display: none;
   }
   .recaptcha-disabled-note {
     font-size: 1rem;
     color: #374151;
     margin: 0.6rem 0 0.4rem;
     line-height: 1.4;
   }
   [data-theme="dark"] .decora-map-icon-wrap {
     background: #0f1a30 !important;
   }

   [data-theme="dark"] .decora-map-note,
   [data-theme="dark"] .decora-map-icon-wrap div {
     color: #d1d5db !important;
   }
   [data-theme="dark"] .cookie-group:first-of-type {
     border-color: #374151 !important;
   }
   [data-theme="dark"] .cookie-modal__header{
     border-color: #374151 !important;
   }

   [data-theme="dark"] .cookie-service{
     border-color: #374151 !important;
   }
   .cookie-banner__title::before {
     transform: translateY(-4px) !important;
     height: 1px !important;
   }
   .cookie-banner__title::before {
     content: "";
     display: block;
     width: 60%;
     height: 2px !important;
     background: #e5e7eb !important;
     margin: 8px auto 0;
     border-radius: 2px;
   }
   [data-theme="dark"] .cookie-banner__links::before {
     background: #374151 !important;
   }
   [data-theme="dark"] .cookie-banner__buttons{
     border-color: #374151 !important;
   }
   .hero-title {
     font-size: 3rem;
   }

   /* Tablet */
   @media (max-width: 1024px) {
     .hero-title {
       font-size: 2.4rem;
     }
   }

   /* Mobile */
   @media (max-width: 768px) {
     .hero-title {
       font-size: 1.9rem;
     }
   }
   @media (max-width: 970px) {

     .nav {
       position: absolute;
       top: var(--header-height, 70px);
       left: 0;
       right: 0;

       display: flex;
       flex-direction: column;
       align-items: stretch;

       background: var(--panel);
       padding: 0 1.4rem;

       opacity: 0;
       transform: translateY(-8px);
       pointer-events: none;
       transition: opacity .2s ease, transform .2s ease;

       z-index: 9000;
     }

     .nav.is-open {
       opacity: 1;
       transform: translateY(0);
       pointer-events: auto;
     }

     .nav-link,
     .dropdown-toggle {
       padding: 1rem 0;
       text-align: left;
       font-size: 1.05rem;
       width: 100%;
     }

     .nav-link + .nav-link,
     .nav-item + .nav-item {
       border-top: 1px solid rgba(0,0,0,0.12);
     }

     html[data-theme="dark"] .nav-link + .nav-link,
     html[data-theme="dark"] .nav-item + .nav-item {
       border-top: 1px solid rgba(255,255,255,0.18);
     }

     .dropdown {
       display: none;
       flex-direction: column;
       margin-top: .3rem;
       padding-left: .9rem;   /* leicht nach rechts */
     }

     .nav-item.open .dropdown {
       display: flex;
     }

     .dropdown a {
       padding: .55rem 0;
       font-size: .95rem;
       opacity: .9;
     }
   }
   @media (max-width: 1325px) {
     .lang-switch {
       display: none;
     }

     .nav .lang-switch {
       display: flex;
       gap: .75rem;
       margin-top: 1rem;
     }
   }
   @media (max-width: 1310px) {
     .nav-center {
       display: none;
     }

     .nav-toggle {
       display: inline-flex;
     }
   }
   .header-mail .mail-text {
     display: flex;
   }

   .header-mail .mail-icon {
     display: none;
   }
   @media (max-width: 750px) {
     .header-mail .mail-text {
       display: none;
     }

     .header-mail .mail-icon {
       display: none; /* erst mal alles aus */
     }
   }
   @media (max-width: 750px) {
     html[data-theme="light"] .header-mail .mail-icon-light {
       display: inline-block;
     }
   }

   @media (max-width: 750px) {
     html[data-theme="dark"] .header-mail .mail-icon-dark {
       display: inline-block;
     }
   }
   @media (max-width: 980px) {
     .nav-right {
       margin-left: auto;
       justify-content: flex-end;
     }
   }
   @media (max-width: 980px) {
     .nav-bar {
       display: flex;
       align-items: center;
       justify-content: space-between !important;
     }
   }
   .nav-toggle {
     position: relative;
     z-index: 10050;
     pointer-events: auto;
   }
   @media (max-width: 830px) {

     .footer-grid {
       display: grid;
       grid-template-columns: 1fr;
       gap: 1.5rem;
       text-align: center;
     }

     .foot-legal {
       display: grid;
       grid-template-columns: auto auto;
       justify-content: center;
       gap: 0.75rem 1rem;
     }

     .foot-legal a:nth-of-type(1) { grid-row: 1; } /* Datenschutz */
     .foot-legal a:nth-of-type(2) { grid-row: 1; } /* Impressum */
     .foot-legal a:nth-of-type(3) { grid-row: 2; } /* Hilfe */
     .foot-legal a:nth-of-type(4) { grid-row: 2; } /* Barrierefreiheit */

     .foot-legal .pipe {
       display: none;
     }

     .foot-legal a:nth-of-type(1)::after,
     .foot-legal a:nth-of-type(3)::after {
       content: " |";
       margin-left: 0.5rem;
     }

     .foot-brand {
       order: 2;
       display: flex;
       justify-content: center;
       margin-top: 1rem;
     }

     .foot-legal {
       order: 1;
     }
   }

   .contact-mini-grid {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 1.5rem;
   }
   @media (max-width: 1024px) {
     .contact-mini-grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
   @media (max-width: 640px) {
     .contact-mini-grid {
       grid-template-columns: 1fr;
     }
   }
   @media (max-width: 640px) {

     .contact-mini-grid {
       gap: 1.25rem;
     }

     .mini-card {
       text-align: left;
     }

     .contact-actions {
       justify-content: flex-start;
     }
   }
   @media (max-width: 830px) {
     .contact-mini-grid {
       grid-template-columns: 1fr;
     }
   }
   @media (max-width: 830px) {


     .mini-card {
       text-align: center;
       align-items: center;
     }

     .mini-title {
       text-align: center;
     }

     .mini-line {
       text-align: center;
     }

     .contact-actions {
       justify-content: center;
     }

     .mini-icon {
       margin-left: auto;
       margin-right: auto;
     }
   }
   .hero {
     position: relative;
     min-height: 100svh;
     overflow: hidden;
   }

   .hero-slideshow {
     position: absolute;
     inset: 0;
     z-index: 0;
   }

   .hero-center {
     position: relative;
     z-index: 2;

     min-height: 100svh;
     display: flex;
     align-items: center;      /* vertikal */
     justify-content: center;  /* horizontal */

     text-align: center;
   }

   .hero-copy {
     width: 100%;
     max-width: 1100px;
     padding: 0rem;
     margin-top: -65px;
   }

   /* Logo immer zentriert */
   .hero-wordmark {
     display: block;
     margin: 0 auto 1rem;
   }

   .services-line {
     display: flex;
     justify-content: center;
     gap: 1.5rem;
     flex-wrap: wrap;
   }

   @media (max-width: 779px) {

     .hero-title {
       text-align: center;
       line-height: 1.25;
     }

     .hero-title .accent {
       display: block; /* Umbruch erzwingen */
     }

     .services-line {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
       gap: 1rem 1.2rem;

       max-width: 380px;
       margin: 1.5rem auto 0; /* zentriert */
     }

     .services-line li {
       display: flex;
       justify-content: center;
     }

     .services-line a {
       width: 100%;
       text-align: center;
       padding: 0.75rem 0.5rem;
       border-radius: 999px;
       white-space: nowrap;
     }

  
    
     .hero-actions {
       flex-direction: column;
       align-items: center;
       gap: 0.9rem;
       margin-top: 2rem;
     }

     .hero-actions .btn {
       width: 100%;
       max-width: 214px;
     }
   }
   .hero-actions .btn:first-child {
     width: 100%;
     max-width: 95px;
   }

   .hero-wordmark-light {
     display: none !important;
   }

   .hero-wordmark-dark {
     display: block;
     margin: 0 auto 1rem;
   }
   ul, menu, dir {
     display: block;
     list-style-type: disc;
     margin-block-start: 2em;
     margin-block-end: 2em;
     padding-inline-start: 0px;
   }
   .hero-actions {
     display: flex;
     gap: 1rem;
     align-items: center; /* WICHTIG */
   }
   .hero-actions .btn {
     min-height: 48px;
     padding: 0 1.6rem;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     white-space: nowrap;
   }
   html[data-theme="light"] .hero-wordmark {
     filter: brightness(0) invert(1);
   }
   .hero-center.container {
     min-height: 635px;
   }
   .gallery-hero{ padding-top: clamp(0px, 8vh, 120px) !important; padding-bottom: clamp(10px, 4vh, 60px) !important; }
   .gallery-wrap{ margin-bottom: clamp(5px, 2vh, 20px); }

   .hero-center.container {
     transform: translateY(-20px);
   }
   .nav-bar {
    display: flex;
    align-items: center;
  }

  .nav-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
   
  }

  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  @media (max-width: 768px) {
    .nav-bar {
      padding-right: 12px;
     
    }
    
    .nav-right {
      margin-left: auto;
      position: fixed;
      right:5%;
    }
  }
#cookie-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .35s ease !important;
}

#cookie-overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#cookie-banner {
  opacity: 0 !important;
  pointer-events: none !important;
}

#cookie-banner.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 10000;

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

#cookie-modal.is-visible {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}



#cookie-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#cookie-overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#cookie-banner {
  opacity: 0 !important;
  pointer-events: none !important;
}

#cookie-banner.is-visible {
  opacity: 1 !important;
  pointer-events: auto !important;
}

#cookie-modal {
  display: none !important;
  pointer-events: none !important;
}

#cookie-modal.is-visible {
  display: block !important;
  pointer-events: auto !important;
}

#cookie-overlay {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#cookie-overlay.is-visible {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

#cookie-banner.is-visible {
  opacity: 1 !important;
  transform: translateX(-50%) translateY(0) !important;
  pointer-events: auto !important;
}

/* MODAL */
#cookie-modal {
  display: none !important;
  pointer-events: none !important;
}

#cookie-modal.is-visible {
  display: block !important;
  pointer-events: auto !important;
}

   #cookie-overlay {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .3s ease;
  }
  
  #cookie-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  
  #cookie-banner {
    opacity: 0;
    transform: translateX(-50%) translateY(40px);
    pointer-events: none;
    transition: transform .45s ease, opacity .45s ease;
  }
  
  #cookie-banner.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
  }
  
  #cookie-modal {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  
  #cookie-modal.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
#cookie-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 9998;
}

#cookie-banner {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;

  background: var(--surface, #ffffff); /* NICHT transparent */
  opacity: 1 !important;
  pointer-events: auto !important;

  border-radius: 16px;
}

#cookie-modal {
  position: fixed;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  z-index: 10000;

  background: var(--surface, #ffffff);
  opacity: 1 !important;
  pointer-events: auto !important;
}

#cookie-banner:not(.is-visible),
#cookie-modal:not(.is-visible),
#cookie-overlay:not(.is-visible) {
  display: none !important;
}
.hero-actions > a {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity 0.6s ease-out,
    transform 0.6s ease-out;
  pointer-events: none;
}

.hero-actions > a.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.hero-actions .hero-stats {
  margin-top: 24px;
}
.cookie-modal,
.cookie-modal_dialog {
  border-radius: 18px; /* oder 20–24px */
}

.cookie-modal__dialog {
  border-radius: 18px;
  background: #ffffff;
  max-width: 720px;
}

   .mobile-nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 320px;
    height: 100vh;
    transform: translateX(-100%);
    transition: transform .45s cubic-bezier(.4,0,.2,1);
    z-index: 10000;
    font-family: inherit;
  }
  
  .mobile-nav.is-open {
    transform: translateX(0);
  }
  
  :root[data-theme="light"] .mobile-nav {
    background-color: #ffffff;
    color: #000;
    border-right: 1px solid rgba(0,0,0,.12);
  }
  
  :root[data-theme="dark"] .mobile-nav {
    background-color: #0e172a;
    color: #fff;
    border-right: 1px solid rgba(255,255,255,.15);
  }
  
.mobile-close {
  position: absolute;
  top: 24px;      /* exakt gleich wie .mobile-nav-list padding */
  right: 24px;

  background: none;
  border: none;
  font-size: 24px;
  color: currentColor;
  cursor: pointer;
  z-index: 10;

  transition: transform .25s ease, opacity .2s ease;
}
.mobile-close:hover {
  transform: rotate(90deg) scale(1.1);
  opacity: .7;
}
.mobile-close:active {
  transform: rotate(90deg) scale(0.95);
}

  
.mobile-nav-list {
  list-style: none;
  margin: 0;
  padding: 24px; /* nur normaler Abstand */
}

    
  
  .mobile-nav-list > li {
    position: relative;
    padding-bottom: 12px;
    margin-bottom: 12px;
  }
  
  .mobile-nav-list > li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 10%;
    width: 80%;
    height: 1px;
    opacity: .25;
  }
  
  :root[data-theme="light"] .mobile-nav-list > li::after {
    background: rgba(0,0,0,.2);
  }
  
  :root[data-theme="dark"] .mobile-nav-list > li::after {
    background: rgba(255,255,255,.25);
  }
  
  .mobile-nav-list > li:last-child::after {
    display: none;
  }
  
  .mobile-nav-link,
  .mobile-dropdown-toggle {
    width: 100%;
    padding: 12px 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  
    font: inherit;
    font-size: 18px;
    line-height: 1.2;
  
    background: none;
    border: none;
    margin: 0;
  
    text-decoration: none;
    cursor: pointer;
  
    transition: transform .25s ease, color .2s ease;
  }
  
  :root[data-theme="dark"] .mobile-nav .mobile-nav-link,
  :root[data-theme="dark"] .mobile-nav .mobile-dropdown-toggle {
    color: #fff;
  }
  
  :root[data-theme="light"] .mobile-nav .mobile-nav-link,
  :root[data-theme="light"] .mobile-nav .mobile-dropdown-toggle {
    color: #000;
  }
  
  :root[data-theme="dark"] .mobile-nav .mobile-nav-link:hover,
  :root[data-theme="dark"] .mobile-nav .mobile-dropdown-toggle:hover {
    color: var(--brand);
    transform: translateY(-2px);
  }
  
  :root[data-theme="light"] .mobile-nav .mobile-nav-link:hover,
  :root[data-theme="light"] .mobile-nav .mobile-dropdown-toggle:hover {
    color: #35577B;
    transform: translateY(-2px);
    text-decoration: none;
  }
  
  .mobile-dropdown {
    list-style: none;
    padding-left: 12px;
    margin-top: 6px;
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
  }
  
.mobile-has-dropdown {
  margin-bottom: 12px;
  padding-bottom: 12px;
}

.mobile-has-dropdown > .mobile-dropdown {
  margin-top: 0;
  margin-bottom: 0px;
}

  .mobile-has-dropdown.is-open .mobile-dropdown {
    max-height: 900px;
  }
  
  .mobile-dropdown .mobile-nav-link {
    font-size: 15px;
    padding: 10px 0;      /* mehr Abstand zwischen Unterpunkten */
    line-height: 1.4;
    opacity: .85;
  }
  
  .mobile-dropdown .mobile-nav-link:hover {
    opacity: 1;
  }
  
  .mobile-arrow {
    width: 6px;
    height: 6px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform .25s ease;
  }
  
  .mobile-has-dropdown.is-open .mobile-arrow {
    transform: rotate(45deg);
  }
  
  .nav-toggle.active {
    opacity: 0;
    pointer-events: none;
  }
.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
}

.burger {
  width: 24px;
  height: 2px;
  background: #000;
  position: relative;
  transition: background .25s ease;
}
:root[data-theme=dark] .burger{background: #fff;}
:root[data-theme=dark] .burger::before{background: #fff;}
:root[data-theme=dark] .burger:after{background: #fff;}


.burger::before,
.burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
  transition: transform .25s ease, top .25s ease, opacity .2s ease;
}

.burger::before {
  top: -7px;
}

.burger::after {
  top: 7px;
}

.nav-toggle.active .burger {
  background: transparent;
}

.nav-toggle.active .burger::before {
  top: 0;
  transform: rotate(45deg);
}

.nav-toggle.active .burger::after {
  top: 0;
  transform: rotate(-45deg);
}
  .nav-toggle:active .burger {
  transform: scale(0.9);
}

.burger {
  transition:
    transform .12s ease,
    background .25s ease;
}
:root[data-theme=dark] .image-src{ content: url("images/logo_text-gold.png");}
:root[data-theme=light] .image-src{ content: url("images/logo_text-blue.png");}



@media (max-width: 700px) {
  .cookie-modal__footer {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  .cookie-modal__footer button {
    width: 100% !important;
    flex: none !important;
  }
}
@media (max-width: 1100px) and (min-width: 780px) {

  .services-line {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 Spalten */
    gap: 1rem 1.2rem;

    max-width: 900px;
    margin: 1.5rem auto 0;
  }

  .services-line li {
    display: flex;
    justify-content: center;
  }
  }