/* ===================================================================== Alpha Digitalagentur GmbH, Haupt-Stylesheet Übersetzung des Entwurfs (Claude Design) in wiederverwendbare Klassen. Reihenfolge: Schriften · Variablen · Grundlagen · Layout · Bausteine · Seitenbereiche · Formulare · Verhalten · Umbrüche ===================================================================== */ /* --------------------------------------------------------------------- 1. Schriften, lokal eingebunden, kein externer Request --------------------------------------------------------------------- */ @font-face { font-family: 'Poppins'; src: url('/ressourcen/schriften/poppins-400-latein.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Poppins'; src: url('/ressourcen/schriften/poppins-500-latein.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: 'Poppins'; src: url('/ressourcen/schriften/poppins-600-latein.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { /* Variable Schrift: deckt 400 und 600 aus einer Datei ab */ font-family: 'Source Serif 4'; src: url('/ressourcen/schriften/source-serif-4-variabel-latein.woff2') format('woff2-variations'); font-weight: 200 900; font-style: normal; font-display: swap; } /* --------------------------------------------------------------------- 2. Gestaltungsvariablen --------------------------------------------------------------------- */ :root { --marke: #003D68; --tief: #002B49; --akzent: #79F296; --sanft: #C5EFCB; --cta: #D24A4B; --cta-hover: #ED4952; --tinte: #12212E; --gedaempft: #5A6B7A; --linie: #E2E8ED; --flaeche: #F4F7F9; /* Farbband, im Entwurf über die Variante „Blauanteil" steuerbar */ --band: #003D68; --band-text: #ffffff; --band-sub: rgba(255, 255, 255, .72); --band-linie: rgba(255, 255, 255, .16); --schrift-ueberschrift: 'Source Serif 4', Georgia, 'Times New Roman', serif; --schrift-text: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif; --breite: 1240px; --rand: 32px; --radius: 20px; --radius-gross: 24px; --schatten-karte: 0 24px 44px -22px rgba(0, 43, 73, .30); --schatten-menue: 0 24px 48px -16px rgba(0, 43, 73, .28); /* Pfeil aus einem Rahmen heraus, für Verweise auf fremde Auftritte */ --symbol-extern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4L10 14'/%3E%3Cpath d='M18 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E"); } /* Variante mit wenig Dunkelblau, per data-Attribut am umschaltbar */ :root[data-blauanteil="wenig"] { --band: #ffffff; --band-text: #12212E; --band-sub: #5A6B7A; --band-linie: #E2E8ED; } /* --------------------------------------------------------------------- 3. Grundlagen --------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: #fff; color: var(--tinte); font-family: var(--schrift-text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-wrap: break-word; } h1, h2, h3, h4 { font-family: var(--schrift-ueberschrift); font-weight: 600; line-height: 1.15; letter-spacing: -.01em; margin: 0; text-wrap: balance; } p { margin: 0; text-wrap: pretty; } a { color: var(--marke); text-decoration: none; } a:hover { color: var(--cta); } /* Verweise auf fremde Auftritte bekommen ein Symbol nachgestellt. Die Klasse setzt sicherer_html() automatisch, redaktionelle Texte brauchen also nichts weiter. Das Symbol nimmt die Schriftfarbe an und folgt damit dem Hover. */ .extern::after { content: ''; display: inline-block; width: .72em; height: .72em; margin-left: .3em; vertical-align: -.02em; background-color: currentColor; -webkit-mask: var(--symbol-extern) no-repeat center / contain; mask: var(--symbol-extern) no-repeat center / contain; } /* Ohne Maskenunterstützung ein schlichter Pfeil statt einer leeren Fläche */ @supports not ((-webkit-mask-image: none) or (mask-image: none)) { .extern::after { content: '\2197'; width: auto; height: auto; background: none; font-size: .85em; } } /* Schaltflächen und Bildkacheln tragen ihre eigene Kennzeichnung. Getrennte Regeln, damit ein Browser ohne :has() nur die zweite verwirft. */ .knopf.extern::after { content: none; } .extern:has(img)::after { content: none; } img, svg, video { max-width: 100%; height: auto; display: block; } button { font-family: inherit; } ul, ol { margin: 0; padding: 0; } hr { border: 0; border-top: 1px solid var(--linie); margin: 32px 0; } :focus-visible { outline: 3px solid var(--cta); outline-offset: 3px; border-radius: 4px; } /* Sprungmarke für Tastatur- und Screenreader-Nutzung */ .sprungmarke { position: absolute; left: -9999px; top: 0; z-index: 200; padding: 14px 22px; background: var(--marke); color: #fff; border-radius: 0 0 12px 0; font-weight: 600; } .sprungmarke:focus { left: 0; color: #fff; } .nur-screenreader { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* --------------------------------------------------------------------- 4. Layout --------------------------------------------------------------------- */ .seite { min-height: 100vh; display: flex; flex-direction: column; } .seite__inhalt { flex: 1; } .behaelter { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); } .behaelter--schmal { max-width: 900px; } .behaelter--text { max-width: 760px; } .abschnitt { padding-block: 104px; } .abschnitt--eng { padding-block: 88px; } .abschnitt--knapp { padding-block: 72px; } .abschnitt--weiss { background: #fff; } .abschnitt--flaeche{ background: var(--flaeche); } .abschnitt--marke { background: var(--marke); color: #fff; } .abschnitt--tief { background: var(--tief); color: #fff; } .abschnitt--band { background: var(--band); color: var(--band-text); } .abschnitt--marke h1, .abschnitt--marke h2, .abschnitt--marke h3, .abschnitt--tief h1, .abschnitt--tief h2, .abschnitt--tief h3 { color: #fff; } .raster { display: grid; gap: 24px; } .raster--2 { grid-template-columns: repeat(2, 1fr); } .raster--3 { grid-template-columns: repeat(3, 1fr); } .raster--4 { grid-template-columns: repeat(4, 1fr); } .raster--6 { grid-template-columns: repeat(6, 1fr); } /* Zweispaltige Abschnitte (Bild + Text, Text + Kasten) */ .zweispaltig { display: grid; grid-template-columns: .95fr 1.05fr; gap: 72px; align-items: center; } .zweispaltig--gleich { grid-template-columns: 1fr 1fr; } .zweispaltig--oben { align-items: start; } .zweispaltig--breit { grid-template-columns: 1.15fr .85fr; } .zweispaltig--schmal { grid-template-columns: 1.1fr .9fr; } .stapel { display: flex; flex-direction: column; } .stapel--klein { gap: 10px; } .stapel--mittel { gap: 20px; } .stapel--gross { gap: 32px; } /* --------------------------------------------------------------------- 5. Typografische Bausteine --------------------------------------------------------------------- */ /* Kennzeichnung über einer Überschrift, etwa "Digital-Lexikon". Bewusst zurückhaltend: Grau auf hellem Grund, Weiß auf dunklem. */ .marke-zeile { font: 500 13.5px/1 var(--schrift-text); color: var(--gedaempft); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 18px; } .seitenkopf .marke-zeile, .abschnitt--marke .marke-zeile, .abschnitt--tief .marke-zeile, .abschnitt--band .marke-zeile { color: rgba(255, 255, 255, .75); } .ueberschrift-xl { font-size: 66px; } .ueberschrift-l { font-size: 56px; } .ueberschrift-m { font-size: 44px; } .ueberschrift-s { font-size: 36px; } .vorspann { font-size: 20px; line-height: 1.55; color: var(--gedaempft); max-width: 620px; } .abschnitt--marke .vorspann, .abschnitt--tief .vorspann { color: rgba(255, 255, 255, .78); } .abschnitt--band .vorspann { color: var(--band-sub); } .hinweis { font-size: 15px; color: var(--gedaempft); } /* Redaktioneller Fließtext aus dem CMS */ .fliesstext { font-size: 17.5px; color: var(--tinte); } .fliesstext > * + * { margin-top: 20px; } .fliesstext h2 { font-size: 32px; margin-top: 44px; color: var(--marke); } .fliesstext h3 { font-size: 24px; margin-top: 34px; color: var(--marke); } .fliesstext h4 { font-size: 20px; margin-top: 28px; color: var(--marke); } .fliesstext p { color: var(--gedaempft); } .fliesstext ul, .fliesstext ol { padding-left: 22px; color: var(--gedaempft); } .fliesstext li + li { margin-top: 8px; } .fliesstext a { text-decoration: underline; text-underline-offset: 3px; } .fliesstext blockquote { margin: 32px 0; padding: 24px 28px; background: var(--sanft); border-radius: 16px; font-family: var(--schrift-ueberschrift); font-size: 21px; line-height: 1.45; color: var(--marke); } .fliesstext img { border-radius: 16px; margin-block: 12px; } .fliesstext table { width: 100%; border-collapse: collapse; font-size: 16px; } .fliesstext th, .fliesstext td { padding: 12px 14px; border-bottom: 1px solid var(--linie); text-align: left; } .fliesstext th { color: var(--marke); font-weight: 600; } .fliesstext code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; background: var(--flaeche); padding: 2px 6px; border-radius: 6px; } /* --------------------------------------------------------------------- 6. Schaltflächen und Pillen --------------------------------------------------------------------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; font: 600 16.5px/1 var(--schrift-text); padding: 17px 32px; border: none; cursor: pointer; text-align: center; transition: background .18s ease, color .18s ease, border-color .18s ease; } .knopf--cta { background: var(--cta); color: #fff; } .knopf--cta:hover { background: var(--cta-hover); color: #fff; } .knopf--umriss { background: none; border: 1.5px solid var(--marke); color: var(--marke); font-weight: 500; padding: 15.5px 30px; } .knopf--umriss:hover { background: var(--sanft); color: var(--marke); } .knopf--umriss-hell { background: none; border: 1.5px solid rgba(255, 255, 255, .4); color: #fff; font-weight: 500; padding: 15.5px 30px; } .knopf--umriss-hell:hover { border-color: var(--akzent); color: var(--akzent); } .knopf--klein { padding: 13px 24px; font-size: 15px; } .knopf--klein.knopf--umriss { padding: 11.5px 22px; } .knopfreihe { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; } .pille { display: inline-flex; align-items: center; gap: 9px; padding: 7px 14px; border-radius: 999px; background: var(--sanft); color: var(--marke); font: 500 13.5px/1.4 var(--schrift-text); } .pille--punkt::before { content: ''; width: 7px; height: 7px; border-radius: 999px; background: var(--marke); flex: none; } .pille--hell { background: rgba(255, 255, 255, .12); color: #fff; } .pille--klein { padding: 6px 12px; font-size: 13px; } .pillenreihe { display: flex; flex-wrap: wrap; gap: 10px; } /* Weiterlesen-Link mit Pfeil */ .weiter { font: 600 15px/1 var(--schrift-text); color: var(--cta); display: inline-flex; gap: 6px; align-items: center; } .weiter::after { content: '→'; transition: transform .18s ease; } a:hover .weiter::after, .weiter:hover::after { transform: translateX(3px); } /* --------------------------------------------------------------------- 7. Kopfbereich --------------------------------------------------------------------- */ .kopf { position: sticky; top: 0; z-index: 60; } .kopf__leiste { background: #fff; border-bottom: 1px solid var(--linie); box-shadow: 0 1px 12px rgba(0, 43, 73, .05); } .kopf--dunkel .kopf__leiste { background: var(--marke); border-bottom-color: rgba(255, 255, 255, .1); box-shadow: none; } .kopf__innen { max-width: var(--breite); margin: 0 auto; padding: 0 28px; height: 80px; display: flex; align-items: center; gap: 24px; } .kopf__logo { display: flex; align-items: center; flex: none; } /* Etwas höher als im Entwurf (44 px), damit der Claim unter dem Schriftzug nicht vollständig zuläuft. */ .kopf__logo img { height: 52px; width: auto; } .kopf__logo--dunkel { display: none; } .kopf--dunkel .kopf__logo--hell { display: none; } .kopf--dunkel .kopf__logo--dunkel { display: block; } .kopf__nav { display: flex; align-items: center; gap: 22px; margin-left: auto; } .kopf__link { color: var(--marke); font: 500 16px/1 var(--schrift-text); white-space: nowrap; } .kopf__link:hover { color: var(--cta); } .kopf--dunkel .kopf__link { color: #fff; } .kopf--dunkel .kopf__link:hover { color: var(--akzent); } .kopf__link[aria-current="page"] { color: var(--cta); } .kopf--dunkel .kopf__link[aria-current="page"] { color: var(--akzent); } .kopf__aktionen { display: flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; } .kopf__aktionen .knopf { padding: 13.5px 24px; font-size: 15px; } .kopf__aktionen .knopf--umriss { padding: 12px 22px; } .kopf--dunkel .kopf__aktionen .knopf--umriss { border-color: rgba(255, 255, 255, .4); color: #fff; } .kopf--dunkel .kopf__aktionen .knopf--umriss:hover { border-color: var(--akzent); color: var(--akzent); background: none; } /* Aufklappmenü Leistungen */ .menue { position: relative; padding-block: 28px; } .menue__schalter { display: flex; align-items: center; gap: 7px; background: none; border: none; padding: 0; cursor: pointer; color: var(--marke); font: 500 16px/1 var(--schrift-text); } .menue__schalter:hover { color: var(--cta); } .kopf--dunkel .menue__schalter { color: #fff; } .kopf--dunkel .menue__schalter:hover { color: var(--akzent); } .menue__schalter[aria-current="page"] { color: var(--cta); } .kopf--dunkel .menue__schalter[aria-current="page"] { color: var(--akzent); } /* Der Pfeil ist die Schaltfläche zum Aufklappen, der Titel daneben führt auf die Übersichtsseite. Etwas Fläche darum macht ihn treffsicher. */ .menue__pfeil { font-size: 10px; opacity: .8; padding: 6px; margin: -6px -6px -6px -3px; cursor: pointer; transition: transform .18s ease; } .menue[data-offen="ja"] .menue__pfeil { transform: rotate(180deg); } .menue__klappe { position: absolute; top: 74px; left: -24px; width: 340px; background: #fff; border: 1px solid var(--linie); border-radius: 16px; box-shadow: var(--schatten-menue); padding: 10px; display: none; flex-direction: column; gap: 2px; } .menue[data-offen="ja"] .menue__klappe { display: flex; } /* Menüs am rechten Ende der Leiste klappen nach rechts auf, sonst ragt die 340 px breite Fläche aus dem Sichtfenster. */ .menue__klappe--rechts { left: auto; right: -24px; } .menue__eintrag { display: block; padding: 14px 16px; border-radius: 12px; color: var(--tinte); } .menue__eintrag:hover { background: var(--sanft); } .menue__titel { display: block; font: 600 15px/1.3 var(--schrift-text); color: var(--marke); } .menue__text { display: block; font-size: 13.5px; color: var(--gedaempft); line-height: 1.4; } .menue__alle { display: block; padding: 12px 16px; margin-top: 4px; border-top: 1px solid var(--linie); font: 500 14px/1 var(--schrift-text); color: var(--marke); } .menue__alle:hover { color: var(--cta); } /* Kompakter Kopf (mobil / Tablet) */ .kopf__burger { width: 46px; height: 46px; border-radius: 999px; border: 1.5px solid var(--marke); background: none; cursor: pointer; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; flex: none; } .kopf__burger span { width: 20px; height: 2px; background: var(--marke); display: block; transition: transform .2s ease, opacity .2s ease; } .kopf--dunkel .kopf__burger { border-color: rgba(255, 255, 255, .4); } .kopf--dunkel .kopf__burger span { background: #fff; } .kopf__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .kopf__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .kopf__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobilmenue { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--linie); box-shadow: 0 24px 40px -20px rgba(0, 43, 73, .3); display: none; flex-direction: column; padding: 12px 20px 24px; max-height: calc(100vh - 72px); overflow-y: auto; } .mobilmenue[data-offen="ja"] { display: flex; } .mobilmenue a { padding: 15px 4px; border-bottom: 1px solid var(--linie); font: 600 18px/1 var(--schrift-text); color: var(--marke); } .mobilmenue a:hover { color: var(--cta); } .mobilmenue a.mobilmenue__unter { padding: 13px 4px 13px 20px; font: 400 16px/1 var(--schrift-text); color: var(--gedaempft); } .mobilmenue a.mobilmenue__unter:hover { color: var(--marke); } .mobilmenue .knopf { margin-top: 18px; border-bottom: none; } /* --------------------------------------------------------------------- 8. Hero-Varianten --------------------------------------------------------------------- */ .hero-split { background: #fff; position: relative; overflow: hidden; } .hero-split__innen { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); display: grid; grid-template-columns: 1.08fr .92fr; gap: 64px; align-items: center; min-height: 600px; } .hero-split__text { padding-block: 88px; } /* Ohne Bild nutzt der Startbereich die ganze Breite */ .hero-split__innen--einspaltig { grid-template-columns: 1fr; min-height: 0; } .hero-split__innen--einspaltig .hero-split__text { padding-block: 96px; } .hero-split__innen--einspaltig .vorspann { max-width: 720px; } .hero-split__bild { align-self: stretch; display: flex; align-items: center; padding-block: 56px; } .hero-split__bild > * { width: 100%; } .hero-split h1 { font-size: 66px; margin-bottom: 24px; color: var(--marke); } .hero-split .vorspann { max-width: 540px; margin-bottom: 38px; } .hero-split .knopfreihe { margin-bottom: 44px; } .hero-zentriert { background: #fff; text-align: center; } .hero-zentriert__innen { max-width: 900px; margin: 0 auto; padding: 112px var(--rand) 0; } .hero-zentriert h1 { font-size: 76px; margin-bottom: 26px; color: var(--marke); } .hero-zentriert .vorspann { font-size: 21px; margin: 0 auto 40px; max-width: 660px; } .hero-zentriert .knopfreihe { justify-content: center; } .hero-zentriert__bild { max-width: 1080px; margin: 0 auto; padding: 64px var(--rand) 0; } /* Dunkelblaue Variante der Startbereiche, in der Verwaltung wählbar. Alles Textliche wird hell gesetzt, damit der Kontrast erhalten bleibt. */ .hero-split--dunkel, .hero-zentriert--dunkel, .hero-kennzahlen--dunkel { background: var(--marke); color: #fff; } .hero-split--dunkel h1, .hero-zentriert--dunkel h1, .hero-kennzahlen--dunkel h1 { color: #fff; } .hero-split--dunkel .vorspann, .hero-zentriert--dunkel .vorspann, .hero-kennzahlen--dunkel .vorspann { color: rgba(255, 255, 255, .78); } .hero-split--dunkel .marke-zeile, .hero-zentriert--dunkel .marke-zeile, .hero-kennzahlen--dunkel .marke-zeile { color: rgba(255, 255, 255, .75); } /* Auf dunklem Grund werden nur die Vertrauensmerkmale in der Reihe hell gesetzt. Das Wapperl über der Überschrift behält sein Grün mit dunkelblauer Schrift, sonst ginge die Auszeichnung dort verloren. */ .hero-split--dunkel .pillenreihe .pille, .hero-zentriert--dunkel .pillenreihe .pille, .hero-kennzahlen--dunkel .pillenreihe .pille { background: rgba(255, 255, 255, .12); color: #fff; } .hero-split--dunkel .pillenreihe .pille--punkt::before, .hero-zentriert--dunkel .pillenreihe .pille--punkt::before, .hero-kennzahlen--dunkel .pillenreihe .pille--punkt::before { background: #fff; } .hero-split--dunkel .knopf--umriss, .hero-zentriert--dunkel .knopf--umriss, .hero-kennzahlen--dunkel .knopf--umriss { border-color: rgba(255, 255, 255, .4); color: #fff; } .hero-split--dunkel .knopf--umriss:hover, .hero-zentriert--dunkel .knopf--umriss:hover, .hero-kennzahlen--dunkel .knopf--umriss:hover { background: rgba(255, 255, 255, .12); color: #fff; } .hero-split--dunkel .platzhalter, .hero-zentriert--dunkel .platzhalter { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 8px, rgba(255, 255, 255, 0) 8px 16px); } .hero-split--dunkel .platzhalter__marke, .hero-split--dunkel .platzhalter__text, .hero-zentriert--dunkel .platzhalter__marke, .hero-zentriert--dunkel .platzhalter__text { color: rgba(255, 255, 255, .6); } .hero-kennzahlen { background: #fff; } .hero-kennzahlen__innen { max-width: var(--breite); margin: 0 auto; padding: 96px var(--rand) 0; } .hero-kennzahlen h1 { font-size: 62px; margin-bottom: 22px; color: var(--marke); } .hero-kennzahlen .vorspann { margin-bottom: 36px; } /* Seitenkopf für Unterseiten (dunkelblaues Band) */ .seitenkopf { background: var(--marke); color: #fff; padding: 88px 0 96px; } .seitenkopf h1 { font-size: 56px; max-width: 840px; margin-bottom: 22px; } .seitenkopf .vorspann { font-size: 19px; max-width: 660px; color: rgba(255, 255, 255, .78); } .seitenkopf--split { padding: 80px 0 92px; } .seitenkopf--split .seitenkopf__innen { display: grid; grid-template-columns: 1.1fr .9fr; gap: 64px; align-items: center; } .seitenkopf--split h1 { font-size: 52px; } /* --------------------------------------------------------------------- 9. Bild- und Logoplatzhalter --------------------------------------------------------------------- */ .platzhalter { background-image: repeating-linear-gradient(135deg, rgba(0, 61, 104, .09) 0 8px, rgba(0, 61, 104, 0) 8px 16px); background-color: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius-gross); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 24px; } .platzhalter__marke { font: 12px/1 ui-monospace, Menlo, monospace; color: var(--marke); letter-spacing: .08em; } .platzhalter__text { font: 13px/1.5 ui-monospace, Menlo, monospace; color: var(--gedaempft); } .platzhalter--dunkel { background-color: rgba(255, 255, 255, .07); border-color: rgba(255, 255, 255, .18); background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .07) 0 8px, rgba(255, 255, 255, 0) 8px 16px); } .platzhalter--dunkel .platzhalter__marke, .platzhalter--dunkel .platzhalter__text { color: rgba(255, 255, 255, .6); } .bild-4-5 { aspect-ratio: 4/5; } .bild-4-3 { aspect-ratio: 4/3; } .bild-1-1 { aspect-ratio: 1/1; } .bild-5-6 { aspect-ratio: 5/6; } .bild-16-9 { aspect-ratio: 16/9; } .bild-21-9 { aspect-ratio: 21/9; } .medienbild { border-radius: var(--radius-gross); object-fit: cover; width: 100%; } /* Ganzes Bild im festen Rahmen: nichts wird beschnitten, dafür bleibt oben und unten oder links und rechts Fläche frei. Die bleibt bewusst durchsichtig, damit der Hintergrund des Abschnitts durchscheint. */ .medienbild--einpassen { object-fit: contain; background: transparent; } /* Rahmen richtet sich nach dem Bild, das Seitenverhältnis bleibt erhalten. */ .medienbild--natuerlich { aspect-ratio: auto; height: auto; object-fit: initial; } /* Farbumkehr für Bilder auf dunklem Grund: Aus einer Grafik mit weißem Hintergrund wird eine mit dunklem. Die Drehung des Farbtons holt die Buntfarben zurück, die invert() sonst in den Gegenton kippt. */ .medienbild--invers { filter: invert(1) hue-rotate(180deg); } /* Kundenlogos */ .logo-leiste { background: #fff; border-bottom: 1px solid var(--linie); } .logo-leiste__innen { max-width: var(--breite); margin: 0 auto; padding: 26px var(--rand); display: flex; flex-wrap: wrap; align-items: center; gap: 32px; justify-content: space-between; } .logo-leiste__titel { font: 500 14px/1 var(--schrift-text); color: var(--gedaempft); letter-spacing: .06em; text-transform: uppercase; } .logo-leiste__logos { display: flex; flex-wrap: wrap; gap: 14px; } .kundenlogo { width: 132px; height: 44px; border-radius: 8px; background-color: var(--flaeche); display: flex; align-items: center; justify-content: center; font: 10.5px/1 ui-monospace, Menlo, monospace; color: var(--gedaempft); padding: 6px; } .kundenlogo img { max-height: 100%; width: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .2s, opacity .2s; } .kundenlogo:hover img { filter: none; opacity: 1; } .kundenlogo--gross { width: auto; height: 76px; border-radius: 12px; } .kundenlogo--rahmen { background-color: #fff; border: 1px solid var(--linie); height: 84px; } /* --------------------------------------------------------------------- 10. Karten --------------------------------------------------------------------- */ .karte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); padding: 36px; color: var(--tinte); transition: box-shadow .2s ease, transform .2s ease; } a.karte:hover { box-shadow: var(--schatten-karte); transform: translateY(-3px); color: var(--tinte); } .karte__symbol { width: 52px; height: 52px; border-radius: 14px; background: var(--sanft); display: flex; align-items: center; justify-content: center; margin-bottom: 26px; flex: none; } .karte__symbol i { width: 18px; height: 18px; background: var(--marke); display: block; } .karte__symbol--quadrat i { border-radius: 5px; } .karte__symbol--kreis i { border-radius: 999px; } .karte__symbol--raute i { transform: rotate(45deg); } .karte h3 { font-size: 26px; margin-bottom: 14px; color: var(--marke); } .karte p { font-size: 16px; color: var(--gedaempft); margin-bottom: 24px; flex: 1; } .karte .pillenreihe { margin-bottom: 24px; } .karte--dunkel { background: var(--marke); border: none; color: #fff; padding: 38px; transition: background .2s ease; } a.karte--dunkel:hover { background: var(--tief); color: #fff; transform: none; box-shadow: none; } .karte--dunkel h3 { color: #fff; font-size: 28px; margin: 56px 0 14px; } .karte--dunkel p { color: rgba(255, 255, 255, .76); margin-bottom: 26px; } .karte--dunkel .weiter { color: var(--akzent); } .karte__nummer { font: 500 12.5px/1 var(--schrift-text); color: var(--akzent); letter-spacing: .14em; text-transform: uppercase; margin-bottom: auto; } .karte--flaeche { background: var(--flaeche); border: none; padding: 36px; } .karte--flaeche h3 { font-size: 22px; margin-bottom: 12px; } .karte--flaeche p { margin-bottom: 0; } .karte--schlicht { padding: 34px 36px; } .karte--schlicht h3 { font-size: 23px; margin-bottom: 12px; } .karte--schlicht p { margin-bottom: 0; } /* Nummerierte Liste als Alternative zu Karten */ .nummernliste { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } .nummernliste__zeile { display: grid; grid-template-columns: 96px 1.1fr 1.4fr auto; gap: 28px; align-items: center; padding: 34px 36px; border-bottom: 1px solid var(--linie); color: var(--tinte); } .nummernliste__zeile:last-child { border-bottom: none; } .nummernliste__zeile:hover { background: var(--flaeche); color: var(--tinte); } .nummernliste__nummer { font-family: var(--schrift-ueberschrift); font-size: 40px; color: var(--sanft); } .nummernliste__zeile h3 { font-size: 26px; color: var(--marke); } .nummernliste__zeile p { font-size: 16px; color: var(--gedaempft); } /* --------------------------------------------------------------------- 11. Kennzahlen, Prozess, Listen --------------------------------------------------------------------- */ .kennzahlen { display: grid; gap: 1px; background: var(--linie); border-top: 1px solid var(--linie); } .kennzahlen--rahmen { border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } .kennzahl { background: #fff; padding: 32px 24px 40px; } .kennzahlen--rahmen .kennzahl { padding: 32px 28px; } .kennzahl__wert { font-family: var(--schrift-ueberschrift); font-size: 46px; line-height: 1; color: var(--marke); margin-bottom: 10px; } .kennzahl__text { font-size: 15px; color: var(--gedaempft); } .kennzahlen--rahmen .kennzahl__wert { font-size: 34px; margin-bottom: 8px; } /* Kennzahlen auf dunklem Grund (Fallbeispiel-Kopf) */ .kennzahlen--dunkel { background: rgba(255, 255, 255, .16); border-top-color: rgba(255, 255, 255, .16); } .kennzahlen--dunkel .kennzahl { background: var(--marke); padding: 28px 24px 0; } .kennzahlen--dunkel .kennzahl__wert { color: var(--akzent); font-size: 52px; margin-bottom: 8px; } .kennzahlen--dunkel .kennzahl__text { color: rgba(255, 255, 255, .75); font-size: 15.5px; } /* Kennzahlen im Fließtext (ohne Trennlinien) */ .kennzahlenreihe { display: flex; flex-wrap: wrap; gap: 44px; } .kennzahlenreihe .kennzahl { background: none; padding: 0; } .kennzahlenreihe .kennzahl__wert { font-size: 38px; } .kennzahlenreihe .kennzahl__text { font-size: 14.5px; } .prozess { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .prozess__schritt h3 { font-size: 20px; color: var(--marke); margin-bottom: 10px; } .prozess__schritt p { font-size: 15.5px; color: var(--gedaempft); } .prozess__nummer { font-family: var(--schrift-ueberschrift); font-size: 44px; color: var(--sanft); line-height: 1; margin-bottom: 14px; } /* Merkmalsliste mit Trennlinien */ .merkmale { display: flex; flex-direction: column; gap: 18px; } .merkmal { border-bottom: 1px solid var(--linie); padding-bottom: 18px; } .merkmal:last-child { border-bottom: none; padding-bottom: 0; } .merkmal__titel { display: block; font: 600 16px/1.4 var(--schrift-text); } .merkmal__text { font-size: 15px; color: var(--gedaempft); } /* Liste mit Akzentkante */ .akzentliste { display: flex; flex-direction: column; gap: 24px; } .akzentliste__punkt { border-left: 2px solid var(--sanft); padding-left: 22px; } .akzentliste__punkt h3 { font-size: 21px; color: var(--marke); margin-bottom: 8px; } .akzentliste__punkt p { font-size: 16px; color: var(--gedaempft); } /* Punkteliste mit Häkchen */ .punkte { display: flex; flex-direction: column; gap: 10px; list-style: none; } .punkte li { font-size: 16px; color: var(--tinte); display: flex; gap: 12px; align-items: flex-start; } .punkte li::before { content: ''; flex: none; margin-top: 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--akzent); box-shadow: 0 0 0 3px var(--sanft); } .abschnitt--marke .punkte li, .abschnitt--tief .punkte li { color: rgba(255, 255, 255, .85); } /* Rasterblock „Warum wir" */ .warum { display: grid; grid-template-columns: 1fr 1fr; gap: 32px 40px; } .warum__punkt { border-top: 1px solid var(--band-linie); padding-top: 20px; } .warum__punkt h4 { font-size: 20px; margin-bottom: 8px; } .warum__punkt p { font-size: 15.5px; color: var(--band-sub); } /* --------------------------------------------------------------------- 12. Teaser, Beitragskarten, Zitate --------------------------------------------------------------------- */ .referenz-teaser { display: grid; grid-template-columns: 1.15fr .85fr; border: 1px solid var(--linie); border-radius: var(--radius-gross); overflow: hidden; color: var(--tinte); transition: box-shadow .2s ease; } .referenz-teaser:hover { box-shadow: 0 28px 52px -26px rgba(0, 43, 73, .32); color: var(--tinte); } .referenz-teaser__text { padding: 52px 56px; } .referenz-teaser h3 { font-size: 34px; margin-bottom: 16px; color: var(--marke); } .referenz-teaser p { font-size: 17px; color: var(--gedaempft); margin-bottom: 32px; max-width: 460px; } .referenz-teaser__bild { min-height: 380px; border-radius: 0; border: none; } .beitragskarte { display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; color: var(--tinte); transition: box-shadow .2s ease, transform .2s ease; } .beitragskarte:hover { box-shadow: 0 22px 40px -22px rgba(0, 43, 73, .28); color: var(--tinte); transform: translateY(-3px); } .beitragskarte__bild { aspect-ratio: 16/9; border-radius: 0; border: none; border-bottom: 1px solid var(--linie); } .beitragskarte__inhalt { padding: 28px 28px 32px; display: flex; flex-direction: column; flex: 1; } .beitragskarte__meta { font: 500 13px/1 var(--schrift-text); color: var(--gedaempft); margin-bottom: 14px; } .beitragskarte h3 { font-size: 21px; margin-bottom: 12px; color: var(--marke); } .beitragskarte p { font-size: 15.5px; color: var(--gedaempft); flex: 1; } /* Galerie */ .galerie__eintrag { margin: 0; display: flex; flex-direction: column; gap: 12px; } .galerie__bild { border-radius: var(--radius); } .galerie__text { font-size: 14.5px; color: var(--gedaempft); } .galerie__video { position: relative; display: block; border-radius: var(--radius); overflow: hidden; } .galerie__video::after { content: ''; position: absolute; inset: 0; background: rgba(0, 43, 73, .25); transition: background .2s ease; } .galerie__video:hover::after { background: rgba(0, 43, 73, .1); } .galerie__abspielen { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 30px; color: #fff; text-shadow: 0 2px 12px rgba(0, 43, 73, .6); } .zitat { background: var(--sanft); border-radius: var(--radius); padding: 36px 34px; } .zitat__text { font-family: var(--schrift-ueberschrift); font-size: 23px; line-height: 1.4; color: var(--marke); /* Kein margin-bottom: Der Abstand zur Namenszeile kommt aus dem Trennstrich darunter, sonst addieren sich beide Werte. */ margin-bottom: 0; } /* Die Namenszeile steht in kleiner Schrift direkt unter einem deutlich größeren Zitat und ging dort optisch unter. Ein feiner Strich mit Luft darüber und darunter setzt sie sichtbar ab. */ .zitat figcaption { margin-top: 26px; padding-top: 20px; border-top: 1px solid rgba(0, 61, 104, .18); } .zitat__person { font: 600 15px/1.4 var(--schrift-text); color: var(--marke); display: block; } .zitat__rolle { font-size: 14.5px; color: var(--marke); opacity: .7; display: block; margin-top: 2px; } /* Wechselnde Text-Bild-Blöcke (Leistungsübersicht) */ .textbild { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; background: var(--flaeche); border-radius: var(--radius-gross); padding: 52px 56px; } .textbild h2 { font-size: 36px; margin-bottom: 16px; color: var(--marke); } .textbild p { font-size: 17px; color: var(--gedaempft); margin-bottom: 26px; } .textbild__bild { order: 2; } .textbild--ohnebild { grid-template-columns: 1fr; } /* Seitenkopf ohne Bild: eine Spalte statt zwei */ .seitenkopf--ohnebild .seitenkopf__innen { grid-template-columns: 1fr; } .textbild--gedreht .textbild__bild { order: -1; } /* CTA-Band */ .cta-band { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px; } .cta-band h2 { font-size: 42px; margin-bottom: 14px; } .cta-band p { font-size: 18px; color: rgba(255, 255, 255, .75); } .cta-band__text { max-width: 640px; } .cta-band__aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; } .cta-band__telefon { color: #fff; font: 500 17px/1 var(--schrift-text); } .cta-band__telefon:hover { color: var(--akzent); } .cta-band--knapp h2 { font-size: 36px; max-width: 640px; margin-bottom: 0; } /* Kopfzeile eines Abschnitts mit Aktion rechts */ .abschnittskopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 52px; } .abschnittskopf__text { max-width: 640px; } .abschnittskopf h2 { font-size: 44px; margin-bottom: 16px; } .abschnittskopf p { font-size: 18px; color: var(--gedaempft); } /* --------------------------------------------------------------------- 13. Brotkrumen, Blättern, Stellen, Team --------------------------------------------------------------------- */ .brotkrumen { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font: 500 14px/1 var(--schrift-text); color: var(--gedaempft); margin-bottom: 24px; list-style: none; } .brotkrumen li { display: flex; align-items: center; gap: 10px; } .brotkrumen li + li::before { content: '/'; opacity: .5; } .brotkrumen a { color: var(--marke); } .brotkrumen [aria-current] { color: var(--gedaempft); } .seitenkopf .brotkrumen { color: rgba(255, 255, 255, .6); } .seitenkopf .brotkrumen a { color: rgba(255, 255, 255, .7); } .seitenkopf .brotkrumen a:hover { color: var(--akzent); } .seitenkopf .brotkrumen [aria-current] { color: var(--akzent); } .blaettern { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; margin-top: 56px; } .blaettern a, .blaettern span { min-width: 46px; height: 46px; padding: 0 14px; border-radius: 999px; border: 1.5px solid var(--linie); display: inline-flex; align-items: center; justify-content: center; font: 500 15px/1 var(--schrift-text); color: var(--marke); } .blaettern a:hover { border-color: var(--marke); background: var(--flaeche); } .blaettern [aria-current="page"] { background: var(--marke); border-color: var(--marke); color: #fff; } .blaettern .blaettern__luecke { border: none; color: var(--gedaempft); } .stelle { display: grid; grid-template-columns: 1.6fr 1fr 1fr auto; gap: 24px; align-items: center; border: 1px solid var(--linie); border-radius: 18px; padding: 28px 32px; color: var(--tinte); transition: border-color .18s ease, background .18s ease; } .stelle:hover { border-color: var(--marke); background: var(--flaeche); color: var(--tinte); } .stelle h3 { font-size: 24px; color: var(--marke); } .stelle span { font-size: 15.5px; color: var(--gedaempft); } .stelle__aktion { padding: 9px 18px; border-radius: 999px; background: var(--sanft); color: var(--marke); font: 600 14.5px/1 var(--schrift-text); white-space: nowrap; } .person__bild { aspect-ratio: 1/1; border-radius: var(--radius); background-color: #fff; margin-bottom: 18px; } .person h3 { font-size: 20px; color: var(--marke); margin-bottom: 4px; } .person span { font-size: 15px; color: var(--gedaempft); } /* Lexikon */ .lexikon-navigation { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; } .lexikon-navigation a { width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--linie); display: inline-flex; align-items: center; justify-content: center; font: 600 16px/1 var(--schrift-text); color: var(--marke); } .lexikon-navigation a:hover { background: var(--sanft); } .lexikon-gruppe { margin-bottom: 48px; scroll-margin-top: 120px; } .lexikon-gruppe__buchstabe { font-family: var(--schrift-ueberschrift); font-size: 40px; color: var(--marke); border-bottom: 1px solid var(--linie); padding-bottom: 12px; margin-bottom: 24px; } .lexikon-eintrag { display: block; padding: 20px 0; border-bottom: 1px solid var(--linie); color: var(--tinte); } .lexikon-eintrag:hover { color: var(--tinte); } .lexikon-eintrag:hover h3 { color: var(--cta); } .lexikon-eintrag h3 { font-size: 21px; color: var(--marke); margin-bottom: 6px; } .lexikon-eintrag p { font-size: 15.5px; color: var(--gedaempft); } /* Häufige Fragen, native
, funktioniert ohne JavaScript */ .faq-eintrag { border: 1px solid var(--linie); border-radius: 16px; background: #fff; overflow: hidden; } .faq-eintrag summary { list-style: none; cursor: pointer; padding: 24px 28px; font: 600 19px/1.4 var(--schrift-ueberschrift); color: var(--marke); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .faq-eintrag summary::-webkit-details-marker { display: none; } .faq-eintrag summary::after { content: '+'; flex: none; font: 400 24px/1 var(--schrift-text); color: var(--cta); transition: transform .2s ease; } .faq-eintrag[open] summary::after { content: '-'; } .faq-eintrag summary:hover { background: var(--flaeche); } .faq-eintrag__antwort { padding: 0 28px 26px; font-size: 16.5px; } .faq-eintrag__antwort > *:first-child { margin-top: 0; } /* Definitionsliste, Grundlage der Grounding-Seite */ .faktenliste { margin: 0; } .faktenliste > div { display: grid; grid-template-columns: 260px 1fr; gap: 20px; padding: 16px 0; border-bottom: 1px solid var(--linie); } .faktenliste dt { font-weight: 600; color: var(--marke); margin: 0; } .faktenliste dd { margin: 0; color: var(--tinte); } .zeitstempel { font-size: 14.5px; color: var(--gedaempft); display: flex; flex-wrap: wrap; gap: 20px; } /* --------------------------------------------------------------------- 14. Formulare --------------------------------------------------------------------- */ .formular { display: flex; flex-direction: column; gap: 22px; } .formular__paar { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; } /* Breite Variante über die volle Seitenbreite, etwa unter Stellenanzeigen. Zwei Spalten, damit einzelne Eingabezeilen nicht unlesbar lang werden. Alles, was Platz braucht, geht über beide Spalten. */ .formular--breit { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; } .formular--breit > .formular__paar, .formular--breit > .feld--voll, .formular--breit > .einwilligung, .formular--breit > .knopfreihe, .formular--breit > .honigtopf { grid-column: 1 / -1; } /* Zustimmungstext bleibt lesbar kurz, auch wenn die Spalte breit ist */ .formular--breit > .einwilligung { max-width: 760px; } /* Dateiauswahl und Anschreiben stehen untereinander über die volle Breite. Nebeneinander bliebe unter dem kürzeren der beiden eine Lücke. */ .feld { display: flex; flex-direction: column; gap: 8px; } .feld__beschriftung { font: 500 15px/1 var(--schrift-text); color: var(--marke); } .feld input[type="text"], .feld input[type="email"], .feld input[type="tel"], .feld input[type="password"], .feld input[type="url"], .feld input[type="date"], .feld input[type="datetime-local"], .feld input[type="number"], .feld select { height: 52px; padding: 0 18px; border: 1px solid var(--linie); border-radius: 12px; font: 400 16px/1 var(--schrift-text); color: var(--tinte); background: var(--flaeche); outline: none; width: 100%; transition: border-color .15s ease, background .15s ease; } .feld textarea { padding: 16px 18px; border: 1px solid var(--linie); border-radius: 12px; font: 400 16px/1.6 var(--schrift-text); color: var(--tinte); background: var(--flaeche); outline: none; resize: vertical; width: 100%; min-height: 140px; } .feld input:focus, .feld textarea:focus, .feld select:focus { border-color: var(--marke); background: #fff; } /* Steht das Formular auf grauem Grund, hätten die Felder dieselbe Farbe wie der Abschnitt und wären kaum zu erkennen. Dort also Weiß. */ .abschnitt--flaeche .formular .feld input, .abschnitt--flaeche .formular .feld select, .abschnitt--flaeche .formular .feld textarea { background: #fff; } .feld--fehler input, .feld--fehler textarea, .feld--fehler select { border-color: var(--cta); } .feld__fehler { font-size: 14.5px; color: var(--cta); } /* Dateiauswahl. Das native Feld liegt durchsichtig über der Fläche und bleibt voll funktionsfähig: Klick, Tastatur und das Ziehen von Dateien erledigt weiter der Browser, nur das Aussehen kommt von uns. */ .dateifeld { position: relative; } .dateifeld__eingabe { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; } .dateifeld__flaeche { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 24px; text-align: center; border: 1.5px dashed var(--linie); border-radius: 12px; background: #fff; transition: border-color .15s ease, background .15s ease; } .dateifeld__knopf { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 999px; border: 1.5px solid var(--marke); font: 500 15px/1 var(--schrift-text); color: var(--marke); transition: background .15s ease; } .dateifeld__knopf svg { width: 17px; height: 17px; flex: none; } .dateifeld__text { font-size: 15px; color: var(--gedaempft); } .dateifeld__formate { font-size: 13.5px; color: var(--gedaempft); } .dateifeld:hover .dateifeld__flaeche { border-color: var(--marke); background: var(--flaeche); } .dateifeld:hover .dateifeld__knopf { background: var(--sanft); } .dateifeld__eingabe:focus-visible + .dateifeld__flaeche { outline: 3px solid var(--cta); outline-offset: 3px; border-color: var(--marke); } .feld--fehler .dateifeld__flaeche { border-color: var(--cta); } /* Liste der gewählten Dateien, wird per JavaScript gefüllt. Ohne JavaScript bleibt sie leer und damit unsichtbar. */ .dateifeld__liste { list-style: none; display: flex; flex-direction: column; gap: 8px; } .dateifeld__liste:empty { display: none; } .dateifeld__liste li { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border: 1px solid var(--linie); border-radius: 10px; background: #fff; font-size: 14.5px; } .dateifeld__name { font-weight: 500; color: var(--marke); overflow-wrap: anywhere; } .dateifeld__groesse { margin-left: auto; color: var(--gedaempft); font-size: 13.5px; flex: none; } /* Einzelne Datei wieder entfernen */ .dateifeld__loeschen { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; margin: -6px -6px -6px 4px; border: 0; border-radius: 9px; background: none; color: var(--gedaempft); cursor: pointer; transition: background .15s ease, color .15s ease; } .dateifeld__loeschen svg { width: 18px; height: 18px; } .dateifeld__loeschen:hover { background: rgba(210, 74, 75, .1); color: var(--cta); } .auswahlpillen { display: flex; flex-wrap: wrap; gap: 10px; } .auswahlpille { position: relative; padding: 10px 18px; border-radius: 999px; border: 1.5px solid var(--linie); font: 500 15px/1 var(--schrift-text); color: var(--marke); cursor: pointer; background: var(--flaeche); transition: border-color .15s ease, background .15s ease; } .auswahlpille:hover { border-color: var(--marke); } .auswahlpille input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .auswahlpille:has(input:checked) { border-color: var(--marke); background: var(--sanft); } .auswahlpille:has(input:focus-visible) { outline: 3px solid var(--cta); outline-offset: 2px; } .einwilligung { display: flex; gap: 12px; align-items: flex-start; font-size: 14.5px; color: var(--gedaempft); } .einwilligung input { margin-top: 5px; width: 18px; height: 18px; accent-color: #003D68; flex: none; } .einwilligung a { text-decoration: underline; text-underline-offset: 2px; } /* Spamschutz-Widget (CaptchaMe), nur Abstand und Breite, das Aussehen bringt der Anbieter mit. Reserviert etwas Höhe, damit beim Nachladen nichts springt (Layout Shift). */ .captchame { max-width: 100%; min-height: 74px; } /* Honigtopf, für Menschen unsichtbar, für Bots verlockend */ .honigtopf { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .meldung { padding: 18px 22px; border-radius: 14px; font: 500 16px/1.5 var(--schrift-text); } .meldung--erfolg { background: var(--sanft); color: var(--marke); } .meldung--fehler { background: #FCE9E9; color: #8E2224; } .meldung--hinweis { background: var(--flaeche); color: var(--marke); } /* Kontaktkarte */ .kontaktkarte { background: var(--marke); color: #fff; border-radius: var(--radius-gross); padding: 40px 36px; } .kontaktkarte h3 { font-size: 26px; margin-bottom: 22px; } .kontaktkarte__gruppe + .kontaktkarte__gruppe { margin-top: 18px; } .kontaktkarte__label { display: block; font-size: 14px; color: var(--akzent); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; } /* Nur echte Verweise einfärben. Schaltflächen bringen ihre eigenen Hover-Farben mit, sonst würde die Schrift auf rotem Grund grün. */ .kontaktkarte a:not(.knopf) { font: 500 19px/1.4 var(--schrift-text); color: #fff; } .kontaktkarte a:not(.knopf):hover { color: var(--akzent); } .kontaktkarte span.wert { font-size: 17px; color: rgba(255, 255, 255, .85); line-height: 1.6; } /* Schaltfläche am Fuß der Karte, abgesetzt von den Angaben darüber */ .kontaktkarte__aktion { width: 100%; margin-top: 30px; } /* Suche */ .suchfeld { display: flex; gap: 12px; max-width: 620px; } .suchfeld input { flex: 1; } /* --------------------------------------------------------------------- 15. Fußbereich --------------------------------------------------------------------- */ .fuss { background: var(--marke); color: #fff; padding: 72px 0 0; } .fuss__raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 56px; } .fuss img { height: 40px; width: auto; margin-bottom: 24px; } /* Gestapeltes Logo braucht mehr Höhe als die Querfassung */ .fuss__logo--stapel { height: 96px; margin-bottom: 20px; } .fuss p { font-size: 15.5px; color: rgba(255, 255, 255, .72); line-height: 1.8; } .fuss p + p { margin-top: 14px; } .fuss h4 { font: 600 14px/1 var(--schrift-text); letter-spacing: .12em; text-transform: uppercase; color: var(--akzent); margin-bottom: 20px; } .fuss__liste { display: flex; flex-direction: column; gap: 12px; list-style: none; } .fuss a { color: rgba(255, 255, 255, .78); font-size: 15.5px; } .fuss a:hover { color: var(--akzent); } .fuss p a { color: #fff; } .fuss__unten { border-top: 1px solid rgba(255, 255, 255, .14); padding: 24px 0 36px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; } .fuss__unten span { font-size: 14px; color: rgba(255, 255, 255, .55); } .fuss__sozial { display: flex; gap: 10px; } .fuss__sozial a { width: 38px; height: 38px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .28); display: flex; align-items: center; justify-content: center; font: 600 13px/1 var(--schrift-text); color: #fff; } .fuss__sozial a:hover { border-color: var(--akzent); color: var(--akzent); } /* --------------------------------------------------------------------- 16. Umbrüche --------------------------------------------------------------------- */ /* --------------------------------------------------------------------- Cookie-Hinweis als Lichtkasten --------------------------------------------------------------------- */ .einwilligung-schicht { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 43, 73, .62); overflow-y: auto; } .einwilligung-kasten { background: #fff; border-radius: var(--radius-gross); box-shadow: var(--schatten-menue); padding: 36px 34px; width: 100%; max-width: 560px; margin: auto; } .einwilligung__titel { font-size: 26px; color: var(--marke); margin-bottom: 14px; } .einwilligung__text { color: var(--gedaempft); font-size: 16px; margin-bottom: 22px; } .einwilligung__details { margin-bottom: 22px; } .einwilligung__details > summary { cursor: pointer; font: 500 15px/1 var(--schrift-text); color: var(--marke); padding: 10px 0; } .einwilligung__kategorie { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-top: 1px solid var(--linie); font-size: 14.5px; } .einwilligung__kategorie input { margin-top: 3px; width: 18px; height: 18px; flex: none; accent-color: #003D68; } .einwilligung__kategorie strong { display: block; color: var(--marke); font-weight: 600; } .einwilligung__beschreibung { display: block; color: var(--gedaempft); margin-top: 3px; } .einwilligung__marke { display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 999px; background: var(--flaeche); color: var(--gedaempft); font: 400 12px/1.5 var(--schrift-text); } .einwilligung__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; } .einwilligung__knoepfe .knopf { flex: 1 1 auto; } .einwilligung__rechtliches { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--linie); font-size: 13.5px; color: var(--gedaempft); display: flex; gap: 10px; flex-wrap: wrap; } .einwilligung__rechtliches a { color: var(--gedaempft); text-decoration: underline; text-underline-offset: 2px; } .einwilligung__rechtliches a:hover { color: var(--cta); } /* Aufruf der Einstellungen oben in der Datenschutzerklärung */ .einwilligung__aufruf { margin-bottom: 28px; padding: 14px 18px; background: var(--flaeche); border-radius: 12px; font-size: 15px; } /* Solange der Kasten offen ist, wird dahinter nicht gescrollt */ body.einwilligung-offen { overflow: hidden; } @media (max-width: 640px) { .einwilligung-kasten { padding: 26px 22px; } .einwilligung__titel { font-size: 22px; } .einwilligung__knoepfe .knopf { flex: 1 1 100%; } } @media (max-width: 1180px) { .hero-split h1 { font-size: 56px; } .hero-zentriert h1 { font-size: 60px; } .seitenkopf h1 { font-size: 46px; } .abschnittskopf h2, .ueberschrift-m { font-size: 38px; } .referenz-teaser__text { padding: 40px 40px; } .textbild { padding: 44px 40px; gap: 40px; } } /* Ab hier: kompakter Kopf mit Burger-Menü (entspricht narrow < 1120 im Entwurf) */ @media (max-width: 1120px) { .kopf__innen { height: 72px; padding-inline: 20px; justify-content: space-between; } .kopf__nav { display: none; } .kopf__logo img { height: 38px; } .kopf__burger { display: flex; } .kopf__aktionen .knopf--umriss { display: none; } .kopf__aktionen .knopf--cta { padding: 12px 20px; } .kopf__leiste { position: relative; } } @media (max-width: 980px) { :root { --rand: 24px; } .abschnitt { padding-block: 72px; } .abschnitt--eng, .abschnitt--knapp { padding-block: 60px; } .hero-split__innen { grid-template-columns: 1fr; gap: 40px; min-height: 0; } .hero-split__text { padding: 64px 0 0; } .hero-split__bild { padding: 0 0 64px; } .hero-split h1 { font-size: 44px; } .hero-zentriert__innen { padding-top: 72px; } .hero-zentriert h1 { font-size: 44px; } .hero-kennzahlen__innen { padding-top: 72px; } .hero-kennzahlen h1 { font-size: 44px; } .seitenkopf { padding: 64px 0 72px; } .seitenkopf h1, .seitenkopf--split h1 { font-size: 38px; } .seitenkopf--split .seitenkopf__innen { grid-template-columns: 1fr; gap: 36px; } .seitenkopf--split .seitenkopf__bild { display: none; } .raster--3, .raster--4 { grid-template-columns: repeat(2, 1fr); } .raster--6 { grid-template-columns: repeat(3, 1fr); } .zweispaltig, .zweispaltig--gleich, .zweispaltig--breit, .zweispaltig--schmal { grid-template-columns: 1fr; gap: 36px; } .kennzahlen { grid-template-columns: repeat(2, 1fr) !important; } .prozess { grid-template-columns: repeat(2, 1fr); } .warum { grid-template-columns: 1fr; gap: 24px; } .abschnittskopf { margin-bottom: 36px; } .abschnittskopf h2, .ueberschrift-m { font-size: 32px; } .ueberschrift-l { font-size: 36px; } .ueberschrift-s, .cta-band h2, .cta-band--knapp h2 { font-size: 28px; } .vorspann { font-size: 18px; } .referenz-teaser { grid-template-columns: 1fr; } .referenz-teaser__bild { min-height: 240px; order: -1; } .referenz-teaser h3 { font-size: 26px; } .textbild { grid-template-columns: 1fr; padding: 32px 28px; gap: 28px; } .textbild__bild, .textbild--gedreht .textbild__bild { order: -1; } .textbild h2 { font-size: 28px; } .nummernliste__zeile { grid-template-columns: 60px 1fr; gap: 12px 20px; padding: 24px 24px; } .nummernliste__zeile p { grid-column: 2; } .nummernliste__zeile .weiter { grid-column: 2; } .nummernliste__nummer { font-size: 30px; } .nummernliste__zeile h3 { font-size: 21px; } .stelle { grid-template-columns: 1fr; gap: 10px; padding: 24px; } .stelle h3 { font-size: 20px; } .stelle__aktion { justify-self: start; margin-top: 6px; } .formular__paar { grid-template-columns: 1fr; } .formular--breit { grid-template-columns: 1fr; } .fuss__raster { grid-template-columns: 1fr 1fr; gap: 36px; } .faktenliste > div { grid-template-columns: 1fr; gap: 6px; } } @media (max-width: 640px) { body { font-size: 16px; } .abschnitt { padding-block: 56px; } .raster--2, .raster--3, .raster--4 { grid-template-columns: 1fr; } .raster--6 { grid-template-columns: repeat(2, 1fr); } .kennzahlen { grid-template-columns: 1fr !important; } .prozess { grid-template-columns: 1fr; } .hero-split h1, .hero-zentriert h1, .hero-kennzahlen h1 { font-size: 34px; } .seitenkopf h1, .seitenkopf--split h1 { font-size: 30px; } .abschnittskopf h2, .ueberschrift-m, .ueberschrift-l { font-size: 27px; } .knopf { width: 100%; } .knopfreihe { gap: 12px; } .kopf__aktionen .knopf { width: auto; } .blaettern .knopf, .suchfeld .knopf { width: auto; } .referenz-teaser__text { padding: 28px 24px; } .karte, .karte--dunkel, .karte--flaeche { padding: 28px 24px; } .kontaktkarte { padding: 32px 26px; } .zitat { padding: 28px 24px; } .zitat__text { font-size: 20px; } .kennzahlenreihe { gap: 24px; } .fuss__raster { grid-template-columns: 1fr; gap: 32px; } .fuss { padding-top: 56px; } } /* --------------------------------------------------------------------- 17. Druck --------------------------------------------------------------------- */ @media print { .kopf, .fuss, .cta-band, .knopf, .blaettern { display: none !important; } body { font-size: 12pt; color: #000; } .abschnitt { padding-block: 12pt; } a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; } }