/* ═══════════════════════════════════════════════════════════════════════
   JOBWOCHE — Bewerbertag / MatchDay (23.08.2026)

   Zwei Teile: oben die Seite vor der Messe (Kopfbereich, Textspalte,
   Countdown, Erinnerung), unten das Standraster fuer den Messetag.

   Alle Farben kommen aus den Tokens in public-pages.css — diese Datei
   definiert :root NICHT neu. Eine frühere Fassung tat das und hat damit
   die Markenfarbe aus dem Design-Manager auf einen festen Wert
   festgenagelt; auf der Messeseite stand dann ein anderes Türkis als
   überall sonst.
   ═══════════════════════════════════════════════════════════════════════ */

/* Diese Datei laedt nur die Messeseite, deshalb genuegt der schlichte
   Selektor. `clip` statt `hidden`: sonst verliert die sticky Navigation
   ihren Halt. */
html { overflow-x: clip; }

.huelle-messe { max-width: 1180px; }

/* Die Knöpfe im Kopfbereich springen auf Anker weiter unten. Ohne
   diesen Abstand schöbe die klebende Navigation das Ziel unter sich. */
#staende, #erinnerung { scroll-margin-top: 78px; }

/* Eine eigene Variable statt --tx: der Kopfbereich soll das Dunkelblau
   der Navigation aufnehmen, nicht das Grau der Fliesstexte. */
main.huelle-messe {
  --md-tief:  #0f1d2e;
  --md-tief2: rgba(15, 29, 46, 0.72);
  padding-top: 0;
}

/* ── Kopfbereich ─────────────────────────────────────────────────────── */

/* Das Motiv läuft von Fensterkante zu Fensterkante, der Text darin bleibt
   auf der Breite der Hülle. `overflow-x: clip` weiter unten faengt die
   Scrollbalkenbreite ab, die in 100vw mitzaehlt. */
.md-hero {
  position: relative;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 0;
  min-height: 430px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--bg2);
  color: var(--md-tief);
}

.md-hero-motiv {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center right;
}

/* Der Verlauf deckt die Textspalte ab und gibt das Motiv nach rechts frei.
   Bis 48% steht die Überschrift, dort muss er dicht bleiben; danach fällt
   er zügig ab, damit vom Wahrzeichen mehr als ein Streifen übrig bleibt.

   Bis 24.08.2026 lag hier zusätzlich eine Ausblendung der Unterkante. Sie
   galt dem angeschnittenen Schriftzug der alten Platzhalter-SVGs. Die
   Motive sind jetzt Fotos — die Ausblendung hätte nur noch Hafenbecken
   und Elbwiesen weggenommen. */
.md-hero.hat-motiv .md-hero-motiv::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    rgba(244, 248, 248, 0.99) 0%,
    rgba(244, 248, 248, 0.97) 48%,
    rgba(244, 248, 248, 0.72) 64%,
    rgba(244, 248, 248, 0.28) 82%,
    rgba(244, 248, 248, 0) 96%);
}

.md-hero-inhalt {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 46px 20px 60px;
}

/* Vor der Messe steht der Countdown als eigene Spalte rechts. Die 350px
   sind dieselbe Breite, die der Kasten vorher in der Textspalte hatte. */
.md-hero-inhalt.mit-countdown {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 350px;
  gap: 40px;
  align-items: center;
}

.md-hero-text { max-width: 640px; }

.md-marke {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--p-xlight);
  border: 1px solid var(--p-light);
  color: var(--p-dark);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.md-marke.jetzt { background: var(--p); border-color: var(--p); color: #fff; }
.md-marke.ab    { background: var(--amber-bg); border-color: var(--amber); color: var(--amber-dark); }

.bt-puls {
  width: 8px; height: 8px; border-radius: 50%; background: #fff;
  animation: bt-puls 1.6s ease-in-out infinite;
}
@keyframes bt-puls { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }
@media (prefers-reduced-motion: reduce) { .bt-puls { animation: none } }

.md-titel {
  margin: 0;
  font-family: var(--font-head);
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  color: var(--md-tief);
}

/* Der Ortsteil bricht in eine eigene Zeile und trägt die Markenfarbe. */
.md-akzent {
  display: block;
  color: var(--p);
}

.md-claim {
  margin: 16px 0 0;
  max-width: 46ch;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--md-tief2);
}

.md-eckdaten {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.md-eckdaten li {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 15.5px;
  font-weight: 600;
  color: var(--md-tief);
}

.md-eckdaten svg { flex: 0 0 19px; color: var(--p-dark); }

.md-ctas {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 26px;
}

.md-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 50px;
  padding: 0 24px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .15s, box-shadow .15s, background .15s;
}

.md-cta:hover { transform: translateY(-1px); }

.md-cta.haupt {
  background: var(--p-dark);
  border: 1px solid var(--p-dark);
  color: #fff;
  box-shadow: 0 10px 22px rgba(0, 132, 123, 0.24);
}
.md-cta.haupt:hover { background: var(--p-hover); color: #fff; }

.md-cta.neben {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border2);
  color: var(--md-tief);
}
.md-cta.neben:hover { background: #fff; color: var(--md-tief); }

/* ── Die vier Versprechen ────────────────────────────────────────────── */

/* Die Leiste steht knapp unter dem Motiv, nicht darin: das Motiv laeuft
   ueber die volle Fensterbreite, die Leiste nur ueber die Huelle — eine
   Ueberlappung liesse links und rechts einen Zipfel Motiv hervorschauen. */
.md-vorteile {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 18px 0 30px;
  padding: 20px 8px;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.md-vorteile > div {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 14px;
}

.md-vorteil-symbol {
  flex: 0 0 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--p-xlight);
  color: var(--p-dark);
}

.md-vorteile p {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--tx);
}

/* ── Textspalte und Countdown ────────────────────────────────────────── */

.md-spalten {
  margin-bottom: 30px;
}

.md-story h2 {
  margin: 0 0 12px;
  font-size: clamp(24px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--md-tief);
}

/* Ohne Countdown-Spalte laeuft der Text seit 24.08.2026 ueber die ganze
   Huelle — die frueheren 62ch haetten rechts eine leere Haelfte gelassen. */
.md-story > p {
  margin: 0 0 12px;
  font-size: 15.5px;
  line-height: 1.62;
  color: var(--tx2);
}

.md-anmoderation {
  margin-top: 20px !important;
  font-weight: 700;
  color: var(--tx) !important;
}

.md-kacheln {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 16px 0 22px;
}

.md-kachel {
  padding: 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-xs);
}

.md-kachel-symbol {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  margin-bottom: 12px;
  border-radius: 10px;
  background: var(--p-xlight);
  color: var(--p-dark);
}

.md-kachel h3 {
  margin: 0 0 6px;
  font-size: 15px;
  font-weight: 800;
  color: var(--md-tief);
}

.md-kachel p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--tx3);
}

.md-schluss {
  margin: 0 !important;
  font-size: 15.5px !important;
  font-weight: 700;
  color: var(--tx) !important;
}

.md-countdown {
  padding: 22px 20px 20px;
  border-radius: var(--radius-lg);
  background: var(--dunkel);
  box-shadow: var(--shadow-md);
}

.md-countdown-titel {
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 800;
  text-align: center;
  color: #fff;
}

.md-ziffern {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.md-ziffer-feld { text-align: center; }

.md-ziffer {
  font-family: var(--font-head);
  font-size: clamp(26px, 3.4vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.md-ziffer-name {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.62);
}

.md-countdown-text {
  margin: 18px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.72);
}

.md-countdown-knopf {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: 16px;
  min-height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.07);
  color: #fff;
  font-size: 13.5px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  transition: background .15s;
}
.md-countdown-knopf:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.md-countdown-knopf svg { flex: 0 0 16px; }

/* ── Erinnerung ──────────────────────────────────────────────────────── */

