/* ========================================================================== Hundewegweiser – Stylesheet Schritt 1 (Formulare) + Schritt 2 (Inhalte, Druckansicht) ========================================================================== Farben und Schriften sind von der Coming-Soon-Seite übernommen, damit Startseite und Mitgliederbereich zusammengehören. Die Werte stehen alle im :root-Block unten – wer sie dort ändert, ändert die ganze Seite. Alle Klassennamen beginnen mit "hw-". Ausnahme sind die Klassen INNERHALB von .hw-inhalt (.hinweis, .warnung, .frage, .notiz, .linie): die werden von Hand im body-Feld in phpMyAdmin getippt und sollen dort kurz sein. ========================================================================== */ /* -------------------------------------------------------------------------- 1. Farben und Schriften -------------------------------------------------------------------------- */ :root { /* --- Übernommen von der Coming-Soon-Seite (styles.css, Zeile 1–14) --- */ --forest: #173f25; --forest-light: #355d35; --forest-dark: #0f301c; --olive: #7d8e5d; --olive-light: #aeba82; --cream: #fbf6e9; --cream-deep: #efe6ce; --paper: rgba(255, 253, 247, 0.9); --ink: #1d2a22; --muted: #526155; --white: #ffffff; --shadow: 0 18px 50px rgba(62, 65, 40, 0.13); /* --- Ergänzung: eine Linienfarbe für Rahmen und Trenner --- Die Coming-Soon-Seite braucht keine, weil sie keine Formulare und Tabellen hat. Der Wert liegt bewusst zwischen --cream-deep und --olive. */ --line: #e0d7bd; /* --- Rückwärtskompatible Namen --- Die Seiten aus Schritt 1 (Registrierung, Login, Testseite) benutzen die alten Variablennamen. Statt in allen Dateien zu suchen und zu ersetzen, zeigen die alten Namen jetzt einfach auf die neuen Farben. Vorteil: die Schritt-1-Seiten bekommen das neue Aussehen automatisch, und es kann dabei nichts kaputtgehen. */ --hw-text: var(--ink); --hw-text-leise: var(--muted); --hw-hintergrund: var(--cream); --hw-flaeche: var(--white); --hw-rand: var(--line); --hw-akzent: var(--forest); --hw-akzent-dunkel: var(--forest-dark); /* Meldungsfarben: bleiben eigenständig, weil Rot und Grün hier eine Bedeutung tragen (Fehler / Erfolg) und nicht zur Deko gehören. Leicht an die wärmere Palette angepasst. */ --hw-fehler-bg: #fbeae6; --hw-fehler-rand: #e3b3a8; --hw-fehler-text: #8a2c1c; --hw-erfolg-bg: #eaf2e2; --hw-erfolg-rand: #b7cd9c; --hw-erfolg-text: #33532a; --hw-info-bg: #eef1ea; --hw-info-rand: #c3cdb6; --hw-info-text: #3b4a37; /* Schriftfamilien an einer Stelle. Georgia für Überschriften wie auf der Coming-Soon-Seite, System-Schrift für Fließtext (lädt nichts nach). */ --hw-serif: Georgia, "Times New Roman", serif; --hw-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* border-box: Innenabstand und Rahmen werden in die Breite eingerechnet. Ohne das werden Eingabefelder mit width:100% breiter als ihr Container. */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; padding: 0; font-family: var(--hw-sans); font-size: 16px; line-height: 1.6; color: var(--ink); background: var(--cream); } h1, h2, h3 { font-family: var(--hw-serif); color: var(--forest); line-height: 1.25; /* Deutsch baut lange Woerter: "Verbraucherstreitbeilegung" hat 26 Zeichen und passt auf einem schmalen Handy in keine Zeile. Eine Ueberschrift ist gross gesetzt, deshalb faellt es dort zuerst auf – das Wort ragte ueber den Rand und die Seite liess sich seitlich schieben. hyphens: auto trennt nach den Regeln der Sprache, die im steht (lang="de"), und nur dann, wenn das Wort sonst nicht passt. In einer Zeile, die ohnehin aufgeht, aendert sich nichts. overflow-wrap: break-word ist die Rueckfallebene fuer den Fall, dass ein Browser die deutschen Trennregeln nicht mitbringt: dann wird hart umgebrochen, ohne Trennstrich. Haesslicher als eine saubere Trennung, aber immer noch besser als eine Seite, die seitlich wegrutscht. */ hyphens: auto; overflow-wrap: break-word; } h1 { margin: 0 0 0.75rem; font-size: 1.7rem; } h2 { margin: 2rem 0 0.6rem; font-size: 1.25rem; padding-bottom: 0.3rem; border-bottom: 1px solid var(--line); } h3 { margin: 0; font-size: 1.05rem; } a { color: var(--forest-light); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { color: var(--forest); } /* Kein Bild ist breiter als der Platz, den es hat. Heute faellt das nirgends auf: Das Portrait auf ueber-mich.php und das Logo auf der Startseite bringen ihre eigene Breite mit. Die Regel gilt dem, was noch kommt – vor allem den Inhaltsbausteinen aus der Datenbank (content/view.php). Ein Bild, das dort mit 1200 Pixeln Breite eingefuegt wird, wuerde die Seite auf dem Handy sonst breitziehen, und man merkt es erst, wenn es zu spaet ist. height: auto gehoert dazu: sonst behaelt das Bild die Hoehe aus dem height-Attribut und wird beim Verkleinern gestaucht. Regeln mit hoeherer Spezifitaet (.hw-marke img, .hw-hero-logo, .hw-portrait) bleiben davon unberuehrt. */ img { max-width: 100%; height: auto; } /* ist kein sichtbares Element, sondern nur ein Umschlag: es sagt dem Browser, welche Dateiformate zur Auswahl stehen (WebP oder PNG), und tritt danach beiseite. Angezeigt wird immer das darin. Von sich aus ist allerdings ein Inline-Element – so breit wie sein Inhalt, mitten in der Textzeile. Ein Bild darin, das per "display: block; margin: 0 auto" zentriert werden soll (das Logo auf der Startseite), zentriert sich dann innerhalb dieses Umschlags: also gar nicht. display: block macht den Umschlag so breit wie den Platz, den er hat. Das Bild darin verhält sich dadurch wieder genau so, wie es sich ohne den Umschlag verhalten hat. Warum nicht display: contents, was wörtlich "tu so, als wärst du nicht da" bedeutet? Weil einige Screenreader Elemente damit samt Inhalt aus dem Vorlesebaum entfernt haben – das Bild verschwände dann samt seinem alt-Text. Der Umweg über block hat diese Nebenwirkung nicht. */ picture { display: block; } /* -------------------------------------------------------------------------- 2. Kopfzeile, Navigation, Fußzeile (Schritt 2, includes/layout.php) -------------------------------------------------------------------------- */ .hw-kopf { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; align-items: center; justify-content: space-between; padding: 0.7rem 1.25rem; background: var(--paper); border-bottom: 1px solid var(--line); } /* Kopfzeile ohne Navigation (öffentliche Seiten: Über mich, Beratung, Mantrailing, Termin, Impressum, Kontakt). justify-content: center rückt das Logo in die Mitte. Links allein sähe es aus, als wäre daneben etwas verlorengegangen – in der Mitte wirkt es wie eine Absicht. Die Zeile darf außerdem etwas schmaler sein, weil sie nur noch eine Zeile trägt. */ .hw-kopf--schlicht { justify-content: center; padding: 0.55rem 1.25rem; } .hw-marke { display: flex; align-items: center; gap: 0.6rem; font-family: var(--hw-serif); font-size: 1.15rem; font-weight: 700; color: var(--forest); text-decoration: none; } .hw-marke img { display: block; width: 52px; height: 52px; border-radius: 50%; } .hw-nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; font-size: 0.95rem; } /* Das Abmelden-Formular soll in der Navigation nicht wie ein Formular aussehen, sondern wie die anderen Punkte daneben. */ .hw-nav-form { display: inline; margin: 0; } /* Ein Knopf, der wie ein Link aussieht. Nötig, weil Abmelden technisch ein Formular sein muss (siehe auth/logout.php), optisch aber ein Link sein soll. */ .hw-linkbutton { padding: 0; font: inherit; color: var(--forest-light); background: none; border: none; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .hw-linkbutton:hover { color: var(--forest); } .hw-main { padding: 2rem 1rem 3rem; } /* Die Fußzeile ist auf ALLEN Seiten dieselbe – Startseite, Unterseiten, Inhalte. Sie ist die einzige Stelle, an der Impressum und Kontakt stehen, und sie muss auf jeder Seite erreichbar sein (§ 5 DDG, siehe hw_fuss() in includes/layout.php). Der Verlauf setzt einen weichen helleren Schein an die Oberkante, damit der grüne Block nicht wie ein abgeschnittener Balken wirkt. */ .hw-seitenfuss { padding: 1.15rem 1.25rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; /* Kleiner als frueher (0.55rem), weil die Links unten jetzt eigenen Innenabstand haben – der Abstand dazwischen bleibt dadurch gleich. */ gap: 0.25rem; font-size: 0.95rem; text-align: center; color: var(--cream); background: radial-gradient(circle at 50% 0, rgba(74, 105, 60, 0.32), transparent 27rem), var(--forest); } /* Die Pfote steht allein in der ersten Zeile: width: 100% zwingt alles Folgende in eine neue Zeile. brightness(2) hellt das dunkle Emoji so weit auf, dass es auf dem grünen Grund überhaupt sichtbar wird. */ .hw-fuss-pfote { width: 100%; filter: grayscale(1) brightness(2); font-size: 1.3rem; line-height: 1; opacity: 0.88; } /* display: inline-block + padding, damit die Flaeche zum Antippen rund 44 Pixel hoch wird. Als reine Textzeile war sie 24 Pixel hoch – lesbar, aber mit dem Daumen trifft man auf einem Handy dann leicht den Nachbarn. Die Links stehen hier dicht nebeneinander, deshalb lohnt es sich. Nur hier und nicht bei Links mitten im Fliesstext: dort wuerden sich die vergroesserten Flaechen benachbarter Zeilen ueberlappen, und man traefe am Ende die falsche. */ .hw-seitenfuss a { display: inline-block; padding: 0.55rem 0.3rem; color: var(--cream); font-weight: 600; text-decoration: none; text-underline-offset: 3px; } .hw-seitenfuss a:hover { color: var(--white); text-decoration: underline; } /* Trennpunkte und Jahreszahl treten zurück, damit die Links führen. */ .hw-seitenfuss-trenner, .hw-fuss-jahr { color: rgba(251, 246, 233, 0.7); } .hw-fuss-jahr { /* Auf breiten Bildschirmen steht die Jahreszahl in derselben Zeile wie die Links, auf schmalen rutscht sie von selbst darunter. */ font-size: 0.8rem; } /* -------------------------------------------------------------------------- 3. Der zentrierte Kasten (von allen Seiten benutzt) -------------------------------------------------------------------------- */ .hw-box { max-width: 30rem; margin: 0 auto; padding: 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); } .hw-box--breit { max-width: 46rem; } /* Sonderfall Schritt-1-Seiten (Registrierung, Login, Logout, Kontoseite): Die haben noch keine Kopfzeile und kein
, ihr Kasten liegt direkt im . Dort kommt der Abstand zum Fensterrand also nicht von .hw-main – deshalb hier. Das "> " bedeutet: nur direkte Kinder von body. Kästen INNERHALB von .hw-main sind davon nicht betroffen. width mit calc() statt fester Seitenabstände: auf breiten Bildschirmen gewinnt max-width und "margin: auto" zentriert weiterhin, auf schmalen bleiben links und rechts 0,6rem Luft. */ body > .hw-box { margin: 2rem auto 3rem; width: calc(100% - 1.2rem); } /* -------------------------------------------------------------------------- 4. Formulare (Schritt 1) -------------------------------------------------------------------------- */ label { display: block; margin: 1rem 0 0.3rem; font-weight: 600; font-size: 0.95rem; } input[type="text"], input[type="email"], input[type="password"], textarea { width: 100%; padding: 0.6rem 0.7rem; font-size: 1rem; /* font-family: inherit – ohne das nähme der Browser für Eingabefelder seine eigene Schrift, und das Textfeld sähe anders aus als die Seite. */ font-family: inherit; color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 6px; } /* resize: vertical – das Nachrichtenfeld darf höher gezogen werden, aber nicht breiter: sonst schiebt es den Kasten auseinander. */ textarea { line-height: 1.5; resize: vertical; } input:focus, textarea:focus { border-color: var(--olive); } /* --- Die Zustimmungszeile mit Ankreuzfeld (Kontaktformular) --- Ein