/* protol.io — public website (protol.io/, /en, /support, /en/support).
 *
 * Production form of the design handover's site.css
 * (mobile-framework/website/site.css, frozen; HANDOFF.md "Umsetzung"). Token
 * values are copied 1:1 from there — which copies mobile-framework/handoff/tokens.ts —
 * and are never imported (CLAUDE.md: nothing imports from mobile-framework/).
 * Changes against the handover, all from HANDOFF.md or the accessibility review:
 *   - self-hosted Geist / Geist Mono (copies of apps/web/app/fonts, pinned
 *     byte-identical by lib/site/site-assets.test.ts) instead of Google Fonts;
 *   - the `.site.dark` block moved under @media (prefers-color-scheme: dark);
 *   - the @container rules as @media rules; no container-type;
 *   - forced-colors (Windows high contrast) fallbacks for inputs, buttons, cards
 *     and the current language, which are drawn with box-shadow only;
 *   - the skip link gets a surface so it no longer sits on the logo;
 *   - the focus ring no longer squares off the buttons' 12px corners;
 *   - the language links are 44px touch targets (Kevin, 2026-10-14);
 *   - the message field (textarea) and the visible info@ line (new, Kevin).
 * No inline styles anywhere: the pages run under `style-src 'self'`.
 */

@font-face {
    font-family: 'Geist';
    src: url('fonts/Geist-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Geist Mono';
    src: url('fonts/GeistMono-Variable.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root{color-scheme:light dark}
body{margin:0}

.site{
--font:'Geist',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;--mono:'Geist Mono',ui-monospace,SFMono-Regular,monospace;
--surface:#faf8f4;--surface-elevated:#ffffff;--surface-sunken:#f5f2ec;
--border:rgba(60,50,40,0.10);--border-strong:rgba(60,50,40,0.18);
--text-primary:#1f1a14;--text-secondary:rgba(60,50,40,0.62);--text-inverse:#fff;
--accent:oklch(0.62 0.13 40);--accent-soft:oklch(0.95 0.035 50);--accent-text:oklch(0.45 0.12 40);
--warning-soft:oklch(0.96 0.04 80);--warning-text:oklch(0.48 0.10 62);
--danger:oklch(0.58 0.18 25);--danger-text:oklch(0.48 0.16 25);--text-muted:rgba(60,50,40,0.42);
--shadow-card:0 1px 2px rgba(40,30,20,.05);
/* Site-Aliasse (nur Verweise auf bestehende Tokens) */
--action:var(--accent-text);--on-action:#fff;--action-hover:color-mix(in oklch,var(--accent-text),#000 14%);--focus:var(--accent-text);
position:relative;font-family:var(--font);background:var(--surface);color:var(--text-primary);-webkit-font-smoothing:antialiased;font-size:17px;line-height:1.5}
@media (prefers-color-scheme: dark){
.site{
--surface:#121212;--surface-elevated:#1c1c1f;--surface-sunken:#27272a;
--border:rgba(255,255,255,0.10);--border-strong:rgba(255,255,255,0.20);
--text-primary:#f4f4f5;--text-secondary:rgba(244,244,245,0.64);--text-inverse:#18181b;
--accent:oklch(0.72 0.115 40);--accent-soft:oklch(0.32 0.055 40);--accent-text:oklch(0.84 0.075 45);
--warning-soft:oklch(0.32 0.05 78);--warning-text:oklch(0.88 0.08 80);
--danger:oklch(0.68 0.165 25);--danger-text:oklch(0.83 0.11 25);--text-muted:rgba(244,244,245,0.42);
--shadow-card:0 1px 2px rgba(0,0,0,.4);
--action:var(--accent);--on-action:var(--text-inverse);--action-hover:color-mix(in oklch,var(--accent),#fff 14%)}
}
.site *{box-sizing:border-box}
.site a{color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}.site a:hover{text-decoration-thickness:2px}
.site a:focus-visible,.site button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.site a:not(.sbtn):focus-visible{border-radius:6px}
.site [tabindex="-1"]:focus{outline:none}
.site h1,.site h2,.site h3,.site p,.site ul,.site ol{margin:0}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:16px;top:-80px;z-index:10;padding:10px 14px;border-radius:12px;background:var(--surface-elevated);box-shadow:var(--shadow-card),0 0 0 1px var(--border-strong)}.skip:focus{top:12px}
.wrap{max-width:1280px;margin:0 auto;padding:0 80px}
/* Bildmarke: Kreis und Haken in accent, Quadrat und Strich weiß */
.mark-fill{fill:var(--accent)}.mark-check{stroke:var(--accent)}
/* Header */
.hdr{display:flex;align-items:center;gap:16px;height:80px}
.site a.logo{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--text-primary);text-decoration:none;font-size:19px;font-weight:600;letter-spacing:-.03em}
.logo svg{flex-shrink:0}
.hdr .sp{flex:1}
.lang{display:flex;gap:2px;padding:3px;border-radius:12px;box-shadow:inset 0 0 0 1px var(--border-strong)}
.site .lang a{display:flex;align-items:center;justify-content:center;min-width:44px;height:44px;border-radius:9px;font-family:var(--mono);font-size:13px;font-weight:500;color:var(--text-primary);text-decoration:none}
.site .lang a[aria-current]{background:var(--text-primary);color:var(--surface-elevated)}
.site a.sbtn,.sbtn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 18px;border:0;border-radius:12px;font:600 15px/1 var(--font);letter-spacing:-.01em;background:var(--action);color:var(--on-action);text-decoration:none;white-space:nowrap}
.site a.sbtn:hover{background:var(--action-hover)}
.site a.sbtn.sec{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1.5px var(--border-strong)}
.site a.sbtn.sec:hover{background:var(--surface-elevated)}
.sbtn.lg{height:48px;padding:0 22px;font-size:17px}
/* Hero */
.hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:96px;align-items:center;padding:112px 0 136px}
.hero h1{font-size:72px;line-height:1.02;font-weight:600;letter-spacing:-.045em;text-wrap:balance;hyphens:manual}
/* `.site .lead`, not the handover's `.lead`: `.site p{margin:0}` outranks a bare
   class, so the stylesheet's own 28px never applied in the mock either. */
.site .lead{margin-top:28px;max-width:29em;font-size:22px;line-height:1.45;letter-spacing:-.012em;text-wrap:pretty}
.field{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px}
.field i{aspect-ratio:1;border-radius:28%;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border)}
.field i.o{background:transparent;box-shadow:inset 0 0 0 1px var(--border-strong)}
.field i.on{background:var(--accent);box-shadow:none}
/* Drei Punkte */
.pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:48px;padding-bottom:136px}
.pt{padding-top:24px;border-top:1px solid var(--border-strong)}
.pt .n{font-family:var(--mono);font-size:13px;font-weight:500;color:var(--accent-text)}
.pt h3{margin:20px 0 10px;font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.025em}
.pt p{text-wrap:pretty}
/* Kontakt */
.contact{background:var(--surface-sunken)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:96px;align-items:start;padding-top:104px;padding-bottom:112px}
.eyebrow{font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-text)}
.contact h2{margin-top:18px;font-size:48px;line-height:1.08;font-weight:600;letter-spacing:-.04em;text-wrap:balance}
.contact .intro p{margin-top:24px;font-size:19px;line-height:1.5;max-width:24em;text-wrap:pretty}
.contact .intro p.mailline{margin-top:16px}
/* Kontaktformular — FormField aus Wave 3 (.fld/.inp), Web-Größen */
.cform{display:flex;flex-direction:column;gap:20px;padding:28px}
.fld{display:flex;flex-direction:column;gap:6px}
.fld label{font-size:15px;font-weight:600;letter-spacing:-.005em}
.site .inp{width:100%;height:48px;padding:0 14px;border:0;border-radius:12px;background:var(--surface);color:var(--text-primary);font:400 17px var(--font);box-shadow:inset 0 0 0 1px var(--text-secondary)}
.site textarea.inp{display:block;height:auto;min-height:152px;padding:12px 14px;line-height:1.5;resize:vertical}
.site .inp:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.fld.err .inp{box-shadow:inset 0 0 0 1.5px var(--danger)}
.emsg{font-size:15px;font-weight:600;color:var(--danger-text)}
.fnote{font-size:15px;line-height:1.45}
.site .sbtn.blk{width:100%}
.site button.sbtn{cursor:pointer}.site button.sbtn:hover{background:var(--action-hover)}
.site .sbtn.dis,.site .sbtn.dis:hover{background:var(--surface-sunken);color:var(--text-muted);cursor:default}
.warnb{padding:12px 14px;border-radius:12px;background:var(--warning-soft);color:var(--warning-text);font-size:15px;line-height:1.4;font-weight:500}
.warnb a{color:inherit}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sent{padding:32px 28px}.sent h3{font-size:24px;line-height:1.2;font-weight:600;letter-spacing:-.025em}.sent p{margin-top:10px}
/* Footer */
.ftr{border-top:1px solid var(--border)}
.ftr .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px;padding-top:24px;padding-bottom:32px;font-size:15px}
.ftr ul{display:flex;flex-wrap:wrap;gap:0 24px;list-style:none;padding:0}
.site .ftr a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-primary);text-decoration:none}
.site .ftr a:hover,.site .ftr a[aria-current]{text-decoration:underline;text-underline-offset:3px}
/* Support */
.sup{display:grid;grid-template-columns:minmax(0,1fr) 360px;grid-template-areas:"head aside" "body aside";gap:0 96px;padding-top:88px;padding-bottom:136px;align-items:start}
.sup-head{grid-area:head}.sup-body{grid-area:body}.sup-aside{grid-area:aside}
.sup h1{font-size:60px;line-height:1.05;font-weight:600;letter-spacing:-.045em}
.sup .lead{font-size:20px;max-width:32em}
.sup-body h2{margin:72px 0 8px;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.sup-body>section:first-child h2{margin-top:64px}
.steps{list-style:none;padding:0;margin-top:20px}
.step{display:grid;grid-template-columns:36px minmax(0,1fr);gap:18px;padding:22px 0;border-top:1px solid var(--border)}
.step:last-child{border-bottom:1px solid var(--border)}
.step .no{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:9px;background:var(--surface-sunken);font-family:var(--mono);font-size:13px;font-weight:500}
.step h3{font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.015em;margin:3px 0 6px}
.step p+p{margin-top:10px}
.small{font-size:15px}
.sup p.after{margin-top:20px}
.sq{list-style:none;padding:0;margin-top:16px;display:flex;flex-direction:column;gap:12px}
.sq li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px}
.sq li:before{content:"";width:9px;height:9px;margin-top:9px;border-radius:3px;background:var(--accent)}
.legal{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.card{padding:24px;border-radius:14px;background:var(--surface-elevated);box-shadow:var(--shadow-card),0 0 0 1px var(--border)}
.card h2{margin:0 0 4px;font-size:19px;letter-spacing:-.015em}
.crow{padding:16px 0;border-bottom:1px solid var(--border)}
.crow .l{font-size:15px;font-weight:600}
.crow a{display:inline-flex;align-items:center;min-height:44px;font-size:19px;font-weight:600;letter-spacing:-.015em}
.crow p{font-size:15px;line-height:1.45}
.card .co{padding-top:16px;font-size:15px}
/* Informationsseiten (Datenexport, Infrastruktur): eine lesbare Spalte */
.info{padding-top:88px;padding-bottom:136px}
.info-body{min-width:0}
.info h1{font-size:60px;line-height:1.05;font-weight:600;letter-spacing:-.045em;text-wrap:balance}
.info .lead{font-size:20px;max-width:34em}
.info .upd{margin-top:16px;color:var(--text-secondary)}
.toc{margin-top:36px;padding-top:20px;border-top:1px solid var(--border-strong)}
.toc ul{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:0 24px}
.site .toc a{display:inline-flex;align-items:center;min-height:44px;font-size:15px}
.info-body section{scroll-margin-top:24px}
.info-body h2{margin:64px 0 12px;font-size:30px;line-height:1.15;font-weight:600;letter-spacing:-.03em}
.info-body section:first-child h2{margin-top:40px}
.info-body h3{margin:28px 0 4px;font-size:19px;line-height:1.3;font-weight:600;letter-spacing:-.015em}
.info-body p{margin-top:12px;max-width:44em}
.info-body p.small{margin-top:14px;color:var(--text-secondary)}
.info-body .sq{max-width:44em}
.info code{font-family:var(--mono);font-size:.88em;overflow-wrap:anywhere}
.tree{margin:16px 0 0;padding:16px 18px;border-radius:14px;background:var(--surface-sunken);box-shadow:inset 0 0 0 1px var(--border);font:13px/1.55 var(--mono);overflow-x:auto;white-space:pre}
.tblw{margin-top:16px;overflow-x:auto;border-radius:14px;box-shadow:0 0 0 1px var(--border)}
.tblw table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px;line-height:1.45}
.tblw th,.tblw td{padding:12px 16px;text-align:left;vertical-align:top;border-top:1px solid var(--border)}
.tblw thead th{border-top:0;background:var(--surface-sunken);font-family:var(--mono);font-size:12px;font-weight:500;letter-spacing:.02em;color:var(--text-secondary)}
.tblw tbody th{font-weight:600}
.tblw tbody tr:first-child th,.tblw tbody tr:first-child td{border-top:0}
.site .tblw:focus-visible,.site .tree:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Schmal (≤ 760 px) */
@media (max-width:760px){
.wrap{padding:0 20px}
.hdr{height:64px;gap:10px}
.site a.logo{font-size:17px;gap:8px}
.logo svg{width:24px;height:24px}
.site a.sbtn,.sbtn{padding:0 14px}
.hero{grid-template-columns:minmax(0,1fr);gap:0;padding:48px 0 64px}
.hero h1{font-size:42px;line-height:1.05;letter-spacing:-.04em}
.site .lead{margin-top:20px;font-size:19px}
.field{grid-template-columns:repeat(8,minmax(0,1fr));gap:7px;margin-top:44px}
.field i:nth-child(n+17){display:none}
.pts{grid-template-columns:minmax(0,1fr);gap:36px;padding-bottom:72px}
.pt h3{margin:14px 0 8px;font-size:22px}
.contact .wrap{grid-template-columns:minmax(0,1fr);gap:0;padding-top:56px;padding-bottom:64px}
.contact h2{font-size:32px;margin-top:14px}
.contact .intro p{margin-top:16px;font-size:17px}
.contact .intro p.mailline{margin-top:12px}
.contact form,.contact .sent,.contact .cform{margin-top:32px}
.cform{padding:20px;gap:18px}.sent{padding:24px 20px}
.ftr .wrap{flex-direction:column;align-items:flex-start;gap:4px;padding-top:16px}
.sup{grid-template-columns:minmax(0,1fr);grid-template-areas:"head" "aside" "body";padding-top:44px;padding-bottom:72px}
.sup h1{font-size:40px}
.sup .lead{font-size:18px;margin-top:16px}
.sup-aside{margin-top:32px}
.info{padding-top:44px;padding-bottom:72px}
.info h1{font-size:40px}
.info .lead{font-size:18px;margin-top:16px}
.toc{margin-top:28px}
.toc ul{flex-direction:column}
.info-body h2{margin-top:48px;font-size:26px}
.info-body section:first-child h2{margin-top:36px}
.tblw table{min-width:520px}
.sup-body h2{margin-top:56px;font-size:26px}
.sup-body>section:first-child h2{margin-top:52px}
.card{padding:20px}
}
/* ≤ 359 px: the handover shrank the language links to 34 px here; they stay at
   44 px (touch targets), so the room comes from the gaps, the pill's padding
   and the button's side padding instead. */
@media (max-width:359px){.wrap{padding:0 16px}.hdr{gap:4px}.site a.logo{font-size:16px;gap:6px}.lang{padding:0;gap:0}.site a.sbtn{padding:0 10px}.hero h1{font-size:38px}}
/* Windows high contrast: box-shadow is dropped there, so the boundaries that
   are only shadows get a real border, and the current language a system colour. */
@media (forced-colors: active){
.site .inp{border:1px solid CanvasText}
.fld.err .inp{border-width:2px}
.site .sbtn,.site a.sbtn{border:1px solid ButtonText}
.card,.lang,.tblw,.tree{border:1px solid CanvasText}
.site .lang a[aria-current]{forced-color-adjust:none;background:Highlight;color:HighlightText}
}