/* AutoCenter Kirchheim — self-hosted stylesheet. No external fonts/CDNs: the CSP is 'self' only, so everything below is local and the type stack falls back to the OS UI font. */ :root { /* Blau/Grau: das Blau ist aus der Betriebshalle des Kunden abgeleitet. */ --accent: #2e88cc; /* Akzent auf dunklem Grund */ --accent-soft: #6fb6ee; /* Headlines/Zahlen, dunkler Grund */ --accent-deep: #15628f; /* Flächen mit weißer Schrift */ --radius: 14px; --radius-sm: 9px; --maxw: 1180px; --shadow: 0 1px 2px rgba(0, 0, 0, .18), 0 8px 28px -12px rgba(0, 0, 0, .35); --ease: cubic-bezier(.22, .61, .36, 1); --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } /* Dark is the default look; the toggle writes data-theme on . */ :root, :root[data-theme="dark"] { --bg: #0b1016; --bg-2: #0f161f; --surface: #131c27; --surface-2: #1a2532; --line: #223040; --line-strong: #31445a; --text: #eaf1f8; --text-dim: #a3b4c6; --text-faint: #7a8b9e; --hero-shade: linear-gradient(180deg, rgba(6, 10, 15, .55) 0%, rgba(6, 10, 15, .72) 45%, rgba(11, 15, 20, .96) 100%); --img-bg: #0d151e; } :root[data-theme="light"] { /* Auf Weiß braucht der Akzent mehr Tiefe (Kontrast >= 4.5:1). */ --accent: #15628f; --accent-soft: #1a74aa; --accent-deep: #124f74; --bg: #f3f6f9; --bg-2: #ffffff; --surface: #ffffff; --surface-2: #eef2f7; --line: #dbe3ec; --line-strong: #c2cedc; --text: #0d1720; --text-dim: #47586b; --text-faint: #66788c; --hero-shade: linear-gradient(180deg, rgba(8, 14, 22, .55) 0%, rgba(8, 14, 22, .66) 48%, rgba(243, 246, 249, .97) 100%); --img-bg: #e7edf4; } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* Nur die Markenzeile klebt — die Ansprechpersonen-Leiste scrollt weg. */ --head: 72px; scroll-padding-top: calc(var(--head) + 16px); -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; } /* height:auto ist Pflicht, sobald width/height traegt: die Attribute setzen eine echte CSS-Hoehe, und mit max-width:100% schrumpft dann nur die Breite — das Bild wird auf schmalen Displays gestaucht. */ img { max-width: 100%; height: auto; display: block; } a { color: inherit; } h1, h2, h3, h4 { line-height: 1.15; margin: 0 0 .5em; letter-spacing: -.02em; font-weight: 700; } h1 { font-size: clamp(2.1rem, 5.2vw, 3.9rem); } h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); } h3 { font-size: 1.16rem; } p { margin: 0 0 1em; } .wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--accent-deep); color: #ffffff; padding: 12px 18px; z-index: 999; border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; } .skip:focus { left: 0; } :where(a, button, summary, input, textarea, [tabindex]):focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* ------------------------------------------------------------------ header */ .top { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .top-inner { position: relative; /* containing block for the mobile nav panel */ display: flex; align-items: center; gap: 18px; min-height: 72px; } .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; margin-right: auto; } .brand svg { flex: none; } .brand span { display: block; font-size: 1.06rem; } .brand small { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); } .nav { display: flex; align-items: center; gap: 4px; } .nav a { text-decoration: none; color: var(--text-dim); padding: 9px 12px; border-radius: 8px; font-size: .95rem; font-weight: 600; white-space: nowrap; transition: color .18s var(--ease), background .18s var(--ease); } .nav a:hover { color: var(--text); background: var(--surface-2); } /* Kontakt als Schaltflaeche. Bleibt in NAV, damit das Mobilmenue den Eintrag behaelt — nur die Darstellung unterscheidet sich. Randlos gefuellt waere der staerkste Reiz, kollidiert aber mit dem CTA-Band weiter unten auf jeder Seite; die Kontur traegt genug und bleibt in beiden Farbschemata lesbar. */ .nav a.nav-cta { color: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent-soft) 55%, transparent); background: color-mix(in srgb, var(--accent-soft) 10%, transparent); margin-left: 8px; font-weight: 700; } .nav a.nav-cta:hover, .nav a.nav-cta[aria-current="page"] { color: #fff; background: var(--accent-deep); border-color: var(--accent-deep); } .top-actions { display: flex; align-items: center; gap: 10px; } .icon-btn { appearance: none; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; cursor: pointer; transition: color .18s var(--ease), border-color .18s var(--ease); } .icon-btn:hover { color: var(--text); border-color: var(--line-strong); } .icon-btn svg { width: 19px; height: 19px; } /* One icon per theme; JS only flips data-theme. */ :root[data-theme="light"] .i-moon { display: none; } :root:not([data-theme="light"]) .i-sun { display: none; } .nav-toggle { display: none; } /* ------------------------------------------- Ansprechpersonen unter dem Kopf Leiste UNTER der Hauptleiste, mit Funktion, Nummer und E-Mail. Sie liegt ausserhalb von `.top` und klebt deshalb NICHT mit: der Block ist rund 90px hoch (auf dem Telefon rund 140px), als klebende Zeile waere das dauerhaft ein Fuenftel des Schirms. Er steht auf jeder Seite ganz oben und scrollt weg; die Schaltflaeche „Kontakt" in der Hauptleiste bleibt erreichbar. */ .contactbar { background: color-mix(in srgb, var(--surface-2) 72%, transparent); border-bottom: 1px solid var(--line); } .cb-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 26px; padding-block: 14px; } .cb-list li { min-width: 0; } .cb-role { font-size: .71rem; font-weight: 700; color: var(--accent); line-height: 1.35; margin: 0 0 2px; } .cb-name { font-size: .95rem; font-weight: 800; color: var(--text); letter-spacing: -.01em; margin: 0 0 3px; } .cb-tel, .cb-mail { display: flex; align-items: center; gap: 6px; text-decoration: none; font-size: .86rem; padding: 2px 0; /* Tap-Target */ /* Lange E-Mail-Adressen und deutsche Komposita schieben die Spalte sonst nach rechts aus dem Schirm — nur `anywhere` verkleinert die min-content-Breite eines Grid-Items. */ overflow-wrap: anywhere; transition: color .18s var(--ease); } .cb-tel { font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; } .cb-mail { color: var(--text-dim); } .cb-tel svg, .cb-mail svg { width: 14px; height: 14px; flex: none; color: var(--accent-soft); } .cb-tel:hover, .cb-mail:hover { color: var(--accent); } /* ------------------------------------------------------------------ buttons */ .btn { --btn-bg: var(--accent-deep); --btn-fg: #ffffff; display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border: 1px solid transparent; border-radius: 11px; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-weight: 700; font-size: .98rem; text-decoration: none; cursor: pointer; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -10px rgba(21, 98, 143, .75); } .btn svg { width: 18px; height: 18px; flex: none; } .btn-ghost { --btn-bg: transparent; --btn-fg: var(--text); border-color: var(--line-strong); backdrop-filter: blur(6px); } .btn-ghost:hover { box-shadow: none; background: var(--surface-2); } .btn-sm { padding: 9px 15px; font-size: .9rem; border-radius: 9px; } /* ------------------------------------------------------------------ hero */ .hero { position: relative; isolation: isolate; padding: clamp(70px, 12vw, 140px) 0 clamp(40px, 6vw, 74px); overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; } .hero::before { background-image: url("img/hero.webp"); background-size: cover; background-position: center 62%; transform: scale(1.04); } .hero::after { background: var(--hero-shade); } /* Nur im Hero der Startseite („Kirchheim im Innkreis · Oberösterreich"). Feste helle Farben aus demselben Grund wie .hero h1, .hero .lead und .hero .btn-ghost: die Pille liegt auf dem dunklen Foto, nicht auf dem Seitenhintergrund. var(--accent-soft) war im hellen Theme #1a74aa und stand damit als mittleres Blau auf dunklem Grund — auf ihrer eigenen Fläche rgba(8,14,22,.55) sind das 3.0:1, unter der Schwelle für Text dieser Größe. Der Punkt muss mit: var(--accent) ist im hellen Theme #15628f und verschwand auf der dunklen Pille fast ganz; #6fb6ee ist der Wert, den der Halo darunter ohnehin schon fest führt. */ .eyebrow { display: inline-flex; align-items: center; gap: 9px; font-size: .78rem; font-weight: 700; letter-spacing: .17em; text-transform: uppercase; color: #fff; background: rgba(8, 14, 22, .55); border: 1px solid rgba(111, 182, 238, .38); padding: 7px 14px; border-radius: 999px; margin-bottom: 22px; } .eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: #6fb6ee; box-shadow: 0 0 0 4px rgba(111, 182, 238, .2); } .hero h1 { max-width: 17ch; color: #fff; text-shadow: 0 2px 24px rgba(0, 0, 0, .45); } .hero .lead { font-size: clamp(1.06rem, 1.9vw, 1.32rem); font-weight: 600; color: #eaf0f7; max-width: 46ch; text-shadow: 0 1px 14px rgba(0, 0, 0, .5); } .hero .lead-sub { color: #cfdae6; max-width: 52ch; font-size: 1.02rem; font-weight: 400; } .hero-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } /* Der Ghost-Button liegt wie die uebrige Hero-Schrift auf dem dunklen Foto, nicht auf dem Seitenhintergrund. var(--text) waere im hellen Theme #0d1720, also dunkel auf dunkel: --hero-shade wird erst ganz unten hell, die CTA-Zeile sitzt aber noch im dunklen Teil des Verlaufs. Deshalb feste helle Farben, genau wie .hero h1 und .hero .lead darueber. Der Hover muss mit: die Basisregel setzt var(--surface-2), im hellen Theme eine helle Flaeche — mit weisser Schrift waere der Text dann unlesbar. */ .hero .btn-ghost { --btn-fg: #fff; border-color: rgba(255, 255, 255, .45); } .hero .btn-ghost:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .7); } /* stat strip */ .stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; margin-top: clamp(44px, 7vw, 76px); background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .stat { background: color-mix(in srgb, var(--surface) 92%, transparent); padding: 22px 20px; } .stat b { display: block; font-size: clamp(1.35rem, 2.6vw, 1.9rem); letter-spacing: -.03em; color: var(--accent-soft); } .stat span { font-size: .87rem; color: var(--text-dim); font-weight: 600; } /* ------------------------------------------------------------------ sections */ section { padding: clamp(56px, 8vw, 104px) 0; } section + section { border-top: 1px solid var(--line); } .section-alt { background: var(--bg-2); } .head { max-width: 62ch; margin-bottom: clamp(30px, 4vw, 48px); } .head .kicker { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 12px; } .head p { color: var(--text-dim); margin-bottom: 0; } /* ------------------------------------------------------------------ services */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); gap: 20px; } /* Genau vier Gruppen: nebeneinander, darunter 2x2. Das auto-fit-Raster oben haette bei 1180px 3+1 ergeben — drei Kacheln und ein Nachzuegler. */ .cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1000px) { .cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .cards-4 { grid-template-columns: 1fr; } } .card { position: relative; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; text-decoration: none; box-shadow: var(--shadow); transition: transform .22s var(--ease), border-color .22s var(--ease); } .card:hover { transform: translateY(-4px); border-color: var(--accent); } .card-media { aspect-ratio: 16 / 10; background: var(--img-bg); overflow: hidden; } .card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); } .card:hover .card-media img { transform: scale(1.05); } .card-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; } .card-body h3 { margin-bottom: 8px; } .card-body p { color: var(--text-dim); font-size: .95rem; margin-bottom: 16px; } .card-more { margin-top: auto; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: .92rem; color: var(--accent); } .card-more svg { width: 15px; height: 15px; transition: transform .2s var(--ease); } .card:hover .card-more svg { transform: translateX(4px); } /* marque chips */ .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 34px; align-items: center; } .chips .chips-label { font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin-right: 4px; } .chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-dim); border-radius: 999px; padding: 7px 15px; font-size: .88rem; font-weight: 600; } /* Marken-Chips mit eigener Markenseite sind Links. Als brauchen sie eigene Regeln: ohne text-decoration:none traegt der Browser sonst eine Unterstreichung ein, und der Hover muss zeigen, dass da etwas klickbar ist — als reines gab es beides nicht. Akzentfarbe schon im Ruhezustand, nicht erst beim Hover: auf den Unterseiten stehen verlinkte und nicht verlinkte Chips in derselben Zeile (auf `schaltgetriebe` 8 von 21), und eine blosse Abstufung von --text-dim nach --text war im Rendern kaum zu sehen. Auf Touch gibt es ausserdem gar keinen Hover, dort ist der Ruhezustand die einzige Anzeige. Der Selektor ist `.chips a.chip` und nicht `a.chip`, weil `.prose-narrow a` weiter unten dieselbe Spezifitaet hat und spaeter steht — es hatte die Chips auf allen Unterseiten (die stehen in .prose-narrow) auf --accent gezogen, und das sind auf dunklem Grund nur 4.07:1 gegen die Chip-Flaeche. Deshalb je Theme eine eigene Farbe statt einer: --accent kommt auf dunklem Grund nicht auf 4.5:1, --accent-soft auf hellem Grund nur knapp (4.53). So sind es 7.09 (dunkel) und 5.88 (hell). */ .chips a.chip { text-decoration: none; color: var(--accent-soft); border-color: color-mix(in srgb, var(--accent-soft) 45%, var(--line)); transition: border-color .15s, color .15s, background .15s; } :root[data-theme="light"] .chips a.chip { color: var(--accent); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); } .chips a.chip:hover, .chips a.chip:focus-visible { border-color: var(--accent); color: var(--text); background: var(--surface); } /* ------------------------------------------------------------------ process */ .steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; counter-reset: step; } .step { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; } .step::before { counter-increment: step; content: counter(step, decimal-leading-zero); display: block; font-family: var(--mono); font-size: .95rem; font-weight: 700; color: var(--accent); margin-bottom: 12px; } .step h3 { font-size: 1.06rem; } .step p { color: var(--text-dim); font-size: .95rem; margin-bottom: 0; } /* ------------------------------------------------------------------ gallery */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; } .gallery button { appearance: none; border: 1px solid var(--line); padding: 0; background: var(--img-bg); border-radius: var(--radius-sm); overflow: hidden; cursor: zoom-in; aspect-ratio: 4 / 3; transition: transform .2s var(--ease), border-color .2s var(--ease); } .gallery button:hover { transform: translateY(-3px); border-color: var(--accent); } .gallery img { width: 100%; height: 100%; object-fit: cover; } /* lightbox */ .lb[hidden] { display: none; } .lb { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 12, .93); display: grid; grid-template-rows: 1fr auto; padding: 18px; backdrop-filter: blur(4px); } .lb-stage { display: grid; place-items: center; min-height: 0; } .lb-stage img { max-width: min(1100px, 100%); max-height: 100%; width: auto; border-radius: var(--radius-sm); box-shadow: 0 30px 80px -30px #000; } .lb-bar { display: flex; align-items: center; justify-content: center; gap: 14px; padding-top: 14px; color: #cbd5e1; font-size: .9rem; font-family: var(--mono); } .lb-btn { appearance: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer; display: grid; place-items: center; } .lb-btn:hover { background: rgba(255, 255, 255, .14); } .lb-btn svg { width: 20px; height: 20px; } .lb-close { position: absolute; top: 16px; right: 16px; } /* ------------------------------------------------------------------ about */ .split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 60px); align-items: center; } .split img { border-radius: var(--radius); border: 1px solid var(--line); } .split p { color: var(--text-dim); } .quote { margin: 26px 0 0; padding: 20px 24px; border-left: 3px solid var(--accent); background: var(--surface); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: 1.08rem; font-weight: 600; color: var(--text); font-style: italic; } .quote footer { margin-top: 8px; font-size: .85rem; font-style: normal; font-weight: 600; color: var(--text-faint); } /* ------------------------------------------------------------------ faq */ .faq { display: grid; gap: 10px; max-width: 900px; } .faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .18s var(--ease); } .faq details[open] { border-color: var(--line-strong); } .faq details:hover { border-color: var(--accent); } .faq summary { display: flex; align-items: center; gap: 12px; padding: 17px 22px; cursor: pointer; font-weight: 700; font-size: 1.02rem; list-style: none; } .faq summary::-webkit-details-marker { display: none; } /* Chevron drawn in CSS so no icon markup is needed per question. */ .faq summary::after { content: ""; margin-left: auto; flex: none; width: 9px; height: 9px; border-right: 2.2px solid var(--accent); border-bottom: 2.2px solid var(--accent); transform: rotate(45deg) translateY(-2px); transition: transform .2s var(--ease); } .faq details[open] summary::after { transform: rotate(-135deg) translateY(-2px); } .faq-body { padding: 0 22px 20px; } .faq-body p { color: var(--text-dim); margin: 0; font-size: .97rem; } .faq-body a { color: var(--accent); } /* ------------------------------------------------------------------ contact */ .contact-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(28px, 4vw, 48px); align-items: start; } .people { display: grid; gap: 14px; } .person { display: grid; grid-template-columns: 44px 1fr; gap: 15px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; } .person .avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(140deg, var(--accent) 0%, var(--accent-deep) 100%); color: #ffffff; display: grid; place-items: center; font-weight: 800; font-size: .95rem; letter-spacing: .02em; } .person h3 { font-size: 1.02rem; margin-bottom: 2px; } .person .role { font-size: .84rem; color: var(--accent); font-weight: 700; margin-bottom: 8px; } .person ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .person li { font-size: .92rem; color: var(--text-dim); } /* Tap-to-call is the main action on this page and these are standalone links, not prose, so the WCAG 2.5.8 inline exception does not cover them: pad them out to a 25px target instead of the bare 15px line box. */ .person a { color: var(--text); text-decoration: none; font-weight: 600; display: inline-block; padding: 5px 0; } .person a:hover { color: var(--accent); text-decoration: underline; } .info-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; } .info-card h3 { font-size: 1.02rem; } .hours { list-style: none; margin: 0; padding: 0; } .hours li { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: .95rem; } .hours li:last-child { border-bottom: 0; } .hours span:last-child { font-family: var(--mono); color: var(--text-dim); } .addr { font-style: normal; color: var(--text-dim); font-size: .95rem; } .addr strong { color: var(--text); } .geo-line { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 16px 0 0; } .geo-line .coords { font-family: var(--mono); font-size: .8rem; color: var(--text-faint); } /* form */ .form { display: grid; gap: 14px; } .field { display: grid; gap: 6px; } .field label { font-size: .86rem; font-weight: 700; color: var(--text-dim); } .field input, .field textarea { font: inherit; font-size: .97rem; color: var(--text); background: var(--bg); border: 1px solid var(--line-strong); border-radius: 10px; padding: 12px 14px; width: 100%; } .field textarea { min-height: 132px; resize: vertical; } .field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(46, 136, 204, .22); } .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-note { font-size: .82rem; color: var(--text-faint); margin: 0; } .form-msg { font-size: .93rem; font-weight: 600; margin: 0; min-height: 1.4em; } .form-msg[data-state="ok"] { color: #45c07f; } .form-msg[data-state="err"] { color: #ef6a5a; } /* ------------------------------------------------------------------ footer */ .foot { background: var(--bg-2); border-top: 1px solid var(--line); padding: 52px 0 30px; font-size: .93rem; } .foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; } .foot h4 { font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--text-faint); margin-bottom: 14px; } .foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } /* The links were bare text: a 15px-high tap target on a 23px pitch, which is under the 24x24 of WCAG 2.5.8 both on its own and via the spacing exception. Padding grows the target without changing the visual rhythm. */ .foot a { color: var(--text-dim); text-decoration: none; display: inline-block; padding: 5px 0; } .foot a:hover { color: var(--accent); } .foot .legal { margin-top: 38px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between; color: var(--text-faint); font-size: .85rem; } /* ------------------------------------------------------------------ legal pages */ .page { padding: clamp(48px, 7vw, 84px) 0; } .prose > * { max-width: 74ch; } /* see .prose-narrow: cap the children */ .prose h2 { margin-top: 1.8em; font-size: 1.35rem; } .prose h1 + p { color: var(--text-dim); } .prose dl, .prose-narrow dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 22px; margin: 0 0 1.6em; } .prose dt, .prose-narrow dt { font-weight: 700; color: var(--text-dim); } .prose dd, .prose-narrow dd { margin: 0; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; color: var(--text-dim); } .prose a { color: var(--accent); } /* A dd holds a single link, not a sentence — same tap-target reasoning as .person a. */ .prose dd a, .prose-narrow dd a { display: inline-block; padding: 4px 0; } .back { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--text-dim); text-decoration: none; margin-bottom: 26px; } .back:hover { color: var(--accent); } .back svg { width: 16px; height: 16px; } /* ------------------------------------------------------------------ responsive */ /* German compounds ("Hinterachsdifferential", "Verteilergetriebe-Kette") are longer than a 360px phone column and have no break opportunity, so an h1 pushed the whole document sideways. hyphens:auto does the pretty job where a dictionary is present (), break-word is the guarantee. */ body { overflow-wrap: break-word; } /* "(Fahrzeugidentifizierungsnummer" in a

did it too */ h1, h2, h3, h4, .card h3, .pcard h3, .step h3, .prose p, .prose-narrow p { hyphens: auto; } /* Vier volle Namen mit Hoerersymbol messen zusammen ~1060px und brauchen mit den Seitenraendern der .wrap rund 1105px Inhaltsbreite — die gibt es erst, wenn das Layout seine volle Breite (--maxw 1180px) erreicht hat. Darunter nicht umbrechen, sondern kuerzen: Symbol weg, Vornamen statt voller Namen. Die vier Vornamen sind eindeutig. */ @media (max-width: 1179px) { } @media (max-width: 1000px) { .split, .contact-grid { grid-template-columns: 1fr; } .foot-grid { grid-template-columns: 1fr 1fr; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 900px) { /* Vier Spalten mit Funktion, Nummer und E-Mail brauchen ~900px. */ .cb-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; } html { --head: 62px; } .top-inner { min-height: 62px; } } /* Vier verkuerzte Chips messen zusammen ~676px. Bis dahin stehen sie nebeneinander; erst darunter ins 2x2-Raster — sonst reisst die Leiste auf einem 768er-Tablet grundlos in zwei fast leere Zeilen auf. */ @media (max-width: 780px) { } /* Unter 480px sind zwei Spalten ~130px breit — da bricht „Herr Richard Reisinger" in drei Zeilen und die E-Mail mitten im Wort. Also einspaltig, dafuer Nummer und E-Mail nebeneinander: drei Zeilen je Eintrag statt fuenf. */ @media (max-width: 480px) { .cb-list { grid-template-columns: 1fr; gap: 13px; } .cb-list li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 18px; } .cb-role, .cb-name { flex-basis: 100%; } } @media (max-width: 560px) { body { font-size: 16px; } .foot-grid { grid-template-columns: 1fr; } .form-row { grid-template-columns: 1fr; } .gallery { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); } .brand small { display: none; } /* The dt column is max-content and never shrinks: "Umsatzsteuer-ID" plus a 150px dd came to 414px and pushed the impressum off a 360px screen. */ .prose dl, .prose-narrow dl { grid-template-columns: 1fr; gap: 2px; } .prose dt, .prose-narrow dt { margin-top: 12px; } .prose dd, .prose-narrow dd { margin-bottom: 4px; } } /* Below ~360px the brand and the header actions no longer fit side by side. */ @media (max-width: 380px) { .brand span { font-size: .95rem; } .brand { gap: 8px; } .brand .logo { width: 32px; height: 26px; } .top-actions { gap: 6px; } } @media print { .top, .foot, .lb, .hero::before, .hero::after, .gallery, .form { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } } /* ================================================================ pages Everything below serves the generated inner pages: breadcrumbs, page hero, data tables, the shop grid and the Anfragekorb. */ /* --------------------------------------------------------- breadcrumbs */ .crumbs { border-bottom: 1px solid var(--line); background: var(--bg-2); font-size: .85rem; } .crumbs ol { display: flex; flex-wrap: wrap; gap: 6px 10px; list-style: none; margin: 0; padding: 6px 0; /* links carry 5px of their own now — see .crumbs a */ color: var(--text-faint); } .crumbs li + li::before { content: "›"; margin-right: 10px; color: var(--line-strong); } .crumbs a { color: var(--text-dim); text-decoration: none; display: inline-block; padding: 5px 0; } .crumbs a:hover { color: var(--accent); text-decoration: underline; } .crumbs li[aria-current] { color: var(--text); font-weight: 600; } /* ----------------------------------------------------------- page hero */ .page-hero { padding: clamp(34px, 5vw, 62px) 0 clamp(20px, 3vw, 34px); background: radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%), var(--bg); border-bottom: 1px solid var(--line); } .page-hero h1 { font-size: clamp(1.8rem, 4vw, 2.9rem); max-width: 28ch; } .page-hero .lead { color: var(--text-dim); max-width: 62ch; font-size: 1.06rem; margin: 0; } .page-hero .kicker { font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); margin-bottom: 10px; } /* -------------------------------------------------------------- prose */ /* Cap the line length on the CHILDREN, not on the .wrap itself: overriding .wrap's max-width would also cancel its margin-inline:auto, and the text column ended up floating in the middle of the page, out of line with the left-flush h1 above it. */ .prose-narrow > * { max-width: 74ch; } .prose-narrow h3 { margin-top: 1.7em; font-size: 1.12rem; } .prose-narrow p { color: var(--text-dim); } .prose-narrow a { color: var(--accent); } ul.ticks { list-style: none; padding: 0; margin: 0 0 1.3em; display: grid; gap: 7px; } ul.ticks li { position: relative; padding-left: 26px; color: var(--text-dim); } /* A tick item that IS a link is a navigation target, not prose — pad it to a usable tap size and push the marker down by the same amount so lists without links keep their current alignment. */ ul.ticks li > a { display: inline-block; padding: 4px 0; } ul.ticks li:has(> a)::before { top: calc(.55em + 4px); } ul.ticks li::before { content: ""; position: absolute; left: 4px; top: .55em; width: 7px; height: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(45deg); } /* part numbers and gear ratios */ .pn, .ratio { font-family: var(--mono); font-size: .93em; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; white-space: nowrap; } .ratio { color: var(--accent); } /* ------------------------------------------------------------- tables */ .table-search { margin: 26px 0 14px; display: grid; gap: 7px; max-width: 520px; } .table-search label { font-size: .86rem; font-weight: 700; color: var(--text-dim); } .table-search input { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 14px; } .table-search input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(46, 136, 204, .22); } .tcount, .psearch .tcount { font-size: .82rem; color: var(--text-faint); font-family: var(--mono); margin: 0; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); } table.data { width: 100%; border-collapse: collapse; font-size: .93rem; } table.data th, table.data td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data th { position: sticky; top: 0; background: var(--surface-2); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--text-dim); white-space: nowrap; } table.data tbody tr:hover { background: var(--surface-2); } table.data td:first-child { white-space: nowrap; font-weight: 600; } table.data tr:last-child td { border-bottom: 0; } .tnote { font-size: .85rem; color: var(--text-faint); margin: 12px 0 0; } /* ---------------------------------------------------------------- shop */ .pfilter { display: flex; flex-wrap: wrap; gap: 18px 28px; align-items: flex-end; justify-content: space-between; margin: 30px 0 24px; padding-bottom: 22px; border-bottom: 1px solid var(--line); } .chip-btn { font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--text-dim); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; transition: border-color .18s var(--ease), color .18s var(--ease); } .chip-btn span { opacity: .6; font-family: var(--mono); font-size: .85em; } .chip-btn:hover { border-color: var(--line-strong); color: var(--text); } .chip-btn.is-on { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; } .chip-btn.is-on span { opacity: .8; } .psearch { display: grid; gap: 7px; min-width: 280px; flex: 1 1 280px; max-width: 420px; } .psearch label { font-size: .86rem; font-weight: 700; color: var(--text-dim); } .psearch input { font: inherit; color: var(--text); background: var(--bg-2); border: 1px solid var(--line-strong); border-radius: 10px; padding: 11px 14px; } .psearch input:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(46, 136, 204, .22); } .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(268px, 100%), 1fr)); gap: 18px; } .pcard { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .2s var(--ease), transform .2s var(--ease); } .pcard:hover { border-color: var(--line-strong); transform: translateY(-2px); } .pcard[hidden] { display: none; } .pcard-media { appearance: none; border: 0; padding: 0; background: var(--img-bg); cursor: zoom-in; aspect-ratio: 4 / 3; } .pcard-media img { width: 100%; height: 100%; object-fit: contain; } .pcard-body { padding: 15px 17px 17px; display: flex; flex-direction: column; flex: 1; } .pcard-cat { font-size: .72rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); margin: 0 0 6px; } .pcard h3 { font-size: .99rem; line-height: 1.3; margin-bottom: 7px; } .pcard-desc { font-size: .85rem; color: var(--text-faint); margin: 0 0 14px; } .pcard-foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .price-pill { font-family: var(--mono); font-weight: 700; font-size: 1rem; color: var(--text); background: var(--surface-2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; white-space: nowrap; } .add-item.is-added { background: transparent; color: var(--accent); border-color: var(--accent); } .pempty { margin-top: 26px; color: var(--text-dim); } /* ------------------------------------------------------- Anfragekorb */ .cart-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 44px); align-items: start; } .cart-list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 10px; } .cart-list li { display: flex; gap: 14px; align-items: flex-start; justify-content: space-between; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 13px 15px; } .cart-list strong { display: block; font-size: .93rem; font-weight: 600; } .cart-price { font-family: var(--mono); font-size: .85rem; color: var(--accent); } .cart-del { appearance: none; border: 1px solid var(--line-strong); background: transparent; color: var(--text-dim); width: 30px; height: 30px; border-radius: 8px; font-size: 1.1rem; line-height: 1; cursor: pointer; flex: none; } .cart-del:hover { color: #ef6a5a; border-color: #ef6a5a; } .cart-empty { color: var(--text-faint); font-size: .93rem; } .cart-btn { position: relative; } /* .icon-btn sets display:grid, which outranks the UA [hidden] rule. */ .cart-btn[hidden] { display: none; } .cart-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; border-radius: 999px; background: var(--accent-deep); color: #fff; font-size: .7rem; font-weight: 800; display: grid; place-items: center; padding: 0 4px; } /* ---------------------------------------------------------- CTA band */ .cta-band { border-top: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 55%), var(--bg-2); } .cta-inner { display: grid; grid-template-columns: 1.3fr .7fr; gap: clamp(22px, 4vw, 44px); align-items: center; padding: clamp(34px, 5vw, 58px) 22px; } .cta-inner h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); } .cta-inner p { color: var(--text-dim); margin-bottom: .6em; } .cta-note { font-size: .89rem; color: var(--text-faint); } .cta-note strong { color: var(--text-dim); } .cta-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; } .cta-actions .btn { justify-content: center; } /* --------------------------------------------------------- sib links */ .sib-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 10px; } .sib-list a { display: flex; align-items: center; gap: 10px; padding: 14px 17px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; font-weight: 600; font-size: .95rem; color: var(--text-dim); transition: border-color .18s var(--ease), color .18s var(--ease); /* Markenseiten: mehrere Gruppen in EINER section, damit die Seite nicht auseinanderfaellt — section-Padding je Gruppe ergab 400 px fuer einen einzelnen Link. Der Abstand zwischen den Gruppen traegt hier die Struktur. */ .brand-group + .brand-group { margin-top: 38px; } .brand-group h2 { font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 14px; } } .sib-list a::before { content: "›"; color: var(--accent); font-weight: 800; } .sib-list a:hover { border-color: var(--accent); color: var(--text); } /* ------------------------------------------------- Shop-Band auf /leistungen Der Shop ist keine fuenfte Leistungsgruppe, sondern Ware ab Lager — eigenes Band statt einer weiteren Kachel im selben Raster. */ .promo { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 14%, transparent) 0%, transparent 60%), var(--bg-2); } .promo-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 44px); align-items: center; padding-block: clamp(30px, 5vw, 52px); } .promo-media { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--img-bg); line-height: 0; } .promo-media img { width: 100%; height: auto; object-fit: cover; } .promo h2 { font-size: clamp(1.3rem, 2.4vw, 1.75rem); margin-bottom: .35em; } .promo p { color: var(--text-dim); } .promo-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; } @media (max-width: 780px) { /* Bild ueber den Text; darunter wird die Spalte zu schmal fuer beides. */ .promo-inner { grid-template-columns: 1fr; } } /* ------------------------------------------- Typenlisten auf der Kategorie Zeilenliste statt Kacheln: die Eintraege unterscheiden sich nur durch Titel und Umfang, ein Bild haette hier nichts zu zeigen (es sind Tabellen). Die Zeilenform traegt darum die Zahl als eigentliche Information. */ .numlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; } .numlist li { min-width: 0; } .numlist a { display: flex; min-width: 0; align-items: center; gap: 14px; padding: 15px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm); text-decoration: none; transition: border-color .18s var(--ease), background .18s var(--ease); } .numlist a:hover { border-color: var(--accent); background: var(--surface-2); } .numlist-text { display: grid; gap: 2px; /* Ohne min-width:0 sprengt ein langer Listentitel die Zeile nach rechts. */ min-width: 0; margin-right: auto; } .numlist-title { font-weight: 700; color: var(--text); font-size: 1rem; } .numlist-sub { font-size: .89rem; color: var(--text-dim); } .numlist-count { flex: none; font-size: .8rem; font-weight: 700; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 999px; padding: 4px 11px; font-variant-numeric: tabular-nums; } .numlist svg { flex: none; width: 18px; height: 18px; color: var(--accent); } @media (max-width: 480px) { /* Titel, Umfang und Pfeil nebeneinander passen nicht mehr — der Umfang rutscht unter den Titel, der Pfeil bleibt als Affordanz rechts. */ .numlist a { gap: 10px; padding: 13px 14px; } .numlist-text { gap: 4px; } .numlist-title { font-size: .95rem; } .numlist-count { align-self: start; } } /* Routenlink im Footer — die Adresse darueber ist Text, das hier die Aktion. */ .foot-route { margin: 12px 0 0; } .foot-route a { display: inline-flex; align-items: center; gap: 7px; padding: 5px 0; /* Tap-Target, siehe .foot a */ font-weight: 700; color: var(--text-dim); text-decoration: none; } .foot-route a:hover { color: var(--accent); } .foot-route svg { width: 15px; height: 15px; flex: none; } .hours-mini { font-size: .88rem; color: var(--text-faint); margin: 10px 0 0; } .logo { flex: none; } @media (max-width: 900px) { .cta-inner, .cart-grid { grid-template-columns: 1fr; } .nav-toggle { display: grid; } .nav { position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 18px 18px; background: var(--bg); border-bottom: 1px solid var(--line); box-shadow: var(--shadow); } .nav[hidden] { display: none; } .nav a { padding: 12px 10px; font-size: 1rem; } .nav a.nav-cta { margin: 6px 0 0; padding: 12px; text-align: center; } } .shop-note { max-width: 74ch; font-size: .92rem; color: var(--text-dim); background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 14px 18px; margin: 26px 0 0; } .shop-note strong { color: var(--text); } /* Runs of catalogue lines (part number + ratio) are stock lists, not prose. */ .parts-label { font-size: .82rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--text-faint); margin: 1.6em 0 .6em; } ul.parts { list-style: none; margin: 0 0 1.4em; padding: 0; display: grid; /* min() keeps the track from staying 320px wide inside a narrower column — a 320px phone leaves 276px after the .wrap padding and the list pushed the page sideways. */ grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)); gap: 6px 18px; } ul.parts li { font-size: .92rem; color: var(--text-dim); padding: 7px 0; border-bottom: 1px dashed var(--line); } /* --------------------------------------------------- 280px (Foldable-Cover) Bewusst am DATEIENDE: die Regeln unten ueberschreiben .psearch, ul.ticks und .faq summary, die weiter oben stehen — bei gleicher Spezifitaet gewinnt die spaetere Regel. Weiter oben platziert war der Block wirkungslos. */ @media (max-width: 320px) { .top-inner { gap: 10px; } .icon-btn { width: 34px; height: 34px; } .icon-btn svg { width: 17px; height: 17px; } /* Anrufen und Menue zaehlen; theme.js folgt ohnehin prefers-color-scheme. */ #theme-btn { display: none; } .brand span { font-size: .88rem; } /* Avatar-Spalte plus Text sprengt die Karte — Initialen ueber den Namen. */ .person { grid-template-columns: 1fr; gap: 10px; padding: 15px 16px; } /* Hartes min-width:280px in einer 236px breiten Spalte. */ .psearch { min-width: 0; flex: 1 1 auto; max-width: none; } .psearch input, .table-search input { width: 100%; min-width: 0; } /* Flex- und Grid-Items schrumpfen nicht unter ihre min-content-Breite, und overflow-wrap:break-word aendert die NICHT (nur 'anywhere' tut das). Mit deutschen Komposita wie "Hinterachsdifferential" schob das die Seite auf. */ .faq summary, ul.ticks li, .sib-list li, .sib-list li a, .numlist a, .numlist-title, .numlist-sub { overflow-wrap: anywhere; } ul.ticks li { padding-left: 22px; } }