@import url("./tokens.css");

/* Helle Firmenpalette entsprechend der gewünschten Gestaltung. */
:root {
  --bg: #edf5fc;
  --fg: #17354e;
  --fg-mute: #425f76;
  --accent: #27649b;
  --accent-hover: #194d7b;
  --accent-on: #ffffff;
  --surface: #ffffff;
  --hairline: #c6d9e8;
  --notice-bg: #e0edf7;
  --font-display: var(--font-body);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: var(--space-8); }
body { font-size: var(--type-h3); line-height: 1.7; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--accent); outline-offset: var(--space-2); }
::selection { background: var(--hairline); color: var(--fg); }
.wrap { width: min(calc(100% - var(--space-8) * 2), calc(var(--space-8) * 28)); margin-inline: auto; }
.skip { position: absolute; top: var(--space-2); left: var(--space-2); transform: translateY(-200%); padding: var(--space-3); background: var(--surface); z-index: 5; }
.skip:focus { transform: translateY(0); }
.header { display: flex; align-items: center; justify-content: space-between; padding-block: var(--space-6); border-bottom: 1px solid var(--hairline); gap: var(--space-6); }
.brand { display: flex; align-items: center; gap: var(--space-3); font-weight: var(--w-semi); white-space: nowrap; line-height: 1.3; }
.brand svg { width: var(--space-8); height: var(--space-8); color: var(--accent); }
.brand small { display: block; font-size: var(--type-caption); letter-spacing: var(--ls-label); font-weight: var(--w-regular); color: var(--fg-mute); margin-top: var(--space-1); }
nav { display: flex; align-items: center; gap: var(--space-7); font-size: var(--type-name); }
nav a:hover, footer a:hover { text-decoration: underline; text-underline-offset: var(--space-1); }
.eyebrow { font-size: var(--type-name); color: var(--fg-mute); font-weight: var(--w-medium); }
.hero { padding-block: calc(var(--space-8) * 2.5) calc(var(--space-8) * 2.7); }
h1 { font-size: clamp(calc(var(--type-display) * 1.6), 5vw, calc(var(--type-display) * 2.7)); line-height: 1.14; font-weight: var(--w-semi); letter-spacing: calc(var(--ls-tight) * 3); margin-block: var(--space-6); }
h1 span { color: var(--accent); }
.intro { max-width: calc(var(--space-8) * 16); color: var(--fg-mute); font-size: var(--type-h3); }
.button { display: inline-block; padding: var(--space-3) var(--space-6); background: var(--accent); color: var(--accent-on); font-size: var(--type-name); font-weight: var(--w-medium); border-radius: var(--radius-xs); margin-top: var(--space-7); }
.button:hover { background: var(--accent-hover); }
.company { background: var(--surface); }
.section-layout { display: grid; grid-template-columns: 1fr 1.7fr; gap: calc(var(--space-8) * 1.5); padding-block: calc(var(--space-8) * 1.6); }
h2 { font-size: calc(var(--type-display) * 1.15); font-weight: var(--w-medium); line-height: 1.3; }
.section-layout p { color: var(--fg-mute); max-width: calc(var(--space-8) * 16); }
.section-layout p + p { margin-top: var(--space-5); }
.contact { border-top: 1px solid var(--hairline); }
.text-link { display: inline-block; color: var(--accent); text-decoration: underline; text-underline-offset: var(--space-1); margin-top: var(--space-5); }
footer { padding-block: var(--space-7); border-top: 1px solid var(--hairline); display: flex; justify-content: space-between; gap: var(--space-6); color: var(--fg-mute); font-size: var(--type-label); }
footer div { display: flex; gap: var(--space-6); }
.legal { max-width: calc(var(--space-8) * 20); padding-block: calc(var(--space-8) * 1.5) calc(var(--space-8) * 2); min-height: 70vh; }
.legal h1 { font-size: clamp(calc(var(--type-display) * 1.5), 5vw, calc(var(--type-display) * 2)); }
.legal h2 { font-size: var(--type-display); margin-block: var(--space-8) var(--space-4); }
.legal p, .legal ul { color: var(--fg-mute); margin-bottom: var(--space-4); }
.legal a { text-decoration: underline; text-underline-offset: var(--space-1); }
.notice { border-left: var(--space-1) solid var(--accent); padding: var(--space-5); background: var(--notice-bg); }
.placeholder { color: var(--accent); }
@media (max-width: 760px) {
  .wrap { width: calc(100% - var(--space-6) * 2); }
  .header { padding-block: var(--space-5); }
  nav { gap: var(--space-4); font-size: var(--type-label); }
  nav .optional { display: none; }
  .hero { padding-block: calc(var(--space-8) * 1.5); }
  .section-layout { grid-template-columns: 1fr; gap: var(--space-6); padding-block: var(--space-8); }
  footer { flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Fotografische Überarbeitung, bestehende Firmenpalette. */
figure { margin: 0; }
.hero { padding-block: calc(var(--space-8) * 1.5) 0; }
.hero-top, .hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--space-7); }
.quiet-link { font-size: var(--type-name); color: var(--accent); }
.hero h1 { font-size: clamp(calc(var(--type-display) * 1.7), 5.5vw, calc(var(--type-display) * 3.1)); margin-block: var(--space-8); line-height: 1.1; }
.hero-bottom { align-items: flex-end; margin-bottom: var(--space-8); }
.hero-bottom .button { margin-top: 0; flex-shrink: 0; display: flex; gap: var(--space-7); }
.hero-image { position: relative; overflow: hidden; }
.hero-image img { display: block; width: 100%; height: clamp(calc(var(--space-8) * 6), 40vw, calc(var(--space-8) * 12)); object-fit: cover; object-position: center 55%; }
.hero-image figcaption { background: var(--surface); display: flex; justify-content: space-between; gap: var(--space-5); padding: var(--space-4) var(--space-5); font-size: var(--type-label); color: var(--fg-mute); border-bottom: 1px solid var(--hairline); }
.company { background: var(--bg); }
.company-grid { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-8) * 2); padding-block: calc(var(--space-8) * 2.5); }
.company h2 { margin-top: var(--space-6); font-size: clamp(var(--type-display), 3vw, calc(var(--type-display) * 1.65)); letter-spacing: var(--ls-tight); }
.company-copy { padding-top: var(--space-1); color: var(--fg-mute); }
.company-copy p + p { margin-top: var(--space-5); }
.disciplines { display: flex; flex-wrap: wrap; gap: var(--space-5); border-top: 1px solid var(--hairline); padding-top: var(--space-5); margin-top: var(--space-7); font-size: var(--type-label); color: var(--accent); }
.project-section { display: grid; grid-template-columns: 1fr 1fr; background: var(--surface); }
.project-note { padding: calc(var(--space-8) * 1.3); align-self: center; }
.project-note h2 { font-size: calc(var(--type-display) * 2); margin-block: var(--space-5); letter-spacing: var(--ls-tight); }
.project-note > p:not(.eyebrow) { color: var(--fg-mute); }
.detail-image { overflow: hidden; position: relative; min-height: calc(var(--space-8) * 11); }
.detail-image img { width: 100%; height: 100%; position: absolute; object-fit: cover; object-position: 80% center; transform: scale(1.45); }
.detail-image figcaption { position: absolute; bottom: var(--space-5); left: var(--space-5); right: var(--space-5); background: var(--bg); color: var(--fg); padding: var(--space-3) var(--space-4); font-size: var(--type-label); }
.contact { border-top: none; padding-block: calc(var(--space-8) * 2.3); }
.contact h2 { margin-block: var(--space-5); font-size: clamp(var(--type-display), 3vw, calc(var(--type-display) * 1.6)); }
.contact-email { display: inline-block; font-size: clamp(var(--type-h2), 4.2vw, calc(var(--type-display) * 2.2)); color: var(--accent); letter-spacing: var(--ls-tight); border-bottom: 1px solid var(--accent); }
.contact-email span { display: inline-block; margin-left: var(--space-6); }
.contact-meta { display: flex; justify-content: space-between; gap: var(--space-6); color: var(--fg-mute); font-size: var(--type-name); margin-top: var(--space-8); }
@media (hover: hover) { .button, .text-link, .quiet-link { transition: color var(--t-fast), background var(--t-fast); } .quiet-link:hover, .text-link:hover { color: var(--accent-hover); } }
@media (max-width: 760px) {
 .hero { padding-top: var(--space-8); }
 .hero-top { align-items: flex-start; }
 .hero-top .quiet-link { display: none; }
 .hero h1 { margin-block: var(--space-7); }
 .hero-bottom { align-items: flex-start; flex-direction: column; }
 .hero-image figcaption { font-size: var(--type-caption); }
 .company-grid { grid-template-columns: 1fr; gap: var(--space-7); padding-block: calc(var(--space-8) * 1.5); }
 .project-section { grid-template-columns: 1fr; }
 .project-note { padding: var(--space-7); }
 .detail-image { min-height: calc(var(--space-8) * 7); }
 .contact { padding-block: calc(var(--space-8) * 1.5); }
}