/* ================================================================ MINMAX — Joomla 5 Template (Editorial Dark) All colors use CSS custom properties so the params + live Tweaks stay in sync. Data attributes on drive variants. ================================================================ */ :root { /* Core palette — dark (default). Light variant overrides below. */ --mm-bg: #0e0d0c; --mm-bg-elev: #17150f; --mm-fg: #f3ece0; --mm-muted: rgba(243, 236, 224, 0.55); --mm-line: rgba(243, 236, 224, 0.12); --mm-accent: #c9a96e; /* overridden inline from templateDetails param */ --mm-maxw: 1440px; --mm-gutter: 56px; --mm-gutter-sm: 24px; --mm-pad-sec: 96px; --mm-radius: 2px; --mm-ff-display: "Instrument Serif", Georgia, serif; --mm-ff-body: "Inter", system-ui, sans-serif; --mm-ff-mono: "JetBrains Mono", ui-monospace, monospace; --mm-fs-body: 16px; --mm-fs-small: 13px; --mm-fs-xs: 11px; } /* ---- Light variant --------------------------------------------- */ html[data-scheme="light"] { --mm-bg: #f3ece0; --mm-bg-elev:#ece3d3; --mm-fg: #1a1612; --mm-muted: rgba(26, 22, 18, 0.55); --mm-line: rgba(26, 22, 18, 0.14); } /* ---- Section spacing variants ---------------------------------- */ html[data-spacing="tight"] { --mm-pad-sec: 64px; } html[data-spacing="comfortable"] { --mm-pad-sec: 96px; } html[data-spacing="open"] { --mm-pad-sec: 140px; } /* ---- Font-pair variants ---------------------------------------- */ html[data-display-font="fraunces"] { --mm-ff-display: "Fraunces", Georgia, serif; } html[data-display-font="grotesk"] { --mm-ff-display: "Space Grotesk", sans-serif; } html[data-display-font="system"] { --mm-ff-display: system-ui, sans-serif; } html[data-body-font="fraunces"] { --mm-ff-body: "Fraunces", Georgia, serif; } html[data-body-font="grotesk"] { --mm-ff-body: "Space Grotesk", sans-serif; } html[data-body-font="system"] { --mm-ff-body: system-ui, sans-serif; } /* ================================================================ Reset & base ================================================================ */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--mm-bg); color: var(--mm-fg); font-family: var(--mm-ff-body); font-size: var(--mm-fs-body); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { font-family: var(--mm-ff-display); font-weight: 400; letter-spacing: -0.02em; margin: 0 0 0.4em; line-height: 1; } h1 { font-size: clamp(44px, 7vw, 112px); } h2 { font-size: clamp(32px, 4.5vw, 64px); } h3 { font-size: clamp(20px, 1.8vw, 28px); } p { margin: 0 0 1em; } a { color: var(--mm-fg); } img, svg { max-width: 100%; display: block; } /* Mono accents — for labels/kickers */ .mm-kicker, .mm-meta { font-family: var(--mm-ff-mono); font-size: var(--mm-fs-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-fg); } .mm-kicker--accent { color: var(--mm-accent); } .mm-shell { max-width: var(--mm-maxw); margin: 0 auto; padding: 0 var(--mm-gutter); } .mm-skip { position: absolute; left: -9999px; top: 0; background: var(--mm-accent); color: var(--mm-bg); padding: 10px 14px; font-family: var(--mm-ff-mono); font-size: 12px; z-index: 999; } .mm-skip:focus { left: 12px; top: 12px; } /* ================================================================ Header ================================================================ */ .mm-header { border-bottom: 1px solid var(--mm-line); position: sticky; top: 0; z-index: 100; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .mm-header__inner { display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 40px; padding: 28px 0; } .mm-brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--mm-fg); } .mm-brand__mark { width: 36px; height: 36px; } .mm-brand__text { display: flex; flex-direction: column; line-height: 1; } .mm-brand__name { font-family: var(--mm-ff-display); font-size: 24px; letter-spacing: -0.02em; } .mm-brand__tag { font-family: var(--mm-ff-mono); font-size: 10px; color: var(--mm-fg); text-transform: uppercase; margin-top: 4px; letter-spacing: 0.06em; } /* Joomla's default menu markup (ul.mod-menu) — restyle inline */ .mm-header__nav ul { list-style: none; padding: 0; margin: 0; display: flex; gap: 28px; justify-content: flex-end; } .mm-header__nav a { font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-fg); text-decoration: none; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; } .mm-header__nav a:hover { color: var(--mm-fg); } .mm-header__nav li.current > a, .mm-header__nav li.active > a { color: var(--mm-fg); border-bottom-color: var(--mm-accent); } .mm-header__aux { font-family: var(--mm-ff-mono); font-size: 11px; color: var(--mm-fg); } .mm-header__burger { display: none; background: none; border: 1px solid var(--mm-line); width: 40px; height: 40px; cursor: pointer; padding: 0; } .mm-header__burger span { display: block; width: 18px; height: 1px; background: var(--mm-fg); margin: 4px auto; } /* ================================================================ Hero / slider section (module host) ================================================================ */ .mm-hero { position: relative; background: var(--mm-bg-elev); overflow: hidden; isolation: isolate; } .mm-hero__media { position: relative; z-index: 0; } .mm-hero__media, .mm-hero__media .n2-ss-slider, .mm-hero__media .n2-section-smartslider { width: 100%; } .mm-hero > * { position: relative; z-index: 1; } .mm-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.55)); pointer-events: none; z-index: 2; } /* ===== Hero kicker — top left label ===== */ .mm-hero__kicker { position: absolute; top: 32px; left: 0; right: 0; z-index: 5; pointer-events: none; } .mm-hero__kicker .mm-kicker { background: var(--mm-bg); padding: 6px 12px; } /* ===== Hero chrome — bullets + counter + arrows ===== */ .mm-hero__chrome { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 0 32px; z-index: 5; pointer-events: none; } .mm-hero__controls { display: flex; align-items: center; gap: 32px; pointer-events: auto; } .mm-hero__bullets { display: flex; gap: 8px; flex: 1; } .mm-hero__bullet { width: 16px; height: 2px; background: rgba(243,236,224,0.4); cursor: pointer; transition: width .6s cubic-bezier(.7,0,.2,1), background .4s ease; position: relative; overflow: hidden; } .mm-hero__bullet::after { content: ""; position: absolute; top: 0; bottom: 0; width: 0; background: var(--mm-fg); transition: width .6s cubic-bezier(.7,0,.2,1); /* dir: 1 = fill from left, -1 = fill from right */ left: auto; right: auto; } .mm-hero__bullet[data-dir="1"]::after { left: 0; right: auto; } .mm-hero__bullet[data-dir="-1"]::after { right: 0; left: auto; } .mm-hero__bullet.is-active { width: 48px; background: rgba(243,236,224,0.4); } .mm-hero__bullet.is-active::after { width: 100%; } .mm-hero__count { font-family: var(--mm-ff-mono); font-size: 12px; letter-spacing: 0.1em; color: var(--mm-fg); font-variant-numeric: tabular-nums; } .mm-hero__count-sep { color: var(--mm-muted); margin: 0 6px; } .mm-hero__arrows { display: flex; gap: 8px; } .mm-hero__arrow { width: 48px; height: 48px; background: transparent; border: 1px solid var(--mm-line); color: var(--mm-fg); font-size: 16px; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .mm-hero__arrow:hover { border-color: var(--mm-fg); } .mm-hero__arrow.is-next { background: var(--mm-fg); color: var(--mm-bg); border-color: var(--mm-fg); } .mm-hero__arrow.is-next:hover { background: var(--mm-accent); border-color: var(--mm-accent); } /* ================================================================ Blog-top row (featured articles module host) ================================================================ */ .mm-blog-top { padding: var(--mm-pad-sec) 0; border-bottom: 1px solid var(--mm-line); } /* ================================================================ Main + sidebar grid ================================================================ */ .mm-main { padding: var(--mm-pad-sec) 0; } .is-home .mm-main:empty, .is-home .mm-main:not(:has(.mm-main__content > * + *)):not(:has(.mm-main__side)) { padding: 0; } .mm-main__grid[data-sidebar="yes"] { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 64px; } .mm-main__content { min-width: 0; } .mm-main__side { border-left: 1px solid var(--mm-line); padding-left: 40px; } .mm-main__top, .mm-main__bottom { margin-bottom: 48px; } /* ================================================================ Breadcrumbs ================================================================ */ .mm-breadcrumbs { padding: 20px 0; border-bottom: 1px solid var(--mm-line); font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mm-fg); } .mm-breadcrumbs a { color: var(--mm-muted); text-decoration: none; } .mm-breadcrumbs a:hover { color: var(--mm-fg); } /* ================================================================ Footer ================================================================ */ .mm-footer { background: var(--mm-bg-elev); padding: var(--mm-pad-sec) 0 40px; margin-top: 0; } .mm-footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding-bottom: 48px; border-bottom: 1px solid var(--mm-line); } .mm-footer__col h3, .mm-footer__col h4 { font-size: 20px; margin-bottom: 16px; } .mm-footer__col ul { list-style: none; padding: 0; margin: 0; } .mm-footer__col li { margin-bottom: 8px; } .mm-footer__col a { color: var(--mm-fg); text-decoration: none; font-size: 14px; transition: color .12s; } .mm-footer__col a:hover { color: var(--mm-fg); } .mm-footer__bottom { padding-top: 32px; display: flex; justify-content: space-between; gap: 24px; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-fg); } .mm-footer__meta { display: flex; justify-content: space-between; width: 100%; } /* ================================================================ Card wrapper style (for modules rendered with style="mm-card") Joomla fallback — this matches the chromeStyle we'll register. ================================================================ */ .mm-card { padding: 24px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); margin-bottom: 24px; background: var(--mm-bg); } .mm-card > h3, .mm-card > h4 { margin-top: 0; } /* ================================================================ Component output — Joomla article / category defaults Keep it editorial. ================================================================ */ .item-page h1, .blog h1, .category-list h1, .contact h1 { font-size: clamp(40px, 5vw, 72px); margin-bottom: 12px; } .item-page .article-info, .item-info { font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--mm-fg); margin-bottom: 32px; } .item-page p { font-size: 18px; line-height: 1.75; max-width: 70ch; } .item-page img { margin: 32px 0; border-radius: var(--mm-radius); } .readmore a, .btn { display: inline-block; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; padding: 12px 18px; border: 1px solid var(--mm-fg); color: var(--mm-fg); text-decoration: none; transition: background .15s, color .15s; } .readmore a:hover, .btn:hover { background: var(--mm-fg); color: var(--mm-bg); } /* Joomla blog/category list items → 2- or 3-col editorial grid */ .blog .items-row, .category-list ul.category { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 32px; list-style: none; padding: 0; } .blog .item, .category-list ul.category li { padding: 0; border: none; } .blog .item h2, .category-list h3 { font-size: 28px; letter-spacing: -0.01em; } /* ================================================================ Category Blog override (html/com_content/category/blog*.php) Matches the Blog-Top card look. ================================================================ */ .mm-blog-grid-wrap .mm-section-heading { margin-bottom: 48px; } .mm-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 40px; } .mm-section-heading h2 { margin: 0; font-size: clamp(36px, 4vw, 56px); } .mm-section-heading .mm-kicker { display: block; margin-bottom: 8px; } .mm-section-heading__more { text-decoration: underline; text-underline-offset: 6px; color: var(--mm-fg) !important; white-space: nowrap; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; } .mm-cat-desc { max-width: 52ch; color: var(--mm-muted); font-size: 15px; line-height: 1.6; } .mm-blog-grid-wrap .mm-section-heading h1 { margin: 0; } .mm-blog-tagline { max-width: 60ch; color: var(--mm-muted); font-size: 16px; line-height: 1.6; margin: 6px 0 0; } /* ================================================================ mm-blog-grid — Startseite (mod_articles_latest) Bleibt exakt wie vorher. ================================================================ */ .mm-blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 260px)); gap: 0 32px; justify-content: center; align-items: start; } /* Höchstens 4 Karten anzeigen */ .mm-blog-card:nth-child(n+5) { display: none; } /* ================================================================ Bento-Mosaik — NUR auf der Blog-Seite (mm-blog-grid-wrap) Alle Styles mit .mm-blog-grid-wrap geprefixed → Startseite sicher. ================================================================ */ .mm-blog-grid-wrap .mm-blog-grid { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 12px; justify-content: unset; align-items: unset; } /* Karten-Limit aufheben */ .mm-blog-grid-wrap .mm-blog-card:nth-child(n+5) { display: flex; } /* Kachelgrössen */ .mm-blog-grid-wrap .mm-blog-card { grid-column: span 1; grid-row: span 1; } .mm-blog-grid-wrap .mm-blog-card[data-size="2x1"] { grid-column: span 2; grid-row: span 1; } .mm-blog-grid-wrap .mm-blog-card[data-size="3x1"] { grid-column: span 3; grid-row: span 1; } .mm-blog-grid-wrap .mm-blog-card[data-size="1x2"] { grid-column: span 1; grid-row: span 2; } .mm-blog-grid-wrap .mm-blog-card[data-size="2x2"] { grid-column: span 2; grid-row: span 2; } .mm-blog-grid-wrap .mm-blog-card[data-size="3x2"] { grid-column: span 3; grid-row: span 2; } .mm-blog-grid-wrap .mm-blog-card[data-size="1x3"] { grid-column: span 1; grid-row: span 3; } .mm-blog-grid-wrap .mm-blog-card[data-size="2x3"] { grid-column: span 2; grid-row: span 3; } /* Card: vollflächig, kein Overflow */ .mm-blog-grid-wrap .mm-blog-card { position: relative; overflow: hidden; width: auto; height: 100%; border-radius: var(--mm-radius); background: var(--mm-bg-elev); outline: 1px solid var(--mm-line); } /* Ganzer Card-Hover — outline aufleuchten, leicht hochschieben */ .mm-blog-grid-wrap .mm-blog-card { transition: outline-color .2s ease, transform .2s ease; outline: 1px solid var(--mm-line); } .mm-blog-grid-wrap .mm-blog-card:hover { outline-color: var(--mm-accent); transform: translateY(-2px); } /* NR-Badge oben rechts */ .mm-blog-grid-wrap .mm-blog-card__nr { position: absolute; top: 12px; right: 12px; z-index: 3; font-family: var(--mm-ff-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; background: rgba(14,13,12,.82); color: var(--mm-accent); padding: 5px 10px; border-radius: var(--mm-radius); } /* Karte als Flexbox — NUR im Bento-Grid, nicht auf Startseite */ .mm-blog-grid-wrap .mm-blog-grid .mm-blog-card { display: flex !important; flex-direction: column; } .mm-blog-grid-wrap .mm-blog-card__media { position: relative; flex: 1 1 0; min-height: 0; display: block; overflow: hidden; } .mm-blog-grid-wrap .mm-blog-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mm-blog-grid-wrap .mm-blog-card__media .mm-ph { position: absolute; inset: 0; display: block; width: 100%; height: 100%; } /* Kein Pseudo-Element */ .mm-blog-grid-wrap .mm-blog-card::after { display: none; } /* Schwarzer Balken — feste Höhe, immer unten */ .mm-blog-grid-wrap .mm-blog-card__body { flex: 0 0 auto; padding: 12px 18px; z-index: 2; background: var(--mm-bg); display: flex; flex-direction: column; justify-content: center; overflow: hidden; } .mm-blog-grid-wrap .mm-blog-card__body .mm-kicker { display: block; margin-bottom: 6px; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-fg); } .mm-blog-grid-wrap .mm-blog-card__tag { color: var(--mm-accent); } .mm-blog-grid-wrap .mm-blog-card__title { font-size: 17px; line-height: 1.2; margin: 0; letter-spacing: -0.01em; } .mm-blog-grid-wrap .mm-blog-card__title a { color: var(--mm-fg); text-decoration: none; } .mm-blog-grid-wrap .mm-blog-card__title a:hover { color: inherit; } /* Titelgrösse skaliert mit Kachelgrösse */ .mm-blog-grid-wrap .mm-blog-card[data-size="2x2"] .mm-blog-card__title, .mm-blog-grid-wrap .mm-blog-card[data-size="3x2"] .mm-blog-card__title, .mm-blog-grid-wrap .mm-blog-card[data-size="2x3"] .mm-blog-card__title { font-size: 28px; } .mm-blog-grid-wrap .mm-blog-card[data-size="1x3"] .mm-blog-card__title, .mm-blog-grid-wrap .mm-blog-card[data-size="3x1"] .mm-blog-card__title { font-size: 22px; } .mm-blog-grid-wrap .mm-blog-card[data-size="2x1"] .mm-blog-card__title { font-size: 20px; } /* Stretched link — macht die ganze Karte klickbar */ .mm-blog-grid-wrap .mm-blog-card__title a::after { content: ''; position: absolute; inset: 0; z-index: 3; } /* Intro-Text: immer anzeigen, max 2 Zeilen */ .mm-blog-grid-wrap .mm-blog-card__intro { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 13px; color: var(--mm-fg); line-height: 1.5; margin-top: 5px; margin-bottom: 0; } .mm-blog-card { display: flex; flex-direction: column; width: 100%; } /* Gerade Karten (2, 4) haben kleineres Bild — Oberkante bleibt gleich, Unterkante höher */ .mm-blog-card:nth-child(even) .mm-blog-card__media { aspect-ratio: var(--mm-blog-even-ratio, 4/3); } .mm-blog-card__media { display: block; aspect-ratio: 4/5; overflow: hidden; background: var(--mm-bg-elev); position: relative; } .mm-blog-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .mm-blog-card__media:hover img { transform: scale(1.03); } .mm-blog-card__media .mm-ph { display: block; width: 100%; height: 100%; } .mm-blog-card__body { padding-top: 16px; } .mm-blog-card__body .mm-kicker { display: block; margin-bottom: 8px; } .mm-blog-card__title { font-size: 22px; line-height: 1.15; margin: 0 0 10px; letter-spacing: -0.01em; } .mm-blog-card__title a { color: var(--mm-fg); text-decoration: none; } .mm-blog-card__title a:hover { color: var(--mm-accent); } .mm-blog-card__intro { font-size: 14px; color: var(--mm-muted); line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mm-blog-empty { color: var(--mm-fg); font-style: italic; padding: 40px 0; } .mm-pagination { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--mm-line); font-family: var(--mm-ff-mono); font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; } .mm-pagination ul { list-style: none; padding: 0; display: flex; gap: 4px; justify-content: center; } .mm-pagination a, .mm-pagination span { padding: 10px 14px; border: 1px solid var(--mm-line); color: var(--mm-fg); text-decoration: none; } .mm-pagination .active span { background: var(--mm-accent); color: var(--mm-bg); border-color: var(--mm-accent); } /* ================================================================ Forms (contact, search, login) ================================================================ */ input[type="text"], input[type="email"], input[type="search"], input[type="password"], input[type="url"], textarea, select { background: transparent; border: none; border-bottom: 1px solid var(--mm-line); color: var(--mm-fg); font-family: var(--mm-ff-body); font-size: 15px; padding: 12px 0; width: 100%; outline: none; transition: border-color .15s; } input:focus, textarea:focus, select:focus { border-bottom-color: var(--mm-accent); } label { font-family: var(--mm-ff-mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--mm-fg); display: block; margin-bottom: 6px; } button, .button, input[type="submit"] { background: var(--mm-fg); color: var(--mm-bg); border: none; font-family: var(--mm-ff-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; padding: 14px 22px; cursor: pointer; transition: background .15s; } button:hover, .button:hover, input[type="submit"]:hover { background: var(--mm-accent); } /* ================================================================ System messages ================================================================ */ #system-message-container { margin: 20px 0; } .alert { padding: 14px 18px; border-left: 2px solid var(--mm-accent); background: var(--mm-bg-elev); margin-bottom: 12px; font-size: 14px; } /* ================================================================ Debug overlay — positions helper ================================================================ */ html[data-debug="1"] [data-mm-pos] { outline: 1px dashed var(--mm-accent); outline-offset: -1px; position: relative; } html[data-debug="1"] [data-mm-pos]::before { content: attr(data-mm-pos); position: absolute; top: 0; left: 0; background: var(--mm-accent); color: var(--mm-bg); font-family: var(--mm-ff-mono); font-size: 9px; padding: 2px 6px; text-transform: uppercase; letter-spacing: 0.08em; z-index: 20; } .mm-debug { position: fixed; bottom: 0; left: 0; right: 0; z-index: 99; pointer-events: none; } .mm-debug__bar { pointer-events: auto; background: rgba(20,18,16,0.95); backdrop-filter: blur(14px); color: var(--mm-fg); font-family: var(--mm-ff-mono); font-size: 11px; letter-spacing: 0.06em; padding: 10px 20px; display: flex; gap: 28px; align-items: center; border-top: 1px solid var(--mm-line); text-transform: uppercase; } .mm-debug__bar strong { color: var(--mm-accent); font-weight: 600; } .mm-debug__bar [data-mm-debug-close] { margin-left: auto; background: transparent; border: none; color: var(--mm-fg); font-size: 18px; cursor: pointer; padding: 0; width: 24px; height: 24px; } /* ================================================================ Responsive ================================================================ */ @media (max-width: 960px) { :root { --mm-gutter: 24px; --mm-pad-sec: 64px; } .mm-header__inner { grid-template-columns: auto 1fr auto; gap: 20px; } .mm-header__nav { display: none; } .mm-header__nav.is-open { display: block; position: absolute; top: 100%; left: 0; right: 0; background: var(--mm-bg); border-bottom: 1px solid var(--mm-line); padding: 20px 24px; } .mm-header__nav.is-open ul { flex-direction: column; gap: 16px; align-items: flex-start; } .mm-header__burger { display: block; } .mm-main__grid[data-sidebar="yes"] { grid-template-columns: 1fr; } .mm-main__side { border-left: none; padding-left: 0; border-top: 1px solid var(--mm-line); padding-top: 40px; margin-top: 40px; } .mm-footer__cols { grid-template-columns: 1fr; gap: 32px; } .mm-footer__bottom { flex-direction: column; } } /* ================================================================ Intro section ================================================================ */ .mm-intro { padding: var(--mm-pad-sec) 0; border-bottom: 1px solid var(--mm-line); } .mm-intro__header { margin-bottom: 48px; } .mm-intro__header .mm-kicker { display: block; margin-bottom: 12px; } .mm-intro__title { font-family: var(--mm-ff-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.1; margin: 0; letter-spacing: -.01em; } .mm-intro .mm-shell { padding: 0 var(--mm-gutter); } .mm-intro h1, .mm-intro h2, .mm-intro h3 { font-family: var(--mm-ff-display); font-weight: 400; margin: 0 0 24px; } .mm-intro p { color: var(--mm-fg); font-size: 1rem; line-height: 1.7; margin: 0 0 16px; } .mm-custom-mod .mm-kicker { display: block; margin-bottom: 12px; } .mm-custom-mod__title { font-family: var(--mm-ff-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; margin: 0 0 24px; } /* ================================================================ Featured Editorial — vertically staggered rows ================================================================ */ .mm-editorial { padding: var(--mm-pad-sec) 0; border-bottom: 1px solid var(--mm-line); } .mm-editorial-header { margin-bottom: 64px; } .mm-editorial-header .mm-kicker { display: block; margin-bottom: 12px; } .mm-editorial-heading { font-family: var(--mm-ff-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 400; line-height: 1.1; margin: 0 0 64px; letter-spacing: -.01em; } .mm-editorial-list { display: flex; flex-direction: column; gap: 0; } .mm-editorial-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; padding: 80px 0; border-bottom: 1px solid var(--mm-line); } .mm-editorial-row:last-child { border-bottom: none; } /* Ungerade (1, 3): Bild links */ .mm-editorial-row--img-left .mm-editorial-row__media { order: 0; } .mm-editorial-row--img-left .mm-editorial-row__body { order: 1; } /* Gerade (2, 4): Bild rechts */ .mm-editorial-row--img-right .mm-editorial-row__media { order: 1; } .mm-editorial-row--img-right .mm-editorial-row__body { order: 0; } .mm-editorial-row__media { display: block; aspect-ratio: 4/3; overflow: hidden; background: var(--mm-bg-elev); position: relative; } .mm-editorial-row__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .mm-editorial-row__media:hover img { transform: scale(1.03); } .mm-editorial-row__media .mm-ph { display: block; width: 100%; height: 100%; } .mm-editorial-row__body { display: flex; flex-direction: column; gap: 16px; } .mm-editorial-row__title { font-family: var(--mm-ff-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 400; line-height: 1.1; margin: 0; } .mm-editorial-row__title a { color: var(--mm-fg); text-decoration: none; } .mm-editorial-row__title a:hover { color: var(--mm-accent); } .mm-editorial-row__intro { color: var(--mm-fg); font-size: .9375rem; line-height: 1.65; margin: 0; } .mm-editorial-row__more { display: inline-block; font-family: var(--mm-font-mono); font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mm-accent); text-decoration: none; } .mm-editorial-row__more:hover { text-decoration: underline; } /* ===== Scheme toggle button ===== */ .mm-scheme-toggle { background: none; border: none; cursor: pointer; color: var(--mm-fg); padding: 4px; display: flex; align-items: center; opacity: .7; transition: opacity .2s; } .mm-scheme-toggle:hover { opacity: 1; } /* Dark mode: show moon, hide sun */ [data-scheme="dark"] .mm-scheme-toggle__icon--dark { display: block; } [data-scheme="dark"] .mm-scheme-toggle__icon--light { display: none; } /* Light mode: show sun, hide moon */ [data-scheme="light"] .mm-scheme-toggle__icon--dark { display: none; } [data-scheme="light"] .mm-scheme-toggle__icon--light { display: block; } /* ================================================================ View Transitions — Kachelbild morpht zum Artikel-Hero ================================================================ */ @media (prefers-reduced-motion: no-preference) { ::view-transition-old(root) { animation-duration: .3s; } ::view-transition-new(root) { animation-duration: .3s; } } /* Artikel-Hero — volle Breite, kein Rand */ [data-mm-page='article'] .mm-main { padding-top: 0 !important; } .mm-article-hero { width: 100vw; margin-left: calc(50% - 50vw); height: 60vh; min-height: 380px; max-height: 600px; overflow: hidden; position: relative; } .mm-article-hero img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .mm-article-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 80px; background: linear-gradient(to top, var(--mm-bg) 0%, transparent 100%); pointer-events: none; } /* Zurück-Knopf — absolut im Hero oben links */ .mm-article-back { position: absolute; top: 20px; left: var(--mm-gutter); z-index: 50; } .mm-article-back a { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mm-ff-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mm-fg); text-decoration: none; background: rgba(14,13,12,.75); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); padding: 8px 16px; border-radius: var(--mm-radius); transition: border-color .2s; } .mm-article-back a:hover { border-color: var(--mm-accent); color: var(--mm-accent); } /* Artikel-Layout */ .mm-article-wrap { max-width: 960px; margin: 0 auto; padding: 0 var(--mm-gutter) 80px; } .mm-article-header { margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--mm-line); } .mm-article-header .mm-kicker { display: block; margin-bottom: 12px; } /* Titel-Block im Hero unten */ .mm-article-hero__body { position: absolute; bottom: 0; left: 0; right: 0; padding: 60px calc((100% - 960px) / 2 + var(--mm-gutter)) 0; background: linear-gradient(to top, rgba(14,13,12,1) 0%, rgba(14,13,12,.75) 40%, transparent 100%); z-index: 2; } .mm-article-title { margin-bottom: 0; } .mm-article-hero__body .mm-kicker { display: block; margin-bottom: 12px; } .mm-article-title { font-family: var(--mm-ff-display); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 400; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 16px; color: var(--mm-fg); } .mm-article-intro { font-size: 1.15rem; color: var(--mm-fg); font-style: italic; line-height: 1.6; margin: 0; padding: 20px 0 24px; border-bottom: 1px solid var(--mm-line); } .mm-article-body { font-size: 1rem; line-height: 1.75; color: var(--mm-fg); margin-top: 40px; } .mm-article-body p { margin: 0 0 1.5em; } .mm-article-body h2, .mm-article-body h3 { font-family: var(--mm-ff-display); font-weight: 400; margin: 2em 0 .75em; } /* System-Message-Container auf Artikel-Seite verstecken wenn leer */ .mm-article-hero ~ * #system-message-container:empty, #system-message-container:empty { display: none; } /* Nach-oben Knopf im Footer */ .mm-scroll-top { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: transparent; border: 1px solid var(--mm-line); border-radius: 6px; color: #ffffff; font-size: 16px; cursor: pointer; transition: border-color .2s, color .2s; margin-left: auto; } .mm-scroll-top:hover { border-color: var(--mm-accent); color: var(--mm-accent); } /* ================================================================ Blog Filter — Suche + Tag-Buttons ================================================================ */ .mm-blog-filter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 0; } .mm-blog-filter__search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); padding: 8px 14px; color: var(--mm-muted); flex-shrink: 0; } .mm-blog-filter__search input { background: transparent; border: none; outline: none; color: var(--mm-fg); font-size: 13px; width: 200px; } .mm-blog-filter__search input::placeholder { color: var(--mm-muted); } .mm-blog-filter__tags { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; } .mm-tag-btn { background: transparent; border: 1px solid var(--mm-line); border-radius: var(--mm-radius); color: var(--mm-muted); font-family: var(--mm-ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; padding: 6px 14px; cursor: pointer; transition: border-color .2s, color .2s, background .2s; } .mm-tag-btn:hover { border-color: var(--mm-accent); color: var(--mm-accent); } .mm-tag-btn--active { background: var(--mm-accent); border-color: var(--mm-accent); color: #0e0d0c; } .mm-blog-filter__count { font-family: var(--mm-ff-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mm-muted); white-space: nowrap; margin-left: auto; } .mm-blog-filter__line { border: none; border-top: 1px solid var(--mm-line); margin: 24px 0 24px; } /* Gefilterte Karten komplett aus dem Grid-Flow nehmen */ .mm-blog-grid .mm-blog-card[style*="display: none"] { display: none !important; } /* Filter-Modus: alle Karten 3x1 (volle Breite, 1 Zeile hoch) */ .mm-blog-grid--filtering .mm-blog-card { grid-column: span 3 !important; grid-row: span 1 !important; } /* Linie über der Filter-Bar — symmetrisch zur __line unten */ .mm-blog-filter { border-top: 1px solid var(--mm-line); padding-top: 24px; margin-top: 48px; } .mm-blog-header__line { border: none; border-top: 1px solid var(--mm-line); margin: 32px 0 0; } /* ================================================================ Galerie — Kachelgrid + Lightbox ================================================================ */ .mm-gallery-wrap { max-width: var(--mm-content-width, 1200px); margin: 0 auto; } .mm-gallery-filter { display: flex; justify-content: flex-end; margin-bottom: 0; } .mm-gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } @media (max-width: 900px) { .mm-gallery-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 560px) { .mm-gallery-grid { grid-template-columns: 1fr; } } .mm-gallery-tile { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 0; border: none; background: none; cursor: pointer; position: relative; border-radius: var(--mm-radius); overflow: hidden; } .mm-gallery-tile img { display: block; width: 100%; height: 100%; border-radius: var(--mm-radius); transition: transform .35s ease; object-fit: cover; object-position: center; } .mm-gallery-tile__overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,.7)); border-radius: var(--mm-radius); opacity: 0; transition: opacity .25s; display: flex; align-items: flex-end; padding: 16px; } .mm-gallery-tile:hover .mm-gallery-tile__overlay { opacity: 1; } .mm-gallery-tile:hover img { transform: scale(1.03); } .mm-gallery-tile__title { color: #fff; font-size: 13px; font-family: var(--mm-ff-mono); letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; } /* Lightbox */ .mm-lightbox { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 24px; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; } .mm-lightbox.is-open { pointer-events: all; opacity: 1; visibility: visible; } .mm-lightbox__backdrop { position: fixed; inset: 0; z-index: 8999; background: var(--mm-bg); opacity: 0; pointer-events: none; transition: opacity .25s; } .mm-lightbox__backdrop.is-open { opacity: .88; pointer-events: all; } .mm-lightbox__inner { position: relative; z-index: 9001; max-width: min(90vw, 1100px); max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .mm-lightbox__inner img { max-width: 100%; max-height: 80vh; object-fit: contain; border-radius: var(--mm-radius); display: block; } .mm-lightbox__caption { margin-top: 12px; text-align: center; display: flex; flex-direction: column; gap: 4px; } .mm-lightbox__title { color: var(--mm-fg); font-size: 14px; font-family: var(--mm-ff-mono); letter-spacing: 0.08em; text-transform: uppercase; } .mm-lightbox__desc { color: var(--mm-muted); font-size: 13px; max-width: 60ch; } .mm-lightbox__close { position: fixed; top: 24px; right: 24px; z-index: 9002; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--mm-line); background: rgba(0,0,0,.6); color: var(--mm-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; } .mm-lightbox__close:hover { border-color: var(--mm-fg); background: rgba(0,0,0,.9); } .mm-lightbox__nav { position: relative; z-index: 9001; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; border: 1px solid var(--mm-line); background: rgba(0,0,0,.6); color: var(--mm-fg); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .2s, background .2s; } .mm-lightbox__nav:hover { border-color: var(--mm-fg); background: rgba(0,0,0,.9); }