/* ===================================================================== * STARTSEITE — Sektionen der neuen Startseite (additiv) * * Laedt ausschliesslich auf der Startseite (siehe tpw_start_styles() in * mu-plugins/tierpark-startseite.php). Optik-Referenz: * design-mocks/rahmen-final.html — dort NUR die Sektionen; Kopf- und Fusszeile * des Mocks sind ueberholt, die echten stehen in css/rahmen.css. * Verbindlich: design-mocks/DESIGN-RAHMEN.md. * * GRUNDSAETZE DIESER DATEI * · Rein additiv. Es wird keine Regel aus style.css, rahmen.css oder * tiere.css ueberschrieben; alle Selektoren tragen `tpw-start-` oder haengen * an `body.tpw-startseite`. * · Farben, Radien, Linien, Schatten kommen AUSSCHLIESSLICH aus den * :root-Tokens in style.css (Abschnitt 1). Keine neuen Farbwerte. * · Buttons und die Headline-Signatur nutzen das Design-Fundament * (style.css Abschnitt 14): `.link-button` / `.wp-block-button__link` * bzw. `.tpw-eyebrow`. Hier steht nur die Anordnung. * · Icons als CSS-Masken (keine Inline-SVG im Seiteninhalt, siehe Kopf von * mu-plugins/tierpark-startseite.php). Die Pfaddaten sind identisch mit * tpw_icon_pfade() in mu-plugins/tierpark-icons.php bzw. mit den Motiven aus * rahmen-final.html — es bleibt EINE geometrische Familie (Rahmen 10). * * ZWEI GUTENBERG-EIGENHEITEN (wie in style.css Abschnitt 15 beschrieben) * 1) Ohne theme.json schiebt WordPress in JEDE Gruppe wieder ein *
. Dieser rein technische * Wrapper wird per `display:contents` aus dem Layout genommen; deshalb * stehen unten ueberall NACHFAHREN-Selektoren statt ">". * 2) Core setzt Flow-Abstaende auf Nicht-Erst-Kinder. Die Resets unten tragen * mindestens zwei Klassen und gewinnen darum ohne !important. * * Inhalt: * 1. Seiten-Grundlage (Titel aus, Spaltenabstand, Full-Bleed-Helfer) * 2. Sektionsrahmen, Kopf, „Mehr"-Kante * 3. Icon-Masken * 4. Hero (3-Bild-Crossfade) * 5. Aktuell-Band (dunkle Ruheflaeche) * 6. Besuchsband * 7. Tiere kennenlernen (runde Portraits) * 8. Der Gnadenhof (Bild/Text-Paar) * 9. Termine * 10. Shop-Teaser * 11. Unterstuetzen * 12. Responsive * 13. prefers-reduced-motion * ===================================================================== */ /* ===================================================================== * 1. SEITEN-GRUNDLAGE * ===================================================================== */ /* Der automatische Seitentitel entfaellt: die Startseite traegt ihre Ueberschrift (h1) im Hero. */ body.tpw-startseite .entry-header { display: none; } /* Poseidon setzt oben am Inhalt Luft; der Hero bringt seine eigene mit. */ body.tpw-startseite #content { padding-top: 0; } /* ... und UNTEN dasselbe Spiel — das ist die symmetrische Haelfte der Regel * darueber (User-Meldung 2026-08-06: weisser Streifen zwischen letzter Sektion * und Fusszeile). * * URSACHE, nachgemessen: poseidon/style.css Zeile 1163 ff. gibt JEDEM Artikel * `margin: 0 0 3em 0` — * .type-post, .type-page, .type-attachment { margin: 0 0 3em 0 } * Die Startseite ist eine `page`, ihr
traegt also 48px Aussenabstand * unten. Diese 48px KOENNEN NICHT wegkollabieren: `#page` ist * `display:flex; flex-direction:column`, damit ist `#content` ein Flex-Kind und * als solches ein eigener Block-Formatierungskontext. Der Abstand wird darum als * 48px weisse `#content`-Flaeche sichtbar — genau zwischen dem letzten, * getoenten Full-Bleed-Block und der dunklen Fusszeile. * * Im Browser gegengeprueft: Luecke = Fusszeilen-Oberkante minus Unterkante des * letzten Blocks = exakt 48,0px, bei 1280x800 und 390x844 identisch (also nicht * breitenabhaengig). Zwei Kontrollversuche am DOM: die leere * `#comments`-Huelle ausblenden aendert NICHTS an der Luecke (sie ist 0px hoch * und war ein Verdacht, der sich nicht hielt), den Artikel-Abstand auf 0 setzen * schliesst sie vollstaendig. Es ist also diese eine Ursache, nicht mehrere. * * Auf `body.tpw-startseite` begrenzt: auf allen anderen Seiten ist der Abstand * richtig — dort endet der Inhalt mit Fliesstext und nicht mit einer Farbflaeche, * die die Fusszeile beruehren soll. Die Sektion behaelt ihr eigenes * `padding-bottom`, der Rhythmus aendert sich also nicht; es verschwindet nur * der weisse Streifen. */ body.tpw-startseite .type-page { margin-bottom: 0; } /* Der Grundtext der Startseite ist etwas groesser als der Default (0.97rem) — die Seite ist ein Schaufenster, kein Fliesstext. */ body.tpw-startseite .entry-content { font-size: 1rem; } /* Alle technischen Gruppen-Wrapper der Startseite aus dem Layout nehmen (siehe Eigenheit 1 im Dateikopf). */ body.tpw-startseite .entry-content .wp-block-group__inner-container { display: contents; } /* --------------------------------------------------------------------- * Full-Bleed-Helfer — identische Technik wie `.tier-bleed` in css/tiere.css: * beide calc() beziehen sich auf die Breite des Containing Blocks, Rand und * Innenabstand heben sich also immer genau auf. * * ACHTUNG bei Erweiterungen: an Elementen mit dieser Klasse NIE die * Kurzformen `margin` oder `padding` verwenden — sie wuerden margin-inline * bzw. padding-inline ueberschreiben. Immer margin-block / padding-block. * --------------------------------------------------------------------- */ .tpw-start-bleed { margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); } /* ===================================================================== * 2. SEKTIONSRAHMEN, KOPF, „MEHR"-KANTE * ===================================================================== */ .tpw-start-blk { padding-block: clamp(48px, 7vw, 96px); } /* Flaechenwechsel (Rahmen 1): Weiss / #eff7e8 / zarter Gruenhauch #f6fbf1. Kein Beige, kein Grau. */ .tpw-start-blk--flaeche { background-color: var(--tpw-surface); } .tpw-start-blk--zart { background-color: var(--tpw-surface-2); } /* --------------------------------------------------------------------- * Sektionskopf: Eyebrow (globale .tpw-eyebrow) + h2 + Lead. * * Die Abstaende werden erst auf Null gesetzt und dann gezielt wieder * vergeben. Wichtig: KEINE Kindselektoren (">") — der technische * Gruppen-Wrapper steht dazwischen (siehe Eigenheit 1 im Dateikopf). * Die Reset-Regel steht ZUERST; die drei Folgeregeln haben dieselbe * Spezifitaet und gewinnen darum durch ihre spaetere Position. * --------------------------------------------------------------------- */ .tpw-start-kopf { max-width: 46rem; margin-block: 0 clamp(26px, 3.6vw, 44px); } .tpw-start-blk .tpw-start-kopf p, .tpw-start-blk .tpw-start-kopf h2 { margin-block: 0; } .tpw-start-blk .tpw-start-kopf h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; } .tpw-start-blk .tpw-start-kopf .tpw-eyebrow { margin-block-end: 16px; } .tpw-start-blk .tpw-start-kopf .tpw-start-lead { margin-block-start: 15px; max-width: 60ch; font-size: 1.06rem; line-height: 1.65; color: var(--tpw-ink-soft); } /* --------------------------------------------------------------------- * GUTENBERG-BUTTONS: NUR NOCH DIE STARTSEITEN-GROESSE (Rahmen 7) * * FRUEHER stand hier zusaetzlich die Farbkorrektur der gefuellten * Block-Buttons (Fuellung #557000, Hover #3f5300): Poseidons * .wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background) * traegt vier Klassen und schlug den Abschnitt 14.2 in style.css * (`.wp-block-button__link`, eine Klasse), weshalb gefuellte Block-Buttons auf * dem Hauptgruen #719130 landeten. Das ist seit 2026-08-04 an der WURZEL * geloest — style.css Abschnitt 14.2 kontert die Parent-Spezifitaet jetzt * websiteweit (Klassenkette + qualifiziertes Link-Element, kein !important). * Die Farb-/Hover-Deklarationen hier waren damit redundant und sind entfernt. * * ES BLEIBT die Groesse: die Startseite arbeitet durchgehend mit 13/24 * (vgl. `.tpw-start-btn-hell` und die Outline-Regel unten) statt der globalen * 12/22 aus dem Fundament. Alles andere (Radius, Schriftgrad, Gewicht, Farben) * kommt aus style.css. * --------------------------------------------------------------------- */ body.tpw-startseite .entry-content .wp-block-button:not(.is-style-outline) > .wp-block-button__link { padding: 13px 24px; } /* Outline-Variante: Poseidon setzt hier ein eigenes, engeres Padding (calc(0.5em - 2px)) und `color:inherit`. Beides auf die Rahmen-Werte ziehen — gleiche Groesse wie der gefuellte Button, Text #557000. */ body.tpw-startseite .entry-content .wp-block-button.is-style-outline .wp-block-button__link { padding: 13px 24px; border: 1.5px solid var(--tpw-gruen); border-radius: var(--r-btn); color: var(--tpw-gruen-dunkel); font-size: .98rem; font-weight: 700; line-height: 1.2; } body.tpw-startseite .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover, body.tpw-startseite .entry-content .wp-block-button.is-style-outline .wp-block-button__link:focus { border-color: var(--tpw-gruen-dunkel); color: var(--tpw-gruen-dunkel); text-decoration: none; } /* Poseidons `background-color: transparent !important` fuer Outline-Buttons laesst sich nur mit !important beantworten. Die Hover-Flaeche #eff7e8 ist Teil von Rahmen 7 — ohne sie hat der Outline-Button keinen Hover-Zustand. */ body.tpw-startseite .entry-content .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--tpw-surface) !important; } /* --------------------------------------------------------------------- * Einheitliche „Mehr"-Kante: jeder Inhaltsblock schliesst gleich ab — * Haarlinie oben, rechtsbuendiger gruener Link, Pfeil rueckt beim Hover 4px * nach rechts (Rahmen Konstanten, Vorbild `.more-edge` im Mock und * `.str-more` in css/tiere.css). * --------------------------------------------------------------------- */ .entry-content .tpw-start-kante { display: flex; justify-content: flex-end; flex-wrap: wrap; margin-block: clamp(26px, 3.4vw, 42px) 0; padding-top: 17px; border-top: 1px solid rgba(113, 145, 48, .16); } .entry-content .tpw-start-kante a, .entry-content .tpw-start-kante a:link, .entry-content .tpw-start-kante a:visited { display: inline-flex; align-items: center; gap: 8px; color: var(--tpw-gruen-dunkel); font-size: .95rem; font-weight: 700; text-decoration: none; } .entry-content .tpw-start-kante a::after { content: ''; width: 20px; height: 20px; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: var(--tpw-start-ic-pfeil); mask-image: var(--tpw-start-ic-pfeil); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transition: transform .3s ease; } .entry-content .tpw-start-kante a:hover::after { transform: translateX(4px); } /* ===================================================================== * 3. ICON-MASKEN * Eine Familie: viewBox 0 0 24 24, stroke-width 1.7, runde Enden. * Die Motive sind 1:1 die aus rahmen-final.html bzw. tpw_icon_pfade(). * ===================================================================== */ body.tpw-startseite { /* Pfeil („Mehr"-Kanten) — identisch mit tpw_icon_pfade()['pfeil'] */ --tpw-start-ic-pfeil: url("data:image/svg+xml;utf8,"); /* Uhr (Oeffnungszeiten) — aus rahmen-final.html, Besuchsband */ --tpw-start-ic-uhr: url("data:image/svg+xml;utf8,"); /* Ortsmarke (Anfahrt) — aus rahmen-final.html, Besuchsband */ --tpw-start-ic-ort: url("data:image/svg+xml;utf8,"); /* Ticket (Besuch buchen) — aus rahmen-final.html, Besuchsband */ --tpw-start-ic-ticket: url("data:image/svg+xml;utf8,"); /* Pfote (Platzhalter Tierportrait) — identisch mit tpw_icon_pfade()['pfote'] */ --tpw-start-ic-pfote: url("data:image/svg+xml;utf8,"); /* Tasche (Platzhalter Produktbild) — identisch mit tpw_icon_pfade()['tasche'] */ --tpw-start-ic-tasche: url("data:image/svg+xml;utf8,"); } /* Gemeinsame Masken-Grundform. */ .tpw-start-ic { display: block; width: 28px; height: 28px; flex: 0 0 auto; background-color: var(--tpw-gruen); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .tpw-start-ic--uhr { -webkit-mask-image: var(--tpw-start-ic-uhr); mask-image: var(--tpw-start-ic-uhr); } .tpw-start-ic--ort { -webkit-mask-image: var(--tpw-start-ic-ort); mask-image: var(--tpw-start-ic-ort); } .tpw-start-ic--ticket { -webkit-mask-image: var(--tpw-start-ic-ticket); mask-image: var(--tpw-start-ic-ticket); } /* ===================================================================== * 4. HERO — 3-Bild-Crossfade, Claim statisch * Die Bilder kommen aus dem dynamischen Block `tpw/hero-bilder` (Option * tpw_hero_bilder, Verwaltung unter Seiten -> Hero-Bilder); die Reihenfolge * der Liste bestimmt die Reihenfolge der Blende (:nth-of-type zaehlt die *
-Elemente). * * --------------------------------------------------------------------- * RANDLOS MIT BANDANSCHLUSS (User-OK 2026-08-05) * Referenzbilder: design-mocks/mobil-modern/04c-hero-mobil-fullbleed- * bandanschluss.png (mobil) und 05c-hero-desktop-randlos-bandanschluss.png * (Desktop). DESIGN-RAHMEN.md, Nachtrag zu den Konstanten. * * Der Hero laeuft an beiden Raendern bis zur Viewport-Kante, hat Radius 0 und * schliesst OHNE Abstand an das folgende Band an — oben an die Haarlinie der * Kopfzeile, unten an das dunkle Aktuell-Band. Er ist damit kein Bild IM * Raster mehr, sondern die erste Flaeche der Seite. * * TECHNIK ist derselbe Full-Bleed-Helfer wie in Abschnitt 1 (`.tpw-start-bleed`, * identisch auch `.tier-bleed` in tiere.css). Er steht hier als Deklaration und * nicht als zusaetzliche Klasse, weil der Hero eine Gutenberg-Gruppe im * post_content ist — so braucht die Umstellung KEINE Inhaltsaenderung und * bleibt im Editor unsichtbar. * * WARUM DAS AUCH DEN TEXT RICHTIG SETZT (Mock 05c): margin-inline zieht den * KASTEN bis zur Viewport-Kante, padding-inline schiebt den INHALT genau * wieder auf die Inhaltskante zuruecck (72px auf Desktop, 24px mobil). Bild- * und Scrim-Ebene haengen per `inset:0` am Polsterkasten und reichen deshalb * bis zum Viewport-Rand, waehrend der Textblock auf derselben Kante steht wie * jeder andere Seiteninhalt. Genau darum hat der Textblock unten kein eigenes * seitliches Polster mehr. * * ACHTUNG bei Erweiterungen: an diesem Element NIE die Kurzformen `margin` oder * `padding` verwenden — sie wuerden margin-inline bzw. padding-inline * ueberschreiben und den Bleed aufheben. Immer margin-block / padding-block. * --------------------------------------------------------------------- */ .entry-content .tpw-start-hero { position: relative; display: flex; align-items: flex-end; min-height: min(76vh, 620px); /* Kein Abstand nach oben (Haarlinie der Kopfzeile) und keiner nach unten (Bandanschluss, siehe die Regel unter dieser). */ margin-block: 0; margin-inline: calc(50% - 50vw); padding-inline: calc(50vw - 50%); border-radius: 0; overflow: hidden; background-color: var(--tpw-surface); /* KEIN Schatten mehr: `var(--tpw-shadow)` war die Karten-Erhebung eines eingerueckten Bildes. Randlos gibt es keine sichtbaren Seitenkanten, an denen sie wirken koennte — sichtbar bliebe nur ein dunkler Hauch OBERHALB der Oberkante, also ein grauer Schleier zwischen Kopf-Haarlinie und Bild. Die Mocks 04c/05c zeigen dort reines Weiss bis zur Haarlinie. */ } /* BANDANSCHLUSS: das dunkle Aktuell-Band schliesst OHNE Abstand an den Hero an — Bildkante trifft Farbflaeche, das ist der beabsichtigte harte Schnitt. Der Reset sitzt am FOLGEBLOCK, weil die Startseiten-Baender ihre Luft selbst mitbringen (der Hero hat unten schon 0). */ .entry-content .tpw-start-hero + .tpw-start-dyn > .tpw-start-aktuell { margin-block-start: 0; } /* OHNE AKTUELL-BAND braucht es dagegen wieder Luft: dann ist das WEISSE Besuchsband der erste Nachbar, und eine weisse Karte mit zarter Kontur direkt an der Bildkante liest sich nicht als Schnitt, sondern als Klebefehler. Zwei Faelle: 1. Kein aktueller Termin — der Block liefert einen LEEREN Wrapper (`div.tpw-start-dyn:empty`), das Besuchsband folgt dahinter. 2. Aktuell-Block aus dem Inhalt entfernt — Besuchsband direkt am Hero. Der Wert liegt bewusst UEBER dem eigenen Standardabstand des Bandes (clamp 22-34px), weil hier kein Weissraum von oben mitkommt: 48px auf Desktop, 30px mobil. */ .entry-content .tpw-start-hero + .tpw-start-dyn:empty + .tpw-start-besuch, .entry-content .tpw-start-hero + .tpw-start-besuch { margin-block-start: clamp(30px, 4vw, 48px); } /* Bildebene. */ .tpw-start-hero .tpw-start-hero-bild { position: absolute; inset: 0; margin: 0; opacity: 0; animation: tpwStartHeroFade 21s infinite; } .tpw-start-hero .tpw-start-hero-bild img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } /* Taktung: 21s Zyklus, drei Slots von je 7s, Ueberblendung 1,05s. * Der NEGATIVE Verzoegerungswert des ersten Bildes ist Absicht: die Animation * startet dadurch bereits im voll sichtbaren Zustand — ohne ihn waere der Hero * in der ersten Sekunde nach dem Laden leer. Die beiden anderen Bilder blenden * genau dann ein, wenn das vorige ausblendet (kein Loch, kein Sprung). * Bild 1: -1,05s → sichtbar 0,00–5,95s, Ausblende bis 7,00s * Bild 2: 5,95s → Einblende 5,95–7,00s, sichtbar bis 12,95s * Bild 3: 12,95s → Einblende 12,95–14,00s, sichtbar bis 19,95s, dann Bild 1 */ .tpw-start-hero .tpw-start-hero-bild:nth-of-type(1) { animation-delay: -1.05s; } .tpw-start-hero .tpw-start-hero-bild:nth-of-type(2) { animation-delay: 5.95s; } .tpw-start-hero .tpw-start-hero-bild:nth-of-type(3) { animation-delay: 12.95s; } @keyframes tpwStartHeroFade { 0% { opacity: 0; } 5% { opacity: 1; } 33.333% { opacity: 1; } 38.333% { opacity: 0; } 100% { opacity: 0; } } /* Lesbarkeitsverlauf ueber den Fotos. */ .tpw-start-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,30,10,.06) 0%, rgba(20,30,10,.20) 45%, rgba(20,30,10,.74) 100%); pointer-events: none; } /* Textebene. * * SEITLICH OHNE EIGENES POLSTER (randlos, Mock 05c): die Innenkante kommt aus * dem Bleed-Polster des Heros und ist damit exakt die Inhaltskante der Seite — * 72px auf Desktop, 24px mobil. Vorher lagen beide uebereinander (24px Raster * + 54px Polster = Text erst bei 126px), die Headline brach dadurch auf zwei * Zeilen. Oben/unten bleibt der bisherige Wert; der Textblock behaelt also * seine Innenkanten, er sitzt nur nicht mehr doppelt eingerueckt. * * max-width 44rem statt 40rem: die Headline muss auf Desktop wieder EINZEILIG * stehen (Mock 05c). Bei 62,4px Schriftgrad braucht "Das Refugium fuer Tiere." * knapp 690px; 44rem = 704px ist der naechste Wert, der das traegt, ohne die * Textspalte ueber das Lesemass hinaus zu oeffnen (der Lead bleibt ohnehin bei * 50ch). Mobil ist der Wert wirkungslos, dort begrenzt die Viewport-Breite. */ .tpw-start-hero .tpw-start-hero-copy { position: relative; z-index: 2; max-width: 44rem; padding-block: clamp(24px, 4.4vw, 54px); padding-inline: 0; color: #fff; } .tpw-start-hero .tpw-start-hero-copy h1 { margin-block: 0; color: #fff; font-size: clamp(2.1rem, 5.4vw, 3.9rem); font-weight: 800; line-height: 1.06; letter-spacing: -.02em; text-shadow: 0 2px 30px rgba(0, 0, 0, .38); } .tpw-start-hero .tpw-start-hero-lead { margin-block: 16px 0; max-width: 50ch; font-size: clamp(1rem, 1.7vw, 1.22rem); line-height: 1.6; color: #fff; text-shadow: 0 1px 18px rgba(0, 0, 0, .4); } .tpw-start-hero .wp-block-buttons { margin-block: clamp(22px, 3vw, 30px) 0; } /* ===================================================================== * 4a. PFOTEN-SCROLLHINWEIS (mobil, rev. 2026-08-06 User-OK) * * WAS: drei kleine Pfotenabdruecke, die nacheinander erscheinen und nach unten * wandern — ein Gangbild, das „hier geht es weiter" sagt. Markup liefert * mu-plugins/tierpark-startseite.php (tpw_start_hero_scrollhinweis()). * * WARUM ES IHN ERST JETZT GIBT: seit der Hero mobil GENAU den sichtbaren Raum * fuellt (Abschnitt 12, min-height-Rechnung), endet die erste Bildschirmseite * ohne jede angeschnittene Kante. Das ist gewollt schoen — nimmt aber den * einzigen Hinweis weg, dass darunter noch Seite kommt. Der Hinweis ersetzt * genau diese verlorene Auskunft. * * WARUM DAS GEFUELLTE MOTIV (`pfote-voll`): bei 14px liest eine 1,5px-Kontur * als Kratzer, nicht als Abdruck — eine Spur im Boden ist eine FLAECHE. Der * Griff zur gefuellten Fassung haelt zugleich die Strichstaerken-Regel aus * Rahmen 10 ein, ohne sie umrechnen zu muessen: gefuellt gilt `stroke: none`, * es gibt also gar keine Strichstaerke, die von der 22px-Norm abweichen koennte. * * PLATZ — die ruhigste Stelle des Heros: unten RECHTS, auf Hoehe des Knopfes. * Der Textblock liegt am Hero-Boden und ist mobil volle Breite; die einzige * Zeile mit freiem Platz rechts ist die Knopfzeile (der Knopf ist linksbuendig * und ~250px breit, bei 390px Viewport bleiben rechts ~90px). `bottom` traegt * darum EXAKT denselben Ausdruck wie das untere Polster von * `.tpw-start-hero-copy` — die Spur steht damit auf derselben Grundlinie wie der * Knopf und wandert nicht weg, wenn dieses Polster einmal geaendert wird. * Ueberlagert wird nichts: der Hinweis liegt neben dem Knopf, nicht darueber. * * `pointer-events: none` ist Pflicht: die Spur ist Deko und darf dem Knopf * daneben kein Klickziel wegnehmen. * * ERKENNBARKEIT AUF HELLEN *UND* DUNKLEN FOTOS: Weiss mit .55 Deckkraft, dazu * ein zarter `drop-shadow`. Auf dunklen Motiven traegt das Weiss, auf hellen * traegt der Schatten die Silhouette. Beides zusammen ist der Grund, warum es * ohne eine zusaetzliche Flaeche hinter der Spur auskommt (die waere eine Marke * mehr im Bild). Der Scrim des Heros (::after, unten bis .74 abgedunkelt) * arbeitet ohnehin in dieselbe Richtung. * * NUR MOBIL: die Grundhaltung ist `display: none`, eingeschaltet wird im * 640px-Umschaltpunkt (Abschnitt 12) — dort, wo der Hero bildschirmfuellend ist * und die Bottom-Nav steht. Auf Desktop ist der Hero auf 620px begrenzt, dort * ist das folgende Band ohnehin angeschnitten sichtbar und der Hinweis waere * eine Antwort auf eine Frage, die niemand hat. * ===================================================================== */ .tpw-start-hero .tpw-start-hero-scroll { display: none; position: absolute; right: 1.5em; bottom: clamp(24px, 4.4vw, 54px); z-index: 2; width: 24px; height: 52px; color: #fff; pointer-events: none; } /* Die drei Abdruecke sitzen absolut im 52px hohen Kasten: Schrittweite 19px (14px Motiv + 5px Luft), der letzte endet genau an der Unterkante. */ .tpw-start-hero .tpw-start-hero-pfote { position: absolute; left: 0; /* Grundzustand UNSICHTBAR. Sichtbar wird allein durch die Animation — ohne das wuerde die Spur in der ersten Sekunde nach dem Laden voll dastehen und erst danach zu laufen anfangen. */ opacity: 0; animation: tpwStartPfote 3s ease-in-out infinite; } .tpw-start-hero .tpw-start-hero-pfote .tpw-ic { width: 14px; height: 14px; /* Traegt die Silhouette auf HELLEN Fotos. Bewusst weich und knapp: ein harter Schatten waere der Versatz-Schatten, den Rahmen 7 verbietet — hier ist er Lesbarkeitshilfe auf wechselndem Untergrund, so wie beim text-shadow der Hero-Headline daneben. */ filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .5)); } /* GANGBILD: seitlicher Versatz und leichte Drehung, sonst waeren es drei gestapelte Icons und keine Spur. Die Drehung sitzt am SVG und nicht am Kasten, weil der Kasten seine `transform` fuer die Wanderbewegung braucht — zwei transform-Angaben am selben Element wuerden sich ueberschreiben. Rotation ist hier kein Verstoss gegen Rahmen 6 („Bilder gerade gesetzt"): gedreht wird ein Icon der Familie, kein Foto. */ .tpw-start-hero .tpw-start-hero-pfote:nth-child(1) { top: 0; left: 0; } .tpw-start-hero .tpw-start-hero-pfote:nth-child(2) { top: 19px; left: 9px; } .tpw-start-hero .tpw-start-hero-pfote:nth-child(3) { top: 38px; left: 1px; } /* Die 180° sind der eigentliche Richtungsgeber (User-Meldung 2026-08-06): das Motiv `pfote` der Familie zeigt die Zehen NACH OBEN — als Spur nach unten gelesen lief sie damit dem Blick entgegen. Gedreht zeigen die Zehen nach unten, also in die Laufrichtung. Die kleinen Zusatzwinkel sind das Gangbild und stehen bewusst als Summe in DERSELBEN Deklaration: eine zweite transform-Angabe am selben Element wuerde die erste ersetzen, nicht ergaenzen. */ .tpw-start-hero .tpw-start-hero-pfote:nth-child(1) .tpw-ic { transform: rotate(166deg); } .tpw-start-hero .tpw-start-hero-pfote:nth-child(2) .tpw-ic { transform: rotate(191deg); } .tpw-start-hero .tpw-start-hero-pfote:nth-child(3) .tpw-ic { transform: rotate(171deg); } /* TAKTUNG. 3s Zyklus je Abdruck, versetzt um 0,26s — das ergibt das Laufen. * * Der Vorlauf von 1,5s steckt in der VERZOEGERUNG des ersten Abdrucks: die Spur * soll nicht schon beim Bildaufbau losblinken, sondern erst, wenn der Blick den * Hero erfasst hat. Weil `animation-delay` nur die ERSTE Runde verschiebt, * laeuft die Schleife danach ohne Vorlauf weiter — genau richtig. * * Sichtbar ist jeder Abdruck von 10% bis 52% (0,3s–1,56s), danach ist Pause. * Der letzte Abdruck ist bei 0,52 + 1,56 = 2,08s verschwunden, es bleiben rund * 0,9s Ruhe vor dem naechsten Durchlauf. Die Pause ist Absicht: eine * durchlaufende Endlosschleife ist ein Gimmick, ein Hinweis darf sich * wiederholen und dazwischen schweigen (Rahmen 8). */ .tpw-start-hero .tpw-start-hero-pfote:nth-child(1) { animation-delay: 1.5s; } .tpw-start-hero .tpw-start-hero-pfote:nth-child(2) { animation-delay: 1.76s; } .tpw-start-hero .tpw-start-hero-pfote:nth-child(3) { animation-delay: 2.02s; } @keyframes tpwStartPfote { 0% { opacity: 0; transform: translateY(-5px); } 10% { opacity: .55; transform: translateY(0); } 38% { opacity: .55; transform: translateY(0); } 52% { opacity: 0; transform: translateY(5px); } 100% { opacity: 0; transform: translateY(5px); } } /* NACH DEM ERSTEN SCROLLEN DAUERHAFT WEG. Die Klasse setzt js/hero-hinweis.js einmalig; sie wird nie wieder entfernt, auch nicht beim Zurueckscrollen nach oben — ein Hinweis, der nach getaner Arbeit wiederkommt, ist ein Gimmick. `display: none` statt Ausblenden ist hier richtig: der Wechsel passiert waehrend der Scrollbewegung, in der die Spur ohnehin aus dem Blick laeuft, und beendet die Animation sofort statt sie im Hintergrund weiterlaufen zu lassen. Die Spezifitaet liegt ueber der Einschaltregel im 640px-Block (drei Klassen = 0,3,0 gegen zwei = 0,2,0), die Regel gewinnt also unabhaengig von der Reihenfolge im Stylesheet. */ .tpw-start-hero .tpw-start-hero-scroll.ist-weg { display: none; } /* ===================================================================== * 5. AKTUELL-BAND — dunkle CI-Gruenflaeche als Ruheflaeche * Zugelassen laut DESIGN-RAHMEN.md Rev. 2026-08-04: ganzes Band, sparsam, * heller Text in vollem Weiss. Es ist das EINZIGE dunkle Band der Seite und * steht nicht unmittelbar vor der dunklen Fusszeile. * ===================================================================== */ .entry-content .tpw-start-aktuell { background-color: var(--tpw-gruen-dunkel); color: #fff; margin-block: clamp(26px, 3.4vw, 40px) 0; padding-block: clamp(26px, 3.4vw, 40px); } .tpw-start-aktuell .tpw-start-aktuell-inner { display: flex; align-items: center; justify-content: space-between; gap: clamp(20px, 3vw, 40px); flex-wrap: wrap; } .tpw-start-aktuell p { margin: 0; color: #fff; } /* Bildzone des Aktuell-Bands (2026-08-09). Nur vorhanden, wenn die Veranstaltung ein Beitragsbild hat — sonst gibt der Shortcode das Element gar nicht aus und das Band bleibt wie zuvor. Radius aus --r-card (11px) wie alle Bildkarten der Startseite; cover statt contain, weil hier ein FOTO steht (die Shop-Zone nutzt contain, weil dort freigestellte Produktmotive vorkommen, siehe Abschnitt 10). */ .tpw-start-aktuell .tpw-start-aktuell-bild { flex: 0 0 auto; width: clamp(104px, 13vw, 152px); aspect-ratio: 4 / 3; border-radius: var(--r-card); overflow: hidden; background-color: rgba(255, 255, 255, 0.10); } .tpw-start-aktuell .tpw-start-aktuell-bild img { width: 100%; height: 100%; object-fit: cover; min-height: 0; display: block; } /* Mit Bild darf der Text den Rest der Zeile fuellen, sonst draengt ihn space-between an die Bildkante. */ .tpw-start-aktuell .tpw-start-aktuell--bild .tpw-start-aktuell-text { flex: 1 1 260px; } .tpw-start-aktuell .tpw-start-aktuell-eyebrow { display: flex; flex-direction: column; align-items: flex-start; gap: 11px; margin-block-end: 12px; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--tpw-surface); } .tpw-start-aktuell .tpw-start-aktuell-eyebrow::before { content: ''; display: block; width: var(--tpw-sig-breite); height: var(--tpw-sig-dicke); background: var(--tpw-surface); } .tpw-start-aktuell .tpw-start-aktuell-titel { font-size: clamp(1.32rem, 2.4vw, 1.85rem); font-weight: 800; line-height: 1.15; letter-spacing: -.015em; } .tpw-start-aktuell .tpw-start-aktuell-datum { margin-block-start: 7px; font-size: 1rem; font-weight: 700; color: var(--tpw-surface); } .tpw-start-aktuell .tpw-start-aktuell-satz { margin-block-start: 10px; max-width: 56ch; font-size: .98rem; line-height: 1.6; } .tpw-start-aktuell .tpw-start-aktuell-cta { flex: 0 0 auto; } /* Button auf der dunklen Flaeche: gleiche Form (6px, 13/24, 700) wie das Fundament, aber invertiert — gefuelltes Gruen waere hier unsichtbar. Weisse Flaeche, Text im dunklen CI-Gruen (5,7:1 in der Gegenrichtung). */ .tpw-start-aktuell a.tpw-start-btn-hell, .tpw-start-aktuell a.tpw-start-btn-hell:link, .tpw-start-aktuell a.tpw-start-btn-hell:visited { display: inline-flex; align-items: center; justify-content: center; padding: 13px 24px; border: 1.5px solid #fff; border-radius: var(--r-btn); background-color: #fff; color: var(--tpw-gruen-dunkel); font-size: .98rem; font-weight: 700; line-height: 1.2; text-decoration: none; transition: background-color .25s ease, color .25s ease; } .tpw-start-aktuell a.tpw-start-btn-hell:hover, .tpw-start-aktuell a.tpw-start-btn-hell:focus { background-color: var(--tpw-surface); border-color: var(--tpw-surface); color: var(--tpw-gruen-dunkel); } .tpw-start-aktuell a.tpw-start-btn-hell:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 255, 255, .45); } /* ===================================================================== * 6. BESUCHSBAND — kompakte Leiste, jedes Element verlinkt * ===================================================================== */ .entry-content .tpw-start-besuch { display: grid; grid-template-columns: repeat(3, 1fr); margin-block: clamp(22px, 3vw, 34px) 0; background-color: #fff; border: 1px solid var(--tpw-linie-stark); border-radius: var(--r-card); overflow: hidden; } .tpw-start-besuch .tpw-start-besuch-item { display: flex; align-items: flex-start; gap: 15px; padding: 24px 26px; text-decoration: none; transition: background-color .25s ease; } /* Textfarbe braucht :link/:visited, weil style.css `a:link, a:visited` faerbt. Sie steht BEWUSST in einer eigenen Regel: mit Pseudoklassen im Sammel- selektor wuerden die Layout-Angaben spaetere Media-Query-Regeln ueberbieten. */ .tpw-start-besuch .tpw-start-besuch-item:link, .tpw-start-besuch .tpw-start-besuch-item:visited { color: var(--tpw-ink); } .tpw-start-besuch .tpw-start-besuch-item + .tpw-start-besuch-item { border-left: 1px solid var(--tpw-linie-zart); } .tpw-start-besuch .tpw-start-besuch-item:hover { background-color: var(--tpw-surface-2); } .tpw-start-besuch .tpw-start-besuch-titel { display: block; font-size: 1rem; font-weight: 700; color: var(--tpw-gruen-dunkel); } .tpw-start-besuch .tpw-start-besuch-text { display: block; margin-top: 3px; font-size: .91rem; line-height: 1.55; color: var(--tpw-ink-soft); } /* ALLE DREI ELEMENTE SIND OPTISCH GLEICH (User-Entscheid 2026-08-04) * Frueher trug das dritte Element („Besuch buchen") die Form eines gefuellten * Buttons (Klassen `tpw-start-besuch-btn` / `tpw-start-besuch-item--cta`) und * stach damit aus der Leiste heraus. Beide Klassen sind aus dem Seiteninhalt * entfernt, das Element nutzt jetzt dieselbe `tpw-start-besuch-titel` wie * „Oeffnungszeiten" und „Anfahrt" — deshalb sind die zugehoerigen Regeln hier * geloescht statt neutralisiert. * * Der Titel heisst seit demselben Tag „Buchung" statt „Besuch buchen": drei * Substantive in einer Reihe (Oeffnungszeiten / Anfahrt / Buchung) statt zwei * Substantive und einer Aufforderung. Die Begleitzeile nennt „buchen" nicht und * blieb deshalb unberuehrt. * * Verlinkt bleibt das Element unveraendert auf /veranstaltungen/; der ganze * Kasten ist EIN Ziel, wie bei den anderen beiden. Weitere Wege dorthin: der * Menuepunkt „Besuch" und die „Mehr"-Kante der Termin-Sektion („Alle Termine * und Buchung"). NICHT der Kopfzeilen-CTA — der fuehrt seit 2026-08-04 als * „Tieren helfen" auf /unterstuetzen/. */ /* ===================================================================== * 7. TIERE KENNENLERNEN — runde Portraits (Logo-Echo, Rahmen 6) * Runde Form ist ausschliesslich hier erlaubt. * ===================================================================== */ .entry-content .tpw-start-portraits { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 26px); } .tpw-start-portraits .tpw-start-pcard { display: block; text-align: center; text-decoration: none; transition: transform .3s ease; } .tpw-start-portraits .tpw-start-pcard:link, .tpw-start-portraits .tpw-start-pcard:visited { color: var(--tpw-ink); } .tpw-start-portraits .tpw-start-pcard:hover { transform: translateY(-2px); } .tpw-start-portraits .tpw-start-ring { display: block; position: relative; aspect-ratio: 1; border-radius: 50%; overflow: hidden; background-color: var(--tpw-surface); } .tpw-start-portraits .tpw-start-ring::after { content: ''; position: absolute; inset: 0; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(113, 145, 48, .45); pointer-events: none; } .tpw-start-portraits .tpw-start-ring img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; } .tpw-start-portraits .tpw-start-pname { display: block; margin-top: 15px; font-size: 1.14rem; font-weight: 700; line-height: 1.25; } .tpw-start-portraits .tpw-start-pgruppe { display: block; margin-top: 2px; font-size: .87rem; color: var(--tpw-ink-soft); } /* ===================================================================== * 8. DER GNADENHOF — Bild/Text-Paar, Bild gerade gesetzt (Rahmen 6) * ===================================================================== */ .entry-content .tpw-start-split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(26px, 4.4vw, 60px); align-items: center; } .tpw-start-split .tpw-start-split-media { margin: 0; border-radius: var(--r-card); overflow: hidden; box-shadow: var(--tpw-shadow-soft); } .tpw-start-split .tpw-start-split-media img { width: 100%; height: 100%; min-height: 300px; object-fit: cover; display: block; } /* Abstaende erst auf Null, dann gezielt vergeben (wie beim Sektionskopf). * Der Eyebrow ist ausdruecklich AUSGENOMMEN (`:not(.tpw-eyebrow)`), sonst * wuerden Groesse und Farbe der globalen Headline-Signatur ueberschrieben. */ .tpw-start-split .tpw-start-split-text p, .tpw-start-split .tpw-start-split-text h2 { margin-block: 0; } .tpw-start-split .tpw-start-split-text h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1.12; letter-spacing: -.015em; } .tpw-start-split .tpw-start-split-text .tpw-eyebrow { margin-block-end: 16px; } .tpw-start-split .tpw-start-split-text p:not(.tpw-eyebrow) { margin-block-start: 15px; font-size: 1.05rem; line-height: 1.7; color: var(--tpw-ink-soft); } /* ===================================================================== * 9. TERMINE — naechste Veranstaltungen (Events Manager) * ===================================================================== */ .entry-content .tpw-start-termine { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 2.4vw, 26px); } .tpw-start-termine .tpw-start-tcard { display: flex; align-items: flex-start; gap: 20px; padding: 26px 28px; background-color: #fff; border: 1px solid var(--tpw-linie-stark); border-radius: var(--r-card); text-decoration: none; transition: transform .3s ease, border-color .25s ease; } .tpw-start-termine .tpw-start-tcard:link, .tpw-start-termine .tpw-start-tcard:visited { color: var(--tpw-ink); } .tpw-start-termine .tpw-start-tcard:hover { transform: translateY(-2px); border-color: var(--tpw-linie-rand); } /* Datumsmarke: typografisch, kein Icon — Tag gross, Monat als Versal-Label. */ .tpw-start-termine .tpw-start-tdatum { flex: 0 0 auto; display: grid; place-content: center; width: 58px; padding: 9px 0; background-color: var(--tpw-surface); border-radius: var(--r-btn); text-align: center; line-height: 1.05; } .tpw-start-termine .tpw-start-tdatum b { display: block; font-size: 1.5rem; font-weight: 800; color: var(--tpw-gruen-dunkel); } .tpw-start-termine .tpw-start-tdatum > span { display: block; margin-top: 3px; font-size: .72rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--tpw-gruen-dunkel); } .tpw-start-termine .tpw-start-tbody { display: block; min-width: 0; } .tpw-start-termine .tpw-start-ttitel { display: block; font-size: 1.14rem; font-weight: 700; line-height: 1.3; } .tpw-start-termine .tpw-start-tmeta { display: block; margin-top: 7px; font-size: .9rem; font-weight: 600; color: var(--tpw-gruen-dunkel); } .tpw-start-termine .tpw-start-tort { display: block; margin-top: 3px; font-size: .88rem; color: var(--tpw-ink-soft); } /* Leerzustand — ehrlich statt leerer Flaeche. */ .entry-content .tpw-start-leer { padding: 28px 30px; background-color: var(--tpw-surface); border-radius: var(--r-card); } .entry-content .tpw-start-leer p { margin: 0; font-size: 1.02rem; color: var(--tpw-ink); } .entry-content .tpw-start-leer .tpw-start-leer-link { margin-top: 10px; } .entry-content .tpw-start-leer a { font-weight: 700; color: var(--tpw-gruen-dunkel); text-decoration: none; } /* ===================================================================== * 10. SHOP-TEASER — Produkte aus WooCommerce * ===================================================================== */ .entry-content .tpw-start-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 26px); } .tpw-start-shop .tpw-start-pshop { display: flex; flex-direction: column; background-color: #fff; border: 1px solid var(--tpw-linie-stark); border-radius: var(--r-card); overflow: hidden; text-decoration: none; transition: transform .3s ease, border-color .25s ease; } .tpw-start-shop .tpw-start-pshop:link, .tpw-start-shop .tpw-start-pshop:visited { color: var(--tpw-ink); } .tpw-start-shop .tpw-start-pshop:hover { transform: translateY(-2px); border-color: var(--tpw-linie-rand); } /* Bildflaeche WEISS, nicht in der gruenen Flaechenfarbe: die Gutschein-PNGs (Erlebnis-Produkte) haben einen transparenten Rand, durch den der Untergrund scheint. Auf --tpw-surface sass der Gutschein in einem gruenen Feld; auf Weiss steht er wie auf Papier. Die Kante zum Kartenkoerper traegt die Haarlinie, die etwas kraeftiger sein muss, weil weiss auf weiss trifft. */ /* Zonenformat QUADRATISCH, an allen Breakpoints gleich (2026-08-05): von 28 Produktbildern im Shop sind 25 quadratisch oder nahezu quadratisch (die Gutschein-PNGs 1400x1400, die Frederic-Gemaelde 2560x2560) — im quadratischen Feld fuellen sie die Zone randlos aus, waehrend im vorherigen 4:3-Feld an den Seiten Weissraum blieb. Ausnahme: der einspaltige Bereich bis 900px, siehe Abschnitt 12. */ .tpw-start-shop .tpw-start-pthumb { display: grid; place-items: center; aspect-ratio: 1; background-color: #fff; border-bottom: 1px solid var(--tpw-linie-stark); overflow: hidden; /* Dezenter Innenabstand, damit kein Motiv am Kartenrand oder an der trennenden Haarlinie klebt. Wirkt nur zusammen mit contain (siehe unten): bei cover schnitt overflow:hidden erst an der Padding-Kante, das Padding war dort also wirkungslos. Mobil ist die Zone kleiner, dort 8px (Abschnitt 12). */ padding: 12px; } /* Produkt ohne Bild: das Platzhalterfeld behaelt die gruene Flaeche, damit die fehlende Aufnahme als Feld erkennbar bleibt und nicht als leeres Weiss. */ .tpw-start-shop .tpw-start-pthumb:empty { background-color: var(--tpw-surface); } /* Weg 2 (Entscheid des Vereins, 2026-08-05): contain statt cover — an ALLEN Breakpoints, nicht mehr nur mobil. Mit cover ueberlief das quadratische Gutschein-PNG die Zone (auf Desktop 359 statt 269 px hoch) und overflow:hidden schnitt die unteren ~90 px weg, samt der Zeile "TERMINBUCHUNG UNTER …". Mit contain bleibt jedes Motiv vollstaendig. min-height:0 hebt die automatische Mindesthoehe des Grid-Elements auf — ohne sie waechst das img bei hochkantigen Motiven ueber die Zone hinaus (Testmotiv 1:2 wurde 224 statt 153 px hoch) und contain beschneidet doch. */ .tpw-start-shop .tpw-start-pthumb img { width: 100%; height: 100%; object-fit: contain; min-height: 0; display: block; } /* Produkt ohne Bild: Platzhalter-Icon aus der Familie. */ .tpw-start-shop .tpw-start-pthumb:empty::before { content: ''; width: 52px; height: 52px; background-color: var(--tpw-gruen); opacity: .55; -webkit-mask-image: var(--tpw-start-ic-tasche); mask-image: var(--tpw-start-ic-tasche); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } .tpw-start-shop .tpw-start-pbody { display: flex; flex-direction: column; flex: 1; padding: 19px 22px 21px; } .tpw-start-shop .tpw-start-ptitel { display: block; font-size: 1.08rem; font-weight: 700; line-height: 1.3; } /* Kurztext: schliesst die Luecke zwischen Titel und Preis. Dezent im ink-soft-Ton, hoechstens drei Zeilen — laengere Kurzbeschreibungen enden mit dem Auslassungszeichen des Browsers. */ .tpw-start-shop .tpw-start-ptext { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; margin-top: 8px; font-size: .95rem; font-weight: 400; line-height: 1.55; color: var(--tpw-ink-soft); } .tpw-start-shop .tpw-start-preis { display: block; margin-top: auto; padding-top: 13px; font-size: 1.02rem; font-weight: 800; color: var(--tpw-gruen-dunkel); } /* WooCommerce liefert im Preis eigene Elemente mit — hier neutralisieren. */ .tpw-start-shop .tpw-start-preis .woocommerce-Price-amount { font-weight: 800; } .tpw-start-shop .tpw-start-preis del { margin-right: 7px; font-weight: 600; color: var(--tpw-ink-soft); } .tpw-start-shop .tpw-start-preis ins { text-decoration: none; } /* ===================================================================== * 11. UNTERSTUETZEN — kompakt, ohne IBAN (Rahmen Konstanten) * ===================================================================== */ .entry-content .tpw-start-helfen { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(22px, 3.4vw, 48px); align-items: center; } .tpw-start-helfen .tpw-start-helfen-text p, .tpw-start-helfen .tpw-start-helfen-text h2 { margin-block: 0; } .tpw-start-helfen .tpw-start-helfen-text h2 { font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1.14; letter-spacing: -.015em; } .tpw-start-helfen .tpw-start-helfen-text .tpw-eyebrow { margin-block-end: 16px; } .tpw-start-helfen .tpw-start-helfen-text .tpw-start-helfen-satz { margin-block-start: 15px; max-width: 52ch; font-size: 1.05rem; line-height: 1.7; color: var(--tpw-ink-soft); } .tpw-start-helfen .wp-block-buttons { margin-block: 0; } /* ===================================================================== * 12. RESPONSIVE * ===================================================================== */ @media (max-width: 900px) { .entry-content .tpw-start-besuch { grid-template-columns: 1fr; } .tpw-start-besuch .tpw-start-besuch-item + .tpw-start-besuch-item { border-left: 0; border-top: 1px solid var(--tpw-linie-zart); } .entry-content .tpw-start-portraits { grid-template-columns: repeat(2, 1fr); } .entry-content .tpw-start-split, .entry-content .tpw-start-termine, .entry-content .tpw-start-shop, .entry-content .tpw-start-helfen { grid-template-columns: 1fr; } /* Einspaltiges Shop-Band: die Karte laeuft ueber die ganze Inhaltsbreite (bei 900px sind das ~835px). Eine quadratische Bildzone waere dort ein 835px hoher Block — eine Karte fuellte den Bildschirm. Zwischen 641 und 900px bleibt die Zone daher im Querformat; contain zeigt das Motiv trotzdem vollstaendig, es sitzt nur mit Weissraum links und rechts. Ab 640px laeuft die Karte quer, dort greift wieder das Quadrat (Block unten). */ .tpw-start-shop .tpw-start-pthumb { aspect-ratio: 4 / 3; } .tpw-start-split .tpw-start-split-media img { min-height: 240px; } /* Im Umbruch steht das Bild oben, der Text darunter. */ .tpw-start-split .tpw-start-split-media { order: -1; } } @media (max-width: 640px) { /* MOBILE HEROHOEHE = GENAU DER SICHTBARE RAUM (User-Entscheid 2026-08-06). * * Vorher standen hier Schaetzwerte (64vh, dann 74vh). Beide waren gegenueber * dem sichtbaren Raum entweder zu kurz (weisser Streifen ueber der * Bottom-Nav) oder zu lang (der Hero lief unter die Leiste). Jetzt wird der * Raum ausgerechnet statt geraten: * * sichtbar = Viewport − Kopfzeile − Bottom-Navigation * = 100svh − 84px − (70px + safe-area-inset-bottom) * * WOHER DIE ZWEI KONSTANTEN KOMMEN (beide in css/rahmen.css, Abschnitt 4/2): * 84px Fluss-Hoehe von `.tpw-head`. Der Wert ist HIER richtig und nicht * 60px, weil der Kopf oben am Dokument immer im Ruhezustand steht — * und weil `.tpw-head` seine Fluss-Hoehe NIE aendert: beim Scrollen * schrumpft nur das Band `.tpw-head-bar` darin (Variante C, genau * damit der Inhalt nicht springt). Der Hero beginnt also stets bei 84. * 70px Hoehe von `.tpw-bottomnav` (1px Linie + 8 + 53 + 8), plus derselbe * `env(safe-area-inset-bottom)`, den die Leiste selbst anhaengt. * Aendert sich eine der beiden Hoehen, MUSS dieser Wert mitgezogen werden — * darum stehen die Quellen hier namentlich. * * WARUM svh UND NICHT dvh/vh: * · `dvh` waere die „richtige" dynamische Hoehe, resized aber beim Scrollen * mit der ein- und ausfahrenden Browserleiste — der Hero waere waehrend * der Wischbewegung dauernd in Bewegung. Das verbietet Rahmen 8. * · `vh` ist auf iOS die GROSSE Hoehe (Leiste eingeklappt gedacht): der * Hero waere im Ruhezustand zu hoch und liefe unter die Bottom-Nav. * · `svh` ist die KLEINE, stabile Hoehe (Leiste ausgeklappt). Der Hero passt * damit im ungenstigsten Zustand exakt und wird beim Einklappen der * Leiste nur groosszuegiger — nie zu klein, und er bewegt sich nicht. * * WARUM `min-height` UND NICHT `height` — das IST das Sicherheitsnetz: * Auf sehr niedrigen Viewports (kurzes Geraet, Querformat) reicht der * errechnete Raum fuer den Textblock nicht. Mit `height` wuerde der Text * ueberlaufen oder abgeschnitten; mit `min-height` waechst der Hero einfach * mit seinem Inhalt. Der Fehlerfall ist damit „Hero etwas hoeher als der * Bildschirm, man scrollt ein Stueck" — nie abgeschnittener Text. Es braucht * dafuer KEINE zweite, geratene Untergrenze. * Nachgerechnet: der Textblock braucht ~296px (Eyebrow 16, Headline 2 Zeilen * ~71, Lead 3 Zeilen ~93 inkl. Vorabstand, Knopf 22+46, Polster 2x24). * 390x844 → 844−84−70 = 690px ⇒ min-height greift, ~394px reines Foto * 320x568 → 568−84−70 = 414px ⇒ min-height greift, ~118px Foto * Querformat 640x360 → 206px ⇒ Inhalt gewinnt, Hero wird ~296px hoch * * Der Rueckfall in der ersten Zeile ist fuer Browser ohne `svh` (dort bleibt * es beim alten vh-Verhalten, aber mit der richtigen Rechnung). */ .entry-content .tpw-start-hero { min-height: calc(100vh - 84px - 70px - env(safe-area-inset-bottom, 0px)); min-height: calc(100svh - 84px - 70px - env(safe-area-inset-bottom, 0px)); } .tpw-start-aktuell .tpw-start-aktuell-inner { display: block; } /* Mobil steht das Bild ueber dem Text, aber bewusst NICHT randlos-breit: das Band ist ein Hinweis, kein Bildband. */ .tpw-start-aktuell .tpw-start-aktuell-bild { width: 100%; max-width: 260px; aspect-ratio: 16 / 9; margin-bottom: 18px; } .tpw-start-aktuell .tpw-start-aktuell-cta { margin-top: 20px; } .tpw-start-shop .tpw-start-pshop { flex-direction: row; } /* Bildzone laeuft ueber die volle Kartenhoehe: der Zeilen-Flex streckt sie (stretch), damit die trennende Haarlinie durchlaeuft und unter der Zone keine tote weisse Ecke bleibt. aspect-ratio:1 wirkt dadurch nur noch als Untergrenze — es haelt die Karte quadratisch, wenn der Textteil kuerzer als die Bildbreite ausfaellt. */ .tpw-start-shop .tpw-start-pthumb { flex: 0 0 38%; /* Holt das Quadrat der allgemeinen Regel zurueck, das der 900px-Block fuer die einspaltige Hochkant-Karte auf 4:3 gesetzt hat. */ aspect-ratio: 1; border-bottom: 0; /* Quer laufende Karte: die Kante steht rechts — gleiche Staerke wie im Hochformat, weil die weisse Bildflaeche an den weissen Koerper stoesst. */ border-right: 1px solid var(--tpw-linie-stark); /* Kleinere Zone, kleinerer Innenabstand: 8px statt der 12px von Desktop. */ padding: 8px; } .tpw-start-shop .tpw-start-pbody { padding: 15px 17px; } .tpw-start-termine .tpw-start-tcard { padding: 20px 21px; gap: 16px; } } @media (max-width: 420px) { .entry-content .tpw-start-portraits { gap: 15px; } .tpw-start-portraits .tpw-start-pname { font-size: 1.02rem; } } /* PFOTEN-SCROLLHINWEIS EINSCHALTEN — mobil, aber erst ab 360px Breite. * * OBERE GRENZE 640px: dort ist der Hero bildschirmfuellend und die Bottom-Nav * steht (Begruendung bei der Komponente, Abschnitt 4a). * * UNTERE GRENZE 360px — nachgemessen, kein Bauchgefuehl: der Hinweis sitzt * rechts auf Hoehe des CTA-Knopfes, und dieser Knopf SCHRUMPFT NICHT. Seine * Breite kommt aus seinem Text („Unsere Tiere kennenlernen") und liegt fest bei * 254,4px. Bei 320px Viewport bleiben neben ihm nur 17,6px — der 24px breite * Hinweis lag dort 6,4px UEBER dem Knopf (im DOM gemessen bei 320x568). Genau * das darf er nicht: er ist Deko und nimmt einem Bedienelement nichts weg. * * Die Schwelle rechnet sich so: * Knopf-Rechtskante 278,4 + 16 Mindestluft + 24 Hinweis = 318,4 * + 24px Inhaltskante rechts = 342,4px Viewport * 360px ist der naechste runde Wert darueber und laesst 33,6px Luft. Er trifft * praktisch alle heutigen Geraete (iPhone SE2/3 = 375, kleine Android = 360); * nur die 320px-Klasse (iPhone SE der 1. Generation) bekommt den Hinweis nicht. * Das ist die richtige Degradierung: der Hinweis ist eine Zugabe, der Knopf ist * die Funktion. Wird der Knopftext einmal kuerzer, darf die Schwelle sinken — * die Rechnung dafuer steht hier. * * Die Regel steht NACH dem 640px-Block, damit sie bei gleicher Spezifitaet * (0,2,0) gegen die Grundhaltung `display: none` aus Abschnitt 4a gewinnt. */ @media (min-width: 360px) and (max-width: 640px) { .tpw-start-hero .tpw-start-hero-scroll { display: block; } } /* ===================================================================== * 13. PREFERS-REDUCED-MOTION (Rahmen 8) * Crossfade-Rueckfall: nur das erste Bild statisch, kein Wechsel. Keine * Hover-Lifts, keine Pfeil-Bewegung. * ===================================================================== */ @media (prefers-reduced-motion: reduce) { .tpw-start-hero .tpw-start-hero-bild { animation: none; opacity: 0; } /* PFOTEN-SCROLLHINWEIS: komplett aus, nicht bloss angehalten. Seine ganze Aussage steckt in der Bewegung — drei still stehende Abdruecke in der Ecke sagen nichts, sie sind nur ein Fleck im Bild. Gleiche Spezifitaet wie die Einschaltregel im 640px-Block (0,2,0); dieser Abschnitt steht im Stylesheet DAHINTER und gewinnt darum — dieselbe Auslegung wie beim Crossfade oben. */ .tpw-start-hero .tpw-start-hero-scroll { display: none; } .tpw-start-hero .tpw-start-hero-bild:first-of-type { opacity: 1; } .tpw-start-portraits .tpw-start-pcard, .tpw-start-termine .tpw-start-tcard, .tpw-start-shop .tpw-start-pshop, .entry-content .tpw-start-kante a::after { transition: none; } .tpw-start-portraits .tpw-start-pcard:hover, .tpw-start-termine .tpw-start-tcard:hover, .tpw-start-shop .tpw-start-pshop:hover { transform: none; } .entry-content .tpw-start-kante a:hover::after { transform: none; } }