/* ========================================================================== Grissini e Vini – gemeinsames Stylesheet für alle Seiten Die Schriften liegen in assets/fonts.css und werden im separat verlinkt (kein @import – das würde die Ladekette verlängern). ========================================================================== */ :root { --nero: #F0EAD6; --nero-soft: #E6E0CC; --footer-bg: #E4DEC8; /* Grün und Textfarben abgedunkelt, damit sie WCAG-AA (4.5:1) erfüllen */ --gruen: #3A6339; --gruen-dark: #2C4F2C; --gruen-soft: rgba(58,99,57,0.12); --rot: #8B4040; --rot-dark: #753535; --rot-soft: rgba(139,64,64,0.12); --text: #2C2A25; --text-soft: rgba(44,42,37,0.80); --text-muted: rgba(44,42,37,0.70); --line: rgba(58,99,57,0.28); --line-faint: rgba(58,99,57,0.12); --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nav-h: 72px; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { background: var(--nero); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.7; overflow-x: hidden; padding-top: var(--nav-h); -webkit-font-smoothing: antialiased; /* Lange Komposita wie „Umsatzsteuer-Identifikationsnummer" sollen auf schmalen Displays umbrechen statt überzustehen. */ overflow-wrap: break-word; hyphens: auto; -webkit-hyphens: auto; } /* Überschriften nicht trennen – das sieht in der Serifenschrift unruhig aus */ h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; } /* Lange URLs dürfen an beliebiger Stelle brechen */ .legal a, .ds-box a { overflow-wrap: anywhere; } /* Sichtbarer Fokusrahmen für Tastaturbedienung (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--rot); outline-offset: 3px; } /* Nur für Screenreader – visuell versteckt, aber vorlesbar */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Sprunglink zum Hauptinhalt – nur bei Tastaturfokus sichtbar */ .skip-link { position: absolute; left: 0.5rem; top: -100px; z-index: 10000; background: var(--gruen); color: #F0EAD6; padding: 0.75rem 1.25rem; font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; transition: top 0.2s; } .skip-link:focus { top: 0.5rem; } /* ── NAVIGATION ────────────────────────────────────────────────────────── */ nav { position: fixed; top: 0; left: 0; right: 0; z-index: 9999; height: var(--nav-h); display: flex; align-items: center; justify-content: space-between; padding: 0 2.5rem; background: rgba(240,234,214,0.97); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); } .nav-logo img { height: 46px; width: auto; display: block; } .nav-links { display: flex; gap: 0.25rem; list-style: none; align-items: center; } .nav-links a { display: block; font-size: 0.72rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding: 0.5rem 0.75rem; border-bottom: 2px solid transparent; transition: color 0.25s, border-color 0.25s; } .nav-links a:hover { color: var(--gruen); border-bottom-color: var(--gruen); } .nav-links a[aria-current="page"] { color: var(--gruen); border-bottom-color: var(--gruen); } .nav-burger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 44px; height: 44px; background: none; border: none; cursor: pointer; padding: 0; } .nav-burger span { display: block; width: 24px; height: 2px; background: var(--gruen); border-radius: 2px; transition: transform 0.3s, opacity 0.2s; } .nav-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== HINWEISBAND (Nachrichtenticker) Liegt fest unter der Navigation. Die Seite, die es einbindet, bekommt zusätzlich die Klasse „has-banner" am , damit der Inhalt nach unten rückt. Zum Entfernen: