@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-latin-300-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-latin-ext-300-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:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-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:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-latin-ext-500-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:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto';font-style:normal;font-weight:700;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-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}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-mono-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-mono-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:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-mono-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:'Roboto Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/wp-content/uploads/fonts/roboto-mono-latin-ext-500-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}:root{--teal:#0E7C93;--rose:#E23A6B;--amber:#F0812E;--bg:#FFFFFF;--bg-soft:#F7F8F9;--ink:#14171A;--ink-soft:#4A5157;--ink-faint:#8A9298;--line:#E3E7EA;--card:#FFFFFF;--field:#FFFFFF;--overlay:#14171A;--shadow:0 1px 2px rgba(20,23,26,.04),0 12px 32px -18px rgba(20,23,26,.22);--maxw:1180px;--gut:clamp(20px,5vw,64px);--sec:clamp(72px,10vw,140px);--r:14px;--ff:'Roboto',system-ui,-apple-system,'Helvetica Neue',Arial,sans-serif;--fm:'Roboto Mono',ui-monospace,SFMono-Regular,Menlo,monospace}[data-theme="dark"]{--teal:#3FB6CE;--rose:#FF6A93;--amber:#FFA457;--bg:#0E1113;--bg-soft:#14181B;--ink:#EEF2F4;--ink-soft:#AEB8BF;--ink-faint:#78838A;--line:#242A2E;--card:#14181B;--field:#0E1113;--overlay:#0A0C0E;--shadow:0 1px 2px rgba(0,0,0,.4),0 12px 32px -18px rgba(0,0,0,.8)}.oxy-header,.oxy-footer,.oxygen-header,.oxygen-footer,[class*="oxy-header"],[class*="oxy-footer"]{padding:0 !important;margin:0 !important;max-width:none !important}.top .wrap,.foot .wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gut)}html .brand img{content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 23 64 41.6' width='64' height='41.6' role='img' aria-labelledby='t'%3E%3Ctitle id='t'%3EWolke7Hoch2%3C/title%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='10' y1='0' x2='92' y2='0'%3E%3Cstop offset='0' stop-color='%2312626F'/%3E%3Cstop offset='.3' stop-color='%233D8FA8'/%3E%3Cstop offset='.55' stop-color='%238E7CB8'/%3E%3Cstop offset='.78' stop-color='%23D96BA0'/%3E%3Cstop offset='1' stop-color='%23F2994A'/%3E%3C/linearGradient%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M47.5 40.4H61.5L53.2 55.2' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M30 63H68A11.5 11.5 0 0 0 69.6 40.1A18.5 18.5 0 0 0 34.6 36.1A13.6 13.6 0 0 0 30 63Z' fill='url(%23a)' stroke='url(%23a)' stroke-width='2.4' stroke-linejoin='round' mask='url(%23m)'/%3E%3Cpath d='M73.5 26.9A2.6 2.6 0 1 1 77.6 29.1L73.7 32.9H78.3' fill='none' stroke='%23F2994A' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --logo-h:61px;
  height:var(--logo-h);width:auto;flex:none;
}

/* Beim Ueberfahren die bunte Fassung.
   Auch sie steckt hier drin, aus demselben Grund wie oben.

   Der Wechsel ist hart und nicht weich ueberblendet: content
   laesst sich nicht ueberblenden, weil dabei nicht zwei
   Zustaende einer Eigenschaft ineinander laufen, sondern zwei
   verschiedene Bilder. Weich ginge nur mit einem zweiten
   Element uebereinander, und dafuer muesste das Markup im
   Oxygen-Element angefasst werden.

   focus-visible ist mit dabei, damit das Signet auch bei
   Bedienung per Tastatur reagiert. */
html .brand:hover img,
html .brand:focus-visible img{
  content:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='17 23 64 41.6' width='64' height='41.6' role='img' aria-labelledby='t'%3E%3Ctitle id='t'%3EWolke7Hoch2%3C/title%3E%3Cdefs%3E%3ClinearGradient id='a' gradientUnits='userSpaceOnUse' x1='10' y1='0' x2='92' y2='0'%3E%3Cstop offset='0' stop-color='%23F2994A'/%3E%3Cstop offset='.22' stop-color='%23D96BA0'/%3E%3Cstop offset='.45' stop-color='%238E7CB8'/%3E%3Cstop offset='.7' stop-color='%233D8FA8'/%3E%3Cstop offset='1' stop-color='%2312626F'/%3E%3C/linearGradient%3E%3Cmask id='m' maskUnits='userSpaceOnUse' x='0' y='0' width='100' height='100'%3E%3Crect width='100' height='100' fill='white'/%3E%3Cpath d='M47.5 40.4H61.5L53.2 55.2' fill='none' stroke='black' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M30 63H68A11.5 11.5 0 0 0 69.6 40.1A18.5 18.5 0 0 0 34.6 36.1A13.6 13.6 0 0 0 30 63Z' fill='url(%23a)' stroke='url(%23a)' stroke-width='2.4' stroke-linejoin='round' mask='url(%23m)'/%3E%3Cpath d='M73.5 26.9A2.6 2.6 0 1 1 77.6 29.1L73.7 32.9H78.3' fill='none' stroke='%233D8FA8' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Die Wortmarke in der Fusszeile. Andere Datei, andere Form,
   deshalb auch eine eigene Hoehe. */
.foot__logo{height:42px;width:auto;margin:0 0 20px;display:block;}

@media(max-width:560px){
  html .brand img{--logo-h:53px;}
  .foot__logo{height:32px;}
}

/* ---------------------------------------------------------
   5. ORIGINAL-STYLESHEET
   Unveraendert aus assets/site.css. Entfernt wurden nur der
   overflow-x:hidden am body, weil das position:sticky
   ausser Kraft setzt und die Pin-Sektion blockiert.
   --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--ff);font-weight:400;font-size:clamp(16px,1.05vw,17.5px);
  line-height:1.75;letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  transition:background .3s ease,color .3s ease;
}
img{max-width:100%;display:block;}
a{color:inherit;}
::selection{background:var(--teal);color:#fff;}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);}
.sec{padding-block:var(--sec);position:relative;}
.sec--soft{background:var(--bg-soft);}
.sec--line{border-top:1px solid var(--line);}

/* ---------- Typografie ---------- */
/* color ist hier ausdruecklich gesetzt und nicht geerbt.
   Oxygen legt auf Ueberschriften eine feste dunkle Farbe.
   Ohne diese Zeile bleiben sie im Dunkelmodus dunkel und sind
   auf schwarzem Grund fast unsichtbar. */
h1,h2,h3,h4{font-weight:300;line-height:1.12;letter-spacing:-.022em;margin:0;color:var(--ink);}
h1{font-size:clamp(2.35rem,5.1vw,4.15rem);}
h2{font-size:clamp(2rem,4.4vw,3.4rem);}
h3{font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400;line-height:1.25;}
h4{font-size:1.05rem;font-weight:500;line-height:1.4;}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}
strong{font-weight:500;}
.lead{font-size:clamp(1.08rem,1.6vw,1.3rem);color:var(--ink-soft);line-height:1.7;max-width:62ch;}
.eyebrow{
  font-family:var(--fm);font-size:.72rem;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--teal);margin:0 0 18px;display:block;
}
.hi{color:var(--rose);}
.hi-t{color:var(--teal);}
.mono{font-family:var(--fm);}
.sec__head{max-width:70ch;margin-bottom:clamp(38px,5vw,64px);}
.sec__head p{margin-top:20px;}

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--ink);--btn-fg:var(--bg);
  position:relative;display:inline-flex;align-items:center;gap:12px;
  padding:16px 28px;border:1px solid var(--ink);border-radius:999px;
  background:var(--btn-bg);color:var(--btn-fg);
  font-size:.95rem;font-weight:500;letter-spacing:.01em;text-decoration:none;
  cursor:pointer;overflow:hidden;isolation:isolate;
  transition:color .25s ease,border-color .25s ease,transform .25s ease;
}
.btn span{position:relative;z-index:2;}
.btn::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,var(--rose),var(--amber));
  transform:translateX(-101%);transition:transform .42s cubic-bezier(.4,0,.15,1);
}
.btn:hover::after,.btn:focus-visible::after{transform:translateX(0);}
.btn:hover,.btn:focus-visible{color:#fff;border-color:transparent;}
.btn--ghost{--btn-bg:transparent;--btn-fg:var(--ink);border-color:var(--line);}
.btn--ghost:hover,.btn--ghost:focus-visible{color:#fff;}
.btn--sm{padding:12px 22px;font-size:.88rem;}
.arrow{width:16px;height:16px;flex:none;position:relative;z-index:2;transition:transform .25s ease;}
.btn:hover .arrow{transform:translateX(3px);}

.txtlink{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--teal);padding-bottom:3px;
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.txtlink:hover{color:var(--teal);gap:14px;}

:focus-visible{outline:2px solid var(--teal);outline-offset:3px;border-radius:4px;}

/* ---------- Hintergrundfeld ---------- */
#feld{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.9;}
.page{position:relative;z-index:1;}

/* ---------- Kopfzeile ---------- */
.top{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s ease;
}
.top.is-stuck{border-bottom-color:var(--line);}
.top__in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:76px;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:inherit;}
.brand svg{height:34px;width:auto;flex:none;}
.brand__txt{display:flex;flex-direction:column;line-height:1.1;}
.brand__name{font-size:1rem;font-weight:500;letter-spacing:.005em;line-height:1.1;}
.brand__sub{font-family:var(--fm);font-size:.62rem;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-faint);line-height:1.1;}
.top__act{display:flex;align-items:center;gap:8px;}
@media(max-width:560px){.brand__sub{display:none;}.brand__name{font-size:.95rem;}.brand svg{height:30px;}.top__in{height:68px;}.top__act{gap:6px;}.icobtn,.burger{width:40px;height:40px;}}

.icobtn{
  width:44px;height:44px;display:grid;place-items:center;flex:none;
  background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink);
  cursor:pointer;transition:border-color .2s ease,color .2s ease;font-family:var(--fm);
  font-size:.72rem;font-weight:500;letter-spacing:.06em;
}
.icobtn:hover{border-color:var(--teal);color:var(--teal);}
.icobtn svg{width:18px;height:18px;}
.icobtn .moon{display:none;}
[data-theme="dark"] .icobtn .sun{display:none;}
[data-theme="dark"] .icobtn .moon{display:block;}

.burger{width:44px;height:44px;border:1px solid var(--line);border-radius:999px;background:none;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;}
.burger:hover{border-color:var(--teal);}
.burger i{display:block;width:17px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .3s ease,opacity .2s ease;}
.burger i+i{margin-top:5px;}
.nav-open .burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg);}
.nav-open .burger i:nth-child(2){opacity:0;}
.nav-open .burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg);}
.nav-open .burger i{background:#F4F7F8;}
.nav-open .burger{border-color:rgba(244,247,248,.28);}

/* ---------- Vollbild-Menü ---------- */
.menu{
  position:fixed;inset:0;z-index:55;background:var(--overlay);color:#F4F7F8;
  display:flex;flex-direction:column;justify-content:center;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .34s ease,transform .34s ease,visibility .34s;
  overflow-y:auto;padding:110px var(--gut) 48px;
}
.nav-open .menu{opacity:1;visibility:visible;transform:none;}
.menu__in{max-width:var(--maxw);margin:0 auto;width:100%;display:grid;gap:clamp(34px,5vw,60px);grid-template-columns:1fr;}
.menu a{text-decoration:none;}
.menu__list{list-style:none;margin:0;padding:0;}
.menu__list li{overflow:hidden;}
.menu__list a{
  display:flex;align-items:baseline;gap:16px;padding:9px 0;
  font-size:clamp(1.9rem,5vw,3rem);font-weight:300;letter-spacing:-.02em;line-height:1.15;
  color:#F4F7F8;transform:translateY(105%);transition:color .2s ease;
}
.nav-open .menu__list a{animation:menuIn .5s cubic-bezier(.22,1,.36,1) forwards;}
.menu__list li:nth-child(1) a{animation-delay:.06s;}
.menu__list li:nth-child(2) a{animation-delay:.11s;}
.menu__list li:nth-child(3) a{animation-delay:.16s;}
.menu__list li:nth-child(4) a{animation-delay:.21s;}
.menu__list li:nth-child(5) a{animation-delay:.26s;}
.menu__list li:nth-child(6) a{animation-delay:.31s;}
.menu__list li:nth-child(7) a{animation-delay:.36s;}
@keyframes menuIn{to{transform:translateY(0);}}
.menu__list a:hover{color:var(--amber);}
.menu__num{font-family:var(--fm);font-size:.7rem;letter-spacing:.12em;color:rgba(244,247,248,.4);flex:none;}
.menu__side{display:grid;gap:26px;align-content:start;}
.menu__side h5, .menu__side .menu__kopf{font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,247,248,.45);margin:0 0 10px;}
.menu__side a,.menu__side p{color:#F4F7F8;font-size:1rem;line-height:1.6;margin:0;}
.menu__side a:hover{color:var(--amber);}
.menu__orte{display:flex;flex-wrap:wrap;gap:7px 8px;}
.menu__orte a{font-family:var(--fm);font-size:.72rem;letter-spacing:.04em;color:rgba(244,247,248,.62);border:1px solid rgba(244,247,248,.16);border-radius:999px;padding:5px 11px;}
.menu__orte a:hover{color:var(--overlay);background:#F4F7F8;border-color:#F4F7F8;}
@media(min-width:900px){.menu__in{grid-template-columns:1.25fr .75fr;gap:80px;align-items:start;}}
/* Kopfzeile über dem offenen Menü */
.nav-open .top{background:transparent;backdrop-filter:none;border-bottom-color:transparent;}
.nav-open .brand__name{color:#F4F7F8;}
.nav-open .brand__sub{color:rgba(244,247,248,.55);}
.nav-open .icobtn{color:#F4F7F8;border-color:rgba(244,247,248,.28);}
.nav-open .icobtn:hover{color:var(--amber);border-color:var(--amber);}


/* ---------- Hero ---------- */
.hero{padding-block:clamp(60px,9vw,120px) clamp(72px,9vw,120px);}
.hero__tag{
  display:inline-flex;align-items:center;gap:10px;margin-bottom:30px;
  font-family:var(--fm);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:7px 15px;
  background:color-mix(in srgb,var(--bg) 70%,transparent);
}
.hero__tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--rose);flex:none;}
.hero h1{margin-bottom:28px;max-width:19ch;}
.hero__lead{max-width:56ch;}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;align-items:center;}
.hero__note{font-family:var(--fm);font-size:.72rem;letter-spacing:.05em;color:var(--ink-faint);}
.hero__facts{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:clamp(52px,7vw,84px);}
@media(min-width:720px){.hero__facts{grid-template-columns:repeat(3,1fr);}}
.fact{background:var(--card);padding:26px 24px;}
.fact b{display:block;font-family:var(--fm);font-size:clamp(1.5rem,3vw,2rem);font-weight:400;color:var(--teal);line-height:1.1;margin-bottom:8px;}
.fact span{font-size:.9rem;color:var(--ink-soft);line-height:1.5;display:block;}

/* ---------- Karten / Leistungen ---------- */
.grid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;}
@media(min-width:640px){.grid--2{grid-template-columns:repeat(2,1fr);}}
@media(min-width:940px){.grid--3{grid-template-columns:repeat(3,1fr);}}
.card{
  background:var(--card);padding:clamp(26px,3vw,38px);
  display:flex;flex-direction:column;gap:14px;position:relative;
  transition:background .25s ease;
}
.card:hover{background:var(--bg-soft);}
.card__num{font-family:var(--fm);font-size:.72rem;letter-spacing:.14em;color:var(--ink-faint);}
.card h3{margin-bottom:2px;}
.card p{color:var(--ink-soft);font-size:.97rem;}
.card ul{margin:0;padding:0;list-style:none;display:grid;gap:9px;}
.card li{position:relative;padding-left:20px;font-size:.93rem;color:var(--ink-soft);line-height:1.55;}
.card li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1.5px;background:var(--teal);}
.card__foot{margin-top:auto;padding-top:8px;}
.card--flag{background:linear-gradient(180deg,color-mix(in srgb,var(--rose) 6%,var(--card)),var(--card));}
.card--flag:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--rose) 10%,var(--card)),var(--card));}
.tag-free{
  align-self:flex-start;font-family:var(--fm);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;background:var(--rose);border-radius:999px;padding:5px 11px;
}

