/* RAUM.SIEBEN — Seiten-Stil. Tokens: brand/tokens.css (hier gespiegelt, gleiche Werte). */
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-var.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Montserrat"; src: url("fonts/Montserrat-italic-var.woff2") format("woff2"); font-weight: 300 500; font-style: italic; font-display: swap; }

:root {
  --r7-kalk: #F4F1EA; --r7-papier: #FBFAF6; --r7-sand: #E7E1D4; --r7-linie: #D6CFC0;
  --r7-graphit: #1E1F1C; --r7-graphit-2: #2B2C28; --r7-stein: #5F5D55; --r7-nebel: #B9B4A8;
  --r7-rhein: #2E5566; --r7-rhein-tief: #22414E; --r7-rhein-hell: #9EBCC8;
  --r7-font: "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --r7-max: 1200px; --r7-gutter: clamp(16px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--r7-kalk); color: var(--r7-graphit); font-family: var(--r7-font); font-size: 1.0625rem; line-height: 1.65; font-weight: 400; overflow-x: hidden; }
img { max-width: 100%; display: block; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--r7-rhein); outline-offset: 3px; }

.wrap { max-width: var(--r7-max); margin: 0 auto; padding: 0 var(--r7-gutter); }
.label { font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--r7-stein); margin: 0 0 16px; }
h1, h2, h3 { margin: 0; font-weight: 300; letter-spacing: -.02em; line-height: 1.08; }
h1 { font-size: clamp(2.5rem, 6.2vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.12; }
h3 { font-size: 1.25rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.3; }
h1 em, h2 em { font-style: normal; font-weight: 600; }
p { margin: 0 0 1em; }
.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); line-height: 1.6; color: var(--r7-graphit-2); max-width: 36em; }
.soft { color: var(--r7-stein); }

/* Knöpfe — eckig wie das Zeichen */
.btn { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 24px; border: 2px solid var(--r7-rhein); background: var(--r7-rhein); color: #fff; font: 600 .95rem/1 var(--r7-font); letter-spacing: .02em; text-decoration: none; transition: background .2s, border-color .2s; }
.btn:hover { background: var(--r7-rhein-tief); border-color: var(--r7-rhein-tief); }
.btn.ghost { background: transparent; color: var(--r7-graphit); border-color: var(--r7-graphit); }
.btn.ghost:hover { background: var(--r7-graphit); color: var(--r7-kalk); }
.btn .pfeil { width: 18px; height: 2px; background: currentColor; position: relative; }
.btn .pfeil::after { content: ""; position: absolute; right: 0; top: -4px; width: 8px; height: 8px; border-top: 2px solid currentColor; border-right: 2px solid currentColor; transform: rotate(45deg); transform-origin: center; }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }

/* Kopf */
.kopf { position: sticky; top: 0; z-index: 20; background: rgba(244,241,234,.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid transparent; transition: border-color .2s; }
.kopf.fest { border-bottom-color: var(--r7-linie); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.kopf .marke img { height: 40px; width: auto; }
.kopf nav { display: flex; gap: 28px; align-items: center; }
.kopf nav a { font-size: .875rem; font-weight: 500; text-decoration: none; color: var(--r7-graphit-2); }
.kopf nav a:hover { color: var(--r7-rhein); }
.kopf .tel { font-weight: 600; color: var(--r7-rhein); white-space: nowrap; }
@media (max-width: 900px) { .kopf nav a:not(.tel) { display: none; } .kopf .marke img { height: 34px; } .kopf .wrap { height: 64px; } }

/* Hero */
.hero { padding: clamp(48px, 9vw, 120px) 0 clamp(56px, 8vw, 112px); }
.hero .wrap { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.hero h1 { margin-bottom: 28px; }
.hero .lead { margin-bottom: 36px; }
.hero .bild { position: relative; margin: 0 16px 0 0; }
.hero .bild .rahmen { position: relative; isolation: isolate; }
.hero .bild .rahmen::before { content: ""; position: absolute; inset: 16px -16px -16px 16px; border: 2px solid var(--r7-graphit); z-index: -1; }
.hero .bild img { aspect-ratio: 4 / 5; object-fit: cover; width: 100%; }
.hero .bild figcaption { margin-top: 32px; font-size: .875rem; color: var(--r7-stein); }
@media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } .hero .bild { margin-right: 16px; } .hero .bild img { aspect-ratio: 4 / 3; } }

/* Abschnitte */
section { scroll-margin-top: 80px; }
.abschnitt { padding: clamp(72px, 10vw, 136px) 0; }
.abschnitt.sand { background: var(--r7-sand); }
.abschnitt.dunkel { background: var(--r7-graphit); color: var(--r7-kalk); }
.abschnitt.dunkel .label { color: var(--r7-nebel); }
.abschnitt.dunkel .lead { color: #E3DFD5; }
.kopfzeile { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 80px); align-items: end; margin-bottom: clamp(40px, 6vw, 72px); }
.kopfzeile .lead { margin: 0; }
@media (max-width: 860px) { .kopfzeile { grid-template-columns: 1fr; } }

/* Leistungen */
.drei { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 2px solid var(--r7-graphit); }
.drei article { padding: 32px 32px 8px 0; }
.drei article + article { padding-left: 32px; border-left: 1px solid var(--r7-linie); }
.drei .nr { font-size: .75rem; font-weight: 600; letter-spacing: .18em; color: var(--r7-rhein); margin-bottom: 20px; display: block; }
.drei h3 { margin-bottom: 14px; }
.drei p { color: var(--r7-graphit-2); font-size: 1rem; }
@media (max-width: 860px) { .drei { grid-template-columns: 1fr; } .drei article, .drei article + article { padding: 28px 0 8px; border-left: 0; } .drei article + article { border-top: 1px solid var(--r7-linie); } }

/* Sieben Räume — Grundriss als Ablauf */
.grundriss { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 2px solid var(--r7-graphit); background: var(--r7-papier); }
.raum { position: relative; padding: 28px 20px 32px; min-height: 280px; display: flex; flex-direction: column; }
.raum + .raum { border-left: 2px solid var(--r7-graphit); }
/* Türöffnung: eine Lücke in der Wand zwischen zwei Räumen */
.raum + .raum::before { content: ""; position: absolute; left: -2px; top: 40px; width: 2px; height: 40px; background: var(--r7-papier); }
.raum .nr { font-size: 2.6rem; font-weight: 300; line-height: 1; color: var(--r7-graphit); margin-bottom: auto; padding-bottom: 32px; }
.raum h3 { font-size: 1rem; margin-bottom: 8px; }
.raum p { font-size: .875rem; line-height: 1.55; color: var(--r7-stein); margin: 0; }
.raum.sieben { background: var(--r7-rhein); color: #fff; }
.raum.sieben .nr, .raum.sieben p { color: #fff; }
.raum.sieben p { opacity: .86; }
.grundriss-note { margin-top: 20px; font-size: .875rem; color: var(--r7-stein); }
@media (max-width: 1060px) {
  .grundriss { grid-template-columns: 1fr; }
  .raum { min-height: 0; flex-direction: row; gap: 20px; align-items: baseline; padding: 24px 20px; }
  .raum .nr { font-size: 1.8rem; margin: 0; padding: 0; min-width: 44px; }
  .raum + .raum { border-left: 0; border-top: 2px solid var(--r7-graphit); }
  .raum + .raum::before { left: auto; right: 32px; top: -2px; width: 40px; height: 2px; }
}

/* 360° */
.rundgang .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: center; }
.rundgang .bild { position: relative; }
.rundgang .bild img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.rundgang .marke360 { position: absolute; left: 20px; bottom: 20px; background: var(--r7-graphit); color: var(--r7-kalk); font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; padding: 8px 12px; }
.rundgang h2 { margin-bottom: 24px; }
.rundgang .lead { margin-bottom: 32px; }
.btn.hell { background: var(--r7-kalk); color: var(--r7-graphit); border-color: var(--r7-kalk); }
.btn.hell:hover { background: #fff; border-color: #fff; }
@media (max-width: 860px) { .rundgang .wrap { grid-template-columns: 1fr; } }

/* Referenz */
.referenz { display: grid; grid-template-columns: 1.4fr 1fr; gap: 0; border: 2px solid var(--r7-graphit); background: var(--r7-papier); }
.referenz .bild img { width: 100%; height: 100%; object-fit: cover; min-height: 360px; }
.referenz .text { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; }
.referenz h3 { font-size: 1.6rem; font-weight: 300; letter-spacing: -.01em; margin-bottom: 14px; }
.fakten { list-style: none; margin: 24px 0 32px; padding: 0; border-top: 1px solid var(--r7-linie); }
.fakten li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--r7-linie); font-size: .9375rem; }
.fakten li span:first-child { color: var(--r7-stein); }
.fakten li span:last-child { font-weight: 600; text-align: right; }
.referenz .knoepfe { margin-top: auto; }
@media (max-width: 860px) { .referenz { grid-template-columns: 1fr; } .referenz .bild img { min-height: 0; aspect-ratio: 16 / 10; } }

/* Team */
.team { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 4vw, 48px); }
.person { display: grid; grid-template-columns: 140px 1fr; gap: 28px; align-items: start; padding-top: 28px; border-top: 2px solid var(--r7-graphit); }
.person img { width: 140px; height: 140px; object-fit: cover; filter: grayscale(1); }
.person .name { font-size: 1.25rem; font-weight: 600; margin: 0 0 2px; }
.person .rolle { color: var(--r7-stein); font-size: .9375rem; margin: 0 0 18px; }
.person .wege { display: flex; flex-direction: column; gap: 4px; font-size: .9375rem; }
.person .wege a { text-decoration: none; color: var(--r7-rhein); font-weight: 600; }
.person .wege a:hover { text-decoration: underline; }
@media (max-width: 860px) { .team { grid-template-columns: 1fr; } .person { grid-template-columns: 96px 1fr; gap: 20px; } .person img { width: 96px; height: 96px; } }

