/* ============================================================
   GHP Upload-Vorzimmer — GHP-Design-System v2.0 (Petrol/Lime)
   Kanonische Referenz: SecondBrain/Skills/Shared/GHP-Design/
   design-system/01–07. Token-Schicht manuell synchron gehalten
   mit Onboarding/app/static/css/style.css (Sync: 2026-07-28).
   Abweichung: color-mix()-Werte von dort sind hier als feste
   Hex-Werte eingebrannt (oeffentliches Portal, unbekannte
   Browser). Bewusst EIN externes Stylesheet ('self'), damit die
   gehaertete CSP ohne inline-style-Attribute auskommt.
   Marken-Fonts lizenziert, nie in oeffentliche Repos; ohne die
   woff2 greifen die Fallback-Stacks (Georgia bzw. Arial).
   Klassennamen sind der stabile Vertrag mit den Templates.
   ============================================================ */

/* --- Webfonts --- */
@font-face { font-family: 'TT Ramillas'; src: url('fonts/tt_ramillas_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TT Ramillas'; src: url('fonts/tt_ramillas_medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('fonts/metrosans_regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('fonts/metrosans_medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Metro Sans'; src: url('fonts/metrosans_semibold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  /* Basisfarben */
  --color-mittelpetrol: #01545C;
  --color-lime:         #D9F80A;
  --color-lime-soft:    #F9FED6;
  --color-hellgrau:     #F3F2F1;
  --color-weiss:        #FFFFFF;

  /* Status-Farben: nur UI-Feedback, nie Marken-Akzent */
  --color-success: #2F7D62;  --color-success-soft: #E4F1EB;
  --color-warning: #B7791F;  --color-warning-soft: #FBEFD6;
  --color-error:   #B23A2E;  --color-error-soft:   #F7E2DE;
  --color-info: var(--color-mittelpetrol); --color-info-soft: #E2ECED;

  /* Flaechen */
  --surface-page:       var(--color-weiss);
  --surface-card:       var(--color-weiss);
  --surface-form-field: var(--color-hellgrau);

  /* Text (Subtle/Faint: color-mix aus dem Onboarding als Hex) */
  --text-body:    var(--color-mittelpetrol);
  --text-heading: var(--color-mittelpetrol);
  --text-subtle:  #1E6269;
  --text-faint:   #467A7D;

  /* Linien */
  --hairline:        var(--color-hellgrau);
  --hairline-strong: #C7D6D6;

  /* Links */
  --link-color: var(--color-mittelpetrol);
  --link-hover: var(--color-lime);

  /* Buttons */
  --button-bg:       var(--color-mittelpetrol);
  --button-fg:       var(--color-weiss);
  --button-hover-bg: var(--color-lime);
  --button-hover-fg: var(--color-mittelpetrol);

  /* Typografie */
  --font-display: 'TT Ramillas', Georgia, serif;
  --font-body:    'Metro Sans', 'Helvetica Neue', Arial, sans-serif;
  --text-base: 17px; --text-small: 14px;
  --leading-heading: 1.15;

  /* Radien, Schatten */
  --radius-button: 999px;
  --radius-field: 6px;
  --radius-card: 12px;
  --shadow-card: 0 8px 30px rgba(1, 84, 92, 0.10);
}

* { box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--surface-page);
  color: var(--text-body);
  font-size: var(--text-base);
  margin: 0;
  padding: 1.5rem;
  line-height: 1.5;
}

h1, h2 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--leading-heading);
  color: var(--text-heading);
}
h1 { margin-top: 0; font-size: 1.7rem; }
h2 { font-size: 1.25rem; border-bottom: 1px solid var(--hairline-strong);
     padding-bottom: .35rem; margin-top: 1.75rem; }

b, strong { font-weight: 600; }

a { color: var(--link-color); transition: color .25s ease; }
a:hover { color: var(--link-hover); }

:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 2px; }

.huelle { max-width: 720px; margin: 0 auto; }

.karte {
  background: var(--surface-card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 2rem;
  margin-bottom: 1.25rem;
}

.kopf-logo { height: 40px; width: auto; display: block; margin-bottom: 1.1rem; }

/* --- Formularfelder --- */
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: var(--text-small); }
.hinweis { color: var(--text-subtle); font-size: .82rem; margin-top: .2rem; }
p.hinweis { margin-bottom: .8rem; }

input[type=text], input[type=email], input[type=tel], input[type=date],
input[type=number], select, textarea {
  width: 100%;
  padding: .6rem .8rem;
  border: 1px solid transparent;
  border-radius: var(--radius-field);
  background: var(--surface-form-field);
  color: var(--text-body);
  font-size: .95rem;
  font-family: inherit;
  transition: box-shadow .25s ease;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-lime);
}
select { cursor: pointer; }
input[type=file] { font-size: .9rem; }

.pflicht { color: var(--color-error); }

.zeile2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.zeile3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .zeile2, .zeile3 { grid-template-columns: 1fr; } }

/* --- Buttons (Pill, Petrol -> Lime) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  background: var(--button-bg);
  color: var(--button-fg);
  border: 1px solid transparent;
  border-radius: var(--radius-button);
  padding: .65rem 1.5rem;
  font-family: var(--font-body);
  font-size: .95rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.btn:hover { background: var(--button-hover-bg); color: var(--button-hover-fg); }
.btn:active { transform: scale(0.98); }
.btn[disabled] { background: var(--text-faint); color: var(--color-weiss); cursor: not-allowed; }

/* --- Hinweis-/Statuskaesten (Soft-Flaeche + Statusfarbe als Kante) --- */
.box {
  padding: 1rem 1.2rem;
  border-radius: var(--radius-field);
  border-left: 4px solid;
  margin: 1rem 0;
  font-size: .95rem;
}
.box-info    { background: var(--color-info-soft);    border-color: var(--color-info); }
.box-warnung { background: var(--color-warning-soft); border-color: var(--color-warning); }
.box-warnung strong { color: var(--color-warning); }
.box-fehler  { background: var(--color-error-soft);   border-color: var(--color-error); }
.box-fehler strong  { color: var(--color-error); }
.box-erfolg  { background: var(--color-success-soft); border-color: var(--color-success); }
.box-erfolg strong  { color: var(--color-success); }

.fehlerliste { margin: .4rem 0 0; padding-left: 1.2rem; }
.fehlerliste li { color: var(--color-error); }

/* W20c (11.09.2026): das abgewiesene Feld. Die Klasse sitzt am Behaelter und
   nicht am Eingabefeld, damit sie auch bei Dateifeldern und Radiogruppen
   sichtbar ist. Ohne diese Regel traegt das HTML die Klasse und der Mandant
   sieht trotzdem nichts: genau der Fehler, der in einer Abnahme als "so
   gewollt" durchgeht. */
.feld-fehler { border-left: 3px solid var(--color-error); padding-left: .6rem; }
.feld-fehler > label { color: var(--color-error); }

/* --- Status-Seite: Zeilen + Badges (Pill, Soft-Statusflaechen) --- */
.zeile { display: flex; justify-content: space-between; align-items: center;
         padding: .5rem 0; border-bottom: 1px solid var(--hairline); }
.badge {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: var(--radius-button);
  font-size: .78rem;
  font-weight: 600;
  white-space: nowrap;
}
.badge-mock  { background: var(--color-warning-soft); color: var(--color-warning); }
.badge-live  { background: var(--color-success-soft); color: var(--color-success); }
.badge-fehlt { background: var(--color-error-soft);   color: var(--color-error); }

.fuss { margin-top: 1.5rem; color: var(--text-subtle); font-size: .85rem; }

