aus HTML löschen und Klasse "has-disclaimer" von entfernen. Alle Layout-Anpassungen sind in .has-disclaimer-Selektoren gekapselt. ============================= */ #disclaimer { display: none; } .has-disclaimer #disclaimer { display: flex; position: fixed; top: 0; left: 0; right: 0; height: 34px; z-index: 120; background: var(--bund-rot); color: var(--bund-weiss); align-items: center; justify-content: center; font-family: var(--bund-font-family); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.03em; gap: 0.5rem; padding: 0 1rem; } .has-disclaimer #disclaimer svg { flex-shrink: 0; } .has-disclaimer #nav-bar { top: 34px; } .has-disclaimer #site-header { top: calc(34px + var(--nav-height)); } .has-disclaimer .header-wildkatze { top: 34px; height: calc(var(--top-offset)); } .has-disclaimer #map-wrapper { top: calc(34px + var(--top-offset)); } /* ===== DESKTOP NAV-BAR (über dem Header) ===== */ #nav-bar { font-family: var(--bund-font-family); position: fixed; top: 0; left: 0; right: 0; height: var(--nav-height); background: var(--bund-weiss); z-index: 110; display: flex; align-items: center; justify-content: flex-end; padding-right: 1.5rem; } #desktop-nav { display: flex; align-items: center; height: 100%; } #desktop-nav a { color: var(--bund-text); text-decoration: none; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; padding: 0 0.9rem; height: 100%; display: flex; align-items: center; transition: background 0.2s, color 0.2s; cursor: pointer; } #desktop-nav a:hover { background: var(--bund-grau-hell); } /* ===== DESKTOP HEADER ===== */ #site-header { font-family: var(--bund-font-family); position: fixed; top: var(--nav-height); left: 0; right: 0; height: var(--header-height); z-index: 100; background: var(--bund-weiss-natur); border-bottom: 1px solid rgba(0, 0, 0, 0.12); overflow: hidden; } /* Waldbild-Hintergrund bei 50 % Deckkraft über weißem Untergrund */ /* #site-header::before { content: ''; position: absolute; inset: 0; background-image: url('../assets/rettungsnetz-wildkatze-thomas-stephan.jpg'); background-size: cover; background-position: center; opacity: 0.5; z-index: 0; } */ /* Freigestellte Wildkatze — eigenes fixed-Element, überspannt Nav-Bar + Header */ .header-wildkatze { position: fixed; left: 0%; top: 0; /* etwas größer als --top-offset damit die Ohren oben frei herausragen */ height: calc(var(--top-offset)); z-index: 115; pointer-events: none; } .header-wildkatze img { height: 100%; width: auto; display: block; } /* Titel zentriert im Header position: fixed statt absolute, damit der Aktionsbalken per z-index immer vor .header-wildkatze (z-index 115) liegt, auch wenn der Header schrumpft (z. B. Disclaimer-Zustand) — als Kind von #site-header wäre er sonst an dessen niedrigeren Stacking-Context (z-index 100) gebunden. */ .header-title { position: fixed; left: 0; right: 0; top: calc(var(--nav-height) + var(--header-height) / 2); transform: translateY(-50%); text-align: center; font-size: 1.65rem; z-index: 120; pointer-events: none; } .has-disclaimer .header-title { top: calc(34px + var(--nav-height) + var(--header-height) / 2); } .header-title .bund-aktionsbalken, .header-paws { vertical-align: middle; } /* Tatzenspur neben dem Titel-Balken */ .header-paws { position: relative; display: inline-block; width: 72px; height: 56px; margin-left: 0.75rem; } .header-paws .paw { position: absolute; width: 24px; height: auto; } .header-paws .paw-1 { left: 0; top: 10px; transform: rotate(40deg); } .header-paws .paw-2 { left: 16px; top: 45px; transform: rotate(40deg) scaleX(-1); } .header-paws .paw-3 { left: 35px; top: -13px; transform: rotate(40deg); } .header-paws .paw-4 { left: 50px; top: 24px; transform: rotate(40deg) scaleX(-1); } /* ===== BUND Aktionsbalken (Styleguide 1.4.2, S. 34-38) ===== Wiederverwendbares Gestaltungselement: abgerundeter Textbalken, Sora Bold versal mit weiter Laufweite. Farbe/Text per Modifier tauschbar. */ .bund-aktionsbalken { display: inline-block; font-family: var(--bund-font-family); font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; line-height: 1; white-space: nowrap; /* Konstruktion nach Styleguide: Balkenhöhe = Schriftgröße x 1,55, Balkenlänge = Textbreite + Balkenhöhe */ padding: 0.275em 0.775em; border-radius: 999px; background: var(--bund-gruen-hell-barrierearm); color: var(--bund-weiss); } .bund-aktionsbalken-dunkelgruen { background: var(--bund-gruen-dunkel); color: var(--bund-weiss); } .bund-aktionsbalken-weiss { background: var(--bund-weiss); color: var(--bund-gruen-dunkel); } /* Nur für besonders auffordernde/warnende Texte (Styleguide S. 36) */ .bund-aktionsbalken-rot { background: var(--bund-rot); color: var(--bund-weiss); } /* Zwischenüberschrift im Balken: Sora Bold statt ExtraBold, engere Laufweite (Spacing 20) */ .bund-aktionsbalken-zwischenueberschrift { font-weight: 700; letter-spacing: 0.02em; } /* Logo rechts */ .header-logo { position: absolute; right: 1.2rem; top: 50%; transform: translateY(-50%); z-index: 3; display: flex; align-items: center; } .header-logo img { height: calc(var(--header-height) - 20px); width: auto; display: block; } /* ===== MOBILE BURGER BAR ===== */ #mobile-bar { font-family: var(--bund-font-family); display: none; position: fixed; top: 0; left: 0; right: 0; height: var(--burger-height); background: var(--bund-weiss); z-index: 200; align-items: center; justify-content: space-between; padding: 0 1rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25); } .mobile-bar-brand { display: flex; align-items: center; gap: 0.6rem; min-width: 0; } .mobile-bar-logo { height: 38px; width: auto; display: block; flex-shrink: 0; mix-blend-mode: multiply; } #mobile-bar .site-title { color: var(--bund-gruen-dunkel); font-size: 1rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #burger-btn { background: none; border: none; cursor: pointer; padding: 6px; display: flex; flex-direction: column; gap: 5px; border-radius: 3px; transition: background 0.2s; } #burger-btn:hover { background: rgba(255, 255, 255, 0.15); } #burger-btn span { display: block; width: 26px; height: 2px; background: var(--bund-gruen-dunkel); border-radius: 2px; transition: transform 0.3s, opacity 0.3s; } #burger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } #burger-btn.open span:nth-child(2) { opacity: 0; } #burger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ===== MOBILE DROPDOWN MENU ===== */ #mobile-menu { font-family: var(--bund-font-family); display: none; position: fixed; top: var(--burger-height); left: 0; right: 0; background: var(--bund-gruen-dunkel); z-index: 199; flex-direction: column; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } #mobile-menu.open { display: flex; } #mobile-menu a { color: var(--bund-weiss); text-decoration: none; padding: 1rem 1.5rem; font-size: 1rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; border-bottom: 1px solid rgba(255, 255, 255, 0.12); transition: background 0.2s; cursor: pointer; } #mobile-menu a:hover { background: rgba(255, 255, 255, 0.1); } /* ===== MAP WRAPPER ===== */ #map-wrapper { position: fixed; top: var(--top-offset); left: 0; right: 0; bottom: 0; } #map-wrapper iframe { width: 100%; height: 100%; border: none; display: block; opacity: 0; transition: opacity 0.4s ease; } #map-wrapper iframe.loaded { opacity: 1; } /* ===== MAP LOADER (Syncfusion Spinner target) ===== */ #map-loader { position: absolute; inset: 0; background: var(--bund-gruen-dunkel); z-index: 10; transition: opacity 0.4s ease; } #map-loader.hidden { opacity: 0; pointer-events: none; } /* Syncfusion Spinner: Label-Farbe im dunkelgrünen Loader */ #map-loader .e-spinner-pane .e-spinner-inner .e-spin-label { color: rgba(255, 255, 255, 0.85); font-size: 1rem; letter-spacing: 0.04em; } #map-loader .e-spinner-pane .e-spinner-inner .e-spin-material { stroke: var(--bund-gruen-hell); } /* ===== SYNCFUSION DIALOG: BUND-Stil Overrides ===== */ .bund-dialog { font-family: var(--bund-font-family); } .bund-dialog.e-dialog .e-dlg-header-content { background: var(--bund-gruen-hell-barrierearm); padding: 0.8rem 1.2rem; } .bund-dialog.e-dialog .e-dlg-header { color: var(--bund-weiss); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; } .bund-dialog.e-dialog .e-btn .e-btn-icon.e-icon-dlg-close { color: var(--bund-weiss); } .bund-dialog.e-dialog .e-btn.e-dlg-closeicon-btn:hover { background: var(--bund-grau-hell); box-shadow: none; } .bund-dialog.e-dialog .e-dlg-content { padding: 1.5rem 1.8rem; font-family: var(--bund-font-family-text); color: var(--bund-text); font-size: 0.92rem; line-height: 1.65; overflow-y: auto; } .bund-dialog.e-dialog .e-footer-content { display: none; } /* Loading/error states inside dialog */ .modal-loading { color: var(--bund-grau-dunkel); font-style: italic; padding: 0.5rem 0; } .modal-error { color: var(--bund-rot); } /* ===== MODAL CONTENT STYLES ===== */ .impressum-content p, .hilfe-content p { margin-bottom: 0.9rem; } .impressum-content b, .hilfe-content b { color: var(--bund-gruen-hell-barrierearm); } .impressum-content a, .hilfe-content a, .foerderung-content a { color: var(--bund-gruen-hell-barrierearm); } .impressum-content a:hover, .hilfe-content a:hover { color: var(--bund-gruen-dunkel); } .hilfe-content em { font-style: italic; } .hilfe-footer { margin-top: 1.4rem; padding-top: 1rem; border-top: 1px solid var(--bund-grau-hell); } .dismiss-label { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; font-size: 0.88rem; color: var(--bund-grau-dunkel); } .dismiss-label input[type="checkbox"] { width: 15px; height: 15px; accent-color: var(--bund-gruen-hell-barrierearm); cursor: pointer; flex-shrink: 0; } /* ===== NUTZUNGSBEDINGUNGEN ===== */ .nutzungsbedingungen-content h3 { font-family: var(--bund-font-family); color: var(--bund-gruen-dunkel); font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; margin: 1.4rem 0 0.6rem; } .nutzungsbedingungen-content h3:first-child { margin-top: 0; } .nutzungsbedingungen-content ol { padding-left: 1.4rem; margin-bottom: 0.8rem; } .nutzungsbedingungen-content li { margin-bottom: 0.5rem; line-height: 1.6; } .nutzungsbedingungen-content ol[type="a"] { margin-top: 0.5rem; } .nutzungsbedingungen-content p { margin-bottom: 0.8rem; } .nutzungsbedingungen-content b { color: var(--bund-gruen-hell-barrierearm); } .nutzungsbedingungen-content a { color: var(--bund-gruen-hell-barrierearm); } .nutzungsbedingungen-content a:hover { color: var(--bund-gruen-dunkel); } /* Download-Bereich */ .download-section { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 2px solid var(--bund-gruen-hell); display: flex; flex-direction: column; gap: 1rem; } .accept-label { display: flex; align-items: flex-start; gap: 0.65rem; cursor: pointer; font-size: 0.9rem; line-height: 1.5; } .accept-label input[type="checkbox"] { flex-shrink: 0; margin-top: 0.15rem; width: 17px; height: 17px; accent-color: var(--bund-gruen-hell-barrierearm); cursor: pointer; } .download-btn { display: inline-flex; align-items: center; gap: 0.5rem; align-self: flex-start; padding: 0.55rem 1.3rem; background: var(--bund-gruen-hell-barrierearm); color: var(--bund-weiss); border: none; border-radius: 4px; font-family: inherit; font-size: 0.88rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; cursor: pointer; transition: background 0.2s; } .download-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .download-btn:not(:disabled):hover { background: var(--bund-gruen-dunkel); } .download-btn:disabled { background: var(--bund-grau-hell); color: var(--bund-grau); cursor: not-allowed; } /* ===== RESPONSIVE: MOBILE ===== */ @media (max-width: 768px) { #nav-bar { display: none; } #site-header { display: none; } .header-wildkatze { display: none; } .header-title { display: none; } #mobile-bar { display: flex; } #map-wrapper { top: var(--burger-height); } .bund-dialog.e-dialog { width: 95vw !important; max-width: 95vw !important; } }