/* ========================================================= DOGGERY — Design-Tokens KOPIE aus 01_Designsystem/tokens.css (Stand 22.09.2026). Aenderungen IMMER dort machen, dann hierher kopieren. Einziger Unterschied: die Pfade der Textformen (../img/). Quelle: Elementor-Kit "doggery-wp0826" (11.09.2026), ergaenzt aus Figma "Xandi Doggery" und der gebauten Website. Stand 22.09.2026. --------------------------------------------------------- Diese Datei ist die einzige Quelle der Wahrheit. 02_Website/css/tokens.css ist eine reine KOPIE. Einziger Unterschied: die Pfade der beiden Textformen (assets/ hier, ../img/ dort). Werte hier aendern, dann dorthin kopieren. Seit 22.09.2026 stehen auch die Bauteilmasse der Website (Kopfzeile, Hero, Siegel) hier, damit beide Dateien nicht mehr auseinanderlaufen. claude-design/tokens/*.css ist eine dritte Kopie fuer Claude Design, aufgeteilt nach Themen. Farben und Groessen nie direkt ins CSS schreiben, immer ueber die Namen hier. Erklaerung: design.md. ========================================================= */ :root { /* ====== FARBEN · FLAECHEN ====== */ --farbe-basis: #ffffff; /* Grundton jeder Seite */ --farbe-hervorhebung: #fdfaf4; /* Creme. Ruhige Hervorhebung */ --farbe-signal: #feeaae; /* Gelb. Starkes Signal, sparsam */ --farbe-sanft: #fdf1cc; /* Helles Gelb. FAQ geoeffnet */ --farbe-feldrahmen: #cecdc8; /* Rahmen der Formularfelder */ /* ====== FARBEN · SCHRIFT ====== */ --farbe-schrift: #2f2d29; /* Fliesstext, H1, H3, H4 */ --farbe-schrift-hell: #ffffff; /* Schrift auf dunkler Flaeche */ --farbe-akzent: #ce7e0d; /* H2, Menuepunkt aktiv und Hover */ --farbe-schrift-leise: #6e695f; /* Gedaempft. Feldbeschriftungen, */ /* Bildunterschriften. 5.2:1 auf */ /* Creme, erfuellt WCAG AA. */ /* ====== FARBEN · MARKE UND FUNKTION ====== */ --farbe-logo: #db932e; /* Orange im Logo-Schriftzug */ --farbe-sterne: #e8a339; /* Sterne in Bewertungen */ --farbe-pfote: #e2b466; /* Gold in Anitas Laufpfoten. Steht */ /* hier, seit die Pfoten-Symbole */ /* auf currentColor umgestellt sind */ /* — im Ueberblick laufen sie in */ /* der Schriftfarbe. */ --farbe-fehler: #d76737; /* Fehlerzustand am Feld */ --farbe-fehler-flaeche: #c1562a; /* Flaeche der Fehlermeldung, Text */ /* weiss darauf (4,5:1). Ergaenzt */ /* 21.09.2026: styles.css setzt den */ /* Wert bisher im Klartext. */ --farbe-rahmen: #cecdc8; /* Formularfelder, Dropdowns */ --farbe-vorschau: #696151; /* Schleier ueber noch nicht */ /* buchbaren Leistungen, 60 Prozent */ /* ====== BUTTON · DUNKEL (Hauptaktion) ====== */ --button-dunkel-flaeche: #2f2d29; --button-dunkel-schrift: #ffffff; --button-dunkel-hover: #db932e; /* ====== BUTTON · GELB (Nebenaktion) ====== */ --button-gelb-flaeche: #feeaae; --button-gelb-schrift: #2f2d29; --button-gelb-hover: #f9d077; /* ====== SCHRIFTARTEN ====== */ /* Beide selbst hosten, nicht von Google laden (DSGVO) */ --schriftart-sans: "Inter", system-ui, -apple-system, sans-serif; --schriftart-serif: "Lora", Georgia, "Times New Roman", serif; /* ====== TYPOGRAFIE ====== Gemessen an den tatsaechlich gebauten Seiten, NICHT an Elementors globalen Einstellungen. Die weichen erheblich ab: global steht H3 = 1.75rem Inter, gebaut ist H3 = 2.3rem Lora. Gebaut gilt. */ /* H1 — Inter Regular */ --h1-groesse: 3.7rem; --h1-hoehe: 1.2; --h1-staerke: 400; --h1-laufweite: -0.02em; /* H2 — Lora Bold, in Akzentfarbe. Abschnittsueberschriften */ --h2-groesse: 3rem; --h2-hoehe: 1.28; --h2-staerke: 700; /* H2 klein — fuer Banner und CTA-Blocke ("Jeder Hund ist anders") */ --h2-klein-groesse: 2.2rem; --h2-klein-hoehe: 1.3; --h2-klein-staerke: 700; /* H3 — Lora SemiBold */ --h3-groesse: 2.3rem; --h3-hoehe: 1.34; --h3-staerke: 600; /* H4 — Lora SemiBold. Personen, Hunde */ --h4-groesse: 1.8rem; --h4-hoehe: 1.3; --h4-staerke: 600; /* H4 klein — Lora SemiBold. Titel in Bewertungskarten */ --h4-klein-groesse: 1.6rem; --h4-klein-hoehe: 1.38; --h4-klein-staerke: 600; /* Lead — Inter, der Absatz direkt unter einer H2 */ --lead-groesse: 1.3rem; --lead-hoehe: 1.56; --lead-staerke: 400; /* Fliesstext — Inter */ --fliesstext-groesse: 1.125rem; --fliesstext-hoehe: 1.6; --fliesstext-staerke: 400; --fliesstext-laufweite: 0.02em; /* Betont — Lora. Text auf dem gelben Shape, waermer als Fliesstext */ --betont-groesse: 1.125rem; --betont-hoehe: 1.62; --betont-staerke: 400; /* Zitat — Lora, kursiv gesetzt */ --zitat-groesse: 1rem; --zitat-hoehe: 1.55; --zitat-staerke: 400; /* Hinweis — Inter Light. "++ ausgebucht ++", "BALD VERFUEGBAR" */ --hinweis-groesse: 1rem; --hinweis-hoehe: 1.5; --hinweis-staerke: 300; /* Label — Inter Light, Versalien. "LEISTUNGEN", "UEBER MICH" */ /* Laufweite 0.45rem ist gemessen aus dem Elementor-Build und gilt dort einheitlich fuer LEISTUNGEN, UEBER MICH und FAQ. Absolut in rem, nicht in em: Elementor setzt denselben Wert auch auf Mobil, wo das Label kleiner wird. */ --label-groesse: 0.875rem; --label-staerke: 300; --label-laufweite: 0.45rem; /* Feldbeschriftung — leise, klein, dicht am Feld */ --feldlabel-groesse: 0.8125rem; --feldlabel-staerke: 500; --feldlabel-abstand: 4px; /* Sterne in Bewertungen */ --sterne-groesse: 1.6rem; /* Zitat und Name in der Bewertungskarte */ --zitat-karte-groesse: 1rem; /* Kleintext — Inter. Rechtstexte, Bildunterschriften */ --klein-groesse: 0.9rem; --klein-hoehe: 1.6; /* FAQ-Frage — Inter Bold in Fliesstextgroesse */ --faq-frage-groesse: 1.125rem; --faq-frage-staerke: 700; --faq-antwort-groesse: 1rem; --faq-antwort-hoehe: 1.6; /* Navigation — Inter Regular. Global steht im Kit 500, das Menue ueberschreibt lokal auf 400. 400 ist das, was man sieht. */ --nav-groesse: 1.125rem; --nav-hoehe: 1.6; --nav-staerke: 400; --nav-laufweite: 0.02em; /* Button — global steht im Kit 400, verwendet werden durchgaengig 500 */ --button-groesse: 1rem; --button-hoehe: 1.6; --button-staerke: 500; --button-laufweite: 0.02em; /* ENTFERNT 14.09.2026: --button-groesse-gross (1.125rem) fuer den Hero-Knopf. Der Wert stammte daher, dass der Hero-Knopf im Elementor-Build als einziger keine eigene Typografie hat und auf die globale Vorgabe zurueckfaellt — eine vergessene Einstellung, keine Entscheidung. Alle dunklen Knoepfe sind jetzt gleich gross. */ /* ====== ABSTAENDE ====== */ /* 4px-Raster, zehn Stufen. Nichts dazwischen. */ --abstand-minimal: 4px; /* Haaransatz zwischen eng Verwandtem */ --abstand-eng: 8px; /* Label zu Ueberschrift */ --abstand-nah: 16px; /* Ueberschrift zu Text, Innenabstaende */ --abstand-standard: 24px; /* Der Normalfall zwischen Elementen */ --abstand-weit: 32px; /* Zwischen Karten */ --abstand-gruppe: 48px; /* Text zu Button-Gruppe */ --abstand-block: 64px; /* Bloecke innerhalb eines Abschnitts */ --abstand-gross: 80px; /* Grosser Innenabstand */ --abstand-abschnitt: 96px; /* Standard oben/unten an Abschnitten */ --abstand-maximal: 128px; /* Nur wo bewusst viel Luft soll */ /* ====== BUTTON-MASSE ====== Innenabstand des Buttons, aus dem Elementor-Kit. Diese Werte stehen bewusst NICHT in der Abstandsskala: Sie gehoeren zum Bauteil, nicht zum Layout. Genauso wie der Radius von 18px. */ --button-polster-hoch: 18px; --button-polster-quer: 52px; /* Weiterfuehrende Buttons (Unterseiten) sind flacher und breiter als die Handlungsaufrufe zum Kennenlerntermin. Gemessen im Elementor-Build. */ --button-sekundaer-polster-hoch: 16px; --button-sekundaer-polster-quer: 70px; --button-sekundaer-hoehe: 1.38; /* ====== RUNDUNGEN ====== */ --rundung-button: 18px; --rundung-karte: 12px; --rundung-feld: 0; /* Formularfelder und FAQ sind eckig */ --rundung-meldung: 4px; /* Erfolgs- und Fehlermeldungen */ /* ====== GRAFISCHE ELEMENTE ====== */ --shape-gelb: url("../img/decoration-element-yellow.svg"); --shape-blass: url("../img/decoration-element-pale.svg"); /* Die Fotoform liegt als Datei in img/, hier aber bewusst eingebettet. Grund: Chrome behandelt eine externe SVG-Maske als fremde Herkunft und blockiert sie, wenn die Seite ueber file:// geoeffnet wird. Die Maske schlaegt dann still fehl und das Bild verschwindet komplett. Als data-URI funktioniert sie lokal und auf dem Server gleich. */ --shape-foto: url("data:image/svg+xml,%3Csvg width='358' height='342' viewBox='0 0 358 342' fill='none' xmlns='http://www.w3.org/2000/svg'%3E %3Cpath d='M298.24 45.8158C257.827 16.8848 208.389 -3.29192 158.442 0.445677C132.406 2.38382 108.104 11.1528 86.1985 25.6588C69.8689 36.4699 48.8885 46.0556 35.3521 60.4169C23.9391 72.5897 16.9171 92.2741 11.6184 107.994C-0.304291 142.715 -3.58873 180.843 4.28386 216.911C18.8279 283.309 68.561 334.095 134.99 340.318C220.683 348.434 314.027 300.243 347.29 216.035C372.337 152.742 352.345 84.2991 298.24 45.8158Z' fill='white'/%3E %3C/svg%3E"); /* Hinweisform fuer "Bald verfuegbar", ebenfalls eingebettet. */ /* Anitas Pfote aus dem Icon-Sprite, als Maske eingebettet. Als Maske und nicht als fertiges Bild, damit die Farbe aus dem CSS kommt. Data-URI und keine externe Datei: Chrome blockiert externe Maskendateien unter file://, dann verschwindet das Zeichen still. Ergaenzt 14.09.2026 fuer die Aufzaehlungszeichen im Untermenue. */ --zeichen-pfote: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cellipse cx='6.6' cy='9.4' rx='2.1' ry='2.7'/%3E%3Cellipse cx='10.9' cy='6.6' rx='2' ry='2.8'/%3E%3Cellipse cx='15.6' cy='7.2' rx='2' ry='2.7'/%3E%3Cellipse cx='19' cy='10.8' rx='1.9' ry='2.4'/%3E%3Cpath d='M12.6 12.2c2.5 0 4.6 1.7 5.5 3.7.9 2-.3 4.1-2.4 4.1-1.1 0-2.1-.4-3.1-.4s-2 .4-3.1.4c-2.1 0-3.3-2.1-2.4-4.1.9-2 3-3.7 5.5-3.7Z'/%3E%3C/svg%3E"); --shape-hinweis: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='255' height='48' fill='none' viewBox='0 0 255 48'%3E%3Cpath fill='%234a4740' d='M0 30Q-1 17 12 8l20-3q49-3 99-4l59-1q26-1 53 1 12-1 11 8-2 8-1 15 3 6 0 12-6 6-16 6l-90 2-66 1c-12 0-74 5-77 0q-3-6-4-15'/%3E%3C/svg%3E"); /* ====== LAYOUT ====== */ --breite-inhalt: 1200px; /* Standard-Inhaltsbreite */ --breite-text: 900px; /* Fliesstext, max. ~75 Zeichen */ --umbruch-tablet: 768px; --umbruch-desktop:1025px; /* ====== BAUTEILMASSE · KOPFZEILE, HERO, SIEGEL ====== Uebernommen aus 02_Website/css/tokens.css am 22.09.2026. Das sind Masse einzelner Bausteine, keine Layoutabstaende. Sie stehen hier, damit es nur noch EINE Token-Datei zu pflegen gibt. */ /* Kopfzeile: Hoehe aus Figma (MENUE-Rahmen 1440x93). Das Logo fuellt die Hoehe abzueglich des Polsters, die Breite ergibt sich aus dem Seitenverhaeltnis. Wer die Kopfzeile aendern will, aendert nur diese zwei Werte. */ --kopfzeile-hoehe: 104px; --kopfzeile-polster: 8px; --menue-abstand: 32px; /* Wie weit das Hero-Bild ueber den Textblock ragt. Groesser = Bild rueckt naeher an den Text, kleiner = mehr Luft dazwischen. */ --hero-ueberlappung: 48px; /* Einzug des gesamten Hero-Blocks. Rechnerisch buendig mit dem Schriftzug im Logo waeren 84px. Gesetzt sind 56px nach Augenmass: das Hero-Bild ist optisch schwer und zieht den Block nach rechts, bei exakt buendigen 84px kippt die Komposition. Optische Mitte schlaegt gemessene Mitte. */ --hero-einzug: 56px; /* BVZ-Siegel auf dem Bildband. Nach Augenmass gesetzt: es sitzt in der leeren Flaeche, in die der Hund im Hintergrundbild hineinschaut, links der Mitte und im oberen Drittel des Bandes. */ --siegel-groesse: 170px; --siegel-rechts: 300px; --siegel-oben: 56px; } /* ====== RESPONSIVE ====== Auch diese Werte stammen aus den gebauten Seiten, nicht geschaetzt. */ @media (max-width: 1024px) { :root { --h1-groesse: 2.8rem; --h2-groesse: 2.6rem; --h2-klein-groesse: 2rem; --h3-groesse: 2.1rem; --h4-groesse: 1.6rem; --lead-groesse: 1.2rem; --betont-groesse: 1.1rem; --abstand-abschnitt: 64px; --abstand-maximal: 96px; /* Kopfzeile waechst von 80px bei 768 auf 96px bei 1024, das Logo also von 68 auf 84px Hoehe. Vorher feste 78px, das Logo war damit kleiner als auf dem Handy (15.09.2026). */ --kopfzeile-hoehe: clamp(80px, 10.4vw, 96px); --kopfzeile-polster: 6px; /* Das Menue muss in einer Zeile bleiben, Anitas Vorgabe. Bei 768px stehen neben dem Logo nur rund 420px zur Verfuegung, die vier Punkte brauchen bei voller Groesse 519. Groesse und Luecke wachsen deshalb mit der Fensterbreite. Gilt seit 15.09.2026 auf der Website, seit 22.09.2026 auch hier. */ --nav-groesse: clamp(0.94rem, 1.92vw, 1.125rem); --menue-abstand: clamp(16px, 2.3vw, 32px); } } @media (max-width: 767px) { :root { --h1-groesse: 2.2rem; --h2-groesse: 2.1rem; --h2-klein-groesse: 1.8rem; --h3-groesse: 1.7rem; --h4-groesse: 1.5rem; /* Der Fliesstext wird auf dem Handy NICHT verkleinert (Entscheidung 14.09.2026, Figma-Mobilentwurf: 18px wie am Rechner). Deshalb steht --fliesstext-groesse hier nicht und bleibt bei 1.125rem. Der Lead muss groesser sein als der Fliesstext darunter, daher 1.25rem. Beides stand bis 22.09.2026 nur in der Website-Kopie. */ --lead-groesse: 1.25rem; --betont-groesse: 1rem; --zitat-groesse: 0.9rem; --hinweis-groesse: 0.8rem; --label-groesse: 0.75rem; --abstand-abschnitt: 48px; --abstand-maximal: 64px; /* 84px statt der 76 aus dem Figma-Entwurf und nur 6px Polster: das Logo ist damit 72px hoch und 270px breit. Bei 60px war die Zeile "Alexandra Wuensch" auf dem Handy nicht mehr zu entziffern. */ --kopfzeile-hoehe: 84px; --kopfzeile-polster: 6px; } }