/* Topcu Gruppe, Runde 6, Variante B „Stein & Bronze“
   Wird nach style.css geladen und überschreibt nur Farben (und die Fokus-Darstellung). Layout und Schrift stehen in style.css.
   Idee: komplett hell. Kühles, helles Stein-Beige als Seite, helles Taupe statt dunkler Blöcke (Fuß, Menü, Projekte, Kontakt-Abschluss, Seitenwechsel),
   Text in warmem Braungrau, Bronze statt Gold als feiner Akzent. Nur Texte über Fotos bleiben hell (Startbild, Projekt-Köpfe, Kopfleiste über Fotos).
   Kein Schwarz in der Oberfläche: kleinste Helligkeit (0-255) aller Flächen und Texte ist 54 (Text). */

:root {
  /* Flächen */
  --bg: #f2efea;          /* helles Stein-Beige: Seite */
  --surface: #e8e3db;     /* abgesetzte Abschnitte, Karten */
  --surface-2: #dad3c8;   /* Bildplatzhalter, Hover */
  --taupe: #d2c8ba;       /* ersetzt die dunklen Blöcke: Projekte, Kontakt-Abschluss, Menü, Seitenwechsel */
  --taupe-2: #c9beaf;     /* Hover auf Taupe */
  --taupe-deep: #c6bbab;  /* Fuß */
  /* Text und Linien */
  --ink: #3f352c;         /* warmes Braungrau statt Schwarz */
  --muted: #5f554b;       /* Grauton für Nebentexte (6,3:1 auf Stein, 4,9:1 auf Fläche 2) */
  --line: #d9d2c7;        /* feine Trennlinien (nur Dekoration) */
  --field-line: #85786a;  /* Rahmen von Eingabefeldern (3,7:1 auf Stein) */
  /* Die bisherigen „dunklen“ Töne sind hier hell: Taupe mit dunklem Text. Über Fotos werden sie unten lokal wieder hell gesetzt. */
  --dark: var(--taupe);
  --dark-2: var(--taupe-2);
  --dark-ink: var(--ink);
  --dark-muted: #4c4238;  /* Nebentext auf Taupe (5,9:1) */
  /* Bronze statt Gold: sparsam. --gold für Hover und Akzente auf Taupe, --gold-ink für Text und Fokus auf hellem Grund, --gold-line für feine Linien */
  --gold: #7a5226;
  --gold-ink: #78501f;
  --gold-line: #a98558;
  --err: #8a3a2b;
  /* Bedienelemente */
  --btn: #7a5226;         /* Bronze-Braun */
  --btn-hover: #8c6330;
  --btn-ink: #f6f2ea;
  --focus: #78501f;       /* Fokusring auf hellem Grund */
  --focus-on-photo: #f2dcae; /* Fokusring über Fotos */
  /* Warmes Braun für Scrims, Schatten und Bildunterschriften über Fotos (statt Schwarz) */
  --shade-rgb: 62, 48, 38;
}

/* Über Fotos (Startbild, Projekt-Köpfe, Kopfleiste über dem Foto) bleibt der Text hell und das Gold hell */
.hh, .pd-hero, .bar--light {
  --dark: #4a3b2e;
  --dark-2: #5a4a3c;
  --dark-ink: #fbf7f0;
  --dark-muted: #ebe2d3;
  --gold: #e2c28f;
}

/* ---------- Bedienelemente ---------- */
.skip { background: var(--btn); color: var(--btn-ink); }
.button { background: var(--btn); color: var(--btn-ink); }
.button--light { background: var(--bg); color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background: var(--btn-hover); box-shadow: inset 0 -2px 0 var(--gold-line); }
  .button--light:hover { background: #fff; box-shadow: inset 0 -2px 0 var(--gold-ink); }
}
.bar--light .bar__cta { background: var(--bg); color: var(--ink); }
.bar--solid .bar__cta { background: var(--btn); color: var(--btn-ink); }
.attach__btn { background: var(--btn); color: var(--btn-ink); }

/* Sichtbarer Tastaturfokus: Bronze auf hellem Grund, helles Gold über Fotos */
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }
.hh :focus-visible, .pd-hero :focus-visible, .bar--light :focus-visible { outline-color: var(--focus-on-photo); }
.bar--light .dd__panel :focus-visible { outline-color: var(--focus); }

