/*
Theme Name: cw-inter.net
Theme URI: https://cw-inter.net/
Author: Colja Winter
Description: Schlankes, handgeschriebenes Theme für cw-inter.net. Dark Mode, kein Page-Builder, keine Frameworks.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.9
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: cw-inter-net
*/

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

/* ============================================================
   1. DESIGN TOKENS – Corporate Identity cw-inter.net
   ============================================================ */
:root{
  /* Flächen */
  --bg:            #050505;   /* Seitenhintergrund, tiefes Schwarz */
  --surface:       #121212;   /* Karten / Sektionen / Formularfelder */
  --surface-2:     #1a1a1a;   /* Hover-Fläche */
  --border:        rgba(255,255,255,.09);

  /* Text */
  --text:          #f4f4f5;
  --text-muted:    #a1a1aa;
  /* Leiser Grauton fuer Hinweise und Fusszeilen. Der fruehere Wert #71717a
     erreichte auf dem dunklen Grund nur 4,22:1 und lag damit unter den
     geforderten 4,5:1 fuer normalen Text. Dieser Wert kommt auf 7,8:1. */
  --text-leise:    #9aa0aa;

  /* Akzente (Logo-Farbwelt) */
  --cyan:          #00C9B1;
  --yellow:        #FFB300;
  --orange:        #FF6B00;
  --magenta:       #E0005E;

  /* Verläufe */
  --grad-brand:    linear-gradient(100deg, var(--cyan) 0%, var(--yellow) 45%, var(--orange) 70%, var(--magenta) 100%);
  --grad-btn:      linear-gradient(100deg, var(--orange) 0%, var(--magenta) 100%);

  /* Radien und Maße */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --maxw: 1200px;
  --pad:  clamp(1.25rem, 5vw, 2.5rem);

  /* Bewegung */
  --ease: cubic-bezier(.22,1,.36,1);
}

/* ============================================================
   2. RESET UND BASIS
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(1rem,.96rem + .2vw,1.0625rem);
  line-height:1.7;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
h1,h2,h3{
  font-family:"Montserrat",system-ui,sans-serif;
  font-weight:800;
  line-height:1.1;
  letter-spacing:-.02em;
  margin:0 0 .6em;
}
h1{font-size:clamp(2.4rem,7vw,4.6rem);font-weight:900;}
h2{font-size:clamp(1.9rem,4.2vw,3rem);}
h3{font-size:1.2rem;letter-spacing:-.01em;}
p{margin:0 0 1rem;}
:focus-visible{outline:2px solid var(--cyan);outline-offset:3px;border-radius:4px;}

/* Layout-Helfer */
.container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:clamp(4rem,9vw,7.5rem);position:relative;}
.section--tight{padding-block:clamp(3rem,7vw,5rem);}
/* Für Fließtext-Sektionen: der Abstand kommt aus .page-content selbst */
.section--flush{position:relative;padding-block:0;}
.section--flush > .container{padding-inline:0;}
.text-grad{background:var(--grad-brand);-webkit-background-clip:text;background-clip:text;color:transparent;}
.eyebrow{
  font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.22em;text-transform:uppercase;color:var(--cyan);margin-bottom:1rem;
}
.lead{color:var(--text-muted);font-size:clamp(1.05rem,.98rem + .35vw,1.25rem);max-width:60ch;}
.lead a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.visually-hidden{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ============================================================
   3. BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:.6rem;
  padding:.9rem 1.7rem;border-radius:999px;border:1px solid transparent;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.95rem;
  cursor:pointer;white-space:nowrap;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s, border-color .3s, color .3s;
}
.btn--primary{
  background:var(--grad-btn);color:#fff;
  box-shadow:0 8px 24px -10px rgba(224,0,94,.8);
}
.btn--primary:hover{transform:translateY(-3px) scale(1.04);box-shadow:0 16px 38px -12px rgba(255,107,0,.75);}
.btn--ghost{background:transparent;color:var(--text);border-color:var(--border);}
.btn--ghost:hover{transform:translateY(-3px) scale(1.03);border-color:var(--cyan);color:var(--cyan);}
.btn--sm{padding:.6rem 1.2rem;font-size:.85rem;}

/* ============================================================
   4. HEADER UND NAVIGATION

   Zweistufig: Beim Seitenaufruf steht die Bühne (.buehne) im Fluss –
   großes Logo mittig, Schriftzug darunter, Menü darunter. Sie scrollt
   normal weg. Sobald ihr unteres Ende den oberen Rand passiert, fährt
   die kompakte Leiste (.header) ein. Bewusst zwei Elemente statt eines
   morphenden Headers: So verschiebt sich beim Umschalten kein Inhalt.
   ============================================================ */
.header{
  position:sticky;top:0;z-index:100;
  background:rgba(5,5,5,.72);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--border);
}

/* --- Bühne --- */
.buehne{display:none;position:relative;z-index:5;background:var(--bg);}
.buehne__inner{
  display:flex;flex-direction:column;align-items:center;
  padding-block:clamp(2rem,4vw,3.25rem) 1.5rem;
}
/* Doppelte Klasse, weil .logo weiter unten steht und sonst mit seinen
   52px gewinnen würde. */
.logo.logo--gross{--logo-hoehe:132px;flex-direction:column;gap:.55rem;}
.logo--gross .logo__text{font-size:.82rem;letter-spacing:.3em;}
.buehne__nav{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;
  gap:1.25rem 1.75rem;margin-top:1.75rem;
}
.buehne__nav .nav__list{justify-content:center;flex-wrap:wrap;}
.buehne__nav .nav__link{font-size:.92rem;}

@media (min-width:1041px){
  .buehne{display:block;}
  /* Mit aktivem JavaScript startet die Leiste ausgefahren und kommt erst,
     wenn die Bühne oben verschwindet. Ohne JS bleibt sie schlicht sichtbar. */
  .js .header{
    position:fixed;left:0;right:0;top:0;
    transform:translateY(-100%);
    transition:transform .38s var(--ease);
  }
  .js .header.is-sichtbar{transform:none;}
}

/* Sprungziele nicht unter die eingefahrene Leiste rutschen lassen */
[id]{scroll-margin-top:88px;}

/* WordPress blendet für angemeldete Nutzer oben eine eigene Leiste ein.
   Ohne Versatz verschwindet die Kopfleiste dahinter. Betrifft nur
   eingeloggte Redakteure, in der statischen Fassung greift es nie. */
@media screen and (min-width:601px){
  body.admin-bar .header{top:46px;}
}
@media screen and (min-width:783px){
  body.admin-bar .header{top:32px;}
}
.header__inner{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;}

/* Logo: farbige CW-Bildmarke mit transparentem Hintergrund, daneben die
   Wortmarke als Text – so bleibt der Schriftzug scharf und übersetzbar. */
.logo{
  /* 52px Rahmenhöhe: die Farbspritzer ragen oben und unten hinaus, die
     Buchstaben selbst kommen damit auf die 28px des früheren Textlogos. */
  --logo-hoehe:52px;
  /* Optischer Ausgleich: Im PNG sitzt die Mitte der CW-Buchstaben 10,3 % der
     Bildhöhe unterhalb der Bildmitte – oben ist fast nur transparenter Raum.
     Zentriert man stur den Bildrahmen, steht der Schriftzug daneben sichtbar
     zu hoch. Der Faktor hebt das Bild um genau diesen Anteil an, sodass die
     Buchstaben auf einer Linie mit dem Schriftzug liegen. Er skaliert mit,
     wenn --logo-hoehe sich ändert. */
  --logo-ausgleich:-.103;
  display:flex;align-items:center;gap:.7rem;font-family:"Montserrat",sans-serif;
}
.logo__img{
  display:block;height:var(--logo-hoehe);width:auto;
  transform:translateY(calc(var(--logo-hoehe) * var(--logo-ausgleich)));
}
.logo__text{font-size:.68rem;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--text-muted);}
/* Im Footer darf die Marke etwas größer stehen */
.footer .logo{--logo-hoehe:64px;}
@media (max-width:480px){
  .logo{--logo-hoehe:42px;}
  .logo__text{font-size:.62rem;letter-spacing:.18em;}
}

.nav{display:flex;align-items:center;gap:1.25rem;}
.nav__list{display:flex;align-items:center;gap:1.25rem;list-style:none;margin:0;padding:0;}
.nav__link{
  font-size:.86rem;font-weight:500;color:var(--text-muted);white-space:nowrap;
  position:relative;padding-block:.35rem;transition:color .25s;
}
.nav__link::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:var(--grad-brand);border-radius:2px;
  transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease);
}
.nav__link:hover{color:var(--text);}
.nav__link:hover::after{transform:scaleX(1);}
/* Aktive Seite dauerhaft markiert */
.nav__link.is-active{color:var(--text);}
.nav__link.is-active::after{transform:scaleX(1);}

/* Burger – nur mobil sichtbar, gesteuert per Checkbox (CSS only) */
.nav-toggle{display:none;}
.burger{
  display:none;background:none;border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.55rem;cursor:pointer;
}
.burger span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;}
.burger span+span{margin-top:5px;}

/* ============================================================
   5. HERO (Startseite) UND SEITEN-HERO (Unterseiten)
   ============================================================ */
.hero{position:relative;overflow:hidden;padding-block:clamp(4.5rem,11vw,9rem);}
/* Farbexplosion im Hintergrund – abstrahiert aus dem Logo */
.hero__glow{position:absolute;inset:0;pointer-events:none;z-index:0;filter:blur(90px);opacity:.42;}
.hero__glow span{position:absolute;border-radius:50%;display:block;}
.hero__glow span:nth-child(1){width:38vw;height:38vw;left:-8vw;top:-6vw;background:var(--cyan);}
.hero__glow span:nth-child(2){width:30vw;height:30vw;left:22vw;top:18vw;background:var(--yellow);opacity:.7;}
.hero__glow span:nth-child(3){width:34vw;height:34vw;right:-6vw;top:2vw;background:var(--magenta);}
.hero__glow span:nth-child(4){width:22vw;height:22vw;right:14vw;bottom:-8vw;background:var(--orange);opacity:.6;}
.hero__inner{position:relative;z-index:1;max-width:62rem;}
.hero h1{margin-bottom:1.4rem;}
.hero__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2.6rem;
  font-size:.85rem;color:var(--text-muted);list-style:none;padding:0;
}
.hero__meta li{display:flex;align-items:center;gap:.5rem;}
.hero__meta li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--cyan);flex:none;}
.hero__meta li:nth-child(2)::before{background:var(--yellow);}
.hero__meta li:nth-child(3)::before{background:var(--magenta);}

/* Kompaktere Hero-Variante für die Unterseiten */
.page-hero{padding-block:clamp(3.25rem,8vw,5.5rem) clamp(2.5rem,6vw,4rem);border-bottom:1px solid var(--border);}
.page-hero .hero__glow{opacity:.34;}
.page-hero h1{font-size:clamp(2.1rem,5.4vw,3.7rem);margin-bottom:1.1rem;}
.page-hero .lead{max-width:62ch;}

/* Brotkrumen-Navigation.
   Die Links bekommen Innenabstand, damit die Tapfläche auf Mobilgeräten die
   geforderten 24 x 24 px erreicht – bei .8rem Schriftgröße wären es sonst
   nur rund 29 x 22 px. Der negative Randausgleich hält die Optik gleich. */
