/* ============================================================================
   youbooth — TEIL 4: Schale (Kopfleiste, Fusszeile)
   Quelle: entwurf/design_handoff_youbooth/BUILD_SPEC.md, Teil 4.

   Diese Datei und yb.js sind die EINZIGE Stelle, an der Kopfleiste und
   Fusszeile existieren. Eine Aenderung hier wirkt auf allen Seiten.

   Setzt tokens.css und primitives.css voraus.
   ========================================================================= */


/* ── 4.1 Kopfleiste ────────────────────────────────────────────────────── */

.yb-kopfleiste {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--yb-kopfhoehe);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: var(--yb-rand);
  background: rgba(11,11,13,.86);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(244,242,238,.10);
  box-shadow: var(--yb-schatten-kopf);
  color: var(--yb-on-dark);
}

/* --- Wortmarke --- */

.yb-wortmarke {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--yb-on-dark);
  flex: none;
}
.yb-wortmarke:hover { color: var(--yb-on-dark); }

.yb-wortmarke__signet {
  width: 28px;
  height: 28px;
  flex: none;
  transition: transform var(--yb-t-weg);
}
.yb-wortmarke:hover .yb-wortmarke__signet { transform: rotate(-6deg) scale(1.05); }

.yb-wortmarke__text {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
}

.yb-wortmarke__name {
  font-family: var(--yb-font-display);
  font-weight: 900;
  font-size: 25px;
  letter-spacing: -.04em;
  text-transform: lowercase;
  line-height: 1;
  color: var(--yb-on-dark);
}

.yb-wortmarke__tld {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 12.5px;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--yb-amber);
  transform: translateY(-1px);
}

/* --- Navigation --- */

.yb-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex-wrap: nowrap;
  min-width: 0;
}

.yb-nav__link {
  font-family: var(--yb-font-ui);
  font-weight: 500;
  font-size: 13.5px;
  line-height: 1;
  color: rgba(244,242,238,.62);
  padding: 9px 11px;
  border-radius: var(--yb-r-pill);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--yb-t-farbe), background-color var(--yb-t-farbe);
}
.yb-nav__link:hover {
  color: var(--yb-on-dark);
  background: rgba(244,242,238,.08);
}
.yb-nav__link[aria-current="page"] {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
}
.yb-nav__link[aria-current="page"]:hover {
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
}

/* --- Rechte Seite --- */

.yb-kopfleiste__rechts {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* --- Klapp-Schalter (44x44). Erscheint unter 1160px. ---
   Hinweis: dieser Schalter steht bewusst ausserhalb der Navigationsliste. */

.yb-burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(244,242,238,.2);
  border-radius: var(--yb-r-btn);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--yb-t-farbe), border-color var(--yb-t-farbe);
}
.yb-burger:hover { background: rgba(244,242,238,.08); }

.yb-burger__striche {
  position: relative;
  width: 18px;
  height: 12px;
}
.yb-burger__striche span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 1px;
  background: var(--yb-on-dark);
  transition: transform var(--yb-t-weg), opacity var(--yb-t-weg);
}
.yb-burger__striche span:nth-child(1) { top: 0; }
.yb-burger__striche span:nth-child(2) { top: 5px; }
.yb-burger__striche span:nth-child(3) { top: 10px; }

.yb-burger[aria-expanded="true"] .yb-burger__striche span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.yb-burger[aria-expanded="true"] .yb-burger__striche span:nth-child(2) { opacity: 0; }
.yb-burger[aria-expanded="true"] .yb-burger__striche span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- Klapptafel --- */

.yb-klapptafel {
  display: none;
  position: fixed;
  top: var(--yb-kopfhoehe);
  left: 0;
  right: 0;
  max-height: calc(100dvh - var(--yb-kopfhoehe));
  overflow-y: auto;
  z-index: 59;
  padding: 12px var(--yb-rand) 20px;
  /* Deckend. Die Kopfleiste ist durchscheinend, weil Inhalt darunter
     durchlaeuft; die Klapptafel liegt als Flaeche darueber — dort schien
     der Schein des CTA von unten durch. */
  background: var(--yb-ink);
  border-bottom: 1px solid rgba(244,242,238,.10);
  box-shadow: var(--yb-schatten-kopf);
}
.yb-klapptafel.is-offen { display: block; }

.yb-klapptafel__nav { display: flex; flex-direction: column; }

.yb-klapptafel__link {
  display: block;
  padding: 12px;
  border-top: 1px solid rgba(244,242,238,.10);
  border-radius: var(--yb-r-pill);
  font-family: var(--yb-font-ui);
  font-weight: 500;
  font-size: 15px;
  color: rgba(244,242,238,.62);
  text-decoration: none;
  transition: color var(--yb-t-farbe), background-color var(--yb-t-farbe);
}
.yb-klapptafel__link:hover { color: var(--yb-on-dark); background: rgba(244,242,238,.08); }
.yb-klapptafel__link[aria-current="page"] { background: var(--yb-amber); color: var(--yb-amber-ink); }