/* ---------- Ablauf ---------- */
.steps{display:grid;gap:0;border-top:1px solid var(--line);}
.step{display:grid;gap:6px 30px;padding:30px 0;border-bottom:1px solid var(--line);align-items:start;}
@media(min-width:820px){.step{grid-template-columns:88px 300px 1fr;gap:30px;}}
.step__n{font-family:var(--fm);font-size:.95rem;color:var(--teal);letter-spacing:.05em;}
.step p{color:var(--ink-soft);font-size:.97rem;}
.step--free .step__n{color:var(--rose);}

/* ---------- Arbeiten ---------- */
.works{display:grid;gap:clamp(24px,3vw,34px);}
@media(min-width:760px){.works{grid-template-columns:repeat(2,1fr);}}
.work{display:flex;flex-direction:column;gap:16px;text-decoration:none;color:inherit;}
.work__img{
  position:relative;aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--line);background:var(--bg-soft);
}
.work__img img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.3,1);}
.work:hover .work__img img{transform:scale(1.035);}
.work__meta{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap;}
.work__meta span{font-family:var(--fm);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);}
.work p{color:var(--ink-soft);font-size:.95rem;}

/* Bild-Platzhalter, solange nichts im Ordner bilder/ liegt */
.ph{
  position:absolute;inset:0;display:grid;place-content:center;gap:8px;text-align:center;padding:20px;
  background:
    linear-gradient(135deg,color-mix(in srgb,var(--teal) 8%,transparent),color-mix(in srgb,var(--rose) 8%,transparent)),
    repeating-linear-gradient(45deg,var(--line) 0 1px,transparent 1px 11px);
  color:var(--ink-faint);font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;
}
.ph b{font-weight:500;color:var(--ink-soft);font-size:.78rem;}

/* ---------- Über ---------- */
.about{display:grid;gap:clamp(30px,5vw,64px);align-items:center;}
@media(min-width:860px){.about{grid-template-columns:.85fr 1.15fr;}}
.about__img{position:relative;aspect-ratio:4/5;border-radius:var(--r);overflow:hidden;border:1px solid var(--line);background:var(--bg-soft);}
.about__img img{position:relative;z-index:2;width:100%;height:100%;object-fit:cover;}
.about__quote{border-left:2px solid var(--rose);padding-left:22px;margin:26px 0 0;font-size:1.1rem;font-weight:300;line-height:1.6;}

/* ---------- Laufband ---------- */
.band{border-block:1px solid var(--line);padding:18px 0;overflow:hidden;background:var(--bg-soft);}
.band__track{display:flex;width:max-content;gap:0;animation:band 46s linear infinite;}
.band:hover .band__track{animation-play-state:paused;}
.band__track span{
  font-family:var(--fm);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-faint);padding-inline:20px;white-space:nowrap;display:inline-flex;align-items:center;gap:20px;
}
.band__track span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--teal);opacity:.6;}
@keyframes band{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ---------- Ortsliste ---------- */
.orte{display:grid;gap:clamp(28px,4vw,52px);}
@media(min-width:760px){.orte{grid-template-columns:repeat(2,1fr);}}
@media(min-width:1000px){.orte{grid-template-columns:repeat(3,1fr);}}
.orte__hinweis{font-size:.9rem;color:var(--ink-soft);margin-top:14px;}
.orte h4{font-family:var(--fm);font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--teal);margin:0 0 16px;}
.orte ul{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--line);}
.orte li{border-bottom:1px solid var(--line);}
.orte a{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 2px;text-decoration:none;font-size:.98rem;
  transition:color .2s ease,padding-left .2s ease;
}
.orte a:hover{color:var(--teal);padding-left:8px;}
.orte a::after{content:"→";font-family:var(--fm);font-size:.85rem;color:var(--ink-faint);}
.orte a:hover::after{color:var(--teal);}

/* ---------- FAQ ---------- */
.faq{border-top:1px solid var(--line);max-width:900px;}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{
  cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:clamp(1.02rem,1.6vw,1.18rem);font-weight:400;line-height:1.45;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{
  content:"";position:absolute;right:6px;top:32px;width:12px;height:12px;
  border-right:1.5px solid var(--teal);border-bottom:1.5px solid var(--teal);
  transform:translateY(-50%) rotate(45deg);transition:transform .25s ease;
}
.faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}
.faq details[open] summary{color:var(--teal);}
.faq__a{padding:0 40px 24px 0;color:var(--ink-soft);font-size:.98rem;max-width:76ch;}

/* ---------- Kontakt ---------- */
.kontakt{display:grid;gap:clamp(34px,5vw,70px);}
@media(min-width:900px){.kontakt{grid-template-columns:.85fr 1.15fr;}}
.kontakt__side dl{margin:0;display:grid;gap:22px;}
.kontakt__side dt{font-family:var(--fm);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-faint);margin-bottom:5px;}
.kontakt__side dd{margin:0;font-size:1rem;line-height:1.6;}
.kontakt__side a{text-decoration:none;border-bottom:1px solid var(--line);}
.kontakt__side a:hover{color:var(--teal);border-color:var(--teal);}

form{display:grid;gap:18px;}
.row{display:grid;gap:18px;}
@media(min-width:640px){.row{grid-template-columns:1fr 1fr;}}
.f{display:grid;gap:8px;}
label{font-family:var(--fm);font-size:.7rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-faint);}
input,select,textarea{
  font-family:var(--ff);font-size:1rem;color:var(--ink);background:var(--field);
  border:1px solid var(--line);border-radius:10px;padding:13px 15px;width:100%;
  transition:border-color .2s ease,box-shadow .2s ease;
}
textarea{min-height:132px;resize:vertical;line-height:1.6;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px color-mix(in srgb,var(--teal) 15%,transparent);}
.check{display:flex;gap:12px;align-items:flex-start;font-family:var(--ff);font-size:.86rem;color:var(--ink-soft);letter-spacing:0;text-transform:none;line-height:1.55;}
.check input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--teal);}
.check a{color:var(--ink);}
.hp{position:absolute;left:-9999px;opacity:0;height:0;overflow:hidden;}
.formnote{font-size:.82rem;color:var(--ink-faint);}

/* ---------- CTA-Band ---------- */
.cta{background:var(--overlay);color:#F4F7F8;border-radius:var(--r);padding:clamp(38px,6vw,72px);position:relative;overflow:hidden;}
.cta::after{content:"";position:absolute;right:-70px;top:-70px;width:280px;height:280px;border-radius:50%;
  background:radial-gradient(circle,color-mix(in srgb,var(--rose) 40%,transparent),transparent 70%);}
.cta h2,.cta p{position:relative;z-index:2;}
.cta p{color:rgba(244,247,248,.7);margin-top:18px;max-width:56ch;}
.cta .btn{position:relative;z-index:2;margin-top:32px;--btn-bg:#F4F7F8;--btn-fg:#14171A;border-color:#F4F7F8;}

/* ---------- Fußzeile ---------- */
.foot{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,72px) 34px;background:var(--bg-soft);}
.foot__grid{display:grid;gap:34px;}
@media(min-width:820px){.foot__grid{grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px;}}
.foot h5, .foot .foot__kopf{font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin:0 0 14px;}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px;}
.foot a{text-decoration:none;font-size:.93rem;color:var(--ink-soft);}
.foot a:hover{color:var(--teal);}
.foot__brand p{font-size:.93rem;color:var(--ink-soft);max-width:34ch;margin-top:16px;}
.foot__bar{
  display:flex;flex-wrap:wrap;gap:12px 26px;justify-content:space-between;align-items:center;
  margin-top:clamp(38px,5vw,56px);padding-top:22px;border-top:1px solid var(--line);
  font-family:var(--fm);font-size:.72rem;letter-spacing:.05em;color:var(--ink-faint);
}
.foot__bar a{font-family:var(--fm);font-size:.72rem;color:var(--ink-faint);}

/* ---------- Unterseiten-Kopf ---------- */
.phead{padding-block:clamp(52px,7vw,92px) clamp(30px,4vw,48px);}
.crumb{font-family:var(--fm);font-size:.72rem;letter-spacing:.08em;color:var(--ink-faint);margin-bottom:26px;display:flex;gap:9px;flex-wrap:wrap;}
.crumb a{text-decoration:none;}
.crumb a:hover{color:var(--teal);}
.phead h1{font-size:clamp(2.1rem,5vw,3.7rem);max-width:20ch;margin-bottom:24px;}

/* ---------- Rechtstext ---------- */
.legal{max-width:74ch;}
.legal h2{font-size:clamp(1.4rem,2.4vw,1.9rem);margin:52px 0 16px;}
.legal h3{font-size:1.1rem;font-weight:500;margin:30px 0 10px;}
.legal p,.legal li{color:var(--ink-soft);font-size:.98rem;}
.legal ul{padding-left:20px;display:grid;gap:8px;margin:0 0 1.1em;}
.legal a{color:var(--ink);}

/* ---------- Sprache ---------- */
[data-lang-hidden]{display:none !important;}

/* ---------- Sichtbar werden beim Scrollen ---------- */
.js .rise{opacity:0;transform:translateY(16px);transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}
.js .rise.in{opacity:1;transform:none;}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;}
  .rise{opacity:1;transform:none;}
  .band__track{animation:none;}
}
.nav-open body,body.nav-open{overflow:hidden;}
/* ---------------------------------------------------------
   6. VOLLBILD-MENUE FOLGT DEM HELL-/DUNKELMODUS
   Im Original war das Menue immer dunkel, weil Hintergrund
   und Schriftfarben fest verdrahtet waren (--overlay und
   #F4F7F8). --overlay faerbt aber auch das CTA-Band unten,
   das dunkel bleiben soll. Deshalb bekommt das Menue hier
   eigene Variablen.
   --------------------------------------------------------- */
:root{
  --menu-bg:var(--bg);
  --menu-ink:var(--ink);
  --menu-ink-soft:rgba(20,23,26,.5);
  --menu-ink-faint:rgba(20,23,26,.62);
  --menu-line:rgba(20,23,26,.18);
  --menu-chip-ink:#FFFFFF;
}
[data-theme="dark"]{
  --menu-bg:#0A0C0E;
  --menu-ink:#F4F7F8;
  --menu-ink-soft:rgba(244,247,248,.45);
  --menu-ink-faint:rgba(244,247,248,.62);
  --menu-line:rgba(244,247,248,.16);
  --menu-chip-ink:#0A0C0E;
}
.menu{background:var(--menu-bg);color:var(--menu-ink);}
.menu__list a{color:var(--menu-ink);}
.menu__num{color:var(--menu-ink-soft);}
.menu__side h5, .menu__side .menu__kopf{color:var(--menu-ink-soft);}
.menu__side a,.menu__side p{color:var(--menu-ink);}
.menu__orte a{color:var(--menu-ink-faint);border-color:var(--menu-line);}
.menu__orte a:hover{color:var(--menu-chip-ink);background:var(--menu-ink);border-color:var(--menu-ink);}

