/* IRLR — dezente redaktionelle Verfeinerung, ohne Eingriff in Inhalte */
:root { --editorial-rule: #cdd8cf; --ink: #19312e; --accent: #d94b3a; }
html { scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body p { hyphens: auto; overflow-wrap: break-word; }
body h1, body h2, body h3 { text-wrap: balance; }
body h1, body h2 { letter-spacing: -.04em; }
body .font-serif { font-optical-sizing: auto; }
body .font-serif { font-feature-settings: "kern" 1; }
body .font-mono.uppercase, body .font-mono.text-xs.uppercase { letter-spacing: .115em; }

/* Präzisere Kopfzeile, zurückhaltende Interaktion */
body > header { box-shadow: 0 1px 0 rgba(17,19,21,.035); border-top: 3px solid var(--accent); }
body > header nav a { position: relative; text-decoration: none; }
body > header nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -8px;
  border-bottom: 1px solid currentColor; transition: right .25s ease;
}
body > header nav a:hover::after, body > header nav a:focus-visible::after { right: 0; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Ein heller, zeitgenössischer Ton mit gezielten Farbakzenten */
body { background-color: #f3f5f0; }
body > header { background-color: rgba(243,245,240,.94); }
body .bg-white { background-color: #fcfdfa; }
body .selection\:bg-brand-magenta::selection { background: var(--accent); }
main > section:not(.relative) .font-mono.text-brand-magenta { color: #bd4537; }

/* Editoriale Hierarchie mit einem ruhigen Zeilenbild */
main > section:not(.relative) > div > h2,
main > section:not(.relative) > h2 { line-height: 1.08; }
#ansatz > .grid:first-of-type p,
#institut p,
#kontakt p,
article > .space-y-8 > p { line-height: 1.75; }
main > section .border-t.border-brand-line { border-top-color: var(--editorial-rule); }

/* Projektübersicht wie ein kleines Architektur-/Forschungsmagazin */
#referenzen .grid > .group.bg-white {
  border-color: #d4ddd4;
  border-top: 3px solid #c2d4c8;
  box-shadow: 0 3px 16px rgba(29,31,30,.025);
  transition: border-color .28s ease, transform .28s ease, box-shadow .28s ease;
}
#referenzen .grid > .group.bg-white:hover,
#referenzen .grid > .group.bg-white:focus-within {
  transform: translateY(-3px);
  border-color: #648f81;
  border-top-color: var(--accent);
  box-shadow: 0 12px 30px rgba(29,31,30,.07);
}
#referenzen .grid > .group.bg-white img { transition: transform .65s cubic-bezier(.2,.8,.2,1); }
#referenzen .grid > .group.bg-white:hover img { transform: scale(1.025); }

/* Projektartikel: ruhige Lesespalte und feine Bildlegenden */
main article > h1 { letter-spacing: -.035em; line-height: 1.02; }
main article > p.text-lg { max-width: 44rem; line-height: 1.65; }
main article > .space-y-8 { max-width: 100%; }
main article .space-y-8 > p { max-width: 43rem; }
main article .space-y-8 h2 { letter-spacing: -.025em; line-height: 1.14; }
main article .space-y-8 .grid .font-mono.text-xs {
  letter-spacing: .01em; line-height: 1.55;
  border-top: 1px solid #dce5dd;
}
main article img.zoomable { transition: filter .35s ease, transform .6s ease; }
main article img.zoomable:hover { filter: saturate(1.06); }

@media (min-width: 1024px) {
  #ansatz, #institut, #forschung, #referenzen, #kontakt { scroll-margin-top: 5rem; }
  main article { max-width: 68rem; }
  main article > .space-y-8 { font-size: 1.075rem; }
}
@media (max-width: 640px) {
  body .font-mono.uppercase { letter-spacing: .065em; }
  #referenzen .grid > .group.bg-white { box-shadow: none; }
  main article > h1 { line-height: 1.08; }
}
@media (prefers-reduced-motion: reduce) {
  #referenzen .grid > .group.bg-white,
  #referenzen .grid > .group.bg-white img,
  body > header nav a::after { transition: none; }
}