/* Website – Gestaltung. Schriften liegen lokal (static/fonts), nichts wird von fremden Servern geladen. */
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fredoka";src:url(fonts/fredoka-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url(fonts/nunito-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
	--lehm:#b85c38;      /* gebrannter Ton */
	--lehm-tief:#8a3f24; /* Schattenfuge */
	--schlick:#4b2e22;   /* nasser Flussschlamm: Text */
	--sand:#ecd5ae;      /* trockener Lehm */
	--creme:#fbf3e3;     /* Schlicker */
	--fluss:#2f9a98;     /* Flusswasser */
	--leise:#7c5f4d;
	--kopf:"Fredoka",ui-rounded,"Arial Rounded MT Bold",system-ui,sans-serif;
	--text:"Nunito",ui-rounded,system-ui,sans-serif;
	--rand:clamp(20px,5vw,64px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--creme);color:var(--schlick);font:400 1.0625rem/1.65 var(--text);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--lehm-tief);text-underline-offset:.18em}
h1,h2,h3{font-family:var(--kopf);font-weight:600;line-height:1.08;margin:0;color:var(--schlick)}
h2{font-size:clamp(2rem,4.6vw,3.2rem);letter-spacing:-.01em}
h3{font-size:1.3rem}
p{margin:0}
:focus-visible{outline:3px solid var(--fluss);outline-offset:3px;border-radius:6px}
.spalte{max-width:1240px;margin:0 auto;padding:0 var(--rand)}

/* Kopfleiste */
.leiste{position:fixed;inset:0 0 auto;z-index:30;display:flex;align-items:center;gap:8px;padding:12px var(--rand);transition:background .25s,box-shadow .25s}
.leiste.fest,.leiste.hell{background:rgba(251,243,227,.93);backdrop-filter:blur(10px);box-shadow:0 1px 0 rgba(75,46,34,.14)}
.marke{display:flex;align-items:center;gap:10px;margin-right:auto;text-decoration:none;font:600 1.3rem var(--kopf);color:#fff;text-shadow:0 1px 8px rgba(40,20,10,.55)}
.marke img{width:38px;height:38px;border-radius:11px;box-shadow:0 2px 0 rgba(40,20,10,.25)}
.leiste.fest .marke,.leiste.hell .marke{color:var(--schlick);text-shadow:none}
.wege{display:flex;gap:2px}
.wege a{font:500 1rem var(--kopf);color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px;text-shadow:0 1px 8px rgba(40,20,10,.55)}
.leiste.fest .wege a,.leiste.hell .wege a{color:var(--schlick);text-shadow:none}
.wege a:hover{background:rgba(255,255,255,.2)}
.leiste.fest .wege a:hover,.leiste.hell .wege a:hover{background:var(--sand)}
.sprache{display:flex;background:var(--creme);border-radius:999px;padding:3px;box-shadow:0 2px 0 rgba(75,46,34,.18)}
.sprache button{font:600 .9rem var(--kopf);border:0;background:none;color:var(--leise);padding:6px 12px;border-radius:999px;cursor:pointer;min-width:44px;min-height:38px}
.sprache button.an{background:var(--schlick);color:var(--creme)}
@media (max-width:820px){.wege{display:none}}

/* Auftakt: Bild über die ganze Breite, unten links eine Tontafel mit dem eingedrückten Namen */
.auftakt{position:relative;min-height:min(100svh,940px);display:flex;align-items:flex-end;isolation:isolate}
.auftakt-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.auftakt::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(60,30,15,.38) 0,rgba(60,30,15,0) 26%,rgba(60,30,15,0) 55%,rgba(60,30,15,.5) 100%)}
.tafel{margin:0 var(--rand) clamp(28px,7vh,84px);max-width:640px;padding:clamp(24px,4vw,44px);background:var(--lehm);color:var(--creme);
	border-radius:34px 30px 38px 28px/30px 36px 28px 38px;
	box-shadow:inset 0 3px 0 rgba(255,214,180,.42),inset 0 -8px 0 var(--lehm-tief),0 26px 50px -18px rgba(40,18,8,.75);
	animation:setzen .7s cubic-bezier(.2,.9,.25,1.15) both}
@keyframes setzen{from{transform:translateY(34px) rotate(-1.5deg)}to{transform:none}}
.tafel h1{font-size:clamp(3.4rem,10.5vw,6.6rem);letter-spacing:.005em;color:var(--creme);
	text-shadow:0 -3px 0 rgba(90,36,16,.85),0 3px 0 rgba(255,226,200,.35)}
.tafel .satz{font:500 clamp(1.2rem,2.6vw,1.6rem)/1.3 var(--kopf);margin:.35em 0 1.1em;max-width:22ch}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{display:inline-flex;align-items:center;gap:10px;font:600 1.05rem var(--kopf);text-decoration:none;padding:13px 22px;min-height:52px;border-radius:999px;border:0;cursor:pointer;
	background:var(--creme);color:var(--schlick);box-shadow:0 5px 0 rgba(60,25,10,.45);transition:transform .12s,box-shadow .12s}
