/* ============================================================ Otten TEC — site.css Component & layout styles for the static website. Design tokens come from tokens.css (loaded first). ============================================================ */ /* ---------- Skip link ---------- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--carbon); color: var(--paper); padding: 12px 20px; font-weight: 600; border-radius: var(--radius-sm); } .skip-link:focus { left: 16px; top: 16px; } img { max-width: 100%; } /* ============================================================ Header — light paper bar, sticky, sits over hero photography ============================================================ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--header-h); background: rgba(244, 242, 238, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid rgba(11, 11, 11, 0.06); transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); } .site-header.is-scrolled { background: rgba(244, 242, 238, 0.98); border-bottom-color: rgba(11, 11, 11, 0.10); box-shadow: 0 1px 3px rgba(11, 11, 11, 0.04); } .site-header__inner { height: 100%; max-width: var(--container-max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 var(--gutter); } .site-header__logo { display: flex; align-items: center; } .site-header__logo img { height: 30px; width: auto; display: block; } .site-nav { display: flex; gap: var(--space-6); align-items: center; } .site-nav a { color: var(--carbon); font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: .04em; text-decoration: none; padding: 6px 0; position: relative; transition: color var(--dur-base) var(--ease-standard); } .site-nav a:hover { color: var(--signal); } .site-nav a.is-active { color: var(--carbon); } .site-nav a.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--signal); } /* Burger */ .site-header__burger { display: none; flex-direction: column; gap: 5px; width: 44px; height: 44px; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; padding: 0; } .site-header__burger span { display: block; width: 24px; height: 2px; background: var(--carbon); transition: transform var(--dur-base) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard); } /* ---------- Mobile full-screen overlay ---------- */ .mobile-nav { position: fixed; inset: 0; z-index: 99; background: var(--carbon); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-2); padding: var(--header-h) var(--gutter) var(--space-9); opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility var(--dur-base) var(--ease-standard); } .mobile-nav a { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(36px, 11vw, 64px); line-height: 1.1; letter-spacing: -.005em; color: var(--paper); text-decoration: none; padding: 6px 0; transition: color var(--dur-base) var(--ease-standard); } .mobile-nav a:hover, .mobile-nav a.is-active { color: var(--signal); } .mobile-nav__meta { margin-top: var(--space-7); font-family: var(--font-mono); font-size: 13px; letter-spacing: .04em; color: var(--fg-on-dark3); } .mobile-nav__meta a { font-family: var(--font-mono); font-size: 13px; font-style: normal; font-weight: 500; color: var(--fg-on-dark2); } /* Open state (toggled on ) */ body.nav-open { overflow: hidden; } body.nav-open .mobile-nav { opacity: 1; visibility: visible; transform: translateY(0); } body.nav-open .site-header__burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); } body.nav-open .site-header__burger span:nth-child(2) { opacity: 0; } body.nav-open .site-header__burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } @media (max-width: 860px) { .site-nav { display: none; } .site-header__burger { display: flex; } } /* ============================================================ Hero — full-bleed photo, dark scrim, left-aligned text ============================================================ */ .hero { position: relative; isolation: isolate; overflow: hidden; padding-top: var(--header-h); color: var(--paper); } .hero--tall { min-height: 92vh; } .hero--medium { min-height: 62vh; } .hero__media { position: absolute; inset: 0; z-index: -2; background-size: cover; background-position: center; transform: scale(1.0); animation: heroPush 16s var(--ease-out) forwards; } @keyframes heroPush { from { transform: scale(1.0); } to { transform: scale(1.07); } } .hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(11,11,11,0.50) 0%, rgba(11,11,11,0.32) 32%, rgba(11,11,11,0.82) 100%), rgba(11,11,11,0.18); } .hero__content { max-width: var(--container-max); margin: 0 auto; padding: var(--space-9) var(--gutter) var(--space-10); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); justify-content: flex-end; min-height: calc(62vh - var(--header-h)); } .hero--tall .hero__content { min-height: calc(92vh - var(--header-h)); } .hero--short { min-height: 50vh; } .hero--short .hero__content { min-height: calc(50vh - var(--header-h)); } .hero__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(40px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -.005em; margin: 0; max-width: 16ch; color: var(--paper); text-wrap: balance; } .hero__sub { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.55; color: rgba(244, 242, 238, .88); margin: 0; max-width: 52ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); } /* ============================================================ Service section — alternating photo / copy ============================================================ */ .service { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; max-width: var(--container-max); margin: 0 auto; padding: clamp(72px, 10vw, 150px) var(--gutter); } .service + .service { padding-top: 0; } .service--reverse .service__media { order: 2; } .service__media { overflow: hidden; border-radius: var(--radius-md); aspect-ratio: 4 / 3; background: var(--bg-sunk); } .service__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s var(--ease-out); } .service:hover .service__media img { transform: scale(1.04); } .service__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .service__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(36px, 4vw, 60px); line-height: 1.04; letter-spacing: -.005em; margin: 0; color: var(--carbon); } .service__body { font-size: 17px; line-height: 1.62; color: var(--fg2); max-width: 56ch; margin: 0; } /* Arrow link */ .arrow-link { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: var(--carbon); text-decoration: none; padding: 6px 0; margin-top: var(--space-2); transition: color var(--dur-base) var(--ease-standard); } .arrow-link .arrow { display: inline-block; transition: transform var(--dur-base) var(--ease-standard); } .arrow-link:hover { color: var(--signal); } .arrow-link:hover .arrow { transform: translateX(6px); } @media (max-width: 860px) { .service { grid-template-columns: 1fr; padding-bottom: clamp(56px, 12vw, 96px); } .service + .service { padding-top: clamp(56px, 12vw, 96px); border-top: 1px solid var(--line); } .service--reverse .service__media { order: 0; } } /* ============================================================ CTA band — solid carbon, centered ============================================================ */ .cta { background: var(--carbon); color: var(--paper); padding: clamp(80px, 11vw, 150px) var(--gutter); position: relative; } .cta__inner { max-width: 760px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--space-5); } .cta__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(32px, 4vw, 56px); line-height: 1.06; letter-spacing: -.005em; color: var(--paper); margin: 0; max-width: 18ch; } .cta__text { font-family: var(--font-body); font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--fg-on-dark2); margin: 0; max-width: 50ch; } .cta__inner .arrow { transition: transform var(--dur-base) var(--ease-standard); } .cta__inner .btn:hover .arrow { transform: translateX(4px); } /* ============================================================ Footer — three columns + base row ============================================================ */ .site-footer { background: var(--carbon); color: var(--fg-on-dark2); padding: clamp(56px, 7vw, 80px) 0 var(--space-7); } .site-footer__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--gutter); display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: clamp(32px, 5vw, 72px); } .site-footer__brand img { height: 26px; filter: invert(1); display: block; margin-bottom: var(--space-4); } .site-footer__slogan { font-family: var(--font-body); font-size: 15px; line-height: 1.6; color: var(--fg-on-dark2); margin: 0; max-width: 30ch; } .site-footer__coltitle { font-family: var(--font-body); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--fg-on-dark3); margin: 0 0 var(--space-4); } .site-footer__nav { display: flex; flex-direction: column; gap: var(--space-3); } .site-footer__nav a, .site-footer__contact a { color: var(--fg-on-dark2); font-size: 15px; text-decoration: none; transition: color var(--dur-base) var(--ease-standard); } .site-footer__nav a:hover, .site-footer__contact a:hover { color: var(--paper); } .site-footer__contact { display: flex; flex-direction: column; gap: var(--space-3); font-size: 15px; line-height: 1.6; } .site-footer__contact address { font-style: normal; color: var(--fg-on-dark2); } .site-footer__email { font-weight: 600; } .site-footer__base { max-width: var(--container-max); margin: var(--space-8) auto 0; padding: var(--space-5) var(--gutter) 0; border-top: 1px solid rgba(255, 255, 255, 0.08); display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); align-items: center; justify-content: space-between; } .site-footer__copy { font-size: 12px; color: var(--fg-on-dark3); margin: 0; } .site-footer__legal { display: flex; gap: var(--space-5); } .site-footer__legal a { font-size: 12px; color: var(--fg-on-dark3); text-decoration: none; letter-spacing: .02em; transition: color var(--dur-base) var(--ease-standard); } .site-footer__legal a:hover { color: var(--paper); } @media (max-width: 760px) { .site-footer__inner { grid-template-columns: 1fr; gap: var(--space-7); } .site-footer__base { flex-direction: column; align-items: flex-start; } } /* Eyebrow light variant (for dark surfaces) */ .eyebrow--light { color: rgba(244, 242, 238, .9); } /* ============================================================ Generic content section (interior pages) ============================================================ */ .section { padding: clamp(72px, 9vw, 130px) 0; background: var(--paper); } .section--dark { background: var(--carbon); color: var(--paper); } .section--dark p { color: var(--fg-on-dark2); } .section--sunk { background: var(--bg-sunk); } .section--first { padding-top: calc(var(--header-h) + clamp(56px, 7vw, 110px)); } .container--narrow { max-width: 720px; } .section-head { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-3); margin-bottom: var(--space-8); } .section-head--center { align-items: center; text-align: center; margin-left: auto; margin-right: auto; } .section-title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(32px, 3.6vw, 54px); line-height: 1.05; letter-spacing: -.005em; margin: 0; color: var(--carbon); max-width: 20ch; } .section--dark .section-title { color: var(--paper); } /* Prose */ .prose p { font-size: 18px; line-height: 1.65; color: var(--fg2); margin: 0 0 var(--space-5); max-width: 64ch; } .prose p:last-child { margin-bottom: 0; } /* ============================================================ Tag wall — dark band, large condensed tags, · separators ============================================================ */ .tagwall { text-align: center; } .tagwall__list { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 16px; max-width: 980px; margin: 0 auto; } .tagwall__tag { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(20px, 2.7vw, 40px); line-height: 1.12; color: var(--paper); letter-spacing: -.005em; } .tagwall__sep { color: var(--signal); font-size: clamp(16px, 2vw, 30px); line-height: 1; transform: translateY(-0.08em); } .tagwall__sub { margin: var(--space-8) auto 0; max-width: 56ch; font-size: 16px; line-height: 1.6; color: var(--fg-on-dark2); } /* ============================================================ Pillars — three-column differentiators ============================================================ */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(32px, 4vw, 56px); border-top: 1px solid var(--line); } .pillar { padding-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); } .pillar__num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--signal); } .pillar h3 { margin: 0; color: var(--carbon); } .pillar p { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: none; } @media (max-width: 860px) { .pillars { grid-template-columns: 1fr; gap: var(--space-6); } } /* ============================================================ Project blocks — alternating image / text ============================================================ */ .project { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; padding: clamp(40px, 5vw, 64px) 0; border-top: 1px solid var(--line); } .project:last-of-type { border-bottom: 1px solid var(--line); } .project--reverse .project__media { order: 2; } .project__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-sunk); } .project__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .project__copy { display: flex; flex-direction: column; gap: var(--space-3); } .project__tag { font-family: var(--font-body); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--signal); } .project__copy h3 { margin: 0; color: var(--carbon); font-size: clamp(24px, 2.4vw, 32px); } .project__copy p { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: none; } @media (max-width: 860px) { .project { grid-template-columns: 1fr; } .project--reverse .project__media { order: 0; } } /* ============================================================ Cards — service offerings (2×2 grid) ============================================================ */ .cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 2.4vw, 32px); } .card { background: var(--paper); border: 1px solid var(--line); border-top: 2px solid var(--signal); border-radius: var(--radius-md); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: var(--space-3); transition: border-color var(--dur-base) var(--ease-standard); } .card:hover { border-color: var(--carbon); border-top-color: var(--signal); } .card__num { font-family: var(--font-mono); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--signal); } .card h3 { margin: 0; color: var(--carbon); } .card p { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: none; } @media (max-width: 720px) { .cards { grid-template-columns: 1fr; } } /* ============================================================ Audience — four columns on dark, hairline dividers ============================================================ */ .audience { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(24px, 3vw, 44px); border-top: 1px solid var(--line-on-dark); } .audience__col { padding-top: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); } .audience__col h3 { margin: 0; color: var(--paper); font-size: var(--fs-h4); } .audience__col p { font-size: 14px; line-height: 1.6; color: var(--fg-on-dark2); margin: 0; max-width: none; } @media (max-width: 900px) { .audience { grid-template-columns: repeat(2, 1fr); gap: var(--space-7) var(--space-6); } } @media (max-width: 540px) { .audience { grid-template-columns: 1fr; gap: var(--space-6); } } /* ============================================================ Reference — large image + text, visual highlight ============================================================ */ .reference { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: center; } .reference--reverse .reference__media { order: 2; } .reference__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-sunk); } .reference__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 6s var(--ease-out); } .reference:hover .reference__media img { transform: scale(1.04); } .reference__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .reference__copy h2 { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.05; letter-spacing: -.005em; margin: 0; color: var(--carbon); } .reference__copy .prose p { font-size: 16px; line-height: 1.62; } @media (max-width: 860px) { .reference { grid-template-columns: 1fr; gap: var(--space-6); } .reference--reverse .reference__media { order: 0; } } /* ============================================================ Lead statement — prominent intro paragraph(s) ============================================================ */ .prose--lead p { font-size: clamp(19px, 1.7vw, 24px); line-height: 1.5; color: var(--fg1); max-width: 40ch; } .section--dark .prose--lead p { color: var(--fg-on-dark1); } /* ============================================================ Leistungsbereich — image + lead + numbered spec list ============================================================ */ .leistung { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(40px, 6vw, 88px); align-items: start; } .leistung--reverse .leistung__media { order: 2; } .leistung__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-md); background: var(--bg-sunk); position: sticky; top: calc(var(--header-h) + 24px); } .leistung__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .leistung__copy { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .leistung__copy h2 { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(30px, 3.4vw, 50px); line-height: 1.04; letter-spacing: -.005em; margin: 0; color: var(--carbon); } .leistung__lead { font-size: 18px; line-height: 1.55; color: var(--fg1); margin: 0; max-width: 52ch; } .speclist { list-style: none; padding: 0; margin: var(--space-3) 0 0; border-top: 1px solid var(--line); width: 100%; } .speclist__item { display: grid; grid-template-columns: 44px 1fr; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: 1px solid var(--line); align-items: start; } .speclist__num { font-family: var(--font-mono); font-size: 14px; font-weight: 600; letter-spacing: .08em; color: var(--signal); padding-top: 4px; } .speclist__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: var(--fs-h3); line-height: 1.2; color: var(--carbon); margin: 0 0 6px; } .speclist__body { font-size: 15px; line-height: 1.6; color: var(--fg2); margin: 0; max-width: 58ch; } @media (max-width: 860px) { .leistung { grid-template-columns: 1fr; gap: var(--space-6); } .leistung--reverse .leistung__media { order: 0; } .leistung__media { position: static; } } /* ============================================================ Column set — quiet 3-col with vertical divider hairlines ============================================================ */ .colset { display: grid; grid-template-columns: repeat(3, 1fr); } .colset__col { padding: var(--space-2) clamp(24px, 2.8vw, 44px); border-left: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--space-3); } .colset__col:first-child { border-left: 0; padding-left: 0; } .colset__col h3 { margin: 0; color: var(--carbon); } .colset__col p { font-size: 15px; line-height: 1.62; color: var(--fg2); margin: 0; max-width: none; } .section--dark .colset__col { border-left-color: var(--line-on-dark); } .section--dark .colset__col h3 { color: var(--paper); } @media (max-width: 860px) { .colset { grid-template-columns: 1fr; } .colset__col { border-left: 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--line); } .colset__col:first-child { padding-top: var(--space-6); border-top: 1px solid var(--line); } .section--dark .colset__col { border-top-color: var(--line-on-dark); } } /* ============================================================ Block list — editorial stacked blocks (label + description) ============================================================ */ .blocklist { border-top: 1px solid var(--line-on-dark); } .blocklist__item { display: grid; grid-template-columns: 1fr 1.7fr; gap: clamp(24px, 4vw, 64px); padding: clamp(28px, 3.5vw, 44px) 0; border-bottom: 1px solid var(--line-on-dark); align-items: start; } .blocklist__item h3 { margin: 0; color: var(--paper); font-size: clamp(22px, 2.2vw, 30px); } .blocklist__item p { font-size: 16px; line-height: 1.62; color: var(--fg-on-dark2); margin: 0; max-width: none; } @media (max-width: 760px) { .blocklist__item { grid-template-columns: 1fr; gap: var(--space-3); } } /* ============================================================ Contact page — two-column layout + form ============================================================ */ .contact { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 88px); align-items: start; } .contact__col { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); } .contact__h2 { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(28px, 3vw, 44px); line-height: 1.05; letter-spacing: -.005em; margin: 0; color: var(--carbon); } .contact__text { font-size: 16px; line-height: 1.62; color: var(--fg2); margin: 0; max-width: 44ch; } .contact__email { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.1; letter-spacing: -.005em; color: var(--carbon); text-decoration: none; word-break: break-word; background-image: linear-gradient(var(--signal), var(--signal)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard); padding-bottom: 3px; margin-top: var(--space-2); } .contact__email:hover { background-size: 100% 2px; color: var(--signal); } .contact__note { margin: var(--space-5) 0 0; padding-top: var(--space-5); border-top: 1px solid var(--line); font-size: 14px; line-height: 1.6; color: var(--fg3); max-width: 46ch; } @media (max-width: 860px) { .contact { grid-template-columns: 1fr; } } /* ---------- Form ---------- */ .form { display: flex; flex-direction: column; gap: var(--space-5); width: 100%; } .form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); } @media (max-width: 540px) { .form__row { grid-template-columns: 1fr; } } .field { display: flex; flex-direction: column; gap: var(--space-2); } .field > label { font-family: var(--font-body); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--fg3); font-weight: 600; } .input { font-family: var(--font-body); font-size: 16px; color: var(--carbon); padding: 14px 16px; background: var(--bone); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); outline: none; width: 100%; transition: border-color var(--dur-base) var(--ease-standard); } .input::placeholder { color: var(--smoke); } .input:focus { border-color: var(--carbon); border-bottom-color: var(--signal); border-bottom-width: 2px; padding-bottom: 13px; } .input--area { resize: vertical; min-height: 150px; line-height: 1.5; } select.input { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 44px; cursor: pointer; background-image: linear-gradient(45deg, transparent 50%, var(--carbon) 50%), linear-gradient(135deg, var(--carbon) 50%, transparent 50%); background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 16px) calc(50% - 2px); background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; } /* Consent checkbox */ .form__consent { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; } .form__consent input { margin-top: 3px; width: 18px; height: 18px; accent-color: var(--signal); flex: none; } .form__consent label { font-family: var(--font-body); font-size: 14px; line-height: 1.55; color: var(--fg2); font-weight: 400; text-transform: none; letter-spacing: normal; } .form__consent a { color: var(--carbon); text-decoration: underline; text-underline-offset: 2px; } .form__consent a:hover { color: var(--signal); } .form .btn { align-self: flex-start; } .form .btn:hover .arrow { transform: translateX(4px); } .form .arrow { transition: transform var(--dur-base) var(--ease-standard); } /* Honeypot (hidden from humans, visible to bots) */ .hp { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Status banner */ .form-banner { padding: 16px 20px; border-radius: var(--radius-sm); font-size: 15px; line-height: 1.5; margin-bottom: var(--space-5); border: 1px solid; } .form-banner--success { background: rgba(46, 125, 50, 0.08); border-color: var(--ok); color: #1f5a22; } .form-banner--error { background: var(--signal-soft); border-color: var(--signal-deep); color: var(--signal-deep); } .form-banner--error a { color: var(--signal-deep); text-decoration: underline; } /* Closing note band */ .note-band { background: var(--carbon); color: var(--fg-on-dark2); text-align: center; padding: clamp(40px, 5vw, 64px) var(--gutter); } .note-band p { margin: 0 auto; max-width: 56ch; font-size: 14px; line-height: 1.65; color: var(--fg-on-dark3); } /* ============================================================ Legal / text pages (Impressum, Datenschutz) ============================================================ */ .legal__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(36px, 4.4vw, 64px); line-height: 1.04; letter-spacing: -.005em; margin: 0 0 var(--space-7); color: var(--carbon); } .legal h2 { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; color: var(--carbon); margin: var(--space-8) 0 var(--space-3); } .legal h3 { font-size: var(--fs-h4); color: var(--carbon); margin: var(--space-6) 0 var(--space-2); } .legal p, .legal address, .legal ul { font-size: 16px; line-height: 1.7; color: var(--fg2); margin: 0 0 var(--space-4); max-width: 68ch; } .legal address { font-style: normal; } .legal a { color: var(--carbon); text-decoration: underline; text-underline-offset: 2px; } .legal a:hover { color: var(--signal); } .legal ul { padding-left: 1.2em; } .legal ul li { margin-bottom: var(--space-2); } .legal__note { margin: var(--space-5) 0; padding: var(--space-5); background: var(--bone); border: 1px solid var(--line-strong); border-top: 2px solid var(--signal); border-radius: var(--radius-md); font-size: 14px; line-height: 1.6; color: var(--fg3); } .legal__note strong { color: var(--carbon); } /* ============================================================ 404 page ============================================================ */ .errorpage { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; background: var(--carbon); color: var(--paper); padding: calc(var(--header-h) + var(--space-9)) var(--gutter) var(--space-9); } .errorpage__inner { max-width: var(--container-max); margin: 0 auto; width: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); } .errorpage__code { font-family: var(--font-mono); font-size: 14px; letter-spacing: .2em; color: var(--signal); font-weight: 600; } .errorpage__title { font-family: var(--font-headline); font-style: italic; font-weight: 800; font-size: clamp(44px, 7vw, 104px); line-height: 1; letter-spacing: -.01em; margin: 0; color: var(--paper); } .errorpage__text { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.6; color: var(--fg-on-dark2); margin: 0; max-width: 46ch; } .errorpage__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }