/* ===================================================================== RNR – Cassiopeia Child-Template (cassiopeia_rnr) Internes Intranet · Joomla 6.1.1 --------------------------------------------------------------------- Ablage: media/templates/site/cassiopeia_rnr/css/user.css Hinweis: Ein Child laedt NICHT die user.css des Parents – alles steht bewusst hier in EINER Datei. Fonts: Webfonts lokal (Fontsource Variable woff2, Latin) in css/fonts/ – umschaltbar via --rnr-font. Kein externer Call, DSG-konform. Fallback: Segoe UI / Arial. Logo: Ueber Template-Stil > Advanced > Brand/Logo gesetzt. --------------------------------------------------------------------- INHALT 1 · Grundlagen (Variablen, Font, Frontend-Editor-Fixes) 2 · Header (blauer Balken, sticky, Logo) 2a· Footer (grau, Full-Width, fluchtend mit Header) 3 · Hauptmenue (Navigation oben, Dropdowns) 4 · Sidebar-Module (rechte Spalte, rnr-sidebar-menu) 5 · Content-Bereich (Typografie, Links, Ueberschriften) 6 · Buttons (Primary-Buttons im RNR-Blau) 7 · Header-Layout (Logo + Menue in einer Zeile, Flex) 8 · Tabellen-System (rnr-table Basis: Farben, Card, Filter) 9 · Tabellen-Varianten (9a Kontakte, 9b Planung, 9c Matrix, 9d rnr-top: Zellen oben ausgerichtet) 10 · Linklisten (rnr-linklist, rnr-double) 11 · Badges & Marker (Dateityp, KM, Warn, Pikett, Extern-Pfeil) 12 · Spezialelemente (Notfall-Banner, Standort-Badges, farbige Sektions-Banner) 13 · Utilities (Bild-Float, Rechner-Eingabefelder) 14 · Kacheln & Video (rnr-tiles / rnr-tile, rnr-video) --------------------------------------------------------------------- WICHTIG zur Reihenfolge: Die Varianten in Abschnitt 9 ueberschreiben Basis-Regeln aus Abschnitt 8 (gleiche Spezifitaet) und muessen deshalb NACH Abschnitt 8 stehen bleiben. ===================================================================== */ /* ===================================================================== 1 · GRUNDLAGEN ===================================================================== */ /* --- Webfonts (lokal, kein externer Call, DSG-konform) --------------- Fontsource Variable, Latin-Subset (woff2), in css/fonts/. Nur die via --rnr-font aktiv gesetzte Schrift wird vom Browser geladen (die anderen bleiben ungenutzt = kein Download). ZUM TESTEN NUR --rnr-font unten aendern, Cache leeren, Strg+F5. --------------------------------------------------------------------- */ @font-face { font-family: "Inter"; src: url("fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Public Sans"; src: url("fonts/public-sans-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("fonts/source-sans-3-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } :root { --rnr-header-bg: #0066a3; /* RNR-Blau, zentral steuerbar */ /* >>> ZUM TESTEN HIER UMSCHALTEN <<< "Inter" | "Public Sans" | "Source Sans 3" */ --rnr-font: "Inter"; } /* Aktive Schrift zentral setzen. 1) font-family direkt auf body (Fliesstext). 2) Cassiopeia-Font-Variablen auf body legen -> gilt template-weit fuer Ueberschriften, Menue, Sidebar-Titel und Buttons. body ist im DOM naeher am Element als das :root, in das Cassiopeia diese Variablen per Inline-Style injiziert, und ueberschreibt sie damit ohne Hacks. Alles ueber --rnr-font gesteuert -> Umschalten wirkt weiterhin ueberall. */ body { font-family: var(--rnr-font), "Segoe UI", Roboto, Arial, sans-serif; --cassiopeia-font-family-body: var(--rnr-font), "Segoe UI", Roboto, Arial, sans-serif; --cassiopeia-font-family-headings: var(--rnr-font), "Segoe UI", Roboto, Arial, sans-serif; } /* RNR: "Als Kopie speichern" im Frontend-Artikelformular ausblenden */ [data-submit-task="article.save2copy"] { display: none !important; } /* ===================================================================== 2 · HEADER (blau, Full-Width, sticky) ===================================================================== */ header.container-header { background-color: var(--rnr-header-bg); background-image: none; /* evtl. Cassiopeia-Verlauf entfernen */ position: sticky; /* Balken bleibt beim Scrollen oben */ top: 0; z-index: 1000; /* bei Ueberdeckung ggf. auf 1020 erhoehen */ } /* Logo-Hoehe im Header (Wert bei Bedarf anpassen, 36–48px ueblich) */ header.container-header .navbar-brand img { height: 50px; width: auto; } /* Feste Balkenhöhe – überstimmt jedes Kind-Padding und min-height */ header.container-header { height: 68px; min-height: 68px; align-items: center; /* overflow: hidden; ← DIESE Zeile raus */ } /* Innere Blöcke dürfen nicht höher werden als der Balken */ header.container-header .navbar, header.container-header .navbar-collapse, header.container-header > .grid-child.container-nav { min-height: 0; } /* ===================================================================== 2a · FOOTER (grau, Full-Width) Grau spannt voll, Inhalt wird auf Content-Breite eingerueckt – nutzt dieselbe --rnr-content-max wie der Header, fluchtet also mit. ===================================================================== */ .container-footer.footer.full-width { background-image: none; /* Cassiopeia-Gradient entfernen */ background-color: #f2f2f2; color: #555; font-size: 13px; margin-top: 3rem; padding-block: 1.5rem; padding-inline: max(1rem, calc((100% - var(--rnr-content-max)) / 2)); } .container-footer.footer.full-width a { color: #0066a3; text-decoration: none; } .container-footer.footer.full-width a:hover { text-decoration: underline; } /* ===================================================================== 3 · HAUPTMENUE (obere Navigation) ===================================================================== */ /* Schrift kleiner + vertikal kompakter (Links UND Toggler-Button) */ .container-header .metismenu > li > a, .container-header .metismenu > li > button { font-size: 16px; padding-top: 6px; padding-bottom: 6px; } /* --------------------------------------------------------------------- 3a · Dropdown (Submenu) Metismenu ist von Haus aus klickbasiert – Hover wird per CSS erzwungen. focus-within = Tastatur-Nutzer bekommen das Menue beim Tabben. --------------------------------------------------------------------- */ .container-header .metismenu-item:hover > .mm-collapse, .container-header .metismenu-item:focus-within > .mm-collapse { display: block; height: auto; /* falls nach Klick JS-Inline-Style stoert: !important */ } /* Grauer Kasten mit Radius + weichem Schatten */ .container-header .metismenu .mm-collapse { background-color: #f2f2f2; border: 1px solid #e0e0e0; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.12); min-width: 210px; padding: 6px; list-style: none; } /* Trennlinie auf dem Link -> endet durch das Box-Padding eingerueckt */ .container-header .metismenu .mm-collapse > li { border-bottom: none; border-radius: 6px; /* rundet die Hover-Flaeche */ } .container-header .metismenu .mm-collapse > li:not(:last-child) > a { border-bottom: 1px solid #e0e0e0; } /* Eintraege: volle Breite, kompakt, 14px */ .container-header .metismenu .mm-collapse > li > a { display: block; width: 100%; box-sizing: border-box; padding: 6px 14px; font-size: 14px; text-decoration: none; transition: background-color .15s ease; } /* Hover-Highlight ueber volle Breite (auf dem li), ohne Unterstrich */ .container-header .metismenu .mm-collapse > li:hover { background-color: #e2e2e2; } .container-header .metismenu .mm-collapse > li > a:hover { text-decoration: none; } /* Top-Level-Eintrag wird Anker für das absolute Dropdown */ .container-header .metismenu > li { position: relative; } /* Dropdown schwebt unter dem Balken, statt ihn zu dehnen */ .container-header .metismenu .mm-collapse { position: absolute; top: 100%; left: 0; z-index: 1001; /* über dem Seiteninhalt */ } /* --------------------------------------------------------------------- 3b · MOBILE (Hamburger-Modus, < 992px = Cassiopeia-Breakpoint) Nimmt die Desktop-Regeln zurueck, die im aufgeklappten Hamburger- Menue kollidieren: feste Headerhoehe (68px) schnitt das Menue oben ab, position:absolute liess Untermenues transparent schweben. Ziel: minimal-funktional (lesbar, bedienbar), kein Mobile-Redesign. --------------------------------------------------------------------- */ @media (max-width: 991.98px) { /* Header darf mit dem aufgeklappten Menue wachsen */ header.container-header { height: auto; min-height: 68px; flex-wrap: wrap; } /* Aufgeklapptes Hauptmenue: deckender weisser Kasten auf voller Breite */ header.container-header .navbar-collapse { width: 100%; background-color: #fff; border-radius: 10px; box-shadow: 0 6px 20px rgba(0,0,0,.15); padding: 8px; margin-bottom: 10px; } /* Menuepunkte im Fluss stapeln, lesbar auf Weiss */ header.container-header .metismenu > li > a, header.container-header .metismenu > li > button { color: #1f2d3a; padding: 10px 12px; } /* Untermenues: im Fluss statt absolut, eingerueckt, ohne Schatten */ .container-header .metismenu .mm-collapse { position: static; box-shadow: none; border: none; background-color: #f7fafc; margin: 0 0 4px 12px; } /* Hover-Aufklappen ist Touch-fremd -> nur Klick (Metismenu-Default) */ .container-header .metismenu-item:hover > .mm-collapse { display: revert; height: revert; } /* Suche: volle Breite unterm Menue statt margin-left:auto */ header.container-header .container-search { margin-left: 0; width: 100%; padding-bottom: 10px; } header.container-header .container-search input { width: 100%; } } /* ===================================================================== 4 · SIDEBAR-MODULE (rechts) Aktivierung pro Modul: Module Class Suffix " rnr-sidebar-menu" (mit fuehrendem Leerzeichen!). Wirkt fuer Module mit UND ohne Titel. ===================================================================== */ /* Card-Chrome neutralisieren (Rahmen, Schatten, grauer Titelbalken). No-op bei Modulen ohne Titelanzeige – schadet dort nicht. */ .rnr-sidebar-menu, .rnr-sidebar-menu.card, .rnr-sidebar-menu .card { border: none; box-shadow: none; background: none; padding: 0; } .rnr-sidebar-menu .card-header { background: none; border: none; border-bottom: 1px solid color-mix(in srgb, var(--rnr-header-bg) 35%, #fff); margin-bottom: 6px; padding: 12px 0 6px 0; font-weight: 600; color: #1f2d3a; } .rnr-sidebar-menu .card-body { padding: 0; } /* Menue-Grundgeruest */ .rnr-sidebar-menu ul.mod-menu { list-style: none; margin: 0; padding: 0; } /* Feine, helle Trennlinie zwischen den Eintraegen (nicht aussen) – gibt Struktur, ohne schwer zu wirken. Hover-Flaeche bleibt. */ .rnr-sidebar-menu ul.mod-menu > li:not(:last-child) { border-bottom: 1px solid #eef2f6; } /* Eintraege: volle Breite, abgerundet, 14px */ .rnr-sidebar-menu ul.mod-menu > li > a { display: block; width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 6px; font-size: 14px; text-decoration: none; transition: background-color .15s ease, color .15s ease; } .rnr-sidebar-menu ul.mod-menu > li > a:hover { background-color: #eef4fa; /* leichter Blau-Ton statt Grau */ } /* Linkfarbe im Modul (kein Hover-Unterstrich – Flaeche reicht) */ .rnr-sidebar-menu a { color: #0066a3; text-decoration: none; } .rnr-sidebar-menu a:hover { color: #004d7a; } /* --- Notfall hervorheben --------------------------------------------- Voraussetzung: dem Notfall-Menueeintrag im Backend unter "Link-Typ > Link-CSS-Style" die Klasse rnr-notfall geben. (Ohne Klasse passiert nichts – der Eintrag sieht dann normal aus.) */ .rnr-sidebar-menu a.rnr-notfall { color: #b3261e; font-weight: 600; } .rnr-sidebar-menu a.rnr-notfall:hover { color: #8a1d17; background-color: #fdeeee; } /* --------------------------------------------------------------------- 4b · Gruppen-Labels in der Sidebar (Menue-Typ "Ueberschrift") RESERVE / aktuell ungenutzt: bewusst drin fuer den Fall, dass das Menue spaeter deutlich waechst und Gruppen sinnvoll werden. Voellig INERT, solange keine "Ueberschrift"-Eintraege im Menue existieren -> keine Wirkung auf die flache Liste. Aktivierung: einfach "Ueberschrift"-Eintraege im Menue anlegen. --------------------------------------------------------------------- */ .rnr-sidebar-menu ul.mod-menu > li > span { display: block; padding: 6px 10px 2px; margin-top: 12px; /* Stellschraube: mehr = klarere Gruppentrennung */ font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: #8a99a8; } /* erstes Label braucht oben keinen Extra-Abstand */ .rnr-sidebar-menu ul.mod-menu > li:first-child > span { margin-top: 0; } /* Label-Zeilen tragen keine Trennlinie */ .rnr-sidebar-menu ul.mod-menu > li:has(> span) { border-bottom: none; } /* --------------------------------------------------------------------- 4a · Login-Modul dezent (rnr-login) Nimmt die Anmelde-Box optisch zurueck (Utility-Box statt Hauptblock). Aktivierung: dem Login-Modul den Class Suffix " rnr-login" geben (mit fuehrendem Leerzeichen). Ohne Suffix keine Wirkung. --------------------------------------------------------------------- */ .rnr-login.card, .rnr-login .card, .rnr-login { background: #f8f9fa; border: 1px solid #e6e9ec; border-radius: 8px; box-shadow: none; overflow: hidden; } .rnr-login .card-header { background: none; border: none; padding: 12px 14px 6px; font-size: 15px; font-weight: 600; color: #475569; /* gedaempft statt schwarz */ } .rnr-login .card-body { padding: 6px 14px 14px; } .rnr-login input[type="text"], .rnr-login input[type="password"] { font-size: 14px; padding: .4rem .6rem; } .rnr-login label { font-size: 13px; color: #5a6b7a; } .rnr-login .btn { font-size: 14px; padding: .45rem .6rem; } /* Hilfslinks (Passwort/Benutzername vergessen, Registrieren) kleiner */ .rnr-login a { font-size: 13px; color: #5a6b7a; } .rnr-login a:hover { color: #004d7a; } /* mehr Luft zwischen den Sidebar-Modulen */ .container-sidebar-right .card { margin-bottom: 1.5rem; } /* ===================================================================== 5 · CONTENT-BEREICH ===================================================================== */ .container-component { font-size: 14px; } /* Links: blau, Unterstrich nur bei Hover, dabei eine Stufe dunkler */ .container-component a { color: #0066a3; text-decoration: none; } .container-component a:hover { color: #004d7a; text-decoration: underline; } /* Seitentitel in RNR-Blau */ .container-component .page-header h1 { color: var(--rnr-header-bg); } /* h1: Abstand oben zum Header */ .container-component h1 { margin-top: 1rem; margin-bottom: 1rem; } /* Abschnitts-Überschriften: Luft oben UND unten */ .container-component h2, .container-component h3, .container-component h4 { margin-top: 2rem; margin-bottom: 1rem; } /* Titel-Gewicht: Semibold – Inter traegt 600 sauber (kein Arial-Klotz) */ .container-component h1, .container-component h2, .container-component h3, .container-component h4 { font-weight: 600; } /* Groessen-Skala der Content-Ueberschriften (~1.25 pro Stufe). Jede Zeile ist eine Stellschraube. H2 traegt zusaetzlich Unterstrich + Farbe (siehe Regel weiter unten). */ .container-component h1 { font-size: 2.2rem; } .container-component h2 { font-size: 1.55rem; } .container-component h3 { font-size: 1.25rem; } .container-component h4 { font-size: 1.05rem; } /* H2 als Sektions-Anker: feiner blauer Unterstrich ueber die Contentbreite. NUR H2 – H3 wird an anderer Stelle auch fuer Rapport-Eintraege genutzt, soll dort also KEINE Linie bekommen. Sektionen, die aktuell als H3 ausgezeichnet sind (z.B. MTRA), sollten inhaltlich auf H2 gehoben werden; alternativ per Klasse markieren (siehe unten, auskommentiert). */ .container-component h2 { padding-bottom: .35rem; border-bottom: 1px solid color-mix(in srgb, var(--rnr-header-bg) 70%, #fff); color: #1f2d3a; } /* Optionaler Klassen-Hook: H3, die bewusst als Sektion dienen sollen, im Quellcode mit class="rnr-sec" versehen -> bekommen dann die Linie. .container-component h3.rnr-sec { padding-bottom:.35rem; border-bottom:1px solid color-mix(in srgb, var(--rnr-header-bg) 70%, #fff); color:#1f2d3a; } */ /* "Erstellt von / am" + "Zuletzt aktualisiert am …" – kleiner und dezent */ .container-component .modified, .container-component .createdby, .container-component .create { font-size: 12px; color: #555; } /* Trennlinie
im Artikel: Bootstrap rendert sie dunkel mit 25% Deckkraft -> zu schwer, konkurriert mit dem H2-Unterstrich. Hier: helle, neutrale Linie im System-Ton. opacity:1 noetig, sonst wuerde Bootstrap die helle Farbe wieder wegblenden. Stellschraube: #eef2f6 (noch leiser) … #d5dee6 (kraeftiger). */ .container-component hr { border: 0; border-top: 1px solid #e6e9ec; opacity: 1; margin: 1.25rem 0; } /* ===================================================================== 6 · BUTTONS Trifft alle Primary-Buttons (Login, Suche etc.) – einheitliches Branding. Bei Bedarf auf einzelne Module scopen. ===================================================================== */ .btn-primary { background-color: #0066a3; border-color: #0066a3; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active { background-color: #004d7a; border-color: #004d7a; } /* ===================================================================== 7 · HEADER-LAYOUT · Logo + Menue in einer Zeile Cassiopeia stapelt die beiden .grid-child-Bloecke (Logo / Nav) untereinander – hier auf Flex umgestellt. Wichtigster Fix: .grid-child bringt aus dem Grid-Layout eine feste Breite mit (~659px fuer ein 160px-Logo!), die im Flex-Kontext weiterwirkt – deshalb width: auto auf dem Logo-Kind. ===================================================================== */ header.container-header { display: flex; align-items: center; flex-wrap: nowrap; /* kein Umbruch unter das Logo */ gap: 1.5rem; } header.container-header > .grid-child { margin: 0; } /* Logo-Container nur so breit wie das Logo (Cassiopeia-Breite kappen) */ header.container-header > .grid-child:first-child { width: auto; flex: 0 0 auto; } /* Nav-Bereich nimmt Restbreite und darf schrumpfen (min-width: 0!) */ header.container-header > .grid-child.container-nav { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-start; gap: 1rem; } /* Menue hugt links neben dem Logo, nicht strecken */ header.container-header .container-nav .navbar { flex: 0 1 auto; } header.container-header .container-nav .navbar-collapse { flex-grow: 0; /* Bootstrap-Default aufheben */ } /* Suche ganz nach rechts */ header.container-header .container-search { margin-left: auto; flex: 0 0 auto; } :root { --rnr-content-max: 1350px; } header.container-header { box-sizing: border-box; padding-inline: max(1rem, calc((100% - var(--rnr-content-max)) / 2)); } /* --------------------------------------------------------------------- 7a · Suchfeld im Header (mod_finder ODER mod_search) Input im .container-search ansprechen – unabhaengig vom Modultyp. Lupe als Inline-SVG (kein externer Call). Heller Rahmen + weicher Fokus-Ring, passend zum blauen Balken. --------------------------------------------------------------------- */ header.container-header .container-search input { border: 1px solid rgba(255,255,255,.35); border-radius: 8px; padding: .4rem .8rem .4rem 2.1rem; /* Platz links fuer die Lupe */ font-size: 14px; color: #1f2d3a; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: .65rem center; background-size: 15px 15px; transition: box-shadow .15s ease, border-color .15s ease; } header.container-header .container-search input::placeholder { color: #8a99a8; } header.container-header .container-search input:focus { outline: none; border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.28); } /* Autovervollstaendigung (awesomplete-Dropdown) an den Stil angleichen */ header.container-header .container-search .awesomplete > ul { margin-top: 4px; padding: 4px; background: #fff; border: 1px solid #d5dee6; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.12); } header.container-header .container-search .awesomplete > ul::before { display: none; /* Default-Dreieck/Pfeil entfernen */ } header.container-header .container-search .awesomplete > ul > li { padding: 6px 10px; border-radius: 6px; font-size: 14px; color: #1f2d3a; } header.container-header .container-search .awesomplete > ul > li:hover, header.container-header .container-search .awesomplete > ul > li[aria-selected="true"] { background: #eef4fa; color: #004d7a; } header.container-header .container-search .awesomplete mark { background: none; /* gelbe Default-Markierung weg */ color: var(--rnr-header-bg); font-weight: 700; } /* ===================================================================== 8 · TABELLEN-SYSTEM (rnr-table) — BASIS Ein Regelsatz fuer alle Tabellen: Modalitaets-Farben, Card, Kopf, Zebra, Gruppenzeilen, Suchfeld. ===================================================================== */ /* --- Farbe pro Modalität (nur diese Zeilen bei Bedarf ändern) --- */ .rnr-table { --mod:#0066a3; } /* Default: Telefon / allgemein — Website-Blau */ .rnr-table.mod-mr { --mod:#0066a3; } /* MR — Website-Blau */ .rnr-table.mod-ct { --mod:#387A7A; } /* CT — Mint */ .rnr-table.mod-rx { --mod:#547D2C; } /* Röntgen — Grün */ .rnr-table.mod-sono { --mod:#C84625; } /* Sono/US — Orange */ .rnr-table.mod-mammo { --mod:#B30063; } /* Mammo — Pink */ .rnr-table.mod-dexa { --mod:#733A63; } /* Dexa — Plum */ /* --- Rahmen / Card --- */ .rnr-card { max-width:900px; border:1px solid #d5dee6; border-radius:10px; overflow:hidden; } /* --- Tabelle --- */ .rnr-table { width:100%; border-collapse:collapse; font-size:14px; } .rnr-table th, .rnr-table td { padding:.4rem .8rem; vertical-align:middle; border:0; border-bottom:1px solid #eef2f6; text-align:left; } .rnr-table tbody tr:last-child td { border-bottom:0; } /* --- Kopf --- */ .rnr-table thead th { background:var(--mod); color:#fff; text-transform:uppercase; letter-spacing:.05em; font-size:11px; font-weight:600; border-bottom:0; } /* --- Nummern-Spalten (intern / von extern) zentriert --- */ .rnr-table th:nth-child(2), .rnr-table td:nth-child(2), .rnr-table th:nth-child(3), .rnr-table td:nth-child(3) { text-align:center; } .rnr-table th:nth-child(2), .rnr-table td:nth-child(2) { width:78px; white-space:nowrap; } .rnr-table th:nth-child(3), .rnr-table td:nth-child(3) { width:132px; } /* --- Hero-Nummer (interne Durchwahl) --- */ .rnr-num { color:var(--mod); font-weight:700; font-size:16px; font-variant-numeric:tabular-nums; letter-spacing:.02em; } /* --- externe Nummer + Bemerkung sekundär --- */ .rnr-table td:nth-child(3) { color:#5a6b7a; font-variant-numeric:tabular-nums; } .rnr-table td:nth-child(4) { color:#5a6b7a; font-size:13px; } .rnr-table a { color:var(--mod); } /* --- Zebra + Hover (nur Datenzeilen) --- */ .rnr-table tbody tr:not(.rnr-group):nth-child(even) td, .rnr-table tbody tr:not(.rnr-group):nth-child(even) th { background:#f7fafc; } .rnr-table tbody tr:not(.rnr-group):hover td, .rnr-table tbody tr:not(.rnr-group):hover th { background:#eef4f8; } /* --- Gruppen-/Sektionszeile --- */ .rnr-group th { background: color-mix(in srgb, var(--mod) 20%, #fff); color:#1f2d3a; font-weight:700; text-align:left; padding:.4rem .8rem; border-bottom:1px solid color-mix(in srgb, var(--mod) 35%, #fff); box-shadow:inset 4px 0 0 var(--mod); } /* --- Abstandszeile (optional) --- */ .rnr-spacer td { border:0; padding:0; height:.5rem; } /* --- Suchfeld --- */ .rnr-filter { display:block; max-width:320px; margin:.5rem 0; padding:.4rem .7rem .4rem 2rem; /* Platz links fuer die Lupe */ font-family:inherit; font-size:14px; color:#1f2d3a; background-color:#fff; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6b7a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:.6rem center; background-size:15px 15px; border:1px solid #d5dee6; border-radius:8px; appearance:none; -webkit-appearance:none; } .rnr-filter:focus { outline:none; border-color:var(--rnr-header-bg, #0066a3); box-shadow:0 0 0 2px rgba(0,102,163,.15); } /* --- Wiederholte Kopfzeile innerhalb einer Sektion (lange Listen) --- */ .rnr-subhead td { background:#eef2f6; color:#475569; font-weight:700; font-size:11px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid #d5dee6; } /* ===================================================================== 9 · TABELLEN-VARIANTEN Ueberschreiben Basis-Regeln aus 8 — Reihenfolge nicht aendern! ===================================================================== */ /* --------------------------------------------------------------------- 9a · Adress-/Kontaktlisten (rnr-contacts) Freier Fliesstext statt kurzer Telefon-Spalten — hebt die Telefon-spezifische Zentrierung/Breite/Farbe von Spalte 2+3 auf. --------------------------------------------------------------------- */ .rnr-contacts td:nth-child(2), .rnr-contacts th:nth-child(2), .rnr-contacts td:nth-child(3), .rnr-contacts th:nth-child(3) { text-align:left; width:auto; white-space:normal; } .rnr-contacts td:nth-child(3) { color:inherit; font-size:inherit; } /* --------------------------------------------------------------------- 9b · Planungstabellen (rnr-plan / rnr-plan-mr / rnr-plan-ct) --------------------------------------------------------------------- */ .rnr-card-wide { max-width:100%; overflow-x:auto; } .rnr-plan td, .rnr-plan th { vertical-align:top; } /* Telefon-spezifische Zentrierung/Farbe (col2–4) für Planung neutralisieren */ .rnr-plan td:nth-child(2), .rnr-plan th:nth-child(2), .rnr-plan td:nth-child(3), .rnr-plan th:nth-child(3), .rnr-plan td:nth-child(4), .rnr-plan th:nth-child(4) { text-align:left; width:auto; white-space:normal; } .rnr-plan td:nth-child(3), .rnr-plan td:nth-child(4) { color:inherit; font-size:inherit; } .rnr-plan td:nth-child(2), .rnr-plan th:nth-child(2) { width:72px; } .rnr-plan td:first-child, .rnr-plan th:first-child { min-width:180px; } .rnr-plan-mr td:first-child, .rnr-plan-mr th:first-child { width:190px; } /* Geräte-Spalten zentriert */ .rnr-plan-mr { table-layout: fixed; } .rnr-plan-mr tbody tr>*:nth-child(n+3):nth-child(-n+7), .rnr-plan-mr thead th:nth-child(n+3):nth-child(-n+7) { text-align:center; width:56px; padding-left:.25rem; padding-right:.25rem; } .rnr-plan-mr thead th:nth-child(3), .rnr-plan-mr tbody td:nth-child(3) { border-left:1px solid #d5dee6; } .rnr-plan-mr thead th:nth-child(7), .rnr-plan-mr tbody td:nth-child(7) { border-right:1px solid #d5dee6; } .rnr-plan-mr th:last-child, .rnr-plan-mr td:last-child { width:170px; } .rnr-plan-ct { table-layout: fixed; } .rnr-plan-ct td:first-child, .rnr-plan-ct th:first-child { width:190px; } .rnr-plan-ct td:last-child, .rnr-plan-ct th:last-child { width:170px; } .rnr-plan-ct tbody tr>*:nth-child(3), .rnr-plan-ct tbody tr>*:nth-child(4), .rnr-plan-ct thead th:nth-child(3), .rnr-plan-ct thead th:nth-child(4) { text-align:center; width:64px; } /* Sterngrafik */ .rnr-star { display:block; width:30px; height:40px; margin:0 auto; } /* verschachtelte Referenztabelle „Anzahl Aufnahmen" */ .rnr-aufnahmen { margin:.5rem auto; width:auto; border-collapse:collapse; } .rnr-aufnahmen caption { font-weight:700; padding:.3rem; } .rnr-aufnahmen td { padding:2px 10px; border:0; } /* --------------------------------------------------------------------- 9c · Zuteilungs-Matrix "Wer macht was" (rnr-matrix) Viele Spalten (Kürzel), gruppiert nach Modalität. Nutzt rnr-card-wide (horizontal scrollbar) + wiederholte Kopfzeile pro Gruppe (rnr-subhead) — kein Sticky, kein Sonder-Container, pflegeleicht. --------------------------------------------------------------------- */ .rnr-legend-text { font-size:13px; color:#5a6b7a; margin:.5rem 0 1rem; } .rnr-matrix th:first-child, .rnr-matrix td:first-child { text-align:left; white-space:normal; min-width:220px; width:auto; } .rnr-matrix th:not(:first-child), .rnr-matrix td:not(:first-child) { text-align:center; width:56px; white-space:nowrap; } .rnr-matrix th, .rnr-matrix td { border-right:1px solid #eef2f6; } .rnr-matrix th:last-child, .rnr-matrix td:last-child { border-right:0; } .rnr-matrix td:nth-child(3), .rnr-matrix td:nth-child(4) { color:inherit; font-size:inherit; } /* --------------------------------------------------------------------- 9d · Oben ausgerichtete Zellen (rnr-top) Modifier fuer inhaltsreiche Tabellen, deren Zellen mehrere Zeilen oder Listen enthalten (z.B. Anleitungen). Ohne dies zentriert die Basis-Regel (vertical-align:middle) die Inhalte vertikal. Kombinierbar, z.B.: class="rnr-table rnr-contacts rnr-top mod-sono" --------------------------------------------------------------------- */ .rnr-top td, .rnr-top th { vertical-align:top; } /* Listen in Tabellenzellen kompakt halten */ .rnr-top td ul { margin:0; padding-left:1.1rem; } .rnr-top td li { margin:.15rem 0; } /* ===================================================================== 10 · LINK-/DOKUMENTENLISTEN (rnr-linklist) Standard 1-spaltig; rnr-double = 2 Spalten (CSS-Columns statt Tabelle). In JCE einfach per Enter neuer Listenpunkt, kein Zellen-Handling noetig. ===================================================================== */ .rnr-linklist { list-style:none; margin:0; padding:0; column-count:1; } .rnr-linklist li { padding:.35rem 0; border-bottom:1px solid #eef2f6; break-inside:avoid; -webkit-column-break-inside:avoid; } .rnr-linklist li:last-child { border-bottom:0; } .rnr-linklist img { width:16px; height:16px; vertical-align:middle; margin-right:.5rem; } .rnr-linklist a { color:var(--rnr-header-bg,#0066a3); text-decoration:none; } .rnr-linklist a:hover { color:#004d7a; text-decoration:underline; } /* --- Modifier: zweispaltig (seitenspezifisch aktivieren) --- */ .rnr-linklist.rnr-double { column-count:2; column-gap:2rem; } @media (max-width: 640px) { .rnr-linklist.rnr-double { column-count:1; } } /* ===================================================================== 11 · BADGES & MARKIERUNGEN ===================================================================== */ /* --------------------------------------------------------------------- 11a · Automatische Dateityp-Badges (PDF/DOC/PPT/XLS) — per href-Endung Greift überall im Content anhand der Dateiendung im href — keine manuellen Icons mehr nötig. "i" = case-insensitive. --------------------------------------------------------------------- */ .container-component a[href$=".pdf" i]::after, .container-component a[href$=".doc" i]::after, .container-component a[href$=".docx" i]::after, .container-component a[href$=".ppt" i]::after, .container-component a[href$=".pptx" i]::after, .container-component a[href$=".xls" i]::after, .container-component a[href$=".xlsx" i]::after { display:inline-block; margin-left:.45em; padding:.10em .60em; font-size:.50rem; font-weight:700; letter-spacing:.04em; line-height:1.5; border-radius:999px; vertical-align:middle; white-space:nowrap; text-decoration:none; } .container-component a[href$=".pdf" i]::after { content:"PDF"; background:#fdeeee; color:#b3261e; border:1px solid #f2c4c0; } .container-component a[href$=".doc" i]::after, .container-component a[href$=".docx" i]::after { content:"DOC"; background:#e8f0fb; color:#1a4e8a; border:1px solid #c3d7f0; } .container-component a[href$=".ppt" i]::after, .container-component a[href$=".pptx" i]::after { content:"PPT"; background:#fdf1e7; color:#b4531a; border:1px solid #f0d3ba; } .container-component a[href$=".xls" i]::after, .container-component a[href$=".xlsx" i]::after { content:"XLS"; background:#e9f5ec; color:#1e7a3c; border:1px solid #c2e0cb; } /* --------------------------------------------------------------------- 11b · KM-Badge (Kontrastmittel-Markierung in Tabellen) --------------------------------------------------------------------- */ /* KM-Markierung (in der Regel mit Kontrastmittel) — dezentes Badge statt Gelbfläche */ .rnr-table .km::after { content:"KM"; display:inline-block; margin-left:.5em; padding:1px 7px; font-size:.66rem; font-weight:700; letter-spacing:.04em; line-height:1.5; border-radius:999px; background:#eef2f6; color:#475569; border:1px solid #d5dee6; vertical-align:middle; white-space:nowrap; } /* --------------------------------------------------------------------- 11c · Warnhinweis + Pikett-/Notfallnummern --------------------------------------------------------------------- */ /* Warnhinweis */ .rnr-warn { color:#d0021b; } /* --- Pikett-/Notfallnummern: rot-fett --- */ .rnr-pikett { color:#ff0000; font-weight:700; } /* --------------------------------------------------------------------- 11d · Extern-Link-Marker (↗) Automatisch fuer alle http(s)-Links — interne Links sind relativ. Ausgenommen: interne IPs (192.168.*) und Datei-Links, die bereits ein Dateityp-Badge tragen (kein Doppel-Marker). --------------------------------------------------------------------- */ .container-component a[href^="http" i]:not([href*="192.168."]):not([href$=".pdf" i]):not([href$=".doc" i]):not([href$=".docx" i]):not([href$=".ppt" i]):not([href$=".pptx" i]):not([href$=".xls" i]):not([href$=".xlsx" i])::after { content:"\2197"; /* ↗ */ display:inline-block; margin-left:.25em; font-size:.9em; color:#5a6b7a; text-decoration:none; } /* ===================================================================== 12 · SPEZIALELEMENTE Notfall-Banner + Standort-Badges (z. B. Seite "Med. Notfälle") ===================================================================== */ .rnr-emergency { background:#fdeeee; border:1px solid #f2c4c0; border-radius:10px; padding:.75rem 1.25rem; margin:1rem 0; } .rnr-emergency h1 { color:#b3261e; margin:0; } .rnr-locations { display:flex; flex-wrap:wrap; gap:.75rem; margin:0 0 1.5rem; } .rnr-location { padding:.5rem 1rem; border-radius:8px; font-weight:600; font-size:.9rem; color:#1f2d3a; } /* Zwei ruhige Palette-Tints statt willkuerlicher Pastellfarben */ .rnr-location-a { background: color-mix(in srgb, #0066a3 10%, #fff); border: 1px solid color-mix(in srgb, #0066a3 30%, #fff); } .rnr-location-b { background: color-mix(in srgb, #387A7A 12%, #fff); border: 1px solid color-mix(in srgb, #387A7A 30%, #fff); } /* --- Farbiger Sektions-Banner (z.B. Jod-KM vs. Gadolinium-KM) --- Nutzt die Modalitaets-Farben aus Abschnitt 8 (mod-ct, mod-mr). */ .rnr-section-band { --mod:#0066a3; margin-top:2.5rem; padding:.6rem 1rem; border-left:4px solid var(--mod); background: color-mix(in srgb, var(--mod) 8%, #fff); border-radius:0 8px 8px 0; } .rnr-section-band.mod-mr { --mod:#0066a3; } /* MR — Website-Blau */ .rnr-section-band.mod-ct { --mod:#387A7A; } /* CT — Mint */ .rnr-section-band.mod-rx { --mod:#547D2C; } /* Röntgen — Grün */ .rnr-section-band.mod-sono { --mod:#C84625; } /* Sono/US — Orange */ .rnr-section-band.mod-mammo { --mod:#B30063; } /* Mammo — Pink */ .rnr-section-band.mod-dexa { --mod:#733A63; } /* Dexa — Plum */ /* ===================================================================== 13 · UTILITIES ===================================================================== */ /* --- Bild rechtsbündig fliessend (z.B. Deko-Cliparts) --- */ .rnr-img-right { float:right; margin:0 0 1rem 1.5rem; height:auto; } .rnr-img-left { float:left; margin:0 1.5rem 1rem 0; height:auto; } .rnr-clear { clear:both; } /* --- Seiten-Banner (Beitragsbild oben, z.B. Aerzte/MTRA/Institut) --- Klasse rnr-banner im Feld "CSS-Klasse Bild" der Artikel-Optionen; Joomla legt sie aufs umschliessende
. Aktuell: Bild in ORIGINALGROESSE (scharf), nur runde Ecken + Abstand. Grund: Quellbilder sind niedrig aufgeloest -> volle Breite wuerde sie hochskalieren und unscharf machen. -> Fuer gleich hohe Vollbreiten-Banner spaeter die 3 Zeilen unten wieder aktivieren UND hoeher aufgeloeste Bilder (~1400px breit) hinterlegen. */ .container-component figure.rnr-banner { float:none; width:100%; margin:0 0 1.5rem; /* hebt den figure-Default (40px seitlich) auf */ text-align:left; /* Bild linksbuendig */ } .container-component figure.rnr-banner img { display:block; float:none; /* width:100%; */ /* AUS: verhindert Upscaling unscharfer Quellen */ /* height:150px; */ /* AUS: Bild in Originalhoehe -> scharf */ /* object-fit:cover; */ /* AUS: nur mit fester Hoehe sinnvoll */ max-width:100%; height:auto; border-radius:10px; /* wie die Cards */ margin:0; /* linksbuendig */ } /* --- Entscheidungs-Boxen (z.B. "absetzen" vs. "nicht absetzen") --- */ .rnr-box { border:1px solid #d5dee6; border-radius:10px; padding:.75rem 1.1rem; flex:1 1 380px; } .rnr-box h4 { margin-top:0; } .rnr-box-stop { border-left:4px solid #d0021b; background: color-mix(in srgb, #d0021b 6%, #fff); } .rnr-box-continue { border-left:4px solid #2e7d32; background: color-mix(in srgb, #2e7d32 6%, #fff); } /* --- Eingabefelder fuer Inline-Rechner (Delay, BMI etc.) --- Gehoert zum Rechner-System in user.js (rnr-calc-delay / rnr-calc-bmi). */ .rnr-input { display:inline-block; width:130px; padding:.4rem .7rem; font-family:inherit; font-size:14px; color:#1f2d3a; background:#fff; border:1px solid #d5dee6; border-radius:8px; } .rnr-input:focus { outline:none; border-color:var(--rnr-header-bg, #0066a3); box-shadow:0 0 0 2px rgba(0,102,163,.15); } .rnr-input[readonly] { background:#f7fafc; font-weight:700; color:var(--rnr-header-bg,#0066a3); } /* ===================================================================== 14 · KACHELN & VIDEO Ersetzt Layout-Tabellen fuer Anleitungs-Uebersichten und macht YouTube-Embeds responsiv (statt fixer 560x315-iframes). ===================================================================== */ /* --- Kachel-Raster (rnr-tiles) --------------------------------------- Fuer Anleitungen/Downloads mit Vorschaubild. Passt sich automatisch der Breite an – kein colspan/width-Gebastel mehr. Aufbau je Kachel: ... Titel Zusatzinfo Das Dateityp-Badge (PDF) haengt sich automatisch an. --------------------------------------------------------------------- */ .rnr-tiles { display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:1rem; margin:1rem 0 2rem; } .rnr-tile { display:block; text-align:center; padding:1rem .75rem; background:#fff; border:1px solid #d5dee6; border-radius:10px; text-decoration:none; transition:box-shadow .15s ease, border-color .15s ease; } .rnr-tile:hover { border-color:var(--rnr-header-bg, #0066a3); box-shadow:0 3px 12px rgba(0,0,0,.08); text-decoration:none; } .rnr-tile img { display:block; width:110px; height:auto; margin:0 auto .75rem; } .rnr-tile-title { display:block; font-weight:600; color:var(--rnr-header-bg, #0066a3); margin-bottom:.2rem; } .rnr-tile-meta { display:block; font-size:13px; color:#5a6b7a; } /* --- Responsives Video (rnr-video) ----------------------------------- Wrapper um ein --------------------------------------------------------------------- */ .rnr-video { position:relative; width:100%; max-width:720px; aspect-ratio:16 / 9; margin:1rem 0 2rem; border:1px solid #d5dee6; border-radius:10px; overflow:hidden; background:#000; } .rnr-video iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }