/* Gemeinsames Aussehen fuer Impressum und Datenschutz */
@font-face { font-family: "Bungee"; src: url("fonts/bungee-400.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("fonts/space-grotesk.woff2") format("woff2"); font-weight: 300 700; font-display: swap; }

:root {
  --ink: #07060a;
  --ink-2: #110d16;
  --paper: #f6f0e4;
  --muted: #b3a9c0;
  --taxi: #ffc21a;
  --taxi-deep: #ff9d0a;
  --fur: #2cb5ff;
  --glasses: #ff3148;
  --line: rgba(246, 240, 228, .14);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font: 400 17px/1.7 "Space Grotesk", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--taxi); }
:focus-visible { outline: 3px dashed var(--taxi); outline-offset: 4px; }

.checker {
  height: 18px;
  background: repeating-conic-gradient(var(--ink) 0 25%, var(--taxi) 0 50%) 0 0 / 18px 18px;
}
header {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  width: min(820px, 100% - 32px); margin: 0 auto; padding: 22px 0;
}
.roof-sign {
  font: 400 1rem/1 "Bungee", Impact, sans-serif;
  text-decoration: none;
  color: var(--ink);
  background: var(--taxi);
  padding: .55em .9em .5em;
  border-radius: 10px 10px 4px 4px;
  box-shadow: inset 0 -4px 0 var(--taxi-deep), 0 0 24px rgba(255, 194, 26, .4);
}
header nav a { color: var(--muted); text-decoration: none; font-weight: 700; font-size: .85rem; letter-spacing: .12em; text-transform: uppercase; }
header nav a:hover { color: var(--taxi); }

main { width: min(820px, 100% - 32px); margin: 0 auto; padding: 2rem 0 5rem; }
h1 {
  font: 400 clamp(2.4rem, 8vw, 4.4rem)/1 "Bungee", Impact, sans-serif;
  text-transform: uppercase;
  margin: 1rem 0 2.5rem;
  text-shadow: .045em .045em 0 var(--glasses), -.03em -.025em 0 var(--fur);
}
h2 {
  font: 400 1.2rem/1.2 "Bungee", Impact, sans-serif;
  text-transform: uppercase;
  color: var(--taxi);
  margin: 2.6rem 0 .8rem;
}
h3 { font-size: 1rem; margin: 1.6rem 0 .4rem; }
p, ul { margin: 0 0 1rem; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .3rem; }
address { font-style: normal; margin-bottom: 1rem; }
.muted { color: var(--muted); }

.card {
  background: var(--ink-2);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
}
.card p:last-child, .card address:last-child { margin-bottom: 0; }

/* Muss vor dem Livegang ersetzt werden */
.todo { background: var(--glasses); color: #fff; padding: 0 .35em; border-radius: 4px; font-weight: 700; }

footer { color: var(--muted); font-size: .85rem; }
footer .inner { width: min(820px, 100% - 32px); margin: 0 auto; padding: 1.6rem 0 2.4rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem 2rem; }
footer a { color: inherit; text-decoration: none; margin-left: 1.2rem; }
footer a:first-child { margin-left: 0; }
footer a:hover { color: var(--taxi); }

/* Bungee zeichnet das Paragrafenzeichen wie ein S */
.para { font-family: "Space Grotesk", sans-serif; font-weight: 700; }