/* ========================================================================================== Kontaktseite -- Gestaltung der Vorlage template-contact_form (posts 41 de, 40 en, 42 fr, 43 tr, 95 es, 103 it) Grundlage: documentation/Entwurf-Kontakt-Varianten.html, Variante A REGEL FUER DIESE DATEI: Jeder Selektor beginnt mit .kt ------------------------------------------------------------------------------------------ Das Element
umschliesst die ganze Seite. Ohne diese Disziplin traefen Elementregeln (h1, h2, h3, p, ul ...) auch Kopfzeile, Fusszeile und jede andere Seite -- bootstrap.min.css, global.css, header.css und footer.css liegen im selben Dokument. Dieselbe Regel gilt in store-seite.css, verteilerseite.css und rechtsseiten.css. WARUM EINE EIGENE DATEI UND NICHT rechtsseiten.css Der Auftraggeber wollte den Titelbereich "wie bei den anderen Rechtsseiten". Die Werte dafuer stehen unten wortgleich zu rechtsseiten.css -- die DATEI wird trotzdem nicht mitbenutzt: Sie ist 18 KB Rechtsseiten-Gestaltung (Wertepaare, Inhaltsverzeichnis, Paragrafenwerk) fuer eine Formularseite, und ihr Baustein contents/rechtsseiten/kopf liest `rt_`-Felder und kennt nur zwei Brotkrumenstufen. Die Kontaktseite ist keine Rechtsseite. ⚠ DAMIT STEHEN DIE TITELWERTE AN ZWEI STELLEN. Wer sie in rechtsseiten.css aendert, muss hier nachziehen -- und umgekehrt. Betroffen sind genau die vier Bloecke, die unten mit "wortgleich mit rechtsseiten.css" gekennzeichnet sind. Das ist der bewusst gezahlte Preis fuer die Entkopplung; er ist kleiner als der Preis, eine Formularseite an das Rechtsseiten-Stylesheet zu haengen. DER ENTWURF IST AUF JOST GESETZT, DER AUFTRITT LAEUFT AUF OVERPASS Overpass laeuft breiter (rund +6,4 %). Die Spaltenbreiten unten sind mit documentation/tools/ttfmess.py in Overpass nachgemessen, nicht aus dem Entwurf uebernommen. Kein Browser war daran beteiligt. SCHNITTE WERDEN BENANNT, NICHT GESCHALTET Overpass liegt als sieben eigenstaendige Familien vor. `font-weight: 200` des Entwurfs waehlt keinen Schnitt aus -- es laesst den Browser einen falschen synthetisieren. Uebersetzt nach der Hausregel: Entwurf 200 (h1) -> "Overpass-Thin", Entwurf 200 (h2) -> "Overpass-Light", Entwurf 300 -> "Overpass-Light", Entwurf 400 -> "Overpass-Regular". `font-weight: normal` steht ueberall daneben, damit nichts synthetisiert wird. ========================================================================================== */ .kt { /* wortgleich mit rechtsseiten.css -- siehe Kopf */ --kt-ink: #14100E; --kt-paper: #FFFFFF; --kt-shell: #F4F2F0; --kt-line: #DDD9D5; --kt-muted: #6E6A66; --kt-pad: clamp(1.25rem, 5vw, 4rem); /* Zwei Breiten, anders als bei den Rechtsseiten: Titelbereich und Formular stehen im schmalen Satzspiegel (720px, wie dort), der Store-Abschnitt braucht die volle Breite fuer vier Spalten. Der Entwurf setzt 1180px. */ --kt-max: 1180px; --kt-schmal: 720px; display: block; background: var(--kt-paper); color: var(--kt-ink); font-family: "Overpass-Light", sans-serif; font-weight: normal; font-size: 1.0625rem; line-height: 1.75; -webkit-font-smoothing: antialiased; /* Ausgleich fuer die feste Kopfzeile. .header ist projektweit position:fixed und steht ausserhalb des Textflusses; die bestehenden Seiten halten den Platz ueber page.css frei. Diese Vorlage laedt page.css bewusst nicht -- ohne diesen Ausgleich liegt die Brotkrume hinter Logo und Menueschalter. Gleicher Wert wie store-seite.css und rechtsseiten.css, damit der Abstand oben auf allen neuen Vorlagen derselbe ist. */ padding-top: 100px; } /* ---------- Ruecksetzungen: nur innerhalb von .kt ---------- In :where(), aus demselben Grund wie in store-seite.css und rechtsseiten.css: `.kt h1` haette die Spezifitaet (0,1,1) und schluege jede einklassige Regel auf denselben Elementen, unabhaengig von der Reihenfolge. `:where(.kt) h1` liegt bei (0,0,1) -- jede Klassenregel gewinnt von selbst, und das Praefixieren jeder einzelnen Regel entfaellt als Dauerpflicht. ⚠ DIE FORMULARELEMENTE SIND AUSGENOMMEN. Das Formular bringt seine eigene Gestaltung mit (siehe unten); ein Reset auf label, input oder button wuerde ihr in die Quere kommen. RESTRISIKO wie dort: In einem Browser ohne :where() entfaellt der Reset. Unterstuetzt seit Firefox 78, Safari 14 und Chrome/Edge 88. */ :where(.kt) h1, :where(.kt) h2, :where(.kt) h3, :where(.kt) p, :where(.kt) ul, :where(.kt) ol { margin: 0; padding: 0; } :where(.kt) ul { list-style: none; } :where(.kt) a { color: inherit; text-decoration: none; } .kt :focus-visible { outline: 2px solid var(--kt-ink); outline-offset: 3px; } /* ---------- Rahmen ---------- */ .kt-wrap { max-width: var(--kt-max); margin: 0 auto; padding-left: var(--kt-pad); padding-right: var(--kt-pad); } /* Der schmale Satzspiegel. Er sitzt INNERHALB von .kt-wrap, nicht daneben -- so behalten Titelbereich, Formular und die Einleitung des Store-Abschnitts denselben linken Rand. Stuende er als eigener Rahmen daneben, liefen die beiden Raender bei jeder Breite auseinander, bei der die clamp() greift. */ .kt-schmal { max-width: var(--kt-schmal); } .kt-abschnitt { padding-top: clamp(2.4rem, 4.5vw, 3.8rem); padding-bottom: clamp(2.4rem, 4.5vw, 3.8rem); } /* Der Titelbereich schliesst nach unten nicht ab -- das Formular folgt dicht. wortgleich mit rechtsseiten.css (.rt-titel) */ .kt-titel { padding-bottom: 0; } /* ---------- Brotkrume ---------- Zwei Stufen (Startseite > Kontakt), Entscheidung des Auftraggebers vom 18.08.2026. Die Vorlage trug bis dahin drei (Startseite > Kontakt > Kontaktformular); die Mittelstufe zeigte auf kein Ziel und die Endstufe benannte denselben Ort ein zweites Mal. Bauform und Beschriftung wie bei den uebrigen neuen Vorlagen (P-81):