/* DNS-Verwaltung – schlichtes Layout ohne Build-Schritt */
:root {
  --text: #1f2933;
  --gedaempft: #616e7c;
  --linie: #d9dee4;
  --flaeche: #f5f7fa;
  --karte: #ffffff;
  --akzent: #1d5fbf;
  --akzent-dunkel: #164a96;
  --gefahr: #b42318;
  --ok-bg: #e7f6ec;
  --ok-text: #1e6b38;
  --warn-bg: #fff6e0;
  --warn-text: #7a5300;
  --fehler-bg: #fdecea;
  --fehler-text: #9b1c1c;
  --info-bg: #e8f0fb;
  --info-text: #1d4f91;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --radius: 6px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--text); background: var(--flaeche); }
a { color: var(--akzent); }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.2rem; margin: 0 0 1rem; }

.kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .75rem 1.5rem; background: var(--karte); border-bottom: 1px solid var(--linie); }
.marke { font-weight: 700; color: var(--text); text-decoration: none; }
.kopf nav { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.kopf nav a { text-decoration: none; }
main { max-width: 1100px; margin: 0 auto; padding: 1.5rem; }
.schmal { max-width: 420px; margin: 3rem auto; }
.mittel { max-width: 560px; }
.karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.unterzeile, .klein, .helptext { color: var(--gedaempft); font-size: .875rem; }
.mono, code, pre { font-family: var(--mono); font-size: .9rem; }
/* Überschriften in Festbreitenschrift (Domain-Seite, Prüfen-Seite) behalten die Größe von h1. */
h1.mono { font-size: 1.6rem; }

.meldungen { list-style: none; padding: 0; margin: 0 0 1rem; }
.meldung { padding: .6rem 1rem; border-radius: var(--radius); margin-bottom: .5rem; }
.meldung.success { background: var(--ok-bg); color: var(--ok-text); }
.meldung.warning { background: var(--warn-bg); color: var(--warn-text); }
.meldung.error { background: var(--fehler-bg); color: var(--fehler-text); }
.meldung.info { background: var(--info-bg); color: var(--info-text); }

.knopf, button { display: inline-block; padding: .45rem .9rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--text); font: inherit; text-decoration: none; cursor: pointer; }
.knopf:hover, button:hover { border-color: var(--akzent); }
.knopf.primaer, button.primaer { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.knopf.primaer:hover, button.primaer:hover { background: var(--akzent-dunkel); }
.knopf.gefahr, button.gefahr { color: var(--gefahr); }
button.gefahr.primaer { background: var(--gefahr); border-color: var(--gefahr); color: #fff; }
.knopf.klein, button.klein { padding: .2rem .55rem; font-size: .85rem; }
button.link { border: 0; background: none; padding: 0; color: var(--akzent); }
form.inline { display: inline; }
.knoepfe { display: flex; gap: .5rem; margin-top: 1rem; flex-wrap: wrap; }

label { display: block; font-weight: 600; margin-bottom: .25rem; }
input[type=text], input[type=password], input[type=number], input[type=date], select, textarea { width: 100%; padding: .45rem .6rem; border: 1px solid var(--linie); border-radius: var(--radius); font: inherit; background: #fff; }
form > div, .feld { margin-bottom: 1rem; }
.errorlist { list-style: none; padding: 0; margin: .25rem 0; color: var(--fehler-text); font-size: .9rem; }
.errorlist.nonfield { background: var(--fehler-bg); padding: .6rem 1rem; border-radius: var(--radius); }
.zeile2 { display: grid; grid-template-columns: 2fr 1fr; gap: 1rem; }
.vorschau { margin: .25rem 0 0; color: var(--gedaempft); }
.hilfe { background: var(--info-bg); color: var(--info-text); border-radius: var(--radius); padding: .75rem 1rem; font-size: .9rem; }
.hilfe h3 { margin: 0 0 .25rem; font-size: 1rem; }
.hilfe p { margin: .25rem 0; }

.tabelle { width: 100%; border-collapse: collapse; background: var(--karte); border: 1px solid var(--linie); }
.tabelle th, .tabelle td { text-align: left; padding: .55rem .75rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
.tabelle th { font-size: .85rem; color: var(--gedaempft); font-weight: 600; background: var(--flaeche); }
.tabelle tr.geschuetzt td { color: var(--gedaempft); background: #fafbfc; }
.tabelle td.wert { word-break: break-all; }
.tabelle td.ttl { white-space: nowrap; }
/* Protokoll: Zeitpunkt und Klasse nicht umbrechen, Details nur bei Bedarf (nicht mitten im Wort) */
.tabelle.protokoll td:nth-child(1), .tabelle.protokoll td:nth-child(3) { white-space: nowrap; }
.tabelle.protokoll td.wert { word-break: normal; overflow-wrap: anywhere; }
.kopfzeile.filter .feld { margin-bottom: 0; }
.kopfzeile.filter input, .kopfzeile.filter select { margin: 0; }
.tabelle td.aktionen { white-space: nowrap; text-align: right; }
.pruefzeile td { padding: 0; border-bottom: 0; }
.pruefzeile td:not(:empty) { padding: .75rem; border-bottom: 1px solid var(--linie); background: var(--flaeche); }
.typ { display: inline-block; min-width: 3.5rem; padding: .05rem .4rem; border-radius: 4px; background: var(--flaeche); border: 1px solid var(--linie); font-family: var(--mono); font-size: .8rem; text-align: center; }
.status { font-size: .85rem; padding: .05rem .5rem; border-radius: 999px; background: var(--flaeche); border: 1px solid var(--linie); }
.status.aktiv { background: var(--ok-bg); color: var(--ok-text); border-color: transparent; }
.kopfzeile { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.zaehler { color: var(--gedaempft); }

.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie); margin: 1rem 0; }
.reiter a { padding: .5rem 1rem; text-decoration: none; color: var(--gedaempft); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.reiter a.aktiv { color: var(--text); border-bottom-color: var(--akzent); font-weight: 600; }

.antworten { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.antwort h4 { margin: 0 0 .25rem; font-size: .9rem; }
.antwort ul { margin: 0; padding-left: 1.1rem; }
.fehlertext { color: var(--fehler-text); margin: 0; }
.befehl { display: flex; align-items: center; gap: .5rem; margin: .25rem 0; }
.befehl code { background: #fff; border: 1px solid var(--linie); border-radius: 4px; padding: .2rem .5rem; }
pre.zonendatei { background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem; overflow-x: auto; }

.zugang dt { font-weight: 600; margin-top: .5rem; }
.zugang dd { margin: 0; font-family: var(--mono); font-size: 1.1rem; }

@media print {
  .kopf, .meldungen, .nicht-drucken { display: none !important; }
  body { background: #fff; }
  .karte { border: 1px solid #000; }
}

@media (max-width: 700px) {
  .zeile2 { grid-template-columns: 1fr; }
  .tabelle td.aktionen { white-space: normal; }
}
.hinweis summary { cursor: pointer; color: var(--gedaempft); font-size: .85rem; }
.hinweis p { margin: .25rem 0 0; font-size: .85rem; white-space: normal; text-align: left; max-width: 22rem; }
.htmx-request { opacity: .6; cursor: progress; }
.status.archiviert { background: var(--warn-bg); color: var(--warn-text); border-color: transparent; }
.code-gross { font-family: var(--mono); font-size: 1.6rem; letter-spacing: .12em; }
.tabelle tr.fehlerzeile td { background: var(--fehler-bg); }
.tabelle th.zeilenkopf { font-size: inherit; font-weight: inherit; color: inherit; background: transparent; }
.tabelle tr.fehlerzeile th.zeilenkopf { background: var(--fehler-bg); }
nav.knoepfe { align-items: center; }
.nur-vorlesen { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }