/* ============================================================
   CombiCards — Tiefsee
   Ein Stylesheet für die ganze Seite. Aufbau von oben nach unten:
   Grundlagen · Kopf- und Fußleiste · Startseite · Kacheln ·
   Knöpfe · Lesetext · Anleitung · Schmale Geräte.
   ============================================================ */

:root{
  /* Wasser */
  --tief:#05171F;
  --mittel:#082A33;
  --oben:#0D3E42;
  --schimmer:#14625A;

  /* Schrift */
  --tinte:#EAF6F5;
  --leise:#9CC0C2;
  --schwach:#7C9EA2;

  /* Akzent */
  --tuerkis:#4FD1C5;
  --tuerkis-hell:#85E8DE;
  --kante:rgba(234,246,245,.20);
  --kante-stark:rgba(234,246,245,.40);

  --breite:1120px;
  --breite-lesen:68ch;

  /* Die Schräge der Kachelecken. Ein Wert, an dem sich alles orientiert. */
  --ecke:16px;
}

*{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }
/* Sprungziele nicht unter der Kopfleiste verstecken. */
:target{ scroll-margin-top:24px; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  min-height:100vh;
  color:var(--tinte);
  font-family:"Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size:18px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-color:var(--tief);
  background-image:
    radial-gradient(108% 60% at 50% 108%, rgba(20,98,90,.5) 0%, rgba(20,98,90,0) 64%),
    linear-gradient(172deg, var(--tief) 0%, var(--mittel) 52%, var(--oben) 100%);
  background-attachment:fixed;
}

a{ color:var(--tuerkis); }
a:hover{ color:var(--tuerkis-hell); }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--tuerkis); outline-offset:3px; border-radius:2px; }

img{ max-width:100%; height:auto; }

/* Sprungmarke für Tastatur und Vorlesesoftware */
.zum-inhalt{
  position:absolute; left:-9999px; top:0; z-index:20;
  background:var(--tief); color:var(--tinte);
  padding:12px 18px; text-decoration:none;
}
.zum-inhalt:focus{ left:12px; top:12px; }

/* ------------------------------------------------- Zeichen und Wortmarke
   Beide stammen aus der Original-Druckvorlage und liegen als Schablone
   vor: die Fläche trägt die Farbe, das Bild gibt nur die Form vor. So
   nimmt das Logo jede Schriftfarbe an, statt schwarz auf der dunklen
   Seite zu verschwinden.

   Kann ein Browser keine Schablonen, zeigt er den Fläche gar nicht an —
   deshalb steht die Farbe erst im @supports-Block weiter unten. */
.rad, .wortmarke-bild{
  flex:none; display:inline-block;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center;  mask-position:center;
  -webkit-mask-size:contain;     mask-size:contain;
}
.wortmarke-bild{
  width:174px; height:36px;   /* Seitenverhältnis 4.85 : 1 */
}

@supports ((-webkit-mask-image: url(x)) or (mask-image: url(x))){
  .rad{
    background-color:currentColor;
    -webkit-mask-image:url("../bilder/rad.png"); mask-image:url("../bilder/rad.png");
  }
  .wortmarke-bild{
    background-color:currentColor;
    -webkit-mask-image:url("../bilder/wortmarke.png"); mask-image:url("../bilder/wortmarke.png");
  }
}
/* Ohne Schablonen: das Bild selbst zeigen. Dann ist es schwarz — sichtbar
   bleibt es trotzdem, weil die Wortmarke auf hellem Grund steht. */
@supports not ((-webkit-mask-image: url(x)) or (mask-image: url(x))){
  .wortmarke-bild{ background-image:url("../bilder/wortmarke.png"); background-color:var(--tinte); }
  .rad{ background-image:url("../bilder/rad.png"); background-color:var(--tinte); }
}

/* ------------------------------------------------------- Kopfleiste */
.kopfleiste{
  max-width:var(--breite);
  margin:0 auto;
  padding:24px clamp(20px,5vw,40px) 0;
  display:flex; flex-wrap:wrap; align-items:center;
  gap:14px clamp(20px,4vw,40px);
}
.wortmarke{
  display:inline-flex; align-items:center;
  color:var(--tuerkis); text-decoration:none;
  transition:color .2s ease;
}
.wortmarke:hover{ color:var(--tuerkis-hell); }

