/* ComniSign – Oberfläche.

   Ein Arbeitswerkzeug, kein Schaufenster: Lesbarkeit, Dichte und
   Wiedererkennbarkeit stehen über Ausdruck. Die Marke lebt hier in den
   Details – Akzentfarbe für genau drei Dinge (Hauptaktion, aktueller Ort,
   Zustand), das Zeichen im Kopf, und die Flächen, die die Bereiche trennen. */

:root {
  color-scheme: light dark;

  /* Zwei Flächenebenen: Inhalt hell, Rahmen (Kopf und Leiste) etwas kühler.
     Ohne diese Trennung schwimmt die Navigation im Inhalt. */
  --grund: #ffffff;
  --flaeche: #eef0f4;
  --leiste: #f7f8fa;
  --rand: #dcdfe5;
  --rand-stark: #c3c8d1;

  --schrift: #1b1f26;
  --gedaempft: #545c68;
  --leise: #737b88;

  --akzent: #b40217;
  --akzent-hell: #d81830;
  --akzent-schrift: #ffffff;
  --akzent-flaeche: #fdeff1;

  --gut: #146c2e;
  --gut-flaeche: #e6f4ea;
  --achtung: #8a5800;
  --achtung-flaeche: #fdf3e0;
  --warn-flaeche: #fdecec;
  --warn-rand: #f2bfbf;

  /* Feste Stufen. Ein Werkzeug wird bei gleichbleibender Auflösung benutzt;
     mitwachsende Schrift bringt hier nichts und stört in schmalen Spalten. */
  --t-xs: 0.75rem;
  --t-s: 0.8125rem;
  --t-m: 0.9375rem;
  --t-l: 1.0625rem;
  --t-xl: 1.375rem;

  --radius: 7px;
  --radius-klein: 5px;
  --schatten: 0 1px 2px rgba(16, 20, 28, .05), 0 1px 3px rgba(16, 20, 28, .04);
  --tempo: 140ms;
  --kurve: cubic-bezier(.2, .7, .3, 1);

  --leiste-breite: 232px;
  --kopf-hoehe: 52px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #1b1e24;
    --flaeche: #101216;
    --leiste: #16191e;
    --rand: #2b3038;
    --rand-stark: #3b414b;

    --schrift: #e9ebee;
    --gedaempft: #a8b0bb;
    --leise: #8b939f;

    --akzent: #ff6072;
    --akzent-hell: #ff8390;
    --akzent-schrift: #1b1e24;
    --akzent-flaeche: #33191d;

    --gut: #5ed17c;
    --gut-flaeche: #142c1c;
    --achtung: #e0b44a;
    --achtung-flaeche: #2e2409;
    --warn-flaeche: #331a1c;
    --warn-rand: #5f2b30;

    --schatten: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--flaeche);
  color: var(--schrift);
  font: var(--t-m)/1.55 system-ui, "Segoe UI", Roboto, sans-serif;
  /* Ziffern in Listen und Tabellen sollen untereinander stehen. */
  font-variant-numeric: tabular-nums;
}

/* Die Flächen, die man nicht selbst zeichnet, gehören trotzdem zur
   Gestaltung – sonst tragen sie die Vorgaben des Browsers. */
