/* GANTRY5 DEVELOPMENT MODE ENABLED.
*
* WARNING: This file is automatically generated by Gantry5. Any modifications to this file will be lost!
*
* For more information on modifying CSS, please read:
*
* http://docs.gantry.org/gantry5/configure/styles
* http://docs.gantry.org/gantry5/tutorials/adding-a-custom-style-sheet
*/
@charset "UTF-8";
/* ==========================================================================
MKALVANIA WEBSITE RELAUNCH
Gantry 5 / Helium
Zieldatei:
/templates/g5_helium/custom/scss/custom.scss
Stand: 2026-09-12
Fassung: v15.9 – Korrekturen am Chroniken-Einzelbeitrag
Diese Datei ersetzt die bisherige custom.scss vollständig.
Gantry-Zuordnung:
- Base Outline -> Page Settings -> Body Classes:
mkalvania-site
- Base Outline -> Navigation -> CSS Classes:
mkv-header
- Branding Custom HTML Particle -> Block -> CSS Classes:
mkv-nav-brand-particle
- Homepage Outline -> Header -> CSS Classes:
mkv-hero
- Hero Custom HTML Particle -> Block -> CSS Classes:
mkv-hero__content
- Base Outline -> Footer -> CSS Classes:
mkv-footer
WICHTIG:
- Alle finalisierten globalen Design-Assets sind aktiv referenziert.
- Vorschau- und Kategoriebilder werden direkt in Joomla/Gantry eingebunden.
- Niemals Gantrys kompilierte CSS-Dateien direkt bearbeiten.
ÄNDERUNGEN v15.8:
- Die drei aktiven Karten im Bereich „Mkalvania entdecken“ werden auf
großen Bildschirmen als zentrierte Dreiergruppe dargestellt.
- Tablet- und Smartphone-Darstellung bleiben responsiv als 2/1-Spaltenraster
erhalten.
ÄNDERUNGEN v15.9:
- Das Einleitungsbild des Beitrags „Aus den Chroniken Mkalvanias“ wird
auf eine ruhige Lesebreite begrenzt und zentriert.
- Der Einleitungsabsatz des Chroniken-Beitrags beginnt bündig mit dem
übrigen Artikeltext.
- Der Ornamentrahmen des Chroniken-Beitrags bleibt transparent, sodass
die Pergamenttextur sichtbar bleibt.
ÄNDERUNGEN v15.7:
- Die ehemaligen Geschichten-Kategorien Chroniken, Erzählungen sowie
Legenden & Überlieferungen werden auf der Bibliotheksseite ebenfalls
als responsive Karten im 3/2/1-Raster dargestellt.
ÄNDERUNGEN v15.6:
- Eigenständiges Schlussbild für den Artikel „Wir sind zurück“ ergänzt.
- Das Bild wird zentriert, responsiv und mit dem vorhandenen Ornamentrahmen
dargestellt; eine Bildunterschrift bleibt optional.
ÄNDERUNGEN v15.5:
- Der vorhandene Ornamentrahmen liegt nun auch über dem Einleitungsbild
der Karten im Bereich „Aktuelle Botschaften“.
- Der Rahmen bleibt auf die Bildfläche begrenzt und verändert nicht die
Höhe oder den Hintergrund des Kartentextes.
ÄNDERUNGEN v15.4:
- Die Kartenfläche des Bereichs „Aktuelle Botschaften“ verwendet jetzt das
gealterte Pergament (#12); die Textur bleibt sichtbar und wird nicht mehr
von einer nahezu deckenden hellen Fläche überlagert.
- Bild- und Inhaltselemente der Joomla-Artikelkarten bleiben für die
Moduloptionen „Bilder anzeigen“ und „Einleitungstext anzeigen“ vorbereitet.
ÄNDERUNGEN v15.3:
- Der Startseiten-Intro-Bereich unterstützt das dynamische Modul
„Aktuelle Botschaften“.
- 1 bis 3 hervorgehobene Joomla-6-Beiträge werden als responsive Karten dargestellt.
- Die Karten verwenden die Mkalvania-Pergamentgestaltung, das 8:5-Bildverhältnis
sowie die lokale Cinzel-/Cormorant-Garamond-Typografie.
- Der Bereich bleibt ohne Beiträge abstandsfrei; bestehende Startseitenbereiche
und das Modul `mkv-home-featured` bleiben unverändert.
ÄNDERUNGEN v15.2:
- Der erste Absatz `.mkv-article-lead` nutzt wieder die volle Artikelbreite und
beginnt bündig mit dem nachfolgenden Fließtext.
- Der Zitatblock `.mkv-quote` erhält keinen eigenen hellen Rechteckhintergrund mehr;
die Seiten-Pergamenttextur bleibt dadurch durchgehend sichtbar.
- Helium-/Browser-Standardränder des blockquote-Elements werden vollständig entfernt.
- Das vorhandene Mkalvania-Zitatornament bleibt als alleiniger sichtbarer Rahmen aktiv.
ÄNDERUNGEN v15.1:
- Helle Inhaltsseiten verwenden Asset #11 als sichtbare Pergamenttextur ohne
deckende beige Farbüberlagerung.
- Zitatblöcke `.mkv-quote` erhalten eine helle Pergamentfläche und dunkle
Textfarben für bessere Lesbarkeit.
- Die dünnen Trennlinien der alternierenden Event-Bild-/Textabschnitte werden
durch das verbindliche lange Mkalvania-Trennornament Asset #14 ersetzt.
- Bestehende Layout-, Karten-, Hero-, Navigations- und Footer-Regeln bleiben
unverändert erhalten.
ÄNDERUNGEN v15.0:
- Der vollständige bisherige operative SCSS-Bestand bleibt erhalten.
- Neue redaktionelle Event-Komponente `.mkv-event-article` ergänzt.
- Bild-/Text-Abschnitte über `.mkv-article-media` wechseln auf Desktop links/rechts.
- `.mkv-article-media--right` setzt das Bild auf die rechte Spalte.
- Unter 800 px werden alle Medienabschnitte einspaltig und das Bild steht vor dem Text.
- `.mkv-article-lead`, Bildlegenden und `.mkv-event-callout` ergänzen die
Gestaltung längerer Event-Einzelbeiträge, insbesondere des Gauklermarkts.
ÄNDERUNGEN v14.14:
- Das festgelegte Ornament-Asset #39 `mkalvania-zitat-rahmen.svg` ersetzt den
veralteten Pfad `mkalvania-decor-quote-frame.svg`.
- Die wiederverwendbare Klasse `.mkv-ornament-frame` ergänzt einen dekorativen
Rahmen für zentrale Zitate, historische Passagen und hervorgehobene Inhaltsblöcke.
- Die bestehende Klasse `.mkv-quote` bleibt kompatibel und verwendet denselben
verbindlichen Rahmen.
ÄNDERUNGEN v14.15:
- Das Ornament liegt nun sichtbar über dem Blockhintergrund; die vorherige
negative z-index-Ebene hatte es hinter dem eigenen Hintergrund verborgen.
ÄNDERUNGEN v14.16:
- Inhalt des Ornamentrahmens wird innerhalb der dekorativen Innenfläche zentriert.
- Maximale Textbreite verhindert, dass Überschriften und Absätze die Seitenornamente
überdecken.
- Der dunkle Blockhintergrund wird auf eine dezente Transparenz reduziert.
ÄNDERUNGEN v14.17:
- Langer horizontaler Zierteiler über `.mkv-ornament-line` ergänzt.
- Kurzes Abschnittsornament über `.mkv-ornament-line--short` ergänzt.
- Beide Varianten verwenden transparente SVG-Assets aus dem Mkalvania-Ornamentsatz.
ÄNDERUNGEN v14.27:
- Die Hero-Bilder der Start- und Inhaltsseiten ragen auf Desktop und Tablet dezent
hinter den unteren Navigationsbereich.
- Der Header bleibt anthrazitfarben, leicht transparent und lesbar.
- Auf Smartphones bleibt die Navigation vollständig vom Hero getrennt.
ÄNDERUNGEN v14.26:
- Die mehrfachen Zwischenstände v14.19 bis v14.24 wurden zusammengeführt.
- Asset #16 wird als einheitlicher Overlay-Rahmen auf den tatsächlichen
Joomla-Bildcontainer `figure.item-image` sowie auf die bekannten
Mkalvania-Kartenbildklassen angewendet.
- Die bestätigte Gantry-Struktur `#g-features` wird direkt berücksichtigt.
- Überholte Gegenregeln, doppelte Overlays und experimentelle Selektoren
wurden entfernt.
ÄNDERUNGEN v14.18:
- Optionaler Vier-Ecken-Rahmen über `.mkv-ornament-frame--corners` ergänzt.
- Das Eckornament wird nur bei ausdrücklich markierten Inhaltsblöcken ausgegeben.
- Die vier SVG-Instanzen werden per CSS gespiegelt und bleiben dekorativ.
ÄNDERUNGEN v13.6:
- Eventkarten-Reihenfolge für das eigene mod_articles-Layout „events“ korrigiert.
- Custom Field „veranstaltungsdatum“ wird als eigene Datumszeile zwischen Titel und Einleitung gestaltet.
- .mkv-event-intro erhält explizit order: 4; der bisherige Flex-Order-Konflikt mit dem Introtext ist behoben.
- Datumsabsatz wird aus der allgemeinen Introtext-Regel ausgenommen.
FORTGEFÜHRTE ÄNDERUNGEN v13.5:
- Eigenes Styling für die Events-Landingpage im Outline „Mkalvania – Events“.
- Die Event-Sections mkv-events-current-section, mkv-events-upcoming-section und
mkv-events-reviews-section erhalten die dunkle Mkalvania-Textur statt Heliums Graublau.
- Das Joomla-6-Modul „Beiträge“ wird über die Modulklasse mkv-events-list als
responsives 3/2/1-Kartenraster gestaltet.
- Eventkarten verwenden Einleitungsbilder im festen 8:5-Verhältnis, Pergamentfläche,
Cinzel-Titel, Cormorant-Garamond-Text und vorbereitete Weiterlesen-Buttons.
- Die Joomla-6-Kernklassen .mod-articles-items, .mod-articles-item,
.mod-articles-title, .item-image und .readmore werden gezielt und seitenlokal gestylt.
- Bestehende Regeln für Bewohner, Geschichten, Orte, Nachbarn und Inhaltsseiten bleiben erhalten.
ÄNDERUNGEN v13.0:
- Neues Styling für Joomla-Kategorieblogs im Outline „Mkalvania – Übersicht“.
- Features-Section mkv-category-section erhält die dunkle Mkalvania-Textur statt Helium-Weiß.
- Page-Content-Block mkv-category-content wird auf die zentrale Inhaltsachse begrenzt.
- Joomla-Blogeinträge werden als responsive Pergamentkarten im 3/2/1-Spaltenraster dargestellt.
- Einleitungsbilder werden verbindlich im 8:5-Format beschnitten.
- Standard-Metadaten werden im Kartenraster defensiv ausgeblendet.
- Weiterlesen-Links werden als Mkalvania-Buttons gestaltet und am Kartenfuß ausgerichtet.
- Bestehende Inhaltsseiten-, Breadcrumb- und Hero-Regeln aus v12.9 bleiben unverändert.
ÄNDERUNGEN v12.9:
- Breadcrumb-Leiste deutlich kompakter gestaltet.
- Cormorant Garamond wird für Breadcrumbs und alle enthaltenen Joomla-/Bootstrap-Elemente
ausdrücklich erzwungen, damit keine Helium-/Bootstrap-Schrift mehr durchschlägt.
- Standard-Margins und -Paddings von platform-content, moduletable, nav und breadcrumb
innerhalb der Breadcrumb-Section neutralisiert.
- Vertikale Innenabstände der Breadcrumb-Leiste auf eine kompakte Navigationshöhe reduziert.
- Bestehender Pergament-Inhaltsbereich und alle Regeln aus v12.8 bleiben erhalten.
ÄNDERUNGEN v12.8:
- Eigenes Styling für das Outline „Mkalvania – Inhaltsseite“ ergänzt.
- Features-Section mit der Klasse mkv-content-section wird zur warmen Pergament-Inhaltsfläche.
- Joomla-Beitragstitel und Standard-Metadaten werden innerhalb dieses Inhaltsseiten-Outlines
defensiv ausgeblendet, da der Seitentitel bereits im Hero steht.
- Kompakter Breadcrumb-Bereich über mkv-content-breadcrumbs-section ergänzt.
- Joomla-Breadcrumbs sowie die vorhandene Klasse .mkv-breadcrumb werden in der
Mkalvania-Typografie und Farbwelt vereinheitlicht.
- Responsive Innenabstände für Artikel und Breadcrumbs ergänzt.
- Bestehende Regeln aus v12.7 bleiben unverändert erhalten.
ÄNDERUNGEN v12.7:
- Ursache des abgeschnittenen Übersichts-Heros anhand der Browser-DOM-Messung identifiziert:
#g-header hatte einen berechneten margin-top von -152px.
- Für #g-header.mkv-page-hero-section wird margin-top deshalb explizit auf 0 !important gesetzt.
- Keine weiteren Positions-/Flex-Korrekturen nötig; der eigentliche Hero-Inhalt war bereits korrekt.
- Intro, Utility und Kartenlayout aus v12.6 bleiben unverändert erhalten.
ÄNDERUNGEN v12.6:
- Übersichts-Hero gegen verbleibendes Abschneiden des Titels gehärtet.
- Gantry-Wrapper im Übersicht-Header werden auf normalen Dokumentfluss zurückgesetzt.
- Header-Overflow auf visible gesetzt; Hero-Innenabstand wird direkt auf die tatsächliche
Gantry-.g-content-Ebene angewandt.
- Hero-Titel und Unterzeile bleiben statisch positioniert und vollständig sichtbar.
- Neuer Utility-Section-Stil mkv-overview-features-section ersetzt Heliums blaugrauen
Standardhintergrund durch die dunkle Mkalvania-Farbwelt.
- Teaserbereich erhält konsistente Maximalbreite und responsive Innenabstände.
- Intro-Abstand leicht nachjustiert.
- Bestehende Regeln aus v12.5 bleiben als Baseline erhalten.
ÄNDERUNGEN v12.5:
- Übersichtsseiten-Hero auf das bereits bewährte Prinzip des Startseiten-Heros zurückgeführt:
normaler Dokumentfluss statt verschachtelter Flex-/Mindesthöhen-Konstruktion.
- Hero-Inhalt erhält eine stabile linke Inhaltsachse und expliziten oberen/unteren Innenabstand.
- H1 wird ausdrücklich statisch positioniert; dadurch kein Abschneiden an der oberen Trennlinie.
- Intro-Section wird vollständig von Helium-Standardabständen befreit und deutlich kompakter.
- Intro-Text liegt auf derselben 1280-px-Inhaltsachse wie die übrigen Mkalvania-Inhalte.
- Bestehende Karten-/2-Spalten-Regeln bleiben unverändert erhalten.
ÄNDERUNGEN v12.4:
- Übersichtsseiten-Hero robust auf der Gantry-Blockebene vertikal zentriert.
- Hero-Innenabstand auf den Gantry-.g-content-Block verlagert.
- Neue Intro-Section-Klasse mkv-overview-intro-section.
- Intro-Bereich erhält dunklen Mkalvania-Hintergrund statt Helium-Weiß.
- Intro-Typografie und responsive Abstände ergänzt.
- 2-Spalten-Regel für .mkv-teaser-grid--2 ist jetzt tatsächlich im Stylesheet enthalten.
- Bestehende Regeln aus v12.3 bleiben erhalten.
ÄNDERUNGEN v12.3:
- 2-Spalten-Variante für Übersichts-Teaser ergänzt: .mkv-teaser-grid--2.
- Auf Desktop/Tablet zwei gleich breite Spalten, auf Smartphones unter 768 px eine Spalte.
- Bestehende v12.2-Regeln für den kompakten Inhalts-Hero bleiben unverändert erhalten.
ÄNDERUNGEN v12.2:
- Neues wiederverwendbares Gantry-Outline „Mkalvania – Übersicht“ wird gestalterisch unterstützt.
- Neuer kompakter Inhalts-Hero über die Section-Klasse mkv-page-hero-section.
- Hero-Modulblock mkv-page-hero sowie Inhaltsklasse mkv-page-hero__content ergänzt.
- Hintergrund: /images/site/header/mkalvania-content-hero.avif.
- Desktop-Höhe 340 px, mobile Höhe 270 px.
- Goldene Cinzel-Seitenüberschrift, Cormorant-Garamond-Unterzeile und dezente Goldkante.
- Bestehende Regeln aus v12.1 bleiben unverändert erhalten.
ÄNDERUNGEN v12.1:
- Helium-Vererbung von Lato 700 auf den strukturellen Ebenen der Hauptnavigation
(.g-main-nav, .g-toplevel und direkte Menü-LI) gezielt auf Cinzel 600 überschrieben.
- Kein universelles Schrift-Override, damit Icon-Fonts wie FontAwesome unberührt bleiben.
ÄNDERUNGEN v12:
- Cinzel und Cormorant Garamond werden ausschließlich als lokale WOFF2-Webfonts eingebunden.
- Keine Verbindung zu Google Fonts oder anderen externen Font-CDNs erforderlich.
- Cinzel ist die Display-/Markenschrift für Überschriften, Wortmarke, Claim, Navigation und CTA-Buttons.
- Cormorant Garamond ist die Standardschrift für Fließtext, Breadcrumbs und Formulare.
- Die Fontpfade liegen verbindlich unter /templates/g5_helium/custom/fonts/.
- Bestehende Layout-, Hero-, Responsive- und Asset-Regeln aus v11 bleiben erhalten.
FORTGEFÜHRTE ÄNDERUNGEN v11:
- Die Absatzschrift im Desktop-Hero wird ab 768 px fest auf 1.2rem gesetzt.
- Dadurch wird der kritische Zeilenumbruch bei ca. 1224 px verhindert, der den Hero-Textblock
zuvor abrupt von zwei auf drei Zeilen vergrößerte.
- Mobile Typografie und alle übrigen Regeln bleiben unverändert.
FORTGEFÜHRTE ÄNDERUNGEN v10:
- Die absolute Desktop-Zentrierung aus v9 wurde vollständig entfernt.
- Der Hero-Inhalt bleibt auf Desktop im normalen Dokumentfluss.
- Der obere Innenabstand wird explizit mit clamp(2.5rem, 5vh, 4rem) gesetzt;
dadurch bleibt der Abstand bei unterschiedlichen Browserbreiten stabil und entspricht
der als korrekt bewerteten schmaleren Ansicht.
- Horizontale Position, maximale Textbreite, Hero-Höhe und mobile Darstellung bleiben erhalten.
FORTGEFÜHRTE ÄNDERUNGEN v9:
- Die Gantry-DOM-Struktur des Hero ist im Stylesheet dokumentiert und verifiziert.
FORTGEFÜHRTE ÄNDERUNGEN v6:
- Footer nach Entfernung der Helium-Standard-Particles deutlich kompakter gesetzt.
FORTGEFÜHRTE ÄNDERUNGEN v5:
- #g-page-surround gegen weißen Seitenabschluss abgesichert.
- Mobile Hero-Ausrichtung am unteren Rand erhalten.
- Maximale Desktop-Hero-Titelgröße leicht reduziert.
========================================================================== */
/* ==========================================================================
0. LOKALE WEBFONTS
Verbindliche Ablage:
/templates/g5_helium/custom/fonts/cinzel/
/templates/g5_helium/custom/fonts/cormorant-garamond/
Es werden ausschließlich lokale WOFF2-Dateien geladen.
Keine @import-Regel und keine Verbindung zu Google Fonts / externen Font-CDNs.
========================================================================== */
/* Cinzel – Display, Marke, Navigation */
@font-face {
font-family: "Cinzel";
src: url('../fonts/cinzel/cinzel-regular.woff2') format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Cinzel";
src: url('../fonts/cinzel/cinzel-medium.woff2') format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Cinzel";
src: url('../fonts/cinzel/cinzel-semibold.woff2') format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
/* Cormorant Garamond – Fließtext */
@font-face {
font-family: "Cormorant Garamond";
src: url('../fonts/cormorant-garamond/cormorant-garamond-regular.woff2') format("woff2");
font-style: normal;
font-weight: 400;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url('../fonts/cormorant-garamond/cormorant-garamond-medium.woff2') format("woff2");
font-style: normal;
font-weight: 500;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url('../fonts/cormorant-garamond/cormorant-garamond-semibold.woff2') format("woff2");
font-style: normal;
font-weight: 600;
font-display: swap;
}
@font-face {
font-family: "Cormorant Garamond";
src: url('../fonts/cormorant-garamond/cormorant-garamond-italic.woff2') format("woff2");
font-style: italic;
font-weight: 400;
font-display: swap;
}
/* ==========================================================================
1. DESIGNVARIABLEN
========================================================================== */
:root {
--mkv-font-display: "Cinzel", Georgia, "Times New Roman", serif;
--mkv-font-body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
--mkv-red: #781517;
--mkv-black: #0D0B0A;
--mkv-anthracite: #1A1816;
--mkv-gold: #B79A5B;
--mkv-gold-light: #D3BB7C;
--mkv-bronze: #756039;
--mkv-parchment: #E6DFC6;
--mkv-brown: #2B1E14;
--mkv-forest: #1E2A1E;
--mkv-night: #0F1626;
--mkv-stone: #2F3236;
--mkv-content-max: 1280px;
--mkv-radius: 3px;
--mkv-border: 1px solid rgba(183, 154, 91, 0.62);
--mkv-border-soft: 1px solid rgba(183, 154, 91, 0.35);
--mkv-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
}
/* ==========================================================================
2. GLOBALER SEITENRAHMEN
========================================================================== */
html, body {
min-height: 100%;
}
body.mkalvania-site #g-page-surround {
min-height: 100vh;
background-color: var(--mkv-black) !important;
}
body.mkalvania-site, .mkalvania-site {
background-color: var(--mkv-black);
color: var(--mkv-parchment);
font-family: var(--mkv-font-body);
font-size: 1rem;
line-height: 1.7;
}
body.mkalvania-site {
background-image: linear-gradient(rgba(13, 11, 10, 0.92), rgba(13, 11, 10, 0.92)), url('../../../../images/site/backgrounds/mkalvania-background-dark-texture.avif');
background-repeat: repeat;
background-size: auto, 1024px 1024px;
}
/* ==========================================================================
3. TYPOGRAFIE
========================================================================== */
.mkalvania-site h1, .mkalvania-site h2, .mkalvania-site h3, .mkalvania-site h4, .mkalvania-site h5, .mkalvania-site h6 {
margin-top: 0;
color: var(--mkv-gold-light);
font-family: var(--mkv-font-display);
font-weight: 600;
letter-spacing: 0.02em;
}
.mkalvania-site h1 {
line-height: 1.08;
}
.mkalvania-site h2, .mkalvania-site h3 {
line-height: 1.2;
}
.mkalvania-site p, .mkalvania-site li {
color: inherit;
}
.mkalvania-site strong, .mkalvania-site b {
font-weight: 600;
}
.mkalvania-site em, .mkalvania-site i {
font-style: italic;
}
.mkalvania-site a {
color: var(--mkv-gold-light);
text-decoration-color: rgba(211, 187, 124, 0.55);
text-underline-offset: 0.16em;
transition: color 160ms ease, text-decoration-color 160ms ease;
}
.mkalvania-site a:hover {
color: #ffffff;
text-decoration-color: var(--mkv-gold-light);
}
/* ==========================================================================
4. ALLGEMEINE INHALTSBREITE
========================================================================== */
.mkv-container {
width: min(calc(100% - 2rem), var(--mkv-content-max));
margin-inline: auto;
}
/* ==========================================================================
5. GANTRY-HELIUM NAVIGATION – GRUNDRAHMEN
Base Outline -> Navigation -> CSS Classes:
mkv-header
========================================================================== */
body.mkalvania-site #g-navigation.mkv-header, .mkalvania-site #g-navigation.mkv-header {
position: relative;
z-index: 50;
min-height: 86px;
color: var(--mkv-parchment);
background: var(--mkv-black) !important;
background-color: var(--mkv-black) !important;
background-image: none !important;
border-bottom: 1px solid rgba(183, 154, 91, 0.62);
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
overflow: visible;
}
/*
Helium darf innerhalb der Navigation keine eigene weiße Fläche
auf Container, Grid, Blocks oder Menülisten legen.
*/
.mkalvania-site #g-navigation.mkv-header > .g-container, .mkalvania-site #g-navigation.mkv-header .g-container, .mkalvania-site #g-navigation.mkv-header .g-grid, .mkalvania-site #g-navigation.mkv-header .g-block, .mkalvania-site #g-navigation.mkv-header .g-content, .mkalvania-site #g-navigation.mkv-header .g-main-nav, .mkalvania-site #g-navigation.mkv-header .g-toplevel {
background-color: transparent !important;
background-image: none !important;
}
.mkalvania-site #g-navigation.mkv-header .g-grid {
align-items: center;
}
.mkalvania-site #g-navigation.mkv-header .g-block {
min-width: 0;
}
.mkalvania-site #g-navigation.mkv-header a {
color: var(--mkv-parchment);
}
.mkalvania-site #g-navigation.mkv-header a:hover, .mkalvania-site #g-navigation.mkv-header .active > a {
color: var(--mkv-gold-light);
}
/* ==========================================================================
6. MKALVANIA-NAVIGATIONSBRANDING
Custom-HTML-Particle:
Mkalvania
Ein Reich zwischen Nebel und Mythos
Particle -> Block -> CSS Classes:
mkv-nav-brand-particle
========================================================================== */
/* Gantry-Block des Branding-Particles */
.mkalvania-site #g-navigation .mkv-nav-brand-particle {
display: flex !important;
align-items: center !important;
min-width: 320px;
overflow: visible !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand-particle > .g-content, .mkalvania-site #g-navigation .mkv-nav-brand-particle .g-content {
width: 100%;
margin: 0 !important;
padding: 0.45rem 0.75rem !important;
overflow: visible !important;
}
/* Inneres Branding */
.mkalvania-site #g-navigation .mkv-nav-brand {
display: inline-flex !important;
align-items: center !important;
gap: 0.85rem;
width: auto !important;
min-width: 0;
min-height: 68px;
color: var(--mkv-parchment) !important;
text-decoration: none !important;
overflow: visible;
transition: opacity 160ms ease, color 160ms ease;
}
.mkalvania-site #g-navigation .mkv-nav-brand:hover {
color: var(--mkv-gold-light) !important;
opacity: 0.96;
}
/*
ENTSCHEIDENDER FIX:
Helium darf das transparente 1254×1254-Masterbild nicht auf die
komplette Blockbreite skalieren.
*/
.mkalvania-site #g-navigation img.mkv-nav-brand__emblem, .mkalvania-site #g-navigation .mkv-nav-brand__emblem {
display: block !important;
width: 60px !important;
height: 60px !important;
min-width: 60px !important;
max-width: 60px !important;
min-height: 60px !important;
max-height: 60px !important;
flex: 0 0 60px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
position: static !important;
}
/* Wortmarke + Unterzeile */
.mkalvania-site #g-navigation .mkv-nav-brand__text {
display: flex !important;
flex-direction: column;
justify-content: center;
min-width: 220px;
line-height: 1.08;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text strong {
display: block;
margin: 0;
color: var(--mkv-gold-light);
font-family: var(--mkv-font-display);
font-size: 1.65rem;
font-weight: 600;
letter-spacing: 0.025em;
line-height: 1;
white-space: nowrap !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text > span {
display: block;
margin-top: 0.3rem;
color: rgba(230, 223, 198, 0.76);
font-family: var(--mkv-font-display);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.06em;
line-height: 1.2;
white-space: nowrap !important;
}
/* ==========================================================================
7. GANTRY-HAUPTMENÜ
========================================================================== */
.mkalvania-site #g-navigation.mkv-header .g-main-nav {
width: 100%;
font-family: var(--mkv-font-display);
font-weight: 600;
}
/*
* Helium setzt auf NAV/UL/LI standardmäßig Lato 700. Obwohl der eigentliche
* Menülink bereits Cinzel verwendet, kann der Browser dadurch Lato weiterhin
* als benutzten Font laden. Deshalb wird die Mkalvania-Displayschrift auch
* explizit auf die drei strukturellen Menüebenen gesetzt.
*/
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel, .mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li {
font-family: var(--mkv-font-display);
font-weight: 600;
}
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
@media (min-width: 768px) {
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel {
display: flex !important;
align-items: center;
justify-content: center;
min-height: 72px;
}
}
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li > .g-menu-item-container {
color: var(--mkv-parchment);
font-family: var(--mkv-font-display);
font-weight: 600;
letter-spacing: 0.015em;
transition: color 160ms ease, background-color 160ms ease;
}
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li:hover > .g-menu-item-container, .mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li.active > .g-menu-item-container {
color: var(--mkv-gold-light);
}
/* Goldener Marker des aktiven Menüpunkts */
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li.active {
position: relative;
}
.mkalvania-site #g-navigation.mkv-header .g-main-nav .g-toplevel > li.active::after {
content: "";
position: absolute;
left: 1rem;
right: 1rem;
bottom: 0.2rem;
height: 1px;
background: linear-gradient(90deg, transparent, var(--mkv-gold), transparent);
}
/* ==========================================================================
8. HELIUM-HEADER-OVERLAY VOLLSTÄNDIG ENTFERNEN
========================================================================== */
.mkalvania-site #g-header::before {
content: none !important;
display: none !important;
background: none !important;
background-image: none !important;
opacity: 0 !important;
}
.mkalvania-site #g-header {
background-color: var(--mkv-black) !important;
background-image: none !important;
}
/* ==========================================================================
9. STARTSEITEN-HERO – DESKTOP
Homepage Outline -> Header -> CSS Classes:
mkv-hero
========================================================================== */
.mkalvania-site #g-header.mkv-hero {
position: relative;
min-height: clamp(560px, 72vh, 780px);
display: grid;
align-items: center;
overflow: hidden;
background: radial-gradient(circle at 78% 35%, rgba(183, 154, 91, 0.16), transparent 38%), linear-gradient(110deg, #0D0B0A 0%, #1A1816 52%, #2B1E14 100%) !important;
background-repeat: no-repeat !important;
background-size: cover !important;
}
.mkalvania-site #g-header.mkv-hero {
background: linear-gradient(90deg, rgba(13, 11, 10, 0.92) 0%, rgba(13, 11, 10, 0.72) 38%, rgba(13, 11, 10, 0.2) 72%, rgba(13, 11, 10, 0.08) 100%), url('../../../../images/site/header/mkalvania-startseite-hero.avif') center / cover no-repeat !important;
}
/* Tatsächlich verifizierte Gantry-DOM-Struktur:
#g-header.mkv-hero
> .g-container
> .g-grid
> .g-block.mkv-hero__content
> .g-content.g-particle
In v10 bleibt der Inhalt bewusst im normalen Dokumentfluss.
Der gewünschte Abstand zur Hero-Oberkante wird über einen definierten
Desktop-Innenabstand erzeugt statt über absolute Zentrierung. */
.mkalvania-site #g-header.mkv-hero > .g-container {
width: 100%;
}
/* Hero-Block in der verifizierten DOM-Struktur */
.mkalvania-site #g-header .g-block.mkv-hero__content {
width: 100% !important;
max-width: none !important;
flex: 0 0 100% !important;
margin: 0 !important;
text-align: left !important;
}
.mkalvania-site #g-header .g-block.mkv-hero__content > .g-content {
width: min(92%, 680px) !important;
max-width: 680px !important;
margin-left: max(1rem, calc((100vw - var(--mkv-content-max)) / 2)) !important;
margin-right: auto !important;
padding: clamp(2rem, 5vw, 5rem) 0 !important;
text-align: left !important;
}
/* v10 – Desktop: stabiler Hero-Abstand im normalen Dokumentfluss.
Die absolute Positionierung aus v9 wird vollständig aufgehoben.
Der obere Abstand orientiert sich bewusst an der schmaleren Ansicht,
die visuell bereits als korrekt bewertet wurde. */
@media (min-width: 768px) {
.mkalvania-site #g-header.mkv-hero > .g-container > .g-grid > .g-block.mkv-hero__content > .g-content {
position: static !important;
top: auto !important;
left: auto !important;
transform: none !important;
z-index: auto;
width: min(92%, 680px) !important;
max-width: 680px !important;
margin-left: max(1rem, calc((100vw - var(--mkv-content-max)) / 2)) !important;
margin-right: auto !important;
padding: clamp(2.5rem, 5vh, 4rem) 0 3rem !important;
box-sizing: border-box;
text-align: left !important;
}
}
/* Falls die Klasse direkt auf einem inneren HTML-Element sitzt */
.mkalvania-site #g-header .g-content > .mkv-hero__content, .mkalvania-site #g-header .mkv-hero__content:not(.g-block) {
width: min(92%, 680px) !important;
max-width: 680px !important;
margin-left: max(1rem, calc((100vw - var(--mkv-content-max)) / 2)) !important;
margin-right: auto !important;
padding: clamp(2rem, 5vw, 5rem) 0 !important;
text-align: left !important;
}
/* Inhalt innerhalb beider Varianten */
.mkalvania-site #g-header .mkv-hero__content h1, .mkalvania-site #g-header .g-block.mkv-hero__content > .g-content h1 {
margin: 0 0 1rem;
color: var(--mkv-gold-light);
font-size: clamp(2.6rem, 4.8vw, 4.4rem);
line-height: 1.02;
text-align: left !important;
text-shadow: 0 2px 16px rgba(0, 0, 0, 0.52);
}
.mkalvania-site #g-header .mkv-hero__content p, .mkalvania-site #g-header .g-block.mkv-hero__content > .g-content p {
max-width: 58ch;
margin-left: 0 !important;
margin-right: auto !important;
font-size: clamp(1.05rem, 1.6vw, 1.25rem);
text-align: left !important;
}
/* v11 – Desktop: feste Absatzschrift verhindert den Zeilenumbruch-Sprung
bei ca. 1224 px Viewportbreite. */
@media (min-width: 768px) {
.mkalvania-site #g-header .mkv-hero__content p, .mkalvania-site #g-header .g-block.mkv-hero__content > .g-content p {
font-size: 1.2rem;
}
}
/* ==========================================================================
11. CTA-BUTTONS
========================================================================== */
.mkv-button {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 0.72rem 1.25rem;
border: 1px solid var(--mkv-gold);
border-radius: var(--mkv-radius);
background: var(--mkv-red);
color: #ffffff !important;
font-family: var(--mkv-font-display);
font-weight: 600;
line-height: 1.2;
text-decoration: none !important;
cursor: pointer;
transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}
.mkv-button:hover {
background: #8B1B1E;
border-color: var(--mkv-gold-light);
color: #ffffff !important;
transform: translateY(-1px);
}
.mkv-button--secondary {
background: rgba(13, 11, 10, 0.55);
color: var(--mkv-gold-light) !important;
}
.mkv-button--secondary:hover {
background: rgba(43, 30, 20, 0.82);
color: #ffffff !important;
}
.mkv-hero__content .mkv-button + .mkv-button, .g-block.mkv-hero__content .mkv-button + .mkv-button {
margin-left: 0.4rem;
}
/* ==========================================================================
12. TEASER-RASTER
========================================================================== */
.mkv-teaser-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: clamp(1rem, 2vw, 1.5rem);
}
.mkv-teaser-card {
position: relative;
overflow: hidden;
background: rgba(26, 24, 22, 0.96);
border: var(--mkv-border);
border-radius: var(--mkv-radius);
box-shadow: var(--mkv-shadow);
}
.mkv-teaser-card img {
display: block;
width: 100%;
aspect-ratio: 1.6;
object-fit: cover;
}
.mkv-teaser-card__body {
padding: 1.1rem 1.2rem 1.3rem;
}
.mkv-teaser-card__body > :last-child {
margin-bottom: 0;
}
/* ==========================================================================
13. PERGAMENTMODULE
========================================================================== */
.mkv-parchment {
padding: clamp(1.5rem, 3vw, 2.5rem);
color: var(--mkv-brown);
background-color: var(--mkv-parchment);
border: 1px solid rgba(117, 96, 57, 0.52);
border-radius: var(--mkv-radius);
}
.mkv-parchment h1, .mkv-parchment h2, .mkv-parchment h3, .mkv-parchment h4 {
color: var(--mkv-red);
}
.mkv-parchment {
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif');
background-repeat: repeat;
background-size: 1024px 1024px;
}
/* ==========================================================================
14. ABSCHNITTSÜBERSCHRIFTEN
========================================================================== */
.mkv-section-title {
position: relative;
font-family: var(--mkv-font-display);
margin-bottom: 1.6rem;
text-align: center;
}
.mkv-section-title::after {
content: "";
display: block;
width: min(520px, 82%);
height: 1px;
margin: 0.8rem auto 0;
background: linear-gradient(90deg, transparent 0%, var(--mkv-bronze) 18%, var(--mkv-gold-light) 50%, var(--mkv-bronze) 82%, transparent 100%);
}
.mkv-section-title::after {
width: min(520px, 82%);
height: 32px;
background: url('../../../../images/site/decorative/mkalvania-decor-divider.svg') center / contain no-repeat;
}
/* ==========================================================================
15. INHALTSSEITE / SIDEBAR
========================================================================== */
.mkv-content-layout {
display: grid;
grid-template-columns: minmax(0, 3fr) minmax(260px, 1fr);
gap: clamp(1.5rem, 3vw, 2.6rem);
align-items: start;
}
.mkv-sidebar {
padding: 1.25rem;
background: rgba(26, 24, 22, 0.88);
border: var(--mkv-border);
border-radius: var(--mkv-radius);
}
.mkv-sidebar > * + * {
margin-top: 1.25rem;
}
/* ==========================================================================
16. ARTIKEL-METADATEN
========================================================================== */
.mkv-meta {
display: grid;
gap: 0.7rem;
}
.mkv-meta__item {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--mkv-parchment);
}
.mkv-meta__item .mkv-icon {
color: var(--mkv-gold);
}
/* ==========================================================================
17. ZITATRAHMEN
========================================================================== */
.mkv-quote {
position: relative;
margin-block: 2rem;
padding: clamp(2.2rem, 4vw, 3.4rem) clamp(1.8rem, 4vw, 3.5rem);
color: var(--mkv-brown);
background-color: rgba(246, 239, 214, 0.36);
background-image: linear-gradient(rgba(246, 239, 214, 0.2), rgba(246, 239, 214, 0.2)), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif');
background-repeat: repeat;
background-size: auto, 2048px 2048px;
}
.mkv-quote::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-zitat-rahmen.svg') center / 100% 100% no-repeat;
}
/* ==========================================================================
18. KARTENMODUL
========================================================================== */
.mkv-map {
position: relative;
width: 100%;
}
.mkv-map > img {
display: block;
width: 100%;
height: auto;
}
.mkv-map::after {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-map-frame.svg') center / 100% 100% no-repeat;
}
/* ==========================================================================
19. WASSERZEICHEN
========================================================================== */
.mkv-watermark {
position: relative;
isolation: isolate;
overflow: hidden;
}
.mkv-watermark::before {
content: "";
position: absolute;
inset: 5%;
z-index: -1;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-brand-watermark.svg') center / min(58%, 520px) auto no-repeat;
}
/* ==========================================================================
20. FOOTER
Base Outline -> Footer -> CSS Classes:
mkv-footer
========================================================================== */
.mkalvania-site #g-footer.mkv-footer {
position: relative;
min-height: 120px;
padding-top: 4.25rem;
padding-bottom: 1rem;
color: var(--mkv-parchment);
background: var(--mkv-black) !important;
background-image: none !important;
border-top: 1px solid rgba(183, 154, 91, 0.45);
}
.mkalvania-site #g-footer.mkv-footer::before {
content: "";
position: absolute;
top: 0.75rem;
left: 50%;
width: min(92%, 1100px);
height: 70px;
transform: translateX(-50%);
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-footer-ornament.svg') center / contain no-repeat;
}
.mkv-footer-emblem {
display: block;
width: min(420px, 82%);
height: auto;
margin: 1rem auto;
}
/* ==========================================================================
21. GENERISCHE ICON-MASKEN
========================================================================== */
.mkv-icon {
display: inline-block;
width: 1.15em;
height: 1.15em;
flex: 0 0 auto;
background-color: currentColor;
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;
-webkit-mask-size: contain;
}
/* Hauptbereiche */
.mkv-icon--chroniken {
mask-image: url('../../../../images/site/icons/mkalvania-icon-chroniken.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-chroniken.svg');
}
.mkv-icon--welt {
mask-image: url('../../../../images/site/icons/mkalvania-icon-welt.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-welt.svg');
}
.mkv-icon--bewohner {
mask-image: url('../../../../images/site/icons/mkalvania-icon-bewohner.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-bewohner.svg');
}
.mkv-icon--geschichten {
mask-image: url('../../../../images/site/icons/mkalvania-icon-geschichten.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-geschichten.svg');
}
.mkv-icon--events {
mask-image: url('../../../../images/site/icons/mkalvania-icon-events.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-events.svg');
}
.mkv-icon--bibliothek {
mask-image: url('../../../../images/site/icons/mkalvania-icon-bibliothek.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-bibliothek.svg');
}
.mkv-icon--orte {
mask-image: url('../../../../images/site/icons/mkalvania-icon-orte.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-orte.svg');
}
/* Meta */
.mkv-icon--meta-kategorie {
mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-kategorie.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-kategorie.svg');
}
.mkv-icon--meta-datum {
mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-datum.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-datum.svg');
}
.mkv-icon--meta-autor {
mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-autor.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-autor.svg');
}
.mkv-icon--meta-lesedauer {
mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-lesedauer.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-lesedauer.svg');
}
.mkv-icon--meta-region {
mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-region.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-meta-region.svg');
}
/* Utility */
.mkv-icon--search {
mask-image: url('../../../../images/site/icons/mkalvania-icon-search.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-search.svg');
}
.mkv-icon--arrow-right {
mask-image: url('../../../../images/site/icons/mkalvania-icon-arrow-right.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-arrow-right.svg');
}
.mkv-icon--article-marker {
mask-image: url('../../../../images/site/icons/mkalvania-icon-article-marker.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-article-marker.svg');
}
/* Social */
.mkv-icon--discord {
mask-image: url('../../../../images/site/icons/mkalvania-icon-social-discord.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-social-discord.svg');
}
.mkv-icon--instagram {
mask-image: url('../../../../images/site/icons/mkalvania-icon-social-instagram.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-social-instagram.svg');
}
.mkv-icon--youtube {
mask-image: url('../../../../images/site/icons/mkalvania-icon-social-youtube.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-social-youtube.svg');
}
.mkv-icon--flickr {
mask-image: url('../../../../images/site/icons/mkalvania-icon-social-flickr.svg');
-webkit-mask-image: url('../../../../images/site/icons/mkalvania-icon-social-flickr.svg');
}
/* ==========================================================================
22. BREADCRUMBS
========================================================================== */
.mkv-breadcrumb {
padding-block: 0.65rem;
border-bottom: var(--mkv-border-soft);
color: rgba(230, 223, 198, 0.78);
font-family: var(--mkv-font-body);
font-size: 0.9rem;
}
.mkv-breadcrumb a {
color: var(--mkv-gold);
}
/* ==========================================================================
23. FORMULARE
========================================================================== */
.mkalvania-site input[type="text"], .mkalvania-site input[type="search"], .mkalvania-site input[type="email"], .mkalvania-site textarea, .mkalvania-site select {
width: 100%;
min-height: 42px;
font-family: var(--mkv-font-body);
padding: 0.65rem 0.75rem;
color: var(--mkv-parchment);
background: rgba(13, 11, 10, 0.72);
border: 1px solid rgba(183, 154, 91, 0.45);
border-radius: var(--mkv-radius);
}
.mkalvania-site textarea {
min-height: 120px;
resize: vertical;
}
/* ==========================================================================
24. BARRIEREFREIHEIT
========================================================================== */
.mkalvania-site a:focus-visible, .mkalvania-site button:focus-visible, .mkalvania-site input:focus-visible, .mkalvania-site select:focus-visible, .mkalvania-site textarea:focus-visible {
outline: 2px solid var(--mkv-gold-light);
outline-offset: 3px;
}
/* ==========================================================================
25. BILDER
========================================================================== */
.mkalvania-site img {
max-width: 100%;
height: auto;
}
.mkv-image-frame {
padding: 3px;
background: rgba(13, 11, 10, 0.72);
border: var(--mkv-border);
border-radius: var(--mkv-radius);
}
/* ==========================================================================
26. TABLET
========================================================================== */
@media (max-width: 1100px) {
.mkalvania-site #g-navigation .mkv-nav-brand-particle {
min-width: 270px;
}
.mkalvania-site #g-navigation img.mkv-nav-brand__emblem, .mkalvania-site #g-navigation .mkv-nav-brand__emblem {
width: 52px !important;
height: 52px !important;
min-width: 52px !important;
max-width: 52px !important;
min-height: 52px !important;
max-height: 52px !important;
flex-basis: 52px !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text {
min-width: 185px;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text strong {
font-size: 1.42rem;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text > span {
font-size: 0.66rem;
letter-spacing: 0.04em;
}
.mkv-teaser-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================================
27. INHALTSSEITEN UNTER 900 PX
========================================================================== */
@media (max-width: 900px) {
.mkv-content-layout {
grid-template-columns: 1fr;
}
.mkv-sidebar {
margin-top: 0.5rem;
}
}
/* ==========================================================================
28. SMARTPHONE / MOBILE HERO
========================================================================== */
@media (max-width: 767px) {
/* Navigation / Branding */
/* Hero */
/* Teaser / Footer */
.mkalvania-site #g-navigation.mkv-header {
min-height: 68px;
}
.mkalvania-site #g-navigation .mkv-nav-brand-particle {
min-width: 0;
width: auto;
}
.mkalvania-site #g-navigation .mkv-nav-brand-particle > .g-content, .mkalvania-site #g-navigation .mkv-nav-brand-particle .g-content {
padding: 0.3rem 0.45rem !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand {
min-height: 52px;
gap: 0.55rem;
}
.mkalvania-site #g-navigation img.mkv-nav-brand__emblem, .mkalvania-site #g-navigation .mkv-nav-brand__emblem {
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
max-width: 44px !important;
min-height: 44px !important;
max-height: 44px !important;
flex-basis: 44px !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text {
min-width: 0;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text strong {
font-size: 1.3rem;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text > span {
display: none;
}
.mkalvania-site #g-header.mkv-hero {
min-height: min(820px, 88svh);
align-items: end;
background: linear-gradient(0deg, rgba(13, 11, 10, 0.94) 0%, rgba(13, 11, 10, 0.68) 38%, rgba(13, 11, 10, 0.2) 70%, rgba(13, 11, 10, 0.08) 100%), url('../../../../images/site/header/mkalvania-startseite-hero-mobile.avif') center / cover no-repeat !important;
}
.mkalvania-site #g-header.mkv-hero > .g-grid, .mkalvania-site #g-header.mkv-hero > .g-container > .g-grid {
align-items: flex-end;
}
.mkalvania-site #g-header .g-block.mkv-hero__content > .g-content, .mkalvania-site #g-header .g-content > .mkv-hero__content, .mkalvania-site #g-header .mkv-hero__content:not(.g-block) {
width: auto !important;
max-width: none !important;
margin: 0 !important;
padding: 2rem 1.1rem 2.5rem !important;
}
.mkalvania-site #g-header .mkv-hero__content h1, .mkalvania-site #g-header .g-block.mkv-hero__content > .g-content h1 {
font-size: clamp(2.25rem, 12vw, 4rem);
}
.mkv-hero__content .mkv-button + .mkv-button, .g-block.mkv-hero__content .mkv-button + .mkv-button {
margin-left: 0;
margin-top: 0.5rem;
}
.mkv-teaser-grid {
grid-template-columns: 1fr;
}
.mkv-section-title::after {
width: 78%;
}
.mkalvania-site #g-footer.mkv-footer::before {
width: 88%;
height: 52px;
}
}
/* ==========================================================================
29. SEHR KLEINE DISPLAYS
========================================================================== */
@media (max-width: 420px) {
.mkalvania-site #g-navigation img.mkv-nav-brand__emblem, .mkalvania-site #g-navigation .mkv-nav-brand__emblem {
width: 40px !important;
height: 40px !important;
min-width: 40px !important;
max-width: 40px !important;
min-height: 40px !important;
max-height: 40px !important;
flex-basis: 40px !important;
}
.mkalvania-site #g-navigation .mkv-nav-brand__text strong {
font-size: 1.18rem;
}
.mkv-button {
width: 100%;
}
.mkv-parchment, .mkv-sidebar {
padding: 1rem;
}
.mkv-quote {
padding: 2rem 1.25rem;
}
}
/* ==========================================================================
30. REDUZIERTE BEWEGUNG
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.mkalvania-site *, .mkalvania-site *::before, .mkalvania-site *::after {
scroll-behavior: auto !important;
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
}
}
/* ==========================================================================
31. DRUCK
========================================================================== */
@media print {
.mkalvania-site #g-footer.mkv-footer::before, .mkv-watermark::before, .mkv-map::after, .mkv-quote::before {
display: none !important;
}
.mkalvania-site {
color: #111111;
background: #ffffff;
}
.mkalvania-site a {
color: #111111;
}
}
/* ==========================================================================
32. ÜBERSICHTSSEITEN – KOMPAKTER INHALTS-HERO
========================================================================== */
/*
* Gantry-Zuordnung für das Outline „Mkalvania – Übersicht“:
*
* Header Section -> CSS Classes:
* mkv-page-hero-section
*
* Module Position „mkv-overview-hero“ -> Block -> CSS Classes:
* mkv-page-hero
*
* Modulinhalt:
*
*
Seitentitel
*
Unterzeile
*
... Inhalt ...
Asset #39:
/images/site/decorative/mkalvania-zitat-rahmen.svg
========================================================================== */
.mkalvania-site .mkv-ornament-frame {
position: relative;
isolation: isolate;
z-index: 0;
margin-block: clamp(1.5rem, 3vw, 2.5rem);
padding: clamp(4.5rem, 7vw, 6rem) clamp(2rem, 8vw, 5rem);
color: var(--mkv-parchment);
text-align: center;
background: rgba(13, 11, 10, 0.14);
}
.mkalvania-site .mkv-ornament-frame::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-zitat-rahmen.svg') center / 100% 100% no-repeat;
}
.mkalvania-site .mkv-ornament-frame > * {
position: relative;
z-index: 1;
width: min(100%, 680px);
margin-right: auto;
margin-left: auto;
}
.mkalvania-site .mkv-ornament-frame > :first-child {
margin-top: 0;
}
.mkalvania-site .mkv-ornament-frame > :last-child {
margin-bottom: 0;
}
/* Der bestehende Zitatblock verwendet ab v14.14 dieselbe Rahmenbasis. */
.mkalvania-site .mkv-quote {
isolation: isolate;
}
.mkalvania-site #g-features.mkv-content-section .mkv-quote, .mkalvania-site #g-features.mkv-content-section .mkv-quote p, .mkalvania-site #g-features.mkv-content-section .mkv-quote strong, .mkalvania-site #g-features.mkv-content-section .mkv-quote em {
color: var(--mkv-brown) !important;
}
.mkalvania-site #g-features.mkv-content-section .mkv-quote span, .mkalvania-site #g-features.mkv-content-section .mkv-quote cite {
color: var(--mkv-bronze) !important;
}
@media (max-width: 700px) {
.mkalvania-site .mkv-ornament-frame {
margin-block: 1.25rem;
padding: 3.5rem 4rem;
}
.mkalvania-site .mkv-ornament-frame > * {
width: 100%;
}
}
@media print {
.mkalvania-site .mkv-ornament-frame::before {
display: none !important;
}
}
/* ==========================================================================
v14.17 – HORIZONTALE LINIENORNAMENTE
Verwendung:
========================================================================== */
.mkalvania-site .mkv-ornament-line {
display: block;
width: min(100%, 800px);
height: 40px;
margin: clamp(1.5rem, 3vw, 2.5rem) auto;
background: url('../../../../images/site/decorative/mkalvania-decor-divider.svg') center / 100% 100% no-repeat;
}
.mkalvania-site .mkv-ornament-line--short {
width: min(100%, 320px);
background-image: url('../../../../images/site/decorative/mkalvania-decor-section-ornament.svg');
}
@media (max-width: 700px) {
.mkalvania-site .mkv-ornament-line {
width: min(100%, 680px);
height: 34px;
margin-block: 1.25rem;
}
.mkalvania-site .mkv-ornament-line--short {
width: min(100%, 280px);
}
}
@media print {
.mkalvania-site .mkv-ornament-line {
display: none !important;
}
}
/* ==========================================================================
v14.18 – OPTIONALE 90-GRAD-ECKORNAMENTE
Verwendung:
========================================================================== */
.mkalvania-site .mkv-ornament-frame--corners {
overflow: hidden;
}
.mkalvania-site .mkv-ornament-frame--corners .mkv-ornament-corners {
position: absolute;
inset: 0;
z-index: 0;
width: auto;
max-width: none;
margin: 0;
pointer-events: none;
}
.mkalvania-site .mkv-ornament-corner {
position: absolute;
display: block;
width: clamp(90px, 14vw, 180px);
aspect-ratio: 1;
background: url('../../../../images/site/decorative/mkalvania-decor-corner-ornament.svg') center / 100% 100% no-repeat;
}
.mkalvania-site .mkv-ornament-corner--tl {
top: 0;
left: 0;
}
.mkalvania-site .mkv-ornament-corner--tr {
top: 0;
right: 0;
transform: scaleX(-1);
}
.mkalvania-site .mkv-ornament-corner--br {
right: 0;
bottom: 0;
transform: scale(-1);
}
.mkalvania-site .mkv-ornament-corner--bl {
bottom: 0;
left: 0;
transform: scaleY(-1);
}
@media (max-width: 700px) {
.mkalvania-site .mkv-ornament-corner {
width: clamp(64px, 22vw, 110px);
}
}
@media print {
.mkalvania-site .mkv-ornament-corners {
display: none !important;
}
}
/* ========================================================================
v14.25 – EINHEITLICHE ORNAMENTALE KARTENRAHMEN
Asset #16:
/images/site/decorative/mkalvania-decor-card-frame.svg
Die wichtigste verifizierte Joomla-Struktur lautet:
#g-features
└─ figure.item-image
└─ img
Der Rahmen liegt ausschließlich über der Bildfläche. Dadurch wird er nicht
über die variable Höhe des Karten-Textbereichs verzerrt.
======================================================================== */
/* Verifizierter Page-Content-Pfad sowie bekannte Bildcontainer. */
#g-features figure.item-image, #g-features .mkv-subcategory-card__image, #g-features .mkv-library-card__image, body.mkalvania-site #g-mainbar .com-content-category-blog__items .item-image, body.mkalvania-site #g-mainbar .blog-items .item-image, body.mkalvania-site.mkv-page--events .mkv-events-list .item-image, .mkalvania-site .mkv-home-discover-card__image, .mkalvania-site .mkv-home-world-card__image, .mkalvania-site .mkv-home-featured__image, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image {
position: relative;
isolation: isolate;
}
/* Asset #16 als transparente Overlay-Ebene. */
#g-features figure.item-image::after, #g-features .mkv-subcategory-card__image::after, #g-features .mkv-library-card__image::after, body.mkalvania-site #g-mainbar .com-content-category-blog__items .item-image::after, body.mkalvania-site #g-mainbar .blog-items .item-image::after, body.mkalvania-site.mkv-page--events .mkv-events-list .item-image::after, .mkalvania-site .mkv-home-discover-card__image::after, .mkalvania-site .mkv-home-world-card__image::after, .mkalvania-site .mkv-home-featured__image::after, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image::after, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image::after {
content: "";
position: absolute;
inset: -4px;
z-index: 5;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-decor-card-frame.svg') center / 100% 100% no-repeat;
}
/* Bild und gegebenenfalls Bildlink bleiben unter dem Ornament. */
#g-features figure.item-image > img, #g-features figure.item-image > a, #g-features .mkv-subcategory-card__image > img, #g-features .mkv-subcategory-card__image > a, #g-features .mkv-library-card__image > img, #g-features .mkv-library-card__image > a, body.mkalvania-site #g-mainbar .com-content-category-blog__items .item-image > img, body.mkalvania-site #g-mainbar .com-content-category-blog__items .item-image > a, body.mkalvania-site #g-mainbar .blog-items .item-image > img, body.mkalvania-site #g-mainbar .blog-items .item-image > a, body.mkalvania-site.mkv-page--events .mkv-events-list .item-image > img, body.mkalvania-site.mkv-page--events .mkv-events-list .item-image > a, .mkalvania-site .mkv-home-discover-card__image > img, .mkalvania-site .mkv-home-world-card__image > img, .mkalvania-site .mkv-home-featured__image > img, .mkalvania-site .mkv-home-discover-card__image > a, .mkalvania-site .mkv-home-world-card__image > a, .mkalvania-site .mkv-home-featured__image > a, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image > img, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image > a {
position: relative;
z-index: 1;
}
@media print {
#g-features figure.item-image::after, #g-features .mkv-subcategory-card__image::after, #g-features .mkv-library-card__image::after, body.mkalvania-site #g-mainbar .com-content-category-blog__items .item-image::after, body.mkalvania-site #g-mainbar .blog-items .item-image::after, body.mkalvania-site.mkv-page--events .mkv-events-list .item-image::after, .mkalvania-site .mkv-home-discover-card__image::after, .mkalvania-site .mkv-home-world-card__image::after, .mkalvania-site .mkv-home-featured__image::after, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image::after {
display: none !important;
}
}
/* ========================================================================
v14.26 – DEZENTE HERO-ÜBERLAPPUNG IM NAVIGATIONSBEREICH
Die Startseiten- und Inhaltsseiten-Heros beginnen auf größeren Bildschirmen geringfügig
unterhalb der Navigation. Das Hero-Bild wird durch den negativen oberen
Außenabstand hinter den unteren Headerbereich verlängert. Der gleich große
obere Innenabstand hält den Hero-Inhalt an seiner bisherigen Position.
Die Navigation bleibt bewusst anthrazitfarben und erhält nur eine leichte
Transparenz sowie eine dezente Unschärfe. Dadurch bleiben Logo und Menü
lesbar, während das Hero-Bild sichtbar in den Navigationsbereich hineinragt.
======================================================================== */
@media only all and (min-width: 1200px) {
.mkalvania-site #g-navigation.mkv-header {
position: relative;
z-index: 50;
background-color: rgba(13, 11, 10, 0.92) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.mkalvania-site #g-header.mkv-hero, .mkalvania-site #g-header.mkv-page-hero-section {
margin-top: -3.5rem !important;
padding-top: 3.5rem !important;
}
}
@media only all and (min-width: 768px) and (max-width: 1199px) {
.mkalvania-site #g-navigation.mkv-header {
position: relative;
z-index: 50;
background-color: rgba(13, 11, 10, 0.94) !important;
background-image: none !important;
-webkit-backdrop-filter: blur(3px);
backdrop-filter: blur(3px);
}
.mkalvania-site #g-header.mkv-hero, .mkalvania-site #g-header.mkv-page-hero-section {
margin-top: -2.5rem !important;
padding-top: 2.5rem !important;
}
}
/* Auf Smartphones bleibt die Navigation vollständig getrennt vom Hero. */
@media only all and (max-width: 767px) {
.mkalvania-site #g-navigation.mkv-header {
background-color: var(--mkv-black) !important;
background-image: none !important;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
.mkalvania-site #g-header.mkv-hero, .mkalvania-site #g-header.mkv-page-hero-section {
margin-top: 0 !important;
padding-top: 0 !important;
}
}
/* ==========================================================================
MKALVANIA – v14.28
Hintergrundtexturen Assets #10, #11 und #12
#10 mkalvania-background-dark-texture – dunkle Bereiche
#11 mkalvania-background-parchment-texture – ruhiges Pergament
#12 mkalvania-background-parchment-aged-texture – gealtertes Pergament
Die Texturen werden bewusst mit einer halbtransparenten Farbfläche kombiniert:
Der Hintergrund bleibt ruhig und gut lesbar, ist aber nicht mehr vollständig
von einer deckenden Einzelfarbe überlagert. Das Hero-Bild und die Navigation
bleiben davon ausgenommen.
========================================================================== */
:root {
--mkv-texture-dark:
url("/images/site/backgrounds/mkalvania-background-dark-texture.avif");
--mkv-texture-parchment:
url("/images/site/backgrounds/mkalvania-background-parchment-texture.avif");
--mkv-texture-parchment-aged:
url("/images/site/backgrounds/mkalvania-background-parchment-aged-texture.avif");
}
/* Grundfläche hinter allen Bereichen. Das Hero bringt sein eigenes Bild mit. */
body.mkalvania-site, body.mkalvania-site #g-page-surround {
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.84), rgba(13, 11, 10, 0.84)), var(--mkv-texture-dark) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Die Textur wird direkt verwendet. Die vorherige helle Overlay-Farbe wurde
entfernt, weil sie die feine Struktur von Asset #11 praktisch unsichtbar
gemacht hat. */
body.mkalvania-site #g-features.mkv-category-section .blog-item, body.mkalvania-site #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card, .mkalvania-site .mkv-home-discover-card, .mkalvania-site .mkv-home-world-card, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .com-content-category-blog__children > div, body.mkalvania-site #g-features.mkv-category-section .blog-item .item-content, body.mkalvania-site #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card__body, .mkalvania-site .mkv-home-discover-card__body, .mkalvania-site .mkv-home-world-card__body, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content {
background-color: var(--mkv-parchment) !important;
background-image: var(--mkv-texture-parchment) !important;
background-repeat: repeat !important;
background-size: 2048px 2048px !important;
}
/* ==========================================================================
MKALVANIA – v14.36
Spezifische Überschreibung der älteren Kartenregeln
Einige Seiten besitzen historisch stärker spezifizierte Regeln für die
Kartenkörper. Diese werden hier ausdrücklich überstimmt, damit die Textur
nicht nur am Rand oder in einem unteren Streifen sichtbar ist.
========================================================================== */
body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .com-content-category-blog__children > div, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card__body {
background-color: var(--mkv-parchment) !important;
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif') !important;
background-repeat: repeat !important;
background-size: 2048px 2048px !important;
}
/* Asset #10: dunkle, warme Textur für die dunklen Inhaltsbereiche. */
.mkalvania-site #g-intro.mkv-home-intro-section, .mkalvania-site #g-features.mkv-home-discover-section, .mkalvania-site #g-above.mkv-home-world-section, .mkalvania-site #g-testimonials.mkv-home-events-section, .mkalvania-site #g-utility.mkv-overview-features-section, .mkalvania-site #g-features.mkv-category-section, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section, body.mkalvania-site.mkv-page--events #g-features, body.mkalvania-site.mkv-page--events .mkv-events-list {
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.82), rgba(13, 11, 10, 0.82)), var(--mkv-texture-dark) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Asset #11: ruhiges Pergament für reguläre Karten-/Modulflächen.
Die Inhaltsseite selbst wird ab v15.1 separat ohne Farbüberlagerung geführt. */
body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card__body {
background-color: var(--mkv-parchment) !important;
background-image: linear-gradient(rgba(230, 223, 198, 0.84), rgba(230, 223, 198, 0.84)), var(--mkv-texture-parchment) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Asset #12: etwas atmosphärischeres Pergament für den hervorgehobenen
Chronik-/Geschichtenbereich der Startseite. */
.mkalvania-site #g-utility.mkv-home-featured-section {
background-color: var(--mkv-parchment) !important;
background-image: linear-gradient(rgba(230, 223, 198, 0.76), rgba(230, 223, 198, 0.76)), var(--mkv-texture-parchment-aged) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Kartenkörper bleiben als eigenständige Pergamentflächen lesbar. */
.mkalvania-site .mkv-home-featured-card, .mkalvania-site .mkv-home-discover-card__body, .mkalvania-site .mkv-home-world-card__body {
background-color: var(--mkv-parchment) !important;
background-image: linear-gradient(rgba(230, 223, 198, 0.86), rgba(230, 223, 198, 0.86)), var(--mkv-texture-parchment) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Der Navigationsbereich bleibt bewusst ruhig und ohne Texturkachelung. */
.mkalvania-site #g-navigation.mkv-header {
background-image: none !important;
}
/* ==========================================================================
MKALVANIA – v14.29
Asset #10 auch für Navigation und Footer
Die Navigation erhält eine stärkere dunkle Überlagerung, damit Logo,
Menü und aktive Menümarkierung klar lesbar bleiben. Im Footer darf die
Textur etwas sichtbarer sein. Das Hero-Bild bleibt eigenständig.
========================================================================== */
.mkalvania-site #g-navigation.mkv-header {
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.93), rgba(13, 11, 10, 0.93)), var(--mkv-texture-dark) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
.mkalvania-site #g-footer.mkv-footer {
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.85), rgba(13, 11, 10, 0.85)), var(--mkv-texture-dark) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* ==========================================================================
MKALVANIA – v14.30
Sichtbare Abschnittsrahmen durch Linienornamente ersetzen
Die Linienornamente #14 und #15 übernehmen die dekorative Trennung.
Die Navigation behält ihre dezente untere Orientierungslinie; Karten- und
Bildrahmen bleiben unverändert, weil sie zur jeweiligen Komponente gehören.
========================================================================== */
.mkalvania-site #g-intro.mkv-home-intro-section, .mkalvania-site #g-features.mkv-home-discover-section, .mkalvania-site #g-utility.mkv-home-featured-section, .mkalvania-site #g-above.mkv-home-world-section, .mkalvania-site #g-testimonials.mkv-home-events-section, .mkalvania-site #g-utility.mkv-overview-features-section, .mkalvania-site #g-features.mkv-content-section, .mkalvania-site #g-features.mkv-category-section, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section, body.mkalvania-site.mkv-page--events #g-features, body.mkalvania-site.mkv-page--events .mkv-events-list {
border-top: 0 !important;
border-bottom: 0 !important;
}
/* Der Footer wird durch das vorhandene Footer-Ornament und den Abstand
vom letzten Inhaltsbereich getrennt, nicht durch eine zusätzliche Linie. */
.mkalvania-site #g-footer.mkv-footer {
border-top: 0 !important;
}
/* Die schmale Linie unter der Navigation bleibt als funktionale Grenze zum
Hero erhalten; die dekorative Abschnittstrennung übernimmt weiterhin #14. */
.mkalvania-site #g-navigation.mkv-header {
border-bottom: 1px solid rgba(183, 154, 91, 0.32) !important;
}
/* ==========================================================================
MKALVANIA – v14.32
Asset #10 im Intro aller Inhaltsseiten
Der Startseiten-Introbereich (.mkv-home-intro-section) besitzt seine eigene
Bereichsregel und bleibt davon ausgenommen. Alle anderen Intro-Varianten,
insbesondere Breadcrumbs und Übersichtstexte, erhalten dieselbe dunkle,
ruhige Textur wie die übrigen Inhaltsbereiche.
========================================================================== */
.mkalvania-site #g-intro:not(.mkv-home-intro-section) {
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.82), rgba(13, 11, 10, 0.82)), var(--mkv-texture-dark) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
border-top: 0 !important;
border-bottom: 0 !important;
}
/* ==========================================================================
MKALVANIA – v14.34
Asset #11 als Kartenhintergrund
Die Kartenkörper erhalten die helle, ruhige Pergamenttextur. Bildköpfe,
Bildhintergründe und der Ornamentrahmen bleiben eigenständige Ebenen.
========================================================================== */
.mkalvania-site #g-features.mkv-category-section .blog-item, .mkalvania-site #g-features.mkv-category-section .mkv-subcategory-card, .mkalvania-site #g-features.mkv-library-sections-section .mkv-library-card, .mkalvania-site .mkv-home-discover-card, .mkalvania-site .mkv-home-world-card, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .com-content-category-blog__children > div {
background-color: var(--mkv-parchment) !important;
background-image: linear-gradient(rgba(230, 223, 198, 0.84), rgba(230, 223, 198, 0.84)), var(--mkv-texture-parchment) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* Textkörper der Karten ebenfalls ausdrücklich auf Asset #11 setzen. */
.mkalvania-site #g-features.mkv-category-section .blog-item .item-content, .mkalvania-site #g-features.mkv-category-section .mkv-subcategory-card__body, .mkalvania-site #g-features.mkv-library-sections-section .mkv-library-card__body, .mkalvania-site .mkv-home-discover-card__body, .mkalvania-site .mkv-home-world-card__body, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content {
background-color: var(--mkv-parchment) !important;
background-image: linear-gradient(rgba(230, 223, 198, 0.84), rgba(230, 223, 198, 0.84)), var(--mkv-texture-parchment) !important;
background-repeat: repeat !important;
background-size: auto, 2048px 2048px !important;
}
/* ==========================================================================
MKALVANIA – v14.37
Kartenflächen endgültig auf die helle Pergamenttextur #11 setzen
Die sichtbare Fläche liegt je nach Joomla-Ausgabe nicht immer auf dem
äußeren Kartencontainer. Deshalb werden hier auch die inneren Textflächen
ausdrücklich erfasst. Die PNG-Datei dient als Fallback, falls der Server
die AVIF-Variante nicht ausliefert.
========================================================================== */
/* Gemeinsame sichtbare Kartenflächen. */
body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .com-content-category-blog__children > div, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .com-content-category-blog__children > div, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .com-content-category-blog__children > div, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card__body, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card__body, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content {
background: var(--mkv-parchment) url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif') repeat !important;
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif'), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.png') !important;
background-repeat: repeat, repeat !important;
background-position: 0 0, 0 0 !important;
background-size: 2048px 2048px, 2048px 2048px !important;
}
/* Innere Joomla-Flächen dürfen die Textur nicht mit einer deckenden Farbe
übermalen. Buttons und Bildköpfe bleiben davon ausgenommen. */
body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body > .item-title, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body > .category-desc, body.mkalvania-site.mkv-page--stories #g-features.mkv-category-section .mkv-subcategory-card__body > .com-content-category-blog__description, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body > .item-title, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body > .category-desc, body.mkalvania-site.mkv-page--residents #g-features.mkv-category-section .mkv-subcategory-card__body > .com-content-category-blog__description, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card__body > .item-title, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card__body > .category-desc, body.mkalvania-site.mkv-page--neighbors #g-features.mkv-category-section .mkv-subcategory-card__body > .com-content-category-blog__description, body.mkalvania-site.mkv-page--library #g-features.mkv-library-sections-section .mkv-library-card__body > *, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content > dl, body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content > p:not(.readmore), body.mkalvania-site.mkv-page--events .mkv-events-list .mod-articles-item-content > div:not(.item-image):not(.mod-articles-tags) {
background: var(--mkv-parchment) url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif') repeat !important;
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif'), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.png') !important;
background-repeat: repeat, repeat !important;
background-position: 0 0, 0 0 !important;
background-size: 2048px 2048px, 2048px 2048px !important;
}
/* ==========================================================================
MKALVANIA – v14.38
Startseite: Kartenflächen ebenfalls auf Pergamenttextur #11
Die Abschnittshintergründe bleiben unverändert. Nur die sichtbaren
Kartenkörper der Startseite erhalten die helle Pergamenttextur:
Geschichten aus Mkalvania, Welt-/Entdeckungskarten und Kommende
Veranstaltung.
========================================================================== */
.mkalvania-site .mkv-home-discover-card, .mkalvania-site .mkv-home-discover-card__body, .mkalvania-site .mkv-home-world-card, .mkalvania-site .mkv-home-world-card__body, .mkalvania-site .mkv-home-featured__body, .mkalvania-site #g-testimonials.mkv-home-events-section .mod-articles-item, .mkalvania-site #g-testimonials.mkv-home-events-section .mod-articles-item-content, .mkalvania-site #g-testimonials.mkv-home-events-section .mod-articles-title, .mkalvania-site #g-testimonials.mkv-home-events-section .mkv-event-date, .mkalvania-site #g-testimonials.mkv-home-events-section .mkv-event-intro {
background: var(--mkv-parchment) url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif') repeat !important;
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif'), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.png') !important;
background-repeat: repeat, repeat !important;
background-position: 0 0, 0 0 !important;
background-size: 2048px 2048px, 2048px 2048px !important;
}
/* Die Bildköpfe und die rote CTA-Schaltfläche bleiben eigenständige Ebenen. */
.mkalvania-site .mkv-home-discover-card__image, .mkalvania-site .mkv-home-world-card__image, .mkalvania-site .mkv-home-featured__image, .mkalvania-site #g-testimonials.mkv-home-events-section .item-image, .mkalvania-site #g-testimonials.mkv-home-events-section .readmore, .mkalvania-site #g-testimonials.mkv-home-events-section .readmore .btn, .mkalvania-site #g-testimonials.mkv-home-events-section .readmore a {
background-image: none !important;
}
/* ==========================================================================
MKALVANIA – v14.39
Startseite: Textfarben der Pergamentkarten korrigieren
Die Karten in „Mkalvania entdecken“ und „Die Welt Mkalvaniens“ verwenden
dieselbe helle Pergamentfläche wie die Nachbarn-Karten. Überschriften und
Fließtext erhalten deshalb dieselben kontrastreichen Farben.
========================================================================== */
.mkalvania-site .mkv-home-discover-card__body, .mkalvania-site .mkv-home-world-card__body {
color: var(--mkv-brown) !important;
}
.mkalvania-site .mkv-home-discover-card__body h2, .mkalvania-site .mkv-home-discover-card__body h3, .mkalvania-site .mkv-home-discover-card__body h4, .mkalvania-site .mkv-home-world-card__body h2, .mkalvania-site .mkv-home-world-card__body h3, .mkalvania-site .mkv-home-world-card__body h4 {
color: var(--mkv-red) !important;
}
.mkalvania-site .mkv-home-discover-card__body p, .mkalvania-site .mkv-home-discover-card__body li, .mkalvania-site .mkv-home-discover-card__body .category-desc, .mkalvania-site .mkv-home-world-card__body p, .mkalvania-site .mkv-home-world-card__body li, .mkalvania-site .mkv-home-world-card__body .category-desc {
color: var(--mkv-brown) !important;
}
/* ==========================================================================
MKALVANIA – v14.40
Startseite: Pergamenttextur #11 auf den gesamten Chronikabschnitt
Die Textur soll im Bereich „Geschichten aus Mkalvania“ nicht nur im
Textfeld, sondern auch in der umgebenden Section und ihren Gantry-
Innenflächen sichtbar sein. Das Bild bleibt eine eigene Ebene.
========================================================================== */
.mkalvania-site #g-utility.mkv-home-featured-section, .mkalvania-site #g-utility.mkv-home-featured-section > .g-container, .mkalvania-site #g-utility.mkv-home-featured-section > .g-container > .g-grid, .mkalvania-site #g-utility.mkv-home-featured-section .g-block, .mkalvania-site #g-utility.mkv-home-featured-section .g-content, .mkalvania-site #g-utility.mkv-home-featured-section .mkv-home-featured__content, .mkalvania-site #g-utility.mkv-home-featured-section .mkv-home-featured__layout {
background: var(--mkv-parchment) url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif') repeat !important;
background-image: url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif'), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.png') !important;
background-repeat: repeat, repeat !important;
background-position: 0 0, 0 0 !important;
background-size: 2048px 2048px, 2048px 2048px !important;
}
/* Das Bild behält seinen eigenen dunklen Bildhintergrund und Rahmen. */
.mkalvania-site #g-utility.mkv-home-featured-section .mkv-home-featured__image {
background-color: #14110e !important;
background-image: none !important;
}
/* ==========================================================================
MKALVANIA – v14.41
Ortskarten: Überschriftengröße an die übrigen Karten angleichen
Der allgemeine Joomla-Kategorieblog-Regelsatz wird auch von der Seite
„Orte“ verwendet. Die Überschriften nutzen nun dieselbe responsive Größe
wie Bewohner, Geschichten, Events und Bibliothek.
========================================================================== */
/* ==========================================================================
MKALVANIA – v14.42
Ortskarten: Kartentitel zentrieren
========================================================================== */
/* ==========================================================================
MKALVANIA – v15.0
EVENT-EINZELBEITRÄGE: ALTERNIERENDES BILD-/TEXTLAYOUT
Vorgesehene HTML-Struktur:
Desktop/Tablet breit:
- Bild/Text abwechselnd links und rechts.
Smartphone/schmale Viewports:
- Einspaltig; Bild steht unabhängig von der Desktopseite immer vor dem Text.
========================================================================== */
.mkalvania-site #g-features.mkv-content-section .mkv-event-article {
width: 100%;
max-width: 1040px;
margin-right: auto;
margin-left: auto;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-lead {
max-width: 860px;
margin: 0 auto 1.15rem;
color: #4b3428;
font-family: var(--mkv-font-body);
font-size: clamp(1.18rem, 1.45vw, 1.34rem);
font-weight: 500;
line-height: 1.62;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media {
position: relative;
display: grid;
grid-template-columns: minmax(280px, 40%) minmax(0, 1fr);
gap: clamp(1.6rem, 3vw, 2.4rem);
align-items: start;
margin: clamp(2.5rem, 5vw, 4rem) 0;
padding-top: clamp(3.25rem, 5vw, 4rem);
border-top: 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media::before {
content: "";
position: absolute;
top: 0;
left: 50%;
width: min(86%, 800px);
height: 40px;
transform: translateX(-50%);
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-decor-divider.svg') center / 100% 100% no-repeat;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media--right {
grid-template-columns: minmax(0, 1fr) minmax(280px, 40%);
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media--right .mkv-article-media__figure {
grid-column: 2;
grid-row: 1;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media--right .mkv-article-media__text {
grid-column: 1;
grid-row: 1;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__figure {
position: relative;
margin: 0;
padding: 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__figure img {
display: block;
width: 100%;
height: auto;
margin: 0;
border: 1px solid rgba(183, 154, 91, 0.72);
border-radius: var(--mkv-radius);
box-shadow: 0 8px 22px rgba(13, 11, 10, 0.22);
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__figure figcaption {
margin: 0.55rem 0 0;
padding: 0 0.3rem;
color: var(--mkv-bronze);
font-family: var(--mkv-font-body);
font-size: 0.95rem;
font-style: italic;
line-height: 1.4;
text-align: center;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__text {
min-width: 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__text > :first-child {
margin-top: 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__text > :last-child {
margin-bottom: 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__text h2 {
margin-top: 0;
margin-bottom: 0.85rem;
font-size: clamp(1.35rem, 1.8vw, 1.7rem);
line-height: 1.25;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout {
position: relative;
max-width: 820px;
margin: clamp(3rem, 6vw, 5rem) auto 0;
padding: clamp(1.6rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 2.75rem);
color: var(--mkv-brown);
text-align: center;
background-color: rgba(230, 223, 198, 0.56);
border-top: 1px solid rgba(183, 154, 91, 0.72);
border-bottom: 1px solid rgba(183, 154, 91, 0.72);
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout::before, .mkalvania-site #g-features.mkv-content-section .mkv-event-callout::after {
content: "";
position: absolute;
left: 50%;
width: min(72%, 520px);
height: 1px;
transform: translateX(-50%);
background: linear-gradient(90deg, transparent, var(--mkv-gold), transparent);
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout::before {
top: -1px;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout::after {
bottom: -1px;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout h2 {
margin: 0 0 1.25rem;
color: var(--mkv-red);
font-family: var(--mkv-font-display);
font-size: clamp(1.45rem, 2vw, 1.85rem);
line-height: 1.25;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout p {
margin: 0.75rem 0;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout p:last-child {
margin-bottom: 0;
}
@media only all and (max-width: 799px) {
.mkalvania-site #g-features.mkv-content-section .mkv-article-media, .mkalvania-site #g-features.mkv-content-section .mkv-article-media--right {
display: flex;
flex-direction: column;
gap: 1.25rem;
margin: 2.6rem 0;
padding-top: 2.8rem;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media::before {
width: min(92%, 680px);
height: 34px;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media--right .mkv-article-media__figure, .mkalvania-site #g-features.mkv-content-section .mkv-article-media--right .mkv-article-media__text {
grid-column: auto;
grid-row: auto;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__figure {
order: 1;
width: 100%;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__text {
order: 2;
width: 100%;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-lead {
font-size: 1.12rem;
}
.mkalvania-site #g-features.mkv-content-section .mkv-event-callout {
margin-top: 3rem;
padding: 1.45rem 1rem;
}
}
@media print {
.mkalvania-site #g-features.mkv-content-section .mkv-article-media::before {
display: none !important;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media, .mkalvania-site #g-features.mkv-content-section .mkv-article-media--right {
display: block;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media__figure {
max-width: 42%;
margin: 0 1.5rem 1rem 0;
float: left;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media--right .mkv-article-media__figure {
margin: 0 0 1rem 1.5rem;
float: right;
}
.mkalvania-site #g-features.mkv-content-section .mkv-article-media::after {
content: "";
display: table;
clear: both;
}
}
/* ==========================================================================
MKALVANIA – v15.2
Lead-Ausrichtung und Zitatblock-Feinschliff
- Lead bündig mit dem übrigen Artikeltext
- Keine zusätzliche Rechteckfläche hinter dem Zitat
- Keine Helium-/Browser-Blockquote-Randlinie
- Das bestehende Zitatornament bleibt alleiniger Rahmen
========================================================================== */
/* 1) Erster Absatz: keine schmalere, zentrierte Lead-Spalte mehr. */
.mkalvania-site #g-features.mkv-content-section .mkv-event-article .mkv-article-lead {
width: 100%;
max-width: none;
margin: 0 0 1.15rem;
}
/* 2) Zitatblock: Seitenpergament bleibt vollständig sichtbar.
Nur das vorhandene SVG-Ornament bildet den Rahmen. */
.mkalvania-site #g-features.mkv-content-section blockquote.mkv-quote, .mkalvania-site #g-features.mkv-content-section .mkv-quote {
color: var(--mkv-brown) !important;
background: transparent !important;
background-color: transparent !important;
background-image: none !important;
border: 0 !important;
border-left: 0 !important;
border-right: 0 !important;
border-top: 0 !important;
border-bottom: 0 !important;
box-shadow: none !important;
}
/* Ornament ausdrücklich beibehalten und über dem transparenten Block darstellen. */
.mkalvania-site #g-features.mkv-content-section blockquote.mkv-quote::before, .mkalvania-site #g-features.mkv-content-section .mkv-quote::before {
content: "";
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-zitat-rahmen.svg') center / 100% 100% no-repeat !important;
}
/* Text bleibt sicher oberhalb der Ornamentebene. */
.mkalvania-site #g-features.mkv-content-section .mkv-quote > * {
position: relative;
z-index: 1;
}
/* Mögliche Helium-Pseudoelemente/Quote-Markierungen neutralisieren. */
.mkalvania-site #g-features.mkv-content-section blockquote.mkv-quote::after {
content: none !important;
display: none !important;
}
/* ==========================================================================
MKALVANIA – v15.3
Startseite: Aktuelle Botschaften
Gantry-Section:
- #g-intro
- Section-Klasse: mkv-home-news-section
Joomla-6-Modul:
- Modulposition: mkv-home-news
- Modulklasse: mkv-home-news
Das Modul zeigt 1 bis 3 hervorgehobene Beiträge aus der Kategorie
„Bibliothek → Botschaften & Bekanntmachungen“. Die Innenabstände werden
erst aktiv, wenn mindestens ein Beitrag vorhanden ist.
========================================================================== */
/* Bereich und Gantry-Innenflächen ohne Helium-Standardabstände. */
.mkalvania-site #g-intro.mkv-home-news-section {
margin: 0 !important;
padding: 0 !important;
color: var(--mkv-parchment);
background-color: #0d0b0a !important;
background-image: linear-gradient(rgba(13, 11, 10, 0.96), rgba(13, 11, 10, 0.96)), url('../../../../images/site/backgrounds/mkalvania-background-dark-texture.avif') !important;
background-repeat: repeat !important;
background-size: auto, 1024px 1024px !important;
border-top: 1px solid rgba(183, 154, 91, 0.16);
border-bottom: 1px solid rgba(183, 154, 91, 0.18);
}
.mkalvania-site #g-intro.mkv-home-news-section > .g-container, .mkalvania-site #g-intro.mkv-home-news-section > .g-container > .g-grid, .mkalvania-site #g-intro.mkv-home-news-section .g-block, .mkalvania-site #g-intro.mkv-home-news-section .g-content {
min-height: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .g-content {
padding: 0 !important;
}
/* Die Modulfläche erhält nur bei vorhandenen Beiträgen Innenabstände. */
.mkalvania-site #g-intro.mkv-home-news-section:has(.mkv-home-news .mod-articles-item) .mkv-home-news.moduletable {
width: min(calc(100% - 2rem), var(--mkv-content-max));
max-width: var(--mkv-content-max);
margin: 0 auto !important;
padding: 2.8rem 0 3.4rem !important;
box-sizing: border-box;
color: var(--mkv-parchment);
font-family: var(--mkv-font-body);
}
/* Modultitel als zentrale Abschnittsüberschrift. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .module-title, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .g-title, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news > h1, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news > h2, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news > h3, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news > h4 {
margin: 0 0 1.7rem !important;
padding: 0 !important;
color: #d3bb7c !important;
font-family: var(--mkv-font-display) !important;
font-size: clamp(1.55rem, 2.1vw, 2.15rem);
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.015em;
text-align: center;
}
/* 1 bis 3 Karten: mittige Anordnung mit gleicher Kartenbreite. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-items {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 380px));
justify-content: center;
gap: 1.6rem;
width: 100%;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-items > li, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-items > .mod-articles-item {
min-width: 0;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Pergamentkarte. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item {
height: 100%;
overflow: hidden;
border: 1px solid rgba(191, 157, 84, 0.62);
border-radius: var(--mkv-radius);
background-color: var(--mkv-parchment);
background-image: linear-gradient(rgba(230, 223, 198, 0.7), rgba(230, 223, 198, 0.7)), var(--mkv-texture-parchment-aged);
background-repeat: repeat;
background-size: auto, 1024px 1024px;
box-shadow: 0 12px 28px rgba(0, 0, 0, 0.25);
transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item:hover, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item:focus-within {
transform: translateY(-2px);
border-color: var(--mkv-gold);
box-shadow: 0 17px 34px rgba(0, 0, 0, 0.3);
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content {
display: flex;
flex-direction: column;
min-height: 100%;
color: var(--mkv-brown);
font-family: var(--mkv-font-body);
}
/* Artikelbild als Kartenkopf. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image {
order: 1;
display: block;
width: 100%;
aspect-ratio: 1.6;
overflow: hidden;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid rgba(191, 157, 84, 0.62);
background: var(--mkv-black);
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image > a, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image img {
display: block;
width: 100% !important;
height: 100% !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .item-image img {
max-width: none !important;
object-fit: cover;
object-position: center;
transition: transform 220ms ease, filter 220ms ease;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item:hover .item-image img, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item:focus-within .item-image img {
transform: scale(1.018);
filter: brightness(1.03);
}
/* Titel und optionale Datums-/Metadatenzeile. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-title {
order: 2;
margin: 0 !important;
padding: 1.15rem 1.3rem 0.35rem !important;
color: var(--mkv-red) !important;
font-family: var(--mkv-font-display) !important;
font-size: clamp(1.18rem, 1.45vw, 1.5rem);
font-weight: 600;
line-height: 1.22;
text-align: center;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-title a, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-link {
display: block;
color: var(--mkv-red) !important;
text-decoration: none !important;
text-align: center;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .article-info, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > dl {
order: 3;
margin: 0.15rem 1.3rem 0.45rem !important;
padding: 0 !important;
color: var(--mkv-bronze) !important;
font-family: var(--mkv-font-body) !important;
font-size: 0.9rem;
line-height: 1.35;
text-align: center;
}
/* Einleitungstext. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > p:not(.readmore), .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > div:not(.item-image):not(.mod-articles-tags):not(.mod-articles-title) {
order: 4;
margin: 0 !important;
padding: 0.55rem 1.3rem 1.15rem !important;
color: var(--mkv-brown) !important;
font-family: var(--mkv-font-body) !important;
font-size: 1.02rem;
line-height: 1.55;
}
/* Weiterlesen am Kartenfuß. */
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .readmore {
order: 5;
margin: auto 1.3rem 1.3rem !important;
padding: 0 !important;
text-align: center;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .readmore .btn, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .readmore a {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 2.7rem;
padding: 0.62rem 1rem !important;
border: 1px solid rgba(120, 21, 23, 0.92) !important;
border-radius: 2px !important;
background: var(--mkv-red) !important;
color: #fff !important;
font-family: var(--mkv-font-display) !important;
font-size: 0.92rem;
font-weight: 600;
line-height: 1.2;
letter-spacing: 0.04em;
text-decoration: none !important;
}
/* Eigenständiges Schlussbild im Artikel „Wir sind zurück“. */
.mkalvania-site #g-features.mkv-content-section figure.mkv-article-image--end {
position: relative;
isolation: isolate;
width: min(100%, 960px);
margin: clamp(2.5rem, 5vw, 4rem) auto 0;
padding: 0;
}
.mkalvania-site #g-features.mkv-content-section figure.mkv-article-image--end::after {
content: "";
position: absolute;
inset: -4px;
z-index: 5;
pointer-events: none;
background: url('../../../../images/site/decorative/mkalvania-decor-card-frame.svg') center / 100% 100% no-repeat;
}
.mkalvania-site #g-features.mkv-content-section figure.mkv-article-image--end img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
margin: 0;
border: 1px solid rgba(183, 154, 91, 0.72);
border-radius: var(--mkv-radius);
box-shadow: 0 8px 22px rgba(13, 11, 10, 0.22);
}
.mkalvania-site #g-features.mkv-content-section figure.mkv-article-image--end figcaption {
margin: 0.6rem 0 0;
padding: 0 0.3rem;
color: var(--mkv-bronze);
font-family: var(--mkv-font-body);
font-size: 0.95rem;
font-style: italic;
line-height: 1.4;
text-align: center;
}
@media only all and (max-width: 767px) {
.mkalvania-site #g-intro.mkv-home-news-section:has(.mkv-home-news .mod-articles-item) .mkv-home-news.moduletable {
width: min(calc(100% - 1.5rem), var(--mkv-content-max));
padding: 2.2rem 0 2.8rem !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-items {
grid-template-columns: 1fr;
gap: 1rem;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-title {
padding-left: 1.1rem !important;
padding-right: 1.1rem !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .article-info, .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > dl {
margin-left: 1.1rem !important;
margin-right: 1.1rem !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > p:not(.readmore), .mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .mod-articles-item-content > div:not(.item-image):not(.mod-articles-tags):not(.mod-articles-title) {
padding-left: 1.1rem !important;
padding-right: 1.1rem !important;
}
.mkalvania-site #g-intro.mkv-home-news-section .mkv-home-news .readmore {
margin-left: 1.1rem !important;
margin-right: 1.1rem !important;
margin-bottom: 1.1rem !important;
}
}
/* ==========================================================================
ENDE v15.3
========================================================================== */
/* ==========================================================================
v15.7 – BIBLIOTHEK: EHEMALIGE GESCHICHTEN-KATEGORIEN ALS KARTEN
========================================================================== */
/* Die Kategorieausgabe erhält auf mkv-page--library dieselbe Kartenlogik
wie bisher auf mkv-page--stories. Die bestehenden .mkv-library-card-
Karten bleiben davon unberührt. */
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.4rem;
width: 100%;
margin: 0 !important;
padding: 0 !important;
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children > div, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children > div {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 100%;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border: 1px solid rgba(191, 157, 84, 0.62);
border-radius: var(--mkv-radius);
background-color: var(--mkv-parchment);
background-image: linear-gradient(rgba(230, 223, 198, 0.92), rgba(230, 223, 198, 0.92)), url('../../../../images/site/backgrounds/mkalvania-background-parchment-texture.avif');
background-repeat: repeat;
background-size: auto, 1024px 1024px;
box-shadow: 0 12px 26px rgba(0, 0, 0, 0.22);
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__image {
display: block;
width: 100%;
aspect-ratio: 1.6;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
border-bottom: 1px solid rgba(191, 157, 84, 0.62);
line-height: 0;
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__img {
display: block;
width: 100%;
height: 100%;
margin: 0 !important;
object-fit: cover;
object-position: center;
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
width: 100%;
box-sizing: border-box;
padding: 1.2rem 1.35rem 1.35rem;
color: var(--mkv-brown);
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__body h3, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__body h4, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children h3, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children h4, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children h3, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children h4 {
margin: 0 0 0.6rem !important;
padding: 0 !important;
color: var(--mkv-red);
font-family: var(--mkv-font-display);
font-size: clamp(1.2rem, 1.4vw, 1.55rem);
font-weight: 600;
line-height: 1.2;
text-align: center;
}
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__body .category-desc, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .mkv-subcategory-card__body .com-content-category-blog__description, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children .category-desc, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children .com-content-category-blog__description, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children .category-desc, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children .com-content-category-blog__description {
margin: 0 !important;
color: var(--mkv-brown);
font-family: var(--mkv-font-body);
font-size: 1.02rem;
line-height: 1.55;
}
@media only all and (min-width: 768px) and (max-width: 1099px) {
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media only all and (max-width: 767px) {
body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .cat-children, body.mkalvania-site.mkv-page--library #g-features.mkv-category-section .com-content-category-blog__children {
grid-template-columns: 1fr;
gap: 1rem;
}
}
/* ==========================================================================
v15.8 – STARTSEITE: „MKALVANIA ENTDECKEN“ ZENTRIEREN
========================================================================== */
/* Drei aktive Karten werden als kompakte, zentrierte Gruppe ausgegeben. */
@media only all and (min-width: 1100px) {
.mkalvania-site .mkv-home-discover__grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
max-width: 960px;
margin-left: auto;
margin-right: auto;
}
}
@media only all and (min-width: 768px) and (max-width: 1099px) {
.mkalvania-site .mkv-home-discover__grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
max-width: 640px;
margin-left: auto;
margin-right: auto;
}
}
/* ========================================================================
MKALVANIA – v15.9
CHRONIKEN-EINZELBEITRAG: DARSTELLUNGSKORREKTUREN
Der Beitrag verwendet .mkv-chronicle-article und
.mkv-ornament-frame. Diese Regeln bleiben deshalb lokal auf diese
Inhaltsseite begrenzt und verändern keine Event-, Karten- oder
Bibliotheksdarstellungen.
======================================================================== */
/* 1. Einleitungsbild: auf eine angemessene Lesebreite begrenzen. */
.mkalvania-site #g-features.mkv-content-section:has(.mkv-chronicle-article) figure.item-image {
width: min(100%, 1040px) !important;
max-width: 1040px !important;
margin: 0 auto 1.3rem !important;
}
.mkalvania-site #g-features.mkv-content-section:has(.mkv-chronicle-article) figure.item-image img {
display: block;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
}
/* 2. Einleitungsabsatz: bündig ohne zusätzliche Einengung oder Einzug. */
.mkalvania-site #g-features.mkv-content-section .mkv-chronicle-article > .mkv-article-lead {
width: 100% !important;
max-width: none !important;
margin: 0 0 1.15rem !important;
padding: 0 !important;
text-indent: 0 !important;
}
/* 3. Ornamentblock: Pergamenttextur durchscheinen lassen. */
.mkalvania-site #g-features.mkv-content-section .mkv-chronicle-article .mkv-ornament-frame {
background: transparent !important;
background-color: transparent !important;
box-shadow: none !important;
}
/*# sourceMappingURL=custom_21.css.map */