.knopf svg{width:22px;height:22px;flex:none}
.knopf:hover{transform:translateY(-2px);box-shadow:0 7px 0 rgba(60,25,10,.45)}
.knopf:active{transform:translateY(4px);box-shadow:0 1px 0 rgba(60,25,10,.45)}
.knopf.wartet{background:rgba(251,243,227,.2);color:var(--creme);box-shadow:inset 0 0 0 2px rgba(251,243,227,.55);cursor:default}
.knopf.wartet:hover,.knopf.wartet:active{transform:none;box-shadow:inset 0 0 0 2px rgba(251,243,227,.55)}
.knopf.wartet small{font:500 .82rem var(--kopf);opacity:.85;display:block;line-height:1.1}
.stand{margin-top:1.2rem;font-weight:700;display:flex;align-items:center;gap:9px}
.stand i{width:10px;height:10px;border-radius:50%;background:#bfe6a8;box-shadow:0 0 0 4px rgba(191,230,168,.28)}

/* Abschnitte */
.abschnitt{padding:clamp(64px,10vw,128px) 0}
.einleitung{font-size:1.2rem;color:var(--leise);max-width:46ch;margin-top:.8rem}

/* Das Spiel: großes Bild links, rechts vier kurze Einträge */
.spiel{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:start;margin-top:clamp(28px,4vw,48px)}
.spiel figure{margin:0;position:sticky;top:96px}
.spiel figure img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:36px 28px 34px 30px/30px 34px 28px 36px;box-shadow:0 10px 0 var(--sand),0 30px 50px -24px rgba(75,46,34,.6)}
.spiel figcaption{margin-top:22px;color:var(--leise);font-size:.95rem}
.punkte{list-style:none;margin:0;padding:0}
.punkte li{padding:26px 0;border-bottom:3px dotted var(--sand)}
.punkte li:first-child{padding-top:0}
.punkte li:last-child{border-bottom:0}
.punkte h3{display:flex;align-items:center;gap:12px;margin-bottom:.4em}
.punkte h3 svg{width:34px;height:34px;flex:none;color:var(--lehm)}
.punkte p{color:var(--leise);max-width:44ch}
@media (max-width:860px){.spiel{grid-template-columns:1fr}.spiel figure{position:static}}

/* Bilder: Mosaik, das erste Bild groß */
.sandig{background:var(--sand)}
.sandig .einleitung{color:var(--schlick)}
.mosaik{list-style:none;margin:clamp(28px,4vw,48px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.mosaik li:first-child{grid-column:span 2;grid-row:span 2}
.mosaik a{display:block;height:100%;border-radius:20px;overflow:hidden;box-shadow:0 5px 0 rgba(138,63,36,.25);transition:transform .18s}
.mosaik a:hover{transform:translateY(-3px)}
.mosaik img{width:100%;height:100%;aspect-ratio:16/9;object-fit:cover}
@media (max-width:820px){.mosaik{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}}

/* Studio und Kontakt nebeneinander */
.zwei{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(28px,6vw,96px);align-items:center}
.zwei p{margin-top:1rem;max-width:52ch}
.karte{background:var(--fluss);color:#fff;padding:clamp(24px,3.4vw,40px);border-radius:30px 36px 28px 34px/34px 28px 36px 30px;box-shadow:inset 0 3px 0 rgba(255,255,255,.3),inset 0 -8px 0 rgba(15,80,80,.55)}
.karte h2{color:#fff;font-size:clamp(1.6rem,3vw,2.2rem)}
.karte .knopf{margin-top:1.3rem;font-size:clamp(.88rem,2.9vw,1.05rem);word-break:break-all;box-shadow:0 5px 0 rgba(10,60,60,.5)}
@media (max-width:860px){.zwei{grid-template-columns:1fr}}

/* Fußzeile */
.fuss{background:var(--schlick);color:#e9d5bf;padding:30px 0}
.fuss .spalte{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.fuss nav{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss a{color:#fff;font-weight:700;text-decoration:none}
.fuss a:hover{text-decoration:underline}

/* Großansicht */
.gross{border:0;padding:0;background:transparent;max-width:min(94vw,1600px);max-height:92vh;overflow:visible}
.gross::backdrop{background:rgba(45,24,14,.88)}
.gross img{max-height:86vh;width:auto;border-radius:18px}
.gross button{position:absolute;border:0;background:var(--creme);color:var(--schlick);font:600 1.8rem/1 var(--kopf);width:52px;height:52px;border-radius:50%;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.3)}
.gross .zu{top:-20px;right:-20px}
.gross .vor{right:-26px;top:50%;transform:translateY(-50%)}
.gross .zurueck{left:-26px;top:50%;transform:translateY(-50%)}
@media (max-width:700px){.gross .zu{top:-62px;right:0}.gross .vor{right:6px}.gross .zurueck{left:6px}}

/* Textseiten: Impressum, Datenschutz, Presse, Fehlerseite */
.blatt{max-width:46rem;margin:0 auto;padding:120px var(--rand) 80px;min-height:80vh}
.blatt h1{font-size:clamp(2rem,5vw,3rem);margin-bottom:.4em}
.blatt h2{font-size:1.35rem;margin:2.2rem 0 .5rem;padding-top:1.2rem;border-top:3px dotted var(--sand)}
.blatt p,.blatt ul{margin:0 0 1rem}
.blatt .meta{color:var(--leise);font-size:.95rem}
.blatt dl{display:grid;grid-template-columns:auto 1fr;gap:6px 22px;margin:0 0 1rem}
.blatt dt{font-weight:700}
.blatt dd{margin:0}
.pressebilder{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px;list-style:none;padding:0}
.pressebilder img{border-radius:14px}