/* ============================================================ icosmedia.de Relaunch v6 — Prototyp Zentrale CSS-Datei · Tokens und Regeln nach ICOS Brand & Style Guide v2.0 (icos-style-guide.html: Farbe, Typografie, Web-UI, Design-Tokens). Kernregeln: Open Sans als einzige Schrift · nur die Gewichte 400/600/700 · oranger Vollton mit anthrazitfarbener Schrift · Orange nie als Fließtext. ============================================================ */ /* ---------- 0. Schrift (selbst gehostet, kein Google-CDN) ---------- Variable Font 400–700 in einer Datei je Subset statt drei Schnitten: weniger Requests, und der Browser lädt latin-ext nur bei Bedarf. Aktualisieren: scripts/fetch-fonts.sh */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/open-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/assets/fonts/open-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ---------- 1. Tokens ---------- */ :root { --navy: #1E4975; /* ICOS Blau — verbindlich */ --navy-deep: #1E4975; /* Der Guide kennt keinen dunkleren Blauton: dunkle Flächen laufen flach im Markenblau. */ --navy-soft: #E9EDF1; /* blue-10: Karten, Marker, Tracks */ --orange: #FF940A; /* ICOS Orange — einziges Brand-Orange */ --orange-dark: #F0880A; /* nur Button-Hover-Fläche */ --orange-text: #B65E00; /* Orange als Fließtext — nie #FF940A auf Weiß */ --ink: #191919; /* ICOS Anthrazit, 16,9:1 auf Weiß */ --muted: #5E5E5E; /* text-secondary */ --muted-soft: #8C8C8C; /* text-muted */ --line: #E6EBEF; /* Rahmen, Trenner (hairline) */ --line-strong: #D2DBE3; /* blue-20: Rahmen bei Hover / betonte Trenner */ --paper: #FFFFFF; /* Seiten-Hintergrund */ --surface-2: #F5F7F9; /* bg-subtle: ruhige Sektionsflächen */ --success: #1E8E57; /* Bestätigungen */ --error: #D23B2E; /* Formular-Fehler */ /* Getönte Flächen für zwei gleichwertige Alternativen (Abschnitt 11a) und für die Kundensystem-Grafik (17a). Das Blau ist NICHT neu, es ist der Ton der Trichter- und Kreisflächen im Hero der Startseite; das Orange ist derselbe Hell- und Sättigungswert, gedreht auf den Farbwinkel von --orange. Nur diese sechs Werte — keinen siebten Zwischenton erfinden. */ --blau-flaeche: #D4E2F0; /* Fläche */ --blau-flaeche-tief: #C2D9EF; /* dieselbe Fläche eine Stufe tiefer (Hover) */ --blau-flaeche-linie: #BCD0E6; /* Kontur/Trenner darin */ --orange-flaeche: #FBE8D5; --orange-flaeche-tief: #F8DCC0; --orange-flaeche-linie: #F0D2AC; --logo-blue: #29446B; /* Logo-Sonderfall lt. Style Guide */ --font-sans: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; --font-mono: "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace; /* Typo-Skala. Die Werte stehen so im Brand & Style Guide v2.0, Abschnitt „06 Typografie · 02 Typo-Skala — Web". Vier Überschriften-Rollen, drei Textrollen — mehr gibt es nicht. Die Display-Ebene des Guides (700 · 64px · LH 1.05, „Markenaussage · Claim") ist hier NICHT abgebildet: keine Seite braucht sie, H1 ist die größte Stufe der Website. Erst wenn eine Claim-Seite entsteht, kommt sie dazu — nicht vorher. */ --text-h1: clamp(min(32px, 8.6vw), 4.2vw, 48px); /* Guide: 40px, Oberkante hier 48 */ --text-h2: clamp(25px, 2.6vw, 30px); /* Guide: 30px */ --text-h3: 21px; /* Guide: 21px */ --text-h4: 17px; /* Guide: 17px, = Label */ --text-body: 17px; /* Guide: 17px / LH 1.6 */ --text-lead: 19px; /* Erweiterung: Vorlauftext, ein Verwender (.lead) */ --text-small: 15px; /* Guide: 15px „Klein / sekundär" */ --text-eyebrow: 13px; /* Guide: 700 · 13px · +0.08em · UPPER */ /* Spacing, 4er-Raster — identisch zum Guide (--space-1…10). Neue Regeln nehmen ausschließlich diese Werte. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; --space-9: 96px; --space-10: 128px; --radius-card: 14px; /* Style Guide --radius: Karten UND Buttons */ --radius-input: 8px; --radius-pill: 999px; /* Der leise Schatten, der auf getönter Fläche den Rahmen ersetzt. Stand zehnmal wörtlich in der Datei, bevor er einen Namen hatte (Guide: --shadow-sm). */ --shadow-hairline: 0 1px 2px rgba(22, 51, 79, .05); --shadow-card: 0 4px 16px rgba(25, 45, 77, .07), 0 1px 3px rgba(25, 45, 77, .05); --shadow-float: 0 18px 48px rgba(25, 45, 77, .12), 0 4px 12px rgba(25, 45, 77, .06); --ease: cubic-bezier(0.4, 0, 0.2, 1); --fade-y: 14px; /* Hubhöhe von fade-up; je Verwender überschreibbar */ /* Container. Drei Maße, drei Aufgaben: Textmaß (Leseweite), Seitenmaß (Standard) und randlos. Ein viertes Maß gibt es nicht — .prose lief vorher auf 760px, das war dasselbe Bedürfnis mit anderem Wert. */ --container-content: 720px; --container-wide: 1200px; /* Sektionsrhythmus, drei Stufen auf dem 4er-Raster. Die Werte werden im Mobil-Breakpoint neu gesetzt, nicht in jeder Regel per @media überschrieben: ein Verwender schreibt padding: var(--section-md) 0 und ist fertig. */ --section-sm: 64px; /* space-8 · gedrängte Bahn */ --section-md: 96px; /* space-9 · Standardbahn */ --section-lg: 128px; /* space-10 · Hero-Bahn */ /* Breakpoints. Nur diese drei — Referenz ideenmitholz.de fährt 1024/767, die 860 hält den Zwischenschritt 3→2 Spalten, den globale Grid-Klassen brauchen. Neue Regeln NIE auf einem vierten Wert aufsetzen. CSS erlaubt keine Variablen in @media, die Werte stehen hart im Code. */ --bp-tablet: 1024px; --bp-small: 860px; --bp-mobile: 767px; } /* Mobil sind es dieselben Rollen mit kleineren Werten — deshalb hier die Tokens neu setzen statt in jeder Sektionsregel ein @media zu wiederholen. */ @media (max-width: 767px) { :root { --section-sm: 48px; /* space-7 */ --section-md: 64px; /* space-8 */ --section-lg: 72px; } } /* ---------- 2. Reset & Basis ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation: none !important; transition: none !important; } } body { margin: 0; font-family: var(--font-sans); font-size: 17px; line-height: 1.6; color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background: var(--navy); color: #fff; } h1, h2, h3, h4 { color: var(--navy); line-height: 1.12; margin: 0 0 16px; text-wrap: balance; font-feature-settings: "ss01" off; overflow-wrap: break-word; } /* Deutsche Komposita ("Digitalisierungsbegleitung:") sind breiter als die 350px-Spalte auf dem Handy. Ein 1fr-Track waechst mit dem min-content mit und schiebt die ganze Spalte aus dem Viewport — nur Silbentrennung senkt den min-content, overflow-wrap allein tut das nicht. Nicht global: auf Desktop trennt sie zusammen mit text-wrap:balance ohne Not. */ @media (max-width: 767px) { h1, h2, h3, h4, .cb__titel { hyphens: auto; } } /* Typo-Skala Web lt. Guide. Bold 700 ist das schwerste Gewicht — kein 800. Die Untergrenze ist min(32px, 8.6vw) statt 32px: .swoosh trägt zwingend white-space:nowrap (sonst zerreisst der Bogen), und ein Schlüsselwort wie „15 Minuten Klarheit" braucht bei 32px 305px — mehr als die 280px, die bei einem 320px-Fenster im Container bleiben. Gemessen auf /erstgespraech/. 8.6vw erreicht 32px bereits bei 373px Fensterbreite, oberhalb davon ändert sich also nichts an der Skala; nur die schmalsten Geräte und Browser-Zoom ab 125% bekommen kleinere Grade statt einer Seite, die nach rechts ausläuft. */ /* Vier Rollen, an das Element gebunden statt an eine Klasse: wer

schreibt, bekommt die Sektionsüberschrift — es gibt keine .h2-Variante daneben. h1 = Display der Website (die 64px-Display-Ebene des Guides ist unbenutzt). */ h1 { font-size: var(--text-h1); line-height: 1.1; letter-spacing: -0.02em; font-weight: 700; } h2 { font-size: var(--text-h2); line-height: 1.15; letter-spacing: -0.02em; font-weight: 700; } h3 { font-size: var(--text-h3); line-height: 1.2; letter-spacing: -0.02em; font-weight: 700; } h4 { font-size: var(--text-h4); letter-spacing: -0.02em; font-weight: 700; } p, ul, ol { margin: 0 0 16px; max-width: 66ch; } p { text-wrap: pretty; } ul, ol { padding-left: 22px; } li { margin-bottom: 8px; } /* Textlink = Markenblau, im Markenblau unterstrichen. Der Unterstrich stand vorher auf --line-strong (#D2DBE3) und war damit kaum zu sehen — ein Link im Fließtext liest sich dann wie fetter Text. Jetzt trägt er dieselbe Farbe wie die Schrift. Abgrenzung zum Arrow-Button (Abschnitt 6): der ist 600 fett und trägt einen 2px-Unterstrich in Orange. Der Textlink bleibt normalgewichtig mit 1px in Blau — beim Überfahren wechselt der Strich auf Orange, damit der Hover ein sichtbares Ziel hat. Ohne das wäre er unverändert, weil Schrift- und Strichfarbe schon gleich sind. */ a { color: var(--navy); text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--navy); transition: color .15s ease, text-decoration-color .15s ease; } a:hover { color: var(--navy); text-decoration-color: var(--orange); } /* Auf dunklem Blau kehrt sich das um: Navy auf Navy wäre unlesbar, also Schrift und Unterstrich in Weiß. Betrifft die drei dunklen Flächen der Seite — .section--navy, .cta-block und die Banner-Bahn .cb--navy. :not(.btn):not(.btn-arrow), weil Knöpfe dort ihre eigene Farbgebung haben: .btn--primary ist oranger Vollton mit anthrazitem Text, .btn--secondary schaltet über die Regel in Abschnitt 6 auf Weiß. Ohne den Ausschluss würden beide hier überschrieben. Der Footer ist ebenfalls navy, hat aber seit jeher eine eigene Regel (Abschnitt 33: #E8F0F7, ohne Unterstrich) und bleibt unangetastet. */ .section--navy a:not(.btn):not(.btn-arrow), .cta-block a:not(.btn):not(.btn-arrow), .cb--navy a:not(.btn):not(.btn-arrow) { color: #fff; text-decoration-color: rgba(255, 255, 255, .55); } .section--navy a:not(.btn):not(.btn-arrow):hover, .cta-block a:not(.btn):not(.btn-arrow):hover, .cb--navy a:not(.btn):not(.btn-arrow):hover { color: #fff; text-decoration-color: #fff; } img, svg { max-width: 100%; height: auto; } small, .small { font-size: 14px; } strong { font-weight: 700; } hr { border: none; border-top: 1px solid var(--line); margin: 32px 0; } table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; } input, textarea, select, button { caret-color: var(--orange); } :focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; } @supports (scrollbar-color: red blue) { html { scrollbar-color: #B6C6D4 transparent; } } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--navy); color: #fff; padding: 12px 20px; z-index: 200; border-radius: 0 0 8px 0; } .skip-link:focus { left: 0; color: #fff; } /* ---------- 3. Layout ---------- */ /* Drei Container-Rollen, keine vierte: wide = .container, Seitenmaß 1200 inkl. Polster (border-box). Deckt sich mit der Referenz (Elementor 1200 + 10px Polster). content = --container-content (720px). Trägt .section-head und .prose; KEINE eigene .container--content-Klasse, die wäre ein dritter Name für dasselbe Maß. full = randlos. Existiert genau einmal (.uebergabe__platte) und braucht dort eine asymmetrische Geometrie — deshalb Komponenteneigenschaft, keine gemeinsame Klasse für einen einzigen Verwender. Kommt ein zweiter, wird sie eine. */ .container { max-width: var(--container-wide); margin: 0 auto; padding: 0 10px; } @media (max-width: 767px) { .container { padding: 0 20px; } } /* Sektionsbahnen: drei Höhen, benannt statt gezählt. Kein @media hier — die Tokens selbst werden im Mobil-Breakpoint kleiner (Abschnitt 1). */ .section { padding: var(--section-md) 0; } .section--soft { background: var(--surface-2); } .section--navy { background: var(--navy); color: #fff; } .section--navy h2, .section--navy h3 { color: #fff; } .section--compact { padding: var(--section-sm) 0; } /* minmax(0,1fr) statt 1fr: ein 1fr-Track hat min-content als Untergrenze und wird von einem breiten Kind aufgeblasen, bis er breiter ist als sein eigener Container. Gemessen bei 320px auf /tools/: der .grid-3-Track stand auf 324,7px bei 280px Containerbreite — die ganze Seite lief nach rechts aus. minmax(0,…) nimmt die Untergrenze weg, das Kind muss schrumpfen. */ .grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; } /* Engerer Abstand, wenn die beiden Spalten Karten tragen statt Textblöcke. */ .grid-2--tight { gap: 20px; } /* Spalten oben bündig statt gestreckt: neben einem hohen Formular bleibt der Text am Bild (seit 08.10.2026, /danke/). */ .grid-2--oben { align-items: start; } .grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } .grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; } .grid--center { align-items: center; } /* Zickzack: dreht die Spaltenfolge in jeder zweiten Zeile um, damit Bild und Text abwechselnd links stehen. Nur über dem Umbruch — gestapelt muss das Bild immer über seinem Text bleiben, sonst steht der Text beim ersten Block über, beim zweiten unter dem Bild. */ .grid--flip > :first-child { order: 2; } @media (max-width: 767px) { .grid--flip > :first-child { order: 0; } } @media (max-width: 1024px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } } /* Zwei Spalten mit schmaler Medienspalte: Hochformat-Grafik neben Textblock. Bricht früher um als .grid-2, weil die Textspalte sonst zu schmal wird. */ .grid-media { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 64px; } @media (max-width: 860px) { .grid-media { grid-template-columns: 1fr; gap: 32px; } .grid-media .img-placeholder { max-width: 340px; } } .center { text-align: center; } .center p, .center ul { margin-left: auto; margin-right: auto; } .section-head { max-width: var(--container-content); margin-bottom: 56px; } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head p:last-child { margin-bottom: 0; } @media (max-width: 767px) { .section-head { margin-bottom: 40px; } } /* ---------- 4. Typo-Hilfsklassen ---------- */ /* Eyebrow = Label-Rolle des Guides: 700 · 13px · +0.08em · Versalien. Steht als Kontextzeile über H1 und H2 und ist die einzige Versalien-Auszeichnung der Seite — kein zweites Kicker- oder Chip-Textformat daneben. */ .eyebrow { display: block; font-size: var(--text-eyebrow); font-weight: 700; letter-spacing: .01em; color: var(--muted); margin-bottom: 14px; } .section--navy .eyebrow { color: #9FB8CE; } .lead { font-size: var(--text-lead); line-height: 1.6; color: var(--muted); } .section--navy .lead, .section--navy p { color: #D6E2EE; } .muted { color: var(--muted); } /* Utilities (ersetzen Inline-Styles) */ .m-0 { margin: 0 !important; } .mt-8 { margin-top: 8px !important; } .mt-16 { margin-top: 16px !important; } .mt-24 { margin-top: 24px !important; } .mt-40 { margin-top: 40px !important; } .mb-16 { margin-bottom: 16px !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .max-w-none { max-width: none !important; } /* Doppelter Kopfabstand einer Bahn — rechnet mit dem Token, damit der Mobil- Wert (Abschnitt 1) mitschrumpft. Kein neuer Abstandswert. */ .pt-double { padding-top: calc(var(--section-sm) * 2) !important; } /* Haelt ein Wort zusammen, das sonst an einem Bindestrich umbrechen wuerde. Gebraucht in der Kreislauf-Mitte der App-Seiten: „Buchhaltung und E-Rechnung" brach nach dem „E" um und liess einen einzelnen Buchstaben am Zeilenende stehen. Der Umbruch gehoert vor das ganze Wort. */ .nowrap { white-space: nowrap; } .text-15 { font-size: 15px; } .text-18 { font-size: 18px; } .text-19 { font-size: 19px; } /* Nur für Screenreader: Text, der vorgelesen, aber nicht gezeigt wird. Das übliche Muster mit clip, die Fläche schrumpft auf einen Pixel und wird abgeschnitten (display:none würde auch das Vorlesen abschalten). !important wie bei den Utilities oben: Die Klasse sitzt auch in Bausteinen, deren eigene Regeln Kinder als Grid- oder Flex-Element setzen (.kanal, .btn), und darf dort nie sichtbar werden. Gesetzt von main.js („Links in einem neuen Tab“) an jedem Link mit target="_blank" ohne aria-label. */ .visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; border: 0 !important; } /* ---------- 5. Buttons (C4) ---------- */ /* Ein Button-System, eine Farbe: oranger Vollton mit anthrazitfarbener Schrift (8,7:1, AAA). inline-flex, damit min-height die Schrift zentriert. Drei Erscheinungsbilder für vier Rollen — mehr braucht die Seite nicht: .btn--primary Vollton. Die eine Haupthandlung je Bahn. .btn--secondary Orange-Outline. Im Guide heißt dieses Bild „ghost"; der Guide führt daneben ein .ui-btn--secondary, das byteweise dem Primary gleicht — eine Kopie, kein Muster. Deshalb gibt es hier KEIN .btn--ghost: es wäre ein vierter Name für dieses eine Bild. .btn-arrow Arrow-Button: blaue 600er Schrift, oranger 2px-Unterstrich, Pfeil → im Text. Referenz /leistungen/. Jede Handlung, die nicht wie ein Knopf aussehen soll (Hero-Nebenhandlung, Kartenfuß, Glossar). .btn--small Größenvariante, kein eigenes Bild. Neue Handlung? Eine dieser Rollen wählen. Kein neuer Button. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-sans); font-size: var(--text-small); font-weight: 700; letter-spacing: -0.006em; line-height: 1.2; padding: 13px 24px; border-radius: var(--radius-card); border: 1.5px solid transparent; cursor: pointer; text-decoration: none; text-align: center; transition: background .2s var(--ease), transform .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease); min-height: 48px; } .btn--primary, .btn--primary:hover { color: #191919; border-color: transparent; } .btn--primary { background: var(--orange); box-shadow: 0 4px 14px rgba(255, 148, 10, .30); } .btn--primary:hover { background: var(--orange-dark); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 148, 10, .34); } /* Leise Nebenaktion: Orange-Outline — keine zweite Buttonfarbe. (= „ghost" im Brand & Style Guide, Abschnitt 09 · 01 Buttons.) */ .btn--secondary { background: transparent; color: var(--ink); border-color: var(--orange); } .btn--secondary:hover { background: #FFF4E7; border-color: var(--orange); color: var(--ink); } /* Auf dunklem Grund traegt die Grundfarbe des Sekundaerknopfs nicht: --ink auf --navy sind 1,9:1. Die drei dunklen Flaechen der Seite sind .section--navy, .cta-block und .cb--navy (Banner-Bahn, Abschnitt 16a) — alle drei brauchen dieselbe Umschaltung auf Weiss. */ .section--navy .btn--secondary, .cta-block .btn--secondary, .cb--navy .btn--secondary { color: #fff; border-color: var(--orange); } .section--navy .btn--secondary:hover, .cta-block .btn--secondary:hover, .cb--navy .btn--secondary:hover { background: rgba(255, 148, 10, .16); border-color: var(--orange); color: #fff; } .btn--block { display: flex; width: 100%; } /* Header-CTA: zwischen ui-btn--sm (13 px) und Default (15 px), nicht gequetscht. */ .btn--small { padding: 10px 22px; font-size: 14px; min-height: 42px; } /* Arrow-Button — die dritte und letzte Handlungsform. Referenz ist /leistungen/, Karte „Beratung": Anthrazit-Blau, 600, 15px, oranger 2px-Unterstrich mit 4px Abstand, Pfeil → im Text. Beim Hover wird der Unterstrich blau. Genau dieses Bild, nirgendwo ein zweites. Verbindlich: · Der Pfeil steht IM Text (…"ansehen →"), nicht als ::after — so wie in der Referenz. Ein Arrow-Button ohne Pfeil gibt es nicht. · Der Unterstrich ist orange. Ein nur blauer Verweis ist kein Arrow-Button. · Als zulässig, wenn die ganze Karte der Link ist (ein im wäre ungültig) — die Hover-Regel unten fasst diesen Fall mit. Ersetzt: .card__cta, .card__link, .kreislauf__more, .buch-angebot__cta und die ungestylten Pfeil-Links. */ .btn-arrow { font-weight: 600; font-size: var(--text-small); color: var(--navy); text-decoration-line: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; } .btn-arrow:hover, a:hover .btn-arrow { color: var(--navy-deep); text-decoration-color: var(--navy-deep); } .btn-arrow:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 3px; } .microcopy { display: block; font-size: var(--text-eyebrow); color: var(--muted); margin-top: 12px; } .section--navy .microcopy, .cta-block .microcopy { color: #9FB8CE; } .cta-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } /* ---------- 6. Header / Navigation (C1) ---------- */ .site-header { position: sticky; top: 0; z-index: 100; background: rgba(255, 255, 255, .86); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); transition: box-shadow .25s var(--ease); } .site-header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(22, 51, 79, .25); } /* Header läuft im selben 1200er-Container wie der Inhalt — kein Sonderfall. */ .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 72px; } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; flex: none; } /* Der Zusatz weicht, sobald die Navigation den Platz braucht — siehe den Block "Header-Engstelle" weiter unten bei den Navigations-Regeln. */ /* Der Header ist an der Breitengrenze (siehe "Header-Engstelle"): bei 1440px bleiben zwischen Marke, Navigation und CTA rund 90px Luft. Die lag vorher komplett an den Rändern der Navigation — deshalb wächst sie hier auf die volle Restbreite und zentriert ihre Punkte, damit die Luft in die Lücken zwischen den Menüpunkten wandert statt links und rechts zu versickern. Mehr als 6px Lücke geht nur, wenn Claim oder CTA Platz abgeben. */ .nav { flex: 1 1 auto; } .nav__list { display: flex; justify-content: center; /* Ohne das greift der 66ch-Deckel für Listen und schneidet die Navigation stillschweigend auf 640px zusammen. */ max-width: none; gap: 4px; list-style: none; margin: 0; padding: 0; } .nav__link { display: inline-block; padding: 10px 11px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; border-radius: var(--radius-pill); transition: color .15s ease; } .nav__item > .nav__link { white-space: nowrap; } /* Hover nur über die Farbe, keine Fläche: Eine graue Kachel hinter dem Menüpunkt konkurriert mit der orangen aria-current-Markierung darunter und lässt die Leiste unruhig wirken. Die Dropdown-Links darunter machen es genauso (.nav__dropdown a:hover). Tastaturnutzer verlieren dadurch nichts — der :focus-visible-Rahmen aus Abschnitt 2 bleibt. */ .nav__link:hover { color: var(--navy); } .nav__link[aria-current="page"] { color: var(--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--orange); border-radius: 0; } /* KI-Dropdown (Desktop: hover/focus-within) */ .nav__item { position: relative; } /* Strich-Chevron: dreht sich, wenn das Dropdown offen ist. */ .nav__caret { display: inline-block; margin-left: 3px; vertical-align: -2px; opacity: .7; transition: transform .16s var(--ease), opacity .16s var(--ease); } .nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { opacity: 1; transform: rotate(180deg); } .nav__dropdown { position: absolute; top: 100%; left: 0; min-width: 256px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-float); padding: 8px; margin: 6px 0 0; list-style: none; display: none; z-index: 120; } .nav__item:hover .nav__dropdown, .nav__item:focus-within .nav__dropdown { display: block; } /* Unsichtbare Brücke über den 6-px-Spalt: sonst reisst der Hover auf dem Weg vom Menüpunkt zum Unterpunkt ab und das Dropdown klappt zu. */ .nav__dropdown::before { content: ""; position: absolute; inset: -8px 0 auto; height: 8px; } .nav__dropdown li { margin: 0; } .nav__dropdown a { display: block; padding: 10px 12px; border-radius: 8px; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: none; } .nav__dropdown a:hover { color: var(--navy); } .nav__dropdown a small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); margin-top: 1px; } /* Breites Dropdown fuer grosse Gruppen. Der Zoho-Bereich fuehrt inzwischen 26 Unterpunkte; in einer Spalte laeuft das Menue weit unter den unteren Bildschirmrand und die hinteren Eintraege sind nicht erreichbar. Ab elf Eintraegen setzt sync-nav.py deshalb diese Klasse. Mehrspaltensatz (column-count) statt Grid, weil er die Liste SPALTENWEISE von oben nach unten fuellt — die alphabetische Reihenfolge bleibt damit lesbar. Ein Grid wuerde zeilenweise fuellen und die Sortierung zerreissen. Die Breite ist auf den Viewport gedeckelt, das Panel haengt mittig unter dem Menuepunkt statt linksbuendig, sonst ragt es rechts heraus. */ .nav__dropdown--breit { width: min(760px, calc(100vw - 40px)); left: 50%; transform: translateX(-50%); column-count: 3; column-gap: 4px; } .nav__dropdown--breit li { break-inside: avoid; } /* Mega-Menü Leistungen (Briefing Leistungsstruktur, 08.10.2026): drei Spalten, sortiert danach, wer die Arbeit macht, gelesen von links nach rechts wie der Weg des Kunden: erst klären, dann selbst umsetzen oder umsetzen lassen. Leistungen steht ganz links in der Leiste, deshalb hängt das Panel linksbündig unter dem Menüpunkt; die Breite ist auf den Viewport gedeckelt. Grid statt Spaltensatz, weil jede Spalte eine eigene Gruppe ist. Die Leiste darunter (Förderung, Entscheidungshilfe, Button) ist am 09.10.2026 entfallen (Auftraggeber). */ .nav__dropdown--mega { width: min(900px, calc(100vw - 260px)); padding: 18px 12px 14px; column-gap: 8px; } .nav__item:hover .nav__dropdown--mega, .nav__item:focus-within .nav__dropdown--mega { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } .nav__mega-spalte { min-width: 0; } .nav__mega-spalte ul { list-style: none; margin: 0; padding: 0; } .nav__mega-spalte ul ul { margin: 0 0 4px 12px; padding-left: 8px; border-left: 2px solid var(--line); } .nav__mega-kopf { display: block; padding: 0 12px 10px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--navy); letter-spacing: .02em; } /* Der Kernsatz hat in jeder Spalte Platz für zwei Zeilen (Auftraggeber, 09.10.2026): Links bricht „Wir klären mit dir, was passieren soll.“ um, so beginnen die Leistungen trotzdem in allen drei Spalten auf derselben Höhe. */ .nav__mega-kopf small { display: block; font-size: 12px; font-weight: 400; color: var(--muted); letter-spacing: 0; margin-top: 2px; line-height: 1.45; min-height: 2.9em; } .nav__mega-hinweis { margin: 6px 12px 0; font-size: 12px; color: var(--muted); max-width: none; } /* Förderhinweis auf jeder Leistungsseite (scripts/leistungsbloecke.py, Block „foerderung“): Icon links, Text und die beiden Wege rechts. Ein eigenes kleines Bauteil, weil es auf jeder Leistungsseite gleich steht. */ .foerderhinweis { display: flex; gap: 18px; align-items: flex-start; } .foerderhinweis__icon { flex: none; margin-top: 2px; } .foerderhinweis__titel { margin: 0 0 4px; font-weight: 700; color: var(--navy); } .foerderhinweis__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 12px 0 0; max-width: none; } .ziel__links { display: flex; flex-wrap: wrap; gap: 6px 16px; } @media (max-width: 767px) { .foerderhinweis { flex-direction: column; gap: 10px; } } .foerderhinweis-zeile { max-width: 820px; margin: 0 auto; } /* Wegweiser /leistungen/: die drei Arbeitsweisen als Karten, je Leistung eine Zeile mit Name und Teaser wie im Mega-Menü. Haarlinien statt Kästchen, damit drei Karten mit fünf Einträgen nicht nach Formular aussehen. */ .arbeitsweise__liste { list-style: none; margin: 0; padding: 0; max-width: none; border-top: 1px solid var(--line); } .arbeitsweise__liste li { margin: 0; border-bottom: 1px solid var(--line); } .arbeitsweise__link { display: block; padding: 12px 0; text-decoration: none; color: inherit; } .arbeitsweise__name { display: block; font-weight: 700; color: var(--navy); transition: color .2s var(--ease); } .arbeitsweise__teaser { display: block; font-size: 14px; color: var(--muted); } .arbeitsweise__link:hover .arbeitsweise__name { color: var(--orange-text); } /* Checkliste in zwei Spalten, für die Inhalte einer Leistung in einer breiten Karte. ul ist global auf 66ch gedeckelt, deshalb max-width: none. */ .check-list--2spaltig { columns: 2; column-gap: 40px; max-width: none; } .check-list--2spaltig li { break-inside: avoid; } @media (max-width: 767px) { .check-list--2spaltig { columns: 1; } } /* Entscheidungshilfe „Welcher Weg passt zu dir?“ (main.js, data-wegweiser): links vier Fragen mit Antworten als Chips, rechts der Vorschlag. Alle Ergebnisse stehen im HTML, das Skript blendet nur eins ein. Ohne Kontaktdaten. */ .wegweiser { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; } .wegweiser__fragen { display: grid; gap: 14px; } .wegweiser__frage { margin: 0; padding: 16px 18px; min-width: 0; border: 1px solid var(--line); border-radius: var(--radius-card); background: #fff; } .wegweiser__frage legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 16px; font-weight: 700; color: var(--navy); } .wegweiser__antworten { clear: both; display: flex; flex-wrap: wrap; gap: 8px; } .wegweiser__antwort { position: relative; cursor: pointer; } .wegweiser__antwort input { position: absolute; width: 1px; height: 1px; opacity: 0; } .wegweiser__antwort span { display: inline-block; padding: 8px 16px; font-size: 15px; border: 1.5px solid var(--line); border-radius: var(--radius-pill); background: #fff; transition: border-color .2s var(--ease), background .2s var(--ease); } .wegweiser__antwort:hover span { border-color: var(--orange); } .wegweiser__antwort input:checked + span { border-color: var(--orange); background: var(--orange); color: var(--ink); font-weight: 600; } .wegweiser__antwort input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 2px; } .wegweiser__ergebnisse { position: sticky; top: 88px; } .wegweiser__ergebnis[hidden], .wegweiser__hinweis[hidden] { display: none; } @media (max-width: 860px) { .wegweiser { grid-template-columns: minmax(0, 1fr); } .wegweiser__ergebnisse { position: static; } } /* Mobile-Navigation: die Leistungen in den drei Gruppen des Mega-Menüs. */ .mobile-nav__gruppe { margin: 14px 0 0; padding: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #8FA8BF; } /* zwei Klassen, weil .mobile-nav__sub a das Polster sonst mit !important auf 0 setzt */ .mobile-nav .mobile-nav__einzug a { padding-left: 14px !important; } /* Wortmarke in der Kreislauf-Mitte. Rueckfall des Zoho-Bauers fuer eine App ohne Logo (logo=None): statt eines erfundenen Logos steht dort der Produktname als Schrift. Groesse und Gewicht sind so gewaehlt, dass er neben den echten Logos (Hoehe 34px) nicht aus der Reihe faellt. Bis 10.10.2026 auf Invoice, Office Integrator, DAP und Projects Plus, seitdem tragen auch sie das Produktlogo (O15); die Regel bleibt fuer den Rueckfall. */ .kreislauf__wortmarke { display: inline-block; font-size: 19px; font-weight: 700; line-height: 34px; color: var(--navy); letter-spacing: -.01em; } /* Mobile-Nav Sub-Liste */ .mobile-nav__sub { list-style: none; margin: 4px 0 0; padding: 0 0 0 16px; } .mobile-nav__sub a { font-size: 17px !important; font-weight: 600 !important; color: #C9D8E6 !important; padding: 10px 0 !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; } .mobile-nav__sub a:hover { color: var(--orange) !important; } .header-cta { flex: none; } .burger { display: none; background: none; border: 1px solid var(--line); border-radius: var(--radius-input); padding: 10px; cursor: pointer; min-width: 48px; min-height: 48px; } .burger__bars { display: block; width: 22px; height: 2px; background: var(--navy); position: relative; margin: 0 auto; border-radius: 2px; } .burger__bars::before, .burger__bars::after { content: ""; position: absolute; left: 0; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; } .burger__bars::before { top: -7px; } .burger__bars::after { top: 7px; } /* Header-Engstelle. Kein Layout-Breakpoint, sondern die Kante des Containers selbst: ab 1200 abwärts ist der 1200er-Container nicht mehr voll ausgefahren, der Header wird schmaler als sein Inhalt braucht. Gemessen bei voller Breite: Marke 224 + Navigation 642 + CTA 224 + zwei Lücken à 24 = 1138px gegen 1180px Inhaltsbreite. Bei 1025px Fenster bleiben nur 1005px. Claim (−120), engere Menüpunkte (−42) und der kompakte CTA (−36) bringen den Bedarf auf 940px. Ab 1024px greift ohnehin der Burger. Dieser Block MUSS nach .nav__link stehen — gleiche Spezifität, der spätere gewinnt. */ @media (max-width: 1200px) { .nav__link { padding-left: 8px; padding-right: 8px; } .nav__list { gap: 2px; } .header-cta .btn { padding: 10px 18px; font-size: 15px; min-height: 44px; } /* Gerechnet bei 1025px, wo die Navigation gerade noch steht (ab 1024 der Burger): Inhaltsbreite 1005px gegen Logo 121 + Nav 630 + CTA 228 = 979. Mit dem 24px-Gap zweimal dazwischen wären es 1027 — der CTA lief rechts hinaus. Gap auf 16 und Logo auf 40px Höhe: 991px, 14px Luft. Vorher trug das Logo hier keine Rolle, weil es nur die Wortmarke war. */ .site-header__inner { gap: 16px; } .brand img { height: 40px; width: auto; } } @media (max-width: 1024px) { .nav { display: none; } .burger { display: block; } } /* Auf schmalen Telefonen weicht der Header-CTA. Gemessen bei 390px: Logo 104 + CTA 228 + Burger 48 plus drei Lücken à 24 und 2x20 Innenabstand ergeben 492px Bedarf bei 390px Platz. Der Burger stand dadurch bei 448px, also ausserhalb des Fensters: das Menü war auf jedem Telefon nicht erreichbar. Das ist ein Funktionsfehler, keine Kosmetik. Der CTA geht dabei nicht verloren, er steht auf Mobil zweimal weiter: im Burger-Menü als btn--block und in der Sticky-Leiste (ab 860px sichtbar). Ohne CTA braucht der Header 104 + 48 + 48 + 40 = 240px. */ @media (max-width: 767px) { .header-cta { display: none; } } .mobile-nav { position: fixed; inset: 0; z-index: 150; background: var(--navy-deep); color: #fff; padding: 24px; display: none; flex-direction: column; overflow-y: auto; } .mobile-nav.is-open { display: flex; } .mobile-nav__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 32px; } .mobile-nav__close { background: none; border: 1px solid rgba(255,255,255,.4); color: #fff; border-radius: var(--radius-card); padding: 10px 18px; font-size: 15px; font-weight: 600; cursor: pointer; min-height: 48px; } /* max-width:none, weil main.css jedes ul auf 66ch deckelt — das Menü stand dadurch auch bei 1000px Fenster nur 668px breit, mit 34% leerer Fläche rechts daneben. */ .mobile-nav__list { list-style: none; margin: 0 0 32px; padding: 0; max-width: none; } .mobile-nav__list a { display: block; color: #fff; text-decoration: none; font-size: 22px; font-weight: 700; letter-spacing: -0.015em; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.12); } .mobile-nav__list a:hover { color: var(--orange); } /* Der Burger ersetzt die Navigation schon ab 1024px abwärts (siehe die Rechnung an .nav). Als eine Spalte war das Menü dort 2.263px hoch: 36 Links, „Kontakt" zweieinhalb Bildschirme tief. Ab 768px ist Platz für zwei Spalten; break-inside hält jede Rubrik samt Unterpunkten zusammen. Unter 768px bleibt es einspaltig — dort ist die Fläche nicht da. */ @media (min-width: 768px) { .mobile-nav__list { columns: 2; column-gap: 48px; } .mobile-nav__list > li { break-inside: avoid; } } /* ---------- 7. Hero (C2) ---------- */ /* Die Hero-Bahnen laufen auf demselben Rhythmus wie jede andere Sektion — vor der Konsolidierung trugen sie fünf eigene Werte (96/104, 124/72, 64/44, 56/64, 56/48). Jetzt: lg für die tragende Bahn, md für die schlichte, sm für den Mini-Hero. */ .hero { padding: var(--section-md) 0; } /* Split-Hero: verschränkte Achse. Das Medium beginnt oberhalb der Headline und endet unterhalb der CTAs, greift also vertikal in den Textblock statt parallel danebenzustehen. Die Verschränkung passiert nur auf der Höhen- achse, deshalb funktioniert sie mit Foto wie mit Infografik. Die obere Luft (section-lg) trägt den Versatz des Mediums. */ .hero--split { padding: var(--section-lg) 0 var(--section-sm); } .hero--split .hero__grid { display: grid; grid-template-columns: 54fr 46fr; gap: 56px; align-items: start; } /* Untergrenze als min() aus demselben Grund wie bei der Basis-H1 (Abschnitt 2): ein Schlüsselwort im .swoosh darf nicht umbrechen und wird bei fester Untergrenze irgendwann breiter als der Container. „dauerhaft halten" passt heute mit 245px in die 280px bei 320px Fenster — ein längeres Wort nicht mehr. 8vw erreicht 30px bei 375px Fensterbreite, darüber ändert sich nichts. */ .hero--split h1 { font-size: clamp(min(30px, 8vw), 3.5vw, 44px); max-width: 26ch; } .hero__media { margin-top: -64px; } /* Echte Fotos im Kopf (figure.hero__media mit ): Der Browser gibt
seitlich 40px Rand, das Foto stand dadurch eingerückt neben Text und Knöpfen. Bündig mit der Spalte und mit den runden Ecken der Karten (10.10.2026). */ figure.hero__media:not(.img-placeholder) { margin-left: 0; margin-right: 0; } figure.hero__media:not(.img-placeholder) > img { display: block; width: 100%; height: auto; border-radius: var(--radius-card); } /* Foto-Slots bringen nur die 220px Grundhöhe des Platzhalters mit und würden weit oberhalb der CTAs enden. Dann greift nichts ineinander. Infografiken bringen ihre Höhe selbst mit und brauchen die Regel nicht. */ .img-placeholder.hero__media { min-height: 460px; } /* Ab 860px wird der Split einspaltig — deshalb hier feste Stufen der Spacing-Skala statt der Rhythmus-Tokens: die wechseln erst bei 767 und würden dem Tablet die 128px-Bahn des Desktops lassen. */ @media (max-width: 860px) { .hero { padding: var(--space-7) 0 var(--space-8); } .hero--split { padding: var(--space-7) 0; } .hero--split .hero__grid { grid-template-columns: 1fr; gap: 32px; } .hero--split h1 { max-width: none; } .hero__media { margin-top: 0; } .img-placeholder.hero__media { min-height: 260px; } } .hero h1 { margin-bottom: 22px; } .hero .lead { margin-bottom: var(--space-6); font-size: var(--text-lead); } .hero__ctas { margin-bottom: var(--space-2); } /* Mini-Hero (Tool-/Funnel-Seiten) */ .hero--mini { padding: var(--section-sm) 0 var(--space-7); } /* ---------- 8. Trust-Leiste (C3) ---------- */ .trust-bar { display: flex; flex-wrap: wrap; gap: 10px 26px; align-items: center; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); list-style: none; padding-left: 0; } .trust-bar li { font-size: 13px; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 8px; margin: 0; } .trust-bar li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--navy); opacity: .3; flex: none; } .section--navy .trust-bar { border-top-color: rgba(255,255,255,.18); } .section--navy .trust-bar li { color: #9FB8CE; } /* Belege als Tags an der Haarlinie (C3 im Hero) -------------------------- Im Hero verankern die Belege die Komposition nach unten: eine Zeile von Kante zu Kante, gleich in Split- und Mini-Hero. Die Linie ist die Aufhängung, die Belege hängen als Täfelchen daran. Fläche ist das blue-10 der Signature-Grafik (--navy-soft), damit Hero-Bild und Belegzeile dasselbe Blau teilen; Schrift im Markenblau, 700 — so lesen sie sich als Auszeichnung statt als Fußnote. padding-top: 0 ist der Kern: nur so berühren die Täfelchen die Linie wirklich. Oben bleiben die Ecken eckig — dort sitzt die Aufhängung —, unten sind sie gerundet. Kein Schatten, kein Rahmen, kein Verlauf. Die Täfelchen ziehen sich über die ganze Containerbreite: erstes links, letztes rechts bündig, der Rest gleichmäßig dazwischen. Gleich breite Rasterspalten wären hier falsch, weil die Belege sehr unterschiedlich lang sind — der Abstand würde ungleich (Rest der Spalte + gap). space-between mit flex verteilt den Rest gleichmäßig, also sind die sichtbaren Lücken gleich. Das gap ist nur die Untergrenze für den Umbruchfall. Kein Punkt-Marker: die Verteilung gliedert hier schon. Voraussetzung im Markup: das