/* Website DrueckjagdApp.de (Spec 030). Handy zuerst, hell, Farben nur über --dja-*. */

/* Countdown und Enthüllung: dieselbe Seite, der Worker setzt data-phase. */
[data-phase="countdown"] .nur-enthuellung,
[data-phase="enthuellung"] .nur-countdown { display: none !important; }

/* Kopf in der Kartenfarbe, damit er zu Karten, Kacheln und Logo-Block passt (Spec 030 W20). */
.kopf {
  background: var(--dja-surface);
  border-bottom: 1px solid var(--dja-border);
  padding: .75rem 1rem;
  padding-top: calc(.75rem + env(safe-area-inset-top));
  display: flex; justify-content: center;
}
.kopf-marke img { display: block; height: 32px; width: auto; }

main { padding: 0 1rem; }

/* Bühne mit Foto (KI-Bild, design/bilder/HERKUNFT.md). Dunkle Überblendung, Schrift in Weiß. */
.buehne {
  margin: 0 -1rem; padding: 1.75rem 1rem 2.75rem; text-align: center;
  color: var(--dja-brand-white);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--dja-brand-ink) 45%, transparent) 0%,
      color-mix(in srgb, var(--dja-brand-ink) 62%, transparent) 55%,
      color-mix(in srgb, var(--dja-brand-ink) 88%, transparent) 100%),
    url(/img/hintergrund-hoch-720.webp) center top / cover no-repeat;
  background-color: var(--dja-brand-forest);
}
@media (min-width: 700px) {
  .buehne {
    background:
      linear-gradient(90deg,
        color-mix(in srgb, var(--dja-brand-ink) 82%, transparent) 0%,
        color-mix(in srgb, var(--dja-brand-ink) 58%, transparent) 55%,
        color-mix(in srgb, var(--dja-brand-ink) 25%, transparent) 100%),
      url(/img/hintergrund-1920.webp) 70% center / cover no-repeat;
    background-color: var(--dja-brand-forest);
    padding-top: 3rem; padding-bottom: 3.5rem;
  }
}
.buehne > * { max-width: 720px; margin-left: auto; margin-right: auto; }
/* Freigestelltes Logo mit heller Schrift (design/logo/drueckjagdapp-logo-v1-frei-dunkel.png). */
.buehne-logo { display: block; margin: 0 auto 1.25rem; width: min(78vw, 340px); }
.ueberzeile {
  display: inline-block; margin: 0 0 .75rem; padding: .25rem .8rem; border-radius: 999px;
  background: var(--dja-brand-white); color: var(--dja-brand-forest);
  font-weight: 700; font-size: .95rem; letter-spacing: .04em; text-transform: uppercase;
}
.buehne h1 {
  color: var(--dja-brand-white); font-size: clamp(2rem, 8vw, 3.4rem); font-weight: 800; letter-spacing: -.01em; margin-bottom: .3em;
  text-shadow: 0 2px 18px color-mix(in srgb, var(--dja-brand-ink) 70%, transparent);
}
.unterzeile { font-size: clamp(1.2rem, 4.5vw, 1.5rem); color: var(--dja-brand-white); margin-bottom: 1.5rem; }
.buehne .leise, .buehne .countdown-text { color: color-mix(in srgb, var(--dja-brand-white) 88%, transparent); }
.buehne .knopf-leise { color: var(--dja-brand-white); }
.buehne .knopf-leise:hover { background: color-mix(in srgb, var(--dja-brand-white) 15%, transparent); }
.buehne :focus-visible { outline-color: var(--dja-brand-white); box-shadow: 0 0 0 6px var(--dja-brand-ink); }

