/* ============================================================================
   Gemeinsame Kachelleiste der Selbst-Checks (8 Werkzeuge, 2 Reihen zu je 4).
   Eine Stelle fuer alle acht Seiten. Angelegt 06.08.2026.
   Farbvariablen kommen aus dem Inline-CSS der jeweiligen Seite (identisch
   auf allen Seiten definiert, Muster vorsorge.html).
   ============================================================================ */

.tabs-section { background: linear-gradient(180deg, var(--cream) 0%, var(--cream-soft) 100%); padding: 56px 32px 22px; border-bottom: 1px solid var(--line); position: relative; overflow: hidden; }
.tabs-section::before { content: ""; position: absolute; top: -50%; left: 50%; width: 800px; height: 800px; transform: translateX(-50%); background: radial-gradient(circle, rgba(201, 173, 119, 0.08) 0%, transparent 60%); pointer-events: none; z-index: 0; }
.tabs-eyebrow { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; position: relative; z-index: 1; }

.tabs-container.tabs-grid-8 { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; position: relative; z-index: 1; }

.tabs-grid-8 .tab-card { background: var(--white); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px; text-decoration: none; display: flex; flex-direction: column; gap: 9px; transition: transform 0.5s var(--ease), box-shadow 0.5s var(--ease), border-color 0.5s var(--ease); position: relative; overflow: hidden; cursor: pointer; box-shadow: 0 2px 10px rgba(28, 49, 37, 0.04); }
.tabs-grid-8 .tab-card::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mist) 100%); opacity: 0; transition: opacity 0.5s var(--ease); z-index: 0; }
.tabs-grid-8 .tab-card > * { position: relative; z-index: 1; }
.tabs-grid-8 .tab-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(42, 74, 56, 0.13); border-color: var(--sage); }
.tabs-grid-8 .tab-card:hover::before { opacity: 0.04; }
.tabs-grid-8 .tab-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }

.tabs-grid-8 .tab-card.active { background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mist) 100%); border-color: var(--forest); color: var(--cream); box-shadow: 0 12px 32px rgba(42, 74, 56, 0.25); }
.tabs-grid-8 .tab-card.active::after { content: ""; position: absolute; top: -50px; right: -50px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(201, 173, 119, 0.25) 0%, transparent 60%); pointer-events: none; }

.tabs-grid-8 .tab-icon { width: 46px; height: 46px; border-radius: 12px; background: var(--cream-deep); display: flex; align-items: center; justify-content: center; transition: all 0.5s var(--ease); flex-shrink: 0; }
.tabs-grid-8 .tab-card.active .tab-icon { background: rgba(201, 173, 119, 0.18); }
.tabs-grid-8 .tab-icon svg { width: 25px; height: 25px; stroke: var(--forest); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: stroke 0.5s var(--ease); }
.tabs-grid-8 .tab-card.active .tab-icon svg { stroke: var(--gold-soft); }
.tabs-grid-8 .tab-card:not(.active):hover .tab-icon { transform: scale(1.08) rotate(-3deg); }

.tabs-grid-8 .tab-meta { display: flex; align-items: center; gap: 8px; font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); transition: color 0.5s var(--ease); }
.tabs-grid-8 .tab-card.active .tab-meta { color: var(--gold-soft); }
.tabs-grid-8 .tab-active-pill { background: var(--gold-soft); color: var(--forest-ink); padding: 3px 9px; border-radius: 100px; font-size: 9.5px; letter-spacing: 0.1em; display: inline-flex; align-items: center; gap: 5px; }
.tabs-grid-8 .tab-active-pill::before { content: ""; width: 5px; height: 5px; background: var(--forest-ink); border-radius: 50%; animation: cxTabPulse 2s ease-in-out infinite; }
@keyframes cxTabPulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } }

.tabs-grid-8 .tab-title { font-family: 'Fraunces', serif; font-weight: 500; font-size: 18.5px; line-height: 1.15; letter-spacing: -0.02em; color: var(--forest-ink); transition: color 0.5s var(--ease); }
.tabs-grid-8 .tab-card.active .tab-title { color: var(--cream); }
.tabs-grid-8 .tab-desc { font-size: 12.5px; line-height: 1.45; color: var(--muted); transition: color 0.5s var(--ease); }
.tabs-grid-8 .tab-card.active .tab-desc { color: rgba(248, 245, 238, 0.8); }
.tabs-grid-8 .tab-arrow { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--forest); transition: all 0.5s var(--ease); }
.tabs-grid-8 .tab-card.active .tab-arrow { color: var(--gold-soft); }
.tabs-grid-8 .tab-card.active .tab-arrow span { display: none; }
.tabs-grid-8 .tab-arrow::after { content: "→"; transition: transform 0.4s var(--ease); }
.tabs-grid-8 .tab-card:hover .tab-arrow::after { transform: translateX(4px); }

@media (max-width: 1040px) {
  .tabs-container.tabs-grid-8 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .tabs-section { padding: 32px 20px 18px; }
  .tabs-container.tabs-grid-8 { grid-template-columns: 1fr; gap: 12px; }
  .tabs-grid-8 .tab-card { padding: 18px 18px; }
  .tabs-grid-8 .tab-title { font-size: 18px; }
}

/* ============================================================================
   Gemeinsame Bedienbarkeit aller acht Selbst-Checks.
   Ergaenzt am 06.08.2026, nachdem eine Messung auf Handy und Tablet gezeigt
   hat, dass einzelne Bedienelemente unter der geforderten Trefferflaeche von
   44 mal 44 Punkt lagen. Die Regeln stehen hier zentral, damit sie nicht auf
   acht Seiten einzeln gepflegt werden muessen.
   ============================================================================ */

/* Schieberegler: die sichtbare Bahn bleibt schlank, die Trefferflaeche wird
   auf 44 Punkt gebracht. Der Hintergrund wird per background-clip nur auf die
   Bahn gezeichnet, damit die Optik unveraendert bleibt. */
input[type="range"].slider,
input[type="range"].cx-slider {
  height: 44px;
  padding: 19px 0;
  background-clip: content-box;
  box-sizing: border-box;
  cursor: pointer;
  touch-action: manipulation;
}

/* Zahlen-, Such- und Datumsfelder auf volle Trefferhoehe */
.selbstcheck-feld,
input[type="number"],
input[type="search"],
input[type="date"] {
  min-height: 44px;
  touch-action: manipulation;
}

/* Alle Bedienknoepfe der Checks */
#form-view button,
#result-view button,
.tabs-grid-8 .tab-card {
  touch-action: manipulation;
}

/* ============================================================================
   Kopfzeile auf schmalen Geraeten.
   Ergaenzt am 06.08.2026: Auf dem Handy schob der Knopf "Rezept bestellen"
   den Menue-Knopf aus dem Bild. Gemessen bei 390 Punkt Breite: Die Kopfzeile
   brauchte 449 Punkt, der Menue-Knopf sass bei 405 und war damit nicht mehr
   erreichbar. Weil der Seitenkoerper overflow-x: hidden hat, fiel das nicht
   als Ueberlauf auf, der Knopf war einfach weg.
   Die Startseite loest das seit jeher mit kleinerer Schrift; den Check-Seiten
   fehlte die Regel. Sie steht hier zentral fuer alle acht Seiten.
   ============================================================================ */
/* Der vorangestellte body-Selektor ist Absicht: Die acht Check-Seiten
   definieren ihre Kopfzeile in einem eingebetteten Stilblock, der NACH dieser
   Datei geladen wird. Bei gleicher Spezifitaet gewaenne er. Mit body davor
   gewinnt diese Regel, ohne dass irgendwo !important noetig ist und ohne
   dass acht Dateien einzeln angefasst werden muessen. */
