/*
 * Kundenseite an den Partner-Bereich angleichen.
 *
 * Gemessene Unterschiede vorher (login.html gegen partner/login.html):
 *
 *                       Kunde        Partner
 *   Karte Radius        28px         18px
 *   Karte Polsterung    32px         22px
 *   Feld Radius         14px         12px
 *   Feld Schrift        15px         16px      ← iOS zoomt unter 16px beim Antippen
 *   Feld Polsterung     15/16px      13/14px
 *   Knopf Gewicht       800          700
 *   Überschrift         42px         26px
 *
 * Warum eine eigene Datei und kein Umschreiben der 14 <style>-Blöcke: Die
 * Blöcke tragen auch Layout und Eigenheiten je Seite. Hier stehen nur die
 * Werte, die den Unterschied ausmachen – das lässt sich lesen, prüfen und im
 * Zweifel mit einer Zeile wieder herausnehmen.
 *
 * MUSS NACH dem seiteneigenen <style> eingebunden werden, sonst gewinnt der
 * Block der Seite (gleiche Spezifität, die spätere Regel zählt).
 */

/* ---------- Karten ---------- */

.panel,
.card {
  border-radius: 18px;
  padding: 22px;
}

/* Die Hero-Karte auf den Kontoseiten darf etwas großzügiger bleiben, aber
   nicht mehr doppelt so rund wie alles andere. */
.panel.hero {
  border-radius: 18px;
  padding: 26px 22px;
}

/* ---------- Eingabefelder ---------- */

.field input,
.field select,
.field textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  border-radius: 12px;
  /* 16px ist kein Geschmack, sondern Technik: Darunter zoomt iOS-Safari beim
     Antippen ins Feld hinein und der Nutzer muss danach zurückwischen. */
  font-size: 16px;
  padding: 13px 14px;
}

/* ---------- Knöpfe ---------- */

.btn {
  border-radius: 999px;
  font-weight: 700;
  padding: 13px 22px;
  /* Mit dem Daumen sicher zu treffen – dieselbe Grenze wie im Partner-Bereich. */
  min-height: 44px;
}

/* ---------- Hinweise ---------- */

.notice {
  border-radius: 12px;
}

/* ---------- Überschriften auf den Kontoseiten ----------
 *
 * NUR dort, wo `.shell` steht (Login, Registrieren, Passwort, Konto löschen).
 * Auf der Suchseite und der Buchungsseite bleibt die große Überschrift: Das
 * sind Schaufenster, kein Formular – auch der Partner-Bereich hat auf seiner
 * Startseite eine große Zeile und im Login eine kleine.
 */
.shell .panel h1 {
  font-size: 26px;
  line-height: 1.25;
}

.shell .panel h2 {
  font-size: 21px;
}

