/* ==========================================================================
   Haustierschutzhelden — Design System
   ========================================================================== */

/* ---------- Tokens ---------- */
:root{
  /* Brand */
  --brand-logo:   #0078F8;   /* Originalblau aus dem Logo, nur dekorativ */
  --brand:        #0A6ADB;
  --brand-700:    #0A55AF;
  --brand-800:    #0A3A72;
  --brand-100:    #CFE2FC;
  --brand-50:     #EAF2FE;

  --accent:       #F88A50;
  --accent-600:   #E56F30;
  --accent-100:   #FCDFC9;
  --accent-50:    #FEF3EB;
  --accent-ink:   #06203F;   /* Textfarbe auf Orange, kontraststark */

  --gold:         #E8A317;

  /* Neutrals — bewusst warm.
     Die Fotos sind warm: Abendlicht, goldenes Gras, Fensterlicht. Eine kühle,
     blaustichige Seite stellt sich dagegen — zwei Welten, keine Harmonie.
     Deshalb tragen die Flächen dieselbe Temperatur wie die Bilder. Das Blau
     der Marke bleibt dem Akzent vorbehalten: Schaltflächen, Links, Details. */
  --ink:          #241D16;
  --ink-2:        #4A3F35;
  --muted:        #6E6155;
  --line:         #E8DFD3;
  --line-2:       #F2ECE3;
  --cream:        #FBF7F1;
  --surface:      #FFFDF9;
  --sand:         #F5EDE1;

  /* Effects */
  --r-sm: 10px;
  --r:    16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --pill: 999px;

  --sh-1: 0 1px 2px rgba(14,27,43,.05), 0 2px 8px rgba(14,27,43,.05);
  --sh-2: 0 2px 4px rgba(14,27,43,.04), 0 12px 28px -8px rgba(14,27,43,.12);
  --sh-3: 0 4px 8px rgba(14,27,43,.05), 0 28px 56px -16px rgba(14,27,43,.20);

  --ff-head: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --ff-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;

  --nav-h: 76px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--nav-h) + 16px); }
