/* ==========================================================================
   AXENT-WEBSERVICE — Landingpage
   Farben aus dem Logo: Magenta #EC008C, Schwarz #231F20, Grau #8C9096
   ========================================================================== */

@font-face{font-family:Inter;src:url(../fonts/inter-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(../fonts/inter-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

:root{
  --magenta:#ec008c;          /* Flächen, Knöpfe, Bildmarke */
  --magenta-dunkel:#c30075;
  --magenta-text:#c30075;     /* Magenta als Textfarbe: 5,87:1 auf Weiß.
                                 Das helle #ec008c erreicht nur 4,25:1 und
                                 fällt damit für Fließtext durch. */
  --schwarz:#231f20;
  --grau:#8c9096;
  --grau-hell:#f4f5f6;
  --grau-rand:#e3e5e8;
  --text:#2a2a2d;
  --text-leise:#63666d;
  --weiss:#fff;
  --dunkel:#151315;
  --dunkel-2:#211e21;

  --huelle:1180px;
  --radius:14px;
  --schatten:0 1px 2px rgba(35,31,32,.05),0 8px 24px -12px rgba(35,31,32,.18);
  --schatten-hoch:0 2px 4px rgba(35,31,32,.06),0 24px 48px -20px rgba(35,31,32,.28);
  --kopf-hoehe:98px;
  --kopf-hoehe-klein:74px;
  --logo-luft:3px;   /* Abstand des Logos nach oben und unten */
  --kurve:cubic-bezier(.22,.8,.28,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--kopf-hoehe) + 16px);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--weiss);color:var(--text);
  font:400 clamp(1rem,.96rem + .2vw,1.0625rem)/1.65 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,svg{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{color:var(--schwarz);letter-spacing:-.022em;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.35rem,1.6rem + 3.4vw,4.1rem);font-weight:700}
h2{font-size:clamp(1.85rem,1.4rem + 1.9vw,2.85rem);font-weight:700}
h3{font-size:1.16rem;font-weight:600;letter-spacing:-.012em}
p{margin:0 0 1rem}
p:last-child{margin-bottom:0}

.huelle{width:min(100% - 2rem,var(--huelle));margin-inline:auto}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--magenta);color:#fff;padding:.75rem 1.25rem;border-radius:0 0 var(--radius) 0;font-weight:600}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--magenta);outline-offset:3px;border-radius:4px}

.dachzeile{
  font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--magenta-text);margin:0 0 .85rem;display:flex;align-items:center;gap:.6rem;
}
.dachzeile::before{content:"";width:22px;height:2px;background:var(--magenta);flex:none}
.akzent{color:var(--magenta)}   /* Überschrift, 40 px — als große Schrift zulässig */

