/* Anmeldung und Organisationsverwaltung. Dieselben Farbtokens wie die
   Planungsseite - die kommt in Etappe 3 dazu. */
:root {
  color-scheme: light;
  --bg: #f4f6fa;
  --card: #ffffff;
  --card2: #eef2f8;
  --line: #d3dbe7;
  --line-soft: #e4e9f1;
  --text: #1b2437;
  --muted: #5e6a80;
  --brand: #2f5bd7;
  --brand-dark: #22459f;
  --brand-soft: #e6ecfb;
  --ok: #17845a;
  --danger: #c4342f;
  --danger-soft: #fdeceb;
  --marke-gruen: #00875a;    /* Wortmarke - satt und auf Weiss noch 4,55:1 */
  --radius: 12px;
  --shadow: 0 1px 2px rgba(27, 36, 55, .06), 0 1px 3px rgba(27, 36, 55, .04);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

.mitte { max-width: 460px; margin: 0 auto; padding: 48px 16px; }
.breit { max-width: 720px; }

.marke { text-align: center; margin-bottom: 24px; }

/* Auf der Anmeldeseite steht die Marke über der schmalen Spalte, nicht darin:
   sie ist breiter als 460px und stünde sonst nicht in der Mitte der Seite,
   sondern liefe nach rechts heraus. */
.marke-gross { padding: 40px 16px 0; }
.marke-gross + .mitte { padding-top: 24px; }   /* die Marke bringt den Abstand schon mit */
/* Auf der Anmeldeseite ist die Marke der Eingang - dort groß, aber mit
   clamp() nach unten begrenzt, damit sie auf dem Telefon nicht umbricht.
   Die Kopfzeile der Übersicht ist eine Zeile im Betrieb: eine Stufe kleiner. */
/* Eine Grösse für beide Seiten: dieselbe Marke wie in der Kopfzeile nach dem
   Anmelden. Gross war sie, als sie allein mit dem Spruch dastand - jetzt
   steht die Anmeldung darunter, und die ist das Wichtige.
   ⚠️ clamp() bleibt für schmale Fenster: Das Feld darf nicht umbrechen. */
.marke strong { font-size: clamp(20px, 6vw, 30px); letter-spacing: -.01em; }
/* ⚠️ Auf dem Telefon mitschrumpfen: Fest 30px ist breiter als 375px, und
   die Zeile schob dann Abmelden und Menü aus dem Bild - erreichbar war
   dort nichts mehr. */
.kopf .marke { min-width: 0; }
.kopf .marke strong { font-size: clamp(16px, 4.4vw, 24px); }
.marke > span { color: var(--muted); font-size: 14px; }
.marke > .spruch, .marke-stapel .spruch { font-size: 17px; }

.karte {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}

h1 { font-size: 18px; margin: 0 0 4px; }
h2 { font-size: 15px; margin: 24px 0 8px; }
.unterzeile { color: var(--muted); font-size: 14px; margin: 0 0 20px; }

label { display: block; font-size: 13px; color: var(--muted); margin: 14px 0 4px; }
input[type=email], input[type=password], input[type=text], input[type=month],
input[type=search] {
  width: 100%;
  padding: 9px 11px;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* ⚠️ Ohne das zeichnet der Browser Suchfelder in seiner eigenen Form -
   abgerundet, mit eingebautem Kreuz, in fremder Schrift. Das Suchfeld über
   den Branchen sah damit anders aus als jedes andere Feld daneben. */
input[type=search] { -webkit-appearance: none; appearance: none; }
input[type=search]::-webkit-search-cancel-button { display: none; }
input:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; border-color: var(--brand); }
.hinweis { font-size: 12px; color: var(--muted); margin-top: 4px; }

.knopf {
  font: inherit;
  padding: 9px 14px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--card2);
  color: var(--text);
  cursor: pointer;
}
.knopf:hover { border-color: #c2ccdb; }
.knopf.haupt { background: var(--brand); border-color: var(--brand); color: #fff; }
.knopf.haupt:hover { background: var(--brand-dark); }
.knopf.klein { padding: 5px 10px; font-size: 13px; }
/* Dasselbe Grün wie die Wortmarke und der Weg ins Demo. */
.knopf.gruen {
  background: var(--marke-gruen); border-color: var(--marke-gruen); color: #fff; font-weight: 600;
}
.knopf.gruen:hover { background: #016c48; border-color: #016c48; }
.knopf.gefahr { color: var(--danger); }
.knopf.gefahr:hover { background: var(--danger-soft); border-color: #eeb7b4; }
.knopf[disabled] { opacity: .55; cursor: progress; }
.knopf.breit { width: 100%; margin-top: 20px; }

.wechsel { text-align: center; margin-top: 16px; font-size: 14px; color: var(--muted); }
.wechsel-trenner { margin: 0 6px; }
/* Unter „Passwort ändern", rechtsbündig wie ein Nachsatz - nicht als
   zweiter Knopf: Es ist der seltene Ausweg, nicht die Handlung. */
.vergessen-unter { text-align: right; margin: 10px 0 0; font-size: 13px; }
/* Mein Account: die Adresse als Zeile, „ändern" darunter - klein und
   unaufdringlich, wie ein Nachsatz. */
.konto-zeile { margin: 0; font-size: 15px; display: flex; gap: 8px; flex-wrap: wrap; }
.konto-zeile span { color: var(--muted); }
.konto-zeile strong { overflow-wrap: anywhere; }
.konto-aendern { margin: 6px 0 0; font-size: 13px; }
#konto-email-ausstehend { margin-top: 8px; color: #8a5a00; }

.verweis {
  font: inherit; color: var(--brand); background: none; border: 0;
  padding: 0; cursor: pointer; text-decoration: underline;
}

.meldung {
  margin-top: 16px; padding: 10px 12px; border-radius: 8px; font-size: 14px;
  background: var(--danger-soft); border: 1px solid #eeb7b4; color: var(--danger);
}
.meldung.gut { background: #e9f5ee; border-color: #c6e5d4; color: var(--ok); }

/* --------------------------------------------------- Organisationsliste */

.kopf {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 14px; margin-bottom: 20px;
}
/* Die Marke nimmt den Platz dazwischen - so steht das Abmelden ganz rechts,
   auch wenn links nur das Menü steht. */
.kopf .marke { flex: 0 0 auto; }
/* Neben der Marke die Überschrift der Seite (04.10.2026) - in der Art des
   Organisationsnamens in der Planung: kräftig, eine Spur kleiner als die
   Marke. Sie nimmt den Platz bis zum Abmelden; ein langer Titel bricht
   lieber um, als die Knöpfe hinauszuschieben.
   ⚠️ Die Marke war bis dahin 30px gross und füllte die Zeile allein - neben
   einer Überschrift wäre sie das Lauteste auf der Seite gewesen. */
.kopf-titel {
  flex: 1 1 auto; min-width: 0; margin: 0;
  font-size: clamp(16px, 4.4vw, 22px); font-weight: 700; letter-spacing: -.02em;
  color: var(--text); overflow-wrap: anywhere;
}
/* ⚠️ Auf schmalen Bildschirmen geht die Überschrift ALLEIN in die zweite
   Zeile: Bräche sie samt Abmelden um, stünde der Ausgang nicht mehr in der
   Zeile, die immer zu sehen ist - dieselbe Regel wie in der Planung. */
@media (max-width: 600px) {
  /* In der eigenen Zeile mittig - links stünde sie wie ein vergessener
     Rest unter dem Menü. */
  .kopf-titel { order: 5; flex-basis: 100%; text-align: center; }
}
/* ⚠️ Dasselbe wie in der Planung: Das Abmelden hält sich über diesen Rand
   rechts, nicht über `justify-content` - sonst hinge es an der Breite der
   Marke. Die Marke selbst bleibt in der Zeile; sie schrumpft mit dem
   Fenster (`clamp` weiter oben) und passt auch auf schmalen Geräten
   zwischen Menü und Abmelden. */
.kopf-knoepfe { margin-left: auto; }
/* Abmelden und Menü als Zeichen - dieselben beiden wie in der Planung.
   ⚠️ Ohne Text brauchen sie title und aria-label, sonst sind sie für
   Vorlesegeräte namenlos; beide stehen in der Seite. */
.kopf-knoepfe { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.knopf.icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 34px; padding: 0;
}
.knopf.icon svg { width: 20px; height: 20px; fill: currentColor; }
/* Grau, erst beim Darüberfahren rot - dasselbe Zeichen wie in der Planung. */
.knopf.papierkorb { width: 32px; height: 30px; color: var(--muted); }
.knopf.papierkorb svg { width: 17px; height: 17px; }
.knopf.papierkorb:hover {
  color: var(--danger); border-color: #eeb7b4; background: var(--danger-soft);
}

.menu { position: relative; flex: 0 0 auto; }
/* ⚠️ Kein Knopf, nur drei Striche - wie in der Planung: Das Menü ist der Weg
   hinaus, nicht eines der Werkzeuge dieser Seite. */
.menu-striche {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 32px;
  border: 0; background: none; padding: 0;
  color: var(--text); cursor: pointer; border-radius: 8px;
}
.menu-striche svg { width: 26px; height: 26px; fill: currentColor; }
.menu-striche:hover { background: var(--brand-soft); color: var(--brand-dark); }

.menu-liste {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 40;
  min-width: 200px; display: flex; flex-direction: column; padding: 6px;
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 8px 24px rgba(27, 36, 55, .14);
}
.menu-liste > * {
  font: inherit; text-align: left; border: 0; background: none; cursor: pointer;
  color: var(--text); padding: 8px 10px; border-radius: 7px;
}
.menu-liste > *:hover { background: var(--brand-soft); }
.menu-liste > a { text-decoration: none; }

/* Das Suchfeld über der Liste - es erscheint erst ab elf Organisationen. */
.orgsuche { margin: 0 0 12px; }
.orgsuche input { width: 100%; }

/* Ist die Grenze erreicht, steht der Grund an der Stelle des Formulars -
   deutlicher als die kleine Zeile darunter, aber kein Fehler. */
.hinweis.voll {
  margin: 20px 0 0; padding: 12px 14px; font-size: 14px;
  background: var(--card2); border: 1px solid var(--line);
  border-radius: 10px; color: var(--muted);
}

.orgliste { list-style: none; margin: 0; padding: 0; }
.orgliste li {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 0; border-top: 1px solid var(--line-soft);
}
.orgliste li:first-child { border-top: 0; }
/* Gelöschtes geht nicht einfach weg, es verabschiedet sich: Die Zeile wird
   blass, rückt nach rechts und zieht sich zusammen. ⚠️ Auch die Höhe, sonst
   springt die Liste im letzten Augenblick doch. */
.orgliste li {
  transition: opacity .3s ease, transform .3s ease,
              padding .3s ease .05s, max-height .3s ease .05s;
  max-height: 140px;
  overflow: hidden;
}
.orgliste li.geht {
  opacity: 0; transform: translateX(14px);
  max-height: 0; padding-top: 0; padding-bottom: 0;
}
/* Wer Bewegung abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
  .orgliste li { transition: none; }
}
.orgname { flex: 1; min-width: 0; }
/* Grün und fett wie die Wortmarke: Der Name ist der Weg hinein.
   ⚠️ Ohne Unterstrich - er ist die Überschrift der Zeile, kein Verweis im
   Fliesstext; dass er führt, sagt der Zeiger. */
.orgname-knopf {
  display: block; max-width: 100%; text-align: left;
  font: inherit; font-weight: 700; color: var(--marke-gruen);
  background: none; border: 0; padding: 0; cursor: pointer;
  text-decoration: none; overflow: hidden; text-overflow: ellipsis;
}
.orgname-knopf:focus-visible { outline: 2px solid var(--marke-gruen); outline-offset: 2px; border-radius: 3px; }
.orgname span { color: var(--muted); font-size: 13px; }
.marke-rolle {
  font-size: 12px; color: var(--muted);
  background: var(--card2); border: 1px solid var(--line-soft);
  border-radius: 999px; padding: 1px 8px;
}
.leer { color: var(--muted); padding: 16px 0; }

/* ⚠️ Vier Felder und ein Knopf passen auf 880 px nur, wenn jedes eine
   Mindestbreite hat und die Zeile umbrechen darf - sonst wird der Ort zu
   einem Schlitz. Name und Branche brauchen am meisten, die PLZ am
   wenigsten. */
.neuform {
  display: flex; gap: 10px; align-items: flex-end; margin-top: 8px;
  flex-wrap: wrap;
}
.neuform label { margin-top: 0; }
.neuform > div { flex: 1 1 200px; min-width: 0; }
.neuform > div.ortszeile { flex: 1 1 260px; }

@media (max-width: 560px) {
  .neuform { flex-wrap: wrap; }
  .neuform > div { flex: 1 1 100%; }
  .neuform .knopf { width: 100%; }
  .orgname { flex: 1 1 100%; }
}

/* ------------------------------------------------------------- Wortmarke */

/* Die Marke sitzt in einem weissen Feld: „Arbeits“ und „.net“ im Anthrazit
   der Oberfläche, „zeitMaschine“ in sattem Grün (#00875a, 4,55:1 auf Weiss).
   Der feine Rand ist nötig, damit das weisse Feld auch auf weissem Grund -
   etwa in der Kopfzeile der Planung - als Marke erkennbar bleibt. */
.wortmarke {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -.012em;
  background: #fff;
  border: 1px solid var(--line);
  /* Voll gerundet: die beiden Schmalseiten sind je ein halber Kreis, die
     Rundung läuft ohne Knick durch. Seitlich mehr Luft, damit „A“ und „t“
     nicht in die Bögen laufen. */
  border-radius: 999px;
  padding: .18em .62em;
  box-shadow: var(--shadow);
}
.wortmarke .w-dunkel,
.wortmarke .w-akzent { font-size: inherit; }
.wortmarke .w-dunkel { color: var(--text); }
.wortmarke .w-akzent { color: var(--marke-gruen); }

/* Der Satz unter der Marke bricht genau auf der Breite des Logos um.
   Dafür stehen beide in einer schmalen Säule, die sich nach dem breitesten
   Kind richtet - das ist das Logo. Der Satz selbst zählt mit „width: 0“ nicht
   mit (sonst zöge er die Säule auf seine eigene Länge) und füllt sie dann
   über „min-width: 100%“ aus. So passt sich der Umbruch von selbst an, wenn
   das Logo mit dem Fenster wächst. */
.marke-stapel {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  max-width: 100%;
}
.marke .spruch {
  width: 0;
  min-width: 100%;
  margin: 10px 0 0;
  line-height: 1.4;
  font-weight: 700;
  /* Der Satz soll auf beiden Seiten mit dem Logo abschliessen, also
     Blocksatz. „text-wrap: balance“ wäre hier falsch - es kürzt alle Zeilen
     auf gleiche Länge und macht den Satz sichtbar schmäler als das Logo.
     Die Silbentrennung hält die Wortabstände klein; ohne sie reisst ein Wort
     wie „Organisationseinheit“ Löcher in die Zeile. Die letzte Zeile bleibt
     mittig, sonst stünde sie als kurzer Rest allein links. */
  text-align: justify;
  text-align-last: center;
  hyphens: auto;
}

/* ---------------------------------- Vorstellung: Bild links, Text rechts

   Steht unter der Anmeldung: Wer wiederkommt, will sich anmelden, nicht
   lesen. Das Bild behält sein Seitenverhältnis (width/height stehen im
   HTML, damit beim Laden nichts springt) und nimmt etwa ein Drittel der
   Kachel ein. Auf dem Telefon rückt es über den Text. */
.vorstellung {
  display: flex; align-items: flex-start; gap: 22px;
  margin-top: 18px;
}
.vorstellung img {
  flex: 0 0 38%; width: 38%; height: auto;
  border-radius: 10px; display: block;
}
.vorstellung-text { min-width: 0; }
.vorstellung .spruch {
  margin: 0; font-size: 15px; line-height: 1.5;
  hyphens: auto;
}
/* ⚠️ Die drei Teile sind eigene Absätze mit Luft dazwischen, nicht enge
   Folgezeilen: Der fette Satz in der Mitte ist der Punkt, auf den alles
   zuläuft - er braucht Raum, sonst geht er in der Aufzählung unter. */
.vorstellung .spruch + .spruch { margin-top: 16px; }
.vorstellung .spruch.schluss { margin-top: 20px; }
/* Der Markenname im Fliesstext: dieselben zwei Farben wie im Logo,
   zusammenhängend, damit er nicht mitten im Wort umbricht. */
/* Die Aufzählung zwischen den beiden Sätzen - eng gesetzt, sie ist Teil
   des Absatzes und nicht eine eigene Liste mit Luft ringsum. */
.spruch-liste {
  margin: 10px 0 0; padding-left: 20px;
  font-size: 15px; line-height: 1.5;
}
.spruch-liste li { margin: 2px 0; }
.marke-im-text { white-space: nowrap; letter-spacing: -.012em; font-weight: 700; }
.marke-im-text .w-dunkel { color: var(--text); }
.marke-im-text .w-akzent { color: var(--marke-gruen); }
@media (max-width: 560px) {
  .vorstellung { flex-direction: column; align-items: stretch; gap: 16px; }
  .vorstellung img { flex: 0 0 auto; width: 100%; }
}

/* ------------------------------------------------ Branchenwahl mit Suche */
.waehler { position: relative; }
.waehler-knopf {
  width: 100%; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  padding: 9px 12px; font: inherit; font-size: 15px; color: var(--text);
  cursor: pointer;
}
.waehler-knopf.leer { color: var(--muted); }
.waehler-knopf:hover { border-color: var(--brand); }
/* Die Liste liegt über dem, was darunter steht - sonst schöbe sie beim
   Öffnen das halbe Formular nach unten. */
.waehler-liste {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 32, 56, .16);
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
}
.waehler-treffer { display: flex; flex-direction: column; max-height: 260px; overflow-y: auto; }
.waehler-treffer button {
  text-align: left; border: none; background: none; font: inherit; font-size: 14px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer; color: var(--text);
}
.waehler-treffer button:hover { background: var(--brand-soft); }
.waehler-treffer button.gewaehlt { background: var(--brand-soft); font-weight: 600; }
.waehler-treffer .kein-treffer { padding: 7px 8px; color: var(--muted); font-size: 14px; }

/* PLZ und Ort gehören zusammen und teilen sich eine Spalte der Zeile -
   die PLZ braucht wenig Platz, der Ortsname viel. */
.ortszeile { display: grid; grid-template-columns: 90px 1fr; gap: 10px; }

/* Vorschläge zum Ort - dieselbe Form wie die Branchenliste, damit die
   beiden Felder nebeneinander nicht wie zwei verschiedene Sachen wirken. */
.ortsfeld { position: relative; }
.ortsvorschlaege {
  position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 4px);
  background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  box-shadow: 0 12px 30px rgba(20, 32, 56, .16);
  padding: 6px; display: flex; flex-direction: column;
  max-height: 260px; overflow-y: auto;
}
.ortsvorschlaege button {
  display: flex; align-items: baseline; gap: 8px;
  text-align: left; border: none; background: none; font: inherit; font-size: 14px;
  padding: 7px 8px; border-radius: 7px; cursor: pointer; color: var(--text);
}
.ortsvorschlaege button:hover { background: var(--brand-soft); }
.ortswo { color: var(--muted); font-size: 12px; }

/* ------------------------------------- Der Weg ins Demo, volle Breite */
/* ⚠️ Oben ausgerichtet, nicht mittig: Seit der Text zwei Absätze hat,
   rutschte der Knopf in die Mitte der Kachel und stand neben nichts. An der
   ersten Zeile beginnt der Blick, dort gehört er hin. */
.demo-kachel {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 18px; margin-top: 18px; padding: 18px 20px;
}
.demo-text { margin: 0; font-size: 15px; line-height: 1.5; }
.demo-texte { display: flex; flex-direction: column; gap: 10px; }
/* Der Verweis auf das fertige Blatt - grün und fett wie die Marke und der
   Knopf daneben: beides führt ins Demo, nicht hinaus. */
/* ⚠️ Ohne Unterstrich: Die drei Verweise stehen mitten in einem Satz, und
   drei unterstrichene Stellen darin lesen sich wie ein Formular. Dass sie
   führen, sagen Farbe und Fettung. */
.pdf-verweis { color: var(--marke-gruen); font-weight: 700; text-decoration: none; }
.pdf-verweis:hover { text-decoration: none; }
/* Grün wie die Wortmarke und wie der Knopf zur graphischen Darstellung in
   der Planung - er führt hinein, nicht heraus. */
.knopf.demo {
  flex: 0 0 auto;
  background: var(--marke-gruen); border-color: var(--marke-gruen); color: #fff;
  font-weight: 600;
  /* Es ist ein Verweis, kein Knopf im Formular - er soll nur aussehen wie
     einer und auf derselben Höhe stehen. */
  /* ⚠️ Auch waagrecht mittig: Als Verweis steht der Text sonst links im
     Knopf - bei „zum Demo" fiel es kaum auf, in anderen Sprachen sofort. */
  text-decoration: none; display: inline-flex; align-items: center;
  justify-content: center; text-align: center;
}
.knopf.demo:hover { background: #016c48; border-color: #016c48; }
@media (max-width: 560px) {
  .demo-kachel { flex-direction: column; align-items: stretch; }
  .knopf.demo { width: 100%; }
}

/* ---------------------------------- Merkmale: zwei Kacheln nebeneinander */
.kacheln {
  display: grid; grid-template-columns: 1fr 1fr; gap: 18px;
  margin-top: 18px;
}
.karte.merkmal { padding: 20px; }
.karte.merkmal h2 {
  margin: 0 0 6px; font-size: 15px; font-weight: 700; line-height: 1.35;
}
.karte.merkmal p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
/* Der Preis steht unter den beiden Kacheln, über die ganze Breite. */
.preis-kachel { margin-top: 16px; }
/* ⚠️ Mit beiden Klassen: „.karte.merkmal p { margin: 0 }" wiegt schwerer als
   „.preis-kachel p + p", der Absatz klebte sonst am vorigen. */
.karte.merkmal.preis-kachel p + p { margin-top: 12px; }
.preis-kachel .preis-frei { color: var(--marke-gruen); font-weight: 700; }
@media (max-width: 560px) {
  .kacheln { grid-template-columns: 1fr; }
}

/* ------------------------------------------- Anmeldung in einer Zeile */

/* Breit genug für die Anmeldung in einer Zeile UND für Bild und Text
   nebeneinander in der Kachel darunter. */
#seite-anmeldung .mitte { max-width: 880px; }

.reihe {
  display: flex;
  gap: 12px;
  align-items: flex-end;    /* Schaltfläche auf Höhe der Eingabefelder */
  flex-wrap: wrap;          /* am schmalen Fenster wieder untereinander */
}
.reihe .feldgruppe { flex: 1 1 210px; min-width: 0; }
.reihe .feldgruppe label { margin-top: 0; }
.reihe .knopf.haupt {
  flex: 0 0 auto;
  padding-inline: 22px;
  height: 38px;             /* dieselbe Höhe wie ein Eingabefeld */
}

/* Umgebrochen soll die Schaltfläche die ganze Zeile einnehmen, sonst steht
   sie allein und verloren am linken Rand. */
@media (max-width: 620px) {
  .reihe .feldgruppe { flex: 1 1 100%; }
  .reihe .knopf.haupt { width: 100%; margin-top: 6px; }
}

/* Beim Anmelden entfällt die Unterzeile - dann braucht die Überschrift den
   Abstand zu den Feldern selbst. */
.karte h1 + .reihe, .karte .unterzeile[hidden] + form .reihe { margin-top: 18px; }

/* ------------------------------------------- Konto anlegen: als Dialog

   Seit 08.10.2026 ein eigener Dialog (#dialog-registrieren) statt eines
   umklappenden Anmeldeformulars: alles untereinander, die Knöpfe unten. */

#formular-reg { display: flex; flex-direction: column; gap: 12px; }
#formular-reg label { margin-top: 0; }
/* Die Feldnamen (E-Mail-Adresse, Branche, PLZ …) mit mehr Gewicht - im
   Dialog stehen sie zwischen lauter gleich aussehenden Feldern und sollen
   die Gliederung tragen. Die Sätze der Kästchen bleiben normal. */
#formular-reg label:not(.zustimmung-zeile) { font-weight: 600; color: var(--text); }
#formular-reg .hinweis { margin: 6px 0 0; }
/* „Schon vergeben": der rote Satz, darunter der Weg zu „Passwort vergessen". */
.email-vergeben .verweis { margin-top: 4px; font-size: 13px; }
#formular-reg .meldung { margin-top: 0; }
#formular-reg .zustimmung { margin: 4px 0 0; }
#dialog-registrieren { width: min(520px, 92vw); max-width: 92vw; }
#formular-reg h2 { margin-bottom: 4px; }
/* Die Auswahllisten (Branche, Ort) dürfen über den unteren Rand des Dialogs
   hinausragen, statt in ihm abgeschnitten zu werden und ihn zum Scrollen zu
   zwingen. ⚠️ Nur auf ausreichend hohen Bildschirmen - auf niedrigen muss
   der Dialog selbst scrollen können, sonst wäre sein unteres Ende samt
   Knöpfen unerreichbar. */
@media (min-height: 720px) {
  #dialog-registrieren { overflow: visible; }
}

/* Name, Branche, PLZ und Ort untereinander - in der Registrierung und im
   Dialog. Nebeneinander wie in „Neue Organisation" ginge sich dort nicht aus:
   Die Anmeldekarte ist schmal, der Dialog auch. */
.orgfelder { display: flex; flex-direction: column; gap: 12px; }
.orgfelder > div { min-width: 0; }
.orgfelder label { margin-top: 0; }

/* Der Löschdialog trägt dieselbe Form wie der zum Bearbeiten. */
dialog#dialog-bearbeiten, dialog#dialog-loeschen, dialog#dialog-vergessen, dialog#dialog-email,
dialog#dialog-account-loeschen, dialog#dialog-registrieren {
  border: 1px solid var(--line); background: var(--card); color: var(--text);
  border-radius: var(--radius); padding: 20px; min-width: min(420px, 92vw);
  box-shadow: 0 18px 48px rgba(27, 36, 55, .22);
}
dialog#dialog-bearbeiten::backdrop,
dialog#dialog-loeschen::backdrop,
dialog#dialog-vergessen::backdrop,
dialog#dialog-email::backdrop,
dialog#dialog-account-loeschen::backdrop,
dialog#dialog-registrieren::backdrop { background: rgba(27, 36, 55, .35); }
dialog#dialog-bearbeiten h2, dialog#dialog-loeschen h2, dialog#dialog-vergessen h2,
dialog#dialog-email h2, dialog#dialog-account-loeschen h2, dialog#dialog-registrieren h2 { margin: 0; }
#formular-loeschen, #formular-vergessen, #formular-email,
#formular-account-loeschen { display: flex; flex-direction: column; gap: 12px; }
#formular-account-loeschen .meldung { margin-top: 0; }
#formular-account-loeschen label { margin-top: 0; }
#dialog-account-loeschen { max-width: min(480px, 92vw); }
#karte-loeschen h1 { margin-bottom: 14px; }
#formular-email .meldung { margin-top: 0; }
.dialog-eingabe { display: flex; flex-direction: column; gap: 12px; }
.dialog-eingabe[hidden] { display: none; }
#formular-email label { margin-top: 0; }
#dialog-email { max-width: min(460px, 92vw); }
/* Im Dialog sitzt die Meldung zwischen Feld und Knöpfen - ohne den Abstand
   von oben, den sie unter einem Formular braucht. */
#formular-vergessen .meldung { margin-top: 0; }
#dialog-vergessen { max-width: min(460px, 92vw); }
.loesch-frage { margin: 0; font-size: 14px; }
/* ⚠️ Der Knopf, der wirklich löscht, ist gefüllt - nicht nur rot beschriftet:
   Er steht neben „Abbrechen", und der Unterschied muss auf einen Blick da
   sein. */
.knopf.gefahr-voll {
  background: var(--danger); border-color: var(--danger); color: #fff;
}
.knopf.gefahr-voll:hover { background: #a3322d; border-color: #a3322d; }
.dialog-knoepfe {
  display: flex; justify-content: flex-end; gap: 8px; margin: 4px 0 0; padding: 0;
}

/* ------------------------------------------ Passwortregel beim Tippen

   Rot, solange etwas fehlt; grün, sobald die Regel erfüllt ist. Der Hinweis
   sagt dabei, WAS noch fehlt - eine Farbe allein hilft niemandem weiter, und
   wer Farben schlecht unterscheidet, liest den Text. */

.hinweis.fehlt { color: var(--danger); }
.hinweis.gut   { color: var(--ok); }

/* Kräftig rot (04.10.2026) - das blasse Rosa davor war neben einem
   leeren Feld kaum zu sehen, und genau dann soll es auffallen. */
input.fehlt { border-color: var(--danger); }
input.fehlt:focus-visible { outline-color: var(--danger); border-color: var(--danger); }
input.gut { border-color: #a9d9c2; }
input.gut:focus-visible { outline-color: var(--ok); border-color: var(--ok); }

/* ---------- Löschbares Suchfeld ----------
   Dasselbe × wie in der Mitarbeitersuche, nur von `loeschbar.js` erzeugt:
   Kontoseite (Organisation, Branche, Ort) und Trichter der Planung. */
.suchfeld-huelle { position: relative; display: block; }
.suchfeld-huelle > input { width: 100%; padding-right: 32px; box-sizing: border-box; }
.feld-loeschen {
  position: absolute; top: 50%; right: 6px; transform: translateY(-50%);
  width: 22px; height: 22px; border-radius: 50%; padding: 0;
  border: 1px solid var(--line); background: #fff; color: var(--muted);
  font-size: 14px; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.feld-loeschen:hover { color: var(--danger); border-color: var(--danger); }

/* ------------------------------------------------- Fusszeile (04.10.2026)
   AGB · Datenschutz · Impressum, ganz unten auf jeder Seite - klein und
   grau, denn man sucht sie, statt über sie zu stolpern. */
.fusszeile {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 8px;
  padding: 18px 16px 22px; font-size: 13px; color: var(--muted);
}
.fusszeile a { color: var(--muted); text-decoration: none; }
.fusszeile a:hover { color: var(--text); text-decoration: underline; }

/* ------------------------------------------------- Rechtstexte
   Seiten aus src/werkzeuge/rechtstexte.js: Lesetext, keine Formularseite -
   etwas mehr Zeilenabstand, Absatznummern wie in Word. */
.rechtstext-seite .kopf .marke { text-decoration: none; }
.rechtstext { line-height: 1.6; font-size: 15px; }
.rechtstext h1 { font-size: 24px; line-height: 1.3; margin: 0 0 6px; }
.rechtstext h2 { font-size: 17px; margin: 28px 0 8px; }
.rechtstext p { margin: 0 0 10px; }
.rechtstext .stand { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.rechtstext .zurueck { font-size: 13px; margin-bottom: 14px; }
.rechtstext ol, .rechtstext ul { margin: 0 0 12px; padding-left: 1.6em; }
.rechtstext li { margin: 0 0 6px; }
.rechtstext li > ul { margin: 6px 0; }
.rechtstext li > p { margin: 6px 0 0; }
.rechtstext a { color: var(--brand); }
/* Tabellen dürfen auf dem Telefon seitlich rollen, statt die Seite zu sprengen. */
.rechtstext .tabelle-rahmen { overflow-x: auto; margin: 8px 0 14px; }
.rechtstext table { border-collapse: collapse; width: 100%; font-size: 14px; }
.rechtstext th, .rechtstext td {
  border: 1px solid var(--line); padding: 6px 8px; text-align: left; vertical-align: top;
}
.rechtstext th { background: var(--bg, #f4f6fa); font-weight: 600; }

/* Die beiden Pflicht-Kästchen beim Registrieren (08.10.2026). */
.zustimmung { margin: 14px 0 4px; display: flex; flex-direction: column; gap: 8px; }
.zustimmung-zeile { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.4; cursor: pointer; }
.zustimmung-zeile input { margin: 2px 0 0; flex: 0 0 auto; width: 16px; height: 16px; }
.zustimmung-zeile a { color: var(--marke-gruen); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }