:root { color-scheme: light; font-family: Georgia, "Times New Roman", serif; color: #201714; background: #f4efe6; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: radial-gradient(ellipse at top left, #b44f2d20, transparent 55%); }
main { width: min(980px, calc(100% - 40px)); margin: 0 auto; padding: 72px 0 40px; }
header { padding-bottom: 40px; }
.eyebrow, .status { color: #8c3419; font-size: .8rem; font-weight: bold; letter-spacing: .09em; text-transform: uppercase; }
.eyebrow { margin: 0 0 16px; }
h1 { font-size: clamp(2.6rem, 10vw, 6rem); line-height: 1.08; letter-spacing: -.04em; margin: 0 0 20px; overflow-wrap: anywhere; }
h2 { font-size: 1.75rem; margin: 16px 0; }
p, address { line-height: 1.7; }
.intro { font-size: 1.3rem; color: #5e514b; }
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 24px; }
article, .legal { padding: 28px; border: 1px solid #20171424; border-radius: 20px; background: #fffcf6; }
article p:last-child { color: #5e514b; margin-bottom: 0; }
.status { margin-top: 0; }
address { font-style: normal; }
.legal { overflow-wrap: anywhere; hyphens: auto; }
.legal h2:first-child { margin-top: 0; }
.legal section + section { margin-top: 32px; }
.legal h2 { font-size: 1.45rem; }
.updated { margin-top: 32px; color: #5e514b; font-size: .9rem; }
a { color: #8c3419; text-underline-offset: .2em; overflow-wrap: anywhere; }
a:hover { color: #58200f; }
a:focus-visible { outline: 3px solid #8c3419; outline-offset: 5px; }
footer { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 36px; color: #5e514b; }
@media (max-width: 500px) { main { padding-top: 40px; } article, .legal { padding: 22px; } }

@font-face { font-family: Ubuntu; font-style: normal; font-weight: 300; font-display: swap; src: url('/fonts/ubuntu-300-latin.woff2') format('woff2'); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/ubuntu-400-latin.woff2') format('woff2'); }
@font-face { font-family: Ubuntu; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/ubuntu-700-latin.woff2') format('woff2'); }
.project { min-width: 0; display: flex; flex-direction: column; align-items: stretch; text-align: center; }
.project h2 { min-width: 0; margin: 12px 0 24px; }
.project-logo { display: block; width: 100%; min-width: 0; border-radius: 8px; }
.project-logo img { display: block; width: 100%; max-width: 100%; min-width: 0; height: auto; object-fit: contain; }
.project .status { text-align: left; }
.project-lead { margin: 0 0 24px; }
.project-tagline { margin: 0 0 16px; font-weight: 700; }
.project-action { display: flex; align-items: center; justify-content: center; min-height: 64px; margin-top: auto; padding: 12px 20px; border: 1px solid; border-radius: 20px; font: inherit; font-weight: 700; line-height: 1.4; text-decoration: none; }
/* Schrift, Bildmotiv, Verlauf und Farben entsprechen der HESTRAGA-Website. */
.project-hestraga { font-family: Ubuntu, sans-serif; font-size: 1.0625rem; line-height: 1.55; color: #E8D7AE; border-color: #6E6B59; background: linear-gradient(180deg, rgba(8,17,26,.45) 0%, rgba(8,17,26,.62) 45%, rgba(8,17,26,.86) 100%), url('/assets/hestraga-night-512.jpg') center 35% / cover no-repeat, #08111A; }
.project-hestraga .project-lead { font-size: 1.15rem; font-weight: 300; }
.project-hestraga .status, .project-hestraga .project-tagline { color: #F1E8CF; }
.project-hestraga .project-action { color: #08111A; background: #CEB679; border-color: #E1C682; }
.project-hestraga .project-action:hover { background: #E1C682; }
.project-hestraga a:focus-visible { outline-color: #E1C682; }
/* Senomons vorhandene UX-Mockups verwenden diese warmen Flächen, Grüntöne und Schriftfamilien. */
.project-senomon { font-family: 'DejaVu Sans', Arial, sans-serif; color: #253B36; background: #FFFDF8; border-color: #B7C8BD; }
.project-senomon .status { color: #536761; }
.project-senomon .project-action { color: #FFFFFF; background: #275B4B; border-color: #275B4B; border-radius: 13px; }
.project-senomon .project-action:hover { background: #204A3D; }
.project-senomon a:focus-visible { outline-color: #275B4B; }