/* Auftritt 2026 — Fundament aller öffentlichen Seiten (Spec docs/superpowers/specs/2026-10-23-neuer-auftritt-design.md, Entscheide E1–E12 und Designkritik 23.10.2026). Nur Werte aus :root verwenden; neue Farbe/Grösse = neuer Entscheid. */ :root { /* E3 Farbwelt A + Prise C */ --papier: #FBFAF7; --kalk: #EFEAE0; --espresso: #1E1B16; --tinte-2: #3D3830; --leise: #6B6458; --linie: #E4DED2; --linie-dunkel: rgba(30, 27, 22, .16); --knopfgold: #9A6E06; --knopfgold-druck: #7F5A04; --hellgold: #E9C46A; --hellgold-druck: #F1D48C; --wuerfelgold: #D4AF37; --honig: #F6E7BC; --honig-schrift: #4A3606; /* Onboarding */ --gletscher: #DCE8EF; --gletscher-schrift: #102A38; /* Recruiting */ --salbei: #DCE8DF; --salbei-schrift: #12301F; /* Werkzeuge */ /* E4 Schrift */ --schrift-titel: 'Bricolage Grotesque', 'DM Sans', system-ui, sans-serif; --schrift-text: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --opsz-gross: 'opsz' 96; --opsz-karte: 'opsz' 28; /* E5 Formen */ --r-flaeche: 28px; --r-karte: 20px; --r-rahmen: 18px; --r-bild: 10px; --r-knopf: 12px; /* E6 Raum */ --rand: 20px; --breite: 1180px; --text-breite: 720px; --abstand-abschnitt: 72px; --innen-y: 44px; --innen-x: 22px; } @media (min-width: 768px) { :root { --rand: 40px; --abstand-abschnitt: 104px; --innen-y: 72px; --innen-x: 56px; } } @media (min-width: 1100px) { :root { --rand: 56px; --abstand-abschnitt: 128px; --innen-y: 88px; --innen-x: 72px; } } /* Grundlage — Grundregeln ohne Gewicht (:where), jeder Baustein überstimmt sie */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; } body.auftritt { margin: 0; background: var(--papier); color: var(--espresso); font-family: var(--schrift-text); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } @media (min-width: 768px) { body.auftritt { font-size: 20px; } } :where(.auftritt) img { display: block; max-width: 100%; height: auto; } :where(.auftritt) :where(h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd) { margin: 0; } :where(.auftritt) ul { padding: 0; list-style: none; } :where(.auftritt) a { color: inherit; } :where(.auftritt) p { text-wrap: pretty; } .auftritt :focus-visible { outline: 3px solid var(--espresso); outline-offset: 3px; border-radius: 4px; } .auftritt .dunkel :focus-visible { outline-color: var(--hellgold); } .huelle { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); } .sprung { position: absolute; left: -9999px; } .sprung:focus { left: 16px; top: 16px; z-index: 100; background: var(--espresso); color: #fff; padding: 10px 14px; border-radius: 8px; } .nb { white-space: nowrap; } /* E4 Stufen (acht, inkl. Kartentext 17 nach Designkritik) */ .zeile { font-family: var(--schrift-text); font-size: 14px; line-height: 1.3; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .versprechen { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; letter-spacing: -.01em; font-size: 40px; line-height: 1.03; text-wrap: balance; } .titel { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; letter-spacing: -.01em; font-size: 30px; line-height: 1.08; text-wrap: balance; } .kartentitel { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; letter-spacing: -.01em; font-size: 22px; line-height: 1.15; text-wrap: balance; } .einleitung { font-size: 19px; line-height: 1.5; color: var(--tinte-2); } .text { font-size: 18px; line-height: 1.55; color: var(--tinte-2); } .kartentext { font-size: 17px; line-height: 1.5; color: var(--tinte-2); } .klein { font-size: 15px; line-height: 1.45; color: var(--leise); } @media (min-width: 768px) { .versprechen { font-size: 64px; } .titel { font-size: 44px; } .kartentitel { font-size: 26px; } .einleitung { font-size: 22px; } .text { font-size: 20px; } } .betont { color: var(--knopfgold); } .dunkel .betont { color: var(--hellgold); } /* E7 Knopf und Verweis */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 24px; border-radius: var(--r-knopf); border: 0; cursor: pointer; background: var(--knopfgold); color: #fff; font: 600 17px/1.2 var(--schrift-text); text-decoration: none; text-align: center; transition: background-color .2s ease; } .knopf:hover { background: var(--knopfgold-druck); } .dunkel .knopf { background: var(--hellgold); color: var(--espresso); } .dunkel .knopf:hover { background: var(--hellgold-druck); } .verweis { font-weight: 600; font-size: 17px; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } .verweis:hover { text-decoration-thickness: 2.5px; } .dunkel .verweis { color: #fff; } .aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; } /* Flächen */ .abschnitt { margin-top: var(--abstand-abschnitt); } .flaeche { background: var(--kalk); border-radius: var(--r-flaeche); padding: var(--innen-y) var(--innen-x); } .dunkel { background: var(--espresso); color: #fff; } .kopf-abschnitt { max-width: var(--text-breite); } .kopf-abschnitt .einleitung { margin-top: 18px; } /* Rahmen um echte App-Ausschnitte. Ausschnitt per Variablen in Pixeln der Aufnahme (Breite --w, Standard 1440). */ .rahmen { background: var(--espresso); border-radius: var(--r-rahmen); padding: 8px; box-shadow: 0 30px 60px -32px rgba(30,27,22,.45); } @media (min-width: 768px) { .rahmen { padding: 12px; } } .rahmen--honig { background: var(--honig); box-shadow: none; } .rahmen--gletscher { background: var(--gletscher); box-shadow: none; } .rahmen--salbei { background: var(--salbei); box-shadow: none; } .ausschnitt { position: relative; overflow: hidden; border-radius: var(--r-bild); background: #F7F6F3; aspect-ratio: var(--b) / var(--h); } .ausschnitt img { position: absolute; max-width: none; width: calc(var(--w, 1440) / var(--b) * 100%); left: calc(var(--x) / var(--b) * -100%); top: calc(var(--y) / var(--h) * -100%); } /* Mindestmassstab 0,6 (Tablets 768–1099 px, Designprüfung 23.10.2026): sonst schrumpfte die App-Schrift im Bild auf 5–6 px. --s = Bildschirm-px je App-px: so breit wie der Ausschnitt es zulässt, aber nie unter 0,6 — fehlt der Platz, wird rechts angeschnitten statt weiter verkleinert. Die Höhe trägt das (alle Ausschnitte haben eins), damit die Breite allein Sache des Layouts bleibt (eine Mindesthöhe am Ausschnitt zog über aspect-ratio Rasterspalten auseinander). Ohne Container-Einheiten gilt die Regel darüber unverändert. */ @supports (width: 1cqw) { .ausschnitt { container-type: inline-size; aspect-ratio: auto; } .ausschnitt > picture { display: block; --s: max(calc(100cqw / var(--b)), 0.6px); height: calc(var(--h) * var(--s)); } .ausschnitt img { width: calc(var(--w, 1440) * var(--s)); left: calc(var(--x) * var(--s) * -1); top: calc(var(--y) * var(--s) * -1); } } /* E2 Würfel-Figur: SVG-Posen (img/auftritt/wuerfel-.svg), nie über Inhalt, höchstens eine je Abschnitt */ .figur { position: absolute; width: var(--g, 88px); height: auto; pointer-events: none; user-select: none; } @media (min-width: 768px) { .figur { width: var(--g-gross, var(--g, 120px)); } } /* Kopf */ .hinweis { background: var(--kalk); font-size: 15px; line-height: 1.4; } .hinweis .huelle { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; align-items: center; padding-top: 10px; padding-bottom: 10px; text-align: center; } .hinweis a { font-weight: 600; } .kopf { position: sticky; top: 0; z-index: 50; background: rgba(251,250,247,.94); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid transparent; transition: border-color .2s ease; } .kopf.ist-gerollt { border-bottom-color: var(--linie); } .kopf-zeile { display: flex; align-items: center; gap: 24px; height: 68px; } .marke-logo { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--espresso); } .marke-logo b { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; background: var(--wuerfelgold); color: var(--espresso); font: 700 14px/1 var(--schrift-text); letter-spacing: 0; } .marke-logo .wort span { color: var(--knopfgold); } .navi { display: none; margin-left: auto; align-items: center; gap: 4px; font-size: 17px; font-weight: 500; } .navi > a, .navi-gruppe > button { display: inline-flex; align-items: center; gap: 6px; padding: 10px 12px; border-radius: 10px; text-decoration: none; background: none; border: 0; color: inherit; font: inherit; cursor: pointer; } .navi > a:hover, .navi-gruppe > button:hover, .navi-gruppe.ist-offen > button { background: var(--kalk); } .navi-gruppe { position: relative; } .navi-gruppe > button svg { width: 14px; height: 14px; transition: transform .2s ease; } .navi-gruppe.ist-offen > button svg { transform: rotate(180deg); } .untermenue { display: none; position: absolute; left: -12px; top: calc(100% + 8px); width: 420px; padding: 10px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: 0 24px 48px -24px rgba(30,27,22,.3); } .navi-gruppe.ist-offen .untermenue { display: grid; } .untermenue a { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; text-decoration: none; } .untermenue a:hover { background: var(--papier); } /* Menütitel als span, nicht strong: Gestaltung, keine Betonung (Suchmaschinen werten strong als Gewicht). Klasse schlägt .untermenue span */ .untermenue .untermenue-titel { font-size: 17px; font-weight: 600; line-height: inherit; color: inherit; } .untermenue span { font-size: 15px; line-height: 1.4; color: var(--leise); } .kopf-rechts { margin-left: auto; display: flex; align-items: center; gap: 14px; } .kopf-rechts .anmelden { display: none; font-size: 17px; font-weight: 500; text-decoration: none; } /* Kopf-Knopf ruhig (Entscheid EE 23.10.2026): Kontur statt Goldfläche, die Seite drängt nicht */ .kopf .kopf-rechts > .knopf { min-height: 44px; padding: 0 16px; font-size: 15px; white-space: nowrap; background: transparent; color: var(--espresso); box-shadow: inset 0 0 0 1.5px var(--espresso); } .kopf .kopf-rechts > .knopf:hover { background: var(--espresso); color: #fff; } /* Menüknopf: drei feine Striche ohne Rahmen, werden beim Öffnen zum X (Entscheid EE 23.10.2026) */ .menue-knopf { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -10px; border: 0; background: transparent; color: var(--espresso); cursor: pointer; } .menue-knopf span { position: absolute; left: 11px; width: 22px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease, top .2s ease; } .menue-knopf span:nth-child(1) { top: 15px; } .menue-knopf span:nth-child(2) { top: 21px; } .menue-knopf span:nth-child(3) { top: 27px; } .menue-knopf[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); } .menue-knopf[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .menue-knopf[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); } /* Handy-Menü: ganze Fläche unter dem Kopf, grosse Einträge, Seite dahinter rollt nicht */ .menue { display: none; position: fixed; left: 0; right: 0; top: var(--kopf-unten, 68px); bottom: 0; z-index: 49; background: var(--papier); overflow-y: auto; overscroll-behavior: contain; border-top: 1px solid var(--linie); } .menue.ist-offen { display: block; } body.menue-offen { overflow: hidden; } /* backdrop-filter macht den Kopf zum Bezugsrahmen fixierter Kinder — bei offenem Menü aus, sonst bleibt die Fläche 0 hoch */ body.menue-offen .kopf { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--papier); } .menue > ul { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 20px var(--rand) 40px; display: grid; } .menue > ul > li:not(.menue-aktionen) > a, .menue summary { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: -.01em; text-decoration: none; border-bottom: 1px solid var(--linie); cursor: pointer; list-style: none; } .menue summary::-webkit-details-marker { display: none; } .menue summary::after { content: ""; width: 10px; height: 10px; margin-right: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); transition: transform .2s ease; } .menue details[open] summary::after { transform: rotate(-135deg) translateY(-3px); } .menue details ul { padding: 6px 0 14px; display: grid; } .menue details li a { display: block; padding: 9px 0; font-size: 17px; font-weight: 500; text-decoration: none; color: var(--tinte-2); } .menue .menue-aktionen { display: grid; gap: 14px; margin-top: 28px; border: 0; } .menue .menue-aktionen .knopf { width: 100%; } .menue .menue-aktionen .verweis { justify-self: center; display: inline-flex; align-items: center; min-height: 44px; } /* Tippfläche ≥ 44 px (vorher 26 px) */ /* Logo (260 px), Knopf und Menü brauchen nebeneinander 490 px — darunter schob der Knopf das Menü aus dem Bild (iPhone Pro Max 430 px, 23.10.2026). Mit Luft erst ab 520 px; am Handy steht der Aufruf gross im Einstieg. */ @media (max-width: 519px) { .kopf .kopf-rechts > .knopf { display: none; } } /* Desktop-Navigation erst ab 1100 px (EE 23.10.2026: zwischen 1000 und 1100 px passten Logo, Navigation und Knöpfe nicht in eine Zeile, das Logo schrumpfte auf 129 px) — darunter das Menü */ @media (min-width: 1100px) { .navi { display: flex; } .kopf-rechts { margin-left: 8px; } .kopf-rechts .anmelden { display: inline; } .menue-knopf, .menue.ist-offen { display: none; } } /* Seitenkopf der Unterseiten */ /* Seitenkopf beginnt an der Logo-Kante (volle Hülle), nur der Inhalt ist schmal */ .seitenkopf { position: relative; padding-top: 48px; } .seitenkopf > * { max-width: 860px; } .seitenkopf .zeile { margin-bottom: 16px; } .seitenkopf .einleitung { margin-top: 22px; max-width: 44ch; } .seitenkopf .aktionen { margin-top: 30px; } @media (min-width: 768px) { .seitenkopf { padding-top: 80px; } } /* 1 Einstieg (Startseite): Text oben, zwei Fenster gross darunter */ .einstieg { padding-top: 44px; } .einstieg-text { max-width: 860px; } .einstieg .versprechen { max-width: 20ch; } .einstieg .einleitung { margin-top: 22px; max-width: 44ch; } .einstieg .aktionen { margin-top: 30px; } .einstieg .klein { margin-top: 16px; } .einstieg-bild { position: relative; margin-top: 88px; } .fenster--hinten { display: none; } .fenster--vorne { position: relative; } .fenster--vorne .figur { --g: 76px; --g-gross: 132px; right: 16px; top: -64px; z-index: 3; } /* Handy: Phasen und «3 überfällig» (Faktor ≈ 1), hinten ohne Mailadresse und «Wie erfahren» */ .ausschnitt--checkliste { --x: 236; --y: 262; --b: 335; --h: 148; } /* Die Bewerbung ist eine ganze Karte (Profil, Status, Stelle) vor der Checkliste — nichts mehr mitten im Wort abgeschnitten; erzählt die Überschrift: von der Bewerbung bis zum ersten Arbeitstag */ .ausschnitt--bewerbung { --x: 228; --y: 132; --b: 303; --h: 282; } @media (min-width: 768px) { .einstieg { padding-top: 64px; } .einstieg-text { margin: 0 auto; text-align: center; } .einstieg .versprechen, .einstieg .einleitung { margin-left: auto; margin-right: auto; } .einstieg .aktionen { justify-content: center; } .einstieg-bild { margin-top: 64px; padding-bottom: 48px; } .fenster--hinten { display: block; position: absolute; left: 0; bottom: 0; width: 29%; z-index: 3; box-shadow: 0 34px 60px -30px rgba(30,27,22,.42); } .fenster--vorne { width: 87%; margin: 0 0 0 auto; z-index: 2; } .fenster--vorne .figur { right: 36px; top: -108px; } .ausschnitt--checkliste { --x: 215; --y: 60; --b: 1225; --h: 480; } } @media (min-width: 1100px) { .einstieg { padding-top: 80px; } } /* 2 Zeitstrahl «Ohne System / Mit» */ .zeitstrahl { margin-top: 40px; display: grid; gap: 0; } .zeitstrahl-kopf { display: none; } .zeitstrahl-zeile { display: grid; gap: 10px; padding: 22px 0; border-top: 1px solid var(--linie-dunkel); } .zeitstrahl-zeile .tag { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; line-height: 1.15; } .zeitstrahl .ohne { color: var(--leise); } .zeitstrahl .mit { color: var(--espresso); } .zeitstrahl-zeile .ohne::before, .zeitstrahl-zeile .mit::before { display: block; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; margin-bottom: 4px; } .zeitstrahl-zeile .ohne::before { content: "Ohne System"; color: var(--leise); } .zeitstrahl-zeile .mit::before { content: "Mit HR Onboarding.ch"; color: var(--honig-schrift); } @media (min-width: 900px) { .zeitstrahl { margin-top: 56px; } .zeitstrahl-kopf, .zeitstrahl-zeile { display: grid; grid-template-columns: 200px 1fr 1fr; column-gap: 48px; } .zeitstrahl-kopf { align-items: end; padding-bottom: 16px; } .zeitstrahl-kopf > div { display: flex; align-items: flex-end; gap: 12px; } .zeitstrahl-kopf .ohne-kopf { color: var(--leise); } .zeitstrahl-kopf .mit-kopf { color: var(--honig-schrift); } .zeitstrahl-kopf .figur { position: static; width: 84px; } .zeitstrahl-zeile .ohne::before, .zeitstrahl-zeile .mit::before { content: none; } } /* 3 Module mit Brücke */ .module { position: relative; display: grid; gap: 14px; margin-top: 40px; } .modul { border-radius: var(--r-karte); padding: 28px 24px 26px; display: flex; flex-direction: column; gap: 14px; } .modul--recruiting { background: var(--gletscher); color: var(--gletscher-schrift); } .modul--onboarding { background: var(--honig); color: var(--honig-schrift); } .modul .kartentext { color: inherit; } .modul ul { border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent); } .modul li { padding: 12px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 22%, transparent); font-size: 17px; line-height: 1.5; } .modul .verweis { align-self: flex-start; margin-top: auto; padding-top: 6px; } .bruecke { position: relative; justify-self: center; display: inline-flex; align-items: center; gap: 12px; color: var(--espresso); font-size: 17px; font-weight: 600; line-height: 1.3; padding: 6px 0; } .bruecke-kreis { display: inline-grid; place-items: center; width: 48px; height: 48px; flex: none; border-radius: 50%; background: var(--espresso); color: var(--hellgold); transform: rotate(90deg); } .bruecke-kreis svg { width: 22px; height: 22px; } .bruecke .figur { display: none; } @media (min-width: 900px) { .module { grid-template-columns: 1fr 150px 1fr; gap: 0; margin-top: 64px; } .modul { padding: 36px 36px 32px; } .bruecke { flex-direction: column; text-align: center; align-self: center; padding: 0 12px; font-size: 15px; } .bruecke-kreis { width: 56px; height: 56px; transform: none; } .bruecke .figur { display: block; --g: 104px; left: 50%; bottom: calc(100% - 2px); transform: translateX(-50%); } } /* 4 Einblicke */ .einblicke { display: grid; gap: 64px; margin-top: 44px; } .einblick { display: grid; gap: 24px; align-items: center; } .einblick .text-block { display: grid; gap: 14px; align-content: start; max-width: 44ch; } .einblick .figur { --g: 80px; --g-gross: 112px; position: static; margin-top: 8px; } @media (min-width: 900px) { .einblicke { gap: 104px; margin-top: 72px; } /* Bildabschnitte (Entscheid EE 23.10.2026): Text 5 : Bild 7, Ausschnitte ≤ 440 px hoch — der Text steht beim Bild, nicht in einer leeren Spalte */ .einblick { grid-template-columns: 5fr 7fr; gap: 64px; } .einblick:nth-child(even) { grid-template-columns: 7fr 5fr; } .einblick:nth-child(even) .text-block { order: 2; } } /* 5 Fakten (Schweiz und Sicherheit) */ .schweiz { position: relative; } .schweiz .figur { --g: 80px; --g-gross: 120px; right: var(--innen-x); top: -58px; } @media (min-width: 768px) { .schweiz .figur { top: -92px; } } .fakten { display: grid; gap: 0; margin-top: 36px; border-top: 1px solid var(--linie-dunkel); } .fakten li { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--linie-dunkel); align-content: start; } .fakten strong { font-size: 17px; line-height: 1.4; font-weight: 600; } .fakten p { font-size: 17px; line-height: 1.5; color: var(--tinte-2); } .fakten a { white-space: nowrap; } .schweiz .verweis { display: inline-block; margin-top: 28px; } @media (min-width: 900px) { .fakten { grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 48px; } .fakten li { padding: 26px 0; } } /* 6 Preise */ .preise { display: grid; gap: 14px; margin-top: 40px; } .preis-karte { position: relative; border-radius: var(--r-karte); padding: 28px 24px; background: #fff; border: 1px solid var(--linie); display: flex; flex-direction: column; gap: 14px; } .preis-karte .betrag { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; letter-spacing: -.01em; font-size: 30px; line-height: 1.08; font-variant-numeric: tabular-nums; color: var(--espresso); } .preis-karte .betrag small { display: block; margin-top: 8px; font: 500 15px/1.45 var(--schrift-text); letter-spacing: 0; color: var(--leise); } .preis-karte .verweis, .preis-karte .knopf { margin-top: auto; align-self: flex-start; } .preis-karte--recruiting { border-top: 6px solid var(--gletscher); } .preis-karte--onboarding { border-top: 6px solid var(--honig); } .preis-karte.dunkel { background: var(--espresso); border-color: var(--espresso); } .preis-karte.dunkel .betrag { color: #fff; } .preis-karte.dunkel .kartentext, .preis-karte.dunkel .betrag small { color: rgba(255,255,255,.8); } .preis-karte.dunkel .zeile { color: var(--hellgold); } .preis-karte .figur { --g: 76px; --g-gross: 96px; right: 18px; top: -66px; } @media (min-width: 768px) { .preis-karte .figur { top: -86px; } } .preise-fuss { margin-top: 22px; } @media (max-width: 899px) { .preis-karte.dunkel { order: -1; margin-top: 56px; } } @media (min-width: 900px) { .preise { grid-template-columns: 1fr 1fr 1.15fr; gap: 20px; margin-top: 64px; align-items: stretch; } .preis-karte { padding: 32px 30px; } .preis-karte .betrag { font-size: 44px; } } /* 7 Häufige Fragen */ .fragen-raster { position: relative; } .fragen-raster .figur { display: none; } .fragen { margin-top: 36px; border-top: 1px solid var(--linie-dunkel); } .fragen details { border-bottom: 1px solid var(--linie-dunkel); } .fragen summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 0; min-height: 44px; } .fragen summary::-webkit-details-marker { display: none; } .fragen summary h3 { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; } .fragen summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s ease; } .fragen details[open] summary svg { transform: rotate(45deg); } .fragen details > div { padding: 0 0 24px; max-width: 64ch; } @media (min-width: 768px) { .fragen summary h3 { font-size: 26px; } } @media (min-width: 900px) { .fragen-raster { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; } .fragen-raster .figur { display: block; position: static; --g: 132px; margin-top: 32px; } .fragen { margin-top: 0; } } /* 8 Abschluss */ .abschluss { position: relative; border-radius: var(--r-flaeche); padding: var(--innen-y) var(--innen-x); margin-top: calc(var(--abstand-abschnitt) + 60px); } .abschluss .einleitung { color: rgba(255,255,255,.82); margin-top: 18px; max-width: 36ch; } .abschluss .aktionen { margin-top: 30px; } .abschluss .figur { --g: 96px; --g-gross: 150px; right: 24px; bottom: calc(100% - 14px); } @media (min-width: 768px) { .abschluss .titel { max-width: 16ch; } .abschluss .figur { right: 72px; } } /* Fliesstext von Inhaltsseiten (Recht, Blog, Funktionsseiten) */ .lesetext { max-width: var(--text-breite); } .lesetext > * + * { margin-top: 18px; } .lesetext h2 { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; letter-spacing: -.01em; font-size: 30px; line-height: 1.08; margin-top: 56px; text-wrap: balance; } .lesetext h3 { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; letter-spacing: -.01em; font-size: 22px; line-height: 1.15; margin-top: 36px; } .lesetext p, .lesetext li { color: var(--tinte-2); } .lesetext ul { list-style: disc; padding-left: 1.2em; } .lesetext ol { padding-left: 1.4em; } .lesetext li + li { margin-top: 8px; } .lesetext a { color: var(--espresso); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } .lesetext strong { color: var(--espresso); } .lesetext blockquote { border-left: 4px solid var(--honig); padding: 4px 0 4px 20px; color: var(--tinte-2); } .lesetext table { width: 100%; border-collapse: collapse; font-size: 17px; } .lesetext th, .lesetext td { text-align: left; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linie); vertical-align: top; } .lesetext th { font-weight: 600; color: var(--espresso); } .tabelle-huelle { overflow-x: auto; } @media (min-width: 768px) { .lesetext h2 { font-size: 44px; margin-top: 72px; } .lesetext h3 { font-size: 26px; } } /* Karten-Raster für Übersichten (Blog, Werkzeuge, Funktionen) — Karte = Titel + Satz, kein Icon-im-Kreis */ .kartenraster { display: grid; gap: 14px; margin-top: 40px; } .karte { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px; border-radius: var(--r-karte); background: #fff; border: 1px solid var(--linie); text-decoration: none; transition: border-color .2s ease; } a.karte:hover { border-color: var(--espresso); } .karte .klein { margin-top: auto; padding-top: 8px; } @media (min-width: 768px) { .kartenraster { grid-template-columns: repeat(2, 1fr); gap: 20px; } } @media (min-width: 1100px) { .kartenraster--drei { grid-template-columns: repeat(3, 1fr); } } .kartenraster + .lesetext { margin-top: 64px; } /* ── Stufe 2: Preise, Onboarding, Recruiting ─────────────────────────────────────────────────────────────────── */ /* App-Fenster unter dem Seitenkopf; der Würfel sitzt auf der Rahmenkante, nie über dem Bildinhalt */ .seitenbild { position: relative; margin-top: 56px; } .seitenbild .figur { --g: 72px; --g-gross: 120px; right: 16px; top: -58px; z-index: 2; } @media (min-width: 768px) { .seitenbild { margin-top: 72px; } .seitenbild .figur { right: 40px; top: -100px; } } /* Ausschnitte der Seitenbilder (Pixel der 1440er-Aufnahme); Handy enger, damit die App-Schrift lesbar bleibt */ /* Recruiting-Dashboard vom 23.10.2026 ohne die Zeile der Karriereseiten-Adresse */ .ausschnitt--ob-dashboard { --x: 235; --y: 74; --b: 500; --h: 468; } .ausschnitt--rec-start { --x: 244; --y: 298; --b: 556; --h: 469; } @media (min-width: 768px) { .ausschnitt--ob-dashboard { --x: 225; --y: 66; --b: 1215; --h: 552; } .ausschnitt--rec-start { --x: 236; --y: 298; --b: 1188; --h: 527; } } .seitenkopf .klein { margin-top: 16px; max-width: 56ch; } /* Seitenkopf über breitem Bild oder Preiskarten: ab 768 px mittig wie der Einstieg der Startseite */ @media (min-width: 768px) { .seitenkopf--mitte { text-align: center; } .seitenkopf--mitte > * { margin-left: auto; margin-right: auto; } .seitenkopf--mitte .einleitung, .seitenkopf--mitte .klein { margin-left: auto; margin-right: auto; } .seitenkopf--mitte .aktionen { justify-content: center; } } /* Ausschnitt mit eigener Handy-Fassung (Inline-Variablen schlagen Klassen, darum eigene Namen): --x-h/--y-h/--b-h/--h-h bis 767 px, --x-d/--y-d/--b-d/--h-d ab 768 px — am Handy enger, damit die App-Schrift lesbar bleibt */ .ausschnitt--zwei { --x: var(--x-h); --y: var(--y-h); --b: var(--b-h); --h: var(--h-h); } @media (min-width: 768px) { .ausschnitt--zwei { --x: var(--x-d); --y: var(--y-d); --b: var(--b-d); --h: var(--h-d); } } /* Hochformatige Aufnahmen (Handy-Ansichten, Portale) nicht auf die volle Spalte ziehen */ .rahmen--schmal { width: 100%; max-width: 440px; justify-self: center; } /* Ablauf in Schritten: Nummer, wer, was, wie lange. Haarlinien statt Karten */ .schritte { display: grid; margin-top: 40px; padding: 0; list-style: none; } .schritte li { display: grid; gap: 8px; align-content: start; padding: 24px 0 8px; border-top: 1px solid var(--linie-dunkel); } .schritt-nr { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; font-size: 30px; line-height: 1.08; color: var(--knopfgold); font-variant-numeric: tabular-nums; } .schritte .wer { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--tinte-2); } .schritte .dauer { font-size: 15px; line-height: 1.45; color: var(--leise); } @media (min-width: 768px) { .schritte { grid-template-columns: 1fr 1fr; column-gap: 40px; } } @media (min-width: 1100px) { .schritte { grid-template-columns: repeat(4, 1fr); margin-top: 56px; } } /* Liste «Jede Funktion im Detail» (/onboarding, /recruiting). Markup erzeugt scripts/funktionsseiten/vorlage.js renderUebersicht; Symbol leise, Titel unterstrichen wie ein Verweis */ .auftritt .fs-index { display: grid; margin-top: 40px; border-top: 1px solid var(--linie-dunkel); } .auftritt .fs-index li { border-bottom: 1px solid var(--linie-dunkel); } .auftritt .fs-index a { display: flex; gap: 16px; align-items: flex-start; padding: 20px 0; text-decoration: none; } .auftritt .fs-index-symbol { flex: none; width: 22px; margin-top: 2px; color: var(--leise); } .auftritt .fs-index-symbol svg { display: block; } .auftritt .fs-index-text strong { display: inline; font-size: 17px; line-height: 1.4; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--linie-dunkel); transition: text-decoration-color .2s ease; } .auftritt .fs-index a:hover strong { text-decoration-color: currentColor; } .auftritt .fs-index-text > span { display: block; margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--leise); } @media (min-width: 900px) { .auftritt .fs-index { grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 56px; } } /* Funktionsgruppe (Recruiting): ein Einblick, darunter die Einzelheiten als Fakten; gespiegelt = Bild links */ .funktionsgruppe + .funktionsgruppe { margin-top: 88px; } .funktionsgruppe > .klein { margin-top: 22px; max-width: 64ch; } .kopf-abschnitt + .funktionsgruppe { margin-top: 44px; } @media (min-width: 900px) { .kopf-abschnitt + .funktionsgruppe { margin-top: 72px; } .funktionsgruppe + .funktionsgruppe { margin-top: 120px; } .einblick.einblick--gespiegelt { grid-template-columns: 7fr 5fr; } .einblick--gespiegelt .text-block { order: 2; } } /* Rollen (Onboarding): Name, Beschreibung, typische Arbeiten; Haarlinien wie der Zeitstrahl */ .rollen { margin-top: 40px; border-top: 1px solid var(--linie-dunkel); } .rollen > div { display: grid; gap: 10px; padding: 24px 0; border-bottom: 1px solid var(--linie-dunkel); } .rollen .klein { margin-top: 4px; } .rollen ul li { font-size: 17px; line-height: 1.5; color: var(--tinte-2); } .rollen ul li + li { margin-top: 4px; } @media (min-width: 900px) { .rollen { margin-top: 56px; } .rollen > div { grid-template-columns: 220px 1fr 1fr; column-gap: 48px; } } /* Häufige Fragen: Hinweis auf den Ratgeber unter dem Titel */ .fragen-raster .klein { margin-top: 18px; max-width: 34ch; } /* Preise auf den Modulseiten: Modul, beide Module, dazu ein Text (Reihenfolge bleibt auch am Handy) */ .preise-text { display: grid; gap: 14px; align-content: start; } .preise-text .fakten { margin-top: 0; grid-template-columns: none; } .preise-text .fakten li { padding: 16px 0; } @media (max-width: 899px) { .preise--zwei .preis-karte.dunkel { order: 0; margin-top: 0; } .preise-text { margin-top: 26px; } } @media (min-width: 900px) { .preise--zwei { grid-template-columns: 1fr 1.15fr 1fr; } .preise-text { padding-left: 16px; } } /* Fakten mit Satz-Verweisen («Mehr zu …»): Verweis darf umbrechen, sonst ragt er am Handy hinaus */ .fakten--lang a { white-space: normal; } .preis-karte .klein a, .preise-fuss a { white-space: nowrap; } .preis-karte.dunkel .klein { color: rgba(255,255,255,.8); } /* Preisseite: Rechnung «einzeln oder beide», Zahlen rechtsbündig */ .rechnung-raster { display: grid; gap: 36px; } .rechnung { display: grid; grid-template-columns: 1fr auto; column-gap: 0; font-size: 17px; line-height: 1.5; font-variant-numeric: tabular-nums; border-top: 1px solid var(--linie-dunkel); } .rechnung dt, .rechnung dd { padding: 14px 0; border-bottom: 1px solid var(--linie-dunkel); color: var(--tinte-2); } .rechnung dd { padding-left: 24px; text-align: right; font-weight: 600; color: var(--espresso); white-space: nowrap; } .rechnung .gestrichen { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--leise); font-weight: 500; } .rechnung .summe { padding-top: 20px; border-bottom: 0; font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--espresso); } @media (min-width: 768px) { .rechnung .summe { font-size: 26px; } } @media (min-width: 900px) { .rechnung-raster { grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; } } /* Preisseite: Umfang je Paket als vier Listen statt Häkchen-Matrix; Kante in der Farbe des Pakets */ .umfang { display: grid; gap: 44px; margin-top: 40px; } .umfang > div { border-top: 6px solid var(--linie); padding-top: 20px; } .umfang .umfang--recruiting { border-top-color: var(--gletscher); } .umfang .umfang--onboarding { border-top-color: var(--honig); } .umfang .umfang--beide { border-top-color: var(--espresso); } .umfang .klein { margin-top: 6px; } .umfang ul { margin-top: 18px; border-top: 1px solid var(--linie-dunkel); } .umfang li { padding: 11px 0; border-bottom: 1px solid var(--linie-dunkel); font-size: 17px; line-height: 1.5; color: var(--tinte-2); } @media (min-width: 768px) { .umfang { grid-template-columns: 1fr 1fr; column-gap: 40px; } } @media (min-width: 1100px) { .umfang { grid-template-columns: repeat(4, 1fr); margin-top: 56px; } } /* Fuss */ .fuss { margin-top: var(--abstand-abschnitt); padding: 56px 0 40px; border-top: 1px solid var(--linie); } .fuss-raster { display: grid; gap: 36px; } .fuss-marke p { color: var(--leise); max-width: 34ch; margin-top: 14px; font-size: 15px; line-height: 1.45; } .fuss-marke .mail { display: inline-block; margin-top: 10px; font-size: 15px; font-weight: 600; } .fuss h2 { font: 600 14px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); margin-bottom: 12px; } .fuss li a { display: inline-block; padding: 6px 0; font-size: 15px; text-decoration: none; } .fuss li a:hover { text-decoration: underline; text-underline-offset: 4px; } .fuss-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .fuss-unten { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linie); color: var(--leise); font-size: 14px; } @media (min-width: 900px) { .fuss-raster { grid-template-columns: 4fr 8fr; } .fuss-spalten { grid-template-columns: repeat(4, 1fr); } } @media (prefers-reduced-motion: reduce) { .auftritt *, .auftritt *::before, .auftritt *::after { transition: none !important; } } /* Logo (Würfel + Wortmarke, Entscheid EE 23.10.2026, img/auftritt/logo.svg): Höhe 30 px im Kopf, 28 px im Fuss */ .marke-logo img { display: block; height: 36px; width: auto; } @media (min-width: 768px) { .marke-logo img { height: 40px; } } .fuss .marke-logo img { height: 34px; } /* ── Stufe 2b: Funktionen, Kontakt, Sicherheit ───────────────────────────────────────────────────────────────── */ /* Funktionsübersicht (/features): je Funktion Titel, ein Satz mit «Mehr zu …», darunter die Einzelheiten leise. Haarlinien statt Karten, zwei Spalten ab 900 px (Zeilen einer Reihe gleich hoch, Linien laufen durch) */ .funktionen { display: grid; margin-top: 44px; border-top: 1px solid var(--linie-dunkel); } .funktion { display: grid; gap: 10px; align-content: start; padding: 26px 0 28px; border-bottom: 1px solid var(--linie-dunkel); scroll-margin-top: 96px; } .funktion ul { display: grid; gap: 6px; margin-top: 6px; } .funktion li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.45; color: var(--leise); } .funktion li::before { content: ""; position: absolute; left: 1px; top: .7em; width: 8px; height: 1.5px; background: currentColor; } .funktion .kartentext a { text-decoration-thickness: 1.5px; text-underline-offset: 4px; } @media (min-width: 900px) { .funktionen { grid-template-columns: 1fr 1fr; column-gap: 56px; margin-top: 64px; } .funktion { padding: 30px 0 32px; } } /* Modulkopf mit Bild: Titel statt Kartentitel im Einblick */ .einblick .text-block .titel + .einleitung { margin-top: 4px; } /* Sprungmarken unter dem Seitenkopf («Direkt zu …») */ .seitenkopf .sprungmarken { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 4px 18px; } .sprungmarken a { font-weight: 600; color: var(--espresso); text-underline-offset: 4px; } /* Angaben als Liste «Bezeichnung … Wert» (Kontakt); gleiche Linien wie .rechnung, Wert darf umbrechen */ .angaben { display: grid; grid-template-columns: auto 1fr; font-size: 17px; line-height: 1.5; border-top: 1px solid var(--linie-dunkel); } .angaben dt, .angaben dd { padding: 14px 0; border-bottom: 1px solid var(--linie-dunkel); } .angaben dt { color: var(--tinte-2); padding-right: 24px; } .angaben dd { text-align: right; font-weight: 600; color: var(--espresso); overflow-wrap: anywhere; } /* Kontakt: Angaben und Fragen links, Formular rechts; am Handy Angaben → Formular → Fragen */ .kontakt-raster { display: grid; gap: 56px; margin-top: 48px; } .kontakt-raster .kontakt-wege .klein { margin-top: 18px; } .kontakt-wege .angaben { margin-top: 20px; } .kontakt-raster .fragen { margin-top: 24px; } /* Fragen in der schmalen Spalte: Kartentitel-Stufe 22 auch ab 768 px, damit sie nicht grösser als ihr Titel sind */ .kontakt-raster .fragen summary h3 { font-size: 22px; } .kontakt-raster .fragen summary { padding: 18px 0; } @media (min-width: 900px) { .kontakt-raster { grid-template-columns: 5fr 7fr; grid-template-areas: "wege formular" "fragen formular"; column-gap: 72px; row-gap: 72px; align-items: start; margin-top: 64px; } .kontakt-wege { grid-area: wege; } .formular-karte { grid-area: formular; } .kontakt-fragen { grid-area: fragen; } } /* Formularkarte: Würfel sitzt auf der oberen Kante (wie bei den Preiskarten), nie über einem Feld */ .formular-karte { position: relative; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 28px 22px; margin-top: 56px; } .formular-karte > .figur { --g: 76px; --g-gross: 112px; right: 18px; top: -66px; } @media (min-width: 768px) { .formular-karte { padding: 40px 40px 36px; margin-top: 72px; } .formular-karte > .figur { top: -96px; } } @media (min-width: 900px) { .formular-karte { margin-top: 0; } } .formular-karte .kartentext, .formular-karte .kartentext + .klein { margin-top: 10px; } .formular-karte form, .formular-fehler { margin-top: 28px; } .feld-reihe { display: grid; gap: 0 16px; } @media (min-width: 560px) { .feld-reihe { grid-template-columns: 1fr 1fr; } } .feld { display: grid; gap: 8px; margin-bottom: 20px; } .feld label { font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--espresso); } /* Felder: Schrift 17 px (iOS zoomt unter 16), Höhe ≥ 52 px wie der Knopf, Rand in «Leise» (5,6 : 1, Vorgabe ≥ 3 : 1) */ .feld input, .feld select, .feld textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--leise); border-radius: var(--r-knopf); background: #fff; color: var(--espresso); font: 400 17px/1.4 var(--schrift-text); } .feld select { appearance: none; -webkit-appearance: none; padding-right: 44px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E1B16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center / 18px; } .feld textarea { min-height: 160px; resize: vertical; } .feld input::placeholder, .feld textarea::placeholder { color: var(--leise); opacity: 1; } .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--espresso); } .formular-karte .knopf { width: 100%; margin-top: 4px; } .formular-karte .knopf:disabled { opacity: .6; cursor: not-allowed; } .formular-karte .knopf svg { width: 18px; height: 18px; flex: none; } .formular-karte form > .klein { margin-top: 14px; text-align: center; } /* Honigtopf: nur Automaten füllen es aus (src/lib/support-schutz.js) — unsichtbar, ohne Tastaturfokus */ .hp-feld { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Fehler- und Erfolgszustand: die Seite schaltet sie per style.display um (Skript in kontakt.html) */ .formular-fehler { display: none; padding: 12px 16px; border-left: 4px solid var(--knopfgold); border-radius: 8px; background: var(--honig); color: var(--honig-schrift); font-size: 15px; line-height: 1.45; } .formular-erfolg { display: none; } /* Nach dem Absenden jubelt der Würfel im Erfolg — der winkende auf der Kante tritt ab (nie zwei zugleich) */ .formular-karte:has(> .formular-erfolg[style*="block"]) > .figur { display: none; } .formular-erfolg .figur { position: static; --g: 96px; --g-gross: 120px; } .formular-erfolg .kartentitel { margin-top: 20px; } .formular-erfolg .aktionen { margin-top: 26px; } /* «Wird gesendet …»: das Skript dreht das Symbol im Knopf (animation: spin); ohne Bewegungswunsch steht es still */ @keyframes spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .auftritt * { animation: none !important; } } /* Fliesstext direkt unter einem Abschnittskopf (Sicherheit); Knopf am Ende eines Fliesstexts */ .kopf-abschnitt + .lesetext { margin-top: 36px; } .lesetext .aktionen { margin-top: 30px; } .lesetext .knopf { color: #fff; text-decoration: none; } /* Stand-Hinweis unter dem Abschluss (Sicherheit) */ .stand { margin-top: 28px; max-width: 72ch; } .stand a { color: var(--espresso); } /* ── Stufe 3: Funktionsseiten (/onboarding/, /recruiting/) ────────────────────────────────────────────── Markup erzeugt scripts/funktionsseiten/vorlage.js. Die Klassen fs-* sind Haken für Tests und public/js/funktionsseite.js (Umschalter, Bewegung). Gestaltungsregeln dieses Blocks prüft tests/funktionsseiten-gestaltung.test.js */ /* Brotkrumen über der h1, leise */ .fs-brotkrumen ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 22px; list-style: none; font-size: 15px; line-height: 1.45; color: var(--leise); } .fs-brotkrumen li + li::before { content: "/"; margin: 0 8px; color: var(--leise); } .fs-brotkrumen a { color: var(--leise); text-decoration: none; } .fs-brotkrumen a:hover { color: var(--espresso); text-decoration: underline; text-underline-offset: 4px; } .fs-brotkrumen [aria-current] { color: var(--tinte-2); } /* Seitenkopf: Text, darunter (bild-unten, breite Aufnahme) oder ab 900 px daneben (bild-rechts) das Kopfbild. Das Raster darf die volle Hülle nutzen; der Würfel sitzt auf der oberen Rahmenkante, nie über dem Bild */ .seitenkopf > .fs-kopf-raster { max-width: none; } .fs-kopf-raster { display: grid; gap: 0; } .fs-kopf-text { max-width: 860px; } .fs-kopf-text .einleitung { margin-top: 22px; max-width: 44ch; } .fs-kopf-text .aktionen { margin-top: 30px; } .fs-kopf-text .klein { margin-top: 16px; max-width: 52ch; } .fs-kopf-bild { position: relative; display: grid; width: 100%; margin-top: 88px; } .fs-bild { position: relative; } .fs-kopf-bild .figur { --g: 72px; --g-gross: 112px; right: 16px; top: -62px; z-index: 2; } @media (min-width: 768px) { .fs-kopf-bild { margin-top: 112px; } .fs-kopf-bild .figur { right: 40px; top: -98px; } } @media (min-width: 900px) { .fs-kopf--bild-rechts .fs-kopf-raster { grid-template-columns: 1fr 1fr; column-gap: 64px; align-items: start; } .fs-kopf--bild-rechts .fs-kopf-text { padding-top: 40px; } .fs-kopf--bild-rechts .fs-kopf-bild { margin-top: 64px; justify-items: end; } /* Querformat neben dem Text: mehr Breite fürs Bild, damit die App-Schrift lesbar bleibt */ .fs-kopf--bild-rechts .fs-kopf-raster:has(.fs-kopf-bild--quer) { grid-template-columns: 5fr 7fr; } } /* App-Aufnahme im Rahmen der Modulfarbe: nie grösser als aufgenommen (--bb = Breite in CSS-Pixeln), damit die Schrift der App lesbar bleibt; am Handy zeigt .ausschnitt--zwei breite Aufnahmen als Ausschnitt oben links */ .fs-bild { width: 100%; max-width: calc(var(--bb) * 1px + 24px); } .fs-bild--handy { max-width: calc(var(--bb) * 1px + 24px); justify-self: center; } /* Nutzen: «liste» nummeriert (.schritte), «spalte» als Fakten; Titel als h3 */ .fakten h3 { font-size: 17px; line-height: 1.4; font-weight: 600; } .fs-beta { margin-left: 8px; font: 600 14px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--knopfgold-druck); white-space: nowrap; } /* Bildabschnitte. wechsel = Einblick (Bild 7/11, Seite wechselt), detail = halbe-halbe, gross und breite Aufnahmen = Titel links, Text rechts, Bild darunter über die ganze Breite */ .fs-abschnitt .einblick { align-items: center; } .fs-abschnitt-text .text + .text { margin-top: 4px; } .fs-abschnitt-bild { margin: 0; display: grid; } .fs-abschnitt--bild-rechts .fs-abschnitt-bild { justify-items: end; } .fs-abschnitt--bild-links .fs-abschnitt-bild { justify-items: start; } .fs-einblick--halb .fs-abschnitt-bild { justify-items: center; } @media (min-width: 900px) { .fs-abschnitt .einblick.fs-einblick--halb { grid-template-columns: 1fr 1fr; } .fs-abschnitt .einblick.fs-einblick--halb.einblick--gespiegelt .text-block { order: 2; } } .fs-gross .fs-abschnitt-text { display: grid; gap: 22px; } .fs-gross-absaetze { display: grid; gap: 14px; max-width: 60ch; } .fs-gross .fs-abschnitt-bild { margin-top: 40px; justify-items: center; } @media (min-width: 900px) { .fs-gross .fs-abschnitt-text { grid-template-columns: 5fr 7fr; column-gap: 64px; align-items: start; } .fs-gross .fs-abschnitt-bild { margin-top: 56px; } } /* Umschalter: zwei Bilder desselben Ergebnisses. Ohne JS stehen beide beschriftet untereinander; mit JS (Klasse fs-umschalter--an) liegen beide in derselben Zelle, sichtbar ist das mit data-aktiv — die Höhe springt nicht */ .fs-umschalter-bilder { display: grid; gap: 40px; justify-items: center; } .fs-umschalter-bilder .fs-abschnitt-bild { width: 100%; justify-items: center; } .fs-umschalter-titel { margin-bottom: 12px; font-size: 15px; line-height: 1.45; font-weight: 600; color: var(--tinte-2); } .fs-umschalter--an .fs-umschalter-titel { display: none; } .fs-umschalter--an .fs-umschalter-bilder { grid-template-areas: 'bild'; } .fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild { grid-area: bild; transition: opacity 200ms ease-out, visibility 200ms; } .fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild:not([data-aktiv]) { visibility: hidden; opacity: 0; } .fs-umschalter { display: flex; gap: 4px; margin-top: 14px; padding: 4px; border-radius: var(--r-knopf); background: var(--kalk); width: fit-content; max-width: 100%; } .fs-umschalter[hidden] { display: none; } .fs-umschalter-knopf { min-height: 44px; padding: 0 18px; border: 0; border-radius: 9px; background: transparent; color: var(--tinte-2); font: 600 15px/1.2 var(--schrift-text); cursor: pointer; transition: background-color 200ms ease-out; } .fs-umschalter-knopf[aria-pressed='true'] { background: var(--espresso); color: #fff; } /* Bewegung beim Hereinrollen (public/js/funktionsseite.js): sichtbar 8 px tiefer, gleitet einmal an den Platz */ @media (prefers-reduced-motion: no-preference) { .fs-bewegt { transition: translate 400ms ease-out; } .fs-bewegt.fs-wartet { translate: 0 8px; } } @media (prefers-reduced-motion: reduce) { .fs-umschalter--an .fs-umschalter-bilder > .fs-abschnitt-bild, .fs-umschalter-knopf { transition: none; } .fs-bewegt { transition: none; translate: none; } } /* «Im Alltag»: Fakten-Liste unter dem Abschnittskopf */ .fs-weitere .fakten { margin-top: 36px; } /* Eine starke Aussage: Zitat oder Zahl auf Kalk */ .fs-alltag blockquote { margin: 0; max-width: 30ch; } .fs-alltag .fs-zahl { font-variant-numeric: tabular-nums; } .fs-alltag .einleitung { margin-top: 22px; max-width: 48ch; } /* Was uns unterscheidet: Haarlinien, drei Spalten ab 900 px */ .fs-unterschied-liste { display: grid; margin-top: 36px; border-top: 1px solid var(--linie-dunkel); } .fs-unterschied-liste > div { display: grid; gap: 6px; padding: 22px 0; border-bottom: 1px solid var(--linie-dunkel); align-content: start; } .fs-unterschied-liste dt { font-size: 17px; line-height: 1.4; font-weight: 600; } .fs-unterschied-liste dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--tinte-2); } .fs-unterschied-liste dd a { color: var(--espresso); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } @media (min-width: 900px) { .fs-unterschied-liste { grid-template-columns: repeat(3, 1fr); column-gap: 48px; margin-top: 48px; } .fs-unterschied-liste > div { padding: 26px 0; } } /* Passt dazu: Zeilen mit Pfeil wie das Funktionsverzeichnis, darunter Ratgeber und Übersicht als Verweise */ .fs-verwandt-liste { display: grid; margin-top: 36px; border-top: 1px solid var(--linie-dunkel); } .fs-verwandt-liste li { border-bottom: 1px solid var(--linie-dunkel); } .fs-verwandt-liste a { display: grid; grid-template-columns: 1fr auto; column-gap: 20px; align-items: center; padding: 20px 0; text-decoration: none; } .fs-verwandt-liste strong { font-size: 17px; line-height: 1.4; font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: var(--linie-dunkel); transition: text-decoration-color 200ms ease-out; } .fs-verwandt-liste a:hover strong { text-decoration-color: currentColor; } .fs-verwandt-liste span { grid-column: 1; margin-top: 4px; font-size: 15px; line-height: 1.45; color: var(--leise); } .fs-verwandt-liste svg { grid-column: 2; grid-row: 1 / span 2; color: var(--leise); } .fs-zubringer-link, .fs-hoch { margin-top: 22px; } .fs-zubringer-link a, .fs-hoch a { font-weight: 600; font-size: 17px; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } @media (min-width: 900px) { .fs-verwandt-liste { grid-template-columns: repeat(3, 1fr); column-gap: 48px; margin-top: 48px; } } /* Gründer vor dem Schluss: ein Satz, Name, Mail — Haarlinie oben statt Karte */ .fs-gruender-raster { display: grid; gap: 18px; padding-top: 36px; border-top: 1px solid var(--linie-dunkel); } .fs-gruender-person { display: grid; gap: 2px; font-size: 17px; line-height: 1.5; } .fs-gruender-person span { color: var(--tinte-2); } .fs-gruender-person a { margin-top: 8px; font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 5px; } @media (min-width: 900px) { .fs-gruender-raster { grid-template-columns: 7fr 4fr; column-gap: 64px; align-items: end; } } /* Schluss: Preissatz und Aktion sind länger als die Einleitung der Startseite — breitere Zeile */ .section-cta .abschluss .einleitung { max-width: 52ch; } /* ── Ende Stufe 3 ── */ /* ── Stufe 4: Ratgeber (hr-software-schweiz, onboarding-software, recruiting-software), Blog, Updates, Jobs ────── */ /* Würfel neben dem Seitenkopf ohne Bild: erst ab 1100 px, wo rechts der 860-px-Spalte Platz ist — nie über dem Text */ .seitenkopf > .figur { display: none; } @media (min-width: 1100px) { .seitenkopf > .figur { display: block; --g-gross: 132px; right: var(--rand); top: 96px; } } /* Ratgeber: Inhaltsverzeichnis und Fliesstext. Am Handy steht das Verzeichnis oben, ab 1100 px links und klebend */ .artikel { display: grid; gap: 40px; } .artikel-inhalt { border-top: 1px solid var(--linie-dunkel); padding-top: 18px; } .artikel-inhalt-titel { font: 600 14px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .artikel-inhalt ol { display: grid; margin: 10px 0 0; padding: 0; list-style: none; } .artikel-inhalt a { display: block; padding: 8px 0; font-size: 15px; line-height: 1.45; color: var(--tinte-2); text-decoration: none; } .artikel-inhalt a:hover { color: var(--espresso); text-decoration: underline; text-underline-offset: 4px; } @media (min-width: 1100px) { .artikel { grid-template-columns: 240px minmax(0, 1fr); column-gap: 72px; align-items: start; } .artikel-inhalt { position: sticky; top: 96px; } } /* Abschnitte im Fliesstext: eigene Abstände (die Grundregel .lesetext > * + * greift nur eine Ebene tief) */ .artikel-abschnitt { scroll-margin-top: 96px; } .artikel-abschnitt > * + * { margin-top: 18px; } .artikel-abschnitt > h2:first-child { margin-top: 0; } .lesetext > .artikel-abschnitt + .artikel-abschnitt { margin-top: 72px; } @media (min-width: 768px) { .lesetext > .artikel-abschnitt + .artikel-abschnitt { margin-top: 96px; } } /* Zitat zum Einstieg des Ratgebers: Einleitungsstufe statt Kursiv */ .lesetext blockquote.artikel-zitat { font-size: 19px; line-height: 1.5; } @media (min-width: 768px) { .lesetext blockquote.artikel-zitat { font-size: 22px; } } /* Merkkasten im Fliesstext (früher highlight-/warning-box): Kalk; «achtung» in Honig mit Schrift desselben Tons */ .lesetext .kasten { background: var(--kalk); border-radius: var(--r-karte); padding: 22px 24px; } .lesetext .kasten--achtung { background: var(--honig); } .lesetext .kasten--achtung p, .lesetext .kasten--achtung strong { color: var(--honig-schrift); } /* Fakten und Schritte im Fliesstext: ohne Aufzählungszeichen und Listenabstand des Fliesstexts; zwei Spalten genügen */ .lesetext .fakten, .lesetext .schritte { list-style: none; padding-left: 0; } .lesetext .fakten li + li, .lesetext .schritte li + li { margin-top: 0; } .lesetext .fakten h3 { margin-top: 0; font: 600 17px/1.4 var(--schrift-text); letter-spacing: 0; color: var(--espresso); } .lesetext .schritte h3 { margin-top: 0; } @media (min-width: 1100px) { .artikel .schritte { grid-template-columns: 1fr 1fr; } } /* Tabellen am Handy: rollen nicht, sondern passen — kleinere Stufe, Trennung langer Wörter */ .lesetext td, .lesetext th { hyphens: auto; overflow-wrap: break-word; } @media (max-width: 767px) { .lesetext table { font-size: 15px; line-height: 1.45; } .lesetext th, .lesetext td { padding: 10px 10px 10px 0; } } /* Weiterführende Seiten am Ende des Ratgebers */ .weiter { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; } /* Verweis direkt unter einem Abschnittskopf (Blog: Anleitung) */ .kopf-abschnitt + .aktionen { margin-top: 26px; } /* Abschluss: Kleingedrucktes auf Espresso */ .abschluss .klein { margin-top: 22px; color: rgba(255,255,255,.8); } /* Blog-Übersicht: hervorgehobener Artikel auf Kalk, darunter Karten (Rubrik · Datum, Titel, Satz) */ .blog-neu { display: grid; gap: 14px; } .blog-neu .titel { max-width: 24ch; } .blog-neu .text { max-width: 60ch; } .blog-neu .verweis { justify-self: start; margin-top: 10px; } /* Jobs: das Widget (embed.js, Shadow DOM) bringt seine Karten selbst mit; der Rahmen ist ruhig */ .jobs-widget { margin-top: 40px; max-width: 900px; background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 20px; } @media (min-width: 768px) { .jobs-widget { padding: 32px; } } .jobs-widget-note { margin-top: 18px; max-width: 900px; } /* Auf /jobs keine Hinweiszeile «Erstes Jahr gratis» — Bewerbende sind keine Kundschaft */ .ohne-hinweis .hinweis { display: none; } /* Updates (Changelog): Monate als aufklappbare Blöcke, Eintrag = Bereich links, Text rechts. Die Kurzfassung ohne Konto (src/lib/updates-oeffentlich.js) hängt Attrappen und Schloss an dieselben Klassen */ .updates-liste { max-width: 900px; margin-top: 40px; } .updates-nav { display: flex; flex-wrap: wrap; gap: 4px 22px; margin-top: 26px; } .updates-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 600; color: var(--espresso); text-underline-offset: 4px; } .updates-nav .count { margin-left: 6px; font-weight: 500; color: var(--leise); } details.updates-monat > summary { list-style: none; cursor: pointer; } details.updates-monat > summary::-webkit-details-marker { display: none; } .updates-month { display: flex; align-items: center; gap: 12px; min-height: 44px; margin-top: 56px; padding-bottom: 14px; border-bottom: 1px solid var(--linie-dunkel); font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; user-select: none; } .updates-month > svg:first-child { display: none; } .updates-month .chev { margin-left: auto; width: 18px; height: 18px; color: var(--leise); transition: transform .2s ease; } details.updates-monat[open] .chev { transform: rotate(90deg); } @media (min-width: 768px) { .updates-month { font-size: 26px; } } .update-entry { display: grid; gap: 8px; padding: 26px 0; border-bottom: 1px solid var(--linie); } .update-entry:last-child { border-bottom: 0; } @media (min-width: 768px) { .update-entry { grid-template-columns: 150px minmax(0, 1fr); column-gap: 32px; } } .update-tag { padding-top: 5px; font: 600 14px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--leise); } .update-tag.onboarding { color: var(--honig-schrift); } .update-tag.recruiting { color: var(--gletscher-schrift); } .update-tag.tools { color: var(--salbei-schrift); } .update-entry h3 { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-karte); font-weight: 600; font-size: 22px; line-height: 1.15; letter-spacing: -.01em; text-wrap: balance; } /* «Neu»/«Beta» als leises Wort hinter dem Titel, keine Pille */ .update-entry h3 .neu, .update-entry h3 .beta { margin-left: 10px; font: 600 14px/1.3 var(--schrift-text); letter-spacing: .06em; text-transform: uppercase; color: var(--knopfgold-druck); white-space: nowrap; } .update-entry p, .update-entry li { font-size: 17px; line-height: 1.5; color: var(--tinte-2); } .update-entry h3 + p, .update-entry p + p, .update-entry p + ul, .update-entry ul + p { margin-top: 10px; } .update-entry ul { list-style: disc; padding-left: 1.2em; } .update-entry li + li { margin-top: 6px; } .update-entry strong { color: var(--espresso); } .update-entry a { color: var(--espresso); text-decoration-thickness: 1.5px; text-underline-offset: 4px; } /* ── Ende Stufe 4 ── */ /* ── Stufe 5: Rechtstexte (Impressum, Datenschutz, AGB) und Blogartikel ────────────────────────────────────────── Markup erzeugt scratchpad stufe5/bau.py aus der HEAD-Fassung. Rechtstexte: Wortlaut unverändert, nur die Hülle; die alten Klassen (legal-*, contact-box) bleiben als Haken und werden hier ruhig gesetzt. Blog: ein Aufbau für alle Artikel (Brotkrumen, h1, Angaben, Fliesstext, Fragen, Weiterlesen, Abschluss). */ /* Rückweg und Stand über bzw. unter der h1 der Rechtstexte, leise */ .rueckweg { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 10px; font-size: 15px; color: var(--leise); text-decoration: none; } .rueckweg:hover { color: var(--espresso); text-decoration: underline; text-underline-offset: 4px; } .stand-datum { margin-top: 18px; } .stand-datum strong { font-weight: 600; color: var(--tinte-2); } /* Fliesstext direkt unter dem Seitenkopf: näher als ein neuer Abschnitt, an derselben Kante */ .artikel-rumpf { margin-top: 48px; } @media (min-width: 768px) { .artikel-rumpf { margin-top: 64px; } } .rechtstext > h2:first-child, .blog-text > h2:first-child { margin-top: 0; } /* Kästen der Rechtstexte: Kalk für Hinweise, Honig für Warnungen, Anschrift mit Haarlinie */ .rechtstext :is(.legal-highlight, .legal-info, .legal-warning, .contact-box) { border-radius: var(--r-karte); padding: 22px 24px; } .rechtstext :is(.legal-highlight, .legal-info) { background: var(--kalk); } .rechtstext .legal-warning { background: var(--honig); } .rechtstext .legal-warning :is(p, li, strong, h3) { color: var(--honig-schrift); } .rechtstext .contact-box { background: #fff; border: 1px solid var(--linie); } .rechtstext .contact-box p + p { margin-top: 2px; } .rechtstext :is(.legal-highlight, .legal-info, .legal-warning) > * + * { margin-top: 12px; } .rechtstext-notiz { border-left: 4px solid var(--honig); padding: 4px 0 4px 20px; } .rechtstext > .rechtstext-verweise { margin-top: 56px; padding-top: 28px; border-top: 1px solid var(--linie); } .rechtstext code { font-size: .9em; overflow-wrap: anywhere; } .rechtstext p, .rechtstext li { overflow-wrap: break-word; } /* Blog: Brotkrumen wie .fs-brotkrumen der Funktionsseiten */ .brotkrumen ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding: 0; margin: 0 0 22px; list-style: none; font-size: 15px; line-height: 1.45; color: var(--leise); } .brotkrumen li + li::before { content: "/"; margin: 0 8px; color: var(--leise); } .brotkrumen a { display: inline-flex; align-items: center; min-height: 24px; color: var(--leise); text-decoration: none; } .brotkrumen a:hover { color: var(--espresso); text-decoration: underline; text-underline-offset: 4px; } .brotkrumen [aria-current] { color: var(--tinte-2); } /* Rubrik · Datum · Lesezeit · Autor als eine leise Zeile unter h1 bzw. Einleitung */ .artikel-angaben { margin-top: 22px; } .artikel-kopf .einleitung { max-width: var(--text-breite); } /* Bausteine im Artikeltext: Abstände innerhalb (die Grundregel .lesetext > * + * greift nur eine Ebene tief) */ .blog-text h4 { margin-top: 28px; font: 600 17px/1.4 var(--schrift-text); color: var(--espresso); } .blog-text :is(.kasten, .fs-zubringer, .requirements-table, .checklist-section, .data-list, .comparison-card, .metric-card, .benefit-card, .step-content, .tip-content, .timeline-content, .article-figure, .steps-list li) > * + * { margin-top: 12px; } .blog-text :is(.kasten, .requirements-table, .checklist-section, .data-list) > :is(h3, h4):first-child { margin-top: 0; } .blog-text .fs-zubringer { border-left: 4px solid var(--honig); padding: 4px 0 4px 20px; } .blog-text .info-box-title { font-weight: 600; color: var(--espresso); } .blog-text .kasten--achtung .info-box-title { color: var(--honig-schrift); } .blog-text .kasten--achtung { color: var(--honig-schrift); } .blog-text .kasten--vorlage { background: #fff; border: 1px solid var(--linie); } .blog-text .beispiel { background: #fff; border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 18px 22px; font-style: italic; } .blog-text .artikel-aktion .knopf { margin-top: 18px; } .blog-text .kasten ul, .blog-text .kasten ol { margin-top: 10px; } /* Gegenüberstellungen, Kennzahlen, Vorteile: Haarlinien statt Karten, Symbole entfallen */ .blog-text :is(.metrics-grid, .benefits-grid, .comparison-grid, .article-stats) { display: grid; column-gap: 40px; border-top: 1px solid var(--linie-dunkel); } .blog-text :is(.metric-card, .benefit-card, .comparison-card, .article-stat) { padding: 22px 0; border-bottom: 1px solid var(--linie-dunkel); } .blog-text :is(.metric-card, .benefit-card, .comparison-card) h4 { margin-top: 0; } .blog-text :is(.metric-card, .benefit-card) p { font-size: 17px; line-height: 1.5; } .blog-text .metric-value { font-weight: 600; font-size: 17px; color: var(--knopfgold-druck); } .blog-text .comparison-card.old :is(h4, li) { color: var(--leise); } .blog-text .article-stat { display: grid; gap: 4px; } .blog-text .article-stat-number { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; font-size: 30px; line-height: 1.08; color: var(--knopfgold-druck); } .blog-text .article-stat-label { font-size: 15px; line-height: 1.45; color: var(--tinte-2); } @media (min-width: 768px) { .blog-text :is(.metrics-grid, .benefits-grid, .comparison-grid) { grid-template-columns: 1fr 1fr; } .blog-text .article-stats { grid-template-columns: repeat(3, 1fr); } } /* Schritte, Tipps, Ablauf: Nummer links in Gold, Haarlinien wie .schritte */ .blog-text :is(.steps-container, .tips-list, .timeline) { border-top: 1px solid var(--linie-dunkel); } .blog-text :is(.step-item, .tip-item, .timeline-item) { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; padding: 22px 0; border-bottom: 1px solid var(--linie-dunkel); } .blog-text :is(.step-number, .tip-number, .timeline-dot) { font-family: var(--schrift-titel); font-variation-settings: var(--opsz-gross); font-weight: 600; font-size: 26px; line-height: 1.1; color: var(--knopfgold); font-variant-numeric: tabular-nums; } .blog-text :is(.step-content, .tip-content, .timeline-content) h4 { margin-top: 0; } .blog-text .timeline-title { font-weight: 600; color: var(--espresso); } .blog-text .steps-list li + li { margin-top: 18px; } .blog-text .steps-list strong { display: block; } /* Tabellen: Rollbox (Wächter tests/blog-tabellen-rollbox.test.js), Zahlenspalten rechts, Summenzeile auf Kalk */ .tabelle-rollbox { overflow-x: auto; max-width: 100%; } .tabelle-rollbox:focus-visible { outline: 3px solid var(--espresso); outline-offset: 3px; border-radius: 4px; } .blog-text :is(.tabelle-rollbox, .table-wrap, .table-scroll) { max-width: 100%; } .blog-text :is(th, td).zahl { text-align: right; } .blog-text tr.hervor td { background: var(--kalk); font-weight: 600; color: var(--espresso); } .blog-text :is(.frist-badge, .badge, .marke) { font-weight: 600; color: var(--tinte-2); } .blog-text :is(.frist-badge.urgent, .badge-red) { color: var(--knopfgold-druck); } .blog-text td.pending { color: var(--leise); } .blog-text :is(td.done, .check, .cross) svg { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; } .blog-text :is(td.done, .check) { color: var(--espresso); } .blog-text .cross { color: var(--leise); } /* Abbildungen (Zeugnis-Beispiele): ganze Seite, nie grösser als aufgenommen, Haarlinie statt Schatten */ .blog-text .article-figure img { width: 100%; max-width: 704px; border: 1px solid var(--linie); border-radius: var(--r-bild); background: #fff; } .blog-text figcaption { font-size: 15px; line-height: 1.45; color: var(--leise); } /* Abschluss der Artikel ohne Würfel (der eine Würfel steht im Seitenkopf): nur der Abschnittsabstand, kein Platz für eine Figur */ .abschluss--artikel { margin-top: var(--abstand-abschnitt); } /* Weiterlesen: zwei Karten, darunter Teilen */ .artikel-weiter .kartenraster { margin-top: 32px; } .artikel-weiter .weiter { margin-top: 28px; } .artikel-teilen { margin-top: 28px; } .artikel-teilen a { display: inline-flex; align-items: center; min-height: 44px; color: var(--espresso); text-underline-offset: 4px; } /* ── Ende Stufe 5 ── */ /* ── Stufe 6: Werkzeuge (/tools/ und die Rechner unter /tools//) ──────────────────────────────────────────── Markup erzeugt scratchpad stufe6/bau.py aus der HEAD-Fassung. Die Rechner sind Funktionsseiten: IDs, Klassen und Skripte bleiben, nur die Hülle wechselt. Die alten Klassen (tool-*, field, result-*, faq-*) sind Haken für die Skripte und werden hier im Auftritt gesetzt; was nur ein Rechner braucht, steht gescoped in seinem