, er schrumpft dann auf seine Textbreite. Deshalb die Breite ausrechnen — 100% minus die zweimal 5px Rand. */ .faq__frage{padding-inline:35px;width:calc(100% - 10px)} /* rechts 73px: 35 Rand + 26 Zeichen + 12 Abstand, siehe .faq__antwort */ .faq__antwort{padding-inline:35px 73px} /* 12) Kontakt. Der Entwurf legt das Formular ueber die volle Bahn: Vorname und Nachname nebeneinander, E-Mail und Nachricht darunter ueber beide Spalten. Unter dem Formular steht das Foto links und daneben Name, Rolle und Knopf. Bei uns stand das Formular in einer schmalen Spalte und die Karte darunter mittig. */ /* Der Vorspann stand auf 1.2rem ueber die volle Bahn. Kleiner und auf Lesebreite begrenzt steht er ruhiger; der feste Umbruch vor "Ich freue mich auf Dich!" bleibt, das war eine Entscheidung vom 13.09.2026. */ /* GEFUNDEN 16.09.2026, zweiter Anlauf: mein erster Versuch mit "#kontakt .lead" hat nichts bewirkt. Weiter oben steht "#kontakt .kopf .lead{font-size:1.4rem}" — eine Klasse mehr, also genauer, und die gewinnt. Deshalb blieb der Vorspann bei 22.4px, waehrend alle anderen Vorspanne der Seite auf 19.2px stehen. Genau dieser Ausreisser ist Anita aufgefallen. Merke: bei einem Wert, der sich nicht aendern will, zuerst nach einem genaueren Selektor suchen, nicht den Wert nochmal setzen. */ /* Zweizeilig statt dreizeilig: der erste Satz muss in eine Zeile passen, dann folgt "Ich freue mich auf Dich!" als zweite. Dafuer braucht er die volle Bahn und 1rem — mit 38rem Begrenzung brach er selbst um und der feste Umbruch machte daraus drei Zeilen. */ /* Zweizeilig statt dreizeilig. Der erste Satz braucht ungebrochen 795px, die Bahn gibt bei 834px nur 786 her — er brach also selbst um, und der feste Umbruch vor "Ich freue mich auf Dich!" machte daraus die dritte Zeile. Auf dem Tablet faellt der feste Umbruch deshalb weg, der Text fliesst und kommt mit zwei Zeilen aus. */ #kontakt .kopf .lead{font-size:1rem;max-width:none} #kontakt .kopf .lead br{display:none} /* justify-content und justify-items muessen mit zurueckgesetzt werden: die Grundregel zentriert den Kasten (justify-content:center) und der 1087er Block deckelt die Spalte auf 620px — zusammen blieb das Formular schmal, egal welche Spaltenbreite hier steht. */ /* 64px zwischen Formular und Karte. 32 waren zu dicht, die Karte klebte am Pflichthinweis; 56 war zu weit. */ .kontakt{grid-template-columns:minmax(0,1fr);gap:64px; justify-content:stretch;justify-items:stretch} /* Der Absendeknopf rueckt naeher an das Formular: 10 statt 24px Abstand, zusammen mit der Rasterluecke sind es 25 statt 39. */ .kontakt__absenden{margin-top:10px} /* VERWORFEN 16.09.2026: Foto zuerst, Formular darunter. Sah falsch herum aus. Es bleibt bei Formular oben, Foto darunter. */ /* HIER STAND EIN FEHLER, gefunden 16.09.2026 durch Anitas Frage. Vorher machte diese Regel das Formular selbst zu einem Raster mit zwei Spalten, damit Vorname und Nachname nebeneinander stehen. Das Formular der Kontaktseite traegt dieselbe Klasse, gruppiert seine Felder aber in Zweierreihen (.nachricht__reihe). Die Regel hat dort also die REIHEN nebeneinander gestellt statt der Felder: bei 834px standen alle vier Felder in einer Zeile und das Nachrichtenfeld war nur halb so breit. Jetzt macht das ueberall dieselbe Reihe: .nachricht__reihe steht weiter unten als allgemeine Regel und gilt fuer beide Formulare. Das Formular selbst bleibt eine Spalte (Flexbox aus der Grundregel), damit gibt es nichts mehr, was kollidieren kann. */ /* Die Felder standen bis an die Bahnkante. 40px Polster an beiden Seiten geben ihnen Luft, ohne dass sie wieder in eine schmale Spalte muessen. Nur auf der Startseite: auf der Kontaktseite steht das Formular unter einer linksbuendigen Ueberschrift, dort saehe der Einzug nach einem Versehen aus. */ #kontakt .kontakt__form{padding-inline:40px} /* Der Hinweis darueber bringt seinen eigenen Abstand mit; zusammen mit der Rasterluecke standen 39px zwischen ihm und der Meldung. */ .kontakt__form .nachricht__datenschutz{margin-bottom:0} .kontakt__form .meldung{margin-top:0} .kontakt__senden{padding-inline:96px} /* Foto links, Text und Knopf rechts daneben, senkrecht mittig. */ /* Foto weiter nach rechts (40px Einzug), daneben Name, Rolle und Knopf dicht untereinander. Vorher zog das Raster die drei Zeilen weit auseinander, weil der Platz gleichmaessig verteilt wurde. */ /* Foto und Textblock stehen als Paar mittig auf der Seite, nicht linksbuendig: beide Spalten auf ihre Inhaltsbreite und die Gruppe mit justify-content zentriert. */ .kontakt__karte{grid-template-columns:auto auto; gap:0 48px;justify-content:center;justify-items:start; text-align:left;align-content:center} /* Das Foto waechst ab rund 870px mit: bei festen 260px wirkte es auf den breiteren Tablets verloren. Unten bei 260 gedeckelt, damit es bei 768 nicht mit dem Textblock daneben kollidiert, oben bei 330. height:auto mit aspect-ratio statt fester Hoehe — sonst gewinnt die Hoehenangabe und das Bild wird gestaucht. */ .kontakt__foto{grid-row:1 / span 3;align-self:center; width:clamp(260px, 30vw, 330px);height:auto;aspect-ratio:1} /* Name, Rolle und Knopf stehen als kompakte Gruppe senkrecht mittig neben dem Foto. Ohne die beiden 1fr-Zeilen oben und unten verteilt das Raster den freien Platz auf alle Zwischenraeume und zieht die drei auseinander. */ .kontakt__karte{grid-template-rows:1fr auto auto auto 1fr} .kontakt__foto{grid-row:1 / -1} .kontakt__name{grid-row:2;margin-bottom:4px} .kontakt__rolle{grid-row:3;margin-bottom:14px} .kontakt__karte .btn{grid-row:4} /* 10) FAQ. Vier Punkte aus Anitas Durchgang: - Der Vorspann lief ueber die volle Bahn und klebte fast am Rand. Jetzt auf 34rem begrenzt und mittig, damit er in zwei ruhigen Zeilen steht. - Die Felder bekommen seitlich 40 statt 26px Innenabstand. - Die Frage ist eine Stufe kleiner als der Fliesstext (1rem statt 1.125), damit sie sich vom Slogan darunter unterscheidet. - Der Slogan wird ebenfalls begrenzt und bricht dadurch um. */ /* Beide weiterfuehrenden Saetze gleich gross und fett: "Du moechtest mehr ueber den genauen Ablauf..." vor dem FAQ-Knopf und "Erfahre mehr ueber meine Werte..." im Cremeband nach "Ueber mich". Der zweite stand auf 19.2px und Gewicht 500. */ .faq + .faq__slogan,.faq__slogan{max-width:32rem;font-size:1.1875rem} .zitatband--angehaengt .text-weit{font-size:1.1875rem;font-weight:400; max-width:36rem;margin-inline:auto} .zitatband--angehaengt .text-weit strong{font-weight:700} .abschnitt:has(.faq) .kopf p{max-width:34rem;margin-inline:auto; text-wrap:balance} .faq__frage{padding:20px 40px;font-size:1rem} /* rechts 78px: 40 Rand + 26 Zeichen + 12 Abstand, siehe .faq__antwort */ .faq__antwort{padding-inline:40px 78px} /* Die Antwort muss mitgehen: sie stand auf 1rem, also seit der Verkleinerung genauso gross wie die Frage. Die Frage soll die staerkere Zeile bleiben. */ .faq__antwort p{font-size:0.9375rem} /* 7) Cremebaender oben und unten schmaler. 100px Innenabstand waren zu viel Flaeche um wenige Zeilen Text. */ .zitatband--instagram{padding-block:72px} /* "Ueberzeuge Dich selbst" steht auf Weiss und hat weder --angehaengt noch --zwei, es bekam deshalb die 70px Aussenabstand aus der allgemeinen Tablet-Regel. Oben und unten auf 24px: der Abschnitt rueckt nach oben, und das Bildband samt FAQ dahinter kommt mit. */ .zitatband--weiss{padding-block:72px;margin-block:32px 24px} /* 8) Vorspann naeher an die Galerie: 64px Abstand waren zu viel. */ .galerie{margin-top:32px} /* 9) Bewertungen. Bis 1115px stand hier eine Spalte, weil die zwei festen 504px-Spalten nicht mehr in die Bahn passen. Mit mitwachsenden Spalten geht es doch: bei 834px sind das zwei Karten zu je 381px. Anitas Ziel ist, moeglichst alle vier Stimmen auf einen Blick zu sehen. Dafuer ruecken sie zusammen (Innenabstand 32 statt 64, Zeilen- und Spaltenabstand kleiner) und der Zitattext wird eine Stufe kleiner. */ #erfahrungen{padding-top:96px} .br-tablet{display:inline} .bewertungen{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px;row-gap:24px;margin-top:32px} .bewertung{max-width:none;padding:0 32px 32px;margin-top:64px} .bewertung__zitat,.bewertung__name{font-size:0.9375rem;line-height:1.6} .bewertung__foto{width:120px;height:114px;margin-top:-46px} /* Die Pflichtangabe soll dazugehoeren, aber leise bleiben. */ .bewertungen__echtheit{margin-top:24px;font-size:0.8125rem} /* 6) Galerie "Eindruecke aus unserem Alltag". Die Bilder waren 317 breit und 520 hoch, also stark hochformatig — object-fit:cover schneidet davon seitlich viel weg. Im Entwurf sind sie rund 396 zu 468, fast quadratisch, und man sieht das Motiv. Dazu rueckt der Abschnitt hoch: 160px Innenabstand oben waren zu viel, im Entwurf sitzt die Ueberschrift rund 72px unter der Kante des Cremebands darueber. */ .galerie__spur img{width:clamp(300px,47.5vw,420px);height:460px} .abschnitt--sehr-luftig:has(.galerie){padding-top:80px} /* 5) Das angehaengte Cremeband nach "Ueber mich" stand zu frei: 64px Abstand vom Abschnitt darueber plus 100px eigener Innenabstand. Es gehoert thematisch an "Ueber mich" dran, deshalb ruecken beide zusammen. */ .abschnitt--eng-unten{padding-bottom:24px} .zitatband--angehaengt:not(.zitatband--zwei):not(.zitatband--instagram){ padding-block:64px} /* FALLE, die hier zugeschlagen hat: .zitatband--angehaengt{margin-top:0} steht weiter oben in der Grundregel, im Tablet-Block danach aber .zitatband{margin-top:70px} — gleiche Genauigkeit, spaetere Regel gewinnt. Die angehaengten Baender bekamen dadurch auf dem Tablet doch wieder 70px Abstand nach oben, obwohl sie am Abschnitt darueber kleben sollen. "Jeder Hund ist anders" behaelt seinen Abstand, es gehoert nicht an die Kacheln geklebt. */ .zitatband--angehaengt:not(.zitatband--zwei){margin-top:24px} } /* ---------- Hero-Foto ab 800px wieder ganz im Bild ---------- Anitas Vorgabe vom 15.09.2026: Bei der schmalsten Tablet-Breite darf das Foto leicht angeschnitten sein, auf den gaengigen Tabletgroessen soll es ganz zu sehen sein. Das geht nicht mit einem einzigen Prozentwert: die Breite waechst dann im gleichen Takt wie das Fenster, der Anschnitt bleibt also ueberall gleich. Deshalb zwei Bereiche. 768 bis 799 60.1% — rund 20px ueber die Fensterkante ab 800 55% — bleibt mit 15 bis 20px Abstand innerhalb Die Grenze liegt auf 800, weil dazwischen kein gaengiges Geraet steht: 768 ist Chromes alter iPad-Mini-Eintrag, das naechste echte Geraet ist das iPad mit 820. Beim Ziehen am Fensterrand sieht man den Sprung an dieser Stelle, auf einem Geraet nie. */ @media (min-width:800px) and (max-width:1024px){ body:not([data-hero-tablet="gestapelt"]) .hero__bild{flex-basis:55%} } /* ---------- Bildband, Siegel und Vertrauensleiste auf Tablet ---------- Drei Punkte aus Anitas Durchgang bei 768px, 15.09.2026. */ @media (min-width:768px) and (max-width:1024px){ /* 1) Mehr Luft um den Hund. Das Bandfoto ist ein Panorama von 1920 zu 400. object-fit:cover skaliert es auf die Bandhoehe — je hoeher das Band, desto staerker der Zoom und desto weniger Umgebung bleibt stehen. Bei 300px waren von der Bildbreite nur rund 53 Prozent zu sehen und der Hund stand fast formatfuellend. Bei 240px sind es rund 67 Prozent: der Hund ist ganz zu sehen, samt Rute, und hat Schnee und Berge um sich. GEAENDERT 15.09.2026 auf 310px: das ist der gemessene Wert aus dem Figma-Tablet-Frame (Band von y 631 bis 941). Anitas Vorgabe, sich staerker am Entwurf zu orientieren. Der Preis dafuer ist bekannt und nicht wegzurechnen: unser Quellbild ist ein flaches Panorama von 1920 zu 400. Je hoeher das Band, desto staerker der Zoom. Bei 240px waren rund 67 Prozent der Bildbreite zu sehen, bei 310px nur noch 54 — der Hund steht also wieder deutlich formatfuellender als im Entwurf, wo er rund 45 Prozent der Breite einnimmt. Figma arbeitet dort mit mehr Bildmaterial, als wir haben. Loesen laesst sich das nur mit einem eigenen Zuschnitt aus dem Originalfoto, siehe OFFEN.md. Nur .band--hoch, also das Band unter dem Hero: die uebrigen Baender sind reine Trennbilder und bleiben bei 300px. Und weil .band--hoch img und .band img gleich genau sind, muss diese Zeile NACH der allgemeinen stehen — der 1024er Block weiter oben setzt 300. */ .band--hoch img{height:310px} /* 2) Siegel und Sterne kleiner. 170px sind der Rechnerwert und wirkten auf dem flacheren Band zu wuchtig. Auf dem Handy sind es 96px, das Tablet liegt jetzt dazwischen. */ .band img.band__siegel{width:120px} .band__siegelblock{gap:6px} .band__sterne{font-size:1.1rem} /* Siegel etwas hoeher im Band. Es haengt oben (align-items:flex-start) und wird ueber den Innenabstand der Bahn gesetzt, nicht ueber einen eigenen Aussenrand. */ .band__bahn{padding-top:32px} /* 3) Die vier Punkte der Vertrauensleiste standen als umbrechende Flexzeile da: jede Zeile fuer sich mittig, und weil die vier Texte verschieden lang sind, sassen die Haken auf vier verschiedenen Linien — die Leiste schwang sichtbar hin und her. Jetzt ein Raster aus zwei Spalten, jede so breit wie ihr laengster Eintrag, Inhalt linksbuendig. Damit stehen die Haken je Spalte genau uebereinander. Der Block als Ganzes bleibt mittig. Dasselbe Verfahren wie auf dem Handy, dort nur einspaltig. max-width muss zurueckgesetzt werden: die 640px aus der 1178px-Regel wuerden die Spalten sonst stauchen. */ /* GEAENDERT 15.09.2026 auf die Fassung aus dem Figma-Tablet-Frame: alle vier Punkte in EINER Reihe, jeder Eintrag zweizeilig — erste Zeile normal, zweite fett. Die Leiste ist dadurch 77 statt 95px hoch, und die Frage nach den untereinander stehenden Haken stellt sich nicht mehr, weil es nur noch eine Reihe gibt. Gemessen im Entwurf: Eintraege 133 bis 175px breit, ueber die Bahn verteilt mit rund 40 bis 60px dazwischen — das ist space-between, keine festen Spalten. Der Umbruch kommt aus .vertrauen__oben (im HTML ergaenzt) und nicht aus einem
: beim dritten Eintrag muss "Erfahrung" mit in die zweite Zeile, es steht aber hinter dem fetten Teil. */ /* Vier gleich breite Spalten statt space-between. Die vier Texte sind verschieden lang (134 bis 173px); bei gleichen Luecken dazwischen sitzt dann jeder Haken woanders und einer wirkt eingequetscht. Mit 1fr-Spalten bekommt jeder Eintrag denselben Platz und die Haken stehen in einem gleichmaessigen Raster — so steht es auch im Entwurf, dort liegen sie rund 200px auseinander. */ .vertrauen__liste{display:grid;grid-template-columns:repeat(4,1fr); align-items:center;justify-items:start; max-width:none;gap:10px} /* NUR in der Vertrauensleiste umbrechen. Dieselben vier Punkte stehen auch in der Ueber-mich-Spalte, dort sollen sie einzeilig bleiben — ein ungenauer Selektor hat sie dort prompt mit umgebrochen. */ .vertrauen__liste .vertrauen__oben{display:block} /* Die Schrift waechst mit: bei 768px ist eine Spalte nur 172px breit, und der laengste Eintrag ("Mehr als / 5 Jahre Erfahrung") braucht bei 15px schon 173 — er lief dort in eine dritte Zeile und die Leiste wurde 96 statt 73px hoch. */ .vertrauen li{font-size:clamp(0.875rem,1.8vw,0.9375rem); line-height:1.5;align-items:center;gap:11px} /* 28px statt 22. Im Entwurf misst der Haken 27px — mit dem zweizeiligen Eintrag daneben traegt er das auch. */ .vertrauen .icon{width:28px;height:28px} } /* ========================================================= BREITES TABLET, 900 bis 1024 Bei 1024 ist die Bahn 976px breit. Was bei 768 richtig sitzt, faellt hier auseinander: die Vertrauensleiste wird linkslastig, Foto und Text bei "Ueber mich" driften auseinander, Vorspaenne stehen unnoetig zweizeilig. Anitas Durchgang 16.09.2026. Dieser Block steht bewusst NACH dem Tablet-Block: er hat dieselbe Genauigkeit, und bei gleicher Genauigkeit gewinnt die spaetere. ========================================================= */ @media (min-width:900px) and (max-width:1024px){ /* Vier gleich breite 1fr-Spalten schieben den Ueberschuss nach rechts: der letzte Eintrag endete 72px vor der Bahnkante, der erste stand genau auf ihr. Die Leiste wird deshalb auf ihre Inhaltsbreite gedeckelt (viermal 180 fuer den laengsten Eintrag plus dreimal 40 Luecke) und mittig gesetzt. Die Haken bleiben dabei auf einem gleichmaessigen Raster, das war die Bedingung. 840 und nicht 812: bei genau 173px Spaltenbreite lief der laengste Eintrag in eine dritte Zeile, er braucht die 173 selbst schon ganz. */ .vertrauen__liste{max-width:840px;margin-inline:auto;gap:40px} /* "Ueber mich" als ein Block statt zwei Haelften. Vier Dinge auf einmal, weil sie zusammenhaengen: 1. Foto 400 statt 350 — mit dem breiteren Fenster wirkte es klein. 2. Beide Spalten fest und die Gruppe mittig: vorher hing das Foto an der linken Bahnkante und der Text lief bis zur rechten. 3. Fliesstext auf 460 gedeckelt (rund 70 Zeichen); mit 586 lief er zu breit. minmax, damit er bei 900px mitschrumpft statt ueberzulaufen. 4. Die vierte Rasterzeile mit 1fr nimmt den Hoehenueberschuss des Fotos auf. Ohne sie verteilt das Raster ihn auf die drei Textzeilen und zieht Ueberschrift, Absatz und Haken auseinander — genau das sah zerrissen aus. */ .ueber{grid-template-columns:400px minmax(0,460px);column-gap:48px; justify-content:center; grid-template-rows:auto auto auto auto 1fr;row-gap:24px} .ueber__medien{width:400px;grid-row:1 / span 5} /* Knopf wieder unter den Textblock, mittig in dessen Spalte — so steht er auch auf dem Rechner (.ueber__aktion{text-align:center}). Dafuer darf das Rasterfeld NICHT auf seine Inhaltsbreite schrumpfen, sonst laeuft text-align ins Leere: justify-self bleibt deshalb auf stretch. Die eigene Zeile ueber beide Spalten war die Antwort auf die engen Tabletbreiten, hier ist genug Platz. */ .ueber__aktion{grid-column:2;grid-row:4;justify-self:stretch; margin-top:8px} /* Zurueck auf Fliesstextgroesse: die 16px waren die Antwort auf die schmale Spalte bei 768. */ .hakenliste li{font-size:1.125rem} /* Finnick und Ivy als kleine Einheit: die 1fr-Spalten waren bei 1024 je 478px breit, die beiden 300er Fotos standen dadurch 198px auseinander. Jetzt zwei Spalten in Fotobreite plus 20px, mittig, 32px Luft dazwischen. Der Text laeuft nicht mehr ueber die volle Spalte, sondern steht kompakt unter dem Namen. */ .hunde{grid-template-columns:repeat(2,360px);justify-content:center; gap:40px;max-width:none} /* Text genau so breit wie das Foto darueber. */ .hunde p{padding-inline:30px} /* Platz ist da, also duerfen die Bilder hoeher stehen. ACHTUNG: die Platzhalter sind nur 700px breit und werden dabei hochgerechnet. Mit den echten Fotos faellt das weg. */ .galerie__spur img{width:clamp(300px,47.5vw,470px);height:520px} /* Steht hier in einer Zeile statt in zwei, Platz ist genug. */ .abschnitt:has(.faq) .kopf p{max-width:none} /* Das Foto unter dem Formular blieb mit 30vw bei 912px auf 274 Pixeln stehen und wirkte dort verloren. Ab 900 waechst es schneller mit und ist bei 340 gedeckelt. Ab 960 steht der Kontaktbereich ohnehin nebeneinander, dort gilt die feste 320. */ .kontakt__foto{width:clamp(300px, 36vw, 340px)} /* Der Kontakt-Vorspann stand als einziger auf 16px, alle anderen Vorspaenne der Seite auf 19.2. Die 16 waren die Antwort auf die engen Tabletbreiten, wo der Satz sonst dreizeilig wurde. Er bricht von selbst, nicht am festen
, und der Kasten ist schmaler als die Bahn: 856px sind dieselbe Breite wie die FAQ-Kaesten und der Kontaktblock, darunter zieht die Feldbreite (Bahn minus zweimal 40px Polster). So bleibt links und rechts immer Luft — ueber die volle Bahn stand der Satz nur 11px vom Rand entfernt. */ #kontakt .kopf .lead{font-size:1.2rem;line-height:1.56; max-width:min(856px, 100% - 80px);margin-inline:auto} /* Die FAQ-Kaesten liefen ueber die volle Bahn (976px) und wirkten dadurch wuchtig. 856 mittig lassen links und rechts je 60px stehen — dasselbe Mass wie beim Kontaktblock darunter, damit die Seite bei 1024 einen durchgehenden Innenrand hat. */ .faq{max-width:856px} } /* ========================================================= KONTAKT NEBENEINANDER AB 960px Anitas Frage vom 16.09.2026: geht der Rechner-Aufbau bei 1024 schon? Ja. Der Rechner braucht 620 + 80 + 340 = 1040 plus zweimal 24px Bahnpolster, also 1088 — deshalb stand die Grenze bisher bei 1087. Mit einer schmaleren Karte (300 statt 340) und mitwachsender Luecke passt es ab 960. Der Block deckt 960 bis 1087 ab: er gilt damit auch fuer die Luecke zwischen Tablet-Ende (1024) und Rechner-Anfang (1088), die sonst wieder untereinander stuende. Er steht NACH dem Tablet-Block, sonst gewinnt dessen "untereinander" bei gleicher Genauigkeit. ========================================================= */ @media (min-width:960px) and (max-width:1087px){ /* 320 und nicht 300: der Knopf "Zu allen Kontaktinformationen" braucht 303px: in einer 300er Spalte brach er zweizeilig um. */ /* Die Gruppe steht nicht mehr ueber die volle Bahn, sondern mittig mit Rand: bei 1024 sind das 856px und je 60px Luft, genau wie bei den FAQ-Kaesten darueber. Die Breite waechst mit dem Fenster, damit der Uebergang zum Rechner-Aufbau (1040px ab 1088) kein Sprung ist. Das Formular bekommt, was nach Karte und Luecke uebrig bleibt: 480px bei 1024. */ .kontakt{grid-template-columns:minmax(0,1fr) 320px; max-width:clamp(856px, 83.6vw, 960px);margin-inline:auto; justify-content:stretch;justify-items:stretch; align-items:end;gap:56px;margin-top:40px} /* Zurueck auf die Rechner-Fassung: Felder untereinander, das Nachrichtenfeld fuellt die Spaltenhoehe. Die zweispaltige Anordnung mit Vorname/Nachname nebeneinander war die Antwort auf eine Bahn ueber die volle Breite — die gibt es hier nicht mehr. */ #kontakt .kontakt__form{padding-inline:0} .kontakt__senden{padding-inline:50px} /* Karte zurueck auf einspaltig und mittig: Foto oben, darunter Name, Rolle und Knopf. Die Zeilen- und Spaltenangaben aus dem Tablet-Block muessen dafuer ausdruecklich geloescht werden. */ .kontakt__karte{grid-template-columns:none;grid-template-rows:none; justify-content:normal;justify-items:center;align-content:end; text-align:center;gap:11px;padding-bottom:38px} .kontakt__foto{grid-row:auto;align-self:auto;width:320px; margin-bottom:-5px} .kontakt__name{grid-row:auto;margin-bottom:0} .kontakt__rolle{grid-row:auto;margin-bottom:0} .kontakt__karte .btn{grid-row:auto} } /* ========================================================= SCHMALER RECHNER, 1025 bis 1178 Anitas Durchgang bei 1060 am 16.09.2026. Der Rechner-Bau ist auf 1200px Inhaltsbreite gerechnet. Bei rund 1000px Bahn stossen mehrere Stellen an ihre Grenze, ohne dass die Tablet-Regeln greifen. Steht bewusst nach allen Grundregeln: bei gleicher Genauigkeit gewinnt die spaetere. ========================================================= */ @media (min-width:1025px) and (max-width:1178px){ /* Alle vier Punkte in einer Reihe statt zwei und zwei. Einzeilig passen sie nicht — vier Eintraege zu rund 240px plus Luecken brauchen mehr, als die Bahn hergibt. Also zweizeilig wie auf dem Tablet, vier gleich breite Spalten, damit die Haken auf einem gleichmaessigen Raster sitzen. */ .vertrauen__liste{display:grid;grid-template-columns:repeat(4,1fr); max-width:880px;margin-inline:auto;gap:24px; align-items:center;justify-items:start} .vertrauen__liste .vertrauen__oben{display:block} /* 28 statt 22px. Neben dem zweizeiligen Eintrag traegt der Haken das, gleicher Wert wie auf dem Tablet. */ .vertrauen .icon{width:28px;height:28px} /* Kacheln: Ueberschrift und Text schmaler als die Spalte. Sie liefen ueber die volle Kachelbreite, dadurch standen die Texte zweier Nachbarkacheln fast aneinander. Die Fotos bleiben, wie sie sind. */ .karte h3,.karte p{max-width:86%;margin-inline:auto} /* ZURUECKGENOMMEN 16.09.2026: hier stand min-height:2.68em an der Ueberschrift, damit die Subtexte einer Reihe immer auf einer Linie beginnen. Das kostete in der ersten Reihe, wo beide Ueberschriften einzeilig sind, eine ganze Leerzeile. Mit der 86-Prozent-Begrenzung brechen beide Ueberschriften der zweiten Reihe ohnehin gleich um, die Subtexte liegen also von selbst auf einer Linie. ACHTUNG: das haelt nur, solange beide Ueberschriften einer Reihe gleich viele Zeilen brauchen. Der saubere Weg waere grid-template-rows:subgrid an der Kachel, siehe OFFEN.md. */ /* Das Skylineband stand 160px ueber "Ueber mich". */ .band + #ueber-mich{padding-top:96px} /* Umbruch nach "Echte Erfahrungen", damit die Ueberschrift nicht ueber die volle Bahn laeuft. Derselbe Umbruch wie auf dem Tablet. */ .br-tablet{display:inline} /* Zwei Empfehlungen nebeneinander. Die festen 504er Spalten samt 60px Abstand brauchen 1116px Fensterbreite; hier teilen sich die beiden Spalten stattdessen den vorhandenen Platz. */ .bewertungen{grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px} /* Die Pflichtangabe stand 80px unter den Karten und wirkte abgetrennt. */ .bewertungen__echtheit{margin-top:24px} } /* ========================================================= KACHELN: ZEILENWEISE AUSRICHTUNG UEBER SUBGRID Anitas Wunsch vom 16.09.2026, gefunden bei 1140. Problem: braucht eine Kachelueberschrift zwei Zeilen und die daneben nur eine, beginnt deren Fliesstext hoeher. Vorher standen hier zwei Notloesungen: eine feste Zwei-Zeilen-Hoehe (kostet in Reihen mit einzeiligen Ueberschriften eine Leerzeile) oder gar nichts (haelt nur zufaellig). Loesung: die Kachel wird selbst zum Raster und uebernimmt mit grid-template-rows:subgrid die vier Zeilen des Kachelrasters — Bild, Ueberschrift, Text, Knopf. Jede dieser Zeilen ist so hoch wie ihr hoechster Inhalt in DIESER Kachelreihe, und zwar nur dann. Bild, Text und Knopf liegen damit zeilenweise auf einer Linie. Die einzeilige Ueberschrift sitzt mit align-self:center mittig in der Hoehe der zweizeiligen daneben. Die zwei Vorschaukacheln haben keinen Knopf und spannen deshalb nur drei Zeilen — mit vier bliebe unter ihnen eine leere Zeile samt Zwischenraum stehen. Die Zwischenraeume: .karten gibt 128px zwischen den Kachelreihen vor, die Kachel ueberschreibt das fuer ihre eigenen vier Zeilen mit 28. @supports, weil subgrid erst ab Chrome 117, Firefox 71 und Safari 16 koennen. Aeltere Browser behalten die bisherige Flexbox-Fassung, dort sitzen die Knoepfe weiter ueber margin-top:auto auf einer Linie. ========================================================= */ @supports (grid-template-rows: subgrid){ @media (min-width:1025px){ /* WICHTIG: der Zeilenabstand muss am .karten-Raster stehen, nicht an der Kachel. Ein Subgrid darf laut Norm einen eigenen row-gap setzen, Chromium rechnet die Differenz zum Elternabstand aber trotzdem in die Zeilen — mit 128 am Elternteil und 28 an der Kachel standen real 53px zwischen Bild und Ueberschrift, und der Abschnitt war 115px zu hoch. Deshalb: 28 am Raster fuer alle Zeilen, und die 128 zwischen den Kachelreihen kommen als Aussenrand an den Kacheln, die nicht in der letzten Reihe stehen (28 + 100). */ .karten{row-gap:28px} .karte:nth-last-child(n+3){margin-bottom:100px} .karte{display:grid;grid-template-rows:subgrid;grid-row:span 4; justify-items:center;align-items:start} .karte--vorschau{grid-row:span 3} .karte h3{align-self:center} .karte .btn{align-self:end;margin-top:0} } } /* ========================================================= MOBIL ========================================================= */ @media (max-width:767px){ .bewertung__zitat{text-align:left} /* 1rem statt 0.9rem: die Leiste steht untereinander und hat Platz, und bei 14.4px war sie die kleinste Schrift auf der Seite. */ .vertrauen li{font-size:1rem} /* Schmaler und hoeher als bisher: im Figma-Mobilentwurf stehen zwei Bilder nebeneinander im Bild und das dritte ist angeschnitten. Mit 280px bei 420px Hoehe war nur eineinhalb zu sehen, und man erkannte nicht, dass es ein Wischband ist. */ /* GEAENDERT 14.09.2026: ein Bild statt zweieinhalb. Das Bild ist so breit wie die Bahn und steht damit auf derselben Kante wie alles andere. Die Spur bekommt denselben Innenabstand, damit das eingerastete Bild buendig sitzt; scroll-padding sorgt dafuer, dass das Einrasten diesen Abstand mitrechnet. Vom naechsten Bild bleiben rechts 8px sichtbar — gerade genug, um zu zeigen, dass es weitergeht, ohne dass zwei Bilder konkurrieren. Die Punkte darunter sind der zweite Hinweis. */ .galerie__spur{padding-inline:var(--abstand-standard); scroll-padding-inline:var(--abstand-standard)} .galerie__spur img{width:calc(100vw - 2 * var(--abstand-standard)); height:500px} /* Die Pfeilknoepfe sind auf dem Handy ueberfluessig — dort wird gewischt, und sie liegen mitten auf dem Bild. Im Figma-Mobilentwurf gibt es sie auch nicht. Die Punktleiste bleibt: sie zeigt, dass es weitergeht. */ .galerie__knopf{display:none} /* Hundekarten untereinander, Text ohne seitliches Polster. */ .hunde{grid-template-columns:1fr;gap:var(--abstand-gruppe)} .hunde p{padding-inline:0} .hunde-kopf{margin-top:var(--abstand-block)} .zitatband .text-weit{margin-inline:0} /* 300px, Wert aus dem Figma-Mobilentwurf. Elementor sagt hier 200px — das gilt fuer den Desktopbuild, fuer Mobil ist Figma die Vorlage. MERKE zur Bildwirkung: die Platzhalter sind 1600 zu 333 (4,8 zu 1). Ein 300px hohes Band auf einem 390px breiten Bildschirm hat das Verhaeltnis 1,3 zu 1 — sichtbar ist davon also nur rund ein Viertel der Bildbreite, egal welchen Ausschnitt man waehlt. Mehr Motiv geht nur mit einem eigenen Mobilzuschnitt; die Liefergroesse dafuer (1600 x 640) steht in BILDER.md. Damit waere bei 300px Hoehe gut die halbe Bildbreite zu sehen. */ .band img{height:300px} /* FALLE, die hier zugeschlagen hat: .band--hoch img und .band img sind gleich genau (eine Klasse, ein Element). Bei Gleichstand gewinnt die spaetere Regel — die Sonderhoehe fuer das Band unter dem Hero stand weiter oben und wurde deshalb still ueberschrieben. Sie muss NACH der allgemeinen Regel stehen. */ .band--hoch img{height:270px;object-position:50% center} /* 32px statt 71: zusammen mit den 48px Innenabstand des Abschnitts darueber lagen 119px zwischen der letzten Kachel und dem Cremeband. Jetzt 80px — dieselbe Groessenordnung wie auf dem Desktop, wo es 96 sind. "Jeder Hund ist anders" gehoert inhaltlich noch zu den Leistungen und soll dicht darunter sitzen. */ .zitatband{padding-block:80px;margin-top:32px} /* 80 minus die 24px, die die zweite Zeile kostet. */ .zitatband--zwei{padding-block:56px} /* 48 statt 70px: Wunsch vom 14.09.2026, "Ueber mich" soll dichter unter das Bildband ruecken. */ .band + .abschnitt{padding-top:48px} /* ----- Mobilrunde 14.09.2026 ----- Drei Stellen liefen auf dem Handy in einer Spalte von rund 180 bis 215px, weil dort feste Innenabstaende aus dem Desktop stehen (80px am Instagramtext, 80px in der Hero-Blase, 64px in den Bewertungskarten). Auf 1200px Bahn faellt das nicht auf, auf 342px bleibt die Haelfte uebrig und der Text bricht nach drei Woertern. Grundsatz daraus: feste seitliche Innenabstaende gehoeren auf Mobil immer nachgerechnet. */ /* ----- Hero ----- Ziel: der Knopf soll moeglichst noch auf den ersten Bildschirm passen. Dafuer ist der Hero auf dem Handy dicht gesetzt — kein Innenabstand oben, das Foto kleiner, und Foto, Ueberschrift, Flaeche und Knopf ruecken enger zusammen als auf dem Desktop. Nachgemessen bei 390 x 844. */ .hero .bahn{padding-block:0 var(--abstand-weit);gap:0} /* Der Textblock steht 8px weiter innen als die Bahn. Damit beginnt die Ueberschrift bei genau 32px — an derselben Kante wie der Text in der gelben Flaeche darunter. Vorher standen die beiden 8px versetzt, und weil die laengste H1-Zeile 328 von 342px misst, klebte der ganze Block sichtbar am linken Rand. Der Einzug steht bewusst NUR links. Rechts ist keiner noetig: die laengste Zeile ("in München Nord") misst 328px und endet damit bei 360, rechts bleiben 30. Mit 8px auch rechts waere die Spalte 326 breit — zwei Pixel zu schmal, und die Zeile bricht in eine vierte um. Ergebnis so: der Block steht optisch mittig, der Text bleibt linksbuendig. */ .hero__text{padding-left:8px;padding-right:0} /* VERWORFEN 14.09.2026: die Ueberschrift in das Foto hineinragen lassen, so wie im Figma-Mobilentwurf. Dort laeuft das Motiv nach unten transparent aus, unser Freisteller nicht — die Hunde stehen bis zur Unterkante, und "Professionelle" lag mitten auf ihren Beinen. Deshalb nur dicht heran, ohne Ueberlappung. */ .hero__bild{max-width:285px;width:100%; margin:12px auto var(--abstand-eng);order:-1} /* Die gelbe Flaeche laeuft ueber beide Bildschirmkanten hinaus, ihre runden Enden liegen ausserhalb. So ist es im Figma-Mobilentwurf: dort ragt sie 160px nach links und 210px nach rechts heraus. Hier reichen 48px, damit die Rundungen sicher aus dem Bild sind. Die Rechnung: 24px Bahnpolster plus 90px Ueberstand nach aussen, derselbe Wert wieder nach innen plus die 32px, bei denen der Text im Entwurf beginnt — der Text startet dadurch immer bei genau 32px, egal wie gross der Ueberstand ist. 90px und nicht weniger: die Form ist von Natur aus 727 zu 187 und wird auf die Blasenbreite gezogen. Bei 486px Breite war sie so gestaucht, dass oben und unten fast gerade Kanten standen und das Ganze wie ein Balken aussah. Bei 570px bleiben die Wellen. */ /* 122px steht an drei Stellen und muss dort denselben Wert haben: als Aussenrand nach links und rechts, als Zuschlag zur Breite und als Innenabstand. Erst dann beginnt der Text genau an der Kante der Ueberschrift. Die Zahl selbst: 90px liegen ausserhalb des Bildschirms, damit die runden Enden der Form nicht zu sehen sind, plus die 32px bis zum Text. FALLE, die hier zugeschlagen hat: vorher war der Aussenrand mit 114 und der Innenabstand mit 122 gerechnet. Die Blase stand dadurch 8px zu weit rechts UND der Text war 16px schmaler als gedacht — genug, um eine zusaetzliche Zeile zu erzwingen. Bei zusammen- gehoerenden Werten also einen einzigen Wert schreiben. */ .hero__blase{margin-inline:-122px; width:calc(100% + 244px); padding:22px 122px; margin-block:10px 16px} /* 18px auf 160% — die Werte aus dem Figma-Mobilentwurf. Eine Stufe groesser als der uebrige Fliesstext auf dem Handy: der Satz ist das Versprechen der Seite und hat in der Flaeche Platz. Die Zeilenhoehe steht hier ausdruecklich, weil --betont-hoehe mit 1.62 eine Spur lockerer ist als die 1.6 aus dem Entwurf. */ .hero__blase p{max-width:none;font-size:1.125rem;line-height:1.6} /* So gross wie moeglich, ohne dass "Hundebetreuung" umbricht oder der Knopf aus dem ersten Bildschirm faellt. Nachgemessen: bei 2.5rem passt die laengste Zeile mit rund 10px Luft. */ .hero h1{font-size:2.5rem;line-height:1.12} .hero__fuss{margin-top:var(--abstand-nah)} /* Mittig unter dem Knopf und eine Spur groesser: bei 0.8rem war der Hinweis auf dem Handy kaum zu lesen, und er stand linksbuendig unter einem mittigen Knopf. */ .hero__hinweis{text-align:center;font-size:0.95rem; margin-top:var(--abstand-nah)} /* Vertrauensleiste: die vier Punkte stehen untereinander und alle an derselben Kante. Vorher war jede Zeile fuer sich mittig, dadurch standen die vier Haken auf vier verschiedenen Linien und die Liste franste aus. Der Block als Ganzes bleibt mittig. So steht es auch im Figma-Mobilentwurf. */ .vertrauen__liste{display:grid;justify-content:center; justify-items:start;gap:10px} /* KORREKTUR 14.09.2026: Hier stand align-items:flex-start mit 2px Versatz am Haken — gedacht fuer zweizeilige Texte. Alle vier Texte sind auf dem Handy aber einzeilig, und dadurch sass jeder Haken sichtbar 2px zu hoch. Zurueck auf mittig. */ .vertrauen li{align-items:center;gap:8px} /* Haken eine Spur kleiner und die Zeilen dichter: der gelbe Balken nahm sonst einen zu grossen Teil des Bildschirms ein. */ .vertrauen .icon{width:20px;height:20px;margin-top:0} .zitatband .instagram__text{margin-inline:0} /* Die Karten laufen randlos ueber die volle Breite, so wie im Figma-Mobilentwurf: die Cremeflaeche geht dort von Kante zu Kante, nicht in der Bahn eingerueckt. Der negative Aussenrand hebt das seitliche Polster der Bahn auf. Innen 32px statt 64px — der Zitattext ist damit 326 statt 214px breit, das sind bei einer Schrift mit Serifen rund fuenf Zeilen weniger. */ .bewertungen{margin-top:var(--abstand-gruppe); margin-inline:calc(-1 * var(--abstand-standard)); grid-template-columns:minmax(0,1fr)} .bewertung{max-width:none;padding:0 var(--abstand-weit) 32px} /* Die weiterfuehrenden Buttons haben 70px Innenabstand seitlich. Bei 342px Bahn bleiben fuer die Beschriftung 200px, "Das erwartet Deinen Hund" und "Doggery bei Instagram" brechen dann zweizeilig um. Auf dem Handy deshalb 28px — die Flaeche ist mit der vollen Zeile ohnehin gross genug zum Treffen. */ .btn--sekundaer{padding-inline:28px} /* ----- Ueber mich ----- Reihenfolge auf dem Handy: Foto, Ueberschrift, Text, Hakenliste, Zitatflaeche, Knopf. Das Zitat direkt unter dem Foto wurde am 14.09.2026 getestet und verworfen — es trennte Foto und Text zu stark. Es steht jetzt am Ende des Blocks, aber VOR dem Knopf: der Knopf ist der Abschluss des Abschnitts. Damit sich Zitat und Knopf ueberhaupt sortieren lassen, loesen display:contents die beiden Zwischenkaesten auf — Foto, Zitat und alle Textteile werden dadurch direkte Flex-Kinder von .ueber. order 2 fuer alles aus der Textspalte, damit nur Zitat (3) und Knopf (4) danach kommen; ohne die Angabe stuenden sie auf 0 und damit vor dem Foto. */ .ueber{display:flex;flex-direction:column;gap:28px; margin-top:var(--abstand-weit)} .ueber__medien,.ueber__text{display:contents} .ueber__medien img{order:1} .ueber__text>*{order:2} .ueber__zitat{order:3} .ueber__aktion{order:4;margin-top:10px} /* So gross wie die Kachelueberschriften der Leistungen (32px im Figma-Entwurf). Bei 24px stand die Zeile als Ueberschrift kaum ueber dem Fliesstext darunter. */ .ueber__text .h3-klein{font-size:2rem} /* 122px steht wie im Hero an drei Stellen fuer denselben Wert: 90px liegen ausserhalb des Bildschirms, damit die runden Enden der Form nicht zu sehen sind, plus die 32px bis zum Text. Der Aussenrand macht das Element automatisch 244px breiter, eine eigene Breitenangabe braucht es hier nicht — anders als im Hero, wo die Flaeche ein Flex-Kind ist. aspect-ratio statt fester Innenabstaende: die Form ist von Natur aus flach (727 zu 187, also 3,89 zu 1) und sieht ueber die volle Bildschirmbreite wie ein gerader Balken aus. Erst wenn die Flaeche deutlich hoeher ist als die Form von sich aus waere, zerrt background-size sie in die Hoehe und die Wellen werden sichtbar. 3,05 zu 1 ergibt rund ein Viertel mehr Hoehe. Mit festen Innenabstaenden waere das nicht zu halten: bei 430px Bildschirm laeuft das Zitat zweizeilig statt dreizeilig, die Flaeche wird niedriger UND breiter — und damit wieder flach. Der Inhalt steht senkrecht mittig und darf die Flaeche bei Bedarf hoeher druecken. */ .ueber__zitat{margin:0 -122px;padding:24px 122px;font-size:1rem; aspect-ratio:3.05;display:flex;flex-direction:column; justify-content:center} /* FALLE 14.09.2026: overflow-x:clip stand zuerst an .ueber. Das ist ein Kind der Bahn und damit 24px vom Bildschirmrand entfernt — die Zitatflaeche wurde an DIESER Kante abgeschnitten, links und rechts blieb ein weisser Streifen stehen. Der Schnitt gehoert an das erste Element, das ueber die volle Breite geht, hier der Abschnitt. clip statt hidden: hidden wuerde einen Scrollbereich erzeugen und senkrecht mit abschneiden. */ #ueber-mich{overflow-x:clip} /* ----- Weissraum zwischen den Abschnitten ----- 14.09.2026. Drei Werte aus dem Desktopbuild liefen auf dem Handy unveraendert mit und ergaben zusammen bis zu 240px Leere zwischen zwei Abschnitten: 160px Innenabstand bei --sehr-luftig, 80px in den angehaengten Cremebaendern und 64px am --eng-unten darueber. Auf einem 844px hohen Bildschirm ist das ein Viertel Bildschirm ohne Inhalt. */ .abschnitt--sehr-luftig{padding-top:56px} .abschnitt--eng-unten{padding-bottom:32px} /* Die Erfahrungen brauchen mehr Luft als die Galerie: darueber steht das Cremeband, und der Wechsel von farbiger auf weisse Flaeche wirkt ohne Abstand wie ein Schnitt. */ #erfahrungen{padding-top:88px} .zitatband--angehaengt{padding-block:56px;margin-top:24px} /* "Jeder Hund ist anders" behaelt seine abgenommenen Werte: das Band hat zwei Absaetze und braucht die Hoehe, und der Abstand nach oben war dort schon auf 32px gesetzt. */ .zitatband--zwei{padding-block:56px;margin-top:32px} /* "Ueberzeuge Dich selbst" gehoert dicht an die Stimmen darueber. */ /* padding-block muss hier nochmal stehen: die Grundregel setzt es auf 0, die Mobilregel .zitatband weiter oben zieht es wieder auf 80. Nach unten mehr als nach oben: darunter folgt ein Bildband, das sonst direkt am Knopf klebt. */ .zitatband--weiss{padding-block:0;margin-block:64px 80px} /* Das Logo nimmt fast die volle Bahnbreite ein. Auf dem Rechner sind es 360px in einer 1200er Bahn, auf dem Handy waren es 274 von 342 — verhaeltnismaessig also deutlich kleiner als auf dem Rechner. */ .instagram__logo{width:100%;max-width:320px} /* ----- Erfahrungen als Wischband ----- Auf dem Handy standen die vier Karten untereinander und der Abschnitt war ueber 3000px lang. Jetzt eine Karte je Bildschirm, seitlich zu wischen, mit Punkten darunter. Der negative Aussenrand hebt das Band aus der Bahn heraus, damit es randlos laeuft; der Innenabstand setzt die Karte wieder auf die Bahnkante. scroll-padding sorgt dafuer, dass das Einrasten diesen Innenabstand mitrechnet. align-items:stretch (Standard) macht alle Karten gleich hoch — beim Wischen springt die Hoehe sonst bei jeder Karte. */ /* FALLE 14.09.2026: justify-content:center steht in der Grundregel und wirkt bei Flex weiter. Sind die Karten zusammen breiter als der Container, laufen sie dadurch nach BEIDEN Seiten hinaus — die ersten beiden lagen ausserhalb und waren nicht zu erreichen, weil links von scrollLeft 0 nichts liegt. */ .bewertungen{display:flex;justify-content:flex-start; gap:var(--abstand-standard); overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory; margin-inline:calc(-1 * var(--abstand-standard)); padding-inline:var(--abstand-standard); scroll-padding-inline:var(--abstand-standard); scrollbar-width:none;-ms-overflow-style:none; margin-top:var(--abstand-weit)} .bewertungen::-webkit-scrollbar{display:none} .bewertung{flex:0 0 calc(100vw - 2 * var(--abstand-standard)); scroll-snap-align:start} .bewertungen__punkte{display:flex;margin-top:var(--abstand-weit)} /* Der Pflichthinweis ist ein Hinweis, keine Aussage: kleiner als der uebrige Kleintext und dicht an den Karten. 80px Abstand waren hier zu viel. */ .bewertungen__echtheit{margin-top:20px;margin-bottom:32px; font-size:0.8125rem;line-height:1.5} /* ----- Kontakt ----- Der Vorspann stand auf 1.4rem (22,4px) und lief fuenfzeilig ueber den halben Bildschirm. 1.125rem ist die Fliesstextgroesse — kleiner darf er nicht werden, sonst dreht sich die Rangordnung um. */ #kontakt .kopf .lead{font-size:1.125rem;line-height:1.6; margin-top:var(--abstand-nah)} /* 11.10.2026 (Anita am Handy): Im Kontakt-Vorspann stand "E-Mail." allein in der zweiten Zeile, weil der feste Umbruch vor "Ich freue mich auf Dich!" noch vom frueheren, laengeren Text stammt. Der Umbruch ist jetzt auch am Handy aus (Tablet und Rechner waren es schon), balance verteilt den Satz auf zwei gleich lange Zeilen. Steht HIER und nicht oben beim allgemeinen Vorspann: die Grundregel "#kontakt .kopf .lead{...text-wrap:initial}" weiter oben in der Datei kaeme sonst spaeter und wuerde balance wieder aufheben. */ #kontakt .kopf .lead br{display:none} #kontakt .kopf .lead{text-wrap:balance} /* FALLE: .kontakt ist ein Raster mit justify-items:center. Das Formular hat keine eigene Breite und wurde deshalb auf seine Inhaltsbreite geschrumpft — die Felder standen 46 statt 24px vom Rand. stretch zieht sie auf die volle Spaltenbreite. Die Visitenkarte darunter bleibt mittig, sie setzt das selbst. */ .kontakt{justify-items:stretch} /* Das Nachrichtenfeld ist auf dem Rechner 195px hoch. Auf dem Handy schiebt das den Knopf unter die Bildschirmkante — man tippt seine Nachricht und sieht nicht, wie es weitergeht. 150px sind immer noch rund fuenf Zeilen, und das Feld laesst sich ziehen. */ .kontakt__form textarea{min-height:150px} /* 8 statt 24px zwischen Feld und Knopf: beide gehoeren zusammen, und jeder Pixel entscheidet mit, ob der Knopf noch auf den Bildschirm passt. */ .kontakt__absenden{margin-top:8px} /* ----- Fusszeile ----- Auf dem Handy stehen die drei Rechtstexte im cremefarbenen Teil, im gelben Balken bleibt nur die Jahreszeile. So steht es im Figma-Mobilentwurf. Getrennte Flaechen lassen sich nicht per order tauschen, deshalb der Umweg: der Balken wird selbst cremefarben, seine beiden Kinder stehen in umgekehrter Reihenfolge (Links oben, Jahr unten), und die Jahreszeile bringt ihre gelbe Flaeche ueber die volle Breite selbst mit. Dafuer muss das Bahnpolster hier weg und an die Kinder wandern. */ .fusszeile__oben .bahn{gap:8px;padding-block:32px 24px} .fusszeile__logo{width:220px} .fusszeile__instagram{margin-top:8px;width:44px;height:44px} .fusszeile__balken{background:var(--farbe-hervorhebung)} .fusszeile__balken .bahn{display:flex;flex-direction:column-reverse; align-items:stretch;gap:0;padding-inline:0;padding-block:0; min-height:0} /* 36 statt 24px zwischen den drei Links, damit sie mit dem Finger sicher zu treffen sind. Mehr geht nicht: die drei messen zusammen 255px, bei 342px Bahn bleiben 87px fuer zwei Luecken. */ .fusszeile__balken nav{gap:36px; padding:0 var(--abstand-standard) 20px} /* 05.10.2026 (Hitboxen-Pruefung, Fable): 11px statt 8 ergibt 44px Hoehe fuer die drei Rechtslinks, der Richtwert fuer Tippflaechen. Vorher 38. Sie stehen hier untereinander im Cremeteil, die 18px mehr Hoehe fallen nicht auf. */ .fusszeile__balken a{padding-block:11px} .fusszeile__balken p{background:var(--farbe-signal); padding:12px var(--abstand-standard);text-align:center} } /* ========================================================= RECHTSSEITEN UND FEHLERSEITE Nachgetragen 13.09.2026. Steht bewusst am Ende der Datei, damit .rechtstext die globalen Ueberschriften ueberschreibt. ========================================================= */ /* ---------- Rahmen der Rechtsseiten ---------- Elementor setzt den Container dieser Seiten auf 1200px mit 100px Innenabstand RINGSUM (Tablet 60, Mobil 28). Der Text sitzt dadurch deutlich vom Rand ab, statt an der Bahnkante zu kleben. Genau so nachgebaut, deshalb eine eigene Klasse statt .abschnitt. */ .rechtsseite{padding-block:100px} .rechtsseite .bahn{padding-inline:100px} .rechtsseite--creme{background:var(--farbe-hervorhebung)} /* ---------- Rechtstexte (Impressum, AGB, Datenschutz) ---------- Groessen und Gewichte stammen aus dem Elementor-Build. EINE bewusste Abweichung: Elementor laesst den Text ueber die vollen 1000px des Innenbereichs laufen. Das sind je nach Schriftgroesse 110 bis 150 Zeichen pro Zeile, das Auge verliert beim Ruecksprung die Zeile. Hier 800px. Begrenzt wird dabei NUR der Fliesstext. Die Ueberschriften duerfen die vollen 1000px nutzen — derselbe Grundsatz wie auf der Startseite: Ueberschrift in wenigen Zeilen, eingeengt wird nur der Text darunter. Konkreter Anlass: "Dieses Impressum gilt auch fuer meine Social-Media-Kanaele" braucht rund 805px und brach sonst um. */ /* GEAENDERT 16.09.2026, zweiter Anlauf: der Deckel sass an den Absaetzen und liess rechts eine grosse Luecke stehen, waehrend Ueberschriften und Titel weiter ueber die volle Bahn liefen — es sah aus, als wuerde sich der Text nicht an die Fensterbreite anpassen. Jetzt haengt der Deckel am ganzen Textblock samt Titel, und der Block steht mittig in der Bahn. Damit ist der Abstand links und rechts gleich und nichts laeuft mehr aus der Reihe. */ .rechtstext p, .rechtstext ul{max-width:none} /* EINE Regel fuer alle drei Rechtstexte und alle Breiten, 16.09.2026. Vorher gab es feste Pixelwerte je Seite und je Geraet, und bei jeder Korrektur kippte es an einer anderen Stelle. Jetzt: alle drei Seiten haben dieselbe Schriftgroesse (16px) und denselben Deckel (720px). Das sind rund 80 Zeichen je Zeile. Bei 834 fuellt der Block die Bahn genau aus, darueber wachsen die Raender links und rechts gleichmaessig mit. Die Rechnung dahinter, damit sie nachvollziehbar bleibt: eine angenehme Zeile hat 65 bis 80 Zeichen. Bei 16px ist ein Zeichen im Schnitt 9px breit, 80 Zeichen brauchen also rund 720px. Wer die Spalte breiter will, muss die Schrift groesser machen — sonst werden die Zeilen laenger, nicht der Text lesbarer. */ .rechtstext, .rechtstext-titel{max-width:720px;margin-inline:auto} /* Ab 1025 darf der Text die Bahn ausnutzen (Anita, 16.09.2026): die Rechtstexte sind lang, und eine schmale Spalte macht die Seite unnoetig hoch. Den Abstand links und rechts gibt dann das Bahnpolster vor — 100px bei 1060, 220px bei 1440, weil die Bahn dort auf 1200 gedeckelt und mittig steht. Der Preis sind laengere Zeilen: 96 Zeichen bei 1060, 111 bei 1440. Das ist bewusst so entschieden, kuerzere Seite vor kuerzerer Zeile. */ @media (min-width:1025px){ .rechtstext, .rechtstext-titel{max-width:none} } /* Die Ueberschrift steht bewusst AUSSERHALB des 800px-Blocks und nutzt die volle Breite des Innenbereichs — derselbe Grundsatz wie bei H2 auf der Startseite: die Ueberschrift soll in wenigen Zeilen laufen, eingeengt wird nur der Fliesstext darunter. 4rem ist Elementors Wert fuer die Impressumsseite, Mobil 2.6rem. */ /* 3.4 statt 4rem, aus demselben Grund wie die Fliesstextgroesse. */ .rechtstext-titel{font-size:3.4rem;line-height:1.2;font-weight:400; letter-spacing:-.02em;margin-bottom:var(--abstand-weit)} /* Fangnetz fuer sehr schmale Geraete (320px): Die Ueberschriften der Rechtsseiten bestehen aus langen Komposita — "Geschäftsbedingungen", "Stornierungsbedingungen", "Verbraucherstreitbeilegung". Passt so ein Wort nicht in eine Zeile, schiebt es sonst die ganze Seite seitlich auf. break-word greift NUR in diesem Fall und trennt ohne Bindestrich; bei 360px und darueber aendert sich nichts. Getrennt wird auf dieser Website sonst nicht. */ .rechtstext-titel,.rechtstext h2,.rechtstext h3, .rechtstext p,.rechtstext li{overflow-wrap:break-word} /* Lora SemiBold in Schriftfarbe, NICHT in der Akzentfarbe wie sonst. Rechtstexte sollen leise sein. */ .rechtstext h2{font-family:var(--schriftart-serif);font-size:1.75rem; font-weight:600;line-height:1.38;color:var(--farbe-schrift); margin-top:var(--abstand-weit);margin-bottom:var(--abstand-eng)} /* Zwischenebene in Inter Bold, damit sie sich klar von der Lora-Ebene darueber absetzt. */ .rechtstext h3{font-family:var(--schriftart-sans);font-size:1.2rem; font-weight:700;line-height:1.6;color:var(--farbe-schrift); margin-top:var(--abstand-standard);margin-bottom:var(--abstand-eng)} /* Fliesstext in normaler Groesse. Im Elementor-Build hat das Impressum keine eigene Typografie und faellt damit auf die globale Textgroesse zurueck: Inter 1.125rem. */ /* 16 statt 18px (Anita, 16.09.2026): das Impressum wirkte neben AGB und Datenschutz (14.4px) viel zu wuchtig. Eine Stufe dazwischen — kleiner und ruhiger, aber nicht so fein wie die langen Rechtstexte. */ .rechtstext p, .rechtstext li{font-size:1rem; line-height:var(--fliesstext-hoehe); letter-spacing:var(--fliesstext-laufweite)} .rechtstext p{margin-bottom:var(--abstand-nah)} .rechtstext ul{list-style:disc;margin-bottom:var(--abstand-nah); padding-left:1.5rem} .rechtstext li{margin-bottom:var(--abstand-eng)} .rechtstext>*:last-child{margin-bottom:0} .rechtstext a{color:var(--farbe-schrift);text-decoration:underline; text-underline-offset:3px; /* In der Datenschutzerklaerung stehen ausgeschriebene Adressen, die laenger sind als ein Handybildschirm. Ohne diese Zeile schiebt eine einzige davon die ganze Seite auf 492px auf. Gefunden 14.09.2026. */ overflow-wrap:anywhere} .rechtstext a:hover{color:var(--farbe-akzent)} /* Lange Rechtstexte: AGB und Datenschutz. Dort setzt Elementor den Fliesstext ausdruecklich auf 0.9rem und die Ueberschrift auf 3rem — anders als im kurzen Impressum. Das ist bei der Textmenge auch richtig, sonst scrollt man ewig. */ .rechtstext--lang p, .rechtstext--lang li{letter-spacing:.02em} /* GEAENDERT 16.09.2026: die langen Texte standen auf 14.4px und damit als einzige kleiner als alles andere. Jetzt 16px wie das Impressum — eine Schriftgroesse fuer alle drei Rechtstexte, eine Spaltenbreite, keine Sonderfaelle mehr. Der Titel bleibt kleiner als beim Impressum, die Seiten sind lang genug. */ .rechtstext--lang p, .rechtstext--lang ul{max-width:none} .rechtstext-titel--lang{font-size:3rem;line-height:1.4; letter-spacing:normal} /* Zulassung nach § 11 TierSchG im Impressum. Der Block ist fertig gebaut und haengt am Schalter Zulassung § 11 (Klasse p11-mit, Regel ganz am Ende dieser Datei). Der fruehere Schalter data-zulassung ist am 04.10.2026 darin aufgegangen. */ /* Offene Punkte im Text. Faellt beim Durchlesen auf und wird vor dem Livegang ersetzt. Sucht sich leicht: Klasse .luecke. */ /* ERGAENZT 13.09.2026: Diese Regel galt bisher NUR innerhalb von .rechtstext. Ueberall sonst sah eine .luecke aus wie normaler Text — Platzhalter waren dort also unsichtbar und haetten beim Livegang leicht mit hochgehen koennen. Jetzt gilt sie allgemein. */ .luecke{background:var(--farbe-signal); border-left:4px solid var(--farbe-akzent); padding:var(--abstand-nah)} .rechtstext .luecke{margin-bottom:var(--abstand-nah)} /* ---------- Fehlerseite ---------- Ein Foto in der Doggery-Fotoform, Ueberschrift, zwei Zeilen Text, ein Knopf. Alles mittig, so wie im Elementor-Template 746. */ .fehler{text-align:center;padding-bottom:140px; background:var(--farbe-hervorhebung)} .fehler .bahn{display:grid;justify-items:center;gap:36px} /* Das Motiv ist hochformatig, die Fotoform fast quadratisch. Deshalb quadratisch zugeschnitten geliefert statt hier per object-fit beschnitten — sonst faellt dem Hund die Schnauze weg. */ .fehler__bild{width:360px;max-width:80%;height:auto; -webkit-mask-image:var(--shape-foto);mask-image:var(--shape-foto); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} /* Lora Bold, so steht es im Elementor-Template. Sonst ist H1 Inter. Groesse ebenfalls aus Elementor: 3rem statt der globalen 3.7rem, Zeilenhoehe 1.4. Tablet 2.5rem, Mobil 2rem, siehe unten. */ .fehler h1{font-family:var(--schriftart-serif);font-weight:700; font-size:3rem;line-height:1.4;letter-spacing:normal} .fehler p{margin:0} /* Pfote hinter der Ueberschrift. Groesse in em, damit sie auf Tablet und Mobil mit der kleineren Ueberschrift mitschrumpft. Die Farbe kommt ueber color, das Symbol traegt fill="currentColor". */ .fehler__pfote{display:inline-block;width:.72em;height:.72em; margin-left:.18em;color:var(--farbe-akzent); vertical-align:baseline} /* Der Knopf hat im Elementor-Build 18/70 — hoch wie ein Handlungsaufruf, breit wie ein weiterfuehrender Knopf. Einziger Knopf auf der Seite. */ .fehler .btn{padding:18px 70px} /* --------------------------------------------------------- SEITE "NACHRICHT ERHALTEN" (danke.html), 15.09.2026 Aufbau wie die Fehlerseite — mittig, Bild in der Fotoform, H1 in Lora — aber mit eigenen Klassen: die beiden Seiten sagen Verschiedenes und sollen sich getrennt aendern lassen. Der cremefarbene Grund ist derselbe. */ .danke{text-align:center;padding-bottom:140px; background:var(--farbe-hervorhebung)} .danke .bahn{display:grid;justify-items:center;gap:28px} .danke__bild{width:300px;max-width:70%;height:auto; -webkit-mask-image:var(--shape-foto);mask-image:var(--shape-foto); -webkit-mask-size:100% 100%;mask-size:100% 100%; -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat} .danke h1{font-family:var(--schriftart-serif);font-weight:700; font-size:3rem;line-height:1.4;letter-spacing:normal;max-width:20ch} .danke p{margin:0;max-width:34rem} .danke__pfote{display:inline-block;width:.72em;height:.72em; margin-left:.18em;color:var(--farbe-akzent); vertical-align:baseline} /* Der Spam-Hinweis ist Nebensache, nicht die Botschaft der Seite. Deshalb kleiner und leiser als der Satz darueber — aber nicht versteckt, er ist der Grund, warum eine Antwort scheinbar ausbleibt. Die Selektoren unten sind doppelt geschrieben (.danke .danke__spam), weil .danke p{margin:0} sonst genauer waere und jeden Abstand hier wieder totschlagen wuerde. */ .danke .danke__spam{font-size:var(--klein-groesse); line-height:var(--klein-hoehe);color:var(--farbe-akzent); margin-top:calc(-1 * var(--abstand-nah))} /* Die Ueberleitung gehoert zu den Knoepfen, nicht zum Text darueber. Groesser als der Fliesstext (1.25rem statt 1.125) und mit deutlich Luft zu den Knoepfen — Anitas Wunsch vom 15.09.2026. */ .danke .danke__weiter{margin-top:var(--abstand-nah);font-weight:700; font-size:1.25rem} /* Auf dem Rechner sind beide Knoepfe gleich breit. Dafuer ein Raster mit zwei 1fr-Spalten: in einem Container, der sich nach seinem Inhalt richtet, nehmen beide Spalten die Breite des groesseren Knopfes an — das rechnet der Browser selbst aus, es steht nirgends eine Zahl. 40px dazwischen; dicht nebeneinander lasen sich die beiden Flaechen wie ein Balken. */ .danke__aktionen{display:grid;grid-template-columns:repeat(2, 1fr); justify-content:center;gap:40px;margin-top:4px} .danke__aktionen .btn{padding-inline:36px} .danke .danke__zurueck{margin-top:var(--abstand-nah)} .danke__zurueck a{color:inherit;text-decoration:underline; text-underline-offset:3px} .danke__zurueck a:hover, .danke__zurueck a:focus-visible{color:var(--farbe-akzent)} @media (max-width:1024px){ .rechtsseite{padding-block:67px} .rechtsseite .bahn{padding-inline:60px} .rechtstext-titel{font-size:3rem} .rechtstext-titel--lang{font-size:2.6rem} .fehler h1{font-size:2.5rem} .danke h1{font-size:2.5rem} } @media (max-width:767px){ .rechtsseite{padding-block:34px 64px} .rechtsseite .bahn{padding-inline:28px} .rechtstext-titel{font-size:2.6rem} /* KORRIGIERT 15.09.2026: Der Seitentitel von AGB und Datenschutzerklaerung stand mobil auf 1.7rem (27,2px) in Inter 400 — und damit optisch UNTER der ersten Zwischenueberschrift, die in Lora SemiBold 24px laeuft. Auf dem Rechner faellt das nicht auf, da ist der Titel 3rem. Mehr als 1.8rem geht nicht: "Geschäftsbedingungen" misst dann 324px bei 334px Spalte, ab 1.9rem laeuft es seitlich aus der Seite heraus. (Getrennt wird nicht, das ist eine Grundsatzentscheidung.) Gemessen 15.09.2026 — wer den Wert erhoeht, muss beide Titel nachmessen: "Geschäftsbedingungen" und "Datenschutzerklärung". */ .rechtstext-titel--lang{font-size:1.8rem} /* 05.10.2026 (Anita): Zwischenueberschriften eine Stufe kleiner, 1.375rem statt 1.5. Bleibt unter dem Seitentitel (1.8rem). Was trotzdem nicht in die Zeile passt ("Verbraucherstreitbeilegung" liess nur das g umbrechen), verkleinert js/site.js je Ueberschrift so weit, bis das laengste Wort passt. */ .rechtstext h2{font-size:1.375rem} /* ENTSCHIEDEN 05.10.2026 (Anita, am Handy): Silbentrennung im Fliesstext der Rechtsseiten, nur unter 768px. Das hebt die Entscheidung vom 15.09. ("grundsaetzlich raus") fuer genau diese Stelle auf: bei 334px Spalte liess der Flattersatz der AGB rechts zu viel Platz. Getrennt werden nur lange Woerter (ab 12 Buchstaben, mindestens 5 davor und 4 danach), kurze bleiben ganz. Ueberschriften sind weiter ausgenommen. Braucht lang="de" am html. */ .rechtstext p, .rechtstext li{-webkit-hyphens:auto;hyphens:auto; -webkit-hyphenate-limit-before:5;-webkit-hyphenate-limit-after:4; hyphenate-limit-chars:12 5 4} /* ENTSCHIEDEN 15.09.2026 (Anita): Alle drei Rechtsseiten laufen auf dem Handy im Fliesstext auf 16px. Fuer AGB und Datenschutz ist das eine Vergroesserung (Elementor gibt dort 14,4px vor, bei rund 55 Zeichen je Zeile liest sich 16 deutlich ruhiger), fuer das Impressum eine Verkleinerung (es fiel auf die globalen 18px zurueck und wirkte dadurch aufgeblasen). Auf dem Rechner bleibt beides wie es war: dort ist die Spalte breit, und bei der Textmenge von AGB und Datenschutz waeren 16px erschlagend. */ .rechtstext p, .rechtstext li{font-size:1rem;line-height:1.6} .fehler h1{font-size:2rem} .fehler{padding-bottom:var(--abstand-abschnitt)} .fehler .btn{padding:18px 30px} /* Danke-Seite auf dem Handy: gleiche Stufen wie die Fehlerseite. Die zwei Knoepfe stehen untereinander und nutzen die volle Bahn — nebeneinander waeren sie bei 342px je 163px breit, und "Kennenlerngespraech buchen" braucht mehr. */ .danke h1{font-size:2rem} /* Weniger Luft ueber dem Bild als der Abschnittsstandard: die Seite hat nur wenig Inhalt, und der soll gleich zu sehen sein, ohne zu scrollen. Anitas Wunsch vom 15.09.2026. */ .danke{padding-top:16px;padding-bottom:var(--abstand-abschnitt)} .danke .bahn{gap:20px} /* Das Bild ist auf dem Handy 200px statt 239 (70 Prozent der Bahn). Grund: "Zurueck zur Startseite" soll ohne Scrollen zu sehen sein. Anitas Wunsch vom 15.09.2026. */ .danke__bild{width:200px;max-width:60%} /* Die Ueberleitung: mehr Luft darueber, dichter an den Knoepfen — und 18px statt 20, weil sie nur so in eine Zeile passt. Nachgemessen: bei 18px misst der Satz 327px, bei 19px schon 344 und damit mehr als die 342px Bahnbreite. Wer den Text aendert, muss nachmessen. */ .danke .danke__weiter{margin-top:24px;font-size:1.125rem} /* Auf dem Handy stehen die beiden Knoepfe NEBENEINANDER (Anita, 15.09.2026 — untereinander gefiel ihr nicht). Moeglich nur mit der kurzen Beschriftung "Gespraech buchen" und einem Instagram-Knopf, der auf die Zeichenflaeche zusammenschrumpft. 62px ist die Hoehe des dunklen Knopfes; der quadratische steht damit genau so hoch. Die Beschriftung ist ausgeblendet, nicht entfernt — der Link behaelt sie ueber aria-label. */ .danke__aktionen{display:flex;flex-wrap:nowrap;justify-content:center; align-items:center;gap:24px;margin-top:0} /* Der dunkle Knopf nimmt, was nach dem quadratischen und der Luecke uebrig bleibt: 342 - 62 - 24 = 256, davon 240 genutzt. */ .danke__aktionen .btn{padding-inline:28px} .danke__aktionen .btn--dunkel{min-width:240px} .danke__insta-text{display:none} /* Doppelt geschrieben, sonst schlaegt .danke__aktionen .btn oben das padding:0 und im 62px-Knopf bleiben nur 6px fuer das Zeichen. */ .danke__aktionen .danke__insta{width:62px;height:62px;padding:0; flex:0 0 auto} /* Ohne Beschriftung wirkt das 22px-Zeichen in der 62px-Flaeche verloren. 28px ist dieselbe Groesse wie im Fusszeilen-Knopf. */ .danke__insta .btn__zeichen{width:28px;height:28px} } /* ========================================================= KONTAKTSEITE Werte aus dem Elementor-Build (Seite 37), Sichtpruefung 13.09.2026. ========================================================= */ /* Das Skyline-Band oben. Gleiche Hoehe wie die Baender der Startseite, nur ohne Siegel. Tablet 200, Mobil 150 — Werte aus Elementor. */ .band--kontakt img{height:400px;object-position:center center} /* Kopf: 67px unter dem Band, 27px zwischen Ueberschrift und Vorspann. */ .kontaktseite__kopf{padding-top:67px} /* Der Vorspann darf die volle Breite nutzen. Auf 46rem begrenzt brach er in zwei kurze Zeilen um und wirkte gequetscht. */ .kontaktseite__kopf .lead{margin-top:27px;font-size:1.3rem;max-width:none; text-wrap:initial} /* H1 in der Akzentfarbe, wie die Abschnittsueberschriften der Startseite. Lora Bold, nicht das globale Inter — Groesse aus dem Elementor-Build. */ .kontaktseite__titel{font-family:var(--schriftart-serif);font-weight:700; font-size:3.3rem;line-height:1.4;letter-spacing:normal; color:var(--farbe-akzent)} /* ---------- Infos ---------- Zwei Spalten, 47px unter dem Kopf, 30px Innenabstand ringsum. Beide Spalten sind gleich hoch (Raster-Standard), und in beiden wird die Knopfzeile per margin-top:auto nach unten geschoben. Dadurch stehen die zwei Knoepfe immer auf einer Linie, egal wie lang die Texte werden — kein nachgemessener Zahlenwert noetig. */ /* 80 statt 47: mehr Luft zwischen dem Vorspann und dem Personenblock (Anita, 16.09.2026). */ .kontaktseite__infos{padding-top:80px} /* NEU ANGEORDNET 16.09.2026. Vorher zwei Spalten: links Titel, Foto und Anschrift, rechts die Karte. Anitas Anordnung jetzt untereinander und mittig, auf allen Breiten gleich: Foto | Anschrift und E-Mail (als Gruppe mittig) Kennenlern-Knopf (mittig) Ueberschrift (mittig) Karte (mittig, hoechstens 520px) Instagram-Knopf | Maps-Knopf (nebeneinander) Eine Anordnung fuer alle Geraete statt drei verschiedene — die Kontaktseite hat wenig Inhalt, da bringt ein Spaltenlayout nichts ausser Sonderregeln. */ .infos{display:flex;flex-direction:column;align-items:center; gap:var(--abstand-standard);text-align:center} .infos__person{display:grid;grid-template-columns:auto auto; gap:32px;align-items:start;text-align:left} .infos__portraet{width:140px;height:auto;aspect-ratio:1;object-fit:cover; border-radius:50%;background:var(--farbe-signal)} .infos__daten>*{margin:0} .infos__adresse{line-height:1.6} /* Eine Leerzeile zwischen Anschrift und E-Mail (Anitas Wunsch). */ .infos__email{margin-top:1.6em !important} /* 32px unter dem Personenblock, damit sich der dunkle Knopf davon loest (Anita, 16.09.2026). */ .infos__aktion{margin:32px 0 0} /* Dunkel, nicht in der Akzentfarbe: die globale h2-Regel faerbt Ueberschriften orange, hier sollen sie ruhig bleiben. Die Klasse traegt auch "Hinterlasse mir eine Nachricht" im Formularabschnitt, deshalb haengt der Abstand nach oben am Infoblock und nicht an der Klasse selbst. */ .infos__titel{font-family:var(--schriftart-serif);font-size:1.9rem; line-height:1.3;font-weight:600;color:var(--farbe-schrift);margin:0} /* 72 statt 32: die Kartenueberschrift faengt einen neuen Gedanken an, sie braucht mehr Luft als der Knopf darueber. */ .infos>.infos__titel{margin-top:72px} .infos__karte{display:flex;flex-direction:column;align-items:center;gap:6px; width:100%} .infos__karte-bild{width:100%;max-width:600px;height:auto} .infos__quelle{margin:0;width:100%;max-width:600px;text-align:right; font-size:.8125rem;color:var(--farbe-schrift-leise)} /* Links der Maps-Knopf, rechts das Instagram-Zeichen mit Text daneben. align-items:center bringt beide auf eine Mittellinie, obwohl der Knopf hoeher ist als die Zeile. */ .infos__karte-aktion{display:flex;flex-wrap:wrap;justify-content:center; align-items:center;gap:32px;margin:var(--abstand-standard) 0 0} .infos__karte-aktion .btn{padding-inline:28px} .infos__instagram{display:inline-flex;align-items:center;gap:15px} .infos__instagram .fusszeile__instagram{margin-top:0;flex:0 0 auto} .infos__instagram a[aria-label]{text-decoration:none} /* 05.10.2026 (Anita, am Handy): Die Instagram-Zeile gehoert auf dem Handy zum Personenblock, nicht unter den Maps-Knopf. Weil sie am Rechner rechts neben dem Maps-Knopf unter der Karte steht, gibt es sie im HTML zweimal: einmal im Personenblock (--oben, nur unter 768 sichtbar) und einmal unter der Karte (ab 768). So stimmt die Lesereihenfolge auf beiden Geraeten mit dem Bild ueberein. */ .infos__instagram--oben{display:none;margin:0} /* Die E-Mail-Adresse ist ein Link, soll aber nicht blau und unterstrichen sein wie ein Fliesstextlink. War vorher an .infos__spalte geknuepft — die Klasse gibt es seit dem Umbau nicht mehr. */ .infos a:not(.btn){color:var(--farbe-schrift);text-decoration:none} .infos a:not(.btn):hover, .infos a:not(.btn):focus-visible{color:var(--farbe-akzent)} /* Auf dem Rechner bleibt es beim urspruenglichen Aufbau: links Titel, Foto mit Anschrift und der Kennenlern-Knopf, rechts die Karte ueber die volle Hoehe. Die neue Anordnung untereinander gilt nur bis 1024, wo zwei Spalten zu eng werden. Anitas Korrektur vom 16.09.2026. Der Instagram-Hinweis steht seit dem Umbau unter der Karte statt in der linken Spalte — das ist der einzige Unterschied zu frueher. */ @media (min-width:1025px){ .infos{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--abstand-block);align-items:start;text-align:left} .infos__titel{grid-column:1;grid-row:1} .infos>.infos__titel{margin-top:0} .infos__person{grid-column:1;grid-row:2;justify-content:start; margin-top:var(--abstand-weit)} .infos>.infos__aktion{grid-column:1;grid-row:3} .infos__karte{grid-column:2;grid-row:1 / span 3;align-items:stretch} .infos__karte-bild,.infos__quelle{max-width:none} .infos__karte-aktion{justify-content:flex-start} } /* Links mitten im Fliesstext — Datenschutzhinweis und die Adresse in der Fehlermeldung. Ebenfalls in Schriftfarbe, aber DAUERHAFT unterstrichen: im laufenden Satz braucht ein Link ein Signal, und ohne Farbe bleibt nur die Unterstreichung. Orange erst beim Ueberfahren. */ .nachricht__datenschutz a, .meldung a:not(.btn){color:var(--farbe-schrift);text-decoration:underline; text-underline-offset:3px} .nachricht__datenschutz a:hover, .nachricht__datenschutz a:focus-visible, .meldung a:not(.btn):hover, .meldung a:not(.btn):focus-visible{color:var(--farbe-akzent)} /* ---------- Nachricht ---------- 90px unter den Infos. Formular ueber die volle Inhaltsbreite: auf 760px begrenzt stand es verloren neben dem breiten Rest der Seite. */ .kontaktseite__nachricht{padding-top:90px; padding-bottom:var(--abstand-maximal)} .kontaktseite__nachricht .kopf{text-align:left} .nachricht__vorspann{margin-top:var(--abstand-eng)} .nachricht__form{margin-top:var(--abstand-weit)} /* Zwei Felder nebeneinander, wie in Elementor (je 50% Breite). */ .nachricht__reihe{display:grid;grid-template-columns:1fr 1fr;gap:15px} /* Steht direkt am Nachrichtenfeld, dicht darunter. */ /* Lesebreite, 16.09.2026: lief ueber die volle Formularbreite, bei 1440 sind das 1200px und 103 Zeichen je Zeile. */ .nachricht__datenschutz{margin-top:var(--abstand-minimal);max-width:44rem} .nachricht__senden-zeile{margin-top:var(--abstand-standard)} /* Honigtopf: fuer Menschen unsichtbar, fuer Bots ein normales Feld. Nicht display:none — manche Bots erkennen das und lassen es aus. */ .honigtopf{position:absolute;left:-9999px;width:1px;height:1px; overflow:hidden} /* Meldungen nach dem Absenden. Erfolg in Signalgelb wie die uebrigen Hinweise, Fehler in der Fehlerfarbe. */ /* GEAENDERT 16.09.2026 (Anita): kompakter. Der Text lief in der Fliesstextgroesse von 18px ueber zwei Zeilen und der Kasten war 90px hoch — fuer eine Fehlermeldung zu viel Gewicht. Jetzt 15px, weniger Innenabstand und weniger Abstand nach oben, damit er dicht am Datenschutzhinweis darueber steht. Gilt auf allen Seiten, die Meldung ist ueberall dieselbe. */ /* Text mittig (Anita, 16.09.2026): die Meldung steht ueber die volle Formularbreite, linksbuendig sah sie darin verloren aus. */ .meldung{margin-top:12px;padding:12px var(--abstand-nah); border-radius:var(--rundung-meldung); font-size:0.9375rem;line-height:1.5;text-align:center; border-left:4px solid var(--farbe-akzent); background:var(--farbe-signal)} /* GEAENDERT 15.09.2026 (Anita): Die Fehlermeldung war ein fast weisser Kasten auf weissem Grund, nur die Kante links war farbig — man sah sie praktisch nicht. Jetzt die ganze Flaeche im Fehlerorange mit weisser Schrift, damit sie auffaellt. Der Erfolg bleibt gelb: die zwei Zustaende sollen sich unterscheiden. NACHGEZOGEN 15.09.2026: Der Grund ist #C1562A statt --farbe-fehler (#D76737). Weiss auf dem helleren Ton hatte 3,57:1 Kontrast, die Norm verlangt bei 18px regulaerer Schrift 4,5:1. #C1562A liegt bei 4,53:1 und sieht praktisch gleich aus. Wer die Farbe aendert, muss den Kontrast gegen Weiss nachrechnen. */ .meldung--fehler{background:#c1562a;border-left-color:#a8481f; color:#fff} .meldung--fehler a:not(.btn){color:#fff} .meldung--fehler a:not(.btn):hover, .meldung--fehler a:not(.btn):focus-visible{color:#fff; text-decoration-thickness:2px} /* ENTFERNT 15.09.2026: .meldung__pfote. Die Regel gehoerte zur Inline-Dankesmeldung auf der Kontaktseite; der Erfolgsfall laeuft jetzt ueber danke.html. Die Pfote hinter der Ueberschrift dort ist .danke__pfote, die auf der Fehlerseite .fehler__pfote. */ @media (max-width:1024px){ .band--kontakt img{height:200px} .kontaktseite__titel{font-size:2.8rem} /* Einspaltig gibt es keine gemeinsame Linie mehr, dann darf der Knopf dicht an seinem Block bleiben. */ .infos__aktion{margin-top:0} .kontaktseite__nachricht{padding-bottom:var(--abstand-abschnitt)} } @media (max-width:767px){ .band--kontakt img{height:150px} .kontaktseite__titel{font-size:2.4rem;line-height:1.2} .infos__titel{font-size:1.7rem} /* KORRIGIERT 14.09.2026: Der Innenabstand des Infoblocks (Desktop 30, mobil 15) kam zur Bahn obendrauf. Ueberschrift, Portraet und Adresse begannen dadurch 39px vom Rand, die Formularfelder darunter aber bei 24 — zwei Kanten auf derselben Seite. Auf dem Handy gibt es den Zusatz nicht mehr. */ .infos{padding:0} .infos__instagram--oben{display:inline-flex} .infos__karte-aktion .infos__instagram{display:none} /* Der Knopf loest sich etwas von der Instagram-Zeile darueber: 20px Raster plus 12 macht 32. */ .infos__aktion{margin-top:12px} .kontaktseite__kopf{padding-top:40px} /* Luft vor "Hinterlasse mir eine Nachricht". Die Abstaende der Seite sind gestaffelt: 32 zwischen Zeile und Knopf, 72 vor der Kartenueberschrift, 96 beim Abschnittswechsel. Vorher waren es 124 — das war Anita zu weit. Der Wert ist hier die ganze Luecke: der Infoblock hat unten kein Polster. */ .kontaktseite__nachricht{padding-top:96px} /* Luft unter dem Absendeknopf, bevor die Fusszeile anfaengt — derselbe Wert wie unter dem letzten Knopf der Betreuungsseiten. */ .kontaktseite__nachricht{padding-bottom:96px} /* Der Datenschutzhinweis am Nachrichtenfeld ist ein Hinweis, keine Aussage: 13px wie der Echtheitshinweis bei den Bewertungen, das Kleinste, was auf der Seite vorkommt. .klein waeren 14,4px. */ .nachricht__datenschutz{font-size:0.8125rem;line-height:1.5} .nachricht__reihe{grid-template-columns:1fr} } /* ========================================================= SEITE "DAS ERWARTET DEINEN HUND" (ueber-doggery.html) Werte aus dem Elementor-Build (Seite 35), 13.09.2026. ========================================================= */ /* Kopf: 76px unter dem Band, 27px zwischen Ueberschrift und Vorspann. */ .werte-kopf{padding-top:76px} .werte-kopf .lead{margin-top:27px;font-size:1.3rem;max-width:none; text-wrap:initial} /* H1 Lora Bold 3.7rem, Akzentfarbe wie auf der Kontaktseite. */ .werte-titel{font-family:var(--schriftart-serif);font-weight:700; font-size:3.7rem;line-height:1.3;letter-spacing:normal; color:var(--farbe-akzent)} /* ---------- Werdegang und Werte ---------- Zwei Spalten, 100px Abstand, 105px unter dem Kopf. Die Knopfzeilen werden per space-between nach unten geschoben, damit beide Knoepfe auf einer Linie sitzen. Kein margin-top:auto — das schluckt den freien Platz und space-between haette dann nichts mehr zu verteilen. */ .werte-block{padding-top:105px} .werte-raster{display:grid;grid-template-columns:1fr 1fr;gap:100px} .werte-spalte{display:flex;flex-direction:column; justify-content:space-between;gap:var(--abstand-standard)} .werte-spalte>*{margin:0} /* Lora SemiBold 2.6rem, in Schriftfarbe. Elementor-Werte. */ .werte-h2{font-family:var(--schriftart-serif);font-size:2.6rem; font-weight:600;line-height:1.38;color:var(--farbe-schrift)} /* "Mein Werdegang" und "Meine Werte" stehen in der Akzentfarbe, Wunsch vom 13.09.2026. "Eindruecke aus der Betreuung" weiter unten bleibt bewusst dunkel: die zwei Spalten bilden zusammen einen Abschnitt, die Galerie darunter ist ein eigener. */ .werte-h2--akzent{color:var(--farbe-akzent)} /* Ueberschrift und der Text darunter gehoeren zusammen und stecken deshalb in einer Gruppe. Ohne sie verteilt space-between den freien Platz gleichmaessig auf ALLE Zwischenraeume der Spalte — dann rutscht der Text weit unter seine Ueberschrift. 12px, bewusst enger als der Normalfall von 24px. */ .werte-gruppe{display:grid;gap:12px} .werte-text p{margin:0 0 var(--abstand-nah)} .werte-text p:last-child{margin-bottom:0} .werte-signatur{font-family:var(--schriftart-serif);font-style:italic} .werte-aktion{margin:0;align-self:center} /* Der Knopf ist hier 18/60, nicht 18/52 wie im Hero. Elementor-Wert. */ .werte-btn-hoch{padding:18px 60px} /* Portraet in der Doggery-Fotoform, volle Spaltenbreite. */ .werte-foto{width:100%;height:auto;aspect-ratio:1;object-fit:cover; -webkit-mask:var(--shape-foto) center/contain no-repeat; mask:var(--shape-foto) center/contain no-repeat} /* Jeder Wert ist ein Block aus fetter Zeile und Erklaerung. Damit man auf einen Blick sieht, was zusammengehoert, ist der Abstand ZWISCHEN den Bloecken groesser als der INNERHALB. Elementor hatte hier ueberall dieselben 11px — dadurch verschwamm die Gliederung. Zwei Spalten statt Flex: das Zeichen steht in einer eigenen Spalte, die zweite Zeile laeuft daneben weiter und nicht darunter. */ .werte-liste{gap:26px} /* ENGER 15.09.2026 (Anita): 18px zwischen Haken und Text waren zu weit, der Text wirkte losgeloest vom Zeichen. Und der erklaerende Satz sass 3px unter seiner fetten Zeile — jetzt 1px, er gehoert dicht dran. Gilt auch auf Desktop. */ .werte-liste li{display:grid;grid-template-columns:auto 1fr; column-gap:12px;align-items:start} .werte-liste li strong{display:block;margin-bottom:1px} /* Das Zeichen sitzt auf der Grundlinie der ersten Zeile, nicht an der Oberkante des Textkastens. */ .werte-liste .icon{margin-top:.18em} /* Abschluss der rechten Spalte: Frage und Knopf. justify-items zentriert waagerecht — align-self haette hier nur senkrecht gewirkt, deshalb sass der Knopf vorher links. Der Abstand nach oben trennt den Abschluss von der Werteliste. */ .werte-abschluss{display:grid;justify-items:center; gap:var(--abstand-standard);margin-top:var(--abstand-standard)} .werte-frage{margin:0;text-align:center;font-size:1.2rem; text-wrap:balance} /* Beide Knoepfe der zwei Spalten gleich hoch. Der dunkle ist von Haus aus 62px, der weiterfuehrende 54px — nebeneinander sah das schief aus. */ .werte-spalte .btn{min-height:62px;justify-content:center} /* ---------- Fortbildungen ---------- Cremeband, 112px darunter, 70px Innenabstand. Die vier Eintraege stehen nebeneinander und brechen um, wenn es eng wird. */ /* 160px statt 112px: das Cremeband braucht mehr Luft nach oben, sonst klebt es an den Knoepfen der zwei Spalten. Wunsch vom 13.09.2026. */ .fortbildungen{margin-top:160px;padding-block:70px; background:var(--farbe-hervorhebung)} .fortbildungen__titel{font-family:var(--schriftart-serif);font-size:2rem; font-weight:600;line-height:1.38;color:var(--farbe-akzent); text-align:center} /* Raster statt Flex, geaendert 13.09.2026: die vier Kurse sollen auf dem Rechner nebeneinander in EINER Reihe stehen. Mit Flex und Umbruch landete der vierte allein in der zweiten Zeile, weil vier Spalten zu je 260px nicht in die 1000px breite Bahn passen. Feste Spaltenzahl loest das: die Spalten teilen sich die Breite, statt eine feste zu fordern. Ab Tablet zwei Spalten (zwei oben, zwei darunter), auf dem Handy eine. */ /* GEAENDERT 05.10.2026: drei Spalten statt vier. Die Liste hat jetzt neun Eintraege mit laengeren Texten (Titel plus Namen der Dozenten), das ergibt drei saubere Reihen. 44px zwischen den Reihen (vorher 24): die Eintraege sind zwei oder drei Zeilen lang und liefen sonst zu einem Textblock zusammen (Anita, 05.10.2026). Tablet und Handy: Wischband, siehe ganz unten in dieser Datei. */ .fortbildungen__liste{display:grid;grid-template-columns:repeat(3,1fr); gap:44px 36px;list-style:none;padding:0; margin:var(--abstand-weit) 0 0} .fortbildungen__mehr{margin:var(--abstand-weit) 0 0;text-align:center; font-size:1rem;line-height:1.6;color:var(--farbe-schrift-leise)} .fortbildungen__liste li{display:grid;grid-template-columns:auto 1fr; column-gap:10px;align-items:start; font-size:1rem;line-height:1.6;letter-spacing:.02em} /* Die Pfote ist gefuellt, kein Strich — sonst zeichnet der Untergrundton aus .icon eine helle Kante hinein. */ .fortbildungen__liste .icon{stroke:none;color:var(--farbe-schrift)} .fortbildungen__liste .luecke{padding:6px 10px} /* ---------- Eindruecke ---------- */ .eindruecke{padding-top:133px;padding-bottom:var(--abstand-maximal)} /* Bildwand: drei Spalten mal vier Reihen, alle Felder quadratisch. GEAENDERT 13.09.2026 — vorher Mauerwerk aus CSS-Spalten mit unterschiedlich hohen Bildern. Ein echtes Raster ist hier richtig, weil alle Felder gleich gross sein sollen: die Reihen liegen dadurch auf einer Linie, und die Reihenfolge im Quelltext ist auch die auf dem Bildschirm (CSS-Spalten fuellen sich spaltenweise, das war die Falle in der ersten Fassung). Das Seitenverhaeltnis steht am Knopf, nicht am Bild: so behaelt das Feld seine Hoehe, auch bevor das Bild geladen ist — die Seite springt beim Laden nicht. */ .bildwand{display:grid;grid-template-columns:repeat(3,1fr);gap:18px; list-style:none;padding:0;margin:40px 0 0} /* Die Punkteleiste gehoert zum Wischband auf dem Handy. Auf dem Rechner steht die Bildwand als Raster, dort ist sie ueberfluessig. */ .bildwand__punkte{display:none} .bildwand__feld{display:block;width:100%;aspect-ratio:1; padding:0;border:0;background:none;cursor:zoom-in;overflow:hidden} /* Keine Rundung — die Galerie der Startseite hat auch keine, und im Elementor-Build ist keine gesetzt. */ .bildwand__feld img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .25s ease} /* Sanftes Heranfahren beim Ueberfahren. Zeigt, dass das Feld anklickbar ist, ohne eine Beschriftung oder ein Symbol ins Bild zu legen. */ .bildwand__feld:hover img, .bildwand__feld:focus-visible img{transform:scale(1.04)} @media (prefers-reduced-motion:reduce){ .bildwand__feld img{transition:none} .bildwand__feld:hover img, .bildwand__feld:focus-visible img{transform:none} } /* Grossansicht.