/* HELL UND DUNKEL haengen seit dem 05.08.2026 nicht mehr an @media (prefers-color-scheme: dark), sondern am Attribut data-thema des -Elements. Gesetzt wird es von thema.js, und zwar IMMER: Steht die Wahl im Profil auf "automatisch", liest thema.js die Systemeinstellung und traegt das Ergebnis ein. Grund fuer den Umbau steht ausfuehrlich in thema.js - kurz: Eine erzwungene Wahl laesst sich in einer Media Query nicht ausdruecken, und jeden Dunkel-Block doppelt zu pflegen ist der sichere Weg, dass Hell- und Dunkelfassung auseinanderlaufen. Fuer neue Regeln heisst das: Dunkelwerte immer als html[data-thema="dunkel"] ... schreiben, nie als Media Query. */ :root { --bg: #f3f6f4; --surface: #ffffff; --ink: #1c2b22; --ink-soft: #5c6b62; --accent: #2f6b4f; --accent-soft: #e4efe8; --border: #dde5e0; --shadow: 0 1px 2px rgba(20, 40, 30, 0.06), 0 4px 14px rgba(20, 40, 30, 0.06); --silhouette: #24352c; } html[data-thema="dunkel"] { --bg: #121814; --surface: #1b241d; --ink: #eaf1ec; --ink-soft: #9fb0a5; --accent: #6fbf94; --accent-soft: #223529; --border: #2b3a30; --shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px rgba(0, 0, 0, 0.35); --silhouette: #dfe9e3; } /* Sagt dem Browser, in welcher Fassung er selbst malen soll: Eingabefelder, Bildlaufleisten, der Textcursor und die eingebauten Auswahlfenster. Ohne das blieben sie hell, auch wenn die Seite dunkel ist. Steht bewusst an denselben Attributen und nicht an einer Media Query, damit die erzwungene Wahl auch hier durchschlaegt. */ html[data-thema="hell"] { color-scheme: light; } html[data-thema="dunkel"] { color-scheme: dark; } /* Das Dashboard zeigt alle drei Datensaetze in derselben Seite. Damit man ohne Hinsehen weiss, welcher gerade aktiv ist, uebersteuert dashboard.js per data-dataset am body die Akzentfarbe - Balken, Chips, Bestenliste und Kopfzeile ziehen mit, weil sie alle var(--accent) benutzen. Die Verlaeufe sind dieselben wie auf den jeweiligen Artenseiten, damit die Auswertung farblich dorthin gehoert, wo man herkommt. */ body[data-dataset="pflanzen"] { --accent: #2f6b6b; --accent-soft: #e2efef; } body[data-dataset="saeugetiere"] { --accent: #6b5a3a; --accent-soft: #f1e9dc; } body[data-dataset="pflanzen"] .app-header { background: linear-gradient(135deg, #c9a66b, #2f6b6b); } body[data-dataset="saeugetiere"] .app-header { background: linear-gradient(135deg, #8a6a4a, #3f5d3a); } html[data-thema="dunkel"] body[data-dataset="pflanzen"] { --accent: #6fbfbf; --accent-soft: #1f3434; } html[data-thema="dunkel"] body[data-dataset="saeugetiere"] { --accent: #c2a06a; --accent-soft: #33291b; } * { box-sizing: border-box; } /* Groessere Schrift - gesetzt als data-schrift von schrift.js, bedient im Profil ("Groessere Schrift"). PROZENT UND NICHT PIXEL ist der ganze Trick: Prozent multipliziert die Schriftgroesse, die jemand im Browser oder Betriebssystem eingestellt hat, px wuerde sie ueberschreiben - wer sein Handy schon gross gestellt hat, bekaeme dann hier weniger statt mehr. Weil alle Groessen in dieser Datei in rem stehen, waechst die gesamte Oberflaeche mit: Abstaende, Tab-Bar, Zaehlknoepfe. Die einzige Stelle, die das nicht von allein vertraegt, ist das Artenraster - Begruendung dort bei .bird-grid. */ /* DIE GROESSEN STEHEN WIEDER, WO SIE WAREN - und das ist eine Entscheidung, keine vergessene Zeile. Am 07.08.2026 standen sie einen halben Tag lang auf 106,25 % (normal) und 131,25 % (gross), weil die Normalstufe als "zu duenn" gemeldet war. Angesehen war das Ergebnis "zu gross", und der Betreiber will die Umbrueche so behalten, wie sie sind. BEIDES ZUSAMMEN GEHT NICHT: Jede andere Schriftgroesse laesst den Text neu umbrechen - Umbrueche bleiben nur bei unveraenderter Groesse gleich. Gegen den duennen Eindruck hilft deshalb allein die STRICHSTAERKE (siehe naechster Absatz); die kostet keinen einzigen Umbruch. Wer hier kuenftig doch an der Groesse dreht, aendert damit zwangslaeufig das Schriftbild jeder Seite. */ :root[data-schrift="gross"] { font-size: 125%; } /* STRICHSTAERKE DES FLIESSTEXTS: 500 STATT 400 - das Einzige, was von der Meldung "zu duenn" (07.08.2026) uebrig bleibt, nachdem die Groesse wieder auf ihren Ausgangswert zurueckgegangen ist. Der richtige Hebel ist es auch: Ein Buchstabe in 500 ist rund 0,8 Prozent breiter als in 400, die Zeilen brechen also praktisch unveraendert - waehrend jede Groessenaenderung die ganze Seite neu umbricht. WARUM DAFUER ZWEI @font-face NOETIG SIND: Figtree ist eine VARIABLE Schrift (Achse wght von 300 bis 900, eine Datei fuer alles). vorseite-design.css meldet sie aber - so kommt es aus dem Design-Export - nur in den drei festen Schnitten 400, 600 und 700 an. Zwischenwerte gibt es damit fuer den Browser nicht: Bei font-weight: 500 sucht er nach den Zuordnungsregeln von CSS den naechstgelegenen ANGEMELDETEN Schnitt, landet bei 400 und malt exakt wie vorher - die Aenderung waere unsichtbar geblieben. Die beiden Bloecke unten melden dieselben Dateien ein zweites Mal an, diesmal mit der vollen Achse (300 900). Damit stellt der Browser jedes Gewicht dazwischen wirklich ein. Kein zusaetzlicher Download: Es sind dieselben zwei .woff2, die vorseite-design.css ohnehin holt. WARUM HIER UND NICHT DORT: Im Kopf von vorseite-design.css steht "AUS DEM ENTWURF ERZEUGT, NICHT VON HAND AENDERN" - beim naechsten Export waere die Zeile weg. Die Dateinamen sind stabil, schriften-auslagern.ps1 benennt nach Familie und Subset (nicht nach Gewicht), genau damit ein anderes Gewicht keine neue Datei braucht. Die unicode-range-Werte sind aus vorseite-design.css uebernommen: Ohne sie wuerde der latin-Block auch die Zeichen beanspruchen, die nur im ext-Block stecken. */ @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("schriften/figtree-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url("schriften/figtree-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* 500 und nicht 600: 600 ist in dieser Datei der Schnitt fuer das Hervorgehobene (Artennamen, aktive Reiter, Knopfbeschriftungen). Stuende der Fliesstext auch dort, waere der Unterschied weg und die Seite eine einzige fette Flaeche. 500 liegt sichtbar ueber Regular und bleibt klar unter dem, was hervorhebt. AN DER KLASSE UND NICHT AM NACKTEN body: vorseite-design.css setzt body { font-weight: 400 } und wird NACH dieser Datei geladen. Ein body { font-weight: 500 } hier waere gleich stark und verloere - mit der Klasse gewinnt diese Regel unabhaengig von der Ladereihenfolge. impressum.html, lizenz.html und datenschutz-vorseite.html bleiben absichtlich draussen: Die drei haben keine dieser Klassen, laufen noch in der Systemschrift und wuerden mit 500 nur ungleichmaessig aussehen. */ :root { --schrift-staerke: 500; } body.app-body, body.landing-body { font-weight: var(--schrift-staerke); } /* Anker-Spruenge (z. B. Sprungleiste im Dashboard) gleiten statt zu springen - ausser das System wuenscht reduzierte Bewegung. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } /* Das hidden-Attribut setzt der Browser nur mit display:none um. Sobald eine eigene Regel ein display vergibt (z. B. .konto-feld{display:flex}), gewinnt die - das Element bleibt trotz hidden sichtbar. Darum hier einmal zentral festschreiben, statt es bei jeder betroffenen Klasse einzeln nachzuziehen. */ [hidden] { display: none !important; } body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, sans-serif; background: var(--bg); color: var(--ink); /* vergroesserte Karten am linken/rechten Rand duerfen keine horizontale Scrollleiste ausloesen. clip statt hidden, weil hidden einen Scroll- Container erzeugt und damit die sticky Suchleiste lahmlegen kann; die hidden-Zeile davor bleibt als Rueckfall fuer alte Browser. */ overflow-x: hidden; overflow-x: clip; } /* Platz fuer die untere Tab-Leiste (nur mobil sichtbar, siehe .tab-bar). */ @media (max-width: 699.98px) { body.has-tabbar { padding-bottom: calc(3.9rem + env(safe-area-inset-bottom, 0px)); } } /* Sprunglink, seit 16.08.2026. Auf voegel.html liegen 327 bedienbare Elemente, davon 150 Artenkarten - wer mit der Tastatur oder einer Schaltersteuerung unterwegs ist, geht sonst durch das ganze Raster, nur um von der Navigation zur Fussleiste zu kommen. Sichtbar wird er allein bei Fokus; mit der Maus bekommt ihn niemand je zu sehen. Nicht mit display:none oder visibility:hidden versteckt - beides nimmt das Element aus der Fokusreihenfolge, und dann ist der Sprunglink genau fuer die weg, fuer die er gebaut ist. Deshalb der Weg ueber die Position. */ .sprunglink { position: absolute; left: -9999px; top: 0; z-index: 100; padding: 0.6rem 1rem; background: var(--surface); color: var(--ink); border: 2px solid var(--accent); border-radius: 0 0 0.5rem 0; text-decoration: none; } .sprunglink:focus { left: 0; } /* Das Sprungziel braucht tabindex="-1", sonst rollt Safari zwar hin, laesst den Tastaturfokus aber stehen - der Sprunglink saehe dann aus, als taete er etwas, und liesse einen genau da zurueck, wo man war. Der Umriss um den ganzen Inhaltsbereich waere sinnlos, weil das Ziel keine Bedienung ist. */ main[tabindex="-1"]:focus { outline: none; } .app-header { background: linear-gradient(135deg, var(--accent), #1f4d38); color: #fff; padding: 1.75rem 1rem; } .header-inner { max-width: 1100px; margin: 0 auto; } .app-header h1 { margin: 0 0 0.25rem; font-size: 1.5rem; } .subtitle { margin: 0; opacity: 0.85; font-size: 0.95rem; } /* Mobil zaehlt jeder Zentimeter bis zur ersten Karte: Kopf auf eine knappe Zeile plus Untertitel eindampfen. */ @media (max-width: 699.98px) { .app-header { padding: 0.8rem 1rem 0.75rem; } .app-header h1 { font-size: 1.15rem; margin-bottom: 0.1rem; } .subtitle { font-size: 0.78rem; } } .app-header-plants { background: linear-gradient(135deg, #c9a66b, #2f6b6b); } .app-header-mammals { background: linear-gradient(135deg, #8a6a4a, #3f5d3a); } main { max-width: 1100px; margin: 0 auto; padding: 1.25rem 1rem 3rem; } /* Etwas mehr Seitenrand, damit die beim Hover vergroesserten Karten am linken und rechten Rand nicht angeschnitten werden (siehe .bird-card:hover). */ @media (hover: hover) and (pointer: fine) and (min-width: 700px) { main { padding-left: 1.9rem; padding-right: 1.9rem; } } .site-nav { display: flex; gap: 0.5rem; margin-bottom: 1rem; flex-wrap: wrap; } .site-nav a { font-size: 0.85rem; padding: 0.4rem 0.8rem; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-soft); text-decoration: none; background: var(--surface); } .site-nav a:hover { color: var(--accent); border-color: var(--accent); } .site-nav a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* Mobil ersetzt die untere Tab-Leiste die Pill-Navigation: die wrappte in drei Zeilen und schob den Inhalt nach unten, waehrend die Tab-Leiste in Daumenreichweite liegt und keinen Inhaltsplatz kostet. */ .tab-bar { display: none; } @media (max-width: 699.98px) { .site-nav { display: none; } .tab-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: var(--surface); border-top: 1px solid var(--border); padding: 0.3rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom, 0px)); } .tab-bar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.05rem; text-decoration: none; color: var(--ink-soft); /* Nicht kleiner: Unter ~11 px ist die Beschriftung fuer viele nicht mehr lesbar, und die Zielgruppe ist eher aelter. */ font-size: 0.7rem; padding: 0.2rem 0; border-radius: 8px; } .tab-bar .tab-icon { font-size: 1.15rem; line-height: 1.2; } /* Alle sechs Bereiche zeigen ein eigenes Bild statt eines Emojis: Leuchtturm (Start), Schwan (Voegel), Strandhafer (Pflanzen), Seehund (Saeuger), Fernrohr (Draussen) und Seemann (Profil). Emojis sehen auf jedem Geraet anders aus und bringen jedes seine eigene Farbwelt mit - die Bilder sind ueberall gleich und holen die Leiste an die Schlei. Die Bilder stehen als data-URI direkt hier und nicht als eigene .svg-Dateien: Bilder liegen laut sw.js cache-first ("einmal gesehen, immer da"), eine Aenderung erreichte zurueckkehrende Nutzer also erst nach einem CACHE_VERSION-Sprung. So reisen sie mit styles.css mit. Zum Aendern: In der URL ist die SVG-Quelle lesbar, nur %3C %3E %23 stehen fuer < > # - das # der Farbwerte MUSS %23 bleiben, sonst bricht die CSS-Regel dort ab. */ .tab-bar .tab-icon-bild { width: 1.38rem; height: 1.38rem; background-repeat: no-repeat; background-position: center; background-size: contain; /* Im HTML steht in diesen Feldern weiterhin das alte Emoji, hier wird es weggeblendet. Grund: styles.css liegt stale-while-revalidate im Cache (sw.js) und wird beim ersten Aufruf nach einem Deploy noch in der alten Fassung ausgeliefert. Ohne das Emoji darunter waeren die Felder dann fuer einen Seitenaufruf leer. */ font-size: 0; overflow: hidden; } .tab-bar .tab-icon-turm { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.66 7.9h4.68L16 20.8H8z' fill='%23c8543f'/%3E%3Cpath d='M9.364 10.2h5.272l.309 2.4H9.055z' fill='%23f6f1e6'/%3E%3Cpath d='M8.746 15h6.508l.309 2.4H8.437z' fill='%23f6f1e6'/%3E%3Crect x='9.15' y='6.9' width='5.7' height='1.05' rx='.5' fill='%2331423a'/%3E%3Crect x='9.9' y='4.6' width='4.2' height='2.35' rx='.55' fill='%2331423a'/%3E%3Ccircle cx='12' cy='5.8' r='.9' fill='%23f2c14e'/%3E%3Cpath d='M9.7 4.6 12 2.5l2.3 2.1z' fill='%23c8543f'/%3E%3Cpath d='M2.3 20.9q2-1.8 4 0' stroke='%235b8aa0' fill='none' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M17.7 20.9q2-1.8 4 0' stroke='%235b8aa0' fill='none' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); } .tab-bar .tab-icon-hafer { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.6 21.4C5.4 19.4 8.6 18.4 12 18.4s6.6 1 9.4 3z' fill='%23d9b87a'/%3E%3Cpath d='M9.9 19C8.1 16.6 7 13.6 6.7 10.2c1.7 2.6 3 5.6 3.8 8.8z' fill='%235a9a6f'/%3E%3Cpath d='M11.1 19c-1-3.8-1-8 .1-12.4.8 4 .8 8.4.7 12.4z' fill='%233f7d58'/%3E%3Cpath d='M12.7 19c.4-4.2 1.3-8.2 2.9-12.1-.4 4.4-1.2 8.5-2 12.1z' fill='%235a9a6f'/%3E%3Cpath d='M14.3 19.2c1.6-2.6 2.8-5.5 3.5-8.8.3 3.5-.8 6.7-2.5 9z' fill='%233f7d58'/%3E%3Cellipse cx='11.2' cy='5.2' rx='.75' ry='1.9' fill='%23c9a66b' transform='rotate(-6 11.2 5.2)'/%3E%3Cellipse cx='15.8' cy='5.6' rx='.7' ry='1.8' fill='%23c9a66b' transform='rotate(14 15.8 5.6)'/%3E%3Cellipse cx='18' cy='9.4' rx='.6' ry='1.5' fill='%23c9a66b' transform='rotate(26 18 9.4)'/%3E%3C/svg%3E"); } .tab-bar .tab-icon-seemann { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='2.6 5.2 18.8 18.8'%3E%3Cpath d='M4.8 21.6C5.4 18.9 8.3 17.2 12 17.2c3.7 0 6.6 1.7 7.2 4.4z' fill='%232e4a5f'/%3E%3Ccircle cx='12' cy='13.1' r='3.5' fill='%23e8c39e'/%3E%3Cpath d='M8.6 14.6c.1 2.3 1.5 3.7 3.4 3.7 1.9 0 3.3-1.4 3.4-3.7-1.1.7-2.2 1-3.4 1-1.2 0-2.3-.3-3.4-1z' fill='%23d6dde1'/%3E%3Ccircle cx='10.85' cy='14.05' r='.36' fill='%2326313a'/%3E%3Ccircle cx='13.15' cy='14.05' r='.36' fill='%2326313a'/%3E%3Cpath d='M8.3 11.9C8.4 9.2 10 7.5 12 7.5c2 0 3.6 1.7 3.7 4.4z' fill='%23e9b949'/%3E%3Cpath d='M6.4 13C7.3 11.5 9.4 10.6 12 10.6c2.7 0 5 1.1 5.9 2.9.3.7-.2 1.3-.9 1-1.5-.7-3.3-1.1-5-1.1-1.7 0-3.3.3-4.8.8-.7.2-1.1-.6-.8-1.2z' fill='%23e9b949'/%3E%3C/svg%3E"); } .tab-bar .tab-icon-schwan { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3.2 20.8q1.9-1.7 3.8 0t3.8 0t3.8 0t3.8 0t3.2 0' fill='none' stroke='%235b8aa0' stroke-width='1.6' stroke-linecap='round'/%3E%3Cpath d='M9.6 15.4C9.3 12.6 8 11.9 7.9 10c-.1-1.5 1-2.6 2.3-2.5' fill='none' stroke='%238a8474' stroke-width='3.1' stroke-linecap='round'/%3E%3Ccircle cx='10.2' cy='7.6' r='1.75' fill='%238a8474'/%3E%3Cpath d='M6.4 14.6c.2 3 2.6 4.6 5.8 4.6 3 0 5.3-1.6 5.9-5 .5-.8.8-1.6.9-2.4-1.1 1.7-2.7 2.6-4.8 3-2.7.5-5.5.3-7.8-.2z' fill='%23f6f1e6' stroke='%238a8474' stroke-width='.6'/%3E%3Cpath d='M9.6 15.4C9.3 12.6 8 11.9 7.9 10c-.1-1.5 1-2.6 2.3-2.5' fill='none' stroke='%23f6f1e6' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10.2' cy='7.6' r='1.35' fill='%23f6f1e6'/%3E%3Cpath d='M9.3 6.9 6.4 7.7l2.9.8z' fill='%23d97b3f'/%3E%3Ccircle cx='10.35' cy='7.15' r='.4' fill='%2331423a'/%3E%3C/svg%3E"); } .tab-bar .tab-icon-seehund { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='8.7' y='13' width='6.6' height='5.6' rx='2.4' fill='%237f929f'/%3E%3Ccircle cx='12' cy='12.4' r='3.7' fill='%237f929f'/%3E%3Cellipse cx='12' cy='14.5' rx='2.15' ry='1.5' fill='%23a9b8c2'/%3E%3Ccircle cx='10.4' cy='11.5' r='.44' fill='%2326313a'/%3E%3Ccircle cx='13.6' cy='11.5' r='.44' fill='%2326313a'/%3E%3Ccircle cx='12' cy='13.7' r='.52' fill='%2326313a'/%3E%3Cpath d='M2.8 17.8q2-1.8 4 0t4 0t4 0t4 0t3.2 0' fill='none' stroke='%235b8aa0' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E"); } .tab-bar .tab-icon-fernrohr { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg transform='rotate(-28 12 10.8)'%3E%3Crect x='3.9' y='9.7' width='2.4' height='2.2' rx='.7' fill='%234a5d54'/%3E%3Crect x='5.9' y='9' width='9.2' height='3.6' rx='1.2' fill='%23c8543f'/%3E%3Crect x='14.5' y='8.5' width='4.7' height='4.6' rx='1.4' fill='%23c8543f'/%3E%3Crect x='13.8' y='8.7' width='1.1' height='4.2' rx='.5' fill='%23f2c14e'/%3E%3Crect x='18.2' y='8.9' width='1.2' height='3.8' rx='.55' fill='%235b8aa0'/%3E%3C/g%3E%3Ccircle cx='12.3' cy='12.5' r='.95' fill='%23f2c14e'/%3E%3Cpath d='M11.4 13.3 8.2 20.6' stroke='%2331423a' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M13.2 13.3 16.4 20.6' stroke='%2331423a' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3Cpath d='M12.3 13.5v7.1' stroke='%2331423a' stroke-width='1.6' stroke-linecap='round' fill='none'/%3E%3C/svg%3E"); } .tab-bar a.active { color: var(--accent); font-weight: 600; } } /* Suchleiste und Filter bleiben beim Scrollen oben stehen: bei 150 Arten ist "zurueck nach oben, um zu suchen" sonst der haeufigste Handgriff. */ .toolbar-sticky { position: sticky; top: 0; z-index: 40; background: var(--bg); padding: 0.6rem 0 0.55rem; margin-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .toolbar-row { display: flex; gap: 0.5rem; align-items: center; } .toolbar-row + .toolbar-row { margin-top: 0.5rem; } .toolbar-sticky input[type="search"] { flex: 1 1 auto; min-width: 0; font: inherit; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); } .toolbar-sticky input[type="search"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; } /* Fortschritt direkt neben der Suche: "30/150" ist die Zahl, um die es in einer Sammel-App geht. Verlinkt aufs Dashboard, wo die Auswertung wohnt. */ .progress-chip { flex: none; display: inline-flex; align-items: baseline; gap: 0.3rem; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 0.4rem 0.75rem; text-decoration: none; white-space: nowrap; } .progress-chip small { font-size: 0.68rem; /* Nimmt die Staerke des Fliesstexts zurueck, statt eine feste 400 zu setzen: Gemeint ist "nicht hervorgehoben", nicht "duenner als der Rest". */ font-weight: var(--schrift-staerke); color: var(--ink-soft); } .filter-chips { display: flex; gap: 0.35rem; /* Vier Chips passen auf normale Handys gerade so; auf sehr schmalen (320 px) wird die Zeile seitlich rollbar, statt die Werkzeugleiste zu sprengen. */ min-width: 0; overflow-x: auto; scrollbar-width: none; } .filter-chips::-webkit-scrollbar { display: none; } .filter-chips button { font: inherit; font-size: 0.82rem; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; flex: none; white-space: nowrap; } @media (max-width: 420px) { .filter-chips { gap: 0.25rem; } .filter-chips button { padding: 0.4rem 0.55rem; } .filter-toggle { padding: 0.4rem 0.55rem; } } .filter-chips button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* Die Wahlzeilen im Profil leihen sich die Chip-Optik der Filterzeile, duerfen aber umbrechen statt seitlich zu rollen: In der Karte ist Platz, und bei grosser Schrift werden die Knoepfe selbst breiter - eine rollbare Zeile wuerde die letzte Stufe genau dann verstecken, wenn jemand sie ansteuert. */ .schrift-wahl, .farben-wahl, .vibration-wahl, .messung-wahl { flex-wrap: wrap; overflow-x: visible; margin-top: 0.2rem; } /* Lebensraum und Sortierung: auf dem Desktop einfach sichtbar, mobil hinter einem Filter-Knopf - zwei Dropdowns waeren dort zwei weitere Zeilen, die staendig mitscrollen, aber selten gebraucht werden. */ .filter-toggle { font: inherit; font-size: 0.82rem; margin-left: auto; padding: 0.4rem 0.75rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .filter-toggle[aria-expanded="true"], .filter-toggle.filtering { border-color: var(--accent); color: var(--accent); font-weight: 600; } .toolbar-more { display: none; gap: 0.5rem; margin-top: 0.5rem; } .toolbar-more.open { display: flex; } .toolbar-more select { flex: 1 1 0; min-width: 0; font: inherit; font-size: 0.85rem; padding: 0.45rem 0.6rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); } @media (min-width: 700px) { .filter-toggle { display: none; } .toolbar-more { display: flex; margin-top: 0.5rem; } .toolbar-more select { flex: 0 1 auto; } } /* Der Stand des laufenden Streifzugs, unten in der klebenden Werkzeugleiste (zeichneStreifzugSticky() in orte-storage.js, seit 08.08.2026). Er stand vorher nur in der Ortsleiste darunter, und die scrollt weg - danach standen 150 Kacheln mit Ziffern da, ohne dass irgendwo stand, ob diese Ziffern gerade eine Strichliste sind oder der Haken der Sammlung. Bewusst leise: keine feste Leiste wie .jagd-leiste weiter unten, keine Akzentflaeche, kein Knopf. Die Jagd-Leiste ist eine Offenlegung (dort verlassen Artnamen das Geraet), der Streifzug bleibt lokal und laeuft beim Zaehlen praktisch immer - was fast immer an ist, liest sonst keiner mehr. Ein span mit display:block, kein p: Beim ersten Aufruf nach einem Deploy kann diese Datei noch aus dem Cache kommen (stale-while-revalidate). Ein p haette dann seine Standard-Abstaende mitten in der Werkzeugleiste, der span erbt ueber .ort-streifzug immerhin Farbe und Ziffernbreite. */ .streifzug-sticky { display: block; margin-top: 0.45rem; font-size: 0.78rem; } /* Ortsleiste: bewusst NICHT sticky. Den Ort setzt man einmal beim Ankommen, danach zaehlt man - eine dritte klebende Zeile wuerde mobil nur Platz kosten. Geklebt wird nur der Streifzug-Stand daraus (siehe oben): Der erklaert die Ziffern auf den Kacheln und wird deshalb beim Scrollen gebraucht, der Rest der Leiste nicht. Sie steht ueber der Summary, weil sie deren Zahlen erklaert. */ .ort-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; margin: 0 0 0.7rem; padding: 0.5rem 0.75rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-size: 0.82rem; } .ort-pin { flex: none; } .ort-frage { color: var(--ink-soft); } .ort-name { font-weight: 600; color: var(--ink); } .ort-fehlt { color: var(--ink-soft); } /* Der Stand des laufenden Streifzugs: dieselben Zahlen, die die Karten gerade zeigen, einmal zusammengefasst. Traegt seit 08.08.2026 auch die klebende Zeile in der Werkzeugleiste (.streifzug-sticky) - beides ist derselbe Satz, also auch dieselbe Farbe und dieselbe Ziffernbreite. In der Leiste hier bleibt davon der Ruhezustand darunter. */ .ort-streifzug { color: var(--ink-soft); font-variant-numeric: tabular-nums; } /* Laeuft keiner, steht das da statt gar nichts. Blasser als der laufende Stand: Es ist eine Auskunft ueber den Ruhezustand, keine Zahl zum Ablesen. */ .ort-streifzug-aus { opacity: 0.75; font-style: italic; } .ort-bar select, .ort-bar button { font: inherit; font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } .ort-bar .ort-gps, .ort-bar .ort-nur.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .ort-bar .ort-gps[disabled] { opacity: 0.6; cursor: default; } /* Volle Breite: erzwingt eine eigene Zeile unter Auswahl und Knopf. */ .ort-hinweis { flex: 1 0 100%; margin: 0; font-size: 0.74rem; color: var(--ink-soft); } /* Der Satz nach einem abgelehnten Standort - in der Leiste und im Startdialog derselbe. Kraeftiger als die beiden Hinweise, neben denen er steht: Die sind Zusicherungen und duerfen zurueckhaltend sein, dieser hier ist eine Bitte und soll gelesen werden. Als p mit Klasse notiert, damit die Farbe auch im Dialog gewinnt, wo .szs-hinweis weiter hinten im Stylesheet steht. */ p.ort-fern { margin: 0; color: var(--ink); } /* "Streifzug beenden" ist der einfache Weg zur frischen Strichliste und damit die Haupthandlung der Leiste - deshalb hervorgehoben, aber nicht gefuellt: Gefuellt ist "Standort verwenden", und zwei volle Flaechen nebeneinander nehmen sich gegenseitig die Bedeutung. */ .ort-bar .ort-ende { border-color: var(--accent); color: var(--accent); font-weight: 600; } /* "Ort wechseln" ist die zuruecknehmende Aktion und tritt entsprechend zurueck. */ .ort-bar .ort-weg { margin-left: auto; border-color: transparent; background: none; color: var(--ink-soft); text-decoration: underline; padding-inline: 0.2rem; } .summary { margin: 0 0 1rem; font-size: 0.8rem; color: var(--ink-soft); } /* Der Komplett-Reset wohnt am Seitenende: die zerstoererischste Aktion der Seite hat in der Werkzeugleiste neben der Suche nichts verloren. */ .reset-zone { margin-top: 2.5rem; text-align: center; } .btn-danger-quiet { font: inherit; font-size: 0.82rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: none; color: var(--ink-soft); cursor: pointer; } .btn-danger-quiet:hover { border-color: #a8322b; color: #a8322b; } .bird-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.9rem; } /* Bei groesserer Schrift bekommt die Karte BEWUSST die volle Breite - auf dem Handy also eine Spalte statt zwei. Der Umweg, der hier nicht funktioniert hat, steht als Warnung dabei: Zwei schmale Spalten zu halten (kleinerer Mindestwert) spart zwar Scrollweg, laesst der Namensspalte auf 375 px aber nur 81 px - und dann passen 120 der 150 Vogelnamen nicht mehr in eine Zeile. "Fischadler" bricht zu "Fischadle/r". Genau die Lesbarkeit, fuer die jemand den Schalter umlegt, ginge also verloren. Mit voller Breite hat der Name 257 px und KEIN einziger Name bricht. Der Preis ist Scrollweg: 54 statt 25 Bildschirme. Ein Drittel davon faengt die Foto-Regel unten wieder ein (ohne sie waeren es 81). auto-fill mit 320 px statt hart "1fr", damit Tablet und Desktop weiterhin mehrspaltig bleiben - dort ist die Breite ja da. 320 px ist die gemessene Untergrenze, bei der auch auf der hoechsten Stufe noch jeder Name passt. */ :root[data-schrift="gross"] .bird-grid { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); } /* HIER STAND EIN FEHLER, und er soll nicht wiederkommen: Um die Seite kuerzer zu machen, bekam .bird-click-area im Grossmodus aspect-ratio: 16/9 statt der quadratischen Kachel. Gerechnet sah das gut aus ("das Foto ist absolut immer noch groesser als im Normalzustand"), angesehen war es kaputt - vom Betreiber gemeldet, die Tiere waren "komplett verschoben". Der Grund steht schon bei .bird-click-area und .bird-photo weiter unten: Der Zuschnitt ist quadratisch, WEIL object-position: center top dann Kopf plus ein gutes Stueck Koerper stehen laesst. Ein breiterer Kasten schneidet von unten weg. Nachgemessen ueber alle 132 Fotos: 16:9 zeigt im Mittel 27 Prozentpunkte WENIGER Bildhoehe als 1:1; die haeufigsten Fotos sind quadratisch (900x900) und verlieren dabei 44 Punkte - dem Vogel fehlt der halbe Koerper. 15 Fotos zeigen weniger als die Haelfte. Merksatz fuers naechste Mal: Am Bildzuschnitt wird nichts gerechnet, sondern angesehen - und zwar an mehreren Arten, nicht an einer. */ /* Abschnitts-Kopf der Gruppenansicht: laeuft ueber die volle Rasterbreite, die Karten der Gruppe folgen darunter. */ .group-header { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin: 0.9rem 0 -0.2rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--border); } .group-header:first-child { margin-top: 0.1rem; } .group-header-name { font-weight: 700; font-size: 0.98rem; } .group-header-count { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .group-header-count.complete { color: var(--accent); font-weight: 600; } .bird-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease; } /* Karte beim Ueberfahren mit der Maus um 30 % vergroessern, damit man die Art besser erkennt. Nur fuer echte Zeigergeraete - auf Touchscreens gibt es kein Hover, dort wuerde der Effekt beim Antippen nur stoeren. Erst ab 700 px Fensterbreite, denn darunter fuellt eine Karte fast die ganze Breite: sie waere dann schon gross genug und wuerde vergroessert seitlich anecken. */ @media (hover: hover) and (pointer: fine) and (min-width: 700px) { .bird-card:hover { transform: scale(1.3); z-index: 10; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); } } @media (prefers-reduced-motion: reduce) { .bird-card { transition: none; } } /* Quadratisch statt 4:3, damit bei Hochformat-Fotos (Vogelportraits sind meist hoeher als breit) weniger vom Bild ueberhaupt weggeschnitten werden muss. Kombiniert mit object-position: top bei .bird-photo bleibt so auch bei sehr hohen Fotos der Kopf plus ein gutes Stueck Koerper sichtbar. */ .bird-click-area { border: none; background: var(--accent-soft); cursor: pointer; padding: 0; display: block; width: 100%; aspect-ratio: 1 / 1; overflow: hidden; position: relative; touch-action: manipulation; } .bird-click-area:active .bird-photo, .bird-click-area:active .bird-svg { transform: scale(0.97); } /* object-position: top statt der Voreinstellung "center" - Vogelfotos von Wikimedia/iNaturalist sind fast immer als Kopf-Portrait komponiert (Kopf oben, Koerper/Ast darunter). Zentriert schneidet der Zuschnitt bei hohen Fotos darum oft genau den Kopf ab (beim Habicht z. B. komplett). */ .bird-photo { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; transition: transform 0.15s ease; } /* Pflanzenfotos zeigen meist die ganze Pflanze statt eines Kopf-Portraits - der Bildausschnitt oben passt hier nicht zuverlaessig. Eigene Klassen mit dem alten 4:3-Format und zentriertem Ausschnitt, unveraendert gegenueber vorher. Saeugetierfotos sind fast immer Querformat-Aufnahmen des ganzen Tieres und brauchen denselben Ausschnitt - darum dieselben Regeln, aber eigene Klassennamen, damit sich die beiden Seiten spaeter unabhaengig voneinander aendern lassen. */ .plant-click-area, .mammal-click-area { border: none; background: var(--accent-soft); cursor: pointer; padding: 0; display: block; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; position: relative; touch-action: manipulation; } .plant-click-area:active .plant-photo, .plant-click-area:active .plant-svg, .mammal-click-area:active .mammal-photo, .mammal-click-area:active .mammal-svg { transform: scale(0.97); } .plant-photo, .mammal-photo { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.15s ease; } .bird-svg { width: 100%; height: 100%; display: block; padding: 0.5rem; box-sizing: border-box; transition: transform 0.1s ease; } .bird-svg .bird-wing path, .bird-svg .bird-body, .bird-svg .bird-tail, .bird-svg .bird-neck, .bird-svg .bird-head, .bird-svg .bird-beak { fill: var(--silhouette); } .bird-svg .bird-legs { stroke: var(--silhouette); stroke-width: 3; fill: none; stroke-linecap: round; } .plant-svg { width: 100%; height: 100%; display: block; padding: 0.6rem; box-sizing: border-box; } .plant-svg .plant-fill { fill: var(--accent); } .plant-svg .plant-stroke { stroke: var(--accent); fill: none; stroke-linecap: round; } .plant-svg .plant-berry { fill: #d9622b; } /* Saeugetier-Fallback: Silhouetten wie bei den Voegeln (statt der farbigen Pflanzen-Symbole), darum auch dieselbe Silhouetten-Farbe. */ .mammal-svg { width: 100%; height: 100%; display: block; padding: 0.6rem; box-sizing: border-box; } .mammal-svg .mammal-fill { fill: var(--silhouette); } .mammal-svg .mammal-stroke { stroke: var(--silhouette); fill: none; stroke-linecap: round; } .mammal-svg .mammal-eye { fill: var(--accent-soft); } .count-badge { position: absolute; top: 6px; right: 6px; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem; min-width: 1.6rem; height: 1.6rem; border-radius: 999px; display: flex; align-items: center; justify-content: center; padding: 0 0.4rem; gap: 0.15rem; } /* Haekchen vor der Zahl: der Sammel-Zustand soll auch aus zwei Metern Entfernung lesbar sein, nicht nur die Zahl selbst. Seit den Streifzuegen tragen Haken und Ziffer verschiedene Aussagen: Der Haken heisst "hast du schon" (Sammelstand), die Ziffer "so oft in diesem Streifzug". "✓3" ist also gesammelt UND gerade dreimal gezaehlt; ohne laufende Strichliste steht der Haken allein. */ .count-badge.gesammelt::before { content: "✓"; font-size: 0.72rem; font-weight: 700; } /* Die Null liegt direkt auf dem Foto - transparent mit gestricheltem Rand war sie auf hellem Himmel praktisch unsichtbar. Dunkler Scrim statt dessen. */ .count-badge.zero { background: rgba(12, 20, 15, 0.45); color: rgba(255, 255, 255, 0.9); border: none; } @keyframes badge-pulse { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } } .count-badge.pulse { animation: badge-pulse 0.35s ease; } /* Das "+1", das beim Zaehlen kurz aus der Badge aufsteigt. */ .count-float { position: absolute; top: 8px; right: 10px; color: #fff; background: var(--accent); border-radius: 999px; padding: 0.1rem 0.45rem; font-size: 0.8rem; font-weight: 700; pointer-events: none; animation: count-float-up 0.7s ease-out forwards; } @keyframes count-float-up { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(-34px); } } /* Zuruecknehmen (Langdruck) faellt, statt zu steigen: Die Richtung sagt ohne Lesen, was gerade passiert ist - draussen zaehlt genau das. */ .count-float.minus { background: rgba(12, 20, 15, 0.72); animation-name: count-float-down; } @keyframes count-float-down { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateY(28px); } } /* Gesehene Art = eingesammelte Karte: farbige Kante, ohne Layout-Sprung (der zweite Pixel kommt per Inset-Schatten dazu, nicht per Border). */ .bird-card.collected { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent), var(--shadow); } .bird-info { padding: 0.5rem 0.3rem 0.55rem 0.75rem; display: flex; align-items: center; gap: 0.25rem; flex: 1; } .bird-titles { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; flex: 1; } /* Lange Artnamen sind EIN Wort ("Wintergoldhaehnchen", "Kuestenseeschwalbe") und passen im Normalzustand nicht in die Namensspalte: 26 der 150 Vogelnamen brauchen mehr als die 102 px, die dort stehen, und laufen bis zu 35 px unter den i-Knopf. .bird-titles darf zwar schrumpfen (min-width: 0), aber ein Wort ohne Umbruchpunkt schrumpft nicht mit. hyphens: auto trennt sie sauber ("Wintergold-haehnchen") - das lang="de" der Seite liefert die Sprache. Wo der Browser kein deutsches Trennwoerterbuch mitbringt (im Vorschau-Chrome getestet: tut er nicht), bleibt es beim bisherigen Ueberlauf. BEWUSST OHNE overflow-wrap: break-word. Das war einen Versuch lang drin und ist wieder raus: Es beseitigt den Ueberlauf zwar immer, aber ohne Trennwoerterbuch bricht es mitten im Wort ("Wintergoldhaeh/nchen") - und das trifft dann ALLE Nutzer im Normalzustand, nicht nur die mit grosser Schrift. Wer den Ueberlauf ganz weghaben will, braucht mehr Platz fuer den Namen (schmalerer i-Knopf oder Titelzeile ueber die volle Kartenbreite), nicht einen haerteren Umbruch. Der lateinische Name bekommt kein hyphens: Er ist nicht deutsch, deutsche Trennregeln waeren dort falsch. */ .bird-name { font-weight: 600; font-size: 0.92rem; line-height: 1.25; hyphens: auto; } .bird-latin { font-style: italic; color: var(--ink-soft); font-size: 0.74rem; } /* Der Weg zur Detailansicht. Muss ein bequemes Tippziel sein (44px), darf aber neben 150 Fotos nicht schreien. */ .card-info-btn { flex: none; width: 2.5rem; height: 2.5rem; display: flex; align-items: center; justify-content: center; border: none; background: none; border-radius: 50%; color: var(--ink-soft); font-size: 1.05rem; cursor: pointer; padding: 0; } .card-info-btn:hover, .card-info-btn:focus-visible { color: var(--accent); background: var(--accent-soft); outline: none; } .no-results { text-align: center; color: var(--ink-soft); margin-top: 2rem; } .app-footer { text-align: center; color: var(--ink-soft); font-size: 0.8rem; padding: 1rem; } .app-footer a { color: var(--ink-soft); } .app-footer a:hover { color: var(--accent); } .legal-page { max-width: 700px; margin: 0 auto; padding: 1.5rem 1rem 3rem; line-height: 1.6; } .legal-page h2 { font-size: 1.1rem; margin-top: 1.75rem; margin-bottom: 0.4rem; } .legal-page p { margin: 0 0 0.6rem; } .legal-page a { color: var(--accent); } .legal-back { display: inline-block; margin-top: 1rem; } .legal-page li { margin-bottom: 0.35rem; } /* Info-Seite: aufklappbare häufige Fragen */ .info-faq details { border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.85rem; margin: 0 0 0.5rem; background: var(--surface); } .info-faq summary { cursor: pointer; font-weight: 600; font-size: 0.92rem; } .info-faq summary:hover { color: var(--accent); } .info-faq p { margin: 0.5rem 0 0.2rem; color: var(--ink-soft); } /* ---------- Dashboard ---------- */ .dashboard-main { max-width: 900px; margin: 0 auto; padding: 1.25rem 1rem 3rem; } .back-link { display: inline-block; color: var(--ink-soft); text-decoration: none; font-size: 0.85rem; margin-bottom: 1rem; } .back-link:hover { color: var(--accent); } .stat-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.75rem; margin-bottom: 1.5rem; } .stat-tile { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); padding: 0.9rem 1rem; } .stat-tile-value { font-size: 1.5rem; font-weight: 600; color: var(--ink); line-height: 1.2; } .stat-tile-label { font-size: 0.78rem; color: var(--ink-soft); margin-top: 0.2rem; } /* Der Januar-Hinweis unter den Kacheln. Sitzt im Abstand, den sonst die Kachelreihe nach unten haelt - deshalb zieht er ihn hier wieder heran. */ .jahresstart { margin: -0.75rem 0 1.5rem; font-size: 0.86rem; line-height: 1.5; color: var(--ink); background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 0.55rem 0.7rem; } .dashboard-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 1.1rem 1.2rem 1.3rem; margin-bottom: 1.25rem; /* Luft, wenn eine Karte per scrollIntoView angesprungen wird (Tages-Detail) */ scroll-margin-top: 0.9rem; } /* Steht oben eine feste Leiste (Party, Jagd, Streifzug), liegt der obere Fensterrand unter ihr: Eine angesprungene Karte begaenne mit ihrer Ueberschrift im Verdeckten - und ausgerechnet der Weg aus der Fusszeile auf "Unterstuetzen" endet in einer solchen Karte, waehrend ein Streifzug fast immer laeuft. Fuer Party und Jagd ist die Hoehe fest (siehe ihre eigenen Regeln weiter unten), bei laufendem Streifzug misst streifzug.js sie in --leisten-hoehe; deshalb steht diese Zeile zuletzt und gewinnt dann. */ body.hat-jagdleiste .dashboard-card, body.hat-partyleiste .dashboard-card { scroll-margin-top: calc(2.1rem + 0.9rem + env(safe-area-inset-top, 0px)); } body.hat-streifzugleiste .dashboard-card { scroll-margin-top: calc(var(--leisten-hoehe, 2.1rem) + 0.9rem); } /* Am Desktop stehen die beiden Listen-Karten (Gruppen + Bestenliste) nebeneinander. Auf dem Handy loest sich der Wrapper per display:contents auf, die Karten verhalten sich wie direkte Kinder von main. */ .dashboard-columns { display: contents; } @media (min-width: 860px) { .dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; margin-bottom: 1.25rem; } .dashboard-columns > .dashboard-card { margin-bottom: 0; } } .dashboard-card h2 { font-size: 1.05rem; margin: 0 0 0.9rem; } .dashboard-card-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.9rem; } .dashboard-card-header h2 { margin: 0; } .range-filter { display: flex; gap: 0.3rem; } .range-filter button { font: inherit; font-size: 0.78rem; padding: 0.3rem 0.65rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); cursor: pointer; } .range-filter button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* Sichtungen vs. Arten pro Tag. Sitzt in der Kartenkopfzeile, weil er wirklich nur diese eine Auswertung umstellt. */ .metric-filter { display: flex; gap: 0.3rem; } .metric-filter button { font: inherit; font-size: 0.78rem; padding: 0.3rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); cursor: pointer; } .metric-filter button.active { background: var(--accent-soft); border-color: var(--accent); color: var(--ink); font-weight: 600; } .card-hint { margin: -0.4rem 0 0.9rem; font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft); } /* Aufklappbare Hintergrund-Erklaerung am Kartenende. Ersetzt die frueheren Fussnoten-Absaetze: sichtbar bleibt nur die eine Frage-Zeile, der Text erscheint erst auf Wunsch. Bewusst dezenter als .table-toggle - das dort ist Inhalt, das hier ist Erklaerung. */ .card-more { margin-top: 0.9rem; border-top: 1px solid var(--border); padding-top: 0.7rem; } .card-more summary { cursor: pointer; font-size: 0.78rem; color: var(--ink-soft); } .card-more summary:hover { color: var(--accent); } .card-more p { margin: 0.6rem 0 0; font-size: 0.78rem; line-height: 1.55; color: var(--ink-soft); } .card-close { font: inherit; font-size: 0.9rem; line-height: 1; padding: 0.35rem 0.5rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink-soft); cursor: pointer; } .card-close:hover { border-color: var(--accent); color: var(--ink); } /* ---- Kontoseite ---- */ .konto-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; } .konto-feld { display: flex; flex-direction: column; gap: 0.3rem; } .konto-feld > span { font-size: 0.85rem; font-weight: 600; } .konto-feld input { font: inherit; padding: 0.55rem 0.7rem; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); } .konto-feld input:focus { outline: 2px solid var(--accent); outline-offset: 1px; } .konto-feld small { color: var(--ink-soft); font-size: 0.75rem; } .konto-button { font: inherit; font-weight: 600; padding: 0.6rem 1.2rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } .konto-button:disabled { opacity: 0.6; cursor: default; } .konto-button-still { background: var(--surface); color: var(--ink-soft); border-color: var(--border); } .konto-button-gefahr { background: #a8322b; border-color: #a8322b; } .konto-aktionen { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; } /* Der WhatsApp-Knopf der Weitersagen-Karte ist ein Link im Knopf-Gewand - ohne diese Regeln saehe er nach unterstrichenem Text aus. */ a.konto-button { display: inline-block; text-decoration: none; text-align: center; } /* Die sichtbare Nachricht der Weitersagen-Karte: pre-line, weil Text und Link per \n getrennt sind - genau so kommt es auch beim Empfaenger an. */ .weitersagen-vorschau { white-space: pre-line; overflow-wrap: anywhere; background: var(--accent-soft); border: 1px solid var(--border); border-radius: 12px; padding: 0.7rem 0.9rem; font-size: 0.9rem; line-height: 1.5; } .weitersagen-hinweis { margin: 0.6rem 0 0; font-size: 0.8rem; color: var(--ink-soft); } .konto-wechsel { margin-top: 1rem; font-size: 0.85rem; color: var(--ink-soft); } .linklike { font: inherit; background: none; border: none; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; } .konto-meldung { margin: 0; padding: 0.6rem 0.75rem; border-radius: 8px; font-size: 0.85rem; border: 1px solid var(--border); } .konto-meldung-ok { background: var(--accent-soft); border-color: var(--accent); } .konto-meldung-fehler { background: #fdecea; border-color: #d9534f; color: #7d2820; } html[data-thema="dunkel"] .konto-meldung-fehler { background: #3a1f1d; color: #f3c9c4; } .konto-gefahr { margin-top: 1.75rem; font-size: 0.85rem; color: var(--ink-soft); } .konto-gefahr summary { cursor: pointer; } /* ---- Profilseite (konto.html) ---- */ /* Schmaler als das Dashboard, breiter als die Textseiten: die Badge-Kacheln brauchen Platz, das Anmeldeformular soll trotzdem kompakt bleiben. */ .profil-main { max-width: 860px; } /* ---- Einstellungen: die aufklappbare Karte ganz oben ---- Sieben Einstellungen als sieben Karten waeren die halbe Profilseite gewesen, obwohl man die meisten davon einmal anfasst und nie wieder. Deshalb eine Karte, die zugeklappt aus einer Zeile besteht. */ .einstellungen-karte { /* Die Zeile selbst bringt ihre Polsterung mit, damit die ganze Breite antippbar ist - sonst muesste man den Text treffen. */ padding: 0; } .einstellungen-summary { cursor: pointer; padding: 1.1rem 1.2rem; display: flex; align-items: center; gap: 0.6rem; /* Der eingebaute Pfeil sieht auf jeder Plattform anders aus; hier steht stattdessen ein eigener rechts am Rand. */ list-style: none; } .einstellungen-summary::-webkit-details-marker { display: none; } .einstellungen-summary h2 { margin: 0; flex: none; } /* Zugeklappt sagt die Zeile, was drinsteckt - sonst muesste man aufklappen, um zu erfahren, ob sich das Aufklappen lohnt. Beim Oeffnen verschwindet der Hinweis, weil dann die Ueberschriften selbst dastehen. */ .einstellungen-teaser { flex: 1; min-width: 0; font-size: 0.78rem; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } #einstellungen[open] .einstellungen-teaser { visibility: hidden; } /* Bei grosser Schrift auf schmalen Geraeten bliebe vom Hinweis nur "Schrift, Fa..." uebrig. Ein Bruchstueck sagt weniger als nichts, und wer die Schrift hochgestellt hat, will Lesbarkeit und keine Andeutung. */ @media (max-width: 599px) { html[data-schrift="gross"] .einstellungen-teaser { display: none; } } .einstellungen-summary::after { content: ""; flex: none; margin-left: auto; width: 0.5rem; height: 0.5rem; border-right: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(45deg); transform-origin: center; margin-top: -0.2rem; } #einstellungen[open] .einstellungen-summary::after { transform: rotate(-135deg); margin-top: 0.15rem; } .einstellungen-summary:hover h2, .einstellungen-summary:focus-visible h2 { color: var(--accent); } .einstellungen-inhalt { padding: 0 1.2rem 1.3rem; } /* Trennlinien nur ZWISCHEN den Bloecken: eine ueber dem ersten Block waere die zweite Linie direkt unter der Ueberschrift. */ .einstellung + .einstellung { border-top: 1px solid var(--border); margin-top: 1.1rem; padding-top: 1.1rem; } .einstellung[hidden] { display: none; } .einstellung h3 { font-size: 0.95rem; /* Derselbe Abstand wie bei .dashboard-card h2 - .card-hint zieht sich mit einem negativen Rand daran hoch und saehe sonst versetzt aus. */ margin: 0 0 0.9rem; } /* Der letzte Absatz eines Blocks (Statuszeile, Rueckmeldung) braucht den Abstand nach unten nicht, den .card-hint sonst mitbringt. */ .einstellung > .card-hint:last-child { margin-bottom: 0; } /* .card-hint zieht sich normalerweise mit -0.4rem an die Ueberschrift heran. Steht die Zeile aber UNTER den Knoepfen ("Gerade hell, weil ..."), klebt sie damit an ihnen fest. */ .einstellung > .filter-chips + .card-hint { margin-top: 0.55rem; } .profil-kopf { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 1.1rem; } .profil-avatar { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: var(--accent-soft); border: 1px solid var(--accent); color: var(--accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-weight: 700; flex-shrink: 0; } .profil-kopf-text { min-width: 0; } .profil-kopf-text h2 { margin: 0 0 0.2rem; } .profil-status { margin: 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); } .profil-status + .profil-status { margin-top: 0.15rem; } /* Die Kacheln sitzen hier IN der Karte - der Abstand nach unten gehoert der Karte, nicht dem Raster. */ .profil-kacheln { margin-bottom: 0; } /* Eine grosse Kachel ueber drei kleinen. Feste drei Spalten statt des automatischen Rasters von .stat-tiles: minmax(140px) laesst auf einem 360px-Display nur zwei Kacheln nebeneinander zu und stellt die dritte allein in eine zweite Reihe. Die Beschriftungen sind dafuer kurz gehalten (siehe zeigeKacheln in konto.js). */ .profil-kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } .profil-kacheln .stat-tile-gross { grid-column: 1 / -1; } .stat-tile-gross .stat-tile-value { font-size: 2.4rem; } .stat-tile-gross .stat-tile-label { font-size: 0.86rem; } /* Der Fortschrittsbalken der grossen Kachel. Teilt sich die Regeln mit den Auszeichnungen weiter unten, damit es nicht zwei Balken gibt, die sich auseinanderentwickeln. */ .stat-bar-track { display: block; height: 5px; margin-top: 0.5rem; background: var(--accent-soft); border-radius: 999px; overflow: hidden; } .stat-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* Die Zaehlstaende im Aufklappbaren: dieselbe Kachel, nur leiser. Sie sind eine Auskunft, kein Ergebnis. */ .profil-zahlen-kacheln { margin: 0.6rem 0 0.9rem; } .profil-zahlen-kacheln .stat-tile-value { font-size: 1.15rem; } /* ---------- Monatsrueckblick (Profil) ---------- */ /* Die beiden Pfeile und der Monatsname sitzen als eine Einheit rechts im Kartenkopf - dort, wo im Dashboard der Zeitraum-Filter steht. */ .monat-blaettern { display: flex; align-items: center; gap: 0.4rem; } .monat-name { font-size: 0.95rem; font-weight: 600; color: var(--ink); /* Feste Mindestbreite, sonst huepfen die Pfeile zwischen "Mai" und "September" hin und her. */ min-width: 6.5rem; text-align: center; } .monat-pfeil { font: inherit; font-size: 1.2rem; line-height: 1; /* 40 px: dieselbe Daumengroesse wie die Filter-Chips. */ min-width: 40px; min-height: 40px; padding: 0 0.5rem; cursor: pointer; color: var(--ink); background: var(--surface); border: 1px solid var(--border); border-radius: 10px; } .monat-pfeil:disabled { opacity: 0.35; cursor: default; } .monat-satz { margin: 0 0 0.9rem; color: var(--ink-soft); font-size: 0.92rem; } /* Die Jahreszahl rechts im Kartenkopf von "Dein Jahr". Steht dort, wo beim Monatsrueckblick die Blaetter-Pfeile sitzen, aber ohne Pfeile: Die Jahreskarte blaettert nicht (Begruendung im Markup). */ .jahr-nummer { font-size: 0.95rem; font-weight: 600; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .monat-kacheln { margin-bottom: 0.9rem; } @media (min-width: 700px) { .monat-kacheln-sechs { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Erstfunde und Orte: je eine ruhige Zeile unter den Kacheln, kein eigener Kasten - es sind Beiwerk zur Zahl darueber, keine zweite Auswertung. */ .monat-zeile { margin: 0.35rem 0 0; font-size: 0.88rem; color: var(--ink-soft); } .monat-zeile + .konto-aktionen { margin-top: 0.9rem; } /* Ueberschrift je Kategorie in der aufgeklappten Gesamtliste der Auszeichnungen. */ .badge-kat-head { margin: 1rem 0 0.5rem; } /* ---- KI-Pflanzenbestimmung (pflanzen.html) ---- */ .ki-treffer { display: flex; gap: 1rem; flex-wrap: wrap; align-items: flex-start; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--border); } .ki-vorschau { width: 120px; height: 120px; object-fit: cover; border-radius: 10px; border: 1px solid var(--border); flex-shrink: 0; } .ki-treffer > div { flex: 1 1 220px; min-width: 0; } .ki-treffer p { margin: 0 0 0.5rem; } .ki-hinweis { font-size: 0.85rem; color: var(--ink-soft); } /* Nur noch der Datensatz-Umschalter - er schaltet wirklich die ganze Seite um. Der Zeitraum stand bis zum 31.07.2026 daneben und wirkte doch nur auf zwei von elf Auswertungen; er sitzt jetzt im Kopf von .zeitraum-gruppe, also sichtbar an dem, was er tatsaechlich steuert. */ .dashboard-toolbar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 1rem; } /* Kacheln + Tagesdiagramm als eine sichtbare Einheit unter dem Zeitraum-Filter. Der eingerueckte Rahmen ist der ganze Zweck: Er zeigt ohne ein Wort Erklaerung, wie weit "7 Tage" reicht - alles darunter auf der Seite ist Gesamtstand. */ .zeitraum-gruppe { border-left: 2px solid var(--border); padding-left: 0.85rem; margin-bottom: 1.5rem; } .zeitraum-kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.6rem; margin-bottom: 0.7rem; } .zeitraum-titel { margin: 0; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-soft); } /* Unternavigation der drei Dashboard-Ansichten (Jetzt / Ausfluege / Bilanz). Sitzt an der Stelle der frueheren Sprungleiste und sieht auch so aus - nur fuehren die Chips jetzt zu Seiten statt zu Ankern. Eine Sprungleiste mit acht Marken war das Eingestaendnis, dass die Seite zu lang ist; drei Ansichten loesen das Problem, statt es navigierbar zu machen. Voll ausgeschrieben statt scrollbar: drei kurze Woerter passen auch auf 375 px nebeneinander. */ .dashboard-subnav { display: flex; gap: 0.35rem; margin-bottom: 1rem; } .dashboard-subnav a { flex: 1 1 0; text-align: center; font-size: 0.82rem; padding: 0.4rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); text-decoration: none; white-space: nowrap; } .dashboard-subnav a:hover { border-color: var(--accent); color: var(--ink); } .dashboard-subnav a.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* Dieselben Ziele am Seitenende, in Daumenreichweite: wer unten angekommen ist, soll nicht erst wieder hochscrollen muessen. */ .dashboard-weiter { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-top: 1.75rem; } @media (min-width: 600px) { .dashboard-weiter { grid-template-columns: 1fr 1fr; } } .dashboard-weiter a { display: grid; grid-template-columns: auto 1fr; column-gap: 0.7rem; row-gap: 0.2rem; align-items: center; padding: 0.85rem 1rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); box-shadow: var(--shadow); text-decoration: none; color: var(--ink); } .dashboard-weiter a:hover { border-color: var(--accent); } /* Farbpunkt statt Emoji - dieselben Kreise wie auf den Startseiten-Kacheln, eine Nummer kleiner. Der Rand haelt ihn auch nachts sichtbar, wenn der Flaechenton nah an der Kartenflaeche liegt. */ .weiter-punkt { grid-row: 1 / span 2; width: 1.1rem; height: 1.1rem; border-radius: 50%; background: var(--accent-soft); border: 2px solid var(--accent); } .dashboard-weiter strong { font-size: 0.92rem; font-weight: 600; grid-column: 2; } .dashboard-weiter span:not(.weiter-punkt) { font-size: 0.78rem; line-height: 1.45; color: var(--ink-soft); grid-column: 2; } /* Umschalter Voegel / Pflanzen / Saeugetiere. Bewusst groesser als der Zeitraum-Filter, weil er die Hauptauswahl der Seite ist. */ .dataset-filter { display: flex; gap: 0.4rem; flex-wrap: wrap; } .dataset-filter button { font: inherit; font-size: 0.9rem; padding: 0.5rem 1.1rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; } .dataset-filter button:hover { border-color: var(--accent); color: var(--ink); } .dataset-filter button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } /* Die Plotflaeche ist exakt --plot-h hoch, die Tagesbeschriftung liegt darunter in einer eigenen Grid-Zeile. Nur so stimmen Balkenhoehe, Gridlines und Y-Achse ueberein - vorher teilte sich der Balken seine Hoehe mit dem Label und war dadurch immer etwas zu kurz. */ .chart-area { --plot-h: 190px; display: flex; align-items: flex-start; gap: 0.5rem; padding-top: 1.2rem; /* Platz fuer die Zahlen ueber den Balken */ } .chart-y-axis { position: relative; flex: none; width: 2rem; height: var(--plot-h); } .chart-y-label { position: absolute; right: 0; transform: translateY(-50%); font-size: 0.72rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .chart-wrap { flex: 1; min-width: 0; overflow-x: auto; padding-bottom: 0.25rem; } .chart-plot { position: relative; min-width: max-content; } .chart-grid { position: absolute; left: 0; right: 0; top: 0; height: var(--plot-h); pointer-events: none; } .chart-grid span { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--border); } /* Die Nulllinie ist die Grundlinie des Diagramms und darum durchgezogen. */ .chart-grid span:last-child { border-top-style: solid; } .chart-bars { display: flex; align-items: flex-start; min-width: max-content; } /* Ein Slot pro Tag, gleich breit; der Abstand entsteht daraus, dass der Balken schmaler ist als sein Slot. */ .chart-col { display: grid; grid-template-rows: var(--plot-h) auto; justify-items: center; width: var(--col-w, 22px); } .chart-slot { display: flex; align-items: flex-end; justify-content: center; width: 100%; } .chart-bar { position: relative; width: var(--bar-w, 16px); height: var(--bar-height, 2%); background: var(--accent); border: none; border-radius: 3px 3px 0 0; cursor: pointer; padding: 0; transition: filter 0.1s ease; } .chart-bar:hover { filter: brightness(1.12); } /* Kein outline:none - der Helligkeitswechsel allein ist als Fokusanzeige fuer Tastaturbedienung zu schwach. */ .chart-bar:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } /* Tag ohne Sichtung: Stummel auf der Grundlinie, damit die Zeitachse durchgehend lesbar bleibt und Pausen sichtbar sind. */ .chart-zero { width: var(--bar-w, 16px); height: 2px; background: var(--border); border-radius: 1px; } .bar-value { position: absolute; top: -1.15rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; color: var(--ink); white-space: nowrap; } /* Breite 0, damit die Datumsschrift die Spaltenbreite nicht aufblaeht: sonst waere das Diagramm immer so breit wie die Summe aller Beschriftungen und wuerde unnoetig scrollen. Der Text laeuft mittig ueber den Slot hinaus, ausgeduennt wird er ohnehin in dashboard.js. */ .chart-x-label { width: 0; display: flex; justify-content: center; font-size: 0.7rem; color: var(--ink-soft); margin-top: 0.4rem; white-space: nowrap; min-height: 1em; } .chart-tooltip { position: absolute; transform: translate(-50%, -100%); background: var(--ink); color: var(--bg); padding: 0.4rem 0.6rem; border-radius: 8px; font-size: 0.75rem; display: flex; flex-direction: column; gap: 0.1rem; pointer-events: none; opacity: 0; visibility: hidden; transition: opacity 0.1s ease; z-index: 20; white-space: nowrap; } .chart-tooltip.visible { opacity: 1; visibility: visible; } .chart-tooltip strong { font-size: 0.85rem; } .empty-hint { color: var(--ink-soft); font-size: 0.85rem; text-align: center; padding: 1.5rem 0.5rem; } .table-toggle { margin-top: 0.8rem; font-size: 0.85rem; } .table-toggle summary { cursor: pointer; color: var(--accent); font-weight: 600; } .table-scroll { max-height: 260px; overflow-y: auto; margin-top: 0.6rem; } .data-table { width: 100%; border-collapse: collapse; font-size: 0.82rem; } .data-table th, .data-table td { text-align: left; padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--border); font-variant-numeric: tabular-nums; } .data-table th { color: var(--ink-soft); font-weight: 600; position: sticky; top: 0; background: var(--surface); } .day-detail-list { display: flex; flex-direction: column; gap: 0.4rem; } .day-detail-item { display: flex; justify-content: space-between; padding: 0.4rem 0.6rem; background: var(--bg); border-radius: 8px; font-size: 0.88rem; } .day-detail-count { font-weight: 600; font-variant-numeric: tabular-nums; } /* ---- Artensammelkurve ---- */ .curve-wrap { margin-top: 0.2rem; } .curve-wrap svg { display: block; overflow: visible; } .curve-grid { stroke: var(--border); stroke-width: 1; stroke-dasharray: 3 3; } .curve-grid-base { stroke-dasharray: none; } .curve-axis-label { fill: var(--ink-soft); font-size: 0.72rem; font-family: inherit; } .curve-area { fill: var(--accent-soft); } .curve-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; } /* Punkte nur an Tagen mit neuen Arten - die Fundereignisse. Der letzte Punkt bleibt auch ohne Neuzugang stehen, damit das Kurvenende markiert ist. */ .curve-point { fill: var(--accent); stroke: var(--surface); stroke-width: 1.5; cursor: pointer; } .curve-point-flat { fill: var(--ink-soft); } .curve-point:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; } .curve-estimate { stroke: var(--ink-soft); stroke-width: 1; stroke-dasharray: 6 4; } .curve-estimate-label { fill: var(--ink-soft); font-size: 0.72rem; font-family: inherit; } .curve-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin-top: 1rem; } .curve-fact { background: var(--bg); border-radius: 10px; padding: 0.6rem 0.75rem; } .curve-fact-value { display: block; font-size: 1.05rem; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; } .curve-fact-label { display: block; font-size: 0.74rem; color: var(--ink-soft); margin-top: 0.15rem; line-height: 1.35; } /* ---- Was fehlt noch ---- */ .gap-list { display: flex; flex-direction: column; gap: 0.6rem; } .gap-item { background: var(--bg); border-radius: 10px; padding: 0.65rem 0.8rem; display: flex; align-items: flex-start; gap: 0.7rem; } /* Das Foto der gesuchten Art: gross genug zum Erkennen, klein genug, dass die Karte eine Notiz bleibt. */ .gap-photo { flex: none; width: 64px; height: 64px; object-fit: cover; border-radius: 8px; } /* Vogelfotos wie auf den Karten oben anschneiden - zentriert fehlt sonst der Kopf (siehe .bird-photo). */ .gap-photo-bird { object-position: center top; } .gap-body { flex: 1; min-width: 0; } .gap-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem; } .gap-name { font-weight: 600; color: var(--ink); } .gap-group { font-size: 0.74rem; color: var(--ink-soft); background: var(--accent-soft); border-radius: 999px; padding: 0.1rem 0.5rem; } .gap-season-badge { font-size: 0.72rem; color: var(--accent); border: 1px solid var(--accent); border-radius: 999px; padding: 0.05rem 0.5rem; } /* Vorschlag ausserhalb der Saison: taucht nur auf, wenn in der Gruppe gerade nichts fehlt, was jetzt da waere. Darum sichtbar abgesetzt. */ .gap-season-badge.off { color: var(--ink-soft); border-color: var(--border); border-style: dashed; } .gap-season { margin: 0 0 0.9rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink); background: var(--accent-soft); border-radius: 10px; padding: 0.55rem 0.75rem; } .gap-info { margin: 0.35rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); } .gap-terrain { margin: 0.9rem 0 0; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); } /* ---- Export: CSV und PDF ---- */ .export-buttons { display: flex; flex-wrap: wrap; gap: 0.5rem; } .export-btn { font: inherit; font-size: 0.88rem; font-weight: 600; padding: 0.55rem 1.1rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } /* Der zweite Knopf ist gleichwertig, aber nicht zweimal dieselbe Signalfarbe - sonst konkurrieren beide um denselben Blick. */ .export-btn-still { background: var(--surface); color: var(--accent); } .export-btn:hover:not(:disabled) { filter: brightness(1.08); } .export-btn-still:hover:not(:disabled) { background: var(--accent-soft); filter: none; } .export-btn:disabled { background: var(--bg); border-color: var(--border); color: var(--ink-soft); cursor: not-allowed; } /* Zeilenzahl unter den Knoepfen - kleine Statuszeile ohne Trennlinie, die Linie gehoert dem .card-more direkt darunter. */ .export-note { margin: 0.6rem 0 0; font-size: 0.75rem; color: var(--ink-soft); } /* Abdeckung je Lebensraum-/Artengruppe. Zeigt nicht, was man am haeufigsten gesehen hat, sondern wo die Liste noch Luecken hat. */ .habitat-list { display: flex; flex-direction: column; gap: 0.5rem; } .habitat-row { display: grid; grid-template-columns: minmax(110px, 1.4fr) minmax(60px, 2fr) 3.2rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .habitat-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .habitat-bar-track { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; display: block; } .habitat-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .habitat-count { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .habitat-count.complete { color: var(--accent); font-weight: 600; } /* Gruppennamen sind laenger als Artnamen ("Taucher, Rallen & Kormorane") und brauchen auf schmalen Displays mehr Platz als die Fortschrittsleiste. */ @media (max-width: 480px) { .habitat-row { grid-template-columns: minmax(0, 1.7fr) minmax(40px, 1fr) 3rem; } } /* Deine Orte: gleicher Bauplan wie die Lebensraum-Zeilen, damit die beiden Karten nicht wie zwei verschiedene Programme aussehen. */ .orte-liste { display: flex; flex-direction: column; gap: 0.5rem; } .ort-zeile { display: grid; grid-template-columns: minmax(110px, 1.4fr) minmax(60px, 2fr) 4.2rem; align-items: center; gap: 0.6rem; font-size: 0.85rem; } .ort-zeile-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ort-balken { height: 10px; background: var(--accent-soft); border-radius: 999px; overflow: hidden; display: block; } .ort-balken-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } .ort-zeile-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-soft); } .orte-offen { margin: 0.9rem 0 0; font-size: 0.82rem; color: var(--ink-soft); } /* ---- Leiste "Gemeinsame Jagd laeuft" (jagd.js) ---- Waehrend einer Jagd MUSS sichtbar sein, dass gemeldet wird. Eine Funktion, die im Hintergrund Artnamen verschickt, ohne dass man es sieht, waere genau das, was diese App sonst nirgends tut. Oben statt unten: Unten sitzen schon Tab-Bar (z-index 60) und Toasts (80), und die Toasts sind waehrend einer Jagd besonders haeufig. */ .jagd-leiste { position: fixed; top: 0; left: 0; right: 0; z-index: 70; display: block; text-align: center; text-decoration: none; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--accent); padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 0.8rem 0.42rem; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); } /* Wer noch nicht mitmacht, sieht nur, DASS die Runde unterwegs ist - und das leiser, weil es fuer ihn eine Einladung ist und keine laufende Meldung. */ .jagd-leiste-still { background: var(--surface); color: var(--ink); border-bottom: 1px solid var(--accent); } /* Die Leiste liegt ueber dem Seitenanfang - ohne diesen Ausgleich verschwindet die Kopfzeile darunter. Wird von jagd.js gesetzt, solange sie sichtbar ist. */ body.hat-jagdleiste { padding-top: 2.1rem; } /* ---- Leiste "Streifzug laeuft" (streifzug.js, 13.08.2026) ---- Dieselbe Form wie die beiden darueber, aber aus einem anderen Anlass. Jagd und Party legen offen, dass Artnamen das Geraet verlassen; der Streifzug bleibt lokal und meldet nur, DASS gerade gezaehlt wird. Genau das fehlte: Wer im Startdialog "Nur stöbern" gewaehlt hat und dann doch tippt, faengt einen an, ohne es gesagt zu haben - und sah davon bis dahin nur die leise Zeile weiter oben in dieser Datei, die beim Scrollen wegging. Sie liegt UNTER den beiden anderen (kleinerer z-index, und weiter unten, sobald eine von ihnen da ist): Ein Streifzug laeuft beim Zaehlen fast immer, und die Leiste, die eine Uebertragung meldet, darf davon nicht verdeckt werden. --leiste-oben und --leisten-hoehe setzt streifzug.js: wie hoch die Leisten DARUEBER bauen und wie viel Platz oben insgesamt freizuhalten ist. Beides gemessen und nicht geraten - auf einem schmalen Geraet bricht ein langer Partyname um, und aus einer Zeile werden zwei. Mit einem festen Wert lag die Streifzug-Leiste dann mitten in der Party-Leiste, ausgerechnet ueber der Meldung, dass Artnamen den Server erreichen. Die Ersatzwerte gelten nur, solange noch nichts gemessen wurde. */ .streifzug-leiste { position: fixed; top: var(--leiste-oben, 0px); left: 0; right: 0; z-index: 69; text-align: center; font-size: 0.82rem; font-weight: 600; line-height: 1.3; color: #fff; background: var(--accent); padding: calc(0.42rem + env(safe-area-inset-top, 0px)) 0.8rem 0.42rem; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18); } /* Der Stand nimmt die ganze Breite: Wer beenden will, soll nicht zielen muessen. Auf den Seiten ohne Ortsleiste ist dasselbe Element ein und dann nur zu lesen - die Regel gilt fuer beide, deshalb der Ausgleich fuer die Knopf-Vorgaben des Browsers. font: inherit steht vor der Groesse, sonst setzt es sie zurueck. */ .streifzug-leiste .szl-stand { display: block; width: 100%; appearance: none; border: 0; background: none; padding: 0; color: inherit; font: inherit; font-size: 0.82rem; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; } /* Die Rueckfrage nach dem Antippen. Sie steht in der Leiste statt in einem Fenster darueber: Ein Fenster reisst den Blick vom Raster weg, und die Antwort gehoert an die Stelle, an die gerade getippt wurde. */ .streifzug-leiste .szl-frage { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.25rem 0.45rem; } .streifzug-leiste .szl-ja, .streifzug-leiste .szl-nein { appearance: none; border: 1px solid currentColor; border-radius: 999px; background: none; padding: 0.08rem 0.6rem; color: inherit; font: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer; } /* "Ja, beenden" ist die Antwort, die etwas tut, und bekommt deshalb die Flaeche. Ueber --surface und --ink statt ueber feste Werte: Beide drehen im Dunkelmodus zusammen mit dem Akzent darunter. */ .streifzug-leiste .szl-ja { border-color: var(--surface); background: var(--surface); color: var(--ink); } /* Steht eine Leiste darueber, traegt die schon die Sicherheitszone am oberen Bildschirmrand - hier faellt sie deshalb weg. */ body.hat-jagdleiste .streifzug-leiste, body.hat-partyleiste .streifzug-leiste { padding-top: 0.42rem; } /* Die zweite und dritte Zeile sind keine Wiederholung: body.hat-partyleiste steht in party-design.css und wird NACH dieser Datei geladen, bei gleicher Spezifitaet gewinnt es also. Ohne die eine Klasse mehr hielte die Seite bei Party und Streifzug zugleich nur 2,1 rem frei - fuer zwei Leisten. */ body.hat-streifzugleiste, body.hat-streifzugleiste.hat-jagdleiste, body.hat-streifzugleiste.hat-partyleiste { padding-top: var(--leisten-hoehe, calc(2.1rem + env(safe-area-inset-top, 0px))); } /* Die Werkzeugleiste ueber dem Raster klebt an top: 0 und verschwaende sonst unter jeder festen Leiste, sobald man scrollt - der Ausgleich am body haelt nur den Anfang der Seite frei. Aufgefallen ist das erst mit der Streifzug-Leiste: Die steht fast immer, die anderen beiden selten. */ body.hat-jagdleiste .toolbar-sticky, body.hat-partyleiste .toolbar-sticky { top: calc(2.1rem + env(safe-area-inset-top, 0px)); } body.hat-streifzugleiste .toolbar-sticky { top: var(--leisten-hoehe, calc(2.1rem + env(safe-area-inset-top, 0px))); } /* ---- Deine Runde ---- Dieselbe Zeilenform wie die Ortsliste darueber (Name, Balken, Zahl), nur mit einer zweiten Zahlenspalte: Jahr entscheidet die Reihenfolge, der Monat steht leise daneben. Die Balken teilen sich die Regeln mit .ort-balken. */ .runde-liste { display: flex; flex-direction: column; gap: 0.55rem; margin-bottom: 0.9rem; } .runde-zeile { display: grid; grid-template-columns: minmax(72px, 1.3fr) minmax(40px, 1.5fr) 2.4rem 2.6rem; align-items: center; gap: 0.5rem; font-size: 0.85rem; } /* Fuenfte Spalte fuer den Entfernen-Knopf (11.08.2026). Sie gilt fuer die ganze Liste, Kopfzeile eingeschlossen, sonst laufen die Zahlenspalten auseinander. Ohne die Klasse bleibt es beim vierspaltigen Raster. */ .runde-liste-raus .runde-zeile { grid-template-columns: minmax(72px, 1.3fr) minmax(40px, 1.5fr) 2.4rem 2.6rem 1.75rem; } .runde-zeile-raus { /* Leise: Es ist die schaerfste Handlung in der Karte, aber keine, die angeboten werden will. Erst beim Zeigen bekommt sie Farbe. */ border: 0; background: none; padding: 0.2rem; font-size: 0.9rem; line-height: 1; color: var(--ink-soft); cursor: pointer; border-radius: 0.4rem; } .runde-zeile-raus:hover, .runde-zeile-raus:focus-visible { /* Dasselbe Rot wie .konto-button-gefahr - eine Farbvariable dafuer gibt es im Projekt nicht, und eine zweite Nuance waere schlechter als eine Wiederholung. */ color: #a8322b; background: rgba(168, 50, 43, 0.1); } .runde-kopf { font-size: 0.72rem; color: var(--ink-soft); /* Die Kopfzeile beschriftet nur die beiden Zahlenspalten - ueber Name und Balken stuende sonst eine Ueberschrift ohne Inhalt. */ margin-bottom: -0.15rem; } .runde-zeile-name { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .runde-ich .runde-zeile-name { font-weight: 600; color: var(--accent); } .runde-zeile-wert { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink); } .runde-zeile-leise { color: var(--ink-soft); } /* ---- Gemeinsame Jagd, im Kasten innerhalb der Runde-Karte ---- Abgesetzt, weil sie etwas anderes ist als die Rundenliste darunter: Die zeigt das Jahr, die Jagd den laufenden Spaziergang. */ .jagd-block { border: 1px solid var(--accent); border-radius: 12px; background: var(--accent-soft); padding: 0.8rem 0.9rem; margin-bottom: 1.1rem; } .jagd-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.3rem; } .jagd-kopf h3 { margin: 0; font-size: 0.98rem; } .jagd-stand { font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } .jagd-hinweis { margin: 0 0 0.8rem; font-size: 0.85rem; line-height: 1.45; color: var(--ink-soft); } .jagd-funde-kopf { margin: 0.9rem 0 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--ink-soft); } /* Die Fundliste ist ein Protokoll, kein Raster: neueste zuerst, eine Zeile je Fund, damit man beim Draufschauen sieht, was gerade passiert. */ .jagd-funde { display: flex; flex-direction: column; gap: 0.15rem; } .jagd-fund { margin: 0; font-size: 0.83rem; color: var(--ink-soft); } .jagd-fund-ich { color: var(--ink); font-weight: 600; } .jagd-block .konto-aktionen { margin-top: 0.9rem; } .runde-form { margin-top: 0.9rem; } .runde-einladung { margin: 0 0 0.6rem; font-size: 0.85rem; color: var(--ink-soft); } .runde-code-zeile { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--ink-soft); } /* Der Code wird abgetippt und vorgelesen - deshalb Festbreitenschrift, in der sich die Zeichen nicht aneinander anschmiegen. */ .runde-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 1rem; letter-spacing: 0.08em; color: var(--ink); } /* Die Zeilen sind Buttons (sie waehlen den Ort auf der Karte aus), sollen aber aussehen wie die Lebensraum-Zeilen daneben. */ button.ort-zeile { background: none; border: 0; padding: 0; font: inherit; text-align: left; cursor: pointer; width: 100%; } button.ort-zeile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } .ort-zeile.auswahl .ort-zeile-name { color: var(--accent); font-weight: 600; } @media (max-width: 480px) { .ort-zeile { grid-template-columns: minmax(0, 1.7fr) minmax(40px, 1fr) 3.8rem; } } /* Die Regionskarte: selbst gezeichnet (orte-karte.js), keine fremden Kacheln. Eigene Farbvariablen statt var(--accent), weil die Karte datensatz- uebergreifend ist und beim Umschalten oben nicht die Farbe wechseln soll. */ .orte-karte-wrap { --okarte-land: #edf2e8; --okarte-wasser: #c5dbe7; --okarte-uferlinie: #9dbccd; --okarte-label: #5f7b8d; --okarte-punkt: #2f6b4f; --okarte-punkt-offen: #7d8b83; margin: 0.2rem 0 0; } /* Nachts eine Stufe heller als die Kartenflaeche ringsum: Mit den alten Werten (Land #202a22 auf Wasser #1c2f3a) war die Karte braun-schwarz auf blau-schwarz und die offenen Punkte gingen darin unter. Land bleibt gruen, Wasser bleibt blau - nur eben lesbar. */ html[data-thema="dunkel"] .orte-karte-wrap { --okarte-land: #2c3a2f; --okarte-wasser: #24404f; --okarte-uferlinie: #4d7389; --okarte-label: #9db8c9; --okarte-punkt: #82d8ab; --okarte-punkt-offen: #8fa196; } .orte-karte-wrap svg { display: block; width: 100%; height: auto; border: 1px solid var(--border); border-radius: 12px; background: var(--okarte-wasser); } .okarte-land { fill: var(--okarte-land); } .okarte-wasser path { fill: var(--okarte-wasser); stroke: var(--okarte-uferlinie); stroke-width: 2; stroke-linejoin: round; } .okarte-ufer { stroke: var(--okarte-uferlinie); stroke-width: 2; } .okarte-labels text { fill: var(--okarte-label); font-style: italic; letter-spacing: 0.08em; opacity: 0.75; pointer-events: none; user-select: none; } /* Landschaftsnamen: aufrecht statt kursiv (kursiv gehoert den Gewaessern), gesperrt und noch leiser - Orientierung, keine Konkurrenz zu den Punkten. */ .okarte-landnamen text { fill: var(--okarte-label); letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; pointer-events: none; user-select: none; } .okarte-ort { cursor: pointer; } .okarte-ort:focus { outline: none; } .okarte-punkt { fill: var(--surface); stroke: var(--okarte-punkt-offen); stroke-width: 3; } .okarte-ort.besucht .okarte-punkt { fill: var(--okarte-punkt); stroke: var(--surface); } .okarte-ring { fill: none; stroke: var(--okarte-punkt); stroke-width: 3; opacity: 0; } /* Leise Punkte: nur Geruest, damit die Geographie lesbar bleibt. */ .okarte-ort.leise .okarte-punkt { fill: var(--okarte-punkt-offen); stroke: none; opacity: 0.35; } /* Gestrichelter Ring: andere melden die Art hier (Artenkarte). */ .okarte-ort.gemeldet .okarte-ring { opacity: 0.9; stroke-dasharray: 6 5; } .okarte-ort.auswahl .okarte-ring { opacity: 1; stroke-dasharray: none; } .okarte-ort:focus-visible .okarte-ring { opacity: 0.6; } .okarte-legende { margin: 0.45rem 0 0; font-size: 0.78rem; color: var(--ink-soft); } .okarte-legende .legende-besucht { color: var(--okarte-punkt, var(--accent)); } /* Das Ort-Detail unter der Karte: erst der eine Alltagssatz zum Ort, dann die eigene Bilanz, dann - wenn genug Konten dort waren - was andere fanden. */ .ort-detail { margin: 0.8rem 0 0.9rem; padding: 0.75rem 0.9rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); } .ort-detail h3 { margin: 0 0 0.25rem; font-size: 0.95rem; } .ort-detail-info, .ort-detail-bilanz { margin: 0.25rem 0; font-size: 0.84rem; color: var(--ink-soft); } .ort-detail-bilanz { color: var(--ink); } /* Anreise als stille Zeile: oeffnet die Karten-App, am Desktop passiert je nach System nichts - ein grosser Knopf wuerde dort ein leeres Versprechen. */ .ort-anreise { display: inline-block; margin-top: 0.35rem; font-size: 0.84rem; color: var(--accent); text-decoration: none; } .ort-anreise:hover { text-decoration: underline; } .ort-topliste { margin: 0.55rem 0 0; padding-top: 0.55rem; border-top: 1px dashed var(--border); } .ort-topliste-titel { margin: 0 0 0.35rem; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); } /* Die Einladung zum Konto, unter der Liste und unter dem "hier war noch zu wenig los"-Satz. Leise gehalten: kleiner als der Fliesstext, in der weichen Tinte, nur der Link traegt Farbe. Sie soll die Auskunft daneben ergaenzen, nicht sie uebertoenen - ein Knopf an dieser Stelle waere Werbung. */ .ort-konto-hinweis { margin: 0.5rem 0 0; font-size: 0.8rem; line-height: 1.5; color: var(--ink-soft); } .ort-konto-hinweis a { color: var(--accent); } /* "Hier fehlt Wissen": welche Jahreszeiten du an diesem Ort kennst. Rechnet rein lokal und steht deshalb auch ohne Konto da. */ .ort-luecke { margin: 0.5rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); } /* Der Steckbrief-Teil des Ort-Details: die Landschaft als stille Zeile unter dem Namen, was hier zu finden ist (eine Zeile je Datensatz) und der Ruecksicht-Satz zu selten gewordenen Arten. */ .ort-detail-landschaft { margin: -0.35rem 0 0.35rem; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); } .ort-funde { margin: 0.5rem 0 0; } .ort-funde-titel { margin: 0 0 0.15rem; font-size: 0.8rem; font-weight: 700; } .ort-funde-zeile { margin: 0 0 0.15rem; font-size: 0.84rem; line-height: 1.5; color: var(--ink-soft); } .ort-schutz { margin: 0.5rem 0 0; font-size: 0.84rem; line-height: 1.5; color: var(--accent); } /* Ortsdex: wie viel von dem, was hier gemeldet wird, du schon hast. Sitzt ueber der Artenliste, weil es ihre Ueberschrift in Zahlen ist. */ .ort-dex { margin: 0 0 0.6rem; } .ort-dex-satz { margin: 0 0 0.35rem; font-size: 0.84rem; color: var(--ink); } .ort-top-zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 0.6rem; font-size: 0.85rem; padding: 0.12rem 0; } .ort-top-art { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ort-top-neu { font-size: 0.7rem; color: var(--accent); background: var(--accent-soft); border-radius: 999px; padding: 0.05rem 0.45rem; white-space: nowrap; } .ort-top-wert { color: var(--ink-soft); font-variant-numeric: tabular-nums; white-space: nowrap; } /* Die Artenkarte im Detail-Sheet ("Wo findet man sie?"). Zugeklappt, bis jemand fragt - das Sheet ist auf dem Handy schon gut gefuellt. */ .art-wo { margin: 0.7rem 0 0.2rem; } .art-wo summary { cursor: pointer; font-size: 0.88rem; font-weight: 600; color: var(--accent); } .art-wo .orte-karte-wrap { margin-top: 0.55rem; } .art-wo-legende { margin: 0.4rem 0 0; font-size: 0.74rem; color: var(--ink-soft); } .art-wo-status { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ink); min-height: 1.2em; } /* Steht nur da, wenn die Ring-Ebene mangels Konto fehlt (11.08.2026). Leiser als der Status darunter, weil es kein Ergebnis ist, sondern ein Angebot. */ .art-wo-konto { margin: 0.35rem 0 0; font-size: 0.82rem; color: var(--ink-soft); } /* Auszeichnungen. Drei Zustaende, die sich ohne Farbenlesen unterscheiden muessen: erreicht hat einen farbigen Rahmen und Grund, in Arbeit einen Balken, offen eine gestrichelte Kante. */ .badge-score { font-size: 0.78rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .badge-block + .badge-block { margin-top: 1rem; } .badge-subhead { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 0.5rem; } .badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 0.5rem; } /* "und 34 weitere" unter den zuletzt erreichten. Traegt Farbe und Groesse des Aufklappers am Kartenende, weil es dasselbe tut wie er - ein Knopf, der nach Knopf aussieht, verspraeche eine eigene Ansicht. */ .badge-mehr { margin-top: 0.6rem; padding: 0; border: 0; background: none; font: inherit; font-size: 0.85rem; font-weight: 600; color: var(--accent); cursor: pointer; } .badge-tile { display: flex; align-items: flex-start; gap: 0.55rem; padding: 0.6rem 0.7rem; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); } .badge-tile.done { border-color: var(--accent); background: var(--accent-soft); } .badge-tile.open { border-style: dashed; /* Offene Ziele bleiben sichtbar, nur zurueckgenommen: ein sichtbares Ziel motiviert mehr als eine verdeckte Ueberraschung. */ opacity: 0.75; } .badge-icon { font-size: 1.15rem; line-height: 1.2; flex-shrink: 0; } .badge-body { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .badge-title { font-size: 0.85rem; font-weight: 600; color: var(--ink); } .badge-meta { font-size: 0.74rem; line-height: 1.35; color: var(--ink-soft); } .badge-count { font-size: 0.74rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; margin-top: 0.15rem; } .badge-bar-track { display: block; height: 4px; margin-top: 0.25rem; background: var(--accent-soft); border-radius: 999px; overflow: hidden; } .badge-bar-fill { display: block; height: 100%; background: var(--accent); border-radius: 999px; } /* Auf schmalen Displays eine Spalte: zwei Kacheln nebeneinander schneiden die Zielbeschreibung ab, und die ist der Teil, der zum Suchen anregt. */ @media (max-width: 520px) { .badge-grid { grid-template-columns: 1fr; } } /* ---- Toasts (Auszeichnungen, Rueckgaengig nach Reset) ---- Als Overlay am unteren Rand statt als Banner im Seitenfluss: ein Banner schiebt beim Erscheinen das Karten-Raster nach unten - genau unter dem Finger, der gerade tippt. */ .toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 80; display: flex; flex-direction: column; gap: 0.5rem; width: min(94vw, 26rem); pointer-events: none; } @media (max-width: 699.98px) { /* Ueber der Tab-Leiste bleiben. */ body.has-tabbar .toast-stack { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } } .toast { pointer-events: auto; display: flex; align-items: center; gap: 0.55rem; padding: 0.6rem 0.6rem 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--accent); background: var(--surface); color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); animation: toast-in 0.25s ease; } @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .toast { animation: none; } } .toast-icon { font-size: 1.25rem; line-height: 1; flex-shrink: 0; } .toast-body { display: flex; flex-direction: column; gap: 0.1rem; font-size: 0.78rem; color: var(--ink-soft); min-width: 0; flex: 1; } .toast-body strong { font-size: 0.85rem; color: var(--ink); } .toast-action { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent); border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; white-space: nowrap; } .toast-close { font: inherit; font-size: 0.85rem; line-height: 1; border: none; background: none; color: var(--ink-soft); cursor: pointer; padding: 0.35rem; flex-shrink: 0; } /* ---- Hinweis auf eine neue Fassung (pwa.js) ---- Sitzt dort, wo auch die Toasts sitzen, aber eine Ebene darunter (z-index 79 gegen 80): Eine Meldung ueber die gerade gezaehlte Art ist im Moment wichtiger, und sie geht von selbst wieder weg - dieser Hinweis bleibt, bis ihn jemand antippt. Der Rahmen ist deshalb --border und nicht --accent wie beim Toast: Der Hinweis soll dastehen, nicht rufen (10.08.2026). */ .neue-fassung { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); z-index: 79; display: flex; align-items: center; gap: 0.55rem; width: min(94vw, 26rem); padding: 0.6rem 0.6rem 0.6rem 0.8rem; border-radius: 12px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); } @media (max-width: 699.98px) { /* Ueber der Tab-Leiste bleiben, wie der Toast-Stapel. */ body.has-tabbar .neue-fassung { bottom: calc(4.4rem + env(safe-area-inset-bottom, 0px)); } } .neue-fassung-text { font-size: 0.78rem; color: var(--ink-soft); min-width: 0; flex: 1; } .neue-fassung-knopf { font: inherit; font-size: 0.8rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--border); border-radius: 999px; padding: 0.35rem 0.75rem; cursor: pointer; white-space: nowrap; } .neue-fassung-zu { font: inherit; font-size: 0.85rem; line-height: 1; border: none; background: none; color: var(--ink-soft); cursor: pointer; padding: 0.35rem; flex-shrink: 0; } /* ---- Detailansicht einer Art (species-detail.js) ---- Mobil ein Bottom-Sheet, ab 700 px ein zentrierter Dialog. */ .species-sheet { border: none; padding: 0; background: var(--surface); color: var(--ink); width: 100%; max-width: none; margin: auto 0 0; max-height: 88dvh; border-radius: 18px 18px 0 0; overflow-y: auto; overscroll-behavior: contain; } .species-sheet::backdrop { background: rgba(10, 16, 12, 0.5); } @media (min-width: 700px) { .species-sheet { margin: auto; width: min(92vw, 430px); max-height: 86vh; border-radius: 16px; } } @media (prefers-reduced-motion: no-preference) { .species-sheet[open] { animation: sheet-up 0.22s ease; } } @keyframes sheet-up { from { opacity: 0.4; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } } .sheet-media { position: relative; aspect-ratio: 4 / 3; background: var(--accent-soft); overflow: hidden; } /* Und hier stand derselbe Fehler noch einmal - siehe den Merksatz weiter oben bei .bird-click-area. Das Sheet gab allen drei Kategorien 4:3, aber Vogelfotos liegen quadratisch vor (bild-zuschnitt.ps1 schneidet sie so zu). object-fit: cover hat davon zuverlaessig das untere Viertel weggeschnitten, und weil .bird-photo oben ausgerichtet ist, immer von den Beinen her: Beim Wanderfalken fehlten Staender und Sitzast, beim Saebelschnaebler die halben Beine. Aufgefallen am 11.08.2026 beim Durchsehen der neuen Fotos. Pflanzen und Saeuger bleiben bei 4:3 - ihre Dateien haben genau dieses Format, dort passt der Kasten schon. */ .species-sheet[data-kind="bird"] .sheet-media { aspect-ratio: 1 / 1; } .sheet-media img, .sheet-media svg { width: 100%; height: 100%; object-fit: cover; display: block; } .sheet-media svg { padding: 1.5rem; box-sizing: border-box; } .sheet-close { position: absolute; top: 0.6rem; right: 0.6rem; width: 2.3rem; height: 2.3rem; border: none; border-radius: 50%; background: rgba(12, 20, 15, 0.55); color: #fff; font-size: 1rem; cursor: pointer; } .sheet-body { padding: 0.9rem 1.1rem 1.2rem; } /* Kopfzeile des Sheets: Name und Latein links, Merk-Knopf rechts. Der Knopf traegt hier die ausgeschriebene Beschriftung statt nur den Stern - im Sheet ist Platz, und wer die Funktion zum ersten Mal sieht, soll nicht raten. */ .sheet-kopf { display: flex; align-items: flex-start; gap: 0.6rem; } .sheet-kopf-text { flex: 1; min-width: 0; } .sheet-merk { flex: none; font: inherit; font-size: 0.8rem; padding: 0.35rem 0.7rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink-soft); cursor: pointer; white-space: nowrap; } .sheet-merk.an { border-color: #c08a20; color: #8a6212; background: #fbf3e0; } html[data-thema="dunkel"] .sheet-merk.an { border-color: #c08a20; color: #e8b955; background: #33291b; } .sheet-name { margin: 0; font-size: 1.25rem; } .sheet-latin { margin: 0.1rem 0 0.6rem; font-style: italic; color: var(--ink-soft); font-size: 0.88rem; } .sheet-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.6rem; } .sheet-chip { font-size: 0.74rem; color: var(--ink-soft); background: var(--accent-soft); border-radius: 999px; padding: 0.2rem 0.6rem; } .sheet-chip-season { color: var(--accent); background: none; border: 1px solid var(--accent); } .sheet-chip-off { background: none; border: 1px dashed var(--border); } .sheet-desc { margin: 0 0 0.9rem; font-size: 0.88rem; line-height: 1.5; color: var(--ink); } .sheet-count-row { display: flex; align-items: center; justify-content: center; gap: 1.1rem; padding: 0.5rem 0; } .sheet-count-row button { font: inherit; font-size: 1.05rem; font-weight: 600; width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid var(--accent); background: var(--surface); color: var(--accent); cursor: pointer; } .sheet-count-row .sheet-plus { background: var(--accent); color: #fff; } .sheet-count-row button:disabled { opacity: 0.4; cursor: default; } .sheet-count { display: flex; flex-direction: column; align-items: center; /* Breiter als frueher: Die Beschriftung sagt jetzt, WELCHE Zahl das ist ("in diesem Streifzug"), und ohne den Namen waere die Zahl wieder zweideutig - genau der Fehler, den die Streifzuege beheben. */ min-width: 7rem; text-align: center; } .sheet-count-value { font-size: 1.6rem; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .sheet-count-label { font-size: 0.72rem; color: var(--ink-soft); line-height: 1.25; } /* Der Sammelstand: die zweite der beiden Zahlen. Bewusst klein und ruhig - draussen zaehlt die Strichliste darueber, das hier ist der Rueckblick. */ .sheet-gesamt { margin: 0.5rem 0 0; text-align: center; font-size: 0.76rem; color: var(--ink-soft); } .sheet-foot { display: flex; flex-direction: column; align-items: center; gap: 0.5rem; margin-top: 0.6rem; } .sheet-foot .sheet-reset { color: var(--ink-soft); font-size: 0.78rem; } /* Seit 11.08.2026 ein

mit zwei Links darin statt eines einzigen - die Namensnennung zeigt jetzt auch auf den Lizenztext. Das `margin: 0` holt den Abstand zurueck, den der Absatz von sich aus mitbraechte (die Fusszeile setzt ihn ueber `gap`), und die Links erben die gedaempfte Farbe: Der Nachweis soll lesbar sein, aber nicht um Aufmerksamkeit bitten. */ .sheet-credit { margin: 0; text-align: center; font-size: 0.72rem; color: var(--ink-soft); } .sheet-credit a { color: inherit; } /* ---------- Ergebnisfenster am Ende eines Streifzugs ---------- */ /* Der Moment, in dem ein Spiel belohnt: Was war das gerade fuer ein Streifzug. Bewusst ein kleiner zentrierter Dialog statt eines Bottom-Sheets - er beendet etwas, statt etwas zu oeffnen. */ .streifzug-ende { position: relative; border: none; padding: 1.3rem 1.1rem 1.1rem; background: var(--surface); color: var(--ink); width: min(92vw, 380px); border-radius: 18px; text-align: center; } .streifzug-ende::backdrop { background: rgba(10, 16, 12, 0.5); } @media (prefers-reduced-motion: no-preference) { .streifzug-ende[open] { animation: sheet-up 0.22s ease; } } .sz-close { position: absolute; top: 0.4rem; right: 0.5rem; border: 0; background: none; color: var(--ink-soft); font-size: 1rem; cursor: pointer; padding: 0.3rem; line-height: 1; } .sz-titel { margin: 0 0 0.15rem; font-size: 1.15rem; } /* Warum er zu Ende ist. Steht ueber Ort und Dauer und nicht kleingedruckt darunter: Bei einem Streifzug, der von selbst abgelaufen ist, ist das die Antwort auf die erste Frage, die jemand hat. */ .sz-grund { margin: 0 0 0.35rem; font-size: 0.85rem; color: var(--ink); } .sz-ort { margin: 0 0 1rem; font-size: 0.8rem; color: var(--ink-soft); } .sz-zahlen { display: flex; justify-content: center; gap: 1.5rem; margin-bottom: 0.9rem; } .sz-zahl { display: flex; flex-direction: column; } .sz-zahl strong { font-size: 1.5rem; font-variant-numeric: tabular-nums; line-height: 1.1; } .sz-zahl span { font-size: 0.72rem; color: var(--ink-soft); } /* Neue Arten sind die eigentliche Belohnung - Vielfalt, nicht Stueckzahl. */ .sz-neu { margin: 0 0 0.9rem; padding: 0.5rem 0.7rem; border-radius: 10px; background: var(--accent-soft); font-size: 0.82rem; } /* Rote-Liste-Zeile im Ergebnisfenster: gleiche Bauart wie sz-neu, nur mit Rahmen statt Flaeche, damit beide Zeilen nebeneinander lesbar bleiben. */ .sz-rote { margin: 0 0 0.9rem; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--accent); font-size: 0.82rem; } .sz-frage { border-top: 1px solid var(--border); padding-top: 0.85rem; } .sz-frage-text { margin: 0 0 0.6rem; font-size: 0.9rem; font-weight: 600; } .sz-frage-knoepfe { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .sz-frage-knoepfe button { font: inherit; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } .sz-frage-knoepfe .sz-ja { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .sz-frage-warum { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--ink-soft); } .sz-danke { margin: 0.6rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border); font-size: 0.85rem; color: var(--ink-soft); } /* Teilen ist eine stille Pille unter Frage/Danke: Der Akzent-Knopf gehoert der Vollstaendigkeits-Frage, an ihr haengt der wissenschaftliche Wert. */ .sz-teilen-zeile { margin-top: 0.7rem; } .sz-teilen { font: inherit; font-size: 0.85rem; padding: 0.45rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } /* Das Warum gehoert hinter eine Klappe, nicht in die Frage: In der Oberflaeche steht ein Alltagssatz, die Begruendung holt sich, wer sie wissen will. Bleibt nach der Antwort absichtlich stehen - die Neugier kommt oft erst danach. */ .sz-warum { margin-top: 0.7rem; text-align: left; font-size: 0.78rem; color: var(--ink-soft); } .sz-warum summary { cursor: pointer; text-align: center; color: var(--accent); } .sz-warum p { margin: 0.5rem 0 0; line-height: 1.45; } /* "War das zum Ausprobieren?" - steht dort, wo sonst die Frage nach der Vollstaendigkeit steht, und traegt deshalb dieselbe Form. Nur der Rahmen hebt sie heraus: Sie ist die einzige Frage im Fenster, solange sie offen ist, und sie entscheidet ueber die Zahlen darueber. */ .sz-probe { margin: 0.2rem 0 0.6rem; padding: 0.8rem 0.7rem 0.6rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); } .sz-probe-text { margin: 0 0 0.6rem; font-weight: 600; font-size: 0.95rem; } .sz-probe-knoepfe { display: flex; flex-direction: column; gap: 0.4rem; } .sz-probe-knoepfe button { font: inherit; font-size: 0.85rem; padding: 0.55rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--ink); cursor: pointer; } /* "Nein, das war draußen" ist gefuellt, nicht "Ja". Im Zweifel sollen die Zahlen stehen bleiben: Ein Streifzug, der faelschlich verworfen wird, ist weg, einer der faelschlich bleibt, laesst sich noch korrigieren. */ .sz-probe-knoepfe .sz-probe-nein { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .sz-probe-warum { margin: 0.55rem 0 0; font-size: 0.76rem; line-height: 1.4; color: var(--ink-soft); } /* "Wo warst du unterwegs?" - die Nachfrage nach dem fehlenden Ort. Gleiche Form wie die Probe-Frage, damit das Fenster nicht drei verschieden gebaute Kaesten zeigt. Der Unterschied liegt im Knopf: Hier ist nur einer gefuellt, und zwar keiner - die Auswahl IST die Antwort, "Ohne Ort lassen" ist der Ausweg und soll nicht wie das Ziel aussehen. */ .sz-ortfrage { margin: 0.2rem 0 0.6rem; padding: 0.8rem 0.7rem 0.6rem; border: 1px solid var(--border); border-radius: 12px; background: var(--bg); } .sz-ortfrage-text { margin: 0 0 0.35rem; font-weight: 600; font-size: 0.95rem; } .sz-ortfrage-grund { margin: 0 0 0.6rem; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); } /* Die Auswahl selbst traegt zusaetzlich .szs-wahl und erbt von dort Form und Abstaende des Startdialogs - es ist dieselbe Frage, nur spaeter gestellt. */ .sz-ortfrage-ohne { margin-top: 0.5rem; width: 100%; font: inherit; font-size: 0.85rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: transparent; color: var(--ink-soft); cursor: pointer; } .sz-ortfrage-warum { margin: 0.55rem 0 0; font-size: 0.76rem; line-height: 1.4; color: var(--ink-soft); } .sz-ort-danke { margin: 0.2rem 0 0.7rem; font-size: 0.85rem; color: var(--ink-soft); } /* Der Tempo-Waechter mitten im Zaehlen. Erbt die Form des Ergebnisfensters (.streifzug-ende), damit er nicht wie eine Fehlermeldung aus einer anderen App aussieht - er unterbricht dasselbe Spiel, das das Ergebnisfenster beendet. Kein Schliessen-Kreuz: Dieses eine Fenster braucht eine Antwort, die Begruendung steht in streifzug.js. */ .tempo-fenster { padding-top: 1.5rem; } .tempo-zahl { margin: 0.5rem 0 0.7rem; padding: 0.5rem 0.7rem; border-radius: 10px; border: 1px solid var(--accent); font-size: 0.9rem; font-weight: 600; font-variant-numeric: tabular-nums; } .tempo-text { margin: 0 0 1rem; font-size: 0.85rem; line-height: 1.45; text-align: left; } .tempo-knoepfe { display: flex; flex-direction: column; gap: 0.4rem; } .tempo-knoepfe button { font: inherit; font-size: 0.9rem; padding: 0.6rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } /* Gefuellt ist "Ich zaehle wirklich", nicht das Verwerfen - dieselbe Regel wie bei der Probe-Frage: Im Zweifel bleiben die Zahlen stehen. Ein Streifzug, der faelschlich verworfen wird, ist weg; einer, der faelschlich bleibt, laesst sich noch korrigieren. */ .tempo-knoepfe .tempo-weiter { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; } .tempo-warum { margin: 0.7rem 0 0; font-size: 0.74rem; line-height: 1.4; color: var(--ink-soft); text-align: left; } /* "Diesen Streifzug verwerfen" - der Weg zurueck, wenn die Zaehlung nichts taugt. Ganz unten und als leiser Link, nicht als Knopf: Er soll zu finden sein, aber nie mit dem Teilen-Knopf oder den Antwortknoepfen darueber konkurrieren. Erst die Rueckfrage darunter traegt richtige Knoepfe. */ .sz-verwerfen-zeile { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--border); } .sz-verwerfen { font-size: 0.78rem; color: var(--ink-soft); text-decoration-color: var(--border); } .sz-verwerfen:hover { color: #a8322b; text-decoration-color: currentColor; } .sz-sicher { margin-top: 1rem; padding-top: 0.7rem; border-top: 1px solid var(--border); } .sz-sicher-text { margin: 0 0 0.7rem; font-size: 0.8rem; line-height: 1.45; color: var(--ink); } .sz-sicher-knoepfe { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .sz-sicher-knoepfe button { font: inherit; font-size: 0.82rem; padding: 0.5rem 0.9rem; border-radius: 999px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } /* Der sichere Ausweg steht links und ist der ruhige von beiden. Gefuellt wird hier nichts: Ein leuchtender Knopf, der loescht, lockt genau die Finger an, die er aufhalten soll. */ .sz-sicher-knoepfe .sz-sicher-ja { border-color: #a8322b; color: #a8322b; font-weight: 600; } /* ---------- Startdialog beim Betreten einer Zaehlseite ---------- */ /* Gegenstueck zum Ergebnisfenster: Der Streifzug bekommt einen Anfang, der sichtbar ist. Die Knoepfe stehen untereinander statt nebeneinander - "Los geht's" ist die Handlung, "Nur stöbern" der leise Ausweg, und nebeneinander saehen beide gleich wichtig aus. */ .streifzug-start { border: none; padding: 1.3rem 1.1rem 1.1rem; background: var(--surface); color: var(--ink); width: min(92vw, 360px); border-radius: 18px; text-align: center; } .streifzug-start::backdrop { background: rgba(10, 16, 12, 0.5); } @media (prefers-reduced-motion: no-preference) { .streifzug-start[open] { animation: sheet-up 0.22s ease; } } .szs-titel { margin: 0 0 0.2rem; font-size: 1.15rem; } .szs-text { margin: 0 0 0.9rem; font-size: 0.85rem; color: var(--ink-soft); } .szs-wahl { display: flex; flex-direction: column; gap: 0.5rem; } .szs-wahl select, .szs-wahl button { font: inherit; font-size: 0.9rem; padding: 0.55rem 0.8rem; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--ink); cursor: pointer; } .szs-hinweis { margin: 0.6rem 0 0; font-size: 0.72rem; color: var(--ink-soft); } .szs-knoepfe { display: flex; flex-direction: column; gap: 0.4rem; margin-top: 1rem; } .szs-los { font: inherit; font-size: 0.95rem; font-weight: 600; padding: 0.6rem 1rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: #fff; cursor: pointer; } .szs-spaeter { font: inherit; font-size: 0.85rem; padding: 0.4rem; border: 0; background: none; color: var(--ink-soft); text-decoration: underline; cursor: pointer; } /* ---------- Frage nach der Nutzungsmessung ---------- */ /* Erbt den Rahmen von .streifzug-start, unterscheidet sich aber in EINEM Punkt bewusst: Hier gibt es keinen leisen Ausweg im Stil von .szs-spaeter. Ablehnen muss so leicht sein wie Zustimmen (Art. 7 Abs. 3 DSGVO), also haben beide Knoepfe dieselbe Groesse, dieselbe Form und dieselbe Stelle - der eine gefuellt, der andere umrandet, keiner ausgegraut, keiner ein Textlink. Wer das spaeter "aufhuebscht", baut ein dark pattern. */ .messung-liste { margin: 0 0 0.9rem; padding-left: 1.1rem; text-align: left; font-size: 0.82rem; line-height: 1.45; color: var(--ink-soft); } .messung-liste li + li { margin-top: 0.3rem; } .messung-frage .messung-nein { background: var(--surface); color: var(--ink); border-color: var(--border); } /* ---------- Unterstuetzen-Karte ---------- */ /* Die Fussnote unter dem Knopf. Sie braucht eine eigene Regel, weil .card-hint ein margin-top von -0.4rem traegt: Das ist dafuer gedacht, den Satz an die Ueberschrift HERANZUZIEHEN, und zieht ihn hier in den Knopf hinein (nachgemessen: 6 px Ueberlappung). Bewusst nur auf diese Karte begrenzt statt .card-hint global zu aendern - die negative Kante ist an ihrem eigentlichen Platz richtig. Wer kuenftig einen Absatz UNTER eine .konto-aktionen-Zeile setzt, laeuft in dieselbe Falle. */ #karte-unterstuetzen .konto-aktionen + .card-hint { margin-top: 0.9rem; } /* ---------- Spendenaufruf als Fenster ---------- */ /* Rahmen wie die uebrigen Dialoge (.streifzug-start). Der Hauptknopf ist hier ein und kein