/* ---------- Knöpfe ---------- */
.knopf{
  --f:var(--magenta);
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  padding:.92rem 1.6rem;border-radius:999px;border:1.5px solid var(--f);
  font-weight:600;font-size:.98rem;text-decoration:none;white-space:nowrap;
  transition:transform .28s var(--kurve),box-shadow .28s var(--kurve),background-color .2s,color .2s,border-color .2s;
  position:relative;overflow:hidden;
}
.knopf svg{width:1.05em;height:1.05em;fill:currentColor;flex:none}
.knopf--voll{background:var(--f);color:#fff;box-shadow:0 10px 24px -12px rgba(236,0,140,.85)}
.knopf--voll:hover{background:var(--magenta-dunkel);border-color:var(--magenta-dunkel);transform:translateY(-2px);box-shadow:0 18px 32px -14px rgba(236,0,140,.9)}
.knopf--rand{background:transparent;color:var(--schwarz);border-color:var(--grau-rand)}
.knopf--rand:hover{border-color:var(--magenta);color:var(--magenta-text);transform:translateY(-2px)}
.knopf--klein{padding:.58rem 1.15rem;font-size:.9rem;background:var(--magenta);color:#fff}
.knopf--klein:hover{background:var(--magenta-dunkel);border-color:var(--magenta-dunkel)}
.knopf--breit{width:100%}

/* ---------- Kopf ---------- */
.kopf{
  position:fixed;inset:0 0 auto;z-index:50;
  background:rgba(255,255,255,.82);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .3s var(--kurve),border-color .3s,background-color .3s;
}
.kopf.ist-gescrollt{border-bottom-color:var(--grau-rand);box-shadow:0 8px 24px -20px rgba(35,31,32,.5)}
.kopf__innen{display:flex;align-items:center;gap:1.5rem;height:var(--kopf-hoehe);transition:height .3s var(--kurve)}
.kopf.ist-gescrollt .kopf__innen{height:var(--kopf-hoehe-klein)}
.kopf__logo{flex:none;display:block}
/* Das Logo steckt einmal als <symbol> im Markup und wird zweimal verwendet.
   Das spart beide SVG-Dateien beim Seitenaufruf; die Farben kommen aus dem
   Kontext, deshalb braucht es keine zweite, invertierte Fassung. */
.logo-quelle{position:absolute;width:0;height:0;overflow:hidden}
.logo{
  display:block;aspect-ratio:283.61 / 143.81;height:auto;
  --lg-schrift:var(--schwarz);
  --lg-zusatz:var(--grau);
}
/* Die Farben laufen über Variablen, nicht über Nachfahren-Selektoren: der
   Inhalt eines <use> steckt in einem Shadow-Tree, den .fuss .lg-d nicht
   erreicht. Benutzerdefinierte Eigenschaften werden dorthin vererbt. */
.lg-m{fill:var(--magenta)}
.lg-d{fill:var(--lg-schrift)}
.lg-g{fill:var(--lg-zusatz)}
.lg-w{fill:#fff}
.fuss .logo{--lg-schrift:#fff;--lg-zusatz:#b8b6ba}

.kopf__logo .logo{height:calc(var(--kopf-hoehe) - 2 * var(--logo-luft));transition:height .3s var(--kurve)}
.kopf.ist-gescrollt .kopf__logo .logo{height:calc(var(--kopf-hoehe-klein) - 2 * var(--logo-luft))}
.kopf__nav{margin-left:auto;display:flex;gap:2rem}
.kopf__nav a{
  text-decoration:none;font-size:.95rem;font-weight:500;color:var(--text);
  position:relative;padding:.35rem 0;transition:color .2s;
}
.kopf__nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--magenta);
  transform:scaleX(0);transform-origin:left;transition:transform .3s var(--kurve);
}
.kopf__nav a:hover{color:var(--magenta-text)}
.kopf__nav a:hover::after{transform:scaleX(1)}

.burger{display:none;width:44px;height:44px;border:0;background:none;padding:10px;cursor:pointer;flex:none}
.burger span{display:block;height:2px;background:var(--schwarz);border-radius:2px;transition:transform .3s var(--kurve),opacity .2s}
.burger span+span{margin-top:6px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(8px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

.mobilnav{
  display:none;flex-direction:column;border-top:1px solid var(--grau-rand);
  background:#fff;padding:.5rem 1rem 1.25rem;
}
.mobilnav a{padding:.9rem .25rem;text-decoration:none;font-weight:500;border-bottom:1px solid var(--grau-rand)}
.mobilnav a:last-child{border-bottom:0;color:var(--magenta);font-weight:600}

/* ---------- Hero ---------- */
.hero{
  position:relative;padding:calc(var(--kopf-hoehe) + clamp(3.5rem,8vw,7rem)) 0 clamp(4.5rem,9vw,8rem);
  overflow:hidden;isolation:isolate;
}
.hero__raster{
  position:absolute;inset:0;z-index:-2;
  background-image:linear-gradient(var(--grau-rand) 1px,transparent 1px),linear-gradient(90deg,var(--grau-rand) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(120% 85% at 78% 22%,#000 5%,transparent 70%);
  mask-image:radial-gradient(120% 85% at 78% 22%,#000 5%,transparent 70%);
  opacity:.75;
}
.hero__glanz{
  position:absolute;z-index:-1;width:min(70vw,720px);aspect-ratio:1;right:-12%;top:-22%;
  background:radial-gradient(circle,rgba(236,0,140,.16),rgba(236,0,140,0) 62%);
  filter:blur(6px);animation:atmen 14s ease-in-out infinite;
}
@keyframes atmen{0%,100%{transform:scale(1) translate(0,0)}50%{transform:scale(1.12) translate(-3%,3%)}}

.hero__innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.62fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero__lead{font-size:clamp(1.06rem,1rem + .45vw,1.28rem);color:var(--text-leise);max-width:46ch;margin-bottom:2rem}
.hero__tasten{display:flex;flex-wrap:wrap;gap:.85rem}
.hero__fussnote{margin-top:1.5rem;font-size:.9rem;color:var(--text-leise);display:flex;align-items:center;gap:.55rem}
.hero__fussnote::before{
  content:"";width:9px;height:9px;border-radius:50%;background:var(--magenta);flex:none;
  box-shadow:0 0 0 0 rgba(236,0,140,.55);animation:puls 2.4s infinite;
}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(236,0,140,.5)}70%{box-shadow:0 0 0 12px rgba(236,0,140,0)}100%{box-shadow:0 0 0 0 rgba(236,0,140,0)}}

/* Bildmarke — Quadrat, weisses X und die 15 Teile sind Originalpfade aus der
   Vektorquelle.

   Schleife (8 s): geschlossenes Logo -> Bruch an der oberen linken Ecke ->
   die Teile kommen auf ihren Plaetzen aus dem Originallogo zur Ruhe ->
   derselbe Weg zurueck.

   Der Loop ist nahtlos, weil die Teile die Aussparung SELBST ausfuellen. Es
   gibt keine Deckflaeche und nichts, was ein- oder ausgeblendet wuerde: die
   L-foermige Aussparung ist in genau 15 Zellen parkettiert (lueckenlos,
   nachgerechnet), und im geschlossenen Zustand sitzt jedes Teil achsparallel
   und passgenau in seiner Zelle. Deshalb ist das Quadrat dort wirklich voll
   — und wenn die Teile wegfliegen, entsteht die Aussparung von selbst.

   Physik: alle Teile loesen sich im selben Moment — ein Bruch, nicht eine
   Reihe von Bruechen. Weil alle dieselbe Flugzeit haben, ist das Teil mit dem
   weitesten Weg das schnellste, also das erste, das vom Logo weg ist. Welche
   Zelle ein Teil bekommt, haengt davon ab, wie lose es sass: die Zuordnung
   laeuft ueber den Abstand zur Bruchkante.

   Drei Ebenen, damit die Bahn glatt bleibt: .px-flug traegt nur die
   Verschiebung und kommt mit zwei Keyframes je Richtung aus — ein Keyframe
   mitten in der Bahn wuerde die Bewegung dort auf null abbremsen, genau das
   erzeugt sichtbare Haltestufen. .px-fuege traegt Drehung und Streckung in
   die Zelle.

   Kein filter und kein will-change auf der Marke — Chrome rastert das SVG
   sonst einmal als Bild und die Kanten der kleinen Teile werden unscharf. */
.hero__marke{position:relative;max-width:340px;margin-inline:auto;width:100%}
.marke{width:100%;height:auto;overflow:visible;shape-rendering:geometricPrecision}
.mk-auftritt{transform-box:fill-box;transform-origin:70% 70%;animation:marke-auftritt 1s var(--kurve) both}
@keyframes marke-auftritt{from{opacity:0;transform:scale(.86) rotate(-5deg)}to{opacity:1;transform:none}}

.marke .mk-flaeche,.marke .px{fill:var(--magenta)}
.marke .mk-x{fill:#fff;transform-box:fill-box;transform-origin:center;animation:x-ein .8s .25s var(--kurve) both}
@keyframes x-ein{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}

/* Flugdaten der Logoteile — ausgelagert, damit die Seite ohne
   style-Attribute auskommt und die CSP kein 'unsafe-inline' braucht.
   Die Reihenfolge entspricht den <g class="px-flug"> im Markup. */
.mk-auftritt > g:nth-of-type(1){--dx:0.47px;--dy:-0.35px}
.mk-auftritt > g:nth-of-type(1) > .px-fuege{--rot:-0.0deg;--sx:0.983;--sy:1.152}
.mk-auftritt > g:nth-of-type(2){--dx:1.68px;--dy:5.81px}
.mk-auftritt > g:nth-of-type(2) > .px-fuege{--rot:-0.0deg;--sx:0.983;--sy:1.427}
.mk-auftritt > g:nth-of-type(3){--dx:3.96px;--dy:15.19px}
.mk-auftritt > g:nth-of-type(3) > .px-fuege{--rot:13.9deg;--sx:0.931;--sy:1.427}
.mk-auftritt > g:nth-of-type(4){--dx:18.26px;--dy:9.41px}
.mk-auftritt > g:nth-of-type(4) > .px-fuege{--rot:-17.0deg;--sx:1.206;--sy:1.414}
.mk-auftritt > g:nth-of-type(5){--dx:19.75px;--dy:15.46px}
.mk-auftritt > g:nth-of-type(5) > .px-fuege{--rot:21.7deg;--sx:1.205;--sy:1.815}
.mk-auftritt > g:nth-of-type(6){--dx:13.92px;--dy:19.36px}
.mk-auftritt > g:nth-of-type(6) > .px-fuege{--rot:10.7deg;--sx:1.205;--sy:1.750}
.mk-auftritt > g:nth-of-type(7){--dx:11.61px;--dy:29.77px}
.mk-auftritt > g:nth-of-type(7) > .px-fuege{--rot:-20.9deg;--sx:1.142;--sy:1.751}
.mk-auftritt > g:nth-of-type(8){--dx:19.67px;--dy:30.59px}
.mk-auftritt > g:nth-of-type(8) > .px-fuege{--rot:25.1deg;--sx:1.142;--sy:1.815}
.mk-auftritt > g:nth-of-type(9){--dx:10.27px;--dy:8.65px}
.mk-auftritt > g:nth-of-type(9) > .px-fuege{--rot:-3.4deg;--sx:1.205;--sy:1.815}
.mk-auftritt > g:nth-of-type(10){--dx:16.95px;--dy:27.40px}
.mk-auftritt > g:nth-of-type(10) > .px-fuege{--rot:25.7deg;--sx:1.142;--sy:1.815}
.mk-auftritt > g:nth-of-type(11){--dx:14.77px;--dy:11.23px}
.mk-auftritt > g:nth-of-type(11) > .px-fuege{--rot:3.6deg;--sx:1.040;--sy:0.872}
.mk-auftritt > g:nth-of-type(12){--dx:1.72px;--dy:9.13px}
.mk-auftritt > g:nth-of-type(12) > .px-fuege{--rot:23.3deg;--sx:1.040;--sy:0.924}
.mk-auftritt > g:nth-of-type(13){--dx:0.58px;--dy:11.20px}
.mk-auftritt > g:nth-of-type(13) > .px-fuege{--rot:-0.0deg;--sx:0.983;--sy:1.204}
.mk-auftritt > g:nth-of-type(14){--dx:0.47px;--dy:3.86px}
.mk-auftritt > g:nth-of-type(14) > .px-fuege{--rot:-0.0deg;--sx:0.983;--sy:1.204}
.mk-auftritt > g:nth-of-type(15){--dx:5.84px;--dy:5.90px}
.mk-auftritt > g:nth-of-type(15) > .px-fuege{--rot:10.9deg;--sx:0.984;--sy:1.205}

/* Bahn */
.px-flug{animation:px-flug 8s 1.2s infinite both}
@keyframes px-flug{
  0%       {transform:translate(var(--dx),var(--dy))}
  14%      {transform:translate(var(--dx),var(--dy));
            animation-timing-function:cubic-bezier(.05,.74,.2,1)}   /* Bruch: sofort schnell, langes Ausklingen */
  42%      {transform:none}
  60%      {transform:none;
            animation-timing-function:cubic-bezier(.6,.02,.3,1)}    /* Rueckweg: sanft an, weich einrasten */
  88%,100% {transform:translate(var(--dx),var(--dy))}
}

/* Einpassung in die Zelle: Drehung in die Achse und Streckung auf die
   Zellgroesse. Getrennte Ebene, damit die Bahn davon unberuehrt bleibt. */
.px-fuege{transform-box:fill-box;transform-origin:center;animation:px-fuege 8s 1.2s infinite both}
@keyframes px-fuege{
  0%       {transform:scale(var(--sx),var(--sy)) rotate(var(--rot))}
  14%      {transform:scale(var(--sx),var(--sy)) rotate(var(--rot));
            animation-timing-function:cubic-bezier(.05,.74,.2,1)}
  42%      {transform:scale(1,1) rotate(0deg)}
  60%      {transform:scale(1,1) rotate(0deg);
            animation-timing-function:cubic-bezier(.6,.02,.3,1)}
  88%,100% {transform:scale(var(--sx),var(--sy)) rotate(var(--rot))}
}

.hero__runter{
  position:absolute;left:50%;bottom:1.6rem;translate:-50% 0;width:26px;height:42px;
  border:2px solid var(--grau-rand);border-radius:999px;display:grid;justify-items:center;padding-top:7px;
  transition:border-color .25s;
}
.hero__runter:hover{border-color:var(--magenta)}
.hero__runter span{width:4px;height:8px;border-radius:2px;background:var(--magenta);animation:runter 1.8s var(--kurve) infinite}
@keyframes runter{0%{transform:translateY(0);opacity:0}30%{opacity:1}70%{transform:translateY(14px);opacity:0}100%{opacity:0}}

/* ---------- Abschnitte ---------- */
.abschnitt{padding:clamp(4rem,8vw,7rem) 0;position:relative}
.abschnitt--grau{background:var(--grau-hell)}

.kopfzeile{max-width:60ch;margin:0 auto clamp(2.5rem,5vw,3.75rem);text-align:center}
.kopfzeile--links{margin-inline:0;text-align:left}
.kopfzeile--links .dachzeile{justify-content:flex-start}
.kopfzeile .dachzeile{justify-content:center}
.kopfzeile__lead{color:var(--text-leise);font-size:1.06rem;margin:0}

/* ---------- Karten ---------- */
.karten{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.karten--3{grid-template-columns:repeat(auto-fit,minmax(285px,1fr))}
.karten--4{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}

.karte{
  background:var(--weiss);border:1px solid var(--grau-rand);border-radius:var(--radius);
  padding:clamp(1.5rem,2.4vw,2rem);position:relative;overflow:hidden;
  transition:transform .4s var(--kurve),box-shadow .4s var(--kurve),border-color .3s;
  box-shadow:var(--schatten);
}
.karte::before{
  content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--magenta);
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--kurve);
}
.karte:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch);border-color:transparent}
.karte:hover::before{transform:scaleX(1)}
.karte p{color:var(--text-leise);font-size:.97rem;margin-bottom:0}
.karte--klick{text-decoration:none;display:block}
.karte__gross{font-size:1.1rem;font-weight:600;color:var(--magenta-text)!important;margin-bottom:.4rem;word-break:break-word}
.karte__nr{
  font-size:.76rem;font-weight:700;letter-spacing:.12em;color:var(--text-leise);
  display:block;margin-bottom:.9rem;
}
.karte__zeichen{
  width:46px;height:46px;border-radius:12px;background:rgba(236,0,140,.1);
  display:grid;place-items:center;margin-bottom:1.1rem;transition:background-color .3s,transform .4s var(--kurve);
}
.karte__zeichen svg{width:22px;height:22px;fill:var(--magenta)}
.karte:hover .karte__zeichen{background:var(--magenta);transform:rotate(-6deg) scale(1.05)}
.karte:hover .karte__zeichen svg{fill:#fff}
.karte--hinweis{background:linear-gradient(160deg,rgba(236,0,140,.07),rgba(236,0,140,.02));border-style:dashed}
.karte__link{display:inline-block;margin-top:1rem;color:var(--magenta-text);font-weight:600;font-size:.95rem;text-decoration:none}
.karte__link span{display:inline-block;transition:transform .3s var(--kurve)}
.karte__link:hover span{transform:translateX(5px)}

/* ---------- Dunkles Band ---------- */
.abschnitt--dunkel{background:var(--dunkel);color:#c9c8ca;overflow:hidden;isolation:isolate}
.abschnitt--dunkel h2,.abschnitt--dunkel h3{color:#fff}
.abschnitt--dunkel .kopfzeile__lead{color:#a3a1a5}
.band__glanz{
  position:absolute;inset:auto auto 0 50%;translate:-50% 30%;width:min(120%,1200px);aspect-ratio:2.2;z-index:-1;
  background:radial-gradient(ellipse at center,rgba(236,0,140,.28),rgba(236,0,140,0) 64%);
  animation:atmen 18s ease-in-out infinite;
}
.karte--dunkel{background:var(--dunkel-2);border-color:rgba(255,255,255,.09);box-shadow:none}
.karte--dunkel p{color:#a3a1a5}
.karte--dunkel:hover{border-color:rgba(236,0,140,.4);box-shadow:0 24px 48px -28px rgba(0,0,0,.9)}

/* ---------- Kontakt ---------- */
.kontakt__raster{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.kontaktdaten{display:grid;gap:1.15rem;margin:0}
.kontaktdaten div{display:grid;grid-template-columns:96px 1fr;gap:1rem;align-items:baseline}
.kontaktdaten dt{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise)}
.kontaktdaten dd{margin:0;font-weight:500}
.kontaktdaten a{color:var(--magenta-text);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s}
.kontaktdaten a:hover{border-bottom-color:currentColor}

.kontaktdaten__zusatz{font-size:.82rem;font-weight:400;color:var(--text-leise);display:inline-block;margin-top:.15rem}
.karte--leise .karte__zeichen{background:var(--grau-hell)}
.karte--leise .karte__zeichen svg{fill:var(--grau)}
.karte--leise .karte__gross{color:var(--text)!important}
.karte--leise:hover .karte__zeichen{background:var(--grau)}

.formular__huelle{
  background:var(--weiss);border:1px solid var(--grau-rand);border-radius:var(--radius);
  padding:clamp(1.5rem,3vw,2.5rem);box-shadow:var(--schatten-hoch);
}
.feld{margin:0 0 1.15rem}
.feld__paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.feld label,.feld legend{display:block;font-size:.86rem;font-weight:600;color:var(--schwarz);margin-bottom:.45rem;padding:0}
.pflicht{color:var(--magenta-text)}
.feld input[type=text],.feld input[type=email],.feld input[type=tel],.feld textarea{
  width:100%;padding:.8rem .95rem;border:1.5px solid var(--grau-rand);border-radius:10px;
  font:inherit;font-size:.97rem;background:var(--grau-hell);color:var(--text);
  transition:border-color .2s,background-color .2s,box-shadow .2s;
}
.feld input:focus,.feld textarea:focus{
  outline:0;border-color:var(--magenta);background:var(--weiss);box-shadow:0 0 0 4px rgba(236,0,140,.12);
}
.feld textarea{resize:vertical;min-height:130px}
.feld--wahl{border:0;padding:0;margin:0 0 1.15rem}
.wahl{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.wahl--stufen{grid-template-columns:repeat(3,1fr)}
.wahl label{
  margin:0;display:flex;align-items:center;gap:.55rem;cursor:pointer;
  border:1.5px solid var(--grau-rand);border-radius:10px;padding:.7rem .85rem;
  font-weight:500;font-size:.92rem;color:var(--text);
  transition:border-color .2s,background-color .2s,transform .2s var(--kurve);
}
.wahl label:hover{border-color:var(--magenta);transform:translateY(-1px)}
.wahl input{accent-color:var(--magenta);margin:0;flex:none}
.wahl label:has(input:checked){border-color:var(--magenta);background:rgba(236,0,140,.06)}
.feld--haken label{display:flex;gap:.7rem;align-items:flex-start;font-weight:400;font-size:.88rem;color:var(--text-leise);line-height:1.5}
.feld--haken input{accent-color:var(--magenta);margin-top:.25rem;flex:none;width:17px;height:17px}
.feld--haken a{color:var(--magenta-text)}
.falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__fuss{display:grid;gap:.75rem;justify-items:center;margin:1.5rem 0 0}
.formular__hinweis{font-size:.82rem;color:var(--text-leise)}
.feld input[aria-invalid="true"],.feld textarea[aria-invalid="true"]{border-color:#d92d20;background:#fff5f4}
.feld--wahl[data-fehler="1"] legend,.feld--haken[data-fehler="1"]{color:#d92d20}
.feldfehler{display:block;margin-top:.4rem;font-size:.82rem;font-weight:500;color:#d92d20}


/* ---------- Rechtstexte ---------- */
.fliess h3{margin-top:1.9rem;font-size:1.02rem}
.fliess h3:first-child{margin-top:0}
.fliess p{color:var(--text-leise);font-size:.96rem}
.fliess a{color:var(--magenta-text);text-decoration:none;border-bottom:1px solid rgba(236,0,140,.35)}
.fliess a:hover{border-bottom-color:var(--magenta-text)}


/* ---------- Modal für Impressum und Datenschutz ----------
   Grundlage ist :target, nicht JavaScript: ohne Skript sind die Rechtstexte
   sonst unerreichbar, und § 5 DDG verlangt "ständig verfügbar". JavaScript
   ergänzt nur Escape, Klick daneben und die Fokusführung. */
.modal{
  position:fixed;inset:0;z-index:80;display:none;
  align-items:center;justify-content:center;padding:clamp(.75rem,3vw,2.5rem);
}
.modal:target{display:flex}
.modal__grund{
  position:absolute;inset:0;background:rgba(21,19,21,.55);
  backdrop-filter:blur(3px);animation:modal-grund .25s var(--kurve) both;
}
@keyframes modal-grund{from{opacity:0}to{opacity:1}}

.modal__box{
  position:relative;z-index:1;background:var(--weiss);border-radius:var(--radius);
  width:min(100%,720px);max-height:min(88vh,900px);display:flex;flex-direction:column;
  box-shadow:0 32px 80px -24px rgba(21,19,21,.45);overflow:hidden;
  animation:modal-auf .32s var(--kurve) both;
}
@keyframes modal-auf{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}

.modal__kopf{
  padding:clamp(1.25rem,3vw,1.9rem) clamp(1.25rem,4vw,2.25rem) 1rem;
  border-bottom:1px solid var(--grau-rand);position:relative;flex:none;
}
.modal__kopf h2{margin:0;font-size:clamp(1.35rem,1.1rem + 1vw,1.8rem)}
.modal__kopf .dachzeile{margin-bottom:.6rem}
.modal__zu{
  position:absolute;top:clamp(1rem,2.5vw,1.5rem);right:clamp(1rem,3vw,1.5rem);
  width:40px;height:40px;border-radius:50%;display:grid;place-items:center;
  background:var(--grau-hell);color:var(--text-leise);text-decoration:none;
  transition:background-color .2s,color .2s,transform .25s var(--kurve);
}
.modal__zu svg{width:16px;height:16px;fill:currentColor}
.modal__zu:hover{background:var(--magenta);color:#fff;transform:rotate(90deg)}

.modal__inhalt{
  padding:clamp(1.25rem,3vw,1.9rem) clamp(1.25rem,4vw,2.25rem) clamp(1.5rem,4vw,2.25rem);
  overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
}
.modal__lead{color:var(--text-leise);font-size:.96rem;margin-bottom:1.5rem}

/* Seite hinter dem Modal nicht mitscrollen lassen */
body:has(.modal:target){overflow:hidden}


/* Rückmeldung nach dem Absenden: groß, mittig, mit gezeichnetem Haken.
   Öffnet über :target — kontakt.php leitet auf #gesendet bzw. #fehler
   zurück, das funktioniert deshalb auch ohne JavaScript. */
.modal--gross .modal__box{width:min(100%,560px)}
.modal__box--mitte{text-align:center}
.modal__inhalt--mitte{padding:clamp(2.25rem,6vw,3.25rem) clamp(1.5rem,5vw,3rem) clamp(1.75rem,5vw,2.75rem)}
.modal__box--mitte h2{margin:0 0 .6rem;font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem)}
.modal__gross{font-size:clamp(1.02rem,.98rem + .3vw,1.16rem);color:var(--text);margin-bottom:.9rem}
.modal__leise{color:var(--text-leise);font-size:.95rem;max-width:42ch;margin-inline:auto}
.modal__tasten{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.9rem}

.haken{display:block;width:clamp(72px,16vw,92px);margin:0 auto 1.5rem}
.haken svg{width:100%;height:auto;overflow:visible}
.haken__kreis{
  fill:none;stroke:var(--magenta);stroke-width:2.5;
  stroke-dasharray:151;stroke-dashoffset:151;
  animation:haken-kreis .6s var(--kurve) .1s forwards;
}
.haken__strich{
  fill:none;stroke:var(--magenta);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:48;stroke-dashoffset:48;
  animation:haken-strich .4s var(--kurve) .55s forwards;
}
@keyframes haken-kreis{to{stroke-dashoffset:0}}
@keyframes haken-strich{to{stroke-dashoffset:0}}
.haken--fehler .haken__kreis,.haken--fehler .haken__strich{stroke:#d92d20}
.haken--fehler .haken__strich{stroke-dasharray:46}

/* ---------- Fehlerseite ---------- */
.fehlerseite{min-height:100vh;display:grid;place-items:center;padding:clamp(2rem,6vw,4rem) 0;position:relative;overflow:hidden}
.fehlerseite::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background-image:linear-gradient(var(--grau-rand) 1px,transparent 1px),linear-gradient(90deg,var(--grau-rand) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(110% 80% at 50% 30%,#000 5%,transparent 70%);
  mask-image:radial-gradient(110% 80% at 50% 30%,#000 5%,transparent 70%);opacity:.75;
}
.fehlerseite__innen{max-width:56ch;text-align:center}
.fehlerseite__innen .dachzeile{justify-content:center}
.fehlerseite__logo{display:inline-block;margin-bottom:clamp(2rem,5vw,3rem)}
.fehlerseite__logo .logo{height:72px}
.fehlerseite h1{font-size:clamp(1.9rem,1.5rem + 2vw,2.9rem);margin-bottom:1rem}
.fehlerseite__lead{color:var(--text-leise);font-size:1.05rem;margin-bottom:2rem}
.fehlerseite .hero__tasten{justify-content:center}

/* ---------- Fuß ---------- */
.fuss{background:var(--dunkel);color:#9d9ba0;padding:clamp(3rem,6vw,4.5rem) 0 1.75rem;font-size:.94rem}
.fuss__raster{display:grid;grid-template-columns:1.6fr repeat(3,1fr);gap:2rem}
.fuss__marke .logo{height:52px;margin-bottom:1rem}
.fuss address{font-style:normal}
.fuss__marke p{font-size:.86rem;letter-spacing:.02em;color:#9d9ba0;max-width:34ch}
.fuss__titel{font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#fff;margin-bottom:.9rem}
.fuss a{color:#c9c8ca;text-decoration:none;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.fuss a:hover{color:var(--magenta);border-bottom-color:currentColor}
.fuss__zeile{
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;align-items:center;
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.1);
  font-size:.84rem;color:#9d9ba0;
}
.fuss__hoch{text-decoration:none}

/* ---------- Scroll-Einblendung ---------- */
[data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .7s var(--kurve),transform .7s var(--kurve);transition-delay:var(--verzug,0ms)}
[data-reveal].ist-sichtbar{opacity:1;transform:none}

/* ---------- Schmale Fenster ---------- */
@media (max-width:1000px){
  .hero__innen{grid-template-columns:1fr;text-align:left}
  .hero__marke{max-width:240px;margin-inline:0;order:-1}
  .kontakt__raster{grid-template-columns:1fr}
  .fuss__raster{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
  .kopf__nav,.kopf .knopf--klein{display:none}
  .burger{display:block;margin-left:auto}
  .mobilnav{display:flex;max-height:0;overflow:hidden;padding-block:0;border-top-color:transparent;transition:max-height .4s var(--kurve),padding .3s}
  .kopf.ist-offen .mobilnav{max-height:340px;padding-block:.5rem 1.25rem;border-top-color:var(--grau-rand)}
  .feld__paar,.wahl,.wahl--stufen{grid-template-columns:1fr}
  .kontaktdaten div{grid-template-columns:1fr;gap:.2rem}
  .fuss__raster{grid-template-columns:1fr}
  .hero__runter{display:none}
}

/* ---------- Bewegung abschalten ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
  .marke .px,.marke .mk-flaeche,.marke .mk-x,.mk-auftritt,.px-flug,.px-fuege{opacity:1!important;transform:none!important}
  .modal__box,.modal__grund{animation:none!important}
  .haken__kreis,.haken__strich{animation:none!important;stroke-dashoffset:0!important}
}