/* GVG Andresen – Website 2026
   Design "Abendlicht, hell": Briefbogen-Kopf mit GVG-Monogramm, Fassadenfoto, warmes Papier, Kupfer.
   Schriften lokal: Libre Caslon Display/Text (OFL), Archivo (OFL). */

@font-face { font-family: "Libre Caslon Display"; src: url("fonts/libre-caslon-display-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/libre-caslon-text-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Libre Caslon Text"; src: url("fonts/libre-caslon-text-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Archivo"; src: url("fonts/archivo-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  --paper: #f6f2eb;
  --paper-2: #efe9df;
  --paper-3: #e6dfd2;
  --card: #fbf9f5;
  --ink: #1b2533;
  --ink-2: #3a4351;
  --mut: #666b73;
  --line: #ddd3c3;
  --cu: #9a6232;
  --cu-2: #b07a45;
  --cu-3: #dcae80;
  --night: #1d1f24;
  --night-2: #272a30;
  --night-ink: #f1ece4;
  --night-mut: #b5afa5;

  --serif: "Libre Caslon Display", Georgia, "Times New Roman", serif;
  --serif-t: "Libre Caslon Text", Georgia, serif;
  --sans: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --small: 0.875rem;
  --body: 1.0625rem;
  --lead: clamp(1.1875rem, 1.05rem + 0.45vw, 1.375rem);
  --h3: clamp(1.5rem, 1.3rem + 0.6vw, 1.875rem);
  --h2: clamp(2.25rem, 1.6rem + 2.6vw, 4.25rem);
  --h1: clamp(3rem, 1.6rem + 5.2vw, 6.75rem);

  --m: clamp(20px, 4.5vw, 72px);
  --section: clamp(56px, 6vw, 96px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1); /* für Bewegung zwischen zwei Orten */
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--paper); overflow-x: clip; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--body)/1.65 var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, h4, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img, video, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
p { max-width: 64ch; text-wrap: pretty; }
h1, h2, h3 { font-family: var(--serif); font-weight: 400; letter-spacing: -0.005em; text-wrap: balance; }
:focus-visible { outline: 2px solid var(--cu); outline-offset: 3px; }
::selection { background: var(--cu-3); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.nums { font-variant-numeric: tabular-nums; }
.small { font-size: var(--small); }
.muted { color: var(--mut); }
.arrow { display: inline-block; width: 0.95em; height: 0.95em; flex: none; transition: transform 0.24s var(--ease); }
.skip { position: absolute; left: var(--m); top: -4rem; z-index: 60; padding: 0.8rem 1.1rem; background: var(--ink); color: var(--paper); text-decoration: none; }
.skip:focus { top: 12px; }
.kick { font: 500 0.8125rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cu); }
.page { position: relative; }

/* ---------- Briefbogen-Kopf ---------- */
.lh { padding: 40px var(--m) 0; text-align: center; background: var(--paper); }
.lh__logo { display: inline-block; }
.lh__logo img { width: clamp(110px, 10vw, 150px); height: auto; }
.lh__name { margin: 14px auto 0; max-width: none; font: 500 0.8125rem/1.5 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--mut); }
.lh__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 40px; margin-top: 26px; padding: 15px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: 0.9375rem; }
.lh__nav a { text-decoration: none; padding: 4px 0; transition: color 0.18s ease; }
.lh__nav a[aria-current="page"] { color: var(--cu); }
@media (hover: hover) and (pointer: fine) { .lh__nav a:hover { color: var(--cu); } }
@media (max-width: 760px) {
  .lh { padding-top: 26px; }
  .lh__name { font-size: 0.6875rem; letter-spacing: 0.12em; }
  .lh__nav { justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; gap: 26px; padding-inline: 2px; scrollbar-width: none; }
  .lh__nav a { white-space: nowrap; }
}

/* kompakte Leiste nach dem Kopf */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 40; display: flex; align-items: center; gap: 28px; height: 60px; padding: 0 var(--m); background: rgba(246, 242, 235, 0.97); border-bottom: 1px solid var(--line); transform: translateY(-100%); visibility: hidden; transition: transform 0.26s var(--ease), visibility 0s linear 0.26s; }
.bar.is-on { transform: none; visibility: visible; transition: transform 0.26s var(--ease), visibility 0s; }
.bar__mark img { width: 58px; }
.bar__links { display: flex; gap: 28px; margin-left: auto; font-size: 0.9375rem; }
.bar__links a { text-decoration: none; transition: color 0.18s ease; }
.bar__links a[aria-current="page"] { color: var(--cu); }
@media (hover: hover) and (pointer: fine) { .bar__links a:hover { color: var(--cu); } }
.bar__cta { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 16px; background: var(--cu); color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none; transition: background-color 0.18s ease, transform 0.14s var(--ease); }
.bar__cta:active { transform: scale(0.97); }
@media (max-width: 860px) { .bar__links { display: none; } .bar__cta { margin-left: auto; } }

