/* Openhouse – Designsystem nach Apple-Art
   System-Schrift (auf Apple-Geräten SF Pro), Apple-Systemfarben, gruppierte Flächen, Materialien mit Unschärfe,
   Kapsel-Schaltflächen, 44-px-Trefferflächen. App und Mieterportal folgen Hell und Dunkel des Geräts. */

/* Openhouse – Schwarz-Weiß nach Apple-Art
   Schwarz und Weiß tragen die Oberfläche, Grautöne ordnen. Farbe gibt es nur für Rot (überfällig, Fehler). System-Schrift (SF Pro), Kapsel-Schaltflächen, 44-px-Trefferflächen. */

/* Inter (rsms/inter, SIL Open Font License) für Windows, Android und Linux; Apple-Geräte nutzen SF Pro */
@font-face { font-family: 'Inter Openhouse'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('/fonts/InterVariable.woff2') format('woff2'); }

/* Sanfte Seitenwechsel (View Transitions): Inhalt blendet über, Seitenleiste bleibt stehen */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .16s; animation-timing-function: cubic-bezier(.25, .1, .25, 1); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

:root {
  /* Flächen */
  --bg: #f5f5f7;
  --bg-grouped: #f5f5f7;
  --surface: #ffffff;
  --surface-2: #fafafa;
  --surface-3: #f2f2f4;
  --fill: rgba(0, 0, 0, .06);
  --fill-2: rgba(0, 0, 0, .04);
  --fill-3: rgba(0, 0, 0, .1);
  --material: rgba(255, 255, 255, .78);
  --material-thick: rgba(255, 255, 255, .9);
  --material-edge: rgba(255, 255, 255, .6);
  /* Text */
  --label: #1d1d1f;
  --label-2: #6e6e73;
  --label-3: #86868b;
  --label-4: #aeaeb2;
  --separator: #d2d2d7;
  --separator-2: #e8e8ed;
  --hairline: rgba(0, 0, 0, .08);
  /* Akzent: Schwarz (im Dunkeln Weiß) */
  --accent: #000000;
  --accent-hover: #2c2c2e;
  --on-accent: #ffffff;
  /* Schwarze Karte (Mietkonto, Bank, Freigabe) – im Dunkeln dunkelgrau mit Kante */
  --inverse: #000000;
  --inverse-edge: transparent;
  --blue: var(--accent);
  --blue-hover: var(--accent-hover);
  --link: var(--label);
  --tint-blue: rgba(0, 0, 0, .06);
  /* Bedeutungsfarben – sparsam */
  --green: #1d1d1f;
  --green-text: #1d1d1f;
  --tint-green: rgba(0, 0, 0, .06);
  --orange: #6e6e73;
  --orange-text: #3a3a3c;
  --tint-orange: rgba(0, 0, 0, .06);
  --red: #e0241b;
  --red-text: #c4140c;
  --tint-red: rgba(224, 36, 27, .09);
  --yellow: #8e8e93;
  --indigo: #1d1d1f;
  --purple: #1d1d1f;
  --teal: #1d1d1f;
  --pink: #1d1d1f;
  --warm: #ffffff;

  /* Ältere Namen, damit alle Seiten weiter passen */
  --night: #000000;
  --night-2: #1d1d1f;
  --night-3: #2c2c2e;
  --paper: var(--bg-grouped);
  --ink: var(--label);
  --ink-2: var(--label-2);
  --ink-3: var(--label-3);
  --line: var(--separator);
  --line-2: var(--separator-2);
  --brand: var(--accent);
  --brand-strong: var(--accent-hover);
  --brand-tint: var(--tint-blue);
  --brand-glow: rgba(0, 0, 0, .25);
  --light: var(--warm);
  --paid: var(--green);
  --paid-tint: var(--tint-green);
  --open: var(--label-3);
  --open-tint: var(--fill);
  --due: var(--red);
  --due-tint: var(--tint-red);
  --white: #ffffff;

  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro', 'Inter Openhouse', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro', 'Inter Openhouse', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-round: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --r-sm: 8px;
  --r-control: 12px;
  --r-card: 20px;
  --r-xl: 28px;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-2: 0 2px 12px rgba(0, 0, 0, .05);
  --shadow-3: 0 16px 48px rgba(0, 0, 0, .14);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .12), inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 0 0 .5px rgba(255, 255, 255, .5);
  --focus: 0 0 0 3px var(--surface), 0 0 0 5px var(--accent);
  --ease: cubic-bezier(.25, .1, .25, 1);
  --spring: cubic-bezier(.34, 1.36, .64, 1);
}

