/* ==========================================================================
   Wimmel Wizard v3 — App-Shell (Schritt 2) und wiederkehrende Screen-Atome
   Quelle: referenz/App-Flow-v4-OatlyWimmel.dc.html
   ========================================================================== */

/* Design-Korrektur (07.09.2026, "Header fixieren"): war position:sticky, jetzt echtes
   position:fixed -- bleibt so immer oben, unabhaengig von Scroll-Position (sticky "klebt" nur
   relativ zum eigenen Elternelement, was auf sehr langen Screens theoretisch Raum fuer Abweichungen
   liess). Auf Mobil (< 1024px) an die Breite/Zentrierung des 430px-App-Shells angeglichen (gleiches
   Muster wie .bottom-bar unten); auf Desktop (siehe @media 1024px weiter unten) wieder volle
   Viewport-Breite wie zuvor, mit intern zentriertem .app-header-inner. #screen-root bekommt den
   dadurch fehlenden Platz per JS zurueck (app-shell.js: syncHeaderSpacing()). */
.app-header {
  position: fixed; top: 0; left: 50%; z-index: 60; width: 100%; max-width: var(--container-max);
  transform: translateX(-50%); background: var(--ink); color: var(--paper);
}

.rail-btn {
  flex: none; cursor: pointer; font-family: 'Archivo Black', sans-serif; font-size: 9px;
  letter-spacing: .06em; text-transform: uppercase; padding: 7px 9px; min-height: 30px;
  border: 2px solid var(--paper-a38); background: none; color: var(--paper-a80);
}
.rail-btn.active { border-color: var(--yellow); background: var(--yellow); color: var(--ink); }

.bottom-bar {
  position: fixed; left: 50%; bottom: 0; z-index: 70; width: 100%; max-width: var(--container-max);
  transform: translateX(-50%); background: var(--paper); border-top: 4px solid var(--ink); padding: 10px 14px 12px;
}
/* GEAENDERT (Sammel-Runde 11.09.2026, letzter Punkt: "entferne auch den Button im Header mit
   'Weitermachen' auf jeder Seite"). Vorher war .bottom-bar ab 1024px per display:none ausgeblendet
   -- #btn-weitermachen im Header war auf Desktop der EINZIGE "weiter"-Button (siehe app-shell.js
   Kommentar dort, jetzt entfernt). Ohne diesen Header-Button braeuchte Desktop sonst ueberhaupt
   keinen "weiter"-Button mehr (nur noch einzeln anklickbare Rail-Reiter oben) -- stattdessen bleibt
   .bottom-bar jetzt auf ALLEN Breakpoints sichtbar, ein einheitlicher Ablauf mobil wie Desktop.
   .app-shell.with-bottom-bar (main.css) reserviert bereits ungebunden an einen Breakpoint den
   noetigen Platz darunter, das greift dadurch jetzt automatisch auch auf Desktop. */

/* ---- Wiederkehrende Screen-Atome ---- */
.scr-pad { padding: 18px 14px 0; }
.kicker {
  margin: 0 0 8px; display: inline-block; border: 3px solid var(--ink); font-family: 'Archivo Black', sans-serif;
  font-size: 9px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 8px;
}
.kicker-yellow { background: var(--yellow); color: var(--ink); }
.kicker-red { background: var(--red); color: var(--paper); }
.kicker-blue { background: var(--blue); color: var(--ink); }

.h1-scr {
  margin: 0; font-family: 'Archivo Black', sans-serif; font-size: 31px; line-height: .88;
  letter-spacing: -.04em; text-transform: uppercase;
}
.caveat-sub { margin: 8px 0 18px; font-family: 'Caveat', cursive; font-size: 20px; line-height: 1.12; }

.card-plain {
  border: 4px solid var(--ink); background: var(--paper); padding: 16px;
}
.chip-toggle {
  cursor: pointer; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 700; padding: 8px 10px;
  border: 3px solid var(--ink); background: #FFF; color: var(--ink);
}
.chip-toggle.on { background: var(--red); color: var(--paper); }

.field {
  width: 100%; min-height: 50px; border: 3px solid var(--ink); background: #FFF; padding: 0 12px;
  font-family: 'Archivo', sans-serif; font-size: 15px;
}
textarea.field { min-height: 108px; resize: none; padding: 11px; line-height: 1.45; }

.pay-btn {
  cursor: pointer; font-family: 'Archivo Black', sans-serif; font-size: 12px; text-transform: uppercase;
  padding: 12px 13px; min-height: 46px; border: 3px solid var(--ink); background: var(--paper); color: var(--ink);
}
.pay-btn.on { background: var(--ink); color: var(--paper); }

#save-hint.flash { border-color: var(--yellow); color: var(--yellow); transition: border-color .15s ease, color .15s ease; }

/* ==========================================================================
   Desktop (Schritt 7) — Breakpoint ab 1024px
   Quelle: referenz/Desktop-v4-OatlyWimmel.dc.html
   ========================================================================== */
