/* Boatswain — Grundgestaltung.
   Farben als Variablen, damit ein späterer Wechsel an einer Stelle passiert. */

:root {
    --grund:        #f4f5f7;
    --flaeche:      #ffffff;
    --rand:         #dfe3e8;
    --text:         #1f2933;
    --text-blass:   #6b7684;
    --akzent:       #1b4965;
    --akzent-hell:  #2d6a95;
    --gut:          #2f9e5f;
    --warnung:      #d99000;
    --kritisch:     #c4453c;
    --kopfhoehe:    3.5rem;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    color: var(--text);
    background: var(--grund);
}

/* --- Kopfleiste --------------------------------------------------------- */

.kopf {
    height: var(--kopfhoehe);
    background: var(--akzent);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 1.25rem;
}

.marke { display: flex; align-items: center; gap: .6rem; }
.marke .logo { font-size: 1.5rem; }
.marke .titel { font-size: 1.15rem; font-weight: 600; letter-spacing: .02em; }
.marke-gross { justify-content: center; margin-bottom: 1.5rem; color: var(--akzent); }
.marke-gross .logo { font-size: 2rem; }
.marke-gross .titel { font-size: 1.4rem; }

.kopf-rechts { display: flex; align-items: center; gap: 1rem; }
.wer { font-size: .9rem; opacity: .95; }
.rolle {
    background: rgba(255,255,255,.18);
    border-radius: 3px;
    padding: .1rem .4rem;
    margin-left: .35rem;
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* --- Rumpf: Navigation + Ansichtspanel ---------------------------------- */

.rumpf { display: flex; align-items: flex-start; min-height: calc(100vh - var(--kopfhoehe)); }

.navi {
    width: 13rem;
    flex: 0 0 13rem;
    background: var(--flaeche);
    border-right: 1px solid var(--rand);
    min-height: calc(100vh - var(--kopfhoehe));
    padding: .75rem 0;
}

.navi-eintrag {
    display: block;
    padding: .6rem 1.25rem;
    color: var(--text);
    text-decoration: none;
    border-left: 3px solid transparent;
    cursor: pointer;
}
.navi-eintrag:hover { background: var(--grund); }
.navi-eintrag.aktiv {
    border-left-color: var(--akzent);
    background: var(--grund);
    font-weight: 600;
    color: var(--akzent);
}

.panel { flex: 1; padding: 1.5rem; min-width: 0; }
.panel-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.panel-kopf h1 { font-size: 1.35rem; margin: 0; font-weight: 600; }
.hinweis { color: var(--text-blass); }

/* --- Kacheln ------------------------------------------------------------ */

.kachelgitter {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1rem;
}

.kachel {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 6px;
    padding: 1rem 1.1rem;
}
.kachel-breit { grid-column: 1 / -1; }
.kachel h2 {
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-blass);
    margin: 0 0 .6rem;
    font-weight: 600;
}
.zaehler { text-transform: none; letter-spacing: 0; float: right; font-weight: 400; }

.grosswert { font-size: 1.9rem; font-weight: 300; margin: 0 0 .5rem; line-height: 1; }
.grosswert span { font-size: .9rem; color: var(--text-blass); }
.detail { font-size: .85rem; color: var(--text-blass); margin: .25rem 0 0; }

.balken { height: 6px; background: var(--rand); border-radius: 3px; overflow: hidden; }
.balken-fuellung { height: 100%; background: var(--gut); border-radius: 3px; }
.balken-fuellung.warnung  { background: var(--warnung); }
.balken-fuellung.kritisch { background: var(--kritisch); }

/* --- Tabelle ------------------------------------------------------------ */

.tabelle { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabelle th {
    text-align: left;
    font-weight: 600;
    color: var(--text-blass);
    border-bottom: 1px solid var(--rand);
    padding: .4rem .5rem;
}
.tabelle td { padding: .4rem .5rem; border-bottom: 1px solid var(--grund); }
.blass { color: var(--text-blass); }

.punkt {
    display: inline-block;
    width: .55rem; height: .55rem;
    border-radius: 50%;
    background: var(--text-blass);
    margin-right: .5rem;
}
.punkt.laeuft { background: var(--gut); }

/* --- Formulare und Knöpfe ----------------------------------------------- */

.knopf, .knopf-rand {
    font: inherit;
    cursor: pointer;
    border-radius: 4px;
    padding: .5rem .9rem;
}
.knopf { background: var(--akzent); color: #fff; border: 1px solid var(--akzent); width: 100%; }
.knopf:hover { background: var(--akzent-hell); }
/* WICHTIG: Der Grundzustand ist der für das HELLE Panel — dort steht dieser
   Knopf inzwischen an den meisten Stellen (ändern, prüfen, zurück). Vorher war
   er auf die dunkle Kopfleiste zugeschnitten (weiße Schrift, weißer Rand) und
   damit im Panel unsichtbar: eine weiße Fläche neben dem Mülleimer. Die helle
   Fassung steht deshalb hier, die dunkle gilt nur noch IM Kopf. */
.knopf-rand {
    background: var(--flaeche);
    color: var(--akzent);
    border: 1px solid var(--rand);
    padding: .35rem .75rem;
    font-size: .85rem;
}
.knopf-rand:hover { background: var(--grund); border-color: var(--akzent-hell); }

.kopf .knopf-rand {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.5);
}
.kopf .knopf-rand:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.5); }

.fehler {
    background: #fdecea;
    border: 1px solid #f5c2c0;
    color: var(--kritisch);
    padding: .6rem .75rem;
    border-radius: 4px;
    font-size: .88rem;
    margin: 0 0 1rem;
}

/* --- Anmeldeseite ------------------------------------------------------- */

