/* heimathafen28.de – gemeinsames Stylesheet
   Ein Kopf, eine Fußzeile, eine Schrift. Die Bereiche setzen nur ihre Akzentfarben:
   body.hv = Hausverwaltung (sachlich, Marine/Messing), body.urlaub = Urlaub (Holz/Gletscher). */

:root {
  --ink: #15212c;
  --ink-soft: #4a5866;
  --paper: #f7f5f1;
  --card: #ffffff;
  --line: #e3ddd2;
  --navy: #1b3a57;
  --navy-deep: #10263b;
  --brass: #b88a3e;
  --wood: #7b4a2a;
  --glacier: #2e5f7f;
  --snow: #eef3f6;
  --accent: var(--navy);
  --accent-2: var(--brass);
  --radius: 14px;
  --shadow: 0 1px 2px rgba(16, 38, 59, .06), 0 8px 24px rgba(16, 38, 59, .08);
  --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1160px;
}
body.urlaub { --accent: var(--wood); --accent-2: var(--glacier); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.6 var(--sans); }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3 { font-family: var(--serif); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0 0 .5em; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
:focus-visible { outline: 3px solid var(--accent-2); outline-offset: 3px; border-radius: 4px; }
.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 12px; }
.eyebrow { font: 600 .78rem/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--accent-2); margin-bottom: .9em; }
.lead { font-size: 1.15rem; color: var(--ink-soft); max-width: 62ch; }
.section { padding: clamp(48px, 8vw, 96px) 0; }
.section.alt { background: var(--card); border-block: 1px solid var(--line); }
.hinweis-entwurf { background: #fff4d6; color: #5c4300; font-size: .85rem; text-align: center; padding: 6px 16px; }

/* Kopf */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 241, .92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--navy-deep); text-decoration: none; }
.logo svg { width: 34px; height: 34px; flex: none; }
.logo span { font: 600 1.2rem/1 var(--serif); letter-spacing: .01em; white-space: nowrap; }
.logo b { color: var(--brass); font-weight: 600; }
.nav { display: flex; align-items: center; gap: 4px; }
.nav a { color: var(--ink); text-decoration: none; padding: 10px 12px; border-radius: 8px; font-weight: 500; }
.nav a:hover, .nav a[aria-current="page"] { background: rgba(27, 58, 87, .08); }
.lang { font-size: .85rem; color: var(--ink-soft); margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--line); white-space: nowrap; }
.lang [aria-disabled="true"] { opacity: .45; }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; font: inherit; color: var(--ink); }
@media (max-width: 760px) {
  .menu-btn { display: inline-block; }
  .nav { display: none; position: absolute; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--paper); border-bottom: 1px solid var(--line); padding: 8px 16px 16px; }
  .nav.offen { display: flex; }
  .lang { border: 0; margin: 8px 0 0; padding: 10px 12px; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 22px; border-radius: 999px; font-weight: 600; text-decoration: none; border: 2px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; font-size: 1rem; }
