/* Version 1-1: one theme per page; shared header and footer. */
body { min-height: 100vh; display: flex; flex-direction: column; }
body > main { flex: 1 0 auto; width: 100%; }
body > footer { flex: 0 0 auto; width: 100%; }
.header nav a[aria-current="page"] { color: var(--orange); text-decoration: underline; text-underline-offset: 9px; text-decoration-thickness: 2px; }
.thematic-page { background-image: var(--page-background, none); background-size: cover; background-position: center; }
.thematic-page > section { border-top: 0; }
.thematic-page > .hero { min-height: 570px; }
.thematic-page h1 { font-size: 40px; line-height: 1.2; font-weight: 400; letter-spacing: -1.2px; margin: 0; }
.thematic-page .hero h1 { font-size: clamp(40px,4.4vw,65px); line-height: 1.13; letter-spacing: -2.6px; margin: 0 0 25px; }
.thematic-page h1 span { color: #d4dbe0; }
.thematic-page .approach h1 { font-size: 38px; }
.thematic-page .contact h1 { font-size: 43px; }
.thematic-page .profile { padding-block: 84px; }
.thematic-page .practice { padding-top: 82px; }
@media(max-width:720px) {
  .thematic-page h1,.thematic-page .approach h1 { font-size: 31px; letter-spacing: -.8px; }
  .thematic-page .hero h1 { font-size: 42px; line-height: 1.17; }
  .thematic-page .contact h1 { font-size: 34px; }
  .thematic-page .profile { padding-block: 48px; }
  .thematic-page .practice { padding-top: 44px; }
}

/* Version 1-2: compact persistent footer, with measured content clearance. */
body { padding-bottom: var(--footer-height, 72px); }
html { scroll-padding-bottom: calc(var(--footer-height, 72px) + 16px); }
body > footer.wrap {
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  max-width: none;
  margin: 0;
  padding: 10px max(24px, calc((100% - 1212px) / 2));
  background: #424a52;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 24px;
  border-top: 1px solid var(--line);
  box-shadow: 0 -3px 12px #11182012;
}
body > footer > div:first-child {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
}
body > footer strong { font-size: 14px; white-space: nowrap; }
body > footer p { font-size: 11px; line-height: 1.45; margin: 0; }
body > footer .footer-links { gap: 18px; align-items: center; font-size: 12px; line-height: 1.5; }
@media(max-width:720px) {
  body > footer.wrap { padding: 8px 20px; gap: 6px 16px; }
  body > footer > div:first-child { gap: 4px 12px; }
  body > footer > div:first-child p { display: none; }
  body > footer strong { font-size: 13px; }
  body > footer .footer-links { gap: 16px; font-size: 11px; }
}

/* Version 1-3: keep introductory copy clear of the sphere's left-extending orbits. */
@media(min-width:721px) {
  body[data-page="start"] .hero-copy .intro {
    width: calc(100% - 100px);
    max-width: 430px;
  }
}

/* Version 1-4: one background tone and content-sized topic pages. */
:root { --site-background: #424a52; --paper: var(--site-background); }
html, body, .header, body > main, body > footer.wrap { background-color: var(--site-background); }
.thematic-page > section { background-color: transparent; }
body > main { min-width: 0; }
.thematic-page > .hero {
  min-height: calc(100dvh - var(--header-height, 120px) - var(--footer-height, 40px));
  padding-block: 24px;
}
.thematic-page .hero-original-sphere { height: 500px; }
.thematic-page > .approach,
.thematic-page > .profile,
.thematic-page > .contact { padding-block: 24px; }
.thematic-page .profile-facts { margin-block: 20px; }
.thematic-page .profile-facts > div { padding-block: 10px; }
@media(min-width:1001px) { .thematic-page .profile-grid { gap: 48px; } }
@media(min-width:721px) and (max-height:680px) {
  .thematic-page > .hero { padding-block: 12px; }
  .thematic-page .hero h1 { font-size: clamp(34px, 7dvh, 48px); }
  .thematic-page .hero-original-sphere {
    height: 400px;
    transform: scale(.8);
    transform-origin: center top;
  }
}
@media(max-width:720px) {
  .thematic-page > .hero { min-height: 0; }
  .thematic-page .hero-original-sphere { height: 480px; }
  .thematic-page > .approach,
  .thematic-page > .profile,
  .thematic-page > .contact { padding-block: 28px; }
  .thematic-page .profile-grid { gap: 26px; }
}

/* Leistungsueberschrift: zweite Zeile in Markenorange. */
body[data-page="leistungen"] .section-heading h1 span { color: var(--orange); }

/* Shared eyebrow start on all subpages; homepage intentionally excluded. */
:root { --topic-heading-gap: 24px; }
body:not([data-page="start"]) .thematic-page > section,
body[data-page="rechtliches"] > main.legal-page {
  padding-top: var(--topic-heading-gap);
}
@media(max-width:720px) { :root { --topic-heading-gap: 28px; } }

/* Projekterfahrung: zweite Zeile der Hauptueberschrift in Markenorange. */
body[data-page="projekterfahrung"] .section-heading h1 span { color: var(--orange); }
body[data-page="ueber-uns"] .profile h1 span { color: var(--orange); }

/* Version 1-8: Kopfzeile und Seiteninhalt verwenden dieselbe horizontale Achse. */
:root { --content-gutter: 64px; }
.header { padding-inline: max(var(--content-gutter), calc((100% - 1340px) / 2 + var(--content-gutter))); }
@media(max-width:1000px) { :root { --content-gutter: 32px; } }
@media(max-width:720px) { :root { --content-gutter: 24px; } }

/* Ueber uns: Texte vertikal im freien Bereich zwischen den Leisten zentrieren. */
@media(min-width:721px) {
  body[data-page="ueber-uns"] .thematic-page > .profile {
    min-height: calc(100dvh - var(--header-height, 120px) - var(--footer-height, 40px));
    display: flex;
    align-items: center;
    padding-block: 32px;
  }
  body[data-page="ueber-uns"] .profile-grid {
    width: 100%;
    align-items: start;
  }
}


/* Version 1-9: gemeinsamer oberer Textbeginn auf allen Seiten. */
:root { --page-text-top: 32px; }
body[data-page] .thematic-page > section,
body[data-page="rechtliches"] > main.legal-page {
  padding-top: var(--page-text-top);
}
body[data-page="start"] .thematic-page > .hero {
  align-items: start;
  padding-top: var(--page-text-top);
}
body[data-page="start"] .hero-copy { align-self: start; }
body[data-page="start"] .hero-art { align-self: center; }
body[data-page="ueber-uns"] .thematic-page > .profile {
  align-items: flex-start;
  padding-top: var(--page-text-top);
}
body[data-page="ueber-uns"] .profile-grid { margin-block: 0; }
@media(max-width:720px) { :root { --page-text-top: 28px; } }


/* Referenz ist die vertikale Position von Ueber Uns aus Version 1-8. */
:root {
  --reference-profile-height: 504.5px;
  --page-text-top: max(32px, calc((100dvh - var(--header-height, 120px) - var(--footer-height, 40px) - var(--reference-profile-height)) / 2));
}
@media(min-width:721px) and (max-width:1200px) {
  :root { --reference-profile-height: 610.5px; }
}
@media(max-width:720px) { :root { --page-text-top: 28px; } }

/* Bezeichnungen und Werte innerhalb jeder Profilzeile vertikal buendig. */
body[data-page="ueber-uns"] .profile-facts > div { align-items: center; }
body[data-page="ueber-uns"] .profile-facts dt { line-height: 1.5; }

/* Version 1-10: Einleitung Zusammenarbeit von 390 auf 487,5px verbreitert. */
body[data-page="zusammenarbeit"] .approach-copy { max-width: 487.5px; width: 100%; }
@media(min-width:721px) {
  body[data-page="zusammenarbeit"] .approach-grid { grid-template-columns: minmax(0,1.5fr) minmax(0,1fr); gap: clamp(45px,6vw,80px); }
}

/* Etwas mehr Platz fuer Projektmanagement in derselben Textzeile. */
body[data-page="zusammenarbeit"] .approach-copy { max-width: 550px; }
@media(min-width:721px) {
  body[data-page="zusammenarbeit"] .approach-grid { grid-template-columns: minmax(0,1.7fr) minmax(0,1fr); gap: clamp(32px,4vw,64px); }
}

/* Version 1-11: Fusszeile auf dieselben Aussenkanten wie Kopf und Inhalt ausrichten. */
body > footer.wrap {
  padding-inline: max(var(--content-gutter), calc((100% - 1340px) / 2 + var(--content-gutter)));
}
body > footer .footer-links { margin-left: auto; }
@media(max-width:360px) {
  .contact-grid > div { min-width: 0; }
  .contact h1 em { white-space: normal; }
  .contact-actions .button { max-width: 100%; font-size: 12px; }
  .legal-page h1 { overflow-wrap: anywhere; }
}

body[data-page="projekterfahrung"] .section-intro { max-width: none; }