` statt Aufklapper aus JavaScript: dieselbe Bedienung, kein
Skript — und der Text darin wird gelesen und indexiert.
--------------------------------------------------------------------------- */
.frage { border-bottom: 1px solid var(--linie); scroll-margin-top: 100px; }
.frage:first-of-type { border-top: 1px solid var(--linie); }
.frage > summary {
list-style: none; cursor: pointer;
display: grid; grid-template-columns: 1fr 20px; gap: 20px; align-items: start;
padding: 24px 0;
font-family: var(--schrift-titel); font-size: clamp(18px, 1.7vw, 22px);
font-weight: 600; line-height: 1.3; color: var(--titel); transition: color .2s;
}
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary:hover { color: var(--orange); }
.frage > summary::after {
content: ""; grid-column: 2; justify-self: end; margin-top: 8px;
width: 15px; height: 15px;
background:
linear-gradient(var(--orange), var(--orange)) center/100% 3px no-repeat,
linear-gradient(var(--orange), var(--orange)) center/3px 100% no-repeat;
}
/* Zugeklappt ein Plus, aufgeklappt ein Minus. NICHT drehen — sonst steht der
Strich hochkant und aus dem Minus wird ein senkrechter Strich. */
.frage[open] > summary::after { background-size: 100% 3px, 0 0; }
.frage__text { padding: 0 0 30px; max-width: 800px; }
.frage__text ol, .frage__text ul { margin: 0 0 16px; padding-left: 22px; }
.frage__text li { font-size: 16px; line-height: 30.4px; margin-bottom: 8px; }
.frage__text li::marker { color: var(--orange); }
/* ---------------------------------------------------------------------------
KENNZAHLEN
--------------------------------------------------------------------------- */
.gitter {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 1px; background: var(--linie); border: 1px solid var(--linie);
margin-top: 34px;
}
.gitter > * {
background: var(--flaeche); padding: 28px 24px;
display: flex; flex-direction: column; justify-content: flex-end;
margin: 0; min-width: 0; min-height: 220px;
}
.gitter .breit { grid-column: span 2; }
.gitter .leer { padding: 0; }
.gitter figure { padding: 0; overflow: hidden; }
.gitter figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.gitter h2 { margin-top: 0; }
.kennzahl b {
display: block; font-family: var(--schrift-titel); font-weight: 700;
font-size: clamp(34px, 4vw, 56px); line-height: 1; color: var(--titel);
font-variant-numeric: tabular-nums; margin-bottom: auto;
}
.kennzahl .etikett { margin: 14px 0 0; }
@media (max-width: 56.25rem) {
.gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.gitter .breit { grid-column: span 2; }
}
/* Unter 480 px passt keine zweite Spalte mehr: „Güteschutz Kanalbau" ist in
180 px nicht unterzubringen und schob die ganze Seite 14 px nach rechts.
Gefunden hat das nicht das Auge, sondern `ueberlauf.py`. */
@media (max-width: 30rem) {
.gitter { grid-template-columns: 1fr; }
.gitter .breit { grid-column: span 1; }
.gitter > * { min-height: 170px; }
}
.gitter > * { overflow-wrap: break-word; }
/* ---------------------------------------------------------------------------
REIHENLISTE
--------------------------------------------------------------------------- */
.reihen { border-top: 1px solid var(--linie); margin-top: 34px; }
.auf-tief .reihen { border-color: rgba(255,255,255,.2); }
.reihe {
display: grid; grid-template-columns: 64px 1fr auto; gap: 30px;
align-items: center; padding: 30px 0;
border-bottom: 1px solid var(--linie); color: inherit;
transition: padding-left .35s ease;
}
.auf-tief .reihe { border-color: rgba(255,255,255,.2); }
.reihe:hover { padding-left: 16px; }
.reihe__nr {
font-family: var(--schrift-titel); font-size: 15px; font-weight: 600;
letter-spacing: 1px; color: var(--orange); font-variant-numeric: tabular-nums;
}
.reihe h3 { margin-bottom: 6px; }
.reihe p { padding-bottom: 0; }
@media (max-width: 48rem) {
.reihe { grid-template-columns: 44px 1fr; }
.reihe > .chip { display: none; }
}
/* ---------------------------------------------------------------------------
BILDKARTEN
--------------------------------------------------------------------------- */
.raster {
display: grid; gap: 1px; background: var(--linie); margin-top: 34px;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.karte { position: relative; overflow: hidden; display: block;
background: var(--leiste); color: #fff; }
.karte img { width: 100%; aspect-ratio: 3/4; object-fit: cover; transition: transform .7s ease; }
.karte:hover img { transform: scale(1.04); }
.karte__text {
position: absolute; inset: auto 0 0 0; padding: 24px 22px 20px;
background: linear-gradient(180deg, transparent, rgba(0,0,0,.88) 62%);
}
.karte h3 { color: #fff; }
.karte .etikett { color: var(--orange); margin: 8px 0 0; }
/* ---------------------------------------------------------------------------
REFERENZEN MIT KENNWERTEN
--------------------------------------------------------------------------- */
.ref { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spalt);
align-items: center; padding: 40px 0; }
.ref--gedreht > *:first-child { order: 2; }
.ref img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.kennwerte {
display: flex; flex-wrap: wrap; gap: 1px; margin: 20px 0 0;
background: var(--linie); border: 1px solid var(--linie);
}
.kennwerte > div { background: var(--flaeche); padding: 14px 18px; flex: 1 1 130px; }
.kennwerte dt { font-size: 13px; color: var(--grau); }
.kennwerte dd {
margin: 4px 0 0; font-family: var(--schrift-titel); font-size: 22px;
font-weight: 700; color: var(--titel); font-variant-numeric: tabular-nums;
}
.auf-tief .kennwerte { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.2); }
.auf-tief .kennwerte > div { background: var(--leiste); }
.auf-tief .kennwerte dt { color: rgba(255,255,255,.7); }
.auf-tief .kennwerte dd { color: #fff; }
@media (max-width: 56.25rem) {
.ref { grid-template-columns: 1fr; }
.ref--gedreht > *:first-child { order: 0; }
}
/* ---------------------------------------------------------------------------
DER HALBE DUNKLE BLOCK
Gemessen: rechte Haelfte randlos, Verlauf senkrecht, Textspalte 427,
Innenabstand 6 % der Blockbreite. Links liegt die Handzeichnung als
Parallaxbild ueber die volle Breite — nicht nur in der linken Haelfte.
--------------------------------------------------------------------------- */
.halb {
display: grid; grid-template-columns: 1fr 1fr;
background-position: 50% 0%; background-size: cover;
background-attachment: fixed; background-repeat: no-repeat;
}
.halb__block {
background: linear-gradient(180deg, rgb(148,149,153) 0%,
rgb(68,71,75) 50%, rgb(68,71,75) 100%);
color: #fff; padding: 96px 6% 184px;
}
.halb__block > * { max-width: 450px; }
.halb__block h2, .halb__block h3 { color: #fff; }
.halb__block .satz { border-left: 2px solid var(--orange); padding-left: 21px; }
.halb__block .satz p { color: #fff; padding-bottom: 0; max-width: 427px; }
.halb__block .satz + .satz { margin-top: 30px; }
/* `fixed` ist auf Telefonen unzuverlaessig. */
@media (max-width: 56.25rem) {
.halb { grid-template-columns: 1fr; background-attachment: scroll; }
.halb__leer { display: none; }
.halb__block { padding: 60px 6%; }
}
/* ---------------------------------------------------------------------------
FUSSBEREICH
--------------------------------------------------------------------------- */
.fuss { background: var(--leiste); color: #fff; padding: 16px 0 23px; }
.fuss__innen {
width: min(80%, var(--spalte)); margin-inline: auto;
display: grid; grid-template-columns: 225fr 795fr; gap: var(--spalt);
align-items: start;
}
.fuss__marke img { width: 59px; height: 59px; }
.fuss__unten {
margin-top: 10px; font: 500 13px/20px var(--schrift-text);
color: rgba(255,255,255,.86); text-align: left; hyphens: none; padding-bottom: 0;
}
/* DREI Spalten, gemessen an x = 465 / 730 / 995 bei je 265 Breite — die
dritte traegt die Kanalknoepfe. Der erste Nachbau hatte nur zwei und
schob die Knoepfe unter die Rechtsverweise. */
.fuss__spalten { display: grid; grid-template-columns: repeat(3, 265fr); gap: 0; }
.fuss__spalten > * { min-width: 0; }
/* Jeder Fussverweis steht in der Vorlage in einem
: 3 px Randstrich in der Hausfarbe, 20 px Abstand dahinter. Der Strich links neben LANDSCHAFTSBAU, STRASSENBAU, TIEFBAU, IMPRESSUM, DATENSCHUTZ — im ersten Nachbau fehlte er ganz. */ .fuss__nav blockquote { border-left: 3px solid var(--orange); padding: 0 0 0 20px; margin: 0 0 13px; line-height: 30.4px; } .fuss__nav p { margin: 0 0 13px; padding-bottom: 0; line-height: 30.4px; } /* Gemessen: Oswald 10/30,4 in 500 — und WEISS, nicht in der Hausfarbe. Der Rechenwert am sagt orange; darin sitzt aber ein mit `color: #fff`, und der traegt den Text. Wer nur das misst, misst die falsche Farbe. Die Pixelprobe entscheidet: rgb(255,255,255). Orange ist im Fuss nur der Randstrich links. */ .fuss a { font-family: var(--schrift-titel); font-size: 10px; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; color: #fff; } .fuss a:hover { color: var(--orange); } .fuss a.fuss__ruf { font-family: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; color: rgba(255,255,255,.86); } .sozial { display: flex; gap: 8px; margin: 8px 0 0; padding-bottom: 0; } /* Gemessen: 32 x 32, KEIN Kasten, Zeichen in der Hausfarbe. Der erste Nachbau setzte orange Quadrate mit dunklem Zeichen — auffaelliger als die Vorlage und damit keine Kopie. */ .sozial a { width: 32px; height: 32px; background: transparent; display: grid; place-items: center; color: var(--orange); } .sozial a:hover { color: #fff; } .sozial svg { width: 17px; height: 17px; fill: currentColor; } @media (max-width: 56.25rem) { .fuss__innen, .fuss__spalten { grid-template-columns: 1fr; gap: 24px; } } /* --------------------------------------------------------------------------- FORMULAR --------------------------------------------------------------------------- */ .formfeld { display: block; margin-bottom: 20px; } .formfeld > span { display: block; font-family: var(--schrift-text); font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--titel); margin-bottom: 6px; } .formfeld input, .formfeld textarea, .formfeld select { width: 100%; padding: 13px 15px; border: 1px solid var(--linie); border-radius: 0; background: var(--flaeche); font-family: var(--schrift-text); font-size: 16px; color: var(--ink); } .formfeld input:focus, .formfeld textarea:focus { border-color: var(--orange); outline: none; } .formfeld textarea { min-height: 190px; resize: vertical; line-height: 26px; } /* Gleiches Problem wie bei der Sprungmarke — dieselbe Loesung. */ .honig { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .hinweis { border-left: 3px solid #C0392B; background: #FDF2F0; padding: 14px 18px; margin-bottom: 24px; color: #7B241C; text-align: left; hyphens: none; } .einwilligung { display: flex; gap: 12px; align-items: flex-start; margin: 20px 0; } .einwilligung input { width: 20px; height: 20px; flex: none; margin-top: 5px; } .einwilligung span { font-size: 14px; line-height: 24px; } /* --------------------------------------------------------------------------- Reste aus dem alten Stilblatt, die im Markup noch vorkommen. Sie sollen NICHTS mehr tun — aber auch nichts kaputt machen. --------------------------------------------------------------------------- */ .w { display: inline; } /* war die Wort-fuer-Wort-Einblendung */ .auf { opacity: 1; transform: none; } /* war die Scroll-Einblendung */ /* Altlast aus der ersten Entwurfsphase. Diese drei Klassen gibt es in keiner Seite mehr; sie stehen hier nur, falls ein alter Entwurf noch irgendwo liegt. Hier stand einmal auch `.klappe` — und weil es hier stand, war das Ausklappmenue spaeter global auf `display: none`: es war da, hatte aber 0 x 0 und war unsichtbar. Das Menue ist am 03.09.2026 wieder ausgebaut worden; die Falle sei trotzdem festgehalten, falls es je wiederkommt. */ .burger, .menuSchalter, .handymenu { display: none; } .karriere__leute { display: none; } /* --------------------------------------------------------------------------- DRUCK — eine Anfrage wird ausgedruckt und in die Akte gelegt. --------------------------------------------------------------------------- */ @media print { .kopf, .fuss, .krumen, .chipRow, .folie__linie, .sprung { display: none !important; } .folie, .held { min-height: auto; padding: 30px 0; } .folie::before, .held::before, .folie__bild { display: none; } .folie h1, .folie p, .folie__fuss { color: #000; } body { font-size: 11pt; line-height: 1.5; color: #000; } a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; } } /* =========================================================================== BAUSTEINE DER UNTERSEITEN — nachgemessen, nicht entworfen =========================================================================== Diese Bloecke gibt es auf der bestehenden Seite; in meiner ersten Fassung fehlten sie, weil ich die Unterseiten frei nachgeschrieben statt kopiert habe. Alle Werte stammen aus `bauplaene/`. ========================================================================= */ /* --- Kontaktkacheln, zwei nebeneinander (je 225 breit, 60 Abstand) ------- Gemessen: Symbol 64 x 64, Ueberschrift Poppins 14/600 Versalien #333, Text Roboto 14/500 Zeile 23,8 #666, Angabe fett 14/700. */ .kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; } .kachel img { width: 64px; height: 64px; margin-bottom: 26px; } .kachel h3, .kachel h4, h3.kachel__titel, h4.kachel__titel { font-family: Poppins, var(--schrift-text); font-size: 14px; font-weight: 600; line-height: 14px; letter-spacing: 0; text-transform: uppercase; color: var(--titel); padding-bottom: 10px; margin-bottom: 10px; } .kachel p { font-size: 14px; font-weight: 500; line-height: 23.8px; color: var(--grau); text-align: left; hyphens: none; padding-bottom: 0; } .kachel strong { font-weight: 700; } @media (max-width: 40rem) { .kacheln { grid-template-columns: 1fr; gap: 34px; } } /* --- Der Vorspann: 26 px ROBOTO im Blocksatz, nicht Oswald --------------- */ /* `.band h2` ist gewichtiger als eine blosse Klasse — deshalb hier mit Element davor. Ohne das erschien der 26-px-Vorspann als 60-px-Versalie. */ .band h2.vorspann, .vorspann { font-family: var(--schrift-text); font-size: 26px; font-weight: 500; line-height: 26px; color: var(--titel); text-align: justify; text-transform: none; margin: 0 0 20px; hyphens: manual; } /* --- Die mittlere Ueberschrift: 40 px ------------------------------------ */ .band h2.h40, .h40 { font-size: clamp(28px, 3vw, 40px); line-height: 1; } /* --- Randloser Bildabschnitt mit weissem Text --------------------------- Gemessen an der Strassenbauseite: Abschnitt 50 px oben / 55 unten, Zeile 27 px, Spalte 510 mit Verlauf `rgba(71,74,81,.74)` -> `rgba(43,46,51,.88)` und 30/45 Innenabstand. Ueberschrift Oswald 60/78 Versalien, Kasten 420, OHNE Breitengrenze. Absaetze als Zitat: 3 px Randstrich in der Hausfarbe, 20 px Abstand dahinter, 30 px Luft davor. ZWEI FEHLER, die hier gesteckt haben: 1 `max-width: 344px` an der Ueberschrift — auf der Startseite gemessen und dann ueberall angewandt. "STRASSENBAU" brach dadurch in zwei Zeilen ("STRASSENBA / U"). 2 Der dunkle Kasten hinter dem Text fehlte ganz: er ist keine Auflage, sondern der VERLAUFSHINTERGRUND DER SPALTE. Der Text stand damit unlesbar direkt auf dem Foto. */ .vollbild { position: relative; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat; color: #fff; /* Rueckfall. Das echte Polster steht am Element selbst — es ist je Abschnitt gemessen (Karriere 0, Strassenbau 50/55). */ padding: 50px 0 55px; } .vollbild__innen { width: min(80%, var(--spalte)); margin-inline: auto; } .vollbild h1, .vollbild h2 { color: #fff; font-size: clamp(32px, 4.2vw, 60px); line-height: 78px; text-transform: uppercase; max-width: none; margin: 0 0 24px; padding-bottom: 0; } /* Die Vorspannzeile ist KEINE Schlagzeile. Sie unter dieselbe Regel zu stellen, hat den Karriere-Abschnitt auf 2007 statt 581 px getrieben: ein langer Satz, umgebrochen mit 78 px Zeilen. Gemessen: Roboto 24/33,6 in 500. */ .vollbild h2.vorspann, .vollbild h2.h40, .vollbild h1.vorspann { font: 500 24px/33.6px "Roboto", system-ui, sans-serif; text-transform: none; margin: 0 0 24px; } .vollbild p { color: #fff; margin: 0 0 24px; padding-bottom: 0; } .vollbild :last-child { margin-bottom: 0; } .vollbild a { color: #fff; } /* Das Zitat mit dem orangen Randstrich — in der Vorlage ein. Es kommt auch ausserhalb der Bildabschnitte vor, deshalb allgemein. */ blockquote { border-left: 3px solid var(--orange); padding: 0 0 0 20px; margin: 30px 0 24px; } blockquote p:last-of-type { padding-bottom: 0; } .vollbild blockquote { color: #fff; } /* --- Leistungsliste: Titel links, Aufklapper rechts ---------------------- In der Vorlage ein Divi-Aufklapper mit JavaScript. Hier ``: gleiche Bedienung, kein Skript, und der Text darin wird indexiert. */ .liste { display: grid; grid-template-columns: 320px minmax(0, 660px); gap: 60px; align-items: start; } /* Der Aufklapper, an der FAQ-Seite gemessen: ein KASTEN, kein Trennstrich. 700 breit, Innenabstand 20 rundum, 1 px Rahmen #D9D9D9, weisser Grund, 29,69 px Abstand nach unten. Titel Roboto 16/16 in 700 auf #333333 mit 50 px Platz rechts fuer das Zeichen; Inhalt Roboto 14/23,8 in 600 auf #666666, 20 px unter dem Titel. Das Plus/Minus sitzt rechts, mittig, in #CCCCCC. Der erste Nachbau setzte statt des Kastens nur eine Linie darunter. Damit fehlten die 20 px Innenabstand — und JEDE Textstelle darin stand 21 px zu weit links. Allein das waren 307 Meldungen im Bericht. */ .liste__punkt { border: 1px solid #D9D9D9; background: #fff; padding: 20px; margin-bottom: 29.69px; } .liste__punkt > summary { list-style: none; cursor: pointer; padding: 0 50px 0 0; position: relative; font: 700 16px/16px "Roboto", system-ui, sans-serif; color: var(--titel); } .liste__punkt > summary::-webkit-details-marker { display: none; } .liste__punkt > summary:hover { color: var(--orange); } .liste__punkt > summary::after { content: ""; position: absolute; right: 0; top: 50%; translate: 0 -50%; width: 13px; height: 13px; background: linear-gradient(#CCCCCC, #CCCCCC) center/100% 2px no-repeat, linear-gradient(#CCCCCC, #CCCCCC) center/2px 100% no-repeat; } .liste__punkt[open] > summary::after { background-size: 100% 2px, 0 0; } .liste__punkt > :not(summary) { margin-top: 20px; } .liste__punkt p { font: 600 14px/23.8px "Roboto", system-ui, sans-serif; color: var(--grau); padding-bottom: 14px; } .liste__punkt p:last-of-type { padding-bottom: 0; } @media (max-width: 56.25rem) { .liste { grid-template-columns: 1fr; gap: 30px; } } /* --- Zwei kleine Bilder nebeneinander (225 x 160) ------------------------ */ /* Gemessen: Kasten 225 x 160, Abstand 59,39 px in beide Richtungen, und das Modul traegt denselben Abstand noch einmal nach unten (2 Bilder = 219 px hoch, 4 = 439, 6 = 658). Die Spaltenzahl steht am Element, weil sie je Galerie gemessen ist. */ .galerie { display: grid; gap: 59.39px; padding-bottom: 59.39px; margin: 0; } .galerie > * { min-width: 0; } /* KEIN Beschnitt: Divis Vorschaubilder sind bereits 400 x 284 und passen in 225 x 160. `object-fit: cover` hat sie ein zweites Mal beschnitten — auf dem ersten Foto fehlte oben die Maschine. */ .galerie img { width: 100%; height: auto; } @media (max-width: 40rem) { .galerie { grid-template-columns: 1fr; gap: 20px; } } /* --- Eingebettetes Video, seitenverhaeltnistreu -------------------------- */ .video { position: relative; aspect-ratio: 624/351; background: var(--leiste); } .video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } /* --- Kleinere Textgroessen der Vorlage ----------------------------------- Die bestehende Seite setzt Fliesstext keineswegs durchgehend in 16/30,4. Sehr viele Bloecke laufen in 14/23,8 oder 15/27. Wer alles auf 16/30,4 setzt, macht jede Seite rund doppelt so hoch — genau das ist passiert. */ p.klein14, .klein14 { font-size: 14px; line-height: 23.8px; } p.klein15, .klein15 { font-size: 15px; line-height: 27px; } p.klein14:not([class~="etikett"]) { padding-bottom: 14px; } p.klein15:not([class~="etikett"]) { padding-bottom: 15px; } /* ---------------------------------------------------------------- spalten `.spalten` ist die uebernommene Divi-Zeile. Die Spaltenanteile stehen im Element selbst, weil sie GEMESSEN sind (510fr 510fr, 320fr 700fr, ...) und sich von Zeile zu Zeile unterscheiden — eine Klasse je Verhaeltnis waere ein Klassenfriedhof. Verschachtelung ist erlaubt: Divi legt in einer Spalte weitere Zeilen an. */ .spalten { display: grid; gap: var(--spalt); align-items: start; } .spalten > * { min-width: 0; } .spalten > div:empty { display: none; } /* Eine Spalte MIT Fuellung ist ein Kasten und darf nicht am Text kleben. */ .spalten > div[style*="background"] > :last-child { margin-bottom: 0; } .spalten > * > :first-child { margin-top: 0; } .spalten figure { margin: 0; } .spalten .spalten { gap: 30px; } @media (max-width: 56.25rem) { .spalten { grid-template-columns: 1fr !important; gap: 34px; } } /* ---------------------------------------------------------------- anfrage Gemessen an der Vorlage: Feld 16 px Roboto auf #EEE, 16 px Polster, kein Rahmen, kein Radius; zwei Felder je Zeile mit 15,8 px Luft; Nachricht und Knopf ueber beide Spalten. */ .anfrage { display: grid; grid-template-columns: 1fr 1fr; gap: 15.77px; margin-top: 24px; } .anfrage > * { min-width: 0; margin: 0; padding: 0; } .anfrage__feld--breit, .anfrage__haken { grid-column: 1 / -1; } .anfrage input[type="text"], .anfrage input[type="email"], .anfrage input[type="tel"], .anfrage textarea { width: 100%; padding: 16px; border: 0; border-radius: 0; background: #EEEEEE; color: var(--ink); font: 400 16px/1.5 "Roboto", system-ui, sans-serif; } .anfrage textarea { resize: vertical; min-height: 150px; display: block; } .anfrage ::placeholder { color: #999999; opacity: 1; } .anfrage :focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; } /* Ein Pflichtfeld, das nach dem Tippen leer bleibt, faerbt sich — ohne JavaScript, ueber `:user-invalid`. Vor der ersten Eingabe passiert nichts. */ .anfrage :user-invalid { box-shadow: inset 0 0 0 2px #C0392B; } .anfrage__haken { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font: 500 14px/1.6 "Roboto", system-ui, sans-serif; color: var(--grau); margin-top: 6px; } .anfrage__haken input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--orange); } /* Die Falle steht im Fluss, ist aber weder sichtbar noch anspringbar. `display:none` waere ein zu deutlicher Hinweis fuer ein Skript. */ .anfrage__falle { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* Gemessen: Roboto 14/500, 4,2 px oben und unten, 14 links und rechts, 2 px Rahmen in Schwarz, keine Versalien, kein Radius — 79 x 51 fuer "Senden". Der erste Anlauf war mit 18/28 Polster und Versalien deutlich groesser als die Vorlage. */ .knopf { display: inline-block; font: 500 14px/42px "Roboto", system-ui, sans-serif; padding: 4.2px 14px; border: 2px solid var(--ink); border-radius: 0; background: transparent; color: var(--ink); cursor: pointer; text-transform: none; letter-spacing: normal; text-decoration: none; transition: background .18s ease, color .18s ease; } .knopf:hover { background: var(--ink); color: #fff; } /* Sichtbar nur fuer Vorleser. Kein `display:none` — das wuerde die Beschriftung auch fuer sie unterschlagen. */ .nur-vorlesen { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } @media (max-width: 56.25rem) { .anfrage { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ karte Standbild statt eingebettetem Kartendienst — siehe bausteine/karte.html. */ .karte__bild { margin: 0 0 20px; } /* Im randlosen Abschnitt KEIN Abstand nach unten. Die Karte ist dort das letzte Element vor dem Fussbereich, und die 20 px fielen als weisser Streifen aus dem Abschnitt heraus (Rand-Zusammenfall: der Abschnitt hat selbst kein Polster). Gemessen am 03.09.2026: Karte endete bei 1492, Fussbereich begann bei 1512. */ .band--randlos .karte__bild { margin-bottom: 0; } .karte__bild img { width: 100%; height: auto; display: block; } /* Die allgemeine `figcaption`-Regel traegt einen orangen Randstrich — der gehoert zu Bildunterschriften im Text, nicht unter die Karte. In der Vorlage steht dort gar nichts; unser Pflichthinweis soll unauffaellig bleiben. */ .karte__bild figcaption { margin-top: 8px; color: var(--grau); border-left: 0; padding-left: 0; } /* ------------------------------------------------------------------ modul Die Huelle eines uebernommenen Divi-Moduls. Gemessen: 29,69 px Abstand nach unten, das letzte Modul einer Spalte ohne. Ohne diese Regel fehlten auf der Landschaftsbauseite rund 1.300 px ueber vierzehn Abschnitte. */ .modul { margin-bottom: 29.69px; } .modul:last-child { margin-bottom: 0; } /* Randloser Abschnitt: ueber die ganze Fensterbreite, ohne Polster. Divis `et_pb_fullwidth_section` kennt keine Zeile und keine Spalte. */ .band--randlos { padding-block: 0; } .band--randlos > * { width: 100%; max-width: none; } .band--randlos img { width: 100%; height: auto; display: block; max-width: none; } /* Die Karte behaelt ihre Hoehe, auch im randlosen Abschnitt: die Vorlage zeigt sie in jeder Fensterbreite 440 px hoch. Ohne diese Zeile wuchs sie bei 1440 px Fensterbreite auf 587 und die Seite auf das 1,17-fache. Hoehere Gewichtung als `.band--randlos img`, deshalb mit `.band` davor. */ .band .karte__bild img { width: 100%; height: 440px; object-fit: cover; } /*ist die Huelle um ein Bild, kein Kasten. `display: contents` laesst sie aus dem Aufbau verschwinden: das bleibt selbst das Kind von Raster oder Spalte. Ohne diese Zeile schob sich eine leere Zeilenschachtel dazwischen. */ picture { display: contents; } /* ... und dann MUSS `source` ausdruecklich verschwinden. Mit `display: contents` an der Huelle wird auch das
zum Rasterfeld: im Galerieraster belegte es je Bild eine eigene Zelle, aus zwei Zeilen wurden vier, und der Abschnitt war 439 px zu hoch. Fuer die Bildauswahl spielt `display` keine Rolle — die entscheidet der Browser beim Laden. */ picture > source { display: none; } /* Die Leiste blendet sich nur auf der STARTSEITE ein: dort liegt sie ueber einem bildschirmfuellenden Kopfbild, und die Vorlage macht es genauso. Auf einer Unterseite beginnt der Inhalt sofort — eine Leiste, die erst nach 120 px Scrollen erscheint, liesse den Besucher oben ohne Menue stehen. Dort steht sie im Fluss und bleibt beim Scrollen kleben. */ body.unterseite .kopf { position: sticky; animation: none; opacity: 1; transform: none; } /* ---------------------------------------------------------------- trenner Divis Trennstrich, gemessen: Kasten 200 x 23, oben 3 px in der Hausfarbe. Er steht ueber fast jeder Abschnittsueberschrift der Vorlage. */ .trenner { width: 200px; max-width: 100%; height: 23px; margin: 0; border: 0; border-top: 3px solid var(--orange); } /* ------------------------------------------------------------------- jobs Die freigestellten Mitarbeiter stehen in der Vorlage NICHT auf weiss, sondern ueber einem Landschaftsfoto. Divi legt es als eigene Ebene (`et_parallax_bg`, 1440 x 1154, `cover 50% 0%`) hinter den Inhalt. Ohne diese Ebene sah man erst eine gruene Flaeche (die verlorene Durchsichtigkeit), dann eine weisse — beides falsch. */ .jobs { position: relative; margin-top: 64px; /* Das Bild steht AM ELEMENT, nicht hier: nur dort schreiben `ausliefern.py` und `anklicken.py` den Pfad um. */ background-size: cover; background-position: 50% 0%; background-repeat: no-repeat; } .jobs img { display: block; width: 100%; height: auto; } /* Zwei-Klick-Karte: Standbild, Knopf, danach die Google-Karte an derselben Stelle. Die Hoehe bleibt gleich, damit beim Laden nichts springt. */ .karte__laden { display: flex; align-items: center; gap: 16px; margin: 12px 0 0; flex-wrap: wrap; } .karte__laden .klein14 { color: var(--grau); padding-bottom: 0; } .karte--zweiklick iframe { display: block; width: 100%; height: 440px; border: 0; } /* ----------------------------------------------------------- einwilligung Das Banner steht unten und ueberdeckt nichts Wichtiges. Beide Knoepfe sind gleich gross und gleich auffaellig: eine Ablehnung, die schwerer zu finden ist als die Zustimmung, ist keine freie Wahl — und damit keine wirksame Einwilligung. */ .einwilligung { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--leiste); color: #fff; border-top: 2px solid var(--orange); box-shadow: 0 -8px 24px rgba(0,0,0,.18); } .einwilligung__innen { width: min(80%, var(--spalte)); margin-inline: auto; padding: 22px 0; display: grid; grid-template-columns: 1fr auto; gap: 30px; align-items: center; } .einwilligung__titel { font-family: var(--schrift-titel); font-size: 18px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; padding-bottom: 6px; } .einwilligung .klein14 { color: rgba(255,255,255,.88); padding-bottom: 0; } .einwilligung a { color: var(--orange); text-decoration: underline; } .einwilligung__knoepfe { display: flex; gap: 12px; margin: 0; padding-bottom: 0; } .einwilligung .knopf { border-color: #fff; color: #fff; white-space: nowrap; } .einwilligung .knopf:hover { background: #fff; color: var(--leiste); } .einwilligung .knopf--voll { background: var(--orange); border-color: var(--orange); color: var(--ink); } .einwilligung .knopf--voll:hover { background: #fff; border-color: #fff; } @media (max-width: 56.25rem) { .einwilligung__innen { grid-template-columns: 1fr; gap: 16px; } .einwilligung__knoepfe { flex-wrap: wrap; } .einwilligung .knopf { flex: 1 1 auto; } } /* ------------------------------------------------------------- bildschau Die Vorlage verlinkt jedes Referenzbild auf seine grosse Fassung. Hier legt sich das grosse Bild ueber die Seite; Klick oder Esc schliesst es. Ohne JavaScript oeffnet der Verweis das Bild ganz gewoehnlich. */ .lupe { display: block; cursor: zoom-in; } .bildschau { position: fixed; inset: 0; z-index: 100; cursor: zoom-out; background: rgba(26, 26, 26, .92); display: grid; place-items: center; padding: 5vmin; } .bildschau img { max-width: 100%; max-height: 90vh; width: auto; height: auto; display: block; box-shadow: 0 20px 60px rgba(0,0,0,.5); } /* BILDUNTERSCHRIFT in der Vergroesserung. Sie fehlte: `bildSchau` zeigte nur das Bild, und damit war beim Aufziehen genau die Angabe verschwunden, die unter dem kleinen Bild noch stand — bei Referenzbildern also die Beschreibung der Baumassnahme. Die Hoehenrechnung muss zusammenpassen: das Bild darf 90vh hoch werden, die Unterschrift braucht Platz darunter. Deshalb hier `max-height: 78vh` fuer das Bild, sobald eine Unterschrift dabei ist. */ .bildschau__rahmen { display: grid; gap: 14px; justify-items: center; max-width: 100%; } .bildschau__rahmen img { max-height: 78vh; } .bildschau__text { margin: 0; max-width: min(92vw, 900px); text-align: center; font-family: var(--schrift-text); font-size: 14px; line-height: 23.8px; font-weight: 500; color: rgba(255, 255, 255, .92); } /* ------------------------------------------------------------------ pruefen NOCH NICHT GEPRUEFTE ZAHLEN. Sie stammen aus Erfahrungswerten, nicht aus den Leistungsverzeichnissen der PILOT GmbH. Bis jemand sie bestaetigt, sollen sie ins Auge fallen — eine erfundene Zahl auf einer Kostenseite ist die Sorte Fehler, die plausibel aussieht und erst beim Kunden auffaellt. Zum Freigeben: in `neue_seiten.py` die geschweiften Klammern entfernen bzw. `p()` weglassen. Dann verschwindet die Farbe von selbst. */ .pruefen { background: #FFF3D6; color: #8A5A00; box-shadow: 0 0 0 2px #FFD37A; border-radius: 2px; padding: 0 3px; font-weight: 600; } .pruefen::after { content: " ?"; font-weight: 700; } /* ------------------------------------------------------------------ preise Die Kostentabelle. Zahlen rechtsbuendig, damit sie vergleichbar sind. */ .preise { width: 100%; border-collapse: collapse; margin: 0; } .preise th, .preise td { text-align: left; padding: 14px 16px 14px 0; border-bottom: 1px solid var(--linie); vertical-align: top; } .preise th { font-family: var(--schrift-titel); font-size: 13px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; color: var(--titel); border-bottom-width: 2px; } .preise td { font: 500 15px/27px "Roboto", system-ui, sans-serif; color: var(--grau); } .preise td:nth-child(2) { white-space: nowrap; color: var(--titel); font-weight: 600; } .preise tr:last-child td { border-bottom: 0; } @media (max-width: 40rem) { .preise, .preise tbody, .preise tr, .preise td { display: block; width: 100%; } .preise thead { display: none; } .preise tr { border-bottom: 1px solid var(--linie); padding: 12px 0; } .preise td { border: 0; padding: 2px 0; } } /* --------------------------------------------------------------- preisblock Die Kachel bleibt — nur steht an der Stelle des Sinnbildes die ZAHL. Ein Bauhelm neben "Betonpflaster, Pkw-befahrbar" trug keine Information; der Preis ist das, weswegen jemand die Seite geoeffnet hat. Nichts Neues im Haus: Oswald wie jede Ueberschrift, der Strich ist der `trenner` auf 64 px gekuerzt — genau die Breite, die das Sinnbild hatte, damit der Rhythmus der Kacheln erhalten bleibt. */ .preis__wert { font-family: var(--schrift-titel); font-size: 28px; line-height: 34px; font-weight: 700; color: var(--titel); padding-bottom: 0; margin: 0; letter-spacing: -.5px; hyphens: none; overflow-wrap: break-word; } /* Die grosse Zahl bekommt ihre EIGENE Pruefmarkierung. Der gelbe Kasten aus dem Fliesstext zerriss bei 28 px die Zeile ("180 – 280 €/m²" / "?") und erschlug die Zahl. Hier bleibt sie lesbar; markiert wird ueber den gestrichelten Strich und das Woertchen darunter. */ .preis__wert .pruefen { background: none; box-shadow: none; color: inherit; padding: 0; font-weight: inherit; font-size: inherit; letter-spacing: inherit; } .preis__wert .pruefen::after { content: none; } .preis--pruefen .trenner--kurz { border-top-style: dashed; border-top-width: 3px; } .preis--pruefen .trenner--kurz + .pruefwort { display: block; } .pruefwort { display: none; margin-top: 6px; font-family: Poppins, var(--schrift-text); font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #8A5A00; } .trenner--kurz { width: 64px; height: 3px; margin: 12px 0 0; } /* Die Schrittzahl im Ablauf: dieselbe Behandlung, damit beide Abschnitte denselben Takt haben. */ .schritt__nr { font-family: var(--schrift-titel); font-size: 34px; line-height: 40px; font-weight: 700; color: var(--orange); padding-bottom: 0; margin: 0; }