/* Topcu Gruppe – Demo-Webseite (mehrseitig), Variante „Logo-Schrift“
   Anthrazit und warmes Weiß, ein gedämpftes Gold nur als feiner Akzent.
   Jost fuer Kopfleiste und alle Überschriften, DM Sans für Text. Bewegung: Motion (motion.dev) und CSS.
   Layout: 12-Spalten-Raster mit engen Rändern; große Schrift läuft bis an die Ränder. */

:root {
  --bg: #faf9f7;
  --surface: #f1efeb;
  --surface-2: #e4e1db;
  --ink: #232322;
  --muted: #615f5a;
  --line: #dfdcd6;
  --dark: #1f1f1e;
  --dark-2: #292927;
  --dark-ink: #f2f0ec;
  --dark-muted: #aeaba4;
  /* Gold: sparsam. --gold auf dunklem Grund, --gold-ink auf hellem Grund (auch für Text), --gold-line für feine Linien */
  --gold: #c4a76f;
  --gold-ink: #86693a;
  --gold-line: #b99d64;
  --err: #8a3a2b; /* Fehlermeldungen und Fehlerrahmen im Formular (auf --bg 7,3:1) */

  --font-display: "Jost", "Futura", "Century Gothic", "Trebuchet MS", system-ui, sans-serif;
  --display-weight: 500;
  --font-text: "DM Sans", "Helvetica Neue", Arial, system-ui, sans-serif;

  --step-small: 0.875rem;
  --step-body: 1.0625rem;
  --step-lead: clamp(1.1875rem, 1.02rem + 0.55vw, 1.5rem);
  --step-statement: clamp(1.5rem, 1.1rem + 1.2vw, 2.25rem);
  --step-head: clamp(1.75rem, 1.1rem + 1.9vw, 2.75rem);
  --step-display: clamp(2.5rem, 7.6vw, 8.75rem);
  /* Einheitliche Größe aller Seitentitel (Bestandsverwaltung, Vermietung, Immobilien, Kontakt, Namen der Immobilien).
     Die Größe ist so gewählt, dass „Bestandsverwaltung“ in eine Zeile passt. */
  --title-size: min(7.4vw, 6.5rem);

  --m: clamp(1rem, 2vw, 2rem);
  --gutter: clamp(1rem, 1.6vw, 1.75rem);
  --section: clamp(5.5rem, 10vw, 10rem);
  --bar-h: 4.5rem;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bar-total: calc(var(--bar-h) + var(--safe-top));

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ---------- Grundlage ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; color-scheme: light; }
html:has(dialog[open]), html.is-locked { overflow: hidden; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: clip; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd, blockquote { margin: 0; }
ul[class], ol[class] { padding: 0; list-style: none; }
img { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
a, button, summary, label { touch-action: manipulation; }
button, .button, .brand { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
::selection { background: rgba(185, 157, 100, 0.35); color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
:target { scroll-margin-top: calc(var(--bar-total) + 1rem); }
p { text-wrap: pretty; }
.photo { background: var(--surface-2); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: var(--m); top: -4rem; z-index: 90; background: var(--ink); color: var(--bg); padding: 0.75rem 1rem; }
.skip:focus { top: calc(var(--safe-top) + 0.75rem); }

.wrap { padding-inline: var(--m); }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); }
.section { padding-block: var(--section); }
.section--follow { padding-top: calc(var(--section) * 0.35); }
.on-surface { background: var(--surface); }
.on-dark { background: var(--dark); color: var(--dark-ink); }
.on-dark .muted, .on-dark .soft { color: var(--dark-muted); }
.muted { color: var(--muted); }

/* ---------- Schrift ---------- */
/* Display: Jost, in Groß- und Kleinschreibung, in einem einheitlichen Gewicht. */
.display { font-family: var(--font-display); font-weight: var(--display-weight); letter-spacing: -0.03em; line-height: 1.05; }
/* Seitentitel: feste, einheitliche Größe, kein Aufziehen auf die volle Breite. Wörter brechen nur zwischen den Wörtern um. */
.ptitle { display: block; font-size: var(--title-size); padding-bottom: 0.17em; }
.ptitle .w { white-space: nowrap; }
.ptitle .hy { display: none; }
.h-section { font-family: var(--font-display); font-weight: var(--display-weight); font-size: var(--step-head); line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; }
.h-section--rule::before { content: ""; display: block; width: 2.5rem; height: 1px; margin-bottom: 1.25rem; background: var(--gold-line); }
.lead { font-size: var(--step-lead); line-height: 1.35; }
.statement { font-size: var(--step-statement); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; text-wrap: balance; }
.small { font-size: var(--step-small); }
.split-word { display: inline-block; overflow: clip; padding-bottom: 0.14em; margin-bottom: -0.14em; vertical-align: top; }
.split-word > span { display: inline-block; }

/* ---------- Bedienelemente ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-height: 3.25rem; padding: 0 1.5rem; background: var(--ink); color: var(--bg); font-weight: 500; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform 140ms var(--ease-out), background-color 180ms ease, color 180ms ease, box-shadow 220ms ease; }
.button--small { min-height: 2.75rem; padding: 0 1.15rem; }
.button--light { background: var(--dark-ink); color: var(--dark); }
.button:active { transform: scale(0.97); }
.arrow { display: inline-flex; align-items: center; gap: 0.55rem; min-height: 2.75rem; font-weight: 500; text-decoration: none; }
.arrow__text { background: linear-gradient(var(--gold-line), var(--gold-line)) 0 100% / 100% 1px no-repeat; padding-bottom: 0.1em; transition: background-size 240ms var(--ease-out); }
.arrow__icon { display: inline-block; transition: transform 240ms var(--ease-out); }
.arrow:active { opacity: 0.6; }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color 180ms ease; }
.link--gold { text-decoration-color: var(--gold-line); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: #343432; box-shadow: inset 0 -2px 0 var(--gold); }
  .button--light:hover { background: #ffffff; box-shadow: inset 0 -2px 0 var(--gold-ink); }
  .arrow:hover .arrow__icon { transform: translateX(0.35rem); }
  .arrow:hover .arrow__text { background-size: 100% 2px; }
  .link:hover { text-decoration-color: currentColor; }
}

/* ---------- Kopfleiste ---------- */
.bar { position: fixed; inset: 0 0 auto 0; z-index: 50; height: var(--bar-total); display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: var(--safe-top) max(var(--m), env(safe-area-inset-right, 0px)) 0 max(var(--m), env(safe-area-inset-left, 0px)); color: var(--ink); background: transparent; transition: background-color 320ms ease, color 320ms ease, transform 420ms var(--ease-out), box-shadow 320ms ease; }
.bar--light { color: var(--dark-ink); }
.bar--light .brand__mark { filter: invert(1); }
.bar--light .bar__cta { background: var(--dark-ink); color: var(--dark); }
.bar--solid { background: var(--bg); color: var(--ink); box-shadow: 0 1px 0 rgba(185, 157, 100, 0.5); }
.bar--solid .brand__mark { filter: none; }
.bar--solid .bar__cta { background: var(--ink); color: var(--bg); }
.bar--away { transform: translateY(-100%); }
.brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; }
/* Logo oben links: Zeichen und „Topcu Gruppe“ in der Logo-Schrift, etwas größer als zuvor */
.brand__mark { width: 3rem; height: auto; transition: filter 320ms ease; }
.brand__name { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.6rem; letter-spacing: -0.02em; line-height: 1; padding-bottom: 0.08em; }
.nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.4vw, 2.5rem); }
.nav__link { position: relative; display: inline-flex; align-items: center; min-height: 2.75rem; text-decoration: none; }
.nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.55rem; height: 1px; background: var(--gold-line); transform: scaleX(0); transform-origin: right center; transition: transform 300ms var(--ease-out); }
.nav__link[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); transform-origin: left center; } }
.bar__menu { display: none; min-height: 2.75rem; padding-inline: 0.25rem; margin-right: -0.25rem; font-weight: 500; }
.bar__menu:active { opacity: 0.55; }

