/* =========================================================================
   Kleine Detektive – Rätsel-Generatoren
   © 2026 Katharina Feiri · kleine-detektive.de · Alle Rechte vorbehalten.

   Diese Datei darf nicht kopiert, weiterverbreitet oder auf anderen
   Websites eingesetzt werden. Für die erzeugten Rätselblätter gelten
   eigene, großzügigere Bedingungen: kleine-detektive.de/nutzung
   ========================================================================= */

/* =========================================================================
   Kleine Detektive – gemeinsames Design für alle Rätsel-Generatoren
   Wird von allen Generator-Seiten eingebunden. Nur hier Farben/Abstände
   ändern, dann sehen alle Generatoren gleich aus.
   ========================================================================= */

@font-face{
  font-family:"Source Sans 3";
  src:url("fonts/SourceSans3-VF.woff2?v=1") format("woff2-variations");
  font-weight:200 900; font-style:normal; font-display:swap;
}

/* Selbst gehostete Zeichenschriften, damit Rätselblätter auf jedem Gerät
   und in jedem PDF gleich aussehen. Beide Noto-Schriften stehen unter der
   SIL Open Font License 1.1 und dürfen ausgeliefert werden – anders als
   die System-Emoji von Windows oder Apple. Auf genau die verwendeten
   Zeichen reduziert, zusammen rund 56 KB. Siehe fonts/LIESMICH.md */
@font-face{
  font-family:"KD Emoji";
  src:url("fonts/NotoEmoji-subset.woff2?v=1") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"KD Symbole";
  src:url("fonts/NotoSansSymbols2-subset.woff2?v=1") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}

:root{
  --ink:#1f1d1a;
  --muted:#6b665c;
  --line:#e3ddcd;
  --paper:#ffffff;
  --page:#efece4;
  --panel:#faf7ee;
  /* Ein einziger Akzent. Zum Umfaerben nur diese vier Zeilen anfassen -
     und dieselben Werte in FARBEN in raetsel.js. */
  --akzent:#2b6f88;
  --akzent-hell:#e8f2f6;
  --akzent-rand:#bcd8e2;
  --akzent-text:#205a70;
  --radius:12px;
  /* Rätselblatt: erst die eigenen Schriften. Das Blatt sieht dadurch am
     Bildschirm, im Druck und im PDF identisch aus – und einfarbige Zeichen
     drucken auf einem Schwarz-Weiß-Drucker sauber, statt zu grauem Matsch
     zu verlaufen. */
  --emoji:"KD Emoji","KD Symbole","Source Sans 3",sans-serif;
  /* Bedienoberfläche: hier darf das System seine bunten Emoji beisteuern,
     das landet ohnehin nie auf Papier. */
  --emoji-ui:"Apple Color Emoji","Noto Color Emoji","Segoe UI Emoji",
             "KD Emoji","KD Symbole",sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0}
body.kd{
  /* "KD Symbole" faengt Zeichen ab, die Source Sans nicht hat – etwa die
     Sternchen der Schwierigkeitsangabe. */
  font-family:"Source Sans 3","KD Symbole","KD Emoji",-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--ink); background:var(--page);
  font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* ---------- Rahmen ---------- */
.kd-app{max-width:1180px;margin:0 auto;padding:22px 18px 48px}
.kd-head{margin-bottom:18px}
.kd-head h1{font-size:27px;font-weight:900;margin:0}
.kd-head h1 .kd-icon{font-family:var(--emoji-ui);font-size:26px}
.kd-head .kd-sub{color:var(--muted);font-size:15px;margin-top:5px}

