.
Der Selektor hiess frueher nur `hr.uk-divider-icon` -> griff nie (Content =
), die Trenner
auf /kontakt u.a. waren unsichtbar. Jetzt beides + Marken-Farben (Ring #8bbecd wie die Deko-Ringe,
statt Grau). font-size:0 neutralisiert das im div (sonst Extra-Hoehe). Philipp 17.07.2026. */
.uk-divider-icon,hr.uk-divider-icon{position:relative;height:22px;margin:1.6rem 0;border:none;font-size:0;
background-position:center;background-repeat:no-repeat;
background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg width='22' height='22' viewBox='0 0 22 22' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle fill='none' stroke='%238bbecd' stroke-width='1.4' cx='11' cy='11' r='6'/%3E%3Ccircle fill='%238bbecd' cx='11' cy='11' r='1.7'/%3E%3C/svg%3E");}
.uk-divider-icon::before,.uk-divider-icon::after,hr.uk-divider-icon::before,hr.uk-divider-icon::after{content:"";position:absolute;top:50%;max-width:calc(50% - 26px);border-bottom:1px solid rgba(139,190,205,.55);}
.uk-divider-icon::before,hr.uk-divider-icon::before{right:calc(50% + 26px);width:100%;}
.uk-divider-icon::after,hr.uk-divider-icon::after{left:calc(50% + 26px);width:100%;}
/* --- Bild-Overlay (uk-inline-clip + slide-top-Caption) wie Original --- */
.uk-inline-clip{overflow:hidden;position:relative;display:inline-block;}
.uk-inline-clip img{display:block;}
.uk-position-bottom{position:absolute;bottom:0;left:0;right:0;}
.uk-transition-slide-top-small{opacity:0;transform:translateY(10px);transition:opacity .3s var(--o3-ease),transform .3s var(--o3-ease);}
.uk-transition-toggle:hover .uk-transition-slide-top-small,
.uk-transition-toggle:focus-within .uk-transition-slide-top-small{opacity:1;transform:translateY(0);}
.button-dunkel-klein{display:inline-block;background:var(--o3-primary);border:1px solid var(--o3-primary);border-radius:28px;color:#fff;font-family:Verdana,sans-serif;padding:1px 20px;text-decoration:none;}
.button-dunkel-klein a,.button-dunkel-klein a:hover{color:#fff;}
@media (hover:none){.uk-transition-slide-top-small{opacity:1;transform:none;}}
/* --- Accordion (ul[uk-accordion]) — No-JS Fallback offen; JS klappt zu + toggelt --- */
ul[uk-accordion]{padding:0;list-style:none;margin:1.5rem 0;}
ul[uk-accordion] > li{border-bottom:1px solid #e5e5e5;}
ul[uk-accordion] > li > .uk-accordion-title{display:block;cursor:pointer;text-decoration:none;padding:.5rem 0;color:var(--o3-primary);position:relative;}
ul[uk-accordion] > li > .uk-accordion-title h3{margin:.3rem 0;font-size:20px;}
.uk-accordion-content{display:block;margin:0 0 1rem;}
/* JS-gesteuert: alle zu ausser .uk-open; Chevron-Indikator */
ul[uk-accordion].js-acc > li > .uk-accordion-content{display:none;}
ul[uk-accordion].js-acc > li.uk-open > .uk-accordion-content{display:block;}
ul[uk-accordion].js-acc > li > .uk-accordion-title::after{content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;border-right:2px solid var(--o3-primary-light);border-bottom:2px solid var(--o3-primary-light);transform:translateY(-70%) rotate(45deg);transition:transform .25s var(--o3-ease);}
ul[uk-accordion].js-acc > li.uk-open > .uk-accordion-title::after{transform:translateY(-30%) rotate(-135deg);}
/* --- Kategorie-Blog (Eigenuebungen cat12, Aktuelles cat13) wie Original ---
Original rendert das Bild INLINE im Introtext (uk-grid Bild|Text), NICHT als
separate item-image-Figur. Unsere Artikel haben image_intro gesetzt (fuer das
Startseiten-Modul 122) -> im Blog-View die Figur ausblenden, damit nur das
Inline-Bild zeigt (= 1:1 Original, kein Doppelbild). */
.com-content-category-blog__item > figure.item-image{display:none;}
/* 2-Spalten-GRID (rundungsfest; Flex brach bei exakt 2x576+48=1200 um). Einzel-Beitrag = 1 Zelle = halbbreit. */
.com-content-category-blog__items.columns-2{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 3rem;}
.com-content-category-blog__items.columns-2 > .com-content-category-blog__item{min-width:0;}
@media (max-width:767px){.com-content-category-blog__items.columns-2{grid-template-columns:1fr;}}
/* Listing-Typo 1:1 (Live gemessen): Titel 26/300 Open Sans, Untertitel 24/300, keine Unterstreichung */
.com-content-category-blog__item h2{font-size:26px;font-weight:var(--cassiopeia-font-weight-headings);margin:0 0 .6rem;}
.com-content-category-blog__item h2 a{font-family:'Open Sans',Arial,sans-serif;font-weight:var(--cassiopeia-font-weight-headings);color:var(--o3-primary);text-decoration:none;}
.com-content-category-blog__item h3{font-size:24px;font-weight:var(--cassiopeia-font-weight-headings);margin:.2rem 0;}
.com-content-category-blog__item h3 a{color:var(--o3-primary);font-weight:var(--cassiopeia-font-weight-headings);text-decoration:none;}
.com-content-category-blog__item a:hover{text-decoration:none;color:var(--o3-primary-dark);}
/* Kachel-Einleitungsbilder gerundet wie die Beitragsbilder (Gemini-Renders sind voll-bleed/eckig
-> per CSS runden statt in jedes PNG einbacken; einheitlich fuer alle Kacheln, update-sicher). */
.com-content-category-blog__item img{border-radius:var(--o3-radius);}
/* --- Praxis-Foto-Slider (Praxis + Team, Nachbau mod_uk_slider: 1 Bild pro Ansicht) ---
Reuse der Slider-Infrastruktur via data-o3-per="1". Original-Bilder 800x518 (joomlaImage),
uk-border-circle7 ist NIRGENDS definiert -> plane Rechtecke (kein Radius). */
.o3-pslider-section{padding:2.5rem 0 1rem;}
.o3-pslider .o3-slider-card{transition:none;}
.o3-pslider .o3-slider-card:hover,.o3-pslider .o3-slider-card:focus-visible{transform:none;}
/* Original (Live gemessen): Bild rendert in NATIVER Groesse 800x518, ZENTRIERT — nie hochskaliert */
.o3-pslider .o3-slider-card-media{text-align:center;}
.o3-pslider .o3-slider-card-media img{width:auto;max-width:100%;height:auto;display:inline-block;}
/* ============================================================================
KONTAKT-SEITE — Sub-Module (via {loadmoduleid} im Artikel 37 inline geladen)
============================================================================ */
.padding-left{padding-left:30px;}
.uk-visible\@s{display:none;}
@media (min-width:640px){ .uk-visible\@s{display:block;} }
/* text-ecke-Deko (Modul 332): Inline-BG bekommt kein SEF-Rewrite -> Klasse mit CSS-relativem Pfad.
Kreis-Pattern wie Startseite (Ring 300x222 nativ, Text nistet: dy=88/dx=62 — KB 5b) */
/* ::before statt background am Element: der Ring muss ueber die Textkante ragen duerfen
(negative background-position wuerde ihn an der Padding-Box abschneiden).
Mitte (97,96), Shift +27 -> left = 62 - 97 + 27 = -8 ; top = 88 - 96 = -8. */
.o3-kontakt-ecke{position:relative;padding:88px 0 0 62px;}
.o3-kontakt-ecke::before{content:"";position:absolute;top:-8px;left:-8px;width:300px;height:222px;
background:url("../../../../../images/design/text-ecke-transparent.webp") no-repeat left top;z-index:0;pointer-events:none;}
.o3-kontakt-ecke > *{position:relative;z-index:1;}
/* schmal: Ring buendig an den Rand, Text um die Ringmitte (97/96) eingerueckt */
@media (max-width:575px){.o3-kontakt-ecke{padding:96px 0 0 70px;}.o3-kontakt-ecke::before{left:0;top:0;}}
/* Sprechzeiten-Portraits (wagner-rund/bernhard-rund 320x316, fertig rund -> kein CSS-Radius) */
.o3-sprechzeiten img{max-width:320px;height:auto;}
.o3-sprechzeiten h3{margin:.4rem 0;}
/* OSM-Karte */
.o3-map iframe{display:block;}
/* ============================================================================
SUBPAGE-INTRO (Original top-c-1 Bild | top-c-2 Text, 2-spaltig ueber dem Artikel)
Via {loadmoduleid} oben in den Beitrag geladen. Kreis = text-ecke-gross.png (wie Startseite). */
.o3-intro{margin:0 0 1.5rem;}
.o3-intro-grid{display:flex;flex-wrap:wrap;gap:2rem;align-items:start;}
.o3-intro-grid > *{flex:1 1 360px;min-width:0;}
.o3-intro-media{text-align:center;}
.o3-intro-media img{max-width:100%;height:auto;}
/* Eyebrow buendig auf der Bild-Oberkante (Philipp 2026-07-15 fuer /praxis; gleiche Regel wie
WIR-SIND auf der Startseite) -> padding-top 0, Bild und Text starten beide am Grid-Top.
Der Ring steht dadurch 128px UEBER der Textbox — diesen Platz liefert .o3-intro per
padding-top (siehe dort), sonst ragt er in den Subhero und liegt auf dessen FOTO. */
.o3-intro-text{position:relative;padding:0 0 0 5rem;color:var(--o3-primary);}
/* Abstands-Regel: left = 80 - 129 + 35 = -14 ; top = 0 - 128 = -128 (Mitte.y auf Text-Oberkante) */
.o3-intro-text::before{content:"";position:absolute;top:-128px;left:-14px;width:400px;height:296px;
background:url(../../../../../images/design/text-ecke-gross.webp) no-repeat left top;z-index:0;pointer-events:none;}
.o3-intro-text > *{position:relative;z-index:1;}
.o3-intro-text strong{color:var(--o3-primary);}
.o3-intro-text .uk-margin-xlarge-left{margin-left:20px;} /* Liste leicht extra eingerueckt (wie Original) */
.o3-intro-text .uk-text-secondary{color:var(--o3-primary-light);}
/* Arztseiten: kleinerer Kreis text-ecke2.png (300x222), Text-Einzug links 60px wie Original.
padding-top 0 wie .o3-intro-text: Eyebrow buendig auf der Bild-Oberkante. */
.o3-intro-text.o3-intro-ecke2{padding:0 0 0 60px;}
/* text-ecke2.png 300x222, Mitte (97,96), Shift +27 -> left = 60 - 97 + 27 = -10 ; top = 0 - 96 = -96 */
.o3-intro-text.o3-intro-ecke2::before{top:-96px;left:-10px;width:300px;height:222px;background-image:url(../../../../../images/design/text-ecke2.webp);}
/* (Einrueckung fuer ecke2 auf kleinen Screens: siehe Stapel-Regeln weiter unten —
padding 96/97 haelt Ringmitte auf der Textecke und den Ring innerhalb des Randes) */
/* Text-only Intro (Seiten ohne top-c-2 Bild): eine Spalte, Ring bleibt.
Hier steht der Text am linken Containerrand -> Ring buendig + Text um die Ringmitte
einruecken (gleiches Prinzip wie .o3-split-text gestapelt), sonst schneidet der Rand ihn ab. */
.o3-intro-solo .o3-intro-grid > *{flex-basis:100%;}
.o3-intro-solo .o3-intro-text{padding:128px 0 0 94px;}
.o3-intro-solo .o3-intro-text::before{left:0;top:0;}
.o3-intro-solo .o3-intro-text.o3-intro-ecke2{padding:96px 0 0 70px;}
@media (max-width:991px){
.o3-intro-grid > *{flex-basis:100%;}
.o3-intro-text{padding:128px 0 0 94px;}
.o3-intro-text::before{left:0;top:0;}
.o3-intro-text.o3-intro-ecke2{padding:96px 0 0 70px;}
}
/* ≤575: kleiner Ring. WICHTIG — vorher wurde hier nur die ::before-BOX auf 300x222 gesetzt,
das Bild blieb text-ecke-gross.png (400x296) und wurde dadurch beschnitten. Jetzt echtes
text-ecke2.png (Mitte 97/96). */
@media (max-width:575px){
.o3-intro-text{padding:96px 0 0 70px;}
.o3-intro-text::before{width:300px;height:222px;background-image:url(../../../../../images/design/text-ecke2.webp);left:0;top:0;}
}
/* ============================================================================
LEISTUNGEN — Foto-Karten-Grids (Nachbau mod_article_grid 299/300):
grosse Karten (Rahmen im Bild eingebrannt), Hover = weisser Schleier + Titel
(uk-transition-fade + uk-overlay-default). Diagnostik 4 Spalten, Konservativ 3. */
.o3-cardgrid{display:grid;gap:15px;margin:1rem 0 2rem;}
.o3-cardgrid-4{grid-template-columns:repeat(4,1fr);}
.o3-cardgrid-3{grid-template-columns:repeat(3,1fr);}
.o3-card{position:relative;display:block;overflow:hidden;text-align:center;}
.o3-card img{width:100%;height:auto;display:block;}
.o3-card-overlay{
position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
background:rgba(255,255,255,.8);opacity:0;transition:opacity .3s ease;
}
.o3-card-overlay h3{margin:0;color:var(--o3-primary);font-size:1.25rem;padding:0 .5rem;}
.o3-card:hover .o3-card-overlay,.o3-card:focus-visible .o3-card-overlay{opacity:1;}
@media (hover:none){ .o3-card-overlay{opacity:1;background:rgba(255,255,255,.55);} }
@media (max-width:1199px){ .o3-cardgrid-4,.o3-cardgrid-3{grid-template-columns:repeat(2,1fr);} }
@media (max-width:575px){ .o3-cardgrid-4,.o3-cardgrid-3{grid-template-columns:1fr;} }
/* --- Angebot-Slider auf Unterseiten (Original Modul 336, bottom-b-3):
GLEICHER Karten-Slider wie Startseite, aber weisser BG, kein Band/Welle, KEINE Dots. --- */
.o3-subslider{padding:2rem 0 2.5rem;}
.o3-subslider .o3-slider-prev,
.o3-subslider .o3-slider-next{top:50%;} /* keine Dots-Zeile herauszurechnen */
/* ============================================================================
KATEGORIE-VIEWS (Eigenübungen/Aktuelles) — wie Original (Live gemessen 2026-07):
Content-Fläche #f0f5f5 (full-bleed, wie EINE-Behandlung), h1 40px #276081,
Kategorie-Beschreibung = uk-grid Bild|Text (Shim vorhanden). */
/* Grau NUR ab dem Blog-Bereich (main) — das Intro (main-top) bleibt wie im Original auf Weiss */
body.itemid-123 .container-component > main,
body.itemid-125 .container-component > main{
background:var(--o3-band-bg);width:100vw;margin-left:calc(50% - 50vw);margin-top:var(--o3-band-gap);margin-bottom:var(--o3-band-gap);
padding:var(--o3-band-pad-y) max(1.25rem,calc((100% - var(--o3-maxw))/2)) var(--o3-band-pad-y);
}
body.itemid-123 .container-component > main > *,
body.itemid-125 .container-component > main > *{max-width:var(--o3-maxw);margin-inline:auto;}
/* Groesse/Gewicht/Farbe jetzt aus der Basisregel + :root — hier bleibt nur der Abstand. */
.blog h1{margin:0 0 1.5rem;}
.category-desc{margin-bottom:2rem;}
.category-desc img{max-width:100%;height:auto;}
/* ============================================================================
SIDEBAR-RECHTS (Original col-9|col-3): Ärzte-Karten auf Konservativ-Blättern,
Osteoporose-Box auf Knochendichte. Intros liegen in BANNER (volle Breite),
Grids in BOTTOM-A — beide damit sidebar-unabhängig (wie Original). */
/* „Ihr Ansprechpartner" — 1:1 nach Original gemessen (dort h3.module-title):
Quicksand 300, 24px, #276081, LINKSbuendig (die Karten darunter sind zentriert), 32px zur
ersten Arzt-Karte. Im Original ist das ein leeres Modul, das nur seinen Titel zeigt; unter
Cassiopeia geht das nicht (noCard-Chrome bricht bei leerem content ab) — deshalb bei uns ein
normales Custom-Modul mit der Ueberschrift im Inhalt, gleicher Chrome-Stil wie die Arzt-Karten.
Eigenes Modul (nicht in eine Arzt-Karte gebacken), weil nicht auf jeder Seite beide Aerzte
stehen — Philipp 2026-07-15. */
.o3-sidebar-heading{
font-family:var(--cassiopeia-font-family-headings);
font-weight:var(--cassiopeia-font-weight-headings);
font-size:24px;
line-height:1.3;
color:var(--o3-primary);
text-align:left;
/* 16px statt der 32px des Originals: dort sitzt die Ueberschrift im GLEICHEN Modul wie der
Inhalt, bei uns ist die Arzt-Karte ein EIGENES Modul und bringt selbst margin-top:16px mit.
16 + 16 = 32px Abstand zur ersten Karte — exakt wie am Original gemessen. */
margin:0 0 16px;
}
.o3-sidebar-card{text-align:center;margin-bottom:2rem;}
.o3-sidebar-card img{max-width:100%;height:auto;display:block;margin:0 auto;}
.o3-sidebar-name{margin-top:.5rem;}
.o3-sidebar-name a{color:var(--o3-primary-light);font-size:14pt;line-height:1.6;}
/* Intros im banner: selbst boxen (Position ist full-width) */
/* padding-top 128px = Ringhoehe ueber der Textkante. Seit der Eyebrow buendig auf der
Bild-Oberkante sitzt (padding-top:0 an .o3-intro-text), steht der Ring 128px darueber und
wuerde sonst in den Subhero ragen — und der hat ein FOTO, der Ring laege mitten drin.
Mit dem Vorlauf endet der Ring exakt an der Subhero-Unterkante. */
.container-banner .o3-intro{max-width:var(--o3-maxw);margin:0 auto;padding:128px 1.25rem 1rem;}
/* Ausnahmen: Text-only-Intros und gestapelte Ansicht haben den Ring INNERHALB der Textbox
(padding-top dort) -> hier keinen zusaetzlichen Vorlauf, sonst doppelter Leerraum. */
.container-banner .o3-intro-solo{padding-top:2.5rem;}
@media (max-width:991px){ .container-banner .o3-intro{padding-top:2.5rem;} }
/* ---- Modul 129 „Kontakt Text unten": Eyebrow + Ueberschriften einfaerben (Philipp 17.07.2026) ----
Waren #333 — nicht durch einen Migrationsfehler, sondern weil das ORIGINAL dort auch keine Farbe
setzt (Crawl geprueft: identisches Markup, nur inline font-size). Bewusste Abweichung in der
Feintuning-Phase: angleichen an das Intro-Muster DERSELBEN Seite (.o3-intro-text{color:var(--o3-primary)}),
wo „SIE MOECHTEN"/„Kontakt mit uns aufnehmen" exakt dieselbe Machart haben (span 14pt + strong 22px/bold)
und in #276081 stehen. Der Eyebrow wirkt dort heller — durch Gewicht 400, NICHT durch die Farbe.
Nur die Ueberschriften-Elemente, nicht der Fliesstext (Philipp nannte Eyebrow + Ueberschrift).
Die #8bbecd-Akzente ("dringliche Behandlungsbeduerftigkeit") tragen eine INLINE-Farbe und bleiben
unberuehrt — inline schlaegt Stylesheet. */
.o3-kontakt-text strong{color:var(--o3-primary);}
/* Rechte Spalte („Hausarztvermittlung:") auf die Hoehe der LINKEN Ueberschrift
(„in Kontakt mit uns treten:") bringen — Philipp 17.07.
Hergeleitet, nicht geraten: 88px = Ring-Vorlauf der linken Spalte (.o3-kontakt-ecke, Z.1190),
damit beide Spalten gleich starten, + 32px = die Eyebrow-Zeile („WENN SIE"), die es rechts
nicht gibt. Ersetzt drei `
`-Spacer (3x28=84px), die das
Padding nur ungefaehr nachahmten und die Zielhoehe nie exakt treffen konnten. */
.o3-kontakt-text > div:not(.o3-kontakt-ecke){padding-top:120px;}
.o3-kontakt-text p > span{color:var(--o3-primary);}
/* Grids/WIR LEGEN in bottom-a: boxen wie Content */
.container-bottom-a .o3-grid-heading,.container-bottom-a .o3-cardgrid,.container-bottom-a .o3-intro{max-width:var(--o3-maxw);margin-left:auto;margin-right:auto;}
.container-bottom-a .o3-cardgrid{margin-bottom:2rem;}
/* Ring-Vorlauf AUCH hier — dieselbe Regel wie oben bei .container-banner (Z.1283), sie fehlte
in bottom-a schlicht. Ohne sie hat .o3-intro padding-top:0, der Ring steht aber unveraendert
96px (ecke2) bzw. 128px ueber der Textkante -> er ragte auf /leistungen exakt 64px in die
untere Bildreihe (gemessen 17.07.: Ring-Oberkante 2045 vs. Grid-Unterkante 2109).
Regel wie ueberall: padding-top == Ringueberstand -> der Ring endet buendig an der
Sektionsoberkante und beisst sich nie mit dem, was darueber liegt. */
.container-bottom-a .o3-intro{padding-top:128px;} /* normaler Ring: -128px */
.container-bottom-a .o3-intro:has(.o3-intro-ecke2){padding-top:96px;} /* ecke2-Ring: -96px */
@media (max-width:991px){ .container-bottom-a .o3-intro,
.container-bottom-a .o3-intro:has(.o3-intro-ecke2){padding-top:2.5rem;} }