/* ===== Feinschliff: ruhiger, klarer, besser lesbar ===== */
/* Überschriften: klar statt verschwommen */
h2{ text-shadow:none; }
h2 em{ filter:drop-shadow(0 0 10px rgba(255,255,255,0.18)); }
.hb-title{ text-shadow:0 0 40px rgba(255,255,255,0.18); }
.hb-title em{ filter:drop-shadow(0 0 12px rgba(255,255,255,0.22)); }
.lede .wd.lit{ text-shadow:none; }

/* Kleine Überschriften: feine Pille ohne Leuchten */
.eyebrow{ text-shadow:none; }
main .eyebrow, .page .eyebrow:not(.card .eyebrow){ color:#e4e4e7; background:rgba(255,255,255,0.04); box-shadow:0 0 0 1px rgba(255,255,255,0.16) !important; }
main .eyebrow::before, .page .eyebrow:not(.card .eyebrow)::before{ width:6px; height:6px; box-shadow:none; background:#d4d4d8; }

/* In den Kästchen: Kategorie leise, Titel klar */
.card .eyebrow{ color:#a1a1aa; font-weight:500; }
.card .eyebrow::before{ box-shadow:none; background:#71717a; }
.card.featured .eyebrow{ color:#52525b; }
.card.featured .eyebrow::before{ background:#a1a1aa; }
.card h3{ text-shadow:none; color:#fafafa; }
.price{ text-shadow:none !important; }
.fact b{ text-shadow:0 0 30px rgba(255,255,255,0.12); }

/* "Mehr erfahren": dezent, wird erst beim Zeigen hell */
.card .more, .step .more{
  font-family:var(--font-body) !important; font-size:0.86rem !important; font-weight:500; letter-spacing:0.01em; line-height:1.4;
  color:#a1a1aa !important; -webkit-text-stroke:0 !important; text-shadow:none !important;
  display:inline-flex; align-items:center; gap:0.4rem; margin-bottom:0; transition:color 250ms;
}
.step .more{ margin-top:0.8rem; }
.card .more i, .step .more i{ font-style:normal; display:inline-block; transition:transform 250ms cubic-bezier(.2,1.4,.4,1); }
.card.clickable:hover .more, .step.clickable:hover .more,
.card.clickable:focus-visible .more, .step.clickable:focus-visible .more{ color:#fafafa !important; }
.step.clickable:hover .more i{ transform:translateX(6px); }
.card.featured .more{ color:#52525b !important; }
.card.featured.clickable:hover .more{ color:#09090b !important; }

/* Kästchen: Lichtrand nur noch als leiser Schimmer */
.card:not(.featured)::after{ background:conic-gradient(from var(--ang), transparent 0deg, transparent 250deg, rgba(255,255,255,0.32) 310deg, transparent 360deg) !important; }
.card{ box-shadow:0 0 0 1px rgba(255,255,255,0.1) !important; transition:box-shadow 300ms, transform 300ms; }
.card.clickable:hover{ box-shadow:0 0 0 1px rgba(255,255,255,0.28), 0 24px 60px -30px rgba(255,255,255,0.25) !important; }

/* Detail-Fenster ruhiger */
.dt-box{ box-shadow:0 0 0 1px rgba(255,255,255,0.14), 0 40px 120px -40px rgba(0,0,0,0.9); }
.dt-box h3{ text-shadow:none; }
.dt-box li::before{ width:6px; height:6px; box-shadow:none; background:#a1a1aa; }

/* KI-Knopf: kein pulsierender Lichtkranz mehr */
.vc-fab{ animation:none !important; box-shadow:0 0 0 1px rgba(255,255,255,0.12), 0 14px 40px -14px rgba(0,0,0,0.8) !important; }

/* Kleine Details */
::selection{ background:#fafafa; color:#09090b; }
:focus-visible{ outline:2px solid #fafafa; outline-offset:3px; border-radius:6px; }
.navlinks label:focus-visible, .brand:focus-visible{ outline-offset:2px; }
a[href^="mailto:"], a[href^="tel:"]{ text-underline-offset:3px; }
img{ -webkit-user-drag:none; }

/* Oben: weicher dunkler Übergang, damit Text nicht hinter der Leiste durchscheint */
header::before{ content:""; position:absolute; left:0; right:0; top:0; height:calc(100% + 28px); background:linear-gradient(#09090b 0%, rgba(9,9,11,0.92) 45%, rgba(9,9,11,0) 100%); pointer-events:none; z-index:-1; }
/* Platz unten, damit der KI-Knopf nichts im Fußbereich verdeckt */
footer{ padding-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }