/* Baukasten-Gestaltung für Kundenwebseiten. ANPASSEN: (1) die Farben unter :root, (2) die Schriftnamen und die Pfade in den @font-face-Zeilen, (3) überall elektromustermann durch den Ordnernamen der Seite ersetzen (derselbe Name wie BASIS in baue-seiten.py). Der Scroll-Fix darunter ist Pflicht und wird nicht angefasst. */ /* Scroll-Fix (Pflicht, iPhone) */ html,body{height:auto !important;min-height:100%;overflow-y:auto !important; overscroll-behavior-y:auto;-webkit-overflow-scrolling:touch;touch-action:pan-y pinch-zoom} @font-face{font-family:"Open Sans";src:url("/referenzen/elektro/schriften/OpenSans-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("/referenzen/elektro/schriften/OpenSans-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} /* Farbwelt Elektro Mustermann: Dunkelblau als Grundton, Gelb als Signalfarbe. Beide Werte stammen aus der bisherigen Webseite des Betriebs. Regel dabei: Gelb steht immer auf Dunkelblau (voller Kontrast), auf weissem Grund uebernimmt Dunkelblau die Rolle der Signalfarbe. KEIN SCHWARZ (Torben, 04.09.2026). Schwarz gehoert nicht zu den Farben des Kunden. Es gibt deshalb weder schwarze Flaechen noch Verlaeufe, die ins Schwarze laufen, noch schwarze Schatten. Wo frueher eine fast schwarze Flaeche stand, steht jetzt entweder das Gelb des Betriebs (--signal), eine warme helle Toenung davon (--signal-blass) oder das Dunkelblau (--akzent). Schatten werden mit dem Dunkelblau eingefaerbt, nie mit rgba(0,0,0,...). */ :root{ --tinte:#13202a; --akzent:#1c3547; /* Dunkelblau, Hauptfarbe */ --akzent-dunkel:#16293a; /* dunkleres Blau, nur Schrift auf Gelb und Fusszeile */ --akzent-blass:#eef2f6; /* sehr helle Toenung, fuer Flaechen */ --akzent-hell:#c9d6e2; /* helle Toenung, fuer Text auf dunkler Flaeche */ --signal:#fdb62c; /* Gelb */ --signal-dunkel:#e6ad29; --signal-blass:#fff7e6; --papier:#ffffff; --grau:#f4f6f8; --wasser:#3f7fa6; /* Rhein auf der Gebietskarte */ --linie:#dde3e9; --nebentext:#4f5f6c; } *{box-sizing:border-box;margin:0;padding:0} body{font-family:"Open Sans",-apple-system,"Helvetica Neue",Arial,sans-serif; color:var(--tinte);background:var(--papier);line-height:1.65;font-size:17px} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{font-weight:700;line-height:1.2} h1{font-size:clamp(30px,4.6vw,46px);margin-bottom:18px} h2{font-size:clamp(24px,3.2vw,32px);margin-bottom:14px} h3{font-size:19px} p{margin-bottom:14px;color:var(--tinte)} .innen{max-width:1120px;margin:0 auto;padding:0 20px} .schmal{max-width:780px} .mittig{text-align:center} .breit-text{max-width:760px;color:var(--nebentext)} .mittig.breit-text,p.mittig{margin-left:auto;margin-right:auto} .abschnitt{padding:72px 0} .abschnitt-grau{background:var(--grau)} /* Warme Flaeche im Gelb des Betriebs. Sie hat die frueheren fast schwarzen Abschnitte ersetzt und sorgt fuer den Wechsel im Seitenrhythmus, ohne dass die Seite dunkel wird. */ .abschnitt-warm{background:var(--signal-blass)} /* Kraeftige dunkelblaue Flaeche (Fusszeile und Schlussaufruf). Sie wird oben mit einer gelben Kante abgesetzt, statt weich ins Dunkle zu verlaufen. */ .abschnitt-akzent{background:var(--akzent);color:#fff;border-top:5px solid var(--signal)} .abschnitt-akzent h2,.abschnitt-akzent p{color:#fff} .abschnitt-akzent .breit-text{color:var(--akzent-hell);margin-left:auto;margin-right:auto} .seitenkopf{padding-bottom:40px} .ico{flex:none} .ico-akzent{color:var(--akzent)} /* Kopfzeile: dunkelblau wie beim Betrieb ueblich, denn das Original-Logo (weisse Schrift, gelbes Maennchen) ist fuer dunklen Grund gezeichnet. */ .kopfzeile{position:sticky;top:0;background:rgba(28,53,71,.97);backdrop-filter:blur(6px); border-bottom:1px solid rgba(255,255,255,.10);z-index:50;color:#fff} .kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:82px} .marke{display:flex;align-items:center} .marke img{width:160px;height:auto} .hauptmenue{display:flex;align-items:center;gap:26px;font-weight:700;font-size:16px} .hauptmenue a{text-decoration:none;color:#fff} .hauptmenue a:not(.knopf):hover{color:var(--signal);text-decoration:underline;text-underline-offset:5px} .burger{display:none;background:none;border:0;cursor:pointer;padding:10px} .burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0} /* Leistungen-Untermenue in der Kopfzeile (Torben, 04.09.2026). Von einer Leistungsseite kommt man sonst nur ueber die Uebersicht zur naechsten Leistung. Das Untermenue haengt buendig unter der Kopfzeile, deshalb wird der Menuepunkt auf die volle Hoehe der Kopfzeile gezogen (align-self:stretch). Ohne das entstuende zwischen Menuepunkt und Untermenue eine Luecke, in der das Zeigen abreisst und die Liste wieder zuklappt. Farben: nur Dunkelblau und Gelb, kein Schwarz. */ .hauptmenue{align-self:stretch} .menue-punkt{position:relative;align-self:stretch;display:flex;align-items:center;gap:4px} .unter-schalter{display:flex;align-items:center;background:none;border:0;padding:4px; color:#fff;cursor:pointer;border-radius:6px} .unter-schalter svg{transition:transform .18s} .unter-schalter:hover{color:var(--signal)} .unter-schalter:focus-visible{outline:2px solid var(--signal);outline-offset:2px} .menue-punkt:hover .unter-schalter svg, .menue-punkt:focus-within .unter-schalter svg, .menue-punkt.offen .unter-schalter svg{transform:rotate(180deg)} .untermenue{display:none;position:absolute;top:100%;left:-16px;z-index:60; grid-template-columns:1fr 1fr;gap:2px;padding:12px; background:var(--akzent);border:1px solid rgba(255,255,255,.14); border-top:4px solid var(--signal);border-radius:0 0 12px 12px; box-shadow:0 20px 44px rgba(28,53,71,.34)} .menue-punkt:hover .untermenue, .menue-punkt:focus-within .untermenue, .menue-punkt.offen .untermenue{display:grid} .untermenue a{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px; font-size:15px;font-weight:600;color:#fff;white-space:nowrap} .untermenue a .ico{color:var(--signal)} .hauptmenue .untermenue a:hover,.hauptmenue .untermenue a:focus-visible{ background:rgba(253,182,44,.16);color:var(--signal);text-decoration:none} .untermenue .unter-alle{color:var(--signal)} /* Knöpfe: der Hauptknopf traegt das Gelb des Betriebs, mit dunkler Schrift (voller Kontrast). Umriss-Knoepfe bleiben ruhig. */ .knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--signal);color:var(--akzent-dunkel);text-decoration:none;font-weight:700;font-size:16px; padding:13px 24px;border-radius:8px;border:2px solid var(--signal);cursor:pointer; transition:background .15s,border-color .15s,opacity .15s} .knopf:hover{background:var(--signal-dunkel);border-color:var(--signal-dunkel);color:var(--akzent-dunkel)} .knopf-klein{padding:9px 16px;font-size:15px;border-radius:7px} .knopf-umriss{background:transparent;color:var(--tinte);border-color:var(--tinte)} .knopf-umriss:hover{background:var(--tinte);border-color:var(--tinte);color:#fff} .knopf-weiss{background:var(--signal);color:var(--akzent-dunkel);border-color:var(--signal)} .knopf-weiss:hover{background:var(--signal-dunkel);border-color:var(--signal-dunkel);color:var(--akzent-dunkel)} .knopf-umriss-weiss{background:transparent;color:#fff;border-color:#fff} .knopf-umriss-weiss:hover{background:#fff;color:var(--tinte);border-color:#fff} .knopfreihe{display:flex;gap:14px;flex-wrap:wrap;margin-top:22px} .abschnitt-warm .knopfreihe,.abschnitt-akzent .knopfreihe{justify-content:center} /* Held (Startseite) */ .held{padding:64px 0} /* Die Zeichnung im Seitenkopf braucht Breite, damit man die Anlagen im Haus erkennt. Deshalb bekommt die Bildspalte etwas mehr Platz als die Textspalte (04.09.2026). */ .held-raster{display:grid;grid-template-columns:1fr 1.14fr;gap:48px;align-items:stretch} .held-text{display:flex;flex-direction:column;justify-content:center} .vorzeile{display:flex;align-items:center;gap:10px;font-weight:700;font-size:13px; letter-spacing:.07em;text-transform:uppercase;color:var(--akzent);margin-bottom:14px} .vorzeile::before{content:"";flex:none;width:26px;height:3px;border-radius:2px; background:var(--signal)} .held-bildrahmen{border-radius:14px;overflow:hidden;min-height:340px} .held-bildrahmen img,.held-bildrahmen video{width:100%;height:100%;object-fit:cover} /* Erreichbarkeits-Band (Telefon, SMS, WhatsApp wie auf der Anzeige). Es traegt das Gelb des Betriebs mit dunkelblauer Schrift. Davor und danach laeuft ein weicher Verlauf aus dem Weiss ins Gelb. */ .band{background:var(--signal);color:var(--akzent-dunkel);padding:18px 0} .band-innen{display:flex;align-items:center;justify-content:center;gap:14px 34px;flex-wrap:wrap; font-weight:700;font-size:16px;text-align:center} .band a{display:inline-flex;align-items:center;gap:10px;color:var(--akzent-dunkel);text-decoration:none} .band a:hover{text-decoration:underline;text-underline-offset:4px} .band .ico{color:var(--akzent)} /* Stärken-Karten */ .staerken{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch} .staerken-drei{grid-template-columns:repeat(3,1fr)} .staerke{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px; display:flex;flex-direction:column} .karte-kopf{display:flex;align-items:center;gap:14px;min-height:56px;margin-bottom:8px} /* Feste Höhe für die Überschrift: sonst sitzt eine zweizeilige Überschrift in der Nachbarkarte 11 Pixel höher als eine einzeilige (Torbens Regel "gleichartige Elemente auf einer Ebene"). Der Asymmetrie-Wächter meldet das sonst als E:Ueberschrift. */ .karte-kopf h3{margin:0;min-height:46px;display:flex;align-items:center} .karte-kopf .ico{color:var(--akzent)} .staerke p{margin:0;color:var(--nebentext);font-size:15.5px} /* Leistungs-Kacheln: feste Breite, zentriert (nie 2+1-Loch) */ .kachelreihe{display:flex;flex-wrap:wrap;gap:20px;justify-content:center;margin-top:34px} .kachel{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:26px; width:340px;display:flex;flex-direction:column;text-decoration:none; transition:transform .15s,box-shadow .15s,border-color .15s} .kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(28,53,71,.16);border-color:var(--signal)} .kachel p{color:var(--nebentext);font-size:15.5px;margin-bottom:16px} .weiter{font-weight:700;font-size:15px;margin-top:auto;color:var(--akzent)} /* Bild oben in der Kachel, bündig bis an den Rand; zoomt sanft beim Überfahren */ .kachel-bildrahmen{display:block;margin:-26px -26px 18px;border-radius:11px 11px 0 0; overflow:hidden;aspect-ratio:16/9} .kachel-bildrahmen img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease} .kachel:hover .kachel-bildrahmen img{transform:scale(1.06)} /* Schritte */ .schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:34px;align-items:stretch} .schritt{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px; display:flex;flex-direction:column} /* Zahl und Überschrift stehen in EINER Zeile (Icon links, Titel rechts), nie untereinander. Die feste Kopfhöhe hält die Texte auf einer Ebene. */ .schritt-zahl{display:flex;align-items:center;justify-content:center;width:44px;height:44px; border-radius:50%;background:var(--signal);color:var(--akzent-dunkel);font-weight:700;font-size:19px;flex:none} .schritt h3{margin:0} .schritt p{margin:0;color:var(--nebentext);font-size:15.5px} /* ---- Stromkreis durch die Kacheln --------------------------------------- Torbens Wunsch (04.09.2026): Der Ablauf "Vom Erstgespräch bis zur Umsetzung" darf nicht still dastehen. Bei MB Haustechnik läuft dafür ein Rahmen um die Kästchen, bei einem Elektrobetrieb ist es ein Stromkreis. So ist er gebaut: - Eine feine Leiterbahn läuft waagerecht durch alle vier Kacheln, genau in der Lücke zwischen Überschrift und Text. Am rechten Rand geht sie nach unten, unten wieder zurück und links hinauf. Der Kreis ist geschlossen. - Jede Ziffer hängt mit einem kurzen Bein an der Leiterbahn, wie ein Bauteil auf einer Platine. - Darauf wandert eine Kette von Lichtpunkten immer im Kreis: der Strom fließt. Jedes Teilstück verschiebt sein Muster um genau eine Musterlänge je Takt, deshalb ist die Geschwindigkeit überall gleich, egal wie lang das Teilstück ist. - Beim Sichtbarwerden leuchten die Ziffern der Reihe nach auf (1 bis 4), damit man die Reihenfolge des Ablaufs sieht. Alles ist gerechnet, es wird keine Bilddatei geladen. Der Strom fließt nur, solange der Abschnitt zu sehen ist (Klasse "laeuft", gesetzt vom Skript im Seitenfuß), und steht still bei "Bewegung reduzieren". Stolperstein: Die durchgehende Leiterbahn liegt ÜBER den Kacheln und sitzt auf einer festen Höhe (--leiter-y). Das geht nur, solange alle vier Kopfzeilen gleich hoch sind. Sobald die Kacheln umbrechen (unter 1101 Pixel), wird sie deshalb ausgeblendet; dann trägt jede Kachel ihr eigenes Stück Leiterbahn, das an ihrer eigenen Kopfzeile hängt. */ .stromkreis{ position:relative; --leiter-y:85px; /* Höhe der Leiterbahn ab Kachel-Oberkante: 1 Rahmen + 24 Innenabstand + 56 Kopfzeile + 4 */ --leiter-dicke:2px; --leiter-ruhe:rgba(28,53,71,.20); /* ruhende Bahn, Dunkelblau, kein Schwarz */ --leiter-rand:22px; /* Abstand des Rücklaufs zum Kachelraster */ --strom-laenge:76px; /* Abstand von Lichtpunkt zu Lichtpunkt */ --strom-takt:.85s; /* Zeit für genau diese Strecke */ --strom-quer:linear-gradient(90deg, rgba(253,182,44,0) 0 48%, rgba(253,182,44,.80) 66%, #fff8e4 78%, rgba(253,182,44,.80) 90%, rgba(253,182,44,0) 100%); --strom-hoch:linear-gradient(180deg, rgba(253,182,44,0) 0 48%, rgba(253,182,44,.80) 66%, #fff8e4 78%, rgba(253,182,44,.80) 90%, rgba(253,182,44,0) 100%); } .stromkreis .karte-kopf{position:relative} .stromkreis .schritt-zahl{position:relative} /* Bein von der Ziffer hinunter zur Leiterbahn */ .leiter-bein{position:absolute;left:21px;top:calc(50% + 22px);bottom:-4px; width:var(--leiter-dicke);background:var(--leiter-ruhe);pointer-events:none} /* Leiterbahn in der einzelnen Kachel (nur unterhalb von 1101 Pixel sichtbar) */ .leitung{position:absolute;left:-25px;right:-25px;top:calc(100% + 4px); height:var(--leiter-dicke);background:var(--leiter-ruhe);pointer-events:none} /* Der geschlossene Kreis um das ganze Raster (ab 1101 Pixel) */ .kreis{display:none} .rl{position:absolute;background:var(--leiter-ruhe)} /* Die wandernden Lichtpunkte liegen als eigene Schicht auf der Bahn, damit nur sie leuchten und nicht die ruhende Bahn. */ /* Die Lichtpunkte sind einen Hauch dicker als die Bahn und leuchten nach aussen, damit sie auf weissem Grund gut zu sehen sind. */ .leitung::after,.rl::after{content:"";position:absolute;opacity:0;border-radius:2px; filter:drop-shadow(0 0 4px rgba(253,182,44,.90)) drop-shadow(0 0 10px rgba(253,182,44,.45))} .leitung::after,.rl-oben::after,.rl-unten::after{inset:-1px 0} .rl-rechts::after,.rl-links::after{inset:0 -1px} .leitung::after,.rl-oben::after,.rl-unten::after{ background-image:var(--strom-quer);background-size:var(--strom-laenge) 100%} .rl-rechts::after,.rl-links::after{ background-image:var(--strom-hoch);background-size:100% var(--strom-laenge)} /* Die Musterlänge in den Bildfolgen unten muss zu --strom-laenge passen. */ @keyframes strom-rechts{to{background-position:76px 0}} @keyframes strom-links{to{background-position:-76px 0}} @keyframes strom-runter{to{background-position:0 76px}} @keyframes strom-hoch{to{background-position:0 -76px}} @keyframes unter-strom{ 0%{box-shadow:0 0 0 0 rgba(253,182,44,0)} 30%{box-shadow:0 0 0 8px rgba(253,182,44,.30),0 0 22px 6px rgba(253,182,44,.60)} 100%{box-shadow:0 0 0 0 rgba(253,182,44,0)} } @media (prefers-reduced-motion:no-preference){ .stromkreis.laeuft .leitung::after,.stromkreis.laeuft .rl::after{opacity:1} .stromkreis.laeuft .leitung::after, .stromkreis.laeuft .rl-oben::after{animation:strom-rechts var(--strom-takt) linear infinite} .stromkreis.laeuft .rl-rechts::after{animation:strom-runter var(--strom-takt) linear infinite} .stromkreis.laeuft .rl-unten::after{animation:strom-links var(--strom-takt) linear infinite} .stromkreis.laeuft .rl-links::after{animation:strom-hoch var(--strom-takt) linear infinite} /* Die Ziffern gehen der Reihe nach unter Strom */ .stromkreis.laeuft .schritt-zahl{animation:unter-strom 1.2s ease-out; animation-delay:calc(var(--nr) * .5s + .3s)} } /* Zwei Spalten: die beiden Kacheln einer Reihe werden verbunden */ @media (min-width:561px) and (max-width:1100px){ .stromkreis .schritt:nth-child(odd) .leitung{right:-45px} } /* Volle Breite: die Bahn läuft durch alle vier Kacheln und schließt sich */ @media (min-width:1101px){ .leitung{display:none} .kreis{display:block;position:absolute;left:calc(var(--leiter-rand) * -1); right:calc(var(--leiter-rand) * -1);top:var(--leiter-y); bottom:calc(var(--leiter-rand) * -1);z-index:2;pointer-events:none} .rl-oben{left:0;right:0;top:0;height:var(--leiter-dicke)} .rl-unten{left:0;right:0;bottom:0;height:var(--leiter-dicke)} .rl-rechts{right:0;top:0;bottom:0;width:var(--leiter-dicke)} .rl-links{left:0;top:0;bottom:0;width:var(--leiter-dicke)} /* Lötaugen an den beiden unteren Ecken, wie auf einer Platine */ .kreis::before,.kreis::after{content:"";position:absolute;bottom:-3px; width:8px;height:8px;border-radius:50%;background:var(--leiter-ruhe)} .kreis::before{left:-3px} .kreis::after{right:-3px} } /* Vorher/Nachher-Schieberegler: das obere (Vorher-)Bild wird über eine CSS-Variable beschnitten, der unsichtbare Schieber darüber steuert sie. touch-action:pan-y lässt die Seite auf dem Handy weiter senkrecht rollen. */ .vergleich{position:relative;max-width:920px;margin:34px auto 0;border-radius:14px; overflow:hidden;aspect-ratio:16/9;box-shadow:0 18px 44px rgba(28,53,71,.24)} .vergleich img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vergleich-vorher{-webkit-clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0); clip-path:inset(0 calc(100% - var(--pos,50%)) 0 0)} .vergleich-griff{position:absolute;top:0;bottom:0;left:var(--pos,50%);width:3px; margin-left:-1.5px;background:#fff;pointer-events:none;box-shadow:0 0 10px rgba(28,53,71,.45)} .vergleich-knauf{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:46px;height:46px;border-radius:50%;background:#fff;color:var(--akzent); display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700; box-shadow:0 2px 10px rgba(28,53,71,.32)} .vergleich-schild{position:absolute;bottom:14px;background:rgba(28,53,71,.80);color:#fff; font-weight:700;font-size:14px;padding:5px 12px;border-radius:999px;pointer-events:none} .vergleich-schild-links{left:14px} .vergleich-schild-rechts{right:14px} .vergleich input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0; cursor:ew-resize;-webkit-appearance:none;appearance:none;background:none;touch-action:pan-y} .vergleich input::-webkit-slider-thumb{-webkit-appearance:none;width:46px;height:46px} .vergleich:has(input:focus-visible){outline:3px solid #fff;outline-offset:3px} /* Zweispalter: beide Kästen gleich hoch */ .zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch} .zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column;justify-content:center;align-items:flex-start} .zweispalter .knopf{margin-top:8px} .bildrahmen{border-radius:14px;overflow:hidden;min-height:300px} .bildrahmen img,.bildrahmen video{width:100%;height:100%;object-fit:cover} /* Wiederholen-Knopf: erscheint auf Verwandlungs-Filmen, wenn sie zu Ende sind */ .bildrahmen,.held-bildrahmen{position:relative} .film-neustart{position:absolute;right:14px;bottom:14px;width:46px;height:46px; border-radius:50%;border:0;background:rgba(28,53,71,.80);color:#fff;display:none; align-items:center;justify-content:center;cursor:pointer;transition:background .15s} .film-neustart:hover{background:var(--akzent)} .film-neustart.da{display:flex} .bild-breit{min-height:0} .bild-breit img,.bild-breit video{aspect-ratio:16/7;object-fit:cover} /* Gruppenfoto: 16:10 statt 16:7, sonst fallen oben Köpfe und unten Schuhe weg. Bewusst auch auf dem Handy nicht enger beschnitten, es soll niemand fehlen. */ .bild-gruppe{min-height:0} .bild-gruppe img{aspect-ratio:16/10;object-fit:cover} /* Leistungsseite */ .brotkrumen{font-size:14px;color:var(--nebentext);margin-bottom:16px} .brotkrumen a{color:var(--nebentext)} /* Seitenkopf der Leistungsseiten: links der Text, rechts die Animation. Beide Spalten enden oben und unten auf derselben Linie. */ .kopf-zweispalter{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:stretch} .kopf-zweispalter>div:not(.bildrahmen){display:flex;flex-direction:column; justify-content:center;align-items:flex-start} .kopf-zweispalter .bildrahmen{min-height:340px} .kopf-zweispalter h1{margin-bottom:14px} .kopf-zweispalter .breit-text{max-width:none} .kopf-zweispalter .knopfreihe{margin-top:6px} .zweispalter-breit{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:stretch} .hakenliste{list-style:none;margin-top:10px} .hakenliste li{display:flex;align-items:flex-start;gap:12px;padding:10px 0; border-bottom:1px solid var(--linie);font-size:16.5px} .hakenliste li:last-child{border-bottom:0} .hakenliste .ico{margin-top:4px;color:var(--akzent)} .infokasten{background:var(--akzent-blass);border:1px solid #d6e0ea;border-radius:12px;padding:28px; display:flex;flex-direction:column;gap:12px;justify-content:center} .infokasten p{color:var(--nebentext);font-size:15.5px;margin:0 0 4px} .infokasten .knopf{width:100%} /* Fragen */ .frage{background:#fff;border:1px solid var(--linie);border-radius:10px;padding:0;margin-top:14px} .frage summary{cursor:pointer;font-weight:700;padding:18px 22px;list-style:none;position:relative;padding-right:46px} .frage summary::-webkit-details-marker{display:none} .frage summary:hover{color:var(--akzent)} .frage summary::after{content:"+";position:absolute;right:22px;top:50%;transform:translateY(-50%); font-size:22px;font-weight:400;color:var(--akzent)} .frage[open] summary::after{content:"–"} .frage p{padding:0 22px 18px;color:var(--nebentext);margin:0} /* Kontakt */ .kontakt-karten{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:stretch} .kontakt-karten .kachel{width:auto} .formular-raster{display:grid;grid-template-columns:1fr 1.6fr;gap:32px;align-items:stretch} .formular-bildrahmen{border-radius:12px;overflow:hidden} .formular-bildrahmen img{width:100%;height:100%;object-fit:cover} .formular-kasten{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:32px} form label{display:block;font-weight:700;font-size:15px;margin-bottom:16px} form input,form select,form textarea{display:block;width:100%;margin-top:6px;padding:12px 14px; border:1px solid #c3ccd4;border-radius:8px;font:inherit;font-weight:400;background:#fff;color:var(--tinte)} form input:focus,form select:focus,form textarea:focus{outline:2px solid var(--akzent);outline-offset:1px} form .knopf{width:100%} .formular-hinweis{font-size:13.5px;color:var(--nebentext);margin:10px 0 0} /* Zeichenband: die fünf Sinnbilder wie auf der Werbeanzeige des Kunden. Warmer heller Grund aus der Firmenfarbe, die Zeichen in Dunkelblau. */ .zeichenband{background:var(--signal-blass);padding:38px 0} .zeichen-reihe{display:flex;justify-content:center;align-items:center;gap:16px;flex-wrap:wrap} .zeichen{display:flex;align-items:center;justify-content:center;width:66px;height:66px; border:2px solid var(--signal-dunkel);border-radius:5px;color:var(--akzent);flex:none} /* Rechtstexte */ .rechtstext h2{margin-top:34px} .rechtstext h3{margin-top:24px;margin-bottom:8px} .rechtstext h4{margin-top:18px;margin-bottom:6px;font-size:16.5px} .rechtstext p{color:var(--nebentext)} .platzhalter{background:var(--akzent-blass);border-left:4px solid var(--akzent);border-radius:8px; padding:16px 20px;margin:10px 0 18px} .platzhalter p{color:var(--tinte);margin:0} /* Fußzeile: das Dunkelblau des Betriebs, kein Schwarz. Steht eine helle Flaeche darueber, setzt die Klasse "kante" eine gelbe Trennlinie. Folgt sie direkt auf den dunkelblauen Schlussaufruf, bleibt sie weg. */ .fusszeile{background:var(--akzent-dunkel);color:#fff;padding:56px 0 0;margin-top:0} .fusszeile.kante{border-top:5px solid var(--signal)} .fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px} .fusszeile h3{margin-bottom:12px;font-size:16px;letter-spacing:.06em;text-transform:uppercase} .fusszeile p{color:var(--akzent-hell);font-size:15.5px} .fusszeile a{display:block;color:var(--akzent-hell);text-decoration:none;font-size:15.5px;padding:3px 0} .fusszeile a:hover{color:#fff;text-decoration:underline} .fuss-logo{width:230px;height:auto;margin-bottom:14px} .fuss-unten{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap; border-top:1px solid rgba(255,255,255,.18);padding-top:18px;padding-bottom:18px; font-size:14.5px;color:#9fb0bd} .fuss-rechts{display:flex;gap:20px} .fuss-rechts a{display:inline;padding:0} /* Sanftes Einblenden beim Scrollen. Die Klasse "anim" setzt das Skript nur, wenn der Besucher keine reduzierte Bewegung eingestellt hat; ohne die Klasse (und ohne JavaScript) bleibt alles ganz normal sichtbar. */ html.anim :is(.kachel,.staerke,.schritt,.vergleich){opacity:0} html.anim .sichtbar{opacity:1;animation:einblenden .55s ease backwards} @keyframes einblenden{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}} /* Zwischenbreiten: vier Spalten würden die Karten so schmal machen, dass die Titel neben dem Zeichen umbrechen. Deshalb hier schon auf zwei Spalten. */ @media (max-width:1100px){.staerken,.schritte{grid-template-columns:1fr 1fr}} /* Handy */ @media (max-width:900px){ .abschnitt{padding:52px 0} .held{padding:36px 0} .held-raster,.zweispalter,.zweispalter-breit,.formular-raster, .kopf-zweispalter{grid-template-columns:1fr;gap:28px} .kopf-zweispalter .bildrahmen{min-height:0} .kopf-zweispalter .bildrahmen img,.kopf-zweispalter .bildrahmen video{aspect-ratio:16/10} .staerken,.schritte{grid-template-columns:1fr 1fr} .staerken-drei{grid-template-columns:1fr} .kontakt-karten{grid-template-columns:1fr} .held-bildrahmen{min-height:240px;order:-1} .formular-bildrahmen{max-height:340px} .marke img{width:132px} .burger{display:block} .hauptmenue{display:none;position:absolute;left:0;right:0;top:82px;background:var(--akzent); border-bottom:1px solid rgba(255,255,255,.12);flex-direction:column;align-items:stretch; padding:14px 20px;gap:4px} .hauptmenue.offen{display:flex} .hauptmenue a{padding:12px 4px} .hauptmenue .knopf-klein{justify-content:center;margin-top:8px} /* Auf dem Handy gibt es kein Zeigen. Das Untermenue oeffnet nur ueber den Schalter und schiebt sich in die Liste, es schwebt nicht darueber. */ .hauptmenue{align-self:auto} .menue-punkt{align-self:auto;justify-content:space-between;flex-wrap:wrap} .menue-punkt > a{flex:1} .unter-schalter{padding:12px 6px} .menue-punkt:hover .untermenue, .menue-punkt:focus-within .untermenue{display:none} .menue-punkt.offen .untermenue{display:grid} .untermenue{position:static;width:100%;grid-template-columns:1fr; padding:6px;margin:0 0 8px;border:0;border-left:3px solid var(--signal); border-radius:0 8px 8px 0;background:rgba(255,255,255,.06);box-shadow:none} .untermenue a{padding:11px 10px} .band-innen{flex-direction:column;gap:12px} } @media (max-width:560px){ .staerken,.staerken-drei,.schritte{grid-template-columns:1fr} .kachel{width:100%} .bild-breit img,.bild-breit video{aspect-ratio:16/10} .vergleich{aspect-ratio:4/3} /* Untereinander stehende Knöpfe sind gleich breit, nie unterschiedlich lang */ .knopfreihe{flex-direction:column;align-items:stretch} .knopfreihe .knopf{width:100%} } /* Kauf-Leiste (nur solange die Seite eine Demo ist): führt zur honeyflow-Verkaufsseite */ .kauf-leiste{background:#2540a8;padding:10px 20px;display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;text-align:center} .kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#fff;color:#2540a8; font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35} .kauf-leiste .kauf-knopf:hover{background:#eef1fb} .kauf-leiste .kauf-knopf svg{flex:none} /* ================================================================ Zusatz-Bauteile fuer Elektro Mustermann (Zertifizierungen, Team, Bueroezeiten, Standortkarte, Marken) Grundsatz wie ueberall: nebeneinander heisst gleich hoch und gleich breit. Deshalb feste Spaltenzahlen, die ohne Rest aufgehen, und align-items:stretch statt Zufallshoehen. ================================================================ */ /* Zertifizierungen: acht Nachweise, also 4x2 bzw. 2x4 bzw. 1x8. Jede Karte zeigt die ECHTE Urkunde als Vorschau. Bewusst KEINE Ueberschrift in den Kaesten, sondern ein Textstueck: die Nachweisnamen sind unterschiedlich lang und wuerden als h3 sonst auf verschiedenen Zeilen beginnen. */ .zert-titel{display:flex;align-items:center;gap:30px;margin-bottom:8px} .zert-titel h2{margin-bottom:10px} .zert-titel p{color:var(--nebentext);margin:0;max-width:720px} /* Das echte E-Check-Pruefzeichen, ausgeschnitten aus der Urkunde des Betriebs. Kein erfundenes Siegel. */ .zert-stempel{flex:none;width:118px;height:118px} .zert-raster{display:grid;grid-template-columns:repeat(4,1fr);gap:18px; align-items:stretch;margin-top:32px} .zert{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:16px; display:flex;flex-direction:column;text-decoration:none; transition:border-color .15s,box-shadow .15s,transform .15s} .zert:hover{border-color:var(--akzent);box-shadow:0 10px 24px rgba(28,53,71,.14); transform:translateY(-3px)} /* Die Urkunde als Blatt: oberer Ausschnitt, dort steht das Zeichen des Ausstellers. Heller Rand, damit es wie Papier wirkt. */ .zert-blatt{display:block;aspect-ratio:3/4;overflow:hidden;border-radius:8px; border:1px solid var(--linie);background:#fff;margin-bottom:14px} .zert-blatt img{width:100%;height:100%;object-fit:cover;object-position:top center} .zert-kopf{display:flex;align-items:flex-start;gap:10px;margin-bottom:8px} .zert-kopf .ico{color:var(--akzent);margin-top:2px} /* feste Mindesthoehe fuer zwei Zeilen, damit die Quellenangabe in allen Karten einer Reihe auf derselben Linie beginnt */ .zert-text{font-weight:700;font-size:15.5px;line-height:1.3;min-height:40px; display:flex;align-items:center} .zert-quelle{display:block;font-size:13.5px;line-height:1.45;color:var(--nebentext); margin-bottom:14px} .zert .weiter{margin-top:auto;font-size:14.5px} /* Team: zwei Spalten, damit 14 Personen ohne angebrochene Reihe aufgehen. Kein erfundenes Portraetfoto, sondern die Initialen als Zeichen. */ .team-raster{display:grid;grid-template-columns:repeat(2,1fr);gap:20px; align-items:stretch;margin-top:32px} .team-karte{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:22px; display:flex;align-items:flex-start;gap:18px} .monogramm{display:flex;align-items:center;justify-content:center;flex:none; width:58px;height:58px;border-radius:50%;background:var(--signal); color:var(--akzent-dunkel);font-weight:700;font-size:19px;letter-spacing:.02em} .team-karte h3{margin:0 0 4px;min-height:29px;display:flex;align-items:center} .team-karte p{margin:0;color:var(--nebentext);font-size:15.5px} .team-karte a{display:inline-block;color:var(--akzent);font-weight:700;font-size:15px; text-decoration:none;margin-top:6px} .team-karte a:hover{text-decoration:underline;text-underline-offset:4px} .team-karte .team-inhalt{display:flex;flex-direction:column} /* Hinweiszeile unter einem Abschnitt, zum Beispiel fuer fehlende Angaben */ .hinweiszeile{margin-top:26px;font-size:14.5px;color:var(--nebentext); border-left:4px solid var(--signal);padding:10px 0 10px 16px} /* Bueroezeiten */ .zeiten{margin-top:8px;border-top:1px solid var(--linie)} .zeiten-reihe{display:flex;justify-content:space-between;gap:16px; padding:11px 0;border-bottom:1px solid var(--linie);font-size:16px} .zeiten-reihe span:first-child{font-weight:700} .zeiten-reihe.zu span:last-child{color:var(--nebentext)} /* Standortkarte: laedt direkt mit der Seite, ohne Zwischenklick */ .karte-rahmen{border-radius:14px;overflow:hidden;border:1px solid var(--linie); background:var(--grau);min-height:320px;height:100%} .karte-rahmen iframe{display:block;width:100%;height:100%;min-height:320px;border:0} .karte-hinweis{font-size:13.5px;color:var(--nebentext);margin-top:10px} /* ================================================================ Marken-Laufband (Elektro Mustermann, 04.09.2026) Vorbild: weil.bizzcenter.de. Sechs identische Saetze liegen nebeneinander, verschoben wird um genau eine Satzbreite. Danach springt die Animation zurueck, was man nicht sieht, weil an der Stelle schon der naechste Satz steht. Wichtig: das Band liegt in einem eigenen Kasten mit overflow:hidden, damit nie die ganze Seite waagerecht scrollt (Scroll-Fix-Regel). ================================================================ */ .marken-band{position:relative;overflow:hidden;margin-top:38px; padding:6px 0;contain:paint} /* Weiches Ausblenden an beiden Raendern. Der Farbwert muss zum Abschnittshintergrund (--grau) passen. */ .marken-band::before,.marken-band::after{content:"";position:absolute;top:0;bottom:0; width:120px;z-index:2;pointer-events:none} .marken-band::before{left:0;background:linear-gradient(to right,var(--grau),rgba(244,246,248,0))} .marken-band::after{right:0;background:linear-gradient(to left,var(--grau),rgba(244,246,248,0))} .marken-lauf{display:flex;width:max-content;will-change:transform; animation:marken-lauf 38s linear infinite} .marken-band:hover .marken-lauf{animation-play-state:paused} .marken-satz{display:flex;flex-shrink:0} /* Jedes Logo bekommt dasselbe Feld und wird darin eingepasst. Dadurch stehen breite und schmale Wortmarken auf einer Ebene und wirken gleich gross (Regel: Nebeneinander heisst gleich hoch und breit). ACHTUNG: Die Klasse heisst .marken-logo, NICHT .marke. Die Klasse .marke gehoert dem Firmenlogo in der Kopfzeile; als beide gleich hiessen, hat das Laufband dem Firmenlogo seine Masse aufgezwungen. */ .marken-band{--grundgroesse:66px} .marken-logo{flex-shrink:0;width:210px;height:74px;margin:0 14px; display:flex;align-items:center;justify-content:center; text-decoration:none;transition:transform .2s} /* Die Logos stehen in ihren Originalfarben. Eine Entsaettigung wuerde zwar ruhiger wirken, nimmt den Marken aber die Wiedererkennung, und genau darum geht es in diesem Abschnitt. */ .marken-logo:hover,.marken-logo:focus-visible{transform:scale(1.06)} /* Die Hoehe je Logo kommt aus dem Generator: Grundgroesse mal Faktor. Der Faktor gleicht das Seitenverhaeltnis aus, damit eine breite Wortmarke nicht groesser wirkt als eine kompakte. */ .marken-logo img{height:calc(var(--grundgroesse) * var(--f,.5));width:auto; max-width:100%;object-fit:contain} @keyframes marken-lauf{ from{transform:translateX(0)} to{transform:translateX(-16.6667%)} /* genau ein Satz von sechs */ } @media (max-width:700px){ .marken-band::before,.marken-band::after{width:56px} .marken-band{--grundgroesse:52px} .marken-logo{width:158px;height:62px;margin:0 10px} .marken-lauf{animation-duration:26s} } /* Fussleiste: soziale Netze */ .fuss-social{display:flex;gap:18px;margin-top:12px} .fuss-social a{display:inline-flex;align-items:center;gap:8px;padding:0} .fuss-social .ico{color:var(--signal)} @media (max-width:1100px){ .zert-raster{grid-template-columns:repeat(2,1fr)} .zert-titel{flex-direction:column;align-items:flex-start;gap:18px} } @media (max-width:900px){ .team-raster{grid-template-columns:1fr} } @media (max-width:560px){ .zert-raster{grid-template-columns:1fr} .team-karte{padding:18px;gap:14px} .monogramm{width:48px;height:48px;font-size:17px} } /* ================================================================ Projektbild mit Punkten (Elektro Mustermann, 04.09.2026) Das echte Foto des Kunden bleibt unverändert. Darüber liegen nummerierte Punkte, die zeigen, WAS an diesem Objekt gebaut wurde (Satanlage, Außenbeleuchtung, Türkommunikation …). Regeln dabei: - Die Liste unter dem Bild zeigt IMMER alle Angaben im Klartext. Wer nicht tippt oder mit der Maus fährt, verpasst nichts, und Vorleseprogramme finden den Text. - Bewegung läuft EINMAL ab, wenn das Bild ins Sichtfeld kommt. - Bei "Bewegung reduzieren" bleibt alles ruhig stehen. ================================================================ */ .projektbild{position:relative;width:100%;border-radius:14px;overflow:hidden;background:var(--akzent); box-shadow:0 18px 44px rgba(28,53,71,.20)} /* Die Bühne trägt Foto UND Punkte. Beides muss zusammen bewegt werden, sonst wandern die Punkte beim Heranfahren von ihrem Bauteil weg. */ .projektbild-buehne{position:absolute;inset:0;transform-origin:50% 50%} .projektbild img{width:100%;height:100%;object-fit:cover;display:block} /* Sanftes Heranfahren, damit das Standbild lebt. Läuft einmal und bleibt stehen. */ html.anim .projektbild.laeuft .projektbild-buehne{animation:heranfahren 14s ease-out forwards} @keyframes heranfahren{from{transform:scale(1)}to{transform:scale(1.05)}} /* Ein Punkt: der Knopf auf dem Foto. Der Halter ist ein Punkt ohne Ausdehnung an der Stelle im Bild; Knopf und Schild haengen daran. */ .punkt-halter{position:absolute;width:0;height:0;z-index:2} .punkt{position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:38px;height:38px;padding:0; border-radius:50%;border:2px solid #fff;background:var(--akzent);color:#fff; font-weight:700;font-size:16px;line-height:1;cursor:pointer;z-index:2; display:flex;align-items:center;justify-content:center; box-shadow:0 3px 12px rgba(28,53,71,.40);transition:background .15s,transform .15s} .punkt:hover,.punkt:focus-visible{background:var(--signal);color:var(--akzent-dunkel); transform:translate(-50%,-50%) scale(1.12)} .punkt:focus-visible{outline:3px solid #fff;outline-offset:3px} /* Erscheinen nacheinander, sobald das Bild sichtbar wird */ html.anim .projektbild .punkt{opacity:0} html.anim .projektbild.laeuft .punkt{animation:punkt-auf .5s ease forwards} @keyframes punkt-auf{from{opacity:0;transform:translate(-50%,-50%) scale(.4)} to{opacity:1;transform:translate(-50%,-50%) scale(1)}} /* Ein einziger Ring, der nach dem Erscheinen einmal aufgeht */ .punkt::after{content:"";position:absolute;inset:-8px;border-radius:50%; border:2px solid var(--signal);opacity:0} html.anim .projektbild.laeuft .punkt::after{animation:ring 1.6s ease-out .5s 2} @keyframes ring{from{opacity:.85;transform:scale(.7)}to{opacity:0;transform:scale(1.5)}} /* Das Schild am Punkt. Erscheint beim Überfahren, beim Antippen und bei Tastatur-Bedienung. Es liegt bewusst innerhalb des Bildes. */ .punkt-schild{position:absolute;left:0;top:0;transform:translate(-50%,-100%);margin-top:-26px; background:rgba(28,53,71,.94);color:#fff;border-radius:10px;padding:11px 15px; width:250px;z-index:3;pointer-events:none;opacity:0;visibility:hidden; transition:opacity .18s;box-shadow:0 8px 24px rgba(28,53,71,.34)} .punkt-schild b{display:block;font-size:15.5px;margin-bottom:3px;color:var(--signal)} .punkt-schild span{display:block;font-size:14px;line-height:1.45;color:#dfe7ee} .punkt-halter:hover .punkt-schild,.punkt-halter:focus-within .punkt-schild, .punkt-halter.offen .punkt-schild{opacity:1;visibility:visible} /* Am linken und rechten Bildrand rutscht das Schild nach innen, damit es nicht aus dem Bild ragt. */ .punkt-halter.links .punkt-schild{transform:translate(-14%,-100%)} .punkt-halter.rechts .punkt-schild{transform:translate(-86%,-100%)} /* Warmes Licht an der Außenleuchte: geht am Ende der Bewegung leise an. Es wird nichts ins Foto hineinerfunden, nur der vorhandene Strahler bekommt einen weichen Schein. */ .lichtschein{position:absolute;transform:translate(-50%,-50%);width:18%;aspect-ratio:1; border-radius:50%;pointer-events:none;opacity:0;z-index:1; background:radial-gradient(circle,rgba(255,208,128,.72) 0%,rgba(255,198,110,.30) 36%,rgba(255,195,105,0) 70%)} html.anim .projektbild.laeuft .lichtschein{animation:licht-an 2.6s ease-out 1.5s forwards} @keyframes licht-an{from{opacity:0}to{opacity:1}} /* Die Liste unter dem Bild: alle Punkte im Klartext, immer sichtbar. */ .punktliste{list-style:none;margin:0} .punktliste li{display:flex;align-items:flex-start;gap:14px;padding:13px 0; border-bottom:1px solid var(--linie)} .punktliste li:last-child{border-bottom:0} .punktliste .nummer{flex:none;width:30px;height:30px;border-radius:50%;background:var(--akzent); color:#fff;font-weight:700;font-size:15px;display:flex;align-items:center;justify-content:center; margin-top:2px} .punktliste b{display:block;font-size:16.5px} .punktliste span{display:block;color:var(--nebentext);font-size:15.5px} /* Projekt-Block: links das Bild, rechts der Text. Beide Spalten enden oben UND unten auf derselben Linie (Torbens Regel). */ .projekt-block{display:grid;grid-template-columns:1.35fr 1fr;gap:44px;align-items:stretch} .projekt-block-gedreht{grid-template-columns:1fr 1.35fr} .projekt-block>div{display:flex;flex-direction:column;justify-content:center} .projekt-block .projektbild{justify-content:flex-start} .projekt-marke{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase; color:var(--akzent);margin-bottom:10px} .abschnitt-akzent .projekt-marke{color:var(--signal)} .abschnitt-akzent .punktliste li{border-color:rgba(255,255,255,.16)} .abschnitt-akzent .punktliste span{color:var(--akzent-hell)} .abschnitt-akzent .punktliste .nummer{background:var(--signal);color:var(--akzent-dunkel)} /* Zwei Bilder nebeneinander (Übersicht und Ausschnitt): gleich hoch. */ .bildpaar{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch} /* KEIN height:100% am Bild! Mit fester Seitenverhaeltnis-Angabe wuerde das Bild dann seine Breite aus der Zeilenhoehe rechnen und aus der Spalte herauslaufen. Gleiche Hoehe entsteht hier dadurch, dass beide Bilder dasselbe Seitenverhaeltnis haben (siehe baue-projektbilder.py). */ .bildpaar>div{display:flex;flex-direction:column} .bildunterschrift{font-size:14.5px;color:var(--nebentext);margin:10px 0 0} .abschnitt-akzent .bildunterschrift{color:var(--akzent-hell)} /* Vorher/Nachher: drei Schieber untereinander, jeder mit eigener Überschrift. Der Schieber selbst steckt im Bauteil .vergleich weiter oben. */ .vergleich-reihe{display:grid;grid-template-columns:1fr;gap:44px;margin-top:10px} .vergleich-block h3{margin-bottom:6px} .vergleich-block .kopf{max-width:860px;margin:0 auto;text-align:center} .vergleich-block p{color:var(--nebentext);margin-bottom:0} .vergleich-hoch{aspect-ratio:5/8;max-width:520px} .vergleich-quer{aspect-ratio:4/3;max-width:860px} /* Übersicht der weiteren Projekte */ /* Zwei feste Spalten: acht Karten ergeben vier volle Reihen. Bei drei Spalten bliebe in der letzten Reihe ein Loch (die 2+1-Optik). */ .projektraster{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;align-items:stretch;margin-top:34px} .projektkarte{background:#fff;border:1px solid var(--linie);border-radius:12px;overflow:hidden; display:flex;flex-direction:column} .projektkarte-bild{aspect-ratio:16/10;overflow:hidden} .projektkarte-bild img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease} .projektkarte:hover .projektkarte-bild img{transform:scale(1.05)} .projektkarte-text{padding:22px 24px 26px;display:flex;flex-direction:column;flex:1} .projektkarte h3{min-height:50px;display:flex;align-items:center;margin-bottom:6px} .projektkarte p{color:var(--nebentext);font-size:15.5px;margin:0} @media (max-width:900px){ .projekt-block,.projekt-block-gedreht,.bildpaar{grid-template-columns:1fr;gap:26px} .projektraster{grid-template-columns:1fr} .punkt{width:34px;height:34px;font-size:15px} .punkt-schild{width:200px} .vergleich-hoch,.vergleich-quer{max-width:none} } @media (max-width:560px){ .projektraster{grid-template-columns:1fr} .punkt-schild{width:170px;padding:9px 12px} .punkt-schild span{font-size:13px} } @media (prefers-reduced-motion:reduce){ /* Marken-Band steht still und laesst sich von Hand schieben. */ .marken-lauf{animation:none} .marken-band{overflow-x:auto;scrollbar-width:thin} .marken-satz:not(:first-child){display:none} .marken-logo{opacity:1;filter:none} html.anim .projektbild.laeuft .projektbild-buehne, html.anim .projektbild.laeuft .punkt, html.anim .projektbild.laeuft .punkt::after, html.anim .projektbild.laeuft .lichtschein{animation:none} html.anim .projektbild .punkt{opacity:1} } /* Punktliste quer unter dem Bild: die Angaben stehen nebeneinander statt untereinander, damit das Bild darüber die volle Breite bekommt. Feste Spaltenzahl, nie auto-fit, sonst entsteht die 2+1-Optik. */ .punktliste-quer{display:grid;grid-template-columns:repeat(3,1fr);gap:0 34px;margin-top:26px} .punktliste-zwei{grid-template-columns:repeat(2,1fr)} .punktliste-quer li{border-bottom:0;padding:0} /* Bild allein in der Mitte der Spalte, mit Deckelbreite */ .bild-mitte{margin-left:auto;margin-right:auto} .mittelblock{max-width:820px;margin-left:auto;margin-right:auto} @media (max-width:900px){ .punktliste-quer,.punktliste-zwei{grid-template-columns:1fr;gap:0} .punktliste-quer li{padding:13px 0;border-bottom:1px solid var(--linie)} .punktliste-quer li:last-child{border-bottom:0} } /* Team-Portraet: die echten Schwarzweissfotos des Betriebs, Hochformat 4:5. Sie stehen an der Stelle des Monogramms, links neben Name und Funktion. */ .team-bild{flex:none;width:96px;height:120px;object-fit:cover;border-radius:10px; background:var(--grau)} @media (max-width:560px){ .team-bild{width:80px;height:100px} } /* Gedenkeintrag im Team. Das Foto sitzt in einer Fassung wie ein gerahmtes Erinnerungsbild, darueber liegt der Trauerflor. Der Rahmen ist dabei nicht Zierrat, sondern der Grund, warum man das Band ueberhaupt als Band erkennt (Torben, 04.09.2026: "ist nicht zu erkennen, dass es eine Trauerschleife ist"). Die erste Fassung war ein schmales Dreieck IM Foto und sah aus wie eine abgeschnittene Ecke. Jetzt gilt: - weisses Passepartout und eine feine Linie ringsum, das ist der Rahmen - das Band liegt UEBER der Rahmenecke und steht an beiden Enden ueber, mit schraeg geschnittenen Enden wie echter Stoff Das Sterbedatum steht als Textzeile unter dem Namen und ist damit in jeder Bildgroesse lesbar. Das Foto selbst wird nicht veraendert, das Band ist eine Grafik darueber. */ .gedenk-bild{position:relative;flex:none;background:var(--papier);padding:6px; border:1px solid var(--akzent-hell);border-radius:4px;overflow:hidden; box-shadow:0 2px 8px rgba(28,53,71,.16);line-height:0} .gedenk-bild .team-bild{width:96px;height:120px;border-radius:0} /* Das Band sitzt in der Ecke der Fassung und wird von ihr an den Kanten abgeschnitten (overflow:hidden oben). Genau das macht die Form aus: ein Band, das ueber die Ecke gelegt und am Rand sauber abgeschnitten ist, kein Zipfel, der schraeg heraussteht. */ .gedenk-bild .flor{position:absolute;top:0;left:0;width:54px;height:54px; pointer-events:none} .team-karte p.gedenkzeile{color:var(--nebentext);letter-spacing:.01em} .gedenkzeile .kreuz{color:var(--akzent);margin-right:4px} @media (max-width:560px){ .gedenk-bild .team-bild{width:80px;height:100px} .gedenk-bild .flor{width:46px;height:46px} } /* Text, der nur vorgelesen und nicht angezeigt wird */ .nur-vorlesen{position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Fußzeile auf dem Handy: die drei Spalten passen unter 760 Pixel nicht mehr nebeneinander, die Seite wurde dadurch auf dem iPhone seitlich verschoben (gemessen 641 statt 390 Pixel breit). Betraf ALLE Seiten, nicht nur die Projekte-Seite. Gefunden am 04.09.2026 beim Prüfen der Projekte-Seite. */ @media (max-width:760px){ .fuss-raster{grid-template-columns:1fr;gap:28px} } /* ================================================================ Weiche Uebergaenge zwischen den hellen Flaechen (Torben, 04.09.2026: nie mehr hart Weiss auf Dunkel stossen lassen, und der Verlauf laeuft NIE ins Schwarze, sondern in die Firmenfarbe, also aus dem Weiss ins Gelb). Der Generator setzt den .uebergang-Streifen mit einem Verlauf von der einen Nachbarfarbe zur anderen. Die Farben kommen direkt aus dem Generator (style="background:linear-gradient(...)"), damit der Streifen immer zu SEINEN Nachbarn passt. Erlaubt sind nur helle Farben: Weiss, Grau, blasses Gelb, Gelb. Zu einer kraeftigen dunkelblauen Flaeche fuehrt KEIN Verlauf, sondern die gelbe Kante (border-top an .abschnitt-akzent und .fusszeile.kante). ================================================================ */ .uebergang{display:block;height:96px} @media (max-width:900px){.uebergang{height:60px}} /* ================================================================ Google-Bewertungen (Daten in inhalte/google-bewertungen.json). Endlos laufendes Band, haelt bei Mausberuehrung und beim Antippen an. Gescrollt wird nur im Band selbst (.bew-band), nie die ganze Seite. ================================================================ */ .bewertungen{overflow:hidden} .bew-kopf{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;margin-bottom:10px} .g-logo{display:block;width:auto} .bew-schnitt{display:flex;align-items:center;gap:9px;margin:0;font-size:16px;color:var(--nebentext)} .bew-schnitt strong{color:var(--tinte);font-size:18px} .sterne{display:inline-flex;align-items:center;gap:2px;line-height:0} .sterne svg{fill:#fbbc04;flex:none} .bew-band{margin-top:26px;overflow-x:auto;overflow-y:hidden; /* Das #000 hier ist KEINE Farbe, sondern eine Maske: Schwarz heisst sichtbar, durchsichtig heisst ausgeblendet. Es bleibt so. */ -webkit-overflow-scrolling:touch;scrollbar-width:none;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)} .bew-band::-webkit-scrollbar{display:none} .bew-lauf{display:flex;gap:20px;width:max-content;padding:4px 20px; animation:bew-laufen 64s linear infinite} .bew-band:hover .bew-lauf,.bew-band:active .bew-lauf{animation-play-state:paused} @keyframes bew-laufen{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.bew-lauf{animation:none}} .bew-karte{width:340px;flex:none;background:#fff;border:1px solid var(--linie);border-radius:14px; padding:22px;display:flex;flex-direction:column;text-align:left;margin:0} .bew-karte blockquote{margin:12px 0 16px;font-size:16px;line-height:1.6;color:var(--tinte)} .bew-karte figcaption{margin-top:auto;display:flex;flex-direction:column;gap:2px; border-top:1px solid var(--linie);padding-top:12px} .bew-karte figcaption strong{font-size:16px} .bew-karte figcaption span{font-size:14px;color:var(--nebentext)} .bew-knoepfe{justify-content:center;margin-top:26px} .bew-herkunft{max-width:760px;margin:18px auto 0;font-size:13.5px;line-height:1.55;color:var(--nebentext)} /* ================================================================ Das Mustermann-Maennchen im Seitenkopf (der Wow-Effekt oben). Es ist das Erkennungszeichen des Betriebs und steckt auch im Logo. Ablauf (12,5 Sekunden, laeuft genau einmal): 0,0 bis 4,4 s kommt von links hereingelaufen 4,4 bis 4,6 s bleibt stehen 4,6 bis 7,8 s nimmt die Muetze ab, gruesst damit, setzt sie wieder auf 7,8 bis 8,05 s kurze Pause 8,05 bis 12,5 s laeuft nach rechts wieder hinaus Danach ist Ruhe, es wiederholt sich nichts. Warum Gelenke: Vorher schwangen starre Arme und Beine um Schulter und Huefte, das sah aus wie eine Marionette an Faeden (Rueckmeldung Torben, 04.09.2026). Jetzt hat jedes Bein ein Knie und jeder Arm einen Ellenbogen, die Schritte sind kleiner, der Koerper wippt leicht mit und die Schrittfolge passt zum Tempo. Dadurch geht die Figur, statt zu zappeln. Die Beine laufen zweimal: beim Hereinkommen und beim Hinausgehen. Dazwischen stehen sie still. Moeglich wird das durch zwei Animationen hintereinander an demselben Bein: die erste ist nach ihren Durchlaeufen zu Ende und wirkt dann nicht mehr, die zweite beginnt erst nach ihrem Verzug. Ohne JavaScript oder mit "Bewegung reduzieren" steht die Figur einfach ruhig in der Mitte, es fehlt also nie etwas. ================================================================ */ /* Die Buehne ist absichtlich hoeher als die Figur (142px): beim Gruss hebt sie die Muetze ueber den Kopf, und ohne diesen Luftraum oben schnitte die Buehne die Muetze ab. */ .held-buehne{position:relative;height:170px;overflow:hidden} .held-boden{position:absolute;left:0;right:0;bottom:17px;height:2px;background:var(--linie)} .mg-held{position:absolute;bottom:15px;left:calc(50% - 29px);width:58px;height:142px;overflow:visible} .mg-held g[class^="mg-"]{transform-box:view-box} /* Die Namen folgen dem Maennchen, nicht dem Bildschirm: es schaut uns an, sein rechter Arm liegt fuer uns links. Die Drehpunkte sind die Gelenke selbst, in den Koordinaten der Zeichnung. */ .mg-held .mg-arm-rechts,.mg-held .mg-oberarm-rechts{transform-origin:62px 166px} .mg-held .mg-unterarm-rechts{transform-origin:40px 234px} .mg-held .mg-arm-links,.mg-held .mg-oberarm-links{transform-origin:134px 164px} .mg-held .mg-unterarm-links{transform-origin:156px 232px} .mg-held .mg-oberschenkel-links{transform-origin:80px 348px} .mg-held .mg-unterschenkel-links{transform-origin:77px 428px} .mg-held .mg-oberschenkel-rechts{transform-origin:118px 348px} .mg-held .mg-unterschenkel-rechts{transform-origin:121px 428px} .mg-held .mg-kopf{transform-origin:96px 138px} .mg-held .mg-rumpf{transform-origin:100px 350px} .mg-held .mg-muetze{transform-origin:56px 49px} /* Gehen: kleine Schritte, weiches Knie, Arme schwingen gegengleich */ @keyframes mg-huefte{0%,50%,100%{transform:rotate(0deg)} 25%{transform:rotate(22deg)}75%{transform:rotate(-20deg)}} @keyframes mg-knie{0%,50%,100%{transform:rotate(0deg)} 30%{transform:rotate(-6deg)}80%{transform:rotate(15deg)}} @keyframes mg-schulter{0%,50%,100%{transform:rotate(0deg)} 25%{transform:rotate(-11deg)}75%{transform:rotate(11deg)}} @keyframes mg-ellbogen{0%,50%,100%{transform:rotate(0deg)} 25%{transform:rotate(13deg)}75%{transform:rotate(4deg)}} @keyframes mg-wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-2.5px)}} /* Der Weg ueber die Buehne */ @keyframes mg-weg{ 0%{left:-90px} 35.2%,64.4%{left:calc(50% - 29px)} 100%{left:calc(100% + 40px)} } /* Der Gruss: der rechte Arm geht nach oben an die Muetze, nimmt sie ab, haelt sie kurz und setzt sie wieder auf. Dazu ein kleines Nicken. Die 205 Grad sind nachgerechnet: damit landet die Hand auf (49|29), also genau an der angehobenen Muetzenspitze, und der Arm bleibt links neben dem Gesicht statt quer darueber. Wird die Armlaenge oder die Muetze geaendert, muss der Winkel neu ausgerechnet werden. */ /* Fenster des Grusses: 3,4 Sekunden, beginnt 4,5 s nach dem Start */ @keyframes mg-gruss-schulter{ 0%{transform:rotate(0deg)} 20%,64%{transform:rotate(-205deg)} 100%{transform:rotate(0deg)} } @keyframes mg-gruss-ellbogen{ 0%{transform:rotate(0deg)} 22%,62%{transform:rotate(25deg)} 100%{transform:rotate(0deg)} } @keyframes mg-muetze-ab{ 0%,12%{transform:translate(0,0) rotate(0deg)} 26%,60%{transform:translate(-6px,-26px) rotate(-12deg)} 74%,100%{transform:translate(0,0) rotate(0deg)} } @keyframes mg-nicken{0%,14%{transform:rotate(0deg)} 28%,58%{transform:rotate(6deg)}72%,100%{transform:rotate(0deg)}} html.anim .mg-held{animation:mg-weg 12.5s ease-in-out forwards} html.anim .mg-held .mg-oberschenkel-links{ animation:mg-huefte .8s ease-in-out 0s 5.5,mg-huefte .8s ease-in-out 8.05s 5.5} html.anim .mg-held .mg-oberschenkel-rechts{ animation:mg-huefte .8s ease-in-out 0s 5.5 reverse, mg-huefte .8s ease-in-out 8.05s 5.5 reverse} html.anim .mg-held .mg-unterschenkel-links{ animation:mg-knie .8s ease-in-out 0s 5.5,mg-knie .8s ease-in-out 8.05s 5.5} html.anim .mg-held .mg-unterschenkel-rechts{ animation:mg-knie .8s ease-in-out 0s 5.5 reverse, mg-knie .8s ease-in-out 8.05s 5.5 reverse} html.anim .mg-held .mg-oberarm-links{ animation:mg-schulter .8s ease-in-out 0s 5.5,mg-schulter .8s ease-in-out 8.05s 5.5} html.anim .mg-held .mg-unterarm-links{ animation:mg-ellbogen .8s ease-in-out 0s 5.5,mg-ellbogen .8s ease-in-out 8.05s 5.5} /* Der rechte Arm geht beim Laufen mit und gruesst dazwischen mit der Muetze. Die Gruss-Animation steht in der Liste hinter dem Gehen, deshalb hat sie waehrend ihrer Laufzeit das Sagen. */ html.anim .mg-held .mg-oberarm-rechts{ animation:mg-schulter .8s ease-in-out 0s 5.5 reverse, mg-gruss-schulter 3.4s ease-in-out 4.5s, mg-schulter .8s ease-in-out 8.05s 5.5 reverse} html.anim .mg-held .mg-unterarm-rechts{ animation:mg-ellbogen .8s ease-in-out 0s 5.5 reverse, mg-gruss-ellbogen 3.4s ease-in-out 4.5s, mg-ellbogen .8s ease-in-out 8.05s 5.5 reverse} html.anim .mg-held .mg-muetze{animation:mg-muetze-ab 3.4s ease-in-out 4.5s} html.anim .mg-held .mg-kopf{animation:mg-nicken 3.4s ease-in-out 4.5s} html.anim .mg-held .mg-rumpf{ animation:mg-wippen .4s ease-in-out 0s 11,mg-wippen .4s ease-in-out 8.05s 11} @media (max-width:900px){ .held-buehne{height:132px} .mg-held{width:44px;height:108px;left:calc(50% - 22px)} /* Auf dem Handy ist der Weg viel kuerzer. Damit die Figur nicht auf der Stelle trippelt, dauert dort jeder Schritt laenger. */ @keyframes mg-weg{ 0%{left:-70px} 35.2%,64.4%{left:calc(50% - 22px)} 100%{left:calc(100% + 30px)} } html.anim .mg-held .mg-oberschenkel-links,html.anim .mg-held .mg-oberschenkel-rechts, html.anim .mg-held .mg-unterschenkel-links,html.anim .mg-held .mg-unterschenkel-rechts, html.anim .mg-held .mg-oberarm-links,html.anim .mg-held .mg-unterarm-links{ animation-duration:1.35s;animation-iteration-count:3.3} /* Der rechte Arm hat drei Animationen: gehen, gruessen, gehen. Nur die beiden Geh-Animationen werden langsamer, der Gruss bleibt wie er ist. Sonst schwingen die beiden Arme unterschiedlich schnell. */ html.anim .mg-held .mg-oberarm-rechts,html.anim .mg-held .mg-unterarm-rechts{ animation-duration:1.35s,3.4s,1.35s;animation-iteration-count:3.3,1,3.3} html.anim .mg-held .mg-rumpf{animation-duration:.675s;animation-iteration-count:6.6} } @media (prefers-reduced-motion:reduce){ html.anim .mg-held,html.anim .mg-held *{animation:none !important} } /* ================================================================ Unser Einsatzgebiet: Reliefkarte der Region mit Schutzkuppel (Elektro Mustermann, 04.09.2026) Bauart uebernommen aus dem Projekt mb-haustechnik, hier auf die Farbwelt von Elektro Mustermann umgestellt: aus den Waermestrecken wurden Stromstrecken in Gelb, und statt der Servicefahrzeuge laufen die Mustermann-Maennchen in die Orte hinaus. Das Relief ist ein gerechnetes Bild (werkzeuge/baue-gelaende.py) und liegt zweimal uebereinander: grau als Ausgangsbild, farbig als Schlussbild. Alles darueber ist gezeichnet (werkzeuge/baue-kuppel.py): Kuppel, Rhein, Stromstrecken, Ortsnamen, Firmenschild und die Maennchen. Beides benutzt dieselbe Kamera, deshalb sitzt jede Linie genau im Gelaende. Ablauf: die Kuppel baut sich auf, das Firmenschild setzt sich auf Musterdorf, die Orte erscheinen, der Rhein zeichnet sich blau, dann fliesst der Strom vom Betrieb in jeden Ort, die Maennchen laufen los und zum Schluss wird die ganze Karte gruen und warm. Losgetreten wird das erst, wenn der Abschnitt ins Bild kommt. Ohne JavaScript und bei "Bewegung reduzieren" steht das fertige Bild einfach da, es fehlt also nie etwas. ================================================================ */ .gebiet-bereich{display:flex;flex-direction:column;align-items:center} .gebiet-kopf{max-width:760px;text-align:center;margin-bottom:24px} .gebiet-kopf .karte-kopf{justify-content:center;margin-bottom:6px} .gebiet-kopf h2{margin:0} .gebiet-kopf p{margin-bottom:0;color:var(--nebentext)} .gebiet-fuss{display:flex;flex-direction:column;align-items:center;text-align:center} .gebiet-karte{position:relative;width:100%;max-width:900px;aspect-ratio:720/612; border-radius:16px;overflow:hidden;border:1px solid var(--linie); background:var(--grau)} .karten-quelle{position:absolute;right:12px;bottom:8px;margin:0; font-size:11.5px;color:var(--nebentext)} .kuppelkarte{display:block;width:100%;height:100%} html.anim .kuppelkarte:not(.laeuft) .kuppel{opacity:0} html.anim .kuppelkarte:not(.laeuft) .k-warmbild{opacity:0} .k-meridian,.k-ring,.k-kante,.k-fuss,.k-welle,.k-laufweg,.k-fluss, .k-stromspur{fill:none;stroke:var(--tinte);stroke-linecap:round; vector-effect:non-scaling-stroke} .k-meridian,.k-ring{stroke-width:1;opacity:.55} .k-meridian.k-hinten,.k-ring.k-hinten{opacity:.17} .k-kante{stroke-width:1.3;opacity:.65} .k-fuss{stroke-width:1.6;opacity:.75} .k-welle{stroke-width:1.6;opacity:0;transform-box:fill-box;transform-origin:50% 50%} .k-gitter{filter:drop-shadow(0 0 2px rgba(255,255,255,.8))} .k-randsaum{fill:none;stroke-width:3;vector-effect:non-scaling-stroke} .k-schattengitter{fill:none;stroke:var(--tinte);stroke-width:2.2;opacity:.2} /* Der Rhein, im Westen die Grenze zu Frankreich */ .k-fluss{stroke:var(--wasser);stroke-width:2.4;stroke-linejoin:round} .k-fluss-name{font-size:12.5px;font-weight:700;fill:var(--wasser); stroke:#fff;stroke-width:3;paint-order:stroke;stroke-linejoin:round; letter-spacing:.03em} /* Stromstrecken vom Betrieb in die Orte */ .k-stromspur{stroke:var(--signal-dunkel);stroke-width:1.8; filter:drop-shadow(0 0 3px rgba(253,182,44,.75))} .k-gebietslicht{opacity:0} /* Orte: Punkt mit weissem Hof, Name klar und gut lesbar */ .k-ort-punkt{fill:var(--tinte)} .k-ort-licht{fill:var(--signal);opacity:0} .k-ort-ring{fill:#fff} .k-ort-welle{fill:none;stroke:var(--tinte);stroke-width:1.4} .k-ort-punkt,.k-ort-licht,.k-ort-ring,.k-ort-welle{transform-box:fill-box; transform-origin:50% 50%} .k-ort-name{font-family:inherit;font-size:13px;font-weight:700; letter-spacing:.01em;fill:var(--tinte);stroke:#fff;stroke-width:3.4; paint-order:stroke;stroke-linejoin:round} .k-name-gross{font-size:16.5px;stroke-width:4} /* Sinnbilder (werkzeuge/sinnbilder.py): flache Silhouetten mit weisser Kontur. Das Muenster traegt seine Sandsteinfarbe, Wasser ist blau. */ .k-sb-flaeche{fill:var(--tinte);stroke:#fff;stroke-width:1.2; paint-order:stroke;stroke-linejoin:round} .k-sb-linie{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round} .k-muenster-bau{fill:#9d4a35;stroke:#fff;stroke-width:1.2; paint-order:stroke;stroke-linejoin:round} .k-sb-dampf{fill:none;stroke:var(--tinte);stroke-width:2;stroke-linecap:round} .k-sb-wasser,.k-sb-welle{fill:none;stroke:var(--wasser);stroke-width:2; stroke-linecap:round} .k-wolf-echt{stroke-width:16} .k-sb-fuehler{fill:none;stroke:var(--tinte);stroke-width:1.3;stroke-linecap:round} .k-sb-punkt{fill:var(--tinte)} .k-sb-haus{fill:#a3703f;stroke:#fff;stroke-width:1.2;paint-order:stroke} .k-sb-spirale{fill:none;stroke:#fff;stroke-width:1;stroke-linecap:round} .k-sb-schnabel{fill:#c2511f;stroke:#fff;stroke-width:.8;paint-order:stroke} .k-sb-bein{fill:none;stroke:#c2511f;stroke-width:1.6;stroke-linecap:round} /* Das Muenster ploppt erst mit Musterstadt auf, nicht schon am Anfang */ html.anim .kuppelkarte.laeuft .k-wahrzeichen{transform-box:fill-box; transform-origin:50% 100%; animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(2.75s + var(--i)*.05s)} html.anim .kuppelkarte:not(.laeuft) .k-wahrzeichen{opacity:0} /* Besonderheiten der Orte: erscheinen beim Klick auf den Ortsknopf */ .k-extra{opacity:0;pointer-events:none;transition:opacity .35s ease} .k-extra.zeigt{opacity:1} .k-extra-schatten{fill:var(--akzent);opacity:.2} .k-extra.zeigt .k-extra-bild{transform-box:fill-box;transform-origin:50% 100%; animation:k-pop .55s cubic-bezier(.2,1.4,.4,1) both} .k-extra.zeigt .k-extra-blase{animation:k-auf .35s ease .25s both} .k-blase-kasten{fill:#fff;stroke:var(--linie)} .k-blase-zipfel{fill:#fff} .k-blase-text{font-size:12.5px;font-weight:700;fill:var(--tinte)} /* Firmenschild, sitzt mit der Spitze genau auf dem Betrieb in Musterdorf */ .k-schild-tafel{fill:#fff;stroke:var(--akzent);stroke-width:1.2;stroke-linejoin:round} .k-schild-punkt{fill:var(--akzent)} .k-schild-schatten{fill:var(--akzent);opacity:.22} /* Die Maennchen: die Wege bleiben blass, darauf laufen sie hinaus. Auf der Karte sind sie nur gut zwanzig Punkte hoch, deshalb die weisse Kontur: sonst verschwinden sie im gruenen Gelaende. */ .k-laufweg{stroke-width:1.2;opacity:.22;stroke-dasharray:4 6} .k-fig-mantel{fill:var(--signal);stroke:#fff;stroke-width:1.1; paint-order:stroke;stroke-linejoin:round} /* Die weisse Kontur der Muetze ist duenner als die des Mantels: die Muetze ist nur ein paar Punkte gross, und mit 1 Punkt Weiss verschwand ihre schraege Spitze im eigenen Rand. */ .k-fig-muetze{fill:var(--signal);stroke:#fff;stroke-width:.7; paint-order:stroke;stroke-linejoin:round} .k-fig-kopf{fill:#fff;stroke:var(--tinte);stroke-width:1} .k-fig-arm,.k-fig-bein path{fill:none;stroke:var(--tinte);stroke-width:1.5; stroke-linecap:round;paint-order:stroke} .k-laeufer{filter:drop-shadow(0 1px 2px rgba(255,255,255,.95))} /* Beine und Arme schwingen um Huefte und Schulter, das ist jeweils der obere Rand ihres Kastens. Arme gegengleich zu den Beinen, sonst sieht es aus wie ein Spielzeug. */ .k-fig-bein,.k-fig-arm-g{transform-box:fill-box;transform-origin:50% 0%} html.anim .k-fig-bein-l,html.anim .k-fig-arm-r{ animation:k-schritt .62s ease-in-out infinite} html.anim .k-fig-bein-r,html.anim .k-fig-arm-l{ animation:k-schritt .62s ease-in-out infinite reverse} html.anim .k-figur{animation:k-wippen .31s ease-in-out infinite} .k-koerper,.k-randsaum,.k-glanz,.k-lauflicht,.k-schatten,.k-orte,.k-wege, .k-schild,.k-laeufer-alle,.k-fluss,.k-fluss-name,.k-stromspur, .k-warmbild{opacity:0} /* Ohne JavaScript und bei "Bewegung reduzieren" steht das fertige Bild da */ html:not(.anim) .k-koerper,html:not(.anim) .k-randsaum,html:not(.anim) .k-schatten, html:not(.anim) .k-orte,html:not(.anim) .k-wege,html:not(.anim) .k-schild, html:not(.anim) .k-warmbild,html:not(.anim) .k-fluss-name{opacity:1} html:not(.anim) .k-glanz{opacity:.4} html:not(.anim) .k-fluss{opacity:.85} html:not(.anim) .k-stromspur{opacity:.4} html:not(.anim) .k-gebietslicht{opacity:1} html:not(.anim) .k-ort-licht{opacity:1} html:not(.anim) .k-laeufer-alle{display:none} @keyframes k-ziehen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}} @keyframes k-auf{from{opacity:0}to{opacity:1}} @keyframes k-auf-glanz{from{opacity:0}to{opacity:.4}} @keyframes k-auf-fluss{from{opacity:0}to{opacity:.85}} @keyframes k-auf-spur{from{opacity:0}to{opacity:.4}} @keyframes k-welle{0%{transform:scale(.04);opacity:0} 14%{opacity:.5}100%{transform:scale(1.02);opacity:0}} @keyframes k-pop{from{transform:scale(0)}to{transform:scale(1)}} @keyframes k-lichtpop{0%{transform:scale(0);opacity:0} 55%{transform:scale(1.7);opacity:1}100%{transform:scale(1);opacity:1}} @keyframes k-ortwelle{0%{transform:scale(.35);opacity:0} 14%{opacity:.6}100%{transform:scale(3.6);opacity:0}} @keyframes k-schild-auf{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}} @keyframes k-schritt{0%{transform:rotate(17deg)}50%{transform:rotate(-17deg)} 100%{transform:rotate(17deg)}} @keyframes k-wippen{0%,100%{transform:translateY(0)}50%{transform:translateY(-.5px)}} @keyframes k-lauf{0%{transform:translateX(0);opacity:0} 5%{opacity:1}30%{transform:translateX(1440px);opacity:1} 36%{transform:translateX(1440px);opacity:0} 100%{transform:translateX(1440px);opacity:0}} /* Ablauf: 1. Impuls ueber das Gebiet 2. Kuppelfuss 3. Laengslinien 4. Ringe 5. Glas, Schatten, Lichtsaum 6. Firmenschild 7. Orte 8. Rhein 9. Strom fliesst in die Orte 10. Maennchen 11. Farbe */ html.anim .kuppelkarte.laeuft .k-welle{animation:k-welle 1.5s cubic-bezier(.2,.7,.3,1) both} html.anim .kuppelkarte.laeuft .k-welle2{animation-delay:.4s} html.anim .kuppelkarte.laeuft .k-welle3{animation-delay:.8s} html.anim .kuppelkarte.laeuft .k-fuss{stroke-dasharray:1; animation:k-ziehen 1.15s cubic-bezier(.4,0,.2,1) .2s both} html.anim .kuppelkarte.laeuft .k-meridian{stroke-dasharray:1; animation:k-ziehen 1s cubic-bezier(.3,0,.2,1) both; animation-delay:calc(.7s + var(--i)*.05s)} html.anim .kuppelkarte.laeuft .k-ring{stroke-dasharray:1; animation:k-ziehen .85s cubic-bezier(.3,0,.2,1) both; animation-delay:calc(1.35s + var(--i)*.09s)} html.anim .kuppelkarte.laeuft .k-koerper{animation:k-auf 1.3s ease 1.95s both} html.anim .kuppelkarte.laeuft .k-schatten{animation:k-auf 1.2s ease 2.05s both} html.anim .kuppelkarte.laeuft .k-randsaum{animation:k-auf 1.2s ease 2.15s both} html.anim .kuppelkarte.laeuft .k-kante{stroke-dasharray:1; animation:k-ziehen 1.1s cubic-bezier(.4,0,.2,1) 1.9s both} html.anim .kuppelkarte.laeuft .k-glanz{animation:k-auf-glanz 1.1s ease 2.35s both} html.anim .kuppelkarte.laeuft .k-schild{transform-box:fill-box;transform-origin:50% 100%; animation:k-schild-auf .7s cubic-bezier(.2,1.3,.4,1) 2.2s both} html.anim .kuppelkarte.laeuft .k-orte{opacity:1} html.anim .kuppelkarte.laeuft .k-ort-punkt,html.anim .kuppelkarte.laeuft .k-ort-ring{ animation:k-pop .45s cubic-bezier(.2,1.5,.4,1) both; animation-delay:calc(2.6s + var(--i)*.05s)} html.anim .kuppelkarte.laeuft .k-ort-welle{animation:k-ortwelle 1s ease-out both; animation-delay:calc(2.6s + var(--i)*.05s)} html.anim .kuppelkarte.laeuft .k-fluss{stroke-dasharray:1; animation:k-ziehen 1.7s ease-out both, k-auf-fluss .6s ease both; animation-delay:calc(3.1s + var(--i)*.12s)} html.anim .kuppelkarte.laeuft .k-fluss-name{animation:k-auf .7s ease 4.2s both} html.anim .kuppelkarte.laeuft .k-stromspur{stroke-dasharray:1; animation:k-ziehen var(--t) cubic-bezier(.35,0,.45,1) both, k-auf-spur .35s ease both; animation-delay:calc(3.8s + var(--i)*.06s)} /* Im Ort geht das Licht an, sobald der Strom dort ankommt */ html.anim .kuppelkarte.laeuft .k-ort-licht{ animation:k-lichtpop .6s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(3.8s + var(--i)*.06s + var(--t))} html.anim .kuppelkarte.laeuft .k-ort-name{animation:k-auf .45s ease both; animation-delay:calc(2.6s + var(--i)*.05s)} html.anim .kuppelkarte.laeuft .k-wege{animation:k-auf 1s ease 6.0s both} html.anim .kuppelkarte.laeuft .k-laeufer-alle{animation:k-auf 1s ease 6.3s both} /* Zum Schluss wird aus der grauen Karte eine gruene, warme Landschaft */ html.anim .kuppelkarte.laeuft .k-warmbild{animation:k-auf 2s ease 7.2s both} html.anim .kuppelkarte.laeuft .k-gebietslicht{animation:k-auf 2.2s ease 7.4s both} html.anim .kuppelkarte.laeuft .k-lauflicht{animation:k-lauf 11s ease-in-out 9.6s infinite} @media (prefers-reduced-motion:reduce){ .kuppelkarte *{animation:none !important} .kuppelkarte .k-koerper,.kuppelkarte .k-randsaum,.kuppelkarte .k-schatten, .kuppelkarte .k-orte,.kuppelkarte .k-wege,.kuppelkarte .k-schild, .kuppelkarte .k-warmbild,.kuppelkarte .k-fluss-name, .kuppelkarte .k-ort-licht,.kuppelkarte .k-gebietslicht{opacity:1} .kuppelkarte .k-glanz{opacity:.4} .kuppelkarte .k-fluss{opacity:.85} .kuppelkarte .k-stromspur{opacity:.4} .kuppelkarte .k-welle,.kuppelkarte .k-ort-welle{opacity:0} .kuppelkarte .k-laeufer-alle{display:none} } /* Ortsliste unter der Karte */ .ortsliste{list-style:none;display:flex;flex-wrap:wrap;justify-content:center; gap:9px;margin:22px 0 18px;padding:0;max-width:900px} .ortsliste li{list-style:none} .orts-knopf{background:#fff;border:1px solid var(--linie);border-radius:999px; padding:7px 14px;font-size:15px;color:var(--tinte);font-family:inherit; cursor:pointer;transition:border-color .15s,transform .15s} .orts-knopf:hover{border-color:var(--akzent);transform:translateY(-1px)} .gebiet-hinweis{color:var(--nebentext);font-size:15.5px;margin:0 0 18px} .fuss-gebiet{margin-top:14px;font-size:14.5px;line-height:1.55} .fuss-gebiet strong{color:#fff} .fusszeile a.fuss-gebiet-link{display:inline;padding:0;text-decoration:underline} /* ================================================================ Haus im Roentgenblick: der Wow-Effekt im Heldenbild (Elektro Mustermann, 04.09.2026) Statt eines Wohnzimmerfotos steht im Seitenkopf jetzt das, was ein Elektriker sieht: das Haus im Schnitt mit seiner ganzen Elektrik. Die Zeichnung kommt aus werkzeuge/baue-hausschnitt.py. Ablauf: Haus zeichnen, Strom vom Hausanschluss in den Zaehlerschrank, Hauptschalter umlegen, Impulse laufen durch alle Leitungen, und wo einer ankommt, geht etwas an: Licht, Speicher, Wallbox, Netzwerk, Photovoltaik. Nach gut sechs Sekunden steht alles hell da und die Bewegung hoert auf (Regel: keine Dauerschleifen). Bei "Bewegung reduzieren" und ohne JavaScript steht sofort das fertige, erleuchtete Haus da. Farben: heller Grund und dunkelblaue Linien wie auf der ganzen Seite, Strom und Licht im Gelb des Betriebs. Kein Schwarz. ================================================================ */ .held-zeichnung{background:var(--akzent-blass)} .hausschnitt{display:block;width:100%;height:100%} .h-grund{fill:var(--akzent-blass)} /* Die Fuellung wird an jeder Klasse selbst gesetzt. Eine allgemeine Regel wie ".hausschnitt path{fill:none}" waere staerker als die Klassen und wuerde Lichtkegel und Lampenschirme unsichtbar machen. */ .hausschnitt path,.hausschnitt circle,.hausschnitt rect,.hausschnitt ellipse{ stroke-linecap:round;stroke-linejoin:round} .h-bau{fill:none;stroke:var(--akzent);stroke-width:3.4} .h-boden{fill:none;stroke:var(--akzent);stroke-width:3.4} .h-boden-strich{fill:none;stroke:var(--akzent);stroke-width:2;opacity:.3} .h-erder{fill:none;stroke:var(--akzent);stroke-width:2.4;opacity:.45} .h-fein{fill:none;stroke:var(--akzent);stroke-width:2;opacity:.55} .h-kasten{fill:var(--papier);stroke:var(--akzent);stroke-width:2.6} .h-kasten-linie{fill:none;stroke:var(--akzent);stroke-width:2;opacity:.5} .h-kasten-text{font-family:inherit;font-size:15px;font-weight:700; fill:var(--akzent);opacity:.65;stroke:none} .h-hebel{fill:none;stroke:var(--akzent);stroke-width:5} .h-hebel-punkt{fill:var(--akzent);stroke:none} .h-sicherung{fill:var(--akzent-blass);stroke:var(--akzent);stroke-width:1.4} .h-schirm{fill:var(--akzent);stroke:none} .h-kegel{fill:url(#h-kegel);stroke:none;opacity:0} .h-glut{fill:url(#h-glut);stroke:none;opacity:0} .h-voute-linie{fill:none;stroke:var(--akzent);stroke-width:4} .h-modul{fill:var(--akzent);stroke:var(--akzent);stroke-width:1.6;opacity:.85} .h-sonne-kern{fill:var(--signal);stroke:none;opacity:0} .h-strahl{fill:none;stroke:var(--signal);stroke-width:4;opacity:0} .h-funk{fill:none;stroke:var(--signal);stroke-width:3.4;opacity:0} .h-zelle{fill:var(--signal);stroke:none;opacity:0} .h-ladebalken{fill:var(--signal);stroke:none;opacity:0} .h-wr-punkt,.h-wb-punkt,.h-melder-punkt{fill:var(--akzent);stroke:none} /* Die Leitungen liegen blass im Bau, der Impuls laeuft hell darauf */ .h-kabel{fill:none;stroke:var(--signal-dunkel);stroke-width:3.4;opacity:.22} .h-puls{fill:none;stroke:var(--signal);stroke-width:5; stroke-dasharray:.14 1;stroke-dashoffset:.14;opacity:0} /* ---- Ruhezustand: ohne Bewegung steht alles hell und fertig da ---- */ html:not(.anim) .h-kegel,html:not(.anim) .h-glut,html:not(.anim) .h-sonne-kern, html:not(.anim) .h-strahl,html:not(.anim) .h-funk,html:not(.anim) .h-zelle, html:not(.anim) .h-ladebalken{opacity:1} html:not(.anim) .h-kabel{opacity:.55} html:not(.anim) .h-schirm,html:not(.anim) .h-modul, html:not(.anim) .h-sicherung{fill:var(--signal)} html:not(.anim) .h-voute-linie{stroke:var(--signal)} html:not(.anim) .h-wr-punkt,html:not(.anim) .h-wb-punkt, html:not(.anim) .h-melder-punkt{fill:var(--signal)} html:not(.anim) .h-hebel-lager{transform:rotate(38deg); transform-box:view-box;transform-origin:1062px 618px} /* ---- Der Ablauf ---- */ @keyframes h-auf{from{opacity:0}to{opacity:1}} @keyframes h-auf-halb{from{opacity:0}to{opacity:.55}} @keyframes h-kabel-an{from{opacity:.22}to{opacity:.55}} @keyframes h-puls{0%{opacity:0;stroke-dashoffset:.14} 8%{opacity:1}92%{opacity:1}100%{opacity:0;stroke-dashoffset:-1}} @keyframes h-schalter{from{transform:rotate(0)}to{transform:rotate(38deg)}} @keyframes h-an-gelb{from{fill:var(--akzent)}to{fill:var(--signal)}} @keyframes h-an-gelb-blass{from{fill:var(--akzent-blass)}to{fill:var(--signal)}} @keyframes h-an-gelb-strich{from{stroke:var(--akzent)}to{stroke:var(--signal)}} @keyframes h-pop{0%{opacity:0;transform:scale(.4)} 60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}} @keyframes h-blinken{0%,100%{opacity:0}12%,26%{opacity:1}40%{opacity:0} 52%,66%{opacity:1}80%{opacity:0}} html.anim .hausschnitt .h-huelle{animation:h-auf .9s ease both} html.anim .hausschnitt .h-moebel{animation:h-auf-halb .9s ease .5s both} html.anim .hausschnitt .h-anlagen{animation:h-auf .7s ease .8s both} html.anim .hausschnitt .h-leitungen{animation:h-auf .7s ease 1.1s both} /* Der Impuls: Verzug und Dauer stehen an jeder Leitung selbst */ html.anim .hausschnitt .h-puls{ animation:h-puls var(--d) linear calc(1.6s + var(--v)) both} html.anim .hausschnitt .h-kabel{ animation:h-kabel-an .5s ease calc(1.6s + var(--v) + var(--d)) both} /* Hauptschalter: geht um, sobald der Strom vom Netz da ist */ html.anim .hausschnitt .h-hebel-lager{transform-box:view-box; transform-origin:1062px 618px; animation:h-schalter .35s cubic-bezier(.2,1.5,.4,1) 2.7s both} html.anim .hausschnitt .h-sicherung{ animation:h-an-gelb-blass .3s ease both; animation-delay:calc(3.0s + var(--i)*.045s)} /* Licht an, sobald der Impuls der jeweiligen Leitung ankommt */ html.anim .hausschnitt .h-licht .h-glut{ animation:h-auf .55s ease calc(1.6s + var(--v)) both} html.anim .hausschnitt .h-licht .h-kegel{ animation:h-auf .75s ease calc(1.65s + var(--v)) both} html.anim .hausschnitt .h-licht .h-schirm{ animation:h-an-gelb .35s ease calc(1.6s + var(--v)) both} html.anim .hausschnitt .h-licht .h-voute-linie{ animation:h-an-gelb-strich .35s ease calc(1.6s + var(--v)) both} /* Photovoltaik: erst die Sonne, dann leuchten die Module auf */ html.anim .hausschnitt .h-sonne-kern{animation:h-auf .8s ease 2.2s both} html.anim .hausschnitt .h-strahl{transform-box:fill-box;transform-origin:50% 50%; animation:h-pop .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay:calc(2.5s + var(--i)*.06s)} html.anim .hausschnitt .h-modul{animation:h-an-gelb .5s ease both; animation-delay:calc(3.0s + var(--i)*.09s)} /* Speicher und Auto fuellen sich, Zelle fuer Zelle */ html.anim .hausschnitt .h-zelle{animation:h-auf .35s ease both; animation-delay:calc(5.0s + var(--i)*.22s)} html.anim .hausschnitt .h-ladebalken{animation:h-auf .35s ease both; animation-delay:calc(5.5s + var(--i)*.2s)} html.anim .hausschnitt .h-wr-punkt{animation:h-an-gelb .4s ease 4.0s both} html.anim .hausschnitt .h-wb-punkt{animation:h-an-gelb .4s ease 5.2s both} /* Netzwerk funkt, Rauchwarnmelder meldet sich einmal */ html.anim .hausschnitt .h-funk{animation:h-auf .5s ease both; animation-delay:calc(4.4s + var(--i)*.16s)} html.anim .hausschnitt .h-melder-punkt{ animation:h-an-gelb .3s ease 4.8s both, h-blinken 2.4s ease 4.8s both} @media (prefers-reduced-motion:reduce){ .hausschnitt *{animation:none !important} .hausschnitt .h-kegel,.hausschnitt .h-glut,.hausschnitt .h-sonne-kern, .hausschnitt .h-strahl,.hausschnitt .h-funk,.hausschnitt .h-zelle, .hausschnitt .h-ladebalken{opacity:1} .hausschnitt .h-kabel{opacity:.55} .hausschnitt .h-puls{opacity:0} .hausschnitt .h-schirm,.hausschnitt .h-modul, .hausschnitt .h-sicherung{fill:var(--signal)} .hausschnitt .h-voute-linie{stroke:var(--signal)} .hausschnitt .h-wr-punkt,.hausschnitt .h-wb-punkt, .hausschnitt .h-melder-punkt{fill:var(--signal)} .hausschnitt .h-hebel-lager{transform:rotate(38deg); transform-box:view-box;transform-origin:1062px 618px} } /* Gebietskarte auf dem Handy: Die Karte wird klein, deshalb werden die Ortsnamen groesser gesetzt und die unwichtigeren ganz weggelassen. Auch die Maennchen werden groesser, sonst sind sie nur noch Punkte. */ @media (max-width:900px){ .k-ort-name{font-size:19px;stroke-width:4.5} .k-name-gross{font-size:23px;stroke-width:5} .k-fluss-name{font-size:18px;stroke-width:4} .k-name-klein{display:none} .k-fig-mass{transform-box:fill-box;transform-origin:50% 100%;transform:scale(1.8)} .k-blase-text{font-size:16px} .gebiet-karte{max-width:none} } /* ================================================================ Startbuehne: die Flaeche rechts oben auf der Startseite laeuft in Dauerschleife durch drei Bilder (Wunsch Torben, 04.09.2026): drei Sekunden Film von der Mannschaft, dann die Hauszeichnung mit dem Strom, zuletzt das Logo mit dem gruessenden Maennchen. Geschaltet wird im Skript am Seitenende. Die drei Bilder liegen uebereinander und werden ueber die Deckkraft getauscht. Ohne Javascript bleibt das erste Bild stehen, es fehlt also nichts. ================================================================ */ .startbuehne{background:var(--akzent-blass)} .sb-bild{position:absolute;inset:0;opacity:0;transition:opacity .7s ease} .sb-bild[data-sb="1"]{opacity:1} .startbuehne.laeuft .sb-bild{opacity:0} .startbuehne.laeuft .sb-bild.zeigt{opacity:1} /* Das gerade nicht gezeigte Bild faengt keine Klicks ab (sonst laege der unsichtbare Filmkasten ueber der Hauszeichnung). */ .startbuehne.laeuft .sb-bild{pointer-events:none} .startbuehne.laeuft .sb-bild.zeigt{pointer-events:auto} /* ---------------------------------------------------------------- Film-Sicherung (Baustein aus dem Baukasten, hier am 14.09.2026 aufgelegt; Rueckmeldung Torben: "Die Mustermann Truppe ist nicht animiert") Safari startet Filme nicht immer von allein: im Stromsparmodus, im Datensparmodus und bei der Einstellung "nie automatisch abspielen". Chrome ist lockerer, deshalb faellt es beim Pruefen am Rechner nicht auf. Darum liegt ueber dem Film das Standbild der Mannschaft (.film-deckbild). Es geht erst weg, wenn der Film nachweislich laeuft (Klasse film-laeuft, setzt das Skript). Laeuft er nach 2,5 Sekunden nicht, erscheint unser eigener runder Knopf (.film-knopf) statt Safaris Abspielknopf. Geprueft wird mit werkzeuge/pruefe-film.mjs, Ziel "gesamt 0". ---------------------------------------------------------------- */ .film-buehne{position:relative;width:100%;height:100%} .film-buehne video{pointer-events:none} .film-buehne .film-deckbild{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;z-index:1;pointer-events:none;transition:opacity .5s ease} .film-buehne.film-laeuft .film-deckbild{opacity:0} .film-knopf{display:none;align-items:center;justify-content:center;gap:9px; padding:13px 22px;border-radius:999px;cursor:pointer;font:inherit;font-size:15px; font-weight:600;color:#fff;background:rgba(255,255,255,.12); border:2px solid rgba(255,255,255,.55);-webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);transition:background .3s ease,border-color .3s ease} .film-knopf:hover{background:rgba(255,255,255,.24);border-color:#fff} /* Runde Fassung fuer den Film im Bildkasten: nur das Dreieck, die Beschriftung steht im aria-label. */ .film-knopf-rund{position:absolute;right:16px;bottom:16px;z-index:3;padding:0; width:52px;height:52px;background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.8)} .film-buehne.film-blockiert .film-knopf{display:inline-flex} @media (prefers-reduced-motion:reduce){.film-buehne video{display:none}} /* Die Bewegungen im Haus und beim Gruss haengen an .zeigt. Nimmt das Skript die Klasse weg, stehen sie auf Null und fangen in der naechsten Runde von vorne an. Ohne diesen Griff liefe die Haus-Animation nur ein einziges Mal, naemlich beim Laden der Seite. */ .startbuehne .sb-haus:not(.zeigt) .hausschnitt *, .startbuehne .sb-gruss:not(.zeigt) .mg-winkt *{animation:none !important} /* Drittes Bild: Logo und Maennchen auf der Hausfarbe, beide auf einer Ebene (mittig zueinander, nicht das eine hoeher als das andere). */ .sb-gruss{background:var(--akzent)} .sb-gruss-innen{position:absolute;inset:0;display:flex;align-items:center; justify-content:center;gap:38px;padding:28px} .startbuehne .sb-logo{flex:none;width:auto;height:76px;object-fit:contain} .mg-winkt{flex:none;width:112px;height:274px;overflow:visible} .mg-winkt g[class^="mg-"]{transform-box:view-box} /* Die Gelenke wie beim laufenden Maennchen: die Namen folgen der Figur, nicht dem Bildschirm. Sein rechter Arm liegt fuer uns links. */ .mg-winkt .mg-arm-rechts,.mg-winkt .mg-oberarm-rechts{transform-origin:62px 166px} .mg-winkt .mg-unterarm-rechts{transform-origin:40px 234px} .mg-winkt .mg-arm-links,.mg-winkt .mg-oberarm-links{transform-origin:134px 164px} .mg-winkt .mg-unterarm-links{transform-origin:156px 232px} .mg-winkt .mg-kopf{transform-origin:96px 138px} .mg-winkt .mg-rumpf{transform-origin:100px 350px} .mg-winkt .mg-muetze{transform-origin:83px 30px} /* Arme und Beine sind dunkelgrau gezeichnet. Auf der dunklen Flaeche verschwanden sie voellig, und damit war vom Gruss nichts zu sehen (beim Pruefen am 04.09.2026 aufgefallen). Hier bekommen sie deshalb den hellen Strich. Kopf und Rumpf bleiben, wie sie sind: der Kopf ist weiss gefuellt und braucht seine dunklen Zuege, der Rumpf ist gelb. */ .sb-gruss .mg-winkt .mg-arm-links,.sb-gruss .mg-winkt .mg-arm-rechts, .sb-gruss .mg-winkt .mg-bein-links,.sb-gruss .mg-winkt .mg-bein-rechts{stroke:#fff} /* Der Gruss selbst: die Figur steht still, der rechte Arm geht an die Muetze, nimmt sie ab, haelt sie kurz und setzt sie wieder auf. Eigene Keyframes statt der Bewegungen des laufenden Maennchens weiter oben: hier ist der Gruss der Hoehepunkt der Schleife und muss deutlich lesbar sein, dort ist er eine Nebensache im Vorbeigehen. Die Muetze kippt staerker zur Seite und bleibt laenger oben. Weiter als 30 Einheiten kann sie nicht steigen, sonst reicht der Arm nicht mehr an sie heran. */ @keyframes sb-muetze{ 0%,10%{transform:translate(0,0) rotate(0deg)} 30%,72%{transform:translate(-10px,-30px) rotate(-34deg)} 90%,100%{transform:translate(0,0) rotate(0deg)} } @keyframes sb-schulter{ 0%{transform:rotate(0deg)} 28%,74%{transform:rotate(-200deg)} 100%{transform:rotate(0deg)} } @keyframes sb-ellbogen{ 0%{transform:rotate(0deg)} 30%,72%{transform:rotate(25deg)} 100%{transform:rotate(0deg)} } @keyframes sb-nicken{ 0%,12%{transform:rotate(0deg)} 32%,70%{transform:rotate(7deg)} 88%,100%{transform:rotate(0deg)} } html.anim .startbuehne .sb-gruss.zeigt .mg-oberarm-rechts{ animation:sb-schulter 3.8s ease-in-out .4s both} html.anim .startbuehne .sb-gruss.zeigt .mg-unterarm-rechts{ animation:sb-ellbogen 3.8s ease-in-out .4s both} html.anim .startbuehne .sb-gruss.zeigt .mg-muetze{ animation:sb-muetze 3.8s ease-in-out .4s both} html.anim .startbuehne .sb-gruss.zeigt .mg-kopf{ animation:sb-nicken 3.8s ease-in-out .4s both} html.anim .startbuehne .sb-gruss.zeigt .mg-rumpf{ animation:mg-wippen 1.9s ease-in-out .4s 2} @media (max-width:900px){ .sb-gruss-innen{gap:24px;padding:20px} .startbuehne .sb-logo{height:58px} .mg-winkt{width:82px;height:200px} } @media (prefers-reduced-motion:reduce){ .startbuehne .sb-bild{transition:none} html.anim .startbuehne .sb-gruss.zeigt *{animation:none !important} } /* ================================================================ Jobs-Seite: vier Kennzahlen in einer Reihe. Vier Kaesten gehen bei vier, zwei und (auf dem Handy) zwei Spalten ohne angebrochene Reihe auf. ================================================================ */ .zahlenreihe{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;align-items:stretch} .zahl{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:24px 18px; text-align:center;display:flex;flex-direction:column;justify-content:center;min-height:118px} .zahl strong{display:block;font-size:36px;line-height:1.1;color:var(--akzent);margin-bottom:6px} .zahl span{color:var(--nebentext);font-size:15px;line-height:1.35} /* Der Formularkasten der Kurzbewerbung hat einen Satz unter der Ueberschrift */ .formular-kasten>p{color:var(--nebentext);margin-top:-6px;margin-bottom:18px} @media (max-width:900px){.zahlenreihe{grid-template-columns:1fr 1fr;gap:14px}}