::selection { background: var(--akzent); color: var(--akzent-schrift); }
:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: 3px; }
* { scrollbar-width: thin; scrollbar-color: var(--rand-stark) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb {
  background: var(--rand-stark);
  border: 3px solid transparent;
  border-radius: 8px;
  background-clip: content-box;
}
*::-webkit-scrollbar-track { background: transparent; }

/* ===================================================================== Kopf */

.kopf {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: var(--kopf-hoehe);
  padding: 0 1.25rem;
  background: var(--grund);
  border-bottom: 1px solid var(--rand);
}

.marke {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-family: Montserrat, system-ui, "Segoe UI", sans-serif;
  font-weight: 650;
  font-size: var(--t-l);
  letter-spacing: -.02em;
  color: var(--schrift);
  text-decoration: none;
  white-space: nowrap;
}
.zeichen { flex: none; display: block; line-height: 0; }
.zeichen img { display: block; }
.marke.gross { font-size: 1.65rem; margin: 0 0 .15rem; }
.untertitel { margin: 0 0 1.75rem; }

/* Anmeldung: die Marke steht über dem Namen, mittig – der einzige Ort, an
   dem sie groß sein darf. Im Werkzeug selbst bleibt sie 24 px im Kopf. */
.anmeldekopf { display: flex; flex-direction: column; align-items: center; text-align: center; }
.anmeldekopf .zeichen { margin-bottom: .9rem; }
.anmeldekopf .marke.gross { margin-bottom: .25rem; }

.pfad {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex: 1;
  min-width: 0;
  font-size: var(--t-s);
  overflow: hidden;
  white-space: nowrap;
}
.pfad a { color: var(--leise); text-decoration: none; transition: color var(--tempo) var(--kurve); }
.pfad a:hover { color: var(--schrift); }
.pfad [aria-current] { color: var(--gedaempft); font-weight: 550; overflow: hidden; text-overflow: ellipsis; }
.trenner { color: var(--rand-stark); }

.abmelden { display: flex; align-items: center; gap: .5rem; margin: 0; }
.wer {
  font-size: var(--t-s);
  color: var(--gedaempft);
  text-decoration: none;
  padding: .25rem .5rem;
  border-radius: var(--radius-klein);
  transition: background var(--tempo) var(--kurve);
}
.wer:hover { background: var(--flaeche); color: var(--schrift); }

/* ================================================================== Gerüst */

.rumpf { display: block; }
.rumpf.mit-leiste { display: grid; grid-template-columns: var(--leiste-breite) minmax(0, 1fr); }

main { padding: 1.75rem 1.75rem 4rem; max-width: 1120px; }
.rumpf:not(.mit-leiste) main { margin: 0 auto; }
body > main { padding: 3rem 1.5rem; }

/* ---------------------------------------------------------- Seitenleiste */

.seitenleiste {
  position: sticky;
  top: var(--kopf-hoehe);
  align-self: start;
  height: calc(100vh - var(--kopf-hoehe));
  padding: 1.25rem .75rem;
  background: var(--leiste);
  border-right: 1px solid var(--rand);
  overflow-y: auto;
}

.bereichsname {
  display: block;
  padding: 0 .65rem;
  margin-bottom: .85rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
}

.gruppenname {
  display: block;
  padding: 1rem .65rem .35rem;
  font-size: var(--t-xs);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--leise);
}
.seitenleiste ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.seitenleiste a {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .45rem .65rem;
  border-radius: var(--radius-klein);
  color: var(--gedaempft);
  text-decoration: none;
  font-size: var(--t-m);
  transition: background var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.seitenleiste a:hover { background: var(--grund); color: var(--schrift); }
.seitenleiste a:active { background: var(--flaeche); }
.seitenleiste [aria-current="page"] {
  background: var(--grund);
  color: var(--schrift);
  font-weight: 550;
  box-shadow: var(--schatten);
}
.seitenleiste [aria-current="page"] .symbol { color: var(--akzent); }
.symbol { width: 20px; height: 20px; flex: none; opacity: .85; }

@media (max-width: 800px) {
  .rumpf.mit-leiste { grid-template-columns: 1fr; }
  .seitenleiste {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--rand);
    padding: .5rem .75rem;
  }
  .bereichsname, .gruppenname { display: none; }
  .seitenleiste ul { grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: .25rem; }
  .seitenleiste a { white-space: nowrap; }
  main { padding: 1.25rem 1rem 3rem; }

  /* Der Kopf bestimmt die Mindestbreite der ganzen Seite. Passen Marke,
     Pfad, Name und Abmelden nicht nebeneinander, wird das Dokument breiter
     als der Bildschirm und alles darunter rutscht mit. Pfad und Name sind
     hier entbehrlich: der Ort steht in der Navigation und in der
     Überschrift. */
  .pfad, .wer { display: none; }
  .kopf { padding: 0 .85rem; gap: .5rem; }
  .abmelden { margin-left: auto; }

  .titelzeile { align-items: flex-start; }
  .titelzeile > .knopf, .titelzeile > .knopfform { order: 2; }
  .titelzeile h1, .titelzeile h2 { flex-basis: 100%; }
}

/* ============================================================== Typografie */

h1 { font-size: var(--t-xl); font-weight: 620; letter-spacing: -.015em; margin: 0 0 1.25rem; }
h2 { font-size: var(--t-l); font-weight: 600; margin: 2.5rem 0 .75rem; }
h2:first-of-type { margin-top: 2rem; }

a { color: var(--akzent); text-underline-offset: 2px; }
code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: .9em;
  background: var(--flaeche);
  padding: .05em .3em;
  border-radius: 3px;
}

.leise { color: var(--leise); font-size: var(--t-s); }
.leer {
  color: var(--gedaempft);
  padding: 1.75rem;
  background: var(--grund);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius);
  font-size: var(--t-m);
}

.titelzeile { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
/* Die Überschrift gibt ihren unteren Abstand an die Zeile ab – sonst säße der
   Knopf tiefer als die Überschrift. Der Abstand muss hier zurückkommen,
   sonst klebt der Inhalt an der Überschrift. */
.titelzeile h1, .titelzeile h2 { margin-bottom: 0; }
.titelzeile { margin-bottom: 1.25rem; }
.titelzeile + * { margin-top: 0; }
.knopfform { margin: 0; }
.knopfgruppe { display: flex; gap: .5rem; flex-wrap: wrap; }

/* Änderungen im Importplan: alter Wert, Pfeil, neuer Wert.
   Der Umschlag ist nötig, damit die Zeilen in der Kartenansicht schmaler
   Schirme untereinander bleiben – dort wird die Tabellenzelle zum
   Flex-Container und ihre Kinder stünden sonst nebeneinander. */
.aenderungen { display: block; }
.aenderung { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; font-size: var(--t-s); margin-bottom: .2rem; }
.aenderung .leise { flex: 0 0 80px; }
.aenderung .vorher { color: var(--leise); text-decoration: line-through; }
.aenderung .pfeil { color: var(--rand-stark); }
.aenderung .nachher { color: var(--schrift); font-weight: 550; }

/* ================================================================= Befunde */

.befunde { list-style: none; margin: 0 0 .5rem; padding: 0; display: grid; gap: 1px;
  background: var(--rand); border: 1px solid var(--rand); border-radius: var(--radius); overflow: hidden; }

.befund {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1rem;
  background: var(--grund);
  font-size: var(--t-m);
}
.befund .punkt { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--rand-stark); }
.befund.gut .punkt { background: var(--gut); }
.befund.läuft .punkt { background: var(--gut); }
.befund.achtung .punkt { background: var(--achtung); }
.befundtext { flex: 1; min-width: 0; }
.befundtext strong { font-weight: 620; }
.befundlink {
  font-size: var(--t-s);
  color: var(--gedaempft);
  text-decoration: none;
  padding: .2rem .55rem;
  border: 1px solid var(--rand);
  border-radius: 999px;
  white-space: nowrap;
  transition: border-color var(--tempo) var(--kurve), color var(--tempo) var(--kurve);
}
.befundlink:hover { border-color: var(--rand-stark); color: var(--schrift); }
.befund.achtung .befundlink { color: var(--achtung); border-color: color-mix(in srgb, var(--achtung) 35%, transparent); }
.befund.achtung .befundlink:hover { background: var(--achtung-flaeche); }

/* ================================================================ Meldungen */

.hinweis, .warnung {
  padding: .7rem .9rem;
  border-radius: var(--radius);
  margin: 0 0 1.25rem;
  font-size: var(--t-m);
  border: 1px solid transparent;
}
.hinweis { background: var(--gut-flaeche); color: var(--gut); border-color: color-mix(in srgb, var(--gut) 22%, transparent); }
/* Ein fehlendes Feld ist keine Störung, sondern eine Aufgabe – Rot wäre
   hier eine Übertreibung, die den Blick vom echten Fehler wegzieht. */
.hinweis.achtung {
  background: var(--achtung-flaeche);
  color: var(--achtung);
  border-color: color-mix(in srgb, var(--achtung) 28%, transparent);
}
.warnung { background: var(--warn-flaeche); border-color: var(--warn-rand); }
.warnung ul { margin: .3rem 0 0; padding-left: 1.2rem; }

.kennzeichen {
  display: inline-block;
  font-size: var(--t-xs);
  font-weight: 600;
  padding: .12rem .5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.kennzeichen.gut, .kennzeichen.läuft { background: var(--gut-flaeche); color: var(--gut); }
.kennzeichen.achtung { background: var(--achtung-flaeche); color: var(--achtung); }
.kennzeichen.ruhig { background: var(--flaeche); color: var(--leise); }

/* ================================================================== Knöpfe */

.knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-size: var(--t-s);
  font-weight: 550;
  line-height: 1.4;
  padding: .42rem .85rem;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand-stark);
  background: var(--grund);
  color: var(--schrift);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--tempo) var(--kurve), border-color var(--tempo) var(--kurve),
              transform var(--tempo) var(--kurve);
}
.knopf:hover { background: var(--flaeche); }
.knopf:active { transform: translateY(1px); }
.knopf[disabled], .knopf[aria-disabled="true"] {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

.knopf.haupt { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-schrift); }
.knopf.haupt:hover { background: var(--akzent-hell); border-color: var(--akzent-hell); }

.knopf.still { border-color: transparent; background: transparent; color: var(--leise); }
.knopf.still:hover { background: var(--flaeche); color: var(--schrift); }

.knopf.gefahr { border-color: var(--warn-rand); color: var(--akzent); background: transparent; }
.knopf.gefahr:hover { background: var(--warn-flaeche); }

/* ================================================================== Listen */

.liste {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  font-size: var(--t-m);
}
.liste th, .liste td { padding: .6rem .9rem; text-align: left; vertical-align: top; }
.liste th {
  font-size: var(--t-xs);
  font-weight: 600;
  color: var(--leise);
  text-transform: uppercase;
  letter-spacing: .05em;
  background: var(--leiste);
  border-bottom: 1px solid var(--rand);
}
.liste tbody tr { transition: background var(--tempo) var(--kurve); }
.liste tbody tr:hover { background: var(--leiste); }
.liste tbody td { border-bottom: 1px solid var(--rand); }
.liste tbody tr:last-child td { border-bottom: none; }
.liste td a { color: var(--schrift); text-decoration: none; }
.liste td a:hover { color: var(--akzent); }
.liste .zahl { text-align: right; }
.liste .inaktiv td { opacity: .55; }

/* Auf schmalen Schirmen wird aus jeder Zeile eine Karte. Eine Tabelle mit
   sechs Spalten ist auf einem Telefon unbenutzbar – sie zwingt entweder zum
   seitlichen Schieben oder quetscht jede Spalte auf zwei Zeichen. Die
   Beschriftung kommt aus data-spalte, weil der Tabellenkopf hier entfällt. */
@media (max-width: 720px) {
  .liste, .liste tbody, .liste tr, .liste td { display: block; }
  .liste thead { display: none; }

  .liste tr {
    padding: .85rem 1rem;
    border-bottom: 1px solid var(--rand);
  }
  .liste tr:last-child { border-bottom: none; }
  .liste tbody tr:hover { background: transparent; }

  .liste td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: .18rem 0;
    border: none;
    text-align: left;
  }
  .liste td.zahl { text-align: left; }

  /* Die erste Zelle trägt den Namen und steht für sich – ohne Beschriftung
     und mit etwas Luft darunter. */
  .liste td:first-child { display: block; padding-bottom: .4rem; }
  .liste td:first-child::before { content: none; }

  .liste td::before {
    content: attr(data-spalte);
    flex: none;
    color: var(--leise);
    font-size: var(--t-xs);
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  /* Mehrzeilige Werte brauchen einen eigenen Kasten: als nackter Text wären
     Festnetz- und Mobilnummer zwei Flex-Elemente und stünden nebeneinander,
     der Zeilenumbruch dazwischen bliebe wirkungslos. */
  .liste td .wert { text-align: right; }
  .liste td .aenderungen { flex: 1; text-align: left; }

  /* Leere Zellen sagen auf einer Karte nichts – sie kosten nur Höhe. */
  .liste td:empty { display: none; }
  .liste td:has(.wert:empty) { display: none; }
}
/* Rufnummern nicht umbrechen – "02581 12345-17" über drei Zeilen ist
   unlesbar und lässt die Zeile auseinanderfallen. */
