/* * style.css – Projekt-Overrides & Komponenten (Theme diegode) * ------------------------------------------------------------------ * ZWECK: Zentraler Ort fuer alle eigenen Anpassungen an Standard-CSS * (MDBootstrap/Roboto) UND fuer die eigenen Komponenten-Klassen des * Startseiten-Designs. Das Framework selbst wird NICHT editiert. * * LADEREIHENFOLGE (Pflicht): style.css ist im Template das LETZTE * Stylesheet im – nach mdb.min.css, roboto.css, * materialdesignicons.min.css und fonts.css. * * @font-face-Deklarationen gehoeren NICHT hierher -> fonts.css. * Design-Tokens/Farben siehe _design/vorgaben/farben.md. */ /* ==== Design-Tokens ==================================================== */ :root { /* Farben */ --delta-bg: #0A0A0B; --delta-surface: #141416; --delta-surface-2: #0d0d0f; --delta-text: #F4F3F1; --delta-text-muted: #B4B0AA; --delta-text-dim: #97938E; --delta-red: #E10600; --delta-red-hover: #ff1a12; --delta-teal: #12E3C2; --delta-teal-hover: #5cf0da; --delta-border: rgba(255, 255, 255, .08); --delta-border-strong: rgba(255, 255, 255, .14); /* Typografie */ --delta-font-body: 'Barlow', system-ui, -apple-system, 'Segoe UI', sans-serif; --delta-font-display: 'Anton', 'Barlow Condensed', Impact, sans-serif; --delta-font-cond: 'Barlow Condensed', 'Barlow', sans-serif; /* Layout */ --delta-maxw: 1240px; --delta-gutter: 24px; } /* ==== Basis =========================================================== */ body { margin: 0; font-family: var(--delta-font-body); background: var(--delta-bg); color: var(--delta-text); overflow-x: clip; min-height: 100vh; } a { color: var(--delta-teal); text-decoration: none; } a:hover { color: var(--delta-teal-hover); } ::selection { background: var(--delta-red); color: #fff; } img { max-width: 100%; } .delta-container { max-width: var(--delta-maxw); margin: 0 auto; padding-left: var(--delta-gutter); padding-right: var(--delta-gutter); } /* Abschnitts-Kopf (Eyebrow + H2 + optionaler Button rechts) */ .delta-eyebrow { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .34em; font-size: 14px; color: var(--delta-teal); font-weight: 600; } .delta-h2 { font-family: var(--delta-font-display); font-weight: 400; font-size: clamp(34px, 4.4vw, 54px); margin: 0; text-transform: uppercase; line-height: 1; } .delta-section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 40px; flex-wrap: wrap; } .delta-section-head .delta-eyebrow { margin-bottom: 8px; } /* ==== Buttons ========================================================= */ .delta-btn { display: inline-block; border-radius: 100px; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 16px; transition: all .25s ease; cursor: pointer; } .delta-btn-red { background: var(--delta-red); color: #fff; padding: 15px 34px; border: 0; } .delta-btn-red:hover { background: var(--delta-red-hover); color: #fff; box-shadow: 0 12px 34px -10px rgba(225, 6, 0, .7); } .delta-btn-ghost { border: 1.5px solid rgba(255, 255, 255, .28); color: var(--delta-text); padding: 14px 30px; background: transparent; } .delta-btn-ghost:hover { border-color: var(--delta-teal); color: var(--delta-teal); } .delta-btn-sm { font-size: 15px; padding: 12px 26px; } /* ==== Ankuendigungs-Leiste (Topbar) =================================== */ .delta-topbar { position: relative; overflow: hidden; background: var(--delta-red); color: #fff; text-align: center; padding: 9px 16px; font-family: var(--delta-font-cond); font-weight: 600; letter-spacing: .16em; text-transform: uppercase; font-size: 13.5px; display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; } .delta-topbar__sheen { position: absolute; top: 0; bottom: 0; left: -140px; width: 110px; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); animation: deltaSheen 10s ease-in-out infinite; pointer-events: none; } .delta-topbar__cta { color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); padding: 2px 12px; border-radius: 100px; font-size: 12px; letter-spacing: .14em; } /* ==== Ankuendigungs-Leiste (pro Seite, CMS-Tab "Aktuell") ============= * Eingeklappt: kleines Thumbnail + Headline + "Mehr Infos"-Button, schlanke Hoehe. * Klick auf "Mehr Infos" -> .is-open: Bild waechst, Detail (Text + Link) gleitet * nach unten auf. Der Blendenfleck (Sheen) laeuft unabhaengig davon weiter. * ------------------------------------------------------------------ */ .delta-announce { position: relative; overflow: hidden; background: var(--delta-red); color: #fff; } .delta-announce__sheen { position: absolute; top: 0; bottom: 0; left: -140px; width: 110px; transform: skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .5), transparent); animation: deltaSheen 10s ease-in-out infinite; pointer-events: none; z-index: 0; } .delta-announce__inner { position: relative; z-index: 1; max-width: var(--delta-maxw); margin: 0 auto; padding: 7px var(--delta-gutter); display: flex; align-items: flex-start; gap: 14px; } .delta-announce__media { flex: 0 0 auto; width: 40px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .35); transition: width .45s cubic-bezier(.2, .75, .2, 1); } .delta-announce__media img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; } .delta-announce__content { flex: 1 1 auto; min-width: 0; } .delta-announce__top { display: flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 40px; } .delta-announce__headline { font-family: var(--delta-font-cond); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; line-height: 1.2; } .delta-announce__toggle { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 9px; background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .7); padding: 4px 15px; border-radius: 100px; font-family: var(--delta-font-cond); font-weight: 600; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .delta-announce__toggle:hover, .delta-announce__toggle:focus-visible { background: rgba(255, 255, 255, .16); border-color: #fff; } .delta-announce__chevron { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .35s cubic-bezier(.2, .75, .2, 1); } .delta-announce__detail { max-height: 0; opacity: 0; visibility: hidden; overflow: hidden; transition: max-height .45s cubic-bezier(.2, .75, .2, 1), opacity .3s ease, margin-top .45s cubic-bezier(.2, .75, .2, 1), visibility 0s linear .45s; } .delta-announce__text { margin: 0; font-family: var(--delta-font-body); font-weight: 400; font-size: 15px; line-height: 1.55; letter-spacing: 0; text-transform: none; color: rgba(255, 255, 255, .95); max-width: 68ch; } .delta-announce__cta { display: inline-block; margin-top: 12px; color: var(--delta-red); background: #fff; border-radius: 100px; padding: 8px 20px; font-family: var(--delta-font-cond); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; transition: transform .2s ease, box-shadow .2s ease; } .delta-announce__cta:hover, .delta-announce__cta:focus-visible { color: var(--delta-red); transform: translateY(-1px); box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .5); } /* ---- aufgeklappt ---- */ .delta-announce.is-open .delta-announce__media { width: 128px; } .delta-announce.is-open .delta-announce__chevron { transform: translateY(2px) rotate(-135deg); } .delta-announce.is-open .delta-announce__detail { max-height: 440px; opacity: 1; visibility: visible; margin-top: 10px; transition: max-height .45s cubic-bezier(.2, .75, .2, 1), opacity .35s ease .1s, margin-top .45s cubic-bezier(.2, .75, .2, 1), visibility 0s linear 0s; } @media (max-width: 575px) { .delta-announce.is-open .delta-announce__media { width: 96px; } .delta-announce__headline { font-size: 13px; } } @media (prefers-reduced-motion: reduce) { .delta-announce__media, .delta-announce__detail, .delta-announce__chevron { transition-duration: .001ms; } } /* ==== Header / Navigation ============================================= */ .delta-headerstack { position: fixed; top: 0; left: 0; right: 0; z-index: 60; } .delta-header { position: relative; background: rgba(10, 10, 11, .9); backdrop-filter: blur(14px); border-bottom: 1px solid var(--delta-border); } .delta-header__inner { max-width: var(--delta-maxw); margin: 0 auto; padding: 16px var(--delta-gutter); display: flex; align-items: center; justify-content: space-between; gap: 24px; transition: padding .3s ease; } .delta-logo { flex: 0 0 auto; display: flex; align-items: center; animation: deltaLogoIn .85s cubic-bezier(.2, .75, .2, 1) both; } .delta-logo img { height: 69px; width: auto; display: block; transition: height .3s ease; } /* Beim Herunterscrollen: Navigationsleiste um ~30% verkleinern (animiert). is-scrolled wird per delta.js auf .delta-headerstack gesetzt. */ .delta-headerstack.is-scrolled .delta-header__inner { padding-top: 11px; padding-bottom: 11px; } .delta-headerstack.is-scrolled .delta-logo img { height: 48px; } @media (prefers-reduced-motion: reduce) { .delta-header__inner, .delta-logo img { transition: none; } } .delta-nav { display: flex; align-items: center; gap: 26px; font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .13em; font-size: 15px; } .delta-nav a { color: #E9E7E3; } .delta-nav a:hover { color: #fff; } .delta-navlink { position: relative; } .delta-navlink::after { content: ""; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--delta-red); transition: right .25s ease; } .delta-navlink:hover::after { right: 0; } /* Aktive Seite auf der 1. Nav-Ebene: dauerhaft heller + roter Unterstrich (gleicher "current"-Status wie die Dropdown-Eintraege via aria-current). */ .delta-navlink[aria-current="page"] { color: #fff; } .delta-navlink[aria-current="page"]::after { right: 0; } .delta-nav__cta { color: #0A0A0B !important; background: var(--delta-teal); padding: 8px 16px; border-radius: 100px; font-weight: 700; } .delta-nav__cta:hover { color: #0A0A0B !important; } /* Burger */ .delta-burger { display: none; flex-direction: column; gap: 5px; background: none; border: 1px solid rgba(255, 255, 255, .16); border-radius: 10px; padding: 11px 10px; cursor: pointer; } .delta-burger span { display: block; width: 26px; height: 2.5px; background: #F4F3F1; border-radius: 3px; transition: transform .28s ease, opacity .2s ease; } .delta-burger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .delta-burger.is-open span:nth-child(2) { opacity: 0; } .delta-burger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Mobile-Panel */ .delta-mobile-panel { position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 10, 11, .98); backdrop-filter: blur(14px); border-top: 1px solid rgba(255, 255, 255, .07); box-shadow: 0 24px 40px -20px rgba(0, 0, 0, .8); /* Nie länger als der sichtbare Bereich unter dem Header – Rest scrollt im Panel. */ max-height: calc(100vh - var(--delta-header-h, 150px)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .delta-mobile-panel[hidden] { display: none; } .delta-mobile-panel__inner { max-width: var(--delta-maxw); margin: 0 auto; padding: 8px var(--delta-gutter) 22px; display: flex; flex-direction: column; } .delta-mobile-link { font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: 19px; color: #E9E7E3 !important; padding: 13px 4px; border-bottom: 1px solid rgba(255, 255, 255, .07); } .delta-mobile-link:hover, .delta-mobile-link[aria-current="page"] { color: #fff !important; } .delta-mobile-cta { margin-top: 16px; text-align: center; color: #0A0A0B !important; background: var(--delta-teal); padding: 13px 16px; border-radius: 100px; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 16px; } /* Spacer, wird per JS auf Headerhoehe gesetzt (Fallback 150px) */ .delta-header-spacer { height: 150px; } /* ==== Sektionen generisch ============================================ */ .delta-section { max-width: var(--delta-maxw); margin: 0 auto; padding: 76px var(--delta-gutter) 40px; } /* ==== Hero: naechstes Event ========================================== */ .delta-hero { position: relative; overflow: hidden; border-bottom: 1px solid var(--delta-border); background: radial-gradient(120% 100% at 80% -10%, rgba(225, 6, 0, .18), transparent 55%), var(--delta-bg); } .delta-hero__glow { position: absolute; left: 50%; top: -120px; width: 900px; height: 520px; background: radial-gradient(closest-side, rgba(225, 6, 0, .35), transparent); filter: blur(30px); animation: deltaGlow 9s ease-in-out infinite; pointer-events: none; } .delta-hero__lines, .delta-forrent__lines { position: absolute; inset: 0; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 26px); pointer-events: none; } .delta-hero__inner { position: relative; max-width: var(--delta-maxw); margin: 0 auto; padding: 64px var(--delta-gutter) 76px; } .delta-hero__flag { display: flex; align-items: center; gap: 14px; margin-bottom: 30px; } .delta-hero__dot { width: 11px; height: 11px; border-radius: 50%; background: var(--delta-red); box-shadow: 0 0 0 5px rgba(225, 6, 0, .22); animation: deltaPulse 2s ease-in-out infinite; } .delta-hero__flag-label { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .34em; font-size: 14px; color: var(--delta-teal); font-weight: 600; } .delta-hero__flag-rule { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent); } .delta-hero__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 48px; align-items: center; } .delta-hero__media { display: block; position: relative; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -40px rgba(0, 0, 0, .9); } .delta-hero__media img { width: 100%; height: 100%; max-height: 560px; object-fit: cover; display: block; } .delta-date-badge { position: absolute; left: 20px; top: 20px; display: flex; flex-direction: column; align-items: center; background: rgba(10, 10, 11, .72); backdrop-filter: blur(6px); border: 1px solid var(--delta-border-strong); border-radius: 14px; padding: 12px 18px; line-height: 1; } .delta-date-badge__dow { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--delta-red); font-weight: 700; } .delta-date-badge__day { font-family: var(--delta-font-display); font-size: 38px; margin: 2px 0; } .delta-date-badge__mon { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .18em; font-size: 13px; color: var(--delta-text-dim); } .delta-hero__kicker { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .2em; color: var(--delta-text-dim); font-size: 15px; margin-bottom: 10px; } .delta-hero__title { font-family: var(--delta-font-display); font-weight: 400; font-size: clamp(46px, 6vw, 84px); line-height: .95; letter-spacing: .01em; margin: 0 0 8px; text-transform: uppercase; } .delta-hero__title .accent { color: var(--delta-red); } .delta-hero__lead { font-size: 20px; color: #D8D5D0; margin: 0 0 26px; max-width: 34ch; } .delta-hero__facts { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } .delta-fact { display: flex; flex-direction: column; gap: 4px; padding: 12px 18px; border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; background: rgba(255, 255, 255, .02); } .delta-fact__label { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .16em; font-size: 12px; color: var(--delta-text-dim); } .delta-fact__value { font-family: var(--delta-font-display); font-size: 24px; } .delta-hero__actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ==== Event-Karten (weitere Events) ================================== */ .delta-card { display: block; height: 100%; background: var(--delta-surface); border: 1px solid rgba(255, 255, 255, .09); border-radius: 18px; overflow: hidden; transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .delta-card:hover { transform: translateY(-6px); border-color: rgba(225, 6, 0, .55); box-shadow: 0 24px 60px -24px rgba(225, 6, 0, .4); } .delta-card__media { position: relative; aspect-ratio: 16/9; overflow: hidden; } .delta-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; } .delta-card__badge { position: absolute; left: 14px; top: 14px; background: var(--delta-red); color: #fff; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 12px; padding: 5px 12px; border-radius: 100px; } .delta-card__body { padding: 22px 22px 26px; } .delta-card__date { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .18em; color: var(--delta-text-dim); font-size: 13px; margin-bottom: 8px; } .delta-card__title { font-family: var(--delta-font-display); font-weight: 400; font-size: 24px; margin: 0 0 8px; text-transform: uppercase; line-height: 1.05; } .delta-card__text { color: var(--delta-text-muted); margin: 0; font-size: 16px; } /* ==== Fotogalerie (Justified Rows) =================================== */ /* Reihen gleicher Höhe, Breite folgt dem Seitenverhältnis (flex-grow/-basis kommen inline pro Foto). Vertikal wird nichts beschnitten → Gesichter bleiben komplett; der Größen-Mix entsteht aus dem Quer-/Hochformat-Wechsel. */ .delta-gallery-just { display: flex; flex-wrap: wrap; gap: 12px; --delta-row-h: 240px; } .delta-gallery-cell { position: relative; height: var(--delta-row-h); margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--delta-border); /* flex-grow & flex-basis werden inline pro Foto gesetzt */ } .delta-gallery-link { display: block; width: 100%; height: 100%; } .delta-gallery-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s cubic-bezier(.2, .75, .2, 1); } /* letzte (unvollständige) Reihe links ausrichten statt auseinanderziehen */ .delta-gallery-just::after { content: ""; flex-grow: 9999999; } /* dezenter Akzent: leichter Zoom + Teal-Ring nur bei echtem Hover */ @media (hover: hover) { .delta-gallery-cell:hover img { transform: scale(1.05); } .delta-gallery-cell:hover { border-color: var(--delta-teal); } } /* sichtbarer Tastatur-Fokus (inset, da die Kachel overflow:hidden ist) */ .delta-gallery-link:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--delta-teal); } /* ==== For Rent / Eventlocation ======================================= */ .delta-forrent { position: relative; margin-top: 36px; border-top: 1px solid var(--delta-border); border-bottom: 1px solid var(--delta-border); background: linear-gradient(180deg, var(--delta-surface-2), var(--delta-bg)); } .delta-forrent__inner { position: relative; max-width: var(--delta-maxw); margin: 0 auto; padding: 72px var(--delta-gutter); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 52px; align-items: center; } .delta-forrent__title { font-family: var(--delta-font-display); font-weight: 400; font-size: clamp(32px, 4vw, 50px); margin: 0 0 22px; text-transform: uppercase; line-height: 1.02; } .delta-forrent__lead { color: #C7C3BD; font-size: 17px; line-height: 1.7; margin: 0 0 16px; } .delta-forrent__text { color: var(--delta-text-dim); font-size: 16px; line-height: 1.7; margin: 0 0 28px; } .delta-forrent__eyebrow { display: block; margin-bottom: 14px; } .delta-event-detail { padding-top: 40px; } /* Event-Detail: linkes Eventbild läuft beim Scrollen sticky mit (wie im Inhalt-Block). Scoped, damit der Startseiten-Hero (gleiche Klassen) unberührt bleibt. */ .delta-event-detail .delta-hero__grid { align-items: start; } .delta-event-detail .delta-hero__media { position: sticky; top: calc(var(--delta-header-h, 110px) + 18px); align-self: start; } .delta-forrent__media { position: relative; aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 90px -44px rgba(0, 0, 0, .9); } .delta-forrent__media img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ==== Footer ========================================================= */ .delta-footer { background: var(--delta-bg); padding: 60px var(--delta-gutter) 34px; } .delta-footer__inner { max-width: var(--delta-maxw); margin: 0 auto; } .delta-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--delta-border); } .delta-footer__logo { height: 52px; width: auto; margin-bottom: 16px; } .delta-footer__intro { color: #8A867F; font-size: 15px; max-width: 34ch; line-height: 1.6; margin: 0; } .delta-footer__col h4 { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .2em; font-size: 14px; color: var(--delta-text); margin: 0 0 16px; } .delta-footer__links { display: flex; flex-direction: column; gap: 10px; font-size: 15px; } .delta-footer__links a { color: var(--delta-text-dim); } .delta-footer__links a.is-accent { color: var(--delta-teal); } .delta-footer__slogan { font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 15px; color: var(--delta-text-muted); margin: 0 0 12px; } .delta-footer__intro--col { margin-top: 16px; } /* Social-Icons unter dem Logo (Spalte 1) */ .delta-footer__social { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; } .delta-footer__social-link { display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; font-size: 20px; border: 1px solid var(--delta-border-strong); color: var(--delta-text-muted); transition: color .25s ease, border-color .25s ease, background .25s ease, transform .25s ease; } .delta-footer__social-link:hover { color: #fff; border-color: var(--delta-teal); background: rgba(18, 227, 194, .12); transform: translateY(-2px); } .delta-footer__social-link .delta-social-svg { width: 20px; height: 20px; display: block; fill: currentColor; } .delta-footer__social-link .delta-social-fallback { font-size: 12px; font-weight: 600; } .delta-footer__bottom { padding-top: 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13.5px; color: #6E6A63; } /* ==== Animationen ==================================================== */ @keyframes deltaPulse { 0%, 100% { opacity: .55 } 50% { opacity: 1 } } @keyframes deltaGlow { 0%, 100% { transform: translate(-50%, 0) scale(1); opacity: .5 } 50% { transform: translate(-50%, 0) scale(1.12); opacity: .75 } } @keyframes deltaSheen { 0% { left: -140px } 20% { left: calc(100% + 40px) } 100% { left: calc(100% + 40px) } } @keyframes deltaLogoIn { from { opacity: 0; transform: translateX(-28px) } to { opacity: 1; transform: translateX(0) } } @keyframes deltaRise { from { opacity: 0; transform: translateY(20px) } to { opacity: 1; transform: translateY(0) } } .delta-rise { animation: deltaRise .8s cubic-bezier(.2, .75, .2, 1) both; } .delta-rise--delay { animation-delay: .12s; } /* ==== Responsive ===================================================== */ @media (max-width: 991px) { .delta-desktop-nav { display: none !important; } .delta-burger { display: flex !important; } .delta-logo img { height: 54px; } } @media (min-width: 992px) { .delta-mobile-panel { display: none !important; } } @media (max-width: 880px) { .delta-hero__grid, .delta-forrent__inner { grid-template-columns: 1fr; gap: 32px; } .delta-footer__grid { grid-template-columns: 1fr; gap: 28px; } .delta-event-detail .delta-hero__media { position: static; } } @media (max-width: 700px) { .delta-gallery-just { --delta-row-h: 150px; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .delta-logo, .delta-rise, .delta-hero__glow, .delta-hero__dot, .delta-topbar__sheen { animation: none !important; } .delta-gallery-cell img { transition: none; } .delta-gallery-cell:hover img { transform: none; } } /* ==== Fotogalerie: Media-Seite ======================================== * * Album-Übersicht (Karten), Album-Detail (5er-Grid), Lightbox (dunkle * Bühne) und Melden-Overlay. Baut auf dem Token-System oben auf. * -------------------------------------------------------------------- */ .delta-noscroll { overflow: hidden; } /* ---- Album-Übersicht (Block „Übersicht") ---- */ .delta-gal-albums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .delta-gal-albumcard { display: flex; flex-direction: column; background: var(--delta-surface); border: 1px solid var(--delta-border); border-radius: 18px; overflow: hidden; color: var(--delta-text); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .delta-gal-albumcard:hover { transform: translateY(-6px); border-color: rgba(225, 6, 0, .55); box-shadow: 0 24px 60px -24px rgba(225, 6, 0, .4); color: var(--delta-text); } .delta-gal-albumcard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--delta-surface-2); } .delta-gal-albumcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .delta-gal-albumcard:hover .delta-gal-albumcard__media img { transform: scale(1.05); } .delta-gal-albumcard__count { position: absolute; right: 12px; bottom: 12px; background: rgba(10, 10, 11, .74); backdrop-filter: blur(6px); border: 1px solid var(--delta-border-strong); border-radius: 100px; padding: 4px 12px; font-family: var(--delta-font-cond); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--delta-text); } .delta-gal-albumcard__body { padding: 18px 20px 22px; } .delta-gal-albumcard__kicker { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .18em; color: var(--delta-text-dim); font-size: 13px; margin-bottom: 6px; } .delta-gal-albumcard__title { font-family: var(--delta-font-display); font-weight: 400; font-size: 24px; line-height: 1.05; margin: 0; text-transform: uppercase; } /* Event-Karte in der Übersicht: rot akzentuiert, klar als Promo lesbar */ .delta-gal-albumcard--event { border-color: rgba(225, 6, 0, .4); background: linear-gradient(180deg, rgba(225, 6, 0, .12), var(--delta-surface)); } .delta-gal-albumcard--event:hover { border-color: var(--delta-red); } .delta-gal-albumcard__cta { display: inline-block; margin-top: 12px; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 13px; color: var(--delta-red); } .delta-gal-eventflag { position: absolute; left: 12px; top: 12px; background: var(--delta-red); color: #fff; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; padding: 4px 11px; border-radius: 100px; } /* ---- Album-Detail: Kopf ---- */ .delta-gal-detail__head { margin-bottom: 28px; } .delta-gal-back { display: inline-block; margin-bottom: 14px; font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .2em; font-size: 13px; color: var(--delta-text-dim); } .delta-gal-back:hover { color: var(--delta-teal); } .delta-gal-detail__title { margin: 0; } .delta-gal-detail__date { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .18em; color: var(--delta-text-dim); font-size: 14px; margin: 10px 0 0; } .delta-gal-detail__desc { color: var(--delta-text-muted); max-width: 70ch; margin-top: 14px; } /* ---- Foto-Grid: 5 nebeneinander ---- */ .delta-gal-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; } .delta-gal-cell { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 12px; border: 1px solid var(--delta-border); background: var(--delta-surface-2); cursor: pointer; } .delta-gal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; } .delta-gal-cell:hover img { transform: scale(1.07); } .delta-gal-cell__zoom { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(225, 6, 0, .28)); opacity: 0; transition: opacity .3s ease; } .delta-gal-cell:hover .delta-gal-cell__zoom { opacity: 1; } .delta-gal-cell::after { content: ""; position: absolute; left: 0; right: 100%; bottom: 0; height: 3px; background: var(--delta-red); transition: right .3s ease; } .delta-gal-cell:hover::after { right: 0; } /* Event-Kachel im Grid */ .delta-gal-cell--event { border-color: rgba(225, 6, 0, .45); } .delta-gal-cell--event::after { display: none; } .delta-gal-cell--event img { opacity: .5; } .delta-gal-cell__event { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 12px; background: linear-gradient(180deg, rgba(10, 10, 11, .1), rgba(10, 10, 11, .82)); } .delta-gal-cell__eventtitle { font-family: var(--delta-font-display); font-weight: 400; font-size: 17px; line-height: 1.05; text-transform: uppercase; color: #fff; } .delta-gal-cell__eventdate { font-family: var(--delta-font-cond); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--delta-text-muted); } /* ---- Paginierung ---- */ .delta-gal-pagination { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 34px; } .delta-gal-page { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--delta-border); border-radius: 10px; font-family: var(--delta-font-cond); font-weight: 600; font-size: 15px; color: var(--delta-text); background: var(--delta-surface); } .delta-gal-page:hover { border-color: var(--delta-teal); color: var(--delta-teal); } .delta-gal-page.is-active { background: var(--delta-red); border-color: var(--delta-red); color: #fff; } .delta-gal-page--gap { border-color: transparent; background: transparent; } /* ---- Flash / Meldungen ---- */ .delta-gal-flash { padding: 12px 18px; border-radius: 12px; margin-bottom: 22px; font-size: 15px; border: 1px solid var(--delta-border-strong); } .delta-gal-flash--good { background: rgba(18, 227, 194, .12); border-color: rgba(18, 227, 194, .5); color: #d6fff7; } .delta-gal-flash--bad, .delta-gal-flash--error, .delta-gal-flash--required { background: rgba(225, 6, 0, .14); border-color: rgba(225, 6, 0, .55); color: #ffd9d6; } /* ---- Lightbox: dunkle Bühne ---- */ .delta-lightbox { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; touch-action: pan-y; overflow: hidden; } .delta-lightbox[hidden] { display: none; } .delta-lightbox__backdrop { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 40%, rgba(225, 6, 0, .12), transparent 60%), rgba(6, 6, 7, .95); backdrop-filter: blur(4px); } .delta-lightbox__stage { position: relative; z-index: 1; margin: 0; max-width: min(92vw, 1400px); max-height: 84vh; display: flex; align-items: center; justify-content: center; } /* Swipe: touch-action muss auf den tatsächlich berührten Flächen sitzen (horizontale * Geste gehört uns), Bilder dürfen nicht per Ghost-Drag den Zeiger klauen. */ .delta-lightbox__backdrop, .delta-lightbox__stage, .delta-lightbox__img, .delta-lightbox__event, .delta-lightbox__event-cap, .delta-lightbox__event-img { touch-action: pan-y; } .delta-lightbox__img, .delta-lightbox__event-img { -webkit-user-drag: none; user-select: none; } .delta-lightbox__stage { will-change: transform; } .delta-lightbox__img { max-width: 92vw; max-height: 84vh; width: auto; height: auto; border-radius: 10px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95); border: 1px solid rgba(255, 255, 255, .08); } /* Event-Slide: wie ein Galerie-Foto, Titel/Datum aufs Bild gelegt, ganze Kachel verlinkt */ .delta-lightbox__event { position: relative; display: inline-block; line-height: 0; max-width: 92vw; } .delta-lightbox__event-img { max-width: 92vw; max-height: 84vh; width: auto; display: block; border-radius: 10px; border: 1px solid rgba(225, 6, 0, .5); box-shadow: 0 40px 120px -30px rgba(0, 0, 0, .95); } .delta-lightbox__event-cap { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 26px 22px 20px; text-align: left; line-height: 1.15; background: linear-gradient(180deg, transparent, rgba(6, 6, 7, .9)); border-radius: 0 0 10px 10px; } .delta-lightbox__event-title { font-family: var(--delta-font-display); font-weight: 400; font-size: clamp(22px, 3vw, 34px); line-height: 1.02; text-transform: uppercase; color: #fff; } .delta-lightbox__event-date { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .14em; font-size: 14px; color: var(--delta-text-muted); } .delta-lightbox__event-cta { margin-top: 4px; font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--delta-red); } .delta-lightbox__event:hover .delta-lightbox__event-cta { color: var(--delta-red-hover); } /* Bedienelemente */ .delta-lightbox__close { position: absolute; z-index: 5; top: 18px; right: 18px; width: 46px; height: 46px; border-radius: 50%; background: rgba(255, 255, 255, .08); border: 1px solid var(--delta-border-strong); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; transition: background .2s ease, border-color .2s ease; } .delta-lightbox__close:hover { background: var(--delta-red); border-color: var(--delta-red); } .delta-lightbox__nav { position: absolute; z-index: 3; top: 0; bottom: 0; width: 12%; display: flex; align-items: center; justify-content: center; background: transparent; border: 0; cursor: pointer; color: #fff; } .delta-lightbox__nav--prev { left: 0; justify-content: flex-start; padding-left: 14px; } .delta-lightbox__nav--next { right: 0; justify-content: flex-end; padding-right: 14px; } .delta-lightbox__chevron { width: 18px; height: 18px; border-left: 2.5px solid rgba(255, 255, 255, .8); border-bottom: 2.5px solid rgba(255, 255, 255, .8); transition: border-color .2s ease, transform .2s ease; } .delta-lightbox__nav--prev .delta-lightbox__chevron { transform: rotate(45deg); } .delta-lightbox__nav--next .delta-lightbox__chevron { transform: rotate(-135deg); } .delta-lightbox__nav:hover .delta-lightbox__chevron { border-color: var(--delta-red); } .delta-lightbox__bar { position: absolute; z-index: 4; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: 18px; padding: 16px 20px; flex-wrap: wrap; background: linear-gradient(0deg, rgba(6, 6, 7, .85), transparent); } .delta-lightbox__meta { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .16em; font-size: 13px; color: var(--delta-text-muted); } .delta-lightbox__counter { font-family: var(--delta-font-cond); font-size: 13px; letter-spacing: .12em; color: var(--delta-text-dim); } .delta-lightbox__report { background: transparent; border: 1px solid var(--delta-border-strong); color: var(--delta-text-muted); border-radius: 100px; padding: 6px 15px; cursor: pointer; font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; transition: color .2s ease, border-color .2s ease; } .delta-lightbox__report:hover { color: var(--delta-red); border-color: rgba(225, 6, 0, .6); } .delta-lightbox__flag { color: var(--delta-red); } /* ---- Melden-Overlay + Formulare ---- */ .delta-report { position: fixed; inset: 0; z-index: 140; display: flex; align-items: center; justify-content: center; padding: 20px; } .delta-report[hidden] { display: none; } .delta-report__backdrop { position: absolute; inset: 0; background: rgba(6, 6, 7, .8); backdrop-filter: blur(4px); } .delta-report__panel { position: relative; z-index: 1; width: 100%; max-width: 500px; max-height: 90vh; overflow-y: auto; background: var(--delta-surface); border: 1px solid var(--delta-border-strong); border-radius: 18px; padding: 30px 28px 28px; box-shadow: 0 40px 100px -30px rgba(0, 0, 0, .9); } .delta-report__close { position: absolute; top: 14px; right: 14px; width: 38px; height: 38px; border-radius: 50%; background: transparent; border: 1px solid var(--delta-border); color: var(--delta-text-muted); font-size: 22px; line-height: 1; cursor: pointer; } .delta-report__close:hover { color: #fff; border-color: var(--delta-red); } .delta-report__title { font-family: var(--delta-font-display); font-weight: 400; font-size: 26px; text-transform: uppercase; margin: 0 0 8px; } .delta-report__intro { color: var(--delta-text-muted); font-size: 15px; margin: 0 0 20px; } .delta-report-page { max-width: 560px; margin: 0 auto; } .delta-report-page__intro { color: var(--delta-text-muted); margin-bottom: 22px; } /* SS-Formularfelder in Overlay/Report-Seite */ .delta-report .field, .delta-report-page .field { margin-bottom: 16px; } .delta-report label.left, .delta-report .field > label, .delta-report-page label.left, .delta-report-page .field > label { display: block; margin-bottom: 6px; font-family: var(--delta-font-cond); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: 13px; color: var(--delta-text-muted); } .delta-report input[type="text"], .delta-report input[type="email"], .delta-report textarea, .delta-report-page input[type="text"], .delta-report-page input[type="email"], .delta-report-page textarea { width: 100%; box-sizing: border-box; background: var(--delta-surface-2); color: var(--delta-text); border: 1px solid var(--delta-border-strong); border-radius: 10px; padding: 11px 14px; font-family: var(--delta-font-body); font-size: 15px; } .delta-report input:focus, .delta-report textarea:focus, .delta-report-page input:focus, .delta-report-page textarea:focus { outline: none; border-color: var(--delta-teal); box-shadow: 0 0 0 3px rgba(18, 227, 194, .15); } .delta-report .field.checkbox, .delta-report-page .field.checkbox { display: flex; align-items: flex-start; gap: 10px; } .delta-report .field.checkbox label, .delta-report-page .field.checkbox label { margin: 0; text-transform: none; letter-spacing: 0; font-family: var(--delta-font-body); font-weight: 400; font-size: 14px; color: var(--delta-text-muted); } .delta-report .field.checkbox input, .delta-report-page .field.checkbox input { margin-top: 3px; accent-color: var(--delta-red); } .delta-report .message, .delta-report-page .message { margin: 6px 0 0; padding: 8px 12px; border-radius: 8px; font-size: 13px; background: rgba(225, 6, 0, .14); color: #ffd9d6; border: 1px solid rgba(225, 6, 0, .4); } .delta-report .btn-toolbar, .delta-report-page .btn-toolbar { margin-top: 8px; } /* ---- Lösch-Bestätigung ---- */ .delta-delete-page { max-width: 560px; margin: 0 auto; } .delta-delete-page__intro { color: var(--delta-text-muted); margin-bottom: 22px; } .delta-delete-page__card { display: flex; gap: 18px; flex-wrap: wrap; background: var(--delta-surface); border: 1px solid var(--delta-border-strong); border-radius: 16px; padding: 18px; } .delta-delete-page__thumb { flex: 0 0 160px; } .delta-delete-page__thumb img { width: 160px; height: 160px; object-fit: cover; border-radius: 12px; display: block; } .delta-delete-page__meta { flex: 1 1 220px; } .delta-delete-page__meta p { margin: 0 0 8px; color: var(--delta-text); } .delta-delete-page__label { color: var(--delta-text-dim); font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; } .delta-delete-page__actions { margin: 16px 0 10px; } .delta-delete-page__cancel { color: var(--delta-text-dim); font-size: 14px; } .delta-delete-page__cancel:hover { color: var(--delta-teal); } .delta-delete-page__done { text-align: center; padding: 30px 0; } .delta-delete-page__text { color: var(--delta-text-muted); margin: 12px 0 24px; } /* ---- Galerie: Responsive ---- */ @media (max-width: 991px) { .delta-gal-albums { grid-template-columns: repeat(2, 1fr); } .delta-gal-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .delta-gal-albums { grid-template-columns: 1fr; } .delta-gal-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; } .delta-lightbox__nav { width: 20%; } .delta-lightbox__report { flex-basis: 100%; text-align: center; } } @media (prefers-reduced-motion: reduce) { .delta-gal-albumcard, .delta-gal-albumcard__media img, .delta-gal-cell img, .delta-gal-cell__zoom, .delta-gal-cell::after { transition: none !important; } } /* ====================================================================== * * UNTERSEITEN-KOMPONENTEN * Seiten-Hero, Fließtext, Unterseiten-Kacheln, einfache Fotogalerie, * Preisliste, Navigations-Dropdown, Formular-Block (UserForms). * Baut vollständig auf dem Token-/Motiv-System oben auf (delta-*). * ====================================================================== */ /* ==== Unterseiten-Hero (Seitenkopf) ================================== */ .delta-pagehero { position: relative; overflow: hidden; border-bottom: 1px solid var(--delta-border); background: var(--delta-bg); } .delta-pagehero__bg { position: absolute; inset: 0; } .delta-pagehero__bg img { width: 100%; height: 100%; object-fit: cover; display: block; } .delta-pagehero__scrim { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 11, .5) 0%, rgba(10, 10, 11, .72) 55%, var(--delta-bg) 100%), linear-gradient(90deg, rgba(10, 10, 11, .85), rgba(10, 10, 11, .2) 72%); } .delta-pagehero__lines { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, .028) 0 2px, transparent 2px 26px); } .delta-pagehero__glow { position: absolute; right: -80px; top: -120px; width: 560px; height: 360px; background: radial-gradient(closest-side, rgba(225, 6, 0, .3), transparent); filter: blur(30px); pointer-events: none; animation: deltaGlow 9s ease-in-out infinite; } .delta-pagehero--plain { background: radial-gradient(120% 100% at 80% -10%, rgba(225, 6, 0, .18), transparent 55%), var(--delta-bg); } .delta-pagehero__inner { position: relative; max-width: var(--delta-maxw); margin: 0 auto; padding: clamp(48px, 8vh, 92px) var(--delta-gutter) clamp(40px, 6vh, 64px); min-height: clamp(240px, 38vh, 420px); display: flex; flex-direction: column; justify-content: flex-end; } .delta-pagehero__flag { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; } .delta-pagehero__dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; background: var(--delta-red); box-shadow: 0 0 0 5px rgba(225, 6, 0, .22); animation: deltaPulse 2s ease-in-out infinite; } .delta-pagehero__eyebrow { font-family: var(--delta-font-cond); text-transform: uppercase; letter-spacing: .34em; font-size: 14px; color: var(--delta-teal); font-weight: 600; } .delta-pagehero__rule { height: 1px; flex: 1; background: linear-gradient(90deg, rgba(255, 255, 255, .18), transparent); } .delta-pagehero__title { font-family: var(--delta-font-display); font-weight: 400; font-size: clamp(40px, 5.6vw, 74px); line-height: .95; letter-spacing: .01em; margin: 0; text-transform: uppercase; } .delta-pagehero__lead { margin: 18px 0 0; max-width: 58ch; color: #D8D5D0; font-size: 18px; line-height: 1.6; } /* ==== Fließtext-Block (ElementContent, Theme-Override) =============== */ .delta-richtext__grid { display: flex; align-items: flex-start; gap: 40px; } .delta-richtext__inner { max-width: 70ch; } /* Mit Bild: Text + Bild als feste 50/50-Spalten, Bild oben ausgerichtet. */ .delta-richtext--haspic .delta-richtext__inner { flex: 1 1 50%; max-width: none; } .delta-richtext__figure { flex: 0 0 50%; max-width: 50%; margin: 0; align-self: flex-start; /* Bild bleibt beim Scrollen unter dem fixierten Header sichtbar, solange links noch Text steht (--delta-header-h wird per delta.js gesetzt; Fallback ~ Headerhöhe). */ position: sticky; top: calc(var(--delta-header-h, 110px) + 18px); } .delta-richtext__figure img { display: block; width: 100%; height: auto; border-radius: 12px; } @media (max-width: 700px) { .delta-richtext__grid { flex-direction: column; gap: 24px; } .delta-richtext__figure { flex-basis: auto; max-width: 100%; position: static; } } .delta-richtext__title { margin-bottom: 24px; } .delta-richtext__inner > :first-child { margin-top: 0; } .delta-richtext__inner p { color: var(--delta-text-muted); font-size: 17px; line-height: 1.75; margin: 0 0 18px; } .delta-richtext__inner h2, .delta-richtext__inner h3, .delta-richtext__inner h4 { font-family: var(--delta-font-display); font-weight: 400; text-transform: uppercase; line-height: 1.05; margin: 36px 0 14px; color: var(--delta-text); } .delta-richtext__inner h2 { font-size: clamp(26px, 3.2vw, 38px); } .delta-richtext__inner h3 { font-size: 22px; } .delta-richtext__inner h4 { font-size: 18px; } .delta-richtext__inner a { color: var(--delta-teal); border-bottom: 1px solid rgba(18, 227, 194, .35); } .delta-richtext__inner a:hover { color: var(--delta-teal-hover); } .delta-richtext__inner ul, .delta-richtext__inner ol { color: var(--delta-text-muted); font-size: 17px; line-height: 1.7; padding-left: 1.3em; margin: 0 0 18px; } .delta-richtext__inner li { margin-bottom: 8px; } .delta-richtext__inner li::marker { color: var(--delta-red); } .delta-richtext__inner strong, .delta-richtext__inner b { color: var(--delta-text); } .delta-richtext__inner hr { border: 0; border-top: 1px solid var(--delta-border); margin: 30px 0; } .delta-richtext__inner img { border-radius: 12px; } /* Karte (GoogleMapsBlock): sitzt an Stelle der Bild-Spalte rechts, sticky wie das Bild. Das iframe wird über aspect-ratio responsiv gehalten (Google-Maps-Embeds haben feste width/height-Attribute, die hier bewusst überschrieben werden). */ .delta-richtext__map { flex: 0 0 50%; max-width: 50%; align-self: flex-start; position: sticky; top: calc(var(--delta-header-h, 110px) + 18px); } .delta-richtext__map iframe { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border: 0; border-radius: 12px; } @media (max-width: 700px) { .delta-richtext__map { flex-basis: auto; max-width: 100%; position: static; } .delta-richtext__map iframe { aspect-ratio: 3 / 2; } } /* ==== eRecht24 Rechtstext-Block (Impressum/Datenschutz) ============== */ /* Bringt eigene Sektions-Breite + Delta-Typografie mit (der Block hat kein .delta-section-Wrapper und stand sonst unformatiert oben links im Container). */ .erecht24-legal-text-element { max-width: var(--delta-maxw); margin: 0 auto; padding: clamp(48px, 8vh, 92px) var(--delta-gutter) clamp(40px, 6vh, 64px); } .erecht24-legal-text-element > * { max-width: 70ch; } .erecht24-legal-text-element > :first-child { margin-top: 0; } .erecht24-legal-text-element h1 { font-family: var(--delta-font-display); font-weight: 400; text-transform: uppercase; line-height: 1.05; color: var(--delta-text); font-size: clamp(30px, 4vw, 46px); margin: 0 0 24px; } .erecht24-legal-text-element h2, .erecht24-legal-text-element h3, .erecht24-legal-text-element h4 { font-family: var(--delta-font-display); font-weight: 400; text-transform: uppercase; line-height: 1.05; color: var(--delta-text); margin: 36px 0 14px; } .erecht24-legal-text-element h2 { font-size: clamp(24px, 3vw, 34px); } .erecht24-legal-text-element h3 { font-size: 22px; } .erecht24-legal-text-element h4 { font-size: 18px; } .erecht24-legal-text-element p, .erecht24-legal-text-element li { color: var(--delta-text-muted); font-size: 17px; line-height: 1.75; margin: 0 0 18px; } .erecht24-legal-text-element ul, .erecht24-legal-text-element ol { padding-left: 1.3em; margin: 0 0 18px; } .erecht24-legal-text-element li { margin-bottom: 8px; } .erecht24-legal-text-element li::marker { color: var(--delta-red); } .erecht24-legal-text-element a { color: var(--delta-teal); border-bottom: 1px solid rgba(18, 227, 194, .35); word-break: break-word; } .erecht24-legal-text-element a:hover { color: var(--delta-teal-hover); } .erecht24-legal-text-element strong, .erecht24-legal-text-element b { color: var(--delta-text); } .erecht24-legal-text-element hr { border: 0; border-top: 1px solid var(--delta-border); margin: 30px 0; max-width: 70ch; } /* ==== Unterseiten-Kacheln (ChildPagesBlock) ========================== */ .delta-childcards__head { margin-bottom: 34px; } .delta-childcards__intro { color: var(--delta-text-muted); font-size: 17px; line-height: 1.7; max-width: 70ch; margin: 14px 0 0; } .delta-childcards__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; } .delta-childcard { display: flex; flex-direction: column; background: var(--delta-surface); border: 1px solid var(--delta-border); border-radius: 18px; overflow: hidden; color: var(--delta-text); transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease; } .delta-childcard:hover { transform: translateY(-6px); border-color: rgba(225, 6, 0, .55); box-shadow: 0 24px 60px -24px rgba(225, 6, 0, .4); color: var(--delta-text); } .delta-childcard__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--delta-surface-2); } .delta-childcard__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s ease; } .delta-childcard:hover .delta-childcard__media img { transform: scale(1.05); } .delta-childcard__ph { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255, 255, 255, .03) 0 10px, transparent 10px 20px), var(--delta-surface); } .delta-childcard__body { padding: 18px 20px 20px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .delta-childcard__title { font-family: var(--delta-font-display); font-weight: 400; font-size: 22px; line-height: 1.05; margin: 0; text-transform: uppercase; } .delta-childcard__cta { font-family: var(--delta-font-cond); font-weight: 700; text-transform: uppercase; letter-spacing: .12em; font-size: 12px; color: var(--delta-red); flex: 0 0 auto; } /* ==== Fotogalerie einfach (SimpleGalleryBlock) ======================= */ .delta-simplegal__head { margin-bottom: 28px; } .delta-simplegal__intro { color: var(--delta-text-muted); font-size: 17px; line-height: 1.7; max-width: 70ch; margin: 12px 0 0; } .delta-simplegal__grid { grid-template-columns: repeat(4, 1fr); } /* Zellen sind