.hauptnavigation{ display:flex; flex-wrap:wrap; gap:8px 24px; }
.hauptnavigation a{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.86rem; letter-spacing:.06em;
  color:var(--leise); text-decoration:none;
}
.hauptnavigation a:hover{ color:var(--tuerkis); }

/* ----------------------------------------------------- Grundraster */
.inhalt{
  max-width:var(--breite);
  margin:0 auto;
  padding:clamp(34px,6vw,64px) clamp(20px,5vw,40px) 0;
}
.inhalt.schmal{ max-width:calc(var(--breite-lesen) + 2 * clamp(20px,5vw,40px)); }

/* ------------------------------------------------------ Startseite */
.augenbraue{
  display:flex; align-items:center; gap:14px; margin:0 0 18px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.78rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--tuerkis);
}
.augenbraue::after{ content:""; flex:1; height:1px; background:var(--kante); }

.willkommen{
  margin:0 0 14px;
  font-weight:700; letter-spacing:-.032em; text-wrap:balance;
  font-size:clamp(2.1rem,6.4vw,3.5rem); line-height:1.04;
  max-width:17ch;
}
.willkommen em{ font-style:normal; color:var(--tuerkis); }

.unterzeile{
  margin:0 0 30px;
  font-size:clamp(1.02rem,1.7vw,1.14rem); line-height:1.64;
  color:var(--leise); max-width:54ch;
}

/* Überschrift mit einem Strich zu beiden Seiten. */
.bereichszeile{
  display:flex; align-items:center; justify-content:center;
  gap:20px; margin:0 0 12px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-weight:400;
  font-size:clamp(.9rem,1.4vw,1.02rem); letter-spacing:.24em;
  text-transform:uppercase; color:var(--leise);
}
.bereichszeile::before,
.bereichszeile::after{
  content:""; height:1px; flex:1; max-width:clamp(44px,9vw,150px); background:var(--kante);
}
.bereichstext{
  margin:0 0 26px; text-align:center;
  color:var(--schwach); font-size:1rem;
}

/* Die Kategorie-Überschrift über einer Gruppe von Spielen. */
.gruppentitel{
  display:flex; align-items:center; gap:12px;
  margin:34px 0 14px;
  font-size:1.24rem; font-weight:600; letter-spacing:-.02em;
  color:var(--tinte);
}
.gruppentitel:first-of-type{ margin-top:8px; }
.gruppenzahl{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.8rem; letter-spacing:.08em; color:var(--schwach);
  padding:3px 9px; border:1px solid var(--kante); border-radius:999px;
}

.fussnote{
  margin:28px 0 0; color:var(--schwach); font-size:.94rem;
}
.marke-mechanik{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.84rem; color:var(--tuerkis);
  padding:2px 8px; border:1px solid rgba(79,209,197,.4); margin-right:6px;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}

/* ---------------------------------------------------------- Kacheln */
.felder{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.felder-drei{ grid-template-columns:repeat(3, minmax(0,1fr)); }

/* Der Achteck-Umriss entsteht aus zwei Ebenen: das Feld selbst trägt die
   Linienfarbe, die Füllung liegt einen Punkt darin. So ist die Kante auf
   allen acht Seiten gleich stark — ein Rahmen würde an den Schrägen wegfallen. */
.feld{
  position:relative; z-index:0;
  display:flex; align-items:center; gap:18px;
  min-height:112px; padding:18px 22px;
  text-decoration:none; color:inherit;
  isolation:isolate;
  background:var(--kante);
  clip-path:polygon(var(--ecke) 0, calc(100% - var(--ecke)) 0, 100% var(--ecke),
                    100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%,
                    var(--ecke) 100%, 0 calc(100% - var(--ecke)), 0 var(--ecke));
  transition:background .25s ease, transform .25s ease;
}
.fuellung{
  position:absolute; inset:1px; z-index:-1;
  clip-path:polygon(calc(var(--ecke) - 1px) 0, calc(100% - var(--ecke) + 1px) 0, 100% calc(var(--ecke) - 1px),
                    100% calc(100% - var(--ecke) + 1px), calc(100% - var(--ecke) + 1px) 100%,
                    calc(var(--ecke) - 1px) 100%, 0 calc(100% - var(--ecke) + 1px), 0 calc(var(--ecke) - 1px));
  background:
    radial-gradient(88% 96% at 88% 12%, rgba(79,209,197,.18) 0%, transparent 68%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028)),
    linear-gradient(180deg, rgba(8,42,51,.62), rgba(8,42,51,.46));
}
.feld:hover, .feld:focus-visible{
  background:var(--kante-stark); transform:translateY(-2px); outline:none;
}
.feld:focus-visible{ box-shadow:0 0 0 2px var(--tuerkis); }

