/* ATZ Schulz – Design 2026. Erzeugt von scripts/phase6-design.php aus entwurf-2026/ – nicht von Hand ändern. */ figure { margin: 1em 40px; } /* ===== Tokens: CI ATZ Schulz (Navy, Nachtblau, Signalrot) ===== */ :root { --papier: #f6f7fa; --flaeche: #ffffff; --kuehl: #eceff5; --tinte: #18213f; --navy: #202b52; --nacht: #09162a; --rot: #ef3120; --leise: #4a5270; --linie: #d8dce7; --auf-rot: #ffffff; --auf-navy: #ffffff; --schatten: 0 18px 40px -24px rgba(9, 22, 42, .45); --ok: #1c7a45; --logo-filter: none; --schrift: 'Barlow', 'Segoe UI', system-ui, sans-serif; --titel: 'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', sans-serif; --breite: 1180px; --rand: clamp(16px, 4vw, 40px); --schraeg: -35deg; color-scheme: light; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --papier: #0a1122; --flaeche: #111a31; --kuehl: #0e1629; --tinte: #e8ebf4; --navy: #cfd6ec; --nacht: #050b18; --leise: #a7afc8; --linie: #243050; --schatten: 0 18px 40px -20px rgba(0, 0, 0, .7); --ok: #54c98a; --logo-filter: brightness(0) invert(1); color-scheme: dark; } } :root[data-theme="dark"] { --papier: #0a1122; --flaeche: #111a31; --kuehl: #0e1629; --tinte: #e8ebf4; --navy: #cfd6ec; --nacht: #050b18; --leise: #a7afc8; --linie: #243050; --schatten: 0 18px 40px -20px rgba(0, 0, 0, .7); --ok: #54c98a; --logo-filter: brightness(0) invert(1); color-scheme: dark; } /* ===== Grundlagen ===== */ * { box-sizing: border-box; } [hidden] { display: none !important; } html { scroll-behavior: smooth; scroll-padding-top: 88px; } body { margin: 0; background: var(--papier); color: var(--tinte); font: 400 17px/1.6 var(--schrift); overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-underline-offset: .2em; } :focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; } h1, h2, h3 { font-family: var(--titel); font-weight: 700; line-height: 1.02; letter-spacing: .005em; text-transform: uppercase; color: var(--navy); margin: 0; text-wrap: balance; } h2 { font-size: clamp(2.1rem, 4.6vw, 3.4rem); } h3 { font-size: 1.45rem; } p { margin: 0; } .sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .wrap { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); } .icon { width: 1.3em; height: 1.3em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .sprung { position: absolute; left: 16px; top: -80px; z-index: 50; padding: 12px 18px; background: var(--rot); color: var(--auf-rot); font-weight: 700; text-decoration: none; } .sprung:focus { top: 12px; } .num { font-variant-numeric: tabular-nums; } /* Vorzeile mit schrägem Balken – Leitmotiv aus der Diagonale im Logo */ .vorzeile { display: inline-flex; align-items: center; gap: 12px; font: 600 .95rem var(--titel); letter-spacing: .18em; text-transform: uppercase; color: var(--leise); } .vorzeile::before { content: ""; width: 34px; height: 6px; background: var(--rot); transform: skewX(var(--schraeg)); } /* Knöpfe */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: .55em; min-height: 52px; padding: 12px 26px; border: 2px solid var(--rot); background: var(--rot); color: var(--auf-rot); cursor: pointer; text-decoration: none; font: 700 1.2rem/1 var(--titel); letter-spacing: .07em; text-transform: uppercase; transition: transform .18s ease, background-color .18s, color .18s, border-color .18s; } .knopf:hover { transform: translateY(-2px); } .knopf.rand { background: transparent; color: var(--navy); border-color: var(--navy); } .knopf.rand:hover { background: var(--navy); color: var(--papier); } .knopf.klein { min-height: 42px; padding: 8px 16px; font-size: 1.05rem; } .knopf[disabled] { opacity: .45; cursor: not-allowed; transform: none; } /* Klären-Markierung für unbelegte/unklare Angaben (nur im Entwurf) */ .klaeren { display: inline-block; margin-left: .4em; padding: 1px 7px; border: 1px dashed var(--rot); color: var(--tinte); font: 600 .72rem/1.5 var(--schrift); letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; cursor: help; } /* ===== Kopf ===== */ .kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: color-mix(in srgb, var(--papier) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--linie); } .kopf-innen { display: flex; align-items: center; gap: 18px; min-height: 76px; } .logo { display: block; line-height: 0; flex: none; } .logo img { width: 92px; filter: var(--logo-filter); } .status { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--linie); background: var(--flaeche); font-size: .9rem; font-weight: 600; white-space: nowrap; } .status::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--leise); } .status.offen::before { background: var(--ok); box-shadow: 0 0 0 4px color-mix(in srgb, var(--ok) 25%, transparent); } .nav { margin-left: auto; display: none; gap: 26px; } .nav a { font: 600 1.08rem var(--titel); letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--navy); padding: 6px 0; border-bottom: 3px solid transparent; } .nav a:hover, .nav a[aria-current="true"] { border-bottom-color: var(--rot); } .kopf .knopf { margin-left: auto; } @media (min-width: 1000px) { .nav { display: flex; } .kopf .knopf { margin-left: 0; } } @media (max-width: 560px) { .status span.lang { display: none; } .kopf .knopf { padding-inline: 14px; } } /* ===== Spur (Scroll-Fortschritt) ===== */ .spur { position: fixed; left: max(8px, calc((100vw - var(--breite)) / 2 - 56px)); top: 0; bottom: 0; width: 16px; z-index: 5; pointer-events: none; display: none; } .spur svg { width: 100%; height: 100%; } .spur .bahn { stroke: var(--linie); } .spur .fuellung { stroke: var(--rot); } @media (min-width: 1320px) { .spur { display: block; } } /* ===== Bühne ===== */ .buehne { position: relative; overflow: hidden; padding-block: clamp(36px, 6vw, 72px) clamp(40px, 6vw, 80px); } .buehne-raster { display: grid; gap: 36px; align-items: center; } @media (min-width: 900px) { .buehne-raster { grid-template-columns: 1.05fr .95fr; gap: 48px; } } .buehne h1 { font-size: clamp(3rem, 8.2vw, 6.4rem); line-height: .9; margin-top: 14px; } .buehne h1 em { font-style: normal; color: var(--rot); } .buehne .unter { margin-top: 20px; font-size: 1.2rem; max-width: 36ch; color: var(--leise); } .buehne .aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } .nummer { display: flex; flex-direction: column; margin-top: 18px; font-size: .95rem; color: var(--leise); } .nummer strong { font: 700 1.9rem var(--titel); letter-spacing: .02em; color: var(--navy); } .foto-held { position: relative; } .foto-held img { width: 100%; aspect-ratio: 4 / 3.2; object-fit: cover; object-position: 30% 30%; clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); } .foto-held::after { content: ""; position: absolute; left: 1%; bottom: 12%; width: 18%; height: 14px; background: var(--rot); transform: skewX(var(--schraeg)); } .bildzeile { position: absolute; right: 0; bottom: -18px; padding: 10px 16px; background: var(--flaeche); box-shadow: var(--schatten); font-size: .95rem; } .bildzeile b { font-family: var(--titel); font-size: 1.15rem; letter-spacing: .04em; text-transform: uppercase; color: var(--navy); } /* Fakten */ .fakten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 0; margin-top: clamp(40px, 6vw, 64px); border-top: 1px solid var(--linie); } .fakt { padding: 20px 20px 4px 0; } .fakt + .fakt { padding-left: 20px; border-left: 1px solid var(--linie); } @media (max-width: 480px) { .fakt + .fakt { border-left: 0; padding-left: 0; border-top: 1px solid var(--linie); } } .fakt strong { display: block; font: 700 clamp(2.2rem, 4vw, 3rem)/1 var(--titel); color: var(--navy); } .fakt span { color: var(--leise); font-size: .98rem; } /* ===== Abschnitte ===== */ .abschnitt { padding-block: clamp(64px, 9vw, 120px); } .abschnitt.kuehl { background: var(--kuehl); } .abschnitt.dunkel { background: var(--nacht); --navy: #ffffff; --tinte: #e8ebf4; --leise: #b7bed4; --linie: #26324f; --flaeche: #111a31; color: var(--tinte); } .kopfzeile { display: grid; gap: 14px; margin-bottom: 40px; max-width: 760px; } .kopfzeile p { color: var(--leise); font-size: 1.12rem; } /* ===== Anliegen-Picker (Schritt 1 der Anfrage) ===== */ .picker { display: grid; gap: 28px; } @media (min-width: 980px) { .picker { grid-template-columns: 1fr 380px; align-items: start; } } .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); gap: 12px; } .chip { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 18px; min-height: 124px; background: var(--flaeche); border: 1px solid var(--linie); cursor: pointer; text-align: left; color: var(--tinte); font: inherit; transition: border-color .15s, transform .15s; } .chip:hover { border-color: var(--navy); transform: translateY(-2px); } .chip .icon { width: 34px; height: 34px; color: var(--rot); } .chip b { font: 700 1.25rem/1.05 var(--titel); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); } .chip small { color: var(--leise); font-size: .9rem; line-height: 1.35; } .chip[aria-pressed="true"] { border-color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot); } .chip[aria-pressed="true"]::after { content: ""; position: absolute; top: 14px; right: 14px; width: 22px; height: 22px; background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat; } .zettel { position: sticky; top: 100px; padding: 26px; background: var(--nacht); color: #fff; box-shadow: var(--schatten); } .zettel h3 { color: #fff; font-size: 1.6rem; } .schritte { display: flex; gap: 6px; margin: 16px 0 6px; padding: 0; list-style: none; } .schritte li { flex: 1; height: 6px; background: rgba(255, 255, 255, .18); transform: skewX(var(--schraeg)); } .schritte li.fertig { background: var(--rot); } .schritt-text { font-size: .92rem; color: #b7bed4; } .merkliste { margin: 18px 0; padding: 0; list-style: none; display: grid; gap: 8px; min-height: 48px; } .merkliste li { display: flex; justify-content: space-between; gap: 12px; padding-bottom: 8px; border-bottom: 1px dashed rgba(255, 255, 255, .22); } .merkliste .leer { color: #b7bed4; border: 0; } .merkliste span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; } .zettel .hinweis { font-size: .85rem; color: #b7bed4; margin-bottom: 18px; } .zettel .knopf { width: 100%; } /* ===== Leistungen ===== */ .leistungen { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); } .leistung { display: flex; align-items: flex-start; gap: 16px; padding: 22px; background: var(--flaeche); border: 0; color: var(--tinte); font: inherit; text-align: left; cursor: pointer; transition: background-color .15s; } .leistung:hover { background: var(--kuehl); } .leistung .icon { width: 32px; height: 32px; color: var(--rot); margin-top: 2px; } .leistung b { display: block; font: 700 1.3rem/1.1 var(--titel); letter-spacing: .03em; text-transform: uppercase; color: var(--navy); } .leistung span { display: block; margin-top: 4px; color: var(--leise); font-size: .95rem; line-height: 1.4; } .leistung .pfeil { margin-left: auto; width: 20px; height: 20px; color: var(--leise); flex: none; } /* Modal */ .modal { border: 0; padding: 0; width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); background: var(--flaeche); color: var(--tinte); box-shadow: 0 30px 80px rgba(0, 0, 0, .45); } .modal::backdrop { background: rgba(5, 11, 24, .72); } .modal-kopf { display: flex; align-items: center; gap: 14px; padding: 22px 24px; border-bottom: 1px solid var(--linie); } .modal-kopf .icon { width: 36px; height: 36px; color: var(--rot); } .modal-kopf h3 { font-size: 1.9rem; } .modal-zu { margin-left: auto; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--linie); background: none; color: var(--tinte); cursor: pointer; } .modal-inhalt { padding: 24px; display: grid; gap: 14px; overflow-y: auto; } .modal-inhalt ul { margin: 0; padding-left: 1.2em; } .modal-inhalt li::marker { color: var(--rot); } .modal-preis { padding: 14px 16px; background: var(--kuehl); display: flex; justify-content: space-between; gap: 12px; font-weight: 600; } .modal-fuss { display: flex; align-items: center; gap: 10px; padding: 16px 24px; border-top: 1px solid var(--linie); flex-wrap: wrap; } .modal-fuss .blaettern { display: flex; gap: 8px; margin-right: auto; } .modal-fuss .blaettern button { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--linie); background: none; color: var(--tinte); cursor: pointer; } .modal-fuss small { color: var(--leise); } /* ===== Preise (Reiter) ===== */ .reiter { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: -1px; } .reiter button { min-height: 48px; padding: 10px 18px; border: 1px solid var(--linie); border-bottom-color: transparent; background: none; color: var(--leise); font: 600 1.1rem var(--titel); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; } .reiter button[aria-selected="true"] { background: var(--flaeche); color: var(--navy); border-top: 4px solid var(--rot); } .tafel { background: var(--flaeche); border: 1px solid var(--linie); } .preis { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; padding: 16px 22px; border-bottom: 1px solid var(--linie); } .preis:last-child { border-bottom: 0; } .preis .betrag { font: 700 1.5rem var(--titel); font-variant-numeric: tabular-nums; color: var(--navy); white-space: nowrap; } .preis small { display: block; color: var(--leise); font-size: .9rem; } .merken { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--linie); background: none; color: var(--navy); cursor: pointer; } .merken[aria-pressed="true"] { background: var(--rot); border-color: var(--rot); color: #fff; } .preis-fuss { margin-top: 14px; color: var(--leise); font-size: .95rem; } /* ===== HU ===== */ .hu { display: grid; gap: 28px; } @media (min-width: 900px) { .hu { grid-template-columns: 1fr 1.2fr; align-items: center; } } .termine { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; } .termin { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 16px; padding: 16px 18px; background: rgba(255, 255, 255, .05); border: 1px solid var(--linie); } .termin.naechster { border-color: var(--rot); background: rgba(239, 49, 32, .1); } .termin .tag { font: 700 2.2rem/1 var(--titel); text-align: center; } .termin .tag small { display: block; font-size: .9rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; } .termin b { font: 700 1.3rem var(--titel); letter-spacing: .04em; text-transform: uppercase; } .termin .marke { font: 600 .8rem var(--schrift); letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; background: var(--rot); color: #fff; } /* ===== Chronik ===== */ .chronik-raster { display: grid; gap: 40px; } @media (min-width: 900px) { .chronik-raster { grid-template-columns: 1fr 1fr; align-items: start; } } .chronik { position: relative; display: grid; gap: 34px; padding-left: 48px; margin: 0; list-style: none; } .chronik svg { position: absolute; left: 0; top: 6px; width: 20px; height: calc(100% - 6px); } .chronik .bahn { stroke: var(--linie); } .chronik .gezogen { stroke: var(--rot); } .chronik time { font: 700 2.6rem/1 var(--titel); color: var(--rot); } .chronik h3 { margin: 6px 0 8px; } .chronik p { color: var(--leise); max-width: 46ch; } .inhaber { position: relative; } .inhaber img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .inhaber figcaption { margin-top: 14px; } .inhaber figcaption b { display: block; font: 700 1.6rem var(--titel); text-transform: uppercase; color: var(--navy); } /* ===== Bewertungen ===== */ .bew-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 30px; } .note { display: flex; align-items: baseline; gap: 14px; } .note strong { font: 700 clamp(4rem, 9vw, 6rem)/.9 var(--titel); color: var(--navy); } .sterne { display: flex; gap: 3px; color: var(--rot); } .sterne svg { width: 22px; height: 22px; fill: currentColor; } .bew-liste { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(min(86vw, 330px), 1fr); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 14px; margin: 0; list-style: none; padding-left: 0; } .bew { scroll-snap-align: start; padding: 24px; background: var(--flaeche); border: 1px solid var(--linie); display: grid; gap: 12px; align-content: start; } .bew p { font-size: 1.02rem; } .bew footer { display: flex; justify-content: space-between; gap: 10px; color: var(--leise); font-size: .92rem; } .bew footer b { color: var(--tinte); } .bew-steuer { display: flex; gap: 8px; } .bew-steuer button { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); cursor: pointer; } /* ===== Laden ===== */ .laden { display: grid; gap: 36px; } @media (min-width: 900px) { .laden { grid-template-columns: 1.1fr 1fr; align-items: center; } } .laden img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%); } .stichworte { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 26px; padding: 0; list-style: none; } .stichworte li { padding: 6px 12px; border: 1px solid var(--linie); background: var(--flaeche); font-size: .95rem; } /* ===== Ausbildung ===== */ .ausbildung { display: grid; gap: 30px; align-items: end; } @media (min-width: 800px) { .ausbildung { grid-template-columns: 1fr 320px; } } .ausbildung img { width: 100%; max-width: 320px; margin-inline: auto; margin-bottom: calc(-1 * clamp(64px, 9vw, 120px)); } /* ===== Kontakt ===== */ .kontakt { display: grid; gap: 36px; } @media (min-width: 980px) { .kontakt { grid-template-columns: 1.35fr 1fr; align-items: start; } } .formular { padding: clamp(22px, 3vw, 36px); background: var(--flaeche); border: 1px solid var(--linie); box-shadow: var(--schatten); } .formular fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 16px; } .formular legend { font: 700 1.6rem var(--titel); text-transform: uppercase; color: var(--navy); margin-bottom: 6px; } .fortschritt { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: s; } .fortschritt li { font-size: .85rem; color: var(--leise); } .fortschritt li::before { content: ""; display: block; height: 6px; margin-bottom: 8px; background: var(--linie); transform: skewX(var(--schraeg)); } .fortschritt li.fertig::before, .fortschritt li[aria-current="step"]::before { background: var(--rot); } .fortschritt li[aria-current="step"] { color: var(--tinte); font-weight: 700; } .feld { display: grid; gap: 6px; } .feld label { font-weight: 600; } .feld input, .feld select, .feld textarea { width: 100%; min-height: 50px; padding: 12px 14px; border: 2px solid color-mix(in srgb, var(--leise) 70%, transparent); background: var(--papier); color: var(--tinte); font: inherit; border-radius: 0; } .feld textarea { min-height: 130px; resize: vertical; } .feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--rot); outline-offset: 1px; border-color: var(--navy); } .feld [aria-invalid="true"] { border-color: var(--rot); } .fehler { color: var(--tinte); font-weight: 600; font-size: .92rem; } .fehler:not(:empty)::before { content: "! "; color: var(--rot); } .zwei { display: grid; gap: 16px; } @media (min-width: 620px) { .zwei { grid-template-columns: 1fr 1fr; } } .gewaehlt { display: flex; flex-wrap: wrap; gap: 8px; } .gewaehlt button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; min-height: 40px; border: 1px solid var(--linie); background: var(--papier); color: var(--tinte); font: inherit; font-size: .95rem; cursor: pointer; } .gewaehlt button[aria-pressed="true"] { border-color: var(--rot); box-shadow: inset 0 0 0 1px var(--rot); font-weight: 600; } .rueckruf { display: flex; flex-wrap: wrap; gap: 8px; } .formular-fuss { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; } .formular-fuss .knopf.rand { margin-right: auto; } .ds { font-size: .9rem; color: var(--leise); } .ds a { color: var(--tinte); } .danke { display: grid; gap: 12px; text-align: left; } .danke .icon { width: 48px; height: 48px; color: var(--ok); } .kanaele { display: grid; gap: 12px; } .kanal { display: flex; align-items: center; gap: 16px; padding: 18px 20px; background: var(--flaeche); border: 1px solid var(--linie); text-decoration: none; color: var(--tinte); } .kanal:hover { border-color: var(--navy); } .kanal .icon { width: 30px; height: 30px; color: var(--rot); } .kanal b { display: block; font: 700 1.35rem var(--titel); letter-spacing: .04em; color: var(--navy); } .kanal small { color: var(--leise); } .zeiten { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; margin: 0; padding: 20px; background: var(--flaeche); border: 1px solid var(--linie); } .zeiten dt { font-weight: 700; } .zeiten dd { margin: 0; font-variant-numeric: tabular-nums; } .zeiten dd.heute, .zeiten dt.heute { color: var(--rot); } /* ===== Fuß ===== */ .fuss { background: var(--nacht); color: #d4d9e8; padding-block: 56px 28px; } .fuss-raster { display: grid; gap: 30px; } @media (min-width: 800px) { .fuss-raster { grid-template-columns: 1.4fr 1fr 1fr; } } .fuss b { display: block; margin-bottom: 10px; font: 700 1.25rem var(--titel); letter-spacing: .06em; text-transform: uppercase; color: #fff; } .fuss a { color: #fff; } .fuss ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; } .fuss .klein { margin-top: 34px; padding-top: 18px; border-top: 1px solid #26324f; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; } .fuss-logo { width: 90px; filter: brightness(0) invert(1); margin-bottom: 14px; } .fuss button.linkknopf { padding: 0; border: 0; background: none; color: #fff; font: inherit; text-decoration: underline; cursor: pointer; } /* Entwurfs-Hinweis */ .entwurf { background: var(--kuehl); border-bottom: 1px solid var(--linie); font-size: .9rem; } .entwurf .wrap { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; padding-block: 8px; } .entwurf button { padding: 4px 10px; border: 1px solid var(--linie); background: var(--flaeche); color: var(--tinte); font: inherit; cursor: pointer; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } /* =================================================================== Runde 3: lebendiger, freundlicher, stärkere Kontraste und Unterteilungen =================================================================== */ :root { --papier: #fbf9f6; --kuehl: #efe8de; --flaeche: #ffffff; --linie: #ddd5c9; --leise: #454d69; --rot-text: #c8141a; /* Rot für kleine Schrift (5,6 : 1 auf Weiß) */ --rot-knopf: #d3181d; /* Knopf-Rot mit weißer Schrift (5,0 : 1) */ --logo-fuell: #202b52; --r: 18px; --r-klein: 12px; --schatten: 0 22px 44px -26px rgba(32, 43, 82, .45); --schatten-weich: 0 10px 28px -18px rgba(32, 43, 82, .35); --kante: clamp(28px, 4.5vw, 64px); /* Höhe der schrägen Abschnittskanten */ } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kuehl: #0f1830; --linie: #2a3656; --rot-text: #ff6a5f; --logo-fuell: #ffffff; --papier: #0a1122; } } :root[data-theme="dark"] { --kuehl: #0f1830; --linie: #2a3656; --rot-text: #ff6a5f; --logo-fuell: #ffffff; --papier: #0a1122; } /* ---------- Knöpfe: rund, freundlich ---------- */ .knopf { border-radius: 999px; background: var(--rot-knopf); border-color: var(--rot-knopf); box-shadow: 0 10px 22px -12px rgba(211, 24, 29, .7); } .knopf:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 14px 26px -12px rgba(211, 24, 29, .8); } .knopf.rand { box-shadow: none; } .knopf.hell { background: #fff; border-color: #fff; color: #09162a; box-shadow: none; } .knopf.hell:hover { background: transparent; color: #fff; } .knopf.rand-hell { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; box-shadow: none; } .knopf.rand-hell:hover { background: #fff; color: #09162a; } :focus-visible { outline-color: var(--rot-knopf); } /* ---------- Kopf mit Logo + Auto ---------- */ .kopf { border-bottom: 0; box-shadow: 0 1px 0 var(--linie), 0 12px 24px -22px rgba(9, 22, 42, .5); } .logo { display: flex; align-items: flex-end; gap: 4px; text-decoration: none; } .logo .logo-atz { width: 84px; height: 57px; } .logo .logo-auto { width: 62px; height: 51px; margin-bottom: -4px; transform-origin: 60% 90%; transition: transform .3s cubic-bezier(.3, 1.6, .5, 1); } .logo:hover .logo-auto { transform: rotate(-6deg) translateY(-3px); } @media (max-width: 420px) { .logo .logo-atz { width: 66px; height: 45px; } .logo .logo-auto { width: 46px; height: 38px; } .status { padding: 5px 9px; font-size: .82rem; } } .status { border-radius: 999px; } .sprache { border-radius: 999px; overflow: hidden; } .nav a { border-bottom-width: 4px; } /* ---------- Bühne: Slider, dramatisch, schräg, überlagert ---------- */ .buehne { position: relative; padding: 0 0 12px; overflow: hidden; background: linear-gradient(#09162a calc(100% - 72px), var(--papier) 0); color: #fff; isolation: isolate; } .buehne .fakt { color: var(--tinte); } .buehne .wasser { position: absolute; right: -2vw; bottom: 40px; z-index: 0; font: 700 italic clamp(10rem, 34vw, 30rem)/.8 var(--titel); letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px rgba(255, 255, 255, .07); pointer-events: none; user-select: none; } .slides { position: relative; z-index: 1; display: grid; } .slide { grid-area: 1 / 1; position: relative; display: grid; min-height: clamp(560px, 82vh, 720px); visibility: hidden; opacity: 0; transition: opacity .6s ease, visibility 0s linear .6s; } .slide.aktiv { visibility: visible; opacity: 1; transition: opacity .6s ease; z-index: 2; } .slide-foto { position: absolute; inset: 0 0 0 auto; width: 58%; margin: 0; clip-path: polygon(22% 0, 100% 0, 100% 100%, 0 100%); overflow: hidden; } .slide-foto img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12) translateX(4%); transition: transform 7s cubic-bezier(.2, .6, .3, 1); } .slide.aktiv .slide-foto img { transform: scale(1.02) translateX(0); } .slide-foto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9, 22, 42, .55), rgba(9, 22, 42, 0) 45%); } /* schräge Farbbalken, die über Foto und Text laufen */ .slide .balken { position: absolute; z-index: 3; pointer-events: none; transform: skewX(var(--schraeg)); } .slide .balken.b1 { left: 38%; top: -10%; width: 34px; height: 120%; background: var(--rot); opacity: .95; } .slide .balken.b2 { left: calc(38% + 52px); top: -10%; width: 10px; height: 120%; background: #fff; opacity: .9; } .slide .balken.b3 { right: 6%; bottom: 14%; width: 26%; height: 18px; background: var(--rot); } .slide.aktiv .balken { animation: balken-rein .9s cubic-bezier(.2, .8, .2, 1) both; } .slide.aktiv .balken.b2 { animation-delay: .08s; } .slide.aktiv .balken.b3 { animation-name: balken-quer; animation-delay: .25s; } @keyframes balken-rein { from { translate: 0 -40%; opacity: 0; } } @keyframes balken-quer { from { translate: 60% 0; opacity: 0; } } .slide-text { position: relative; z-index: 4; align-self: center; padding-block: 64px 150px; } .slide-text > * { max-width: min(560px, 44vw); } .slide.aktiv .slide-text > * { animation: text-rein .7s cubic-bezier(.2, .8, .2, 1) both; } .slide.aktiv .slide-text > :nth-child(2) { animation-delay: .08s; } .slide.aktiv .slide-text > :nth-child(3) { animation-delay: .16s; } .slide.aktiv .slide-text > :nth-child(4) { animation-delay: .24s; } @keyframes text-rein { from { opacity: 0; transform: translateY(26px); } } .buehne .vorzeile { color: #c9d0e4; } .buehne h1, .buehne .slide-titel { font: 700 clamp(3rem, 7.4vw, 6.2rem)/.9 var(--titel); text-transform: uppercase; color: #fff; margin: 14px 0 0; text-wrap: balance; } .buehne h1 em, .buehne .slide-titel em { font-style: italic; color: #fff; background: var(--rot); padding: 0 .12em; box-decoration-break: clone; -webkit-box-decoration-break: clone; display: inline; } .buehne .unter { margin-top: 22px; font-size: 1.18rem; color: #dbe0ee; max-width: 40ch; } .buehne .aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; } /* Steuerung */ .slide-steuer { position: absolute; z-index: 6; left: 0; right: 0; bottom: 104px; display: flex; align-items: center; gap: 10px; } .slide-steuer button { display: grid; place-items: center; min-width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, .45); border-radius: 999px; background: rgba(9, 22, 42, .55); color: #fff; cursor: pointer; font: 600 .9rem var(--schrift); } .slide-steuer button:hover { border-color: #fff; } .punkte { display: flex; gap: 8px; } .punkte button { position: relative; width: 58px; min-width: 58px; height: 44px; border: 0; background: none; padding: 0; } .punkte button::before { content: ""; position: absolute; left: 4px; right: 4px; top: 19px; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .3); } .punkte button i { position: absolute; left: 4px; top: 19px; height: 6px; width: 0; border-radius: 3px; background: #fff; } .punkte button[aria-current="true"] i { width: calc(100% - 8px); } .buehne.laeuft .punkte button[aria-current="true"] i { animation: punkt-lauf var(--dauer, 7s) linear both; } .buehne.pause .punkte button[aria-current="true"] i { animation-play-state: paused; } @keyframes punkt-lauf { from { width: 0; } to { width: calc(100% - 8px); } } .slide-steuer .zahl { margin-left: 4px; font: 700 1.1rem var(--titel); letter-spacing: .1em; color: #c9d0e4; } /* Maskottchen */ .maskottchen { position: absolute; z-index: 7; right: max(16px, calc((100vw - var(--breite)) / 2)); bottom: 70px; width: clamp(120px, 15vw, 200px); aspect-ratio: 188 / 155; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 16px 18px rgba(0, 0, 0, .45)); animation: hupf 3.2s ease-in-out infinite; } .maskottchen svg { width: 100%; height: 100%; } .maskottchen.hupt { animation: huper .6s ease; } @keyframes hupf { 0%, 100% { transform: translateY(0) rotate(0); } 45% { transform: translateY(-8px) rotate(-2deg); } 55% { transform: translateY(-8px) rotate(1deg); } } @keyframes huper { 20% { transform: rotate(-9deg) scale(1.08); } 45% { transform: rotate(7deg) scale(1.08); } 70% { transform: rotate(-4deg); } } .sprechblase { position: absolute; z-index: 8; right: calc(max(16px, calc((100vw - var(--breite)) / 2)) + clamp(90px, 11vw, 150px)); bottom: calc(70px + clamp(110px, 13vw, 175px)); max-width: 240px; padding: 12px 16px; border-radius: 18px 18px 4px 18px; background: #fff; color: #09162a; font: 600 1rem/1.35 var(--schrift); box-shadow: var(--schatten); } .sprechblase a { color: var(--rot-text); font-weight: 700; } /* Fakten als überlappende Karten */ .fakten-band { position: relative; z-index: 10; margin-top: -78px; } .fakten { margin-top: 0; border: 0; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); } .fakt, .fakt + .fakt { padding: 20px 22px; border: 0; border-radius: var(--r); background: var(--flaeche); box-shadow: var(--schatten); border-top: 5px solid var(--rot); } .fakt:nth-child(2) { transform: translateY(14px); } .fakt:nth-child(4) { transform: translateY(14px); } .fakt strong { color: var(--navy); } @media (max-width: 480px) { .fakt + .fakt { border-top: 5px solid var(--rot); } .fakt:nth-child(n) { transform: none; } } @media (max-width: 899px) { .slide { min-height: 0; grid-template-rows: auto 1fr; } .slide-foto { position: relative; inset: auto; width: 100%; height: clamp(230px, 58vw, 380px); clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); } .slide-foto::after { background: linear-gradient(0deg, rgba(9, 22, 42, .5), transparent 50%); } .slide .balken.b1 { left: auto; right: 18%; top: -4%; height: clamp(240px, 64vw, 400px); width: 22px; } .slide .balken.b2 { left: auto; right: calc(18% - 30px); top: -4%; height: clamp(240px, 64vw, 400px); width: 7px; } .slide .balken.b3 { display: none; } .slide-text { padding-block: 10px 132px; } .slide-text > * { max-width: none; } .slide-steuer { bottom: 92px; } .maskottchen { bottom: auto; top: clamp(150px, 42vw, 290px); width: 118px; } .sprechblase { right: 16px; bottom: auto; top: clamp(60px, 22vw, 180px); max-width: 210px; } .fakten-band { margin-top: -58px; } } /* ---------- Abschnitte: schräge Kanten = deutliche Unterteilung ---------- */ .abschnitt { position: relative; } .abschnitt.kuehl, .abschnitt.dunkel, .abschnitt.rot { clip-path: polygon(0 var(--kante), 100% 0, 100% calc(100% - var(--kante)), 0 100%); margin-block: calc(-1 * var(--kante)); padding-block: calc(clamp(64px, 9vw, 120px) + var(--kante)); z-index: 1; } .abschnitt.dunkel { --linie: #2c3a5e; background: radial-gradient(120% 90% at 85% 10%, #15264a 0%, #09162a 60%); } .abschnitt.dunkel .vorzeile { color: #c9d0e4; } #anliegen { margin-top: 30px; } .kopfzeile { margin-bottom: 44px; } .vorzeile::before { border-radius: 2px; } /* große Kennziffer je Abschnitt */ .kopfzeile[data-nr]::before { content: attr(data-nr); font: 700 italic clamp(3.4rem, 7vw, 5.6rem)/.8 var(--titel); color: transparent; -webkit-text-stroke: 2px var(--rot); opacity: .75; } /* ---------- Karten runder und weicher ---------- */ .chip, .zettel, .leistungen, .tafel, .modal, .formular, .kanal, .zeiten, .bew, .termin, .stichworte li, .gewaehlt button, .merken, .modal-zu, .modal-fuss .blaettern button, .bew-steuer button, .modal-preis { border-radius: var(--r-klein); } .chip, .zettel, .formular, .modal, .leistungen, .tafel { border-radius: var(--r); } .stichworte li, .gewaehlt button, .termin .marke { border-radius: 999px; } .leistungen { overflow: hidden; } .foto-rund, .inhaber img, .laden img { border-radius: var(--r); } .laden img { clip-path: none; box-shadow: var(--schatten); rotate: -1.5deg; } .inhaber img { box-shadow: var(--schatten); } .inhaber::before { content: ""; position: absolute; z-index: -1; inset: 18px -14px -14px 18px; border-radius: var(--r); background: var(--rot); rotate: 2deg; } .inhaber { isolation: isolate; } .feld input, .feld select, .feld textarea { border-radius: var(--r-klein); } .reiter button { border-radius: var(--r-klein) var(--r-klein) 0 0; } .tafel { border-top-left-radius: 0; overflow: hidden; } .bew { box-shadow: var(--schatten-weich); border: 0; } .bew::before { content: "“"; font: 700 4rem/.6 var(--titel); color: var(--rot); height: 22px; } /* ---------- Kontraste ---------- */ .zeiten dd.heute, .zeiten dt.heute, .modal-inhalt li::marker { color: var(--rot-text); } .chronik time { color: var(--rot-text); } .chip small, .leistung span, .kopfzeile p { color: var(--leise); } .chip { border: 2px solid var(--linie); box-shadow: var(--schatten-weich); } .chip:hover { border-color: var(--rot); } .leistung .icon, .chip .icon, .kanal .icon, .modal-kopf .icon { color: var(--rot-text); } /* ---------- Spiel: Anliegen-Picker ---------- */ .chip[aria-pressed="true"] { background: color-mix(in srgb, var(--rot) 7%, var(--flaeche)); animation: chip-pop .35s cubic-bezier(.3, 1.8, .5, 1); } .chip[aria-pressed="true"]::after { border-radius: 50%; } @keyframes chip-pop { 40% { transform: scale(1.05) rotate(-1deg); } } .plus-eins { position: absolute; top: 8px; right: 44px; font: 700 1.3rem var(--titel); color: var(--rot-text); pointer-events: none; animation: plus-steigt .9s ease-out forwards; } @keyframes plus-steigt { to { transform: translateY(-34px); opacity: 0; } } .zettel { background: radial-gradient(130% 100% at 100% 0, #1a2c55, #09162a 65%); } .tacho { display: block; width: 100%; max-width: 220px; margin: 14px auto 0; overflow: visible; } .tacho .bahn { stroke: rgba(255, 255, 255, .18); } .tacho .wert { stroke: var(--rot); transition: stroke-dashoffset .6s cubic-bezier(.3, 1.4, .5, 1); } .tacho .nadel { transform-origin: 60px 62px; transition: transform .7s cubic-bezier(.3, 1.6, .5, 1); } .tacho text { fill: #c9d0e4; font: 600 8px var(--titel); letter-spacing: .1em; } .abzeichen { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); font: 600 .9rem var(--schrift); color: #fff; } .abzeichen svg { width: 18px; height: 18px; fill: #ffc94d; } .abzeichen.neu { animation: chip-pop .5s cubic-bezier(.3, 1.8, .5, 1); } /* ---------- Spiel: Leistungen entdecken ---------- */ .entdeckt { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: -20px 0 24px; } .entdeckt p { font-weight: 600; } .entdeckt-balken { flex: 1 1 200px; max-width: 360px; height: 10px; border-radius: 5px; background: var(--kuehl); overflow: hidden; } .entdeckt-balken i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--rot), #ff7a3d); transition: width .5s ease; } .leistung { position: relative; } .leistung.gesehen::after { content: ""; position: absolute; top: 12px; right: 12px; width: 20px; height: 20px; border-radius: 50%; background: var(--ok) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/14px no-repeat; } .leistung .icon { transition: transform .25s cubic-bezier(.3, 1.8, .5, 1); } .leistung:hover .icon { transform: rotate(-10deg) scale(1.12); } /* ---------- Spiel: Profil-Check ---------- */ .check { display: grid; gap: 36px; align-items: center; } @media (min-width: 900px) { .check { grid-template-columns: 1.1fr .9fr; } } .check-regler { margin-top: 26px; display: grid; gap: 10px; } .check-regler label { display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; } .check-regler output { font: 700 2.4rem/1 var(--titel); color: #fff; font-variant-numeric: tabular-nums; } .check-regler input[type="range"] { width: 100%; height: 44px; accent-color: var(--rot); cursor: pointer; } .check-skala { display: flex; justify-content: space-between; color: #c9d0e4; font-size: .85rem; } .check-ergebnis { display: flex; gap: 14px; align-items: flex-start; margin: 20px 0 24px; padding: 16px 18px; border-radius: var(--r-klein); background: rgba(255, 255, 255, .07); border-left: 6px solid var(--ampel, #54c98a); } .check-ergebnis b { display: block; font: 700 1.35rem var(--titel); letter-spacing: .04em; text-transform: uppercase; color: var(--ampel, #54c98a); } .reifen-grafik { width: 100%; max-width: 420px; margin-inline: auto; overflow: visible; } .reifen-grafik .block { fill: #2b3654; transition: height .35s ease, y .35s ease; } .reifen-grafik .grund { fill: #1b2440; } .reifen-grafik .mass { stroke: var(--ampel, #54c98a); stroke-width: 2.5; transition: y1 .35s, y2 .35s; } .reifen-grafik text { fill: #c9d0e4; font: 600 13px var(--schrift); } /* ---------- Ausbildung ---------- */ .ausbildung img { border-radius: var(--r) var(--r) 0 0; } /* ---------- Fuß: Kontakt als Bubbles ---------- */ .fuss { position: relative; padding-block: calc(56px + var(--kante)) 28px; margin-top: calc(-1 * var(--kante)); clip-path: polygon(0 var(--kante), 100% 0, 100% 100%, 0 100%); background: radial-gradient(120% 80% at 10% 0, #15264a, #09162a 60%); --logo-fuell: #ffffff; } .fuss-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 18px 30px; padding-bottom: 28px; border-bottom: 1px solid #26324f; } .fuss-marke { display: flex; align-items: flex-end; gap: 6px; } .fuss-marke .logo-atz { width: 110px; height: 75px; } .fuss-marke .logo-auto { width: 90px; height: 74px; margin-bottom: -6px; } .fuss-kopf p { max-width: 46ch; color: #c9d0e4; } .bubbles { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); margin: 30px 0; } .bubble { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 22px 22px 22px 6px; background: #13203f; border: 1px solid #2c3a5e; color: #fff; text-decoration: none; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1), background-color .2s, border-color .2s; } .bubble::after { content: ""; position: absolute; left: 14px; bottom: -9px; width: 18px; height: 12px; background: inherit; border-left: 1px solid #2c3a5e; border-bottom: 1px solid #2c3a5e; clip-path: polygon(0 0, 100% 0, 0 100%); } a.bubble:hover { transform: translateY(-4px) rotate(-.6deg); background: #1b2b52; border-color: var(--rot); } .bubble-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--rot-knopf); color: #fff; } .bubble-icon .icon { width: 26px; height: 26px; } .bubble.wa .bubble-icon { background: #1f9e55; } .bubble.mail .bubble-icon { background: #3a55a4; } .bubble.ort .bubble-icon { background: #fff; color: #09162a; } .bubble small { display: block; color: #c9d0e4; font-size: .85rem; } .bubble b { display: block; margin: 0; font: 700 1.25rem/1.15 var(--titel); letter-spacing: .03em; color: #fff; text-transform: none; } .fuss-unten { display: grid; gap: 30px; } @media (min-width: 800px) { .fuss-unten { grid-template-columns: 1.3fr 1fr; } } .fuss .zeiten { background: #13203f; border-color: #2c3a5e; color: #e8ebf4; border-radius: 22px 22px 22px 6px; } .fuss .zeiten dd.heute, .fuss .zeiten dt.heute { color: #ff8a80; } .fuss .status { margin-bottom: 12px; background: #13203f; border-color: #2c3a5e; color: #fff; } .fuss nav ul { grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 26px; } @media (prefers-reduced-motion: reduce) { .maskottchen { animation: none; } .slide-foto img, .slide.aktiv .slide-foto img { transform: none; transition: none; } } /* ---------- aus Runde 2 übernommen ---------- */ .sprache { display: inline-flex; border: 1px solid var(--linie); background: var(--flaeche); } .sprache button { min-width: 44px; min-height: 40px; padding: 4px 10px; border: 0; background: none; color: var(--leise); font: 700 1rem var(--titel); letter-spacing: .08em; cursor: pointer; } .sprache button[aria-pressed="true"] { background: var(--navy); color: var(--papier); } .countdown { display: flex; align-items: baseline; gap: 14px; margin: 6px 0 22px; } .countdown strong { font: 700 clamp(3.4rem, 8vw, 5.4rem)/.9 var(--titel); color: #fff; font-variant-numeric: tabular-nums; } .countdown span { font: 600 1.2rem/1.2 var(--titel); letter-spacing: .06em; text-transform: uppercase; color: #c9d0e4; max-width: 18ch; } .countdown-balken { height: 10px; max-width: 420px; margin-bottom: 26px; border-radius: 5px; background: rgba(255, 255, 255, .14); overflow: hidden; } .countdown-balken i { display: block; height: 100%; width: 0; border-radius: 5px; background: linear-gradient(90deg, var(--rot), #ff7a3d); } .bew-hinweis { margin-top: 10px; color: var(--leise); font-size: .92rem; } /* ---------- Bühne: Feinschliff Runde 3b ---------- */ .buehne-oben { position: relative; } .slide-foto { width: 52%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%); } .slide .balken.b1, .slide .balken.b2 { inset: 0; width: auto; height: auto; transform: none; top: 0; left: 0; } .slide .balken.b1 { clip-path: polygon(54.2% 0, 56.6% 0, 47.2% 100%, 44.8% 100%); } .slide .balken.b2 { background: #fff; clip-path: polygon(52.6% 0, 53.3% 0, 43.9% 100%, 43.2% 100%); } .slide .balken.b3 { right: 2%; bottom: 96px; width: 300px; height: 16px; } .slide-text > * { max-width: min(520px, 40vw); } .slide-text { padding-block: 60px 190px; } .slide-steuer { bottom: 104px; } .maskottchen { bottom: 104px; } .sprechblase { bottom: calc(104px + clamp(110px, 13vw, 175px)); } @media (max-width: 899px) { .slide-foto { width: 100%; clip-path: polygon(0 0, 100% 0, 100% 84%, 0 100%); } .slide .balken.b1 { clip-path: polygon(74% 0, 78% 0, 70% clamp(240px, 64vw, 400px), 66% clamp(240px, 64vw, 400px)); } .slide .balken.b2 { clip-path: polygon(80% 0, 81.4% 0, 73.4% clamp(240px, 64vw, 400px), 72% clamp(240px, 64vw, 400px)); } .slide-text { padding-block: 10px 170px; } .slide-text > * { max-width: none; } .slide-steuer { bottom: 90px; } .maskottchen { bottom: auto; } } @media (max-width: 600px) { .slide-steuer { gap: 6px; } .slide-steuer .zahl { display: none; } .punkte { gap: 2px; } .punkte button { width: 36px; min-width: 36px; } } @media (max-width: 379px) { .kopf .status { display: none; } .kopf-innen { gap: 10px; } } .hu > *, .check > *, .picker > *, .kontakt > * { min-width: 0; } @media (max-width: 400px) { .termin { grid-template-columns: 56px 1fr; } .termin .marke { grid-column: 2; justify-self: start; } } .sprache, .logo, .kopf .knopf { flex: none; } @media (max-width: 599px) { .kopf .status { display: none; } .kopf-innen { gap: 10px; } .kopf .sprache { margin-left: auto; } .kopf .knopf { margin-left: 0; } } @media (max-width: 379px) { .kopf .knopf { display: none; } } .check-skala { position: relative; height: 1.3em; } .check-skala span { position: absolute; top: 0; transform: translateX(-50%); } .check-skala span:first-child { transform: none; } .check-skala span:last-child { transform: translateX(-100%); } .reifen-grafik { max-width: 520px; } .reifen-grafik .block { fill: #3b4a74; } .reifen-grafik .grenze { fill: #ff8a80; font-size: 12px; } .leistung.gesehen::after { right: auto; left: 10px; top: 10px; } .reifen-grafik .label { fill: var(--ampel, #54c98a); font: 700 16px var(--titel); } .fuss .bubbles { margin: 34px 0 40px; gap: 18px; } .check-skala span { white-space: nowrap; } /* ===== Runde 4 ===== */ /* Slider-Überschrift: kleiner, mehr Zeilenabstand, rote Markierung überdeckt nichts */ .buehne h1, .buehne .slide-titel { font-size: clamp(2.5rem, 5.4vw, 4.6rem); line-height: 1.12; } .buehne h1 em, .buehne .slide-titel em { padding: 0 .1em; line-height: 1; } /* Faktenkarten auf gleicher Höhe */ .fakt:nth-child(n) { transform: none; } .fakten { align-items: stretch; } /* 06: Bildunterschrift als Karte, roter Rahmen nur hinter dem Foto */ .inhaber::before { inset: 18px -14px 110px 18px; } .inhaber figcaption { position: relative; margin: -46px 20px 0 20px; padding: 16px 20px; border-radius: var(--r-klein); background: var(--flaeche); box-shadow: var(--schatten); } /* WhatsApp-Knöpfe */ .knopf.wa { background: #178a47; border-color: #178a47; box-shadow: 0 10px 22px -12px rgba(23, 138, 71, .8); } .knopf.wa:hover { background: #12733b; border-color: #12733b; } .knopf.wa-rand { border-color: #178a47; color: #12733b; } .knopf.wa-rand:hover { background: #178a47; color: #fff; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .knopf.wa-rand { color: #7fdca6; } } :root[data-theme="dark"] .knopf.wa-rand { color: #7fdca6; } .zettel .knopf.wa { width: 100%; } .zettel-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; color: #dbe0ee; font-weight: 600; } .zettel-link .icon { width: 18px; height: 18px; } .kanal.haupt { border: 2px solid #178a47; } .kanal.haupt .icon { color: #178a47; } /* Anfahrt */ .besuch { display: grid; gap: 36px; align-items: center; } @media (min-width: 900px) { .besuch { grid-template-columns: 1.05fr 1fr; } } .besuch > * { min-width: 0; } .besuch-foto { position: relative; margin: 0; } .besuch-foto img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r); box-shadow: var(--schatten); rotate: -1.2deg; } .besuch-status { position: absolute; left: 18px; bottom: 18px; } .besuch-status .status { box-shadow: var(--schatten-weich); } .adresse { margin-bottom: 18px; font-size: 1.15rem; line-height: 1.5; } .adresse b { font: 700 1.4rem var(--titel); text-transform: uppercase; color: var(--navy); letter-spacing: .03em; } .besuch .zeiten { margin-bottom: 24px; } .besuch .aktionen { display: flex; flex-wrap: wrap; gap: 12px; } /* Schwebender WhatsApp-Knopf */ .wa-schwebe { position: fixed; z-index: 40; right: 18px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: #178a47; color: #fff; box-shadow: 0 14px 26px -10px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(20px) scale(.8); pointer-events: none; transition: opacity .25s, transform .3s cubic-bezier(.3, 1.6, .5, 1); } .wa-schwebe.sichtbar { opacity: 1; transform: none; pointer-events: auto; } .wa-schwebe .icon { width: 30px; height: 30px; } .wa-schwebe:hover { background: #12733b; } .kopf .knopf.wa .icon { width: 1.1em; height: 1.1em; } /* 8 Anliegen: immer volle Reihen (4 bzw. 2 pro Zeile) */ .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 980px) and (max-width: 1180px) { .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 360px) { .chip { padding: 14px; } .chip b { font-size: 1.1rem; } } @media (min-width: 900px) { .slide-text > .aktionen { max-width: min(640px, 46vw); } } /* Runde 5: Gebäudefoto waagerecht, Status-Bubble als Link */ .besuch-foto img { rotate: none; aspect-ratio: 3 / 2; object-position: 48% 55%; } a.status { color: var(--tinte); text-decoration: none; transition: border-color .15s, transform .15s; } a.status:hover { border-color: var(--rot); transform: translateY(-1px); } a.status .lang { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--leise) 50%, transparent); text-underline-offset: .2em; } /* Runde 6: Sprungziele – Inhalt statt Abschnittsrand oben unter den Kopf */ html { scroll-padding-top: 0; } .abschnitt { --oben: clamp(64px, 9vw, 120px); scroll-margin-top: calc(var(--kopf-h, 80px) + 20px - var(--oben)); } .abschnitt.kuehl, .abschnitt.dunkel, .abschnitt.rot { scroll-margin-top: calc(var(--kopf-h, 80px) + 20px - var(--oben) - var(--kante)); } .kopf.menue-offen ~ .wa-schwebe { display: none; } /* =================================================================== Runde 9: moderner – leichter, beweglicher, persönlicher =================================================================== */ :root { --papier: #ffffff; --kuehl: #f6f4f1; --linie: #ebe6df; --kante: clamp(18px, 3vw, 44px); --r: 22px; --r-klein: 14px; --hauch: 0 1px 2px rgba(20, 30, 60, .05), 0 12px 32px -16px rgba(20, 30, 60, .22); --hauch-hoch: 0 2px 4px rgba(20, 30, 60, .06), 0 26px 48px -20px rgba(20, 30, 60, .34); --kartenrand: 1px solid rgba(20, 30, 60, .07); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --kartenrand: 1px solid rgba(255, 255, 255, .08); --kuehl: #0e172d; --papier: #0a1122; } } :root[data-theme="dark"] { --kartenrand: 1px solid rgba(255, 255, 255, .08); --kuehl: #0e172d; --papier: #0a1122; } /* Typografie: normale Groß-/Kleinschreibung statt Versalien-Blöcke */ h1, h2, h3, .buehne h1, .buehne .slide-titel { text-transform: none; letter-spacing: -.01em; } h2 { font-size: clamp(2.2rem, 4.2vw, 3.3rem); line-height: 1.04; } .buehne h1, .buehne .slide-titel { font-size: clamp(2.7rem, 5.6vw, 4.9rem); line-height: 1.02; } .chip b, .leistung b, .termin b, .kanal b, .formular legend, .modal-kopf h3, .inhaber figcaption b, .adresse b, .reiter button, .chronik h3, .zettel h3, .check-ergebnis b, .kopf .nav a, .fuss b, .bubble b { text-transform: none; letter-spacing: .005em; } .kopf .nav a { font: 600 1.06rem var(--schrift); letter-spacing: 0; } .knopf { font: 600 1.02rem/1 var(--schrift); letter-spacing: 0; text-transform: none; min-height: 50px; padding: 12px 24px; } .knopf.klein { font-size: .95rem; } .kopf-cta b { text-transform: none; letter-spacing: 0; font: 700 1.3rem/1.05 var(--schrift); } .vorzeile { font-size: .8rem; letter-spacing: .16em; } .kopfzeile[data-nr]::before { font-size: clamp(2.2rem, 3.6vw, 3rem); -webkit-text-stroke-width: 1.5px; opacity: .55; } .kopfzeile p { font-size: 1.08rem; line-height: 1.65; } /* Karten: leicht statt klobig */ .chip, .leistung, .tafel, .formular, .kanal, .zeiten, .bew, .termin, .modal, .fakt, .fakt + .fakt { border: var(--kartenrand); box-shadow: var(--hauch); } .chip { border-radius: var(--r); padding: 20px; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .35s, border-color .2s, background-color .2s; } .chip:hover { transform: translateY(-5px); box-shadow: var(--hauch-hoch); border-color: rgba(211, 24, 29, .3); } .chip .icon, .leistung .icon, .kanal .icon { box-sizing: content-box; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--rot) 9%, transparent); } .chip .icon { width: 26px; height: 26px; } .leistungen { background: none; border: 0; gap: 14px; overflow: visible; } .leistung { border-radius: var(--r); padding: 22px; transition: transform .35s cubic-bezier(.2, .9, .3, 1.3), box-shadow .35s; } .leistung:hover { background: var(--flaeche); transform: translateY(-5px); box-shadow: var(--hauch-hoch); } .leistung .icon { width: 24px; height: 24px; margin-top: 0; } .leistung .pfeil { padding: 0; background: none; transition: transform .25s; } .leistung:hover .pfeil { transform: translateX(4px); color: var(--rot-text); } .fakt, .fakt + .fakt { border-top: var(--kartenrand); border-radius: var(--r); position: relative; overflow: hidden; } .fakt::before { content: ""; position: absolute; left: 0; top: 0; width: 56px; height: 5px; background: var(--rot); border-radius: 0 0 4px 0; transform: skewX(var(--schraeg)); transform-origin: left top; } .zettel, .tafel, .formular { border-radius: var(--r); } .kanal { border-radius: var(--r); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), box-shadow .3s; } .kanal:hover { transform: translateY(-3px); box-shadow: var(--hauch-hoch); } .bew { border-radius: 22px 22px 22px 6px; } .termin { border-radius: var(--r-klein); } .abschnitt.dunkel .termin { box-shadow: none; } .laden img, .besuch-foto img, .inhaber img { transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .laden img:hover, .besuch-foto img:hover { transform: scale(1.02); } /* Laufband unter der Bühne */ .laufband-rahmen { position: relative; z-index: 3; overflow: hidden; padding: 26px 0 14px; margin-top: -8px; } .laufband { position: relative; width: 106%; margin-left: -3%; padding: 13px 0; background: #202b52; color: #fff; transform: rotate(-1.6deg); box-shadow: 0 16px 30px -18px rgba(9, 22, 42, .6); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .laufband { background: var(--rot-knopf); } } :root[data-theme="dark"] .laufband { background: var(--rot-knopf); } .laufband-spur { display: flex; width: max-content; animation: laufen 48s linear infinite; } .laufband ul { display: flex; margin: 0; padding: 0; list-style: none; } .laufband li { display: flex; align-items: center; gap: 22px; padding-right: 22px; font: 700 1.25rem/1 var(--titel); letter-spacing: .02em; white-space: nowrap; } .laufband li::after { content: ""; width: 10px; height: 10px; background: var(--rot); transform: skewX(var(--schraeg)); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .laufband li::after { background: #fff; } } :root[data-theme="dark"] .laufband li::after { background: #fff; } .laufband:hover .laufband-spur, .laufband:focus-within .laufband-spur, .laufband.pause .laufband-spur { animation-play-state: paused; } @keyframes laufen { to { transform: translateX(-50%); } } .laufband-pause { position: absolute; right: 5%; top: 50%; transform: translateY(-50%); display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: #fff; color: #09162a; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); } .laufband-pause .icon { width: 18px; height: 18px; } /* Begrüßung von Markus als Chat */ .hallo { padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 96px); } .hallo-innen { display: flex; align-items: flex-end; gap: clamp(14px, 2.4vw, 26px); max-width: 860px; } .hallo-foto { flex: none; width: clamp(64px, 9vw, 96px); height: auto; aspect-ratio: 1; border-radius: 50%; border: 4px solid #fff; box-shadow: 0 0 0 3px var(--rot), var(--hauch); } .chat { display: grid; gap: 10px; justify-items: start; min-width: 0; } .chat-name { font: 700 1.05rem var(--schrift); color: var(--navy); margin-left: 6px; letter-spacing: 0; } .chat-name span { margin-left: 6px; font-weight: 500; color: var(--leise); font-size: .92rem; } .blase { max-width: 620px; padding: 14px 20px; border-radius: 22px 22px 22px 6px; background: var(--kuehl); border: var(--kartenrand); font-size: 1.12rem; line-height: 1.55; color: var(--tinte); } .blase:first-of-type { font-weight: 600; } .chat-aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; } /* Scroll-Animationen */ .reveal { opacity: 0; translate: 0 28px; transition: opacity .7s cubic-bezier(.2, .8, .2, 1), translate .7s cubic-bezier(.2, .8, .2, 1), scale .7s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i, 0) * 70ms); } .reveal.sichtbar { opacity: 1; translate: 0 0; } .blase.reveal { translate: -16px 12px; scale: .96; transform-origin: left bottom; transition-delay: calc(var(--i, 0) * 350ms + 150ms); } .blase.reveal.sichtbar { scale: 1; } .hallo-foto.reveal { scale: .7; } .hallo-foto.reveal.sichtbar { scale: 1; } @media (prefers-reduced-motion: reduce) { .laufband-spur { animation: none; } .reveal { opacity: 1; translate: none; scale: none; } } .hallo-innen { max-width: calc(var(--breite) + 2 * var(--rand)); align-items: flex-start; } .hallo-foto { margin-top: 2px; } @media (max-width: 600px) { .hallo-foto { width: 52px; border-width: 3px; } .blase { font-size: 1.04rem; } } /* =================================================================== Runde 10: Navigation als schwebende, kräftige Insel =================================================================== */ .kopf { position: sticky; top: 0; z-index: 30; height: 104px; margin-bottom: -104px; padding-top: 14px; background: none; border: 0; box-shadow: none; backdrop-filter: none; pointer-events: none; --insel-h: 76px; } .kopf.gescrollt { --insel-h: 64px; padding-top: 10px; } .insel { position: relative; pointer-events: auto; display: flex; align-items: center; gap: clamp(12px, 1.6vw, 24px); height: var(--insel-h); padding: 0 10px 0 22px; border-radius: 22px; color: #fff; --logo-fuell: #ffffff; background: linear-gradient(115deg, rgba(20, 33, 68, .94) 0%, rgba(9, 22, 42, .96) 55%, rgba(9, 22, 42, .96) 100%); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 24px 50px -22px rgba(9, 22, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .08); transition: height .35s cubic-bezier(.2, .8, .2, 1), padding .35s, border-radius .35s; } /* roter Schrägbalken hinter dem Logo als Markenzeichen */ .insel::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 212px; border-radius: 22px 0 0 22px; background: linear-gradient(100deg, #d3181d 0%, #ef3120 100%); clip-path: polygon(0 0, 100% 0, calc(100% - 34px) 100%, 0 100%); transition: width .35s; } .insel::after { content: ""; position: absolute; left: 216px; top: 0; bottom: 0; width: 10px; background: #fff; clip-path: polygon(34px 0, 44px 0, 10px 100%, 0 100%); width: 44px; opacity: .9; } .kopf .logo { position: relative; z-index: 1; display: flex; align-items: flex-end; gap: 2px; width: 172px; flex: none; } .kopf .logo .logo-atz { width: 88px; height: 60px; transition: width .35s, height .35s; } .kopf .logo .logo-auto { width: 74px; height: 61px; margin-bottom: -10px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .35)); transition: width .35s, height .35s, transform .35s cubic-bezier(.3, 1.6, .5, 1); } .kopf.gescrollt .logo .logo-atz { width: 74px; height: 50px; } .kopf.gescrollt .logo .logo-auto { width: 62px; height: 51px; } .kopf .logo:hover .logo-auto { transform: translateX(8px) rotate(-6deg); } /* Menüpunkte: groß, fett, weiß – mit gleitendem roten Block */ .kopf .nav { position: relative; display: none; align-items: center; gap: 4px; margin-left: auto; } .kopf .nav a { position: relative; z-index: 1; padding: 10px 16px; border: 0; background: none; color: #fff; text-decoration: none; font: 700 1.28rem/1 var(--titel); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; transition: color .2s; } .kopf .nav a::after { content: none; } .kopf .nav a:hover, .kopf .nav a[aria-current="true"] { color: #fff; } .nav-blob { position: absolute; left: 0; top: 50%; height: 44px; margin-top: -22px; width: 0; border-radius: 8px; background: linear-gradient(100deg, #d3181d, #ff3b2f); box-shadow: 0 10px 24px -8px rgba(239, 49, 32, .8); opacity: 0; transition: transform .45s cubic-bezier(.3, 1.4, .4, 1), width .45s cubic-bezier(.3, 1.4, .4, 1), opacity .25s; pointer-events: none; } /* Status + Sprache */ .kopf-meta { display: none; flex-direction: column; align-items: flex-end; gap: 4px; padding-left: 18px; border-left: 1px solid rgba(255, 255, 255, .16); } .kopf .kopf-meta .status { display: inline-flex; padding: 0; border: 0; background: none; color: #dbe0ee; font: 600 .82rem var(--schrift); white-space: nowrap; } .kopf .kopf-meta .status .lang { color: #aab3cc; text-decoration: none; } .kopf .status.offen::before, .menue .status.offen::before { background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .25), 0 0 14px #3ddc84; animation: glimmen 2.4s ease-in-out infinite; } @keyframes glimmen { 50% { box-shadow: 0 0 0 7px rgba(61, 220, 132, .12), 0 0 18px #3ddc84; } } .kopf .kopf-meta .sprache { display: inline-flex; border: 1px solid rgba(255, 255, 255, .25); border-radius: 999px; background: none; overflow: hidden; } .kopf .kopf-meta .sprache button { min-width: 34px; min-height: 24px; padding: 0 8px; border: 0; background: none; color: #c9d0e4; font: 700 .8rem var(--titel); letter-spacing: .1em; } .kopf .kopf-meta .sprache button[aria-pressed="true"] { background: #fff; color: #09162a; } /* WhatsApp: kräftiger grüner Knopf mit pulsierendem Ring */ .kopf-cta { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 10px; height: calc(var(--insel-h) - 20px); padding: 0 22px 0 18px; border-radius: 16px; background: linear-gradient(135deg, #1fae5b, #148a45); color: #fff; text-decoration: none; font: 700 1.2rem/1 var(--titel); letter-spacing: .05em; text-transform: uppercase; box-shadow: 0 10px 24px -10px rgba(31, 174, 91, .9); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1), height .35s; } .kopf-cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(31, 174, 91, .7); animation: puls 2.6s cubic-bezier(.2, .8, .2, 1) infinite; } @keyframes puls { 0% { box-shadow: 0 0 0 0 rgba(31, 174, 91, .65); } 70%, 100% { box-shadow: 0 0 0 14px rgba(31, 174, 91, 0); } } .kopf-cta:hover { transform: translateY(-2px) scale(1.04); } .kopf-cta .icon { width: 26px; height: 26px; } .kopf-cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; } /* Lesefortschritt entlang der Unterkante der Insel */ .kopf-fortschritt { position: absolute; left: 22px; right: 22px; bottom: -1px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #ef3120, #ff7a3d); transform: scaleX(var(--gelesen, 0)); transform-origin: left; } /* Menü-Knopf */ .menue-knopf { position: relative; z-index: 1; display: flex; flex: none; flex-direction: column; justify-content: center; gap: 6px; width: 50px; height: 50px; margin-left: 4px; padding: 0 12px; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(255, 255, 255, .06); cursor: pointer; } .menue-knopf span { display: block; height: 3px; border-radius: 2px; background: #fff; transition: transform .3s, opacity .2s; } .menue-offen .menue-knopf span:nth-child(1) { transform: translateY(9px) rotate(45deg); } .menue-offen .menue-knopf span:nth-child(2) { opacity: 0; } .menue-offen .menue-knopf span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); } /* Handy-Menü als Fortsetzung der Insel */ .menue { position: absolute; left: 0; right: 0; top: calc(100% + 10px); max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 22px 22px; border-radius: 22px; background: linear-gradient(160deg, #15264a, #09162a 70%); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .7); color: #fff; animation: menue-auf .35s cubic-bezier(.2, .8, .2, 1); } @keyframes menue-auf { from { opacity: 0; transform: translateY(-14px) scale(.98); } } .menue nav { display: grid; } .menue nav a { display: flex; align-items: baseline; gap: 14px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .12); color: #fff; text-decoration: none; font: 700 clamp(1.7rem, 7vw, 2.3rem)/1.1 var(--titel); text-transform: uppercase; letter-spacing: .02em; } .menue nav a i { font: 700 italic 1rem var(--titel); color: #ff8a80; letter-spacing: .1em; } .menue-aktionen { display: grid; gap: 10px; margin-top: 20px; } .menue-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; } .menue-fuss .status { display: inline-flex; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .25); color: #fff; } .menue-fuss .sprache { display: inline-flex; border: 1px solid rgba(255, 255, 255, .3); border-radius: 999px; overflow: hidden; background: none; } .menue-fuss .sprache button { color: #c9d0e4; } .menue-fuss .sprache button[aria-pressed="true"] { background: #fff; color: #09162a; } .kopf.menue-offen ~ .wa-schwebe { display: none; } /* Bühne startet unter der Insel */ .slide-text { padding-top: 140px; } .entwurf { position: relative; z-index: 31; } /* Breiten */ @media (min-width: 1000px) { .kopf .nav { display: flex; } .menue-knopf { display: none; } } @media (min-width: 1240px) { .kopf-meta { display: flex; } } @media (min-width: 1000px) and (max-width: 1239px) { .kopf .nav a { padding: 10px 11px; font-size: 1.12rem; } .kopf-cta span { display: none; } .kopf-cta { padding: 0 14px; } } @media (max-width: 999px) { .kopf-cta { margin-left: auto; } } @media (max-width: 899px) { .slide-text { padding-top: 10px; } .slides { padding-top: 0; } .slide-foto { margin-top: 0; } .buehne-oben { padding-top: 96px; background: #09162a; } } @media (max-width: 560px) { .kopf { height: 88px; margin-bottom: -88px; padding-top: 10px; --insel-h: 64px; } .insel { padding: 0 8px 0 14px; border-radius: 18px; gap: 8px; } .insel::before { width: 150px; border-radius: 18px 0 0 18px; } .insel::after { left: 152px; } .kopf .logo { width: 128px; } .kopf .logo .logo-atz, .kopf.gescrollt .logo .logo-atz { width: 64px; height: 44px; } .kopf .logo .logo-auto, .kopf.gescrollt .logo .logo-auto { width: 54px; height: 44px; margin-bottom: -6px; } .kopf-cta span { display: none; } .kopf-cta { padding: 0 12px; height: 46px; border-radius: 13px; } .menue-knopf { width: 46px; height: 46px; } } @media (max-width: 359px) { .insel::before { width: 136px; } .insel::after { left: 138px; } .kopf .logo { width: 118px; } .kopf .logo .logo-auto { width: 46px; } } .abschnitt { --kopf-h: 84px; } @media (prefers-reduced-motion: reduce) { .kopf-cta::before, .kopf .status.offen::before { animation: none; } .nav-blob { transition: opacity .2s; } } .kopf .logo { margin-right: 46px; } .kopf .nav { gap: 2px; } .kopf .nav a { padding: 10px 13px; font-size: 1.2rem; } .insel > * { min-width: 0; } .kopf-cta, .kopf .logo, .menue-knopf { flex-shrink: 0; } @media (min-width: 1240px) { .kopf-meta { display: none; } } @media (min-width: 1380px) { .kopf-meta { display: flex; } } @media (min-width: 1000px) and (max-width: 1239px) { .kopf .logo { margin-right: 36px; } .kopf .nav a { padding: 10px 9px; font-size: 1.08rem; } } @media (max-width: 560px) { .kopf .logo { margin-right: 0; } } @media (min-width: 1000px) { .kopf .kopf-meta { display: flex; } } @media (min-width: 1000px) and (max-width: 1379px) { .kopf .kopf-meta .status { display: none; } .kopf-meta { padding-left: 12px; } } /* Runde 11: Logo-Keil weiß, ATZ dunkelblau, Schrägstrich rot */ .insel::before { background: #fff; } .insel::after { background: linear-gradient(100deg, #d3181d, #ef3120); opacity: 1; } .kopf .logo { --logo-fuell: #202b52; } .kopf .logo .logo-auto { filter: drop-shadow(0 4px 6px rgba(9, 22, 42, .25)); } /* Laufband gerade */ .laufband { transform: none; width: 100%; margin-left: 0; } .laufband-rahmen { padding: 0; margin-top: 0; } .laufband-rahmen { margin-top: 28px; } /* Runde 13: Laufband ganz oben (top: 0) über der Navigation */ .laufband-rahmen { position: relative; z-index: 32; margin: 0; padding: 0; overflow: hidden; } .laufband { width: 100%; margin: 0; padding: 8px 0; transform: none; box-shadow: none; } .laufband li { font-size: 1.02rem; gap: 18px; padding-right: 18px; } .laufband li::after { width: 8px; height: 8px; } .laufband-pause { width: 28px; height: 28px; right: 12px; } .laufband-pause .icon { width: 14px; height: 14px; } .hallo { padding-top: clamp(56px, 7vw, 88px); } /* ===== Runde 14: Maskottchen fährt mit (fest unten links) ===== */ .begleiter { position: fixed; z-index: 38; left: max(12px, env(safe-area-inset-left, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); width: clamp(96px, 9vw, 132px); pointer-events: none; } .begleiter .maskottchen { position: relative; inset: auto; right: auto; top: auto; bottom: auto; display: block; width: 100%; pointer-events: auto; } .tipp-punkt { position: absolute; top: 4%; right: 6%; width: 20px; height: 20px; border-radius: 50%; background: var(--rot-knopf); border: 3px solid #fff; box-shadow: 0 4px 10px rgba(0, 0, 0, .3); transform: scale(0); transition: transform .35s cubic-bezier(.3, 1.8, .5, 1); } .maskottchen.neu .tipp-punkt { transform: scale(1); animation: punkt-puls 1.8s ease-in-out infinite; } @keyframes punkt-puls { 50% { box-shadow: 0 0 0 7px rgba(211, 24, 29, .2), 0 4px 10px rgba(0, 0, 0, .3); } } .begleiter .sprechblase { position: absolute; left: 12px; right: auto; top: auto; bottom: calc(100% + 6px); width: min(300px, calc(100vw - 40px)); max-width: none; padding: 14px 42px 14px 16px; border-radius: 18px 18px 18px 4px; background: #fff; color: #09162a; font: 500 .98rem/1.45 var(--schrift); box-shadow: 0 18px 40px -14px rgba(9, 22, 42, .5); border: 1px solid rgba(9, 22, 42, .08); pointer-events: auto; animation: blase-auf .35s cubic-bezier(.3, 1.5, .5, 1); transform-origin: left bottom; } @keyframes blase-auf { from { opacity: 0; transform: scale(.7) translateY(10px); } } .begleiter .sprechblase a { color: var(--rot-text); font-weight: 700; } .blase-zu { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; color: #454d69; cursor: pointer; } .blase-zu:hover { background: #f1eee9; } .blase-zu .icon { width: 16px; height: 16px; } .kopf.menue-offen ~ .begleiter { display: none; } @media (max-width: 600px) { .begleiter { width: 84px; } } @media (prefers-reduced-motion: reduce) { .maskottchen.neu .tipp-punkt { animation: none; } .begleiter .sprechblase { animation: none; } } /* ===== Runde 15: Auto rechts unten, Handy-Menü zeigt aktuellen Abschnitt ===== */ .begleiter { left: auto; right: max(12px, env(safe-area-inset-right, 0px)); } .begleiter .sprechblase { left: auto; right: 12px; border-radius: 18px 18px 4px 18px; transform-origin: right bottom; } .menue nav a { position: relative; transition: padding-left .3s cubic-bezier(.3, 1.4, .5, 1), color .2s; } .menue nav a[aria-current="true"] { padding-left: 16px; color: #fff; } .menue nav a[aria-current="true"]::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 6px; border-radius: 3px; background: linear-gradient(180deg, #ff3b2f, #d3181d); transform: skewX(-14deg); } .menue nav a[aria-current="true"] i { color: #fff; } /* Runde 16: Anfrage-Kasten so hoch wie die zwei Kachelreihen */ @media (min-width: 1181px) { .picker { align-items: stretch; } .chips { grid-auto-rows: 1fr; align-content: stretch; height: 100%; } .zettel { position: relative; top: auto; display: flex; flex-direction: column; padding: 24px 26px; } .zettel .tacho { max-width: 170px; margin-top: 6px; } .zettel .merkliste { margin: 12px 0; min-height: 0; } .zettel .hinweis { margin-bottom: 14px; font-size: .82rem; } .zettel #zettel-wa { margin-top: auto; } .zettel .zettel-link { margin-top: 12px; } } @media (min-width: 1181px) { .chip { min-height: 204px; } .zettel { contain: size; overflow: hidden; } .zettel .merkliste { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent; } .zettel .abzeichen { align-self: flex-start; } } @media (min-width: 1181px) { .chip { min-height: 226px; } .zettel h3 { font-size: 1.45rem; } .zettel .tacho { max-width: 140px; margin: 2px auto 0; } .zettel .schritte { display: none; } .zettel .schritt-text { margin-top: 4px; } .zettel .abzeichen { margin-top: 8px; padding: 4px 10px; font-size: .84rem; } .zettel .merkliste { min-height: 96px; margin: 12px 0 10px; } .zettel .merkliste li { font-size: .95rem; } .zettel .hinweis { margin-bottom: 12px; font-size: .78rem; line-height: 1.4; } } @media (min-width: 1181px) { .chip { min-height: 238px; } } @media (min-width: 980px) and (max-width: 1180px) { .picker { grid-template-columns: 1fr; } .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } .zettel { position: relative; top: auto; } } @media (min-width: 1181px) { .chip { justify-content: center; } } /* ===== Runde 17: Ausbildung – drei Spalten, Zähltafel, Karten ===== */ .ausbildung { align-items: end; gap: clamp(24px, 3vw, 44px); } @media (min-width: 800px) and (max-width: 1099px) { .ausbildung { grid-template-columns: 1fr 1fr; } .ausbildung img { grid-column: 2; grid-row: 1 / span 2; align-self: end; } .ausb-mitte { grid-column: 1; } } @media (min-width: 1100px) { .ausbildung { grid-template-columns: 1.05fr 1fr 300px; } } .ausb-text, .ausb-mitte { align-self: center; min-width: 0; } .ausb-intro { margin: 16px 0 26px; max-width: 52ch; color: #dbe0ee; } .countdown-ziel { font: 600 .95rem var(--schrift); color: #c9d0e4; margin-bottom: 10px; } .zaehltafel { display: flex; gap: 10px; margin-bottom: 18px; } .zaehltafel .kachel { flex: 1 1 0; min-width: 0; display: grid; justify-items: center; gap: 2px; padding: 14px 8px 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); } .zaehltafel .kachel.haupt { flex-grow: 1.35; background: linear-gradient(145deg, #ef3120, #b0121a); border-color: transparent; box-shadow: 0 16px 32px -16px rgba(239, 49, 32, .8); } .zaehltafel strong { font: 700 clamp(2.4rem, 4.2vw, 3.4rem)/1 var(--titel); color: #fff; font-variant-numeric: tabular-nums; } .zaehltafel .kachel:not(.haupt) strong { font-size: clamp(1.9rem, 3vw, 2.5rem); } .zaehltafel span { font: 600 .82rem var(--schrift); letter-spacing: .1em; text-transform: uppercase; color: #dbe0ee; } .ausbildung .countdown-balken { max-width: none; margin-bottom: 6px; } .countdown-skala { display: flex; justify-content: space-between; font-size: .8rem; color: #aab3cc; margin-bottom: 26px; } .ausb-text .aktionen { display: flex; flex-wrap: wrap; gap: 10px; } .ausb-mitte h3 { font-size: 1.5rem; color: #fff; margin-bottom: 14px; } .erwartet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0 0 22px; padding: 0; list-style: none; } .erwartet li { display: grid; gap: 6px; align-content: start; padding: 16px; border-radius: 18px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); transition: transform .3s cubic-bezier(.2, .9, .3, 1.3), background-color .2s, border-color .2s; } .erwartet li:hover { transform: translateY(-4px); background: rgba(255, 255, 255, .09); border-color: rgba(239, 49, 32, .5); } .erwartet .icon { width: 24px; height: 24px; box-sizing: content-box; padding: 8px; border-radius: 12px; background: rgba(239, 49, 32, .18); color: #ff8a80; } .erwartet b { font: 700 1.1rem/1.15 var(--schrift); color: #fff; } .erwartet span { font-size: .9rem; line-height: 1.45; color: #c9d0e4; } @media (max-width: 480px) { .erwartet { grid-template-columns: 1fr; } } /* Runde 18: Azubi-Foto oben bündig mit dem Inhalt, unten hinter der nächsten Section */ .ausb-foto { margin: 0; } .ausb-foto img { width: 100%; max-width: 320px; margin-inline: auto; margin-bottom: calc(-1 * clamp(64px, 9vw, 120px)); border-radius: 0; } @media (min-width: 1100px) { .ausbildung { grid-template-columns: 1.05fr 1fr 340px; } .ausb-foto { position: relative; z-index: 0; align-self: stretch; margin-bottom: calc(-1 * (clamp(64px, 9vw, 120px) + var(--kante))); } .ausb-foto img { position: absolute; right: calc(-1 * var(--rand)); bottom: 0; width: auto; height: 100%; max-width: none; margin: 0; object-fit: contain; object-position: right bottom; } .ausb-text, .ausb-mitte { position: relative; z-index: 1; } } .fuss nav ul { grid-template-columns: 1fr; gap: 8px; } /* Runde 19: Hinweise zu externen Diensten, Auto am Seitenende ausblenden */ .extern-hinweis { margin-top: 14px; max-width: 60ch; font-size: .85rem; line-height: 1.5; color: var(--leise); } .fuss .fuss-hinweis { margin-top: 26px; color: #aab3cc; } .begleiter { transition: opacity .35s ease, transform .35s ease; } .begleiter.weg { opacity: 0; transform: translateY(24px); pointer-events: none; } .begleiter.weg * { pointer-events: none; } /* ===== Runde 21: ein Abschnitt für alle 12 Leistungen – wählbar, mit Details ===== */ .chip { position: relative; padding: 0; display: block; } .chip-wahl { display: flex; flex-direction: column; gap: 10px; width: 100%; height: 100%; padding: 20px 20px 54px; border: 0; border-radius: inherit; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; } .chip-wahl:focus-visible { outline: 3px solid var(--rot-knopf); outline-offset: -3px; } .chip-wahl b { font: 700 1.25rem/1.05 var(--titel); letter-spacing: .005em; color: var(--navy); } .chip-wahl small { color: var(--leise); font-size: .9rem; line-height: 1.35; } .chip-wahl .icon { width: 26px; height: 26px; box-sizing: content-box; padding: 10px; border-radius: 14px; background: color-mix(in srgb, var(--rot) 9%, transparent); color: var(--rot-text); } .chip.ist-gewaehlt { border-color: var(--rot); box-shadow: inset 0 0 0 2px var(--rot), var(--hauch); background: color-mix(in srgb, var(--rot) 7%, var(--flaeche)); animation: chip-pop .35s cubic-bezier(.3, 1.8, .5, 1); } .chip.ist-gewaehlt::after { content: ""; position: absolute; top: 14px; right: 14px; width: 24px; height: 24px; border-radius: 50%; background: var(--rot) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat; pointer-events: none; } .chip-info { position: absolute; left: 20px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid var(--linie); border-radius: 999px; background: var(--flaeche); color: var(--navy); font: 600 .82rem var(--schrift); cursor: pointer; transition: border-color .2s, color .2s, background-color .2s; } .chip-info::after { content: " →"; margin-left: 4px; transition: transform .2s; } .chip-info:hover { border-color: var(--rot); color: var(--rot-text); } .chip-info:focus-visible { outline: 3px solid var(--rot-knopf); outline-offset: 2px; } /* Raster: 12 Kacheln → immer volle Reihen */ .chips { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 640px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 980px) and (max-width: 1180px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (min-width: 1181px) { .chips { grid-template-columns: repeat(3, minmax(0, 1fr)); } .chip { min-height: 0; } } @media (max-width: 400px) { .chip-wahl { padding: 16px 14px 52px; } .chip-wahl b { font-size: 1.08rem; } .chip-info { left: 14px; } } /* ===== Runde 22: Begrüßung als Karte mit „So einfach geht's“ ===== */ .hallo-karte { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(24px, 4vw, 48px); border-radius: 28px; background: linear-gradient(135deg, var(--kuehl) 0%, color-mix(in srgb, var(--kuehl) 60%, var(--flaeche)) 100%); border: var(--kartenrand); box-shadow: var(--hauch); position: relative; overflow: hidden; } .hallo-karte::before { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; background: radial-gradient(circle, rgba(31, 174, 91, .16), transparent 70%); pointer-events: none; } @media (min-width: 1000px) { .hallo-karte { grid-template-columns: 1.35fr 1fr; } } .hallo-innen { max-width: none; } .hallo .blase { background: var(--flaeche); } .chat-aktionen { margin-top: 22px; margin-left: 4px; gap: 12px; } .so-gehts { position: relative; z-index: 1; } .so-gehts h3 { font-size: 1.5rem; margin-bottom: 16px; } .so-gehts ol { position: relative; display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .so-gehts ol::before { content: ""; position: absolute; left: 21px; top: 30px; bottom: 30px; border-left: 2px dashed color-mix(in srgb, var(--rot) 45%, transparent); } .so-gehts li { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 16px 14px 0; } .so-gehts .nr { grid-row: 1 / span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--rot-knopf); color: #fff; font: 700 1.2rem var(--titel); box-shadow: 0 0 0 5px color-mix(in srgb, var(--kuehl) 100%, transparent); position: relative; z-index: 1; } .so-gehts li .icon { position: absolute; right: 8px; top: 12px; width: 22px; height: 22px; color: color-mix(in srgb, var(--leise) 60%, transparent); } .so-gehts b { font: 700 1.08rem/1.2 var(--schrift); color: var(--navy); padding-right: 30px; } .so-gehts span:not(.nr) { font-size: .93rem; line-height: 1.45; color: var(--leise); } .zettel .merkliste { align-content: start; } @media (max-width: 999px) { .chat-aktionen { margin-left: 0; } } .merkliste li { min-width: 0; } .merkliste li span:first-child { min-width: 0; overflow-wrap: anywhere; hyphens: auto; } .zettel { min-width: 0; } /* ===== Runde 22b: Handy – Foto neben den Namen, Blasen in voller Breite ===== */ @media (max-width: 600px) { .hallo-karte { padding: 22px 18px 26px; } .hallo-innen { display: block; position: relative; } .hallo-foto { position: absolute; left: 0; top: 0; margin: 0; width: 50px; } .chat-name { display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; min-height: 56px; padding-left: 64px; margin-bottom: 10px; } .chat-aktionen .knopf { flex: 1 1 100%; justify-content: center; } } .so-gehts .nr { align-self: start; } .so-gehts ol::before { top: 22px; bottom: 40px; } /* ===== Runde 23 ===== */ /* Laufband: weiß, Text blau, Trenner rot – auch im Dunkelmodus */ .laufband, :root[data-theme="dark"] .laufband { background: #fff; color: #202b52; border-bottom: 1px solid rgba(32, 43, 82, .12); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .laufband { background: #fff; color: #202b52; } :root:not([data-theme="light"]) .laufband li::after { background: var(--rot); } } .laufband li::after, :root[data-theme="dark"] .laufband li::after { background: var(--rot); } .laufband-pause { background: #202b52; color: #fff; box-shadow: none; } /* Nav-Insel: deutlicherer Rand */ .insel { border: 2px solid rgba(255, 255, 255, .42); box-shadow: 0 0 0 1px rgba(9, 22, 42, .35), 0 24px 50px -22px rgba(9, 22, 42, .75), inset 0 1px 0 rgba(255, 255, 255, .1); } /* Bühne: roter Text gerade, Textblock höher, Foto 1 mit der Person weiter rechts */ .buehne h1 em, .buehne .slide-titel em { font-style: normal; } @media (min-width: 900px) { .slide-text { align-self: start; padding-top: 124px; padding-bottom: 190px; } .foto-held img { object-position: 0% 0%; transform-origin: 0 0; transform: translateY(48px) scale(1.26); } .slide.aktiv .foto-held img { transform: translateY(48px) scale(1.16); } } @media (max-width: 899px) { .foto-held img { object-position: 30% 28%; } } @media (min-width: 900px) and (prefers-reduced-motion: reduce) { .foto-held img, .slide.aktiv .foto-held img { transform: translateY(48px) scale(1.16); } } /* Leistungen: Kacheln volle Breite, Anfrage-Kasten als Leiste darunter */ .picker { grid-template-columns: 1fr !important; align-items: start; } @media (min-width: 1181px) { .chips { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: auto; height: auto; } .chip { min-height: 0; } } .zettel, .zettel .merkliste { contain: none; overflow: visible; overscroll-behavior: auto; } .zettel .merkliste { max-height: none; flex: none; } @media (min-width: 900px) { .zettel { display: grid; grid-template-columns: minmax(220px, .9fr) minmax(0, 1.4fr) minmax(260px, 1fr); gap: 0 clamp(24px, 3vw, 44px); align-items: center; padding: 26px clamp(24px, 3vw, 36px); } .zettel .zettel-kopf { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; } .zettel .zettel-kopf h3 { grid-column: 1 / -1; margin: 0; } .zettel .tacho { max-width: 110px; margin: 6px 0 0; } .zettel .schritte { display: none; } .zettel .schritt-text { margin: 0; } .zettel .abzeichen { grid-column: 1 / -1; justify-self: start; margin-top: 10px; } .zettel .merkliste { margin: 0; min-height: 0; padding: 0 clamp(20px, 2.6vw, 36px); border-inline: 1px solid rgba(255, 255, 255, .14); align-self: stretch; align-content: center; } .zettel .zettel-aktion { display: flex; flex-direction: column; } .zettel .hinweis { margin: 0 0 12px; font-size: .78rem; line-height: 1.4; } .zettel #zettel-wa { margin-top: 0; } .zettel .zettel-link { margin-top: 12px; } } @media (min-width: 900px) and (max-width: 1180px) { .zettel { grid-template-columns: minmax(230px, .8fr) minmax(0, 1.2fr); } .zettel .merkliste { border-right: 0; padding-right: 0; } .zettel .zettel-aktion { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .14); } .zettel .hinweis { margin: 0; } .zettel #zettel-wa { width: auto; padding-inline: 26px; } .zettel .zettel-link { margin: 0; } } /* ===== Runde 27: Foto 1 – Kopf unter der Nav, oberer Rand weich ins Dunkelblau ===== */ @media (min-width: 900px) { .foto-held::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 170px; z-index: 1; background: linear-gradient(180deg, #09162a 0, #09162a 48px, rgba(9, 22, 42, 0) 100%); pointer-events: none; } } /* ===== Runde 29: Leistungen als längliche Zeilen untereinander, Anfrage-Kasten rechts daneben ===== */ .chips { grid-template-columns: 1fr !important; grid-auto-rows: auto; gap: 10px; height: auto; } .chip { min-height: 0 !important; } .chip:hover { transform: translateX(4px); } .chip-wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 2px; align-items: center; padding: 14px 150px 14px 16px; } .chip-wahl .icon { grid-row: 1 / span 2; } .chip-wahl b { grid-column: 2; align-self: end; font-size: 1.18rem; } .chip-wahl small { grid-column: 2; align-self: start; } .chip-info { left: auto; right: 56px; top: 50%; bottom: auto; transform: translateY(-50%); } .chip.ist-gewaehlt::after { top: 50%; right: 16px; margin-top: -12px; } .chip:not(.ist-gewaehlt)::before { content: ""; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; margin-top: -12px; box-sizing: border-box; border: 2px solid var(--linie); border-radius: 50%; pointer-events: none; } @media (max-width: 599px) { .chip-wahl { padding: 14px 52px 52px 14px; column-gap: 12px; } .chip-info { right: auto; left: 74px; top: auto; bottom: 12px; transform: none; } .chip-wahl b { font-size: 1.06rem; } .chip-wahl .icon { align-self: start; } } @media (min-width: 900px) { .picker { grid-template-columns: minmax(0, 1.65fr) minmax(300px, 1fr) !important; gap: clamp(20px, 2.4vw, 32px); align-items: start; } .zettel { position: sticky; top: 120px; display: flex; flex-direction: column; padding: 26px 26px 24px; } .zettel .zettel-kopf { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 16px; } .zettel .zettel-kopf h3 { grid-column: 1; margin: 0; } .zettel .tacho { grid-column: 2; grid-row: 1; max-width: 96px; margin: 0; } .zettel .abzeichen { grid-column: 1 / -1; } .zettel .merkliste { margin: 18px 0; padding: 16px 0; min-height: 90px; border: 0; border-block: 1px solid rgba(255, 255, 255, .14); align-content: start; } .zettel .zettel-aktion { display: flex; flex-direction: column; grid-column: auto; margin: 0; padding: 0; border: 0; } .zettel .hinweis { margin: 0 0 14px; } .zettel #zettel-wa { width: 100%; } .zettel .zettel-link { margin-top: 12px; } } @media (min-width: 900px) { .zettel { align-items: stretch; } .zettel .zettel-kopf { text-align: left; justify-items: start; } .zettel .tacho { justify-self: end; } .zettel .abzeichen { justify-self: start; margin-top: 12px; } } /* ===== Runde 30: Kontraste nach WCAG 2.2 AA (weiße Schrift mindestens 4,5 : 1) ===== */ .knopf.wa, .knopf.wa-rand:hover { background: #15803f; border-color: #15803f; } .knopf.wa-rand, .kanal.haupt { border-color: #15803f; } .kanal.haupt .icon { color: #15803f; } .termin .marke { background: var(--rot-knopf); } /* ===== Runde 31: CI aus den Druckvorlagen – Band „Auto – Teile – Zubehör“, Öffnungszeiten als Etiketten ===== */ .fuss-marke { flex-wrap: wrap; justify-content: center; max-width: max-content; } .marke-band { flex-basis: 100%; display: grid; margin-top: 12px; } .marke-band span { display: block; padding: 7px 22px 6px; background: #202b52; color: #fff; font: 700 1.02rem/1 var(--titel); letter-spacing: .08em; text-transform: uppercase; text-align: center; white-space: nowrap; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 100%, 12px 100%); } .marke-band::after { content: ""; height: 7px; margin: 0 12px; background: var(--rot); clip-path: polygon(0 0, 100% 0, calc(100% - 7px) 100%, 7px 100%); } .fuss .marke-band span { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); } /* ===== Runde 32: Kopf wie in der Druckvorlage – weiße Logo-Fläche, Diagonale, Navy-Band oben, rotes Band darunter ===== */ .kopf { --insel-h: 82px; --band: 22px; --kante: 214px; --schraeg: .62; } .kopf.gescrollt { --insel-h: 70px; --band: 18px; } .insel { background: #fff; border: 0; border-radius: 4px; overflow: hidden; padding-bottom: var(--band); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 0 0 1px rgba(9, 22, 42, .22), 0 24px 50px -22px rgba(9, 22, 42, .7); } /* Navy-Band: von der Diagonale bis rechts, oben */ .insel::before { left: 0; right: 0; top: 0; bottom: 0; width: auto; border-radius: 0; opacity: 1; background: #202b52; clip-path: polygon(var(--kante) 0, 100% 0, 100% calc(100% - var(--band)), calc(var(--kante) + (var(--insel-h) - var(--band)) * var(--schraeg)) calc(100% - var(--band))); } /* Rotes Band: setzt die Diagonale fort */ .insel::after { left: 0; right: 0; top: 0; bottom: 0; width: auto; border-radius: 0; opacity: 1; background: #ef3120; clip-path: polygon(calc(var(--kante) + (var(--insel-h) - var(--band)) * var(--schraeg)) calc(100% - var(--band)), 100% calc(100% - var(--band)), 100% 100%, calc(var(--kante) + var(--insel-h) * var(--schraeg)) 100%); } .insel-band { position: absolute; z-index: 1; right: 0; bottom: 0; left: calc(var(--kante) + var(--insel-h) * var(--schraeg)); height: var(--band); display: flex; align-items: center; justify-content: center; color: #fff; font: 700 .86rem/1 var(--titel); letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; pointer-events: none; transition: height .35s; } .kopf.gescrollt .insel-band { font-size: .76rem; } /* Logo über die volle Höhe der weißen Fläche */ .kopf .logo { align-self: stretch; align-items: center; margin-bottom: calc(-1 * var(--band)); } .kopf-cta { height: calc(var(--insel-h) - var(--band) - 16px); border-radius: 6px; } .menue-knopf { border-radius: 6px; } .nav-blob { border-radius: 3px; } @media (max-width: 999px) { .kopf { --insel-h: 68px; --band: 8px; --kante: 150px; } .kopf.gescrollt { --insel-h: 64px; --band: 7px; } .insel-band { display: none; } .kopf-cta, .menue-knopf { height: 44px; width: auto; } .menue-knopf { width: 44px; } } @media (max-width: 359px) { .kopf { --kante: 134px; } } .kopf .kopf-meta, .kopf .nav { position: relative; z-index: 1; } /* ===== Runde 33: Maskottchen fährt am Seitenende sportlich nach links aus dem Bild ===== */ .begleiter { transition: none; } .begleiter.weg { opacity: 1; transform: none; animation: wegfahren 1.25s cubic-bezier(.5, 0, .75, .2) forwards; } .begleiter.weg .maskottchen { animation: none; } .begleiter.weg .sprechblase { display: none; } @keyframes wegfahren { 0% { transform: translateX(0) rotate(0); } 14% { transform: translateX(10px) rotate(-3deg); } /* Anlauf: rollt zurück, Heck geht in die Knie */ 24% { transform: translateX(6px) rotate(-3deg); } 34% { transform: translateX(-18px) rotate(5deg); } /* Start: Front hebt an */ 52% { transform: translateX(-24vw) rotate(2deg); } 100% { transform: translateX(calc(-100vw - 110%)) rotate(0); visibility: hidden; } } /* Speed-Streifen hinter dem Auto (rechts) und Abgaswolke am Heck */ .begleiter::before, .begleiter::after { content: ""; position: absolute; pointer-events: none; opacity: 0; } .begleiter::before { left: 78%; top: 34%; width: 150%; height: 38%; background: repeating-linear-gradient(180deg, rgba(211, 24, 29, .75) 0 3px, transparent 3px 11px); -webkit-mask-image: linear-gradient(90deg, #000, transparent); mask-image: linear-gradient(90deg, #000, transparent); transform-origin: left center; } .begleiter::after { right: -6%; bottom: 8%; width: 34%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(160, 166, 184, .75), rgba(160, 166, 184, 0) 70%); } .begleiter.weg::before { animation: streifen 1.25s ease-out forwards; } .begleiter.weg::after { animation: abgas .7s ease-out .3s; } @keyframes streifen { 0%, 30% { opacity: 0; transform: scaleX(.2); } 45% { opacity: 1; transform: scaleX(1); } 100% { opacity: .8; transform: scaleX(1.4); } } @keyframes abgas { 0% { opacity: .9; transform: scale(.4) translateX(0); } 100% { opacity: 0; transform: scale(2.2) translateX(30px); } } /* Zurück beim Hochscrollen: fährt von rechts herein und nickt beim Bremsen */ .begleiter.zurueck { animation: reinfahren .8s cubic-bezier(.2, .8, .3, 1) both; } @keyframes reinfahren { 0% { transform: translateX(calc(100% + 40px)) rotate(0); } 70% { transform: translateX(-8px) rotate(4deg); } 85% { transform: translateX(2px) rotate(-1.5deg); } 100% { transform: translateX(0) rotate(0); } } @media (prefers-reduced-motion: reduce) { .begleiter { transition: opacity .35s ease; } .begleiter.weg { animation: none; opacity: 0; } .begleiter.weg::before, .begleiter.weg::after, .begleiter.zurueck { animation: none; } } /* ===== Runde 34: Wegfahren flüssig – kurzer Anlauf, dann eine durchgehende Beschleunigung ohne Zwischenstopp ===== */ .begleiter.weg { animation: wegfahren2 1s linear forwards; } @keyframes wegfahren2 { 0% { transform: translateX(0) rotate(0); animation-timing-function: ease-out; } 9% { transform: translateX(8px) rotate(-3deg); animation-timing-function: ease-in-out; } /* Anlauf */ 17% { transform: translateX(-6px) rotate(4deg); animation-timing-function: cubic-bezier(.4, 0, .9, .5); } /* Start, Front hebt */ 100% { transform: translateX(calc(-100vw - 110%)) rotate(1deg); visibility: hidden; } /* eine Strecke, stetig schneller */ } .begleiter.weg::before { animation: streifen2 1s ease-out forwards; } .begleiter.weg::after { animation: abgas .6s ease-out .12s; } @keyframes streifen2 { 0%, 15% { opacity: 0; transform: scaleX(.2); } 30% { opacity: 1; transform: scaleX(1); } 100% { opacity: .8; transform: scaleX(1.5); } } @media (prefers-reduced-motion: reduce) { .begleiter.weg { animation: none; } .begleiter.weg::before { animation: none; } } /* ===== Runde 37: senkrechte rot-weiße Schrägbalken im Startbild entfernt ===== */ .slide .balken.b1, .slide .balken.b2 { display: none; } /* ===== Runde 38: Kopf ohne Auto – ATZ-Logo mittig in der weißen Fläche (Mitte zwischen linkem Rand und Diagonale) ===== */ .kopf .logo .logo-auto { display: none; } .kopf .logo { --pl: 22px; margin-left: calc(-1 * var(--pl)); margin-right: 16px; width: calc(var(--kante) + var(--insel-h) * var(--schraeg) / 2); justify-content: center; } .kopf .logo .logo-atz { width: 104px; height: 70px; } .kopf.gescrollt .logo .logo-atz { width: 88px; height: 60px; } @media (max-width: 999px) { .kopf .logo { --pl: 14px; margin-right: 8px; } .kopf .logo .logo-atz, .kopf.gescrollt .logo .logo-atz { width: 78px; height: 53px; } } @media (max-width: 359px) { .kopf .logo .logo-atz, .kopf.gescrollt .logo .logo-atz { width: 70px; height: 48px; } } .kopf .logo { margin-right: 0; } @media (min-width: 1380px) { .kopf .nav a { padding: 10px 10px; } } /* Website: Entwurfs-Leiste entfällt */ .entwurf { display: none !important; } /* Spamschutz-Feld im Formular: für Menschen unsichtbar */ .atz-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* ===== Entwurf 2 (entwurf-2026/entwurf2.css) ===== */ /* Entwurf 2 – ruhigere Startseite: heller Startbereich, kein Slider, weniger Zierelemente. */ /* Weg: Laufband, Fortschrittslinie, Wasserzeichen, Maskottchen, Slider-Steuerung, Folien 2+3 */ .laufband-rahmen, .spur, .buehne .wasser, .begleiter, .slide-steuer { display: none !important; } .slide:not(:first-child) { display: none !important; } .slide:first-child { visibility: visible !important; opacity: 1 !important; z-index: 2; } .slide:first-child .slide-foto img { transform: none !important; } /* Startbereich hell wie die Druckvorlage: Navy nur noch im Kopf */ .buehne { background: linear-gradient(#fff calc(100% - 72px), var(--papier) 0) !important; color: var(--tinte); } .buehne .vorzeile { color: var(--leise, #5a6380) !important; } .buehne h1, .buehne .slide-titel { color: var(--navy) !important; } .buehne h1 em, .buehne .slide-titel em { color: #fff !important; } .buehne .unter { color: var(--tinte) !important; opacity: .85; } .buehne .knopf.rand-hell { border-color: var(--navy); color: var(--navy); } .buehne .knopf.rand-hell:hover { background: var(--navy); color: #fff; } .slide-foto::after { display: none; } /* Nur noch eine schräge Kante: roter Streifen bleibt, weißer und Querbalken weg */ .slide .balken.b2, .slide .balken.b3 { display: none !important; } /* Etwas mehr Luft unter dem Kopf */ @media (min-width: 900px) { .slide-text { padding-block: 150px 150px !important; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .buehne { background: linear-gradient(var(--papier) calc(100% - 72px), var(--papier) 0) !important; } } :root[data-theme="dark"] .buehne { background: var(--papier) !important; } /* Foto beginnt unter dem Kopf, damit Navy-Kopf nicht auf dunklem Foto liegt */ @media (min-width: 900px) { .slide:first-child .slide-foto { top: 128px; } } @media (max-width: 899px) { .buehne-oben { background: transparent !important; } } /* Nur für Kontroll-Screenshots: ?standbild schaltet Animationen ab */ html.standbild *, html.standbild *::before, html.standbild *::after { animation: none !important; transition: none !important; } /* Blauer Verlauf im Startbild von unten statt von oben */ .foto-held::before { inset: auto 0 0 0 !important; background: linear-gradient(0deg, #09162a 0, #09162a 48px, rgba(9, 22, 42, 0) 100%) !important; } /* Kopf wieder oben angeheftet, über die volle Breite (statt schwebender Insel). Inhalt bleibt auf Seitenbreite: --aussen = Abstand vom Fensterrand zur Inhaltskante */ .kopf { --aussen: max(var(--rand, 16px), calc((100vw - var(--breite)) / 2)); padding-top: 0 !important; height: var(--insel-h) !important; margin-bottom: calc(-1 * var(--insel-h)) !important; } .kopf.gescrollt { padding-top: 0 !important; } .kopf > .wrap { max-width: none; padding-inline: 0; } .insel { border-radius: 0 !important; padding-left: calc(22px + var(--aussen)) !important; padding-right: calc(10px + var(--aussen)) !important; box-shadow: 0 10px 30px -18px rgba(9, 22, 42, .6) !important; } .kopf { --kante-basis: 214px; --kante: calc(var(--kante-basis) + var(--aussen)); } .kopf .logo { width: calc(var(--kante-basis) + var(--insel-h) * var(--schraeg) / 2) !important; } @media (max-width: 999px) { .kopf { --kante-basis: 150px; } .insel { padding-left: calc(14px + var(--aussen)) !important; padding-right: calc(8px + var(--aussen)) !important; } } @media (max-width: 359px) { .kopf { --kante-basis: 134px; } } /* Startbereich an die neue Kopfhöhe anpassen */ @media (min-width: 900px) { .slide:first-child .slide-foto { top: var(--kopf-hoehe, 82px) !important; } .slide-text { padding-block: 130px 150px !important; } } @media (max-width: 899px) { .buehne-oben { padding-top: 68px !important; } } /* „Auto – Teile – Zubehör“ mittig zur ganzen Seite (rote Fläche bleibt ab der Diagonale) */ .insel-band { left: 0 !important; right: 0 !important; } /* ===== Entwurf 3 (entwurf-2026/entwurf3.css) ===== */ /* Entwurf 3 – offener und fließender (Anregung: ab-puritas.de). Baut auf entwurf2.css auf. Übernommen: viel Luft, weiche Übergänge statt harter Farbblöcke, schwebende Flächen, sanfte Schatten, ruhige Bewegung beim Scrollen. Nicht übernommen: Pillenformen/runde Ecken – die CI bleibt bei Diagonalen. */ :root { --hauch: 0 1px 2px rgba(20, 30, 60, .04), 0 18px 50px -26px rgba(20, 30, 60, .22); --hauch-hoch: 0 2px 6px rgba(20, 30, 60, .05), 0 34px 70px -30px rgba(20, 30, 60, .32); --kartenrand: 1px solid rgba(20, 30, 60, .06); --fluss: cubic-bezier(.22, .8, .2, 1); } /* ---------- Mehr Luft ---------- */ /* Einheitlicher Abstand zwischen Abschnitten: rund 90–110 px Inhalt-zu-Inhalt am Desktop */ .abschnitt { padding-block: clamp(28px, 3.2vw, 46px); --oben: clamp(28px, 3.2vw, 46px); } .hallo { padding-block: clamp(32px, 3.5vw, 48px) clamp(24px, 3vw, 40px); } h2 { font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; } .kopfzeile { margin-bottom: clamp(32px, 3.6vw, 52px); } .kopfzeile p, .kopfzeile .unter { max-width: 58ch; font-size: 1.08rem; line-height: 1.65; } /* ---------- Weiche Übergänge: graue Abschnitte laufen aus statt schräg abzuschneiden ---------- */ .abschnitt.kuehl { clip-path: none; margin-block: 0; z-index: 0; padding-block: clamp(32px, 3.6vw, 52px); background: linear-gradient(180deg, transparent 0, color-mix(in srgb, var(--kuehl) 85%, transparent) 40px, color-mix(in srgb, var(--kuehl) 85%, transparent) calc(100% - 40px), transparent 100%); } .abschnitt.kuehl { scroll-margin-top: calc(var(--kopf-h, 80px) + 20px - var(--oben)); } /* ---------- Dunkle Abschnitte als schwebende Fläche mit zwei schrägen Ecken (CI-Diagonale) ---------- */ .abschnitt.dunkel { --ecke: clamp(26px, 4.5vw, 72px); margin: clamp(8px, 1.5vw, 24px) clamp(10px, 2vw, 32px); padding-block: clamp(48px, 5.5vw, 76px); clip-path: polygon(var(--ecke) 0, 100% 0, 100% calc(100% - var(--ecke)), calc(100% - var(--ecke)) 100%, 0 100%, 0 var(--ecke)); box-shadow: none; background: radial-gradient(60% 70% at 88% 8%, rgba(239, 49, 32, .16), transparent 70%), radial-gradient(70% 80% at 6% 100%, rgba(64, 104, 190, .22), transparent 70%), #0b1730; } .abschnitt.dunkel { scroll-margin-top: calc(var(--kopf-h, 80px) + 20px - var(--oben)); } /* dünne rote Linie entlang der oberen Schräge als Akzent */ .abschnitt.dunkel::after { content: ""; position: absolute; left: 0; top: 0; width: calc(var(--ecke) * 1.42); height: 4px; background: var(--rot); transform-origin: 0 0; transform: translate(0, var(--ecke)) rotate(-45deg); pointer-events: none; } /* ---------- Ruhige Farbflächen im Hintergrund, die langsam treiben ---------- */ body { background: var(--papier); } main { position: relative; isolation: isolate; overflow-x: clip; } main::before, main::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); opacity: .55; animation: treiben 26s ease-in-out infinite alternate; } main::before { top: 1400px; left: -12vw; width: 46vw; height: 46vw; background: radial-gradient(circle, rgba(239, 49, 32, .22), transparent 65%); } main::after { top: 4200px; right: -14vw; width: 52vw; height: 52vw; background: radial-gradient(circle, rgba(32, 43, 82, .20), transparent 65%); animation-duration: 32s; } @keyframes treiben { to { translate: 6vw 220px; scale: 1.15; } } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) main::before, :root:not([data-theme="light"]) main::after { opacity: .3; } } :root[data-theme="dark"] main::before, :root[data-theme="dark"] main::after { opacity: .3; } /* Nur auf der langen Startseite – auf kurzen Unterseiten würden die Flächen die Seite verlängern */ .atz-unterseite main::before, .atz-unterseite main::after { content: none; } /* ---------- Karten: ohne harte Ränder, weich schwebend ---------- */ .chip, .leistung, .tafel, .formular, .kanal, .zeiten, .bew, .termin, .fakt, .fakt + .fakt { box-shadow: var(--hauch); } .leistung, .kanal, .bew, .fakt, .termin, .chip { transition: transform .45s var(--fluss), box-shadow .45s var(--fluss), background-color .3s, border-color .3s; } .leistung:hover, .kanal:hover, .bew:hover { transform: translateY(-6px); box-shadow: var(--hauch-hoch); } .hallo-karte { border: 0; box-shadow: var(--hauch); background: linear-gradient(135deg, color-mix(in srgb, var(--kuehl) 80%, var(--flaeche)) 0%, var(--flaeche) 100%); } /* Kennzahlen: luftiger, Zahl größer */ .fakt, .fakt + .fakt { padding: 26px 26px 24px; } .fakt strong { font-size: clamp(2.4rem, 3.4vw, 3.1rem); line-height: 1; } /* ---------- Bewegung: weicher und etwas länger ---------- */ .reveal { transition-duration: 1s, 1s, 1s; transition-timing-function: var(--fluss); translate: 0 40px; transition-delay: calc(var(--i, 0) * 90ms); } /* Bilder ziehen beim Scrollen leicht auf (nur Browser mit Scroll-Timeline; sonst statisch) */ @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { .inhaber img, .laden img, .besuch img, .ausbildung img { animation: aufziehen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; } @keyframes aufziehen { from { scale: 1.08; opacity: .6; } to { scale: 1; opacity: 1; } } } } @media (prefers-reduced-motion: reduce) { main::before, main::after { animation: none; } } /* ---------- Kopf: weiße Fläche beim Scrollen leicht gläsern ---------- */ .kopf.gescrollt .insel { background: rgba(255, 255, 255, .86); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); } /* ---------- Fuß: weicher Einstieg ---------- */ .fuss { background: radial-gradient(80% 90% at 90% 0, rgba(239, 49, 32, .12), transparent 60%), radial-gradient(120% 80% at 10% 0, #15264a, #09162a 60%); } /* ---------- Leistungen: schlichte Kachel-Übersicht (Merkliste/Tacho entfallen, siehe entwurf3.js) ---------- */ #leistungen .zettel { display: none !important; } #leistungen .picker { display: block !important; } #leistungen .chips { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: clamp(12px, 1.6vw, 22px) !important; } #chips .kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; min-height: 0; padding: 26px 24px 22px; border: var(--kartenrand); border-radius: var(--r); background: var(--flaeche); color: var(--tinte); text-align: left; font: inherit; cursor: pointer; box-shadow: var(--hauch); transition: transform .45s var(--fluss), box-shadow .45s var(--fluss); } /* Kacheln tragen .chip-info (Klick öffnet Details) – dessen Knopf-Positionierung zurücksetzen */ #chips .kachel.chip-info { position: relative; inset: auto; left: auto; right: auto; top: auto; bottom: auto; transform: none; min-height: 0; border-radius: var(--r); font: inherit; color: var(--tinte); } #chips .kachel.chip-info::after { content: none; } #chips .kachel.chip-info:hover { border-color: transparent; color: var(--tinte); transform: translateY(-6px); box-shadow: var(--hauch-hoch); } #chips .kachel:focus-visible { outline: 3px solid var(--rot-knopf); outline-offset: 3px; } #chips .kachel > .icon { width: 48px; height: 48px; padding: 11px; margin-bottom: 10px; border-radius: 12px; background: color-mix(in srgb, var(--rot) 10%, var(--flaeche)); color: var(--rot-knopf); } #chips .kachel b { font: 700 1.3rem/1.1 var(--titel); color: var(--navy); } #chips .kachel small { font-size: .95rem; line-height: 1.5; color: var(--leise); } #chips .kachel-mehr { margin-top: auto; padding-top: 12px; font-size: .88rem; font-weight: 600; color: var(--rot-text, var(--rot-knopf)); } #chips .kachel:hover .kachel-mehr { text-decoration: underline; } #chips .kachel-viel { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; padding: clamp(26px, 3vw, 40px); cursor: default; border: 0; color: #fff; background: radial-gradient(60% 120% at 95% 0, rgba(239, 49, 32, .25), transparent 70%), #0b1730; } #chips .kachel-viel:hover { transform: none; box-shadow: var(--hauch); } #chips .kachel.kachel-viel b { font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; text-transform: uppercase; } #chips .kachel.kachel-viel small { display: block; margin-top: 6px; color: #c9d0e4; font-size: 1.02rem; } #chips .kachel-aktion { display: flex; flex-wrap: wrap; gap: 12px; } #chips .kachel-viel .knopf.rand-hell { border-color: rgba(255, 255, 255, .5); color: #fff; } #chips .kachel-viel .knopf.rand-hell:hover { background: #fff; color: var(--nacht, #09162a); } @media (max-width: 1100px) { #leistungen .chips { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } } @media (max-width: 760px) { #leistungen .chips { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #chips .kachel { padding: 18px 16px; } #chips .kachel b { font-size: 1.12rem; } #chips .kachel small { font-size: .88rem; } } @media (max-width: 359px) { #leistungen .chips { grid-template-columns: 1fr !important; } } /* ---------- Ausbildung: „Was dich erwartet“ als schlichte Häkchen-Liste statt vier Karten ---------- */ .ausbildung .erwartet { display: grid !important; grid-template-columns: 1fr !important; gap: 0 !important; margin: 0; padding: 0; list-style: none; } .ausbildung .erwartet li { display: flex !important; align-items: baseline; gap: 12px; min-height: 0 !important; padding: 12px 0 !important; border: 0 !important; border-bottom: 1px solid rgba(255, 255, 255, .1) !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; } .ausbildung .erwartet li:last-child { border-bottom: 0 !important; } .ausbildung .erwartet li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2.5px solid var(--rot); border-bottom: 2.5px solid var(--rot); transform: translateY(-3px) rotate(-45deg); } .ausbildung .erwartet .icon, .ausbildung .erwartet span { display: none !important; } .ausbildung .erwartet b { font: 600 1.08rem/1.35 var(--schrift); color: #fff; text-transform: none; letter-spacing: 0; } /* Ausbildung: beide Knöpfe gleich breit (so breit wie der längere) */ .ausbildung .aktionen { display: grid !important; grid-template-columns: minmax(0, 1fr); width: max-content; max-width: 100%; gap: 12px; } .ausbildung .aktionen .knopf { width: 100%; justify-content: center; } /* Anfahrt: Foto oben ausrichten (Feinabstand setzt entwurf3.js) */ .besuch { align-items: start !important; } /* Preise: „+“-Merkknöpfe entfallen (Merkliste gibt es nicht mehr) */ .preis .merken { display: none !important; } .preis { grid-template-columns: 1fr auto !important; } /* ---------- Startbereich in CI-Farben (wie die Druckvorlagen: Navy-Fläche, rotes Band, harte Kanten, Schrägen) ---------- */ .buehne { background: var(--papier) !important; padding-bottom: 0 !important; color: #fff; } .buehne-oben { background: #202b52 !important; } /* rotes Band unten wie unter dem Navy-Kopf der Vorlagen */ .buehne-oben::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background: var(--rot); z-index: 5; } .slide:first-child, .slides { min-height: 0 !important; height: auto !important; } .foto-held::before, .slide .balken { display: none !important; } /* Foto mit roter Kante entlang der Schräge */ .slide:first-child .slide-foto { background: var(--rot); } .slide:first-child .slide-foto img { clip-path: polygon(calc(18% + 14px) 0, 100% 0, 100% 100%, 14px 100%); } .buehne .vorzeile { color: #c9d0e4 !important; } .buehne h1, .buehne .slide-titel { color: #fff !important; text-transform: uppercase; letter-spacing: .005em; } .buehne h1 em { font-style: normal; background: var(--rot-knopf); padding: 0 .14em; } .buehne .unter { color: #dfe3ef !important; opacity: 1 !important; } /* Knöpfe als Parallelogramm statt Pille */ .buehne .knopf { border-radius: 0 !important; clip-path: polygon(12px 0, 100% 0, calc(100% - 12px) 100%, 0 100%); padding-inline: 30px; box-shadow: none !important; border: 0 !important; } .buehne .knopf:hover { transform: none; filter: brightness(1.08); } .buehne .knopf.rand-hell { background: #fff !important; color: #202b52 !important; } .buehne .knopf.rand-hell:hover { background: #e9ecf4 !important; } .buehne .knopf:focus-visible { clip-path: none; outline: 3px solid #fff; outline-offset: 3px; } @media (min-width: 900px) { .slide-text { padding-block: calc(var(--kopf-hoehe, 82px) + 56px) 76px !important; } .slide:first-child .slide-foto { width: 56%; clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%) !important; } } @media (max-width: 899px) { .slide:first-child .slide-foto img { clip-path: polygon(0 0, 100% 0, 100% calc(84% - 12px), 0 calc(100% - 12px)); } .slide-text { padding-block: 22px 46px !important; } } /* Kennzahlen als leichte Kacheln mit runden Ecken: weiße Fläche, weicher Schatten, kurzer roter Akzent */ .fakten-band { margin-top: 0 !important; padding-block: clamp(32px, 3.6vw, 52px) 0; } .fakten { gap: clamp(12px, 1.6vw, 22px) !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch; } .fakt, .fakt + .fakt { position: relative; display: block !important; padding: 28px 26px 26px !important; border: var(--kartenrand) !important; border-radius: 20px !important; background: var(--flaeche) !important; box-shadow: var(--hauch) !important; transform: none !important; overflow: hidden; transition: transform .45s var(--fluss), box-shadow .45s var(--fluss); } /* Bühne nur seitlich abschneiden, damit der Schatten der Kacheln nach unten auslaufen kann */ .buehne { overflow: visible !important; overflow-x: clip !important; } /* Kennzahl-Kacheln: kein Hover-Effekt, dafür von Haus aus kräftigerer Schatten */ .fakt, .fakt + .fakt, .fakt:hover { transform: none !important; transition: none !important; box-shadow: 0 4px 12px rgba(20, 30, 60, .07), 0 30px 60px -22px rgba(20, 30, 60, .38) !important; } .fakt::before { display: block !important; content: ""; position: absolute; left: 26px; top: 0; width: 40px; height: 3px; background: var(--rot); border-radius: 0 0 3px 3px; transform: none; } .fakt strong { display: block; margin-bottom: 8px; font: 500 clamp(2.3rem, 3.4vw, 3.1rem)/1 var(--schrift) !important; letter-spacing: -.03em; color: var(--navy) !important; } .fakt span { display: block; color: var(--leise); font-size: .98rem; line-height: 1.5; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .fakt strong { color: #fff !important; } } :root[data-theme="dark"] .fakt strong { color: #fff !important; } @media (max-width: 760px) { .fakten { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .fakt, .fakt + .fakt { padding: 22px 18px 18px !important; border-radius: 16px !important; } .fakt::before { left: 18px; } .fakt span { font-size: .9rem; } .fakt strong { font-size: clamp(1.7rem, 7.4vw, 2.3rem) !important; white-space: nowrap; } } /* Überschrift sauber zweizeilig: „Ihre Werkstatt“ / „für alle Marken“ */ .buehne h1 { max-width: 10em !important; } .buehne h1 em { display: inline-block; } /* ---------- Kopf hell (Anregung: reifenkoenig / ab-puritas): klare Trennung von Navigation und Navy-Startbereich ---------- */ .kopf, .kopf.gescrollt { --band: 0px; } .insel::before, .insel::after, .insel-band { display: none !important; } .insel { background: #fff !important; padding-bottom: 0 !important; box-shadow: 0 1px 0 rgba(20, 30, 60, .08), 0 14px 34px -24px rgba(20, 30, 60, .45) !important; } .kopf .logo { margin-bottom: 0; } .kopf .nav a { color: #202b52; } .kopf .nav a:hover, .kopf .nav a[aria-current="true"] { color: #fff; } .kopf-meta { border-left-color: rgba(32, 43, 82, .14); } .kopf .kopf-meta .status { color: #3d4766; } .kopf .kopf-meta .status .lang { color: #6a7390; } .kopf .kopf-meta .sprache { border-color: rgba(32, 43, 82, .22); } .kopf .kopf-meta .sprache button { color: #3d4766; } .kopf .kopf-meta .sprache button[aria-pressed="true"] { background: #202b52; color: #fff; } .kopf-cta { height: calc(var(--insel-h) - 22px); box-shadow: none; } @media (max-width: 999px) { .kopf-cta { height: 44px; } } .menue-knopf { background: #fff !important; border: 1px solid rgba(32, 43, 82, .22) !important; } .menue-knopf span { background: #202b52 !important; } /* Kennzahl-Kacheln ragen in die Bühne hinein (Text unten entsprechend mehr Luft) */ .fakten-band { position: relative; z-index: 10; margin-top: calc(-1 * var(--ragen)) !important; padding-top: 0 !important; --ragen: clamp(40px, 5vw, 72px); } @media (min-width: 900px) { .slide-text { padding-bottom: calc(76px + var(--ragen, 72px)) !important; --ragen: clamp(40px, 5vw, 72px); } } @media (max-width: 899px) { .slide-text { padding-bottom: calc(46px + 40px) !important; } } /* Maskottchen (fahrendes Auto mit Tipps) wieder an – Entwurf 2 hatte es ausgeblendet */ .begleiter { display: block !important; } /* Countdown „Tage“: weiße Schrift auf dunklerem Rot (Kontrast ≥ 4,5:1, vorher ca. 4,2:1) */ .zaehltafel .kachel.haupt { background: linear-gradient(145deg, #d3181d, #a5101a); } .zaehltafel .kachel.haupt span { color: #fff; } /* Handy-Menü: Die Leiste schnitt das aufgeklappte Menü ab (overflow: hidden stammt vom roten Band, das es nicht mehr gibt) */ .insel { overflow: visible !important; } /* Anfahrt auf dem Handy: erst Überschrift, dann Foto, dann Adresse und Zeiten (vorher stand das Foto über der Überschrift) */ @media (max-width: 899px) { .besuch { display: flex !important; flex-direction: column; gap: 0 !important; } .besuch > div { display: contents; } .besuch .kopfzeile { order: -1; } .besuch-foto { margin: 0 0 28px !important; } }