/* Phase 4 Architektur – Seiten-CSS über dem Design-Kit (public/assets, unverändert).
   Palette: Bahars Farbwelt aus dem Briefing – warmes Off-White, Betongrau, helle Eiche, Graphit
   (start.mjs brand --bg #f4f1ea --ink #262624 --accent #7a5c3a --surface #e8e3d9 --muted #615d56). */
:root {
  --p-bg: #f4f1ea; --p-surface: #e8e3d9; --p-ink: #262624; --p-muted: #615d56;
  --p-accent: #7a5c3a; --p-accent-ink: #f4f1ea; --p-action: #7a5c3a; --p-action-ink: #f4f1ea;
  --p-inv-bg: #262624; --p-inv-surface: #323230; --p-inv-ink: #f4f1ea; --p-inv-muted: #9f9d98;
  --p-inv-accent: #f4f1ea; --p-inv-accent-ink: #262624; --p-inv-action: #f4f1ea; --p-inv-action-ink: #262624;
  --font-display: var(--font-albert), "Albert Sans", system-ui, sans-serif;
  --font-text: var(--font-albert), "Albert Sans", system-ui, sans-serif;
  --display-weight: 400;
  --display-tracking: -0.025em;
  --display-tracking-xl: -0.035em;
  /* helle Eiche und Betongrau für Zeichen und Linien (nie als Textfarbe) */
  --p4-oak: #b48a5a;
  --p4-concrete: #a7a39b;
}

/* Logo */
/* Wortmarke (Bahars Entwurf): Höhe statt Schriftgröße; ARCHITEKTUR bleibt so ab ca. 7 px Versalhöhe lesbar */
.nav__logo svg.p4-wordmark { height: 50px; width: auto; display: block; color: var(--ink); }
@media (max-width: 639px) { .nav__logo svg.p4-wordmark { height: 42px; } }
.p4-footer-logo { margin: 0 0 var(--s-2); }
.p4-wordmark--footer { height: 64px; width: auto; display: block; color: var(--ink); }

/* Bilder und Zeichnungen in Abschnitten */
.p4-pic { margin: 0; position: relative; overflow: clip; border-radius: var(--r-lg); background: var(--surface); min-width: 0; }
.p4-pic > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.p4-pic[data-kind="drawing"] { background: #ebe6dc; }
.p4-pic--fill { height: 100%; min-height: 420px; }
.p4-pic--ratio { aspect-ratio: 16 / 10; }
@media (max-width: 1023px) {
  .p4-pic--fill { height: auto; min-height: 0; aspect-ratio: 16 / 10; margin-top: var(--s-6); }
}
.close__media[data-kind="drawing"] { background: #ebe6dc; }

/* Zwei Spalten, Bild so hoch wie der Text */
.p4-split { align-items: stretch; }
.p4-split > .p4-pic { align-self: stretch; }

/* Listen ohne Aufzählungszeichen */
.p4-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); }
ol.rows, ul.rows { list-style: none; margin: 0; padding: 0; }
.rows__name small { display: block; font-weight: 400; color: var(--muted); font-size: var(--t-small); margin-top: 2px; }
.rows a.rows__name { text-decoration: none; color: inherit; }

/* Leistungsphasen-Nummer */
.p4-num { font: 400 var(--t-small)/1 var(--font-text); color: var(--muted); font-variant-numeric: tabular-nums; }

/* Was nicht angeboten wird: durchgestrichen, ruhig */
.p4-not > li .rows__name { color: var(--muted); font-weight: 400; }

/* Fakten unter dem Profil */
.p4-facts { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-3) var(--s-5); margin: 0; }
.p4-facts dt { color: var(--muted); font-size: var(--t-small); padding-top: 2px; }
.p4-facts dd { margin: 0; }
@media (max-width: 639px) { .p4-facts { grid-template-columns: 1fr; gap: var(--s-1); } .p4-facts dd { margin-bottom: var(--s-3); } }

/* Schritte */
.p4-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-7) var(--s-5); counter-reset: step; }
.p4-steps > li { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 1px solid var(--line); }
.p4-steps h3 { font: 500 var(--t-card)/1.3 var(--font-text); letter-spacing: 0; }
@media (max-width: 1023px) { .p4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .p4-steps { grid-template-columns: 1fr; gap: var(--s-5); } }