/* ---------- Kopfleiste, Menü, Seitenwechsel: hell ---------- */
.bar--solid { background: var(--bg); box-shadow: 0 1px 0 var(--gold-line); }
.menu { background: var(--taupe); color: var(--ink); }
.menu .brand__mark { filter: none; }
.menu .brand__word { filter: invert(1); }
.menu__sub { border-left-color: var(--gold-line); }
.curtain { background: var(--taupe); }
.curtain img { filter: none; }
.curtain i { background: var(--gold-line); }

/* ---------- Startseite: Projekte, Kontakt-Abschluss, Fuß in hellem Taupe ---------- */
.track { background: var(--taupe); color: var(--ink); }
.card__media { background: var(--taupe-2); }
.card__meta { color: var(--dark-muted); }
.card__note { color: var(--dark-muted); }
.duo { background: var(--taupe); color: var(--ink); }
.duo__text { color: var(--dark-muted); }
@media (hover: hover) and (pointer: fine) { .duo__half:hover { background: var(--taupe-2); } }
.foot { background: var(--taupe-deep); color: var(--ink); border-top: 1px solid var(--gold-line); }
.foot__col, .foot__legal { color: var(--dark-muted); }
/* Spaltenüberschriften im Fuß: kräftiger, in der dunklen Textfarbe, etwas mehr Abstand zu den Links darunter */
.foot__first { color: var(--ink); font-weight: 600; margin-bottom: 0.75rem; }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.2em; }
.on-dark { background: var(--taupe); color: var(--ink); }
.on-dark .muted, .on-dark .soft { color: var(--dark-muted); }
.step { border-top-color: var(--gold-line); }
.on-dark .step p { color: var(--dark-muted); }

/* ---------- Kopfleiste über Fotos: weicher brauner Schleier hinter Logo und Menü, damit der weiße Schriftzug auch vor hellem Himmel lesbar bleibt ---------- */
.bar--light { background-image: linear-gradient(to bottom, rgba(var(--shade-rgb), 0.4), rgba(var(--shade-rgb), 0)); }

/* ---------- Scrims, Schatten, Bildunterschriften über Fotos: warmes Braun statt Schwarz ---------- */
.ph__media figcaption { background: rgba(var(--shade-rgb), 0.58); color: var(--dark-ink); }
.dd__panel { box-shadow: 0 18px 50px rgba(var(--shade-rgb), 0.14); }
.hh__scrim { background: radial-gradient(ellipse 70% 45% at 18% 72%, rgba(var(--shade-rgb), 0.44), transparent 100%), linear-gradient(to top, rgba(var(--shade-rgb), 0.8) 0%, rgba(var(--shade-rgb), 0.34) 42%, rgba(var(--shade-rgb), 0.14) 70%, rgba(var(--shade-rgb), 0.42) 100%); }
@media (max-width: 47.99rem) {
  .hh__scrim { background: linear-gradient(to top, rgba(var(--shade-rgb), 0.9) 0%, rgba(var(--shade-rgb), 0.64) 50%, rgba(var(--shade-rgb), 0.3) 78%, rgba(var(--shade-rgb), 0.42) 100%); }
}

/* ---------- Formulare ---------- */
.field input, .field select, .field textarea { border-color: var(--field-line); background-color: var(--bg); color: var(--ink); }
.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='%233f352c' stroke-width='1.5'/%3E%3C/svg%3E"); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.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); }
.field__error::before { color: var(--bg); }
.form__error, .attach__error { color: var(--err); }
.attach__drop { border-color: var(--field-line); }
.attach__drop:focus-within { border-color: var(--focus); box-shadow: 0 0 0 1px var(--focus); }
.check input { accent-color: var(--btn); }

/* ---------- Logo oben links: Original-Logo, Zeichen über „Topcu Gruppe“ ---------- */
/* Zur Ansicht jetzt Größe A: 64 px, Kopfleiste 80 px; Handy 56 px, Kopfleiste 72 px.
   Zurück zu Größe B: 84 px / --bar-h 6.25rem; Handy 68 px / --bar-h 5.25rem. */