/* Desktop-Navigation: unterhalb von 1024px aus, ab 1024px an. Die Grundregel MUSS hier
   stehen und nicht als Inline-Style im HTML -- ein Inline-Style laesst sich von der
   Medienabfrage unten nicht mehr ueberschreiben, und genau daran war die
   Desktop-Navigation bis 19.09.2026 unsichtbar. */
#desktop-nav { display: none; }

@media (min-width: 1024px) {
  /* Fixed-Header auf Desktop wieder volle Viewport-Breite (wie vorher via sticky im dann
     max-width:none-.app-shell) -- .app-header-inner bleibt separat auf 1360px zentriert. */
  .app-header { left: 0; width: 100%; max-width: none; transform: none; }
  #app-header-mobile-row2 { display: none; }
  #app-header .app-header-inner { max-width: var(--desktop-max); margin: 0 auto; padding: 12px 32px; gap: 26px; }
  #desktop-nav { display: flex; gap: 8px; margin-left: 18px; }
  #desktop-nav .rail-btn { min-height: 36px; font-size: 11px; padding: 9px 12px; }
  #app-saved-label { display: inline; }

  main#screen-root { max-width: var(--desktop-max); margin: 0 auto; }
  .scr-pad { max-width: 430px; }

  .dash-desktop-grid { display: grid !important; grid-template-columns: 360px 1fr; gap: 44px; align-items: start; max-width: var(--desktop-max); margin: 0 auto; padding: 40px 32px 70px; }
}
@media (max-width: 1023.98px) {
  .dash-desktop-grid { display: none !important; }
}

/* ==========================================================================
   Ergebnis-Screen (21.09.2026, Schritt 2): EIN DOM fuer Handy und Desktop, siehe
   buildErgebnisAnsicht() in screens/szene.js. Handy: eine Spalte, .erg-seite loest sich auf
   (display: contents), damit der Kopf per order ueber dem Bild steht. Desktop: Raster 1fr/400px.
   ========================================================================== */
.erg { display: flex; flex-direction: column; padding: 18px 0 0; }
.erg-seite { display: contents; }
.erg-kopf { order: 0; padding: 0 14px; margin-bottom: 14px; }
.erg-bild { order: 1; }
.erg-werkzeuge { order: 2; }
.erg-titel { margin-bottom: 14px; }
.erg-warnung { margin-top: 2px; }
.erg-werkzeuge { padding: 12px 14px 0; }
.erg-werkzeuge > div { margin-left: 0 !important; margin-right: 0 !important; }
.erg-stift-etikett {
  position: absolute; left: 22%; top: 34%; margin: -30px 0 0 74px; background: var(--red); color: var(--paper);
  font-size: 10px; letter-spacing: .06em; padding: 5px 7px; transform: rotate(-3deg); pointer-events: none;
}
@media (min-width: 1024px) {
  .erg { display: grid; grid-template-columns: 1fr 400px; min-height: calc(100vh - 66px); padding: 0; }
  .erg-bild { order: 0; background: var(--ink); padding: 26px 0 26px 32px; display: flex; align-items: center; }
  .erg-seite { order: 1; }
  .erg-crop { border: 4px solid var(--paper) !important; }
  .erg-seite {
    display: flex; flex-direction: column; gap: 18px; background: var(--paper); border-left: 4px solid var(--ink);
    padding: 26px 28px 26px 26px;
  }
  .erg-kopf { padding: 0; margin-bottom: 0; }
  .erg-titel { font-size: 44px; letter-spacing: -.045em; margin-bottom: 0; }
  .erg-warnung { margin-top: 12px; }
  .erg-werkzeuge { padding: 0; display: flex; flex-direction: column; gap: 10px; }
  .erg-stift-etikett { left: 20%; top: 30%; margin: -34px 0 0 160px; font-size: 12px; padding: 7px 10px; }
}
.erg-wahl { order: 2; padding: 12px 14px 0; }
.erg-ki-hinweis { order: 2; margin: 12px 14px 0; font-size: 13px; line-height: 1.45; }
/* NEU (23.09.2026): der ehrliche Hinweis, wenn kein Kandidat bestanden hat und trotzdem ein Bild
   angeboten wird. Gleiche Einordnung wie der KI-Hinweis, damit er am Handy an derselben Stelle
   steht und nicht ueber den Kopf rutscht. */
.erg-notloesung { order: 2; }
@media (min-width: 1024px) {
  .erg-wahl { padding: 0; }
  .erg-ki-hinweis { margin: 0; }
  .erg-notloesung { margin: 0 !important; }
}
/* Stift am Handy (Schritt 4) */
.erg-quer-tipp { display: none; margin: 0 0 8px; font-size: 12px; font-weight: 700; background: var(--yellow); border: 2px solid var(--ink); padding: 6px 8px; }
.erg-gesten-tipp { margin: 0 0 10px; font-size: 11.5px; line-height: 1.4; color: rgba(26,26,24,.65); }
@media (orientation: portrait) and (max-width: 1023.98px) { .erg-quer-tipp { display: block; } }
@media (hover: hover) and (pointer: fine) { .erg-gesten-tipp { display: none; } }
.erg-zoom { will-change: transform; }
.erg button:disabled { opacity: .45; cursor: default; }