/* Theme Name: Sydney Pro II Child - Tierarztpraxis Steingaden Theme URI: https://tierarzt-steingaden.de Description: Child-Theme fuer Sydney Pro II. Alle eigenen Anpassungen an der Website gehoeren hier hinein - so bleiben sie bei Updates des Eltern-Themes erhalten. Author: Michael Hank Template: sydney-pro-ii Version: 1.0.0 Text Domain: sydney-pro-ii-child */ /* ========================================================================== Eigene Anpassungen ab hier. Bestehende Regeln aus dem WordPress-Customizer ("Zusaetzliches CSS") koennen nach und nach hierher wandern - siehe README.md. ========================================================================== */ /* ========================================================================== Design Schritt 1 (01.08.2026): helle Kopfzeile, CI-Farben, Slider-Hoehe. Begruendung und Farbwerte: docs/design-vorschlag.md und docs/inhalte/ci/gestaltung.md. Die Flaechenfarben der Kopfzeile setzt der Customizer (main_header_background), hier stehen Kontrast und Details. ========================================================================== */ /* Kopfzeile: feine Trennlinie statt harter Kante zum Inhalt */ .main-header { border-bottom: 1px solid rgba(35, 31, 32, 0.08); } /* Menue und Kopfzeilen-Elemente: Dunkelgruen (#3B6119, Kontrast 7,2:1 auf Creme), Hover in CI-Rot. Vorher weiss auf Schwarz. */ .main-header .mainnav ul li a, .main-header .header-contact, .main-header .header-contact a, .main-header .header-search-form .icon-search, .main-header .site-title a, .main-header .site-description { color: #3B6119; } .main-header .mainnav ul li a:hover, .main-header .mainnav ul li.current-menu-item > a, .main-header .mainnav ul li.current_page_item > a { color: #BF2026; } /* Untermenue (Praxen): hell und lesbar. Das Theme legt dem Ausklappmenue sonst sein dunkles Blau zugrunde, auf dem die gruenen Links versinken. */ .main-header .mainnav ul ul, .main-header #mainnav .sub-menu, .main-header #mainnav .sub-menu li, .main-header #mainnav .sub-menu li a { background: #FFFFFF; color: #3B6119; } .main-header #mainnav .sub-menu { border: 1px solid rgba(35, 31, 32, 0.08); border-radius: 12px; box-shadow: 0 10px 30px rgba(35, 31, 32, 0.12); overflow: hidden; padding: 6px 0; } .main-header #mainnav .sub-menu li a:hover { color: #BF2026; background: #FAF9F6; } /* "Gleich anrufen": CI-Rot statt Theme-Rot */ .main-header .roll-button.header-item, .main-header .roll-button.header-item:visited { background-color: #BF2026; color: #ffffff; } .main-header .roll-button.header-item:hover { background-color: #3B6119; color: #ffffff; } /* Der Knopf darf nie umbrechen. * * Michael am 18.08.2026 auf dem Galaxy S20 FE: Der Knopf wird "sehr gross". * Nachgemessen -- es haengt an der Anzeigegroesse, die das Geraet meldet: * * 412 px Viewport 207 x 50 px "GLEICH ANRUFEN" eine Zeile * 360 px Viewport 186 x 74 px "GLEICH / ANRUFEN" zwei Zeilen * * Bei 360 px bricht der Text mitten im Aufruf um, und die Kopfzeile waechst * um 24 px mit. Samsung-Geraete melden je nach Einstellung "Anzeigegroesse" * 360 statt 412 CSS-Pixel -- deshalb sieht es nicht jeder. Betroffen war jede * Seite der Site, aber ausschliesslich dieser eine Knopf. * * nowrap allein reicht nicht: Dann liefe der Knopf bei 360 px aus dem * Rasterfeld heraus und die Seite bekaeme waagerechten Bildlauf -- schlimmer * als der Umbruch. Deshalb wird er unter 480 px zugleich schmaler. Die Werte * sind nicht geschaetzt, sondern von 320 bis 430 px durchgemessen. * * Warum nicht einfach die Beschriftung kuerzen: Die steht im Customizer, also * in der Datenbank. Eine Aenderung dort ueberlebt keinen Datenbankwechsel und * waere hier nicht dokumentiert. */ .main-header .roll-button.header-item { white-space: nowrap; } @media (max-width: 480px) { .main-header .roll-button.header-item { padding-left: 18px; padding-right: 18px; font-size: 13px; letter-spacing: 0.02em; } } /* Schaltflaechen mit Symbol: auf schmalen Handys nicht umbrechen lassen. * * Michael am 18.08.2026: "Jetzt anrufen: 08861 9098822" bricht falsch um. * Zutreffend, und der Bruch faellt an die schlechtestmoegliche Stelle -- * mitten durch die Rufnummer, "…08861" / "9098822". Eine Telefonnummer ueber * zwei Zeilen ist auf einem Handy genau die Angabe, die man abtippen will. * * Bei 360 px Viewport gerechnet: * * "Jetzt anrufen: 08861 9098822" Text 224 + Symbol 21 + Abstand 15,6 * = 260,6 px noetig, 236 px vorhanden * "Jetzt als Kunde registrieren" Text 198 + Symbol 26 + Abstand 15,6 * = 239,6 px noetig, 224 px vorhanden * * Der Text allein haette gepasst -- das Symbol und sein Abstand geben den * Ausschlag. Deshalb wird hier nicht die Schrift verkleinert (das trifft die * Lesbarkeit), sondern der Innenabstand von 32 auf 20 px und der Symbolabstand * von 15,6 auf 8 px gesetzt. Zusammen 31 px, mehr als die fehlenden 25. * * Warum das lange unentdeckt blieb: Mein erster Rundumcheck suchte nach * "a.button" und ".ow-button-base a" -- die SiteOrigin-Widget-Schaltflaechen * heissen aber "a.sowb-button" und fielen komplett durch das Raster. Gefunden * hat es Michael auf dem Geraet. */ /* !important, und zwar unvermeidlich: Das Widgets-Bundle erzeugt fuer jede * Schaltflaeche eine eigene Regel mit Hash im Selektor * (.so-widget-sow-button-atom-… .ow-button-base > a), die NACH dem * Child-Theme geladen wird. Ohne !important blieb der Innenabstand * nachweislich bei 32 px -- nachgemessen, nicht vermutet. Dieselbe Lage wie * bei der Pillenform weiter oben. */ /* Der negative linke Rand des Symbols muss weg -- in JEDER Breite. * * Michael am 23.08.2026: "der Innenabstand bei den Buttons ist nicht richtig", * zumindest auf schmalen Displays. Zutreffend -- und beim Nachmessen zeigte * sich, dass es ueberall schief steht, auf dem Handy nur auffaelliger. * * Das Widget haengt das Symbol mit margin-left: -15,6px ins Polster hinein: * * 700 px Polster 32 - 15,6 = 17 px links, 32 rechts sichtbar linkslastig * 393 px Polster 20 - 15,6 = 5 px links, 20 rechts klebt am Rand * * Der negative Rand ist auf 32 px Polster gerechnet und war schon vorher * unausgewogen; das verkleinerte Polster hat es nur sichtbar gemacht. Deshalb * hier ohne Medienabfrage: Ein Knopf, dessen Inhalt links klebt und rechts * Luft hat, ist in keiner Breite richtig. Die Knoepfe werden dadurch auf dem * Desktop um 15,6 px breiter. */ .sowb-button .sow-icon-fontawesome, .sowb-button [class*="sow-icon"], .sowb-button svg { margin-left: 0 !important; } @media (max-width: 480px) { .sowb-button { padding-left: 20px !important; padding-right: 20px !important; } .sowb-button .sow-icon-fontawesome, .sowb-button [class*="sow-icon"], .sowb-button svg { margin-right: 8px !important; } } /* Mobiler Menue-Knopf: dunkle Striche auf hellem Grund. Das Theme faerbt das Symbol ueber ".btn-menu .sydney-svg-icon" - dieses Kopfzeilen-Layout benutzt aber "a.menu-toggle", die Regel greift also nicht, und die Balken blieben weiss auf cremefarbenem Grund. */ .main-header .menu-toggle .sydney-svg-icon svg rect, .main-header .menu-toggle .sydney-svg-icon svg path, .main-header .menu-toggle .sydney-svg-icon svg circle { fill: #3B6119; } .main-header .menu-toggle { color: #3B6119; background-color: transparent; } /* In der aufgeklappten Schublade bleibt das Schliessen-Kreuz hell - sie hat einen dunklen Hintergrund. */ .sydney-offcanvas-menu .menu-toggle .sydney-svg-icon svg rect, .sydney-offcanvas-menu .menu-toggle .sydney-svg-icon svg path { fill: #ffffff; } /* Angeheftete Kopfzeile: beim Rollen sichtbar, aber verkleinert. Das Theme setzt im angehefteten Zustand die Klasse sticky-active (Typ "always"). */ .main-header .site-logo { transition: max-height 0.2s ease; } .main-header.sticky-active .site-logo { max-height: 48px !important; } .main-header.sticky-active .site-header-inner { padding-top: 4px; padding-bottom: 4px; } /* Kopfbild der Unterseiten (01.08.2026): feste Hoehe statt Bildstreifen, Titel auf dem Bild statt links darunter, Verlauf statt Vollschleier. Gehoert zur Child-Vorlage header-featured-image.php. * * HOEHE MITWACHSEND STATT ZWEISTUFIG (30.08.2026) * * Michael sah die Site auf einem iPad: "die Kopfbilder wurden nicht an die * Bildschirmgroesse angepasst, man sah nur einen kleinen Ausschnitt". * Zutreffend -- und die Ursache war diese Regel selbst. * * Vorher standen hier zwei feste Werte: 340 px, unter 1024 px Breite 220 px. * Die Grenze war fuer Telefone gedacht und erwischte Tablets mit: Ein iPad im * Hochformat ist 810 px breit und bekam die Handy-Hoehe. Breit wie ein * Tablet, flach wie ein Telefon -- und weil background-size: cover das Bild * auf die volle BREITE skaliert, blieb von der Hoehe fast nichts uebrig. * * Gemessen, Anteil des Bildes, der sichtbar war: * * 393 px 810 px 1194 px 1440 px * Peiting 75 % 36 % 38 % 31 % * Jobs 42 % 20 % 21 % 18 % * * Auf breiten Schirmen war es also noch schlechter als auf dem iPad -- es * fiel dort nur weniger auf, weil ein flaches Band ueber die ganze Breite * wie ein gewolltes Banner aussieht. * * clamp() bindet die Hoehe an die Breite: Telefone behalten ihre 220 px (dort * war der Ausschnitt in Ordnung), Tablets und Desktop bekommen mehr Bild, und * bei 440 px ist Schluss, damit der Inhalt nicht unter den Bildschirmrand * rutscht. * * Was clamp() NICHT loesen kann: Ein hochformatiges Bild in einem breiten * Band wird immer stark beschnitten -- siehe /jobs. Dagegen hilft nur ein * passend zugeschnittenes Bild, nicht CSS. */ .single-header-image { height: clamp(220px, 40vw, 440px); display: flex; align-items: flex-end; justify-content: center; } .single-header-image .overlay { background: linear-gradient(to bottom, rgba(35, 31, 32, 0) 40%, rgba(35, 31, 32, 0.55) 100%) !important; opacity: 1; } .single-header-image .tierarzt-seitentitel { position: relative; z-index: 1; padding: 0 20px 30px; } .single-header-image .tierarzt-seitentitel h1 { margin: 0; color: #ffffff; font-size: 44px; text-align: center; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35); } /* Der Titel steht im Kopfbild - der im Inhalt entfaellt, eine Seite traegt ein h1. Erledigt seit dem 12.08.2026 in functions.php ueber den Filter sydney_disable_page_title: Der zweite Titel wird gar nicht erst ausgegeben. Die frühere Regel hier war display: none - das versteckt ihn nur, im Quelltext standen weiter zwei h1. */ /* Seiten ohne Kopfbild: Titel wenigstens mittig statt linksbuendig */ .page-template-page_no-header-wide .entry-title, .page-template-page_fullwidth .entry-title { text-align: center; } @media (max-width: 1024px) { /* Die Hoehe steht nicht mehr hier -- sie kommt aus dem clamp() oben. Genau diese Zeile war der Fehler: Sie gab dem iPad im Hochformat die Handy-Hoehe. Geblieben ist nur die kleinere Ueberschrift. */ .single-header-image .tierarzt-seitentitel h1 { font-size: 30px; } } /* Slider: 62 % der Bildschirmhoehe statt Vollbild. Nur Desktop - mobil uebernimmt der responsive Modus des Themes (Customizer mobile_slider). Wichtig: Der CONTAINER muss gedeckelt werden - das Theme-JavaScript setzt ihm die volle Fensterhoehe als Inline-Stil, und eine nur verkuerzte Folie hinterlaesst darunter eine grosse weisse Luecke. */ @media (min-width: 1026px) { .header-slider { height: 62vh !important; min-height: 480px; } .header-slider .slide-item { height: 100% !important; } } /* ========================================================================== Facelift (01.08.2026): Karten, Pillen, weiche Radien. Michaels Befund: abwechselnde Hintergruende, unbuendige Schaltflaechen und harte Rechtecke wirkten altbacken. Statt Zebra-Streifen gliedern jetzt Karten; Zeilen mit der Klasse "tierarzt-karten" (gesetzt im Bau-Skript) werden zu gleich hohen Karten mit unten buendigen Schaltflaechen. ========================================================================== */ /* Gleich hohe Karten: die Zellen einer Karten-Zeile strecken sich auf Zeilenhoehe, die letzte Schaltflaeche wird nach unten gedrueckt. */ .panel-row-style.tierarzt-karten { align-items: stretch; } .panel-row-style.tierarzt-karten .panel-grid-cell { background: #ffffff; border: 1px solid rgba(35, 31, 32, 0.06); border-radius: 16px; box-shadow: 0 10px 30px rgba(35, 31, 32, 0.07); padding: 28px 28px 24px; display: flex; flex-direction: column; } /* Nur SCHALTFLAECHEN werden nach unten gedrueckt - Text bleibt oben ausgerichtet. Vorher schob margin-top:auto auch alleinstehende Textbloecke nach unten, und Karten ohne Schaltflaeche wirkten vertikal zentriert. */ .panel-row-style.tierarzt-karten .panel-grid-cell > .so-panel.widget_sow-button:last-child { margin-top: auto; margin-bottom: 0; } /* Gestapelte Karten auf dem Handy brauchen Luft zueinander - und ihren Innenabstand zurueck. SiteOrigin gibt fuer schmale Bildschirme eine eigene Regel mit aus: "#pl- .panel-grid-cell { padding: 0 }" (Einstellung "Mobile Cell Padding", Vorgabe 0). Das ist eine ID-Auswahl, gegen die die Klassenregel oben nicht ankommt - auf dem Handy hatten die Karten deshalb gar keinen Innenabstand, und die Schaltflaechen klebten an der Unterkante. Das "!important" ist hier die einzige Wahl, die ohne Seiten-IDs auskommt: Eine Regel mit "#pl-344" waere an genau eine Seite gebunden und muesste bei jeder neuen Seite nachgezogen werden. Gilt bewusst nur fuer unsere Kartenzeilen, nicht fuer alle Zellen. */ @media (max-width: 780px) { .panel-row-style.tierarzt-karten .panel-grid-cell { padding: 24px 20px !important; /* Auch hier "!important": SiteOrigin setzt den Abstand mit 15px und ebenfalls mit !important - sonst stuenden weisse Karten auf hellem Grund fast ohne Fuge untereinander. */ margin-bottom: 24px !important; } /* Die letzte Karte einer Zeile bekommt keinen eigenen Abstand: Darunter folgt der Abstand der Zeile selbst, und beides zusammen riss die Luecke auf. Sichtbar wurde das auf der Startseite, wo vier Kacheln als 2x2-Raster in ZWEI Zeilen stehen - gestapelt lasen sie sich als eine Liste, in der eine von drei Fugen fast dreimal so breit war. */ .panel-row-style.tierarzt-karten .panel-grid-cell:last-child { margin-bottom: 0 !important; } } /* Zwei Kartenzeilen hintereinander sind EIN Raster, kein Themenwechsel. Die vier Kacheln auf der Startseite stehen als 2x2-Raster in zwei Zeilen, die Teamseite reiht sogar drei Kartenzeilen aneinander. Zwischen zwei Zeilen summierten sich Innenabstand unten (20px), Zeilenabstand (40px) und Innenabstand oben (20px) zu 80px - waehrend zwei Karten NEBENeinander nur 24px trennen. Gestapelt auf dem Handy las sich das als drei zusammenhanglose Bloecke statt als eine Liste. Die Abstaende stehen als Inline-Stil an der Zeile (SiteOrigin erzeugt sie aus dem Zeilenstil), deshalb "!important". Betroffen ist nur eine Kartenzeile, auf die unmittelbar eine weitere folgt - der Abstand zum naechsten Abschnitt bleibt unangetastet. ":has()" gibt es ab Safari 15.4, Chrome 105 und Firefox 121. Aeltere Browser bekommen weiter die grossen Fugen: nicht schoen, aber nichts zerbricht. */ .panel-grid:has(> .tierarzt-karten):has(+ .panel-grid > .tierarzt-karten) { margin-bottom: 24px !important; } .panel-grid:has(> .tierarzt-karten):has(+ .panel-grid > .tierarzt-karten) > .panel-row-style { padding-bottom: 0 !important; } .panel-grid:has(> .tierarzt-karten) + .panel-grid:has(> .tierarzt-karten) > .panel-row-style { padding-top: 0 !important; } /* Pillenform fuer alle Schaltflaechen - auch Kopfzeile und Slider */ .sowb-button, .roll-button, .button.roll-button { border-radius: 999px !important; } /* Weiche Radien fuer Bilder, Bilderschauen und die Aktuelles-Karten */ .so-widget-sow-image .sow-image-container img { border-radius: 16px; } .so-widget-sow-slider .sow-slider-base { border-radius: 16px; overflow: hidden; } .rt-tpg-container .rt-holder { border: 0; border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(35, 31, 32, 0.07); } /* Beitragsbild ueber dem Artikel: Hoehe deckeln. Das Theme gibt es mit voller Spaltenbreite aus — bei einem Hochformat sind das 1000 x 1333 px, also der ganze Bildschirm, bevor ein Wort Text kommt. Bei einem Fachbeitrag ist das die falsche Reihenfolge: Der Leser kommt wegen der Information, nicht wegen des Bildes. Gedeckelt wird wie bei den Figuren die HOEHE, damit Hoch-, Quer- und Quadratformate optisch gleich gross erscheinen. */ .entry-thumb img { display: block; max-height: 460px; max-width: 100%; width: auto; height: auto; margin: 0 auto; } @media (max-width: 768px) { .entry-thumb img { max-height: 300px; } } /* Signature-Tiere: gemeinsame optische Groesse. Die Motive haben verschiedene Seitenverhaeltnisse — Hochformat 3:4, Querformat 4:3, Breitformat 16:9. Wuerde man die Breite deckeln, waere das Kalb doppelt so hoch wie das Schaf. Gedeckelt wird deshalb die HOEHE: Dann wirken alle Figuren gleich gross, egal welches Format sie haben. Ohne diese Regel rendert SiteOrigin sie auf volle Spaltenbreite — auf der Schongauer Seite waren das 1170 x 658 px. */ .tierarzt-figur img { display: block; max-height: 340px; max-width: 100%; width: auto; height: auto; margin: 0 auto; } /* Bildunterschrift der Figuren: der Satz, den das Bild bebildert. Die Klasse sitzt am

selbst, nicht an einem Container darum. */ p.tierarzt-figur-text { text-align: center; font-size: 0.95em; margin: 14px auto 0; max-width: 34em; } @media (max-width: 768px) { .tierarzt-figur img { max-height: 240px; } } /* Nicht-gefunden-Seite: Bild oben, Wege darunter, alles mittig. */ .tierarzt-404 { text-align: center; max-width: 620px; margin: 0 auto; padding: 40px 20px 80px; } .tierarzt-404-bild img { max-width: 320px; height: auto; } .tierarzt-404 .page-title { margin-top: 10px; } /* Auf dem Handy muss die Ueberschrift ins erste Sichtfenster. Gemessen am 14.08.2026 auf einem iPhone 14: Chili endete bei 403 px, die Ueberschrift begann bei 413 - und der Cookie-Hinweis legt sich ab etwa 440 px darueber. Wer auf einer falschen Adresse ankam, sah also einen Hund und eine halbe Zeile. Ausgerechnet die Seite, auf der jemand ankommt, der etwas Bestimmtes gesucht und nicht gefunden hat. Deshalb weniger Luft oben und ein niedrigeres Bild. Begrenzt wird die HOEHE, nicht die Breite - dieselbe Regel wie bei den Figuren auf den Standortseiten. */ @media (max-width: 768px) { .tierarzt-404 { padding-top: 16px; } .tierarzt-404-bild img { max-height: 150px; width: auto; max-width: 100%; } } .tierarzt-404-wege { list-style: none; margin: 0 0 30px; padding: 0; } .tierarzt-404-wege li { display: inline-block; margin: 0 12px 8px; } /* „Aktuelles"-Raster: alle Kacheln gleich hoch. The Post Grid skaliert das Beitragsbild nur auf die Spaltenbreite und laesst ihm sein Seitenverhaeltnis. Bei quadratischen Bildern faellt das nicht auf - kommt ein Hochformat dazu, wird die Kachel hoeher (267x333 statt 267x267) und schiebt ihren Titel 67 px tiefer als die Nachbarn. Die Reihe sieht dann verrutscht aus, obwohl nichts kaputt ist. Deshalb ein festes Quadrat mit Beschnitt. Der Beschnitt setzt OBEN an, nicht mittig: Beitragsbilder sind meistens Portraets, und ein mittiger Quadratausschnitt aus einem Hochformat schneidet zuverlaessig Koepfe ab. Das volle Bild steht unbeschnitten im Beitrag selbst. */ .rt-tpg-container .rt-holder .rt-img-holder img { aspect-ratio: 1 / 1; width: 100%; height: auto; object-fit: cover; object-position: center top; } /* Ueberschriften auf dem Handy: das Theme laesst Widget-Titel mit 48 px an den Rand laufen */ @media (max-width: 768px) { .panel-grid-cell .widget-title { font-size: 26px; } .so-panel h2 { font-size: 30px; } } /* ========================================================================== Einzugsgebiet der Fahrpraxis: Orte als Kacheln (11.08.2026) Vorher standen achtzehn Ortsnamen als Kommaliste in drei Absaetzen, nach Himmelsrichtung gruppiert. Das las sich als Textwand — und es ging an dem vorbei, was hier tatsaechlich passiert: Ein Landwirt sucht EINEN Namen, seinen eigenen. In einer Kommaliste muss er dafuer lesen; in einer Kachelreihe springt der Blick. Deshalb alphabetisch statt geografisch, und die Reichweite ("nach Osten bis Peissenberg, nach Sueden bis Steingaden") als Satz darueber statt als Gruppierung. Die Kacheln greifen die Form der Zeitfenster im Buchungswidget auf, damit die Site eine Sprache spricht. ========================================================================== */ .tierarzt-orte { list-style: none; margin: 1.6em 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; } .tierarzt-orte li { margin: 0; padding: 8px 18px; background: #EDF2E7; color: #3B6119; border-radius: 999px; font-weight: 600; font-size: 16px; line-height: 1.3; white-space: nowrap; } /* Auf dem Handy duerfen lange Namen wie Schwabniederhofen umbrechen, sonst sprengt eine einzige Kachel die Zeile. */ @media (max-width: 480px) { .tierarzt-orte { gap: 8px; } .tierarzt-orte li { padding: 7px 14px; font-size: 15px; white-space: normal; } } /* ========================================================================== Rechtstexte lesbar machen (11.08.2026) Datenschutzerklaerung, Impressum und Cookie-Hinweis sind keine gebauten Seiten - sie bestehen aus reinem Fliesstext im Inhaltsfeld. Auf der Vorlage "volle Breite" lief dieser Text ueber die ganzen 1140 px: Die Datenschutzerklaerung mit ihren 50.000 Zeichen, 25 Hauptabschnitten und 163 Aufzaehlungspunkten war damit praktisch unlesbar. Zeilen von mehr als etwa 75 Zeichen verliert das Auge beim Ruecksprung. Angesprochen ueber die Seiten-Kennungen, die WordPress als Klasse an haengt. Das ist praeziser als eine Regel fuer alle Seiten mit voller Breite - die gebauten Seiten sollen ihre Breite behalten. 183 = Datenschutzerklaerung, 799 = Impressum, 932 = Cookie-Hinweis. ========================================================================== */ .page-id-183 .entry-content, .page-id-799 .entry-content, .page-id-932 .entry-content { max-width: 44em; margin-left: auto; margin-right: auto; } /* Gliederung sichtbar machen: Hauptabschnitte bekommen Luft und eine feine Linie, Unterabschnitte nur Luft. Sonst steht alles gleich gewichtet untereinander und man findet den gesuchten Punkt nicht. */ .page-id-183 .entry-content h2, .page-id-799 .entry-content h2, .page-id-932 .entry-content h2 { margin-top: 2.5em; padding-top: 0.8em; border-top: 1px solid rgba(35, 31, 32, 0.1); font-size: 26px; } .page-id-183 .entry-content h3, .page-id-799 .entry-content h3 { margin-top: 1.8em; font-size: 20px; color: #3B6119; } .page-id-183 .entry-content h4, .page-id-799 .entry-content h4 { margin-top: 1.4em; font-size: 17px; } .page-id-183 .entry-content p, .page-id-799 .entry-content p, .page-id-932 .entry-content p { line-height: 1.7; } .page-id-183 .entry-content ul, .page-id-799 .entry-content ul { margin-bottom: 1.4em; } .page-id-183 .entry-content li, .page-id-799 .entry-content li { line-height: 1.65; margin-bottom: 0.4em; } /* Die Tabellen - eine in der Datenschutzerklaerung, die Cookie-Uebersicht auf dem Hinweis - kamen voellig ungestaltet. Auf dem Handy laufen sie ueber die Bildschirmbreite hinaus; deshalb rollen sie waagerecht statt die Seite zu sprengen. */ .page-id-183 .entry-content table, .page-id-932 .entry-content table, .page-id-932 .wpconsent-cookie-policy table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-size: 15px; display: block; overflow-x: auto; } .page-id-183 .entry-content th, .page-id-932 .entry-content th, .page-id-932 .wpconsent-cookie-policy th { background: #FAF9F6; text-align: left; font-weight: 600; color: #3B6119; } .page-id-183 .entry-content th, .page-id-183 .entry-content td, .page-id-932 .entry-content th, .page-id-932 .entry-content td, .page-id-932 .wpconsent-cookie-policy th, .page-id-932 .wpconsent-cookie-policy td { border: 1px solid rgba(35, 31, 32, 0.12); padding: 10px 12px; vertical-align: top; } /* ========================================================================== Terminbuchung: das inBehandlung-Widget an die CI angleichen (10.08.2026) Das Widget bringt eine eigene Farbwelt mit - Braun (#967856) fuer Kopfleiste und Schaltflaechen, dazu zwei Blautoene. Neben Rot und Gruen waren das drei Farbklaenge auf einer Seite. Die Angleichung laeuft ueber die CSS-Variablen, die das Widget selbst auf #ibappt-widget-container setzt. Das ist bewusst so gewaehlt: Die Widget-Datei bleibt unangetastet (siehe docs/vertraege.md - es gibt von ihr nur eine Kopie), und ein Update des Widgets ueberschreibt hier nichts. Nur wo eine Farbe fest im Regelwerk steht statt in einer Variablen, folgt darunter eine eigene Regel. ========================================================================== */ /* "body" davor ist kein Zierrat: Das Widget schiebt sein eigenes CSS per JavaScript in den Kopf der Seite - also NACH dieser Datei. Bei gleicher Spezifitaet gewinnt das spaetere Regelwerk, und ein blosses "#ibappt-widget-container" bliebe wirkungslos. Regeln mit zusaetzlicher Klasse (weiter unten) brauchen den Zusatz nicht. */ body #ibappt-widget-container { /* Rot fuer Handlungen, Gruen fuer Struktur - dieselbe Logik wie auf dem Rest der Site (Schaltflaechen rot, Nebenwege gruen). Zurueckhaltung ist hier Absicht: Ein Formular, in dem jede Beschriftung farbig ist, gibt keinen Hinweis mehr darauf, was wichtig ist. Farbe traegt nur die Schaltflaeche und das gewaehlte Zeitfenster. */ --primary: #BF2026; /* Schaltflaechen, Verweise */ --primary-dark: #3B6119; /* Hover - genau wie .roll-button:hover */ --primary-light: #3B6119; /* mitlaufender Strich unter dem aktiven Feld */ --success: #6F6A6A; /* das Widget faerbt damit Feldbeschriftungen */ --secondary: rgba(35, 31, 32, 0.2); /* Unterstriche der Eingabefelder */ --widget-bg: #FAF9F6; /* Creme wie die Kopfzeile, statt #eee */ /* Mehr Luft: Die Felder standen mit .375em Innenabstand direkt auf ihrem Unterstrich. */ --input-padding-y: 0.55em; --gutter: 1.75em; /* Das Widget setzt sich sonst auf "sans-serif" und faellt aus der Seite */ font-family: inherit; /* Wie die Karten auf den anderen Seiten */ border: 1px solid rgba(35, 31, 32, 0.06); border-radius: 16px; box-shadow: 0 10px 30px rgba(35, 31, 32, 0.07); } /* Auswahlfelder waren 4 px flacher als Textfelder. Folge waren zwei Uebel: Linke und rechte Spalte lagen versetzt, und die Beschriftung eines noch leeren Auswahlfeldes ("Tierart auswaehlen") sass genau auf dem Unterstrich, als waere sie durchgestrichen. Ursache ist nicht das Stylesheet, sondern der Browser: Ein