/* Seitenkopf der Unterseiten */
.p4-pagehead { padding-top: calc(var(--nav) + var(--s-9)); padding-bottom: var(--s-8); }
.p4-pagehead h1 { font: var(--display-weight) var(--t-h1)/1.05 var(--font-display); letter-spacing: var(--display-tracking); max-width: 18ch; }
.p4-pagehead .t-lead { margin-top: var(--s-5); max-width: 58ch; }
.p4-pagehead .p4-pic { margin-top: var(--s-8); height: clamp(220px, 36svh, 420px); }
@media (max-width: 639px) { .p4-pagehead { padding-top: calc(var(--nav) + var(--s-7)); } .p4-pagehead .p4-pic { height: auto; aspect-ratio: 16 / 10; } }

/* Fließtext auf Rechtsseiten */
.p4-prose { max-width: 72ch; display: grid; gap: var(--s-4); }
.p4-prose h2 { font: var(--display-weight) var(--t-h3)/1.2 var(--font-display); letter-spacing: var(--display-tracking); margin-top: var(--s-6); }
.p4-prose h3 { font: 500 var(--t-card)/1.3 var(--font-text); margin-top: var(--s-4); }
.p4-prose ul { margin: 0; padding-left: 1.2em; display: grid; gap: var(--s-2); }
.p4-prose a { color: var(--action); }

/* Deutlich markierte Platzhalter für fehlende Pflichtangaben (nur bis zur Freigabe) */
.p4-missing { background: #f3e2b8; color: #5a3f00; padding: 0 6px; border-radius: 4px; font-weight: 500; }
.p4-note { border: 2px dashed #b88a1d; background: #faf0d6; border-radius: var(--r-md); padding: var(--s-5); display: grid; gap: var(--s-2); }

/* Anfrageformular (eigene Logik in React, Aussehen wie das Formular des Kits) */
.p4-form { display: grid; gap: var(--s-5); }
.p4-form .p4-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5); }
@media (max-width: 639px) { .p4-form .p4-row { grid-template-columns: 1fr; } }
.p4-form fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: var(--s-3); min-width: 0; }
.p4-form legend { font: 500 14px/1.4 var(--font-text); margin-bottom: var(--s-2); padding: 0; }
.p4-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2) var(--s-5); }
@media (max-width: 639px) { .p4-checks { grid-template-columns: 1fr; } }
.p4-check { display: flex; gap: var(--s-3); align-items: flex-start; min-height: 44px; padding-block: 10px; cursor: pointer; font-size: 16px; line-height: 1.4; }
.p4-check input { width: 20px; height: 20px; margin: 1px 0 0; flex: none; accent-color: var(--action); }
.p4-form textarea { min-height: 160px; resize: vertical; }
.p4-form input[type="file"] { padding: 10px; height: auto; min-height: 48px; }
.p4-hint { font-size: var(--t-small); color: var(--muted); }
.p4-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.p4-success { border-left: 3px solid var(--action); padding: var(--s-4) var(--s-5); background: var(--surface); border-radius: var(--r-md); display: grid; gap: var(--s-2); }
.p4-error-box { border-left: 3px solid #a3322b; padding: var(--s-4) var(--s-5); background: #f6e3df; border-radius: var(--r-md); }

/* Fragen-Seite: Fragen als h2, gesetzt wie die Fragen des Kits */
.faq .p4-faq-q { font: 500 var(--t-lead)/1.4 var(--font-text); letter-spacing: 0; }
/* Ergänzende Leistungen */
.p4-extra { padding-top: var(--s-4); border-top: 1px solid var(--line); align-content: start; }
@media (max-width: 1023px) { .p4-extra { grid-column: 1 / -1; } }

/* Lange deutsche Wörter (Genehmigungsplanung) dürfen auf schmalen Bildschirmen trennen */
h1, h2, h3 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.grid > * { min-width: 0; }

/* Smartphone: Logo und Menü in der Kopfzeile, die Hauptaktion steht im geöffneten Menü (wie die Kit-Regel mit Aktionsleiste) */
@media (max-width: 639px) {
  .nav:not(.is-open) .nav__actions { display: none; }
  .nav:not(.is-open) .nav__bar > .nav__actions + .nav__toggle { margin-left: auto; }
}
/* Splits: Bild so hoch wie der ganze Abschnitt */
main > .section > .wrap.p4-split { align-content: stretch; }