/* Banner & Briar – Landingpage. Schriften selbst gehostet (SIL OFL): Grenze Gotisch (Titel), Alegreya (Text).
   Keine externen Ressourcen. Pixelgrafik nur ganzzahlig skaliert. */
@font-face { font-family: "BB Title"; src: url("/fonts/title.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "BB Text"; src: url("/fonts/text.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
:root {
  --ink: #1f1a29; --paper: #f3e3c3; --paper-2: #e6cfa6; --wood: #6b4a2f;
  --blue: #2f7fa6; --blue-dark: #235f7d; --red: #b8452f; --gold: #ffd447; --text: #2b2118;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--text);
  font: 400 18px/1.55 "BB Text", Georgia, "Times New Roman", serif;
  font-variant-ligatures: none;
  background: #47aba9; /* Meer wie im Startbild; Inhalte liegen auf Papier-Tafeln */
  image-rendering: pixelated;
}
img, video { max-width: 100%; height: auto; display: block; }
h1, h2 { font-family: "BB Title", Georgia, serif; font-weight: 700; line-height: 1.1; color: var(--ink); }
h2 { font-size: clamp(30px, 7vw, 40px); margin: 0 0 12px; }
h3 { font-size: 22px; margin: 0 0 4px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
a { color: var(--blue-dark); }
.skip { position: absolute; left: -999px; top: 8px; background: #fff; padding: 8px; z-index: 10; }
.skip:focus { left: 8px; }

/* ---------- Startbereich ---------- */
.hero {
  position: relative; overflow: hidden;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end; align-items: center;
  padding: 72px 16px calc(28px + env(safe-area-inset-bottom));
  text-align: center; color: #fff;
}
.hero::after { /* Lesbarkeit unten */
  content: ""; position: absolute; inset: 45% 0 0 0; pointer-events: none;
  background: linear-gradient(rgba(25,20,35,0), rgba(25,20,35,.72));
}
.lang {
  position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 10px; z-index: 3;
  display: flex; align-items: center; background: rgba(31,26,41,.72); border-radius: 12px; padding: 2px 4px;
  font: 700 17px "BB Text", serif;
}
.lang a { color: #fff; text-decoration: none; min-width: 48px; min-height: 44px; display: grid; place-items: center; border-radius: 9px; }
.lang a[aria-current] { background: var(--blue-dark); } /* Kontrast ≥ 4,5 auch auf hellem Grund (Rechtsseiten) */
.lang span { color: #aaa; }
.lang.top { position: fixed; }
.hero-inner { position: relative; z-index: 2; width: 100%; max-width: 760px; }
.logo {
  margin: 0 auto; width: min(100%, 720px); aspect-ratio: 520 / 122; display: grid; place-items: center;
  background: url("/img/ribbon.png") center / 100% 100% no-repeat;
  color: #fff; font-size: clamp(44px, 12.8vw, 92px); padding-bottom: 0.33em;
  text-shadow: 0 3px 0 var(--ink), 3px 0 0 var(--ink), -3px 0 0 var(--ink), 0 -3px 0 var(--ink);
}
.slogan { font-size: clamp(19px, 5vw, 24px); font-weight: 700; margin: 12px 0 18px; text-shadow: 0 2px 3px #000, 0 0 2px #000; }
.btn {
  display: inline-block; min-height: 56px; padding: 14px 24px; border-radius: 12px;
  font: 700 21px/1.3 "BB Text", Georgia, serif; text-decoration: none; color: #fff;
  background: var(--blue); border: 3px solid var(--ink); box-shadow: 0 5px 0 var(--ink);
}
.btn:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--ink); }
.btn:focus-visible, .lang a:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.btn.play { font-size: clamp(20px, 5.4vw, 24px); width: min(100%, 420px); }
.btn.red { background: var(--red); }
.android { margin: 12px 0 0; font-size: 16px; opacity: .95; text-shadow: 0 1px 2px #000; }

/* Spielszene: vorgerendertes Insel-Diorama (tools/tiles.py, echte Tiny-Swords-Kacheln, Maßstab 1:1) mit der Lane
   genau in der Mitte; darüber marschierende Goblins und wartende Ritter (Sprites, CSS-Animation mit steps).
   Bild und Figuren hängen an derselben Mitte (50 %) und demselben Versatz --sy, damit sie immer zusammenpassen.
   Wasserfarbe #47aba9 füllt alles außerhalb des Bildes (Bildränder sind Wasser). */
.hero { --sy: 0px; }
.scene {
  position: absolute; inset: 0; z-index: 0;
  background: #47aba9 url("/img/hero-d.webp?v=64c275dc") center var(--sy) / 1920px 1088px no-repeat;
}
@media (max-width: 832px) {
  .scene { background-image: url("/img/hero-m.webp?v=74bb5dbf"); background-size: 832px 1088px; }
}
.march > div, .guard > div { position: absolute; background-repeat: no-repeat; }
/* Goblins: Hochland-Lane von der Burg (Tor y ≈ 210) bis zur Treppenkante (y 384); Ritter am Treppenfuß (y ≈ 470) */
.march { position: absolute; left: 50%; top: calc(150px + var(--sy)); width: 0; height: 0; animation: march 11s linear infinite; }
.gob { width: 192px; height: 192px; background-image: url("/img/goblin-run.png"); animation: run6 .6s steps(6) infinite; transform: scaleX(-1); }
.g1 { left: -205px; top: 0; } .g2 { left: -115px; top: -40px; animation-delay: -.2s; } .g3 { left: -30px; top: 10px; animation-delay: -.4s; }
.guard { position: absolute; left: 50%; top: calc(330px + var(--sy)); width: 0; height: 0; }
.knight { width: 192px; height: 192px; background-image: url("/img/knight-idle.png"); animation: run6 .75s steps(6) infinite; }
.k1 { left: -187px; top: 0; } .k2 { left: -97px; top: 20px; animation-delay: -.3s; } .k3 { left: -17px; top: -4px; animation-delay: -.5s; }
@keyframes run6 { to { background-position: -1152px 0; } }
@keyframes march { from { transform: translateY(-40px); } 70% { transform: translateY(80px); } to { transform: translateY(80px); opacity: 0; } }
/* niedrige Bildschirme: ganze Szene nach oben rücken, damit die Ritter nicht hinter dem Schriftzug verschwinden */
/* Laptop-Fenster 741–860 hoch (1366×768, 1280×800): etwas hoch + kleinerer Schriftzug */
@media (max-height: 860px) and (min-width: 833px) {
  .hero { --sy: -50px; }
  .logo { width: min(100%, 560px); font-size: 71px; }
  .slogan { margin: 6px 0 12px; }
}
@media (max-height: 740px) { .hero { --sy: -100px; } }
@media (max-height: 600px) { .hero { --sy: -150px; } }
/* flache Desktop-Fenster (typischer Laptop: 1366×768-Bildschirm → Fenster ≈ 1366×650): Schriftzug kleiner und
   Szene weiter hoch, sonst deckt er Treppe und Ritter ganz zu */
@media (max-height: 740px) and (min-width: 833px) {
  .hero { --sy: -120px; padding-bottom: calc(18px + env(safe-area-inset-bottom)); }
  .logo { width: min(100%, 480px); font-size: 60px; }
  .slogan { margin: 4px 0 10px; }
}
@media (max-height: 600px) and (min-width: 833px) { .hero { --sy: -150px; } }
/* kleine Handys (360×640, 375×667): Schriftzug kleiner und Szene höher, sonst verdeckt er die Ritter (Review 2026-10-18) */
@media (max-width: 832px) and (max-height: 700px) {
  .hero { --sy: -150px; }
  .logo { width: min(100%, 320px); font-size: 44px; }
  .slogan { margin: 6px 0 12px; }
}
.slogan { text-wrap: balance; }
/* Rechtsseiten: Sprachumschalter scrollt mit, statt über den Überschriften zu stehen */
.lang.top { position: absolute; }
@media (prefers-reduced-motion: reduce) {
  .scene *, .march { animation: none !important; }
}

/* ---------- Inhalt ---------- */
/* Rechtsseiten: schmale Spalte mit Papier-Tafel */
main.legal { max-width: 900px; margin: 0 auto; padding: 8px 12px 30px; }
.panel {
  background: var(--paper); border: 4px solid var(--wood); border-radius: 14px;
  box-shadow: 0 6px 0 rgba(0,0,0,.25); padding: 22px 18px; margin: 26px 0;
}
.clip video {
  width: min(100%, 360px); aspect-ratio: 9 / 16; margin: 0 auto; object-fit: cover;
  border: 4px solid var(--ink); border-radius: 18px; background: #3b6b3a;
}
.feature { display: grid; gap: 12px; margin: 18px 0 26px; }
.feature img { border: 3px solid var(--ink); border-radius: 10px; width: 100%; max-width: 480px; margin: 0 auto; background: #3b6b3a; }
.feature p { margin: 0; }
@media (min-width: 720px) {
  .feature { grid-template-columns: 1fr 1fr; align-items: center; gap: 24px; }
  .feature:nth-of-type(even) img { order: 2; }
}
.ico { width: 40px; height: 40px; flex: 0 0 40px; background: url("/img/icons.png") no-repeat; }
.ico-sword { background-position: 0 0; } .ico-gold { background-position: -40px 0; } .ico-fire { background-position: -80px 0; }
.board { text-align: center; }
.todo-inline { background: #fff3cd; padding: 1px 6px; border-radius: 4px; }
.todo { background: #fff3cd; border: 3px solid #c9a227; border-radius: 10px; padding: 12px 14px; font-weight: 700; }

footer { text-align: center; color: #fff; padding: 22px 16px calc(34px + env(safe-area-inset-bottom)); font-size: 15px; background: rgba(20,15,30,.85); }
footer a { color: var(--gold); display: inline-block; min-height: 44px; line-height: 44px; padding: 0 6px; }
footer p a { min-height: 0; line-height: inherit; padding: 0; }

/* Rechtstexte */
.legal { max-width: 760px; padding-top: 70px; }
.legal h1 { font-size: clamp(34px, 8vw, 44px); margin: 0 0 12px; }
.legal h2 { font-size: 26px; margin: 22px 0 6px; }
.note { font-style: italic; }

.more { margin: 0; padding-left: 22px; } .more li { margin: 6px 0; }
.board-lead { margin: 0 0 6px; font-weight: 700; }
.board-head { font-size: 20px; }
.board-list { list-style: none; padding: 0; margin: 10px auto 18px; max-width: 460px; text-align: left; }
.board-list li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-bottom: 2px dashed var(--paper-2); }
.board-list .r { width: 32px; font-weight: 700; text-align: right; }
.board-list canvas { width: 30px; height: 38px; image-rendering: pixelated; }
.board-list .n { flex: 1; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board-list .w { font-weight: 700; }
.board-tabs { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; flex-wrap: wrap; }
.board-tabs button { font: 700 17px "BB Text", Georgia, serif; color: #fff; background: var(--blue-dark); border: 3px solid var(--ink);
  border-radius: 10px; padding: 8px 14px; min-height: 44px; cursor: pointer; box-shadow: 0 3px 0 var(--ink); }
.board-tabs button[aria-selected="true"] { background: var(--gold); color: var(--ink); }
.board-maps button { font-size: 15px; padding: 6px 10px; }
.board-tabs[hidden] { display: none; }
.board-tabs button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.board-note { font-size: 15px; opacity: .8; margin-top: 4px; }
/* Ranglisten-Reiter als Raster: brachen auf Handys in 5–7 Zeilen um */
.board-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; max-width: 460px; margin-inline: auto; }
.board-tabs button { padding: 8px 4px; font-size: 16px; }
.board-maps button { font-size: 14px; padding: 6px 2px; }

/* ---------- Inhaltsseite unter dem Startbild (Überarbeitung 2026-10-20) ----------
   Bänder über die volle Breite im Look des Spiels: Meer (Grund), Wiese (Kachel aus Tilemap_color1), Papier- und
   Holztafeln als border-image der Tiny-Swords-9-Slices, Überschriften auf dem blauen Band. Pixelgrafik ganzzahlig. */
.band { padding: 44px 16px; }
.band > * { max-width: 1040px; margin-inline: auto; }
.grass { background: #8fbc4a url("/img/grass.png") repeat; background-size: 64px 64px; }
.paper {
  border: 32px solid transparent; border-image: url("/img/paper.png") 64 fill / 32px stretch;
  image-rendering: pixelated; color: var(--text); padding: 6px 8px;
}
.wood {
  border: 42px solid transparent; border-image: url("/img/wood.png") 85 84 103 84 fill / 42px 42px 52px 42px stretch;
  image-rendering: pixelated; color: #fff6e0; padding: 4px 6px; max-width: 760px; width: calc(100% - 24px); margin: 40px auto;
}
.wood h2 { color: #fff6e0; text-shadow: 0 3px 0 rgba(0,0,0,.35); }
.ribbon { text-align: center; margin: 0 auto 18px; }
.ribbon span {
  display: inline-block; color: #fff; font-size: clamp(24px, 6.2vw, 44px); padding: 6px 24px 14px; white-space: nowrap;
  border: 0 solid transparent; border-width: 0 52px; border-image: url("/img/ribbon-blue.png") 0 64 fill / 0 52px stretch;
  text-shadow: 0 3px 0 var(--ink), 2px 0 0 var(--ink), -2px 0 0 var(--ink), 0 -2px 0 var(--ink);
}
.band-lead { text-align: center; color: #fff; font-size: 20px; margin: 0 auto 22px; text-shadow: 0 2px 0 rgba(0,0,0,.35); text-wrap: balance; }

/* Vier Spielarten: Karten, auf Handys seitlich wischen */
.mode-row { display: grid; grid-auto-flow: column; grid-auto-columns: min(82vw, 320px); gap: 16px; overflow-x: auto;
  scroll-snap-type: x mandatory; padding: 4px 4px 14px; -webkit-overflow-scrolling: touch; }
.mode { scroll-snap-align: center; background: var(--paper); border: 4px solid var(--ink); border-radius: 16px; overflow: hidden;
  box-shadow: 0 6px 0 rgba(0,0,0,.28); display: flex; flex-direction: column; min-width: 0; }
.mode img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-bottom: 4px solid var(--ink); }
.mode-body { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.mode h3 { font-family: "BB Title", Georgia, serif; font-size: 30px; margin: 0; }
.mode p { margin: 0; font-size: 17px; }
.chips { list-style: none; margin: auto 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.chips li { background: var(--blue-dark); color: #fff; font-weight: 700; font-size: 14px; padding: 4px 10px; border-radius: 999px; }
.swipe { text-align: center; color: #fff; opacity: .85; margin: 6px 0 0; font-weight: 700; }
@media (min-width: 900px) {
  .mode-row { grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); grid-auto-columns: auto; overflow: visible; }
  .swipe { display: none; }
}

/* Clip im Handy-Rahmen + Text auf Papier */
.clip-wrap { display: grid; gap: 22px; align-items: center; justify-items: center; }
.phone { width: min(78vw, 300px); padding: 12px; background: var(--ink); border-radius: 34px; box-shadow: 0 10px 0 rgba(0,0,0,.3); }
.phone video { width: 100%; aspect-ratio: 9 / 16; object-fit: cover; border-radius: 22px; background: #3b6b3a; }
.clip-text { max-width: 520px; }
.clip-text h2 { margin-top: 0; }
.checks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.checks li { padding-left: 30px; position: relative; font-weight: 700; }
.checks li::before { content: ""; position: absolute; left: 0; top: 3px; width: 22px; height: 22px; background: url("/img/ico-shield.png") center / contain no-repeat; }
@media (min-width: 760px) { .clip-wrap { grid-template-columns: auto minmax(0, 520px); justify-content: center; justify-items: start; } }

/* Was dich erwartet: Symbol-Kacheln */
.why-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 900px) { .why-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.why { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.why img { width: 64px; height: 64px; image-rendering: pixelated; }
.why h3 { font-family: "BB Title", Georgia, serif; font-size: 26px; margin: 0; justify-content: center; }
.why p { margin: 0; font-size: 16px; }

/* Rangliste auf der Holztafel */
.board { text-align: center; }
.board .board-list li { border-bottom-color: rgba(255,246,224,.25); }
.board .board-note { color: #f3e3c3; }
#rangliste { scroll-margin-top: 20px; }

/* Schluss-Aufruf */
.cta-box { max-width: 560px; text-align: center; position: relative; }
.cta-castle { width: 192px; height: auto; margin: -70px auto 0; image-rendering: pixelated; }
.cta-box .btn.play { margin-top: 10px; }
.contact { max-width: 560px; text-align: center; }
/* 9 Tower-Defense-Karten: Reiter in 3 Spalten */
.board-maps { grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); }

/* Pressematerial (/presse/, /en/press/) */
.facts { border-collapse: collapse; width: 100%; margin: 0 0 12px; }
.facts th, .facts td { text-align: left; padding: 6px 8px; border-bottom: 1px solid rgba(43, 33, 24, .2); vertical-align: top; }
.facts th { width: 34%; }
.press-grid { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0 14px; }
.press-grid img { max-width: 100%; height: auto; border-radius: 8px; image-rendering: auto; }