/* ==========================================================================
   Haustierschutzhelden, Demo "neu"
   Eigenstaendiges Stylesheet. Schriften: Baloo 2 + Nunito, lokal eingebunden.
   ========================================================================== */

:root {
  --ink: #0A1B3D;
  --ink-2: #13295A;
  /* Blau und Gruen sind so gewaehlt, dass weisse Schrift darauf und die Farbe als Schrift auf
     Weiss, Creme und Himmel mindestens 4,5:1 erreichen (WCAG AA). Nicht wieder aufhellen. */
  --blue: #0562D6;
  --blue-deep: #0447B0;
  --sky: #E9F3FF;
  --peach: #FF9552;
  --peach-deep: #F2752B;      /* nur fuer Schmuck und Symbole */
  --peach-text: #A8430C;      /* orange Schrift auf hellem Grund */
  --gruen-text: #0E7A4A;
  --peach-soft: #FFE7D6;
  --cream: #FFF8F0;
  --white: #fff;
  --text: #27375A;
  --muted: #5A6785;
  --line: rgba(10, 27, 61, .1);
  --wa: #157F42;

  --r-s: 14px;
  --r-m: 24px;
  --r-l: 36px;
  --r-xl: 48px;

  --shadow-s: 0 6px 18px rgba(10, 27, 61, .08);
  --shadow-m: 0 18px 44px rgba(10, 27, 61, .14);
  --shadow-l: 0 40px 90px rgba(10, 27, 61, .22);

  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);

  --display: 'Baloo 2', system-ui, sans-serif;
  --body: 'Nunito', system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
/* Kein overflow-x auf body: Sonst wird body selbst zum Scrollbereich, "sticky" klebt
   nirgends und die Scrollsperre des Handy-Menues greift nicht. html { clip } reicht. */
body {
  margin: 0;
  font-family: var(--body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
/* Schraeges Laufband und Farbwolken ragen bewusst ueber den Rand: hier abschneiden.
   "clip" macht main nicht zum Scrollbereich, "sticky" darin funktioniert weiter. */
main, .foot { overflow-x: clip; }
@supports not (overflow: clip) { body { overflow-x: hidden; } }
/* Tippen: kein Doppeltipp-Zoom auf Bedienelementen, kein Markieren beim langen Druecken */
a, button, summary, label, select, input, textarea { touch-action: manipulation; }
button, .btn, .seg button, .choice label, .dock a, .qa summary, .mehr summary, .switch__btn { -webkit-user-select: none; user-select: none; }
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; }
h1, h2, h3, h4, p, ul, ol, figure, fieldset { margin: 0; padding: 0; }
ul, ol { list-style: none; }
fieldset { border: 0; min-width: 0; }
strong { color: var(--ink); font-weight: 800; }
/* Fokusrahmen: dunkles Orange erreicht auf Weiss und Creme den noetigen Kontrast (3:1), auf Blau und Dunkel Weiss */
:focus-visible { outline: 3px solid var(--peach-text); outline-offset: 3px; border-radius: 8px; }
:is(.section--ink, .foot, .calc__result, .result-card, .tile--blue, .tile--ink, .pricebox--blue, .finale, .stufe--top, .plan--top, .karte--blau, .karte--ink, .dock__wa) :focus-visible, .dock__wa:focus-visible, .wa:focus-visible { outline-color: #fff; }
::selection { background: var(--peach-soft); color: var(--ink); }

.wrap { width: min(1240px, 100% - 40px); margin-inline: auto; }
.skip { position: absolute; left: -999px; top: 8px; z-index: 200; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 10px; }
.skip:focus { left: 8px; }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(3rem, 7.2vw, 6.4rem);
  line-height: .92;
  letter-spacing: -.025em;
  color: var(--ink);
}
.display--sm { font-size: clamp(2.3rem, 5.4vw, 4.6rem); line-height: .98; }
.display .line { display: block; }
.h2 { font-family: var(--display); font-weight: 800; font-size: clamp(2.1rem, 4.6vw, 3.8rem); line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.h3 { font-family: var(--display); font-weight: 800; font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.05; letter-spacing: -.01em; color: var(--ink); }
.h4 { font-family: var(--display); font-weight: 700; font-size: 1.35rem; line-height: 1.15; color: var(--ink); }
.lead { font-size: 1.2rem; color: var(--muted); }
.display, .h2, .h3, .h4, .qa summary { text-wrap: balance; }
p, li { text-wrap: pretty; }
.fine { font-size: .875rem; color: var(--muted); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-weight: 800; font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: var(--blue);
  margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 28px; height: 3px; border-radius: 3px; background: var(--peach); }
.eyebrow--peach { color: var(--peach); }
.head { max-width: 760px; margin-bottom: clamp(32px, 5vw, 56px); }
.head--center { margin-inline: auto; text-align: center; }
.head--center .lead { margin-top: 14px; }

.mark { position: relative; display: inline-block; color: var(--blue); }
.mark svg { position: absolute; left: -2%; bottom: -.08em; width: 104%; height: .22em; color: var(--peach); overflow: visible; }
.mark svg path { stroke-dasharray: 320; stroke-dashoffset: 320; animation: zeichnen 1s .9s var(--ease) forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }

/* ---------- Knoepfe ---------- */
.btn {
  --bg: var(--ink); --fg: #fff;
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 14px 24px; border-radius: 999px;
  font-family: var(--display); font-weight: 700; font-size: 1.05rem; line-height: 1;
  background: var(--bg); color: var(--fg);
  transition: transform .35s var(--spring), translate .2s cubic-bezier(.23, 1, .32, 1), box-shadow .35s var(--ease), background .25s;
}
.btn svg { width: 20px; height: 20px; flex: none; transition: transform .35s var(--spring); }
@media (hover: hover) and (pointer: fine) { .btn:hover { transform: translateY(-3px); } }
@media (hover: hover) and (pointer: fine) { .btn:hover svg:last-child { transform: translateX(4px); } }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .12s; }
.btn--peach { --bg: var(--peach); --fg: var(--ink); box-shadow: 0 10px 26px rgba(255, 149, 82, .45); }
@media (hover: hover) and (pointer: fine) { .btn--peach:hover { --bg: #FFA56B; box-shadow: 0 16px 36px rgba(255, 149, 82, .55); } }
@media (hover: hover) and (pointer: fine) { .btn--ink:hover { --bg: var(--ink-2); box-shadow: var(--shadow-m); } }
.btn--wa { --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line), var(--shadow-s); }
.btn--wa svg { color: var(--wa); width: 24px; height: 24px; }
.btn--hell { --bg: #fff; --fg: var(--ink); box-shadow: inset 0 0 0 2px var(--line), var(--shadow-s); }
.btn--glass { --bg: rgba(255, 255, 255, .12); --fg: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
@media (hover: hover) and (pointer: fine) { .btn--glass:hover { --bg: rgba(255, 255, 255, .22); } }
.btn--lg { padding: 19px 32px; font-size: 1.18rem; }
.btn--sm { padding: 11px 18px; font-size: .96rem; }
.btn--block { width: 100%; }
/* Waehrend das Formular sendet: sichtbar ausgegraut, kein Anheben, kein Lichtreflex */
.btn:disabled { cursor: progress; transform: none; box-shadow: none; filter: saturate(.5); opacity: .75; }
.btn:disabled::after { display: none; }
.link { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; color: var(--blue); }
.link svg { width: 18px; height: 18px; transition: transform .3s var(--spring); }
@media (hover: hover) and (pointer: fine) { .link:hover svg { transform: translateX(5px); } }

.pill svg { width: 18px; height: 18px; flex: none; color: var(--peach-deep); }
.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 12px; border-radius: 999px;
  background: #fff; box-shadow: var(--shadow-s);
  font-weight: 800; font-size: .9rem; color: var(--ink);
}
.dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--wa); }
.dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--wa); animation: puls 2s infinite; }
@keyframes puls { to { transform: scale(3); opacity: 0; } }

/* ---------- Einblenden beim Scrollen ---------- */
.js [data-in] { opacity: 0; transform: translateY(26px); transition: opacity .55s var(--ease), transform .6s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-in].is-in { opacity: 1; transform: none; }
.js [data-parallax] { transition: opacity .55s var(--ease), transform .6s var(--ease), translate .6s var(--ease); transition-delay: var(--d, 0ms), var(--d, 0ms), 0ms; }
@media (hover: hover) and (pointer: fine) { .js .tile[data-tilt]:hover { transition: transform .2s cubic-bezier(.23, 1, .32, 1), box-shadow .3s var(--ease); transition-delay: 0ms; } }

/* ---------- Scrollbalken ---------- */
.scrollbar { position: fixed; inset: 0 0 auto 0; height: 4px; z-index: 120; pointer-events: none; }
.scrollbar span { display: block; height: 100%; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--blue), var(--peach)); }

/* ==========================================================================
   NAVIGATION
   ========================================================================== */
.nav { position: fixed; top: 14px; left: 0; right: 0; z-index: 100; transition: transform .3s cubic-bezier(.23, 1, .32, 1); }
.nav.is-hidden { transform: translateY(-130%); }
.nav__inner {
  width: min(1240px, 100% - 28px); margin-inline: auto;
  display: flex; align-items: center; gap: 20px;
  padding: 9px 10px 9px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 8px 30px rgba(10, 27, 61, .1), inset 0 0 0 1px rgba(255, 255, 255, .7);
}
.brand { display: flex; align-items: center; gap: 10px; flex: none; }
.brand__mark { width: 44px; height: auto; transition: transform .6s var(--spring); }
@media (hover: hover) and (pointer: fine) { .brand:hover .brand__mark { transform: rotate(-10deg) scale(1.08); } }
.brand__name { font-family: var(--display); font-weight: 800; font-size: 1.28rem; letter-spacing: -.01em; color: var(--blue); }
.brand__name em { font-style: normal; color: var(--peach-deep); }
.brand--light .brand__name { color: #fff; }
.brand--light .brand__name em { color: var(--peach); }

.nav__links { display: flex; gap: 4px; margin-inline: auto; }
.nav__links a:not(.btn) { padding: 9px 15px; border-radius: 999px; font-weight: 800; font-size: .97rem; color: var(--ink); transition: background .25s, color .25s; }
.nav__links a.is-active { background: var(--sky); color: var(--blue); }
@media (hover: hover) and (pointer: fine) { .nav__links a:not(.btn):hover { background: var(--sky); color: var(--blue); } }
.nav__links-cta { display: none; }
.nav__side { display: flex; align-items: center; gap: 14px; flex: none; }
.nav__tel { display: inline-flex; align-items: center; gap: 8px; font-weight: 800; font-size: .95rem; color: var(--ink); }
.nav__tel svg { width: 18px; height: 18px; color: var(--blue); }
.burger { display: none; width: 46px; height: 46px; border-radius: 50%; background: var(--ink); position: relative; }
/* Nur transform: "top" zu animieren liesse den Browser bei jedem Bild neu vermessen */
.burger span { position: absolute; left: 14px; right: 14px; top: 22px; height: 2.5px; border-radius: 2px; background: #fff; transition: transform .25s cubic-bezier(.23, 1, .32, 1); }
.burger span:nth-child(1) { transform: translateY(-4px); }
.burger span:nth-child(2) { transform: translateY(4px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { transform: rotate(-45deg); }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero { position: relative; padding: clamp(120px, 15vh, 170px) 0 clamp(60px, 8vw, 110px); overflow: hidden; isolation: isolate; }
.hero__blob { position: absolute; z-index: -1; border-radius: 50%; }
.hero__blob--a { width: 620px; height: 620px; right: -140px; top: -120px; background: radial-gradient(circle, #BFDCFF 0%, rgba(191, 220, 255, 0) 70%); animation: schweben 14s ease-in-out infinite alternate; }
.hero__blob--b { width: 520px; height: 520px; left: -200px; bottom: -220px; background: radial-gradient(circle, #FFD9BF 0%, rgba(255, 217, 191, 0) 70%); animation: schweben 18s ease-in-out infinite alternate-reverse; }
@keyframes schweben { to { transform: translate(60px, 40px) scale(1.12); } }
.hero__trail { position: absolute; z-index: -1; left: 30%; bottom: 3%; width: min(520px, 46vw); aspect-ratio: 3 / 1; color: var(--blue); pointer-events: none; }
.hero__trail svg { position: absolute; left: var(--x); top: var(--y); width: 5%; aspect-ratio: 1; height: auto; rotate: var(--r); opacity: 0; animation: tapsen 5s infinite both; animation-delay: var(--v); }
@keyframes tapsen { 0% { opacity: 0; } 8%, 70% { opacity: .1; } 90%, 100% { opacity: 0; } }

.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.hero__copy > * + * { margin-top: 26px; }
.hero__lead { font-size: clamp(1.15rem, 1.6vw, 1.4rem); max-width: 30em; color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__ticks { display: flex; flex-wrap: wrap; gap: 10px 24px; font-weight: 800; font-size: .96rem; color: var(--ink); }
.hero__ticks li { display: flex; align-items: center; gap: 8px; }
.hero__ticks svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--blue); color: #fff; }

.hero__stage { position: relative; justify-self: center; width: min(100%, 470px); aspect-ratio: 47 / 60; }
.hero__arch {
  position: absolute; inset: 0 7% 0 7%;
  border-radius: 999px 999px var(--r-xl) var(--r-xl);
  overflow: hidden; background: var(--ink);
  box-shadow: var(--shadow-l), 0 0 0 10px #fff;
}
.hero__video { width: 100%; height: 100%; object-fit: cover; }
.hero__bubble { position: absolute; width: 31%; aspect-ratio: 1; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-m), 0 0 0 6px #fff; }
.hero__bubble img { width: 100%; height: 100%; object-fit: cover; }
.hero__bubble--katze { left: -6%; top: 12%; }
.hero__bubble--pferd { right: -7%; bottom: 25%; width: 27%; }
.hero__price {
  position: absolute; left: -9%; bottom: 8%;
  display: grid; gap: 2px; padding: 16px 20px; max-width: 235px;
  border-radius: var(--r-m); background: #fff; box-shadow: var(--shadow-m);
}
.hero__price-label { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--blue); }
.hero__price-row { display: flex; align-items: baseline; gap: 6px; font-family: var(--display); color: var(--ink); line-height: 1; }
.hero__price-row strong { font-size: 2.5rem; font-weight: 800; }
.hero__price-row small { font-size: 1.1rem; font-weight: 700; }
.hero__price-note { font-size: .8rem; line-height: 1.35; color: var(--muted); }
.hero__chip {
  position: absolute; right: -8%; top: 7%;
  display: flex; align-items: center; gap: 12px; padding: 10px 18px 10px 10px;
  border-radius: 999px; background: var(--ink); color: #C8D6F2; font-size: .78rem; line-height: 1.25; box-shadow: var(--shadow-m);
}
.hero__chip strong { display: block; color: #fff; font-size: .92rem; }
.hero__chip-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--ink); }
.hero__chip-icon svg { width: 20px; height: 20px; animation: herz 1.6s infinite; }
@keyframes herz { 0%, 40%, 100% { transform: scale(1); } 20% { transform: scale(1.22); } }

.stamp { position: absolute; right: -2%; bottom: -5%; width: 124px; height: 124px; border-radius: 50%; background: var(--peach); color: var(--ink); box-shadow: var(--shadow-m); display: grid; place-items: center; }
/* Gedreht wird der Rahmen, nicht die Grafik: Eine sich drehende Grafik mit Text auf
   einem Kreis laesst den Browser den Text bei jedem Bild neu vermessen. */
.stamp__ring { position: absolute; inset: 0; animation: drehen 18s linear infinite; will-change: transform; }
.stamp__ring svg { width: 100%; height: 100%; }
.stamp text { font-family: var(--display); font-weight: 800; font-size: 17.5px; fill: currentColor; }
.stamp__paw { width: 38px; height: 38px; }
@keyframes drehen { to { transform: rotate(360deg); } }

/* ==========================================================================
   LAUFBAND
   ========================================================================== */
.tape { background: var(--ink); color: #fff; padding: 18px 0; overflow: hidden; transform: rotate(-1.4deg) scale(1.03); margin-block: -10px 10px; position: relative; z-index: 2; }
.tape__track { display: flex; width: max-content; animation: laufen 38s linear infinite; }
.tape__track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem, 2vw, 1.5rem); white-space: nowrap; }
.tape__track svg { width: 22px; height: 22px; color: var(--peach); }
@keyframes laufen { to { transform: translateX(-50%); } }

/* ==========================================================================
   SEKTIONEN
   ========================================================================== */
.section { position: relative; padding: clamp(72px, 10vw, 140px) 0; background: #fff; }
.section--cream { background: var(--cream); }
.section--sky { background: var(--sky); }
.section--ink { background: var(--ink); color: #B9C8E8; overflow: hidden; }
.section--ink .h2 { color: #fff; }

/* ---------- Tierauswahl ---------- */
.switch {
  position: relative; display: inline-grid; grid-template-columns: repeat(3, 1fr);
  padding: 6px; border-radius: 999px; background: var(--sky); margin-bottom: 36px;
}
.switch__btn { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 13px clamp(18px, 3vw, 34px); border-radius: 999px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); transition: color .3s; }
.switch__btn svg { width: 24px; height: 24px; --icon-eye: var(--sky); }
.switch__btn[aria-selected="true"] { color: #fff; }
.switch__btn[aria-selected="true"] svg { --icon-eye: var(--blue); }
.switch__thumb { position: absolute; top: 6px; bottom: 6px; left: 6px; width: calc((100% - 12px) / 3); border-radius: 999px; background: var(--blue); box-shadow: 0 8px 20px rgba(10, 120, 255, .4); transition: transform .35s var(--spring); }
body[data-art="katze"] .switch__thumb { transform: translateX(100%); }
body[data-art="pferd"] .switch__thumb { transform: translateX(200%); }

.tier { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.tier__media { position: relative; aspect-ratio: 5 / 4; border-radius: var(--r-xl) var(--r-xl) var(--r-xl) 160px; overflow: hidden; background: var(--sky); box-shadow: var(--shadow-m); transition: transform .4s cubic-bezier(.23, 1, .32, 1); }
.tier__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.12); transition: opacity .45s ease, transform .9s cubic-bezier(.23, 1, .32, 1); }
.tier__img.is-on { opacity: 1; transform: scale(1); }
.tier__fact { position: absolute; right: 18px; bottom: 18px; max-width: min(340px, 78%); display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px; border-radius: var(--r-m); background: rgba(255, 255, 255, .95); font-weight: 700; font-size: .9rem; line-height: 1.35; color: var(--ink); box-shadow: var(--shadow-s); }
.tier__fact svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--peach-deep); }
.tier__body > * + * { margin-top: 20px; }
/* Tierwechsel: kurz und ohne Ausblenden auf null, sonst flackert der Text bei schnellem Klicken */
.tier__body.is-swap > * { animation: hoch-kurz .32s cubic-bezier(.23, 1, .32, 1) both; }
.tier__body.is-swap > *:nth-child(2) { animation-delay: .04s; } .tier__body.is-swap > *:nth-child(3) { animation-delay: .08s; }
.tier__body.is-swap > *:nth-child(4) { animation-delay: .12s; } .tier__body.is-swap > *:nth-child(n+5) { animation-delay: .16s; }
@keyframes hoch-kurz { from { opacity: .4; transform: translateY(8px); } }
@keyframes hoch { from { opacity: 0; transform: translateY(18px); } }
.tier__text { font-size: 1.15rem; }
.tier__list { display: grid; gap: 10px; font-weight: 800; color: var(--ink); }
.tier__list li { display: flex; gap: 12px; align-items: center; }
.tier__list svg { width: 24px; height: 24px; flex: none; padding: 5px; border-radius: 50%; background: var(--peach-soft); color: var(--peach-deep); }
.tier__prices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tier__prices + .fine { margin-top: 8px; }
.pricebox { display: grid; gap: 2px; padding: 16px; border-radius: var(--r-m); background: var(--peach-soft); color: var(--ink); transition: transform .4s var(--spring); }
@media (hover: hover) and (pointer: fine) { .pricebox:hover { transform: translateY(-5px) rotate(-1deg); } }
.pricebox--blue { background: var(--blue); color: #fff; }
.pricebox--ghost { background: #fff; box-shadow: inset 0 0 0 2px var(--line); }
.pricebox--ghost[hidden] { display: none; }
.pricebox__label { font-weight: 800; font-size: .8125rem; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.pricebox__value { font-family: var(--display); font-weight: 800; font-size: 1.7rem; line-height: 1.1; white-space: nowrap; }
.pricebox__value small { font-size: .9rem; font-weight: 700; }
.pricebox__per { font-size: .8125rem; opacity: .8; }
.pricebox--blue :is(.pricebox__label, .pricebox__per) { opacity: 1; color: #DCEBFF; }

/* ---------- Kosten ---------- */
.kosten { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.kosten__glow { position: absolute; width: 900px; height: 900px; left: -300px; top: -300px; border-radius: 50%; background: radial-gradient(circle, rgba(10, 120, 255, .45), rgba(10, 120, 255, 0) 65%); pointer-events: none; }
.kosten__big { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; font-family: var(--display); font-weight: 800; color: var(--peach); line-height: .95; letter-spacing: -.03em; font-size: clamp(4.6rem, 12vw, 10rem); font-variant-numeric: tabular-nums; }
.kosten__big small { font-size: .32em; letter-spacing: 0; color: #fff; }
#kosten-zahl { display: inline-block; min-width: 2.45em; }
.kosten__sub { margin-top: 10px; font-size: 1.15rem; max-width: 26em; }
.kosten__vs { display: inline-grid; gap: 2px; margin-top: 34px; padding: 18px 26px; border-radius: var(--r-m); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .16); }
.kosten__vs-label { font-weight: 800; font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: #8FB9FF; }
.kosten__vs-value { font-family: var(--display); font-weight: 700; font-size: 1.5rem; color: #fff; }
.kosten__vs-value b { font-size: 2.2rem; font-weight: 800; color: #7CE3A4; }

.bill { position: relative; padding: 28px clamp(20px, 3vw, 34px) 30px; border-radius: var(--r-l); background: #fff; color: var(--text); box-shadow: var(--shadow-l); transform: rotate(1.6deg); transition: transform .6s var(--spring); }
@media (hover: hover) and (pointer: fine) { .bill:hover { transform: rotate(0deg) translateY(-4px); } }
.bill::after { content: ""; position: absolute; left: 0; right: 0; bottom: -11px; height: 12px; background: radial-gradient(circle at 12px 0, #fff 11px, transparent 12px) 0 0 / 24px 12px repeat-x; }
.bill__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 2px dashed var(--line); }
.bill__title { display: flex; align-items: center; gap: 10px; font-family: var(--display); font-weight: 800; font-size: 1.3rem; color: var(--ink); }
.bill__title svg { width: 24px; height: 24px; color: var(--blue); }
.bill__tag { padding: 5px 14px; border-radius: 999px; background: var(--sky); color: var(--blue); font-weight: 800; font-size: .85rem; }
.bill__row { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 18px 0 20px; font-weight: 700; color: var(--ink); }
.bill__row b { font-family: var(--display); font-weight: 800; font-size: 1.3rem; white-space: nowrap; }
.bill__row i { position: absolute; left: 0; bottom: 6px; height: 7px; width: 100%; border-radius: 7px; background: var(--sky); overflow: hidden; }
.bill__row i::after { content: ""; position: absolute; inset: 0; width: var(--w); border-radius: 7px; background: linear-gradient(90deg, var(--peach), var(--peach-deep)); transform-origin: 0 50%; animation: balken 1.1s var(--ease) both; }
.bill__row:nth-child(2) i::after { animation-delay: .12s; } .bill__row:nth-child(3) i::after { animation-delay: .24s; }
@keyframes balken { from { transform: scaleX(0); } }
.bill__foot { margin-top: 12px; font-size: .84rem; color: var(--muted); }
.miniswitch { display: flex; justify-content: center; gap: 8px; margin-top: 34px; }
.miniswitch button { padding: 9px 20px; border-radius: 999px; font-weight: 800; color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25); transition: background .25s, color .25s; }
.miniswitch button[aria-pressed="true"] { background: #fff; color: var(--ink); }

/* ---------- Rechner ---------- */
.calc { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-m); overflow: hidden; }
.calc__form { display: grid; gap: 28px; padding: clamp(24px, 4vw, 48px); }
.calc__field legend, .calc__label { display: flex; justify-content: space-between; align-items: baseline; width: 100%; margin-bottom: 12px; font-family: var(--display); font-weight: 700; font-size: 1.15rem; color: var(--ink); }
.calc__label output { padding: 3px 14px; border-radius: 999px; background: var(--sky); color: var(--blue); font-size: 1rem; }
.seg { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); grid-auto-flow: column; gap: 10px; }
.seg--4 { grid-auto-flow: row; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.seg button { display: grid; justify-items: center; align-content: center; gap: 3px; min-width: 0; min-height: 48px; overflow-wrap: break-word; hyphens: manual; padding: 14px 8px; border-radius: var(--r-s); background: var(--cream); box-shadow: inset 0 0 0 2px transparent; font-weight: 800; color: var(--ink); line-height: 1.15; transition: background .25s, box-shadow .25s, transform .3s var(--spring), color .25s; }
.seg button svg { width: 30px; height: 30px; color: var(--blue); --icon-eye: var(--cream); transition: color .25s; }
.seg button small { font-weight: 700; font-size: .8125rem; color: var(--muted); transition: color .25s; }
@media (hover: hover) and (pointer: fine) { .seg button:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--blue); } }
.seg button[aria-pressed="true"] { background: var(--blue); color: #fff; box-shadow: 0 10px 22px rgba(10, 120, 255, .35); }
.seg button[aria-pressed="true"] svg { color: #fff; --icon-eye: var(--blue); }
.seg button[aria-pressed="true"] small { color: #fff; }

/* Der Regler selbst ist 44px hoch (gut mit dem Daumen zu treffen), die sichtbare Spur bleibt 12px */
.range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 44px; margin: 0; background: transparent; outline-offset: 2px; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, var(--blue) var(--p, 10%), var(--sky) var(--p, 10%)); }
.range::-moz-range-track { height: 12px; border-radius: 12px; background: linear-gradient(90deg, var(--blue) var(--p, 10%), var(--sky) var(--p, 10%)); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 34px; height: 34px; margin-top: -11px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: var(--shadow-s); cursor: grab; transition: transform .15s cubic-bezier(.23, 1, .32, 1); }
.range::-webkit-slider-thumb:active { transform: scale(1.15); cursor: grabbing; }
.range::-moz-range-thumb { width: 26px; height: 26px; border-radius: 50%; background: #fff; border: 4px solid var(--blue); box-shadow: var(--shadow-s); cursor: grab; }

.calc__result { position: relative; display: flex; flex-direction: column; gap: 12px; padding: clamp(24px, 4vw, 44px); background: linear-gradient(160deg, var(--ink) 0%, #0D3A8C 100%); color: #C5D4F2; overflow: hidden; isolation: isolate; }
.calc__paw { position: absolute; z-index: -1; right: -50px; top: -40px; width: 240px; height: 240px; color: rgba(255, 255, 255, .06); transform: rotate(24deg); }
.calc__result-label { font-weight: 800; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: #8FB9FF; }
.calc__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-family: var(--display); font-weight: 800; color: #fff; line-height: 1; font-size: clamp(3.4rem, 6vw, 4.8rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.calc__price small { font-size: 1.1rem; font-weight: 700; letter-spacing: 0; color: #C5D4F2; }
.calc__price .calc__ab { align-self: baseline; margin-right: -4px; color: #fff; }
#calc-preis { display: inline-block; }
.calc__price.is-tick #calc-preis { animation: tick .45s var(--spring); }
@keyframes tick { 0% { transform: translateY(10px) scale(.94); opacity: .4; } }
.calc__note { font-size: .85rem; }
.calc__list { display: grid; gap: 10px; margin: 10px 0 auto; padding-bottom: 18px; font-weight: 700; font-size: .96rem; color: #fff; }
.calc__list li { display: flex; gap: 10px; align-items: flex-start; }
.calc__list svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: #7CE3A4; }
.calc__result .btn--glass svg { color: #7CE3A4; width: 22px; height: 22px; }

.upgrade { display: grid; grid-template-columns: auto 1fr auto; gap: 22px; align-items: center; margin-top: 28px; padding: 24px clamp(20px, 3vw, 34px); border-radius: var(--r-l); background: var(--peach-soft); }
.upgrade__icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 50%; background: var(--peach); color: var(--ink); }
.upgrade__icon svg { width: 28px; height: 28px; animation: hopsen 2.2s var(--ease) infinite; }
@keyframes hopsen { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }
.upgrade p { margin-top: 4px; }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(210px, auto); gap: 18px; }
.tile { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 28px; border-radius: var(--r-l); overflow: hidden; transform-style: preserve-3d; transition: transform .5s var(--ease), box-shadow .25s ease, opacity .9s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tile:hover { box-shadow: var(--shadow-m); } }
.tile--wide { grid-column: span 2; }
.tile--tall { grid-row: span 2; }
.tile--blue { background: var(--blue); color: #DCEBFF; }
.tile--ink { background: var(--ink); color: #B9C8E8; }
.tile--blue .h3, .tile--ink .h3 { color: #fff; }
.tile--peach { background: var(--peach); color: var(--ink); }
.tile--cream { background: var(--cream); box-shadow: inset 0 0 0 2px var(--line); }
.tile--photo { padding: 0; }
.tile--photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
@media (hover: hover) and (pointer: fine) { .tile--photo:hover img { transform: scale(1.07); } }
.tile__icon { width: 54px; height: 54px; margin-bottom: auto; display: grid; place-items: center; border-radius: 18px; background: rgba(255, 255, 255, .18); color: inherit; }
.tile--cream .tile__icon { background: var(--sky); color: var(--blue); }
.tile--peach .tile__icon { background: rgba(255, 255, 255, .4); }
.tile--ink .tile__icon { color: var(--peach); }
.tile--blue .tile__icon { color: #fff; }
.tile__icon svg { width: 28px; height: 28px; }
.tile__deko { position: absolute; right: -30px; top: -30px; width: 190px; height: 190px; color: rgba(255, 255, 255, .1); transform: rotate(20deg); }

/* ---------- Galerie ---------- */
.helden { padding: clamp(40px, 6vw, 80px) 0 clamp(72px, 10vw, 130px); background: #fff; overflow: hidden; }
.reel { position: relative; }
.reel::before, .reel::after { content: ""; position: absolute; top: 0; bottom: 0; width: 8%; z-index: 2; pointer-events: none; }
.reel::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); }
.reel::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.reel__track { display: flex; align-items: center; gap: 22px; width: max-content; padding-block: 20px; animation: laufen 60s linear infinite; }
.reel:focus-within .reel__track { animation-play-state: paused; }
@media (hover: hover) and (pointer: fine) { .reel:hover .reel__track { animation-play-state: paused; } }
.reel__card { position: relative; flex: none; width: clamp(220px, 24vw, 320px); aspect-ratio: 1; border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow-s); transition: transform .5s var(--spring); }
.reel__card--hoch { aspect-ratio: 4 / 5; border-radius: 999px 999px var(--r-l) var(--r-l); }
@media (hover: hover) and (pointer: fine) { .reel__card:hover { transform: scale(1.04) rotate(-1.2deg); } }
.reel__card img { width: 100%; height: 100%; object-fit: cover; }
.reel__card figcaption { position: absolute; inset: auto 0 0 0; padding: 48px 20px 18px; background: linear-gradient(transparent, rgba(10, 27, 61, .88)); color: #fff; font-weight: 800; font-size: .95rem; line-height: 1.3; transform: translateY(101%); transition: transform .5s var(--ease); }
@media (hover: hover) and (pointer: fine) { .reel__card:hover figcaption { transform: none; } }
/* Ohne Maus gibt es kein Darueberfahren: Bildunterschriften dann immer zeigen */
@media (hover: none) { .reel__card figcaption { transform: none; } }

/* ---------- Ablauf ---------- */
.steps { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; counter-reset: s; }
.steps::before { content: ""; position: absolute; left: 6%; right: 6%; top: 36px; height: 4px; border-radius: 4px; background: repeating-linear-gradient(90deg, var(--blue) 0 10px, transparent 10px 22px); opacity: .35; }
.step { position: relative; padding: 0 8px; text-align: center; }
.step__num { position: relative; z-index: 1; display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 20px; border-radius: 50%; background: #fff; color: var(--blue); font-family: var(--display); font-weight: 800; font-size: 1.9rem; box-shadow: var(--shadow-s), 0 0 0 8px var(--sky); transition: background .4s, color .4s, transform .5s var(--spring); }
@media (hover: hover) and (pointer: fine) { .step:hover .step__num { background: var(--blue); color: #fff; transform: scale(1.1) rotate(-6deg); } }
.step p { margin-top: 8px; color: var(--text); font-size: 1rem; }
.js .step[data-in]:nth-child(2) { --d: 120ms; } .js .step[data-in]:nth-child(3) { --d: 240ms; } .js .step[data-in]:nth-child(4) { --d: 360ms; }

/* ---------- FAQ ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 6vw, 90px); align-items: start; }
.faq__head { position: sticky; top: 120px; margin-bottom: 0; }
.faq__head .link { margin-top: 22px; }
.faq__list { display: grid; gap: 12px; }
.qa { border-radius: var(--r-m); background: var(--cream); transition: background .3s, box-shadow .3s; }
.qa[open] { background: #fff; box-shadow: var(--shadow-m); }
.qa summary { display: flex; justify-content: space-between; align-items: center; gap: 18px; padding: 22px 26px; font-family: var(--display); font-weight: 700; font-size: 1.25rem; color: var(--ink); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa__plus { position: relative; flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--sky); transition: background .25s, transform .3s var(--spring); }
.qa__plus::before, .qa__plus::after { content: ""; position: absolute; left: 11px; right: 11px; top: 17.5px; height: 3px; border-radius: 3px; background: var(--blue); transition: background .25s, transform .3s var(--spring); }
.qa__plus::after { transform: rotate(90deg); }
.qa[open] .qa__plus { background: var(--peach); transform: rotate(180deg); }
.qa[open] .qa__plus::before, .qa[open] .qa__plus::after { background: var(--ink); }
.qa[open] .qa__plus::after { transform: rotate(0deg); }
.qa__body { padding: 0 26px 24px; max-width: 60ch; }
/* Antwort blendet ein, ohne die Hoehe zu animieren (das wuerde die Seite bei jedem Bild neu vermessen) */
.qa[open] .qa__body, .mehr[open] > :not(summary) { animation: auf .28s cubic-bezier(.23, 1, .32, 1); }
@keyframes auf { from { opacity: 0; transform: translateY(8px); } }

/* ---------- Abschluss ---------- */
.finale { position: relative; min-height: min(78vh, 620px); min-height: min(78svh, 620px); display: grid; align-items: center; overflow: hidden; isolation: isolate; color: #fff; text-align: center; border-radius: var(--r-xl) var(--r-xl) 0 0; margin-top: calc(var(--r-xl) * -1); }
.finale__bg { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 40% 70%; transform: scale(var(--z, 1.12)); transform-origin: 40% 70%; will-change: transform; }
.finale__shade { position: absolute; z-index: -1; inset: 0; background: linear-gradient(180deg, rgba(10, 27, 61, .35), rgba(10, 27, 61, .78)); }
.finale__inner { padding-block: 90px; }
.finale .display { color: #fff; max-width: 15ch; margin-inline: auto; text-wrap: balance; }
.finale__cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin-top: 36px; }
.finale__fine { margin-top: 22px; font-weight: 700; font-size: .92rem; color: #C5D4F2; }

/* ---------- Fusszeile ---------- */
.foot { background: var(--ink); color: #9FB0D6; padding: clamp(56px, 7vw, 90px) 0 56px; font-size: .96rem; }
.foot__top { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; }
.foot__brand p { margin-top: 16px; max-width: 34ch; }
.foot h4 { margin: 6px 0 14px; font-family: var(--display); font-weight: 700; font-size: 1.1rem; color: #fff; }
.foot__top a:not(.brand), .foot__top span:not(.brand__name) { display: block; padding: 5px 0; transition: color .2s, transform .3s var(--ease); }
/* Links in der Fusszeile: gross genug fuer den Daumen, ohne dass der Abstand waechst */
.foot__top a:not(.brand) { padding-block: 10px; margin-block: -5px; }
.foot__legal-links a { display: inline-block; padding-block: 10px; margin-block: -10px; }
@media (hover: hover) and (pointer: fine) { .foot__top a:not(.brand):hover { color: #fff; transform: translateX(4px); } }
.foot__tel { font-family: var(--display); font-weight: 800; font-size: 1.5rem; color: #fff; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, .12); }
.foot__legal-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (hover: hover) and (pointer: fine) { .foot__legal a:hover { color: #fff; } }
.foot__hinweis { max-width: 80ch; margin-top: 26px; font-size: .84rem; line-height: 1.55; color: #7F91BA; }
.foot__hinweis strong { color: #B9C8E8; }

/* ---------- WhatsApp und Handy-Leiste ---------- */
/* Der Text faehrt als eigenes Schild links aus dem Knopf, nur mit transform und opacity */
.wa { position: fixed; right: 22px; bottom: 22px; z-index: 90; display: flex; align-items: center; height: 62px; padding: 0 17px; border-radius: 999px; background: var(--wa); color: #fff; font-weight: 800; box-shadow: 0 14px 34px rgba(31, 175, 84, .45); transition: transform .35s var(--spring), scale .12s cubic-bezier(.23, 1, .32, 1); }
.wa svg { width: 28px; height: 28px; flex: none; }
.wa span { position: absolute; right: calc(100% + 10px); top: 50%; padding: 10px 16px; border-radius: 999px; background: var(--wa); white-space: nowrap; box-shadow: var(--shadow-s); opacity: 0; translate: 8px -50%; scale: .96; transform-origin: right center; pointer-events: none; transition: opacity .18s ease, translate .25s cubic-bezier(.23, 1, .32, 1), scale .25s cubic-bezier(.23, 1, .32, 1); }
@media (hover: hover) and (pointer: fine) { .wa:hover { transform: translateY(-3px); } }
.wa:focus-visible span { opacity: 1; translate: 0 -50%; scale: 1; }
@media (hover: hover) and (pointer: fine) { .wa:hover span { opacity: 1; translate: 0 -50%; scale: 1; } }
.dock { display: none; }

/* ==========================================================================
   RESPONSIV
   ========================================================================== */
@media (max-width: 1080px) {
  .nav__tel span { display: none; }
  .nav__links a:not(.btn) { padding: 9px 11px; }
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__top { grid-template-columns: 1fr 1fr; }
}

/* Navigation klappt schon unter 1024px ins Menue: Dazwischen passen die Punkte nicht in eine Zeile */
@media (max-width: 1023px) {
  .nav__cta, .nav__tel { display: none; }
  .nav__side { margin-left: auto; }
  .burger { display: block; }
  .nav__links {
    position: fixed; inset: 0; z-index: -1; margin: 0; padding: 110px 28px 40px;
    flex-direction: column; gap: 6px; background: var(--cream);
    overflow-y: auto; overscroll-behavior: contain;
    opacity: 0; visibility: hidden; transform: translateY(-16px);
    /* Schliessen geht schneller als Oeffnen */
    transition: opacity .18s ease-out, transform .18s ease-out, visibility 0s .18s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; transition: opacity .3s cubic-bezier(.23, 1, .32, 1), transform .3s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
  .nav__links a:not(.btn) { font-family: var(--display); font-size: 2rem; padding: 10px 6px; border-radius: 12px; }
  .nav__links-cta { display: inline-flex; margin-top: 20px; align-self: flex-start; }
  .nav.is-open .nav__inner { background: transparent; box-shadow: none; }
}

@media (max-width: 900px) {
  .tier, .kosten, .calc, .faq { grid-template-columns: minmax(0, 1fr); }
  /* Tablet: Tier bleibt neben dem Text im ersten Blick */
  .hero__grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: 28px; }
  .hero .display { font-size: clamp(2.5rem, 7vw, 4rem); }
  .hero__cta .btn { width: 100%; }
  .hero__ticks { flex-direction: column; }
  .hero__chip { right: -3%; }
  .hero__bubble--pferd { right: -4%; }
  .hero__price { left: -6%; }
  .stamp { right: 0; width: 104px; height: 104px; }
  .faq__head { position: static; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 16px; }
  .steps::before { display: none; }
  .upgrade { grid-template-columns: auto 1fr; }
  .upgrade .link { grid-column: 1 / -1; }

  .wa { display: none; }
  .foot { padding-bottom: 110px; }
  /* Sprungziele (Fehler im Formular, #Anker) nicht unter der Leiste verstecken */
  html { scroll-padding-bottom: 96px; }
  .dock { position: fixed; left: calc(10px + env(safe-area-inset-left, 0px)); right: calc(10px + env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); z-index: 90; display: grid; grid-template-columns: auto auto 1fr; gap: 8px; padding: 8px; border-radius: 999px; background: rgba(255, 255, 255, .96); box-shadow: 0 12px 34px rgba(10, 27, 61, .22); transition: transform .35s cubic-bezier(.23, 1, .32, 1); }
  .dock.is-away { transform: translateY(140%); }
  /* Beim Tippen ins Formular macht die Leiste der Tastatur Platz */
  body:has(:is(.input, textarea, select):focus) .dock { transform: translateY(140%); }
  body:has(:is(.input, textarea, select):focus) .pauseknopf { opacity: 0; pointer-events: none; }
  .dock a { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 999px; font-family: var(--display); font-weight: 700; }
  .dock svg { width: 22px; height: 22px; }
  .dock__wa { width: 50px; background: var(--wa); color: #fff; }
  .dock__tel { padding: 0 18px; background: var(--sky); color: var(--ink); }
  .dock__tel svg { color: var(--blue); }
  .dock__main { background: var(--peach); color: var(--ink); font-size: .98rem; white-space: nowrap; }
}

/* Handy: Ueberschrift, dann sofort das Tier, danach Text und Knoepfe */
@media (max-width: 720px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .hero__copy { display: contents; }
  .hero__copy > * + * { margin-top: 0; }
  .hero__copy > .pill { order: 1; justify-self: start; }
  .hero__copy > .display { order: 2; }
  .hero__stage { order: 3; width: min(78%, 360px); margin: 6px auto 18px; }
  .hero__copy > .hero__lead { order: 4; }
  .hero__copy > .hero__cta { order: 5; }
  .hero__copy > .hero__ticks { order: 6; }
  .hero .display { font-size: clamp(2.7rem, 12.5vw, 4rem); }
}

@media (max-width: 600px) {
  .wrap { width: calc(100% - 32px); }
  /* Lange deutsche Woerter in schmalen Spalten trennen statt ausfransen lassen */
  p, li, dd, .fine { hyphens: auto; -webkit-hyphenate-limit-before: 4; -webkit-hyphenate-limit-after: 4; hyphenate-limit-chars: 10 4 4; }
  .brand__name { font-size: 1.08rem; }
  .brand__mark { width: 38px; height: 38px; }
  .hero { padding-top: 112px; }
  .hero__cta .btn { width: 100%; }
  .hero__ticks { flex-direction: column; }
  .hero__stage { width: 80%; }
  .hero__price { left: -12%; padding: 12px 15px; max-width: 190px; }
  .hero__price-row strong { font-size: 2rem; }
  .hero__chip { right: -12%; font-size: .75rem; padding: 8px 14px 8px 8px; }
  .hero__chip strong { font-size: .8125rem; }
  .hero__chip-icon { width: 32px; height: 32px; }
  .stamp { width: 96px; height: 96px; right: -6%; }
  .stamp__paw { width: 28px; height: 28px; }
  .switch { display: grid; width: 100%; }
  .switch__btn { padding-inline: 8px; font-size: 1.05rem; gap: 7px; }
  .tier__media { border-radius: var(--r-l) var(--r-l) var(--r-l) 90px; }
  .tier__prices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tier__body .btn { width: 100%; }
  .seg--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg button { padding: 12px 6px; font-size: .95rem; }
  .bento { grid-template-columns: minmax(0, 1fr); grid-auto-rows: auto; }
  .tile--wide, .tile--tall { grid-column: auto; grid-row: auto; }
  .tile { min-height: 200px; }
  .tile--photo { aspect-ratio: 4 / 3; }
  .bill { transform: rotate(0); }
  .qa summary { padding: 18px 18px; font-size: 1.1rem; }
  .qa__body { padding: 0 18px 20px; }
  .foot__top { grid-template-columns: 1fr; gap: 28px; }
  .finale__cta .btn { width: 100%; }
}

/* Sehr kleine Handys: Logo und Menueknopf passen sonst nicht nebeneinander */
@media (max-width: 360px) {
  .nav__inner { gap: 10px; }
  .brand__name { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js [data-in] { opacity: 1; transform: none; }
  .tape__track, .reel__track { animation: none !important; }
  .reel { overflow-x: auto; }
  .mark svg path { stroke-dashoffset: 0; }
}