/* =====================================================================
   kosten.css  —  Kostenseiten (klickbare Koerperzonen). Bestehende CI,
   Fonts, Bausteine wiederverwendet. Pfade root-relativ (/assets ...),
   damit sie aus /kosten/<tier>/ und im Deploy-Root gleich aufloesen.
   ===================================================================== */
@font-face { font-family:'Anton'; font-style:normal; font-weight:400; font-display:swap; src:url('/assets/fonts/anton-regular.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400 700; font-display:swap; src:url('/assets/fonts/inter-regular.woff2') format('woff2'); }

:root { --navy:#2d3e9e; --orange:#c97b28; --cyan:#4ab5e8; --bg:#faf8f4; --ink:#1d2a63; }
* { margin:0; padding:0; box-sizing:border-box; }
body { font-family:'Inter',sans-serif; background:var(--bg); color:var(--ink); line-height:1.7; }
.wrap { max-width:1080px; margin:0 auto; padding:32px 20px 96px; }
.back { display:inline-block; margin-bottom:20px; font-size:14px; font-weight:600; color:var(--orange); text-decoration:none; }
.back:hover { text-decoration:underline; }

.k-label { font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--orange); margin-bottom:12px; }
.k-h1 { font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400; font-size:clamp(34px,6vw,64px); line-height:1.04; text-transform:uppercase; letter-spacing:-.01em; color:var(--ink); margin-bottom:14px; }
.k-intro { font-size:clamp(15.5px,1.9vw,18px); max-width:640px; margin-bottom:8px; }
.k-hint { font-size:13.5px; color:#5a648f; margin-bottom:28px; }
.k-hint-vis { font-size:13px; color:#5a648f; margin-bottom:28px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }

/* Buehne: Figur + Overlay links, Seitenspalte rechts (Desktop) */
.k-stage { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:34px; align-items:start; }
@media (max-width:800px){ .k-stage { grid-template-columns:1fr; gap:22px; } }

.k-figwrap { position:relative; width:100%; max-width:460px; margin:0 auto; }
.k-figwrap img { display:block; width:100%; height:auto; user-select:none; -webkit-user-drag:none; }

/* Runde Marker im Zentrum der (unsichtbaren) Zonen */
.k-marker { position:absolute; transform:translate(-50%,-50%); width:32px; height:32px; padding:0;
  border:2px solid #fff; border-radius:50%; background:var(--orange); color:#fff;
  box-shadow:0 2px 6px rgba(0,0,0,.35); cursor:pointer; z-index:2;
  display:flex; align-items:center; justify-content:center; }
.k-marker::before { content:''; position:absolute; left:50%; top:50%; width:var(--hit,44px); height:var(--hit,44px);
  transform:translate(-50%,-50%); border-radius:50%; }   /* Trefferflaeche (44px, unter 390px kleiner) */
.k-marker:focus-visible { outline:3px solid var(--navy); outline-offset:2px; }
.k-marker .k-check { width:18px; height:18px; opacity:0; pointer-events:none; }
.k-marker.on { background:var(--navy); border-color:#fff; }
.k-marker.on .k-check { opacity:1; }

/* Vorschaukarte an der Zone (nur Hover-/Fokus-Geraete) */
.k-preview { position:absolute; top:0; left:0; z-index:5; width:min(240px,72vw); background:#fff;
  border:1px solid #e6e2d8; border-left:4px solid var(--cyan); border-radius:12px;
  box-shadow:0 8px 24px rgba(29,42,99,.18); padding:12px 14px; pointer-events:none;
  opacity:0; transition:opacity 120ms ease; }
.k-preview.show { opacity:1; }
.k-preview .kp-stelle { font-size:11.5px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); }
.k-preview .kp-titel { font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400; font-size:16px; text-transform:uppercase; color:var(--ink); margin:2px 0 4px; }
.k-preview .kp-text { font-size:13px; color:#4a4f6b; margin-bottom:6px; line-height:1.5; }
.k-preview .kp-preis { font-family:'Anton',sans-serif; font-weight: 400; font-synthesis: none; font-size:18px; color:var(--navy); }
.k-preview .kp-preis.folgt { color:#8a90b0; font-size:15px; }
@media (hover:none){ .k-preview { display:none !important; } }

/* Einmaliger Puls, sobald die Grafik erstmals sichtbar wird */
@media (prefers-reduced-motion:no-preference){
  .k-figwrap.pulse .k-marker { animation:k-pulse 1.2s ease-out 1; }
  @keyframes k-pulse {
    0%   { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 0 rgba(201,123,40,.55); }
    70%  { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 14px rgba(201,123,40,0); }
    100% { box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 0 rgba(201,123,40,0); }
  }
}

/* Seitenspalte: Liste + Zuruecksetzen + Hinweis + Funnel */
.k-side { min-width:0; }
.k-empty { font-size:13.5px; color:#8a90b0; }
.k-reset { margin-top:12px; display:inline-flex; align-items:center; gap:7px; background:none; border:1.5px solid #cbd0e8;
  color:var(--ink); border-radius:10px; padding:8px 14px; font:inherit; font-size:14px; font-weight:600; cursor:pointer; }
.k-reset:hover { border-color:var(--navy); }
.k-reset[hidden]{ display:none; }

.k-cards { margin-top:0; display:flex; flex-direction:column; gap:14px; }
.k-card { border:1px solid #e6e2d8; border-left:4px solid var(--cyan); border-radius:12px; background:#fff; padding:16px 18px; position:relative; }
.k-card h3 { font-family:'Anton',sans-serif; font-synthesis: none; font-weight:400; font-size:19px; letter-spacing:.01em; text-transform:uppercase; color:var(--ink); margin-bottom:2px; padding-right:26px; }
.k-card .k-stelle { font-size:12px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--orange); margin-bottom:8px; }
.k-card p { font-size:14.5px; margin-bottom:10px; }
.k-labels { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:10px; }
.k-lab { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:20px; }
.k-lab-lauf { background:#2d3e9e; color:#fff; }
.k-lab-wied { background:#eee9df; color:#5a648f; }
.k-card .k-preis { font-family:'Anton',sans-serif; font-weight: 400; font-synthesis: none; font-size:24px; color:var(--navy); letter-spacing:.01em; }
.k-card .k-preis.folgt { color:#8a90b0; font-size:18px; }
.k-card .k-got { display:block; margin-top:8px; font-size:11.5px; color:#7a809f; }
.k-card .k-remove { position:absolute; top:12px; right:12px; width:24px; height:24px; border:none; background:#f0eee7; border-radius:50%; cursor:pointer; color:#5a648f; font-size:15px; line-height:1; }
.k-card .k-remove:hover { background:#e3e0d6; color:var(--ink); }

/* Fester GOT-Hinweis unter der Liste */
.k-note { margin-top:16px; font-size:12.5px; color:#5a648f; line-height:1.55; }

/* Funnel-Einstieg: dauerhaft sichtbar, Route mit vorgewaehlter Tierart. */
.k-funnel { margin-top:18px; }
/* Gleiche Optik wie #fvSubmit auf der Startseite: gefuellt, Signalfarbe Cyan,
   Navy-Text, volle Breite (bis 420px), eine Stufe groesser. */
.k-funnel-btn { display:block; width:100%; max-width:420px; box-sizing:border-box; text-align:center;
  font-family:inherit; font-weight:700; font-size:18px;
  background:#4ab5e8; color:#14225f; text-decoration:none;
  border:1.5px solid #4ab5e8; border-radius:12px; padding:15px 20px; }
.k-funnel-btn:hover { background:#63c2ef; border-color:#63c2ef; }

/* P3: Auf Mobil (<768px) klebt der CTA am unteren Rand. Der Container haengt
   dort per JS in .wrap, deshalb spannt der sticky-Bezug die ganze Seite; am
   Seitenende geht er von selbst in den Fluss ueber (ein Element, kein Doppel).
   position:sticky nutzt den Scrollport-Rand ohne vh -> kein Sprung beim Ein-/
   Ausblenden der iOS-Adressleiste. safe-area-inset-bottom fuer die Homebar. */
@media (max-width:767px){
  .k-funnel { position:sticky; bottom:calc(12px + env(safe-area-inset-bottom, 0px)); z-index:30; margin:22px 0 0; }
  .k-funnel-btn { max-width:none; box-shadow:0 6px 20px rgba(29,42,99,.22); }
}

/* Rechtlicher Hinweis (einmal je Seite, abgesetzt) */
.k-disclaimer { margin-top:34px; padding:16px 18px; border:1px dashed #cbd0e8; border-radius:12px; font-size:13px; color:#5a648f; max-width:760px; }


/* Footer (gleiche Rechtslinks wie Startseite) */
.k-footer { margin-top:56px; padding-top:22px; border-top:1px solid #e6e2d8; font-size:13.5px; color:#5a648f; }
.k-footer a { color:var(--navy); }