/* Die Datei ist weiß; auf hellem Grund (Leiste, Menü) per Filter schwarz, über Fotos weiß wie im Original. */
:root { --bar-h: 5rem; }
.brand__logo { display: block; height: 64px; width: auto; filter: invert(1); transition: filter 320ms ease; }
.bar--light .brand__logo { filter: none; }
.bar--solid .brand__logo, .menu .brand__logo { filter: invert(1); }
@media (max-width: 47.99rem) {
  :root { --bar-h: 4.5rem; }
  .brand__logo { height: 56px; }
}

/* ---------- Abstände und Breite: weniger leerer Raum (Nachbesserung) ----------
   1) Inhaltsbreite: ab 1440 px wächst der Rand mit, der Inhalt bleibt höchstens 90 rem breit und steht in der Mitte (statt bis an die Ränder gezogen zu werden).
      Fast alles in style.css rechnet mit --m (Seitenrand), deshalb genügt es, --m hier anzupassen.
   2) Abschnittsabstände knapper, Seitenköpfe niedriger, Kontakt-Abschluss kompakt, Pfeil direkt am Titel, kleineres Porträt-Feld. */
:root {
  --maxw: 90rem;
  --m: max(clamp(1rem, 2vw, 2rem), calc((100vw - var(--maxw)) / 2));
  --section: clamp(3.5rem, 6vw, 6rem);
}

/* Seitenköpfe */
.ph { padding-top: calc(var(--bar-total) + clamp(1rem, 2.5vw, 2.25rem)); }
.ph__crumb { margin-bottom: clamp(0.75rem, 1.6vw, 1.5rem); }
.ph__row { margin-top: clamp(0.75rem, 1.6vw, 1.5rem); row-gap: 1rem; }
.page--unternehmen .ph { padding-bottom: clamp(2rem, 4vw, 3.5rem); }
.page--bereich .ph { padding-bottom: clamp(2rem, 3.5vw, 3rem); }
.page--bereich .section { padding-block: clamp(2.25rem, 4vw, 3.5rem); }
.person { align-items: start; row-gap: 1.5rem; }

/* Kontakt-Abschluss: Titel und Text zusammen, links gesetzt, mit begrenzter Textbreite statt an den äußersten Rändern */
.duo--single .duo__half { display: grid; grid-template-columns: auto minmax(0, 1fr); justify-content: start; align-items: center; column-gap: clamp(2.5rem, 7vw, 7rem); row-gap: 1.25rem; min-height: 0; padding-block: clamp(2.25rem, 4.5vw, 3.75rem); }
.duo--single .duo__side { width: auto; max-width: 52rem; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 0.5rem; }
.duo--single .duo__title { padding-bottom: 0; }
.duo--single .duo__text { max-width: none; }
.duo--single .duo__text--small { margin-top: 0.5rem; }
.duo--single .duo__side .arrow { margin-top: 0.5rem !important; }
/* Ab 64 rem: Text links, Adresse und „Anfrage senden“ daneben, so bleibt die Zeile niedrig und füllt die Breite sinnvoll */
@media (min-width: 64.01rem) {
  .duo--single .duo__side { grid-template-columns: minmax(0, 26rem) minmax(0, 19rem); column-gap: 3.5rem; align-items: start; }
  .duo--single .duo__text:not(.duo__text--small) { grid-column: 1; grid-row: 1 / span 2; }
  .duo--single .duo__text--small { grid-column: 2; grid-row: 1; margin-top: 0.35rem; }
  .duo--single .duo__side .arrow { grid-column: 2; grid-row: 2; justify-self: start; }
}

/* „Nächster Bereich / Nächste Immobilie“: Pfeil direkt hinter dem Titel */
.next { padding-block: clamp(2rem, 4vw, 3.5rem); }
.page--bereich .next { padding-block: clamp(2rem, 4vw, 3rem); }
.next__label { margin-bottom: 0.5rem; }
.next__title { justify-content: flex-start; gap: clamp(1rem, 2.5vw, 2rem); }