.btn:hover { filter: brightness(1.1); }
.btn.ghost { background: transparent; color: var(--accent); }
.btn.light { background: #fff; color: var(--ink); border-color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* Startseite: zwei Kacheln */
.portal { display: grid; grid-template-columns: 1fr 1fr; min-height: calc(100svh - 64px - 160px); }
.kachel { position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: clamp(28px, 5vw, 64px); color: #fff; text-decoration: none; overflow: hidden; isolation: isolate; min-height: 420px; }
.kachel h2 { font-size: clamp(2.2rem, 5vw, 3.6rem); margin-bottom: .25em; }
.kachel p { max-width: 34ch; font-size: 1.1rem; opacity: .92; }
.kachel .mehr { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; margin-top: 8px; }
.kachel .mehr::after { content: "→"; transition: transform .2s; }
.kachel:hover .mehr::after { transform: translateX(6px); }
.kachel-hv { background: radial-gradient(120% 90% at 0% 0%, #2a5378 0%, var(--navy) 45%, var(--navy-deep) 100%); }
.kachel-hv .muster { position: absolute; inset: 0; z-index: -1; opacity: .13; }
.kachel-urlaub img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.kachel-urlaub::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 20, 30, 0) 20%, rgba(10, 20, 30, .45) 50%, rgba(10, 20, 30, .82) 100%); }
.kachel h2, .kachel p { text-shadow: 0 1px 12px rgba(0, 0, 0, .35); }
.kachel-urlaub:hover img { transform: scale(1.04); }
/* Urlaub-Kachel der Startseite: links Schnee, rechts Sonne, schräg geteilt */
.kachel-geteilt img.sonnenseite { clip-path: polygon(72% 0, 100% 0, 100% 100%, 44% 100%); }
.kachel-geteilt .naht { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; pointer-events: none; }
.kachel-geteilt:hover img { transform: none; }
.kachel-geteilt::before { background: linear-gradient(90deg, rgba(10, 20, 30, .62) 0%, rgba(10, 20, 30, .42) 45%, rgba(10, 20, 30, .08) 75%, rgba(10, 20, 30, 0) 100%), linear-gradient(180deg, rgba(10, 20, 30, 0) 55%, rgba(10, 20, 30, .35) 100%); }
.tags { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.tag { font-size: .8rem; font-weight: 600; letter-spacing: .04em; padding: 5px 12px; border-radius: 999px; color: #fff; background: rgba(10, 22, 34, .62); border: 1px solid rgba(255, 255, 255, .28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
@media (max-width: 760px) { .portal { grid-template-columns: 1fr; } .kachel { min-height: 360px; } }
.start-intro { text-align: center; padding: 40px 0 36px; }
.start-intro p { margin: 0 auto; color: var(--ink-soft); max-width: 60ch; }

/* Hausverwaltung */
.hv-hero { background: linear-gradient(180deg, var(--card), var(--paper)); padding: clamp(48px, 8vw, 96px) 0 40px; }
.hv-hero .wrap { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; }
@media (max-width: 860px) { .hv-hero .wrap { grid-template-columns: 1fr; } }
.notdienst { background: var(--navy-deep); color: #fff; border-radius: var(--radius); padding: 24px 26px; box-shadow: var(--shadow); }
.notdienst h2 { font-size: 1.3rem; color: #fff; margin-bottom: .3em; }
.notdienst a.tel { display: block; font: 600 1.7rem/1.2 var(--serif); color: #fff; text-decoration: none; margin: 6px 0 10px; }
.notdienst small { color: #c9d6e2; display: block; }
.notdienst .zeile { display: flex; gap: 10px; align-items: center; }
.notdienst svg { width: 22px; height: 22px; color: var(--brass); flex: none; }
.grid { display: grid; gap: 20px; }
.grid.g4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.grid.g3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }
.grid.g2 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.karte { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px; }
.karte .ico { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: rgba(27, 58, 87, .08); color: var(--accent); margin-bottom: 16px; }
body.urlaub .karte .ico { background: rgba(123, 74, 42, .09); }
.karte .ico svg { width: 24px; height: 24px; }
.karte p:last-child, .karte ul:last-child { margin-bottom: 0; }
.karte ul { padding-left: 1.1em; color: var(--ink-soft); }
.login-karte { display: flex; flex-direction: column; gap: 10px; }
.login-karte .btn { align-self: flex-start; margin-top: auto; }
.karten-foto { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; margin-bottom: 6px; }
.status { display: inline-block; font-size: .78rem; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: #eef2f6; color: var(--navy); }

/* Formulare */
form .feld { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
form label { font-weight: 600; font-size: .95rem; }
form input, form select, form textarea { font: inherit; padding: 12px 14px; border: 1px solid #cfc8bb; border-radius: 10px; background: #fff; color: var(--ink); width: 100%; }
form textarea { min-height: 130px; resize: vertical; }
form .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { form .zwei { grid-template-columns: 1fr; } }
.honig { position: absolute; left: -9999px; }
.klein { font-size: .85rem; color: var(--ink-soft); }

/* Chalet */
.hero { position: relative; min-height: min(88svh, 760px); display: flex; align-items: flex-end; color: #fff; isolation: isolate; }
.hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 18, 28, .55) 0%, rgba(8, 18, 28, .15) 60%, rgba(8, 18, 28, 0) 100%), linear-gradient(180deg, rgba(8, 18, 28, .2) 0%, rgba(8, 18, 28, 0) 30%, rgba(8, 18, 28, .75) 100%); }
.hero .wrap { padding-bottom: clamp(32px, 6vw, 72px); }
.hero h1 { font-size: clamp(2.4rem, 7vw, 4.8rem); margin-bottom: .2em; text-shadow: 0 2px 24px rgba(0, 0, 0, .25); }
.hero p { font-size: clamp(1.05rem, 2vw, 1.3rem); max-width: 44ch; }
.subnav { background: var(--card); border-bottom: 1px solid var(--line); position: sticky; top: 64px; z-index: 40; }
.subnav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.subnav a { display: block; padding: 14px 14px; white-space: nowrap; color: var(--ink-soft); text-decoration: none; font-weight: 500; border-bottom: 2px solid transparent; }
.subnav a:hover, .subnav a[aria-current="page"] { color: var(--ink); border-color: var(--accent); }
.fakten { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); margin-top: -48px; position: relative; }
.fakten div { padding: 22px 20px; border-left: 1px solid var(--line); }
.fakten div:first-child { border-left: 0; }
.fakten strong { display: block; font: 600 1.6rem/1.1 var(--serif); color: var(--accent); }
.fakten span { font-size: .9rem; color: var(--ink-soft); }
@media (max-width: 760px) { .fakten { grid-template-columns: 1fr 1fr; margin-top: 24px; } .fakten div:nth-child(3) { border-left: 0; } .fakten div:nth-child(n+3) { border-top: 1px solid var(--line); } }
.zweispaltig { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.zweispaltig img { border-radius: var(--radius); box-shadow: var(--shadow); }
@media (max-width: 860px) { .zweispaltig { grid-template-columns: 1fr; } }
.galerie { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 10px; }
.galerie a { display: block; overflow: hidden; border-radius: 10px; position: relative; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.galerie a:hover img { transform: scale(1.05); }
.galerie .gross { grid-column: span 2; grid-row: span 2; }
.galerie .breit { grid-column: span 2; }
@media (max-width: 760px) { .galerie { grid-template-columns: 1fr 1fr; grid-auto-rows: 140px; } }
.ausstattung { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 12px 24px; }
.ausstattung li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ausstattung svg { width: 24px; height: 24px; color: var(--accent); flex: none; }
.preise { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); }
.preise th, .preise td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.preise th { font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-soft); background: var(--snow); }
.preise td.betrag { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.preise th.betrag { text-align: right; }
.preise tr.hoch td { background: #fbf7f1; }
.einwilligung { position: relative; aspect-ratio: 16/9; border-radius: var(--radius); overflow: hidden; background: #0e1a24; color: #fff; display: grid; place-items: center; text-align: center; }
.einwilligung img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .45; }
.einwilligung > div { position: relative; padding: 24px; max-width: 46ch; }
.einwilligung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cta-band { background: var(--accent); color: #fff; border-radius: var(--radius); padding: clamp(28px, 5vw, 56px); display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.cta-band h2 { color: #fff; margin: 0 0 .2em; }
.cta-band p { margin: 0; opacity: .9; }

/* Unterseiten-Kopf (kleineres Hero) */
.hero.klein { min-height: min(52svh, 460px); }
.hero.klein h1 { font-size: clamp(2rem, 5.5vw, 3.6rem); }
.seitenkopf { padding: clamp(40px, 7vw, 80px) 0 clamp(24px, 4vw, 40px); background: linear-gradient(180deg, var(--card), var(--paper)); border-bottom: 1px solid var(--line); }

/* Fließtext (Rechtstexte, Mietbedingungen, Gäste-Infos) */
.text { max-width: 72ch; }
.text h2 { font-size: 1.5rem; margin-top: 1.8em; }
.text h3 { margin-top: 1.4em; }
.text ul, .text ol { padding-left: 1.2em; }
.text li { margin-bottom: .35em; }
.text address { font-style: normal; }
.platzhalter { background: #fff4d6; padding: 0 4px; border-radius: 4px; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 32px; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 6px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); text-decoration: none; color: var(--ink); font-size: .92rem; }
.toc a:hover { border-color: var(--accent); }

/* Bereichsauswahl Urlaub */
.kachel-sonne { background: linear-gradient(160deg, #f3b562 0%, #e07a4f 45%, #2f6f8f 100%); }
.kachel-sonne .muster { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }
.portal.kurz { min-height: 520px; }

/* Sonne */
.sonne-seite { position: relative; min-height: calc(100svh - 64px); display: grid; place-items: center; text-align: center; color: #fff; overflow: hidden; isolation: isolate; background: linear-gradient(180deg, #f6c77d 0%, #ec8b5e 42%, #2f6f8f 70%, #1d4d66 100%); }
.sonne-seite svg.szene { position: absolute; inset: auto 0 0 0; width: 100%; height: 55%; z-index: -1; }
.sonne-seite .wrap { padding: 64px 0 160px; }
.sonne-seite h1 { text-shadow: 0 2px 20px rgba(80, 30, 0, .25); }
.sonne-seite p { max-width: 48ch; margin-inline: auto; font-size: 1.15rem; }
.sonne-seite .karte { color: var(--ink); text-align: left; max-width: 520px; margin: 28px auto 0; }

/* Login */
.login-wrap { min-height: 70svh; display: grid; place-items: center; padding: 56px 16px; }
.login-box { width: min(460px, 100%); }
.login-box .hinweis { background: var(--snow); border: 1px solid #d5e1ea; color: var(--navy); border-radius: 10px; padding: 14px 16px; margin-bottom: 20px; font-size: .95rem; }
.login-box fieldset { border: 0; padding: 0; margin: 0; }
.login-box fieldset[disabled] { opacity: .55; }

/* Belegungskalender */
.kalender-platzhalter { border: 2px dashed var(--line); border-radius: var(--radius); padding: 28px; text-align: center; color: var(--ink-soft); background: var(--card); }

/* Lightbox */
.lightbox { position: fixed; inset: 0; background: rgba(6, 12, 18, .94); display: none; align-items: center; justify-content: center; z-index: 200; padding: 16px; }
.lightbox.offen { display: flex; }
.lightbox img { max-height: 86vh; max-width: 100%; border-radius: 8px; }
.lightbox button { position: absolute; background: rgba(255, 255, 255, .12); color: #fff; border: 0; width: 48px; height: 48px; border-radius: 50%; font-size: 1.5rem; cursor: pointer; }
.lightbox .zu { top: 16px; right: 16px; }
.lightbox .zurueck { left: 16px; top: 50%; }
.lightbox .vor { right: 16px; top: 50%; }

/* Fußzeile */
.site-footer { background: var(--navy-deep); color: #c9d6e2; padding: 48px 0 32px; margin-top: 0; font-size: .95rem; }
.site-footer .wrap { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
.site-footer h3 { color: #fff; font-size: 1rem; font-family: var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.site-footer .logo { color: #fff; margin-bottom: 12px; }
.site-footer .unten { grid-column: 1 / -1; border-top: 1px solid rgba(255, 255, 255, .12); padding-top: 20px; font-size: .85rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
@media (max-width: 760px) { .site-footer .wrap { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; } }

/* Hausverwaltung: Foto in Kachel und Kopfbereich, mit Marine-Schleier für lesbare Schrift */
.kachel-hv img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s ease; }
.kachel-hv:has(img)::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 38, 59, .35) 0%, rgba(16, 38, 59, .88) 75%); }
.kachel-hv:hover img { transform: scale(1.04); }
.hv-hero.mit-bild { position: relative; isolation: isolate; color: #fff; background: var(--navy-deep); overflow: hidden; padding-bottom: clamp(48px, 8vw, 96px); }
.hv-hero .hv-bild { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hv-hero.mit-bild::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(16, 38, 59, .94) 0%, rgba(16, 38, 59, .82) 50%, rgba(16, 38, 59, .45) 100%); }
.hv-hero.mit-bild .lead { color: #dbe5ee; }
.hv-hero.mit-bild .eyebrow { color: #d9b26a; }
.hv-hero.mit-bild .btn:not(.ghost) { background: var(--brass); border-color: var(--brass); }
.btn.ghost.hell { color: #fff; border-color: #fff; }
.hv-hero.mit-bild .notdienst { background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .25); backdrop-filter: blur(8px); }
@media (max-width: 860px) { .hv-hero.mit-bild::before { background: linear-gradient(180deg, rgba(16, 38, 59, .7) 0%, rgba(16, 38, 59, .85) 100%); } }

/* Formular-Rückmeldungen */
.formular-meldung { margin: 12px 0 0; font-size: .95rem; color: var(--ink-soft); }
.formular-meldung:empty { display: none; }
.formular-meldung.fehler { color: #a3281e; font-weight: 600; }
.formular-erfolg { background: var(--card); border: 1px solid var(--line); border-left: 4px solid #2e7d4f; border-radius: var(--radius); padding: 26px; color: var(--ink); text-align: left; }
.formular-erfolg:focus { outline: none; }
.sonne-seite .formular-erfolg { max-width: 520px; margin: 28px auto 0; }

/* Portal */
.portal-kopf { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.portal-raster { margin: 20px 0; align-items: start; }
.doku-liste { list-style: none; padding: 0; margin: 0; }
.doku-liste li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.doku-liste li:last-child { border-bottom: 0; }
.kennzahlen { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 8px 0; }
.kennzahlen dt { color: var(--ink-soft); }
.kennzahlen dd { margin: 0; font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
#portal.breit { width: min(var(--wrap), 100%); }
.login-wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
#portal .karte { min-width: 0; overflow-wrap: anywhere; }
#portal .tabelle-scroll { overflow-x: auto; }
#portal .tabelle-scroll table.preise { white-space: nowrap; }
#portal .objekt-titel { font-size: 1.5rem; margin: 32px 0 12px; padding-top: 20px; border-top: 1px solid var(--line); }
#portal > .karte { margin-bottom: 20px; }
.hinweis-box { background: #fbf4e6; border: 1px solid #ecd9b0; border-radius: 10px; padding: 12px 14px; margin-top: 12px; }
.hinweis-box p { margin: 6px 0 0; }
.frist { color: #a3281e; font-weight: 600; font-size: .9rem; }
/* Dokumenten-Eingang (Verwaltung) */
.haken { display: flex; align-items: center; gap: 8px; font-weight: 600; margin: 8px 0 14px; cursor: pointer; }
.haken input { width: auto; }
.vorschlag { border-top: 1px solid var(--line); margin-top: 20px; padding-top: 8px; }
.vorschlag h3 { margin: 22px 0 8px; font-size: 1.1rem; }
/* Fristen-Karte im Eigentümer-Portal: linker Farbbalken je Dringlichkeit */
.fristen li { padding-left: 12px; border-left: 4px solid #d5e1ea; margin-bottom: 4px; hyphens: auto; -webkit-hyphens: auto; }
.fristen li.bald { border-left-color: var(--brass); }
.fristen li.ueberfaellig { border-left-color: #a3281e; }
.frist-datum { display: inline-block; min-width: 9.5em; font-weight: 600; font-size: .9rem; color: var(--navy); }
.fristen li.ueberfaellig .frist-datum { color: #a3281e; }