/* ═══════════════════════════════════════════════════════════════════ 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%); --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%); --schrift:var(--tinte); --schrift-2:var(--tinte-2); --karte:#FBF4E2; --karte-linie:rgba(74,42,18,.35); --linie:rgba(36,21,5,.4); --akzent:#B4681F; --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%); --schrift:var(--tinte); --schrift-2:var(--tinte-2); --karte:#F8ECD2; --karte-linie:rgba(74,42,18,.35); --linie:rgba(36,21,5,.4); --akzent:#A25A2A; --akzent-schrift:#FBF4E2; --knopf:#A25A2A; /* 4,74:1 — besteht, deshalb unveraendert */ --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)} .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 ────────── */ .u-fuss{ position:relative;background:rgba(36,21,5,.14);color:var(--schrift); padding:24px var(--rand) 28px; } body[data-welt="nacht"] .u-fuss{background:rgba(246,236,220,.05)} .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} } } }