/* Renueva App. Alle Werte aus _Claude/01_CI.md: fuenf Farben, eine Schrift,
   Schriftgradskala, Abstandsleiter in Vielfachen von 4, keine Rundungen.
   Gruen nie in Schrift, nur als kleiner Punkt. */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-var.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../fonts/archivo-latin-ext-var.woff2') format('woff2');
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Farben */
  --papier: #FBFAF8;
  --sand: #E1DCD3;
  --warmgrau: #5F594D;
  --ink: #141312;
  --gruen: #365D48;
  --erfolg: #4B7756;
  --fehler: #B93C3B;
  /* Abstandsleiter */
  --a-4xs: 4px; --a-3xs: 8px; --a-2xs: 12px; --a-xs: 16px; --a-s: 24px;
  --a-m: 32px; --a-l: 48px; --a-xl: 64px; --a-2xl: 96px;
}

* { box-sizing: border-box; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: Archivo, system-ui, sans-serif;
  font-size: 16px; line-height: 1.7; font-weight: 400;
  color: var(--warmgrau);
  background: var(--papier);
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--sand); color: var(--ink); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--sand); }
a:hover { text-decoration-color: var(--ink); }

/* Typografie nach Skala */
h1 { font-size: clamp(34px, 3.4vw, 48px); line-height: 1.12; letter-spacing: -.02em; font-weight: 300; font-stretch: 118%; color: var(--ink); margin: 0 0 var(--a-3xs); }
h1 strong, h1 em { font-style: normal; font-weight: 500; }
h2 { font-size: clamp(28px, 2.6vw, 36px); line-height: 1.2; letter-spacing: -.02em; font-weight: 300; font-stretch: 118%; color: var(--ink); margin: var(--a-l) 0 var(--a-3xs); }
.eyebrow { font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--warmgrau); margin: 0 0 var(--a-2xs); }
.leise { font-size: 14px; line-height: 1.6; color: var(--warmgrau); }
.caption { font-size: 13px; line-height: 1.5; color: var(--warmgrau); }
p { margin: 0 0 var(--a-xs); }

/* Kopf: Wortmarke links, Reiter in der Mitte, Konto rechts. Der aktive
   Reiter traegt eine Ink-Linie auf der Kopfkante, sonst nichts. */
header.kopf {
  display: grid; grid-template-columns: auto 1fr auto; align-items: stretch; gap: var(--a-l);
  padding: 0 var(--a-m); border-bottom: 1px solid var(--sand); background: var(--papier);
}
/* Wortmarke: dunkle Variante auf Papier, 16 px hoch wie auf der Website, nie strecken oder faerben */
header.kopf .marke { display: inline-flex; align-items: center; text-decoration: none; padding: var(--a-xs) 0; }
header.kopf .marke img { height: 16px; width: auto; display: block; }
nav.reiter { display: flex; gap: var(--a-m); font-size: 14px; letter-spacing: .10em; text-transform: uppercase; font-weight: 500; }
nav.reiter a { display: inline-flex; align-items: center; color: var(--warmgrau); text-decoration: none; padding: var(--a-xs) 0; border-bottom: 1px solid transparent; margin-bottom: -1px; }
nav.reiter a:hover { color: var(--ink); }
nav.reiter a[aria-current] { color: var(--ink); border-bottom-color: var(--ink); }
nav.benutzer { display: flex; align-items: center; gap: var(--a-xs); font-size: 14px; color: var(--warmgrau); }
nav.benutzer a { color: var(--warmgrau); text-decoration: none; }
nav.benutzer a:hover, nav.benutzer a[aria-current] { color: var(--ink); }
nav.benutzer form { margin: 0; }
.hinweiskasten { border: 1px solid var(--ink); padding: var(--a-s); margin-bottom: var(--a-m); }
.rolleform { display: flex; gap: var(--a-3xs); margin: 0; }
.rolleform select { font: inherit; font-size: 14px; color: var(--ink); padding: var(--a-4xs) var(--a-3xs); border: 1px solid var(--sand); border-radius: 0; background: var(--papier); }
.rolleform button { padding: var(--a-4xs) var(--a-3xs); font-size: 12px; }
.hinweiskasten p { margin-bottom: var(--a-2xs); }
.hinweiskasten strong { font-weight: 500; color: var(--ink); }
nav.benutzer .abmelden { all: unset; cursor: pointer; color: var(--warmgrau); font-size: 14px; }
nav.benutzer .abmelden:hover { color: var(--ink); }
footer.fuss { display: flex; justify-content: space-between; gap: var(--a-s); max-width: 64rem; margin: var(--a-xl) auto 0; padding: var(--a-s) var(--a-m); border-top: 1px solid var(--sand); font-size: 13px; line-height: 1.5; color: var(--warmgrau); }
footer.fuss a { color: var(--warmgrau); }
main.breit + footer.fuss { max-width: none; }

/* Objektformular: zwei Spalten, zusammengehoerige Felder nebeneinander */
.formraster { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--a-xs) var(--a-s); }
.formraster .feld { grid-column: span 3; }
.formraster .feld label { margin-top: 0; }
.formraster .feld--strasse { grid-column: span 6; }
.formraster .feld--plz { grid-column: span 2; }
.formraster .feld--ort { grid-column: span 4; }
.formraster .feld--wohnflaeche, .formraster .feld--zimmer, .formraster .feld--baujahr { grid-column: span 2; }
.formraster .feld--portal_link, .formraster .feld--notiz { grid-column: span 6; }
.formraster select { width: 100%; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); padding: var(--a-3xs) var(--a-2xs); border: 1px solid var(--sand); border-radius: 0; background: var(--papier); }
.formraster select:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
td.ueberfaellig { color: var(--fehler); }

main { max-width: 64rem; margin: var(--a-l) auto; padding: 0 var(--a-m); }
main.breit { max-width: none; }
.seitenkopf { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: var(--a-3xs) var(--a-s); margin-bottom: var(--a-m); }
.seitenkopf h1, .seitenkopf p { margin: 0; }

/* Formulare */
label { display: block; font-size: 14px; line-height: 1.6; color: var(--warmgrau); margin: var(--a-xs) 0 var(--a-4xs); }
input, textarea {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink);
  padding: var(--a-3xs) var(--a-2xs); border: 1px solid var(--sand); border-radius: 0; background: var(--papier);
}
input::placeholder, textarea::placeholder { color: var(--warmgrau); opacity: .7; }
input:focus, textarea:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
button, .knopf {
  font: inherit; font-size: 14px; line-height: 1.6; letter-spacing: .10em; text-transform: uppercase; font-weight: 500;
  padding: var(--a-3xs) var(--a-xs); border: 1px solid var(--ink); border-radius: 0; cursor: pointer;
  background: var(--ink); color: var(--papier);
}
button:hover { background: var(--warmgrau); border-color: var(--warmgrau); }
button.sekundaer { background: transparent; color: var(--ink); border-color: var(--sand); }
button.sekundaer:hover { background: transparent; border-color: var(--ink); }
.fehler { color: var(--fehler); font-size: 14px; margin-top: var(--a-2xs); }
.hinweis { color: var(--fehler); }

/* Anmeldung */
.karte { border: 1px solid var(--sand); padding: var(--a-m); max-width: 26rem; margin: var(--a-2xl) auto; }
.karte__marke { display: block; margin-bottom: var(--a-s); }
.karte__marke img { height: 20px; width: auto; display: block; }
.karte button { margin-top: var(--a-s); width: 100%; }

/* Pipeline */
.pipeline { display: grid; grid-template-columns: repeat(4, minmax(16rem, 1fr)); gap: var(--a-m); overflow-x: auto; padding-bottom: var(--a-xs); }
.spalte h2 { font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; font-stretch: 100%; color: var(--warmgrau); margin: 0 0 var(--a-2xs); }
.spalte h2 .zahl { font-weight: 400; margin-left: var(--a-3xs); font-variant-numeric: tabular-nums; }
.objektkarte { display: block; border: 1px solid var(--sand); padding: var(--a-s); margin-bottom: var(--a-2xs); text-decoration: none; color: var(--warmgrau); }
.objektkarte:hover { border-color: var(--ink); }
.objektkarte strong { display: block; font-weight: 500; color: var(--ink); margin-bottom: var(--a-4xs); }
.objektkarte .meta { display: block; font-size: 14px; line-height: 1.6; }
.objektkarte.ueberfaellig .meta:last-child { color: var(--fehler); }
.objektkarte.ueberfaellig .meta:last-child::before { content: ''; display: inline-block; width: 6px; height: 6px; background: var(--fehler); margin-right: var(--a-3xs); vertical-align: middle; }
.leer { color: var(--warmgrau); font-size: 14px; margin: 0; }

/* Objektseite */
.zweispaltig { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a-l); margin-top: var(--a-l); }
.zweispaltig h2 { font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; font-stretch: 100%; color: var(--warmgrau); margin: var(--a-m) 0 var(--a-2xs); }
.zweispaltig section > h2:first-child { margin-top: 0; }
.zeile { margin: 0 0 var(--a-3xs); }
.punkt { display: inline-block; width: 8px; height: 8px; margin-right: var(--a-2xs); background: var(--sand); vertical-align: middle; }
.punkt.angefordert { background: var(--warmgrau); }
.punkt.erhalten { background: var(--erfolg); }
.aktionen { display: flex; flex-wrap: wrap; gap: var(--a-3xs); align-items: flex-start; margin: var(--a-s) 0 0; }
.aktionen form { margin: 0; }
details.beenden { flex-basis: 100%; margin-top: var(--a-3xs); }
details.beenden summary { cursor: pointer; color: var(--warmgrau); font-size: 14px; padding: var(--a-3xs) 0; list-style: none; }
details.beenden summary::-webkit-details-marker { display: none; }
details.beenden summary::before { content: '+'; display: inline-block; width: var(--a-xs); }
details[open].beenden summary::before { content: '−'; }
details.beenden form { max-width: 32rem; padding: var(--a-s); border: 1px solid var(--sand); }
details.beenden label { margin-top: 0; }
details.beenden .knoepfe { margin-top: var(--a-xs); }
button.unterlage { all: unset; cursor: pointer; display: block; color: var(--ink); }
button.unterlage:hover .punkt { outline: 1px solid var(--ink); outline-offset: 2px; }
button.unterlage .leise { margin-left: var(--a-3xs); }
form.zeile { margin: 0 0 var(--a-3xs); }
textarea.anschreiben { line-height: 1.6; }
.notizform { display: flex; gap: var(--a-3xs); align-items: flex-start; margin-bottom: var(--a-s); }
.notizform textarea { flex: 1; }

/* Vorschlaege */
.vorschlag { display: grid; grid-template-columns: 1fr auto; gap: var(--a-xs) var(--a-m); align-items: center; border: 1px solid var(--sand); padding: var(--a-s); margin-bottom: var(--a-2xs); }
.vorschlag:has(img) { grid-template-columns: auto 1fr auto; }
.vorschlag img { width: 96px; height: 72px; object-fit: cover; display: block; }
.vorschlag strong { display: block; font-weight: 500; color: var(--ink); }
.vorschlag .meta { display: block; font-size: 14px; line-height: 1.6; color: var(--warmgrau); }
.vorschlag.leise strong { font-weight: 400; color: var(--warmgrau); }
.knoepfe { display: flex; flex-wrap: wrap; gap: var(--a-3xs); }
.knoepfe form { margin: 0; }
h2.abschnitt { font-size: 12px; line-height: 1.2; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; font-stretch: 100%; color: var(--warmgrau); margin: var(--a-l) 0 var(--a-2xs); }
code { font-size: 14px; border: 1px solid var(--sand); padding: 0 var(--a-4xs); }

/* Kontakte */
.suche { display: flex; gap: var(--a-3xs); align-items: stretch; margin-bottom: var(--a-m); }
.suche input { flex: 1; }
.suche select, .verknuepfen select, .kontaktform select {
  font: inherit; font-size: 14px; line-height: 1.6; color: var(--ink); padding: var(--a-3xs) var(--a-2xs);
  border: 1px solid var(--sand); border-radius: 0; background: var(--papier); min-width: 10rem;
}
.suche select:focus, .verknuepfen select:focus, .kontaktform select:focus { outline: 1px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.suche button { white-space: nowrap; }
table.liste { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
table.liste th { text-align: left; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--warmgrau); padding: 0 var(--a-2xs) var(--a-3xs) 0; border-bottom: 1px solid var(--sand); }
table.liste td { padding: var(--a-2xs) var(--a-2xs) var(--a-2xs) 0; border-bottom: 1px solid var(--sand); vertical-align: top; color: var(--ink); }
table.liste td.zahl { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }
table.liste th:last-child { text-align: right; padding-right: 0; }
.kontaktform label { margin-top: var(--a-2xs); }
.kontaktform label.haken { display: flex; align-items: center; gap: var(--a-3xs); margin-top: var(--a-xs); color: var(--ink); }
.kontaktform label.haken input { width: auto; margin: 0; accent-color: var(--ink); }
.kontaktform .caption { display: block; margin-top: var(--a-4xs); }
.kontaktform select { width: 100%; }
a.knopf { display: inline-block; text-decoration: none; }
a.knopf.sekundaer { background: transparent; color: var(--ink); border-color: var(--sand); }
a.knopf.sekundaer:hover { border-color: var(--ink); }
.verknuepfen { display: flex; gap: var(--a-3xs); margin-top: var(--a-xs); }
.verknuepfen select { flex: 1; }

/* Mobil: Leiter ab l eine Stufe runter. Kopf in zwei Zeilen: Wortmarke und
   Konto oben, Reiter darunter als eigene, bei Bedarf seitlich scrollbare Zeile. */
@media (max-width: 56rem) {
  main { margin: var(--a-m) auto; padding: 0 var(--a-xs); }
  header.kopf { grid-template-columns: 1fr auto; gap: 0 var(--a-xs); padding: 0 var(--a-xs); }
  header.kopf .marke { padding: var(--a-2xs) 0; }
  nav.benutzer { grid-column: 2; grid-row: 1; }
  nav.reiter { grid-column: 1 / -1; grid-row: 2; gap: var(--a-s); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  nav.reiter::-webkit-scrollbar { display: none; }
  nav.reiter a { padding: var(--a-3xs) 0 var(--a-2xs); white-space: nowrap; }
  .formraster { grid-template-columns: 1fr 1fr; }
  .formraster .feld, .formraster .feld--strasse, .formraster .feld--ort, .formraster .feld--portal_link, .formraster .feld--notiz { grid-column: span 2; }
  .formraster .feld--plz, .formraster .feld--wohnflaeche, .formraster .feld--zimmer, .formraster .feld--baujahr { grid-column: span 1; }
  .seitenkopf .knopf { width: 100%; text-align: center; }
  table.liste { display: block; overflow-x: auto; }
  footer.fuss { flex-direction: column; gap: var(--a-3xs); padding: var(--a-s) var(--a-xs); }
  .pipeline { grid-template-columns: repeat(4, 16rem); gap: var(--a-s); }
  .zweispaltig { grid-template-columns: 1fr; gap: var(--a-m); }
  .vorschlag, .vorschlag:has(img) { grid-template-columns: 1fr; }
  .vorschlag img { width: 100%; height: 160px; }
  .karte { margin: var(--a-xl) auto; padding: var(--a-s); }
}

/* Kontaktbuch */
.zweispaltig.breit { grid-template-columns: 3fr 2fr; }
.formraster .feld--anrede { grid-column: span 2; }
.formraster .feld--vorname, .formraster .feld--nachname { grid-column: span 2; }
.formraster .feld--firma { grid-column: span 4; }
.formraster .feld--position { grid-column: span 2; }
.formraster .feld--rolle { grid-column: span 2; }
.formraster .feld--email { grid-column: span 4; }
.formraster .feld--telefon, .formraster .feld--mobil { grid-column: span 3; }
.formraster .feld--whatsapp { grid-column: span 6; }
.formraster .feld--herkunft, .formraster .feld--unternehmen { grid-column: span 3; }
.formraster .feld--gruppen, .formraster .feld--freigaben { grid-column: span 3; }
.formraster .feld .label { display: block; font-size: 14px; line-height: 1.6; color: var(--warmgrau); margin-bottom: var(--a-4xs); }
.formraster .feld--voll { grid-column: span 6; margin: 0; }
.formraster label.haken { display: flex; align-items: center; gap: var(--a-3xs); color: var(--ink); margin: 0; }
.formraster label.haken input { width: auto; margin: 0; accent-color: var(--ink); }
.haken-liste ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--a-3xs) var(--a-xs); }
.haken-liste label { display: inline-flex; align-items: center; gap: var(--a-4xs); margin: 0; color: var(--ink); font-size: 14px; }
.haken-liste input { width: auto; margin: 0; accent-color: var(--ink); }
.gruppen { display: flex; flex-wrap: wrap; gap: var(--a-3xs); align-items: center; }
.gruppen form.gruppe { display: inline-flex; align-items: center; gap: var(--a-3xs); margin: 0; border: 1px solid var(--sand); padding: var(--a-4xs) var(--a-3xs) var(--a-4xs) var(--a-2xs); font-size: 14px; }
.gruppen form.gruppe a { text-decoration: none; }
.gruppen button.loeschen { all: unset; cursor: pointer; color: var(--warmgrau); padding: 0 var(--a-4xs); line-height: 1; }
.gruppen button.loeschen:hover { color: var(--fehler); }
.gruppen form.gruppe-neu { display: inline-flex; gap: var(--a-3xs); margin: 0 0 0 var(--a-xs); }
.gruppen form.gruppe-neu input { width: 14rem; }
@media (max-width: 56rem) {
  .formraster .feld--anrede, .formraster .feld--vorname, .formraster .feld--nachname, .formraster .feld--firma, .formraster .feld--position,
  .formraster .feld--rolle, .formraster .feld--email, .formraster .feld--telefon, .formraster .feld--mobil, .formraster .feld--herkunft,
  .formraster .feld--unternehmen, .formraster .feld--gruppen, .formraster .feld--freigaben, .formraster .feld--whatsapp, .formraster .feld--voll { grid-column: span 2; }
  .gruppen form.gruppe-neu { margin: var(--a-3xs) 0 0; width: 100%; }
  .gruppen form.gruppe-neu input { flex: 1; width: auto; }
}

/* Blaettern zwischen Seiten einer Liste. Zurueck und Weiter stehen immer an
   derselben Stelle, auch wenn eine Richtung nicht geht: sonst springt der
   Seitenstand beim Blaettern hin und her. */
.blaettern {
  display: flex; align-items: baseline; gap: var(--a-s);
  margin-top: var(--a-s);
  padding-top: var(--a-2xs);
  border-top: 1px solid var(--sand);
  font-size: 14px;
}
.blaettern .stand { color: var(--warmgrau); font-variant-numeric: tabular-nums; }
.blaettern .aus { color: var(--sand); }
.blaettern a { font-weight: 500; }