/** * rahmen.css - Kopfzeile, Bottom-Navigation, Fusszeile * * Inkrement 2 des Design-Refreshs. Umsetzung von * local-restore/design-mocks/rahmen-final.html (header.top, nav.bottomnav, * footer.site) auf die WordPress-Struktur. Die Werte sind aus dem Mock * uebernommen; die Farben/Radien/Linien kommen aus den Tokens in style.css * (Abschnitt 1), es wird KEIN Farbwert neu erfunden. * * Warum eine eigene Datei und nicht style.css: * 1. Kopf-/Fusszeile sind ein abgeschlossenes Bauteil - so bleibt style.css * (bereits 45 kB, streng gegliedert) uebersichtlich. * 2. Die Datei wird NACH style.css eingebunden und gewinnt darum bei * gleicher Spezifitaet gegen die aelteren Header-/Footer-/Navigations- * Abschnitte 3, 4 und 12 - ohne dass dort ueberall Spezifitaet * hochgeschraubt oder !important gesetzt werden muss. * * INHALT * 1. Kopfzeile (sticky, Logo, Topnav, Dropdowns, CTA) * 2. Bottom-Navigation (mobil, kein Burger) * 3. Fusszeile (Markenblock, Menue-Spalten, Silhouette, Schlusszeile) * 4. Umschaltpunkt Desktop/Mobil und Feinschliff * 5. Brotkrumen-Leiste (site-weit, Markup in inc/breadcrumb.php) * 6. Paginierung (site-weit, EINE Optik fuer alle vier Markup-Formen) * * Alt-Regeln, die hier bewusst ueberschrieben werden: * style.css 4 - .site-header (Rahmen/Hintergrund), #logo (max-width 14rem) * style.css 12 - #footer (Vollgruen -> --tpw-ink laut Mock) * poseidon - .site-header, .primary-navigation, Burger-Toggle */ /* ===================================================================== * 1. KOPFZEILE * ===================================================================== */ /* Sticky "dezent": kein Schatten, keine Groessenanimation, nur eine * Haarlinie und eine fast deckende weisse Flaeche (Rahmen 8: nichts * springt oder kippt). Poseidons JS-Sticky-Header ist abbestellt, siehe * inc/navigation.php. * * DECKKRAFT (User-Review): mit rgba(...,.9) schoben sich beim Scrollen grosse * dunkle Headlines als lesbarer Schatten durch das Band - der Weichzeichner * allein reicht dagegen nicht, weil er die Flaeche nur unscharf, nicht heller * macht (nachgemessen mobil bei 390px: Headline "Die Tiere" war unter dem * Logo klar zu erkennen). Mit .97 verschwindet das Durchscheinen, die Flaeche * bleibt aber transluzent genug, dass Fotos unter der Kante noch einen Hauch * Farbe abgeben. Der Weichzeichner bleibt als zweite Stufe. */ .tpw-head { position: sticky; top: 0; z-index: 60; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--tpw-linie); -webkit-backdrop-filter: saturate(1.15) blur(8px); backdrop-filter: saturate(1.15) blur(8px); } /* Ohne backdrop-filter (aeltere Browser) faellt die zweite Stufe weg - dann * traegt die Flaeche allein, und die drei Restprozent Transparenz waeren die * Stelle, an der wieder Inhalt durchschiene. Darum dort volldeckendes Weiss. */ @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .tpw-head { background: #fff; } } /* --- ADMIN-BAR: Sticky-Kante nachziehen (betrifft nur Angemeldete) --- * * Die WordPress-Werkzeugleiste liegt FIXIERT ueber allem (z-index 99999 gegen * unsere 60). Ohne Versatz klebt die Kopfzeile beim Scrollen an top:0 und * verschwindet zur Haelfte darunter. Der frueher hier stehende harte Wert * `top: 32px` war an zwei Stellen falsch, weil die Leiste drei Zustaende hat * (wp-includes/css/admin-bar.css): * * Viewport Hoehe Verhalten * >= 783px 32px position:fixed -> Versatz 32px * 601-782px 46px position:fixed -> Versatz 46px (war falsch: 32px) * <= 600px 46px position:ABSOLUT -> SCROLLT WEG -> Versatz 0 * * Der dritte Fall ist die Falle: unter 600px ist die Leiste nicht fixiert, * sondern liegt absolut an der Dokument-Oberkante und wandert beim Scrollen * mit hinaus. Ein stehengelassener Versatz haengte die Kopfzeile dort dauerhaft * 46px unter der Oberkante - ein sichtbarer weisser Spalt auf jedem * Admin-Telefon. Darum ist der Grundwert 0 und der Versatz wird erst ab 601px * dazugeschaltet, also genau dort, wo die Leiste wirklich fixiert ist. * * Ein Ueberlappen beim Rausscrollen gibt es unter 600px NICHT (der sonst * ueblliche Kompromiss entfaellt hier): die Leiste steht ausserhalb des * Flusses, den Platz macht `html{margin-top:46px !important}` (WordPress setzt * das als Inline-Style, siehe wp_enqueue_admin_bar_bump_styles). Die Kopfzeile * beginnt also 46px unter der Dokument-Oberkante und erreicht ihre * Sticky-Kante erst bei Scroll 46 - genau dann, wenn die Leiste vollstaendig * hinausgescrollt ist. Beides trifft sich, ohne sich zu ueberdecken. * * Gemessen wird nicht selbst, sondern die Variable genommen, die WordPress * dafuer bereitstellt (--wp-admin--admin-bar--height, auf , seit 6.4). * Die Fallbacks sind nicht dekorativ: faellt die Variable aus (aeltere * WordPress-Version, Plugin, das admin-bar.css ersetzt), traegt der Fallback - * und er muss darum je Breakpoint der ECHTEN Leistenhoehe entsprechen, sonst * waere die Ausfallvariante wieder der alte Fehler. Deshalb die zweite, * engere Abfrage mit Fallback 46px. * * Gilt fuer BEIDE Kopf-Varianten: `.tpw-head` ist ueber und unter 960px * dasselbe sticky Element, der Versatz sitzt also nur an einer Stelle. * js/kopf.js bleibt unberuehrt - die Schwellen-Marker haengen an der * Dokument-Oberkante (initialer umgebender Block), den `html{margin-top}` der * Werkzeugleiste nicht verschiebt; 60/40 bleiben also 60/40 in scrollY. */ .admin-bar .tpw-head { top: 0; } @media screen and (min-width: 601px) { .admin-bar .tpw-head { top: var(--wp-admin--admin-bar--height, 32px); } } @media screen and (min-width: 601px) and (max-width: 782px) { .admin-bar .tpw-head { top: var(--wp-admin--admin-bar--height, 46px); } } /* --- Schwellen-Marker fuer den mobilen Kopf (Variante C) --- * * Zwei unsichtbare Nullflaechen an der Dokument-Oberkante. js/kopf.js legt auf * jede einen IntersectionObserver; die HOEHE des Markers IST die Schwelle, denn * ein Marker verlaesst den Viewport genau dann, wenn so weit gescrollt wurde. * Zwei verschiedene Hoehen ergeben die Hysterese: * .tpw-kopf-marker-an 60px -> ab Scroll 60 wird kompakt geschaltet * .tpw-kopf-marker-aus 40px -> erst unter Scroll 40 wieder zurueck * Zwischen 40 und 60 bleibt der Zustand stehen, ein zitternder Finger auf der * Schwelle loest also keine Kette von Uebergaengen aus. * * Die Werte stehen ABSICHTLICH hier und nicht im Skript: sie gehoeren zu den * Maßen des Kopfes (Abschnitt 4), nicht zur Mechanik. * * Bewusst KEIN display:none und kein visibility:hidden - beides nimmt dem * Element die Geometrie bzw. macht die Beobachtung unzuverlaessig. Die Marker * sind schlicht leer, 1px breit und ohne Flaeche, also unsichtbar; sie stehen * absolut und ausserhalb des Flusses, koennen also nichts verschieben. Der * Wrapper ist 0x0 - die Kinder ragen absichtlich heraus (overflow bleibt * visible), das erzeugt keinen Ueberlauf, weil absolut positionierte Kinder * eines 1px breiten Kastens am linken Rand keine Scrollweite hinzufuegen. * Das Markup steht in header.php direkt unter . */ .tpw-kopf-marker { position: absolute; top: 0; left: 0; width: 0; height: 0; pointer-events: none; } .tpw-kopf-marker > span { display: block; position: absolute; top: 0; left: 0; width: 1px; } .tpw-kopf-marker-an { height: 60px; } .tpw-kopf-marker-aus { height: 40px; } .tpw-head-bar { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 74px; max-width: 1280px; /* = Poseidons .container, damit Kopf und Inhalt fluchten */ margin: 0 auto; padding: 0 2em; } /* --- Langes Logo mit Schriftzug (Rahmen-Konstante) --- */ .tpw-brand { display: flex; align-items: center; flex: 0 0 auto; max-width: 260px; text-decoration: none; } /* Der Selektor traegt bewusst BEIDE Klassen (.tpw-brand .tpw-brand-logo): * WooCommerce liefert '.woocommerce img, .woocommerce-page img { height:auto }' * (Spezifitaet 0,1,1) - eine einfache Klasse (0,1,0) verliert dagegen, und zwar * unabhaengig von der Ladereihenfolge. Ohne diese Stufe zieht das Logo auf * allen Shop-/Kassen-/Konto-Seiten auf die volle Breite des Markenblocks * (260 x 83 px statt 165 x 52 px) und sprengt die Kopfzeile. Kein !important * noetig, nur eine Klasse mehr. */ .tpw-brand .tpw-brand-logo { display: block; width: auto; height: 52px; max-width: 100%; object-fit: contain; } /* Textfallback, falls im Customizer kein Logo gesetzt ist. */ .tpw-brand-text { display: block; font-weight: 800; font-size: 1.05rem; line-height: 1.15; letter-spacing: -.01em; color: var(--tpw-ink); } .tpw-brand-text small { display: block; font-size: .7rem; font-weight: 500; letter-spacing: .04em; color: var(--tpw-ink-soft); } /* --- Topnav --- */ .tpw-topnav { flex: 1 1 auto; display: flex; justify-content: center; } .tpw-topnav-menu, .tpw-topnav-menu ul { list-style: none; margin: 0; padding: 0; } .tpw-topnav-menu { display: flex; align-items: center; gap: 2px; } .tpw-topnav-menu > li { position: relative; margin: 0; } .tpw-topnav-menu > li > a { display: flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: var(--r-btn); font-weight: 600; font-size: .96rem; line-height: 1.2; color: var(--tpw-ink); text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease; } .tpw-topnav-menu > li > a:hover, .tpw-topnav-menu > li > a:focus { background: var(--tpw-surface); color: var(--tpw-gruen-dunkel); text-decoration: none; } /* Aktiv-Zustand Desktop (Rahmen 13): Flaeche --tpw-surface + Text * --tpw-gruen-dunkel, identisch zum Hover, darum KEIN zusaetzlicher Marker * (kein Balken, keine Unterstreichung). */ .tpw-topnav-menu > li.current-menu-item > a, .tpw-topnav-menu > li.current-menu-parent > a, .tpw-topnav-menu > li.current-menu-ancestor > a, .tpw-topnav-menu > li.current_page_item > a, .tpw-topnav-menu > li.current_page_parent > a, .tpw-topnav-menu > li.current_page_ancestor > a { background: var(--tpw-surface); color: var(--tpw-gruen-dunkel); } /* Chevron an Punkten mit Dropdown - aus der SVG-Familie (Rahmen 10), als * Maske, damit es die Textfarbe uebernimmt. Kein Glyphen-Dreieck. */ .tpw-topnav-menu > li.menu-item-has-children > a::after { content: ""; width: 10px; height: 10px; flex: 0 0 auto; background-color: currentColor; -webkit-mask-image: var(--tpw-ic-chevron); mask-image: var(--tpw-ic-chevron); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; transform: rotate(90deg); transition: transform .25s ease; } .tpw-topnav-menu > li.menu-item-has-children:hover > a::after, .tpw-topnav-menu > li.menu-item-has-children:focus-within > a::after { transform: rotate(90deg) translateX(2px); } /* --- Dropdown (Depth 2) --- */ .tpw-topnav-menu .sub-menu { position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px; background: #fff; border: 1px solid var(--tpw-linie-mittel); border-radius: var(--r-card); box-shadow: var(--tpw-shadow-soft); opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .22s ease, transform .22s ease, visibility .22s; z-index: 70; } .tpw-topnav-menu > li:hover > .sub-menu, .tpw-topnav-menu > li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; } /* Letzte Punkte oeffnen nach links, damit das Dropdown nicht aus dem * Viewport laeuft. */ .tpw-topnav-menu > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; } .tpw-topnav-menu .sub-menu li { margin: 0; } .tpw-topnav-menu .sub-menu a { display: block; padding: 9px 12px; border-radius: var(--r-btn); font-weight: 600; font-size: .92rem; color: var(--tpw-ink); text-decoration: none; transition: background-color .2s ease, color .2s ease; } .tpw-topnav-menu .sub-menu a:hover, .tpw-topnav-menu .sub-menu a:focus { background: var(--tpw-surface); color: var(--tpw-gruen-dunkel); text-decoration: none; } .tpw-topnav-menu .sub-menu li.current-menu-item > a, .tpw-topnav-menu .sub-menu li.current_page_item > a { background: var(--tpw-surface); color: var(--tpw-gruen-dunkel); } /* Tastatur-Fokus wie im Fundament: gruene Kontur + Halo (Rahmen 12). */ .tpw-topnav-menu a:focus-visible, .tpw-head-cta:focus-visible, .tpw-head-ort:focus-visible, .tpw-bottomnav-link:focus-visible { outline: 2px solid var(--tpw-gruen); outline-offset: 2px; box-shadow: var(--tpw-fokus-halo); } /* --- Anfahrts-Kurzweg (Icon-Knopf, NUR mobil) --- * Grundzustand ist "nicht da": ueber 960px tragen Topnav und der CTA * "Tieren helfen" die Kopfzeile. Eingeschaltet wird das Element erst im * mobilen Abschnitt 4 - so bleibt der Desktop-Kopf unberuehrt, auch wenn * das Markup auf jeder Seite mitgeliefert wird. */ .tpw-head-ort { display: none; } /* --- CTA rechts (gefuellt #557000, Rahmen 7 + CI-Guide-Entscheid) --- */ .tpw-head-cta { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px; border: 1.5px solid var(--tpw-gruen-dunkel); border-radius: var(--r-btn); background: var(--tpw-gruen-dunkel); color: #fff; font-family: inherit; font-weight: 700; font-size: .95rem; line-height: 1.2; white-space: nowrap; text-decoration: none; box-shadow: none; transition: background-color .25s ease, border-color .25s ease; } .tpw-head-cta:link, .tpw-head-cta:visited { color: #fff; } .tpw-head-cta:hover, .tpw-head-cta:focus, .tpw-head-cta:active { background: var(--tpw-gruen-tief); border-color: var(--tpw-gruen-tief); color: #fff; text-decoration: none; } /* Anker-Ziele duerfen nicht unter der Kopfzeile verschwinden. Ersetzt den * frueheren :target:before-Platzhalter-Hack aus style.css Abschnitt 4 * (der ein leeres Pseudo-Element in JEDES Anker-Ziel gehaengt hat). * * Der Summand fuer die Admin-Bar gehoert dazu, weil rahmen.css NACH * admin-bar.css geladen wird (die Werkzeugleiste wird auf `template_redirect` * eingereiht, also vor jedem wp_enqueue_scripts-Handle) und dessen * `html{scroll-padding-top:var(--wp-admin--admin-bar--height)}` bei gleicher * Spezifitaet damit verdrängt. Ohne den Summanden landeten Anker-Ziele fuer * Angemeldete um die Leistenhoehe zu hoch, also unter der Kopfzeile. * * Die Variable existiert NUR, solange admin-bar.css geladen ist, also nur im * angemeldeten Zustand. Abgemeldet greift der Fallback 0px und der Wert bleibt * exakt der bisherige - der Ausdruck ist fuer Besucher wirkungslos. */ html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 92px); } /* ===================================================================== * 2. BOTTOM-NAVIGATION (mobil) * * Rahmen-Konstante: mobile Bottom-Nav, KEIN Burger. Sichtbar erst unter dem * Umschaltpunkt (Abschnitt 4). * ===================================================================== */ .tpw-bottomnav { display: none; } /* Grundform der Icons steckt in style.css 14.7 (.tpw-ic). Hier nur die * Navigations-Groesse - .tpw-nav-ic ist die Zusatzklasse, die * inc/navigation.php an tpw_icon() uebergibt. */ .tpw-nav-ic { width: 24px; height: 24px; } /* --- GEFUELLTE VARIANTE DER ICON-FAMILIE (Rahmen 13, rev. 2026-08-05) --- * * Die Motive mit dem Suffix `-voll` (mu-plugins/tierpark-icons.php) zeichnen * ihre Silhouette als FLAECHE. Sie tragen den Aktiv-Zustand der mobilen * Bottom-Navigation. * * WARUM DIESE REGEL UEBERHAUPT NOETIG IST: `.tpw-ic` in style.css Abschnitt * 14.7 setzt `fill:none; stroke:currentColor` - und CSS gewinnt gegen die * Praesentations-Attribute im SVG. Ohne diese Regel waeren die gefuellten * Motive im Frontend unsichtbar (Flaeche none, Kontur ohne Pfad). * * ZWEI Klassen im Selektor, damit die Regel `.tpw-ic` unabhaengig von der * Ladereihenfolge der Stylesheets schlaegt (0,2,0 gegen 0,1,0) - style.css und * rahmen.css werden beide vom Child-Theme geladen, aber die Reihenfolge soll * hier keine Rolle spielen muessen. */ .tpw-ic.tpw-ic--voll { fill: currentColor; stroke: none; } /* ===================================================================== * 3. FUSSZEILE * ===================================================================== */ /* Mock: dunkler Grund (--tpw-ink) statt des frueheren Vollgruens. Der * Selektor traegt die ID, weil style.css Abschnitt 12 #footer einfaerbt. */ #footer.tpw-foot { background: var(--tpw-ink); color: rgba(255, 255, 255, .82); padding: 56px 0 0; } .tpw-foot-inner { position: relative; overflow: hidden; padding-bottom: 34px; } /* Vier Spalten: Markenblock + die drei Menue-Spalten aus dem Konzept (B.3). * Der Mock zeigt drei Spalten, weil er nur zwei Linklisten hatte. * * Verteilung neu justiert, nachdem das Spendenkonto aus der Fusszeile * entfernt wurde (User-Entscheid): die alte Aufteilung .9fr / 1.1fr / 1.15fr * gab der LETZTEN Spalte die meiste Breite, weil dort die IBAN in eine Zeile * musste. Jetzt ist der breiteste Inhalt die E-Mail-Adresse (207px) in Spalte 3 * ("Besuch & Kontakt"), die den Mail-Link traegt. Darum: Spalte 3 etwas * breiter, Spalten 2 und 4 gleich - ohne die IBAN gibt es keinen Grund mehr, * die letzte Spalte zu bevorzugen. * * Nachjustiert im Mini-Sprint: der Markenblock ist nach dem Wegfall von Claim * und Site-Description nur noch die Logo-Sperrung und braucht die frueheren * 1.35fr nicht mehr - die trugen den 34ch breiten Claimsatz. Mit 1fr steht die * Sperrung immer noch in einer Zeile pro Wortgruppe und die drei Linkspalten * bekommen die frei gewordene Breite. Das schafft zugleich rechts unten Raum * fuer das Silhouetten-Detail, das jetzt etwas groesser sein darf. */ .tpw-foot-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr 1.15fr 1fr; gap: 36px; } /* --- Markenblock --- */ .tpw-foot-brand { display: flex; align-items: center; gap: 13px; color: #fff; text-decoration: none; } .tpw-foot-brand:link, .tpw-foot-brand:visited, .tpw-foot-brand:hover { color: #fff; text-decoration: none; } /* Zweiklassig wie das Kopf-Logo: WooCommerces '.woocommerce-page img * { height:auto }' wuerde das Emblem sonst auf Shop-Seiten verzerren. */ .tpw-foot-brand .tpw-foot-mark { width: 52px; height: 52px; flex: 0 0 auto; padding: 5px; border-radius: 50%; /* Logo-Echo, laut Rahmen 6 zulaessig */ background: #fff; object-fit: contain; } /* Nur noch der Vereinsname neben dem Emblem. Die frueher hier verschachtelte * -Zeile mit der Site-Description und die Claimzeile .tpw-foot-claim * darunter sind auf User-Entscheid ERSATZLOS raus: beide wiederholten die * Unterzeile des langen Logos in der Kopfzeile, und der Claim stand als * einzelner Satz unter der Sperrung sichtbar verloren da (siehe footer.php). */ .tpw-foot-name { display: block; font-weight: 800; font-size: 1.02rem; line-height: 1.2; letter-spacing: -.01em; } /* --- Menue-Spalten --- */ .tpw-foot-col { min-width: 0; } /* Spaltentitel = Versal-Label (Rahmen 4: keine Unterstreichungen). Der * Selektor ist bewusst spezifischer als #footer h2 aus style.css 12. */ #footer.tpw-foot .tpw-foot-titel { margin: 0 0 14px; font-size: .78rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--tpw-gruen-hell); border-bottom: none; } .tpw-foot-links { list-style: none; margin: 0; padding: 0; } .tpw-foot-links li { margin: 0; } #footer.tpw-foot .tpw-foot-links a { display: block; padding: 4px 0; font-size: .94rem; color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s ease; } #footer.tpw-foot .tpw-foot-links a:hover, #footer.tpw-foot .tpw-foot-links a:focus { color: #fff; text-decoration: underline; } /* --- Soziale Kanaele als Icon-Reihe (rev. 2026-08-09, User-OK) --- * * Markup: inc/navigation.php, tpw_footer_sozial_reihe(). Die Reihe steht in * DERSELBEN Spalte wie die Textzeilen, direkt darunter — nicht am Markenblock: * der Spaltentitel "Besuch & Kontakt" beschriftet sie mit, und der Markenblock * ist auf User-Entscheid bewusst leer geraeumt (siehe footer.php) und traegt * rechts daneben das einzige Silhouetten-Detail der Seite (Rahmen 9) — drei * weitere Marken neben der Logo-Sperrung waeren genau die Unruhe, die dort * ausgeraeumt wurde. * * KEINE RUHEFLAECHE. Die Fusszeile traegt nirgends eine Flaeche; drei getoente * Kacheln waeren die ersten. Die Flaeche erscheint erst bei Hover, Fokus und * Druck — ein Mikro-Effekt nach Rahmen 8: kein Lift, kein Schatten, keine * Groessenaenderung. * * KEIN KREIS: 6px wie die Buttons-Skala (Rahmen 5), runde Form bleibt den * Tierportraits (Rahmen 6). Beruehrflaeche 40x40 bei 24px Motiv — dieselben * zwei Zahlen wie beim Anfahrts-Kurzweg der mobilen Kopfzeile (Rahmen 13). * * FARBWERTE: alles schon vorhanden. Motiv rgba(255,255,255,.82) wie die * Textzeilen daneben, Hover #fff wie deren Hover, Flaeche * rgba(255,255,255,.12) — der Wert der Haarlinie in .tpw-foot-note. Kontrast * des Motivs auf --tpw-ink gemessen 9,5:1 (verlangt sind 3:1 fuer Grafik). */ .tpw-foot-social { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; /* 10px unter der letzten Textzeile: deren Zeilen tragen 4px Polster, zusammen also 14px - derselbe Abstand, den der Spaltentitel nach unten haelt. Links -8px, damit die 40er-Beruehrflaeche des ersten Motivs optisch auf der Spaltenkante steht und nicht eingerueckt wirkt. */ margin: 10px 0 0 -8px; padding: 0; } .tpw-foot-social li { margin: 0; } /* Der Selektor traegt die ID, weil #footer aus style.css Abschnitt 12 faerbt - dieselbe Begruendung wie bei .tpw-foot-links a darueber. */ #footer.tpw-foot .tpw-foot-social-link { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border-radius: var(--r-btn); background: transparent; color: rgba(255, 255, 255, .82); text-decoration: none; transition: color .2s ease, background-color .2s ease; } #footer.tpw-foot .tpw-foot-social-link:hover, #footer.tpw-foot .tpw-foot-social-link:focus, #footer.tpw-foot .tpw-foot-social-link:active { background: rgba(255, 255, 255, .12); color: #fff; /* Die Textzeilen unterstreichen im Hover - ein Icon kann das nicht, und ein Unterstrich unter einem Motiv waere ein Strich zu viel. Die Flaeche sagt hier dasselbe. */ text-decoration: none; } /* 24px-Box statt der 22px der Familie (Beruehrgroesse), darum STRICHSTAERKE 1,55 - Rahmen 10, rev. 2026-08-05: "wird ein Motiv in einer anderen Box als 22px gesetzt, wird die Strichstaerke mitskaliert (1,7 x 22 / Boxgroesse)". 1,7 x 22/24 = 1,558. Ohne das staenden die drei Motive eine Stufe fetter da als jedes andere Icon der Seite - auf dem dunklen Grund faellt das zusaetzlich auf, weil helle Striche optisch auftragen. Gleicher Wert wie in der Bottom-Navigation. */ #footer.tpw-foot .tpw-foot-social-link .tpw-ic { width: 24px; height: 24px; stroke-width: 1.55; } /* Hier stand die Sonderbehandlung der Vereins-E-Mail (.tpw-foot-mail: Abstand * und Umbruchschutz fuer die 207px breite Adresse). Auf User-Entscheid ist die * Mailadresse aus der Fusszeile ERSATZLOS entfernt - Kontakt laeuft ueber den * Menuepunkt zur Kontaktseite. Damit entfaellt dieses CSS, wie zuvor schon * .tpw-foot-static, .tpw-foot-static-zeile, .tpw-foot-static-label und * .tpw-foot-iban-label. Die Spalten enthalten jetzt nur noch Menue-Links, die * .tpw-foot-links a vollstaendig abdeckt. */ /* --- Silhouetten-Detail: GENAU EINMAL, dezent (Rahmen 9) --- * * Etwas groesser und weniger angeschnitten als frueher (190px, right:-10px): * die Fusszeile hat nach dem Entschlacken des Markenblocks weniger Text zu * tragen, das Detail darf den frei gewordenen Raum rechts unten fuellen. Die * Deckkraft bleibt bei .09 - es bleibt ein Detail, keine Bildflaeche. */ .tpw-foot-sil { position: absolute; right: -4px; bottom: 30px; width: 210px; height: 210px; z-index: 0; pointer-events: none; background-color: var(--tpw-gruen-hell); opacity: .09; -webkit-mask-image: url("../images/emblem-maske.png"); mask-image: url("../images/emblem-maske.png"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* --- Schlusszeile --- */ .tpw-foot-note { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: .82rem; color: rgba(255, 255, 255, .55); } .tpw-foot-formal-menu { display: flex; flex-wrap: wrap; align-items: center; gap: 0; list-style: none; margin: 0; padding: 0; } .tpw-foot-formal-menu li { margin: 0; display: flex; align-items: center; } /* Separator als Haarlinie, nicht als Glyphe. */ .tpw-foot-formal-menu li + li::before { content: ""; width: 1px; height: 11px; margin: 0 12px; background: rgba(255, 255, 255, .22); } #footer.tpw-foot .tpw-foot-formal-menu a { display: inline-block; padding: 2px 0; font-size: .82rem; color: rgba(255, 255, 255, .6); text-decoration: none; transition: color .2s ease; } #footer.tpw-foot .tpw-foot-formal-menu a:hover, #footer.tpw-foot .tpw-foot-formal-menu a:focus { color: #fff; text-decoration: underline; } /* ===================================================================== * 4. UMSCHALTPUNKT DESKTOP / MOBIL * * Der Mock schaltet bei 640px um. Mit dem ECHTEN langen Logo und den fuenf * deutschen Labels braucht die Kopfzeile deutlich mehr: * Logo 164 + Menue 566 + CTA 156 + 2x19 Rand + 2x18 Abstand = 960px. * Gemessen an der lokalen Instanz: bei 865px Viewport laeuft die Kopfzeile auf * 953px Dokumentbreite und erzeugt einen horizontalen Ueberlauf der GANZEN * Seite. Der Umschaltpunkt liegt darum bei 960px: darunter verschwindet die * Topnav vollstaendig und die Bottom-Navigation uebernimmt - kein Burger als * Zwischenstufe (Rahmen-Konstante). * ABWEICHUNG VOM MOCK-WERT (640px) - im Log vermerkt, User-Bestaetigung offen. * ===================================================================== */ @media screen and (max-width: 960px) { .tpw-topnav { display: none; } /* MOBILE MARKENZEILE - "Variante A: ruhige Markenzeile" (User-Entscheid), * seit 2026-08-04 zusaetzlich "VARIANTE C: gross oben, schrumpft beim * Scrollen" (User-OK; Referenz local-restore/design-mocks/header-mobil/ * variante-c-oben.png + variante-c-scroll.png). * * Variante A bleibt die Grundform: vorher stand das Logo links und der CTA * "Besuch buchen" rechts. Der Button ist mobil RAUS: "Besuch" ist ein * eigener Punkt der Bottom-Navigation, der Kopf sagte also dasselbe ein * zweites Mal und zwang das Logo in die linke Ecke. Uebrig bleibt eine * Zeile, die nur die Marke traegt - Logo exakt in der Mitte. * * Zentriert wird ueber absolute Positionierung im relativ gesetzten Band * (translate(-50%,-50%)) und NICHT ueber margin:auto im Flex-Fluss: nur so * sitzt das Logo auf der echten Viewport-Mitte, unabhaengig davon, ob links * oder rechts noch etwas steht (im Mock verifiziert, Mitten-Abweichung 0px). * Die Bandhoehe muss darum gesetzt bleiben, weil kein Kind mehr im Fluss * steht und das Band sonst zusammenfaellt. * * NEU an Variante C sind zwei Zustaende statt einem: * oben Kopf 84px, Logo 173px breit - die Marke bekommt Auftritt * kompakt Kopf 60px, Logo 132px breit + Schattenkante - Platz fuer Inhalt * Umgeschaltet wird ueber die Klasse .tpw-head-kompakt auf , gesetzt * von js/kopf.js (Marker + IntersectionObserver, Hysterese 60/40 - Begruendung * dort und bei .tpw-kopf-marker in Abschnitt 1). * * --------------------------------------------------------------------- * WARUM WRAPPER UND BAND HIER DIE ROLLEN TAUSCHEN (Layout-Sprung) * * Die Kopfzeile ist sticky, also IM FLUSS. Wuerde .tpw-head selbst von 84 * auf 60px schrumpfen, wanderte im Umschaltmoment der gesamte restliche * Seiteninhalt um 24px nach oben - und zwar zusaetzlich zur laufenden * Scrollbewegung. Das ist genau der Sprung, den Rahmen 8 verbietet, und er * ist beim Wischen deutlich sichtbar (der Inhalt "ueberholt" den Finger). * * Loesung: die Fluss-Hoehe wird festgenagelt und nur die Optik schrumpft. * .tpw-head = 84px hoher, VOELLIG TRANSPARENTER Sticky-Wrapper. * Seine Hoehe aendert sich nie, der Fluss bleibt ruhig. * .tpw-head-bar = das sichtbare Band. Es traegt ab hier Flaeche, Linie * und Weichzeichner (im Desktop-Fall sitzen die am * Wrapper) und schrumpft 84 -> 60px. * Unterhalb des kompakten Bandes bleiben 24px des Wrappers uebrig, durch * die der Inhalt sichtbar durchlaeuft - genau wie bei jedem ueberlagernden * Kopf. Damit dieser transparente Streifen keine Klicks abfaengt, bekommt * der Wrapper pointer-events:none und das Band pointer-events:auto zurueck. * Der Wrapper ist das einzige Kind-Element, es geht also nichts verloren. * * Verworfene Alternativen: (a) sticky nur am Band - sticky ist auf den * Kasten des Vorfahren begrenzt, das Band bliebe im 84px-Wrapper stecken; * (b) .tpw-head fixed + Spacer-Element - dasselbe Ergebnis mit einem * zusaetzlichen Element und einer zweiten Hoehe, die synchron zu pflegen * waere; (c) Sprung in Kauf nehmen - siehe oben. * --------------------------------------------------------------------- * * Seitliche Safe-Areas auch im Kopf: im Querformat liegt das Notch links * oder rechts (Inset bis 44px). Fallback 0px, damit die Deklaration ohne * env()-Support nicht komplett ausfaellt. */ .tpw-head { height: 84px; background: none; border-bottom: 0; -webkit-backdrop-filter: none; backdrop-filter: none; pointer-events: none; } /* Alle Hoehen sind border-box-Werte (poseidon/style.css setzt * html{box-sizing:border-box} und vererbt es auf alles): 84px = 83px Band * + 1px Linie, kompakt 60px = 59px + 1px. Genau die Maße aus dem Mock. */ .tpw-head-bar { position: relative; height: 84px; padding-top: 0; padding-right: calc(1.2em + env(safe-area-inset-right, 0px)); padding-bottom: 0; padding-left: calc(1.2em + env(safe-area-inset-left, 0px)); gap: 12px; justify-content: space-between; background: rgba(255, 255, 255, .97); border-bottom: 1px solid var(--tpw-linie); -webkit-backdrop-filter: saturate(1.15) blur(8px); backdrop-filter: saturate(1.15) blur(8px); pointer-events: auto; } /* Gleiche Begruendung wie bei .tpw-head in Abschnitt 1: ohne * backdrop-filter traegt die Flaeche allein, dann muss sie volldeckend * sein, sonst schiebt sich eine dunkle Headline durch das Band. */ @supports not ((backdrop-filter: blur(8px)) or (-webkit-backdrop-filter: blur(8px))) { .tpw-head-bar { background: #fff; } } /* Der kompakte Zustand. Die Schattenkante ist der einzige Schatten im * ganzen Rahmen (Rahmen 7 verbietet Versatz-/Effektschatten AN BAUTEILEN); * sie ist hier kein Effekt, sondern die Kante, die das ueberlagernde Band * vom durchlaufenden Inhalt trennt - 8px weich, 8% schwarz, kein Versatz * ausser 1px nach unten. Im Ruhezustand oben gibt es sie nicht, dort * genuegt die Haarlinie. */ .tpw-head-kompakt .tpw-head-bar { height: 60px; box-shadow: 0 1px 8px rgba(0, 0, 0, .08); } .tpw-head-cta { display: none; } /* ANFAHRTS-KURZWEG oben rechts (User-OK 2026-08-05). * * Ein einzelnes Ziel, kein zweites: "Anfahrt" ist die Frage, die auf einem * Telefon vor Ort zaehlt, und sie steht sonst nur zwei Ebenen tief unter * "Besuch". Alles andere bleibt der Bottom-Navigation. * * NACH RECHTS ueber margin-left:auto und nicht ueber justify-content: mobil * ist dieser Knopf das EINZIGE Kind im Fluss (Topnav und CTA sind * ausgeblendet, die Marke steht absolut). Ein einzelnes Flex-Kind landet bei * space-between am linken Rand; der automatische Rand links schluckt den * freien Platz und schiebt es an die rechte Kante - unabhaengig davon, was * justify-content gerade sagt. * * DIE MARKE VERSCHIEBT ER NICHT: .tpw-brand ist absolut positioniert und * bezieht sich auf das Polsterkaestchen des Bandes, nicht auf den * Flex-Fluss. Ein Kind mehr oder weniger im Fluss aendert daran nichts - * nachgemessen bleibt die Mitten-Abweichung in beiden Zustaenden 0px. * * SENKRECHT MITTIG IN BEIDEN ZUSTAENDEN, OHNE EIGENE ANIMATION: das Band * traegt align-items:center, der Abstand oben ist also (Bandhoehe - 40) / 2 * und faellt mit der animierten Bandhoehe Bild fuer Bild von 22 auf 10px. * Eine Transition auf dem Icon waere hier sogar schaedlich - sie liefe der * Bandhoehe hinterher und das Icon zappelte. Dieselbe Ueberlegung wie bei * top:50% der Marke. * * SAFE-AREA rechts ist schon erledigt: der Knopf sitzt INNERHALB des * Polsters des Bandes, und das traegt bereits * calc(1.2em + env(safe-area-inset-right)). Im Querformat rutscht er also * mit dem Polster nach innen, ohne eine zweite env()-Rechnung. * * 40x40 Beruehrflaeche bei 24px Motiv (wie die Bottom-Navigation) - deutlich * ueber der 24px-Mindestgroesse, und im kompakten 60px-Band bleiben oben und * unten noch 10px. * * EINFASSUNG "V1b" (User-Entscheid 2026-08-05, Referenzbild * design-mocks/header-mobil/ort-v1b-flaeche-radius6.png): der Knopf bekommt * die sanfte Flaeche --tpw-gruen-flaeche (#eff7e8) unter den bereits * gesetzten 6px-Ecken. Damit ist er als Bedienelement erkennbar, ohne zu * dominieren: #eff7e8 auf Weiss ist derselbe zarte Flaechenwechsel, der auch * die Baender der Seite gliedert (Rahmen 1) - kein gefuellter CTA und kein * Rahmen. Die Ecken bleiben QUADRATISCH mit 6px (Rahmen 5/14): der Knopf ist * damit formgleich mit der Play-/Medien-Marke, und runde Formen bleiben * ausschliesslich den Tierportraits (Rahmen 6) - die zuvor gezeigte * Kreisflaeche (ort-v1-kreisflaeche.png) ist genau deshalb verworfen. Die * Motivfarbe bleibt --tpw-gruen-dunkel, Hover/Fokus weiter * --tpw-gruen-tief. * * Die vorherige Fassung war flaechenlos ("nur Textfarbe wie die * Bottom-Navigation"); der Kommentar ist hier bewusst mitgeaendert, damit * nicht zwei Stellen Verschiedenes behaupten. */ .tpw-head-ort { display: grid; place-items: center; flex: 0 0 auto; margin-left: auto; width: 40px; height: 40px; border-radius: var(--r-btn); background: var(--tpw-gruen-flaeche); color: var(--tpw-gruen-dunkel); text-decoration: none; /* background-color mit in die Transition, damit der :active-Zustand * unten weich einsetzt. KEINE Transition auf Groesse oder Lage - die * Begruendung dazu steht im Absatz "SENKRECHT MITTIG" oben. */ transition: color .2s ease, background-color .2s ease; } .tpw-head-ort:link, .tpw-head-ort:visited { color: var(--tpw-gruen-dunkel); } .tpw-head-ort:hover, .tpw-head-ort:focus { color: var(--tpw-gruen-tief); text-decoration: none; } /* Gedrueckt: die Flaeche dunkelt eine Stufe nach (Rahmen 7, "Hover = * leichtes Abdunkeln") und das Motiv geht auf Tiefgruen. Ein Mikro-Effekt * im Sinn von Rahmen 8 - kein Lift, kein Schatten, keine Groessenaenderung: * der Knopf sitzt in einem animierten Band, jede Bewegung an ihm selbst * wuerde mit der Bandhoehe konkurrieren. * * Der Wert ist KEIN neuer Farbwert: es ist das Hauptgruen #719130 mit der * Deckkraft .18, die im Rahmen bereits die Abschlusslinien der Datenzeilen * traegt (Rahmen 11). Auf Weiss ergibt das eine Stufe unter #eff7e8 - * sichtbar genug fuer eine Rueckmeldung, zu zart fuer einen Farbeindruck. * Es entsteht damit keine fuenfte Markenfarbe (Rahmen 2 bleibt zu). * * :active statt :hover fuer die Flaeche: auf einem Telefon gibt es kein * Hover, und genau dort steht dieser Knopf (ueber 960px ist er * display:none). */ .tpw-head-ort:active { background: rgba(113, 145, 48, .18); color: var(--tpw-gruen-tief); } /* 24px wie in der Bottom-Navigation; die Familienregel .tpw-ic liefert 22px. * Strichstaerke bleibt bei den 1.7 der Familie - Rahmen 10 verlangt EINE * einheitliche Strichstaerke, ein Sonderwert nur fuer dieses Icon waere der * erste Bruch darin. */ .tpw-head-ort .tpw-ic { width: 24px; height: 24px; } /* LOGO: mobil breiten- statt hoehengesteuert. * * Der Mock nennt Breiten (173/132px), nicht Hoehen - das ist bei einem * langen Schriftzug auch das Maß, das man wahrnimmt. Bei 1742x553px * Originaldatei (Seitenverhaeltnis 3,15) ergibt das 55,0px bzw. 41,9px * Hoehe; der kompakte Zustand ist damit praktisch identisch zur bisherigen * mobilen Zeile (42px), es aendert sich also nur der Auftritt oben. * Beide Hoehen passen mit Luft in ihr Band (83 bzw. 59px Innenhoehe). * * Zweiklassiger Selektor, gleicher Grund wie bei der Grundregel in * Abschnitt 1: '.woocommerce img' (0,1,1) schlaegt eine einfache Klasse. */ .tpw-brand .tpw-brand-logo { width: 173px; height: auto; } .tpw-head-kompakt .tpw-brand .tpw-brand-logo { width: 132px; } /* max-width haelt das Logo auch auf sehr schmalen Geraeten innerhalb der * Polster - object-fit:contain skaliert dann sauber, statt die Seite * horizontal scrollbar zu machen. * * MITGEMESSENE NEBENWIRKUNG, die den Anfahrts-Knopf kollisionsfrei haelt * (nachgetragen 2026-08-05, damit sie nicht als Zufall dasteht): weil der * Kasten absolut steht, links auf 50% sitzt und KEIN right hat, ist seine * Breite "shrink to fit" - der verfuegbare Platz ist also nur die rechte * Haelfte des Bandes. Damit gilt fuer den grossen Zustand * Logobreite = min(173px, Viewport / 2) * und das Logo schrumpft auf schmalen Geraeten VON SELBST mit: * 320px -> 160px 346px und breiter -> 173px (der Sollwert) * Genau das haelt den Abstand zum 40px-Knopf positiv, und zwar bis * hinunter zu rund 224px Viewport (dort beruehren sich beide gerade). * Nachgemessener Abstand: 320px -> 24px, 360px -> 37,5px, 390px -> 49,3px, * im kompakten Zustand jeweils mehr. Ein zusaetzliches max-width fuer den * Knopf ist darum NICHT eingebaut - es wuerde nie greifen und nur eine * zweite, schwer nachrechenbare Zahl in die Datei tragen. */ .tpw-brand { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); max-width: calc(100% - 2.4em); min-width: 0; } /* UEBERGANG. ~250ms ease auf genau die drei Eigenschaften, die sich * aendern. Die senkrechte Mitte laeuft von allein mit: .tpw-brand haengt * mit top:50% an der Bandhoehe, der berechnete Wert folgt der Animation * Bild fuer Bild - es braucht dort also KEINE eigene Transition (eine auf * 'top' waere sogar falsch, sie liefe der Bandhoehe hinterher). * * Die Klasse .tpw-kopf-bewegt setzt js/kopf.js erst zwei Bildaufbauten * nach dem Anfangszustand. Dadurch laeuft der Zustand, der beim Laden zur * wiederhergestellten Scroll-Position gehoert, OHNE Animation an - sonst * schrumpfte der Kopf bei jedem Reload mitten auf der Seite einmal * grundlos. Nebeneffekt und erwuenscht: ohne Skript kein Uebergang, weil * es dann auch keinen Zustandswechsel gibt. */ .tpw-kopf-bewegt .tpw-head-bar { transition: height .25s ease, box-shadow .25s ease; } .tpw-kopf-bewegt .tpw-brand .tpw-brand-logo { transition: width .25s ease; } /* Anker-Sprünge: der Kopf ueberdeckt beim Springen 84px (oben) bzw. 60px * (kompakt). Der Wert richtet sich am groesseren aus, damit ein Ziel auch * direkt unter dem grossen Kopf frei steht; im kompakten Fall stehen dann * 24px mehr Luft darueber, was nicht stoert. Vorher 78px (fuer den alten * 65px-Kopf). Zum Summanden fuer die Admin-Bar siehe Abschnitt 1; unter * 600px scrollt die Leiste weg, die dort zusaetzlichen 46px sind also nur * etwas Luft zu viel und nie zu wenig. */ html { scroll-padding-top: calc(var(--wp-admin--admin-bar--height, 0px) + 84px); } /* --- Bottom-Navigation einblenden --- * * Safe-Areas (User-Review Inkrement 2): die Leiste ist fixiert und liegt auf * Geraeten mit Home-Indicator, Notch oder runden Ecken sonst teilweise im * nicht bedienbaren Bereich. Darum: * - unten 8px + safe-area-inset-bottom (Home-Indicator) * - seitlich 12px Grundabstand + safe-area-inset-left/right, damit die * aeussersten Punkte ("Start", "Helfen") nicht in die runden Ecken oder * unter das Landscape-Notch laufen * Jedes env() traegt einen Fallback (0px). Ohne Fallback ist der ganze * calc()-Ausdruck in Browsern ohne env()-Unterstuetzung UNGUELTIG und die * Deklaration fiele komplett aus - die Leiste haette dann gar kein Polster. * Voraussetzung ist ausserdem viewport-fit=cover im viewport-Meta, siehe * header.php. * * ------------------------------------------------------------------ * MATERIAL UND PROPORTION: VARIANTE „V3" (User-OK 2026-08-05) * Referenzbilder: design-mocks/mobil-modern/08-bottomnav-V3-EMPFEHLUNG-390.png * und 08b-VERGLEICH-V3-in-drei-untergruenden.png. * * 1. GLAS: Flaeche rgba(255,255,255,.90) mit blur(18px) statt der frueheren * .95/blur(12px). Die Leiste soll als eigene Schicht ueber dem Inhalt * lesbar sein, ohne ihn abzuschneiden - bei .95 war der Glaseffekt * praktisch unsichtbar, die Leiste wirkte wie ein weisser Balken. * Rueckfall ohne backdrop-filter siehe @supports-Block darunter. * 2. HAARLINIE auf rgba(113,145,48,.10) abgesenkt (vorher .16): sie ist * nicht mehr die Trennung, das ist jetzt die Erhebungskante (3.). * 3. ERHEBUNGSKANTE (neu): box-shadow 0 -1px 8px rgba(0,0,0,.08) - exakt * der Wert, den der kompakte Kopf traegt (Abschnitt 4), nur nach OBEN * gespiegelt. Kopf und Fussleiste heben sich damit mit derselben Kante * vom durchlaufenden Inhalt ab; ein zweiter, eigener Schattenwert waere * ein zweites Vokabular fuer dieselbe Aussage (Rahmen 7/8). * 4. HOEHE 70px statt 64,7px (siehe .tpw-bottomnav-link). * ------------------------------------------------------------------ */ .tpw-bottomnav { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 80; justify-content: space-around; padding-top: 8px; padding-right: calc(12px + env(safe-area-inset-right, 0px)); padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)); padding-left: calc(12px + env(safe-area-inset-left, 0px)); background: rgba(255, 255, 255, .90); border-top: 1px solid rgba(113, 145, 48, .10); box-shadow: 0 -1px 8px rgba(0, 0, 0, .08); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } /* Ohne backdrop-filter faellt der Weichzeichner weg - dann traegt die Flaeche allein, und die zehn Restprozent Transparenz waeren genau die Stelle, an der Inhalt durchschiene (bei 0.90 deutlich mehr als beim Kopf mit 0.97). Darum dort volldeckendes Weiss. Gleiches Muster und gleiche Begruendung wie am Kopf, siehe Abschnitt 1. */ @supports not ((backdrop-filter: blur(18px)) or (-webkit-backdrop-filter: blur(18px))) { .tpw-bottomnav { background: #fff; } } .tpw-bottomnav-link { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; /* Abstand Icon -> Label 6px (V3; vorher 3px). Die Zeile darf atmen, sonst klebt das Label am Motiv und beide verschmelzen zu einem Fleck. */ gap: 6px; /* LEISTENHOEHE 70px, hier zusammengesetzt: 1px Linie + 8px Polster + 53px Zeile + 8px Polster = 70px. Die 53px stehen bewusst am LINK und nicht als Hoehe an der Leiste: die Leiste haengt unten zusaetzlich die Safe-Area an, eine Hoehe an ihr waere dort falsch. Der Inhalt der Zeile ist 43,4px hoch (24 Icon + 6 Abstand + 13,4 Label) und wird von justify-content zentriert; die restlichen ~9,6px sind Beruehrfleisch. */ min-height: 53px; padding-inline: 2px; border-radius: var(--r-btn); text-align: center; text-decoration: none; color: var(--tpw-ink-soft); /* 180ms (V3) - dieselbe Groessenordnung wie die Mikro-Effekte des Rahmens (Rahmen 8). Abgeschaltet bei prefers-reduced-motion, siehe den Block am Dateiende. */ transition: color .18s ease; } /* Label: 0.7rem / 600 / Laufweite .015em (V3). Die Laufweite ist die Gegenmassnahme zum kleinen Grad - ohne sie laufen "Besuch" und "Helfen" bei 11px optisch zu. Es ist KEIN Versal-Label (Rahmen 4), sondern gemischtschriftlich wie im Mock. */ .tpw-bottomnav-label { font-size: .7rem; font-weight: 600; line-height: 1.2; letter-spacing: .015em; } .tpw-bottomnav-link:link, .tpw-bottomnav-link:visited { color: var(--tpw-ink-soft); } .tpw-bottomnav-link:hover, .tpw-bottomnav-link:focus { color: var(--tpw-gruen-dunkel); text-decoration: none; } /* AKTIV (Rahmen 13, rev. 2026-08-05, User-OK): * - Textfarbe wie gehabt #557000 * - Label auf 700 * - Motiv wechselt von Kontur auf die GEFUELLTE Variante; das passiert im * Markup (inc/navigation.php -> tpw_nav_icon(..., true)), nicht hier. * Weiterhin ausdruecklich KEIN Punkt, KEIN Balken, KEINE Flaeche hinter dem * Punkt - die Leiste soll ruhig bleiben. */ .tpw-bottomnav-link.active, .tpw-bottomnav-link.active:link, .tpw-bottomnav-link.active:visited { color: var(--tpw-gruen-dunkel); } .tpw-bottomnav-link.active .tpw-bottomnav-label { font-weight: 700; } .tpw-bottomnav-ic { display: grid; place-items: center; } .tpw-bottomnav-ic .tpw-nav-ic { width: 24px; height: 24px; /* STRICHSTAERKE 1,55 in der 24px-Box (Rahmen 10, rev. 2026-08-05). Die Familie ist auf 22px mit 1,7 eingestellt (style.css 14.7); auf dem Schirm sind das 1,7 x 22/24 = 1,558px. In der 24px-Box der Navigation ergaben dieselben 1,7 volle 1,7px - die Nav-Icons standen damit eine Stufe fetter da als jedes andere Icon der Seite. 1,55 stellt die einheitliche BILDSCHIRM-Strichstaerke wieder her, ohne die Beruehrgroesse anzutasten. Bei der gefuellten Variante ist der Wert wirkungslos (dort steht stroke:none, siehe .tpw-ic--voll in Abschnitt 2). */ stroke-width: 1.55; } /* Die fixe Leiste darf nichts verdecken: Inhalt am Seitenende bekommt Luft, * inklusive Safe-Area. Der Wert ist die Leistenhoehe - seit V3 ist sie mit * 70px EXAKT bekannt (1 Linie + 8 Polster + 53 Zeile + 8 Polster) und muss * nicht mehr wie fruehere Messwerte (64,7 -> 66) aufgerundet werden. Dazu * derselbe safe-area-inset-bottom, den die Leiste unten anhaengt (Fallback * 0px aus demselben Grund wie oben). */ body { padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)); } /* WooCommerce/Events-Manager legen teils eigene fixe Leisten an - * die Bottom-Nav bleibt oben drueber (z-index 80). */ .tpw-foot-sil { width: 140px; height: 140px; bottom: 24px; right: -18px; } } /* Kleine Telefone (<=360px): eine Stufe engere seitliche Polster, damit das * zentrierte Logo auch bei 320px mit Luft steht. Die frueher hier gepflegten * CTA-Werte sind entfallen - der Kopf-CTA ist unter 960px ausgeblendet. * Die seitlichen Polster tragen auch hier die Safe-Area. */ @media screen and (max-width: 360px) { .tpw-head-bar { padding-right: calc(1em + env(safe-area-inset-right, 0px)); padding-left: calc(1em + env(safe-area-inset-left, 0px)); } } /* Zwischenstufe 961-1100px: die Kopfzeile passt dort exakt, aber ohne Reserve * (18px Luft zwischen Menue und CTA). Ein etwas laengeres Menue-Label wuerde * sonst sofort einen horizontalen Ueberlauf erzeugen. Etwas engere Polster und * eine Spur kleinere Schrift verschaffen rund 40px Reserve, ohne dass sich das * Bild sichtbar aendert. */ @media screen and (min-width: 961px) and (max-width: 1100px) { .tpw-head-bar { gap: 12px; } .tpw-topnav-menu > li > a { padding: 10px 10px; font-size: .92rem; } .tpw-head-cta { padding: 12px 16px; } } /* Footer-Spalten fruehzeitig auf zwei Spalten, damit sie nicht quetschen. * Der Wert bleibt bei 1100px, die BEGRUENDUNG ist nach dem Entfernen des * Spendenkontos eine andere: nicht mehr die IBAN (rund 225px), sondern die * E-Mail-Adresse in Spalte 3 ist der breiteste unteilbare Inhalt (207px). * Mit 1.15fr bleibt Spalte 3 bei 1101px Viewport 219px breit - die Adresse * passt also bis zum Umschaltpunkt in eine Zeile (gemessen). */ @media screen and (max-width: 1100px) { .tpw-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px 28px; } } @media screen and (max-width: 600px) { .tpw-foot-grid { grid-template-columns: 1fr; } .tpw-foot-note { justify-content: flex-start; } } /* ===================================================================== * 5. BROTKRUMEN-LEISTE (site-weit, ausser Startseite) * * Markup und Datenquelle: inc/breadcrumb.php (Yoast liefert die Pfade). Die * Leiste wird in header.php DIREKT hinter dem Masthead gerendert, also VOR dem * oeffnenden #content — daher liegt sie ohne Zwischenraum an der Haarlinie des * Kopfes. Der frueher gemeldete weisse Spalt kam daher, dass die (damals nur im * Tiere-Bereich vorhandene) Leiste INNERHALB von #content stand und dessen * `padding-top: 1em` aus style.css Abschnitt 4 ueber sich hatte. Es gibt hier * bewusst KEINE margin-Korrektur dagegen: die Ursache ist die Position im * Markup, und die ist behoben. * * Optik = 1:1 die vorherige Tiere-Leiste (.tier-breadcrumb in css/tiere.css, * jetzt entfernt) und damit Rahmen 13 bzw. .crumb aus * design-mocks/rahmen-tiere.html: Flaeche --tpw-surface-2 (die zarteste * Gruenstufe, KEINE Grauflaeche), Haarlinie unten, 0.86rem, Links 600 in * --tpw-ink-soft, letztes Element 700 in Tiefgruen und unverlinkt. * ===================================================================== */ .tpw-crumb { background: var(--tpw-surface-2); border-bottom: 1px solid var(--tpw-linie-zart); font-size: .86rem; color: var(--tpw-ink-soft); } /* Innere Spalte. Die Maße wiederholen .container (Poseidon: max-width 1280px, * padding 0 2em, ab 30em 1.5em) ABSICHTLICH statt die Klasse mitzunehmen: * .container steht im PARENT-style.css, und ob rahmen.css danach ausgeliefert * wird, entscheidet die Enqueue-Reihenfolge zweier gleichrangiger Handles - ein * padding-block hier wuerde dann von der padding-Kurzform dort geschlagen. Mit * eigener Klasse gibt es diese Abhaengigkeit nicht. Die Werte muessen bei einer * Aenderung von .container mitgezogen werden; dafuer stehen sie hier als * einzige Kopie. */ .tpw-crumb-in { margin: 0 auto; padding: 13px 2em; max-width: 1280px; width: 100%; } @media only screen and (max-width: 30em) { .tpw-crumb-in { padding-right: 1.5em; padding-left: 1.5em; } } /* Yoast-Wrapper (, Klasse ueber den Filter in inc/breadcrumb.php). * min-width:0 ist die Voraussetzung dafuer, dass die Kuerzung ab 640px * ueberhaupt greifen kann - ohne sie waere die Mindestbreite eines Flex-Items * seine Inhaltsbreite. */ .tpw-crumb-list { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; min-width: 0; } .tpw-crumb-list a:link, .tpw-crumb-list a:visited { color: var(--tpw-ink-soft); font-weight: 600; text-decoration: none; transition: color .2s ease; } .tpw-crumb-list a:hover, .tpw-crumb-list a:focus, .tpw-crumb-list a:active { color: var(--tpw-gruen-dunkel); text-decoration: none; } .tpw-crumb-sep { color: rgba(113, 145, 48, .55); } /* --- WURZEL-KRUME: HAUS-ICON STATT „Startseite" --- * * Markup baut inc/breadcrumb.php (Filter tpw_crumb_startseite_als_haus): der * Wurzel-Link traegt die Klasse .tpw-crumb-home, darin das Motiv 'haus' der * Icon-Familie (mu-plugins/tierpark-icons.php, Rahmen 10) plus den sr-only-Text * „Startseite". Das JSON-LD behaelt das Wort — hier aendert sich nur die Anzeige. * * `display: flex` (NICHT inline-flex) + align-items:center. Der Unterschied ist * der ganze Punkt und war ein gemeldeter Fehler: * * Yoast huellt jede Krume in ein — DAS ist das Flex-Kind der Leiste, nicht * der Link darin. Als `inline-flex` war der Link ein INLINE-Level-Kasten in der * Textzeile dieses . Ein inline-flex ohne baseline-faehiges Kind (hier: nur * ein SVG) setzt seine Grundlinie auf die eigene UNTERKANTE — das Motiv sass also * komplett oberhalb der Grundlinie, und darunter kam noch der Descender-Raum des * Struts (Schriftgroesse/line-height des ) hinzu. Der Kasten des war * damit hoeher als das Motiv, mit LEERRAUM UNTEN. `align-items:center` zentrierte * diesen zu hohen Kasten — und das Motiv darin sass entsprechend zu HOCH. * * Mit `display: flex` ist der Link ein BLOCK-Level-Kasten. Er nimmt am * Grundlinien-Spiel nicht teil, es entsteht kein Strut und kein Descender-Raum: * die Hoehe des ist exakt die Hoehe des Motivs. Erst dadurch zentriert * `align-items:center` der Leiste das Motiv wirklich auf die Mittelachse der * Krumen-Typo — ohne Korrekturwert und ohne translateY-Pflaster. * * Zur bestehenden Struktur passt das auch deshalb, weil die Kuerzungsregel ab * 640px `.tpw-crumb-list a` ohnehin auf `display: block` stellt. * * Groesse in `em` und nicht in px: die Krumen-Schrift ist 0.86rem, das Motiv * soll mit ihr wachsen. 1.2em ≈ 16.5px — knapp ueber der Versalhoehe, also so * praesent wie eine Krume und nicht mehr. `.tpw-ic` liefert 22px; DIESE Regel * gewinnt dagegen ueber die zweite Klasse im Selektor, nicht ueber Reihenfolge. * * Farbe kommt von selbst: das SVG zeichnet mit `stroke: currentColor`, der Link * traegt --tpw-ink-soft bzw. im Hover Tiefgruen (Regeln oben). * * overflow:visible und flex-shrink:0 sind der Riegel gegen die Kuerzungsregeln * ab 640px weiter unten: dort bekommt JEDES `.tpw-crumb-list a` ein * `display:block; overflow:hidden; text-overflow:ellipsis`. Auf ein Icon * angewandt hiesse das im schlimmsten Fall ein halbes Haus. Zwei Klassen (0,2,0) * schlagen `.tpw-crumb-list a` (0,1,1) unabhaengig von der Position im * Stylesheet. */ .tpw-crumb-list .tpw-crumb-home { display: flex; align-items: center; flex: none; overflow: visible; } .tpw-crumb-list .tpw-crumb-home .tpw-ic { width: 1.2em; height: 1.2em; } /* Letztes Element: 700 in Tiefgruen. Yoast setzt darauf selbst * class="breadcrumb_last" aria-current="page" und verlinkt es nicht - der * aria-current-Selektor ist der Sicherheitsgurt, falls die Klasse in einer * kuenftigen Yoast-Version anders heisst. */ .tpw-crumb-list .breadcrumb_last, .tpw-crumb-list [aria-current] { color: var(--tpw-gruen-dunkel); font-weight: 700; } /* --- ABSTAND ZUM INHALT --- * Die Leiste selbst traegt KEINEN Abstand nach unten; darunter folgt bereits * das `padding-top: 1em` von #content (style.css Abschnitt 4). Seiten, die * einen anderen Abstand brauchen, regeln das ueber die Body-Klasse * .tpw-mit-crumb - im Tiere-Bereich passiert genau das in css/tiere.css * (Uebersicht: Baender stossen aneinander; Gruppen-Seite: mehr Luft). */ /* --- MOBIL: EINZEILIG, MIT RANGFOLGE BEIM KUERZEN --- * * Ab 640px wird nicht mehr umgebrochen: eine zweizeilige Krume verdoppelt das * 47px-Band direkt unter dem Kopf und stiehlt dem Seitentitel den Platz. * Gekuerzt wird darum mit Auslassungspunkten - aber NICHT gleichmaessig. * * Ein erster Versuch liess alle Krumen gleich stark schrumpfen (flex-shrink * erbt 1, proportional zur Ausgangsbreite). Ergebnis bei 320px: * "Start… / Veransta… / Besuch für Pate…" - auch die kurze Wurzel war * abgeschnitten, und genau die ist der Anker der Leiste. Darum eine Rangfolge: * * 1. "Startseite" schrumpft NIE (flex-shrink 0). Sie ist der Anker und * mit ~66px die kuerzeste Krume - dort ist am wenigsten * zu holen und am meisten zu verlieren. * 2. Trennzeichen schrumpfen nie. Ein geschrumpftes "/" waere unlesbar * und spart 4px. * 3. Zwischenebenen geben ZUERST nach (Faktor 999, Boden 3ch). Sie sind * die entbehrlichste Information: ihr Ziel ist einen * Fingertipp entfernt. * 4. aktuelle Seite gibt ZULETZT nach (Faktor 1, Boden 6ch). Sie traegt * die Auszeichnung aus Rahmen 13 (700/Tiefgruen) und * beantwortet "wo bin ich" - sie soll lesbar bleiben. * * Die Boeden (min-width) verhindern, dass eine Krume auf 0 zusammenfaellt und * nur noch als "…" dasteht. Nachgerechnet fuer den laengsten Pfad der Website * bei 320px (272px verfuegbar): Wurzel 66 + Trenner/Abstaende 46 = 112, es * bleiben 160 fuer Zwischenebene (Boden 21) und aktuelle Seite - die Summe der * Boeden liegt weit darunter, es wird also nie ueber die rechte Kante * geschnitten. * * display:block auf dem Kuerzungstraeger ist Pflicht: text-overflow greift nur * auf einem Block-Container, ein Inline- wuerde hart abgeschnitten. Das * min-width:0 am Flex-Kind ist die zweite Pflicht - ohne es waere die * Mindestbreite eines Flex-Items seine Inhaltsbreite und nichts wuerde * schrumpfen. */ @media only screen and (max-width: 640px) { .tpw-crumb-list { flex-wrap: nowrap; overflow: hidden; } /* Grundhaltung: nichts schrumpft. Die Ausnahmen kommen darunter. */ .tpw-crumb-list > span { flex: 0 0 auto; min-width: 0; } /* Zwischenebenen: alles ausser der Wurzel (:first-child) und der aktuellen * Seite (:last-child) - die Trennzeichen sind ueber die Klasse ausgenommen. */ .tpw-crumb-list > span:not(:first-child):not(:last-child):not(.tpw-crumb-sep) { flex-shrink: 999; min-width: 3ch; } .tpw-crumb-list > .breadcrumb_last { flex-shrink: 1; min-width: 6ch; } .tpw-crumb-list a, .tpw-crumb-list .breadcrumb_last { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* Rahmen 8: prefers-reduced-motion respektieren. * * Beim mobilen Kopf (Variante C) wird nur die ANIMATION abgeschaltet, nicht der * Zustandswechsel: der Kopf springt dann hart zwischen 84 und 60px. Das ist die * richtige Auslegung - "reduce" heisst "keine Bewegung", nicht "keine Funktion", * und ein dauerhaft grosser Kopf waere auf kleinen Geraeten die schlechtere * Variante. Der Sprung ist ausserdem harmlos, weil die Fluss-Hoehe fix bleibt * (siehe Abschnitt 4): es bewegt sich nur die Bandkante, nie der Inhalt. * * Diese Regeln stehen NACH dem Umschaltpunkt-Abschnitt und gewinnen darum bei * gleicher Spezifitaet (beide 0,2,0). */ @media (prefers-reduced-motion: reduce) { .tpw-kopf-bewegt .tpw-head-bar, .tpw-kopf-bewegt .tpw-brand .tpw-brand-logo { transition: none; } .tpw-head-cta, .tpw-head-ort, .tpw-crumb-list a, .tpw-topnav-menu a, .tpw-topnav-menu .sub-menu, .tpw-topnav-menu > li.menu-item-has-children > a::after, .tpw-bottomnav-link, #footer.tpw-foot a { transition: none; } } /* ===================================================================== * 6. PAGINIERUNG — EINE Optik fuer die ganze Website * (rev. 2026-08-06, User-OK) * * DAS PROBLEM: die Website zeigte VIER verschiedene Paginierungen, weil drei * davon von fremdem Markup mit fremdem CSS kamen: * * 1. Medienspiegel `.medien-pagination` (eigenes Markup) * 2. Onlineshop `.woocommerce-pagination` (WooCommerce) * 3. Veranstaltungen `.em-pagination` (Events Manager) * 4. Suche/Archive `.navigation.pagination` (Poseidon, the_posts_pagination) * * Nummer 4 war bis jetzt niemandem aufgefallen — sie steht auf der Suchseite * und den generischen Archiven (poseidon/inc/template-tags.php * poseidon_pagination()). Sie wird hier mitgenommen, sonst ist die Sache beim * naechsten Blick auf die Suche wieder offen. * * REFERENZ ist die Medienspiegel-Fassung: bordierte Kaestchen mit 6px-Ecken, * Zahlen in 700, Hover als helle Gruenflaeche, aktive Seite gefuellt gruen. * Sie ist die einzige der vier, die dem Rahmen ueberhaupt folgt (die anderen * bringen Grau mit — WooCommerce #cfc8d8/#e9e6ed/#816f98, Events Manager * #aaa/#777 —, und Grauflaechen sind nach Rahmen 1 tabu). Die Werte sind 1:1 * aus css/medienarchiv.css uebernommen, damit sich am Medienspiegel selbst * OPTISCH NICHTS aendert; die drei anderen werden auf ihn nachgezogen. * * WARUM DIESE DATEI: rahmen.css wird als letztes Stylesheet ausgeliefert und * gewinnt darum bei gleicher Spezifitaet gegen die Plugin-Sheets (die laden * vor dem Theme) UND gegen css/medienarchiv.css (das laedt sogar vor dem * Child-style.css). Es braucht deshalb fast nirgends `!important` — die zwei * Ausnahmen sind unten einzeln begruendet. * * AM FREMDEN MARKUP WIRD NICHTS GEAENDERT: WooCommerce- und EM-Templates * bleiben unangetastet, hier wird ausschliesslich gestylt (Update-Sicherheit). * Die Markup-Formen sind unterschiedlich (flach,
  • ,
    mit * Zwischen-) — darum stehen unten Selektorlisten und keine eine Regel. * ===================================================================== */ /* --- BEHAELTER --- * Bei WooCommerce traegt nicht das