/* ========================================================================== Honig aus Kirchentellinsfurt – Stylesheet Eine Datei, keine Abhängigkeiten, kein Build. Aufbau 1 Schrift 2 Designsystem (Custom Properties) 3 Grundlagen und Reset 4 Hilfsklassen 5 Header und Navigation 6 Buttons und CTA 7 Biene 8 Hero 9 Abschnitte allgemein 10 Honig / Produkt 11 Zahlenband 12 Imkerei 13 Glasrückgabe 14 Weitere Produkte 15 Impressionen 16 Kontakt 17 Footer 18 Textseiten (Impressum, Datenschutz, 404) 19 Reduzierte Bewegung ========================================================================== */ /* 1 Schrift ============================================================== */ /* Jost* – SIL Open Font License 1.1, siehe assets/fonts/jost/OFL.txt Subset "latin", statische Schnitte, rein lokal. Die Seite lädt nichts von Google Fonts und nichts von irgendeinem anderen externen Server. Drei Gewichte, mehr nicht – erzeugt mit build/make-fonts.py aus dem Variable Font in source-assets/fonts/: 300 Light Grundton: Fließtext, Navigation, UI 400 Regular kleine Versaletiketten, mittlere Auszeichnung 500 Medium Überschriften, Wortmarke, Buttons Light ist die einzige Datei, die im vorgeladen wird (9,6 KB) – Regular und Medium holt der Browser nebenher. Soll später die lizenzierte Dunbar Low eingesetzt werden: Dateien nach assets/fonts/ legen, hier src und font-family anpassen. Sonst ändert sich nichts, alle Größen hängen an --font-display / --font-body. */ @font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Jost'; src: url('../fonts/jost/Jost-Medium.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; } /* 2 Designsystem ========================================================= */ :root { /* Farbe. --ink ist kein Reinschwarz, sondern das sehr dunkle, leicht bläuliche Schwarz des Honigetiketts. Es gibt bewusst KEINE Akzentfarbe. */ --ink: #191d2b; --paper: #f7f5f1; --ink-80: #3d4152; --ink-55: #7b7e8c; --ink-30: #b6b8c0; --ink-14: #dcdde1; --ink-07: #ebebee; /* Typografie */ --font-display: 'Jost', 'Century Gothic', 'Futura', 'Avenir Next', 'Trebuchet MS', system-ui, sans-serif; --font-body: var(--font-display); /* Fließende Typoskala. Alle Werte skalieren zwischen 320 px und 1440 px. */ --step-0: clamp(1rem, 0.96rem + 0.20vw, 1.125rem); --step-1: clamp(1.13rem, 1.05rem + 0.38vw, 1.38rem); --step-2: clamp(1.35rem, 1.19rem + 0.80vw, 1.88rem); --step-3: clamp(1.60rem, 1.29rem + 1.55vw, 2.63rem); --step-4: clamp(1.95rem, 1.36rem + 2.95vw, 3.88rem); --step-5: clamp(2.40rem, 1.32rem + 5.40vw, 6.00rem); /* Abstände */ --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.25rem; --space-xl: 3.5rem; --space-2xl: clamp(3.5rem, 2rem + 7vw, 7rem); --space-3xl: clamp(5rem, 2.5rem + 11vw, 10rem); /* Struktur */ --border-width: 1px; --border-strong: 2px; --radius: 0; --max-content-width: 78rem; --gutter: clamp(1.25rem, 0.6rem + 3.2vw, 4rem); /* Bewegung */ --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --dur: 240ms; --dur-slow: 620ms; } /* 3 Grundlagen und Reset ================================================= */ *, *::before, *::after { box-sizing: border-box; } html { /* Kein smooth-scroll erzwingen, wenn Bewegung reduziert werden soll – das wird in Abschnitt 19 zurückgenommen. */ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); line-height: 1.55; /* Jost Light. Der leichte Schnitt ist der Grundton der ganzen Seite – Fließtext, Navigation, UI. Schwerer wird es nur da, wo Hierarchie oder Lesbarkeit es verlangen (400 und 500, siehe Abschnitt 1). */ font-weight: 300; /* Ausgeliefert werden nur 300/400/500. Fordert irgendetwas 600 oder 700 an, nimmt der Browser den nächstgelegenen Schnitt – er soll daraus aber kein künstliches Fett rechnen, das die feinen Strichstärken zudrückt. Nur die Breite ist gesperrt: die Kursive von entsteht weiter synthetisch, einen eigenen Kursivschnitt gibt es nicht. */ font-synthesis-weight: none; /* Sicherheitsnetz gegen versehentlichen horizontalen Überlauf durch die sehr großen Schriftgrade. */ overflow-x: hidden; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, figure, blockquote, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } /* Auszeichnung im Fließtext läuft über Medium, nicht über Fett. */ strong, b { font-weight: 500; } img, picture, svg { display: block; max-width: 100%; } img { height: auto; } a { color: inherit; } button { font: inherit; color: inherit; background: none; border: none; padding: 0; cursor: pointer; } /* Sichtbarer Fokus – überall, ohne Ausnahme. */ :focus-visible { outline: var(--border-strong) solid var(--ink); outline-offset: 3px; } ::selection { background: var(--ink); color: var(--paper); } /* 4 Hilfsklassen ========================================================= */ .wrap { width: 100%; max-width: var(--max-content-width); margin-inline: auto; padding-inline: var(--gutter); } /* Grid- und Flex-Elemente haben von Haus aus min-width:auto und schrumpfen deshalb nicht unter die Eigenbreite ihres Inhalts. Ein Foto mit width="1200" zwingt seine Spalte damit auf 1200 px – auf dem Handy läuft die ganze Seite über den Rand hinaus. min-width:0 hebt das auf. */ .hero__grid > *, .two-col > *, .produkte > *, .gallery > *, .retour > *, .band li, .site-header__inner > * { min-width: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip-link { position: absolute; left: var(--space-s); top: -4rem; z-index: 100; background: var(--ink); color: var(--paper); padding: var(--space-2xs) var(--space-s); font-weight: 500; letter-spacing: 0.04em; transition: top var(--dur) var(--ease); } .skip-link:focus-visible { top: var(--space-s); outline-color: var(--paper); } /* Große plakative Aussage. Kleine Zeilenhöhe, enges Tracking, Versalien. */ .display { font-family: var(--font-display); font-weight: 300; line-height: 0.88; letter-spacing: -0.025em; text-transform: uppercase; text-wrap: balance; hyphens: none; /* Sicherheitsnetz: greift nur, wenn ein Wort allein nicht in eine Zeile passt. Ein umbrochenes Wort ist hässlich, ein waagerechter Überlauf schlimmer. */ overflow-wrap: break-word; } .lede { font-size: var(--step-1); line-height: 1.45; max-width: 46ch; color: var(--ink-80); } /* Kleine, gesperrte Auszeichnung – das „Etikett“-Detail des Systems. */ .eyebrow { font-size: 0.75rem; font-weight: 400; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-55); } .rule { border: 0; border-top: var(--border-width) solid var(--ink-14); } /* 5 Header und Navigation ================================================ */ .site-header { border-bottom: var(--border-width) solid var(--ink); background: var(--paper); } .site-header__inner { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-xs) var(--space-m); padding-block: var(--space-s); } /* Wortmarke in Kleinschreibung – die Geste stammt direkt vom Etikett („deutscher blütenhonig“). */ .wordmark { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; line-height: 1.05; letter-spacing: -0.02em; text-decoration: none; text-transform: lowercase; } .wordmark span { display: block; } .wordmark b { font-weight: 500; } .wordmark .wordmark__sub { font-size: 0.6em; font-weight: 300; color: var(--ink-55); letter-spacing: 0.01em; } .site-nav ul { display: flex; flex-wrap: wrap; /* Der Spaltenabstand schrumpft mit, damit alle vier Punkte auf einem 375-px-Display in eine Zeile passen. */ gap: var(--space-2xs) clamp(0.85rem, 2.6vw, 1.5rem); } .site-nav a { display: inline-block; /* Touch-Ziel: mit dem vertikalen Padding sicher über 44 px. */ padding-block: 0.7rem; font-size: 0.9rem; font-weight: 300; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; position: relative; } .site-nav a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: var(--border-strong); background: var(--ink); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .site-nav a:hover::after, .site-nav a:focus-visible::after { transform: scaleX(1); } /* 6 Buttons und CTA ====================================================== */ .cta { --cta-fg: var(--paper); --cta-bg: var(--ink); position: relative; display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 3.25rem; padding: 0.9rem 1.5rem; background: var(--cta-bg); color: var(--cta-fg); border: var(--border-strong) solid var(--ink); font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; text-decoration: none; overflow: visible; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .cta:hover, .cta:focus-visible { --cta-fg: var(--ink); --cta-bg: var(--paper); } /* Der Pfeil ist ein Inline-SVG, kein Textzeichen: das latin-Subset der Schrift enthält kein „→“, sonst würde eine fremde Schrift einspringen. */ .cta__arrow { width: 1.1em; height: 1.1em; flex: none; transition: transform var(--dur) var(--ease); } .cta:hover .cta__arrow, .cta:focus-visible .cta__arrow { transform: translateX(0.35em); } /* „SUMM.“ erscheint zusätzlich – der eigentliche Buttontext bleibt immer unverändert lesbar. */ .cta__summ { position: absolute; right: 0.1rem; bottom: calc(100% + 0.35rem); font-size: 0.7rem; font-weight: 400; letter-spacing: 0.2em; color: var(--ink-55); opacity: 0; transform: translateY(0.35rem); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); pointer-events: none; } .cta:hover .cta__summ, .cta:focus-visible .cta__summ { opacity: 1; transform: none; } .cta-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-m); } /* Sekundäre Aktion: „E-Mail-Adresse kopieren“. Wird per JS eingeblendet. */ .btn-copy { min-height: 3rem; padding: 0.7rem 1.1rem; border: var(--border-width) solid var(--ink-30); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease); } .btn-copy:hover, .btn-copy:focus-visible { border-color: var(--ink); background: var(--ink-07); } .btn-copy[hidden] { display: none; } /* 7 Biene ================================================================ */ /* Sehr reduzierte, selbst gezeichnete SVG-Biene. Rein dekorativ und vor Screenreadern verborgen. Sie fliegt nur bei Hover/Fokus auf dem CTA. */ .bee { position: absolute; width: 2.1rem; height: 2.1rem; right: -0.6rem; top: -1.6rem; color: var(--ink); pointer-events: none; opacity: 0; transform: translate(0, 0) rotate(0deg); transition: opacity var(--dur) var(--ease); } .cta-wrap { position: relative; display: inline-block; } .cta-wrap:hover .bee, .cta-wrap:focus-within .bee { opacity: 1; animation: bee-flight 2.6s var(--ease) infinite; } /* Die Flügel sitzen in einer bereits gedrehten -Gruppe. transform-box: fill-box sorgt dafür, dass das Flattern um die eigene Mitte läuft und die Drehung der Gruppe nicht überschreibt. */ .bee__wing { transform-box: fill-box; transform-origin: 50% 85%; } .cta-wrap:hover .bee__wing, .cta-wrap:focus-within .bee__wing { animation: bee-wing 140ms ease-in-out infinite alternate; } @keyframes bee-flight { 0% { transform: translate(0, 0) rotate(0deg); } 25% { transform: translate(-2.6rem, -0.7rem) rotate(-12deg); } 50% { transform: translate(-4.6rem, 0.5rem) rotate(6deg); } 75% { transform: translate(-2.2rem, 1.1rem) rotate(14deg); } 100% { transform: translate(0, 0) rotate(0deg); } } @keyframes bee-wing { from { transform: scaleY(1); } to { transform: scaleY(0.45); } } /* 8 Hero ================================================================= */ .hero { padding-block: var(--space-2xl) var(--space-xl); border-bottom: var(--border-width) solid var(--ink); } .hero__grid { display: grid; gap: var(--space-xl); align-items: end; } @media (min-width: 60rem) { .hero__grid { grid-template-columns: 1.15fr 0.85fr; gap: var(--space-2xl); } } .hero__title { font-size: var(--step-5); margin-bottom: var(--space-m); } .hero__title span { display: block; } .hero__lede { margin-bottom: var(--space-l); } /* Preisblock mit sehr blassem Wabenraster im Hintergrund. Das Muster ist ein winziges Inline-SVG, kein Bild-Request. */ .price { display: inline-flex; flex-direction: column; padding: var(--space-s) var(--space-m); margin-bottom: var(--space-l); border: var(--border-strong) solid var(--ink); background-color: var(--paper); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='48' viewBox='0 0 28 48'%3E%3Cpath d='M14 0 L28 8 L28 24 L14 32 L0 24 L0 8 Z M14 32 L28 40 L28 56 M14 32 L0 40 L0 56' fill='none' stroke='%23191d2b' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); background-position: center; } .price__amount { font-family: var(--font-display); font-size: var(--step-4); font-weight: 500; line-height: 0.9; letter-spacing: -0.03em; } .price__unit { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-55); margin-top: var(--space-3xs); } .hero__figure { margin: 0; } .hero__note { margin-top: var(--space-2xs); font-size: 0.8rem; color: var(--ink-55); } /* Fotos: monochrom als Grundzustand, Farbe kommt beim Hover zurück. Die Farbe trägt keinerlei Information – auf Touch-Geräten sind die Bilder deshalb dauerhaft farbig (siehe unten). */ .photo { /* Ohne width:100% richtet sich ein Bild mit srcset nach der aus sizes abgeleiteten Eigenbreite und füllt seine Spalte nicht aus. */ width: 100%; filter: grayscale(1) contrast(1.06); transition: filter var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); background: var(--ink-07); } .photo-frame { overflow: hidden; border: var(--border-width) solid var(--ink); } .photo-frame:hover .photo { filter: grayscale(0) contrast(1); transform: scale(1.03); } @media (hover: none) { /* Ohne Hover gäbe es keinen Weg zur Farbe – also gleich farbig zeigen. */ .photo { filter: grayscale(0); } } /* 9 Abschnitte allgemein ================================================= */ .section { padding-block: var(--space-2xl); border-bottom: var(--border-width) solid var(--ink); } .section--tight { padding-block: var(--space-xl); } .section__head { margin-bottom: var(--space-l); } .section__title { font-size: var(--step-4); } .section__title + .lede { margin-top: var(--space-m); } .two-col { display: grid; gap: var(--space-xl); align-items: start; } @media (min-width: 55rem) { .two-col { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } .two-col--wide-left { grid-template-columns: 1.25fr 0.75fr; } .two-col--wide-right { grid-template-columns: 0.75fr 1.25fr; } } /* 10 Honig / Produkt ===================================================== */ /* Eine Stufe unter der h1: die Startüberschrift soll die größte bleiben. */ .honig__stack { font-size: var(--step-4); } .honig__stack span { display: block; } .honig__stack .is-quiet { color: var(--ink-30); } .facts { margin-top: var(--space-l); border-top: var(--border-width) solid var(--ink-14); } .facts div { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-2xs) var(--space-m); padding-block: var(--space-xs); border-bottom: var(--border-width) solid var(--ink-14); } .facts dt { font-size: 0.8rem; font-weight: 400; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-55); } .facts dd { margin: 0; font-weight: 400; } /* 11 Zahlenband ========================================================== */ .band { padding-block: var(--space-xl); border-bottom: var(--border-width) solid var(--ink); background: var(--ink); color: var(--paper); } /* Drei Zahlen: schmal zweispaltig, die letzte nimmt die volle Breite ein – das ist ruhiger als eine halbe Lücke. Ab 48 rem stehen alle drei nebeneinander. */ .band ul { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-l) var(--space-m); } .band li:last-child { grid-column: 1 / -1; } @media (min-width: 48rem) { .band ul { grid-template-columns: repeat(3, 1fr); } .band li:last-child { grid-column: auto; } } .band li { /* Ohne JS und bei reduzierter Bewegung sofort sichtbar – der Reveal wird ausschließlich additiv per .js-reveal ergänzt. */ border-top: var(--border-strong) solid var(--paper); padding-top: var(--space-s); } .band__value { display: block; font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; } .band__label { display: block; margin-top: var(--space-3xs); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .js-reveal .band li { opacity: 0; transform: translateY(1.25rem); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease); transition-delay: calc(var(--i, 0) * 90ms); } .js-reveal .band li.is-in { opacity: 1; transform: none; } /* 12 Imkerei ============================================================= */ .imkerei__quote { font-size: var(--step-4); margin-bottom: var(--space-l); } .imkerei__quote span { display: block; } /* 13 Glasrückgabe ======================================================== */ .retour { display: grid; gap: var(--space-m); align-items: center; } @media (min-width: 48rem) { .retour { grid-template-columns: auto 1fr; gap: var(--space-xl); } } .retour__mark { font-family: var(--font-display); font-size: var(--step-3); font-weight: 500; line-height: 0.95; letter-spacing: -0.02em; text-transform: uppercase; padding: var(--space-m); border: var(--border-strong) solid var(--ink); } /* 14 Weitere Produkte ==================================================== */ /* Zwei Karten ohne Foto: die Fotos zu Saft und Brand kommen später in die Galerie. Getragen wird die Karte deshalb allein von Typografie und Rahmen – derselben Sprache wie der Preisblock im Kopfbereich. */ .produkte { display: grid; gap: var(--space-m); } @media (min-width: 55rem) { .produkte { grid-template-columns: 1fr 1fr; gap: var(--space-xl); } } .produkt { display: flex; flex-direction: column; gap: var(--space-s); padding: var(--space-m); border: var(--border-strong) solid var(--ink); } @media (min-width: 40rem) { .produkt { padding: var(--space-l); } } .produkt__name { font-size: var(--step-3); } /* Zeilenmaß. Greift nur, wenn die Karte breiter ist als der Text lesbar sein sollte – also vor allem bei der dritten Karte über die volle Breite. */ .produkt > p, .produkt > ol { max-width: 46ch; } /* Der Preisblock erbt das Wabenmuster von .price, braucht hier aber weder den Außenabstand nach unten noch den eigenen Rahmen: er sitzt schon in einem. Ein Rahmen im Rahmen wäre eine Linie zu viel. */ .produkt__preis { margin-bottom: 0; align-self: start; border-width: var(--border-width); } /* Die Faktentabelle steht immer am Fuß der Karte, damit beide Karten nebeneinander auf derselben Höhe abschließen. */ .produkt .facts { margin-top: auto; } .produkt a { text-underline-offset: 0.2em; } /* Der Jugendschutz-Hinweis sitzt am Fuß seiner Karte, auf derselben Höhe wie die Faktentabelle der Nachbarkarte. */ .produkt__hinweis { margin-top: auto; font-size: 0.8rem; color: var(--ink-55); } /* Das Rezeptfenster. Es sieht aus wie eine Produktkarte, nur breiter und über der Seite: derselbe kräftige Rahmen, dasselbe Papier, dieselben Abstände. Der Browser bringt für eigene Regeln mit, die hier alle überschrieben werden – Rahmen, Polsterung, Breite, Position. Wichtig ist dabei `position: static`: ein steht von Haus aus absolut, was nur im Modalbetrieb sinnvoll ist. Für die Notlösung unten muss es sich wieder in den normalen Textfluss einreihen. */ .rezept-dialog { position: static; /* Am Zeilenmaß bemessen, nicht am Platz: Der Text darin läuft auf 44 Zeichen, dazu die Polsterung links und rechts. Breiter wäre die Tafel nur leerer. */ width: min(36rem, 100%); max-width: none; margin: 0; padding: var(--space-m); border: var(--border-strong) solid var(--ink); background: var(--paper); color: var(--ink); } @media (min-width: 40rem) { .rezept-dialog { padding: var(--space-l); } } .rezept-dialog > p, .rezept-dialog > ol { max-width: 44ch; } .rezept-dialog > * + * { margin-top: var(--space-s); } /* Als Fenster schwebt es mittig über der Seite. [open] setzt ausschließlich showModal(), also nur der Weg mit JavaScript – die Notlösung unten arbeitet mit :target und lässt das Attribut unberührt. inset:0 zusammen mit margin:auto zentriert das Fenster in beide Richtungen, ohne dass eine Größe bekannt sein muss. dvh statt vh, weil auf dem Handy die Adressleiste mitwandert; vh davor als Rückfall für ältere Browser. */ .rezept-dialog[open] { position: fixed; inset: 0; margin: auto; width: min(36rem, calc(100vw - 2 * var(--space-s))); max-height: calc(100vh - 2 * var(--space-m)); max-height: calc(100dvh - 2 * var(--space-m)); overflow: auto; } .rezept-dialog::backdrop { background: rgba(25, 29, 43, 0.7); } /* Schließkreuz oben rechts. Es erscheint nur, wenn JavaScript es einblendet – ohne Modal gibt es nichts zu schließen. */ .rezept-dialog__zu { float: right; margin: calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1) 0 var(--space-s); width: 2.75rem; height: 2.75rem; font-size: 1.5rem; line-height: 1; color: var(--ink-55); transition: color var(--dur) var(--ease); } .rezept-dialog__zu:hover, .rezept-dialog__zu:focus-visible { color: var(--ink); } .rezept-dialog__zu[hidden] { display: none; } /* Notlösung ohne JavaScript: Der Link ist dann ein gewöhnlicher Sprung auf die Kennung, und das Rezept klappt unter den Karten auf. Autorenregeln schlagen die Browserregel `dialog:not([open]) { display: none }`. */ .rezept-dialog:not([open]) { display: none; } .rezept-dialog:target { display: block; margin-top: var(--space-xl); } /* Ein Ausgang muss es auch dann geben, wenn kein Schließkreuz da ist: ohne JavaScript führt ein gewöhnlicher Link zurück zu den Karten und räumt dabei die Kennung aus der Adresse — womit :target nicht mehr greift und die Tafel wieder zuklappt. Im Fenster wäre der Link überflüssig, dort schließen Kreuz, Esc und der Klick daneben. */ .rezept-dialog__zurueck { display: none; } .rezept-dialog:target .rezept-dialog__zurueck { display: block; } /* Die Zubereitung. Der Reset in Abschnitt 3 nimmt allen Listen ihre Zählmarken – für ein Rezept braucht es sie, hier kommen sie über einen Zähler zurück. Die Ziffer steht in derselben kleinen, gesperrten Schrift wie die Abschnittsnummern der Seite, damit die Liste nicht wie aus einem Textverarbeitungsprogramm aussieht. */ .rezept { counter-reset: schritt; } .rezept li { position: relative; counter-increment: schritt; padding-left: 1.9rem; margin-bottom: var(--space-2xs); } .rezept li:last-child { margin-bottom: 0; } .rezept li::before { content: counter(schritt); position: absolute; left: 0; top: 0.3em; font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; color: var(--ink-55); } /* Die Sorten als kleine Etiketten – dieselbe gesperrte Versalschrift wie .eyebrow, nur eingerahmt. */ .sorten { display: flex; flex-wrap: wrap; gap: var(--space-2xs); } .sorten li { padding: var(--space-3xs) var(--space-2xs); border: var(--border-width) solid var(--ink-30); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-80); } /* 15 Impressionen ======================================================== */ /* Editoriales Raster: bewusst ungleiche Größen, keine Slider-Bibliothek. */ .gallery { display: grid; grid-template-columns: 1fr; gap: var(--space-m); } @media (min-width: 40rem) { .gallery { grid-template-columns: repeat(6, 1fr); gap: var(--space-m); } /* Fünf Zeilen à sechs Spalten, bewusst ungleich aufgeteilt: a Film (hoch) | b Garten (sehr breit) c Biene 1:1 | d Kiste | e Sieb f Beet (hoch) | g Stand (breit) i Flaschen | j Saftkarton (je zur Hälfte, das Produktpaar) h Deckelband über die ganze Breite Die breiten, flachen Bilder sitzen am unteren Rand ihrer Zeile, damit sie neben den hohen Formaten nicht in der Luft hängen. */ .gallery__item--a { grid-column: span 2; } .gallery__item--b { grid-column: span 4; align-self: end; } .gallery__item--c { grid-column: span 2; } .gallery__item--d { grid-column: span 2; } .gallery__item--e { grid-column: span 2; } .gallery__item--f { grid-column: span 2; } .gallery__item--g { grid-column: span 4; align-self: end; } .gallery__item--i { grid-column: span 3; } .gallery__item--j { grid-column: span 3; } .gallery__item--h { grid-column: 1 / -1; } } .gallery figure { margin: 0; } .gallery figcaption { margin-top: var(--space-2xs); font-size: 0.75rem; font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-55); } /* Der Film in der Galerie. Er verhält sich wie ein Foto: monochrom als Grundzustand, Farbe beim Hover (siehe .photo in Abschnitt 8). */ .gallery video.photo { width: 100%; height: auto; /* object-fit greift nur, wenn das Seitenverhältnis doch einmal abweicht. */ object-fit: cover; } /* Schaltflächen zum Film. Sie stehen in der Bildunterschrift statt über dem Bild – dieselbe kleine, gesperrte Versalzeile, nur klickbar. main.js blendet sie ein; ohne JavaScript läuft der Film nicht und sie fehlen zu Recht. */ .gallery figcaption .video-schalter { display: inline-flex; gap: var(--space-2xs); margin-left: var(--space-2xs); } .video-btn { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; color: var(--ink); border-bottom: var(--border-width) solid var(--ink-30); /* Das Touch-Ziel wäre sonst nur so hoch wie die 0,75-rem-Zeile. */ padding-block: 0.5rem; transition: border-color var(--dur) var(--ease); } .video-btn:hover, .video-btn:focus-visible { border-color: var(--ink); } .video-btn[hidden] { display: none; } /* 16 Kontakt ============================================================= */ .kontakt { background: var(--ink); color: var(--paper); } .kontakt .section__title { font-size: var(--step-4); } .kontakt .section__title span { display: block; } .kontakt .lede { color: rgba(247, 245, 241, 0.78); } .kontakt .eyebrow { color: rgba(247, 245, 241, 0.6); } .kontakt :focus-visible { outline-color: var(--paper); } .kontakt .cta { --cta-fg: var(--ink); --cta-bg: var(--paper); border-color: var(--paper); } .kontakt .cta:hover, .kontakt .cta:focus-visible { --cta-fg: var(--paper); --cta-bg: transparent; } .kontakt .cta__summ { color: rgba(247, 245, 241, 0.6); } .kontakt .bee { color: var(--paper); } .kontakt .btn-copy { border-color: rgba(247, 245, 241, 0.4); } .kontakt .btn-copy:hover, .kontakt .btn-copy:focus-visible { border-color: var(--paper); background: rgba(247, 245, 241, 0.1); } .kontakt__status { margin-top: var(--space-xs); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; min-height: 1.2em; color: rgba(247, 245, 241, 0.75); } /* 17 Footer ============================================================== */ .site-footer { padding-block: var(--space-xl); } .site-footer__inner { display: flex; flex-wrap: wrap; gap: var(--space-m) var(--space-xl); justify-content: space-between; align-items: flex-start; } .site-footer__claim { font-family: var(--font-display); font-size: var(--step-1); font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; } .site-footer nav ul { display: flex; flex-wrap: wrap; gap: var(--space-m); } .site-footer a { text-underline-offset: 0.25em; } .site-footer__meta { font-size: 0.8rem; color: var(--ink-55); } /* 18 Textseiten ========================================================== */ .page { padding-block: var(--space-2xl) var(--space-3xl); } /* Die Textseiten tragen .wrap und .prose gemeinsam. Das schmalere max-width aus .prose gewinnt – zusammen mit margin-inline:auto aus .wrap wäre die Spalte damit zentriert. Die übrige Website ist konsequent linksbündig, also bleibt sie das hier auch. */ .prose { max-width: calc(60ch + 2 * var(--gutter)); margin-inline: 0 auto; } .prose h1 { font-size: var(--step-4); margin-bottom: var(--space-l); } .prose h2 { font-family: var(--font-display); font-size: var(--step-2); font-weight: 500; letter-spacing: -0.01em; margin-top: var(--space-xl); margin-bottom: var(--space-s); } .prose h3 { font-size: var(--step-1); font-weight: 400; margin-top: var(--space-l); margin-bottom: var(--space-2xs); } .prose p, .prose ul, .prose dl { margin-bottom: var(--space-s); } .prose ul { list-style: none; padding-left: 0; } .prose ul li { position: relative; padding-left: 1.25rem; margin-bottom: var(--space-3xs); } .prose ul li::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 0.5rem; height: 0.5rem; background: var(--ink); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .prose address { font-style: normal; } .prose a { text-underline-offset: 0.2em; } .page-404 { min-height: 70vh; display: flex; flex-direction: column; justify-content: center; padding-block: var(--space-2xl); } .page-404 h1 { font-size: var(--step-5); margin-bottom: var(--space-m); } /* 19 Reduzierte Bewegung ================================================= */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } /* Die Biene bleibt sichtbar, fliegt aber nicht. */ .cta-wrap:hover .bee, .cta-wrap:focus-within .bee { animation: none; opacity: 1; } .cta-wrap:hover .bee__wing, .cta-wrap:focus-within .bee__wing { animation: none; } .photo-frame:hover .photo { transform: none; } /* Der Reveal darf niemals dazu führen, dass Inhalt unsichtbar bleibt. */ .js-reveal .band li { opacity: 1; transform: none; } }