body{
  margin:0;
  font-family:var(--ff-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink-2);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
a{ color:var(--brand); text-decoration:none; }
a:hover{ color:var(--brand-700); }
h1,h2,h3,h4{
  font-family:var(--ff-head);
  color:var(--ink);
  line-height:1.14;
  letter-spacing:-.022em;
  margin:0 0 .5em;
  font-weight:800;
}
h1{ font-size:clamp(2.3rem, 1.35rem + 3.3vw, 4rem); }
h2{ font-size:clamp(1.85rem, 1.25rem + 2.2vw, 2.85rem); }
h3{ font-size:clamp(1.2rem, 1.05rem + .6vw, 1.5rem); }
h4{ font-size:1.05rem; font-weight:700; }
p{ margin:0 0 1rem; }
ul,ol{ margin:0 0 1rem; padding-left:1.15rem; }
hr{ border:0; border-top:1px solid var(--line); margin:2.5rem 0; }
/* Browser geben figure standardmaessig 1em oben/unten und 40px seitlich.
   Das sprengt jedes Raster - deshalb hier zuruecksetzen. */
figure{ margin:0; }
blockquote{ margin:0; }
dl,dd{ margin:0; }
::selection{ background:var(--brand-100); color:var(--brand-800); }

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

/* ---------- Layout ---------- */
.wrap{ width:100%; max-width:1180px; margin-inline:auto; padding-inline:24px; }
.wrap--narrow{ max-width:820px; }
.section{ padding-block:clamp(56px, 7vw, 104px); }
.section--tight{ padding-block:clamp(40px, 5vw, 68px); }
.section--cream{ background:var(--cream); }
.section--white{ background:var(--surface); }
.section--mint{ background:linear-gradient(180deg,var(--sand),#FAF4EA); }
.section--dark{ background:var(--brand-800); color:#C4D8F2; }
.section--dark h2,.section--dark h3{ color:#fff; }

.grid{ display:grid; gap:24px; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1000px){ .g-4{ grid-template-columns:repeat(2,1fr); } .g-3{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:700px){ .g-2,.g-3,.g-4{ grid-template-columns:1fr; } }

.center{ text-align:center; }
.stack-sm > * + *{ margin-top:.5rem; }

/* ---------- Typography helpers ---------- */
.eyebrow{
  display:inline-flex; align-items:center; gap:.5rem;
  font-family:var(--ff-head);
  font-size:.78rem; font-weight:800;
  letter-spacing:.13em; text-transform:uppercase;
  color:var(--brand);
  margin-bottom:1rem;
}
.eyebrow::before{
  content:""; width:22px; height:2px; border-radius:2px; background:var(--accent);
}
.eyebrow--center{ justify-content:center; }
.lead{ font-size:clamp(1.05rem,1rem + .35vw,1.22rem); color:var(--ink-2); }
.muted{ color:var(--muted); }
.small{ font-size:.9rem; }
.xsmall{ font-size:.82rem; line-height:1.55; }
.section-head{ max-width:680px; margin-bottom:clamp(32px,4vw,52px); }
.section-head--center{ margin-inline:auto; text-align:center; }
.hl{
  background:linear-gradient(180deg,transparent 58%, var(--accent-100) 58%);
  padding-inline:2px;
}

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--brand); --fg:#fff; --bd:var(--brand);
  display:inline-flex; align-items:center; justify-content:center; gap:.55rem;
  font-family:var(--ff-head); font-weight:700; font-size:1rem; line-height:1;
  padding:15px 26px; border-radius:var(--pill);
  background:var(--bg); color:var(--fg); border:2px solid var(--bd);
  cursor:pointer; text-align:center;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  box-shadow:var(--sh-1);
}
.btn:hover{ transform:translateY(-2px); box-shadow:var(--sh-2); color:var(--fg); }
.btn:active{ transform:translateY(0); }
.btn--accent{ --bg:var(--accent); --fg:var(--accent-ink); --bd:var(--accent); }
.btn--accent:hover{ --bg:var(--accent-600); --fg:#fff; --bd:var(--accent-600); }
.btn--ghost{ --bg:transparent; --fg:var(--brand); --bd:var(--brand-100); box-shadow:none; }
.btn--ghost:hover{ --bd:var(--brand); --fg:var(--brand-700); }
.btn--light{ --bg:#fff; --fg:var(--brand-800); --bd:#fff; }
.btn--outline-light{ --bg:transparent; --fg:#fff; --bd:rgba(255,255,255,.35); box-shadow:none; }
.btn--outline-light:hover{ --bd:#fff; }
.btn--sm{ padding:11px 20px; font-size:.92rem; }
.btn--lg{ padding:18px 34px; font-size:1.06rem; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; }
.btn-row--center{ justify-content:center; }

.link-arrow{ font-weight:700; font-family:var(--ff-head); display:inline-flex; align-items:center; gap:.4rem; }
.link-arrow svg{ transition:transform .16s ease; }
.link-arrow:hover svg{ transform:translateX(3px); }

/* ---------- Badges / pills ---------- */
.badge{
  display:inline-flex; align-items:center; gap:.4rem;
  padding:6px 13px; border-radius:var(--pill);
  font-size:.78rem; font-weight:700; font-family:var(--ff-head);
  letter-spacing:.02em;
  background:var(--brand-50); color:var(--brand-700);
  border:1px solid var(--brand-100);
}
.badge--accent{ background:var(--accent-50); color:var(--accent-600); border-color:var(--accent-100); }
.badge--gold{ background:#FDF3DC; color:#8A6109; border-color:#F6E2B4; }

/* ==========================================================================
   Header
   ========================================================================== */
.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:12px 20px; border-radius:0 0 12px 0;
}
.skip:focus{ left:0; color:#fff; }

.topbar{
  background:var(--brand-800); color:#BBD4F2;
  font-size:.83rem; letter-spacing:.01em;
}
.topbar .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:38px; }
.topbar a{ color:#fff; font-weight:600; }
.topbar ul{ display:flex; gap:20px; list-style:none; margin:0; padding:0; }
.topbar li{ display:flex; align-items:center; gap:.4rem; }
@media (max-width:840px){ .topbar__list{ display:none !important; } .topbar .wrap{ justify-content:center; } }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:box-shadow .2s ease, border-color .2s ease;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 8px 24px -18px rgba(14,27,43,.5); }
.nav{ display:flex; align-items:center; gap:24px; min-height:var(--nav-h); }

.logo{ display:flex; align-items:center; gap:11px; margin-right:auto; color:var(--ink); }
.logo:hover{ color:var(--ink); }
.logo__mark{ width:42px; height:42px; flex:0 0 42px; }
.logo__text{ display:flex; flex-direction:column; line-height:1.1; }
.logo__name{ font-family:var(--ff-head); font-weight:800; font-size:1.06rem; letter-spacing:-.02em; }
.logo__tag{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:600; }

.nav__links{ display:flex; align-items:center; gap:4px; list-style:none; margin:0; padding:0; }
.nav__links a{
  display:block; padding:9px 14px; border-radius:var(--pill);
  font-weight:600; font-size:.96rem; color:var(--ink-2);
  transition:background .15s ease, color .15s ease;
}
.nav__links a:hover{ background:var(--brand-50); color:var(--brand-700); }
.nav__links a[aria-current="page"]{ background:var(--brand-50); color:var(--brand-700); }
.nav__cta{ display:flex; align-items:center; gap:10px; }

.nav__toggle{
  display:none; width:46px; height:46px; border-radius:12px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  align-items:center; justify-content:center;
}
.nav__toggle span{
  display:block; width:20px; height:2px; background:var(--ink); border-radius:2px; position:relative;
  transition:background .15s ease;
}
.nav__toggle span::before,.nav__toggle span::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:var(--ink); border-radius:2px;
  transition:transform .2s ease, top .2s ease;
}
.nav__toggle span::before{ top:-6px; }
.nav__toggle span::after{ top:6px; }
.nav__toggle[aria-expanded="true"] span{ background:transparent; }
.nav__toggle[aria-expanded="true"] span::before{ top:0; transform:rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after{ top:0; transform:rotate(-45deg); }

@media (max-width:1024px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:calc(var(--nav-h)) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:16px 24px 26px; box-shadow:var(--sh-3);
    max-height:calc(100dvh - var(--nav-h)); overflow:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px 12px; font-size:1.05rem; border-radius:12px; }
  .nav__cta .btn--ghost{ display:none; }
}
@media (max-width:520px){
  .nav__cta .btn{ padding:11px 16px; font-size:.9rem; }
  .logo__tag{ display:none; }
}

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(900px 520px at 82% -5%, var(--sand) 0%, transparent 64%),
    radial-gradient(760px 480px at 6% 104%, var(--accent-50) 0%, transparent 62%),
    var(--cream);
  padding-block:clamp(48px,6vw,88px) clamp(56px,7vw,104px);
}
.hero__paws{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("../img/paw-pattern.svg");
  background-size:260px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 70%);
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.6),transparent 70%);
}
.hero .wrap{ position:relative; }
.hero__grid{
  display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(28px,4vw,64px); align-items:center;
}
@media (max-width:980px){ .hero__grid{ grid-template-columns:1fr; } }
.hero h1{ margin-bottom:.55em; }
.hero__lead{ font-size:clamp(1.06rem,1rem + .45vw,1.3rem); max-width:37ch; color:var(--ink-2); }
.hero__usps{ list-style:none; padding:0; margin:1.6rem 0 2rem; display:grid; gap:.7rem; }
.hero__usps li{ display:flex; align-items:flex-start; gap:.7rem; font-weight:600; color:var(--ink-2); }
.check{
  flex:0 0 22px; width:22px; height:22px; margin-top:2px; border-radius:50%;
  background:var(--brand); color:#fff; display:grid; place-items:center;
}
.check svg{ width:12px; height:12px; }

.hero__proof{
  margin-top:2.2rem; padding-top:1.5rem; border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:28px 40px; align-items:center;
}
.stat__num{ font-family:var(--ff-head); font-weight:800; font-size:1.7rem; color:var(--ink); line-height:1; letter-spacing:-.03em; }
.stat__lbl{ font-size:.83rem; color:var(--muted); margin-top:.3rem; }
.stars{ display:flex; gap:2px; color:var(--gold); }
.stars svg{ width:17px; height:17px; }

/* Quote card */
.quote-card{
  background:#fff; border-radius:var(--r-xl); padding:clamp(22px,2.4vw,32px);
  box-shadow:var(--sh-3); border:1px solid var(--line-2);
  position:relative;
}
.quote-card__head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.quote-card h2{ font-size:1.35rem; margin:0; }
.quote-card__sub{ font-size:.9rem; color:var(--muted); margin:.35rem 0 0; }

.field{ margin-bottom:16px; }
.field > label,.field__label{
  display:block; font-family:var(--ff-head); font-weight:700; font-size:.86rem;
  color:var(--ink); margin-bottom:.5rem;
}
.input,select.input,textarea.input{
  width:100%; padding:13px 15px; border-radius:12px;
  border:1.5px solid var(--line); background:#fff; color:var(--ink);
  transition:border-color .15s ease, box-shadow .15s ease;
  font-size:1rem;
}
.input:hover{ border-color:#C3CEDA; }
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 4px var(--brand-50); }
select.input{
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%235A6B80' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-right:40px;
}
textarea.input{ min-height:130px; resize:vertical; }

/* Segmented choice (radio cards) */
.choice{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.choice--3{ grid-template-columns:repeat(3,1fr); }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice label{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:14px 8px; border-radius:14px; cursor:pointer;
  border:1.5px solid var(--line); background:#fff;
  font-family:var(--ff-head); font-weight:700; font-size:.93rem; color:var(--ink-2);
  transition:all .16s ease; text-align:center;
}
.choice label svg{ width:26px; height:26px; color:var(--muted); transition:color .16s ease; }
.choice label:hover{ border-color:var(--brand-100); background:var(--brand-50); }
.choice input:checked + label{
  border-color:var(--brand); background:var(--brand-50); color:var(--brand-700);
  box-shadow:0 0 0 3px var(--brand-50);
}
.choice input:checked + label svg{ color:var(--brand); }
.choice input:focus-visible + label{ outline:3px solid var(--accent); outline-offset:2px; }
.choice label small{ font-weight:600; font-size:.74rem; color:var(--muted); }

/* ==========================================================================
   Cards
   ========================================================================== */
.card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:clamp(22px,2.2vw,30px); box-shadow:var(--sh-1);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height:100%;
}
.card--hover:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); border-color:var(--brand-100); }
.card h3{ margin-bottom:.45em; }
.card p:last-child{ margin-bottom:0; }
.card__icon{
  width:52px; height:52px; border-radius:15px; display:grid; place-items:center;
  background:var(--brand-50); color:var(--brand); margin-bottom:18px;
}
.card__icon svg{ width:26px; height:26px; }
.card__icon--accent{ background:var(--accent-50); color:var(--accent-600); }

/* Cost cards */
.cost-card{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg);
  padding:26px; box-shadow:var(--sh-1); height:100%;
}
.cost-card__head{ display:flex; align-items:center; gap:12px; margin-bottom:18px; padding-bottom:16px; border-bottom:1px solid var(--line-2); }
.cost-card__head svg{ width:30px; height:30px; color:var(--brand); flex:0 0 30px; }
.cost-card__head h3{ margin:0; font-size:1.12rem; }
.cost-row{ display:flex; justify-content:space-between; align-items:baseline; gap:14px; padding:9px 0; }
.cost-row + .cost-row{ border-top:1px dashed var(--line); }
.cost-row dt{ color:var(--ink-2); font-size:.95rem; }
.cost-row dd{ margin:0; font-family:var(--ff-head); font-weight:800; color:var(--ink); white-space:nowrap; letter-spacing:-.01em; }
.cost-card dl{ margin:0; }
.cost-card__note{ margin-top:16px; font-size:.82rem; color:var(--muted); }

/* ==========================================================================
   Tariff cards
   ========================================================================== */
