/* Bowling Hellersdorf – gemeinsame Styles für index, impressum, datenschutz */
/* Farben aus den beiden Logos. Nur helles Farbschema: beide Logos haben
   dunkle Schrift auf transparentem Grund und wären auf dunklem Grund unlesbar. */
:root {
  color-scheme: light;
  --text: #1d1d1b;          /* Logo Hellersdorf, Schrift */
  --text-soft: #4a4a46;
  --blue: #1d71b8;          /* Logo Hellersdorf, Kugel */
  --yellow: #ffd500;        /* Logo Hellersdorf, Schriftzug */
  --bg: #ffffff;
  --bg-soft: #f4f6f9;
  --line: #dfe3e8;
  --radius: 14px;
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 1.25rem; }

header { border-top: 6px solid var(--yellow); }
header .wrap { display: flex; justify-content: center; padding-top: 2rem; padding-bottom: 1rem; }
.logo-hd { display: block; width: 13rem; max-width: 60vw; height: auto; }

main { flex: 1; padding: 1rem 0 3rem; }
h1 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.4rem);
  line-height: 1.2;
  text-align: center;
  text-wrap: balance;
}
h1::after {
  content: "";
  display: block;
  width: 4rem;
  height: 4px;
  margin: 1rem auto 0;
  border-radius: 2px;
  background: var(--blue);
}
.text p { margin: 0 0 1rem; text-align: center; text-wrap: pretty; }
.text p:last-child { margin-bottom: 0; }

.card {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin: 2.5rem auto 0;
  max-width: 30rem;
  padding: 1.25rem 1.5rem;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: inherit;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.card:hover { border-color: var(--blue); box-shadow: 0 6px 20px rgba(29, 113, 184, .15); transform: translateY(-1px); }
.card:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }
.logo-bb { flex: 0 0 auto; width: 8.5rem; height: auto; }
.card-text { display: flex; flex-direction: column; gap: .15rem; }
.card-text strong { font-size: 1.1rem; }
.card-text span { color: var(--text-soft); font-size: .95rem; }
.card-text .go { color: var(--blue); font-weight: 600; margin-top: .35rem; }

footer { border-top: 1px solid var(--line); background: var(--bg-soft); font-size: .9rem; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem 1.5rem; padding-top: 1.25rem; padding-bottom: 1.25rem; }
footer a { color: var(--text-soft); text-decoration: underline; text-underline-offset: 3px; }
footer a:hover, footer a:focus-visible { color: var(--blue); }

@media (max-width: 30rem) {
  .card { flex-direction: column; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .card { transition: none; }
  .card:hover { transform: none; }
}

/* Rechtsseiten (impressum.html, datenschutz.html) */
header a { display: block; }
.legal { max-width: 40rem; }
.legal h1 { text-align: left; font-size: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); }
.legal h1::after { margin-left: 0; }
.legal h2 { margin: 2rem 0 .5rem; font-size: 1.15rem; line-height: 1.3; }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal a { color: var(--blue); text-underline-offset: 3px; overflow-wrap: anywhere; }
.legal address { font-style: normal; }
.legal .stand { margin-top: 2.5rem; color: var(--text-soft); font-size: .9rem; }
.back { display: inline-block; margin-top: 1.5rem; color: var(--blue); font-weight: 600; text-decoration: none; }
.back:hover, .back:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.logo-small { width: 8rem; }