@font-face { font-family: "Work Sans"; font-weight: 900; font-display: swap; src: url(fonts/WorkSans-Black.ttf); }
@font-face { font-family: Inter; font-weight: 400; font-display: swap; src: url(fonts/Inter-Regular.ttf); }
@font-face { font-family: Inter; font-weight: 700; font-display: swap; src: url(fonts/Inter-Bold.ttf); }

/* Gleiche Farbwelt wie der Mietcheck: Bühne in Dunkelrot mit rotem Keil, Flächen und Text
   wechseln im Dunkelmodus mit der Systemeinstellung. */
:root {
  --dunkel: #6F003C; --rot: #FF0000; --blau: #2E4FC4; --tinte: #231F20; --leise: #5C5557;
  --linie: #CFC8CA; --flaeche: #F6F1F2; --papier: #fff; --akzent: var(--dunkel); --abstand: 24px;
}
@media (prefers-color-scheme: dark) {
  :root { --tinte: #F3EEF0; --leise: #B9AFB3; --linie: #4A4246; --flaeche: #2A2226; --papier: #161214; --akzent: #FF9BC4; }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font: 400 1.0625rem/1.55 Inter, system-ui, sans-serif; color: var(--tinte); background: var(--papier); color-scheme: light dark; }
h1, h2 { font-family: "Work Sans", Inter, sans-serif; font-weight: 900; line-height: 1.08; letter-spacing: -.01em; margin: 0; text-wrap: balance; }
h2 { font-size: 1.75rem; color: var(--akzent); }
p { margin: 0 0 12px; }
a { color: var(--akzent); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--blau); outline-offset: 2px; }

.buehne { position: relative; overflow: hidden; background: var(--dunkel); color: #fff; }
.buehne::after { content: ""; position: absolute; inset: 0; background: var(--rot); clip-path: polygon(0 100%, 100% calc(100% - 72px), 100% 100%); }
.buehne-innen { position: relative; z-index: 1; max-width: 42rem; margin: 0 auto; padding: 48px var(--abstand) 120px; }
.buehne h1 { font-size: clamp(2.5rem, 11vw, 4.5rem); }
.buehne p { max-width: 32rem; margin-top: 18px; font-size: 1.125rem; }

.spalte { max-width: 42rem; margin: 0 auto; padding: 36px var(--abstand) 48px; }
.liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.karte { background: var(--flaeche); border-left: 6px solid var(--rot); padding: 22px 22px 24px; }
.karte h2 { margin-bottom: 10px; }
.kicker { color: var(--leise); font-weight: 700; font-size: .875rem; letter-spacing: .02em; margin-bottom: 6px; }
.knopf { display: inline-block; min-height: 50px; padding: 12px 22px; font: 700 1.0625rem/1.4 Inter, sans-serif; color: #fff; background: var(--dunkel); border: 2px solid var(--dunkel); border-radius: 3px; text-decoration: none; margin-top: 6px; }

.recht h1 { font-size: 2.5rem; color: var(--akzent); margin: 18px 0 24px; }
.recht h2 { font-size: 1.25rem; margin: 30px 0 8px; }
.hinweis { color: var(--leise); font-size: .9375rem; }
.fuss { max-width: 42rem; margin: 0 auto; padding: 24px; display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--leise); font-size: .875rem; }
.fuss p { margin: 0; flex: 1 1 14rem; }