/* Startseite und Unternehmen */
.about__cols { margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 64.01rem) {
  .about__intro { grid-column: 8 / span 5; }
  .area { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) auto; }
}
.stats { margin-top: clamp(2.5rem, 5vw, 4rem); }
.areas__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.track__head { margin-bottom: clamp(1.25rem, 2.5vw, 2.25rem); }
.owners__head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
/* Porträts der Geschäftsführung: zwei gleich große Karten (4:5) nebeneinander, Name und Rolle darunter, Text daneben */
.owners__portraits { grid-column: 1 / span 7; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.9rem, 2vw, var(--gutter)); align-items: start; }
.owners__body { grid-column: 9 / span 4; align-self: start; }
.owner { margin: 0; }
.owners__slot img.owners__portrait { object-position: 50% 28%; }
.owner__cap { margin-top: 1.1rem; }
.owners__name { font-size: clamp(1.15rem, 1.6vw, 1.375rem); line-height: 1.2; }
.owners__role { margin-top: 0.25rem; margin-bottom: 0; font-size: 0.9375rem; line-height: 1.35; }
.owner__bio { margin-top: 0.9rem; max-width: 40ch; }
/* Platzhalter für ein noch fehlendes Foto: gleiches Format und gleicher Rahmen wie das spätere Foto */
.owners__slot--empty { background: radial-gradient(120% 85% at 50% 32%, #e6dfd4 0%, var(--surface-2) 52%, var(--taupe) 100%); }
.owners__slot--empty::before { content: ''; position: absolute; inset: 0.8rem; border: 1px solid var(--gold-line); opacity: 0.5; pointer-events: none; }
.owners__slot--empty .owners__slotmark { width: 36%; opacity: 0.26; margin-top: -8%; }
.owners__slot--empty .owners__slotnote { left: 0; right: 0; bottom: 1.5rem; text-align: center; color: var(--dark-muted); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; }
/* Unter 72 rem (Tablet, Handy): Karten oben mit begrenzter Breite, Text darunter */
@media (max-width: 72rem) {
  .owners__portraits { grid-column: 1 / -1; max-width: 44rem; }
  .owners__body { grid-column: 1 / -1; margin-top: clamp(2rem, 4vw, 2.75rem); }
}
/* Handy: bei „Unternehmen“ stehen die Karten mit Kurztext untereinander, auf der Startseite bleiben sie zu zweit nebeneinander */
@media (max-width: 47.99rem) {
  .owners--full .owners__portraits { grid-template-columns: minmax(0, 1fr); row-gap: 2.5rem; max-width: 26rem; }
}
.companies__title { margin-bottom: clamp(1.25rem, 2.5vw, 2rem); }

/* Immobilien-Übersicht und Projektseiten (die Überschriften haben feste Abstände im Markup, daher !important) */
.plist { gap: clamp(3rem, 6vw, 5rem); }
.facts-grid { gap: 1.75rem var(--gutter); }
#facts-h, #pd-img { margin-bottom: clamp(1.25rem, 2.5vw, 2rem) !important; }
#form-h { margin-bottom: 1.25rem !important; }

/* Fuß */
.foot { padding-top: clamp(2.5rem, 5vw, 4rem); }
.foot__cols { row-gap: 1.75rem; }
.foot__legal { margin-top: clamp(2rem, 4vw, 3.5rem); }

@media (max-width: 47.99rem) {
  .duo--single .duo__half { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; padding-block: 2.25rem; }
  .next__title { gap: 0.75rem; }
}

/* ---------- Rechtstexte: Impressum und Datenschutzerklärung (Seiten impressum.html und datenschutz.html) ----------
   Schmale Lesespalte, ruhige Überschriften, gut lesbarer Fließtext. Alles Weitere (Farben, Fokus) erbt von den Seiten. */
.page--recht .ph { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page--recht .section { padding-block: clamp(1.5rem, 3vw, 2.5rem) var(--section); }
.legal__text { max-width: 50rem; font-size: 1.0625rem; line-height: 1.65; }
.legal__text > :first-child { margin-top: 0; }
.legal__text h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; text-wrap: balance; scroll-margin-top: calc(var(--bar-total) + 1rem); }
.legal__text h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.15rem; line-height: 1.3; margin: 1.75rem 0 0.5rem; }
.legal__text p, .legal__text ul, .legal__text ol, .legal__text dl, .legal__text address { margin: 0 0 1rem; }
.legal__text address { font-style: normal; }
.legal__text ul, .legal__text ol { padding-left: 1.25rem; }
.legal__text li { margin-bottom: 0.4rem; }
.legal__text li::marker { color: var(--gold-ink); }
.legal__text dl { display: grid; grid-template-columns: minmax(9rem, max-content) minmax(0, 1fr); gap: 0.35rem 1.5rem; }
.legal__text dt { color: var(--muted); }
.legal__text dd { margin: 0; }
.legal__text a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) { .legal__text a:hover { text-decoration-color: currentColor; } }
.legal__stand { color: var(--muted); font-size: var(--step-small); }
/* .legal__note: dauerhafter Hinweiskasten (zum Beispiel das Widerspruchsrecht) */
.legal__note { padding: 1rem 1.25rem; background: var(--surface); border-left: 3px solid var(--gold-line); color: var(--ink); }
.legal__toc { margin: 0 0 1.5rem; padding: 1rem 1.25rem; background: var(--surface); }
.legal__toc ol { margin: 0; padding-left: 1.25rem; columns: 2 18rem; column-gap: 2rem; }
.legal__toc li { margin-bottom: 0.25rem; break-inside: avoid; }
/* Offene Stellen im Entwurf: gut sichtbar, damit sie vor dem Livegang nicht übersehen werden */
.legal__open { background: rgba(122, 82, 38, 0.14); color: var(--ink); padding: 0.05em 0.35em; outline: 1px dashed var(--gold-line); }
@media (max-width: 47.99rem) { .legal__text dl { grid-template-columns: minmax(0, 1fr); gap: 0; } .legal__text dt { margin-top: 0.6rem; } .legal__toc ol { columns: 1; } }
/* Einwilligung im Kontaktformular: Link zur Datenschutzerklärung gut erkennbar */
.check a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.2em; }

