/* ============================================================================
   Makerio · Anmelden & Registrieren
   Mobil zuerst: die Regeln unten gelten fuer das Handy, die Media Queries
   erweitern nach oben. Markenfarben stehen als Variablen ganz oben — beim
   Farbwechsel wird NUR hier getauscht, der Rest zieht automatisch nach.
   ========================================================================= */

:root {
    /* --- Marke --- */
    /* Aus der Logodatei ausgelesen: Navy #112031, Teal #009c9e.
       --teal ist bewusst etwas dunkler als das Marken-Teal: weisse Schrift auf
       #009c9e erreicht nur 3.4:1 und faellt damit durch WCAG AA. #007d7e
       schafft 4.96:1 und sieht neben dem Logo identisch aus. Das echte
       Marken-Teal steht als --teal-hell auf dem dunklen Panel (4.85:1). */
    --teal:        #007d7e;   /* Knopf, Links auf Weiss */
    --teal-dunkel: #00696a;   /* gedrueckt */
    --teal-hell:   #009c9e;   /* Marken-Teal: Logo, Symbole auf Dunkel */
    --teal-weich:  #e4f2f2;   /* Fokusring, zarte Flaechen */

    --navy:        #112031;   /* Markenfarbe, Panel oben */
    --navy-2:      #14343d;   /* Panel unten (leicht ins Teal gezogen) */

    /* --- Flaechen & Text --- */
    --karte:       #ffffff;
    --grund:       #f7f9f9;
    --tinte:       #12222a;
    --tinte-weich: #5b6b73;
    --tinte-zart:  #93a1a8;
    --rahmen:      #e2e8ea;
    --feld:        #f7f9fa;

    /* --- Signalfarben --- */
    --fehler:       #b3261e;
    --fehler-weich: #fdecea;
    --erfolg:       #1d7a55;
    --erfolg-weich: #e8f5ef;

    /* --- Masse --- */
    --radius: 12px;
    --ziel:   54px;   /* Mindesthoehe aller Tippziele */
}

*, *::before, *::after { box-sizing: border-box; }

html {
    /* Verhindert, dass iOS beim Drehen ins Querformat die Schrift aufblaest. */
    -webkit-text-size-adjust: 100%;
    /* Nichts darf seitlich herauslaufen — auf 320px die haeufigste Ursache
       fuer den "warum wackelt die Seite"-Effekt. */
    overflow-x: hidden;
}

body {
    margin: 0;
    min-height: 100vh;
    min-height: 100dvh;   /* dvh: beruecksichtigt die ein-/ausblendende Safari-Leiste */
    background: var(--karte);
    color: var(--tinte);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

.split {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
}

/* ============================================================================
   MARKENPANEL (dunkel)
   Auf dem Handy ein kompakter Kopf, ab 900px die linke Spalte.
   ========================================================================= */

/* Auf dem Handy bewusst FLACH gehalten. Jeder Pixel hier schiebt den
   Anmelde-Knopf nach unten — und der muss ohne Scrollen erreichbar sein,
   auch auf einem iPhone SE mit eingeblendeter Adressleiste. */
.brand-panel {
    position: relative;
    overflow: hidden;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #e8f1f2;
    padding: max(20px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-left))
             22px max(20px, env(safe-area-inset-right));
}

.brand-inner { position: relative; z-index: 1; }

.logo {
    display: inline-flex;
    align-items: center;
    /* Auch das Logo ist ein Link — 48px Mindesthoehe wie jedes Tippziel. */
    min-height: 48px;
    text-decoration: none;
}

/* Feste width/height stehen im Markup; hier nur die Anzeigegroesse.
   height:auto haelt das Seitenverhaeltnis, damit nichts verzerrt. */
.logo-bild {
    display: block;
    width: 152px;
    height: auto;
}

.eyebrow {
    margin: 16px 0 7px;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--teal-hell);
}

.claim {
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.2;
    letter-spacing: -.025em;
    font-weight: 700;
    color: #ffffff;
}

/* Der Fliesstext kostet auf dem Handy ~70px Hoehe und sagt nichts, was die
   vier Nutzenversprechen unter dem Formular nicht konkreter sagen.
   Ab Tabletbreite wird er wieder eingeblendet. */
.lead {
    display: none;
    margin: 12px 0 0;
    max-width: 34ch;
    color: #a9bfc4;
    font-size: .95rem;
}

/* Dekorative Wellen am unteren Rand des Panels */
.wellen {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 58px;
    z-index: 0;
    pointer-events: none;
}

/* ---------------------------------------------------- Nutzenversprechen */

.features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.f-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 11px;
    border: 1px solid rgba(0, 156, 158, .38);
    color: var(--teal-hell);
}
.f-icon svg { width: 21px; height: 21px; }

.f-text { display: block; }
.f-text strong {
    display: block;
    font-size: .94rem;
    font-weight: 600;
    color: #ffffff;
}
.f-text span {
    display: block;
    font-size: .84rem;
    line-height: 1.5;
    color: #93aab0;
}

/* Im Panel (Rechner) untereinander — auf dem Handy ausgeblendet, dort
   uebernimmt .features-kompakt unter dem Formular. */
.features-panel { display: none; }

/* ============================================================================
   FORMULARSPALTE (hell)
   ========================================================================= */

.form-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--karte);
    padding: 26px max(20px, env(safe-area-inset-left))
             max(24px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-right));
}

.form-inner { width: 100%; }

.form-inner h1 {
    margin: 0 0 7px;
    font-size: 1.55rem;
    line-height: 1.25;
    letter-spacing: -.025em;
    font-weight: 700;
}

.form-inner .sub {
    margin: 0 0 22px;
    color: var(--tinte-weich);
    font-size: .95rem;
}

/* --------------------------------------------------------- Fortschritt 1/2 */

.steps {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
}

.steps-text {
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinte-zart);
    white-space: nowrap;
}

.steps-bar { display: flex; gap: 5px; flex: 1; }

.steps-dot {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--rahmen);
    transition: background .25s;
}
.steps-dot.is-done { background: var(--teal); }

/* ----------------------------------------------------------------- Felder */

.field { margin-bottom: 20px; }

.field label {
    display: block;
    margin-bottom: 8px;
    font-size: .9rem;
    font-weight: 600;
}

.eingabe { position: relative; }

.feld-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    color: var(--tinte-zart);
    pointer-events: none;   /* der Klick soll ins Feld gehen, nicht aufs Symbol */
    transition: color .15s;
}
.feld-icon svg { width: 20px; height: 20px; }

.field input,
.field select {
    width: 100%;
    min-height: var(--ziel);
    padding: 14px 16px;
    border: 1.5px solid var(--rahmen);
    border-radius: var(--radius);
    background: var(--feld);
    color: var(--tinte);
    /* 16px ist Pflicht: bei kleinerer Schrift zoomt iOS beim Antippen automatisch
       in das Feld hinein und der Nutzer landet in einer verschobenen Seite. */
    font-size: 16px;
    font-family: inherit;
    line-height: 1.4;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .15s, box-shadow .15s, background .15s;
}

.mit-icon input { padding-left: 50px; }
.mit-auge input { padding-right: 54px; }

.field input::placeholder { color: var(--tinte-zart); }

.field input:focus,
.field select:focus {
    outline: none;
    background: var(--karte);
    border-color: var(--teal);
    box-shadow: 0 0 0 3px var(--teal-weich);
}
.eingabe:focus-within .feld-icon { color: var(--teal); }

.field select {
    /* Eigener Pfeil, damit die Auswahl auf allen Systemen gleich aussieht. */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2393a1a8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 46px;
}

.field-error input,
.field-error select { border-color: var(--fehler); }
.field-error input:focus,
.field-error select:focus { box-shadow: 0 0 0 3px var(--fehler-weich); }

/* display:block, damit die Meldungen auch als <span> in einer Beschriftung
   eine eigene Zeile bekommen (z. B. der Hinweis unter "Angemeldet bleiben"). */
.msg-error {
    display: block;
    margin: 8px 0 0;
    font-size: .85rem;
    color: var(--fehler);
}

.msg-hint {
    display: block;
    margin: 8px 0 0;
    font-size: .82rem;
    color: var(--tinte-zart);
    line-height: 1.5;
}

/* ---------------------------------------------------------- Passwort-Auge */

