/* ═══════════════════════════════════════════════════════════════
   Nodrio — Webdesign & Automatisierungen
   Landingpage-Hierarchie zuerst. Der Workflow ist der rote Faden, der die
   Sektionen verbindet — kein nachgebauter Editor.
   ═══════════════════════════════════════════════════════════════ */

@font-face{
  font-family:"Inter";font-style:normal;font-weight:400 600;font-display:swap;
  src:url(fonts/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Space Grotesk";font-style:normal;font-weight:500 700;font-display:swap;
  src:url(fonts/space-grotesk-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

:root{
  /* Kein reines Weiß: eine minimal kühle Grundfläche, darauf echte weiße Karten.
     Reinweiß auf Reinweiß hat keine Tiefe und wirkt unfertig. */
  --bg:#f7f8fb;
  --flaeche:#ffffff;
  --flaeche-hoch:#ffffff;
  --linie:rgba(16,24,40,.10);
  --linie-stark:rgba(16,24,40,.17);
  --text:#101828;
  --text-dim:#475467;
  --text-schwach:#667085;    /* 4,7:1 auf --bg */
  --gruen:#079455;
  --rot:#d92d20;
  /* Markenfarben auf tragfähige Werte gezogen: Neon-Cyan ist auf Weiß unlesbar */
  --cyan:#0086d6; --blau:#2f56d9; --violett:#7038d0;
  --marke:linear-gradient(115deg,var(--cyan),var(--blau) 48%,var(--violett));

  --font-d:"Space Grotesk",system-ui,sans-serif;
  --font-b:"Inter",system-ui,-apple-system,sans-serif;

  --t-hero:clamp(2.4rem,1.3rem + 4.1vw,4.3rem);
  --t-h2:clamp(1.85rem,1.2rem + 2.3vw,3rem);
  --t-lead:clamp(1.05rem,.98rem + .5vw,1.28rem);
  --abstand:clamp(3.6rem,2.6rem + 4vw,6.5rem);

  --ease:cubic-bezier(.22,1,.36,1);
  --radius:14px;
  --kopf:64px;

  /* Materialität: gestaffelte Schatten plus Lichtkante an der Oberkante.
     Eine einzelne box-shadow-Ebene wirkt immer wie aufgeklebtes Papier. */
  --kante:inset 0 1px 0 rgba(255,255,255,.7);
  --schatten-s:0 1px 2px rgba(16,24,40,.06),0 1px 3px rgba(16,24,40,.1);
  --schatten-m:0 2px 4px -2px rgba(16,24,40,.06),0 4px 8px -2px rgba(16,24,40,.1);
  --schatten-l:0 4px 6px -2px rgba(16,24,40,.03),0 12px 16px -4px rgba(16,24,40,.08),
               0 24px 48px -12px rgba(16,24,40,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{color-scheme:light;scroll-behavior:smooth}
[id]{scroll-margin-top:calc(var(--kopf) + 32px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font-b);
  font-size:16px;line-height:1.65;overflow-x:hidden;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0;font-family:var(--font-d);letter-spacing:-.03em;line-height:1.08}
p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--blau);outline-offset:3px;border-radius:6px}
.bahn{width:min(1180px,92vw);margin-inline:auto}
.grad{background:var(--marke);-webkit-background-clip:text;background-clip:text;color:transparent}

.skip{position:absolute;top:-100px;left:12px;z-index:60;padding:.6rem 1rem;border-radius:8px;
  background:var(--flaeche-hoch);border:1px solid var(--blau);transition:top .2s}
.skip:focus{top:10px}

/* ── Atmosphäre: dezent, füllt die Fläche, drängt sich nicht auf ── */
/* Kein Punktraster — dasselbe Klischee wie Icon-Kästchen. Stattdessen weiches
   Licht: große, sehr diffuse Farbfelder, die mit dem Scroll wandern. */
.schein{position:fixed;inset:-40vh -20vw;z-index:-4;pointer-events:none;
  background:
    radial-gradient(44vw 40vw at calc(18% + var(--mx,0) * 2.5%) calc(10% + var(--p,0) * 40%),rgba(0,134,214,.13),transparent 62%),
    radial-gradient(50vw 44vw at calc(84% + var(--mx,0) * 2.5%) calc(74% - var(--p,0) * 42%),rgba(112,56,208,.11),transparent 64%)}

/* ══ Kopfzeile ══════════════════════════════════════════════ */
.kopf{position:fixed;top:0;left:0;right:0;z-index:50;height:var(--kopf);
  background:rgba(247,248,251,.8);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s,background-color .3s}
.kopf[data-fest]{border-bottom-color:var(--linie);background:rgba(247,248,251,.94)}
.kopf .bahn{display:flex;align-items:center;gap:1.4rem;height:100%}
.wortmarke{display:flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--font-d);font-weight:700;font-size:1.18rem;letter-spacing:-.02em}
.wortmarke svg{width:24px;height:27px;flex:none}
.haupt-nav{margin-left:auto;display:flex;gap:1.9rem}
.haupt-nav a{position:relative;text-decoration:none;color:var(--text-dim);font-size:.94rem;
  font-weight:500;padding:.35rem 0;transition:color .25s}
.haupt-nav a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1.5px;
  background:var(--marke);transform:scaleX(0);transform-origin:left;
  transition:transform .35s var(--ease)}
.haupt-nav a:hover{color:var(--text)}
.haupt-nav a:hover::after{transform:scaleX(1)}
/* ── Menü für schmale Geräte ───────────────────────────────
   Unter 880px verschwand die Navigation bisher ersatzlos — auf dem Gerät,
   von dem über die Hälfte der Besucher kommt. */
.menu-knopf{display:none;margin-left:auto;width:42px;height:42px;flex:none;
  align-items:center;justify-content:center;border-radius:10px;
  border:1px solid var(--linie-stark);background:var(--flaeche);cursor:pointer}
.menu-knopf span{position:relative;display:block;width:17px;height:1.5px;border-radius:2px;
  background:var(--text);transition:background-color .2s}
.menu-knopf span::before,.menu-knopf span::after{content:"";position:absolute;left:0;
  width:17px;height:1.5px;border-radius:2px;background:var(--text);
  transition:transform .35s var(--ease),top .25s var(--ease)}
.menu-knopf span::before{top:-5.5px}
.menu-knopf span::after{top:5.5px}
.menu-knopf[aria-expanded=true] span{background:transparent}
.menu-knopf[aria-expanded=true] span::before{top:0;transform:rotate(45deg)}
.menu-knopf[aria-expanded=true] span::after{top:0;transform:rotate(-45deg)}

@media(max-width:880px){
  .menu-knopf{display:flex}
  .kopf .knopf{display:none}
  .haupt-nav{position:fixed;left:0;right:0;top:var(--kopf);bottom:0;z-index:45;
    margin:0;flex-direction:column;justify-content:flex-start;gap:0;
    padding:1.2rem clamp(1rem,4vw,2rem) 2rem;
    background:rgba(7,9,15,.97);backdrop-filter:blur(16px);
    opacity:0;visibility:hidden;translate:0 -8px;
    transition:opacity .3s var(--ease),translate .35s var(--ease),visibility .35s}
  .haupt-nav[data-offen]{opacity:1;visibility:visible;translate:0 0}
  .haupt-nav a{font-size:1.15rem;padding:1rem 0;border-bottom:1px solid var(--linie)}
  .haupt-nav a::after{display:none}
  .haupt-nav .knopf-mobil{display:inline-flex;margin-top:1.6rem;border-bottom:0;
    color:#fff}
}
@media(min-width:881px){.haupt-nav .knopf-mobil{display:none}}

/* ══ Knöpfe ═════════════════════════════════════════════════ */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:48px;padding:0 1.5rem;border-radius:10px;font-weight:600;font-size:.97rem;
  text-decoration:none;white-space:nowrap;border:1px solid transparent;cursor:pointer;
  transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s var(--ease)}
.knopf-p{background:var(--marke);color:#fff;
  box-shadow:0 1px 2px rgba(16,24,40,.12),0 8px 20px -8px rgba(47,86,217,.5),
             inset 0 1px 0 rgba(255,255,255,.22)}
.knopf-p:hover{transform:translateY(-2px);box-shadow:0 16px 40px -12px rgba(59,107,245,1)}
.knopf-g{border-color:var(--linie-stark);color:var(--text);background:var(--flaeche);
  box-shadow:var(--schatten-s)}
.knopf-g:hover{transform:translateY(-2px);background:#f2f4f8}
.kopf .knopf{min-height:40px;padding:0 1.05rem;font-size:.9rem;border-radius:8px}

/* ══ Hero ═══════════════════════════════════════════════════ */
.hero{position:relative;padding:calc(var(--kopf) + clamp(3rem,2rem + 4.5vw,5rem)) 0 clamp(2rem,1.5rem + 2vw,3rem);
  text-align:center}
.hero .bahn{max-width:900px}
/* Oberzeile: klein, weit gesperrt, in Markenfarbe — der einzige Farbakzent oben */
.marke-band{font-size:.76rem;font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  color:#2f56d9}
/* Kein Farbverlauf über den Satz: das liest sich als Template. Stattdessen ein
   fast unmerklicher Licht-Verlauf von Weiß nach kühlem Grau — die Marke trägt
   sich über Logo, Knöpfe, Visual und Glanz. */
/* Optische Korrektur: je größer der Grad, desto enger das Tracking. */
h1{font-size:var(--t-hero);margin:1.5rem auto 0;line-height:.92;letter-spacing:-.045em;
  max-width:15ch}
/* WICHTIG: background-clip auf den SPANS, nicht auf dem h1. Ein Kind mit
   filter/opacity/transform rutscht in eine eigene Renderebene — der Clip des
   Elternteils greift dort nicht mehr durch und die Zeile verschwindet spurlos. */
h1 span{display:block;-webkit-background-clip:text;background-clip:text;color:transparent}
h1 span:nth-child(1){background-image:linear-gradient(176deg,#0b1220 10%,#182233 100%)}
h1 span:nth-child(2){background-image:linear-gradient(176deg,#28334a 0%,#4b586e 100%)}
/* Der Einstieg baut sich zeilenweise auf, nicht als Block */
@keyframes einlauf{from{opacity:0;transform:translate3d(0,26px,0);filter:blur(7px)}
  to{opacity:1;transform:none;filter:blur(0)}}
.hero .marke-band,.hero h1 span,.hero .lead,.hero .tat,.hero .beleg{
  animation:einlauf 1.25s cubic-bezier(.16,1,.3,1) both}
.hero .marke-band{animation-delay:.05s}
.hero h1 span:nth-child(1){animation-delay:.16s}
.hero h1 span:nth-child(2){animation-delay:.26s}
.hero .lead{animation-delay:.4s}
.hero .tat{animation-delay:.52s}
.hero .beleg{animation-delay:.62s}
.hero .lead{font-size:var(--t-lead);color:var(--text-dim);max-width:50ch;
  margin:1.6rem auto 0}
.tat{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:2.4rem;align-items:center;
  justify-content:center}
/* Ein primärer Knopf, ein Textlink — nicht zwei gleichwertige Kästen nebeneinander */
.weiter{display:inline-flex;align-items:center;gap:.4rem;text-decoration:none;
  font-size:.97rem;font-weight:500;color:#2f56d9;transition:gap .3s var(--ease),color .25s}
.weiter::after{content:"›";font-size:1.15em;line-height:1}
.weiter:hover{gap:.65rem;color:#1c3fb5}
.beleg{margin-top:1.6rem;font-size:.85rem;color:var(--text-schwach)}

/* Reflexkante oben — trennt Glas von Papier */

/* Urheberschaft direkt auf dem Bild. Ohne diesen Hinweis liest ein Besucher
   ein fremdes Logo als Stockbild, nicht als eigene Arbeit. */
.marke-eigen{position:absolute;top:.85rem;left:.85rem;z-index:3;
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.34rem .7rem .34rem .5rem;border-radius:999px;
  font-size:.74rem;font-weight:600;letter-spacing:.02em;color:var(--text);
  background:rgba(255,255,255,.94);backdrop-filter:blur(10px);
  border:1px solid var(--linie-stark);
  box-shadow:0 2px 8px rgba(16,24,40,.14)}
.marke-eigen svg{width:14px;height:15px;flex:none}
@media(max-width:560px){.marke-eigen{font-size:.68rem;top:.6rem;left:.6rem}}

/* Bildunterschrift: klein, mittig, aber inhaltlich eindeutig */

/* ══ Kennzahlen ═════════════════════════════════════════════ */
.zahlen{border-block:1px solid var(--linie);background:var(--flaeche)}
.zahlen .bahn{display:grid;grid-template-columns:repeat(3,1fr)}
.zahl{padding:2.3rem 1.4rem;text-align:center}
.zahl + .zahl{border-left:1px solid var(--linie)}
.zahl b{display:block;font-family:var(--font-d);font-size:clamp(1.8rem,1.2rem + 2vw,2.8rem);line-height:1}
.zahl span{font-size:.87rem;color:var(--text-dim)}
@media(max-width:700px){.zahlen .bahn{grid-template-columns:1fr}
  .zahl + .zahl{border-left:0;border-top:1px solid var(--linie)}.zahl{padding:1.5rem 1rem}}

/* ══ Sektionen ══════════════════════════════════════════════ */
section{padding-block:var(--abstand);position:relative}
.titelblock{max-width:58ch;margin-bottom:clamp(2rem,1.4rem + 2vw,2.9rem)}
.titelblock h2{font-size:var(--t-h2);margin:1rem 0}
.titelblock p{color:var(--text-dim);font-size:1.04rem}

/* Sektionsmarke: der Rest der Workflow-Anmutung — klein, ruhig, orientierend */
/* Nur gesperrte Versalschrift in Markenfarbe. Icon-Kästchen davor waren
   Automatisierungs-Erbe und lasen sich als Dashboard-Deko. */
.marke-zeile{font-size:.76rem;font-weight:600;letter-spacing:.18em;text-transform:uppercase;
  color:#2f56d9}

/* ══ Leistungen ═════════════════════════════════════════════ */
.karten{display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem}
.karte{position:relative;grid-column:span 3;padding:clamp(1.35rem,1rem + .9vw,1.9rem);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden;
  background:var(--flaeche);box-shadow:var(--schatten-m);
  transition:border-color .4s var(--ease),transform .4s var(--ease),box-shadow .4s var(--ease)}
.karte::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(420px circle at 12% -10%,rgba(47,86,217,.07),transparent 60%);
  opacity:0;transition:opacity .45s}
.karte:hover{transform:translateY(-4px);border-color:var(--linie-stark);box-shadow:var(--schatten-l)}
.karte:hover::before{opacity:1}
.karte.gross{grid-column:span 4}
.karte.klein{grid-column:span 2}
.karte h3{font-size:1.3rem;margin-bottom:.65rem}
.karte p{color:var(--text-dim);font-size:.97rem}
.karte ul{margin:1.1rem 0 0;padding:0;list-style:none;display:grid;gap:.5rem;
  font-size:.93rem;color:var(--text-dim)}
.karte li{position:relative;padding-left:1.15rem}
.karte li::before{content:"";position:absolute;left:0;top:.62rem;width:6px;height:6px;
  border-radius:2px;background:var(--marke)}
.sinn{width:44px;height:44px;display:grid;place-items:center;margin-bottom:1.2rem;
  border-radius:12px;border:1px solid var(--linie-stark);background:#f3f6fb}
.sinn svg{width:21px;height:21px;fill:none;stroke:var(--blau);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
@media(max-width:900px){.karten{grid-template-columns:1fr}
  .karte,.karte.gross,.karte.klein{grid-column:span 1}}

/* ══ Ablauf ═════════════════════════════════════════════════ */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:1.1rem;counter-reset:s}
.schritt{position:relative;padding:1.6rem 1.2rem 1.3rem;border:1px solid var(--linie);
  border-radius:var(--radius);box-shadow:var(--schatten-s);background:var(--flaeche)}
.schritt::before{counter-increment:s;content:"0" counter(s);
  font-family:var(--font-d);font-size:2.4rem;line-height:1;
  background:var(--marke);-webkit-background-clip:text;background-clip:text;color:transparent;opacity:.9}
.schritt h3{font-size:1.05rem;margin:.85rem 0 .45rem}
.schritt p{color:var(--text-dim);font-size:.92rem}
@media(max-width:900px){.schritte{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.schritte{grid-template-columns:1fr}}

/* ══ FAQ ════════════════════════════════════════════════════ */
.fragen{max-width:820px}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen summary{list-style:none;cursor:pointer;padding:1.05rem 2.4rem 1.05rem 0;position:relative;
  font-family:var(--font-d);font-size:1.06rem;font-weight:500;transition:color .25s}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:hover{color:var(--blau)}
.fragen summary::after{content:"";position:absolute;right:.4rem;top:50%;width:10px;height:10px;
  border-right:2px solid var(--text-schwach);border-bottom:2px solid var(--text-schwach);
  translate:0 -70%;rotate:45deg;transition:rotate .3s var(--ease),border-color .25s}
.fragen details[open] summary::after{rotate:225deg;translate:0 -20%;border-color:var(--blau)}
.fragen details p{padding:0 2.4rem 1.4rem 0;color:var(--text-dim)}

/* ══ Kontakt ════════════════════════════════════════════════ */
.kontakt{border-top:1px solid var(--linie)}
.kontakt::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 88% at 50% 100%,rgba(139,69,247,.18),transparent 70%)}
.kontakt .bahn{position:relative;display:grid;grid-template-columns:.88fr 1.12fr;
  gap:clamp(2rem,4vw,4.2rem);align-items:start}
@media(max-width:900px){.kontakt .bahn{grid-template-columns:1fr}}
.kontakt h2{font-size:var(--t-h2);max-width:16ch}
.kontakt .lead{color:var(--text-dim);font-size:var(--t-lead);margin-top:1.2rem;max-width:46ch}
.direkt{margin-top:2rem;display:grid;gap:.85rem;font-size:.96rem;color:var(--text-dim)}
.direkt a,.direkt p{display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
  color:var(--text-dim);transition:color .25s}
.direkt a:hover{color:var(--blau)}
.direkt svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--blau);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

form{padding:clamp(1.4rem,1rem + 1.2vw,2.2rem);border:1px solid var(--linie);
  border-radius:var(--radius);display:grid;gap:1rem;
  background:var(--flaeche);box-shadow:var(--schatten-l)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.paar{grid-template-columns:1fr}}
.feld{display:grid;gap:.4rem}
.feld > label{font-size:.85rem;font-weight:500;color:var(--text-dim)}
.pflicht{color:var(--blau)}
input,select,textarea{width:100%;padding:.75rem .9rem;min-height:48px;font:inherit;
  font-size:.96rem;color:var(--text);background:#fbfcfe;
  border:1px solid var(--linie-stark);border-radius:10px;
  transition:border-color .25s,background-color .25s}
textarea{min-height:124px;resize:vertical}
select{appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--text-schwach) 50%),
                   linear-gradient(135deg,var(--text-schwach) 50%,transparent 50%);
  background-position:calc(100% - 19px) 52%,calc(100% - 14px) 52%;
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
input::placeholder,textarea::placeholder{color:#98a2b3}
input:hover,select:hover,textarea:hover{border-color:#98a2b3}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blau);
  background:#fff;box-shadow:0 0 0 3px rgba(47,86,217,.14)}
[aria-invalid=true]{border-color:var(--rot)!important}
.fehler{font-size:.82rem;color:var(--rot);min-height:0}
.zustimmung{display:flex;gap:.7rem;align-items:flex-start;font-size:.87rem;
  color:var(--text-dim);line-height:1.5}
.zustimmung input{width:20px;height:20px;min-height:0;flex:none;margin-top:.15rem;padding:0;
  accent-color:var(--blau);cursor:pointer}
.zustimmung a{color:#2f56d9}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
form .knopf{width:100%}
.rueckmeldung{font-size:.92rem;padding:.85rem 1rem;border-radius:10px;
  border:1px solid var(--linie-stark);background:#f3f6fb}
.rueckmeldung:empty{display:none}
.rueckmeldung[data-stand=ok]{border-color:rgba(7,148,85,.45);background:#f0fdf6;color:#05683c}
.rueckmeldung[data-stand=err]{border-color:rgba(217,45,32,.4);background:#fef3f2;color:#b42318}
form[data-busy] .knopf{opacity:.6;pointer-events:none}

/* ══ Fuß ════════════════════════════════════════════════════ */
.fuss{border-top:1px solid var(--linie);padding:2.6rem 0 3rem;font-size:.9rem;color:var(--text-schwach)}
.fuss .bahn{display:flex;flex-wrap:wrap;gap:1.2rem 1.6rem;align-items:center;justify-content:space-between}
.fuss a{text-decoration:none;transition:color .25s}
.fuss a:hover{color:var(--text)}
.fuss nav{display:flex;gap:1.5rem;flex-wrap:wrap;align-items:center}
.fuss-knopf{font:inherit;font-size:.9rem;color:inherit;background:none;border:0;padding:0;
  cursor:pointer;text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--linie-stark);transition:color .25s}
.fuss-knopf:hover{color:var(--text)}

/* ══ Bewegung ═══════════════════════════════════════════════
   Kurze Distanz, lange Dauer, leichtes Aufrichten aus der Fläche.
   Das ist die ganze 3D-Anmutung — ruhig, nicht verspielt. */
/* Apple bewegt wenig, aber lange und weich: kurze Distanz, leichtes Heranwachsen,
   Unschärfe die aufklart. Keine Rotation, kein Überschwingen. */
@keyframes auftauchen{
  from{opacity:0;transform:translate3d(0,34px,0) scale(.972);filter:blur(9px)}
  60% {opacity:1}
  to  {opacity:1;transform:translate3d(0,0,0) scale(1);filter:blur(0)}
}

/* Keine 'animation'-Kurzschrift: sie würde 'animation-range' zurücksetzen. */
@supports (animation-timeline:view()){
  html:not(.kein-sdt) .auf{
    animation-name:auftauchen;animation-fill-mode:both;
    animation-timing-function:cubic-bezier(.16,1,.3,1);
    animation-timeline:view();animation-range:entry 2% entry 58%}
  /* Der Hero läuft beim Laden an, nicht beim Scrollen — er steht über dem Fold. */
  html:not(.kein-sdt) .hero .auf{animation-timeline:auto;animation-duration:1.5s;
    animation-delay:.25s;animation-range:normal}
  html:not(.kein-sdt) .karten > .auf:nth-child(2){animation-delay:0s}
}
html.kein-sdt .auf{opacity:0;transform:translate3d(0,30px,0) scale(.976);filter:blur(8px);
  transition:opacity 1.2s cubic-bezier(.16,1,.3,1),transform 1.2s cubic-bezier(.16,1,.3,1),
             filter 1.2s cubic-bezier(.16,1,.3,1)}
html.kein-sdt .auf.sichtbar{opacity:1;transform:none;filter:blur(0)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .auf{animation:none!important;opacity:1!important;transform:none!important;
    filter:none!important;transition:none!important}
  .hero .marke-band,.hero h1 span,.hero .lead,.hero .tat,.hero .beleg,
  .schau img{animation:none!important;opacity:1!important;transform:none!important;filter:none!important}
  .raster,.schein{transform:none!important}
  *,*::before,*::after{transition-duration:.01ms!important}
}

/* ═══════════════════════════════════════════════════════════════
   Kundenorientierte Bausteine
   Reihenfolge nach Kaufentscheidung: Problem → für wen → Ergebnis →
   Ablauf → Preis → Vertrauen → Einwände → Kontakt.
   ═══════════════════════════════════════════════════════════════ */

/* ── Problem: der Besucher muss sich in Sekunden wiedererkennen ── */
.problem{background:linear-gradient(180deg,#eef1f7,transparent)}
.schmerz{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2.6rem}
.schmerz li{list-style:none;padding:1.4rem 1.35rem;border-radius:var(--radius);
  border:1px solid var(--linie);box-shadow:var(--schatten-s);background:var(--flaeche)}
.schmerz b{display:block;font-family:var(--font-d);font-size:1.08rem;margin-bottom:.5rem;
  color:var(--text)}
.schmerz p{color:var(--text-dim);font-size:.95rem}
.schmerz .zeichen{display:block;font-family:var(--font-d);font-size:.82rem;font-weight:600;
  letter-spacing:.14em;line-height:1;margin-bottom:1rem;
  background:var(--marke);-webkit-background-clip:text;background-clip:text;color:transparent}
@media(max-width:820px){.schmerz{grid-template-columns:1fr}}
.wende{margin-top:2.4rem;padding:1.5rem 1.7rem;border-radius:var(--radius);
  border:1px solid rgba(0,134,214,.28);background:#f0f7ff;
  font-size:1.06rem;color:#1d2939}
.wende b{color:#101828}

/* ── Für wen ── */
.wen{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:2rem}
.wen li{list-style:none;padding:.55rem 1.05rem;border-radius:999px;
  border:1px solid var(--linie-stark);background:var(--flaeche);
  font-size:.94rem;color:var(--text-dim)}
.wen li.aus{opacity:.45;text-decoration:line-through}

/* ── Pakete ── */
.pakete{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;align-items:stretch}
@media(max-width:1080px){.pakete{grid-template-columns:repeat(2,1fr);gap:1.1rem}}
@media(max-width:600px){.pakete{grid-template-columns:1fr}}
.paket{position:relative;padding:1.6rem 1.5rem 1.7rem;border-radius:var(--radius);
  border:1px solid var(--linie);box-shadow:var(--schatten-m),var(--kante);
  background:var(--flaeche);display:flex;flex-direction:column}
.paket.hell{border-color:rgba(47,86,217,.35);
  background:linear-gradient(180deg,#f5f8ff,#ffffff);
  box-shadow:var(--schatten-l),0 0 0 1px rgba(47,86,217,.08)}
.paket .empf{position:absolute;top:-11px;left:1.7rem;padding:.2rem .7rem;border-radius:999px;
  font-size:.72rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  background:var(--marke);color:#fff}
.paket h3{font-size:1.22rem}
.paket .fuer{font-size:.88rem;color:var(--text-schwach);margin-top:.3rem}
/* Preis: große Zahl in der Display-Schrift, „ab" und „€" bewusst kleiner,
   damit der Betrag trägt und trotzdem als Ab-Preis lesbar bleibt.
   Inline (kein Flex): sonst blockt der Text auseinander und liest sich „ab890". */
.paket .preis{margin-top:1rem;font-family:var(--font-d);font-weight:700;
  font-size:2.1rem;letter-spacing:-.02em;color:var(--text);line-height:1.05}
.paket .preis .ab{font-family:var(--font-b);font-size:.82rem;font-weight:500;color:var(--text-schwach)}
.paket .preis .waehrung{font-size:1.25rem;font-weight:600}
.paket.hell .preis{color:var(--blau)}
.paket .einmal{font-size:.78rem;color:var(--text-schwach);margin-top:.15rem}
.paket ul{margin:1.4rem 0 1.6rem;padding:0;list-style:none;display:grid;gap:.55rem;
  font-size:.94rem;color:var(--text-dim)}
.paket li{position:relative;padding-left:1.6rem}
.paket li::before{content:"";position:absolute;left:0;top:.3rem;width:15px;height:15px;
  border-radius:50%;background:rgba(61,220,151,.14);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233ddc97' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
  background-size:10px;background-position:center;background-repeat:no-repeat}
.paket .knopf{margin-top:auto;white-space:normal;text-align:center}
.paket-hinweis{margin-top:1.6rem;font-size:.9rem;color:var(--text-schwach);text-align:center}

/* ── Vertrauen / über mich ── */
.ueber{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.6rem,3vw,3rem);
  align-items:start}
@media(max-width:760px){.ueber{grid-template-columns:1fr}}
/* height:auto ist nötig, damit aspect-ratio greift — das height-Attribut am
   <img> (für CLS) zählt sonst als gesetzte Höhe und schlägt aspect-ratio. */
.portrait{width:clamp(132px,17vw,200px);height:auto;aspect-ratio:4 / 5;border-radius:20px;
  border:1px solid var(--linie-stark);box-shadow:var(--schatten-m);
  object-fit:cover;object-position:50% 22%;background:#e3e8f0;display:block}
@media(max-width:760px){.portrait{width:clamp(150px,42vw,210px)}}
.ueber h2{font-size:var(--t-h2)}
.ueber .lead{color:var(--text-dim);font-size:var(--t-lead);margin-top:1.1rem;max-width:52ch}
.garantie{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
@media(max-width:760px){.garantie{grid-template-columns:1fr}}
.garantie div{padding:1.1rem 1.2rem;border-radius:12px;border:1px solid var(--linie);
  background:var(--flaeche)}
.garantie b{display:block;font-size:.97rem;margin-bottom:.25rem}
.garantie span{font-size:.88rem;color:var(--text-dim)}

/* ── Zwischen-CTA ── */
.zwischen{text-align:center;padding-block:clamp(2.4rem,1.8rem + 2vw,3.6rem)}
.zwischen h2{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);max-width:22ch;margin-inline:auto}
.zwischen p{color:var(--text-dim);margin:.9rem auto 1.8rem;max-width:46ch}

/* ══ Einwilligungs-Banner ═══════════════════════════════════
   Ohne Einwilligung dürfen Werbe-Tags in Deutschland nicht laden (§25 TDDDG).
   Ablehnen muss genauso leicht erreichbar sein wie Zustimmen — gleichwertige
   Knöpfe, kein vorausgewähltes Häkchen, kein Dark Pattern. */
.consent{position:fixed;left:50%;bottom:16px;translate:-50% 0;z-index:80;
  width:min(560px,calc(100vw - 24px));padding:1.15rem 1.3rem;border-radius:16px;
  border:1px solid var(--linie-stark);box-shadow:var(--schatten-l),var(--kante);
  background:#fff;
  transform:translateY(140%);opacity:0;visibility:hidden;
  transition:transform .6s var(--ease),opacity .5s var(--ease),visibility .5s}
.consent[data-offen]{transform:translateY(0);opacity:1;visibility:visible}
/* Solange das Banner offen ist, bekommt die Seite unten Platz. Ohne das liegt es
   auf schmalen Geräten über dem Absenden-Knopf des Formulars — gemessen bei 390×844. */
body[data-banner]{padding-bottom:clamp(190px,26vh,240px)}
@media(min-width:900px){body[data-banner]{padding-bottom:0}}
.consent p{font-size:.92rem;color:var(--text-dim);line-height:1.6}
.consent b{color:var(--text)}
.consent a{color:#2f56d9}
.consent .wahl{display:flex;gap:.6rem;margin-top:1rem;flex-wrap:wrap}
.consent .wahl button{flex:1 1 auto;min-height:44px;padding:0 1.1rem;border-radius:9px;
  font-size:.92rem;font-weight:600;cursor:pointer;border:1px solid transparent;
  transition:transform .25s var(--ease),background-color .25s}
.consent .ja{background:var(--marke);color:#fff}
.consent .nein{border-color:var(--linie-stark);color:var(--text);background:var(--flaeche)}
.consent .ja:hover,.consent .nein:hover{transform:translateY(-1px)}
.consent .nein:hover{background:#eef1f7}

/* ══ Referenzen ═════════════════════════════════════════════
   Der stärkste Vertrauensbeweis bei Dienstleistern. Kein Portfolio-Raster:
   jedes Projekt bekommt Ausgangslage, Maßnahme und Ergebnis. */
/* ── Karussell: eine Spur, die horizontal schnappt ──────────────
   Nativer Scroll-Snap trägt Wischen, Trackpad und Tastatur ohne Bibliothek.
   Jede Folie ist knapp schmaler als die Spur, damit die nächste hervorlugt —
   das ist der „gewisse Abstand", der zeigt: hier gibt es mehr. */
.arbeiten{position:relative}
.spur{display:flex;gap:clamp(1rem,2vw,1.5rem);
  overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  /* Vertikaler Innenabstand: fängt Hover-Anhebung und Schatten auf, damit die
     durch overflow-x erzwungene vertikale Klemmung nichts abschneidet. */
  padding:6px 2px 14px;margin-inline:-2px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spur::-webkit-scrollbar{display:none}
.spur:focus-visible{outline:2px solid var(--blau);outline-offset:4px;border-radius:var(--radius)}
.arbeit{flex:0 0 calc(100% - 3rem);scroll-snap-align:start;
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.3rem,2.6vw,2.4rem);
  align-items:center;padding:clamp(1.2rem,.9rem + 1vw,1.7rem);
  border:1px solid var(--linie);border-radius:var(--radius);
  box-shadow:var(--schatten-m);background:var(--flaeche)}
@media(max-width:860px){.arbeit{grid-template-columns:1fr;flex-basis:calc(100% - 2rem)}}
@media(max-width:560px){.arbeit{flex-basis:calc(100% - 1.2rem)}}


/* ── Steuerung: Pfeile links/rechts, Punkte in der Mitte ──────── */
.arbeiten-steuer{display:flex;align-items:center;justify-content:center;gap:1.1rem;margin-top:1.6rem}
.arbeiten-steuer[hidden]{display:none}
.pfeil{width:44px;height:44px;flex:none;display:grid;place-items:center;cursor:pointer;
  border-radius:50%;border:1px solid var(--linie-stark);background:var(--flaeche);
  box-shadow:var(--schatten-s);color:var(--text);
  transition:transform .25s var(--ease),background-color .25s,border-color .25s,opacity .25s}
.pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.pfeil:hover{transform:translateY(-2px);border-color:var(--blau);color:var(--blau)}
.pfeil:disabled{opacity:.35;pointer-events:none}
.punkte{display:flex;align-items:center;gap:.55rem}
.punkt{width:9px;height:9px;padding:0;flex:none;cursor:pointer;border:0;border-radius:50%;
  background:var(--linie-stark);transition:background-color .25s,transform .25s var(--ease)}
.punkt[aria-selected=true]{background:var(--blau);transform:scale(1.35)}
@media(prefers-reduced-motion:reduce){.spur{scroll-behavior:auto}}

/* Vorschaufenster: schlicht gerahmt, damit der Screenshot wirkt und nicht der Rahmen */
.schau{position:relative;aspect-ratio:16 / 10;border-radius:11px;overflow:hidden;
  border:1px solid var(--linie);box-shadow:var(--schatten-m);
  background:#eef1f6;display:grid;place-items:center}
.schau img{width:100%;height:100%;object-fit:cover;object-position:top center;display:block}
/* Kein Scroll-Zoom mehr auf dem Bild: in der horizontalen Spur bezöge sich
   view() auf den falschen Scrollport und bliebe hängen. Ruhig ist hier besser. */

.arbeit .branche{font-size:.74rem;font-weight:600;letter-spacing:.17em;text-transform:uppercase;
  color:#2f56d9}
.arbeit h3{font-size:clamp(1.15rem,.9rem + .8vw,1.5rem);margin:.65rem 0 .8rem}
.arbeit p{color:var(--text-dim);font-size:.96rem}
.ergebnis{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.2rem}
.ergebnis span{padding:.42rem .8rem;border-radius:8px;font-size:.85rem;
  border:1px solid rgba(7,148,85,.3);background:#f0fdf6;color:#05683c}
.arbeit .link{display:inline-flex;align-items:center;gap:.35rem;margin-top:1.1rem;
  font-size:.9rem;font-weight:500;color:#2f56d9;text-decoration:none;
  transition:gap .3s var(--ease)}
.arbeit .link::after{content:"›";font-size:1.15em;line-height:1}
.arbeit .link:hover{gap:.6rem}
/* Hover hebt die ganze Karte leicht an */
.arbeit{transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color .5s var(--ease)}
.arbeit:hover{transform:translateY(-3px);border-color:var(--linie-stark);
  box-shadow:var(--schatten-l),var(--kante)}