/* ==================================================================
   nextparty24 - Kundenbereich

   Das Aussehen kommt aus admin/css/admin.css (siehe accountlayout.php).
   Hier steht nur, was der Kundenbereich anders braucht als der Admin.
   ================================================================== */

/* Abmelden ist ein Formular mit Knopf statt eines Verweises - der Knopf
   soll aber aussehen wie die Verweise daneben. */
.admin-nav form,
.admin-konto__menue form { margin: 0; }

button.admin-nav__punkt,
button.admin-konto__punkt {
    width: 100%;
    border: 0;
    background: transparent;
    /* Nicht "font: inherit": das setzte auch die Groesse zurueck und
       schlug die Stufe aus .admin-konto__punkt - Abmelden stand groesser
       da als die Punkte darueber. */
    font-family: inherit;
    line-height: inherit;
    text-align: left;
    cursor: pointer;
}

/* Die Logos verweisen auf die Webseite; der Verweis selbst soll keinen
   Unterstrich und keine Zeilenhoehe beitragen. */
.admin-marke a,
.admin-nav__marke a { display: block; line-height: 0; }

/* Zwei Felder nebeneinander (PLZ und Ort), die PLZ schmal davor wie auf
   einem Brief. Auf schmalen Bildschirmen untereinander. */
.konto-plzort {
    display: grid;
    grid-template-columns: 8rem 1fr;
    gap: 0 var(--space-3);
}

@media (max-width: 480px) {
    .konto-plzort { grid-template-columns: 1fr; }
}

/* ---------- Rechnungsadresse in "Meine Daten" ----------
   Ein <fieldset>, damit Screenreader Haken und Felder als Gruppe kennen.
   Rahmen und Einzug des Browsers braucht das nicht; die Legende ist eine
   gewoehnliche Abschnittsueberschrift (.admin-h2). min-width: 0, weil ein
   Fieldset sonst nicht schmaler als sein Inhalt wird.

   Ist "gleich meiner Anschrift" angehakt, sind die Felder weg - per
   :has(), also auch ohne JavaScript. Der Server speichert dann nichts
   davon (AccountReadBilling). */
.konto-rechnung {
    min-width: 0;
    margin: var(--space-6) 0 0;
    padding: 0;
    border: 0;
}
.konto-rechnung__titel { padding: 0; }
.konto-rechnung:has(.konto-rechnung__gleich:checked) .konto-rechnung__felder { display: none; }

/* ------------------------------------------------------------------
   Kundenanmeldung: geteilt (AccountSplitOpen)

   Links das Foto mit einer kraeftigen Zeile, rechts das Formular. Auf
   schmalen Bildschirmen das Foto als flaches Band darueber.

   Die Bildseite bleibt in beiden Farbschemata dunkel: weisse Schrift
   auf einem dunklen Schleier ueber dem Foto. Deshalb eigene, feste
   Farben statt --color-bg/--color-text - die kippen im hellen Schema.
   ------------------------------------------------------------------ */
.konto-geteilt {
    /* Hoechstbreite des Formulars. Formular UND Kopfleiste rechnen damit,
       damit der Hell/Dunkel-Knopf genau ueber der rechten Kante des
       Formulars steht. */
    --konto-formular: 432px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
}

/* Kopfleiste: dieselbe wie auf der Webseite (.np-nav, css/bausteine.css),
   aber nicht auf die Seitenbreite (.np-wrap) ausgerichtet, sondern auf
   das geteilte Raster darunter - gerade Linien von oben nach unten:
     links   das Logo ueber der Schrift auf dem Foto (--space-8 vom Rand)
     rechts  der letzte Knopf ueber der rechten Kante des Formulars, das
             mittig in der rechten Haelfte steht.
   Prozentangaben im padding beziehen sich auf die Breite der Leiste,
   also des Fensters: (50% - Formular) / 2 ist derselbe Abstand, den das
   Formular in seiner Haelfte nach rechts hat. */
.konto-geteilt__kopfzeile {
    padding-left: var(--space-8);
    padding-right: max(var(--space-8), calc((50% - var(--konto-formular)) / 2));
}

/* Der Rest der Hoehe gehoert Foto und Formular. */
.konto-geteilt__rahmen {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.konto-geteilt__bild {
    --bild-schleier: #08060b;
    --bild-schrift: #f1f1f4;
    --bild-schrift-leise: #c9c9d1;
    position: relative;
    margin: 0;
    overflow: hidden;
    background: var(--bild-schleier);
}

.konto-geteilt__bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Die beiden Tanzenden sitzen rechts der Mitte, die Gesichter im
       oberen Drittel - so bleiben sie auch im schmalen Ausschnitt drin. */
    object-position: 60% 30%;
}

/* Schleier von unten: die Schrift steht auf ruhigem Grund, oben bleibt
   das Licht der Buehne sichtbar. */