/* Die Kacheln der neuen Spiele sehen aus wie alle anderen — die Fläche
   bleibt bewusst unangetastet. Hervorgehoben wird über die Marke am
   Titel und über den eigenen Bereich auf der Startseite; eine zweite
   Farbe für die Kachel obendrein war zu viel des Guten. Die Klassen
   ist-neu und war-neu stehen weiterhin im HTML, falls die Unterscheidung
   später doch einmal an der Fläche gebraucht wird. */

/* Ein Feld, das nicht anklickbar ist — die Bögen zum Ausdrucken. */
.feld-still{ align-items:flex-start; cursor:default; }
.feld-still:hover{ background:var(--kante); transform:none; }

.feld .marke{
  color:var(--tuerkis); opacity:.6;
  transition:transform .45s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.feld:hover .marke, .feld:focus-visible .marke{ transform:rotate(45deg); opacity:1; }

.feld-text{ display:flex; flex-direction:column; gap:5px; flex-grow:1; min-width:0; }

.kopfzeile{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.feld-titel{
  font-weight:600; letter-spacing:-.018em; color:var(--tinte);
  font-size:1.22rem; line-height:1.2;
}
.beschreibung{
  color:var(--leise); font-size:.94rem; line-height:1.5;
  max-width:46ch; text-wrap:pretty;
}
.eckdaten{
  display:flex; flex-wrap:wrap; gap:4px 16px; margin-top:2px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.76rem; letter-spacing:.07em; color:var(--schwach);
}
.feld-pfeil{
  flex:none; color:var(--schwach); font-size:1.3rem;
  transition:transform .25s ease, color .25s ease;
}
.feld:hover .feld-pfeil{ transform:translateX(4px); color:var(--tuerkis); }

/* Die Marke ist gefüllt, nicht umrandet: als Umriss ging sie neben dem
   Titel schlicht unter. Schrift in Weiß auf der Akzentfarbe. */
.hinweis{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  padding:5px 11px; white-space:nowrap;
  color:#FFFFFF;
  /* Schatten unter der weißen Schrift: hebt sie vom Türkis ab. */
  text-shadow:0 1px 2px rgba(0,0,0,.45);
  background:var(--tuerkis);
  border:1px solid var(--tuerkis);
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
/* Das Spiel, das vor dem neuesten dazukam — dieselbe Marke als Umriss.
   Deutlich sichtbar, aber erkennbar eine Stufe darunter. */
.hinweis-still{
  color:var(--tuerkis);
  text-shadow:none;
  background:transparent;
  border-color:rgba(79,209,197,.6);
  font-weight:600;
}

/* ----------------------------------------------------------- Knöpfe */
.knoepfe{
  display:flex; flex-wrap:wrap; gap:12px; align-items:center;
  margin:0 0 4px; padding:0;
}
.knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  background:var(--tuerkis); color:var(--tief);
  font-weight:600; font-size:1.02rem; line-height:1.2;
  padding:15px 26px; text-decoration:none;
  border:1px solid var(--tuerkis);
  transition:background .2s ease, color .2s ease, border-color .2s ease;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);
}
.knopf:hover{ background:var(--tuerkis-hell); border-color:var(--tuerkis-hell); color:var(--tief); }
/* Der zweite Knopf stand vorher randlos auf dunklem Grund und war kaum
   zu erkennen. Jetzt hat er eine eigene Fläche und einen türkisen Rand —
   deutlich sichtbar, aber immer noch erkennbar der zweite von beiden. */
.knopf-rand{
  background:rgba(79,209,197,.16);
  color:var(--tuerkis-hell);
  border:1px solid var(--tuerkis);
}
.knopf-rand:hover{
  background:rgba(79,209,197,.3);
  border-color:var(--tuerkis-hell);
  color:#EAFBF8;
}
.knopf-rand .knopf-nebenbei{ opacity:.85; }
.knopf-gross{ font-size:1.1rem; padding:17px 32px; }
.knopf-nebenbei{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.78rem; font-weight:400; opacity:.72;
}

/* -------------------------------------------------------- Lesetext */
.brotkrumen{
  display:flex; flex-wrap:wrap; align-items:center; gap:9px;
  margin-bottom:22px;
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.8rem; letter-spacing:.08em; color:var(--schwach);
}
.brotkrumen a{ color:var(--schwach); text-decoration:none; }
.brotkrumen a:hover{ color:var(--tuerkis); }

.lesetext h1{
  margin:0 0 16px;
  font-size:clamp(1.9rem,5vw,2.9rem); line-height:1.08;
  font-weight:700; letter-spacing:-.03em; text-wrap:balance;
}
.lesetext h1 .hinweis{ vertical-align:middle; margin-left:6px; }
.lesetext h2, .lesetext h3{
  margin:36px 0 10px;
  font-weight:600; letter-spacing:-.02em; line-height:1.24;
}
.lesetext h2{ font-size:1.5rem; }
.lesetext h3{ font-size:1.22rem; }
.lesetext p{ margin:0 0 18px; text-wrap:pretty; }
.lesetext ul{ margin:0 0 18px; padding-left:1.3em; }
.lesetext li{ margin-bottom:8px; }
.lesetext blockquote{
  margin:0 0 18px; padding-left:20px;
  border-left:2px solid var(--kante); color:var(--leise);
}
.lesetext code{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.88em; padding:2px 6px; background:rgba(234,246,245,.1);
}
.lesetext hr{ border:0; border-top:1px solid var(--kante); margin:32px 0; }

.anriss{
  font-size:1.14rem; line-height:1.6; color:var(--leise);
  margin:0 0 26px !important;
}

/* Die Eckdaten eines Spiels als kleine Tafel. */
.steckbrief{
  display:flex; flex-wrap:wrap; gap:1px;
  margin:0 0 28px; padding:0;
  background:var(--kante);
  border:1px solid var(--kante);
}
.steckbrief > div{
  flex:1 1 130px; padding:14px 18px;
  background:rgba(8,42,51,.62);
}
.steckbrief dt{
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--schwach); margin-bottom:5px;
}
.steckbrief dd{ margin:0; font-size:1.06rem; font-weight:600; }

