/* ============================================================ ADEA — Design-Tokens Einzige Quelle für Farben, Typografie und Abstände. Werte hier ändern, nicht in einzelnen Bricks-Elementen. ============================================================ */ :root { /* --- Basis ------------------------------------------------ */ --adea-ink: #14161A; /* Fließtext, Überschriften */ --adea-paper: #FFFFFF; --adea-shell: #F2F2EF; /* Sandgrau hell, Sektionen */ --adea-fill: #E6E6E1; /* Sandgrau, Karten */ --adea-slate: #6D6F74; /* Sekundärtext, Metadaten */ --adea-line: #D6D6D0; /* Trennlinien, Rahmen */ /* --- Navy (Primärakzent) ---------------------------------- */ /* Abgeleitet aus dem Firmen-Einseiter (Navy #1C2B44), ersetzt seit 24.09.2026 das frühere Petrol-Grün. */ --adea-navy-900: #111C2F; /* Hover, dunkle Flächen */ --adea-navy-700: #1C2B44; /* Buttons, Links, Primär */ --adea-navy-400: #5B6E8F; /* Icons, Unterstriche */ --adea-navy-100: #DCE2EB; /* Hover-Flächen, Rahmen */ --adea-navy-50: #F2F4F8; /* hinterlegte Sektionen */ /* Alte Petrol-Namen bleiben als Aliase bestehen, damit custom.css und alle Bricks-Einstellungen unverändert weiterlaufen. Neue Regeln bitte mit --adea-navy-* schreiben. */ --adea-petrol-900: var(--adea-navy-900); --adea-petrol-700: var(--adea-navy-700); --adea-petrol-400: var(--adea-navy-400); --adea-petrol-100: var(--adea-navy-100); --adea-petrol-50: var(--adea-navy-50); /* --- Sand (Störer) ---------------------------------------- */ /* NUR für Badges und Auszeichnungen. Nie als Button-Fläche — sonst konkurriert der Störer mit dem eigentlichen CTA. Seit 24.09.2026 auf das Bronze/Gold des Einseiters (#B68235) abgestimmt. */ --adea-sand-500: #B68235; --adea-sand-200: #E6CFA6; --adea-sand-50: #F7F0E3; --adea-sand-text: #7D5411; /* Textfarbe auf Sand 50 */ /* --- Semantische Zuweisungen ------------------------------ */ --adea-btn-bg: var(--adea-petrol-700); --adea-btn-bg-hover: var(--adea-petrol-900); --adea-btn-text: var(--adea-paper); --adea-btn-ghost-border: var(--adea-petrol-700); --adea-btn-ghost-hover: var(--adea-petrol-100); --adea-link: var(--adea-petrol-700); --adea-link-underline: var(--adea-petrol-400); --adea-focus: var(--adea-petrol-400); /* --- Typografie ------------------------------------------- */ /* Display-Schrift noch nicht final entschieden. Zum Wechseln nur diese eine Zeile ändern. */ --adea-font-display: "Newsreader", "Source Serif 4", Georgia, serif; --adea-font-body: "Urbanist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --adea-weight-regular: 400; --adea-weight-medium: 500; --adea-weight-semi: 600; --adea-weight-bold: 700; /* --- Typografie-Skala (Fluid) ---------------------------- Skaliert stufenlos von Mobil (Min) bis Desktop (Max). Keine fehlerhaften Bricks-Generatoren nötig. */ --adea-text-xs: 0.75rem; /* 12px starr */ --adea-text-s: 0.875rem; /* 14px starr */ --adea-text-m: 1rem; /* 16px Base */ --adea-text-l: clamp(1.125rem, 0.5vw + 1rem, 1.25rem); /* 18px -> 20px */ --adea-text-xl: clamp(1.25rem, 1vw + 1rem, 1.5625rem); /* 20px -> 25px */ --adea-text-2xl: clamp(1.375rem, 1.5vw + 1rem, 1.9375rem); /* 22px -> 31px */ --adea-text-3xl: clamp(1.625rem, 2vw + 1.1rem, 2.4375rem); /* 26px -> 39px */ --adea-text-4xl: clamp(1.875rem, 3.5vw + 1rem, 3.0625rem); /* 30px -> 49px */ --adea-leading-tight: 1.15; /* Display */ --adea-leading-snug: 1.35; /* Zwischenüberschriften */ --adea-leading-normal: 1.6; /* Fließtext */ --adea-tracking-label: 0.14em; /* Versal-Labels */ /* --- Abstände (8er-Skala, fluid ab Stufe 4 — C3) ----------- 1-3 bleiben starr (zu klein, um sichtbar zu skalieren). 4-7 laufen stufenlos zwischen Mobil (Min) und Desktop (Max), die Maxima entsprechen weiterhin der 8er-Skala. */ --adea-space-1: 8px; --adea-space-2: 16px; --adea-space-3: 24px; --adea-space-4: clamp(1.5rem, 1.2rem + 1.5vw, 2.5rem); /* 24px -> 40px */ --adea-space-5: clamp(2.5rem, 1.9rem + 3vw, 4rem); /* 40px -> 64px */ --adea-space-6: clamp(3.5rem, 2.4rem + 5.5vw, 6rem); /* 56px -> 96px */ --adea-space-7: clamp(4.5rem, 2.9rem + 8vw, 8rem); /* 72px -> 128px */ /* Sektionsabstand — setzt direkt auf der Skala auf, keine eigene Formel mehr (Phase 1, Schritt 5). */ --adea-section-y: var(--adea-space-6); /* --- Layout ----------------------------------------------- */ --adea-container: 1200px; --adea-gutter: 24px; --adea-radius: 2px; /* bewusst minimal, passt zur Bildmarke */ --adea-border: 1px solid var(--adea-line); /* --- Wirkung ---------------------------------------------- */ --adea-shadow-card: 0 1px 2px rgba(20, 22, 26, 0.04), 0 4px 16px rgba(20, 22, 26, 0.06); --adea-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================================ Schriften — lokal einbinden, kein Google-CDN Dateien nach assets/fonts/ legen. Bezugsquelle: https://fonts.google.com → Download → WOFF2 konvertieren ============================================================ */ @font-face { font-family: "Urbanist"; src: url("fonts/urbanist-variable.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; } @font-face { font-family: "Newsreader"; src: url("fonts/newsreader-variable.woff2") format("woff2"); font-weight: 400 600; font-style: normal; font-display: swap; } /* ============================================================ Globale Grundlagen Alles Weitere wird in Bricks gesetzt, nicht hier. ============================================================ */ /* Begrenzt Overflow, statt ihn zu kaschieren (C6) — bewusst overflow-x: clip statt hidden: hidden würde position: sticky am Header (.brx-sticky) ersatzlos abschalten, clip nicht. Diagnose bei Verdacht auf neuen Overflow: Konsolen-Schnipsel aus dem Gesamtplan, C6. */ html { overflow-x: clip; } body { font-family: var(--adea-font-body); font-size: var(--adea-text-m); line-height: var(--adea-leading-normal); color: var(--adea-ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, .adea-display { font-family: var(--adea-font-display); font-weight: var(--adea-weight-semi); line-height: var(--adea-leading-tight); text-wrap: balance; } h4, h5, h6 { font-family: var(--adea-font-body); font-weight: var(--adea-weight-bold); line-height: var(--adea-leading-snug); } p { text-wrap: pretty; } /* Sichtbarer Fokus — Pflicht für Tastaturbedienung */ :where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 2px solid var(--adea-focus); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ============================================================ Bricks-Anbindung Setzt die Container-Breite, die sich in den Theme Styles nicht abbilden lässt. ============================================================ */ /* Maximale Inhaltsbreite. Ersetzt die Container-Breite, die je nach Bricks-Version an wechselnden Stellen liegt. */ .brxe-container:not(.page-inner), .brxe-section > .brxe-container:not(.page-inner) { max-width: var(--adea-container); margin-inline: auto; } /* Ausnahme: der Wrapper-Container des Content-Templates "Seite Standard" (.page-inner). Er umschliesst den kompletten Seiteninhalt, also auch die Sections. Bleibt er gedeckelt, enden Section-Hintergruende (--tint, --accent, --dark) bei 1200px statt durchzulaufen — sichtbar als Farbflaeche mit weissen Raendern. Deshalb hier freigeben. Die Sections begrenzen ihren Inhalt ueber ihren eigenen Innencontainer selbst, das bleibt unveraendert. Die Ausnahme steht bewusst direkt in der Regel oben (:not(.page-inner)) statt als Gegenregel — eine Gegenregel .page-inner{max-width:none} verliert gegen .brxe-section > .brxe-container (0,1,0 gegen 0,2,0) und bliebe wirkungslos. Die Regel unten als Schutz fuer Seiten, deren Inhalt NICHT nach dem Section-Muster gebaut ist (z. B. Fliesstext direkt im Content, Impressum/Datenschutz): alles ausser Sections bleibt gedeckelt und zentriert. */ .page-inner > :not(.adea-section) { max-width: var(--adea-container); margin-inline: auto; } /* ============================================================ Container- und Sektions-Reset Aus custom.css hierher verschoben (Phase 1, Schritt 4) — B5: Container-, Sektions- und Reset-Regeln gehören hierher, nicht in die Komponenten-Datei. ============================================================ */ /* Bricks-Container sind Flex-Row. Ihre Kinder schrumpfen ohne min-width: 0 nicht unter die Inhaltsbreite. */ .brxe-container > * { min-width: 0; } /* Jede Bricks-Section ist ebenfalls Flex-Row, unabhängig davon, ob sie .adea-section trägt oder nicht — der Header (.header-bar) zum Beispiel nicht. Ihr direktes Kind (meist der Container) braucht dieselbe Regel, sonst verweigert es das Schrumpfen unter die Breite seines eigenen Inhalts. Behebt aber KEINEN Fall, in dem im Bricks-Element selbst eine feste px-Breite gesetzt ist — das lässt sich nur im Builder korrigieren. */ .brxe-section > * { min-width: 0; } /* width: 100% verhindert, dass die Section als Flex-Item des Post-Content-Elements auf Inhaltsbreite schrumpft — sichtbar, sobald sie einen Hintergrund trägt. */ .adea-section { width: 100%; padding-block: var(--adea-section-y); align-items: stretch; padding-inline: 0; } /* Nichts läuft über die Sectionbreite hinaus. min-width: 0 gehört dazu: ohne die Angabe verweigert ein Flex-Item das Schrumpfen, und max-width bleibt wirkungslos. */ .adea-section > * { max-width: 100%; min-width: 0; } /* Gutter nur für Container innerhalb eigener Sections. Der Template-Wrapper .page-inner bleibt unberührt — sonst schrumpft er die Section und der Inhalt läuft über. */ .adea-section > .brxe-container { padding-inline: var(--adea-gutter); } .adea-section--hero { padding-block-start: var(--adea-space-7); } .adea-section--tight { padding-block: var(--adea-space-5); } .adea-section--tint { background-color: var(--adea-petrol-50); } /* Eigener, deutlicherer Streifenhintergrund — z. B. Makler-Verweis (Cross-Sell-Baustein, soll sich von den neutralen --tint-Sections abheben, ohne mit Sand zu konkurrieren, das ausschliesslich Badges vorbehalten ist). Petrol-100 statt Petrol-50: gleiche Markenfarbe, deutlich sichtbarer Unterschied zu --tint. */ .adea-section--accent { background-color: var(--adea-petrol-100); } .adea-section--dark { background-color: var(--adea-petrol-900); color: var(--adea-petrol-50); } .adea-section--dark :is(h1, h2, h3, h4) { color: var(--adea-petrol-50); } /* Zwei gleiche Hintergründe hintereinander: doppelte Polsterung an der Naht kürzen. */ .adea-section--tint + .adea-section--tint, .adea-section--dark + .adea-section--dark { padding-block-start: 0; }