/* =========================================================================
   /preise/, Stufe 100k (11.10.2026). Liegt ueber start-100k.css und
   unterseite-100k.css. Pakete im dunklen Panel wie auf der Startseite,
   Gruppen der Vergleichstabelle mit Glas-Icon statt Versalzeile.
   ========================================================================= */

/* Panel: deutlich Luft zum lila Kopf, damit die beiden dunklen Flaechen
   nicht zu einem Block verschmelzen. Karten, Zusaetze, Minuten bleiben hell. */
.u-preise.sektion { padding-top: 72px; }
.pv-panel .pr-schalter { margin-bottom: 36px; }

/* Vergleich: Gruppenzeile ruhig, Glas-Icon in fester Box, keine Versalien. */
.u-tabelle .pv-gruppe th { height: 56px; padding-top: 0; font: 600 15.5px/1.2 Outfit, sans-serif; letter-spacing: -.005em; text-transform: none; color: var(--ink);
  background: linear-gradient(90deg, var(--tint-weak), var(--paper) 70%); }
.u-tabelle .pv-gruppe th::before { content: none; }
.pv-glas { display: inline-grid; place-items: center; width: 36px; height: 36px; margin-right: 12px; vertical-align: middle; border-radius: 10px;
  background: var(--paper); box-shadow: 0 8px 18px -12px rgba(76, 29, 149, .5), inset 0 0 0 1px var(--line); }
.pv-glas img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(76, 29, 149, .22)); }

@media (max-width: 620px) {
  .u-preise.sektion { padding-top: 40px; }
  .pv-panel .pr-schalter { margin-bottom: 24px; }
  .u-tabelle .pv-gruppe th { height: 52px; font-size: 15px; }
  .pv-glas { width: 32px; height: 32px; margin-right: 10px; }
  .pv-glas img { width: 23px; height: 23px; }
}

/* Schlusszeile am Handy: Glastelefon stiess an die Ueberschrift. */
@media (max-width: 620px) {
  .schluss-wrap { padding-top: 76px; }
  /* Umschalter am Handy mit vollen 44 px Tippflaeche. */
  .pv-wahl, .pv-panel .pr-schalter .fl-segmente { height: auto; }
  .pv-wahl button, .pv-panel .pr-schalter .fl-segmente button { min-height: 44px; }
}

/* Kopf hell als Text-Kopf (Tobias 11.10.2026): die Preise im dunklen Panel
   sind der eine laute Block, darueber kein zweites Dunkel. */
.u-hero--hell .u-buehne { color: var(--ink); border: 1px solid var(--rahmen);
  background: radial-gradient(ellipse 55% 80% at 100% 0%, rgba(108, 43, 242, .10), transparent 70%), var(--warm); }
.u-hero--hell .u-buehne::after { display: none; }
.u-hero--hell .u-punkte { background-image: linear-gradient(color-mix(in srgb, #6C2BF2 9%, #F6F4F1) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, #6C2BF2 9%, #F6F4F1) 1px, transparent 1px); }
.u-hero--hell h1 { color: var(--ink); }
.u-hero--hell h1 b { color: var(--accent); }
.u-hero--hell .u-lead { color: var(--ink-2); }
.u-hero--hell .breadcrumb, .u-hero--hell .breadcrumb span[aria-hidden] { color: var(--ink-3); }
.u-hero--hell .breadcrumb a { color: var(--ink-2); }
.u-hero--hell .breadcrumb a:hover { color: var(--ink); }
.u-hero--hell .u-stand { background: var(--paper); border-color: var(--rahmen); color: var(--ink-2); }
.u-hero--hell .btn-leise { background: var(--paper); color: var(--ink); border-color: var(--line-mid); }
.u-hero--hell .btn-leise:hover { border-color: var(--line-stark); }
.uh-hell-glas { width: 150px; right: 9%; top: 50%; margin-top: -105px; rotate: -8deg; filter: drop-shadow(0 26px 30px rgba(76, 29, 149, .3)); }
@media (max-width: 980px) { .uh-hell-glas { width: 96px; right: 24px; top: 32px; margin-top: 0; } }
@media (max-width: 620px) { .uh-hell-glas { width: 56px; right: 14px; top: 18px; } .u-hero--hell h1 { padding-right: 40px; } }