@font-face {
    font-family: "Host Grotesk";
    src: url("../fonts/host-grotesk.woff2") format("woff2");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

@font-face {
    font-family: "IBM Plex Mono";
    src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2");
    font-style: normal;
    font-weight: 400;
    font-display: swap;
}

:root {
    --paper: #f2f2ef;
    --ink: #23282b;
    --burgundy: #68102a;
    --line: rgba(35, 40, 43, 0.28);
    --line-light: rgba(242, 242, 239, 0.34);
    --sans: "Host Grotesk", Arial, sans-serif;
    --mono: "IBM Plex Mono", monospace;
    --page-pad: clamp(1.25rem, 4vw, 4rem);
    --section-space: clamp(5rem, 10vw, 9.5rem);
    --content: 96rem;
    color-scheme: light;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 4rem;
}

body {
    margin: 0;
    overflow-x: hidden;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 1.0625rem;
    line-height: 1.52;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

[hidden] {
    display: none !important;
}

figure,
h1,
h2,
h3,
h4,
p,
dl,
dd,
ol {
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

button,
input,
select,
textarea,
summary {
    color: inherit;
    font: inherit;
}

button,
summary,
label {
    cursor: pointer;
}

h1,
h2,
h3 {
    font-weight: 720;
    letter-spacing: -0.055em;
    line-height: 0.92;
    text-wrap: balance;
}

p {
    text-wrap: pretty;
}

:focus-visible {
    outline: 2px solid var(--burgundy);
    outline-offset: 4px;
}

[id] {
    scroll-margin-top: 5rem;
}

.skip-link {
    position: fixed;
    z-index: 100;
    top: 0.5rem;
    left: 0.5rem;
    min-height: 2.75rem;
    padding: 0.65rem 1rem;
    transform: translateY(-180%);
    background: var(--paper);
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.skip-link:focus {
    transform: translateY(0);
}

/* Kopfzeile */
.site-header {
    position: sticky;
    z-index: 30;
    top: 0;
    display: flex;
    min-height: 4rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.35rem var(--page-pad);
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.site-header.scrolled {
    border-bottom-color: rgba(35, 40, 43, 0.5);
}

.brand {
    display: flex;
    width: 5.3rem;
    min-height: 2.75rem;
    align-items: center;
}

.brand img {
    width: 100%;
}

.site-region,
.desktop-nav {
    display: none;
}

.mobile-nav {
    position: static;
}

.mobile-nav summary {
    display: flex;
    min-width: 4.5rem;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-end;
    list-style: none;
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.mobile-nav summary::-webkit-details-marker,
.process summary::-webkit-details-marker,
.story-more summary::-webkit-details-marker {
    display: none;
}

.mobile-nav nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: grid;
    padding: 0 var(--page-pad) 1rem;
    border-bottom: 1px solid var(--line);
    background: var(--paper);
}

.mobile-nav nav a {
    display: flex;
    min-height: 3.25rem;
    align-items: center;
    border-top: 1px solid var(--line);
    font-size: 1.125rem;
    font-weight: 520;
}

.mobile-nav nav a[aria-current="page"] {
    color: var(--burgundy);
}

/* Wiederkehrende Elemente */
.eyebrow,
.section-index,
.property-label,
.property-status,
.data-row,
.gallery-photo figcaption,
.commission,
.view-switch,
.property-tile-meta,
.property-index-head,
.property-index-link,
.process-number,
.site-footer {
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 400;
    letter-spacing: 0.015em;
    line-height: 1.45;
}

.section-index,
.property-label,
.property-status {
    color: var(--burgundy);
}

.studio-section,
.valuation,
.contact,
.search-request,
.object-intro,
.object-story,
.object-location,
.floorplans,
.expose-request,
.not-found {
    padding: var(--section-space) var(--page-pad);
}

.studio-section > *,
.valuation > *,
.contact > *,
.search-request > *,
.object-intro > *,
.object-story > *,
.object-location > *,
.floorplans > *,
.expose-request > *,
.not-found > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.studio-heading {
    display: grid;
    gap: 1.5rem;
}

.studio-heading h1,
.studio-heading h2 {
    font-size: clamp(3.1rem, 12vw, 7.5rem);
}

.studio-heading sup {
    position: relative;
    top: -0.55em;
    margin-left: 0.25rem;
    font-family: var(--mono);
    font-size: 0.18em;
    font-weight: 400;
    letter-spacing: 0;
    vertical-align: baseline;
}

.studio-heading p {
    max-width: 38rem;
    font-size: 1.0625rem;
}

.button-link,
button {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.65rem 1.2rem;
    border: 1px solid var(--ink);
    border-radius: 999px;
    background: transparent;
    color: var(--ink);
    font-size: 0.8125rem;
    font-weight: 570;
    line-height: 1.2;
    text-align: center;
}

.button-link:hover,
button:hover {
    background: var(--ink);
    color: var(--paper);
}

.button-link-primary,
button {
    border-color: var(--burgundy);
    background: var(--burgundy);
    color: var(--paper);
}

.button-link-primary:hover,
button:hover {
    border-color: var(--ink);
}

.text-link {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    border-bottom: 1px solid currentColor;
    font-size: 0.875rem;
    font-weight: 570;
}

.text-link:hover {
    color: var(--burgundy);
}

/* Einstieg */
.hero {
    display: grid;
    gap: 3rem;
    padding: clamp(4rem, 12vw, 8rem) var(--page-pad) clamp(4.5rem, 13vw, 9rem);
    border-bottom: 1px solid var(--line);
}

.hero > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.hero .eyebrow {
    margin-bottom: 2rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.hero h1 {
    max-width: 12ch;
    font-size: clamp(3.25rem, 14vw, 10.5rem);
}

.hero-aside {
    display: grid;
    gap: 2rem;
    align-content: end;
}

.hero-intro {
    max-width: 38rem;
    font-size: 1.0625rem;
}

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
}

/* Objektindex */
.properties {
    border-bottom: 1px solid var(--line);
}

.properties-heading {
    margin-bottom: 2.75rem;
}

.property-browser {
    position: relative;
}

.property-view-input {
    position: absolute;
    width: 1px;
    height: 1px;
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
}

.view-switch {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: flex-end;
    gap: 0.25rem;
    margin-bottom: 1rem;
    border-top: 1px solid var(--line);
}

.view-label {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    padding: 0 0.4rem;
    color: rgba(35, 40, 43, 0.46);
}

.property-view-grid:checked ~ .view-switch .view-label-grid,
.property-view-list:checked ~ .view-switch .view-label-list {
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.35em;
}

.property-view-grid:focus-visible ~ .view-switch .view-label-grid,
.property-view-list:focus-visible ~ .view-switch .view-label-list {
    outline: 2px solid var(--burgundy);
    outline-offset: 1px;
}

.property-index-view {
    display: none;
}

.property-view-list:checked ~ .property-views .property-grid-view {
    display: none;
}

.property-view-list:checked ~ .property-views .property-index-view {
    display: block;
}

.property-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2rem 1px;
}

.property-tile {
    min-width: 0;
}

.property-tile > a {
    display: block;
    min-height: 2.75rem;
}

.property-tile-image {
    overflow: hidden;
    background: var(--ink);
}

.property-tile-image-empty {
    aspect-ratio: 1;
    background: rgba(35, 40, 43, 0.08);
}

.property-tile-image img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    transition: transform 350ms ease;
}

.property-tile > a:hover .property-tile-image img {
    transform: scale(1.015);
}

.property-tile-meta {
    display: grid;
    gap: 0.2rem;
    padding: 0.65rem 0.45rem 0 0;
    font-size: clamp(0.57rem, 2.35vw, 0.6875rem);
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.property-status {
    display: block;
    margin-top: 0.5rem;
    text-transform: uppercase;
}

.all-properties-link {
    display: flex;
    justify-content: flex-end;
    margin-top: 3rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
}

.empty-state {
    max-width: 46rem;
    padding: clamp(2.5rem, 7vw, 5rem) 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    font-size: clamp(1.2rem, 4.8vw, 1.65rem);
    line-height: 1.4;
}

.property-index-head,
.property-index-link {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) minmax(6.5rem, auto);
    column-gap: 0.75rem;
}

.property-index-head {
    display: none;
}

.property-index-list {
    padding: 0;
    border-top: 1px solid var(--line);
    list-style: none;
}

.property-index-list li {
    border-bottom: 1px solid var(--line);
}

.property-index-link {
    min-height: 7.25rem;
    align-items: start;
    padding: 1rem 0;
    font-variant-numeric: tabular-nums;
}

.property-index-link:hover {
    color: var(--burgundy);
}

.index-number {
    grid-row: 1 / 5;
    color: var(--burgundy);
}

.index-location {
    grid-column: 2;
    grid-row: 1;
    font-family: var(--sans);
    font-size: 1.125rem;
    font-weight: 650;
}

.index-type {
    grid-column: 2;
    grid-row: 2;
}

.index-area {
    grid-column: 2;
    grid-row: 3;
}

.index-rooms {
    grid-column: 2;
    grid-row: 4;
}

.index-price {
    grid-column: 3;
    grid-row: 1 / 5;
    text-align: right;
}

.property-index-link small {
    display: inline;
    margin-right: 0.4rem;
    color: rgba(35, 40, 43, 0.58);
    font: inherit;
}

.index-price small {
    display: block;
    margin: 0 0 0.25rem;
}

/* Haltung */
.stance {
    display: grid;
    gap: 2.5rem;
    padding: clamp(5.5rem, 13vw, 10rem) var(--page-pad);
    background: var(--burgundy);
    color: var(--paper);
}

.stance-copy {
    display: grid;
    gap: 2rem;
    width: 100%;
    max-width: var(--content);
    margin: 0 auto;
}

.stance h2 {
    max-width: 13ch;
    font-size: clamp(3.35rem, 14vw, 9.5rem);
}

.stance p {
    max-width: 32rem;
    font-size: 1.0625rem;
}

.stance :focus-visible,
.process :focus-visible,
.expose-request :focus-visible {
    outline-color: var(--paper);
}

/* Team */
.team {
    border-bottom: 1px solid var(--line);
}

.team-heading {
    margin-bottom: 3rem;
}

.team-heading p {
    align-self: end;
}

.team-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 2.5rem 1px;
}

.team-card {
    min-width: 0;
}

.team-group {
    grid-column: 1 / -1;
}

.team-card img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

.team-group img {
    aspect-ratio: 3 / 2;
    object-position: 50% 45%;
}

.team-card figcaption {
    display: grid;
    gap: 0.35rem;
    padding: 0.75rem 0.4rem 0 0;
}

.team-card figcaption strong {
    font-size: 1rem;
    font-weight: 650;
    line-height: 1.2;
}

.team-card figcaption span {
    font-family: var(--mono);
    font-size: 0.625rem;
    line-height: 1.5;
    overflow-wrap: anywhere;
}

/* Arbeitsweise */
.process {
    display: grid;
    gap: 4rem;
    padding: var(--section-space) var(--page-pad);
    background: var(--ink);
    color: var(--paper);
}

.process > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.process-heading h2 {
    max-width: 8ch;
    font-size: clamp(3.3rem, 13vw, 8rem);
}

.process-list {
    border-top: 1px solid var(--line-light);
}

.process details {
    border-bottom: 1px solid var(--line-light);
}

.process summary {
    display: grid;
    grid-template-columns: 2.25rem minmax(0, 1fr) 2.75rem;
    gap: 0.75rem;
    min-height: 4.75rem;
    align-items: center;
    list-style: none;
}

.process-number {
    color: rgba(242, 242, 239, 0.64);
}

.process-title {
    font-size: clamp(1.35rem, 5.7vw, 2.35rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.05;
    text-wrap: balance;
}

.process-toggle {
    position: relative;
    display: block;
    width: 2.75rem;
    height: 2.75rem;
}

.process-toggle::before,
.process-toggle::after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1rem;
    height: 1px;
    transform: translate(-50%, -50%);
    background: var(--paper);
    content: "";
}

.process-toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.process details[open] .process-toggle::after {
    display: none;
}

.process-panel {
    display: grid;
    gap: 1.75rem;
    padding: 0 0 2.25rem 3rem;
}

.process-panel > p {
    max-width: 38rem;
    font-size: 1.0625rem;
}

.process-proof {
    max-width: 31rem;
}

.process-proof img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
}

.process-plan {
    padding: 1rem;
    background: var(--paper);
}

.process-plan img {
    max-height: 34rem;
    aspect-ratio: auto;
    object-fit: contain;
}

/* Formulare */
.valuation {
    display: grid;
    gap: 4rem;
    border-bottom: 1px solid var(--line);
}

.valuation-copy h2,
.search-request-copy h2,
.expose-copy h2 {
    max-width: 11ch;
    margin-top: 1.5rem;
    font-size: clamp(3.15rem, 12vw, 7.5rem);
}

.valuation-copy > p:last-child,
.search-request-copy > p:last-child,
.expose-copy > p {
    max-width: 38rem;
    margin-top: 2rem;
    font-size: 1.0625rem;
}

.valuation-form {
    display: grid;
    gap: 3.5rem;
}

.form-step {
    display: grid;
    gap: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
}

.form-step[hidden] {
    display: none;
}

.form-step-heading {
    display: grid;
    grid-template-columns: 1.5rem minmax(0, 1fr);
    gap: 0.75rem;
}

.form-step-heading > span {
    padding-top: 0.35rem;
    color: var(--burgundy);
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.form-step-heading h3 {
    font-size: clamp(1.9rem, 7vw, 3rem);
    line-height: 1;
}

.form-grid,
.standard-form {
    display: grid;
    gap: 1.75rem 1rem;
}

.honeypot {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.form-feedback {
    padding: 1rem;
    border: 1px solid currentColor;
    color: var(--burgundy);
    font-size: 1rem;
}

.overview-feedback {
    margin-top: 1.5rem;
}

.expose-request .form-feedback {
    color: var(--paper);
}

.field {
    display: grid;
    gap: 0.4rem;
}

.field label,
.choice-field legend {
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.field input,
.field select,
.field textarea {
    width: 100%;
    min-height: 3.25rem;
    padding: 0.5rem 0;
    border: 0;
    border-bottom: 1px solid var(--ink);
    border-radius: 0;
    outline: 0;
    background: transparent;
    font-size: 1.0625rem;
}

.field textarea {
    min-height: 8rem;
    resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-bottom-color: var(--burgundy);
    box-shadow: none;
}

.field-hint {
    display: block;
    margin-top: 0.2rem;
    color: rgba(35, 40, 43, 0.62);
}

.choice-field {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.choice-field legend {
    margin-bottom: 0.65rem;
    padding: 0;
}

.choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
    background: var(--line);
}

.choice-tile {
    position: relative;
    display: grid;
    background: var(--paper);
}

.choice-tile input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.choice-tile span {
    display: flex;
    min-height: 2.75rem;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.5rem;
    font-size: 0.875rem;
    line-height: 1.25;
    text-align: center;
    overflow-wrap: anywhere;
}

.choice-tile input:checked + span {
    background: var(--burgundy);
    color: var(--paper);
}

.choice-tile input:focus-visible + span {
    outline: 2px solid var(--burgundy);
    outline-offset: -3px;
}

.optional-heading {
    margin-top: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    font-family: var(--mono);
    font-size: 0.6875rem;
    font-weight: 400;
    text-transform: uppercase;
}

.consent {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.75rem;
    min-height: 2.75rem;
    align-items: start;
}

.consent input {
    width: 1.15rem;
    height: 1.15rem;
    margin: 0.25rem 0 0;
    accent-color: var(--burgundy);
}

.consent label {
    font-size: 1rem;
    line-height: 1.5;
}

.consent a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.form-action {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.form-action-row {
    flex-direction: row;
    flex-wrap: wrap;
}

.form-note {
    max-width: 40rem;
    font-size: 1.0625rem;
}

.js-control {
    display: none;
}

.valuation-form.is-enhanced .js-control {
    display: flex;
}

.button-secondary {
    border-color: var(--ink);
    background: transparent;
    color: var(--ink);
}

.standard-form > button {
    justify-self: start;
}

/* Kontakt und Fuß */
.contact {
    display: grid;
    gap: 3rem;
}

.contact h2 {
    font-size: clamp(4rem, 18vw, 11rem);
}

.contact-links {
    display: grid;
    margin-top: 3rem;
    border-top: 1px solid var(--line);
}

.contact-links a {
    display: flex;
    min-height: 4rem;
    align-items: center;
    border-bottom: 1px solid var(--line);
    font-size: clamp(1rem, 4.5vw, 1.5rem);
    overflow-wrap: anywhere;
}

.contact-links a:hover {
    color: var(--burgundy);
}

.site-footer {
    padding: 1.5rem var(--page-pad);
    border-top: 1px solid var(--line);
    font-size: 0.625rem;
}

.site-footer p {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--content);
    margin: 0 auto;
}

.site-footer p > span {
    white-space: nowrap;
}

.site-footer a {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.footer-cookie-button {
    min-height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.footer-cookie-button:hover {
    border: 0;
    background: transparent;
    color: var(--burgundy);
}

/* Cookie-Einwilligung */
.cookie-banner {
    position: fixed;
    z-index: 80;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1rem;
    background: rgba(35, 40, 43, 0.58);
}

.cookie-dialog {
    width: min(100%, 60rem);
    max-height: calc(100svh - 2rem);
    padding: clamp(1.25rem, 4vw, 2.5rem);
    overflow-y: auto;
    border: 1px solid var(--ink);
    background: var(--paper);
}

.cookie-dialog h2 {
    max-width: 14ch;
    margin-top: 0.85rem;
    font-size: clamp(2rem, 8vw, 3.8rem);
}

.cookie-dialog > p:not(.eyebrow) {
    max-width: 48rem;
    margin-top: 1.25rem;
}

.cookie-options {
    display: grid;
    gap: 1px;
    margin-top: 1.5rem;
    background: var(--line);
}

.cookie-option {
    display: grid;
    grid-template-columns: 1.25rem minmax(0, 1fr);
    gap: 0.8rem;
    min-height: 4.5rem;
    align-items: start;
    padding: 0.9rem;
    background: var(--paper);
}

.cookie-option input,
.cookie-option-mark {
    width: 1.15rem;
    height: 1.15rem;
    margin-top: 0.2rem;
    border: 1px solid var(--ink);
    accent-color: var(--burgundy);
}

.cookie-option-mark {
    background: var(--ink);
}

.cookie-option p,
.cookie-option > span:last-child {
    display: grid;
    gap: 0.25rem;
}

.cookie-option strong {
    font-size: 1rem;
}

.cookie-option strong + span {
    font-size: 0.9375rem;
}

.cookie-note {
    font-size: 0.9375rem;
}

.cookie-note a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cookie-actions {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    margin-top: 1.5rem;
}

.cookie-actions .button-text {
    border-color: transparent;
    background: transparent;
    color: var(--ink);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.cookie-actions .button-text:hover {
    border-color: var(--ink);
    background: transparent;
    color: var(--ink);
}

/* Objektübersicht */
.objects-intro {
    padding: clamp(4rem, 11vw, 8rem) var(--page-pad) 2.5rem;
    border-bottom: 1px solid var(--line);
}

.objects-intro > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.objects-list {
    padding-top: 1rem;
    border-bottom: 1px solid var(--line);
}

.search-request {
    display: grid;
    gap: 4rem;
}

/* Objektdetail */
.object-intro {
    display: grid;
    gap: 1.25rem;
    border-bottom: 1px solid var(--line);
}

.object-intro h1 {
    max-width: 14ch;
    font-size: clamp(3.35rem, 13vw, 9rem);
}

.object-subtitle {
    max-width: 52rem;
    font-size: clamp(1.2rem, 4.5vw, 1.65rem);
    line-height: 1.35;
}

.address-note {
    max-width: 42rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}

.data-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 1rem;
    border-top: 1px solid var(--line);
    font-variant-numeric: tabular-nums;
}

.data-row > div {
    padding: 0.75rem 0.4rem 0.75rem 0;
    border-bottom: 1px solid var(--line);
}

.data-row dt {
    margin-bottom: 0.2rem;
    color: rgba(35, 40, 43, 0.58);
    font-size: 0.625rem;
    text-transform: uppercase;
}

.data-row dd {
    overflow-wrap: anywhere;
}

.object-intro .button-link {
    justify-self: start;
    margin-top: 1rem;
}

.object-gallery {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem 1px;
    padding: 1px 0 var(--section-space);
}

.gallery-photo {
    min-width: 0;
}

.gallery-photo-lead {
    grid-column: 1 / -1;
}

.gallery-photo img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
}

.gallery-photo-lead img {
    aspect-ratio: 4 / 3;
}

.gallery-photo figcaption {
    padding: 0.45rem 0.35rem 0;
    font-size: 0.6rem;
    overflow-wrap: anywhere;
}

.object-story,
.object-location {
    display: grid;
    gap: 3rem;
    border-top: 1px solid var(--line);
}

.object-location {
    border-bottom: 1px solid var(--line);
}

.object-section-title {
    display: grid;
    gap: 1rem;
}

.object-section-title h2 {
    font-size: clamp(3rem, 11vw, 6.5rem);
}

.rich-text {
    max-width: 46rem;
    font-size: 1.0625rem;
    line-height: 1.62;
}

.rich-text p + p {
    margin-top: 1.5em;
}

.story-more {
    margin-top: 1.5rem;
}

.story-more summary {
    display: inline-flex;
    min-height: 2.75rem;
    align-items: center;
    border-bottom: 1px solid currentColor;
    color: var(--burgundy);
    font-size: 0.8125rem;
    font-weight: 570;
    list-style: none;
}

.story-more[open] summary {
    margin-bottom: 1.5rem;
}

.floorplans {
    border-bottom: 1px solid var(--line);
}

.floorplan-figure {
    margin-top: 3rem;
    padding: 1rem;
    border: 1px solid var(--line);
}

.floorplan-grid {
    display: grid;
    gap: 2rem;
}

.floorplan-grid .floorplan-figure {
    margin-top: 0;
}

.floorplan-figure figcaption {
    margin-top: 0.75rem;
    font-family: var(--mono);
    font-size: 0.6875rem;
}

.floorplan-figure img {
    width: 100%;
    max-height: 58rem;
    object-fit: contain;
}

.expose-request {
    display: grid;
    gap: 4rem;
    background: var(--burgundy);
    color: var(--paper);
}

.commission {
    max-width: 38rem;
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line-light);
}

.commission dd {
    margin-top: 0.25rem;
}

.expose-request .field input,
.expose-request .field textarea {
    border-bottom-color: var(--paper);
    color: var(--paper);
}

.expose-request .field input:focus,
.expose-request .field textarea:focus {
    border-bottom-color: var(--paper);
}

.expose-request .consent input {
    accent-color: var(--paper);
}

.expose-request button {
    border-color: var(--paper);
    background: var(--paper);
    color: var(--burgundy);
}

.expose-request button:hover {
    border-color: var(--paper);
    background: transparent;
    color: var(--paper);
}

.object-back {
    display: flex;
    justify-content: flex-end;
    padding: 2rem var(--page-pad) 4rem;
}

.not-found {
    min-height: calc(100svh - 4rem);
}

.not-found h1 {
    max-width: 12ch;
    margin-top: 2rem;
    font-size: clamp(3.5rem, 14vw, 8rem);
}

.not-found > p:not(.section-index) {
    margin-top: 2rem;
}

.not-found .text-link {
    margin-top: 1.5rem;
}

.error-links {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem 2rem;
    margin-top: 1.5rem;
}

/* Danke- und Rechtsseiten */
.thanks {
    min-height: calc(100svh - 4rem);
    padding: var(--section-space) var(--page-pad);
}

.thanks > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.thanks h1 {
    max-width: 12ch;
    margin-top: 1.5rem;
    font-size: clamp(3.4rem, 14vw, 8rem);
}

.thanks > p:not(.section-index) {
    max-width: 42rem;
    margin-top: 2rem;
    font-size: 1.125rem;
}

.thanks .button-link {
    margin-top: 2rem;
}

.legal-page {
    padding: var(--section-space) var(--page-pad);
}

.legal-page > * {
    width: 100%;
    max-width: var(--content);
    margin-right: auto;
    margin-left: auto;
}

.legal-intro {
    padding-bottom: clamp(3rem, 8vw, 6rem);
    border-bottom: 1px solid var(--line);
}

.legal-intro h1 {
    max-width: 13ch;
    margin-top: 1.5rem;
    font-size: clamp(3.2rem, 12vw, 7.5rem);
}

.legal-intro > p:last-child:not(.section-index) {
    margin-top: 1.5rem;
    font-family: var(--mono);
    font-size: 0.75rem;
}

.legal-content {
    max-width: 74rem;
}

.legal-content section {
    display: grid;
    gap: 1.25rem;
    padding: clamp(2.25rem, 6vw, 4rem) 0;
    border-bottom: 1px solid var(--line);
}

.legal-content h2 {
    max-width: 26ch;
    font-size: clamp(1.55rem, 5.5vw, 2.5rem);
    line-height: 1.05;
}

.legal-content p,
.legal-content ul {
    max-width: 70ch;
    margin: 0;
    font-size: 1.0625rem;
    line-height: 1.65;
}

.legal-content p + p {
    margin-top: 0.25rem;
}

.legal-content ul {
    padding-left: 1.25rem;
}

.legal-content li + li {
    margin-top: 0.85rem;
}

.legal-content a {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

@media (min-width: 44rem) {
    .form-grid,
    .standard-form {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .choice-grid-three {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .field-wide {
        grid-column: 1 / -1;
    }

    .data-row {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .cookie-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cookie-actions {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: center;
    }
}

@media (min-width: 56.25rem) {
    html {
        scroll-padding-top: 4.5rem;
    }

    .site-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        min-height: 4.5rem;
    }

    .brand {
        width: 5.75rem;
    }

    .site-region {
        display: block;
        font-family: var(--mono);
        font-size: 0.625rem;
        text-align: center;
    }

    .desktop-nav {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: clamp(1rem, 2vw, 2.25rem);
    }

    .desktop-nav a {
        display: flex;
        min-height: 2.75rem;
        align-items: center;
        font-family: var(--mono);
        font-size: 0.625rem;
    }

    .desktop-nav a:hover,
    .desktop-nav a[aria-current="page"] {
        text-decoration: underline;
        text-underline-offset: 0.35em;
    }

    .mobile-nav {
        display: none;
    }

    .hero {
        grid-template-columns: minmax(0, 2.25fr) minmax(20rem, 0.75fr);
        gap: clamp(3rem, 7vw, 8rem);
        min-height: calc(100svh - 4.5rem);
        align-items: end;
    }

    .hero > * {
        max-width: none;
        margin: 0;
    }

    .hero h1 {
        font-size: clamp(6.8rem, 10vw, 10.5rem);
    }

    .hero-aside {
        padding-bottom: 0.4rem;
    }

    .hero-actions {
        align-items: flex-start;
    }

    .studio-heading {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 2rem;
    }

    .studio-heading > * {
        grid-column: 1 / 10;
    }

    .properties-heading > div {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.75fr);
        gap: 3rem;
        grid-column: 1 / -1;
        align-items: end;
    }

    .properties-heading p {
        padding-bottom: 0.65rem;
    }

    .property-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2.75rem 1px;
    }

    .property-tile-meta {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 0.75rem;
        font-size: 0.625rem;
    }

    .property-index-head,
    .property-index-link {
        grid-template-columns: 3rem minmax(8rem, 1.25fr) minmax(8rem, 1fr) minmax(7rem, 0.75fr) minmax(5rem, 0.45fr) minmax(8rem, 0.75fr);
        gap: 1.25rem;
    }

    .property-index-head {
        display: grid;
        min-height: 2.75rem;
        align-items: center;
        border-top: 1px solid var(--line);
        color: rgba(35, 40, 43, 0.58);
    }

    .property-index-list {
        border-top: 0;
    }

    .property-index-link {
        min-height: 4.5rem;
        align-items: center;
        padding: 0;
    }

    .index-number,
    .index-location,
    .index-type,
    .index-area,
    .index-rooms,
    .index-price {
        grid-column: auto;
        grid-row: auto;
    }

    .index-location {
        font-family: var(--mono);
        font-size: 0.6875rem;
        font-weight: 400;
    }

    .index-price {
        text-align: left;
    }

    .property-index-link small {
        display: none;
    }

    .stance-copy {
        grid-template-columns: minmax(0, 2.2fr) minmax(18rem, 0.8fr);
        gap: clamp(4rem, 10vw, 11rem);
        align-items: end;
    }

    .stance p {
        padding-bottom: 0.8rem;
    }

    .team-heading {
        align-items: end;
    }

    .team-heading h2 {
        grid-column: 1 / 8;
    }

    .team-heading p {
        grid-column: 9 / 13;
    }

    .team-grid {
        grid-template-columns: repeat(5, minmax(0, 1fr));
        gap: 1px;
    }

    .team-group {
        grid-column: span 2;
    }

    .team-card img,
    .team-group img {
        height: clamp(21rem, 29vw, 30rem);
        aspect-ratio: auto;
    }

    .team-card figcaption {
        min-height: 6.5rem;
        padding: 1rem 0.75rem 0 0;
    }

    .process {
        grid-template-columns: minmax(18rem, 0.75fr) minmax(32rem, 1.25fr);
        gap: clamp(5rem, 10vw, 12rem);
    }

    .process > * {
        max-width: none;
        margin: 0;
    }

    .process summary {
        grid-template-columns: 3rem minmax(0, 1fr) 2.75rem;
        min-height: 5.75rem;
    }

    .process-panel {
        padding-left: 4.5rem;
    }

    .process-panel-with-image {
        grid-template-columns: minmax(0, 0.85fr) minmax(17rem, 1.15fr);
        gap: 3rem;
        align-items: start;
    }

    .valuation,
    .search-request,
    .expose-request {
        grid-template-columns: minmax(0, 0.85fr) minmax(30rem, 1.15fr);
        gap: clamp(5rem, 9vw, 11rem);
    }

    .valuation > *,
    .search-request > *,
    .expose-request > * {
        max-width: none;
        margin: 0;
    }

    .contact {
        grid-template-columns: 8rem minmax(0, 1fr);
        gap: 2rem;
    }

    .contact > * {
        max-width: none;
        margin: 0;
    }

    .contact-copy {
        grid-column: 2;
    }

    .contact-links {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem;
    }

    .objects-intro > div {
        display: grid;
        grid-template-columns: minmax(0, 2fr) minmax(16rem, 0.75fr);
        gap: 3rem;
        grid-column: 1 / -1;
        align-items: end;
    }

    .objects-intro p {
        padding-bottom: 0.75rem;
    }

    .object-intro {
        grid-template-columns: 8rem minmax(0, 1fr) minmax(18rem, 0.42fr);
        column-gap: 2rem;
    }

    .object-intro > * {
        max-width: none;
        margin-right: 0;
        margin-left: 0;
    }

    .object-intro .property-label {
        grid-column: 1;
        grid-row: 1 / 7;
        padding-top: 0.65rem;
    }

    .object-intro .property-status,
    .object-intro h1,
    .object-subtitle,
    .object-intro .address-note,
    .object-intro .button-link {
        grid-column: 2;
    }

    .object-intro h1 {
        font-size: clamp(5.5rem, 7vw, 9rem);
    }

    .object-data {
        grid-column: 3;
        grid-row: 1 / 7;
        grid-template-columns: 1fr;
        align-self: end;
        margin-top: 0;
    }

    .object-gallery {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 2rem 1px;
    }

    .gallery-photo-lead {
        grid-column: span 2;
        grid-row: span 2;
    }

    .gallery-photo-lead img {
        aspect-ratio: 1;
    }

    .object-story,
    .object-location {
        grid-template-columns: minmax(18rem, 0.75fr) minmax(30rem, 1.25fr);
        gap: clamp(5rem, 9vw, 11rem);
    }

    .object-section-title {
        grid-template-columns: 3rem minmax(0, 1fr);
    }

    .object-section-title .section-index {
        padding-top: 0.65rem;
    }

    .floorplans {
        display: grid;
        grid-template-columns: 18rem minmax(0, 1fr);
        gap: 5rem;
    }

    .floorplans > * {
        max-width: none;
        margin: 0;
    }

    .floorplans .object-section-title {
        display: block;
    }

    .floorplans .object-section-title h2 {
        margin-top: 1.5rem;
    }

    .floorplan-figure {
        margin-top: 0;
        padding: 2rem;
    }

    .legal-content section {
        grid-template-columns: minmax(15rem, 0.65fr) minmax(25rem, 1.35fr);
        column-gap: clamp(3rem, 8vw, 8rem);
    }

    .legal-content section > :not(h2) {
        grid-column: 2;
    }
}

@media (min-width: 80rem) {
    .site-header,
    .site-footer,
    .hero,
    .studio-section,
    .stance,
    .team,
    .process,
    .valuation,
    .contact,
    .objects-intro,
    .search-request,
    .object-intro,
    .object-story,
    .object-location,
    .floorplans,
    .expose-request,
    .not-found {
        padding-right: max(var(--page-pad), calc((100vw - 104rem) / 2));
        padding-left: max(var(--page-pad), calc((100vw - 104rem) / 2));
    }
}

@media (max-width: 23rem) {
    :root {
        --page-pad: 1rem;
    }

    .property-tile-meta {
        font-size: 0.55rem;
    }

    .object-intro h1,
    .object-subtitle,
    .contact-links a {
        overflow-wrap: anywhere;
    }
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* Fuß: keine Trennpunkte, sonst landen sie beim Umbruch am Zeilenanfang. Abstand trennt (Claude, 12.10.2026) */
.site-footer .footer-line {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5em;
    row-gap: 0;
    align-items: center;
}

.site-footer .footer-line + .footer-line {
    margin-top: 0.4em;
}

/* 10 px waren für ältere Leser zu klein */
.site-footer {
    font-size: 0.8125rem;
}



/* Auswahlkacheln auf dem Bordeaux-Band (Anrede bei der Exposé-Anfrage): helle Linien, transparente Kacheln,
   gewählt = Papier mit Bordeaux-Schrift. Ohne das stand helle Schrift auf hellem Grund (Claude, 12.10.2026) */
.expose-request .choice-grid {
    background: var(--line-light);
    border: 1px solid var(--line-light);
}

.expose-request .choice-tile {
    background: var(--burgundy);
}

.expose-request .choice-tile span {
    color: var(--paper);
}

.expose-request .choice-tile input:checked + span {
    background: var(--paper);
    color: var(--burgundy);
}

.expose-request .choice-tile input:focus-visible + span {
    outline-color: var(--paper);
}