.pw-eye {
    position: absolute;
    top: 50%;
    right: 4px;
    transform: translateY(-50%);
    /* 48x48: kleiner darf ein Tippziel auf dem Handy nicht sein. */
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border: 0;
    background: none;
    border-radius: 10px;
    color: var(--tinte-zart);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.pw-eye svg { width: 21px; height: 21px; }
.pw-eye:active { background: var(--teal-weich); }
.pw-eye.is-on { color: var(--teal); }
.pw-eye.is-on .eye-slash { display: none; }

/* Staerke-Anzeige */
.meter {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
}
.meter-track {
    flex: 1;
    height: 4px;
    border-radius: 99px;
    background: var(--rahmen);
    overflow: hidden;
}
.meter-fill {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 99px;
    background: var(--fehler);
    transition: width .2s, background .2s;
}
.meter-text {
    font-size: .78rem;
    color: var(--tinte-zart);
    min-width: 4.5em;
    text-align: right;
}
.meter[data-level="2"] .meter-fill { background: #d9a02b; }
.meter[data-level="3"] .meter-fill,
.meter[data-level="4"] .meter-fill { background: var(--erfolg); }

/* -------------------------------------------------------------- Checkboxen */

.check {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    /* Padding statt Rand: die ganze Zeile wird zum Tippziel. */
    padding: 10px 0;
    font-size: .9rem;
    line-height: 1.5;
    cursor: pointer;
}

.check input {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    margin: 0;
    accent-color: var(--teal);
}

.check a { color: var(--teal); }

/* Zeile "Angemeldet bleiben" + "Passwort vergessen?".
   flex-wrap: bei sehr schmalen Geraeten rutscht der Link in die naechste Zeile,
   statt dass etwas gequetscht wird. */
.zeile-optionen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    margin-bottom: 18px;
}
.zeile-optionen .check { margin: 0; }

.link-teal {
    display: inline-flex;
    align-items: center;
    /* Eigenes Tippziel statt winzigem Text-Link. */
    min-height: 44px;
    padding: 8px 0;
    font-size: .9rem;
    font-weight: 500;
    color: var(--teal);
    text-decoration: none;
}

/* ---------------------------------------------------------------- Knoepfe */

.btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: var(--ziel);
    padding: 15px 52px;
    border: 1.5px solid var(--teal);
    border-radius: var(--radius);
    background: var(--teal);
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background .15s, border-color .15s, transform .06s;
}
.btn:active { background: var(--teal-dunkel); border-color: var(--teal-dunkel); transform: scale(.995); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

/* Pfeil sitzt am rechten Rand, die Beschriftung bleibt mittig. */
.btn svg {
    position: absolute;
    right: 20px;
    width: 20px;
    height: 20px;
}

.btn-rand {
    background: transparent;
    color: var(--teal);
}
.btn-rand:active { background: var(--teal-weich); border-color: var(--teal); }

.btn-still {
    background: transparent;
    border-color: var(--rahmen);
    color: var(--tinte);
}
.btn-still:active { background: var(--grund); }

/* --------------------------------------------------------------- Meldungen */

.alert {
    margin: 0 0 20px;
    padding: 13px 15px;
    border-radius: var(--radius);
    font-size: .9rem;
    line-height: 1.55;
}
.alert-error   { background: var(--fehler-weich); color: var(--fehler); }
.alert-success { background: var(--erfolg-weich); color: var(--erfolg); }
.alert-info    { background: var(--grund);        color: var(--tinte-weich); }

/* ------------------------------------------------------------- Abschnitte */

.trenner {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0 18px;
    color: var(--tinte-weich);
    font-size: .88rem;
}
.trenner::before,
.trenner::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rahmen);
}

.rechtshinweis {
    margin: 18px 0 0;
    text-align: center;
    font-size: .8rem;
    line-height: 1.6;
    color: var(--tinte-zart);
}
.rechtshinweis a { color: var(--teal); }

/* --------------------------------------------------------- Erfolgs-Symbol */

.symbol {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: var(--teal-weich);
    color: var(--teal);
}
.symbol svg { width: 30px; height: 30px; }
.symbol.ok { background: var(--erfolg-weich); color: var(--erfolg); }
.mitte { text-align: center; }
.mitte .sub { margin-bottom: 26px; }

/* Hervorgehobene E-Mail-Adresse auf der "Postfach pruefen"-Seite */
.mail-box {
    display: block;
    margin: 0 0 22px;
    padding: 14px 16px;
    border-radius: var(--radius);
    background: var(--feld);
    border: 1px solid var(--rahmen);
    font-size: .95rem;
    font-weight: 600;
    /* Lange Adressen duerfen die Karte nicht sprengen. */
    overflow-wrap: anywhere;
}

/* --------------------------------------- Markenblock unter dem Formular */
/* Nur auf dem Handy sichtbar: die Werbebotschaft steht UNTER der Aufgabe. */

.brand-mobil {
    margin: 34px -20px 0;
    padding: 26px 20px;
    background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
    color: #e8f1f2;
}
.brand-mobil .eyebrow { margin: 0 0 18px; }

.features-kompakt { display: grid; gap: 16px; }

/* ------------------------------------------------------------- Fusszeile */

.foot {
    margin-top: auto;
    padding-top: 26px;
    text-align: center;
    font-size: .8rem;
    color: var(--tinte-zart);
}
.foot nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px 6px;
    margin-bottom: 6px;
}
.foot nav a {
    /* Auch im Fuss echte Tippziele — sonst trifft auf dem Handy niemand. */
    padding: 8px 10px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    color: var(--tinte-weich);
    text-decoration: none;
}
.foot p { margin: 0; }

/* ============================================================================
   Ab hier: groessere Schirme. Alles darunter ist reine Erweiterung —
   nimmt man diese Bloecke weg, bleibt die funktionierende Handy-Version.
   ========================================================================= */

/* KURZE Bildschirme (iPhone SE, Handy im Querformat, Tastatur eingeblendet).
   Hier zaehlt nur eines: der Anmelde-Knopf muss ohne Scrollen erreichbar sein.
   Deshalb schrumpft der Markenkopf auf die reine Logozeile — die Werbebotschaft
   steht weiterhin vollstaendig unter dem Formular.
   max-height statt max-width: das Problem ist die Hoehe, nicht die Breite. */
@media (max-width: 899px) and (max-height: 720px) {
    .brand-panel .eyebrow,
    .brand-panel .claim { display: none; }
    .brand-panel { padding-bottom: 16px; }
    .wellen { height: 38px; }

    .form-panel { padding-top: 16px; }
    .form-inner h1 { font-size: 1.4rem; }
    .form-inner .sub { margin-bottom: 14px; }

    .field { margin-bottom: 12px; }
    .field label { margin-bottom: 5px; }
    .check { padding: 6px 0; }
    .zeile-optionen { margin-bottom: 12px; }
    .trenner { margin: 18px 0 12px; }
}

/* Tablet hoch: mehr Luft, Inhalt zentriert */
@media (min-width: 600px) and (max-width: 899px) {
    .brand-panel { padding: 40px 40px 46px; }
    .lead   { display: block; }
    .claim  { font-size: 1.7rem; }
    .wellen { height: 90px; }
    .form-panel  { padding: 44px 40px 32px; }
    .form-inner, .brand-inner { max-width: 30rem; margin: 0 auto; }
    .brand-mobil { margin-left: -40px; margin-right: -40px; padding: 32px 40px; }
    .brand-mobil .features-kompakt,
    .brand-mobil .eyebrow { max-width: 30rem; margin-left: auto; margin-right: auto; }
    /* Auf dem Tablet passen zwei Spalten nebeneinander. */
    .features-kompakt { grid-template-columns: 1fr 1fr; gap: 20px 24px; }
}

/* Rechner: das eigentliche Split-Screen-Layout */
@media (min-width: 900px) {
    .split {
        flex-direction: row;
        align-items: stretch;
    }

    .brand-panel {
        flex: 0 0 44%;
        max-width: 34rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 56px 4vw;
    }

    .brand-inner { max-width: 27rem; }

    .logo-bild { width: 208px; }

    .eyebrow { margin-top: 46px; }
    .claim   { font-size: 2.1rem; }
    /* display:block nicht vergessen — die Grundregel blendet den Fliesstext
       fuer das Handy aus, hier ist wieder Platz dafuer. */
    .lead    { display: block; font-size: 1rem; margin: 14px 0 34px; }

    /* Jetzt uebernimmt die Liste im Panel, der Handy-Block verschwindet. */
    .features-panel  { display: grid; gap: 22px; }
    .brand-mobil     { display: none; }

    .wellen { height: 150px; }

    .form-panel {
        flex: 1;
        align-items: center;
        padding: 48px 5vw 32px;
        background: var(--karte);
    }

    /* margin-block: auto zentriert das Formular in der Restflaeche und laesst
       die Fusszeile trotzdem unten stehen. (justify-content: center wuerde am
       margin-top:auto der Fusszeile scheitern.) */
    .form-inner {
        max-width: 25rem;
        margin-block: auto;
    }
    .form-inner h1 { font-size: 1.9rem; }

    .foot { margin-top: 0; padding-top: 34px; }

    /* Der Zeiger zeigt Zustaende, die es auf dem Handy nicht gibt. */
    .btn:hover        { background: var(--teal-dunkel); border-color: var(--teal-dunkel); }
    .btn-rand:hover   { background: var(--teal-weich); }
    .btn-still:hover  { background: var(--grund); }
    .pw-eye:hover     { color: var(--tinte); }
    .link-teal:hover  { text-decoration: underline; }
    .foot nav a:hover { color: var(--teal); }
    .logo:hover .bildmarke { transform: scale(1.04); transition: transform .2s; }
}

/* Sehr breite Schirme: das Formular soll nicht in der Mitte verloren wirken */
@media (min-width: 1500px) {
    .brand-panel { flex-basis: 40%; }
}

/* Sichtbarer Fokus fuer Tastaturbedienung (Rechner + externe Tastatur am iPad) */
:focus-visible {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}
.brand-panel :focus-visible { outline-color: var(--teal-hell); }

/* Wer Bewegung reduziert haben moechte, bekommt keine Animationen. */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
    }
}