/* Geschäftsbereiche-Dropdown */
.dd { position: relative; }
.dd__toggle { gap: 0.4rem; }
.dd__toggle svg { width: 0.7rem; transition: transform 200ms var(--ease-out); }
.dd[data-open] .dd__toggle svg { transform: rotate(180deg); }
.dd__panel { position: absolute; top: calc(100% + 0.25rem); left: -1.25rem; width: 23rem; padding: 0.75rem; background: var(--bg); color: var(--ink); box-shadow: 0 18px 50px rgba(31, 31, 30, 0.14); /* schwebt */ transform-origin: top left; opacity: 0; transform: translateY(-6px) scale(0.98); visibility: hidden; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s linear 220ms; }
.dd[data-open] .dd__panel { opacity: 1; transform: none; visibility: visible; transition: opacity 180ms var(--ease-out), transform 220ms var(--ease-out), visibility 0s; }
.dd__item { display: block; padding: 0.85rem 1rem; text-decoration: none; transition: background-color 160ms ease; }
.dd__item strong { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.0625rem; letter-spacing: -0.01em; }
.dd__item span { display: block; color: var(--muted); font-size: var(--step-small); line-height: 1.45; margin-top: 0.15rem; }
@media (hover: hover) and (pointer: fine) { .dd__item:hover { background: var(--surface); } }

/* Menü (Telefon und Tablet) */
.menu { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; padding: var(--safe-top) var(--m) calc(1.75rem + var(--safe-bottom)); background: var(--dark); color: var(--dark-ink); overflow-y: auto; overscroll-behavior: contain; visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path 520ms var(--ease-in-out), visibility 0s linear 520ms; }
.menu.is-open { visibility: visible; clip-path: inset(0); transition: clip-path 560ms var(--ease-in-out), visibility 0s; }
.menu__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--bar-h); }
.menu .brand__mark { filter: invert(1); }
.menu__close { min-height: 2.75rem; padding-inline: 0.25rem; margin-right: -0.25rem; font-weight: 500; }
.menu__close:active { opacity: 0.55; }
.menu__nav { display: flex; flex-direction: column; margin-top: clamp(1.5rem, 6svh, 4rem); }
.menu__nav a { display: block; padding-block: 0.3rem; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 9.4vw, 3.6rem); line-height: 1.08; letter-spacing: -0.02em; text-decoration: none; }
.menu__nav a:active { opacity: 0.5; }
.menu__sub { display: flex; flex-direction: column; margin: 0.25rem 0 0.75rem 0.1rem; padding-left: 0.9rem; border-left: 1px solid var(--gold-line); }
.menu__sub a { font-family: var(--font-text); font-weight: 500; font-size: 1.0625rem; letter-spacing: 0; padding-block: 0.35rem; color: var(--dark-muted); }

/* Vorhang für Seitenwechsel */
.curtain { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--dark); pointer-events: none; clip-path: inset(0 0 100% 0); }
.curtain img { width: 3.25rem; filter: invert(1); opacity: 0; }
.curtain i { position: absolute; left: 50%; top: calc(50% + 2.75rem); width: 3.25rem; height: 1px; margin-left: -1.625rem; background: var(--gold); transform: scaleX(0); transform-origin: left center; opacity: 0; }
.motion .curtain { animation: curtain-off 760ms var(--ease-in-out) 60ms both; }
.motion .curtain img { animation: curtain-mark 760ms var(--ease-out) both; }
.motion .curtain i { animation: curtain-line 760ms var(--ease-out) both; }
.motion .curtain.is-leaving { animation: none; clip-path: inset(0); transition: clip-path 520ms var(--ease-in-out); }
.motion .curtain.is-closed { animation: none; clip-path: inset(100% 0 0 0); }
@keyframes curtain-off { from { clip-path: inset(0); } to { clip-path: inset(0 0 100% 0); } }
@keyframes curtain-mark { 0% { opacity: 0.9; } 40% { opacity: 0.9; } 100% { opacity: 0; } }
@keyframes curtain-line { 0% { opacity: 0.9; transform: scaleX(0); } 45% { opacity: 0.9; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }

/* ---------- Start: Hero ---------- */
.hh { position: relative; height: 100svh; min-height: 36rem; color: var(--dark-ink); background: var(--dark); overflow: clip; }
.hh__media { position: absolute; inset: 0; overflow: clip; }
/* Überblendung nur über opacity und transform: beides läuft auf der Grafikkarte, nichts flackert */
.hh__slide { position: absolute; inset: 0; overflow: clip; opacity: 0; will-change: opacity; }
.hh__slide.is-current { opacity: 1; z-index: 1; }
.hh__slide.is-entering { z-index: 2; }
.hh__slide img, .hh__slide video { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 50%; will-change: transform; backface-visibility: hidden; }
.hh__scrim { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 70% 45% at 18% 72%, rgba(26, 26, 25, 0.42), transparent 100%), linear-gradient(to top, rgba(26, 26, 25, 0.76) 0%, rgba(26, 26, 25, 0.3) 42%, rgba(26, 26, 25, 0.12) 70%, rgba(26, 26, 25, 0.4) 100%); /* weicher Verlauf unter Text */ }
.hh__content { position: absolute; z-index: 4; inset: auto 0 0 0; padding: 0 var(--m) calc(clamp(1.5rem, 4vh, 3rem) + var(--safe-bottom)); }
.hh__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(0.75rem, 2.4vh, 1.75rem); }
/* Der Satz im Startbild ist die Hauptüberschrift der Seite, in der Logo-Schrift */
.hh__lead { grid-column: 1 / span 6; font-family: var(--font-display); font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem); line-height: 1.2; font-weight: var(--display-weight); letter-spacing: -0.02em; max-width: 24ch; text-wrap: balance; color: var(--dark-ink); }
.hh__cta { grid-column: 1 / span 5; margin-top: 0.75rem; }
.hh__intro { grid-column: 1 / span 7; }
.hh__now { grid-column: 9 / span 4; justify-self: end; width: min(100%, 22rem); }
.hh__caption { display: flex; justify-content: space-between; gap: 1rem; font-size: var(--step-small); margin-bottom: 0.7rem; }
.hh__caption span + span { color: rgba(242, 240, 236, 0.7); }
.hh__dots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; }
.hh__dot { position: relative; height: 2.75rem; display: block; }
.hh__dot::before, .hh__dot i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: rgba(242, 240, 236, 0.3); }
.hh__dot i { background: var(--gold); transform: scaleX(0); transform-origin: left center; }
/* Der Name im Startbild: ein Gewicht, deutlich kleiner als zuvor, einzeilig */
.hh__name { font-size: clamp(2.5rem, 6vw, 6.25rem); font-weight: 500; letter-spacing: -0.025em; white-space: nowrap; color: var(--dark-ink); line-height: 1; padding-bottom: 0.2em; }
.hh__name .ch { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; vertical-align: top; padding: 0.14em 0 0.32em; margin: -0.14em 0 -0.32em; }
.hh__name .ch > span { display: inline-block; }

/* ---------- Seitenkopf (Unterseiten) ---------- */
.ph { padding: calc(var(--bar-total) + clamp(2.5rem, 6vw, 5.5rem)) var(--m) 0; }
.ph__crumb { display: flex; gap: 0.5rem; font-size: var(--step-small); color: var(--muted); margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }
.ph__crumb a { text-decoration: none; }
.ph__row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.5rem; align-items: start; margin-top: clamp(1.25rem, 3vw, 2.5rem); }
.ph__lead { grid-column: 1 / span 6; }
.ph__aside { grid-column: 8 / span 5; color: var(--muted); }
div.ph__aside p + p { margin-top: 1em; }
.ph__media { margin-top: clamp(2.5rem, 5vw, 4.5rem); margin-inline: calc(var(--m) * -1); height: clamp(22rem, 72svh, 52rem); overflow: clip; position: relative; }
.ph__media img { width: 100%; height: 118%; object-fit: cover; }
.ph__media figcaption { position: absolute; left: var(--m); bottom: 1rem; z-index: 1; font-size: var(--step-small); color: #fff; background: rgba(31, 31, 30, 0.55); padding: 0.35rem 0.65rem; }

/* ---------- Bildaufdeckung ---------- */
.reveal-img { overflow: clip; }
.reveal-img img { transform-origin: 50% 50%; }

/* ---------- Start: Das sind wir, Zahlen ---------- */
.about { padding-block: var(--section) calc(var(--section) * 0.8); }
.about__head { grid-column: 1 / -1; }
.about__statement { grid-column: 1 / span 7; margin-top: 1.75rem; font-size: clamp(2rem, 1rem + 3.1vw, 3.9rem); line-height: 1.08; letter-spacing: -0.02em; }
.about__intro { grid-column: 9 / span 4; align-self: end; }
.about__intro p + p { margin-top: 1em; }
.about__intro .arrow { margin-top: 0.25rem; }
.about__cols { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.25rem; margin-top: clamp(3rem, 6vw, 5.5rem); list-style: none; padding: 0; }
.about__col { padding-top: 1.25rem; border-top: 1px solid var(--line); }
.about__col-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; letter-spacing: -0.01em; margin-bottom: 0.75rem; }
.about__col p { color: var(--muted); max-width: 34ch; }
.stats { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gutter); margin-top: clamp(3.5rem, 7vw, 6.5rem); }
.stat { padding-top: 1.25rem; border-top: 1px solid var(--gold-line); }
.stat__value { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.5rem, 4.6vw, 4.75rem); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.stat__unit { font-family: var(--font-display); font-weight: 500; font-size: 0.42em; letter-spacing: 0; margin-left: 0.2em; }
.stat__label { display: block; margin-top: 0.85rem; color: var(--muted); max-width: 26ch; }

