/* ═══════════════════════════════════════════════════════════════════ UNTERSEITEN · gemeinsame Basis (Runde 4) Spezifikation: unterseiten/GERUEST.md Regel 1 — Praefix: alles hier heisst u-*. Seiten-eigene Bausteine bekommen den Seiten-Praefix (k- klaro, w- webseiten, b- betreuung, p- projekte). Grund: in Runde 4 haben die globalen Hero-Klassen der Homepage (.satz / .still / .h2) zweimal neue Bausteine gekapert. Deshalb hier kein einziger generischer Selektor und keine nackten Element-Regeln ausser body / img / Fokus. Regel 2 — Klima: setzt den kompletten Farbsatz. Alle u-Bausteine lesen NUR diese Variablen. Dadurch erbt jede Unterseite ihre Tageszeit mechanisch, ohne dass Farben pro Seite nachgepflegt werden. Alle Werte stammen aus dem Tagbogen der Homepage — kein Gruen, kein Rot, kein Blau. ═══════════════════════════════════════════════════════════════════ */ @font-face{font-family:"Cabinet Grotesk";src:url("/schriften/CabinetGrotesk-800.woff2") format("woff2");font-weight:800;font-display:swap} @font-face{font-family:"Synonym";src:url("/schriften/Synonym-400.woff2") format("woff2");font-weight:400;font-display:swap} @font-face{font-family:"Synonym";src:url("/schriften/Synonym-500.woff2") format("woff2");font-weight:500;font-display:swap} :root{ /* Palette der Welt — identisch mit seite.html */ --nacht:#140D06; --horizont:#EFC083; --sonne:#FFD9A0; /* --knopf wird PRO KLIMA gesetzt, nicht hier. Hier stand kurz "--knopf:var(--akzent)" — das ist ungueltig, weil --akzent erst auf body[data-welt] existiert: die Eigenschaft wird an der Stelle ihrer Deklaration aufgeloest, war also leer, und die Knoepfe auf /klaro und /betreuung standen ohne Flaeche da. */ --warmweiss:#F6ECDC; --warmweiss-2:rgba(246,236,220,.8); --tinte:#241505; --tinte-2:rgba(36,21,5,.78); --rand:clamp(20px, 4.5vw, 64px); --bahn-breite:1120px; } /* ────────── Klima: Nacht ────────── */ body[data-welt="nacht"]{ --grund:#140D06; --verlauf:linear-gradient(180deg,#140D06 0%,#171008 42%,#120C05 100%); --bahn-oben:#140D06;--bahn-oben-0:rgba(20,13,6,0); --bahn-unten:#120C05; --schrift:var(--warmweiss); --schrift-2:var(--warmweiss-2); --karte:#1D1309; --karte-linie:rgba(246,236,220,.17); --linie:rgba(246,236,220,.28); --akzent:#FFD9A0; --akzent-schrift:#241505; --knopf:#FFD9A0; /* 13,24:1 gegen die Knopfschrift */ --wurf:0 26px 60px -30px rgba(0,0,0,.75); } /* ────────── Klima: Vormittag ────────── */ body[data-welt="vormittag"]{ --grund:#F6E4BE; --verlauf:linear-gradient(180deg,#F9EFD8 0%,#F4E2B8 46%,#EBD09A 100%); --bahn-oben:#F9EFD8;--bahn-oben-0:rgba(249,239,216,0); --bahn-unten:#EBD09A; --schrift:var(--tinte); --schrift-2:var(--tinte-2); --karte:#FBF4E2; --karte-linie:rgba(74,42,18,.35); --linie:rgba(36,21,5,.4); --akzent:#9C5717; /* 4,94:1 auf hellem Sand — traegt 12-px-Schrift */ --akzent-schrift:#FBF4E2; /* Der Knopf traegt Schrift und braucht deshalb mehr Kontrast als eine Linie oder ein Stempel. Gemessen 2026-07-30: --akzent gegen --akzent-schrift ergibt 3,87:1, und .u-knopf ist mit 17px/500 normaler Text — da gilt 4,5:1. Dieser Ton ergibt 5,05:1, der Akzent selbst bleibt unangetastet. */ --knopf:#9C5717; --wurf:-14px 18px 30px -16px rgba(74,42,18,.35); } /* ────────── Klima: Nachmittag ────────── */ body[data-welt="nachmittag"]{ --grund:#EBCB95; --verlauf:linear-gradient(180deg,#EDD3A0 0%,#E2B172 55%,#D49A57 100%); --bahn-oben:#EDD3A0;--bahn-oben-0:rgba(237,211,160,0); --bahn-unten:#D49A57; --schrift:var(--tinte); --schrift-2:var(--tinte-2); --karte:#F8ECD2; --karte-linie:rgba(74,42,18,.35); --linie:rgba(36,21,5,.4); --akzent:#7E4319; /* 4,93:1 auf Nachmittagssand */ --akzent-schrift:#FBF4E2; --knopf:#7E4319; /* zieht mit dem Akzent nach */ --wurf:-26px 26px 40px -22px rgba(74,42,18,.45); } /* ────────── Grundlage ────────── */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:var(--grund);color:var(--schrift); font:400 17px/1.6 "Synonym","Segoe UI",sans-serif; -webkit-font-smoothing:antialiased; } img{max-width:100%;display:block} a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--schrift);outline-offset:3px} .u-sprung{position:absolute;left:-9999px;background:var(--schrift);color:var(--grund);padding:10px 16px;z-index:99;text-decoration:none} .u-sprung:focus{left:16px;top:16px} /* ────────── Kopf: liegt ueber der Welt, kein eigener Balken ────────── */ .u-kopf{ position:absolute;top:0;left:0;right:0;z-index:20; display:flex;align-items:center;gap:16px;padding:22px var(--rand) 0; } .u-marke{ font-family:"Synonym",sans-serif;font-weight:500;font-size:18px;color:var(--schrift); text-decoration:none;display:inline-flex;align-items:center;gap:9px; } .u-marke::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--akzent);flex:none} .u-nav{margin-left:auto;display:flex;gap:clamp(16px,3vw,32px)} .u-nav a{font-size:16px;color:var(--schrift-2);text-decoration:none;padding-block:8px;position:relative} .u-nav a:hover{color:var(--schrift)} .u-nav a[aria-current="page"]{color:var(--schrift)} .u-nav a[aria-current="page"]::after{ content:"";position:absolute;left:0;right:0;bottom:2px;height:1.5px;background:var(--akzent); } /* Auf dem Telefon rutscht die Nav in eine zweite Zeile unter die Marke — sie wird NICHT ausgeduennt. Vorher blieben hier nur die aktive Seite und "Kontakt" stehen: von /projekte kam man auf dem Handy nicht nach /betreuung, und die Mehrheit der Besucher ist am Telefon (Prinzip 07). */ @media(max-width:680px){ .u-kopf{flex-wrap:wrap;row-gap:4px} .u-nav{margin-left:0;flex:1 0 100%;flex-wrap:wrap;gap:2px 18px} .u-nav a{font-size:15px;padding-block:10px} } /* ────────── Typografie ────────── */ .u-h1{ font-family:"Cabinet Grotesk","Segoe UI",sans-serif;font-weight:800;margin:0; font-size:clamp(34px, min(5.2vw, 7.2vh), 68px); line-height:1.04;letter-spacing:-.015em; max-width:16ch;overflow-wrap:break-word;text-wrap:balance; } /* Zweiton in Ueberschriften. Cabinet Grotesk 800 hat keinen kursiven Schnitt — ohne diese Regel stellt der Browser die Fettschrift schraeg. Stand zuerst nur fuer h1 hier und fuer h2/h3 in lp.css; seit die Landingpage-Verlinkung auch auf Hauptseiten Zweiton-h2 nutzt, gehoert sie in die Basis. */ .u-h1 em, .u-h2 em, .u-h3 em{font-style:normal;color:var(--akzent)} .u-h2{ font-family:"Cabinet Grotesk","Segoe UI",sans-serif;font-weight:800;margin:0; font-size:clamp(28px, 3.8vw, 50px);line-height:1.06;letter-spacing:-.012em;text-wrap:balance; } .u-h3{ font-family:"Cabinet Grotesk","Segoe UI",sans-serif;font-weight:800;margin:0 0 6px; font-size:clamp(19px, 1.9vw, 24px);line-height:1.14;letter-spacing:-.008em; } .u-stempel{ font:500 12.5px/1 "Synonym",sans-serif;letter-spacing:.16em;text-transform:uppercase; margin:0 0 14px;color:var(--schrift-2); } .u-lead{margin:16px 0 0;font-size:clamp(16.5px,1.7vw,19.5px);line-height:1.55;max-width:36rem;color:var(--schrift-2)} .u-lead b{font-weight:500;color:var(--schrift)} .u-text{margin:10px 0 0;font-size:16.5px;line-height:1.6;color:var(--schrift-2)} .u-text b{font-weight:500;color:var(--schrift)} .u-klein{margin:10px 0 0;font-size:14px;line-height:1.5;color:var(--schrift-2)} /* ────────── Handlungen ────────── */ .u-knopf{ display:inline-flex;align-items:center;justify-content:center; background:var(--knopf);color:var(--akzent-schrift); font-family:"Synonym",sans-serif;font-weight:500;font-size:17px; padding:10px 26px;min-height:54px;border:0;border-radius:999px;cursor:pointer; text-decoration:none;white-space:nowrap;transition:filter .12s ease; } .u-knopf:hover{filter:brightness(1.06)} .u-link{ font-size:16.5px;color:var(--schrift);text-decoration:none; border-bottom:1px solid var(--linie);padding-bottom:2px; } .u-link:hover{border-color:var(--schrift)} .u-handlung{margin-top:clamp(18px,3vh,30px);display:flex;align-items:center;gap:20px;flex-wrap:wrap} .u-kennzeichen{ display:inline-block; font:500 12.5px/1 "Synonym",sans-serif;letter-spacing:.14em;text-transform:uppercase; color:var(--schrift-2);border:1px solid var(--karte-linie);border-radius:999px;padding:8px 14px; } /* ────────── Bahnen: EIN Verlauf traegt alle Inhalts-Sektionen ────────── */ .u-bahnen{position:relative;background:var(--verlauf)} /* ────────── Nahtlose Uebergaenge ────────── Ben 2026-07-31: "die übergänge der hintergründe in den unterseiten zu abrupt … die farbänderungen müssen smooth ineinander faden und wirklich graduell ihren ton verändern wie das halt bei einem echten himmel auch wäre. das zieht sich durch alle seiten außer die homepage." Gemessen an den Abschnittsgrenzen (Farbabstand der gerenderten Pixel): die Homepage bleibt ueberall unter 12, die Unterseiten sprangen an drei Kanten — Hero→Bahnen 112 bis 148, Bahnen→Ausleitung 17 bis 80, Ausleitung→Fuss 50. Innerhalb der Bahnen wandert die Farbe laengst sauber (unter 1,5), weil dort ein Wrapper traegt. /klaro hatte die erste Kante schon geloest — sein .k-hero::after blendet auf die Bahnenfarbe, gemessen 1,7. Genau dieser Griff steht jetzt allen Heroes zur Verfuegung. Die Anschlussfarben sind aus den Verlaeufen abgeleitet (--bahn-oben/--bahn-unten), nicht abgetippt. */ /* 1 · Hero → Bahnen. z-index 1 setzt die Blende ueber Himmel und Sand (beide z auto), aber unter Detailobjekte (z 2) und Satz (z 3) — dieselbe Lage, die .k-hero::after auf /klaro schon hatte. Der Verlauf laeuft von der Bahnenfarbe mit Deckung 0 zu ihr selbst; "transparent" waere hier falsch, weil es rgba(0,0,0,0) bedeutet und die Blende ueber Schwarz interpolieren wuerde — auf hellem Sand ein sichtbarer Grauschleier. */ [class$="-hero"]::after{ content:"";position:absolute;left:0;right:0;bottom:0; height:clamp(160px,24vh,320px); pointer-events:none;z-index:1; background:linear-gradient(180deg,var(--bahn-oben-0) 0%,var(--bahn-oben) 100%); } /* 2 · Bahnen → Ausleitung. Die Ausleitung hatte gar keinen eigenen Grund und fiel deshalb hart auf --grund zurueck. Jetzt setzt sie mit der Farbe an, mit der die Bahnen aufhoeren. */ /* Der Weg zur Grundfarbe ist begrenzt, nicht ueber die ganze Hoehe gestreckt: zog er sich durch die volle Ausleitung, stand die Ueberschrift noch im dunkleren Teil und fiel auf 2,91:1 (gemessen /ueber-uns bei 390 px, noetig sind 3). Die Naht oben bleibt unberuehrt — nur der Uebergang ist kuerzer. */ .u-ausleitung{background:linear-gradient(180deg,var(--bahn-unten) 0,var(--grund) clamp(150px,20vh,260px))} /* 3 · Ausleitung → Fuss: steht weiter unten am Fuss selbst. */ .u-bahn{position:relative;padding:clamp(64px,11vh,132px) var(--rand)} .u-bahn + .u-bahn{padding-top:0} .u-innen{position:relative;max-width:var(--bahn-breite);margin:0 auto} .u-schmal{max-width:820px} .u-korn{ position:absolute;inset:0;pointer-events:none;opacity:.045;mix-blend-mode:overlay; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"); } .u-sterne{ position:absolute;inset:0;pointer-events:none;opacity:.5; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='920' height='460'%3E%3Cg fill='%23F6E7CE'%3E%3Ccircle cx='42' cy='38' r='1.1'/%3E%3Ccircle cx='188' cy='104' r='.8'/%3E%3Ccircle cx='310' cy='30' r='1.3' opacity='.8'/%3E%3Ccircle cx='428' cy='150' r='.7'/%3E%3Ccircle cx='540' cy='62' r='1'/%3E%3Ccircle cx='662' cy='118' r='.8' opacity='.7'/%3E%3Ccircle cx='772' cy='34' r='1.2'/%3E%3Ccircle cx='876' cy='96' r='.7'/%3E%3Ccircle cx='96' cy='196' r='.9' opacity='.7'/%3E%3Ccircle cx='250' cy='236' r='.7' opacity='.6'/%3E%3Ccircle cx='388' cy='288' r='.8' opacity='.5'/%3E%3Ccircle cx='508' cy='214' r='1' opacity='.6'/%3E%3Ccircle cx='640' cy='266' r='.7' opacity='.5'/%3E%3Ccircle cx='788' cy='222' r='.9' opacity='.6'/%3E%3Ccircle cx='138' cy='330' r='.7' opacity='.4'/%3E%3Ccircle cx='560' cy='352' r='.8' opacity='.4'/%3E%3Ccircle cx='840' cy='330' r='.7' opacity='.35'/%3E%3Ccircle cx='330' cy='396' r='.7' opacity='.3'/%3E%3C/g%3E%3C/svg%3E"); mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 58%,transparent 100%); } /* ────────── Karte (Grundform aller Inhalts-Flaechen) ────────── */ .u-karte{ position:relative;display:flex;flex-direction:column; background:var(--karte);border:1px solid var(--karte-linie);border-radius:14px; padding:clamp(18px,2.4vw,28px);box-shadow:var(--wurf); } .u-karte .u-text:first-child{margin-top:0} .u-liste{list-style:none;margin:14px 0 0;padding:0} .u-liste li{font-size:15.5px;line-height:1.5;color:var(--schrift-2);padding-left:15px;position:relative;margin-bottom:7px} .u-liste li::before{content:"·";position:absolute;left:2px;color:var(--akzent);font-weight:800} .u-liste li:last-child{margin-bottom:0} /* ────────── Kontakt-Ausleitung ────────── */ .u-ausleitung{position:relative;padding:clamp(56px,9vh,110px) var(--rand) clamp(48px,7vh,80px)} .u-ausleitung-innen{ position:relative;max-width:var(--bahn-breite);margin:0 auto; display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:start; } @media(max-width:860px){.u-ausleitung-innen{grid-template-columns:1fr}} .u-wege{margin:22px 0 0;display:flex;flex-direction:column;gap:10px;align-items:flex-start} .u-wege a{font-size:17px;color:var(--schrift);text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:2px} .u-wege a:hover{border-color:var(--schrift)} .u-ausleitung-tat{display:flex;flex-direction:column;align-items:flex-start;gap:6px} /* ────────── Kalender-Weg + Formular in der Ausleitung ────────── Ben 2026-07-31: auf JEDER Seite steht unten ein echtes Formular, und der Kalender-Link liegt prominent daneben — nicht mehr ein Knopf, der auf das Formular der Startseite zurueckschickt. Zwei Wege nebeneinander: wer lieber selbst einen Termin zieht, klickt links; wer schreiben will, schreibt rechts. Vorher war .u-ausleitung-innen unten buendig (align-items:end) — mit zwei gefuellten Spalten ist oben buendig richtig. ZUORDNUNG DER cal.com-LINKS — an den echten Terminseiten abgelesen, nicht nach dem Slug geraten (der Slug "handwerker" traegt in die Irre: dahinter liegt ein Telefon-Assistent-Termin, kein Webseiten-Termin): erstgesprach-voice "Erstgespraech Telefon-Assistent" 15 Min erstgesprach-handwerker "Erstgespraech Handwerk" 15 Min — ebenfalls Telefon-Assistent, nur fuer Handwerk erstgesprach-webseite "Erstgespraech Webseite" 15 Min — am 2026-07-31 auf Bens Ansage neu angelegt erstgesprach "Erstgespraech", allgemein 20 Min Daraus: /klaro + ki-telefonassistent(-goettingen|-kassel) -> voice ki-telefonassistent-handwerk -> handwerker /webseiten + alle webdesign-* -> webseite Rest (Homepage, Betreuung, Projekte, Software, Chatbot, Rechtstexte) -> allgemein, dort mit dem Hinweis kurz dazuzuschreiben worum es geht, weil die Leistung auf diesen Seiten nicht eindeutig ist. */ .u-termin{margin:26px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:10px} .u-form{ position:relative;display:flex;flex-direction:column;gap:12px;width:100%; background:var(--karte);border:1px solid var(--karte-linie);border-radius:14px; padding:clamp(18px,2.4vw,26px);box-shadow:var(--wurf); } .u-honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .u-feld{display:flex;flex-direction:column;gap:6px} .u-feld label{font:500 13px/1.2 "Synonym",sans-serif;letter-spacing:.04em;color:var(--schrift-2)} .u-feld input,.u-feld textarea{ font:400 16px/1.45 "Synonym",sans-serif;color:var(--schrift); background:transparent;border:1px solid var(--karte-linie);border-radius:10px; padding:11px 13px;width:100%; } .u-feld textarea{min-height:96px;resize:vertical} .u-feld input::placeholder,.u-feld textarea::placeholder{color:var(--schrift-2);opacity:.62} .u-feld input:focus-visible,.u-feld textarea:focus-visible{outline:2px solid var(--akzent);outline-offset:1px;border-color:transparent} .u-zustimmung{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.45;color:var(--schrift-2)} .u-zustimmung input{margin-top:3px;accent-color:var(--akzent);width:16px;height:16px;flex:0 0 auto} .u-zustimmung a{color:var(--schrift);text-decoration:none;border-bottom:1px solid var(--linie)} .u-senden{ align-self:flex-start;display:inline-flex;align-items:center;justify-content:center; background:var(--knopf);color:var(--akzent-schrift); font-family:"Synonym",sans-serif;font-weight:500;font-size:17px; padding:10px 26px;min-height:52px;border:0;border-radius:999px;cursor:pointer; transition:filter .12s ease; } .u-senden:hover{filter:brightness(1.06)} .u-ehrlich{margin:0;font-size:12.5px;line-height:1.45;color:var(--schrift-2);opacity:.82} /* ────────── Fuss ────────── */ /* Die Lasur begann als harte Kante gegen die Ausleitung (gemessen 50). Sie blendet jetzt ueber die ersten 72 px ein — der Fuss setzt sich weiterhin ab, nur ohne Schnitt. */ .u-fuss{ position:relative;color:var(--schrift); background:linear-gradient(180deg,rgba(36,21,5,0) 0,rgba(36,21,5,.07) 72px); padding:24px var(--rand) 28px; } body[data-welt="nacht"] .u-fuss{ background:linear-gradient(180deg,rgba(246,236,220,0) 0,rgba(246,236,220,.05) 72px); } .u-fuss-innen{ max-width:var(--bahn-breite);margin:0 auto;display:flex;flex-wrap:wrap; gap:12px 28px;align-items:center;justify-content:space-between;font-size:14.5px; } .u-fuss a{color:var(--schrift);text-decoration:none;border-bottom:1px solid var(--linie);padding-bottom:1px} .u-fuss a:hover{border-color:var(--schrift)} .u-fuss-zeile{display:flex;gap:18px;flex-wrap:wrap;align-items:center} /* ────────── Linkzeile im Fliesstext ────────── Fuer die Stellen, an denen eine Hauptseite auf ihre Orts- und Leistungsseiten zeigt. */ .u-linkzeile{display:flex;flex-wrap:wrap;gap:10px 22px;margin:clamp(16px,2.4vh,24px) 0 0;padding:0;list-style:none} .u-linkzeile a{ font-size:15.5px;color:var(--schrift);text-decoration:none; border-bottom:1px solid var(--linie);padding-bottom:2px; } .u-linkzeile a:hover{border-color:var(--schrift)} /* ────────── Linknetz im Fuss ────────── Jede Seite erreicht von hier aus jede Orts- und Leistungsseite. Das ist dieselbe Architektur, die die alte Seite hatte, und der Punkt, den /webseiten unter "Fuer jede Leistung eine eigene Seite" verkauft: ohne diese Verlinkung waeren die dreizehn Seiten Waisen. Liegt VOR .u-fuss-innen im Fuss und traegt eigene Klassen, damit es in beiden Fussvarianten funktioniert (.u-fuss der Unterseiten und .fuss der Startseite). */ .u-fuss-netz{ max-width:var(--bahn-breite);margin:0 auto 22px;padding-bottom:20px; border-bottom:1px solid var(--karte-linie); display:grid;grid-template-columns:minmax(140px,1fr) 2.4fr;gap:22px clamp(24px,4vw,64px); } @media(max-width:720px){.u-fuss-netz{grid-template-columns:1fr;gap:20px}} .u-fuss-spalte{display:flex;flex-direction:column;gap:7px;align-items:flex-start} .u-fuss-spalte-breit{ display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:7px 24px;align-items:start; } .u-fuss-titel{ margin:0 0 4px;font:500 11.5px/1 "Synonym",sans-serif;letter-spacing:.18em; text-transform:uppercase;color:var(--schrift-2);opacity:.8;grid-column:1/-1; } .u-fuss-netz a{ font-size:14.5px;color:var(--schrift-2);text-decoration:none; border-bottom:1px solid transparent;padding-bottom:1px; } .u-fuss-netz a:hover{color:var(--schrift);border-color:var(--linie)} .u-fuss-netz span[aria-current="page"]{font-size:14.5px;color:var(--schrift)} /* ────────── Bewegung: nur mit Scroll-Timeline, Fallback = Endzustand ────────── */ @supports (animation-timeline: view()){ @media(prefers-reduced-motion:no-preference){ .u-auf{ animation:u-aufstellen linear both; animation-timeline:view(); animation-range:entry 5% entry 42%; } @keyframes u-aufstellen{ from{opacity:0;transform:translateY(30px)} to{opacity:1;transform:none} } } }