/* ============================== Test ============================== */ /* body { background: red !important; } */ /* ============================================================ ANKE KOLBERG – JOOMLA / CASSIOPEIA CHILD TEMPLATE ============================================================ Purpose: - General typography and colors - Site background - Header / branding - Main navigation - Article styling - Images - Footer - Mobile layout - Sticky header Joomla: Cassiopeia child template Joomla 6.x IMPORTANT: This file is loaded by Joomla as: /media/templates/site/cassiopeia_meinersteschildtemplate/css/user.css ============================================================ */ /* ============================================================ 1. GLOBAL VARIABLES ============================================================ */ :root { /* -------------------------------------------------------- Typography -------------------------------------------------------- */ --primary-font-family: 'Barlow Semi Condensed', Tahoma, sans-serif; --primary-font-weight-lite: 100; --primary-font-weight-medium: 300; --primary-font-weight-bold: 500; /* -------------------------------------------------------- Text colors -------------------------------------------------------- */ --primary-header-color: #ffffff; --primary-text-color: #65482f; --primary-menu-link-color: #65482f; /* -------------------------------------------------------- Background colors -------------------------------------------------------- */ --primary-background-color: #9a5837; --primary-background-image: url("../images/background.jpg"); /* -------------------------------------------------------- Font sizes – desktop -------------------------------------------------------- */ --primary-font-size-text: 24px; --primary-font-size-h1: 36px; --primary-font-size-h2: 26px; --primary-font-size-text-pagebuilder: 18px; /* -------------------------------------------------------- Font sizes – mobile -------------------------------------------------------- */ --primary-font-size-text-mobile: 12px; --primary-font-size-h1-mobile: 30px; --primary-font-size-h2-mobile: 20px; /* -------------------------------------------------------- Line height -------------------------------------------------------- */ --primary-line-height: 25px; } /* ============================================================ 2. CUSTOM FONTS ============================================================ */ /* Barlow Semi Condensed Local font files are used instead of loading the font from Google Fonts. */ /* ------------------------------------------------------------ Barlow Semi Condensed – 100 ------------------------------------------------------------ */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 100; src: url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.eot"); src: local(""), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-100.svg#BarlowSemiCondensed") format("svg"); } /* ------------------------------------------------------------ Barlow Semi Condensed – 300 ------------------------------------------------------------ */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 300; src: url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.eot"); src: local(""), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-300.svg#BarlowSemiCondensed") format("svg"); } /* ------------------------------------------------------------ Barlow Semi Condensed – 500 ------------------------------------------------------------ */ @font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; src: url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.eot"); src: local(""), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.woff2") format("woff2"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.woff") format("woff"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.ttf") format("truetype"), url("../fonts/barlow-semi-condensed-v14-latin/barlow-semi-condensed-v14-latin-500.svg#BarlowSemiCondensed") format("svg"); } /* ------------------------------------------------------------ Aclonica ------------------------------------------------------------ */ @font-face { font-family: 'Aclonica'; font-style: normal; font-weight: 400; src: url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.eot"); src: local(""), url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.woff2") format("woff2"), url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.woff") format("woff"), url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.ttf") format("truetype"), url("../fonts/aclonica-v18-latin/aclonica-v18-latin-regular.svg#Aclonica") format("svg"); } /* ------------------------------------------------------------ Barlow ------------------------------------------------------------ */ @font-face { font-family: 'Barlow'; font-style: normal; font-weight: 400; src: url("../fonts/barlow-v9-latin/barlow-v9-latin-regular.eot"); src: local(""), url("../fonts/barlow-v9-latin/barlow-v9-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/barlow-v9-latin/barlow-v9-latin-regular.woff2") format("woff2"), url("../fonts/barlow-v9-latin/barlow-v9-latin-regular.woff") format("woff"), url("../fonts/barlow-v9-latin/barlow-v9-latin-regular.ttf") format("truetype"); } /* ============================================================ 3. GLOBAL TYPOGRAPHY ============================================================ */ html, body { font-family: var(--primary-font-family); color: var(--primary-text-color); } /* Headings use the same typography as the body. */ body, h1, h2, h3, h4, h5, h6 { font-family: var(--primary-font-family); color: var(--primary-text-color); } /* Utility class used elsewhere in the site. */ .display-none { display: none !important; } /* Emergency / important links. */ .red { color: red !important; } /* ========================================= IM NOTFALL – red button with white text ========================================= */ .footer-emergency { margin-top: 2rem; } .footer-emergency .emergency-link, .footer-emergency .emergency-link:link, .footer-emergency .emergency-link:visited { display: inline-block; background-color: #c0392b; color: #ffffff !important; padding: 0.65rem 1.2rem; border-radius: 4px; text-decoration: none !important; font-weight: 600; line-height: 1.2; } .footer-emergency .emergency-link:hover, .footer-emergency .emergency-link:focus, .footer-emergency .emergency-link:active { background-color: #a93226; color: #ffffff !important; text-decoration: none !important; } /* ============================================================ 4. SITE BACKGROUND ============================================================ */ .site { background: transparent; background-image: var(--primary-background-image); background-position: top center; background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } /* ============================================================ 5. HEADER ============================================================ */ /* Joomla generates:
Joomla already adds sticky-top. We reinforce the sticky behavior here so that the custom header remains sticky on mobile as well. */ .container-header { position: sticky !important; top: 0 !important; z-index: 9999 !important; background-color: var(--primary-background-color); background-image: none; background: radial-gradient( circle, #ff9900 0%, #993300 100% ); } /* Custom header module itself. */ .container-header > .header, .container-header .header { position: relative; width: 100%; } /* Remove Cassiopeia's additional vertical spacing around the header content. */ .container-header .grid-child { padding-top: 0; padding-bottom: 0; } /* ------------------------------------------------------------ Header branding container ------------------------------------------------------------ */ .x-navbar-brand { display: flex; align-items: center; justify-content: center; width: 100%; margin-inline-end: auto; padding-top: 0; padding-bottom: 0; color: var(--primary-header-color); font-size: 2rem; text-align: center; } /* ------------------------------------------------------------ Logo ------------------------------------------------------------ */ .x-brand-logo img { display: block; width: 70px; height: auto; margin-top: 15px; margin-right: 15px; } /* ------------------------------------------------------------ Site description / name block ------------------------------------------------------------ */ .x-site-description { margin-top: 15px; color: var(--primary-header-color); line-height: 1; } /* Organization name: "Psychotherapeutische Praxis" */ .x-logoOrganization { color: var(--primary-header-color); font-family: var(--primary-font-family); font-weight: var(--primary-font-weight-medium); text-decoration: none; } /* First name: "ANKE" */ .x-logoVorname { font-family: var(--primary-font-family); font-weight: var(--primary-font-weight-lite); } /* Last name: "KOLBERG" */ .x-logoNachname { font-family: var(--primary-font-family); font-weight: var(--primary-font-weight-medium); } /* Header links should not receive a standard underline. */ .x-site-description a { color: var(--primary-header-color); text-decoration: none; } /* ------------------------------------------------------------ Header text size ------------------------------------------------------------ */ @media (max-width: 991.98px) { .x-logoOrganization, .x-logoVorname, .x-logoNachname { font-size: 1rem; } } /* ============================================================ 6. MOBILE HEADER ============================================================ */ @media (max-width: 767px) { /* Hide the Joomla logo on phones. The text branding remains visible. */ .x-brand-logo { display: none !important; } /* Remove all unnecessary spacing around the branding. */ .x-navbar-brand { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* "Psychotherapeutische Praxis" */ .x-site-description { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } .x-logoOrganization { display: block !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* ANKE KOLBERG container. */ .x-site-description > div { display: block !important; height: auto !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; } /* Prevent the two names from creating extra vertical spacing on small screens. */ .x-logoVorname, .x-logoNachname { line-height: 1 !important; } /* Reduce header bottom padding on mobile. */ .container-header { padding-bottom: 0.5rem; } } /* ============================================================ 7. MAIN NAVIGATION ============================================================ */ /* Desktop: center the main navigation. */ .container-header .container-nav { justify-content: center; } /* Mobile: navigation starts at the left. */ @media (max-width: 991.98px) { .container-header .container-nav { justify-content: flex-start; } } /* ------------------------------------------------------------ Main menu items ------------------------------------------------------------ */ .metismenu.mod-menu .metismenu-item { font-size: 1.5rem; color: beige; text-decoration: none; } /* Active top-level menu item. */ .metismenu.mod-menu .metismenu-item.active { font-size: 2rem; color: white; } /* Level-2 links. */ .metismenu-item .level-2 a { color: var(--primary-menu-link-color); } /* ============================================================ 8. ARTICLE DISPLAY ============================================================ */ /* Hide Joomla article title. */ .page-header { display: none; } /* Hide article metadata: author, category, date, hits, etc. */ .article-info { display: none; } /* Main article card. */ .com-content-article__body { padding: 20px; margin-bottom: 40px; background-color: rgba(255, 255, 255, 0.7); box-shadow: 5px 7px 10px 0 rgba(0, 0, 0, 0.4); border-radius: 9px; color: var(--primary-text-color); opacity: 1; } /* Article paragraphs. */ .com-content-article__body > p { text-align: left; font-family: var(--primary-font-family); color: var(--primary-text-color); font-size: var(--primary-font-size-text); font-weight: var(--primary-font-weight-medium); line-height: var(--primary-line-height); } /* ------------------------------------------------------------ Article headings ------------------------------------------------------------ */ .com-content-article__body > h1, .com-content-article__body > h2 { font-family: var(--primary-font-family); color: var(--primary-text-color); font-weight: var(--primary-font-weight-lite); margin-bottom: 13px; } .com-content-article__body > h1 { font-size: var(--primary-font-size-h1); } .com-content-article__body > h2 { font-size: var(--primary-font-size-h2); } /* Mobile article typography. */ @media (max-width: 991.98px) { .com-content-article__body > h1 { font-size: var(--primary-font-size-h1-mobile); white-space: normal; word-wrap: break-word; } .com-content-article__body > h2 { font-size: var(--primary-font-size-h2-mobile); white-space: normal; word-wrap: break-word; } .com-content-article__body > p { font-size: var(--primary-font-size-text-mobile); line-height: 15px; } } /* Custom notice boxes. */ .custom_hinweis { border-radius: 9px; } /* ============================================================ 9. ARTICLE IMAGES ============================================================ */ /* Images directly inside article paragraphs. */ .com-content-article__body > p > img { display: block; mmmax-width: 100%; height: auto; margin: 0 auto; box-shadow: 5px 7px 10px 0 rgba(0, 0, 0, 0.4); border-radius: 9px; } /* Your original CSS contained: .cccom-content-article__body with three "c"s. That selector does not match Joomla's actual HTML. The correct selector is therefore included here. */ .com-content-article__body > p > img { width: 100%; height: auto; } /* ------------------------------------------------------------ Image row ------------------------------------------------------------ */ .image-row { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; margin: 0 auto; text-align: center; } /* Images inside image rows. */ .image-item, .image-row img { width: auto; max-width: 100%; height: 200px !important; margin: 0 20px; object-fit: cover; box-shadow: 5px 7px 10px 0 rgba(0, 0, 0, 0.4); border-radius: 9px; } /* Mobile image rows become vertical. */ @media (max-width: 768px) { .image-row { flex-direction: column; justify-content: flex-start; gap: 20px; } .image-item, .image-row img { width: 100%; height: auto !important; margin: 2.5px 0; } } /* ============================================================ 11. FOOTER ============================================================ */ .container-footer { display: grid; justify-content: center; background-color: var(--primary-background-color); background-image: none; } /* Footer links. */ .container-footer a { color: inherit; } /* ============================================================ 12. ANCHOR / JUMP LINK SUPPORT ============================================================ */ /* Compensate for the sticky header when clicking links such as: #uebermich #schwerpunkte #sprechzeiten #behandlung */ @media (min-width: 991.98px) { html { scroll-padding-top: 120px; } } @media (max-width: 991.98px) { html { scroll-padding-top: 140px; } } /* ============================================================ 13. LEGACY / SPECIAL LOGO ============================================================ */ /* This is retained because your existing site uses #logo elsewhere. */ #logo { position: fixed; top: 30px; z-index: 80; width: 28%; min-width: 300px; color: var(--primary-header-color); font-size: 36px; font-weight: var(--primary-font-weight-lite); letter-spacing: 0.05em; text-align: right; } /* ============================================================ 14. MOBILE FONT OVERRIDES ============================================================ */ @media (max-width: 991.98px) { :root { --primary-font-size-text: var(--primary-font-size-text-mobile); --primary-line-height: 15px; } } /* ============================================================ 15. STICKY HEADER – FINAL SAFETY RULES ============================================================ */ /* Joomla currently outputs:
Therefore the Joomla header itself is the correct element to make sticky. This is preferable to making the inner .header sticky. */ .container-header { position: sticky !important; position: -webkit-sticky !important; top: 0 !important; z-index: 9999 !important; } /* Prevent horizontal overflow from interfering with sticky positioning. */ html { overflow-x: visible !important; } body { overflow-x: visible !important; } /* ============================================================ 16. OPTIONAL TEST ============================================================ */ /* Uncomment temporarily if you want to verify that user.css is actually loaded. body { background: red !important; } */ /* ========================================================= MOBILE HEADER Hamburger LEFT + branding RIGHT ========================================================= */ /* siehe 20260822a */ /* ========================================================= HEADER: DESKTOP / MOBILE --------------------------------------------------------- mod-custom112 = full desktop header mod-custom115 = compact mobile header ========================================================= */ /* --------------------------------------------------------- DESKTOP 992px and wider --------------------------------------------------------- */ #mod-custom115 { display: none; } #mod-custom112 { display: block; } /* --------------------------------------------------------- MOBILE 991px and smaller --------------------------------------------------------- */ @media (max-width: 991.98px) { /* Hide the desktop header */ #mod-custom112 { display: none !important; } /* Show the mobile header */ #mod-custom115 { display: block !important; } } /* ========================================================= MOBILE HEADER POSITION ========================================================= */ @media (max-width: 991.98px) { #mod-custom115 { display: block !important; /* Position to the right of the hamburger */ margin-left: 55px; /* Move the text slightly down */ padding-top: 8px; /* Remove unwanted spacing */ margin-top: 0; margin-bottom: 0; } #mod-custom115 > div { margin: 0; padding: 0; line-height: 1; } #mod-custom115 a { display: block; margin: 0; padding: 0; text-decoration: none; line-height: 1; } /* Psychotherapeutische Praxis */ #mod-custom115 .x-xxx { display: block; margin: 0 0 4px 0; padding: 0; line-height: 1.1; } /* ANKE KOLBERG */ #mod-custom115 .x-logoVorname, #mod-custom115 .x-logoNachname { display: inline; margin: 0; padding: 0; line-height: 1; } } /* ========================================================= MOBILE BRANDING - LOGO + TEXT ========================================================= */ @media (max-width: 991.98px) { /* Main branding link */ #mod-custom115 .mobile-brand a { display: flex; align-items: center; margin: 0; padding: 0; text-decoration: none !important; color: inherit; } /* Small logo */ #mod-custom115 .mobile-brand img { display: block; width: 32px; height: 32px; object-fit: contain; margin: 0 9px 0 0; padding: 0; } /* Text container */ #mod-custom115 .mobile-brand-text { display: flex; flex-direction: column; margin: 0; padding: 0; line-height: 1; } /* Psychotherapeutische Praxis */ #mod-custom115 .x-xxx { display: block; margin: 0 0 4px 0; padding: 0; color: #6b5545; /* brown */ font-size: 14px; font-weight: 400; line-height: 1.1; text-decoration: none !important; } /* ANKE KOLBERG */ #mod-custom115 .mobile-name { display: block; margin: 0; padding: 0; line-height: 1; white-space: nowrap; } #mod-custom115 .x-logoVorname, #mod-custom115 .x-logoNachname { display: inline; margin: 0; padding: 0; cccolor: #6b5545; /* brown */ color: white; font-size: 16px; fffont-weight: 500; line-height: 1; text-decoration: none !important; } /* Make absolutely sure the link itself is not blue */ #mod-custom115 .mobile-brand a, #mod-custom115 .mobile-brand a:visited, #mod-custom115 .mobile-brand a:hover, #mod-custom115 .mobile-brand a:focus { color: #6b5545; text-decoration: none !important; } } /* ========================================================= MOBILE: KEEP HAMBURGER + BRAND IN ONE ROW --------------------------------------------------------- The mobile brand (#mod-custom115) stays beside the hamburger, even when the Joomla menu is expanded. ========================================================= */ @media (max-width: 991.98px) { #mod-custom115 { position: absolute; left: 60px; top: 10px; width: calc(100% - 75px); margin: 0; padding: 0; text-align: center; } #mod-custom115 .mobile-brand { margin: 0; padding: 0; text-align: center; } #mod-custom115 .mobile-brand a { display: block; width: 100%; margin: 0; padding: 0; text-align: center; text-decoration: none !important; } /* First line */ #mod-custom115 .mobile-brand-text { display: block; margin: 0; padding: 0; text-align: center; line-height: 1.1; white-space: nowrap; } /* Second line */ #mod-custom115 .mobile-name { display: block; margin: 0; padding: 0; text-align: center; line-height: 1.1; white-space: nowrap; } #mod-custom115 .x-logoVorname, #mod-custom115 .x-logoNachname { display: inline; margin: 0; padding: 0; } }