/* Kontakt */
.kontakt .wrap { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(32px, 6vw, 88px); align-items: start; }
.kontakt h2 { margin-bottom: 24px; }
.kontakt .lead { margin-bottom: 36px; }
.karte { border: 2px solid var(--r7-kalk); padding: clamp(24px, 3vw, 36px); }
.karte dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 12px 24px; font-size: .9375rem; }
.karte dt { color: var(--r7-nebel); }
.karte dd { margin: 0; }
.karte a { color: var(--r7-rhein-hell); font-weight: 600; text-decoration: none; }
.karte a:hover { text-decoration: underline; }
@media (max-width: 860px) { .kontakt .wrap { grid-template-columns: 1fr; } .karte dl { grid-template-columns: 1fr; gap: 2px; } .karte dd { margin-bottom: 12px; } }

/* Fuß */
.fuss { background: var(--r7-graphit-2); color: var(--r7-nebel); padding: 56px 0 40px; font-size: .875rem; }
.fuss .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; align-items: flex-end; }
.fuss img { height: 38px; width: auto; margin-bottom: 18px; }
.fuss p { margin: 0; }
.fuss nav { display: flex; gap: 24px; }
.fuss a { color: var(--r7-kalk); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }

/* Rechtsseiten */
.recht { padding: clamp(48px, 8vw, 96px) 0; }
.recht .wrap { max-width: 780px; }
.recht h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); margin-bottom: 40px; }
.recht h2 { font-size: 1.25rem; font-weight: 600; letter-spacing: 0; margin: 40px 0 12px; }
.recht p, .recht li { font-size: 1rem; color: var(--r7-graphit-2); }
.recht a { color: var(--r7-rhein); }
.zurueck { display: inline-block; margin-bottom: 32px; font-size: .875rem; font-weight: 600; color: var(--r7-rhein); text-decoration: none; }