/* Die Augenbraue über der Überschrift: im Partner-Bereich kleiner und ruhiger. */
.shell .eyebrow,
.shell .section-kicker {
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* ---------- Schrift ----------
 *
 * Beide Seiten benutzen dieselben zwei Schriften, aber die Kundenseite nannte
 * keinen Systemfallback. Fällt Manrope aus (langsame Verbindung, blockierte
 * Schriften), stand dort die Standardschrift des Browsers – im Partner-Bereich
 * dagegen die des Betriebssystems.
 */
body {
  font-family: Manrope, -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
}

h1, h2, h3 {
  font-family: "Space Grotesk", Manrope, -apple-system, system-ui, sans-serif;
}

/* ---------- Fingerkuppen ----------
 * Dieselbe Regel wie im Partner-Bereich: Auf Touch-Geräten sind der
 * Hell/Dunkel-Knopf (40 px) und die Sprachumschalter (34 px) kleiner als die
 * 44 px, die Apple und Google als Mindestgröße nennen. `pointer: coarse`
 * statt einer Breitenabfrage – entscheidend ist der Finger, nicht das Fenster.
 */
@media (pointer: coarse) {
  .mvm-theme-toggle,
  .lang-btn,
  .lang-switch button {
    min-width: 44px;
    min-height: 44px;
  }

  .helper-links a,
  .footer-links a {
    display: inline-block;
    padding: 7px 0;
  }
}

/* ---------- Kopf über dem Formular ----------
 * Ersetzt auf Login und Registrieren die frühere Schaufenster-Karte mit
 * Augenbraue, langem Absatz und drei Pillen. Der Partner-Bereich hat dort
 * genau zwei Zeilen – Überschrift und ein Satz. Ein Anmeldeformular muss
 * niemanden mehr überzeugen; wer hier ist, will sich anmelden.
 */
.seiten-kopf {
  margin-bottom: 4px;
}

.seiten-kopf h1 {
  font-size: 26px;
  line-height: 1.25;
  margin: 0;
}

.seiten-kopf p {
  color: var(--muted);
  font-size: 15px;
  margin: 8px 0 0;
}

/* ---------- Eine Spalte, mittig ----------
 *
 * `.shell` ist ein Zwei-Spalten-Raster: links das Schaufenster, rechts das
 * Formular. Auf Login und Registrieren gibt es das Schaufenster nicht mehr –
 * die Überschrift stand dadurch weit links, das Formular weit rechts und
 * dazwischen 100 px Leere (gemessen bei 1200 px: Spalten 545 | 446).
 *
 * Diese Seiten bekommen deshalb eine Spalte, mittig, mit derselben Breite wie
 * `wrap-narrow` im Partner-Bereich.
 */
.shell.shell-schmal {
  display: block;
  max-width: 460px;
  margin-left: auto;
  margin-right: auto;
}

.shell.shell-schmal > .panel {
  width: 100%;
}

/* ---------- Sprachumschalter wie im Partner-Bereich ----------
 *
 * Beide sahen fast gleich aus, unterschieden sich aber an einer Stelle: Beim
 * Kunden lag die aktive Hälfte mit 3 px Abstand IM Rahmen und war nur zart
 * hinterlegt, beim Partner füllt sie ihre Seite ganz aus und ist Gold auf
 * Dunkel. Der Unterschied zwischen „ausgewählt" und „nicht ausgewählt" ist
 * dadurch auf einen Blick zu sehen.
 */
.lang-switch {
  padding: 0;
  overflow: hidden;
}

.lang-btn {
  border-radius: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 7px 11px;
}

.lang-btn.active {
  background: var(--gold-surface);
  color: var(--on-gold);
}

/* ---------- Hilfslinks unter dem Formular ----------
 *
 * Vorher standen sie auseinandergezogen: „Passwort vergessen?" ganz links,
 * „Hilfe & FAQ" und „Konto löschen" ganz rechts – bei 375 px brach das um und
 * „Passwort vergessen?" stand zweizeilig da. Jetzt mittig untereinander, wie
 * im Partner-Bereich.
 */
.helper-links {
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  text-align: center;
}

.helper-links > div {
  justify-content: center;
}

/* Die Zeile „Noch kein Konto? – Konto erstellen" unter der Karte. */
.unter-karte {
  margin-top: 22px;
  text-align: center;
  font-size: 14px;
  color: var(--muted);
}

.unter-karte a {
  color: var(--gold);
  font-weight: 700;
}

/* Über die volle Breite – der Anmelde-Knopf steht jetzt allein, ein halb
   breiter Knopf mit Leerraum daneben sähe nach fehlendem Nachbarn aus. */
.btn-block {
  width: 100%;
  justify-content: center;
}

/* ---------- Knopf in der Kopfzeile nach links ----------
 *
 * Der Weg zurück („Zur Barber-Suche", „Zum Login", „Zur Website") saß ganz
 * rechts, hinter Hell/Dunkel und Sprachumschalter – also dort, wo man
 * Einstellungen erwartet, nicht Navigation. Jetzt steht er direkt neben dem
 * Namen, dort wo man auf jeder Seite zuerst hinsieht.
 *
 * `display: contents` löst die Hülle `.topbar-actions` auf, damit ihre Kinder
 * direkte Flex-Elemente der Kopfzeile werden. Erst dann lässt sich der Knopf
 * mit `order` vor die Einstellungen ziehen, ohne das Markup auf sieben Seiten
 * anzufassen.
 */
.topbar-actions {
  display: contents;
}

/* Drei Zonen: LINKS der Weg zurueck, MITTE der Name, RECHTS Einstellungen
   und Abmelden.
   `account-delete.html` steckt seine zwei Knoepfe noch in ein eigenes
   `.actions`, deshalb beide Faelle. Die Einschraenkung auf `.topbar` ist
   wichtig: `.actions` heisst auch die Knopfzeile IM Formular. */
.topbar .topbar-actions > .btn,
.topbar .topbar-actions > .actions {
  order: 1;
}

.topbar .topbar-actions > .actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  /* `account-delete.html` gibt `.actions` einen Abstand nach oben – gemeint ist
     die Knopfzeile IM Formular, getroffen wird auch die in der Kopfzeile. Die
     Knoepfe standen dadurch 20 px tiefer als Name und Einstellungen daneben. */
  margin-top: 0;
}

