/* Eigene Schicht twofoursix.de für die Bewerbungsseite "In Der Lobby".
   Wird nach basis.css und bewerben.css (Paket) geladen und gehört nicht zum
   Paket: ein Paket-Update überschreibt diese Datei nie.

   Vorgehen: zuerst die Farb-Variablen des Pakets auf die Tokens der Website
   setzen (so folgt fast alles von selbst), danach Schrift, Karten, Knöpfe und
   Felder an die Formensprache von twofoursix anpassen. Die Klassen und IDs des
   Pakets sind in SCHNITTSTELLE.md als stabil zugesagt. */

/* ── Farben: Dark Editorial. Die Selektoren sind absichtlich so stark wie die
      des Pakets (Hell/Dunkel, data-theme), damit nichts davon zurückkommt. ── */
html:root:root, html:root[data-theme="light"], html:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #070D18;
  --raised: #0A1220;
  --sunken: #0F1A2E;
  --sep: rgba(230, 238, 255, .10);
  --sep-2: rgba(230, 238, 255, .22);
  --ink: #F0F4F1;
  --ink-2: rgba(230, 238, 255, .66);
  --ink-3: rgba(230, 238, 255, .42);
  --tint: #EB5B25;
  --tint-bg: rgba(235, 91, 37, .14);
  --on-tint: #070D18;
  --action: #EB5B25;
  --on-action: #070D18;
  --gruen: #5FD18A;
  --gruen-bg: rgba(95, 209, 138, .14);
  --rot: #FF8A6B;
  --rot-bg: rgba(255, 138, 107, .14);
  --e1: none;
  --tf-mono: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, monospace;
  --tf-radius: 4px;
}

/* ── Seite und Schrift ── */
body.lobby {
  background: #070D18;
  color: var(--ink);
  font-family: "Switzer", -apple-system, "Helvetica Neue", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* Der Hell/Dunkel-Knopf des Pakets entfällt: die Website ist dunkel. */
#thema, .thema { display: none !important; }

.lobby-haupt { padding-top: 4.25rem; outline: none; min-height: 60vh; }
.seite { padding-top: 1.4rem; padding-bottom: calc(4rem + env(safe-area-inset-bottom)); }

/* Der Kopf des Pakets ("In Der Lobby" als kleine Zeile) trägt sich auf dieser
   Seite selbst; die Marke steht im Hero und im Titel jedes Schrittes. */
.seite > .brand {
  font-family: var(--tf-mono);
  font-size: 11px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--tint);
  margin: 0 0 1.6rem;
}
.seite > .brand span { color: var(--ink); }
/* Die Kopfzeile ist (im Paket) ein Link zur Startseite; hier nur der Hover im Stil der Seite. */
@media (hover: hover) and (pointer: fine) { .seite > .brand a:hover span { color: var(--tint); } }

/* Die Website färbt jeden Absatz gedämpft (p { color: ... } in ihrem Basis-Layer).
   Das Paket erwartet die Textfarbe vom body; :where() hält die Spezifität bei 0,
   damit die Klassen des Pakets (.leise, .fein, .unter ...) weiter gewinnen. */
:where(.seite) p { color: inherit; line-height: inherit; }

/* ── Überschriften wie auf der Website: Switzer ExtraBold, eng ── */
h1, .hero-brand, .block-titel, .hero-tag {
  font-family: "Switzer", sans-serif;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -.035em;
}
h1 { font-size: clamp(2rem, 7vw, 2.9rem); line-height: .98; margin: 0 0 .6rem; }
.hero-brand {
  text-transform: uppercase;
  font-size: clamp(3.2rem, 17vw, 5.4rem);
  line-height: .88;
  letter-spacing: -.045em;
}
.hero-brand span { color: var(--tint); }
.hero-tag { font-size: 1.25rem; letter-spacing: -.02em; line-height: 1.2; font-weight: 700; }
.hero-text, .unter { color: var(--ink-2); }
.hero-kicker { font-family: var(--tf-mono); font-size: 11px; font-weight: 400; letter-spacing: .18em; color: var(--ink-3); }
.hero-kicker .marke { font-family: "Switzer", sans-serif; letter-spacing: 0; font-size: 13px; color: var(--ink-2); }
/* Das Logo steht im Kopf der Website; "Ein Format von twofoursix Studios" bleibt als Text. */
.logo246 { display: none; }

