/* Collagen-App: was NUR diese App braucht.
   Alles Gemeinsame steht in /app/basis.css und wird davor geladen: Farbtokens,
   Raster, Kopfzeile, Knoepfe, Werbestreifen, Begruessung, Toast, Bewegung.

   DER UNTERSCHIED ZU DEN GESCHWISTERN: hier wird gebaut, nicht gelesen.
   Die Buehne ist eine Bahn von oben nach unten (waehlen, gestalten,
   Vorschau, speichern) und die einzige Flaeche, die scrollt.

   FARBEN: jede eigene Farbe PAARWEISE hell und dunkel. @media erhoeht die
   Spezifitaet nicht: wer nur den Hellwert setzt, hat den Dunkelmodus
   kaputtgemacht. AUSNAHME mit Absicht: der Inhalt der Leinwand (canvas)
   haengt NICHT am Systemmodus, er folgt allein der gewaehlten
   Hintergrundfarbe. Das fertige Bild muss ueberall gleich aussehen. */

:root {
  --co-blau:   #0091c8;   /* aktive Chips, wie die Bedienelemente der Basis */
  --co-orange: #ff7d0f;   /* der Auswahlrahmen im Daumenkino */
  --co-gruen:  #17864a;   /* Reserve fuer Erfolgsmeldungen */
}

@media (prefers-color-scheme: dark) {
  :root {
    /* PAARWEISE mitziehen, sonst leuchtet der Rahmen nachts wie ein
       Scheinwerfer neben den gedimmten Fotos. */
    --co-blau:   #35b4e0;
    --co-orange: #ff9836;
    --co-gruen:  #3ddc84;
  }
}

/* Kopf, Buehne, Werbung: drei Zeilen, die mittlere nimmt den Rest. */
.app { grid-template-rows: auto minmax(0, 1fr) auto; }

/* Das Hinweiszeichen in der Kopfzeile, wie bei Spiele und Teste dich. */
.kopf-knopf {
  flex: none;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--linie);
  border-radius: 50%;
  background: var(--karte);
  color: var(--blau);
  font-family: inherit;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

/* ---------- Die Buehne ---------- */

.buehne {
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 2px 2px 6px;
}

/* Ein Abschnitt je Schritt, mit Luft dazwischen: der Ablauf soll sich wie
   eine Anleitung von oben nach unten lesen.
   :not(.hidden) ist Pflicht: die Basis kennt .hidden mit display:none, wird
   aber VOR dieser Datei geladen. Ein schlichtes display:grid haette bei
   gleicher Spezifitaet gewonnen, und die Visionboard-Felder stuenden auch
   im Collage-Modus da. Dieselbe Falle hat schon die Spiele-App erwischt. */
.abschnitt:not(.hidden) { display: grid; gap: 8px; margin-bottom: 14px; }

.co-waehlen { font-size: 21px; }

/* Der Zaehler "7 von 20": leise, aber immer da, damit niemand raetselt,
   wie viele noch passen. */
.co-zaehler {
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
  text-align: center;
}

/* Kleine Hinweiszeilen (Tausch-Erklaerung, iPhone-Speichern). */
.co-hinweis {
  margin: 0;
  font-size: 12.5px;
  color: var(--gedimmt);
  text-align: center;
  line-height: 1.35;
}

/* ---------- Daumenkino ----------

   Die gewaehlten Bilder als kleine Quadrate. Sortiert wird durch Tauschen
   (antippen, dann ein anderes antippen), deshalb braucht die Leiste kein
   Ziehen und darf ganz normal umbrechen. */

.dk-leiste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.dk-leiste:empty { display: none; }

.dk-kachel {
  position: relative;
  width: 64px; height: 64px;
  padding: 0;
  border: 3px solid transparent;
  border-radius: 10px;
  overflow: hidden;
  background: var(--karte);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  transition: transform .08s ease, border-color .12s ease;
}
.dk-kachel:active { transform: scale(.94); }
.dk-kachel img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}
/* Das angetippte Bild traegt den orangen Rahmen: es wartet auf seinen
   Tauschpartner. */
.dk-kachel.an { border-color: var(--co-orange); }

/* Das ✕ zum Entfernen, klein in der Ecke der Kachel. Dunkle Scheibe mit
   weissem Kreuz: auf jedem Foto lesbar, egal wie hell es ist. */
.dk-x {
  position: absolute;
  top: 2px; right: 2px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, .62);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ---------- Gestalten: Chips ----------

   Dieselbe Handschrift wie die sp-Knoepfe der Spiele-App: flache Pillen,
   die aktive gefuellt in Blau. .chip steht in der Druckrueckmeldung der
   Basis, das Anfassen fuehlt sich also automatisch richtig an. */

/* :not(.hidden) aus demselben Grund wie bei .abschnitt: die Layout-Zeile
   wird im Visionboard-Modus ausgeblendet und muss es auch bleiben. */
