/* --------------------------------------------------------------- madelana.net — eigene Anpassungen zum Elternthema Quark2 --------------------------------------------------------------- */ :root { --md-gruen: #005828; --md-gelb: #F8D028; --md-rot: #A00810; --md-papier: #F8F8F0; } /* --- Logo im Kopfbereich --------------------------------------- */ .madelana-brand { display: inline-flex; align-items: center; /* Luft über und unter dem Logo. Die Leiste wächst entsprechend mit, sie hat nur eine Mindesthöhe. */ padding-block: 10px; } /* Zwei Fallen stecken hier drin. Erstens: Das Elternthema setzt `.navbar-brand img { height: 28px }` — eine feste Höhe, kein Höchstwert. Dieser Selektor wiegt schwerer als eine Regel auf die eigene Klasse allein, weil er Klasse und Element verbindet. Ohne `.navbar-brand` im eigenen Selektor bleibt das Logo bei 28 Pixeln, egal was hier steht. Zweitens: Das Logo ist 2,93:1 breit. Bei 100 Pixel Höhe braucht es 293 Pixel Breite. Liegt die Breitengrenze darunter, deckelt sie die Höhe und der eingestellte Wert wird nie erreicht. Die Leiste selbst hat nur eine Mindesthöhe von 60 Pixeln und wächst deshalb mit. */ .navbar-brand img.madelana-logo, .madelana-logo { display: block; height: auto; width: auto; max-height: 100px; max-width: min(340px, 70vw); } @media (max-width: 640px) { .navbar-brand img.madelana-logo, .madelana-logo { max-height: 72px; max-width: min(240px, 66vw); } } /* Standard: helle Darstellung, also das Logo mit grünen Konturen. Die dunkle Fassung ist ausgeblendet, bis ein dunkles Schema greift. */ .madelana-logo--dunkel { display: none; } /* Wenn der Betrachter das System auf dunkel stellt und das Theme dem folgt */ @media (prefers-color-scheme: dark) { :root[data-theme-default='auto']:not([data-theme='light']) .madelana-logo--hell { display: none; } :root[data-theme-default='auto']:not([data-theme='light']) .madelana-logo--dunkel { display: block; } } /* Ausdrückliche Wahl über den Umschalter im Theme schlägt alles andere */ :root[data-theme='dark'] .madelana-logo--hell { display: none; } :root[data-theme='dark'] .madelana-logo--dunkel { display: block; } :root[data-theme='light'] .madelana-logo--hell { display: block; } :root[data-theme='light'] .madelana-logo--dunkel { display: none; } /* --- Markenfarben ---------------------------------------------- */ /* Auszeichnungen in den Farben des Emblems statt im Theme-Standard */ mark, .md-hervorhebung { background: color-mix(in oklab, var(--md-gelb) 55%, transparent); color: inherit; padding: 0.05em 0.25em; border-radius: 0.2em; } /* =============================================================== Ergänzungen vom 2026-07-27 — Typografie und Farbwelt Alle Kontrastwerte sind gegen die tatsächlichen Hintergrund- farben des Themes gerechnet, nicht geschätzt. =============================================================== */ /* --- Schrift für Überschriften ----------------------------------- Ersetzt Cal Sans aus dem Elternthema. Cal Sans liegt nur in einer Stärke vor, das Theme verlangt aber 700 für die zweite Über- schriftenebene und 600 für alle weiteren. Der Browser verfettet also künstlich, was bei Buchstaben mit Akzent verschmiert — und davon gibt es auf dieser Seite reichlich. Google Sans Flex deckt als variable Schrift den gesamten Bereich von 100 bis 900 in einer Datei ab, alle Stärken sind echt gezeichnet. Lizenz OFL, damit auch geschäftlich nutzbar. Beide Dateien liegen im Child-Theme, nichts wird von Google nachgeladen — gleiche Linie wie bei Font Awesome. Die Unterteilung in zwei Dateien stammt von Google: Der zweite Satz enthält die selteneren Zeichen und wird nur geladen, wenn die Seite welche verwendet. */ @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/google-sans-flex/google-sans-flex-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Google Sans Flex'; font-style: normal; font-weight: 100 900; font-display: swap; src: url('../fonts/google-sans-flex/google-sans-flex-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* Das Theme setzt diese Variable in der Liste ":root, :root[data-theme=light]". Ein einfaches :root verliert deshalb im hellen Modus — die gleiche Selektorliste ist nötig, damit der Wert greift. */ :root, :root[data-theme='light'], :root[data-theme='dark'] { --pico-font-family-display: 'Google Sans Flex', 'Inter', sans-serif; } /* --- Lautschrift ------------------------------------------------ Keine der geprüften Überschriftenschriften enthält Lautschrift- zeichen: Google Sans Flex fehlen 13 der 14 geprüften, Cal Sans ebenso. Darunter ɐ, ɨ, ʃ, ʒ, ɾ und ʁ — also genau die Laute, die europäisches Portugiesisch ausmachen. Inter deckt sie vollständig ab und ist als Fließtextschrift ohnehin geladen. Diese Regel erzwingt sie für Lautschrift, auch innerhalb von Überschriften: Eine direkte Regel am Element schlägt die Vererbung vom Elternelement. Ohne das bricht der Browser mitten im Wort auf eine beliebige Systemschrift um. */ .lautschrift { font-family: 'Inter', sans-serif; font-weight: 400; font-style: normal; font-feature-settings: normal; /* Stilsets des Fließtexts stören die Lautzeichen */ letter-spacing: 0; color: var(--q2-text-muted); white-space: nowrap; } /* In Überschriften zurücknehmen, sonst drängt sich die Lautschrift vor das Wort, um das es geht. */ :is(h1, h2, h3, h4, h5, h6) .lautschrift { font-size: 0.78em; font-weight: 400; letter-spacing: 0; } /* --- Papierton für den hellen Modus ------------------------------ Das Elternthema liefert ein kühles Grau. Zum Emblem mit Grün, Gelb und Rot passt ein warmer Ton besser — helles Grau mit Braunanteil, gerechnet im OKLab-Farbraum bei gleichbleibender Helligkeit. Gemessen auf dem neuen Grund: Fließtext 14,41:1, Markengrün 8,04:1, Markenrot 7,69:1. Alle deutlich über den Anforderungen. Auch hier gilt: Das Theme setzt diese Werte in der Selektorliste ":root, :root[data-theme=light]". Der dunkle Modus bleibt außen vor, sonst würde der Hintergrund dort mit überschrieben. */ :root, :root[data-theme='light'] { --q2-bg: #FFF5EA; /* Seitenfläche */ --q2-bg-elev: #FEFAF5; /* Karten und erhöhte Flächen */ --q2-bg-muted: #F9ECDD; /* vertiefte Flächen */ /* Die Navigationsleiste liegt halbdurchsichtig über dem Inhalt. Reines Weiß wirkt darauf kühl, deshalb angeglichen. */ --q2-nav-bg: rgba(255, 250, 243, 0.82); } /* --- Kontrast im dunklen Modus ----------------------------------- Quark2 hellt das Markengrün für den dunklen Modus um 20 Prozent (Akzent) beziehungsweise 25 Prozent (Links) auf. Gegen den tatsächlichen Hintergrund #08090b ergibt das gemessen 3,82:1 und 4,32:1. Die Barrierefreiheitsrichtlinie verlangt für Fließtext 4,5:1 — beide Werte liegen darunter. Mit 35 Prozent Weiß sind es 5,46:1. Der helle Modus bleibt unangetastet, dort erreicht das Grün bereits 8,04:1. Diese Datei wird nach dem Inline-Block des Themes geladen, dieselbe Spezifität genügt deshalb. */ :root[data-theme='dark'] { --q2-accent: color-mix(in oklab, var(--md-gruen) 65%, white 35%); --q2-link: color-mix(in oklab, var(--md-gruen) 65%, white 35%); } /* --- Hervorhebung im dunklen Modus ------------------------------- Gelb mit halber Deckkraft auf fast schwarzem Grund ergibt ein stumpfes Oliv, auf dem der helle Textton schlecht steht. Volles Gelb mit dunklem Text darauf erreicht dagegen 11,64:1. */ :root[data-theme='dark'] mark, :root[data-theme='dark'] .md-hervorhebung { background: color-mix(in oklab, var(--md-gelb) 88%, transparent); color: #1A1A1A; } /* --- Hinweisblöcke in Markenfarben ------------------------------- Das Plugin für Hinweisblöcke bringt die Farbpalette von GitHub mit. Zwei davon lassen sich ohne Verlust an Verständlichkeit auf die eigenen Farben umstellen — Tipp auf Markengrün, Achtung auf Markenrot. Damit trägt die Marke Bedeutung, statt nur im Logo zu stecken. Blau, Violett und Orange bleiben unverändert, sie sind als Signalfarben eingeführt und hier nicht besetzt. Geschrieben wird das im Markdown weiterhin als > [!TIP] beziehungsweise > [!CAUTION] Im dunklen Modus aufgehellt: Grün 5,46:1, Rot 5,04:1. Ohne Aufhellung käme Rot dort auf 2,17:1. */ .markdown-alert-tip { --alert-accent: var(--md-gruen); } .markdown-alert-caution { --alert-accent: var(--md-rot); } :root[data-theme='dark'] .markdown-alert-tip { --alert-accent: color-mix(in oklab, var(--md-gruen) 65%, white 35%); } :root[data-theme='dark'] .markdown-alert-caution { --alert-accent: color-mix(in oklab, var(--md-rot) 70%, white 30%); } /* --- Beispielsätze ----------------------------------------------- Vorschlag, noch nicht mit dem Inhaltsplan abgestimmt: ein Muster für portugiesischen Beispielsatz samt Übersetzung. Anwendung im Markdown als HTML-Block:

Não faço ideia. [nɐ̃w̃ ˈfasu iˈðɐjɐ] Keine Ahnung.

*/ .beispiel { border-inline-start: 3px solid var(--q2-accent); padding: 0.1rem 0 0.1rem 1rem; margin: 1.4rem 0; } .beispiel .pt { display: block; font-size: 1.0625rem; color: var(--q2-text); } .beispiel .lautschrift { display: block; margin-top: 0.15rem; } .beispiel .de { display: block; margin-top: 0.3rem; font-size: 0.9375rem; color: var(--q2-text-muted); } /* =============================================================== Inhaltsfläche — Ergänzung vom 2026-07-28 =============================================================== */ /* --- Eigener Hintergrund für den Inhaltsbereich ------------------- Das Elternthema füllt #body-wrapper mit var(--q2-bg), also der allgemeinen Seitenfläche. Hier steht stattdessen ein eigener Ton, damit sich der Inhalt von Kopf- und Fußbereich absetzt. Die Textfarben werden mitgeführt, weil der neue Grund deutlich dunkler ist als der bisherige. Alle Werte sind gegen die tatsächlichen Farben gerechnet, nicht geschätzt: hell #C7D4E2 Fließtext #242424 10,25:1 AAA Markengrün 4,83:1 AA Markenrot 4,62:1 AA gedämpfter Text alt 1,95:1 unbrauchbar gedämpfter Text neu 4,57:1 AA dunkel #2C3742 Fließtext #f2f2f3 11,03:1 AAA Grün wie bisher 2,88:1 unbrauchbar Grün neu gemischt 4,60:1 AA gedämpfter Text alt 3,75:1 zu wenig gedämpfter Text neu 4,54:1 AA Die Anpassungen gelten ausdrücklich nur innerhalb von #body-wrapper. Kopfbereich, Fußbereich und alle anderen Flächen behalten die Werte des Themes. */ #body-wrapper { position: relative; background: #DBE8E8; --q2-text-muted: #4F4F4F; /* Stärke des Kachelmusters. An dieser einen Stelle regelbar. */ --md-kachel-deckkraft: 0.09; } /* Azulejo-Kachel über der Grundfarbe. Als eigene Ebene und nicht als background-image, weil sich die Stärke sonst nur über die Farben im SVG steuern ließe. So genügt ein Wert. fixed statt absolute: Das Muster bleibt beim Scrollen stehen, sonst wandert es mit und wirkt unruhig — genau das war nicht gewollt. */ #body-wrapper::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: url('../images/azulejo2.svg'); background-repeat: repeat; background-size: 160px 160px; opacity: var(--md-kachel-deckkraft); } /* Der Inhalt gehört über die Kachel. Ohne diese Zeile läge das Muster über Text und Karten. */ #body-wrapper > * { position: relative; z-index: 1; } @media (prefers-reduced-motion: no-preference) { /* nichts zu tun — das Muster bewegt sich nicht */ } /* Dunkles Schema über die Systemeinstellung, wenn das Theme ihr folgt */ @media (prefers-color-scheme: dark) { :root[data-theme-default='auto']:not([data-theme='light']) #body-wrapper { background: #28383A; --md-kachel-deckkraft: 0.06; --q2-text-muted: #AAAAB0; --q2-accent: color-mix(in oklab, var(--md-gruen) 44%, white 56%); --q2-link: color-mix(in oklab, var(--md-gruen) 44%, white 56%); } } /* Ausdrückliche Wahl über den Umschalter schlägt die Systemeinstellung */ :root[data-theme='dark'] #body-wrapper { background: #28383A; /* Auf dunklem Grund treten die Linien stärker hervor — deshalb hier deutlich zurückgenommen. */ --md-kachel-deckkraft: 0.06; --q2-text-muted: #AAAAB0; --q2-accent: color-mix(in oklab, var(--md-gruen) 44%, white 56%); --q2-link: color-mix(in oklab, var(--md-gruen) 44%, white 56%); } :root[data-theme='light'] #body-wrapper { background: #DBE8E8; --q2-text-muted: #4F4F4F; } /* =============================================================== Fußbereich — vier Spalten =============================================================== */ .madelana-footer__raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; } @media (max-width: 900px) { .madelana-footer__raster { grid-template-columns: repeat(2, 1fr); row-gap: 2.5rem; } } @media (max-width: 560px) { .madelana-footer__raster { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* Alle Spalten beginnen auf gleicher Höhe und stehen linksbündig. Ohne das richtet jede Spalte sich nach ihrem eigenen Inhalt und der Fußbereich wirkt unruhig. */ .madelana-footer__spalte { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; text-align: left; margin: 0; } @media (max-width: 560px) { .madelana-footer__spalte { align-items: center; text-align: center; } } /* Pico setzt die Aufzählungszeichen mit "ul li { list-style: square }" am Listeneintrag, nicht an der Liste. Eine Regel an der ul allein greift deshalb nicht — daher beide Ebenen und der Marker dazu. Ebenso müssen die Abstände zurückgesetzt werden, sonst schlagen Picos Typografieabstände durch und die Einträge stehen weit auseinander. */ .madelana-footer ul, .madelana-footer ul li { list-style: none; margin: 0; padding: 0; } .madelana-footer ul li::marker { content: ""; } /* --- Spalte 1: Marke --- */ .madelana-footer__logo { display: block; width: auto; height: auto; max-width: 190px; } .madelana-footer__logo--dunkel { display: none; } @media (prefers-color-scheme: dark) { :root[data-theme-default='auto']:not([data-theme='light']) .madelana-footer__logo--hell { display: none; } :root[data-theme-default='auto']:not([data-theme='light']) .madelana-footer__logo--dunkel { display: block; } } :root[data-theme='dark'] .madelana-footer__logo--hell { display: none; } :root[data-theme='dark'] .madelana-footer__logo--dunkel { display: block; } :root[data-theme='light'] .madelana-footer__logo--hell { display: block; } :root[data-theme='light'] .madelana-footer__logo--dunkel { display: none; } /* --- Spalte 2: Rechtstexte --- */ .madelana-footer__liste { display: flex; flex-direction: column; gap: 0.7rem; } .madelana-footer__liste a { text-decoration: none; color: var(--q2-text); line-height: 1.3; } .madelana-footer__liste a:hover, .madelana-footer__liste a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } /* --- Spalte 3: Soziale Kanäle --- */ .madelana-footer__kanaele { display: flex; flex-wrap: wrap; gap: 0.7rem; } .madelana-footer__kanaele a { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; border: 1px solid var(--q2-border-strong); color: var(--q2-text); font-size: 1.45rem; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .madelana-footer__kanaele a:hover, .madelana-footer__kanaele a:focus-visible { background: var(--md-gruen); border-color: var(--md-gruen); color: #FFF5EA; } :root[data-theme='dark'] .madelana-footer__kanaele a:hover, :root[data-theme='dark'] .madelana-footer__kanaele a:focus-visible { background: var(--q2-accent); border-color: var(--q2-accent); color: #1A1A1A; } /* --- Spalte 4: Sprung nach oben --- */ .madelana-footer__hoch { align-items: flex-end; } @media (max-width: 900px) { .madelana-footer__hoch { align-items: flex-start; } } @media (max-width: 560px) { .madelana-footer__hoch { align-items: center; } } .madelana-footer__hochlink { display: flex; flex-direction: column; align-items: center; gap: 0.1rem; text-decoration: none; color: var(--q2-text); line-height: 1; } .madelana-footer__hochlink i { font-size: 3.25rem; line-height: 1; transition: transform 0.18s ease, color 0.18s ease; } .madelana-footer__hochlink:hover i, .madelana-footer__hochlink:focus-visible i { transform: translateY(-0.18rem); color: var(--q2-accent); } .madelana-footer__hochtext { font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--q2-text-muted); } @media (prefers-reduced-motion: reduce) { .madelana-footer__hochlink i { transition: none; } .madelana-footer__hochlink:hover i, .madelana-footer__hochlink:focus-visible i { transform: none; } } /* --- Abschlusszeile --- */ /* Zwei waagerechte Linien fielen weg: die eine setzt das Elternthema an #footer, die andere stand über der Abschlusszeile. Der Wechsel der Hintergrundfarbe trennt die Bereiche bereits deutlich genug. */ #footer { border-top: none; } .madelana-footer__zeile { margin: clamp(1.5rem, 4vw, 2.5rem) 0 0; padding-top: 1.25rem; border-top: none; font-size: 0.8125rem; color: var(--q2-text-muted); } /* --- Tastaturbedienung im Fußbereich --- Das Elternthema zeichnet den Fokus nur an Schaltflächen aus. */ .madelana-footer a:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 3px; border-radius: 3px; } /* =============================================================== Breiten und Seitenspalte — 2026-07-28 =============================================================== */ /* --- Neue Grundbreiten ------------------------------------------- Vorgabe: Container 1400, Inhaltskarte 900. Das Elternthema liefert 1200 und 960. Rechnung für die Seitenspalte: 1400 Container - 64 Innenabstand (2 rem je Seite) = 1336 nutzbar - 900 Inhalt - 300 Seitenspalte - 40 Abstand dazwischen = 96 Rest, also 48 je Seite */ .container { max-width: 1400px; } #body-wrapper > .container > .content-item { max-width: 900px; } /* --- Raster mit Seitenspalte -------------------------------------- Im Markup steht der Inhalt vorn, die Spalte dahinter. Hier werden sie über Zeile und Spalte getauscht, sodass die Liste links erscheint, ohne die Reihenfolge für Vorleseprogramme zu verdrehen. Der Kartenselektor des Themes greift hier nicht mehr, weil er ein direktes Kind des Containers verlangt und nun das Raster dazwischenliegt. Die Kartenoptik wird deshalb erneut gesetzt. */ .vokabel-layout { display: grid; grid-template-columns: 300px minmax(0, 900px); gap: 2.5rem; justify-content: center; align-items: start; } .vokabel-layout > .content-item { grid-column: 2; grid-row: 1; max-width: 900px; margin-inline: 0; background: var(--q2-bg-elev); border-radius: var(--q2-radius-lg); padding: clamp(1.75rem, 4vw, 3rem) clamp(1.5rem, 4vw, 3.25rem); box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.04) 0 8px 24px -8px; } .vokabel-layout > .content-item > :first-child { margin-top: 0; } .vokabel-layout > .content-item > :last-child { margin-bottom: 0; } :root[data-theme='dark'] .vokabel-layout > .content-item { box-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px, rgba(0, 0, 0, 0.45) 0 10px 30px -10px; } .vokabel-seitenspalte { grid-column: 1; grid-row: 1; /* Bleibt beim Scrollen stehen, solange die Liste kürzer ist als das Fenster. Der Abstand hält sie unter der Kopfleiste. */ position: sticky; top: 6rem; } /* Zwischenstufe: Unter 1310 Pixeln passen 900 und 300 nebeneinander nicht mehr in den Container. Statt die Spalte sofort nach unten zu werfen, geben hier beide etwas nach — die Liste bleibt damit auf normalen Notebooks sichtbar. */ @media (max-width: 1310px) { .vokabel-layout { grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; } } /* Ab hier untereinander: Inhalt zuerst, Liste darunter. */ @media (max-width: 900px) { .vokabel-layout { grid-template-columns: minmax(0, 1fr); gap: 2rem; } .vokabel-layout > .content-item { grid-column: 1; grid-row: 1; } .vokabel-seitenspalte { grid-column: 1; grid-row: 2; position: static; } } /* --- Die Liste selbst --- */ .vokabelliste { background: var(--q2-bg-elev); border-radius: var(--q2-radius-lg); padding: 1.5rem 1.4rem; box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.04) 0 8px 24px -8px; } :root[data-theme='dark'] .vokabelliste { box-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px, rgba(0, 0, 0, 0.45) 0 10px 30px -10px; } .vokabelliste__titel { font-size: 1.0625rem; margin: 0 0 1rem; } /* Das Theme hängt an jede h2 einen kurzen Balken. In der Seitenspalte stört er. */ .vokabelliste__titel::before { content: none; } .vokabelliste__titel a { color: var(--q2-text-strong); text-decoration: none; } .vokabelliste__titel a:hover, .vokabelliste__titel a:focus-visible { text-decoration: underline; text-underline-offset: 0.25em; } /* Pico setzt die Aufzählungszeichen am Eintrag, nicht an der Liste. Beide Ebenen ansprechen, sonst bleiben die Punkte stehen. */ .vokabelliste__eintraege, .vokabelliste__eintraege li { list-style: none; margin: 0; padding: 0; } .vokabelliste__eintraege li::marker { content: ""; } .vokabelliste__eintraege { display: flex; flex-direction: column; gap: 0.15rem; } .vokabelliste__eintraege a, .vokabelliste__aktuell { display: block; padding: 0.5rem 0.7rem; border-radius: 0.4rem; font-size: 0.9375rem; line-height: 1.35; text-decoration: none; color: var(--q2-text); } .vokabelliste__eintraege a:hover, .vokabelliste__eintraege a:focus-visible { background: var(--q2-bg-muted); color: var(--q2-text-strong); } /* Die gerade geöffnete Seite ist kein Verweis, sondern eine Marke. */ .vokabelliste__aktuell { background: color-mix(in oklab, var(--q2-accent) 14%, transparent); color: var(--q2-text-strong); font-weight: 600; box-shadow: inset 3px 0 0 var(--q2-accent); } .vokabelliste a:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 2px; } /* =============================================================== Übersicht der Wortseiten — Kartenraster =============================================================== */ /* Der Einleitungstext bleibt schmal. Fließtext über die vollen 1400 Pixel wäre unlesbar — das Auge verliert beim Zeilenwechsel den Anschluss. Die Karten darunter nutzen die ganze Breite. */ .vokabel-uebersicht__kopf { max-width: 68ch; margin-bottom: clamp(2rem, 4vw, 3rem); } .vokabel-uebersicht__kopf > :first-child { margin-top: 0; } .vokabelkarten { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; } /* Pico setzt die Aufzählungszeichen am Eintrag, nicht an der Liste. */ .vokabelkarten li { list-style: none; margin: 0; padding: 0; } .vokabelkarten li::marker { content: ""; } @media (max-width: 1200px) { .vokabelkarten { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 860px) { .vokabelkarten { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .vokabelkarten { grid-template-columns: minmax(0, 1fr); } } /* --- Die einzelne Karte --- */ .vokabelkarte { display: flex; flex-direction: column; background: var(--q2-bg-elev); border-radius: var(--q2-radius-lg); overflow: hidden; box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.04) 0 8px 24px -8px; transition: transform 0.18s ease, box-shadow 0.18s ease; } .vokabelkarte:hover, .vokabelkarte:focus-within { transform: translateY(-3px); box-shadow: rgba(19, 19, 22, 0.06) 0 2px 4px, rgba(19, 19, 22, 0.10) 0 14px 32px -10px; } :root[data-theme='dark'] .vokabelkarte { box-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px, rgba(0, 0, 0, 0.45) 0 10px 30px -10px; } @media (prefers-reduced-motion: reduce) { .vokabelkarte, .vokabelkarte:hover, .vokabelkarte:focus-within { transition: none; transform: none; } } /* Kein festes Seitenverhältnis: Die Höhe folgt dem Bild. Damit wird weder etwas abgeschnitten noch bleibt Fläche übrig, die aufgefüllt werden müsste. Nebenwirkung: Bilder mit unterschiedlichem Seitenverhältnis machen die Karten unterschiedlich hoch. Solange alle Titelbilder im selben Format angelegt werden, bleibt das Raster ruhig. */ .vokabelkarte__bild { overflow: hidden; line-height: 0; } .vokabelkarte__bild img, .vokabelkarte__abbildung { display: block; width: 100%; height: auto; } .vokabelkarte__text { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.1rem 1.2rem 1.3rem; /* Wächst mit, damit die Schaltfläche in jeder Karte unten sitzt. */ flex: 1 1 auto; } .vokabelkarte__titel { font-size: 1.125rem; line-height: 1.3; margin: 0; } /* Das Theme hängt an jede h2 einen kurzen Balken — auf Karten stört er. */ .vokabelkarte__titel::before { content: none; } .vokabelkarte__titel a { color: var(--q2-text-strong); text-decoration: none; } .vokabelkarte__titel a:hover, .vokabelkarte__titel a:focus-visible { text-decoration: underline; text-underline-offset: 0.2em; } /* Genau drei Zeilen. Längere Beschreibungen werden abgeschnitten, damit die Karten einer Reihe gleich hoch bleiben. */ .vokabelkarte__beschreibung { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--q2-text-muted); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .vokabelkarte__knopf { /* Schiebt sich an den unteren Rand, egal wie lang der Text darüber ist. */ margin-top: auto; align-self: flex-start; display: inline-block; padding: 0.5rem 1.1rem; border-radius: 0.45rem; background: var(--md-gruen); color: #FFF5EA; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .vokabelkarte__knopf:hover, .vokabelkarte__knopf:focus-visible { background: color-mix(in oklab, var(--md-gruen) 82%, black 18%); color: #FFF5EA; text-decoration: none; } /* Im dunklen Schema ist das satte Grün zu dunkel für die Fläche — dort die aufgehellte Fassung mit dunkler Schrift. */ :root[data-theme='dark'] .vokabelkarte__knopf { background: var(--q2-accent); color: #12130F; } :root[data-theme='dark'] .vokabelkarte__knopf:hover, :root[data-theme='dark'] .vokabelkarte__knopf:focus-visible { background: color-mix(in oklab, var(--q2-accent) 85%, white 15%); color: #12130F; } .vokabelkarte a:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 2px; } /* =============================================================== Tabellen — 2026-07-28 =============================================================== */ /* Das Elternthema hat keine einzige Regel für Tabellen. Auf schmalen Bildschirmen läuft eine Tabelle deshalb über und macht die ganze Seite waagerecht verschiebbar. Der umschließende Bereich entsteht im Child-Theme, siehe madelana.php. Er ist mit der Tastatur erreichbar, sonst käme man ohne Maus nicht an den rechten Teil der Tabelle. */ .tabelle-rollbar { overflow-x: auto; max-width: 100%; margin: 1.5rem 0; /* Rollen soll nicht die ganze Seite mitziehen */ overscroll-behavior-x: contain; } .tabelle-rollbar:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 3px; border-radius: 4px; } .tabelle-rollbar table { width: 100%; border-collapse: collapse; margin: 0; /* Verhindert, dass Spalten unlesbar schmal zusammenfallen */ min-width: 32rem; } .tabelle-rollbar th, .tabelle-rollbar td { padding: 0.6rem 0.8rem; text-align: left; vertical-align: top; border-bottom: 1px solid var(--q2-border-ring); } .tabelle-rollbar th { font-weight: 600; color: var(--q2-text-strong); border-bottom-width: 2px; } .tabelle-rollbar tr:last-child td { border-bottom: none; } /* --- Autorenkasten am Artikelende -------------------------------- */ /* Ersetzt die frühere einzeilige Angabe. Bild, Kurzvorstellung und ein Verweis auf die Über-uns-Seite — bei Ratgeber- und Rezeptinhalten bewertet Google, ob eine erkennbare Person dahintersteht. */ .autorenkasten { display: flex; gap: 1.25rem; align-items: flex-start; margin: 3rem 0 0; padding: 1.5rem; background: var(--q2-bg-muted); border-radius: var(--q2-radius-lg); border-top: 3px solid var(--md-gruen); } :root[data-theme='dark'] .autorenkasten { border-top-color: var(--q2-accent); } .autorenkasten__bild { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; object-fit: cover; background: var(--q2-bg-elev); } .autorenkasten__text { min-width: 0; } .autorenkasten__zeile { margin: 0 0 0.35rem; font-size: 0.8125rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--q2-text-muted); } .autorenkasten__name { display: block; margin-top: 0.1rem; font-size: 1.125rem; font-weight: 700; letter-spacing: normal; text-transform: none; color: var(--q2-text-strong); } .autorenkasten__vita { margin: 0 0 0.7rem; font-size: 0.9375rem; line-height: 1.55; } /* Die beiden Datumsangaben stehen nebeneinander und rutschen auf schmalen Bildschirmen untereinander. Der senkrechte Strich entfällt dabei, sonst hinge er am Zeilenende. */ .autorenkasten__daten { display: flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin: 0 0 0.8rem; font-size: 0.8125rem; color: var(--q2-text-muted); } .autorenkasten__datum time { font-variant-numeric: tabular-nums; } .autorenkasten__mehr { font-size: 0.9375rem; font-weight: 600; text-decoration: none; } .autorenkasten__mehr:hover, .autorenkasten__mehr:focus-visible { text-decoration: underline; } @media (max-width: 560px) { .autorenkasten { flex-direction: column; gap: 1rem; padding: 1.25rem; } .autorenkasten__bild { width: 72px; height: 72px; } } /* --- Titelbild des Rezepts --------------------------------------- */ .rezept-titelbild { margin: 0 0 1.5rem; } .rezept-titelbild img { display: block; width: 100%; height: auto; border-radius: var(--q2-radius-lg); } /* --- Eckdaten über dem Rezept ------------------------------------ */ /* Raster statt Flexbox: So stehen die Felder in Spalten gleicher Breite und die Werte fluchten untereinander. auto-fit lässt sie auf schmalen Bildschirmen von selbst umbrechen. */ .rezept-eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: 0.85rem; margin: 0 0 2rem; padding: 1.15rem 1.25rem; background: var(--q2-bg-muted); border-radius: var(--q2-radius-lg); } .rezept-eckdaten__feld { display: flex; align-items: center; gap: 0.7rem; min-width: 0; } .eckdaten__bild { flex: 0 0 auto; width: 26px; height: 26px; color: var(--md-gruen); } :root[data-theme='dark'] .eckdaten__bild { color: var(--q2-accent); } .rezept-eckdaten dt { font-size: 0.75rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--q2-text-muted); font-weight: 600; } .rezept-eckdaten dd { margin: 0; font-size: 1rem; font-weight: 600; color: var(--q2-text-strong); } /* --- Zutatenliste ------------------------------------------------ */ /* Die Klasse setzt die Themenklasse zur Laufzeit, nicht das Markdown. Ein
um eine Markdown-Liste hätte den Text roh stehen lassen: Parsedown wandelt innerhalb eines Block-HTML-Elements nichts um. Im Markdown steht deshalb eine gewöhnliche Liste. */ .zutatenliste { list-style: none; margin: 0 0 1.75rem; padding: 1.25rem 1.4rem; background: var(--q2-bg-muted); border-radius: var(--q2-radius-lg); /* Zwei Spalten, sobald der Platz reicht. Bei zehn Zutaten spart das eine halbe Bildschirmhöhe. */ columns: 2; column-gap: 2rem; } .zutatenliste li { position: relative; margin: 0; padding: 0.42rem 0 0.42rem 1.6rem; font-size: 0.9688rem; line-height: 1.45; /* Verhindert, dass eine Zutat über den Spaltenumbruch zerrissen wird */ break-inside: avoid; } .zutatenliste li::marker { content: none; } /* Häkchen statt Aufzählungspunkt: Es liest sich als Liste zum Abhaken, und genau so wird sie beim Einkaufen benutzt. */ .zutatenliste li::before { content: ''; position: absolute; left: 0.15rem; top: 0.78rem; width: 0.62rem; height: 0.34rem; border-left: 2px solid var(--md-gruen); border-bottom: 2px solid var(--md-gruen); transform: rotate(-45deg); } :root[data-theme='dark'] .zutatenliste li::before { border-color: var(--q2-accent); } @media (max-width: 640px) { .zutatenliste { columns: 1; padding: 1.1rem 1.2rem; } } /* --- Zubereitungsschritte ---------------------------------------- */ /* Die Schritte tragen Sprungmarken, damit die Rezept-Auszeichnung je Schritt eine gültige Adresse nennen kann. scroll-margin-top sorgt dafür, dass die Überschrift beim Sprung nicht unter dem Kopfbereich verschwindet. */ .rezeptseite h3[id^='schritt-'] { scroll-margin-top: 5rem; } /* --- Produktkasten im Inhaltsbereich ----------------------------- */ /* Stand früher in der Seitenspalte und war entsprechend schmal gebaut. Im Inhaltsbereich hat er die volle Breite: die Produkte stehen nebeneinander, die Schrift in Lesegröße statt in Spaltengröße. */ .produktkasten { background: var(--q2-bg-elev); border-radius: var(--q2-radius-lg); padding: 1.6rem 1.5rem 1.4rem; margin: 2.5rem 0 1.5rem; box-shadow: rgba(19, 19, 22, 0.04) 0 1px 2px, rgba(19, 19, 22, 0.04) 0 8px 24px -8px; } :root[data-theme='dark'] .produktkasten { box-shadow: rgba(0, 0, 0, 0.35) 0 1px 2px, rgba(0, 0, 0, 0.45) 0 10px 30px -10px; } .produktkasten__titel { font-size: 1.25rem; margin: 0 0 1.2rem; } /* Das Theme hängt allen Überschriften einen Balken an. Im Kasten stört er, weil die Umrandung die Abgrenzung schon leistet. */ .produktkasten__titel::before { content: none; } /* auto-fit statt fester Spaltenzahl: zwei Produkte stehen bei 900 px nebeneinander, drei ebenso, und auf dem Telefon rutschen sie ohne weitere Regel untereinander. Das min() verhindert, dass eine Karte breiter wird als der Platz — sonst läuft das Raster aus dem Rand. */ .produktkasten__raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: 1.1rem; } /* Hintergrund bewusst --q2-bg-muted und nicht --q2-bg: der Kasten steht auf --q2-bg-elev (weiß), da hebt sich #fbfbfc praktisch nicht ab. Der Rahmen allein trägt die Abgrenzung auch nicht, er hat nur 8 Prozent Deckkraft. */ .produkt { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.1rem; border: 1px solid var(--q2-border-ring); border-radius: 0.7rem; background: var(--q2-bg-muted); } :root[data-theme='dark'] .produkt { background: color-mix(in oklab, var(--q2-bg-elev) 60%, black 40%); } .produkt__bild img { display: block; width: 100%; height: auto; border-radius: 0.5rem; background: var(--q2-bg-muted); } /* Nimmt den restlichen Platz ein, damit der Knopf am unteren Rand sitzt. Bei nebeneinander stehenden Karten mit unterschiedlich langem Text stehen die Knöpfe dadurch auf einer Linie. */ .produkt__text { display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .produkt__name { font-size: 1.0625rem; line-height: 1.35; margin: 0; color: var(--q2-text-strong); } .produkt__name::before { content: none; } .produkt__hinweis { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--q2-text-muted); } .produkt__knopf { display: inline-block; align-self: flex-start; margin-top: auto; padding: 0.55rem 1.1rem; border-radius: 0.45rem; background: var(--md-gruen); color: #FFF5EA; font-size: 0.9375rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease; } .produkt__knopf:hover, .produkt__knopf:focus-visible { background: color-mix(in oklab, var(--md-gruen) 82%, black 18%); color: #FFF5EA; text-decoration: none; } :root[data-theme='dark'] .produkt__knopf { background: var(--q2-accent); color: #12130F; } :root[data-theme='dark'] .produkt__knopf:hover, :root[data-theme='dark'] .produkt__knopf:focus-visible { background: color-mix(in oklab, var(--q2-accent) 85%, white 15%); color: #12130F; } .produkt__fehlt { margin: auto 0 0; font-size: 0.875rem; font-style: italic; color: var(--q2-text-muted); } /* Die Kennzeichnung muss lesbar sein, nicht versteckt. Deshalb derselbe Kontrast wie der übrige Hilfstext, kein Grau in Grau. */ .produktkasten__hinweis { margin: 1.2rem 0 0; padding-top: 1rem; border-top: 1px solid var(--q2-border-ring); /* Kleiner und kursiv: Der Hinweis muss lesbar bleiben, soll aber nicht mit der Empfehlung selbst um Aufmerksamkeit ringen. Die Zeilenhöhe steigt dafür leicht an — kursive Schrift in kleiner Größe braucht mehr Luft, sonst wird sie zäh. */ font-size: 0.8125rem; font-style: italic; line-height: 1.6; color: var(--q2-text-muted); } .produktkasten a:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 2px; } @media (max-width: 560px) { .produktkasten { padding: 1.2rem 1.1rem 1.1rem; margin: 2rem 0 1.2rem; } .produkt { padding: 0.95rem; } } /* --- Newsletter-Anmeldung ---------------------------------------- */ .newsletter { margin: 3rem 0 0; padding: 1.75rem 1.6rem; background: var(--q2-bg-muted); border-radius: var(--q2-radius-lg); border-top: 3px solid var(--md-gruen); } :root[data-theme='dark'] .newsletter { border-top-color: var(--q2-accent); } .newsletter__titel { font-size: 1.3125rem; margin: 0 0 0.7rem; } /* Das Theme hängt allen Überschriften einen Balken an. Im Kasten stört er, weil die farbige Oberkante die Abgrenzung schon leistet. */ .newsletter__titel::before { content: none; } .newsletter__text { margin: 0 0 1.2rem; font-size: 0.9688rem; line-height: 1.55; } .newsletter__beschriftung { display: block; margin-bottom: 0.4rem; font-size: 0.875rem; font-weight: 600; color: var(--q2-text-strong); } /* Feld und Knopf nebeneinander, solange der Platz reicht. Der Umbruch kommt über flex-wrap von selbst — das Feld hat eine Mindestbreite, unter der es umbricht statt zu schrumpfen. */ .newsletter__zeile { display: flex; flex-wrap: wrap; gap: 0.6rem; } .newsletter__feld { flex: 1 1 15rem; min-width: 0; padding: 0.62rem 0.85rem; border: 1px solid var(--q2-border-ring); border-radius: 0.45rem; background: var(--q2-bg-elev); color: var(--q2-text-strong); font-size: 1rem; font-family: inherit; } .newsletter__feld:focus-visible { outline: 2px solid var(--q2-accent); outline-offset: 1px; border-color: transparent; } .newsletter__knopf { flex: 0 0 auto; padding: 0.62rem 1.4rem; border: none; border-radius: 0.45rem; background: var(--md-gruen); color: #FFF5EA; font-size: 1rem; font-weight: 600; font-family: inherit; cursor: pointer; transition: background-color 0.15s ease; } .newsletter__knopf:hover, .newsletter__knopf:focus-visible { background: color-mix(in oklab, var(--md-gruen) 82%, black 18%); } :root[data-theme='dark'] .newsletter__knopf { background: var(--q2-accent); color: #12130F; } :root[data-theme='dark'] .newsletter__knopf:hover, :root[data-theme='dark'] .newsletter__knopf:focus-visible { background: color-mix(in oklab, var(--q2-accent) 85%, white 15%); } /* Köderfeld gegen Bots. Bewusst nicht display:none — manche automatischen Ausfüller überspringen genau das. Stattdessen aus dem Sichtbereich geschoben, ohne es aus dem Dokument zu nehmen. */ .newsletter__koeder { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .newsletter__hinweis { margin: 0.9rem 0 0; font-size: 0.8125rem; line-height: 1.55; color: var(--q2-text-muted); } .newsletter__meldung { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 0.5rem; font-size: 0.9375rem; line-height: 1.5; } .newsletter__meldung--ok { background: color-mix(in oklab, var(--md-gruen) 12%, var(--q2-bg-elev) 88%); border-left: 3px solid var(--md-gruen); color: var(--q2-text-strong); } .newsletter__meldung--fehler { background: color-mix(in oklab, #A00810 12%, var(--q2-bg-elev) 88%); border-left: 3px solid #A00810; color: var(--q2-text-strong); } :root[data-theme='dark'] .newsletter__meldung--ok { background: color-mix(in oklab, var(--q2-accent) 16%, var(--q2-bg-elev) 84%); border-left-color: var(--q2-accent); } @media (max-width: 560px) { .newsletter { padding: 1.4rem 1.2rem; margin-top: 2.25rem; } } /* --- Startseite --------------------------------------------------- */ .startseite { display: flex; flex-direction: column; gap: 4rem; } /* Abschnittsüberschriften bekommen eine kurze Linie darunter statt des Theme-Balkens davor. Auf einer Seite mit vier Abschnitten gliedert das ruhiger als vier Balken am linken Rand. */ .start-abschnitt__titel { font-size: clamp(1.35rem, 2.6vw, 1.65rem); margin: 0 0 1.6rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--q2-border-ring); } .start-abschnitt__titel::before { content: none; } /* --- Aufhänger ---------------------------------------------------- */ /* Die Fläche in Markengrün gibt der Seite einen Anfang. Vorher stand dort nur Text auf hellem Grund — das Auge fand keinen Einstieg. Der Verlauf ist flach gehalten, zwei Töne desselben Grüns. */ .start-held { position: relative; padding: clamp(2.2rem, 5vw, 4rem) clamp(1.4rem, 4vw, 3rem); border-radius: var(--q2-radius-lg); overflow: hidden; /* Das Foto liegt unten, der Verlauf darüber. Er ist links fast deckend, damit der Text steht, und wird nach rechts durchlässig, damit Hahn, Azulejos und Gitarre sichtbar bleiben. */ background-image: linear-gradient(100deg, rgba(0, 88, 40, 0.95) 0%, rgba(0, 88, 40, 0.88) 36%, rgba(0, 88, 40, 0.55) 56%, rgba(0, 88, 40, 0.20) 76%, rgba(0, 64, 29, 0.08) 100%), url('../images/held-portugal.jpg'); background-size: cover, cover; background-position: center, center right; background-repeat: no-repeat, no-repeat; } /* Der Sonnenkreis ist entfallen, seit das Foto im Hintergrund liegt — zwei Blickfänge auf derselben Fläche hätten miteinander konkurriert. */ .start-held__inhalt { position: relative; max-width: 44rem; } .start-held h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); line-height: 1.12; margin: 0 0 1.1rem; color: #FFF5EA; } .start-held h1::before { content: none; } .start-held p { font-size: clamp(1rem, 1.6vw, 1.125rem); line-height: 1.6; color: color-mix(in oklab, #FFF5EA 88%, var(--md-gruen) 12%); } .start-held p:last-of-type { margin-bottom: 0; } /* Hervorhebungen im Aufhänger in Sonnengelb statt in Weiß — sonst verschwindet die Betonung auf dem hellen Fließtext. */ .start-held strong { color: var(--md-gelb); font-weight: 600; } .start-held__knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.8rem; } .start-knopf { display: inline-block; padding: 0.7rem 1.4rem; border-radius: 0.5rem; font-size: 1rem; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; } .start-knopf--voll { background: var(--md-gelb); color: #12130F; } .start-knopf--voll:hover, .start-knopf--voll:focus-visible { background: color-mix(in oklab, var(--md-gelb) 85%, white 15%); color: #12130F; text-decoration: none; } .start-knopf--rand { border: 1.5px solid color-mix(in oklab, #FFF5EA 55%, transparent); color: #FFF5EA; } .start-knopf--rand:hover, .start-knopf--rand:focus-visible { background: color-mix(in oklab, #FFF5EA 14%, transparent); color: #FFF5EA; text-decoration: none; } .start-held a:focus-visible { outline: 2px solid var(--md-gelb); outline-offset: 3px; } /* --- Die Bereiche ------------------------------------------------- */ .start-bereiche__liste { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); gap: 1.2rem; list-style: none; margin: 0; padding: 0; } .start-bereich { display: flex; flex-direction: column; gap: 0.55rem; margin: 0; padding: 1.5rem 1.4rem; background: var(--q2-bg-elev); border-radius: var(--q2-radius-lg); border: 1px solid var(--q2-border-ring); transition: transform 0.15s ease, box-shadow 0.15s ease; } .start-bereich:hover { transform: translateY(-2px); box-shadow: rgba(19, 19, 22, 0.05) 0 2px 4px, rgba(19, 19, 22, 0.07) 0 12px 28px -10px; } @media (prefers-reduced-motion: reduce) { .start-bereich { transition: none; } .start-bereich:hover { transform: none; } } /* Das Sinnbild sitzt in einem runden Feld in gedämpftem Markengrün. Es trägt die Farbe in die Kästen, ohne dass die ganze Fläche eingefärbt werden muss. */ .start-bereich__marke { display: inline-flex; align-items: center; justify-content: center; width: 2.9rem; height: 2.9rem; margin-bottom: 0.3rem; border-radius: 50%; background: color-mix(in oklab, var(--md-gruen) 12%, var(--q2-bg-elev) 88%); color: var(--md-gruen); } :root[data-theme='dark'] .start-bereich__marke { background: color-mix(in oklab, var(--q2-accent) 18%, var(--q2-bg-elev) 82%); color: var(--q2-accent); } .start-bereich__bild { width: 1.5rem; height: 1.5rem; } .start-bereich__titel { font-size: 1.1875rem; margin: 0; } .start-bereich__titel::before { content: none; } .start-bereich__titel a { text-decoration: none; } .start-bereich__titel a:hover, .start-bereich__titel a:focus-visible { text-decoration: underline; } .start-bereich__text { margin: 0; font-size: 0.9375rem; line-height: 1.5; color: var(--q2-text-muted); } /* Schiebt die Zählung an den unteren Rand, damit sie in allen Kästen auf einer Linie steht — auch bei unterschiedlich langen Texten. */ .start-bereich__zahl { margin: auto 0 0; padding-top: 0.7rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--md-gruen); } :root[data-theme='dark'] .start-bereich__zahl { color: var(--q2-accent); } /* --- Neueste Beiträge --------------------------------------------- */ /* Herkunftszeile über dem Kartentitel. Auf der Startseite stehen Beiträge aus vier Bereichen nebeneinander — da muss erkennbar sein, woher einer kommt. */ .vokabelkarte__herkunft { margin: 0 0 0.35rem; font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 600; color: var(--md-gruen); } :root[data-theme='dark'] .vokabelkarte__herkunft { color: var(--q2-accent); } /* --- Autorin ------------------------------------------------------ */ .start-autorin__inhalt { display: flex; gap: 1.6rem; align-items: center; padding: 1.8rem; background: var(--q2-bg-muted); border-radius: var(--q2-radius-lg); border-left: 4px solid var(--md-gruen); } :root[data-theme='dark'] .start-autorin__inhalt { border-left-color: var(--q2-accent); } .start-autorin__bild { flex: 0 0 auto; width: 120px; height: 120px; border-radius: 50%; object-fit: cover; background: var(--q2-bg-elev); } .start-autorin__spalte { min-width: 0; } .start-autorin__text { margin: 0 0 0.9rem; font-size: 1.0625rem; line-height: 1.6; } .start-autorin__mehr { font-size: 0.9375rem; font-weight: 600; text-decoration: none; } .start-autorin__mehr:hover, .start-autorin__mehr:focus-visible { text-decoration: underline; } @media (max-width: 700px) { /* Der Text liegt hier über der ganzen Breite, deshalb ein senkrechter Verlauf mit durchgehend hoher Deckkraft. Dazu die kleinere Fassung des Bildes — auf dem Telefon zählt jedes Kilobyte. */ .start-held { background-image: linear-gradient(175deg, rgba(0, 88, 40, 0.93) 0%, rgba(0, 88, 40, 0.88) 55%, rgba(0, 64, 29, 0.78) 100%), url('../images/held-portugal-klein.jpg'); background-position: center, center right; } } @media (max-width: 560px) { .startseite { gap: 2.75rem; } .start-autorin__inhalt { flex-direction: column; align-items: flex-start; gap: 1.1rem; padding: 1.4rem; } .start-autorin__bild { width: 88px; height: 88px; } .start-knopf { width: 100%; text-align: center; } }