/* ============================================================
ÄGÄISCHE TRADITION — Design-System
Folklore Museum Theologos · Thassos
Wiederverwendbares Stylesheet für alle Unterseiten.
Einbinden:
Schriften (im ):
Playfair Display (Überschriften) + Lato (Fließtext)
============================================================ */
/* ---------- 1. FARB-TOKENS & INTENSITÄTEN ---------- */
/* Semantische Variablen — Komponenten referenzieren nur diese.
Die drei Intensitäten remappen die Rohpalette. */
:root,
[data-intensity="standard"] {
--paper: #F5F0E6; /* Warmes Altweiß / Eierschale */
--surface: #FBF8F1; /* Karten, etwas heller */
--sand: #C49A6C; /* Ocker / Sandstein */
--sand-tint: #EFE6D6; /* Sandstein, sehr hell (Boxen) */
--ink: #4A3B32; /* Dunkles Kaffeebraun (H1–H6) */
--ink-soft: #5C5046; /* Warmes Grau-Braun (Text) */
--ink-faint: #8C7E70; /* Beschriftungen / Captions */
--brand: #8B5A2B; /* Terrakotta / Gebrannte Erde */
--brand-hover: #A06B35; /* Heller (Hover) */
--olive: #6B8E23; /* Olivgrün (Linien, Icons) */
--on-brand: #FFFFFF; /* Button-Text */
--footer-bg: #4A3B32; /* Footer-Hintergrund */
--footer-ink: #F5F0E6; /* Footer-Text */
--line: #C49A6C; /* Trennlinien */
--line-soft: #E0D2BC; /* zarte Trennlinien */
--whatsapp: #4F8A4A; /* gedämpftes WhatsApp-Grün */
}
[data-intensity="soft"] {
--paper: #F8F4EC;
--surface: #FDFBF6;
--sand: #D3B591;
--sand-tint: #F1EADD;
--ink: #54453B;
--ink-soft: #6B6056;
--ink-faint: #9C8F81;
--brand: #9C7350;
--brand-hover: #B0875F;
--olive: #8AA257;
--on-brand: #FFFFFF;
--footer-bg: #5A4A40;
--footer-ink: #F8F4EC;
--line: #D3B591;
--line-soft: #E8DECC;
--whatsapp: #6BA063;
}
[data-intensity="bold"] {
--paper: #F2EBDB;
--surface: #FAF5EA;
--sand: #B98A53;
--sand-tint: #E7D8BE;
--ink: #3A2C24;
--ink-soft: #4E443B;
--ink-faint: #7E6F60;
--brand: #7C4A1E;
--brand-hover: #97602B;
--olive: #5E7E1B;
--on-brand: #FFFFFF;
--footer-bg: #3A2C24;
--footer-ink: #F2EBDB;
--line: #B98A53;
--line-soft: #D8C5A4;
--whatsapp: #3F7A3A;
}
/* ---------- 2. GESTALTUNGS-TOKENS ---------- */
:root {
--font-head: "Playfair Display", Georgia, "Times New Roman", serif;
--font-body: "Lato", "Open Sans", system-ui, -apple-system, sans-serif;
--radius: 4px; /* Button-/Karten-Radius (tweakbar) */
--radius-lg: 8px;
--photo-warm: 0.18; /* Stärke des Sepia/Warm-Filters */
--maxw: 1200px; /* Inhaltsbreite */
--gutter: clamp(20px, 5vw, 56px);
/* Spacing-Skala (8er-Raster) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
--shadow-soft: 0 1px 2px rgba(74,59,50,.05);
--tap: 48px; /* Mindest-Touch-Größe */
}
/* ---------- 3. BASIS ---------- */
*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
background: var(--paper);
color: var(--ink-soft);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5,h6 {
font-family: var(--font-head);
color: var(--ink);
font-weight: 700;
line-height: 1.14;
letter-spacing: .01em;
margin: 0 0 .5em;
text-wrap: balance;
}
h1 { font-size: clamp(2.4rem, 5.5vw, 4rem); letter-spacing: .015em; }
h2 { font-size: clamp(1.9rem, 4vw, 2.8rem); }
h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
h4 { font-size: 1.2rem; }
p { margin: 0 0 1.1em; text-wrap: pretty; }
a { color: var(--brand); text-decoration: none; }
/* Augenbrauen-Label über Überschriften */
.eyebrow {
font-family: var(--font-body);
font-weight: 700;
font-size: .8rem;
letter-spacing: .22em;
text-transform: uppercase;
color: var(--sand);
margin: 0 0 .8em;
display: inline-flex;
align-items: center;
gap: .6em;
}
.eyebrow::before {
content: "";
width: 28px; height: 2px;
background: var(--olive);
display: inline-block;
}
.lead { font-size: 1.18rem; color: var(--ink-soft); }
.muted { color: var(--ink-faint); }
.greek { font-feature-settings: "liga" 1; } /* griech. Titel */
/* ---------- 4. LAYOUT-HILFEN ---------- */
.container { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(48px, 8vw, 96px); }
.section--paper { background: var(--paper); }
.section--sand { background: var(--sand-tint); }
.section--footer { background: var(--footer-bg); color: var(--footer-ink); }
.stack > * + * { margin-top: var(--s-4); }
.grid { display: grid; gap: var(--s-5); }
.row { display: flex; gap: var(--s-4); flex-wrap: wrap; }
.center { text-align: center; }
/* ---------- 5. BUTTONS ---------- */
.btn {
--_bg: var(--brand);
--_fg: var(--on-brand);
--_bd: var(--brand);
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55em;
min-height: var(--tap);
padding: .7em 1.5em;
font-family: var(--font-body);
font-weight: 700;
font-size: .95rem;
letter-spacing: .02em;
line-height: 1;
color: var(--_fg);
background: var(--_bg);
border: 1.5px solid var(--_bd);
border-radius: var(--radius);
cursor: pointer;
transition: background .18s ease, color .18s ease, border-color .18s ease;
text-decoration: none;
}
.btn:hover { --_bg: var(--brand-hover); --_bd: var(--brand-hover); }
/* Sekundär: Flat, feiner Rahmen, kein Schatten (Konzept) */
.btn--outline {
--_bg: transparent;
--_fg: var(--brand);
--_bd: var(--brand);
}
.btn--outline:hover { --_bg: var(--brand); --_fg: var(--on-brand); }
.btn--ghost {
--_bg: transparent; --_fg: var(--ink); --_bd: transparent;
}
.btn--ghost:hover { --_bg: var(--sand-tint); --_bd: var(--sand-tint); }
.btn--sand { --_bg: var(--sand); --_fg: var(--ink); --_bd: var(--sand); }
.btn--sand:hover { --_bg: var(--ink); --_fg: var(--paper); --_bd: var(--ink); }
.btn--block { width: 100%; }
.btn--lg { font-size: 1.05rem; padding: .85em 1.9em; }
/* ---------- 6. LINKS / NAV ---------- */
.nav-link {
position: relative;
color: var(--ink);
font-weight: 600;
font-size: .98rem;
padding-block: 4px;
text-decoration: none;
}
.nav-link::after {
content: "";
position: absolute; left: 0; right: 0; bottom: -2px;
height: 2px; background: var(--sand);
transform: scaleX(0); transform-origin: left;
transition: transform .2s ease;
}
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { transform: scaleX(1); }
.nav-link[aria-current="page"] { color: var(--brand); }
/* Textlink im Fließtext */
.link {
color: var(--brand);
text-decoration: underline;
text-decoration-color: var(--sand);
text-underline-offset: 3px;
}
.link:hover { color: var(--brand-hover); text-decoration-color: var(--brand-hover); }
/* ---------- 7. KARTEN & INFO-BLÖCKE ---------- */
.card {
background: var(--surface);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: var(--s-6);
box-shadow: var(--shadow-soft);
}
/* Info-Zelle (Öffnungszeiten, Eintritt …) */
.info-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
background: var(--sand-tint);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
overflow: hidden;
}
.info-cell {
padding: var(--s-5) var(--s-6);
border-top: 1px solid var(--line-soft);
border-left: 1px solid var(--line-soft);
}
.info-cell__label {
font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--sand); font-weight: 700; margin: 0 0 .5em;
}
.info-cell__value { color: var(--ink); font-weight: 700; font-size: 1.05rem; }
.info-cell__value small { display:block; font-weight:400; color: var(--ink-soft); font-size:.92rem; }
/* Mobile: 2 Spalten statt 1 (das grosse Info-Grid bleibt kompakt) */
@media (max-width: 560px) {
.info-grid { grid-template-columns: 1fr 1fr; }
.info-cell:nth-child(odd) { border-left: 0; }
.info-cell:nth-child(-n+2) { border-top: 0; }
}
/* Badge / Pille */
.badge {
display: inline-flex; align-items: center; gap: .45em;
padding: .35em .85em;
font-size: .78rem; font-weight: 700; letter-spacing: .04em;
border-radius: 999px;
background: var(--sand-tint); color: var(--brand);
border: 1px solid var(--line);
}
.badge--olive { color: #fff; background: var(--olive); border-color: var(--olive); }
/* Sprach-Pille */
.lang-switch { display: inline-flex; gap: 2px; }
.lang-switch button {
border: 0; background: transparent; cursor: pointer;
font-family: var(--font-body); font-weight: 700; font-size: .82rem;
letter-spacing: .05em; color: var(--ink-faint);
padding: .3em .5em; border-radius: 4px;
}
.lang-switch button[aria-pressed="true"] { color: var(--brand); background: var(--sand-tint); }
/* ---------- 8. GRIECHISCHER MÄANDER (Trennband) ---------- */
.meander {
height: 18px;
background-color: var(--sand);
-webkit-mask: var(--meander-svg) repeat-x center / auto 18px;
mask: var(--meander-svg) repeat-x center / auto 18px;
}
.meander--olive { background-color: var(--olive); }
.meander--ink { background-color: var(--ink); }
:root {
--meander-svg: url('data:image/svg+xml;utf8,');
}
/* ===== GLOBALER SCHALTER: Band ⇄ Linie =====
Standard = Mäander-Band (oben). Wird die Klasse "trenner-linie"
am gesetzt (oder [data-trenner="line"] am ),
werden ALLE .meander als Linie gezeichnet — Farbe aus der Palette.
So bleibt im HTML überall einfach . */
body.trenner-linie .meander,
[data-trenner="line"] .meander {
--_acc: var(--brand);
height: 1px;
background-color: var(--line-soft);
-webkit-mask: none; mask: none;
position: relative;
}
body.trenner-linie .meander::before,
[data-trenner="line"] .meander::before {
content: ""; position: absolute; left: 50%; top: -1px; transform: translateX(-50%);
width: 120px; height: 3px; border-radius: 3px; background: var(--_acc);
}
/* Farb-Varianten steuern unter dem Schalter die Akzentfarbe */
body.trenner-linie .meander--olive, [data-trenner="line"] .meander--olive { --_acc: var(--olive); background-color: var(--line-soft); }
body.trenner-linie .meander--ink, [data-trenner="line"] .meander--ink { --_acc: var(--ink); background-color: var(--line-soft); }
/* Linien-Stil-Varianten (D/F/G) — nur unter dem Schalter aktiv */
body.trenner-linie .meander--gradient, [data-trenner="line"] .meander--gradient {
height: 2px; background: linear-gradient(90deg, transparent, var(--sand) 25%, var(--_acc) 50%, var(--sand) 75%, transparent); }
body.trenner-linie .meander--gradient::before, [data-trenner="line"] .meander--gradient::before { display: none; }
body.trenner-linie .meander--dots, [data-trenner="line"] .meander--dots { height: 7px; background-color: transparent; }
body.trenner-linie .meander--dots::before, [data-trenner="line"] .meander--dots::before {
left: 50%; top: 50%; transform: translate(-50%,-50%); width: 7px; height: 7px; border-radius: 50%;
background: var(--_acc); box-shadow: -16px 0 0 var(--sand), 16px 0 0 var(--sand); }
body.trenner-linie .meander--accent, [data-trenner="line"] .meander--accent { height: 1px; background-color: var(--line); }
body.trenner-linie .meander--accent::before, [data-trenner="line"] .meander--accent::before {
left: 0; top: 50%; transform: translateY(-50%); width: 32px; height: 3px; border-radius: 2px; background: var(--_acc); }
/* dünne dekorative Linie */
.rule { height: 1px; background: var(--line); border: 0; margin-block: var(--s-6); }
.rule--soft { background: var(--line-soft); }
/* ---------- 9. BILDER / FOTO-BEHANDLUNG ---------- */
.photo {
display: block; width: 100%; height: auto;
border-radius: var(--radius);
filter: sepia(var(--photo-warm)) saturate(1.04) contrast(1.02);
}
.photo--frame { border: 1px solid var(--line); padding: 6px; background: var(--surface); }
figure { margin: 0; }
figcaption { font-size: .85rem; color: var(--ink-faint); margin-top: .5em; }
.ratio { position: relative; overflow: hidden; border-radius: var(--radius); }
.ratio > img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter: sepia(var(--photo-warm)) saturate(1.04) contrast(1.02); }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }
.ratio-1-1 { aspect-ratio: 1 / 1; }
/* ---------- 10. SITE-HEADER (Desktop) ---------- */
.site-header {
background: var(--paper);
border-bottom: 1px solid var(--line-soft);
position: sticky; top: 0; z-index: 40;
}
.site-header__inner {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-5); min-height: 76px;
}
.brand-mark { display: flex; align-items: center; gap: .7em; text-decoration: none; }
.brand-mark__crest {
width: 42px; height: 42px; flex: none;
border: 1.5px solid var(--brand); border-radius: 50%;
display: grid; place-items: center; color: var(--brand);
}
.brand-mark__name { font-family: var(--font-head); font-weight: 700; color: var(--ink); line-height: 1.05; }
.brand-mark__name small { display:block; font-family: var(--font-body); font-weight:600;
font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color: var(--sand); white-space: nowrap; }
.site-nav { display: flex; align-items: center; gap: var(--s-6); }
/* ---------- 11. HERO ---------- */
.hero { position: relative; }
.hero__media { position: relative; min-height: 62vh; }
.hero__media img { width:100%; height:100%; position:absolute; inset:0; object-fit:cover;
filter: sepia(var(--photo-warm)) saturate(1.03); }
.hero__scrim { position:absolute; inset:0;
background: linear-gradient(180deg, rgba(58,44,36,.15) 0%, rgba(58,44,36,.55) 100%); }
.hero__body { position: relative; color: #fff; padding-block: clamp(40px, 9vw, 110px); }
.hero__body .eyebrow { color: var(--sand); }
.hero__body h1 { color: #fff; max-width: 12ch; }
.hero__body .greek { color: var(--sand-tint); font-weight: 600; }
.hero__body .btn--outline { --_fg:#fff; --_bd:rgba(255,255,255,.75); }
.hero__body .btn--outline:hover { --_bg:#fff; --_fg:var(--ink); --_bd:#fff; }
/* ---- HERO-VARIANTE A: Split (Text auf Vollfarb-Panel neben Bild) ---- */
.hero-split { display:grid; grid-template-columns:1fr; }
@media (min-width:880px){ .hero-split { grid-template-columns:1fr 1fr; } .hero-split--right .hero-split__media { order:-1; } }
.hero-split__panel {
background:var(--ink); color:#fff;
padding:clamp(32px,6vw,80px);
display:flex; flex-direction:column; justify-content:center;
}
.hero-split__panel .eyebrow { color:var(--sand); }
.hero-split__panel .eyebrow::before { background:var(--sand); }
.hero-split__panel h1 { color:#fff; margin:0 0 .15em; }
.hero-split__panel .greek { color:var(--sand-tint); font-family:var(--font-head); }
.hero-split__panel p { color:rgba(255,255,255,.84); }
.hero-split__media { position:relative; min-height:300px; }
.hero-split__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.03); }
/* Outline-Button auf dunklem Panel → weiß */
.hero-split__panel .btn--outline { --_fg:#fff; --_bd:rgba(255,255,255,.75); }
.hero-split__panel .btn--outline:hover { --_bg:#fff; --_fg:var(--ink); --_bd:#fff; }
/* helle Panel-Variante */
.hero-split--sand .hero-split__panel { background:var(--sand-tint); color:var(--ink-soft); }
.hero-split--sand .hero-split__panel h1 { color:var(--ink); }
.hero-split--sand .hero-split__panel .greek { color:var(--brand); }
.hero-split--sand .hero-split__panel p { color:var(--ink-soft); }
.hero-split--sand .hero-split__panel .btn--outline { --_fg:var(--brand); --_bd:var(--brand); }
.hero-split--sand .hero-split__panel .btn--outline:hover { --_bg:var(--brand); --_fg:#fff; --_bd:var(--brand); }
/* ---- HERO-VARIANTE B: Karte (Bild-Band + überlappende Textkarte) ---- */
.hero-card { position:relative; }
.hero-card__media { position:relative; min-height: var(--hero-h, 42vh); }
@media (max-width:720px){ .hero-card__media { min-height: var(--hero-h-m, var(--hero-h, 42vh)); } }
.hero-card__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.03); }
.hero-card__panel {
position:relative; z-index:2;
background:var(--surface); color:var(--ink-soft);
border-radius:var(--radius-lg);
padding:clamp(26px,4vw,48px);
max-width:600px; margin-top:clamp(-90px,-9vw,-64px);
box-shadow:0 18px 44px -22px rgba(74,59,50,.5);
}
.hero-card__panel .eyebrow { color:var(--sand); }
.hero-card__panel h1 { color:var(--ink); margin:0 0 .2em; }
.hero-card__panel .greek { color:var(--brand); font-family:var(--font-head); }
/* ---- HERO-VARIANTE C: Banderole (Titelbalken am Bildfuß) ---- */
.hero-band { }
.hero-band__media { position:relative; min-height:44vh; display:flex; align-items:flex-end; }
.hero-band__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.03); }
.hero-band__title { position:relative; z-index:1; width:100%;
background:linear-gradient(180deg, transparent, rgba(74,59,50,.85)); padding:clamp(28px,6vw,56px) 0 clamp(18px,3vw,28px); }
.hero-band__title .container { color:#fff; }
.hero-band__title .eyebrow { color:var(--sand-tint); }
.hero-band__title .eyebrow::before { background:var(--olive); }
.hero-band__title h1 { color:#fff; margin:0; }
.hero-band__title .greek { color:var(--sand-tint); font-family:var(--font-head); }
.hero-band__intro { background:var(--paper); }
.hero-band__intro .container { padding-block:clamp(24px,4vw,40px); display:flex; gap:var(--s-6); flex-wrap:wrap; align-items:center; justify-content:space-between; }
.hero-band__intro p { margin:0; max-width:52ch; font-size:1.1rem; color:var(--ink-soft); }
/* ---- HERO-VARIANTE D: Editorial (große Typo, Bild seitlich) ---- */
.hero-ed { background:var(--paper); }
.hero-ed .container { display:grid; gap:var(--s-6); align-items:center; padding-block:clamp(36px,6vw,72px); }
@media (min-width:880px){ .hero-ed .container { grid-template-columns:1.05fr .95fr; gap:var(--s-8); } }
.hero-ed__text { position:relative; padding-left:clamp(18px,2.4vw,28px); }
.hero-ed__text::before { content:""; position:absolute; left:0; top:6px; bottom:6px; width:4px; border-radius:4px; background:var(--brand); }
.hero-ed__text h1 { margin:.05em 0 .15em; }
.hero-ed__text .greek { color:var(--brand); font-family:var(--font-head); font-size:clamp(1.2rem,2.2vw,1.6rem); }
.hero-ed__text p { max-width:46ch; color:var(--ink-soft); font-size:1.1rem; }
.hero-ed__media .ratio { box-shadow:0 18px 44px -22px rgba(74,59,50,.5); }
/* ---------- 12. FOOTER ---------- */
.site-footer { background: var(--footer-bg); color: var(--footer-ink); }
.site-footer a { color: var(--footer-ink); }
.site-footer__grid {
display: grid; gap: var(--s-6);
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
padding-block: var(--s-8);
}
.site-footer__label { font-size:.72rem; letter-spacing:.18em; text-transform:uppercase;
color: var(--footer-ink); font-weight:700; margin:0 0 .6em; }
.site-footer__bar { border-top: 1px solid rgba(245,240,230,.18);
padding-block: var(--s-4); font-size:.85rem; color: rgba(245,240,230,.7); }
/* ---------- 13. MOBILE APP-MUSTER ---------- */
/* Sticky-Aktionsleiste unten (Anrufen · Route · WhatsApp) */
.app-tabbar {
position: sticky; bottom: 0; z-index: 50;
display: grid; grid-template-columns: repeat(3, 1fr);
background: var(--surface);
border-top: 1px solid var(--line-soft);
box-shadow: 0 -6px 20px rgba(74,59,50,.10);
padding-bottom: env(safe-area-inset-bottom, 0);
}
.app-tabbar a {
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 5px; min-height: 64px; text-decoration: none;
font-size: .68rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
color: var(--on-brand);
}
.app-tabbar a svg { width: 22px; height: 22px; }
.app-tab--call { background: var(--brand); }
.app-tab--route { background: var(--olive); }
.app-tab--wa { background: var(--whatsapp); }
/* App-Topbar */
.app-topbar {
position: sticky; top: 0; z-index: 40;
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); padding: 10px 16px;
background: var(--paper); border-bottom: 1px solid var(--line-soft);
}
.icon-btn {
width: var(--tap); height: var(--tap); flex: none;
display: grid; place-items: center;
background: transparent; border: 0; border-radius: 8px; cursor: pointer;
color: var(--ink);
}
.icon-btn:active { background: var(--sand-tint); }
/* Quick-Info-Chips (mobil) */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px; -webkit-overflow-scrolling: touch; }
.chip {
flex: none; display: inline-flex; flex-direction: column; gap: 2px;
background: var(--sand-tint); border: 1px solid var(--line-soft);
border-radius: 10px; padding: 10px 14px; min-width: 110px;
}
.chip b { color: var(--ink); font-size: .95rem; }
.chip span { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--sand); font-weight:700; }
/* horizontale Foto-Galerie (mobil) */
.h-scroll { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; scroll-snap-type: x mandatory; }
.h-scroll > * { flex: none; scroll-snap-align: start; }
/* ============================================================
15. ERWEITERUNG — Unterseiten-Komponenten
(Räume-Seite & Co. · alle aus den semantischen Tokens)
============================================================ */
/* --- 15.1 · 8-Punkte-Navigation + mobiler Umschalter --- */
.site-nav__links { display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px); }
.menu-toggle { display: none; }
.nav-overlay { display: none; }
@media (max-width: 960px) {
.site-nav__links { display: none; }
.menu-toggle {
display: grid; place-items: center;
width: var(--tap); height: var(--tap);
border: 0; background: transparent; color: var(--ink); cursor: pointer; border-radius: 8px;
}
.menu-toggle:active { background: var(--sand-tint); }
/* aufklappendes Vollmenü */
.nav-overlay {
display: block; position: fixed; inset: 0; z-index: 60;
background: var(--paper);
transform: translateY(-100%); transition: transform .28s ease; overflow-y: auto;
}
.nav-overlay[data-open="true"] { transform: translateY(0); }
.nav-overlay__bar { display:flex; align-items:center; justify-content:space-between;
min-height:76px; padding-inline: var(--gutter); border-bottom:1px solid var(--line-soft); }
.nav-overlay__list { display:flex; flex-direction:column; padding: var(--s-5) var(--gutter); gap: 2px; }
.nav-overlay__list a {
font-family: var(--font-head); font-size: 1.5rem; font-weight: 700; color: var(--ink);
padding: .5em 0; border-bottom: 1px solid var(--line-soft); text-decoration: none;
}
.nav-overlay__list a[aria-current="page"] { color: var(--brand); }
}
/* mobil verschlankter Header (Mobile First) */
@media (max-width: 620px) {
.site-header__inner { gap: 8px; min-height: 64px; }
.site-nav { gap: 4px; }
.brand-mark { gap: .5em; }
.brand-mark__crest { width: 38px; height: 38px; }
.brand-mark__name { font-size: .95rem; }
.brand-mark__name small { display: none; }
.lang-switch button { padding: .3em .42em; font-size: .76rem; }
}
/* --- 15.2 · Ankündigungs-/Event-Banner --- */
.banner {
display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap;
background: var(--ink); color: var(--paper);
padding: 14px clamp(16px, 3vw, 28px); border-radius: var(--radius);
}
.banner__date {
flex: none; display: inline-flex; align-items: center; gap: .5em;
font-weight: 700; font-size: .82rem; letter-spacing: .04em;
color: var(--sand); border: 1px solid rgba(196,154,108,.5);
padding: .35em .8em; border-radius: 999px;
}
.banner__text { font-weight: 600; }
.banner__text b { color: #fff; font-family: var(--font-head); font-weight: 700; }
.banner .btn { margin-left: auto; }
.banner--strip { border-radius: 0; }
@media (max-width: 560px) {
.banner { flex-direction: column; align-items: stretch; gap: 12px; text-align: left; }
.banner__date { align-self: flex-start; }
.banner .btn { margin-left: 0; width: 100%; }
}
/* --- 15.3 · Raum-Block (Bild ↔ Text, alternierend) --- */
.room { display: grid; gap: var(--s-6); align-items: center; }
.room + .room { margin-top: clamp(40px, 7vw, 80px); }
@media (min-width: 860px) {
.room { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
.room:nth-child(even) .room__media { order: 2; }
}
.room__media { position: relative; }
.room__media .ratio { box-shadow: var(--shadow-soft); }
.room__num {
font-family: var(--font-body); font-weight: 900; font-size: .8rem;
letter-spacing: .2em; color: var(--sand); display: block; margin-bottom: .4em;
}
.room__title { margin: 0 0 .4em; }
.room__title a { color: inherit; text-decoration: none; }
.room__title a:hover { color: var(--brand); }
.room__desc { color: var(--ink-soft); margin-bottom: var(--s-5); max-width: 46ch; }
.room__teaser-label {
font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
color: var(--ink-faint); margin: 0 0 .7em;
}
/* Foto-Platzhalter (wo noch kein Bild vorliegt) */
.photo-ph {
position: relative; display: grid; place-items: center; gap: 10px;
background:
repeating-linear-gradient(45deg, transparent 0 18px, rgba(196,154,108,.06) 18px 36px),
var(--sand-tint);
border: 1px dashed var(--line); border-radius: var(--radius); color: var(--sand);
}
.photo-ph__label {
font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}
/* --- 15.4 · Objekt-Teaser (Pille mit Mini-Thumbnail) --- */
.teaser-row { display: flex; flex-wrap: wrap; gap: 10px; }
.teaser {
display: inline-flex; align-items: center; gap: 10px;
background: var(--surface); border: 1px solid var(--line-soft);
border-radius: 999px; padding: 5px 14px 5px 5px;
text-decoration: none; color: var(--ink); font-weight: 600; font-size: .92rem;
min-height: 44px;
transition: border-color .15s ease, background .15s ease, transform .15s ease;
}
.teaser:hover { border-color: var(--brand); background: var(--sand-tint); transform: translateY(-1px); }
.teaser__thumb {
width: 32px; height: 32px; flex: none; border-radius: 999px; object-fit: cover;
filter: sepia(var(--photo-warm)) saturate(1.05);
}
.teaser__thumb--ph { display: grid; place-items: center; background: var(--sand-tint); color: var(--sand); }
.teaser__arrow { color: var(--sand); margin-left: 2px; }
.teaser:hover .teaser__arrow { color: var(--brand); }
/* --- 15.5 · Newsletter-Sektion (dunkler Ton) --- */
.newsletter { background: var(--footer-bg); color: var(--footer-ink); }
.newsletter__inner { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 820px) { .newsletter__inner { grid-template-columns: 1fr 1fr; gap: var(--s-8); } }
.newsletter h2 { color: var(--paper); }
.newsletter .eyebrow { color: var(--sand); }
.newsletter p { color: rgba(245,240,230,.8); }
.newsletter__form { display: flex; gap: 10px; flex-wrap: wrap; }
.field {
font-family: var(--font-body); font-size: 1rem; line-height: 1;
padding: .85em 1em; min-height: var(--tap);
border: 1.5px solid var(--line); border-radius: var(--radius);
background: var(--surface); color: var(--ink); flex: 1 1 200px;
}
.field::placeholder { color: var(--ink-faint); }
.field:focus { outline: 2px solid var(--sand); outline-offset: 2px; }
@media (max-width: 560px) { .newsletter__form .btn { width: 100%; } }
/* --- 15.5b · Formular (Gruppen-Buchung, Kontakt) --- */
.form { display:grid; gap:var(--s-4); }
.form-grid { display:grid; gap:var(--s-4); grid-template-columns:1fr; }
@media (min-width:640px){ .form-grid--2 { grid-template-columns:1fr 1fr; } }
.form-field { display:flex; flex-direction:column; gap:6px; }
.form-field--full { grid-column:1 / -1; }
.form-label { font-size:.78rem; font-weight:700; letter-spacing:.06em; color:var(--ink); }
.form-label .req { color:var(--brand); }
.input, .select, .textarea {
font-family:var(--font-body); font-size:1rem; line-height:1.3; color:var(--ink);
background:var(--surface); border:1.5px solid var(--line); border-radius:var(--radius);
padding:.75em .9em; min-height:var(--tap); width:100%;
}
.textarea { min-height:120px; resize:vertical; }
.input::placeholder, .textarea::placeholder { color:var(--ink-faint); }
.input:focus, .select:focus, .textarea:focus { outline:2px solid var(--sand); outline-offset:2px; border-color:var(--sand); }
.form-note { font-size:.82rem; color:var(--ink-faint); }
/* --- 15.5c · Anfahrt / Karte --- */
.map-card { display:grid; gap:0; grid-template-columns:1fr; border:1px solid var(--line-soft);
border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
@media (min-width:760px){ .map-card { grid-template-columns:1.3fr 1fr; } }
.map-card__embed { min-height:260px; position:relative; background:linear-gradient(135deg,var(--sand-tint),#e9efd9); }
.map-card__embed iframe { position:absolute; inset:0; width:100%; height:100%; border:0; }
.map-card__info { padding:var(--s-6); display:flex; flex-direction:column; gap:var(--s-4); }
.map-fact { display:flex; gap:12px; align-items:flex-start; }
.map-fact svg { color:var(--olive); flex:none; margin-top:2px; }
.map-fact b { color:var(--ink); display:block; font-size:.95rem; }
.map-fact span { color:var(--ink-soft); font-size:.9rem; }
/* --- 15.5d · Veranstaltungs-Karte (Event-Liste) --- */
.event-list { display:grid; gap:var(--s-4); max-width:820px; margin-inline:auto; }
.event-item { display:grid; grid-template-columns:74px 1fr; gap:var(--s-5); align-items:start;
text-decoration:none; color:inherit;
background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
padding:var(--s-5); box-shadow:var(--shadow-soft);
transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease; }
.event-item:hover { transform:translateY(-2px); border-color:var(--line);
box-shadow:0 14px 30px -16px rgba(74,59,50,.5); }
.event-date { flex:none; text-align:center; border-radius:var(--radius);
background:var(--sand-tint); border:1px solid var(--line-soft); padding:10px 6px; align-self:start; }
.event-date .d { display:block; font-family:var(--font-head); font-weight:800; font-size:1.9rem; color:var(--brand); line-height:1; }
.event-date .m { display:block; font-size:.7rem; font-weight:700; letter-spacing:.12em; color:var(--sand); margin-top:4px; }
.event-date .y { display:block; font-size:.66rem; color:var(--ink-faint); margin-top:2px; }
.event-body h3 { margin:.1em 0 .25em; font-size:1.25rem; }
.event-body .badge { margin-bottom:.5em; }
.event-meta { display:flex; flex-wrap:wrap; gap:6px 14px; color:var(--ink-soft); font-size:.9rem; margin:.3em 0 0; }
.event-meta span { display:inline-flex; align-items:center; gap:5px; }
.event-item.is-hidden { display:none !important; }
/* --- 15.5e · Zeitstrahl & Zitat (Geschichte/Editorial) --- */
.timeline { position:relative; max-width:760px; margin-inline:auto; }
.tl-item { position:relative; padding-left:30px; padding-bottom:var(--s-7);
border-left:2px solid var(--line); margin-left:7px; }
.tl-item:last-child { border-left-color:transparent; }
.tl-item::before { content:""; position:absolute; left:-8px; top:6px; width:14px; height:14px; border-radius:50%;
background:var(--brand); border:3px solid var(--paper); box-shadow:0 0 0 1px var(--line); }
.tl-year { font-family:var(--font-head); font-weight:800; color:var(--brand); font-size:1.15rem; margin:0 0 .2em; }
.tl-item h3 { margin:0 0 .3em; font-size:1.2rem; }
.tl-item p { margin:0; color:var(--ink-soft); }
.pullquote { max-width:680px; margin:var(--s-7) auto; padding-left:var(--s-5); border-left:4px solid var(--olive);
font-family:var(--font-head); font-style:italic; font-size:clamp(1.3rem,2.6vw,1.7rem); line-height:1.4; color:var(--ink); }
.pullquote cite { display:block; margin-top:.6em; font-family:var(--font-body); font-style:normal;
font-size:.82rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--sand); }
.prose { max-width:680px; margin-inline:auto; }
.prose p { margin:0 0 1.1em; }
/* --- 15.5f · Vorstand-Portraits & Merkmal-Liste --- */
.people { display:grid; gap:var(--s-5); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .people { grid-template-columns:repeat(4,1fr); } }
.person { text-align:center; }
.person__avatar { width:96px; height:96px; border-radius:50%; margin:0 auto var(--s-3); display:grid; place-items:center;
background:var(--sand-tint); border:2px solid var(--line); overflow:hidden; }
.person__avatar img { width:100%; height:100%; object-fit:cover; filter:sepia(var(--photo-warm)) saturate(1.04); }
.person__avatar span { font-family:var(--font-head); font-weight:800; font-size:1.6rem; color:var(--brand); }
.person__name { font-weight:700; color:var(--ink); margin:0; }
.person__role { font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:var(--sand); font-weight:700; margin:.2em 0 0; }
.feature-list { display:grid; gap:var(--s-4); grid-template-columns:1fr; max-width:680px; }
.feature-item { display:flex; gap:14px; align-items:flex-start; }
.feature-item .fic { width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center;
background:var(--sand-tint); color:var(--brand); }
.feature-item h3 { margin:0 0 .2em; font-size:1.1rem; }
.feature-item p { margin:0; color:var(--ink-soft); font-size:.95rem; }
/* --- 15.5h · Kontakt-Kacheln (Anrufen/Mail/WhatsApp/Route) --- */
.contact-cards { display:grid; gap:var(--s-4); grid-template-columns:repeat(2,1fr); }
@media (min-width:760px){ .contact-cards { grid-template-columns:repeat(4,1fr); } }
.contact-card { display:flex; flex-direction:column; gap:8px; align-items:flex-start; text-decoration:none;
background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
padding:var(--s-5); box-shadow:var(--shadow-soft); transition:transform .16s, border-color .16s, box-shadow .16s; }
.contact-card:hover { transform:translateY(-2px); border-color:var(--brand); box-shadow:0 14px 30px -16px rgba(74,59,50,.5); }
.contact-card .cic { width:46px; height:46px; border-radius:50%; display:grid; place-items:center;
background:var(--sand-tint); color:var(--brand); }
.contact-card__label { font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sand); margin:0; }
.contact-card__value { font-weight:700; color:var(--ink); margin:0; word-break:break-word; }
/* --- 15.6 · Abschnitts-Kopf (zentriert) --- */
.section-head { text-align: center; max-width: 60ch; margin-inline: auto; margin-bottom: var(--s-8); }
.section-head .eyebrow { justify-content: center; }
.section-head .eyebrow::after {
content: ""; width: 28px; height: 2px; background: var(--olive); display: inline-block;
}
/* --- 15.7 · App-Tabbar nur auf schmalen Viewports --- */
.app-only { display: none; }
@media (max-width: 720px) {
.app-only { display: grid; }
.desktop-only { display: none; }
}
/* ============================================================
16x. MOBILE APP-NAVIGATION (Konzept 5)
Untere Tab-Leiste (Start·Museum·Verein·News·Menü) + Aktions-
zeile (Anrufen·Route). "Menü" blendet beide Leisten aus und
zeigt 8 Bereichs-Kacheln (4×2, kein Scrollen). Nur ≤720px.
Markup wird von mobile-nav.js injiziert.
============================================================ */
.mnav { display: none; }
/* Basis-Fix: .msheet ("Menue"-Sheet) hatte bisher KEINE Regel ausserhalb
der @media-Grenze unten -- auf Desktop-Breiten rutschte es dadurch als
ganz normales, unstyled Element in den Seitenfluss (sichtbar ganz unten
auf der Seite: 3 Sprachen uebereinander, riesiges Icon, unstyled Flaggen).
Analog zu .mnav oben: auf allen Breiten erstmal verstecken, die Media
Query weiter unten schaltet es auf Mobil wieder frei (display:flex). */
.msheet, .mnav__langpop { display: none; }
@media (max-width: 720px) {
/* Platz, damit Inhalt nicht hinter der Leiste verschwindet */
body.has-mnav { padding-bottom: calc(112px + env(safe-area-inset-bottom, 0px)) !important; }
/* Alte 3er-Tabbar abschalten, wenn neue Nav aktiv */
body.has-mnav .app-tabbar.app-only { display: none !important; }
.mnav {
display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 999990;
background: var(--surface); border-top: 1px solid var(--line-soft);
box-shadow: 0 -6px 20px rgba(74,59,50,.10);
padding-bottom: env(safe-area-inset-bottom, 0px);
transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden;
}
.mnav__tabs { display: grid; grid-template-columns: repeat(5, 1fr); }
.mnav__tab {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
min-height: 56px; padding: 7px 2px; border: 0; background: transparent; cursor: pointer;
font-family: var(--font-body); font-size: .6rem; font-weight: 700; letter-spacing: .03em;
text-transform: uppercase; color: var(--ink-faint); text-decoration: none;
}
.mnav__tab svg { width: 21px; height: 21px; }
.mnav__tab[aria-current="page"] { color: var(--brand); }
.mnav__tab .ic { width: 21px; height: 21px; display: grid; gap: 3px; align-content: center; }
.mnav__tab .ic i { height: 2px; background: currentColor; border-radius: 2px; }
.mnav__actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 1px; background: var(--line-soft); position: relative; }
.mnav__actions a {
display: flex; align-items: center; justify-content: center; gap: 8px;
padding: 12px; font-weight: 700; font-size: .82rem; text-decoration: none;
}
.mnav__actions svg { width: 18px; height: 18px; }
.mnav-act--call { background: var(--brand); }
.mnav-act--route { background: var(--olive); }
.mnav__actions a, .mnav__actions a svg { color: #fff !important; stroke: #fff; }
/* --- Sprach-Button (Flagge) in der Aktionsleiste + Popover ---
Dritte, schmalere Spalte neben Anrufen/Route (Option B). Der Button
oeffnet/schliesst nur ein Popover -- er navigiert nicht. Anzeige der
Tabs/Kacheln + dieses Popover teilen sich dieselbe Umschaltung ueber
body[data-mnav-lang], gesetzt vom Script (kein Neuladen der Seite). */
.mnav__lang { position: relative; display: flex; align-items: center; justify-content: center;
background: #5B4636; border: 0; padding: 0 14px; cursor: pointer; min-width: 56px; }
.mnav__lang-flag { width: 26px; height: 26px; border-radius: 50%; overflow: hidden;
border: 2px solid rgba(255,255,255,.55); display: block; flex: none; }
.mnav__lang-flag svg { width: 100%; height: 100%; display: block; }
.mnav__langpop { position: absolute; bottom: calc(100% + 8px); right: 10px; z-index: 999992;
background: var(--surface); border: 1px solid var(--line-soft); border-radius: 12px;
box-shadow: 0 16px 32px -12px rgba(74,59,50,.4); padding: 8px; min-width: 190px;
display: none; flex-direction: column; gap: 3px; }
.mnav__langpop.is-open { display: flex; }
.mnav__langpop button { display: flex; align-items: center; gap: 10px; padding: 9px 12px;
border: 0; background: none; border-radius: 8px; font-family: var(--font-body); font-weight: 700;
font-size: .9rem; color: var(--ink-soft); cursor: pointer; text-align: left; min-height: 44px; width: 100%; }
.mnav__langpop button:hover { background: var(--sand-tint); }
.mnav__langpop button[aria-current="true"] { background: var(--brand); color: #fff; }
.mnav__langpop .fl { width: 22px; height: 16px; border-radius: 2px; overflow: hidden; flex: none;
box-shadow: 0 0 0 1px rgba(0,0,0,.08); }
.mnav__langpop .fl svg { width: 100%; height: 100%; display: block; }
/* Sheet (Vollbild) */
.msheet {
position: fixed; inset: 0; z-index: 999991; display: flex; flex-direction: column;
background: var(--paper); transform: translateY(100%);
transition: transform .36s cubic-bezier(.22,1,.36,1); visibility: hidden;
}
.msheet__head { display: flex; align-items: center; justify-content: space-between;
padding: 16px 16px 10px; flex: none; }
.msheet__head h2 { font-family: var(--font-head); font-weight: 700; color: var(--ink);
font-size: 1.2rem; margin: 0; }
.msheet__close { width: 40px; height: 40px; border: 0; border-radius: 50%;
background: var(--sand-tint); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.msheet__grid {
flex: 1; min-height: 0; display: grid; gap: 10px;
grid-template-columns: 1fr 1fr; grid-template-rows: repeat(4, 1fr);
padding: 6px 14px calc(16px + env(safe-area-inset-bottom, 0px));
}
.msheet__card {
display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px;
text-align: center; text-decoration: none; padding: 6px; min-height: 0;
background: var(--surface); border: 1px solid var(--line-soft); border-radius: 14px;
}
.msheet__card svg { width: clamp(20px, 5.5vw, 27px); height: clamp(20px, 5.5vw, 27px); color: var(--brand); }
.msheet__card b { font-family: var(--font-head); font-weight: 700; color: var(--ink);
font-size: clamp(1rem, 3.2vw, 1.15rem); line-height: 1.12; }
.msheet__card span { font-size: clamp(.7rem, 2.2vw, .8rem); color: var(--ink-faint); line-height: 1.15; }
/* --- Sprachumschalter im Sheet-Kopf: volle Leiste unter dem Titel.
Flex + wrap statt festem 3er-Grid, damit spaeter 2-3 weitere
Sprachen einfach zusaetzliche Pillen sind (fallen in Zeile 2 um),
ohne die Vorlage aendern zu muessen. --- */
.msheet__langbar { display:flex; flex-wrap:wrap; gap:6px; padding:0 14px 12px; flex:none; }
.msheet__langbar button {
flex:1 1 64px; display:flex; align-items:center; justify-content:center; min-height:44px;
text-decoration:none; font-family:var(--font-body); font-weight:800; font-size:.86rem;
letter-spacing:.03em; color:var(--ink-soft); background:var(--surface);
border:1px solid var(--line); border-radius:10px; cursor:pointer;
transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.msheet__langbar button[aria-current="true"] { background:var(--brand); color:#fff; border-color:var(--brand); }
.msheet__langbar .fl { width:32px; height:22px; border-radius:4px; overflow:hidden; flex:none; box-shadow:0 0 0 1px rgba(0,0,0,.08); }
.msheet__langbar .fl svg { width:100%; height:100%; display:block; }
/* --- Dreisprachigkeit: alle Varianten stehen im HTML. Angezeigt wird
ausschliesslich ueber body[data-mnav-lang="de|en|el"], das das Script
unten setzt (erst nach der echten Seiten-Sprache, danach bei Klick
auf eine der Sprach-Buttons im Sheet -- das wechselt NUR die Anzeige,
es navigiert nicht). !important, damit kein anderes Divi/Theme-CSS
dazwischenfunkt (robuster als html[lang]-Selektoren allein). --- */
.mnav__tab-label [data-lang],
.msheet__head h2 [data-lang] { display:none !important; }
.msheet__card > .msheet__card-i18n {
display:none !important; flex-direction:column; align-items:center; justify-content:center; gap:5px;
}
body[data-mnav-lang="de"] .mnav__tab-label [data-lang="de"],
body[data-mnav-lang="en"] .mnav__tab-label [data-lang="en"],
body[data-mnav-lang="el"] .mnav__tab-label [data-lang="el"],
body[data-mnav-lang="de"] .msheet__head h2 [data-lang="de"],
body[data-mnav-lang="en"] .msheet__head h2 [data-lang="en"],
body[data-mnav-lang="el"] .msheet__head h2 [data-lang="el"] { display:inline !important; }
body[data-mnav-lang="de"] .msheet__card > .msheet__card-i18n[data-lang="de"],
body[data-mnav-lang="en"] .msheet__card > .msheet__card-i18n[data-lang="en"],
body[data-mnav-lang="el"] .msheet__card > .msheet__card-i18n[data-lang="el"] { display:flex !important; }
.mnav__lang-flag [data-lang] { display:none !important; }
body[data-mnav-lang="de"] .mnav__lang-flag [data-lang="de"],
body[data-mnav-lang="en"] .mnav__lang-flag [data-lang="en"],
body[data-mnav-lang="el"] .mnav__lang-flag [data-lang="el"] { display:block !important; }
/* Offen: Leisten weg, Sheet hoch */
body.mnav-open { overflow: hidden; }
body.mnav-open .mnav { display: none; }
body.mnav-open .msheet { transform: translateY(0); visibility: visible; }
}
/* Lade-Spinner beim Navigieren (Konzept 5) */
#mnav-spin { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
background: rgba(245,240,230,.72); opacity: 0;
pointer-events: none; transition: opacity .18s ease; }
body.mnav-loading #mnav-spin { opacity: 1; }
.mnav-spin__ring { width: 46px; height: 46px; border-radius: 50%;
border: 4px solid var(--sand-tint);
border-top-color: var(--brand); animation: mnav-spin .7s linear infinite; }
@keyframes mnav-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .mnav-spin__ring { animation-duration: 1.4s; } }
/* ---------- 14. UTILITIES ---------- */
.text-brand { color: var(--brand); }
.text-olive { color: var(--olive); }
.text-sand { color: var(--sand); }
.bg-sand-tint { background: var(--sand-tint); }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.flex-between { display:flex; align-items:center; justify-content:space-between; gap: var(--s-4); }
/* ============================================================
15b. NEWS / AKTUELLES — Komponenten
(semantische Klassen · austauschbar mit modern.css)
============================================================ */
/* Filter-Leiste (Kategorien) */
.filterbar { display:flex; gap:8px; overflow-x:auto; padding:2px; -webkit-overflow-scrolling:touch; }
.filter-chip {
flex:none; border:1px solid var(--line); background:var(--surface);
color:var(--ink-soft); font-family:var(--font-body); font-weight:700; font-size:.84rem;
letter-spacing:.02em; padding:.5em 1.1em; border-radius:999px; cursor:pointer; min-height:40px;
transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.filter-chip[aria-pressed="true"] { background:var(--brand); color:var(--on-brand); border-color:var(--brand); }
.filter-chip:hover { border-color:var(--brand); }
/* News-Raster */
.news-grid {
display:grid; gap:var(--s-6);
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
}
/* News-Karte */
.news-card {
display:flex; flex-direction:column; overflow:hidden;
background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
text-decoration:none; color:inherit; box-shadow:var(--shadow-soft);
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.news-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px -16px rgba(74,59,50,.5); border-color:var(--line); }
.news-card__media { position:relative; aspect-ratio:16/10; overflow:hidden; }
.news-card__media img { width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.04) contrast(1.02); }
.news-card__cat {
position:absolute; top:12px; left:12px;
font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:#fff; background:var(--brand); border-radius:999px; padding:.3em .8em;
}
.news-card__body { padding:var(--s-5); display:flex; flex-direction:column; gap:8px; flex:1; }
.news-card__date {
font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--sand);
display:flex; align-items:center; gap:.5em;
}
.news-card__title { font-family:var(--font-head); font-weight:700; color:var(--ink);
font-size:1.28rem; line-height:1.16; margin:0; }
.news-card__excerpt { color:var(--ink-soft); font-size:.95rem; margin:0; }
.news-card__more {
margin-top:auto; padding-top:6px; font-weight:700; font-size:.9rem; color:var(--brand);
display:inline-flex; align-items:center; gap:.4em;
}
.news-card:hover .news-card__more { gap:.7em; }
/* Hervorgehobener Aufmacher (erste Meldung) */
.news-feature {
display:grid; gap:0; overflow:hidden;
background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--radius-lg);
box-shadow:var(--shadow-soft); text-decoration:none; color:inherit;
transition: box-shadow .16s ease, transform .16s ease;
}
.news-feature:hover { box-shadow:0 18px 40px -20px rgba(74,59,50,.5); }
@media (min-width:760px){ .news-feature { grid-template-columns:1.15fr 1fr; align-items:stretch; } }
.news-feature__media { position:relative; min-height:240px; }
.news-feature__media img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.04); }
.news-feature__cat {
position:absolute; top:16px; left:16px;
font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
color:#fff; background:var(--brand); border-radius:999px; padding:.35em .9em;
}
.news-feature__body { padding:clamp(22px, 4vw, 40px); display:flex; flex-direction:column; gap:12px; justify-content:center; }
.news-feature__body .news-card__title { font-size:clamp(1.6rem, 3vw, 2.2rem); }
/* Galerie-Streifen (horizontal, mobil-freundlich) */
.gallery-strip { display:flex; gap:12px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory; }
.gallery-strip > * { flex:none; scroll-snap-align:start; }
.gallery-strip .ratio { width:min(78vw, 300px); }
/* --- 15.5g · Album-Filter, Foto-Raster & Lightbox --- */
.album-filter { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; margin-bottom:var(--s-6); }
.album-chip { font-family:var(--font-body); font-weight:700; font-size:.88rem; cursor:pointer;
padding:.5em 1.1em; border-radius:999px; border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft);
transition:background .15s, color .15s, border-color .15s; min-height:40px; }
.album-chip:hover { border-color:var(--brand); color:var(--brand); }
.album-chip[aria-pressed="true"] { background:var(--brand); border-color:var(--brand); color:#fff; }
.photo-grid { display:grid; gap:var(--s-3); grid-template-columns:repeat(2,1fr); }
@media (min-width:640px){ .photo-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:960px){ .photo-grid { grid-template-columns:repeat(4,1fr); } }
.photo-grid__item { position:relative; display:block; border:0; padding:0; cursor:pointer; overflow:hidden;
border-radius:var(--radius); background:var(--sand-tint); aspect-ratio:1/1; }
.photo-grid__item img { width:100%; height:100%; object-fit:cover; display:block;
filter:sepia(var(--photo-warm)) saturate(1.04) contrast(1.02); transition:transform .35s ease; }
.photo-grid__item:hover img { transform:scale(1.06); }
.photo-grid__item.is-hidden { display:none; }
.photo-grid__cap { position:absolute; left:0; right:0; bottom:0; padding:18px 12px 10px; color:#fff;
font-size:.8rem; font-weight:600; text-align:left; opacity:0; transform:translateY(6px);
background:linear-gradient(transparent, rgba(58,44,36,.7)); transition:opacity .2s, transform .2s; }
.photo-grid__item:hover .photo-grid__cap { opacity:1; transform:none; }
/* Lightbox */
.lightbox { position:fixed; inset:0; z-index:90; display:none; place-items:center;
background:rgba(36,28,22,.92); padding:clamp(12px,4vw,48px); }
.lightbox[data-open="true"] { display:grid; }
.lightbox__img { max-width:100%; max-height:82vh; border-radius:var(--radius); box-shadow:0 24px 60px -20px rgba(0,0,0,.6); }
.lightbox__cap { position:absolute; left:0; right:0; bottom:18px; text-align:center; color:rgba(255,255,255,.85); font-size:.9rem; }
.lightbox__btn { position:absolute; top:50%; transform:translateY(-50%); width:52px; height:52px; border-radius:50%;
border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center;
transition:background .15s; }
.lightbox__btn:hover { background:rgba(255,255,255,.28); }
.lightbox__btn--prev { left:clamp(8px,2vw,24px); }
.lightbox__btn--next { right:clamp(8px,2vw,24px); }
.lightbox__close { position:absolute; top:clamp(10px,2vw,20px); right:clamp(10px,2vw,20px); width:48px; height:48px;
border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.14); color:#fff; display:grid; place-items:center; }
.lightbox__close:hover { background:rgba(255,255,255,.28); }
@media (max-width:560px){ .lightbox__btn { width:44px; height:44px; } }
/* --- Säulen-Kacheln (Bild + Overlay-Text, für Bereichs-Navigation) ---
Die 4 Textzeilen (Kicker/Titel/Beschreibung/„mehr“) sollen NICHT nur
innerhalb einer Kachel, sondern ueber ALLE Kacheln einer Reihe hinweg
auf gleicher Hoehe stehen -- klassisches "Row-Alignment"-Problem.
Geloest mit CSS Subgrid: .tiles definiert 4 Zeilen-Tracks, .tile UND
.tile__body erben diese Tracks per subgrid ueber zwei Ebenen hinweg.
Jede Textzeile (Kicker/H3/Text/Mehr) wird dadurch containeruebergreifend
auf die hoechste Auspraegung in ihrer Zeile ausgerichtet. */
.tiles { display:grid; gap:var(--s-5); grid-template-columns:1fr; }
@media (min-width:760px){ .tiles { grid-template-columns:repeat(3,1fr); } }
.tiles--4 { grid-template-columns:1fr; }
@media (min-width:760px){ .tiles--4 { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1100px){ .tiles--4 { grid-template-columns:repeat(4,1fr); } }
@media (min-width:760px){
.tiles:not(.tiles--4) { grid-template-rows: auto auto auto auto; }
.tiles:not(.tiles--4) .tile { display:grid; grid-template-rows:subgrid; grid-row:span 4; }
}
/* .tiles--4: Subgrid-Ausrichtung erst ab der Breite, an der wirklich ALLE
4 Kacheln in EINER Zeile stehen (1100px). Bei 2 Spalten (Tablet, 760-
1099px) waeren es 2 Kachel-Zeilen -- "grid-row:span 4" wuerde beide
Zeilen in dieselben 4 Tracks zwingen und dadurch ueberlappen. Deshalb
dort bewusst OHNE Subgrid (normales, unabhaengiges Kachel-Layout). */
@media (min-width:1100px){
.tiles--4 { grid-template-rows: auto auto auto auto; }
.tiles--4 .tile { display:grid; grid-template-rows:subgrid; grid-row:span 4; }
}
.tile {
position:relative; display:flex; min-height:360px; overflow:hidden;
border-radius:var(--radius-lg); text-decoration:none; box-shadow:var(--shadow-soft);
}
.tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
filter:sepia(var(--photo-warm)) saturate(1.04); transition:transform .5s ease; }
.tile:hover img { transform:scale(1.06); }
.tile__scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(74,59,50,.05) 30%, rgba(74,59,50,.82)); }
.tile__body { position:relative; z-index:1; margin-top:auto; padding:var(--s-6); color:#fff;
display:grid; grid-template-rows:auto auto 1fr auto; row-gap:.35em; }
@media (min-width:760px){
.tiles:not(.tiles--4) .tile__body { grid-row:1/5; grid-template-rows:subgrid; margin-top:0; align-self:stretch; }
}
@media (min-width:1100px){
.tiles--4 .tile__body { grid-row:1/5; grid-template-rows:subgrid; margin-top:0; align-self:stretch; }
}
.tile__kicker { font-size:.7rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--sand-tint); margin:0 0 .4em; }
.tile__body h3 { color:#fff; margin:0; }
.tile__body p { color:rgba(255,255,255,.85); margin:0; font-size:.95rem; }
.tile__more { display:inline-flex; align-items:center; gap:.45em; font-weight:700; font-size:.92rem; color:#fff; }
.tile:hover .tile__more { gap:.75em; }
/* ============================================================
16. DIVI-OVERRIDES · NUR auf Museumsseiten (body.aegean)
------------------------------------------------------------
Aktivierung: in functions.php die Body-Klasse "aegean" auf
den gewünschten Seiten setzen (siehe Doku). Alle Regeln sind
unter .aegean gekapselt → keine Wirkung auf andere Seiten
oder Plugins. !important schlägt Divis spezifische Selektoren.
============================================================ */
/* --- Seiten-Hintergrund --- */
body.aegean,
body.aegean #page-container,
body.aegean .et-l { background-color: var(--paper) !important; }
/* --- DIVI 5: globale Schrift-Variablen kapern ---
Divi 5 rendert Module mit font-family: var(--et_global_*_font).
Wenn wir diese Variablen auf body.aegean umbiegen, erben ALLE
Module automatisch unsere Schriften — ohne Selektor-Kampf. */
body.aegean {
--et_global_heading_font: "Playfair Display";
--et_global_body_font: "Lato";
--et_global_heading_font_weight: 700;
}
/* Sicherheits-Override mit Divi-5-Spezifität (#et-boc .et-l) */
#et-boc .et-l .aegean-x,
body.aegean #et-boc .et-l .et_pb_text,
body.aegean #et-boc .et-l .et_pb_text_inner,
body.aegean #et-boc .et-l p,
body.aegean #et-boc .et-l li {
font-family: var(--font-body) !important;
}
body.aegean #et-boc .et-l h1,
body.aegean #et-boc .et-l h2,
body.aegean #et-boc .et-l h3,
body.aegean #et-boc .et-l h4,
body.aegean #et-boc .et-l h5,
body.aegean #et-boc .et-l h6,
body.aegean #et-boc .et-l .et_pb_module_header {
font-family: var(--font-head) !important;
color: var(--ink) !important;
}
body.aegean #et-boc .et-l h1,
body.aegean #et-boc .et-l .et_pb_fullwidth_header h1.et_pb_module_header { font-size: clamp(2.4rem, 5.5vw, 4rem) !important; }
body.aegean #et-boc .et-l h2,
body.aegean #et-boc .et-l h2.et_pb_module_header { font-size: clamp(1.9rem, 4vw, 2.8rem) !important; }
body.aegean #et-boc .et-l h3,
body.aegean #et-boc .et-l h3.et_pb_module_header { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; }
body.aegean #et-boc .et-l h4,
body.aegean #et-boc .et-l h4.et_pb_module_header { font-size: 1.2rem !important; }
/* --- Text auf DUNKLEM Hintergrund wieder hell (Hero, dunkle Sektionen) ---
Divi markiert solche Module mit .et_pb_bg_layout_dark.
Dort bleibt die Schrift (Playfair/Lato), aber die Farbe wird weiß. */
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h1,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h2,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h3,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h4,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h5,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark h6,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark .et_pb_module_header,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark .et_pb_fullwidth_header_subhead,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark p,
body.aegean #et-boc .et-l .et_pb_bg_layout_dark li {
color: #fff !important;
}
/* --- AUSWEG: manuelle Textfarbe pro Modul ---------------------
Trage im Divi-Modul unter „Erweitert → CSS-Klasse" eine dieser
Klassen ein, um die erzwungene Farbe gezielt zu überschreiben:
text-light → Weiß (für dunkle Hintergründe, z. B. Hero)
text-dark → dunkle Tinte (--ink)
text-brand → Primärfarbe
text-accent → Akzentfarbe
Diese Regeln sind spezifischer als die Standard-Overrides und
gewinnen daher. Sie wirken auf das Modul UND seine Texte/Titel.
--------------------------------------------------------------- */
body.aegean #et-boc .et-l .text-light,
body.aegean #et-boc .et-l .text-light h1, body.aegean #et-boc .et-l .text-light h2,
body.aegean #et-boc .et-l .text-light h3, body.aegean #et-boc .et-l .text-light h4,
body.aegean #et-boc .et-l .text-light h5, body.aegean #et-boc .et-l .text-light h6,
body.aegean #et-boc .et-l .text-light p, body.aegean #et-boc .et-l .text-light li,
body.aegean #et-boc .et-l .text-light .et_pb_module_header,
body.aegean #et-boc .et-l .text-light .et_pb_fullwidth_header_subhead { color: #fff !important; }
body.aegean #et-boc .et-l .text-dark,
body.aegean #et-boc .et-l .text-dark h1, body.aegean #et-boc .et-l .text-dark h2,
body.aegean #et-boc .et-l .text-dark h3, body.aegean #et-boc .et-l .text-dark h4,
body.aegean #et-boc .et-l .text-dark h5, body.aegean #et-boc .et-l .text-dark h6,
body.aegean #et-boc .et-l .text-dark p, body.aegean #et-boc .et-l .text-dark li,
body.aegean #et-boc .et-l .text-dark .et_pb_module_header { color: var(--ink) !important; }
body.aegean #et-boc .et-l .text-brand,
body.aegean #et-boc .et-l .text-brand h1, body.aegean #et-boc .et-l .text-brand h2,
body.aegean #et-boc .et-l .text-brand h3, body.aegean #et-boc .et-l .text-brand h4,
body.aegean #et-boc .et-l .text-brand p,
body.aegean #et-boc .et-l .text-brand .et_pb_module_header { color: var(--brand) !important; }
body.aegean #et-boc .et-l .text-accent,
body.aegean #et-boc .et-l .text-accent h1, body.aegean #et-boc .et-l .text-accent h2,
body.aegean #et-boc .et-l .text-accent h3, body.aegean #et-boc .et-l .text-accent h4,
body.aegean #et-boc .et-l .text-accent p,
body.aegean #et-boc .et-l .text-accent .et_pb_module_header { color: var(--olive) !important; }
/* Freie Farbe: Divis eigene Farbwahl wieder zulassen.
Modul-Klasse "text-custom" vergeben → unsere Farbregel tritt
für dieses Modul zurück, deine Divi-Einstellung greift. */
body.aegean #et-boc .et-l .text-custom h1, body.aegean #et-boc .et-l .text-custom h2,
body.aegean #et-boc .et-l .text-custom h3, body.aegean #et-boc .et-l .text-custom h4,
body.aegean #et-boc .et-l .text-custom h5, body.aegean #et-boc .et-l .text-custom h6,
body.aegean #et-boc .et-l .text-custom p, body.aegean #et-boc .et-l .text-custom li,
body.aegean #et-boc .et-l .text-custom .et_pb_module_header { color: inherit !important; }
/* --- Fließtext: Schrift, Farbe, Größe --- */
body.aegean,
.aegean p,
.aegean li,
.aegean .et_pb_text,
.aegean .et_pb_text_inner,
.aegean .et_pb_blurb_description,
.aegean .et_pb_toggle_content {
font-family: var(--font-body) !important;
color: var(--ink-soft);
}
.aegean .et_pb_text,
.aegean .et_pb_text_inner { font-size: 17px; line-height: 1.6; }
/* --- Überschriften: Playfair Display --- */
.aegean h1, .aegean h2, .aegean h3,
.aegean h4, .aegean h5, .aegean h6,
.aegean .et_pb_heading_container h1,
.aegean .et_pb_module h1,
.aegean .et_pb_module h2,
.aegean .et_pb_module h3,
.aegean .et_pb_module h4,
.aegean .et_pb_module h5,
.aegean .et_pb_module h6 {
font-family: var(--font-head) !important;
color: var(--ink);
font-weight: 700;
letter-spacing: .01em;
line-height: 1.14;
}
/* Überschriften-Größen (Divi überschreibt sonst oft mit eigenen) */
.aegean h1, .aegean .et_pb_module h1 { font-size: clamp(2.4rem, 5.5vw, 4rem) !important; letter-spacing:.015em; }
.aegean h2, .aegean .et_pb_module h2 { font-size: clamp(1.9rem, 4vw, 2.8rem) !important; }
.aegean h3, .aegean .et_pb_module h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem) !important; }
.aegean h4, .aegean .et_pb_module h4 { font-size: 1.2rem !important; }
/* --- Links --- */
.aegean a { color: var(--brand); }
.aegean a:hover { color: var(--brand-hover); }
/* --- Divi-Buttons im Ägäis-Look --- */
.aegean .et_pb_button,
.aegean .et_pb_button:hover {
font-family: var(--font-body) !important;
font-weight: 700 !important;
letter-spacing: .02em !important;
color: var(--on-brand) !important;
background-color: var(--brand) !important;
border: 1.5px solid var(--brand) !important;
border-radius: var(--radius) !important;
padding: .7em 1.5em !important;
transition: background-color .18s ease, border-color .18s ease !important;
}
.aegean .et_pb_button::after { display: none !important; } /* Divi-Pfeil-Icon aus */
.aegean .et_pb_button:hover {
background-color: var(--brand-hover) !important;
border-color: var(--brand-hover) !important;
}
/* --- Eingabefelder (Optin / Kontakt) --- */
.aegean input[type="text"],
.aegean input[type="email"],
.aegean textarea {
font-family: var(--font-body) !important;
border-radius: var(--radius) !important;
}
/* ------------------------------------------------------------
16b. KOMPONENTEN-KLASSEN WIEDERHERSTELLEN
Die Text-Overrides oben (.aegean .et_pb_text …) sind sehr
stark. Liegt eine Komponente IN einem Divi-Text-/Code-Modul,
würde sie sonst überschrieben. Hier setzen wir die wichtigen
Klassen mit !important erneut — sie gewinnen wieder.
------------------------------------------------------------ */
/* Augenbrauen-Label */
body.aegean #et-boc .et-l .eyebrow,
body.aegean #et-boc .et-l .eyebrow p {
font-family: var(--font-body) !important;
font-size: .8rem !important;
font-weight: 700 !important;
letter-spacing: .22em !important;
text-transform: uppercase !important;
color: var(--sand) !important;
line-height: 1.3 !important;
}
/* Raum-Nummer (ACHTUNG: Klasse muss room__num heißen – zwei Unterstriche!) */
body.aegean #et-boc .et-l .room__num,
body.aegean #et-boc .et-l .room__num p,
body.aegean #et-boc .et-l .room_num,
body.aegean #et-boc .et-l .room_num p {
font-family: var(--font-body) !important;
font-size: .8rem !important;
font-weight: 900 !important;
letter-spacing: .2em !important;
color: var(--sand) !important;
}
/* Raum-Beschreibung */
body.aegean #et-boc .et-l .room__desc,
body.aegean #et-boc .et-l .room__desc p {
font-family: var(--font-body) !important;
font-size: 17px !important;
color: var(--ink-soft) !important;
}
/* „Zu sehen"-Label */
body.aegean #et-boc .et-l .room__teaser-label,
body.aegean #et-boc .et-l .room__teaser-label p {
font-family: var(--font-body) !important;
font-size: .72rem !important;
font-weight: 700 !important;
letter-spacing: .16em !important;
text-transform: uppercase !important;
color: var(--ink-faint) !important;
}
/* Objekt-Teaser */
body.aegean #et-boc .et-l .teaser {
font-family: var(--font-body) !important;
font-size: .92rem !important;
font-weight: 600 !important;
color: var(--ink) !important;
}
/* Badge / Pille */
body.aegean #et-boc .et-l .badge {
font-family: var(--font-body) !important;
font-size: .78rem !important;
font-weight: 700 !important;
color: var(--brand) !important;
}
body.aegean #et-boc .et-l .badge--olive { color: #fff !important; }
/* Info-Raster */
body.aegean #et-boc .et-l .info-cell__label {
font-family: var(--font-body) !important;
font-size: .72rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: var(--sand) !important;
}
body.aegean #et-boc .et-l .info-cell__value {
font-family: var(--font-body) !important;
color: var(--ink) !important;
font-weight: 700 !important;
}
/* Banner-Text */
body.aegean #et-boc .et-l .banner__text,
body.aegean #et-boc .et-l .banner__text p { color: var(--paper) !important; }
body.aegean #et-boc .et-l .banner__date { color: var(--sand) !important; font-weight: 700 !important; }
body.aegean #et-boc .et-l .banner__text b { font-family: var(--font-head) !important; color: #fff !important; }
/* gedämpfter Text / Footer-Labels */
body.aegean #et-boc .et-l .muted,
body.aegean #et-boc .et-l .muted p { color: var(--ink-faint) !important; }
body.aegean #et-boc .et-l .site-footer__label {
font-family: var(--font-body) !important;
font-size: .72rem !important;
letter-spacing: .18em !important;
text-transform: uppercase !important;
color: var(--footer-ink) !important;
}
/* ------------------------------------------------------------
16c. ABSTÄNDE im Raum-Block · HIER ZUM ANPASSEN
Trifft die INNEREN Abstände (Divis Modul-Margin-Regler greift
hier nicht zuverlässig). Werte nach Wunsch ändern, Datei neu
hochladen, Cache leeren. Reihenfolge der Lücken von oben:
Nr → Titel → Beschreibung → "Zu sehen" → Buttons
------------------------------------------------------------ */
/* 1) zwischen Raum-Nummer und Titel */
body.aegean #et-boc .et-l .room__num,
body.aegean #et-boc .et-l .room__num p {
margin: 0 0 6px 0 !important; /* ← Lücke Nr → Titel */
}
/* 2) zwischen Titel und Beschreibung
(setzt voraus: Titel-Überschrift hat die CSS-Klasse room__title) */
body.aegean #et-boc .et-l .room__title,
body.aegean #et-boc .et-l .room__title h1,
body.aegean #et-boc .et-l .room__title h2,
body.aegean #et-boc .et-l .room__title h3 {
margin: 0 0 10px 0 !important; /* ← Lücke Titel → Beschreibung */
}
/* 3) zwischen Beschreibung und "Zu sehen"-Label */
body.aegean #et-boc .et-l .room__desc,
body.aegean #et-boc .et-l .room__desc p {
margin: 0 0 22px 0 !important; /* ← Lücke Beschreibung → Label */
}
/* 4) zwischen "Zu sehen"-Label und den Buttons/Teasern */
body.aegean #et-boc .et-l .room__teaser-label,
body.aegean #et-boc .et-l .room__teaser-label p {
margin: 0 0 12px 0 !important; /* ← Lücke Label → Buttons */
}
/* ============================================================
16d. DIVI-BLOG-MODUL → news-card-Optik · WEG A
------------------------------------------------------------
Verwandelt die Standard-Ausgabe des Divi-„Blog"-Moduls in
unsere News-Karten — damit Redakteure Meldungen einfach als
WordPress-BEITRÄGE pflegen (Titel, Bild, Kategorie) und es
trotzdem im Ägäis-Look erscheint. Kategorie = Badge auf Bild.
Nur auf body.aegean-Seiten aktiv.
============================================================ */
/* Raster: gleiche Spalten wie .news-grid */
body.aegean #et-boc .et-l .et_pb_blog_grid .et_pb_salvattore_content,
body.aegean #et-boc .et-l .et_pb_blog_grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: var(--s-6) !important;
}
/* Salvattore-Spalten-Hack abschalten (Divi setzt sonst data-columns) */
body.aegean #et-boc .et-l .et_pb_blog_grid .column { width:auto !important; margin:0 !important; }
/* Die Karte */
body.aegean #et-boc .et-l .et_pb_blog_grid .et_pb_post {
position: relative !important;
display: flex !important;
flex-direction: column !important;
background: var(--surface) !important;
border: 1px solid var(--line-soft) !important;
border-radius: var(--radius-lg) !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
box-shadow: var(--shadow-soft) !important;
transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}
body.aegean #et-boc .et-l .et_pb_blog_grid .et_pb_post:hover {
transform: translateY(-3px) !important;
box-shadow: 0 14px 30px -16px rgba(74,59,50,.5) !important;
border-color: var(--line) !important;
}
/* Bild oben, fester Bildausschnitt */
body.aegean #et-boc .et-l .et_pb_post .et_pb_image_container,
body.aegean #et-boc .et-l .et_pb_post .entry-featured-image-url {
margin: 0 !important;
display: block !important;
aspect-ratio: 16 / 10 !important;
overflow: hidden !important;
}
body.aegean #et-boc .et-l .et_pb_post .et_pb_image_container img,
body.aegean #et-boc .et-l .et_pb_post .entry-featured-image-url img {
width: 100% !important; height: 100% !important; object-fit: cover !important;
filter: sepia(var(--photo-warm)) saturate(1.04) contrast(1.02) !important;
}
/* Textbereich */
body.aegean #et-boc .et-l .et_pb_post .post-content,
body.aegean #et-boc .et-l .et_pb_post > .post-meta,
body.aegean #et-boc .et-l .et_pb_post .entry-title {
padding-inline: var(--s-5) !important;
}
body.aegean #et-boc .et-l .et_pb_post .entry-title {
font-family: var(--font-head) !important;
font-size: 1.28rem !important; line-height: 1.16 !important;
color: var(--ink) !important; margin: 14px 0 6px !important;
}
body.aegean #et-boc .et-l .et_pb_post .entry-title a { color: inherit !important; }
body.aegean #et-boc .et-l .et_pb_post .post-content,
body.aegean #et-boc .et-l .et_pb_post .post-content p {
color: var(--ink-soft) !important; font-size: .95rem !important;
}
body.aegean #et-boc .et-l .et_pb_post .post-content { padding-bottom: var(--s-5) !important; }
/* Datum (in der Meta-Zeile) als kleines Sand-Label */
body.aegean #et-boc .et-l .et_pb_post .post-meta {
font-family: var(--font-body) !important;
font-size: .72rem !important; font-weight: 700 !important;
letter-spacing: .1em !important; text-transform: uppercase !important;
color: var(--sand) !important; margin: 14px 0 0 !important;
}
/* KATEGORIE = Badge auf dem Bild (oben links) */
body.aegean #et-boc .et-l .et_pb_post .post-meta a[rel~="category"],
body.aegean #et-boc .et-l .et_pb_post .post-meta a[rel~="tag"] {
position: absolute !important;
top: 12px !important; left: 12px !important; z-index: 3 !important;
font-size: .68rem !important; font-weight: 700 !important;
letter-spacing: .08em !important; text-transform: uppercase !important;
color: #fff !important; background: var(--brand) !important;
border-radius: 999px !important; padding: .3em .8em !important;
line-height: 1.4 !important;
}
/* „Weiterlesen" als Brand-Link */
body.aegean #et-boc .et-l .et_pb_post .more-link,
body.aegean #et-boc .et-l .et_pb_post .et_pb_button {
display: inline-block !important;
margin: 0 var(--s-5) var(--s-5) !important;
font-weight: 700 !important; color: var(--brand) !important;
background: none !important; border: 0 !important; padding: 0 !important;
}
body.aegean #et-boc .et-l .et_pb_post .more-link::after,
body.aegean #et-boc .et-l .et_pb_post .et_pb_button::after { content: " ›" !important; opacity: 1 !important; }
/* Beim Filtern ausgeblendete Karten */
body.aegean #et-boc .et-l .et_pb_post.is-hidden { display: none !important; }
/* ============================================================
16e. HERO „KARTE" (Variante B) in Divi · HIER EINSTELLEN
------------------------------------------------------------
Problem: Divis Bild-Selektoren (.et_pb_code img …) sind
spezifischer als unser .hero-card__media img und kippen das
position:absolute → das Bild landet OBEN IN der Karte statt
als Band DAHINTER. Hier erzwingen wir das Layout mit
Divi-Spezifität + !important.
► ZWEI STELLSCHRAUBEN (unten markiert):
(1) BILDHÖHE = min-height an .hero-card__media
(2) ÜBERLAPPUNG = margin-top (negativ) an .hero-card__panel
Werte ändern → Datei neu hochladen → Cache leeren.
============================================================ */
/* Wrapper darf nicht clippen, volle Breite */
body.aegean #et-boc .et-l .hero-card { position: relative !important; }
/* (1) BILDBAND — Höhe hier einstellen ↓↓↓ */
body.aegean #et-boc .et-l .hero-card__media {
position: relative !important;
display: block !important;
min-height: var(--hero-h, 54vh) !important; /* ←①① BILDHÖHE Desktop (z. B. 40vh / 60vh / 480px) */
overflow: hidden !important;
margin: 0 !important;
}
/* Bild als FÜLL-Band dahinter (das ist der entscheidende Fix) */
@media (max-width:720px){
body.aegean #et-boc .et-l .hero-card__media { min-height: var(--hero-h-m, var(--hero-h, 54vh)) !important; } /* ←①① BILDHÖHE Mobil */
}
body.aegean #et-boc .et-l .hero-card__media img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
filter: sepia(var(--photo-warm)) saturate(1.03) !important;
margin: 0 !important; padding: 0 !important; max-width: none !important;
}
/* (2) TEXTKARTE — überlappt das Bild von unten */
body.aegean #et-boc .et-l .hero-card__panel {
position: relative !important;
z-index: 2 !important;
background: var(--surface) !important;
color: var(--ink-soft) !important;
border-radius: var(--radius-lg) !important;
padding: clamp(26px, 4vw, 48px) !important;
max-width: var(--fmt-hero-card-width, 600px) !important;
margin-top: var(--fmt-hero-overlap, -90px) !important; /* ←②② ÜBERLAPPUNG: via --fmt-hero-overlap steuerbar */
box-shadow: 0 18px 44px -22px rgba(74,59,50,.5) !important;
}
/* Divi setzt der .container evtl. eine max-width/padding — hier neutral */
body.aegean #et-boc .et-l .hero-card .container {
max-width: var(--maxw) !important;
margin-inline: auto !important;
padding-inline: var(--gutter) !important;
}
/* Mobil: etwas weniger Überlappung, schmalere Karte */
@media (max-width: 620px) {
body.aegean #et-boc .et-l .hero-card__panel { margin-top: var(--fmt-hero-overlap-m, -56px) !important; }
}
/* Button-Textfarben gegen Divis globalen a-Override absichern
(sonst werden gefüllte Buttons unsichtbar: Text = Hintergrund) */
body.aegean #et-boc .et-l a.btn { color: var(--on-brand) !important; }
body.aegean #et-boc .et-l a.btn--outline { color: var(--brand) !important; }
body.aegean #et-boc .et-l a.btn--outline:hover { color: var(--on-brand) !important; }
body.aegean #et-boc .et-l a.btn--ghost { color: var(--ink) !important; }
body.aegean #et-boc .et-l a.btn--sand { color: var(--ink) !important; }
/* ============================================================
16f. SÄULEN-KACHELN (.tiles/.tile) in Divi
------------------------------------------------------------
EIN Code-Modul mit dem ganzen …
(alle drei darin). Erzwingt Grid + Bild-
Hintergrund + weißen Overlay-Text gegen Divis Selektoren.
============================================================ */
/* Raster: 1 Spalte mobil, 3 ab 760px */
body.aegean #et-boc .et-l .tiles {
display: grid !important;
grid-template-columns: 1fr !important;
gap: var(--s-5) !important;
}
@media (min-width: 760px) {
body.aegean #et-boc .et-l .tiles { grid-template-columns: repeat(3, 1fr) !important; }
}
/* Variante für 4 Kacheln: gleiche Klasse .tiles + zusätzlich .tiles--4 */
@media (min-width: 760px) {
body.aegean #et-boc .et-l .tiles.tiles--4 { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (min-width: 1100px) {
body.aegean #et-boc .et-l .tiles.tiles--4 { grid-template-columns: repeat(4, 1fr) !important; }
}
/* Die Kachel */
body.aegean #et-boc .et-l .tile {
position: relative !important;
display: flex !important;
min-height: 360px !important; /* ← Kachelhöhe hier einstellen */
overflow: hidden !important;
border-radius: var(--radius-lg) !important;
margin: 0 !important;
text-decoration: none !important;
}
/* Bild als FÜLL-Hintergrund (der entscheidende Fix) */
body.aegean #et-boc .et-l .tile img {
position: absolute !important;
inset: 0 !important;
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
margin: 0 !important; padding: 0 !important; max-width: none !important;
}
/* Verlauf darüber */
body.aegean #et-boc .et-l .tile__scrim {
position: absolute !important;
inset: 0 !important;
z-index: 1 !important;
}
/* Text-Overlay unten, immer weiß */
body.aegean #et-boc .et-l .tile__body {
position: relative !important;
z-index: 2 !important;
margin-top: auto !important;
padding: var(--s-6) !important;
display: grid !important;
grid-template-rows: auto auto 1fr auto !important;
row-gap: .35em !important;
}
body.aegean #et-boc .et-l .tile__body h3 { color: #fff !important; margin:0 !important; }
body.aegean #et-boc .et-l .tile__body p { color: rgba(255,255,255,.85) !important; margin:0 !important; }
body.aegean #et-boc .et-l .tile__kicker { color: rgba(255,255,255,.85) !important; }
body.aegean #et-boc .et-l .tile .tile__more { color: #fff !important; }
/* Subgrid-Aktivierung fuer die Divi-Live-Regeln (musste HIER stehen, NACH
den obigen .tile/.tile__body-Basisregeln, da display:flex/grid mit
gleicher !important-Prioritaet sonst je nach Quellreihenfolge verliert).
Richtet Kicker/Titel/Text/"mehr" ueber ALLE Kacheln einer Reihe hinweg
auf gleicher Hoehe aus (klassisches Subgrid-Pattern).
.tiles--4 bekommt das erst ab 1100px (dort erst alle 4 Kacheln in EINER
Zeile) -- bei 2 Spalten/Tablet (760-1099px) waeren es 2 Kachel-Zeilen,
"grid-row:span 4" wuerde beide in dieselben 4 Tracks zwingen und dadurch
ueberlappen. Deshalb dort bewusst OHNE Subgrid. */
@media (min-width:760px){
body.aegean #et-boc .et-l .tiles:not(.tiles--4) { grid-template-rows: auto auto auto auto !important; }
body.aegean #et-boc .et-l .tiles:not(.tiles--4) .tile {
display: grid !important;
grid-template-rows: subgrid !important;
grid-row: span 4 !important;
}
body.aegean #et-boc .et-l .tiles:not(.tiles--4) .tile__body {
grid-row: 1 / 5 !important;
grid-template-rows: subgrid !important;
margin-top: 0 !important;
align-self: stretch !important;
}
}
@media (min-width:1100px){
body.aegean #et-boc .et-l .tiles--4 { grid-template-rows: auto auto auto auto !important; }
body.aegean #et-boc .et-l .tiles--4 .tile {
display: grid !important;
grid-template-rows: subgrid !important;
grid-row: span 4 !important;
}
body.aegean #et-boc .et-l .tiles--4 .tile__body {
grid-row: 1 / 5 !important;
grid-template-rows: subgrid !important;
margin-top: 0 !important;
align-self: stretch !important;
}
}
/* Divi stylt mit eigenem Rand → bei .pullquote
doppelter Balken. Divis Rand/Hintergrund neutralisieren,
nur unseren Olivgrün-Strich behalten. */
body.aegean #et-boc .et-l blockquote.pullquote,
body.aegean .et_pb_text blockquote.pullquote,
body.aegean blockquote.pullquote {
border-top: 0 !important; border-right: 0 !important; border-bottom: 0 !important;
border-left: 4px solid var(--olive) !important;
background: transparent !important; box-shadow: none !important;
padding-top: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important;
}
body.aegean .timeline { border-left: 0 !important; }
/* ============================================================
16h. THE EVENTS CALENDAR (Gratis-Plugin) → Ägäis-Optik
------------------------------------------------------------
Übersetzt die Listen-Ansicht ("List view") des Plugins in
unsere Karten + Datums-Block + Kategorie-Pille. Mitglieder
pflegen Termine im Backend; die Optik kommt von hier.
Wirkt nur auf body.aegean-Seiten. Plugin-Klassen-Präfix:
.tribe-events / .tribe-events-calendar-list
============================================================ */
/* Rahmen/Container neutralisieren */
body.aegean .tribe-common,
body.aegean .tribe-events { background: transparent !important; font-family: var(--font-body) !important; }
body.aegean .tribe-events .tribe-events-calendar-list { display: grid !important; gap: var(--s-4) !important; max-width: 820px !important; margin-inline: auto !important; }
/* Monats-Trenner (z. B. "Juni 2026") */
body.aegean .tribe-events-calendar-list__month-separator {
font-family: var(--font-head) !important; color: var(--ink) !important;
border: 0 !important; border-top: 1px solid var(--line-soft) !important;
padding-top: var(--s-4) !important; margin-top: var(--s-3) !important;
}
/* Eine Termin-Zeile = unsere Karte */
body.aegean .tribe-events-calendar-list__event-row { margin: 0 !important; }
body.aegean .tribe-events-calendar-list__event {
display: grid !important; grid-template-columns: 88px 1fr !important; gap: var(--s-5) !important;
align-items: start !important;
background: var(--surface) !important; border: 1px solid var(--line-soft) !important;
border-radius: var(--radius-lg) !important; padding: var(--s-5) !important;
box-shadow: var(--shadow-soft) !important; transition: transform .16s, box-shadow .16s, border-color .16s !important;
}
body.aegean .tribe-events-calendar-list__event:hover {
transform: translateY(-2px) !important; border-color: var(--line) !important;
box-shadow: 0 14px 30px -16px rgba(74,59,50,.5) !important;
}
/* Datums-Block links (aus der Plugin-Datumsanzeige gebaut) */
body.aegean .tribe-events-calendar-list__event-date-tag {
text-align: center !important; border-radius: var(--radius) !important;
background: var(--sand-tint) !important; border: 1px solid var(--line-soft) !important;
padding: 10px 6px !important; align-self: start !important;
}
body.aegean .tribe-events-calendar-list__event-date-tag-daynum {
font-family: var(--font-head) !important; font-weight: 800 !important; font-size: 1.9rem !important;
color: var(--brand) !important; line-height: 1 !important;
}
body.aegean .tribe-events-calendar-list__event-date-tag-weekday {
font-size: .7rem !important; font-weight: 700 !important; letter-spacing: .12em !important;
text-transform: uppercase !important; color: var(--sand) !important;
}
/* Titel + Text */
body.aegean .tribe-events-calendar-list__event-title {
font-family: var(--font-head) !important; font-size: 1.25rem !important; line-height: 1.16 !important;
margin: 0 0 .25em !important;
}
body.aegean .tribe-events-calendar-list__event-title-link { color: var(--ink) !important; text-decoration: none !important; }
body.aegean .tribe-events-calendar-list__event-title-link:hover { color: var(--brand) !important; }
body.aegean .tribe-events-calendar-list__event-datetime,
body.aegean .tribe-events-calendar-list__event-venue {
color: var(--ink-soft) !important; font-size: .9rem !important;
}
body.aegean .tribe-events-calendar-list__event-description,
body.aegean .tribe-events-calendar-list__event-description p { color: var(--ink-soft) !important; font-size: .95rem !important; }
/* Beitragsbild der Termine: warmer Filter, runde Ecken */
body.aegean .tribe-events-calendar-list__event-featured-image {
border-radius: var(--radius) !important; overflow: hidden !important; margin-bottom: 10px !important;
}
body.aegean .tribe-events-calendar-list__event-featured-image img {
filter: sepia(var(--photo-warm)) saturate(1.04) contrast(1.02) !important;
}
/* KATEGORIE als Pille (Plugin gibt Kategorie-Klassen aus) */
body.aegean .tribe-events-calendar-list__event-category,
body.aegean .tribe_events_cat { display: inline-block !important; }
body.aegean .tribe-common .tribe-events-c-small-cta__link,
body.aegean .tribe-events .tribe-events-cal-links a,
body.aegean .tribe-events .tribe-common-c-btn,
body.aegean .tribe-events .tribe-events-c-top-bar__datepicker-button {
/* Buttons des Plugins in Brand-Optik */
background: var(--brand) !important; color: #fff !important; border: 1.5px solid var(--brand) !important;
border-radius: var(--radius) !important; font-family: var(--font-body) !important; font-weight: 700 !important;
}
/* Obere Leiste (Monat/Heute/Ansichten) ruhig einfärben */
body.aegean .tribe-events-header,
body.aegean .tribe-events-c-top-bar { background: transparent !important; }
body.aegean .tribe-events-c-top-bar__today-button {
color: var(--brand) !important; font-weight: 700 !important;
}
/* Datepicker / Links Akzentfarbe */
body.aegean .tribe-common a { color: var(--brand) !important; }
/* ============================================================
17. DESKTOP-DROPDOWN-NAVIGATION · Divi Menü-Modul (.et_pb_menu)
------------------------------------------------------------
Stylt Divis NATIVES Menü im Ägäis-Look — KEIN Custom-JS:
Divis eigenes Hover/Touch-Verhalten bleibt aktiv (WPML-freundlich).
Unterpunkt-Markup im Navigationslabel des WP-Menüs (zweizeilig):
TitelBeschreibung
(Beschreibung-Span weglassen = einfacher Titel-Link.)
Nur Tokens → identisch gültig in aegean.css UND modern.css.
Desktop-Look; unterhalb des Divi-Breakpoints greift Divis Burger-Menü.
============================================================ */
/* --- Top-Level-Punkte --- */
.et_pb_menu .et-menu > li > a {
position: relative;
font-family: var(--font-body) !important;
font-weight: 700 !important;
color: var(--ink) !important;
letter-spacing: .01em;
transition: color .18s ease;
}
.et_pb_menu .et-menu > li > a:hover { color: var(--brand) !important; }
.et_pb_menu .et-menu > li.current-menu-item > a,
.et_pb_menu .et-menu > li.current-menu-ancestor > a,
.et_pb_menu .et-menu > li.current_page_item > a { color: var(--brand) !important; }
/* dezenter Sand-Unterstrich beim Hover (wie .nav-link) */
.et_pb_menu .et-menu > li > a::before {
content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
background: var(--sand); transform: scaleX(0); transform-origin: left;
transition: transform .2s ease;
}
.et_pb_menu .et-menu > li:hover > a::before,
.et_pb_menu .et-menu > li.current-menu-item > a::before { transform: scaleX(1); }
/* --- ▾ Caret an Eltern-Punkten --- */
.et_pb_menu .et-menu > li.menu-item-has-children > a::after {
content: ""; display: inline-block;
width: .42em; height: .42em; margin-left: .5em; vertical-align: middle;
border-right: 2px solid var(--sand); border-bottom: 2px solid var(--sand);
transform: translateY(-2px) rotate(45deg);
transition: transform .2s ease;
}
.et_pb_menu .et-menu > li.menu-item-has-children:hover > a::after {
transform: translateY(1px) rotate(225deg);
}
/* --- Dropdown-Panel (sub-menu) --- */
.et_pb_menu .et-menu li ul.sub-menu {
background: var(--surface) !important;
border: 1px solid var(--line-soft) !important;
border-top: 3px solid var(--brand) !important;
border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
box-shadow: 0 22px 50px -24px rgba(0,0,0,.4) !important;
padding: 8px !important;
min-width: 272px !important;
transform: translateY(6px);
transition: transform .22s ease, opacity .22s ease !important;
}
.et_pb_menu .et-menu li:hover > ul.sub-menu,
.et_pb_menu .et-menu li.et-touch-hover > ul.sub-menu,
.et_pb_menu .et-menu li.et-show-dropdown > ul.sub-menu,
.et_pb_menu .et-menu li:focus-within > ul.sub-menu { transform: translateY(0); }
/* --- Unterpunkte --- */
.et_pb_menu .et-menu li ul.sub-menu li { margin: 0 !important; border: 0 !important; }
.et_pb_menu .et-menu li ul.sub-menu li a {
display: block !important;
width: auto !important;
padding: 10px 14px !important;
border: 0 !important;
border-radius: var(--radius) !important;
white-space: normal !important;
line-height: 1.25 !important;
color: var(--ink) !important;
font-weight: 600 !important;
background: transparent !important;
transition: background .15s ease !important;
}
.et_pb_menu .et-menu li ul.sub-menu li a:hover { background: var(--sand-tint) !important; }
.et_pb_menu .et-menu li ul.sub-menu li.current-menu-item > a { background: var(--sand-tint) !important; }
/* Titel + Beschreibung (zweizeiliger Eintrag) */
.et_pb_menu .sub-menu a .mi-t {
display: block; font-family: var(--font-head); font-weight: 700;
color: var(--ink); font-size: 1.02rem; line-height: 1.12;
}
.et_pb_menu .sub-menu a .mi-d {
display: block; font-family: var(--font-body); font-weight: 400;
color: var(--ink-faint); font-size: .82rem; line-height: 1.25; margin-top: 2px;
}
/* ============================================================
18. DESKTOP/TABLET-FOOTER · eigenständiges Code-Modul (.ftr)
------------------------------------------------------------
Reicher Footer NUR für Desktop + Tablet (≥768px). Auf dem Handy
ausgeblendet → dort bleibt dein bestehender Footer + Mobile-Nav
UNVERÄNDERT. Eigener Namespace .ftr* → fasst .site-footer* NICHT an.
Route-Button nutzt deine Klasse .custom-icon-btn (nur hier umgefärbt).
Nur Tokens → in aegean.css UND modern.css gültig.
============================================================ */
.ftr { display: none; background: var(--footer-bg); color: var(--footer-ink); }
@media (min-width: 768px) { .ftr { display: block; } }
.ftr a { color: var(--footer-ink); text-decoration: none; }
.ftr__wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.ftr .meander { background-color: var(--sand); }
/* Spalten — Desktop 4, Tablet 2×2 */
.ftr__top { display: grid; gap: clamp(28px, 4vw, 56px); padding-block: clamp(36px, 5vw, 60px);
grid-template-columns: 1.5fr 1fr 1.2fr 1.2fr; }
@media (max-width: 980px) { .ftr__top { grid-template-columns: 1fr 1fr; row-gap: 36px; } }
/* Marke */
.ftr__brand-mark { display: flex; align-items: center; gap: .7em; margin-bottom: 16px; }
.ftr__logo { width: 48px; height: 48px; flex: none; border-radius: 50%; overflow: hidden;
display: grid; place-items: center; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.18); }
.ftr__logo img { width: 100%; height: 100%; object-fit: contain; }
.ftr__name { font-family: var(--font-head); font-weight: 700; color: #fff; line-height: 1.1; font-size: 1.18rem; }
.ftr__name small { display: block; font-family: var(--font-body); font-weight: 600; font-size: .72rem;
letter-spacing: .04em; color: var(--sand); margin-top: 2px; }
.ftr__brand p { color: var(--footer-ink); opacity: .72; font-size: .95rem; max-width: 34ch; margin: 0 0 16px; }
.ftr__langs { display: flex; gap: 8px; }
.ftr__langs span, .ftr__langs a { font-size: .7rem; font-weight: 700; letter-spacing: .06em; opacity: .7;
border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 4px 10px;
text-decoration: none; color: inherit; transition: opacity .15s ease, border-color .15s ease, background .15s ease; }
.ftr__langs a:hover { opacity: 1; border-color: rgba(255,255,255,.4); }
.ftr__langs a[aria-current="true"] { opacity: 1; background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.5); }
/* Spaltenkopf */
.ftr__label { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
color: var(--footer-ink) !important; font-weight: 700; margin: 0 0 16px; }
/* Navi */
.ftr__nav { display: flex; flex-direction: column; gap: 11px; }
.ftr__nav a { width: max-content; font-size: .96rem; opacity: .82; transition: opacity .15s ease; }
.ftr__nav a:hover { opacity: 1; }
/* Kontakt-/Besuch-Zeilen */
.ftr__rows { display: flex; flex-direction: column; gap: 16px; }
.ftr__row { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; }
.ftr__row > svg { width: 18px; height: 18px; color: var(--sand); margin-top: 3px; flex: none; }
.ftr__row .v { color: #fff; font-weight: 700; font-size: .98rem; line-height: 1.3; }
.ftr__row .v a { color: #fff; }
.ftr__row .v a:hover { color: var(--sand); }
.ftr__row .s { display: block; color: var(--footer-ink); opacity: .62; font-weight: 400; font-size: .88rem; margin-top: 2px; }
/* Route-Button (deine .custom-icon-btn — nur im Footer umgefärbt) */
.ftr .custom-icon-btn { display: inline-flex; align-items: center; gap: .55em; margin-top: 4px;
align-self: flex-start; white-space: nowrap;
background: var(--brand); border: 1.5px solid var(--brand); border-radius: var(--radius);
padding: .6em 1.1em; min-height: 44px; font-weight: 700; font-size: .9rem; color: #fff;
transition: background .15s ease; }
.ftr .custom-icon-btn:hover { background: var(--brand-hover); }
.ftr .custom-icon-btn span { color: #fff; }
.ftr .custom-icon-btn svg { width: 17px; height: 17px; fill: currentColor; }
/* Abschluss-Leiste */
.ftr__bar { border-top: 1px solid rgba(255,255,255,.16); display: flex; flex-wrap: wrap;
gap: 10px 22px; align-items: center; justify-content: space-between; padding-block: 18px; font-size: .84rem; }
.ftr__bar > span { opacity: .62; }
.ftr__legal { display: flex; gap: 18px; flex-wrap: wrap; }
.ftr__legal a { opacity: .62; transition: opacity .15s ease; }
.ftr__legal a:hover { opacity: 1; }
/* ============================================================
19. HEADER-SCHRIFTZUG · Code-/Text-Modul neben dem Divi-Logo
------------------------------------------------------------
Schriftzug rechts neben dem Logo-Modul (Theme-Builder-Header):
„Kulturverein" (Playfair, --ink) + Unterzeile „Theologos · Thassos"
klein in Sand. Eigener Namespace .hdr-brand* → fasst .brand-mark
und .site-header NICHT an. Als Text-Modul WPML-übersetzbar.
Nur Tokens → in aegean.css UND modern.css gültig.
============================================================ */
.hdr-brand { display: inline-flex; align-items: center; gap: .7em; text-decoration: none; }
.hdr-brand__logo { height: 56px; width: auto; flex: none; display: block; }
.hdr-brand__name { font-family: var(--font-head); font-weight: 700; color: var(--ink);
line-height: 1.0; font-size: clamp(1.25rem, 1.05rem + .8vw, 1.6rem); letter-spacing: .005em;
display: flex; flex-direction: column; }
/* obere Zeile einzeilig; Unterzeile wird auf dieselbe Breite verteilt (justify) */
.hdr-brand__name > [data-lang] { flex-direction: column; align-items: stretch; white-space: nowrap; }
.hdr-brand__sub { display: block; font-family: var(--font-body); font-weight: 700;
font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--sand);
margin-top: 4px; white-space: normal; text-align: justify; text-align-last: justify;
text-justify: inter-character; }
/* Auf sehr schmalen Headern die Unterzeile ausblenden */
@media (max-width: 600px) { .hdr-brand__sub { display: none; } }
/* --- WPML-freie Variante: alle 3 Sprachen im Modul, CSS zeigt die
passende (nach das WPML pro Sprache setzt). Keine
Uebersetzung des Moduls noetig. --- */
.hdr-brand__name > [data-lang] { display: none; }
html[lang|="de"] .hdr-brand__name > [data-lang="de"],
html[lang|="en"] .hdr-brand__name > [data-lang="en"],
html[lang|="el"] .hdr-brand__name > [data-lang="el"],
html[lang|="gr"] .hdr-brand__name > [data-lang="el"] { display: flex; }
/* Fallback, falls keine Sprache matcht: Deutsch zeigen */
html:not([lang|="de"]):not([lang|="en"]):not([lang|="el"]):not([lang|="gr"]) .hdr-brand__name > [data-lang="de"] { display: flex; }
/* ============================================================
17. FRONTEND-REDAKTION · ACF + Frontend-Admin-Formulare
------------------------------------------------------------
Stylt die PLUGIN-Ausgabe (ACF / Frontend Admin) im Seiten-Look.
Wir können dort KEINE eigenen Klassen setzen → wir treffen die
echten Plugin-Klassen (.frontend-form, .acf-field, .acf-input …).
Scope wie alle Divi-Overrides: body.aegean #et-boc .et-l
(Body-Klasse bleibt IMMER "aegean" — der Look-Wechsel tauscht nur
die Stylesheet-Datei; identischer Block in aegean.css + modern.css).
============================================================ */
/* --- Formular-Rahmen --- */
body.aegean #et-boc .et-l .frontend-form { max-width: 640px; margin-inline: auto; }
body.aegean #et-boc .et-l .acf-fields.acf-form-fields {
display: flex; flex-direction: column; gap: 18px; border: 0; padding: 0;
}
body.aegean #et-boc .et-l .acf-fields.acf-form-fields::before,
body.aegean #et-boc .et-l .acf-fields.acf-form-fields::after { display: none; } /* ACF-Default-Linien weg */
/* --- Ein Feld --- */
body.aegean #et-boc .et-l .acf-fields > .acf-field {
display: flex; flex-direction: column; gap: 6px;
width: 100%; margin: 0; padding: 0; border: 0;
}
body.aegean #et-boc .et-l .acf-fields > .acf-field.acf-hidden { display: none; }
/* --- Label --- */
body.aegean #et-boc .et-l .acf-label { margin: 0; }
body.aegean #et-boc .et-l .acf-label label {
font-family: var(--font-body) !important;
font-size: .78rem; font-weight: 700; letter-spacing: .06em;
color: var(--ink) !important; margin: 0;
}
body.aegean #et-boc .et-l .acf-label .description,
body.aegean #et-boc .et-l .acf-input .description { color: var(--ink-faint); font-weight: 400; font-size: .82rem; }
/* --- Eingabefelder: Text, E-Mail, Datum, Zeit, Select, Textarea --- */
body.aegean #et-boc .et-l .acf-input input[type="text"],
body.aegean #et-boc .et-l .acf-input input[type="email"],
body.aegean #et-boc .et-l .acf-input input[type="url"],
body.aegean #et-boc .et-l .acf-input input[type="number"],
body.aegean #et-boc .et-l .acf-input input[type="password"],
body.aegean #et-boc .et-l .acf-input textarea,
body.aegean #et-boc .et-l .acf-input select {
font-family: var(--font-body); font-size: 1rem; line-height: 1.3; color: var(--ink);
background: var(--surface); border: 1.5px solid var(--line); border-radius: var(--radius);
padding: .75em .9em; min-height: var(--tap); width: 100%; box-sizing: border-box;
-webkit-appearance: none; appearance: none;
}
body.aegean #et-boc .et-l .acf-input textarea { min-height: 120px; resize: vertical; }
body.aegean #et-boc .et-l .acf-input input:focus,
body.aegean #et-boc .et-l .acf-input textarea:focus,
body.aegean #et-boc .et-l .acf-input select:focus {
outline: 2px solid var(--sand); outline-offset: 2px; border-color: var(--sand);
}
body.aegean #et-boc .et-l .acf-input input::placeholder,
body.aegean #et-boc .et-l .acf-input textarea::placeholder { color: var(--ink-faint); }
/* Select: eigener Pfeil (Palette-Farbe) */
body.aegean #et-boc .et-l .acf-input select {
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238C7E70' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right .85em center; padding-right: 2.4em;
}
/* Datum/Zeit: Wrapper nicht doppelt rahmen */
body.aegean #et-boc .et-l .acf-date-picker,
body.aegean #et-boc .et-l .acf-time-picker { border: 0; padding: 0; }
/* --- Bild-Upload (Poster) --- */
body.aegean #et-boc .et-l .acf-image-uploader .image-wrap img {
border-radius: var(--radius); border: 1px solid var(--line-soft);
max-width: 220px; height: auto; filter: sepia(var(--photo-warm)) saturate(1.04);
}
body.aegean #et-boc .et-l .acf-basic-uploader.file-drop,
body.aegean #et-boc .et-l .acf-image-uploader .file-custom {
border: 1.5px dashed var(--line); border-radius: var(--radius);
background: var(--sand-tint); padding: 18px; text-align: center; color: var(--ink-soft);
}
body.aegean #et-boc .et-l .acf-image-uploader .file-custom p { margin: 0; }
/* „Bild hinzufügen" = sekundärer Button */
body.aegean #et-boc .et-l .acf-button.button,
body.aegean #et-boc .et-l .acf-image-uploader .button:not(.button-primary) {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 700; font-size: .95rem;
min-height: 44px; padding: .55em 1.3em; margin-top: 8px;
background: transparent; color: var(--brand) !important;
border: 1.5px solid var(--brand); border-radius: var(--radius);
cursor: pointer; box-shadow: none; text-shadow: none;
}
body.aegean #et-boc .et-l .acf-button.button:hover { background: var(--brand); color: #fff !important; }
body.aegean #et-boc .et-l .uploads-progress .bar { background: var(--olive); }
/* --- Senden-Button (+ alle WP-„primary"-Buttons im Formular) --- */
body.aegean #et-boc .et-l .frontend-form .button-primary,
body.aegean #et-boc .et-l .fea-submit-button {
display: inline-flex; align-items: center; justify-content: center;
font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
min-height: var(--tap); padding: .85em 1.9em;
background: var(--brand) !important; color: var(--on-brand) !important;
border: 1.5px solid var(--brand) !important; border-radius: var(--radius);
box-shadow: none; text-shadow: none; cursor: pointer;
transition: background .18s ease, border-color .18s ease;
}
body.aegean #et-boc .et-l .frontend-form .button-primary:hover,
body.aegean #et-boc .et-l .fea-submit-button:hover {
background: var(--brand-hover) !important; border-color: var(--brand-hover) !important;
}
body.aegean #et-boc .et-l .acf-field-submit-button { margin-top: 6px; }
/* --- Meldungen (Erfolg / Hinweis) --- */
body.aegean #et-boc .et-l .frontend-admin-message:not(:empty) {
padding: 12px 16px; border-radius: var(--radius);
background: var(--sand-tint); border: 1px solid var(--line-soft);
color: var(--ink); margin-bottom: 16px;
}
/* ============================================================
17b. LOGIN-SEITE (Divi-5-Login-Modul → CSS-Klasse "fmt-login")
============================================================ */
body.aegean #et-boc .et-l .fmt-login {
max-width: 420px; margin-inline: auto;
background: var(--surface); border: 1px solid var(--line-soft);
border-radius: var(--radius-lg); padding: clamp(22px, 4vw, 34px);
box-shadow: var(--shadow-soft);
}
body.aegean #et-boc .et-l .fmt-login input[type="text"],
body.aegean #et-boc .et-l .fmt-login input[type="password"] {
font-family: var(--font-body); font-size: 1rem; color: var(--ink);
background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--radius);
padding: .75em .9em; min-height: var(--tap); width: 100%; box-sizing: border-box; margin-bottom: 14px;
}
body.aegean #et-boc .et-l .fmt-login input:focus {
outline: 2px solid var(--sand); outline-offset: 2px; border-color: var(--sand);
}
body.aegean #et-boc .et-l .fmt-login .et_pb_button,
body.aegean #et-boc .et-l .fmt-login button {
width: 100%; justify-content: center;
background: var(--brand) !important; color: var(--on-brand) !important;
border: 1.5px solid var(--brand) !important; border-radius: var(--radius) !important;
font-family: var(--font-body) !important; font-weight: 700 !important;
min-height: var(--tap); padding: .8em 1.5em !important;
}
body.aegean #et-boc .et-l .fmt-login .et_pb_button:hover,
body.aegean #et-boc .et-l .fmt-login button:hover {
background: var(--brand-hover) !important; border-color: var(--brand-hover) !important;
}
/* ============================================================
17c. DASHBOARD „Meine Inhalte"
(Aktions-Buttons: Divi-Button-Module mit Klasse fmt-dash__btn;
Listen: Plugin-Shortcode [frontend_admin_posts] im Wrapper fmt-dash__list)
============================================================ */
body.aegean #et-boc .et-l .fmt-dash__actions { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 8px; }
@media (min-width: 640px) { body.aegean #et-boc .et-l .fmt-dash__actions { grid-template-columns: 1fr 1fr; } }
body.aegean #et-boc .et-l .fmt-dash__btn.et_pb_button {
display: flex !important; align-items: center; justify-content: flex-start; gap: 10px;
width: 100%; min-height: 56px; padding: 14px 18px !important;
background: var(--brand) !important; color: #fff !important;
border: 1.5px solid var(--brand) !important; border-radius: var(--radius) !important;
font-family: var(--font-body) !important; font-weight: 700 !important;
}
body.aegean #et-boc .et-l .fmt-dash__btn--news.et_pb_button {
background: var(--surface) !important; color: var(--ink) !important; border-color: var(--line) !important;
}
/* Eintrags-Liste (so nah wie möglich an .ditem aus der Vorschau) */
body.aegean #et-boc .et-l .fmt-dash__list .frontend-admin-posts,
body.aegean #et-boc .et-l .fmt-dash__list ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
body.aegean #et-boc .et-l .fmt-dash__list li,
body.aegean #et-boc .et-l .fmt-dash__list .fea-post {
background: var(--surface); border: 1px solid var(--line-soft); border-radius: var(--radius-lg);
padding: 12px 14px; box-shadow: var(--shadow-soft);
display: flex; align-items: center; gap: 12px;
}
body.aegean #et-boc .et-l .fmt-dash__list a { color: var(--brand); font-weight: 700; }
/* ============================================================
17d. EVENT-GALERIE auf der Detailseite (Shortcode [event_galerie])
nutzt die bestehende .photo-grid-Optik; hier nur Absicherung im Divi-Scope
============================================================ */
body.aegean #et-boc .et-l .photo-grid {
display: grid; gap: 8px; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 640px) { body.aegean #et-boc .et-l .photo-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 960px) { body.aegean #et-boc .et-l .photo-grid { grid-template-columns: repeat(4, 1fr); } }
body.aegean #et-boc .et-l .photo-grid__item {
padding: 0; border: 0; cursor: pointer; background: none; border-radius: var(--radius); overflow: hidden;
}
body.aegean #et-boc .et-l .photo-grid__item img {
width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block;
filter: sepia(var(--photo-warm)) saturate(1.04); transition: transform .25s ease;
}
body.aegean #et-boc .et-l .photo-grid__item:hover img { transform: scale(1.05); }
/* ============================================================
17e. EINZEL-DETAILSEITE · Theme-Builder-Body (Beitrag + Veranstaltung)
------------------------------------------------------------
Gilt für jede Einzelansicht (body.single → Post UND Veranstaltung).
In Theme-Builder-Bodies fehlt #et-boc → hier bewusst OHNE diesen Scope,
damit die schlichten Klassen greifen. CSS-Klassen liegen bei Divi auf
dem MODUL-Wrapper (volle Breite) → wir korrigieren Breite/Ausrichtung.
============================================================ */
/* Badge: echte Pille statt vollbreiter Balken
(Divi-Textmodul ist sonst width:100%) */
body.single .et_pb_text.badge,
body.single .et_pb_module.badge {
display: inline-flex !important;
width: auto !important;
max-width: max-content;
margin-bottom: .7em;
}
body.single .et_pb_text.badge .et_pb_text_inner { display: inline; }
/* Beitragstitel: an die Lesespalte angleichen */
body.single .et_pb_post_title .entry-title,
body.single .et_pb_title_container .entry-title { margin: 0; }
/* Lesetext: links ausrichten (nicht zentriert) + angenehme Breite */
body.single .prose,
body.single .et_pb_post_content.prose {
max-width: 760px !important;
margin-inline: 0 !important;
}
body.single .prose .et_pb_post_content { max-width: 760px; margin-inline: 0; }
body.single .prose .et_pb_post_content p,
body.single .et_pb_post_content.prose p { margin: 0 0 1.1em; color: var(--ink); }
/* Eckdaten-Raster (Veranstaltung) auch ohne #et-boc sauber */
body.single .info-grid { margin-block: 1.2em; }
/* ============================================================
17f. HERO-KARTE auf der Einzelseite (Beitrag + Veranstaltung)
------------------------------------------------------------
Spiegelt den funktionierenden Hero-Card-Fix (Zeile ~1440), aber
gescopt auf body.single STATT #et-boc — weil Theme-Builder-Bodies
kein #et-boc haben. Markup kommt aus EINEM Code-Modul via [fmt_hero].
============================================================ */
/* EIGENE Klasse .hero-postcard — komplett entkoppelt von .hero-card der
normalen Seiten. KEINE #et-boc-/!important-Spezifitätskämpfe mehr nötig. */
.hero-postcard { position: relative; }
/* Bild-Band */
.hero-postcard__media {
position: relative;
display: block;
overflow: hidden;
min-height: var(--hero-h, 54vh);
overflow: hidden;
margin: 0;
}
@media (max-width:720px){
.hero-postcard__media { min-height: var(--hero-h-m, var(--hero-h, 48vh)); }
}
/* Weichgezeichnete Hintergrund-Fuellung fuer Hochformat-Bilder: das echte
![]()
(via wp_footer-Script mit background-image auf .hero-postcard__media
gespiegelt) erscheint hier nochmal als unscharfer, ueberskalierter
Hintergrund -- "background-image: inherit" uebernimmt den vom Script
gesetzten Inline-Wert des Elternelements. So bleibt das eigentliche
Bild scharf UND unbeschnitten (object-fit:contain), waehrend an den
Seiten kein Leerraum/Balken entsteht. */
.hero-postcard__media::before {
content: "";
position: absolute;
inset: -30px;
background-image: inherit;
background-size: cover;
background-position: center;
filter: blur(28px) saturate(1.1) sepia(var(--photo-warm));
transform: scale(1.15);
z-index: 0;
}
.hero-postcard__media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
z-index: 1;
filter: sepia(var(--photo-warm)) saturate(1.03);
margin: 0; padding: 0; max-width: none;
}
/* Badge oben links INS Bild */
.hero-postcard__cat {
position: absolute; top: 14px; left: 14px; z-index: 3; margin: 0;
}
/* "Zurück"-Schaltfläche über der Hero-Karte — roter Button, nah am Bild */
.fmt-back {
display: flex;
align-items: center; /* Inhalt vertikal mittig */
margin: 0 0 8px 15px; /* kein negativer Rand — er wird sonst abgeschnitten */
}
.fmt-back__link {
display: inline-flex; align-items: center; gap: .45em;
padding: .5em 1.25em; line-height: 1;
border: 0; border-radius: 999px;
background: #c0392b; color: #f5f0e6 !important;
font-weight: 600; text-decoration: none;
transition: background .15s;
}
.fmt-back__link:hover,
.fmt-back__link:focus {
background: #a5301f; color: #f5f0e6 !important; text-decoration: none;
}
/* Textkarte — zentriert, überlappt das Bild von unten */
.hero-postcard__panel {
position: relative;
z-index: 2;
background: var(--surface);
color: var(--ink-soft);
border: 1px solid var(--line-soft);
border-radius: var(--radius-lg);
padding: clamp(24px, 4vw, 40px);
width: var(--fmt-event-card-width, 90%);
max-width: var(--fmt-event-card-width, 90%);
margin: var(--fmt-event-overlap, -80px) auto 0; /* ÜBERLAPPUNG: zentriert (auto) */
box-shadow: 0 18px 44px -22px rgba(74,59,50,.5);
}
.hero-postcard__panel .badge { margin-bottom: .6em; }
body.aegean #et-boc .et-l .hero-postcard__panel h1,
.hero-postcard__panel h1 {
color: var(--fmt-event-title-color, var(--ink)) !important;
margin: 0;
font-family: var(--fmt-event-title-font, var(--font-head)) !important;
font-weight: var(--fmt-event-title-weight, 700) !important;
font-size: var(--fmt-event-title-size, clamp(1.2rem, 4vw, 1.7rem)) !important;
line-height: var(--fmt-event-title-lh, 1.15);
hyphens: auto;
-webkit-hyphens: auto;
overflow-wrap: normal;
word-break: normal;
}
.hero-postcard__panel .greek {
color: var(--brand);
font-family: var(--font-head);
font-size: 1.05rem;
margin: .2em 0 0;
}
@media (max-width: 620px) {
.hero-postcard__panel { margin: var(--fmt-event-overlap-m, -56px) auto 0; }
}
/* Monospace killen UND Wrapper auflösen: Divi rahmt die Shortcode-Ausgabe
teils in ein (UA-Font monospace + zerbricht das Grid).
display:contents macht das für Layout unsichtbar → Buttons werden
direkte Grid-Kinder, Text rendert normal. */
.hero-postcard__panel code,
.event-section code,
.event-gallery code {
display: contents !important;
font-family: inherit;
font-size: inherit;
background: none;
padding: 0;
color: inherit;
}
/* Eckdaten: Datum|Beginn nebeneinander, Ort darunter — kompakt */
.hero-postcard__panel .event-info {
display: grid;
grid-template-columns: 1fr 1fr;
background: var(--sand-tint);
border: 1px solid var(--line-soft);
border-radius: var(--radius);
overflow: hidden;
margin-top: 1.1em;
text-align: left;
}
.hero-postcard__panel .event-info .info-cell:last-child { grid-column: 1 / -1; }
.hero-postcard__panel .event-info .info-cell { padding: 9px 14px; }
.hero-postcard__panel .event-info .info-cell__label { font-size: .64rem; margin-bottom: .25em; }
.hero-postcard__panel .event-info .info-cell__value { font-size: .98rem; }
/* Abschnitte unter der Karte (Beschreibung / Organisatorisches) */
.event-section {
max-width: var(--fmt-section-width, 680px);
margin: 1.6em auto 0;
text-align: left;
}
body.aegean #et-boc .et-l .event-section h2,
body.single .event-section h2 {
font-family: var(--fmt-section-title-font, var(--font-head)) !important;
color: var(--fmt-section-title-color, var(--ink)) !important;
font-size: var(--fmt-section-title-size, 1.3rem) !important;
font-weight: var(--fmt-section-title-weight, 700) !important;
margin: 0 0 .4em;
}
body.aegean #et-boc .et-l .event-section p,
body.aegean #et-boc .et-l .event-section li,
body.single .event-section p,
body.single .event-section li {
margin: 0 0 1em;
color: var(--fmt-section-text-color, var(--ink)) !important;
font-size: var(--fmt-section-text-size, 1rem) !important;
line-height: var(--fmt-section-text-lh, 1.6) !important;
}
.event-section:last-of-type { margin-bottom: .5em; }
/* Organisatorisches: Zeilenumbrüche aus dem Textfeld sichtbar lassen */
.event-section--org p { white-space: pre-line; }
/* Eindrücke-Galerie — eigenes Raster, frei einstellbar */
.event-gallery {
display: grid !important;
grid-template-columns: repeat(var(--fmt-gallery-cols, 3), 1fr) !important;
gap: var(--fmt-gallery-gap, 8px) !important;
margin-top: .2em;
}
@media (max-width: 720px) {
.event-gallery { grid-template-columns: repeat(var(--fmt-gallery-cols-m, 2), 1fr) !important; }
}
.event-gallery .photo-grid__item {
margin: 0; padding: 0; border: 0; width: 100%;
cursor: pointer; background: none; overflow: hidden;
border-radius: var(--fmt-gallery-radius, var(--radius));
}
.event-gallery .photo-grid__item img {
width: 100%; aspect-ratio: var(--fmt-gallery-ratio, 1 / 1);
object-fit: cover; display: block;
filter: sepia(var(--photo-warm)) saturate(1.04);
transition: transform .25s ease;
}
.event-gallery .photo-grid__item:hover img { transform: scale(1.05); }
/* ============================================================
20. GESCHICHTE-HUB · Kapitel-Chips + Master-Detail + Accordion
------------------------------------------------------------
Neue Sektion auf der Geschichte-Seite: oben eine Chip-Leiste
(Hauptpunkte), darunter der gefilterte Inhalt. Punkte mit
Unterpunkten zeigen ein Accordion (nur eines offen, anfangs
geschlossen). Zusammenfassung = abgesetzte Karte.
Deckt die HTML-Vorschau UND Divis natives Accordion-Modul ab
(.et_pb_toggle*). Alles ueber Tokens -> gueltig in beiden
Stylesheets. Steuerung: geschichte-hub.js (WPML-sicher,
sprachunabhaengig ueber CSS-IDs/Klassen).
============================================================ */
.gp { --gp-gap: clamp(20px,4vw,40px); }
/* --- LAYOUT: ab Tablet zweispaltig (Sidebar links + Inhalt rechts) --- */
@media (min-width:768px){
/* NUR die Standalone-Vorschau nutzt ein echtes Grid (body.gp-preview).
In Divi NIEMALS Grid -> dort uebernehmen Divis native 2 Spalten
(linke 1/4 = gp-side, rechte 3/4 = Panels) die Aufteilung. */
.gp-preview .gp{ display:grid; grid-template-columns: minmax(190px,236px) 1fr;
gap: clamp(28px,4vw,56px); align-items:start; }
}
.gp-panels { min-width:0; }
/* --- Sidebar-Huelle --- */
@media (min-width:768px){ .gp-side { position:sticky; top:80px; align-self:start; } }
/* Sidebar buendig mit der Ueberschrift oben (auch als Divi-Spalte) */
.gp-side{ align-self:flex-start; margin-top:0; }
body.aegean #et-boc .et-l .et_pb_column.gp-side{ align-self:flex-start !important; margin-top:0 !important; }
.gp-nav__label { font-size:.72rem; font-weight:700; letter-spacing:.16em;
text-transform:uppercase; color:var(--sand); margin:0 0 .8em; }
/* Label buendig mit der Panel-Ueberschrift (h2) ausrichten */
@media (min-width:768px){ .gp-nav__label{ margin-top:.55em; } }
/* --- Ueberschrift in ALLEN Panels gleich weit oben ---
Live in Divi haben Text-Module unterschiedliche obere Abstaende,
dadurch sass die Ueberschrift der Artikel-Kapitel (1-4) hoeher als
bei den Accordion-Kapiteln (5,6). Hier vereinheitlicht: erstes Modul
im aktiven Panel bekommt oben 0. */
.gp-head{ margin-top:0 !important; }
.gp-panel.is-active > *:first-child,
body.aegean #et-boc .et-l .gp-panel.is-active > *:first-child{ margin-top:0 !important; padding-top:0 !important; }
body.aegean #et-boc .et-l .gp-panel.is-active .gp-head{ margin-top:0 !important; }
@media (max-width:767px){ .gp-nav__label { display:none; } }
/* --- Navigation: feste Liste ueberall ---
(Sidebar am Desktop, Inline-Accordion mobil). Chips scrollten vorher
horizontal -- bei 10 Punkten sah man nur ~2 auf einmal. Jetzt ist
.gp-chips IMMER eine vertikale Liste; mobil klappt sie per Klick auf
die Sidebar-Kopfzeile (.gp-side__head) direkt darunter auf/zu, wie ein
Accordion -- siehe unten. */
.gp-chips { display:flex; flex-direction:column; gap:0; border-left:2px solid var(--line-soft); }
/* --- Ein Navigations-Element --- */
.gp-chip { display:grid; grid-template-columns:26px 1fr; align-items:baseline; gap:8px;
border:0; border-left:2px solid transparent; margin-left:-2px; border-radius:0;
background:none; padding:11px 12px 11px 14px; min-height:44px; cursor:pointer;
font-family:var(--font-body); font-weight:400; font-size:.94rem; line-height:1.25;
text-decoration:none; color:var(--ink-soft); white-space:normal;
transition:color .15s ease, border-color .15s ease; }
.gp-chip:hover { color:var(--brand); }
.gp-chip[aria-current="true"] { color:var(--ink); border-left-color:var(--brand); font-weight:700; }
.gp-chip__n { font-family:var(--font-head); font-weight:800; color:var(--sand); font-size:.82rem; grid-row:1; }
.gp-chip[aria-current="true"] .gp-chip__n { color:var(--brand); }
.gp-chip__t { text-wrap:pretty; grid-row:1; }
/* --- Hinweis: Kapitel hat Unterpunkte (Icon + Anzahl, KEIN Pfeil) ---
Ein Pfeil wuerde "klappt nur auf" suggerieren -- hier fuehrt JEDER Klick
(mit oder ohne Unterpunkte) direkt zum Kapitel; bei Unterpunkten zeigt
das Panel zusaetzlich das Accordion. Der Hinweis ist rein informativ,
keine zweite Klickflaeche. Wird von geschichte-hub.js automatisch aus
der Anzahl der Accordion-Elemente erzeugt. */
.gp-chip__sub { grid-column:2; display:flex; align-items:center; gap:5px;
font-size:.74rem; font-weight:700; color:var(--olive); margin-top:3px; }
.gp-chip__sub svg { width:13px; height:13px; flex:none; }
/* Divi-Scope-Absicherung: Divis generische Modul-CSS setzt sonst grosse
Schrift auf und unskalierte