/* ---------- Geschäftsbereiche (Startseite) ---------- */
.areas { padding-block: var(--section); }
.areas__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.areas__head .h-section { grid-column: 1 / span 6; }
.areas__head p { grid-column: 8 / span 5; color: var(--muted); }
.areas__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; }
.areas__list { grid-column: 1 / -1; }
/* Ohne Vorschaubild: Name links, kurzer Text rechts, damit der Abschnitt wenig Höhe braucht */
.area { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr) auto; column-gap: var(--gutter); align-items: baseline; padding-block: clamp(1.1rem, 2vw, 1.6rem); text-decoration: none; transition: opacity 240ms ease; }
.area + .area { border-top: 1px solid var(--line); }
.area__name { font-size: clamp(1.5rem, 2.6vw, 2.6rem); line-height: 1.05; hyphens: manual; padding-bottom: 0.08em; }
.area__desc { color: var(--muted); max-width: 52ch; }
.area__icon { grid-column: 3; grid-row: 1; align-self: start; font-size: 1.5rem; transition: transform 300ms var(--ease-out), color 240ms ease; }
.area:active { opacity: 0.6; }
.areas__peek { grid-column: 9 / span 4; position: sticky; top: calc(var(--bar-total) + 1.5rem); aspect-ratio: 4 / 5; overflow: clip; background: var(--surface-2); }
.areas__peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; clip-path: inset(100% 0 0 0); transform: scale(1.08); transition: clip-path 700ms var(--ease-in-out), transform 1100ms var(--ease-out); }
.areas__peek img.is-on { clip-path: inset(0); transform: none; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .areas__list:has(.area:hover) .area:not(:hover) { opacity: 0.4; }
  .area:hover .area__icon { transform: translate(0.25rem, -0.25rem); color: var(--gold-ink); }
}
/* ---------- Projekte: horizontaler Lauf (Startseite) ---------- */
.track { position: relative; background: var(--dark); color: var(--dark-ink); }
.track__sticky { position: relative; padding-block: var(--section); }
.track__head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: end; padding-inline: var(--m); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.track__head .h-section { grid-column: 1 / span 6; }
.track__head > p { grid-column: 9 / span 4; justify-self: end; }
.track__rail { display: flex; gap: var(--gutter); padding-inline: var(--m); scroll-padding-inline: var(--m); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
.track__rail::-webkit-scrollbar { display: none; }
.card { flex: none; width: min(82vw, 44rem); scroll-snap-align: start; text-decoration: none; }
.card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: clip; background: var(--dark-2); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.card__media--empty { display: grid; place-items: center; }
.card__media--empty .card__mark { width: 30%; height: auto; object-fit: contain; opacity: 0.16; filter: invert(1); }
.card__note { position: absolute; left: 1.25rem; bottom: 1rem; font-size: var(--step-small); color: var(--dark-muted); }
.card__title { display: block; margin-top: 1.1rem; font-size: clamp(1.75rem, 3vw, 2.9rem); padding-bottom: 0.1em; }
.card__meta { display: block; margin-top: 0.15rem; color: var(--dark-muted); }
.card:active .card__media img { transform: scale(1.02); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__media img { transform: scale(1.04); } .card:hover .card__title { color: var(--gold); } }
.card__title { transition: color 240ms ease; }

/* ---------- Gülay Topcu und Dr. Mehmet Topcu ---------- */
.owners { padding-block: var(--section); }
.owners__head { grid-column: 1 / -1; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.owners__photo { grid-column: 1 / span 5; align-self: end; }
.owners__photo figcaption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.owners__slot { position: relative; aspect-ratio: 4 / 5; display: grid; place-items: center; background: var(--surface-2); overflow: clip; }
.owners__slot img.owners__portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.owners__slotmark { width: 34%; opacity: 0.13; }
.owners__slotnote { position: absolute; left: 1.25rem; bottom: 1rem; font-size: var(--step-small); color: var(--muted); }
.owners__body { grid-column: 7 / span 6; align-self: end; }
.owners__quote p { font-size: var(--step-statement); line-height: 1.2; letter-spacing: -0.015em; font-weight: 500; max-width: 32ch; text-wrap: balance; }
.owners__intro { margin-top: 2rem; max-width: 52ch; }
.owners__people { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gutter); margin-top: clamp(2.5rem, 5vw, 4rem); }
.owners__name { font-family: var(--font-display); font-size: 1.375rem; font-weight: var(--display-weight); letter-spacing: -0.01em; }
.owners__role { color: var(--muted); margin-bottom: 0.6rem; }
.owners__more { margin-top: 2rem; }

/* ---------- Kontakt-Abschluss ---------- */
.duo { display: grid; grid-template-columns: 1fr 1fr; background: var(--dark); color: var(--dark-ink); }
.duo__half { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 3rem; min-height: clamp(20rem, 46svh, 30rem); padding: clamp(3rem, 6vw, 5.5rem) var(--m); text-decoration: none; transition: background-color 300ms ease; }
.duo__title { font-size: clamp(2.5rem, 6vw, 6.5rem); padding-bottom: 0.1em; }
.duo__text { max-width: 34ch; color: var(--dark-muted); }
.duo__text--small { margin-top: 1.25rem; font-size: var(--step-small); }
.duo--single { display: block; }
.duo--single .duo__half { flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 2.5rem 4rem; min-height: clamp(18rem, 44svh, 28rem); }
.duo--single .duo__title { font-size: var(--title-size); line-height: 1; } /* Größe: siehe Abschnitt „Kontakt“ am Ende */
.duo__side { flex: none; width: min(100%, 24rem); }
@media (hover: hover) and (pointer: fine) { .duo__half:hover { background: var(--dark-2); } }
.duo__half:active { opacity: 0.85; }

/* ---------- Fuß ---------- */
.foot { background: var(--dark); color: var(--dark-ink); padding: clamp(4rem, 8vw, 7rem) var(--m) calc(1.5rem + var(--safe-bottom)); border-top: 1px solid rgba(196, 167, 111, 0.35); }
.foot__cols { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; line-height: 1.7; }
.foot__col { grid-column: span 3; color: var(--dark-muted); min-width: 0; }
.foot__col a { text-decoration: none; }
.foot__col a:hover { color: var(--dark-ink); }
.foot__first { color: var(--dark-ink); margin-bottom: 0.5rem; }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 2rem; margin-top: clamp(3.5rem, 6vw, 5.5rem); font-size: var(--step-small); color: var(--dark-muted); }
.foot__legal p { max-width: 80ch; }

/* ---------- Unternehmen ---------- */
.story__text { grid-column: 1 / span 8; }
.story__text .statement { margin-bottom: 2.5rem; }
.story__text p + p { margin-top: 1.1em; }
.story__mark { grid-column: 8 / span 5; align-self: center; }
.story__mark img { width: 100%; }

.companies__title { grid-column: 1 / -1; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.companies__head { grid-column: 1 / span 4; padding-top: 1.5rem; }
.companies__list { grid-column: 5 / span 8; }
.company { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gutter); padding-block: 1.5rem; border-top: 1px solid var(--line); }
.company:last-child { border-bottom: 1px solid var(--line); }
.company__name { font-weight: 600; }
.company__role { color: var(--muted); }

/* ---------- Geschäftsbereichsseiten ---------- */
.svc-intro__lead { grid-column: 1 / span 7; }
.svc-intro__text { grid-column: 9 / span 4; color: var(--muted); }
.svc-intro__text p + p { margin-top: 1em; }

.steps__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.steps__head p { max-width: 34ch; color: var(--dark-muted); }
.steps__list { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gutter); counter-reset: step; }
.steps__list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step { counter-increment: step; padding-top: 1.25rem; border-top: 1px solid rgba(242, 240, 236, 0.28); }
.step::before { content: counter(step); display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2rem, 3.4vw, 3.25rem); line-height: 1; margin-bottom: 1.5rem; color: var(--gold); }
.step h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--display-weight); letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.step p { color: var(--muted); }
.on-dark .step p { color: var(--dark-muted); }

.person { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: end; }
.person__lead { grid-column: 1 / span 6; }
.person__card { grid-column: 8 / span 5; padding: clamp(1.5rem, 3vw, 2.5rem); background: var(--bg); }
.person__card h3 { font-family: var(--font-display); font-size: var(--step-lead); font-weight: var(--display-weight); letter-spacing: -0.01em; }
.person__card .muted { margin-bottom: 1.25rem; }
.copy { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.65rem; border-top: 1px solid var(--line); }
.copy span { min-width: 0; overflow-wrap: anywhere; -webkit-user-select: all; user-select: all; }
.copy button { flex: none; min-height: 2.75rem; padding-inline: 0.75rem; margin-right: -0.75rem; font-size: var(--step-small); font-weight: 500; color: var(--muted); }
.copy button:active { opacity: 0.55; }

.next { display: block; padding: clamp(4rem, 8vw, 7rem) var(--m); text-decoration: none; background: var(--surface); transition: background-color 300ms ease; }
.next__label { display: block; color: var(--muted); margin-bottom: 1rem; }
.next__title { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: clamp(2rem, 5.6vw, 5.5rem); padding-bottom: 0.1em; }
.next__title span:last-child { font-family: var(--font-text); font-weight: 400; transition: transform 400ms var(--ease-out), color 240ms ease; }
@media (hover: hover) and (pointer: fine) { .next:hover { background: var(--surface-2); } .next:hover .next__title span:last-child { transform: translateX(0.15em); color: var(--gold-ink); } }
.next:active { background: var(--surface-2); }

/* ---------- Projekte ---------- */
.plist { display: flex; flex-direction: column; gap: clamp(5rem, 10vw, 9rem); }
.prow { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 1.75rem; align-items: end; text-decoration: none; }
.prow__media { position: relative; grid-column: 1 / span 7; display: block; aspect-ratio: 4 / 3; overflow: clip; background: var(--surface-2); }
.prow__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease-out); }
.prow__text { grid-column: 9 / span 4; }
.prow--flip .prow__media { grid-column: 6 / span 7; grid-row: 1; }
.prow--flip .prow__text { grid-column: 1 / span 4; grid-row: 1; }
.prow__title { font-size: clamp(2rem, 3.4vw, 3.4rem); line-height: 1; margin-bottom: 1rem; hyphens: manual; padding-bottom: 0.08em; }
.prow__meta { color: var(--muted); margin-bottom: 1.25rem; }
@media (hover: hover) and (pointer: fine) { .prow:hover .prow__media img { transform: scale(1.04); } .prow:hover .arrow__icon { transform: translateX(0.35rem); } }

/* Platzhalter für Bilder, die noch folgen */
.tile { position: relative; display: grid; place-items: center; width: 100%; height: 100%; aspect-ratio: 4 / 3; background: var(--surface-2); overflow: clip; }
.tile--portrait { aspect-ratio: 4 / 5; }
.tile .tile__mark { width: 30%; height: auto; aspect-ratio: auto; object-fit: contain; opacity: 0.14; }
.tile__note { position: absolute; left: 1.25rem; bottom: 1rem; font-size: var(--step-small); color: var(--muted); }
.prow__media--empty { display: block; }