/* Nach rechts geschoben wird an GENAU EINER Stelle. Zwei `auto`-Abstaende
   teilen sich den freien Platz – genau deshalb stand „Logout" vorher mitten
   in der Zeile, obwohl beide Seiten nach aussen sollten.
   `theme.js` fasst Hell/Dunkel und Sprachumschalter zur Laufzeit in
   `.mvm-theme-group` zusammen; die Regel fuer `.lang-switch` ist der
   Notnagel, falls das Skript nicht laeuft. */
.topbar .topbar-actions > .mvm-theme-group,
.topbar .topbar-actions > .mvm-theme-toggle,
.topbar .topbar-actions > .lang-switch {
  order: 2;
  margin-left: auto;
}

/* Abmelden ganz aussen – es ist der letzte Schritt, nicht der erste. */
.topbar #logoutBtn {
  order: 3;
  margin-left: 0;
}

/* Der Name mittig.
   Absolut gesetzt statt im Fluss: links und rechts sind unterschiedlich
   breit, mit Aussenabstaenden landete er nur in der Mitte des UEBRIGEN
   Platzes, nicht in der Mitte der Zeile.
   Erst ab 900 px – darunter bricht die Kopfzeile um, und ein aus dem Fluss
   geloester Name wuerde sich mit den Knoepfen ueberlagern. */
@media (min-width: 900px) {
  .topbar { position: relative; }
  .topbar .brand {
    position: absolute;
    left: 50%;
    /* Auch SENKRECHT mittig. `align-items: center` der Kopfzeile greift bei
       einem herausgeloesten Element nicht mehr – es haengt dann an der
       Oberkante, und der Name stand sichtbar tiefer als die Knoepfe daneben. */
    top: 50%;
    transform: translate(-50%, -50%);
    /* Nur Schrift, kein unsichtbarer Block ueber den Knoepfen. */
    pointer-events: none;

    /* Groesser als die 13 px der Seiten. Der Name steht jetzt allein in der
       Mitte und ist das einzige Erkennungszeichen der Zeile – auf dem
       Partner-Dashboard traegt er 17 px. Nur ab 900 px angehoben, damit die
       eigene Verkleinerung der Suchseite auf schmalen Geraeten bleibt. */
    font-size: 15px;
  }
  .topbar .brand::before {
    width: 26px;
    height: 26px;
    vertical-align: -7px;
  }
}

/* Ohne die Hülle fehlt deren eigener Abstand – die Kopfzeile hat einen
   eigenen, der hier reicht. Auf schmalen Geräten darf weiterhin umbrechen. */
.topbar {
  flex-wrap: wrap;
}

/* ---------- Karte in der Karte auflösen ----------
 *
 * `account-delete.html` legt seine Infokarten in eine weitere `.panel`. Solange
 * die Panels 28 px Radius und 32 px Polsterung hatten, fiel der doppelte Rahmen
 * kaum auf – mit den engeren Werten steht jetzt sichtbar Rahmen in Rahmen.
 * Die Hülle wird deshalb unsichtbar; die Infokarten tragen ihre Form selbst.
 *
 * `.panel.content` gibt es NUR auf dieser Seite (geprüft), die Regel kann also
 * keine andere treffen.
 */
.panel.content {
  background: none;
  border: 0;
  padding: 0;
  box-shadow: none;
}

/* ---------- Kundendashboard mit Bereichen ----------
 * Aufbau wie partner/app.html: links die Bereiche, rechts der Inhalt.
 */
