/* Selbst gehostete Schriften (statt Google Fonts CDN) - vermeidet die Uebertragung der Besucher-IP an Google-Server beim Laden der Seite. Nur latin/latin-ext-Subsets, da die App ausschliesslich deutsche Texte zeigt. */ @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/fraunces-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Fraunces'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/fraunces-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap; src: url('/static/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } :root { /* Struktur-Tokens (theme-unabhängig) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px; --text-xs: .75rem; --text-sm: .85rem; --text-base: 1rem; --text-lg: 1.15rem; --text-xl: 1.4rem; --text-2xl: 2rem; --sidebar-width: 264px; --topbar-height: 60px; --content-max: 1100px; --bottom-tab-height: 75px; /* Emoji-Schriftarten am Ende explizit auflisten - ohne sie finden manche Browser/Systeme (v.a. Linux-Desktops ohne Noto Color Emoji, manche WebViews) fuer die App-Icons (📖 📁 🔗 ...) keine passende Schrift und zeigen leere Kaestchen statt echter Emoji. */ --font-sans: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; --font-serif: 'Fraunces', Georgia, "Times New Roman", serif; /* Farb-Tokens: Hell (Standard) */ --bg: #faf9f6; /* Dunkleres Beige statt Salbei-Grün - fuehrt die Beige-Reihe von --bg/ --surface-2/--border (siehe unten) einen Schritt weiter, statt einen eigenstaendigen Farbton einzufuehren. */ --chrome-bg: #d8cebe; --surface: #ffffff; --surface-2: #efe9df; --surface-hover: #f4f0e8; /* Hintergrund der Profil-Pille in der Topbar - im Dunkelmodus reicht der Ton-Unterschied von --surface-2 zu --chrome-bg nicht (nur ein Helligkeits- schritt), deshalb dort auf --surface-hover angehoben (siehe Dark-Bloecke unten). Im Hellmodus ist --surface-2 (deutlicher Farbtonwechsel) genug. */ --topbar-pill-bg: var(--surface-2); --topbar-pill-hover-bg: var(--surface-hover); --text: #201b15; --text-muted: #6e6255; --border: #e3dccf; --link: #b5562e; --link-hover: #8f421f; --accent-sage: #4f6a45; --accent-sage-bg: rgba(79,106,69,0.12); --btn-bg: #8f421f; --btn-bg-hover: #742f13; --btn-text: #fffaf5; --tag-bg: rgba(181,86,46,0.10); --tag-text: #8f421f; --danger-bg: #fbe4df; --danger-text: #a33324; --danger-border: #f3c4ba; --shadow-sm: 0 1px 2px rgba(32,22,14,.06); --shadow-md: 0 8px 24px rgba(32,22,14,.10); --shadow-lg: 0 24px 56px rgba(32,22,14,.18); --overlay: rgba(32,22,14,.45); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #1b1815; --chrome-bg: #26190e; --surface: #26190e; --surface-2: #2c1e12; --surface-hover: #312211; --text: #f2e8dc; --text-muted: #b7a996; --border: #3c332c; --link: #d98f5f; --link-hover: #eaa876; --accent-sage: #93b280; --accent-sage-bg: rgba(147,178,128,0.16); --btn-bg: #cd7f4f; --btn-bg-hover: #dd9366; --btn-text: #1b1815; --tag-bg: rgba(217,143,95,0.16); --tag-text: #e3a878; --danger-bg: rgba(198,90,66,0.18); --danger-text: #e6947c; --danger-border: rgba(198,90,66,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 56px rgba(0,0,0,.6); --overlay: rgba(0,0,0,.55); --topbar-pill-bg: var(--surface-hover); --topbar-pill-hover-bg: var(--border); } } :root[data-theme="dark"] { --bg: #1b1815; --chrome-bg: #26190e; --surface: #26190e; --surface-2: #2c1e12; --surface-hover: #312211; --text: #f2e8dc; --text-muted: #b7a996; --border: #3c332c; --link: #d98f5f; --link-hover: #eaa876; --accent-sage: #93b280; --accent-sage-bg: rgba(147,178,128,0.16); --btn-bg: #cd7f4f; --btn-bg-hover: #dd9366; --btn-text: #1b1815; --tag-bg: rgba(217,143,95,0.16); --tag-text: #e3a878; --danger-bg: rgba(198,90,66,0.18); --danger-text: #e6947c; --danger-border: rgba(198,90,66,0.4); --shadow-sm: 0 1px 2px rgba(0,0,0,.35); --shadow-md: 0 8px 24px rgba(0,0,0,.45); --shadow-lg: 0 24px 56px rgba(0,0,0,.6); --overlay: rgba(0,0,0,.55); --topbar-pill-bg: var(--surface-hover); --topbar-pill-hover-bg: var(--border); } * { box-sizing: border-box; } /* Sicherheitsnetz gegen horizontales Scrollen durch einzelne zu breite Elemente (z.B. eine lange Quell-URL ohne Umbruchstellen) - verhindert, dass so etwas die ganze Seite seitlich aufreisst. Elemente mit eigenem overflow-x:auto (z.B. Tabellen) sind davon unberuehrt, da sie einen eigenen Scroll-Kontext haben. */ html { overflow-x: hidden; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); transition: background 0.2s ease, color 0.2s ease; overflow-x: hidden; } /* Globale Link-Basis: bisher gab es KEINE - jeder Textlink musste einzeln ueber seine Elternklasse gefaerbt werden (.hint a, .legal-content a, .login-card a, .panel-link, ...), was leicht uebersehen wird (genau so kam z.B. der .hint-a-Bug zustande: ein Link blieb im Standard-Browser-Blau haengen, weil er in keiner der bestehenden Regeln vorkam). Diese Basis- Regel faengt ab jetzt JEDEN neuen automatisch im Theme-Link-Farbton auf - alle bestehenden spezifischeren Klassen-Regeln (.tab-btn.active, .add-btn, .btn-secondary, Buttons-als-Link etc.) bleiben durch hoehere Selektor-Spezifitaet unveraendert wirksam und ueberschreiben das wie gehabt. Neue Links brauchen dadurch keine eigene Farb-Deklaration mehr, nur noch abweichendes Verhalten (z.B. keine Unterstreichung im Footer). */ /* KEIN globales a:hover { text-decoration: underline } - eine :hover- Pseudoklasse auf dem blossen Element "a" waere genauso specific wie eine einzelne Klasse (z.B. .btn-secondary), wuerde also faelschlich gewinnen und Button-gestalteten Links (die text-decoration nur in ihrer :hover- Regel gar nicht erst erwaehnen, weil sie sich auf diese Basis-Regel verlassen) eine ungewollte Unterstreichung beim Hover verpassen. Hover- Verhalten bleibt bewusst Sache der jeweiligen spezifischeren Klasse (.panel-link:hover, .site-footer a:hover, ...). */ a { color: var(--link); text-decoration: none; } h1, h2, .brand, .recipe-card-body h3 { font-family: var(--font-serif); } /* Browser-Standardabstand fuer h1 (rem-basiert, oft >30px) plus das Innenpolster von .container (--space-5) addierten sich bisher zu einer auffaellig grossen Luecke zwischen Titelleiste und Seiten-Ueberschrift (Nutzer-Feedback, z.B. auf der Bearbeiten-Seite - betraf aber jede Seite mit einem einfachen

, nicht nur diese eine). margin-top:0 ueberlaesst den Abstand nach oben komplett dem Container-Padding, margin-bottom in der Groessenordnung, die andere h1-Regeln im Projekt schon verwenden (.login-card/.legal-content h1). Spezifischere h1-Regeln (.detail-header h1 etc.) ueberschreiben das wie gehabt per hoeherer Selektor-Spezifitaet. */ h1 { margin: 0 0 var(--space-4); } .topbar { display: flex; align-items: center; gap: var(--space-3); height: var(--topbar-height); padding: 0 var(--space-5); background: var(--chrome-bg); border-bottom: 1px solid var(--border); /* Echtes "fixed" statt "sticky" - html/body setzen beide overflow-x:hidden (siehe oben, noetig gegen seitliches Aufreissen), was implizit overflow-y:auto auf beiden erzeugt (CSS-Spec: overflow-x/-y muessen zusammen "auto" statt "visible" ergeben, wenn eine Achse eingeschraenkt ist). Zwei potenzielle Scroll-Container gleichzeitig sind ein bekannter Sticky-Bug v.a. in iOS Safari - dort blieb die Kopfzeile beim Scrollen nicht zuverlaessig oben. position:fixed haengt nicht von der Scroll-Kette ab, daher robuster. .app-shell bekommt zum Ausgleich margin-top, da ein fixed Element keinen Platz im normalen Fluss mehr belegt (anders als sticky). */ position: fixed; top: 0; left: 0; right: 0; z-index: 30; } .app-shell { margin-top: var(--topbar-height); } /* App-uebliche Tab-Leiste unten (Experiment) - ersetzt auf schmalen Screens die Kopfzeile oben, siehe @media (max-width: 640px) weiter unten fuers eigentliche Erscheinungsbild. Default hier: unsichtbar/kein Platzverbrauch auf Desktop/Tablet, wo die normale Kopfzeile bleibt. */ .bottom-tab-bar { display: none; } .menu-toggle { display: none; background: none; border: none; color: var(--text); font-size: var(--text-xl); cursor: pointer; padding: var(--space-1); border-radius: var(--radius-sm); transition: background 0.15s; } .menu-toggle:hover { background: var(--surface-2); } .theme-toggle { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 50; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-md); color: var(--text); font-size: var(--text-lg); cursor: pointer; transition: background 0.15s, transform 0.15s, box-shadow 0.15s; } .theme-toggle:hover { background: var(--surface-hover); transform: translateY(-2px); box-shadow: var(--shadow-lg); } .brand { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-lg); font-weight: 600; color: var(--text); text-decoration: none; } .brand-icon { width: 28px; height: 28px; object-fit: contain; } .topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-3); } .add-btn { background: var(--btn-bg); color: var(--btn-text); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); text-decoration: none; font-weight: 600; font-family: var(--font-sans); font-size: var(--text-sm); box-shadow: var(--shadow-sm); transition: background 0.15s, box-shadow 0.15s, transform 0.15s; } .add-btn:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-md); transform: translateY(-1px); } /* Explizite Hoehe nur fuer den Topbar-Button (nicht fuer .empty-state-add-btn, der lebt ausserhalb von .topbar-right) - sonst haengt die tatsaechliche Hoehe von Padding+Zeilenhoehe der Schriftart ab, was neben dem Umgebungs-Umschalter (Select, andere Metrik) leicht daneben wirkte. */ .topbar-right .add-btn { height: 40px; padding: 0 var(--space-4); display: inline-flex; align-items: center; justify-content: center; } /* Profil-Menü oben rechts in der Kopfzeile (Profilbild + Name + Guthaben) */ .topbar-user { position: relative; } .topbar-user-toggle { display: flex; align-items: center; gap: var(--space-2); /* --topbar-pill-bg statt "none" - setzt sich von --chrome-bg der Topbar ab. Heller Modus: --surface-2 (deutlicher Farbtonwechsel reicht). Dunkler Modus: --surface-hover (--surface-2 waere dort zu nah an --chrome-bg dran, nur ein kleiner Helligkeitsschritt), siehe --topbar-pill-bg oben. */ background: var(--topbar-pill-bg); border: none; cursor: pointer; padding: var(--space-1) var(--space-2); border-radius: var(--radius-pill); font-family: var(--font-sans); color: var(--text); transition: background 0.15s; } .topbar-user-toggle:hover, .topbar-user-toggle[aria-expanded="true"] { background: var(--topbar-pill-hover-bg); } .topbar-user-avatar { position: relative; flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--btn-bg); color: var(--btn-text); display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: var(--font-serif); font-weight: 600; font-size: var(--text-base); } .topbar-user-info { display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; } .topbar-user-name { font-weight: 600; font-size: var(--text-sm); max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .topbar-user-credits { color: var(--text-muted); font-size: var(--text-xs); font-weight: 600; } /* position:fixed statt absolute - das Menue liegt jetzt (siehe base.html) ausserhalb von .topbar-user, damit ein display:none auf der Kopfzeile (Mobil-Tab-Leisten-Experiment) es nicht mit versteckt. Ohne den .topbar-user-Vorfahren als Bezugspunkt reicht "unter der Kopfzeile rechts" als feste Koordinate, da der Profil-Toggle in der Kopfzeile immer dort sitzt (siehe .topbar-right { margin-left: auto }). */ .topbar-user-menu { position: fixed; top: calc(var(--topbar-height) + var(--space-2)); right: var(--space-4); z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2); min-width: 200px; display: flex; flex-direction: column; gap: 2px; } .topbar-user-menu[hidden] { display: none; } .topbar-user-menu .logout-form { display: contents; } .topbar-user-menu-link { color: var(--text); text-decoration: none; font-size: var(--text-sm); padding: var(--space-2); border-radius: var(--radius-sm); text-align: right; background: none; border: none; font-family: var(--font-sans); cursor: pointer; width: 100%; } .topbar-user-menu-link:hover { background: var(--surface-hover); color: var(--link); } /* Hoehere Spezifitaet noetig als "form button[type=submit]" (die generische Formular-Absenden-Optik, grosser Vollton-Button) - sonst gewinnt die und der Abmelden-Eintrag sieht nicht wie die anderen Menuepunkte aus. */ .topbar-user-menu form button[type=submit].topbar-user-logout { background: none; color: var(--link); border: none; box-shadow: none; padding: var(--space-2); border-radius: var(--radius-sm); font-weight: 400; } .topbar-user-menu form button[type=submit].topbar-user-logout:hover { background: var(--surface-hover); box-shadow: none; transform: none; } /* App-Shell: Sidebar + Inhalt */ .app-shell { display: flex; align-items: flex-start; min-height: calc(100vh - var(--topbar-height)); /* dvh (dynamic viewport height) statt vh: vh bleibt beim Ein-/Ausblenden der Browser-Werkzeugleiste beim erstmals geladenen (meist groesseren) Wert stehen, dvh passt sich live an die tatsaechlich sichtbare Hoehe an - verhindert, dass Inhalt kurzzeitig unter/ueber der fixierten Tab-Leiste endet, waehrend sich die Werkzeugleiste ein-/ausblendet. Alte Browser ohne dvh-Unterstuetzung ignorieren die zweite Deklaration und bleiben beim vh-Wert direkt darueber (reine Verbesserung, kein Fallback noetig). */ min-height: calc(100dvh - var(--topbar-height)); } .sidebar { position: relative; display: flex; flex-direction: column; width: var(--sidebar-width); flex-shrink: 0; align-self: stretch; background: var(--chrome-bg); border-right: 1px solid var(--border); padding: var(--space-4); font-family: var(--font-sans); } .sidebar-overlay { display: none; } .sidebar-resize-handle { position: absolute; top: 0; right: -3px; bottom: 0; width: 6px; cursor: col-resize; z-index: 26; } .sidebar-resize-handle:hover, .sidebar-resize-handle.dragging { background: var(--link); opacity: 0.35; } .sidebar-nav { margin-top: var(--space-5); margin-bottom: var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--border); } .sidebar-nav-header { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-2); padding: 0 var(--space-2); } .sidebar-nav-link { display: block; padding: var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-weight: 600; font-size: var(--text-sm); transition: background 0.12s, color 0.12s; } .sidebar-nav-link:hover { background: var(--surface-hover); color: var(--link); } .sidebar-nav-link.active { background: var(--tag-bg); color: var(--link); } .category-tree-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); margin-bottom: var(--space-3); } .cat-add-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 26px; height: 26px; line-height: 1; cursor: pointer; transition: background 0.15s, color 0.15s; } .cat-add-btn:hover { background: var(--link); color: var(--btn-text); border-color: var(--link); } .category-tree-header-actions { display: flex; gap: var(--space-1); } .cat-edit-toggle-btn { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-sm); width: 26px; height: 26px; line-height: 1; cursor: pointer; font-size: var(--text-sm); transition: background 0.15s, color 0.15s, border-color 0.15s; } .cat-edit-toggle-btn:hover { background: var(--surface-hover); } .cat-edit-toggle-btn.active { background: var(--link); color: var(--btn-text); border-color: var(--link); } .cat-root { list-style: none; margin: 0; padding: 0; } .cat-node { position: relative; } .cat-children { list-style: none; margin: var(--space-1) 0 0 8px; padding: 0 0 0 12px; border-left: 1px solid var(--border); } .cat-node.collapsed > .cat-children { display: none; } .cat-row { display: flex; align-items: center; gap: var(--space-1); border-radius: var(--radius-sm); transition: background 0.12s; cursor: grab; } .cat-row:hover { background: var(--surface-hover); } /* Umbenennen/Loeschen werden bewusst NICHT per :hover eingeblendet (das Layout-Aendern beim ersten Tap zwingt iOS/Android sonst zu einem zweiten Tap, bevor der eigentliche Link-Klick durchgeht) - stattdessen nur im explizit aktivierten Bearbeiten-Modus sichtbar, siehe .cat-edit-toggle-btn. */ .category-tree.edit-mode .cat-delete-btn, .category-tree.edit-mode .cat-rename-btn { display: inline-flex; } .cat-row.dragging { opacity: 0.4; cursor: grabbing; } .cat-row.drag-over { background: var(--tag-bg); outline: 2px dashed var(--link); outline-offset: -2px; } .cat-toggle, .cat-toggle-spacer, .cat-delete-btn, .cat-rename-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; width: 26px; height: 26px; flex-shrink: 0; text-align: center; font-size: var(--text-sm); display: inline-flex; align-items: center; justify-content: center; } .cat-delete-btn, .cat-rename-btn { display: none; border-radius: var(--radius-sm); width: 28px; height: 28px; font-size: var(--text-base); } .cat-delete-btn { margin-right: var(--space-1); } .cat-rename-btn { margin-left: auto; } .cat-rename-btn:hover { background: var(--surface-2); color: var(--link); } .cat-delete-btn:hover { background: var(--danger-bg); color: var(--danger-text); } .cat-rename-input-inline { flex: 1; min-width: 0; font-family: var(--font-sans); font-size: var(--text-sm); padding: 1px var(--space-1); border: 1px solid var(--link); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); /* Ohne eigenen Rand fuegt sich ein Link nahtlos zwischen Nachbarn ein, das sichtbar umrandete Eingabefeld braucht aber etwas Luft, sonst wirkt es an z.B. dem farbig hinterlegten "Alle Rezepte" foermlich festgeklebt. */ margin: var(--space-1) 0; } .cat-rename-input-inline:focus { outline: none; box-shadow: 0 0 0 2px var(--tag-bg); } .cat-node.collapsed > .cat-row .cat-toggle { transform: rotate(-90deg); display: inline-block; } .cat-link { flex: 1; display: block; padding: var(--space-2) var(--space-2); border-radius: var(--radius-sm); text-decoration: none; color: var(--text); font-size: var(--text-base); font-weight: 500; border-left: 3px solid transparent; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: background 0.12s, color 0.12s, border-color 0.12s; } .cat-link:hover { color: var(--link); } .cat-link.cat-depth-1 { font-weight: 700; } .cat-link.cat-depth-2 { font-weight: 400; } .cat-link.cat-depth-3 { font-weight: 400; font-size: var(--text-sm); color: var(--text-muted); } .cat-link.active { border-left-color: var(--link); background: var(--tag-bg); color: var(--link); font-weight: 700; } /* display:flex + align-self:stretch, damit .container (wie .sidebar bereits) die volle Hoehe von .app-shell ausfuellt - sonst ragt der Footer bei kurzen Seiten mitten im Leerraum statt am unteren Bildschirmrand zu kleben. Der Footer (letztes Kind, siehe .site-footer margin-top:auto) wird dadurch immer an den unteren Rand gedrueckt, unabhaengig von der Inhaltslaenge. Zusaetzlich min-height direkt hier, da .container auf public_recipe.html (oeffentliche Freigabeseiten) ohne .app-shell/Sidebar direkt unter haengt - align-self:stretch alleine haette dort keinen Flex-Elternteil zum Strecken. */ .container { max-width: var(--content-max); flex: 1; margin: 0 auto; padding: var(--space-5); min-width: 0; display: flex; flex-direction: column; align-self: stretch; min-height: calc(100vh - var(--topbar-height)); min-height: calc(100dvh - var(--topbar-height)); /* siehe .app-shell weiter oben */ } .active-filter-pill { display: inline-flex; gap: var(--space-2); align-items: center; background: var(--tag-bg); border: 1px solid var(--border); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); margin-bottom: var(--space-4); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--tag-text); } .active-filter-pill a { color: var(--text-muted); text-decoration: none; font-weight: 700; } .active-filter-pill a:hover { color: var(--text); } .category-pill { display: inline-block; background: var(--accent-sage-bg); border: 1px solid transparent; color: var(--accent-sage); text-decoration: none; padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; transition: background 0.12s; } .category-pill:hover { background: var(--accent-sage); color: var(--surface); } /* Eigenes, mit einblendendes Tooltip fuer Kategorie-Chips mit mehreren Kategorien (statt des nativen title-Attributs) - eigenes Element statt Kind des Chips, weil .recipe-card overflow:hidden hat und ein hier verschachteltes Tooltip sonst abgeschnitten wuerde. Position wird per JS (app.js) auf Basis der Chip-Position gesetzt. */ .category-tooltip { /* Abgeschwaechte Variante des .category-pill-Looks (gleiche Sage-Farbtoene, nur als Box statt Pille) statt eines neutralen Popover-Kastens - macht die Zugehoerigkeit zum Kategorie-Chip auf den ersten Blick klar. */ position: fixed; z-index: 50; max-width: 240px; /* --accent-sage-bg ist als Pillen-Fuellung recht transparent (12-16%) - dahinter eine deckende --surface-Ebene, damit das Tooltip nicht von durchscheinendem Karteninhalt schwer lesbar wird, oben drauf weiterhin der Sage-Ton. */ background: linear-gradient(var(--accent-sage-bg), var(--accent-sage-bg)), var(--surface); color: var(--accent-sage); border: 1px solid var(--accent-sage); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-2) var(--space-3); font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600; display: flex; flex-direction: column; gap: 2px; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s; pointer-events: none; } .category-tooltip.visible { opacity: 1; visibility: visible; transform: translateY(0); } /* Gruppiert mehrere Kategorie-Pills als einen Block links, statt sie einzeln zwischen den Tags umbrechen zu lassen - dadurch faellt bei Platzmangel der GESAMTE Tags-Block als Ganzes in eine eigene Zeile (siehe .detail-meta- secondary: flex-wrap + space-between mit .category-pills/.tags als je ein Flex-Kind), statt Pills und Tags wild durcheinanderzumischen. */ .category-pills { display: flex; flex-wrap: wrap; gap: var(--space-1); } .detail-meta-panel { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-3); } .detail-meta-panel .meta-row { margin: 0; } .detail-meta-secondary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border); } .detail-tags.tags { margin-top: 0; justify-content: flex-end; } .search-bar { display: flex; gap: var(--space-2); margin-bottom: var(--space-5); flex-wrap: wrap; } .search-bar input[type=text] { flex: 1; min-width: 200px; padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-sans); background: var(--surface); color: var(--text); font-size: var(--text-base); /* verhindert iOS-Auto-Zoom beim Fokussieren */ } .search-bar select, .search-bar button { padding: var(--space-3) var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); color: var(--text); font-family: var(--font-sans); cursor: pointer; font-size: var(--text-base); transition: background 0.15s, box-shadow 0.15s; } .search-bar select:hover, .search-bar input[type=text]:hover { border-color: var(--link); } .search-bar button { background: var(--btn-bg); color: var(--btn-text); border: none; font-weight: 600; } .usage-filter-form { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); } .usage-filter-form select { width: auto; margin-bottom: 0; padding: var(--space-2) var(--space-3); font-size: var(--text-base); /* verhindert iOS-Auto-Zoom beim Fokussieren */ background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-md); font-family: var(--font-sans); cursor: pointer; } .usage-filter-form .btn-secondary { text-decoration: none; } .usage-user-filter { flex: 0 1 220px; min-width: 160px; } .usage-pagination { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); } .usage-detail-text { white-space: pre-wrap; word-break: break-word; font-family: var(--font-sans); font-size: var(--text-sm); background: var(--surface-2); border-radius: var(--radius-md); padding: var(--space-3); max-height: 50vh; overflow-y: auto; margin: 0; color: var(--text); } .usage-detail-link { color: var(--link); word-break: break-all; } /* Macht die Quelle-Zelle selbst antippbar (ersetzt die vorherige eigene "Details"-Spalte mit separatem Button) - sieht aus wie der normale Icon+Text-Inhalt der Zelle, nur mit Zeiger-Cursor + Hover-Farbe als Hinweis, dass ein Klick den Popover mit dem eigentlichen Inhalt oeffnet. */ .usage-source-btn { background: none; border: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); } .usage-source-btn:hover { color: var(--link); } .usage-detail-images { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: var(--space-3); } .usage-detail-images img { width: 100%; border-radius: var(--radius-md); object-fit: cover; aspect-ratio: 1; } .search-bar button:hover { background: var(--btn-bg-hover); box-shadow: var(--shadow-sm); } /* Dezenter Hinweis-Button neben dem Suchfeld (zeigt ein kleines Popover mit Beispielen, z.B. der <400kcal-Syntax) - bewusst kein staendig sichtbarer Banner/Tooltip, nur auf Klick/Tap, damit es niemanden stoert, der es nicht braucht. */ .search-input-row { display: flex; align-items: center; gap: var(--space-2); flex: 1; min-width: 200px; } /* Kein Rahmen/Hintergrund - nur ein dezentes, gedaempftes Icon statt eines vollen Buttons, damit es neben dem Suchfeld nicht mit dem "Suchen"-Button konkurriert. */ /* .search-bar button (Zeile weiter unten) ist spezifischer als .search-info-btn allein (Klasse+Element schlaegt eine einzelne Klasse) und wuerde sonst den Hintergrund/Rahmen des "Suchen"-Buttons durchdruecken - deshalb hier ueber .search-bar .search-info-btn gezielt ueberschrieben. */ .search-bar .search-info-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; flex-shrink: 0; background: none; border: none; border-radius: 50%; color: var(--text-muted); cursor: pointer; transition: color 0.15s, background 0.15s; } .search-info-btn .icon-btn { width: 18px; height: 18px; } .search-bar .search-info-btn:hover { color: var(--link); background: none; } .search-info-popover { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); padding: var(--space-4); max-width: min(300px, calc(100vw - var(--space-6))); font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); } .search-info-popover::backdrop { background: rgba(0,0,0,.25); } .search-info-popover p { margin: 0 0 var(--space-2); } .search-info-popover ul { margin: 0; padding-left: var(--space-4); display: flex; flex-direction: column; gap: var(--space-1); } .search-info-popover code { background: var(--tag-bg); color: var(--tag-text); padding: 1px 4px; border-radius: 4px; font-size: var(--text-xs); } .tag-autocomplete { position: relative; flex: 1; min-width: 160px; } .tag-autocomplete input[type=text] { margin-bottom: 0; } .tag-suggestions { position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 40; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); list-style: none; margin: 0; padding: var(--space-1) 0; max-height: 240px; overflow-y: auto; } .tag-suggestions.hidden { display: none; } .tag-suggestion { padding: var(--space-2) var(--space-3); cursor: pointer; font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text); } .tag-suggestion:hover, .tag-suggestion.active { background: var(--tag-bg); color: var(--tag-text); } .tag-suggestion-create { color: var(--link); font-weight: 600; border-top: 1px solid var(--border); } /* Kompakte einzeilige Statistik (Startseite, API-Nutzung) */ .usage-summary { font-family: var(--font-sans); font-size: var(--text-sm); color: var(--text-muted); background: var(--surface-2); border-radius: var(--radius-md); border: 1px solid var(--border); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-4); display: inline-block; } .usage-summary strong { color: var(--text); font-weight: 700; } @media (max-width: 640px) { .usage-summary { display: block; } } /* API-Nutzung (admin_usage.html): Statistik-Zeile aus einzelnen Spans statt reinem Fliesstext, damit sie auf schmalen Screens einzeln untereinander stehen koennen statt gequetscht in einer Zeile umzubrechen. */ .usage-summary-item:not(:last-child)::after { content: '·'; margin: 0 var(--space-2); opacity: 0.5; } @media (max-width: 640px) { .usage-summary-item { display: block; } .usage-summary-item:not(:last-child) { margin-bottom: var(--space-1); } .usage-summary-item:not(:last-child)::after { content: none; } } /* Startseite: Suche links, Statistikzeile rechts, in einer Zeile (Desktop). Feste, gemeinsame Hoehe fuer Suchfeld/Button und die Statistik-Pille, statt sich auf Flex-Stretch zu verlassen (verhaelt sich bei verschachtelten Flex-Containern nicht konsistent). */ .home-toolbar { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); } .home-toolbar .usage-summary { /*

hat vom Browser einen margin-top, den es sonst nirgends braucht - ohne margin:0 wird die Box beim vertikalen Zentrieren in .home-toolbar dadurch asymmetrisch nach unten verschoben (nicht auf gleicher Hoehe wie die Suche). */ margin: 0; flex-shrink: 0; white-space: nowrap; box-sizing: border-box; height: 44px; padding-top: 0; padding-bottom: 0; display: flex; align-items: center; gap: var(--space-2); } .usage-stat { white-space: nowrap; } .usage-sep { opacity: 0.5; } .usage-stat-link { color: inherit; text-decoration: none; border-radius: var(--radius-sm); transition: color 0.12s; } .usage-stat-link:hover, .usage-stat-link.active { color: var(--link); } .usage-stat-link.active strong { color: var(--link); } .home-toolbar .search-bar { margin-bottom: 0; flex: 1; min-width: 0; order: -1; } .home-toolbar .search-bar input[type=text], .home-toolbar .search-bar button { height: 44px; box-sizing: border-box; } @media (max-width: 900px) { .home-toolbar { flex-direction: column; align-items: stretch; } .home-toolbar .usage-summary { white-space: normal; height: auto; flex-wrap: wrap; padding-top: var(--space-2); padding-bottom: var(--space-2); margin-bottom: var(--space-3); order: 0; } .home-toolbar .search-bar { order: 0; } .home-toolbar .search-bar input[type=text], .home-toolbar .search-bar button { height: auto; } } @media (max-width: 640px) { /* Kleinere Schrift/engere Abstaende speziell in diesem Kasten auf schmalen Handybreiten - mit 3 Stats (Rezepte/Geteilt/Unkategorisiert) reicht der Platz sonst knapp nicht fuer eine Zeile. space-between verteilt die drei Stats gleichmaessig ueber die volle Breite der Box, statt sie (mit viel Leerraum rechts) links gedraengt anzuzeigen. */ .home-toolbar .usage-summary { font-size: var(--text-xs); gap: var(--space-1); justify-content: space-between; } } .recipe-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--space-5); /* align-items: stretch (Grid-Default) bewusst NICHT ueberschrieben - alle Karten in einer Zeile sollen gleich hoch sein. Damit der dadurch entstehende Freiraum nicht als sichtbare Luecke unter den Tags haengen bleibt, wird er stattdessen ueber Flexbox in .recipe-card/.recipe-card-body aufgefangen (Tags werden per margin-top:auto an den unteren Kartenrand geschoben, siehe dort) statt die verfuegbare Hoehe zur Laufzeit zu messen. */ } .recipe-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; text-decoration: none; color: var(--text); box-shadow: var(--shadow-sm); transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; display: flex; flex-direction: column; /* Ohne das kann der Karteninhalt (v.a. .tags, wenn app.js kurzzeitig alle Tags einblendet um die verfuegbare Hoehe zu messen) die Karte ueber ihre vom Grid gestreckte Hoehe hinaus aufblaehen ("Grid-Blowout" - Flex-/ Grid-Items haben per Default min-height:auto, das laesst Inhalt die eigentlich vorgegebene Groesse ueberschreiben). Das hat vorher dazu gefuehrt, dass die Hoehen-Messung in truncateCardTags (app.js) faelschlich "unbegrenzt Platz" ergab. Mit min-height:0 + overflow:hidden bleibt die Karte zuverlaessig bei ihrer gestreckten Hoehe, ueberschuessiger Inhalt wird geclippt statt die Karte (und damit die ganze Grid-Zeile) zu strecken. */ min-height: 0; } .recipe-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--link); } .recipe-card { cursor: grab; } .recipe-card.dragging { opacity: 0.4; cursor: grabbing; } /* Eigener Wrapper (statt direkt .recipe-card img) noetig, weil applyFocalCrop() in app.js das selbst absolut positioniert und per Pixel-Translate verschiebt (siehe .focal-img) - der bisherige Hover-Zoom-Effekt sitzt deshalb jetzt auf dem Wrapper statt dem Bild, sonst wuerde JS ihn ueberschreiben. */ .recipe-card-img-wrap { position: relative; overflow: hidden; width: 100%; height: 155px; transition: transform 0.35s ease; } .recipe-card:hover .recipe-card-img-wrap { transform: scale(1.06); } .no-image { position: relative; width: 100%; height: 155px; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; background: var(--surface-2); } /* Gesamtdauer als Pille auf dem Bild - nur in der mobilen Ansicht (siehe @media unten), auf Desktop steht die Dauer weiterhin als Text in .recipe-card-meta-row. --overlay ist dieselbe dezente, dunkle Overlay-Farbe wie z.B. beim Bilder-Zaehler (.gallery-counter) - bewusst nicht transparent, damit die Pille sich vom Foto abhebt. */ .recipe-card-time-badge { display: none; position: absolute; top: var(--space-2); right: var(--space-2); background: var(--overlay); color: #fff; font-size: var(--text-xs); font-family: var(--font-sans); padding: 2px var(--space-2); border-radius: var(--radius-pill); white-space: nowrap; } /* Nur auf Mobil sichtbar (ersetzt dort die ausgeblendeten Tags), siehe @media unten - auf Desktop bleiben stattdessen die Tags wie gehabt sichtbar. */ .recipe-card-calories { display: none; } /* flex:1 laesst die Body-Flaeche den kompletten, durch das gestreckte .recipe-card (align-items:stretch im Grid) entstandenen Freiraum einnehmen - die Tags werden weiter unten per margin-top:auto an den unteren Rand dieser Flaeche geschoben statt Leerraum stehen zu lassen. */ /* gap statt einzelner margin-bottom/margin-top-Werte an den Kindern - sorgt automatisch fuer einheitlichen Abstand egal ob .recipe-card-meta-row vorhanden ist oder nicht (wird nur gerendert, wenn total_time_min/ categories gesetzt sind). */ .recipe-card-body { padding: var(--space-4); display: flex; flex-direction: column; flex: 1; gap: var(--space-2); min-height: 0; } .recipe-card-body h3 { margin: 0; font-size: var(--text-lg); font-weight: 600; overflow-wrap: break-word; hyphens: auto; } .meta { font-size: var(--text-sm); color: var(--text-muted); font-family: var(--font-sans); } .recipe-card-meta-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .recipe-card-meta-row .meta { flex-shrink: 0; white-space: nowrap; } /* min-width:0 noetig, damit das Flex-Kind ueberhaupt unter seine Textbreite schrumpfen kann (Flex-Items sind sonst standardmaessig min-width:auto) - sonst ragt die Pille bei langen Kategorienamen ueber die Kartenbreite hinaus und wird vom Karten-Overflow mitten im Wort abgeschnitten, statt sauber mit "…" zu kuerzen. */ .recipe-card-meta-row .category-pill { padding: 1px var(--space-2); font-size: var(--text-xs); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); } .tag { background: var(--tag-bg); color: var(--tag-text); font-size: var(--text-xs); font-weight: 600; padding: 3px var(--space-3); border-radius: var(--radius-pill); font-family: var(--font-sans); flex: none; } /* Auf der Rezeptkarte in der Uebersicht passen so viele Tags wie in eine Zeile passen (statt einer festen Anzahl) - Rest wird per JS (app.js, truncateCardTags) ausgeblendet und als "…"-Chip zusammengefasst. margin-top:auto schiebt die Tags an den unteren Rand von .recipe-card-body (flex:1, siehe oben) - der Mindestabstand nach oben kommt vom gap auf .recipe-card-body, margin-top:auto verteilt zusaetzlich uebrigen Freiraum aus dem Grid-Stretch, statt ihn irgendwo als Luecke stehen zu lassen. Ueberschreibt bewusst das margin-top: var(--space-2) der allgemeinen .tags-Regel oben. */ .recipe-card .tags { flex-wrap: wrap; overflow: hidden; margin-top: auto; } .tag-more { background: var(--surface-2); color: var(--text-muted); } .empty-state { text-align: center; padding: var(--space-7) var(--space-5); color: var(--text-muted); } .empty-state.hidden { display: none; } /* Umgebungs-Umschalter in der Kopfzeile - ein normaler