/* ======================================================================== Gartenfreunde Design System (GDS) Theme: Herbst Version: 1.1.3 GGW · feste Partikelbühne gegen Scroll-Overflow · Hero · Theme Studio Bridge 2.1 Zweck: Reine Theme-Datei für das aktuelle GDS 1.0. Enthält ausschließlich Farbwerte und gezielte visuelle Overrides für aktive GDS-Komponenten. Keine historischen Alt-Selektoren. ======================================================================== */ /* GGW HERBST V1.0.0 ----------------- Technische Header-Geometrie aus dem freigegebenen GGW-Goldstandard übernommen. Neue Herbst-Assets: - header/header-left.webp - header/header-right.webp - header/overlay.webp - decorations/autumn-branch.webp Animation: - animations/leaf-01.webp bis leaf-04.webp Mobile: Header-Assets und Animation bleiben wie vereinbart ausgeblendet. */ :root { color-scheme: light; /* Grundstimmung */ --page-1: #fffdf4; --page-2: #f1f7e7; --text: #2f3a2e; --muted: #6d715f; --accent: #d89a24; --accent-dark: #9a5a16; --accent-soft: #f7e7b4; --card: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.92) 58%, rgba(255,237,217,.84)); --border-card: rgba(109, 145, 91, .22); --shadow-soft: 0 12px 30px rgba(82, 102, 60, .10); --shadow-strong: 0 18px 42px rgba(82, 102, 60, .17); /* Herbstpalette */ --gds-autumn-leaf: #c86f32; --gds-autumn-leaf-deep: #8f4328; --gds-autumn-harvest: #e4b07b; --gds-autumn-copper: #c98a5d; --gds-autumn-rosehip: #e9a06f; --gds-autumn-mist: #ead0ad; --gds-autumn-gold: #d99a43; --gds-autumn-cream: #fff3df; /* Globale GDS-Werte */ --gds-color-primary: var(--gds-autumn-leaf); --gds-color-primary-dark: var(--gds-autumn-leaf-deep); --gds-color-surface: #fffdf7; --gds-color-text: var(--text); --gds-color-text-muted: var(--muted); --gds-text-primary: var(--text); --gds-text-secondary: var(--muted); --gds-accent: var(--gds-autumn-leaf); --gds-link: #a65f12; --gds-link-hover: #7d430d; --gds-border-soft: rgba(109, 145, 91, .22); --gds-surface-card: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.92) 58%, rgba(255,237,217,.84)); --gds-surface-muted: #f3f8e9; --gds-shadow-card: 0 12px 30px rgba(82, 102, 60, .10); --gds-shadow-card-hover: 0 20px 44px rgba(82, 102, 60, .17); --gds-shadow-sm: 0 7px 20px rgba(82, 102, 60, .09); --gds-radius-large: 18px; --gds-radius-lg: 16px; /* Buttons */ --gds-button-bg: #d89a24; --gds-button-text: #ffffff; --gds-button-primary-text: #ffffff; --gds-button-hover-bg: #b57318; --gds-button-hover-text: #ffffff; --gds-button-secondary-bg: rgba(169, 216, 197, .55); --gds-button-secondary-text: #324c37; /* Gemeinsamer Herbstkopf */ --gds-theme-head-background: url("/images/gds/themes/herbst/header/overlay.webp") center top / cover no-repeat, var(--gds-gradient-primary); --gds-hero-image: url("/images/gds/hero/herbst/hero.webp"); --gds-theme-head-left-image: url("/images/gds/themes/herbst/header/header-left.webp"); --gds-theme-head-right-image: url("/images/gds/themes/herbst/header/header-right.webp"); --gds-theme-head-left-width: clamp(250px, 19vw, 340px); --gds-theme-head-right-width: clamp(260px, 21vw, 360px); --gds-theme-head-left-height: 270px; --gds-theme-head-right-height: 280px; --gds-theme-head-left-position: left 0 top -4px; --gds-theme-head-right-position: right 0 top -8px; --gds-theme-head-left-size: contain; --gds-theme-head-right-size: contain; --gds-theme-head-decoration-opacity: .88; --gds-theme-head-decoration-filter: saturate(.94) brightness(1.04) drop-shadow(0 3px 9px rgba(85, 101, 55, .12)); /* Gemeinsamer sichtbarer Raum unter der Navigation. Entspricht auf Desktop der bisherigen Höhe der Infoleiste und hält den mittleren Herbstarrangement auch auf Inhaltsseiten vollständig sichtbar. */ --gds-theme-transition-min-height: 0px; /* Position und Bühne des mittleren Herbstarrangements. */ --gds-autumn-center-top: -4px; /* Header */ --gds-header-background: transparent; --gds-header-text: var(--gds-text); --gds-header-muted: var(--gds-text); --gds-header-accent: var(--gds-accent); --gds-header-border-color: rgba(255, 255, 255, .58); --gds-header-shadow: 0 12px 34px rgba(74, 103, 69, .10); --gds-header-tool-background: rgba(255, 255, 255, .46); --gds-header-tool-hover-background: rgba(255, 255, 255, .82); /* Navigation */ --gds-header-gradient: linear-gradient(90deg, #d9edf7 0%, #eaf5e8 42%, #e5e2f2 100%); --gds-navigation-background: transparent; --gds-navigation-text: #49372d; --gds-navigation-border-color: transparent; --gds-navigation-shadow: none; --gds-navigation-backdrop-filter: none; --gds-navigation-radius: 0; --gds-navigation-item-radius: 15px; --gds-navigation-dropdown-radius: 18px; --gds-navigation-dropdown-item-radius: 11px; --gds-navigation-dropdown-padding: 9px; --gds-navigation-dropdown-item-gap: 5px; --gds-navigation-dropdown-backdrop-filter: blur(24px) saturate(1.22); --gds-navigation-dropdown-hover-shadow: inset 0 1px 0 rgba(255,255,255,.64), 0 7px 17px rgba(82,102,60,.12); --gds-header-gradient: var(--gds-navigation-background); --gds-header-border: var(--gds-navigation-border-color); --gds-shadow-header: var(--gds-navigation-shadow); --gds-navigation-active-bg: var(--gds-gradient-primary, linear-gradient(145deg, #c46f32 0%, #9b4f28 100%)); --gds-navigation-active-text: #ffffff; --gds-navigation-active-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 8px 20px rgba(133, 91, 20, .22); --gds-navigation-hover-bg: linear-gradient(145deg, rgba(255,248,236,.94), rgba(238,199,145,.84), rgba(197,112,67,.34)); --gds-navigation-hover-text: #563729; --gds-navigation-hover-shadow: inset 0 1px 0 rgba(255,255,255,.55), 0 6px 16px rgba(82, 102, 60, .13); --gds-navigation-icon-color: #a6532d; --gds-navigation-icon-hover-color: #78361f; --gds-navigation-icon-active-color: #ffffff; --gds-navigation-dropdown-bg: linear-gradient(165deg, rgba(255,249,238,.97) 0%, rgba(244,218,178,.95) 54%, rgba(221,157,112,.92) 100%); --gds-navigation-dropdown-text: #4b3529; --gds-navigation-dropdown-border: rgba(255, 235, 205, .76); --gds-navigation-dropdown-divider: rgba(135, 72, 42, .12); --gds-navigation-dropdown-shadow: 0 24px 52px rgba(89, 48, 28, .22), 0 5px 18px rgba(132, 76, 42, .13), inset 0 1px 0 rgba(255,250,240,.82); --gds-navigation-dropdown-hover-bg: linear-gradient(135deg, rgba(255,239,207,.98), rgba(239,190,126,.88) 55%, rgba(202,111,69,.68)); --gds-navigation-dropdown-hover-text: #4a2e22; --gds-navigation-dropdown-active-bg: var(--gds-gradient-primary, linear-gradient(135deg, rgba(209,137,77,.96), rgba(171,78,44,.86))); --gds-navigation-dropdown-active-text: #fffaf2; --gds-navigation-dropdown-active-line: var(--gds-primary, #b85f32); /* Infoleiste */ --gds-infoleiste-wrapper-bg: linear-gradient(92deg, rgba(241,249,226,.90), rgba(255,250,230,.88) 52%, rgba(255,232,217,.84)); --gds-infoleiste-bg: linear-gradient(135deg, rgba(255,255,255,.88), rgba(247,250,229,.76)); --gds-infoleiste-text: #39452f; --gds-infoleiste-border: rgba(255, 255, 255, .72); --gds-infoleiste-divider: rgba(109, 145, 91, .15); --gds-infoleiste-shadow: 0 10px 26px rgba(82, 102, 60, .10), inset 0 1px 0 rgba(255,255,255,.74); --gds-infoleiste-label-bg: linear-gradient(145deg, #f5c85b 0%, #d89a24 100%); --gds-infoleiste-label-text: #ffffff; --gds-infoleiste-label-border: rgba(154, 90, 22, .26); --gds-infoleiste-label-shadow: inset 0 1px 0 rgba(255,255,255,.32), 0 12px 28px rgba(133, 91, 20, .21); --gds-infoleiste-link: #9b5812; --gds-infoleiste-link-hover: #7a410d; --gds-infoleiste-link-hover-bg: linear-gradient(135deg, #edf8e8, #fff0df); --gds-infoleiste-icon-color: #d89a24; --gds-infoleiste-icon-wichtig: #dd7d67; --gds-infoleiste-icon-termin: #cf861f; --gds-infoleiste-icon-info: #4fa5b1; --gds-infoleiste-icon-garten: #6e9b6c; --gds-infoleiste-radius: 14px; --gds-infoleiste-label-radius: 14px; --gds-infoleiste-item-hover-bg: linear-gradient(135deg, rgba(222,242,211,.76), rgba(255,229,205,.58)); /* Hero */ --gds-hero-overlay: linear-gradient(90deg, rgba(47, 58, 46, .18), rgba(47, 58, 46, .03)); /* Quickinfo */ --gds-quickinfo-background: transparent; --gds-info-card-background: rgba(255, 255, 255, .78); --gds-info-card-text: #39452f; --gds-info-card-muted: #6d715f; --gds-info-border: rgba(109, 145, 91, .20); --gds-info-shadow: 0 10px 25px rgba(82, 102, 60, .09); --gds-info-shadow-hover: 0 16px 34px rgba(82, 102, 60, .16); --gds-info-card-icon-bg: rgba(255, 255, 255, .66); --gds-info-card-icon-text: #b66b18; --gds-info-tone-1: linear-gradient(145deg, #edf8e8, #d7efc9); --gds-info-tone-2: linear-gradient(145deg, #fff0e5, #ffd2bd); --gds-info-tone-3: linear-gradient(145deg, #e8f6f7, #d6eef2); --gds-info-tone-4: linear-gradient(145deg, #fff7d9, #f5e2a8); --gds-info-tone-5: linear-gradient(145deg, #e4f2ea, #c6e5d6); --gds-info-tone-6: linear-gradient(145deg, #f3eef7, #e5dbef); --gds-info-tone-7: linear-gradient(145deg, #fff0e6, #f8d4c2); --gds-info-tone-8: linear-gradient(145deg, #f8f3d7, #f5c85b); /* Inhaltsflächen */ --gds-content-panel-background: linear-gradient(135deg, rgba(255,255,255,.96) 0%, rgba(239,248,228,.92) 55%, rgba(255,237,217,.86) 100%); --gds-content-card-background: linear-gradient(145deg, rgba(255,255,255,.97) 0%, rgba(238,248,228,.92) 64%, rgba(255,237,217,.84) 100%); --gds-content-card-border: rgba(109, 145, 91, .22); --gds-content-card-text: #34412f; --gds-content-card-muted: #6d715f; --gds-content-card-media-background: linear-gradient(145deg, #e8f5e4, #fff5da 60%, #ffe6d8); --gds-content-card-shadow: 0 12px 30px rgba(82, 102, 60, .10); --gds-content-card-shadow-hover: 0 20px 44px rgba(82, 102, 60, .17); --gds-location-detail-muted-bg: linear-gradient(180deg, #f7fbee, #e8f3dd 70%, #fff0df); /* Module M008-M010 */ --gds-m008-page-background: linear-gradient(160deg, #d6eef2 0%, #fff8dd 100%); --gds-m008-surface: linear-gradient(145deg, rgba(255,255,255,.97), rgba(238,248,228,.92) 62%, rgba(255,237,217,.84)); --gds-m008-surface-muted: linear-gradient(145deg, #e7f4e2, #fff5dc 62%, #ffe7da); --gds-m008-text: #39452f; --gds-m008-muted: #6d715f; --gds-m008-accent: #d89a24; --gds-m008-border: rgba(109, 145, 91, .22); --gds-m008-shadow: 0 14px 34px rgba(82, 102, 60, .11); --gds-m009-surface: linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.91) 60%, rgba(255,237,217,.82)); --gds-m009-text: #39452f; --gds-m009-muted: #6d715f; --gds-m009-accent: #d89a24; --gds-m009-shadow: 0 12px 30px rgba(82, 102, 60, .10); --gds-m009-shadow-hover: 0 20px 44px rgba(82, 102, 60, .17); --gds-m010-surface: linear-gradient(145deg, rgba(255,255,255,.97), rgba(238,248,228,.92) 62%, rgba(255,237,217,.84)); --gds-m010-surface-tint: #e7f4e2; --gds-m010-surface-tint-soft: #ffe7da; --gds-m010-text: #39452f; --gds-m010-muted: #6d715f; --gds-m010-accent: #d89a24; --gds-m010-border: rgba(109, 145, 91, .22); --gds-m010-focus: rgba(216, 154, 36, .24); /* Footer */ --gds-footer-background: #9b681f; --gds-footer-background-deep: #6f4816; --gds-footer-surface: rgba(255, 255, 255, .11); --gds-footer-surface-deep: rgba(255, 255, 255, .07); --gds-footer-border: rgba(238, 247, 232, .24); --gds-footer-border-color: rgba(238, 247, 232, .24); --gds-footer-text: #f7fbfe; --gds-footer-text-color: #f7fbfe; --gds-footer-muted: #f4e4bd; --gds-footer-muted-color: #f4e4bd; --gds-footer-link: #eff8db; --gds-footer-link-color: #eff8db; --gds-footer-link-hover: #ffffff; --gds-footer-link-hover-color: #ffffff; --gds-footer-icon-bg: rgba(255, 255, 255, .15); --gds-footer-icon-background: rgba(255, 255, 255, .15); --gds-footer-overlay: linear-gradient(145deg, rgba(180,126,36,.97) 0%, rgba(136,86,24,.98) 52%, rgba(91,55,14,.99) 100%); } /* ======================================================================== GDS HERBST V1.1 Header · Navigation · Dropdown · Infoleiste ======================================================================== Asset-Pfade: - /images/gds/themes/herbst/header/header-left.webp - /images/gds/themes/herbst/header/header-right.webp - /images/gds/themes/herbst/header/overlay.webp - /images/gds/themes/herbst/decorations/autumn-branch.webp Architektur: - ausschließlich themespezifische Gestaltung - keine Änderung der saisonunabhängigen Base - Dekorations-Assets bleiben nicht-interaktiv ======================================================================== */ /* GGW V2.0.5: Bildpfade für die Domain mit Joomla im Dokumentenstamm. Alle Herbst-Assets werden aus /images/gds/themes/herbst/ geladen. Geometrie und Assetpositionen gegenüber V2.0.4 unverändert. */ /* GGW V2.0.4: Desktop-Test mit optimierten V1.1 Header-Assets. Vereins-Geometrie bleibt Basis; nur Assetgrößen/-positionen und der fehlende Infoleisten-Übergangsraum wurden GGW-spezifisch angepasst. */ /* ------------------------------------------------------------------------ 01 Markenheader – Herbstlicht und warmer Blätterrahmen ------------------------------------------------------------------------ */ .gds-theme-head { background: linear-gradient(rgba(255,255,255,.10), rgba(255,255,255,.10)), url("/images/gds/themes/herbst/header/overlay.webp") center top / cover no-repeat, radial-gradient(circle at 16% 8%, rgba(255,247,194,.34), transparent 31%), radial-gradient(circle at 84% 10%, rgba(214,238,242,.24), transparent 31%), var(--gds-gradient-primary) !important; background-blend-mode: screen, normal, screen, screen, normal; } /* Die Übergangsfläche gehört zum Theme-Kopf und bleibt transparent, damit der durchgehende Herbstverlauf und die Dekorationen sichtbar bleiben. */ .gds-theme-transition { background: transparent; } .gds-brand-header { position: relative; isolation: isolate; overflow: visible; background: transparent; box-shadow: none; } .gds-brand-header > .gds-header-shell { position: relative; z-index: 1; } /* GGW V2.0.6: Markenheader auf Desktop um 72px erhöht. Ziel: Die großen V1.1-Assets erhalten ihre eigene Bühne oberhalb der Navigation und ragen nicht mehr in die Menüzeile hinein. Assetgrößen und -positionen aus V2.0.5 bleiben unverändert. */ .gds-brand-header__inner { position: relative; min-height: 210px; padding-block: 20px; padding-inline: clamp(150px, 11vw, 220px); box-sizing: border-box; } /* GGW V2.0.8: Nur vertikale Position des Mittelmotivs angepasst. top 20px -> -4px = 24px weiter nach oben und damit deutlich mehr Abstand zur Navigation. Größe, Headerhöhe und Seitenassets unverändert. */ /* GGW V2.0.7: Nur Mittelmotiv angepasst. Größer: max. 760px Breite / 240px Bühne. Höher: top 20px statt 34px, dadurch mehr Abstand zur Navigation. Seitliche Assets und Headerhöhe aus V2.0.6 unverändert. */ /* Mittlerer Herbstarrangement – offizieller Goldstandard. Architektur: - eigene Ebene am Markenheader statt am inneren Grid - dadurch unabhängig von variabler Inhaltshöhe und Seitentyp - gleiche Größe und Position auf Start- und Inhaltsseiten - sichtbare Bühne reicht bis hinter die transparente Navigation - das motivorientiert beschnittene Asset wird vollständig und proportional gezeigt */ .gds-brand-header::after { content: ""; position: absolute; z-index: 0; top: var(--gds-autumn-center-top); left: 50%; width: clamp(500px, 41vw, 760px); height: 240px; transform: translateX(-50%); pointer-events: none; background-image: url("/images/gds/themes/herbst/decorations/autumn-branch.webp"); background-position: center center; background-size: contain; background-repeat: no-repeat; opacity: .62; filter: saturate(.92) brightness(1.06) drop-shadow(0 2px 5px rgba(82,102,60,.13)); } /* Explizite Seitentyp-Regeln als stabile Schnittstelle. Aktuell bewusst identisch: Der Herbstarrangement orientiert sich nur am Markenheader, nicht an der optionalen Infoleiste der Startseite. */ .gds-theme-head--home .gds-brand-header::after, .gds-theme-head--content .gds-brand-header::after { top: var(--gds-autumn-center-top); height: 240px; } .gds-brand-header__identity, .gds-brand-header__service { position: relative; z-index: 2; } .gds-brand-header__title, .gds-brand-header__eyebrow, .gds-brand-header__claim, .gds-brand-header__service { text-shadow: 0 1px 0 rgba(255, 255, 255, .72); } .gds-font-tools__button:first-child { background: rgba(255, 255, 255, .50); border-color: rgba(216, 154, 36, .62); color: var(--gds-header-accent); box-shadow: inset 0 1px 0 rgba(255,255,255,.72); } .gds-service-link, .gds-brand-header__motto { border-radius: 10px; } .gds-service-link:hover, .gds-service-link:focus-visible { opacity: 1; background: rgba(255, 255, 255, .52); box-shadow: 0 5px 16px rgba(82, 102, 60, .10); } /* ------------------------------------------------------------------------ 02 Navigation – ruhige Herbstgestaltung ------------------------------------------------------------------------ */ #sp-header.gds-navigation-placeholder { position: relative; border: 0 !important; background: transparent !important; background-clip: border-box !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } /* Die Navigation bleibt als reine Textebene auf dem durchgehenden Theme-Kopf. */ #sp-header.gds-navigation-placeholder::before, #sp-header.gds-navigation-placeholder::after { content: none !important; display: none !important; background: none !important; border: 0 !important; box-shadow: none !important; } #sp-header.gds-navigation-placeholder > * { position: relative; z-index: 3; } /* Dropdowns müssen oberhalb der gesamten Theme-Bühne und des Heros bleiben. */ #sp-header .sp-megamenu-parent, #sp-header .sp-megamenu-parent > li, #sp-header .sp-dropdown, #sp-header .sp-dropdown-inner { position: relative; z-index: 120; } #sp-header .sp-dropdown { position: absolute; } @media (min-width: 992px) { #sp-header .sp-megamenu-parent > li > a, #sp-header .sp-megamenu-parent > li > span { color: var(--gds-navigation-text); } #sp-header .sp-megamenu-parent > li:hover > a, #sp-header .sp-megamenu-parent > li:hover > span, #sp-header .sp-megamenu-parent > li:focus-within > a, #sp-header .sp-megamenu-parent > li:focus-within > span { border: 1px solid rgba(255, 255, 255, .60) !important; } #sp-header .sp-megamenu-parent > li.active > a, #sp-header .sp-megamenu-parent > li.current > a, #sp-header .sp-megamenu-parent > li.current-item > a { border: 1px solid rgba(216, 154, 36, .22) !important; } #sp-header .sp-megamenu-parent .sp-dropdown-inner { background-clip: padding-box !important; } } /* ------------------------------------------------------------------------ 03 Infoleiste – helle, luftige Anschlussfläche ------------------------------------------------------------------------ */ .gds-infoleiste-wrapper { position: relative; overflow: hidden; border-bottom: 1px solid rgba(255, 255, 255, .52); } .gds-infoleiste-wrapper::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 10% 8%, rgba(215, 239, 201, .38), transparent 27%), radial-gradient(circle at 90% 12%, rgba(255, 210, 189, .28), transparent 28%); } .gds-infoleiste-wrapper > * { position: relative; z-index: 1; } .gds-infoleiste__items, .gds-infoleiste__link { -webkit-backdrop-filter: blur(16px) saturate(1.08); backdrop-filter: blur(16px) saturate(1.08); } .gds-infoleiste__label { position: relative; overflow: hidden; } .gds-infoleiste__label::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(120deg, rgba(255,255,255,.24), transparent 48%); } /* ------------------------------------------------------------------------ 04 Herbst-Contenttheme – ruhige Flächen, Karten und Seitenhintergrund ------------------------------------------------------------------------ */ body { background: var(--gds-gradient-background, linear-gradient(160deg, #d6eef2 0%, #fff8dd 100%)); } #sp-main-body, .gds-main-content { background: transparent !important; background-image: none !important; } .gds-main-content { color: var(--gds-content-card-text); } /* Große GDS-Inhaltsflächen erhalten Licht statt reinem Weiß. */ .gds-content-panel, .gds-page-intro, .gds-section-panel, .gds-document-center, .gds-location-overview, .gds-board-overview { background: var(--gds-content-panel-background); border-color: var(--gds-content-card-border); box-shadow: var(--gds-content-card-shadow); } /* Karten bleiben klar lesbar, tragen aber einen sehr dezenten Herbstverlauf. */ .gds-content-card, .gds-document-card, .gds-location-card, .gds-board-card, .gds-news-card, .gds-tip-card { background: var(--gds-content-card-background); border-color: var(--gds-content-card-border); box-shadow: var(--gds-content-card-shadow); } .gds-content-card:hover, .gds-document-card:hover, .gds-location-card:hover, .gds-board-card:hover, .gds-news-card:hover, .gds-tip-card:hover { box-shadow: var(--gds-content-card-shadow-hover); } /* Die tatsächliche Theme-Datei behält die Kontrolle; keine Strukturänderung. */ /* Herbst-Footer – Goldstandard: Hintergrund läuft durch, Rechtsleiste primär. */ .gds-footer-wrapper, .gds-footer, #sp-footer, #gds-m011-footer, #gds-m011-footer .gds-footer__main { background: transparent !important; background-image: none !important; border: 0 !important; box-shadow: none !important; } .gds-footer::before, #sp-footer::before { content: none !important; display: none !important; } #gds-m011-footer .gds-footer__legal { background: var(--gds-primary) !important; } /* ------------------------------------------------------------------------ 05 Responsive Schutz der Dekorationen ------------------------------------------------------------------------ */ @media (max-width: 1360px) { :root { --gds-theme-head-left-width: clamp(320px, 27vw, 430px); --gds-theme-head-right-width: clamp(370px, 30vw, 500px); --gds-theme-head-left-height: 210px; --gds-theme-head-right-height: 220px; } .gds-brand-header__inner { padding-inline: clamp(126px, 9vw, 170px); } } @media (max-width: 1200px) { :root { --gds-theme-head-left-width: 330px; --gds-theme-head-right-width: 390px; --gds-theme-head-left-height: 198px; --gds-theme-head-right-height: 210px; --gds-theme-head-decoration-opacity: .76; } .gds-brand-header__inner { min-height: 126px; padding-inline: 108px; } .gds-brand-header::after { top: -4px; width: clamp(360px, 34vw, 470px); height: 210px; opacity: .40; } } @media (max-width: 900px) { :root { --gds-theme-head-left-width: 260px; --gds-theme-head-right-width: 285px; --gds-theme-head-left-height: 176px; --gds-theme-head-right-height: 188px; --gds-theme-head-left-position: left -72px top -4px; --gds-theme-head-right-position: right -82px top -8px; --gds-theme-head-decoration-opacity: .46; } .gds-brand-header::after { display: none; } .gds-theme-head--content .gds-theme-transition { min-height: 0; } .gds-brand-header__inner { padding-inline: 62px; } } @media (max-width: 760px) { :root { --gds-theme-head-left-width: 220px; --gds-theme-head-right-width: 215px; --gds-theme-head-left-height: 160px; --gds-theme-head-right-height: 168px; --gds-theme-head-left-position: left -98px top -4px; --gds-theme-head-right-position: right -104px top -5px; --gds-theme-head-decoration-opacity: .30; } .gds-brand-header__inner { min-height: 0; padding-block: 16px; padding-inline: 18px; } } @media (max-width: 520px) { :root { --gds-theme-head-left-width: 190px; --gds-theme-head-left-height: 150px; --gds-theme-head-left-position: left -108px top -2px; --gds-theme-head-right-image: none; --gds-theme-head-decoration-opacity: .22; } } @media (prefers-reduced-transparency: reduce) { .gds-brand-header, #sp-header.gds-navigation-placeholder, .gds-infoleiste__items, .gds-infoleiste__link { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } } /* ======================================================================== HERBST V1.1 · 12 EINZELNE FALLENDE BLÄTTER Vier freigestellte Blattmotive, zwölf unabhängige Größen und Fallbahnen. Ausschließlich transform + opacity, kein JavaScript. ======================================================================== */ /* V1.1.1: Die Partikelbühne wird horizontal am Viewport begrenzt. Seitlich taumelnde Blätter dürfen dadurch keinen horizontalen Overflow und damit keinen sporadisch erscheinenden Browser-Scrollbalken erzeugen. */ /* V1.1.2: Feste, viewportgebundene Partikelbühne. Transformierte Herbstblätter bleiben vollständig außerhalb des Dokumentflusses und können weder Seitenbreite noch Seitenhöhe bzw. Scrollbars beeinflussen. */ .gds-theme-particles { display: block; position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; z-index: 1; contain: layout paint; } /* GGW Bühnenregel 1.1: Inhaltsseiten: Partikel nur innerhalb von Header + Navigation. Startseite: Die Bühne wird bis über den Hero verlängert. Unterhalb der jeweiligen Bühne bleibt der Inhalt vollständig ruhig. */ .gds-theme-head--home .gds-theme-particles { height: 100svh; max-height: 100svh; } .gds-theme-head--content .gds-theme-particles { height: 100%; } .gds-theme-particle { top: -120px; left: var(--gds-leaf-left); width: var(--gds-leaf-size); height: var(--gds-leaf-size); z-index: 1; pointer-events: none; background-position: center; background-repeat: no-repeat; background-size: contain; opacity: 0; will-change: transform, opacity; animation: gds-autumn-leaf-fall var(--gds-leaf-duration) linear var(--gds-leaf-delay) infinite; } .gds-theme-particle:nth-child(4n + 1) { background-image: url("/images/gds/themes/herbst/animations/leaf-01.webp"); } .gds-theme-particle:nth-child(4n + 2) { background-image: url("/images/gds/themes/herbst/animations/leaf-02.webp"); } .gds-theme-particle:nth-child(4n + 3) { background-image: url("/images/gds/themes/herbst/animations/leaf-03.webp"); } .gds-theme-particle:nth-child(4n) { background-image: url("/images/gds/themes/herbst/animations/leaf-04.webp"); } .gds-theme-particle:nth-child(n + 13) { display: none; } .gds-theme-particle--1 { --gds-leaf-left: 4%; --gds-leaf-size: 34px; --gds-leaf-duration: 17s; --gds-leaf-delay: -6s; --gds-leaf-drift-a: 55px; --gds-leaf-drift-b: -30px; --gds-leaf-spin: 520deg; --gds-leaf-opacity: .70; } .gds-theme-particle--2 { --gds-leaf-left: 13%; --gds-leaf-size: 48px; --gds-leaf-duration: 23s; --gds-leaf-delay: -17s; --gds-leaf-drift-a: -70px; --gds-leaf-drift-b: 42px; --gds-leaf-spin: -610deg; --gds-leaf-opacity: .82; } .gds-theme-particle--3 { --gds-leaf-left: 22%; --gds-leaf-size: 39px; --gds-leaf-duration: 20s; --gds-leaf-delay: -11s; --gds-leaf-drift-a: 64px; --gds-leaf-drift-b: -45px; --gds-leaf-spin: 470deg; --gds-leaf-opacity: .76; } .gds-theme-particle--4 { --gds-leaf-left: 31%; --gds-leaf-size: 29px; --gds-leaf-duration: 25s; --gds-leaf-delay: -21s; --gds-leaf-drift-a: -48px; --gds-leaf-drift-b: 30px; --gds-leaf-spin: -540deg; --gds-leaf-opacity: .64; } .gds-theme-particle--5 { --gds-leaf-left: 40%; --gds-leaf-size: 58px; --gds-leaf-duration: 22s; --gds-leaf-delay: -4s; --gds-leaf-drift-a: 82px; --gds-leaf-drift-b: -52px; --gds-leaf-spin: 680deg; --gds-leaf-opacity: .86; } .gds-theme-particle--6 { --gds-leaf-left: 49%; --gds-leaf-size: 36px; --gds-leaf-duration: 18s; --gds-leaf-delay: -9s; --gds-leaf-drift-a: -58px; --gds-leaf-drift-b: 38px; --gds-leaf-spin: -450deg; --gds-leaf-opacity: .72; } .gds-theme-particle--7 { --gds-leaf-left: 58%; --gds-leaf-size: 45px; --gds-leaf-duration: 24s; --gds-leaf-delay: -19s; --gds-leaf-drift-a: 70px; --gds-leaf-drift-b: -34px; --gds-leaf-spin: 590deg; --gds-leaf-opacity: .78; } .gds-theme-particle--8 { --gds-leaf-left: 67%; --gds-leaf-size: 31px; --gds-leaf-duration: 16s; --gds-leaf-delay: -2s; --gds-leaf-drift-a: -44px; --gds-leaf-drift-b: 55px; --gds-leaf-spin: -500deg; --gds-leaf-opacity: .68; } .gds-theme-particle--9 { --gds-leaf-left: 75%; --gds-leaf-size: 51px; --gds-leaf-duration: 26s; --gds-leaf-delay: -23s; --gds-leaf-drift-a: 76px; --gds-leaf-drift-b: -48px; --gds-leaf-spin: 640deg; --gds-leaf-opacity: .82; } .gds-theme-particle--10 { --gds-leaf-left: 83%; --gds-leaf-size: 27px; --gds-leaf-duration: 19s; --gds-leaf-delay: -13s; --gds-leaf-drift-a: -52px; --gds-leaf-drift-b: 26px; --gds-leaf-spin: -430deg; --gds-leaf-opacity: .62; } .gds-theme-particle--11 { --gds-leaf-left: 90%; --gds-leaf-size: 62px; --gds-leaf-duration: 25s; --gds-leaf-delay: -8s; --gds-leaf-drift-a: 60px; --gds-leaf-drift-b: -56px; --gds-leaf-spin: 720deg; --gds-leaf-opacity: .88; } .gds-theme-particle--12 { --gds-leaf-left: 96%; --gds-leaf-size: 38px; --gds-leaf-duration: 21s; --gds-leaf-delay: -16s; --gds-leaf-drift-a: -65px; --gds-leaf-drift-b: 40px; --gds-leaf-spin: -570deg; --gds-leaf-opacity: .74; } @keyframes gds-autumn-leaf-fall { 0% { transform: translate3d(0, -10vh, 0) rotate(0deg); opacity: 0; } 8% { opacity: var(--gds-leaf-opacity); } 32% { transform: translate3d(var(--gds-leaf-drift-a), 34vh, 0) rotate(calc(var(--gds-leaf-spin) * .34)); opacity: var(--gds-leaf-opacity); } 66% { transform: translate3d(var(--gds-leaf-drift-b), 72vh, 0) rotate(calc(var(--gds-leaf-spin) * .70)); opacity: var(--gds-leaf-opacity); } 92% { opacity: var(--gds-leaf-opacity); } 100% { transform: translate3d(var(--gds-leaf-drift-a), 112vh, 0) rotate(var(--gds-leaf-spin)); opacity: 0; } } @media (max-width: 900px), (prefers-reduced-motion: reduce) { .gds-theme-particles { display: none; } } /* ======================================================================== THEME STUDIO BRIDGE 2.1 Laufzeitwerte aus theme.json über die finalen GDS-Variablen. ======================================================================== */ :root { --gds-theme-head-background: url("/images/gds/themes/herbst/header/overlay.webp") center top / cover no-repeat, var(--gds-gradient-primary); --gds-hero-image: url("/images/gds/hero/herbst/hero.webp"); --gds-page-background: var(--gds-gradient-background, linear-gradient(160deg, #d6eef2 0%, #fff8dd 100%)); --gds-header-gradient: var(--gds-gradient-primary, linear-gradient(125deg, #f5c85b 0%, #8fc6a7 100%)); --gds-infoleiste-label-bg: var(--gds-gradient-primary, linear-gradient(145deg, #f5c85b 0%, #d89a24 100%)); --gds-navigation-dropdown-active-bg: var(--gds-gradient-primary, linear-gradient(135deg, #c9824d, #a84f2f)); --gds-navigation-active-bg: var(--gds-gradient-primary, linear-gradient(145deg, #c46f32 0%, #9b4f28 100%)); --card: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.92) 58%, rgba(255,237,217,.84))); --gds-surface-card: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.92) 58%, rgba(255,237,217,.84))); --gds-surface-muted: var(--gds-gradient-secondary, #f3f8e9); --gds-quickinfo-background: transparent; --gds-info-card-background: var(--gds-gradient-secondary, rgba(255, 255, 255, .78)); --gds-content-panel-background: var(--gds-gradient-secondary, linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,248,228,.92) 55%, rgba(255,237,217,.86))); --gds-content-card-background: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.97), rgba(238,248,228,.92) 64%, rgba(255,237,217,.84))); --gds-content-card-media-background: var(--gds-gradient-secondary, linear-gradient(145deg, #e8f5e4, #fff5da 60%, #ffe6d8)); --gds-location-detail-muted-bg: var(--gds-gradient-secondary, linear-gradient(180deg, #f7fbee, #e8f3dd 70%, #fff0df)); --gds-m008-page-background: var(--gds-gradient-background, linear-gradient(160deg, #d6eef2 0%, #fff8dd 100%)); --gds-m008-surface: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.97), rgba(238,248,228,.92) 62%, rgba(255,237,217,.84))); --gds-m008-surface-muted: var(--gds-gradient-secondary, linear-gradient(145deg, #e7f4e2, #fff5dc 62%, #ffe7da)); --gds-m009-surface: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.96), rgba(238,248,228,.91) 60%, rgba(255,237,217,.82))); --gds-m010-surface: var(--gds-gradient-secondary, linear-gradient(145deg, rgba(255,255,255,.97), rgba(238,248,228,.92) 62%, rgba(255,237,217,.84))); --gds-info-tone-1: linear-gradient(145deg, #edf8e8, #d7efc9); --gds-info-tone-2: linear-gradient(145deg, #fff0e5, #ffd2bd); --gds-info-tone-3: linear-gradient(145deg, #e8f6f7, #d6eef2); --gds-info-tone-4: linear-gradient(145deg, #fff7d9, #f5e2a8); --gds-info-tone-5: linear-gradient(145deg, #e4f2ea, #c6e5d6); --gds-info-tone-6: linear-gradient(145deg, #f3eef7, #e5dbef); --gds-info-tone-7: linear-gradient(145deg, #fff0e6, #f8d4c2); --gds-info-tone-8: linear-gradient(145deg, #f8f3d7, #f5c85b); --text: var(--gds-text, #2f3a2e); --gds-color-text: var(--gds-text, var(--text)); --gds-text-primary: var(--gds-text, var(--text)); --gds-header-text: var(--gds-text); --gds-infoleiste-text: var(--gds-text, #39452f); --gds-info-card-text: var(--gds-text, #39452f); --gds-content-card-text: var(--gds-text, #34412f); --gds-m008-text: var(--gds-text, #39452f); --gds-m009-text: var(--gds-text, #39452f); --gds-m010-text: var(--gds-text, #39452f); --accent: var(--gds-primary, #d89a24); --accent-dark: var(--gds-primary, #9a5a16); --gds-color-primary: var(--gds-primary, var(--gds-autumn-leaf)); --gds-link: var(--gds-primary, #a65f12); --gds-button-bg: var(--gds-primary, #d89a24); --gds-button-hover-bg: var(--gds-primary, #b57318); --gds-header-accent: var(--gds-accent); --gds-infoleiste-link: var(--gds-primary, #9b5812); --gds-navigation-icon-color: var(--gds-accent, #b66b18); --gds-infoleiste-icon-color: var(--gds-accent, #d89a24); --gds-m008-accent: var(--gds-accent, #d89a24); --gds-m009-accent: var(--gds-accent, #d89a24); --gds-m010-accent: var(--gds-accent, #d89a24); --border-card: var(--gds-theme-accent-soft, var(--accent-soft, rgba(109, 145, 91, .22))); --gds-border-soft: var(--gds-theme-accent-soft, var(--accent-soft, rgba(109, 145, 91, .22))); --gds-content-card-border: var(--gds-theme-accent-soft, var(--accent-soft, rgba(109, 145, 91, .22))); --gds-m008-border: var(--gds-theme-accent-soft, var(--accent-soft, rgba(109, 145, 91, .22))); --gds-m010-border: var(--gds-theme-accent-soft, var(--accent-soft, rgba(109, 145, 91, .22))); } /* Theme-Goldstandard: Der Seitenverlauf wird ausschließlich auf body gezeichnet. */ body { background: var(--gds-page-background) !important; } #sp-main-body, .gds-main-content { background: transparent !important; background-image: none !important; }