/* ══════════════════════════════════════════════════════════════════════════
   Königlich-Preußische Anstalt für Fremdenempfang und Integration
   in den Frankfurter Kulturraum · Anno Domini 1888

   Gemeinsame Gestaltung aller Seiten. Die Werte stammen wörtlich aus den
   fünf Rätsel-Prototypen; vereinheitlicht wurde auf die Mehrheitsfassung
   (Papier #f4ecd8, Tinte #2b2119, Bogen mit doppeltem Sepia-Rahmen).
   Rätselspezifisches CSS steht weiterhin in der jeweiligen Seite.
   ══════════════════════════════════════════════════════════════════════════ */

:root{
  --paper:#f4ecd8;
  --paper2:#efe4cc;
  --ink:#2b2119;
  --sepia:#6b4e2e;
  --sepia-l:#a98a5f;
  --accent:#7b2d26;
  --green:#2f5d3a;
  --red:#8b1a1a;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:Georgia,"Times New Roman",Times,serif;
  line-height:1.5;
  padding:clamp(10px,2.5vw,28px);
  -webkit-text-size-adjust:100%;
  -webkit-tap-highlight-color:transparent;
}

/* Papierstruktur — reines SVG-Rauschen als data-URI, keine externe Datei */
body::before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:5;
  opacity:.09; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Vergilbte Ränder */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:4;
  background:radial-gradient(120% 100% at 50% 40%, rgba(255,255,255,0) 55%, rgba(120,86,44,.16) 100%);
}

/* ───────────── Bogen der Anstalt ───────────── */
.sheet{
  position:relative;
  z-index:1;
  max-width:1120px;
  margin:0 auto;
  background:var(--paper2);
  border:1px solid var(--sepia);
  outline:1px solid var(--sepia);
  outline-offset:4px;
  padding:clamp(14px,3vw,38px) clamp(12px,3vw,34px);
  box-shadow:0 2px 0 rgba(107,78,46,.25);
}
/* Textseiten (Empfang, Übersicht, Passstelle) lesen sich schmaler besser */
.sheet--schmal{ max-width:860px; }

/* ───────────── Sprachwahl, oben rechts ─────────────
   Bewusst im Textfluss und nicht absolut gesetzt: bei absoluter Lage schöbe
   sich am Handy die Behördenzeile unter die Flaggen. So bekommt die Zeile
   ihren eigenen Platz, und nichts kann sich überlagern. Der negative
   Aussenabstand zieht die Flaggen in die Ecke des Bogens hinein. */
.sprachwahl{
  position:relative;
  z-index:3;
  display:flex;
  justify-content:flex-end;
  gap:2px;
  margin:clamp(-10px,-1.4vw,-4px) clamp(-10px,-1.4vw,-4px) 0 0;
}
.sprachwahl button{
  display:flex;
  align-items:center;
  justify-content:center;
  width:44px; height:44px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.sprachwahl svg{
  display:block;
  width:28px; height:auto;
  border:1px solid var(--sepia);
  opacity:.42;
  filter:saturate(.55);
  transition:opacity .15s, filter .15s, box-shadow .15s;
}
.sprachwahl button[aria-pressed="true"] svg{
  opacity:1;
  filter:none;
  box-shadow:0 0 0 2px var(--paper2), 0 0 0 3px var(--accent);
}
.sprachwahl button:hover svg{ opacity:.85; filter:none; }
.sprachwahl button:focus-visible svg{ outline:2px dashed var(--accent); outline-offset:3px; }

/* ───────────── Kopf ───────────── */
header{ text-align:center; }

/* Das gezeichnete Behördenwappen der Rätselbögen */
.crest{
  display:block;
  margin:0 auto clamp(4px,1vw,10px);
  width:clamp(46px,9vw,64px);
  height:auto;
}
.authority{
  margin:0;
  font-size:clamp(11px,2.6vw,15px);
  font-variant:small-caps;
  letter-spacing:.14em;
  line-height:1.35;
  color:var(--sepia);
}
h1{
  margin:.45em 0 .1em;
  font-size:clamp(18px,4.6vw,30px);
  font-weight:400;
  font-variant:small-caps;
  letter-spacing:.06em;
}
.anno{
  margin:0;
  font-size:clamp(10px,2.3vw,13px);
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--sepia);
}

/* Doppelstrich mit Schnörkel — trennt Kopf, Prüfung und Fuß */
.rule{
  display:flex; align-items:center; gap:10px;
  margin:clamp(10px,2.2vw,20px) 0;
}
.rule::before,.rule::after{
  content:""; flex:1; height:3px;
  border-top:1px solid var(--sepia);
  border-bottom:1px solid var(--sepia);
}
.rule svg{ width:26px; height:12px; flex:none; }

/* ───────────── Fließtext ───────────── */
.fliesstext{
  margin:0 auto;
  max-width:58ch;
  text-align:left;
  font-size:clamp(16px,3.4vw,18px);
  line-height:1.65;
  hyphens:auto;
  -webkit-hyphens:auto;
}
.fliesstext + .fliesstext{ margin-top:.9em; }

/* Bedienhinweis unter dem Erzähltext — leise gesetzt, er ist nur Beiwerk. */
.howto{
  margin:1em auto 0;
  max-width:58ch;
  text-align:center;
  font-size:clamp(10px,2.2vw,12.5px);
  font-style:italic;
  color:var(--sepia);
}

/* ───────────── Eingabefelder ───────────── */
.eingabe-zeile{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  align-items:center;
  gap:clamp(8px,2vw,14px);
  margin:clamp(12px,2.6vw,20px) 0 0;
}
.eingabe-zeile input{
  min-height:44px;
  padding:.4em .6em;
  border:1px solid var(--ink);
  background:var(--paper);
  font-family:inherit;
  font-size:clamp(15px,3.4vw,19px);
  letter-spacing:.14em;
  text-align:center;
  color:var(--ink);
  box-shadow:inset 0 2px 5px rgba(43,33,25,.18);
}
.eingabe-zeile input:focus-visible{ outline:2px dashed var(--accent); outline-offset:3px; }

/* ───────────── Knöpfe ─────────────
   Hauptknopf: Tinte auf Papier umgekehrt, gesetzt in Kapitälchen. */
.check{
  font-family:inherit;
  font-size:clamp(13px,2.9vw,17px);
  font-variant:small-caps;
  letter-spacing:.22em;
  color:var(--paper);
  background:var(--ink);
  border:1px solid var(--ink);
  outline:1px solid var(--ink);
  outline-offset:3px;
  padding:.42em 2.1em;
  cursor:pointer;
  text-decoration:none;
}
.check:hover{ background:var(--accent); border-color:var(--accent); outline-color:var(--accent); }
.check:focus-visible{ outline:2px dashed var(--accent); outline-offset:4px; }
.check:active{ transform:translateY(1px); }
.check[hidden]{ display:none; }

/* Nebenschauplatz: Navigation, kein Spielzug — darum zurückhaltender. */
.back{
  font-family:inherit;
  font-size:clamp(10.5px,2.3vw,13.5px);
  font-variant:small-caps;
  letter-spacing:.16em;
  color:var(--ink);
  background:transparent;
  border:1px solid var(--sepia);
  outline:1px solid var(--sepia);
  outline-offset:3px;
  padding:.4em 1.5em;
  cursor:pointer;
  text-decoration:none;
}
.back:hover{ color:var(--accent); border-color:var(--accent); outline-color:var(--accent); }
.back:focus-visible{ outline:2px dashed var(--accent); outline-offset:4px; }

/* Beide Knöpfe als bequemes Fingerziel: aus der Schriftgröße allein ergäben
   sich am Handy nur rund 22 bzw. 29 Pixel Höhe. */
.check,.back{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:44px;
}

.page-nav{
  margin-top:clamp(16px,3.4vw,30px);
  text-align:center;
}

/* ───────────── Ergebniswort ─────────────
   Platz wird dauerhaft freigehalten — so springt die Seite nicht, wenn das
   Wort erscheint oder wieder verschwindet. */
.result{
  margin:.7em 0 0;
  text-align:center;
  font-size:clamp(26px,7vw,46px);
  letter-spacing:.06em;
  line-height:1.1;
  min-height:1.1em;
  visibility:hidden;
}
.result.shown{ visibility:visible; }
.result.ok{ color:var(--green); }
.result.no{ color:var(--red); }

/* Kurze Meldung in Fließtextgröße, etwa „Die Eingabe war leider nicht korrekt" */
.meldung{
  margin:.8em 0 0;
  min-height:1.4em;
  text-align:center;
  font-size:clamp(14px,3vw,17px);
  color:var(--red);
}

/* ───────────── Hinweis ohne JavaScript ─────────────
   Standardmäßig sichtbar; das Skript blendet ihn erst aus, wenn alles steht.
   Läuft kein JavaScript — oder bricht es ab —, bleibt die Erklärung stehen. */
.js-warn{
  margin:clamp(10px,2vw,18px) 0 0;
  padding:.7em 1em;
  border:1px solid var(--red);
  outline:1px solid var(--red);
  outline-offset:3px;
  background:rgba(139,26,26,.06);
  color:var(--red);
  font-size:clamp(10.5px,2.4vw,13.5px);
  line-height:1.55;
  text-align:center;
}
.js-warn[hidden]{ display:none; }

/* ───────────── Fuß ───────────── */
footer{
  margin-top:clamp(14px,3vw,24px);
  text-align:center;
  font-size:clamp(9px,2vw,11px);
  letter-spacing:.12em;
  color:var(--sepia);
  font-variant:small-caps;
}

.svg-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* Ein einzelner Knopf, mittig auf dem Bogen */
.mitte{ text-align:center; margin:0; }

/* Ein Hauptknopf, der noch nicht darf — etwa „Prüfen", solange das Gitter
   nicht voll ist. Sichtbar bleibt er, damit klar ist, was als Nächstes kommt. */
.check:disabled,
.check:disabled:hover{
  background:transparent;
  color:var(--sepia-l);
  border-color:var(--sepia-l);
  outline-color:var(--sepia-l);
  cursor:not-allowed;
  transform:none;
}