/* features.css — „Sternbilder“ */

/* ---------- Kopf ---------- */
.feat-hero{width:min(100% - 32px,var(--container));margin:0 auto;padding:150px 0 60px;display:grid;grid-template-columns:.95fr 1.05fr;gap:40px;align-items:center;min-height:92vh}
.feat-hero .lede{max-width:520px}
.sky-map{position:relative;height:560px}
.sky-map .coco-hero{position:absolute;left:50%;top:50%;width:min(250px,40%);translate:-50% -50%;z-index:2}
/* 🔑 Bubble rechtsbündig am Coco: bleibt auch bei schmalen Fenstern im Bild und unter der Navigation. */
.sky-map .coco-bubble{left:auto;right:-6%;top:2%;transform-origin:100% 100%;border-radius:18px 18px 4px 18px}
.constellations{position:absolute;inset:0}
/* 🔑 Breite und Lage rechnen zusammen: Ein Sternbild ragt nie über den Rand der Karte hinaus. */
.konst{--w:clamp(132px,30%,190px);position:absolute;left:min(var(--x),calc(100% - var(--w)));top:var(--y);width:var(--w);display:grid;justify-items:center;gap:6px;padding:10px;border-radius:18px;text-decoration:none;color:var(--ink-dim);transition:color .3s,background-color .3s,transform .5s var(--ease-out)}
.konst svg{width:100%;height:auto;overflow:visible}
.konst polyline{fill:none;stroke:rgba(232,201,133,.45);stroke-width:1.1;stroke-dasharray:100;stroke-linejoin:round;transition:stroke .3s}
.konst circle{fill:#fff6dc;filter:drop-shadow(0 0 4px rgba(255,236,190,.9))}
.konst span{font-family:'Cormorant Garamond',serif;font-size:21px;font-weight:600;font-style:italic;letter-spacing:.02em}
.konst:hover,.konst:focus-visible{color:var(--gold);background:rgba(232,201,133,.06);transform:translateY(-4px)}
.konst:hover polyline,.konst:focus-visible polyline{stroke:#F0D9A2}
.konst--hot span{color:var(--gold)}
/* Einflug: erst versteckt, wenn JS sicher läuft; features.js blendet sie ein und lässt opacity:1 stehen. */
html.js:not(.no-motion):not(.ruhig) .konst{opacity:0}

/* ---------- Kategorie-Leiste als Flugroute ---------- */
.cat-pillbar{position:sticky;top:92px;z-index:40;margin-top:10px;display:flex;justify-content:center;padding:0 16px}
.cat-pillbar-inner{position:relative;display:flex;gap:8px;max-width:100%;overflow-x:auto;scrollbar-width:none;padding:22px 10px 10px;border-radius:999px;background:rgba(7,11,28,.62);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.cat-pillbar-inner::-webkit-scrollbar{display:none}
/* --sw = volle Scrollbreite (setzt features.js): Die Linie läuft mit, wenn die Leiste mobil scrollt. */
.route-line{position:absolute;left:24px;top:11px;width:calc(var(--sw,100%) - 48px);border-top:1.5px dashed rgba(232,201,133,.4)}
.route-plane{position:absolute;top:2px;left:var(--x,40px);translate:-50% 0;color:var(--gold);font-size:15px;line-height:1;filter:drop-shadow(0 0 6px rgba(240,217,162,.8));transition:left .7s var(--ease-out)}
.pill{flex:0 0 auto;padding:9px 18px;border-radius:999px;border:1px solid rgba(255,255,255,.1);color:var(--ink-dim);font-size:13.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:color .25s,background-color .25s,border-color .25s}
.pill:hover{color:var(--ink);border-color:var(--line-strong)}
.pill.is-active{background:var(--gold-grad);color:#1B1406;border-color:transparent}

/* ---------- Kategorien ---------- */
/* 🔑 Sprungziel: html hat scroll-padding-top 100 px. Die klebende Leiste braucht bis ~155 px; die Sektion hat 120 px
   Luft oben, also landet die Überschrift knapp unter der Leiste (100 − 30 + 120 = 190 px). Kein zusätzlicher JS-Versatz. */
.cat-section{width:min(100% - 32px,var(--container));margin:0 auto;padding:120px 0 0;scroll-margin-top:-30px}
.cat-head{display:grid;grid-template-columns:170px 1fr;gap:28px;align-items:end;margin-bottom:40px}
.coco-cat{width:170px}
/* top:32%: Die Bubble öffnet nach oben; so bleibt sie nach einem Anker-Sprung unter der klebenden Leiste. */
.coco-cat .coco-bubble{left:78%;top:32%}
.cat-title{font-family:'Cormorant Garamond',serif;font-style:italic;font-weight:600;font-size:clamp(34px,4.4vw,58px);line-height:1.02;color:var(--ink);text-wrap:balance}
.cat-badge{display:inline-flex;align-items:center;gap:6px;margin-top:16px;padding:5px 14px;border:1px solid rgba(232,201,133,.45);border-radius:999px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.cat-badge::before{content:"✦"}
/* Das Alleinstellungsmerkmal hat einen Rahmen statt 120 px Luft: das Sprungziel rückt entsprechend nach unten. */
.cat-section--highlight{margin-top:120px;padding:60px clamp(20px,4vw,48px) 56px;border:1px solid var(--line-strong);border-radius:40px;background:linear-gradient(180deg,rgba(232,201,133,.08),rgba(7,11,28,.2) 70%);scroll-margin-top:30px}

/* ⚠️ Der Stempel startet vergrößert (scale 2.4) und ragt bei Karten am rechten Rand über das Fenster hinaus: ohne clip scrollt die Seite seitwärts.
   Nur das Raster wird beschnitten (nicht die Sektion), sonst schneidet es auch den Lichtschein von Coco ab. */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;overflow-x:clip}
.fcard{position:relative;padding:26px 24px;border-radius:var(--radius);background:var(--glass);border:1px solid var(--glass-line);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.fcard:hover{border-color:var(--line-strong);box-shadow:0 18px 50px rgba(0,0,0,.35)}
.fcard .top{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.fcard .emoji{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;font-size:22px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
.fcard h3{font-size:16.5px;font-weight:700}
.fcard p{color:var(--ink-dim);font-size:14px;line-height:1.6}
/* „Nur bei TravelMaster Go“ als Reisepass-Stempel */
.fcard:has(.only){padding-bottom:70px}
.fcard .only{position:absolute;right:18px;bottom:18px;display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:2px solid currentColor;border-radius:8px;outline:1px solid currentColor;outline-offset:2px;color:var(--gold);background:rgba(7,11,28,.55);font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;transform:rotate(-6deg)}
.fcard .only::before{content:"✦"}

.cta-final{width:min(100% - 32px,var(--container));margin:0 auto;padding:120px 0 40px}
.cta-final .cta-row{display:grid;justify-items:center;gap:14px}
.cta-sub{font-size:13px;color:var(--ink-mute);text-align:center}

@media (max-width:899px){
  .feat-hero{grid-template-columns:1fr;min-height:auto;padding-top:120px}
  .sky-map{height:auto}
  .sky-map .coco-hero{position:relative;left:auto;top:auto;translate:none;width:200px;margin:0 auto 20px}
  .constellations{position:static;display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .konst{position:static;width:auto}
  .grid{grid-template-columns:1fr 1fr}
  .cat-head{grid-template-columns:110px 1fr;gap:18px}
  .coco-cat{width:110px}
  /* Auf dem Handy sitzt Coco am linken Rand: Bubble linksbündig, damit sie nicht rechts aus dem Fenster ragt. */
  .coco-cat .coco-bubble{left:0;top:32%}
  .cat-pillbar{top:84px}
  .cat-section{scroll-margin-top:-38px}
  .cat-section--highlight{scroll-margin-top:22px}
}
@media (max-width:560px){
  .grid{grid-template-columns:1fr}
  /* 🔑 minmax(0,1fr): Sonst dehnt der Mindestinhalt (gesperrte Eyebrow, langes Wort) die Spalte über das Fenster hinaus. */
  .cat-head{grid-template-columns:88px minmax(0,1fr);gap:14px}
  .coco-cat{width:88px}
  .cat-head .eyebrow{letter-spacing:.16em}
  .cat-badge{max-width:100%;font-size:10px;letter-spacing:.04em;overflow-wrap:anywhere}
  .cat-section--highlight{padding-inline:16px}
}
/* Sehr schmal: Im Rahmen des Alleinstellungsmerkmals bekommt der Text die volle Breite, Coco sitzt darüber. */
@media (max-width:400px){
  .cat-section--highlight .cat-head{grid-template-columns:minmax(0,1fr);gap:8px}
  .cat-section--highlight .coco-cat{width:96px}
}

/* Verweis auf die Themenseite unter einer Kartengruppe (liegt außerhalb von .fcard: Wortgleich-Schutz der Karten bleibt). */
.thema-link{margin-top:22px}
.thema-link a{display:inline-flex;color:var(--gold);font-weight:600;font-size:14.5px;text-decoration:none}
.thema-link a:hover{text-decoration:underline;text-underline-offset:4px}