.langtext{ margin-top:34px; }

.hinweiskasten{
  margin:0 0 26px; padding:20px 24px;
  border:1px solid var(--kante); background:rgba(8,42,51,.5);
}
.hinweiskasten p{ margin:0 0 8px; }
.hinweiskasten p:last-child{ margin-bottom:0; }

/* -------------------------------------------------------- Anleitung */
.anleitung, .weiter{
  max-width:var(--breite);
  margin:52px auto 0;
  padding:0 clamp(20px,5vw,40px);
}
/* Aus dem schmalen Lesebereich wieder heraus, damit die Anleitung
   in voller Breite steht — auf einer A4-Seite ist das viel wert. */
.inhalt.schmal .anleitung,
.inhalt.schmal .weiter{
  width:min(var(--breite), 100vw - 2 * clamp(20px,5vw,40px));
  margin-left:calc(50% - min(var(--breite), 100vw - 2 * clamp(20px,5vw,40px)) / 2);
  padding:0;
}
.anleitung .bereichszeile{ margin-bottom:18px; }
.anleitung-rahmen{
  display:block; width:100%; height:min(150vh, 1100px);
  border:1px solid var(--kante); background:rgba(8,42,51,.5);
}
.anleitung-ausweg{ padding:28px; margin:0; color:var(--leise); }

.weiter .bereichszeile{ margin-bottom:18px; }

/* ------------------------------------------------------- Fußleiste */
.fussleiste{
  max-width:var(--breite);
  margin:64px auto 0;
  padding:0 clamp(20px,5vw,40px) 48px;
}
.fuss-innen{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:12px 26px;
  padding-top:22px; border-top:1px solid var(--kante);
  font-family:"IBM Plex Mono", ui-monospace, monospace;
  font-size:.82rem; letter-spacing:.04em; color:var(--schwach);
}
.fuss-innen nav{ display:flex; flex-wrap:wrap; gap:10px 22px; }
.fuss-innen a{ color:var(--schwach); text-decoration:none; }
.fuss-innen a:hover{ color:var(--tuerkis); }
.fuss-schwester{ border-top:0; padding-top:12px; }
.fuss-schwester a{ color:var(--leise); }

