/* ===================================================================== Karriereseiten-Plattform · Stylesheet -------------------------------------------------------------------- Alle Farben kommen aus CSS-Variablen, die PHP aus der Mandanten- Konfiguration in den schreibt. Diese Datei enthält deshalb keine einzige feste Markenfarbe und funktioniert für jeden Kunden. Aufbau: 1. Schriften 2. Grundlagen und Raster 3. Kopf und Fuss 4. Hero 5. Inhaltsbausteine 6. Formular 7. Consent 8. Druck und Barrierefreiheit ===================================================================== */ /* ---------- 1. Schriften ------------------------------------------- Lokal eingebunden, keine Anfrage an Google. Fehlen die Dateien, greift die Systemschrift und die Seite bleibt benutzbar. Download der woff2-Dateien: siehe README, Abschnitt Schriften. ------------------------------------------------------------------- */ @font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow"; src: url("/assets/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Barlow Condensed"; src: url("/assets/fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { --schrift-text: "Barlow", "Helvetica Neue", Arial, sans-serif; --schrift-kopf: "Barlow Condensed", "Barlow", "Helvetica Neue", Arial, sans-serif; --breite: 1060px; --radius: 4px; --schatten: 0 1px 2px rgba(16,23,32,.06), 0 8px 24px rgba(16,23,32,.06); } /* ---------- 2. Grundlagen ----------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--grund); color: var(--ink); font-family: var(--schrift-text); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--primaer); text-underline-offset: 2px; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--primaer); outline-offset: 2px; } h1, h2, h3 { font-family: var(--schrift-kopf); font-weight: 700; line-height: 1.08; letter-spacing: .005em; text-wrap: balance; margin: 0 0 .5em; } h1 { font-size: clamp(34px, 7vw, 56px); } h2 { font-size: clamp(26px, 4.5vw, 34px); color: var(--primaer); } h3 { font-size: 21px; } p { margin: 0 0 1em; } .huelle { max-width: var(--breite); margin: 0 auto; padding: 0 20px; } .abschnitt { padding: 44px 20px; } .abschnitt-mitte { text-align: center; max-width: 640px; } .lede { font-size: 18px; max-width: 62ch; color: var(--ink_leise); } .lede-still { font-size: 16px; } .text { max-width: 720px; } .text h2 { margin-top: 1.6em; } .text h3 { margin-top: 1.3em; } .band { background: var(--flaeche); border-block: 1px solid var(--linie); } .skip { position: absolute; left: -9999px; background: var(--primaer); color: #fff; padding: 10px 16px; z-index: 100; } .skip:focus { left: 12px; top: 12px; } /* ---------- 3. Kopf und Fuss -------------------------------------- */ .kopf { background: var(--flaeche); border-bottom: 3px solid var(--primaer); } .kopf-inhalt { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 12px; flex-wrap: wrap; } .marke { text-decoration: none; display: block; } .marke-text { font-family: var(--schrift-kopf); font-size: 26px; color: var(--primaer); letter-spacing: .01em; } .kopf-tel { text-decoration: none; text-align: right; line-height: 1.25; } .kopf-tel-label { display: block; font-size: 13px; color: var(--ink_leise); } .kopf-tel strong { font-size: 19px; color: var(--primaer); } .fuss { background: var(--primaer); color: #fff; margin-top: 48px; } .fuss a { color: #fff; } .fuss-inhalt { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; padding-block: 30px; font-size: 15px; } .fuss-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; align-items: flex-start; } /* ---------- 4. Hero ----------------------------------------------- */ .hero { background: var(--primaer); color: #fff; padding: 56px 0 48px; } .hero-schlank { padding: 44px 0 36px; } .hero-bild { background-size: cover; background-position: center; } .hero-inhalt { max-width: 780px; } .hero h1 { color: #fff; margin-bottom: .35em; } .hero-ort { font-family: var(--schrift-kopf); font-size: 15px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; margin-bottom: 10px; } .hero-zeile { font-size: 19px; max-width: 54ch; opacity: .95; } .gehalt { display: inline-block; background: var(--akzent); color: var(--akzent_text); font-family: var(--schrift-kopf); font-size: 22px; padding: 6px 14px; border-radius: var(--radius); margin: 6px 0 4px; } .hero-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 22px; } .knopf-tel-gross { color: #fff; font-size: 17px; } /* ---------- 5. Inhaltsbausteine ----------------------------------- */ .fakten { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; } .fakten li { background: var(--flaeche); padding: 14px 16px; } .fakten span { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink_leise); margin-bottom: 2px; } .fakten strong { font-size: 16px; } .spalten { display: grid; gap: 34px; } @media (min-width: 800px) { .spalten { grid-template-columns: 1fr 1fr; gap: 48px; } } .liste { margin: 0 0 1em; padding: 0; list-style: none; } .liste li { position: relative; padding-left: 26px; margin-bottom: 9px; } .liste li::before { content: ""; position: absolute; left: 0; top: .62em; width: 12px; height: 3px; background: var(--akzent); border-radius: 2px; } .liste-still li::before { background: var(--linie); } .unterzeile { font-size: 15px; color: var(--ink_leise); margin-bottom: .4em; } .hinweis-stark { font-weight: 600; } .karten { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .karten li { background: var(--grund); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: var(--radius); padding: 14px 16px; font-size: 16px; } .stellenliste { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .stellenkarte { display: block; text-decoration: none; color: inherit; background: var(--grund); border: 1px solid var(--linie); border-radius: var(--radius); padding: 18px 20px; transition: border-color .15s ease, transform .15s ease; } .band .stellenkarte { background: var(--flaeche); } .stellenkarte:hover { border-color: var(--primaer); transform: translateY(-2px); } .stellenkarte strong { display: block; font-family: var(--schrift-kopf); font-size: 24px; color: var(--primaer); margin-bottom: 4px; } .stellenkarte span { display: block; font-size: 15px; color: var(--ink_leise); } .stellenkarte p { margin: 10px 0 0; font-size: 16px; } .stellenkarte-cta { margin-top: 12px; font-weight: 600; color: var(--primaer) !important; } .stellenliste-gross .stellenkarte { padding: 24px; } .haken { font-size: 46px; line-height: 1; color: var(--akzent); margin: 0 0 10px; } /* ---------- 6. Formular ------------------------------------------- */ .knopf { display: inline-block; text-decoration: none; cursor: pointer; font-family: var(--schrift-kopf); font-size: 20px; letter-spacing: .01em; background: var(--akzent); color: var(--akzent_text); border: 2px solid var(--akzent); border-radius: var(--radius); padding: 11px 24px; text-align: center; } .knopf:hover { filter: brightness(.94); } .knopf-gross { font-size: 23px; padding: 14px 30px; } .knopf-voll { width: 100%; margin-top: 8px; } .knopf-still { background: transparent; color: var(--ink); border-color: var(--linie); } .link-knopf { background: none; border: none; padding: 0; font: inherit; color: var(--primaer); text-decoration: underline; cursor: pointer; } .formular { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); padding: 22px; max-width: 660px; box-shadow: var(--schatten); } @media (min-width: 640px) { .formular { padding: 30px; } } .feld { margin-bottom: 20px; } .feld-paar { display: grid; gap: 0; } @media (min-width: 640px) { .feld-paar { grid-template-columns: 1fr 1fr; gap: 0 18px; } } .feld label, .feld legend { display: block; font-weight: 600; margin-bottom: 6px; font-size: 16px; } .pflicht { color: var(--primaer); } .optional { font-weight: 400; font-size: 14px; color: var(--ink_leise); } .feld input[type="text"], .feld input[type="tel"], .feld input[type="email"], .feld select, .feld textarea, .feld input[type="file"] { width: 100%; font: inherit; font-size: 17px; padding: 12px 13px; border: 2px solid var(--linie); border-radius: var(--radius); background: var(--flaeche); color: var(--ink); } .feld textarea { resize: vertical; min-height: 96px; } .feld input:focus, .feld select:focus, .feld textarea:focus { border-color: var(--primaer); } .feld [aria-invalid="true"] { border-color: #B3261E; } .feldhilfe { font-size: 14px; color: var(--ink_leise); margin: 6px 0 0; } .feldfehler { font-size: 14.5px; color: #B3261E; margin: 6px 0 0; font-weight: 600; } .feld-radio { border: none; margin: 0 0 20px; padding: 0; } .radios { display: flex; flex-wrap: wrap; gap: 10px; } .radio { display: inline-flex; align-items: center; gap: 8px; border: 2px solid var(--linie); border-radius: var(--radius); padding: 9px 16px; cursor: pointer; font-weight: 500; margin: 0; } .radio:has(input:checked) { border-color: var(--primaer); background: var(--grund); } .radio input { margin: 0; accent-color: var(--primaer); width: 18px; height: 18px; } .radio span { font-weight: 500; } .feld-check .check { display: flex; gap: 12px; align-items: flex-start; font-weight: 400; } .feld-check input { margin-top: 4px; width: 20px; height: 20px; accent-color: var(--primaer); flex: none; } .feld-check span { font-size: 15.5px; line-height: 1.5; } /* Honeypot: für Menschen unsichtbar, für Screenreader ausgeblendet, für einfache Bots aber ein ganz normales Feld. */ .hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; } .vertrauen { list-style: none; margin: 22px 0 0; padding: 0; font-size: 15px; color: var(--ink_leise); } .vertrauen li { position: relative; padding-left: 24px; margin-bottom: 7px; } .vertrauen li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--primaer); font-weight: 700; } .vertrauen-frei { margin-top: 32px; } .meldung { padding: 13px 16px; border-radius: var(--radius); border: 1px solid var(--linie); margin-bottom: 18px; font-weight: 600; } .meldung-fehler { border-color: #B3261E; color: #B3261E; background: #FDEDEC; } /* ---------- 7. Consent -------------------------------------------- */ .consent { position: fixed; inset: auto 0 0 0; z-index: 90; padding: 14px; display: flex; justify-content: center; } .consent-box { background: var(--flaeche); border: 1px solid var(--linie); border-radius: var(--radius); box-shadow: var(--schatten); padding: 18px 20px; max-width: 620px; width: 100%; } .consent-box p { margin: 0 0 8px; } .consent-text { font-size: 15px; color: var(--ink_leise); } .consent-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; } .consent-knoepfe .knopf { font-size: 17px; padding: 9px 18px; flex: 1 1 auto; } /* ---------- 8. Druck und Barrierefreiheit -------------------------- */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } } @media print { .kopf-tel, .consent, .knopf, .formular { display: none; } body { background: #fff; font-size: 11pt; } .hero { background: #fff; color: #000; } .hero h1 { color: #000; } } /* ---------- Freiwillige Zusatzfragen ------------------------------ Optisch abgesetzt, damit sofort klar ist: dieser Block ist kein Pflichtteil. Ein Bewerber, der es eilig hat, überspringt ihn. ------------------------------------------------------------------ */ .zusatzblock { background: var(--grund); border: 1px solid var(--linie); border-left: 3px solid var(--akzent); border-radius: var(--radius); padding: 18px 18px 2px; margin-bottom: 20px; } .zusatzblock-kopf { font-family: var(--schrift-kopf); font-size: 21px; font-weight: 700; margin: 0 0 14px; color: var(--primaer); } .zusatzblock-kopf span { display: block; font-family: var(--schrift-text); font-size: 14.5px; font-weight: 400; color: var(--ink_leise); margin-top: 2px; } .zusatzblock .feld:last-child { margin-bottom: 16px; }