/* Baukasten-Gestaltung für Kundenwebseiten. ANPASSEN: (1) die Farben unter :root, (2) die Schriftnamen und die Pfade in den @font-face-Zeilen, (3) überall engineeringbuero durch den Ordnernamen der Seite ersetzen (derselbe Name wie BASIS in baue-seiten.py). Der Scroll-Fix darunter ist Pflicht und wird nicht angefasst. */ /* Zahlen untereinander stehen buendig (Pflicht, ~/.claude/CLAUDE.md, "Grafische Sorgfalt" Punkt 9, Torben 15.09.2026): Tabellenziffern fuer alles, was Zahlen traegt. Eine 1 ist dann so breit wie eine 8, damit zwei Zahlen untereinander auf derselben Senkrechten beginnen und enden. Geprueft mit werkzeuge/pruefe-zahlen.mjs, Ziel "gesamt 0". */ table,td,th,b,strong,output,time,[class*="zahl"],[class*="preis"], [class*="wert"],[class*="betrag"],[class*="prozent"],[class*="summe"], [class*="geld"],[class*="skala"]{font-variant-numeric:tabular-nums} /* 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} /* Schriften der bestehenden Kundenseite (Open Sans fuer Text, Roboto Slab fuer Ueberschriften), selbst gehostet. Quelle: @fontsource (OFL / Apache 2.0). */ @font-face{font-family:"Open Sans";src:url("/referenzen/engineering/schriften/OpenSans-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("/referenzen/engineering/schriften/OpenSans-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:"Open Sans";src:url("/referenzen/engineering/schriften/OpenSans-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap} @font-face{font-family:"Roboto Slab";src:url("/referenzen/engineering/schriften/RobotoSlab-300.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap} @font-face{font-family:"Roboto Slab";src:url("/referenzen/engineering/schriften/RobotoSlab-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:"Roboto Slab";src:url("/referenzen/engineering/schriften/RobotoSlab-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap} :root{ /* CI der Engineering Büro (aus main.css der alten Seite und dem Logo): Orange #efac28, Grau #706f6f und #b2b2b2, Flaeche #fafafa. Kein Schwarz. */ --tinte:#4a4949; /* Text: dunkles Grau aus dem Logo-Grau, 8,9:1 auf Weiss */ --waerme:#efac28; /* Signalfarbe Orange */ --waerme-tief:#8f5d00; /* dasselbe Orange, dunkel genug fuer Schrift (5,6:1) */ --wasser:#5b9fd0; --akzent:#efac28; --akzent-dunkel:#706f6f; /* dunkle Hausfarbe: das Grau aus dem Logo */ --akzent-blass:#fdf4e1; /* sehr helle Toenung des Orange, fuer Flaechen */ --akzent-hell:#f4f3f3; /* helle Schrift auf dem Grau */ --papier:#ffffff; --grau:#f7f6f6; --linie:#e2e0e0; --linie-kraeftig:#c4c2c2; /* Linie eines Kastens: 1,6:1 auf dem Grau (Regel 9) */ --nebentext:#676666; /* 5,6:1 auf Weiss, 5,2:1 auf dem Grau */ --schatten:112,111,111; /* 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,blockquote,figcaption{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} /* Schmaler Textblock, der LINKS am Raster bleibt (aus Pro-Schuldnerberatung, 13.09.2026). Mit .schmal wird der Block zentriert und beginnt weiter rechts als Ueberschrift und Bild darueber; gleichartige Elemente gehoeren aber auf eine Ebene (Torben). Die Kinder werden schmal, der Rahmen bleibt breit. Fuer bewusst mittig gesetzte Abschnitte weiter .schmal nehmen. */ .innen.schmal-links{max-width:1120px} .innen.schmal-links>*{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} /* Dunkle Flaeche fuer Blickfaenge wie den Vorher/Nachher-Schieber. Der Generator setzt die Klasse (Startseite) und fuehrt sie in FLAECHEN als dunkel, bisher fehlte aber die Gestaltung: die Flaeche blieb weiss und bekam trotzdem die Kante. Vier Projekte hatten sie deshalb einzeln gebaut (Rueckfluss 13.09.2026). Bewusst die dunkle FIRMENfarbe und kein Verlauf ins Schwarze (Muster 3a: kein Schwarz, wenn der Kunde keins hat). Den Uebergang von einer hellen Flaeche macht die Kante (.kante weiter unten), die weiche_uebergaenge() im Generator setzt. Mehr Innenmass als ein normaler Abschnitt, damit das Bild Luft zur Kante hat. */ .abschnitt-dunkel{background:var(--akzent-dunkel);color:#fff;padding:110px 0} .abschnitt-dunkel h2,.abschnitt-dunkel h3,.abschnitt-dunkel p{color:#fff} .abschnitt-dunkel .breit-text{color:var(--akzent-hell);margin-left:auto;margin-right:auto} .abschnitt-dunkel .bildunterschrift,.abschnitt-dunkel .vergleich-block p{color:var(--akzent-hell)} @media (max-width:700px){.abschnitt-dunkel{padding:72px 0}} .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 Glatz): 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)} /* Zwei Spalten passen, wenn "Leistungen" links oder mittig im Menue steht. Sitzt das Menue weit rechts in der Kopfzeile (langes Logo), ragt die rund 570 Pixel breite Liste ab etwa 940 Pixel Bildschirmbreite rechts aus dem Bild (Pro-Schuldnerberatung, 08.09.2026). Dann im Projekt auf eine Spalte stellen: grid-template-columns:1fr und max-width:calc(100vw - 32px), und in pruefe-untermenue.mjs SPALTEN_RECHNER = 1 setzen. */ .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,.abschnitt-dunkel .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} /* Abschluss-Kachel "Individuelle Anfrage" ohne eigenes Bild (aus MB Haustechnik): dunkle Einladung in der Firmenfarbe, im Bildrahmen eine Reihe mit den Leistungs-Icons. baue-seiten.py nimmt sie von selbst, wenn bilder/individuell.jpg fehlt. Gleiche Masse wie die Nachbarkacheln, damit Überschriften und Knöpfe auf einer Ebene bleiben. */ .kachel-anfrage{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);color:#fff} .kachel-anfrage h3,.kachel-anfrage .karte-kopf .ico{color:#fff} .kachel-anfrage p,.kachel-anfrage .weiter{color:var(--akzent-hell)} .kachel-symbole{display:flex;align-items:center;justify-content:center;gap:20px;color:#fff; background:radial-gradient(in oklab closest-side at 50% 120%, rgba(255,255,255,.14), rgba(255,255,255,0) 78%)} .kachel-symbole .ico{opacity:.55;flex:none;transition:opacity var(--dur-2) var(--ease-out),transform var(--dur-2) var(--ease-out)} .kachel-symbole .ico:nth-child(3){opacity:.95;width:44px;height:44px} .kachel-anfrage:hover .kachel-symbole .ico{opacity:.9;transform:translateY(-2px)} @media (max-width:380px){.kachel-symbole{gap:12px}} /* 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 Spitzer, Logo-Blau */ .ablauf-rot{--glut-a:#c94a4e;--glut-b:#6b1a1d} /* Weinrot, Alois Friedel */ .ablauf-beratung{--glut-a:#4f86d6;--glut-b:#123c7a} /* Firmenblau, Pro-Schuldnerberatung */ .ablauf-gold{--glut-a:#F0CF6A;--glut-b:#9A7612} /* Gold, AMICI Eisbar (Gastronomie) */ .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. Nur im Block .ablauf: der Stromkreis und schlichte .schritte-Raster nutzen dieselbe Klasse .schritt und bekämen sonst graue Stummel neben jeder Kachel (Gartenbau Spitzer, Pro-Schuldnerberatung). */ .ablauf .schritt::before,.ablauf .schritt::after{content:"";position:absolute;top:50%;right:-20px; width:20px;height:3px;margin-top:-1.5px;border-radius:2px} .ablauf .schritt::before{background:var(--rohr)} .ablauf .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))} .ablauf .schritt:last-child::before,.ablauf .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) .ablauf .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){ .ablauf .schritt::before,.ablauf .schritt::after{display:none} } /* Handy: die Kästchen stehen untereinander, das Verbindungsstück steht senkrecht zwischen ihnen. */ @media (max-width:560px){ .ablauf .schritt::before,.ablauf .schritt::after{display:block;top:auto;bottom:-20px; left:50%;right:auto;width:3px;height:20px;margin-top:0;margin-left:-1.5px} .ablauf .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) .ablauf .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} .ablauf .schritt::after{transform:scaleX(1)} .fertig-haken{opacity:1;transform:scale(1)} } @media (prefers-reduced-motion:reduce) and (max-width:560px){ .ablauf .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)} /* Kundenstimmen: schriftliche Zuschriften von Kunden (Baustein werkzeuge/bausteine-stimmen.py, aus Pro-Schuldnerberatung, 13.09.2026). Drei Karten nebeneinander auf der Startseite: gleich hoch und gleich breit, der Name sitzt unten auf einer Linie (margin-top:auto). Die Auszuege bringt der Baustein auf gleiche Laenge. Die Anfuehrungszeichen setzt quotes. */ .stimmen{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch;margin-top:28px} .stimme{margin:0;background:var(--papier);border:1px solid var(--linie);border-left:4px solid var(--akzent); border-radius:12px;padding:24px 24px 20px;display:flex;flex-direction:column} .stimme blockquote{margin:0;quotes:"\201E" "\201C";color:var(--tinte);font-size:16.5px;line-height:1.62} .stimme blockquote::before{content:open-quote;color:var(--akzent);font-size:30px;line-height:0; vertical-align:-8px;margin-right:2px} .stimme blockquote::after{content:close-quote;color:var(--akzent);font-size:30px;line-height:0; vertical-align:-8px;margin-left:2px} .stimme figcaption{margin-top:auto;padding-top:16px;font-weight:700;font-size:15px;color:var(--nebentext)} /* Die volle Fassung auf der eigenen Seite: untereinander, damit die sehr unterschiedlich langen Texte nicht gegeneinander ausgerichtet werden muessen. Nebeneinander waeren sie nie gleich hoch. Am besten in .innen.schmal-links, dann bleibt die Zeile lesbar kurz. */ .stimme-lang{margin:0 0 34px;background:var(--papier);border:1px solid var(--linie); border-left:4px solid var(--akzent);border-radius:12px;padding:28px 30px 24px} .stimme-lang h2{font-size:20px;margin-bottom:14px;color:var(--akzent-dunkel)} .stimme-lang blockquote{margin:0} .stimme-lang blockquote p:last-child{margin-bottom:0} .stimme-gruss{margin-top:14px;margin-bottom:0;font-style:italic} .stimme-lang figcaption{margin-top:16px;padding-top:14px;border-top:1px solid var(--linie); font-weight:700;font-size:15.5px;color:var(--nebentext)} /* Herkunftshinweis unter jeder Sammlung (Paragraf 5b UWG) */ .herkunft{font-size:14px;color:var(--nebentext);line-height:1.6;margin-top:8px} @media (max-width:900px){.stimmen{grid-template-columns:1fr}} @media (max-width:560px){ /* Weniger Rand, damit lange Namen und Firmennamen in den Zitaten in eine Zeile passen (Worttrennung ist verboten) */ .stimme-lang{padding:22px 18px 20px} .stimme{padding:20px 18px 18px} } /* 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. */ /* Rand der Karte: --linie hat gegen das Grau nur 1,19:1, Regel 9 verlangt 1,30:1 fuer die Linie eines Kastens auf einer Flaeche (pruefe-farbverlaeufe, "Kasten ohne Kontrast"; Alois Friedel, 14.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-kraeftig,#d6cfcd); 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 Beispieldorf, 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} /* Schnecke und Wolf (sinnbilder.py). Ohne diese Zeilen malt der Browser Fuehler und Schneckenhaus schwarz ohne Kontur, und die feine Kontur des Wolfs verschwindet (Rueckfluss aus Alois Friedel, 13.09.2026; dieselben Zeilen hatten drei Projekte einzeln nachgetragen). Die Hausfarbe ist die Farbe des Tiers, nicht der Marke, und bleibt deshalb fest. */ .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} /* Der Wolf ist ein stark verkleinerter Originalpfad (scale 0.0763): seine weisse Kontur braucht deshalb eine mitskalierte Strichstaerke. */ .k-wolf-echt{stroke-width:16} /* 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 Beispieldorf */ .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. Weiss mit honeyflow-Logo: stößt an keine Kundenfarbe hart an und ist als Rahmen von honeyflow erkennbar, nicht als Teil der Kundenseite (Torben, 19.09.2026). */ .kauf-leiste{background:#fff;border-bottom:3px solid #5a6b2f;padding:9px max(20px,calc((100% - 1080px)/2));display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:center} .kauf-leiste::before{content:"";flex:none;width:158px;height:33px;background:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-52 -52 497.93 104%22%3E%3Cpath d=%22M0.00,-44.00 L38.11,-22.00 L38.11,22.00 L0.00,44.00 L-38.11,22.00 L-38.11,-22.00Z%22 fill=%22none%22 stroke=%22%230d1b34%22 stroke-width=%227%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0.00,-25.80 L12.12,-18.80 L12.12,-4.80 L0.00,2.20 L-12.12,-4.80 L-12.12,-18.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M-13.62,-2.20 L-1.50,4.80 L-1.50,18.80 L-13.62,25.80 L-25.75,18.80 L-25.75,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M13.62,-2.20 L25.75,4.80 L25.75,18.80 L13.62,25.80 L1.50,18.80 L1.50,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cg transform=%22translate(74,19)%22%3E%3Cpath transform=%22translate(0.00,0) scale(0.03519,-0.03519)%22 d=%22M876 0V510Q876 547 872.0 604.5Q868 662 847.0 720.0Q826 778 778.5 817.0Q731 856 644 856Q609 856 569.0 845.0Q529 834 494.0 802.5Q459 771 436.5 710.0Q414 649 414 548L258 622Q258 750 310.0 862.0Q362 974 466.5 1043.0Q571 1112 730 1112Q857 1112 937.0 1069.0Q1017 1026 1061.5 960.0Q1106 894 1125.0 822.5Q1144 751 1148.0 692.0Q1152 633 1152 606V0ZM138 0V1440H380V700H414V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(44.76,0) scale(0.03519,-0.03519)%22 d=%22M626 -30Q463 -30 340.0 43.0Q217 116 148.5 244.5Q80 373 80 540Q80 709 150.0 837.5Q220 966 343.0 1038.0Q466 1110 626 1110Q789 1110 912.5 1037.0Q1036 964 1105.0 835.5Q1174 707 1174 540Q1174 372 1104.5 243.5Q1035 115 911.5 42.5Q788 -30 626 -30ZM626 224Q757 224 821.5 312.5Q886 401 886 540Q886 684 820.5 770.0Q755 856 626 856Q537 856 480.0 816.0Q423 776 395.5 705.0Q368 634 368 540Q368 395 433.5 309.5Q499 224 626 224Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(88.88,0) scale(0.03519,-0.03519)%22 d=%22M876 0V510Q876 547 872.0 604.5Q868 662 847.0 720.0Q826 778 778.5 817.0Q731 856 644 856Q609 856 569.0 845.0Q529 834 494.0 802.5Q459 771 436.5 710.0Q414 649 414 548L258 622Q258 750 310.0 862.0Q362 974 466.5 1043.0Q571 1112 730 1112Q857 1112 937.0 1069.0Q1017 1026 1061.5 960.0Q1106 894 1125.0 822.5Q1144 751 1148.0 692.0Q1152 633 1152 606V0ZM138 0V1080H380V722H414V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(133.63,0) scale(0.03519,-0.03519)%22 d=%22M642 -30Q476 -30 349.5 41.5Q223 113 151.5 238.5Q80 364 80 526Q80 703 150.0 834.0Q220 965 343.0 1037.5Q466 1110 626 1110Q796 1110 915.0 1030.0Q1034 950 1091.0 805.0Q1148 660 1131 464H862V564Q862 729 809.5 801.5Q757 874 638 874Q499 874 433.5 789.5Q368 705 368 540Q368 389 433.5 306.5Q499 224 626 224Q706 224 763.0 259.0Q820 294 850 360L1122 282Q1061 134 929.5 52.0Q798 -30 642 -30ZM284 464V666H1000V464Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(176.42,0) scale(0.03519,-0.03519)%22 d=%22M278 -480 486 92 490 -76 20 1080H302L618 262H554L868 1080H1140L530 -480Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(216.53,0) scale(0.03519,-0.03519)%22 d=%22M230 0V1076Q230 1117 232.0 1169.0Q234 1221 248.5 1274.0Q263 1327 302 1370Q352 1426 410.5 1446.5Q469 1467 524.0 1468.5Q579 1470 618 1470H752V1250H628Q564 1250 533.0 1217.5Q502 1185 502 1140V0ZM60 870V1080H752V870Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(243.69,0) scale(0.03519,-0.03519)%22 d=%22M160 0V1470H432V0Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(264.52,0) scale(0.03519,-0.03519)%22 d=%22M626 -30Q463 -30 340.0 43.0Q217 116 148.5 244.5Q80 373 80 540Q80 709 150.0 837.5Q220 966 343.0 1038.0Q466 1110 626 1110Q789 1110 912.5 1037.0Q1036 964 1105.0 835.5Q1174 707 1174 540Q1174 372 1104.5 243.5Q1035 115 911.5 42.5Q788 -30 626 -30ZM626 224Q757 224 821.5 312.5Q886 401 886 540Q886 684 820.5 770.0Q755 856 626 856Q537 856 480.0 816.0Q423 776 395.5 705.0Q368 634 368 540Q368 395 433.5 309.5Q499 224 626 224Z%22 fill=%22%230d1b34%22/%3E%3Cpath transform=%22translate(308.64,0) scale(0.03519,-0.03519)%22 d=%22M370 0 40 1082 306 1080 502 436 701 1080H927L1126 436L1322 1080H1588L1258 0H1050L814 704L578 0Z%22 fill=%22%230d1b34%22/%3E%3C/g%3E%3C/svg%3E") left center/contain no-repeat} .kauf-leiste .kauf-knopf{display:inline-flex;align-items:center;gap:10px;background:#0d1b34;color:#fff; font-weight:700;font-size:15px;text-decoration:none;padding:9px 20px;border-radius:999px;white-space:normal;line-height:1.35;max-width:100%} .kauf-leiste .kauf-knopf:hover{background:#5a6b2f} .kauf-leiste .kauf-knopf svg{flex:none} @media (max-width:560px){ .kauf-leiste{padding:8px 12px;gap:10px} .kauf-leiste::before{width:34px;height:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%22-52 -52 104 104%22%3E%3Cpath d=%22M0.00,-44.00 L38.11,-22.00 L38.11,22.00 L0.00,44.00 L-38.11,22.00 L-38.11,-22.00Z%22 fill=%22none%22 stroke=%22%230d1b34%22 stroke-width=%227%22 stroke-linejoin=%22round%22/%3E%3Cpath d=%22M0.00,-25.80 L12.12,-18.80 L12.12,-4.80 L0.00,2.20 L-12.12,-4.80 L-12.12,-18.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M-13.62,-2.20 L-1.50,4.80 L-1.50,18.80 L-13.62,25.80 L-25.75,18.80 L-25.75,4.80Z%22 fill=%22%230d1b34%22/%3E%3Cpath d=%22M13.62,-2.20 L25.75,4.80 L25.75,18.80 L13.62,25.80 L1.50,18.80 L1.50,4.80Z%22 fill=%22%230d1b34%22/%3E%3C/svg%3E")} .kauf-leiste .kauf-knopf{font-size:14px;padding:8px 14px;flex:1;justify-content:center} } /* ================================================================ Projektbild mit Punkten (aus Elektro Glatz, 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} /* Kopf mit echtem Pruefzeichen neben der Ueberschrift und Karte mit der ECHTEN Urkunde als Blatt (Baukasten 13.09.2026, aus Elektro Glatz). HTML: werkzeuge/bausteine-nachweise.py, Bilder: werkzeuge/baue-urkunden.py. Kein erfundenes Siegel, nur ein Zeichen, das auf der Urkunde steht. */ .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} .zert-stempel{flex:none;width:118px;height:118px} .zert-mit-blatt{flex-direction:column;align-items:stretch;gap:0;padding:16px; transition:border-color var(--dur-1),box-shadow var(--dur-1),transform var(--dur-1)} .zert-mit-blatt:hover{box-shadow:0 10px 24px rgba(var(--schatten),.14);transform:translateY(-3px)} /* Oberer Ausschnitt des Blatts, 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{margin-top:2px;flex:none} /* Mindesthoehe fuer zwei Zeilen: die Quellenangabe beginnt in allen Karten einer Reihe auf derselben Linie */ .zert-kopf .zert-text{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-mit-blatt .weiter{margin-top:auto;font-size:14.5px} @media (max-width:1100px){.zert-titel{flex-direction:column;align-items:flex-start;gap:18px}} @media (prefers-reduced-motion:reduce){.zert-mit-blatt:hover{transform:none}} /* 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 Glatz, 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 Glatz. */ @media (max-width:760px){ .fuss-raster{grid-template-columns:1fr;gap:28px} } /* ================================================================ Marken-Laufband (Elektro Glatz, 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 Glatz: 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:56px} /* Der Streifen IST der Abstand (Torben, 16.09.2026, BB-KB: "Abstaende zu gross"): die Abschnitte links und rechts davon geben ihren Innenabstand zur Streifen- seite ab, sonst summieren sich Innenabstand + Streifen + Innenabstand auf ueber 200 Pixel Leere. Ziel: Desktop hoechstens ~96, Handy hoechstens ~64. */ .abschnitt:has(+ .uebergang){padding-bottom:12px} .uebergang+.abschnitt{padding-top:12px} @media (max-width:900px){ .uebergang{height:36px} .abschnitt:has(+ .uebergang){padding-bottom:8px} .uebergang+.abschnitt{padding-top:8px} } /* 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 AMICI Eisbar: Safari zeigte im Kopf seinen eigenen Abspielknopf, davor schon bei Gartenbau Spitzer 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} /* Buehne fuer Filme in Bildrahmen (.held-bildrahmen, .bildrahmen): Deckbild ueber dem Film, Notknopf und Wiederholen-Knopf darueber. Der Kino-Kopf bringt seine eigene Lage mit. film() im Generator setzt die Buehne seit 14.09.2026 selbst (Alois Friedel). */ .film-buehne{position:relative;width:100%;height:100%} .film-buehne .film-deckbild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:1;pointer-events:none} .film-buehne .film-knopf-rund,.film-buehne .film-neustart{z-index:3} @media (prefers-reduced-motion:reduce){.film-buehne video{display:none}} /* ================================================================ Oeffnungszeiten (Baukasten, 13.09.2026; aus AMICI Eisbar) HTML und Skript: werkzeuge/bausteine-oeffnungszeiten.py. Das Skript setzt am die Klasse ist-offen und markiert in der Zeitliste den heutigen Tag (li.heute). Farben nur ueber Variablen. ================================================================ */ .heute-status{--offen:#2f8a4c;display:flex;align-items:center;gap:10px;margin:0 0 8px;font-weight:600} .status-punkt{width:10px;height:10px;border-radius:50%;background:var(--akzent);flex:none} .ist-offen .status-punkt{background:var(--offen,#2f8a4c)} .zeitliste{list-style:none;margin:0 0 18px;padding:0} .zeitliste li{display:flex;justify-content:space-between;gap:14px;padding:7px 12px;border-radius:8px;font-size:16px} .zeitliste li.heute{background:var(--akzent-blass);font-weight:600;box-shadow:inset 3px 0 0 var(--akzent)} /* ================================================================ Kennzahlen-Reihe und Kurzbewerbung (Baukasten, 13.09.2026; aus Elektro Glatz, Seite "Jobs und Ausbildung") HTML: werkzeuge/bausteine-jobs.py. Vier Kaesten gehen bei vier und zwei Spalten ohne angebrochene Reihe auf. Nur belegte Zahlen. ================================================================ */ .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} @media (max-width:900px){.zahlenreihe{grid-template-columns:1fr 1fr;gap:14px}} /* Satz direkt unter der Ueberschrift im Formularkasten */ .formular-kasten>p{color:var(--nebentext);margin-top:-6px;margin-bottom:18px} /* Text, der nur vorgelesen und nicht angezeigt wird (zum Beispiel "Gestorben am" vor einem Kreuzzeichen, "Telefon:" vor einem Symbol) */ .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} /* ================================================================ Kino-Kopf der Startseite (Baukasten, 13.09.2026; Rueckfluss aus LK Friseure, dort normkonform nachgebaut nach Gartenbau Spitzer) HTML: werkzeuge/bausteine-kinokopf.py, Funktion kopfbereich(). Skript: JS_KINOKOPF aus demselben Baustein (setzt "laeuft" und "kopf-fest"). Den Film deckt die Film-Sicherung oben ab (.film-buehne, .film-deckbild, .film-knopf), hier steht nur, was der Kopf selbst braucht. Grundzustand ist das FERTIGE Bild. Erst die Klasse "laeuft" (vom Skript, nur ohne "Bewegung reduzieren") startet die Bewegung. Jeder Verlauf "in oklab", Zeiten nur ueber --dur-* und --dur-takt, Schleier und Schatten in der dunklen Firmenfarbe (--schatten), nie Schwarz. ================================================================ */ .kinokopf{position:relative;background-color:var(--papier);padding-bottom:16px} .kk-buehne{position:relative;overflow:hidden;background-color:var(--akzent-dunkel); min-height:clamp(560px,86vh,820px);display:flex;align-items:flex-end} .kk-buehne picture{position:absolute;inset:0} .kk-foto{width:100%;height:100%;object-fit:cover;object-position:60% 50%} .kk-film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:60% 50%;pointer-events:none} .kk-film-hoch{display:none} @media (max-width:720px){ .kk-film-quer{display:none} .kk-film-hoch{display:block} } .kk-schleier{position:absolute;inset:0;background-color:transparent; background-image:linear-gradient(100deg in oklab,rgba(var(--schatten),.82) 0%,rgba(var(--schatten),.64) 34%, rgba(var(--schatten),.24) 64%,rgba(var(--schatten),.04) 100%), linear-gradient(to top in oklab,rgba(var(--schatten),.48) 0%,rgba(var(--schatten),0) 52%)} .kk-lichtstreifen{position:absolute;top:-10%;bottom:-10%;left:-60%;width:38%; transform:skewX(-12deg);opacity:0;pointer-events:none; background-image:linear-gradient(100deg in oklab,rgb(255 255 255 / 0),rgb(255 255 255 / .16),rgb(255 255 255 / 0))} .kk-ausblendung{position:absolute;left:0;right:0;bottom:0;height:220px;z-index:1;pointer-events:none; background-image:linear-gradient(to bottom in oklab,rgba(var(--schatten),0) 0%,rgba(var(--schatten),.26) 55%,rgba(var(--schatten),.52) 100%)} .kk-innen{position:relative;z-index:2;width:100%;padding-top:120px;padding-bottom:132px} .kk-innen .vorzeile{color:var(--akzent-hell);margin-bottom:16px} .kk-innen h1{color:#fff;max-width:14ch;margin-bottom:20px; text-shadow:0 2px 30px rgba(var(--schatten),.45)} .kk-satz{color:#fff;max-width:50ch;font-size:clamp(16px,1.4vw,19px); text-shadow:0 1px 16px rgba(var(--schatten),.5)} .kk-innen .knopfreihe{margin-top:26px} .kk-innen .knopf-umriss-weiss{border-color:rgba(255,255,255,.8)} /* Leiste mit vier Versprechen: eine Reihe, alle auf einer Ebene */ .kk-leiste{position:relative;z-index:3;margin-top:-74px;background-color:#fff;border:1px solid var(--linie); border-radius:18px;box-shadow:0 22px 54px rgba(var(--schatten),.16); display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden} .kk-punkt{display:flex;align-items:center;gap:14px;padding:22px;min-height:108px; border-right:1px solid var(--akzent-hell)} .kk-punkt:last-child{border-right:0} .kk-punkt .ico{color:var(--akzent)} .kk-punkt strong{display:block;font-size:19px;line-height:1.2} .kk-punkt span{display:block;font-size:14px;line-height:1.45;color:var(--nebentext)} .js .kinokopf .kk-an{opacity:0} .kinokopf.laeuft .kk-foto, .kinokopf.laeuft .kk-film{animation:kk-fahrt calc(var(--dur-takt) * 22) calc(var(--dur-takt) * .1) var(--ease-out) both} .kinokopf.laeuft .kk-lichtstreifen{animation:kk-licht calc(var(--dur-takt) * 2.1) calc(var(--dur-takt) * .45) var(--ease-out) both} .kinokopf.laeuft .kk-an{animation:kk-auf calc(var(--dur-takt) * .85) var(--ease-out) both} .kinokopf.laeuft .kk-1{animation-delay:calc(var(--dur-takt) * .12)} .kinokopf.laeuft .kk-2{animation-delay:calc(var(--dur-takt) * .28)} .kinokopf.laeuft .kk-3{animation-delay:calc(var(--dur-takt) * .46)} .kinokopf.laeuft .kk-4{animation-delay:calc(var(--dur-takt) * .62)} .kinokopf.laeuft .kk-5{animation-delay:calc(var(--dur-takt) * .86)} @keyframes kk-fahrt{from{transform:scale(1.12)}to{transform:scale(1)}} @keyframes kk-auf{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}} @keyframes kk-licht{0%{transform:translateX(0) skewX(-12deg);opacity:0} 25%{opacity:1}100%{transform:translateX(430%) skewX(-12deg);opacity:0}} @media (prefers-reduced-motion:reduce){ .js .kinokopf .kk-an{opacity:1;transform:none} .kinokopf .kk-foto,.kinokopf .kk-film,.kinokopf .kk-lichtstreifen{animation:none !important;transform:none} } /* Kopfzeile schwebt ueber dem Bild (, zwei Logos .logo-farbig und .logo-weiss in .marke). Der negative Abstand gehoert an den Kopfbereich, nicht an die Kopfzeile, sonst klebt sie nicht mehr (Gartenbau Spitzer). 78px = Hoehe der Kopfzeile, beim Kunden nachmessen. */ .kopf-ueber .kinokopf{margin-top:-78px} .kopf-ueber .kopfzeile{background:transparent;border-bottom-color:transparent;backdrop-filter:none; transition:background-color var(--dur-2) var(--ease-out),border-color var(--dur-2) var(--ease-out)} .marke .logo-weiss{display:none} .kopf-ueber .marke .logo-farbig{display:none} .kopf-ueber .marke .logo-weiss{display:block} .kopf-ueber .hauptmenue a:not(.knopf){color:#fff} .kopf-ueber .burger span{background-color:#fff} .kopf-ueber.kopf-fest .kopfzeile{background-color:rgba(255,255,255,.96);backdrop-filter:blur(6px); border-bottom-color:var(--linie)} .kopf-ueber.kopf-fest .marke .logo-farbig{display:block} .kopf-ueber.kopf-fest .marke .logo-weiss{display:none} .kopf-ueber.kopf-fest .hauptmenue a:not(.knopf){color:var(--tinte)} .kopf-ueber.kopf-fest .burger span{background-color:var(--tinte)} html:not(.js) .kopf-ueber .kinokopf{margin-top:0} html:not(.js) .kopf-ueber .kopfzeile{background-color:rgba(255,255,255,.96);border-bottom-color:var(--linie)} html:not(.js) .kopf-ueber .marke .logo-farbig{display:block} html:not(.js) .kopf-ueber .marke .logo-weiss{display:none} html:not(.js) .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)} html:not(.js) .kopf-ueber .burger span{background-color:var(--tinte)} @media (max-width:900px){ .kk-buehne{min-height:clamp(500px,78vh,700px)} .kk-innen{padding-top:104px;padding-bottom:104px} .kk-leiste{grid-template-columns:repeat(2,1fr);margin-top:-56px} .kk-punkt{min-height:98px;border-bottom:1px solid var(--akzent-hell)} .kk-punkt:nth-child(2n){border-right:0} .kk-punkt:nth-child(n+3){border-bottom:0} /* das Handymenue klappt als weisse Flaeche auf, dort dunkle Schrift */ .kopf-ueber .hauptmenue a:not(.knopf){color:var(--tinte)} } @media (max-width:600px){ /* Handy: Schrift unten auf dem Bild, Schleier von unten. Stehen wichtige Dinge am Bildrand des Hochformat-Fotos (LK Friseure: die Scheren in den Haenden), das Foto in voller Breite oben zeigen statt es auf die hohe Buehne zuzuschneiden: picture und .kk-film-hoch mit bottom:auto;height:auto;aspect-ratio:9/16, darunter die Buehne in der gemessenen Farbe des unteren Bildrands fortsetzen. */ .kk-innen{padding-bottom:84px} .kk-schleier{background-image:linear-gradient(to top in oklab,rgba(var(--schatten),.92) 0%, rgba(var(--schatten),.78) 36%,rgba(var(--schatten),.2) 54%,rgba(var(--schatten),.06) 72%, rgba(var(--schatten),.4) 100%)} .kk-innen h1{max-width:none} .kk-foto,.kk-film{object-position:50% 50%} .kk-leiste{grid-template-columns:1fr;margin-top:-44px} .kk-punkt{min-height:0;padding:18px 20px;border-right:0} .kk-punkt:nth-child(n+3){border-bottom:1px solid var(--akzent-hell)} .kk-punkt:last-child{border-bottom:0} } /* ================================================================ Foto-Kino (Baukasten, 13.09.2026; aus LK Friseure "Frisuren-Kino") HTML und Skript: werkzeuge/bausteine-fotokino.py. Karten-Faecher im Hochformat 3:4, die mittlere Karte spielt einen kurzen Film, links und rechts warten die naechsten schraeg im Raum. Storyleiste oben, optional ein Zeichen (Monogramm), das sich bei jedem Wechsel zeichnet. Pruefen: werkzeuge/pruefe-fotokino.mjs. Der Faecher traegt data-asym="gewollt", damit pruefe-seiten.mjs ihn nicht als schief meldet. ================================================================ */ .fk{position:relative;overflow:hidden;margin-top:14px;padding:22px 0 6px; --kb:clamp(230px,30vw,380px)} .fk-buehne{position:relative;height:calc(var(--kb) * 4 / 3);perspective:1600px; touch-action:pan-y pinch-zoom} .fk-karte{position:absolute;top:0;left:50%;width:var(--kb);aspect-ratio:3/4; margin:0 0 0 calc(var(--kb) / -2);border-radius:18px;overflow:hidden; background-color:var(--grau);cursor:pointer; box-shadow:0 26px 50px -20px rgba(var(--schatten),.5),0 2px 6px rgba(var(--schatten),.14); transform:translateX(calc(var(--d,0) * 64%)) rotateY(calc(var(--d,0) * -18deg)) scale(calc(1 - var(--a,0) * .15)); transition:transform calc(var(--dur-takt) * .9) var(--ease-out), opacity var(--dur-3) var(--ease-out),filter var(--dur-3) var(--ease-out); will-change:transform} /* Tiefe ueber Helligkeit, nicht ueber Deckkraft: halbdurchsichtige Karten liessen die Karte dahinter durchscheinen */ .fk-karte:not(.fk-aktiv){filter:saturate(calc(1 - var(--a,0) * .12)) brightness(calc(1 - var(--a,0) * .05))} .fk-aktiv{cursor:default} .fk-weg{opacity:0;visibility:hidden;pointer-events:none} .fk-karte img,.fk-film{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;display:block;margin:0} .fk-film{opacity:0;transition:opacity var(--dur-3) var(--ease-out)} .fk-film-laeuft .fk-film{opacity:1} /* Karte ohne Film: das Foto zoomt langsam, damit auch sie sich bewegt */ .fk-aktiv.fk-ohne-film img{animation:fk-zoom calc(var(--dur-takt) * 6) var(--ease-zug) both} @keyframes fk-zoom{from{transform:scale(1)}to{transform:scale(1.07)}} /* Glanz, der beim Wechsel einmal ueber das Bild streicht */ .fk-karte::before{content:"";position:absolute;top:0;bottom:0;left:0;width:55%;z-index:2; pointer-events:none;opacity:0;transform:translateX(-120%) skewX(-12deg); background-image:linear-gradient(100deg in oklab,rgb(255 255 255 / 0), rgb(255 255 255 / .34) 50%,rgb(255 255 255 / 0))} .fk-glanz::before{animation:fk-glanz calc(var(--dur-takt) * 1.3) var(--ease-in-out) calc(var(--dur-takt) * .6) 1 both} @keyframes fk-glanz{ from{opacity:1;transform:translateX(-120%) skewX(-12deg)} to{opacity:1;transform:translateX(260%) skewX(-12deg)}} /* Rahmen ueber der mittleren Karte: Storyleiste und Zeichen */ .fk-rahmen{position:absolute;top:0;left:50%;width:var(--kb);aspect-ratio:3/4; margin-left:calc(var(--kb) / -2);z-index:30;pointer-events:none} .fk-leiste{position:absolute;top:12px;left:12px;right:12px;display:flex;gap:3px} .fk-strich{flex:1;height:3px;border-radius:3px;overflow:hidden; background-color:rgb(255 255 255 / .45);box-shadow:0 0 3px rgba(var(--schatten),.35)} .fk-strich i{display:block;height:100%;background-color:#fff; transform:scaleX(0);transform-origin:left center} .fk-voll i{transform:scaleX(1)} /* Dauer der Storyleiste = TAKT im Skript (5200 ms = 5.2 Takte) */ .fk-jetzt i{animation:fk-lauf calc(var(--dur-takt) * 5.2) linear both} .fk-pause .fk-jetzt i{animation-play-state:paused} @keyframes fk-lauf{to{transform:scaleX(1)}} .fk-zeichen{position:absolute;left:50%;top:50%;width:48%;overflow:visible;opacity:0; transform:translate(-50%,-50%); filter:drop-shadow(0 2px 10px rgba(var(--schatten),.55))} .fk-zeichen line{stroke:#fff;stroke-width:12;stroke-dasharray:1;stroke-dashoffset:1} .fk-zeichnet .fk-zeichen{animation:fk-zeichen calc(var(--dur-takt) * 2.4) var(--ease-in-out) both} .fk-zeichnet .fk-zeichen line{animation:fk-strich calc(var(--dur-takt) * .5) var(--ease-out) calc(var(--dur-takt) * (.12 + var(--n) * .15)) both} @keyframes fk-zeichen{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.9)} 10%{opacity:1} 62%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.06)}} @keyframes fk-strich{to{stroke-dashoffset:0}} .fk-steuer{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:24px} .fk-pfeil{width:48px;height:48px;border-radius:50%;display:inline-flex;align-items:center; justify-content:center;padding:0;cursor:pointer;background-color:#fff; border:1px solid var(--linie);color:var(--akzent-dunkel); transition:background-color var(--dur-2) var(--ease-out),color var(--dur-2) var(--ease-out), border-color var(--dur-2) var(--ease-out),transform var(--dur-1) var(--ease-out)} .fk-pfeil:hover{background-color:var(--akzent);border-color:var(--akzent);color:#fff} .fk-pfeil:active{transform:scale(.94)} .fk-zaehler{min-width:78px;text-align:center;font-size:14px;font-weight:500; letter-spacing:.06em;color:var(--nebentext);font-variant-numeric:tabular-nums;white-space:nowrap} .fk-zaehler b{font-weight:700;color:var(--tinte)} .fk-knopfreihe{justify-content:center;margin-top:26px} /* Handy: Nachbarn schauen nur halb herein */ @media (max-width:640px){ .fk{--kb:min(64vw,300px)} .fk-leiste{gap:2px;left:10px;right:10px} .fk-karte{transform:translateX(calc(var(--d,0) * 76%)) rotateY(calc(var(--d,0) * -14deg)) scale(calc(1 - var(--a,0) * .18))} } /* Vor dem Start, ohne JavaScript, Bewegung reduzieren */ .fk:not(.fk-bereit) .fk-karte:not(:first-child){opacity:0} html:not(.js) .fk-karte:not(:first-child){display:none} html:not(.js) .fk-steuer,html:not(.js) .fk-rahmen{display:none} @media (prefers-reduced-motion:reduce){ .fk-jetzt i{transform:scaleX(1)} .fk-film{display:none} }