/* Adressverwaltung - Gestaltung nach dem Corporate Design von textil+mode.
   Hintergrund weiss, Arial durchgaengig, Ueberschriften Dunkelblau,
   Hervorhebungen Hellblau, Kaesten Hellgrau, Links Blau. */

:root {
  --tm-navy:   #0F3750;
  --tm-blue:   #32AFDC;
  --tm-link:   #0070C0;
  --tm-box:    #F2F2F2;
  --tm-green:  #78B950;
  --tm-orange: #F59B23;
  --tm-rand:   #D8D8D8;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: #FFFFFF;
  color: #000000;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  line-height: 1.45;
}

h1, h2, h3, h4 {
  color: var(--tm-navy);
  font-family: Arial, Helvetica, sans-serif;
  margin: 0 0 12px 0;
}
h1 { font-size: 26px; margin-bottom: 14px; }
h2 { font-size: 19px; margin-top: 28px; }
h3 { font-size: 16px; margin-top: 22px; }

a { color: var(--tm-link); }
a:hover { text-decoration: none; }

/* --- Kopfbereich: Logo links, Menue waagerecht ------------------------- */
header {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 14px 28px;
}
header .logo { height: 38px; width: auto; display: block; }

nav ul {
  display: flex;
  gap: 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
nav a {
  color: var(--tm-navy);
  text-decoration: none;
  font-weight: bold;
  padding-bottom: 3px;
  border-bottom: 3px solid transparent;
}
nav a:hover { color: var(--tm-link); border-bottom-color: var(--tm-blue); }
nav a.hier { border-bottom-color: var(--tm-blue); }

.akzent { height: 4px; background: linear-gradient(90deg, #32AFDC, #78B950); }

main { padding: 24px 28px 60px 28px; max-width: 1180px; }

/* --- Meldungen --------------------------------------------------------- */
.meldung {
  background: var(--tm-box);
  border-left: 4px solid var(--tm-green);
  padding: 10px 14px;
  margin-bottom: 18px;
}
.hinweis {
  background: var(--tm-box);
  border-left: 4px solid var(--tm-orange);
  padding: 10px 14px;
  margin-bottom: 20px;
  font-size: 14px;
}

/* --- Suche ------------------------------------------------------------- */
/* Der Suchschlitz ist auf dieser Seite das Wichtigste - er bekommt einen
   eigenen Kasten, damit er nicht zwischen Titel und Liste verschwindet. */
.suche {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  background: var(--tm-box);
  padding: 14px 16px;
  border-radius: 4px;
}
.suche input[type=search] {
  flex: 1 1 auto;
  max-width: 560px;
  padding: 8px 10px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}
.suche input[type=search]:focus {
  outline: 3px solid var(--tm-blue);
  outline-offset: 1px;
  border-color: var(--tm-navy);
}
.zaehler { color: #555; font-size: 14px; margin: 0 0 20px 0;
            max-width: 72ch; line-height: 1.55; }

/* --- Schaltflaechen ---------------------------------------------------- */
.knopf, button.knopf, a.knopf {
  display: inline-block;
  background: var(--tm-navy);
  color: #FFFFFF;
  border: 1px solid var(--tm-navy);
  padding: 8px 16px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  text-decoration: none;
  cursor: pointer;
}
.knopf:hover { background: #15496B; }
.knopf.hell {
  background: #FFFFFF;
  color: var(--tm-navy);
}
.knopf.hell:hover { background: var(--tm-box); }

/* --- Baumliste --------------------------------------------------------- */
.baum { border-top: 1px solid var(--tm-rand); }
.baum details {
  border-bottom: 1px solid var(--tm-rand);
}
.baum details { border-bottom: 1px solid #ECECEC; }
.baum summary {
  padding: 9px 10px;
  cursor: pointer;
  list-style: none;
}
.baum summary::-webkit-details-marker { display: none; }
.baum summary::before {
  content: "+";
  display: inline-block;
  width: 16px;
  color: var(--tm-navy);
  font-weight: bold;
}
.baum details[open] > summary::before { content: "\2013"; }
.baum summary.leer::before { content: ""; }
.baum summary:hover { background: var(--tm-box); }
/* Ohne Unterstrich: 50 Zeilen mit unterstrichenen Namen sind eine Wand.
   Fett, dunkelblau und in einer Zeile, die sich beim Darueberfahren
   einfaerbt - beim Tastaturfokus und beim Zeigen kommt der Unterstrich
   zurueck, damit nicht allein die Farbe den Link ausmacht. */
.baum .firmenname {
  font-weight: bold;
  color: var(--tm-navy);
  text-decoration: none;
}
.baum .firmenname:hover,
.baum .firmenname:focus-visible { text-decoration: underline; }
.baum .personen a { color: #000000; text-decoration: none; }
.baum .personen a:hover,
.baum .personen a:focus-visible { text-decoration: underline; }
.baum .nebeninfo { color: #555; font-size: 14px; }
.baum .anzahl { color: #5A5A5A; font-size: 14px; }

.baum .personen { list-style: none; margin: 0; padding: 0 0 8px 26px; }
.baum .personen li { padding: 4px 10px; }
.baum .personen li:hover { background: var(--tm-box); }

.getroffen { background: #EAF7FC; }

/* --- Blaettern --------------------------------------------------------- */
.blaettern { margin-top: 20px; display: flex; gap: 14px; align-items: center; }
.blaettern .seite { color: #555; font-size: 14px; }

/* --- Formular (Maske "Eingabe") --------------------------------------- */
.maske { max-width: 700px; }
.zeile { display: flex; gap: 14px; margin-bottom: 7px; }
.feld { flex: 1 1 0; display: flex; align-items: center; gap: 10px; }
.feld label {
  flex: 0 0 150px;
  font-size: 14px;
  color: #333;
  text-align: right;
}
.feld input[type=text], .feld textarea, .feld input[type=number] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 5px 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background: #FFFFFF;
}
.feld input:focus, .feld textarea:focus {
  outline: 3px solid var(--tm-blue);
  outline-offset: 1px;
  border-color: var(--tm-navy);
}
.feld textarea { min-height: 54px; resize: vertical; }

details.weitere { margin-top: 24px; }
details.weitere > summary {
  cursor: pointer;
  color: var(--tm-navy);
  font-weight: bold;
  padding: 8px 0;
}

.aktionen {
  margin-top: 24px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
}

/* --- Kaesten rechts / Zusatzangaben ----------------------------------- */
.spalten { display: flex; gap: 32px; align-items: flex-start; flex-wrap: wrap; }
.spalten > .links { flex: 1 1 640px; min-width: 0; }
.spalten > .rechts { flex: 0 1 320px; min-width: 260px; }

.kasten {
  background: var(--tm-box);
  padding: 14px 16px;
  margin-bottom: 18px;
}
.kasten h3 { margin-top: 0; }
.kasten ul { margin: 0; padding-left: 18px; }
.kasten p { margin: 6px 0; }
.kasten .klein { font-size: 14px; color: #555; }

table.tabelle { border-collapse: collapse; width: 100%; font-size: 15px; }
table.tabelle th {
  text-align: left;
  border-bottom: 2px solid var(--tm-navy);
  padding: 8px 8px;
  color: var(--tm-navy);
  /* Ein klebender Kopf OHNE eigenen Hintergrund laesst die Zeilen
     durchscheinen - weiss ist hier Pflicht, keine Kosmetik. */
  background: #FFFFFF;
  position: sticky;
  top: 0;
  z-index: 2;
}
table.tabelle tbody tr:nth-child(even) td { background: #FAFAFA; }
table.tabelle td {
  border-bottom: 1px solid var(--tm-rand);
  padding: 6px 8px;
  vertical-align: top;
}

.notiz-neu textarea {
  width: 100%;
  min-height: 70px;
  padding: 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
}

.marke {
  display: inline-block;
  background: #FFFFFF;
  border: 1px solid var(--tm-blue);
  color: var(--tm-navy);
  padding: 2px 8px;
  margin: 0 5px 5px 0;
  font-size: 14px;
}

footer {
  border-top: 1px solid var(--tm-rand);
  padding: 14px 28px;
  color: #666;
  font-size: 14px;
}

/* --- Stichwortbaum ----------------------------------------------------- */
.stichwortbaum, .stichwortbaum ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.stichwortbaum ul { padding-left: 22px; }
.stichwortbaum > li { border-top: 1px solid var(--tm-rand); }
.stichwortbaum > li:last-child { border-bottom: 1px solid var(--tm-rand); }

.zweig {
  display: flex;
  gap: 14px;
  align-items: baseline;
  padding: 7px 8px;
  cursor: pointer;
  list-style: none;
}
.zweig::-webkit-details-marker { display: none; }
.zweig::before {
  content: "+";
  display: inline-block;
  width: 14px;
  color: var(--tm-navy);
  font-weight: bold;
}
details.ast[open] > .zweig::before { content: "\2013"; }
.zweig:hover { background: var(--tm-box); }
.zweig .begriff { font-weight: bold; color: var(--tm-navy); }
.zweig .zahlen { color: #555; font-size: 14px; flex: 1 1 auto; }

.inhalt { padding: 0 0 10px 22px; }
.wege { margin: 2px 0 8px 0; font-size: 14px; }

details.pflege > summary {
  cursor: pointer;
  color: var(--tm-link);
  font-size: 14px;
  padding: 2px 0;
  width: 7em;
}
.pflegekasten {
  background: var(--tm-box);
  padding: 12px 14px;
  margin: 6px 0 12px 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
}
.pflegekasten form {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pflegekasten label {
  flex: 0 0 150px;
  font-size: 14px;
  color: #333;
}
.pflegekasten input[type=text], .pflegekasten select {
  padding: 4px 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  min-width: 230px;
  max-width: 100%;
  background: #FFFFFF;
}
.knopf.loeschen { color: #8A2A2A; border-color: #C08080; }
.knopf.loeschen:hover { background: #F6EAEA; }

.leerliste { list-style: none; padding-left: 0; columns: 2; }
.leerliste li { padding: 3px 0; break-inside: avoid; }

/* --- Massenzuweisung in der Trefferliste ------------------------------- */
.massen {
  background: var(--tm-box);
  padding: 12px 14px;
  margin-bottom: 18px;
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
}
.massen select {
  padding: 5px 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  min-width: 260px;
  background: #FFFFFF;
}

/* --- Stichwortmarken an der Adresse ------------------------------------ */
.marke a { color: var(--tm-navy); text-decoration: none; }
.marke a:hover { text-decoration: underline; }
.marke-weg {
  background: none;
  border: none;
  color: #8A2A2A;
  cursor: pointer;
  font-size: 14px;
  padding: 0 0 0 4px;
  line-height: 1;
}
.marke-weg:hover { color: #000; }

.verschieben {
  background: var(--tm-box);
  padding: 12px 14px;
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  max-width: 900px;
}
.verschieben select {
  padding: 5px 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  min-width: 260px;
  background: #FFFFFF;
}

/* --- Recherche --------------------------------------------------------- */
.recherche { max-width: 980px; margin-bottom: 26px; }
.bedingung {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  padding: 4px 0;
}
.bedingung.kopf { margin-top: 14px; }
.bedingung > label {
  flex: 0 0 110px;
  font-size: 14px;
  color: #333;
  text-align: right;
}
.bedingung select, .bedingung input[type=text] {
  padding: 5px 7px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background: #FFFFFF;
}
.bedingung select { max-width: 320px; }
.bedingung input[type=text] { flex: 1 1 200px; max-width: 320px; }
.bedingung select:focus, .bedingung input:focus {
  outline: 3px solid var(--tm-blue);
  outline-offset: 1px;
  border-color: var(--tm-navy);
}

.spaltenwahl {
  display: flex;
  gap: 26px;
  flex-wrap: wrap;
  background: var(--tm-box);
  padding: 14px 16px;
}
.spaltengruppe { display: flex; flex-direction: column; gap: 3px; }
.spaltengruppe strong { color: var(--tm-navy); margin-bottom: 4px; }
.spaltengruppe label { font-size: 14px; font-weight: normal; }

/* --- Dubletten --------------------------------------------------------- */
.kasten.dublette { border-left: 4px solid var(--tm-rand); }
.kasten.dublette.hoch   { border-left-color: var(--tm-orange); }
.kasten.dublette.mittel { border-left-color: var(--tm-blue); }
.kasten.dublette .stufe {
  font-weight: normal;
  font-size: 14px;
  color: #555;
  margin-left: 10px;
}
.kasten.dublette table.tabelle { background: #FFFFFF; }

/* --- Sitzungsleiste im Kopf -------------------------------------------- */
header .sitzung {
  margin-left: auto;
  display: flex;
  gap: 16px;
  align-items: center;
  font-size: 14px;
}
header .sitzung a { color: var(--tm-navy); text-decoration: none; }
header .sitzung a:hover { color: var(--tm-link); text-decoration: underline; }
header .sitzung a.hier { border-bottom: 3px solid var(--tm-blue); }
header .sitzung form { margin: 0; }
button.abmelden {
  background: none;
  border: none;
  color: var(--tm-link);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  cursor: pointer;
  padding: 0;
}
button.abmelden:hover { text-decoration: underline; }

/* --- Anmeldeseiten ------------------------------------------------------ */
.anmeldung { max-width: 420px; }
.anmeldung label {
  display: block;
  font-size: 14px;
  color: #333;
  margin-bottom: 3px;
}
.anmeldung input[type=email],
.anmeldung input[type=password],
.anmeldung input[type=text] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 15px;
  background: #FFFFFF;
}
.anmeldung input:focus {
  outline: 3px solid var(--tm-blue);
  outline-offset: 1px;
  border-color: var(--tm-navy);
}
.anmeldung p { margin: 0 0 14px 0; }

/* --- Kontenliste -------------------------------------------------------- */
form.kontozeile {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 0;
}
form.kontozeile input[type=text], form.kontozeile input[type=email],
form.kontozeile select {
  padding: 4px 6px;
  border: 1px solid var(--tm-rand);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 14px;
  background: #FFFFFF;
}
form.kontozeile input { min-width: 150px; }
form.kontozeile label { font-size: 14px; font-weight: normal; }

/* Stillgelegte Konten in der Kontenuebersicht. Vorher stand das als
   |safe-Stilattribut in der Vorlage - ungefaehrlich, weil der Wert fest
   war, aber eine Einladung zum Nachmachen mit einem Wert, der es nicht
   ist. Befund N5 der Sicherheitspruefung vom 06.11.2026. */
tr.stillgelegt { color: #5A5A5A; }

/* =======================================================================
   Zugaenglichkeit und kleine Schirme
   -----------------------------------------------------------------------
   Nachtrag vom 06.11.2026. Bis hierher hatte das Stylesheet KEINE einzige
   Media Query - die Oberflaeche war fuer einen breiten Bildschirm gebaut
   und auf dem Handy unbenutzbar. Die Regeln unten fassen deshalb bewusst
   geteilte Klassen an (nav, .zeile, .feld, table.tabelle, header): das ist
   Absicht, damit sich alle Seiten gleich verhalten, und kein versehentlich
   gewonnener Kaskaden-Konflikt - es gibt oben nichts, was sie ueberschreiben
   koennten. [Beobachtung 0133]
   ======================================================================= */

/* --- Wo bin ich gerade? ------------------------------------------------
   Eine einzige Regel fuer alles Bedienbare. :focus-visible zeigt den Ring
   nur bei Tastaturbedienung, nicht nach einem Mausklick - deshalb stoert
   er niemanden und fehlt trotzdem nie. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--tm-blue);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Sprungmarke: der erste Tabstopp jeder Seite. Ohne sie muss sich jemand,
   der mit der Tastatur arbeitet, auf jeder Seite durch acht Menuepunkte
   hangeln, bevor er beim Inhalt ankommt. Sichtbar wird sie nur, wenn sie
   den Fokus hat. */
.sprungmarke {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--tm-navy);
  color: #FFFFFF;
  padding: 10px 16px;
  text-decoration: none;
}
.sprungmarke:focus {
  left: 8px;
  top: 8px;
}

/* --- Lange Tabellen lesbar halten -------------------------------------
   Der Spaltenkopf bleibt stehen, sobald die Liste laenger ist als der
   Schirm. Bei 7.347 Adressen ist das der Unterschied zwischen "vierte
   Spalte, was war das noch" und Weiterlesen. */
table.tabelle tbody tr:hover td { background: #F7FBFD; }

/* --- Kleine Schirme ----------------------------------------------------
   Zwei Stufen: Tablet (bis 900) nimmt dem Kopfbereich die Breite, Handy
   (bis 600) stellt Formulare und das Menue untereinander. */
@media (max-width: 900px) {
  main { padding: 18px 16px 48px 16px; }
  header { flex-wrap: wrap; gap: 10px 18px; padding: 12px 16px; }
  nav { order: 3; width: 100%; }
  nav ul { flex-wrap: wrap; gap: 4px 18px; }
  .spalten { gap: 20px; }
  .spalten > .rechts { flex: 1 1 100%; }
  .recherche { max-width: none; }
}

@media (max-width: 600px) {
  h1 { font-size: 21px; }
  /* Beschriftung ueber das Feld statt daneben: nebeneinander bleiben auf
     375 px von beidem nur Stummel uebrig. */
  .zeile { flex-direction: column; gap: 0; }
  .feld { flex: none; flex-direction: column; align-items: stretch;
          gap: 3px; margin-bottom: 10px; }
  /* `flex: none` ist hier das Entscheidende, nicht `width`. In einer
     Spalte wird aus `flex: 0 0 150px` eine HOEHE von 150 Pixeln - die
     Beschriftung stand dann einen halben Daumen ueber ihrem Feld. Nur
     aufgefallen, weil ich die Adressmaske mit der Liste verglichen habe;
     fuer sich allein sah jede Seite plausibel aus. [Beobachtung 0133] */
  .feld label { flex: none; width: auto; text-align: left; }
  .bedingung { flex-direction: column; align-items: stretch; }
  .bedingung select, .bedingung input[type=text] { max-width: none; }
  .suche { flex-wrap: wrap; }
  .suche input[type=search] { flex: 1 1 100%; }
  .spaltenwahl { grid-template-columns: 1fr 1fr; }
  .leerliste { columns: 1; }
  .massen, .verschieben, form.kontozeile { flex-direction: column;
                                           align-items: stretch; }
  /* Breite Tabellen duerfen seitlich rollen, statt die Seite zu sprengen.
     -webkit-overflow-scrolling fuer aelteres iOS. */
  .tabellenrahmen { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tabellenrahmen table.tabelle { min-width: 620px; }
  /* Im Rollrahmen klebt nichts: `overflow-x: auto` erzeugt auch senkrecht
     einen Rollbehaelter, und `top: 0` meint dann dessen Kante statt der
     des Schirms. Lieber ehrlich abschalten als scheinbar anbieten. */
  .tabellenrahmen table.tabelle th { position: static; }
  /* Finger statt Mauszeiger: 44 px ist die uebliche Mindestgroesse. */
  .knopf, button.knopf, a.knopf { min-height: 44px; padding: 11px 16px; }
  .baum summary, .baum .personen li { padding-top: 9px; padding-bottom: 9px; }
  .zweig { padding-top: 9px; padding-bottom: 9px; }
}

/* --- Wer Bewegung nicht vertraegt ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --- Druck -------------------------------------------------------------
   Eine Adressliste wird ausgedruckt. Dann stoeren Menue, Fusszeile und
   Schaltflaechen nur. */
@media print {
  header, nav, footer, .aktionen, .suche, .blaettern { display: none; }
  main { padding: 0; max-width: none; }
  a { color: #000; text-decoration: none; }
  table.tabelle th { position: static; }
}