/* =========================================================
HM Elektro GmbH — Stylesheet
Farbwelt aus dem Logo: Marken-Grün #01ed96 auf hellem Grau.
========================================================= */
@font-face{
font-family:"InterVar";
src:url("../fonts/InterVariable.woff2") format("woff2");
font-weight:100 900;
font-display:swap;
font-style:normal;
}
:root{
/* Marke */
/* Der Logo-Verlauf läuft von #01ed96 nach #022c19. Für Flächen nehmen wir
nur das obere Stück davon — bis ganz unten wäre es fast schwarz. */
--green:#01ed96;
--green-mid:#01bd77;
--green-verlauf:linear-gradient(158deg, #01ed96 0%, #01bd77 100%);
--green-verlauf-hover:linear-gradient(158deg, #2bf7ac 0%, #03d187 100%);
--green-text:#03854f; /* kontraststark genug für Text auf Hell */
--green-deep:#022c19;
--green-tint:#e4faf1;
/* Intro (dunkel) */
--dark:#060a08;
/* Seite (hell) */
--bg:#f2f4f3;
--surface:#ffffff;
--surface-2:#e7eae8;
--line:#dbdfdd;
--line-strong:#c3c9c6;
--ink-strong:#0e1311;
--ink:#3b433e;
--ink-soft:#68716c;
--radius:3px;
/* Die Hero-Karten sind deutlich staerker gerundet als der Rest der
Seite — sie sollen als eigene Flaechen lesbar sein, nicht als
Abschnitte. */
--radius-karte:20px;
--hero-dunkel:#0b1310;
--shadow:0 1px 2px rgba(14,19,17,.04), 0 8px 24px rgba(14,19,17,.06);
--shadow-lg:0 2px 4px rgba(14,19,17,.05), 0 18px 48px rgba(14,19,17,.10);
/* Eine einzige Breite für alles: Kopf, Sektionen, Fuss. Wer sie ändert,
ändert sie überall — auch in der Navigation. */
--wrap:1200px;
--pad:clamp(20px,4vw,56px);
--gap-section:clamp(72px,9vw,136px);
--header-h:70px;
--font:"InterVar","Inter","Helvetica Neue",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
/* Scrollbar-Platz immer reservieren: sonst springt das Layout, wenn nach dem
Intro das Scrollen freigegeben wird, und das Logo landet neben dem Nav-Slot. */
html{
scroll-behavior:smooth;
scrollbar-gutter:stable;
background:var(--bg);
-webkit-text-size-adjust:100%;
}
body{
background:var(--bg);
color:var(--ink);
font-family:var(--font);
font-size:16px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
overflow-x:hidden;
}
body.is-intro{background:var(--dark)}
img,svg,video{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
::selection{background:var(--green);color:#04150d}
:focus-visible{outline:2px solid var(--green-text);outline-offset:3px;border-radius:2px}
/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0;color:var(--ink-strong);font-weight:700;letter-spacing:-.028em;line-height:1.08}
h1{font-size:clamp(2.1rem,5vw,3.9rem);letter-spacing:-.035em;line-height:1.03}
h2{font-size:clamp(1.7rem,3.4vw,2.7rem)}
h3{font-size:clamp(1.05rem,1.5vw,1.28rem);letter-spacing:-.018em;line-height:1.25}
h4{font-size:1rem;letter-spacing:-.01em}
p{margin:0 0 1.05em}
p:last-child{margin-bottom:0}
strong{font-weight:650;color:var(--ink-strong)}
.eyebrow{
display:block;margin:0 0 22px;font-size:11.5px;font-weight:600;
letter-spacing:.22em;text-transform:uppercase;color:var(--green-text);
}
.eyebrow.center{text-align:center}
/* Der Ortsteil hängt am Desktop mit einem Trennpunkt an, auf dem Handy
steht er auf einer eigenen Zeile — sonst bricht er mitten im Kantonsnamen. */
.eyebrow-orte::before{content:"· ";opacity:.6}
/* text-wrap:pretty verhindert ein einzelnes Wort allein in der letzten Zeile
(„… HM Elektro / GmbH"). Ältere Browser ignorieren es einfach. */
.lede{font-size:clamp(16px,1.25vw,18px);line-height:1.65;color:var(--ink-soft);text-wrap:pretty}
.prose p{color:var(--ink-soft);line-height:1.7}
.prose h3{margin:1.8em 0 .6em}
.prose ul{margin:0 0 1.1em;padding-left:1.1em;color:var(--ink-soft)}
.prose li{margin-bottom:.35em}
.prose a{color:var(--green-text);text-decoration:underline;text-underline-offset:3px}
/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad)}
/* Für Fliesstext bewusst schmaler — 820 px sind rund 80 Zeichen pro
Zeile, darüber wird Lesen mühsam. Die Aussenkanten bleiben gleich. */
.wrap-narrow{max-width:820px;margin:0 auto;padding-inline:var(--pad)}
.section{padding-block:var(--gap-section)}
.section--tight{padding-block:clamp(52px,6vw,88px)}
.section--surface{background:var(--surface)}
.section--dark{background:var(--dark);color:#d6e2dc}
.section--dark h2,.section--dark h3{color:#fff}
.divider{border-top:1px solid var(--line)}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,64px)}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
/* ---------- Buttons ---------- */
.btn{
position:relative;overflow:hidden;isolation:isolate;
display:inline-flex;align-items:center;justify-content:center;gap:9px;
font-family:inherit;font-size:15px;font-weight:600;line-height:1;
padding:15px 26px;border-radius:var(--radius);border:1px solid transparent;
cursor:pointer;white-space:nowrap;
transition:background .2s ease,border-color .2s ease,color .2s ease,
transform .18s ease,box-shadow .28s ease;
}
/* Ein heller Streifen fährt einmal durch — wie ein Impuls durch einen Leiter */
.btn::before{
content:"";position:absolute;inset:0;z-index:-1;
background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);
transform:translateX(-120%);
}
.btn:hover::before{animation:stromstoss .62s cubic-bezier(.3,0,.2,1)}
@keyframes stromstoss{to{transform:translateX(120%)}}
.btn-primary{background:var(--green-verlauf);color:#04150d}
.btn-primary:hover{
background:var(--green-verlauf-hover);transform:translateY(-1px);
box-shadow:0 0 0 1px rgba(1,189,119,.35), 0 6px 22px rgba(1,189,119,.32);
}
.btn-primary:active{transform:translateY(0);box-shadow:0 0 0 1px rgba(1,189,119,.45)}
/* Beim Ghost-Button lädt sich der Rahmen von links nach rechts auf */
.btn-ghost{border-color:var(--line-strong);color:var(--ink-strong);background:transparent}
.btn-ghost::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
background:var(--green-verlauf);transition:right .42s cubic-bezier(.3,0,.2,1);
}
.btn-ghost:hover{border-color:var(--green-text);color:var(--green-text)}
.btn-ghost:hover::after{right:0}
.btn-dark::before{background:linear-gradient(105deg,transparent 35%,rgba(1,237,150,.35) 50%,transparent 65%)}
.btn-dark{background:var(--ink-strong);color:#fff}
.btn-dark:hover{background:#000;transform:translateY(-1px)}
.btn-sm{padding:10px 17px;font-size:13.5px}
.btn svg{width:15px;height:15px;flex:none}
.link-arrow{
display:inline-flex;align-items:center;gap:8px;
font-size:14.5px;font-weight:600;color:var(--green-text);
}
.link-arrow svg{width:14px;height:14px;transition:transform .22s ease}
.link-arrow:hover svg{transform:translateX(4px)}
/* ---------- Header ---------- */
.site-header{
position:fixed;top:0;left:0;right:0;z-index:80;
padding:14px 0;
background:rgba(242,244,243,.86);
backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
border-bottom:1px solid transparent;
transition:border-color .25s ease,background .25s ease;
}
/* Der Streifen geht über die volle Breite, der Inhalt bündig zu den Sektionen */
.header-inner{
max-width:var(--wrap);margin:0 auto;padding-inline:var(--pad);
display:flex;align-items:center;gap:clamp(18px,3vw,40px);
}
.site-header.is-stuck{border-bottom-color:var(--line);background:rgba(242,244,243,.94)}
body.intro-active .site-header{opacity:0;pointer-events:none}
.brand{display:flex;align-items:center;gap:11px}
.brand-mark{display:block;width:42px;height:31.3px;flex:none}
.brand-mark-inner{display:block;width:100%;height:100%}
.brand-mark svg{display:block;width:100%;height:100%}
/* Dunkelgrau statt des fast schwarzen --ink-strong: Neben der gruenen
Bildmarke wirkte reines Schwarz hart und fremd. */
.brand-word{display:block;color:var(--ink)}
/* Der Schriftzug ist Text, kein Bild — gesetzt in der Hausschrift, aufrecht
und fett. Vorher stand die gezeichnete Wortmarke hier und „GmbH" als Text
daneben; die zwei Schriften nebeneinander sahen nach Versehen aus. */
.hm-wortmarke{
display:block;font-weight:700;letter-spacing:-.02em;
font-size:17px;line-height:1;white-space:nowrap;
}
.nav{display:flex;gap:clamp(16px,2.1vw,30px);margin-left:auto;align-items:center}
.nav a{
position:relative;padding:7px 0;white-space:nowrap;
font-size:14.5px;color:var(--ink-soft);transition:color .2s ease;
}
.nav a::after{
content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;
background:var(--green-text);transition:right .28s cubic-bezier(.4,0,.2,1);
}
.nav a:hover{color:var(--ink-strong)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:0}
.nav a[aria-current="page"]{color:var(--ink-strong);font-weight:600}
.header-cta{display:flex;align-items:center;gap:14px}
@keyframes pulse{
0%{box-shadow:0 0 0 0 rgba(3,133,79,.45)}
70%{box-shadow:0 0 0 9px rgba(3,133,79,0)}
100%{box-shadow:0 0 0 0 rgba(3,133,79,0)}
}
.burger{
display:none;width:42px;height:38px;padding:0;cursor:pointer;
flex-direction:column;align-items:center;justify-content:center;gap:5px;
background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius);
}
.burger span{display:block;width:17px;height:1.5px;background:var(--ink-strong);transition:transform .25s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg)}
.mobile-nav{
position:fixed;inset:var(--header-h) 0 auto 0;z-index:79;
background:var(--surface);border-bottom:1px solid var(--line);
padding:0 0 26px;
display:none;box-shadow:var(--shadow-lg);
}
.mobile-nav.is-open{display:block}
.mobile-nav-inner{
max-width:var(--wrap);margin:0 auto;padding:14px var(--pad) 0;
display:flex;flex-direction:column;gap:2px;
}
.mobile-nav a{
padding:14px 0;font-size:18px;font-weight:600;color:var(--ink-strong);
border-bottom:1px solid var(--line);
}
.mobile-nav a:last-of-type{border-bottom:0}
.mobile-nav .btn{margin-top:16px}
/* ---------- Seiten-Hero (Unterseiten) ---------- */
.page-hero{padding-top:calc(var(--header-h) + clamp(46px,7vw,96px));padding-bottom:clamp(40px,5vw,72px)}
.page-hero .lede{max-width:620px;margin-top:20px}
.page-hero h1{max-width:16ch}
/* ---------- Home-Hero ---------- */
/* ---------- Hero ----------
Zwei gleich hohe Karten nebeneinander: links der Text auf dunklem Grund,
rechts das Projektbild. Der dunkle Grund ist der eigentliche Kniff — das
Marken-Gruen ist auf Hell zu blass fuer grosse Flaechen und musste bisher
als gedaempftes Textgruen auftreten. Auf Dunkel darf es leuchten. */
.home-hero{
position:relative;
display:flex;flex-direction:column;justify-content:center;
/* Bewusst keine volle Bildschirmhoehe: auf grossen Schirmen entstuende
ringsum viel Leere, und die Karten schwaemmen in der Mitte. Die Hoehe
ergibt sich aus dem Inhalt, die Abstaende wachsen nur mit. */
padding:calc(var(--header-h) + clamp(18px,2.4vw,34px)) 0 clamp(30px,4vw,54px);
}
.hero-grid{
position:relative;z-index:2;
max-width:var(--wrap);margin:0 auto;width:100%;
padding-inline:var(--pad);
display:grid;grid-template-columns:1fr;gap:clamp(14px,1.6vw,20px);
align-items:stretch;
}
/* Rund 60 zu 40 zugunsten des Textes. Die Ueberschrift bekommt damit ihre
zwei Zeilen, ohne dass der Browser zusaetzlich umbricht, und die Bildkarte
wirkt als Beigabe statt als gleichwertige zweite Flaeche. */
.home-hero.has-media .hero-grid{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.hero-karte{
/* position:relative ist Voraussetzung dafuer, dass die Logo-Kontur sich an
dieser Karte ausrichtet und von overflow:hidden beschnitten wird. */
position:relative;
display:flex;flex-direction:column;justify-content:center;
padding:clamp(30px,4.2vw,62px);
border-radius:var(--radius-karte);
background:var(--hero-dunkel);
/* Ein Lichtschein von oben links, wie ihn eine Leuchte werfen wuerde.
Haelt die grosse Flaeche lebendig, ohne den Text zu stoeren. */
background-image:radial-gradient(115% 80% at 8% 0%,
rgba(1,237,150,.13) 0%, rgba(1,237,150,0) 58%);
overflow:hidden;
}
/* Die Logo-Kontur als Praegung im Hintergrund. Sie laeuft bewusst ueber die
untere rechte Ecke hinaus — angeschnitten wirkt sie wie ein Wasserzeichen,
vollstaendig sichtbar wie ein zweites, missgluecktes Logo. */
.hero-kontur{
position:absolute;z-index:0;pointer-events:none;
right:-9%;bottom:-3%;width:min(62%,420px);height:auto;
/* Die Sammelregel fuer Bilder deckelt SVG auf 100% der Elternbreite. Hier
soll die Kontur bewusst darueber hinausragen und angeschnitten werden. */
max-width:none;
color:rgba(1,237,150,.11);
}
/* Der Inhalt liegt darueber */
.hero-karte > :not(.hero-kontur){position:relative;z-index:1}
.hero-pill{
display:inline-flex;align-items:center;gap:9px;align-self:flex-start;
margin:0 0 clamp(22px,2.6vw,32px);
padding:8px 15px 8px 12px;border-radius:99px;
border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.045);
/* In Grossbuchstaben mit Sperrung braucht die Zeile spuerbar mehr Platz als
im Fliesstext — knapp bemessen, damit sie in der Karte auf eine Zeile
passt statt dreifach umzubrechen. */
font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
line-height:1.2;color:rgba(255,255,255,.74);
}
/* Am Desktop haengen die Orte mit einem Trennpunkt an, auf dem Handy stehen
sie auf einer eigenen Zeile — dasselbe Muster wie bei der Zeile ueber den
Seitentiteln. */
/* Zeichen direkt statt als Escape: bei "\00b7 " verschluckt CSS das
Leerzeichen dahinter, es beendet die Escape-Sequenz. */
.pill-orte::before{content:" · ";opacity:.55}
/* Auf schmalen Schirmen die amtlichen Kuerzel — in der Schweiz gelaeufig und
der einzige Weg, Beruf und alle drei Kantone auf einer Zeile zu halten. */
.orte-kurz{display:none}
.hero-pill .punkt{
width:7px;height:7px;border-radius:50%;flex:none;background:var(--green);
box-shadow:0 0 0 0 rgba(1,237,150,.55);animation:pulse 2.6s infinite;
}
.hero-karte h1{
margin:0;color:#fff;max-width:none;
font-size:clamp(33px,4.4vw,56px);line-height:1.04;letter-spacing:-.032em;
}
/* Ein hervorgehobenes Stueck der Ueberschrift. Der Kunde setzt es im CMS
mit …, genau wie er dort schon
setzt. */
.hero-karte h1 em{font-style:normal;color:var(--green)}
.hero-karte .lede{
margin:clamp(18px,2vw,26px) 0 clamp(26px,3.2vw,38px);
max-width:44ch;font-size:clamp(15px,1.15vw,16.5px);line-height:1.62;
color:rgba(255,255,255,.62);
}
/* Zentriert als Grundeinstellung — so steht sie im CTA-Band und auf der
404-Seite. Nur in der Hero-Karte laeuft sie linksbuendig mit dem Text. */
.cta-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.hero-karte .cta-row{justify-content:flex-start}
/* Zweiter Knopf ohne Flaeche — auf Dunkel wuerde ein heller Rahmen mit dem
gefuellten Knopf daneben um Aufmerksamkeit streiten. */
.btn-hell{
background:transparent;border-color:transparent;color:#fff;padding-inline:14px;
}
.btn-hell svg{width:17px;height:17px;transition:transform .25s ease}
.btn-hell:hover{background:rgba(255,255,255,.07);color:#fff}
.btn-hell:hover svg{transform:translateX(3px)}
/* ---------- Bildkarte im Hero ---------- */
.hero-media{
/* Untergrenze statt fester Hoehe: die Textkarte bestimmt, wie hoch
beide werden. Nur wenn sie sehr kurz ausfaellt, greift dieser Wert. */
position:relative;min-height:min(52vh,420px);
border-radius:var(--radius-karte);overflow:hidden;
background:var(--surface-2);
}
.hero-shot{
position:absolute;inset:0;display:block;z-index:1;
background-size:cover;background-position:center;
opacity:0;visibility:hidden;
transition:opacity .9s ease-in-out, visibility 0s linear .9s;
}
/* Das neue Bild blendet oben drueber ein … */
.hero-shot.on{opacity:1;visibility:visible;z-index:3;transition:opacity .9s ease-in-out}
/* … waehrend das vorherige darunter noch deckend liegen bleibt. Blendeten
beide zugleich, schiene dazwischen der helle Grund durch. */
.hero-shot.raus{opacity:1;visibility:visible;z-index:2;transition:none}
/* Titel und Ort in einer einzigen Kapsel — nebeneinander, getrennt durch
einen feinen Strich. Uebereinander gestapelt mit Beschriftung wirkte sie
wie ein Aushang und verdeckte zu viel vom Foto. */
.hero-cap{
position:absolute;z-index:5;left:50%;bottom:16px;
/* Zentriert ueber die eigenstaendige translate-Eigenschaft, damit transform
fuer den Schwebe-Effekt beim Hovern frei bleibt. */
translate:-50% 0;
display:inline-flex;align-items:center;gap:10px;
max-width:calc(100% - 32px);
padding:9px 17px 9px 14px;border-radius:99px;
background:rgba(255,255,255,.95);
backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
box-shadow:0 1px 3px rgba(14,19,17,.12), 0 10px 30px rgba(14,19,17,.14);
transition:opacity .32s ease, transform .25s ease;
}
.hero-cap.wechselt{opacity:0}
.hero-cap:hover{transform:translateY(-1px)}
.hero-cap .punkt{
width:7px;height:7px;border-radius:50%;flex:none;
background:var(--green-verlauf);box-shadow:0 0 0 3px rgba(1,237,150,.16);
}
.hero-cap b{
font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--ink-strong);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.hero-cap em{
font-style:normal;font-size:13px;color:var(--ink-soft);white-space:nowrap;
padding-left:10px;margin-left:2px;border-left:1px solid var(--line);
}
.hero-cap em:empty{display:none}
.hero-dots{
position:absolute;right:16px;top:16px;
z-index:5;display:flex;gap:7px;
}
.hero-dots button{
width:9px;height:9px;padding:0;border:0;border-radius:99px;cursor:pointer;
/* Halbtransparentes Weiss mit dunklem Rand: sichtbar auf hellen wie auf
dunklen Fotos — die Punkte liegen immer ueber dem Bild. */
background:rgba(255,255,255,.6);
box-shadow:0 0 0 1px rgba(14,19,17,.18);
transition:width .3s ease,background .3s ease;
}
.hero-dots button.on{width:24px;background:var(--green-verlauf)}
/* ---------- Leistungs-Kacheln ---------- */
.svc-grid{
display:grid;grid-template-columns:repeat(3,1fr);
border-top:1px solid var(--line);border-left:1px solid var(--line);
}
.svc{
/* Aus diesen beiden Werten leitet sich die Mitte des Symbols ab — dorthin
laufen Kabel und Schein. Ändert sich der Abstand, wandert beides mit. */
--kachel-x:clamp(22px,2.4vw,30px);
--kachel-y:clamp(26px,2.6vw,34px);
--ikon-x:calc(var(--kachel-x) + 17px);
--ikon-y:calc(var(--kachel-y) + 17px);
position:relative;display:block;isolation:isolate;
border-right:1px solid var(--line);border-bottom:1px solid var(--line);
/* Gleicher Abstand oben wie unten. Der groessere Fuss stammt aus der Zeit,
als unter dem Titel noch ein Beschreibungstext stand; ohne ihn stand
die Kachel unten leer. */
padding:var(--kachel-y) var(--kachel-x);
transition:background .28s ease;
}
a.svc:hover,.svc.an{background:var(--surface)}
a.svc:hover h3,.svc.an h3{color:var(--green-text);transition-delay:.42s}
.svc h3{transition:color .3s ease}
/* ---------- Einspeisung einer Karte ----------
Ein Leiter fährt bis zum Symbol, dort geht das Licht an. Aus welcher
Richtung, steuert die Klasse .strom--* — im Raster ist 'oben' richtig,
sonst käme der Leiter bei den mittleren Kacheln scheinbar aus der
Nachbarkachel. */
.strom{
position:absolute;inset:0;z-index:1;
pointer-events:none;overflow:hidden;border-radius:inherit;
}
.strom-schein{
position:absolute;inset:0;opacity:0;
/* Grosszügiger Radius mit sanftem Abfall — viele Stopps statt weniger,
sonst zeichnet sich eine sichtbare Kante ab. */
background:radial-gradient(82% 96% at var(--ikon-x) var(--ikon-y),
rgba(1,237,150,.26) 0%,
rgba(1,237,150,.19) 18%,
rgba(1,237,150,.12) 34%,
rgba(1,237,150,.06) 52%,
rgba(1,237,150,.02) 70%,
transparent 88%);
/* leicht verzögert: erst kommt der Strom an, dann geht das Licht an */
transition:opacity .55s ease .3s;
}
.kabel{
position:absolute;
background:var(--green-verlauf);
box-shadow:0 0 9px rgba(1,237,150,.85);
}
/* von oben herunter auf das Symbol */
.strom--oben .kabel{
left:var(--ikon-x);top:0;width:2px;height:0;margin-left:-1px;
transition:height .38s cubic-bezier(.3,0,.2,1);
}
a.svc:hover .strom--oben .kabel,
.svc.an .strom--oben .kabel{height:calc(var(--ikon-y) - 19px)}
/* von links heran */
.strom--links .kabel{
top:var(--ikon-y);left:0;height:2px;width:0;margin-top:-1px;
transition:width .38s cubic-bezier(.3,0,.2,1);
}
a.svc:hover .strom--links .kabel,
.svc.an .strom--links .kabel{width:calc(var(--ikon-x) - 19px)}
/* von rechts heran */
.strom--rechts .kabel{
top:var(--ikon-y);right:0;height:2px;width:0;margin-top:-1px;
transition:width .38s cubic-bezier(.3,0,.2,1);
background:linear-gradient(-158deg,#01ed96 0%,#01bd77 100%);
}
a.svc:hover .strom--rechts .kabel,
.svc.an .strom--rechts .kabel{width:calc(100% - var(--ikon-x) - 19px)}
/* von unten herauf */
.strom--unten .kabel{
left:var(--ikon-x);bottom:0;width:2px;height:0;margin-left:-1px;
transition:height .38s cubic-bezier(.3,0,.2,1);
}
a.svc:hover .strom--unten .kabel,
.svc.an .strom--unten .kabel{height:calc(100% - var(--ikon-y) - 19px)}
a.svc:hover .strom-schein,
.svc.an .strom-schein{opacity:1}
/* Der Inhalt liegt über dem Schein */
.svc > :not(.strom){position:relative;z-index:2}
.member .kabel{top:auto;bottom:34%;z-index:3}
.svc-ico{
display:block;margin-bottom:20px;color:var(--ink-soft);
transition:color .35s ease;
}
.svc-ico svg{display:block}
/* Das Symbol zündet erst, wenn der Leiter angekommen ist: 0,38 s fährt das
Kabel, danach flackert es kurz wie eine Leuchtstoffröhre und bleibt dann
ruhig stehen — gezeichnet mit demselben Verlauf wie das Kabel, nicht im
gedämpften Textgrün.
Zwei Animationen im selben Takt: die Deckkraft am Symbol, die Strichfarbe
am SVG. Getrennt, weil eine Verlaufsfüllung sich nicht mit currentColor in
einer Kurve mischen lässt — mit steps() springt sie stattdessen. */
a.svc:hover .svc-ico,
.svc.an .svc-ico{animation:zuenden .62s steps(1,end) .34s both}
/* Kein Verlauf im Strich: eine url(#id)-Referenz auf eine externe, leere
Def-SVG loest Safari/iOS mitten in einer steps()-Animation unzuverlaessig
auf — einzelne Pfade verlieren dabei ihren Strich, andere behalten den
letzten gueltigen Zustand. Stattdessen faerbt currentColor den Strich
direkt; jeder im Icon zeichnet stroke="currentColor". */
@keyframes zuenden{
0% {opacity:1; color:var(--ink-soft)}
11% {opacity:1; color:var(--green-mid)}
19% {opacity:.30; color:var(--ink-soft)}
30% {opacity:1; color:var(--green-mid)}
39% {opacity:.45; color:var(--ink-soft)}
50% {opacity:1; color:var(--green-mid)}
59% {opacity:.78; color:var(--green-mid)}
100% {opacity:1; color:var(--green-mid)}
}
.svc h3{margin-bottom:0}
/* Abschluss der Leistungsuebersicht: Ergaenzungstext und der Verweis auf die
Detailseite. Steht unter den Kacheln, nicht daneben — erst der Ueberblick,
dann der Weg in die Tiefe. */
.svc-schluss{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(20px,4vw,56px);flex-wrap:wrap;
margin-top:clamp(30px,4vw,48px);
}
.svc-schluss .lede{max-width:56ch;margin:0}
.svc-schluss .btn{flex:none}
@media (max-width:760px){
.svc-schluss{flex-direction:column;align-items:flex-start}
}
/* ---------- Leistungen: Detailansicht ----------
Bewusst ohne Aufklappen und ohne Hover: alles steht sofort da. Auf dem
Handy gibt es kein Überfahren, und ausgeklappte Inhalte findet Google
ohnehin besser. */
.svc-jump{border-block:1px solid var(--line);background:var(--surface);position:relative;z-index:5}
.svc-jump ul{
list-style:none;margin:0;padding:14px 0;
display:flex;gap:8px;flex-wrap:wrap;
}
.svc-jump a{
display:inline-block;padding:7px 14px;border-radius:99px;
font-size:13.5px;color:var(--ink-soft);
border:1px solid var(--line);background:var(--bg);
transition:color .2s ease,border-color .2s ease,background .2s ease;
}
.svc-jump a:hover,.svc-jump a:focus-visible{
color:var(--green-text);border-color:var(--green-text);background:var(--green-tint);
}
/* Der Referenzfilter sitzt im selben Band — gleiche Innenabstaende wie die
Sprungmarkenliste, damit beide Seiten identisch beginnen. */
.svc-jump .filter{padding:14px 0;margin-bottom:0}
/* ---------- Leistungen: Bildkacheln ----------
Nur Bild und Titel, auf Wunsch des Kunden. Ohne Text wirkte die frühere
Karte mit Bild auf der einen und Inhalt auf der anderen Seite halb leer —
deshalb ein Raster aus Kacheln, in dem das Foto die Fläche trägt.
Die ganze Kachel ist ein Link zur Offertanfrage. */
.svc-karten{
display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
gap:clamp(16px,2vw,28px);
}
.svc-karte{
display:flex;flex-direction:column;
border-radius:var(--radius-karte);overflow:hidden;
background:var(--surface);border:1px solid var(--line);
color:inherit;text-decoration:none;
scroll-margin-top:calc(var(--header-h) + 24px);
/* Kein transform auf der Kachel selbst: das braucht .reveal fürs
Einblenden. Bewegt wird nur das Bild darin. */
transition:border-color .35s ease, box-shadow .35s ease;
}
/* Flex statt Raster, und flex:none — als Rasterelement würde das Bild durch
die Streckung auf die Zeilenhöhe gezerrt, und WebKit gibt der Streckung
den Vorzug vor aspect-ratio (auf iOS hatte die Bildspalte deshalb einmal
die Höhe 0). In einer Flex-Spalte wirkt die Streckung nur in der Breite. */
.svc-karte-bild{
position:relative;flex:none;aspect-ratio:4/3;overflow:hidden;
background:var(--surface-2);
}
.svc-karte-bild img{
position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
transition:transform .7s cubic-bezier(.2,.7,.2,1);
}
/* Solange kein Foto hinterlegt ist: das Symbol der Leistung auf ruhiger
Flaeche, damit die Kachel nicht leer wirkt. */
.svc-karte-bild.ohne-bild{
display:grid;place-items:center;
background-image:radial-gradient(70% 70% at 50% 40%,
rgba(1,237,150,.10) 0%, rgba(1,237,150,0) 70%);
}
.svc-karte-ikon{display:block;color:var(--line-strong)}
.svc-karte-ikon svg{width:clamp(52px,6vw,72px);height:auto}
/* flex:1 und margin-top:auto unten: Bricht in einer Reihe ein Titel auf zwei
Zeilen um, werden alle Kacheln der Reihe gleich hoch gestreckt — und die
Beschriftungen bleiben trotzdem auf einer Linie am unteren Rand. */
.svc-karte-fuss{
flex:1 1 auto;
display:flex;flex-direction:column;align-items:flex-start;gap:14px;
padding:clamp(16px,1.8vw,22px) clamp(18px,2vw,24px) clamp(18px,2vw,24px);
}
.svc-karte-titel{display:flex;align-items:center;gap:12px;min-width:0}
.svc-karte-titel .svc-ico{margin:0;flex:none;color:var(--green-text)}
.svc-karte-titel h2{
min-width:0;margin:0;
font-size:clamp(1.02rem,1.35vw,1.18rem);line-height:1.25;
}
/* Sagt, was die Kachel tut. Ein Pfeil an dieser Stelle las sich als
„mehr Information", nicht als Anfrage. */
.svc-karte-aktion{
margin-top:auto;
display:inline-flex;align-items:center;
padding:7px 14px;border-radius:99px;border:1px solid var(--line);
font-size:13px;font-weight:600;line-height:1.2;color:var(--ink);
transition:background-color .3s ease, color .3s ease, border-color .3s ease;
}
/* Überfahren nur mit Maus — auf Touch-Geräten bliebe :hover nach dem
Antippen kleben. Dort setzt site.js .an auf die Kachel in der Bildmitte. */
@media (hover:hover){
.svc-karte:hover{border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.svc-karte:hover .svc-karte-bild img{transform:scale(1.04)}
.svc-karte:hover .svc-ico{animation:zuenden .55s steps(1,end) both}
.svc-karte:hover .svc-karte-aktion{background:var(--green);border-color:transparent;color:var(--ink-strong)}
}
.svc-karte.an{border-color:var(--line-strong);box-shadow:var(--shadow-lg)}
.svc-karte.an .svc-karte-bild img{transform:scale(1.04)}
.svc-karte.an .svc-ico{animation:zuenden .55s steps(1,end) both}
.svc-karte.an .svc-karte-aktion{background:var(--green);border-color:transparent;color:var(--ink-strong)}
.svc-karte:focus-visible{outline:2px solid var(--green-text);outline-offset:3px}
@media (prefers-reduced-motion:reduce){
.svc-karte-bild img{transition:none}
.svc-karte:hover .svc-karte-bild img,.svc-karte.an .svc-karte-bild img{transform:none}
}
@media (max-width:1100px){
.svc-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:700px){
.svc-karten{grid-template-columns:1fr}
.svc-karte-bild{aspect-ratio:16/10}
}
/* ---------- Zahlen-Band ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line)}
.stat{background:var(--bg);padding:clamp(26px,3vw,38px) clamp(18px,2vw,28px)}
.section--surface .stat{background:var(--surface)}
.stat .val{
display:block;font-size:clamp(2rem,3.6vw,2.9rem);font-weight:700;
color:var(--ink-strong);letter-spacing:-.04em;line-height:1;margin-bottom:10px;
/* Gleich breite Ziffern: Beim Hochzaehlen wechselt die Zahl viele Male,
mit proportionalen Ziffern zappelte sie dabei in der Breite. */
font-variant-numeric:tabular-nums;
}
.stat .lbl{font-size:13.5px;color:var(--ink-soft);line-height:1.45}
/* ---------- Projekte / Referenzen ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,30px)}
.proj{
position:relative;
display:flex;flex-direction:column;background:var(--surface);
border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease,border-color .3s ease;
}
a.proj:hover,.proj.an{transform:translateY(-3px);box-shadow:var(--shadow-lg);border-color:var(--line-strong)}
a.proj:hover h3,.proj.an h3{color:var(--green-text)}
.proj h3{transition:color .3s ease}
.proj-img{position:relative;aspect-ratio:4/3;background:var(--surface-2);overflow:hidden}
/* Das Bild liegt zunächst leicht abgedunkelt da und wird beim Überfahren
voll ausgeleuchtet — als hätte jemand den Schalter gedrückt. */
.proj-img img{
width:100%;height:100%;object-fit:cover;
filter:brightness(.9) saturate(.92);
transition:transform .6s cubic-bezier(.3,0,.2,1), filter .45s ease;
}
a.proj:hover .proj-img img,
.proj.an .proj-img img{transform:scale(1.05);filter:brightness(1.06) saturate(1.04)}
.proj-body{padding:20px 22px 24px;flex:1;display:flex;flex-direction:column}
.proj-meta{
display:flex;gap:10px;align-items:center;flex-wrap:wrap;
font-size:12px;color:var(--ink-soft);margin-bottom:10px;
}
.proj-meta .tag{
background:var(--green-tint);color:var(--green-text);
padding:3px 9px;border-radius:999px;font-weight:600;font-size:11.5px;
}
.proj h3{margin-bottom:7px}
.proj p{font-size:14px;color:var(--ink-soft);margin:0}
.placeholder-img{
position:relative;background:var(--surface-2);
display:grid;place-items:center;color:var(--line-strong);
}
.placeholder-img::before,.placeholder-img::after{
content:"";position:absolute;inset:0;
background:linear-gradient(to top right,transparent calc(50% - .5px),var(--line-strong) 50%,transparent calc(50% + .5px));
opacity:.55;
}
.placeholder-img::after{
background:linear-gradient(to bottom right,transparent calc(50% - .5px),var(--line-strong) 50%,transparent calc(50% + .5px));
}
/* ---------- Projekt-Detail ---------- */
.proj-hero-img{aspect-ratio:16/9;background:var(--surface-2);border-radius:var(--radius);overflow:hidden}
.proj-hero-img img{width:100%;height:100%;object-fit:cover}
.fact-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.fact-list li{
display:flex;justify-content:space-between;gap:16px;
padding:13px 0;border-bottom:1px solid var(--line);font-size:14.5px;
}
.fact-list dt,.fact-list .k{color:var(--ink-soft)}
.fact-list .v{color:var(--ink-strong);font-weight:600;text-align:right}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.gallery a{display:block;aspect-ratio:4/3;border-radius:var(--radius);overflow:hidden;background:var(--surface-2)}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease}
.gallery a:hover img{transform:scale(1.05)}
/* ---------- Team ---------- */
/* Drei statt vier Spalten: bei vier waren die Karten nur halb so breit wie
hoch und wirkten wie Streifen. Bei sechs Personen ergeben sich zwei
volle Reihen. */
.team-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,2.2vw,28px)}
.member{
position:relative;background:var(--surface);border:1px solid var(--line);
border-radius:var(--radius);overflow:hidden;
transition:transform .3s cubic-bezier(.4,0,.2,1),box-shadow .3s ease;
}
.member:hover,.member.an{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.member:hover h3,.member.an h3{color:var(--green-text)}
.member h3{transition:color .3s ease}
/* Querformat 3:2 — so werden die Teamfotos aufgenommen, Person vor dem
Firmenwagen. Das Bild passt damit randlos in den Rahmen und wird gar
nicht beschnitten.
Das Verhaeltnis steht als Variable: aendert sich der Zuschnitt beim
naechsten Shooting, ist es eine einzige Zeile. */
:root{--team-bild:3/2}
.member-img{aspect-ratio:var(--team-bild);background:var(--surface-2);overflow:hidden}
.member-img img{
width:100%;height:100%;object-fit:cover;
/* Faellt doch einmal ein hochkantes Foto an, schneidet cover oben und unten
weg. Der Versatz nach oben haelt dabei den Kopf im Bild. */
object-position:50% 35%;
/* Keine Abdunklung im Ruhezustand: Die Portraits sind bereits fertig
ausgeleuchtet, ein Filter darueber laesst sie nur flau wirken. Der
Hover bleibt an der leichten Vergroesserung und dem Anheben der Karte
erkennbar. */
transition:transform .6s cubic-bezier(.3,0,.2,1);
}
.member:hover .member-img img,
.member.an .member-img img{transform:scale(1.04)}
.member-body{padding:18px 20px 22px}
.member h3{font-size:1.02rem;margin-bottom:3px}
.member .role{font-size:13px;color:var(--green-text);font-weight:600;margin-bottom:12px}
.member .contact{font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;gap:4px}
.member .contact a:hover{color:var(--ink-strong)}
/* ── „Über uns": Text, darunter das Teamfoto ────────────────
Das Bild laeuft ueber die volle Spaltenbreite und behaelt seine eigenen
Proportionen — width/height im ![]()
liefern das Verhaeltnis, ein fester
Zuschnitt wuerde die Aussenstehenden der Gruppe abschneiden. */
.ueber-bild{
margin-top:clamp(34px,4.5vw,60px);
border-radius:var(--radius);overflow:hidden;background:var(--surface-2);
}
.ueber-bild img{display:block;width:100%;height:auto}
/* Ohne hinterlegtes Foto braucht der Platzhalter ein Verhaeltnis. */
.ueber-bild.placeholder-img{aspect-ratio:16/9}
/* ---------- Werte ---------- */
/* Die Trennlinien liegen in den Spaltenabstaenden, nicht an den Kartenraendern.
Vorher hatte jede Karte 38 px Innenabstand: der Text fluchtete dadurch nicht
mit der Ueberschrift und die Spalte war nur 34 Zeichen breit — lesbar sind
45 bis 75. So beginnt der erste Text an der Aussenkante wie ueberall sonst. */
.values{
display:grid;grid-template-columns:repeat(3,1fr);
column-gap:clamp(34px,4.2vw,68px);
}
.value{position:relative}
.value + .value::before{
content:"";position:absolute;
left:calc(clamp(34px,4.2vw,68px) / -2);
top:0;bottom:0;width:1px;background:var(--line);
}
.value .n{display:block;font-size:12px;font-weight:700;color:var(--green-text);margin-bottom:16px}
.value h3{margin-bottom:8px}
.value p{font-size:14.5px;color:var(--ink-soft);margin:0}
/* ---------- Kontakt ---------- */
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,5vw,80px);align-items:start}
.contact-block{margin-bottom:30px}
.contact-block h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:10px}
.contact-block p,.contact-block a{font-size:16px;color:var(--ink-strong);line-height:1.6}
.contact-block a:hover{color:var(--green-text)}
.form{display:grid;gap:16px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-size:13px;font-weight:600;color:var(--ink-strong)}
.field input,.field textarea,.field select{
font-family:inherit;font-size:15px;color:var(--ink-strong);
background:var(--surface);border:1px solid var(--line-strong);border-radius:var(--radius);
padding:13px 15px;transition:border-color .2s ease,box-shadow .2s ease;
}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field textarea:focus,.field select:focus{
outline:none;border-color:var(--green-text);box-shadow:0 0 0 3px rgba(3,133,79,.12);
}
.field .err{font-size:12.5px;color:#c0392b}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.alert{padding:15px 18px;border-radius:var(--radius);font-size:14.5px;line-height:1.55}
.alert-ok{background:var(--green-tint);color:#046b41;border:1px solid #9ae8c6}
.alert-err{background:#fdeceb;color:#a5342a;border:1px solid #f2c1bc}
/* ---------- CTA-Band ---------- */
.cta-band{
background:var(--ink-strong);color:#cdd8d3;
padding-block:clamp(58px,7vw,104px);text-align:center;
}
/* Der erklaerende Absatz ist entfallen; die 16 px des Titels stiessen danach
direkt an den Knopf. Der Abstand steckt jetzt im Titel selbst. */
.cta-band h2{color:#fff;margin-bottom:30px}
/* ---------- Footer ---------- */
/* Kein seitliches Padding: das liefert die .wrap darin. Sonst ist der Fuss
um die doppelte Strecke eingerueckt wie alle anderen Bereiche. */
.site-footer{background:var(--surface);border-top:1px solid var(--line);padding:clamp(40px,5vw,64px) 0 24px}
/* Nur noch zwei Spalten: Marke links, Kontakt rechts. Die Listen
„Navigation" und „Leistungen" sind entfallen — beides steht in der
Kopfzeile, im Fuss war es eine Wiederholung.
Die zweite Spalte ist bewusst „auto" breit, nicht ein Bruchteil: Sonst
bekam der Kontakt eine breitere Spalte, als sein Text fuellt, und endete
frei im Raum. So sitzt er buendig an der rechten Kante — auf einer Linie
mit „Impressum · Datenschutz" in der Zeile darunter. */
.footer-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;
gap:clamp(26px,4vw,56px)}
.site-footer h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);font-weight:600;margin-bottom:11px}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.site-footer li,.site-footer p{font-size:14.5px;color:var(--ink-soft);line-height:1.6}
.site-footer a:hover{color:var(--green-text)}
.footer-bottom{
display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;
margin-top:clamp(28px,3.4vw,44px);padding-top:18px;border-top:1px solid var(--line);
font-size:13px;color:var(--ink-soft);
}
.footer-brand{display:flex;align-items:center;gap:11px;margin-bottom:14px}
/* Mit nur noch zwei Spalten lief der Satz auf ueber 100 Zeichen je Zeile.
Angenehm lesbar sind 45 bis 75. */
.site-footer p{max-width:46ch}
/* ---------- Lightbox ---------- */
.lightbox-link{cursor:zoom-in;display:block}
.lightbox{
position:fixed;inset:0;z-index:200;
display:none;align-items:center;justify-content:center;
background:rgba(6,10,8,.94);
backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
opacity:0;transition:opacity .25s ease;
}
.lightbox.offen{display:flex;opacity:1}
.lb-buehne{
margin:0;max-width:min(94vw,1500px);max-height:88vh;
display:flex;align-items:center;justify-content:center;
}
.lb-img{
max-width:100%;max-height:88vh;width:auto;height:auto;
border-radius:4px;background:transparent;
box-shadow:0 30px 90px rgba(0,0,0,.5);
}
.lb-btn{
position:absolute;z-index:2;
width:46px;height:46px;padding:0;cursor:pointer;
display:grid;place-items:center;
border:1px solid rgba(255,255,255,.2);border-radius:99px;
background:rgba(255,255,255,.08);color:#fff;
transition:background .2s ease,border-color .2s ease,transform .2s ease;
}
.lb-btn:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.42)}
.lb-btn svg{width:20px;height:20px}
.lb-close{top:clamp(16px,3vw,28px);right:clamp(16px,3vw,28px)}
.lb-prev{left:clamp(12px,3vw,28px)}
.lb-next{right:clamp(12px,3vw,28px)}
.lb-prev:hover{transform:translateX(-2px)}
.lb-next:hover{transform:translateX(2px)}
.lightbox.einzeln .lb-prev,.lightbox.einzeln .lb-next{display:none}
.lb-zaehler{
position:absolute;bottom:clamp(16px,3vw,28px);left:50%;transform:translateX(-50%);
color:rgba(255,255,255,.72);font-size:13px;font-variant-numeric:tabular-nums;
}
.lb-zaehler:empty{display:none}
@media (max-width:640px){
.lb-prev{left:10px}
.lb-next{right:10px}
.lb-btn{width:40px;height:40px}
}
/* ---------- Scroll-Reveal ----------
Nur wenn JavaScript läuft, wird überhaupt etwas versteckt. Sonst bliebe
die halbe Seite unsichtbar, falls ein Skript nicht lädt. */
.js .reveal{
opacity:0;transform:translateY(20px);
transition:opacity .7s cubic-bezier(.2,.6,.2,1), transform .7s cubic-bezier(.2,.6,.2,1);
will-change:opacity, transform;
}
.js .reveal.in{opacity:1;transform:none;will-change:auto}
/* ---------- Bilder ----------
width/height stehen im HTML, damit der Platz reserviert ist und beim
Nachladen nichts springt (Layout Shift). */
img{background:var(--surface-2)}
/* Ueberall dort abschalten, wo der Container selbst schon eine Flaeche
mitbringt — sonst zeichnet der Platzhaltergrund ein Rechteck in einen
runden oder farbigen Rahmen. */
.proj-img img,.member-img img,.proj-hero-img img,.gallery img{background:transparent}
/* Abschnitte weit unten erst rendern, wenn sie in die Nähe kommen.
contain-intrinsic-size verhindert dabei einen springenden Scrollbalken. */
/* Abschnitte weit unten erst auslegen, wenn sie in die Naehe kommen.
Nicht auf Abschnitten verwenden, die ein Sprungziel sind — der Browser
ueberspringt sie sonst und der Sprung landet ins Leere. */
.section--defer{content-visibility:auto;contain-intrinsic-size:auto 900px}
/* Sicherheitsnetz: ein Abschnitt mit Sprungmarke wird nie uebersprungen. */
.section--defer:target,
#werte,#team{content-visibility:visible}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
.js .reveal{opacity:1;transform:none;transition:none}
.btn:hover::before{animation:none}
.strom .kabel{transition:none}
a.svc:hover .svc-ico,.svc.an .svc-ico{animation:none}
*{animation-duration:.01ms !important;transition-duration:.01ms !important}
}
/* ---------- Responsive ---------- */
@media (max-width:1040px){
.nav{display:none}
.burger{display:flex}
.header-cta{margin-left:auto}
.svc-grid,.proj-grid{grid-template-columns:repeat(2,1fr)}
/* Die drei Werte gehen direkt auf eine Spalte: bei zweien bliebe der dritte
als Einzelgaenger in der zweiten Zeile stehen. Die Trennlinie kippt dabei
von senkrecht auf waagrecht. */
.values{grid-template-columns:1fr;row-gap:clamp(26px,3.4vw,38px)}
.value + .value::before{
left:0;right:0;width:auto;height:1px;
top:calc(clamp(26px,3.4vw,38px) / -2);bottom:auto;
}
.team-grid{grid-template-columns:repeat(2,1fr)}
.contact-grid,.split,.grid-2{grid-template-columns:1fr}
.stats{grid-template-columns:1fr 1fr}
}
@media (max-width:1040px){
/* Auf schmalen Schirmen stehen die beiden Karten untereinander:
zuerst die dunkle Textkarte, darunter das Bild im 4:3-Format. */
.home-hero{padding-bottom:clamp(22px,4vw,40px);justify-content:flex-start}
.home-hero.has-media .hero-grid{grid-template-columns:1fr}
.hero-karte{padding:clamp(26px,5vw,40px) clamp(22px,4.5vw,34px)}
.hero-karte h1{font-size:clamp(30px,7.4vw,42px)}
.hero-karte .lede{max-width:none}
/* Die Pille umschliesst ihren Inhalt, statt sich ueber die Karte zu spannen:
sonst stuende der Punkt weit links und der Text mittig fuer sich. */
.hero-pill{align-self:flex-start;letter-spacing:.09em}
/* Beide Knoepfe auf eine Zeile. Nebeneinander braeuchten sie mehr Platz als
da ist — darum teilen sie sich die Breite zu gleichen Teilen. */
/* Nur im Hero teilen sich die beiden Knoepfe eine Zeile zu gleichen Teilen.
Im CTA-Band duerfen sie wie bisher umbrechen. */
.hero-karte .cta-row{flex-wrap:nowrap;gap:10px}
.hero-karte .cta-row .btn{flex:1 1 0;min-width:0;padding-inline:14px}
.btn-hell{border:1px solid rgba(255,255,255,.16)}
/* Kurzform „Referenzen →" statt „Referenzen ansehen": der Pfeil sagt
dasselbe und die beiden Knoepfe stehen nicht mehr so gedraengt.
Der Zusatz liegt innerhalb der Beschriftung, nicht daneben — sonst waere
er ein eigenes Flex-Element und bekaeme den Knopfabstand davorgesetzt. */
.nur-breit{display:none}
/* align-self:start ist hier wesentlich, nicht Kosmetik: als Rasterelement
wuerde die Bildkarte sonst gestreckt, und eine gestreckte Hoehe schlaegt
aspect-ratio. Weil alle Bilder position:absolute sind, ist die Zeile
inhaltlich null hoch — auf iOS blieb die Karte dadurch unsichtbar,
waehrend Chromium aspect-ratio den Vorzug gab.
Die Untergrenze ist die zweite Absicherung, falls aspect-ratio gar nicht
greift; bei 4:3 bindet sie erst unterhalb von 293 px Fensterbreite. */
.hero-media{
align-self:start;
height:auto;aspect-ratio:4/3;min-height:220px;
}
/* Die Kapsel spannt sich ueber die Bildbreite, mit gleichem Abstand zu allen
Kanten. Der Inhalt sitzt darin mittig. */
.hero-cap{
left:14px;right:14px;bottom:14px;translate:none;max-width:none;
justify-content:center;padding:9px 16px;gap:9px;
}
.hero-cap b{font-size:13px}
.hero-cap em{font-size:12.5px}
/* Die Punkte sitzen oben rechts im Bild — unten stiessen sie mit der
Infokarte zusammen. */
.hero-dots{left:auto;right:14px;top:14px;bottom:auto}
}
@media (max-width:700px){
/* Der Fuss wuchs auf dem Handy auf drei Viertel der Bildschirmhoehe an */
.site-footer{padding-top:34px}
.footer-grid{grid-template-columns:1fr;gap:26px}
.footer-bottom{margin-top:24px;padding-top:15px}
.site-footer li,.site-footer p{font-size:14px}
.stats{grid-template-columns:1fr 1fr}
.svc-grid,.proj-grid,.team-grid,.gallery{grid-template-columns:1fr}
.form .row{grid-template-columns:1fr}
.header-cta .btn{display:none}
/* Teamkarten stehen auf schmalen Schirmen untereinander — eine pro Zeile,
Bild oben, Angaben darunter. Die eine Spalte kommt aus der Sammelzeile
weiter oben.
Ueber die volle Breite waere 3:4 zu hoch: das Bild fuellte fast den
ganzen Schirm. Quadratisch bleibt die Karte handlich, und Portraits
vertragen den Zuschnitt besser als ein Querformat. */
}
/* ── Karte auf der Kontaktseite ─────────────────────────────
Rahmen im gleichen Stil wie die Bildkarte im Hero. Das Seitenverhaeltnis
haelt den Platz frei, bevor der Rahmen geladen ist — sonst springt das
Layout beim Nachladen. */
.karte-rahmen{
position:relative;aspect-ratio:16/7;
border-radius:6px;overflow:hidden;
background:var(--surface-2);box-shadow:var(--shadow-lg);
}
.karte-rahmen iframe{
position:absolute;inset:0;width:100%;height:100%;border:0;
/* Die OSM-Kacheln sind kraeftiger als die Seite. Leicht gedaempft fuegen
sie sich ein, beim Hovern zeigen sie sich in voller Farbe. */
filter:saturate(.82) contrast(.96);transition:filter .3s ease;
}
.karte-rahmen:hover iframe{filter:none}
.karte-fuss{
display:flex;align-items:center;justify-content:space-between;
gap:clamp(16px,3vw,32px);flex-wrap:wrap;margin-top:18px;
}
.karte-fuss p{margin:0;color:var(--ink-soft);font-size:15px}
@media (max-width:700px){
.karte-rahmen{aspect-ratio:4/3}
.karte-fuss{flex-direction:column;align-items:flex-start;gap:14px}
}
/* ── Filter auf der Referenzseite ───────────────────────────
Schaltflaechen statt Auswahlfeld: auf dem Handy laesst sich das antippen,
ohne ein Menue zu oeffnen, und man sieht alle Leistungen auf einen Blick. */
.filter{
display:flex;flex-wrap:wrap;gap:8px;
margin-bottom:clamp(24px,3.5vw,36px);
}
/* Gleiche Form wie die Sprungmarken auf der Leistungsseite. Anders als dort
braucht der Filter einen sichtbaren Ein-Zustand — der bleibt gruen. */
.filter-knopf{
/* inherit, nicht 1.5: der Knopf muss dieselbe Zeilenhoehe bekommen wie die
Sprungmarken-Links, sonst ist die Pille zwei Pixel flacher. */
font-family:inherit;font-size:13.5px;line-height:inherit;
padding:7px 14px;border-radius:99px;cursor:pointer;
color:var(--ink-soft);background:var(--bg);
border:1px solid var(--line);
transition:color .2s ease, border-color .2s ease, background .2s ease;
}
.filter-knopf:hover{color:var(--green-text);border-color:var(--green-text);background:var(--green-tint)}
.filter-knopf.an{
color:#04150d;border-color:transparent;
background:var(--green-verlauf);
}
.filter-knopf:focus-visible{outline:2px solid var(--green-text);outline-offset:2px}
/* hidden allein reicht nicht: .proj ist im Raster ein Block. */
.proj[hidden]{display:none}
.filter-leer{color:var(--ink-soft);font-size:15px;margin:0}
@media (max-width:700px){
/* Eine Zeile zum Wischen statt eines Blocks, der die Projekte wegdrueckt. */
.filter{
flex-wrap:nowrap;overflow-x:auto;
margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad);
scrollbar-width:none;
}
.filter::-webkit-scrollbar{display:none}
.filter-knopf{flex:none}
}
@media (max-width:700px){
/* Alles auf eine Zeile. Mit ausgeschriebenen Kantonen ginge das nicht —
der Satz braucht mehr Breite, als die Karte innen hergibt. */
.hero-pill{padding-inline:12px 14px;letter-spacing:.07em;font-size:10px}
.orte-lang{display:none}
.orte-kurz{display:inline}
.pill-text{white-space:nowrap}
}
/* ── Untermenü in der Navigation ────────────────────────────
„Über uns" bleibt ein gewoehnlicher Link auf die Seite; das Untermenue
fuehrt zu ihren Abschnitten. Es oeffnet bei Ueberfahren und ebenso bei
Tastaturfokus — ohne :focus-within waere es per Tastatur unerreichbar. */
.nav-gruppe{position:relative;display:inline-flex;align-items:center}
.nav-unter{
display:none;
position:absolute;top:calc(100% + 6px);left:50%;
z-index:60;min-width:216px;margin:0;padding:8px;
list-style:none;
background:var(--surface);
border:1px solid var(--line);
border-radius:14px;
box-shadow:0 1px 2px rgba(14,19,17,.06), 0 12px 32px rgba(14,19,17,.13);
/* translate haelt die waagrechte Zentrierung, transform bleibt fuer die
Bewegung beim Auftauchen frei. */
translate:-50% 0;
opacity:0;transform:translateY(-8px) scale(.97);
/* display gehoert in die Liste: mit allow-discrete schaltet es erst am Ende
der Ausblendung um, sonst waere das Menue sofort weg und es gaebe nichts
zu ueberblenden. */
transition:opacity .19s ease, transform .19s cubic-bezier(.2,.8,.3,1),
display .19s allow-discrete;
}
.nav-gruppe:hover .nav-unter,
.nav-gruppe:focus-within .nav-unter{
display:block;
opacity:1;transform:translateY(0) scale(1);
}
/* Ohne @starting-style gaebe es keinen Ausgangswert, von dem aus das frisch
eingeblendete Menue ueberblenden koennte — es erschiene hart.
Browser ohne Unterstuetzung zeigen es schlicht sofort an. */
@starting-style{
.nav-gruppe:hover .nav-unter,
.nav-gruppe:focus-within .nav-unter{opacity:0;transform:translateY(-8px) scale(.97)}
}
/* Ohne diese Bruecke reisst der Mauskontakt im Spalt zwischen Eintrag und
Menue ab und es klappt beim Hinuntergehen wieder zu. */
/* Ohne diese Bruecke reisst der Mauskontakt im Spalt zwischen Eintrag und
Menue ab und es klappt beim Hinuntergehen wieder zu. */
.nav-unter::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-unter a{
display:block;padding:10px 13px;border-radius:9px;
font-size:14.5px;color:var(--ink);text-decoration:none;white-space:nowrap;
transition:background .16s ease, color .16s ease;
}
.nav-unter a:hover,.nav-unter a:focus-visible{background:var(--green-tint);color:var(--green-text)}
/* Auf dem Handy stehen die Unterpunkte eingerueckt unter dem Elterneintrag */
.mobile-nav-unter{
padding-left:18px !important;
font-size:.92em;opacity:.78;
border-left:2px solid var(--line);
}
/* Die Sprungziele duerfen nicht unter der klebenden Kopfzeile landen */
#werte,#team{scroll-margin-top:calc(var(--header-h) + 20px)}