.anmeldeseite {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.anmeldekarte {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 22rem;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.anmeldekarte label {
    display: block;
    font-size: .85rem;
    font-weight: 600;
    margin: .9rem 0 .3rem;
}
.anmeldekarte input[type=text], .anmeldekarte input[type=password] {
    width: 100%;
    font: inherit;
    padding: .55rem .7rem;
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: #fff;
}
.anmeldekarte input:focus { outline: 2px solid var(--akzent-hell); outline-offset: -1px; }
.anmeldekarte .knopf { margin-top: 1.4rem; }

/* --- Schmale Fenster ---------------------------------------------------- */

@media (max-width: 40rem) {
    .rumpf { flex-direction: column; }
    .navi {
        width: 100%;
        flex: none;
        min-height: 0;
        display: flex;
        overflow-x: auto;
        border-right: none;
        border-bottom: 1px solid var(--rand);
        padding: 0;
    }
    .navi-eintrag { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; }
    .navi-eintrag.aktiv { border-left: none; border-bottom-color: var(--akzent); }
}

/* --- Werkzeugleiste: Suche + Anlegen ------------------------------------ */

.werkzeugleiste { display: flex; gap: .6rem; margin-bottom: 1.1rem; }

.suche {
    flex: 1;
    font: inherit;
    padding: .5rem .75rem;
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: var(--flaeche);
    min-width: 0;
}
.suche:focus { outline: 2px solid var(--akzent-hell); outline-offset: -1px; }

.knopf-plus {
    flex: 0 0 auto;
    width: 2.4rem;
    display: grid;
    place-items: center;
    background: var(--akzent);
    color: #fff;
    border-radius: 4px;
    font-size: 1.4rem;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
}
.knopf-plus:hover { background: var(--akzent-hell); }

/* --- Anklickbare Kunden-Kachel ------------------------------------------ */

.kachel-klick { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.kachel-klick:hover { border-color: var(--akzent-hell); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.kachel-name { font-size: 1rem; text-transform: none; letter-spacing: 0; color: var(--text); margin-bottom: .4rem; }
.fussnote { margin-top: .6rem; }

/* --- Formular ------------------------------------------------------------ */

.formular { max-width: 34rem; }
.formular fieldset { border: 1px solid var(--rand); border-radius: 6px; background: var(--flaeche); padding: .9rem 1.1rem 1.2rem; margin: 0 0 1rem; }
.formular legend { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: var(--text-blass); font-weight: 600; padding: 0 .35rem; }

.feld { margin-top: .7rem; }
.feld label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: .25rem; }
.feld input, .feld textarea, .feld select {
    width: 100%;
    font: inherit;
    padding: .45rem .6rem;
    border: 1px solid var(--rand);
    border-radius: 4px;
    background: #fff;
}
.feld input:focus, .feld textarea:focus, .feld select:focus { outline: 2px solid var(--akzent-hell); outline-offset: -1px; }
.feld-fehler input, .feld-fehler select { border-color: var(--kritisch); background: #fffafa; }
.feldmeldung { color: var(--kritisch); font-size: .8rem; margin: .25rem 0 0; }
.feldhinweis { color: var(--text-blass); font-size: .8rem; margin: .25rem 0 0; }

.feldreihe { display: flex; gap: .7rem; }
.feldreihe .schmal { flex: 0 0 7rem; }
.feldreihe .breit { flex: 1; min-width: 0; }

.formularfuss { display: flex; gap: .6rem; }
.knopf-schmal { width: auto; min-width: 9rem; }
.knopf-zurueck { color: var(--akzent); border-color: var(--rand); }
.knopf-zurueck:hover { background: var(--grund); }

.erfolg {
    background: #eaf6ee;
    border: 1px solid #bfe0cb;
    color: #1d6b3d;
    padding: .6rem .75rem;
    border-radius: 4px;
    font-size: .88rem;
    margin: 0 0 1rem;
}

/* Löschen bewusst abgesetzt und unauffällig — kein Knopf, der versehentlich
   im Speichern-Reflex mitgetroffen wird. */
.loeschzeile { max-width: 34rem; margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--rand); }
.knopf-loeschen {
    font: inherit;
    font-size: .88rem;
    background: transparent;
    border: 1px solid var(--rand);
    color: var(--kritisch);
    border-radius: 4px;
    padding: .45rem .8rem;
    cursor: pointer;
}
.knopf-loeschen:hover { background: #fdecea; border-color: #f5c2c0; }

/* --- Domain-Detail und DNS ------------------------------------------- */

.kopf-knoepfe { display: flex; gap: .5rem; }

/* Bereiche, die es noch nicht gibt: sichtbar, aber erkennbar tot. */
.kachel-aus { opacity: .55; }

.zonenkopf { flex: 1; margin: 0; align-self: center; font-size: .85rem; }
.zonenformular { margin-top: 1.75rem; }

.tabelle-dns td { vertical-align: top; }
.tabelle-dns .einspaltig { font-weight: 600; word-break: break-all; }
.recordzeile { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
               font-size: .82rem; word-break: break-all; }
.zeilenaktionen { white-space: nowrap; text-align: right; }
.zeilenaktionen .inlineform { display: inline; }
.knopf-winzig {
    display: inline-block;
    padding: .15rem .5rem;
    font-size: .78rem;
    width: auto;
    vertical-align: middle;
}

/* --- Delegation, Hinweiskasten, Namensfeld ---------------------------- */

.merkkasten {
    border: 1px solid var(--akzent-hell);
    border-left: 4px solid var(--akzent);
    border-radius: 6px;
    background: var(--flaeche);
    padding: .9rem 1.1rem;
    margin-bottom: 1.25rem;
}
.merkkasten p { margin: .3rem 0; font-size: .9rem; }
.befehl {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: .82rem;
    background: var(--grund);
    border: 1px solid var(--rand);
    border-radius: 4px;
    padding: .5rem .7rem;
    overflow-x: auto;
    margin: .5rem 0;
}
.abschnitt { font-size: 1rem; font-weight: 600; margin: 2rem 0 .75rem; }
.marke-gut, .marke-warnung {
    display: inline-block;
    font-size: .78rem;
    font-weight: 600;
    padding: .1rem .45rem;
    border-radius: 3px;
}
.marke-gut     { background: #e6f4ea; color: #1e6b33; }
.marke-warnung { background: #fdecea; color: #a4292a; }
.delegationstext { white-space: normal; text-align: left; max-width: 30rem; }

/* Eingabefeld und unveränderlicher Domainteil in einer Zeile. */
.namenszeile { display: flex; align-items: center; gap: .4rem; }
.namenszeile input { flex: 1; min-width: 0; }
.namenssuffix { color: var(--text-blass); font-size: .85rem; white-space: nowrap; }

/* Beschriftung links, Wert rechts — für Verbindungsdaten, die man abschreibt.
   Eigene Klasse statt einer Definitionsliste, damit sie neben den anderen
   Tabellen gleich aussieht. */
.tabelle-paare { max-width: 34rem; margin-bottom: 1.4rem; }
.tabelle-paare th { width: 9rem; white-space: nowrap; vertical-align: top; }
.tabelle-paare td { word-break: break-all; }
.tabelle-paare .einspaltig {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* Kachelüberschriften stehen sonst in Großbuchstaben (.kachel h2). Für
   Datenbanknamen geht das nicht: MariaDB unterscheidet sie unter Linux nach
   Groß- und Kleinschreibung, und der Kunde schreibt genau das ab, was hier
   steht. Höhere Spezifität als .kachel h2, sonst greift die Regel nicht. */
.kachel h2.kachel-name-genau { text-transform: none; letter-spacing: 0; }