/* # # # ##### ##### # # ##### # # ### # # # # # # # # # ## # # ## ## # # ## # ## # # ##### #### # # # # #### # # # ##### # # # # # # # # # # # # ## # # # # # # ## # ## # ##### # # ##### ##### # # ##### # # # # # # # # # # ##### #### ##### ### ## ## # # # # # # # # # #### # # # ##### # # # # # # # # # # # ##### #### ##### # # TOMEY Cases - front-end stylesheet Styles the case pages: doctors sidebar, text columns, optional table, image grid or slideshow and the CSS-only lightbox. Do not edit this file to customise a site - it is replaced with every update. Put your own rules into Components > TOMEY Cases > Options > Appearance; they are stored in the database and loaded after this file. @package com_tomeycases @author Sascha Heinemann @link https://heinemann.media @copyright (C) 2026 Sascha Heinemann, heinemann.media @license GNU General Public License version 2 or later; see LICENSE.txt */ /* Lato is served locally instead of hot-linking Google Fonts: for a German medical site the third-party request is a GDPR risk (LG Muenchen I, 3 O 17493/20). Files live in media/fonts/, taken from Google Fonts (SIL Open Font License). */ @font-face {font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/lato-300-italic-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: italic; font-weight: 300; font-display: swap; src: url(../fonts/lato-300-italic-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lato-300-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 300; font-display: swap; src: url(../fonts/lato-300-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 400; font-display: swap; src: url(../fonts/lato-400-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-ext.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;} @font-face {font-family: 'Lato'; font-style: normal; font-weight: 700; font-display: swap; src: url(../fonts/lato-700-latin.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;} /* ============================================================ * TOMEY Cases - front end (casia-case-page) * ============================================================ */ .casia-case-page.casia-own{max-width:1320px;margin:0 auto;padding:56px 20px 40px;} .casia-own .casia-case-page__grid{display:flex;gap:40px;align-items:stretch;} /* LEFT SIDEBAR The blue panel stretches over the full column height (align-items:stretch) while its content sticks to the top when scrolling, so nothing grows empty and the doctors stay next to the text. No max-height on purpose: with many doctors that would lock the remainder behind an inner scrollbar. ponytail: sticky needs #g-page-surround{overflow:visible} - Gantry's nucleus sets hidden. */ .casia-own .casia-case-page__sidebar{ /* order:-1 because the sidebar sits AFTER the content in the markup (reading order) */ order:-1;flex:0 0 300px;background:#0a1e5f;color:#fff;padding:36px 26px; } .casia-own .casia-case-page__sidebar-inner{position:sticky;top:20px;} .casia-own .casia-case-page__sidebar *{color:#fff;} .casia-own .casia-case-page__doctor{padding-bottom:24px;border-bottom:1px solid #ff373b;} .casia-own .casia-case-page__doctor + .casia-case-page__doctor{margin-top:24px;} .casia-own .casia-case-page__doctor img{display:block;width:100%;max-width:190px;height:auto;margin:0 0 14px;} .casia-own .casia-case-page__doctor p{margin:0;font-size:.9rem;line-height:1.5;color:rgba(255,255,255,.92);font-family:"Lato",Arial,sans-serif;} .casia-own .casia-case-page__doctor p.casia-case-page__doctor-name{margin:0 0 6px;font-size:1rem;font-weight:700;color:#fff;} /* RIGHT CONTENT */ .casia-own .casia-case-page__content{flex:1 1 auto;min-width:0;} /* Zurueck zur Uebersicht: klein, blau, mit rotem Pfeil beim Darueberfahren - dieselbe Sprache wie die roten Plus-Punkte der Aufzaehlungen. Sitzt ueber der Case-Nummer und ausserhalb der Textspalten, damit er die Balance nicht stoert. */ .casia-own .casia-case-page__back{ display:inline-block;margin:0 0 18px; font-family:"Lato",Arial,sans-serif;font-size:.85rem;font-weight:700; letter-spacing:.02em;text-decoration:none; /* !important, weil Templates Linkfarben gern per ID setzen: auf dieser Website liegt die Case-Seite in #g-header, und "#g-header a" (1-0-0) schlaegt jede Klassenregel von uns (0-2-0). Gemessen: der Link kam in rgba(236,238,239,.6) statt in Blau. Betrifft nur unsere eigenen Bedienelemente. */ color:#0a1e5f !important; } .casia-own .casia-case-page__back span{color:#ff373b;font-size:1.1rem;line-height:1;vertical-align:-1px;} .casia-own .casia-case-page__back:hover, .casia-own .casia-case-page__back:focus-visible{color:#ff373b !important;text-decoration:underline;} .casia-own .casia-case-page__textgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;align-items:start;} .casia-own .casia-case-page__textcol{min-width:0;} /* Automatischer Umbruch: EIN Feld, drei Spalten macht der Browser. column-fill balance verteilt gleichmaessig statt Spalte fuer Spalte zu fuellen - genau das, was wir beim Verteilen von Hand muehsam ausmessen mussten. break-inside verhindert, dass ein Bild oder ein Notiz-Block mitten in der Spalte zerrissen wird; bei Tabellen und Formularen taugt column-count nicht, die Tabelle steht deshalb ausserhalb des Fliesstextes. */ .casia-own .casia-case-page__textflow{ column-count:3;column-gap:28px;column-fill:balance; } /* NUR das zusammenhalten, was zerrissen keinen Sinn ergibt. Absaetze muessen umbrechen duerfen - sonst kann der Browser nicht ausgleichen und Spalte 1 laeuft ueber (gemessen: 655px gegen 406px in den Nachbarspalten). */ .casia-own .casia-case-page__textflow ul, .casia-own .casia-case-page__textflow ol, .casia-own .casia-case-page__textflow figure, .casia-own .casia-case-page__textflow table, .casia-own .casia-case-page__textflow .casia-note, .casia-own .casia-case-page__textflow blockquote, .casia-own .casia-case-page__textflow p:has(> .casia-case-page__zoom){break-inside:avoid;} /* Keine einzelne Zeile am Spaltenfuss oder -kopf */ .casia-own .casia-case-page__textflow p{orphans:2;widows:2;} .casia-own .casia-case-page__textflow h1{break-after:avoid;} .casia-own .casia-case-page__textflow > h2, .casia-own .casia-case-page__textflow > h3, .casia-own .casia-case-page__textflow > h4{break-after:avoid;} /* Der erste Absatz darf nicht allein oben in Spalte 1 stehen bleiben */ .casia-own .casia-case-page__textflow > p:first-of-type{break-before:avoid;} .casia-own .casia-case-page__tablecell--flow{margin-top:28px;overflow-x:auto;} /* German compounds such as "Hornhauterkrankungen" are wider than a 230px column; without this the word spills into the neighbouring one (measured: 91px). */ .casia-own .casia-case-page__textcol h1,.casia-own .casia-case-page__textcol p,.casia-own .casia-case-page__bullets li, .casia-own .casia-case-page__table td,.casia-own .casia-case-page__table th{overflow-wrap:break-word;hyphens:auto;} .casia-own .casia-case-page__textcol p.casia-case-page__label{margin:0 0 6px;font-size:.95rem;font-weight:600;color:#0a1e5f;} .casia-own .casia-case-page__textcol h1{margin:0 0 18px;font-family:"Lato",Arial,sans-serif;font-size:2.2rem;line-height:1.15;font-weight:300;font-style:italic;letter-spacing:-.3px;color:#0a1e5f;} .casia-own .casia-case-page__textcol p{margin:0 0 18px;font-size:.95rem;line-height:1.72;color:#000;} /* Sub-headings inside a column, as in the brochure: bold, blue, same size as the body text. The editor makes them with the format dropdown, no class needed. */ .casia-own .casia-case-page__textcol h2, .casia-own .casia-case-page__textcol h3{margin:24px 0 8px;font-family:"Lato",Arial,sans-serif;font-size:.95rem;line-height:1.4;font-weight:700;font-style:normal;color:#0a1e5f;} .casia-own .casia-case-page__textcol > h2:first-child, .casia-own .casia-case-page__textcol > h3:first-child{margin-top:0;} /* Zweite Ebene: schwarz statt blau, wie in der Broschuere */ .casia-own .casia-case-page__textcol h4{margin:16px 0 6px;font-family:"Lato",Arial,sans-serif;font-size:.95rem;line-height:1.4;font-weight:700;font-style:normal;color:#000;} /* Image inside the column text: spacing all round, never wider than the column. The editor may scale it down (the width attribute stays), but not break out. */ .casia-own .casia-case-page__textcol img{max-width:100%;height:auto;} .casia-own .casia-case-page__textcol .casia-case-page__zoom{margin:24px 0;} /* The editor usually wraps the image in a paragraph - its margin would add up otherwise */ .casia-own .casia-case-page__textcol p:has(> .casia-case-page__zoom){margin:0;} /* Caption under a picture: smaller, italic, in the TOMEY blue. In the column text either

or a

; in the gallery it comes from the caption field. The lightbox keeps its own white-on-dark rule further down. */ .casia-own .casia-case-page__textcol .casia-caption, .casia-own .casia-case-page__textcol figcaption, .casia-own .casia-case-page__gallery figcaption{margin:0 0 18px;font-size:.82rem;line-height:1.55;font-style:italic;color:#0a1e5f;} /* In the gallery the caption belongs to the picture above it, so it sits close */ .casia-own .casia-case-page__gallery figcaption{margin:8px 0 0;} /* Straight after the image the 24px of the zoom link would read as a gap */ .casia-own .casia-case-page__textcol p:has(> .casia-case-page__zoom) + .casia-caption, .casia-own .casia-case-page__textcol figure .casia-case-page__zoom + figcaption{margin-top:-16px;} /* Closing note at the end of a column: slightly smaller text behind a hairline that is exactly as tall as the text. A plain
counts as well, so the editor can use the toolbar button instead of the code view. */ .casia-own .casia-case-page__textcol .casia-note, .casia-own .casia-case-page__textcol blockquote{margin:24px 0 0;padding:0 0 0 16px;border-left:1px solid #0a1e5f;} .casia-own .casia-case-page__textcol .casia-note p, .casia-own .casia-case-page__textcol blockquote p, .casia-own .casia-case-page__textcol .casia-note li, .casia-own .casia-case-page__textcol blockquote li{font-size:.85rem;line-height:1.6;} /* Second variant: the same block with the red accent line */ .casia-own .casia-case-page__textcol .casia-note--red{border-left-color:#ff373b;} /* Without this the line overshoots the text by the last paragraph's margin */ .casia-own .casia-case-page__textcol .casia-note > :last-child, .casia-own .casia-case-page__textcol blockquote > :last-child{margin-bottom:0;} /* List bullets rendered as a red plus */ /* Works without the class as well, so a plain list from the editor looks the same. Editors never have to switch to the code view for this. */ .casia-own .casia-case-page__bullets,.casia-own .casia-case-page__textcol ul{margin:8px 0 0;padding:0;list-style:none;} .casia-own .casia-case-page__bullets li,.casia-own .casia-case-page__textcol ul li{position:relative;margin:0 0 14px;padding-left:18px;font-size:.95rem;line-height:1.65;color:#000;} .casia-own .casia-case-page__bullets li::before,.casia-own .casia-case-page__textcol ul li::before{content:"+";position:absolute;left:0;top:0;color:#ff373b;font-weight:700;line-height:1.65;} /* Optional table */ .casia-own .casia-case-page__table-title{margin:6px 0 10px;font-size:1.2rem;font-weight:700;color:#0a1e5f; /* Rendered as a inside the table, left aligned like the former

*/ caption-side:top;text-align:left;} .casia-own .casia-case-page__table{width:100%;border-collapse:collapse;margin:0;font-size:.9rem;} /* The colour is set explicitly on purpose: templates style their own tables, and inheriting leaves the cells almost invisible (measured on the customer's Helium: #eceeef on white). Never rely on the surrounding template for readable text. */ .casia-own .casia-case-page__table th,.casia-own .casia-case-page__table td{border:1px solid #7d8bab;padding:7px 9px;text-align:left;vertical-align:top;color:#000;background:#fff;} .casia-own .casia-case-page__table th{background:#0a1e5f;color:#fff;font-weight:600;} /* color:#000 rather than inherit - inheriting picks up the template's table colour again and row headers turn near-white (the very bug the rule above fixes). */ .casia-own .casia-case-page__table th[scope="row"]{font-weight:700;background:#fff;color:#000;} /* The table lives in the same grid as the text columns (row 2) so it sits directly below the columns it belongs to, instead of below the tallest one. */ .casia-own .casia-case-page__tablecell{min-width:0;overflow-x:auto;margin-top:6px;} /* Die Flow-Variante steht unter dem gesamten Text und braucht mehr Luft - die Regel muss NACH der allgemeinen stehen, sonst gewinnen die 6px (gemessen). */ .casia-own .casia-case-page__tablecell--flow{margin-top:28px;} /* Image grid, decoupled and placed directly below the text */ .casia-own .casia-case-page__imagegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin-top:28px;} .casia-own .casia-case-page__imagecol{min-width:0;display:grid;gap:16px;align-content:start;} .casia-own .casia-case-page__imagecol figure{margin:0;} .casia-own .casia-case-page__imagecol img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:fill;} /* ------------------------------------------------------------------ * Image slideshow - no JavaScript involved. * Base layer: scroll-snap (swipe, scroll wheel, keyboard) works everywhere. * On top: dots and arrows via the CSS carousel pseudo-elements. Where the * browser cannot do those (currently Firefox/Safari) the slider stays usable * by swiping. * ------------------------------------------------------------------ */ .casia-own .casia-case-page__slider{ anchor-name:--casia-slider; display:flex;gap:20px;margin-top:28px; overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;scroll-behavior:smooth; scrollbar-width:thin;scrollbar-color:#9ba7c0 transparent; } .casia-own .casia-case-page__slider:focus-visible{outline:2px solid #ff373b;outline-offset:3px;} .casia-own .casia-case-page__slider figure{flex:0 0 100%;margin:0;scroll-snap-align:center;} .casia-own .casia-case-page__slider img{display:block;width:100%;height:auto;aspect-ratio:1.3333333333;object-fit:contain;} @media (prefers-reduced-motion:reduce){ .casia-own .casia-case-page__slider{scroll-behavior:auto;} .casia-own .casia-case-page__gallery .casia-case-page__zoom img{transition:none;} .casia-own .casia-case-page__gallery .casia-case-page__zoom:hover img, .casia-own .casia-case-page__gallery .casia-case-page__zoom:focus-visible img{transform:none;} } @supports (scroll-marker-group: after){ .casia-own .casia-case-page__slider{scroll-marker-group:after;scrollbar-width:none;} .casia-own .casia-case-page__slider::-webkit-scrollbar{display:none;} /* Dots below the slideshow */ .casia-own .casia-case-page__slider::scroll-marker-group{display:flex;justify-content:center;gap:10px;padding-top:14px;} .casia-own .casia-case-page__slider figure::scroll-marker{ content:"";width:12px;height:12px;border-radius:50%; border:1px solid #0a1e5f;background:transparent;cursor:pointer; } .casia-own .casia-case-page__slider figure::scroll-marker:hover{background:#9ba7c0;} .casia-own .casia-case-page__slider figure::scroll-marker:target-current{background:#ff373b;border-color:#ff373b;} .casia-own .casia-case-page__slider figure::scroll-marker:focus-visible{outline:2px solid #ff373b;outline-offset:2px;} } /* Arrows inside the image, revealed on hover/focus. * Chrome only understands the logical keywords (inline-start/-end); without anchor * positioning the buttons drop below the slider, hence position-anchor on * --casia-slider. At either end the browser disables the matching arrow itself. */ @supports (scroll-marker-group: after) and (anchor-name: --a){ .casia-own .casia-case-page__slider::scroll-button(inline-start), .casia-own .casia-case-page__slider::scroll-button(inline-end){ position:absolute;position-anchor:--casia-slider; top:calc(anchor(--casia-slider center) - 22px); width:44px;height:44px;border:0;border-radius:50%;cursor:pointer; background:rgba(10,30,95,.85);color:#fff;font-size:1.4rem;line-height:1; opacity:0;transition:opacity .18s ease, background .18s ease; } .casia-own .casia-case-page__slider::scroll-button(inline-start){content:"\2039";left:calc(anchor(--casia-slider left) + 14px);} .casia-own .casia-case-page__slider::scroll-button(inline-end){content:"\203A";left:calc(anchor(--casia-slider right) - 58px);} .casia-own .casia-case-page__slider:hover::scroll-button(inline-start), .casia-own .casia-case-page__slider:hover::scroll-button(inline-end), .casia-own .casia-case-page__slider:focus-within::scroll-button(inline-start), .casia-own .casia-case-page__slider:focus-within::scroll-button(inline-end){opacity:1;} .casia-own .casia-case-page__slider::scroll-button(*):hover{background:#ff373b;} .casia-own .casia-case-page__slider::scroll-button(*):focus-visible{opacity:1;outline:2px solid #ff373b;outline-offset:2px;} .casia-own .casia-case-page__slider::scroll-button(*):disabled{opacity:0 !important;pointer-events:none;} /* Touch devices have no hover, so show the arrows permanently there */ @media (hover:none){ .casia-own .casia-case-page__slider::scroll-button(inline-start), .casia-own .casia-case-page__slider::scroll-button(inline-end){opacity:.9;} } } /* Zoom link wrapped around every image */ .casia-own .casia-case-page__zoom{display:block;cursor:zoom-in;} .casia-own .casia-case-page__zoom:focus-visible{outline:2px solid #ff373b;outline-offset:2px;} /* ------------------------------------------------------------------ * Lightbox - no JavaScript, driven by :target. * The arrows are links to the neighbouring image, closing returns to the source. * When media/js/lightbox.js is present it takes over and opens via the .is-open * class instead: focus inside the dialog, Escape, no history entries and no jump * on close. Without JavaScript :target remains a fully working fallback. * ------------------------------------------------------------------ */ .casia-lightbox{display:none;} .casia-lightbox:target,.casia-lightbox.is-open{ display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px; position:fixed;inset:0;z-index:999;padding:24px; background:rgb(4,12,38); } /* Keep the page behind the lightbox from scrolling. scrollbar-gutter keeps the width stable, otherwise the layout jumps by the scrollbar width on open. */ html:has(.casia-lightbox:target),html:has(.casia-lightbox.is-open){overflow:hidden;scrollbar-gutter:stable;} .casia-lightbox:target,.casia-lightbox.is-open{overscroll-behavior:contain;} /* Mute the slider controls while the lightbox is open - Chrome would otherwise paint dots and arrows on top of the overlay. */ body:has(.casia-lightbox:target) .casia-case-page__slider::scroll-marker-group, body:has(.casia-lightbox.is-open) .casia-case-page__slider::scroll-marker-group{display:none;} body:has(.casia-lightbox:target) .casia-case-page__slider::scroll-button(*), body:has(.casia-lightbox.is-open) .casia-case-page__slider::scroll-button(*){display:none;} .casia-lightbox__backdrop{position:absolute;inset:0;cursor:zoom-out;} /* Bild und Unterschrift teilen sich die Hoehe: vorher war das Bild fest auf 84vh und die Unterschrift stand darunter im Nichts - bei langem Text (die Quellenangabe in Case 1 ist vier Zeilen lang) lief sie unten aus dem Bild heraus. Jetzt schrumpft das Bild so weit, wie die Unterschrift Platz braucht, und die Unterschrift selbst bekommt eine Obergrenze mit eigenem Scrollbereich. 34px bleiben fuer den Zaehler. */ .casia-lightbox__figure{ grid-column:2;margin:0;justify-self:center;position:relative; display:flex;flex-direction:column;align-items:center; max-width:min(1100px,100%);max-height:calc(100dvh - 82px); } .casia-lightbox__figure img{flex:0 1 auto;min-height:0;max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;display:block;background:#fff;} /* Linksbuendig auf Bildbreite - zentriert brach der Text bei mehreren Zeilen aus */ .casia-lightbox__figure figcaption{flex:0 0 auto;align-self:stretch;color:#fff;font-size:.9rem;line-height:1.5;margin-top:12px;text-align:left;max-height:26vh;overflow-y:auto;overscroll-behavior:contain;} .casia-lightbox__nav,.casia-lightbox__close{ position:relative;z-index:1;display:grid;place-items:center;box-sizing:border-box; width:52px;height:52px;border-radius:50%;text-decoration:none; background:rgba(255,255,255,.28);font-size:1.9rem;line-height:1; color:#fff !important; /* siehe oben: #g-header a ueberschreibt sonst */ } /* Die Zeichenflaeche von ‹ und › sitzt 4px unter der Mitte der em-Box (gemessen), die Pfeile haengen sonst sichtbar zu tief im Kreis. 8px unten = 4px nach oben. */ .casia-lightbox__nav{padding-bottom:8px;} .casia-lightbox__nav:hover,.casia-lightbox__close:hover{background:#ff373b;color:#fff;} .casia-lightbox__nav:focus-visible,.casia-lightbox__close:focus-visible{outline:2px solid #fff;outline-offset:2px;} .casia-lightbox__nav--prev{grid-column:1;} .casia-lightbox__nav--next{grid-column:3;} .casia-lightbox__close{position:absolute;top:18px;right:18px;width:44px;height:44px;font-size:1.6rem;} .casia-lightbox__count{position:absolute;bottom:18px;left:0;right:0;text-align:center;color:rgba(255,255,255,.75);font-size:.85rem;margin:0;} @media (max-width:767px){ /* On phones two 40px arrow columns plus padding eat 112 of 375px, which made the "enlarged" image SMALLER than the thumbnail (measured 249x187 -> 248x165). The arrows therefore sit on top of the image here instead of beside it, and stay at the 44px the platform guidelines ask for. */ .casia-lightbox:target,.casia-lightbox.is-open{padding:12px;gap:4px;grid-template-columns:minmax(0,1fr);} .casia-lightbox__figure{grid-column:1;width:100%;} .casia-lightbox__figure img{max-height:76vh;} .casia-lightbox__nav{ position:absolute;top:50%;transform:translateY(-50%); width:44px;height:44px;font-size:1.5rem; background:rgba(4,12,38,.72); } .casia-lightbox__nav--prev{left:8px;grid-column:1;} .casia-lightbox__nav--next{right:8px;grid-column:1;} } @media (max-width:767px){ .casia-own .casia-case-page__textflow{column-count:1;} } @media (max-width:1199px){ .casia-own .casia-case-page__grid{display:grid;grid-template-columns:minmax(0,1fr);} /* Single column: the sidebar simply flows along (it is last in the markup), no sticky */ .casia-own .casia-case-page__sidebar{flex:none;order:0;} .casia-own .casia-case-page__sidebar-inner{position:static;} /* Doctor card turned sideways: small photo on the left, name and clinic beside it. Grid rather than flex, because the two

would end up next to each other - this way the photo simply spans both rows. Without a photo it stays a block. */ .casia-own .casia-case-page__doctor:has(img){ display:grid;grid-template-columns:96px 1fr;column-gap:16px; /* grid-template-rows:auto 1fr - the photo spans both rows and is taller than the text. Without fixed roles the browser spreads the surplus height across BOTH rows and the clinic line drifts away from the name. This way only the second row absorbs it. */ grid-template-rows:auto 1fr;align-items:start;align-content:start; } .casia-own .casia-case-page__doctor:has(img) img{grid-column:1;grid-row:1 / span 2;width:100%;max-width:96px;margin:0;} .casia-own .casia-case-page__doctor:has(img) > p{grid-column:2;} /* The last line absorbs the remaining space, otherwise the divider sticks to the photo */ .casia-own .casia-case-page__doctor:has(img) > p:last-child{align-self:start;} .casia-own .casia-case-page__textgrid,.casia-own .casia-case-page__imagegrid{grid-template-columns:minmax(0,1fr);gap:22px;} /* Single column: drop the row/column spans coming from the inline style so everything stacks in DOM order (table last) */ .casia-own .casia-case-page__textgrid > *{grid-column:1 !important;grid-row:auto !important;} .casia-own .casia-case-page__textcol h1{font-size:1.9rem;} } /* ------------------------------------------------------------------ * Tablet (768-1199px): two text columns, sidebar moves below. * These breakpoints are NOT invented, they are the template's own: Gantry's * .g-container steps through 480 / 768 / 960 / 1200 (768 and 1200 match * Bootstrap). Breaking in the middle of a step would switch to two columns * while the container is still narrow. * One column would mean ~660px line length (too long); three columns next to * the sidebar only reach ~150px below 1200px (too narrow), because that is * where Gantry's container finally gets its full width. Without the sidebar * beside them the columns get 412px each here instead of 279px. * The columns are placed EXPLICITLY: column 1 left, column 2 above column 3 * on the right. Left to flow, column 3 would only start below the taller * column 1 and tear a hole into the right half. grid-template-rows:auto 1fr * makes sure the surplus height of column 1 only feeds the second row. * ------------------------------------------------------------------ */ @media (min-width:768px) and (max-width:1199px){ .casia-own .casia-case-page__textflow{column-count:2;} /* Manuell verteilte Spalten: hier fliessen sie nacheinander in ZWEI ausgewogene CSS-Spalten, wie beim automatischen Layout. Die feste Zuordnung (Spalte 1 links, 2+3 rechts) riss ein Loch, sobald Spalte 1 kurz war - gemessen bei Case 1: links 272px Inhalt neben 993px rechts. */ .casia-own .casia-case-page__textgrid{display:block;column-count:2;column-gap:28px;} .casia-own .casia-case-page__textcol{break-inside:auto;} .casia-own .casia-case-page__textcol > :first-child{margin-top:0;} /* The table always spans the full width - halved it turns into a scrolling sausage */ .casia-own .casia-case-page__tablecell{column-span:all;margin-top:28px;} .casia-own .casia-case-page__imagegrid{grid-template-columns:repeat(2,minmax(0,1fr));} /* The sidebar runs full width here, so the doctor cards sit side by side - otherwise it becomes a very long, thin list. */ .casia-own .casia-case-page__sidebar-inner{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 32px;} .casia-own .casia-case-page__doctor + .casia-case-page__doctor{margin-top:0;} } /* From the 960px step onwards two doctor cards leave too much empty space */ @media (min-width:960px) and (max-width:1199px){ .casia-own .casia-case-page__sidebar-inner{grid-template-columns:repeat(3,minmax(0,1fr));} } /* ------------------------------------------------------------------ * Print / PDF - case reports do get printed and filed. * Chrome drops background colours when "background graphics" is off, which * would leave the white doctor names invisible on white paper. * ------------------------------------------------------------------ */ @media print{ .casia-case-page.casia-own{max-width:none;padding:0;} .casia-own .casia-case-page__grid{display:block;} .casia-own .casia-case-page__sidebar{ background:#fff !important;color:#000 !important; border-top:2px solid #0a1e5f;padding:12px 0 0;margin-top:18px; } .casia-own .casia-case-page__sidebar *{color:#000 !important;} .casia-own .casia-case-page__sidebar-inner{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 20px;position:static;} .casia-own .casia-case-page__textflow{column-count:2;column-gap:22px;} .casia-own .casia-case-page__textgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 22px;} .casia-own .casia-case-page__textcol:nth-child(1){grid-column:1 !important;grid-row:1 / span 2 !important;} .casia-own .casia-case-page__textcol:nth-child(2){grid-column:2 !important;grid-row:1 !important;} .casia-own .casia-case-page__textcol:nth-child(3){grid-column:2 !important;grid-row:2 !important;} .casia-own .casia-case-page__tablecell{grid-column:1 / -1 !important;grid-row:3 !important;overflow:visible;} .casia-own .casia-case-page__table th{background:#fff !important;color:#000 !important;border:1px solid #000;} .casia-own .casia-case-page__table{break-inside:avoid;} .casia-own .casia-case-page__imagegrid{grid-template-columns:repeat(2,minmax(0,1fr));} .casia-own .casia-case-page__slider{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;} .casia-own .casia-case-page__slider figure{flex:none;} /* Overlays have no business on paper */ .casia-lightbox{display:none !important;} .casia-own .casia-case-page__zoom{text-decoration:none;} } /* Sanftes Heranzoomen beim Darueberfahren. Der Ausschnitt bleibt gleich gross, nur das Bild waechst - deshalb overflow:hidden auf dem Link. Wer Bewegung abgestellt hat, bekommt sie nicht (Block weiter unten). */ .casia-own .casia-case-page__gallery .casia-case-page__zoom{display:block;overflow:hidden;} .casia-own .casia-case-page__gallery .casia-case-page__zoom img{transition:transform .35s ease;} .casia-own .casia-case-page__gallery .casia-case-page__zoom:hover img, .casia-own .casia-case-page__gallery .casia-case-page__zoom:focus-visible img{transform:scale(1.06);} /* Zahl auf einer Gruppen-Kachel: sagt, wie viele Aufnahmen in der Grossansicht warten */ .casia-own .casia-case-page__imagecol .casia-case-page__zoom, .casia-own .casia-case-page__textcol .casia-case-page__zoom{position:relative;} /* Weitere Bilder einer Gruppe im Fliesstext: nur ueber die Grossansicht erreichbar */ .casia-own .casia-case-page__textcol .casia-case-page__hidden{display:none;} .casia-own .casia-case-page__count{ position:absolute;right:10px;bottom:10px; min-width:26px;height:26px;padding:0 7px;border-radius:13px; display:inline-flex;align-items:center;justify-content:center; background:rgba(10,30,95,.88);color:#fff; font-family:"Lato",Arial,sans-serif;font-size:.8rem;font-weight:700;line-height:1; } .casia-own .casia-case-page__zoom:hover .casia-case-page__count{background:#ff373b;} /* Bild in einer Tabellenzelle: feste Breite. width:100% in einer Zelle mit width:1% schrumpft auf die Mindestbreite zusammen - gemessen 28px statt 130. */ .casia-own .casia-case-page__table .casia-case-page__cellimage{display:block;width:130px;max-width:100%;height:auto;} .casia-own .casia-case-page__table td:has(.casia-case-page__cellimage){width:150px;padding:8px 10px;} /* Stapel: zwei versetzte Blaetter hinter dem Bild, gezeichnet mit box-shadow (weisse Fuellung + Kante). Braucht Luft rechts/oben, sonst schneidet die Zelle sie ab. */ .casia-own .casia-case-page__table .casia-case-page__cellimage--stapel{ box-shadow:4px -4px 0 -1px #fff, 4px -4px 0 0 #9ba7c0, 8px -8px 0 -1px #fff, 8px -8px 0 0 #9ba7c0; margin:9px 9px 0 0; } .casia-own .casia-case-page__table td:has(.casia-case-page__cellimage--stapel){width:160px;} .casia-own .casia-case-page__zoom--zelle{display:inline-block;position:relative;} .casia-own .casia-case-page__zoom--zelle .casia-case-page__count{right:6px;bottom:6px;min-width:22px;height:22px;font-size:.72rem;} @media (max-width:767px){ .casia-own .casia-case-page__table .casia-case-page__cellimage{width:90px;} .casia-own .casia-case-page__table td:has(.casia-case-page__cellimage){width:106px;} /* Kundenwunsch: oben zum Fliesstext etwas mehr Platz, wirkte gequetscht */ .casia-own .casia-case-page__tablecell, .casia-own .casia-case-page__tablecell--flow{margin-top:24px;} /* Kompaktere Zellen, damit eine 3-Spalten-Tabelle ohne Schieben auf 390px passt */ .casia-own .casia-case-page__table{font-size:.85rem;} .casia-own .casia-case-page__table th,.casia-own .casia-case-page__table td{padding:6px 7px;} } /* Handy: Arztkarte wieder gestapelt - Foto UEBER dem Text (Kundenwunsch). Die Quer-Variante (Foto links) bleibt fuers Tablet, wo zwei Karten nebeneinander stehen. */ @media (max-width:600px){ .casia-own .casia-case-page__doctor:has(img){display:block;} .casia-own .casia-case-page__doctor:has(img) img{max-width:120px;margin:0 0 12px;} }