.md-erinnerung {
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: center;
  gap: 22px;
  margin-bottom: 30px;
  padding: 26px;
  border-radius: var(--radius-lg);
  background: var(--p-xlight);
  border: 1px solid var(--p-light);
}

.md-erinnerung-symbol {
  width: 84px;
  height: 84px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--p-dark);
  color: #fff;
}

.md-erinnerung-text h2 { margin: 0 0 6px; font-size: 22px; }
.md-erinnerung-text p  { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--tx2); }

.md-erinnerung-form { margin: 0; }

.md-erinnerung-zeile { display: flex; gap: 10px; }

.md-erinnerung-zeile input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--border2);
  border-radius: 10px;
  background: var(--surface);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--tx);
}
.md-erinnerung-zeile input:focus {
  outline: 2px solid var(--p);
  outline-offset: 1px;
  border-color: var(--p);
}

.md-erinnerung-zeile button {
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 22px;
  border: 0;
  border-radius: 10px;
  background: var(--p-dark);
  color: #fff;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.md-erinnerung-zeile button:hover { background: var(--p-hover); }

.md-erinnerung-klein {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--tx3);
}

.md-abschnitt {
  margin: 0 0 16px;
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--md-tief);
}

/* ── Schmale Fenster ─────────────────────────────────────────────────── */

@media (max-width: 1000px) {
  /* Untereinander: erst Titel und Knoepfe, darunter der Countdown. */
  .md-hero-inhalt.mit-countdown {
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
  }
  .md-countdown.im-kopf { max-width: 420px; }
  .md-kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .md-vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 0; }
  .md-erinnerung {
    grid-template-columns: 64px minmax(0, 1fr);
    row-gap: 18px;
  }
  .md-erinnerung-symbol { width: 64px; height: 64px; }
  .md-erinnerung-form { grid-column: 1 / -1; }
}

@media (max-width: 620px) {
  .md-hero { min-height: 0; }
  .md-hero-inhalt { padding: 34px 20px 40px; }
  /* Hochkant liegt der Text ueber dem ganzen Motiv, nicht daneben —
     der Verlauf muss deshalb von oben nach unten decken. Er deckt aber
     weniger dicht als bis zum 24.08.2026: unter den Platzhaltern musste
     ein Schriftzug verschwinden, unter einem Foto darf das Motiv
     durchscheinen. Dicht bleibt es nur dort, wo Fliesstext steht. */
  .md-hero.hat-motiv .md-hero-motiv::after {
    background: linear-gradient(180deg,
      rgba(244, 248, 248, 0.80) 0%,
      rgba(244, 248, 248, 0.93) 22%,
      rgba(244, 248, 248, 0.955) 60%,
      rgba(240, 245, 245, 0.95) 85%,
      rgba(232, 239, 237, 1) 100%);
  }
  .md-ctas .md-cta { width: 100%; }
  .md-vorteile { grid-template-columns: minmax(0, 1fr); padding: 12px 6px; }
  .md-kacheln { grid-template-columns: minmax(0, 1fr); }
  .md-erinnerung-zeile { flex-wrap: wrap; }
  .md-erinnerung-zeile button { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Der Messetag: Standraster, Status, Adminkasten
   ═══════════════════════════════════════════════════════════════════════ */

/* Die .icon-Regeln sind am 27.08.2026 nach public-pages.css gewandert.
   Dort greifen sie auf jeder oeffentlichen Seite; hier griffen sie nur
   auf der Messeseite, waehrend Standfenster und Buehne dasselbe Markup
   ohne jede Groessenangabe darstellten. */

.bt-raster { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.bt-stand {
  display: flex; flex-direction: column; margin-bottom: 0;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); padding: 16px; text-decoration: none; color: inherit;
  transition: box-shadow .15s, border-color .15s, transform .15s;
}
a.bt-stand:hover { box-shadow: var(--shadow-sm); border-color: var(--border2); transform: translateY(-1px); }
.bt-stand.zu { opacity: .55; }
.bt-stand.frei { border-color: var(--p-light); }

.bt-stand-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.bt-logo {
  width: 48px; height: 48px; flex: 0 0 48px; object-fit: contain;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.bt-logo-ersatz {
  width: 48px; height: 48px; flex: 0 0 48px;
  display: grid; place-items: center; background: var(--bg2);
  border-radius: var(--radius-sm); font-family: var(--font-head);
  font-weight: 800; color: var(--tx3); font-size: 17px;
}
.bt-firma { font-family: var(--font-head); font-weight: 800; font-size: 16px; line-height: 1.25; }
.bt-headline { font-size: 14px; color: var(--tx2); margin: 0 0 12px; }

.bt-status { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; margin-top: auto; }
.bt-punkt { width: 11px; height: 11px; border-radius: 50%; flex: 0 0 11px; background: var(--tx4); }

.bt-status[data-zustand="free"]    { color: var(--p-dark); }
.bt-status[data-zustand="free"]    .bt-punkt { background: var(--success); }
.bt-status[data-zustand="busy"]    { color: var(--amber-dark); }
.bt-status[data-zustand="busy"]    .bt-punkt { background: var(--amber); }
.bt-status[data-zustand="break"]   { color: var(--tx3); }
.bt-status[data-zustand="break"]   .bt-punkt { background: var(--tx4); }
.bt-status[data-zustand="offline"] { color: var(--tx4); }
.bt-status[data-zustand="offline"] .bt-punkt { background: var(--border2); }

.bt-zelle { display: flex; flex-direction: column; }
.bt-zelle > .bt-stand { flex: 1 1 auto; }
.bt-profillink { margin: 7px 0 0; font-size: 13px; text-align: right; }
.bt-profillink a { color: var(--tx3); text-decoration: none; }
.bt-profillink a:hover { color: var(--p-dark); text-decoration: underline; }

.bt-adminkasten { border-color: var(--amber); background: var(--amber-bg); }
.adm-standtabelle { width: 100%; border-collapse: collapse; font-size: 14px; }
.adm-standtabelle td { padding: 9px 6px; border-top: 1px solid var(--border); vertical-align: middle; }
.adm-standtabelle tr:first-child td { border-top: 0; }
.adm-standlink { max-width: 1px; }
.adm-standlink code {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 11.5px; color: var(--tx3); background: var(--surface);
  padding: 5px 8px; border-radius: var(--radius-sm); border: 1px solid var(--border);
}
.adm-standtabelle .knopf { padding: 5px 11px; font-size: 12.5px; }
@media (max-width: 760px) {
  .adm-standtabelle, .adm-standtabelle tr, .adm-standtabelle td { display: block; width: auto; }
  .adm-standlink { max-width: none; }
  .adm-standtabelle td { border-top: 0; padding: 3px 0; }
  .adm-standtabelle tr { border-top: 1px solid var(--border); padding: 10px 0; }
}

.bt-hinweisleiste {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin: 0 0 16px; font-size: 13px; color: var(--tx3);
}
.bt-frisch { display: inline-flex; align-items: center; gap: 6px; }
.bt-frisch .bt-punkt { width: 8px; height: 8px; flex: 0 0 8px; background: var(--success); }
.bt-frisch.alt .bt-punkt { background: var(--amber); }

/* ── Firmenliste vor und nach der Messe ──────────────────────────────── */

.bt-firmenliste {
  display: grid; gap: 16px; margin-bottom: 30px;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}
.bt-firmenzeile {
  display: flex; align-items: center; gap: 16px; padding: 18px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-xs);
}
.bt-firmenzeile .bt-logo,
.bt-firmenzeile .bt-logo-ersatz { width: 72px; height: 72px; flex: 0 0 72px; padding: 6px; }
.bt-firmenzeile .bt-firma { display: block; font-size: 15.5px; }
.bt-firmenzeile .links { display: flex; gap: 14px; font-size: 13.5px; margin-top: 8px; }