/* --- Dynamische Personen-Zeilen (Gesellschafter/Vertreter) --- */
.person-zeile {
  border: 1px solid var(--hairline-strong);
  border-radius: var(--radius-field);
  padding: 1rem;
  margin-bottom: .8rem;
  background: var(--color-weiss);
}
.entfernen {
  background: none; border: none;
  color: var(--color-error);
  cursor: pointer;
  font-family: inherit; font-size: .85rem;
  padding: 0;
}
.entfernen:hover { text-decoration: underline; }
.hinzufuegen {
  background: none;
  border: 1px dashed var(--color-mittelpetrol);
  color: var(--color-mittelpetrol);
  border-radius: var(--radius-button);
  padding: .45rem 1.1rem;
  font-family: inherit; font-size: .9rem; font-weight: 500;
  cursor: pointer;
  transition: background .25s ease;
}
.hinzufuegen:hover { background: var(--color-lime-soft); }

/* Zweit-Label (Nachreich-Checkbox) unter dem Feld-Label */
.feld .nachreich-label { font-weight: 400; font-size: .9rem; margin-top: .4rem; }

.versteckt { display: none; }

/* --- Responsive --- */
@media (max-width: 560px) {
  body { padding: 1rem; }
  .karte { padding: 1.25rem; }
}

/* Reduzierte Bewegung: nur Bewegung unterdruecken, Farb-Hover bleibt */
@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* --- W9/P4 (25.08.2026): Infobutton bei den wesentlichen Begriffen ---------
   Oeffnet bei Hover UND bei Klick. Der Klick ist Pflicht, nicht Zierde: auf
   einem Tablet gibt es kein Hover, und dort wird das Formular oft ausgefuellt.
   Deshalb ein echter <button> statt eines title-Attributs.
   Die Position ist `absolute` in einem `relative`-Halter, damit der Text die
   Feldhoehen nicht veraendert und das Formular beim Oeffnen nicht springt. */
.info-halter {
    position: relative;
    display: inline-block;
    margin-left: 0.35rem;
    vertical-align: middle;
}
.info-knopf {
    width: 1.15rem;
    height: 1.15rem;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-info);
    background: var(--color-weiss);
    color: var(--color-info);
    font-family: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.info-knopf:hover,
.info-halter.offen .info-knopf {
    background: var(--color-info);
    color: var(--color-weiss);
}
.info-text {
    display: none;
    position: absolute;
    left: 0;
    top: calc(100% + 0.4rem);
    z-index: 20;
    width: min(22rem, 78vw);
    padding: 0.7rem 0.85rem;
    border: 1px solid var(--color-info);
    border-radius: var(--radius-field, 6px);
    background: var(--color-weiss);
    box-shadow: 0 6px 22px rgba(1, 84, 92, 0.16);
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.45;
    text-align: left;
    white-space: normal;
    color: var(--text-body);
}
.info-halter.offen .info-text { display: block; }
/* Am rechten Rand nach links ausrichten, sonst laeuft der Kasten aus dem Bild. */
@media (max-width: 560px) {
    .info-text { left: auto; right: 0; }
}
/* W11 (26.08.2026): Befund aus der Abnahme. Die Kaesten der RECHTEN Spalte
   liefen ueber den Rand des Formulars hinaus und waren abgeschnitten. Der Grund
   ist die Verankerung an `left: 0`: ein 22rem breiter Kasten, der am rechten
   Feld beginnt, endet ausserhalb.
   Zwei Massnahmen, absichtlich beide. Die Regel fuer das letzte Feld einer
   Zeile deckt den Regelfall ohne JavaScript ab; `nach-links` setzt das Skript,
   wenn es nach dem Oeffnen wirklich nachmisst und der Kasten trotzdem
   uebersteht (verschachtelte Bloecke, schmales Fenster). Eine Massnahme allein
   liesse jeweils Faelle offen. */