/* ---------------------------------------------------------
   7. NEUES DESIGN
   Eigene Klassen mit Praefix nd-, damit nichts mit dem
   bestehenden Design kollidiert.
   --------------------------------------------------------- */

/* ---------- Hero ---------- */
/* Das Kind muss auf volle Hoehe gestreckt werden, sonst bleibt
   die restliche Bildschirmhoehe als Leerraum unter dem Inhalt
   stehen. Deshalb hier KEIN align-content am Abschnitt selbst. */
.nd-hero{
  min-height:100svh;
  display:grid;
  /* oben viel, unten wenig: der Fusstext soll nicht vom
     unteren Bildschirmrand wegruecken */
  padding-block:clamp(110px,14vh,170px) clamp(20px,3vh,38px);
  position:relative;
  overflow:hidden;
}
.nd-hero .wrap{
  display:grid;
  align-content:space-between;
  gap:clamp(32px,6vh,70px);
  position:relative;z-index:1;
  /* Ohne width:100% schrumpft das Grid-Element auf
     Inhaltsbreite und der Hero steht schmaler als
     alle anderen Sektionen. */
  width:100%;
}

/* Farbschleier im Hintergrund, sehr zurueckhaltend */
.nd-hero::before{
  content:"";position:absolute;z-index:0;
  inset:-20% -10% auto auto;
  width:min(70vw,900px);aspect-ratio:1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--rose) 22%, transparent), transparent 70%),
    radial-gradient(closest-side, color-mix(in srgb, var(--amber) 18%, transparent), transparent 70%);
  background-position:30% 30%, 70% 70%;
  background-repeat:no-repeat;
  background-size:75% 75%, 65% 65%;
  filter:blur(30px);
  animation:ndSchleier 18s ease-in-out infinite alternate;
  pointer-events:none;
}
@keyframes ndSchleier{
  from{transform:translate3d(0,0,0) scale(1);}
  to{transform:translate3d(-4%,3%,0) scale(1.08);}
}

/* Kopfzeile ueber dem Titel */
.nd-hero__kopf{
  display:flex;flex-wrap:wrap;gap:8px 22px;align-items:baseline;
  font-family:var(--fm);font-size:.84rem;letter-spacing:.06em;
}
.nd-hero__label{color:var(--ink-faint);}
.nd-hero__koord{color:var(--teal);}

/* Der Titel */
.nd-hero__claim{
  font-size:clamp(2.5rem,7vw,6rem);
  font-weight:300;
  line-height:1.04;
  letter-spacing:-.035em;
  margin:0;
  max-width:20ch;
}

/* Die Schluesselwoerter im Verlauf.
   background-clip:text faerbt die Buchstaben mit dem Verlauf.
   Der Verlauf ist breiter als der Text und wandert langsam. */
.nd-hero__claim .grad{
  background:linear-gradient(100deg,
    var(--teal) 0%,
    var(--rose) 42%,
    var(--amber) 72%,
    var(--teal) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ndVerlauf 12s linear infinite;
}
@keyframes ndVerlauf{
  from{background-position:0% 50%;}
  to{background-position:280% 50%;}
}

.nd-hero__ort-inline{
  display:block;
  font-size:clamp(1.05rem,1.9vw,1.6rem);
  line-height:1.25;
  letter-spacing:-.015em;
  color:var(--ink-soft);
  margin-top:clamp(16px,2.2vw,28px);
}

.nd-hero__foot{
  display:grid;
  gap:24px;
  align-items:end;
  /* Ohne diesen Abstand klebt der Fusstext am unteren Rand des
     Bildschirms, weil .nd-hero .wrap auf space-between steht.
     Der Wert hebt ihn spuerbar an, ohne den Titel zu
     verschieben. */
  /* Abstand unter dem Fusstext. Vorher bis 76, davor sogar
     bis 130. */
  margin-bottom:clamp(14px,2.5vh,34px);
}


.nd-hero__scroll{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.82rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink-faint);
  text-decoration:none;
}
.nd-hero__scroll svg{width:13px;height:20px;animation:ndScroll 2.2s ease-in-out infinite;}
@keyframes ndScroll{0%,100%{transform:translateY(0)}50%{transform:translateY(4px)}}
.nd-hero__scroll:hover{color:var(--ink);}

.nd-hero__ort{
  font-size:clamp(1rem,1.25vw,1.15rem);line-height:1.55;
  color:var(--ink-soft);
  max-width:46ch;
  margin:0;
  justify-self:end;
  text-align:right;
}
@media(max-width:820px){
  .nd-hero__ort{justify-self:start;text-align:left;}
}

/* Wer Bewegung reduziert haben will, bekommt Farbe ohne Bewegung */
@media(prefers-reduced-motion:reduce){
  .nd-hero__scroll svg,
  .nd-hero__claim .grad,
  .nd-hero::before{animation:none;}
}

/* ---------- Sektionen im neuen Design ---------- */
/* 7vw statt 13vw. Bei 1800 Pixel Fensterbreite waren das
   vorher 180 Pixel oben und unten, zwischen zwei Sektionen
   also 360. Jetzt hoechstens 110, zusammen 220. */
.nd-sec{padding-block:clamp(60px,7vw,110px);}
.nd-sec__titel{
  font-size:clamp(.82rem,1.1vw,.9rem);
  font-family:var(--fm);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--ink-faint);
  /* Abstand vom Sektionstitel zum Inhalt, vorher bis 72 */
  margin:0 0 clamp(26px,3.2vw,46px);
}

/* ---------- Leistungen als Zeilen ----------
   Die Zeilen waren zu brav: ueberall dieselbe Groesse, in der
   Mitte ein totes Loch zwischen Titel und Text, beim
   Ueberfahren nur ein kleiner Versatz.

   Jetzt:
     1. Die Titelspalte ist nicht mehr fest breit, sondern so
        breit wie der Titel. Dadurch rueckt der Text heran und
        die Kante wandert von Zeile zu Zeile.
     2. Beim Ueberfahren faehrt ein Farbfeld von links ueber
        die ganze Fensterbreite ein, die Schrift wechselt auf
        Weiss oder Schwarz.
     3. Jede Zeile hat ihre eigene Akzentfarbe.
     4. Rechts faehrt ein Pfeil ein.
   ---------------------------------------------------------- */
/* Keine Haarlinien mehr. Die Zeile wird beim Ueberfahren
   ohnehin als Ganzes farbig, das traegt die Gliederung. Ohne
   Linien braucht es dafuer mehr Abstand zwischen den Zeilen,
   sonst kleben sie aneinander. */
.nd-liste{border-top:0;}

.nd-zeile{
  position:relative;
  isolation:isolate;
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  padding-block:clamp(30px,3.6vw,48px);
  /* Luft zwischen den Schlaufen. Ohne das beruehren sie
     einander an den Enden. */
  margin-block:clamp(10px,1.6vw,24px);
  text-decoration:none;color:inherit;
  -webkit-tap-highlight-color:transparent;
  /* Vorgabe, wird pro Zeile weiter unten gesetzt */
  --akzent:var(--teal);
  transition:color .3s ease;
}
@media(min-width:900px){
  .nd-zeile{
    /* auto statt fester Breite: die Titelspalte ist so breit
       wie ihr Inhalt, der Text folgt unmittelbar. */
    grid-template-columns:88px auto minmax(0,1fr);
    gap:clamp(26px,3.5vw,58px);
    /* center statt baseline. An der Grundlinie haengten sich
       Nummer und Text an die Unterkante des riesigen Titels
       und sassen dadurch viel zu tief. Jetzt liegen alle drei
       Spalten auf gleicher Mitte. */
    align-items:center;
  }

  /* Jede zweite Zeile spiegelt sich: Text links, Titel in der
     Mitte, Nummer rechts aussen. Das Markup bleibt in der
     Reihenfolge Nummer, Titel, Text, nur die Spalten werden
     ausdruecklich zugewiesen. Dadurch pendelt der Blick beim
     Scrollen hin und her statt an einer Kante entlangzulaufen. */
  .nd-zeile:nth-child(even){
    grid-template-columns:minmax(0,1fr) auto 88px;
  }
  /* grid-row:1 ist zwingend. Ohne das setzt der Browser jedes
     Element in eine neue Zeile, weil die Spalten hier in der
     Reihenfolge 3, 2, 1 belegt werden und rueckwaerts nicht
     gefuellt werden kann. */
  .nd-zeile:nth-child(even) .nd-zeile__text{
    grid-column:1;grid-row:1;
    justify-self:end;
    text-align:right;
  }
  .nd-zeile:nth-child(even) .nd-zeile__titel{
    grid-column:2;grid-row:1;
  }
  .nd-zeile:nth-child(even) .nd-zeile__num{
    grid-column:3;grid-row:1;
    justify-self:end;
  }
  /* Der Pfeil kommt bei gespiegelten Zeilen von links */
  .nd-zeile:nth-child(even)::after{
    content:"←";
    right:auto;left:2px;
    transform:translateY(-50%) translateX(14px);
  }
  .nd-zeile:nth-child(even):hover::after,
  .nd-zeile:nth-child(even):focus-visible::after{transform:translateY(-50%) translateX(0);}
}

/* Das Farbfeld.
   Statt einer gezeichneten Linie liegt jetzt eine
   pastellige Flaeche hinter der Zeile.

   Die Form kommt aus acht Eckradien. Die ersten vier gelten
   waagrecht und beziehen sich auf die BREITE der Zeile, die
   letzten vier senkrecht auf die HOEHE. Bei rund 1200 Pixel
   Breite ergaeben 50 Prozent vorne einen Radius von 600, und
   daraus wuerde eine Ellipse. Deshalb vorne kleine Werte,
   hinten grosse.

   Radien lassen sich weich ueberblenden, eine Zeichnung
   nicht. Genau deshalb steht hier border-radius und keine
   SVG-Maske mehr: beim Ueberfahren wandert die Form.
   ---------------------------------------------------------- */
.nd-zeile::before{
  content:"";
  position:absolute;z-index:-1;
  inset:-8px -22px;
  background-color:color-mix(in srgb, var(--akzent) 13%, var(--bg));
  border-radius:9% 7% 8% 10% / 52% 48% 54% 46%;
  transition:border-radius .7s cubic-bezier(.22,1,.36,1),
             background-color .5s ease,
             transform .7s cubic-bezier(.22,1,.36,1);
}
.nd-zeile:hover::before,
.nd-zeile:focus-visible::before{
  background-color:color-mix(in srgb, var(--akzent) 20%, var(--bg));
}

/* Ruhezustand und Ueberfahren, jeweils eigene Form pro Zeile.

   Die Werte sind bewusst weit gestreut: waagrecht zwischen 3
   und 24 Prozent, senkrecht zwischen 24 und 82. Je groesser
   der Unterschied zwischen den vier Ecken, desto schiefer die
   Flaeche. Waeren alle vier gleich, kaeme eine saubere
   Kapsel heraus.

   Beim Ueberfahren wandert die Form, bleibt aber in derselben
   Groessenordnung. Die Flaeche soll sich bewegen, nicht
   verwandeln. */
.nd-zeile:nth-child(1)::before{border-radius:22% 4% 9% 17% / 78% 26% 46% 62%;transform:rotate(.4deg);}
.nd-zeile:nth-child(1):hover::before{border-radius:6% 20% 19% 5% / 34% 70% 30% 74%;transform:rotate(-.5deg);}

.nd-zeile:nth-child(2)::before{border-radius:4% 19% 5% 12% / 30% 76% 26% 68%;transform:rotate(-.55deg);}
.nd-zeile:nth-child(2):hover::before{border-radius:18% 5% 21% 4% / 72% 28% 74% 30%;transform:rotate(.45deg);}

.nd-zeile:nth-child(3)::before{border-radius:24% 6% 3% 15% / 62% 24% 80% 34%;transform:rotate(.65deg);}
.nd-zeile:nth-child(3):hover::before{border-radius:4% 21% 18% 5% / 28% 74% 32% 78%;transform:rotate(-.35deg);}

.nd-zeile:nth-child(4)::before{border-radius:5% 14% 23% 3% / 82% 40% 28% 66%;transform:rotate(-.3deg);}
.nd-zeile:nth-child(4):hover::before{border-radius:20% 4% 6% 18% / 32% 72% 76% 30%;transform:rotate(.55deg);}

.nd-zeile:nth-child(5)::before{border-radius:19% 3% 11% 6% / 26% 68% 44% 80%;transform:rotate(.6deg);}
.nd-zeile:nth-child(5):hover::before{border-radius:4% 17% 22% 5% / 74% 30% 78% 34%;transform:rotate(-.45deg);}

.nd-zeile:nth-child(6)::before{border-radius:3% 21% 6% 18% / 66% 32% 78% 24%;transform:rotate(-.65deg);}
.nd-zeile:nth-child(6):hover::before{border-radius:19% 5% 20% 4% / 28% 76% 34% 70%;transform:rotate(.4deg);}