/* Dunkel für App, Mieterportal und Anmeldung */
@media (prefers-color-scheme: dark) {
  body.app, body.portal, body.page-auth {
    --bg: #000000;
    --bg-grouped: #000000;
    --surface: #1c1c1e;
    --surface-2: #232325;
    --surface-3: #2c2c2e;
    --fill: rgba(255, 255, 255, .1);
    --fill-2: rgba(255, 255, 255, .06);
    --fill-3: rgba(255, 255, 255, .16);
    --material: rgba(22, 22, 24, .78);
    --material-thick: rgba(22, 22, 24, .9);
    --material-edge: rgba(255, 255, 255, .12);
    --label: #f5f5f7;
    --label-2: #a1a1a6;
    --label-3: #8e8e93;
    --label-4: #636366;
    --separator: #38383a;
    --separator-2: #2c2c2e;
    --hairline: rgba(255, 255, 255, .1);
    --accent: #ffffff;
    --accent-hover: #e5e5ea;
    --on-accent: #000000;
    --inverse: #1c1c1e;
    --inverse-edge: rgba(255, 255, 255, .12);
    --tint-blue: rgba(255, 255, 255, .1);
    --green: #f5f5f7;
    --green-text: #f5f5f7;
    --tint-green: rgba(255, 255, 255, .1);
    --orange: #8e8e93;
    --orange-text: #d1d1d6;
    --tint-orange: rgba(255, 255, 255, .08);
    --red: #ff453a;
    --red-text: #ff6961;
    --tint-red: rgba(255, 69, 58, .16);
    --indigo: #f5f5f7; --purple: #f5f5f7; --teal: #f5f5f7; --pink: #f5f5f7;
    --shadow-1: 0 0 0 transparent;
    --shadow-2: 0 0 0 transparent;
    --shadow-3: 0 16px 48px rgba(0, 0, 0, .6);
    --glass-shadow: 0 8px 32px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 .5px rgba(255, 255, 255, .1);
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -.022em;
  color: var(--label);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
img, svg, canvas, video { display: block; max-width: 100%; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; font-family: var(--font-display); font-weight: 700; letter-spacing: -.025em; text-wrap: balance; }
p { margin: 0; }
a { color: var(--link); text-decoration: none; }
p a:not(.btn), li a.inline, label a, .hint a, .alert a, .form-alt a, .form-link a, .legal a, .muted a { text-decoration: underline; text-decoration-color: var(--label-4); text-underline-offset: 3px; text-decoration-thickness: 1px; }
p a:not(.btn):hover, label a:hover, .hint a:hover, .alert a:hover, .form-alt a:hover, .form-link a:hover, .legal a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: 10px; }
::selection { background: rgba(0, 0, 0, .14); }
.num { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--surface); padding: 10px 14px; border-radius: var(--r-control); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }

/* ---------- Logo ---------- */
.logo { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; color: var(--label); }
.logo-mark { flex: none; border-radius: 22.5%; }
.logo-word { font: 600 20px/1 var(--font-display); letter-spacing: -.02em; color: inherit; }
.logo-light { color: #f5f5f7; }

/* ---------- Schaltflächen (Kapseln) ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  min-height: 44px; padding: 0 20px;
  border-radius: 980px; border: 0;
  font: 400 17px/1 var(--font); letter-spacing: -.022em; text-decoration: none !important; cursor: pointer;
  transition: background-color .2s var(--ease), color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease), opacity .2s;
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.97); }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); }
.btn-dark { background: var(--label); color: var(--surface); }
.btn-dark:hover { opacity: .88; color: var(--surface); }
.btn-light { background: var(--fill); color: var(--label); font-weight: 500; }
.btn-light:hover { background: var(--fill-3); color: var(--label); }
.btn-ghost { background: transparent; color: var(--label); }
.btn-ghost:hover { background: var(--fill-2); color: var(--label); }
.btn-glass { background: rgba(255, 255, 255, .14); color: #fff; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 0 .5px rgba(255, 255, 255, .25); }
.btn-glass:hover { background: rgba(255, 255, 255, .22); color: #fff; }
.btn-danger { background: var(--tint-red); color: var(--red-text); }
.btn-danger:hover { background: rgba(255, 59, 48, .2); color: var(--red-text); }
.btn-lg { min-height: 52px; padding: 0 28px; font-size: 17px; }
.btn-sm { min-height: 34px; padding: 0 14px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled], .btn[aria-busy="true"] { opacity: .45; cursor: default; }
.link-more { color: var(--label); font-size: 17px; font-weight: 500; text-decoration: none; }
.link-more::after { content: ' ›'; }

/* ---------- Formulare ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field label, .label { font-weight: 600; font-size: 15px; letter-spacing: -.01em; color: var(--label); }
.field .hint { font-size: 13px; color: var(--label-3); letter-spacing: -.005em; }
.input, .select, .textarea {
  width: 100%; min-height: 44px; padding: 10px 14px;
  font: 400 17px/1.3 var(--font); letter-spacing: -.022em; color: var(--label);
  background: var(--surface); border: 1px solid var(--separator); border-radius: var(--r-control);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.input::placeholder, .textarea::placeholder { color: var(--label-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--label-2); }
.check input { width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
input[type="radio"], input[type="checkbox"] { accent-color: var(--accent); }

.alert { padding: 12px 16px; border-radius: var(--r-control); font-size: 15px; border: 0; }
.alert-error { background: var(--tint-red); color: var(--red-text); }
.alert-ok { background: var(--fill); color: var(--label); box-shadow: inset 3px 0 0 var(--green); }
.alert-info { background: var(--fill); color: var(--label); }
.alert-warn { background: var(--fill); color: var(--label); box-shadow: inset 3px 0 0 var(--label); }

/* ---------- Status (App und Mieterportal) ---------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 980px; font-size: 13px; font-weight: 600; line-height: 1.4; letter-spacing: -.005em; white-space: nowrap; vertical-align: middle; background: var(--fill); color: var(--label-2); }
.badge::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.badge-paid { background: var(--tint-green); color: var(--green-text); }
.badge-paid::before { background: var(--green); }
.badge-open { background: transparent; color: var(--label); box-shadow: inset 0 0 0 1px var(--separator); }
.badge-open::before { background: var(--label); }
.badge-due { background: var(--tint-red); color: var(--red-text); }
.badge-due::before { background: var(--red); }
.badge-info { background: var(--fill); color: var(--label); }
.badge-info::before { background: var(--label-2); }
.badge-muted::before { background: var(--label-4); }
h1 .badge, h2 .badge { margin-left: 8px; font-family: var(--font); letter-spacing: 0; }
.optional { font-weight: 400; color: var(--label-3); font-size: 14px; }
.field-error { color: var(--red-text); font-size: 14px; font-weight: 500; }
.has-error .input, .has-error .select, .has-error .textarea { border-color: var(--red); }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Sprachauswahl ---------- */
.lang-menu { position: relative; }
.lang-menu > summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 10px 0 11px; border-radius: 980px; list-style: none; cursor: pointer; color: var(--label); font-size: 14px; font-weight: 500; letter-spacing: -.01em; background: var(--fill-2); user-select: none; -webkit-user-select: none; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu > summary:hover { background: var(--fill); }
.lang-menu > summary:focus-visible { outline: none; box-shadow: var(--focus); }
.lang-menu > summary .icon { width: 17px; height: 17px; }
.lang-menu .lang-chev { width: 14px; height: 14px; opacity: .55; transition: transform .2s var(--ease); }
.lang-menu[open] .lang-chev { transform: rotate(180deg); }
.lang-menu ul { position: absolute; right: 0; top: calc(100% + 8px); z-index: 90; min-width: 214px; max-height: min(440px, 70vh); overflow-y: auto; margin: 0; padding: 6px; list-style: none; border-radius: 16px; background: var(--material-thick); -webkit-backdrop-filter: blur(30px) saturate(180%); backdrop-filter: blur(30px) saturate(180%); box-shadow: 0 18px 50px rgba(0, 0, 0, .18), inset 0 0 0 .5px var(--hairline); animation: lang-in .18s var(--ease); }
.lang-menu.is-up ul { top: auto; bottom: calc(100% + 8px); }
.lang-menu.is-left ul { right: auto; left: 0; }
.lang-menu li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 0 12px; border-radius: 10px; color: var(--label); text-decoration: none !important; font-size: 15px; }
.lang-menu li a:hover { background: var(--fill); color: var(--label); }
.lang-menu li a[aria-current] { font-weight: 600; }
.lang-menu li .icon { width: 16px; height: 16px; stroke-width: 2.4; }
@keyframes lang-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }

/* ---------- Unterschriftenfeld (Mietvertrag) ---------- */
.sigpad { display: flex; flex-direction: column; gap: 8px; }
.sigpad-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.sigpad-clear { padding: 4px 0; border: 0; background: none; color: var(--label-2); font: inherit; font-size: 15px; cursor: pointer; }
.sigpad-clear:disabled { opacity: .35; cursor: default; }
.sigpad-box { position: relative; aspect-ratio: 3 / 1; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--separator); overflow: hidden; }
.sigpad-canvas { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--label); touch-action: none; cursor: crosshair; }
.sigpad-line { position: absolute; left: 6%; right: 6%; bottom: 24%; border-bottom: 1px solid var(--label-4); pointer-events: none; }
.sigpad-line i { position: absolute; left: 0; bottom: 3px; color: var(--label-3); font-size: 18px; font-style: normal; line-height: 1; }
.sigpad-placeholder { position: absolute; left: 0; right: 0; top: 30%; color: var(--label-4); font-size: 17px; text-align: center; pointer-events: none; transition: opacity .2s; }
.sigpad.has-ink .sigpad-placeholder, .sigpad.is-drawing .sigpad-placeholder { opacity: 0; }
.sigpad.is-missing .sigpad-box, .sigpad.has-error .sigpad-box { box-shadow: inset 0 0 0 1.5px var(--red); }
.sigpad .field-error { color: var(--red-text); font-size: 13px; }

.contract-facts { display: grid; gap: 0; margin: 0 0 16px; border-radius: 16px; background: var(--fill-2); overflow: hidden; }
.contract-facts > div { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; border-bottom: 1px solid var(--hairline); }
.contract-facts > div:last-child { border-bottom: 0; }
.contract-facts dt { color: var(--label-2); font-size: 15px; }
.contract-facts dd { margin: 0; font-size: 15px; font-weight: 500; text-align: right; }
.contract-facts dd small { display: block; color: var(--label-3); font-size: 13px; font-weight: 400; }
.contract-read { margin-bottom: 10px; }
.contract-signed-by { display: flex; align-items: center; gap: 8px; margin: 0 0 18px; color: var(--label-2); font-size: 14px; }
.contract-signed-by .icon { width: 16px; height: 16px; }
.contract-form { display: grid; gap: 16px; }
.contract-fine { margin: 0; color: var(--label-3); font-size: 13px; text-align: center; }
.contract-done { display: grid; gap: 12px; text-align: center; }
.contract-done h2 { margin: 6px 0 0; font-size: 26px; letter-spacing: -.02em; }
.contract-done p { margin: 0 0 8px; color: var(--label-2); }
.contract-done-icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.contract-done-icon .icon { width: 30px; height: 30px; stroke-width: 2.4; }
.sigpad .hint { font-size: 13px; color: var(--label-3); }
.contract-sign, .contract-form, .contract-done { grid-template-columns: minmax(0, 1fr); }
.contract-sign { display: grid; }
.contract-done .btn, .contract-form .btn, .contract-read { height: auto; min-height: 50px; white-space: normal; line-height: 1.25; padding-block: 12px; text-align: center; }
.auth-box .contract-done { margin-top: 12px; }