.yb-klapptafel__knoepfe {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.yb-klapptafel__knoepfe .yb-btn { width: 100%; }

/* --- Bruchstelle 1160px: Navigation und Ghost-Knopf raus, Burger rein.
   Der CTA bleibt sichtbar (so zeigen es die Handoff-Screenshots). ------ */

@media (max-width: 1160px) {
  .yb-nav { display: none; }
  .yb-kopfleiste__anmelden { display: none; }
  .yb-burger { display: inline-flex; }
}

@media (max-width: 900px) {
  .yb-kopfleiste { padding-inline: 20px; }
  .yb-klapptafel { padding-inline: 20px; }
}

/* Unter 640px wird es eng: Wortmarke + Klapp-Schalter + CTA passten bei
   375px nicht in 335px Restbreite (gemessen 382px Dokumentbreite auf 375px
   Fenster). Abstaende und CTA-Innenabstand zusammengezogen. */
@media (max-width: 640px) {
  .yb-kopfleiste { gap: 12px; }
  .yb-kopfleiste__rechts { gap: 8px; }
  .yb-wortmarke { gap: 8px; }
  .yb-wortmarke__name { font-size: 22px; }
  .yb-wortmarke__tld  { font-size: 11.5px; }
  .yb-kopfleiste .yb-btn--primary { --yb-btn-h: 38px; font-size: 12px; padding-inline: 12px; }
}

@media (max-width: 380px) {
  .yb-kopfleiste { gap: 8px; }
  .yb-wortmarke__signet { width: 24px; height: 24px; }
  .yb-wortmarke__name { font-size: 20px; }
}

/* Koerper festhalten, solange die Klapptafel offen ist. */
body.yb-klapp-offen { overflow: hidden; }


/* ── 4.2 Fusszeile ─────────────────────────────────────────────────────── */

.yb-fuss {
  background: var(--yb-ink);
  color: var(--yb-on-dark-muted);
  padding: 72px var(--yb-rand) 44px;
}

.yb-fuss__in {
  max-width: var(--yb-breite);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 44px;
}

.yb-fuss__kopf { display: flex; flex-direction: column; gap: 12px; }

.yb-fuss__satz {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--yb-on-dark-muted);
  max-width: 420px;
  text-wrap: pretty;
}

.yb-fuss__spalten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 32px;
}

.yb-fuss__spalte { display: flex; flex-direction: column; gap: 12px; }

.yb-fuss__titel {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-on-dark-faint);
}

.yb-fuss__link {
  font-family: var(--yb-font-ui);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--yb-on-dark-muted);
  text-decoration: none;
  transition: color var(--yb-t-farbe);
}
.yb-fuss__link:hover { color: var(--yb-on-dark); }

.yb-fuss__abschluss {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  border-top: 1px solid var(--yb-line-dark);
  padding-top: 20px;
}

.yb-fuss__recht {
  font-family: var(--yb-font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .08em;
  color: var(--yb-on-dark-faint);
}
.yb-fuss__recht a { color: var(--yb-on-dark-faint); }
.yb-fuss__recht a:hover { color: var(--yb-on-dark); }

.yb-fuss__post {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .08em;
  color: var(--yb-amber);
  text-decoration: none;
}
.yb-fuss__post:hover { color: var(--yb-amber); text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 900px) {
  .yb-fuss { padding-inline: 20px; }
}


/* ============================================================================
   TEIL 6.2 — Cockpit-Schale (Betreiber-Arbeitsansicht)

   BUILD_SPEC Teil 6.2: "Dichte hoeher als auf der Website, gleiche Tokens,
   paper als Grundflaeche, Mono fuer alle Zahlen und Status."

   Ein Markenband oben (dieselbe .yb-kopfleiste wie auf der Website),
   darunter die helle Arbeitsflaeche. Auch das existiert genau einmal.
   ========================================================================= */

.yb-kopfleiste--cockpit { gap: 16px; }

/* Bereichsname neben der Wortmarke: "Boxen", "Produkte", "Verwaltung" … */
.yb-bereich {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-on-dark-muted);
  padding-left: 14px;
  margin-left: 2px;
  border-left: 1px solid rgba(244,242,238,.14);
  white-space: nowrap;
}