.dash {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 18px;
  align-items: start;
}

.dash-nav {
  display: grid;
  gap: 4px;
  position: sticky;
  top: 16px;
}

.dash-nav-knopf {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  /* 44 px hoch – auch am Rechner angenehm, auf dem Telefon nötig. */
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.dash-nav-knopf:hover { background: rgba(var(--ink), .05); color: var(--text); }
.dash-nav-knopf:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.dash-nav-knopf.aktiv {
  background: rgba(var(--gold-rgb), .12);
  border-color: rgba(var(--gold-rgb), .35);
  color: var(--gold);
}

.dash-nav-zeichen { font-size: 15px; width: 18px; text-align: center; flex: 0 0 auto; }

/* min-width:0 an der ganzen Kette: Ein Gitterfeld ist von Haus aus mindestens
   so breit wie sein Inhalt. Der Chat im Bereich „Nachrichten" brachte damit
   383 px mit – auf einem 375-px-Telefon liess sich dadurch die GANZE Seite
   seitlich schieben, obwohl die Liste in sich selbst scrollen soll. */
.dash-inhalt { display: grid; gap: 16px; min-width: 0; }

/* Luft um den Fortschrittsbalken.
 *
 * Gemessen am 06.09.2026: zwischen der Karte und dem Bereichsaufbau lagen
 * GENAU 0 px. Beide tragen einen Schatten, dadurch sah es aus, als klebten
 * sie aneinander bzw. ueberlappten sich. Nach oben waren es 16 px – zu wenig
 * fuer eine Karte, die die ganze Breite einnimmt. */
#completionPanel { margin: 26px 0 0; }

/* Der Abstand nach unten haengt am Bereichsaufbau, NICHT an der Karte:
   Sobald das Profil vollstaendig ist, blendet sich die Karte aus
   (display:none), und ein Aussenabstand an ihr waere mit ihr weg – dann
   klebte der Aufbau wieder direkt an der Ueberschrift. So greift der Abstand
   in beiden Faellen. */
.dash { margin-top: 28px; }
.bereich { display: grid; gap: 16px; min-width: 0; }
.bereich[hidden] { display: none; }

/* Auf dem Telefon liegt die Navigation als Zeile über dem Inhalt und lässt
   sich seitlich schieben – eine Spalte daneben wäre dort zu schmal für beide. */
@media (max-width: 860px) {
  .dash { grid-template-columns: 1fr; }

  .dash-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 6px;
    padding-bottom: 4px;
    /* Ohne das schneidet der Rahmen des aktiven Knopfes am Rand ab. */
    scroll-padding: 4px;
    /* Ohne min-width:0 waechst der Streifen mit seinem Inhalt statt zu
       scrollen – ein Gitterfeld ist von Haus aus mindestens so breit wie das,
       was drinsteht. Mit dem sechsten Knopf („Nachrichten") ragte er 24 px
       ueber den Bildschirm, und die GANZE Seite liess sich seitlich schieben. */
    min-width: 0;
  }

  .dash-nav-knopf { white-space: nowrap; }
}

/* ---------- Kopf der Dokumentseiten ----------
 *
 * Datenschutz und Nutzungsbedingungen hatten denselben Kopf wie die Suchseite:
 * 28 px Radius, 30 px Polsterung und eine Überschrift bis 56 px. Auf einer
 * Seite, die man liest statt bestaunt, drängt sich das vor den Text.
 *
 * Die Klasse steht NUR auf diesen beiden Seiten – `search.html` behält ihre
 * große Zeile, das ist ein Schaufenster.
 */
.hero.hero-dokument {
  border-radius: 18px;
  padding: 22px;
}

.hero.hero-dokument h1 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  margin: 6px 0 8px;
}

.hero.hero-dokument .eyebrow {
  font-size: 12px;
  letter-spacing: 0.1em;
}

.hero.hero-dokument p {
  font-size: 15px;
}

/* Die vier Knöpfe darunter waren 46 px hoch und 13 px klein beschriftet –
   im Partner-Bereich sind es 44 px bei 15 px. */
.hero.hero-dokument .btn {
  min-height: 44px;
  font-size: 14px;
}


/* ---------- Warteschirm und Marke mit App-Zeichen ----------
 *
 * Beides so wie im Partner-Bereich: dort steht auf `partner/app.html` waehrend
 * der Anmeldepruefung nur das App-Zeichen und „Einen Moment …", und die Marke
 * in der Kopfzeile traegt dasselbe Bild.
 *
 * Die Regeln stehen hier statt in den Seiten selbst, weil `customer-dashboard`
 * und `support` je einen eigenen `<style>`-Block mit leicht verschiedenen
 * Werten mitbringen. Dieses Blatt wird NACH den Bloecken geladen und bekommt
 * damit beide auf denselben Stand.
 */

.auth-card {
  /* Kein Kasten mehr: Rahmen, Flaeche und Schatten um zwei Zeilen herum waren
     mehr Verpackung als Inhalt. Der Partner-Bereich zeigt sie frei. */
  border: 0;
  background: none;
  box-shadow: none;
}

.auth-logo {
  display: block;
  width: 44px;
  height: 44px;
  margin: 0 auto 16px;
  border-radius: 12px;
}

/* Der Kreisel ist durch das Zeichen ersetzt. Die Regel bleibt als Sicherung:
   sollte irgendwo noch altes Markup liegen, laeuft dort kein zweites Element
   mit. */
.auth-spinner { display: none; }

/* Das Zeichen VOR dem Namen in der Kopfzeile – ueber CSS, damit nicht in
   siebzehn Seiten dasselbe <img> nachgetragen werden muss.
   `barber-app-logo.png` liegt im selben Verzeichnis wie alle Kundenseiten. */
.brand::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 9px;
  vertical-align: -6px;
  border-radius: 6px;
  background: url("barber-app-logo.png") center / cover no-repeat;
}


/* Hinweis in einem leeren Bereich (etwa „keine Termine" mit Verweis auf die
   offenen Anfragen). Kleiner als der Fliesstext, aber anklickbar. */
.empty .leer-hinweis {
  margin: 8px 0 0;
  font-size: 13px;
  line-height: 1.6;
}
.empty .leer-hinweis a {
  color: var(--gold);
  text-decoration: underline;
}


/* ---------- Klebende Kopfzeile in den angemeldeten Bereichen ----------
 *
 * Wie im Partner-Dashboard (`partner/partner.css`: sticky, durchscheinend,
 * mit Unterkante). Nur dort, wo man lange scrollt und den Bereichswechsel
 * bzw. Abmelden im Zugriff braucht: `body.seite-app` steht auf
 * customer-dashboard.html und support.html. Auf Suche, Impressum oder den
 * Formularseiten bringt es nichts und kostet auf dem Telefon nur Hoehe.
 *
 * Die Regel MUSS nach dem `@media (min-width: 900px)`-Block stehen: der setzt
 * `position: relative` fuer den mittig gesetzten Namen. `sticky` bildet
 * ebenfalls einen Bezugsrahmen, der Name bleibt also mittig.
 *
 * Die negativen Seitenabstaende heben das Innenpolster von `.wrap` (16 px)
 * auf, damit die Flaeche bis an den Rand reicht – sonst schaeut der Inhalt
 * links und rechts an der Kopfzeile vorbei durch.
 */
/* NUR ab 900 px – derselbe Punkt, ab dem die Zeile einreihig wird.
   Darunter bricht sie um und ist gemessene 129 px hoch; das waeren auf einem
   812 px hohen Telefon 16 % des Bildschirms, die dauerhaft wegfallen. Dort
   scrollt die Kopfzeile weiterhin einfach mit. */
@media (min-width: 900px) {
  .seite-app .topbar {
    position: sticky;
    top: 0;
    z-index: 30;
    margin-left: -16px;
    margin-right: -16px;
    padding: 12px 16px;
    background: rgba(var(--panel-rgb), .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
  }

  /* Ohne `backdrop-filter` (aeltere Browser) waere die Flaeche
     halbdurchsichtig und der Text darunter lesbar mit – dann lieber deckend. */
  @supports not ((backdrop-filter: blur(14px)) or (-webkit-backdrop-filter: blur(14px))) {
    .seite-app .topbar { background: rgb(var(--panel-rgb)); }
  }
}