/* Bewegung — vom Lesbaren weg, nie hinein: ohne JS ist alles sichtbar */
.js .zeige { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.js .zeige.da { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .js .zeige { opacity: 1; transform: none; transition: none; } }
.btn.ghost.hell-rand { color: var(--r7-kalk); border-color: var(--r7-kalk); }
.btn.ghost.hell-rand:hover { background: var(--r7-kalk); color: var(--r7-graphit); }
.person > div { min-width: 0; }
.person .wege a, .karte a { overflow-wrap: anywhere; }
figure { margin: 0; }
.kopf .marke img { height: 56px; margin-left: -12px; }
.drei .nr { text-transform: uppercase; }
@media (max-width: 900px) { .kopf .marke img { height: 48px; margin-left: -8px; } }
@media (max-width: 480px) { .person .wege { font-size: .875rem; } }

/* Tippziele ≥ 24 px auch für Textlinks */
.kopf nav a, .fuss a, .person .wege a, .karte a { display: inline-flex; align-items: center; min-height: 24px; }
.fuss nav a { min-height: 44px; }

/* Runde 2 (Critic 20.10.): Hero-Bild trägt — läuft rechts bis zum Rand */
.hero { padding: 0; }
.hero .wrap { grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: stretch; }
.hero .wrap > div:first-child { padding: clamp(56px, 9vw, 128px) 0; align-self: center; }
.hero .bild { margin: 0 calc(-1 * var(--r7-gutter) - max(0px, (100vw - var(--r7-max)) / 2)) 0 0; display: flex; flex-direction: column; }
.hero .bild .rahmen { flex: 1; min-height: 560px; }
.hero .bild .rahmen::before { display: none; }
.hero .bild picture, .hero .bild img { height: 100%; }
.hero .bild img { aspect-ratio: auto; object-fit: cover; object-position: 50% 40%; border-left: 2px solid var(--r7-graphit); }
.hero .bild figcaption { margin: 0; padding: 12px var(--r7-gutter) 16px 16px; border-left: 2px solid var(--r7-graphit); }
@media (max-width: 860px) {
  .hero .wrap { grid-template-columns: 1fr; gap: 0; }
  .hero .wrap > div:first-child { padding: 48px 0 40px; }
  .hero .bild { margin: 0 calc(-1 * var(--r7-gutter)); }
  .hero .bild .rahmen { min-height: 0; }
  .hero .bild img { aspect-ratio: 4 / 5; height: auto; border-left: 0; border-top: 2px solid var(--r7-graphit); max-height: 72vh; width: 100%; }
  .hero .bild figcaption { border-left: 0; padding: 12px var(--r7-gutter) 0; }
}

/* Grundriss: einheitliche Titellinie, Türen als Lücke in der Wand unten */
.raum .nr { margin-bottom: 0; height: 96px; padding-bottom: 0; }
.raum + .raum::before { top: auto; bottom: 40px; height: 48px; }
.grundriss { border-width: 2px; }
@media (max-width: 1060px) {
  .raum .nr { height: auto; }
  .raum + .raum::before { bottom: auto; top: -2px; height: 2px; }
  }

/* Team: Menschen groß */
.person { grid-template-columns: 1fr; gap: 24px; padding-top: 0; border-top: 0; }
.person img { width: 100%; height: auto; aspect-ratio: 1; max-width: 360px; border: 2px solid var(--r7-graphit); }
.team { grid-template-columns: repeat(2, minmax(0, 360px)); gap: clamp(32px, 6vw, 96px); }
@media (max-width: 860px) { .team { grid-template-columns: 1fr 1fr; gap: 16px; } .person { grid-template-columns: 1fr; gap: 16px; } .person img { width: 100%; height: auto; } .person .name { font-size: 1.0625rem; } }
@media (max-width: 480px) { .team { grid-template-columns: 1fr; gap: 40px; } .person img { max-width: 240px; } }
.raum h3 { hyphens: auto; -webkit-hyphens: auto; }
.raum { padding-left: 16px; padding-right: 16px; }
@media (max-width: 1060px) { .raum { padding: 24px 20px; } }
.raum h3 { hyphens: manual; -webkit-hyphens: manual; }
@media (min-width: 861px) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } .person img { max-width: 420px; } }