/* fh-system 1.0 · 01.11.2026 · Quelle: brand.fithwor.dev
   Gemeinsames Gestaltungssystem für brand.fithwor.dev und portfolio.fithwor.dev.
   Signaletik-Raster: schwarzer Wegweiser-Block links, Kapitel als Tafeln, Beschriftung in Roboto Mono mit «// ».
   Kunden-Kleid: --brand / --brand-ink werden pro Kunde im <html style> gesetzt. */

@font-face{font-family:"Inter";src:url("fonts/Inter-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Bold.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("fonts/Inter-Black.ttf") format("truetype");font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("fonts/RobotoMono-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Roboto Mono";src:url("fonts/RobotoMono-Medium.woff2") format("woff2");font-weight:500;font-display:swap}

:root{
	color-scheme:light;
	--ink:#111111;
	--paper:#FFFFFF;
	--ground:#F3F3F2;
	--stone:#58595A;
	--silver:#AAABAC;
	--rule:#DCDCDA;
	--block:#111111;
	--block-ink:#FFFFFF;
	--ok:#2E9E3A;
	--error:#B42318;
	--brand:#111111;
	--brand-ink:#FFFFFF;
	--f-display:"Inter",Arial,sans-serif;
	--f-body:"Inter",Arial,sans-serif;
	--f-sign:"Roboto Mono",ui-monospace,Menlo,Consolas,monospace;
	--title-style:normal;
	--title-weight:800;
	--invert:none;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
	color-scheme:dark;
	--ink:#F2F2F1;--paper:#161617;--ground:#0D0D0E;--stone:#A3A4A5;--silver:#6B6C6D;--rule:#2A2A2C;
	--block:#F2F2F1;--block-ink:#111111;--ok:#4CC45A;--error:#F97066;--invert:invert(1);
}}
:root[data-theme="dark"]{
	color-scheme:dark;
	--ink:#F2F2F1;--paper:#161617;--ground:#0D0D0E;--stone:#A3A4A5;--silver:#6B6C6D;--rule:#2A2A2C;
	--block:#F2F2F1;--block-ink:#111111;--ok:#4CC45A;--error:#F97066;--invert:invert(1);
}
/* Kunden mit eigener Farbe: Wegweiser-Block in Markenfarbe statt Schwarz/Weiss */
.has-brand{--block:var(--brand);--block-ink:var(--brand-ink)}
[data-title-style="italic"]{--title-style:italic;--title-weight:900}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before{transition:none!important;animation:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased;
	padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:inherit}
img,svg{max-width:100%}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.invert-dark{filter:var(--invert)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Beschriftung */
.sign{font:500 11px/1.3 var(--f-sign);letter-spacing:.14em;text-transform:uppercase}
.sign::before{content:"// ";color:var(--silver)}
.has-brand .sign::before{color:var(--brand)}
.caption{font:400 12px/1.5 var(--f-sign);color:var(--stone)}

/* Kopf */
.top{max-width:1240px;margin:0 auto;padding-block:40px 32px;display:flex;flex-wrap:wrap;gap:24px 48px;align-items:end;justify-content:space-between}
.top-logo{display:block;width:min(400px,100%);color:var(--ink);text-decoration:none}
.top-logo img{display:block;max-height:88px;width:auto}
.top-logo .wordmark{font:var(--title-style) var(--title-weight) clamp(36px,6vw,64px)/1 var(--f-display);letter-spacing:-.04em;overflow-wrap:anywhere}
.meta{display:grid;grid-template-columns:auto auto;gap:6px 20px;margin:0;font:400 12px/1.3 var(--f-sign);color:var(--stone)}
.meta dt{letter-spacing:.12em;text-transform:uppercase}
.meta dd{margin:0;color:var(--ink);font-variant-numeric:tabular-nums}

/* Gerüst */
.frame{max-width:1240px;margin:0 auto;display:grid;grid-template-columns:240px minmax(0,1fr);gap:24px;align-items:start;padding-bottom:64px}
.frame.single{grid-template-columns:minmax(0,1fr)}
.frame>*{min-width:0}
.index{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);background:var(--block);color:var(--block-ink);padding:28px 0 20px}
.index ol{list-style:none;margin:0;padding:0}
.index a{display:grid;grid-template-columns:34px 1fr 10px;align-items:center;padding:10px 28px;text-decoration:none;
	font:500 12px/1.2 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;color:color-mix(in srgb,var(--block-ink) 60%,transparent);transition:color .15s}
.index a span:first-child{font-variant-numeric:tabular-nums}
.index a i{width:5px;height:5px;border-radius:50%;background:currentColor;justify-self:end;opacity:.6}
.index a:hover,.index a[aria-current="true"]{color:var(--block-ink)}
.index a[aria-current="true"] i{width:8px;height:8px;opacity:1}
.index a .lock{font-style:normal;justify-self:end;font-size:10px}
.index .client{margin:22px 28px 0;padding-top:18px;border-top:1px solid color-mix(in srgb,var(--block-ink) 22%,transparent);
	font:400 11px/1.6 var(--f-sign);letter-spacing:.06em;color:color-mix(in srgb,var(--block-ink) 70%,transparent);overflow-wrap:anywhere}
.index .client b{display:block;color:var(--block-ink);font-weight:500;letter-spacing:.12em;text-transform:uppercase}
.index .client a{display:inline;padding:0;color:inherit;font:inherit;text-transform:none;letter-spacing:inherit}
.index .actions{margin:16px 28px 0;display:grid;gap:8px}

main.stack{display:grid;gap:24px;min-width:0}
.panel{background:var(--paper);padding:clamp(24px,4vw,56px);scroll-margin-top:24px;min-width:0}
.head{display:grid;grid-template-columns:auto 1fr;gap:4px 24px;align-items:end;margin-bottom:32px}
.num{grid-row:1/3;font:400 clamp(64px,9vw,112px)/.8 var(--f-sign);letter-spacing:-.06em;color:transparent;
	-webkit-text-stroke:1.2px var(--ink);font-variant-numeric:tabular-nums}
.has-brand .num{-webkit-text-stroke-color:var(--brand)}
:root[data-theme="dark"] .has-brand .num{-webkit-text-stroke-color:var(--ink)}
h1,h2{margin:0;font-family:var(--f-display);font-style:var(--title-style);font-weight:var(--title-weight);letter-spacing:-.035em;text-wrap:balance}
h1{font-size:clamp(40px,7vw,88px);line-height:.95}
h2{font-size:clamp(30px,4vw,48px);line-height:1}
h3{margin:0;font:700 17px/1.3 var(--f-display);letter-spacing:-.01em}
.lede{max-width:62ch;color:var(--stone);margin:0 0 32px}
.muted{color:var(--stone)}

/* Logo */
.stage{background:var(--brand);color:var(--brand-ink);padding:clamp(28px,6vw,72px);display:grid;place-items:center;min-height:220px}
.stage img{display:block;width:100%;max-width:640px;max-height:260px;object-fit:contain}
.variants{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px;margin-top:24px}
.variant{display:grid;gap:10px;align-content:start}
.variant .tile{aspect-ratio:3/2;display:grid;place-items:center;padding:14%;outline:1px solid var(--rule);outline-offset:-1px}
.variant .tile img{max-height:100%;width:100%;object-fit:contain}
.tile.bg-light{background:#FFFFFF}
.tile.bg-dark{background:#111111}
.tile.bg-checker{background:repeating-conic-gradient(#E6E6E4 0 25%,#FFFFFF 0 50%) 0 0/20px 20px}
.variant .row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}
.export{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.export input{width:88px;min-height:32px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:400 12px/1 var(--f-sign);padding:6px 8px}

/* Regeln */
.rules{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px}
.rule{display:grid;grid-template-rows:auto auto 1fr;gap:12px}
.rule figure{margin:0;aspect-ratio:4/3;background:#F3F3F2;color:#58595A;display:grid;place-items:center;position:relative;padding:16px}
.rule figure img{max-width:70%;max-height:60%}
.rule p{margin:0;color:var(--stone);font-size:15px}
.clear{position:relative;padding:28px;outline:1px dashed #58595A;display:grid;place-items:center}
.clear img{width:120px;max-width:100%}
.clear .u{position:absolute;font:500 10px/1 var(--f-sign);color:#58595A}
.sizes{display:flex;align-items:end;gap:28px}
.sizes div{display:grid;gap:8px;justify-items:center;font:400 10px/1 var(--f-sign);color:#58595A;font-variant-numeric:tabular-nums}
.dont{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:86%}
.dont span{aspect-ratio:2/1;display:grid;place-items:center;background:#FFFFFF;position:relative;overflow:hidden}
.dont span::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,transparent calc(50% - .75px),#E32227 calc(50% - .75px),#E32227 calc(50% + .75px),transparent calc(50% + .75px))}
.dont img{width:62%}

/* Farben */
.colors{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:16px}
.chip .sw{aspect-ratio:1/1;display:flex;align-items:end;padding:14px;font:500 11px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;outline:1px solid var(--rule);outline-offset:-1px}
.chip h3{padding-top:12px;font-size:15px}
.chip small{display:block;font:400 12px/1.4 var(--f-body);color:var(--stone)}
.chip dl{margin:0;padding-top:10px;display:grid;grid-template-columns:auto 1fr;gap:0 12px;font:400 12px/1.9 var(--f-sign)}
.chip dt{color:var(--stone)}
.chip dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.copy{all:unset;cursor:pointer;border-bottom:1px solid transparent}
.copy:hover,.copy:focus-visible{border-bottom-color:currentColor}

/* Typografie */
.type{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px}
.specimen{background:var(--ground);padding:clamp(20px,3vw,36px);display:grid;gap:16px;align-content:start}
.specimen .big{font-size:clamp(64px,9vw,120px);line-height:.85;letter-spacing:-.05em}
.specimen .glyphs{font-size:15px;color:var(--stone);overflow-wrap:anywhere;line-height:1.7}
.specimen .meta-line{display:flex;flex-wrap:wrap;gap:6px 16px;font:400 11px/1.4 var(--f-sign);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}

/* Dateien */
.files{display:grid;border-top:1px solid var(--ink)}
.file{display:grid;grid-template-columns:44px minmax(0,1fr) auto auto;gap:18px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.file .ext{width:44px;height:44px;display:grid;place-items:center;background:var(--ground);font:500 10px/1 var(--f-sign);letter-spacing:.08em;text-transform:uppercase}
.file h3{font-size:15px;font-weight:600;overflow-wrap:anywhere}
.file p{margin:2px 0 0;font:400 12px/1.4 var(--f-sign);color:var(--stone);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.state{font:500 10px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;display:inline-flex;align-items:center;gap:8px;color:var(--stone);white-space:nowrap}
.state::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.state.lock::before{background:transparent;border:1.5px solid var(--stone)}
.notice{margin-top:24px;display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;background:var(--ground);padding:20px 24px}
.notice p{margin:0;color:var(--stone)}
.links{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px}
.links a{display:inline-flex;gap:10px;align-items:center;padding:12px 16px;border:1px solid var(--rule);text-decoration:none;font:500 11px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase}
.links a:hover{border-color:var(--ink)}
.links a span{color:var(--stone);text-transform:none;letter-spacing:.02em}

/* Knöpfe und Formulare */
.btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--ink);background:var(--ink);color:var(--paper);
	font:500 11px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;min-height:40px;cursor:pointer;text-decoration:none;white-space:nowrap}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.brand{background:var(--brand);border-color:var(--brand);color:var(--brand-ink)}
.btn.small{padding:8px 10px;min-height:32px}
.btn:hover{opacity:.86}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.index .btn{border-color:var(--block-ink);background:var(--block-ink);color:var(--block)}
.index .btn.ghost{background:transparent;color:var(--block-ink)}
.field{display:grid;gap:6px;font:500 11px/1.2 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.field input{font:400 16px/1.4 var(--f-body);letter-spacing:0;text-transform:none;color:var(--ink);background:var(--paper);border:1px solid var(--rule);padding:12px;min-height:44px;width:100%}
.field input:focus{border-color:var(--ink);outline:none}
.form{display:grid;gap:16px}
.form.cols{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));align-items:end}
.alert{padding:14px 16px;border-left:3px solid var(--ok);background:var(--ground);margin-bottom:20px}
.alert.error{border-left-color:var(--error)}
.alert code{font:500 15px/1.4 var(--f-sign);background:var(--paper);padding:2px 6px}

/* Tabelle (Admin) */
.table{display:grid;border-top:1px solid var(--ink)}
.table .tr{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:16px;align-items:center;padding:14px 0;border-bottom:1px solid var(--rule)}
.table .tr p{margin:2px 0 0;font:400 12px/1.4 var(--f-sign);color:var(--stone);overflow-wrap:anywhere}
.table .tools{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.table form{display:inline}
.switch{display:inline-flex;align-items:center;gap:8px;font:500 10px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);background:none;border:1px solid var(--rule);padding:8px 10px;min-height:32px;cursor:pointer}
.switch::before{content:"";width:7px;height:7px;border-radius:50%;border:1.5px solid var(--stone)}
.switch[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.switch[aria-pressed="true"]::before{background:var(--ok);border-color:var(--ok)}

/* Referenzen (Startseite) */
.refs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:16px}
.ref{display:grid;gap:12px;text-decoration:none;color:inherit}
.ref .tile{aspect-ratio:3/2;background:var(--ground);display:grid;place-items:center;padding:14%;transition:background .2s}
.ref .tile img{max-height:100%;width:100%;object-fit:contain}
.ref .tile .wordmark{font:800 24px/1 var(--f-display);letter-spacing:-.03em;text-align:center;overflow-wrap:anywhere}
.ref:hover .tile{background:var(--rule)}

/* Dialog */
dialog.login{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(440px,calc(100% - 32px))}
dialog.login::backdrop{background:rgba(0,0,0,.5)}
dialog.login .inner{padding:32px;display:grid;gap:16px}
dialog.login .close{justify-self:end}

.foot{max-width:1240px;margin:0 auto;padding-block:0 48px;display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;
	font:400 11px/1.4 var(--f-sign);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.foot a{text-decoration:none}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom,0px));transform:translate(-50%,12px);background:var(--ink);color:var(--paper);
	font:500 11px/1 var(--f-sign);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;opacity:0;pointer-events:none;transition:.2s;z-index:20}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media (max-width:980px){
	.frame{grid-template-columns:minmax(0,1fr)}
	.index{position:static;padding:4px 0}
	.index ol{display:flex;overflow-x:auto}
	.index a{grid-template-columns:auto auto;gap:8px;padding:12px 16px;white-space:nowrap}
	.index a i,.index .client{display:none}
	.index .actions{margin:8px 16px 12px;display:flex;flex-wrap:wrap}
}
@media (max-width:560px){
	.file{grid-template-columns:44px minmax(0,1fr);row-gap:10px}
	.file .state,.file .btn{grid-column:2;justify-self:start}
	.head{grid-template-columns:1fr}
	.num{grid-row:auto}
	.table .tr{grid-template-columns:1fr}
	.table .tools{justify-content:flex-start}
}

/* Bilder in zentrierten Rasterflächen: Spur auf verfügbare Breite begrenzen, sonst setzt das SVG seine Eigenbreite durch (Handy-Überlauf) */
.stage,.variant .tile,.ref .tile,.rule figure{grid-template-columns:minmax(0,1fr);justify-items:center}

/* Logos in Kacheln: Bild absolut eingepasst, damit SVGs ohne Grössenangabe die Kachel nicht sprengen (01.11.2026) */
.variant,.ref{min-width:0}
.variant .tile,.ref .tile{position:relative;overflow:hidden}
.variant .tile img,.ref .tile img{position:absolute;inset:14%;width:72%;height:72%;max-height:none;object-fit:contain}
.stage img{width:min(100%,640px);height:auto;aspect-ratio:auto}
.export select{min-height:32px;border:1px solid var(--rule);background:var(--paper);color:var(--ink);font:400 12px/1 var(--f-sign);padding:6px}
h1,h2{overflow-wrap:anywhere}