.konto-geteilt__bild::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        color-mix(in srgb, var(--bild-schleier) 92%, transparent) 0%,
        color-mix(in srgb, var(--bild-schleier) 55%, transparent) 38%,
        transparent 70%
    );
}

.konto-geteilt__text {
    position: absolute;
    /* Etwas hoeher und naeher an die Kante als das Polster der Seite:
       ganz unten wirkte der Block wie hingerutscht. */
    left: var(--space-6);
    right: var(--space-8);
    bottom: var(--space-16);
    z-index: 1;
    max-width: 34rem;
}

/* Ueber der Zeile steht ein Kicker (.admin-kicker--akzent), wie ueber
   jeder Ueberschrift der Webseite. Bis zum 09.10.2026 war es ein kurzer
   gelber Strich - ein Einzelstueck, das es sonst nirgends gab. */

.konto-geteilt__titel {
    margin: 0;
    font-size: var(--text-display);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.025em;
    color: var(--bild-schrift);
    text-wrap: balance;
}

.konto-geteilt__unterzeile {
    margin: var(--space-3) 0 0;
    font-size: var(--text-lg);
    line-height: 1.5;
    color: var(--bild-schrift-leise);
    text-wrap: pretty;
}

/* Rechts das Formular, mittig in seiner Haelfte und nie breiter als
   die bisherige Karte. */
.konto-geteilt__formular {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-block: var(--space-8);
    padding-inline: max(var(--space-8), calc((100% - var(--konto-formular)) / 2));
    background: var(--color-surface);
}

@media (max-width: 860px) {
    .konto-geteilt__kopfzeile { padding-inline: var(--space-4); }

    .konto-geteilt__rahmen {
        flex: none;
        grid-template-columns: minmax(0, 1fr);
    }

    .konto-geteilt__bild { height: 260px; }

    .konto-geteilt__text {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }

    /* Im flachen Band nur die Zeile - die Unterzeile stuende sonst
       mitten auf den Gesichtern. */
    .konto-geteilt__unterzeile { display: none; }

    .konto-geteilt__formular {
        padding: var(--space-6) var(--space-4) var(--space-8);
    }
}

/* ---------- Kundenanmeldung: Feinschliff ----------
   Nur in der geteilten Anmeldung (.konto-geteilt), der Admin-Login und
   die uebrigen Kundenseiten bleiben unberuehrt. Ruhig gehalten wie der
   Rest: kein Schimmer, nichts, was sich beim Ueberfahren hebt. */


/* Ein schwacher gelber Schein oben rechts: der Akzent der Marke als
   Licht, nicht als Flaeche. Haelt die leere Haelfte nicht ganz kahl. */
.konto-geteilt__formular {
    background:
        radial-gradient(circle at 100% 0%, color-mix(in srgb, var(--color-accent) 9%, transparent), transparent 42%),
        var(--color-surface);
}

/* Angemeldet bleiben links, Passwort vergessen rechts. */
.konto-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
    margin: var(--space-1) 0 var(--space-6);
}
.konto-zeile .admin-haken { margin: 0; }
.konto-zeile__link { font-size: var(--text-sm); }

/* Knoepfe ueber die ganze Breite des Formulars. */
.konto-voll {
    display: flex;
    width: 100%;
}

/* Trennlinie mit Frage: "Noch kein Konto?" */
.konto-trenner {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: var(--space-8) 0 var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-neutral-400);
}
.konto-trenner::before,
.konto-trenner::after {
    content: "";
    flex: 1;
    border-top: var(--linie);
}


/* Zwei Buchstaben im runden Kontoknopf oben rechts - eine Stufe kleiner
   als die einzelne Initiale im Admin, sonst stossen sie an den Rand. */
.admin-konto__knopf {
    font-size: var(--text-sm);
    letter-spacing: .02em;
}

/* Einstellungen: zwei Bloecke untereinander, mit Luft dazwischen. */
#passwort.admin-block { margin-top: var(--space-8); }

/* "Meine Daten": immer zwei Spalten - Vorname und Nachname, darunter
   Firma und Telefon. Das automatische Raster aus admin.css macht bei
   breitem Fenster drei daraus, dann steht ein Feld allein in der
   zweiten Reihe. Den Abstand nach unten gibt das Raster selbst. */
.admin-zwei.konto-raster {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 480px) {
    .admin-zwei.konto-raster { grid-template-columns: minmax(0, 1fr); }
}

/* Absende-Knopf im Konto: Feldabstand (16 px) plus die 24 px Luft aus
   css/bausteine.css - dieselbe Rechnung wie auf der Webseite. Hier fallen
   der untere Rand von .admin-feld und der obere des Knopfs zusammen,
   deshalb steht die Summe als ein Wert da. */
form > button.btn-block[type="submit"] { margin-top: var(--space-10); }