/* Der Dank steht in einem Satz, nicht in der Linkreihe daneben — deshalb
   ist er unterstrichen, sonst wäre er dort nicht als Link zu erkennen. */
.signatur a{ color:var(--leise); text-decoration:underline; text-underline-offset:2px; }
.signatur a:hover{ color:var(--tuerkis); }

/* --------------------------------------------------- Schmale Geräte */
@media (max-width: 900px){
  .felder, .felder-drei{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  body{ font-size:17px; }
  .feld{ align-items:flex-start; gap:14px; padding:16px 18px; }
  .feld .marke{ width:42px; height:42px; }
  .feld-pfeil{ display:none; }
  .feld-titel{ font-size:1.14rem; }
  /* Auf dem Handy sollen die Knöpfe die volle Breite haben — sie sind
     das Wichtigste auf der Seite und dürfen nicht schwer zu treffen sein. */
  .knoepfe{ flex-direction:column; align-items:stretch; }
  .knopf{ width:100%; padding:16px 22px; }
  .knopf-gross{ font-size:1.06rem; padding:17px 24px; }
  .steckbrief > div{ flex:1 1 100%; }
  .anleitung-rahmen{ height:80vh; }
  .bereichszeile::before, .bereichszeile::after{ max-width:24px; }
}

/* ------------------------------------------------------------ Druck */
@media print{
  body{ background:#fff; color:#000; }
  .kopfleiste, .fussleiste, .knoepfe, .anleitung, .weiter, .zum-inhalt{ display:none; }
  .feld{ background:none; clip-path:none; border:1px solid #999; }
  .fuellung{ display:none; }
  a{ color:#000; }
}

/* --------------------------------------- Das Zeichen neben dem Willkommen */
.willkommensbereich{
  display:flex; align-items:center; gap:clamp(24px,5vw,64px);
}
.willkommenstext{ flex:1 1 560px; min-width:0; }

.willkommenszeichen{
  flex:0 0 auto;
  display:flex; flex-direction:column; align-items:center; gap:26px;
}
.grosses-rad{
  color:#FFFFFF; opacity:.90;
  /*Original: color:var(--tuerkis); opacity:.42; */
  width:clamp(160px, 22vw, 300px) !important;
  height:clamp(160px, 22vw, 300px) !important;
}

@media (max-width: 860px){
  .willkommensbereich{ display:block; }
  .willkommenszeichen{ display:none; }
}

/* -------------------------------------------- Hinweis auf die Kartenquelle */
/* Steht in inc/einstellungen.php keine Anzeige, wird dieser Kasten gar
   nicht erst ausgegeben — es gibt also nie einen Link ins Leere. */
.kartenkasten{
  position:relative; z-index:0; isolation:isolate;
  display:flex; flex-wrap:wrap; align-items:center; gap:20px 28px;
  padding:26px 30px;
  background:var(--kante);
  clip-path:polygon(var(--ecke) 0, calc(100% - var(--ecke)) 0, 100% var(--ecke),
                    100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%,
                    var(--ecke) 100%, 0 calc(100% - var(--ecke)), 0 var(--ecke));
}
/* Das Logo der Plattform, unverändert und in seiner eigenen Größe —
   verzerrt oder eingefärbt dürfte man es ohnehin nicht zeigen. */
.kartenkasten-zeichen{
  flex:none; display:flex; line-height:0;
  border-radius:11px; overflow:hidden;
  transition:transform .25s ease;
}
.kartenkasten-zeichen:hover{ transform:translateY(-2px); }
.kartenkasten-zeichen img{ display:block; width:48px; height:48px; }

.kartenkasten-text{ flex:1 1 320px; min-width:0; }
.kartenkasten h3{
  margin:0 0 6px; font-size:1.26rem; font-weight:600; letter-spacing:-.02em;
}
.kartenkasten p{ margin:0; color:var(--leise); font-size:1rem; line-height:1.55; }

@media (max-width: 560px){
  .kartenkasten{ padding:22px; }
  .kartenkasten .knopf{ width:100%; }
}