/* ========================================================================== Lisa Ballarin Übersetzungen – 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). Die Grundfarben stammen von der bisherigen Seite lisaballarin.com: das tiefe Indigo der Überschriften, das Magenta aus der Wellengrafik und das weisse Papier als Hintergrund. ========================================================================== */ :root { /* ── Flächen ─────────────────────────────────────────────────────────── */ --papier: #FFFFFF; --papier-soft: #F6F5FB; /* zart indigostichiges Weiss für Karten */ --papier-band: #F1F0F9; /* Bänder, die einen Abschnitt absetzen */ --footer-bg: #ECEBF6; /* ── Grundfarben (von lisaballarin.com übernommen) ───────────────────── */ --indigo: #210E9A; --indigo-dark: #170A6E; --indigo-soft: rgba(33,14,154,0.07); --magenta: #A81E63; /* 6.9:1 auf Weiss – erfüllt WCAG AA */ --magenta-dark: #8C1852; --magenta-soft: rgba(168,30,99,0.09); --azur: #4A8FD4; /* hellster Ton der Welle, nur dekorativ */ /* ── Schrift und Linien ──────────────────────────────────────────────── */ --text: #1C1B2E; --text-soft: rgba(28,27,46,0.80); --text-muted: rgba(28,27,46,0.68); /* 5.8:1 auf Weiss */ --line: rgba(33,14,154,0.16); --line-faint: rgba(33,14,154,0.08); --serif: 'Playfair Display', Georgia, 'Times New Roman', serif; --sans: 'Jost', 'Helvetica Neue', Arial, sans-serif; --nav-h: 78px; --welle: linear-gradient(90deg, var(--azur) 0%, var(--indigo) 52%, var(--magenta) 100%); } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; /* Ankersprünge dürfen nicht unter der festen Navigation landen */ scroll-padding-top: calc(var(--nav-h) + 1rem); -webkit-text-size-adjust: 100%; } body { background: var(--papier); color: var(--text); font-family: var(--sans); font-weight: 300; line-height: 1.75; 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 wirkt in der Serifenschrift unruhig */ h1, h2, h3 { hyphens: manual; -webkit-hyphens: manual; } /* Lange URLs in den Rechtstexten dürfen an beliebiger Stelle brechen */ .legal a { overflow-wrap: anywhere; } /* Sichtbarer Fokusrahmen für Tastaturbedienung (WCAG 2.4.7) */ :focus-visible { outline: 3px solid var(--magenta); 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(--indigo); color: #FFFFFF; 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; } /* ========================================================================== SPRACHUMSCHALTUNG (Deutsch / Italienisch) Jeder übersetzte Textbaustein steht zweimal im Quelltext: einmal mit der Klasse „lang-de", einmal mit „lang-it". Sichtbar ist immer nur die Fassung, die zum data-lang-Attribut am -Element passt. Wichtig: nur die *versteckte* Fassung bekommt display:none. Die sichtbare behält dadurch ihre natürliche Darstellung (inline, block, grid …). Ohne JavaScript bleibt es bei data-lang="de" – die Seite ist also auch ohne Skript vollständig lesbar. ========================================================================== */ html[data-lang="de"] .lang-it { display: none; } html[data-lang="it"] .lang-de { display: none; } /* Der Schieberegler selbst */ .lang-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; padding: 3px; border: 1px solid var(--line); border-radius: 999px; background: var(--papier-soft); cursor: pointer; /* Der Knopf ist ein