.breadcrumb{display:flex;flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.8rem;color:var(--text-leise);margin-bottom:1.1rem;}
.breadcrumb a{
  color:var(--text-muted);transition:color .25s;
  display:inline-block;padding:6px 4px;margin:-6px -4px;
}
.breadcrumb a:hover{color:var(--cyan);}
.breadcrumb [aria-current]{color:var(--text);}

/* ============================================================
   6. KARTEN-GRID (Leistungen / Querverweise)
   ============================================================ */
.services__head{max-width:60ch;margin-bottom:3.25rem;}
.cards{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,255px),1fr));}
.card{
  --accent:var(--cyan);
  position:relative;overflow:hidden;isolation:isolate;
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:2rem 1.75rem 2.25rem;
  display:flex;flex-direction:column;
  transition:transform .4s var(--ease), border-color .4s, background-color .4s;
}
.card:nth-child(2){--accent:var(--yellow);}
.card:nth-child(3){--accent:var(--magenta);}
.card:nth-child(4){--accent:var(--orange);}
/* Farbiger Lichtschein, wird beim Hover kräftiger */
.card::before{
  content:"";position:absolute;z-index:-1;top:-55%;left:50%;translate:-50% 0;
  width:120%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,var(--accent) 0%,transparent 62%);
  opacity:.09;transition:opacity .45s var(--ease);
}
.card:hover{transform:translateY(-8px) scale(1.015);border-color:color-mix(in srgb,var(--accent) 55%,transparent);background:var(--surface-2);}
.card:hover::before{opacity:.24;}
.card__icon{
  width:52px;height:52px;border-radius:16px;margin-bottom:1.4rem;
  display:grid;place-items:center;color:var(--accent);
  background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  transition:transform .4s var(--ease);
}
.card:hover .card__icon{transform:scale(1.09) rotate(-4deg);}
.card h3{color:var(--text);}
.card p{color:var(--text-muted);font-size:.95rem;margin-bottom:1.25rem;}
.card__list{list-style:none;margin:auto 0 0;padding:0;display:flex;flex-wrap:wrap;gap:.45rem;}
.card__list li{
  font-size:.76rem;font-weight:500;padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,255,255,.05);border:1px solid var(--border);color:var(--text-muted);
}
.card__note{font-size:.75rem;color:var(--text-leise);margin:1rem 0 0;line-height:1.5;}
/* "Mehr erfahren"-Link am Kartenfuß */
.card__more{
  display:inline-flex;align-items:center;gap:.45rem;margin-top:1.4rem;
  font-family:"Montserrat",sans-serif;font-weight:700;font-size:.85rem;color:var(--accent);
}
.card__more svg{transition:transform .3s var(--ease);}
.card:hover .card__more svg{transform:translateX(5px);}
/* Ganze Karte klickbar machen, ohne die Semantik zu verlieren */
.card--link .card__more::after{content:"";position:absolute;inset:0;}

/* ============================================================
   7. FLIESSTEXT-BEREICH DER UNTERSEITEN
   ============================================================ */
.page-content{max-width:80ch;margin:0 auto;padding:4rem 1.5rem;}
.page-content > p{color:var(--text-muted);}
.page-content .intro{
  font-size:clamp(1.1rem,1rem + .45vw,1.35rem);color:var(--text);
  font-weight:500;line-height:1.6;margin-bottom:1.75rem;
}
/* Gliederung bis in die vierte Ebene. Lange Rechtstexte bringen tiefe
   Verschachtelungen mit; ohne eigene Größen sähen h4 und Fließtext gleich
   aus und der Text wird zur Wand. Die Stufen sind bewusst deutlich
   unterschiedlich, damit man die Ebene auf einen Blick erkennt. */
.page-content h2{margin-top:3rem;font-size:clamp(1.5rem,3vw,2rem);}
.page-content h2:first-child{margin-top:0;}
.page-content h3{
  margin-top:2.5rem;color:var(--text);
  font-size:clamp(1.25rem,2.2vw,1.5rem);
}
/* 1,25rem = 20px: deutlich über den 17px des Fließtextes, sonst wirkt die
   Zwischenüberschrift nur wie ein fetter Satz. Stufenfolge 32 / 24 / 20 / 17. */
