@font-face{font-family:Fredoka;src:url(font/fredoka.woff2) format('woff2-variations');font-weight:300 700;font-display:swap}
:root{--gelb:#FFC300;--rot:#E63946;--blau:#4CC9F0;--creme:#FFF9E8;--tinte:#1d1a15;--grau:#5d574c}
*{box-sizing:border-box}
body{margin:0;background:var(--creme);color:var(--tinte);
  font-family:Fredoka,ui-rounded,'Segoe UI Rounded','Hiragino Maru Gothic ProN',system-ui,sans-serif;
  font-size:17px;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:#b3212c}
.wrap{max-width:1060px;margin:0 auto;padding-inline:20px}

/* Kopf */
header{background:var(--gelb);
  background-image:radial-gradient(circle at 50% 50%,rgba(255,255,255,.45) 5px,transparent 6px);
  background-size:46px 46px}
.kopf{display:flex;align-items:center;gap:16px;padding-block:18px;flex-wrap:wrap}
.kopf img{width:62px;height:62px;border-radius:50%;border:3px solid var(--tinte)}
.kopf b{font-size:26px;font-weight:600;letter-spacing:-.01em}
nav{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
nav a{background:#fff;border:2px solid var(--tinte);border-radius:999px;
  padding:7px 15px;text-decoration:none;color:var(--tinte);font-weight:500;font-size:15px}
nav a:hover{background:var(--tinte);color:#fff}

/* Bühne */
.buehne{padding-block:52px 60px;text-align:center}
.buehne h1{font-size:clamp(30px,6vw,50px);line-height:1.12;margin:0 0 14px;font-weight:600;letter-spacing:-.02em}
.buehne p{max-width:36em;margin:0 auto;font-size:clamp(17px,2.4vw,20px);color:var(--grau)}
.knopf{display:inline-block;margin-top:26px;background:var(--rot);color:#fff;text-decoration:none;
  border:3px solid var(--tinte);border-radius:999px;padding:13px 30px;font-weight:600;font-size:18px;
  box-shadow:0 4px 0 var(--tinte)}
.knopf:hover{transform:translateY(2px);box-shadow:0 2px 0 var(--tinte)}
.knopf.hell{background:#fff;color:var(--tinte)}

section{padding-block:46px}
section h2{font-size:clamp(24px,4vw,32px);font-weight:600;margin:0 0 6px;letter-spacing:-.01em}
section h2+p.unter{margin:0 0 30px;color:var(--grau)}

/* Karten */
.gitter{display:grid;gap:26px;grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
@media(min-width:1000px){.gitter{grid-template-columns:repeat(3,1fr)}}
.karte{background:#fff;border:3px solid var(--tinte);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 5px 0 rgba(29,26,21,.14)}
.karte img{border-bottom:3px solid var(--tinte);background:#fff}
.karte .text{padding:15px 17px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.karte h3{margin:0;font-size:19px;font-weight:600;line-height:1.25}
.karte .band{font-size:13px;color:var(--grau);letter-spacing:.04em;text-transform:uppercase}
.karte p{margin:0;font-size:15px;color:var(--grau);flex:1}
.karte a.kauf{align-self:flex-start;margin-top:4px;background:var(--gelb);color:var(--tinte);
  text-decoration:none;border:2px solid var(--tinte);border-radius:999px;padding:8px 17px;font-weight:600;font-size:15px}
.karte a.kauf:hover{background:var(--tinte);color:#fff}

/* Über */
.ueber{background:#fff;border-block:3px solid var(--tinte)}
.ueber .inhalt{display:grid;gap:34px;grid-template-columns:170px 1fr;align-items:start}
.ueber img{border-radius:50%;border:3px solid var(--tinte)}
.ueber p{color:var(--grau);max-width:46em}
@media(max-width:680px){.ueber .inhalt{grid-template-columns:1fr;justify-items:center;text-align:center}
  .ueber img{width:150px}}

/* Text-Seiten */
.doku{max-width:44em;padding-block:44px 60px}
.doku h1{font-size:clamp(27px,5vw,38px);font-weight:600;margin:0 0 22px}
.doku h2{font-size:21px;font-weight:600;margin:34px 0 8px}
.doku p,.doku li{color:var(--grau)}
.doku .kasten{background:#fff;border:3px solid var(--tinte);border-radius:18px;padding:20px 24px;color:var(--tinte)}

footer{background:var(--tinte);color:#efe9dc;padding-block:30px;font-size:15px}
footer a{color:#ffd766}
footer .zeile{display:flex;gap:10px 22px;flex-wrap:wrap;align-items:center}
footer .zeile span{margin-left:auto;opacity:.65}
@media(max-width:560px){footer .zeile span{margin-left:0;width:100%}}