/* ======================================================================= startseite.css — Seitenstylesheet der Startseite / Geladen ueber $pageCss nach site.css. Die gesamte Gestaltung der Startseite liegt bereits in site.css; hier steht nur, was der Startseite allein gehoert. ======================================================================= */ /* S4, Karte 4: Die Zeile "Jalousien, Raffstores und Lamellen" ist bis zum Launch der Jalousie-Unterseite KEIN Link. Sie uebernimmt Groesse, Abstand und Lage des bisherigen Zweitlinks (.svc .sublink in site.css) - ohne Unterstreichung, Linkfarbe, Hover- oder Fokuszustand. */ .svc .subtext{margin-top:2px;font-size:12.5px;color:var(--n700);align-self:flex-start} @media(max-width:960px){ .svc .subtext{display:inline-block;padding:5px 0} } /* Hero-Wasserzeichen bis 840 px: Die SVG-Box (76 % x 150 %) ist dort hoeher als breit. Mit preserveAspectRatio="xMidYMid slice" schneidet sie die Bildmarke seitlich ab - die linke Rahmenkante verschwindet. Loesung ohne Markup-Aenderung: quadratische Box (slice schneidet dann nichts ab) mit demselben Mittelpunkt (66 % / 63 %) und derselben Groesse (150 % der Hero-Hoehe) wie bisher - die Bildmarke liegt also unveraendert, nur der seitliche Anschnitt entfaellt. Erst unter ca. 450 px begrenzt 160vw die Groesse, damit die linke Kante im Bild bleibt. Ab 841 px ist die Box breiter als hoch, dort tritt kein Anschnitt auf. */ @media(max-width:840px){ .hero .water{top:63%;right:auto;left:66%;width:auto;height:min(150%,160vw);aspect-ratio:1;transform:translate(-50%,-50%)} } /* V1-Review ST-S4/ST-S6: Badge-Gruppe und verlinkte Projektkarten */ .proj{position:relative} .proj .ph .badges{position:absolute;left:10px;top:10px;z-index:2;display:flex;flex-wrap:wrap;gap:6px;max-width:calc(100% - 20px)} .proj .ph .badges .badge{position:static} .proj .projlink{color:inherit;text-decoration:none} .proj .projlink::after{content:"";position:absolute;inset:0;z-index:3} /* ======================================================================= V1-Review E3 · Block 2 · ST1-CSS: "Weitere Leistungen" Abschnitts-H2 mit der vorhandenen Klasse "h3" (21 px, BST-4), Unterzeile in normaler Textfarbe (Markup). Karten: Titel 20 px, Text 15 px, alle vier Karten vollstaendig klickbar (Karte 4 jetzt ), Akzent dezent ueber die Nummer in Rot. Raster: vier Karten in einer Reihe, 2 x 2 ab 560 px, darunter untereinander. Die nicht mehr genutzte Regel .svc .subtext bleibt stehen. ======================================================================= */ .svc h3{font-size:20px;line-height:1.3} .svc p{font-size:15px} .svc .n{color:var(--red)} @media(max-width:960px){ .svcs{grid-template-columns:1fr 1fr} } @media(max-width:559px){ .svcs{grid-template-columns:1fr} } /* ======================================================================= V1-Review E3 · Block 3 · HERO-K: goldene Einleitung zweizeilig (HV4, HV5, HA6) Jede Zeile ein eigener Block; "Marburg und Mittelhessen" und "Glas- und Photovoltaikreinigung" nicht trennbar. Groesse (17 px Desktop, 15 px mobil), Farbe, Schnitt und Sperrung bleiben aus .hero .kick in site.css. ======================================================================= */ .hero .kick .kl{display:block} .hero .kick .nb{white-space:nowrap} /* ======================================================================= V1-Review E3 · Block 3 · WM-H-S: Wasserzeichen im Startseiten-Hero (HV8, A2.2) Gerahmte Bildmarke unveraendert (Pfade im Markup), Weiss 10 %, rechts und unten angeschnitten. "Kantenlaenge" = sichtbarer Rahmen (21,4/28,4 der viewBox). Desktop (ab 961 px): Rahmen 720 px -> Box 955,5 px; Rahmen 200 px rechts und 180 px unten ueber den Hero-Rand. Linke Rahmenkante immer >= 24 px rechts vom Claim: Die Claimbreite ist proportional zur Schriftgroesse (gemessen 11,15 x Schriftgroesse; gerechnet mit 11,2), daher rueckt die Marke bei schmaleren Desktops nach rechts statt in den Claim. Mobil (bis 960 px): Rahmen 300 px -> Box 398,1 px; 70 px rechts, 75 px unten. Unter 360 px kein Motiv. Die aeltere Regel bis 840 px (Mittelpunktlage) wird hier vollstaendig ueberschrieben. ======================================================================= */ .hero .water{width:955.5px;height:955.5px;aspect-ratio:auto;opacity:.1;top:auto;right:auto;transform:none; bottom:-297.8px; left:max(calc(100% - 637.8px),calc(max(var(--gut),(100% - var(--wrap))/2 + var(--gut)) + clamp(38px,5.6vw,68px)*11.2 + 24px - 117.8px))} @media(max-width:960px){ .hero .water{width:398.1px;height:398.1px;left:auto;top:auto;right:-119.1px;bottom:-124.1px} } @media(max-width:359px){ .hero .water{display:none} } /* ======================================================================= E2-B (03.11.2026) - lokale Arbeitsfassung, NICHT FREIGEGEBEN. Anbindung an "Ruhige Praezision"; komponenten.css wird im Body nach dieser Datei geladen. Hero (W1) und Footer (W4) unveraendert. ======================================================================= */ /* Weitere Leistungen: K1-Karten wie "Am selben Objekt" der Leistungsseiten; Nummer als Kicker in Rot (wie bisher), Abschnitts-H2 21 px (BST-4) unveraendert */ .stweitere .vk-grid{margin-top:var(--s5)} .stweitere .vk-kick{color:var(--red);font-family:'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.06em;font-weight:500;font-size:12.5px} /* Projekte: zwei Textlinks unter den Karten */ .stprojlinks{margin-top:var(--s6);display:flex;flex-wrap:wrap;gap:var(--s3) var(--s7)} /* Inhaber: zwei gleichrangige, fotofreie Karten statt Platzhalter mit alter Wortmarke. Ein gemeinsames Inhaberfoto kann spaeter hier ergaenzt werden. */ .trust .stinh{flex:0 0 260px;display:grid;gap:var(--s3);align-content:center} .trust .stinh .vk-k3{min-height:0;padding:var(--s5)} .trust .stinh .vk-kick{color:var(--red)} .trust .stinh h3{font-size:19px} .stinhnote{margin:var(--s2) 0 0;font-size:13px;color:var(--n600)} .sttrustlinks{margin-top:var(--s6);display:flex;gap:var(--s3) var(--s7);flex-wrap:wrap} @media(max-width:960px){ .trust .stinh{flex-basis:auto;width:100%;grid-template-columns:repeat(2,minmax(0,1fr))} .stinhnote{grid-column:1 / -1} } @media(max-width:419px){ .trust .stinh{grid-template-columns:1fr} }