.tariffs{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; align-items:stretch; }
@media (max-width:960px){ .tariffs{ grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

.tariff{
  position:relative; background:#fff; border:1.5px solid var(--line);
  border-radius:var(--r-xl); padding:30px 26px 26px; display:flex; flex-direction:column;
  box-shadow:var(--sh-1); transition:transform .2s ease, box-shadow .2s ease;
}
.tariff:hover{ transform:translateY(-4px); box-shadow:var(--sh-2); }
.tariff--featured{ border-color:var(--brand); box-shadow:var(--sh-3); }
@media (min-width:961px){ .tariff--featured{ transform:scale(1.035); } .tariff--featured:hover{ transform:scale(1.035) translateY(-4px);} }
.tariff__flag{
  position:absolute; top:-13px; left:50%; transform:translateX(-50%);
  background:var(--brand); color:#fff; padding:6px 16px; border-radius:var(--pill);
  font-family:var(--ff-head); font-size:.74rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase;
  white-space:nowrap; box-shadow:var(--sh-2);
}
.tariff h3{ margin-bottom:.3em; }
.tariff__desc{ font-size:.94rem; color:var(--muted); min-height:3em; }
.tariff__price{ margin:20px 0 4px; display:flex; align-items:baseline; gap:6px; }
.tariff__price .from{ font-size:.85rem; color:var(--muted); font-weight:600; }
.tariff__price .amount{ font-family:var(--ff-head); font-weight:800; font-size:2.6rem; color:var(--ink); letter-spacing:-.04em; line-height:1; }
.tariff__price .per{ font-size:.9rem; color:var(--muted); font-weight:600; }
.tariff__pricenote{ font-size:.8rem; color:var(--muted); margin-bottom:20px; }
.tariff ul{ list-style:none; padding:0; margin:0 0 24px; display:grid; gap:.65rem; }
.tariff li{ display:flex; gap:.65rem; align-items:flex-start; font-size:.95rem; }
.tariff li svg{ flex:0 0 19px; width:19px; height:19px; margin-top:3px; color:var(--brand); }
.tariff li.is-off{ color:var(--muted); }
.tariff li.is-off svg{ color:#BFC8D3; }
.tariff__cta{ margin-top:auto; }

/* Comparison table */
.table-scroll{ overflow-x:auto; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; box-shadow:var(--sh-1); }
table.compare{ width:100%; border-collapse:collapse; min-width:680px; font-size:.95rem; }
table.compare th,table.compare td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:middle; }
table.compare thead th{
  background:var(--brand-800); color:#fff; font-family:var(--ff-head); font-weight:700; font-size:.92rem;
}
table.compare td:not(:first-child),table.compare th:not(:first-child){ text-align:center; }
table.compare tbody tr:nth-child(even){ background:#FDFAF5; }
table.compare tbody tr:hover{ background:var(--brand-50); }
table.compare th[scope="row"]{ font-weight:600; color:var(--ink); font-family:var(--ff-body); }
table.compare .grp td{ background:var(--cream); font-family:var(--ff-head); font-weight:800; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); text-align:left; }
.yes{ color:var(--brand); font-weight:700; }
.no{ color:#B8C2CE; }
table.compare tbody tr:last-child td,table.compare tbody tr:last-child th{ border-bottom:0; }

/* ==========================================================================
   Steps
   ========================================================================== */
.steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; position:relative; }
@media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .steps{ grid-template-columns:1fr; } }
.step{ position:relative; padding-top:8px; }
.step__num{
  width:52px; height:52px; border-radius:50%; display:grid; place-items:center;
  background:#fff; border:2px solid var(--brand-100); color:var(--brand);
  font-family:var(--ff-head); font-weight:800; font-size:1.2rem; margin-bottom:18px;
  position:relative; z-index:2;
}
.step--done .step__num{ background:var(--brand); border-color:var(--brand); color:#fff; }
.step h3{ font-size:1.08rem; }
.step p{ font-size:.94rem; color:var(--muted); margin:0; }
.step::after{
  content:""; position:absolute; top:34px; left:60px; right:-16px; height:2px;
  background:repeating-linear-gradient(90deg,var(--brand-100) 0 6px,transparent 6px 12px);
  z-index:1;
}
.step:last-child::after{ display:none; }
@media (max-width:900px){ .step::after{ display:none; } }

/* ==========================================================================
   Testimonials
   ========================================================================== */
.testi-rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(300px,340px);
  gap:22px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 24px 26px; margin-inline:-24px;
  scrollbar-width:thin;
}
.testi-rail::-webkit-scrollbar{ height:8px; }
.testi-rail::-webkit-scrollbar-thumb{ background:var(--line); border-radius:8px; }
.testi{
  scroll-snap-align:start; background:#fff; border:1px solid var(--line-2);
  border-radius:var(--r-lg); padding:26px; box-shadow:var(--sh-1);
  display:flex; flex-direction:column;
}
.testi__stars{ margin-bottom:12px; }
.testi blockquote{ margin:0 0 20px; font-size:.98rem; color:var(--ink-2); }
.testi__who{ margin-top:auto; display:flex; align-items:center; gap:12px; }
.avatar{
  width:42px; height:42px; border-radius:50%; flex:0 0 42px; display:grid; place-items:center;
  background:var(--brand-50); color:var(--brand-700);
  font-family:var(--ff-head); font-weight:800; font-size:.95rem;
}
.testi__name{ font-family:var(--ff-head); font-weight:700; color:var(--ink); font-size:.95rem; line-height:1.25; }
.testi__meta{ font-size:.8rem; color:var(--muted); }
.rail-nav{ display:flex; gap:10px; }
.rail-btn{
  width:44px; height:44px; border-radius:50%; border:1.5px solid var(--line);
  background:#fff; color:var(--ink); display:grid; place-items:center; cursor:pointer;
  transition:all .15s ease;
}
.rail-btn:hover{ border-color:var(--brand); color:var(--brand); }
.rail-btn svg{ width:18px; height:18px; }

/* ==========================================================================
   Marquee
   ========================================================================== */
.marquee{ overflow:hidden; background:var(--brand-800); padding:14px 0; }
.marquee__track{ display:flex; width:max-content; animation:slide 34s linear infinite; }
.marquee__group{ display:flex; align-items:center; gap:48px; padding-right:48px; }
.marquee__item{
  display:flex; align-items:center; gap:.6rem; white-space:nowrap;
  color:#DCE9FA; font-family:var(--ff-head); font-weight:700; font-size:.93rem;
}
.marquee__item svg{ width:18px; height:18px; color:var(--accent); flex:0 0 18px; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (prefers-reduced-motion:reduce){ .marquee__track{ animation:none; } }

/* ==========================================================================
   FAQ accordion
   ========================================================================== */
.faq{ max-width:840px; margin-inline:auto; }
.faq details{
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r);
  margin-bottom:12px; box-shadow:var(--sh-1); overflow:hidden;
  transition:border-color .15s ease;
}
.faq details[open]{ border-color:var(--brand-100); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 22px; position:relative;
  font-family:var(--ff-head); font-weight:700; font-size:1.03rem; color:var(--ink);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:12px; height:12px;
  border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:translateY(-70%) rotate(45deg); transition:transform .2s ease;
}
.faq details[open] summary::after{ transform:translateY(-30%) rotate(-135deg); }
.faq summary:hover{ background:var(--brand-50); }
.faq__body{ padding:0 22px 22px; color:var(--ink-2); }
.faq__body p:last-child{ margin-bottom:0; }

/* ==========================================================================
   CTA band
   ========================================================================== */
.cta-band{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--brand-800) 0%, var(--brand-700) 55%, var(--brand) 100%);
  color:#DCE9FA;
}
.cta-band::after{
  content:""; position:absolute; inset:0; opacity:.14; pointer-events:none;
  background-image:url("../img/paw-pattern-light.svg"); background-size:220px;
}
.cta-band .wrap{ position:relative; z-index:1; }
.cta-band h2{ color:#fff; }
.cta-band .lead{ color:#C4D8F2; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer{ background:#071A33; color:#9FB2CC; padding-block:clamp(48px,5vw,72px) 0; font-size:.94rem; }
.site-footer a{ color:#C8DAF2; }
.site-footer a:hover{ color:#fff; }
.footer__grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:36px; }
@media (max-width:900px){ .footer__grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer__grid{ grid-template-columns:1fr; } }
.site-footer h4{ color:#fff; font-size:.82rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:1.1rem; }
.site-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:.62rem; }
.footer__brand .logo__name{ color:#fff; }
.footer__brand .logo__tag{ color:#7E93B0; }
.footer__bottom{
  margin-top:44px; border-top:1px solid rgba(255,255,255,.1); padding-block:22px 30px;
  display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between; align-items:center;
  font-size:.85rem; color:#7E93B0;
}
.footer__legal{ display:flex; flex-wrap:wrap; gap:18px; }
.socials{ display:flex; gap:10px; }
.socials a{
  width:38px; height:38px; border-radius:11px; display:grid; place-items:center;
  background:rgba(255,255,255,.07); transition:background .15s ease;
}
.socials a:hover{ background:var(--brand); }
.socials svg{ width:18px; height:18px; }
.disclaimer{ background:#05152A; color:#6B819E; font-size:.78rem; line-height:1.6; padding-block:18px; }

/* ==========================================================================
   Page hero (subpages)
   ========================================================================== */
.page-hero{
  background:
    radial-gradient(760px 400px at 88% -20%, var(--sand), transparent 62%),
    var(--cream);
  padding-block:clamp(40px,4.5vw,68px) clamp(36px,4vw,56px);
  border-bottom:1px solid var(--line-2);
}
.crumbs{ font-size:.85rem; color:var(--muted); margin-bottom:1rem; display:flex; gap:.5rem; flex-wrap:wrap; }
.crumbs a{ color:var(--muted); }
.crumbs a:hover{ color:var(--brand); }
.page-hero h1{ max-width:21ch; }
.page-hero .lead{ max-width:60ch; }

/* ==========================================================================
   Calculator
   ========================================================================== */
.calc{ display:grid; grid-template-columns:1.25fr .75fr; gap:28px; align-items:start; }
@media (max-width:940px){ .calc{ grid-template-columns:1fr; } }
.calc__panel{ background:#fff; border:1px solid var(--line-2); border-radius:var(--r-xl); padding:clamp(22px,2.5vw,34px); box-shadow:var(--sh-2); }
.calc__result{ position:sticky; top:calc(var(--nav-h) + 20px); }
.result-card{
  background:linear-gradient(160deg,var(--brand-800),var(--brand-700));
  color:#CBDDF4; border-radius:var(--r-xl); padding:clamp(24px,2.5vw,32px); box-shadow:var(--sh-3);
}
.result-card h3{ color:#fff; font-size:1.15rem; margin-bottom:.2em; }
.result-card__price{ display:flex; align-items:baseline; gap:8px; margin:18px 0 4px; }
.result-card__price .amount{ font-family:var(--ff-head); font-weight:800; font-size:3.1rem; color:#fff; letter-spacing:-.04em; line-height:1; }
.result-card__price .per{ font-size:.95rem; color:#A5C0E4; }
.result-card__note{ font-size:.82rem; color:#A5C0E4; }
.result-card ul{ list-style:none; padding:0; margin:22px 0; display:grid; gap:.6rem; font-size:.92rem; }
.result-card li{ display:flex; gap:.6rem; align-items:flex-start; }
.result-card li svg{ flex:0 0 18px; width:18px; height:18px; margin-top:3px; color:var(--accent); }
.result-card hr{ border-top:1px solid rgba(255,255,255,.13); margin:20px 0; }
.fieldset{ border:0; padding:0; margin:0 0 26px; }
.fieldset legend{
  font-family:var(--ff-head); font-weight:800; font-size:1.05rem; color:var(--ink);
  padding:0; margin-bottom:14px; display:flex; align-items:center; gap:10px;
}
.fieldset legend .n{
  width:26px; height:26px; border-radius:50%; background:var(--brand-50); color:var(--brand);
  display:grid; place-items:center; font-size:.82rem;
}
.slider-row{ display:flex; align-items:center; gap:16px; }
input[type="range"]{ flex:1; accent-color:var(--brand); height:6px; }
.slider-val{
  font-family:var(--ff-head); font-weight:800; color:var(--brand-700);
  background:var(--brand-50); padding:7px 14px; border-radius:var(--pill);
  min-width:104px; text-align:center; font-size:.94rem;
}
.calc__hint{ font-size:.84rem; color:var(--muted); margin-top:8px; }

/* ==========================================================================
   Forms / contact
   ========================================================================== */
.form-note{ font-size:.85rem; color:var(--muted); }
.form-error{ color:#C0392B; font-size:.84rem; margin-top:.4rem; display:none; font-weight:600; }
.field.has-error .input{ border-color:#C0392B; }
.field.has-error .form-error{ display:block; }
.form-success{
  display:none; background:var(--brand-50); border:1.5px solid var(--brand-100);
  border-radius:var(--r); padding:28px; text-align:center;
}
.form-success.is-visible{ display:block; }
.checkbox{ display:flex; gap:12px; align-items:flex-start; font-size:.9rem; color:var(--ink-2); }
.checkbox input{ margin-top:4px; width:19px; height:19px; accent-color:var(--brand); flex:0 0 19px; }

.contact-tile{
  display:flex; gap:16px; align-items:flex-start; padding:22px;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh-1);
  transition:transform .18s ease, box-shadow .18s ease;
}
.contact-tile:hover{ transform:translateY(-3px); box-shadow:var(--sh-2); }
.contact-tile__icon{ width:46px; height:46px; flex:0 0 46px; border-radius:14px; display:grid; place-items:center; background:var(--brand-50); color:var(--brand); }
.contact-tile__icon svg{ width:23px; height:23px; }
.contact-tile h3{ font-size:1.02rem; margin-bottom:.2em; }
.contact-tile p{ margin:0; font-size:.92rem; color:var(--muted); }
.contact-tile strong{ color:var(--ink); }

/* ==========================================================================
   Misc
   ========================================================================== */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,60px); align-items:center; }
@media (max-width:860px){ .split{ grid-template-columns:1fr; } }

.figure{
  border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--sh-2);
  background:linear-gradient(150deg,var(--brand-50),var(--accent-50));
  border:1px solid var(--line-2);
}
.figure svg{ width:100%; height:auto; display:block; }

.callout{
  background:var(--accent-50); border:1px solid var(--accent-100);
  border-left:4px solid var(--accent); border-radius:var(--r);
  padding:20px 22px; font-size:.95rem;
}
.callout strong{ color:var(--ink); }

.prose h2{ margin-top:2.2em; }
.prose h3{ margin-top:1.8em; }
.prose ul{ padding-left:1.3rem; }
.prose li{ margin-bottom:.45rem; }
.prose > *:first-child{ margin-top:0; }

.tile-list{ list-style:none; padding:0; margin:0; display:grid; gap:12px; }
.tile-list li{
  display:flex; gap:12px; align-items:flex-start;
  background:#fff; border:1px solid var(--line-2); border-radius:var(--r); padding:16px 18px;
}
.tile-list li svg{ flex:0 0 20px; width:20px; height:20px; margin-top:3px; color:var(--brand); }

/* Scroll reveal
   Wichtig: Der versteckte Zustand gilt NUR, wenn JavaScript läuft (.js am <html>).
   Ohne JS, bei einem Skriptfehler oder beim Drucken bleibt jeder Inhalt sichtbar. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}
@media print{
  .js .reveal{ opacity:1 !important; transform:none !important; }
}

/* Sticky mobile CTA */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:0; z-index:90; display:none;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.94); backdrop-filter:blur(12px);
  border-top:1px solid var(--line); gap:10px;
}
@media (max-width:640px){ .mobile-cta{ display:flex; } body{ padding-bottom:74px; } }
.mobile-cta .btn{ flex:1; padding:13px 12px; font-size:.94rem; }

/* Zusatzbausteine im Rechner */
.addon-list{ display:grid; gap:12px; }
.addon{
  background:#fff; border:1.5px solid var(--line); border-radius:var(--r);
  padding:16px 18px; cursor:pointer; transition:border-color .15s ease, background .15s ease;
}
.addon:hover{ border-color:var(--brand-100); background:var(--brand-50); }
.addon:has(input:checked){ border-color:var(--brand); background:var(--brand-50); }

/* Nur für Screenreader */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- Feinschliff nach dem Sichttest ---------- */

/* Touch-Ziele: kleine Buttons erreichen sicher 40 px Hoehe */
.btn--sm{ padding:13px 20px; }

/* Kennzahlen im Hero sauber an der Oberkante ausrichten */
.hero__proof{ align-items:flex-start; }
.hero__proof .stars{ margin-bottom:.35rem; }

/* Preiszeilen: Betrag bleibt oben rechts, auch wenn die Bezeichnung umbricht */
.cost-row{ align-items:flex-start; }
.cost-row dd{ padding-top:1px; }

/* Laufband pausiert, sobald der Nutzer mit der Maus daraufliegt */
.marquee:hover .marquee__track{ animation-play-state:paused; }

/* ---------- Kopfzeile auf schmalen Displays ----------
   Unter 640 px passen Logo, CTA-Button und Menue-Icon nicht mehr nebeneinander.
   Der Beitragsrechner-Aufruf ist dort ohnehin dauerhaft in der unteren
   Leiste (.mobile-cta) sichtbar, deshalb entfaellt er hier. */
@media (max-width:640px){
  .nav{ gap:12px; }
  .nav__cta{ display:none; }
}
@media (max-width:400px){
  .logo__mark{ width:36px; height:36px; flex-basis:36px; }
  .logo__name{ font-size:.98rem; }
  .logo{ gap:9px; }
}

/* ---------- Robustes Umbruchverhalten ----------
   Deutsche Komposita wie "Hundekrankenversicherung" sind laenger als ein
   schmales Display breit ist. Ohne diese Regeln schiebt eine einzige
   Ueberschrift die ganze Seite seitlich aus dem Bild. */
body{ overflow-wrap:break-word; }
/* In grossen Ueberschriften keine automatische Silbentrennung: Chrome trennt
   sonst auch kurze Woerter wie "wirk-lich", was im Schaubild stoert. Die
   wirklich langen Komposita bekommen im Text ein gesetztes &shy; als
   Trennstelle. Unter 480 px ist ein Trennstrich besser als ein Ueberlauf. */
h1,h2,h3,h4{
  overflow-wrap:break-word;
  -webkit-hyphens:manual; hyphens:manual;
}
@media (max-width:480px){
  h1,h2,h3,h4{ -webkit-hyphens:auto; hyphens:auto; }
}

/* Raster- und Flex-Kinder duerfen unter ihre Inhaltsbreite schrumpfen.
   Ohne min-width:0 erzwingt der laengste Textbaustein die Spaltenbreite. */
.grid > *,
.split > *,
.calc > *,
.tariffs > *,
.steps > *{ min-width:0; }
.cost-row dt{ min-width:0; }

/* Vier Spalten brauchen mehr Platz als bislang angenommen: bei 1024 px
   sprengten die Preiszeilen der Kostenkarten sonst ihre Karte.
   Die Untergrenze ist wichtig — sonst ueberschreibt diese Regel die
   einspaltige Darstellung unterhalb von 700 px. */
@media (min-width:701px) and (max-width:1100px){
  .g-4{ grid-template-columns:repeat(2,1fr); }
}

/* ---------- Sehr schmale Displays (ab 320 px) ---------- */

/* Flex-Kinder mit langen, unteilbaren Zeichenketten (E-Mail-Adressen) */
.contact-tile > div{ min-width:0; }
.contact-tile p{ overflow-wrap:anywhere; }

/* Preisangaben duerfen auf schmalen Karten umbrechen statt herauszuragen */
@media (max-width:480px){
  .cost-row dd{ white-space:normal; text-align:right; }
}

/* Drei Auswahlkacheln nebeneinander sind unter 400 px zu eng */
@media (max-width:400px){
  .choice--3{ grid-template-columns:1fr 1fr; }
  .choice--3 > input:last-of-type + label{ grid-column:1 / -1; }
}

/* Ueberschrift auf Kleinstgeraeten eine Stufe kleiner */
@media (max-width:380px){
  h1{ font-size:2rem; }
  h2{ font-size:1.65rem; }
}

/* ==========================================================================
   BILDER
   Jeder Bildplatz zeigt so lange eine Illustration, bis die echte Fotodatei
   im Ordner assets/img/photos/ liegt. Dann erscheint automatisch das Foto.
   Es muss dafuer nichts im Code geaendert werden.
   ========================================================================== */
.ph{
  position:relative; overflow:hidden;
  border-radius:var(--r-xl);
  background:linear-gradient(150deg,var(--sand) 0%, #FAF3E9 45%, var(--accent-50) 100%);
  border:1px solid var(--line-2);
  isolation:isolate;
}
.ph--1x1{ aspect-ratio:1/1; }
.ph--4x3{ aspect-ratio:4/3; }
.ph--3x4{ aspect-ratio:3/4; }
.ph--16x10{ aspect-ratio:16/10; }
.ph--21x9{ aspect-ratio:21/9; }
.ph--round{ border-radius:50%; }

.ph__img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center;
  opacity:0;
  /* Zusammengesetzt aus Einzelteilen, damit sich Parallaxe (--ph-y) und
     Hover-Zoom (--ph-s) nicht gegenseitig ueberschreiben. Wer hier eine
     feste transform-Angabe einsetzt, schaltet den jeweils anderen Effekt ab. */
  transform:translate3d(0, var(--ph-y, 0px), 0) scale(var(--ph-s, 1.04));
  transition:opacity .7s ease, transform 1.1s cubic-bezier(.2,.7,.3,1);
  z-index:2;
}
.ph.is-loaded .ph__img{ opacity:1; --ph-s:1; }

/* Illustration als Platzhalter */
.ph__ill{
  position:absolute; inset:0; display:grid; place-items:center;
  padding:8%; z-index:1;
  transition:opacity .5s ease;
}
.ph__ill svg{ width:100%; height:100%; max-height:100%; }
.ph.is-loaded .ph__ill{ opacity:0; }

/* Dezenter Pfotenflor hinter der Illustration */
.ph__ill::before{
  content:""; position:absolute; inset:0;
  background-image:url("../img/paw-pattern.svg");
  background-size:150px; opacity:.7;
}

/* Hinweisschild, solange kein Foto vorhanden ist (nur fuer die Bearbeitung) */
.ph.is-missing::after{
  content:attr(data-hint);
  position:absolute; left:10px; bottom:10px; z-index:3;
  font-family:var(--ff-body); font-size:.68rem; font-weight:600;
  color:var(--brand-700); background:rgba(255,255,255,.82);
  padding:4px 9px; border-radius:var(--pill);
  border:1px solid var(--brand-100);
  opacity:0; transition:opacity .2s ease; pointer-events:none;
}
.ph.is-missing:hover::after{ opacity:1; }
body.hide-photo-hints .ph.is-missing::after{ content:none; }

/* Sanfter Zoom beim Ueberfahren */
@media (hover:hover){
  .ph--zoom:hover .ph__img{ --ph-s:1.07; }
  .ph--zoom .ph__img{ transition:transform 1.4s cubic-bezier(.2,.7,.3,1), opacity .7s ease; }
}

/* Bildunterschrift */
.ph__caption{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  padding:34px 18px 14px;
  background:linear-gradient(to top, rgba(10,58,114,.82), transparent);
  color:#fff; font-size:.88rem; font-weight:600; font-family:var(--ff-head);
  transform:translateY(6px); opacity:0;
  transition:transform .3s ease, opacity .3s ease;
}
.ph:hover .ph__caption,
.ph:focus-within .ph__caption{ transform:none; opacity:1; }

/* ==========================================================================
   LOGO
   Die Logodatei ist eine quadratische Sperrmarke: Emblem oben, Schriftzug
   unten. Fuer die Kopfzeile wird per Ausschnitt nur das Emblem gezeigt,
   der Schriftzug daneben kommt als Text — das bleibt in jeder Groesse scharf
   und laesst sich vorlesen.
   ========================================================================== */
.logo__mark{
  width:46px; height:46px; flex:0 0 46px;
  overflow:hidden; border-radius:12px;
  display:block; background:#fff;
}
.logo__mark img{
  width:141.8%; height:141.8%; max-width:none;
  transform:translate(-14.63%, -5.31%);
}
.logo__name .lg-b{ color:var(--brand-logo); }
.logo__name .lg-o{ color:var(--accent-600); }
.logo__name{ letter-spacing:-.025em; }

/* Auf dunklem Grund bekommt das Emblem eine weisse Karte */
.site-footer .logo__mark{ box-shadow:0 0 0 3px rgba(255,255,255,.1); }
.site-footer .logo__name .lg-b{ color:#7FB6FF; }
.site-footer .logo__name .lg-o{ color:var(--accent); }

@media (max-width:400px){
  .logo__mark{ width:38px; height:38px; flex-basis:38px; border-radius:10px; }
}

/* ==========================================================================
   EFFEKTE
   ========================================================================== */

/* Illustrationen in leeren Bildplaetzen */
.ph--ill-hund  .ph__ill{ background-image:url("../img/ill/hund.svg");  background-size:58%; background-repeat:no-repeat; background-position:center; }
.ph--ill-katze .ph__ill{ background-image:url("../img/ill/katze.svg"); background-size:58%; background-repeat:no-repeat; background-position:center; }
.ph--ill-duo   .ph__ill{ background-image:url("../img/ill/duo.svg");   background-size:72%; background-repeat:no-repeat; background-position:center; }

/* Lesefortschritt */
.progress{
  position:fixed; left:0; right:0; top:0; height:3px; z-index:150;
  background:transparent; pointer-events:none;
}
.progress__bar{
  height:100%; width:0;
  background:linear-gradient(90deg,var(--brand-logo),var(--accent));
  transition:width .08s linear;
}

/* Karten mit leichter Tiefenwirkung */
[data-tilt]{
  transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease;
  position:relative;
}
[data-tilt]::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(420px circle at var(--gx,50%) var(--gy,0%), rgba(255,255,255,.5), transparent 45%);
  opacity:0; transition:opacity .3s ease;
}
[data-tilt]:hover::after{ opacity:1; }

/* Glanzstreifen ueber den Hauptschaltflaechen */
.btn--accent, .btn:not(.btn--ghost):not(.btn--outline-light){ position:relative; overflow:hidden; }
.btn--accent::after, .btn:not(.btn--ghost):not(.btn--outline-light)::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:45%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.42), transparent);
  transform:skewX(-18deg); pointer-events:none;
  transition:left .55s cubic-bezier(.2,.7,.3,1);
}
.btn--accent:hover::after, .btn:not(.btn--ghost):not(.btn--outline-light):hover::after{ left:120%; }

/* Preis im Rechner beim Wechsel kurz hervorheben */
#r-preis{ transition:color .25s ease; }
#r-preis.is-changing{ color:var(--accent); }

/* Pfotenspur entlang der Ablauf-Schritte */
.step__paw{
  position:absolute; top:14px; left:66px; width:22px; height:22px;
  opacity:0; transform:scale(.6) rotate(-18deg);
  color:var(--brand-100);
}
.step.is-in .step__paw{
  animation:pawIn .5s cubic-bezier(.2,.9,.3,1) forwards;
  animation-delay:calc(var(--i, 0) * 140ms + 260ms);
}
@keyframes pawIn{ to{ opacity:1; transform:scale(1) rotate(-18deg); } }

/* Galerie „Unsere Helden": grosses Bild links (2x2), vier Kacheln rechts,
   darunter ein breites Band ueber die volle Breite - keine Luecken. */
.helden{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
/* Ohne align-self:start streckt das Raster die Kacheln vertikal; das
   Seitenverhaeltnis leitet dann die Breite aus der Zeilenhoehe ab und die
   Kacheln fuellen ihre Spalte nicht mehr aus. */
.helden > *{ align-self:start; justify-self:stretch; }
.helden > *:nth-child(1){ grid-column:span 2; grid-row:span 2; }
.helden > *:nth-child(6),
.helden > *:nth-child(7){ grid-column:span 2; }
@media (max-width:560px){
  .helden{ grid-template-columns:repeat(2,1fr); gap:12px; }
  .helden > *:nth-child(1){ grid-column:span 2; grid-row:auto; }
  .helden > *:nth-child(6),
  .helden > *:nth-child(7){ grid-column:span 2; }
}
.helden .ph{ border-radius:var(--r-lg); }

/* Bild im Kopfbereich der Unterseiten */
.page-hero .ph{ box-shadow:var(--sh-2); }

/* Foto hinter dem Abschluss-Aufruf */
.cta-band--photo{ position:relative; }
.cta-band--photo .cta-band__bg{
  position:absolute; inset:0; z-index:0; overflow:hidden;
}
.cta-band--photo .cta-band__bg img{
  width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity .8s ease;
}
.cta-band--photo .cta-band__bg.is-loaded img{ opacity:.26; }
.cta-band--photo .wrap{ position:relative; z-index:2; }

@media (prefers-reduced-motion:reduce){
  [data-tilt]{ transform:none; transition:none; }
  [data-tilt]::after{ display:none; }
  .btn::after{ display:none !important; }
  .step__paw{ opacity:1; transform:scale(1) rotate(-18deg); animation:none; }
  .progress__bar{ transition:none; }
}

/* Der Bildplatz hinter dem Abschluss-Aufruf ist flaechig, ohne Kartenoptik */
.cta-band__bg.ph{ border:0; border-radius:0; background:none; }
.cta-band__bg.ph .ph__img{ opacity:0; }
.cta-band__bg.ph.is-loaded .ph__img{ opacity:.26; }
.ph--ill-pferd .ph__ill{ background-image:url("../img/ill/pferd.svg"); background-size:58%; background-repeat:no-repeat; background-position:center; }


/* ==========================================================================
   KOPFBEREICH MIT FOTOS
   Tiere stehen im ersten Blickfeld: links die Botschaft, rechts eine
   Fotogruppe aus Hund, Katze und Pferd.
   ========================================================================== */
.hero__media{
  display:grid;
  grid-template-columns:1.34fr 1fr;
  gap:14px;
}
.hero__media > *{ min-width:0; }

/* Die beiden kleinen Fotos bestimmen die Zeilenhoehe ... */
.hero__pic--side{
  aspect-ratio:1/1;
  align-self:start;
  border-radius:var(--r-lg);
}
/* ... das grosse Foto fuellt beide Zeilen und passt sich an. */
.hero__pic--main{
  grid-row:span 2;
  align-self:stretch;
  aspect-ratio:auto;
  border-radius:var(--r-xl);
}
.hero__pic{ box-shadow:var(--sh-2); }

@media (max-width:980px){
  .hero__media{
    grid-template-columns:1.34fr 1fr;
    max-width:560px;
    margin-top:8px;
  }
}
@media (max-width:520px){
  .hero__media{ grid-template-columns:1.2fr 1fr; gap:10px; }
}

/* ---------- Schnelleinstieg direkt unter dem Kopfbereich ---------- */
.quickbar{
  background:var(--surface);
  border-block:1px solid var(--line-2);
  padding-block:22px;
}
.quickbar__inner{
  display:grid;
  grid-template-columns:1.1fr 1.5fr 1fr auto;
  gap:20px;
  align-items:end;
}
.quickbar__lead h2{ font-size:1.28rem; margin:0 0 .2em; }
.quickbar__lead p{ margin:0; font-size:.9rem; color:var(--muted); }
.quickbar__field{ min-width:0; }
.quickbar .choice label{ padding:12px 6px; }
.quickbar__btn{ white-space:nowrap; }

@media (max-width:1080px){
  .quickbar__inner{ grid-template-columns:1fr 1fr; }
  .quickbar__lead{ grid-column:1 / -1; }
  .quickbar__btn{ grid-column:1 / -1; }
}
@media (max-width:640px){
  .quickbar__inner{ grid-template-columns:1fr; gap:16px; }
}

/* ---------- Kopfbereich kompakter, damit die Fotos sofort sichtbar sind ---------- */
.hero{ padding-block:clamp(32px,3.5vw,56px) clamp(40px,5vw,72px); }
.hero h1{ font-size:clamp(2.1rem, 1.2rem + 2.6vw, 3.4rem); }
.hero__lead{ max-width:44ch; }
.hero__usps{ margin:1.3rem 0 1.6rem; }
.hero__proof{ margin-top:1.6rem; padding-top:1.2rem; }

/* Navigation: mit dem zusaetzlichen Punkt "Pferd" wird die Leiste zu breit
   und bricht um. Deshalb enger setzen und frueher aufs Menue umschalten. */
.nav{ gap:18px; }
.nav__links a{ padding:9px 11px; font-size:.94rem; white-space:nowrap; }
@media (max-width:1180px){
  .nav__toggle{ display:inline-flex; }
  .nav__links{
    position:fixed; inset:calc(var(--nav-h)) 0 auto 0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:#fff; border-bottom:1px solid var(--line);
    padding:16px 24px 26px; box-shadow:var(--sh-3);
    max-height:calc(100dvh - var(--nav-h)); overflow:auto;
    transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .18s ease, transform .18s ease;
  }
  .nav__links.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav__links a{ padding:14px 12px; font-size:1.05rem; border-radius:12px; }
  .nav__cta .btn--ghost{ display:none; }
}

/* Fotos bekommen mehr Raum als die Textspalte */
.hero__grid{ grid-template-columns:1fr 1.08fr; }

/* Auf schmalen Displays stehen die Tiere ueber dem Text — dort entscheidet
   sich in den ersten zwei Sekunden, ob jemand bleibt. */
@media (max-width:980px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__media{ order:-1; max-width:none; margin:0 0 6px; }
}

/* Auf Tablets die Fotogruppe begrenzen, sonst rutscht der Text zu weit nach unten */
@media (max-width:980px) and (min-width:641px){
  .hero__media{ max-width:560px; }
}

/* Vier Auswahlkacheln (nur beim Pferd: OP, Kompakt, Premium, Haftpflicht) */
.choice--4{ grid-template-columns:repeat(2,1fr); }
@media (min-width:900px){ .choice--4{ grid-template-columns:repeat(4,1fr); } }
@media (max-width:400px){ .choice--4{ grid-template-columns:1fr 1fr; } }

/* Kostenabschnitt: drei Tierkarten oben, darunter zwei allgemeine.
   Fuenf gleich grosse Karten ergaben in jedem Raster eine unschoene Luecke. */
.kosten-zwischen{
  margin:clamp(34px,4vw,52px) 0 20px;
  font-size:1.1rem; color:var(--muted); font-weight:700;
  text-align:center;
}
.kosten-allgemein{ max-width:760px; margin-inline:auto; }

/* ==========================================================================
   BEGLEITER
   Ein kleines rundes Foto, das beim Scrollen mitläuft und das Tier wechselt.
   Bewusst zurückhaltend: klein, am Rand, mit ruhigem Übergang — es soll
   herzlich wirken, nicht ablenken.
   ========================================================================== */
.begleiter{
  position:fixed; left:20px; bottom:20px; z-index:95;
  opacity:0; transform:translateY(14px) scale(.9);
  transition:opacity .45s ease, transform .45s cubic-bezier(.2,.8,.3,1);
  pointer-events:none;
}
.begleiter.is-da{ opacity:1; transform:none; pointer-events:auto; }

.begleiter__link{ display:flex; align-items:center; gap:10px; text-decoration:none; }

.begleiter__pic{
  width:62px; height:62px; flex:0 0 62px;
  border-radius:50%; overflow:hidden; display:block;
  border:3px solid #fff;
  box-shadow:var(--sh-3);
  background:var(--brand-50);
}
.begleiter__pic img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:opacity .35s ease;
}
.begleiter.is-wechsel .begleiter__pic img{ opacity:0; }

.begleiter__bubble{
  order:-1;
  max-width:0; overflow:hidden; white-space:nowrap;
  background:#fff; color:var(--ink);
  font-family:var(--ff-head); font-weight:700; font-size:.86rem;
  border-radius:var(--pill); box-shadow:var(--sh-2);
  padding:0; opacity:0;
  transition:max-width .45s cubic-bezier(.2,.8,.3,1), padding .35s ease, opacity .3s ease;
}
.begleiter.is-offen .begleiter__bubble{
  max-width:230px; padding:10px 16px; opacity:1;
}

/* Sanftes Wippen, damit es lebendig wirkt — sehr dezent */
@media (prefers-reduced-motion:no-preference){
  .begleiter.is-da .begleiter__pic{ animation:begleiterWippen 4.5s ease-in-out infinite; }
}
@keyframes begleiterWippen{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-4px) rotate(-2deg); }
}

/* Unter 641 px sitzt dort die feste Aktionsleiste — dann kein Begleiter */
@media (max-width:640px){ .begleiter{ display:none; } }

/* Pfote, die auf dem Lesefortschritt mitläuft */
.progress__bar{ position:relative; }
.progress__paw{
  position:absolute; right:0; top:-6px;
  width:16px; height:16px; color:var(--accent);
  filter:drop-shadow(0 1px 2px rgba(10,58,114,.35));
}
.progress__paw svg{ width:100%; height:100%; }
@media (prefers-reduced-motion:reduce){
  .begleiter{ transition:none; }
  .begleiter.is-da .begleiter__pic{ animation:none; }
}

/* Textspalte in Aufzaehlungen muss schrumpfen duerfen — sonst sprengen lange
   Woerter wie "Vermoegensschaeden" auf schmalen Displays die Karte. */
.tile-list li > span{ min-width:0; overflow-wrap:break-word; }
.tile-list li{ min-width:0; }

/* Der Fortschrittsbalken behaelt eine Mindestbreite, damit die Pfote am
   Seitenanfang nicht links ausserhalb des Bildschirms sitzt. */
.progress__bar{ min-width:16px; }

/* Altersregler auf sehr schmalen Displays: Regler und Wert duerfen umbrechen */
input[type="range"]{ min-width:0; flex:1 1 120px; }
.fieldset{ min-width:0; }
@media (max-width:430px){
  .slider-row{ flex-wrap:wrap; gap:10px; }
  .slider-val{ min-width:0; width:100%; }
}

/* Endzustand ohne Übergang festschreiben.
   Die Fotos werden über eine Deckkraft-Animation eingeblendet. Läuft dieser
   Übergang aus irgendeinem Grund nicht — etwa weil der Tab im Hintergrund
   liegt oder der Browser Animationen unterdrückt —, bliebe das Bild
   unsichtbar und die Illustration stehen. Deshalb setzt das Skript kurz
   nach dem Laden zusätzlich diese Klasse. */
/* Nur die Sichtbarkeit wird hart festgeschrieben. transform bleibt frei —
   sonst wuerde ein !important jede CSS-Animation unterdruecken, und genau
   das hat die Bildbewegung ausgeschaltet. */
.ph.is-settled .ph__img{ opacity:1 !important; }
.ph.is-settled .ph__ill{ display:none !important; }
.cta-band__bg.ph.is-settled .ph__img{ opacity:.26 !important; }

/* ==========================================================================
   BILDBAND
   Ein Foto über die volle Breite, das oben und unten weich in die Seite
   ausläuft. Kein Rahmen, kein Radius, kein Schatten — das Bild soll mit der
   Seite verschmelzen statt darauf zu liegen.
   Technik: eine Maske blendet die Ober- und Unterkante zu Transparenz aus.
   Die Hintergrundfarbe des Bandes muss zur angrenzenden Sektion passen.
   ========================================================================== */
.bildband.ph{
  border:0;
  border-radius:0;
  aspect-ratio:auto;
  height:clamp(260px, 30vw, 440px);
  background:var(--surface);
  isolation:auto;
}
.bildband--auf-creme.ph{ background:var(--cream); }

.bildband .ph__img{
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%);
  object-position:center 42%;
  /* Kein Anfangs-Zoom im Band, aber die Parallaxe (--ph-y) bleibt moeglich. */
  --ph-s:1;
}
.bildband.is-loaded .ph__img{ --ph-s:1; }

/* Die Illustration wäre hier fehl am Platz — das Band bleibt leer, bis das
   Foto da ist. */
.bildband .ph__ill{ display:none; }

/* Galerie weicher: die Kacheln sollen wie Fotos wirken, nicht wie Karten */
.helden .ph{ border-color:transparent; box-shadow:0 6px 20px -12px rgba(36,29,22,.30); }

/* ==========================================================================
   ARBEITSSEITEN: keine festen Überlagerungen
   Auf Seiten mit einem Formular, das bedient werden muss (Beitragsrechner,
   Kontakt), darf nichts fest über dem Inhalt liegen. Die untere
   Aktionsleiste verdeckte auf dem Handy sonst genau die Bedienelemente —
   ein Tippen auf "Kranken Kompakt" landete auf "Beitrag berechnen".
   Der Aufruf ist auf diesen Seiten ohnehin doppelt.
   ========================================================================== */
@media (max-width:640px){
  body:has(#rechner) .mobile-cta,
  body:has(form[data-demo-form]) .mobile-cta{ display:none; }
  body:has(#rechner),
  body:has(form[data-demo-form]){ padding-bottom:0; }
}

/* ==========================================================================
   FOTOS OHNE RAHMEN
   Die Galerie verliert Karton-Optik: kein Radius, kein Schatten, kaum Fuge.
   Die Bilder stossen fast aneinander und wirken als zusammenhaengende Wand.
   ========================================================================== */
.helden{ gap:6px; }
.helden .ph{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:var(--brand-50);
}
@media (max-width:560px){ .helden{ gap:5px; } }

/* Langsames Heranfahren, solange das Bild im Blick ist — sehr dezent.
   Es soll leben, nicht wackeln. */
@media (prefers-reduced-motion:no-preference){
  .helden .ph.is-settled .ph__img,
  .bildband.is-settled .ph__img{
    animation:langsamNah 16s ease-in-out infinite alternate;
  }
  .helden .ph:nth-child(even).is-settled .ph__img{ animation-duration:19s; animation-delay:-5s; }
  .helden .ph:nth-child(3n).is-settled .ph__img{ animation-duration:22s; animation-delay:-9s; }
}
@keyframes langsamNah{
  /* Der Versatz aus der Parallaxe (--ph-y) muss hier mitgefuehrt werden.
     Eine laufende Animation ueberschreibt jede normale transform-Angabe —
     stuende hier nur scale(), waere die Parallaxe auf genau den Bildern
     wirkungslos, die diese Animation tragen. */
  from{ transform:translate3d(0, var(--ph-y, 0px), 0) scale(1); }
  to  { transform:translate3d(0, var(--ph-y, 0px), 0) scale(1.08); }
}

/* Beim Ueberfahren tritt das Bild kurz hervor */
@media (hover:hover){
  .helden .ph{ transition:transform .5s cubic-bezier(.2,.8,.3,1), z-index 0s; position:relative; }
  .helden .ph:hover{ transform:scale(1.03); z-index:2; box-shadow:0 20px 50px -22px rgba(10,58,114,.55); }
}

/* Bildbaender bekommen zusaetzlich einen weichen seitlichen Auslauf */
.bildband .ph__img{
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 20%, #000 80%, transparent 100%),
    linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* ==========================================================================
   KOPFBEREICH: FOTOS OHNE RAHMEN
   Rand, Radius und Schatten fallen weg. Die Bilder lösen sich an ihren
   Aussenkanten in den Seitenhintergrund auf, statt als Karten darauf zu
   liegen. Sie sind ausserdem grösser und bewegen sich leicht.
   ========================================================================== */
.hero__media{ gap:10px; }

.hero__pic.ph{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:none;
  overflow:visible;
}
.hero__pic .ph__ill{ display:none; }

.hero__pic .ph__img{
  border-radius:0;
}

/* Grosses Foto: loest sich nach links und unten auf, oben und rechts
   nur leicht — dort grenzt es an den Rand des Kopfbereichs. */
.hero__pic--main .ph__img{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 15%, #000 94%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 7%, #000 80%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Kleine Fotos: loesen sich an allen vier Seiten auf, damit kein Rand
   uebrig bleibt, der wie ein Rahmen aussieht. */
.hero__pic--side .ph__img{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 87%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}

/* Sanftes Schweben — deutlich sichtbar, aber ruhig */
@media (prefers-reduced-motion:no-preference){
  .hero__pic--main.is-settled .ph__img{ animation:schweben 9s ease-in-out infinite; }
  .hero__pic--side:nth-of-type(2).is-settled .ph__img{ animation:schweben 7.5s ease-in-out infinite; animation-delay:-2.5s; }
  .hero__pic--side:nth-of-type(3).is-settled .ph__img{ animation:schweben 8.5s ease-in-out infinite; animation-delay:-5s; }
}
@keyframes schweben{
  /* Wie bei langsamNah muss der Parallaxe-Versatz (--ph-y) mitgefuehrt
     werden: Eine laufende Animation schlaegt jede normale transform-Angabe. */
  0%,100%{ transform:translate3d(0, var(--ph-y, 0px), 0) scale(1); }
  50%    { transform:translate3d(0, calc(var(--ph-y, 0px) - 17px), 0) scale(1.035); }
}

/* Auch die Fotos in den Kopfbereichen der Unterseiten ohne Rahmen —
   gleiche Behandlung wie auf der Startseite. */
.page-hero .ph{
  border:0;
  border-radius:0;
  box-shadow:none;
  background:none;
}
.page-hero .ph__ill{ display:none; }
.page-hero .ph__img{
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(180deg, #000 0%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-composite:intersect;
}
@media (prefers-reduced-motion:no-preference){
  .page-hero .ph.is-settled .ph__img{ animation:schweben 10s ease-in-out infinite; }
}

/* ==========================================================================
   BILDSTIMMUNG
   Die Fotos stammen von verschiedenen Fotografen mit verschiedenem Licht.
   Nebeneinander wirkt das unruhig. Eine gemeinsame, sehr zurückhaltende
   Farbstimmung zieht sie zu einer Familie zusammen: eine Spur wärmer, eine
   Spur weicher im Kontrast. Es soll nicht nach Filter aussehen, sondern
   danach, als hätte jemand alle Bilder am selben Nachmittag gemacht.
   ========================================================================== */
.ph__img{
  /* Nur ein Hauch, damit die Bilder zueinander finden. Die Waerme kommt
     jetzt von der Seite selbst, nicht von einem Filter ueber den Fotos. */
  filter:saturate(1.03) contrast(.99);
}

/* Warmer Hauch über jedem Foto, der die kühlen Bilder anwärmt */
.ph::after{
  content:"";
  position:absolute; inset:0; z-index:3;
  pointer-events:none;
  background:linear-gradient(160deg, rgba(255,205,155,.07), rgba(255,175,120,.05));
  mix-blend-mode:soft-light;
  opacity:0;
  transition:opacity .8s ease;
}
.ph.is-loaded::after{ opacity:1; }
/* Beim Abschluss-Hintergrund und in Bildbändern nicht zusätzlich abdunkeln */
.cta-band__bg.ph::after{ display:none; }

/* Der warme Schleier ist ein Rechteck. Bei Bildern, die weich auslaufen,
   würde er genau die Kante zurückbringen, die dort verschwinden soll.
   Deshalb nur auf den Bildern der Galerie, die klare Ränder haben. */
.hero__pic::after,
.page-hero .ph::after,
.bildband::after{ display:none; }

/* Zwei Schutzarten nebeneinander (Katze: OP-Schutz und Krankenvollschutz;
   bei Hund und Pferd kommt die Haftpflicht als dritte Spalte dazu). */
.choice--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:520px){ .choice--2{ grid-template-columns:1fr; } }

/* Wegwerf-Falle: fuer Menschen unsichtbar, aber nicht per display:none, weil
   manche Bots genau darauf achten. Sie liegt ausserhalb des Sichtfelds. */
.honigtopf{
  position:absolute;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}
/* Fehlermeldung des Formularversands */
.form-fehler{
  margin:14px 0 0;
  padding:12px 14px;
  border-radius:12px;
  background:#FDECEA;
  color:#8A1C13;
  font-size:.92rem;
}