.liste .nummer { white-space: nowrap; }

.karten { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.karten a {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: .25rem .6rem;
  padding: .8rem 1rem;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  color: var(--schrift);
  text-decoration: none;
  transition: border-color var(--tempo) var(--kurve), background var(--tempo) var(--kurve);
}
.karten a:hover { border-color: var(--rand-stark); }
.karten a .leise { flex-basis: 100%; }

.felder { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.felder dt { color: var(--leise); font-size: var(--t-s); }
.felder dd { margin: 0; }
.felder.klein { font-size: var(--t-s); }

/* =============================================================== Formulare */

.formular {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 1.5rem;
  max-width: 780px;
}
.schmal-formular { max-width: 430px; }

label { display: block; margin-bottom: 1.1rem; font-size: var(--t-s); font-weight: 600; }

/* Alle Eingabefelder außer Kästchen und Schaltern. Eine Aufzählung einzelner
   Typen vergisst zuverlässig number, date und url – die behalten dann ihre
   Standardbreite und rutschen neben die Beschriftung. */
input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=color]), select, textarea {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .48rem .6rem;
  font: inherit;
  font-size: var(--t-m);
  font-weight: 400;
  color: var(--schrift);
  background: var(--grund);
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  caret-color: var(--akzent);
  transition: border-color var(--tempo) var(--kurve), box-shadow var(--tempo) var(--kurve);
}
input:hover:not(:disabled), select:hover:not(:disabled), textarea:hover:not(:disabled) { border-color: var(--leise); }
input:focus, select:focus, textarea:focus {
  border-color: var(--akzent);
  box-shadow: 0 0 0 3px var(--akzent-flaeche);
  outline: none;
}
input:disabled, select:disabled, textarea:disabled { background: var(--flaeche); color: var(--leise); cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--leise); }
textarea {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-s);
  line-height: 1.55;
  resize: vertical;
}
select { cursor: pointer; }
input[type=checkbox] { accent-color: var(--akzent); width: 15px; height: 15px; }

.paare { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0 1.25rem; }
@media (max-width: 620px) { .paare { grid-template-columns: 1fr; } }

.feldhilfe {
  display: block;
  margin-top: .3rem;
  font-size: var(--t-xs);
  font-weight: 400;
  color: var(--leise);
  line-height: 1.45;
}
.pflicht { color: var(--akzent); font-weight: 400; }

label.haken { display: flex; align-items: flex-start; gap: .6rem; margin: .4rem 0 1.1rem; }
label.haken input { margin-top: .18rem; flex: none; }

.knopfzeile { display: flex; align-items: center; gap: .55rem; margin-top: 1.5rem; }
.schub { flex: 1; }

.fragetext { margin: 0 0 1rem; font-size: var(--t-l); font-weight: 550; }

/* Skripte und Befehle zum Kopieren. */
textarea.code, pre.code {
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--t-xs);
  line-height: 1.5;
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
  padding: .75rem .9rem;
  margin: .5rem 0 .35rem;
  white-space: pre;
  overflow-x: auto;
  color: var(--schrift);
}
textarea.code { display: block; width: 100%; resize: vertical; margin-bottom: .9rem; }

/* Eine Spalte, in der alles bündig steht – Karten, Hinweise, aufklappbare
   Teile. Verschieden breite Kästen übereinander sehen nach Zufall aus, und
   ein Hinweis, der breiter ist als die Karte darunter, nach Fehler. */
.spalte { max-width: 780px; }
.spalte > * + * { margin-top: 1.25rem; }
.spalte > h2 { margin-top: 2.75rem; }
.spalte > h2 + * { margin-top: 0; }
.spalte > details { margin-top: .5rem; }
.spalte .formular { max-width: none; }
.spalte > .hinweis { margin-bottom: 0; }
.spalte details .formular { margin-top: 0; }

/* Text links, Knopf rechts – der Knopf ist das, was man sucht. */
.zweiteilig { display: grid; grid-template-columns: 1fr 260px; gap: 1.5rem; align-items: start; }
.zweiteilig .fragetext { margin-bottom: .5rem; }
.zweiteilig .schritte, .zweiteilig .leise { margin-bottom: 0; }
.knopfzeile.senkrecht { flex-direction: column; align-items: stretch; margin-top: .25rem; }
.knopfzeile.senkrecht .knopf { text-align: center; }
.knopfzeile.senkrecht .feldhilfe { text-align: center; }
.zweiteilig + .feldhilfe { margin-top: 1.25rem; }
@media (max-width: 620px) {
  .zweiteilig { grid-template-columns: 1fr; }
  .knopfzeile.senkrecht { margin-top: 0; }
}
.formular > details:last-child summary { margin-bottom: 0; }
.formular > details:last-child[open] summary { margin-bottom: .6rem; }
.schritte { margin: .5rem 0 1rem; padding-left: 1.3rem; font-size: var(--t-s); color: var(--gedaempft); }
.schritte li { margin-bottom: .45rem; }
.schritte strong { color: var(--schrift); }
.folgen { margin: 0 0 1.25rem; padding-left: 1.15rem; color: var(--gedaempft); font-size: var(--t-m); }
.folgen li { margin-bottom: .45rem; }
/* Auf der Bestätigungsseite sind beide Wege gleich breit. Ein schmaler
   Abbrechen-Knopf neben einem breiten Löschknopf macht den sicheren Ausweg
   zum schwerer zu treffenden Ziel. */
.knopfzeile .knopf.voll, .knopfzeile .knopf.voll + .knopf { flex: 1; }

.loeschhinweis {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 1.5rem 0 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}

/* ================================================================== Editor */

.editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: start; }
@media (max-width: 1000px) { .editor { grid-template-columns: 1fr; } }

.rahmen-vorschau {
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
/* Starthöhe; der Editor setzt sie nach dem Laden auf die Höhe der Signatur.
   Bewusst ohne Übergang: die Höhe zu animieren heißt, das Layout über die
   Dauer der Animation immer wieder neu zu berechnen – und beim Tippen wird
   die Vorschau ohnehin alle paar Hundert Millisekunden erneuert. Ein
   nachlaufender Rahmen wäre unruhiger als ein sofortiger. */
#vorschau {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  background: #ffffff;
}

details summary {
  cursor: pointer;
  color: var(--gedaempft);
  font-size: var(--t-s);
  margin-top: 1rem;
  padding: .25rem 0;
}
details summary:hover { color: var(--schrift); }
details[open] summary { margin-bottom: .6rem; }

.regeln { margin: 0; padding-left: 1.1rem; font-size: var(--t-s); color: var(--gedaempft); }
.regeln li { margin-bottom: .4rem; }
.regeln strong { color: var(--schrift); font-weight: 600; }

/* ========================================================= Farbe und Bilder */

/* Der Wähler ist bewusst aus der allgemeinen Feldregel ausgenommen – mit
   width:100% legt er sich über die ganze Zeile und verdrängt das Textfeld. */
.farbwahl { display: flex; align-items: stretch; gap: .5rem; margin-top: .35rem; }
.farbwahl input[type=color] {
  flex: 0 0 44px;
  width: 44px;
  height: auto;
  min-height: 36px;
  margin: 0;
  padding: 3px;
  border: 1px solid var(--rand-stark);
  border-radius: var(--radius-klein);
  background: var(--grund);
  cursor: pointer;
}
.farbwahl input[type=text] {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  text-transform: uppercase;
}

.logowahl { display: flex; align-items: center; gap: .75rem; margin-top: .35rem; }
.logowahl img {
  flex: none;
  width: 76px;
  height: 40px;
  object-fit: contain;
  padding: 3px;
  background: #ffffff;
  border: 1px solid var(--rand);
  border-radius: var(--radius-klein);
}
.logowahl select { margin-top: 0; }

.hochladen { margin-bottom: 2rem; }
input[type=file] {
  display: block;
  width: 100%;
  margin-top: .35rem;
  padding: .55rem .6rem;
  font: inherit;
  font-size: var(--t-s);
  color: var(--gedaempft);
  background: var(--flaeche);
  border: 1px dashed var(--rand-stark);
  border-radius: var(--radius-klein);
  cursor: pointer;
}
input[type=file]:hover { border-color: var(--leise); }