@media (max-width: 520px) {
  body nav#nav { padding-left: 14px; padding-right: 14px; gap: 10px; }
  body nav#nav .logo { gap: 8px; }
  body nav#nav .logo-mark { width: 32px; height: 32px; font-size: 12px; }
  body nav#nav .logo-text .main { font-size: 15px; }
  body nav#nav .nav-cta { font-size: 12px; padding: 9px 14px; }
}
@media (max-width: 400px) {
  body nav#nav { padding-left: 10px; padding-right: 10px; gap: 8px; }
  body nav#nav .logo-mark { width: 30px; height: 30px; }
  body nav#nav .logo-text .main { font-size: 13.5px; }
  body nav#nav .nav-cta { font-size: 11.5px; padding: 8px 11px; }
}
@media (max-width: 340px) {
  body nav#nav .logo-text .main { font-size: 12.5px; }
  body nav#nav .nav-cta { font-size: 11px; padding: 8px 9px; }
}

/* Hinweisbalken der Aktualisierungs-Wache (check-common.js) */
.check-stale-banner { max-width: 920px; margin: 20px auto 0; padding: 14px 20px; background: linear-gradient(135deg, #FBF3E2 0%, #F7ECD4 100%); border: 1px solid var(--gold-soft); border-radius: 14px; font-size: 13.5px; color: #5A4A22; line-height: 1.6; display: flex; gap: 12px; align-items: flex-start; }
.check-stale-banner .stale-icon { flex-shrink: 0; font-size: 16px; line-height: 1.4; }

/* ============================================================================
   Navigationsleiste auf schmalen Geraeten. Ergaenzt am 06.08.2026, nachdem
   eine Messung bei 375 und 320 Punkt gezeigt hat, dass der Menue-Knopf aus
   dem Bild geschoben wurde. Die Startseite hat diese Verkleinerung seit jeher,
   den Check-Seiten fehlte sie.
   ============================================================================ */
@media (max-width: 600px) {
  nav#nav { gap: 10px; padding-left: 14px; padding-right: 14px; }
  nav#nav .nav-cta { font-size: 11.5px; padding: 8px 12px; letter-spacing: 0; }
  nav#nav .logo-text .main { font-size: 15px; }
  nav#nav .logo-mark { width: 32px; height: 32px; font-size: 12px; }
}
@media (max-width: 360px) {
  nav#nav .nav-cta { font-size: 11px; padding: 8px 10px; }
  nav#nav .logo-text .main { font-size: 14px; }
}

/* Die Zeile ueber der Kachelleiste lag unter der fest stehenden
   Navigationsleiste und war dadurch unsichtbar. */
.tabs-section { padding-top: 104px; }
@media (max-width: 640px) {
  .tabs-section { padding-top: 92px; }
}

/* ============================================================================
   Termin-Hinweis: Zwischenkarte vor dem Sprung zur Online-Terminbuchung,
   solange diese in der Testphase laeuft. Erzeugt von check-common.js.
   Bewusst ohne backdrop-filter (Scroll-Ruckeln auf Mobilgeraeten).
   ============================================================================ */
.termin-hinweis-schleier { position: fixed; inset: 0; z-index: 4000; background: rgba(28, 49, 37, 0.62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.termin-hinweis-karte { background: var(--white, #FFFFFF); border: 1px solid var(--line, #E4DECF); border-radius: 20px; padding: 30px 28px 26px; max-width: 470px; width: 100%; box-shadow: 0 24px 60px rgba(20, 35, 26, 0.35); }
.termin-hinweis-pille { display: inline-flex; align-items: center; background: var(--gold-soft, #D8C08A); color: var(--forest-ink, #1C3125); padding: 4px 12px; border-radius: 100px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; }
.termin-hinweis-karte h2 { font-family: 'Fraunces', serif; font-weight: 500; font-size: 22px; line-height: 1.25; letter-spacing: -0.02em; color: var(--forest-ink, #1C3125); margin: 0 0 10px; }
.termin-hinweis-karte p { font-size: 14.5px; line-height: 1.6; color: var(--muted, #6B6455); margin: 0 0 20px; }
.termin-hinweis-zeile { display: flex; gap: 10px; flex-wrap: wrap; }
.termin-hinweis-weiter { display: inline-flex; align-items: center; justify-content: center; background: var(--forest, #2A4A38); color: var(--cream, #F8F5EE); text-decoration: none; font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 100px; min-height: 44px; }
.termin-hinweis-weiter:hover { background: var(--forest-ink, #1C3125); }
.termin-hinweis-zurueck { background: none; border: 1px solid var(--line, #E4DECF); color: var(--forest-ink, #1C3125); font-size: 14px; font-weight: 600; padding: 12px 20px; border-radius: 100px; min-height: 44px; cursor: pointer; }
.termin-hinweis-zurueck:hover { border-color: var(--forest, #2A4A38); }
.termin-hinweis-weiter:focus-visible, .termin-hinweis-zurueck:focus-visible { outline: 3px solid var(--gold, #C9AD77); outline-offset: 3px; }
@media print { .termin-hinweis-schleier { display: none !important; } }

/* Sichtbarer Fokus fuer programmatisch fokussierte Ergebnis-Ueberschriften. */
[tabindex="-1"]:focus-visible { outline: 3px solid var(--gold, #C9AD77); outline-offset: 4px; border-radius: 4px; }

/* ============================================================================
   Ergebnis-Choreografie der Selbst-Checks. Angelegt 07.08.2026.
   Grundsaetze: Endwerte stehen sofort im DOM (Animation ist reine Dekoration),
   kein Layout-Springen (Platz ist immer reserviert), bei reduzierter Bewegung
   erscheint alles unmittelbar. Nur transform und opacity, kein Layout-Thrash.
   ============================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .erg-reveal { opacity: 0; transform: translateY(16px); animation: ergAuftritt 0.75s var(--ease, cubic-bezier(0.22,1,0.36,1)) forwards; animation-delay: var(--d, 0s); will-change: opacity, transform; }
  @keyframes ergAuftritt { to { opacity: 1; transform: none; } }
  .zahl-tick { animation: zahlSetzt 0.55s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
  @keyframes zahlSetzt { 0% { transform: scale(1); } 45% { transform: scale(1.14); text-shadow: 0 0 22px rgba(201,173,119,0.55); } 100% { transform: scale(1); } }
  .erg-marker-gleiten { transition: left 1.1s var(--ease, cubic-bezier(0.22,1,0.36,1)), transform 1.1s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
  .erg-feld-puls { animation: feldPuls 1.4s var(--ease, cubic-bezier(0.22,1,0.36,1)) 1; }
  @keyframes feldPuls { 0% { filter: brightness(1); } 30% { filter: brightness(1.14); } 100% { filter: brightness(1); } }
  .erg-punkt-fall { animation: punktFall 0.9s cubic-bezier(0.34,1.4,0.64,1) forwards; }
  @keyframes punktFall { 0% { opacity: 0; transform: translateY(-18px) scale(0.6); } 100% { opacity: 1; transform: none; } }
  .erg-dot-an { animation: dotAn 0.4s var(--ease, cubic-bezier(0.22,1,0.36,1)) forwards; animation-delay: var(--d, 0s); opacity: 0; transform: scale(0.4); }
  @keyframes dotAn { to { opacity: 1; transform: scale(1); } }
}
@media (prefers-reduced-motion: reduce) {
  .erg-reveal, .erg-dot-an { opacity: 1 !important; transform: none !important; animation: none !important; }
  .erg-ring-wert { transition: none !important; }
}

/* Fortschrittsring: SVG mit stroke-dashoffset, Endwert wird per JS gesetzt,
   der Uebergang zeichnet den Bogen. Farbton kommt von der Ergebnisklasse. */
.erg-ring { display: inline-grid; place-items: center; position: relative; }
.erg-ring svg { transform: rotate(-90deg); display: block; }
.erg-ring-bahn { fill: none; stroke: var(--cream-deep, #E8DFCC); stroke-width: 7; }
.erg-ring-wert { fill: none; stroke: var(--gold, #C9AD77); stroke-width: 7; stroke-linecap: round; transition: stroke-dashoffset 1.25s var(--ease, cubic-bezier(0.22,1,0.36,1)); }
.erg-ring-mitte { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }

/* Druckschutz der Choreografie: im Druck steht alles sofort und vollstaendig. */
@media print {
  .erg-reveal, .erg-dot-an, .erg-punkt-fall { animation: none !important; opacity: 1 !important; transform: none !important; }
  .erg-ring-wert, .erg-marker-gleiten { transition: none !important; }
}