/* =========================================================
Farb-Tokens
Hell ist die Basis auf :root. Dunkel wird zweimal definiert:
einmal per prefers-color-scheme (Systemvorgabe, greift solange
der Nutzer nichts gewaehlt hat) und einmal per [data-theme],
damit die manuelle Wahl das System ueberstimmt.
========================================================= */
:root{
color-scheme:light;
--bg:#EFF5FC;
--bg-rgb:239,245,252;
--surface:#FFFFFF;
--surface-2:#EFF5FC;
--text:#0A1A33;
--text-muted:#33415C;
--border:#DCE9F8;
--accent:#1E4FD8;
--accent-hover:#1740B4;
--accent-soft:#9DC1FF;
--on-accent:#FFFFFF;
--gold:#C79A3C;
/* dunkle Baender (Ablauf, Kontakt, Footer) */
--band-bg:#0A1A33;
--band-text:#FFFFFF;
--band-muted:#B9C6DE;
--band-accent:#4D8DFF;
--band-border:rgba(255,255,255,.14);
--band-surface:rgba(255,255,255,.04);
--header-bg:rgba(239,245,252,.88);
--air-stroke:#DCE9F8;
--region-from:#1E4FD8;
--region-to:#153A9E;
--wa-bg:#E9F7EE;
--wa-text:#0B6B34;
--wa-border:#BFE6CD;
--shadow-card:0 18px 40px rgba(10,26,51,.08);
--shadow-accent:0 10px 24px rgba(30,79,216,.28);
--radius:18px;
--maxw:1160px;
}
/* Systemvorgabe dunkel - nur wenn nicht explizit "hell" gewaehlt wurde */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]){
color-scheme:dark;
--bg:#070E1C;
--bg-rgb:7,14,28;
--surface:#101B30;
--surface-2:#17243D;
--text:#E7EDF9;
--text-muted:#9FB0CC;
--border:#23324F;
--accent:#4D8DFF;
--accent-hover:#7AACFF;
--accent-soft:#9DC1FF;
--on-accent:#06162E;
--gold:#E0B75C;
--band-bg:#0D1728;
--band-text:#FFFFFF;
--band-muted:#A9B8D2;
--band-accent:#7AACFF;
--band-border:rgba(255,255,255,.10);
--band-surface:rgba(255,255,255,.03);
--header-bg:rgba(7,14,28,.85);
--air-stroke:#1B2C49;
--region-from:#1E4FD8;
--region-to:#0E2C74;
--wa-bg:#10301E;
--wa-text:#7FD8A4;
--wa-border:#1E5637;
--shadow-card:0 18px 40px rgba(0,0,0,.45);
--shadow-accent:0 10px 24px rgba(77,141,255,.22);
}
}
/* Manuelle Wahl "dunkel" - gewinnt auch bei hellem System */
:root[data-theme="dark"]{
color-scheme:dark;
--bg:#070E1C;
--bg-rgb:7,14,28;
--surface:#101B30;
--surface-2:#17243D;
--text:#E7EDF9;
--text-muted:#9FB0CC;
--border:#23324F;
--accent:#4D8DFF;
--accent-hover:#7AACFF;
--accent-soft:#9DC1FF;
--on-accent:#06162E;
--gold:#E0B75C;
--band-bg:#0D1728;
--band-text:#FFFFFF;
--band-muted:#A9B8D2;
--band-accent:#7AACFF;
--band-border:rgba(255,255,255,.10);
--band-surface:rgba(255,255,255,.03);
--header-bg:rgba(7,14,28,.85);
--air-stroke:#1B2C49;
--region-from:#1E4FD8;
--region-to:#0E2C74;
--wa-bg:#10301E;
--wa-text:#7FD8A4;
--wa-border:#1E5637;
--shadow-card:0 18px 40px rgba(0,0,0,.45);
--shadow-accent:0 10px 24px rgba(77,141,255,.22);
}
*{margin:0;padding:0;box-sizing:border-box}
/* Sicherheitsnetz: ein Inline-SVG ohne passende Regel darf nie die volle
Breite einnehmen. Jedes SVG hat zusaetzlich width/height im Markup. */
svg{max-width:100%}
html{scroll-behavior:smooth}
body{
font-family:'Inter',system-ui,sans-serif;
color:var(--text);
background:var(--bg);
line-height:1.6;
-webkit-font-smoothing:antialiased;
transition:background-color .25s ease, color .25s ease;
}
h1,h2,h3{font-family:'Manrope','Inter',sans-serif;line-height:1.08;font-weight:800}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.eyebrow{
font-family:'Space Grotesk',monospace;
font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;
color:var(--accent);font-weight:700;display:flex;align-items:baseline;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:2px;flex:none;background:var(--gold);
display:inline-block;transform:translateY(-.35em)}
a{color:inherit}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}
/* ---------- Header ---------- */
header{
position:sticky;top:0;z-index:50;
background:var(--header-bg);backdrop-filter:blur(10px);
border-bottom:1px solid var(--border);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px}
/* ---------- Logo ----------
Das Logo traegt die Wortmarke selbst, der frueher danebenstehende
Schriftzug ist damit entfallen.
Hintergrundbild statt : so laedt je Theme nur die passende der
beiden Fassungen. mit prefers-color-scheme scheidet aus -
die Kopfzeile hat einen manuellen Umschalter, den ein Media-Query
nicht mitbekommt. Der Link traegt sein aria-label, das Logo ist also
reine Dekoration und darf Hintergrund sein.
aspect-ratio kommt aus der viewBox der Datei (400 x 99.1). */
.brand{display:flex;align-items:center;text-decoration:none}
.brand-logo{
display:block;height:44px;aspect-ratio:400/99.1;
background:url(/img/logo.svg) no-repeat left center/contain;
}
:root[data-theme="dark"] .brand-logo{background-image:url(/img/logo-light.svg)}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .brand-logo{background-image:url(/img/logo-light.svg)}
}
nav.links{display:flex;gap:1.7rem}
nav.links a{
text-decoration:none;font-weight:600;font-size:.92rem;color:var(--text);
border-bottom:2px solid transparent;padding:4px 0;transition:border-color .2s
}
nav.links a:hover{border-color:var(--gold)}
.nav-end{display:flex;align-items:center;gap:.8rem}
.cta-call{
display:inline-flex;align-items:center;gap:.5rem;
background:var(--accent);color:var(--on-accent);text-decoration:none;
font-weight:700;font-size:.9rem;padding:.65rem 1.15rem;border-radius:999px;
transition:background .2s, transform .2s;white-space:nowrap;
}
.cta-call:hover{background:var(--accent-hover);transform:translateY(-1px)}
/* Aktiver Navigationspunkt. Haengt an aria-current statt an einer Klasse:
das Attribut muss fuer Screenreader ohnehin gesetzt sein, eine zweite
Markierung waere nur eine weitere Stelle, die man vergessen kann. */
nav.links a[aria-current="page"]{border-color:var(--accent);color:var(--accent)}
/* ---------- Mobilnavigation ----------
Auf dem Onepager war nav.links unterhalb der Umbruchbreite schlicht
display:none - man scrollte einfach. Mit echten Unterseiten waeren die
Punkte am Handy damit unerreichbar, deshalb der Schalter und dieses
Ausklappmenue. Das Panel haengt absolut an (sticky ist
positioniert, also der Bezugsrahmen) und schiebt so keinen Inhalt weg.
Die Grenze lag bei 880px und liegt seit dem sechsten Navigationspunkt
("Anlage planen") bei 1000px: gemessen stiessen Logo, Punkte und
Anruf-Knopf zwischen 881 und 1000px auf 0px Abstand aneinander. Wer
einen Punkt ergaenzt, muss hier nachmessen - und in main.js dieselbe
Grenze setzen (dort als min-width, also 1001px). */
.nav-toggle{display:none;flex:0 0 auto}
@media(max-width:1000px){
nav.links{
display:none;
position:absolute;left:0;right:0;top:100%;
flex-direction:column;gap:0;
/* Deckend, nicht --header-bg. Die Kopfzeile darf durchscheinen, weil ihr
backdrop-filter den Inhalt dahinter weichzeichnet. Fuer dieses Panel
gilt das nicht: backdrop-filter auf macht daraus eine
Backdrop-Root, ein Kind darin sieht den Seiteninhalt gar nicht mehr -
es wuerde nur den Header-Hintergrund abtasten. Mit 85% Deckkraft stand
dann die Ueberschrift lesbar zwischen den Menuepunkten. */
background:var(--bg);
border-bottom:1px solid var(--border);
box-shadow:0 18px 30px rgba(10,26,51,.14);
padding:.4rem 24px 1rem;
}
header.nav-open nav.links{display:flex}
nav.links a{padding:.9rem 0;border-bottom:1px solid var(--border);font-size:1rem}
nav.links a:last-child{border-bottom:none}
nav.links a:hover{border-bottom-color:var(--gold)}
/* Die Grundregel faerbt border-color rundum - hier ist der untere Rand
aber die Trennlinie zum naechsten Punkt, nicht die Markierung. Sonst
steht der aktive Eintrag in einem blauen Kasten. */
nav.links a[aria-current="page"]{color:var(--accent);border-bottom-color:var(--border)}
.nav-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;
border:1px solid var(--border);border-radius:999px;
background:var(--surface);color:var(--text);cursor:pointer;
transition:border-color .2s;
}
.nav-toggle:hover{border-color:var(--accent)}
.nav-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:1.9;stroke-linecap:round}
.nav-toggle .icon-close{display:none}
header.nav-open .nav-toggle .icon-burger{display:none}
header.nav-open .nav-toggle .icon-close{display:block}
}
/* Eng wird es erst unter ~520px: dort schrumpft der Anruf-Button auf das
Icon, damit der Schriftzug im Header nicht umbricht. */
@media(max-width:520px){
/* 38px statt 44: das Logo ist mit 4:1 deutlich breiter als die alte
Bildmarke und wuerde sonst die drei runden Knoepfe daneben druecken. */
.brand-logo{height:38px}
/* Feste 40px statt padding + border-radius:50%. Ohne gleiche Kantenlaenge
ergibt 50% eine Ellipse - neben den beiden runden Nachbarknoepfen
(Theme, Menue) fiel das sofort auf. */
.cta-call{
width:40px;height:40px;padding:0;border-radius:999px;
justify-content:center;
}
.cta-call-num{display:none}
.nav-end{gap:.5rem}
}
/* ---------- Theme-Umschalter ---------- */
.theme-toggle{
display:inline-flex;align-items:center;justify-content:center;
width:40px;height:40px;flex:0 0 auto;
border:1px solid var(--border);border-radius:999px;
background:var(--surface);color:var(--text);
cursor:pointer;transition:background .2s, border-color .2s, transform .2s;
}
.theme-toggle:hover{border-color:var(--accent);transform:translateY(-1px)}
.theme-toggle svg{width:19px;height:19px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
/* Sonne bei Hell, Mond bei Dunkel - je nach aktivem Theme eins davon */
.theme-toggle .icon-moon{display:none}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .theme-toggle .icon-sun{display:none}
:root:not([data-theme="light"]) .theme-toggle .icon-moon{display:block}
}
:root[data-theme="dark"] .theme-toggle .icon-sun{display:none}
:root[data-theme="dark"] .theme-toggle .icon-moon{display:block}
:root[data-theme="light"] .theme-toggle .icon-sun{display:block}
:root[data-theme="light"] .theme-toggle .icon-moon{display:none}
/* ---------- Hero ----------
Das Foto liegt randlos hinter dem Text. Statt es an einer Kante
abzuschneiden, laeuft es per mask-image nach links und unten ins Nichts -
dadurch uebernimmt der Seitenhintergrund, egal welches Theme aktiv ist.
Zwei verschachtelte Elemente, weil zwei Masken sich so zuverlaessiger
ueberlagern als mit mask-composite. */
.hero{
position:relative;isolation:isolate;
display:flex;flex-direction:column;justify-content:center;
min-height:clamp(580px,44vw,780px);
padding:96px 0 0;
}
/* Verlaufsfeld statt Maske.
Vorher wurde das Bild selbst ausmaskiert - links war es also halb
durchsichtig, der Seitenhintergrund schien hindurch, und dazwischen lag
eine breite milchige Zone, die eher nach kaputtem Overlay aussah als nach
Absicht. Jetzt bleibt das Foto unangetastet und darueber liegt eine
deckende Flaeche in --bg, die nach rechts auslaeuft: links echte
Hintergrundfarbe (voller Textkontrast), rechts unberuehrtes Foto, dazwischen
ein klarer Uebergang statt Nebel. */
.hero-bg{
position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;
}
.hero-bg picture{display:block;width:100%;height:100%}
.hero-bg::after{
content:"";position:absolute;inset:0;
background:
linear-gradient(94deg,
rgb(var(--bg-rgb)) 0%,
rgb(var(--bg-rgb)) 34%,
rgba(var(--bg-rgb),.82) 46%,
rgba(var(--bg-rgb),.34) 60%,
rgba(var(--bg-rgb),0) 74%),
linear-gradient(to bottom,
rgba(var(--bg-rgb),0) 62%,
rgb(var(--bg-rgb)) 100%);
}
.hero-bg img{
width:100%;height:100%;object-fit:cover;object-position:62% 50%;display:block;
}
/* Kurzer Fade, der mit dem Rendern startet - keine JS-Abhaengigkeit.
Das Bild vorher auf opacity:0 zu setzen und per JS einzublenden war ein
Fehler: jede Verzoegerung im Skript wird dann als haengendes Bild sichtbar. */
@keyframes heroIn{from{opacity:0}to{opacity:1}}
/* Bewusst OHNE fill-mode: laeuft die Animation aus irgendeinem Grund nicht,
ist das Bild einfach sichtbar. "both" wuerde opacity:0 auch schon vor dem
Start anlegen - genau der Fehler, der das Bild vorher haengen liess. */
.hero-bg{animation:heroIn .3s ease-out}
@media(prefers-reduced-motion:reduce){.hero-bg{animation:none}}
.hero-inner{position:relative;max-width:var(--maxw);width:100%}
/* 600 statt der globalen 800. Manrope ist ein Variable Font, der
Schnitt existiert also wirklich. Kursiv fuer die zweite Zeile ginge nicht:
keine der drei Familien hat einen Italic-Schnitt, der Browser wuerde die
Buchstaben nur schraegstellen. Die Trennung laeuft deshalb ueber Farbe. */
.hero h1{
font-size:clamp(2.6rem,6vw,4.6rem);line-height:1.04;margin:0 0 1.4rem;
font-weight:500;letter-spacing:-.022em;
}
.hero h1 em{font-style:normal;color:var(--accent);font-weight:500}
.hero-rule{display:block;width:64px;height:1px;background:var(--accent);opacity:.7;margin-bottom:1.6rem}
.hero p.lead{font-size:1.06rem;max-width:35rem;color:var(--text-muted);line-height:1.75}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:2.3rem}
.btn{
display:inline-flex;align-items:center;gap:.7rem;text-decoration:none;
font-weight:600;font-size:.92rem;letter-spacing:.06em;text-transform:uppercase;
padding:1rem 1.7rem;border-radius:2px;
transition:transform .25s, box-shadow .25s, background .2s, border-color .2s;
}
.btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;
stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.btn:hover svg{transform:translateX(4px)}
.btn.primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow-accent)}
.btn.primary:hover{background:var(--accent-hover)}
/* Zweitrangig: nur Text mit Unterstrich, damit die Hierarchie klar bleibt */
.btn.quiet{
padding:1rem 0;color:var(--text);
border-bottom:1px solid var(--border);border-radius:0;
}
.btn.quiet:hover{border-color:var(--accent)}
.btn.wa{background:var(--wa-bg);color:var(--wa-text);border:1px solid var(--wa-border);
text-transform:none;letter-spacing:0;font-size:.95rem;font-weight:700;
border-radius:999px;padding:.8rem 1.3rem;margin-top:1rem}
.btn.wa svg{stroke:none;fill:currentColor;width:19px;height:19px}
/* .btn svg setzt fill:none fuer die Pfeile - CSS schlaegt das fill-Attribut
am SVG, das Logo war deshalb unsichtbar. Und ein Logo rutscht nicht. */
.btn.wa:hover svg,.btn.tel:hover svg{transform:none}
/* .btn setzt display:inline-flex, und das gewinnt gegen das UA-Stylesheet:
ein Knopf mit hidden-Attribut stand trotzdem da. Einmal fuer alle .btn,
nicht je Stelle - die Falle ist hier schon zweimal zugeschnappt. */
.btn[hidden]{display:none}
/* Bewusst 2x2 statt umbrechendem Flex - bei vier Punkten steht sonst einer
allein in der zweiten Zeile. */
.hero-facts{
list-style:none;display:grid;grid-template-columns:repeat(2,auto);
justify-content:start;gap:1.5rem 2.6rem;margin-top:2.8rem;
}
@media(max-width:560px){.hero-facts{grid-template-columns:1fr;gap:1.1rem}}
.hero-facts li{display:flex;gap:.8rem;align-items:center}
/* Bewusst nicht in Akzentblau. Wenn jedes Icon blau ist, traegt die Farbe
nichts mehr - sie soll Logo, CTA und einzelne Woerter markieren. */
.hero-facts svg{
width:24px;height:24px;flex:none;fill:none;stroke:var(--text-muted);
stroke-width:1.3;stroke-linecap:round;stroke-linejoin:round;opacity:.75;
}
.hero-facts b{display:block;font-size:.9rem;font-weight:600;line-height:1.35}
.hero-facts span{font-size:.85rem;color:var(--text-muted)}
/* Leistungs-Leiste am Hero-Fuss, sitzt noch auf dem auslaufenden Bild */
.hero-features{margin-top:4.5rem;border-top:1px solid var(--border)}
.hero-features ul{
list-style:none;display:grid;grid-template-columns:repeat(4,1fr);
}
.hero-features li{
display:flex;gap:1rem;align-items:flex-start;
padding:1.9rem 1.6rem;border-left:1px solid var(--border);
}
.hero-features li:first-child{border-left:0;padding-left:0}
.hero-features svg{
width:30px;height:30px;flex:none;fill:none;stroke:var(--text-muted);
stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round;opacity:.7;
}
.hero-features b{display:block;font-size:1.05rem;font-weight:500;margin-bottom:.3rem}
.hero-features span{font-size:.85rem;color:var(--text-muted);line-height:1.55}
@media(max-width:1040px){
.hero-features ul{grid-template-columns:repeat(2,1fr)}
.hero-features li:nth-child(3){border-left:0;padding-left:0}
.hero-features li:nth-child(-n+2){border-bottom:1px solid var(--border)}
}
@media(max-width:880px){
/* Hochkant: das Bild sitzt oben und laeuft nach unten aus, Text darunter */
.hero{min-height:0;padding-top:calc(38vh + 40px)}
.hero-bg{bottom:auto;height:58vh}
.hero-bg{-webkit-mask-image:none;mask-image:none}
.hero-bg picture{
-webkit-mask-image:linear-gradient(to bottom,#000 34%,transparent 96%);
mask-image:linear-gradient(to bottom,#000 34%,transparent 96%);
}
.hero-facts{gap:1.4rem}
.hero-facts li{flex:1 1 100%}
}
@media(max-width:560px){
.hero-features ul{grid-template-columns:1fr}
.hero-features li{border-left:0;padding-left:0}
.hero-features li:not(:last-child){border-bottom:1px solid var(--border)}
}
@media(prefers-reduced-motion:reduce){
.js .hero-bg{transition:none;opacity:1;transform:none}
.btn:hover svg{transform:none}
}
/* ---------- Sections ---------- */
section{padding:90px 0}
section h2{font-size:clamp(1.9rem,4vw,2.7rem);margin:.8rem 0 1rem;max-width:26ch}
.section-intro{max-width:38rem;color:var(--text-muted)}
/* Leistungen - Karte ist zweigeteilt: Text links, Foto randabfallend rechts */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2.6rem}
@media(max-width:1040px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:720px){.cards{grid-template-columns:1fr;max-width:520px}}
.card{
background:var(--surface);border-radius:var(--radius);
border:1px solid var(--border);overflow:hidden;
display:flex;flex-direction:column;
transition:transform .25s, box-shadow .25s, border-color .25s;
}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);border-color:var(--accent-soft)}
.card-body{padding:1.7rem 1.6rem 1.6rem;display:flex;flex-direction:column;flex:1}
.card .icon{
width:48px;height:48px;border-radius:14px;
background:var(--surface);border:1px solid var(--border);
display:flex;align-items:center;justify-content:center;margin-bottom:1rem;
margin-top:-3.1rem; /* sitzt halb auf dem Foto */
position:relative;box-shadow:var(--shadow-card);
}
.card .icon svg{width:24px;height:24px;stroke:var(--text-muted);fill:none;opacity:.8}
.card h3{font-size:1.2rem;margin-bottom:.5rem}
.card p{font-size:.92rem;color:var(--text-muted)}
.card-link{
margin-top:auto;padding-top:1.2rem;
display:inline-flex;align-items:center;gap:.45rem;
font-weight:700;font-size:.88rem;color:var(--accent);text-decoration:none;
}
.card-link svg{width:16px;height:16px;stroke:currentColor;fill:none;transition:transform .2s}
.card:hover .card-link svg{transform:translateX(3px)}
.card-media{position:relative;overflow:hidden}
.card-media img{
display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;
transition:transform .5s cubic-bezier(.22,.7,.3,1);
}
.card:hover .card-media img{transform:scale(1.05)}
/* Die Fotos sind fuer helle Flaechen belichtet - im Dunkelmodus leicht daempfen */
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .card-media img{filter:brightness(.86) contrast(1.02)}
}
:root[data-theme="dark"] .card-media img{filter:brightness(.86) contrast(1.02)}
@media(prefers-reduced-motion:reduce){
.card,.card-media img,.card-link svg{transition:none}
.card:hover{transform:none}
.card:hover .card-media img{transform:none}
}
.solution-note{
margin-top:2rem;background:var(--band-bg);color:var(--band-text);border-radius:var(--radius);
padding:1.4rem 1.8rem;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
border:1px solid var(--band-border);
}
.solution-note b{color:var(--accent-soft)}
/* .btn.quiet setzt color:var(--text) - auf dem dunklen Kasten ist das im
hellen Design dunkel auf dunkel, nur der Unterstrich bleibt (Katalog-Knopf
der Markenseiten). Gleicher Fall wie .marken-cta-alt weiter unten. */
.solution-note .btn.quiet{color:var(--band-text);border-color:var(--band-border)}
.solution-note .btn.quiet:hover{border-color:var(--accent-soft)}
/* Dunkle Baender (Ablauf, Kontakt) */
.band{background:var(--band-bg);color:var(--band-text)}
/* ---------- Abschluss der Markenseiten ----------
Text links, Handlung rechts. Unter 880px untereinander - nebeneinander
blieben fuer den Satz keine 40 Zeichen je Zeile. */
.marken-cta{display:grid;grid-template-columns:1.4fr 1fr;gap:2.4rem;align-items:center}
.marken-cta h2{margin-top:.6rem}
.marken-cta .section-intro{margin-top:1rem}
.marken-cta-go{display:grid;justify-items:start;gap:1.1rem}
/* .btn.quiet setzt color:var(--text) - auf dem dunklen Band waere das im
hellen Design dunkel auf dunkel. Deshalb ein eigener, schlichter Link. */
.marken-cta-alt{
color:var(--band-muted);font-size:.92rem;font-weight:600;
text-decoration:none;border-bottom:1px solid var(--band-border);
padding-bottom:2px;transition:color .2s,border-color .2s;
}
.marken-cta-alt:hover{color:var(--band-text);border-color:var(--band-accent)}
@media(max-width:880px){
.marken-cta{grid-template-columns:1fr;gap:1.8rem}
.marken-cta-go{justify-items:stretch}
.marken-cta-go .btn{justify-content:center}
.marken-cta-alt{text-align:center}
}
.band .eyebrow{color:var(--band-accent)}
.band .section-intro{color:var(--band-muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;margin-top:2.8rem}
@media(max-width:880px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}
.step{
border:1px solid var(--band-border);border-radius:var(--radius);
padding:1.6rem 1.4rem;background:var(--band-surface);
}
.step .num{
font-family:'Space Grotesk';font-weight:700;color:var(--gold);
font-size:.85rem;letter-spacing:.2em;
}
.step h3{font-size:1.1rem;margin:.7rem 0 .4rem;color:var(--band-text)}
.step p{font-size:.9rem;color:var(--band-muted)}
/* Warum / Region */
.split{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;margin-top:2.4rem}
@media(max-width:880px){.split{grid-template-columns:1fr}}
.checklist{list-style:none;display:grid;gap:1rem}
.checklist li{display:flex;gap:.8rem;align-items:flex-start;font-size:1rem}
.checklist li::before{
content:"✓";flex:0 0 auto;width:26px;height:26px;border-radius:50%;
background:var(--accent);color:var(--on-accent);font-weight:700;font-size:.85rem;
display:flex;align-items:center;justify-content:center;margin-top:2px;
}
.region-card{
background:linear-gradient(160deg,var(--region-from),var(--region-to));
color:#fff;border-radius:var(--radius);padding:2.2rem 2rem;
position:relative;overflow:hidden;
}
.region-card h3{font-size:1.4rem;margin-bottom:.6rem}
.region-card p{color:#CFE0FF;font-size:.95rem}
.region-card ul{list-style:none;margin-top:1.4rem;display:grid;gap:.6rem}
.region-card li{
display:flex;justify-content:space-between;gap:1rem;
border-bottom:1px solid rgba(255,255,255,.18);padding-bottom:.6rem;
font-family:'Space Grotesk';font-size:.9rem;letter-spacing:.04em;
}
.region-card li b{color:#fff}
.region-card .crown-bg{position:absolute;right:-30px;bottom:-40px;width:200px;opacity:.12}
/* ---------- Markenband ----------
Dunkles Band mitten im hellen Abschnitt, damit die Logos in beiden Themes
auf demselben Untergrund sitzen. Die --band-*-Tokens sind hell wie dunkel
dunkelblau, das Band braucht also keine eigenen Farbwerte. */
.brandbar{
margin-top:3.4rem;
background:var(--band-bg);color:var(--band-text);
border:1px solid var(--band-border);border-radius:var(--radius);
padding:1.7rem 1.8rem 1.9rem;
text-align:center;
}
.brandbar-title{
font-family:'Space Grotesk';font-size:.82rem;font-weight:600;
letter-spacing:.1em;text-transform:uppercase;
color:var(--band-muted);margin-bottom:1.6rem;
}
/* `is-lead` ist die Fassung auf der Startseite, in die die fruehere Seite
/unsere-produkte/ eingegangen ist: Augenbraue, Ueberschrift, Fliesstext.
Auf den Markenseiten bleibt das Band die schlichte Logozeile ohne Kopf -
deshalb ein Modifikator und keine Aenderung an .brandbar selbst. */
.brandbar.is-lead .brandbar-title{margin-bottom:.7rem}
.brandbar-head{
font-family:'Manrope';
font-size:clamp(1.5rem,3.2vw,2.05rem);font-weight:700;line-height:1.15;
color:var(--band-text);margin:0 0 .8rem;
}
.brandbar-lead{
max-width:64ch;margin:0 auto 2.2rem;
font-size:1rem;line-height:1.65;color:var(--band-muted);
}
/* Modellzeile unter jedem Logo - kam aus dem Raster der alten Uebersicht.
Auf den Markenseiten hat kein
ein , die Regel laeuft dort
also ins Leere und braucht keine Abgrenzung. */
.brandbar-logos span{
display:block;margin-top:.5rem;
font-size:.78rem;line-height:1.35;color:var(--band-muted);
}
/* Raster statt Flex-Umbruch. Acht Logos passen bei lesbarer Groesse nicht in
eine Zeile - flex-wrap ergibt dann 6+2, also eine fast leere zweite Reihe.
Mit festen Spalten sind es sauber 4+4 bzw. 2+2+2+2. */
.brandbar-logos{
list-style:none;margin:0;padding:0;
display:grid;grid-template-columns:repeat(4,1fr);
gap:1.8rem 1rem;align-items:center;justify-items:center;
}
@media(max-width:760px){.brandbar-logos{grid-template-columns:repeat(2,1fr)}}
/* Zwei Grenzen statt einer: gleiche Hoehe allein sieht falsch aus, weil die
Seitenverhaeltnisse von 2.3 (LG) bis 6.6 (Toshiba) reichen - eine lange
Wortmarke wuerde die kurzen erschlagen. max-width deckelt die Breiten, die
Hoehe deckelt die kompakten Marken. Ergebnis: 20-32px hoch, alle etwa
gleich praesent.
Die Dateien liegen SCHWARZ vor, nicht weiss - so sind sie auch ausserhalb
des Bandes brauchbar. invert() dreht sie hier auf Weiss. */
.brandbar-logos img{
display:block;height:32px;width:auto;max-width:132px;
filter:invert(1);opacity:.92;
}
/* Jedes Logo fuehrt auf seine Markenseite. Die Trefferflaeche ist bewusst
groesser als das Logo - bei Hisense ist die Wortmarke nur 24px hoch, das
waere sonst ein sehr knappes Ziel am Handy. */
.brandbar-logos a{
display:block;padding:.55rem .7rem;border-radius:12px;
transition:background .2s;
}
.brandbar-logos a:hover{background:var(--band-surface)}
.brandbar-logos a:hover img{opacity:1}
.brandbar-logos a:focus-visible{outline:3px solid var(--band-accent);outline-offset:2px}
@media(max-width:620px){
.brandbar{padding:1.4rem 1.1rem 1.6rem}
.brandbar-logos{gap:1.2rem 1.8rem}
.brandbar-logos img{height:26px;max-width:104px}
}
/* FAQ */
details{
background:var(--surface);border:1px solid var(--border);border-radius:14px;
padding:1.1rem 1.4rem;margin-top:.9rem;
}
details summary{
cursor:pointer;font-weight:700;font-size:1rem;list-style:none;
display:flex;justify-content:space-between;align-items:center;gap:1rem;
}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"+";font-size:1.4rem;color:var(--accent);font-weight:400}
details[open] summary::after{content:"–"}
details p{margin-top:.8rem;color:var(--text-muted);font-size:.95rem}
/* Kontakt */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3rem;margin-top:2.4rem}
@media(max-width:880px){.contact-grid{grid-template-columns:1fr}}
form{display:grid;gap:1rem}
label{font-weight:600;font-size:.88rem}
input,textarea{
width:100%;padding:.85rem 1rem;border:1.5px solid var(--border);
border-radius:12px;font-family:inherit;font-size:.95rem;
background:var(--surface);color:var(--text);
margin-top:.35rem;
}
input::placeholder,textarea::placeholder{color:var(--text-muted);opacity:.75}
input:focus,textarea:focus{outline:none;border-color:var(--accent)}
/* Die Spalte ist kuerzer als das Formular. Statt sie zu strecken (ein Loch
in der letzten Box) bleibt sie beim Scrollen neben dem Formular stehen -
Telefon und WhatsApp sind sichtbar, egal bei welchem Feld man ist.
Abstand oben wie scroll-margin-top beim Formular, wegen der Kopfzeile. */
.contact-aside{display:flex;flex-direction:column;gap:1rem;
align-self:start;position:sticky;top:96px}
@media(max-width:880px){.contact-aside{position:static}}
.contact-aside .box{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:1.6rem 1.6rem;
}
.contact-aside .box-tel{margin-top:1rem;font-size:1.2rem}
.contact-aside .box-mail{margin-top:1rem}
.contact-aside .box h3{font-size:1.05rem;margin-bottom:.4rem;color:var(--text)}
.contact-aside .box p{font-size:.95rem;color:var(--text-muted)}
.contact-aside .box a:not(.btn){color:var(--accent);font-weight:700;text-decoration:none}
/* Anfrageformular. Farben erben: auf der Startseite steht es auf dem
dunklen Band, auf /kontakt/ auf hellem Grund. */
.form-frei{display:block;font-weight:400;opacity:.75;margin-top:.1rem}
input[type=file]{border-style:dashed;font-size:.88rem;cursor:pointer}
.form-hinweis{font-size:.85rem;opacity:.8}
.form-hinweis a{color:inherit}
.form-status{min-height:1.4em;font-weight:600;font-size:.92rem}
.form-status:empty{display:none}
/* Honeypot: aus dem Bild, aber nicht display:none - manche Bots lassen
unsichtbar markierte Felder aus. */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
/* ---------- Zwei Wege zur Anfrage ----------
Steht ueber dem Formular, auf der Startseite wie auf /kontakt/. Der
Konfigurator war bis dahin nur ueber die Navigation zu finden - wer
unten am Formular steht, soll die zweite Moeglichkeit sehen, ohne
suchen zu muessen.
Die Karten liegen auf --surface, nicht auf --band-surface: der
Kontaktabschnitt der Startseite sitzt auf dem dunklen Band, das
Formular und die .contact-aside .box daneben sind dort ebenfalls
hell. Dieselbe Regel, damit beide Umgebungen gleich aussehen. */
.kontakt-wege{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:2.4rem}
@media(max-width:880px){.kontakt-wege{grid-template-columns:1fr}}
.weg{
background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
padding:1.7rem 1.7rem 1.5rem;
display:flex;flex-direction:column;align-items:flex-start;
}
.weg h3{font-size:1.15rem;color:var(--text);margin-bottom:.5rem}
.weg p{font-size:.95rem;color:var(--text-muted);line-height:1.65;margin-bottom:1.5rem}
/* Der Knopf steht in beiden Karten auf derselben Hoehe, auch wenn der
eine Text eine Zeile laenger ist. */
.weg .btn{margin-top:auto}
/* Sprungziel des ersten Knopfes - ohne den Abstand schiebt die klebende
Kopfzeile das erste Feld unter sich. Gleiche Zahl wie beim .cfg. */
.contact-grid form{scroll-margin-top:96px}
/* Footer */
footer{background:var(--band-bg);color:var(--band-muted);padding:56px 0 40px;font-size:.9rem}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem;align-items:flex-start}
/* Das Footer-Band ist in beiden Themes dunkelblau - dort immer die
helle Fassung, unabhaengig vom gewaehlten Theme. */
footer .brand-logo{height:34px;background-image:url(/img/logo-light.svg)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap}
footer nav a{text-decoration:none}
footer nav a:hover{color:var(--band-text)}
.copyright{margin-top:2.4rem;border-top:1px solid var(--band-border);padding-top:1.4rem;font-size:.8rem}
.brands-note{margin-top:1rem;font-size:.88rem;color:var(--text-muted)}
.brands-note a{color:var(--accent);font-weight:600}
/* ---------- Smarte Steuerung ----------
Das Phone ist bewusst in HTML/CSS gebaut statt als Bild: bleibt in jeder
Groesse scharf, nutzt die Farb-Tokens und stellt kein Herstellerprodukt dar. */
.smart-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:center}
@media(max-width:980px){.smart-grid{grid-template-columns:1fr;gap:40px}}
.smart-benefits{list-style:none;margin-top:2.4rem;display:grid;gap:1.5rem}
.smart-benefits li{display:flex;gap:1rem;align-items:flex-start}
.smart-benefits svg{
width:26px;height:26px;flex:none;margin-top:3px;
fill:none;stroke:var(--text-muted);stroke-width:1.6;opacity:.75;
stroke-linecap:round;stroke-linejoin:round;
}
.smart-benefits b{display:block;font-size:1rem;font-weight:600;margin-bottom:.15rem}
.smart-benefits span{font-size:.9rem;color:var(--text-muted);line-height:1.55}
.smart-visual{position:relative;border-radius:var(--radius);overflow:hidden;
box-shadow:var(--shadow-card);border:1px solid var(--border)}
.smart-visual img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
/* Phone schwebt ueber der freien Wandflaeche links im Bild */
.phone{
position:absolute;left:7%;bottom:8%;width:34%;max-width:212px;
background:var(--surface);border:1px solid var(--border);
border-radius:22px;padding:.85rem .8rem 1rem;
box-shadow:0 24px 50px rgba(10,26,51,.34), 0 3px 10px rgba(10,26,51,.2);
font-size:.72rem;
}
.phone-top{display:flex;justify-content:space-between;align-items:center;
font-weight:600;font-size:.62rem;color:var(--text-muted)}
.phone-top .dot{width:5px;height:5px;border-radius:50%;background:var(--accent)}
.phone-room{font-weight:700;font-size:.78rem;margin:.5rem 0 .1rem}
.phone-dial{position:relative;margin:.3rem auto .55rem;width:82%;aspect-ratio:1}
.phone-dial svg{width:100%;height:100%;transform:rotate(-207deg)}
.phone-dial circle{fill:none;stroke-linecap:round;stroke-width:9}
.phone-dial .track{stroke:var(--surface-2);stroke-dasharray:204 314}
/* 204 = 65% des Umfangs -> der volle Bogen; 132 davon = aktueller Wert */
.phone-dial .value{stroke:var(--accent);stroke-dasharray:132 314}
.phone-temp{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
gap:.08em;font-family:'Manrope',sans-serif;
}
.phone-temp b{font-size:1.9rem;font-weight:800;line-height:1}
.phone-temp span{font-size:.78rem;font-weight:600;color:var(--text-muted);
display:inline-block;transform:translateY(-.62em)}
.phone-chips{display:flex;gap:.3rem;margin-bottom:.6rem}
.phone-chips span{
flex:1;text-align:center;padding:.3rem .1rem;border-radius:999px;
background:var(--surface-2);color:var(--text-muted);font-weight:600;font-size:.62rem;
}
.phone-chips .on{background:var(--accent);color:var(--on-accent)}
.phone-rows{display:grid;gap:.3rem}
.phone-rows div{display:flex;justify-content:space-between;align-items:baseline;
font-size:.63rem;color:var(--text-muted)}
.phone-rows b{color:var(--text);font-weight:700}
@media(max-width:980px){.phone{left:6%;bottom:7%;width:38%}}
@media(max-width:640px){
/* Bei schmalem Bild wuerde das Phone sonst die ganze Hoehe fuellen */
.smart-visual img{aspect-ratio:1/1}
.phone{width:40%;border-radius:16px;padding:.6rem .55rem .7rem}
.phone-temp b{font-size:1.4rem}
.phone-room{font-size:.7rem}
}
/* Scroll reveal */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* =========================================================
Unterseiten
Die Startseite hat ihr randloses Hero. Unterseiten brauchen einen
ruhigeren Einstieg: gleiche Typografie, aber ohne Bild, damit die
Kopfzeile nicht mit dem Seitentitel konkurriert.
========================================================= */
.page-head{padding:64px 0 40px}
.page-head h1{
font-size:clamp(2.1rem,5vw,3.4rem);margin:.8rem 0 1.1rem;max-width:20ch;
}
.page-head .section-intro{max-width:62ch}
.page-head .btn{margin-top:1.8rem}
/* Zwei Aktionen im Seitenkopf der Markenseiten: die eigene (Beratung) und die
fremde (Herstellerseite). Flex statt zwei Inline-Buttons - nebeneinander
haetten sie nur ein Leerzeichen Abstand, und .page-head .btn wuerde den
margin-top zweimal setzen. */
.head-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:1.6rem;margin-top:1.8rem}
.page-head .head-ctas .btn{margin-top:0}
/* Die Zieldomain steht im Label, nicht nur im aria-label: der Seitenwechsel
soll vor dem Klick sichtbar sein, nicht erst in der Statuszeile. */
.btn.ext{gap:.55rem}
.btn.ext .ext-host{
font-size:.76rem;font-weight:600;letter-spacing:.02em;
text-transform:none;opacity:.62;
}
.crumb{
font-family:'Space Grotesk',monospace;font-size:.78rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-muted);font-weight:700;
margin-bottom:1.6rem;
}
.crumb a{color:var(--accent);text-decoration:none}
.crumb a:hover{text-decoration:underline}
.crumb span{margin:0 .5em;opacity:.5}
/* Markenzeichen im Seitenkopf. Die Dateien liegen schwarz vor - auf hellem
Grund also richtig, im Dunkelmodus unsichtbar. Deshalb dieselbe
Drei-Block-Struktur wie bei den Farb-Tokens: Systemvorgabe und manuelle
Wahl getrennt, sonst gewinnt die falsche Regel. */
.brand-mark{display:block;height:42px;width:auto;max-width:210px;margin-bottom:1.4rem}
@media(prefers-color-scheme:dark){
:root:not([data-theme="light"]) .brand-mark{filter:invert(1)}
}
:root[data-theme="dark"] .brand-mark{filter:invert(1)}
.page-media{
display:block;width:100%;height:auto;border-radius:var(--radius);
box-shadow:var(--shadow-card);border:1px solid var(--border);
}
/* Impressum */
.legal{max-width:70ch}
.legal h2{font-size:1.35rem;margin:2.6rem 0 .9rem}
.legal h2:first-child{margin-top:0}
.legal p{color:var(--text-muted);font-size:.95rem;margin-bottom:.8rem}
.legal dl{display:grid;grid-template-columns:minmax(9rem,auto) 1fr;gap:.55rem 1.6rem}
@media(max-width:560px){.legal dl{grid-template-columns:1fr;gap:.15rem}}
.legal dt{font-weight:700;font-size:.9rem}
.legal dd{margin:0;color:var(--text-muted);font-size:.95rem}
@media(max-width:560px){.legal dd{margin-bottom:.7rem}}
.legal a{color:var(--accent);font-weight:600}
/* =========================================================
Kundenstimmen
========================================================= */
/* Heller Verlauf hinter dem Abschnitt, damit die weissen Karten tragen. */
.reviews-sec{
background:linear-gradient(180deg,var(--bg) 0%,
color-mix(in srgb,var(--accent) 7%,var(--bg)) 55%,var(--bg) 100%);
}
.reviews-head{
display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);
gap:2.4rem;align-items:end;
}
@media(max-width:960px){.reviews-head{grid-template-columns:1fr;gap:1.6rem}}
.reviews-head h2 em{font-style:normal;color:var(--accent)}
/* Eine Karte, zwei Belege: Google links, Partnerbetrieb rechts */
.trust-bar{
display:grid;grid-template-columns:auto 1fr;align-items:center;
background:var(--surface);border:1px solid var(--border);border-radius:22px;
box-shadow:var(--shadow-card);padding:1.3rem 1.6rem;
}
@media(max-width:600px){.trust-bar{grid-template-columns:1fr}}
.trust-bar > a{text-decoration:none;color:inherit;display:flex;align-items:center;gap:1rem}
.trust-bar > a:hover b{color:var(--accent)}
.trust-google{padding-right:1.6rem}
.trust-google > b{font-family:'Manrope';font-size:2.9rem;font-weight:800;line-height:1;transition:color .2s}
.trust-detail{display:flex;flex-direction:column;gap:.3rem;font-size:.88rem;color:var(--text-muted)}
/* Gold statt Blau: Sterne sind das einzige Element, bei dem eine andere Farbe
erwartet wird - blaue Sterne liest niemand als Bewertung. */
.trust-bar .stars{display:flex;gap:.15rem}
.trust-bar .stars svg{width:19px;height:19px;fill:var(--gold)}
.trust-partner{border-left:1px solid var(--border);padding-left:1.6rem}
@media(max-width:600px){
.trust-google{padding:0 0 1.1rem}
.trust-partner{border-left:0;border-top:1px solid var(--border);padding:1.1rem 0 0}
}
.trust-partner svg{flex:none;color:var(--accent)}
.trust-partner b{display:block;font-size:1.02rem;font-weight:700;white-space:nowrap;transition:color .2s}
.trust-partner span span{font-size:.88rem;color:var(--text-muted)}
/* Ein grosses Zitat links mit Bild, zwei kleine rechts */
.reviews{
display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);
gap:1.3rem;margin-top:2.6rem;
}
@media(max-width:960px){.reviews{grid-template-columns:1fr}}
.review{
margin:0;background:var(--surface);border:1px solid var(--border);border-radius:22px;
box-shadow:var(--shadow-card);padding:1.7rem 1.8rem;
display:flex;flex-direction:column;
}
.review.featured{grid-row:span 2;flex-direction:row;gap:1.8rem;padding:2.2rem}
@media(max-width:960px){.review.featured{grid-row:auto}}
@media(max-width:700px){.review.featured{flex-direction:column-reverse;gap:.4rem;padding:1.7rem 1.8rem}}
.review-text{display:flex;flex-direction:column;flex:1 1 55%}
.review.featured img{
flex:1 1 45%;min-width:0;width:45%;height:auto;object-fit:cover;border-radius:14px;
object-position:55% 60%; /* das Geraet bleibt im Bild */
}
@media(max-width:700px){.review.featured img{width:100%;aspect-ratio:16/10}}
.review blockquote{margin:0}
/* „ ist ein tiefes Zeichen und sitzt auf der Grundlinie - ohne den
Versatz haengt es in die erste Zeile. */
.review blockquote::before{
content:"„";display:block;height:1.4rem;margin-bottom:.7rem;
font-family:'Manrope',serif;font-size:3.8rem;font-weight:800;line-height:1;
color:var(--gold);transform:translateY(-2.1rem);
}
.review-lead{
font-family:'Manrope','Inter',sans-serif;font-size:1.22rem;font-weight:800;
line-height:1.3;color:var(--text);margin-bottom:.55rem;
}
.review.featured .review-lead{font-size:clamp(1.5rem,2.6vw,2rem);line-height:1.15;margin-bottom:1rem}
.review blockquote p:not(.review-lead){color:var(--text-muted);line-height:1.6;font-size:.98rem}
.review.featured blockquote p:not(.review-lead){font-size:1.05rem}
.review blockquote p:last-child::after{content:"“"}
.review figcaption{
margin-top:auto;padding-top:1.3rem;font-size:.74rem;letter-spacing:.14em;
text-transform:uppercase;color:var(--text-muted);font-family:'Space Grotesk',monospace;
}
.reviews-more{
display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
gap:.6rem 2rem;margin-top:2.4rem;
}
.reviews-own{font-size:.88rem;color:var(--text-muted)}
.reviews-own:hover{color:var(--accent)}
/* Rechtshinweis: Kern sichtbar, Rest zum Aufklappen. Bewusst ohne Kasten. */
.review-note{
background:none;border:0;border-top:1px solid var(--border);border-radius:0;
padding:1rem 0 0;margin-top:2.4rem;
}
.review-note summary{
font-weight:400;font-size:.8rem;color:var(--text-muted);line-height:1.5;
justify-content:flex-start;flex-wrap:wrap;gap:.2rem .6rem;
}
.review-note summary span{text-decoration:underline;color:var(--text)}
.review-note summary:hover span{color:var(--accent)}
.review-note summary::after{font-size:1rem}
.review-note p{font-size:.8rem;line-height:1.6}
.review-note a{color:var(--text-muted);text-decoration:underline}
/* =========================================================
Markenseiten: Eckdaten-Leiste und Baureihen
========================================================= */
.spec-strip{padding:0 0 20px}
.specs{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--border);border:1px solid var(--border);border-radius:var(--radius);
overflow:hidden;
}
@media(max-width:760px){.specs{grid-template-columns:1fr 1fr}}
.specs > div{background:var(--surface);padding:1.3rem 1.4rem}
.specs dt{
font-family:'Space Grotesk',monospace;font-size:.72rem;letter-spacing:.16em;
text-transform:uppercase;color:var(--text-muted);margin-bottom:.4rem;
}
.specs dd{margin:0;font-size:1.02rem;font-weight:700;line-height:1.3}
.model{
display:grid;grid-template-columns:1.35fr 1fr;gap:2.4rem;
border-top:1px solid var(--border);padding:2.4rem 0;align-items:start;
}
@media(max-width:820px){.model{grid-template-columns:1fr;gap:1.4rem}}
.model:first-of-type{margin-top:2.4rem}
.model h3{font-size:1.45rem;margin-bottom:.7rem}
.model-body p{color:var(--text-muted);line-height:1.7}
/* Links zum Hersteller unter dem Modelltext: Produktseite, bei Daikin
auch das Datenblatt. Keine Knoepfe - das sind Belege, kein Aufruf. Die
Domain steht sichtbar daneben, wie bei .btn.ext. */
.model-links{
display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;margin-top:1rem;
font-size:.88rem;line-height:1.5;
}
.model-links a{color:var(--accent);font-weight:600;text-decoration:none}
.model-links a:hover{text-decoration:underline}
.model-links .ext-host{
font-size:.76rem;font-weight:600;opacity:.62;margin-left:.3em;white-space:nowrap;
}
.model-specs{list-style:none;display:grid;gap:.7rem;margin:0;padding:0}
.model-specs li{
position:relative;padding-left:1.5rem;font-size:.92rem;color:var(--text-muted);
}
.model-specs li::before{
content:"";position:absolute;left:0;top:.55em;
width:7px;height:7px;border-radius:50%;background:var(--gold);
}
.source-note{
margin-top:1.4rem;font-size:.78rem;color:var(--text-muted);line-height:1.6;
}
.source-note a{color:var(--text-muted);text-decoration:underline}
.source-note a:hover{color:var(--accent)}
/* =========================================================
Fusszeile: Social- und Partnerlinks
Reine Verweise, keine eingebetteten Widgets - sonst baut die Seite schon
beim Aufruf eine Verbindung zu Facebook auf.
========================================================= */
.foot-social{
display:flex;flex-wrap:wrap;gap:.7rem 1.6rem;align-items:center;
margin-top:2rem;padding-top:1.6rem;border-top:1px solid var(--band-border);
}
.foot-social a{
display:inline-flex;align-items:center;gap:.55rem;
color:var(--band-muted);text-decoration:none;font-size:.85rem;
transition:color .2s;
}
.foot-social a:hover{color:var(--band-text)}
.foot-social svg{flex:none}
/* =========================================================
Anlagen-Konfigurator (/konfigurator/)
Alles unter .cfg- , damit es keine bestehende Regel beruehrt.
Farben ausschliesslich ueber Tokens - die Seite laeuft hell
und dunkel wie jede andere.
========================================================= */
.cfg{
background:var(--surface);border:1px solid var(--border);
border-radius:var(--radius);overflow:hidden;margin-top:2.4rem;
/* Beim Schrittwechsel wird hierher gescrollt. Ohne den Abstand
schiebt die klebende Kopfzeile die Schrittleiste unter sich. */
scroll-margin-top:96px;
}
/* Steht nur, solange keine echte Preisliste hinterlegt ist. Bewusst
auffaellig: eine Vorschau darf nicht wie ein Angebot aussehen. */
.cfg-placeholder-note{
margin:0;padding:.9rem 1.6rem;font-size:.88rem;line-height:1.5;
background:var(--surface-2);border-bottom:1px solid var(--border);
color:var(--text-muted);
}
.cfg-placeholder-note b{color:var(--text)}
/* Die kurze Fassung des Hinweises gilt nur im App-Modus (siehe unten). */
.cfg-ph-kurz{display:none}
/* ---------- Schrittleiste ---------- */
.cfg-steps{
list-style:none;display:flex;gap:.3rem;padding:1rem 1.2rem;
border-bottom:1px solid var(--border);overflow-x:auto;
}
.cfg-steps li{flex:1 1 0;min-width:max-content}
.cfg-steps button{
display:flex;align-items:center;gap:.5rem;width:100%;
padding:.5rem .7rem;border:0;border-radius:10px;background:none;
font:inherit;font-size:.85rem;font-weight:600;color:var(--text-muted);
cursor:pointer;transition:background .2s,color .2s;
}
.cfg-steps button:disabled{cursor:default;opacity:.55}
.cfg-step-n{
flex:none;width:22px;height:22px;border-radius:50%;
display:grid;place-items:center;font-size:.75rem;
border:1.5px solid var(--border);
}
.cfg-steps .is-on button{color:var(--text);background:var(--surface-2)}
.cfg-steps .is-on .cfg-step-n{border-color:var(--accent);color:var(--accent)}
.cfg-steps .is-done .cfg-step-n{
background:var(--accent);border-color:var(--accent);color:var(--on-accent);
font-size:0;
}
.cfg-steps .is-done .cfg-step-n::after{content:"✓";font-size:.75rem}
/* ---------- Panel ---------- */
.cfg-panel{padding:1.8rem 1.6rem}
.cfg-group{border:0;padding:0;margin:0 0 2.2rem}
.cfg-group:last-child{margin-bottom:0}
.cfg-group legend{
font-family:'Manrope','Inter',sans-serif;
font-weight:800;font-size:1.15rem;line-height:1.2;
margin-bottom:1rem;padding:0;
}
.cfg-hint{font-size:.85rem;color:var(--text-muted);line-height:1.6;margin-top:.9rem}
.cfg-hint a{color:var(--accent);font-weight:600}
/* ---------- Auswahlkarten (Objekt) ---------- */
.cfg-options{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem}
.cfg-option{
position:relative;display:flex;flex-direction:column;gap:.2rem;
padding:.9rem 1rem;border:1.5px solid var(--border);border-radius:12px;
background:var(--surface);cursor:pointer;transition:border-color .2s,background .2s;
}
.cfg-option:hover{border-color:var(--accent-soft)}
/* Der Radio bleibt im Baum - Tastatur und Screenreader brauchen ihn -,
ist aber visuell weg; die Karte selbst ist die Anzeige. */
.cfg-option input{position:absolute;opacity:0;width:1px;height:1px}
.cfg-option b{font-size:.95rem;font-weight:600}
.cfg-option span{font-size:.82rem;color:var(--text-muted);line-height:1.45}
.cfg-option.is-on{border-color:var(--accent);background:var(--surface-2)}
.cfg-option:focus-within{outline:3px solid var(--accent);outline-offset:2px}
/* ---------- Raeume ---------- */
.cfg-rooms{display:grid;gap:.9rem}
.cfg-room{border:1.5px solid var(--border);border-radius:12px;padding:1.1rem 1.2rem}
/* Gleicher Deckel wie .cfg-room-grid, sonst steht "Entfernen" weit
rechts allein, waehrend die Felder darunter bei 640px enden. */
.cfg-room-head{display:flex;align-items:center;gap:1rem;margin-bottom:.8rem;max-width:640px}
.cfg-room-name{
flex:1;margin:0;padding:.4rem .6rem;font-weight:700;font-size:1rem;
border-color:transparent;background:transparent;
}
.cfg-room-name:hover{border-color:var(--border)}
.cfg-room-del{
flex:none;border:0;background:none;padding:.3rem;cursor:pointer;
font:inherit;font-size:.82rem;color:var(--text-muted);text-decoration:underline;
}
.cfg-room-del:hover{color:var(--accent)}
/* Drei gleiche Spalten mit Deckel. Vorher standen 120px neben zwei
1fr-Spalten - bei voller Panelbreite waren die beiden Auswahlfelder
knapp 500px breit fuer ein Wort wie "Normal". */
.cfg-room-grid{
display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
gap:.8rem;max-width:820px;
}
.cfg-room-grid label{display:block;font-size:.82rem;color:var(--text-muted)}
/* Zahlenfeld und Auswahlfelder stehen nebeneinander in einer Zeile und
muessen deshalb exakt gleich hoch sein. Beide bekommen hier dieselben
Werte, statt sich auf die Vorgaben zweier verschiedener UA-Widgets zu
verlassen - die gehen je nach Engine auseinander. line-height steht
ausdruecklich da, weil `normal` bei input und select unterschiedlich
ausfaellt. */
.cfg-room-grid input,
.cfg-room-grid select{
width:100%;padding:.7rem .8rem;margin-top:.35rem;
border:1.5px solid var(--border);border-radius:12px;
font-family:inherit;font-size:.92rem;line-height:1.5;
background:var(--surface);color:var(--text);
}
/* WebKit ignoriert Padding und Hoehe an einem