.bildraster { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.bildkachel {
  margin: 0;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
}
.bildflaeche {
  /* Karierter Grund, damit man bei PNG mit Transparenz sieht, was durchscheint –
     bei einem Logo auf weißem Grund ist das der Unterschied zwischen
     "funktioniert überall" und "hat einen weißen Kasten". */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 130px;
  padding: .6rem;
  background-color: #ffffff;
  background-image:
    linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%),
    linear-gradient(45deg, #eceef1 25%, transparent 25%, transparent 75%, #eceef1 75%);
  background-size: 16px 16px;
  background-position: 0 0, 8px 8px;
  border-bottom: 1px solid var(--rand);
}
.bildflaeche img { max-width: 100%; max-height: 100%; display: block; }
.bildkachel figcaption { display: grid; gap: .3rem; padding: .65rem .75rem; }
.bildname { font-size: var(--t-s); font-weight: 550; word-break: break-all; }
.knopf.klein { padding: .2rem .5rem; font-size: var(--t-xs); justify-self: start; }

.portraetzeile { display: flex; align-items: center; gap: .85rem; margin: .35rem 0 .6rem; }
.portraetzeile img {
  width: 62px;
  height: 74px;
  object-fit: cover;
  border-radius: var(--radius-klein);
  border: 1px solid var(--rand);
  background: #fff;
}
.portraetzeile label.haken { margin: .25rem 0 0; font-size: var(--t-xs); font-weight: 400; }

#vorschau-stand.achtung { color: var(--achtung); }
.entfallen { display: block; margin-top: .25rem; color: var(--leise); }
#vorschau-stand.warnung { padding: .5rem .7rem; }

/* ====================================================== Vorlagen-Galerie */

/* Eine Vorlage je Zeile. Nebeneinander sind die Kacheln so schmal, dass jede
   Signatur stark verkleinert werden muss; über die volle Breite passen die
   meisten in Originalgröße. */
.galerie { display: grid; gap: 1rem; }

.angebot {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  grid-template-rows: 1fr auto;
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--tempo) var(--kurve);
}
.angebot:hover { border-color: var(--rand-stark); }

.angebot-kopf { grid-column: 1; grid-row: 1; padding: 1.1rem 1.25rem .5rem; }
.angebot-kopf h2 { margin: 0 0 .35rem; font-size: var(--t-m); font-weight: 620; }
.angebot-kopf p { margin: 0; }

.schonda {
  margin: .6rem 0 0;
  font-size: var(--t-s);
  color: var(--gut);
  background: var(--gut-flaeche);
  padding: .25rem .55rem;
  border-radius: var(--radius-klein);
  display: inline-block;
}
.schonda a { color: inherit; }

.angebot-fuss { grid-column: 1; grid-row: 2; margin: 0; padding: .5rem 1.25rem 1.1rem; }
.angebot-fuss .knopf { width: 100%; }

.angebot-vorschau {
  /* Weiß, nicht die Flächenfarbe: die Vorlage wird später in einem
     Mailfenster gelesen, nicht in dieser Oberfläche. */
  grid-column: 2;
  grid-row: 1 / -1;
  background: #ffffff;
  border-left: 1px solid var(--rand);
  min-height: 200px;
  overflow: hidden;
}
.angebot-vorschau iframe { display: block; width: 100%; height: 200px; border: 0; background: #fff; }
.angebot-vorschau .leer { border: 0; border-radius: 0; height: 100%; }

@media (max-width: 760px) {
  .angebot { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
  .angebot-kopf { grid-row: 1; }
  .angebot-vorschau { grid-column: 1; grid-row: 2; border-left: 0; border-top: 1px solid var(--rand); }
  .angebot-fuss { grid-row: 3; }
}

/* ================================================================ Anmelden */

body.mittig {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 1.5rem;
  background: var(--flaeche);
}
.karte {
  background: var(--grund);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 2rem;
  box-shadow: var(--schatten);
}
.karte.schmal { width: 100%; max-width: 390px; }
.karte .knopf.haupt { width: 100%; padding: .55rem; font-size: var(--t-m); }