.nd-zeile:nth-child(7)::before{border-radius:12% 6% 23% 4% / 38% 64% 26% 76%;transform:rotate(.45deg);}
.nd-zeile:nth-child(7):hover::before{border-radius:5% 18% 6% 20% / 70% 30% 74% 32%;transform:rotate(-.55deg);}

@media(prefers-reduced-motion:reduce){
  .nd-zeile::before{transition:background-color .3s ease;}
}

/* Der Pfeil rechts */
.nd-zeile::after{
  content:"→";
  position:absolute;right:2px;top:50%;
  transform:translateY(-50%) translateX(-14px);
  font-family:var(--fm);font-size:1.15rem;
  color:var(--akzent);
  opacity:0;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1);
}
.nd-zeile:hover::after,
.nd-zeile:focus-visible::after{opacity:1;transform:translateY(-50%) translateX(0);}

/* Die Fuellung ist pastellig, deshalb bleiben alle Schriften
   auf ihren normalen Farben. Der Farbverlauf auf dem Titel
   darf dadurch auch beim Ueberfahren weiterlaufen. */

.nd-zeile__num{
  font-family:var(--fm);font-size:.82rem;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-faint);
  transition:color .3s ease;
}
/* Der Titel traegt denselben laufenden Farbverlauf wie die
   Schluesselwoerter im Hero. background-clip faerbt die
   Buchstaben, die Schriftfarbe selbst ist durchsichtig.
   html body, damit die Regel gegen die Farbabsicherung in
   Abschnitt 12 gewinnt. */
html body .nd-zeile__titel{
  font-size:clamp(2.1rem,4.4vw,3.8rem);
  font-weight:300;line-height:1.02;letter-spacing:-.028em;
  white-space:nowrap;
  background:linear-gradient(100deg,
    var(--teal) 0%,
    var(--rose) 42%,
    var(--amber) 72%,
    var(--teal) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ndVerlauf 12s linear infinite;
}


@media(max-width:900px){
  .nd-zeile__titel{white-space:normal;}
}
.nd-zeile__text{
  font-size:clamp(1.02rem,1.3vw,1.2rem);line-height:1.55;
  color:var(--ink-soft);max-width:44ch;
  transition:color .3s ease;
}

/* Akzentfarbe pro Zeile. Sie faerbt Schlaufe, Fuellung und
   Pfeil. Die Kontrastfrage bei Amber stellt sich hier nicht,
   weil die Fuellung pastellig bleibt und die Schrift ihre
   normale Farbe behaelt. */
.nd-zeile:nth-child(1){--akzent:var(--teal);}
.nd-zeile:nth-child(2){--akzent:var(--rose);}
.nd-zeile:nth-child(3){--akzent:var(--amber);}
.nd-zeile:nth-child(4){--akzent:var(--teal);}
.nd-zeile:nth-child(5){--akzent:var(--rose);}
.nd-zeile:nth-child(6){--akzent:var(--amber);}
.nd-zeile:nth-child(7){--akzent:var(--rose);}

/* Die hervorgehobene Zeile: der kostenlose Website-Check */
.nd-zeile--hell .nd-zeile__num{color:var(--rose);}

@media(prefers-reduced-motion:reduce){
  .nd-zeile::before{transition:none;}
  .nd-zeile::after{transition:none;}
}

/* ---------------------------------------------------------
   8. NEUES DESIGN · ZWEITE RUNDE
   Version 1.3 · 25.08.2026, 19:10 Uhr

   Grund: Leistungen, Ablauf und Regionen sahen identisch aus,
   drei Mal dasselbe Muster aus Mono-Label, Haarlinien und
   dreispaltiger Zeile. Ohne Wechsel in Dichte, Ausrichtung
   und Farbwert entsteht kein Rhythmus.

   Die grossen Zeilen aus Abschnitt 7 bleiben ausschliesslich
   den Leistungen vorbehalten. Alles Folgende bekommt eine
   eigene Handschrift:
     Ablauf    grosse Geisterziffer, versetzte Treppe, keine Linien
     Arbeiten  asymmetrisches Raster, ungleiche Bildformate
     Regionen  dicht, kleine Mono-Schrift, ruhiger Gegenpol
     Kontakt   vollbreites, leicht abgesetztes Feld als Schlusspunkt

   Farbe kommt nur als Akzent vor: Teal und Rose in Ziffern,
   Marken und Linien. Keine flaechigen Farbbloecke.

   Neu in 1.3: die Rueckmeldung des Kontaktformulars ganz
   unten bei nd-meldung.
   --------------------------------------------------------- */

/* ---------- Ablauf: Treppe mit Geisterziffer ---------- */
html .nd-steps{
  list-style:none;margin:0;padding:0;
  display:grid;gap:clamp(16px,3vw,44px);
  counter-reset:none;
}
html .nd-step{
  position:relative;
  padding-block:clamp(20px,3vw,36px);
  /* Versatz der Stufe. Ziffer und Text haengen beide daran,
     dadurch ruecken sie gemeinsam ein. */
  --v:0px;
  /* Grundabstand zwischen Ziffer und Text */
  --z:clamp(56px,9vw,120px);
}

/* Die Ziffer liegt hinter dem Text und traegt die Bewegung.
   Sie ist Dekoration, im Markup deshalb aria-hidden. */
html .nd-step__ziffer{
  position:absolute;left:var(--v);top:50%;
  transform:translateY(-52%);
  z-index:0;pointer-events:none;
  font-family:var(--fm);font-weight:500;
  font-size:clamp(4rem,10vw,9.5rem);
  line-height:1;letter-spacing:-.05em;
  color:color-mix(in srgb,var(--teal) 15%,transparent);
}
/* Jede Stufe bekommt ihre eigene Farbe. Die Reihenfolge
   laeuft Rose, Teal, Amber und beginnt dann von vorne. */
html .nd-step:nth-child(1) .nd-step__ziffer{color:color-mix(in srgb,var(--rose) 18%,transparent);}
html .nd-step:nth-child(2) .nd-step__ziffer{color:color-mix(in srgb,var(--teal) 16%,transparent);}
html .nd-step:nth-child(3) .nd-step__ziffer{color:color-mix(in srgb,var(--amber) 20%,transparent);}
html .nd-step:nth-child(4) .nd-step__ziffer{color:color-mix(in srgb,var(--rose) 14%,transparent);}
html .nd-step:nth-child(5) .nd-step__ziffer{color:color-mix(in srgb,var(--teal) 20%,transparent);}

html .nd-step__inhalt{
  position:relative;z-index:1;
  max-width:54ch;
  margin-left:calc(var(--v) + var(--z));
}

/* Die Treppe. Jede Stufe rueckt weiter ein, dadurch wandert
   der Blick nach unten rechts. Erst ab 900px, darunter wuerde
   der Text sonst zu schmal. */
@media(min-width:900px){
  html .nd-step:nth-child(2){--v:5vw;}
  html .nd-step:nth-child(3){--v:10vw;}
  html .nd-step:nth-child(4){--v:15vw;}
  html .nd-step:nth-child(5){--v:20vw;}
}

html .nd-step__marke{
  display:block;margin-bottom:10px;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--rose);
}
html .nd-step__titel{
  font-size:clamp(1.6rem,3.2vw,2.7rem);
  font-weight:300;line-height:1.1;letter-spacing:-.028em;
}
html .nd-step__text{
  margin:14px 0 0;
  font-size:clamp(1rem,1.15vw,1.08rem);line-height:1.62;
  color:var(--ink-soft);
}

/* ---------- Arbeiten: asymmetrisches Raster ---------- */
html .nd-works{display:grid;gap:clamp(50px,7vw,90px);}

@media(min-width:900px){
  html .nd-works{
    grid-template-columns:repeat(12,1fr);
    column-gap:clamp(30px,4vw,64px);
    row-gap:0;
  }
  /* Gross links, klein rechts versetzt, dann gespiegelt.
     Die negativen Werte lassen die Bloecke ineinandergreifen,
     dadurch entsteht die Unruhe, die dem Raster gefehlt hat. */
  html .nd-works .nd-work:nth-child(1){grid-column:1 / 8;}
  html .nd-works .nd-work:nth-child(2){grid-column:9 / 13;margin-top:clamp(70px,10vw,170px);}
  html .nd-works .nd-work:nth-child(3){grid-column:2 / 7;margin-top:clamp(40px,6vw,90px);}
  html .nd-works .nd-work:nth-child(4){grid-column:7 / 13;margin-top:clamp(-10px,2vw,40px);}
}

html .nd-work{display:grid;gap:16px;align-content:start;}

/* Ungleiche Bildformate. Genau das fehlte vorher: vier Mal
   4/3 nebeneinander wirkt wie ein Katalog. */
html .nd-work__img{
  position:relative;overflow:hidden;
  background:var(--bg-soft);
  aspect-ratio:4/3;
  margin-bottom:6px;
}
html .nd-works .nd-work:nth-child(2) .nd-work__img{aspect-ratio:3/4;}
html .nd-works .nd-work:nth-child(3) .nd-work__img{aspect-ratio:1/1;}
html .nd-works .nd-work:nth-child(4) .nd-work__img{aspect-ratio:16/10;}

html .nd-work__img img{
  position:relative;z-index:2;
  width:100%;height:100%;object-fit:cover;
  transition:transform .7s cubic-bezier(.2,.7,.3,1);
}
html .nd-work:hover .nd-work__img img{transform:scale(1.035);}

html .nd-work__ph{
  position:absolute;inset:0;z-index:1;
  display:grid;place-content:center;gap:6px;text-align:center;
  font-family:var(--fm);color:var(--ink-faint);
}
html .nd-work__ph b{font-size:1rem;color:var(--ink-soft);font-weight:500;}
html .nd-work__ph span{font-size:.74rem;}

html .nd-work__meta{
  display:flex;align-items:center;gap:10px;
  font-family:var(--fm);font-size:.74rem;font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;
  color:var(--teal);
}
html .nd-work__meta::before{
  content:"";width:22px;height:1px;background:var(--teal);flex:none;
}
html .nd-work__titel{
  font-size:clamp(1.4rem,2.2vw,1.95rem);
  font-weight:300;line-height:1.16;letter-spacing:-.025em;
  transition:color .25s ease;
}
html .nd-work:hover .nd-work__titel{color:var(--teal);}
html .nd-work__text{
  font-size:1rem;line-height:1.6;
  color:var(--ink-soft);max-width:42ch;margin:0;
}

/* ---------- Regionen als Bubbles ----------
   Aus der dichten Liste wird eine Wolke, und zwar woertlich:
   Jeder Ort ist eine Wolke, die Groessen wechseln, sie stehen
   leicht schief und richten sich beim Ueberfahren auf.

   Am HTML aendert sich nichts: Es bleiben Regionsueberschrift,
   ul und li mit je einem Link darin.
   ---------------------------------------------------------- */
html .nd-orte{
  display:grid;
  gap:clamp(38px,5vw,64px);
}

html .nd-orte__region{
  margin:0 0 18px;
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-faint);
}

/* Die Wolke */
html .nd-orte ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;
  gap:clamp(8px,1vw,14px);
  align-items:center;
}

html .nd-orte a,
html .nd-orte a:link,
html .nd-orte a:visited,
html .nd-orte a:hover,
html .nd-orte a:focus,
html .nd-orte a:active{
  text-decoration:none;
  -webkit-tap-highlight-color:transparent;
}
html .nd-orte a{
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;
  /* Rundum gleich viel Polster. Die Wolke hat jetzt auch unten
     Buckel, der Text muss deshalb von allen vier Seiten weit
     genug weg sein. */
  padding:1.35em 2.1em;
  line-height:1.25;
  white-space:nowrap;
  text-align:center;
  --akz:var(--teal);

  /* DIE WOLKENFORM.
     Bis Version 4.5 lag hier eine SVG-Maske. Sie hatte zwei
     Nachteile: Unten war die Wolke flach, weil darunter ein
     liegendes Rechteck steckte, und eine Maske laesst sich
     nicht ueberblenden, das Ueberfahren konnte also nur die
     Farbe aendern.

     Jetzt ist es ein clip-path aus 64 Punkten. Beide Formen,
     Ruhe und Ueberfahren, haben dieselbe Punktzahl. Nur
     deshalb kann der Browser weich von einer zur anderen
     rechnen. Bei ungleicher Punktzahl springt es.

     Die Punkte sind nicht von Hand gesetzt. Sie liegen auf der
     Aussenkontur von neun einander ueberlappenden Kreisen,
     vom Mittelpunkt aus als Strahl gemessen. Das ergibt runde
     Buckel mit flachen Kerben dazwischen. Eine Sinuswelle
     ergaebe an derselben Stelle Zacken wie bei einem Zahnrad.

     Alle Werte stehen in Prozent, die Form zieht sich also mit
     der jeweiligen Wolke. Wien wird lang und flach, Oeblarn
     kurz und rundlich. Genau das tun Wolken auch. */
  clip-path:polygon(98.04% 50.00%,97.81% 54.71%,96.11% 59.17%,92.92% 63.02%,93.04% 67.83%,92.03% 72.46%,89.81% 76.60%,86.53% 79.98%,82.36% 82.36%,77.50% 83.51%,72.12% 83.10%,68.17% 83.99%,65.25% 86.82%,61.82% 88.96%,58.02% 90.32%,54.02% 90.84%,50.00% 90.52%,46.13% 89.34%,42.57% 87.36%,39.49% 84.64%,36.34% 82.97%,31.85% 83.95%,27.42% 83.79%,23.25% 82.59%,19.54% 80.46%,16.45% 77.54%,14.13% 73.97%,12.71% 69.93%,12.29% 65.62%,10.21% 62.07%,7.30% 58.49%,5.56% 54.38%,5.03% 50.00%,5.72% 45.64%,7.61% 41.57%,7.02% 36.96%,7.36% 32.34%,8.78% 27.97%,11.21% 24.08%,14.51% 20.87%,18.53% 18.53%,23.10% 17.22%,28.02% 17.11%,33.10% 18.37%,36.27% 16.85%,38.94% 13.53%,42.20% 10.79%,45.93% 8.72%,50.00% 7.41%,54.24% 6.91%,58.50% 7.24%,62.62% 8.39%,66.44% 10.32%,69.81% 12.94%,72.61% 16.16%,78.04% 15.83%,83.27% 16.73%,87.80% 18.98%,91.45% 22.30%,94.04% 26.46%,95.42% 31.19%,95.46% 36.21%,94.02% 41.24%,96.76% 45.39%);

  /* Kein Rand. Er wuerde vom clip-path an der Kante
     mitabgeschnitten und saehe angefressen aus. Wolken haben
     ohnehin keine Kontur. */
  border:0;
  background:color-mix(in srgb, var(--akz) 26%, var(--bg));
  color:var(--ink);
  transition:clip-path .8s cubic-bezier(.22,1,.36,1);
}

/* Beim Ueberfahren aendert sich NUR die Form. Keine Farbe,
   kein Heben, kein Aufrichten: Die Buckel wandern ein Stueck
   und werden einen Hauch groesser, mehr passiert nicht.
   Das ist der ganze Effekt und er reicht. */
html .nd-orte li:nth-child(3n+1) a:hover,
html .nd-orte li:nth-child(3n+1) a:focus-visible{clip-path:polygon(99.66% 50.00%,98.98% 54.82%,96.77% 59.30%,94.38% 63.46%,94.91% 68.60%,93.99% 73.51%,91.78% 77.91%,88.44% 81.54%,84.15% 84.15%,79.11% 85.47%,73.52% 85.20%,68.94% 85.43%,65.98% 88.57%,62.43% 90.99%,58.47% 92.58%,54.26% 93.29%,50.00% 93.08%,45.87% 91.97%,42.05% 89.98%,38.72% 87.18%,35.99% 83.82%,31.23% 85.12%,26.50% 85.16%,22.04% 84.07%,18.03% 81.97%,14.66% 79.00%,12.10% 75.33%,10.47% 71.13%,9.89% 66.61%,8.34% 62.64%,5.19% 58.91%,3.29% 54.60%,2.67% 50.00%,3.34% 45.40%,5.29% 41.11%,7.73% 37.18%,7.84% 32.54%,9.01% 28.09%,11.16% 24.05%,14.18% 20.60%,17.93% 17.93%,22.24% 16.17%,26.93% 15.47%,31.79% 15.93%,35.44% 14.84%,38.26% 11.28%,41.71% 8.35%,45.68% 6.15%,50.00% 4.77%,54.50% 4.27%,59.02% 4.66%,63.37% 5.93%,67.39% 8.03%,70.91% 10.87%,73.82% 14.35%,79.18% 14.44%,84.07% 15.93%,88.27% 18.59%,91.59% 22.21%,93.85% 26.56%,94.92% 31.39%,94.68% 36.45%,96.47% 40.76%,98.82% 45.19%);}
html .nd-orte li:nth-child(3n+2) a:hover,
html .nd-orte li:nth-child(3n+2) a:focus-visible{clip-path:polygon(96.77% 50.00%,95.55% 54.49%,96.50% 59.25%,97.71% 64.47%,97.34% 69.61%,95.56% 74.35%,92.51% 78.41%,88.36% 81.48%,83.27% 83.27%,77.40% 83.38%,74.14% 86.12%,71.08% 89.45%,67.39% 91.98%,63.23% 93.62%,58.81% 94.28%,54.33% 93.94%,50.00% 92.58%,46.04% 90.23%,42.65% 86.94%,39.08% 85.98%,34.24% 88.05%,29.31% 88.70%,24.56% 88.08%,20.19% 86.32%,16.43% 83.57%,13.47% 79.98%,11.47% 75.74%,10.57% 71.07%,8.87% 67.04%,5.31% 63.56%,3.00% 59.35%,1.99% 54.73%,2.31% 50.00%,3.99% 45.47%,7.05% 41.46%,7.16% 37.00%,6.53% 31.99%,7.15% 27.10%,8.93% 22.56%,11.75% 18.61%,15.46% 15.46%,19.87% 13.28%,24.77% 12.25%,29.96% 12.51%,33.57% 10.33%,37.11% 7.49%,41.13% 5.41%,45.48% 4.16%,50.00% 3.78%,54.50% 4.30%,58.81% 5.69%,62.77% 7.90%,66.22% 10.85%,69.02% 14.41%,71.93% 17.17%,76.89% 17.23%,81.49% 18.51%,85.53% 20.84%,88.84% 24.05%,91.26% 27.95%,92.67% 32.33%,92.97% 36.97%,95.16% 41.02%,96.64% 45.41%);}
html .nd-orte li:nth-child(3n+3) a:hover,
html .nd-orte li:nth-child(3n+3) a:focus-visible{clip-path:polygon(96.41% 50.00%,96.21% 54.55%,94.70% 58.89%,94.57% 63.52%,94.16% 68.29%,92.51% 72.72%,89.76% 76.56%,86.03% 79.57%,81.51% 81.51%,76.37% 82.14%,72.35% 83.44%,69.45% 86.39%,66.02% 88.67%,62.19% 90.19%,58.13% 90.89%,54.01% 90.73%,50.00% 89.72%,46.27% 87.90%,42.98% 85.31%,39.42% 84.88%,35.02% 86.17%,30.56% 86.37%,26.26% 85.53%,22.30% 83.75%,18.88% 81.12%,16.14% 77.79%,14.23% 73.90%,13.26% 69.64%,11.92% 65.77%,8.66% 62.54%,6.45% 58.66%,5.36% 54.40%,5.41% 50.00%,6.63% 45.73%,5.34% 41.12%,4.31% 36.14%,4.57% 31.18%,6.02% 26.49%,8.57% 22.31%,12.07% 18.87%,16.38% 16.38%,21.28% 15.01%,26.59% 14.96%,32.08% 16.48%,35.08% 13.99%,38.25% 11.27%,41.87% 9.15%,45.84% 7.73%,50.00% 7.05%,54.22% 7.14%,58.35% 8.01%,62.25% 9.61%,65.79% 11.89%,68.83% 14.76%,71.30% 18.13%,76.80% 17.34%,82.13% 17.87%,86.87% 19.74%,90.83% 22.72%,93.84% 26.57%,95.75% 31.05%,96.45% 35.91%,95.85% 40.88%,95.27% 45.54%);}

/* Der Fokusrahmen wird vom clip-path weggeschnitten, deshalb
   ist hier die Farbe der Anzeiger und der Name unterstrichen.
   Das ist kein Widerspruch zum Ueberfahren ohne Farbwechsel:
   Ueberfahren ist Spielerei, Fokus ist Bedienung und muss
   erkennbar sein. */
html .nd-orte a:focus-visible{
  background:color-mix(in srgb, var(--akz) 55%, var(--bg));
  text-decoration:underline;
  text-underline-offset:3px;
  outline:2px solid var(--akz);outline-offset:3px;
}

/* ---------- Groesse nach Ortsgroesse ----------
   Die Klasse steht im HTML am li, weil CSS die Einwohnerzahl
   nicht kennen kann. Aendern laesst sie sich dort. */
html .nd-orte .nd-ort--xs  a{font-size:.86rem;}
html .nd-orte .nd-ort--s   a{font-size:1rem;}
html .nd-orte .nd-ort--m   a{font-size:1.2rem;}
html .nd-orte .nd-ort--l   a{font-size:1.45rem;}
html .nd-orte .nd-ort--xl  a{font-size:1.75rem;}
html .nd-orte .nd-ort--xxl a{font-size:2.2rem;}

/* Leichte Schraeglage, abwechselnd. Sie bleibt beim
   Ueberfahren stehen, damit wirklich nur die Form arbeitet. */
html .nd-orte li:nth-child(odd) a{transform:rotate(-1.4deg);}
html .nd-orte li:nth-child(even) a{transform:rotate(1.1deg);}
html .nd-orte li:nth-child(3n) a{transform:rotate(-.5deg);}

/* Drei Wolkenformen im Wechsel, damit nicht dreissig gleiche
   nebeneinander haengen. Ruhe- und Ueberfahrform gehoeren
   jeweils zusammen und stehen weiter oben. */
html .nd-orte li:nth-child(3n+2) a{clip-path:polygon(97.75% 50.00%,96.43% 54.57%,94.13% 58.78%,96.12% 63.99%,96.36% 69.20%,95.07% 74.09%,92.43% 78.35%,88.62% 81.69%,83.80% 83.80%,78.17% 84.32%,72.59% 83.80%,70.05% 87.51%,66.77% 90.47%,62.92% 92.59%,58.70% 93.76%,54.33% 93.94%,50.00% 93.10%,45.94% 91.26%,42.35% 88.46%,39.45% 84.76%,35.41% 85.23%,30.43% 86.61%,25.56% 86.57%,21.04% 85.29%,17.06% 82.94%,13.84% 79.68%,11.54% 75.70%,10.32% 71.21%,10.30% 66.45%,6.57% 63.17%,3.73% 59.20%,2.23% 54.70%,2.12% 50.00%,3.41% 45.41%,6.11% 41.27%,9.31% 37.66%,8.73% 32.90%,9.32% 28.26%,11.01% 23.95%,13.68% 20.19%,17.18% 17.18%,21.35% 15.09%,25.99% 14.07%,30.89% 14.26%,34.46% 12.49%,37.62% 9.20%,41.38% 6.64%,45.56% 4.91%,50.00% 4.08%,54.51% 4.17%,58.92% 5.18%,63.02% 7.07%,66.67% 9.76%,69.69% 13.16%,72.54% 16.27%,77.49% 16.51%,82.01% 17.99%,85.89% 20.54%,88.97% 23.96%,91.08% 28.04%,92.09% 32.56%,92.85% 37.00%,95.94% 40.86%,97.58% 45.31%);}
html .nd-orte li:nth-child(3n+3) a{clip-path:polygon(95.01% 50.00%,94.41% 54.37%,94.64% 58.88%,95.44% 63.79%,94.83% 68.57%,92.93% 72.95%,89.87% 76.64%,85.80% 79.38%,80.88% 80.88%,75.48% 81.05%,73.09% 84.55%,70.00% 87.42%,66.37% 89.52%,62.37% 90.78%,58.18% 91.13%,53.99% 90.54%,50.00% 89.03%,46.39% 86.61%,43.37% 83.35%,39.23% 85.52%,34.70% 86.95%,30.14% 87.16%,25.78% 86.25%,21.82% 84.34%,18.46% 81.54%,15.88% 78.00%,14.21% 73.91%,13.59% 69.46%,10.93% 66.18%,7.80% 62.80%,5.81% 58.79%,5.00% 54.43%,5.43% 50.00%,7.11% 45.78%,7.25% 41.50%,5.58% 36.53%,5.32% 31.49%,6.35% 26.67%,8.56% 22.31%,11.81% 18.66%,15.94% 15.94%,20.74% 14.35%,26.01% 14.10%,31.54% 15.47%,34.63% 12.90%,37.98% 10.37%,41.75% 8.52%,45.81% 7.42%,50.00% 7.11%,54.18% 7.61%,58.18% 8.89%,61.86% 10.91%,65.09% 13.58%,67.74% 16.81%,69.97% 20.11%,75.44% 19.00%,80.50% 19.50%,85.01% 21.27%,88.78% 24.08%,91.67% 27.73%,93.52% 31.97%,94.23% 36.58%,93.71% 41.31%,94.30% 45.64%);}

/* Farbe im Wechsel. Die Schrift bleibt in allen Faellen die
   normale Textfarbe, weil die Flaechen pastellig sind und
   nicht deckend. Damit stellt sich die Kontrastfrage bei
   Amber gar nicht erst. */
html .nd-orte li:nth-child(3n+1) a{--akz:var(--teal);}
html .nd-orte li:nth-child(3n+2) a{--akz:var(--rose);}
html .nd-orte li:nth-child(3n+3) a{--akz:var(--amber);}

/* Auf schmalen Schirmen kleiner.
   Die Wolken duerfen nicht umbrechen, sonst zerfaellt die
   Form, und ein Name wie Irdning-Donnersbachtal ist bei 390
   Pixel Fensterbreite in voller Groesse breiter als der
   Schirm. Also schrumpfen Schrift und Polster mit. */
@media(max-width:600px){
  html .nd-orte a{padding:1.2em 1.5em;}
  html .nd-orte .nd-ort--xs  a{font-size:.76rem;}
  html .nd-orte .nd-ort--s   a{font-size:.86rem;}
  html .nd-orte .nd-ort--m   a{font-size:.96rem;}
  html .nd-orte .nd-ort--l   a{font-size:1.06rem;}
  html .nd-orte .nd-ort--xl  a{font-size:1.2rem;}
  html .nd-orte .nd-ort--xxl a{font-size:1.4rem;}
}

