/* ==========================================================================
   Preisblock auf den Instrumentseiten (Adrian 29.10.): Preise stehen direkt auf
   /gesangsunterricht, /klavierunterricht, /gitarrenunterricht, Sprunglink im Hero.
   Tabelle = gleiche Zahlen und Darstellung wie /preise (css/seiten/preise.css).
   Preisaenderung: /preise UND die drei Instrumentseiten nachziehen.
   ========================================================================== */
#preise { scroll-margin-top: calc(10px - var(--section-pad)); }  /* addiert sich mit html{scroll-padding-top:90px}: Eyebrow landet bei ~100 px */
.preis-block .eyebrow { color: var(--color-accent-d); }  /* Bronze dunkel: Bronze auf Sand nur 4,36:1 */
.preis-block-kopf { max-width: 720px; }
.preis-block-kopf h2 { margin: 14px 0 18px; }
.preis-block-kopf p { color: var(--color-text-2); }
.preis-block .tabelle-rahmen { margin-top: clamp(24px, 4vw, 40px); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); background: var(--color-surface); }
.preis-block .preis-tabelle { width: 100%; border-collapse: collapse; font-size: 1rem; color: var(--color-text-2); }
.preis-block .preis-tabelle thead th {
  padding: 18px 22px; text-align: left; font-family: var(--font-serif); font-weight: 500; font-size: 1.1875rem;
  color: var(--color-on-dark); background: var(--color-dark-2);
}
.preis-block .preis-tabelle tbody th, .preis-block .preis-tabelle td { padding: 20px 22px; text-align: left; vertical-align: top; border-top: 1px solid var(--color-border); }
.preis-block .preis-tabelle tbody th { width: 24%; font-family: var(--font-serif); font-weight: 500; font-size: 1.1875rem; color: var(--color-text); }
.preis-block .preis-tabelle .vorteil { display: block; margin-top: 4px; font-family: var(--font-sans); font-size: .9375rem; color: var(--color-accent-d); font-weight: 600; }
.preis-block .preis-tabelle td b { display: block; font-family: var(--font-serif); font-weight: 500; font-size: 1.375rem; color: var(--color-text); }
.preis-block .preis-tabelle tr.abo { background: var(--color-alt); }
.preis-block .preis-tabelle tr.abo th { box-shadow: inset 3px 0 0 var(--ci-bronze); }
.preis-block-fuss { max-width: 720px; margin-top: 24px; color: var(--color-text-2); }
.preis-block-cta { margin-top: 28px; }

/* Sprunglink im Hero */
.preis-sprung {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 4px;
  font-weight: 600; color: var(--color-accent-d); text-decoration: underline; text-underline-offset: 4px;
  text-decoration-thickness: 1px; transition: color var(--dur-fast) var(--ease);
}
.preis-sprung:hover { color: var(--color-text); }
.hero-gesang .preis-sprung { color: var(--color-on-dark-2); }
.hero-gesang .preis-sprung:hover { color: var(--color-on-dark); }
.hero-aktion .preis-sprung { margin-left: 18px; }

@media (max-width: 360px) {
  #preise { scroll-margin-top: calc(-40px - var(--section-pad)); }  /* kleine Handys: Eyebrow darf unter die Kopfzeile, Tabelle muss in den Blick */
}
@media (max-width: 899px) {
  .preis-block .tabelle-rahmen { background: none; box-shadow: none; border-radius: 0; overflow: visible; }
  .preis-block .preis-tabelle thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .preis-block .preis-tabelle, .preis-block .preis-tabelle tbody, .preis-block .preis-tabelle tr,
  .preis-block .preis-tabelle th, .preis-block .preis-tabelle td { display: block; width: 100%; }
  .preis-block .preis-tabelle tr { margin-bottom: 14px; border-radius: var(--radius); background: var(--color-surface); box-shadow: var(--shadow-md); overflow: hidden; }
  .preis-block .preis-tabelle tbody th { width: 100%; padding: 16px 18px 12px; border-top: 0; background: var(--color-dark-2); color: var(--color-on-dark); }
  .preis-block .preis-tabelle tbody th .vorteil { color: var(--color-on-dark-2); }
  .preis-block .preis-tabelle tr.abo th { box-shadow: none; }
  .preis-block .preis-tabelle tr.abo { background: var(--color-surface); box-shadow: var(--shadow-md), inset 0 0 0 2px var(--ci-bronze); }
  .preis-block .preis-tabelle td { padding: 12px 18px; display: grid; grid-template-columns: 96px 1fr; gap: 10px; }
  .preis-block .preis-tabelle td::before { content: attr(data-label); font-weight: 600; color: var(--color-text); }
  .preis-block .preis-tabelle td b { font-size: 1.25rem; }
  .hero-aktion .preis-sprung { margin: 0; }
  .preis-block-cta .btn { width: 100%; }
}