.countdown {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem;
  max-width: 480px; margin: 0 auto .75rem;
}
.stelle {
  background: var(--dja-surface); border: 1px solid var(--dja-border); border-radius: 14px;
  padding: .75rem .25rem .6rem;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--dja-brand-ink) 30%, transparent);
}
.zahl {
  display: block; font-size: clamp(2rem, 10vw, 3.25rem); font-weight: 800; line-height: 1;
  color: var(--dja-ueberschrift); font-variant-numeric: tabular-nums;
}
.zahl.tick { animation: tick .35s ease-out; }
@keyframes tick { from { transform: translateY(-.12em); opacity: .4; } to { transform: none; opacity: 1; } }
.einheit { display: block; margin-top: .35rem; font-size: .8rem; color: var(--dja-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.countdown-text { font-size: 1rem; margin-bottom: 1.75rem; }

.knopf-gross { min-height: 64px; font-size: 1.2rem; padding: .9rem 1.6rem; width: 100%; max-width: 420px; }
.klein { font-size: .95rem; margin-top: .75rem; }

/* Schlagworte */
.schlagworte { max-width: 1040px; margin: 0 auto; padding: 2.25rem 0 2.5rem; }
.schlagworte h2 { text-align: center; font-size: clamp(1.6rem, 6vw, 2.2rem); margin-bottom: 1.25rem; }
.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .karten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .karten { grid-template-columns: repeat(3, 1fr); } }
.wort {
  position: relative; overflow: hidden;
  background: var(--dja-surface); border: 1px solid var(--dja-border); border-radius: 14px;
  padding: 1.1rem 1.1rem 1rem 4.2rem; min-height: 6.5rem;
}
.wort > .ico {
  position: absolute; left: 1rem; top: 1.1rem; width: 2.2rem; height: 2.2rem;
  color: var(--dja-brand-orange);
}
.wort h3 { font-size: 1.2rem; margin: 0 0 .25rem; }
.wort p { margin: 0; color: var(--dja-text-muted); font-size: 1rem; }
.wort .erklaerung { display: none; color: var(--dja-text); margin-top: .6rem; }
[data-phase="enthuellung"] .wort .erklaerung { display: block; }
.wort-hervor { border: 2px solid var(--dja-brand-olive); }
.wort-hervor > .ico { color: var(--dja-brand-olive); }
/* Andeutung: ein Balken, der verrät, dass noch etwas kommt. */
[data-phase="countdown"] .wort::after {
  content: ""; position: absolute; left: 4.2rem; right: 1.1rem; bottom: .7rem; height: .4rem; border-radius: 4px;
  background: repeating-linear-gradient(90deg, var(--dja-selected-bg) 0 1.2rem, transparent 1.2rem 1.5rem);
}
[data-phase="countdown"] .wort { padding-bottom: 1.6rem; }
.schloss { text-align: center; color: var(--dja-text-muted); margin-top: 1.25rem; font-size: 1rem; }

/* Enthüllung beim Ablauf auf offener Seite */
.wechsel .buehne, .wechsel .wort { animation: auf .7s ease-out both; }
.wechsel .wort:nth-child(2n) { animation-delay: .08s; }
.wechsel .wort:nth-child(3n) { animation-delay: .16s; }
@keyframes auf { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Abschluss und Absender */
.abschluss {
  max-width: 720px; margin: 0 auto 2rem; text-align: center;
  background: var(--dja-surface); border: 1px solid var(--dja-border); border-radius: 18px; padding: 1.75rem 1.25rem;
}
.abschluss h2 { font-size: clamp(1.5rem, 5.5vw, 2rem); }
.absender { max-width: 720px; margin: 0 auto 2rem; text-align: center; }
.absender p { margin: 0 0 .35rem; }

.fuss {
  border-top: 1px solid var(--dja-border); background: var(--dja-surface);
  padding: 1.25rem 1rem calc(1.25rem + env(safe-area-inset-bottom)); text-align: center;
  color: var(--dja-text-muted); font-size: 1rem;
}
.fuss p { margin: .25rem 0; }
.fuss a { color: var(--dja-link); display: inline-block; padding: .35rem .2rem; }
.noscript { text-align: center; padding: 1rem; background: var(--dja-warning-bg); color: var(--dja-warning); margin: 0; }

/* Anmeldeformular im Dialog */
.anmelde-form em { font-style: normal; font-weight: 400; }
.anmelde-form .haken a { white-space: nowrap; }

/* Kleine Seiten (Bestätigen, Abmelden, Hilfe, Rechtstexte) */
.schmal { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; }
.karte { background: var(--dja-surface); border: 1px solid var(--dja-border); border-radius: 14px; padding: 1.5rem 1.25rem; }
.mitte { text-align: center; }
.mitte .ico-gross { color: var(--dja-brand-orange); margin-bottom: .75rem; }
.mitte form { margin-top: 1.25rem; }
.text h1 { font-size: clamp(1.7rem, 6vw, 2.3rem); }
.text h2 { font-size: 1.3rem; margin-top: 1.6em; }
.text h3 { font-size: 1.1rem; margin-top: 1.3em; }
.text ul, .text ol { padding-left: 1.3rem; }
.text li { margin-bottom: .35rem; }
.hilfe-liste { list-style: none; padding: 0 !important; }
.hilfe-liste li { padding: .6rem 0; border-bottom: 1px solid var(--dja-border); }

@media (min-width: 900px) {
  .kopf-marke img { height: 38px; }
}
.text pre { background: var(--dja-selected-bg); padding: .75rem; border-radius: 8px; overflow-x: auto; font-size: .9rem; }
.text pre code { background: none; padding: 0; }
/* Orange auf der dunklen Kartenfläche, groß und fett (Timo, 28.09.2026). */
.bock { font-size: 1.2rem; font-weight: 700; color: var(--dja-brand-orange); }

/* PC: Text links, der Schütze auf dem Bock bleibt rechts frei. */
@media (min-width: 900px) {
  .buehne { text-align: left; padding-left: max(2rem, calc((100vw - 1120px) / 2)); padding-right: 2rem; min-height: 78vh; }
  .buehne > * { margin-left: 0; max-width: 580px; }
  .buehne-logo { margin-left: -.5rem; width: 320px; }
  .buehne .countdown { margin-left: 0; text-align: center; }
  .buehne .knopf-gross { width: auto; min-width: 320px; }
}