/* ===================================================================== Schlossallee Weingut Pfeiffer – Website-Stylesheet Gleiche Designsprache wie der Weinshop. Keine externen Ressourcen. ===================================================================== */ :root { /* --------------------------------------------------------------- Farbwelt: schwarze Tafel, gelbe Sonne – direkt aus dem Logo. Bewusst OHNE Weinrot: Rot ist die Farbe vieler Weingüter, das Logo hier gibt Schwarz und Gelb vor. Der Kontrast dieser beiden trägt die ganze Seite, deshalb kommt der dunkle Ton flächig zum Einsatz statt nur als Akzent. --------------------------------------------------------------- */ --gold: #f2c500; /* Sonnengelb aus dem Logo */ --gold-warm: #ffd83d; /* aufgehellt, für Hover auf Dunkel */ --gold-ink: #8a6a00; /* abgedunkelt – lesbar auf hellem Grund */ --ink: #131310; /* Textfarbe */ --charcoal: #0d0d0d; /* Tafel-Schwarz aus dem Logo */ --charcoal-2:#1c1c18; /* zweite dunkle Ebene */ --bg: #f4f2ec; /* kühleres Off-White statt warmem Creme */ --paper: #ffffff; --muted: #6e6b62; --line: #e2ded3; /* Aktionsfarbe ist das Schwarz selbst – Links bekommen einen gelben Unterstrich statt einer eigenen Farbe. Ruhiger und moderner. */ --wine: #131310; /* Name bleibt, damit gemeinsame Bausteine passen */ --wine-deep: #000000; /* Kantiger als beim Schwesterprojekt: schmale Radien wirken sachlicher */ --r-sm: 3px; --r: 5px; --r-lg: 8px; --shadow-sm: 0 1px 2px rgba(19,19,16,.05); --shadow: 0 10px 30px -14px rgba(19,19,16,.28); --shadow-lg: 0 26px 60px -24px rgba(19,19,16,.45); --wrap: 1180px; --ease: cubic-bezier(.22,.61,.36,1); } * { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; line-height: 1.65; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* Überschriften in der Systemschrift, sehr fett und eng gesetzt. Das Logo trägt die Serifen – die Seite wirkt daneben moderner, wenn sie das nicht wiederholt. Serifen kommen nur noch im Zitat vor. */ h1, h2, h3, h4 { font-family: inherit; font-weight: 800; line-height: 1.08; color: var(--ink); letter-spacing: -.028em; margin: 0 0 .5em; } h1 { font-weight: 850; letter-spacing: -.035em; } /* Links tragen keine eigene Farbe, sondern einen gelben Unterstrich. Das hält die Seite ruhig und passt zum Logo. */ a { color: inherit; text-decoration: none; } a:hover { text-decoration: none; } .prose a, .abschluss a, .legal a, p a { box-shadow: inset 0 -.42em 0 rgba(242,197,0,.42); transition: box-shadow .2s var(--ease); } .prose a:hover, .abschluss a:hover, .legal a:hover, p a:hover { box-shadow: inset 0 -1.05em 0 rgba(242,197,0,.55); } img { max-width: 100%; height: auto; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 24px; } .eyebrow { display: inline-block; font-size: .72rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 700; color: var(--gold-ink); margin-bottom: 10px; } /* Auf dunklem Grund das helle Logo-Gold verwenden */ .hero .eyebrow, .cta .eyebrow { color: var(--gold); } /* ---------- Kopfbereich ---------- Dunkle Leiste statt heller: Das Logo ist eine schwarze Tafel und sitzt damit ohne Bruch in der Kopfzeile – der Kasten drumherum verschwindet. */ .site-header { position: sticky; top: 0; z-index: 50; background: rgba(13,13,13,.94); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid rgba(242,197,0,.22); } .header-inner { max-width: var(--wrap); margin: 0 auto; padding: 10px 24px; display: flex; align-items: center; justify-content: space-between; gap: 18px; } .brand { display: flex; align-items: center; gap: 13px; } .brand:hover { text-decoration: none; } /* Logo ohne Rahmen und Schatten – es steht auf gleichem Schwarz */ .brand-logo { height: 46px; width: auto; display: block; } .brand-text { display: flex; flex-direction: column; line-height: 1.15; } .brand-name { font-size: .95rem; font-weight: 700; color: #fff; white-space: nowrap; letter-spacing: -.01em; } .brand-sub { font-size: .64rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.5); margin-top: 3px; white-space: nowrap; } .main-nav { display: flex; align-items: center; gap: 0; } .main-nav a { color: rgba(255,255,255,.82); font-size: .88rem; font-weight: 500; padding: 9px 13px; border-radius: 0; white-space: nowrap; transition: color .2s var(--ease); } .main-nav a:hover { color: var(--gold); background: none; } /* Aktive Seite mit gelbem Strich darunter statt farbiger Schrift */ .main-nav > a.active, .main-nav .nav-group-top.active { color: #fff; box-shadow: inset 0 -2px 0 var(--gold); } .main-nav .nav-shop { background: var(--gold); color: var(--charcoal); font-weight: 700; margin-left: 12px; padding: 11px 20px; border-radius: 2px; } .main-nav .nav-shop:hover { background: var(--gold-warm); color: var(--charcoal); } /* ---------- Untermenüs ---------- Öffnen ohne JavaScript: beim Überfahren mit der Maus und – für Tastatur und Touch – sobald ein Element darin den Fokus hat. */ .nav-group { position: relative; } .nav-group-top .caret { font-size: .62em; margin-left: 6px; opacity: .65; } .nav-sub { position: absolute; left: 0; top: 100%; min-width: 226px; background: var(--charcoal-2); border: 1px solid rgba(242,197,0,.2); border-radius: 2px; box-shadow: var(--shadow-lg); padding: 6px; display: none; z-index: 60; } .nav-group:hover > .nav-sub, .nav-group:focus-within > .nav-sub { display: block; } .nav-sub a { display: block; padding: 10px 13px; border-radius: 2px; font-size: .86rem; } .nav-sub a:hover { background: rgba(242,197,0,.1); } /* Hamburger */ .nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 44px; height: 40px; padding: 8px; flex-direction: column; justify-content: space-between; } .nav-toggle span { display: block; height: 2px; background: var(--gold); border-radius: 2px; transition: .25s var(--ease); } .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(10px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); } /* ---------- Hero: dunkle Tafel ---------- Die Startseite beginnt schwarz. Das ist der stärkste Unterschied zu einem hellen Weingut-Auftritt und greift die Logotafel auf. Das Gelb wirkt erst auf dunklem Grund so, wie es im Logo gemeint ist. */ .hero { position: relative; overflow: hidden; color: #fff; padding: 78px 24px 88px; background: radial-gradient(70% 90% at 15% 0%, rgba(242,197,0,.14), transparent 60%), linear-gradient(170deg, #17170f 0%, var(--charcoal) 55%, #000 100%); border-bottom: 0; } .hero h1, .hero h2 { color: #fff; } .hero p { color: rgba(255,255,255,.72); } /* Feine gelbe Linie als oberer Abschluss – Signatur der Seite */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, rgba(242,197,0,0) 62%); } .hero-inner { position: relative; z-index: 1; max-width: var(--wrap); margin: 0 auto; } /* Geteilter Hero: Text links, Foto rechts */ .hero-split { display: grid; gap: 46px; align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } /* Grosses Logo im Hero der Startseite (img/logo.jpg – die Logotafel). Deutlich groesser als das kleine Logo in der Kopfzeile; die Hoehe waechst mit der Fensterbreite mit. Feiner Rahmen und Schatten wie in der Kopfzeile, damit die dunkle Tafel auf dem hellen Verlauf sauber abgesetzt ist. */ /* Auf schwarzem Grund braucht die Logotafel keinen Rahmen mehr – sie geht direkt in den Hintergrund über. */ .hero-logo { height: clamp(96px, 11vw, 150px); width: auto; display: block; margin: 0 0 30px; border-radius: 0; box-shadow: none; } .hero-split h1 { font-size: clamp(2.2rem, 5.4vw, 3.9rem); margin-bottom: 20px; } .hero-split p { color: rgba(255,255,255,.72); font-size: 1.08rem; max-width: 500px; } .hero-foto { width: 100%; border-radius: 2px; display: block; box-shadow: var(--shadow-lg); border: 0; } .hero-foto-bu { text-align: left; font-size: .78rem; color: rgba(255,255,255,.45); margin-top: 12px; letter-spacing: .06em; text-transform: uppercase; font-style: normal; } .hero-actions { margin-top: 30px; display: flex; gap: 14px; flex-wrap: wrap; } /* Kompakter Kopf für Unterseiten – ebenfalls dunkel, aber links ausgerichtet statt zentriert. Das gibt den Unterseiten einen eigenen Rhythmus und lässt sie schneller "beginnen". */ .hero.slim { padding: 66px 24px 70px; text-align: left; } .hero.slim .hero-inner { max-width: var(--wrap); } .hero.slim h1 { font-size: clamp(2rem, 5vw, 3.2rem); max-width: 15ch; } .hero.slim p { color: rgba(255,255,255,.72); font-size: 1.06rem; max-width: 520px; margin: 0; } @media (max-width: 860px) { .hero-split { grid-template-columns: 1fr; gap: 30px; } .hero-split p { max-width: none; } .hero-actions { justify-content: center; } .hero-split .hero-text { text-align: center; } /* Einspaltig ist der Text zentriert – das Logo muss mitziehen */ .hero-logo { margin-inline: auto; } } /* ---------- Buttons ---------- Kantig statt abgerundet, ohne Hüpfen beim Überfahren. */ .btn { display: inline-block; border: 0; cursor: pointer; border-radius: 2px; padding: 14px 28px; font-size: .96rem; font-weight: 700; font-family: inherit; letter-spacing: .01em; box-shadow: none !important; transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease); } .btn:hover { text-decoration: none; } .btn-gold { background: var(--gold); color: var(--charcoal); } .btn-gold:hover { background: var(--gold-warm); } .btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.45); } .btn-ghost:hover { background: rgba(255,255,255,.1); } /* Auf dunklem Hero: heller Rahmen. Auf hellem Grund: schwarzer Rahmen. */ .btn-outline { background: transparent; color: var(--ink); border: 1px solid rgba(19,19,16,.35); } .btn-outline:hover { background: var(--ink); color: #fff; border-color: var(--ink); } .hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.4); } .hero .btn-outline:hover { background: #fff; color: var(--charcoal); border-color: #fff; } .btn-wine { background: var(--charcoal); color: #fff; } .btn-wine:hover { background: #000; } /* ---------- Abschnitte ---------- */ .section { padding: 84px 0; } .section.alt { background: var(--paper); border-block: 1px solid var(--line); } /* Dunkler Abschnitt – nimmt die Logotafel wieder auf und gibt langen Seiten einen Taktwechsel, ohne dass eine neue Farbe nötig wäre. */ .section.dunkel { background: var(--charcoal); color: rgba(255,255,255,.74); } .section.dunkel h2, .section.dunkel h3, .section.dunkel .num { color: #fff; } .section.dunkel .eyebrow { color: var(--gold); } .section.dunkel .rule { background: var(--gold); } .section.dunkel .lbl { color: rgba(255,255,255,.5); } /* Überschrift linksbündig, Beschreibung rechts daneben. Ruhiger als der zentrierte Block und gibt der Seite eine Achse. */ .split-head { display: grid; gap: 14px 56px; margin-bottom: 52px; align-items: end; } @media (min-width: 900px) { .split-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } } .split-head h2 { font-size: clamp(1.9rem, 4vw, 2.9rem); margin: 0; } .split-head p { color: var(--muted); font-size: 1.04rem; margin: 0; max-width: 46ch; } .section-head { text-align: left; max-width: 680px; margin: 0 0 46px; } .section-head h2 { font-size: clamp(1.9rem, 4vw, 2.7rem); } .section-head p { color: var(--muted); font-size: 1.05rem; } .rule { width: 54px; height: 3px; background: var(--gold); border: 0; margin: 20px 0 0; } /* Fließtext */ .prose { max-width: 760px; margin: 0 auto; } .prose p { margin: 0 0 1.1em; } .prose h3 { margin-top: 1.8em; font-size: 1.3rem; } .prose ul { padding-left: 1.2em; } .prose li { margin-bottom: .4em; } .lead { font-size: 1.14rem; color: var(--ink); } /* ===================================================================== BAUSTEINE FÜR ABWECHSLUNG --------------------------------------------------------------------- Damit nicht jede Unterseite gleich aussieht. Die Auswahl richtet sich nach dem Inhalt, nicht nach dem Zufall – siehe references/variation.md. Farben, Schriften und Abstände bleiben überall gleich; variiert wird nur die Anordnung. ===================================================================== */ /* Seitenkopf mit breitem Foto – für alles Räumliche (Keller, Vinothek) */ .hero.bild { padding-bottom: 0; } .hero.bild .hero-inner { max-width: 760px; text-align: center; } /* Kein eigenes Seitenpolster – der Hero bringt schon 24 px mit, sonst steht das Bild auf dem Handy unnötig schmal in der Mitte. */ .hero-breitbild { max-width: 1280px; margin: 38px auto 0; padding: 0; } .hero-breitbild img { width: 100%; border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-lg); display: block; } /* Panoramabild, das aus dem Inhaltsraster ausbricht */ .panorama { margin: 0; } .panorama img { width: 100%; max-height: 520px; object-fit: cover; display: block; } .panorama figcaption { max-width: var(--wrap); margin: 12px auto 0; padding: 0 24px; color: var(--muted); font-size: .88rem; font-style: italic; } /* Zitat des Betriebs – höchstens einmal je Website verwenden, sonst wird aus der Betonung ein Gestaltungsmuster. */ .zitat { max-width: 720px; margin: 0 auto; padding: 0 24px 0 34px; border-left: 3px solid var(--gold); font-family: Georgia, "Times New Roman", serif; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.5; color: var(--ink); font-style: italic; } .zitat cite { display: block; margin-top: 14px; font-family: system-ui, sans-serif; font-size: .84rem; font-style: normal; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } /* Zweispaltiger Fließtext – wirkt ruhiger als ein sehr langer Absatz */ .text-spalten { max-width: 900px; margin: 0 auto; } @media (min-width: 900px) { .text-spalten { column-count: 2; column-gap: 46px; } .text-spalten p { margin-top: 0; break-inside: avoid; } } /* Aufzählung mit Trennlinien statt Kacheln. Besser lesbar, sobald es mehr als vier Punkte sind (z. B. Rieden). */ .liste-fein { max-width: 820px; margin: 0 auto; } .liste-fein > div { display: grid; gap: 4px 28px; padding: 20px 0; border-bottom: 1px solid var(--line); } @media (min-width: 700px) { .liste-fein > div { grid-template-columns: 200px 1fr; align-items: baseline; } } .liste-fein > div:first-child { border-top: 1px solid var(--line); } .liste-fein dt { font-weight: 800; font-size: 1.14rem; color: var(--ink); letter-spacing: -.02em; } .liste-fein dd { margin: 0; color: var(--muted); } .liste-fein dd span { display: block; margin-top: 5px; color: var(--gold-ink); font-size: .84rem; font-weight: 600; } /* Zwei versetzte Bilder – gibt Bewegung ohne Animation */ .versetzt { display: grid; gap: 24px; max-width: 940px; margin: 0 auto; } @media (min-width: 780px) { .versetzt { grid-template-columns: 1fr 1fr; align-items: start; } .versetzt img:last-child { margin-top: 52px; } } .versetzt img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); display: block; } /* Schlichter Abschluss statt CTA-Band – nicht jede Seite braucht den Aufruf */ .abschluss { max-width: 720px; margin: 0 auto; text-align: center; color: var(--muted); font-size: 1.02rem; } .abschluss a { font-weight: 600; } /* ---------- Karten ---------- */ .cards { display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } /* Feste Spaltenzahl, wo die Menge inhaltlich vorgegeben ist – vier Familienmitglieder sind vier Kacheln, nicht drei plus Rest. */ @media (min-width: 760px) { .cards.zwei { grid-template-columns: repeat(2, 1fr); } .cards.vier { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .cards.vier { grid-template-columns: repeat(4, 1fr); } } .cards.vier .card { padding-top: 20px; } /* Karten ohne Kasten. Statt weißer Box mit Rahmen, Schatten und Emoji steht über jeder Spalte nur eine schmale Linie, die beim Überfahren gelb durchläuft. Weniger Rahmen bedeutet mehr Ruhe – und Emoji altern schnell. */ .card { background: none; border: 0; border-radius: 0; box-shadow: none; padding: 26px 0 0; position: relative; } .card::before { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 100%; background: var(--line); } .card::after { content: ""; position: absolute; left: 0; top: 0; height: 2px; width: 0; background: var(--gold); transition: width .45s var(--ease); } .card:hover::after { width: 100%; } .card:hover { transform: none; box-shadow: none; } .card h3 { font-size: 1.2rem; margin-bottom: .5em; letter-spacing: -.02em; } .card p { color: var(--muted); margin: 0 0 1em; font-size: .96rem; } /* Laufende Nummer statt Symbol – 01, 02, 03 … */ .card .icon { font-size: .78rem; font-weight: 800; letter-spacing: .16em; color: var(--gold-ink); display: block; margin-bottom: 14px; font-variant-numeric: tabular-nums; } /* Weiterführender Link am Fuß der Spalte, mit gelbem Unterstrich */ .card > a:last-child { font-size: .9rem; font-weight: 700; box-shadow: inset 0 -.4em 0 rgba(242,197,0,.4); } .card > a:last-child:hover { box-shadow: inset 0 -1em 0 rgba(242,197,0,.55); } /* Bild-Text-Bereich (z. B. Vorstellung der Familie) */ .media-row { display: grid; gap: 40px; align-items: center; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); max-width: 1000px; margin: 0 auto; } .media-row img { width: 100%; border-radius: var(--r); box-shadow: var(--shadow); display: block; } .media-row h2 { font-size: clamp(1.6rem, 3vw, 2.1rem); } .media-row p { color: var(--muted); } .media-row .sig { color: var(--gold-ink); font-weight: 700; font-size: .92rem; letter-spacing: .04em; margin-top: 18px; } /* Platzhalter, solange noch kein Foto hinterlegt ist */ .foto-platzhalter { aspect-ratio: 4 / 3; border: 2px dashed var(--line); border-radius: var(--r); background: var(--paper); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; color: var(--muted); gap: 8px; } .foto-platzhalter .ph-icon { font-size: 2.4rem; } .foto-platzhalter code { background: var(--bg); padding: 3px 8px; border-radius: 5px; font-size: .85rem; } @media (max-width: 780px) { .media-row { grid-template-columns: 1fr; gap: 26px; } } /* Faktenzeile */ .facts { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); text-align: center; } .fact { padding: 22px 16px; } .fact .num { font-weight: 850; font-size: 2.6rem; color: var(--ink); display: block; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; } .fact .lbl { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-top: 8px; display: block; } /* ---------- Chronik-Zeitstrahl ---------- */ .timeline { max-width: 760px; margin: 0 auto; position: relative; padding-left: 34px; } .timeline::before { content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: var(--line); } .tl-item { position: relative; padding-bottom: 34px; } .tl-item::before { content: ""; position: absolute; left: -30px; top: 7px; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 4px var(--bg); } .tl-year { font-size: 1.2rem; color: var(--gold-ink); font-weight: 800; letter-spacing: -.02em; } .tl-item p { margin: .3em 0 0; color: var(--muted); } /* ---------- News / Termine ---------- */ .news-list { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .news-item { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; } /* Farbmarkierung je Gruppe – links am Rand, damit die drei Sorten auch beim schnellen Überfliegen unterscheidbar sind. is-termin = Altbestand, wird wie eine Veranstaltung behandelt. */ .news-item.is-veranstaltung, .news-item.is-termin { border-left: 4px solid var(--gold); } .news-item.is-liefertermin { border-left: 4px solid var(--wine); } .news-item.is-news { border-left: 4px solid var(--line); } .news-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; } .news-date { font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--gold-ink); background: rgba(242,197,0,.16); padding: 4px 10px; border-radius: 2px; } .news-tag { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 3px 10px; border-radius: 20px; } .news-item h3 { font-size: 1.2rem; margin-bottom: .3em; } .news-item .text { color: var(--muted); white-space: pre-line; } .news-empty { text-align: center; color: var(--muted); padding: 40px 0; } /* PDF-Anhang – sitzt immer am unteren Rand der Karte */ .news-pdf { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); } .news-pdf a { font-weight: 600; font-size: .92rem; } /* ---------- Kontakt ---------- */ /* ---------- Auszeichnungen (Startseite) ---------- Ein Jahr je Kachel, die Ehrungen darunter als Liste. */ .awards { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); } .award { background: none; border: 0; border-top: 2px solid var(--line); padding: 18px 0 0; box-shadow: none; } .award-year { font-weight: 850; font-size: 1.9rem; letter-spacing: -.04em; color: var(--gold-ink); display: block; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .awards-mehr { margin-top: 18px; } /* Ohne diese Zeile bliebe der Block sichtbar: "display: grid" der Klasse ist spezifischer als die Browser-Regel für das hidden-Attribut. */ .awards[hidden] { display: none; } .award ul { margin: 0; padding: 0; list-style: none; } .award li { color: var(--muted); font-size: .89rem; margin-bottom: 5px; padding-left: 14px; position: relative; } .award li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 2px; background: var(--gold); } .award li::marker { color: var(--gold-ink); } /* Auszeichnung mit hinterlegter Urkunde: anklickbar, sonst wie Text. Als