/* ---------- Bedienleiste ---------- */
.kd-controls{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(175px,1fr));
}
.kd-field{display:flex;flex-direction:column;gap:5px;min-width:0}
.kd-field label{font-size:12px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--muted)}
.kd-field input,.kd-field select{
  font:inherit;font-size:15px;padding:9px 10px;
  border:1px solid #cfc8b6;border-radius:8px;background:#fff;color:var(--ink);
  width:100%;min-width:0;
}
.kd-field input:focus,.kd-field select:focus{outline:2px solid var(--akzent);outline-offset:1px;border-color:var(--akzent)}
.kd-field input[type=range]{padding:0;border:0;background:transparent}
.kd-field .kd-val{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* ---------- Buttons ---------- */
.kd-actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.kd-btn{
  font:inherit;font-size:15px;font-weight:700;
  padding:11px 18px;border-radius:9px;border:1px solid transparent;
  cursor:pointer;display:inline-flex;align-items:center;gap:8px;line-height:1;
}
.kd-btn:disabled{opacity:.5;cursor:default}
.kd-btn-primary{background:var(--ink);color:#fff}
.kd-btn-primary:hover:not(:disabled){background:#38332b}
.kd-btn-ghost{background:#fff;border-color:#cfc8b6;color:var(--ink)}
.kd-btn-ghost:hover:not(:disabled){border-color:var(--akzent);background:var(--akzent-hell)}
.kd-btn .kd-icon{font-family:var(--emoji-ui)}

.kd-status{font-size:13px;color:var(--muted);margin:12px 2px 0;min-height:1.2em}

/* ---------- Vorschau + Seitenspalte ---------- */
/* minmax(0,1fr) statt 1fr: Sonst blaeht das 794px breite Blatt die Spalte
   ueber die Bildschirmbreite hinaus auf - 1fr bedeutet minmax(auto,1fr),
   und dieses auto richtet sich nach der Mindestbreite des Inhalts. */
.kd-main{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:22px;margin-top:22px;align-items:start}
.kd-preview{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:0;overflow:auto;
}
.kd-side{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 18px;font-size:14px;line-height:1.55;
}
.kd-side h2{font-size:16px;margin:0 0 10px;font-weight:800}
.kd-side p{margin:0 0 10px;color:#54504a}
.kd-side p:last-child{margin-bottom:0}

/* ---------- Das Rätselblatt (A4) ---------- */
/* Feste Pixelmaße = A4 bei 96 dpi. Das Blatt sieht am Bildschirm,
   im Druck und im PDF identisch aus. */
.kd-blatt{
  /* flex-shrink:0 ist hier entscheidend: .kd-buehne ist ein Flex-Container,
     und ohne das schrumpft das Blatt auf schmalen Fenstern unter 794px.
     Dann bricht sein Innenleben anders um, und das erzeugte PDF sieht je
     nach Fensterbreite anders aus. Verkleinert wird nur fuer die Anzeige,
     ueber transform in KD.anpassen(). */
  width:794px;flex:0 0 auto;min-height:1123px;
  background:var(--paper);
  padding:56px 54px 48px;
  margin:0 auto;
  display:flex;flex-direction:column;
  transform-origin:top left;
}
.kd-blatt-kopf{
  display:flex;justify-content:space-between;align-items:flex-start;gap:22px;
  border-bottom:2px solid var(--ink);padding-bottom:13px;
}
.kd-kicker{font-size:12px;font-weight:800;letter-spacing:1.8px;color:var(--muted)}
.kd-titel{font-size:31px;font-weight:900;margin-top:3px;line-height:1.15}
.kd-meta{font-size:11.5px;color:var(--muted);text-align:right;line-height:1.65;white-space:nowrap}
.kd-auftrag{font-size:16px;line-height:1.5;margin:22px 0 18px}
.kd-auftrag b{font-weight:800}
.kd-feld{
  border:1px solid var(--line);border-radius:10px;background:#fff;
  padding:22px;
  /* Der Kasten umschliesst seinen Inhalt. Wuerde er den Rest der Seite
     fuellen, entstuende ein grosser leerer Rahmen. */
  flex:0 0 auto;
}
.kd-hinweis{font-size:13px;color:var(--muted);margin-top:14px}
/* SVG-Generatoren (Labyrinth, Kreuzworträtsel, Spirograph) skalieren
   sich in das Blatt hinein, statt es zu sprengen. */
.kd-feld svg{max-width:100%;height:auto;display:block;margin:0 auto}
.kd-feld{display:flex;align-items:center;justify-content:center}
.kd-feld > *{max-width:100%}
.kd-feld.kd-links{display:block}
.kd-blatt-fuss{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--ink);
  display:flex;align-items:baseline;gap:14px;font-size:15px;
}
.kd-blatt-fuss .kd-linie{flex:1;border-bottom:2px solid var(--ink);height:20px}
.kd-marke{font-size:11px;color:var(--muted);margin-top:12px;text-align:right}
.kd-loesung{
  margin-top:18px;padding:13px 16px;background:var(--akzent-hell);
  border:1px solid var(--akzent-rand);border-radius:9px;font-size:16px;
}
.kd-loesung strong{letter-spacing:3px}

/* Vorschau skaliert das Blatt, ohne es zu verzerren */
.kd-buehne{padding:20px;display:flex;justify-content:center;background:#f6f4ee}
.kd-buehne .kd-blatt{box-shadow:0 2px 14px rgba(0,0,0,.10)}

/* ---------- Bausteine für die Rätsel selbst ---------- */
.kd-zeichen{display:flex;flex-wrap:wrap;gap:16px 20px;align-items:center}
.kd-zeichen span{font-family:var(--emoji);font-size:40px;line-height:1}
.kd-code{font-size:25px;font-weight:900;letter-spacing:4px;line-height:1.75;word-break:break-word}
.kd-kaesten{display:flex;flex-wrap:wrap;gap:8px}
.kd-kasten{
  width:38px;height:38px;border:2px solid var(--ink);border-radius:4px;background:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:900;font-size:19px;
}
.kd-legende-titel{margin:20px 0 9px;font-size:15px;font-weight:800}
.kd-legende{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.kd-legende-feld{
  border:1px solid #c9c2b0;border-radius:6px;background:#fff;
  min-height:40px;display:flex;align-items:center;justify-content:center;gap:6px;font-size:14px;
}
.kd-legende-feld .kd-sym{font-family:var(--emoji);font-size:19px;line-height:1}

/* ---------- Ladeanzeige ---------- */
/* Liegt über der Vorschau, solange gerechnet wird. Der Spruch wechselt,
   damit das Warten nicht wie ein Hänger wirkt. */
.kd-laden{
  position:absolute;inset:0;z-index:5;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;
  background:rgba(255,255,255,.86);
  backdrop-filter:blur(1px);
  text-align:center;padding:20px;
}
.kd-laden-lupe{
  font-family:var(--emoji-ui);font-size:44px;line-height:1;
  animation:kd-suchen 1.6s ease-in-out infinite;
}
@keyframes kd-suchen{
   0%   {transform:translate(-26px,0) rotate(-12deg)}
  25%   {transform:translate(0,-9px)  rotate(4deg)}
  50%   {transform:translate(26px,0)  rotate(12deg)}
  75%   {transform:translate(0,-9px)  rotate(-4deg)}
  100%  {transform:translate(-26px,0) rotate(-12deg)}
}
.kd-laden-text{
  font-size:15px;font-weight:700;color:#4a463e;max-width:340px;min-height:2.6em;
}
.kd-laden-punkte{display:flex;gap:6px}
.kd-laden-punkte i{
  width:7px;height:7px;border-radius:50%;background:var(--akzent);display:block;
  animation:kd-huepf 1.1s ease-in-out infinite;
}
.kd-laden-punkte i:nth-child(2){animation-delay:.15s}
.kd-laden-punkte i:nth-child(3){animation-delay:.3s}
@keyframes kd-huepf{
  0%,60%,100%{transform:translateY(0);opacity:.35}
  30%        {transform:translateY(-7px);opacity:1}
}
@media (prefers-reduced-motion: reduce){
  .kd-laden-lupe,.kd-laden-punkte i{animation:none}
}
.kd-preview{position:relative}

/* Wo Quellenzeile oder Hinweisblock in einem Platzhalter stecken (Kreuzwort-
   raetsel), muss dieser an den unteren Blattrand rutschen - margin-top:auto
   wirkt nur auf direkte Flex-Kinder, nicht auf verschachtelte Elemente. */
.kd-blatt > .kd-fuss-platz{margin-top:auto}

/* Quellenzeile auf dem Raetselblatt (Seite 1) */
.kd-quelle{
  /* schiebt sich und alles darunter an den unteren Blattrand */
  margin-top:auto;padding-top:11px;border-top:1px solid var(--line);
  display:flex;align-items:center;gap:13px;break-inside:avoid;
}
.kd-quelle-text{flex:1 1 auto;min-width:0}
.kd-quelle-1{font-size:12px;font-weight:800;color:#54504a}
.kd-quelle-2{font-size:10.5px;color:var(--muted);margin-top:2px;line-height:1.4}
.kd-quelle-qr{
  flex:0 0 auto;width:52px;height:52px;display:block;
  background:#fff;image-rendering:pixelated;
}

/* Hinweisblock auf der Loesungsseite */
.kd-tipp{
  margin-top:auto;
  border:1px solid var(--akzent-rand);border-left:4px solid var(--akzent);
  background:var(--akzent-hell);border-radius:8px;
  padding:13px 16px;
  break-inside:avoid;
  display:flex;align-items:center;gap:16px;
}
.kd-tipp-inhalt{flex:1 1 auto;min-width:0}
.kd-tipp-qr{
  flex:0 0 auto;width:76px;height:76px;display:block;
  background:#fff;border:3px solid #fff;border-radius:5px;
  image-rendering:pixelated;   /* QR-Kanten hart halten */
}
@media(max-width:420px){
  .kd-tipp{flex-direction:column;align-items:flex-start}
}
.kd-tipp-titel{font-size:14.5px;font-weight:900;margin-bottom:4px}
.kd-tipp-text{font-size:13px;line-height:1.45;color:#4a463e}
.kd-tipp-gutschein{
  margin-top:7px;font-size:13.5px;color:var(--ink);
}
.kd-tipp-gutschein b{
  font-weight:900;letter-spacing:1px;
  background:#fff;border:1px dashed var(--akzent-rand);border-radius:5px;
  padding:1px 7px;white-space:nowrap;
}
.kd-tipp-ziel{
  display:inline-block;margin-top:7px;
  font-size:13px;font-weight:800;letter-spacing:.3px;
  color:var(--akzent-text);text-decoration:none;border-bottom:1px solid var(--akzent);
}
.kd-tipp-ziel:hover{color:#14414f;border-bottom-color:#14414f}

/* Das Blatt darf wachsen, aber nichts darf darueber hinausragen. */
.kd-blatt > *{flex-shrink:0}
.kd-blatt .kd-feld{min-height:0}

/* ---------- Druck & PDF ---------- */
@page{size:A4;margin:0}
@media print{
  body.kd{background:#fff}
  .kd-app{max-width:none;padding:0}
  .kd-head,.kd-controls,.kd-actions,.kd-status,.kd-side,.kd-nodruck{display:none !important}
  .kd-main{display:block}
  .kd-preview{border:0;border-radius:0;overflow:visible}
  .kd-buehne{padding:0;background:#fff;display:block}
  /* 296mm statt 297: Ein Blatt, das die Seite exakt ausfuellt, beendet
     sie schon selbst - ein zusaetzlicher Seitenumbruch schiebt dann eine
     leere Seite dazwischen. Muss zu der Angabe in raetsel.js passen. */
  .kd-blatt{box-shadow:none;margin:0;width:210mm;height:296mm;overflow:hidden;transform:none !important}
  .kd-blatt+.kd-blatt{page-break-before:always}
}

/* ---------- Mobil ---------- */
@media(max-width:980px){
  .kd-main{grid-template-columns:minmax(0,1fr)}
  .kd-side{order:-1}
}
@media(max-width:560px){
  .kd-app{padding:16px 12px 36px}
  .kd-head h1{font-size:22px}
  .kd-buehne{padding:12px 0}
}

/* Steht dort, wo frueher der Druckknopf war. Der Browserdruck haengt
   von den Einstellungen des Druckdialogs ab (Skalierung, Raender,
   Kopfzeilen); ein PDF hat feste A4-Seiten und druckt ueberall gleich. */
.kd-druckhinweis{align-self:center;font-size:13.5px;color:var(--muted);line-height:1.4;max-width:320px}