/* ============================================================
   EINHEITLICHER KARTEN-LOOK  ·  Variante 5: Akzentlinie
   Feine Lime-Linie oben, sonst kein Rahmen, eckig, keine
   angeschnittene Ecke. Wird zuletzt geladen und überschreibt
   die früheren Box-Stile (kantig/abgerundet).
   ============================================================ */

/* 1) Angeschnittene Ecken / Rundungen überall entfernen -> eckig */
.flip-front, .flip-back, .badge, .btn, .game-area, .hero-media,
.hours-card, .game-tile, .termin-card, .quiz-card, .quiz-tower,
.quiz-result .rank, .game-hud-fixed, .pong-box, .pong-touch button,
.lang-switch a {
  clip-path: none;
  border-radius: 0;
}

/* 2) Karten: kein Rahmen, weisse Fläche, feine Lime-Linie oben */
.flip-back, .hours-card, .game-tile, .termin-card, .quiz-card {
  border: none;
  border-top: 3px solid var(--color-accent);
  background: var(--color-surface);
  box-shadow: none;
}

/* 3) Foto-Vorderseite der Flip-Karten: nur die Lime-Linie, kein Rahmen/Schatten */
.flip-front {
  border: none;
  border-top: 3px solid var(--color-accent);
  box-shadow: none;
}

/* 4) Schlichte Karten/Elemente: nur die Linie auf Lime umstellen */
.reason { border-top: 3px solid var(--color-accent); }
.quiz-tower { border: none; border-top: 3px solid var(--color-accent); }

/* Programm-Flip-Karten NEU: Bild oben, kurzer Text darunter */
.flip-front { display: flex; flex-direction: column; align-items: stretch; background: var(--color-surface); background-image: none; }
.flip-front::after { content: none; }
.flip-front .flip-img { flex: 1 1 auto; min-height: 150px; background-image: var(--img); background-size: cover; background-position: center; }
.flip-front .flip-cap { padding: .85rem 1rem; }
.flip-front .flip-cap h3 { position: static; padding: 0; color: var(--color-ink); font-size: var(--text-lg); }

/* Programm-Kacheln: Die alten Bilder haben Text eingebrannt (Querformat).
   Die Kartenhöhe folgt dem Bild (3:2), und das ganze Bild wird gezeigt,
   damit der Text nicht angeschnitten wird. Vorderseite bestimmt die Höhe,
   Rückseite liegt darüber. */
.services-grid .flip-inner { min-height: 0; }
.services-grid .flip-front { position: relative; }
.services-grid .flip-back { position: absolute; inset: 0; }
.services-grid .flip-front .flip-img {
  flex: 0 0 auto;
  aspect-ratio: 3 / 2;
  min-height: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-color: var(--color-surface);
}
/* Breitere Programm-Kacheln erzwingen (überschreibt .grid = 15rem sicher). */
.grid.services-grid { grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr)); }

/* ---------- Rechtstext-Seiten (Datenschutz o. Ä.) ---------- */
.legal { max-width: 760px; }
.legal-updated { color: var(--color-muted); font-size: .85rem; margin-bottom: var(--space-lg); }
.legal-section { margin-bottom: var(--space-lg); scroll-margin-top: 5rem; }
.legal-section h3 {
  font-size: var(--text-lg); line-height: 1.25;
  margin-bottom: var(--space-sm); padding-top: var(--space-sm);
  border-top: 1px solid var(--color-line);
}
.legal-section p { margin-bottom: .8rem; }
.legal-section ul { margin: 0 0 .8rem 1.1rem; display: grid; gap: .5rem; }
.legal-section li { line-height: 1.55; }
.legal-section a { color: var(--color-brand); text-decoration: underline; text-underline-offset: 2px; }