html .nd-orte__hinweis{
  margin:16px 0 0;
  font-size:.9rem;line-height:1.55;color:var(--ink-faint);
  max-width:46ch;
}

@media(prefers-reduced-motion:reduce){
  html .nd-orte a{transition:none;}
  html .nd-orte li a{transform:none;}
}

/* ---------- Kontakt: Schlusspunkt ---------- */
/* Vollbreites, leicht abgesetztes Feld. Kein Farbblock,
   nur ein anderer Tonwert plus eine Akzentlinie oben.
   Die Rechnung zieht den Abschnitt auf Fensterbreite, ohne
   die Scrollleiste mitzuzaehlen. */
/* Kein eigener Hintergrund und keine Vollbreite mehr.
   Die Kontaktsektion sitzt wie jede andere im weissen Raum,
   nur der Farbschleier unterscheidet sie. */
html .nd-kontakt-sec{
  position:relative;
}

html .nd-kontakt{display:grid;gap:clamp(40px,5vw,80px);}
@media(min-width:900px){.nd-kontakt{grid-template-columns:.8fr 1.2fr;}}

html .nd-kontakt__titel{
  font-size:clamp(2rem,4.4vw,3.4rem);
  font-weight:300;line-height:1.06;letter-spacing:-.03em;margin:0;
}
html .nd-kontakt__lead{
  font-size:clamp(1.05rem,1.4vw,1.22rem);line-height:1.65;
  color:var(--ink-soft);max-width:44ch;margin:20px 0 0;
}
html .nd-kontakt dl{margin:clamp(34px,4vw,48px) 0 0;display:grid;gap:24px;}
html .nd-kontakt dt{
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);margin-bottom:6px;
}
html .nd-kontakt dd{margin:0;font-size:1.02rem;line-height:1.6;}
html .nd-kontakt dd a,
html .nd-kontakt dd a:link,
html .nd-kontakt dd a:visited{
  color:var(--ink);text-decoration:none;
  border-bottom:1px solid var(--line);
  -webkit-tap-highlight-color:transparent;
}
html .nd-kontakt dd a:hover,
html .nd-kontakt dd a:focus-visible{color:var(--teal);border-bottom-color:var(--teal);}

/* Formular: nur Unterstriche, keine Kaesten */
html .nd-form{display:grid;gap:clamp(24px,3vw,32px);}
html .nd-form__row{display:grid;gap:clamp(24px,3vw,32px);}
@media(min-width:620px){.nd-form__row{grid-template-columns:1fr 1fr;}}

html .nd-f{display:grid;gap:9px;}
html .nd-f label{
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
html .nd-f input,
html .nd-f select,
html .nd-f textarea{
  width:100%;
  border:0;border-bottom:1px solid var(--line);
  border-radius:0;background:transparent;color:var(--ink);
  font-family:var(--ff);font-size:1.02rem;line-height:1.5;
  padding:11px 0;box-shadow:none;
  transition:border-color .25s ease;
}
html .nd-f input,
html .nd-f textarea{-webkit-appearance:none;appearance:none;}
html .nd-f textarea{min-height:150px;resize:vertical;}
html .nd-f input:focus,
html .nd-f select:focus,
html .nd-f textarea:focus{outline:none;box-shadow:none;border-bottom-color:var(--teal);}
html .nd-f input::placeholder,
html .nd-f textarea::placeholder{color:var(--ink-faint);opacity:1;}

html .nd-select{position:relative;}
html .nd-select select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;}
html .nd-select::after{
  content:"";position:absolute;right:6px;top:calc(50% - 4px);
  width:9px;height:9px;
  border-right:1px solid var(--ink-faint);
  border-bottom:1px solid var(--ink-faint);
  transform:translateY(-50%) rotate(45deg);
  pointer-events:none;
}

/* Die Zustimmungszeile ist selbst ein label. Der Block weiter
   oben faerbt jedes label mono und in Grossbuchstaben, das
   wird hier zurueckgenommen. Die Checkbox braucht eine feste
   Groesse, weil input{width:100%} gilt. */
html .nd-check{
  display:flex;gap:13px;align-items:flex-start;
  font-family:var(--ff);font-size:.92rem;font-weight:400;
  letter-spacing:0;text-transform:none;line-height:1.55;
  color:var(--ink-soft);cursor:pointer;
}
html .nd-check input[type="checkbox"]{
  width:18px;height:18px;min-width:18px;flex:0 0 18px;
  margin:3px 0 0;padding:0;border:0;border-radius:0;background:none;
  accent-color:var(--teal);
  -webkit-appearance:checkbox;appearance:checkbox;cursor:pointer;
}
html .nd-check span{flex:1 1 auto;}
html .nd-check a,
html .nd-check a:link,
html .nd-check a:visited{color:var(--ink);text-decoration:underline;text-underline-offset:3px;}
html .nd-check a:hover,
html .nd-check a:focus-visible{color:var(--teal);}

html .nd-form__note{
  font-family:var(--fm);font-size:.78rem;letter-spacing:.06em;
  color:var(--ink-faint);margin:0;
}
html .nd-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* ---------- Rueckmeldung nach dem Absenden ----------
   Neu in Version 6.0. Der Kasten steht ueber dem Formular und
   wird vom Skript im Block ND-10-kontakt gefuellt, sobald in
   der Adresszeile formular=ok oder formular=fehler steht.
   Solange nichts drinsteht, ist er leer und nimmt deshalb
   keinen Platz weg: dafuer sorgt die Regel mit empty.
   Die Farbe sitzt links als Balken, nicht als Flaeche, damit
   der Kasten nicht lauter wirkt als das Formular darunter.
   ---------------------------------------------------------- */
html #nd-meldung:empty{display:none;}

html .nd-meldung{
  margin:0 0 clamp(24px,3vw,34px);
  padding:16px 20px;
  font-family:var(--fm);
  font-size:.86rem;line-height:1.55;
  color:var(--ink);
  background:var(--bg-soft);
  border-left:2px solid var(--line);
}
html .nd-meldung-ok{border-left-color:var(--teal);}
html .nd-meldung-fehler{border-left-color:var(--amber);}

@media(prefers-reduced-motion:reduce){
  html .nd-work__img img{transition:none;}
  html .nd-work:hover .nd-work__img img{transform:none;}
  html .nd-orte a{transition:none;}
  html .nd-orte a:hover{padding-left:0;}
}

/* ---------- Turnstile ----------
   Neu in Version 6.1. Cloudflare zeichnet das Widget in einen
   iframe fester Groesse, 300 mal 65 Pixel. Gestalten laesst
   sich davon nichts, nur die Umgebung.

   Solange die Pruefung laeuft, ist der Absendeknopf gesperrt.
   Der gesperrte Zustand braucht ein eigenes Aussehen, sonst
   klickt man dagegen und wundert sich.
   ---------------------------------------------------------- */
html .nd-turnstile{
  min-height:65px;
  margin:0;
}

html .nd-form .btn[disabled]{
  opacity:.4;
  cursor:not-allowed;
}
/* Der Farbbalken faehrt beim Ueberfahren nicht ein, solange
   der Knopf gesperrt ist. Sonst sieht er anklickbar aus. */
html .nd-form .btn[disabled]:hover::after,
html .nd-form .btn[disabled]:focus-visible::after{transform:translateX(-101%);}
html .nd-form .btn[disabled]:hover{color:var(--btn-fg);border-color:var(--ink);}

/* ---------------------------------------------------------
   9. FARBSCHLEIER FUER SEKTIONEN
   Version 1.3 · 21.08.2026, 10:40 Uhr

   Derselbe Effekt wie im Hero, aber als Baustein zum
   Draufsetzen. Drei Klassen kombinieren:

     nd-schleier          schaltet den Effekt ein
     nd-schleier--f1..f6  bestimmt die beiden Farben
     nd-schleier--lo ..   bestimmt die Ecke

   Beispiel:
     <section class="nd-sec nd-schleier nd-schleier--f2 nd-schleier--ru">

   Die Sektionen sind bewusst schwaecher eingefaerbt als der
   Hero. Der Hero soll der Auftritt bleiben, alles Weitere
   nur einen Hauch Farbe im Hintergrund haben.

   Der Schleier haengt an ::after und nicht an ::before, weil
   die Kontaktsektion ::before bereits fuer die Verlaufslinie
   am oberen Rand verwendet.
   --------------------------------------------------------- */

html .nd-schleier{
  position:relative;
  /* KEIN overflow:hidden. Das hat den Schleier an der
     Sektionskante gerade abgeschnitten und im Ablauf zusaetzlich
     die Geisterziffer gekappt. Stattdessen bleibt der Schleier
     waagrecht innerhalb des Fensters, senkrecht darf er ueber
     die Sektionsgrenze hinauslaufen und dort ausblenden. */
  /* Vorgabewerte, werden von den f-Klassen ueberschrieben */
  --s1:var(--teal);
  --s2:var(--amber);
  --s-staerke:13%;
  --s-groesse:min(62vw,780px);
  --s-tempo:20s;
}

/* Der Inhalt muss ueber dem Schleier liegen */
html .nd-schleier > .wrap{position:relative;z-index:1;}
/* Auch der Inhalt aller anderen Sektionen muss ueber einem
   hereinragenden Schleier liegen. */
html .nd-sec > .wrap,.nd-hero > .wrap{position:relative;z-index:1;}

html .nd-schleier::after{
  content:"";
  position:absolute;z-index:0;pointer-events:none;
  width:var(--s-groesse);aspect-ratio:1;
  background:
    radial-gradient(closest-side, color-mix(in srgb, var(--s1) var(--s-staerke), transparent), transparent 70%),
    radial-gradient(closest-side, color-mix(in srgb, var(--s2) var(--s-staerke), transparent), transparent 70%);
  background-position:30% 30%, 70% 70%;
  background-repeat:no-repeat;
  background-size:75% 75%, 65% 65%;
  filter:blur(34px);
  animation:ndSchleier var(--s-tempo) ease-in-out infinite alternate;
}

/* ---------- Farbpaare ---------- */
html .nd-schleier--f1{--s1:var(--teal);--s2:var(--amber);}
html .nd-schleier--f2{--s1:var(--rose);--s2:var(--teal);}
html .nd-schleier--f3{--s1:var(--amber);--s2:var(--rose);}
html .nd-schleier--f4{--s1:var(--teal);--s2:var(--rose);}
html .nd-schleier--f5{--s1:var(--amber);--s2:var(--teal);}
html .nd-schleier--f6{--s1:var(--rose);--s2:var(--amber);}

/* ---------- Ecken.
   lo links oben, ro rechts oben,
   lu links unten, ru rechts unten,
   lm links Mitte, rm rechts Mitte ---------- */
/* Waagrecht immer bei 0 oder groesser, sonst entsteht ein
   waagrechter Scrollbalken. Senkrecht darf der Wert negativ
   sein, dort laeuft der Schleier weich aus. */
html .nd-schleier--lo::after{inset:-14% auto auto 0;}
html .nd-schleier--ro::after{inset:-14% 0 auto auto;}
html .nd-schleier--lu::after{inset:auto auto -16% 0;}
html .nd-schleier--ru::after{inset:auto 0 -16% auto;}
html .nd-schleier--lm::after{inset:50% auto auto 0;transform:translateY(-50%);}
html .nd-schleier--rm::after{inset:50% 0 auto auto;transform:translateY(-50%);}

/* Unterschiedliche Laufzeiten, damit nicht alle Sektionen
   im Gleichtakt atmen. */
html .nd-schleier--f2{--s-tempo:24s;}
html .nd-schleier--f3{--s-tempo:19s;}
html .nd-schleier--f4{--s-tempo:27s;}
html .nd-schleier--f5{--s-tempo:22s;}
html .nd-schleier--f6{--s-tempo:25s;}

/* Auf schmalen Schirmen kleiner und blasser, sonst legt sich
   der Schleier ueber den halben Text. */
@media(max-width:720px){
  html .nd-schleier{--s-groesse:min(85vw,460px);--s-staerke:10%;}
}



@media(prefers-reduced-motion:reduce){
  html .nd-schleier::after{animation:none;}
}

/* ---------------------------------------------------------
   11. KOPFZEILE ERST NACH DER PIN-SEKTION MITFAHREN
   Version 2.3 · 21.08.2026, 19:39 Uhr

   Im Grundstylesheet steht an .top ein position:sticky. Das
   greift in dieser Installation nicht, weil sticky an jedem
   Vorfahren scheitert, der ein overflow ungleich visible hat,
   und Oxygen legt um das Kopf-Template einen solchen
   Container.

   Deshalb hier ein anderer Weg: Die Kopfzeile scrollt zuerst
   ganz normal mit nach oben weg. Sobald die Pin-Sektion oben
   aus dem Bild ist, setzt das Skript im Footer Code die Klasse
   top--fest, und die Kopfzeile faehrt von oben wieder ein.
   Scrollt man zurueck, verschwindet sie an derselben Stelle.

   Kein Platzhalter noetig: An dem Punkt, an dem sie fest
   wird, ist die urspruengliche Kopfzeile laengst aus dem
   Bild, es springt also nichts.
   --------------------------------------------------------- */
html body .top{
  position:relative;
  top:auto;
}
html body .top.top--fest{
  position:fixed;
  top:0;left:0;right:0;
  z-index:60;
  border-bottom-color:var(--line);
  animation:topEinfahren .38s cubic-bezier(.22,1,.36,1);
}

