/* CHEMTEC Sicherungssysteme, Relaunch 2026 · held: werbung */
@font-face { font-family: "Archivo"; src: url("../assets/fonts/archivo-var.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; src: url("../assets/fonts/geist-ext-var.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "JetBrains Mono"; src: url("../assets/fonts/jbmono-var.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --tinte: #070b1f; --nacht: #0c1233; --nacht-2: #141c47;
  --papier: #f3f5fa; --weiss: #fff; --linie: #d8ddeb; --linie-d: rgba(255,255,255,.14);
  --kobalt: #0033b3; --kobalt-2: #1b46d8; --kobalt-hell: #7d9bff;
  --text: #0e1230; --text-2: #4b5273; --text-d: #c4cae4;
  --signal: #d92d20;
  --sans: "Geist", "Helvetica Neue", Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --huelle: 1320px; --rand: clamp(20px, 4.5vw, 64px); --kopf-h: 76px;
  --weich: cubic-bezier(.22,.8,.22,1);
}
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); -webkit-text-size-adjust: 100%; }
html[data-text="2"] { font-size: 112.5%; } html[data-text="3"] { font-size: 127%; }
html[data-ruhe] { scroll-behavior: auto; }
body { margin: 0; font-family: var(--sans); font-size: 1.0625rem; line-height: 1.62; color: var(--text); background: var(--papier); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; } img { height: auto; }
a { color: inherit; } button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2 { margin: 0; font-weight: 300; line-height: 1.04; letter-spacing: -.04em; text-wrap: balance; }
h3 { margin: 0; font-weight: 500; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.6rem, 6.4vw, 5.9rem); } h2 { font-size: clamp(2rem, 4.2vw, 3.5rem); } h3 { font-size: 1.35rem; line-height: 1.15; }
p { margin: 0 0 1em; } ul, ol { margin: 0; padding: 0; list-style: none; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--kobalt-2); outline-offset: 3px; border-radius: 4px; }
.dunkel :focus-visible, .fuss :focus-visible { outline-color: #fff; }
::selection { background: var(--kobalt-2); color: #fff; }

.mono { font-family: var(--mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 500; }
.klein { font-size: .875rem; color: var(--text-2); }
.lead { font-size: clamp(1.1rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--text-2); max-width: 46em; }
.dunkel .lead { color: var(--text-d); }
.huelle { width: min(100% - 2 * var(--rand), var(--huelle)); margin-inline: auto; } .huelle--schmal { --huelle: 820px; }
.skip { position: fixed; left: 12px; top: -80px; z-index: 300; background: var(--kobalt); color: #fff; padding: 12px 18px; border-radius: 6px; font-weight: 600; transition: top .2s; } .skip:focus { top: 12px; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: .6em; min-height: 52px; padding: .7em 1.6em; border-radius: 999px; font-weight: 650; font-size: 1rem; text-decoration: none; border: 1.5px solid transparent; transition: transform .35s var(--weich), background .25s, color .25s, border-color .25s, box-shadow .25s; position: relative; }
.knopf:hover { transform: translateY(-2px); } .knopf:active { transform: translateY(0) scale(.98); }
.knopf--voll { background: var(--kobalt); color: #fff; width: 100%; } .knopf--voll:hover { background: var(--kobalt-2); box-shadow: 0 12px 28px -12px rgba(0,51,179,.7); }
.knopf--blau { background: var(--kobalt); color: #fff; } .knopf--blau:hover { background: var(--kobalt-2); box-shadow: 0 14px 30px -14px rgba(0,51,179,.75); }
.knopf--hell { background: #fff; color: var(--tinte); } .knopf--hell:hover { background: var(--kobalt-hell); }
.knopf--geist { border-color: rgba(255,255,255,.35); color: #fff; } .knopf--geist:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.knopf--linie { border-color: var(--linie); background: var(--weiss); color: var(--text); } .knopf--linie:hover { border-color: var(--kobalt); color: var(--kobalt); }
.knopf--klein { min-height: 44px; padding: .45em 1.1em; font-size: .9rem; }
.knopf .plus { width: 14px; height: 14px; position: relative; flex: none; transition: transform .4s var(--weich); }
.knopf .plus::before, .knopf .plus::after { content: ""; position: absolute; inset: 6px 0; background: currentColor; border-radius: 2px; } .knopf .plus::after { transform: rotate(90deg); transition: transform .4s var(--weich), opacity .3s; }
.knopf.ist-gemerkt { background: var(--kobalt); border-color: var(--kobalt); color: #fff; } .knopf.ist-gemerkt .plus::after { transform: rotate(0); opacity: 0; }
.pfeil { display: inline-flex; align-items: center; gap: .55em; font-weight: 650; text-decoration: none; color: var(--kobalt); padding: .45em 0; min-height: 44px; }
.pfeil::after { content: ""; width: 22px; height: 10px; background: currentColor; clip-path: polygon(0 40%, 72% 40%, 72% 0, 100% 50%, 72% 100%, 72% 60%, 0 60%); transition: transform .35s var(--weich); }
.pfeil:hover::after { transform: translateX(6px); }
.schliessen { width: 44px; height: 44px; border-radius: 50%; border: 1.5px solid var(--linie); position: relative; flex: none; transition: transform .35s var(--weich), border-color .2s; }
.schliessen::before, .schliessen::after { content: ""; position: absolute; left: 12px; right: 12px; top: 50%; height: 1.5px; background: currentColor; transform: rotate(45deg); } .schliessen::after { transform: rotate(-45deg); }
.schliessen:hover { transform: rotate(90deg); border-color: var(--kobalt); }

/* Kopfzeile */
.kopf { position: fixed; inset: 0 0 auto; z-index: 100; color: var(--text); transition: background .35s, color .35s, box-shadow .35s, transform .45s var(--weich); }
.kopf__innen { height: var(--kopf-h); width: min(100% - 2 * var(--rand), 1500px); margin-inline: auto; display: flex; align-items: center; gap: 28px; }
.kopf__logo { display: block; flex: none; width: clamp(150px, 15vw, 215px); } .kopf__logo img { width: 100%; }
.logo-neg { display: none; }
.kopf--hell, .unterseite .kopf, .kopf.mega-offen { background: rgba(255,255,255,.92); backdrop-filter: blur(14px) saturate(1.4); color: var(--text); box-shadow: 0 1px 0 var(--linie); }
.kopf--weg { transform: translateY(-100%); }
.nav { margin-left: auto; } .nav__liste { display: flex; gap: 4px; }
.nav__link { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .95rem; position: relative; transition: background .2s; }
.nav__link:hover, .nav__link[aria-expanded="true"] { background: rgba(0,51,179,.09); } .nav__link svg { transition: transform .3s var(--weich); } .nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }
.kopf__werkzeug { display: flex; align-items: center; gap: 6px; }
.wz { min-width: 44px; height: 44px; padding: 0 11px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; position: relative; border: 1.5px solid transparent; transition: background .2s, border-color .2s; }
.wz:hover, .wz[aria-expanded="true"] { background: rgba(0,51,179,.09); } .wz__text { font-size: .85rem; font-weight: 650; }
.wz--korb { border-color: currentColor; padding-inline: 14px; } .wz--korb:hover { background: var(--kobalt); border-color: var(--kobalt); color: #fff; }
.wz__zahl { min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; background: var(--kobalt-2); color: #fff; font: 600 .7rem/20px var(--mono); text-align: center; }
.wz__zahl[data-leer] { display: none; }
.wz--burger { display: none; flex-direction: column; gap: 6px; } .wz--burger span { width: 22px; height: 2px; background: currentColor; transition: transform .35s var(--weich); }
.wz--burger[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); } .wz--burger[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }

.mega { position: absolute; inset: 100% 0 auto; background: #fff; color: var(--text); border-top: 1px solid var(--linie); box-shadow: 0 40px 60px -30px rgba(7,11,31,.35); animation: megaAuf .4s var(--weich); max-height: calc(100vh - var(--kopf-h)); overflow: auto; }
@keyframes megaAuf { from { opacity: 0; transform: translateY(-10px); } }
.mega__innen { width: min(100% - 2 * var(--rand), 1500px); margin-inline: auto; padding: 30px 0 34px; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 0 40px; }
.mega__spalte { display: grid; gap: 26px; align-content: start; } .mega__spalte--breit ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
.mega__gruppe .mono { color: var(--text-2); margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--linie); }
.mega__eintrag { display: flex; align-items: center; gap: 14px; padding: 7px 8px 7px 6px; margin-inline: -6px; border-radius: 12px; text-decoration: none; transition: background .2s, transform .35s var(--weich); }
.mega__bild { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #fff; border: 1px solid var(--linie); } .mega__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform .5s var(--weich); }
.mega__name b { display: block; font-weight: 550; font-size: .97rem; line-height: 1.25; } .mega__name small { font: 500 .68rem var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
.mega__eintrag:hover { background: var(--papier); transform: translateX(4px); } .mega__eintrag:hover b { color: var(--kobalt); } .mega__eintrag:hover img { transform: scale(1.12) rotate(-3deg); }
.mega__seite { grid-column: 1 / -1; margin-top: 26px; background: var(--tinte); color: #fff; border-radius: 14px; padding: 16px 18px 16px 24px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.mega__frage { margin: 0; font-size: 1.15rem; font-weight: 400; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 18px; } .mega__frage .mono { color: var(--kobalt-hell); }

.sprache { position: relative; }
.sprache__menue { position: absolute; right: 0; top: calc(100% + 10px); width: 270px; background: #fff; color: var(--text); border-radius: 14px; border: 1px solid var(--linie); box-shadow: 0 24px 50px -20px rgba(7,11,31,.4); padding: 16px; }
.sprache__titel { font: 500 .72rem var(--mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); margin-bottom: 8px; }
.sprache__liste { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; } .sprache__liste button { width: 100%; text-align: left; min-height: 40px; padding: 0 10px; border-radius: 8px; font-size: .93rem; }
.sprache__liste button:hover { background: var(--papier); } .sprache__liste button.is-active { background: var(--kobalt); color: #fff; }
.sprache__einwilligung { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); font-size: .82rem; line-height: 1.45; color: var(--text-2); } .sprache__einwilligung .knopf { background: var(--kobalt); color: #fff; width: 100%; }
.sprache__zurueck { margin-top: 10px; width: 100%; min-height: 40px; border-radius: 8px; border: 1px solid var(--linie); font-size: .88rem; font-weight: 600; }
.goog-te-banner-frame, .skiptranslate iframe, #goog-gt-tt { display: none !important; } body { top: 0 !important; }

.mobil { position: fixed; inset: var(--kopf-h) 0 0; z-index: 99; background: #fff; overflow: auto; padding: 18px var(--rand) 40px; animation: megaAuf .35s var(--weich); }
.mobil nav > a, .mobil summary { display: flex; align-items: center; justify-content: space-between; min-height: 58px; font-size: 1.3rem; font-weight: 550; text-decoration: none; border-bottom: 1px solid var(--linie); cursor: pointer; list-style: none; }
.mobil summary::-webkit-details-marker { display: none; } .mobil summary::after { content: "+"; font: 400 1.4rem var(--mono); color: var(--kobalt); } .mobil details[open] summary::after { content: "−"; }
.mobil details a img { width: 40px; height: 40px; object-fit: contain; border-radius: 8px; border: 1px solid var(--linie); background: #fff; flex: none; }
.mobil details a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding-left: 4px; text-decoration: none; color: var(--text-2); border-bottom: 1px dashed var(--linie); }
.mobil__kontakt { margin-top: 28px; font-family: var(--mono); font-size: .9rem; line-height: 2; } .mobil__kontakt a { text-decoration: none; }

/* Hero */
.hero { position: relative; min-height: 100svh; background: radial-gradient(90% 80% at 74% 42%, #fff 0%, #f6f8fc 40%, #e6eaf4 100%); color: var(--text); overflow: hidden; display: flex; align-items: center; isolation: isolate; }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.hero__raster { position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(rgba(0,51,179,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,51,179,.07) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(90% 80% at 70% 45%, #000 20%, transparent 78%); }
.hero__ersatz { display: none; position: absolute; right: 8%; top: 50%; width: min(38vw, 420px); transform: translateY(-50%); opacity: .08; }
.hero--ohne3d .hero__ersatz { display: block; } .hero--ohne3d .hero__canvas, .hero--ohne3d .hud { display: none; }
.hero__innen { position: relative; z-index: 2; width: min(100% - 2 * var(--rand), 1500px); margin-inline: auto; padding: calc(var(--kopf-h) + 40px) 0 90px; pointer-events: none; }
.hero__text { max-width: min(760px, 54%); pointer-events: auto; }
.hero__eyebrow { display: flex; align-items: center; gap: 12px; color: var(--kobalt); margin-bottom: 28px; }
.punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--kobalt); box-shadow: 0 0 0 0 rgba(0,51,179,.5); animation: puls 2.4s infinite; }
@keyframes puls { 70% { box-shadow: 0 0 0 12px rgba(0,51,179,0); } 100% { box-shadow: 0 0 0 0 rgba(0,51,179,0); } }
.hero h1 { font-weight: 300; font-size: clamp(1.9rem, 3.7vw, 3.7rem); line-height: 1.1; width: max-content; max-width: calc(100vw - 2 * var(--rand)); } .hero h1 em { font-style: normal; color: rgba(0,51,179,.32); }
.zeile { display: block; overflow: hidden; padding-bottom: .08em; } .zeile > span { display: block; }
.hero__sub { margin: 30px 0 38px; font-size: clamp(1.08rem, 1.45vw, 1.3rem); line-height: 1.5; color: var(--text-2); max-width: 34em; }
.hero__claim { display: block; margin-top: .55em; font-weight: 500; color: var(--text); }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__status { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; width: min(100% - 2 * var(--rand), 1500px); margin-inline: auto; padding: 0 0 30px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 32px; border-top: 1px solid var(--linie); padding-top: 18px; } .hero__nr { justify-self: end; }
.status { display: inline-flex; align-items: center; gap: 10px; } .status__licht { width: 10px; height: 10px; border-radius: 50%; background: #f5a524; box-shadow: 0 0 14px #f5a524; transition: background .3s, box-shadow .3s; }
.status.ist-zu .status__licht { background: #12a150; box-shadow: 0 0 12px rgba(18,161,80,.6); }
.hero__skala { display: flex; align-items: center; gap: 16px; color: var(--text-2); justify-self: center; } .hero__balken { width: clamp(90px, 16vw, 240px); height: 2px; background: var(--linie); } .hero__balken i { display: block; height: 100%; width: 0; background: var(--kobalt); }
.hero__nr { font-size: .95rem; letter-spacing: .2em; color: var(--text-2); }
.hud { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hud__marke { position: absolute; left: 0; top: 0; display: flex; align-items: center; gap: 10px; font: 500 .68rem/1.35 var(--mono); letter-spacing: .07em; text-transform: uppercase; color: var(--text-2); opacity: 0; white-space: nowrap; will-change: transform; }
.hud__marke i { width: 9px; height: 9px; border: 1.5px solid var(--kobalt); border-radius: 50%; flex: none; position: relative; } .hud__marke i::after { content: ""; position: absolute; left: 100%; top: 50%; width: 34px; height: 1px; background: var(--kobalt); opacity: .5; } .hud__marke span { margin-left: 34px; }

.hud__marke--oben { flex-direction: column-reverse; align-items: flex-start; gap: 0; } .hud__marke--oben i::after { left: 50%; top: auto; bottom: 100%; width: 1px; height: 30px; } .hud__marke--oben span { margin: 0 0 36px; }
.hud__marke--links { flex-direction: row-reverse; } .hud__marke--links i::after { left: auto; right: 100%; } .hud__marke--links span { margin: 0 34px 0 0; }
@media (max-width: 1100px) { .hud { display: none; } }

/* Sektionen */
.sektion { padding: clamp(72px, 10vw, 150px) 0; position: relative; }
.sektion__kopf { margin-bottom: clamp(36px, 5vw, 68px); max-width: 900px; } .sektion__kopf h2 { margin-bottom: 20px; }
.nr { color: var(--kobalt); margin-bottom: 18px; display: flex; align-items: center; gap: 12px; }
.dunkel { background: var(--tinte); color: #fff; } .dunkel .nr { color: var(--kobalt-hell); }
body.start main > section:nth-of-type(2) { position: relative; z-index: 3; border-top: 1px solid var(--linie); }

.zahlen { background: var(--weiss); padding: clamp(40px, 5vw, 70px) 0; border-bottom: 1px solid var(--linie); }
.zahlen__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.zahl { padding: 6px 28px; border-left: 1px solid var(--linie); display: flex; flex-direction: column; gap: 10px; } .zahl:first-child { border-left: 0; padding-left: 0; }
.zahl b { font-size: clamp(2.4rem, 4.6vw, 4.2rem); font-weight: 300; line-height: 1; color: var(--kobalt); font-variant-numeric: tabular-nums; letter-spacing: -.02em; } .zahl > span { color: var(--text-2); font-size: .95rem; line-height: 1.45; max-width: 22em; }

/* Finder */
.sektion--schmal { padding: clamp(48px, 6vw, 84px) 0; }
.finder { background: var(--papier); background-image: linear-gradient(var(--linie) 1px, transparent 1px), linear-gradient(90deg, var(--linie) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; }
.finder::before { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(243,245,250,.55), var(--papier) 90%); pointer-events: none; } .finder .huelle { position: relative; }
.finder__teaser { display: grid; grid-template-columns: 1fr auto; gap: 24px 48px; align-items: center; } .finder__teaser h2 { margin-bottom: 14px; } .finder__teaser .lead { margin: 0; }
.finder-reiter { position: fixed; left: 0; top: 50%; z-index: 90; transform: translateY(-50%); writing-mode: vertical-rl; transform-origin: center; rotate: 180deg; display: inline-flex; align-items: center; gap: 10px; padding: 16px 10px 16px 12px; min-height: 44px; background: var(--tinte); color: #fff; border-radius: 0 12px 12px 0; font-size: .82rem; font-weight: 650; letter-spacing: .04em; box-shadow: 0 10px 30px -12px rgba(4,6,26,.6); transition: background .2s, padding .3s var(--weich); }
.finder-reiter { rotate: 0deg; writing-mode: vertical-rl; transform: translateY(-50%) rotate(180deg); border-radius: 12px 0 0 12px; }
.finder-reiter svg { transform: rotate(90deg); } .finder-reiter:hover { background: var(--kobalt); padding-left: 16px; }
.finder-lade { position: fixed; z-index: 200; top: 0; left: 0; bottom: 0; width: min(100%, 620px); background: #fff; color: var(--text); overflow: auto; overscroll-behavior: contain; box-shadow: 30px 0 80px -30px rgba(4,6,26,.5); animation: schubL .5s var(--weich); padding: 26px clamp(18px, 3vw, 30px) 34px; } @keyframes schubL { from { transform: translateX(-100%); } }
.finder-lade__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 18px; } .finder-lade__kopf .mono { color: var(--kobalt); margin-bottom: 6px; } .finder-lade h2 { font-size: 1.7rem; }
.finder-lade__kacheln { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kachel { position: relative; background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 14px; padding: 14px 12px 12px; text-align: left; display: flex; flex-direction: column; gap: 2px; min-height: 0; transition: transform .35s var(--weich), border-color .25s, background .3s, color .3s, box-shadow .3s; }
.kachel svg { width: 44px; height: 44px; fill: none; stroke: var(--text); stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; transition: stroke .3s; margin-bottom: 8px; } .kachel svg .akzent { stroke: var(--kobalt-2); stroke-width: 2.2; }
.kachel b { font-size: .92rem; line-height: 1.2; } .kachel span:not(.kachel__haken) { font-size: .76rem; color: var(--text-2); line-height: 1.3; transition: color .3s; }
.kachel__haken { position: absolute; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--linie); background: #fff; transition: background .2s, border-color .2s; } .kachel__haken::after { content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg) scale(0); transition: transform .25s var(--weich); }
.kachel:hover { transform: translateY(-3px); border-color: var(--kobalt); box-shadow: 0 16px 30px -22px rgba(0,51,179,.6); }
.kachel[aria-pressed="true"] { background: var(--kobalt); border-color: var(--kobalt); color: #fff; } .kachel[aria-pressed="true"] svg { stroke: #fff; } .kachel[aria-pressed="true"] svg .akzent { stroke: #ffd166; } .kachel[aria-pressed="true"] span:not(.kachel__haken) { color: #d5ddff; }
.kachel[aria-pressed="true"] .kachel__haken { background: #fff; border-color: #fff; } .kachel[aria-pressed="true"] .kachel__haken::after { border-color: var(--kobalt); transform: rotate(45deg) scale(1); }
.finder-lade__filter { display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; column-gap: 14px; align-items: center; padding: 14px 18px; margin-bottom: 14px; border-radius: 14px; background: var(--kobalt); color: #fff; text-decoration: none; transition: background .2s, transform .35s var(--weich); }
.finder-lade__filter:hover { background: var(--kobalt-2); transform: translateY(-2px); } .finder-lade__filter-titel { font-weight: 650; font-size: 1.05rem; } .finder-lade__filter-text { font-size: .85rem; opacity: .85; }
.finder-lade__filter i { grid-row: 1 / 3; width: 22px; height: 10px; background: currentColor; clip-path: polygon(0 40%, 72% 40%, 72% 0, 100% 50%, 72% 100%, 72% 60%, 0 60%); }
.finder-lade__zahl { margin: 22px 0 10px; color: var(--text-2); }
.finder-lade__liste { display: grid; gap: 8px; } .finder-lade .kkachel { grid-template-columns: 64px 1fr; padding: 10px 12px 10px 10px; } .finder-lade .kkachel__bild { width: 64px; } .finder-lade .kkachel__nr { display: none; }
.welt__raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; }

.kkachel { position: relative; display: grid; grid-template-columns: 92px 1fr; grid-template-rows: auto auto; column-gap: 16px; align-items: center; padding: 14px 16px 14px 14px; background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 14px; text-decoration: none; overflow: hidden; transition: border-color .25s, transform .45s var(--weich), box-shadow .3s; }
.kkachel__bild { grid-row: 1 / 3; width: 92px; aspect-ratio: 1; border-radius: 9px; overflow: hidden; background: #fff; } .kkachel__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform .6s var(--weich); }
.kkachel__text { min-width: 0; padding-right: 14px; } .kkachel__text b { display: block; hyphens: manual; overflow-wrap: break-word; font-size: 1.05rem; line-height: 1.2; } .kkachel__text small { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .83rem; color: var(--text-2); line-height: 1.35; margin-top: 4px; }
.kkachel__zahl { color: var(--kobalt); font-size: .68rem; align-self: end; } .kkachel__nr { position: absolute; right: 12px; top: 10px; font-size: .65rem; color: var(--text-2); opacity: .7; }
.kkachel:hover { border-color: var(--kobalt); transform: translateY(-3px); box-shadow: 0 18px 34px -24px rgba(0,51,179,.55); } .kkachel:hover img { transform: scale(1.08) rotate(-3deg); }
.kkachel.ist-aus { display: none; }

.welt { background: var(--weiss); } .welt__gruppe { scroll-margin-top: calc(var(--kopf-h) + 24px); } .welt__gruppe + .welt__gruppe { margin-top: 44px; }
.welt__titel { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1.5px solid var(--text); font-size: 1.5rem; } .welt__titel i { font-style: normal; color: var(--text-2); }
.welt .kkachel { background: var(--papier); border-color: transparent; } .welt .kkachel:hover { border-color: var(--kobalt); background: #fff; }

/* Aushängeschilder */
.schild { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 6vw, 96px); align-items: center; padding: clamp(28px, 4vw, 56px) 0; border-top: 1px solid var(--linie); }
.schild--gedreht .schild__bild { order: 2; }
.schild__bild { background: #fff; border-radius: 22px; overflow: hidden; aspect-ratio: 5 / 4; border: 1px solid var(--linie); } .schild__bild img { width: 100%; height: 100%; object-fit: contain; padding: 4%; }
.schild__text .mono { color: var(--kobalt); margin-bottom: 14px; } .schild__text h3 { font-size: clamp(1.9rem, 3.4vw, 3rem); margin-bottom: 20px; } .schild__text p { color: var(--text-2); max-width: 36em; }
.schild__links { display: flex; flex-wrap: wrap; gap: 4px 28px; margin-top: 14px; }

.void { border-radius: 22px; overflow: hidden; border: 1px solid var(--linie); background: #fff; }
.void__flaeche { position: relative; aspect-ratio: 5 / 3.1; background: #f6f5f1; background-image: radial-gradient(rgba(0,0,0,.035) 1px, transparent 1.2px); background-size: 7px 7px; display: grid; place-items: center; touch-action: pan-y; overflow: hidden; }
.void__rueckstand, .void__etikett, .void__lasche { position: absolute; left: 16%; right: 16%; top: 50%; height: 36%; transform: translateY(-50%); border-radius: 7px; overflow: hidden; }
.void__rueckstand { opacity: 0; } .void__rueckstand::before { content: ""; position: absolute; inset: -60%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22120%22%3E%3Cg%20font-family%3D%22Arial%20Black%2CArial%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%2230%22%20fill%3D%22%23d8262b%22%20letter-spacing%3D%221%22%3E%3Ctext%20x%3D%220%22%20y%3D%2234%22%3EVOID%20OPEN%3C%2Ftext%3E%3Ctext%20x%3D%22-70%22%20y%3D%2294%22%3EOPEN%20VOID%20O%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2294%22%3EPEN%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 130px 60px; transform: rotate(-16deg); }
.void[data-modus="mit"] .void__rueckstand { opacity: 1; }
.void__etikett { --e: #d7262b; --e2: #b61a20; background: linear-gradient(180deg, var(--e), var(--e2)); color: #fff; box-shadow: 0 2px 4px rgba(0,0,0,.28); cursor: grab; clip-path: inset(0 0 0 var(--falz, 0%)); }
.void[data-modus="ohne"] .void__etikett { --e: #1d9150; --e2: #14733e; }
.void__vorn { position: absolute; inset: 0; display: grid; place-items: center; }
.void__feld { display: grid; grid-template-columns: auto auto; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 6px 12px; background: #f4f4f2; color: #111; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.void__code { grid-row: 1 / 3; width: clamp(54px, 9vw, 96px); height: clamp(22px, 4vw, 38px); background: repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 8px, #111 8px 11px, transparent 11px 13px, #111 13px 14px, transparent 14px 17px); }
.void__feld b { font-size: clamp(.6rem, 1.3vw, .95rem); letter-spacing: .1em; } .void__feld small { font: 700 clamp(.5rem, 1vw, .7rem) var(--sans); letter-spacing: .12em; }
.void__zupf { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 0; height: 0; border-block: 9px solid transparent; border-right: 12px solid rgba(255,255,255,.85); animation: zupf 1.6s infinite var(--weich); } @keyframes zupf { 50% { transform: translateX(7px); } }
.void.ist-beruehrt .void__zupf { display: none; }
.void__lasche { right: auto; width: 0; opacity: 0; background: linear-gradient(90deg, var(--e2, #b61a20), var(--e, #d7262b) 40%, var(--e, #d7262b)); box-shadow: 8px 6px 18px rgba(0,0,0,.3); border-radius: 0 7px 7px 0; pointer-events: none; }
.void[data-modus="ohne"] .void__lasche { --e: #1d9150; --e2: #14733e; }
.void__lasche::before { content: ""; position: absolute; inset: -60%; background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22120%22%3E%3Cg%20font-family%3D%22Arial%20Black%2CArial%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%2230%22%20fill%3D%22%23ffffff%22%20letter-spacing%3D%221%22%3E%3Ctext%20x%3D%220%22%20y%3D%2234%22%3EVOID%20OPEN%3C%2Ftext%3E%3Ctext%20x%3D%22-70%22%20y%3D%2294%22%3EOPEN%20VOID%20O%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2294%22%3EPEN%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-size: 130px 60px; transform: rotate(16deg) scaleX(-1); }
.void[data-modus="ohne"] .void__lasche::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22260%22%20height%3D%22120%22%3E%3Cg%20font-family%3D%22Arial%20Black%2CArial%2CHelvetica%2Csans-serif%22%20font-weight%3D%22900%22%20font-size%3D%2230%22%20fill%3D%22rgba%28255%2C255%2C255%2C0.42%29%22%20letter-spacing%3D%221%22%3E%3Ctext%20x%3D%220%22%20y%3D%2234%22%3EVOID%20OPEN%3C%2Ftext%3E%3Ctext%20x%3D%22-70%22%20y%3D%2294%22%3EOPEN%20VOID%20O%3C%2Ftext%3E%3Ctext%20x%3D%22200%22%20y%3D%2294%22%3EPEN%3C%2Ftext%3E%3C%2Fg%3E%3C%2Fsvg%3E"); }
.void__bedienung { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 16px 20px; border-top: 1px solid var(--linie); }
.umschalter { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--papier); border: 1px solid var(--linie); } .umschalter button { min-height: 40px; padding: 0 16px; border-radius: 999px; font-size: .88rem; font-weight: 650; transition: background .25s, color .25s; } .umschalter button[aria-pressed="true"] { background: var(--tinte); color: #fff; }
.void__regler { flex: 1; min-width: 200px; display: flex; align-items: center; gap: 14px; color: var(--text-2); } .void__regler input { flex: 1; accent-color: var(--kobalt); height: 28px; }
.void__erklaerung { padding: 14px 16px; border-left: 3px solid var(--signal); background: #fff; border-radius: 0 10px 10px 0; font-size: .95rem; color: var(--text) !important; }

/* Individualisierung */
.individuell { overflow: hidden; background: radial-gradient(90% 80% at 80% 30%, #131c52, var(--tinte) 70%); }
.individuell__raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.individuell h2 { margin-bottom: 22px; } .individuell__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.ind-karten { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ind-karte { align-content: start; padding: 22px 22px 20px; border: 1px solid var(--linie-d); border-radius: 16px; background: rgba(255,255,255,.04); display: grid; gap: 6px; transition: border-color .3s, background .3s, transform .45s var(--weich); }
.ind-karte:hover { border-color: rgba(125,155,255,.6); background: rgba(255,255,255,.07); transform: translateY(-4px); }
.ind-karte svg { width: 34px; height: 34px; fill: none; stroke: var(--kobalt-hell); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; margin-bottom: 8px; }
.ind-karte b { font-weight: 550; font-size: 1.05rem; line-height: 1.25; } .ind-karte span { font-size: .9rem; line-height: 1.5; color: var(--text-d); }
.schritte { grid-column: 1 / -1; margin-top: clamp(28px, 4vw, 48px); padding-top: clamp(24px, 3vw, 36px); border-top: 1px solid var(--linie-d); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.schritt { display: grid; grid-template-columns: 40px 1fr; gap: 4px 16px; align-items: start; } .schritt > .mono { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--kobalt-hell); color: var(--kobalt-hell); display: grid; place-items: center; font-size: .9rem; }
.schritt b { font-weight: 550; line-height: 1.3; padding-top: 8px; } .schritt > span:last-child { font-size: .9rem; line-height: 1.5; color: var(--text-d); }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; margin: 0; } /* Honeypot gegen Spam, fuer Menschen unsichtbar */
.haken { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; font-size: .93rem; line-height: 1.45; min-height: 44px; padding-top: 9px; }
.haken input { appearance: none; flex: none; width: 24px; height: 24px; margin: 0; border: 2px solid #8a93b5; border-radius: 6px; background: #fff; box-shadow: inset 0 1px 2px rgba(14,18,48,.12); display: grid; place-items: center; transition: background .2s, border-color .2s; cursor: pointer; opacity: .9; }
.haken input::after { content: ""; width: 12px; height: 7px; border-left: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(-45deg) scale(0); margin-top: -3px; transition: transform .25s var(--weich); } .haken:hover input:not(:checked) { border-color: var(--kobalt); } .haken input:checked { background: var(--kobalt-2); border-color: var(--kobalt-2); box-shadow: none; } .haken input:checked::after { transform: rotate(-45deg) scale(1); }

/* Unternehmen */
.firma { background: var(--papier); }
.zeitachse { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; position: relative; counter-reset: z; }
.zeitachse::before { content: ""; position: absolute; left: 0; right: 0; top: 5px; height: 1.5px; background: var(--linie); } .zeitachse::after { content: ""; position: absolute; left: 0; top: 5px; height: 1.5px; width: calc(var(--fortschritt, 0) * 100%); background: var(--kobalt); }
.zeitachse li { padding: 34px 28px 0 0; position: relative; } .zeitachse li::before { content: ""; position: absolute; left: 0; top: 0; width: 11px; height: 11px; border-radius: 50%; background: var(--papier); border: 2px solid var(--kobalt); z-index: 1; }
.zeitachse .mono { color: var(--kobalt); font-size: .85rem; } .zeitachse h3 { margin: 10px 0 12px; font-size: 1.4rem; } .zeitachse p { color: var(--text-2); font-size: .97rem; }

.werte { background: var(--weiss); border-top: 1px solid var(--linie); } .werte__raster { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: start; }
.wert { border-top: 1.5px solid var(--text); padding-top: 20px; } .wert .mono { color: var(--kobalt); } .wert h3 { margin: 12px 0; font-size: 1.5rem; } .wert p { color: var(--text-2); margin: 0; }

/* Kontakt + Formulare */
.kontakt__raster { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 100px); align-items: start; } .kontakt h2 { margin-bottom: 22px; }
.kontakt__daten { margin-top: 36px; border-top: 1px solid var(--linie-d); } .kontakt__daten li { display: grid; grid-template-columns: 110px 1fr; align-items: center; min-height: 60px; border-bottom: 1px solid var(--linie-d); font-size: 1.15rem; font-weight: 600; } .kontakt__daten .mono { color: var(--kobalt-hell); } .kontakt__daten a { text-decoration: none; } .kontakt__daten a:hover { color: var(--kobalt-hell); }
.formular { background: rgba(255,255,255,.05); border: 1px solid var(--linie-d); border-radius: 22px; padding: clamp(22px, 3vw, 40px); display: grid; gap: 16px; } .formular__zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.formular label:not(.haken), .korb__kontakt label:not(.haken) { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; font-size: .88rem; font-weight: 600; } .optional { font-weight: 400; opacity: .6; font-size: .8rem; }
.formular input:not([type=checkbox]), .formular textarea { width: 100%; min-height: 52px; padding: 12px 16px; background: rgba(255,255,255,.06); border: 1.5px solid var(--linie-d); border-radius: 12px; color: #fff; transition: border-color .2s; resize: vertical; } .formular input:focus, .formular textarea:focus { border-color: var(--kobalt-hell); outline: none; }
.formular .knopf { justify-self: start; } .formular a { color: var(--kobalt-hell); } .formular__meldung { margin: 0; padding: 12px 16px; border-radius: 10px; background: rgba(255,255,255,.1); font-size: .93rem; } .formular__meldung.ok { background: rgba(54,211,153,.16); }
[aria-invalid="true"] { border-color: #ff8a80 !important; }

/* Fuß */
.fuss { background: #04061a; color: var(--text-d); padding: clamp(56px, 7vw, 100px) 0 0; font-size: .93rem; }
.fuss__innen { width: min(100% - 2 * var(--rand), 1500px); margin-inline: auto; display: grid; grid-template-columns: 1.5fr 2fr 1fr 1fr 1fr 1.2fr; gap: 36px; }
.fuss__marke img { width: 200px; margin-bottom: 20px; } .fuss address { font-style: normal; line-height: 1.9; margin-top: 18px; } .fuss a { text-decoration: none; transition: color .2s; } .fuss a:hover { color: #fff; }
.fuss__spalte .mono { color: #fff; margin-bottom: 14px; } .fuss__spalte li a { display: block; padding: 5px 0; min-height: 32px; } .fuss__spalte:first-of-type ul { columns: 2; column-gap: 24px; }
.fuss__unten { width: min(100% - 2 * var(--rand), 1500px); margin: 56px auto 0; padding: 22px 0 28px; border-top: 1px solid var(--linie-d); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; } .fuss__unten p { margin: 0; } .fuss__unten ul { display: flex; flex-wrap: wrap; gap: 8px 26px; } .fuss__unten a { display: inline-flex; align-items: center; min-height: 32px; }

/* Unterseiten */
.unterseite main { padding-top: var(--kopf-h); }
.brot { display: flex; flex-wrap: wrap; gap: 8px; color: var(--text-2); margin-bottom: 26px; } .brot a { text-decoration: none; } .brot a:hover { color: var(--kobalt); } .brot [aria-current] { color: var(--text); }
.kathero { background: var(--weiss); padding: clamp(36px, 5vw, 72px) 0 clamp(40px, 5vw, 80px); border-bottom: 1px solid var(--linie); }
.kathero__raster { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(28px, 5vw, 80px); align-items: center; } .kathero h1 { font-size: clamp(2.3rem, 5vw, 4.4rem); margin-bottom: 20px; } .kathero .lead { color: var(--kobalt); font-weight: 650; margin-bottom: 18px; } .kathero p:not(.lead) { color: var(--text-2); max-width: 44em; }
.kathero__bild { border-radius: 22px; overflow: hidden; background: var(--papier); aspect-ratio: 1; max-height: 440px; justify-self: end; width: 100%; } .kathero__bild img { width: 100%; height: 100%; object-fit: contain; }
.katliste { padding-top: clamp(36px, 4vw, 60px); } .katliste__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 14px; margin-bottom: 26px; color: var(--text-2); }
.katliste__nachbarn { display: flex; flex-wrap: wrap; gap: 6px; } .katliste__nachbarn a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--linie); background: #fff; font-size: .85rem; font-weight: 600; text-decoration: none; color: var(--text); transition: border-color .2s, color .2s; } .katliste__nachbarn a:hover { border-color: var(--kobalt); color: var(--kobalt); } .katliste__nachbarn [aria-current] { background: var(--tinte); border-color: var(--tinte); color: #fff; }
.pkarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 16px; }
.pkarte { background: var(--weiss); border: 1.5px solid var(--linie); border-radius: 18px; overflow: hidden; display: flex; flex-direction: column; transition: border-color .25s, transform .45s var(--weich), box-shadow .3s; } .pkarte:hover { border-color: var(--kobalt); transform: translateY(-4px); box-shadow: 0 26px 44px -30px rgba(0,51,179,.55); }
.pkarte__bild { display: block; aspect-ratio: 4 / 3; background: #fff; overflow: hidden; border-bottom: 1px solid var(--linie); } .pkarte__bild img { width: 100%; height: 100%; object-fit: contain; transition: transform .7s var(--weich); } .pkarte:hover .pkarte__bild img { transform: scale(1.06); }
.pkarte__text { padding: 20px 20px 16px; display: flex; flex-direction: column; flex: 1; gap: 10px; } .pkarte h3 a { text-decoration: none; } .pkarte h3 a::after { content: ""; } .pkarte p { font-size: .92rem; color: var(--text-2); margin: 0; line-height: 1.5; }
.pkarte__daten { display: grid; gap: 0; margin-top: 4px; text-transform: none; letter-spacing: 0; font-size: .78rem; } .pkarte__daten li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-top: 1px dashed var(--linie); } .pkarte__daten span { color: var(--text-2); } .pkarte__daten b { font-weight: 600; text-align: right; }
.pkarte__fuss { margin-top: auto; padding-top: 12px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.hinweisband__raster { display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; } .hinweisband h2 { margin-bottom: 16px; } .hinweisband__knoepfe { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; } .hinweisband { padding: clamp(56px, 7vw, 100px) 0; }

.produkt { background: var(--weiss); padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 110px); }
.produkt__raster { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.produkt__links { position: sticky; top: calc(var(--kopf-h) + 20px); } .galerie__gross { border-radius: 22px; border: 1px solid var(--linie); background: #fff; aspect-ratio: 1; overflow: hidden; } .galerie__gross img { width: 100%; height: 100%; object-fit: contain; }
.galerie__klein { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; } .galerie__klein button { width: 76px; height: 76px; border-radius: 12px; border: 1.5px solid var(--linie); overflow: hidden; background: #fff; transition: border-color .2s, transform .3s var(--weich); } .galerie__klein button:hover { transform: translateY(-2px); } .galerie__klein button[aria-pressed="true"] { border-color: var(--kobalt); border-width: 2.5px; } .galerie__klein img { width: 100%; height: 100%; object-fit: contain; }
.produkt__kat { color: var(--kobalt); margin-bottom: 14px; } .produkt h1 { font-size: clamp(2.1rem, 4.2vw, 3.6rem); margin-bottom: 22px; }
.produkt__intro p:first-child strong:only-child { font-size: 1.15rem; line-height: 1.4; display: block; } .produkt__zt { color: var(--text-2); margin: 30px 0 10px; font-weight: 500; }
.profil { margin: 0; border-top: 1.5px solid var(--text); } .profil > div { display: grid; grid-template-columns: minmax(120px, 40%) 1fr; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--linie); font-size: .95rem; } .profil dt { color: var(--text-2); } .profil dd { margin: 0; font-weight: 650; }
.produkt__aktion { margin-top: 28px; padding: 22px; border-radius: 18px; background: var(--papier); display: grid; gap: 12px; } .produkt__aktion p { margin: 0; }
.produkt__details { margin-top: clamp(48px, 6vw, 90px); max-width: 920px; } .produkt__details h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 20px; }
.klapp { border-top: 1px solid var(--linie); } .klapp:last-child { border-bottom: 1px solid var(--linie); } .klapp summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 64px; cursor: pointer; list-style: none; font-size: 1.15rem; font-weight: 550; } .klapp summary::-webkit-details-marker { display: none; }
.klapp summary i { width: 16px; height: 16px; position: relative; flex: none; } .klapp summary i::before, .klapp summary i::after { content: ""; position: absolute; inset: 7px 0; background: var(--kobalt); border-radius: 2px; transition: transform .35s var(--weich); } .klapp summary i::after { transform: rotate(90deg); } .klapp[open] summary i::after { transform: rotate(0); } .klapp summary:hover { color: var(--kobalt); } .klapp__inhalt { padding: 0 0 26px; }
.prosa { color: var(--text-2); } .prosa strong { color: var(--text); font-weight: 650; } .prosa ul { list-style: none; display: grid; gap: 8px; margin: 0 0 1em; } .prosa li { padding-left: 22px; position: relative; } .prosa li::before { content: ""; position: absolute; left: 2px; top: .62em; width: 8px; height: 2px; background: var(--kobalt); } .prosa li ul { margin: 6px 0 0; } .prosa h3 { color: var(--text); margin: 1.4em 0 .5em; } .prosa .schluss { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--linie); } .prosa .schluss p { margin: 0 0 .7em; } .prosa a { color: var(--kobalt); }
.verwandt { background: var(--papier); } .verwandt h2 { font-size: clamp(1.6rem, 2.6vw, 2.2rem); margin-bottom: 26px; }
/* Unternehmensseite */
.ufirma-kopf { background: var(--weiss); padding: clamp(40px, 6vw, 90px) 0 clamp(32px, 4vw, 56px); } .ufirma-kopf .mono { color: var(--kobalt); margin-bottom: 14px; } .ufirma-kopf h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin-bottom: 18px; max-width: 18em; } .ufirma-kopf .lead { margin: 0; }
.ufirma { background: var(--papier); padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 100px); } .ufirma__block { max-width: 760px; margin: 0 0 clamp(40px, 6vw, 72px); } .ufirma__block .nr { color: var(--kobalt); margin-bottom: 12px; } .ufirma__block h2 { margin-bottom: 18px; } .ufirma__block p { color: var(--text-2); font-size: 1.08rem; line-height: 1.6; margin: 0 0 1em; } .ufirma__block p:last-child { margin-bottom: 0; }
.ufirma__bilder { list-style: none; margin: 0 0 clamp(40px, 6vw, 72px); padding: 0; display: grid; grid-template-columns: repeat(8, 1fr); gap: 12px; } .ufirma__bilder a { display: block; background: var(--weiss); border: 1px solid var(--linie); border-radius: 14px; overflow: hidden; transition: transform .3s var(--weich), box-shadow .3s; } .ufirma__bilder a:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(11,16,32,.08); } .ufirma__bilder img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.firma__mehr { margin-top: clamp(28px, 4vw, 44px); }
.ufirma-cta h2 { margin-bottom: 16px; } .ufirma-cta .lead { margin-bottom: 28px; }
@media (max-width: 900px) { .ufirma__bilder { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 520px) { .ufirma__bilder { grid-template-columns: repeat(2, 1fr); } }
.recht { background: var(--weiss); padding: clamp(40px, 6vw, 90px) 0 clamp(64px, 8vw, 120px); } .recht .mono { color: var(--kobalt); margin-bottom: 14px; } .recht h1 { font-size: clamp(2.2rem, 4.5vw, 3.6rem); margin-bottom: 34px; color: var(--text); } .recht h2 { font-size: 1.35rem; color: var(--text); margin: 2em 0 .6em; }

/* Produktsuche */
.suche { background: var(--weiss); padding: clamp(28px, 4vw, 56px) 0 clamp(56px, 7vw, 110px); } .suche h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); margin-bottom: 18px; } .suche .lead { margin-bottom: 30px; }
.suche__filter { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px 16px; align-items: end; padding: 20px; border: 1.5px solid var(--linie); border-radius: 18px; background: var(--papier); margin-bottom: 26px; }
.suche__filter label, .suche__bereich { display: grid; gap: 6px; font-size: .85rem; font-weight: 600; } .suche__filter label > span, .suche__bereich legend { color: var(--text-2); padding: 0; margin-bottom: 2px; }
.suche__filter input, .suche__filter select { width: 100%; min-height: 48px; padding: 0 14px; border: 1.5px solid var(--linie); border-radius: 10px; background: #fff; font-size: .95rem; } .suche__filter input:focus, .suche__filter select:focus { border-color: var(--kobalt); outline: none; }
.suche__bereich { border: 0; padding: 0; margin: 0; grid-template-columns: 1fr auto 1fr; grid-template-rows: auto auto; align-items: center; } .suche__bereich legend { grid-column: 1 / -1; } .suche__bereich > span { font-size: .8rem; color: var(--text-2); padding: 0 2px; }
.suche__filter .knopf { justify-self: start; } .suche__zahl { color: var(--text-2); margin-bottom: 14px; } .suche__leer { padding: 30px; border: 1.5px dashed var(--linie); border-radius: 16px; text-align: center; color: var(--text-2); } .suche__leer a { color: var(--kobalt); }
.pkarte__kat { color: var(--kobalt); margin: 0 0 2px; }

/* Video mit Klick-Freigabe */
.produkt__links { display: grid; gap: 22px; align-content: start; } .video { max-width: 920px; } .video h2 { margin: 0 0 10px; }
.video__rahmen { position: relative; aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; background: var(--tinte); } .video__rahmen img, .video__rahmen iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 0; }
.video__hinweis { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 14px; padding: 24px; text-align: center; color: #fff; background: linear-gradient(180deg, rgba(7,11,31,.35), rgba(7,11,31,.78)); } .video__hinweis p { max-width: 36em; font-size: .9rem; margin: 0; color: #e3e7f5; } .video__hinweis a { color: #fff; }
.video__play { width: 0; height: 0; border-block: 7px solid transparent; border-left: 11px solid currentColor; } .video .klein { margin-top: 10px; } .video .klein a { color: var(--kobalt); }

/* Anfrageliste, Barrierefreiheit */
.schleier { position: fixed; inset: 0; z-index: 190; background: rgba(4,6,26,.55); backdrop-filter: blur(3px); animation: ein .3s; } @keyframes ein { from { opacity: 0; } }
.korb, .a11y { position: fixed; z-index: 200; top: 0; right: 0; bottom: 0; width: min(100%, 480px); background: #fff; color: var(--text); overflow: auto; overscroll-behavior: contain; box-shadow: -30px 0 80px -30px rgba(4,6,26,.5); animation: schub .5s var(--weich); padding: 26px clamp(18px, 3vw, 30px) 34px; } @keyframes schub { from { transform: translateX(100%); } }
.a11y { width: min(100%, 400px); }
.korb__kopf, .a11y__kopf { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 22px; } .korb__kopf .mono { color: var(--kobalt); margin-bottom: 6px; } .korb h2, .a11y h2 { font-size: 1.7rem; }
.korb__leer { padding: 34px 22px; border: 1.5px dashed var(--linie); border-radius: 16px; text-align: center; } .korb__leer p:first-child { font-weight: 700; font-size: 1.1rem; margin-bottom: 8px; }
.korb__liste { display: grid; gap: 12px; margin-bottom: 26px; } .posten { border: 1.5px solid var(--linie); border-radius: 16px; padding: 14px; display: grid; gap: 12px; }
.posten__kopf { display: grid; grid-template-columns: 60px 1fr 44px; gap: 12px; align-items: center; } .posten__kopf img, .posten__platz { width: 60px; height: 60px; border-radius: 10px; border: 1px solid var(--linie); object-fit: contain; background: var(--papier); } .posten__kopf b { display: block; line-height: 1.2; } .posten__kopf small { color: var(--text-2); font-size: .8rem; }
.posten__weg { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; color: var(--text-2); transition: background .2s, color .2s; } .posten__weg:hover { background: #fdecea; color: var(--signal); }
.posten__menge { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .posten__menge input { width: 110px; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--linie); border-radius: 10px; font-family: var(--mono); font-size: .9rem; } .posten__menge button { min-height: 36px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--linie); font: 500 .74rem var(--mono); transition: border-color .2s, background .2s, color .2s; } .posten__menge button:hover { border-color: var(--kobalt); color: var(--kobalt); } .posten__menge span { font-size: .8rem; color: var(--text-2); }
.posten__opt { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; } .posten__opt .haken { font-size: .85rem; padding-top: 6px; min-height: 40px; } .posten__opt select, .posten__opt input[type=text] { grid-column: 1 / -1; min-height: 44px; padding: 0 12px; border: 1.5px solid var(--linie); border-radius: 10px; background: #fff; font-size: .9rem; width: 100%; }
.posten__tipp { grid-column: 1 / -1; margin: 6px 0 0; color: var(--text-2); font-size: .68rem; }
.posten__hinweis { font-size: .82rem; color: var(--text-2); margin: 0; font-style: italic; }
.korb__kontakt { border: 0; padding: 0; margin: 0; display: grid; gap: 12px; } .korb__kontakt legend { font-weight: 550; font-size: 1.1rem; margin-bottom: 12px; padding: 0; }
.korb__kontakt input:not([type=checkbox]), .korb__kontakt textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--linie); border-radius: 10px; background: #fff; resize: vertical; } .korb__kontakt input:focus, .korb__kontakt textarea:focus { border-color: var(--kobalt); outline: none; } .korb__kontakt a { color: var(--kobalt); }
.korb__fehler { margin: 0; color: var(--signal); font-size: .9rem; font-weight: 600; } .korb__danke { text-align: center; padding: 50px 10px; display: grid; justify-items: center; gap: 14px; color: var(--kobalt); } .korb__danke h3 { color: var(--text); font-size: 1.6rem; } .korb__danke p { color: var(--text-2); }
.toast { position: fixed; left: 50%; bottom: 26px; z-index: 250; transform: translate(-50%, 220%); visibility: hidden; background: var(--tinte); color: #fff; padding: 14px 22px; border-radius: 999px; font-size: .93rem; font-weight: 600; box-shadow: 0 20px 40px -16px rgba(4,6,26,.6); transition: transform .5s var(--weich), visibility 0s .5s; max-width: calc(100% - 32px); display: flex; align-items: center; gap: 12px; } .toast.ist-da { transform: translate(-50%, 0); visibility: visible; transition-delay: 0s; } .toast button { color: var(--kobalt-hell); font-weight: 700; text-decoration: underline; min-height: 32px; }
.wz--korb.zuckt { animation: zuck .6s var(--weich); } @keyframes zuck { 30% { transform: scale(1.18); } 60% { transform: scale(.95); } }

.a11y__gruppe > p { font-weight: 700; margin-bottom: 10px; } .a11y__stufen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .a11y__stufen button { min-height: 76px; border: 1.5px solid var(--linie); border-radius: 12px; display: grid; place-items: center; align-content: center; gap: 2px; font-weight: 800; font-size: 1.3rem; transition: border-color .2s, background .2s, color .2s; } .a11y__stufen small { font-size: .74rem; font-weight: 500; color: var(--text-2); } .a11y__stufen button[aria-pressed="true"] { background: var(--kobalt); border-color: var(--kobalt); color: #fff; } .a11y__stufen button[aria-pressed="true"] small { color: #d5ddff; }
.a11y__schalter { display: grid; gap: 8px; margin: 22px 0; } .a11y__schalter button { display: grid; grid-template-columns: 28px 1fr 46px; gap: 14px; align-items: center; text-align: left; padding: 14px; border: 1.5px solid var(--linie); border-radius: 12px; min-height: 68px; transition: border-color .2s, background .2s; } .a11y__schalter svg { width: 26px; height: 26px; color: var(--kobalt); } .a11y__schalter b { display: block; line-height: 1.2; } .a11y__schalter small { color: var(--text-2); font-size: .8rem; line-height: 1.3; display: block; margin-top: 2px; }
.a11y__schalter button::after { content: ""; width: 46px; height: 26px; border-radius: 13px; background: var(--linie); background-image: radial-gradient(circle at 13px 13px, #fff 9px, transparent 10px); transition: background-color .25s, background-position .3s var(--weich); background-repeat: no-repeat; } .a11y__schalter button[aria-pressed="true"] { border-color: var(--kobalt); background: #f0f4ff; } .a11y__schalter button[aria-pressed="true"]::after { background-color: var(--kobalt); background-position: 20px 0; }
.a11y__reset { width: 100%; min-height: 48px; border: 1.5px solid var(--linie); border-radius: 12px; font-weight: 650; } .a11y__reset:hover { border-color: var(--kobalt); color: var(--kobalt); } .a11y__hinweis { margin-top: 18px; font-size: .84rem; color: var(--text-2); } .a11y__hinweis a { color: var(--kobalt); } kbd { font: 500 .78rem var(--mono); border: 1px solid var(--linie); border-bottom-width: 2px; border-radius: 5px; padding: 1px 6px; }
.vorleser { position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 180; display: flex; align-items: center; gap: 8px; background: var(--tinte); color: #fff; padding: 8px 10px 8px 18px; border-radius: 999px; box-shadow: 0 20px 44px -16px rgba(4,6,26,.7); max-width: calc(100% - 24px); } .vorleser__status { font-size: .88rem; font-weight: 600; margin-right: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vorleser button { min-height: 40px; padding: 0 14px; border-radius: 999px; background: rgba(255,255,255,.12); font-size: .85rem; font-weight: 650; } .vorleser button:hover { background: var(--kobalt-2); }
.vorleser__puls { width: 10px; height: 10px; border-radius: 50%; background: #36d399; animation: puls 1.6s infinite; flex: none; }
.wird-gelesen { outline: 3px solid #ffb703 !important; outline-offset: 6px; border-radius: 6px; background: rgba(255,183,3,.14); scroll-margin-block: 30vh; }
html.lupe-an, html.lupe-an * { cursor: zoom-in !important; }
.lupe { position: fixed; z-index: 400; left: 0; top: 0; width: 300px; height: 210px; border-radius: 18px; border: 3px solid var(--kobalt-2); box-shadow: 0 24px 60px -14px rgba(4,6,26,.65), 0 0 0 1px #fff inset; overflow: hidden; pointer-events: none; background: #fff; will-change: transform; } .lupe__inhalt { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; pointer-events: none; }

/* Hoher Kontrast */
html[data-kontrast] { --text-2: #1b1f3a; --linie: #0e1230; --text-d: #fff; --kobalt: #00248a; --kobalt-hell: #b9c9ff; --linie-d: rgba(255,255,255,.6); --papier: #fff; }
html[data-kontrast] .hero { background: #fff; } html[data-kontrast] .hero h1 em { color: #00248a !important; text-decoration: underline; text-decoration-thickness: 3px; } html[data-kontrast] .dunkel, html[data-kontrast] .individuell, html[data-kontrast] .fuss { background: #000; }
html[data-kontrast] a:not(.knopf):not(.kkachel):not(.kopf__logo) { text-decoration: underline; } html[data-kontrast] .kachel, html[data-kontrast] .kkachel, html[data-kontrast] .pkarte { border-width: 2px; border-color: #0e1230; } html[data-kontrast] .hero__raster { display: none; }

/* Animationen aus */
html[data-ruhe] *, html[data-ruhe] *::before, html[data-ruhe] *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }

/* Einblenden (nur mit JS und ohne Ruhemodus) */
.js:not([data-ruhe]) [data-ein] { opacity: 0; transform: translateY(34px); }

/* Responsiv */
@media (max-width: 1180px) {
  .nav { display: none; } .wz--burger { display: inline-flex; } .kopf__werkzeug { margin-left: auto; }
  .suche__filter { grid-template-columns: 1fr 1fr; }
  .fuss__innen { grid-template-columns: 1fr 1fr 1fr; } .fuss__marke { grid-column: 1 / -1; }
  .mega { display: none; }
}
@media (max-width: 900px) {
  :root { --kopf-h: 66px; }
  .zahlen__raster { grid-template-columns: 1fr 1fr; gap: 28px 0; } .zahl:nth-child(odd) { border-left: 0; padding-left: 0; }
  .schild, .individuell__raster, .kontakt__raster, .kathero__raster, .produkt__raster, .hinweisband__raster, .werte__raster { grid-template-columns: 1fr; }
  .schild--gedreht .schild__bild { order: 0; } .kathero__bild { max-height: 320px; justify-self: stretch; } .galerie { position: static; } .hinweisband__knoepfe { justify-content: flex-start; }
  .zeitachse { grid-template-columns: 1fr; } .zeitachse::before { left: 5px; right: auto; top: 0; bottom: 0; width: 1.5px; height: auto; } .zeitachse::after { left: 5px; top: 0; width: 1.5px; height: calc(var(--fortschritt, 0) * 100%); } .zeitachse li { padding: 0 0 34px 34px; } .zeitachse li::before { top: 4px; }
  .ind-karten, .schritte { grid-template-columns: 1fr; }
  .hero__text { max-width: none; } .hero { align-items: flex-end; } .hero__innen { padding-bottom: 130px; } .hud { display: none; } .hero__status { gap: 14px; }
  .hero::after { content: ""; position: absolute; inset: 35% 0 0; background: linear-gradient(180deg, rgba(243,245,250,0), rgba(243,245,250,.92) 45%); z-index: 1; pointer-events: none; }
}
@media (max-width: 620px) {
  .hero__eyebrow, .hero__cta .knopf--linie { display: none; } .hero__sub { margin: 20px 0 26px; }
  body { font-size: 1rem; } .wz--korb .wz__text, .sprache .wz__text { display: none; } .wz--korb { padding-inline: 10px; } .kopf__innen { gap: 10px; } .kopf__werkzeug { gap: 2px; }
  .finder__teaser { grid-template-columns: 1fr; } .finder-lade__kacheln { grid-template-columns: 1fr 1fr; } .finder-reiter { top: auto; bottom: 16px; left: 14px; writing-mode: horizontal-tb; transform: none; border-radius: 999px; padding: 10px 16px 10px 12px; font-size: .8rem; box-shadow: 0 12px 30px -10px rgba(4,6,26,.7); } .finder-reiter svg { transform: none; } .suche__filter { grid-template-columns: 1fr; padding: 14px; } .ind-karten { grid-template-columns: 1fr; } .kachel { min-height: 176px; padding: 16px 14px; } .kachel svg { width: 54px; height: 54px; } .kachel b { font-size: .98rem; margin-top: 12px; }
  .fuss__innen { grid-template-columns: 1fr 1fr; } .fuss__spalte:first-of-type { grid-column: 1 / -1; }
  .formular__zeile, .posten__opt { grid-template-columns: 1fr; } .hero__cta .knopf { width: 100%; } .hero__nr { font-size: .8rem; letter-spacing: .12em; }
  .kkachel { grid-template-columns: 72px 1fr; } .kkachel__bild { width: 72px; } .sprache__menue { position: fixed; left: 12px; right: 12px; top: calc(var(--kopf-h) + 6px); width: auto; }
  .lupe { width: 230px; height: 160px; }
}
@media print { .kopf, .fuss, .korb, .a11y, .hero__canvas, .toast, .vorleser { display: none !important; } }