/* ============================================================ templates.css — DIE ZENTRALE VORLAGENDATEI ┌──────────────────────────────────────────────────────────┐ │ HIER stehen alle Bausteine, die auf MEHR ALS EINER │ │ Seite vorkommen. Wer einen Knopf, ein Badge, eine │ │ Pille, eine Karte oder eine Listenzeile braucht, │ │ nimmt sie von hier — und ändert sie auch nur hier. │ └──────────────────────────────────────────────────────────┘ Geladen von: index.html · about/index.html · styleguide/index.html (404.html ist bewusst eigenständig und trägt ihre paar Zeilen selbst, weil sie von jeder falschen Adresse aus ausgeliefert wird und relative Pfade dort ins Leere zeigen.) WAS WOHIN GEHÖRT styles/base.css Tokens: Farben, Schriften, Achsen, Grundlagen styles/site.css das Aussehen DIESER Website (Raster, Sektionen) styles/templates.css ← diese Datei: die geteilten Bausteine styles/brutal-light.css die alternative Palette («Brutalist Light») home/ about/ work/ components/… nur noch Seiten- bzw. Komponenten- spezifisches, keine Bausteine mehr SIE SETZT NUR TOKENS EIN, nie feste Farben oder Schriftnamen (`var(--ink)`, `var(--mono-font)`, `var(--axis-ui)` …). Dadurch läuft dieselbe Vorlage in der cremefarbenen Palette der Website UND in der hellen «Brutalist Light»-Palette des Styleguides. AUFBAU 1 Schriftrollen — welches Element trägt welche der zwei Schriften 2 Knöpfe (Rahmen bei Hover) + die eine laute Ausnahme 3 Badges · Pills · Tags 4 Karten · Listenzeilen · Trenner ============================================================ */ .btn{ display: inline-flex; align-items: center; min-height: 44px; /* Touch-Ziel */ padding: 4px 0.5em; /* reservierter Platz — verhindert den Sprung */ border: 1px solid transparent; /* Rahmen immer da, nur unsichtbar */ border-radius: 0; background: none; /* ausdrücklich KEINE Hintergrundbox */ color: var(--ink); font-family: var(--font-ui); font-variation-settings: var(--axis-ui); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; background-image: none; /* kein wachsender Link-Unterstrich */ cursor: pointer; transition: color var(--t), font-variation-settings var(--t), border-color var(--t); } .btn:hover, .btn:focus-visible{ font-variation-settings: var(--axis-ui-bold); border-color: var(--blue); } /* Farbvarianten — der Rahmen nimmt die Akzentfarbe, der Text bleibt schwarz. Rot als Textfarbe käme auf dem hellen Grund nur auf 3.4:1. */ .btn--cta:hover, .btn--cta:focus-visible{ border-color: var(--red); } .btn--blue:hover, .btn--blue:focus-visible{ color: var(--blue); border-color: var(--blue); } /* Der aktive/gedrückte Zustand darf sichtbar sein, ohne eine Box zu bauen */ .btn:active{ color: var(--blue); } /* --- Ausnahme mit Absicht: der EINE harte Knopf ---------------------- Die Rahmen-Geste ist leise. Wenn irgendwo ein Handlungsaufruf laut sein MUSS (Kontakt, «Projekt anfragen»), gibt es diese eine Variante mit Fläche und hartem, versetztem Schatten. Sie ist bewusst die Ausnahme — zwei laute Knöpfe nebeneinander heben sich gegenseitig auf. Schwarze Schrift auf Rot: 5.8:1 (weiss käme nur auf 3.6:1). */ .btn--box{ padding: 12px 22px; border: var(--line-bold) solid var(--ink); background: var(--red); box-shadow: var(--shadow); transition: transform var(--t), box-shadow var(--t), background-color var(--t); } .btn--box:hover, .btn--box:focus-visible{ transform: translate(2px, 2px); box-shadow: var(--shadow-in); background: var(--yellow); } .btn--box:active{ transform: translate(4px, 4px); box-shadow: 0 0 0 var(--ink); } /* ============================================================ 2b. DIE KNÖPFE DER WEBSITE — im Ruhezustand ohne Fläche, nur Text ============================================================ */ .site-nav-link, .work-filter-btn, .case-btn, .case-link{ border: 1px solid transparent; /* Rahmen immer da, nur unsichtbar — reserviert den Platz */ border-radius: 0; background: transparent; padding-inline: 0.5em; font-size: var(--btn-size); letter-spacing: var(--btn-tracking); color: var(--ink); transition: color 0.2s ease, font-variation-settings 0.2s ease, border-color 0.2s ease; } /* Hover/Fokus: Rechteck mit blauem Rahmen, innen ohne Fläche — kein [ ] mehr */ .site-nav-link:hover, .site-nav-link:focus-visible, .work-filter-btn:hover, .work-filter-btn:focus-visible, .case-btn:hover, .case-btn:focus-visible, .case-link:hover, .case-link:focus-visible{ color: var(--blue-text); border-color: var(--blue-text); } /* Der schwebende CTA behält seine Fläche (siehe nav.css) und bekommt darum weder den Hover-Rahmen noch einen durchsichtigen Grund — nur die grössere Schrift. */ .site-cta-btn{ font-size: var(--btn-size); letter-spacing: var(--btn-tracking); } /* Ausgewählte Knöpfe: blaue Schrift + fetterer Schnitt, KEINE Fläche (User 2026-09-25: eine Knopf-Logik für die ganze Seite, vorher blaues Rechteck). Gilt auch für «hier stehst du gerade» in der Kopfzeile. */ .site-nav-link[aria-current="page"], .work-filter-btn[aria-pressed="true"]{ color: var(--blue-text); font-variation-settings: var(--btn-axis-active); } /* Der Zähler in den Filtern tritt zurück, damit die Rubrik führt */ .work-filter-count{ margin-left: 0.35em; opacity: 0.55; } /* ============================================================ 3. BADGES · PILLS · TAGS — alles in der Terminal-Schrift ============================================================ */ .badge{ display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px; border: var(--line) solid var(--ink); background: var(--yellow); font-family: var(--font-ui); font-variation-settings: var(--axis-ui); font-size: var(--t-label); letter-spacing: 0.12em; text-transform: uppercase; } .badge--blue{ background: var(--blue); color: #fff; } .badge--red{ background: var(--red); color: var(--ink); } .badge--plain{ background: transparent; } /* Menü-Pillen: eine Reihe, der aktive Eintrag ist gefüllt */ .pills{ display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; } .pill{ display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border: var(--line) solid var(--ink); background: transparent; color: var(--ink); font-family: var(--font-ui); font-variation-settings: var(--axis-ui); font-size: var(--t-label); letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; background-image: none; cursor: pointer; transition: background-color var(--t), color var(--t), box-shadow var(--t); } .pill:hover, .pill:focus-visible{ background: var(--yellow); box-shadow: var(--shadow-in); } .pill[aria-current="true"], .pill[aria-pressed="true"]{ background: var(--ink); color: var(--surface); /* nicht --bg: das war das Blau der alten Seite */ font-variation-settings: var(--axis-ui-bold); } /* Zähler in einer Pille (z. B. «WORK 10») */ .pill-count{ margin-left: 8px; font-variant-numeric: tabular-nums; opacity: 0.7; } /* ============================================================ 4. KARTEN · ZEILEN · TRENNER ============================================================ */ .card{ border: var(--line-bold) solid var(--ink); background: var(--bg-2); padding: clamp(16px, 2vw, 28px); transition: transform var(--t), box-shadow var(--t); } .card--lift:hover{ transform: translate(-3px, -3px); box-shadow: var(--shadow-lg); } /* Listenzeile mit Hairline — das Grundmuster einer Übersicht */ .row{ display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--gap); padding: 14px 0; border-bottom: var(--line) solid var(--ink); background-image: none; color: inherit; transition: padding-left var(--t), background-color var(--t); } .row:hover{ padding-left: 10px; background: var(--yellow); } .hr{ height: 0; margin: 0; border: 0; border-top: var(--line) solid var(--ink); }