/* Projektdetail */
.pd-hero { position: relative; height: 100svh; min-height: 36rem; color: var(--dark-ink); background: var(--dark); overflow: clip; }
.pd-hero__media { position: absolute; inset: 0; }
.pd-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.pd-hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; pointer-events: none; transition: opacity 350ms ease; }
.pd-hero__video.is-ready { opacity: 1; }
@media (max-width: 47.99rem) { .pd-hero__video { display: none; } }
.pd-hero__media--empty { display: grid; place-items: center; background: var(--dark-2); }
.pd-hero__media--empty img.pd-hero__mark { width: min(34vw, 26rem); height: auto; object-fit: contain; opacity: 0.1; filter: invert(1); margin-top: -10svh; }
.pd-hero__note { position: absolute; top: calc(var(--bar-total) + 1.25rem); right: var(--m); font-size: var(--step-small); color: var(--dark-muted); }
.pd-hero .hh__scrim { z-index: 1; }
.pd-hero__content { position: absolute; z-index: 2; inset: auto 0 0 0; padding: 0 var(--m) calc(1rem + var(--safe-bottom)); }
.pd-hero__crumb { display: flex; gap: 0.5rem; font-size: var(--step-small); color: rgba(242, 240, 236, 0.75); margin-bottom: 1rem; }
.pd-hero__crumb a { text-decoration: none; }
.pd-hero__title .ch { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; vertical-align: top; padding: 0.14em 0 0.32em; margin: -0.14em 0 -0.32em; }
.pd-hero__title .ch > span { display: inline-block; }
.pd-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 0.25rem; }

.facts-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem var(--gutter); }
.facts-grid > div { padding-top: 1rem; border-top: 1px solid var(--line); }
.fact__label { display: block; color: var(--muted); margin-bottom: 0.4rem; font-size: var(--step-small); }
.fact__value { display: block; font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.375rem, 2.4vw, 2.25rem); line-height: 1.1; letter-spacing: -0.015em; overflow-wrap: anywhere; }
.pd-text__lead { grid-column: 1 / span 6; }
.pd-text__body { grid-column: 8 / span 5; }
.pd-text__body p + p { margin-top: 1em; }
.pd-media { grid-column: 1 / -1; overflow: clip; }
.pd-media img { width: 100%; height: auto; }
.pd-media figcaption, .ba__caption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.pd-pair { grid-column: 1 / -1; display: grid; grid-template-columns: 5fr 7fr; gap: var(--gutter); align-items: end; }
.pd-pair img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.pd-pair figure:last-child img { aspect-ratio: 4 / 3; }
.pd-pair figcaption { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.pd-pair .tile .tile__mark { aspect-ratio: auto; }

/* ---------- Formulare ---------- */
.form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem var(--gutter); }
.field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field legend { font-size: var(--step-small); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 3.25rem; padding: 0.85rem 1rem; border: 1px solid var(--line); border-radius: 0; background: var(--bg); font-size: max(16px, 1rem); color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease; -webkit-appearance: none; appearance: none; }
.field select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23232322' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.5rem; }
.field textarea { min-height: 9rem; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 1px var(--gold-line); }
.field__hint { font-size: var(--step-small); color: var(--muted); }
.check { grid-column: 1 / -1; display: flex; gap: 0.75rem; align-items: flex-start; font-size: var(--step-small); color: var(--muted); }
.check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; accent-color: var(--gold-ink); }
.form__foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 0.5rem; }
.form__error { grid-column: 1 / -1; color: #8a3a2b; font-size: var(--step-small); }
.form__done { grid-column: 1 / -1; padding: 1.5rem; background: var(--surface); border-left: 2px solid var(--gold-line); }
.form__done h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.25rem; margin-bottom: 0.35rem; }
.form.is-sent .field, .form.is-sent .check, .form.is-sent .form__foot, .form.is-sent .form__error { display: none; }
.form:not(.is-sent) .form__done { display: none; }
[hidden] { display: none !important; }

