/* Baukasten-Gestaltung für Kundenwebseiten. ANPASSEN: (1) die Farben unter :root, (2) die Schriftnamen und die Pfade in den @font-face-Zeilen, (3) überall mustermann 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:"Jost";src:url("/referenzen/eiscafe/schriften/Jost-Variabel.woff2") format("woff2");font-weight:300 700;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/referenzen/eiscafe/schriften/PlayfairDisplay-Variabel.woff2") format("woff2");font-weight:400 900;font-style:normal;font-display:swap} @font-face{font-family:"Playfair Display";src:url("/referenzen/eiscafe/schriften/PlayfairDisplay-Kursiv-Variabel.woff2") format("woff2");font-weight:400 900;font-style:italic;font-display:swap} :root{ /* Mustermann: Schiefer (Wand hinter der Theke), Gold (Wandschild), Creme wie Fior di latte, blasses Salbeigruen (Innenwaende). Schwarz/Anthrazit ist echte Kundenfarbe (Muster 3a), deshalb duerfen dunkle Flaechen sein. */ --tinte:#272F3A; --waerme:#E2BE49; /* Signalfarbe Gold: Kanten, Knoepfe */ --waerme-tief:#86670F; /* Gold dunkel genug fuer Schrift */ --wasser:#2f7fbf; /* Fluesse auf der Gelaendekarte */ --akzent:#86670F; /* 4,9:1 auf --papier */ --akzent-dunkel:#6E550F; --akzent-blass:#F6EFDC; /* sehr helle Tönung, für Flächen */ --akzent-hell:#EFE3BF; /* helle Tönung, für Text und Knöpfe auf Akzentfläche */ --papier:#FBF8F2; --grau:#EEF1EB; --linie:#D6CFBF; --nebentext:#565D66; /* Schattenfarbe: die dunkle Firmenfarbe als RGB-Zahlen, damit Schatten nie schwarz sind (Torben, 04.09.2026). ANPASSEN auf --akzent-dunkel des Kunden. Benutzung: rgba(var(--schatten),.24) */ --schatten:39,47,58; /* Maschinenfarben. Ein Bagger ist ockergelb und steht auf dunklen Ketten, egal welche Hausfarbe der Betrieb hat (Torben, 04.09.2026). Diese Farben gehoeren dem Geraet, nicht der Marke, und werden deshalb nie an die Firmenfarbe angepasst. */ --maschine-gelb:#e0a12a; --maschine-stahl:#2b3033; --maschine-rolle:#8d9296; } *{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} /* KEINE Silbentrennung, nirgends (Torben, 06.09.2026: "Globale Regel, wir wollen keine Worte trennen"). Ein Wort wird nie mit Bindestrich umbrochen und auch nicht stillschweigend mitten durchgeschnitten. Lange deutsche Woerter loest man mit einer kuerzeren Ueberschrift, nicht mit einer Trennung. Einzelheiten: ~/.claude/CLAUDE.md, "Keine Worttrennung". */ h1,h2,h3,h4,p,li,dt,dd,th{hyphens:manual;overflow-wrap:normal;word-break:keep-all} /* Ein Begriff, der nie auseinandergerissen werden darf, bekommt die Klasse. Gesetzt wird sie vom Generator (Funktion zusammenhalten, Liste ZUSAMMEN). inline-block statt nowrap (registerpilot, 11.09.2026): der Begriff rutscht als Ganzes in die naechste Zeile und bricht nur, wenn er selbst breiter als die Zeile ist, statt am 320-px-Handy aus dem Bild zu ragen. Steht er direkt in einem Flex-Kasten, den ganzen Satz in einen span packen, sonst werden die Textstuecke zu Kaesten nebeneinander. Muster-Dokument Abschnitt 1a Punkt 8. */ .zusammen{display:inline-block;text-decoration:inherit} /* Ausnahme: E-Mail-Adressen und Links sind keine Woerter, sondern Zeichenketten. Die duerfen umbrechen, sonst ragen sie aus dem Bild. */ a,td{overflow-wrap:break-word} 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 helle Flaeche in der Firmenfarbe. Sie loest den frueheren schwarzen Abschnitt ab (Torben, 04.09.2026: kein Schwarz, wenn der Kunde kein Schwarz in seinen Farben hat) und bringt Wechsel in den Seitenrhythmus, ohne dass die Seite dunkel wird. */ .abschnitt-warm{background:var(--akzent-blass)} /* Kraeftige Flaeche in der Firmenfarbe (Schlussaufruf). Sie wird oben mit einer Kante in der Signalfarbe abgesetzt, statt weich ins Dunkle zu verlaufen. */ .abschnitt-akzent{background:var(--akzent);color:#fff;border-top:5px solid var(--waerme)} .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 */ .kopfzeile{position:sticky;top:0;background:rgba(255,255,255,.96);backdrop-filter:blur(6px); border-bottom:1px solid var(--linie);z-index:50} .kopf-innen{display:flex;align-items:center;justify-content:space-between;gap:18px;min-height:78px} .marke img{width:210px;height:auto} .hauptmenue{display:flex;align-items:center;gap:26px;font-weight:700;font-size:16px} .hauptmenue a{text-decoration:none} .hauptmenue a:not(.knopf):hover{color:var(--akzent);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:var(--tinte);margin:5px 0} /* Leistungen-Untermenue in der Kopfzeile. PFLICHT auf jeder Kundenseite (Torben, 04.09.2026, Anlass Elektro Mustermann): Von einer Leistungsseite kommt man sonst nur ueber die Uebersicht zur naechsten Leistung. STOLPERSTEIN: Der Menuepunkt MUSS auf die volle Hoehe der Kopfzeile gezogen werden (align-self:stretch). Sonst bleibt zwischen Menuepunkt und Untermenue eine Luecke, in der das Zeigen abreisst und die Liste sofort wieder zuklappt. Bauanleitung: ~/.claude/kundenwebseite-muster.md Abschnitt 3b. */ .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:inherit;cursor:pointer;border-radius:6px} .unter-schalter svg{transition:transform var(--dur-1)} .unter-schalter:hover{color:var(--akzent)} .unter-schalter:focus-visible{outline:2px solid var(--akzent);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(--papier);border:1px solid var(--linie); border-top:4px solid var(--akzent);border-radius:0 0 12px 12px; box-shadow:0 20px 44px rgba(var(--schatten),.20)} .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;white-space:nowrap} .untermenue a .ico{color:var(--akzent)} .hauptmenue .untermenue a:hover,.hauptmenue .untermenue a:focus-visible{ background:var(--akzent-blass);color:var(--akzent);text-decoration:none} .untermenue .unter-alle{color:var(--akzent)} /* Knöpfe */ .knopf{display:inline-flex;align-items:center;justify-content:center;gap:9px; background:var(--akzent);color:#fff;text-decoration:none;font-weight:700;font-size:16px; padding:13px 24px;border-radius:8px;border:2px solid var(--akzent);cursor:pointer; transition:background var(--dur-1),border-color var(--dur-1),opacity var(--dur-1)} .knopf:hover{background:var(--akzent-dunkel);border-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:#fff;color:var(--akzent);border-color:#fff} .knopf-weiss:hover{background:var(--akzent-hell);border-color:var(--akzent-hell);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} .held-raster{display:grid;grid-template-columns:1.05fr 1fr;gap:48px;align-items:stretch} .held-text{display:flex;flex-direction:column;justify-content:center} .vorzeile{font-weight:700;font-size:13px;letter-spacing:.07em;text-transform:uppercase; color:var(--akzent);margin-bottom:14px} .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 eine Firmenfarbe, nie Schwarz. ANPASSEN: Farbe und Schriftfarbe so waehlen, dass der Kontrast stimmt (helle Signalfarbe mit dunkler Schrift, dunkle Signalfarbe mit weisser Schrift). Davor und danach laeuft ein weicher Verlauf aus dem Weiss in diese Farbe. */ .band{background:var(--waerme-tief);color:#fff;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:#fff;text-decoration:none} .band a:hover{color:var(--akzent-hell);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 var(--dur-1),box-shadow var(--dur-1),border-color var(--dur-1)} .kachel:hover{transform:translateY(-3px);box-shadow:0 10px 28px rgba(135,33,36,.14);border-color:var(--akzent)} .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 var(--dur-3) ease} .kachel:hover .kachel-bildrahmen img{transform:scale(1.06)} /* Erster Entwurf: die Kachel ist ein Kasten ohne Link, weil es die Leistungsseite noch nicht gibt. Sie sieht gleich aus, hebt sich beim Ueberfahren aber nicht an, damit niemand vergeblich klickt. */ .kachel-still{cursor:default} .kachel-still:hover{transform:none;box-shadow:none;border-color:var(--linie)} .kachel-still:hover .kachel-bildrahmen img{transform:none} /* 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(--akzent);color:#fff;font-weight:700;font-size:19px;flex:none} .schritt h3{margin:0} .schritt p{margin:0;color:var(--nebentext);font-size:15.5px} /* ---- Ablauf-Kästchen: der orange Rahmen läuft durch -------------------- Beim Herunterscrollen zeichnet sich um jedes Kästchen ein oranger Rahmen, läuft über das Verbindungsstück zum nächsten und bleibt danach stehen. Am Ende sind alle Kästchen umrandet und beim letzten Schritt erscheint ein grünes Häkchen. Läuft einmal, nicht in Dauerschleife. Die Farbwelt steckt in Variablen, damit derselbe Baustein bei anderen Gewerken anders klingt: Wärme (Standard), Strom, Wasser. */ .ablauf{ --glut-a:#ffa02e; /* heller Anfang der Glut */ --glut-b:#f9481d; /* tiefes Rot (Chroma 0.22, gleicher Farbton wie das fruehere #ff3d00) */ --rohr:rgba(var(--schatten),.12); --fertig:#16a34a; /* Grün für das Häkchen am Schluss */ /* Zeiten als Vielfache von --dur-takt (Farbverlauf-Regel 4, Erzaehl- Animation). Setzt farbverlaeufe.css als erstes Stylesheet voraus. */ --zeichnen:calc(var(--dur-takt) * 1.4); /* ein Rahmen umlaufen */ --versatz:calc(var(--dur-takt) * 1.2); /* Abstand von Kästchen zu Kästchen */ } .ablauf-strom{--glut-a:#7cc4ff;--glut-b:#1f7ae0} .ablauf-wasser{--glut-a:#6fcbe8;--glut-b:#1b7fa8} .ablauf-garten{--glut-a:#5b82ff;--glut-b:#1236ab} /* Gartenbau Mustermann, Logo-Blau */ .ablauf-rot{--glut-a:#c94a4e;--glut-b:#6b1a1d} /* Weinrot, Alois Friedel */ .ablauf-beratung{--glut-a:#4f86d6;--glut-b:#123c7a} /* Firmenblau, Pro-Schuldnerberatung */ .schritt{position:relative;overflow:visible} .schritt-inhalt{position:relative;z-index:1;display:flex;flex-direction:column;height:100%} /* Der Rahmen liegt genau auf der Kante des Kästchens */ .rahmen{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible; pointer-events:none;z-index:2} .rahmen rect{fill:none;stroke:var(--glutstrich);stroke-width:2; stroke-dasharray:100;stroke-dashoffset:100} .rahmen-halo{stroke-width:7;opacity:.18} .laeuft .rahmen rect{animation:rahmen-zeichnen var(--zeichnen) var(--ease-in-out) forwards; animation-delay:calc(var(--nr) * var(--versatz))} @keyframes rahmen-zeichnen{to{stroke-dashoffset:0}} /* Verbindungsstück in der Mitte zwischen zwei Kästchen */ .schritt::before,.schritt::after{content:"";position:absolute;top:50%;right:-20px; width:20px;height:3px;margin-top:-1.5px;border-radius:2px} .schritt::before{background:var(--rohr)} .schritt::after{background-color:var(--glut-b);background-image:linear-gradient(90deg in oklab,var(--glut-a),var(--glut-b)); transform:scaleX(0);transform-origin:left center} .laeuft .schritt::after{animation:strecke-fuellen var(--dur-2) var(--ease-out) forwards; animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen))} .schritt:last-child::before,.schritt:last-child::after{display:none} @keyframes strecke-fuellen{to{transform:scaleX(1)}} /* Grünes Häkchen: erscheint, wenn der letzte Schritt umrandet ist */ .schritt-zahl{position:relative} .zahl-ziffer{position:relative} .fertig-haken{position:absolute;inset:0;border-radius:50%;background:var(--fertig); display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.5)} .fertig-haken svg{width:24px;height:24px} .laeuft .fertig-haken{animation:haken-stempel var(--dur-3) var(--ease-pop) forwards; animation-delay:calc(var(--nr) * var(--versatz) + var(--zeichnen) + var(--dur-1))} @keyframes haken-stempel{ 0%{opacity:0;transform:scale(.5)} 60%{opacity:1;transform:scale(1.14)} 100%{opacity:1;transform:scale(1)} } /* Ohne JavaScript und bei "Bewegung reduzieren" steht das fertige Bild da */ html:not(.js) .rahmen rect, html:not(.js) .schritt::after{stroke-dashoffset:0;transform:scaleX(1)} html:not(.js) .fertig-haken{opacity:1;transform:scale(1)} /* Enger Bildschirm: zwei Kästchen nebeneinander, da passt kein Verbindungsstück dazwischen. */ @media (max-width:1000px){ .schritt::before,.schritt::after{display:none} } /* Handy: die Kästchen stehen untereinander, das Verbindungsstück steht senkrecht zwischen ihnen. */ @media (max-width:560px){ .schritt::before,.schritt::after{display:block;top:auto;bottom:-20px; left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px} .schritt::after{background-image:linear-gradient(180deg in oklab,var(--glut-a),var(--glut-b)); transform:scaleY(0);transform-origin:top center} .laeuft .schritt::after{animation-name:strecke-fuellen-hoch} html:not(.js) .schritt::after{transform:scaleY(1)} } @keyframes strecke-fuellen-hoch{to{transform:scaleY(1)}} @media (prefers-reduced-motion:reduce){ .laeuft .rahmen rect,.laeuft .schritt::after,.laeuft .fertig-haken{animation:none} .rahmen rect{stroke-dashoffset:0} .schritt::after{transform:scaleX(1)} .fertig-haken{opacity:1;transform:scale(1)} } @media (prefers-reduced-motion:reduce) and (max-width:560px){ .schritt::after{transform:scaleY(1)} } /* ---- Stromkreis durch die Kacheln --------------------------------------- Torbens Regel (04.09.2026): Der Ablauf-Abschnitt steht nie still, man muss sehen, WIE der Prozess vonstatten geht. Bei einem Heizungsbetrieb läuft dafür ein Rahmen um die Kästchen (Block darüber), bei einem Elektrobetrieb ist es dieser Stromkreis. Bauanleitung: werkzeuge/bausteine-ablauf.py. 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; /* ANPASSEN: Farbe des fliessenden Stroms als RGB-Zahlen (Signalfarbe des Kunden) und der helle Kern des Lichtpunkts. Nie Schwarz. */ --strom-rgb:232,114,42; --strom-kern:#fff3e2; --leiter-ruhe:rgba(var(--schatten),.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 in oklab, rgba(var(--strom-rgb),0) 0 48%, rgba(var(--strom-rgb),.80) 66%, var(--strom-kern) 78%, rgba(var(--strom-rgb),.80) 90%, rgba(var(--strom-rgb),0) 100%); --strom-hoch:linear-gradient(180deg in oklab, rgba(var(--strom-rgb),0) 0 48%, rgba(var(--strom-rgb),.80) 66%, var(--strom-kern) 78%, rgba(var(--strom-rgb),.80) 90%, rgba(var(--strom-rgb),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(var(--strom-rgb),.90)) drop-shadow(0 0 10px rgba(var(--strom-rgb),.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(var(--strom-rgb),0)} 30%{box-shadow:0 0 0 8px rgba(var(--strom-rgb),.30),0 0 22px 6px rgba(var(--strom-rgb),.60)} 100%{box-shadow:0 0 0 0 rgba(var(--strom-rgb),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 calc(var(--dur-takt) * 1.2) ease-out; animation-delay:calc((var(--nr) * .5 + .3) * var(--dur-takt))} } /* 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(var(--schatten),.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(var(--schatten),.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(var(--schatten),.32)} .vergleich-schild{position:absolute;bottom:14px;background:rgba(var(--schatten),.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(var(--schatten),.80);color:#fff;display:none; align-items:center;justify-content:center;cursor:pointer;transition:background var(--dur-1)} .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} /* 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 #e8d3d3;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 #cbc5c4;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 */ .zeichenband{background:var(--akzent);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 #fff;border-radius:5px;color:#fff;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} /* 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 calc(var(--dur-takt) * 64) 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)} /* Google-Karte. Standard ist die direkt ladende Fassung: dann braucht es nur .kartenfeld und .kartenfeld iframe. Die Klassen .karten-sperre, .karten-kasten und .karte-geladen gehoeren zur Zwei-Klick-Fassung. */ .kartenfeld{position:relative;margin-top:26px;border-radius:16px;overflow:hidden; border:1px solid var(--linie);background:var(--grau);aspect-ratio:16/10} .kartenfeld img{width:100%;height:100%;object-fit:cover} .kartenfeld iframe{display:block;width:100%;height:100%;border:0} .karten-sperre{position:absolute;inset:0;display:flex;align-items:center;justify-content:center; padding:20px;background:rgba(255,255,255,.28)} .karten-kasten{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center; max-width:460px;padding:24px 26px;background:#fff;border:1px solid var(--linie); border-radius:14px;box-shadow:0 6px 24px rgba(var(--schatten),.12)} .karten-kasten p{margin:0;font-size:15px;color:var(--nebentext)} .karten-kasten p strong{font-size:18px;color:var(--tinte)} .karten-kasten .knopf{margin-top:8px} .karten-quelle{position:absolute;right:8px;bottom:6px;margin:0;font-size:11.5px; color:var(--nebentext);background:rgba(255,255,255,.8);padding:2px 7px;border-radius:6px} .karte-geladen{aspect-ratio:16/9} .kartenknoepfe{justify-content:center} /* Einsatzgebiet: Kopf, dann die Karte ueber die volle Breite, darunter die Ortsliste. Die Karte ist eine Landschaft im Querformat. Neben einer hohen Textspalte blieb rundherum viel Weissraum (Rueckmeldung Torben, 04.09.2026), ueber die volle Breite passt sie ohne Leerflaechen. */ .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} .gebiet-fuss{display:flex;flex-direction:column;align-items:center;text-align:center} /* Der Kasten ist FLACHER als das gerechnete Feld (720 zu 612). Die Landschaft samt Kuppel belegt davon nur rund 74 bis 562, oben und unten bliebe sonst je ein Zehntel leer. Der Ausschnitt wird deshalb im viewBox des svg beschnitten (baue-seiten.py, Funktion kuppelkarte: viewBox="0 56 720 524"). Kasten und viewBox muessen zusammenpassen. Aufgefallen bei Alois Friedel, 04.09.2026. */ .gebiet-karte{position:relative;width:100%;max-width:900px;aspect-ratio:720/524; border-radius:16px;overflow:hidden;border:1px solid var(--linie); background:var(--grau)} .gebiet-karte img{display:block;width:100%;height:100%;object-fit:cover} /* 3D-Gelaendekarte des Einsatzgebiets mit Schutzkuppel. Das Relief ist ein gerechnetes Bild (werkzeuge/baue-gelaende.py) und liegt zweimal uebereinander: grau als Ausgangsbild und farbig als Schlussbild. Alles darueber ist gezeichnet (werkzeuge/baue-kuppel.py): Kuppel, Rhein, Waermestrecken, Ortsnamen, Firmenschild und die Servicefahrzeuge. 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 die Waerme von der Zentrale in jeden Ort, die Fahrzeuge fahren los und zum Schluss wird die ganze Karte farbig und warm. Losgetreten wird das erst, wenn der Abschnitt ins Bild kommt: das Skript am Seitenende setzt dann die Klasse "laeuft". Ohne JavaScript steht das fertige Bild einfach da. */ .kuppelkarte{display:block;width:100%;height:100%} html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:0} html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:0} .k-meridian,.k-ring,.k-kante,.k-fuss,.k-welle,.k-fahrweg,.k-fluss, .k-waermespur{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:.24} /* Der Rhein, 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} /* Waermestrecken von der Zentrale in die Orte */ .k-waermespur{stroke:var(--waerme);stroke-width:1.8; filter:drop-shadow(0 0 3px rgba(232,114,42,.5))} .k-warmlicht{opacity:0} /* Orte: Punkt mit weissem Hof, Name klar und gut lesbar */ .k-ort-punkt{fill:var(--tinte)} .k-ort-warm{fill:var(--waerme);opacity:0} .k-ort-ring{fill:#fff} .k-ort-welle{fill:none;stroke:var(--tinte);stroke-width:1.4} .k-ort-punkt,.k-ort-warm,.k-ort-ring,.k-ort-welle{transform-box:fill-box; transform-origin:50% 50%} .k-ort-name{font-family:"Red Hat Display",-apple-system,"Helvetica Neue",Arial,sans-serif; 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-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 (Rueckmeldung Torben, 04.09.2026: stand vorher plump von Beginn an da) */ .kuppelkarte.laeuft .k-wahrzeichen{transform-box:fill-box; transform-origin:50% 100%; animation:k-pop calc(var(--dur-takt) * .55) var(--ease-pop) both; animation-delay:calc((2.75 + var(--i) * .05) * var(--dur-takt))} html.js .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 var(--dur-2) ease} .k-extra.zeigt{opacity:1} .k-extra-schatten{fill:var(--tinte);opacity:.2} .k-extra.zeigt .k-extra-bild{transform-box:fill-box;transform-origin:50% 100%; animation:k-pop var(--dur-3) var(--ease-pop) both} .k-extra.zeigt .k-extra-blase{animation:k-auf var(--dur-2) ease calc(var(--dur-takt) * .25) 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)} /* Der Wolf von Wolfsmuster hat am Schluss seinen Auftritt */ .kuppelkarte.laeuft .k-wolf-auftritt{ animation:k-wolfszene calc(var(--dur-takt) * 5) ease calc(var(--dur-takt) * 10) both} .kuppelkarte.laeuft .k-wolf-auftritt .k-extra-bild{transform-box:fill-box; transform-origin:50% 100%; animation:k-pop calc(var(--dur-takt) * .55) var(--ease-pop) calc(var(--dur-takt) * 10.1) both} .kuppelkarte.laeuft .k-wolf-heult{transform-box:fill-box; transform-origin:50% 100%;animation:k-heulen calc(var(--dur-takt) * 1.5) ease-in-out calc(var(--dur-takt) * 11) 2} /* Firmenschild, sitzt mit der Spitze genau auf dem Betrieb in Musterdorf */ .k-schild-tafel{fill:#fff;stroke:var(--tinte);stroke-width:1.2;stroke-linejoin:round} .k-schild-punkt{fill:var(--tinte)} .k-schild-schatten{fill:var(--tinte);opacity:.22} /* Die Wege bleiben blass, das Fahrzeug faehrt darauf zum Kunden. Welches Fahrzeug es ist, entscheidet das Gewerk: bei einem Haustechnik- betrieb der Servicewagen, bei Garten- und Tiefbau der Bagger. Umgestellt wird das in werkzeuge/baue-kuppel.py (FAHRZEUG), nicht hier. */ .k-fahrweg{stroke-width:1.2;opacity:.22;stroke-dasharray:4 6} /* Servicewagen: schlichte Silhouette in Tinte mit weisser Kontur */ .k-fahrzeug-korb{fill:var(--tinte);stroke:#fff;stroke-width:1.3; paint-order:stroke;stroke-linejoin:round} .k-fahrzeug-rad{fill:var(--tinte);stroke:#fff;stroke-width:1.2; paint-order:stroke} .k-fahrzeug-logo{font-family:"Red Hat Display",-apple-system,"Helvetica Neue", Arial,sans-serif;font-size:4.2px;font-weight:800;font-style:italic; letter-spacing:.02em;fill:#fff;stroke:none} /* Bagger: Baggergelb auf dunklen Ketten, mit dunkler Kontur. Der weisse Saum kommt aus dem Schlagschatten unten, damit das Geraet auf der gruenen Karte freisteht, ohne dass die Kontur die Maschine zerlegt. */ .k-bagger-korb,.k-bagger-ausleger{fill:var(--maschine-gelb); stroke:#20272a;stroke-width:1;paint-order:stroke;stroke-linejoin:round} .k-bagger-kette{fill:var(--maschine-stahl);stroke:#fff;stroke-width:1.1; paint-order:stroke;stroke-linejoin:round} .k-bagger-rolle{fill:var(--maschine-rolle)} .k-bagger-loeffel{fill:#3a4145;stroke:#20272a;stroke-width:.8; paint-order:stroke;stroke-linejoin:round} .k-bagger-glas{fill:#20272a} .k-bagger-logo{font-family:"Red Hat Display",-apple-system,"Helvetica Neue", Arial,sans-serif;font-size:3.4px;font-weight:800;font-style:italic; letter-spacing:.02em;fill:#20272a;stroke:none} .k-fahrzeug{filter:drop-shadow(0 .5px 1.4px rgba(255,255,255,.95))} .k-koerper,.k-randsaum,.k-glanz,.k-lauflicht,.k-schatten,.k-orte,.k-wege, .k-schild,.k-fahrzeuge,.k-fluss,.k-fluss-name,.k-waermespur,.k-warmbild{opacity:0} /* Ohne JavaScript wird nichts bewegt, dann steht das fertige Bild da */ html:not(.js) .k-koerper,html:not(.js) .k-randsaum,html:not(.js) .k-schatten, html:not(.js) .k-orte,html:not(.js) .k-wege,html:not(.js) .k-schild, html:not(.js) .k-warmbild,html:not(.js) .k-fluss-name{opacity:1} html:not(.js) .k-glanz{opacity:.4} html:not(.js) .k-fluss{opacity:.85} html:not(.js) .k-waermespur{opacity:.35} html:not(.js) .k-warmlicht{opacity:1} html:not(.js) .k-ort-warm{opacity:1} html:not(.js) .k-ort-name{fill:var(--waerme-tief)} /* Ohne JavaScript starten die Wagen nicht, dann bleiben sie weg */ html:not(.js) .k-fahrzeuge{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:.35}} @keyframes k-warmtext{from{fill:var(--tinte)}to{fill:var(--waerme-tief)}} @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-warmpop{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-wolfszene{0%{opacity:0}8%{opacity:1}86%{opacity:1}100%{opacity:0}} @keyframes k-heulen{0%{transform:rotate(0)}45%{transform:rotate(-7deg)} 70%{transform:rotate(-7deg)}100%{transform:rotate(0)}} @keyframes k-schild-auf{from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none}} @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. Waerme fliesst in die Orte 10. Fahrzeuge 11. Farbe */ .kuppelkarte.laeuft .k-welle{animation:k-welle calc(var(--dur-takt) * 1.5) var(--ease-welle) both} .kuppelkarte.laeuft .k-welle2{animation-delay:calc(var(--dur-takt) * .4)} .kuppelkarte.laeuft .k-welle3{animation-delay:calc(var(--dur-takt) * .8)} .kuppelkarte.laeuft .k-fuss{stroke-dasharray:1; animation:k-ziehen calc(var(--dur-takt) * 1.15) var(--ease-zug) calc(var(--dur-takt) * .2) both} .kuppelkarte.laeuft .k-meridian{stroke-dasharray:1; animation:k-ziehen var(--dur-takt) var(--ease-strich) both; animation-delay:calc((.7 + var(--i) * .05) * var(--dur-takt))} .kuppelkarte.laeuft .k-ring{stroke-dasharray:1; animation:k-ziehen calc(var(--dur-takt) * .85) var(--ease-strich) both; animation-delay:calc((1.35 + var(--i) * .09) * var(--dur-takt))} .kuppelkarte.laeuft .k-koerper{animation:k-auf calc(var(--dur-takt) * 1.3) ease calc(var(--dur-takt) * 1.95) both} .kuppelkarte.laeuft .k-schatten{animation:k-auf calc(var(--dur-takt) * 1.2) ease calc(var(--dur-takt) * 2.05) both} .kuppelkarte.laeuft .k-randsaum{animation:k-auf calc(var(--dur-takt) * 1.2) ease calc(var(--dur-takt) * 2.15) both} .kuppelkarte.laeuft .k-kante{stroke-dasharray:1; animation:k-ziehen calc(var(--dur-takt) * 1.1) var(--ease-zug) calc(var(--dur-takt) * 1.9) both} .kuppelkarte.laeuft .k-glanz{animation:k-auf-glanz calc(var(--dur-takt) * 1.1) ease calc(var(--dur-takt) * 2.35) both} .kuppelkarte.laeuft .k-schild{transform-box:fill-box;transform-origin:50% 100%; animation:k-schild-auf calc(var(--dur-takt) * .7) var(--ease-pop-leicht) calc(var(--dur-takt) * 2.2) both} .kuppelkarte.laeuft .k-orte{opacity:1} .kuppelkarte.laeuft .k-ort-punkt,.kuppelkarte.laeuft .k-ort-ring{ animation:k-pop calc(var(--dur-takt) * .45) var(--ease-pop-stark) both; animation-delay:calc((2.6 + var(--i) * .05) * var(--dur-takt))} .kuppelkarte.laeuft .k-ort-welle{animation:k-ortwelle var(--dur-takt) ease-out both; animation-delay:calc((2.6 + var(--i) * .05) * var(--dur-takt))} .kuppelkarte.laeuft .k-fluss{stroke-dasharray:1; animation:k-ziehen calc(var(--dur-takt) * 1.7) ease-out both, k-auf-fluss calc(var(--dur-takt) * .6) ease both; animation-delay:calc((3.1 + var(--i) * .12) * var(--dur-takt))} .kuppelkarte.laeuft .k-fluss-name{animation:k-auf calc(var(--dur-takt) * .7) ease calc(var(--dur-takt) * 4.2) both} .kuppelkarte.laeuft .k-waermespur{stroke-dasharray:1; animation:k-ziehen var(--t) var(--ease-fliessen) both, k-auf-spur calc(var(--dur-takt) * .35) ease both; animation-delay:calc((3.8 + var(--i) * .06) * var(--dur-takt))} /* Der Ort wird warm, sobald die Waerme dort ankommt */ .kuppelkarte.laeuft .k-ort-warm{ animation:k-warmpop calc(var(--dur-takt) * .6) var(--ease-pop) both; animation-delay:calc((3.8 + var(--i) * .06) * var(--dur-takt) + var(--t))} .kuppelkarte.laeuft .k-ort-name{ animation:k-auf calc(var(--dur-takt) * .45) ease both, k-warmtext calc(var(--dur-takt) * .8) ease both; animation-delay:calc((2.6 + var(--i) * .05) * var(--dur-takt)), calc((3.8 + var(--i) * .06) * var(--dur-takt) + var(--t))} .kuppelkarte.laeuft .k-wege{animation:k-auf var(--dur-takt) ease calc(var(--dur-takt) * 6) both} .kuppelkarte.laeuft .k-fahrzeuge{animation:k-auf var(--dur-takt) ease calc(var(--dur-takt) * 6.3) both} /* Zum Schluss wird aus der grauen Karte eine warme, gruene Landschaft */ .kuppelkarte.laeuft .k-warmbild{animation:k-auf calc(var(--dur-takt) * 2) ease calc(var(--dur-takt) * 7.2) both} .kuppelkarte.laeuft .k-warmlicht{animation:k-auf calc(var(--dur-takt) * 2.2) ease calc(var(--dur-takt) * 7.4) both} .kuppelkarte.laeuft .k-lauflicht{animation:k-lauf calc(var(--dur-takt) * 11) ease-in-out calc(var(--dur-takt) * 9.6) infinite} @media (prefers-reduced-motion:reduce){ html.js .kuppelkarte:not(.laeuft) .kuppel{opacity:1} html.js .kuppelkarte:not(.laeuft) .k-warmbild{opacity:1} .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-warm,.kuppelkarte .k-warmlicht{opacity:1} .kuppelkarte .k-glanz{opacity:.4} .kuppelkarte .k-fluss{opacity:.85} .kuppelkarte .k-waermespur{opacity:.35} .kuppelkarte .k-ort-name{fill:var(--waerme-tief)} .kuppelkarte .k-welle,.kuppelkarte .k-ort-welle{opacity:0} .kuppelkarte .k-fahrzeuge{display:none} } .ortsliste{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 20px;padding:0} .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 var(--dur-1),transform var(--dur-1)} .orts-knopf:hover{border-color:var(--tinte);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} .ortsliste{list-style:none;display:flex;flex-wrap:wrap;gap:9px;margin:18px 0 20px;padding:0} .ortsliste li{background:#fff;border:1px solid var(--linie);border-radius:999px; padding:7px 14px;font-size:15px;color:var(--tinte)} .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} /* Fußzeile: dunkle Firmenfarbe, kein Schwarz. Steht eine HELLE Flaeche darueber, setzt die Klasse "kante" eine Trennlinie in der Signalfarbe. Folgt sie direkt auf den dunklen Schlussaufruf, bleibt die Kante weg. */ .fusszeile{background:var(--akzent-dunkel);color:#fff;padding:56px 0 0;margin-top:0} .fusszeile.kante{border-top:5px solid var(--waerme)} .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:#d3cecd;font-size:15.5px} .fusszeile a{display:block;color:#d3cecd;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:#b3adac} .fuss-rechts{display:flex;gap:20px} .fuss-rechts a{display:inline;padding:0} /* Hinweis statt Rechtslinks, solange nur die Startseite steht */ .fuss-hinweis{opacity:.75} /* 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 var(--dur-3) 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){ /* Am Handy ist die Gelaendekarte klein: nur die wichtigsten Orte beschriften, dafuer groesser, sonst kann man die Namen nicht lesen. */ /* Auf dem kleinen Bildschirm schrumpft die Karte, die Quellenangabe aber nicht: sie wirkte sonst breiter als das Bild darueber. */ .karten-quelle{font-size:10px;padding:1px 5px} .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} .gebiet-raster{grid-template-columns:1fr;gap:28px} /* Google-Bausteine auf dem Handy */ .bew-karte{width:270px;padding:18px} .bew-knoepfe{flex-direction:column;align-items:stretch} .bew-knoepfe .knopf{width:100%} .kartenfeld{aspect-ratio:3/4} .karte-geladen{aspect-ratio:3/4} .karten-sperre{align-items:flex-end;padding:14px 14px 34px} .karten-kasten{padding:16px 18px;gap:6px} .karten-kasten p{font-size:14.5px} .karten-kasten p strong{font-size:16.5px} .abschnitt{padding:52px 0} .held{padding:36px 0} .held-raster,.zweispalter,.zweispalter-breit,.formular-raster, .kopf-zweispalter{grid-template-columns:1fr;gap:28px} /* Ein Bild klebt nie auf der Ueberschrift (Torben, 05.09.2026): steht das Bild gestapelt ueber dem Text, kommt zusaetzliche Luft dazwischen. Pruefen mit werkzeuge/pruefe-bildabstand.mjs, Ziel "gesamt 0". */ .zweispalter>.bildrahmen,.zweispalter-breit>.bildrahmen, .kopf-zweispalter>.bildrahmen,.held-raster>.held-bildrahmen, .formular-raster>.formular-bildrahmen{margin-bottom:14px} .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:180px} .burger{display:block} .hauptmenue{display:none;position:absolute;left:0;right:0;top:78px;background:#fff; border-bottom:1px solid var(--linie);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, deshalb muessen :hover und :focus-within hier ausdruecklich wieder ausgeschaltet werden. Sonst klappt die Liste beim ersten Antippen unkontrolliert auf. */ .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(--akzent); border-radius:0 8px 8px 0;background:var(--grau);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} /* Auf sehr schmalen Geraeten (320 Punkte) schob der lange Knopftext die ganze Seite seitlich heraus: gemessen 349 statt 320 Punkte. Gefunden am 04.09.2026 vom Asymmetrie-Waechter bei Mustermann, Fehlerart B. */ .kauf-leiste .kauf-knopf{max-width:100%} @media (max-width:420px){ .kauf-leiste{padding:9px 10px} .kauf-leiste .kauf-knopf{font-size:14px;padding:8px 14px} } /* ================================================================ Projektbild mit Punkten (aus 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-dunkel); box-shadow:0 18px 44px rgba(19,32,42,.22)} /* 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 calc(var(--dur-takt) * 14) 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(var(--schatten),.40);transition:background var(--dur-1),transform var(--dur-1)} .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 var(--dur-3) 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 calc(var(--dur-takt) * 1.6) ease-out calc(var(--dur-takt) * .5) 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(19,32,42,.93);color:#fff;border-radius:10px;padding:11px 15px; width:250px;z-index:3;pointer-events:none;opacity:0;visibility:hidden; transition:opacity var(--dur-1);box-shadow:0 8px 24px rgba(var(--schatten),.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 in oklab,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 calc(var(--dur-takt) * 2.6) ease-out calc(var(--dur-takt) * 1.5) 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(--akzent-hell)} .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(--waerme);color:#fff} /* 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} .abschnitt-akzent .vergleich-block p{color:var(--akzent-hell)} .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 var(--dur-3) 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){ 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} } /* 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} } /* ================================================================ Zusatz-Bauteile fuer Kundenseiten (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. Bewusst KEINE Ueberschrift in den Kaesten, sondern ein Textstueck: die Nachweisnamen sind unterschiedlich lang und wuerden als h3 sonst auf verschiedenen Zeilen beginnen. */ .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:20px; display:flex;align-items:center;gap:14px;text-decoration:none; transition:border-color var(--dur-1),box-shadow var(--dur-1)} .zert:hover{border-color:var(--akzent);box-shadow:0 8px 20px rgba(28,53,71,.12)} .zert .ico{color:var(--akzent)} .zert-text{font-weight:700;font-size:15.5px;line-height:1.35} /* 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 und Partner: sechs Kaesten, also 3x2 bzw. 2x3 bzw. 1x6 */ .partner-raster{display:grid;grid-template-columns:repeat(3,1fr);gap:18px; align-items:stretch;margin-top:32px} .partner{background:#fff;border:1px solid var(--linie);border-radius:12px;padding:22px; display:flex;flex-direction:column;text-decoration:none;transition:border-color var(--dur-1)} .partner:hover{border-color:var(--akzent)} .partner-name{font-weight:700;font-size:17px;margin-bottom:6px} .partner p{margin:0;color:var(--nebentext);font-size:15px} /* 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)} .partner-raster{grid-template-columns:repeat(2,1fr)} } @media (max-width:900px){ .team-raster{grid-template-columns:1fr} } @media (max-width:560px){ .zert-raster,.partner-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-dunkel); box-shadow:0 18px 44px rgba(19,32,42,.22)} /* 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 calc(var(--dur-takt) * 14) 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(var(--schatten),.40);transition:background var(--dur-1),transform var(--dur-1)} .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 var(--dur-3) 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 calc(var(--dur-takt) * 1.6) ease-out calc(var(--dur-takt) * .5) 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(19,32,42,.93);color:#fff;border-radius:10px;padding:11px 15px; width:250px;z-index:3;pointer-events:none;opacity:0;visibility:hidden; transition:opacity var(--dur-1);box-shadow:0 8px 24px rgba(var(--schatten),.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 in oklab,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 calc(var(--dur-takt) * 2.6) ease-out calc(var(--dur-takt) * 1.5) 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(--akzent-hell)} .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(--waerme);color:#fff} /* 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} .abschnitt-akzent .vergleich-block p{color:var(--akzent-hell)} .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 var(--dur-3) 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){ 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} } /* 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} } /* 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 bei Elektro Mustermann. */ @media (max-width:760px){ .fuss-raster{grid-template-columns:1fr;gap:28px} } /* ================================================================ 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 in oklab,var(--grau),rgba(244,246,248,0))} .marken-band::after{right:0;background:linear-gradient(to left in oklab,var(--grau),rgba(244,246,248,0))} .marken-lauf{display:flex;width:max-content;will-change:transform; animation:marken-lauf calc(var(--dur-takt) * 38) 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 var(--dur-1)} /* 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:calc(var(--dur-takt) * 26)} } /* Bei "Bewegung reduzieren" steht das Band still und laesst sich von Hand schieben. Gehoert in den vorhandenen Block @media (prefers-reduced-motion:reduce){ ... } : .marken-lauf{animation:none} .marken-band{overflow-x:auto;scrollbar-width:thin} .marken-satz:not(:first-child){display:none} */ /* ================================================================ Weiche Uebergaenge zwischen den HELLEN Flaechen (Torben, 04.09.2026, Elektro Mustermann: nie hart Weiss auf eine andere Flaeche stossen lassen, und der Verlauf laeuft NIE ins Schwarze, sondern aus dem Weiss in eine Firmenfarbe). Der Generator setzt den .uebergang-Streifen; die Verlaufsfarben kommen aus dem Helfer uebergang(von, nach) in baue-seiten.py und muessen die Farben der BEIDEN Nachbarflaechen sein. Erlaubt sind nur helle Farben: --papier, --grau, --akzent-blass und eine helle Signalfarbe. Zu einer kraeftigen dunklen Flaeche fuehrt KEIN Verlauf, sondern die Kante in der Signalfarbe: border-top an .abschnitt-akzent und an .fusszeile.kante. ================================================================ */ .uebergang{display:block;height:96px} @media (max-width:900px){.uebergang{height:60px}} /* Kante vor kraeftigen Flaechen. Die Klasse setzt weiche_uebergaenge() im Generator, nur wenn eine HELLE Flaeche darueber steht (Muster 3a). */ .abschnitt-dunkel.kante,.band.kante,.zeichenband.kante{border-top:5px solid var(--waerme)} /* ================================================================ Film-Sicherung (Baukasten, 11.09.2026; Anlass Eiscafé Mustermann: Safari zeigte im Kopf seinen eigenen Abspielknopf, davor schon bei Gartenbau Mustermann am 04.09. mit drei Anlaeufen gelernt) Safari startet Filme nicht immer von allein (Stromsparmodus, Datensparmodus, Einstellung "nie automatisch abspielen"). Dann legt er seinen Abspielknopf ueber das Vorschaubild. Chrome ist lockerer, deshalb faellt es beim Pruefen am Rechner nicht auf. Darum gilt fuer JEDEN Film, der von allein laufen soll: 1. Der Film steht in einem Kasten mit der Klasse .film-buehne. 2. Ein Deckbild (.film-deckbild, das erste Filmbild) steht im HTML NACH dem Film und liegt damit darueber. Es blendet sich erst weg, wenn der Film nachweislich laeuft (Klasse film-laeuft, setzt das Skript). 3. Laeuft der Film nach 2,5 s nicht, setzt das Skript film-blockiert, und ein eigener Knopf (.film-knopf) erscheint. Ohne ihn erfaehrt der Besucher nie, dass es einen Film gibt. Das Skript steht in baue-seiten.py (Block "Film-Sicherung"), geprueft wird mit werkzeuge/pruefe-film.mjs (Ziel "gesamt 0"). ================================================================ */ .film-buehne video{pointer-events:none} .film-buehne .film-deckbild{transition:opacity var(--dur-3) var(--ease-out)} .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 var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)} .film-knopf:hover{background:rgba(255,255,255,.24);border-color:#fff} /* Runde Fassung fuer Filme in Bildkaesten (nur Dreieck, Beschriftung per 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}}