/*
 * Auftritt nach außen — Nachweisportal, Unterschriftenseite, Anmeldung.
 *
 * Die Farben und Maße stammen aus dem Auftritt der Unternehmensgruppe (version.blue): das
 * tiefe Blau des Logos, das warme Pergament als Grund, große Radien, ruhige Schatten. Die
 * eigentliche Markenfarbe setzt der Mandant selbst; sie kommt als --marke-primaer und
 * --marke-akzent aus der Datenbank und überschreibt die Vorgaben hier.
 */
:root {
    --marke-primaer: #282653;
    --marke-akzent:  #3d6db2;
    --marke-hell:    #6770b8;
    --marke-eis:     #a8aacc;

    --marke-grund:   #f5f3ec;   /* warmes Pergament */
    --marke-stein:   #ecebe1;
    --marke-karte:   #ffffff;

    --marke-linie:   rgba(40, 38, 83, .12);
    --marke-tinte:   #1a1c3a;
    --marke-tinte-2: #494c70;
    --marke-tinte-3: #7a7e9a;

    --marke-radius:   16px;
    --marke-radius-s: 10px;
    /* Der große Radius und der tiefe Schatten fehlten hier — die Vorlage
       (version.blue/styles.css) hat `--radius-l: 26px` und `--shadow-lg`, und sie sind genau
       das, was einem freistehenden Kasten auf dem Pergamentgrund Halt gibt. Ohne sie saß die
       Anmeldung flach und klein auf der Fläche. */
    --marke-radius-l: 26px;
    --marke-schatten: 0 1px 2px rgba(40,38,83,.04), 0 2px 8px rgba(40,38,83,.05);
    --marke-schatten-m: 0 4px 10px rgba(40,38,83,.05), 0 18px 36px rgba(40,38,83,.07);
    --marke-schatten-l: 0 8px 18px rgba(40,38,83,.08), 0 36px 70px rgba(40,38,83,.12);
    /* Die Vorlage misst den Innenabstand mit, nicht in Stufen: `clamp(28px, 4vw, 48px)`. */
    --marke-polster: clamp(28px, 4vw, 48px);
}

