/* =========================================================================== kompetenz.css — Benker WP-Theme HANDGESCHRIEBEN. Wird NACH components.css geladen. TEXTFARBE — PROJEKTREGEL (festgehalten 22.07.2026) Die Standard-Textfarbe steht EINMAL in global.css am und wird von allen Elementen geerbt. Fuer Fliesstext gilt deshalb: Keine Farbe setzen = richtig. Wer in einer Komponente `color` angibt, weicht bewusst ab und sollte den Grund danebenschreiben. Genau hier war ein Fehler: Die Leads dieser Seite setzten `--color-text-muted`, wodurch derselbe Textbaustein je nach Abschnitt unterschiedlich dunkel aussah. Die Angaben sind entfernt, die Absaetze erben jetzt wie ueberall sonst. Bestandsaufnahme fuer spaeter: In components.css nutzen nur die FAQ-Leads und der Kontakt-Lead bewusst die gedaempfte Farbe. Alle uebrigen Abschnitts-Leads stehen in der Standardfarbe. =========================================================================== */ /* --------------------------------------------------------------------------- Kompetenz-Stationen (.kinfo) Die Breitenkorrektur fuer .kinfo__row ist am 23.07.2026 nach assets/css/layout.css gewandert: Dort liegen jetzt alle zehn Abschnitts-Wrapper, die aus dem Astro-Build eine eigene Breite mitbrachten. Eine Stelle statt zehn. .kinfo__title-area (23.07.2026): Eyebrow + H2 auf 60 % begrenzt und zentriert — identisch zu .tintro__inner auf Ueber-uns und Karriere. content-band bringt bereits margin-inline: auto mit. --------------------------------------------------------------------------- */ /* 10.08.2026 — siehe Begruendung bei .kweg__intro. ACHTUNG, anderer Fall als dort: Dieses Element IST das content-band (die Klassen stehen am selben DIV). Ein margin-inline:0 wuerde deshalb nicht die Ueberschrift nach links ruecken, sondern das ganze Band an den Fensterrand schieben. Die Lesebreite gehoert hier also auf das KIND, nicht auf das Band: das Band bleibt mittig und 1440px breit, der Titel wird darin begrenzt und beginnt an derselben Kante wie die Karten darunter. */ .kinfo__title { max-width: 60%; } /* --------------------------------------------------------------------------- Kompetenz-Karten (.kcard): fuellen die Inhaltsbreite (22.07.2026) BEFUND: Bild und Textbox standen nicht an den Kanten der Inhaltsbreite. URSACHE: Die Karte war im Astro-Build auf feste Maasse gesetzt — 600px Bild + 60px Abstand + 620px Text = genau 1280px. Das passte zur alten Breite (.container). Seit die Zeile 1392px breit ist, bleiben 112px ungenutzt, und die Kaesten fluchten nicht mehr mit Ueberschrift und den Abschnitten darueber. LOESUNG: Beide Seiten teilen sich die verfuegbare Breite zu gleichen Teilen (flex: 1 1 0 ohne Deckel). Die Karte waechst damit automatisch mit, auch wenn die Inhaltsbreite spaeter noch einmal angepasst wird. Dazu, wie besprochen: mehr Luft zwischen Bild und Box (60 -> 80px) und mehr Innenabstand in der Box (32 -> 48px). Beides gleicht aus, dass die Flaechen jetzt groesser sind. --------------------------------------------------------------------------- */ @media (min-width: 1024px) { .kcard { gap: 80px; } .kcard__media { flex: 1 1 0; max-width: none; } .kcard__text { flex: 1 1 0; max-width: none; padding: var(--space-7); } } /* --------------------------------------------------------------------------- "Der Weg Ihres Projekts" (.kweg) --------------------------------------------------------------------------- */ .kweg { padding-block: var(--space-8) var(--space-7); } .kweg__ablauf { margin-top: var(--space-7); } /* 10.08.2026 (Korrekturen KW 32): Einleitungen linksbuendig zum Inhalt. BEFUND: Die drei Einleitungen der Kompetenzseite (.kweg__intro, .kinfo__title-area, .kmat__intro) standen als ZENTRIERTE Kaesten im Inhaltsband — 720px bzw. 60% breit, per margin-inline:auto mittig. Ihr Text ist aber linksbuendig, und alles darunter (Ablauf, Karten, Materialtabelle) beginnt an der linken Inhaltskante. Dadurch sassen die Ueberschriften rund 336px weiter rechts als der Inhalt, zu dem sie gehoeren — es sah aus wie ein Versatz, nicht wie eine Gestaltung. LOESUNG: margin-inline auf 0. Die Lesebreite (720px / 60%) bleibt, damit die Zeilen nicht zu lang werden; nur die Kante wandert nach links, dorthin, wo Hero, Ablauf, Karten und Tabelle bereits stehen. */ .kweg__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin-inline: 0; } .kweg__eyebrow { font-family: var(--font-heading); font-size: var(--fs-heading-5xs); font-weight: var(--fw-semibold); line-height: var(--lh-heading-5xs); letter-spacing: var(--tracking-tight); /* Eyebrows stehen projektweit in Markenblau — bewusste Abweichung. */ color: var(--color-primary-800); } .kweg__title, .kweg__lead { text-wrap: pretty; } /* --------------------------------------------------------------------------- Material und Abmessungen (.kmat) — offene Tabelle statt Akkordeon Vier Gruppen nebeneinander, jede mit Bezeichnung und Wert. Bewusst OHNE Aufklappen: Das sind Pruefdaten, die verglichen werden, und zugeklappter Text ist fuer die Suche schlechter auffindbar. --------------------------------------------------------------------------- */ .kmat { padding-block: var(--space-8); background-color: var(--color-bg-subtle); } /* margin-inline: 0 — siehe Begruendung bei .kweg__intro (10.08.2026). */ .kmat__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin-inline: 0; margin-bottom: var(--space-7); } .kmat__eyebrow { font-family: var(--font-heading); font-size: var(--fs-heading-5xs); font-weight: var(--fw-semibold); line-height: var(--lh-heading-5xs); letter-spacing: var(--tracking-tight); color: var(--color-primary-800); } .kmat__title, .kmat__lead { text-wrap: pretty; } /* 10.08.2026 (Korrekturen KW 32, Ticket 14): Hinweis "Werte sind Beispiele". Steht zwischen Intro und Tabelle, damit er GELESEN wird, bevor jemand die Grenzen als Ausschluss liest. Optisch zurueckgenommen (kleiner, gedaempft), weil er die Daten einordnet und nicht mit ihnen konkurrieren soll. */ .kmat__hinweis { max-width: 720px; margin-inline: 0; margin-block: calc(var(--space-7) * -1 + var(--space-3)) var(--space-6); font-size: var(--fs-body-s, 0.9375rem); line-height: 1.55; color: var(--color-text-muted, #5a6b7d); text-wrap: pretty; } .kmat__grid { display: grid; grid-template-columns: 1fr; gap: var(--space-6); } @media (min-width: 700px) { .kmat__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-6) var(--space-7); } } @media (min-width: 1100px) { .kmat__grid { grid-template-columns: repeat(4, 1fr); } } .kmat__gruppe-titel { font-family: var(--font-heading); font-size: var(--fs-heading-3xs); font-weight: var(--fw-semibold); line-height: var(--lh-heading-3xs); letter-spacing: var(--tracking-tight); margin-bottom: var(--space-4); } .kmat__liste { margin: 0; } .kmat__zeile { display: flex; flex-direction: column; gap: 2px; padding-block: var(--space-3); border-top: 1px solid rgba(8, 8, 8, 0.1); } .kmat__zeile:last-child { border-bottom: 1px solid rgba(8, 8, 8, 0.1); } .kmat__label { font-size: var(--fs-body-s); line-height: var(--lh-body-s); letter-spacing: var(--tracking-tight); /* Bezeichnung tritt hinter den Wert zurueck — bewusste Abweichung. */ color: var(--color-text-muted); } .kmat__wert { margin: 0; font-size: var(--fs-body-m); line-height: var(--lh-body-m); letter-spacing: var(--tracking-tight); text-wrap: pretty; } /* --------------------------------------------------------------------------- "Die Menschen dahinter" (.kmensch) Wird auf der Kompetenzseite nicht mehr eingebunden. Regeln bleiben, damit der Baustein anderswo ohne Nacharbeit funktioniert. --------------------------------------------------------------------------- */ .kmensch { padding-block: var(--space-8); } .kmensch__intro { display: flex; flex-direction: column; gap: var(--space-4); max-width: 720px; margin-inline: auto; margin-bottom: var(--space-7); } .kmensch__title, .kmensch__lead { text-wrap: pretty; } .kmensch__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: var(--space-5); } @media (min-width: 768px) { .kmensch__grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); } } .kmensch__figure { margin: 0; display: flex; flex-direction: column; gap: var(--space-3); } .kmensch__img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: var(--radius-image); } .kmensch__caption { font-family: var(--font-heading); font-size: var(--fs-heading-4xs, 16px); font-weight: var(--fw-bold); line-height: 1.25; letter-spacing: var(--tracking-tight); color: var(--color-primary-800); }