.page-content h4{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:1.25rem;line-height:1.3;letter-spacing:-.01em;color:var(--text);
  margin:2.25rem 0 .65rem;
}
.page-content h5,
.page-content h6{
  font-family:"Montserrat",sans-serif;font-weight:700;
  font-size:.95rem;letter-spacing:.02em;color:var(--text-muted);
  margin:1.75rem 0 .5rem;
}
/* Rechtstexte arbeiten mit verschachtelten Listen und Tabellen */
.page-content ul:not(.checklist):not(.facts),
.page-content ol{margin:1.25rem 0;padding-left:1.4rem;color:var(--text-muted);}
.page-content li{margin-bottom:.5rem;}
.page-content table{width:100%;border-collapse:collapse;margin:1.5rem 0;font-size:.92rem;}
.page-content th,
.page-content td{border:1px solid var(--border);padding:.7rem .9rem;text-align:left;vertical-align:top;}
.page-content th{color:var(--text);font-family:"Montserrat",sans-serif;font-size:.85rem;}
.page-content a:not(.btn){color:var(--cyan);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;}
.page-content strong{color:var(--text);font-weight:600;}

/* Checklisten mit farbigem Haken */
.checklist{list-style:none;margin:1.5rem 0;padding:0;display:grid;gap:.85rem;}
.checklist li{position:relative;padding-left:2rem;color:var(--text-muted);}
.checklist li::before{
  content:"";position:absolute;left:0;top:.5em;width:1.1rem;height:1.1rem;border-radius:50%;
  background:color-mix(in srgb,var(--cyan) 18%,transparent);
  border:1px solid color-mix(in srgb,var(--cyan) 45%,transparent);
}
.checklist li::after{
  content:"";position:absolute;left:.33rem;top:.72em;width:.42rem;height:.22rem;
  border-left:2px solid var(--cyan);border-bottom:2px solid var(--cyan);
  transform:rotate(-45deg);
}

/* Hinweis-Box (z. B. Rechtstexte-Disclaimer) */
.note{
  border:1px solid var(--border);border-left:3px solid var(--yellow);
  background:var(--surface);border-radius:var(--r-md);
  padding:1.15rem 1.35rem;margin:2rem 0 0;
  font-size:.9rem;color:var(--text-muted);
}
.note strong{color:var(--yellow);}

/* Referenzen: knapper Beleg im Fließtext. Bewusst dieselben Maße wie .note,
   nur mit Cyan statt Gelb – ein Beleg ist kein Warnhinweis. */
.referenz{
  border:1px solid var(--border);border-left:3px solid var(--cyan);
  background:var(--surface);border-radius:var(--r-md);
  padding:1.15rem 1.35rem;margin:2rem 0 0;
  font-size:.92rem;color:var(--text-muted);
}
.referenz p{margin:0;}
.referenz strong{color:var(--cyan);}

/* Partner-Nachweis: Siegel und Einordnung nebeneinander.
   Kein .reveal – das ist Inhalt, kein Schmuck. */
.partner{
  display:grid;gap:1.5rem;align-items:center;
  grid-template-columns:minmax(0,180px) 1fr;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r-md);padding:1.5rem;margin:2rem 0 0;
}
.partner__siegel{display:block;transition:transform .35s var(--ease);}
.partner__siegel:hover{transform:scale(1.03);}
.partner__siegel img{display:block;width:100%;height:auto;}
.partner h3{font-size:1.15rem;margin:0 0 .5rem;}
.partner p{font-size:.9rem;color:var(--text-muted);margin:0;}
.partner p + p{margin-top:.6rem;}
@media (max-width:640px){
  .partner{grid-template-columns:1fr;justify-items:start;}
  .partner__siegel{max-width:180px;}
}