body.marke {
    /* Wie die Vorlage: ein Lichtschein oben rechts über einem Verlauf, der nach unten in
       `#ece9df` läuft. Eine flache Fläche ließ jede freistehende Karte darauf schweben.
     *
     * Der Schein wird aus der Farbe des Mandanten gemischt und steht nicht mehr fest auf dem
     * Blauviolett von version.blue: Bei einem Mandanten mit Marineblau und Taupe lag über
     * allem ein fremder Stich, den man nicht benennen konnte und der trotzdem störte. */
    background:
      radial-gradient(1100px 700px at 92% -10%,
          color-mix(in srgb, var(--marke-primaer) 20%, transparent), transparent 60%),
      linear-gradient(180deg, var(--marke-grund) 0%, #ece9df 100%);
    background-attachment: fixed;
    color: var(--marke-tinte);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* --------------------------------------------------------------- Kopf */

.marke-kopf {
    background: linear-gradient(135deg, var(--marke-primaer) 0%,
                color-mix(in srgb, var(--marke-primaer) 72%, var(--marke-akzent)) 100%);
    color: #fff;
    padding: 1.6rem 1rem 1.5rem;
}
.marke-kopf .innen {
    max-width: 960px; margin: 0 auto;
    display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap;
}
/* Das Logo auf dem dunklen Band.
 *
 * 34 px waren zu klein: Das Zeichen von R+F ist hochformatig (1208 × 1368), bei 34 px Höhe
 * blieben 30 px Breite — ein Fleck. Und es ist dunkelblau; auf einem dunkelblauen Band
 * verschwindet es. Deshalb größer und auf einer hellen Fläche, so wie es auf dem Briefbogen
 * auch auf Weiß steht. */
.marke-kopf img.logo {
    height: 52px; width: auto; max-width: 150px;
    background: #fff; border-radius: 8px; padding: 5px 8px;
    box-sizing: content-box;
}
.marke-kopf h1 { margin: 0; font-size: 1.2rem; font-weight: 600; letter-spacing: -.01em; }
.marke-kopf p  { margin: .25rem 0 0; color: rgba(255,255,255,.78); font-size: .88rem; }
.marke-kopf .rechts { margin-left: auto; text-align: right;
                      color: rgba(255,255,255,.72); font-size: .82rem; }

/* --------------------------------------------------------------- Fläche */

.marke-rahmen { max-width: 960px; margin: 0 auto; padding: 1.6rem 1rem 3rem; }

body.marke .karte {
    background: var(--marke-karte);
    border: 1px solid var(--marke-linie);
    border-radius: var(--marke-radius);
    box-shadow: var(--marke-schatten);
    margin-bottom: 1.1rem;
    overflow: hidden;
}
body.marke .karte-kopf {
    background: transparent;
    border-bottom: 1px solid var(--marke-linie);
    font-weight: 600; color: var(--marke-tinte);
    padding: .95rem 1.15rem;
}
body.marke .karte-inhalt { padding: 1.15rem; }
body.marke .leise, body.marke .hinweis { color: var(--marke-tinte-3); }

body.marke .knopf {
    border-radius: var(--marke-radius-s);
    border: 1px solid var(--marke-linie);
    background: var(--marke-karte);
    color: var(--marke-tinte);
    padding: .55rem .95rem;
    font: inherit; cursor: pointer;
}
body.marke .knopf.haupt {
    background: var(--marke-primaer); border-color: var(--marke-primaer); color: #fff;
}
body.marke .knopf.haupt:hover { background: var(--marke-akzent); border-color: var(--marke-akzent); }
body.marke a { color: var(--marke-akzent); }

body.marke input, body.marke select, body.marke textarea {
    border-radius: var(--marke-radius-s);
    border: 1px solid var(--marke-linie);
    padding: .6rem .75rem;
    font: inherit; background: #fff; color: var(--marke-tinte);
    width: 100%; box-sizing: border-box;
}
body.marke input:focus, body.marke select:focus, body.marke textarea:focus {
    outline: 2px solid color-mix(in srgb, var(--marke-akzent) 40%, transparent);
    outline-offset: 1px; border-color: var(--marke-akzent);
}

body.marke .meldung { border-radius: var(--marke-radius-s); }

/* --------------------------------------------------------------- Fuß */

.marke-fuss {
    max-width: 960px; margin: 0 auto; padding: .5rem 1rem 2.5rem;
    color: var(--marke-tinte-3); font-size: .8rem; line-height: 1.6;
}
.marke-fuss a { color: var(--marke-tinte-2); }

/* --------------------------------------------------------------- Anmeldung */

.marke-anmeldung {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem;
    background:
      radial-gradient(1100px 620px at 15% -10%,
        color-mix(in srgb, var(--marke-akzent) 22%, transparent), transparent 65%),
      var(--marke-grund);
}
.marke-anmeldung .kasten {
    /* 400 px waren zu eng: Die Unterzeile („Rechnungs-, Zahlungs- und Bauverwaltung der
       Unternehmensgruppe") brach auf drei Zeilen, und der Kasten saß klein und flach auf der
       Fläche. Die Vorlage arbeitet mit großzügigem Innenabstand und 26 px Radius — damit
       bekommt er die Ruhe, die eine erste Seite braucht. */
    width: 100%; max-width: 30rem;
    background: var(--marke-karte);
    border: 1px solid var(--marke-linie);
    border-radius: var(--marke-radius-l);
    box-shadow: var(--marke-schatten-l);
    padding: var(--marke-polster);
}
.marke-anmeldung .kasten img.logo { height: 34px; margin-bottom: 1.6rem; }
.marke-anmeldung h1 { margin: 0 0 .35rem; font-size: 1.35rem; letter-spacing: -.015em; }
/* `.unterzeile` auf der Anmeldung, `.unter` auf der Zwei-Faktor-Seite — zwei Namen für
   dieselbe Sache, gewachsen aus zwei Gelegenheiten. Beide hier, damit nicht die eine Seite
   gestaltet ist und die andere nicht; und `.unter` steht so lange daneben, bis die Ansichten
   sich auf einen Namen geeinigt haben. */
.marke-anmeldung .unterzeile, .marke-anmeldung .unter {
    margin: 0 0 1.6rem; color: var(--marke-tinte-3); font-size: .9rem; line-height: 1.5; }
/* Die Felder atmen mit dem Kasten. */
.marke-anmeldung .feld { margin-bottom: 1rem; }
.marke-anmeldung .feld label { font-size: .86rem; color: var(--marke-tinte-2); }
.marke-anmeldung input { padding: .6rem .7rem; font-size: .95rem;
    border-radius: var(--marke-radius-s); }
.marke-anmeldung .knopf.haupt { margin-top: .4rem; padding: .65rem;
    border-radius: var(--marke-radius-s); font-size: 1rem; }
.marke-anmeldung .klein.leise { margin-top: 1.5rem; line-height: 1.5; }

/* Die Fehlerseite trifft einen Besucher, der nicht angemeldet ist — sie läuft also durch
   dieselbe Hülle. Ohne eigene Regel stand sie als nackter Text auf dem Pergamentgrund; mit
   dem Kasten der Marke sieht sie aus wie eine Auskunft und nicht wie ein Absturz. */
body.marke .fehlerseite {
    max-width: 34rem; margin: 10vh auto; padding: var(--marke-polster);
    background: var(--marke-karte); border: 1px solid var(--marke-linie);
    border-radius: var(--marke-radius-l); box-shadow: var(--marke-schatten-l);
}
body.marke .fehlerseite .status { color: var(--marke-eis); }
body.marke .fehlerseite h1 { color: var(--marke-tinte); }

/* --------------------------------------------------------- Portal: Einstieg */

/* Der erste Absatz trägt die Aussage, auf die es ankommt — größer und etwas heller als der
   Rest, damit man ihn liest, bevor man weiterscrollt. */
body.marke .einstieg {
    font-size: 1.08rem;
    line-height: 1.6;
    color: var(--marke-tinte-2);
    margin: 0 0 1.4rem;
}

/* Die Rufnummer und die Adresse stehen nebeneinander und nicht als Aufzählung: Man sucht
   hier eine Angabe, man liest keine Liste. */
body.marke .kontaktkasten {
    display: flex; flex-wrap: wrap; gap: 1.6rem;
    margin: .8rem 0 1.4rem;
    padding: 1rem 1.2rem;
    background: color-mix(in srgb, var(--marke-primaer) 5%, var(--marke-karte));
    border: 1px solid var(--marke-linie);
    border-radius: var(--marke-radius-s);
}
body.marke .kontaktkasten a { font-weight: 600; text-decoration: none; }
body.marke .kontaktkasten a:hover { text-decoration: underline; }

/* „freiwillig" neben einem Nachweis: eine ruhige Marke, keine Warnung. */
/*
 * Nur die Marke *ohne* Farbe wird ruhig gestellt.
 *
 * Hier stand `body.marke .marke-status` ohne Einschränkung — und überfuhr damit `m-gruen`,
 * `m-rot` und `m-gelb`: Im Portal war jede Marke grau, auch „fehlt" und „liegt vor". Genau
 * die Farbe ist aber das, was ein Partner auf der Seite zuerst sieht.
 *
 * `:not([class*="m-"])` trifft die Marke ohne Farbklasse — das „freiwillig" neben einem
 * Nachweis, der keiner Ampel folgt.
 */
body.marke .marke-status:not([class*="m-"]) {
    background: color-mix(in srgb, var(--marke-primaer) 8%, transparent);
    color: var(--marke-tinte-2);
    border: 1px solid var(--marke-linie);
}

/* ------------------------------------------------------- Portal: Anmeldung */

/* Die Anmeldung steht für sich und soll nicht so breit sein wie eine Tabelle: Zwei Felder
   über die halbe Seite zu ziehen, sieht nach einem Formular aus, das noch nicht fertig ist. */
body.marke .anmeldekarte {
    max-width: 28rem;
    margin-left: auto;
    margin-right: auto;
}
body.marke .anmeldekarte input[type="email"],
body.marke .anmeldekarte input[type="password"] { width: 100%; }

/* „oder" auf einer Linie: Es trennt zwei Wege hinein und ist keine Überschrift. */
body.marke .trenner {
    display: flex; align-items: center; gap: .8rem;
    margin: 1.4rem 0 1rem;
    color: var(--marke-tinte-3); font-size: .85rem;
}
body.marke .trenner::before,
body.marke .trenner::after {
    content: ""; flex: 1 1 auto; height: 1px; background: var(--marke-linie);
}

/* ------------------------------------------------- Portal: Lesbare Zeilenlänge */

/* Die Karte ist 960 px breit, weil Tabellen so breit sein müssen. Fließtext darin ist es
   nicht: 960 px sind gut 130 Zeichen je Zeile, und ab etwa 85 findet das Auge den Anfang der
   nächsten Zeile nicht mehr zuverlässig. Also nur den Text begrenzen, nicht die Karte. */
body.marke .karte-inhalt > p,
body.marke .karte-inhalt > h2,
body.marke .karte-inhalt > h3,
body.marke .karte-inhalt > ul,
body.marke .karte-inhalt > ol { max-width: 68ch; }

/* Überschriften im Portal: etwas Luft darüber, damit die Abschnitte auseinanderfallen. */
body.marke .karte-inhalt h3 {
    font-size: 1rem; margin: 1.8rem 0 .5rem; color: var(--marke-tinte);
}
body.marke .karte-inhalt > :first-child { margin-top: 0; }

/* ------------------------------------------------- Portal auf schmalen Schirmen */

/*
 * Eine Tabelle ist auf einem Telefon keine Tabelle.
 *
 * Der Betrieb hat das Portal am Telefon geöffnet und „alles untereinander" gesehen: Von den
 * fünf Spalten der Nachweisliste stand genau die erste da, der Rest lag rechts außerhalb.
 * Scrollen half theoretisch — nur schaut dort niemand hin, und gerade die Spalten „Vorhanden"
 * und „Gültig bis" sind der Grund, warum der Partner die Seite überhaupt öffnet.
 *
 * Deshalb wird jede Zeile zu einem Block, und jede Zelle trägt ihre Spaltenüberschrift als
 * `data-label` vor sich her. Das ist kein zweites Layout, sondern dasselbe Markup in einer
 * anderen Anordnung — es gibt keine zweite Stelle, die mitgepflegt werden muss.
 */
/* Im Portal trägt die erste Spalte keine Nummer, sondern einen Namen.
 *
 * Die Anwendungsstile sagen „die erste Spalte bricht nicht um" — dort steht meist eine
 * Belegnummer, und die soll zusammenbleiben. Hier steht „Bescheinigung USt 1 TG —
 * Steuerschuldnerschaft des Leistungsempfängers", und die Spalte wurde dadurch 656 Pixel
 * breit. Die Tabelle brauchte 1233 bei 928 Platz, und ausgerechnet der Status lag draußen. */
body.marke table.liste td:first-child { white-space: normal; }

/* Spalten, die nur auf breiten Schirmen Platz haben.
 *
 * Bei knapp 1280 Pixeln lief die Nachweisliste über ihre Karte hinaus, und ausgerechnet die
 * Statusspalte lag außerhalb — die, wegen der jemand die Seite öffnet. Die Rechtsgrundlage
 * ist Nachschlagewerk und keine Handlungsanweisung; sie weicht zuerst. Auf dem Telefon kommt
 * sie ohnehin wieder, weil dort jede Zeile ein Block ist. */
@media (max-width: 1200px) {
    body.marke table.liste th.nurbreit,
    body.marke table.liste td.nurbreit { display: none; }
}

@media (max-width: 640px) {
    body.marke .tabellenrahmen { overflow: visible; }

    /* Im Blocklayout ist für sie wieder Platz — dort kostet eine Zeile mehr nichts. */
    body.marke table.liste td.nurbreit { display: block; }

    body.marke table.liste,
    body.marke table.liste tbody,
    body.marke table.liste tr,
    body.marke table.liste td { display: block; width: auto; }

    /* Der Kopf verschwindet — seine Wörter stehen jetzt in den Zellen. */
    body.marke table.liste thead { display: none; }

    body.marke table.liste tr {
        padding: .8rem 1.1rem;
        border-bottom: 1px solid var(--marke-linie);
    }
    body.marke table.liste tr:last-child { border-bottom: 0; }

    body.marke table.liste td {
        border: 0; padding: .12rem 0; text-align: left !important;
    }
    body.marke table.liste td[data-label]::before {
        content: attr(data-label) ": ";
        color: var(--marke-tinte-3);
        font-size: .82rem;
    }
    /* Eine Zelle, die nur einen Gedankenstrich trägt, ist auf dem Telefon Lärm. */
    body.marke table.liste td:empty { display: none; }

    /* Der Name des Nachweises bleibt die Überschrift des Blocks. */
    body.marke table.liste td:first-child { margin-bottom: .25rem; }

    /* Knöpfe bekommen Luft und volle Breite — ein Daumen ist breiter als ein Mauszeiger. */
    body.marke table.liste td .knopf { display: inline-block; margin-top: .3rem; }
    body.marke .karte-inhalt .feldreihe > .feld { flex: 1 1 100%; }
}

/* ------------------------------------------------------------ Portal: Menü */

/* Ein Band unter dem Kopf, in der Farbe des Mandanten — nicht links als Spalte: Auf einem
   Telefon ist eine Spalte entweder zu schmal oder im Weg, ein Band legt sich einfach um. */
body.marke .marke-menue {
    background: color-mix(in srgb, var(--marke-primaer) 92%, #000);
    border-bottom: 1px solid color-mix(in srgb, #fff 12%, transparent);
}
body.marke .marke-menue .innen {
    max-width: 960px; margin: 0 auto; padding: 0 1rem;
    display: flex; gap: .2rem; flex-wrap: wrap;
}
body.marke .marke-menue a {
    display: block; padding: .7rem .95rem;
    color: rgba(255,255,255,.72); text-decoration: none;
    font-size: .92rem; font-weight: 500;
    border-bottom: 2px solid transparent;
}
body.marke .marke-menue a:hover { color: #fff; text-decoration: none; }
body.marke .marke-menue a.aktiv {
    color: #fff;
    border-bottom-color: color-mix(in srgb, var(--marke-akzent) 70%, #fff);
}

/* Eine Tabelle aus Beschriftung und Wert — keine Liste mit Knöpfen am Ende.
 *
 * Die Anwendungsstile halten die letzte Spalte schmal, weil dort die Knöpfe stehen. Bei zwei
 * Spalten ist die letzte aber der Inhalt, und „Atik Bau GmbH" rutschte an den rechten Rand,
 * weit weg von seiner Beschriftung. */
body.marke table.liste.paare td:last-child { width: auto; white-space: normal; }
body.marke table.liste.paare td:first-child {
    width: 14rem; color: var(--marke-tinte-2); white-space: normal;
}