/* Abschnittsüberschriften: Label im Stil von .tf-label */
.label {
  font-family: var(--tf-mono);
  font-size: 10px; font-weight: 400;
  text-transform: uppercase; letter-spacing: .18em;
  color: var(--tint);
  margin: 2.2rem 0 .8rem;
}
label:not(.haken) { font-family: var(--tf-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .14em; color: var(--ink-3); margin: 1.1rem 0 .4rem; }

/* ── Karten: flach, mit feiner Linie statt Schatten ── */
.karte, .ablauf, .tag, .feature-karte, .faq {
  background: var(--raised);
  border: 1px solid var(--sep);
  border-radius: var(--tf-radius);
  box-shadow: none;
}
.ablauf { border-radius: var(--tf-radius); }
.karte { padding: 1.15rem 1.2rem; }
.wahl, .reiter { background: var(--sunken); border-radius: var(--tf-radius); }
.wahl [role=radio], .reiter [role=tab] { border-radius: 2px; font-family: var(--tf-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.wahl [role=radio][aria-checked=true], .reiter [role=tab][aria-selected=true] { background: var(--tint); color: var(--on-tint); box-shadow: none; }

/* ── Knöpfe: wie .tf-btn-primary und .tf-btn-ghost ── */
button.haupt, a.haupt {
  background: var(--tint);
  color: var(--on-tint);
  border-radius: 0;
  font-family: var(--tf-mono);
  font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .14em;
  padding: 1.05rem 1.2rem;
}
button.cta { border-radius: 0; font-size: 12px; padding: 1.15rem 1.2rem; }
button.haupt:disabled { background: var(--sunken); color: var(--ink-3); }
button.zweit {
  background: transparent;
  border: 1px solid var(--sep-2);
  border-radius: 0;
  color: var(--ink);
  font-family: var(--tf-mono);
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: .14em;
}
button.txt, button.zurueck { color: var(--tint); font-family: var(--tf-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; }
.mehr { font-family: var(--tf-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
/* "Weiter zu deiner Bewerbung" (Startseite mit gemerkter Bewerbung) ist für Wiederkehrer die wichtigste Aktion: Akzentfarbe. */
.mehr.zu-meiner { color: var(--tint); font-weight: 600; }

/* ── Felder ── */
input, textarea {
  background: var(--sunken);
  border: 1px solid var(--sep);
  border-radius: var(--tf-radius);
  color: var(--ink);
  font-family: "Switzer", sans-serif;
  padding: .8rem .9rem;
}
input::placeholder, textarea::placeholder { color: var(--ink-3); }
input:focus, textarea:focus { outline: none; border-color: var(--tint); box-shadow: 0 0 0 1px var(--tint); }

label.haken { font-family: "Switzer", sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--ink-2); }
input[type=checkbox] { accent-color: var(--tint); }

/* Anton (Schrift des Pakets) wird auf dieser Seite nicht verwendet: überall
   Switzer ExtraBold wie auf der übrigen Website. */
.rg-anzeige b, .rg-zeit, .nochmal-zahl, .dabei-titel, .sichern-titel {
  font-family: "Switzer", sans-serif;
  font-weight: 800;
  letter-spacing: -.035em;
}
.dabei-titel { font-size: clamp(2.8rem, 14vw, 4.2rem); line-height: .9; text-transform: uppercase; }
.sichern-titel { font-size: clamp(2.2rem, 11vw, 3.2rem); line-height: .95; text-transform: uppercase; }
.rg-zeit { font-size: 1.9rem; }
.rg-zeit, .rg-anzeige b { font-variant-numeric: tabular-nums; }

/* ── Meldungen, Hinweise, Fußzeile des Pakets ── */
.msg { color: var(--ink-2); }
.fein { color: var(--ink-3); }
.fein a, .fuss a, .msg a, .leise a { color: var(--tint); text-decoration: underline; text-underline-offset: 3px; }
.seite .fuss { margin-top: 2.4rem; padding-top: 1.2rem; border-top: 1px solid var(--sep); font-size: 13px; }

/* Die Fusszeile des Pakets behält nur die Instagram-Zeile; ihre Rechtslinks wären
   neben dem Seitenfuss der Website doppelt. */
.seite .fuss br, .seite .fuss a[href*="datenschutz"], .seite .fuss a[href*="privacy-policy"] { display: none; }

/* ── "So läuft es": bündig mit "Gut zu wissen" und "Schon beworben", langsamere Animation ──
   Das Paket gibt dieser Karte links und rechts nur .4rem und setzt die drei Stationen
   mittig in drei gleich breite Spalten. Dadurch saß ihr Inhalt näher am Rand als bei den
   anderen Karten und das erste Icon nicht auf der Linie der Icons darunter.
   Jetzt: gleicher Innenabstand wie die anderen Karten, erste Station linksbündig, letzte
   rechtsbündig, mittlere in der Mitte. Die Linie läuft von Icon-Mitte zu Icon-Mitte. */
.ablauf {
  --ab-pad: 1.2rem;
  --ab-icon: 2.9rem;
  /* Drei Spalten, die mittlere genau in der Kartenmitte, egal wie breit die äußeren
     Beschriftungen sind ("1 Minute" links, "Drehtag wählen" rechts). Mit space-between
     rutschte die mittlere Station zur schmaleren Seite. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  column-gap: .5rem;
  padding: 1.15rem var(--ab-pad) 1.25rem;
  text-align: center;
}
.ablauf li:first-child { justify-self: start; align-items: flex-start; text-align: left; }
.ablauf li:nth-child(2) { justify-self: center; }
.ablauf li:last-child { justify-self: end; align-items: flex-end; text-align: right; }
.ablauf li span:last-child { padding: 0; white-space: nowrap; }
/* Die rechte Beschriftung darf umbrechen, wenn der Platz knapp wird (schmales Handy, Englisch). */
.ablauf li:last-child span:last-child { white-space: normal; }
.ablauf::before {
  top: 2.6rem;
  left: calc(var(--ab-pad) + var(--ab-icon) / 2);
  right: calc(var(--ab-pad) + var(--ab-icon) / 2);
  transition: transform 1.5s cubic-bezier(.4, 0, .2, 1);
}
/* Stationen erscheinen, wenn die Linie sie erreicht: gut doppelt so langsam wie im Paket. */
.ablauf li { transition: opacity .7s var(--aus), transform .7s var(--aus); }
.ablauf.sichtbar li:nth-child(2) { transition-delay: 500ms; }
.ablauf.sichtbar li:nth-child(3) { transition-delay: 1000ms; }
@media (prefers-reduced-motion: reduce) {
  .ablauf::before, .ablauf li { transition: none; }
  .ablauf.sichtbar li:nth-child(2), .ablauf.sichtbar li:nth-child(3) { transition-delay: 0ms; }
}

/* ── Startseite am Desktop: zwei gleich breite Spalten, Überschrift füllt die linke ──
   Das Paket gibt der linken Spalte 1,1 und der rechten 0,9 Anteile. Seit Wellenform und
   Knopf nur so breit wie die Überschrift waren, blieb zwischen den Spalten ein großer
   Leerraum. Jetzt: beide Spalten gleich breit; die Überschrift ist genau so breit wie
   ihre Spalte (die Schrift richtet sich nach der Spaltenbreite, nicht nach dem Fenster),
   Wellenform samt Legende und Knopf füllen die Spalte ebenfalls. "LOBBY" ist rund
   2,97 mal so breit wie die Schriftgröße. */
@media (min-width: 64rem) {
  .ansicht:has(> .hero) {
    --spalt: clamp(2.5rem, 5vw, 4.5rem);
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: var(--spalt);
    max-width: calc(48rem + var(--spalt));   /* zwei Spalten à 24 rem */
    margin-inline: auto;
  }
  .ansicht > .hero .format,
  .ansicht > .hero .hero-cta { width: 100%; max-width: none; }
  .ansicht > .hero .legende { font-size: .8rem; gap: .4rem .85rem; }
  .ansicht > .hero .spur { height: 3.4rem; }   /* Wellenform flacher */
}
@supports (width: 1cqw) {
  @media (min-width: 64rem) {
    .ansicht > .hero { container-type: inline-size; }
    .ansicht > .hero .hero-brand { font-size: min(8rem, calc(100cqw / 2.97)); }
    .ansicht > .hero .hero-tag { font-size: calc(100cqw * .0909); }
  }
}

/* Knopf "Jetzt bewerben": größer, mit Pfeil und leichtem Glühen (Handy und Desktop). */
button.cta {
  display: flex; align-items: center; justify-content: center; gap: .9em;
  padding: 1.15rem 1.4rem;
  font-size: 13px; letter-spacing: .18em;
  box-shadow: 0 8px 22px -12px rgba(235, 91, 37, .45), inset 0 0 0 1px rgba(255, 255, 255, .1);
}
button.cta::after {
  content: "→"; font-size: 1.3em; letter-spacing: 0; line-height: 1;
  transition: transform .25s var(--aus);
}
@media (hover: hover) and (pointer: fine) {
  button.cta:hover::after { transform: translateX(.3em); }
}
@media (prefers-reduced-motion: reduce) { button.cta::after { transition: none; } }

/* Fokus wie auf der Website: Orange */
button:focus-visible, a:focus-visible, [role=tab]:focus-visible, [role=radio]:focus-visible { outline: 2px solid var(--tint); outline-offset: 3px; }

/* Der schwebende Sprachwechsel der Website verdeckt am Handy Formularfelder.
   Dort steht die Sprachauswahl im Menü. */
@media (max-width: 1023px) {
  .floating-language-switcher { display: none; }
}

@media (max-width: 640px) {
  .seite { padding-left: 1.25rem; padding-right: 1.25rem; }
  .lobby-haupt { padding-top: 3.75rem; }
}

@media (min-width: 1024px) {
  .lobby-haupt { padding-top: 5rem; }
  .seite { padding-left: 2.5rem; padding-right: 2.5rem; }
  .hero-brand { letter-spacing: -.05em; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}