/* Zahlen-/Fakten-Kacheln (auch auf Unterseiten nutzbar) */
.facts{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));list-style:none;margin:2.5rem 0 0;padding:0;}
.fact{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.4rem 1.25rem;transition:transform .35s var(--ease),border-color .35s;
}
.fact:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);}
.fact b{
  display:block;font-family:"Montserrat",sans-serif;font-weight:800;line-height:1.15;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem);
  overflow-wrap:anywhere;margin-bottom:.35rem;
}
.fact span{font-size:.82rem;color:var(--text-muted);}

/* Querverweise auf die anderen Leistungsseiten */
.crosslinks{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;margin-top:3rem;}
.crosslinks__label{font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-leise);font-weight:600;}

/* ============================================================
   8. ÜBER UNS (Startseite)
   ============================================================ */
.about{background:var(--surface);border-block:1px solid var(--border);}
.about__grid{display:grid;gap:clamp(2.5rem,6vw,4.5rem);align-items:center;}
.about__facts{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,160px),1fr));list-style:none;margin:0;padding:0;}
.about__fact{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.4rem 1.25rem;transition:transform .35s var(--ease),border-color .35s;
}
.about__fact:hover{transform:translateY(-5px);border-color:rgba(255,255,255,.2);}
.about__fact b{
  display:block;font-family:"Montserrat",sans-serif;font-weight:800;line-height:1.15;
  font-size:clamp(1.25rem,1.05rem + .7vw,1.7rem);
  overflow-wrap:anywhere;margin-bottom:.35rem;
}
.about__fact span{font-size:.82rem;color:var(--text-muted);}

/* ============================================================
   9. CTA-BAND
   ============================================================ */
.cta{text-align:center;}
.cta__box{
  position:relative;overflow:hidden;border-radius:var(--r-lg);
  padding:clamp(2.5rem,6vw,4.5rem) var(--pad);
  border:1px solid var(--border);
  background:radial-gradient(120% 140% at 15% 0%,rgba(0,201,177,.16) 0%,transparent 55%),
             radial-gradient(120% 140% at 85% 100%,rgba(224,0,94,.18) 0%,transparent 55%),
             var(--surface);
}
.cta__box .lead{margin-inline:auto;}
.cta__actions{display:flex;flex-wrap:wrap;gap:1rem;margin-top:2.2rem;justify-content:center;}

/* ============================================================
  10. KONTAKTSEITE: FORMULAR UND INFOSPALTE
   ============================================================ */
.contact__grid{display:grid;gap:2rem;align-items:start;}

.form{
  display:grid;gap:1.25rem;
  background:linear-gradient(180deg,rgba(255,255,255,.035),rgba(255,255,255,.008));
  border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(1.5rem,4vw,2.5rem);
}
.form--wide{max-width:60rem;margin-inline:auto;}
.form__row{display:grid;gap:1.25rem;}
/* align-content:start verhindert, dass ein Feld ohne Hinweistext in die Höhe
   gezogen wird, wenn das Nachbarfeld derselben Zeile einen Hinweis hat –
   sonst stehen Eingabefelder in einer Zeile unterschiedlich hoch */
.field{display:grid;gap:.5rem;align-content:start;}
.field > input,
.field > select,
.field > textarea{align-self:start;}
.field label{
  font-family:"Montserrat",sans-serif;font-size:.82rem;font-weight:700;
  letter-spacing:.04em;color:var(--text);
}
.field .req{color:var(--magenta);}
.field__hint{font-size:.76rem;color:var(--text-leise);}

