/* ============================================================ main.css – ab&d Rechtsanwälte Peters CSS-System (inline, keine @imports) + Kompatibilität Generiert am 2026-03-28 ============================================================ */ /* Inter Variable Font (lokal, DSGVO-konform) */ @font-face { font-family: 'Inter'; src: url('../fonts/InterVariable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ── 01-variables.css ── */ /* ============================================================ 01-variables.css Design-Tokens – alle Werte zentral definiert. Änderungen hier wirken sich auf das gesamte System aus. ============================================================ */ :root { /* ---------------------------------------------------------- FARBEN ---------------------------------------------------------- */ --color-abd-blue: #00A3E0; /* Hauptfarbe, Buttons, Icons */ --color-schriftblau: #2696DB; /* Schriftfarbe blau < text-display */ --color-headline-black: #262626; /* Schwarze Schrift in hero/display/heading */ --color-black: #000000; /* Standard für body-Schriften */ --color-background: #EFEFEF; --color-background-light: #F7F7F7; --color-white: #FFFFFF; --color-light-gray: #E7E7E7; --color-medium-gray: #A0A0A0; --color-dark-gray: #656565; /* Farb-Logik (wird in den Typography-Klassen umgesetzt): - abd-blau auf text KLEINER als text-display → automatisch schriftblau - black auf text-hero / text-display / text-heading → automatisch headline-black */ /* ---------------------------------------------------------- SCHRIFTEN ---------------------------------------------------------- */ --font-inter: 'Inter', sans-serif; --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif; /* Gewichte */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* ---------------------------------------------------------- TYPOGRAFIE-SCALE – Desktop (Basiswerte) ---------------------------------------------------------- */ /* Große Schriften → Inter */ --fs-hero: 50px; --lh-hero: 1.3; --ls-hero: 0.03em; --fw-hero: var(--fw-light); --fs-display: 46px; --lh-display: 1.35; --ls-display: 0.02em; --fw-display: var(--fw-light); --fs-heading: 32px; --lh-heading: 1.42; --ls-heading: 0.03em; --fw-heading: var(--fw-regular); /* Kleine Schriften → Systemschrift */ --fs-body: 18px; --lh-body: 1.5; --ls-body: 0.02em; --fw-body: var(--fw-light); --fs-body-small: 16px; --lh-body-small: 1.5; --ls-body-small: 0.03em; --fw-body-small: var(--fw-regular); --fs-small-print: 14px; --lh-small-print: 1.5; --ls-small-print: 0.04em; --fw-small-print: var(--fw-regular); --fs-subline: 18px; --lh-subline: 1.5; --ls-subline: 0.02em; --fw-subline: var(--fw-medium); --fs-quote: 18px; --lh-quote: 1.5; --ls-quote: 0.02em; --fw-quote: var(--fw-semibold); /* Header-Navigation */ --fs-header: 12px; --ls-header: 0.05em; --fw-header: var(--fw-medium); /* Inter medium */ /* Button-Schriften */ --fs-button: 20px; --lh-button: 1.3; --ls-button: 0.03em; --fw-button: var(--fw-medium); --fw-button-semibold: var(--fw-semibold); --fs-button-small: 12px; --lh-button-small: 1.3; --ls-button-small: 0.04em; --fw-button-small: var(--fw-semibold); --fw-button-bold: var(--fw-bold); /* ---------------------------------------------------------- TYPOGRAFIE-SCALE – Tablet ---------------------------------------------------------- */ --fs-hero-tablet: 40px; --fs-display-tablet: 36px; --fs-heading-tablet: 28px; /* lh / ls identisch mit Desktop */ /* ---------------------------------------------------------- TYPOGRAFIE-SCALE – Smartphone ---------------------------------------------------------- */ --fs-hero-smartphone: 36px; --fs-display-smartphone: 32px; --fs-heading-smartphone: 28px; /* lh / ls identisch mit Desktop */ /* ---------------------------------------------------------- GRID & CONTAINER ---------------------------------------------------------- */ --grid-gap: 20px; --container-max: 1200px; --container-pad-desktop: 40px; --container-pad-tablet: 26px; --container-pad-mobile: 21px; /* ---------------------------------------------------------- BORDER-RADIUS ---------------------------------------------------------- */ --radius-btn-large: 16px; /* Button01 / Button02 */ --radius-btn-small: 8px; /* Button04 / button-header */ --radius-card: 20px; /* teaser-card / testimonial-card */ --radius-photo-team: 9px; /* team-member-photo */ --radius-form: 4px; /* Formularfelder */ /* ---------------------------------------------------------- SCHATTEN ---------------------------------------------------------- */ --shadow-header: 0 2px 8px rgba(0, 0, 0, 0.06); /* ---------------------------------------------------------- SPACING – Sektionen ---------------------------------------------------------- */ --section-margin-top-desktop: 75px; --section-margin-bottom-desktop: 120px; --section-margin-top-mobile: 62px; --section-margin-bottom-mobile: 100px; /* Lottie-Animation im Hero */ --lottie-margin-top-desktop: 100px; /* 75 + 25 */ --lottie-margin-bottom-desktop: 34px; --lottie-margin-top-tablet: 65px; /* 75 - 10 */ --lottie-margin-bottom-tablet: 30px; --lottie-margin-top-mobile: 50px; /* 62 - 12 */ --lottie-margin-bottom-mobile: 20px; /* Text-subline margin-bottom */ --subline-mb-desktop: 75px; --subline-mb-tablet: 70px; --subline-mb-mobile: 30px; /* Abstand unter Headline, wenn danach subline folgt */ --headline-before-subline: 13px; /* Abstand über Button01 / Button02 */ --btn-margin-top-extra: 36px; /* Abstand über team-member-photo */ --photo-margin-top-extra: 50px; /* Standard-Elementabstand (wenn nicht anders definiert) */ --gap-default: 20px; /* Sekundäre Spacing-Skala (für Inline-Styles & interne Abstände). Mappt 1:1 auf die Designer-Tokens & gap-default-Multiples. */ --sp-s: 16px; /* small */ --sp-m: 24px; /* medium */ --sp-l: 40px; /* large = 2× gap-default */ --sp-xl: 60px; /* extra large */ --sp-xxl: 80px; /* 4× gap-default */ --sp-xxxl: var(--section-margin-bottom-desktop); /* 120px */ /* ---------------------------------------------------------- HEADER ---------------------------------------------------------- */ --header-height: 80px; --header-bg: var(--color-white); --btn-header-height: 30px; --btn-header-width: 320px; --btn-header-bar-height: 30px; /* Smartphone-Topbar */ /* ---------------------------------------------------------- BUTTONS ---------------------------------------------------------- */ --btn-height-large: 60px; --btn-height-small: 36px; --btn-pad-v-large: 17px; --btn-pad-h-large-desktop: 55px; --btn-pad-h-large-mobile: 35px; --btn-pad-v-small: 10px; --btn-pad-h-small: 20px; /* ---------------------------------------------------------- FOTOS ---------------------------------------------------------- */ --photo-team-size: 225px; --photo-testimonial-size: 118px; /* ---------------------------------------------------------- TRANSITIONS ---------------------------------------------------------- */ --ease: 0.2s ease; } /* ── 02-grid.css ── */ /* ============================================================ 02-grid.css Container, Grid-System (12 / 8 / 4 Spalten), Hilfsklassen. BREAKPOINTS (geräte-realistisch, UX State of the Art): ┌─────────────────────────────────────────────────────────┐ │ > 1024px → Desktop – 12 Spalten, padding 40px │ │ ≤ 1024px → Tablet – 8 Spalten, padding 26px │ │ ≤ 600px → Mobile – 4 Spalten, padding 21px │ └─────────────────────────────────────────────────────────┘ Zwischen den Breakpoints skalieren alle Spalten fluid (1fr), d.h. die Layouts dehnen und schrumpfen proportional. Die Design-Canvases (1200 / 768 / 390px) bleiben die visuelle Referenz – sie sind aber keine CSS-Breakpoints. Klassen-Schema: .col-N → Desktop (12-Spalten), N = 1–12 .col-t-N → Tablet ( 8-Spalten), N = 1–8 .col-m-N → Mobile ( 4-Spalten), N = 1–4 ============================================================ */ /* ------------------------------------------------------------ Box-sizing global ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } /* ------------------------------------------------------------ Container ------------------------------------------------------------ */ .container { max-width: var(--container-max); /* 1200px */ width: 100%; margin: 0 auto; padding: 0 var(--container-pad-desktop); /* 0 40px */ } /* ------------------------------------------------------------ Grid – Desktop (> 1024px): 12 Spalten ------------------------------------------------------------ */ .grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); /* 20px */ } /* Spalten-Klassen Desktop (1–12) */ .col-1 { grid-column: span 1; } .col-2 { grid-column: span 2; } .col-3 { grid-column: span 3; } .col-4 { grid-column: span 4; } .col-5 { grid-column: span 5; } .col-6 { grid-column: span 6; } .col-7 { grid-column: span 7; } .col-8 { grid-column: span 8; } .col-9 { grid-column: span 9; } .col-10 { grid-column: span 10; } .col-11 { grid-column: span 11; } .col-12 { grid-column: span 12; } /* Leere Spalten (Abstandshalter) */ .col-gap-1 { grid-column: span 1; visibility: hidden; } .col-gap-2 { grid-column: span 2; visibility: hidden; } /* ------------------------------------------------------------ Tablet – max-width: 1024px: 8 Spalten ------------------------------------------------------------ */ @media (max-width: 1024px) { .container { padding: 0 var(--container-pad-tablet); /* 0 26px */ } .grid { grid-template-columns: repeat(8, 1fr); } /* Fallback ohne col-t-N: volle Breite */ [class*="col-"]:not([class*="col-t-"]) { grid-column: span 8; } /* Tablet-Spalten (1–8) */ .col-t-1 { grid-column: span 1; } .col-t-2 { grid-column: span 2; } .col-t-3 { grid-column: span 3; } .col-t-4 { grid-column: span 4; } .col-t-5 { grid-column: span 5; } .col-t-6 { grid-column: span 6; } .col-t-7 { grid-column: span 7; } .col-t-8 { grid-column: span 8; } /* Leere Spalten Tablet */ .col-t-gap-1 { grid-column: span 1; visibility: hidden; } .col-t-gap-2 { grid-column: span 2; visibility: hidden; } /* Desktop-Abstandshalter ausblenden */ .col-gap-1, .col-gap-2 { display: none; } } /* ------------------------------------------------------------ Mobile – max-width: 600px: 4 Spalten ------------------------------------------------------------ */ @media (max-width: 600px) { .container { padding: 0 var(--container-pad-mobile); /* 0 21px */ } .grid { grid-template-columns: repeat(4, 1fr); } /* Fallback ohne col-m-N: volle Breite */ [class*="col-"]:not([class*="col-m-"]) { grid-column: span 4; } /* Mobile-Spalten (1–4) */ .col-m-1 { grid-column: span 1; } .col-m-2 { grid-column: span 2; } .col-m-3 { grid-column: span 3; } .col-m-4 { grid-column: span 4; } /* Tablet-Abstandshalter ausblenden */ .col-t-gap-1, .col-t-gap-2 { display: none; } } /* ------------------------------------------------------------ Hilfsklassen ------------------------------------------------------------ */ @media (max-width: 1024px) { .hide-tablet { display: none !important; } } @media (max-width: 600px) { .hide-mobile { display: none !important; } } .show-mobile-only { display: none; } @media (max-width: 600px) { .show-mobile-only { display: block; } } .col-center { display: flex; flex-direction: column; align-items: center; } .mx-auto { margin-left: auto; margin-right: auto; } .w-full { width: 100%; } .align-left { text-align: left; align-self: flex-start; } /* ── 03-typography.css ── */ /* ============================================================ 03-typography.css Alle Schriftklassen, responsive Größen, Farb-Logik. Farb-Regel (aus den Design-Tokens): · abd-blau (#00A3E0) auf Schrift < text-display → automatisch schriftblau (#2696DB) · black auf text-hero / text-display / text-heading → automatisch headline-black (#262626) Diese Logik ist direkt in die Klassen eingebaut – kein manuelles Überschreiben nötig. ============================================================ */ /* ------------------------------------------------------------ Google Fonts – Inter (Light 300, Regular 400, Medium 500, Semibold 600) ------------------------------------------------------------ */ /* Google Fonts Import entfernt – Inter wird lokal geladen (DSGVO-konform, siehe main.css @font-face) */ /* ------------------------------------------------------------ Basis-Reset ------------------------------------------------------------ */ body { font-family: var(--font-system); font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: inherit; font-size: inherit; } p { margin: 0; padding: 0; } /* ============================================================ GROSSE SCHRIFTEN – Inter (hero, display, heading) Farbe black → headline-black (#262626) Farbe blue → abd-blau (#00A3E0) ============================================================ */ /* text-hero */ .text-hero { font-family: var(--font-inter); font-size: var(--fs-hero); /* 50px */ font-weight: var(--fw-hero); /* 300 */ line-height: var(--lh-hero); /* 1.3 */ letter-spacing: var(--ls-hero); /* 0.03em */ color: var(--color-headline-black); /* black → headline-black */ margin-bottom: 35px; /* 70% von 50px */ } .text-hero--blue { color: var(--color-abd-blue); /* hero-Größe: abd-blau (nicht schriftblau) */ } /* text-hero: engere Spalten (4/12 Desktop, 4/8 Tablet) */ .text-hero--narrow { margin-bottom: 15px; /* 30% von 50px */ } /* text-display */ .text-display { font-family: var(--font-inter); font-size: var(--fs-display); /* 46px */ font-weight: var(--fw-display); /* 300 */ line-height: var(--lh-display); /* 1.35 */ letter-spacing: var(--ls-display); /* 0.02em */ color: var(--color-headline-black); margin-bottom: 32px; /* 70% von 46px, gerundet */ } .text-display--blue { color: var(--color-abd-blue); /* display-Größe: abd-blau */ } .text-display--narrow { margin-bottom: 14px; /* 30% von 46px, gerundet */ } /* text-heading */ .text-heading { font-family: var(--font-inter); font-size: var(--fs-heading); /* 32px */ font-weight: var(--fw-heading); /* 400 */ line-height: var(--lh-heading); /* 1.42 */ letter-spacing: var(--ls-heading); /* 0.03em */ color: var(--color-headline-black); margin-bottom: 22px; /* 70% von 32px, gerundet */ } .text-heading--blue { color: var(--color-schriftblau); /* heading < display → schriftblau */ } .text-heading--narrow { margin-bottom: 10px; /* 30% von 32px, gerundet */ } /* ============================================================ KLEINE SCHRIFTEN – Systemschrift Farbe black → #000000 Farbe blue → schriftblau (#2696DB) ============================================================ */ /* text-body */ .text-body { font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 */ line-height: var(--lh-body); /* 1.5 */ letter-spacing: var(--ls-body); /* 0.02em */ color: var(--color-black); margin-bottom: 13px; /* 70% von 18px, gerundet */ } .text-body--blue { color: var(--color-schriftblau); /* body < display → schriftblau */ } /* text-body vor einer Headline (breite Spalten ≥ 8/12) */ .text-body--before-headline { margin-bottom: 50px; } /* text-body vor einer Headline (schmale Spalten ≤ 4/12) */ .text-body--before-headline-narrow { margin-bottom: 40px; } /* text-body-small */ .text-body-small { font-family: var(--font-system); font-size: var(--fs-body-small); /* 16px */ font-weight: var(--fw-body-small); /* 400 */ line-height: var(--lh-body-small); /* 1.5 */ letter-spacing: var(--ls-body-small); /* 0.03em */ color: var(--color-black); margin-bottom: 11px; /* 70% von 16px, gerundet */ } .text-body-small--blue { color: var(--color-schriftblau); } /* text-small-print */ .text-small-print { font-family: var(--font-system); font-size: var(--fs-small-print); /* 14px */ font-weight: var(--fw-small-print); /* 400 */ line-height: var(--lh-small-print); /* 1.5 */ letter-spacing: var(--ls-small-print); /* 0.04em */ color: var(--color-black); margin-bottom: 10px; /* 70% von 14px, gerundet */ } .text-small-print--blue { color: var(--color-schriftblau); } /* text-subline */ .text-subline { font-family: var(--font-system); font-size: var(--fs-subline); /* 18px */ font-weight: var(--fw-subline); /* 500 */ line-height: var(--lh-subline); /* 1.5 */ letter-spacing: var(--ls-subline); /* 0.02em */ color: var(--color-black); margin-bottom: var(--subline-mb-desktop); /* 75px – Desktop */ } .text-subline--blue { color: var(--color-schriftblau); } /* Steht text-subline DIREKT unter einer Headline (hero/display/heading), überschreibt die Headline ihr margin-bottom auf 13px. Dafür diese Modifier-Klasse an die Headline hängen: */ .text-hero + .text-subline, .text-display + .text-subline, .text-heading + .text-subline, .text-hero--before-subline, .text-display--before-subline, .text-heading--before-subline { /* An die HEADLINE: margin-bottom auf 13px setzen */ } /* Komfort-Klasse: Headline direkt vor subline */ .before-subline { margin-bottom: 13px !important; } /* text-quote */ .text-quote { font-family: var(--font-system); font-size: var(--fs-quote); /* 18px */ font-weight: var(--fw-quote); /* 600 */ line-height: var(--lh-quote); /* 1.5 */ letter-spacing: var(--ls-quote); /* 0.02em */ color: var(--color-black); margin-bottom: 13px; /* 70% von 18px, gerundet */ } .text-quote--blue { color: var(--color-schriftblau); } /* text-header (Navigation) */ .text-header { font-family: var(--font-inter); font-size: var(--fs-header); /* 12px */ font-weight: var(--fw-header); /* 500 – Inter medium */ letter-spacing: var(--ls-header); /* 0.05em */ line-height: 1; color: var(--color-black); text-decoration: none; } .text-header--active { text-decoration: underline; } .text-header:hover { color: var(--color-medium-gray); transition: color var(--ease); } /* ============================================================ SEKTIONS-HEADER text-hero, text-display, text-heading, text-subline am Beginn einer Sektion → horizontal zentriert ============================================================ */ .section-header { text-align: center; } .section-header .text-hero, .section-header .text-display, .section-header .text-heading, .section-header .text-subline { text-align: center; } /* ============================================================ RESPONSIVE – Tablet (max-width: 1024px) ============================================================ */ @media (max-width: 1024px) { .text-hero { font-size: var(--fs-hero-tablet); /* 40px */ margin-bottom: 28px; /* 70% von 40px */ } .text-hero--narrow { margin-bottom: 12px; /* 30% von 40px */ } .text-display { font-size: var(--fs-display-tablet); /* 36px */ margin-bottom: 25px; /* 70% von 36px, gerundet */ } .text-display--narrow { margin-bottom: 11px; /* 30% von 36px, gerundet */ } .text-heading { font-size: var(--fs-heading-tablet); /* 28px */ margin-bottom: 20px; /* 70% von 28px, gerundet */ } .text-heading--narrow { margin-bottom: 8px; /* 30% von 28px, gerundet */ } .text-subline { margin-bottom: var(--subline-mb-tablet); /* 70px */ } } /* ============================================================ RESPONSIVE – Smartphone (max-width: 600px) Alle großen Schriften: 50% der Schriftgröße als margin-bottom ============================================================ */ @media (max-width: 600px) { .text-hero { font-size: var(--fs-hero-smartphone); /* 36px */ margin-bottom: 18px; /* 50% von 36px */ } /* --narrow entfällt auf Mobile: 50%-Regel gilt immer */ .text-hero--narrow { margin-bottom: 18px; } .text-display { font-size: var(--fs-display-smartphone); /* 32px */ margin-bottom: 16px; /* 50% von 32px */ } .text-display--narrow { margin-bottom: 16px; } .text-heading { font-size: var(--fs-heading-smartphone); /* 28px */ margin-bottom: 14px; /* 50% von 28px */ } .text-heading--narrow { margin-bottom: 14px; } .text-subline { margin-bottom: var(--subline-mb-mobile); /* 30px */ } } /* ============================================================ FARB-UTILITY-KLASSEN ============================================================ */ .color-abd-blue { color: var(--color-abd-blue); } .color-schriftblau { color: var(--color-schriftblau); } .color-headline-black { color: var(--color-headline-black); } .color-black { color: var(--color-black); } .color-dark-gray { color: var(--color-dark-gray); } .color-medium-gray { color: var(--color-medium-gray); } .color-white { color: var(--color-white); } /* ── 04-buttons.css ── */ /* ============================================================ 04-buttons.css Alle 5 Button-Typen inkl. Hover-States. Namensgebung: .btn--primary → Button01 (gefüllt blau) .btn--outline → Button02 (transparent, blauer Rahmen) .btn--text → Button03 (nur Schrift, kein Körper) .btn--sm → Button04 (klein, blau, kein Rahmen) .btn--header → button-header (zwei Elemente, Topbar) ============================================================ */ /* ------------------------------------------------------------ Basis-Reset (gilt für alle Buttons) ------------------------------------------------------------ */ .btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer; border: none; background: none; transition: background-color var(--ease), border-color var(--ease), color var(--ease), font-weight var(--ease); white-space: nowrap; -webkit-font-smoothing: antialiased; } .btn:focus-visible { outline: 2px solid var(--color-abd-blue); outline-offset: 3px; } /* ============================================================ BUTTON 01 – Primär (gefüllt blau) ============================================================ */ .btn--primary { height: var(--btn-height-large); /* 60px */ border-radius: var(--radius-btn-large); /* 16px */ background-color: var(--color-abd-blue); border: 2px solid var(--color-abd-blue); padding: var(--btn-pad-v-large) var(--btn-pad-h-large-desktop); /* 17px 55px */ font-family: var(--font-system); font-size: var(--fs-button); /* 20px */ font-weight: var(--fw-button); /* 500 – medium */ line-height: var(--lh-button); /* 1.3 */ letter-spacing: var(--ls-button); /* 0.03em */ color: var(--color-white); } .btn--primary:hover { background-color: var(--color-white); border-color: var(--color-white); color: var(--color-schriftblau); font-weight: var(--fw-button-semibold); /* 600 */ } /* Hinweis: btn--primary:hover mit border-color: white ergibt auf weißem Hintergrund einen unsichtbaren Rahmen. Wird dieser Button auf farbigem Hintergrund verwendet (z. B. blauer Sektion), ist das korrekt. Auf hellem Hintergrund sollte der Hover- Rahmen alternativ --color-abd-blue behalten → .btn--primary--on-light Modifier. */ .btn--primary--on-light:hover { border-color: var(--color-abd-blue); } .cta-block { text-align: center; margin: var(--gap-default) 0; } /* ============================================================ BUTTON SECONDARY – Ghost (weißer Rahmen, für dunkle Hintergründe) Verwendet im Cookie-Consent-Banner (Ablehnen). ============================================================ */ .btn--secondary { height: var(--btn-height-large); border-radius: var(--radius-btn-large); background-color: transparent; border: 2px solid rgba(255, 255, 255, 0.5); padding: var(--btn-pad-v-large) var(--btn-pad-h-large-desktop); font-family: var(--font-system); font-size: var(--fs-button); font-weight: var(--fw-button); line-height: var(--lh-button); letter-spacing: var(--ls-button); color: var(--color-white); } .btn--secondary:hover { border-color: var(--color-white); background-color: rgba(255, 255, 255, 0.1); } @media (max-width: 600px) { .btn--secondary { padding: var(--btn-pad-v-large) var(--btn-pad-h-large-mobile); } } /* ============================================================ BUTTON 02 – Outline (transparent, blauer Rahmen) ============================================================ */ .btn--outline { height: var(--btn-height-large); /* 60px */ border-radius: var(--radius-btn-large); /* 16px */ background-color: transparent; border: 2px solid var(--color-abd-blue); padding: var(--btn-pad-v-large) var(--btn-pad-h-large-desktop); /* 17px 55px */ font-family: var(--font-system); font-size: var(--fs-button); /* 20px */ font-weight: var(--fw-button-semibold); /* 600 */ line-height: var(--lh-button); letter-spacing: var(--ls-button); color: var(--color-abd-blue); } .btn--outline:hover { background-color: var(--color-abd-blue); border-color: var(--color-white); color: var(--color-white); font-weight: var(--fw-button); /* 500 – medium */ } /* ============================================================ BUTTON 03 – Text (kein Körper, nur Schrift mit Unterstrich) Schriftgröße erbt vom umliegenden Text. ============================================================ */ .btn--text { display: inline; /* fließt im Text */ height: auto; padding: 0; border: none; background: none; font-family: var(--font-system); font-size: inherit; /* erbt vom Elternelement */ font-weight: var(--fw-semibold); /* 600 */ line-height: 1.3; letter-spacing: 0.03em; color: var(--color-schriftblau); text-decoration: underline; cursor: pointer; } .btn--text:hover { color: var(--color-headline-black); /* #262626 */ /* Schrift-Stil bleibt: semibold, unterstrichen */ } /* ============================================================ BUTTON 04 – Klein (blau, kein Rahmen, Tag-/Badge-Stil) ============================================================ */ .btn--sm { height: var(--btn-height-small); /* 36px */ border-radius: var(--radius-btn-small); /* 8px */ background-color: var(--color-abd-blue); border: none; padding: var(--btn-pad-v-small) var(--btn-pad-h-small); /* 10px 20px */ font-family: var(--font-system); font-size: var(--fs-button-small); /* 12px */ font-weight: var(--fw-button-small); /* 600 – semibold */ line-height: var(--lh-button-small); /* 1.3 */ letter-spacing: var(--ls-button-small); /* 0.04em */ color: var(--color-white); } .btn--sm:hover { background-color: var(--color-white); color: var(--color-schriftblau); font-weight: var(--fw-button-bold); /* 700 – bold */ } /* ============================================================ BUTTON HEADER – Topbar Smartphone (zwei Elemente) HTML-Struktur:
kontakt@abd-partner.de Tel.: 030 36 41 41 90
Hover: nur das Element unter der Maus ändert die Farbe. ============================================================ */ .btn--header { display: flex; align-items: center; justify-content: space-between; height: var(--btn-header-height); /* 30px */ width: var(--btn-header-width); /* 320px */ border-radius: var(--radius-btn-small); /* 8px */ background-color: var(--color-abd-blue); border: none; padding: 0 20px; gap: 16px; /* Schrift wie Designer-Spec für btn-header (auch ohne __item-Span) */ font-family: var(--font-inter); font-size: var(--fs-button-small); /* 12px */ font-weight: var(--fw-semibold); /* 600 */ line-height: var(--lh-button-small); /* 1.3 */ letter-spacing: var(--ls-button-small); color: var(--color-white); text-decoration: none; } .btn--header__item { font-family: var(--font-inter); font-size: var(--fs-button-small); /* 12px – passend zur Höhe */ font-weight: var(--fw-semibold); /* 600 */ letter-spacing: 0.05em; color: var(--color-white); text-decoration: none; white-space: nowrap; transition: color var(--ease); } /* Hover: nur das angesteuerte Element reagiert */ .btn--header__item:hover { color: var(--color-schriftblau); } /* Auf Smartphone: volle Breite, kein border-radius */ @media (max-width: 600px) { .btn--header { width: 100%; border-radius: 0; padding: 0 22px; } } /* Modifier: Standalone-Variante (zwei getrennte Buttons im Desktop-Header) – Auto-Breite statt fixer 320px, sonst identische Optik (weiß auf blau). */ .btn--header--single { width: auto; justify-content: center; text-decoration: none; } .btn--header--single .btn--header__item { white-space: nowrap; } /* ============================================================ RESPONSIVE – Smartphone (max-width: 600px) btn--primary und btn--outline: schmäleres Padding ============================================================ */ @media (max-width: 600px) { .btn--primary, .btn--outline { padding: var(--btn-pad-v-large) var(--btn-pad-h-large-mobile); /* 17px 35px */ } } /* ============================================================ SPACING-REGEL: Abstand über Button01 / Button02 margin-top: 36px (addiert zum margin-bottom des Vorgängers) → gilt in Flex/Grid-Kontexten, wo Margins nicht kollabieren ============================================================ */ .btn--primary, .btn--outline { margin-top: var(--btn-margin-top-extra); /* 36px */ } /* Beispiel-Kalkulation (Vorgänger = text-body, 18px): text-body margin-bottom = 18px × 0.7 = 13px btn margin-top = 36px Gesamtabstand = 13px + 36px = 49px ✓ */ /* ── 05-spacing.css ── */ /* ============================================================ 05-spacing.css Sektionsabstände, Lottie-Animation, team-member-photo Margins, Sektions-Zentrierungsregeln. Alle Abstands-Regeln sind aus den Tokens in 01-variables.css abgeleitet. ============================================================ */ /* ============================================================ SEKTIONEN Alle Haupt-Sektionen: Kanzlei, Kompetenz, Referenzen, Kontakt, Wissen. ============================================================ */ /* Symmetrische vertikale Section-Paddings (top = bottom), damit die Kante zwischen zwei Hintergrundfarben immer mittig zwischen den umgebenden Inhalten liegt. */ .section { padding-top: 60px; padding-bottom: 60px; } @media (max-width: 1024px) { .section { padding-top: 50px; padding-bottom: 50px; } } @media (max-width: 600px) { .section { padding-top: var(--section-margin-top-mobile); /* 62px */ padding-bottom: var(--section-margin-bottom-mobile); /* 100px */ } } /* ============================================================ HERO-LOTTIE-ANIMATION ============================================================ */ .hero-lottie-animation { margin-top: var(--lottie-margin-top-desktop); /* 100px */ margin-bottom: var(--lottie-margin-bottom-desktop); /* 34px */ } @media (max-width: 1024px) { .hero-lottie-animation { margin-top: var(--lottie-margin-top-tablet); /* 65px */ margin-bottom: var(--lottie-margin-bottom-tablet); /* 30px */ } } @media (max-width: 600px) { .hero-lottie-animation { margin-top: var(--lottie-margin-top-mobile); /* 50px */ margin-bottom: var(--lottie-margin-bottom-mobile); /* 20px */ } } /* Ausnahme: Lottie-Animation im hero-Bereich eines BEITRAGS. Desktop und Tablet: margin-top 50px (75px - 25px), margin-bottom 30px. */ .wissen-beitrag .hero-lottie-animation { margin-top: 50px; margin-bottom: 30px; } /* ============================================================ BUTTON01 / BUTTON02 – MARGIN NACH UNTEN Unter btn--primary und btn--outline folgt immer margin-bottom 75px, außer der Button ist das letzte Element der Sektion – dann gilt der normale Sektions-margin-bottom. Modifier .btn--last-in-section hebt die 75px auf. ============================================================ */ .btn--primary, .btn--outline { margin-top: var(--btn-margin-top-extra); /* 36px (bereits gesetzt in 04-buttons.css) */ margin-bottom: 75px; } .btn--primary.btn--last-in-section, .btn--outline.btn--last-in-section { margin-bottom: 0; /* Sektions-margin-bottom übernimmt */ } /* ============================================================ TEAM-MEMBER-PHOTO – Abstand nach oben ============================================================ */ .team-member-photo { margin-top: var(--photo-margin-top-extra); /* 50px */ } .team-member-photo--after-subline { margin-top: 0; } /* ============================================================ STANDARD-ABSTAND zwischen Elementen ============================================================ */ .gap-default { gap: var(--gap-default); } .stack > * + * { margin-top: var(--gap-default); } /* ============================================================ ICON / KATEGORIE – immer linksbündig ============================================================ */ .icon, .category-icon { display: block; text-align: left; align-self: flex-start; } /* ============================================================ SEKTIONS-HEADER – Zentrierung ============================================================ */ .section-header { text-align: center; } .section-header > .text-hero, .section-header > .text-display, .section-header > .text-heading, .section-header > .text-subline { text-align: center; margin-left: auto; margin-right: auto; } /* ============================================================ WISSEN-LAYOUT (Beitrag-Detailseite) Desktop: 8/12 | 1/12 Lücke | 3/12 ============================================================ */ .wissen-layout { display: grid; grid-template-columns: 8fr 1fr 3fr; gap: 0; align-items: start; } .wissen-layout__content { padding-right: calc(var(--grid-gap) / 2); } .wissen-layout__gap { /* leer */ } .wissen-layout__sidebar { padding-left: calc(var(--grid-gap) / 2); } .wissen-layout__content .text-hero, .wissen-layout__content .text-display, .wissen-layout__content .text-heading { text-align: left; } .wissen-layout__content .btn--primary, .wissen-layout__content .btn--outline { display: flex; margin-left: auto; margin-right: auto; width: fit-content; } @media (max-width: 1024px) { .wissen-layout { grid-template-columns: 1fr; } .wissen-layout__gap { display: none; } .wissen-layout__content, .wissen-layout__sidebar { padding: 0; } .wissen-layout__sidebar { margin-top: 40px; } } /* ── 06-header.css ── */ /* ============================================================ 06-header.css Desktop, Tablet (Hamburger), Smartphone (Topbar + Hamburger). ============================================================ */ /* ------------------------------------------------------------ Gemeinsamer Basis-Header ------------------------------------------------------------ */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background-color: var(--header-bg); /* white */ box-shadow: var(--shadow-header); } /* Platzhalter für den fixierten Header */ .header-spacer { height: var(--header-height); /* 80px */ } /* ------------------------------------------------------------ DESKTOP HEADER (> 768px) ------------------------------------------------------------ */ .header__bar { height: var(--header-height); /* 80px */ display: flex; align-items: center; justify-content: space-between; padding: 0 var(--container-pad-desktop); /* 0 40px */ max-width: 100%; gap: 24px; } /* Logo */ .header__logo { flex-shrink: 0; display: flex; align-items: center; text-decoration: none; } .header__logo img, .header__logo svg { height: 44px; width: auto; display: block; } /* Haupt-Navigation */ .header__nav { display: flex; align-items: center; gap: 32px; flex: 1; justify-content: center; } .header__nav-link { font-family: var(--font-inter); font-size: var(--fs-header); /* 12px */ font-weight: var(--fw-header); /* 500 */ letter-spacing: var(--ls-header); /* 0.05em */ color: var(--color-black); text-decoration: none; transition: color var(--ease); white-space: nowrap; } .header__nav-link:hover { color: var(--color-medium-gray); } .header__nav-link--active { text-decoration: underline; } /* Sprach-Switcher DE / EN */ .header__lang { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .header__lang a { font-family: var(--font-inter); font-size: var(--fs-header); font-weight: var(--fw-header); letter-spacing: var(--ls-header); color: var(--color-black); text-decoration: none; transition: color var(--ease); } .header__lang a:hover { color: var(--color-medium-gray); } .header__lang a.is-active { font-weight: var(--fw-bold); text-decoration: underline; } /* Kontakt-Button (Desktop, rechts) */ .header__contact { flex-shrink: 0; display: flex; align-items: center; gap: 12px; } /* ------------------------------------------------------------ HAMBURGER – Icon (Tablet + Smartphone) Versteckt auf Desktop ------------------------------------------------------------ */ .header__hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; padding: 8px; flex-shrink: 0; background: none; border: none; margin-left: auto; /* rechtsbündig */ position: relative; z-index: 110; } .header__hamburger span { display: block; width: 24px; height: 2px; background-color: var(--color-headline-black); border-radius: 2px; transition: transform var(--ease), opacity var(--ease); transform-origin: center; } /* Hamburger → X (aktiver State via JS: .is-open) */ .header__hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .header__hamburger.is-open span:nth-child(2) { opacity: 0; } .header__hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ------------------------------------------------------------ MOBILES MENÜ (Dropdown, State of the Art UX) Öffnet sich unter dem Header, schließt bei Klick außerhalb. ------------------------------------------------------------ */ .header__mobile-menu { display: none; position: absolute; top: var(--header-height); /* 80px */ left: 0; right: 0; background-color: var(--color-white); border-top: 1px solid var(--color-light-gray); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); padding: 24px var(--container-pad-desktop); flex-direction: column; gap: 0; z-index: 99; } .header__mobile-menu.is-open { display: flex; } .header__mobile-menu a { font-family: var(--font-inter); font-size: 14px; font-weight: var(--fw-medium); letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-black); text-decoration: none; padding: 14px 0; border-bottom: 1px solid var(--color-light-gray); transition: color var(--ease); } .header__mobile-menu a:last-child { border-bottom: none; } .header__mobile-menu a:hover { color: var(--color-abd-blue); } .header__mobile-menu a.is-active { color: var(--color-abd-blue); font-weight: var(--fw-semibold); } /* ------------------------------------------------------------ TABLET (max-width: 1024px) Navigation ausblenden, Hamburger einblenden ------------------------------------------------------------ */ @media (max-width: 1024px) { .header__bar { padding: 0 var(--container-pad-desktop); /* 0 40px – identisch Desktop */ } /* Nav, Sprache und Kontakt-Pill ausblenden */ .header__nav, .header__lang, .header__contact { display: none; } /* Hamburger einblenden */ .header__hamburger { display: flex; } /* Mobiles Menü: Tablet-Padding */ .header__mobile-menu { padding: 24px var(--container-pad-tablet); /* 0 26px */ } } /* ------------------------------------------------------------ SMARTPHONE (max-width: 600px) Topbar (btn--header) über dem weißen Header ------------------------------------------------------------ */ @media (max-width: 600px) { /* Topbar: volle Breite, Höhe 30px, abd-blau, kein border-radius */ .header__topbar { display: flex; align-items: center; justify-content: space-between; height: var(--btn-header-bar-height); /* 30px */ background-color: var(--color-abd-blue); padding: 0 22px; /* laut Spezifikation */ width: 100%; } .header__topbar a { font-family: var(--font-inter); font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0.05em; color: var(--color-white); text-decoration: none; white-space: nowrap; transition: color var(--ease); } .header__topbar a:hover { color: var(--color-light-gray); } /* Topbar auf Desktop und Tablet ausblenden */ .header__bar { padding: 0 24px; /* Smartphone: schmaleres Padding */ } .header__mobile-menu { top: calc(var(--btn-header-bar-height) + var(--header-height)); /* 30 + 80 = 110px */ padding: 24px var(--container-pad-mobile); /* 0 21px */ } /* Header-Spacer um Topbar erhöhen */ .header-spacer { height: calc(var(--btn-header-bar-height) + var(--header-height)); /* 110px */ } } /* Topbar auf Desktop + Tablet ausblenden */ .header__topbar { display: none; } @media (max-width: 600px) { .header__topbar { display: flex; } } /* ── 07-forms.css ── */ /* ============================================================ 07-forms.css Alle Kontaktformular-Felder in drei Größen: · Standard (4/12 breit auf Desktop, 4/4 auf Smartphone) · Small-Desktop (2/12 breit auf Desktop, 2/8 auf Tablet) · Message (8/12 resp. 4/12 resp. 4/4 Textarea) Benennung: .form-field → Standard-Textfeld .form-field--optional → wie Standard, Schrift in medium-gray .form-field--message → Textarea (größere Höhe) .form-field--small → Kleinere Variante (Footer-Formular etc.) .form-field--small--optional .form-field--message--small Alle Felder werden in einem .form-grid (CSS Grid) eingesetzt. ============================================================ */ /* ------------------------------------------------------------ Formular-Grid ------------------------------------------------------------ */ /* Standard-Grid: 12 Spalten */ .form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--grid-gap); /* 20px */ align-items: start; } /* Kleines Formular-Grid (Footer): 8 Spalten */ .form-grid--small { display: grid; grid-template-columns: repeat(8, 1fr); gap: var(--grid-gap); align-items: start; } /* Tablet: 8 Spalten */ @media (max-width: 1024px) { .form-grid { grid-template-columns: repeat(8, 1fr); } } /* Smartphone: 4 Spalten */ @media (max-width: 600px) { .form-grid, .form-grid--small { grid-template-columns: repeat(4, 1fr); } } /* ------------------------------------------------------------ BASIS-RESET für alle Formularfelder ------------------------------------------------------------ */ .form-field, .form-field--optional, .form-field--message, .form-field--small, .form-field--small--optional, .form-field--message--small { width: 100%; background-color: var(--color-white); border-style: solid; border-width: 1px; border-color: var(--color-light-gray); /* #E7E7E7 */ border-radius: var(--radius-form); /* 4px */ font-family: var(--font-system); appearance: none; -webkit-appearance: none; transition: border-color var(--ease), box-shadow var(--ease); box-sizing: border-box; resize: vertical; } /* Fokus-State */ .form-field:focus, .form-field--optional:focus, .form-field--message:focus, .form-field--small:focus, .form-field--small--optional:focus, .form-field--message--small:focus { outline: none; border-color: var(--color-abd-blue); box-shadow: 0 0 0 3px rgba(0, 163, 224, 0.15); } /* ============================================================ STANDARD-FELDER (Desktop: 4/12, Smartphone: 4/4) ============================================================ */ /* Pflichtfeld */ .form-field { height: 60px; font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 – light */ line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-dark-gray); /* #656565 */ padding: 19px 25px; grid-column: span 4; /* 4/12 Desktop */ } /* Optionales Feld (Platzhalter in medium-gray) */ .form-field--optional { height: 60px; font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-medium-gray); /* #A0A0A0 */ padding: 19px 25px; grid-column: span 4; } /* Placeholder-Farben */ .form-field::placeholder { color: var(--color-dark-gray); } .form-field--optional::placeholder { color: var(--color-medium-gray); } /* Textarea: breiter (8/12) */ .form-field--message { height: 110px; font-size: var(--fs-body); font-weight: var(--fw-body); line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-dark-gray); padding: 19px; grid-column: span 8; /* 8/12 Desktop */ resize: vertical; } .form-field--message::placeholder { color: var(--color-dark-gray); } /* ============================================================ KLEINE FELDER (Footer-Formular o. ä.) Desktop: 2/12 (info) / 4/12 (message) Tablet: 2/8 (info) / 4/8 (message) ============================================================ */ /* Kleines Pflichtfeld */ .form-field--small { height: 50px; font-size: var(--fs-small-print); /* 14px */ font-weight: var(--fw-small-print);/* 400 */ line-height: var(--lh-small-print); letter-spacing: var(--ls-small-print); color: var(--color-dark-gray); padding: 16px; grid-column: span 2; /* 2/12 Desktop */ } /* Kleines optionales Feld */ .form-field--small--optional { height: 50px; font-size: var(--fs-small-print); font-weight: var(--fw-small-print); line-height: var(--lh-small-print); letter-spacing: var(--ls-small-print); color: var(--color-medium-gray); padding: 16px; grid-column: span 2; } .form-field--small::placeholder { color: var(--color-dark-gray); } .form-field--small--optional::placeholder { color: var(--color-medium-gray); } /* Kleine Textarea */ .form-field--message--small { height: 86px; font-size: var(--fs-small-print); font-weight: var(--fw-small-print); line-height: var(--lh-small-print); letter-spacing: var(--ls-small-print); color: var(--color-dark-gray); padding: 16px; grid-column: span 4; /* 4/12 Desktop */ resize: vertical; } .form-field--message--small::placeholder { color: var(--color-dark-gray); } /* ============================================================ RESPONSIVE – Tablet (max-width: 1024px) ============================================================ */ @media (max-width: 1024px) { /* Standard-Felder: 4/8 */ .form-field, .form-field--optional { grid-column: span 4; } /* Message: 8/8 */ .form-field--message { grid-column: span 8; } /* Kleine Felder: 2/8 */ .form-field--small, .form-field--small--optional { grid-column: span 2; } /* Kleine Message: 4/8 */ .form-field--message--small { grid-column: span 4; } } /* ============================================================ RESPONSIVE – Smartphone (max-width: 600px) Alle Felder: volle Breite (4/4) ============================================================ */ @media (max-width: 600px) { .form-field, .form-field--optional { grid-column: span 4; padding: 19px; /* kein seitliches 25px mehr, einheitlich */ } .form-field--message { grid-column: span 4; padding: 19px 25px 19px 25px; /* top 19px laut Spezifikation */ } .form-field--small, .form-field--small--optional, .form-field--message--small { grid-column: span 4; } } /* ============================================================ DATENSCHUTZ-CHECKBOX ============================================================ */ .form-checkbox-row { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; } .form-checkbox-row input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; accent-color: var(--color-abd-blue); cursor: pointer; } .form-checkbox-row span { font-family: var(--font-system); font-size: var(--fs-small-print); /* 14px */ font-weight: var(--fw-small-print); line-height: var(--lh-small-print); color: var(--color-black); } .form-checkbox-row a { color: var(--color-schriftblau); text-decoration: underline; } /* ============================================================ FEEDBACK-STATES (Success / Error) ============================================================ */ .form-success, .form-error { padding: 16px 20px; border-radius: var(--radius-form); font-family: var(--font-system); font-size: var(--fs-body-small); font-weight: var(--fw-regular); line-height: var(--lh-body-small); margin-bottom: 20px; } .form-success { background-color: #e8f8e8; border: 1px solid #4caf50; color: #2e7d32; } .form-error { background-color: #fde8e8; border: 1px solid #f44336; color: #c62828; } /* Formular-Hinweis (unter dem Submit-Button) */ .form-note { font-family: var(--font-system); font-size: var(--fs-small-print); font-weight: var(--fw-small-print); color: var(--color-medium-gray); text-align: center; margin-top: 12px; } /* ── 08-cards.css ── */ /* ============================================================ 08-cards.css Testimonial-Card, Teaser-Card. 09-photos.css ist hier integriert (team-member-photo, testimonial-photo), da beide eng mit den Karten zusammenhängen. ============================================================ */ /* ============================================================ TESTIMONIAL-CARD Desktop: 8/12 Spalten breit Tablet: 8/8 Spalten breit Smartphone: 4/4 Spalten breit ============================================================ */ .testimonial-card { background-color: var(--color-white); border-radius: var(--radius-card); /* 20px */ padding: 30px 40px 50px 40px; /* top 30 | right 40 | bottom 50 | left 40 */ grid-column: span 8; /* 8/12 Desktop */ width: 100%; box-sizing: border-box; } /* Innere Struktur: Quote links, Autor rechts */ .testimonial-card__body { display: flex; gap: 32px; align-items: flex-start; } .testimonial-card__quote { flex: 1; } .testimonial-card__author { display: flex; flex-direction: column; align-items: center; gap: 10px; flex-shrink: 0; min-width: 140px; } .testimonial-card__author-name { font-family: var(--font-system); font-size: var(--fs-body-small); font-weight: var(--fw-semibold); color: var(--color-schriftblau); text-align: center; margin: 0; } .testimonial-card__author-title { font-family: var(--font-system); font-size: var(--fs-small-print); font-weight: var(--fw-regular); color: var(--color-dark-gray); text-align: center; margin: 0; line-height: var(--lh-small-print); } .testimonial-card__author-link { font-size: var(--fs-small-print); color: var(--color-schriftblau); text-decoration: underline; } /* Tablet */ @media (max-width: 1024px) { .testimonial-card { grid-column: span 8; /* 8/8 */ } } /* Smartphone */ @media (max-width: 600px) { .testimonial-card { grid-column: span 4; /* 4/4 */ padding: 22px 30px 35px 30px; /* top 22 | right 30 | bottom 35 | left 30 */ } .testimonial-card__body { flex-direction: column-reverse; /* Autor oben, Zitat unten */ gap: 20px; } .testimonial-card__author { flex-direction: row; align-items: center; min-width: unset; } .testimonial-card__author-name, .testimonial-card__author-title { text-align: left; } } /* ============================================================ TEASER-CARD (Blog/Wissen) Desktop: 4/12 Spalten breit Tablet: 4/8 Spalten breit Smartphone: 4/4 Spalten breit ============================================================ */ .teaser-card { background-color: var(--color-white); border-radius: var(--radius-card); /* 20px */ padding: 30px 30px 50px 30px; /* top 30 | right 30 | bottom 50 | left 30 */ grid-column: span 4; /* 4/12 Desktop */ display: flex; flex-direction: column; box-sizing: border-box; } /* Kategorie-Icon/Tag: immer linksbündig */ .teaser-card__category { display: block; text-align: left; align-self: flex-start; margin-bottom: 16px; } .teaser-card__title { flex: 1; } /* Tablet */ @media (max-width: 1024px) { .teaser-card { grid-column: span 4; /* 4/8 */ } } /* Smartphone */ @media (max-width: 600px) { .teaser-card { grid-column: span 4; /* 4/4 */ padding: 22px 30px 35px 30px; /* top 22 | bottom 35 */ } } /* ============================================================ FOTOS ============================================================ */ /* Team-Member-Foto (Anwälte, Ansprechpartner) */ .team-member-photo { width: var(--photo-team-size); /* 225px */ height: var(--photo-team-size); /* 225px */ border-radius: var(--radius-photo-team); /* 9px */ object-fit: cover; display: block; align-self: flex-start; /* linksbündig */ } /* Testimonial-Foto (Kreisförmig) */ .testimonial-photo { width: var(--photo-testimonial-size); /* 118px */ height: var(--photo-testimonial-size); /* 118px */ border-radius: 50%; object-fit: cover; display: block; flex-shrink: 0; } /* ── 09-sections.css ── */ /* ============================================================ 09-sections.css Sektions-spezifische Layouts: Hero, Kanzlei, Kompetenz, Referenzen (enemy-list + testimonials), Kontakt, Teaser, Wissen, Wissen-Beitrag. Hintergründe: background-light (#F7F7F7): Hero, Kompetenz, Testimonials, Teaser, Wissen, Wissen-Beitrag background (#EFEFEF): Kanzlei, Enemy-list, Kontakt ============================================================ */ /* ============================================================ HERO Lottie (zentriert) → text-hero (zentriert) → text-body 2-spaltig → button01 (zentriert) ============================================================ */ .section-hero { background-color: var(--color-background-light); text-align: center; } .section-hero .hero-lottie-animation { display: flex; justify-content: center; } /* text-body zweispaltig: 6/12 + 6/12 */ .hero__body-grid { display: grid; grid-template-columns: 1fr 1fr; /* 6/12 + 6/12 */ gap: var(--grid-gap); text-align: left; margin-bottom: 0; } .section-hero .btn--primary { display: inline-flex; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .hero__body-grid { grid-template-columns: 1fr 1fr; /* 4/8 + 4/8 */ } } @media (max-width: 600px) { .hero__body-grid { grid-template-columns: 1fr; /* 4/4 */ } } /* ============================================================ KANZLEI Desktop: 3 × 4/12 | Tablet: 2 × 4/8 | Mobile: 4/4 Block 1: text-display + text-body (pro Spalte) Block 2: team-member-photo + text-quote + text-body + text-quote(schriftblau) + text-body ============================================================ */ .section-kanzlei { background-color: var(--color-background); } .kanzlei__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 × 4/12 */ gap: var(--grid-gap); } /* Alle Inhalte linksbündig */ .kanzlei__grid > * { text-align: left; } @media (max-width: 1024px) { .kanzlei__grid { grid-template-columns: repeat(2, 1fr); /* 2 × 4/8 */ } } /* Mobile: Buttons bleiben im Viewport, Text bricht bei Bedarf um */ @media (max-width: 600px) { .btn--primary, .btn { max-width: 100%; padding-left: 24px; padding-right: 24px; white-space: normal; height: auto; min-height: var(--btn-height-large, 60px); line-height: 1.3; box-sizing: border-box; } /* Hero-CTA: Text mittig auch wenn umgebrochen */ .section--hero-sub .btn, section[class*="hero"] .btn { text-align: center; } } @media (max-width: 600px) { /* Mobile: 1 Spalte. Da Pillars und Lawyers im DOM nun flach getrennt sind (alle Pillars zuerst, dann alle Lawyers), erscheinen sie automatisch in der gewünschten Reihenfolge. Lawyer-Blocks zentriert. */ .kanzlei__grid { grid-template-columns: 1fr; gap: var(--sp-l, 40px); } .kanzlei__lawyer-block { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: var(--sp-m, 24px); } .kanzlei__lawyer-block > * { text-align: center; } .kanzlei__lawyer-block .team-member-photo, .kanzlei__lawyer-link { margin-left: auto; margin-right: auto; } } /* ============================================================ KOMPETENZ Header (12/12): text-display(abd-blau) + text-subline, zentriert Bereich: 3 × 4/12 | icon + text-heading(abd-blau) + text-quote + bullet-list Footer (12/12): text-heading(abd-blau) + button01, zentriert ============================================================ */ .section-kompetenz { background-color: var(--color-background-light); } .kompetenz__header { text-align: center; grid-column: 1 / -1; } .kompetenz__areas { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 × 4/12 */ gap: var(--grid-gap); } /* Alle Elemente in den Bereichs-Karten linksbündig */ .kompetenz__area { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } /* Headlines aller drei Spalten auf gleiche Höhe – Headline-Text vertikal zentriert in der min-height-Box. Bullets darunter starten dadurch immer auf gleicher Linie (= Headline-Box-Bottom + 13 px). */ .kompetenz__area h3 { min-height: calc(2 * 1.42em); /* 2 Zeilen text-heading */ margin-bottom: 13px; /* enger zu den Bullets als Designer-Default 22px */ display: flex; flex-direction: column; justify-content: center; /* Text vertikal mittig in der Box */ } /* Bullet-Liste oben anschlagen, direkt unter der Headline. Der Button wird per `margin-top: auto` (im Inline-Style) an den unteren Rand gezogen. */ .kompetenz__area ul { margin-top: 0; margin-bottom: var(--gap-default, 20px); } .kompetenz__footer { text-align: center; grid-column: 1 / -1; } .kompetenz__footer .btn--primary { display: inline-flex; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .kompetenz__areas { grid-template-columns: repeat(2, 1fr); /* 2 × 4/8 */ } } @media (max-width: 600px) { .kompetenz__areas { grid-template-columns: 1fr; } } /* ============================================================ REFERENZEN – ENEMY-LIST Header (12/12): text-display(abd-blau) + text-subline, zentriert text-body-small: 2 × 6/12 | button02 zentriert ============================================================ */ .section-enemy-list { background-color: var(--color-background); } .enemy-list__header { text-align: center; } .enemy-list__body { display: grid; grid-template-columns: 1fr 1fr; /* 6/12 + 6/12 */ gap: var(--grid-gap); } .enemy-list__footer { text-align: center; } .enemy-list__footer .btn--outline { display: inline-flex; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .enemy-list__body { grid-template-columns: 1fr 1fr; /* 4/8 + 4/8 */ } } @media (max-width: 600px) { .enemy-list__body { grid-template-columns: 1fr; } } /* ============================================================ REFERENZEN – TESTIMONIALS Header (12/12): text-display(abd-blau) + text-subline, zentriert Desktop: 4/12 testimonial-information + 8/12 testimonial-card Tablet/Mobile: testimonial-card oben, testimonial-information darunter ============================================================ */ .section-testimonials { background-color: var(--color-background-light); } .testimonials__header { text-align: center; } /* Einzel-Testimonial-Block */ .testimonial-block { display: grid; grid-template-columns: 4fr 8fr; /* 4/12 + 8/12 */ gap: var(--grid-gap); align-items: start; } /* testimonial-information: Foto links + Text rechts */ .testimonial-information { display: flex; flex-direction: column; align-items: flex-start; gap: var(--gap-default); } .testimonial-information__photo { flex-shrink: 0; } .testimonial-information__text { display: flex; flex-direction: column; gap: 8px; } /* Mehrere Testimonial-Blöcke untereinander */ .testimonials__list { display: flex; flex-direction: column; gap: var(--grid-gap); } @media (max-width: 1024px) { /* Tablet: Information (Foto + Name) zuerst, darunter das Zitat */ .testimonial-block { grid-template-columns: 1fr; /* 8/8 */ display: flex; flex-direction: column; } .testimonial-block .testimonial-information { order: 1; flex-direction: row; align-items: flex-start; gap: var(--gap-default); } .testimonial-block .testimonial-card { order: 2; } /* Foto links, Text öffnet sich über volle Restbreite */ .testimonial-information__text { flex: 1; } } @media (max-width: 600px) { .testimonial-block { grid-template-columns: 1fr; /* 4/4 */ display: flex; flex-direction: column; } .testimonial-block .testimonial-information { order: 1; flex-direction: row; align-items: flex-start; } .testimonial-block .testimonial-card { order: 2; } } /* ============================================================ KONTAKT Header (12/12): text-display(abd-blau) + text-subline, zentriert Formular: 8/12 zentriert (2/12 leer | 8/12 | 2/12 leer) ============================================================ */ .section-kontakt { background-color: var(--color-background); } .kontakt__header { text-align: center; } /* Formular auf 8/12 zentriert */ .kontakt__form-wrap { display: grid; grid-template-columns: 2fr 8fr 2fr; gap: var(--grid-gap); } .kontakt__form-inner { grid-column: 2; } /* Formular-Felder-Grid: 4/12 + 4/12 nebeneinander */ .kontakt__fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } /* Checkbox + Datenschutz */ .kontakt__privacy { display: flex; align-items: flex-start; gap: 12px; margin-top: var(--gap-default); } .kontakt__privacy-checkbox { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--color-abd-blue); cursor: pointer; } .kontakt__submit { text-align: center; margin-top: var(--gap-default); } @media (max-width: 1024px) { /* Tablet: volle Breite */ .kontakt__form-wrap { grid-template-columns: 1fr; } .kontakt__form-inner { grid-column: 1; } } @media (max-width: 600px) { .kontakt__form-wrap { grid-template-columns: 1fr; } .kontakt__form-inner { grid-column: 1; } /* Felder auf Smartphone einzeln übereinander */ .kontakt__fields { grid-template-columns: 1fr; } } /* ============================================================ TEASER Header (12/12): text-display(abd-blau) + text-subline, zentriert 3 × 4/12 teaser-cards | button02 zentriert ============================================================ */ .section-teaser { background-color: var(--color-background-light); } .teaser__header { text-align: center; } .teaser__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 × 4/12 */ gap: var(--grid-gap); } .teaser__footer { text-align: center; } .teaser__footer .btn--outline { display: inline-flex; margin-left: auto; margin-right: auto; } @media (max-width: 1024px) { .teaser__grid { grid-template-columns: repeat(2, 1fr); /* 2 × 4/8 */ } } @media (max-width: 600px) { .teaser__grid { grid-template-columns: 1fr; } } /* ============================================================ WISSEN-ÜBERSICHT Header (12/12): text-hero(abd-blau) + text-subline, zentriert wissen-filter zentriert 3/2/1-spaltige teaser-card-grid (masonry-like via CSS Grid) ============================================================ */ .section-wissen { background-color: var(--color-background-light); } .wissen__header { text-align: center; } .wissen__filter-wrap { display: flex; justify-content: center; } /* Karten-Grid: gleichmäßige Spalten, Karten füllen von links auf */ .wissen__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 × 4/12 */ gap: var(--grid-gap); align-items: start; /* Karten-Höhe unabhängig */ } /* Karten die per Filter ausgeblendet werden */ .teaser-card[hidden], .teaser-card.is-hidden { display: none; } @media (max-width: 1024px) { .wissen__grid { grid-template-columns: repeat(2, 1fr); /* 2 × 4/8 */ } } @media (max-width: 600px) { .wissen__grid { grid-template-columns: 1fr; } } /* ============================================================ WISSEN-BEITRAG Desktop: 8/12 content | 1/12 gap | 3/12 sidebar (contactperson) Tablet/Mobile: volle Breite, sidebar darunter ============================================================ */ .section-wissen-beitrag { background-color: var(--color-background-light); } /* Haupt-Grid: content | gap | sidebar */ .wissen-beitrag__layout { display: grid; grid-template-columns: 8fr 1fr 3fr; gap: 0; align-items: start; } /* Content-Bereich (linke 8/12) */ .wissen-beitrag__content { padding-right: 20px; } /* Lottie + Headline + Body + Button01: zentriert */ .wissen-beitrag__content .hero-lottie-animation { display: flex; justify-content: center; } .wissen-beitrag__content .text-display { text-align: center; } .wissen-beitrag__content .btn--primary { display: flex; width: fit-content; margin-left: auto; margin-right: auto; } /* Freitext-Inhalte (Schriften, Bullets etc.) linksbündig */ .wissen-beitrag__content .text-body, .wissen-beitrag__content .text-heading, .wissen-beitrag__content ul { text-align: left; } /* Leerspalte */ .wissen-beitrag__spacer { /* leer */ } /* Sidebar (rechte 3/12) */ .wissen-beitrag__sidebar { padding-left: 20px; } /* ── contactperson-desktop ── */ .contactperson { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } .contactperson .team-member-photo { align-self: flex-start; } /* ── contactperson-tablet: 3/8 + 5/8 ── */ .contactperson-tablet { display: grid; grid-template-columns: 3fr 5fr; gap: var(--grid-gap); align-items: start; } .contactperson-tablet__left { display: flex; flex-direction: column; gap: 0; } .contactperson-tablet__right { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } /* ── Tablet ── */ @media (max-width: 1024px) { .wissen-beitrag__layout { grid-template-columns: 1fr; } .wissen-beitrag__spacer { display: none; } .wissen-beitrag__content { padding-right: 0; } .wissen-beitrag__sidebar { padding-left: 0; margin-top: 40px; } /* Tablet: contactperson-desktop ausblenden, tablet einblenden */ .contactperson { display: none; } .contactperson-tablet { display: grid; } .contactperson-smartphone { display: none; } } /* ── Smartphone ── */ @media (max-width: 600px) { .contactperson-tablet { display: none; } /* contactperson-smartphone: wie desktop, aber volle Breite */ .contactperson-smartphone { display: flex; flex-direction: column; align-items: flex-start; gap: 0; } } /* Desktop: tablet- und smartphone-Varianten ausblenden */ @media (min-width: 1025px) { .contactperson-tablet { display: none; } .contactperson-smartphone { display: none; } .contactperson { display: flex; } } /* ── 10-footer.css ── */ /* ============================================================ 10-footer.css Footer: Google-Bewertungen, Quote-Bar, Hauptfooter-Grid. Aufbau (Desktop): ┌─────────────────────────────────────────────────────────┐ │ PREFOOTER 3 × 4/12 Google-Bewertungen (bg-light) │ ├─────────────────────────────────────────────────────────┤ │ QUOTE-BAR 78px, weißer Kasten, text-quote zentriert │ ├─────────────────────────────────────────────────────────┤ │ MAIN FOOTER 5/12 | 3/12 | 4/12 (background) │ │ Links: text-body + text-small-print (bottom) │ │ Mitte: Grafik + 2× Button03 (bottom) │ │ Rechts: Kontaktformular (klein) + button01 │ ├─────────────────────────────────────────────────────────┤ │ COPYRIGHT-BAR │ └─────────────────────────────────────────────────────────┘ ============================================================ */ /* ============================================================ GOOGLE-BEWERTUNG – Komponente Linksbündig: Grafik → text-body-small (3-zeilig) → text-quote (schriftblau) ============================================================ */ .google-bewertung { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; } .google-bewertung__name { font-weight: var(--fw-semibold); color: var(--color-schriftblau); font-size: var(--fs-body-small, 0.875rem); } .google-bewertung__name-link { color: inherit; text-decoration: none; } .google-bewertung__name-link:hover { text-decoration: underline; } .google-bewertung__quote { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; } /* ============================================================ PREFOOTER – Google-Bewertungen Desktop: 3 × 4/12 | Tablet: 2 × 4/8 | Smartphone: 1 × 4/4 ============================================================ */ .prefooter { background-color: var(--color-background-light); padding-top: var(--section-margin-top-desktop); /* 75px */ padding-bottom: var(--section-margin-top-desktop); /* 75px */ } .reviews__google-label { display: flex; align-items: center; gap: 8px; margin-top: 56px; margin-bottom: 12px; font-size: var(--fs-body-small); font-weight: var(--fw-body-small); line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small); color: var(--color-black); } .reviews__google-stars { color: #e8a924; letter-spacing: 3px; } .reviews__google-count {} .lawyer-mehr-link { display: inline-block; margin-top: 8px; font-size: var(--fs-small-print); color: var(--color-abd-blue); text-decoration: none; } .lawyer-mehr-link:hover { text-decoration: underline; } .prefooter__grid { display: grid; grid-template-columns: repeat(3, 1fr); /* 3 × 4/12 */ gap: var(--grid-gap); } @media (max-width: 1024px) { .prefooter__grid { grid-template-columns: repeat(2, 1fr); /* 2 × 4/8 */ } /* 3. Bewertung auf Tablet ausblenden */ .prefooter__grid .google-bewertung:nth-child(3) { display: none; } } @media (max-width: 600px) { .prefooter { padding-top: var(--section-margin-top-mobile); padding-bottom: var(--section-margin-top-mobile); } .prefooter__grid { grid-template-columns: 1fr; /* 4/4, beide Bewertungen untereinander */ } /* 3. Bewertung bleibt ausgeblendet (nur 2 auf Smartphone) */ .prefooter__grid .google-bewertung:nth-child(3) { display: none; } } /* ============================================================ QUOTE-BAR – 78px weißer Kasten, text-quote vertikal zentriert ============================================================ */ .quote-bar { background-color: var(--color-white); height: 78px; display: flex; align-items: center; width: 100%; } .quote-bar__inner { width: 100%; max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad-desktop); /* text-quote Klasse im HTML */ } @media (max-width: 1024px) { .quote-bar__inner { padding: 0 var(--container-pad-tablet); } } @media (max-width: 600px) { .quote-bar__inner { padding: 0 var(--container-pad-mobile); } } /* ============================================================ HAUPT-FOOTER ============================================================ */ .site-footer { background-color: var(--color-background); padding-top: var(--section-margin-top-desktop); /* 75px */ padding-bottom: var(--section-margin-top-desktop); /* 75px */ } /* ── Desktop: 5/12 | 3/12 | 4/12 ── */ .footer__grid { display: grid; grid-template-columns: 5fr 3fr 4fr; gap: var(--grid-gap); align-items: start; } /* Linke Spalte 5/12 */ .footer__info { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .footer__info-top { /* text-body Inhalte */ } .footer__info-bottom { /* text-small-print, am unteren Rand */ margin-top: auto; } /* Mittlere Spalte 3/12 */ .footer__diro { display: flex; flex-direction: column; justify-content: space-between; height: 100%; } .footer__diro-logo { display: block; width: 100%; max-width: 180px; } .footer__diro-links { /* zwei Button03 am unteren Rand */ margin-top: auto; display: flex; flex-direction: column; gap: 8px; } /* Rechte Spalte 4/12 – Kontaktformular */ .footer__form { display: flex; flex-direction: column; } /* Formular-Grid im Footer: 2/12 + 2/12 nebeneinander, dann 4/12 message */ .footer__form-fields { display: grid; grid-template-columns: 1fr 1fr; /* 2/12 + 2/12 innerhalb 4/12 */ gap: var(--grid-gap); } .footer__form-message { margin-top: var(--gap-default); width: 100%; } /* Radio / Checkbox + text-small-print */ .footer__form-privacy { display: flex; align-items: flex-start; gap: 10px; margin-top: var(--gap-default); } .footer__form-privacy-checkbox { width: 24px; height: 24px; flex-shrink: 0; accent-color: var(--color-abd-blue); cursor: pointer; margin-top: 2px; } .footer__form-submit { text-align: center; margin-top: var(--gap-default); } .footer__form-note { text-align: center; margin-top: 8px; } /* ── Tablet: 4/8 | 4/8 ── */ @media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; /* 4/8 + 4/8 */ grid-template-areas: "info form" "diro form"; row-gap: var(--grid-gap); } .footer__info { grid-area: info; } .footer__diro { grid-area: diro; justify-content: flex-start; } .footer__form { grid-area: form; } /* Auf Tablet: DIRO-Links nicht am unteren Rand, sondern nach der Grafik */ .footer__diro-links { margin-top: var(--gap-default); } /* Tablet-Formular: 2/8 + 2/8 nebeneinander */ .footer__form-fields { grid-template-columns: 1fr 1fr; /* 2/8 + 2/8 */ } } /* ── Smartphone: 4/4 durchgängig ── */ @media (max-width: 600px) { .site-footer { padding-top: var(--section-margin-top-mobile); padding-bottom: var(--section-margin-top-mobile); } .footer__grid { grid-template-columns: 1fr; grid-template-areas: "info" "diro" "form"; gap: var(--grid-gap); } /* Auf Smartphone: Kontaktformular ausblenden */ .footer__form { display: none; } /* Formular-Felder trotzdem definiert falls doch eingeblendet */ .footer__form-fields { grid-template-columns: 1fr; } .footer__info-bottom { margin-top: var(--gap-default); } } /* ============================================================ COPYRIGHT-BAR ============================================================ */ .footer__bottom { border-top: 1px solid var(--color-light-gray); padding: 20px 0; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--gap-default); background-color: var(--color-background); } .footer__copyright { /* text-small-print im HTML */ } .footer__legal-links { display: flex; gap: 24px; } .footer__legal-links a { /* text-small-print, color schriftblau im HTML */ color: var(--color-schriftblau); text-decoration: underline; } @media (max-width: 600px) { .footer__bottom { flex-direction: column; align-items: flex-start; gap: 12px; } .footer__legal-links { flex-direction: column; gap: 8px; } } /* ── wissen-filter.css ── */ /* ============================================================ wissen-filter.css Filterfunktion der Wissen-Übersichtsseite. HTML-Struktur: ───────────────────────────────────────────────────────── ───────────────────────────────────────────────────────── ============================================================ */ /* ------------------------------------------------------------ Filter-Leiste: alle Items in einer Reihe, zentriert ------------------------------------------------------------ */ .wissen-filter { display: flex; align-items: flex-end; justify-content: center; gap: 32px; margin-bottom: var(--gap-default); /* 20px – Standard-Abstand zur Karten-Grid */ } /* ------------------------------------------------------------ Einzelnes Filter-Element (inaktiv) ------------------------------------------------------------ */ .wissen-filter__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-decoration: none; cursor: pointer; transition: opacity var(--ease); } .wissen-filter__item:hover { opacity: 0.7; } /* ------------------------------------------------------------ Icon über dem Begriff (nur bei inaktiven Elementen sichtbar) ------------------------------------------------------------ */ .wissen-filter__icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; color: var(--color-abd-blue); } .wissen-filter__icon svg { width: 100%; height: 100%; } /* ------------------------------------------------------------ Zahl + Begriff Zahl und Label stehen nebeneinander in einer Zeile: "25 Alle" / "9 Markenrecht" ------------------------------------------------------------ */ .wissen-filter__pill { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 20px; border-radius: 20px; /* Pill-Form: border-radius = halbe Höhe */ transition: background-color var(--ease), color var(--ease); } .wissen-filter__count { font-family: var(--font-system); font-size: var(--fs-body-small); /* 16px */ font-weight: var(--fw-semibold); /* 600 */ letter-spacing: var(--ls-body-small); color: var(--color-white); line-height: 1; } .wissen-filter__label { font-family: var(--font-system); font-size: var(--fs-body-small); /* 16px */ font-weight: var(--fw-semibold); /* 600 */ letter-spacing: var(--ls-body-small); color: var(--color-white); line-height: 1; white-space: nowrap; } /* Inaktiv: Zahl und Label in schriftblau, kein Hintergrund */ .wissen-filter__item:not(.is-active) .wissen-filter__count, .wissen-filter__item:not(.is-active) .wissen-filter__label { color: var(--color-schriftblau); } .wissen-filter__item:not(.is-active) .wissen-filter__pill { background-color: transparent; } /* ------------------------------------------------------------ Aktives Element: blauer Pill, kein Icon sichtbar ------------------------------------------------------------ */ .wissen-filter__item.is-active .wissen-filter__pill { background-color: var(--color-abd-blue); /* #00A3E0 */ } .wissen-filter__item.is-active .wissen-filter__count, .wissen-filter__item.is-active .wissen-filter__label { color: var(--color-white); } /* Icon beim aktiven Element ausblenden */ .wissen-filter__item.is-active .wissen-filter__icon { display: none; } /* Beim aktiven Element: Pill-Höhe mit dem Icon der anderen alignen */ .wissen-filter__item.is-active { justify-content: flex-end; /* Pill sitzt auf derselben Grundlinie */ padding-bottom: 0; } /* ------------------------------------------------------------ Tablet (max-width: 1024px) ------------------------------------------------------------ */ @media (max-width: 1024px) { .wissen-filter { gap: 24px; margin-bottom: var(--gap-default); /* 20px */ } .wissen-filter__icon { width: 40px; height: 40px; } } /* ------------------------------------------------------------ Smartphone (max-width: 600px) Icons in einer Reihe, Labels darunter, enger Gap ------------------------------------------------------------ */ @media (max-width: 600px) { .wissen-filter { gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: var(--gap-default); /* 20px */ } .wissen-filter__item { gap: 6px; } .wissen-filter__icon { width: 32px; height: 32px; } .wissen-filter__pill { height: 36px; padding: 0 14px; } .wissen-filter__count, .wissen-filter__label { font-size: var(--fs-small-print); /* 14px */ } } /* ============================================================ KOMPATIBILITÄT (Bereiche die Peter nicht abdeckt) ============================================================ */ /* Variablen-Aliase */ :root { --cyan: var(--color-abd-blue); --blue-text: var(--color-schriftblau); --black: var(--color-headline-black); --text: var(--color-black); --gray-bg: var(--color-background); --gray-light: var(--color-background-light); --gray-mid: var(--color-light-gray); --white: var(--color-white); --font-display: var(--font-inter); --font-body: var(--font-system); } /* Section anchors */ .section-anchor { scroll-margin-top: 90px; } /* Text-Center Utility */ .text-center { text-align: center; } /* Fix: Hero-Button braucht kein 75px margin-bottom (Section-Padding reicht) */ .section-hero .btn--primary, .section-hero .btn--outline { margin-bottom: 0; } /* Fix: Lottie-Abstand oben = unten (symmetrisch) */ .section-hero .hero-lottie-animation { margin-top: 34px; } /* Fix: Sektionen volle Breite, kein weißer Rand */ html, body { margin: 0; padding: 0; width: 100%; } body { overflow-x: hidden; } .section, .section-hero, .section-kanzlei, .section-kompetenz, .section-enemy-list, .section-testimonials, .section-kontakt, .section-teaser { width: 100%; max-width: none; } /* Panel-steuerbare Hintergründe */ .bg--white { background-color: var(--color-white) !important; } .bg--light { background-color: var(--color-background-light) !important; } .bg--gray { background-color: var(--color-background) !important; } /* Kompetenz-Sektion: Standard-Section-Padding (75/120) bleibt erhalten, nur Hintergrund hellgrau (wenn keine bg-Klasse explizit überschreibt). */ .section-kompetenz { background-color: var(--color-background-light); } /* CTA-Section: Inhalt vertikal mittig in der Box, kompakter Innenabstand zwischen Headline und Button (Designer-Default „btn-margin-top-extra" würde sonst eine optische Asymmetrie erzeugen). */ .section--cta > .container { display: flex; flex-direction: column; align-items: center; justify-content: center; } .section--cta h2, .section--cta p { margin-bottom: 13px; } .section--cta .btn--primary { margin-top: 0; } /* Fix: strong/b auf Semibold (600) statt Browser-Default Bold (700) */ strong, b { font-weight: var(--fw-semibold); } /* Fix: btn--header breiter + Hover (transparente Border im Default verhindert Layout-Sprung) */ .btn--header { width: auto; border: 2px solid transparent; transition: background-color 0.2s ease, border-color 0.2s ease; } .btn--header:hover { background-color: var(--color-white); border-color: var(--color-abd-blue); } .btn--header:hover .btn--header__item { color: var(--color-schriftblau); } /* Fix: Alle Buttons vereinheitlicht — Standard blau/weiß, Hover invertiert */ .btn--primary { background-color: var(--color-abd-blue); color: var(--color-white); border: 2px solid var(--color-abd-blue); } .btn--primary:hover { background-color: var(--color-white); color: var(--color-schriftblau); border-color: var(--color-schriftblau); } .btn--outline { background-color: transparent; color: var(--color-abd-blue); border: 2px solid var(--color-abd-blue); } .btn--outline:hover { background-color: var(--color-abd-blue); color: var(--color-white); } /* Fix: Nav-Links in Kapitälchen */ .header__nav-link { text-transform: uppercase; } /* Fix: Header-Schatten und Spacer-Streifen entfernen */ .site-header { box-shadow: none; } .header-spacer { margin: 0; border: none; background: transparent; } /* Fix: Links innerhalb von Text-Klassen in abd-blau */ .text-body a, .text-body-small a, .text-subline a, .text-small-print a { color: var(--color-schriftblau); text-decoration: underline; font-weight: var(--fw-semibold); } /* Testimonial-Author: center auf Desktop (Peters Spec), left auf Mobile */ .testimonial-card__author-name, .testimonial-card__author-title { text-align: center; } @media (max-width: 600px) { .testimonial-card__author-name, .testimonial-card__author-title { text-align: left; } } /* Fix: teaser-card grid-column span 4 überschreibt teaser__grid und wissen__grid */ .teaser__grid .teaser-card, .wissen__grid .teaser-card { grid-column: auto; } /* Fix: Subpage-Hero (über-uns, wissen) – gleicher Abstand oben und unten */ .section--hero-sub { padding-top: var(--section-margin-top-desktop); padding-bottom: var(--section-margin-top-desktop); } .section--hero-sub > .container > *:last-child { margin-bottom: 0; } /* Hero ohne Subline (z.B. Datenschutz, Impressum) – deutlich kompakter: nur halber Top-/Bottom-Abstand und keine Subline-Margin am letzten Kind. */ .section--hero-sub:not(:has(.text-subline)) { padding-top: calc(var(--section-margin-top-desktop) / 2); padding-bottom: calc(var(--section-margin-top-desktop) / 2); } /* Fix: Alle Kacheln gleich hoch */ .wissen__grid, .teaser__grid { align-items: stretch; } /* Wissen-Grid in Sidebar-Layout: 2 Spalten statt 3 */ .about-layout .wissen__grid { grid-template-columns: repeat(2, 1fr); } @media (max-width: 600px) { .about-layout .wissen__grid { grid-template-columns: 1fr; } } /* Fix: Teaser-Card als Link: kein Underline, Farbe erben */ a.teaser-card { text-decoration: none; color: inherit; transition: box-shadow 0.2s ease; } a.teaser-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); text-decoration: none; } /* Fix: Teaser-Card Icon-Größe */ .teaser-card__category img { width: 48px; height: 48px; } /* Fix: Kanzlei-Spalte als Flex-Container mit Anwalt unten ausgerichtet */ .kanzlei__column { display: flex; flex-direction: column; align-items: flex-start; text-align: left; } .kanzlei__lawyer-block { display: flex; flex-direction: column; align-items: flex-start; } /* Kanzlei: 3-Spalten-Grid mit zwei automatischen Reihen. Da im DOM erst 3 Pillars, dann 3 Lawyers liegen, füllt das Grid automatisch Reihe 1 mit Pillars und Reihe 2 mit Lawyers. */ @media (min-width: 1025px) { .kanzlei__grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: auto; align-items: start; } .kanzlei__text-block { align-self: stretch; } .kanzlei__lawyer-block { align-self: start; } } .kanzlei__lawyer-block .team-member-photo { margin-top: 0; margin-bottom: 16px; } .kanzlei__lawyer-block .text-quote { margin-bottom: 4px; } .kanzlei__lawyer-block .text-body-small { margin-bottom: 4px; } .kanzlei__lawyer-block .text-quote--blue { margin-top: 8px; margin-bottom: 4px; } /* Kontaktseite: Info-Grid unter dem Formular */ .kontakt__info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-l, 40px); } .kontakt__info--wide { grid-column: 1 / -1; } /* ════════════════════════════════════════════════════════════════════════ Anwalt-Detailseite: Profil-Layout ════════════════════════════════════════════════════════════════════════ */ /* Anwalt-Profil: gleiches Spaltenverhältnis wie Blog-Article-Layout (2/3 + 1/3), nur mit Foto links statt Sidebar rechts. */ .anwalt-profile { display: grid; grid-template-columns: 1fr 2fr; gap: 0; align-items: start; } @media (max-width: 860px) { .anwalt-profile { grid-template-columns: 1fr; gap: var(--gap-default, 20px); } } /* Foto-Optik wie auf der Home (radius-photo-team = 9px) */ .anwalt-profile__photo img { width: 100%; max-width: var(--photo-team-size, 225px); height: auto; border-radius: var(--radius-photo-team, 9px); display: block; object-fit: cover; aspect-ratio: 1/1; } /* Buttons unter dem Foto sollen die Foto-Breite (225 px) nutzen, nicht die volle Spalten-Breite. */ .anwalt-profile__photo .article-sidebar-buttons { max-width: var(--photo-team-size, 225px); } /* Body bekommt das gleiche Padding wie der Article-Body, nur gespiegelt (links statt rechts). */ .anwalt-profile__body { padding-left: var(--container-pad-desktop, 40px); } @media (max-width: 860px) { .anwalt-profile__body { padding-left: 0; } } .anwalt-profile__contact { display: flex; flex-direction: column; gap: 12px; margin-top: var(--gap-default, 20px); align-items: stretch; } .anwalt-profile__btn { text-align: center; } .anwalt-profile__quote { /* nutzt text-quote-Klasse aus Spec; Reset des HTML-Browser-Defaults */ margin: 0 0 var(--gap-default, 20px); padding-left: 0; border-left: none; font-style: normal; } .anwalt-profile__body .profile-bio { margin-bottom: var(--gap-default, 20px); } .anwalt-profile__linkedin { margin: var(--gap-default, 20px) 0 0; } /* Akkordeons (Mitgliedschaften / Veröffentlichungen) – innerhalb der Textspalte */ .anwalt-accordions { display: flex; flex-direction: column; gap: 8px; margin-top: var(--btn-margin-top-extra, 36px); } .accordion { border-top: 1px solid var(--color-light-gray); border-bottom: 1px solid var(--color-light-gray); } .accordion + .accordion { border-top: 0; } /* Summary nutzt text-quote (Inter-System-Mix wie body, semibold) */ .accordion__summary { cursor: pointer; padding: 16px 0; list-style: none; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-system); font-size: var(--fs-quote); /* 18px */ font-weight: var(--fw-quote); /* 600 */ line-height: var(--lh-quote); /* 1.5 */ letter-spacing: var(--ls-quote); color: var(--color-schriftblau); } .accordion__summary::after { content: "+"; font-size: var(--fs-heading); /* 32px */ font-weight: var(--fw-light); color: var(--color-abd-blue); transition: transform 0.2s ease; line-height: 1; } .accordion[open] .accordion__summary::after { content: "−"; } .accordion__summary::-webkit-details-marker { display: none; } .accordion__body { padding: 0 0 var(--gap-default, 20px); font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 */ line-height: var(--lh-body); /* 1.5 */ letter-spacing: var(--ls-body); color: var(--color-black); } .accordion__body p { margin-bottom: 13px; } .accordion__body ul { padding-left: 1.5em; margin: 13px 0; } .accordion__body li { margin-bottom: 6px; } /* Klickbare Spaltentitel auf der Home (Markenrecht / Wettbewerbsrecht / Wirtschaftsrecht) */ .kompetenz__title-link { color: inherit; text-decoration: none; transition: color 0.2s ease, opacity 0.2s ease; } .kompetenz__title-link:hover, .kompetenz__title-link:focus { color: var(--color-abd-blue, #00a3b4); opacity: 0.9; } /* Klickbare Anwaltsnamen + Foto (→ über-uns Einzelseiten-Anker) */ .kanzlei__lawyer-link { color: inherit; text-decoration: none; display: inline-block; transition: opacity 0.2s ease, color 0.2s ease; } .kanzlei__lawyer-link:hover, .kanzlei__lawyer-link:focus { color: var(--color-abd-blue, #00a3b4); opacity: 0.9; } .kanzlei__lawyer-link img { transition: transform 0.3s ease; } .kanzlei__lawyer-link:hover img { transform: scale(1.02); } /* Abstand wird über .reviews__google-label gesteuert */ .section-testimonials .prefooter__grid { margin-top: 0; } /* Fix: testimonial-card grid-column span 8 überschreibt testimonial-block Grid */ .testimonial-block .testimonial-card { grid-column: auto; } /* Fix: testimonial-information horizontal (Foto neben Name/Rolle) */ .testimonial-information { flex-direction: row; align-items: flex-start; gap: var(--gap-default); padding-top: 30px; /* gleiche Höhe wie testimonial-card padding-top */ } /* Fix: Bullet-Listen in abd-blau */ .kompetenz__area ul { list-style: disc; padding-left: 1.25em; } .text-body ul { list-style: disc; padding-left: 1.25em; } /* Globaler Bullet-Stil: Punkte abd-blau, Text bleibt schwarz – seitenweit. */ ul li::marker, ol li::marker { color: var(--color-abd-blue); } /* Fix: Icons in Kompetenz-Bereich */ .kompetenz__area .icon { width: 64px; height: 64px; color: var(--color-abd-blue); margin-bottom: 16px; } .kompetenz__area .icon svg { width: 100%; height: 100%; } /* ── Consent-Banner ── */ .consent-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: var(--color-headline-black); color: var(--color-white); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.18); } .consent-banner-inner { max-width: var(--container-max); margin: 0 auto; padding: 1.5rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .consent-banner-body { flex: 1; } .consent-banner-title { font-family: var(--font-inter); font-weight: var(--fw-regular); font-size: 18px; letter-spacing: 0.03em; margin: 0 0 0.35rem; } .consent-banner-text { font-weight: var(--fw-light); font-size: var(--fs-small-print); letter-spacing: 0.03em; line-height: 1.57; margin: 0; color: rgba(255, 255, 255, 0.8); } .consent-banner-link { color: var(--color-abd-blue); text-decoration: none; font-weight: var(--fw-medium); } .consent-banner-link:hover { text-decoration: underline; } .consent-banner-actions { flex-shrink: 0; display: flex; align-items: stretch; gap: 0.75rem; } .consent-banner-btn { flex: 1 1 0; /* beide Buttons teilen den Platz gleich auf */ white-space: nowrap; margin-top: 0 !important; /* überschreibt globale btn--primary margin-top: 36px */ /* Beide Buttons auf exakt gleiche Größe zwingen (Secondary überschreibt nicht den globalen Override) */ height: var(--btn-header-height, 30px) !important; min-height: var(--btn-header-height, 30px) !important; line-height: var(--btn-header-height, 30px) !important; padding: 0 20px !important; font-family: var(--font-inter) !important; font-size: var(--fs-button-small) !important; /* 12px */ font-weight: var(--fw-semibold) !important; /* 600 */ letter-spacing: 0.05em !important; border-radius: var(--radius-btn-small, 8px) !important; box-sizing: border-box; } .consent-banner--hidden { opacity: 0; transform: translateY(8px); transition: opacity 0.25s ease, transform 0.25s ease; } @media (max-width: 600px) { .consent-banner-inner { flex-direction: column; padding: 1.25rem; gap: 1rem; align-items: stretch; } .consent-banner-btn { width: 100%; text-align: center; } } /* ── Legal Pages (Impressum, Datenschutz) ── */ .hero--small { padding: 1.75rem 2.5rem; background: var(--color-background-light); color: var(--color-black); } .hero--small h1 { font-size: 1.6rem; color: var(--color-headline-black); } /* Legal-Body (Datenschutz, Impressum, Karriere) – identische Typografie wie Blog-Artikel & Bereichsseiten-Body. Designer-Tokens, keine Linien. Lesbarkeitsbreite analog zur Blog-Body-Spalte (2/3 des Container = ~800px). */ .legal-body { font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 */ line-height: var(--lh-body); /* 1.5 */ letter-spacing: var(--ls-body); color: var(--color-black); max-width: 800px; } /* H2 + H3 = Fließtext-Größe + semibold (analog Bereichsseiten-Body): 18 px / 600 / system / schwarz – einfacher Inline-Heading-Stil. */ .legal-body h2, .legal-body h3 { font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-semibold); /* 600 */ line-height: var(--lh-body); letter-spacing: var(--ls-body); color: var(--color-headline-black); margin: 22px 0 13px; padding-bottom: 0; border-bottom: 0; } .legal-body h2:first-child, .legal-body h3:first-child { margin-top: 0; } .legal-body p { margin-bottom: 13px; } .legal-body ul, .legal-body ol { padding-left: 1.5rem; margin-bottom: 13px; list-style: revert; } .legal-body li { margin-bottom: 6px; } .legal-body a { color: var(--color-schriftblau); word-break: break-word; text-decoration: underline; } /* Falls in Markdown explizit eine `
` steht → unsichtbar (User-Wunsch). */ .legal-body hr { display: none; } /* ── About Layout ── */ .about-layout { display: grid; grid-template-columns: 1fr 200px; gap: 4rem; align-items: start; } .about-main { min-width: 0; } .about-sidebar { position: sticky; top: 2rem; } .about-nav-list { list-style: none; padding: 0; margin: 0; } .about-nav-item { border-bottom: 1px solid var(--color-light-gray); } .about-nav-item a { display: block; padding: 0.65rem 0; font-size: 0.9rem; color: var(--color-black); text-decoration: none; } .about-nav-item a:hover { color: var(--color-abd-blue); } .about-nav-item--active a { color: var(--color-abd-blue); font-weight: var(--fw-bold); } /* Mobile: Sidebar oben über dem Content, keine Stickiness */ @media (max-width: 900px) { .about-layout { grid-template-columns: 1fr; gap: 2rem; } .about-sidebar { position: static; order: -1; padding-bottom: 1rem; border-bottom: 1px solid var(--color-light-gray); } } /* ── Kontaktseite (standalone) ── */ .contact-layout { display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start; } .contact-info-block { margin-bottom: 2rem; } .contact-info-block h3 { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-abd-blue); margin-bottom: 0.4rem; } .contact-info-block address { font-style: normal; line-height: 1.7; } .contact-form-wrap { background: var(--color-background-light); padding: 2.5rem; border-radius: var(--radius-form); } .form-row { margin-bottom: 1.25rem; } .form-row label { display: block; font-size: 0.85rem; font-weight: var(--fw-semibold); margin-bottom: 0.35rem; } .form-row label span { color: var(--color-abd-blue); } .form-row input, .form-row textarea { width: 100%; padding: 0.7rem 0.9rem; font-size: 1rem; font-family: inherit; border: 1px solid var(--color-light-gray); border-radius: 3px; background: var(--color-white); color: var(--color-black); } .form-row input:focus, .form-row textarea:focus { outline: none; border-color: var(--color-abd-blue); } .form-row textarea { resize: vertical; line-height: 1.6; } .btn-submit { background: var(--color-abd-blue); color: var(--color-white); border: none; padding: 0.85rem 2.5rem; font-size: 1rem; font-weight: var(--fw-bold); border-radius: 3px; cursor: pointer; } .btn-submit:hover { background: #0090c8; } @media (max-width: 768px) { .contact-layout { grid-template-columns: 1fr; gap: 2rem; } } /* ════════════════════════════════════════════════════════════════════════ Bereichsseiten (Kompetenz-Bereich) – kompaktere vertikale Abstände ════════════════════════════════════════════════════════════════════════ */ /* 3-Spalten-Übersicht auf Bereichsseiten: weißer Hintergrund. Padding bleibt beim Standard 75/120 – nur das + .section-kompetenz Folge-Padding wird weiter unten erhöht (Hero → 3-Spalten "luftiger"). */ body:has(.section--article) .section-kompetenz { background-color: var(--color-white) !important; } /* Detail-Sektionen: Standard-Padding (75/120) */ .section--article { padding-top: var(--section-margin-top-desktop, 75px); padding-bottom: var(--section-margin-bottom-desktop, 120px); } /* Header-Block für Bereichsseiten-Detail (analog Article-Header) */ .section--article .article-header-block { margin-bottom: var(--gap-default, 20px); /* Volle Container-Breite, kein 820px-Limit */ } /* Subline unter der Sektion-Headline: halbierter Abstand zum Body */ .section--article .article-header-block .text-subline { margin-bottom: calc(var(--subline-mb-desktop, 75px) / 2); } /* Bereichsseiten (Markenrecht / Wettbewerbsrecht / Wirtschaftsrecht): Symmetrische Section-Paddings (60/60 auf allen Sections), damit jede Hintergrund-Kante exakt mittig zwischen den umliegenden Inhalten liegt. ~20% kompakter als der Site-Standard 75/120. */ body:has(.section--article) .section--hero-sub, body:has(.section--article) .section-kompetenz, body:has(.section--article) .section--article, body:has(.section--article) .section-kontakt { padding-top: 60px; padding-bottom: 60px; } body:has(.section--article) .section--hero-sub .text-subline, body:has(.section--article) .section--hero-sub > .container > *:last-child { margin-bottom: 0; } /* 3-Spalten-Buttons: keine extra Bottom-Padding nach den Buttons */ body:has(.section--article) .kompetenz__area .btn--primary { margin-bottom: 0; } /* Sektion-Hauptheadline auf Bereichsseiten = text-heading (kleiner als auf Article-Page), damit sie zur Spaltenüberschrift im 3-Spalten-Block oben passt. */ .section--article .article-header-block h2.text-display, .section--article .article-header-block h2 { font-family: var(--font-inter); font-size: var(--fs-heading); /* 32px */ font-weight: var(--fw-heading); /* 400 */ line-height: var(--lh-heading); /* 1.42 */ letter-spacing: var(--ls-heading); color: var(--color-schriftblau); /* heading-Größe → schriftblau */ margin-bottom: 22px; } .section--article .article-header-block h2.before-subline { margin-bottom: 13px !important; } /* Zwischenüberschriften im Body: klare H1/H2/H3-Hierarchie */ .article-body-inner h1, .article-body-inner h2, .article-body-inner h3 { font-family: var(--font-system); line-height: var(--lh-body); letter-spacing: var(--ls-body); font-weight: var(--fw-bold, 700); } .article-body-inner h1 { font-size: calc(var(--fs-body) * 1.5); color: var(--color-schriftblau); margin: 48px 0 16px; } .article-body-inner h1:first-child { margin-top: 0; } .article-body-inner h2 { font-size: var(--fs-body); color: var(--color-schriftblau); margin: 38px 0 10px; } .article-body-inner h2:first-child { margin-top: 0; } .article-body-inner h3 { font-size: var(--fs-body); color: var(--color-headline-black); margin: 24px 0 10px; } /* ── Artikel-Sidebar: Kontakt-Links (Text statt Button) ── */ .article-sidebar-contacts { list-style: none; margin: 14px 0 0; padding: 0; } .article-sidebar-contacts li { margin: 6px 0; } .article-sidebar-link { display: inline-block; color: var(--color-schriftblau, #2563aa); text-decoration: none; font-size: calc(var(--fs-body) * 0.95); border-bottom: 1px solid transparent; } .article-sidebar-link:hover { border-bottom-color: var(--color-schriftblau, #2563aa); } /* ── YouTube-Embed ── */ .article-video { margin: 28px 0; } .article-video-frame { position: relative; width: 100%; padding-bottom: 56.25%; /* 16:9 */ background: #000; border-radius: 6px; overflow: hidden; } .article-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .article-video-caption { margin-top: 8px; font-size: calc(var(--fs-body) * 0.88); color: var(--color-medium-gray, #666); text-align: center; } /* ── Inhaltsverzeichnis (Auto-TOC) ── */ .article-toc { margin: 0 0 32px; padding: 18px 22px 14px; background: var(--color-light, #f7f7f7); border-left: 3px solid var(--color-schriftblau, #2563aa); border-radius: 4px; } .article-toc-title { font-weight: var(--fw-semibold); font-size: var(--fs-body); color: var(--color-headline-black); margin: 0 0 8px; } .article-toc-list { list-style: decimal; margin: 0; padding: 0 0 0 20px; } .article-toc-item--h2 { margin: 4px 0; } .article-toc a { color: var(--color-headline-black); text-decoration: none; border-bottom: 1px dotted transparent; } .article-toc a:hover { border-bottom-color: var(--color-schriftblau, #2563aa); } .article-body-inner h2[id], .article-body-inner h3[id] { scroll-margin-top: 96px; } /* ── Article Detail ── */ .article-meta-line { color: var(--color-medium-gray); } .article-meta-line time { font-variant-numeric: tabular-nums; } .article-layout { display: grid; grid-template-columns: 2fr 1fr; gap: var(--grid-gap, 20px); max-width: var(--container-max, 1200px); margin: 0 auto; padding: 0 var(--container-pad-desktop, 40px); box-sizing: border-box; } .article-main { min-width: 0; } .article-body { padding-top: var(--section-margin-top-desktop, 75px); padding-bottom: var(--section-margin-bottom-desktop, 120px); } /* Body-Inhalt nutzt die Designer-Token (text-body) */ .article-body-inner { font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 */ line-height: var(--lh-body); /* 1.5 */ letter-spacing: var(--ls-body); /* 0.02em */ color: var(--color-black); } .article-body-inner p { margin-bottom: 13px; } .article-body-inner ul, .article-body-inner ol { padding-left: 1.5rem; margin-bottom: 13px; list-style: revert; } .article-body-inner li { margin-bottom: 6px; } .article-body-inner a:not(.btn) { color: var(--color-abd-blue); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color 0.2s; } .article-body-inner a:not(.btn):hover { text-decoration-color: var(--color-abd-blue); } .article-sidebar { padding: var(--section-margin-top-desktop, 75px) 0 var(--section-margin-bottom-desktop, 120px) var(--container-pad-desktop, 40px); } .article-sidebar-inner { position: sticky; top: calc(var(--header-height, 80px) + 20px); } /* Quadratisches Foto wie auf der Home (border-radius 9px) */ .article-sidebar-photo-link { display: block; margin-bottom: var(--gap-default, 20px); } .article-sidebar-photo { width: 100%; max-width: var(--photo-team-size, 225px); aspect-ratio: 1/1; height: auto; border-radius: var(--radius-photo-team, 9px); object-fit: cover; display: block; } /* Name = text-quote (semibold, 18px, system) */ .article-sidebar-name { font-family: var(--font-system); font-size: var(--fs-quote); font-weight: var(--fw-quote); line-height: var(--lh-quote); letter-spacing: var(--ls-quote); color: var(--color-headline-black); margin: 0 0 4px; } /* Funktion = text-body-small */ .article-sidebar-title { font-family: var(--font-system); font-size: var(--fs-body-small); font-weight: var(--fw-body-small); line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small); color: var(--color-dark-gray); margin: 0 0 var(--gap-default, 20px); } /* Stack der Mail- und Tel-Buttons (im Header-Button-Stil) */ .article-sidebar-buttons { display: flex; flex-direction: column; gap: 10px; align-items: stretch; margin-top: 8px; } .article-sidebar-buttons .btn--header--single { width: 100%; justify-content: center; } .article-related { background: var(--color-background-light); padding: var(--section-margin-top-desktop, 75px) var(--container-pad-desktop, 40px); } .article-related-inner { max-width: var(--container-max); margin: 0 auto; } .article-related-inner h2 { color: var(--color-abd-blue); margin-bottom: 13px; } .article-related-sub { font-family: var(--font-system); font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--section-margin-top-desktop, 75px); max-width: 700px; } .article-related-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap, 20px); } @media (max-width: 860px) { .article-layout { grid-template-columns: 1fr; padding: 0 1.5rem; } .article-body { padding: 2.5rem 0; } .article-sidebar { border-left: none; border-top: 1px solid var(--color-light-gray); padding: 2rem 0; } .article-related-grid { grid-template-columns: 1fr; } } /* ── Profile Cards (Über uns) ── */ .profile-card { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; padding: 3rem 0; border-top: 1px solid var(--color-light-gray); } .profile-card:first-of-type { border-top: none; padding-top: 0; } .profile-photo img { width: 100%; aspect-ratio: 2 / 3; object-fit: cover; object-position: top center; } /* Profile-Texte: Designer-Tokens (text-quote / text-body-small / text-body / text-small-print) */ .profile-name { font-family: var(--font-system); font-size: var(--fs-quote); /* 18px */ font-weight: var(--fw-quote); /* 600 */ line-height: var(--lh-quote); letter-spacing: var(--ls-quote); color: var(--color-headline-black); margin-bottom: 4px; } .profile-title { display: block; font-family: var(--font-system); font-size: var(--fs-body-small); /* 16px */ font-weight: var(--fw-body-small); /* 400 */ line-height: var(--lh-body-small); letter-spacing: var(--ls-body-small); color: var(--color-schriftblau); text-transform: none; margin-bottom: var(--gap-default, 20px); } .profile-bio p { font-family: var(--font-system); font-size: var(--fs-body); /* 18px */ font-weight: var(--fw-body); /* 300 */ line-height: var(--lh-body); /* 1.5 */ letter-spacing: var(--ls-body); color: var(--color-black); margin-bottom: 13px; } .profile-meta { margin-top: var(--gap-default, 20px); display: flex; flex-wrap: wrap; gap: 1rem; font-family: var(--font-system); font-size: var(--fs-small-print); /* 14px */ font-weight: var(--fw-small-print); /* 400 */ line-height: var(--lh-small-print); letter-spacing: var(--ls-small-print); color: var(--color-dark-gray); } @media (max-width: 720px) { .profile-card { grid-template-columns: 1fr; gap: 1.5rem; } .profile-photo img { aspect-ratio: 3 / 2; max-height: 300px; } } /* ── Footer Legal Bar ── */ .footer-legal-bar { display: flex; justify-content: center; gap: 2rem; padding: 1.5rem 0; } .footer-legal-bar a { font-family: var(--font-inter); font-size: var(--fs-header); font-weight: var(--fw-medium); letter-spacing: var(--ls-header); text-transform: uppercase; color: var(--color-headline-black); text-decoration: none; } .footer-legal-bar a:hover { color: var(--color-abd-blue); text-decoration: none; } .footer-legal-bar__copy { font-family: var(--font-inter); font-size: var(--fs-header); font-weight: var(--fw-regular); letter-spacing: var(--ls-header); text-transform: uppercase; color: var(--color-headline-black); opacity: 0.55; } /* ============================================================ Kompetenzen – Section Sub-Navigation & Overview Grid ============================================================ */ /* Horizontal link menu within a Kompetenzen section */ .kompetenzen-section-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 16px 0; border-top: 1px solid var(--color-line, #e0e0e0); border-bottom: 1px solid var(--color-line, #e0e0e0); margin-bottom: var(--sp-l, 40px); } .kompetenzen-section-nav a { font-family: var(--font-inter); font-size: var(--fs-body-small, 16px); font-weight: var(--fw-medium, 500); color: var(--color-abd-blue); text-decoration: none; white-space: nowrap; } .kompetenzen-section-nav a:hover { text-decoration: underline; } /* CTA block within a section */ .kompetenzen-cta { margin-top: var(--sp-xl, 60px); padding: var(--sp-l, 40px); background: var(--color-background-light, #f5f5f5); border-radius: 8px; } .kompetenzen-cta .btn { margin-top: 8px; margin-bottom: 8px; } /* 3-column overview grid */ .kompetenzen-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-m, 24px); margin-top: var(--sp-m, 24px); } .kompetenzen-overview-grid h4 { margin-bottom: 8px; } .kompetenzen-overview-grid ul { padding-left: 20px; margin: 0; } .kompetenzen-overview-grid li { font-family: var(--font-inter); font-size: var(--fs-body-small, 16px); line-height: 1.6; color: var(--color-schriftblau); } /* Kompetenzen overview cards (leistungen-page) */ .kompetenzen-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-m, 24px); } .kompetenzen-card { display: flex; flex-direction: column; padding: var(--sp-l, 40px) var(--sp-m, 24px); background: var(--color-background-light, #f5f5f5); border-radius: 8px; text-decoration: none; color: inherit; transition: box-shadow 0.2s ease; } .kompetenzen-card:hover { box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); text-decoration: none; } .kompetenzen-card .text-heading { margin-bottom: 12px; } .kompetenzen-card .text-body { flex-grow: 1; } @media (max-width: 768px) { .kompetenzen-overview-grid, .kompetenzen-cards { grid-template-columns: 1fr; } .kompetenzen-section-nav { gap: 8px 16px; } } /* ════════════════════════════════════════════════════════════════════════ GLOBAL BUTTON OVERRIDE Alle Primary-/Outline-Buttons im selben kompakten Stil wie der Header-Button: 30 px Höhe · Inter 12 px semibold · letter-spacing 0.05em · radius 8 px .btn--text bleibt unverändert (reiner Text-Link). ════════════════════════════════════════════════════════════════════════ */ .btn--primary, .btn--outline { height: var(--btn-header-height, 30px); min-height: var(--btn-header-height, 30px); line-height: var(--btn-header-height, 30px); border-radius: var(--radius-btn-small, 8px); padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--font-inter); font-size: var(--fs-button-small); /* 12px */ font-weight: var(--fw-semibold); /* 600 */ letter-spacing: 0.05em; text-transform: none; white-space: nowrap; } .btn--primary { background-color: var(--color-abd-blue); border: 2px solid var(--color-abd-blue); color: var(--color-white); } .btn--primary:hover { background-color: var(--color-white); border-color: var(--color-abd-blue); color: var(--color-schriftblau); font-weight: var(--fw-semibold); } .btn--outline { background-color: transparent; border: 2px solid var(--color-abd-blue); color: var(--color-abd-blue); } .btn--outline:hover { background-color: var(--color-abd-blue); color: var(--color-white); } /* Mobile: Wrap statt fixe Höhe, falls Text mehrzeilig wird */ @media (max-width: 600px) { .btn--primary, .btn--outline { white-space: normal; height: auto; min-height: var(--btn-header-height, 30px); line-height: 1.3; padding: 6px 18px; box-sizing: border-box; } }