/* Folienbeschriftung im Startbild (zweite Angabe, zum Beispiel der Ort): kräftiger, damit sie auf dem Foto lesbar bleibt */
.hh__caption span + span { color: rgba(251, 247, 240, 0.92); text-shadow: 0 1px 2px rgba(var(--shade-rgb), 0.55); }

/* Hinweistext über dem Senden-Knopf (ersetzt das Pflicht-Häkchen) */
.form__note { grid-column: 1 / -1; margin: 0; font-size: var(--step-small); color: var(--muted); }
.form__note a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.2em; }
.form.is-sent .form__note { display: none; }

/* ---------- Porträts der Geschäftsführung: sofort laden und kurz einblenden (sonst wirkt das Foto verzögert) ---------- */
.motion .owner.reveal-img[data-reveal] img:not([data-parallax]) { transform: scale(1.03); }
.motion .owner.reveal-img[data-reveal].is-in > :first-child { transition: clip-path 600ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }
.motion .owner.reveal-img[data-reveal].is-in img:not([data-parallax]) { transition: transform 800ms var(--ease-out); transition-delay: calc(var(--i, 0) * 60ms); }

/* ============================================================================
   Hinweisfenster des Kontaktformulars (Übergangsmodus, FORM_MODE in src/site.mjs; 11.11.2026)
   Natives <dialog> (showModal): Fokus bleibt im Fenster, Esc schließt, der Hintergrund ist gesperrt. Stein und Bronze, Jost und DM Sans.
   ============================================================================ */
.dialog { margin: auto; padding: 0; width: min(36rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); overflow: auto; border: 0; border-top: 2px solid var(--gold-line); background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px rgba(var(--shade-rgb), 0.28); }
.dialog::backdrop { background: rgba(62, 48, 38, 0.4); }
.dialog [hidden] { display: none !important; }
.dialog__panel { position: relative; padding: clamp(1.5rem, 4vw, 2.5rem); padding-top: clamp(2.25rem, 5vw, 3rem); }
.dialog__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem); line-height: 1.15; letter-spacing: -0.015em; text-wrap: balance; margin: 0 2rem 1rem 0; outline: none; }
.dialog__title::before { content: ""; display: block; width: 2.5rem; height: 1px; margin-bottom: 1.25rem; background: var(--gold-line); }
.dialog__panel p { margin: 0 0 0.85rem; max-width: 56ch; }
.dialog__mail { font-weight: 500; overflow-wrap: anywhere; user-select: all; }
.dialog__note { font-size: var(--step-small); color: var(--muted); padding: 0.65rem 0.85rem; background: var(--surface); border-left: 2px solid var(--gold-line); }
.dialog__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1.5rem; }
.dialog__actions .button { white-space: normal; text-align: center; }
.button--quiet { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--field-line); }
@media (hover: hover) and (pointer: fine) { .button--quiet:hover { background: var(--surface); box-shadow: inset 0 0 0 1px var(--ink); } }
.dialog__plain { min-height: 3.25rem; padding: 0 0.5rem; background: none; border: 0; color: var(--ink); font: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--gold-line); text-underline-offset: 0.22em; }
.dialog__status { min-height: 1.5rem; margin: 0.9rem 0 0 !important; font-size: var(--step-small); color: var(--muted); }
.dialog__x { position: absolute; top: 0.4rem; right: 0.4rem; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; background: none; border: 0; color: var(--ink); cursor: pointer; }
.dialog__x span { position: relative; width: 1.1rem; height: 1.1rem; }
.dialog__x span::before, .dialog__x span::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; }
.dialog__x span::before { transform: rotate(45deg); }
.dialog__x span::after { transform: rotate(-45deg); }
@media (hover: hover) and (pointer: fine) { .dialog__x:hover { color: var(--gold-ink); } }
@keyframes dialog-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes dialog-fade { from { opacity: 0; } to { opacity: 1; } }
.motion .dialog[open] { animation: dialog-in 320ms var(--ease-out); }
.motion .dialog[open]::backdrop { animation: dialog-fade 260ms ease; }
@media (max-width: 30rem) {
  .dialog__actions { flex-direction: column; align-items: stretch; }
  .dialog__actions .button, .dialog__plain { width: 100%; }
}

/* ============================================================================
   Keine Überlagerung über Fotos (10.11.2026, Wunsch des Nutzers: „überall entfernen“; vorher nur Startseite, Abschnitt „Startbild ohne Goldton“)
   Auf allen Seiten liegt über Fotos und Video weder ein Verlauf noch eine getönte Fläche. Entfernt sind:
   - .hh__scrim: der braune Verlauf über dem Startbild und über den Köpfen der Projektseiten (.pd-hero),
   - .bar--light: der braune Verlauf hinter der Kopfleiste über Fotos (alle Seiten mit Foto im Kopf),
   - .ph__media figcaption: die getönte Fläche hinter Bildunterschriften im Seitenkopf (zurzeit auf keiner Seite genutzt).
   Es wird nichts hinzugefügt (kein Ersatz-Verlauf, kein Textschatten), alle Farben und Theme-Werte (--shade-rgb) bleiben unverändert.
   Das „AI“-Zeichen auf KI-Bildern bleibt: Es ist die Kennzeichnung, keine Überlagerung.
   RÜCKGÄNGIG MACHEN: diesen Abschnitt löschen, dann gelten wieder die braunen Verläufe der Abschnitte „Kopfleiste über Fotos“ und
   „Scrims, Schatten und Bildunterschriften über Fotos“ weiter oben in dieser Datei.
   ============================================================================ */
.hh__scrim { background: none; }
.bar--light { background-image: none; }
.ph__media figcaption { background: none; }

/* ============================================================================
   Keine Wörter mitten im Wort umbrechen (11.11.2026, Fehler auf einem echten Handy mit großer Systemschrift)
   Auf schmalen Bildschirmen (und bei vergrößerter Schrift) brachen Wörter im Fuß mitten im Wort um („Geschäftsbereich“ / „e“, „Bestandsverwaltun“ / „g“,
   „info@topcu-“ / „gruppe.de“). Ursache: zwei feste Spalten im Fuß und `overflow-wrap: anywhere`. Jetzt:
   - Fuß und Eckdaten: so viele Spalten, wie mit der Schrift sicher passen (auto-fit, Mindestbreite in rem, wächst also mit der Systemschrift); sonst eine Spalte.
   - Kein `overflow-wrap: anywhere` mehr bei Fuß, Eckdaten, Kopierzeilen und der Adresse im Hinweisfenster.
   - E-Mail-Adressen: Umbruch höchstens nach dem @ (`mailHtml()` in src/site.mjs setzt `<wbr>` und `.nobr`).
   RÜCKGÄNGIG MACHEN: diesen Abschnitt löschen (die Anzeige der Adressen mit `.nobr` bleibt dann ohne Wirkung).
   ============================================================================ */
.nobr { white-space: nowrap; }
.copy span, .fact__value, .dialog__mail { overflow-wrap: normal; }
.copy { flex-wrap: wrap; }
@media (max-width: 47.99rem) {
  /* Am Handy immer einspaltig: Die Schriftvergrößerung von Android/iOS vergrößert die Schrift, aber nicht rem/Spaltenbreiten,
     deshalb würde auto-fit dort zwei Spalten bilden und lange Wörter trennen (auf echtem Gerät gesehen, 11.11.2026). */
  .foot__cols { grid-template-columns: 1fr; overflow-wrap: normal; row-gap: 2rem; }
  .foot__col, .foot__first { hyphens: manual; word-break: normal; }
  .foot__col { grid-column: auto; }
  .facts-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13.5rem), 1fr)); }
}

/* ============================================================================
   Nichts abschneiden bei großer Systemschrift (11.11.2026, zweiter Teil des Umbruch-Fehlers)
   Bei 320 bis 390 px und Systemschrift 125 bis 130 % ragten Texte über den rechten Rand und wurden abgeschnitten: Kennzahlen („598“ statt „600+“), Gesellschaftenliste
   (Rolle rechts abgeschnitten), Brotkrumen, Zitat, einzelne Überschriften, Schaltfläche „Anfrage senden“, sehr lange Wörter im Rechtstext.
   - Brotkrumen dürfen in die nächste Zeile umbrechen.
   - Kennzahlen und Gesellschaftenliste: so viele Spalten, wie mit der Schrift sicher passen (Mindestbreite in rem, wächst mit der Systemschrift), sonst eine Spalte.
   - Zitat, Abschnittsüberschriften, Menüpunkte, Namen im Kontaktkasten, Rechtstext-Überschriften, „Nächster Bereich“: Schrift nie größer als bisher, aber so begrenzt, dass das längste Wort in die Zeile passt
     (Breite des Bildschirms abzüglich Seitenrand, geteilt durch die Länge des längsten Wortes in Schrifthöhen). Bei normaler Schrift ändert sich nichts.
   - Schaltflächen dürfen auf schmalen Bildschirmen in zwei Zeilen umbrechen.
   - Rechtstext: weiche Trennstellen in sehr langen Wörtern (`SHY_WORDS` in src/pages.mjs).
   RÜCKGÄNGIG MACHEN: diesen Abschnitt löschen (und `SHY_WORDS`/`shy()` in src/pages.mjs entfernen).
   ============================================================================ */
.ph__crumb, .pd-hero__crumb { flex-wrap: wrap; row-gap: 0.15rem; }
.copy button { margin-left: -0.75rem; } /* rutscht „Kopieren“ bei großer Schrift in die nächste Zeile, steht sein Text bündig mit der Zeile darüber */
@media (max-width: 47.99rem) {
  .stats { grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.75rem), 1fr)); }
  .company { grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr)); }
  .h-section { font-size: min(var(--step-head), calc((100vw - 2 * var(--m)) / 8.3)); }
  .owners__quote p { font-size: min(var(--step-statement), calc((100vw - 2 * var(--m)) / 11.5)); }
  .legal__text h2 { font-size: min(clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem), calc((100vw - 2 * var(--m)) / 12.3)); }
  .page--bereich .next__title { font-size: min(clamp(1.75rem, 3.6vw, 3.25rem), calc((100vw - 2 * var(--m)) / 8.8)); }
  .person__card h3 { font-size: min(var(--step-lead), calc((100vw - 2 * var(--m) - 3rem) / 8.8)); }
  .menu__nav > a { font-size: min(clamp(2rem, 9.4vw, 3.6rem), calc((100vw - 2 * var(--m)) / 8.2)); }
  .button { white-space: normal; text-align: center; max-width: 100%; padding-block: 0.6rem; }
}