.form input,
.form select,
.form textarea{
  width:100%;font:inherit;font-size:.95rem;color:var(--text);
  background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-sm);
  padding:.85rem 1rem;
  transition:border-color .25s,box-shadow .25s,background-color .25s;
}
.form textarea{min-height:170px;resize:vertical;line-height:1.6;}
.form input::placeholder,
.form textarea::placeholder{color:#6b6b73;}
.form input:hover,
.form select:hover,
.form textarea:hover{border-color:rgba(255,255,255,.18);}
.form input:focus,
.form select:focus,
.form textarea:focus{
  outline:none;border-color:var(--cyan);
  background:var(--surface-2);
  box-shadow:0 0 0 3px rgba(0,201,177,.18);
}
/* Eigener Pfeil für das Dropdown */
.form select{
  appearance:none;-webkit-appearance:none;padding-right:2.75rem;cursor:pointer;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 1.1rem center;
}
.form select option{background:var(--surface);color:var(--text);}

/* DSGVO-Checkbox – bewusst als Fließtext, nicht als fettes Feld-Label */
.field label.checkbox,
.checkbox{
  display:flex;align-items:flex-start;gap:.8rem;
  font-family:"Inter",system-ui,sans-serif;font-size:.85rem;font-weight:400;
  letter-spacing:normal;color:var(--text-muted);line-height:1.6;cursor:pointer;
}
.checkbox input{
  width:1.15rem;height:1.15rem;flex:none;margin-top:.28rem;
  accent-color:var(--cyan);cursor:pointer;padding:0;
}
.checkbox a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;}
.form__submit{justify-self:start;margin-top:.25rem;}
/* Honeypot gegen Spam-Bots – für Menschen unsichtbar */
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ------------------------------------------------------------
   Projekt-Fragebogen (projekt-starten.html)
   ------------------------------------------------------------ */
/* Nummerierte Abschnitte statt einer endlosen Feldliste */
.form__step{border:0;margin:0;padding:0;display:grid;gap:1.25rem;}
.form__step + .form__step{
  margin-top:2.5rem;padding-top:2.5rem;border-top:1px solid var(--border);
}
.form__step legend{
  display:flex;align-items:center;gap:.75rem;padding:0;margin-bottom:.25rem;
  font-family:"Montserrat",sans-serif;font-size:1.05rem;font-weight:800;color:var(--text);
}
.form__step legend .step__no{
  width:1.9rem;height:1.9rem;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-size:.85rem;font-weight:800;color:#fff;background:var(--grad-btn);
}
.form__step .step__hint{font-size:.85rem;color:var(--text-muted);margin:-.5rem 0 0;}

/* Auswahlkacheln für Mehrfachauswahl (Leistungen, Zeitrahmen …) */
.choice-grid{
  display:grid;gap:.75rem;margin:0;padding:0;list-style:none;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
}
.choice{
  position:relative;display:flex;align-items:flex-start;gap:.7rem;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1rem 1.1rem;cursor:pointer;
  transition:border-color .3s,background-color .3s,transform .3s var(--ease);
}
.choice:hover{transform:translateY(-3px);border-color:rgba(255,255,255,.2);}
.choice input{
  width:1.1rem;height:1.1rem;flex:none;margin:.2rem 0 0;
  accent-color:var(--cyan);cursor:pointer;
}
.choice__text{display:grid;gap:.15rem;}
.choice__title{font-family:"Montserrat",sans-serif;font-size:.9rem;font-weight:700;color:var(--text);}
.choice__desc{font-size:.78rem;color:var(--text-muted);line-height:1.5;}
/* Ausgewählte Kachel bekommt die Markenfarbe */
.choice:has(input:checked){
  border-color:var(--cyan);
  background:linear-gradient(180deg,rgba(0,201,177,.10),rgba(0,201,177,.03));
}
.choice:has(input:focus-visible){outline:2px solid var(--cyan);outline-offset:3px;}

/* Hinweis unter dem Formular: kurzer Weg statt Fragebogen */
.form__switch{
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;
  margin-top:1.5rem;font-size:.88rem;color:var(--text-muted);
}
.form__switch a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;}

/* Direkte Kontaktwege neben dem Formular */
.contact__aside{display:grid;gap:1rem;align-content:start;}
.contact__card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);
  padding:1.5rem 1.4rem;transition:transform .35s var(--ease),border-color .35s;
}
.contact__card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.2);}
.contact__card h3{font-size:1rem;margin-bottom:.5rem;}
.contact__card p{color:var(--text-muted);font-size:.9rem;margin:0;}
.contact__card a{color:var(--cyan);}
.contact__card a:hover{text-decoration:underline;text-underline-offset:3px;}

/* ============================================================
  11. FOOTER
   ============================================================ */
.footer{border-top:1px solid var(--border);padding-block:3.5rem 2rem;font-size:.9rem;}
.footer__grid{display:grid;gap:2.5rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));}
.footer h4{
  font-family:"Montserrat",sans-serif;font-size:.78rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--text);margin:0 0 1rem;
}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;}
.footer a{color:var(--text-muted);transition:color .25s,padding-left .25s;}
.footer a:hover{color:var(--cyan);padding-left:4px;}
.footer__about{color:var(--text-muted);margin-top:1rem;max-width:32ch;}
.footer__plain{color:var(--text-muted);}
/* Siegel in der Spalte „Rechtliches“ – dort, wo es im Zusammenhang steht */
.footer__siegel{
  display:inline-block;margin-top:1.25rem;max-width:150px;opacity:.9;
  transition:transform .35s var(--ease),opacity .35s;
}
.footer__siegel:hover,.footer__siegel:focus-visible{transform:scale(1.04);opacity:1;}
.footer__siegel img{display:block;width:100%;height:auto;}

.footer__bottom{
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;justify-content:space-between;
  margin-top:3rem;padding-top:1.5rem;border-top:1px solid var(--border);
  color:var(--text-leise);font-size:.82rem;
}

/* ============================================================
  12. SCROLL-REVEAL (progressive enhancement)
   ============================================================ */
/* Nur für schmückende Blöcke, niemals für Inhaltsbereiche: Ein Element mit
   opacity 0 ist unsichtbar, sobald das Skript nicht durchläuft oder der
   Beobachter nicht auslöst. Fließtext darf davon nie abhängen. */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--ease),transform .7s var(--ease);}
.reveal.is-visible{opacity:1;transform:none;}
/* Ohne JavaScript bleibt alles sichtbar – die Klasse .js setzt der Header. */
html:not(.js) .reveal{opacity:1;transform:none;}

/* ============================================================
  13. RESPONSIVE – Mobile First, Breakpoints greifen aufwärts
   ============================================================ */
@media (min-width:640px){
  .form__row--2{grid-template-columns:1fr 1fr;}
}
@media (min-width:900px){
  .about__grid{grid-template-columns:1.05fr .95fr;}
  .contact__grid{grid-template-columns:1.35fr .65fr;}
}

/* Mobile Navigation – ab hier klappt das Menü hinter den Burger,
   weil sechs Menüpunkte plus Button sonst zu breit werden */
@media (max-width:1040px){
  .burger{display:block;}
  .nav{
    position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(5,5,5,.97);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--border);
    padding:0 var(--pad);
    max-height:0;overflow:hidden;
    transition:max-height .4s var(--ease),padding .4s var(--ease);
  }
  .nav__list{flex-direction:column;align-items:stretch;gap:0;}
  .nav__link{display:block;padding:1rem 0;border-bottom:1px solid var(--border);font-size:1rem;}
  .nav__link::after{display:none;}
  .nav__link.is-active{color:var(--cyan);}
  .nav .btn{margin:1.25rem 0 1.75rem;justify-content:center;}
  .nav-toggle:checked ~ .nav{max-height:34rem;padding-block:.25rem;}
}

/* Reduzierte Bewegung respektieren */
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition-duration:.01ms !important;}
  html{scroll-behavior:auto;}
  .reveal{opacity:1;transform:none;}
}