/* ========================================================================== Cassiopeia – Metropolis Child-Template für www.metropolisvonaustria.at (Joomla 6) Alle Anpassungen liegen in dieser Datei. Farben oben in :root ändern. ========================================================================== */ /* --- Schrift: EB Garamond, lokal gehostet (DSGVO), inkl. Polytonik -------- */ @font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("fonts/EBGaramond.woff2") format("woff2"); } @font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url("fonts/EBGaramond-Italic.woff2") format("woff2"); } /* --- Farben & Grundwerte ------------------------------------------------- */ html:root { --mva-bordeaux: #67180d; /* Menüleiste, Links */ --mva-red: #8b0000; /* Hervorhebungen, Hover */ --mva-gold: #b8b583; /* aktiver Menüpunkt, Linien */ --mva-gold-deep: #9a8a4e; /* Gold auf hellem Grund */ --mva-ivory: #f3f1ec; /* Kopfbereich */ --mva-ivory-2: #fcfaf5; /* Karten / Seitenleiste */ --mva-page: #f7f3ea; /* Seitenhintergrund (helles Elfenbein) */ --mva-line: #d9cba0; /* feine Goldlinie für Rahmen */ --mva-text: #3f485d; /* Fließtext */ --mva-ink: #2b1a17; /* Überschriften */ --mva-footer: #1d1512; /* Fußbereich */ /* Cassiopeia-Variablen überschreiben */ --cassiopeia-color-primary: var(--mva-bordeaux); --cassiopeia-color-link: var(--mva-bordeaux); --cassiopeia-color-hover: var(--mva-red); --link-color: var(--mva-bordeaux); --link-color-rgb: 103, 24, 13; --link-hover-color: var(--mva-red); --link-hover-color-rgb: 139, 0, 0; --cassiopeia-font-family-body: "EB Garamond", Georgia, "Times New Roman", serif; --cassiopeia-font-family-headings: "EB Garamond", Georgia, "Times New Roman", serif; --cassiopeia-font-weight-normal: 400; --cassiopeia-font-weight-headings: 600; --body-color: var(--mva-text); --body-font-size: 1.2rem; --body-line-height: 1.55; } /* Ganze Seite auf die Breite des Banners begrenzen. Hintergrund: helles Elfenbein; nur der Textbereich ist weiß. */ html { background-color: var(--mva-page); } body.site { width: 100%; max-width: 1200px; margin-left: auto; margin-right: auto; background-color: var(--mva-page); } /* Rahmen um die ganze Seite (Kopf, Menü, Inhalt, Fuß) – gleiche Goldlinie wie bei den weißen Textfeldern; sichtbar, sobald links/rechts Platz ist */ @media (min-width: 1240px) { html { padding: 1.25rem 0; } body.site { min-height: calc(100vh - 2.5rem); border: 1px solid var(--mva-line); border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 18px rgba(103, 24, 13, .08); /* kein overflow hier: am würde es das Scrollen der ganzen Seite sperren */ } } /* Textbereich (Beiträge, Blog, Kategorien) auf Weiß */ body.site .site-grid > .container-component { background: #fff; border: 1px solid var(--mva-line); border-radius: 2px; padding: 1.25rem 1.75rem 1.75rem; align-self: start; } @media (max-width: 767.98px) { body.site .site-grid > .container-component { padding: 1rem; } } body.site .site-grid { /* Spalten füllen die 1200px, Innenabstand links/rechts */ grid-template-columns: [full-start] 1rem [main-start] repeat(4, minmax(0, 1fr)) [main-end] 1rem [full-end]; grid-column-gap: 1.5rem; } @media (max-width: 767.98px) { body.site .site-grid { grid-template-columns: [full-start] .25rem [main-start] repeat(4, minmax(0, 1fr)) [main-end] .25rem [full-end]; grid-column-gap: .75rem; } } body.site .container-banner { margin-bottom: 1.5rem; } body.site .footer .grid-child { padding-left: 2.5rem; padding-right: 2.5rem; } body.site .container-banner img { width: 100%; } body { font-size: 1.2rem; line-height: 1.55; color: var(--mva-text); font-feature-settings: "kern", "liga", "onum"; } h1, h2, h3, h4, h5, h6 { color: var(--mva-ink); line-height: 1.2; } h1, .page-header h1, .page-header h2 { color: var(--mva-bordeaux); } .page-header { border-bottom: 1px solid var(--mva-gold); margin-bottom: 1.25rem; padding-bottom: .35rem; } a { text-underline-offset: .15em; text-decoration-thickness: 1px; } ::selection { background: var(--mva-bordeaux); color: #fff; } /* --- Kopfbereich: Elfenbein + Banner ------------------------------------ */ .container-header { background-color: var(--mva-page); background-image: none; box-shadow: none; color: var(--mva-text); } .container-header .container-below-top, .container-header .container-topbar { color: var(--mva-text); } /* Banner-Modul (Modulklasse „metropolis-banner“ oder beliebiges Bild in below-top) */ .container-header .container-below-top { justify-content: center; padding: 0; max-width: 1200px; } .container-below-top .mod-custom, .container-below-top .metropolis-banner { flex: 1 1 auto; margin: 0; } .container-below-top img { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; } /* Banner über die Template-Option „Logo“ (Brand = Ja): volle Breite, ohne Rand */ .container-header > .grid-child:has(> .navbar-brand) { max-width: 1200px; padding: 0; } .container-header .navbar-brand { display: block; width: 100%; margin: 0; padding: 0; font-size: 2rem; color: var(--mva-bordeaux); } .container-header .navbar-brand a { display: block; color: var(--mva-bordeaux); } .container-header .navbar-brand img { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; } .container-header .site-description { color: var(--mva-text); padding: 0 1rem .5rem; } /* --- Menüleiste: Bordeaux, volle Breite --------------------------------- */ .container-header { overflow-x: clip; } /* verhindert horizontales Scrollen durch den Balken */ .container-header .container-nav { position: relative; isolation: isolate; align-items: center; flex-wrap: nowrap; gap: 1rem; max-width: 1200px; /* = Breite des Banners */ padding: .35rem 1rem; } .container-header .container-nav::before { /* Bordeaux-Balken in Breite des Banners, mit feiner Goldlinie */ content: ""; position: absolute; z-index: -1; inset: 0; background: var(--mva-bordeaux); border-bottom: 2px solid rgba(184, 181, 131, .6); } @media (max-width: 991.98px) { .container-header .container-nav { flex-wrap: wrap; } } .container-header nav { margin-top: 0; } .container-header .mod-menu, .container-header .metismenu.mod-menu { color: #fff; } .container-header .metismenu.mod-menu .metismenu-item { padding: .7rem .75rem; font-size: 1rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .container-header .metismenu > li.level-1 > a, .container-header .metismenu > li.level-1 > button, .container-header .metismenu > li.level-1 > span { color: #fff; } /* aktiver Punkt: Gold mit feiner Unterstreichung */ .container-header .metismenu > li.level-1.active > a, .container-header .metismenu > li.level-1.active > button, .container-header .metismenu > li.level-1 > a:hover, .container-header .metismenu > li.level-1 > button:hover { color: var(--mva-gold); } .container-header .metismenu > li.level-1.active > a { text-decoration: underline 1px var(--mva-gold); text-underline-offset: .22em; } @media (min-width: 992px) { /* Cassiopeia-Standardbalken unter Menüpunkten ausblenden */ .container-header .metismenu > li > a::after, .container-header .metismenu > li > button::before { display: none; } /* Untermenüs: Elfenbein-Karte mit Bordeaux-Kante */ .container-header .metismenu .mm-collapse, .container-header .metismenu.mod-menu .metismenu-item > ul { background: var(--mva-ivory-2); border-top: 3px solid var(--mva-gold); box-shadow: 0 10px 24px rgba(40, 10, 5, .18); } } .container-header .metismenu .mm-collapse .metismenu-item { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 1.05rem; } .container-header .metismenu .mm-collapse a, .container-header .metismenu .mm-collapse button, .container-header .metismenu .mm-collapse span { color: var(--mva-bordeaux); } .container-header .metismenu .mm-collapse a:hover { color: var(--mva-red); } /* Desktop: Untermenüs öffnen beim Überfahren mit der Maus (auch per Tastatur-Fokus) */ @media (min-width: 992px) and (hover: hover) { .container-header .metismenu > li.parent:hover > ul.mm-collapse, .container-header .metismenu > li.parent:focus-within > ul.mm-collapse { display: block; height: auto !important; } .container-header .metismenu > li.parent > ul.mm-collapse { /* kleiner unsichtbarer Steg, damit das Menü beim Hinunterfahren nicht zuklappt */ margin-top: 0; } .container-header .metismenu > li.parent:hover > button.mm-toggler::after, .container-header .metismenu > li.parent:hover > .mm-toggler { color: var(--mva-gold); } } /* Tablet & Handy: Menü klappt hinter einem Knopf zusammen (Voraussetzung: Menümodul mit Layout „Collapsible Dropdown“) */ .container-header .navbar-toggler { display: none; align-items: center; gap: .5rem; padding: .4rem .8rem; margin: .25rem 0; font-family: inherit; font-size: 1rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: transparent; border: 1px solid rgba(184, 181, 131, .8); border-radius: 3px; } .container-header .navbar-toggler::after { content: "Menü"; } html[lang^="el"] .container-header .navbar-toggler::after { content: "Μενού"; } html[lang^="en"] .container-header .navbar-toggler::after { content: "Menu"; } .container-header .navbar-toggler .icon-menu { font-size: 1.3rem; } .container-header .navbar-toggler:hover, .container-header .navbar-toggler[aria-expanded="true"] { background: rgba(255, 255, 255, .1); border-color: var(--mva-gold); color: var(--mva-gold); } .container-header .navbar-toggler:focus-visible { outline: 2px solid var(--mva-gold); outline-offset: 2px; box-shadow: none; } @media (max-width: 991.98px) { .container-header .navbar-toggler { display: inline-flex; } /* Zeile 1: Knopf links, Suche rechts – Zeile 2: aufgeklapptes Menü */ .container-header .container-nav { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .75rem; padding: .35rem .75rem; } .container-header .container-nav > nav.navbar { display: contents; } .container-header .container-nav .navbar-toggler { grid-column: 1; grid-row: 1; justify-self: start; } .container-header .container-nav > .container-search { grid-column: 2; grid-row: 1; justify-self: end; min-width: 0; } .container-header .container-nav .navbar-collapse { grid-column: 1 / -1; grid-row: 2; } .container-header .container-search .mod-finder { max-width: 100%; } /* aufgeklapptes Menü: eine Spalte, Trennlinien */ .container-header .navbar-collapse { margin-top: .35rem; } .container-header .metismenu.mod-menu { display: block; width: 100%; } .container-header .metismenu.mod-menu .metismenu-item { padding: .6rem .25rem; border-top: 1px solid rgba(255, 255, 255, .12); } .container-header .metismenu.mod-menu .metismenu-item > ul { position: static; flex: 1 0 100%; width: 100%; margin: .4rem 0 0; background: rgba(0, 0, 0, .15); box-shadow: none; border-top: 0; } .container-header .metismenu.mod-menu .metismenu-item > ul .metismenu-item { padding: .45rem 1rem; border-top: 0; } .container-header .metismenu .mm-collapse a, .container-header .metismenu .mm-collapse button, .container-header .metismenu .mm-collapse span { color: #fff; } } /* kleines Tablet quer / kleine Laptops: Menü etwas kompakter, damit alles in eine Zeile passt */ @media (min-width: 992px) and (max-width: 1199.98px) { .container-header .metismenu.mod-menu .metismenu-item { padding: .7rem .45rem; font-size: .9rem; letter-spacing: .03em; } .container-header .container-search .mod-finder { max-width: 10rem; } .container-header .container-search .mod-finder .btn { padding-left: .5rem; padding-right: .5rem; } } /* Suche & Sprachwahl rechts in der Leiste (Position „search“) */ .container-header .container-search { display: flex; flex: 0 0 auto; align-items: center; gap: .75rem; margin-top: 0; color: #fff; } .container-header .container-search .form-control { font-family: inherit; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .35); color: #fff; } .container-header .container-search .form-control::placeholder { color: rgba(255, 255, 255, .75); } .container-header .container-search .btn { background: var(--mva-gold); border-color: var(--mva-gold); color: var(--mva-ink); } .container-header .mod-languages ul { margin: 0; } .container-header .mod-languages a { color: #fff; } .container-header .mod-languages img { vertical-align: middle; } .container-header .container-search .mod-finder { max-width: 13rem; } @media (min-width: 992px) { /* Pfeil der Untermenüs in derselben Zeile halten */ .container-header .metismenu > li.level-1 { flex-wrap: nowrap; white-space: nowrap; } } .container-header .container-search .mod-finder .btn { white-space: nowrap; } /* --- Inhalt ------------------------------------------------------------- */ .site-grid { margin-top: 2rem; } .mod-breadcrumbs, .breadcrumb { background: transparent; padding-left: 0; font-size: 1rem; } .mod-breadcrumbs .breadcrumb-item + .breadcrumb-item::before, .breadcrumb-item + .breadcrumb-item::before { color: var(--mva-gold-deep); } .btn-primary { --btn-bg: var(--mva-bordeaux); --btn-border-color: var(--mva-bordeaux); --btn-hover-bg: var(--mva-red); --btn-hover-border-color: var(--mva-red); background-color: var(--mva-bordeaux); border-color: var(--mva-bordeaux); } .btn-primary:hover, .btn-primary:focus { background-color: var(--mva-red); border-color: var(--mva-red); } .btn { font-family: inherit; } .blog-item .item-title, .blog-item h2, .blog-item .page-header h2 { font-size: 1.3rem; font-weight: 600; line-height: 1.3; } .blog-item h2 a, .item-title a { color: var(--mva-ink); text-decoration: none; } .blog-item h2 a:hover, .item-title a:hover { color: var(--mva-red); } .boxed .blog-item, .blog-item { box-shadow: none; } .blog-items.boxed .blog-item, .boxed .blog-item { background: #fff; border: 1px solid #e7e1d6; box-shadow: inset 0 3px 0 var(--mva-bordeaux); } .article-info, .article-info-term { font-size: 1rem; color: #7a6f66; } .readmore .btn, a.readmore { font-style: italic; } blockquote { border-left: 3px solid var(--mva-gold); padding-left: 1rem; font-style: italic; } .com-content-article__body img, .item-image img { border-radius: 2px; } .pagination { --pagination-color: var(--mva-bordeaux); --pagination-active-bg: var(--mva-bordeaux); --pagination-active-border-color: var(--mva-bordeaux); } /* --- Slideshow CK (Diashow) in main-top oder banner ---------------------- */ /* Karte um die Diashow unsichtbar machen: kein Rahmen, kein Innenabstand */ .site-grid .card:has(.slideshowck, .camera_wrap) { background: transparent; border: 0; margin-bottom: 1.5rem; } .site-grid .card:has(.slideshowck, .camera_wrap) > .card-body { padding: 0; } .site-grid .card:has(.slideshowck, .camera_wrap) > .card-header { padding: 0 0 .5rem; } .container-banner .slideshowck, .container-banner .camera_wrap { margin-bottom: 0 !important; } /* Bildunterschrift wie bisher: dunkler Balken, weiße Schrift */ .camera_caption { font-family: var(--cassiopeia-font-family-body); } .camera_caption > div { background: rgba(20, 12, 10, .72) !important; border-left: 4px solid var(--mva-gold); padding: .6rem 1rem !important; } .camera_caption, .camera_caption a, .camera_caption .camera_caption_title { color: #fff !important; font-size: 1.35rem; line-height: 1.25; font-weight: 600; } .camera_caption .camera_caption_desc { font-size: 1rem; font-weight: 400; } .camera_wrap .camera_pag .camera_pag_ul li { background: #d8d2c6; } .camera_wrap .camera_pag .camera_pag_ul li.cameracurrent > span, .camera_wrap .camera_pag .camera_pag_ul li:hover > span { background: var(--mva-bordeaux); } /* --- Galerie/Video oben im Beitrag (Daten aus dem früheren Helix-Template) - */ .mva-gallery { margin: 0 0 1.5rem; } .mva-gallery .carousel { background: var(--mva-footer); border-radius: 2px; overflow: hidden; } .mva-gallery .carousel-item img { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; object-fit: contain; /* Hoch- und Querformat ohne Beschnitt */ } .mva-gallery .carousel-indicators [data-bs-target] { width: 10px; height: 10px; border-radius: 50%; border: 0; background-color: #fff; opacity: .55; } .mva-gallery .carousel-indicators .active { background-color: var(--mva-gold); opacity: 1; } .mva-gallery .carousel-control-prev, .mva-gallery .carousel-control-next { width: 9%; } .mva-video { margin: 0 0 1.5rem; background: #000; } .mva-featured-image img { width: 100%; height: auto; } /* Diashow/Video wie früher ganz oben im Beitrag, über dem Titel */ .com-content-article { display: flex; flex-direction: column; } .com-content-article > * { min-width: 0; } .com-content-article > .mva-gallery, .com-content-article > .mva-video, .com-content-article > .mva-featured-image { order: -1; } /* --- Überschriftengrößen: ruhiger, nicht zu groß ---------------------- */ .container-component h1, .com-content-article .page-header h1, .com-content-article .page-header h2, .com-content-category-blog .page-header h1, .blog-featured .page-header h1 { font-size: 1.65rem; font-weight: 500; line-height: 1.25; } .com-content-article__body h2 { font-size: 1.4rem; } .com-content-article__body h3 { font-size: 1.2rem; } .com-content-article__body h4 { font-size: 1.1rem; } @media (max-width: 767.98px) { .container-component h1, .com-content-article .page-header h1, .com-content-article .page-header h2 { font-size: 1.45rem; } } body.site .container-sidebar-right > :first-child, body.site .container-sidebar-left > :first-child { margin-top: 0 !important; } /* --- Modul-Karten (Seitenleisten, top/bottom) --------------------------- */ .site-grid .card { background: var(--mva-ivory-2); border: 1px solid var(--mva-line); border-radius: 2px; } .site-grid .card-header { position: relative; padding: .9rem 1.1rem .6rem; font-size: 1.45rem; font-weight: 600; color: var(--mva-ink); background: transparent; border-bottom: 0; } .site-grid .card-header::after { /* Goldlinie mit kleinem Kreuz */ content: ""; display: block; height: 12px; margin-top: .45rem; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M5 0h2v4h3v2H7v6H5V6H2V4h3z' fill='%239a8a4e'/%3E%3C/svg%3E") left center / 12px 12px no-repeat, linear-gradient(var(--mva-gold), var(--mva-gold)) 18px center / calc(100% - 18px) 1px no-repeat; } .site-grid .card-body { padding: .6rem 1.1rem 1.1rem; } /* --- Unten: bottom-a / bottom-b als Linkkästen, 4 pro Zeile -------------- */ .site-grid .container-bottom-a, .site-grid .container-bottom-b { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; align-items: stretch; margin-top: 1.5rem; } .site-grid .container-bottom-a > *, .site-grid .container-bottom-b > * { margin: 0; min-width: 0; } .container-bottom-a .card, .container-bottom-b .card { font-size: .95rem; line-height: 1.4; height: 100%; } .container-bottom-a .card-header, .container-bottom-b .card-header { font-size: 1.1rem; padding: .7rem .9rem .35rem; } .container-bottom-a .card-header::after, .container-bottom-b .card-header::after { margin-top: .3rem; } .container-bottom-a .card-body, .container-bottom-b .card-body { padding: .35rem .9rem .8rem; } .container-bottom-a ul, .container-bottom-b ul { list-style: none; padding-left: 0; margin: 0; } .container-bottom-a li, .container-bottom-b li { padding: .15rem 0; border-bottom: 1px dotted #e0d8c8; } .container-bottom-a li:last-child, .container-bottom-b li:last-child { border-bottom: 0; } .container-bottom-a a, .container-bottom-b a { text-decoration: none; overflow-wrap: anywhere; } .container-bottom-a a:hover, .container-bottom-b a:hover { text-decoration: underline; } /* Menü-Module in diesen Positionen: kompakt, ohne Menüstil */ .container-bottom-a .mod-menu > li > a, .container-bottom-b .mod-menu > li > a { padding: 0; } @media (max-width: 991.98px) { .site-grid .container-bottom-a, .site-grid .container-bottom-b { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .site-grid .container-bottom-a, .site-grid .container-bottom-b { grid-template-columns: 1fr; } } /* --- Fußbereich --------------------------------------------------------- */ .footer { margin-top: 3rem; color: #d9d1c3; background-color: var(--mva-footer); background-image: none; border-top: 4px solid var(--mva-bordeaux); box-shadow: inset 0 1px 0 var(--mva-gold); font-size: 1.05rem; } .footer .grid-child { align-items: flex-start; gap: 2rem; flex-wrap: wrap; } .footer .grid-child > * { flex: 1 1 14rem; } @media (max-width: 991.98px) { .footer .grid-child { gap: 1.25rem; align-items: stretch; } .footer .grid-child > * { flex: 0 0 auto; } } .footer h3, .footer .h3, .footer strong { color: var(--mva-gold); font-weight: 600; } .footer a:not(.btn), .footer .btn-link { color: #efe8da; text-decoration: none; } .footer a:not(.btn):hover, .footer a:not(.btn):focus { color: var(--mva-gold); text-decoration: underline; } .footer ul { padding-left: 0; list-style: none; } .footer li { margin: .15rem 0; } /* Nach-oben-Knopf */ .back-to-top-link { background: var(--mva-bordeaux); border: 1px solid var(--mva-gold); } .back-to-top-link:hover, .back-to-top-link:focus { background: var(--mva-red); } /* --- Formulare ---------------------------------------------------------- */ .form-control:focus, .form-select:focus { border-color: var(--mva-gold); box-shadow: 0 0 0 .2rem rgba(184, 181, 131, .35); } /* Cookie-Hinweise, Alerts etc. in der Hausschrift */ input, select, textarea, button { font-family: inherit; }