.zeile2 > .feld:last-child .info-text,
.zeile3 > .feld:last-child .info-text,
.info-text.nach-links {
    left: auto;
    right: 0;
}
/* Und in keinem Fall breiter als das Fenster: ein Kasten, der nicht ganz
   hineinpasst, ist unlesbar, egal an welcher Kante er klebt. */
.info-text { max-width: calc(100vw - 1.5rem); }

/* --- W9/P3 (25.08.2026): Einwilligung zum unverschluesselten Versand -------
   Der Haken stand als unscheinbare Zeile zwischen zwei Feldern und wurde
   ueberlesen. Eine Entscheidung, die den Schutz der eigenen Daten senkt, muss
   bewusst getroffen werden; deshalb eigener Kasten und groessere Checkbox. */
.einwilligung-kasten {
    margin: 1rem 0;
    padding: 0.9rem 1.1rem;
    border: 2px solid var(--color-info);
    border-radius: var(--radius-field, 6px);
    background: var(--color-info-soft);
}
.einwilligung-titel {
    font-weight: 600;
    margin-bottom: 0.6rem;
}
.einwilligung-wahl {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    font-weight: 400;
    cursor: pointer;
}
.einwilligung-wahl input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: 0.1rem;
    flex: 0 0 auto;
    cursor: pointer;
}
.einwilligung-erklaerung {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.88rem;
    color: var(--text-subtle);
}

/* --- W10 (26.08.2026): Taetigkeitsabschnitte der natuerlichen Person -------
   Jeder Abschnitt haengt an einem Haekchen. Der Rahmen macht sichtbar, wo ein
   Abschnitt anfaengt und aufhoert; ohne ihn verschwimmt im langen Formular,
   welches Feld noch zu welchem Teil gehoert. */
.abschnitt {
    margin: 1rem 0;
    border: 1px solid var(--hairline-strong, #ccc);
    border-radius: var(--radius-field, 6px);
    overflow: hidden;
}
.abschnitt-schalter {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.85rem 1rem;
    margin: 0;
    background: var(--color-hellgrau, #f3f2f1);
    font-weight: 400;
    cursor: pointer;
}
.abschnitt-schalter input[type="checkbox"] {
    width: 1.2rem;
    height: 1.2rem;
    flex: 0 0 auto;
    cursor: pointer;
}
.abschnitt-inhalt {
    padding: 1rem;
    border-top: 1px solid var(--hairline-strong, #ccc);
}
.abschnitt-inhalt h3 {
    margin: 1.1rem 0 0.5rem;
    font-size: 1rem;
}
.abschnitt-inhalt h3:first-child { margin-top: 0; }

/* Mehrfachauswahl innerhalb eines Blocks: die Haekchen stehen untereinander,
   nicht in einer Zeile. Nebeneinander laesst sich auf dem Telefon kaum
   treffen, und genau dort wird das Formular oft ausgefuellt. */
.mehrfachwahl {
    display: block;
    padding: 0.25rem 0;
    font-weight: 400;
    cursor: pointer;
}
.mehrfachwahl input { margin-right: 0.5rem; }

.vermietung-zeile,
.gf-zeile { border-left: 3px solid var(--color-info, #01545C); }

/* --- W16 (08.09.2026): Vorwahl und Rufnummer -------------------------------
   Das Plus steht als Text VOR dem Eingabefeld. Ein Zeichen im Feld zu
   schuetzen geht nur mit Skript, und ein Mandant mit abgeschaltetem JavaScript
   haette es geloescht; ausserhalb des Feldes kann es niemand entfernen. */
.telefon-zeile {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.telefon-zeile > input[type="tel"] {
    flex: 1;
    min-width: 0;
}
.telefon-vorwahl {
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 0 0 5.5rem;
}
.telefon-plus {
    font-size: 1rem;
    color: var(--text-koerper, #2c3e50);
    padding-left: 0.15rem;
}
.telefon-vorwahl > input {
    width: 3.5rem;
    min-width: 0;
    text-align: center;
}