/* Zugangsstufe. Amber, weil es eine Kennzeichnung ist — kein Zustand. */
.yb-plan {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding-inline: 10px;
  border-radius: var(--yb-r-full);
  background: var(--yb-amber);
  color: var(--yb-amber-ink);
  font-family: var(--yb-font-mono);
  font-weight: 600;
  font-size: 10.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Unter der Navigations-Bruchstelle wandern Hilfe, Support und Abmelden in
   die Klapptafel — in der Leiste standen sie sonst ueber den Rand hinaus
   (gemessen bei 375px: Dokument breiter als das Fenster). */
@media (max-width: 1160px) {
  .yb-kopfleiste--cockpit .yb-kopfleiste__rechts .yb-btn { display: none; }
}

@media (max-width: 900px) {
  .yb-bereich { display: none; }
}


/* ── Arbeitsflaeche ────────────────────────────────────────────────────── */

.yb-arbeit {
  display: block;
  background: var(--yb-paper);
  min-height: calc(100dvh - var(--yb-kopfhoehe));
  padding: 32px var(--yb-rand) 96px;
}

.yb-arbeit__in {
  max-width: var(--yb-breite);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Seitenkopf der Arbeitsansicht: dichter als ein Website-Abschnitt.
   "Dichte hoeher als auf der Website" (Teil 6.2) heisst auch: die
   Ueberschrift traegt hier nicht 72px. */
.yb-arbeit__kopf { display: flex; flex-direction: column; gap: 10px; }

.yb-arbeit h1 { font-size: clamp(28px, 3vw, 40px); }
.yb-arbeit .yb-lead { font-size: 16px; }

/* Abschnitt innerhalb der Arbeitsansicht */
.yb-block { display: flex; flex-direction: column; gap: 16px; }

.yb-block__kopf {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* Kennzahlenreihe */
.yb-kennzahlen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.yb-kennzahl {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card);
  background: var(--yb-white);
  box-shadow: var(--yb-schatten-karte);
}
.yb-kennzahl__wert {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 30px;
  line-height: 1;
  letter-spacing: -.01em;
  color: var(--yb-text);
  font-variant-numeric: tabular-nums;
}
.yb-kennzahl__label {
  font-family: var(--yb-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--yb-text-muted);
}

/* Arbeitskarte: dichter als die Website-Karte, Aktionen unten buendig. */
.yb-arbeitskarte {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--yb-line);
  border-radius: var(--yb-r-card-lg);
  background: var(--yb-white);
  box-shadow: var(--yb-schatten-karte);
  min-height: 180px;
}
.yb-arbeitskarte__kopf {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.yb-arbeitskarte__name {
  font-family: var(--yb-font-ui);
  font-weight: 700;
  font-size: 17px;
  line-height: 1.25;
  color: var(--yb-text);
  overflow-wrap: anywhere;
}
.yb-arbeitskarte__zeile {
  font-family: var(--yb-font-mono);
  font-weight: 400;
  font-size: 11.5px;
  letter-spacing: .06em;
  color: var(--yb-text-muted);
  margin-top: 4px;
  overflow-wrap: anywhere;
}

.yb-karten-raster {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}

@media (max-width: 900px) {
  .yb-arbeit { padding-inline: 20px; }
}


/* ── Aufklappmenue "Mehr" ────────────────────────────────────────────────
   Die Kopfleiste traegt funf Punkte; die restlichen neun stehen hier, je
   mit einer Zeile, die sagt was einen erwartet — so steht es in
   `Start.dc.html`. */

.yb-mehr { position: relative; }

.yb-mehr__knopf {
  background: none;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.yb-mehr__knopf::after {
  content: '';
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  transition: transform var(--yb-t-weg);
}
.yb-mehr__knopf[aria-expanded="true"]::after { transform: rotate(-135deg) translateY(-1px); }

.yb-mehr__tafel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: 60;
  width: min(360px, calc(100vw - 32px));
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: var(--yb-ink-soft);
  border: 1px solid var(--yb-line-dark);
  border-radius: var(--yb-r-card);
  box-shadow: var(--yb-schatten-hebung);
}
.yb-mehr__tafel[hidden] { display: none; }

.yb-mehr__punkt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  border-radius: var(--yb-r-btn);
  text-decoration: none;
  color: var(--yb-on-dark);
}
.yb-mehr__punkt:hover { background: rgba(244,242,238,.08); }
.yb-mehr__punkt[aria-current="page"] { background: rgba(242,178,62,.12); }
.yb-mehr__titel { font-weight: 700; font-size: 14px; }
.yb-mehr__zeile { font-size: 12.5px; color: var(--yb-on-dark-muted); line-height: 1.35; }

/* Am Telefon uebernimmt die Klapptafel; das Menue bleibt der Leiste
   vorbehalten. */
@media (max-width: 900px) { .yb-mehr { display: none; } }