/* ---------- Knöpfe ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 3.25rem; padding: 0 1.4rem; background: var(--cu); color: #fff; font-weight: 500; text-decoration: none; transition: background-color 0.18s ease, color 0.18s ease, transform 0.14s var(--ease); }
.btn:active { transform: scale(0.98); }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.btn--quiet { background: var(--paper-3); color: var(--ink); }
.on-dark .btn--line, .hero .btn--line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { background: #865429; }
  .btn--ink:hover { background: #0f1825; }
  .btn--line:hover { background: var(--ink); color: var(--paper); }
  .hero .btn--line:hover, .on-dark .btn--line:hover { background: #fff; color: var(--ink); }
  .btn--quiet:hover { background: var(--line); }
  .btn:hover .arrow, a:hover > .arrow { transform: translateX(4px); }
}

/* ---------- Abschnitte ---------- */
.sec { padding: var(--section) var(--m); }
.sec--tint { background: var(--paper-2); }
.sec--night { background: var(--night); color: var(--night-ink); }
.sec--night .kick { color: var(--cu-3); }
/* Ruhiger Fluss (19.10.2026): helle Abschnitte auf einem Papiergrund, getrennt durch eine feine Linie wie im Briefkopf */
main section[id] { scroll-margin-top: 48px; }
.sec--line { position: relative; }
.sec--line::before { content: ""; position: absolute; top: 0; left: var(--m); right: var(--m); height: 1px; background: var(--line); }
.sec--night.sec--line::before { background: #3a3d44; }
/* Das Haus: das Foto greift über die Kante in den hellen Abschnitt davor */
.sec--seam { padding-bottom: calc(var(--section) * 0.75); }
@media (min-width: 961px) {
  .sec--pre-seam { padding-bottom: calc(var(--section) + 110px); }
  .sec--seam .haus { align-items: start; }
  .sec--seam .haus figure { position: relative; z-index: 2; margin-top: calc(-1 * var(--section) - 110px); }
}
/* Kontakt und Fußzeile bilden mit dem Haus einen dunklen Schlussblock, das Formular steht als helle Karte darin */
.sec--close { padding-top: calc(var(--section) * 0.75); }
.sec--close .contact__intro { color: #ddd7cd; }
.sec--close .contact dl { border-top-color: #3a3d44; }
.sec--close .contact dt { color: var(--night-mut); }
.sec--close .contact__mail { color: var(--cu-3); border-bottom-color: rgba(220, 174, 128, 0.4); }
.sec--close .form--card { color: var(--ink); border-color: transparent; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, 0.6); }
.sec__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: 24px clamp(32px, 6vw, 96px); align-items: end; }
.sec__head h2 { margin-top: 16px; font-size: var(--h2); line-height: 1.04; }
.sec__head p:not(.kick) { color: var(--ink-2); font-size: var(--lead); line-height: 1.5; }
@media (max-width: 860px) { .sec__head { grid-template-columns: 1fr; } }

/* ---------- Hero ---------- */
.hero { position: relative; display: flex; align-items: flex-end; min-height: clamp(560px, 78svh, 900px); overflow: hidden; color: #fff; background: #3a3530; }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(22, 19, 16, 0.66) 0%, rgba(22, 19, 16, 0.42) 38%, rgba(22, 19, 16, 0) 68%), linear-gradient(180deg, rgba(22, 19, 16, 0) 40%, rgba(22, 19, 16, 0.55) 100%); }
@media (max-width: 760px) { .hero::after { background: linear-gradient(180deg, rgba(22, 19, 16, 0.1) 0%, rgba(22, 19, 16, 0.5) 45%, rgba(22, 19, 16, 0.8) 100%); } }
.hero__in { position: relative; z-index: 2; width: 100%; padding: 0 var(--m) clamp(48px, 8vh, 96px); }
.hero h1 { font-size: var(--h1); line-height: 0.98; letter-spacing: -0.01em; text-shadow: 0 1px 24px rgba(0, 0, 0, 0.18); }
.hero h1 em { font-family: var(--serif-t); font-style: italic; color: var(--cu-3); }
.hero p { margin-top: 26px; max-width: 46ch; font-size: var(--lead); line-height: 1.5; color: #f3eee6; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--card); border-bottom: 1px solid var(--line); }
.facts div { padding: 30px var(--m); border-right: 1px solid var(--line); }
.facts div:last-child { border-right: 0; }
.facts b { display: block; font: 400 clamp(2rem, 1.5rem + 1.4vw, 2.75rem)/1 var(--serif); color: var(--cu); }
.facts span { display: block; margin-top: 10px; font-size: var(--small); color: var(--mut); }
@media (max-width: 860px) { .facts { grid-template-columns: 1fr 1fr; } .facts div:nth-child(2) { border-right: 0; } .facts div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

/* ---------- Freie Flächen ---------- */
.list { margin-top: 56px; border-top: 1px solid var(--ink); }
.list a { display: grid; grid-template-columns: 132px 150px minmax(0, 1fr) minmax(0, 220px) 150px; gap: 28px; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; transition: background-color 0.2s ease; }
.list__th img { width: 132px; height: 92px; object-fit: cover; }
.list__city { font-size: var(--small); color: var(--mut); }
.list__st { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.1 var(--serif); transition: color 0.2s ease; }
.list__ty { font-size: 0.9375rem; color: var(--ink-2); }
.list__go { display: flex; justify-content: flex-end; align-items: center; gap: 14px; }
.list__go b { font-weight: 500; font-variant-numeric: tabular-nums; }
.list__go .arrow { color: var(--cu); }
@media (hover: hover) and (pointer: fine) { .list a:hover { background: var(--card); } .list a:hover .list__st { color: var(--cu); } .list a:hover .arrow { transform: translateX(4px); } }
.list__foot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 32px; margin-top: 28px; color: var(--mut); font-size: 0.9375rem; }
@media (max-width: 960px) {
  .list a { grid-template-columns: 96px minmax(0, 1fr) auto; gap: 4px 18px; }
  .list__th { grid-row: span 3; }
  .list__th img { width: 96px; height: 96px; }
  .list__city, .list__st, .list__ty { grid-column: 2; }
  .list__go { grid-column: 3; grid-row: 1 / span 3; }
}
@media (max-width: 520px) { .list__go b { display: none; } .list__ty { font-size: var(--small); } }

/* ---------- Werkzeuge ---------- */
.tools { margin-top: 56px; display: grid; gap: 24px; }
.tools__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.tool { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr); background: var(--card); border: 1px solid var(--line); }
.tool__media { position: relative; min-height: 100%; background: var(--paper-3); }
.tool__media img, .tool__media video { width: 100%; height: 100%; object-fit: cover; }
.tool__body { display: flex; flex-direction: column; gap: 14px; padding: 32px 30px; }
.tool__body h3 { font-size: var(--h3); line-height: 1.12; }
.tool__body p { color: var(--ink-2); font-size: 0.9875rem; }
.tool__body .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 1100px) { .tools__row { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tool { grid-template-columns: 1fr; } .tool__media { aspect-ratio: 4 / 3; } }

/* Ihr Name über der Tür */
.plate { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); background: var(--card); border: 1px solid var(--line); }
.plate__pic { padding: 28px; background: var(--paper-3); }
.plate__right { display: flex; flex-direction: column; gap: 28px; padding: 36px clamp(24px, 3vw, 48px); }
.plate h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem); line-height: 1.05; }
.plate__text p { margin-top: 14px; color: var(--ink-2); max-width: 44ch; }
.tabs { display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: 0.9375rem; border-bottom: 1px solid var(--line); }
.tabs button { padding: 0 0 12px; color: var(--mut); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.18s ease, border-color 0.18s ease; }
.tabs button[aria-selected="true"] { color: var(--ink); border-color: var(--cu); font-weight: 500; }
@media (hover: hover) and (pointer: fine) { .tabs button:hover { color: var(--ink); } }
.namefield { margin-top: 26px; }
.namefield label { display: block; margin-bottom: 6px; font-size: var(--small); font-weight: 500; }
.namefield input { width: 100%; min-height: 3.5rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 0; background: #fff; color: var(--ink); font: 400 1.375rem/1 var(--serif); transition: border-color 0.18s ease; }
.namefield input:focus { outline: 2px solid var(--cu); outline-offset: 0; border-color: var(--cu); }
.swatches { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
.swatches span { margin-right: 6px; font-size: var(--small); color: var(--mut); }
.swatches button { width: 32px; height: 32px; background: var(--sw); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12); transition: transform 0.14s var(--ease); }
.swatches button:active { transform: scale(0.92); }
.swatches button[aria-pressed="true"] { outline: 2px solid var(--ink); outline-offset: 2px; }
.share-note { min-height: 1.4em; margin-top: 10px; font-size: var(--small); color: var(--mut); }
.copy-link { font-size: var(--small); color: var(--cu); text-decoration: underline; text-underline-offset: 0.2em; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.viz { position: relative; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; background: var(--paper-3); }
.viz__img { position: absolute; inset: 0; }
.viz__img img { width: 100%; height: 100%; object-fit: cover; }
.viz__sign { position: absolute; left: 0; top: 0; transform-origin: 0 0; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--sign-bg, #1b2533); color: var(--sign-ink, #fff); font-family: var(--sans); }
.viz__sign span { display: block; font-weight: 600; letter-spacing: -0.01em; line-height: 1; white-space: nowrap; }
.viz figcaption { position: absolute; left: 0; bottom: 0; padding: 7px 10px; background: rgba(251, 249, 245, 0.94); font-size: 0.8125rem; color: var(--ink-2); }
@media (max-width: 960px) { .plate { grid-template-columns: 1fr; } .plate__pic { padding: 16px; } }

/* ---------- Das Haus ---------- */
.haus { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(40px, 7vw, 120px); align-items: center; }
.haus blockquote { margin-top: 18px; font: 400 clamp(2.5rem, 1.6rem + 3.4vw, 5rem)/1.04 var(--serif); }
.haus blockquote em { font-family: var(--serif-t); font-style: italic; color: var(--cu-3); }
.haus p { margin-top: 24px; color: #ddd7cd; max-width: 54ch; }
.haus p + p { margin-top: 14px; }
.haus dl { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 48px; margin-top: 36px; padding-top: 24px; border-top: 1px solid #3a3d44; }
.haus dt { font-size: var(--small); color: var(--night-mut); }
.haus dd { margin-top: 4px; }
.haus figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.haus figcaption { margin-top: 10px; font-size: 0.8125rem; color: var(--night-mut); }
@media (max-width: 960px) { .haus { grid-template-columns: 1fr; } .haus dl { grid-template-columns: 1fr 1fr; } .haus figure img { aspect-ratio: 4 / 3; } }

/* ---------- Leistungen ---------- */
.serv { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(32px, 4vw, 64px); margin-top: 44px; }
.serv h3 { padding-top: 20px; border-top: 1px solid var(--cu-2); font-size: var(--h3); line-height: 1.15; }
.serv p { margin-top: 12px; color: var(--ink-2); font-size: 0.9875rem; }
@media (max-width: 960px) { .serv { grid-template-columns: 1fr 1fr; } }
@media (max-width: 620px) { .serv { grid-template-columns: 1fr; } }

/* ---------- Kontakt ---------- */
.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px clamp(40px, 7vw, 120px); align-items: end; }
.contact h2 { margin-top: 16px; font-size: var(--h2); line-height: 1.04; }
.contact__mail { display: inline-block; margin-top: 28px; font: 400 clamp(1.75rem, 1.2rem + 2vw, 3.25rem)/1.1 var(--serif); color: var(--cu); text-decoration: none; border-bottom: 1px solid var(--cu-3); transition: color 0.18s ease; }
@media (hover: hover) and (pointer: fine) { .contact__mail:hover { color: var(--ink); } }
.contact__sig { margin-top: 26px; font: italic 400 1.375rem/1.3 var(--serif-t); color: var(--cu); }
.contact dl { display: grid; grid-template-columns: auto 1fr; gap: 12px 28px; padding-top: 18px; border-top: 1px solid var(--ink); font-size: 0.9875rem; }
.contact dt { color: var(--mut); }
.contact dd a { text-decoration: none; }
@media (max-width: 860px) { .contact { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { background: var(--night); color: var(--night-ink); padding: 64px var(--m) 32px; }
.foot__top { display: grid; grid-template-columns: 1.3fr repeat(3, minmax(0, 1fr)); gap: 32px; }
.foot__brand img { width: 108px; }
.foot__brand p { margin-top: 18px; font-size: var(--small); color: var(--night-mut); max-width: 30ch; }
.foot h3 { font: 500 0.8125rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cu-3); margin-bottom: 14px; }
.foot ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.foot a { color: #ddd7cd; text-decoration: none; transition: color 0.18s ease; }
@media (hover: hover) and (pointer: fine) { .foot a:hover { color: #fff; } }
.foot--joined { padding-top: 8px; }
.foot--joined .foot__top { padding-top: 48px; border-top: 1px solid #34373e; }
@media (max-width: 640px) {
  .serv { grid-template-columns: 1fr; gap: 0; margin-top: 28px; }
  .serv > div { padding: 16px 0; }
  .serv h3 { padding-top: 14px; }
  .serv p { margin-top: 6px; font-size: 0.9375rem; }
}
.foot__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; margin-top: 56px; padding-top: 22px; border-top: 1px solid #34373e; font-size: 0.8125rem; color: var(--night-mut); }
@media (max-width: 860px) { .foot__top { grid-template-columns: 1fr 1fr; } .foot__brand { grid-column: 1 / -1; } }

/* Energieausweis im Exposé */
.x-energy { margin-top: 40px; padding: 22px 24px; background: var(--card); border: 1px solid var(--line); max-width: 46rem; }
.x-energy h3 { font-size: var(--h3); margin-bottom: 12px; }
.x-energy dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 28px; font-size: 0.9375rem; }
.x-energy dt { font-size: var(--small); color: var(--mut); }
.x-energy dd { margin-top: 2px; }
.x-energy__note { margin-top: 14px; font-size: var(--small); color: var(--cu); }
@media (max-width: 640px) { .x-energy dl { grid-template-columns: 1fr; } }

/* Kontakt mit Formular auf der Startseite */
.contact { align-items: start; }
.contact__intro { margin-top: 20px; color: var(--ink-2); max-width: 40ch; }
.contact dl { margin-top: 32px; }
.form--card { padding: 28px; background: var(--card); border: 1px solid var(--line); }

/* =========================================================
   Unterseiten: Seitenkopf
   ========================================================= */
.ph { padding: clamp(40px, 6vw, 88px) var(--m) 0; }
.crumbs { font-size: var(--small); color: var(--mut); }
.crumbs a { color: var(--cu); text-decoration: none; }
.ph h1 { margin-top: 14px; font-size: clamp(2.75rem, 1.6rem + 4.4vw, 6rem); line-height: 1; }
.ph__sub { margin-top: 14px; font-size: var(--lead); color: var(--ink-2); }

/* =========================================================
   EXPOSÉ
   ========================================================= */
.x-meta { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 40px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
.x-meta > div { padding: 18px 20px 20px 0; }
.x-meta > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.x-meta dt { font-size: var(--small); color: var(--mut); }
.x-meta dd { margin-top: 6px; font: 400 clamp(1.375rem, 1.1rem + 0.8vw, 1.875rem)/1.1 var(--serif); }
.x-meta > div:last-child dd { color: var(--cu); }
@media (max-width: 860px) { .x-meta { grid-template-columns: 1fr 1fr; } .x-meta > div:nth-child(3) { padding-left: 0; border-left: 0; } .x-meta > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); } }

.x-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 24px; padding: 32px var(--m) 0; }
.x-gallery { background: var(--card); border: 1px solid var(--line); }
.x-gallery__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: var(--paper-3); }
.x-gallery__stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.42s var(--ease); }
.x-gallery__stage img[hidden] { display: block; opacity: 0; pointer-events: none; }
.x-gallery__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 10px 10px 10px 16px; font-size: var(--small); color: var(--ink-2); }
.x-gallery__bar p { max-width: none; }
.x-gallery__nav { display: flex; gap: 6px; }
.x-gallery__nav button { display: grid; place-items: center; width: 46px; height: 46px; background: var(--ink); color: #fff; transition: transform 0.14s var(--ease), background-color 0.18s ease; }
.x-gallery__nav button:active { transform: scale(0.94); }
.x-gallery__nav button:first-child .arrow { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) { .x-gallery__nav button:hover { background: var(--cu); } }
.x-side { display: flex; flex-direction: column; gap: 10px; }
.x-facts { flex: 1; display: flex; flex-direction: column; padding: 24px 24px 26px; background: var(--card); border: 1px solid var(--line); }
.x-facts h2 { font-size: var(--h3); margin-bottom: 12px; }
.x-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.35; font-variant-numeric: tabular-nums; }
.x-table th, .x-table td { padding: 10px 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.x-table th { font-weight: 500; padding-right: 12px; }
.x-table td.r { text-align: right; white-space: nowrap; padding-left: 12px; }
.x-table .desc { color: var(--mut); }
.x-table tr.total th, .x-table tr.total td { border-bottom: 0; padding-top: 14px; font: 400 1.25rem/1.2 var(--serif); }
.x-rent { display: flex; justify-content: space-between; gap: 1rem; margin-top: 16px; font-size: 0.9375rem; }
.x-rent b { font-weight: 500; color: var(--cu); }
.x-person { display: grid; gap: 2px; margin-top: auto; padding-top: 26px; font-size: var(--small); line-height: 1.5; }
.x-person span { color: var(--mut); }
.x-person b { font: italic 400 1.25rem/1.3 var(--serif-t); color: var(--ink); }
.x-person a { width: fit-content; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .x-person a:hover { color: var(--cu); } }
.x-side .btn { min-height: 3.75rem; }
@media (max-width: 960px) { .x-main { grid-template-columns: 1fr; } }

.x-body { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 40px clamp(32px, 6vw, 96px); padding: var(--section) var(--m); }
.x-body aside dl { display: grid; gap: 22px; font-size: 0.9375rem; }
.x-body aside dt { color: var(--mut); font-size: var(--small); }
.x-body aside dd a { text-decoration: none; color: var(--cu); }
.x-body__lead p { font: 400 clamp(1.625rem, 1.2rem + 1.4vw, 2.5rem)/1.2 var(--serif); max-width: 30ch; }
.x-body__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 40px; color: var(--ink-2); }
.x-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.x-tags li { padding: 6px 12px; border: 1px solid var(--line); font-size: var(--small); color: var(--ink-2); }
@media (max-width: 860px) { .x-body, .x-body__cols { grid-template-columns: 1fr; } }

.x-viz { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; padding: var(--section) var(--m); background: var(--paper-2); }
.x-viz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.x-viz h2 { margin-top: 14px; font-size: var(--h2); line-height: 1.04; }
.x-viz p { margin-top: 18px; color: var(--ink-2); max-width: 40ch; }
@media (max-width: 860px) { .x-viz { grid-template-columns: 1fr; } }

.x-plans { padding: var(--section) var(--m); }
.x-plans h2, .x-form h2 { font-size: var(--h2); line-height: 1.04; margin-bottom: 44px; }
.x-plans__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 32px 24px; align-items: start; }
.x-plan { grid-column: span 6; }
.x-plan--wide { grid-column: 1 / -1; }
.x-plan--small { grid-column: span 4; }
.x-plan a { display: block; padding: 16px; background: #fff; border: 1px solid var(--line); transition: border-color 0.2s ease; }
@media (hover: hover) and (pointer: fine) { .x-plan a:hover { border-color: var(--cu-2); } }
.x-plan img { width: auto; max-width: 100%; height: auto; max-height: 68vh; margin: 0 auto; object-fit: contain; }
.x-plan figcaption { margin-top: 10px; font-size: var(--small); color: var(--mut); }
@media (max-width: 860px) { .x-plan, .x-plan--small { grid-column: 1 / -1; } }

.x-form { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 40px clamp(32px, 6vw, 96px); padding: var(--section) var(--m); background: var(--paper-2); }
.x-form h2 { margin-bottom: 18px; }
.x-form__intro p { color: var(--ink-2); max-width: 34ch; }
.x-form__contact { margin-top: 26px; font-size: 0.9375rem; line-height: 1.6; }
.x-form__contact b { font: italic 400 1.25rem/1.3 var(--serif-t); }
.x-form__contact a { text-decoration: none; color: var(--cu); }
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 22px; }
.form .full { grid-column: 1 / -1; }
.form label { display: block; margin-bottom: 6px; font-size: var(--small); font-weight: 500; }
.form input, .form textarea { width: 100%; min-height: 3.25rem; padding: 0.75rem 0.9rem; border: 1px solid #cdc3b2; border-radius: 0; background: #fff; color: var(--ink); font-size: 1rem; transition: border-color 0.18s ease; }
.form textarea { min-height: 8.5rem; resize: vertical; }
.form input:focus, .form textarea:focus { outline: 2px solid var(--cu); outline-offset: 0; border-color: var(--cu); }
.form .check { display: flex; gap: 0.7rem; align-items: flex-start; }
.form .check input { width: 20px; min-height: 20px; height: 20px; margin-top: 3px; flex: none; accent-color: var(--cu); }
.form .check label { font-weight: 400; margin: 0; font-size: 0.9375rem; line-height: 1.5; }
.form .send { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.form .hint { font-size: 0.8125rem; color: var(--mut); }
.hp { position: absolute; left: -9999px; }
@media (max-width: 860px) { .x-form, .form { grid-template-columns: 1fr; } }

.next { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 56px var(--m); background: var(--night); color: var(--night-ink); text-decoration: none; }
.next small { display: block; font-size: var(--small); color: var(--night-mut); margin-bottom: 8px; }
.next span.t { font: 400 clamp(2.25rem, 1.4rem + 3.4vw, 4.5rem)/1 var(--serif); transition: color 0.2s ease; }
.next .arrow { width: 2.2rem; height: 2.2rem; color: var(--cu-3); }
@media (hover: hover) and (pointer: fine) { .next:hover span.t { color: var(--cu-3); } .next:hover .arrow { transform: translateX(6px); } }

.lightbox { width: min(96vw, 1600px); max-width: none; max-height: 94vh; padding: 0; border: 0; background: #fff; color: var(--ink); }
.lightbox::backdrop { background: rgba(20, 18, 16, 0.82); }
.lightbox img { width: 100%; height: auto; max-height: calc(94vh - 56px); object-fit: contain; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; height: 56px; padding: 0 8px 0 16px; font-size: var(--small); }
.lightbox__bar button { height: 42px; padding: 0 1rem; background: var(--ink); color: #fff; }
.lightbox[open] { animation: lb-in 0.26s var(--ease); }
@keyframes lb-in { from { opacity: 0; transform: scale(0.97); } }

/* =========================================================
   WERKSTATT (intern)
   ========================================================= */
.w-intro { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px clamp(32px, 6vw, 96px); padding: 48px var(--m) 24px; }
.w-intro dl { display: grid; gap: 16px; font-size: 0.9375rem; }
.w-intro dt { font-size: var(--small); color: var(--mut); }
.w-intro dd a { color: var(--cu); }
.w-intro__para p { font: 400 clamp(1.5rem, 1.15rem + 1.2vw, 2.25rem)/1.25 var(--serif); max-width: 34ch; }
.w-list { padding: 24px var(--m) var(--section); }
.w-item { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 28px clamp(32px, 6vw, 96px); padding: 64px 0; border-top: 1px solid var(--line); }
.w-item__name h2 { font-size: clamp(1.875rem, 1.4rem + 1.4vw, 2.75rem); line-height: 1.08; }
.w-item__name p { margin-top: 14px; font-size: var(--small); color: var(--mut); }
.w-item__body > p { color: var(--ink-2); max-width: 60ch; }
.w-item__body > p + p { margin-top: 12px; }
.w-item__body .lead { font: 400 clamp(1.25rem, 1.05rem + 0.6vw, 1.5rem)/1.4 var(--serif-t); color: var(--ink); margin-bottom: 18px; max-width: 46ch; }
.w-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--line); max-width: 58rem; font-size: 0.9375rem; }
.w-facts dt { font-size: var(--small); color: var(--mut); }
.w-facts dd { margin-top: 4px; }
.w-demo { margin-top: 32px; max-width: 64rem; }
.w-pic img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.w-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.status { display: inline-block; margin-right: 6px; padding: 3px 10px; font-size: 0.8125rem; font-weight: 500; }
.status--live { background: var(--cu); color: #fff; }
.status--plan { background: var(--paper-3); color: var(--ink); }
.status--idea { background: var(--ink); color: var(--paper); }
.pano-credit { margin-top: 10px; font-size: 0.8125rem; color: var(--mut); }
@media (max-width: 960px) { .w-intro, .w-item { grid-template-columns: 1fr; } .w-facts { grid-template-columns: 1fr; } }

.pano { position: relative; aspect-ratio: 16 / 9; background: #111; overflow: hidden; touch-action: none; cursor: grab; }
.pano:active { cursor: grabbing; }
.pano canvas { width: 100% !important; height: 100% !important; }
.pano__ui { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; pointer-events: none; }
.pano__ui > * { pointer-events: auto; }
.pano__rooms { display: flex; gap: 6px; flex-wrap: wrap; }
.pano__rooms button, .pano__tools button { height: 42px; padding: 0 14px; background: var(--ink); color: #fff; font-size: 0.9375rem; transition: transform 0.14s var(--ease), background-color 0.18s ease; }
.pano__rooms button[aria-pressed="true"] { background: var(--cu); }
.pano__rooms button:active, .pano__tools button:active { transform: scale(0.96); }
.pano__tools { display: flex; gap: 6px; }
.pano__hint { position: absolute; top: 12px; left: 12px; padding: 6px 10px; background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 0.8125rem; pointer-events: none; transition: opacity 0.6s ease; }
.pano__hot { position: absolute; z-index: 2; display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px 0 8px; background: #fff; color: var(--ink); font-size: 0.9375rem; font-weight: 500; transform: translate(-50%, -50%); transition: opacity 0.2s ease; }
.pano__hot::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: var(--cu); }
.pano__mini { position: absolute; top: 12px; right: 12px; width: 120px; padding: 8px; background: rgba(27, 37, 51, 0.92); color: #fff; font-size: 0.75rem; pointer-events: none; }
.pano__mini svg { width: 100%; height: auto; }
.pano-fallback { padding: 24px; color: #fff; }
@media (max-width: 960px) { .pano { aspect-ratio: 4 / 5; } .pano__mini { display: none; } }

.poster-sheet { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 32px; align-items: start; }
.a4 { aspect-ratio: 210 / 297; display: flex; flex-direction: column; justify-content: space-between; padding: 7%; background: var(--paper); border: 1px solid var(--line); color: var(--ink); container-type: inline-size; }
.a4__top { display: flex; align-items: center; gap: 4%; font-size: 3.6cqw; color: var(--mut); letter-spacing: 0.12em; text-transform: uppercase; }
.a4__top img { width: 22%; }
.a4__big { font: 400 17cqw/0.95 var(--serif); }
.a4__mid { margin-top: 3%; font-size: 4.8cqw; line-height: 1.3; color: var(--ink-2); }
.a4__qr { display: grid; grid-template-columns: 36% 1fr; gap: 6%; align-items: end; }
.a4__qr .qr { padding: 5%; background: #fff; }
.a4__qr .qr svg, .a4__qr .qr img { width: 100%; height: auto; }
.a4__qr p { font-size: 4cqw; line-height: 1.35; max-width: none; }
.a4__qr b { display: block; font: 400 6cqw/1.1 var(--serif); color: var(--cu); margin-bottom: 2%; }
.poster-controls label { display: block; margin-bottom: 6px; font-size: var(--small); font-weight: 500; }
.poster-controls select { width: 100%; max-width: 26rem; min-height: 3.25rem; padding: 0 0.9rem; border: 1px solid #cdc3b2; border-radius: 0; background: #fff; }
.poster-controls .btn { margin-top: 14px; }
@media (max-width: 960px) { .poster-sheet { grid-template-columns: 1fr; } }

.rundgang { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 32px; align-items: center; }
.rundgang__video video { width: 100%; height: auto; aspect-ratio: 3 / 4; background: #000; }
.rundgang__script h3 { font-size: var(--h3); margin-bottom: 10px; }
.rundgang__script .small { max-width: 40ch; color: var(--ink-2); }
@media (max-width: 960px) { .rundgang { grid-template-columns: 1fr; } .rundgang__video { max-width: 420px; } }

.db { padding: 24px var(--m) var(--section); }
.db-list { display: grid; }
.db-row { display: grid; grid-template-columns: minmax(0, 0.55fr) auto minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 64px); align-items: center; padding: 26px 0; border-top: 1px solid var(--line); }
.db-row h2 { font-size: var(--h3); }
.db-pics { display: flex; align-items: center; gap: 10px; }
.db-img { width: 150px; height: 200px; object-fit: cover; }
.db-to { color: var(--cu); }
.db-to .arrow { width: 1.3rem; height: 1.3rem; }
.db-single { max-width: 150px; font-size: var(--small); color: var(--mut); }
.db-row p { color: var(--ink-2); max-width: 36ch; }
.db-rule { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 24px clamp(32px, 6vw, 96px); margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--ink); }
.db-rule h2 { font-size: var(--h3); }
.db-rule p { color: var(--ink-2); }
@media (max-width: 960px) { .db-row, .db-rule { grid-template-columns: 1fr; gap: 14px; } .db-img { width: 40vw; height: auto; aspect-ratio: 3 / 4; } }

/* =========================================================
   Textseiten
   ========================================================= */
.doc { display: grid; grid-template-columns: minmax(0, 0.55fr) minmax(0, 1.45fr); gap: 32px clamp(32px, 6vw, 96px); padding: 48px var(--m) var(--section); }
.doc h2 { font-size: var(--h3); margin: 2.4rem 0 0.75rem; }
.doc h2:first-child { margin-top: 0; }
.doc dl { display: grid; grid-template-columns: 14rem 1fr; gap: 0.6rem 1.5rem; }
.doc dt { color: var(--mut); }
.doc p, .doc li { max-width: 66ch; color: var(--ink-2); }
.doc .lead { font: 400 clamp(1.5rem, 1.2rem + 1vw, 2.125rem)/1.25 var(--serif); color: var(--ink); }
@media (max-width: 860px) { .doc { grid-template-columns: 1fr; gap: 0; } .doc dl { grid-template-columns: 1fr; gap: 0.2rem; } .doc dd { margin-bottom: 0.8rem; } }

/* =========================================================
   Übersicht aller Flächen (/flaechen/) mit Filtern
   ========================================================= */
.ov { padding: 36px var(--m) var(--section); }
/* Reiter Gewerbe / Wohnungen: Text mit Kupferlinie, wie im Briefkopf */
.reiter { margin-top: 36px; }
.tabs__list { display: flex; gap: 32px; border-bottom: 1px solid var(--line); }
.tabs__list [role="tab"] { position: relative; min-height: 48px; padding: 0; border: 0; background: none; font: 500 1rem/1 var(--sans); color: var(--mut); cursor: pointer; transition: color 0.18s ease; }
.tabs__list [role="tab"] span { margin-left: 6px; font-weight: 400; font-variant-numeric: tabular-nums; color: var(--mut); }
.tabs__list [role="tab"][aria-selected="true"] { color: var(--ink); }
.tabs__list [role="tab"][aria-selected="true"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--cu); }
.tabs__list [role="tab"]:focus-visible { outline: 2px solid var(--cu); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .tabs__list [role="tab"]:hover { color: var(--ink); } }
html:not(.js) .reiter > .tabs__list { display: none; }
.js .tabs__panel.is-later { display: none; }
.tabs__panel[hidden] { display: none; }
@media (max-width: 640px) { .tabs__list { gap: 24px; } }
/* Kategorie ohne Angebote: Hinweis mit Suchwunsch */
.reiter .list { margin-top: 0; border-top: 0; }
.leer { display: grid; justify-items: start; gap: 10px; max-width: 46rem; padding: 36px 0 8px; }
.leer__t { font: 400 var(--h3)/1.15 var(--serif); color: var(--ink); }
.leer p:not(.leer__t) { color: var(--ink-2); }
.leer .btn { margin-top: 10px; }
.filters { display: grid; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid var(--line); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips button { min-height: 44px; padding: 0 18px; border: 1px solid var(--line); background: var(--card); font-size: 0.9375rem; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; }
.chips button span { margin-left: 6px; color: var(--mut); font-variant-numeric: tabular-nums; }
.chips button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.chips button[aria-pressed="true"] span { color: var(--cu-3); }
@media (hover: hover) and (pointer: fine) { .chips button:hover { border-color: var(--cu-2); } }
.filters__row[hidden], .filters__count[hidden] { display: none; }
.filters__row { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: end; }
.filters__row label { display: grid; gap: 6px; font-size: var(--small); font-weight: 500; }
.filters__row select { min-width: 210px; min-height: 46px; padding: 0 2.2rem 0 0.9rem; border: 1px solid #cdc3b2; border-radius: 0; background: #fff; font-size: 0.9375rem; }
.filters__row select:focus { outline: 2px solid var(--cu); outline-offset: 0; }
.filters__count { font-size: var(--small); color: var(--mut); }
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 28px; margin-top: 36px; }
.card a { display: block; text-decoration: none; }
.card__img { display: block; overflow: hidden; background: var(--paper-3); }
.card__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s var(--ease); }
.card__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: var(--small); color: var(--mut); }
.card__meta b { font-weight: 500; color: var(--cu); font-variant-numeric: tabular-nums; }
.card__st { display: block; margin-top: 4px; font: 400 clamp(1.5rem, 1.25rem + 0.6vw, 1.875rem)/1.12 var(--serif); transition: color 0.2s ease; }
.card__ty { display: block; margin-top: 4px; font-size: 0.9375rem; color: var(--ink-2); }
@media (hover: hover) and (pointer: fine) { .card a:hover .card__img img { transform: scale(1.03); } .card a:hover .card__st { color: var(--cu); } }
.card[hidden] { display: none; }
.ov__empty { margin-top: 36px; color: var(--ink-2); }
.ov__empty a { color: var(--cu); }
@media (max-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .cards { grid-template-columns: 1fr; } .filters__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .filters__row select { min-width: 0; width: 100%; } .filters__row label:last-child { grid-column: 1 / -1; } }

/* =========================================================
   Bewegung (Inhalte bleiben ohne JavaScript sichtbar)
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .js [data-rise] { opacity: 0; transform: translateY(16px); animation: rise 0.9s var(--ease) forwards; animation-delay: calc(var(--i, 0) * 90ms + 150ms); }
  .js .hero__img { animation: settle 2.2s var(--ease) both; }
  /* Nur noch drei Momente bewegen sich: Startbild (data-rise), Flächenliste Zeile für Zeile, Haus-Foto */
  .js [data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity 0.6s var(--ease), transform 0.7s var(--ease); transition-delay: calc(var(--i, 0) * 60ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  /* Haus-Foto öffnet sich von unten, während es über die Kante greift */
  .js [data-wipe] .shutter { clip-path: inset(100% 0 0 0); transition: clip-path 1s var(--ease-io); }
  .js [data-wipe] .shutter img { transform: scale(1.08); transition: transform 1.4s var(--ease); }
  .js [data-wipe].is-in .shutter { clip-path: inset(0); }
  .js [data-wipe].is-in .shutter img { transform: none; }
  /* Sprungmarken gleiten statt zu springen */
  html { scroll-behavior: smooth; }
  /* Seitenwechsel: das Foto der Fläche wächst aus der Liste ins Exposé (Chrome, Edge, Safari; sonst normaler Wechsel) */
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 0.32s; animation-timing-function: var(--ease-io); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }
}
.shutter { display: block; overflow: hidden; }
::view-transition-old(*), ::view-transition-new(*) { height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { transition: opacity 0.4s ease; } }
@keyframes rise { to { opacity: 1; transform: none; } }
@keyframes settle { from { transform: scale(1.06); } to { transform: none; } }

/* =========================================================
   Druck: das Web-Exposé wird zum A4-Exposé (Drucken oder als PDF speichern)
   ========================================================= */
@media print {
  .x-energy { break-inside: avoid; margin-top: 5mm; padding: 3mm 4mm; }
  .x-energy__note { display: none; }
  @page { size: A4; margin: 12mm 13mm 14mm; }
  :root { --m: 0; --section: 7mm; }
  html, body { background: #fff !important; font-size: 10pt; }
  .bar, .skip, .lh__nav, .x-gallery__bar, .x-form, .next, .foot, .x-viz, .x-side .btn, .no-print, .crumbs { display: none !important; }
  .lh { padding: 0 0 4mm; background: #fff; border-bottom: 0.4pt solid #ccc; }
  .lh__logo img { width: 26mm; }
  .lh__name { margin-top: 2mm; font-size: 6.5pt; }
  .ph { padding: 5mm 0 0 !important; }
  .ph h1 { font-size: 30pt; margin-top: 0; }
  .ph__sub { font-size: 11pt; margin-top: 1.5mm; }
  .x-meta { margin-top: 4mm; grid-template-columns: repeat(4, 1fr) !important; }
  .x-meta > div { border-bottom: 0 !important; }
  .x-meta > div + div { padding-left: 3mm !important; border-left: 0.4pt solid #ddd !important; }
  .x-meta > div { padding-top: 2.5mm; padding-bottom: 2.5mm; }
  .x-meta dd { font-size: 13pt; }
  .x-main { grid-template-columns: 1.45fr 1fr !important; gap: 5mm; padding: 5mm 0 0; align-items: start; break-inside: avoid; }
  .x-gallery { border: 0 !important; background: none; }
  .x-gallery, .x-facts { border: 0.4pt solid #ccc; }
  .x-gallery__stage { aspect-ratio: 4 / 3; }
  .x-gallery__stage img:not(:first-child) { display: none; }
  .x-facts { padding: 4mm; }
  .x-facts h2 { font-size: 13pt; }
  .x-table { font-size: 8.5pt; }
  .x-table th, .x-table td { padding: 1.6mm 0; }
  .x-person { padding-top: 4mm; }
  .x-body { grid-template-columns: 0.5fr 1.5fr !important; gap: 6mm; padding: 7mm 0 0; }
  .x-body__cols { grid-template-columns: 1fr 1fr !important; }
  .x-body__lead p { font-size: 15pt; }
  .x-body__cols { gap: 5mm; margin-top: 4mm; font-size: 9pt; }
  .x-tags { margin-top: 4mm; }
  .x-plans { padding: 0; break-before: page; }
  .x-plans h2 { font-size: 20pt; margin-bottom: 5mm; }
  .x-plans__grid { grid-template-columns: 1fr 1fr; gap: 5mm; }
  .x-plan, .x-plan--small { grid-column: auto; break-inside: avoid; }
  .x-plan--wide { grid-column: 1 / -1; }
  .x-plan a { padding: 2mm; }
  .x-plan img { max-height: 80mm; }
  .x-plan figcaption { font-size: 8pt; margin-top: 1.5mm; }
  .print-foot { display: block !important; margin-top: 6mm; padding-top: 3mm; border-top: 0.4pt solid #ccc; font-size: 8pt; color: #555; }
  [data-reveal], [data-rise], .shutter, .shutter img { opacity: 1 !important; transform: none !important; animation: none !important; clip-path: none !important; }
  a { text-decoration: none; }
}
.print-foot { display: none; }

/* =========================================================
   WERKSTATT: Werkzeugkasten
   ========================================================= */
.ws-wrap { padding: 28px var(--m) 0; }
.ws-nav { display: flex; flex-wrap: wrap; gap: 6px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.ws-nav a { padding: 10px 16px; border: 1px solid var(--line); background: var(--card); font-size: 0.9375rem; text-decoration: none; transition: border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease; }
.ws-nav a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ws-nav a.ws-nav__out { margin-left: auto; background: transparent; color: var(--mut); }
@media (hover: hover) and (pointer: fine) { .ws-nav a:hover { border-color: var(--cu-2); } }
.ws-home { padding: 40px var(--m) var(--section); }
.ws-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ws-tile { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-height: 230px; padding: 28px; background: var(--card); border: 1px solid var(--line); text-decoration: none; transition: border-color 0.2s ease, transform 0.14s var(--ease); }
.ws-tile__no { font: 400 1rem var(--serif); color: var(--cu); }
.ws-tile__t { font: 400 clamp(1.75rem, 1.3rem + 1.2vw, 2.5rem)/1.05 var(--serif); }
.ws-tile__d { color: var(--ink-2); max-width: 44ch; }
.ws-tile__go { display: flex; align-items: center; gap: 10px; color: var(--cu); font-weight: 500; }
.ws-tile:active { transform: scale(0.99); }
@media (hover: hover) and (pointer: fine) { .ws-tile:hover { border-color: var(--cu-2); } .ws-tile:hover .arrow { transform: translateX(4px); } }
.ws-flow { margin-top: 48px; padding: 28px; background: var(--paper-2); }
.ws-flow h2 { font-size: var(--h3); margin-bottom: 14px; }
.ws-flow ol { margin: 0 0 14px; padding-left: 1.2rem; display: grid; gap: 8px; color: var(--ink-2); }
@media (max-width: 760px) { .ws-tiles { grid-template-columns: 1fr; } }

/* Gemeinsame Formularteile der Werkzeuge */
.gen__form label, .pl__form label, .vis__builder label { display: grid; gap: 6px; font-size: var(--small); font-weight: 500; }
.gen__form em, .pl__form em, .vis__builder em { font-style: normal; font-weight: 400; color: var(--mut); }
.gen__form input:not([type="checkbox"]):not([type="file"]), .gen__form select, .gen__form textarea,
.pl__form input:not([type="radio"]), .pl__form select, .pl__form textarea, .vis__builder input, .vis__builder select, .vis__builder textarea {
  width: 100%; min-height: 44px; padding: 0.6rem 0.8rem; border: 1px solid #cdc3b2; border-radius: 0; background: #fff; color: var(--ink); font-size: 0.9375rem; font-weight: 400; }
.gen__form textarea, .pl__form textarea, .vis__builder textarea { line-height: 1.5; resize: vertical; }
.gen__form :focus-visible, .pl__form :focus-visible, .vis__builder :focus-visible { outline: 2px solid var(--cu); outline-offset: 0; }
.gen__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gen__hint { font-size: 0.8125rem; color: var(--mut); max-width: 60ch; }
.gen__check { display: flex !important; align-items: center; gap: 10px; font-weight: 400 !important; }
.gen__check input { width: 20px; height: 20px; accent-color: var(--cu); }
[data-show][hidden] { display: none !important; }
@media (max-width: 640px) { .gen__row { grid-template-columns: 1fr; } }

/* Exposé-Generator */
.gen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 32px; align-items: start; padding: 32px var(--m) var(--section); }
.gen__form { display: grid; gap: 16px; }
.gen__form fieldset { display: grid; gap: 12px; margin: 0; padding: 20px; border: 1px solid var(--line); background: var(--card); }
.gen__form legend { display: flex; align-items: center; gap: 10px; padding: 0 6px; font: 400 1.375rem var(--serif); }
.gen__form legend span { display: grid; place-items: center; width: 28px; height: 28px; background: var(--ink); color: var(--paper); font: 500 0.875rem var(--sans); }
.gen__drop { position: relative; border: 1.5px dashed #c9bda9; background: #fff; transition: border-color 0.18s ease, background-color 0.18s ease; }
.gen__drop.is-over { border-color: var(--cu); background: #fbf3ea; }
.gen__drop input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.gen__drop label { display: block !important; padding: 18px; text-align: center; font-weight: 400 !important; color: var(--ink-2); pointer-events: none; }
.gen__thumbs { display: grid; gap: 6px; }
.gen__thumbs li { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px; background: #fff; border: 1px solid var(--line); font-size: var(--small); }
.gen__thumbs img { width: 64px; height: 48px; object-fit: cover; background: var(--paper-3); }
.gen__thumbs input { min-height: 36px !important; padding: 0.3rem 0.5rem !important; }
.gen__btns { display: flex; gap: 4px; }
.gen__btns button { width: 34px; height: 34px; background: var(--paper-2); font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .gen__btns button:hover { background: var(--line); } }
/* Schmale Aktionsleiste: bleibt unten sichtbar, verdeckt aber kaum etwas vom Formular */
.gen__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; position: sticky; bottom: 0; z-index: 2; padding: 8px 0; background: var(--paper); border-top: 1px solid var(--line); }
.gen__actions .btn { justify-content: center; padding: 0.55rem 1rem; font-size: 0.875rem; min-height: 0; }
.gen__actions .gen__hint { flex-basis: 100%; margin: 0; font-size: 0.75rem; }
.gen__actions .gen__warn { flex-basis: 100%; }
.gen__preview { position: sticky; top: 76px; max-height: calc(100vh - 96px); overflow: auto; padding: 16px; background: var(--paper-3); }
.gen__label { margin-bottom: 10px; font-size: var(--small); color: var(--mut); }
.gen__paper { background: #fff; box-shadow: 0 2px 18px rgba(27, 37, 51, 0.12); zoom: 0.62; }
@media (max-width: 1100px) { .gen { grid-template-columns: 1fr; } .gen__preview { position: static; max-height: none; } .gen__paper { zoom: 0.5; } }

/* Das erzeugte Exposé (Vorschau und Druck) */
/* ---------- Exposé (Generator): eine Serife nur für Titel, sonst Archivo; Navy, Grau, Kupfer nur als Akzent ---------- */
.exd { --x-ink: #1b2533; --x-mut: #6b6f76; --x-line: #d9d4cc; --x-cu: #9a6232; --x-bg: #f7f4ef;
  width: 178mm; margin: 0 auto; font: 9.5pt/1.55 var(--sans); color: var(--x-ink); hyphens: manual; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.gen__paper .exd { width: 210mm; padding: 16mm; box-sizing: border-box; }
.exd h1, .exd h2 { font-family: var(--serif); font-weight: 400; color: var(--x-ink); margin: 0; letter-spacing: 0; }
.exd p { margin: 0 0 2.4mm; max-width: none; }
.exd__label, .exd h3 { display: block; margin: 0 0 1.6mm; font: 500 6.8pt/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-mut); }
/* Kopf */
.exd__head { display: flex; justify-content: space-between; align-items: flex-end; padding-bottom: 3.5mm; border-bottom: 0.6pt solid var(--x-cu); }
.exd__head img { width: 30mm; display: block; }
.exd__headr { text-align: right; font-size: 8pt; color: var(--x-mut); line-height: 1.4; }
.exd__headr .exd__label { margin: 0; color: var(--x-ink); font-size: 7.5pt; }
/* Empfänger: gut lesbar, wie ein Briefkopf */
.exd__to { margin-top: 7mm; }
.exd__to p { margin: 0; font-size: 10.5pt; line-height: 1.45; }
.exd__to strong { font-weight: 600; }
/* Titel */
.exd__kick { margin: 9mm 0 0 !important; font: 500 7.5pt/1.3 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--x-cu); }
.exd h1 { margin-top: 2.5mm; font-size: 27pt; line-height: 1.08; }
.exd__addr { margin-top: 2.5mm !important; font-size: 11pt; color: var(--x-mut); }
.exd__hero { display: block; width: auto; height: auto; max-width: 100%; max-height: 138mm; margin: 7mm auto 0; }  /* nie beschneiden, Seitenverhältnis bleibt */
/* Eckdaten-Leiste */
.exd__facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); margin: 6mm 0 0; border-top: 0.8pt solid var(--x-ink); border-bottom: 0.5pt solid var(--x-line); }
.exd__facts div { padding: 3mm 3.5mm 3.2mm 0; }
.exd__facts div + div { padding-left: 3.5mm; border-left: 0.5pt solid var(--x-line); }
.exd__facts dt { font: 500 6.8pt/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--x-mut); }
.exd__facts dd { margin: 1.4mm 0 0; font: 500 12pt/1.25 var(--sans); }
/* Folgeseiten */
.exd__page { break-before: page; }
.exd__page > h2 { font-size: 18pt; margin-bottom: 5mm; padding-bottom: 2.5mm; border-bottom: 0.5pt solid var(--x-line); }
.exd__cols { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); gap: 10mm; }
.exd__lead { font: inherit; }  /* Einleitung wie der übrige Text: eine Schriftgröße, ein Gewicht */
.exd__main p { font-size: 9.5pt; line-height: 1.55; }
.exd__side h3 { margin-top: 6mm; }
.exd__side h3:first-child { margin-top: 0; }
.exd table { width: 100%; border-collapse: collapse; font-size: 8.8pt; }
.exd th, .exd td { text-align: left; font-weight: 400; padding: 1.7mm 0; border-bottom: 0.5pt solid var(--x-line); vertical-align: top; }
.exd th { color: var(--x-mut); padding-right: 3mm; width: 46%; }
.exd td.r { text-align: right; white-space: nowrap; }
.exd tr.t th, .exd tr.t td { color: var(--x-ink); font-weight: 600; border-bottom: 0.8pt solid var(--x-ink); }
.exd__areas th { color: var(--x-ink); width: auto; }
.exd__areas td:nth-child(2) { color: var(--x-mut); }
/* Ansprechpartner */
.exd__contact { display: grid; grid-template-columns: 1fr auto; gap: 8mm; align-items: end; margin-top: 10mm; padding: 6mm 7mm; background: var(--x-bg); break-inside: avoid; }
.exd__contact p { margin: 0; }
.exd__cname { font: 600 12pt/1.3 var(--sans); margin-bottom: 1.5mm !important; }
.exd__co { text-align: right; font-size: 8.5pt; color: var(--x-mut); line-height: 1.5; }
.exd__note { margin-top: 6mm !important; font-size: 7.5pt; line-height: 1.5; color: var(--x-mut); }
/* Fotos */
/* Zwei Spalten, jedes Foto im eigenen Format: nichts beschnitten, keine leeren Kästen */
.exd__grid { columns: 2; column-gap: 6mm; }
.exd__grid figure { margin: 0 0 6mm; break-inside: avoid; }
.exd__grid img { display: block; width: auto; height: auto; max-width: 100%; max-height: 108mm; margin: 0 auto; }
.exd figcaption { margin-top: 1.5mm; font-size: 7.5pt; color: var(--x-mut); }
.exd__small { font-size: 8pt; color: var(--x-mut); margin-top: -2mm !important; }
/* Pläne: jeder Plan auf eigener Seite, so groß wie möglich */
.exd__plan figure { margin: 0; text-align: center; }
.exd__plan img { max-width: 100%; max-height: 222mm; object-fit: contain; }
.exd__plan figcaption { text-align: left; margin-top: 3mm; font-size: 8.5pt; color: var(--x-ink); }
/* 360°-Rundgang */
.exd__pano { display: grid; grid-template-columns: 38mm 1fr; gap: 7mm; align-items: center; margin-top: 8mm; padding: 6mm; background: var(--x-bg); break-inside: avoid; }
.exd__pano h2 { font-size: 15pt; margin-bottom: 2mm; }
.exd__qr svg { width: 100%; height: auto; display: block; }
.exd__link { font-size: 8pt; word-break: break-all; color: var(--x-mut); }
/* Vorschau im Generator: Seitenumbrüche sichtbar machen */
.gen__paper .exd__page { margin: 16mm -16mm 0; padding: 16mm 16mm 0; border-top: 1px dashed #c9c3b9; }
.gen__warn { margin: 0; padding: 10px 12px; background: #fbf1e6; border-left: 3px solid var(--cu); font-size: 0.8125rem; color: var(--ink); }
.gen__warn:empty { display: none; }

/* QR-Plakat */
.pl { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 32px; align-items: start; padding: 32px var(--m) var(--section); }
.pl__form { display: grid; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); }
.pl__group { display: grid; gap: 14px; }
.pl__group + .pl__group { padding-top: 16px; border-top: 1px solid var(--line); }
.pl__group[hidden] { display: none; }
.pl__label { font-size: var(--small); font-weight: 500; margin-bottom: -6px; }
.pl__warn { margin: -6px 0 0; font-size: 0.8125rem; color: #9b2c2c; }
/* Umschalter im Briefbogen-Stil: feine Linie, aktive Seite in Tinte */
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1px solid var(--ink); }
.seg label { display: block; position: relative; gap: 0; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 12px; font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: background-color 160ms ease-out, color 160ms ease-out; }
.seg label + label span { border-left: 1px solid var(--ink); }
.seg input:checked + span { background: var(--ink); color: var(--paper); }
.seg input:focus-visible + span { outline: 2px solid var(--cu); outline-offset: -4px; }
@media (hover: hover) { .seg input:not(:checked):hover + span { background: var(--paper-3); } }
.pl__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl__preview { padding: 20px; background: var(--paper-3); }
.pl__preview canvas { display: block; width: auto; max-width: 100%; height: auto; max-height: 78vh; margin: 0 auto; background: #fff; box-shadow: 0 2px 18px rgba(27, 37, 51, 0.14); }
@media (max-width: 960px) { .pl { grid-template-columns: 1fr; } }

/* Nutzung visualisieren */
.vis { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; padding: 32px var(--m) var(--section); }
.vis h2 { font-size: var(--h3); margin-bottom: 14px; }
.vis__list { margin: 0; padding-left: 1.3rem; display: grid; gap: 10px; color: var(--ink-2); }
.vis__rules { margin-top: 26px; padding: 20px; background: var(--paper-2); }
.vis__rules h3 { font: 400 1.25rem var(--serif); margin-bottom: 8px; }
.vis__rules ul { margin: 0; padding-left: 1.1rem; display: grid; gap: 6px; color: var(--ink-2); font-size: 0.9375rem; }
.vis__example { margin-top: 26px; }
.vis__example img { width: 100%; height: auto; }
.vis__example figcaption { margin-top: 8px; font-size: var(--small); color: var(--mut); }
.vis__builder { display: grid; gap: 14px; padding: 22px; background: var(--card); border: 1px solid var(--line); position: sticky; top: 76px; }
@media (max-width: 960px) { .vis { grid-template-columns: 1fr; } .vis__builder { position: static; } }

/* 360°-Rundgang */
.rg { padding: 32px var(--m) var(--section); }
.rg__how { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; margin-top: 40px; }
.rg__how h2 { font-size: var(--h3); margin-bottom: 8px; }
.rg__how p { color: var(--ink-2); }
@media (max-width: 860px) { .rg__how { grid-template-columns: 1fr; } }

/* Exposé-Hinweis auf den Web-Exposés */
.x-cta { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 24px clamp(32px, 6vw, 96px); align-items: center; margin: 40px var(--m) 0; padding: 36px clamp(24px, 3vw, 44px); background: var(--night); color: var(--night-ink); }
.x-cta .kick { color: var(--cu-3); }
.x-cta h2 { margin-top: 10px; font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.75rem); line-height: 1.08; }
.x-cta p { color: #ddd7cd; margin-bottom: 18px; max-width: 46ch; }
.x-cta .btn--ink { background: var(--cu); }
@media (hover: hover) and (pointer: fine) { .x-cta .btn--ink:hover { background: #865429; } }
@media (max-width: 860px) { .x-cta { grid-template-columns: 1fr; } }
@media print { .x-cta { display: none !important; } }

/* Drucken aus den Werkzeugen: nur der erzeugte Inhalt */
.print-root { display: none; }
@media print {
  html.printing body > *:not(.print-root) { display: none !important; }
  html.printing .print-root { display: block !important; }
  html.printing .print-root .exd { width: auto; padding: 0; }
  html.printing, html.printing body { background: #fff !important; }
}

/* ---------- Vermietet: Hinweis in Listen und Exposé (6 Wochen sichtbar) ---------- */
.badge-verm { display: inline-flex; align-items: center; padding: 0.25rem 0.6rem; background: var(--ink); color: var(--paper); font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.list li.is-verm .list__th img, .card.is-verm .card__img img { filter: grayscale(0.7); opacity: 0.75; }
.list li.is-verm .list__st, .list li.is-verm .list__ty { color: var(--mut); }
.list--verm { margin-top: 32px; }
.x-verm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px; padding: 14px 18px; background: var(--card); border: 1px solid var(--line); }
.leer--verm { margin: 0 var(--m) var(--section); }

/* ---------- Werkstatt: Hinweis „Neu“ und Flächenmanagement ---------- */
.ws-neu { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 24px; padding: 16px 18px; background: var(--card); border: 1px solid var(--cu-2); }
.ws-neu__tag { flex: none; padding: 0.3rem 0.55rem; background: var(--cu); color: #fff; font: 500 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; }
.ws-neu p { margin: 0; }
.ws-neu a { white-space: nowrap; }
.fm { padding: 32px var(--m) var(--section); }
.fm__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 28px; }
.fm__info > div { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); }
.fm__info p { margin-top: 6px; font-size: 0.9375rem; color: var(--ink-2); }
/* Suche und Filter im Flächenmanagement */
.fm__filter { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr) auto; gap: 12px 16px; align-items: end; margin-bottom: 18px; }
.fm__filter label { display: grid; gap: 6px; font-size: var(--small); font-weight: 500; }
.fm__filter input, .fm__filter select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); font: inherit; font-weight: 400; }
.fm__filter :focus-visible { outline: 2px solid var(--cu); outline-offset: 0; }
.fm__count { margin: 0 0 12px; font-size: 0.875rem; color: var(--mut); white-space: nowrap; }
.fm__row[hidden] { display: none; }
.fm__leer { padding: 24px 0; color: var(--mut); }
@media (max-width: 860px) { .fm__filter { grid-template-columns: 1fr 1fr; } .fm__filter label:first-child { grid-column: 1 / -1; } .fm__count { grid-column: 1 / -1; margin: 0; } }
.fm__list { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.fm__row { display: grid; grid-template-columns: 96px minmax(0, 1.2fr) minmax(0, 1fr) auto; gap: 18px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.fm__th img { width: 96px; height: 64px; object-fit: cover; display: block; }
.fm__name b { display: block; font: 400 1.25rem/1.2 var(--serif); }
.fm__name small, .fm__st small { display: block; color: var(--mut); font-size: 0.8125rem; font-weight: 400; }
.fm__st { font-weight: 500; }
.fm__row[data-st="online"] .fm__st { color: #2f6b3a; }
.fm__row[data-st="vermietet"] .fm__st, .fm__row[data-st="archiv"] .fm__st { color: var(--ink); }
.fm__row[data-st="pausiert"] .fm__st, .fm__row[data-st="entfernt"] .fm__st, .fm__row[data-st="offline"] .fm__st { color: var(--cu); }
.fm__row.is-pending { background: linear-gradient(90deg, rgba(154, 98, 50, 0.08), transparent 60%); }
.fm__act { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.fm__act .btn { min-height: 38px; padding: 0 12px; font-size: 0.875rem; }
.fm__act [hidden] { display: none; }
.fm__note { margin-top: 16px; font-size: 0.9375rem; color: var(--mut); }
.fm__note.is-err { color: #9b2c2c; font-weight: 500; }
.fm__dialog { max-width: 32rem; padding: 26px 28px; border: 0; background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.5); }
.fm__dialog::backdrop { background: rgba(27, 37, 51, 0.45); }
.fm__dialog h2 { font: 400 1.5rem/1.2 var(--serif); }
.fm__dialog p { margin-top: 10px; color: var(--ink-2); }
.fm__dialog-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
@media (max-width: 960px) {
  .fm__info { grid-template-columns: 1fr; }
  .fm__row { grid-template-columns: 72px minmax(0, 1fr); }
  .fm__th img { width: 72px; height: 54px; }
  .fm__st, .fm__act { grid-column: 1 / -1; }
  .fm__act { justify-content: flex-start; }
}

/* ---------- Generator: Platzierung des Schilds ---------- */
.spots { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 14px; }
.spots[hidden] { display: none; }
.spots > span { font-size: 0.875rem; color: var(--mut); margin-right: 6px; }
.spots button { min-height: 36px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 0.875rem/1 var(--sans); cursor: pointer; transition: transform 160ms ease-out, background-color 160ms ease; }
.spots button:active { transform: scale(0.97); }
.spots button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }

/* ---------- Reserviert: online, aber deutlich gekennzeichnet ---------- */
.badge-res { display: inline-flex; align-items: center; padding: 0.3rem 0.65rem; background: var(--cu); color: #fff; font: 600 0.75rem/1 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; vertical-align: middle; }
h1 .badge-res { font-size: 0.875rem; padding: 0.45rem 0.8rem; margin-left: 0.4em; position: relative; top: -0.35em; }
.list__go .badge-res { margin-right: 10px; }
.card__meta .badge-res { margin-right: 8px; }
.x-res { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 24px; padding: 16px 20px; background: var(--card); border: 2px solid var(--cu); }
.fm__row[data-st="reserviert"] .fm__st { color: var(--cu); }
.fm__info { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- Miet-Cockpit (Werkstatt, Vorschau) ---------- */
:root { --ok: #2f6b3a; --ok-bg: #e6efe4; --res: #8a5a1c; --res-bg: #f6ead8; --verm: #1b2533; --verm-bg: #e3e6ec; --pau: #6b6f76; --pau-bg: #ecebe8;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1); }
.ck { padding: 28px var(--m) var(--section); }
.ck__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.ck__kick { margin: 0 0 6px; font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--cu); }
.ck h1 { font: 400 clamp(2.25rem, 1.8rem + 2vw, 3.5rem)/1 var(--serif); margin: 0; }
.ck__who { display: flex; align-items: center; gap: 10px; font-size: var(--small); color: var(--ink-2); }
.ck-avatar { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 0.75rem var(--sans); letter-spacing: 0.04em; }
.ck-link { padding: 6px 10px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; cursor: pointer; }
.ck-link:hover { border-color: var(--ink); }
.ck__demo { margin-top: 18px; padding: 12px 16px; background: var(--res-bg); border-left: 3px solid var(--cu); font-size: 0.9375rem; }
.ck__login { max-width: 34rem; margin: 48px 0; }
.ck__login h2 { font: 400 2rem var(--serif); margin: 0 0 10px; }
.ck__login p { color: var(--ink-2); margin-bottom: 20px; }

/* Kennzahlen: antippbar, setzen den passenden Filter */
.ck__kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 24px 0 22px; }
.ck-kpi { display: grid; gap: 4px; align-content: start; padding: 16px 16px 14px; border: 1px solid var(--line); background: var(--card); color: var(--ink); text-align: left; font: inherit; cursor: pointer;
  transition: transform 0.16s var(--ease-out), border-color 0.16s ease, box-shadow 0.16s ease; animation: ck-in 0.36s var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
.ck-kpi:hover { border-color: var(--ink-2); box-shadow: 0 6px 18px -12px rgb(var(--sh) / 0.5); }
.ck-kpi:active { transform: scale(0.98); }
.ck-kpi.is-active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.ck-kpi__t { font-size: 0.8125rem; color: var(--mut); }
.ck-kpi__z { font: 400 2rem/1.05 var(--serif); }
.ck-kpi__s { font-size: 0.8125rem; color: var(--ink-2); }
.ck-kpi.is-warn { border-color: var(--cu-2); background: var(--cu-bg); }
.ck-kpi.is-warn .ck-kpi__s { color: var(--cu); font-weight: 500; }

/* Leiste mit Suche und Filtern */
.ck__bar { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: center; scroll-margin-top: 90px; }
.ck__bar input, .ck__bar select { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 0.9375rem; }
.ck__search input { padding-left: 38px; background: var(--raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23666b73' stroke-width='1.6'%3E%3Ccircle cx='7' cy='7' r='5'/%3E%3Cpath d='m11 11 3.5 3.5'/%3E%3C/svg%3E") no-repeat 12px center; }
.ck__bar :focus-visible, .ck :focus-visible { outline: 2px solid var(--cu); outline-offset: 1px; }
.ck__help-btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 0.9375rem var(--sans); cursor: pointer; white-space: nowrap; }
.ck__help-btn::before { content: "?"; display: inline-grid; place-items: center; width: 20px; height: 20px; margin-right: 8px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 0.75rem; }
.ck__help-btn:hover { border-color: var(--ink); }
.ck__count { margin: 14px 0 8px; font-size: 0.875rem; color: var(--mut); }
.ck__note { font-size: 0.875rem; color: var(--krit); }

/* Tabelle: eine Zeile pro Fläche, Klick öffnet die Detailansicht */
.ck__table { border-top: 1px solid var(--ink); }
.ck__thead, .ck-row { display: grid; grid-template-columns: minmax(0, 2.2fr) 116px minmax(0, 1.3fr) 210px 130px 20px; gap: 16px; align-items: center; }
.ck__thead { padding: 10px 12px; font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mut); border-bottom: 1px solid var(--line); }
.ck-row { width: 100%; padding: 12px; border: 0; border-bottom: 1px solid var(--line); background: transparent; color: var(--ink); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer; transition: background-color 0.14s ease; }
.ck-row:hover { background: var(--card); }
.ck-row:hover .ck-row__go { transform: translateX(3px); color: var(--cu); }
.ck-row small { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--mut); }
.ck-row__fl { display: flex; align-items: center; gap: 14px; min-width: 0; }
.ck-row__fl img { width: 64px; height: 44px; object-fit: cover; flex: none; }
.ck-row__fl b { display: block; font: 400 1.125rem/1.2 var(--serif); }
.ck-row__mi { overflow: hidden; text-overflow: ellipsis; }
.ck-row__go { font-size: 1.5rem; color: var(--mut); transition: transform 0.16s var(--ease-out), color 0.16s ease; }
.ck-row.is-bald { box-shadow: inset 3px 0 0 var(--cu); }
.ck-empty, .ck-load { padding: 28px 12px; color: var(--mut); }
.ck-empty button { margin-left: 8px; padding: 6px 10px; border: 1px solid var(--line); background: transparent; font: inherit; cursor: pointer; }

/* Status-Etiketten */
.ck-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border-radius: 999px; font: 500 0.8125rem/1 var(--sans); background: var(--ok-bg); color: var(--ok); white-space: nowrap; }
.ck-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.ck-chip[data-st="Reserviert"] { background: var(--res-bg); color: var(--res); }
.ck-chip[data-st="Vermietet"] { background: var(--verm-bg); color: var(--verm); }
.ck-chip[data-st="Pausiert"] { background: var(--pau-bg); color: var(--pau); }
.ck-chip--big { padding: 7px 14px 7px 12px; font-size: 0.9375rem; }

/* Detailansicht: gleitet von rechts herein */
.ck-drawer { position: fixed; inset: 0 0 0 auto; width: min(560px, 100vw); max-width: none; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: var(--paper); color: var(--ink);
  box-shadow: -30px 0 80px -30px rgba(0, 0, 0, 0.45); overflow: auto; overscroll-behavior: contain; }
.ck-drawer[open] { animation: ck-slide 0.32s var(--ease-out); }
.ck-drawer.is-closing { animation: ck-slide-out 0.18s ease-in forwards; }
.ck-drawer::backdrop { background: rgb(var(--sh) / 0.38); animation: ck-fade 0.24s ease; }
.ck-drawer__head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; gap: 16px; padding: 22px 26px 16px; background: var(--paper); border-bottom: 1px solid var(--line); }
.ck-drawer__head h2 { font: 400 1.625rem/1.15 var(--serif); margin: 0; }
.ck-drawer__sub { margin: 6px 0 0; font-size: 0.9375rem; color: var(--mut); }
.ck-x { flex: none; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; color: var(--ink); font-size: 1rem; cursor: pointer; transition: transform 0.14s var(--ease-out); }
.ck-x:hover { border-color: var(--ink); }
.ck-x:active { transform: scale(0.94); }
.ck-drawer__status { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 26px 0; }
.ck-menu { position: relative; }
.ck-menu summary { white-space: nowrap; list-style: none; padding: 9px 14px; border: 1px solid var(--ink); font: 500 0.9375rem var(--sans); cursor: pointer; user-select: none; }
.ck-menu summary::-webkit-details-marker { display: none; }
.ck-menu summary::after { content: " ▾"; color: var(--cu); }
.ck-menu > div { position: absolute; right: 0; top: calc(100% + 6px); z-index: 3; display: grid; min-width: 200px; padding: 6px; background: var(--raised); border: 1px solid var(--line); box-shadow: 0 16px 40px -18px rgb(var(--sh) / 0.45); transform-origin: top right; animation: ck-pop 0.16s var(--ease-out); }
.ck-menu button { padding: 9px 10px; border: 0; background: transparent; text-align: left; cursor: pointer; }
.ck-menu button:hover { background: var(--card); }
.ck-tabs { display: flex; gap: 4px; margin: 18px 26px 0; border-bottom: 1px solid var(--line); overflow-x: auto; }
.ck-tabs button { position: relative; padding: 10px 12px; border: 0; background: transparent; color: var(--mut); font: 500 0.9375rem var(--sans); cursor: pointer; white-space: nowrap; }
.ck-tabs button[aria-selected="true"] { color: var(--ink); box-shadow: inset 0 -2px 0 var(--cu); }
.ck-dot { display: inline-block; width: 7px; height: 7px; margin-left: 4px; border-radius: 50%; background: var(--cu); vertical-align: middle; }
.ck-drawer__body { padding: 22px 26px 40px; }
.ck-sum { display: grid; gap: 16px; }
.ck-sum__img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.ck-dl { display: grid; gap: 0; margin: 0; }
.ck-dl > div { display: grid; grid-template-columns: 9.5rem minmax(0, 1fr); gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.ck-dl dt { color: var(--mut); font-size: 0.9375rem; }
.ck-dl dd { margin: 0; }
.ck-dl small { color: var(--cu); font-size: 0.8125rem; margin-left: 4px; }
.ck-dl a { color: var(--cu); }
.ck-card { margin-top: 22px; }
.ck-card h3, .ck-help__body h3 { margin: 0 0 6px; font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.ck-hint { margin: 0 0 16px; padding: 10px 14px; background: var(--res-bg); border-left: 3px solid var(--cu); font-size: 0.9375rem; }
.ck-progress { margin-bottom: 18px; }
.ck-progress span { display: block; height: 6px; background: var(--paper-3); overflow: hidden; }
.ck-progress span::after { content: ""; display: block; height: 100%; width: 100%; background: var(--ok); transform-origin: left; transform: scaleX(var(--p)); transition: transform 0.3s var(--ease-out); }
.ck-progress small { display: block; margin-top: 6px; font-size: 0.8125rem; color: var(--ink-2); }

/* Formulare */
.ck-form { display: grid; gap: 14px; }
.ck-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ck-f { display: grid; gap: 6px; font-size: 0.875rem; font-weight: 500; }
.ck-f i { color: var(--cu); font-style: normal; }
.ck-f input:not([type="checkbox"]), .ck-f select, .ck-f textarea { width: 100%; min-height: 44px; padding: 0 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: 400 1rem var(--sans); }
.ck-f textarea { padding: 10px 12px; line-height: 1.5; resize: vertical; }
.ck-f input:disabled { background: var(--paper-2); color: var(--mut); }
.ck-f__in { position: relative; display: block; }
.ck-f__in.is-eur input { padding-right: 30px; }
.ck-f__in.is-eur::after { content: "€"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--mut); }
.ck-f--check { display: flex; align-items: center; gap: 10px; font-weight: 400; font-size: 0.9375rem; }
.ck-f--check input { width: 20px; height: 20px; accent-color: var(--ink); }
.ck-live { margin: -6px 0 0; min-height: 1.2em; font-size: 0.875rem; color: var(--ok); }
.ck-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.ck-actions .btn.is-busy { opacity: 0.7; pointer-events: none; }

/* Verlauf */
.ck-tl { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.ck-tl > li { position: relative; padding: 0 0 18px 18px; }
.ck-tl > li::before { content: ""; position: absolute; left: -6px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--paper); border: 2px solid var(--cu); }
.ck-tl p { margin: 0 0 4px; font-size: 0.9375rem; }
.ck-tl ul { margin: 0; padding-left: 16px; font-size: 0.875rem; color: var(--ink-2); }
.ck-tl s { color: var(--mut); }
.ck-tl__d { color: var(--mut); font-size: 0.875rem; }

/* Hilfe */
.ck-help__body p { color: var(--ink-2); margin: 0 0 18px; }
.ck-help__dl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; margin: 0 0 18px; align-items: center; }
.ck-help__dl dd { margin: 0; font-size: 0.9375rem; color: var(--ink-2); }

/* Kurzmeldung */
.ck-toast { position: fixed; left: 50%; bottom: 24px; z-index: 50; max-width: min(92vw, 34rem); padding: 12px 18px; background: var(--ink); color: var(--paper); font: 500 0.9375rem var(--sans);
  box-shadow: 0 16px 40px -16px rgba(0, 0, 0, 0.6); opacity: 0; transform: translate(-50%, 12px); transition: opacity 0.2s ease, transform 0.24s var(--ease-out); pointer-events: none; }
.ck-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
.ck-toast[data-art="err"] { background: #8a2b22; color: var(--on-acc); }

@keyframes ck-in { from { opacity: 0; transform: translateY(6px); } }
@keyframes ck-slide { from { transform: translateX(32px); opacity: 0; } }
@keyframes ck-slide-out { to { transform: translateX(32px); opacity: 0; } }
@keyframes ck-fade { from { opacity: 0; } }
@keyframes ck-pop { from { opacity: 0; transform: scale(0.96); } }
@media (prefers-reduced-motion: reduce) { .ck *, .ck-drawer, .ck-toast { animation: none !important; transition: none !important; } }

/* Handy und Tablet: Karten statt Tabelle */
@media (max-width: 1100px) { .ck__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ck { padding-top: 20px; }
  .ck__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .ck-kpi { padding: 12px; }
  .ck-kpi__z { font-size: 1.625rem; }
  .ck__bar { grid-template-columns: 1fr 1fr; }
  .ck__search, .ck__help-btn { grid-column: 1 / -1; }
  .ck__thead { display: none; }
  .ck-row { grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; padding: 14px 4px; }
  .ck-row__fl { grid-column: 1 / -1; }
  .ck-row > [data-l] { font-size: 0.875rem; }
  .ck-row > [data-l]::before { content: attr(data-l) ": "; color: var(--mut); }
  .ck-row > [data-l="Mieter"] { grid-column: 1 / -1; }
  .ck-row small { display: inline; margin-left: 6px; }
  .ck-row__go { display: none; }
  .ck-row > .is-leer { display: none; }
  .ck-drawer { width: 100vw; }
  .ck-drawer__head, .ck-drawer__status, .ck-drawer__body { padding-left: 18px; padding-right: 18px; }
  .ck-tabs { margin-left: 18px; margin-right: 18px; }
  .ck-grid2 { grid-template-columns: 1fr; }
  .ck-dl > div { grid-template-columns: 7.5rem minmax(0, 1fr); }
}

/* ---------- Miet-Cockpit: Fristen, Spaltenfilter, Vertragsformular ---------- */
:root { --krit: #a23a2a; --krit-bg: #f8e6e2; --bald: #8a5a1c; --bald-bg: #f6ead8; --info: #6b6f76; --info-bg: #eeece8; }
.ck-kpi.is-krit { border-color: var(--krit); background: var(--krit-bg); }
.ck-kpi.is-krit .ck-kpi__s { color: var(--krit); font-weight: 600; }
.ck__sec-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px 24px; flex-wrap: wrap; margin: 34px 0 14px; }
.ck__sec-h h2 { font: 400 1.75rem/1.1 var(--serif); margin: 0; }
.ck__sec-h p { margin: 0; max-width: 46rem; font-size: 0.9375rem; color: var(--mut); }

/* Fristen und Termine */
.ck-ag { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ck-ag > li { animation: ck-in 0.32s var(--ease-out) both; animation-delay: calc(var(--i) * 35ms); }
.ck-ag__it { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; width: 100%; padding: 12px 16px 12px 12px; border: 1px solid var(--line); border-left: 4px solid var(--info); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s var(--ease-out); }
.ck-ag__it:hover { box-shadow: 0 8px 22px -16px rgb(var(--sh) / 0.55); }
.ck-ag__it:active { transform: scale(0.995); }
.ck-ag__it[data-stufe="krit"] { border-left-color: var(--krit); }
.ck-ag__it[data-stufe="bald"] { border-left-color: var(--cu-2); }
.ck-ag__d { display: grid; justify-items: center; line-height: 1.05; font-size: 0.8125rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.06em; }
.ck-ag__d b { font: 400 1.75rem/1 var(--serif); letter-spacing: 0; color: var(--ink); text-transform: none; }
.ck-ag__d small { font-size: 0.6875rem; color: var(--mut); }
.ck-ag__t { min-width: 0; }
.ck-ag__t b { font-weight: 600; }
.ck-ag__t > span { margin-left: 8px; color: var(--ink-2); }
.ck-ag__t small { display: block; margin-top: 3px; font-size: 0.875rem; color: var(--mut); }
.ck-ag__r { padding: 5px 10px; border-radius: 999px; font: 500 0.8125rem var(--sans); white-space: nowrap; background: var(--info-bg); color: var(--info); }
.ck-ag__it[data-stufe="krit"] .ck-ag__r { background: var(--krit-bg); color: var(--krit); }
.ck-ag__it[data-stufe="bald"] .ck-ag__r { background: var(--bald-bg); color: var(--bald); }
.ck-ag__foot { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.ck-link--cal::before { content: "📅 "; }

/* Leiste und Spaltenfilter */
.ck__bar { grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1.2fr) auto; }
.ck__cf-btn { display: none; min-height: 44px; padding: 0 14px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 0.9375rem var(--sans); cursor: pointer; }
.ck__cf-btn[aria-expanded="true"] { border-color: var(--ink); }
.ck__colf { display: grid; grid-template-columns: minmax(0, 2.2fr) 116px minmax(0, 1.3fr) 210px 130px 20px; gap: 16px; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); background: var(--paper-2); }
.ck__colf label span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ck__colf input, .ck__colf select { width: 100%; min-height: 34px; padding: 0 8px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: 400 0.875rem var(--sans); }
.ck__colf input:not(:placeholder-shown), .ck__colf select:has(option:checked:not([value=""])) { border-color: var(--cu-2); box-shadow: inset 0 0 0 1px var(--cu-2); }
.ck-filterchip { display: inline-block; margin-left: 6px; padding: 2px 10px; border-radius: 999px; background: var(--bald-bg); color: var(--bald); font-size: 0.8125rem; }
.ck__count .ck-link { margin-left: 6px; padding: 3px 8px; font-size: 0.8125rem; }

/* Frist-Hinweis in der Tabelle */
.ck-badge { display: block; width: fit-content; max-width: 100%; margin-top: 4px; padding: 2px 8px; border-radius: 6px; font: 500 0.75rem/1.4 var(--sans); background: var(--info-bg); color: var(--info); }
.ck-badge[data-stufe="krit"] { background: var(--krit-bg); color: var(--krit); }
.ck-badge[data-stufe="bald"] { background: var(--bald-bg); color: var(--bald); }

/* Fristen in der Detailansicht */
.ck-card--frist { margin: 0 0 22px; }
.ck-fl { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ck-fl li { padding: 10px 12px; border-left: 3px solid var(--info); background: var(--card); }
.ck-fl li[data-stufe="krit"] { border-left-color: var(--krit); background: var(--krit-bg); }
.ck-fl li[data-stufe="bald"] { border-left-color: var(--cu-2); background: var(--bald-bg); }
.ck-fl p { margin: 0; font-size: 0.9375rem; }
.ck-fl p span { margin-left: 6px; font-size: 0.8125rem; color: var(--ink-2); }
.ck-fl small { display: block; margin-top: 3px; color: var(--ink-2); font-size: 0.8125rem; }

/* Vertragsformular */
.ck-fs { display: grid; gap: 12px; margin: 0; padding: 14px 0 4px; border: 0; border-top: 1px solid var(--line); }
.ck-fs legend { padding: 0 8px 0 0; font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mut); }
.ck-fs legend i { color: var(--cu); font-style: normal; }
.ck-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ck-seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--ink); }
.ck-seg label { position: relative; }
.ck-seg input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.ck-seg span { display: grid; place-items: center; min-height: 42px; padding: 0 8px; font: 500 0.9375rem var(--sans); text-align: center; transition: background-color 0.16s ease, color 0.16s ease; }
.ck-seg label + label span { border-left: 1px solid var(--ink); }
.ck-seg input:checked + span { background: var(--ink); color: var(--paper); }
.ck-seg input:focus-visible + span { outline: 2px solid var(--cu); outline-offset: -3px; }
.ck-preview:not(:empty) { padding: 14px; background: var(--card); border: 1px dashed var(--cu-2); }
.ck-preview h3 { margin: 0 0 8px; font: 500 0.75rem/1.2 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cu); }
.ck-preview__k { margin: 8px 0 0; font-size: 0.875rem; }
[data-wenn][hidden] { display: none !important; }

@media (max-width: 860px) {
  .ck__bar { grid-template-columns: 1fr 1fr; }
  .ck__search { grid-column: 1 / -1; }
  .ck__cf-btn { display: block; }
  .ck__help-btn { grid-column: auto; }
  .ck__colf { display: none; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px; }
  .ck__colf.is-open { display: grid; animation: ck-in 0.22s var(--ease-out); }
  .ck__colf label span { position: static; width: auto; height: auto; clip-path: none; display: block; margin-bottom: 4px; font-size: 0.8125rem; color: var(--mut); }
  .ck__colf input, .ck__colf select { min-height: 42px; font-size: 1rem; }
  .ck__colf > span { display: none; }
  .ck-ag__it { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; }
  .ck-ag__r { grid-column: 2; justify-self: start; }
  .ck-ag__t > span { display: block; margin: 2px 0 0; }
  .ck-ag__t small, .ck__sec-h p { display: none; }
  .ck-ag__it { padding: 10px 12px 10px 10px; }
  .ck-ag__d b { font-size: 1.5rem; }
  .ck-grid3 { grid-template-columns: 1fr 1fr; }
  .ck-seg span { font-size: 0.875rem; }
}

/* ---------- Miet-Cockpit als App: Vollbild, eigene Kopfleiste, drei Bereiche ---------- */
.ck-body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font: 400 1rem/1.55 var(--sans); }
.ck-shell { min-height: 100dvh; }
.ck-top { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 24px; height: 60px; padding: 0 clamp(16px, 2.4vw, 32px);
  background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.ck-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.ck-brand img { width: 52px; height: auto; display: block; }
.ck-brand span { font: 400 1.25rem/1 var(--serif); padding-left: 12px; border-left: 1px solid var(--line); }
.ck-tag { padding: 3px 8px; border-radius: 4px; background: var(--cu); color: var(--on-acc); font: 600 0.6875rem/1 var(--sans); font-style: normal; letter-spacing: 0.12em; text-transform: uppercase; }
.ck-nav { display: flex; justify-content: center; gap: 4px; height: 100%; }
.ck-nav a { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 0 16px; color: var(--mut); font: 500 0.9375rem var(--sans); text-decoration: none; transition: color 0.16s ease; }
.ck-nav a:hover { color: var(--ink); }
.ck-nav a[aria-current="page"] { color: var(--ink); }
.ck-nav a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--cu); }
.ck-nav svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ck-nav__n { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--cu-2); color: var(--on-acc); font: 600 0.75rem/20px var(--sans); text-align: center; }
.ck-nav__n.is-krit { background: #a23a2a; color: var(--on-acc); }
.ck-top__r { display: flex; align-items: center; gap: 14px; }
.ck-iconbtn { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 600 0.9375rem var(--sans); cursor: pointer; }
.ck-iconbtn:hover { border-color: var(--ink); }
.ck-back { padding: 7px 12px; border: 1px solid var(--line); color: var(--ink); font-size: 0.875rem; text-decoration: none; white-space: nowrap; }
.ck-back:hover { border-color: var(--ink); }
.ck-body .ck__who span:not(.ck-avatar) { font-size: 0.875rem; }
.ck-body .ck-avatar { width: 30px; height: 30px; font-size: 0.6875rem; }
.ck-body .ck__demo { margin: 0; padding: 7px clamp(16px, 2.4vw, 32px); border: 0; border-bottom: 1px solid #ecd9c0; font-size: 0.8125rem; text-align: center; }
.ck-body .ck { max-width: 1600px; margin: 0 auto; padding: 22px clamp(16px, 2.4vw, 32px) 64px; }
.ck-body .ck__kpis { margin-top: 0; }

/* Hinweisleiste (dringende Fristen, Abweichungen zur Website) */
.ck-alert { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; margin: 0 0 18px; padding: 12px 16px; border: 1px solid color-mix(in srgb, var(--krit) 30%, transparent); border-left: 4px solid var(--krit); background: var(--krit-bg); color: var(--ink); font: inherit; font-size: 0.9375rem; text-align: left; cursor: pointer;
  animation: ck-in 0.3s var(--ease-out) both; }
.ck-alert:hover { box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--krit) 60%, transparent); }
.ck-alert__go { flex: none; font-weight: 600; color: var(--krit); }
.ck-web { margin: 0 0 18px; padding: 12px 14px; border-left: 3px solid var(--cu); background: var(--res-bg); font-size: 0.9375rem; }
.ck-web p { margin: 4px 0 6px; }

/* Ansichtskopf (Fristen, Export) */
.ck-vhead { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 32px; flex-wrap: wrap; margin-bottom: 18px; }
.ck-vhead h1 { margin: 0; font: 400 clamp(1.875rem, 1.5rem + 1.4vw, 2.75rem)/1.05 var(--serif); }
.ck-vhead p { margin: 8px 0 0; max-width: 46rem; color: var(--mut); font-size: 0.9375rem; }
.ck-cal::before { content: ""; width: 16px; height: 16px; margin-right: 8px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='1'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%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 24 24' fill='none' stroke='black' stroke-width='2'%3E%3Crect x='4' y='5' width='16' height='15' rx='1'/%3E%3Cpath d='M4 10h16M9 3v4M15 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.ck-fbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 20px; }
.ck-fbar select, .ck-inl input { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: inherit; font-size: 0.9375rem; }
.ck-inl { display: inline-flex; align-items: center; gap: 10px; font-size: 0.9375rem; color: var(--ink-2); }
.ck-chips { display: inline-flex; border: 1px solid var(--line); background: var(--raised); }
.ck-chips button { min-height: 40px; padding: 0 16px; border: 0; background: transparent; color: var(--ink-2); font: 500 0.9375rem var(--sans); cursor: pointer; transition: background-color 0.14s ease, color 0.14s ease; }
.ck-chips button + button { border-left: 1px solid var(--line); }
.ck-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.ck-ag-g { margin-bottom: 22px; }
.ck-ag-g h2 { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px; font: 400 1.375rem var(--serif); }
.ck-ag-g h2 span { font: 500 0.8125rem var(--sans); color: var(--mut); }
.ck-ag-g.is-over h2 { color: var(--krit); }

/* Export-Karten */
.ck-exports { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ck-exp { display: grid; grid-template-rows: auto auto auto auto 1fr auto; gap: 10px; padding: 22px; border: 1px solid var(--line); background: var(--card); animation: ck-in 0.36s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.ck-exp__icon { width: 46px; height: 54px; display: grid; place-items: end center; padding-bottom: 8px; background: #1f6b43; color: #f4fbf6; font: 700 0.625rem var(--sans); letter-spacing: 0.06em;
  clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%); }
.ck-exp h2 { margin: 6px 0 0; font: 400 1.625rem/1.1 var(--serif); }
.ck-exp__u { margin: 0; color: var(--mut); font-size: 0.9375rem; }
.ck-exp__k { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 8px 0 0; background: var(--line); border: 1px solid var(--line); }
.ck-exp__k div { padding: 10px 12px; background: var(--raised); }
.ck-exp__k dt { font-size: 0.75rem; color: var(--mut); }
.ck-exp__k dd { margin: 2px 0 0; font: 500 1.0625rem var(--sans); }
.ck-exp__t { margin: 4px 0 0; font-size: 0.875rem; color: var(--ink-2); }
.ck-exp .btn { justify-content: center; }
.ck-exp .btn:disabled { opacity: 0.7; }

@media (max-width: 1100px) { .ck-exports { grid-template-columns: 1fr 1fr; } .ck-brand span { display: none; } }
/* Handy: Bereiche unten wie in einer App */
@media (max-width: 860px) {
  /* kein backdrop-filter am Handy: sonst wird die Kopfleiste zum Bezugsrahmen der fest positionierten Navigation */
  .ck-top { grid-template-columns: auto 1fr; height: 54px; gap: 12px; backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--paper); }
  .ck-brand span { display: inline; font-size: 1.0625rem; }
  .ck-top__r { justify-self: end; gap: 8px; }
  .ck-top__r .ck__who span:not(.ck-avatar), .ck-top__r .ck-link { display: none; }
  .ck-back { padding: 6px 10px; font-size: 0.8125rem; }
  .ck-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; height: calc(62px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); gap: 0;
    background: color-mix(in srgb, var(--paper) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .ck-nav a { flex: 1; flex-direction: column; justify-content: center; gap: 3px; padding: 0; font-size: 0.75rem; }
  .ck-nav svg { width: 22px; height: 22px; }
  .ck-nav a[aria-current="page"]::after { left: 30%; right: 30%; top: 0; bottom: auto; }
  .ck-nav__n { position: absolute; top: 6px; left: calc(50% + 6px); }
  .ck-body .ck { padding-bottom: calc(90px + env(safe-area-inset-bottom)); }
  .ck-exports { grid-template-columns: 1fr; }
  .ck-chips { width: 100%; }
  .ck-chips button { flex: 1; padding: 0 6px; font-size: 0.875rem; }
  .ck-fbar select, .ck-inl { flex: 1; }
  .ck-alert { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ck-vhead .btn { width: 100%; justify-content: center; }
}
/* schmale Handys: Kopfleiste entlasten, damit Marke, Demo-Kennzeichen und Knöpfe nicht kollidieren */
@media (max-width: 480px) {
  .ck-brand { gap: 8px; }
  .ck-brand img { width: 44px; }
  .ck-brand span { padding-left: 8px; }
  .ck-top__r .ck__who { display: none; }
}

/* ---------- Miet-Cockpit: Bestandsauswahl, Objekte, neue Fläche ---------- */
/* Bestandsauswahl: dezent wie eine Überschrift, gilt für alle Bereiche */
.ck-scope { display: flex; align-items: center; gap: 6px 18px; flex-wrap: wrap; margin: -4px 0 16px; }
.ck-scope__sel { position: relative; min-width: 0; max-width: min(100%, 640px); }
.ck-scope__sel select { appearance: none; -webkit-appearance: none; max-width: 100%; min-height: 40px; padding: 0 30px 0 2px; border: 0; border-bottom: 1px dashed var(--line); background: transparent; color: var(--ink);
  font: 400 1.375rem/1.2 var(--serif); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; transition: border-color 0.16s ease, color 0.16s ease; }
.ck-scope__sel::after { content: ""; position: absolute; right: 8px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 1.6px solid var(--mut); border-bottom: 1.6px solid var(--mut); transform: rotate(45deg); pointer-events: none; }
.ck-scope__sel select:hover { border-bottom-color: var(--ink-2); }
.ck-scope__sel select.is-set { color: var(--cu); border-bottom: 1px solid var(--cu-2); }
.ck-scope__sel select:focus-visible { outline: 2px solid var(--cu); outline-offset: 2px; }
.ck-scope__info { margin: 0; font-size: 0.875rem; color: var(--mut); }
.ck-scope__info .ck-link { margin-left: 6px; }
.ck-scope__neu { margin-left: auto; min-height: 40px; padding: 0 16px; }
.ck-scope__neu span { font-size: 1.125rem; line-height: 1; margin-right: 2px; }

/* Tabelle: Platzhalter ohne Foto, Dummy-Kennzeichen */
.ck-row__ph { flex: none; width: 64px; height: 44px; background: repeating-linear-gradient(135deg, var(--paper-2) 0 6px, var(--paper-3, #ece5d9) 6px 12px); }
.ck-dummy { display: inline-block; margin-left: 6px; padding: 1px 6px; border: 1px dashed var(--mut); border-radius: 4px; color: var(--mut); font: 600 0.625rem/1.5 var(--sans); font-style: normal; letter-spacing: 0.1em; text-transform: uppercase; vertical-align: 3px; }
.ck-dl dd small { display: block; color: var(--mut); font-size: 0.8125rem; }

/* Objekte */
.ck-obj__q { flex: 2 1 260px; }
.ck-obj__q input { width: 100%; min-height: 42px; border: 1px solid var(--line); font: inherit; font-size: 0.9375rem; }
.ck-objs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.ck-obj { display: grid; grid-template-rows: 1fr auto; border: 1px solid var(--line); background: var(--card); animation: ck-in 0.32s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); transition: border-color 0.16s ease, box-shadow 0.16s ease; }
.ck-obj:hover { border-color: var(--ink-2); box-shadow: 0 8px 22px -16px rgb(var(--sh) / 0.55); }
.ck-obj.is-leer { background: transparent; border-style: dashed; }
.ck-obj__main { display: grid; align-content: start; gap: 2px; padding: 16px 16px 12px; border: 0; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ck-obj__nr { font: 600 0.75rem/1.2 var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cu); }
.ck-obj__ort { margin-top: 4px; font: 400 1.375rem/1.15 var(--serif); }
.ck-obj__adr { font-size: 0.875rem; color: var(--ink-2); }
.ck-obj__none { margin-top: 12px; font-size: 0.875rem; color: var(--mut); }
.ck-obj__bar { display: block; height: 4px; margin: 14px 0 10px; background: var(--paper-2); }
.ck-obj__bar i { display: block; height: 100%; width: calc(var(--q) * 100%); background: var(--ink); }
.ck-obj__k { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin: 0; }
.ck-obj__k dt { font-size: 0.75rem; color: var(--mut); }
.ck-obj__k dd { margin: 0; font: 500 0.9375rem var(--sans); }
.ck-obj .ck-badge { margin-top: 10px; }
.ck-obj__f { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 16px 10px; border-top: 1px solid var(--line); }
.ck-obj__z { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.8125rem; color: var(--mut); }
.ck-obj__z input { width: 9.5rem; min-width: 0; min-height: 32px; padding: 0 8px; border: 1px solid transparent; background: transparent; color: var(--ink); font: 500 0.875rem var(--sans); }
.ck-obj__z input:hover, .ck-obj__z input:focus { border-color: var(--line); background: var(--raised); }
.ck-uebergabe { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; padding: 12px 14px; border-left: 3px solid var(--cu); background: var(--res-bg); font-size: 0.9375rem; }
.ck-uebergabe p { margin: 0; }
.ck-uebergabe input { min-height: 40px; padding: 0 10px; border: 1px solid var(--line); background: var(--raised); font: inherit; }
.ck-inl--check input { width: 18px; height: 18px; min-height: 0; accent-color: var(--ink); }

/* Formulare: Rollen, Segmente mit beliebiger Anzahl, Hinweise */
.ck-seg[style*="--n"] { grid-template-columns: repeat(var(--n), minmax(0, 1fr)); }
.ck-fs--rolle { padding-top: 18px; margin-top: 8px; }
.ck-fs--rolle legend { display: flex; align-items: center; gap: 10px; }
.ck-rolle { padding: 3px 8px; border-radius: 4px; background: var(--ink); color: var(--paper); font: 600 0.6875rem/1.2 var(--sans); letter-spacing: 0.1em; }
.ck-rolle.is-verm { background: var(--cu); }
.ck-f__hint { display: block; margin: 2px 0 0; font-size: 0.8125rem; font-weight: 400; color: var(--mut); }
.ck-f textarea.ck-f__lang { min-height: 140px; }
.ck-stern { color: var(--cu); font-style: normal; }
.ck-dabei { display: flex; align-items: center; gap: 12px; margin: 14px 0 0; font-size: 0.8125rem; color: var(--mut); }
.ck-dabei img { width: 84px; height: 58px; object-fit: cover; flex: none; }

/* Dateien */
.ck-drop { display: grid; gap: 10px; padding: 14px; border: 1px dashed var(--line-2); background: var(--raised); transition: border-color 0.16s ease, background-color 0.16s ease; }
.ck-drop + .ck-drop { margin-top: 4px; }
.ck-drop.is-over { border-color: var(--cu); background: var(--cu-bg); }
.ck-drop__kopf b { display: block; font-size: 0.9375rem; }
.ck-drop__kopf small { font-size: 0.8125rem; color: var(--mut); }
.ck-drop__feld { position: relative; display: grid; place-items: center; min-height: 52px; border: 1px solid var(--line); background: var(--paper); font-size: 0.875rem; color: var(--ink-2); cursor: pointer; }
.ck-drop__feld:hover { border-color: var(--ink-2); }
.ck-drop__feld input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ck-drop__feld:focus-within { outline: 2px solid var(--cu); outline-offset: 1px; }
.ck-thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ck-thumbs:empty { display: none; }
.ck-th { position: relative; display: grid; gap: 4px; padding: 4px 4px 6px; border: 1px solid var(--line); background: var(--paper); font-size: 0.75rem; cursor: grab; }
.ck-th.is-titel { border-color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); }
.ck-th img, .ck-th__doc { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: grid; place-items: center; background: var(--paper-2); color: var(--mut); font-weight: 600; letter-spacing: 0.08em; }
.ck-th__n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-2); }
.ck-th__n b { color: var(--cu); }
.ck-th__web { display: flex; align-items: center; gap: 6px; color: var(--ink); }
.ck-th__btns { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; }
.ck-th__btns button { width: 26px; height: 26px; border: 0; border-radius: 50%; background: rgba(27, 37, 51, 0.78); color: #f6f2eb; font: 600 0.8125rem/1 var(--sans); cursor: pointer; }
.ck-th__btns button:hover { background: var(--ink); }
.ck-th.is-oben .ck-th__n { color: var(--ok, #2f6b45); }

/* Dialog „Neue Fläche“: breiter, Abschnitte oben, Fortschritt und Knöpfe unten fest */
.ck-neu { width: min(760px, 100vw); }
.ck-neu__nav { position: sticky; top: 0; z-index: 2; display: flex; gap: 4px; padding: 10px 26px; background: var(--paper-2); border-bottom: 1px solid var(--line); overflow-x: auto; }
.ck-neu__nav button { flex: none; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink-2); font: 500 0.8125rem var(--sans); cursor: pointer; }
.ck-neu__nav button:hover { border-color: var(--ink); color: var(--ink); }
.ck-neu .ck-drawer__head { position: static; }
.ck-neu [id^="ck-n-"] { scroll-margin-top: 60px; }
.ck-neu__foot { position: sticky; bottom: 0; z-index: 2; display: grid; gap: 10px; margin: 18px -26px -40px; padding: 14px 26px calc(14px + env(safe-area-inset-bottom)); background: var(--paper); border-top: 1px solid var(--line); box-shadow: 0 -10px 24px -20px rgb(var(--sh) / 0.5); }
.ck-neu__foot .ck-actions { justify-content: flex-end; margin: 0; }

@media (max-width: 860px) {
  .ck-scope { margin-top: -6px; }
  .ck-scope__sel { flex: 1 1 100%; }
  .ck-scope__sel select { width: 100%; font-size: 1.1875rem; }
  .ck-scope__neu { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 24; min-height: 48px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgb(var(--sh) / 0.6); }
  .ck-objs { grid-template-columns: 1fr; }
  .ck-neu .ck-grid2, .ck-drawer .ck-grid2 { grid-template-columns: 1fr; }
  .ck-neu__nav { padding: 10px 16px; }
  .ck-neu__foot { margin: 18px -16px -40px; padding-left: 16px; padding-right: 16px; }
  .ck-seg[style*="--n:4"] span { font-size: 0.8125rem; padding: 0 4px; }
  .ck-nav a { font-size: 0.6875rem; }
}
@media (prefers-reduced-motion: reduce) { .ck-obj { animation: none; } }

/* ---------- Dashboard-Schrift: durchgehend Archivo, gut lesbar und ohne kursiv wirkende Display-Serif.
   Die Serif bleibt nur im Schriftzug „Miet-Cockpit“. Zahlen mit gleicher Ziffernbreite. ---------- */
.ck-body [hidden] { display: none !important; }
.ck-body .ck, .ck-body .ck-drawer { font-variant-numeric: tabular-nums; }
.ck-body .ck h1, .ck-body .ck-vhead h1 { font: 600 clamp(1.5rem, 1.25rem + 0.9vw, 2rem)/1.15 var(--sans); letter-spacing: -0.015em; }
.ck-body .ck__login h2, .ck-body .ck__sec-h h2 { font: 600 1.5rem/1.2 var(--sans); letter-spacing: -0.01em; }
.ck-body .ck-kpi__z { font: 600 1.75rem/1.1 var(--sans); letter-spacing: -0.02em; }
.ck-body .ck-row__fl b { font: 600 1rem/1.3 var(--sans); }
.ck-body .ck-drawer__head h2 { font: 600 1.375rem/1.25 var(--sans); letter-spacing: -0.01em; }
.ck-body .ck-ag__d b { font: 600 1.5rem/1 var(--sans); letter-spacing: -0.02em; }
.ck-body .ck-ag-g h2 { font: 600 1.0625rem/1.3 var(--sans); }
.ck-body .ck-exp h2 { font: 600 1.25rem/1.2 var(--sans); letter-spacing: -0.01em; }
.ck-body .ck-obj__ort { font: 600 1.125rem/1.25 var(--sans); }
.ck-body .ck-scope__sel select { font: 600 1.125rem/1.3 var(--sans); color: var(--ink); padding-right: 32px; }
.ck-body .ck-scope__sel select.is-set { color: var(--ink); border-bottom: 2px solid var(--cu); }
.ck-body .ck-scope__sel select option, .ck-body .ck-scope__sel select optgroup { font: 400 0.9375rem var(--sans); }

/* Objekt-Karten: nichts ragt über den Rand */
.ck-obj { grid-template-columns: minmax(0, 1fr); min-width: 0; }
.ck-obj__main { min-width: 0; }
.ck-obj__bar { width: 100%; overflow: hidden; }
.ck-obj__f { flex-wrap: wrap; }
.ck-obj__z { flex: 1 1 auto; }
.ck-obj__z input { flex: 1 1 auto; width: auto; max-width: 11rem; }
.ck-obj__f .ck-link { flex: none; padding: 5px 10px; font-size: 0.8125rem; white-space: nowrap; }
@media (max-width: 860px) { .ck-body .ck-scope__sel select { font-size: 1.0625rem; } .ck-body .ck-kpi__z { font-size: 1.5rem; } }
.ck-scope__info .ck-link { padding: 0; border: 0; color: var(--cu); text-decoration: underline; text-underline-offset: 3px; }
.ck-scope__info .ck-link:hover { color: var(--ink); }
.ck-obj__f { flex-wrap: nowrap; align-items: flex-end; }
.ck-obj__z { display: grid; gap: 0; }
.ck-obj__z span { font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase; padding-left: 8px; }
.ck-obj__z input { width: 100%; max-width: none; margin-left: 0; }
@media (max-width: 860px) { .ck-scope__neu { min-height: 44px; padding: 0 16px; font-size: 0.9375rem; } }

/* ---------- Cockpit 26.10.2026: Status, Inserat, Mieter und Kontakte ---------- */
.ck-chip[data-st="Frei (Inseriert)"] { background: var(--ok); color: var(--on-acc); }
.ck-chip[data-st="Vermietet (bald frei)"] { background: var(--res-bg); color: var(--res); }
.ck-mk { display: inline-block; margin: 4px 0 0 6px; padding: 2px 8px; border-radius: 6px; background: var(--res-bg); color: var(--res); font: 600 0.6875rem/1.4 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: middle; }
.ck-mk.is-vor { background: var(--paper-2); color: var(--ink-2); }
.ck-insbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 26px 0; padding: 10px 12px 10px 14px; border: 1px solid var(--line); background: var(--raised); font-size: 0.9375rem; }
.ck-insbar.is-vor { border-color: var(--cu); background: var(--res-bg); }
.ck-insbar.is-on { border-color: var(--ok); background: var(--ok-bg); }
.ck-insbar__t { flex: 1 1 260px; }
.ck-insbar__go { min-height: 38px; padding: 0 16px; }
@media (max-width: 720px) { .ck-insbar { margin: 12px 18px 0; } }
/* Mieterfeld mit Vorschlägen */
.ck-ac { position: relative; }
.ck-ac > label { display: block; }
.ck-ac__l { position: absolute; left: 0; right: 0; top: calc(100% - 22px); z-index: 5; margin: 0; padding: 4px; list-style: none; background: var(--raised); border: 1px solid var(--ink-2); box-shadow: 0 16px 36px -18px rgb(var(--sh) / 0.5); max-height: 300px; overflow: auto; }
.ck-ac__l[hidden] { display: none; }
.ck-ac__l li { display: grid; gap: 1px; padding: 8px 10px; cursor: pointer; font-weight: 400; }
.ck-ac__l li b { font-weight: 500; }
.ck-ac__l li small { color: var(--mut); font-size: 0.8125rem; }
.ck-ac__l li:hover, .ck-ac__l li[aria-selected="true"] { background: var(--card); }
.ck-ac__l li.is-neu { color: var(--cu); border-top: 1px solid var(--line); }
.ck-ac__hint { min-height: 1.2em; margin: 2px 0 0; font-size: 0.8125rem; font-weight: 400; color: var(--mut); }
.ck-ac__ok { color: var(--ok); }
.ck-ac__fix { padding: 0 2px; border: 0; border-bottom: 1px solid currentColor; background: none; color: var(--cu); font: inherit; font-weight: 500; cursor: pointer; }
/* Verzeichnis */
.ck-gs { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.ck-g { display: grid; align-content: start; gap: 3px; padding: 16px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; text-align: left; cursor: pointer; animation: ck-in 0.32s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms); transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.16s var(--ease-out); }
.ck-g:hover { border-color: var(--ink-2); box-shadow: 0 8px 22px -16px rgb(var(--sh) / 0.55); }
.ck-g:active { transform: scale(0.985); }
.ck-g__art { width: fit-content; padding: 2px 8px; border-radius: 6px; background: var(--paper-2); color: var(--ink-2); font: 600 0.6875rem/1.5 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.ck-g__art[data-art="Mieter"] { background: var(--verm-bg); color: var(--verm); }
.ck-g__art[data-art="Gewerk"], .ck-g__art[data-art="Dienstleister"] { background: var(--res-bg); color: var(--res); }
.ck-g__n { margin-top: 6px; font: 600 1.0625rem/1.3 var(--sans); }
.ck-g__a { font-size: 0.875rem; color: var(--ink-2); }
.ck-g__k { margin-top: 6px; font-size: 0.8125rem; color: var(--mut); }
.ck-g__p { display: grid; gap: 2px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); font-size: 0.875rem; }
.ck-g__p small { color: var(--mut); }
.ck-card--first { margin-top: 0; }
.ck-kl { display: grid; gap: 0; margin: 0 0 12px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ck-kl > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: 6px 16px; align-items: start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.ck-kl > li.is-edit { display: block; }
.ck-kl__k { display: grid; gap: 2px; }
.ck-kl__k .ck-mk { margin: 2px 0; width: fit-content; }
.ck-kl__k small { color: var(--mut); font-size: 0.875rem; }
.ck-kl__c { display: grid; gap: 2px; font-size: 0.9375rem; }
.ck-kl__c a { color: var(--ink); text-decoration-color: var(--line); }
.ck-kl__c small { color: var(--mut); }
.ck-kform { padding: 14px; margin-bottom: 12px; background: var(--card); border: 1px solid var(--line); }
.ck-gfl { display: grid; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.ck-gfl button { display: flex; width: 100%; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 0; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.ck-gfl button:hover span:first-child { text-decoration: underline; }
.ck-reg { display: inline-flex; align-items: center; min-height: 44px; width: fit-content; text-decoration: none; }
.ck-link--del { margin-left: auto; color: var(--krit); border-color: transparent; }
@media (max-width: 720px) { .ck-kl > li { grid-template-columns: minmax(0, 1fr) auto; } .ck-kl__c { grid-column: 1 / -1; grid-row: 2; } }
/* Vermietet: sechs Wochen ausgegraut sichtbar, ohne Exposé-Anfrage */
.x-vermietet > *:not(.ph-verm) { opacity: 0.6; filter: grayscale(1); }
.btn.is-off { background: var(--paper-2); color: var(--mut); border-color: var(--line); box-shadow: none; cursor: not-allowed; pointer-events: none; }
/* ---------- Cockpit 26.10.2026: kompakte Flächen-Ansicht (Suche oben, Ansichten mit Zählern, Kennzahlen klappbar, „+ Neu“) ---------- */
.ck-body .ck__bar { margin-top: 0; }
.ck-qv { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 4px; }
.ck-qv__tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.ck-qv__tabs button { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); color: var(--ink-2); font: 500 0.875rem var(--sans); white-space: nowrap; cursor: pointer; transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease, transform 0.16s var(--ease-out); }
.ck-qv__tabs button:hover { border-color: var(--ink-2); }
.ck-qv__tabs button:active { transform: scale(0.97); }
.ck-qv__tabs button span { color: var(--mut); font-variant-numeric: tabular-nums; }
.ck-qv__tabs button[data-qv="abweichung"] span, .ck-qv__tabs button[data-qv="vorgemerkt"] span, .ck-qv__tabs button[data-qv="Vermietet (bald frei)"] span { color: var(--cu); font-weight: 600; }
.ck-qv__tabs button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.ck-qv__tabs button[aria-pressed="true"] span { color: inherit; opacity: 0.75; }
.ck-qv__sum { margin: 0 0 0 auto; font-size: 0.875rem; color: var(--mut); }
.ck-qv__sum b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.ck-qv__kz { padding: 6px 0; border: 0; background: none; color: var(--cu); font: 500 0.875rem var(--sans); cursor: pointer; }
.ck-qv__kz::after { content: " ▾"; }
.ck-qv__kz[aria-expanded="true"]::after { content: " ▴"; }
.ck-body .ck__kpis { grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 10px 0 4px; }
.ck__kpis[hidden] { display: none; }
.ck-plus summary { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border-color: var(--cu); background: var(--cu); color: var(--on-acc); }
.ck-plus summary::after { content: ""; }
.ck-plus summary span { font-size: 1.125rem; line-height: 1; }
.ck-plus[open] summary { background: var(--ink); border-color: var(--ink); }
@media (max-width: 1100px) { .ck-body .ck__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) {
  .ck-qv__tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px 2px; }
  .ck-qv__tabs::-webkit-scrollbar { display: none; }
  .ck-qv__sum { margin-left: 0; flex: 1 1 auto; }
  .ck-body .ck__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* „+ Neu“ am Handy als runder Knopf über der unteren Leiste */
  .ck-plus { position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 24; }
  .ck-plus summary { min-height: 48px; padding: 0 18px; border-radius: 999px; box-shadow: 0 10px 24px -10px rgb(var(--sh) / 0.6); }
  .ck-plus > div { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
}
/* Übernahme aus iX-Haus */
.ck-imp .ck-drop { margin: 14px 0 10px; }
.ck-imp .ck-dl { margin-top: 16px; }
.ck-imp .ck-dl dd b { font-variant-numeric: tabular-nums; }
.ck-web ul { margin: 6px 0 0; padding-left: 18px; }
.ck-imp__det { margin: 14px 0; font-size: 0.875rem; }
.ck-imp__det summary { cursor: pointer; color: var(--cu); font-weight: 500; }
.ck-imp__det ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.ck-plus [role="menu"] { min-width: 250px; }
.ck-obj__eig { margin-top: 6px; width: fit-content; padding: 2px 8px; border-radius: 6px; background: var(--verm-bg); color: var(--verm); font: 500 0.75rem/1.5 var(--sans); }
.ck-dl__neben { font-size: 0.875rem; color: var(--ink-2); }
/* Kontakte als Liste mit Metadaten je Zeile */
.ck-gt .ck__thead, .ck-gt .ck-row { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) 130px minmax(0, 1.4fr) minmax(0, 1.3fr) 20px; }
.ck-grow__n { display: grid; gap: 4px; min-width: 0; }
.ck-grow__n b { font-weight: 600; overflow-wrap: anywhere; }
.ck-grow__n small { display: flex; align-items: center; gap: 8px; color: var(--mut); font-size: 0.8125rem; }
.ck-gt .ck-row small { display: block; margin-top: 2px; color: var(--mut); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ck-grow__n small { display: flex; margin-top: 0; }
.ck-gt .ck-row .ck-mk { margin: 0 0 0 4px; }
.ck-grow__fehlt { color: var(--cu); font-size: 0.875rem; }
.ck-fbar--klein { margin: -8px 0 0; }
@media (max-width: 860px) {
  .ck-gt .ck__thead { display: none; }
  .ck-gt .ck-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
  .ck-gt .ck-row > .ck-grow__n { grid-column: 1 / -2; }
  .ck-gt .ck-row > [data-l="Kontakt"] { grid-column: 1 / -2; }
}

/* ---------- Werkstatt 27.10.2026: schlanke Leiste mit Symbolen, Profil, kompakte Werkzeuge ---------- */
.ws-wrap { padding: 16px var(--m) 0; }
.ws-nav { display: flex; flex-wrap: nowrap; align-items: center; gap: 2px; padding: 0 0 10px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.ws-nav::-webkit-scrollbar { display: none; }
.ws-nav a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 0; border-radius: 8px; background: transparent; color: var(--ink-2); font: 500 0.875rem var(--sans); white-space: nowrap; text-decoration: none; transition: background-color 0.16s ease, color 0.16s ease; }
.ws-nav a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ws-nav a[aria-current="page"] { background: var(--paper-2); color: var(--ink); box-shadow: inset 0 -2px 0 var(--cu); }
.ws-nav a.ws-nav__home { margin-right: 10px; padding-left: 0; font: 600 0.9375rem var(--sans); color: var(--ink); }
.ws-nav a.ws-nav__home[aria-current="page"] { background: none; box-shadow: none; }
@media (hover: hover) and (pointer: fine) { .ws-nav a:hover { background: var(--paper-2); color: var(--ink); } }
.ws-who { display: flex; align-items: center; gap: 10px; margin-left: auto; padding-left: 16px; }
.ws-who__av { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: var(--paper); font: 600 0.6875rem var(--sans); letter-spacing: 0.04em; flex: none; }
.ws-who__n { font-size: 0.875rem; color: var(--ink-2); white-space: nowrap; }
.ws-nav a.ws-who__out { padding: 7px 12px; border: 1px solid var(--line); border-radius: 0; color: var(--ink); font-size: 0.875rem; }
@media (hover: hover) and (pointer: fine) { .ws-nav a.ws-who__out:hover { background: transparent; border-color: var(--ink); } }
.ws-home { padding: 28px var(--m) var(--section); }
.ws-home__h { margin: 0 0 18px; font: 600 clamp(1.5rem, 1.25rem + 0.9vw, 2rem)/1.15 var(--sans); letter-spacing: -0.015em; }
.ws-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.ws-tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 2px; align-items: center; min-height: 0; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); color: var(--ink); text-decoration: none; animation: ck-in 0.32s var(--ease-out) both; animation-delay: calc(var(--i) * 30ms); transition: border-color 0.16s ease, box-shadow 0.16s ease, transform 0.14s var(--ease-out); }
.ws-tile__ic { grid-row: 1 / 3; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--paper-2); color: var(--cu); }
.ws-tile__ic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ws-tile__t { font: 600 1rem/1.3 var(--sans); }
.ws-tile__d { font-size: 0.875rem; color: var(--mut); max-width: none; }
.ws-tile.is-haupt .ws-tile__ic { background: var(--ink); color: var(--paper); }
.ws-tile:active { transform: scale(0.985); }
@media (hover: hover) and (pointer: fine) { .ws-tile:hover { border-color: var(--ink-2); box-shadow: 0 8px 22px -16px rgba(27, 37, 51, 0.55); } }
@media (max-width: 760px) { .ws-who__n { display: none; } .ws-nav a span { display: none; } .ws-nav a.ws-nav__home span, .ws-nav a.ws-who__out { display: inline-flex; } }
@media (prefers-reduced-motion: reduce) { .ws-tile { animation: none; } }
/* Cockpit: „+ Neu“ im selben schlichten Stil wie „← Werkstatt“ und „Abmelden“ */
.ck-plus summary { min-height: 0; padding: 7px 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 0.875rem var(--sans); }
.ck-plus summary span { font-size: 1rem; }
.ck-plus summary:hover { border-color: var(--ink); }
.ck-plus[open] summary { background: transparent; border-color: var(--ink); color: var(--ink); }
@media (max-width: 860px) { .ck-plus summary { padding: 0 18px; min-height: 48px; border-radius: 999px; border-color: var(--ink); background: var(--ink); color: var(--paper); } }
/* Profilkreis bleibt rund, Name in einer Zeile */
.ck-avatar, .ws-who__av { flex: none; aspect-ratio: 1; }
.ck__who span:not(.ck-avatar) { white-space: nowrap; }
.ws-kopf { padding: 24px var(--m) 0; }
.ws-kopf h1 { margin: 0; font: 600 clamp(1.5rem, 1.25rem + 0.9vw, 2rem)/1.15 var(--sans); letter-spacing: -0.015em; }
.ws-kopf p { margin: 6px 0 0; color: var(--mut); font-size: 0.9375rem; }

/* ---------- Cockpit 27.10.2026: sortierbare Spalten, m², Kontakte-Liste, Profilmenü, Oberleiste ---------- */
@media (min-width: 861px) { .ck-body .ck__thead, .ck-body .ck-row, .ck-body .ck__colf { grid-template-columns: minmax(0, 2.2fr) 92px 132px minmax(0, 1.3fr) 180px 120px 20px; } }
.ck-th { display: inline-flex; align-items: center; gap: 6px; padding: 0; border: 0; background: none; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.ck-th::after { content: ""; width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0; transition: opacity 0.14s ease, transform 0.16s ease; }
.ck-th:hover::after { opacity: 0.35; }
[aria-sort="ascending"] > .ck-th, [aria-sort="descending"] > .ck-th { color: var(--ink); }
[aria-sort="ascending"] > .ck-th::after { opacity: 1; transform: rotate(180deg); border-top-color: var(--cu); }
[aria-sort="descending"] > .ck-th::after { opacity: 1; border-top-color: var(--cu); }
.ck-row__m2 { font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (min-width: 861px) { .ck-body .ck-gt .ck__thead, .ck-body .ck-gt .ck-row { grid-template-columns: minmax(0, 2fr) 120px 96px minmax(0, 1.3fr) 150px minmax(0, 1.4fr) 104px 20px; } }
.ck-gt .ck-row > span { min-width: 0; }
.ck-gt .ck-row small { display: block; margin-top: 2px; color: var(--mut); font-size: 0.8125rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-grow__n small { display: block; }
.ck-grow__mail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-gt .ck-g__art { display: inline-block; }
/* Profilmenü */
.ck-me summary.ck-me__btn { display: grid; place-items: center; padding: 0; border: 0; background: none; list-style: none; cursor: pointer; border-radius: 50%; }
.ck-me summary.ck-me__btn::after { content: none; }
.ck-me summary.ck-me__btn:focus-visible { outline: 2px solid var(--cu); outline-offset: 2px; }
.ck-me > div { min-width: 260px; }
.ck-me__kopf { display: flex; align-items: center; gap: 12px; padding: 10px 10px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--line); }
.ck-me__kopf b { display: block; font-weight: 600; }
.ck-me__kopf small { display: block; color: var(--mut); font-size: 0.8125rem; }
.ck-me a[role="menuitem"] { display: block; padding: 9px 10px; color: var(--ink); text-decoration: none; }
.ck-me a[role="menuitem"]:hover { background: var(--card); }
/* Oberleiste: Schriftzug nie umbrechen, auf kleinen Laptops kompakter */
.ck-brand span { white-space: nowrap; }
.ck-top__r { gap: 10px; }
@media (max-width: 1360px) and (min-width: 861px) { .ck-nav a { padding: 0 11px; } }
@media (max-width: 1220px) { .ck-brand span { display: none; } }
@media (max-width: 1220px) and (min-width: 861px) { .ck-nav a { padding: 0 9px; } }
@media (max-width: 1020px) and (min-width: 861px) { .ck-nav a span { display: none; } .ck-nav a { padding: 0 12px; } }
@media (max-width: 860px) { .ck-body .ck-gt .ck__thead { display: none; } .ck-body .ck-gt .ck-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } .ck-gt .ck-row > .ck-grow__n { grid-column: 1 / -2; } }

/* ---------- Cockpit 27.10.2026: Themes (Corporate, Studio, Nordsee; je hell und dunkel), Bestand oben, Filter-Etiketten,
   Auswahl, Rückgängig, Einstellungen ---------- */
:root { --raised: #fff; --on-acc: #fff; --sh: 27 37 51; --cu-bg: #fbf3ea; --line-2: #cbbfae; }
html[data-ck-theme] { background: var(--paper); color-scheme: light; }
html[data-ck-theme][data-ck-modus="dunkel"] { color-scheme: dark; }
html[data-ck-theme="corporate"][data-ck-modus="dunkel"] {
  --paper: #16181c; --paper-2: #1f2227; --paper-3: #2a2e34; --card: #1c1f24; --raised: #22262c;
  --ink: #f1ece4; --ink-2: #d4cdc2; --mut: #a39c91; --line: #33373e; --line-2: #4a4f57;
  --cu: #d29a62; --cu-2: #c48a52; --cu-3: #7b5634; --cu-bg: #2b2219; --on-acc: #16181c; --sh: 0 0 0;
  --ok: #86c79a; --ok-bg: #1d2b22; --res: #e0b06a; --res-bg: #2e2517; --verm: #c9d2de; --verm-bg: #262b33; --pau: #a3a7ad; --pau-bg: #26282c;
  --krit: #f08a78; --krit-bg: #34201d; --bald: #e0b06a; --bald-bg: #2e2517; --info: #a3a7ad; --info-bg: #25272b;
}
html[data-ck-theme="studio"] {
  --sans: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --serif: var(--sans); --serif-t: var(--sans);
  --paper: #f7f7f8; --paper-2: #efeff1; --paper-3: #e4e4e8; --card: #fbfbfc; --raised: #fff;
  --ink: #111113; --ink-2: #3c3c43; --mut: #6c6c76; --line: #e3e3e8; --line-2: #c8c8d0;
  --cu: #5b5bd6; --cu-2: #6c6ce0; --cu-3: #c9c9f6; --cu-bg: #f0f0fd; --on-acc: #fff; --sh: 17 17 19;
  --ok: #18794e; --ok-bg: #e7f5ed; --res: #a35200; --res-bg: #fff2e0; --verm: #3c3c43; --verm-bg: #ededf0; --pau: #6c6c76; --pau-bg: #f0f0f2;
  --krit: #cd2b31; --krit-bg: #fdecec; --bald: #a35200; --bald-bg: #fff2e0; --info: #6c6c76; --info-bg: #f0f0f2;
}
html[data-ck-theme="studio"][data-ck-modus="dunkel"] {
  --paper: #0c0c0e; --paper-2: #161619; --paper-3: #212125; --card: #121215; --raised: #18181c;
  --ink: #ededf0; --ink-2: #c2c2c9; --mut: #8b8b95; --line: #27272c; --line-2: #3b3b42;
  --cu: #9393f7; --cu-2: #8080f0; --cu-3: #3b3b78; --cu-bg: #1a1a33; --on-acc: #0c0c0e; --sh: 0 0 0;
  --ok: #4cc38a; --ok-bg: #11241a; --res: #f1a10d; --res-bg: #2a1f0b; --verm: #c2c2c9; --verm-bg: #1f1f24; --pau: #8b8b95; --pau-bg: #1c1c20;
  --krit: #ff6b70; --krit-bg: #2e1517; --bald: #f1a10d; --bald-bg: #2a1f0b; --info: #8b8b95; --info-bg: #1c1c20;
}
html[data-ck-theme="nordsee"] {
  --paper: #f3f0e8; --paper-2: #ebe6da; --paper-3: #e0d9ca; --card: #f9f7f2; --raised: #fffefb;
  --ink: #0e2238; --ink-2: #2b4058; --mut: #5c6a7a; --line: #d8d1c2; --line-2: #bfb6a3;
  --cu: #94701f; --cu-2: #a98432; --cu-3: #e1cd9b; --cu-bg: #f6efdc; --on-acc: #fff; --sh: 14 34 56;
  --ok: #22665a; --ok-bg: #e0eee9; --res: #8f5e0d; --res-bg: #f5ebd5; --verm: #0e2238; --verm-bg: #e0e6ed; --pau: #5c6a7a; --pau-bg: #ebe9e3;
  --krit: #a8352b; --krit-bg: #f6e4e0; --bald: #8f5e0d; --bald-bg: #f5ebd5; --info: #5c6a7a; --info-bg: #ebe9e3;
}
html[data-ck-theme="nordsee"][data-ck-modus="dunkel"] {
  --paper: #0a1828; --paper-2: #11243a; --paper-3: #183049; --card: #0e1f33; --raised: #132840;
  --ink: #e8edf3; --ink-2: #c1ccd8; --mut: #8b9cb1; --line: #1e3a58; --line-2: #2d4f74;
  --cu: #d8b465; --cu-2: #c6a154; --cu-3: #5c4a22; --cu-bg: #1d2a2c; --on-acc: #0a1828; --sh: 0 0 0;
  --ok: #6cc4a8; --ok-bg: #0f2a2a; --res: #e3b45c; --res-bg: #2a2516; --verm: #c1ccd8; --verm-bg: #16293f; --pau: #8b9cb1; --pau-bg: #132538;
  --krit: #f2877a; --krit-bg: #321c22; --bald: #e3b45c; --bald-bg: #2a2516; --info: #8b9cb1; --info-bg: #132538;
}
/* Nordsee: Kopfleiste in Marineblau, auch hell */
html[data-ck-theme="nordsee"] .ck-top { --paper: #0e2238; --ink: #f3f0e8; --ink-2: #d9dee6; --mut: #a7b4c4; --line: #26425f; --raised: #132b45; --card: #17314e;
  --cu: #c9a14f; --on-acc: #0e2238; background: #0e2238; border-bottom-color: #0e2238; color: var(--ink); backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-ck-theme="nordsee"][data-ck-modus="dunkel"] .ck-top { --paper: #07121f; background: #07121f; border-bottom-color: var(--line); }
html[data-ck-modus="dunkel"] .ck-brand img, html[data-ck-theme="nordsee"] .ck-brand img { filter: brightness(0) invert(0.93); }
/* Studio: präzise Kanten, weiche Ecken, ruhige Typografie */
html[data-ck-theme="studio"] .ck-body { letter-spacing: -0.003em; }
html[data-ck-theme="studio"] :is(.ck__bar input, .ck__bar select, .ck__bar button, .ck-fbar select, .ck-inl input, .ck-f input:not([type="checkbox"]):not([type="radio"]), .ck-f select, .ck-f textarea,
  .ck__colf input, .ck__colf select, .ck-chips, .ck-seg, .ck-kpi, .ck-obj, .ck-g, .ck-insbar, .ck-menu > div, .ck-ac__l, .ck-card, .ck-web, .ck-alert, .ck-drop, .ck-exp, .btn, .ck-uebergabe input, .ck-x, .ck-thc, .ck-wahl, .ck-menu > summary, .ck-iconbtn:not(.ck-me__btn), .ck-fchip, .ck-toast, .ck-ag__it, .ck-sum__img, .ck-row__fl img, .ck-row__ph) { border-radius: 8px; }
html[data-ck-theme="studio"] :is(.ck-chips, .ck-seg) { overflow: hidden; }
html[data-ck-theme="studio"] .ck-seg { border-color: var(--line-2); }
html[data-ck-theme="studio"] .ck-seg label + label span { border-left-color: var(--line-2); }
html[data-ck-theme="studio"] .ck__table { border-top-color: var(--line-2); }
html[data-ck-theme="studio"] .ck__thead { letter-spacing: 0.02em; text-transform: none; font-size: 0.8125rem; font-weight: 500; }
html[data-ck-theme="studio"] .ck__kick { letter-spacing: 0.04em; text-transform: none; font-size: 0.8125rem; color: var(--mut); }
html[data-ck-theme="studio"] .ck-drawer { border-radius: 14px 0 0 14px; border-left: 1px solid var(--line); }
html[data-ck-theme="studio"] .ck-row:hover { background: var(--paper-2); }
html[data-ck-theme="studio"] .ck-top { backdrop-filter: saturate(1.8) blur(16px); -webkit-backdrop-filter: saturate(1.8) blur(16px); }
html[data-ck-theme="studio"] .ck-drawer__head h2, html[data-ck-theme="studio"] .ck-vhead h1 { letter-spacing: -0.02em; }
/* Dunkel: Bilder etwas zurücknehmen, Fokus deutlich */
html[data-ck-modus="dunkel"] .ck-row__fl img, html[data-ck-modus="dunkel"] .ck-sum__img { filter: brightness(0.9) saturate(0.95); }
html[data-ck-modus="dunkel"] .ck-drawer::backdrop { background: rgb(0 0 0 / 0.55); }
/* Animationen reduzieren (Einstellung) */
html[data-ck-ruhig="1"] .ck-body *, html[data-ck-ruhig="1"] .ck-body *::before, html[data-ck-ruhig="1"] .ck-body *::after, html[data-ck-ruhig="1"] .ck-body ::backdrop { animation: none !important; transition: none !important; }

/* Schriftzug im Werkzeug: Archivo statt Display-Serif */
.ck-brand span { font: 600 1.0625rem/1 var(--sans); letter-spacing: -0.01em; }

/* Bestand: kompakter Knopf in der Oberleiste, gilt für alle Bereiche */
.ck-top { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.ck-scope { position: relative; display: inline-flex; align-items: center; gap: 0; min-width: 0; max-width: 260px; height: 34px; margin: 0; border: 1px solid var(--line); border-radius: 999px; background: var(--raised); flex-wrap: nowrap; transition: border-color 0.16s ease; }
.ck-scope:hover { border-color: var(--ink-2); }
.ck-scope.is-set { border-color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); }
.ck-scope__k { flex: none; padding: 0 0 0 12px; color: var(--mut); font: 500 0.75rem/1 var(--sans); letter-spacing: 0.02em; }
.ck-scope select { appearance: none; -webkit-appearance: none; min-width: 0; width: 100%; height: 100%; padding: 0 28px 0 8px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 0.875rem/1 var(--sans); text-overflow: ellipsis; white-space: nowrap; overflow: hidden; cursor: pointer; }
.ck-scope select:focus-visible { outline: 2px solid var(--cu); outline-offset: 2px; }
.ck-scope select option, .ck-scope select optgroup { font: 400 0.9375rem var(--sans); color: var(--ink); background: var(--raised); }
.ck-scope::after { content: ""; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border-right: 1.5px solid var(--mut); border-bottom: 1.5px solid var(--mut); transform: rotate(45deg); pointer-events: none; }
@media (max-width: 1220px) and (min-width: 861px) { .ck-scope { max-width: 200px; } .ck-scope__k { display: none; } .ck-scope select { padding-left: 12px; } }
@media (max-width: 860px) {
  .ck-top { grid-template-columns: auto minmax(0, 1fr) auto; }
  .ck-scope { justify-self: start; max-width: 100%; }
  .ck-scope__k { display: none; }
  .ck-scope select { padding-left: 12px; font-size: 0.8125rem; }
}
.ck-body .btn:not(.btn--line):not(.btn--quiet):not(.btn--ink):not(.is-off) { color: var(--on-acc); }
@media (hover: hover) { .ck-body .btn:not(.btn--line):not(.btn--quiet):not(.btn--ink):not(.is-off):hover { background: color-mix(in srgb, var(--cu) 82%, var(--ink)); } }
.ck-iconbtn--svg svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Filterleiste: Suche + Filter, Sortierung über die Spaltenköpfe (Auswahlfeld nur am Handy) */
@media (min-width: 861px) {
  .ck-body .ck__bar { grid-template-columns: minmax(0, 1fr) auto; }
  .ck-body .ck__bar .ck-sortm { display: none; }
  .ck-body .ck__cf-btn { min-width: 110px; }
}
.ck__cf-btn.is-set { border-color: var(--cu); color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); }
.ck-flc { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-height: 30px; }
.ck-flc__n { margin-right: 4px; }
.ck-flc__wahl { margin-left: auto; }
.ck-fchip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 6px 0 10px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--raised); color: var(--ink); font: 500 0.8125rem/1 var(--sans); cursor: pointer; transition: border-color 0.14s ease, background-color 0.14s ease; }
.ck-fchip span { display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--mut); font-size: 0.875rem; line-height: 1; }
.ck-fchip:hover { border-color: var(--ink-2); }
.ck-fchip:hover span { background: var(--paper-3); color: var(--ink); }
.ck-fchip:active { transform: scale(0.97); }
.ck-flc .ck-link { padding: 0; border: 0; background: none; color: var(--cu); font: 500 0.8125rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-flc .ck-link:hover { color: var(--ink); }

/* Kopfzeile bleibt beim Scrollen stehen, Zahlen rechtsbündig */
@media (min-width: 861px) {
  .ck-body .ck__thead { position: sticky; top: 60px; z-index: 6; background: var(--paper); }
  .ck-body .ck__table:not(.ck-gt) .ck__thead > :nth-child(2), .ck-body .ck__table:not(.ck-gt) .ck__thead > :nth-child(6) { justify-self: end; }
  .ck-body [data-ck-rows] .ck-row > :nth-child(2), .ck-body [data-ck-rows] .ck-row > :nth-child(6) { justify-self: end; text-align: right; }
  .ck-body [data-ck-rows] .ck-row > :nth-child(6) small { text-align: right; }
  .ck-body .ck__colf [data-cf="m2"], .ck-body .ck__colf [data-cf="miete"] { text-align: right; }
}
.ck-body [data-ck-rows] .ck-row > :nth-child(6) { font-variant-numeric: tabular-nums; }

/* Status-Etiketten: ein System (Punkt + zarte Tönung), Zusatzhinweise als Umriss */
.ck-chip { gap: 7px; padding: 4px 10px 4px 9px; border-radius: 999px; font: 500 0.8125rem/1.2 var(--sans); }
.ck-chip::before { flex: none; width: 7px; height: 7px; }
.ck-chip[data-st="Frei"] { background: var(--ok-bg); color: var(--ok); }
.ck-chip[data-st="Frei"]::before { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.ck-chip[data-st="Frei (Inseriert)"] { background: var(--ok-bg); color: var(--ok); }
.ck-chip[data-st="Frei (Inseriert)"]::before { box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 24%, transparent); }
.ck-chip[data-st="Vermietet"] { background: var(--verm-bg); color: var(--verm); }
.ck-chip[data-st="Vermietet"]::before { opacity: 0.55; }
.ck-chip[data-st="Vermietet (bald frei)"] { background: var(--res-bg); color: var(--res); }
.ck-mk { margin: 5px 0 0 6px; padding: 2px 8px; border-radius: 999px; background: transparent; box-shadow: inset 0 0 0 1px currentColor; color: var(--res); font: 500 0.75rem/1.35 var(--sans); letter-spacing: 0; text-transform: none; }
.ck-mk.is-vor { background: transparent; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--line-2); }
.ck-badge { border-radius: 6px; font: 500 0.75rem/1.4 var(--sans); }

/* Zeilendichte kompakt */
@media (min-width: 861px) {
  html[data-ck-dichte="kompakt"] .ck-body [data-ck-rows] .ck-row { padding-top: 5px; padding-bottom: 5px; font-size: 0.875rem; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-row__fl { gap: 10px; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-row__fl img, html[data-ck-dichte="kompakt"] .ck-body .ck-row__ph { width: 40px; height: 28px; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-row__fl b { font-size: 0.875rem; line-height: 1.25; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-row small { font-size: 0.75rem; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-badge { margin-top: 2px; padding: 0 6px; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-chip { padding-top: 2px; padding-bottom: 2px; font-size: 0.75rem; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-mk { margin-top: 2px; padding: 0 7px; }
  html[data-ck-dichte="kompakt"] .ck-body .ck-gt .ck-row { padding-top: 6px; padding-bottom: 6px; font-size: 0.875rem; }
}

/* Mehrfachauswahl */
.ck-row__cb { display: none; }
.ck__table.is-wahl .ck-row__fl { position: relative; }
.ck__table.is-wahl .ck-row__cb { display: grid; place-items: center; flex: none; width: 20px; height: 20px; border: 1.5px solid var(--line-2); border-radius: 6px; background: var(--raised); transition: background-color 0.12s ease, border-color 0.12s ease; }
.ck__table.is-wahl .ck-row.is-sel { background: color-mix(in srgb, var(--cu) 9%, transparent); }
.ck__table.is-wahl .ck-row.is-sel .ck-row__cb { border-color: var(--cu); background: var(--cu); }
.ck__table.is-wahl .ck-row.is-sel .ck-row__cb::after { content: ""; width: 9px; height: 5px; margin-top: -2px; border-left: 2px solid var(--on-acc); border-bottom: 2px solid var(--on-acc); transform: rotate(-45deg); }
.ck__table.is-wahl .ck-row__go { visibility: hidden; }
.ck-row.is-offen { box-shadow: inset 3px 0 0 var(--cu); }
.ck-wahl { position: fixed; left: 50%; bottom: 20px; z-index: 40; display: flex; align-items: center; gap: 6px; max-width: calc(100vw - 24px); padding: 6px 6px 6px 16px; border: 1px solid var(--line); background: var(--raised); color: var(--ink);
  box-shadow: 0 18px 44px -18px rgb(var(--sh) / 0.5), 0 2px 6px -2px rgb(var(--sh) / 0.15); transform: translateX(-50%); animation: ck-wahl-in 0.22s var(--ease-out); }
.ck-wahl[hidden] { display: none; }
@keyframes ck-wahl-in { from { opacity: 0; transform: translate(-50%, 10px); } }
.ck-wahl__n { margin-right: 6px; font: 600 0.875rem var(--sans); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ck-wahl__sep { width: 1px; height: 22px; margin: 0 4px; background: var(--line); }
.ck-wahl__b { display: inline-flex; align-items: center; min-height: 34px; padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--ink); font: 500 0.875rem var(--sans); white-space: nowrap; cursor: pointer; list-style: none; transition: border-color 0.14s ease, background-color 0.14s ease; }
.ck-wahl__b::-webkit-details-marker { display: none; }
.ck-wahl__b:hover:not([disabled]) { border-color: var(--ink-2); background: var(--paper-2); }
.ck-wahl__b:active:not([disabled]) { transform: scale(0.97); }
.ck-wahl__b[disabled], .ck-wahl__b[aria-disabled="true"] { color: var(--mut); cursor: default; opacity: 0.6; }
.ck-wahl__b--q { border-color: transparent; color: var(--cu); }
.ck-wahl__m > div { top: auto; bottom: calc(100% + 8px); transform-origin: bottom right; }
.ck-wahl__x { display: grid; place-items: center; width: 34px; height: 34px; border: 0; background: transparent; color: var(--mut); font-size: 0.9375rem; cursor: pointer; }
.ck-wahl__x:hover { color: var(--ink); }
body.has-wahl .ck-toast { bottom: 84px; }
html[data-ck-theme="studio"] .ck-wahl__b { border-radius: 7px; }
@media (max-width: 860px) {
  .ck-wahl { bottom: calc(72px + env(safe-area-inset-bottom)); flex-wrap: wrap; justify-content: center; padding: 8px; }
  .ck-wahl__sep { display: none; }
  .ck-wahl__n { width: 100%; margin: 0 0 4px; text-align: center; }
  body.has-wahl .ck-toast { bottom: calc(190px + env(safe-area-inset-bottom)); }
  body.has-wahl .ck-plus { display: none; }
}

/* Rückgängig in der Kurzmeldung */
.ck-toast.has-undo { display: flex; align-items: center; gap: 14px; pointer-events: auto; }
.ck-toast__undo { flex: none; padding: 4px 0; border: 0; background: none; color: var(--cu-3); font: 600 0.9375rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
html[data-ck-modus="dunkel"] .ck-toast__undo { color: var(--cu); }
html[data-ck-theme="studio"]:not([data-ck-modus="dunkel"]) .ck-toast__undo { color: #b4b4ff; }
.ck-toast__undo:hover { color: inherit; }

/* Detail: Kopf mit Blättern */
.ck-drawer__nav { display: flex; align-self: flex-start; align-items: center; gap: 6px; flex: none; }
.ck-x--nav { font-size: 1rem; }
.ck-x--nav[disabled] { opacity: 0.35; cursor: default; }
.ck-drawer__pos { min-width: 52px; color: var(--mut); font: 500 0.8125rem var(--sans); text-align: center; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 520px) { .ck-drawer__pos { display: none; } }

/* Mobil: „+ Neu“ verdeckt die letzte Zeile nicht mehr */
@media (max-width: 860px) { .ck-body .ck { padding-bottom: calc(150px + env(safe-area-inset-bottom)); } }

/* Einstellungen */
.ck-einst { width: min(520px, 100vw); }
.ck-einst__body section { padding: 0 0 22px; margin: 0 0 22px; border-bottom: 1px solid var(--line); }
.ck-einst__body h3 { margin: 0 0 12px; font: 600 0.8125rem/1.2 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mut); }
.ck-einst__l { margin: 16px 0 8px; font: 500 0.875rem var(--sans); color: var(--ink-2); }
.ck-thcs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.ck-thc { position: relative; display: grid; gap: 4px; padding: 8px 8px 10px; border: 1px solid var(--line); background: var(--raised); cursor: pointer; transition: border-color 0.14s ease, box-shadow 0.14s ease, transform 0.14s var(--ease-out); }
.ck-thc input { position: absolute; opacity: 0; pointer-events: none; }
.ck-thc:hover { border-color: var(--ink-2); }
.ck-thc:active { transform: scale(0.98); }
.ck-thc:has(input:checked) { border-color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); }
.ck-thc:has(input:focus-visible) { outline: 2px solid var(--cu); outline-offset: 2px; }
.ck-thc b { margin-top: 4px; font: 600 0.9375rem/1.2 var(--sans); }
.ck-thc small { color: var(--mut); font-size: 0.75rem; line-height: 1.35; }
.ck-thp { position: relative; display: block; height: 62px; overflow: hidden; border-radius: 4px; background: linear-gradient(115deg, var(--l) 0 52%, var(--d) 52% 100%); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.ck-thp i { position: absolute; display: block; height: 5px; border-radius: 3px; }
.ck-thp i:nth-child(1) { left: 8px; top: 10px; width: 36%; background: var(--li); }
.ck-thp i:nth-child(2) { left: 8px; top: 21px; width: 22%; background: var(--li); opacity: 0.4; }
.ck-thp i:nth-child(3) { left: 8px; bottom: 9px; width: 26px; height: 11px; border-radius: 6px; background: var(--a); }
.ck-thp i:nth-child(4) { right: 8px; top: 10px; width: 26%; background: var(--di); }
.ck-thp i:nth-child(5) { right: 8px; top: 21px; width: 16%; background: var(--di); opacity: 0.4; }
.ck-thp i:nth-child(6) { right: 8px; bottom: 9px; width: 26px; height: 11px; border-radius: 6px; background: var(--ad); }
.ck-thp[data-thp="corporate"] { --l: #f6f2eb; --li: #1b2533; --a: #9a6232; --d: #16181c; --di: #f1ece4; --ad: #d29a62; }
.ck-thp[data-thp="studio"] { --l: #f7f7f8; --li: #111113; --a: #5b5bd6; --d: #0c0c0e; --di: #ededf0; --ad: #9393f7; }
.ck-thp[data-thp="nordsee"] { --l: #f3f0e8; --li: #0e2238; --a: #94701f; --d: #0a1828; --di: #e8edf3; --ad: #d8b465; }
.ck-einst__c { display: flex; align-items: flex-start; gap: 12px; margin-top: 16px; cursor: pointer; }
.ck-einst__c input { flex: none; width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--cu); }
.ck-einst__c b { display: block; font: 500 0.9375rem/1.3 var(--sans); }
.ck-einst__c small { display: block; margin-top: 2px; color: var(--mut); font-size: 0.8125rem; line-height: 1.4; }
.ck-einst__s { display: grid; gap: 6px; font: 500 0.875rem var(--sans); color: var(--ink-2); }
.ck-einst__s select { min-height: 42px; padding: 0 12px; border: 1px solid var(--line); background: var(--raised); color: var(--ink); font: 400 0.9375rem var(--sans); }
html[data-ck-theme="studio"] .ck-einst__s select { border-radius: 8px; }
.ck-keys { display: grid; gap: 8px; margin: 0; }
.ck-keys > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); align-items: center; gap: 12px; font-size: 0.875rem; }
.ck-keys dt { color: var(--mut); }
.ck-keys dd { margin: 0; }
kbd { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border: 1px solid var(--line-2); border-bottom-width: 2px; border-radius: 5px; background: var(--raised); color: var(--ink); font: 600 0.75rem/1 var(--sans); }
.ck-einst__body .ck-link { padding: 0; border: 0; background: none; color: var(--cu); font: 500 0.875rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (max-width: 520px) { .ck-thcs { grid-template-columns: 1fr; } .ck-thc { grid-template-columns: 88px minmax(0, 1fr); column-gap: 12px; align-items: center; } .ck-thp { grid-row: span 2; height: 54px; } .ck-thc b { margin: 0; } }

/* ---------- Cockpit 27.10.2026: Inserat direkt aus dem Cockpit (Reiter „Website“, Abgleich je Angabe), Dateien in Teams ---------- */
.ck-abgl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--line); border-left: 3px solid var(--cu); background: var(--raised); }
.ck-abgl[hidden] { display: none; }
.ck-abgl p { flex: 1 1 380px; margin: 0; font-size: 0.9375rem; }
.ck-ab__stand { margin: 0 0 16px; }
.ck-ab__stand p { margin: 0 0 4px; }
.ck-ab__wartet { display: inline-block; padding: 4px 10px; border-radius: 6px; background: var(--cu-bg); color: var(--ink); font-size: 0.875rem; }
.ck-ab__von, .ck-ab__info { color: var(--mut); font-size: 0.8125rem; }
.ck-ab__info { margin: 0 0 14px; }
.ck-ab__ok { color: var(--ok); font-weight: 500; }
.ck-ab__fehlt { color: var(--krit); }
.ck-ab__akt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 0; }
.ck-ab { margin: 0 0 22px; }
.ck-ab__kopf { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.ck-ab__kopf h3 { margin: 0; font: 600 1rem var(--sans); }
.ck-ab__kopf span { color: var(--mut); font-size: 0.875rem; }
.ck-ab__kopf .ck-link, .ck-teams__kopf .ck-link { padding: 0; border: 0; background: none; color: var(--cu); font: 500 0.875rem var(--sans); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ck-ab__z { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.ck-ab__t { grid-column: 1 / -1; margin: 0; font: 600 0.8125rem var(--sans); letter-spacing: 0.02em; color: var(--ink-2); }
.ck-ab__o { position: relative; display: block; cursor: pointer; }
.ck-ab__o input { position: absolute; opacity: 0; pointer-events: none; }
.ck-ab__o span { display: block; height: 100%; padding: 10px 12px; border: 1px solid var(--line); background: var(--raised); font-size: 0.875rem; line-height: 1.45; overflow-wrap: anywhere; transition: border-color 0.14s ease, box-shadow 0.14s ease; }
.ck-ab__o small { display: block; margin-bottom: 4px; color: var(--mut); font: 600 0.6875rem var(--sans); letter-spacing: 0.08em; text-transform: uppercase; }
.ck-ab__o:hover span { border-color: var(--ink-2); }
.ck-ab__o input:checked + span { border-color: var(--cu); box-shadow: inset 0 0 0 1px var(--cu); }
.ck-ab__o input:checked + span small { color: var(--cu); }
.ck-ab__o input:focus-visible + span { outline: 2px solid var(--cu); outline-offset: 2px; }
.ck-ab__leer { color: var(--mut); }
.ck-ab .ck-f--check { margin-top: 14px; }
.ck-ab__bilder { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.ck-ab__bilder li { position: relative; display: grid; gap: 4px; }
.ck-ab__bilder img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--paper-2); border: 1px solid var(--line); }
.ck-ab__bilder li.is-plan img { object-fit: contain; background: #fff; }
.ck-ab__bilder li.is-neu img { visibility: hidden; }
.ck-ab__bilder li.is-neu::after { content: "ab 17 Uhr"; position: absolute; inset: 0 0 22px; display: grid; place-items: center; color: var(--mut); font-size: 0.75rem; }
.ck-ab__bilder small { color: var(--mut); font-size: 0.75rem; }
@media (max-width: 520px) { .ck-ab__z { grid-template-columns: 1fr; } }
/* Dateien in Teams */
.ck-teams { margin: 0 0 18px; padding: 14px; border: 1px solid var(--line); background: var(--raised); }
.ck-teams__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.ck-teams__kopf small { flex: 1 1 auto; color: var(--mut); font-size: 0.8125rem; overflow-wrap: anywhere; }
.ck-teams__g { margin-top: 12px; }
.ck-teams__t { margin: 0 0 6px; font: 600 0.8125rem var(--sans); color: var(--ink-2); }
.ck-teams__t small { color: var(--mut); font-weight: 400; }
.ck-teams__l { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.ck-teams__d { position: relative; }
.ck-teams__d a { display: grid; gap: 4px; color: var(--ink); text-decoration: none; }
.ck-teams__d img, .ck-teams__typ { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border: 1px solid var(--line); background: var(--paper-2); }
.ck-teams__typ { display: grid; place-items: center; color: var(--mut); font: 700 0.75rem var(--sans); letter-spacing: 0.06em; }
.ck-teams__n { overflow: hidden; color: var(--ink-2); font-size: 0.75rem; text-overflow: ellipsis; white-space: nowrap; }
.ck-teams__d a:hover img, .ck-teams__d a:hover .ck-teams__typ { border-color: var(--ink-2); }
.ck-teams__x { position: absolute; top: 4px; right: 4px; display: grid; place-items: center; width: 24px; height: 24px; border: 0; border-radius: 50%; background: rgba(27, 37, 51, 0.72); color: #fff; font-size: 0.75rem; cursor: pointer; opacity: 0; transition: opacity 0.14s ease; }
.ck-teams__d:hover .ck-teams__x, .ck-teams__x:focus-visible { opacity: 1; }
@media (hover: none) { .ck-teams__x { opacity: 1; } }
html[data-ck-theme="studio"] :is(.ck-abgl, .ck-ab__o span, .ck-teams, .ck-teams__d img, .ck-teams__typ, .ck-ab__bilder img) { border-radius: 8px; }
/* Sechs Reiter passen in die Schublade: etwas enger, sonst waagerecht wischbar ohne Leiste */
.ck-tabs { gap: 0; scrollbar-width: none; }
.ck-tabs::-webkit-scrollbar { display: none; }
.ck-tabs button { padding: 10px 10px; font-size: 0.875rem; }
@media (max-width: 420px) { .ck-tabs button { padding: 10px 8px; } }