/* Anhänge */
.attach__drop { position: relative; display: grid; gap: 0.5rem; justify-items: start; padding: 1.25rem; border: 1px dashed #b4b0a7; background: var(--bg); overflow: hidden; transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
.attach .attach__input[type="file"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.attach__drop:focus-within { border-color: var(--ink); box-shadow: 0 0 0 1px var(--gold-line); }
.attach__drop.is-over { border-color: var(--gold-ink); background: var(--surface); }
.attach__text { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.85rem; font-size: var(--step-small); color: var(--muted); }
.attach__btn { display: inline-flex; align-items: center; min-height: 2.5rem; padding: 0 1rem; background: var(--ink); color: var(--bg); font-weight: 500; }
.attach__hint { font-size: var(--step-small); color: var(--muted); max-width: 52ch; }
.attach__error { margin-top: 0.15rem; color: #8a3a2b; font-size: var(--step-small); }
.attach__list { display: grid; gap: 0.5rem; margin-top: 0.4rem; }
.attach__list:empty { display: none; }
.attach__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.85rem; padding: 0.5rem 0.25rem 0.5rem 0.5rem; background: var(--surface); }
.attach__thumb { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; object-fit: cover; background: var(--surface-2); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.05em; color: var(--muted); }
.attach__name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.attach__meta { display: block; color: var(--muted); font-size: var(--step-small); }
.attach__info { min-width: 0; }
.attach__remove { min-height: 2.75rem; padding-inline: 0.85rem; font-size: var(--step-small); font-weight: 500; color: var(--muted); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.2em; }
.attach__remove:active { opacity: 0.55; }
@media (hover: hover) and (pointer: fine) { .attach__remove:hover { color: var(--ink); } }

/* ---------- Pflichtfelder, Fehler und Schadensmeldung (Beginn) ---------- */
.form__req { grid-column: 1 / -1; font-size: var(--step-small); color: var(--muted); }
.req { color: var(--gold-ink); font-weight: 600; }
.field__error { display: flex; align-items: flex-start; gap: 0.45rem; font-size: var(--step-small); font-weight: 500; line-height: 1.4; color: var(--err); }
.field__error::before { content: "!"; flex: none; display: grid; place-items: center; width: 1.15rem; height: 1.15rem; margin-top: 0.05rem; border-radius: 50%; background: var(--err); color: var(--dark-ink); font-size: 0.75rem; font-weight: 700; line-height: 1; }
.field.is-invalid input, .field.is-invalid select, .field.is-invalid textarea { border-color: var(--err); box-shadow: 0 0 0 1px var(--err); }
.field.is-invalid input:focus, .field.is-invalid select:focus, .field.is-invalid textarea:focus { border-color: var(--err); box-shadow: 0 0 0 2px var(--err); }
.check.is-invalid input { outline: 2px solid var(--err); outline-offset: 2px; }
.check__error { grid-column: 1 / -1; margin-top: -0.6rem; }
.form__summary { grid-column: 1 / -1; font-size: var(--step-small); font-weight: 600; color: var(--err); }
.damage { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem var(--gutter); }
.damage__row { display: grid; grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr); gap: 1.25rem var(--gutter); }
.form.is-sent .damage, .form.is-sent .form__req, .form.is-sent .form__summary, .form.is-sent .check__error { display: none; }
/* Am Handy etwas weniger Innenabstand im Auswahlfeld, damit „Facility Management / Schadensmeldung“ ab etwa 385 px Breite ganz passt */
@media (max-width: 47.99rem) { .field select { padding-left: 0.75rem; padding-right: 2.1rem; background-position: right 0.75rem center; } }
/* ---------- Pflichtfelder, Fehler und Schadensmeldung (Ende) ---------- */
.contact-grid { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.contact-grid__form { grid-column: 1 / span 7; }
.contact-grid__info { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 2.25rem; }
.info h3 { font-family: var(--font-display); font-size: 1.1875rem; font-weight: var(--display-weight); letter-spacing: -0.01em; margin-bottom: 0.5rem; }
.info .copy:last-child { border-bottom: 1px solid var(--line); }

/* ---------- Titel: Zeilen und Trennstriche ---------- */
.nav__link.is-active::after { transform: scaleX(1); }
.ch { display: inline-block; overflow: clip; overflow-clip-margin: 0.04em; vertical-align: top; padding: 0.14em 0 0.32em; margin: -0.14em 0 -0.32em; }
.ch > span { display: inline-block; }
.motion [data-chars]:not(.is-split) { opacity: 0; animation: show-late 1ms linear 2.5s forwards; }
.motion [data-chars] .ch > span { transform: translateY(150%); }
@keyframes show-late { to { opacity: 1; } }

/* Wörter steigen auf */
.motion [data-words] .split-word > span { transform: translateY(110%); }
.motion [data-words].is-in .split-word > span { transform: none; transition: transform 1000ms var(--ease-out); transition-delay: calc(var(--wi, 0) * 28ms); }

/* Hero-Elemente beim Laden */
.motion [data-load] { opacity: 0; transform: translateY(16px); animation: rise-in 800ms var(--ease-out) forwards; animation-delay: calc(500ms + var(--i, 0) * 70ms); }
@keyframes rise-in { to { opacity: 1; transform: none; } }

/* Projekte: gepinnter horizontaler Lauf (nur Desktop mit Maus) */
.track--pinned .track__sticky { position: sticky; top: 0; height: 100svh; display: flex; flex-direction: column; justify-content: center; padding-block: calc(var(--bar-total) + 0.5rem) 2rem; overflow: clip; }
.track--pinned .track__rail { width: max-content; overflow: visible; scroll-snap-type: none; will-change: transform; }
.track--pinned .card { width: min(44rem, calc((100svh - 17rem) * 4 / 3)); }

/* ---------- Einblendungen ---------- */
.motion [data-reveal] { opacity: 0; transform: translateY(28px); }
.motion [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 800ms var(--ease-out), transform 1000ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }
/* Bild öffnet sich von unten. Beschnitten wird das erste Kind, nicht die Figur selbst:
   ein IntersectionObserver sieht ein per clip-path verstecktes Element sonst nie. */
.motion .reveal-img[data-reveal] { opacity: 1; transform: none; }
.motion .reveal-img[data-reveal] > :first-child { clip-path: inset(100% 0 0 0); }
.motion .reveal-img[data-reveal] img:not([data-parallax]) { transform: scale(1.14); }
.motion .reveal-img[data-reveal].is-in > :first-child { clip-path: inset(0); transition: clip-path 1200ms var(--ease-in-out); transition-delay: calc(var(--i, 0) * 70ms); }
.motion .reveal-img[data-reveal].is-in img:not([data-parallax]) { transform: none; transition: transform 1600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 70ms); }

/* ---------- Tablet ---------- */
@media (max-width: 64rem) {
  .hh__lead, .hh__cta, .hh__intro { grid-column: 1 / span 7; }
  .hh__now { grid-column: 8 / span 5; }
  .about__statement { grid-column: 1 / -1; }
  .about__intro { grid-column: 1 / span 9; margin-top: 1.75rem; }

  .owners__body { grid-column: 6 / span 7; }
  .owners__people { grid-template-columns: 1fr; gap: 1.5rem; }
  .story__text { grid-column: 1 / -1; }
  .companies__head, .companies__list, .acc__head, .acc__list { grid-column: 1 / -1; }
  .companies__head { margin-bottom: 2rem; }
  .steps__list, .steps__list--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .person__lead, .person__card { grid-column: 1 / -1; }
  .person__card { max-width: 32rem; }
  .facts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pd-text__lead, .pd-text__body { grid-column: 1 / -1; }
  .pd-text__body { margin-top: 2rem; }
  .contact-grid__form, .contact-grid__info { grid-column: 1 / -1; }
  .contact-grid__info { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem var(--gutter); }
  .foot__col { grid-column: span 6; }
  .ph__lead, .ph__aside { grid-column: 1 / -1; }
  .duo--single .duo__half { flex-direction: column; align-items: flex-start; }
}

/* ---------- Kopfleiste: Menü statt Navigation ---------- */
@media (max-width: 60rem) {
  .nav { display: none; }
  .bar__menu { display: block; }
}

/* ---------- Telefon ---------- */
@media (max-width: 47.99rem) {
  :root { --bar-h: 4rem; --title-size: 11.5vw; }
  .brand__mark { width: 2.4rem; }
  .brand__name { font-size: 1.3rem; }
  .ptitle .w { display: block; }
  .ptitle .hy { display: inline; }

  .hh__scrim { background: linear-gradient(to top, rgba(26, 26, 25, 0.88) 0%, rgba(26, 26, 25, 0.62) 50%, rgba(26, 26, 25, 0.28) 78%, rgba(26, 26, 25, 0.4) 100%); }
  .hh__row { display: block; margin-bottom: 1rem; }
  .hh__now { width: 100%; margin-bottom: 1.5rem; }
  .hh__lead { font-size: 1.5rem; max-width: 20ch; }
  .hh__cta { margin-top: 0.4rem; }
  .hh__name { font-size: 11.2vw; }

  .about .grid { display: block; }
  .about__intro { margin-top: 1.5rem; }
  .about__cols { grid-template-columns: minmax(0, 1fr); margin-top: 2.5rem; }
  .about__col p { max-width: none; }
  .stats { grid-template-columns: 1fr 1fr; row-gap: 2rem; }
  .stat:last-child { grid-column: 1 / -1; }

  .areas__head { display: block; }
  .areas__head p { margin-top: 1rem; }
  .areas__body { display: block; }
  .area { grid-template-columns: minmax(0, 1fr); row-gap: 0.4rem; }
  .area__icon { display: none; }
  .area__name { font-size: 7.4vw; }

  .track__head { display: block; }
  .track__head > p { margin-top: 0.75rem; }
  .card { width: 84vw; }

  .owners .grid, .story .grid { display: block; }
  .owners__body { margin-top: 2.5rem; }
  .owners__people { margin-top: 2.25rem; }


  .duo__half { min-height: 0; gap: 2rem; padding-block: 3.5rem; }
  .duo--single .duo__half { gap: 2rem; }
  .duo__side { width: 100%; }

  .foot__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); overflow-wrap: anywhere; }
  .foot__col { grid-column: span 1; }

  .ph__crumb { margin-bottom: 1rem; }
  .ph__media { height: 58svh; }

  .svc-intro__lead, .svc-intro__text { grid-column: 1 / -1; }
  .svc-intro__text { margin-top: 2rem; }
  .steps__list, .steps__list--5 { grid-template-columns: 1fr; }
  .next__title { font-size: 8.4vw; flex-wrap: wrap; }

  .prow, .prow--flip { display: block; }
  .prow__text { margin-top: 1.5rem; }
  .prow__title { font-size: 9.6vw; }

  .facts-grid { gap: 1.5rem var(--gutter); }
  .fact__value { font-size: 1.2rem; }
  .pd-pair { grid-template-columns: 1fr; }

  .form { grid-template-columns: 1fr; }
  .contact-grid__info { grid-template-columns: 1fr; }
  .attach__drop { padding: 1rem; }
}

/* ---------- Unternehmensseite: Seitenkopf mit Text, danach Abstand zum Abschnitt darunter ---------- */
.page--unternehmen .ph { padding-bottom: clamp(3rem, 6vw, 5rem); }

/* ---------- Geschäftsbereichsseiten: kompakt, ohne großes Bild ---------- */
.page--bereich .ph { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.page--bereich .section { padding-block: clamp(3rem, 6vw, 5rem); }
.page--bereich .next { padding-block: clamp(2.5rem, 5vw, 4rem); }
.page--bereich .next__title { font-size: clamp(1.75rem, 3.6vw, 3.25rem); }
.ph__aside a { color: var(--ink); }@media (max-width: 64rem) and (min-width: 48rem) {
  .area { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .area__desc { grid-column: 1; }
  .area__icon { grid-column: 2; }
}

/* ---------- Logo oben links, Stand der Variante A: Zeichen und originale Wortmarke „Topcu Gruppe“ als zwei Bilder. In Variante B steht stattdessen das gestapelte Gesamtlogo (`.brand__logo`, siehe css/theme.css); die Regeln für `.brand__word` haben dort keine Wirkung. ---------- */
/* Das Zeichen liegt als schwarze Grafik vor, die Wortmarke als weiße (Original aus dem Logo); auf hellem Grund wird sie per Filter schwarz.
   Beide wechseln gemeinsam: Hell (Foto, Menü auf dunklem Grund): Zeichen weiß, Wortmarke weiß. Sonst: Zeichen schwarz, Wortmarke schwarz. */
.brand { gap: 0.7rem; }
.brand__mark { width: 3.6rem; }
.brand__word { width: auto; height: 3.35rem; filter: invert(1); transition: filter 320ms ease; }
.bar--light .brand__word { filter: none; }
.bar--solid .brand__word { filter: invert(1); }
.menu .brand__word { filter: none; }
@media (max-width: 47.99rem) {
  .brand { gap: 0.55rem; }
  .brand__mark { width: 2.9rem; }
  .brand__word { height: 2.7rem; }
}

/* ---------- „Kontakt“: kleiner als die übrigen Seitentitel (Kontaktseite und Abschluss jeder Seite) ---------- */
.page--kontakt .ph__title { font-size: clamp(2.5rem, 4.6vw, 4.25rem); }
.duo--single .duo__title { font-size: clamp(2.5rem, 4.2vw, 3.75rem); }
@media (max-width: 47.99rem) {
  .page--kontakt .ph__title { font-size: clamp(2.25rem, 9.5vw, 3rem); }
  .duo--single .duo__title { font-size: clamp(2.25rem, 9.5vw, 3rem); }
}

/* „seit“ vor der Jahreszahl in den Zahlen auf der Startseite */
.stat__pre { font-family: var(--font-display); font-weight: 500; font-size: 0.42em; letter-spacing: 0; margin-right: 0.35em; }

/* AI-Kennzeichen im sichtbaren Bildfenster, unabhaengig vom object-fit-Beschnitt. */
.ai-badge {
  position: absolute;
  z-index: 4;
  right: clamp(10px, 0.9vw, 14px);
  bottom: clamp(10px, 0.9vw, 14px);
  display: grid;
  place-items: center;
  width: clamp(21px, 1.8vw, 27px);
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 1px;
  background: rgba(19, 33, 48, 0.16);
  color: rgba(255, 255, 255, 0.62);
  font: 500 clamp(10px, 0.95vw, 14px)/1 Arial, sans-serif;
  letter-spacing: -0.03em;
  pointer-events: none;
}