/* Theme Name: Vegionale Theme URI: https://www.vegionale.de Author: Redaktion Vegionale Description: Magazin-Theme der Vegionale. Design nach der Feedback-Seite: Petrol-Grund, roter Rahmen, rote Überschriften, Karten mit rotem Balken. Version: 1.0 Requires at least: 6.0 Requires PHP: 8.0 License: GPLv2 or later Text Domain: vegionale */ :root { --rot: #a12413; --rot-dunkel: #7d1a0c; /* Die leise Trennlinie: dieselbe Farbe wie --rot, nur zurückgenommen. Über color-mix zieht sie beim Themenwechsel von selbst mit — im Theme „minimal“ wird aus dem Rot ein Schwarz und daraus hier ein Grau. */ --linie: rgba(161, 36, 19, 0.35); --linie: color-mix(in srgb, var(--rot) 35%, transparent); --petrol: #a6c9cd; --petrol-hell: #c3dfe2; --papier: #fdfdfc; --papier-artikel: #e7eeed; /* Artikelfläche: leicht gräulich mit zarter Türkis-Note */ --text: #1f2a2c; --text-leise: #46595c; --rahmen: 0.5rem; --radius: 6px; --spalte: 72rem; --schrift: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --serif: Georgia, "Iowan Old Style", "Times New Roman", serif; } *, *::before, *::after { box-sizing: border-box; } html { min-height: 100%; background-color: var(--petrol); border: var(--rahmen) solid var(--rot); -webkit-text-size-adjust: 100%; } body { margin: 0; background-color: var(--petrol); color: var(--text); font-family: var(--schrift); font-size: 1.0625rem; line-height: 1.6; overflow-wrap: break-word; } .spalte { max-width: var(--spalte); margin: 0 auto; padding: 0 1.5rem; } a { color: var(--rot-dunkel); } a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible { outline: 3px solid var(--rot); outline-offset: 2px; } img { max-width: 100%; height: auto; } /* ------------------------------------------------------------------ Kopf -- */ .kopf { padding: 1.75rem 0 0; } .kopf__logo { display: block; width: 100%; max-width: 100%; height: auto; margin: 0 0 0.25rem; } .kopf__claim { margin: 0 0 1.25rem; font-size: 0.95rem; color: var(--text-leise); } /* Logo-Zeile mit Menüknopf (Knopf nur mobil sichtbar) */ .kopf__oben { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; } /* Feste Flex-Basis: sonst rendert Firefox das Prozent-breite Logo als 0. */ .kopf__marke { flex: 0 1 22rem; min-width: 0; } .nav-toggle { display: none; } .nav-toggle__text { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Navigation — die Leiste klebt beim Scrollen oben am Rand. Der rote Rahmen von liegt darüber, deshalb setzt „top" auf der Rahmenstärke auf; sonst schöbe sich die Leiste unter den Rand. */ /* ------------------------------------------------------ Linienführung -- Vier Varianten zum Ausprobieren, umschaltbar über die Knopfreihe rechts oben (data-linien am ). Der Regelsatz ist so gebaut, dass die Rahmenstärken INNERHALB einer Variante nie wechseln — nur die Farben. Sonst springt die Leiste beim Scrollen um ein paar Pixel. Wo die Kanten sitzen, hat eine Bedeutung: an .spalte → sie enden am Magazinrand, denn
nutzt dieselbe Spalte an .navleiste → sie laufen über die ganze Bildschirmbreite Deshalb wandert die Unterkante beim Scrollen von der Spalte zur Leiste: Im Ruhezustand setzt sie das Menü vom Magazin ab, angeklebt trennt sie die schwebende Leiste von der Seite. */ .navleiste { position: sticky; top: 0; z-index: 40; /* Im Ruhezustand trägt die Leiste selbst keine Fläche — das Papierfeld sitzt an der Spalte darin. Grund: Lag der Papierton über die ganze Bildschirmbreite, während die Linien am Magazinrand endeten, standen zwei Kanten nebeneinander, die nicht zur Deckung kamen. Das Auge liest beide, und der Balken wirkt schief gesetzt. */ background-color: transparent; /* Immer 3 px hoch, auch unsichtbar — sonst wüchse die Leiste beim Ankleben und die Seite ruckte. Nur die Farbe entscheidet. */ border-bottom: 3px solid transparent; } .navleiste .spalte { background-color: var(--papier); border-top: 0 solid var(--rot); border-bottom: 0 solid var(--linie); } /* --- Die Varianten unterscheiden sich NUR im Ruhezustand ---------------- */ /* 1 · keine Linie — nichts zu tun, die Grundregeln stehen auf 0. */ /* 2 · nur oben */ [data-linien="oben"] .navleiste .spalte { border-top-width: 2px; } /* 3 · dünn oben und unten */ [data-linien="duenn"] .navleiste .spalte { border-top-width: 1px; border-bottom-width: 1px; } /* 4 · dick oben und unten */ [data-linien="dick"] .navleiste .spalte { border-top-width: 2px; border-bottom-width: 2px; border-bottom-color: var(--rot); } /* --- Angeklebt: in allen vier Varianten gleich -------------------------- * Oben verschwindet die Kante, unten steht eine dicke über die ganze Breite — und weil sie voll durchläuft, tut es das Papierfeld dann auch. Die höhere Spezifität ist Absicht: Diese Regeln müssen die Varianten oben schlagen. */ [data-linien] .navleiste.klebt, .navleiste.klebt { background-color: var(--papier); border-bottom-color: var(--rot); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } [data-linien] .navleiste.klebt .spalte, .navleiste.klebt .spalte { border-color: transparent; } .navleiste.klebt .nav a { font-size: 1.08rem; padding: 0.85rem 0; } .navleiste .nav a { transition: font-size 0.15s ease, padding 0.15s ease; } .nav ul { display: flex; flex-wrap: wrap; gap: 0 1.5rem; margin: 0; padding: 0; list-style: none; } .nav li { position: relative; } .nav a { display: block; padding: 0.7rem 0; font-weight: 700; color: var(--rot); text-decoration: none; } .nav a:hover { text-decoration: underline; } .nav .current-menu-item > a, .nav .current-category-ancestor > a { text-decoration: underline; } /* Untermenü: auf großen Schirmen ausklappend, auf kleinen immer sichtbar */ .nav ul ul { display: none; position: absolute; z-index: 20; min-width: 12rem; padding: 0.5rem 0.9rem; background-color: var(--petrol-hell); border: 1px solid var(--rot); border-radius: 0 0 var(--radius) var(--radius); } .nav li:hover > ul, .nav li:focus-within > ul { display: block; } .nav ul ul li { display: block; } .nav ul ul a { padding: 0.35rem 0; font-weight: 400; } /* -------------------------------------------------------------- Inhalte -- */ main { padding: 2rem 0 4rem; } h1, h2, h3 { color: var(--rot); line-height: 1.2; } .seitentitel { margin: 0 0 0.35rem; font-size: clamp(1.6rem, 4vw, 2.25rem); } .seitenintro { margin: 0 0 2rem; max-width: 46rem; color: var(--text-leise); } /* Beitragsliste */ .liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1.25rem; margin: 0; padding: 0; list-style: none; } /* Kachelhöhe = 1,5 × Breite (fest, gleich hoch je Zeile) setzt vegionale.js. Was nicht hineinpasst, schneidet .karte { overflow: hidden } ab. */ /* ---------------------------------------------------- Galerien -- */ .startsektion { margin-bottom: 3rem; } .startsektion__titel { font-size: 1.6rem; margin-bottom: 1rem; } .startsektion__titel a { color: inherit; text-decoration: none; } /* Hinweis auf den weiterführenden Beitrag am Artikelende — keine Kachel, sondern eine abgesetzte Fortsetzung. */ .weiterlesen { margin: 2.5rem 0 0; padding-top: 1.1rem; border-top: 3px solid var(--rot); } .weiterlesen__dach { margin: 0 0 .3rem; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--rot); } .weiterlesen__titel { margin: 0 0 .4rem; font-size: clamp(1.25rem, 2.6vw, 1.6rem); } .weiterlesen__titel a { color: inherit; text-decoration: none; } .weiterlesen__titel a:hover { text-decoration: underline; } .weiterlesen__vorspann { margin: 0 0 .4rem; font-weight: 600; } .weiterlesen__anriss { margin: 0; color: var(--text-leise); } .weiterlesen__link { font-weight: 700; color: var(--rot-dunkel); white-space: nowrap; } /* Blocküberschrift („Aus dem Magazin") über mehreren Zwischenüberschriften. */ .startblock__titel { font-size: clamp(1.9rem, 4.5vw, 2.6rem); margin: 0 0 1.25rem; padding-bottom: .4rem; border-bottom: 3px solid var(--rot); } /* Verlinkte Blocküberschriften ohne Unterstrich — der Strich darunter genügt. */ .startblock__titel a { color: inherit; text-decoration: none; } .startsektion__titel--klein { font-size: 1.15rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--text-leise); margin: 0 0 .75rem; } /* Hinweis auf die gedruckte Ausgabe. */ .ausgabe-teaser { display: grid; grid-template-columns: minmax(0, 15rem) 1fr; gap: 1.5rem; align-items: center; margin: 0 0 3rem; padding: 1.25rem; background: var(--papier-artikel); border: 1px solid var(--rot); border-left: 5px solid var(--rot); border-radius: var(--radius); } .ausgabe-teaser__bild img { width: 100%; height: auto; display: block; border-radius: var(--radius); } .ausgabe-teaser__datum { margin: 0 0 .2rem; font-size: .82rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--rot); } .ausgabe-teaser__titel { margin: 0 0 .5rem; font-size: clamp(1.4rem, 3.2vw, 1.9rem); } .ausgabe-teaser__titel a { color: inherit; text-decoration: none; } .ausgabe-teaser__titel a:hover { text-decoration: underline; } .ausgabe-teaser__text { margin: 0 0 .6rem; font-size: 1.05rem; } .ausgabe-teaser__mehr { margin: 0; font-weight: 600; } @media (max-width: 40rem) { .ausgabe-teaser { grid-template-columns: 1fr; gap: 1rem; } } .galerie { position: relative; } .galerie__spur { --sichtbar: 3; --luecke: 1.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--sichtbar) - 1) * var(--luecke)) / var(--sichtbar)); gap: var(--luecke); margin: 0; padding: 0 0 0.5rem; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; } .galerie--zwei .galerie__spur { grid-template-rows: repeat(2, auto); } .galerie__spur > .karte { scroll-snap-align: start; } .galerie__pfeil { position: absolute; top: calc(50% - 1.4rem); z-index: 4; display: flex; align-items: center; justify-content: center; width: 2.8rem; height: 2.8rem; padding: 0; font-size: 1.7rem; line-height: 1; color: var(--rot); background-color: var(--papier); border: 2px solid var(--rot); border-radius: 50%; box-shadow: 0 3px 10px -3px rgba(0, 0, 0, 0.4); cursor: pointer; } .galerie__pfeil--zurueck { left: -0.6rem; } .galerie__pfeil--vor { right: -0.6rem; } .galerie__pfeil:hover { background-color: var(--petrol-hell); } .galerie__pfeil[hidden] { display: none; } .galerie__pfeil[disabled] { opacity: 0.3; cursor: default; } /* Startseite: Desktop-Aufteilung vs. mobile Sektionen. */ .nur-schmal { display: none; } /* Meldungen: waagerecht zur nächsten Meldung wischen / blättern. */ .galerie--meldung .galerie__spur { --sichtbar: 1; align-items: start; } .galerie--meldung .meldung-folie { scroll-snap-align: start; min-width: 0; display: flex; justify-content: center; } .galerie--meldung .meldung-folie .beitrag { max-width: 44rem; } /* * Die Blätterpfeile begleiten den Artikel: In der Meldungs-Galerie stehen sie * als klebende Flex-Elemente neben der Spur, statt absolut oben zu hängen — * so bleiben sie beim Herunterscrollen auf halber Höhe sichtbar. */ .galerie--meldung { display: flex; align-items: flex-start; gap: .25rem; } .galerie--meldung .galerie__spur { flex: 1 1 auto; min-width: 0; } .galerie--meldung .galerie__pfeil { position: sticky; top: 45vh; left: auto; right: auto; flex: 0 0 auto; align-self: flex-start; } .karte { position: relative; display: flex; flex-direction: column; background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(161, 36, 19, 0.35); border-left: 1px solid var(--rot); border-bottom: 1px solid var(--rot); border-radius: var(--radius); overflow: hidden; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .karte:hover { background-color: var(--petrol-hell); box-shadow: 0 6px 18px -8px rgba(0, 0, 0, 0.35); } /* Der Link liegt unter der ganzen Kachel, nicht nur auf Bild und Titel. */ .karte__titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* Elemente, die trotzdem eigenständig klickbar bleiben sollen. */ .karte__rubrik { position: relative; z-index: 2; } .karte__bild { display: block; aspect-ratio: 3 / 2; object-fit: cover; width: 100%; /* Für das Auffalten der Titelkarte auf der Startseite: Der Wechsel vom Ausschnitt zur ganzen Karte soll gleiten, nicht springen. */ transition: aspect-ratio 0.35s ease; } @media (prefers-reduced-motion: reduce) { .karte__bild { transition: none; } } [data-veg-auffalten] { cursor: zoom-in; display: block; } [data-veg-auffalten][data-veg-offen="ja"] { cursor: pointer; } /* Sehr breite Bilder (z. B. Panorama) nicht beschneiden: volle Länge, dafür flacher — der Rest der Kachel füllt sich mit Text. */ .karte__bild--breit { aspect-ratio: auto; height: auto; object-fit: fill; } .karte__inhalt { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; padding: 1rem 1.25rem 1.25rem; /* untere 1.25rem = Abstand zum Boden */ } /* Das Bild behält seine Höhe, der Text füllt den Rest. */ .karte > a { flex: 0 0 auto; } .karte__rubrik, .rubrik { display: inline-block; margin: 0 0 0.4rem; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rot); text-decoration: none; } .karte__titel { margin: 0 0 0.5rem; font-size: 1.3rem; } .karte__titel a { color: var(--rot); text-decoration: none; } .karte__titel a:hover { text-decoration: underline; } /* Vorspann + Fließtext; füllt den Platz bis zum Boden-Abstand und wird darüber hinaus abgeschnitten (feste Kachelhöhe setzt vegionale.js). */ .karte__anriss { flex: 1 1 auto; min-height: 0; overflow: hidden; margin: 0; font-size: 0.98rem; color: var(--text-leise); } .karte__anriss p { margin: 0 0 0.6rem; } .karte__anriss p:last-child { margin-bottom: 0; } .karte__anriss .karte__lead { color: var(--text); } .karte__anriss .karte__zitat { font-weight: 700; } /* Einzelbeitrag */ .beitrag { --pad-x: 2rem; max-width: 44rem; padding: 1.75rem var(--pad-x) 2.5rem; background-color: var(--papier-artikel); border: 1px solid rgba(161, 36, 19, 0.3); border-left: 5px solid var(--rot); border-radius: var(--radius); } .beitrag__dach { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--rot); } .beitrag__titel { margin: 0 0 0.75rem; font-size: clamp(2rem, 5.5vw, 2.9rem); letter-spacing: -0.01em; } .beitrag__vorspann { margin: 0 0 1.5rem; font-size: 1.2rem; line-height: 1.45; color: var(--text-leise); } .beitrag__meta { margin: 0 0 1.5rem; padding-bottom: 1rem; font-size: 0.9rem; color: var(--text-leise); border-bottom: 1px solid rgba(161, 36, 19, 0.25); } /* Die Verfasserzeile steht in derselben Zeile wie Rubrik und Datum, tritt aber etwas hervor — sie ist die Angabe, nach der Leser (und Suchmaschinen) als Erstes schauen. */ .beitrag__autor { font-weight: 600; color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(161, 36, 19, 0.35); } .beitrag__autor:hover, .beitrag__autor:focus-visible { color: var(--rot); border-bottom-color: var(--rot); } .beitrag__text { font-family: var(--serif); font-size: 1.25rem; line-height: 1.75; } .beitrag__text h2 { margin-top: 2rem; font-size: 1.5rem; font-family: var(--schrift); } .beitrag__text figure { margin: 1.75rem 0; } .beitrag__text figcaption { margin-top: 0.4rem; font-family: var(--schrift); font-size: 0.9rem; color: var(--text-leise); } /* -------------------------------------------------- Beitragsbilder -- */ /* Grundhaltung: zentriert. JS ergänzt is-quer / is-hoch / is-quadrat. */ .beitrag__bild { margin: 1.75rem 0; text-align: center; } .beitrag__bild img { border-radius: var(--radius); } /* Querformat: über die ganze Breite des Artikels, randlos bis an die Innenkanten der Kachel. Die Bildunterschrift bleibt eingerückt. */ .beitrag__bild.is-quer, .beitrag__text figure.is-quer { width: calc(100% + 2 * var(--pad-x)); margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); } .beitrag__bild.is-quer img, .beitrag__text figure.is-quer img { display: block; width: 100%; border-radius: 0; } .beitrag__bild.is-quer figcaption, .beitrag__text figure.is-quer figcaption { padding: 0 var(--pad-x); } /* Quadrat / rund: zentriert; die Zielbreite setzt vegionale.js pro Bild (größer, aber gedeckelt auf das Doppelte der Originalauflösung). */ .beitrag__bild.is-quadrat img, .beitrag__text figure.is-quadrat img { display: inline-block; max-width: 100%; height: auto; } /* Hochformat: auf großen Schirmen rechts vom Text, wird umflossen. */ @media (min-width: 48.01rem) { .beitrag__bild.is-hoch, .beitrag__text figure.is-hoch { float: right; width: 45%; max-width: 19rem; margin: 0.4rem 0 1rem 1.75rem; } .beitrag__bild.is-hoch img, .beitrag__text figure.is-hoch img { width: 100%; } } .beitrag__text blockquote { margin: 1.75rem 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 4px solid var(--rot); font-size: 1.25rem; color: var(--rot-dunkel); } /* ------------------------------------------------ Titelkarte (Tiere) -- */ /* Die Karte darf aus der Artikelspalte ausbrechen — sie lebt von den Details, und auf 40 rem sind die Ortsnamen kaum zu lesen. Zwei Schranken: höchstens das Doppelte der Artikelbreite (88 rem), und nie die volle Fensterbreite. Eine randlos über den Schirm laufende Karte wäre kein Artikelbild mehr, sondern ein Hintergrund; die 4 rem Luft halten sie erkennbar als Teil des Beitrags. Auf schmalen Schirmen bleibt sie in der Spalte — dort gibt es nichts auszubrechen. */ /* Die Karte liegt exakt über der Spalte — dasselbe Format wie die Gastro-Karte, die auf template-breit.php ebenfalls die volle Spaltenbreite einnimmt. Vorher stand hier eine Zentrierung über margin-left:50% + translateX(-50%). Die bezieht sich aber auf die Mitte des ELTERNELEMENTS, und das ist .beitrag: 44 rem breit und ohne margin:auto, also linksbündig in der 72-rem-Spalte. Die Karte zentrierte sich damit auf die Artikelmitte und hing links aus der Spalte heraus — sichtbar tiefer und nach links versetzt gegenüber der Startseite. Jetzt wird stattdessen die Innenpolsterung des Artikels zurückgenommen (--pad-x plus die 5 px der roten Kante links), und die Breite ist die Inhaltsbreite der Spalte. */ /* Dasselbe Format wie die Gastro-Karte: 32 rem hoch, roter Rahmen, gleiche Rundung — beide Karten sollen als derselbe Bautyp lesbar sein. Die Breite folgt aus dem Seitenverhältnis der Kartengrafik (2560 × 1706 = 3:2): 48 rem × 2/3 = genau 32 rem. Sie ist damit schmaler als die Gastro-Karte, und das ist Absicht — volle Spaltenbreite BEI 32 rem Höhe hieße auf 2,16 zu beschneiden, und dabei fielen die Störche (11,6 %) und der Ferkelhandel (86,3 %) aus dem Bild. Zwei Marker weniger wäre ein schlechter Tausch für eine gerade Kante. Waagerecht in der SPALTE zentriert, nicht im Artikel: .beitrag ist 44 rem breit und linksbündig: Eine Zentrierung auf das Elternelement zöge die Karte nach links aus der Spalte heraus — genau der Fehler, der vorher hier stand. */ /* Kein Ausbrechen mehr, keine negativen Ränder, keine Zentrierungskunst. Die Titelgeschichte wird seit 02.08.2026 im breiten Layout gebaut (veg_beitrag_artikel_breit), also ohne Artikelkasten — die Karte liegt damit von selbst genau über der Spalte, wie die Gastro-Karte. Vorher stand hier margin-left:50% + translateX(-50%). Das zentrierte auf die Mitte des ELTERNELEMENTS, und das war der 44 rem breite, linksbündige Artikelkasten: Die Karte hing links heraus. Jeder Versuch, das mit negativen Rändern auszugleichen, verschob sie nur woandershin. Der Kasten musste weg, nicht die Ränder. */ .tierkarte { margin: 1.75rem 0; text-align: left; width: 100%; } .tierkarte__rahmen { position: relative; line-height: 0; /* Rahmen und Rundung wie bei .osm-karte (Gastro-Karte) — damit beide Karten als derselbe Bautyp erkennbar sind. */ border: 1px solid var(--rot); border-radius: var(--radius); overflow: hidden; } .tierkarte__zoom { display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; cursor: zoom-in; } .tierkarte__zoom img { display: block; width: 100%; border-radius: 0; } /* Klickfläche über jedem Tier-Symbol. */ .tierkarte__spot { position: absolute; z-index: 2; width: 8%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; outline-offset: 2px; } .tierkarte__spot:hover, .tierkarte__spot:focus-visible { box-shadow: 0 0 0 3px var(--rot), 0 0 0 6px rgba(255, 255, 255, 0.7); background-color: rgba(161, 36, 19, 0.15); } /* Beschriftung als Tooltip nur für Screenreader / beim Fokus sichtbar. */ .tierkarte__spot-text { position: absolute; left: 50%; bottom: 110%; transform: translateX(-50%); padding: 0.2rem 0.5rem; font-size: 0.8rem; line-height: 1.3; white-space: nowrap; color: var(--papier); background-color: var(--rot); border-radius: var(--radius); opacity: 0; pointer-events: none; transition: opacity 0.15s ease; } .tierkarte__spot:hover .tierkarte__spot-text, .tierkarte__spot:focus-visible .tierkarte__spot-text { opacity: 1; } /* Ein Punkt, dessen Symbol nicht in der Kartengrafik steht, zeichnet es selbst: weiße Figur auf schwarzer Scheibe, wie die gedruckten. Etwas kleiner als die unsichtbaren Klickflächen, weil die auch den Rand des gedruckten Symbols mitfassen müssen. */ .tierkarte__spot--gezeichnet { /* 4,75 % — nachgemessen an der Kartengrafik: Die gedruckten Scheiben haben dort 122 px bei 2560 px Bildbreite. Vorher standen hier 5,5 %, und der Tierheim-Punkt saß dadurch sichtbar größer zwischen den anderen. */ width: 4.75%; display: flex; align-items: center; justify-content: center; background-color: #111; color: #fff; /* Kein Schatten: Die gedruckten Symbole liegen flach in der Karte. */ } .tierkarte__spot--gezeichnet:hover, .tierkarte__spot--gezeichnet:focus-visible { background-color: #111; } .tierkarte__glyph { width: 62%; height: 62%; display: block; } .tierkarte__hinweis { margin-top: 0.5rem; font-family: var(--schrift); font-size: 0.9rem; color: var(--text-leise); } /* Legende unter „Die Karte": Links deutlich, aber ruhig. */ .tierkarte-legende a { font-weight: 700; } /* Großansicht (Lightbox) */ .tierkarte-lightbox { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; background-color: rgba(20, 28, 30, 0.88); } .tierkarte-lightbox__buehne { position: relative; width: 100%; max-width: 88rem; max-height: 92vh; } .tierkarte-lightbox__rahmen { position: relative; line-height: 0; border: var(--rahmen) solid var(--rot); border-radius: var(--radius); overflow: hidden; } .tierkarte-lightbox__rahmen img, .tierkarte-lightbox__rahmen .tierkarte__zoom { display: block; width: 100%; height: auto; } .tierkarte-lightbox__zu { position: absolute; top: -1rem; right: -0.5rem; z-index: 3; width: 2.6rem; height: 2.6rem; font-size: 1.8rem; line-height: 1; color: var(--rot); background-color: var(--papier); border: 2px solid var(--rot); border-radius: 50%; cursor: pointer; } /* -------------------------------------------------------- Gastro & Karte -- */ .karte-hinweis { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0.75rem; min-height: 22rem; padding: 2rem; background-color: var(--petrol-hell); border: 1px dashed var(--rot); border-radius: var(--radius); } .karte-hinweis p { margin: 0; max-width: 34rem; font-size: 0.95rem; } /* Leaflet vergibt innerhalb der Karte großzügige Stapelwerte: 400 für die Kartenebenen, 700 für Sprechblasen, 1000 für die Bedienelemente. Ohne eigenen Stapelkontext zählen die im Wurzel-Stapel der Seite mit — und liegen damit über der Navleiste (40) und dem ausklappenden Untermenü (20). Ergebnis: Das Menü öffnet sich hinter der Karte. `position: relative` zusammen mit einem gesetzten `z-index` schafft einen eigenen Stapelkontext. Alle Leaflet-Werte gelten dann nur noch innerhalb der Karte, und die Karte selbst liegt als ein Stück auf Ebene 0 — unter allem, was das Theme darüber legt. `z-index: auto` würde NICHT genügen: Erst ein ausdrücklicher Wert erzeugt den Kontext. */ .osm-karte { position: relative; z-index: 0; height: 32rem; border: 1px solid var(--rot); border-radius: var(--radius); } .osm-karte .leaflet-popup-content { font-family: var(--schrift); margin: 0; } .osm-karte .leaflet-popup-content-wrapper { padding: 0; overflow: hidden; border-radius: var(--radius); } .lokal-popup { padding: 0.9rem 1rem 1rem; } .lokal-popup b { color: var(--rot); font-size: 1.05rem; } .lokal-popup em { color: var(--text-leise); font-size: 0.9rem; font-style: normal; } .lokal-popup__text { margin: 0.5rem 0 0.4rem; font-size: 0.9rem; } /* Das Foto sitzt bündig oben im Popup. Flach halten — ein hohes Popup ragt sonst über den Kartenrand hinaus und das Bild wird abgeschnitten. */ .lokal-popup__bild { display: block; width: calc(100% + 2rem); height: 110px; margin: -0.9rem -1rem 0.7rem; object-fit: cover; } /* In der Liste springt der Name den Marker an — das darf man sehen. */ .lokal__anspringen { cursor: pointer; } .knopf, .lokal-liste__ort a.knopf { display: inline-block; padding: 0.65rem 1.4rem; font-weight: 700; color: var(--papier); background-color: var(--rot); border: 1px solid var(--rot); border-radius: var(--radius); text-decoration: none; cursor: pointer; } .knopf:hover { background-color: var(--rot-dunkel); color: var(--papier); } .ort-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; padding: 0; list-style: none; } .ort-filter button { padding: 0.45rem 1rem; font-family: inherit; font-size: 0.95rem; font-weight: 700; color: var(--rot); background-color: rgba(255, 255, 255, 0.4); border: 1px solid var(--rot); border-radius: 999px; cursor: pointer; } .ort-filter button[aria-pressed="true"] { color: var(--papier); background-color: var(--rot); } .lokal-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; margin: 2rem 0 0; padding: 0; list-style: none; } .lokal { padding: 1rem 1.25rem; background-color: rgba(255, 255, 255, 0.35); border: 1px solid rgba(161, 36, 19, 0.35); border-left: 4px solid var(--rot); border-radius: var(--radius); } .lokal h3 { margin: 0 0 0.25rem; font-size: 1.1rem; } .lokal__adresse { margin: 0 0 0.5rem; font-size: 0.9rem; color: var(--text-leise); } .lokal__angebot { display: inline-block; padding: 0.15rem 0.6rem; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--papier); background-color: var(--rot); border-radius: 999px; } .lokal__angebot--gruen { background-color: #2aad27; } .lokal__angebot--blau { background-color: #2a81cb; } .lokal__angebot--vegetarisch { background-color: var(--text-leise); } /* ---------------------------------------------------------- Newsletter --- */ .newsletter { max-width: 34rem; margin: 3rem 0 0; padding: 1.5rem; background-color: var(--petrol-hell); border: 2px solid var(--rot); border-radius: var(--radius); } .newsletter h2 { margin: 0 0 0.5rem; font-size: 1.3rem; } /* -------------------------------------------------------------- Ausgaben -- */ .ausgaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.5rem; padding: 0; list-style: none; } .ausgabe img { border: 1px solid var(--rot); border-radius: var(--radius); } .ausgabe h3 { margin: 0.75rem 0 0.25rem; } /* ------------------------------------------------------------------ Fuß -- */ .fuss { padding: 2rem 0 3rem; border-top: 2px solid var(--rot); font-size: 0.95rem; color: var(--text-leise); } .fuss ul { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0 0 0.75rem; padding: 0; list-style: none; } .fuss a { font-weight: 700; } /* ------------------------------------------------------------- Responsiv -- */ @media (max-width: 48rem) { :root { --rahmen: 0.35rem; } /* Header über die ganze Bildschirmbreite: den seitlichen roten Rahmen mobil weglassen, oben und unten bleibt er als Markenband stehen. */ html { border-left-width: 0; border-right-width: 0; } .spalte { padding: 0 1rem; } /* Menü als Hamburger oben rechts (Quadrat mit drei Strichen). Er klebt in der Ecke, statt mit dem Kopf wegzuscrollen. Die Navleiste darunter ist mobil eingeklappt und trägt den Knopf nicht mit — ohne das Festhalten wäre das Menü ab dem ersten Scrollen unerreichbar. Die Ecke ist frei: Die Themenwahl liegt zwar auch fest, wandert mobil aber nach unten rechts (weiter unten in diesem Block). top und right sind so gewählt, dass er am Seitenanfang genau dort steht, wo er im Fluss stünde — 0,35 rem Rahmen + 1,75 rem Kopfpolster + 0,25 rem Versatz, und bündig mit der Spalte, die hier 1 rem Polsterung hat. */ .nav-toggle { position: fixed; top: 2.35rem; right: 1rem; z-index: 50; /* über der Navleiste (40), unter der Themenwahl (1000) */ display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 2.9rem; height: 2.9rem; background-color: var(--papier); border: 2px solid var(--rot); border-radius: var(--radius); /* Ein Hauch Schatten, damit er über Text noch als Knopf lesbar bleibt. */ box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); cursor: pointer; } /* Aus dem Fluss genommen — der Platz muss trotzdem frei bleiben, sonst schöbe sich das Logo unter den Knopf. */ .kopf__oben { padding-right: 3.6rem; } .nav-toggle__balken, .nav-toggle__balken::before, .nav-toggle__balken::after { content: ""; display: block; width: 1.4rem; height: 2px; background-color: var(--rot); transition: transform 0.2s ease, background-color 0.2s ease; } .nav-toggle__balken { position: relative; } .nav-toggle__balken::before { position: absolute; top: -6px; left: 0; } .nav-toggle__balken::after { position: absolute; top: 6px; left: 0; } .nav-toggle[aria-expanded="true"] .nav-toggle__balken { background-color: transparent; } .nav-toggle[aria-expanded="true"] .nav-toggle__balken::before { transform: translateY(6px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle__balken::after { transform: translateY(-6px) rotate(-45deg); } /* Menü eingeklappt; der Knopf blendet es ein. */ .nav { display: none; } .nav.ist-offen { display: block; } /* Mobil ist die Navigation ausgeblendet — Kanten an der Spalte stünden dann als leerer Kasten da. Hier übernimmt die Leiste die Trennung wieder selbst, und auch das Papierfeld läuft wieder durch: Auf schmalen Schirmen ist die Spalte ohnehin fast so breit wie das Fenster, ein abgesetztes Feld ergäbe nur zwei schmale Streifen am Rand. */ .navleiste { background-color: var(--papier); border-bottom-color: var(--linie); } .navleiste .spalte { background-color: transparent; border-top: 0; border-bottom: 0; } .navleiste.klebt { border-bottom-color: var(--rot); } .nav ul { flex-direction: column; gap: 0; } .nav > ul > li { border-bottom: 1px solid rgba(161, 36, 19, 0.25); } .nav > ul > li:last-child { border-bottom: 0; } .nav ul ul { position: static; display: block; min-width: 0; padding: 0 0 0.5rem 1rem; background: none; border: none; } .nav ul ul a { font-size: 0.95rem; padding: 0.35rem 0; } .beitrag { --pad-x: 1.25rem; padding: 1.25rem var(--pad-x) 2rem; } .beitrag__text { font-size: 1.15rem; } /* Hoch- und Quadratformat mobil zentriert, mit der Höhe, die ein Querformat über die volle Breite hätte (ohne Hochskalieren). */ .beitrag__bild.is-hoch img, .beitrag__text figure.is-hoch img { width: auto; max-width: 100%; max-height: 66vw; margin: 0 auto; } /* Quadrat/rund mobil ebenfalls zentriert (Zielbreite kommt aus dem JS). */ .beitrag__bild.is-quadrat img, .beitrag__text figure.is-quadrat img { margin: 0 auto; } .osm-karte { height: 24rem; } /* Galerie mobil: genau eine Kachel, waagerecht wischen, Pfeile aus. */ .galerie__spur { --sichtbar: 1; } .galerie--zwei .galerie__spur { grid-template-rows: auto; } .galerie__pfeil { display: none !important; } /* Mobil: die sechs Sektionen statt der zwei Desktop-Galerien. */ .nur-breit { display: none; } .nur-schmal { display: block; } /* Artikel mobil randlos: das Textfeld reicht bis an die Bildschirmkanten. */ .spalte > .beitrag { margin-left: -1rem; margin-right: -1rem; border-radius: 0; border-right-width: 0; } .galerie--meldung { margin-left: -1rem; margin-right: -1rem; } .galerie--meldung .meldung-folie .beitrag { flex: 1 1 auto; max-width: none; border-radius: 0; border-right-width: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* ------------------------------------------------------- Karten-Legende -- */ .karte-legende { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; margin: 0.75rem 0 0; padding: 0.6rem 0.9rem; list-style: none; font-size: 0.95rem; background-color: rgba(255, 255, 255, 0.4); border: 1px solid rgba(161, 36, 19, 0.3); border-radius: var(--radius); } .karte-legende li { display: flex; align-items: center; gap: 0.5rem; } /* Tropfenform wie die Marker auf der Karte. */ .karte-legende__marke { width: 0.85rem; height: 0.85rem; border: 1px solid rgba(0, 0, 0, 0.35); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); } .karte-legende__marke--gruen { background-color: #2aad27; } .karte-legende__marke--blau { background-color: #2a81cb; } /* ------------------------------------------------------- Bildnachweise -- */ .bildnachweis { display: inline-block; font-size: 0.82rem; color: var(--text-leise); opacity: 0.85; } /* Kein automatischer Trenner — den setzt der Import nur, wenn auch eine Bildunterschrift davorsteht. Sonst begänne die Zeile mit einem einsamen Punkt. */ .beitrag__text figure { text-align: center; } .beitrag__text figure img { border-radius: var(--radius); } .beitrag__text figcaption { text-align: left; } /* ------------------------------------------------------------- Termine -- */ .termin-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); gap: 1.25rem; margin: 0 0 2.5rem; padding: 0; list-style: none; } .termin { padding: 1.1rem 1.35rem 1.35rem; background-color: rgba(255, 255, 255, 0.32); border: 1px solid rgba(161, 36, 19, 0.35); border-left: 4px solid var(--rot); border-radius: var(--radius); } .termin__wann { margin: 0 0 0.35rem; font-size: 0.9rem; letter-spacing: 0.03em; text-transform: uppercase; color: var(--rot); } .termin__wann strong { font-weight: 700; } .termin__wann span { font-weight: 400; text-transform: none; letter-spacing: 0; } .termin__titel { margin: 0 0 0.35rem; font-size: 1.2rem; } .termin__wer { margin: 0 0 0.6rem; font-size: 0.95rem; font-weight: 700; color: var(--text); } .termin__text { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--text-leise); } .termin__text p { margin: 0 0 0.4rem; } .termin__ort, .termin__link { margin: 0; font-size: 0.9rem; color: var(--text-leise); } .termin__ort::before { content: "📍 "; } .termin-hinweis { padding: 0.9rem 1.1rem; font-size: 0.95rem; background-color: rgba(255, 255, 255, 0.35); border-left: 3px solid var(--rot); border-radius: 0 var(--radius) var(--radius) 0; } /* ------------------------------------------------------------ Feedback -- */ .feedback { display: flex; flex-direction: column; gap: 1rem; max-width: 46rem; } .feedback__block { background-color: rgba(255, 255, 255, 0.3); border: 1px solid rgba(161, 36, 19, 0.35); border-left: 4px solid var(--rot); border-radius: var(--radius); } .feedback__block[open] { background-color: var(--petrol-hell); } .feedback__block > summary { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 0 1rem; padding: 1rem 1.25rem; cursor: pointer; list-style: none; } .feedback__block > summary::-webkit-details-marker { display: none; } .feedback__block summary h2 { grid-column: 1; margin: 0; font-size: 1.3rem; } .feedback__block summary p { grid-column: 1; margin: 0.3rem 0 0; font-size: 0.95rem; color: var(--text-leise); } .feedback__block summary::after { content: ""; grid-column: 2; grid-row: 1 / -1; align-self: center; width: 0.7rem; height: 0.7rem; border: solid var(--rot); border-width: 0 3px 3px 0; transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.25s ease; } .feedback__block[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); } .feedback__block form, .feedback__block .zahlung { padding: 0 1.25rem 1.5rem; } .feedback__block .feld { margin-bottom: 1.25rem; } .feedback__block label { display: block; margin-bottom: 0.35rem; font-weight: 700; } .feedback__block input[type="text"], .feedback__block textarea { width: 100%; padding: 0.65rem 0.75rem; font-family: inherit; font-size: 1rem; color: var(--text); background-color: var(--papier); border: 1px solid rgba(31, 42, 44, 0.35); border-radius: var(--radius); } .feedback__block input:focus, .feedback__block textarea:focus { outline: none; border-color: var(--rot); box-shadow: 0 0 0 3px rgba(161, 36, 19, 0.25); } .feedback__block button { border: none; font-family: inherit; font-size: 1rem; } /* Für Menschen unsichtbar — nur Bots füllen es aus. */ .honigtopf { position: absolute; left: -9999px; } .feedback-meldung { max-width: 46rem; margin: 0 0 1.5rem; padding: 1rem 1.25rem; font-weight: 700; background-color: var(--petrol-hell); border: 2px solid var(--rot); border-radius: var(--radius); } .feedback-meldung--fehler { color: #8a1f10; } /* ===================================================================== Farbschemata (Themes) — ändern nur Farben und Rahmen, nicht das Layout. Umschaltbar über die Farbkästchen oben rechts (data-theme auf ). ===================================================================== */ /* --- Umschalter oben rechts --- */ .theme-wahl { position: fixed; top: .6rem; right: .6rem; z-index: 1000; display: flex; gap: .35rem; padding: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); backdrop-filter: blur(2px); } .theme-wahl__knopf { width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); } .theme-wahl__knopf[aria-pressed="true"] { outline: 2px solid #222; outline-offset: 1px; } .theme-wahl__knopf[data-theme-wahl="standard"] { background: linear-gradient(135deg, #a6c9cd 0 50%, #a12413 50% 100%); } .theme-wahl__knopf[data-theme-wahl="minimal"] { background: linear-gradient(135deg, #ffffff 0 50%, #111111 50% 100%); } .theme-wahl__knopf[data-theme-wahl="tuerkis"] { background: linear-gradient(135deg, #e4f0f0 0 50%, #a12413 50% 100%); } .theme-wahl__knopf[data-theme-wahl="magazin"] { background: linear-gradient(135deg, #f1efe8 0 50%, #1c5b3c 50% 100%); } /* --- Linienwahl: dieselbe Bauart, eine Reihe darunter ------------------- Die Knöpfe zeigen, was sie tun: ein Balken oben, einer unten, in der Stärke der jeweiligen Variante. */ .linien-wahl { position: fixed; top: 2.75rem; right: .6rem; z-index: 1000; display: flex; gap: .35rem; padding: .3rem; border-radius: 999px; background: rgba(255, 255, 255, .8); box-shadow: 0 1px 5px rgba(0, 0, 0, .3); backdrop-filter: blur(2px); } .linien-wahl__knopf { position: relative; overflow: hidden; width: 1.5rem; height: 1.5rem; padding: 0; cursor: pointer; border: 2px solid #fff; border-radius: 4px; background: #fdfdfc; box-shadow: 0 0 0 1px rgba(0, 0, 0, .3); } .linien-wahl__knopf::before, .linien-wahl__knopf::after { content: ""; position: absolute; left: 2px; right: 2px; background: #a12413; } .linien-wahl__knopf::before { top: 2px; height: var(--oben, 0); } .linien-wahl__knopf::after { bottom: 2px; height: var(--unten, 0); } .linien-wahl__knopf[aria-pressed="true"] { outline: 2px solid #222; outline-offset: 1px; } .linien-wahl__knopf[data-linien-wahl="keine"] { --oben: 0; --unten: 0; } .linien-wahl__knopf[data-linien-wahl="oben"] { --oben: 2px; --unten: 0; } .linien-wahl__knopf[data-linien-wahl="duenn"] { --oben: 1px; --unten: 1px; } .linien-wahl__knopf[data-linien-wahl="dick"] { --oben: 3px; --unten: 3px; } /* Auf schmalen Schirmen nach unten, damit der Menü-Button (Hamburger) frei bleibt. */ @media (max-width: 48rem) { .theme-wahl { top: auto; bottom: .6rem; } /* Die Linienwahl betrifft nur die Desktop-Ansicht — mobil regelt der Block weiter oben die Kanten, und der Platz wird gebraucht. */ .linien-wahl { display: none; } } /* --- Theme „Schwarz-Weiß" (minimal, ohne Kachel-Rahmen) --- */ :root[data-theme="minimal"] { --rot: #111111; --rot-dunkel: #000000; --petrol: #f4f4f4; --petrol-hell: #eaeaea; --papier: #ffffff; --papier-artikel: #ffffff; --text: #141414; --text-leise: #666666; --rahmen: 0; /* entfernt den äußeren roten Rahmen */ } [data-theme="minimal"] .karte, [data-theme="minimal"] .lokal, [data-theme="minimal"] .veg-ep-produkt, [data-theme="minimal"] .veg-ep-kachel, [data-theme="minimal"] .veg-ep-stats, [data-theme="minimal"] .veg-ep-stats-kachel, [data-theme="minimal"] .veg-ep-kennzahl, [data-theme="minimal"] .veg-ep-detail__bild, [data-theme="minimal"] .veg-ep-torte, [data-theme="minimal"] .ausgabe, [data-theme="minimal"] .ausgabe-teaser { border: 0; box-shadow: none; } /* Karten heben sich nur durch Weiß auf hellgrauem Grund ab. */ [data-theme="minimal"] .veg-ep-produkt__bild, [data-theme="minimal"] .veg-ep-kachel__logo--bild { background: #fff; } /* Rotes Marken-Logo (SVG) im Schwarz-Weiß-Theme zu einer schwarzen Silhouette. */ [data-theme="minimal"] .kopf__logo { filter: grayscale(1) brightness(0); } /* --- Theme „Türkis" (wie minimal, aber rotes Logo & ganz zarter Türkis-Grund) --- */ :root[data-theme="tuerkis"] { --rot: #111111; /* Akzente schwarz wie minimal */ --rot-dunkel: #000000; --petrol: #e8f1f1; /* ganz leichter Türkis-Hauch (helle Ableitung des Petrol) */ --petrol-hell: #d9e9e9; --papier: #ffffff; --papier-artikel: #ffffff; --text: #141414; --text-leise: #5b6767; --rahmen: 0; /* kein Außenrahmen, wie minimal */ } [data-theme="tuerkis"] .karte, [data-theme="tuerkis"] .lokal, [data-theme="tuerkis"] .veg-ep-produkt, [data-theme="tuerkis"] .veg-ep-kachel, [data-theme="tuerkis"] .veg-ep-stats, [data-theme="tuerkis"] .veg-ep-stats-kachel, [data-theme="tuerkis"] .veg-ep-kennzahl, [data-theme="tuerkis"] .veg-ep-detail__bild, [data-theme="tuerkis"] .veg-ep-torte, [data-theme="tuerkis"] .ausgabe { border: 0; box-shadow: none; } /* Logo bleibt rot: bewusst KEIN Filter (im Gegensatz zum Schwarz-Weiß-Theme). */ /* --- Theme „Magazin" (neutrales Elfenbein, Editorial-Grün, feine Haarlinien) --- */ :root[data-theme="magazin"] { --rot: #1c5b3c; /* tiefes Editorial-Grün als einzige Akzentfarbe */ --rot-dunkel: #123f29; --petrol: #f1efe8; /* neutrales, entpinktes Elfenbein */ --petrol-hell: #e6e3d9; --papier: #fffef9; --papier-artikel: #f3f1e9; --text: #1a1c19; --text-leise: #5e625a; --rahmen: 0; border-top: 4px solid var(--rot); /* dünne Kopflinie statt Vollrahmen */ } [data-theme="magazin"] .karte, [data-theme="magazin"] .lokal, [data-theme="magazin"] .veg-ep-produkt, [data-theme="magazin"] .veg-ep-kachel, [data-theme="magazin"] .veg-ep-stats, [data-theme="magazin"] .veg-ep-stats-kachel { border: 1px solid rgba(0, 0, 0, .14); box-shadow: none; } /* ------------------------------------------------------------ Kommentare -- Erscheinen unter dem Beitrag. Jeder wartet auf Freigabe (eingestellt über comment_moderation), und es gibt bewusst keine Gravatare — die kämen von einem fremden Server und nähmen die IP der Leser mit. Statt eines Bildes steht der Anfangsbuchstabe in einer Scheibe. */ .kommentare { /* Genau unter dem Artikel: dieselbe Breite (44rem) und LINKSBÜNDIG. .beitrag hat kein margin:auto, steht also am linken Rand der Spalte — eine zentrierte Kommentarbox saß daneben sichtbar nach rechts versetzt. Die 5px rote Linke greift die Kante des Artikels auf. */ max-width: 44rem; margin: 2.5rem 0 0; padding: 1.5rem 2rem; background-color: var(--papier); border: 1px solid rgba(161, 36, 19, 0.3); border-left: 5px solid var(--rot); border-radius: var(--radius); } .kommentare__titel { margin: 0 0 1.25rem; font-size: 1.35rem; } .kommentare__liste { margin: 0 0 1.5rem; padding: 0; list-style: none; } .kommentare__liste .children { margin: .75rem 0 0 1.75rem; padding: 0; list-style: none; } .kommentar { margin: 0 0 1.25rem; } .kommentar__kopf { display: flex; align-items: center; gap: .6rem; margin-bottom: .4rem; } .kommentar__zeichen { flex: 0 0 auto; width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center; background-color: var(--petrol); color: var(--text); border-radius: 50%; font-weight: 700; } .kommentar__name { font-weight: 700; } .kommentar__redaktion { margin-left: .4rem; padding: .05rem .4rem; font-size: .72rem; color: var(--papier); background-color: var(--rot); border-radius: var(--radius); } .kommentar__datum { display: block; font-size: .8rem; color: var(--text-leise); } .kommentar__text { margin-left: 2.7rem; } .kommentar__text p { margin: 0 0 .6rem; } .kommentar__antwort { margin: .2rem 0 0 2.7rem; font-size: .88rem; } .kommentar__wartet { margin: 0 0 .5rem 2.7rem; padding: .35rem .6rem; font-size: .85rem; color: var(--text-leise); background-color: var(--petrol-hell); border-radius: var(--radius); } /* --- Das Formular --- */ .kommentare__feld { margin: 0 0 .9rem; } .kommentare__feld label { display: block; margin-bottom: .2rem; font-weight: 600; font-size: .92rem; } .kommentare__leise { font-weight: 400; color: var(--text-leise); } .kommentare__feld input, .kommentare__feld textarea { font: inherit; width: 100%; padding: .45rem .6rem; background-color: var(--papier); color: var(--text); border: 1px solid var(--petrol); border-radius: var(--radius); } .kommentare__feld textarea { resize: vertical; min-height: 7rem; } /* Der Hinweis steht über dem Knopf, nicht darunter: Wer schreibt, soll vorher wissen, dass es dauert und was gespeichert wird. */ .kommentare__hinweis { margin: 0 0 .8rem; font-size: .85rem; color: var(--text-leise); } .kommentare__knopf { font: inherit; font-weight: 700; cursor: pointer; padding: .5rem 1.1rem; color: var(--papier); background-color: var(--rot); border: 0; border-radius: var(--radius); } .kommentare__knopf:hover { background-color: var(--rot-dunkel); } .kommentare__zu { font-size: .9rem; color: var(--text-leise); } .comment-form-cookies-consent { font-size: .85rem; } .comment-form-cookies-consent label { font-weight: 400; } @media (max-width: 40rem) { .kommentare { padding: 1rem; } .kommentar__text, .kommentar__antwort, .kommentar__wartet { margin-left: 0; } .kommentare__liste .children { margin-left: .9rem; } } /* ------------------------------------------------- Fuß: soziale Netze -- Reine Links mit eingebetteten SVG-Symbolen. Kein Symbolsatz von fremden Servern, keine Zählpixel, keine eingebetteten Zeitleisten — erst wer klickt, spricht mit dem jeweiligen Netzwerk. */ .fuss__sozial { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 1.25rem 0 1rem; padding: 0; list-style: none; } .fuss__sozial a { display: inline-flex; align-items: center; gap: .45rem; font-weight: 700; text-decoration: none; } .fuss__sozial a:hover { text-decoration: underline; } .fuss__symbol { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; } /* Der Kontoname steht daneben, aber leiser — er ist Beleg, nicht Botschaft. */ .fuss__handle { font-weight: 400; font-size: .88rem; color: var(--text-leise); } @media (max-width: 40rem) { .fuss__sozial { flex-direction: column; gap: .6rem; } } /* ------------------------------------------- Beitrag im breiten Layout -- Die Titelgeschichte trägt die Karte „Mensch und Tier in der Region" und wird deshalb gebaut wie die Gastro-Seite: kein Artikelkasten, kein Rahmen, kein eigener Hintergrund, volle Spaltenbreite. Der Fließtext behält trotzdem sein Lesemaß — 44 rem sind fürs Lesen richtig, auch wenn die Karte breiter darf. */ .beitrag-breit { margin: 0 0 2rem; } .beitrag-breit .beitrag__dach { margin: 0 0 0.35rem; font-size: 0.85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--rot); } .beitrag-breit .beitrag__meta { margin: 0 0 1.5rem; } .beitrag-breit .seitenintro { max-width: 44rem; } /* Fließtext im Lesemaß, linksbündig wie der übrige Artikel. */ .beitrag__text--breit { max-width: 44rem; }