/* ========================================================================= CSC Portal – App-Design (mobile-first, Hell/Dunkel/System, Club-Branding) Club-Farben kommen als --primaer / --sekundaer über das base-Template. ========================================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } :root { --primaer: #22764e; --sekundaer: #174f34; --akzent: #f59e0b; /* Sativa/Funkeln */ --indica: #38bdf8; /* Indica/Mond */ /* Schrift & Radius (überschreibbar über Plattform-/Club-Theme) */ --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --r-kopf: 0px; /* untere Ecken von Kopf/Hero */ --r-karte: 0px; /* Karten, Kacheln, Produktkarten */ --r-knopf: 0px; /* Buttons */ --r-eingabe: 0px; /* Eingabefelder, Meldungen */ --r-pille: 4px; /* Chips, Badges, Status */ --r-blase: 6px; /* Chat-Blasen */ --r-foto: 10px; /* Fotos, Logos, Avatare */ --r-sheet: 0px; /* Bottom-Sheets */ /* Dunkles Theme (Standard, wie die App-Vorlage) */ --bg: #0c0f0e; --karte: #171b19; --karte2: #1f2422; --linie: #2a302d; --text: #f2f4f3; --text2: #aab3ae; --text3: #79837d; --kopf-text: #ffffff; --daten: var(--primaer); --daten-spur: #1e3a2d; --warnung: #fbbf24; --warnung-bg: #3a2f10; --gefahr: #f87171; --gefahr-bg: #3a1414; --ok-bg: #10331f; --info-bg: #122a33; --schatten: 0 8px 28px rgba(0, 0, 0, 0.45); --eingabe-bg: #101413; /* Helle Grün-Variante für Text auf dunklem Grund (Links, Status, Akzente) */ --gruen-text: color-mix(in srgb, var(--primaer) 45%, #d8efe2); color-scheme: dark; } [data-theme="hell"] { --bg: #f2f5f3; --karte: #ffffff; --karte2: #eef2ef; --linie: #dde4df; --text: #15201a; --text2: #55645b; --text3: #8a978f; --kopf-text: #ffffff; --daten: var(--sekundaer); --daten-spur: #d7ece0; --warnung: #b45309; --warnung-bg: #fef3c7; --gefahr: #b91c1c; --gefahr-bg: #fee2e2; --ok-bg: #d9f3e4; --info-bg: #dbeef5; --schatten: 0 8px 24px rgba(21, 32, 26, 0.10); --eingabe-bg: #f7faf8; --gruen-text: color-mix(in srgb, var(--sekundaer) 65%, #0a2417); color-scheme: light; } @media (prefers-color-scheme: light) { [data-theme="system"] { --bg: #f2f5f3; --karte: #ffffff; --karte2: #eef2ef; --linie: #dde4df; --text: #15201a; --text2: #55645b; --text3: #8a978f; --kopf-text: #ffffff; --daten: var(--sekundaer); --daten-spur: #d7ece0; --warnung: #b45309; --warnung-bg: #fef3c7; --gefahr: #b91c1c; --gefahr-bg: #fee2e2; --ok-bg: #d9f3e4; --info-bg: #dbeef5; --schatten: 0 8px 24px rgba(21, 32, 26, 0.10); --eingabe-bg: #f7faf8; --gruen-text: color-mix(in srgb, var(--sekundaer) 65%, #0a2417); color-scheme: light; } } /* !important, weil im Template einen dunklen Inline-Hintergrund als Erst-Anstrich trägt (gegen weißen Blitz) – danach muss die Theme-Farbe gewinnen, sonst bleibt z. B. unter der Tab-Leiste ein schwarzer Streifen. */ html { -webkit-text-size-adjust: 100%; background: var(--bg) !important; } :root { accent-color: var(--primaer); } /* Installierte Web-App: kein Gummiband-Hüpfen, kein Doppeltipp-Zoom-Ruckeln */ html, body { overscroll-behavior-y: none; } a, button, .knopf, .tabbar a, .chip, input, select, label { touch-action: manipulation; } .tabbar a { -webkit-tap-highlight-color: transparent; } body { font-family: var(--schrift); background: var(--bg); color: var(--text); line-height: 1.5; min-height: 100dvh; } a { color: var(--gruen-text); text-decoration: none; } a:hover { text-decoration: underline; } /* ---------- App-Rahmen: mittige Spalte wie eine App ---------- */ .rahmen { max-width: 560px; margin: 0 auto; min-height: 100dvh; display: flex; flex-direction: column; position: relative; } .rahmen.breit { max-width: 1080px; } /* Die Leiste nimmt jetzt echten Platz im Layout ein – kein 110px-Puffer mehr nötig */ .inhalt { padding: 16px 16px 26px; flex: 1; } .rahmen.breit .inhalt { padding-bottom: 40px; } /* ---------- Kopfbereich (grüne Karte mit runden unteren Ecken) ---------- */ .kopf { background: linear-gradient(160deg, var(--primaer), var(--sekundaer)); color: var(--kopf-text); padding: calc(18px + env(safe-area-inset-top, 0px)) 20px 24px; border-radius: 0 0 var(--r-kopf) var(--r-kopf); position: relative; overflow: hidden; } .kopf h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } /* Auswahlkacheln für den Kopf-Stil (Einstellungen) */ .kopf-wahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; } .kopf-option { border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 3px; background: var(--karte); } .kopf-option.gewaehlt, .kopf-option:has(input:checked) { border-color: var(--primaer); outline: 2px solid color-mix(in srgb, var(--primaer) 35%, transparent); } .kopf-option input { position: absolute; opacity: 0; pointer-events: none; } .kopf-option .ko-bild { height: 46px; border-radius: var(--r-eingabe); margin-bottom: 5px; position: relative; background: var(--karte2); overflow: hidden; } .kopf-option .ko-bild::after { content: ""; position: absolute; left: 9px; right: 32px; bottom: 9px; height: 6px; border-radius: 3px; background: var(--text3); opacity: 0.5; } .ko-band { background: linear-gradient(160deg, var(--primaer), var(--sekundaer)); } .ko-band::after { background: #fff; opacity: 0.8; bottom: 12px; } .ko-welle { background: linear-gradient(180deg, var(--primaer), transparent 85%); } .ko-welle::after { background: var(--text); opacity: 0.55; } .ko-ruhig::before { content: ""; position: absolute; left: 9px; top: 10px; width: 62%; height: 11px; border-radius: 3px; background: var(--text); opacity: 0.75; } .ko-kompakt::before { content: ""; position: absolute; left: 9px; top: 9px; width: 42%; height: 7px; border-radius: 3px; background: var(--text); opacity: 0.7; } .ko-kompakt::after { top: 24px; bottom: auto; left: 0; right: 0; height: 1px; border-radius: 0; } .ko-plattform { background: repeating-linear-gradient(45deg, var(--karte2), var(--karte2) 6px, var(--karte) 6px, var(--karte) 12px); } .kopf-option .ko-name { font-weight: 700; font-size: 13.5px; } .kopf-option .ko-hinweis { font-size: 11.5px; color: var(--text3); line-height: 1.35; } /* ---------- Kopf-Stile: wie der Seitenkopf in der App wirkt ---------- „ruhig" (Standard): gar kein Farbband – die Überschrift steht direkt über dem Inhalt, wie in modernen Telefon-Apps. Der Kopf trägt dann Textfarbe statt Kopftext-Farbe, damit er auf hellem wie dunklem Grund lesbar ist. */ [data-kopf="ruhig"] .kopf { background: none; color: var(--text); padding: calc(14px + env(safe-area-inset-top, 0px)) 16px 6px; border-radius: 0; overflow: visible; } [data-kopf="ruhig"] .kopf h1 { font-size: 32px; } [data-kopf="ruhig"] .kopf .unterzeile { color: var(--text2); opacity: 1; } [data-kopf="ruhig"] .kopf .deko { display: none; } [data-kopf="ruhig"] .kopf a, [data-kopf="ruhig"] .kopf-zurueck { color: var(--gruen-text); } [data-kopf="ruhig"] .kopf .kopf-knopf { background: var(--karte2); color: var(--text); } [data-kopf="ruhig"] .kopf .such-feld { background-color: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); } [data-kopf="ruhig"] .kopf .such-feld::placeholder { color: var(--text3); } [data-kopf="ruhig"] .kopf input[type="search"], [data-kopf="ruhig"] .kopf .such-feld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E"); } /* „kompakt": schmale Zeile, kleiner Titel – maximaler Platz für den Inhalt */ [data-kopf="kompakt"] .kopf { background: none; color: var(--text); padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 4px; border-radius: 0; overflow: visible; border-bottom: 1px solid var(--linie); margin-bottom: 4px; } [data-kopf="kompakt"] .kopf h1 { font-size: 19px; font-weight: 700; } [data-kopf="kompakt"] .kopf .unterzeile { color: var(--text3); opacity: 1; font-size: 12.5px; } [data-kopf="kompakt"] .kopf .deko { display: none; } [data-kopf="kompakt"] .kopf a, [data-kopf="kompakt"] .kopf-zurueck { color: var(--gruen-text); } [data-kopf="kompakt"] .kopf .kopf-knopf { background: var(--karte2); color: var(--text); } [data-kopf="kompakt"] .kopf .such-feld { background-color: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); margin-top: 10px; } [data-kopf="kompakt"] .kopf .such-feld::placeholder { color: var(--text3); } /* „welle": die Farbe läuft nach unten weich aus – keine harte Kante */ [data-kopf="welle"] .kopf { background: linear-gradient(180deg, color-mix(in srgb, var(--primaer) 92%, transparent) 0%, color-mix(in srgb, var(--primaer) 40%, transparent) 55%, transparent 100%); border-radius: 0; padding-bottom: 34px; margin-bottom: -14px; } [data-kopf="welle"] .kopf .deko { opacity: 0.1; } .kopf .unterzeile { opacity: 0.9; font-size: 14px; margin-top: 2px; } .kopf .deko { position: absolute; right: -22px; top: -14px; width: 150px; height: 150px; opacity: 0.16; pointer-events: none; } .kopf .kopf-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .kopf .kopf-knopf { background: rgba(0, 0, 0, 0.25); color: #fff; border: none; border-radius: var(--r-pille); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; } .kopf .such-feld { width: 100%; margin-top: 14px; background-color: rgba(0, 0, 0, 0.35); border: none; border-radius: var(--r-eingabe); padding: 12px 16px 12px 42px; color: #fff; font-size: 16px; background-repeat: no-repeat; background-position: left 15px center; background-size: 17px; } .kopf .such-feld::placeholder { color: rgba(255, 255, 255, 0.65); } .kopf a { color: #fff; } .kopf-zurueck { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; opacity: 0.95; margin-bottom: 6px; } /* ---------- Untere Tab-Leiste: schwebende Pille (wie in großen Social-Apps) ---------- Sie liegt ÜBER dem Inhalt statt am Fensterrand zu kleben. Dadurch ist es egal, wie iOS die Fensterhöhe berechnet – unter der Leiste läuft einfach der Inhalt weiter, es kann dort kein dunkler Balken mehr entstehen. */ .tabbar { position: fixed; z-index: 40; left: 50%; transform: translateX(-50%); bottom: max(env(safe-area-inset-bottom, 0px), 10px); width: min(430px, calc(100% - 24px)); display: flex; justify-content: center; background: color-mix(in srgb, var(--karte) 90%, transparent); -webkit-backdrop-filter: saturate(180%) blur(18px); backdrop-filter: saturate(180%) blur(18px); border: 1px solid color-mix(in srgb, var(--linie) 70%, transparent); border-radius: 999px; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.28); padding: 6px; } .tabbar-innen { display: flex; width: 100%; } .tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 0 8px; color: var(--text3); font-size: 9.5px; text-decoration: none; border-radius: 999px; position: relative; transition: background 0.15s, color 0.15s; } .tabbar a svg { width: 24px; height: 24px; } .tabbar a.aktiv { color: var(--gruen-text); font-weight: 700; background: color-mix(in srgb, var(--gruen-text) 16%, transparent); } .tabbar a:hover, .tabbar a.aktiv:hover { text-decoration: none; } /* ---------- Verwaltungs-Navigation (oben, scrollbar) ---------- */ .vnav { display: flex; gap: 6px; overflow-x: auto; padding: 12px 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .vnav::-webkit-scrollbar { display: none; } .mitglied-band { padding: 12px 16px 0; } @media (min-width: 900px) { .mitglied-band { display: none; } } .vnav a { flex: none; padding: 8px 14px; border-radius: var(--r-pille); font-size: 14px; font-weight: 600; color: var(--text2); background: var(--karte); border: 1px solid var(--linie); text-decoration: none; } .vnav a.aktiv { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer, #fff); } .vnav a:hover { text-decoration: none; } /* ---------- Karten & Raster ---------- */ .karte { background: var(--karte); border-radius: var(--r-karte); padding: 16px; margin-bottom: 14px; border: 1px solid var(--linie); } .karte h2 { font-size: 17px; margin-bottom: 10px; } .karte h3 { font-size: 15px; margin-bottom: 6px; } .karten-titel { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; } .karten-titel h2 { margin: 0; } .karten-titel .mehr { font-size: 13.5px; font-weight: 600; } .kachel-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; } .rahmen.breit .kachel-raster { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } .kachel { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 14px 16px; color: var(--text); display: block; text-decoration: none; } a.kachel:hover { text-decoration: none; border-color: var(--primaer); } .kachel .wert { font-size: 26px; font-weight: 700; letter-spacing: -0.01em; } .kachel .beschriftung { font-size: 12.5px; color: var(--text2); margin-top: 2px; } /* ---------- Produktkarten ---------- */ .produkt-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .produkt-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 14px 12px 16px; position: relative; color: var(--text); display: block; } .produkt-karte:hover { text-decoration: none; border-color: var(--text3); } .karten-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .ausverkauft { pointer-events: none; } .produkt-kopfzeile { display: flex; justify-content: space-between; align-items: center; min-height: 24px; } .produkt-foto { width: 104px; height: 104px; border-radius: var(--r-foto); object-fit: cover; display: block; margin: 4px auto 10px; background: var(--karte2); } .produkt-foto.gross { width: 168px; height: 168px; margin: 6px auto 14px; } .produkt-name { text-align: center; font-size: 17.5px; font-weight: 650; letter-spacing: -0.01em; } .produkt-typ { display: flex; justify-content: center; align-items: center; gap: 10px; color: var(--text2); font-size: 13px; margin: 4px 0 10px; } .produkt-typ span { display: inline-flex; align-items: center; gap: 4px; } .produkt-typ svg { width: 15px; height: 15px; } .ausverkauft { position: absolute; inset: 0; border-radius: var(--r-karte); background: color-mix(in srgb, var(--bg) 55%, transparent); display: flex; align-items: center; justify-content: center; } .ausverkauft span { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-pille); padding: 6px 12px; font-size: 13px; font-weight: 600; } /* Indica/Sativa-Verlauf mit Marker */ .genetik { display: flex; align-items: center; gap: 8px; } .genetik svg { width: 17px; height: 17px; flex: none; } .genetik .mond { color: var(--indica); } .genetik .funkeln { color: var(--akzent); } .genetik-balken { position: relative; flex: 1; height: 8px; border-radius: 999px; background: linear-gradient(90deg, #3ba3e8, #2fbf7f 45%, #e8a13b); } .genetik-marker { position: absolute; top: -3px; width: 4px; height: 14px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.35); transform: translateX(-50%); } .herz-form { position: relative; z-index: 2; } .herz { background: none; border: none; color: var(--text3); cursor: pointer; padding: 2px; display: inline-flex; } .herz svg { width: 22px; height: 22px; } .herz.aktiv { color: var(--gefahr); } .herz .h-voll, .herz .h-leer { display: inline-flex; } .herz .h-voll { display: none; } .herz.aktiv .h-voll { display: inline-flex; } .herz.aktiv .h-leer { display: none; } .herz.aktiv svg { fill: var(--gefahr); } .pfeil-hin { color: var(--text3); display: inline-flex; } .pfeil-hin svg { width: 20px; height: 20px; } /* ---------- Chips, Badges, Status ---------- */ .chip-zeile { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; } .chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 13px; border-radius: var(--r-pille); background: var(--karte); border: 1px solid var(--linie); color: var(--text2); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; } .chip.aktiv { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer, #fff); } .chip:hover { text-decoration: none; } .badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--r-pille); font-size: 12px; font-weight: 700; } .badge.gruen { background: var(--primaer); color: #fff; } .badge.grau { background: var(--karte2); color: var(--text2); } .badge.amber { background: var(--warnung-bg); color: var(--warnung); } .status-pille { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: var(--r-pille); font-size: 12.5px; font-weight: 700; } .status-eingegangen { background: var(--info-bg); color: #67c3e0; } .status-bereit { background: var(--warnung-bg); color: var(--warnung); } .status-abgeholt { background: var(--ok-bg); color: var(--gruen-text); } .status-storniert, .status-abgelehnt, .status-entfernt { background: var(--karte2); color: var(--text3); } .status-beantragt { background: var(--warnung-bg); color: var(--warnung); } .status-neu { background: var(--info-bg); color: #67c3e0; } .status-bestaetigt { background: var(--warnung-bg); color: var(--warnung); } .status-bezahlt, .status-versandt, .status-geliefert { background: var(--ok-bg); color: var(--gruen-text); } .status-aktiv { background: var(--ok-bg); color: var(--gruen-text); } .status-blockiert, .status-gesperrt { background: var(--gefahr-bg); color: var(--gefahr); } .status-wartend { background: var(--warnung-bg); color: var(--warnung); } [data-theme="hell"] .status-eingegangen { color: #0c6c8a; } @media (prefers-color-scheme: light) { [data-theme="system"] .status-eingegangen { color: #0c6c8a; } } /* ---------- Knöpfe ---------- */ .knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--primaer); color: var(--auf-primaer, #fff); border: none; border-radius: var(--r-knopf); padding: 13px 20px; font-size: 15.5px; font-weight: 700; cursor: pointer; text-decoration: none; transition: filter 0.15s; } .knopf:hover { filter: brightness(1.08); text-decoration: none; } .knopf:not(.zart):not(.gefahr):not(.hell):not(.glas), .knopf:not(.zart):not(.gefahr):not(.hell):not(.glas) * { color: var(--auf-primaer, #fff); } .knopf.hell, .knopf.hell * { color: #111; } /* Filterzeilen: aufgeräumtes Raster statt überlanger Felder (Handy & Tablet) */ .filterform { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; align-items: end; } .filterform .feld { margin: 0; min-width: 0; } .filterform .feld.breit, .filterform .filter-knoepfe { grid-column: 1 / -1; } .filter-knoepfe { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } @media (min-width: 760px) { .filterform { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .filterform .feld.breit { grid-column: span 2; } .filterform .filter-knoepfe { grid-column: auto; justify-content: flex-end; } } .knopf svg { width: 18px; height: 18px; flex: none; } .knopf.klein svg { width: 15px; height: 15px; } details.aufklapp summary svg { width: 17px; height: 17px; vertical-align: -4px; margin-right: 4px; } .knopf.voll { width: 100%; } .knopf.zart { background: var(--karte2); color: var(--text); border: 1px solid var(--linie); } .knopf.gefahr { background: transparent; color: var(--gefahr); border: 1px solid var(--gefahr); } .knopf.klein { padding: 8px 14px; font-size: 13.5px; border-radius: var(--r-knopf); } .knopf.hell { background: #fff; color: #111; } .knopf:disabled { opacity: 0.5; cursor: not-allowed; } .knopf-zeile { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- Formulare ---------- */ .feld { margin-bottom: 14px; } .feld label { display: block; font-size: 13.5px; font-weight: 600; color: var(--text2); margin-bottom: 6px; } /* Grundstil für ALLE Eingabefelder – auch außerhalb von .feld (Tabellen, Inline-Formulare). Sonst erscheinen native macOS/Windows-Felder im Design. */ input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="submit"]):not([type="button"]):not([type="file"]), select, textarea { background: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 10px 12px; font-size: 15px; font-family: inherit; max-width: 100%; } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--primaer); outline-offset: 0; border-color: var(--primaer); } td > input, td > select { width: 100%; } input[type="file"] { font-family: inherit; font-size: 13.5px; color: var(--text2); max-width: 100%; } input[type="file"]::file-selector-button { background: var(--karte2); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-knopf); padding: 8px 14px; font-family: inherit; font-size: 13.5px; font-weight: 600; margin-right: 10px; cursor: pointer; } input[type="file"]::file-selector-button:hover { border-color: var(--primaer); } .feld input, .feld select, .feld textarea { width: 100%; background: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 12px 14px; font-size: 16px; font-family: inherit; } .feld textarea { min-height: 96px; resize: vertical; } .feld input:focus, .feld select:focus, .feld textarea:focus { outline: 2px solid var(--primaer); outline-offset: 0; border-color: var(--primaer); } .feld .hinweis { font-size: 12.5px; color: var(--text3); margin-top: 5px; } /* ---------- Eigene Optik für Auswahl-Elemente (statt Browser-Standard) ---------- */ select { appearance: none; -webkit-appearance: none; background-color: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 11px 38px 11px 14px; font-size: 15px; font-family: inherit; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } select:focus { outline: 2px solid var(--primaer); outline-offset: 0; border-color: var(--primaer); } .feld select, .flex-zeile select { padding-right: 38px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 16px; } select option { background: var(--karte); color: var(--text); } input[type="checkbox"], input[type="radio"] { appearance: none; -webkit-appearance: none; width: 19px; height: 19px; min-width: 19px; padding: 0; border: 1.5px solid color-mix(in srgb, var(--linie) 60%, var(--text3)); background: var(--eingabe-bg); cursor: pointer; position: relative; border-radius: 5px; vertical-align: -4px; margin: 0; } input[type="radio"] { border-radius: 50%; } input[type="checkbox"]:checked, input[type="radio"]:checked { background: var(--primaer); border-color: var(--primaer); } input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1.5px; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); } input[type="radio"]:checked::after { content: ""; position: absolute; inset: 4.5px; border-radius: 50%; background: #fff; } input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: 2px solid var(--primaer); outline-offset: 2px; } /* Kalender-Felder: Symbol an das Theme anpassen */ input[type="date"], input[type="month"] { cursor: pointer; } input[type="date"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.7; filter: invert(1); } [data-theme="hell"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="hell"] input[type="month"]::-webkit-calendar-picker-indicator { filter: none; } @media (prefers-color-scheme: light) { [data-theme="system"] input[type="date"]::-webkit-calendar-picker-indicator, [data-theme="system"] input[type="month"]::-webkit-calendar-picker-indicator { filter: none; } } /* ---------- Frage-Dialog (ersetzt die Browser-confirm-Box) ---------- */ /* Der CSS-Reset (* { margin: 0 }) entfernt die automatische Zentrierung von – ohne diese Zeile klebt jeder Dialog oben links im Fenster. */ dialog { margin: auto; } dialog.frage-dialog { border: 1.5px solid var(--primaer); border-radius: var(--r-karte); background: var(--karte); color: var(--text); padding: 0; width: min(400px, calc(100vw - 40px)); box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55); } dialog.frage-dialog::backdrop { background: rgba(5, 8, 7, 0.65); backdrop-filter: blur(4px); } .frage-innen { padding: 22px 20px 18px; } .frage-innen h2 { font-size: 17px; margin-bottom: 6px; } .feld-zeile { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } @media (max-width: 420px) { .feld-zeile { grid-template-columns: 1fr; gap: 0; } } .feld input[type="color"] { padding: 4px; height: 48px; cursor: pointer; } .feld input[type="checkbox"] { width: auto; } .schalter-zeile { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--linie); } .schalter-zeile:last-child { border-bottom: none; } .schalter-zeile .titel { display: block; font-weight: 600; font-size: 15px; } .schalter-zeile .unter { display: block; font-size: 13px; color: var(--text2); } /* Schalter (Checkbox als Switch) */ .schalter { position: relative; width: 50px; height: 30px; flex: none; } .schalter input { opacity: 0; width: 100%; height: 100%; position: absolute; cursor: pointer; z-index: 2; margin: 0; } .schalter .spur { position: absolute; inset: 0; background: var(--karte2); border: 1px solid var(--linie); border-radius: 999px; transition: background 0.15s; } .schalter .spur::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; transition: transform 0.15s; box-shadow: 0 1px 3px rgba(0,0,0,0.3); } .schalter input:checked + .spur { background: var(--primaer); border-color: var(--primaer); } .schalter input:checked + .spur::after { transform: translateX(20px); } /* ---------- Mengen-Stepper ---------- */ .stepper { display: flex; align-items: center; gap: 10px; } .stepper button { width: 44px; height: 44px; border-radius: var(--r-eingabe); border: 1px solid var(--linie); background: var(--karte2); color: var(--text); font-size: 22px; font-weight: 700; cursor: pointer; } .stepper input { width: 90px; text-align: center; font-size: 18px; font-weight: 700; } /* ---------- Monatsring (Meter) ---------- */ .ring-karte { display: flex; align-items: center; gap: 18px; } .ring { position: relative; width: 128px; height: 128px; flex: none; } .ring .scheibe { width: 100%; height: 100%; border-radius: 50%; background: conic-gradient(var(--ring-farbe, var(--daten)) calc(var(--anteil) * 1%), var(--daten-spur) 0); } .ring .loch { position: absolute; inset: 13px; border-radius: 50%; background: var(--karte); display: flex; flex-direction: column; align-items: center; justify-content: center; } .ring .loch .wert { font-size: 21px; font-weight: 700; letter-spacing: -0.01em; } .ring .loch .einheit { font-size: 11.5px; color: var(--text2); } .ring-text .zeile1 { font-weight: 700; font-size: 15.5px; } .ring-text .zeile2 { color: var(--text2); font-size: 13.5px; margin-top: 3px; } .ring-text .zeile3 { color: var(--text3); font-size: 12.5px; margin-top: 6px; } /* ---------- Balkendiagramm (7 Tage) ---------- */ .balken-diagramm { display: flex; align-items: flex-end; gap: 10px; height: 110px; padding-top: 6px; } .balken-spalte { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; } .balken { width: 100%; max-width: 22px; background: var(--daten); border-radius: 4px 4px 0 0; min-height: 2px; } .balken.leer { background: var(--daten-spur); height: 2px !important; } .balken-wert { font-size: 11px; color: var(--text2); font-weight: 600; } .balken-tag { font-size: 11px; color: var(--text3); } .balken-grundlinie { border-top: 1px solid var(--linie); margin-top: 2px; padding-top: 6px; display: flex; gap: 10px; } .balken-grundlinie span { flex: 1; text-align: center; font-size: 11px; color: var(--text3); } /* ---------- Listenzeilen ---------- */ .zeile { display: flex; align-items: center; gap: 12px; padding: 13px 2px; border-bottom: 1px solid var(--linie); color: var(--text); text-decoration: none; } .zeile:last-child { border-bottom: none; } .zeile:hover { text-decoration: none; } a.zeile:hover .zeile-titel { color: var(--gruen-text); } .zeile .symbol { width: 44px; height: 44px; border-radius: var(--r-foto); background: var(--karte2); display: flex; align-items: center; justify-content: center; flex: none; font-weight: 700; color: var(--text2); overflow: hidden; } .zeile .symbol img { width: 100%; height: 100%; object-fit: cover; } .zeile .mitte { flex: 1; min-width: 0; } .zeile-titel { font-weight: 650; font-size: 15px; } .zeile-unter { font-size: 13px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .zeile .rechts { text-align: right; flex: none; } /* ---------- Chat ---------- */ .chat-verlauf { display: flex; flex-direction: column; gap: 10px; padding: 6px 0 12px; } .blase { max-width: 82%; padding: 10px 14px; border-radius: var(--r-blase); font-size: 15px; } .blase .von { font-size: 12px; font-weight: 700; margin-bottom: 2px; color: var(--gruen-text); } .blase .zeit { font-size: 10.5px; color: var(--text3); margin-top: 3px; } .blase.fremd { background: var(--karte); border: 1px solid var(--linie); align-self: flex-start; border-bottom-left-radius: 6px; } .blase.eigene { background: var(--primaer); color: #fff; align-self: flex-end; border-bottom-right-radius: 6px; } .blase.eigene .zeit { color: rgba(255, 255, 255, 0.75); } .chat-eingabe { position: fixed; bottom: 0; left: 0; right: 0; z-index: 41; background: color-mix(in srgb, var(--karte) 94%, transparent); backdrop-filter: blur(14px); border-top: 1px solid var(--linie); padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px)); } .chat-eingabe form { display: flex; gap: 8px; max-width: 560px; margin: 0 auto; } .chat-eingabe input { flex: 1; background: var(--eingabe-bg); border: 1px solid var(--linie); color: var(--text); border-radius: var(--r-pille); padding: 12px 18px; font-size: 15.5px; } .chat-eingabe button { width: 46px; height: 46px; border-radius: var(--r-pille); border: none; background: var(--primaer); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .chat-eingabe button svg { width: 20px; height: 20px; } /* ---------- Mitgliedsausweis ---------- */ .ausweis { background: linear-gradient(150deg, #101413, #1b211e 60%, #10241a); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 20px; color: #fff; position: relative; overflow: hidden; margin-bottom: 14px; } .ausweis::after { content: ""; position: absolute; right: -40px; bottom: -60px; width: 210px; height: 210px; background: radial-gradient(circle, color-mix(in srgb, var(--primaer) 35%, transparent), transparent 70%); } .ausweis .kopfzeile { display: flex; justify-content: space-between; align-items: center; margin-bottom: 26px; } .ausweis .club-logo { width: 54px; height: 54px; border-radius: var(--r-foto); object-fit: cover; background: #000; } .ausweis .club-logo-platzhalter { width: 54px; height: 54px; border-radius: var(--r-foto); background: var(--primaer); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 19px; } .ausweis .mono { font-family: "SF Mono", ui-monospace, "Cascadia Mono", Menlo, monospace; } .ausweis .name { font-size: 21px; font-weight: 700; } .ausweis .club { font-size: 13.5px; opacity: 0.85; margin-top: 2px; } .ausweis .nummer { font-size: 15px; margin-top: 10px; letter-spacing: 0.06em; } .ausweis .qr { position: relative; z-index: 1; background: #fff; border-radius: var(--r-eingabe); padding: 10px; width: 132px; margin-top: 14px; } .ausweis .qr img { width: 100%; display: block; } /* ---------- Meldungen (Flash) ---------- */ .meldungen { position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 30; } .meldung { border-radius: var(--r-eingabe); padding: 12px 16px; margin: 8px 0; font-size: 14.5px; font-weight: 600; border: 1px solid var(--linie); background: var(--karte); box-shadow: var(--schatten); } .meldung.ok { border-color: var(--primaer); color: var(--gruen-text); } .meldung.fehler { border-color: var(--gefahr); color: var(--gefahr); } .meldung.info { color: var(--text2); } .paket-zeile { cursor: grab; } .paket-zeile:active { cursor: grabbing; } .zieh-griff { color: var(--text3); font-size: 15px; flex: none; padding: 0 2px; cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; } .rechts-fuss { text-align: center; padding: 22px 16px 26px; font-size: 12px; color: var(--text3); display: flex; gap: 8px; justify-content: center; } .rechts-fuss a { color: var(--text3); text-decoration: none; } .rechts-fuss a:hover { color: var(--text); text-decoration: underline; } /* Limit-Darstellung „große Zahl“ (App-Stile bold, editorial, studio, magazin, kampagne) */ .limit-zahl { text-align: center; padding: 6px 0 2px; } .limit-zahl .lz-wert { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; } .limit-zahl .lz-unter { color: var(--text2); font-size: 13.5px; margin-top: 2px; } .limit-zahl .lz-frei { font-size: 14px; margin-top: 8px; } .limit-zahl .lz-spur { height: 8px; border-radius: 4px; background: var(--linie); overflow: hidden; margin-top: 10px; } .limit-zahl .lz-spur div { height: 100%; border-radius: 4px; } /* Limit-Darstellung „Balken“ (App-Stile warm, mono, beton, frisch, klar) ACHTUNG: .limit-balken ist schon als schmaler Fortschrittsbalken vergeben – daher .limit-leiste */ .limit-leiste .ll-kopf, .limit-leiste .ll-fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 14px; } .limit-leiste .ll-kopf { margin-bottom: 7px; } .limit-leiste .ll-fuss { margin-top: 7px; color: var(--text2); } .limit-leiste .ll-spur { height: 12px; border-radius: 6px; background: var(--linie); overflow: hidden; } .limit-leiste .ll-spur div { height: 100%; border-radius: 6px; transition: width 0.4s; } .haken-hinweis { display: flex; gap: 8px; align-items: flex-start; } .haken-hinweis svg { width: 18px; height: 18px; flex: none; margin-top: 1px; color: var(--ok, #2f9e63); } .warn-block { background: var(--warnung-bg); color: var(--warnung); border-radius: var(--r-eingabe); padding: 12px 14px; font-size: 13.5px; font-weight: 600; margin: 10px 0; display: flex; gap: 8px; align-items: flex-start; } .warn-block svg { width: 18px; height: 18px; flex: none; margin-top: 1px; } .gefahr-block { background: var(--gefahr-bg); color: var(--gefahr); } /* ---------- Tabellen (Verwaltung) ---------- */ .tabelle-umbruch { overflow-x: auto; } /* ---------- Suchfelder: überall gleiche Optik statt Browser-Standard ---------- Safari/iOS zeichnen input[type=search] sonst als graue Systemkapsel mit eigenem Löschkreuz – das passt nicht zum App-Design. */ input[type="search"], .suchleiste input { appearance: none; -webkit-appearance: none; background-color: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 11px 14px 11px 38px; font-size: 15px; font-family: inherit; width: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E"); background-repeat: no-repeat !important; background-position: left 13px center; background-size: 16px; } input[type="search"]:focus, .suchleiste input:focus { outline: 2px solid var(--primaer); outline-offset: 0; border-color: var(--primaer); } input[type="search"]::-webkit-search-decoration, input[type="search"]::-webkit-search-results-button, input[type="search"]::-webkit-search-results-decoration { -webkit-appearance: none; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 15px; width: 15px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%238a978f' stroke-width='2.6' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E"); background-size: 15px; } /* Im farbigen Kopfbereich bleibt die Suche hell auf der Kopffarbe. Wichtig: repeat/position/size mitgeben – eine background-Kurzform weiter oben würde das Symbol sonst über das ganze Feld kacheln. */ .kopf input[type="search"], .kopf .such-feld { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.7' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.2-3.2'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: left 15px center; background-size: 17px; } .tabellen-suche { width: 100%; max-width: 340px; margin-bottom: 10px; font-size: 14px; padding-top: 9px; padding-bottom: 9px; } .wahl-reihe { display: flex; align-items: center; gap: 10px; } .wahl-reihe .zeile { flex: 1; min-width: 0; } .liste-alle { display: flex; align-items: center; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--linie); cursor: pointer; color: var(--text2); } .zeile > input.zeilen-wahl { flex: none; margin-right: 2px; } .massen-form { background: color-mix(in srgb, var(--primaer) 10%, var(--karte)); border: 1px solid var(--primaer); border-radius: var(--r-eingabe); padding: 10px 12px; align-items: center; } .tabelle input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--primaer); cursor: pointer; } .tabelle th.sortierbar { cursor: pointer; user-select: none; } .tabelle th.sortierbar:hover { color: var(--text); } .tabelle th.sort-auf::after { content: " ↑"; color: var(--gruen-text); } .tabelle th.sort-ab::after { content: " ↓"; color: var(--gruen-text); } .tabelle { width: 100%; border-collapse: collapse; font-size: 14px; } .tabelle th { text-align: left; color: var(--text3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; padding: 8px 10px; border-bottom: 1px solid var(--linie); } .tabelle td { padding: 11px 10px; border-bottom: 1px solid var(--linie); vertical-align: middle; } .tabelle tr:last-child td { border-bottom: none; } .tabelle td.zahl, .tabelle th.zahl { text-align: right; font-variant-numeric: tabular-nums; } /* ---------- Bottom-Sheet (Filter) ---------- */ dialog.sheet { /* Sichtbare Kante + Schatten: im Dunkelmodus hob sich das Sheet sonst kaum von der Seite dahinter ab (fast gleiche Flächenfarbe) */ border: 1px solid color-mix(in srgb, var(--text3) 45%, var(--linie)); border-bottom: none; border-radius: var(--r-sheet) var(--r-sheet) 0 0; padding: 0; background: var(--karte); color: var(--text); width: 100%; max-width: 560px; margin: auto auto 0; position: fixed; bottom: 0; box-shadow: 0 -18px 60px rgba(0, 0, 0, 0.55); } dialog.sheet::backdrop { background: rgba(0, 0, 0, 0.68); backdrop-filter: blur(3px); } .sheet-innen { padding: 14px 18px 26px; } .sheet-griff { width: 44px; height: 4px; border-radius: 999px; background: var(--linie); margin: 10px auto 2px; } .sheet-kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; } .sheet-kopf h3 { font-size: 19px; } .sheet-kopf .unter { color: var(--text2); font-size: 13.5px; } .sheet-zu { background: var(--karte2); border: none; color: var(--text); width: 36px; height: 36px; border-radius: var(--r-pille); cursor: pointer; font-size: 17px; } .sheet-option { display: block; width: 100%; text-align: left; background: var(--karte2); color: var(--text); border: 1px solid color-mix(in srgb, var(--text3) 40%, var(--linie)); border-radius: var(--r-eingabe); padding: 14px 16px; font-size: 15.5px; font-weight: 600; margin-top: 10px; cursor: pointer; text-decoration: none; } .sheet-option:hover { text-decoration: none; border-color: var(--primaer); } .sheet-option .unter { display: block; font-weight: 400; color: var(--text2); font-size: 13px; } /* ---------- Landing ---------- */ .landing-hero { background: linear-gradient(160deg, var(--primaer), var(--sekundaer)); border-radius: 0 0 var(--r-kopf) var(--r-kopf); color: #fff; padding: calc(54px + env(safe-area-inset-top, 0px)) 22px 44px; text-align: center; position: relative; overflow: hidden; } .landing-hero h1 { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; } .landing-hero p { margin: 12px auto 22px; max-width: 420px; opacity: 0.94; font-size: 16.5px; } .landing-hero .deko { position: absolute; right: -30px; top: -30px; width: 200px; height: 200px; opacity: 0.14; } .landing-hero .hero-innen { position: relative; max-width: 640px; margin: 0 auto; } .hero-badge { display: inline-block; background: rgba(255, 255, 255, 0.16); border: 1px solid rgba(255, 255, 255, 0.35); border-radius: var(--r-pille); padding: 5px 14px; font-size: 13px; font-weight: 700; margin-bottom: 16px; } .knopf.glas { background: rgba(0, 0, 0, 0.28); color: #fff; } .landing-abschnitt { margin: 26px 0; } .landing-titel { font-size: 22px; letter-spacing: -0.01em; margin-bottom: 14px; } .landing-raster { display: grid; grid-template-columns: 1fr; gap: 12px; } .landing-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 20px 18px; } .landing-karte .zeichen { width: 42px; height: 42px; border-radius: var(--r-eingabe); background: color-mix(in srgb, var(--primaer) 16%, transparent); color: var(--primaer); display: flex; align-items: center; justify-content: center; margin-bottom: 12px; } .landing-karte .zeichen svg { width: 22px; height: 22px; } .landing-karte h3 { font-size: 16px; margin-bottom: 4px; } .landing-karte p { font-size: 14px; color: var(--text2); } .landing-cta { text-align: center; padding: 34px 20px; margin: 30px 0 18px; background: color-mix(in srgb, var(--primaer) 10%, var(--karte)); border: 1px solid var(--linie); border-radius: var(--r-karte); } .landing-cta h2 { font-size: 24px; } .landing-cta p { color: var(--text2); margin: 6px 0 16px; } .landing-fuss { text-align: center; padding: 18px 0 26px; font-size: 12px; color: var(--text3); } .landing-fuss .fuss-links { margin-top: 8px; } .landing-fuss a { color: var(--text3); text-decoration: underline; } .merkmal { display: flex; gap: 14px; align-items: flex-start; padding: 12px 2px; } .merkmal .zeichen { width: 42px; height: 42px; border-radius: var(--r-eingabe); background: color-mix(in srgb, var(--primaer) 16%, transparent); color: var(--primaer); display: flex; align-items: center; justify-content: center; flex: none; } .merkmal .zeichen svg { width: 22px; height: 22px; } .merkmal h3 { font-size: 15.5px; } .merkmal p { font-size: 13.5px; color: var(--text2); } /* ---------- Druckansichten ---------- */ .druck-blatt { max-width: 700px; margin: 0 auto; padding: 28px 20px 60px; } .druck-kopf { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; } .druck-tabelle { width: 100%; border-collapse: collapse; font-size: 14px; margin: 14px 0; } .druck-tabelle th, .druck-tabelle td { padding: 9px 10px; border-bottom: 1px solid var(--linie); text-align: left; } .druck-tabelle td.zahl, .druck-tabelle th.zahl { text-align: right; } @media print { body { background: #fff; color: #111; } :root, [data-theme="dunkel"], [data-theme="system"] { --bg: #fff; --karte: #fff; --karte2: #f4f4f4; --linie: #ccc; --text: #111; --text2: #444; --text3: #777; } .kein-druck { display: none !important; } .druck-blatt { padding: 0; } .karte { border: 1px solid #ddd; box-shadow: none; } } /* ---------- Kleinkram ---------- */ .leer-zustand { text-align: center; padding: 40px 16px; color: var(--text2); } .leer-zustand svg { width: 52px; height: 52px; color: var(--text3); margin-bottom: 10px; } .leer-zustand .titel { font-weight: 700; font-size: 16.5px; color: var(--text); } .leer-zustand p { font-size: 14px; margin-top: 4px; } .abstand { height: 10px; } .klein { font-size: 13px; color: var(--text2); } .winzig { font-size: 12px; color: var(--text3); } .fett { font-weight: 700; } .gruen { color: var(--gruen-text); } .mittig { text-align: center; } .trenner { border: none; border-top: 1px solid var(--linie); margin: 14px 0; } .zeilenumbruch { white-space: pre-line; } .rechts-buendig { text-align: right; } .flex-zeile { display: flex; align-items: center; gap: 10px; } .flex-auf { justify-content: space-between; } .wachsen { flex: 1; min-width: 0; } details.aufklapp summary { cursor: pointer; font-weight: 600; color: var(--text2); font-size: 14px; list-style: none; } details.aufklapp summary::-webkit-details-marker { display: none; } details.aufklapp[open] summary { margin-bottom: 10px; } .theme-wahl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .theme-wahl button { border-radius: var(--r-eingabe); border: 2px solid var(--linie); padding: 14px 8px; cursor: pointer; font-weight: 700; font-size: 13.5px; display: flex; flex-direction: column; align-items: center; gap: 6px; } .theme-wahl button svg { width: 20px; height: 20px; } .theme-wahl button.aktiv { border-color: var(--primaer); } .theme-wahl .t-hell { background: #f5f5f5; color: #111; } .theme-wahl .t-dunkel { background: #101413; color: #fff; } .theme-wahl .t-system { background: linear-gradient(135deg, #f5f5f5 50%, #101413 50%); color: #888; } .theme-wahl .t-system span { background: var(--karte); padding: 1px 8px; border-radius: 8px; color: var(--text); } .club-banner { height: 150px; border-radius: var(--r-karte); overflow: hidden; background: var(--karte2); position: relative; margin-bottom: -30px; } .club-banner img { width: 100%; height: 100%; object-fit: cover; } .club-banner .platzhalter { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: linear-gradient(150deg, var(--karte2), var(--karte)); color: var(--text3); font-size: 34px; font-weight: 800; letter-spacing: 0.02em; } .club-logo-rund { width: 76px; height: 76px; border-radius: var(--r-foto); border: 4px solid var(--bg); background: var(--karte2); object-fit: cover; position: relative; margin-left: 16px; display: block; } .club-logo-wort { height: 62px; width: auto; max-width: min(70vw, 300px); object-fit: contain; object-position: left center; position: relative; margin-left: 16px; display: block; background: var(--karte); border: 4px solid var(--bg); border-radius: 12px; padding: 4px 10px; } .schnell-zeile { display: flex; gap: 10px; margin: 14px 0; flex-wrap: wrap; } .schnell-knopf { flex: 1; min-width: 74px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 8px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); font-size: 12.5px; font-weight: 700; color: var(--text); } .schnell-knopf:hover { text-decoration: none; border-color: var(--primaer); } .schnell-knopf svg { width: 21px; height: 21px; color: var(--gruen-text); } .osm-rahmen { border-radius: var(--r-karte); overflow: hidden; border: 1px solid var(--linie); } .osm-rahmen iframe { display: block; width: 100%; height: 240px; border: 0; } .club-logo-fallback { width: 76px; height: 76px; border-radius: var(--r-foto); border: 4px solid var(--bg); background: var(--primaer); color: #fff; font-size: 26px; font-weight: 800; display: flex; align-items: center; justify-content: center; position: relative; margin-left: 16px; } /* ---------- Benachrichtigungs-Glocke ---------- */ .glocke-knopf { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; flex: none; background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; } .glocke-knopf:hover { text-decoration: none; } .glocke-knopf svg { width: 21px; height: 21px; } .glocke-punkt { position: absolute; top: -3px; right: -3px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; background: #e0483e; color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; box-sizing: border-box; } .kopf-zeile .glocke-knopf { margin-left: auto; } .kopf-zeile .glocke-knopf + .menue-knopf { margin-left: 10px; } .zeile.glocke-neu { background: color-mix(in srgb, var(--primaer) 8%, transparent); border-radius: 10px; } /* ---------- Seitenmenü (Drawer) für Verwaltung & Admin ---------- */ /* Einheitlicher Verwaltungs-Kopf: Logo + Club-Name links, Menü-Knopf rechts */ .klub-marke { display: inline-flex; align-items: center; gap: 12px; color: var(--auf-primaer, #fff); min-width: 0; } .klub-marke:hover { text-decoration: none; } .klub-logo { width: var(--logo-gr, 46px); height: var(--logo-gr, 46px); border-radius: var(--r-foto); object-fit: contain; background: rgba(0, 0, 0, 0.25); flex: none; } @media (min-width: 900px) { .klub-logo { width: var(--logo-gr-pc, 52px); height: var(--logo-gr-pc, 52px); transform: translate(var(--logo-x-pc, 0px), var(--logo-y-pc, 0px)); } } .klub-logo { transform: translate(var(--logo-x, 0px), var(--logo-y, 0px)); } /* Wortmarke im Querformat: Höhe bleibt, Breite läuft frei */ .klub-logo.logo-breit { width: auto !important; max-width: min(58vw, 340px); border-radius: 8px; object-fit: contain; object-position: left center; background: transparent; } .landing-logo { height: 64px; width: auto; max-width: min(80vw, 380px); object-fit: contain; display: block; margin: 0 auto 14px; } .logo-invert { filter: invert(1); } .klub-logo.logo-invert, .landing-logo.logo-invert { background: var(--primaer-invers, #ddd); padding: 4px; box-sizing: border-box; } .klub-logo.logo-breit.logo-invert { padding: 4px 10px; } .logo-blend { mix-blend-mode: screen; background: transparent !important; } .logo-invert.logo-blend { filter: invert(1); mix-blend-mode: multiply; } .klub-logo-buchstabe { display: inline-flex; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); } .klub-texte { display: flex; flex-direction: column; min-width: 0; } .klub-name { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .klub-texte .unterzeile { margin-top: 1px; } .menue-knopf { display: inline-flex; align-items: center; gap: 9px; flex: none; border: 1px solid rgba(255, 255, 255, 0.35); cursor: pointer; padding: 9px 15px; background: rgba(0, 0, 0, 0.30); backdrop-filter: blur(8px); color: #fff; border-radius: var(--r-pille); font-weight: 700; font-size: 14px; } .menue-knopf .burger { display: inline-flex; flex-direction: column; gap: 3.5px; } .menue-knopf .burger span { display: block; width: 17px; height: 2px; background: #fff; border-radius: 2px; } .menue-knopf:hover { background: rgba(0, 0, 0, 0.5); } .menue-schleier { position: fixed; inset: 0; z-index: 80; background: rgba(0, 0, 0, 0.55); opacity: 0; transition: opacity 0.2s; } .menue-schleier.offen { opacity: 1; } .seitenmenue { position: fixed; top: 0; bottom: 0; z-index: 90; width: 300px; max-width: 86vw; background: var(--karte); border-color: var(--linie); display: flex; flex-direction: column; transition: transform 0.22s ease; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; /* Oben unter der Kamera-Aussparung beginnen, sonst verdeckt sie die ersten Einträge */ padding-top: max(env(safe-area-inset-top, 0px), 12px); padding-bottom: max(env(safe-area-inset-bottom, 0px), 12px); } .menue-fuss { margin-top: auto; padding: 10px 16px 20px; border-top: 1px solid var(--linie); } .theme-wahl.klein button { padding: 9px 6px; font-size: 12px; } .theme-wahl.klein button svg { width: 16px; height: 16px; } .seitenmenue.seite-rechts { right: 0; transform: translateX(100%); border-left: 1px solid var(--linie); } .seitenmenue.seite-links { left: 0; transform: translateX(-100%); border-right: 1px solid var(--linie); } .seitenmenue.offen { transform: translateX(0); box-shadow: var(--schatten); } .menue-kopf { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 18px 18px 14px; border-bottom: 1px solid var(--linie); } .menue-kopf .marke { font-weight: 800; font-size: 16px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; } .menue-kopf .marke svg { width: 20px; height: 20px; color: var(--gruen-text); flex: none; } .menue-zu { width: 34px; height: 34px; border: none; cursor: pointer; border-radius: var(--r-pille); background: var(--karte2); color: var(--text); font-size: 15px; flex: none; } .menue-links { display: flex; flex-direction: column; padding: 10px 14px 24px; } .menue-gruppe { font-size: 11px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text3); font-weight: 700; padding: 16px 6px 6px; } .menue-block { background: var(--karte2); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 5px; display: flex; flex-direction: column; gap: 2px; } .menue-links a { display: flex; align-items: center; gap: 11px; padding: 10px 10px; color: var(--text2); font-weight: 600; font-size: 14.5px; border-radius: var(--r-pille); } .menue-links a svg { width: 18px; height: 18px; flex: none; opacity: 0.8; } .menue-links a:hover { background: var(--karte); color: var(--text); text-decoration: none; } .menue-links a.aktiv { background: var(--primaer); color: var(--auf-primaer, #fff); } .menue-links a.aktiv svg { opacity: 1; } /* ---------- Altersabfrage (18+) ---------- */ .alterspruefung { position: fixed; inset: 0; z-index: 200; background: rgba(5, 8, 7, 0.88); backdrop-filter: blur(10px); display: flex; align-items: center; justify-content: center; padding: 20px; } .alterspruefung[hidden] { display: none; } .alter-karte { position: relative; overflow: hidden; max-width: 440px; width: 100%; background: var(--karte); border: 1px solid var(--linie); padding: 30px 26px; text-align: center; box-shadow: var(--schatten); border-radius: var(--r-karte); } .alter-karte .deko { position: absolute; right: -30px; top: -30px; width: 130px; height: 130px; opacity: 0.08; pointer-events: none; } .alter-karte h2 { font-size: 21px; margin-bottom: 8px; } .alter-karte p { font-size: 14px; color: var(--text2); margin-bottom: 18px; } /* ---------- CSC-Karte (OpenStreetMap) ---------- */ .csc-karte { height: 380px; border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; } .csc-karte-hinweis { margin-top: 8px; } @media (min-width: 900px) { .csc-karte { height: 460px; } } /* ---------- Admin: Einstellungs-Raster & Aktionen-Menü ---------- */ .einstellungs-raster { display: grid; gap: 14px; } @media (min-width: 1100px) { .einstellungs-raster { grid-template-columns: 1fr 1fr; align-items: start; } } .aktionen-menue { position: relative; } .aktionen-menue summary { list-style: none; } .aktionen-menue summary::-webkit-details-marker { display: none; } .aktionen-menue .aktionen-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; min-width: 220px; display: flex; flex-direction: column; gap: 6px; padding: 10px; background: var(--karte); border: 1px solid var(--linie); box-shadow: var(--schatten); border-radius: var(--r-eingabe); text-align: left; } .aktionen-menue .aktionen-liste input { background: var(--eingabe-bg); color: var(--text); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 8px; font-size: 13px; } /* ---------- Feinschliff (modern & eckig) ---------- */ .tabelle tbody tr { transition: background 0.1s; } .tabelle tbody tr:hover td { background: color-mix(in srgb, var(--karte2) 55%, transparent); } .kachel { border-left: 3px solid var(--primaer); } .kachel .beschriftung { text-transform: uppercase; letter-spacing: 0.05em; font-size: 11px; } .karte h2 { letter-spacing: -0.01em; } .kopf .unterzeile { font-weight: 500; } /* ---------- Tutorial (kleine Karte, wandert zum jeweiligen Element) ---------- */ .tutorial { position: fixed; inset: 0; z-index: 190; pointer-events: none; } .tutorial[hidden] { display: none; } .tutorial-karte { pointer-events: auto; position: fixed; left: 50%; top: 18%; transform: translateX(-50%); width: min(320px, calc(100vw - 28px)); background: var(--karte); border: 1.5px solid var(--primaer); border-radius: var(--r-karte); padding: 16px 16px 12px; box-shadow: 0 14px 44px rgba(0, 0, 0, 0.5); } .tutorial-karte.frei { transform: none; } .tutorial-karte h2 { font-size: 15.5px; margin: 4px 0 6px; } .tutorial-karte p { font-size: 13px; } .tutorial-karte .knopf-zeile { margin-top: 12px !important; } .tutorial-nie { display: block; margin: 10px auto 0; background: none; border: none; cursor: pointer; color: var(--text3); font-size: 12px; text-decoration: underline; } .tutorial-ziel { outline: 3px solid var(--primaer); outline-offset: 2px; } /* ---------- Feed (Neuigkeiten der Clubs) ---------- */ .feed-beitrag { padding: 0; overflow: hidden; } .feed-beitrag .flex-zeile { padding: 14px 16px; } .feed-bild { width: 100%; max-height: 260px; object-fit: cover; display: block; } /* ---------- Login mit Social-Media-Spalte ---------- */ .login-raster { display: grid; gap: 14px; } .sozial-liste { display: flex; flex-direction: column; gap: 8px; } .sozial-link { display: block; padding: 11px 14px; background: var(--karte2); border: 1px solid var(--linie); border-radius: var(--r-eingabe); font-weight: 600; font-size: 14.5px; color: var(--text); } .sozial-link:hover { text-decoration: none; border-color: var(--primaer); color: var(--gruen-text); } @media (min-width: 900px) { .login-raster.mit-sozial { grid-template-columns: 2fr 1fr; align-items: start; max-width: 980px; margin: 0 auto; } } /* ---------- Website-Editor: Stil-Auswahl ---------- */ .stil-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .stil-wahl { display: flex; flex-direction: column; gap: 3px; padding: 12px; cursor: pointer; background: var(--karte2); border: 2px solid var(--linie); border-radius: var(--r-eingabe); } .stil-wahl:hover { border-color: var(--text3); } .stil-wahl.aktiv, .stil-wahl:has(input:checked) { border-color: var(--primaer); } .stil-wahl input { position: absolute; opacity: 0; } .stil-wahl .stil-name { font-weight: 700; font-size: 14.5px; } .stil-wahl .stil-hinweis { font-size: 12px; color: var(--text2); } .stil-wahl .stil-vorschau { font-size: 12px; font-weight: 600; margin-top: 4px; } .haken { display: inline-flex; color: var(--gruen-text); vertical-align: -3px; margin-left: 3px; } .haken svg { width: 18px; height: 18px; } @media (max-width: 380px) { .produkt-raster { gap: 9px; } .produkt-foto { width: 88px; height: 88px; } .kopf h1 { font-size: 26px; } } /* ---------- App-Hülle auf dem Handy: Kopf fest, Inhalt scrollt innen, Leiste fest unten. Damit ist die Position der Tab-Leiste auf JEDER Seite identisch – unabhängig von Seitenlänge und iOS-Eigenheiten mit fixed/sticky in installierten Web-Apps. ---------- */ @media (max-width: 899.98px) { /* Die Leiste schwebt über dem Inhalt – unten nur Platz lassen, damit sie nichts verdeckt. Kein starres Hüllen-Layout mehr nötig. */ body:has(.tabbar) .inhalt, body[data-rolle="mitglied"] .inhalt { padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)); } /* Der Rahmen wird an alle vier Bildschirmkanten gepinnt (fixed + inset 0): das ist unabhängig davon, wie iOS 100dvh gerade berechnet – die Leiste endet damit IMMER exakt an der Geräteunterkante, auf jeder Seite gleich. */ /* Die Leiste ist das letzte Element im gepinnten Rahmen und endet damit an der Fensterunterkante. Ihr eigenes Polster deckt die Home-Geste ab – die Beschriftungen bleiben dabei vollständig sichtbar. */ /* iOS-Standalone rendert unterhalb des Layout-Fensters NUR den Seiten- Hintergrund. Deshalb bekommt die ganze Seite die Leisten-Farbe – der Streifen unter der Leiste sieht damit aus wie ihre Verlängerung bis zur Gerätekante (der Home-Indikator „schwimmt“ darauf wie in nativen Apps). Der eigentliche Inhalt behält über .inhalt seine normale Flächenfarbe. */ html:has(.tabbar) { background: var(--karte) !important; } body:has(.tabbar) { background: var(--karte); } body:has(.tabbar) .inhalt { background: var(--bg); } } /* ---------- Desktop: aus der App-Spalte wird eine richtige Website ---------- */ .desktopnav { display: none; } @media (min-width: 900px) { .rahmen { max-width: none; } .rahmen.breit { max-width: none; } .inhalt { padding: 28px 44px 60px; } .kopf { padding: 26px 44px 30px; } .vnav { padding: 14px 44px; } .produkt-raster { grid-template-columns: repeat(4, 1fr); gap: 16px; } .kachel-raster { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } .feld-zeile { gap: 16px; } /* Untere Tab-Leiste weg, obere Navigation her */ .tabbar { display: none; } .desktopnav { display: flex; align-items: center; gap: 8px; padding: 14px 44px; border-bottom: 1px solid var(--linie); background: var(--karte); } .desktopnav .marke { font-weight: 800; font-size: 17px; letter-spacing: -0.01em; color: var(--text); margin-right: auto; display: inline-flex; align-items: center; gap: 8px; } .desktopnav .marke svg { width: 22px; height: 22px; color: var(--primaer); } .desktopnav a { color: var(--text2); font-weight: 600; font-size: 14.5px; padding: 8px 14px; border-radius: var(--r-pille); } .desktopnav a:hover { text-decoration: none; color: var(--text); background: var(--karte2); } .desktopnav a.aktiv { background: var(--primaer); color: var(--auf-primaer, #fff); } .desktopnav a svg { display: none; } .inhalt { padding-bottom: 60px; } /* Bottom-Sheets werden mittige Dialoge */ dialog.sheet { bottom: auto; margin: auto; border-radius: var(--r-karte); } .sheet-griff { display: none; } .chat-eingabe form { max-width: none; margin: 0 32px; } /* Landing auf großen Bildschirmen */ .landing-hero { padding: 96px 40px 84px; } .landing-hero h1 { font-size: 52px; } .landing-hero p { font-size: 18px; max-width: 560px; } .landing-raster { grid-template-columns: repeat(2, 1fr); gap: 16px; } .landing-raster.schritte { grid-template-columns: repeat(3, 1fr); } .landing-titel { font-size: 26px; margin-top: 10px; } } /* ========================================================================= Neue Komponenten: Testmodus, Feed (Social), Gewinnspiele, Pakete, Warenkorb, Seitenzahlen, Spaltenwahl, Dashboard, Aussehen, Verträge ========================================================================= */ /* ---------- Testmodus-Leiste (Verwaltung schaut als Mitglied) ---------- */ .testmodus-leiste { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: nowrap; white-space: nowrap; overflow: hidden; background: linear-gradient(90deg, #b45309, #d97706); color: #fff; padding: calc(3px + env(safe-area-inset-top, 0px)) 12px 3px; font-size: 11.5px; font-weight: 700; flex: none; min-height: 0; } /* Der lange Club-Name darf den Zurück-Knopf nicht aus dem Bild schieben */ .testmodus-leiste > span { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .ansicht-leiste { background: linear-gradient(90deg, #7c3aed, #a855f7); } .testmodus-leiste button { background: rgba(0, 0, 0, 0.25); color: #fff; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 999px; padding: 2px 10px; font-size: 11px; font-weight: 700; cursor: pointer; flex: none; } /* Der grüne Seiten-Kopf braucht unter der Testleiste kein eigenes Safe-Area-Polster mehr */ .testmodus-leiste ~ .kopf, .testmodus-leiste ~ * .kopf { padding-top: 16px; } .menue-testknopf { display: flex; align-items: center; gap: 11px; width: 100%; padding: 10px; color: var(--text2); font-weight: 600; font-size: 14.5px; border-radius: var(--r-pille); background: none; border: none; cursor: pointer; text-align: left; font-family: inherit; } .menue-testknopf svg { width: 18px; height: 18px; flex: none; opacity: 0.8; } .menue-testknopf:hover { background: var(--karte); color: var(--text); } /* ---------- Feed im Social-Media-Stil ---------- */ .feed-post { padding: 0; overflow: hidden; } .feed-post-kopf { display: flex; align-items: center; gap: 11px; padding: 13px 16px 11px; } .feed-post-kopf .avatar { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; flex: none; background: var(--primaer); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 17px; overflow: hidden; } .feed-post-kopf .avatar img { width: 100%; height: 100%; object-fit: cover; } .feed-post-kopf .wer { flex: 1; min-width: 0; } .feed-post-kopf .wer .name { font-weight: 750; font-size: 14.5px; } .feed-post-kopf .wer .wann { font-size: 12px; color: var(--text3); } .feed-post-bild { width: 100%; max-height: 420px; object-fit: cover; display: block; } .feed-post-text { padding: 12px 16px 4px; } .feed-post-text h3 { font-size: 16.5px; margin-bottom: 3px; letter-spacing: -0.01em; } .feed-post-text p { font-size: 14.5px; color: var(--text); } .feed-aktionen { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 10px 12px 8px; border-top: 1px solid var(--linie); margin-top: 10px; } .emoji-knopf { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--linie); background: var(--karte2); color: var(--text2); font-size: 14px; cursor: pointer; font-family: inherit; font-weight: 600; } .emoji-knopf:hover { border-color: var(--primaer); } .emoji-knopf.aktiv { background: color-mix(in srgb, var(--primaer) 16%, var(--karte)); border-color: var(--primaer); color: var(--text); } .feed-kommentare { padding: 4px 16px 12px; } .feed-kommentar { display: flex; gap: 9px; padding: 7px 0; } .feed-kommentar .avatar { width: 30px; height: 30px; border-radius: 50%; flex: none; background: var(--karte2); color: var(--text2); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; } .feed-kommentar .blase-k { background: var(--karte2); border-radius: 4px 14px 14px 14px; padding: 7px 12px; font-size: 13.5px; min-width: 0; flex: 1; } .feed-kommentar .blase-k .von { font-weight: 750; font-size: 12.5px; } .feed-kommentar .blase-k .von .club-tag { color: var(--gruen-text); font-weight: 700; } .feed-kommentar .k-loeschen { background: none; border: none; color: var(--text3); cursor: pointer; font-size: 12.5px; flex: none; align-self: center; padding: 6px 8px; border-radius: var(--r-pille); white-space: nowrap; } .feed-kommentar .k-loeschen:hover { color: var(--gefahr); background: var(--karte2); } .feed-kommentar-form { display: flex; gap: 8px; margin-top: 6px; } .feed-kommentar-form input { flex: 1; background: var(--eingabe-bg); border: 1px solid var(--linie); color: var(--text); border-radius: 999px; padding: 9px 15px; font-size: 14px; min-width: 0; } .feed-kommentar-form button { width: 38px; height: 38px; border-radius: 50%; border: none; background: var(--primaer); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex: none; } .feed-kommentar-form button svg { width: 17px; height: 17px; } .mehr-kommentare { background: none; border: none; color: var(--text2); font-size: 13px; cursor: pointer; padding: 4px 0; font-weight: 600; } /* ---------- Gewinnspiele (5 Karten-Stile) ---------- */ .gewinnspiel { border-radius: var(--r-karte); padding: 22px 20px; margin-bottom: 14px; position: relative; overflow: hidden; border: 1px solid var(--linie); } .gewinnspiel .gs-etikett { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; padding: 4px 12px; border-radius: 999px; margin-bottom: 12px; background: rgba(255, 255, 255, 0.18); backdrop-filter: blur(4px); } .gewinnspiel h3 { font-size: 21px; letter-spacing: -0.01em; line-height: 1.25; margin-bottom: 8px; } .gewinnspiel .gs-text { font-size: 14px; opacity: 0.92; } .gewinnspiel .gs-preis { margin-top: 14px; padding: 11px 14px; border-radius: var(--r-eingabe); background: rgba(255, 255, 255, 0.14); font-weight: 700; font-size: 14.5px; display: flex; gap: 8px; align-items: center; backdrop-filter: blur(4px); } .gewinnspiel .gs-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; flex-wrap: wrap; font-size: 13px; } .gewinnspiel .knopf { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25); } .gewinnspiel.gs-beendet { filter: saturate(0.35); } .gs-konfetti { background: linear-gradient(135deg, #7c3aed, #db2777 55%, #f59e0b); color: #fff; border: none; } .gs-konfetti::before { content: ""; position: absolute; inset: 0; opacity: 0.5; pointer-events: none; background-image: radial-gradient(#fff 1.6px, transparent 1.6px), radial-gradient(#ffd166 1.6px, transparent 1.6px); background-size: 46px 46px, 34px 34px; background-position: 0 0, 17px 23px; } .gs-golden { background: linear-gradient(140deg, #2b2110, #4d3a12 45%, #8a6b1f); color: #fdf3d7; border: 1px solid #b8952f; } .gs-golden::after { content: "★"; position: absolute; right: -14px; top: -26px; font-size: 130px; opacity: 0.12; color: #ffd766; } .gs-golden .gs-etikett { background: #b8952f; color: #221a08; } .gs-neon { background: #0b1020; color: #e8f6ff; border: 1px solid #26f0c8; box-shadow: inset 0 0 60px rgba(38, 240, 200, 0.12); } .gs-neon h3 { color: #26f0c8; text-shadow: 0 0 18px rgba(38, 240, 200, 0.55); } .gs-neon .gs-etikett { background: rgba(38, 240, 200, 0.15); color: #26f0c8; border: 1px solid #26f0c8; } .gs-neon .gs-preis { background: rgba(255, 60, 172, 0.14); border: 1px solid #ff3cac; color: #ffc4e5; } .gs-natur { background: linear-gradient(150deg, #dcefe2, #b9dcc4); color: #163a26; } .gs-natur .gs-etikett { background: #163a26; color: #dcefe2; } .gs-natur .gs-preis { background: rgba(255, 255, 255, 0.6); } .gs-natur::after { content: "🌿"; position: absolute; right: -8px; bottom: -18px; font-size: 110px; opacity: 0.18; transform: rotate(-14deg); } .gs-minimal { background: var(--karte); color: var(--text); border: 2px solid var(--text); } .gs-minimal h3 { font-size: 26px; text-transform: uppercase; letter-spacing: 0.02em; } .gs-minimal .gs-etikett { background: var(--text); color: var(--karte); } .gs-minimal .gs-preis { background: var(--karte2); } .gs-ideen { display: grid; gap: 10px; } .gs-idee { text-align: left; background: var(--karte2); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 12px 14px; cursor: pointer; color: var(--text); font-family: inherit; display: block; text-decoration: none; } .gs-idee:hover { border-color: var(--primaer); text-decoration: none; } .gs-idee .i-titel { font-weight: 700; font-size: 14px; } .gs-idee .i-unter { font-size: 12.5px; color: var(--text2); margin-top: 2px; } /* Löschen-Knopf auf den bunten Gewinnspiel-Karten: feste Farben, in JEDEM Theme lesbar (vorher transparent-rot auf dunklen Karten = unsichtbar) */ .gewinnspiel .gs-loeschen { background: #ffffff; color: #b91c1c; border: 1.5px solid #b91c1c; font-weight: 800; } .gewinnspiel .gs-loeschen:hover { background: #fee2e2; filter: none; } /* ---------- Pakete-Seite (Preiskarten) ---------- */ .paket-raster { display: grid; grid-template-columns: 1fr; gap: 14px; } @media (min-width: 700px) { .paket-raster { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } } .paket-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 22px 20px; display: flex; flex-direction: column; position: relative; } .paket-karte.aktuell { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); } .paket-karte .p-name { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; } .paket-karte .p-preis { margin: 10px 0 2px; font-size: 30px; font-weight: 800; letter-spacing: -0.02em; } .paket-karte .p-preis .einheit { font-size: 14px; font-weight: 600; color: var(--text2); } .paket-karte .p-einmalig { font-size: 13px; color: var(--text2); } .paket-karte .p-beschreibung { font-size: 13.5px; color: var(--text2); margin: 10px 0 12px; } .paket-karte ul { list-style: none; margin: 0 0 16px; display: grid; gap: 7px; } .paket-karte li { display: flex; gap: 8px; font-size: 13.5px; align-items: flex-start; } .paket-karte li svg { width: 16px; height: 16px; flex: none; color: var(--gruen-text); margin-top: 2px; } .paket-karte li.fehlt { color: var(--text3); } .paket-karte li.fehlt svg { color: var(--text3); } .paket-karte .p-fuss { margin-top: auto; } .paket-karte .p-laufzeit { font-size: 11.5px; color: var(--text3); margin-top: 8px; } .paket-badge { position: absolute; top: -11px; right: 14px; background: var(--primaer); color: #fff; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 12px; border-radius: 999px; } .limit-balken { height: 9px; border-radius: 999px; background: var(--daten-spur); overflow: hidden; margin: 8px 0 6px; } .limit-balken > div { height: 100%; border-radius: 999px; background: var(--primaer); } .limit-balken.voll > div { background: var(--gefahr); } /* ---------- Warenkorb im Shop-Stil (Otto/Amazon-artig) ---------- */ .korb-raster { display: grid; gap: 14px; } @media (min-width: 900px) { .korb-raster { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .korb-summe-karte { position: sticky; top: 20px; } } .korb-artikel { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--linie); } .korb-artikel:last-child { border-bottom: none; } .korb-artikel .foto { width: 84px; height: 84px; border-radius: var(--r-foto); object-fit: cover; flex: none; background: var(--karte2); display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: var(--text3); overflow: hidden; } .korb-artikel .foto img { width: 100%; height: 100%; object-fit: cover; } .korb-artikel .k-mitte { flex: 1; min-width: 0; } .korb-artikel .k-name { font-weight: 750; font-size: 15.5px; } .korb-artikel .k-details { font-size: 12.5px; color: var(--text2); margin: 2px 0 10px; } .korb-artikel .k-preis { font-weight: 800; font-size: 16px; text-align: right; flex: none; } .korb-artikel .k-einzel { font-size: 11.5px; color: var(--text3); font-weight: 400; } .korb-artikel .stepper button { width: 36px; height: 36px; font-size: 18px; } .korb-artikel .stepper input { width: 64px; font-size: 15px; height: 36px; } .k-entfernen { background: none; border: none; color: var(--text3); font-size: 12.5px; cursor: pointer; text-decoration: underline; padding: 4px 0; } .k-entfernen:hover { color: var(--gefahr); } .korb-summe-karte .summe-zeile { display: flex; justify-content: space-between; font-size: 14px; color: var(--text2); padding: 5px 0; } .korb-summe-karte .summe-gesamt { display: flex; justify-content: space-between; align-items: baseline; font-size: 15px; font-weight: 700; border-top: 1px solid var(--linie); margin-top: 8px; padding-top: 12px; } .korb-summe-karte .summe-gesamt .betrag { font-size: 24px; letter-spacing: -0.02em; } .korb-vertrauen { display: grid; gap: 8px; margin-top: 14px; } .korb-vertrauen span { display: flex; gap: 8px; align-items: center; font-size: 12.5px; color: var(--text2); } .korb-vertrauen svg { width: 15px; height: 15px; flex: none; color: var(--gruen-text); } /* Schwebender Warenkorb-Knopf im Shop */ .korb-schwebend { position: absolute; right: 16px; bottom: 14px; z-index: 35; display: inline-flex; align-items: center; gap: 8px; background: var(--primaer); color: #fff; border-radius: 999px; padding: 13px 20px; font-weight: 800; font-size: 14.5px; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); text-decoration: none; } .korb-schwebend:hover { text-decoration: none; filter: brightness(1.07); } .korb-schwebend svg { width: 19px; height: 19px; } .korb-schwebend .anzahl { background: #fff; color: var(--sekundaer); border-radius: 999px; min-width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 12.5px; padding: 0 6px; } body:has(.tabbar) .korb-schwebend { position: fixed; bottom: calc(106px + env(safe-area-inset-bottom, 0px)); } @media (min-width: 900px) { .korb-schwebend { position: fixed; bottom: 26px; right: 30px; } } /* ---------- Seitenzahlen für Tabellen & Listen ---------- */ .seiten-leiste { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; padding: 10px 2px 2px; margin-top: 6px; border-top: 1px solid var(--linie); } .seiten-leiste .s-info { font-size: 12.5px; color: var(--text2); } .seiten-leiste .s-rechts { display: flex; align-items: center; gap: 6px; } .seiten-leiste select { padding: 6px 30px 6px 10px; font-size: 12.5px; background-size: 13px; } .seiten-leiste button { min-width: 32px; height: 32px; border-radius: var(--r-pille); border: 1px solid var(--linie); background: var(--karte2); color: var(--text); cursor: pointer; font-size: 14px; font-weight: 700; } .seiten-leiste button:disabled { opacity: 0.35; cursor: default; } .seiten-leiste .s-seite { font-size: 12.5px; color: var(--text2); padding: 0 4px; white-space: nowrap; } /* ---------- Spaltenwahl für Tabellen ---------- */ .spalten-wahl { position: relative; display: inline-block; } .spalten-wahl > button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; font-size: 13px; font-weight: 600; color: var(--text2); background: var(--karte2); border: 1px solid var(--linie); border-radius: var(--r-pille); cursor: pointer; font-family: inherit; } .spalten-wahl > button:hover { border-color: var(--primaer); color: var(--text); } .spalten-wahl .spalten-liste { position: absolute; right: 0; top: calc(100% + 6px); z-index: 25; min-width: 220px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-eingabe); box-shadow: var(--schatten); padding: 8px; display: none; } .spalten-wahl.offen .spalten-liste { display: block; } .spalten-wahl .spalten-liste label { display: flex; align-items: center; gap: 9px; padding: 7px 8px; font-size: 13.5px; border-radius: var(--r-pille); cursor: pointer; } .spalten-wahl .spalten-liste label:hover { background: var(--karte2); } th[data-versteckt], td[data-versteckt] { display: none; } /* ---------- Dashboard-Feinschliff ---------- */ .kachel { display: flex; align-items: center; gap: 13px; } .kachel .k-zeichen { width: 42px; height: 42px; border-radius: var(--r-eingabe); flex: none; background: color-mix(in srgb, var(--primaer) 14%, transparent); color: var(--gruen-text); display: flex; align-items: center; justify-content: center; } .kachel .k-zeichen svg { width: 21px; height: 21px; } .hinweis-banner { display: flex; align-items: center; gap: 12px; padding: 13px 16px; margin-bottom: 12px; border-radius: var(--r-eingabe); font-size: 14px; font-weight: 600; text-decoration: none; background: color-mix(in srgb, var(--primaer) 12%, var(--karte)); border: 1px solid var(--primaer); color: var(--text); } .hinweis-banner:hover { text-decoration: none; filter: brightness(1.04); } .hinweis-banner svg { width: 20px; height: 20px; flex: none; color: var(--gruen-text); } .hinweis-banner .pfeil { margin-left: auto; color: var(--gruen-text); font-weight: 800; } .hinweis-banner.warnung { background: var(--warnung-bg); border-color: var(--warnung); } .hinweis-banner.warnung svg { color: var(--warnung); } /* ---------- Aussehen / Theme-Auswahl (große Vorschau-Kacheln) ---------- */ .aussehen-raster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .aussehen-kachel { border: 2px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; cursor: pointer; background: var(--karte); padding: 0; font-family: inherit; text-align: center; } .aussehen-kachel.aktiv { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); } .aussehen-kachel .vorschau { height: 74px; position: relative; } .aussehen-kachel .vorschau .mini-kopf { height: 26px; background: var(--primaer); } .aussehen-kachel .vorschau .mini-karte { margin: 8px 10px 0; height: 14px; border-radius: 4px; } .aussehen-kachel.a-hell .vorschau { background: #f2f5f3; } .aussehen-kachel.a-hell .mini-karte { background: #fff; border: 1px solid #dde4df; } .aussehen-kachel.a-dunkel .vorschau { background: #0c0f0e; } .aussehen-kachel.a-dunkel .mini-karte { background: #171b19; border: 1px solid #2a302d; } .aussehen-kachel.a-system .vorschau { background: linear-gradient(105deg, #f2f5f3 50%, #0c0f0e 50%); } .aussehen-kachel.a-system .mini-karte { background: linear-gradient(105deg, #fff 50%, #171b19 50%); border: 1px solid var(--linie); } .aussehen-kachel .a-name { display: block; padding: 9px 4px 10px; font-size: 13px; font-weight: 700; color: var(--text); } /* Radius-/Schrift-Vorschau in den Plattform-Einstellungen */ .stil-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .stil-kachel { border: 2px solid var(--linie); border-radius: var(--r-eingabe); padding: 12px; cursor: pointer; background: var(--karte2); display: flex; flex-direction: column; gap: 8px; } .stil-kachel:hover { border-color: var(--text3); } .stil-kachel:has(input:checked) { border-color: var(--primaer); } .stil-kachel input { position: absolute; opacity: 0; } .stil-kachel .demo { height: 34px; background: var(--karte); border: 1px solid var(--linie); position: relative; } .stil-kachel .demo::after { content: ""; position: absolute; left: 8px; top: 8px; width: 42px; height: 18px; background: var(--primaer); } .stil-kachel[data-r="eckig"] .demo, .stil-kachel[data-r="eckig"] .demo::after { border-radius: 0; } .stil-kachel[data-r="weich"] .demo { border-radius: 8px; } .stil-kachel[data-r="weich"] .demo::after { border-radius: 6px; } .stil-kachel[data-r="rund"] .demo { border-radius: 14px; } .stil-kachel[data-r="rund"] .demo::after { border-radius: 999px; } .stil-kachel .s-name { font-size: 13px; font-weight: 700; } .stil-kachel .s-probe { font-size: 15px; color: var(--text2); } /* ---------- Abschnitts-Navigation auf langen Einstellungs-Seiten ---------- */ .abschnitt-nav { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 12px; scrollbar-width: none; position: sticky; top: 0; z-index: 25; background: var(--bg); } .abschnitt-nav::-webkit-scrollbar { display: none; } .abschnitt-nav a { flex: none; padding: 8px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; color: var(--text2); background: var(--karte); border: 1px solid var(--linie); } .abschnitt-nav a:hover { text-decoration: none; border-color: var(--primaer); color: var(--text); } .abschnitt-titel { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; } .abschnitt-titel::after { content: ""; flex: 1; border-top: 1px solid var(--linie); } .abschnitt-titel:first-child { margin-top: 0; } /* ---------- Vertrags-/Rechtstext-Ansicht ---------- */ .vertrag-blatt { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 26px 22px; white-space: pre-wrap; font-size: 14px; line-height: 1.65; } @media (min-width: 900px) { .vertrag-blatt { padding: 40px 48px; max-width: 860px; } } /* ---------- Mitgliedsausweis im Vollbild (Wallet-artige Karte) ---------- */ .ausweis-vollbild { position: fixed; inset: 0; z-index: 210; background: rgba(4, 7, 6, 0.92); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 22px; } .ausweis-vollbild[hidden] { display: none; } .ausweis-vollbild .wallet-karte { background: #fff; color: #10241a; border-radius: 22px; padding: 26px 24px; width: min(360px, 100%); text-align: center; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .ausweis-vollbild .wallet-karte img.qr-gross { width: 100%; max-width: 260px; display: block; margin: 14px auto; } .ausweis-vollbild .wallet-karte .w-name { font-size: 19px; font-weight: 800; } .ausweis-vollbild .wallet-karte .w-nummer { font-family: "SF Mono", ui-monospace, Menlo, monospace; font-size: 15px; letter-spacing: 0.08em; margin-top: 2px; } .ausweis-vollbild .wallet-karte .w-club { font-size: 13px; color: #4a5d52; margin-top: 2px; } /* Abschnitts-Navigation als Reiter: aktiver Chip + einspaltige Ansicht */ .abschnitt-nav a.aktiv { background: var(--primaer); border-color: var(--primaer); color: var(--auf-primaer, #fff); } .einstellungs-raster.tab-modus { grid-template-columns: 1fr; max-width: 880px; } /* ---------- Galerie zur Stil-Auswahl (Admin + Club-Profil) ---------- */ .app-stil-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; } .app-stil-kachel { position: relative; border: 2px solid var(--linie); border-radius: var(--r-eingabe); overflow: hidden; cursor: pointer; background: var(--karte2); display: flex; flex-direction: column; } .app-stil-kachel:hover { border-color: var(--text3); } .app-stil-kachel:has(input:checked) { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); } .app-stil-kachel input { position: absolute; opacity: 0; } .app-stil-kachel .mini { height: 58px; position: relative; } .app-stil-kachel .mini .m-kopf { height: 24px; } .app-stil-kachel .mini .m-karte { margin: 7px 9px 0; height: 13px; background: rgba(255,255,255,0.85); border: 1px solid rgba(0,0,0,0.12); } .app-stil-kachel .mini .m-knopf { position: absolute; right: 9px; bottom: 7px; width: 26px; height: 9px; } .app-stil-kachel .a-text { padding: 8px 10px 10px; } .app-stil-kachel .a-name { display: block; font-weight: 750; font-size: 13.5px; color: var(--text); } .app-stil-kachel .a-hinweis { display: block; font-size: 11.5px; color: var(--text2); margin-top: 1px; } /* ========================================================================= 16 App-Design-Stile: jeder Stil ist ein eigenes DESIGN (Kopf, Karten, Knöpfe, Typografie) nach dem Muster der Website-Stile – nicht nur Farben. Farben/Ecken/Schrift kommen als Inline-Variablen aus app.py (APP_STILE). ========================================================================= */ [data-stil="klassisch"] { --bg: #0c1413; --karte: #151e1d; --karte2: #1c2626; --linie: #263130; --daten-spur: #1e3a31; } [data-stil="editorial"] { --bg: #131210; --karte: #1c1b1a; --karte2: #232423; --linie: #2f2e2c; --daten-spur: #3e3226; } [data-stil="bold"] { --bg: #0c0e10; --karte: #15181a; --karte2: #1c2023; --linie: #25292c; --daten-spur: #5a4d1c; } [data-stil="warm"] { --bg: #1a1310; --karte: #231d1a; --karte2: #2a2523; --linie: #39312d; --daten-spur: #583c2c; } [data-stil="mono"] { --bg: #0a0c0e; --karte: #131617; --karte2: #1a1e20; --linie: #222628; --daten-spur: #1c1f21; } [data-stil="studio"] { --bg: #0a0c0e; --karte: #131617; --karte2: #1a1e20; --linie: #222628; --daten-spur: #191e25; } [data-stil="nacht"] { --bg: #0d1118; --karte: #161a22; --karte2: #1d232b; --linie: #262d37; --daten-spur: #24304c; } [data-stil="natur"] { --bg: #0e1412; --karte: #171e1b; --karte2: #1f2624; --linie: #29312e; --daten-spur: #2c3d2e; } [data-stil="beton"] { --bg: #0e1012; --karte: #171a1c; --karte2: #1e2225; --linie: #282b2e; --daten-spur: #2d3034; } [data-stil="verspielt"] { --bg: #161225; --karte: #1f1b2f; --karte2: #262438; --linie: #342e4a; --daten-spur: #4e2258; } [data-stil="abend"] { --bg: #0b1111; --karte: #141b1b; --karte2: #1c2324; --linie: #242d2e; --daten-spur: #1d332c; } [data-stil="magazin"] { --bg: #0a0c0e; --karte: #131617; --karte2: #1a1e20; --linie: #222628; --daten-spur: #1c1f21; } [data-stil="frisch"] { --bg: #0b171c; --karte: #142126; --karte2: #1c292f; --linie: #24363d; --daten-spur: #17434f; } [data-stil="kampagne"] { --bg: #190e10; --karte: #22181a; --karte2: #292023; --linie: #382a2c; --daten-spur: #562225; } [data-stil="klar"] { --bg: #0d121f; --karte: #161c29; --karte2: #1d2432; --linie: #272f41; --daten-spur: #1f3560; } /* Helle Ansicht der Stile (explizit hell + System-hell) */ [data-theme="hell"][data-stil="klassisch"] { --bg: #e9eeed; --karte: #ffffff; --karte2: #e4eae9; --linie: #ccd6d5; --daten-spur: #bcd1c9; } [data-theme="hell"][data-stil="editorial"] { --bg: #f6f1e7; --karte: #fffdf7; --karte2: #efe7d6; --linie: #e0d5bd; --daten-spur: #d3cbc2; } [data-theme="hell"][data-stil="bold"] { --bg: #f3f1e9; --karte: #ffffff; --karte2: #eeede5; --linie: #dedcce; --daten-spur: #e8dfba; } [data-theme="hell"][data-stil="warm"] { --bg: #f2eeec; --karte: #ffffff; --karte2: #edeae8; --linie: #ddd7d3; --daten-spur: #e6d2c6; } [data-theme="hell"][data-stil="mono"] { --bg: #f7f7f7; --karte: #ffffff; --karte2: #efefef; --linie: #dcdcdc; --daten-spur: #bbbdbe; } [data-theme="hell"][data-stil="studio"] { --bg: #ffffff; --karte: #ffffff; --karte2: #f4f4f4; --linie: #e4e4e4; --daten-spur: #b9bdc1; } [data-theme="hell"][data-stil="nacht"] { --bg: #eaecf1; --karte: #ffffff; --karte2: #e5e8ed; --linie: #ced3dd; --daten-spur: #c1cadd; } [data-theme="hell"][data-stil="natur"] { --bg: #f2eee1; --karte: #fcfaf2; --karte2: #eae5d4; --linie: #dcd5c0; --daten-spur: #c6d3c7; } [data-theme="hell"][data-stil="beton"] { --bg: #ebeced; --karte: #ffffff; --karte2: #e6e8ea; --linie: #d0d3d6; --daten-spur: #c7c9cc; } [data-theme="hell"][data-stil="verspielt"] { --bg: #f0eaf3; --karte: #ffffff; --karte2: #ece6f0; --linie: #dacfe1; --daten-spur: #dfc0e6; } [data-theme="hell"][data-stil="abend"] { --bg: #e8ecec; --karte: #ffffff; --karte2: #e4e9e8; --linie: #ccd4d3; --daten-spur: #bbccc6; } [data-theme="hell"][data-stil="magazin"] { --bg: #ffffff; --karte: #ffffff; --karte2: #f2f2f2; --linie: #d9d9d9; --daten-spur: #babdbe; } [data-theme="hell"][data-stil="frisch"] { --bg: #e7eff2; --karte: #ffffff; --karte2: #e2ebee; --linie: #cad9de; --daten-spur: #b7d7df; } [data-theme="hell"][data-stil="kampagne"] { --bg: #f2eaeb; --karte: #ffffff; --karte2: #ede6e7; --linie: #ddcfd1; --daten-spur: #e5c0c0; } [data-theme="hell"][data-stil="klar"] { --bg: #e9edf4; --karte: #ffffff; --karte2: #e4e9f1; --linie: #ccd5e3; --daten-spur: #bdcdec; } @media (prefers-color-scheme: light) { [data-theme="system"][data-stil="klassisch"] { --bg: #e9eeed; --karte: #ffffff; --karte2: #e4eae9; --linie: #ccd6d5; --daten-spur: #bcd1c9; } [data-theme="system"][data-stil="editorial"] { --bg: #f6f1e7; --karte: #fffdf7; --karte2: #efe7d6; --linie: #e0d5bd; --daten-spur: #d3cbc2; } [data-theme="system"][data-stil="bold"] { --bg: #f3f1e9; --karte: #ffffff; --karte2: #eeede5; --linie: #dedcce; --daten-spur: #e8dfba; } [data-theme="system"][data-stil="warm"] { --bg: #f2eeec; --karte: #ffffff; --karte2: #edeae8; --linie: #ddd7d3; --daten-spur: #e6d2c6; } [data-theme="system"][data-stil="mono"] { --bg: #f7f7f7; --karte: #ffffff; --karte2: #efefef; --linie: #dcdcdc; --daten-spur: #bbbdbe; } [data-theme="system"][data-stil="studio"] { --bg: #ffffff; --karte: #ffffff; --karte2: #f4f4f4; --linie: #e4e4e4; --daten-spur: #b9bdc1; } [data-theme="system"][data-stil="nacht"] { --bg: #eaecf1; --karte: #ffffff; --karte2: #e5e8ed; --linie: #ced3dd; --daten-spur: #c1cadd; } [data-theme="system"][data-stil="natur"] { --bg: #f2eee1; --karte: #fcfaf2; --karte2: #eae5d4; --linie: #dcd5c0; --daten-spur: #c6d3c7; } [data-theme="system"][data-stil="beton"] { --bg: #ebeced; --karte: #ffffff; --karte2: #e6e8ea; --linie: #d0d3d6; --daten-spur: #c7c9cc; } [data-theme="system"][data-stil="verspielt"] { --bg: #f0eaf3; --karte: #ffffff; --karte2: #ece6f0; --linie: #dacfe1; --daten-spur: #dfc0e6; } [data-theme="system"][data-stil="abend"] { --bg: #e8ecec; --karte: #ffffff; --karte2: #e4e9e8; --linie: #ccd4d3; --daten-spur: #bbccc6; } [data-theme="system"][data-stil="magazin"] { --bg: #ffffff; --karte: #ffffff; --karte2: #f2f2f2; --linie: #d9d9d9; --daten-spur: #babdbe; } [data-theme="system"][data-stil="frisch"] { --bg: #e7eff2; --karte: #ffffff; --karte2: #e2ebee; --linie: #cad9de; --daten-spur: #b7d7df; } [data-theme="system"][data-stil="kampagne"] { --bg: #f2eaeb; --karte: #ffffff; --karte2: #ede6e7; --linie: #ddcfd1; --daten-spur: #e5c0c0; } [data-theme="system"][data-stil="klar"] { --bg: #e9edf4; --karte: #ffffff; --karte2: #e4e9f1; --linie: #ccd5e3; --daten-spur: #bdcdec; } } /* ---- Flache, helle Köpfe (Editorial, Studio, Magazin): Text statt Weiß ---- */ [data-stil="editorial"] .kopf, [data-stil="studio"] .kopf, [data-stil="magazin"] .kopf { background: var(--bg); color: var(--text); } [data-stil="editorial"] .kopf a, [data-stil="studio"] .kopf a, [data-stil="magazin"] .kopf a, [data-stil="editorial"] .klub-marke, [data-stil="studio"] .klub-marke, [data-stil="magazin"] .klub-marke { color: var(--text); } [data-stil="editorial"] .kopf .such-feld, [data-stil="studio"] .kopf .such-feld, [data-stil="magazin"] .kopf .such-feld { background: var(--karte2); color: var(--text); border: 1px solid var(--linie); } [data-stil="editorial"] .kopf .such-feld::placeholder, [data-stil="studio"] .kopf .such-feld::placeholder, [data-stil="magazin"] .kopf .such-feld::placeholder { color: var(--text3); } [data-stil="editorial"] .klub-logo-buchstabe, [data-stil="studio"] .klub-logo-buchstabe, [data-stil="magazin"] .klub-logo-buchstabe { color: var(--text); border-color: var(--linie); } /* ---- KLASSISCH: ruhig, dezente Schatten ---- */ [data-stil="klassisch"] .karte { box-shadow: 0 1px 3px rgba(10, 25, 15, 0.06); } /* ---- EDITORIAL: Serifen + Doppellinie wie ein Feuilleton ---- */ [data-stil="editorial"] .kopf { border-bottom: 3px double var(--text); border-radius: 0; } [data-stil="editorial"] h1, [data-stil="editorial"] h2, [data-stil="editorial"] h3, [data-stil="editorial"] .zeile-titel, [data-stil="editorial"] .klub-name, [data-stil="editorial"] .kachel .wert { font-family: Georgia, "Times New Roman", serif; } [data-stil="editorial"] .karte { border: none; border-top: 1px solid var(--linie); border-radius: 0; } [data-stil="editorial"] .kachel { border: none; border-top: 2px solid var(--primaer); border-radius: 0; } [data-stil="editorial"] .knopf { border-radius: 0; } /* ---- BOLD: riesige Versalien, dicke Kanten, Amber-CTA auf Schwarz ---- */ [data-stil="bold"] .kopf { background: #131313; } [data-stil="bold"] .kopf h1 { font-size: 36px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } [data-stil="bold"] h2 { text-transform: uppercase; letter-spacing: 0.03em; } [data-stil="bold"] .karte, [data-stil="bold"] .kachel { border-width: 2px; border-color: color-mix(in srgb, var(--text) 50%, transparent); } [data-stil="bold"] .knopf { color: #131313; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; } [data-stil="bold"] .knopf.zart, [data-stil="bold"] .knopf.gefahr { color: var(--text); text-transform: none; } [data-stil="bold"] .badge.gruen, [data-stil="bold"] .chip.aktiv { color: #131313; } [data-stil="bold"] .tabbar a.aktiv { color: var(--primaer); } [data-stil="bold"] .menue-links a.aktiv { color: #131313; } /* ---- WARM: keine Linien, weiche Schatten, extra rund ---- */ [data-stil="warm"] .kopf { border-radius: 0 0 34px 34px; } [data-stil="warm"] .karte, [data-stil="warm"] .kachel { border: none; box-shadow: 0 10px 28px rgba(150, 80, 30, 0.12); } [data-stil="warm"] .chip, [data-stil="warm"] .knopf { border-radius: 999px; } /* ---- MONO: Schreibmaschine, gestrichelte Kästen, alles eckig ---- */ [data-stil="mono"] .kopf { background: #121212; border-radius: 0; } [data-stil="mono"] .karte, [data-stil="mono"] .kachel { border-style: dashed; border-radius: 0; } [data-stil="mono"] .knopf, [data-stil="mono"] .chip { text-transform: uppercase; letter-spacing: 0.07em; border-radius: 0; } [data-stil="mono"] .badge, [data-stil="mono"] .status-pille { border-radius: 0; } /* ---- STUDIO: Haarlinien statt Karten, federleichte Typo ---- */ [data-stil="studio"] .kopf { border-bottom: 1px solid var(--linie); border-radius: 0; } [data-stil="studio"] .kopf h1 { font-weight: 300; font-size: 32px; letter-spacing: -0.02em; } [data-stil="studio"] .karte { background: transparent; border: none; border-bottom: 1px solid var(--linie); border-radius: 0; } [data-stil="studio"] .kachel { background: transparent; border: none; border-left: 1px solid var(--linie); border-radius: 0; } [data-stil="studio"] .knopf:not(.gefahr) { background: transparent; border: 1.5px solid var(--text); color: var(--text); border-radius: 0; } [data-stil="studio"] .chip { background: transparent; border-radius: 0; } [data-stil="studio"] .chip.aktiv { background: var(--text); border-color: var(--text); color: var(--bg); } /* ---- NACHT: tiefes Blau, akzentuierte Kanten ---- */ [data-stil="nacht"] .kopf { background: linear-gradient(150deg, #3554a8, #111c40); } [data-stil="nacht"] .karte { border-left: 3px solid var(--primaer); } [data-stil="nacht"] .kachel { border-left: 3px solid var(--primaer); } /* ---- NATUR: cremiges Papier, sanfte grüne Schatten ---- */ [data-stil="natur"] .kopf { background: linear-gradient(160deg, #5d8f54, #2d5228); border-radius: 0 0 24px 24px; } [data-stil="natur"] .karte { border-color: transparent; box-shadow: 0 6px 18px rgba(60, 90, 50, 0.10); } [data-stil="natur"] .kachel { border-left-color: var(--primaer); } /* ---- BETON: Versalien + harte Offset-Schatten, null Radius ---- */ [data-stil="beton"] .kopf { background: #3f3f46; border-radius: 0; } [data-stil="beton"] .kopf h1, [data-stil="beton"] h2 { text-transform: uppercase; letter-spacing: 0.04em; } [data-stil="beton"] .karte, [data-stil="beton"] .kachel { border-radius: 0; border: 1.5px solid color-mix(in srgb, var(--text) 40%, transparent); box-shadow: 5px 5px 0 color-mix(in srgb, var(--text) 18%, transparent); } [data-stil="beton"] .knopf { border-radius: 0; box-shadow: 4px 4px 0 color-mix(in srgb, var(--text) 25%, transparent); } /* ---- VERSPIELT: bunter Verlaufskopf, schräge Akzente ---- */ [data-stil="verspielt"] .kopf { background: linear-gradient(120deg, #f59e0b, #ec4899 52%, #8b5cf6); } [data-stil="verspielt"] .kachel .k-zeichen { transform: rotate(-6deg); } [data-stil="verspielt"] .badge { transform: rotate(-2deg); } [data-stil="verspielt"] .knopf, [data-stil="verspielt"] .chip { border-radius: 999px; } [data-stil="verspielt"] .karte { border-width: 2px; } [data-stil="verspielt"] .zeile .symbol, [data-stil="verspielt"] .produkt-foto { transform: rotate(-2deg); } /* ---- ABEND: edles Dunkelgrün, Serifen, Gold ---- */ [data-stil="abend"] { --akzent: #d4af37; } [data-stil="abend"] .kopf { background: linear-gradient(155deg, #14432f, #082015); } [data-stil="abend"] h1, [data-stil="abend"] h2, [data-stil="abend"] h3, [data-stil="abend"] .klub-name, [data-stil="abend"] .zeile-titel { font-family: Georgia, "Times New Roman", serif; } [data-stil="abend"] .karte { border-color: color-mix(in srgb, #d4af37 26%, var(--linie)); } [data-stil="abend"] .badge.gruen { background: #d4af37; color: #1a1206; } [data-stil="abend"] .kachel { border-left-color: #d4af37; } /* ---- MAGAZIN: Zeitungslinien, Serifen-Schlagzeilen ---- */ [data-stil="magazin"] .kopf { border-bottom: 4px solid var(--text); border-radius: 0; } [data-stil="magazin"] h1, [data-stil="magazin"] h2, [data-stil="magazin"] .klub-name { font-family: Georgia, "Times New Roman", serif; } [data-stil="magazin"] .karte { border: none; border-top: 3px solid var(--text); border-radius: 0; } [data-stil="magazin"] .karte h2 { border-bottom: 1px solid var(--linie); padding-bottom: 6px; } [data-stil="magazin"] .kachel { border: 1px solid var(--text); border-radius: 0; } [data-stil="magazin"] .knopf { border-radius: 0; } /* ---- FRISCH: Verläufe auf Kopf und Knöpfen ---- */ [data-stil="frisch"] .kopf { background: linear-gradient(130deg, #0891b2, #22c55e); } [data-stil="frisch"] .knopf:not(.zart):not(.gefahr):not(.hell) { background: linear-gradient(90deg, #0891b2, #16a34a); } [data-stil="frisch"] .kachel { border-left: none; border-top: 3px solid var(--primaer); } [data-stil="frisch"] .chip.aktiv { background: linear-gradient(90deg, #0891b2, #16a34a); border-color: transparent; } /* ---- KAMPAGNE: Plakat – volle Farbfläche, fette Typo ---- */ [data-stil="kampagne"] .kopf { background: var(--primaer); border-radius: 0; } [data-stil="kampagne"] .kopf h1 { font-size: 38px; font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; } [data-stil="kampagne"] .karte { border: 2px solid color-mix(in srgb, var(--text) 55%, transparent); border-radius: 0; } [data-stil="kampagne"] .kachel { border: 2px solid color-mix(in srgb, var(--text) 55%, transparent); border-radius: 0; border-left-width: 2px; } [data-stil="kampagne"] .knopf { border-radius: 0; text-transform: uppercase; font-weight: 800; } /* ---- KLAR: flach, businessfreundlich ---- */ [data-stil="klar"] .kopf { background: var(--primaer); } [data-stil="klar"] .kopf h1, [data-stil="klar"] .kopf .unterzeile, [data-stil="klar"] .kopf a, [data-stil="klar"] .kopf .kopf-zurueck { color: var(--auf-primaer, #fff); } [data-stil="klar"] .kopf .unterzeile { opacity: 0.9; } [data-stil="klar"] .karte { border-color: transparent; box-shadow: 0 1px 3px rgba(15, 40, 80, 0.10); } [data-stil="klar"] .kachel { border-left-color: var(--primaer); box-shadow: 0 1px 3px rgba(15, 40, 80, 0.08); } /* ---- Deko-Blatt (oben rechts): nur wenn vom Admin aktiviert ---- */ [data-deko="0"] .kopf .deko, [data-deko="0"] .landing-hero .deko, [data-deko="0"] .alter-karte .deko { display: none !important; } /* ---- Meldungen: schweben oben, verschwinden von selbst (app.js) ---- */ .meldungen { position: fixed; top: calc(10px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); width: min(560px, calc(100vw - 28px)); z-index: 160; } .meldung { transition: opacity 0.45s ease, transform 0.45s ease; } .meldung.weg { opacity: 0; transform: translateY(-14px); } /* ---------- Export-Leiste (Formatwahl über den Listen) ---------- */ .export-leiste { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-eingabe); padding: 8px 12px; margin-bottom: 10px; } .export-leiste select { padding: 7px 32px 7px 10px; font-size: 13px; background-size: 14px; } /* ========================================================================= Shop-Flächen: Filterspalte links/rechts/oben, Kategoriebaum, Blättern. Wird vom Club-Shop (v_merch) und vom Mitglieder-Sortiment (abgabe) genutzt. ========================================================================= */ .shop-flaeche { display: grid; gap: 16px; align-items: start; } .shop-flaeche[data-pos="links"] { grid-template-columns: 232px minmax(0, 1fr); } .shop-flaeche[data-pos="rechts"] { grid-template-columns: minmax(0, 1fr) 232px; } .shop-flaeche[data-pos="rechts"] .shop-filter { order: 2; } .shop-filter { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 4px 14px 12px; position: sticky; top: 10px; } /* Zugeklappte Filterspalte: nur noch eine schmale Leiste mit Beschriftung */ .shop-flaeche:has(> .shop-filter:not([open])) { grid-template-columns: 46px minmax(0, 1fr); } .shop-flaeche[data-pos="rechts"]:has(> .shop-filter:not([open])) { grid-template-columns: minmax(0, 1fr) 46px; } .shop-filter:not([open]) { padding: 6px; } .shop-filter:not([open]) .f-auf { writing-mode: vertical-rl; padding: 14px 4px; font-size: 12.5px; letter-spacing: 0.04em; } .shop-filter:not([open]) .f-auf::after { content: "»"; margin: 8px 0 0; } .f-block { padding: 10px 0; border-bottom: 1px solid var(--linie); } .f-block:last-child { border-bottom: 0; } .f-titel { font-size: 11.5px; font-weight: 800; letter-spacing: 0.06em; color: var(--text3); text-transform: uppercase; margin-bottom: 7px; } .f-baum { max-height: 340px; overflow: auto; margin: 0 -6px; padding: 0 6px; } .f-zeile { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 8px; font-size: 13px; color: var(--text2); } a.f-zeile:hover { background: var(--karte2); text-decoration: none; color: var(--text); } .f-zeile.aktiv { background: var(--karte2); color: var(--primaer); font-weight: 700; } .f-zeile .n { margin-left: auto; font-size: 11px; color: var(--text3); } .f-zeile.aktiv .n { color: var(--primaer); } .f-zeile .pf { opacity: 0.45; font-size: 10px; } .f-preis { display: flex; align-items: center; gap: 6px; } .f-preis input { width: 100%; min-width: 0; } .f-haken { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; color: var(--text2); cursor: pointer; } .f-pos { display: flex; gap: 3px; background: var(--karte2); border-radius: 9px; padding: 3px; } .f-pos a { width: 26px; height: 24px; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: var(--text3); } .f-pos a:hover { text-decoration: none; color: var(--text); } .f-pos a.aktiv { background: var(--karte); color: var(--primaer); box-shadow: 0 1px 3px rgba(0,0,0,0.14); } .f-pos i { display: block; border: 1.6px solid currentColor; border-radius: 2px; width: 13px; height: 11px; position: relative; } .f-pos i::before { content: ""; position: absolute; background: currentColor; } .f-pos .l i::before { left: 0; top: 0; bottom: 0; width: 4px; } .f-pos .r i::before { right: 0; top: 0; bottom: 0; width: 4px; } .f-pos .o i::before { top: 0; left: 0; right: 0; height: 3.5px; } .krumen { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; font-size: 12.5px; color: var(--text3); margin-bottom: 10px; } .krumen a { color: var(--text2); } .krumen b { color: var(--text); } .m-raster { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 14px; } .m-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); overflow: hidden; display: flex; flex-direction: column; transition: transform 0.08s; } .m-karte:hover { transform: translateY(-2px); text-decoration: none; } .m-bild { aspect-ratio: 1; background: var(--karte2); display: flex; align-items: center; justify-content: center; overflow: hidden; } .m-bild img { width: 100%; height: 100%; object-fit: cover; } .m-bild span { font-size: 34px; opacity: 0.4; } .m-bild .m-badge { font-size: 11px; opacity: 1; position: absolute; top: 8px; left: 8px; margin: 0; } .m-text { padding: 11px 12px 13px; flex: 1; display: flex; flex-direction: column; gap: 3px; } .m-marke { font-size: 11.5px; color: var(--text3); text-transform: uppercase; letter-spacing: 0.05em; } .m-titel { font-weight: 700; font-size: 14.5px; line-height: 1.3; color: var(--text); } .m-weg { font-size: 11px; color: var(--text3); } .m-preis { margin-top: auto; padding-top: 7px; font-weight: 800; font-size: 16px; } .m-preis .alt { font-size: 12.5px; color: var(--text3); text-decoration: line-through; font-weight: 400; margin-left: 5px; } .m-badge { position: absolute; margin: 8px; background: var(--gefahr); color: #fff; border-radius: 999px; padding: 2px 9px; font-size: 11px; font-weight: 800; } .m-leer { color: var(--text3); font-size: 12px; } .f-auf { display: flex; align-items: center; gap: 8px; padding: 10px 12px; cursor: pointer; font-weight: 700; font-size: 13.5px; list-style: none; color: var(--text2); } .f-auf::-webkit-details-marker { display: none; } .f-auf::after { content: "«"; margin-left: auto; color: var(--text3); } .f-auf:hover { color: var(--text); } .sortier-wahl { display: none; } .blaettern { display: flex; gap: 6px; align-items: center; justify-content: center; flex-wrap: wrap; margin: 18px 0 4px; } .blaettern a, .blaettern span { min-width: 34px; text-align: center; padding: 7px 10px; border: 1px solid var(--linie); border-radius: var(--r-knopf); font-size: 13px; color: var(--text2); background: var(--karte); } .blaettern a:hover { text-decoration: none; border-color: var(--primaer); color: var(--text); } .blaettern .jetzt { background: var(--primaer); border-color: var(--primaer); color: #fff; font-weight: 700; } .blaettern .aus { opacity: 0.4; } @media (max-width: 820px) { .shop-flaeche, .shop-flaeche[data-pos="links"], .shop-flaeche[data-pos="rechts"], .shop-flaeche[data-pos="oben"] { grid-template-columns: minmax(0, 1fr); } .shop-flaeche .shop-filter { order: 0; position: static; display: block; padding: 0; } .shop-flaeche .shop-filter > form { display: block; } .shop-flaeche[data-pos="oben"] .f-block { border-right: 0; max-width: none; } .f-pos { display: none; } /* Filter stecken am Handy hinter einem Knopf – sonst scrollt man ewig */ .f-auf { writing-mode: horizontal-tb !important; padding: 12px 14px; font-size: 14px; } .f-auf::after { content: "▾" !important; margin: 0 0 0 auto !important; } details[open] > .f-auf::after { content: "▴" !important; } .shop-flaeche:has(> .shop-filter:not([open])), .shop-flaeche[data-pos="rechts"]:has(> .shop-filter:not([open])) { grid-template-columns: minmax(0, 1fr); } .shop-filter:not([open]) { padding: 0; } .shop-filter > .f-block, .shop-filter > form { padding: 0 14px; } .shop-filter > form > .f-block:last-child { padding-bottom: 14px; } .f-baum { max-height: 240px; } .sortier-wahl { display: block; flex: 1; } .sortier-chips { display: none; } .m-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .m-titel { font-size: 13.5px; } .m-preis { font-size: 15px; } .m-text { padding: 9px 10px 11px; } } /* Abschnitts-Reiter (Shop/Merchandise, Blüten/Hash/Zubehör) --------------- */ .abschnitt-reiter { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; border-bottom: 1px solid var(--linie); padding-bottom: 0; } .abschnitt-reiter::-webkit-scrollbar { display: none; } .abschnitt-reiter a { padding: 9px 15px 10px; font-size: 14px; font-weight: 600; color: var(--text3); white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; border-radius: var(--r-pille) var(--r-pille) 0 0; } .abschnitt-reiter a:hover { color: var(--text); text-decoration: none; background: var(--karte2); } .abschnitt-reiter a.aktiv { color: var(--primaer); border-bottom-color: var(--primaer); font-weight: 800; background: transparent; } /* Einstellungen: seitliche Bereichs-Navigation (Desktop), Chips am Handy ----- */ .einstellungs-flaeche { display: grid; gap: 18px; align-items: start; } .an-gruppe { display: none; } @media (min-width: 1080px) { .einstellungs-flaeche { grid-template-columns: 216px minmax(0, 1fr); } .einstellungs-flaeche .abschnitt-nav { position: sticky; top: 10px; display: flex; flex-direction: column; gap: 1px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); padding: 8px 8px 10px; margin: 0; /* Nie höher als das Fenster – sonst sind die unteren Punkte unerreichbar */ max-height: calc(100vh - 20px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } .einstellungs-flaeche .abschnitt-nav a { display: flex; align-items: center; gap: 9px; padding: 6px 10px; border: 0; border-radius: 9px; font-size: 13px; font-weight: 600; color: var(--text2); background: transparent; white-space: normal; flex: none; } .einstellungs-flaeche .abschnitt-nav a svg { width: 16px; height: 16px; flex: none; opacity: 0.75; } .einstellungs-flaeche .abschnitt-nav a:hover { background: var(--karte2); color: var(--text); } .einstellungs-flaeche .abschnitt-nav a.aktiv { background: var(--primaer); color: #fff; } .einstellungs-flaeche .abschnitt-nav a.aktiv svg { opacity: 1; } .einstellungs-flaeche .an-gruppe { display: block; font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); padding: 10px 10px 3px; flex: none; } .einstellungs-flaeche .an-gruppe:first-child { padding-top: 2px; } .einstellungs-flaeche .einstellungs-raster.tab-modus { max-width: none; } } @media (max-width: 1079px) { .einstellungs-flaeche .abschnitt-nav a svg { display: none; } /* Schmale Fenster: zurück zur klebenden Chipleiste – nichts liegt übereinander */ .einstellungs-flaeche .abschnitt-nav { top: 0; } } /* ========================================================================= Feed & Chat am Rechner: zentrierte Spalten statt seitenbreiter Karten. Am Handy bleibt alles wie gehabt (eine Spalte, Eingabe fest unten). ========================================================================= */ .feed-flaeche { display: block; } .feed-seite { margin-top: 4px; } @media (min-width: 1080px) { .feed-flaeche { display: grid; grid-template-columns: minmax(0, 640px) 300px; gap: 18px; justify-content: center; align-items: start; } .feed-seite { position: sticky; top: 10px; margin: 0; } .feed-seite .karte { padding: 14px 16px; } .feed-seite h2 { font-size: 15px; } /* Beiträge kompakter: kleinere Titel, gedeckelte Bilder */ .feed-post-text h3 { font-size: 16px; } .feed-post-bild { max-height: 420px; object-fit: cover; } .feed-aktionen { padding-top: 2px; } } /* Kanalliste links neben dem Chatverlauf */ .chat-flaeche { display: block; } .chat-kanalliste { display: none; } @media (min-width: 1080px) { .chat-flaeche { display: grid; grid-template-columns: 250px minmax(0, 720px); gap: 18px; justify-content: center; align-items: start; } .chat-kanalliste { display: block; position: sticky; top: 10px; padding: 10px 8px; max-height: calc(100vh - 90px); overflow-y: auto; scrollbar-width: thin; } .ck-titel { font-size: 10.5px; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text3); padding: 2px 10px 8px; } .ck-eintrag { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600; color: var(--text2); } .ck-eintrag:hover { background: var(--karte2); color: var(--text); text-decoration: none; } .ck-eintrag.aktiv { background: var(--primaer); color: #fff; } .ck-eintrag .zeichen { width: 22px; height: 22px; border-radius: 7px; background: var(--karte2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; color: var(--text2); } .ck-eintrag.aktiv .zeichen { background: rgba(255, 255, 255, 0.22); color: #fff; } .ck-eintrag .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ck-eintrag.zurueck { margin-top: 8px; border-top: 1px solid var(--linie); border-radius: 0 0 9px 9px; } /* Der Verlauf wird zur eigenen Karte mit innerem Scrollen; Eingabe klebt an der Karte statt am Fensterrand */ .chat-karte { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); display: flex; flex-direction: column; height: calc(100vh - 170px); min-height: 420px; overflow: hidden; } .chat-karte .chat-verlauf { flex: 1; overflow-y: auto; padding: 16px 18px; scrollbar-width: thin; } .chat-karte .chat-verlauf .blase { max-width: 65%; font-size: 14px; } .chat-karte .chat-eingabe { position: static; background: var(--karte); border-top: 1px solid var(--linie); padding: 10px 14px; box-shadow: none; } .chat-karte .chat-eingabe form { max-width: none; margin: 0; } } /* Klebende Speicherleiste am Ende langer Formulare */ .speicher-leiste { position: sticky; bottom: 12px; display: flex; justify-content: flex-end; padding: 10px 12px; margin-top: 14px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--r-karte); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.25); z-index: 5; } body:has(.tabbar) .speicher-leiste { bottom: calc(92px + env(safe-area-inset-bottom, 0px)); } /* Suchfeld in Kanal-/Seitenlisten */ .ck-suche { width: 100%; margin: 0 0 8px; font-size: 13px !important; padding: 8px 10px !important; } /* Die schwebende Menü-Pille darf unten nichts verdecken */ body:has(.tabbar) .inhalt { padding-bottom: calc(104px + env(safe-area-inset-bottom, 0px)) !important; } /* Shop-Kacheln (Kategorien wie bei großen Shops) + Produkt-Regale ------------ */ .shop-kacheln { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; scrollbar-width: none; margin-bottom: 8px; } .shop-kacheln::-webkit-scrollbar { display: none; } .sk { flex: none; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 10px 6px 9px; background: var(--karte); border: 1px solid var(--linie); border-radius: 14px; text-align: center; } .sk:hover { text-decoration: none; border-color: var(--primaer); } .sk.aktiv { border-color: var(--primaer); box-shadow: 0 0 0 1px var(--primaer); } .sk-bild { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 21px; background: color-mix(in srgb, var(--sk, var(--primaer)) 26%, var(--karte2)); } .sk-name { font-size: 12px; font-weight: 700; color: var(--text); line-height: 1.15; } .sk-zahl { font-size: 10.5px; color: var(--text3); } .regal { margin: 4px 0 16px; } .regal-kopf { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .regal-kopf h2 { font-size: 16px; } .regal-band { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 8px; scrollbar-width: none; scroll-snap-type: x proximity; } .regal-band::-webkit-scrollbar { display: none; } .regal-karte { flex: 0 0 150px; scroll-snap-align: start; } .regal-karte .m-bild { aspect-ratio: 1; } .regal-karte .m-titel { font-size: 12.5px; } .regal-karte .m-preis { font-size: 14px; } /* Feed & Chat: Social-Media-Feinschliff ------------------------------------- */ .feed-post { border-radius: 16px; } .feed-post-kopf .avatar { width: 40px; height: 40px; } .feed-post-text h3 { font-size: 15.5px; } .feed-aktionen { border-top: 1px solid var(--linie); margin-top: 4px; padding: 8px 12px; } .emoji-knopf { border-radius: 999px; padding: 5px 11px; font-size: 14px; background: var(--karte2); border: 1px solid transparent; } .emoji-knopf:hover { border-color: var(--linie); } .emoji-knopf.aktiv { background: color-mix(in srgb, var(--primaer) 22%, var(--karte2)); border-color: var(--primaer); } .feed-kommentar-form input { border-radius: 999px !important; } .feed-kommentar .blase-k { border-radius: 4px 16px 16px 16px; } .blase { border-radius: 18px; } .blase.eigene { border-bottom-right-radius: 6px; } .blase.fremd { border-bottom-left-radius: 6px; } .chat-eingabe input { border-radius: 999px !important; } /* Artikel-Detailseiten (Katalog + Club-Shop) --------------------------------- */ .ma-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 18px; align-items: start; margin-bottom: 14px; } @media (max-width: 800px) { .ma-raster { grid-template-columns: 1fr; } } .ma-bild { background: var(--karte2); border-radius: var(--r-karte); overflow: hidden; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; position: relative; } .ma-bild img { width: 100%; height: 100%; object-fit: cover; } .ma-bild .m-badge { position: absolute; top: 10px; left: 10px; margin: 0; } .ma-galerie { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; } .ma-galerie img { width: 64px; height: 64px; object-fit: cover; border-radius: var(--r-eingabe); cursor: pointer; border: 2px solid transparent; } .ma-galerie img:hover { border-color: var(--primaer); } .ma-daten { width: 100%; font-size: 13.5px; } .ma-daten tr td { padding: 7px 0; border-bottom: 1px solid var(--linie); } .ma-daten tr td:first-child { color: var(--text2); width: 42%; } /* Kachel-Schnellkauf: Plus-Knopf unten rechts auf der Karte ------------------ */ .m-karte { position: relative; } .m-karte .m-link { position: absolute; inset: 0; z-index: 1; border-radius: inherit; } .m-kauf { position: absolute; right: 9px; bottom: 9px; z-index: 2; } .m-kauf button { width: 38px; height: 38px; border-radius: 12px; border: 0; cursor: pointer; background: var(--primaer); color: var(--auf-primaer, #fff); display: flex; align-items: center; justify-content: center; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.3); } .m-kauf button:hover { filter: brightness(1.08); } .m-kauf svg { width: 19px; height: 19px; } .m-karte:has(.m-kauf) .m-preis { padding-right: 46px; }