/* Immoblatt · Glas
   Weiche Farbverläufe im Hintergrund, Milchglas-Flächen nur dort, wo Inhalt zusammengehört.
   Vermieter: rötliche Akzente. Mieter: bläuliche Akzente. Schrift: Figtree (selbst gehostet, sonst Systemschrift). */

@font-face { font-family: "Figtree"; src: url("../fonts/Figtree-Variable.781c0569761e.ttf") format("truetype"); font-weight: 300 900; font-display: swap; }

:root {
  --ink: #24212B; --ink-2: #4D4857; --muted: #7B7486; --line: rgba(36, 33, 43, .08);
  --glass: rgba(255, 255, 255, .62); --glass-strong: rgba(255, 255, 255, .86); --glass-border: rgba(255, 255, 255, .85);
  --shadow: 0 10px 40px rgba(92, 64, 96, .08);
  --accent: #D04A5E; --accent-ink: #A8384B; --accent-soft: #FBE7EA; --accent-2: #E46A7C;
  --aura-1: #F7D9DE; --aura-2: #E3DDF6; --aura-3: #E3ECF6; --base: #F1EEF4;
  --ok: #2E6B4F; --ok-soft: #E1F2EA; --warn: #8A5A12; --warn-soft: #F8EDD9;
  --c-mietwechsel: #D04A5E; --c-besichtigung: #7B6CD9; --c-handwerker: #2F8F83; --c-erinnerung: #C98A2B; --c-wartung: #6B7A90;
  --r: 24px; --r-sm: 14px;
  --font: "Figtree", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}
.theme-mieter {
  --accent: #3F76D8; --accent-ink: #2C5DB5; --accent-soft: #E3ECFB; --accent-2: #5B8DEF;
  --aura-1: #D6E4FB; --aura-2: #E6E1F8; --aura-3: #DCEBF5; --base: #EEF2F8;
  --shadow: 0 10px 40px rgba(54, 84, 140, .08);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; font: 16px/1.5 var(--font); color: var(--ink); min-height: 100vh;
  background:
    radial-gradient(900px 600px at 8% 0%, var(--aura-1) 0%, transparent 60%),
    radial-gradient(800px 700px at 95% 10%, var(--aura-2) 0%, transparent 60%),
    radial-gradient(900px 700px at 50% 100%, var(--aura-3) 0%, transparent 70%),
    var(--base);
  background-attachment: fixed;
}
a { color: var(--accent-ink); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; letter-spacing: -0.02em; text-wrap: balance; }
h1 { font-size: clamp(30px, 4vw, 46px); font-weight: 800; letter-spacing: -0.035em; line-height: 1.1; }
h2 { font-size: 19px; font-weight: 750; }
h3 { font-size: 16px; font-weight: 700; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.ic { flex: none; }
.muted { color: var(--muted); }
.small { font-size: 13.5px; }
.num { font-variant-numeric: tabular-nums; }
.hidden { display: none !important; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Kopf und Navigation ------------------------------------------------------------------------------ */
.top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 32px; max-width: 1320px; margin: 0 auto; }
.brand { display: flex; align-items: center; gap: 9px; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand i { width: 26px; height: 26px; border-radius: 9px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); display: inline-block; }
.pill { display: flex; gap: 2px; padding: 5px; border-radius: 999px; }
.pill a { display: flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 999px; color: var(--ink-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
.pill a:hover { background: rgba(255, 255, 255, .7); text-decoration: none; }
.pill a.on { background: #fff; color: var(--ink); box-shadow: 0 1px 3px rgba(36, 33, 43, .1); }
.pill .badge { margin-left: 2px; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); display: grid; place-items: center; font-weight: 800; font-size: 14px; flex: none; }
.avatar.sm { width: 34px; height: 34px; font-size: 12.5px; }
.avatar.lg { width: 72px; height: 72px; font-size: 26px; }
.menu { position: relative; }
.menu > button { border: 0; background: none; padding: 0; cursor: pointer; border-radius: 50%; }
.menu-panel { position: absolute; right: 0; top: 50px; min-width: 220px; padding: 8px; z-index: 30; display: none; }
.menu.open .menu-panel { display: block; }
.menu-panel a, .menu-panel button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border-radius: 12px; color: var(--ink); font: 600 14px var(--font); background: none; border: 0; cursor: pointer; text-align: left; }
.menu-panel a:hover, .menu-panel button:hover { background: rgba(255, 255, 255, .8); text-decoration: none; }
.tabbar { display: none; }

main.page { max-width: 1240px; margin: 0 auto; padding: 8px 32px 64px; display: flex; flex-direction: column; gap: 28px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.page-head .eyebrow { font-size: 14px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 6px; }
.crumbs a { color: var(--muted); }
.center-head { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }

/* Flächen ------------------------------------------------------------------------------------------ */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--glass-border); border-radius: var(--r); box-shadow: var(--shadow); }
.panel { padding: 24px; }
.panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; }
.grid { display: flex; flex-wrap: wrap; gap: 22px; align-items: flex-start; }
.grid > * { min-width: 0; }
.col-7 { flex: 7 1 460px; } .col-5 { flex: 5 1 340px; } .col-4 { flex: 4 1 300px; } .col-6 { flex: 1 1 420px; } .col-8 { flex: 8 1 560px; }
.stack { display: flex; flex-direction: column; gap: 22px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }

/* Listen -------------------------------------------------------------------------------------------- */
.row { display: flex; align-items: center; gap: 14px; padding: 13px 6px; border-bottom: 1px solid var(--line); color: var(--ink); }
.row:last-child { border-bottom: 0; }
a.row:hover { text-decoration: none; background: rgba(255, 255, 255, .45); border-radius: 14px; }
.row .grow { flex: 1; min-width: 0; }
.row .title { font-weight: 700; font-size: 15.5px; }
/* Dringender Schaden: ganz oben und deutlich markiert */
.row.dringend { background: var(--accent-soft); box-shadow: inset 4px 0 0 var(--accent); border-radius: 12px; padding-left: 14px; padding-right: 10px; border-bottom-color: transparent; margin: 2px 0; }
.chip.dringend { background: var(--accent); color: #fff; font-weight: 800; }
.row .sub { font-size: 13.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.ic-bubble { width: 40px; height: 40px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--accent-soft); color: var(--accent-ink); }
.ic-bubble.lila { background: #ECE8FA; color: #6556B8; } .ic-bubble.gruen { background: #E4F2EC; color: var(--ok); } .ic-bubble.gold { background: var(--warn-soft); color: var(--warn); } .ic-bubble.blau { background: #E3ECFB; color: #2C5DB5; }
.date-tile { width: 48px; height: 52px; border-radius: 14px; background: rgba(255, 255, 255, .85); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.date-tile b { font-size: 18px; line-height: 1; } .date-tile span { font-size: 11px; color: var(--muted); font-weight: 700; text-transform: uppercase; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.t-mietwechsel { background: var(--c-mietwechsel); } .t-besichtigung { background: var(--c-besichtigung); } .t-handwerker { background: var(--c-handwerker); } .t-erinnerung { background: var(--c-erinnerung); } .t-wartung { background: var(--c-wartung); }
.empty { padding: 26px 8px; text-align: center; color: var(--muted); display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* Chips, Badges, Buttons --------------------------------------------------------------------------- */
.chip { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; border-radius: 999px; padding: 4px 10px; background: rgba(255, 255, 255, .8); color: var(--ink-2); white-space: nowrap; }
.chip.accent { background: var(--accent-soft); color: var(--accent-ink); } .chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); }
.badge { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 800; display: inline-grid; place-items: center; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 0; border-radius: 999px; padding: 10px 16px; font: 700 14px var(--font); cursor: pointer; background: rgba(255, 255, 255, .92); color: var(--ink); box-shadow: 0 1px 2px rgba(36, 33, 43, .08); white-space: nowrap; }
.btn:hover { text-decoration: none; background: #fff; }
.btn.primary { background: var(--accent); color: #fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.btn.primary:hover { background: var(--accent-ink); }
.btn.sm { padding: 7px 12px; font-size: 13px; }
.btn.danger { color: #A8384B; }
.btn.icon { width: 40px; height: 40px; padding: 0; }
.btns { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.preis-hinweis { margin: 0; padding: 12px 14px; border-radius: 14px; background: color-mix(in srgb, var(--accent) 8%, white); font-size: 14px; color: var(--ink-2); }
.preis-hinweis a { color: var(--accent-ink); font-weight: 700; }
.link-btn { border: 0; background: none; padding: 0; font: 700 14px var(--font); color: var(--accent-ink); cursor: pointer; }
.filters { display: flex; flex-wrap: wrap; gap: 6px; }
.filters a { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.filters a.on { background: var(--ink); color: #fff; }
.filters a:hover { text-decoration: none; }

/* Formulare: alle Felder sehen gleich aus ---------------------------------------------------------- */
.form { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 18px; }
.form .wide { grid-column: 1 / -1; }
.fld { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fld > label { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.fld .help { font-size: 12.5px; color: var(--muted); }
.fld .err, .errorlist { color: #A8384B; font-size: 13px; font-weight: 600; margin: 0; padding: 0; list-style: none; }
.field { width: 100%; min-height: 46px; border: 1px solid rgba(36, 33, 43, .1); background: rgba(255, 255, 255, .85); border-radius: var(--r-sm); padding: 11px 14px; font: 500 15px var(--font); color: var(--ink); appearance: none; -webkit-appearance: none; }
.field:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); background: #fff; }
textarea.field { resize: vertical; line-height: 1.5; }
select.field { padding-right: 40px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237B7486' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }
select[multiple].field { background-image: none; padding-right: 14px; min-height: 110px; }
input[type=file].field { padding: 10px; }
input[type=file].field::file-selector-button { border: 0; border-radius: 999px; padding: 7px 12px; margin-right: 10px; background: var(--accent-soft); color: var(--accent-ink); font: 700 13px var(--font); cursor: pointer; }
.switch { appearance: none; -webkit-appearance: none; width: 44px; height: 26px; border-radius: 999px; background: #D9D4DF; position: relative; cursor: pointer; flex: none; margin: 0; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .2); transition: transform .15s; }
.switch:checked { background: var(--accent); }
.switch:checked::after { transform: translateX(18px); }
.fld.check { flex-direction: row; align-items: center; gap: 12px; }
.fld.check > label { font-size: 14.5px; font-weight: 600; color: var(--ink); order: 2; }
.search { display: flex; align-items: center; gap: 8px; background: rgba(255, 255, 255, .7); border-radius: 999px; padding: 0 14px; height: 42px; color: var(--muted); }
.search input { border: 0; outline: 0; background: transparent; font: 500 15px var(--font); color: var(--ink); width: 100%; }
.checkbox { width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #C5C0CC; background: #fff; display: grid; place-items: center; cursor: pointer; flex: none; padding: 0; color: transparent; }
.checkbox.on { background: var(--accent); border-color: var(--accent); color: #fff; }

/* Kennzahlen ---------------------------------------------------------------------------------------- */
.kpi .label { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.kpi .value { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.ring { flex: none; }
.ring .bg { stroke: color-mix(in srgb, var(--accent) 14%, transparent); }
.ring .fg { stroke: var(--accent); transition: stroke-dasharray .6s; }
.bar { height: 6px; border-radius: 6px; background: color-mix(in srgb, var(--accent) 12%, transparent); overflow: hidden; }
.bar > i { display: block; height: 100%; background: var(--accent); border-radius: 6px; }
.months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.months .m { display: flex; flex-direction: column; gap: 6px; align-items: center; font-size: 12.5px; }
.months .col { width: 100%; height: 80px; border-radius: 12px; background: rgba(255, 255, 255, .6); display: flex; align-items: flex-end; overflow: hidden; }
.months .col i { width: 100%; background: color-mix(in srgb, var(--accent) 45%, #fff); border-radius: 12px; }
.months .m:last-child .col i { background: var(--accent); }

/* Häuser mit Fotos ---------------------------------------------------------------------------------- */
.house { position: relative; border-radius: 22px; overflow: hidden; display: block; color: var(--ink); min-height: 190px; }
.house:hover { text-decoration: none; }
.house img { width: 100%; height: 190px; object-fit: cover; display: block; transition: transform .4s; }
.house:hover img { transform: scale(1.03); }
.house .label { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 14px; border-radius: 16px; background: rgba(255, 255, 255, .72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.house .label b { font-size: 15px; } .house .label span { display: block; font-size: 13px; color: var(--ink-2); }
.house.nophoto { height: 190px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--muted); font-weight: 700; font-size: 14px; }
.hero-img { width: 100%; height: 260px; object-fit: cover; border-radius: var(--r); display: block; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14.5px; color: var(--ink-2); }

/* Einheiten nach Etage ------------------------------------------------------------------------------ */
.floor { display: flex; gap: 16px; align-items: stretch; padding: 8px 0; }
.floor > .lbl { width: 64px; flex: none; padding-top: 14px; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.floor > .units { flex: 1; display: flex; flex-wrap: wrap; gap: 12px; min-width: 0; }
.unit { flex: 1 1 220px; min-width: 0; padding: 14px 16px; border-radius: 18px; background: var(--glass-strong); border: 1px solid var(--glass-border); display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.unit:hover { text-decoration: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.unit .head { display: flex; justify-content: space-between; gap: 8px; }

/* Kalender ------------------------------------------------------------------------------------------ */
.cal-head, .cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.cal-head { font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; padding: 0 8px 6px; }
.cal .cell { min-height: 104px; padding: 8px; border-radius: 14px; display: flex; flex-direction: column; gap: 4px; min-width: 0; color: var(--ink); }
.cal .cell.in { background: rgba(255, 255, 255, .42); }
.cal .cell.out { color: #B5AFBD; }
.cal .cell.today { background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(92, 64, 96, .08); }
.cal .n { font-size: 13.5px; font-weight: 700; align-self: flex-start; }
.cal .today .n { background: var(--accent); color: #fff; border-radius: 999px; padding: 1px 8px; }
.cal .ev { font-size: 11.5px; line-height: 1.3; font-weight: 700; padding: 3px 7px; border-radius: 7px; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; color: var(--ink); background: rgba(255, 255, 255, .9); border-left: 3px solid var(--c, var(--accent)); }
.cal .ev:hover { text-decoration: none; }
.cal a.add { opacity: 0; font-size: 12px; color: var(--muted); margin-top: auto; }
.cal .cell:hover a.add { opacity: 1; }
.copy-field { display: flex; gap: 8px; }
.copy-field input { flex: 1; min-width: 0; font-size: 13px; }

/* Nachrichten --------------------------------------------------------------------------------------- */
.chat { display: flex; min-height: 640px; overflow: hidden; padding: 0; }
.chat .threads { flex: 1 1 300px; max-width: 360px; border-right: 1px solid var(--line); padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.chat .thread { display: flex; gap: 12px; padding: 12px; border-radius: 16px; color: var(--ink); }
.chat .thread:hover { text-decoration: none; background: rgba(255, 255, 255, .5); }
.chat .thread.on { background: rgba(255, 255, 255, .9); }
.chat .conv { flex: 999 1 420px; display: flex; flex-direction: column; min-width: 0; }
.chat .conv-head { padding: 18px 24px; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.chat .msgs { flex: 1; padding: 22px 24px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; }
.bubble { max-width: 74%; padding: 11px 15px; border-radius: 18px; font-size: 15px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.msg { display: flex; flex-direction: column; gap: 3px; }
.msg.me { align-items: flex-end; } .msg.me .bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 6px; }
.msg.them { align-items: flex-start; } .msg.them .bubble { background: #fff; border-bottom-left-radius: 6px; }
.msg time { font-size: 12px; color: var(--muted); padding: 0 6px; }
.composer { padding: 14px 24px 20px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 10px; }
.chat .side { flex: 1 1 240px; max-width: 280px; border-left: 1px solid var(--line); padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); font-size: 14.5px; }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--muted); } .kv b { text-align: right; font-variant-numeric: tabular-nums; }

/* Tabellen ------------------------------------------------------------------------------------------ */
.table-wrap { overflow-x: auto; }
table.list { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.list th { text-align: left; font-size: 12.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; padding: 8px 10px; border-bottom: 1px solid var(--line); }
table.list td { padding: 12px 10px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.list td.r, table.list th.r { text-align: right; font-variant-numeric: tabular-nums; }

/* Schritte ------------------------------------------------------------------------------------------ */
.steps { display: flex; gap: 6px; }
.steps i { flex: 1; height: 5px; border-radius: 5px; background: color-mix(in srgb, var(--accent) 14%, transparent); }
.steps i.on { background: var(--accent); }

/* Meldungen ----------------------------------------------------------------------------------------- */
.flash { max-width: 1240px; margin: 0 auto; padding: 0 32px; display: flex; flex-direction: column; gap: 8px; }
.flash div { padding: 12px 16px; border-radius: 16px; font-weight: 600; font-size: 14.5px; background: var(--glass-strong); border: 1px solid var(--glass-border); }
.flash .success { color: var(--ok); } .flash .error { color: #A8384B; }

/* Anmeldung ----------------------------------------------------------------------------------------- */
.auth { min-height: 100vh; display: grid; place-items: center; padding: 24px 16px; }
.auth .box { width: 100%; max-width: 440px; padding: 34px; display: flex; flex-direction: column; gap: 18px; }

/* Vorschau-Sperre („Under Construction“): großes Logo, nur die drei Punkte springen */
.vorschau .box { max-width: 460px; gap: 22px; }
.vorschau h1 { font-size: clamp(28px, 5vw, 36px); margin: 12px 0 8px; }
.vorschau p { margin: 0; }
.vorschau-logo { display: flex; align-items: center; gap: 12px; font-weight: 800; font-size: 26px; letter-spacing: -0.03em; color: var(--ink); }
.vorschau-logo i { width: 48px; height: 48px; border-radius: 16px; background: linear-gradient(135deg, var(--accent-2), var(--accent)); color: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 30%, transparent); }
.vorschau-logo i svg { width: 76%; height: 76%; display: block; overflow: visible; }
.vorschau-logo circle { transform-box: fill-box; transform-origin: center; animation: vorschau-hop 1.2s cubic-bezier(.3, 0, .3, 1) infinite; }
.vorschau-logo circle:nth-of-type(2) { animation-delay: .15s; }
.vorschau-logo circle:nth-of-type(3) { animation-delay: .3s; }
.vorschau-fehler { color: var(--accent-ink); font-weight: 600; font-size: 14.5px; }
@keyframes vorschau-hop { 0%, 50%, 100% { transform: translateY(0); } 22% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .vorschau-logo circle { animation: none; } }

/* Anzeige-Vorschau ---------------------------------------------------------------------------------- */
.preview { overflow: hidden; padding: 0; }
.preview img { width: 100%; height: 220px; object-fit: cover; display: block; }
.preview .body { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.figures { display: flex; flex-wrap: wrap; gap: 18px; }
.figures b { font-size: 20px; display: block; } .figures span { font-size: 12.5px; color: var(--muted); }

/* Mobil --------------------------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .top { padding: 14px 16px; }
  .top .pill { display: none; }
  main.page { padding: 4px 16px 110px; gap: 22px; }
  .flash { padding: 0 16px; }
  .tabbar { display: flex; position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom, 0px)); z-index: 40; justify-content: space-around; padding: 6px; border-radius: 999px; }
  .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 7px 0; border-radius: 999px; color: var(--ink-2); font-size: 11px; font-weight: 700; position: relative; }
  .tabbar a.on { background: var(--accent); color: #fff; }
  .tabbar a:hover { text-decoration: none; }
  .tabbar .badge { position: absolute; top: 2px; right: 18%; min-width: 16px; height: 16px; font-size: 10px; }
  .panel { padding: 18px; }
  .chat { flex-direction: column; }
  .chat .threads, .chat .side { max-width: none; border: 0; }
  .chat.has-cur .threads { display: none; }
  .cal .cell { min-height: 64px; padding: 4px; }
  .cal .ev { font-size: 0; padding: 0; height: 6px; border-left-width: 0; background: var(--c); }
  .floor { flex-direction: column; gap: 6px; }
  .floor > .lbl { padding-top: 0; }
  .bubble { max-width: 88%; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* ---------------------------------------------------------------------------------------------------
   Farbe und Tiefe (nach den Moodboard-Vorlagen): Verlaufskacheln, weiche Kugeln, leuchtende Akzente
   --------------------------------------------------------------------------------------------------- */
:root { --g-a: linear-gradient(135deg, #FF9A8B 0%, #E95F78 55%, #C94B8C 100%); --g-b: linear-gradient(135deg, #A99BFF 0%, #7C8CF8 50%, #5BB0F5 100%);
  --g-c: linear-gradient(135deg, #8EE3C8 0%, #47C2A6 55%, #2E9C9A 100%); --g-d: linear-gradient(135deg, #FFD08A 0%, #FFA36B 55%, #F07A5A 100%);
  --g-vivid: linear-gradient(135deg, #5C7CFA 0%, #B06FE8 42%, #FF7AA2 72%, #FFB067 100%); }
.theme-mieter { --g-vivid: linear-gradient(135deg, #3E7BFA 0%, #5AA9F7 45%, #6FD6C9 100%); }

body::before, body::after { content: ""; position: fixed; z-index: -1; pointer-events: none; border-radius: 50%; }
body::before { width: 340px; height: 340px; right: -90px; top: 90px;
  background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(255,214,222,.9) 18%, rgba(240,150,170,.55) 55%, rgba(220,120,150,0) 72%); filter: blur(1px); }
body::after { width: 420px; height: 420px; left: -150px; bottom: -120px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0%, rgba(214,206,255,.85) 20%, rgba(160,170,250,.5) 55%, rgba(140,160,240,0) 72%); }
.theme-mieter body::before, body.theme-mieter::before { background: radial-gradient(circle at 32% 28%, rgba(255,255,255,.95) 0%, rgba(200,226,255,.9) 18%, rgba(110,170,240,.5) 55%, rgba(110,170,240,0) 72%); }
body.theme-mieter::after { background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.9) 0%, rgba(196,240,228,.85) 20%, rgba(110,210,190,.45) 55%, rgba(110,210,190,0) 72%); }

.glass { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px rgba(92,64,120,.10), 0 2px 6px rgba(92,64,120,.05); }
.theme-mieter .glass { box-shadow: 0 1px 0 rgba(255,255,255,.9) inset, 0 18px 50px rgba(54,84,150,.10), 0 2px 6px rgba(54,84,150,.05); }
.btn.primary { background: var(--g-a); box-shadow: 0 8px 22px rgba(233,95,120,.35), 0 1px 0 rgba(255,255,255,.35) inset; }
.theme-mieter .btn.primary { background: var(--g-b); box-shadow: 0 8px 22px rgba(91,140,245,.35); }
.btn.primary:hover { filter: saturate(1.1) brightness(1.03); background: var(--g-a); }
.theme-mieter .btn.primary:hover { background: var(--g-b); }
.pill a.on { box-shadow: 0 4px 14px rgba(92,64,120,.14); }
.brand i { box-shadow: 0 6px 16px rgba(233,95,120,.35); background: var(--g-a); }
.theme-mieter .brand i { background: var(--g-b); box-shadow: 0 6px 16px rgba(91,140,245,.35); }

/* Icons auf Verläufen */
.ic-bubble { color: #fff; background: var(--g-a); box-shadow: 0 6px 14px rgba(233,95,120,.25); font-weight: 800; font-size: 13px; }
.ic-bubble.lila, .ic-bubble.grad-b { background: var(--g-b); box-shadow: 0 6px 14px rgba(124,140,248,.28); color: #fff; }
.ic-bubble.gruen, .ic-bubble.grad-c { background: var(--g-c); box-shadow: 0 6px 14px rgba(71,194,166,.28); color: #fff; }
.ic-bubble.gold, .ic-bubble.grad-d { background: var(--g-d); box-shadow: 0 6px 14px rgba(255,163,107,.3); color: #fff; }
.ic-bubble.blau { background: var(--g-b); color: #fff; }
.ic-bubble.grad-a { background: var(--g-a); }
.theme-mieter .ic-bubble { background: var(--g-b); box-shadow: 0 6px 14px rgba(91,140,245,.28); }

/* Kacheln mit Charakter */
.vivid { background: var(--g-vivid) !important; color: #fff; border-color: rgba(255,255,255,.35) !important; box-shadow: 0 22px 50px rgba(124,111,232,.30) !important; position: relative; overflow: hidden; }
.vivid::after { content: ""; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.45), rgba(255,255,255,0) 65%); }
.vivid .label, .vivid .muted, .vivid a { color: rgba(255,255,255,.85) !important; }
.vivid .ring .bg { stroke: rgba(255,255,255,.25); } .vivid .ring .fg { stroke: #fff; } .vivid .ring text { fill: #fff; }
.tint-mint { background: linear-gradient(160deg, rgba(220,247,236,.85), rgba(255,255,255,.55)) !important; }
.tint-peach { background: linear-gradient(160deg, rgba(255,232,214,.9), rgba(255,255,255,.55)) !important; }
.tint-lila { background: linear-gradient(160deg, rgba(232,226,255,.9), rgba(255,255,255,.55)) !important; }
.chip.blue { background: #E3ECFB; color: #2C5DB5; } .chip.lila { background: #ECE8FA; color: #5A4BB5; }
.prio { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 8px; box-shadow: 0 0 0 3px var(--accent-soft); vertical-align: middle; }
a.quiet { color: inherit; text-decoration: underline; text-decoration-color: rgba(36,33,43,.25); text-underline-offset: 3px; }
a.quiet:hover { color: var(--accent-ink); }
code { font-size: 12.5px; background: rgba(255,255,255,.7); padding: 1px 6px; border-radius: 6px; }

/* Filterleiste und Gruppen mit Trennlinie */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px; border-radius: 22px; }
.toolbar .search { flex: 2 1 260px; } .toolbar select { flex: 1 1 170px; width: auto; min-height: 42px; }
.group { display: flex; flex-direction: column; gap: 8px; }
.group-head { display: flex; align-items: center; gap: 12px; padding: 4px 6px; }
.group-img { width: 40px; height: 30px; border-radius: 9px; object-fit: cover; box-shadow: 0 4px 10px rgba(36,33,43,.12); }
.group-title { font-weight: 800; font-size: 17px; color: var(--ink); letter-spacing: -0.01em; white-space: nowrap; }
.group-head .line { flex: 1; height: 1px; background: linear-gradient(90deg, rgba(36,33,43,.18), rgba(36,33,43,0)); }
.list { padding: 4px 14px; }
.floor-tag { width: 54px; flex: none; font-size: 12px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }

/* Aufgaben-Vorlagen */
.tpl-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tpl { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.7); color: var(--ink); font-weight: 650; font-size: 14px; border: 1px solid rgba(255,255,255,.9); }
.tpl:hover { text-decoration: none; background: #fff; }
.tpl.on { background: var(--g-a); color: #fff; } .tpl span { display: inline-flex; opacity: .6; }

/* Kalender: Umschalter, Woche, Liste, Belegungsplan */
.seg { display: flex; padding: 4px; border-radius: 999px; background: rgba(255,255,255,.6); border: 1px solid rgba(255,255,255,.85); }
.seg a { padding: 8px 14px; border-radius: 999px; font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.seg a.on { background: #fff; color: var(--ink); box-shadow: 0 3px 10px rgba(36,33,43,.1); } .seg a:hover { text-decoration: none; }
.week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.week .day { padding: 12px; min-height: 260px; display: flex; flex-direction: column; gap: 8px; border-radius: 20px; }
.week .day.today { outline: 2px solid var(--accent); outline-offset: -2px; }
.day-head { display: flex; align-items: baseline; gap: 6px; } .day-head b { font-size: 22px; } .day-head span { color: var(--muted); font-weight: 700; font-size: 12px; text-transform: uppercase; }
.wev { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: #fff; border-left: 4px solid var(--c); color: var(--ink); font-size: 13px; }
.wev:hover { text-decoration: none; } .wev .t { font-size: 11.5px; color: var(--muted); font-weight: 700; } .wev span:last-child:not(.t) { color: var(--muted); font-size: 12px; }
.add-day { margin-top: auto; font-size: 12.5px; color: var(--muted); }
.list-day { display: flex; align-items: center; gap: 12px; padding: 16px 4px 6px; border-top: 1px solid var(--line); }
.list-day:first-child { border-top: 0; padding-top: 4px; } .list-day.today b { color: var(--accent-ink); }
.plan-wrap { overflow-x: auto; }
.plan { min-width: calc(220px + var(--cols) * 34px); }
.plan-row { display: grid; grid-template-columns: 220px repeat(var(--cols), 34px); align-items: stretch; }
.plan-days { position: sticky; top: 0; z-index: 2; }
.plan-day { text-align: center; padding: 4px 0 8px; font-size: 11px; color: var(--muted); display: flex; flex-direction: column; }
.plan-day b { font-size: 14px; color: var(--ink); } .plan-day.today b { color: #fff; background: var(--accent); border-radius: 999px; margin: 0 4px; }
.plan-day.we, .plan-cell.we { background: rgba(36,33,43,.035); }
.plan-label { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 4px; min-width: 0; color: var(--ink); }
.plan-label img { width: 34px; height: 26px; object-fit: cover; border-radius: 7px; }
.plan-label.unit { padding-left: 46px; flex-direction: column; align-items: flex-start; gap: 0; font-size: 13.5px; font-weight: 650; }
.plan-label.unit small { color: var(--muted); font-weight: 500; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 160px; }
.plan-label.unit:hover { text-decoration: none; color: var(--accent-ink); }
.plan-group { border-top: 1px solid var(--line); }
.plan-group > summary { list-style: none; cursor: pointer; } .plan-group > summary::-webkit-details-marker { display: none; }
.plan-prop .plan-label b { font-size: 14.5px; }
.plan-cell { position: relative; border-left: 1px solid rgba(36,33,43,.05); display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 2px; min-height: 40px; }
.plan-cell.today { background: rgba(208,74,94,.06); }
.plan-cell.free { background: repeating-linear-gradient(135deg, rgba(233,95,120,.16) 0 5px, rgba(233,95,120,.05) 5px 10px); }
.pe { width: 14px; height: 14px; border-radius: 5px; background: var(--c); box-shadow: 0 2px 6px rgba(0,0,0,.15); display: block; }
.pm { position: absolute; top: 4px; bottom: 4px; width: 4px; border-radius: 3px; }
.pm.start { left: 0; background: #2E9C9A; } .pm.ende { right: 0; background: #E95F78; }
.legend { display: inline-block; width: 14px; height: 12px; border-radius: 3px; position: static; }
.legend.free { background: repeating-linear-gradient(135deg, rgba(233,95,120,.3) 0 4px, rgba(233,95,120,.08) 4px 8px); }
.legend.pm.start { background: #2E9C9A; width: 4px; } .legend.pm.ende { background: #E95F78; width: 4px; }
details.abo > summary { list-style: none; display: flex; align-items: center; gap: 14px; cursor: pointer; }
details.abo > summary::-webkit-details-marker { display: none; }
details.abo[open] > summary .ic:last-child { transform: rotate(90deg); }

/* Auswahl mit Häkchen (Rundschreiben) */
.checkgrid { display: flex; flex-wrap: wrap; gap: 8px; }
.checkpill { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255,255,255,.75); cursor: pointer; font-weight: 650; font-size: 14px; }
.checkpill input { accent-color: var(--accent); width: 17px; height: 17px; }
.hero-wrap { position: relative; } .hero-wrap .hero-img { height: 100%; min-height: 240px; }
.photo-hint { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.85); font-size: 13px; font-weight: 700; color: var(--ink); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.suggest .btn.primary { justify-content: flex-start; }

@media (max-width: 860px) {
  .week { grid-template-columns: minmax(0, 1fr); } .week .day { min-height: 0; }
  .toolbar select { flex: 1 1 140px; }
  body::before { width: 220px; height: 220px; right: -90px; } body::after { width: 280px; height: 280px; }
}

/* Mietverlauf, Terminabstimmung, Bank */
.date-tile.on { background: var(--g-a); color: #fff; } .date-tile.on span { color: rgba(255, 255, 255, .85); }
.slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.slot { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .7); font: inherit; text-align: left; cursor: pointer; color: inherit; transition: transform .15s, box-shadow .15s; }
.slot b { font-size: 16px; } .slot span { font-size: 13.5px; color: var(--muted); font-weight: 600; }
.slot:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(40, 30, 60, .10); }
.slot.on { background: var(--g-a); color: #fff; border-color: transparent; } .slot.on span { color: rgba(255, 255, 255, .85); }
.tan-img { max-width: 260px; width: 100%; border-radius: 14px; background: #fff; padding: 10px; }
.slot-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
@media (max-width: 640px) { .slot-fields { grid-template-columns: 1fr; } }
.theme-mieter .slot.on, .theme-mieter .date-tile.on { background: var(--g-b); }

/* Übergabeprotokoll */
.room { padding: 0; }
.room > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 12px; padding: 18px 22px; }
.room > summary::-webkit-details-marker { display: none; }
.room > summary .grow { flex: 1; min-width: 0; } .room > summary .grow b { font-size: 17px; }
.room[open] > summary > .ic:last-child { transform: rotate(90deg); }
.room[open] > summary { border-bottom: 1px solid var(--line); }
.room .body { padding: 16px 22px 22px; display: flex; flex-direction: column; gap: 14px; }
.checkrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between; padding: 6px 0; border-bottom: 1px dashed var(--line); }
.checkrow > span { font-weight: 700; font-size: 14.5px; }
.tri { display: inline-flex; background: rgba(255, 255, 255, .7); border: 1px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; }
.tri input { position: absolute; opacity: 0; pointer-events: none; }
.tri label { padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--muted); cursor: pointer; }
.tri input:checked + label.ok { background: #DDF3E8; color: #1E7A52; }
.tri input:checked + label.spuren { background: #FFF1D6; color: #9A6A12; }
.tri input:checked + label.schaden { background: var(--accent-soft); color: var(--accent-ink); }
.tri input:focus-visible + label { outline: 2px solid var(--accent); }
.thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.thumbs img { width: 84px; height: 84px; object-fit: cover; border-radius: 12px; }
.sigpad { width: 100%; height: 170px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); touch-action: none; display: block; }
.sig-img { max-width: 260px; height: 90px; object-fit: contain; }
.mini-table { width: 100%; border-collapse: collapse; } .mini-table td { padding: 4px 6px 4px 0; } .mini-table input { width: 100%; }

/* Objekte: Einheiten als Kacheln, nach Etagen aufgebaut */
.mini-house { padding: 4px 18px 18px; display: flex; flex-direction: column; gap: 5px; }
.mh-row { display: flex; gap: 8px; align-items: center; }
.mh-row + .mh-row { border-top: 1px solid var(--line); padding-top: 5px; }
.mh-fl { width: 40px; flex: none; font-size: 10.5px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.mh-units { flex: 1; display: flex; gap: 5px; flex-wrap: wrap; min-width: 0; }
.mu { flex: 1 1 58px; min-width: 0; max-width: 140px; padding: 7px 8px; border-radius: 10px; font-size: 11.5px; font-weight: 750; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-decoration: none; transition: transform .12s; }
.mu:hover { transform: translateY(-1px); }
.mu.st-vermietet { background: #E2F4EC; color: #1E7A52; }
.mu.st-gekuendigt { background: #FFF1D6; color: #9A6A12; }
.mu.st-kuenftig { background: #E3ECFB; color: #2C5DB5; }
.mu.st-frei { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 0 0 1.5px rgba(208, 74, 94, .35); }
i.legend.mu { display: inline-block; width: 14px; height: 10px; padding: 0; border-radius: 4px; flex: none; }
details.abo > summary .grow { flex: 1; min-width: 0; }

/* Logo: Sprechblasen-Haus im App-Icon */
.brand i { display: inline-flex; align-items: center; justify-content: center; color: var(--accent); flex: none; }
.brand i svg { width: 76%; height: 76%; display: block; }

/* Hausinfo, Fotos */
.info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; align-items: start; }
details.info { border-radius: 16px; border: 1px solid var(--line); background: rgba(255, 255, 255, .6); padding: 0 14px; }
details.info > summary { list-style: none; cursor: pointer; padding: 12px 0; font-weight: 700; font-size: 14.5px; display: flex; justify-content: space-between; gap: 8px; }
details.info > summary::-webkit-details-marker { display: none; }
details.info > summary::after { content: "+"; color: var(--accent-ink); font-weight: 800; }
details.info[open] > summary::after { content: "–"; }
details.info.filled { background: #fff; border-color: transparent; box-shadow: 0 6px 18px rgba(40, 30, 60, .06); }
details.info[open] { padding-bottom: 12px; }
details.info .fld + label { margin-top: 8px; }
.photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.photo-grid figure { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.photo-grid img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; }
.hinfo { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px 18px; }
.hinfo div b { display: block; font-size: 13px; color: var(--muted); }

/* Schalter: Beschriftung direkt hinter dem Schalter, Erklärung darunter */
.fld.check { flex-wrap: wrap; }
.fld.check > label { order: 1; flex: 1 1 0; min-width: 0; }
.fld.check > .help { order: 2; flex-basis: 100%; padding-left: 62px; margin-top: -6px; }
.fld.check > .err { order: 3; flex-basis: 100%; }
.pick-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.pick-photos label { position: relative; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.pick-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; opacity: .45; transition: opacity .15s; }
.pick-photos input { position: absolute; top: 8px; left: 8px; }
.pick-photos input:checked ~ img { opacity: 1; }
.room-picks { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 4px 0 0; list-style: none; }
.room-picks > div, .room-picks li { display: contents; }
.room-picks label { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); font-weight: 600; font-size: 13.5px; cursor: pointer; }
.room-picks input { accent-color: var(--accent); }
.tri input:checked + label.fehlt { background: #ECEAF0; color: #5B5566; }
.tenant-picker .tp-list { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding: 4px; border-radius: 16px; background: rgba(255,255,255,.55); border: 1px solid var(--line); }
.tp-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; cursor: pointer; }
.tp-item:hover { background: #fff; }
.tp-item input { accent-color: var(--accent); width: 18px; height: 18px; }
.tp-selected { display: flex; flex-wrap: wrap; gap: 6px; }
.tp-new { margin: 6px 0; padding: 14px; border-radius: 16px; background: #fff; border: 1px dashed var(--line); }

/* Häuser im Überblick: eine Zeile, seitlich blättern */
.hscroll { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, calc((100% - 60px) / 4)); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; padding-bottom: 6px; scrollbar-width: thin; }
.hscroll > * { scroll-snap-align: start; }
@media (max-width: 900px) { .hscroll { grid-auto-columns: minmax(240px, 80%); } }
[data-hscroll-prev][hidden], [data-hscroll-next][hidden] { display: none; }
.tp-item[hidden], [data-hint][hidden], .tenant-picker .tp-list[hidden] { display: none; }
.letter-preview { width: 100%; height: 75vh; border: 0; display: block; background: #EEEAF0; }
.ticks { margin: 0; padding-left: 18px; display: grid; gap: 4px; }
.pipeline { display: flex; flex-direction: column; gap: 4px; }
.pipeline .step { display: flex; gap: 12px; align-items: center; padding: 8px 10px; border-radius: 14px; color: inherit; }
.pipeline .step:hover { background: rgba(255,255,255,.7); }
.pipeline .step .dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 800; background: rgba(255,255,255,.8); border: 1px solid var(--line); flex: none; }
.pipeline .step.done .dot { background: var(--g-a); color: #fff; border-color: transparent; }
.pipeline .step b { display: block; font-size: 14.5px; } .pipeline .step small { color: var(--muted); font-size: 12.5px; }
.pr-room { padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.7); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }

/* Hintergründe zum Wählen (Einstellungen → Hintergrund). Standard: Farbfelder.
   Jeder hat ein eigenes, klar erkennbares Motiv. Motive mit Linien nutzen eine Maske und färben sich mit --accent
   (Vermieter rot, Mieter blau). */
body.bg-farbfelder::before, body.bg-farbfelder::after, body.bg-raster::before, body.bg-raster::after, body.bg-koernung::before, body.bg-koernung::after, body.bg-stadt::before, body.bg-stadt::after, body.bg-ruhig::before, body.bg-ruhig::after, body.bg-blatt::before, body.bg-blatt::after, body.bg-dachlinie::before, body.bg-dachlinie::after, body.bg-morgenlicht::before, body.bg-morgenlicht::after, body.bg-weiss::before, body.bg-weiss::after { border-radius: 0; filter: none; inset: 0; width: auto; height: auto; background: none; }
body.bg-farbfelder::after, body.bg-raster::after, body.bg-koernung::after, body.bg-stadt::after, body.bg-ruhig::after, body.bg-blatt::after, body.bg-dachlinie::after, body.bg-morgenlicht::after, body.bg-weiss::after { display: none; }

/* Farbfelder: kräftige, weiche Farbwolken, die sich langsam bewegen */
body.bg-farbfelder::before { inset: -10%; filter: blur(40px);
  background: radial-gradient(42% 38% at 82% 14%, rgba(255,110,140,.85), transparent 70%), radial-gradient(40% 45% at 8% 88%, rgba(140,125,255,.8), transparent 70%),
              radial-gradient(34% 34% at 52% 62%, rgba(255,175,120,.6), transparent 70%), radial-gradient(30% 30% at 15% 15%, rgba(120,200,255,.45), transparent 70%); animation: hk-drift 28s ease-in-out infinite alternate; }
body.bg-farbfelder.theme-mieter::before { background: radial-gradient(42% 38% at 82% 14%, rgba(80,145,255,.8), transparent 70%), radial-gradient(40% 45% at 8% 88%, rgba(80,210,190,.75), transparent 70%),
              radial-gradient(34% 34% at 52% 62%, rgba(170,150,255,.55), transparent 70%), radial-gradient(30% 30% at 15% 15%, rgba(140,220,255,.45), transparent 70%); }
@keyframes hk-drift { from { transform: translate3d(-2%, -1%, 0) scale(1); } to { transform: translate3d(2%, 2%, 0) scale(1.06); } }

/* Grundriss: eine gezeichnete Wohnung (Wände, Türen, Fenster) groß unten rechts, darunter feines Millimeterraster */
body.bg-raster::before { opacity: .5;
  background-image: linear-gradient(rgba(130,100,150,.14) 1px, transparent 1px), linear-gradient(90deg, rgba(130,100,150,.14) 1px, transparent 1px);
  background-size: 24px 24px; }
body.bg-raster::after { display: block; inset: auto -40px -30px auto; width: min(900px, 80vw); aspect-ratio: 7 / 5; height: auto; background: var(--accent); opacity: .22;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23000'%3E%3Cpath d='M10 10 H410 V290 H10 Z' stroke-width='8'/%3E%3Cpath d='M170 10 V120 M170 160 V290 M10 150 H130 M170 190 H300 M300 190 V290 M300 10 V80 M300 120 V190' stroke-width='5'/%3E%3Cpath d='M130 150 A40 40 0 0 1 170 110 M170 160 A40 40 0 0 0 210 190 M300 80 A40 40 0 0 1 340 120 M260 190 A40 40 0 0 0 300 230' stroke-width='2'/%3E%3Cpath d='M60 10 H120 M220 10 H270 M350 10 H390 M410 200 V260 M60 290 H120' stroke-width='14' stroke-opacity='.35'/%3E%3Crect x='320' y='220' width='70' height='50' rx='8' stroke-width='2'/%3E%3Ccircle cx='355' cy='245' r='10' stroke-width='2'/%3E%3Crect x='30' y='200' width='100' height='70' rx='6' stroke-width='2'/%3E%3Cpath d='M30 225 H130' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23000'%3E%3Cpath d='M10 10 H410 V290 H10 Z' stroke-width='8'/%3E%3Cpath d='M170 10 V120 M170 160 V290 M10 150 H130 M170 190 H300 M300 190 V290 M300 10 V80 M300 120 V190' stroke-width='5'/%3E%3Cpath d='M130 150 A40 40 0 0 1 170 110 M170 160 A40 40 0 0 0 210 190 M300 80 A40 40 0 0 1 340 120 M260 190 A40 40 0 0 0 300 230' stroke-width='2'/%3E%3Cpath d='M60 10 H120 M220 10 H270 M350 10 H390 M410 200 V260 M60 290 H120' stroke-width='14' stroke-opacity='.35'/%3E%3Crect x='320' y='220' width='70' height='50' rx='8' stroke-width='2'/%3E%3Ccircle cx='355' cy='245' r='10' stroke-width='2'/%3E%3Crect x='30' y='200' width='100' height='70' rx='6' stroke-width='2'/%3E%3Cpath d='M30 225 H130' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Körnung: sichtbare Papierstruktur mit Fasern über einem Farbverlauf */
body.bg-koernung::before { background: linear-gradient(135deg, rgba(255,205,215,.75), rgba(205,195,255,.6) 60%, rgba(200,228,255,.55)); }
body.bg-koernung.theme-mieter::before { background: linear-gradient(135deg, rgba(190,218,255,.75), rgba(186,236,222,.6) 60%, rgba(222,215,248,.55)); }
body.bg-koernung::after { display: block; opacity: .75; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .4 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .45 0 0 -1.6 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"); }

/* Stadt: das Stadtfoto, gut erkennbar, oben zum Inhalt hin aufgehellt */
body.bg-stadt::before { inset: -20px; background: url("../landing/img/stadt.ae66c4f87b8c.jpg") center 35% / cover no-repeat; filter: blur(3px) saturate(.9); opacity: .6; }
body.bg-stadt::after { display: block; background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.15) 100%); }

/* Ruhig: nur der weiche Grundverlauf, ohne jede Form */

/* Blatt: ein großes Blatt (Anspielung auf den Namen) halb im Bild unten rechts */
body.bg-blatt::before { inset: auto -12vw -18vh auto; width: min(760px, 70vw); aspect-ratio: 1; height: auto; background: var(--accent); opacity: .2; transform: rotate(-28deg);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M50 12 V92 M50 32 L68 21 M50 32 L32 21 M50 50 L72 37 M50 50 L28 37 M50 68 L70 55 M50 68 L30 55' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath d='M50 3 C84 22 93 60 50 97 C7 60 16 22 50 3Z' fill='%23000' mask='url%28%23m%29'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M50 12 V92 M50 32 L68 21 M50 32 L32 21 M50 50 L72 37 M50 50 L28 37 M50 68 L70 55 M50 68 L30 55' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath d='M50 3 C84 22 93 60 50 97 C7 60 16 22 50 3Z' fill='%23000' mask='url%28%23m%29'/%3E%3C/svg%3E") center / contain no-repeat; }

/* Dachlinie: Häuserreihe als Silhouette über die ganze Breite am unteren Rand */
body.bg-dachlinie::before { inset: auto 0 0 0; height: 200px; background: var(--accent); opacity: .3;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200' viewBox='0 0 480 200'%3E%3Cpath d='M0 200 V150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150 V200 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='150' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='168' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='326' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='344' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='335' y='122' width='12' height='14' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 480px 200px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200' viewBox='0 0 480 200'%3E%3Cpath d='M0 200 V150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150 V200 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='150' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='168' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='326' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='344' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='335' y='122' width='12' height='14' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 480px 200px repeat-x; }

/* Morgenlicht: kräftiges Lichtband oben, nach unten ruhig */
body.bg-morgenlicht::before { inset: 0 0 auto 0; height: 75vh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 55%, #FFE3C4) 0%, color-mix(in srgb, var(--accent-2) 22%, var(--aura-2)) 45%, transparent 100%); }

/* Fast weiß: helle, schlichte Fläche ohne Verlauf */
body.bg-weiss { background: #FBFAFC; }

@media (prefers-reduced-motion: reduce) { body.bg-farbfelder::before { animation: none; } }
.bg-picks { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.bg-pick { display: flex; flex-direction: column; gap: 6px; padding: 8px; border-radius: 16px; border: 2px solid transparent; background: rgba(255,255,255,.6); cursor: pointer; font: inherit; color: inherit; }
.bg-pick.on { border-color: var(--accent); }
.bg-pick span { height: 64px; border-radius: 10px; background: #F1EEF4; position: relative; overflow: hidden; }
.bg-pick span::after { content: ""; position: absolute; inset: 0; }
.prev-kugeln span { background: radial-gradient(circle at 80% 30%, #FFD6DE 0 18%, transparent 30%), radial-gradient(circle at 15% 90%, #D6CEFF 0 22%, transparent 34%), #F1EEF4; }
.prev-farbfelder span { background: radial-gradient(60% 50% at 80% 20%, rgba(255,110,140,.85), transparent 70%), radial-gradient(50% 60% at 15% 85%, rgba(140,125,255,.8), transparent 70%), radial-gradient(40% 40% at 50% 60%, rgba(255,175,120,.6), transparent 70%), #F1EEF4; }
.prev-raster span { background: linear-gradient(rgba(130,100,150,.14) 1px, transparent 1px) 0 0 / 8px 8px, linear-gradient(90deg, rgba(130,100,150,.14) 1px, transparent 1px) 0 0 / 8px 8px, #F4F1F6; }
.prev-raster span::after { inset: 8px 6px 4px 30%; background: var(--accent); opacity: .45; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23000'%3E%3Cpath d='M10 10 H410 V290 H10 Z' stroke-width='8'/%3E%3Cpath d='M170 10 V120 M170 160 V290 M10 150 H130 M170 190 H300 M300 190 V290 M300 10 V80 M300 120 V190' stroke-width='5'/%3E%3Cpath d='M130 150 A40 40 0 0 1 170 110 M170 160 A40 40 0 0 0 210 190 M300 80 A40 40 0 0 1 340 120 M260 190 A40 40 0 0 0 300 230' stroke-width='2'/%3E%3Cpath d='M60 10 H120 M220 10 H270 M350 10 H390 M410 200 V260 M60 290 H120' stroke-width='14' stroke-opacity='.35'/%3E%3Crect x='320' y='220' width='70' height='50' rx='8' stroke-width='2'/%3E%3Ccircle cx='355' cy='245' r='10' stroke-width='2'/%3E%3Crect x='30' y='200' width='100' height='70' rx='6' stroke-width='2'/%3E%3Cpath d='M30 225 H130' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 300' fill='none' stroke='%23000'%3E%3Cpath d='M10 10 H410 V290 H10 Z' stroke-width='8'/%3E%3Cpath d='M170 10 V120 M170 160 V290 M10 150 H130 M170 190 H300 M300 190 V290 M300 10 V80 M300 120 V190' stroke-width='5'/%3E%3Cpath d='M130 150 A40 40 0 0 1 170 110 M170 160 A40 40 0 0 0 210 190 M300 80 A40 40 0 0 1 340 120 M260 190 A40 40 0 0 0 300 230' stroke-width='2'/%3E%3Cpath d='M60 10 H120 M220 10 H270 M350 10 H390 M410 200 V260 M60 290 H120' stroke-width='14' stroke-opacity='.35'/%3E%3Crect x='320' y='220' width='70' height='50' rx='8' stroke-width='2'/%3E%3Ccircle cx='355' cy='245' r='10' stroke-width='2'/%3E%3Crect x='30' y='200' width='100' height='70' rx='6' stroke-width='2'/%3E%3Cpath d='M30 225 H130' stroke-width='2'/%3E%3C/svg%3E") center / contain no-repeat; }
.prev-koernung span { background: linear-gradient(135deg, #FFCDD7, #CDC3FF 60%, #C8E4FF); }
.prev-koernung span::after { opacity: .6; mix-blend-mode: multiply; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .4 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .35' numOctaves='2' seed='7'/%3E%3CfeColorMatrix values='0 0 0 0 .4 0 0 0 0 .35 0 0 0 0 .45 0 0 -1.6 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23f%29'/%3E%3C/svg%3E"); }
.prev-stadt span { background: url("../landing/img/stadt.ae66c4f87b8c.jpg") center / cover; }
.prev-stadt span::after { background: rgba(255,255,255,.3); }
.prev-ruhig span { background: radial-gradient(90% 80% at 0% 0%, var(--aura-1), transparent 60%), radial-gradient(80% 90% at 100% 10%, var(--aura-2), transparent 60%), var(--base); }
.prev-blatt span::after { inset: 10px -14px -26px 45%; background: var(--accent); opacity: .3; transform: rotate(-28deg); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M50 12 V92 M50 32 L68 21 M50 32 L32 21 M50 50 L72 37 M50 50 L28 37 M50 68 L70 55 M50 68 L30 55' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath d='M50 3 C84 22 93 60 50 97 C7 60 16 22 50 3Z' fill='%23000' mask='url%28%23m%29'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cmask id='m'%3E%3Crect width='100' height='100' fill='%23fff'/%3E%3Cpath d='M50 12 V92 M50 32 L68 21 M50 32 L32 21 M50 50 L72 37 M50 50 L28 37 M50 68 L70 55 M50 68 L30 55' stroke='%23000' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/mask%3E%3Cpath d='M50 3 C84 22 93 60 50 97 C7 60 16 22 50 3Z' fill='%23000' mask='url%28%23m%29'/%3E%3C/svg%3E") center / contain no-repeat; }
.prev-dachlinie span::after { inset: auto 0 0 0; height: 34px; background: var(--accent); opacity: .4; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200' viewBox='0 0 480 200'%3E%3Cpath d='M0 200 V150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150 V200 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='150' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='168' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='326' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='344' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='335' y='122' width='12' height='14' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 82px 34px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='200' viewBox='0 0 480 200'%3E%3Cpath d='M0 200 V150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150 V200 Z' fill='%23000' fill-opacity='.35'/%3E%3Cpath d='M0 150 H30 L70 108 L110 150 H130 V118 L165 82 L200 118 V150 H222 L250 124 L278 150 H300 V92 L340 52 L380 92 V150 H400 L440 112 L480 150' fill='none' stroke='%23000' stroke-width='3' stroke-linejoin='round'/%3E%3Crect x='150' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='168' y='118' width='12' height='14' fill='%23fff'/%3E%3Crect x='326' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='344' y='96' width='12' height='14' fill='%23fff'/%3E%3Crect x='335' y='122' width='12' height='14' fill='%23fff'/%3E%3C/svg%3E") 0 100% / 82px 34px repeat-x; }
.prev-morgenlicht span { background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 55%, #FFE3C4), color-mix(in srgb, var(--accent-2) 15%, var(--aura-2)) 55%, #F1EEF4); }
.prev-weiss span { background: #FBFAFC; border: 1px solid var(--line); }
.bubble .attach { display: flex; gap: 6px; align-items: center; margin-top: 8px; font-size: 13px; font-weight: 700; color: inherit; text-decoration: underline; }

/* Support: Freigabe-Banner beim Vermieter, Leiste beim aufgeschalteten Support */
.support-toast { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: min(360px, calc(100vw - 24px)); padding: 16px; border-radius: 20px; display: flex; flex-direction: column; gap: 14px; box-shadow: 0 12px 32px rgba(36, 33, 43, .18); }
.support-toast b { display: flex; align-items: center; gap: 8px; }
.support-toast .check-line { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.support-bar { position: sticky; bottom: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 20px; background: #24212B; color: #fff; font-weight: 600; font-size: 14px; }
.support-bar span { display: flex; align-items: center; gap: 8px; }
.filters button { padding: 8px 14px; border-radius: 999px; background: rgba(255, 255, 255, .6); color: var(--ink-2); font-weight: 600; font-size: 13.5px; }
.filters button.on { background: var(--ink); color: #fff; }
@media (max-width: 860px) {
  .support-toast { right: 12px; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); }
  .support-bar { position: fixed; left: 0; right: 0; top: 0; bottom: auto; }
}

/* Ablagefeld zum Hineinziehen von Dateien */
.dropzone { margin: 0; }
.dz-area { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  padding: 22px 16px; border: 2px dashed rgba(36, 33, 43, .18); border-radius: 18px; background: rgba(255, 255, 255, .45); cursor: pointer;
  transition: border-color .15s, background .15s; }
.dz-area:hover, .dropzone.over .dz-area { border-color: var(--accent); background: var(--accent-soft); }
.dz-area input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.dz-area input[type=file]:focus-visible + .dz-icon { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }
.dz-icon { color: var(--accent-ink); }
.dz-label { font-weight: 700; font-size: 15px; }
.dz-hint { font-size: 13px; color: var(--muted); }
.dz-hint u { color: var(--accent-ink); text-underline-offset: 3px; }
.dz-busy { display: none; font-size: 13px; font-weight: 700; color: var(--accent-ink); }
.dropzone.busy .dz-busy { display: block; } .dropzone.busy .dz-hint { display: none; }

/* Anmelden mit Apple/Google (Gestaltung nach den Vorgaben von Apple und Google) */
.extern-wahl { gap: 10px; }
.extern-wahl .oder { text-align: center; }
.btn.extern { width: 100%; font-weight: 600; }
.btn.extern.apple { background: #000; color: #fff; }
.btn.extern.apple:hover { background: #1c1c1e; }
.btn.extern.google { background: #fff; color: #1f1f1f; border: 1px solid #dadce0; }
.row .btn.extern { width: auto; }

/* Besucher-Demo: schmale Leiste ganz oben */
.demoleiste { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; padding: 7px 16px; background: #14171E; }
.demoleiste form { margin: 0; }
.demoleiste button { font-family: inherit; font-weight: 700; font-size: 13px; line-height: 1; padding: 8px 14px; border-radius: 999px; border: 0; cursor: pointer; background: rgba(255,255,255,.14); color: #fff; }
.demoleiste button:hover { background: rgba(255,255,255,.24); }
.demoleiste button.zu-mieter { background: #3F76D8; }
.demoleiste button.zu-vermieter { background: #C9483C; }
.demoleiste button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Rundgang in der Demo (static/js/rundgang.js) */
.rundgang { position: fixed; right: 20px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 1001; width: min(360px, calc(100vw - 24px));
  display: flex; flex-direction: column; gap: 10px; padding: 16px 18px; border-radius: 20px; background: #fff; color: #14171E;
  box-shadow: 0 18px 50px rgba(20, 23, 30, .28); font-size: 14.5px; line-height: 1.5; }
.rundgang p { margin: 0; }
.rundgang-kopf { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; color: #626A79; }
.rundgang-kopf b { color: #14171E; font-size: 13px; letter-spacing: .04em; text-transform: uppercase; }
.rundgang-knoepfe { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rundgang-aus { margin-left: auto; border: 0; background: none; padding: 6px 2px; font: inherit; font-size: 13px; font-weight: 600; color: #626A79; cursor: pointer; }
.rundgang-aus:hover { color: #14171E; text-decoration: underline; }
.rundgang-ring { position: fixed; left: 0; top: 0; z-index: 1000; pointer-events: none; border-radius: 14px; border: 2px solid #C9483C;
  box-shadow: 0 0 0 200vmax rgba(10, 12, 18, 0), 0 0 0 6px rgba(201, 72, 60, .25); transition: box-shadow .6s; }
.rundgang-ring.dunkel { box-shadow: 0 0 0 200vmax rgba(10, 12, 18, .45), 0 0 0 6px rgba(201, 72, 60, .25); }
body.theme-mieter .rundgang-ring { border-color: #3F76D8; box-shadow: 0 0 0 200vmax rgba(10, 12, 18, 0), 0 0 0 6px rgba(63, 118, 216, .25); }
body.theme-mieter .rundgang-ring.dunkel { box-shadow: 0 0 0 200vmax rgba(10, 12, 18, .45), 0 0 0 6px rgba(63, 118, 216, .25); }
@media (max-width: 760px) { .rundgang { right: 12px; left: 12px; width: auto; bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }
@media (prefers-reduced-motion: reduce) { .rundgang-ring { transition: none; } }

/* Einstellungen und Formulare: Abschnitte, Info-Buttons, Pflichtfelder, Meldung nach Speichern ohne Sprung */
.form .abschnitt { margin: 10px 0 -6px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 15px; font-weight: 800; color: var(--ink); }
.form > .abschnitt:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.pflicht { color: var(--accent-ink); }
.info-btn { display: inline-grid; place-items: center; width: 18px; height: 18px; margin-left: 6px; padding: 0; border-radius: 50%; border: 1.5px solid var(--accent-ink);
  background: transparent; color: var(--accent-ink); font: 700 11px/1 Georgia, serif; font-style: italic; cursor: pointer; vertical-align: 1px; }
.info-btn[aria-expanded="true"] { background: var(--accent-ink); color: #fff; }
.info-text { font-size: 13px; line-height: 1.5; padding: 10px 12px; border-radius: 12px; background: var(--accent-soft); color: var(--ink); white-space: pre-line; }
.flash.schwebend { position: fixed; left: 50%; bottom: 96px; transform: translateX(-50%); z-index: 60; padding: 0 16px; width: max-content; max-width: calc(100% - 32px); transition: opacity .4s; }
.flash.schwebend div { box-shadow: 0 10px 30px rgba(40, 30, 60, .18); background: #fff; }
.flash.weg { opacity: 0; pointer-events: none; }
.notfall-anruf { border-radius: 16px; padding: 14px 16px; background: var(--accent-soft); display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; justify-content: space-between; }
.notfall-anruf b { font-size: 15px; }
.notfall-anruf[hidden], .rundgang[data-hinweis][hidden] { display: none; }
.form .neue-zeile { grid-column-start: 1; }

/* Einstellungen: Automatik in eigenen Blöcken, Lesemodus-Hinweis, erste Schritte */
.automatik-bloecke { gap: 14px; }
.automatik-kopf { padding: 4px 4px 0; }
.automatik-bloecke > .panel > h3 { font-size: 17px; font-weight: 800; margin: 0; }
.flash.lesemodus div { color: var(--ink); background: var(--accent-soft); border-color: transparent; }
.flash.lesemodus a { font-weight: 800; text-decoration: underline; }
.erste-schritte .fld.check label a { text-decoration: underline; }
.lesemodus-hinweis { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.room-picks .room-plus, .room-picks .room-neu { display: inline-flex; align-items: center; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.7); font: inherit; font-weight: 600; font-size: 13.5px; color: var(--ink); cursor: pointer; }
.room-picks .room-neu { width: 150px; cursor: text; outline: none; border-color: var(--accent); }

/* Einführungs-Checkliste im Überblick */
/* Einführungs-Checkliste: Kasten unten rechts wie .rundgang, zeigt nur den nächsten Schritt */
.checkliste-kasten { z-index: 900; }
.checkliste-kasten .rundgang-knoepfe form { display: contents; }
.checkliste-balken { height: 6px; border-radius: 999px; background: #E8E9EE; overflow: hidden; }
.checkliste-balken span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .4s; }
body.mit-checkliste .page { padding-bottom: 190px; }

/* Ganze Kachel als Link (z. B. Mieteingang im Überblick) */
.kachel-link { text-decoration: none; transition: transform .15s, box-shadow .15s; }
.kachel-link:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(20, 23, 30, .14); }
.kachel-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Preis-Abfrage beim Anlegen einer Einheit (templates/vermieter/form.html) */
.preis-abfrage { border: 0; border-radius: 20px; padding: 20px 22px; width: min(420px, calc(100vw - 32px)); box-shadow: 0 18px 50px rgba(20, 23, 30, .28); color: #14171E; }
.preis-abfrage::backdrop { background: rgba(10, 12, 18, .45); }
.preis-abfrage h2 { margin: 0 0 8px; }
.preis-abfrage p { margin: 0 0 10px; }

/* Stammdaten-Import: Zuordnung in Spalten */
.import-felder { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.import-felder fieldset { border: 0; padding: 0; margin: 0; }

/* Suche „Wo finde ich was?“ (static/js/suche.js): die Leiste klappt aus der Lupe nach links auf */
.suche { position: relative; z-index: 45; display: flex; align-items: center; }
.suche-knopf { position: relative; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, .7); color: var(--ink); box-shadow: 0 4px 14px rgba(20, 23, 30, .08); transition: background .2s; }
.suche-knopf:hover, .suche.offen .suche-knopf { background: #fff; }
.suche-feld { position: absolute; right: 0; top: 50%; z-index: 1; height: 40px; width: 40px; margin: 0; padding: 0 44px 0 16px; border: 0; border-radius: 999px;
  background: #fff; color: var(--ink); font: inherit; font-size: 15px; outline: 0; opacity: 0; pointer-events: none; transform: translateY(-50%);
  box-shadow: 0 8px 28px rgba(20, 23, 30, .14); transition: width .38s cubic-bezier(.2, .9, .25, 1), opacity .2s; }
.suche.offen .suche-feld { width: min(380px, calc(100vw - 120px)); opacity: 1; pointer-events: auto; }
.suche-feld::-webkit-search-cancel-button { display: none; }
.suche-ergebnisse { position: absolute; right: 0; top: calc(100% + 10px); z-index: 60; width: min(420px, calc(100vw - 32px)); padding: 6px; border-radius: 20px;
  background: rgba(255, 255, 255, .97); box-shadow: 0 24px 60px rgba(20, 23, 30, .22); animation: suche-auf .22s ease-out; }
.suche-ergebnisse[hidden] { display: none; }
@keyframes suche-auf { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.suche-ergebnisse ul { list-style: none; margin: 0; padding: 0; }
.suche-ergebnisse a { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 10px 12px; border-radius: 14px; color: inherit; text-decoration: none; }
.suche-ergebnisse a b { font-size: 15px; }
.suche-ergebnisse a span { grid-column: 1; font-size: 12.5px; color: var(--muted); }
.suche-ergebnisse .suche-hin { grid-column: 2; grid-row: 1 / span 2; font-style: normal; font-size: 12.5px; font-weight: 700; color: var(--accent-ink); opacity: 0; transition: opacity .15s; }
.suche-ergebnisse li.an a { background: var(--accent-soft); }
.suche-ergebnisse li.an .suche-hin { opacity: 1; }
.suche-leer { padding: 12px 14px; margin: 0; font-size: 14px; color: var(--muted); }
.suche-support { display: block; padding: 11px 14px; margin-top: 4px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); text-decoration: none; }
.suche-support b { color: var(--accent-ink); }
.hilfe-weg { margin: 0; padding-left: 20px; display: grid; gap: 4px; }
@media (max-width: 760px) {
  .suche.offen .suche-feld { width: calc(100vw - 110px); }
  .suche-ergebnisse { position: fixed; left: 16px; right: 16px; top: 74px; width: auto; }
}
.hilfe-leuchten { position: relative; z-index: 5; animation: hilfe-puls 1.2s ease-in-out 5; border-radius: 14px; }
@keyframes hilfe-puls { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 74, 94, 0); } 50% { box-shadow: 0 0 0 6px rgba(208, 74, 94, .55); } }
body.theme-mieter .hilfe-leuchten { animation-name: hilfe-puls-blau; }
@keyframes hilfe-puls-blau { 0%, 100% { box-shadow: 0 0 0 0 rgba(63, 118, 216, 0); } 50% { box-shadow: 0 0 0 6px rgba(63, 118, 216, .55); } }
.rundgang.hilfe-box { right: auto; left: 20px; }  /* links unten: rechts stehen Checkliste und Rundgang */
@media (prefers-reduced-motion: reduce) { .hilfe-leuchten { animation: none; box-shadow: 0 0 0 4px rgba(208, 74, 94, .55); } }