/* Die WordPress-Adminleiste liegt selbst fest oben am Fenster
   und ist 32 Pixel hoch. Ein Element mit top:0 verschwindet
   darunter, die Kopfzeile waere oben angeschnitten.
   WordPress setzt am body die Klasse admin-bar, solange
   jemand eingeloggt ist. Nur dann wird nach unten gerueckt.
   Fuer Besucher aendert sich nichts.
   Unter 783 Pixel ist die Adminleiste 46 Pixel hoch. */
html body.admin-bar .top.top--fest{top:32px;}
@media screen and (max-width:782px){
  html body.admin-bar .top.top--fest{top:46px;}
}
@keyframes topEinfahren{
  from{transform:translateY(-100%);}
  to{transform:translateY(0);}
}
@media(prefers-reduced-motion:reduce){
  html body .top.top--fest{animation:none;}
}

/* ---------------------------------------------------------
   12. FARBEN IM DUNKELMODUS ABSICHERN
   Alle Ueberschriften des neuen Designs bekommen die Farbe
   ausdruecklich zugewiesen. Geerbte Farben wurden von
   Oxygen ueberschrieben und blieben im Dunkelmodus dunkel.
   --------------------------------------------------------- */
html body .nd-step__titel,
html body .nd-work__titel,
html body .nd-kontakt__titel,
html body .nd-hero__claim,
html body .nd-faq summary{color:var(--ink);}

/* Die Schluesselwoerter im Hero tragen ihren Farbverlauf
   selbst, die Zeile oben darf ihn nicht ueberschreiben. */
html body .nd-hero__claim .grad{color:transparent;}

/* ---------------------------------------------------------
   13. UNTERSEITEN
   Version 1.0 · 23.08.2026, 16:32 Uhr

   Alles, was nur auf Unterseiten vorkommt. Praefix nd-u bzw.
   eigene nd-Klassen, die auf der Startseite nicht auftauchen.
   An der Startseite aendert sich durch diesen Abschnitt nichts.

   Zwei Dinge sind hier bewusst anders als auf der Startseite:

   1. Auf Seiten ohne Pin-Sektion setzt das Skript im Footer
      Code die Klasse top--fest sofort beim Laden. Die
      Kopfzeile liegt damit von der ersten Pixelzeile an fest
      ueber dem Inhalt. Sie ist 100 Pixel hoch, mobil 84.
      Deshalb hat .nd-uhero oben ein deutlich groesseres
      Polster als eine normale Sektion. Ohne das laege die
      erste Zeile unter der Kopfzeile.
   2. Kein 100svh-Auftritt. Der grosse Hero bleibt der
      Startseite vorbehalten, sonst wiederholt sich der
      Auftritt auf jeder Seite und wird beliebig.
   --------------------------------------------------------- */

/* ---------- 13.1 Unterseiten-Kopf ---------- */
html .nd-uhero{
  position:relative;
  padding-block:clamp(148px,19vh,212px) clamp(48px,6vw,88px);
}

html .nd-uhero__pfad{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;
  margin:0 0 clamp(26px,3.2vw,44px);
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink-faint);
}
html .nd-uhero__pfad a,
html .nd-uhero__pfad a:link,
html .nd-uhero__pfad a:visited{
  color:var(--ink-faint);text-decoration:none;
  border-bottom:1px solid transparent;padding-bottom:2px;
  transition:color .22s ease,border-color .22s ease;
}
html .nd-uhero__pfad a:hover,
html .nd-uhero__pfad a:focus-visible{color:var(--teal);border-bottom-color:var(--teal);}
html .nd-uhero__pfad em{font-style:normal;color:var(--ink);}

html .nd-uhero__claim{
  font-size:clamp(2.3rem,6.2vw,5rem);
  font-weight:300;line-height:1.05;letter-spacing:-.032em;
  margin:0;max-width:17ch;
}
/* Derselbe laufende Verlauf wie im Hero der Startseite. Er ist
   hier eigens noetig, weil die Regel dort auf .nd-hero__claim
   zielt und nicht allgemein auf .grad. */
html body .nd-uhero__claim .grad{
  background:linear-gradient(100deg,
    var(--teal) 0%,
    var(--rose) 42%,
    var(--amber) 72%,
    var(--teal) 100%);
  background-size:280% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:ndVerlauf 12s linear infinite;
}

html .nd-uhero__lead{
  font-size:clamp(1.08rem,1.65vw,1.4rem);line-height:1.6;
  color:var(--ink-soft);max-width:54ch;
  margin:clamp(24px,3vw,38px) 0 0;
}

/* Die Fakten-Zeile. Bewusst keine Kaesten wie im alten
   .hero__facts, sondern eine einzige Zeile unter einer
   Haarlinie. Auf schmalen Schirmen bricht sie um. */
html .nd-uhero__fakten{
  display:flex;flex-wrap:wrap;gap:10px 42px;
  margin-top:clamp(34px,4.5vw,62px);padding-top:20px;
  border-top:1px solid var(--line);
  font-family:var(--fm);font-size:.78rem;letter-spacing:.05em;
  color:var(--ink-faint);
}
html .nd-uhero__fakten b{color:var(--teal);font-weight:500;}

@media(prefers-reduced-motion:reduce){
  html body .nd-uhero__claim .grad{animation:none;}
}

/* ---------- 13.2 Zwei Spalten: passt / passt nicht ----------
   Zwei pastellige Flaechen mit acht Eckradien, dieselbe
   Machart wie die Leistungszeilen auf der Startseite. Beim
   Ueberfahren wandert die Form, die Farbe bleibt.
   ---------------------------------------------------------- */
html .nd-zwei{display:grid;gap:clamp(24px,3.2vw,54px);}
@media(min-width:820px){html .nd-zwei{grid-template-columns:1fr 1fr;align-items:start;}}

html .nd-zwei__sp{
  position:relative;isolation:isolate;
  padding:clamp(30px,3.6vw,48px) clamp(26px,3vw,44px);
  --akz:var(--teal);
}
html .nd-zwei__sp::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-color:color-mix(in srgb, var(--akz) 13%, var(--bg));
  border-radius:14% 5% 9% 12% / 8% 14% 6% 11%;
  transition:border-radius .7s cubic-bezier(.22,1,.36,1),
             background-color .5s ease,
             transform .7s cubic-bezier(.22,1,.36,1);
  transform:rotate(-.35deg);
}
html .nd-zwei__sp:nth-child(2)::before{
  border-radius:5% 13% 11% 7% / 12% 7% 13% 6%;
  transform:rotate(.4deg);
}
html .nd-zwei__sp:hover::before{
  background-color:color-mix(in srgb, var(--akz) 19%, var(--bg));
  border-radius:7% 12% 6% 14% / 13% 6% 12% 8%;
  transform:rotate(.3deg);
}
html .nd-zwei__sp:nth-child(2):hover::before{
  border-radius:12% 6% 14% 5% / 6% 13% 7% 12%;
  transform:rotate(-.3deg);
}
/* Zweite Spalte in Amber: die Einschraenkungen sollen sichtbar
   anders klingen als die Zusagen, ohne rot und ohne Warnton. */
html .nd-zwei__sp:nth-child(2){--akz:var(--amber);}

html .nd-zwei__marke{
  display:block;margin:0 0 12px;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--akz);
}
html .nd-zwei__titel{
  font-size:clamp(1.45rem,2.5vw,2.05rem);
  font-weight:300;line-height:1.12;letter-spacing:-.025em;
  margin:0;
}
html .nd-zwei ul{list-style:none;margin:clamp(20px,2.4vw,28px) 0 0;padding:0;display:grid;gap:13px;}
html .nd-zwei li{
  position:relative;padding-left:28px;
  font-size:1rem;line-height:1.58;color:var(--ink-soft);
}
html .nd-zwei li::before{
  content:"";position:absolute;left:0;top:.72em;
  width:14px;height:1px;background:var(--akz);
}

@media(prefers-reduced-motion:reduce){
  html .nd-zwei__sp::before{transition:background-color .3s ease;}
}

/* ---------- 13.3 Bausteine ----------
   Versetztes Zwoelfspaltenraster. Ueber jedem Baustein eine
   Haarlinie, die sich in der Akzentfarbe zuzeichnet, sobald
   der Baustein ins Bild kommt. Dafuer haengt am Element die
   Klasse rise, die vom Skript im Footer Code die Klasse in
   bekommt.
   ---------------------------------------------------------- */
html .nd-bau{display:grid;gap:clamp(28px,3.4vw,44px);}
@media(min-width:900px){
  html .nd-bau{
    grid-template-columns:repeat(12,1fr);
    column-gap:clamp(28px,3.4vw,52px);
    row-gap:clamp(44px,5vw,78px);
  }
  html .nd-bau .nd-bau__el:nth-child(1){grid-column:1 / 7;}
  html .nd-bau .nd-bau__el:nth-child(2){grid-column:8 / 13;margin-top:clamp(20px,3vw,48px);}
  html .nd-bau .nd-bau__el:nth-child(3){grid-column:1 / 6;}
  html .nd-bau .nd-bau__el:nth-child(4){grid-column:7 / 11;margin-top:clamp(16px,2.4vw,38px);}
  html .nd-bau .nd-bau__el:nth-child(5){grid-column:2 / 7;}
  html .nd-bau .nd-bau__el:nth-child(6){grid-column:8 / 13;margin-top:clamp(-6px,2vw,30px);}
}

html .nd-bau__el{
  position:relative;padding-top:22px;
  border-top:1px solid var(--line);
  --akz:var(--teal);
}
html .nd-bau__el::after{
  content:"";position:absolute;left:0;top:-1px;
  width:0;height:1px;background:var(--akz);
  transition:width .8s cubic-bezier(.22,1,.36,1);
}
html .nd-bau__el.in::after,
html .nd-bau__el:hover::after{width:100%;}

html .nd-bau .nd-bau__el:nth-child(3n+1){--akz:var(--teal);}
html .nd-bau .nd-bau__el:nth-child(3n+2){--akz:var(--rose);}
html .nd-bau .nd-bau__el:nth-child(3n+3){--akz:var(--amber);}

html .nd-bau__num{
  display:block;margin-bottom:10px;
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--akz);
}
html .nd-bau__t{
  font-size:clamp(1.35rem,2.2vw,1.85rem);
  font-weight:300;line-height:1.15;letter-spacing:-.025em;
  margin:0;
}
html .nd-bau__x{
  margin:12px 0 0;
  font-size:1rem;line-height:1.6;color:var(--ink-soft);max-width:40ch;
}

@media(prefers-reduced-motion:reduce){
  html .nd-bau__el::after{transition:none;width:100%;}
}

/* ---------- 13.4 Datenblatt ----------
   Bewusst der nuechternste Baustein der Seite. Alles in
   Roboto Mono, nur Haarlinien, keine Farbflaechen. Er bildet
   den ruhigen Gegenpol zu den Bausteinen darueber.
   ---------------------------------------------------------- */
html .nd-daten{
  border-top:1px solid var(--line);
  max-width:940px;
}
html .nd-daten__z{
  display:grid;gap:4px 26px;
  padding:15px 12px;margin-inline:-12px;
  border-bottom:1px solid var(--line);
  transition:background-color .25s ease;
}
@media(min-width:640px){
  html .nd-daten__z{grid-template-columns:210px minmax(0,1fr);align-items:baseline;}
}
html .nd-daten__z:hover{background-color:color-mix(in srgb, var(--teal) 6%, transparent);}
html .nd-daten__k{
  font-family:var(--fm);font-size:.7rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}
html .nd-daten__w{
  font-family:var(--fm);font-size:.88rem;line-height:1.6;color:var(--ink);
}
/* Hervorhebung im Datenblatt. em statt strong, weil die
   Stelle nicht lauter, sondern nur farbig sein soll. */
html .nd-daten__w em{font-style:normal;color:var(--teal);}

/* ---------- 13.5 Schlusspunkt und Weiterleiter ---------- */
html .nd-schluss__titel{
  font-size:clamp(2.05rem,4.8vw,3.9rem);
  font-weight:300;line-height:1.06;letter-spacing:-.03em;
  margin:0;max-width:17ch;
}
html .nd-schluss__lead{
  font-size:clamp(1.04rem,1.4vw,1.22rem);line-height:1.65;
  color:var(--ink-soft);max-width:50ch;margin:22px 0 0;
}
html .nd-schluss__akt{
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;
  margin-top:clamp(30px,4vw,48px);
}
html .nd-schluss__note{
  font-family:var(--fm);font-size:.74rem;letter-spacing:.06em;
  color:var(--ink-faint);margin:0;
}

/* Die beiden Nachbarseiten am Fuss der Seite. Kein Kasten,
   nur zwei Zeilen zwischen Haarlinien, die beim Ueberfahren
   nach rechts ruecken. */
html .nd-weiter{
  display:grid;gap:0;
  margin-top:clamp(58px,7vw,100px);
  border-top:1px solid var(--line);
}
html .nd-weiter a,
html .nd-weiter a:link,
html .nd-weiter a:visited{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;
  padding:clamp(20px,2.6vw,32px) 0;
  border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--ink);
  -webkit-tap-highlight-color:transparent;
  transition:color .25s ease,padding-left .4s cubic-bezier(.22,1,.36,1);
}
html .nd-weiter a:hover,
html .nd-weiter a:focus-visible{color:var(--teal);padding-left:14px;}
html .nd-weiter__t{
  font-size:clamp(1.35rem,2.6vw,2.05rem);
  font-weight:300;line-height:1.14;letter-spacing:-.025em;
}
html .nd-weiter__m{
  font-family:var(--fm);font-size:.72rem;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);
}

@media(prefers-reduced-motion:reduce){
  html .nd-weiter a{transition:color .2s ease;}
  html .nd-weiter a:hover{padding-left:0;}
}

/* ---------- 13.6 FAQ ----------
   Bis Version 4.2 stand dieses CSS als style-Tag im Block
   ND-09-faq auf der Startseite. Es liegt jetzt hier, aus zwei
   Gruenden: Erstens war das die letzte Stelle ausser der
   Pin-Sektion, an der Gestaltung nicht im Header Code stand.
   Zweitens brauchen die Unterseiten dieselben Aufklapper, und
   ein zweites Mal dasselbe CSS in einen Block zu schreiben
   waere die schlechtere Loesung.

   ACHTUNG: Damit muss der Block ND-09-faq auf der Startseite
   auf Version 1.2 getauscht werden. Dort ist das style-Tag
   entfernt. Bleibt der alte Block stehen, steht das CSS
   zweimal auf der Seite. Kaputt geht dadurch nichts, sauber
   ist es nicht.
   ---------------------------------------------------------- */
html .nd-faq{
  border-top:1px solid var(--line);
  max-width:920px;
}
html .nd-faq details{border-bottom:1px solid var(--line);}

html .nd-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:clamp(24px,3.2vw,36px) 58px clamp(24px,3.2vw,36px) 0;
  font-size:clamp(1.3rem,2.6vw,2.05rem);
  font-weight:300;line-height:1.16;letter-spacing:-.025em;
  transition:color .25s ease;
}
html .nd-faq summary::-webkit-details-marker{display:none;}
html .nd-faq summary:hover{color:var(--teal);}
html .nd-faq summary:focus-visible{outline:2px solid var(--teal);outline-offset:4px;}

/* Feiner Pfeil statt dickem Winkel */
html .nd-faq summary::after{
  content:"";position:absolute;right:8px;top:50%;
  width:12px;height:12px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(45deg);
  transition:transform .3s cubic-bezier(.22,1,.36,1);
}
html .nd-faq details[open] summary{color:var(--teal);}
html .nd-faq details[open] summary::after{transform:translateY(-25%) rotate(-135deg);}

html .nd-faq__a{
  padding:0 58px 30px 0;
  color:var(--ink-soft);
  font-size:clamp(1rem,1.15vw,1.08rem);
  line-height:1.68;
  max-width:72ch;
}

html .nd-faq__link,
html .nd-faq__link:link,
html .nd-faq__link:visited{color:var(--teal);text-decoration:none;border-bottom:1px solid var(--teal);}
html .nd-faq__link:hover,
html .nd-faq__link:focus-visible{color:var(--rose);border-bottom-color:var(--rose);}

@media(prefers-reduced-motion:reduce){
  html .nd-faq summary::after{transition:none;}
}

/* ---------- 13.7 Farben im Dunkelmodus absichern ----------
   Gleiche Begruendung wie in Abschnitt 12: Oxygen legt auf
   Ueberschriften eine feste dunkle Farbe. Ohne diese Zeilen
   bleiben die neuen Titel im Dunkelmodus dunkel.
   ---------------------------------------------------------- */
html body .nd-uhero__claim,
html body .nd-zwei__titel,
html body .nd-bau__t,
html body .nd-schluss__titel,
html body .nd-weiter__t{color:var(--ink);}
html body .nd-uhero__claim .grad{color:transparent;}

/* ---------------------------------------------------------
   KOPFZEILE: KNOEPFE (Sprache, Design, Menue)
   Alle drei gleich: Kreis 44 px, 1,5 px Linie, gleiche Farbe.
   Bei offenem Menue folgen sie der Menuefarbe (hell: dunkel,
   dunkel: hell). Vorher blieben die Linien immer hell und das
   Schliessen-X war im hellen Design auf weissem Grund unsichtbar.
   ---------------------------------------------------------- */
html .icobtn,html .burger{width:44px;height:44px;border:1px solid var(--line);color:var(--ink);transition:border-color .2s,color .2s,background .2s;}
html .icobtn svg{width:19px;height:19px;stroke-width:1.5;}
html .burger i{width:18px;height:1.5px;background:currentColor;}
html .burger{color:var(--ink);}
html .icobtn:hover,html .burger:hover,html .icobtn:focus-visible,html .burger:focus-visible{border-color:var(--teal);color:var(--teal);}
html .nav-open .icobtn,html .nav-open .burger{color:var(--menu-ink);border-color:color-mix(in srgb,var(--menu-ink) 32%,transparent);}
html .nav-open .burger i{background:var(--menu-ink);}
html .nav-open .burger{background:color-mix(in srgb,var(--menu-ink) 8%,transparent);border-color:color-mix(in srgb,var(--menu-ink) 55%,transparent);}
html .nav-open .icobtn:hover,html .nav-open .burger:hover,html .nav-open .icobtn:focus-visible,html .nav-open .burger:focus-visible{color:var(--amber);border-color:var(--amber);}
html .nav-open .burger:hover i{background:var(--amber);}
@media(max-width:560px){html .icobtn,html .burger{width:40px;height:40px;}}

/* ---------------------------------------------------------
   MENUE: LEISTUNGEN NEBEN DEM MENUEPUNKT
   Die vier Leistungen stehen klein in derselben Zeile rechts
   neben Leistungen, nicht darunter. Auf schmalen Schirmen
   rutschen sie unter den Punkt.
   ---------------------------------------------------------- */
html .menu__list li{overflow:visible;}
html .menu__list li:has(>.menu__sub)>a{display:inline-flex;flex:0 0 auto;}
html .menu__list li:has(>.menu__sub){display:flex;flex-wrap:wrap;align-items:baseline;column-gap:clamp(18px,2.6vw,34px);}
html .menu__list .menu__sub{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 20px;}
html .menu__list .menu__sub li{overflow:visible;margin:0;padding:0;}
html .menu__list .menu__sub a{display:inline-block;transform:none;animation:none;padding:3px 0;font-family:var(--fm);font-size:.74rem;font-weight:400;letter-spacing:.06em;line-height:1.3;color:var(--menu-ink-faint);border:0;border-bottom:1px solid transparent;border-radius:0;background:none;transition:color .2s,border-color .2s;}
html .menu__list .menu__sub a:hover,html .menu__list .menu__sub a:focus-visible{color:var(--amber);background:none;border-bottom-color:var(--amber);}
html .nav-open .menu__list .menu__sub{animation:menuSub .5s .3s both;}
@keyframes menuSub{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

/* Menue: bei niedrigen Bildschirmen wurde der obere Teil abgeschnitten (Zentrierung im scrollenden Feld). Jetzt zentriert ueber margin:auto, dann bleibt alles erreichbar. */
html .menu{justify-content:flex-start;}
html .menu__in{margin-block:auto;}

/* ---------------------------------------------------------
   KOPFZEILE: REDAKTIONELLE STEUERUNG (Sprache, Design, Menue)
   Kein Standard-Kreisknopf mehr. Im Stil der Seite: Mono-Schrift,
   Grossbuchstaben, Sperrung, duenne Linien wie bei den kleinen
   Beschriftungen (START / WEBSITES, LEISTUNG 01).
   Sprache = Text, Design = Halbkreis (Kontrast), Menue = Wort + zwei Linien.
   ---------------------------------------------------------- */
html body .top__act{gap:2px;align-items:center;}
html body .icobtn,html body .burger{width:auto;min-width:44px;height:44px;padding:0 11px;border:0;border-radius:0;background:none;display:inline-flex;align-items:center;justify-content:center;gap:10px;flex-direction:row;color:var(--ink);font-family:var(--fm);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;line-height:1;position:relative;}
html body .icobtn::after,html body .burger::after{content:"";position:absolute;left:11px;right:11px;bottom:9px;height:1px;background:var(--teal);transform:scaleX(0);transform-origin:left;transition:transform .3s cubic-bezier(.22,1,.36,1);}
html body .icobtn:hover,html body .burger:hover,html body .icobtn:focus-visible,html body .burger:focus-visible{color:var(--teal);border:0;}
html body .icobtn:hover::after,html body .burger:hover::after,html body .icobtn:focus-visible::after,html body .burger:focus-visible::after{transform:scaleX(1);}
html body .icobtn:focus-visible,html body .burger:focus-visible{outline:1px solid var(--teal);outline-offset:-4px;}
html body #theme svg{display:none;}
html body #theme::before{content:"";width:15px;height:15px;box-sizing:border-box;border:1.4px solid currentColor;border-radius:50%;background:linear-gradient(90deg,currentColor 50%,transparent 50%);transition:transform .5s cubic-bezier(.22,1,.36,1);}
html body #theme:hover::before{transform:rotate(180deg);}
html body .burger::before{content:attr(aria-label);order:0;}
html body .burger i{display:block;width:20px;height:1.4px;background:currentColor;border-radius:1px;margin:0;transition:transform .3s,opacity .2s,width .3s,background .2s;}
html body .burger{flex-wrap:nowrap;}
html body .burger .w7-lin{display:none;}
html body .burger i:nth-child(1){margin-left:0;transform:translateY(-3px);}
html body .burger i:nth-child(2){position:absolute;opacity:0;pointer-events:none;}
html body .burger i:nth-child(3){position:absolute;right:11px;width:14px;transform:translateY(3px);}
html body .burger i:nth-child(1){position:absolute;right:11px;}
html body .burger::before{padding-right:30px;}
html body .burger:hover i:nth-child(3){width:20px;}
html .nav-open .burger i:nth-child(1){transform:rotate(45deg);}
html .nav-open .burger i:nth-child(3){transform:rotate(-45deg);width:20px;}
html .nav-open .burger i:nth-child(2){opacity:0;}
html .nav-open .icobtn,html .nav-open .burger{color:var(--menu-ink);border:0;background:none;}
html .nav-open .burger i{background:var(--menu-ink);}
html .nav-open .icobtn:hover,html .nav-open .burger:hover,html .nav-open .icobtn:focus-visible,html .nav-open .burger:focus-visible{color:var(--amber);border:0;}
html .nav-open .icobtn::after,html .nav-open .burger::after{background:var(--amber);}
html .nav-open .burger:hover i{background:var(--amber);}
@media(max-width:560px){html body .icobtn,html body .burger{height:40px;min-width:40px;padding:0 8px;letter-spacing:.12em;}html body .burger::before{padding-right:26px;}html body .burger i:nth-child(1),html body .burger i:nth-child(3){right:8px;}html body .icobtn::after,html body .burger::after{left:8px;right:8px;}html body .top__act{gap:0;}}

/* Menueknopf: beide Linien am selben Mittelpunkt verankert, damit das X sauber entsteht. */
html body .burger i:nth-child(1),html body .burger i:nth-child(3){position:absolute;top:50%;margin-top:-.7px;right:11px;transform-origin:center;}
html body .burger i:nth-child(1){width:20px;transform:translateY(-3.2px);}
html body .burger i:nth-child(3){width:14px;transform:translateY(3.2px);}
html .nav-open .burger i:nth-child(1){width:20px;transform:rotate(45deg);}
html .nav-open .burger i:nth-child(3){width:20px;transform:rotate(-45deg);}
@media(max-width:560px){html body .burger i:nth-child(1),html body .burger i:nth-child(3){right:8px;}}

/* Menueknopf: Beschriftung folgt Sprache und Zustand (Menue / Schliessen). */
html[lang^="en"] body .burger::before{content:"Menu";}
html .nav-open .burger::before{content:"Schließen";}
html[lang^="en"] .nav-open .burger::before{content:"Close";}
html .nav-open .burger::before{padding-right:30px;}

/* Kopfzeile: Steuerung groesser (Schrift .84rem, Halbkreis 21 px, Linien 28 px, Hoehe 52 px). */
html body .icobtn,html body .burger{height:52px;min-width:52px;padding:0 14px;gap:12px;font-size:.84rem;letter-spacing:.15em;}
html body .icobtn::after,html body .burger::after{left:14px;right:14px;bottom:11px;}
html body #theme::before{width:21px;height:21px;border-width:1.6px;}
html body .burger::before{padding-right:40px;}
html .nav-open .burger::before{padding-right:40px;}
html body .burger i{height:1.6px;}
html body .burger i:nth-child(1),html body .burger i:nth-child(3){right:14px;margin-top:-.8px;}
html body .burger i:nth-child(1){width:28px;transform:translateY(-4.4px);}
html body .burger i:nth-child(3){width:19px;transform:translateY(4.4px);}
html body .burger:hover i:nth-child(3){width:28px;}
html .nav-open .burger i:nth-child(1){width:28px;transform:rotate(45deg);}
html .nav-open .burger i:nth-child(3){width:28px;transform:rotate(-45deg);}
@media(max-width:560px){html body .icobtn,html body .burger{height:48px;min-width:44px;padding:0 10px;gap:9px;font-size:.78rem;letter-spacing:.12em;}html body .icobtn::after,html body .burger::after{left:10px;right:10px;}html body #theme::before{width:20px;height:20px;}html body .burger::before,html .nav-open .burger::before{padding-right:36px;}html body .burger i:nth-child(1),html body .burger i:nth-child(3){right:10px;}html body .burger i:nth-child(1){width:26px;}html body .burger i:nth-child(3){width:18px;}html .nav-open .burger i:nth-child(1),html .nav-open .burger i:nth-child(3){width:26px;}}