/* Meldungen zu Zielen: der Knopf am Ende der Detailansicht und der Dialog dahinter (js/ui/reportForm.js). Wie css/trips.css beides in einer Datei - Auslöser und Dialog gehören zu einem Feature. Der Dialog selbst erbt Rahmen, Kopfzeile und Schließen-Knopf von .auth-dialog (css/auth.css); hier steht nur, was ihn davon unterscheidet. */ /* --- Auslöser in der Detailansicht -------------------------------------- */ .detail-report { padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .detail-report[hidden] { display: none; } /* Bewusst kein .btn: ein gefüllter Knopf am Ende der Ansicht zöge Blicke auf sich, die dem Ziel gehören. Melden ist ein Nachtrag - deshalb die Anmutung eines Links, aber mit der Trefferfläche eines Knopfes (44px inklusive Innenabstand, wie die übrigen Bedienelemente auf dem Smartphone). */ .detail-report__btn { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 44px; padding: var(--space-xs) 0; border: none; background: none; font: inherit; font-size: 0.85rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } .detail-report__btn:hover, .detail-report__btn:focus-visible { color: var(--color-primary-dark); } /* --- Dialog -------------------------------------------------------------- */ .report-dialog { max-width: 32rem; } /* Der Name des gemeldeten Ziels unter der Überschrift: ohne ihn ist im Vollbild-Dialog auf dem Smartphone nicht mehr zu sehen, worauf sich die Meldung bezieht. */ .report-form__place { font-weight: 600; margin-bottom: var(--space-md); } .report-form { display: flex; flex-direction: column; gap: var(--space-md); } .report-form__field { display: flex; flex-direction: column; gap: var(--space-xs); } .report-form__label { font-size: 0.85rem; font-weight: 600; } .report-form__select, .report-form__textarea { width: 100%; padding: var(--space-sm); border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); font: inherit; } .report-form__textarea { resize: vertical; min-height: 7rem; } .report-form__error { color: var(--color-danger); font-size: 0.85rem; } .report-form__error[hidden] { display: none; } .report-form__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .report-form__done { font-weight: 600; margin-bottom: var(--space-sm); } .report-form__hint { color: var(--color-text-muted); font-size: 0.85rem; line-height: 1.4; margin-bottom: var(--space-md); } /* --- Ausrüstungsempfehlungen (Amazon-Partnerlinks) ----------------------- Steht hier statt in einer eigenen Datei: dieselbe Bauart wie der Melde-Dialog darüber - .auth-dialog als Rahmen, nur die Innereien sind eigene. Zwei kleine Dateien mehr im kosten je einen Roundtrip. Gestalterische Linie: nichts hebt sich hervor. Keine Produktkacheln, keine Rahmen um einzelne Einträge, keine Farbe ausser der ohnehin verwendeten Linkfarbe. Es soll wie eine Liste aussehen, nicht wie ein Schaufenster. */ .gear-dialog { max-width: 40rem; } /* Die Kennzeichnung steht in der Überschrift, nicht darunter: sie ist Teil dessen, was der Bereich IST. */ .gear__badge { margin-left: var(--space-sm); padding: 2px var(--space-xs); border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); vertical-align: middle; } .gear__disclosure { margin-bottom: var(--space-lg); padding: var(--space-sm) var(--space-md); border-left: 3px solid var(--color-border); font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); } .gear__topics { display: grid; gap: var(--space-lg); } .gear__topic-title { font-size: 1rem; font-weight: 700; } .gear__topic-hint { margin-top: 2px; font-size: 0.85rem; color: var(--color-text-muted); } .gear__list { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); padding-left: 1.1em; } .gear__link { color: var(--color-primary-dark); text-underline-offset: 3px; } /* Der Werbeabschnitt nimmt die volle Breite des Rasters ein und ist oben abgesetzt - er soll nicht wie eine weitere Ausrüstungsliste aussehen. */ .gear__ads { grid-column: 1 / -1; padding-top: var(--space-lg); border-top: 1px solid var(--color-border); } .gear__footer { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-border); } .gear__footer .btn { width: 100%; border: 1px solid var(--color-border); } /* Ab zwei Spalten wird die Liste auf dem Rechner kürzer, ohne dass ein Eintrag mehr Gewicht bekommt als der andere. Erst ab 48rem: der Dialog ist höchstens 40rem breit, darunter würden zwei Spalten die Beschriftungen umbrechen. */ @media (min-width: 48rem) { .gear__topics { grid-template-columns: 1fr 1fr; } } /* --- Werbeplatz (js/ui/adSlot.js) --------------------------------------- Ein Baustein für alle Plätze: Detailansicht und Werbebereich. Die Variante --compact ist die für die Detailansicht - dort steht der Platz mitten im redaktionellen Inhalt und muss sich zurücknehmen. */ .ad-slot[hidden] { display: none; } /* Trennungsgebot: Werbung muss von redaktionellem Inhalt unterscheidbar sein. Deshalb steht "Anzeige" ÜBER dem Werbemittel, nicht daneben und nicht danach - und in Grossbuchstaben mit Sperrung, damit es nicht wie eine weitere Zwischenüberschrift des Eintrags aussieht. */ .ad-slot__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); } .ad-slot__banner { display: block; margin: var(--space-sm) 0; } /* Die Vorlagen haben feste Masse (468x60, 250x250). Auf schmalen Anzeigen darf das Bild nicht über den Rand hinausragen - Höhe automatisch, damit das Seitenverhältnis erhalten bleibt. */ .ad-slot__banner img { max-width: 100%; height: auto; } .ad-slot__text { margin: var(--space-sm) 0; } .ad-slot__link { color: var(--color-primary-dark); text-underline-offset: 3px; } /* Das Zählpixel nimmt keinen Platz im Textfluss ein. */ .ad-slot__pixel { position: absolute; width: 1px; height: 1px; } .ad-slot__consent-text { margin-top: var(--space-xs); font-size: 0.85rem; line-height: 1.45; color: var(--color-text-muted); } /* Beide Knöpfe gleich gross und gleich gestaltet: eine Einwilligung ist nur wirksam, wenn Ablehnen genauso leicht fällt wie Zustimmen. Deshalb bewusst KEIN hervorgehobener "Anzeigen"-Knopf. */ .ad-slot__consent-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-sm); } .ad-slot__consent-actions .btn { flex: 1 1 9rem; border: 1px solid var(--color-border); text-align: center; } .ad-slot__consent-hint { margin-top: var(--space-sm); font-size: 0.8rem; color: var(--color-text-muted); } .ad-slot__revoke { border: none; background: none; padding: var(--space-xs) 0; font: inherit; font-size: 0.8rem; color: var(--color-text-muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; } /* In der Detailansicht: abgesetzt wie ein eigener Abschnitt, aber ohne Überschrift - die Kennzeichnung oben ist die Überschrift. */ .detail-ad { margin: var(--space-md) 0; padding: var(--space-sm) 0; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .detail-ad:empty, .detail-ad:has(.ad-slot[hidden]) { display: none; } /* Einzeilige Fassung: Kennzeichnung und Werbemittel nebeneinander. Fuer den Platz zwischen Bild und Titel, wo ein eigener Kasten den Eintrag zerschneiden wuerde. */ .ad-slot--inline { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-xs) var(--space-sm); font-size: 0.85rem; } .ad-slot--inline .ad-slot__text { margin: 0; } /* Der Platz zwischen Bild und Titel. Er war zuvor eine rahmenlose graue Zeile - und wurde genau deshalb uebersehen. Jetzt ein abgesetzter Kasten mit getoenter Flaeche, farbiger Kante und Rucksack-Symbol. Die warme Sandfarbe ist bewusst KEINE Hausfarbe: Gruen ist in dieser Anwendung die Farbe der eigenen Inhalte (Kategorien, Knoepfe). Ein Kasten, der sich davon absetzt, erfuellt das Trennungsgebot besser als die fruehere Zeile, die wie Fliesstext aussah - auffaelliger und trennschaerfer zugleich, nicht das eine auf Kosten des anderen. Der Titel darunter bleibt trotzdem das groesste Element der Ansicht. */ .detail-ad-top { margin-bottom: var(--space-md); padding: var(--space-sm) var(--space-md); border: 1px solid #f0dcbe; border-left: 4px solid #ef8b32; border-radius: var(--radius-md); background: #fff8ee; } /* Ohne passenden Vorschlag zur Kategorie liefert build() nichts und der Platz stellt sich auf hidden (js/ui/adSlot.js). Die Huelle enthaelt dann zwar ein Kind, aber nichts Sichtbares - :empty allein griff hier nie. Als rahmenlose Zeile fiel das nicht auf, als Kasten stuende ein leeres Kaestchen ueber dem Titel. Gleiche Absicherung wie bei .detail-ad oben. */ .detail-ad-top:empty, .detail-ad-top:has(.ad-slot[hidden]) { display: none; } /* Kennzeichnung auf eine eigene Zeile, Symbol und Werbemittel darunter: flex-basis: 100% bricht die Zeile im umbrechenden Flex-Container von .ad-slot--inline. So steht "Anzeige" ueber dem Werbemittel, wie es das Trennungsgebot verlangt, und der Verweis bekommt die volle Breite. */ .detail-ad-top .ad-slot--inline { align-items: center; row-gap: 2px; } .detail-ad-top .ad-slot__label { flex-basis: 100%; } .detail-ad-top .ad-slot__icon { font-size: 1.15rem; line-height: 1; } /* Etwas groesser und schwerer als die frueheren 0.85rem: Der Verweis ist das, worauf der Kasten hinauslaeuft, und muss auf dem Smartphone mit dem Daumen sicher zu treffen sein. */ .detail-ad-top .ad-slot__link { font-size: 0.95rem; font-weight: 600; color: #9a4a06; } /* Der Weg zurueck nach einem "Werbung ausblenden". Steht nur im Ausruestungsfenster (siehe js/ui/adSlot.js, reenableWhenDenied). */ .ad-slot__reenable { margin-top: var(--space-sm); border: 1px solid var(--color-border); } /* --- Einwilligungsabfrage beim ersten Besuch (js/ui/consentBanner.js) ---- Unten angeheftet statt als Vollbild-Overlay: Die Karte bleibt sichtbar und bedienbar, denn bis zur Entscheidung wird ohnehin nichts von Dritten geladen. Ein Overlay, das die halbe Seite verdeckt, waere nur Druck. */ .consent-banner { position: fixed; left: 0; right: 0; bottom: 0; /* Ueber der Karte (Leaflet ~1000), aber unter Menue (1100) und Dialogen (1200/2200) - wer gerade etwas anderes offen hat, soll das zuende bringen koennen. */ z-index: 1050; background: var(--color-surface); border-top: 2px solid var(--color-primary); box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.18); padding: var(--space-md); padding-bottom: max(var(--space-md), env(safe-area-inset-bottom)); } .consent-banner[hidden] { display: none; } .consent-banner__inner { max-width: 60rem; margin: 0 auto; display: grid; gap: var(--space-sm); } .consent-banner__title { font-weight: 700; } .consent-banner__text { font-size: 0.85rem; line-height: 1.45; color: var(--color-text); } .consent-banner__text p + p { margin-top: var(--space-xs); color: var(--color-text-muted); } /* BEIDE Knoepfe gleich: gleiche Groesse, gleiche Farbe, gleiche Ebene. Kein hervorgehobenes "Akzeptieren" - eine Einwilligung, die durch Gestaltung erzwungen wird, ist keine (Art. 4 Nr. 11 DSGVO). */ .consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); } .consent-banner__btn { flex: 1 1 10rem; min-height: 44px; border: 1px solid var(--color-primary); background: var(--color-surface); color: var(--color-primary-dark); text-align: center; } .consent-banner__btn:hover, .consent-banner__btn:focus-visible { background: var(--color-background); } .consent-banner__hint { font-size: 0.8rem; color: var(--color-text-muted); } /* Ab Tablet nebeneinander: Text links, Knoepfe rechts - so bleibt der Streifen flach und nimmt der Karte wenig Hoehe. */ @media (min-width: 40rem) { .consent-banner__inner { grid-template-columns: 1fr auto; align-items: center; column-gap: var(--space-lg); } .consent-banner__actions { flex-wrap: nowrap; } .consent-banner__btn { flex: 0 0 auto; padding-left: var(--space-lg); padding-right: var(--space-lg); } .consent-banner__hint { grid-column: 1 / -1; } }