.chipzeile:not(.hidden) {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.chip-name {
  flex: none;
  width: 88px;
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
}

.chip {
  min-height: 40px;
  padding: 0 14px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}
.chip:active { transform: scale(.96); }
.chip.an { background: var(--co-blau); border-color: var(--co-blau); color: #fff; }

/* Die Hintergrund-Chips sind runde Farbfelder. Ihre Fuellung kommt fest aus
   app.js: es sind LEINWANDFARBEN, sie folgen mit Absicht nicht dem
   Dunkelmodus (Begruendung im Dateikopf). Der aktive bekommt einen blauen
   Ring mit Abstand, damit er auch auf Weiss und Anthrazit erkennbar ist. */
.chip.chip-farbe {
  width: 40px;
  min-height: 40px;
  padding: 0;
  border: 2px solid var(--linie);
  border-radius: 50%;
}
.chip.chip-farbe.an {
  border-color: var(--co-blau);
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 6px var(--co-blau);
}

/* ---------- Visionboard-Felder ---------- */

.co-feld { display: grid; gap: 4px; }
.co-feld-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--leise);
}
.co-eingabe {
  min-height: 46px;
  padding: 0 12px;
  border: 2px solid var(--linie);
  border-radius: 12px;
  background: var(--karte);
  color: var(--text);
  font-family: inherit;
  font-size: 17px;
  font-weight: 600;
}
.co-eingabe:focus {
  outline: none;
  border-color: var(--co-blau);
}
.co-eingabe::placeholder { color: var(--gedimmt); }

/* ---------- Vorschau ----------

   Die Leinwand liegt auf einer Karte, wie die Spielfelder der Spiele-App.
   Das canvas rechnet intern in voller Exportgroesse (1080er Breite) und
   wird nur per CSS auf Bildschirmbreite gebracht: Vorschau und fertiges
   Bild sind ein und dasselbe. */

.co-leinwand-karte {
  background: var(--karte);
  border-radius: 14px;
  padding: 8px;
}
.co-leinwand-karte canvas {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
  /* Feine Linie drumherum: eine weisse Leinwand auf der hellen Karte
     waere sonst randlos unsichtbar. */
  box-shadow: 0 0 0 1px var(--linie);
}

/* ---------- Kleine Bildschirme ---------- */

@media (max-height: 640px) {
  .abschnitt { margin-bottom: 10px; }
  .dk-kachel { width: 56px; height: 56px; }
  .chip { min-height: 36px; padding: 0 11px; font-size: 14px; }
  .chip.chip-farbe { width: 36px; min-height: 36px; }
  .co-eingabe { min-height: 40px; font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .dk-kachel, .chip { transition: none; }
}

/* ---------- Bilder holen ----------
   Zwei kompakte Wege nebeneinander (Manni, 31.07.2026: der alte Vollbreite-
   Knopf war "zu gross und funktioniert nicht"). Beides sind LABELS um ein
   unsichtbares Dateifeld: kein Skript-Klick, den ein Handy verschlucken kann.
   Das Feld ist absichtlich NICHT display:none, manche Browser ignorieren
   sonst das Label; es ist nur einen Pixel klein und durchsichtig. */
/* Dezent wie die Bedienknoepfe der Geschwister-Apps (Manni, 31.07.2026:
   "kleiner und schoener, wie in den anderen apps auch"): Kartenflaeche,
   feine Kante, nur so breit wie der Inhalt, mittig in der Zeile. */
.co-holen { display: flex; justify-content: center; gap: 7px; flex-wrap: wrap; }
.co-holknopf {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 42px; padding: 0 14px;
  border: 2px solid var(--linie); border-radius: 12px;
  background: var(--karte); color: var(--text);
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none; user-select: none;
  transition: transform .08s ease;
}
.co-holknopf:active { transform: scale(.96); }
.co-unsichtbar {
  position: absolute; width: 1px; height: 1px;
  opacity: 0; overflow: hidden; pointer-events: none;
}

/* ---------- Speichern-Zeile ---------- */
.co-speichern { display: grid; grid-template-columns: 2fr 1fr; gap: 7px; }
.co-speichern .knopf { font-size: 17px; }

/* ---------- Handy-Feinschliff ----------
   Manni, 31.07.2026: "auf dem handy sieht es furchtbar aus". Auf 375 px
   standen Label und Chips gequetscht in einer Zeile. Jetzt bekommt jedes
   Label seine eigene schmale Zeile als kleine Ueberschrift, die Chips
   darunter duerfen umbrechen und sind eine Nummer kompakter. */
@media (max-width: 480px) {
  .chipzeile:not(.hidden) { row-gap: 5px; }
  .chip-name {
    flex-basis: 100%;
    width: auto;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
  }
  .chip { min-height: 34px; padding: 0 11px; font-size: 13px; border-radius: 10px; }
  .chip.chip-farbe { width: 34px; min-height: 34px; }
  .co-speichern .knopf { font-size: 15px; }
}