/* ============================================================
   PICOBELLO Gebäudeservice GmbH — Stylesheet
   Palette aus dem Logo abgeleitet: Marineblau der Wortmarke,
   Signalblau des Bergsymbols, Aqua als Zweitakzent.
   Schriften lokal eingebunden (kein Google-Fonts-CDN, DSGVO).
   ============================================================ */

/* ---------------------------------------------------------- Schriften */
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/bricolage-grotesque-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Bricolage Grotesque";
  font-style:normal;
  font-display:swap;
  font-weight:200 800;
  src:url("../fonts/bricolage-grotesque-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{ font-family:"Karla"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/karla-latin-400-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:500; font-display:swap;
  src:url("../fonts/karla-latin-500-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/karla-latin-600-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/karla-latin-700-normal.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:400; font-display:swap;
  src:url("../fonts/karla-latin-ext-400-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:600; font-display:swap;
  src:url("../fonts/karla-latin-ext-600-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face{ font-family:"Karla"; font-style:normal; font-weight:700; font-display:swap;
  src:url("../fonts/karla-latin-ext-700-normal.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

/* ---------------------------------------------------------- Tokens */
:root{
  color-scheme: light;

  --navy:      #0e1c33;
  --navy-2:    #16294a;

  --blue:      #2f5fd0;
  --blue-deep: #22459a;
  --blue-lit:  #8fb0f5;
  --blue-soft: #e4ebfb;

  --aqua:       #14808e;   /* auf hellen Flaechen */
  --aqua-panel: #339dab;   /* auf dunklen Panels */

  --paper:     #f4f6fa;
  --paper-2:   #e9edf5;
  --surface:   #ffffff;
  --line:      #dce2ee;
  --line-2:    #c3ccdf;

  --ink:       #14203a;
  --body:      #46536b;
  --muted:     #626d84;
  --muted-2:   #646b7a;

  --ok:        #1a7f5a;
  --err:       #c0392b;

  --step--1: clamp(.81rem, .78rem + .12vw, .87rem);
  --step-0:  clamp(1rem, .96rem + .18vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.08rem + .34vw, 1.36rem);
  --step-2:  clamp(1.42rem, 1.26rem + .64vw, 1.82rem);
  --step-3:  clamp(1.78rem, 1.48rem + 1.2vw, 2.55rem);
  --step-4:  clamp(2.15rem, 1.65rem + 2.05vw, 3.5rem);
  --step-5:  clamp(2.55rem, 1.6rem + 3.8vw, 4.9rem);

  --gutter: clamp(1.15rem, .6rem + 2.4vw, 3rem);
  --bay: clamp(3.75rem, 2.2rem + 6vw, 7rem);
  --max: 1260px;

  --r-sm: 6px;
  --r-md: 12px;
  --r-lg: 22px;

  --shadow: 0 26px 60px -34px rgba(14,28,51,.55);

  /* Flaechen, die in beiden Schemata eigene Werte brauchen */
  --panel:      #0e1c33;   /* dunkle Sektionen: Hero, Footer, Menue, CTA */
  --panel-2:    #16294a;
  --on-panel:   #ffffff;
  --on-panel-2: #b7c4d9;
  --on-panel-3: #a3b1c8;
  --panel-line: rgba(255,255,255,.14);
  --panel-hover:rgba(255,255,255,.09);

  --btn-light-bg:  #ffffff;
  --btn-light-ink: #0e1c33;
  --btn-light-hover-bg:  #e4ebfb;
  --btn-light-hover-ink: #22459a;
  --on-blue:       #ffffff;

  --ok-bg:   #e6f5ee;  --ok-line:  #b7e2ce;
  --err-bg:  #fbeae8;  --err-line: #f2c6c1;
  --todo-bg: #fff8e6;  --todo-line:#f0dca8;
  --todo-ink:#6b5300;  --todo-ink2:#4d3c00; --todo-mark:#d9a300;

  --header-bg: rgba(244,246,250,.92);
  --menubtn-bg: #0e1c33;
}

/* ============================================================
   Dunkles Farbschema
   Standard ist die Systemeinstellung; eine im Kopfbereich getroffene
   Auswahl setzt data-theme am <html> und hat Vorrang.
   ============================================================ */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;

    --navy:      #16263c;
    --navy-2:    #1d3358;

    --blue:      #6d9bf5;
    --blue-deep: #9dbdfa;
    --blue-lit:  #a8c4fb;
    --blue-soft: #1b2c48;

    --aqua:       #56c6d6;
    --aqua-panel: #56c6d6;

    --paper:     #0a121e;
    --paper-2:   #0e1826;
    --surface:   #121f30;
    --line:      #22334a;
    --line-2:    #354964;

    --ink:       #e8eff8;
    --body:      #b0bed2;
    --muted:     #97a5ba;
    --muted-2:   #7f8da2;

    --ok:        #4ecb9b;
    --err:       #ff8f7a;

    --shadow: 0 26px 60px -34px rgba(0,0,0,.8);

    --panel:      #12203a;
    --panel-2:    #1a2c4a;
    --on-panel:   #eef3fb;
    --on-panel-2: #aebdd2;
    --on-panel-3: #9dabc2;
    --panel-line: rgba(255,255,255,.13);
    --panel-hover:rgba(255,255,255,.08);

    --btn-light-bg:  #dce7fb;
    --btn-light-ink: #0b1524;
    --btn-light-hover-bg:  #ffffff;
    --btn-light-hover-ink: #22459a;
    --on-blue:       #08121f;

    --ok-bg:   #10281f;  --ok-line:  #1f4d3a;
    --err-bg:  #2c1512;  --err-line: #5a2a22;
    --todo-bg: #2a2312;  --todo-line:#4d4020;
    --todo-ink:#e8d49a;  --todo-ink2:#f5e6be; --todo-mark:#d9a300;

    --header-bg: rgba(10,18,30,.9);
    --menubtn-bg: #2f5fd0;
  }
}

/* Ausdrueckliche Auswahl im Kopfbereich - gewinnt in beide Richtungen */
:root[data-theme="dark"]{
    color-scheme: dark;

    --navy:      #16263c;
    --navy-2:    #1d3358;

    --blue:      #6d9bf5;
    --blue-deep: #9dbdfa;
    --blue-lit:  #a8c4fb;
    --blue-soft: #1b2c48;

    --aqua:       #56c6d6;
    --aqua-panel: #56c6d6;

    --paper:     #0a121e;
    --paper-2:   #0e1826;
    --surface:   #121f30;
    --line:      #22334a;
    --line-2:    #354964;

    --ink:       #e8eff8;
    --body:      #b0bed2;
    --muted:     #97a5ba;
    --muted-2:   #7f8da2;

    --ok:        #4ecb9b;
    --err:       #ff8f7a;

    --shadow: 0 26px 60px -34px rgba(0,0,0,.8);

    --panel:      #12203a;
    --panel-2:    #1a2c4a;
    --on-panel:   #eef3fb;
    --on-panel-2: #aebdd2;
    --on-panel-3: #9dabc2;
    --panel-line: rgba(255,255,255,.13);
    --panel-hover:rgba(255,255,255,.08);

    --btn-light-bg:  #dce7fb;
    --btn-light-ink: #0b1524;
    --btn-light-hover-bg:  #ffffff;
    --btn-light-hover-ink: #22459a;
    --on-blue:       #08121f;

    --ok-bg:   #10281f;  --ok-line:  #1f4d3a;
    --err-bg:  #2c1512;  --err-line: #5a2a22;
    --todo-bg: #2a2312;  --todo-line:#4d4020;
    --todo-ink:#e8d49a;  --todo-ink2:#f5e6be; --todo-mark:#d9a300;

    --header-bg: rgba(10,18,30,.9);
    --menubtn-bg: #2f5fd0;
  }


*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; overflow-x:clip; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0; overflow-x:clip; max-width:100vw;
  background:var(--paper);
  color:var(--ink);
  font-family:"Karla","Segoe UI",system-ui,-apple-system,sans-serif;
  font-size:var(--step-0);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4{
  font-family:"Bricolage Grotesque","Karla",system-ui,sans-serif;
  font-weight:700;
  line-height:1.05;
  letter-spacing:-.025em;
  text-wrap:balance;
  overflow-wrap:break-word;
  margin:0;
}
p{ margin:0; }
a{ color:inherit; }
img{ max-width:100%; display:block; }
ul,ol{ margin:0; padding:0; list-style:none; }

:where(a,button,input,textarea,select,summary):focus-visible{
  outline:2px solid var(--blue);
  outline-offset:3px;
  border-radius:4px;
}

.wrap{ width:100%; max-width:var(--max); margin-inline:auto; padding-inline:var(--gutter); }
.wrap--narrow{ max-width:820px; }

.eyebrow{
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--blue); margin:0;
}
.eyebrow--lit{ color:var(--blue-lit); }

.lede{ font-size:var(--step-1); line-height:1.55; color:var(--body); max-width:56ch; }
.body-text{ color:var(--body); max-width:66ch; }

.visually-hidden{
  position:absolute!important; width:1px; height:1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
}

/* ---------------------------------------------------------- Buttons */
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.92rem 1.6rem;
  font-family:"Karla",sans-serif;
  font-size:var(--step-0); font-weight:700;
  text-decoration:none;
  border:1.5px solid transparent;
  border-radius:100px;
  cursor:pointer;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.btn:hover{ transform:translateY(-1px); }
.btn svg{ flex:none; }
.btn--solid{ background:var(--blue); color:var(--on-blue); }
.btn--solid:hover{ background:var(--blue-deep); color:var(--on-blue); }
.btn--light{ background:var(--btn-light-bg); color:var(--btn-light-ink); }
.btn--light:hover{ background:var(--btn-light-hover-bg); color:var(--btn-light-hover-ink); }
.btn--outline{ border-color:var(--line-2); color:var(--ink); background:transparent; }
.btn--outline:hover{ border-color:var(--ink); background:var(--ink); color:var(--paper); }
.btn--outline-lit{ border-color:var(--panel-line); color:var(--on-panel); background:transparent; }
.btn--outline-lit:hover{ background:var(--panel-hover); border-color:var(--on-panel); }

/* ---------------------------------------------------------- Kopfbereich */
.header{
  position:sticky; top:0; z-index:60;
  background:var(--header-bg);
  backdrop-filter:saturate(1.5) blur(12px);
  border-bottom:1px solid var(--line);
}
.header__bar{ display:flex; align-items:center; gap:1rem; min-height:88px; }
.brand{ margin-right:auto; display:flex; align-items:center; text-decoration:none; }
.brand img{ height:58px; width:auto; }
@media (max-width:560px){ .brand img{ height:46px; } }

/* Logofassung passend zum Farbschema */
.brand__dark{ display:none; }
:root[data-theme="dark"] .brand__light{ display:none; }
:root[data-theme="dark"] .brand__dark{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brand__light{ display:none; }
  :root:not([data-theme="light"]) .brand__dark{ display:block; }
}
/* Im Menue und im Fussbereich immer die helle Fassung */
.menu .brand__dark,.footer .brand__dark{ display:block; }
.menu .brand__light{ display:none; }

.header__tools{ display:flex; align-items:center; gap:.55rem; }

.header__tel{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.6rem 1.05rem; margin-right:.25rem;
  border:1px solid var(--line-2); border-radius:100px;
  font-weight:600; font-size:var(--step--1);
  color:var(--ink); text-decoration:none; white-space:nowrap;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.header__tel:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
@media (max-width:760px){ .header__tel span{ display:none; } .header__tel{ padding:.6rem .75rem; } }
@media (max-width:420px){ .header__tel{ display:none; } }

/* runder Schalter (Farbschema) */
.iconbtn{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  border:1px solid var(--line-2); border-radius:50%;
  background:transparent; color:var(--ink); cursor:pointer; padding:0;
  transition:border-color .18s ease, color .18s ease, background-color .18s ease;
}
.iconbtn:hover{ border-color:var(--blue); color:var(--blue); background:var(--blue-soft); }
.themebtn .ic-moon{ display:none; }
.themebtn .ic-sun{ display:block; }
/* Zeigt, wohin der Klick führt: bei hellem Schema den Mond, bei dunklem die Sonne */
:root:not([data-theme="dark"]) .themebtn .ic-sun{ display:none; }
:root:not([data-theme="dark"]) .themebtn .ic-moon{ display:block; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .themebtn .ic-moon{ display:none; }
  :root:not([data-theme="light"]) .themebtn .ic-sun{ display:block; }
}
:root[data-theme="dark"] .themebtn .ic-moon{ display:none; }
:root[data-theme="dark"] .themebtn .ic-sun{ display:block; }

/* Menütaste */
.menubtn{
  display:inline-flex; align-items:center; gap:.65rem;
  height:44px; padding:0 1.15rem 0 1rem;
  border:0; border-radius:100px;
  background:var(--menubtn-bg); color:#fff;
  font-family:inherit; font-size:var(--step--1); font-weight:700;
  letter-spacing:.02em; cursor:pointer;
  transition:background-color .18s ease, transform .18s ease;
}
.menubtn:hover{ background:var(--blue); color:var(--on-blue); transform:translateY(-1px); }
.menubtn__label{ white-space:nowrap; }
.menubtn__lines{ position:relative; display:block; width:17px; height:11px; }
.menubtn__lines span,
.menubtn__lines::before,
.menubtn__lines::after{
  content:""; position:absolute; left:0; width:17px; height:2px;
  background:currentColor; border-radius:2px;
}
.menubtn__lines::before{ top:0; }
.menubtn__lines span{ top:4.5px; width:12px; }
.menubtn__lines::after{ top:9px; }
.menubtn:hover .menubtn__lines span{ width:17px; }

.menubtn--close{ background:rgba(255,255,255,.14); color:#fff; }
.menubtn--close:hover{ background:rgba(255,255,255,.24); }
.menubtn__x{ position:relative; display:block; width:15px; height:15px; }
.menubtn__x::before,.menubtn__x::after{
  content:""; position:absolute; top:6.5px; left:0; width:15px; height:2px;
  background:currentColor; border-radius:2px;
}
.menubtn__x::before{ transform:rotate(45deg); }
.menubtn__x::after{ transform:rotate(-45deg); }

/* ---------------------------------------------------------- Menü (Overlay) */
.menu{
  position:fixed; inset:0; z-index:200; width:100%; max-width:100vw;
  background:radial-gradient(min(900px,110vw) circle at calc(100% + 16vw) -10%, rgba(47,95,208,.34), rgba(47,95,208,0) 62%) var(--panel);
  color:var(--on-panel);
  overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain;
  opacity:0; transition:opacity .22s ease;
}
.menu[hidden]{ display:none !important; }
.menu.is-open{ opacity:1; }

.menu__bar{ position:relative; z-index:2; border-bottom:1px solid var(--panel-line); }
.menu__barin{ display:flex; align-items:center; justify-content:space-between; gap:1rem; min-height:88px; }
.menu__barin .brand{ margin-right:0; }
.menu__barin .brand img{ height:58px; }
@media (max-width:560px){ .menu__barin .brand img{ height:46px; } }

.menu__inner{
  position:relative; z-index:2;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,.8fr);
  gap:clamp(2rem,1.2rem + 3vw,4rem);
  padding-block:clamp(2.25rem,1.4rem + 3vw,4rem) clamp(3rem,2rem + 4vw,5rem);
  align-items:start;
}
.menu__label{
  font-family:"Karla",sans-serif;
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--on-panel-3);
  margin:0 0 1.1rem;
  display:flex; align-items:center; gap:.6rem;
}
.menu__label--sp{ margin-top:2.25rem; }
.menu__count{
  font-size:.72rem; letter-spacing:0;
  background:var(--panel-hover); border:1px solid var(--panel-line);
  border-radius:100px; padding:.1rem .5rem; color:var(--on-panel-2);
}

.menu__main li a{
  display:block;
  font-family:"Bricolage Grotesque",sans-serif;
  font-weight:700; letter-spacing:-.025em;
  font-size:clamp(1.65rem,1.2rem + 1.7vw,2.5rem);
  line-height:1.18;
  color:var(--on-panel); text-decoration:none;
  padding:.22rem 0;
  transition:color .18s ease, transform .18s ease;
}
.menu__main li a:hover,
.menu__main li a:focus-visible{ color:var(--blue-lit); transform:translateX(5px); }
.menu__main li a[aria-current]{ color:var(--blue-lit); }
.menu__cta{ margin-top:2rem; background:var(--btn-light-bg); color:var(--btn-light-ink); }
.menu__cta:hover{ background:var(--btn-light-hover-bg); color:var(--btn-light-hover-ink); }

.menu__svc{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.1rem 1.5rem; }
.menu__svc li a{
  display:block; padding:.62rem 0;
  border-bottom:1px solid var(--panel-line);
  color:var(--on-panel); text-decoration:none;
  font-weight:600; font-size:var(--step-0);
  transition:color .18s ease, padding-left .18s ease;
}
.menu__svc li a span{
  display:block; font-weight:400; font-size:var(--step--1);
  color:var(--on-panel-3); margin-top:.1rem;
}
.menu__svc li a:hover,
.menu__svc li a:focus-visible{ color:var(--blue-lit); padding-left:.4rem; }
.menu__svc li a[aria-current]{ color:var(--blue-lit); }
@media (max-width:1100px){ .menu__svc{ grid-template-columns:minmax(0,1fr); } }

.menu__kontakt li{
  display:flex; gap:.8rem; align-items:flex-start;
  padding:.5rem 0; color:var(--on-panel-2); font-size:var(--step--1); line-height:1.5;
}
.menu__kontakt svg{ flex:none; margin-top:.25rem; color:var(--blue-lit); }
.menu__kontakt a{ color:var(--on-panel); text-decoration:none; border-bottom:1px solid var(--panel-line); }
.menu__kontakt a:hover{ border-color:var(--blue-lit); color:var(--blue-lit); }
.menu__legal li{ padding:.28rem 0; }
.menu__legal a{ color:var(--on-panel-2); text-decoration:none; font-size:var(--step--1); }
.menu__legal a:hover{ color:var(--blue-lit); }

.menu :where(a,button):focus-visible{ outline:2px solid var(--blue-lit); outline-offset:4px; }

@media (max-width:900px){
  .menu__inner{ grid-template-columns:minmax(0,1fr); gap:2.25rem; }
  .menu__svc{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:560px){ .menu__svc{ grid-template-columns:minmax(0,1fr); } }

/* Seite hinter dem offenen Menü nicht mitscrollen */
body.menu-open{ overflow:hidden; }

@media (prefers-reduced-motion: reduce){
  .menu{ transition:none; }
  .menu__main li a:hover, .menu__svc li a:hover{ transform:none; padding-left:0; }
}

/* ---------------------------------------------------------- Hero */
.hero{
  position:relative; background:var(--panel); color:var(--on-panel);
  padding-block:clamp(3.5rem,2rem + 6vw,6.5rem) clamp(6rem,4rem + 8vw,10rem);
  overflow:hidden;
}
.hero__arc{
  position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:clamp(50px,7vw,110px); display:block; color:var(--paper);
}
.hero__glow{
  position:absolute; pointer-events:none;
  width:min(780px,92vw); aspect-ratio:1; right:-14%; top:-38%;
  background:radial-gradient(circle, rgba(47,95,208,.42), rgba(47,95,208,0) 62%);
}
.hero .wrap{ position:relative; z-index:2; }
.hero__grid{
  display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,.85fr);
  gap:clamp(2rem,1rem + 3.4vw,4rem); align-items:center;
}
/* text-wrap:balance würde die manuellen Umbrüche im Hero neu verteilen */
.hero h1{ font-size:clamp(2.4rem, 1.45rem + 3.35vw, 4.25rem); font-weight:800; letter-spacing:-.035em; margin-block:1.25rem 1.4rem; text-wrap:normal; }
.hero h1 em{ font-style:normal; color:var(--blue-lit); }
.hero .lede{ color:var(--on-panel-2); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:2.1rem; }
@media (max-width:940px){ .hero__grid{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:360px){ .hero h1{ font-size:2.1rem; } }

.regions{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:2.4rem; }
.regions span{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.42rem .95rem; border:1px solid var(--panel-line);
  border-radius:100px; font-size:var(--step--1); font-weight:600; color:var(--on-panel-2);
}
.regions span::before{ content:""; width:.4rem; height:.4rem; border-radius:50%; background:var(--blue-lit); }

.hero__panel{
  background:var(--panel-hover);
  border:1px solid var(--panel-line);
  border-radius:var(--r-lg);
  padding:1.6rem 1.5rem 1.75rem;
  backdrop-filter:blur(6px);
}
.hero__panel h2{
  font-size:var(--step--1); font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; color:var(--blue-lit); margin-bottom:1.1rem;
}
.hero__panel li a{
  display:flex; align-items:baseline; justify-content:space-between; gap:1rem;
  padding:.62rem 0; border-bottom:1px solid var(--panel-line);
  text-decoration:none; font-weight:600;
  transition:padding-left .2s ease, color .2s ease;
}
.hero__panel li:last-child a{ border-bottom:0; }
.hero__panel li a:hover{ padding-left:.4rem; color:var(--blue-lit); }
.hero__panel .turnus{ font-size:var(--step--1); font-weight:500; color:var(--on-panel-3); white-space:nowrap; }
@media (max-width:400px){ .hero__panel li a{ flex-wrap:wrap; gap:.1rem .6rem; } .hero__panel .turnus{ white-space:normal; } }

/* ---------------------------------------------------------- Seitenkopf (Unterseiten) */
.pagehead{
  position:relative; background:var(--panel); color:var(--on-panel);
  padding-block:clamp(2.5rem,1.6rem + 3.5vw,4.5rem) clamp(4.5rem,3rem + 6vw,7rem);
  overflow:hidden;
}
.pagehead__glow{
  position:absolute; pointer-events:none;
  width:min(640px,92vw); aspect-ratio:1; right:-10%; top:-55%;
  background:radial-gradient(circle, rgba(47,95,208,.4), rgba(47,95,208,0) 62%);
}
.pagehead .wrap{ position:relative; z-index:2; }
.pagehead h1{ font-size:var(--step-4); font-weight:800; letter-spacing:-.032em; margin-block:1rem .95rem; max-width:20ch; }
.pagehead .lede{ color:var(--on-panel-2); }
.pagehead__arc{
  position:absolute; left:0; right:0; bottom:-1px;
  width:100%; height:clamp(40px,5vw,80px); display:block; color:var(--paper);
}
.pagehead--light{ background:var(--paper-2); color:var(--ink); }
.pagehead--light .pagehead__arc{ color:var(--paper); }
.pagehead--light .lede{ color:var(--body); }
.pagehead--light .breadcrumb a,.pagehead--light .breadcrumb{ color:var(--body); }

.breadcrumb{ font-size:var(--step--1); color:var(--on-panel-3); display:flex; flex-wrap:wrap; gap:.45rem; }
.breadcrumb a{ color:var(--on-panel-2); text-decoration:none; }
.breadcrumb a:hover{ color:var(--on-panel); text-decoration:underline; }
.breadcrumb span[aria-current]{ color:var(--on-panel); }

/* ---------------------------------------------------------- Kennzahlen */
.stats{ position:relative; margin-top:clamp(-4.5rem,-3rem - 3vw,-3rem); z-index:5; }
.stats__in{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); box-shadow:var(--shadow);
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); overflow:hidden;
}
.stat{ padding:1.85rem 1.4rem; border-right:1px solid var(--line); text-align:center; }
.stat:last-child{ border-right:0; }
.stat b{
  display:block; font-family:"Bricolage Grotesque",sans-serif;
  font-size:var(--step-3); font-weight:800; letter-spacing:-.04em; line-height:1;
  color:var(--blue); font-variant-numeric:tabular-nums;
}
.stat span{
  display:block; margin-top:.5rem; font-size:var(--step--1); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
}
@media (max-width:900px){
  .stats__in{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .stat{ border-bottom:1px solid var(--line); }
  .stat:nth-child(2n){ border-right:0; }
  .stat:last-child{ grid-column:1 / -1; border-bottom:0; }
}
@media (max-width:520px){ .stats__in{ grid-template-columns:minmax(0,1fr); } .stat{ border-right:0; } }

/* ---------------------------------------------------------- Sektionen */
.section{ padding-block:var(--bay); }
.section--white{ background:var(--surface); }
.section--paper2{ background:var(--paper-2); }
.section--tight{ padding-block:clamp(2.5rem,1.6rem + 3vw,4rem); }
/* Nach einem Seitenkopf reicht weniger Luft - der Bogen bringt schon Abstand mit */
.pagehead + .section{ padding-top:clamp(2.25rem,1.5rem + 2.2vw,3.25rem); }

.section__head{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.5rem,.8rem + 3vw,4rem); align-items:end;
  margin-bottom:clamp(2.25rem,1.4rem + 2.6vw,3.5rem);
}
.section__head h2{ font-size:var(--step-4); margin-top:.85rem; }
@media (max-width:820px){ .section__head{ grid-template-columns:minmax(0,1fr); align-items:start; } }

/* ---------------------------------------------------------- Über uns */
.about{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2rem,1rem + 4vw,5rem); align-items:center;
}
.about h2{ font-size:var(--step-3); margin-block:.85rem 1.3rem; max-width:20ch; }
.values{ display:grid; gap:1rem; }
.value{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.35rem 1.5rem; display:grid; grid-template-columns:auto minmax(0,1fr); gap:.3rem 1.15rem;
}
.value__ic{
  grid-row:span 2; width:42px; height:42px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue-deep); border-radius:12px;
}
.value__ic svg{ width:21px; height:21px; }
.value h3{ font-size:var(--step-1); align-self:end; }
.value p{ font-size:var(--step--1); color:var(--muted); line-height:1.6; }
@media (max-width:900px){ .about{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------- Leistungen */
.services{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.15rem; }
.service{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.6rem 1.5rem 1.5rem; display:flex; flex-direction:column; gap:.7rem;
  text-decoration:none;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.service:hover{ border-color:var(--blue-lit); box-shadow:var(--shadow); transform:translateY(-2px); }
.service__ic{ color:var(--blue); }
.service__ic svg{ width:30px; height:30px; }
.service h3{ font-size:var(--step-1); }
.service p{ font-size:var(--step--1); color:var(--muted); line-height:1.6; flex:1; }
.service__turnus{
  margin-top:.35rem; padding-top:.85rem; border-top:1px solid var(--line);
  font-size:var(--step--1); font-weight:600; color:var(--aqua);
  display:flex; align-items:center; gap:.5rem;
}
.service__turnus svg{ width:14px; height:14px; flex:none; }
.service--rail{ background:var(--panel); border-color:var(--panel); color:var(--on-panel); }
.service--rail .service__ic{ color:var(--blue-lit); }
.service--rail p{ color:var(--on-panel-2); }
.service--rail .service__turnus{ border-color:var(--panel-line); color:var(--aqua-panel); }
.service--rail:hover{ border-color:var(--blue-lit); }
@media (max-width:1000px){ .services{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:620px){ .services{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------- Zertifizierungen */
.certband{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(1.75rem,1rem + 3vw,3.5rem);
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:clamp(1.75rem,1.2rem + 2vw,2.75rem);
}
.certband__txt h2{ font-size:var(--step-2); margin-block:.8rem .8rem; }
.certband__txt p{ color:var(--body); font-size:var(--step--1); line-height:1.65; max-width:46ch; }

.certs{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1rem;
}
.cert{
  display:flex; gap:1rem; align-items:flex-start;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:1.25rem 1.3rem;
}
.cert__ic{
  flex:none; width:42px; height:42px;
  display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue-deep);
  border-radius:11px;
}
.cert__ic svg{ width:23px; height:23px; }
.cert__txt{ display:flex; flex-direction:column; gap:.1rem; min-width:0; }
.cert__txt b{
  font-family:"Bricolage Grotesque",sans-serif;
  font-size:var(--step-1); font-weight:700; letter-spacing:-.02em;
  color:var(--ink); line-height:1.15;
}
.cert__sub{ font-size:var(--step--1); color:var(--muted); }
.cert__meta{ font-size:var(--step--1); color:var(--muted-2); line-height:1.45; }
@media (max-width:1040px){
  .certband{ grid-template-columns:minmax(0,1fr); }
}
@media (max-width:520px){
  .certs{ grid-template-columns:minmax(0,1fr); }
}

/* Zeile im Fussbereich */
.footer__certs{
  display:flex; align-items:center; gap:.6rem;
  margin:0 0 1.1rem;
  padding-top:1.5rem;
  color:var(--on-panel-2);
  font-weight:600;
}
.footer__certs svg{ flex:none; color:var(--blue-lit); }
.footer__certs + .footer__bottom{ padding-top:0; border-top:1px solid var(--panel-line); padding-top:1.1rem; }

/* ---------------------------------------------------------- Ablauf */
.process{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(1.25rem,.8rem + 2vw,2.5rem); position:relative;
}
.process::before{
  content:""; position:absolute; left:0; right:0; top:26px; height:2px;
  background:repeating-linear-gradient(90deg, var(--line-2) 0 10px, transparent 10px 20px);
}
.step{ position:relative; }
.step__num{
  position:relative; z-index:2; width:54px; height:54px;
  display:grid; place-items:center;
  background:var(--blue); color:var(--on-blue); border:4px solid var(--paper); border-radius:50%;
  font-family:"Bricolage Grotesque",sans-serif; font-weight:800; font-size:var(--step-0);
}
.section--white .step__num{ border-color:var(--surface); }
.section--paper2 .step__num{ border-color:var(--paper-2); }
.step h3{ font-size:var(--step-2); margin-block:1.15rem .6rem; }
.step p{ color:var(--body); font-size:var(--step-0); line-height:1.65; }
@media (max-width:760px){
  .process{ grid-template-columns:minmax(0,1fr); }
  .process::before{
    left:26px; right:auto; top:0; bottom:0; width:2px; height:auto;
    background:repeating-linear-gradient(180deg, var(--line-2) 0 10px, transparent 10px 20px);
  }
}

/* ---------------------------------------------------------- Werte */
.pillars{
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px;
  background:var(--line); border:1px solid var(--line);
  border-radius:var(--r-lg); overflow:hidden;
}
.pillar{ background:var(--surface); padding:2rem 1.9rem 2.1rem; }
.pillar b{
  display:block; font-size:var(--step--1); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.85rem;
}
.pillar h3{ font-size:var(--step-2); margin-bottom:.7rem; }
.pillar p{ color:var(--body); font-size:var(--step-0); line-height:1.65; }

/* Abwandlung zuletzt und mit hoeherer Spezifitaet, damit sie die
   Grundregeln oben sicher schlaegt (gleich starke Selektoren gewinnen
   sonst nach Reihenfolge). */
.pillar.pillar--dark{ background:var(--panel); color:var(--on-panel); }
.pillar.pillar--dark p{ color:var(--on-panel-2); }
.pillar.pillar--dark b{ color:var(--blue-lit); }
@media (max-width:760px){ .pillars{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------- Jobs */
.jobs{
  background:var(--panel); color:var(--on-panel); border-radius:var(--r-lg);
  padding:clamp(2rem,1.2rem + 3vw,3.75rem);
  display:grid; gap:clamp(2rem,1.2rem + 3vw,3.25rem);
  position:relative; overflow:hidden;
}
.jobs::after{
  content:""; position:absolute; width:520px; aspect-ratio:1; right:-180px; top:-260px;
  background:radial-gradient(circle, rgba(47,95,208,.35), rgba(47,95,208,0) 65%);
  pointer-events:none;
}
.jobs > *{ position:relative; z-index:2; }
.jobs__head{
  display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:clamp(1.5rem,1rem + 3vw,4rem); align-items:end;
}
.jobs h2{ font-size:var(--step-3); margin-block:.85rem 1rem; max-width:18ch; }
.jobs p{ color:var(--on-panel-2); max-width:56ch; }
.jobs__cta{ display:flex; flex-direction:column; align-items:flex-start; gap:1.25rem; }
@media (min-width:881px){ .jobs__cta{ align-items:flex-end; } .jobs__cta .chips{ justify-content:flex-end; margin-top:0; } }
.chips{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.5rem; }
.cta-row{ margin-top:2rem; }
.mt-1{ margin-top:1.1rem; }
.lede--ink{ color:var(--ink); margin-bottom:1.5rem; }
.wrap--bay{ padding-bottom:var(--bay); }
.stand{ margin-top:2.5rem; color:var(--muted-2); font-size:var(--step--1); }
.chips span{
  padding:.4rem .95rem; border-radius:100px;
  background:var(--panel-hover); border:1px solid var(--panel-line);
  font-size:var(--step--1); font-weight:600; color:var(--on-panel-2);
}
.jobs__cta .chips{ margin-top:0; }
.joblists{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1rem; }
.joblist{
  background:var(--panel-hover); border:1px solid var(--panel-line); border-radius:var(--r-md);
  padding:1.4rem 1.5rem 1.2rem;
}
.joblist h3{
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue-lit); margin-bottom:.7rem;
}
.joblist li{ display:flex; gap:.75rem; align-items:flex-start; padding:.45rem 0; color:var(--on-panel-2); min-width:0; }
.joblist--contact li{ display:block; padding:.55rem 0; overflow-wrap:break-word; }
.joblist--contact li::before{ display:none; }
.joblist--contact li > span{ display:block; font-size:.78rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--on-panel-3); margin-bottom:.15rem; }
.joblist--contact a{ font-weight:600; }
.joblist li::before{
  content:""; flex:none; width:.36rem; height:.66rem; margin-top:.42rem;
  border-right:2px solid var(--blue-lit); border-bottom:2px solid var(--blue-lit);
  transform:rotate(42deg);
}
.joblist a{ color:var(--on-panel); text-decoration:none; border-bottom:1px solid var(--panel-line); }
.joblist a:hover{ border-color:var(--blue-lit); color:var(--blue-lit); }
@media (max-width:1000px){ .joblists{ grid-template-columns:minmax(0,1fr) minmax(0,1fr); } .joblist:last-child{ grid-column:1 / -1; } }
@media (max-width:880px){ .jobs__head{ grid-template-columns:minmax(0,1fr); align-items:start; } }
@media (max-width:600px){ .joblists{ grid-template-columns:minmax(0,1fr); } .joblist:last-child{ grid-column:auto; } }

/* ---------------------------------------------------------- Kontakt */
.contact{
  display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start;
}
.contact h2{ font-size:var(--step-3); margin-block:.85rem 1.1rem; }
.contact__data{ margin-top:2rem; display:grid; gap:.15rem; }
.contact__data li{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:1.1rem; align-items:start;
  padding:1rem 0; border-bottom:1px solid var(--line);
}
.contact__ic{
  width:38px; height:38px; display:grid; place-items:center;
  background:var(--blue-soft); color:var(--blue-deep); border-radius:10px;
}
.contact__ic svg{ width:18px; height:18px; }
.contact__data .lbl{
  display:block; font-size:var(--step--1); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--muted-2); margin-bottom:.15rem;
}
.contact__data .val{ font-weight:600; font-style:normal; overflow-wrap:anywhere; }
.contact__data li > span:last-child{ min-width:0; }
.contact__data a{ text-decoration:none; border-bottom:1px solid var(--line-2); }
.contact__data a:hover{ color:var(--blue); border-color:var(--blue); }

.form{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(1.5rem,1rem + 2vw,2.6rem);
  box-shadow:var(--shadow);
}
.form__row{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.42rem; margin-bottom:1.15rem; }
.field label{
  font-size:var(--step--1); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
}
.field input,.field select,.field textarea{
  font-family:inherit; font-size:var(--step-0); color:var(--ink);
  background:var(--paper); border:1px solid var(--line-2);
  border-radius:var(--r-sm); padding:.78rem .9rem; width:100%;
}
.field textarea{ resize:vertical; min-height:135px; }
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--blue); outline-offset:0; border-color:var(--blue);
}
.field .hint{ font-size:var(--step--1); color:var(--muted-2); font-weight:400; letter-spacing:0; text-transform:none; }
.hp{ position:absolute!important; left:-9999px; width:1px; height:1px; overflow:hidden; }
.consent{
  display:flex; gap:.75rem; align-items:flex-start;
  font-size:var(--step--1); color:var(--muted); line-height:1.55; margin-bottom:1.4rem;
}
.consent input{ margin-top:.28rem; width:1.05rem; height:1.05rem; flex:none; accent-color:var(--blue); }
.consent a{ color:var(--blue); }
.formnote{
  padding:.95rem 1.15rem; border-radius:var(--r-sm);
  font-size:var(--step--1); margin-bottom:1.4rem; line-height:1.55;
}
.formnote--ok{ background:var(--ok-bg); color:var(--ok); border:1px solid var(--ok-line); }
.formnote--err{ background:var(--err-bg); color:var(--err); border:1px solid var(--err-line); }
@media (max-width:900px){ .contact{ grid-template-columns:minmax(0,1fr); } }
@media (max-width:560px){ .form__row{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------- Leistungsseiten */
.svc{
  display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(2rem,1rem + 4vw,4.5rem); align-items:start;
}
.svc__main h2{ font-size:var(--step-2); margin-block:2.4rem 1rem; }
.svc__main h2:first-child{ margin-top:0; }
.svc__main p{ color:var(--body); max-width:66ch; margin-bottom:1rem; }
.svc__main p:last-child{ margin-bottom:0; }

.ticks{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.1rem 2rem; margin-top:.5rem; }
.ticks--one{ grid-template-columns:minmax(0,1fr); }
.ticks li{
  display:flex; gap:.7rem; align-items:flex-start;
  padding:.62rem 0; border-bottom:1px solid var(--line);
}
.ticks li::before{
  content:""; flex:none; width:.36rem; height:.66rem; margin-top:.42rem;
  border-right:2px solid var(--blue); border-bottom:2px solid var(--blue);
  transform:rotate(42deg);
}
@media (max-width:640px){ .ticks{ grid-template-columns:minmax(0,1fr); } }

.svc__aside{ position:sticky; top:104px; display:grid; gap:1.15rem; }
.infocard{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.6rem 1.55rem;
}
.infocard--dark{ background:var(--panel); border-color:var(--panel); color:var(--on-panel); }
.infocard h3{
  font-size:var(--step--1); font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--blue); margin-bottom:1rem;
}
.infocard--dark h3{ color:var(--blue-lit); }
.infocard dl{ margin:0; display:grid; gap:.1rem; }
.infocard .row{
  display:flex; justify-content:space-between; gap:1rem; align-items:baseline;
  padding:.6rem 0; border-bottom:1px solid var(--line);
}
.infocard .row:last-child{ border-bottom:0; }
.infocard dt{ font-size:var(--step--1); color:var(--muted); }
.infocard dd{ margin:0; font-weight:600; text-align:right; }
.infocard--dark .row{ border-color:var(--panel-line); }
.infocard--dark dt{ color:var(--on-panel-3); }
.infocard p{ color:var(--body); font-size:var(--step--1); line-height:1.6; }
.infocard--dark p{ color:var(--on-panel-2); }
.infocard .btn{ margin-top:1.2rem; width:100%; justify-content:center; }
@media (max-width:960px){ .svc{ grid-template-columns:minmax(0,1fr); } .svc__aside{ position:static; } }

.related{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
.related a{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md);
  padding:1.1rem 1.2rem; text-decoration:none; font-weight:600;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  transition:border-color .2s ease, color .2s ease;
}
.related a:hover{ border-color:var(--blue-lit); color:var(--blue); }
.related a::after{
  content:""; flex:none; width:.4rem; height:.4rem;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}
@media (max-width:900px){ .related{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .related{ grid-template-columns:minmax(0,1fr); } }

/* ---------------------------------------------------------- CTA-Band */
.ctaband{
  background:var(--panel); color:var(--on-panel); border-radius:var(--r-lg);
  padding:clamp(1.9rem,1.2rem + 2.4vw,3rem);
  display:flex; flex-wrap:wrap; gap:1.5rem 2.5rem;
  align-items:center; justify-content:space-between;
  position:relative; overflow:hidden;
}
.ctaband::after{
  content:""; position:absolute; width:360px; aspect-ratio:1; right:-100px; top:-160px;
  background:radial-gradient(circle, rgba(47,95,208,.5), rgba(47,95,208,0) 65%); pointer-events:none;
}
.ctaband > *{ position:relative; z-index:2; }
.ctaband h2{ font-size:var(--step-2); margin-bottom:.5rem; }
.ctaband p{ color:var(--on-panel-2); max-width:52ch; }
.ctaband__actions{ display:flex; flex-wrap:wrap; gap:.75rem; }

/* ---------------------------------------------------------- Rechtstexte */
.legal{ max-width:78ch; }
.legal h2{
  font-size:var(--step-2); margin-block:2.6rem 1rem;
  padding-bottom:.6rem; border-bottom:2px solid var(--line);
}
.legal h2:first-child{ margin-top:0; }
.legal h3{ font-size:var(--step-1); margin-block:1.9rem .7rem; }
.legal h4{ font-size:var(--step-0); font-weight:700; margin-block:1.4rem .5rem; }
.legal p{ color:var(--body); margin-bottom:1rem; }
.legal ul{ list-style:none; margin:0 0 1.2rem; }
.legal ul li{
  position:relative; padding-left:1.35rem; margin-bottom:.5rem; color:var(--body);
}
.legal ul li::before{
  content:""; position:absolute; left:.15rem; top:.72em;
  width:.36rem; height:.36rem; border-radius:50%; background:var(--blue);
}
.legal a{ color:var(--blue); }
.legal address{ font-style:normal; color:var(--body); }
.legal .box{
  background:var(--surface); border:1px solid var(--line);
  border-left:3px solid var(--blue); border-radius:var(--r-md);
  padding:1.3rem 1.5rem; margin-bottom:1.4rem;
}
.legal .box p:last-child{ margin-bottom:0; }
.legal .todo{
  background:var(--todo-bg); border:1px solid var(--todo-line); border-left:3px solid var(--todo-mark);
  border-radius:var(--r-md); padding:1.1rem 1.35rem; margin-bottom:1.4rem;
  font-size:var(--step--1); color:var(--todo-ink);
}
.legal .todo strong{ color:var(--todo-ink2); }
.legal .todo p{ color:inherit; margin-bottom:.5rem; }
.legal .todo p:last-child{ margin-bottom:0; }
.legal table{
  width:100%; border-collapse:collapse; margin-bottom:1.4rem; font-size:var(--step--1);
}
.legal table th,.legal table td{
  text-align:left; padding:.7rem .8rem; border-bottom:1px solid var(--line); vertical-align:top;
}
.legal table th{ background:var(--paper-2); font-weight:700; }
.tablewrap{ overflow-x:auto; }

.toc{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:1.5rem 1.6rem; margin-bottom:2.5rem;
}
.toc h2{ font-size:var(--step--1)!important; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:var(--muted); border:0!important; padding:0!important; margin:0 0 .9rem!important; }
.toc ol{ counter-reset:toc; display:grid; gap:.35rem; }
.toc li{ counter-increment:toc; }
.toc li a{ color:var(--ink); text-decoration:none; font-weight:600; }
.toc li a::before{ content:counter(toc) ". "; color:var(--blue); font-variant-numeric:tabular-nums; }
.toc li a:hover{ color:var(--blue); }

/* ---------------------------------------------------------- 404 */
.notfound{ text-align:center; padding-block:clamp(4rem,3rem + 5vw,8rem); }
.notfound b{
  display:block; font-family:"Bricolage Grotesque",sans-serif; font-weight:800;
  font-size:clamp(4.5rem,3rem + 10vw,9rem); line-height:1; color:var(--blue-soft);
  letter-spacing:-.05em;
}
.notfound h1{ font-size:var(--step-3); margin-block:.5rem 1rem; }
.notfound p{ color:var(--body); max-width:52ch; margin-inline:auto; }
.notfound .btn{ margin-top:2rem; }

/* ---------------------------------------------------------- Cookie-Dialog */
.cdlg{ position:fixed; inset:0; z-index:300; display:flex; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(14,28,51,.55); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); animation:cdlgIn .25s ease-out; }
.cdlg[hidden]{ display:none!important; }
@media (min-width:720px){ .cdlg{ align-items:center; } }
@keyframes cdlgIn{ from{ opacity:0; } to{ opacity:1; } }
.cdlg__box{ width:100%; max-width:560px; max-height:calc(100vh - 2rem); max-height:calc(100dvh - 2rem); overflow:auto; background:var(--surface); color:var(--ink); border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:0 40px 90px -30px rgba(0,0,0,.6); padding:1.6rem 1.7rem 1.4rem; }
.cdlg__eyebrow{ font-size:.72rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); margin-bottom:.5rem; }
.cdlg h2{ font-size:var(--step-1); margin-bottom:.6rem; }
.cdlg p{ font-size:var(--step--1); color:var(--body); line-height:1.6; margin-bottom:1.1rem; }
.cdlg a{ color:var(--blue); }
.cdlg__opts{ display:grid; gap:.6rem; margin:0 0 1.2rem; }
.cdlg__opts[hidden]{ display:none; }
.cdlg__opt{ display:flex; gap:.8rem; align-items:flex-start; padding:.85rem .95rem; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer; }
.cdlg__opt input{ margin-top:.2rem; width:1.05rem; height:1.05rem; flex:none; accent-color:var(--blue); cursor:pointer; }
.cdlg__opt input:disabled{ cursor:default; }
.cdlg__opt span{ font-size:var(--step--1); color:var(--body); line-height:1.5; }
.cdlg__opt b{ display:block; color:var(--ink); font-weight:600; margin-bottom:.15rem; }
.cdlg__actions{ display:flex; flex-wrap:wrap; gap:.6rem; }
.cdlg .btn{ padding:.72rem 1.3rem; font-size:var(--step--1); }
.cdlg .btn[hidden]{ display:none; }
.cdlg__foot{ margin:1rem 0 0; font-size:.78rem; color:var(--muted); }
@media (max-width:560px){ .cdlg{ padding:.6rem; } .cdlg__box{ padding:1.25rem 1.2rem 1.1rem; } .cdlg__actions .btn{ flex:1 1 100%; justify-content:center; } }
@media (prefers-reduced-motion:reduce){ .cdlg{ animation:none; } }

/* ---------------------------------------------------------- Footer */
.footer{ background:var(--panel); color:var(--on-panel-2); padding-block:clamp(2.75rem,2rem + 2.4vw,4rem) 1.75rem; font-size:var(--step--1); }
.footer__top{
  display:grid; grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:clamp(1.75rem,1rem + 3vw,3rem);
  padding-bottom:2.25rem; border-bottom:1px solid var(--panel-line);
}
.footer img{ height:56px; width:auto; }
.footer h2{
  font-family:"Karla",sans-serif; font-size:var(--step--1); font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-panel-3); margin:0 0 .9rem;
}
.footer li{ padding:.28rem 0; }
.footer a{ color:var(--on-panel-2); text-decoration:none; }
.footer a:hover{ color:var(--blue-lit); }
.footer .about-txt{ line-height:1.7; max-width:38ch; margin-top:1.15rem; }
.footer__bottom{
  display:flex; flex-wrap:wrap; gap:.6rem 1.75rem; justify-content:space-between;
  padding-top:1.5rem; color:var(--on-panel-3);
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:1.5rem; }
@media (max-width:900px){ .footer__top{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:560px){ .footer__top{ grid-template-columns:minmax(0,1fr); } }

.skip{ position:absolute; left:.5rem; top:.5rem; z-index:300; background:var(--panel); color:var(--on-panel); padding:.75rem 1.1rem; border-radius:var(--r-md); transform:translateY(-300%); opacity:0; }
.skip:focus{ transform:none; opacity:1; }

/* ---------------------------------------------------------- Print */
@media print{
  .header,.menu,.footer,.consentbar,.ctaband,.skip,.hero__glow,.pagehead__glow{ display:none!important; }
  body{ background:#fff; color:#000; font-size:11pt; }
  .section{ padding-block:1rem; }
  a[href^="http"]::after{ content:" (" attr(href) ")"; font-size:9pt; color:#555; }
}

/* powered by C&W Web Services — Fußzeilen-Baustein (keine Inline-Styles, CSP-tauglich) */
.cwws-powered{display:flex;justify-content:center;padding:1.1rem 1rem .4rem;font:inherit}
.cwws-powered__in{display:inline-flex;align-items:center;gap:.55rem;color:inherit;text-decoration:none;opacity:.72;transition:opacity .25s}
.cwws-powered__in:hover{opacity:1;color:inherit}
.cwws-powered__label{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;font-family:ui-monospace,"JetBrains Mono",Menlo,monospace}
.cwws-powered__mark{width:22px;height:17px;flex:none;display:inline-block}
.cwws-powered__name{font-weight:600;font-size:.86rem;letter-spacing:-.01em}