:root{ --yellow:#facc15; /* Ideenbude-Gelb */ --bg:#f9fafc; --card:#ffffff; --text:#11161d; --muted:#4b5563; --acc:#007acc; --danger:#d43f3a; --border:#e5e7eb; --shadow:0 2px 6px rgba(0,0,0,.05); } html[data-theme="dark"] { --yellow:#facc15; --bg:#0b0d10; --card:#11161d; --text:#e6eef8; --muted:#a9b6c7; --acc:#7cc0ff; --danger:#ff6b6b; --border:#1f2630; --shadow:0 10px 30px rgba(0,0,0,.25); } /* =========================== BASE =========================== */ *{ box-sizing:border-box } html,body{ margin:0; padding:0 } body{ font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto; background:var(--bg); color:var(--text); } /* Nur Farb-Übergänge, keine Layout-Transitions */ *{ transition: color .15s, background-color .15s, border-color .15s } /* Cinematic-Bloom (Weich → Hart) */ html{ transition: filter .45s cubic-bezier(.4,0,.2,1), opacity .45s cubic-bezier(.4,0,.2,1); will-change: filter, opacity; } html.ts{ filter: brightness(1.12) saturate(1.05) blur(4px); opacity:.75 } html:not(.ts){ filter:none; opacity:1 } /* Beim Toggle: Kinder-Transitions stummschalten, darf animieren */ .ts *{ transition:none !important; animation:none !important } /* =========================== HEADER (72px) + LOGO (60px) =========================== */ .main-header{ background:var(--yellow); height:72px; padding:0 16px; /* horizontal */ } .header-inner{ height:90px; max-width:1200px; margin:0 auto; display:flex; align-items:center; justify-content:space-between; gap:12px; } .header-title{ font-weight:700; text-align:center } .spacer{ width:60px } /* falls du links/rechts symmetrieren willst */ .logo-img{ height:80px; width:auto; display:block; object-fit:contain; } .header-actions{ min-width:180px; display:flex; align-items:center; justify-content:flex-end; gap:10px; } /* =========================== THEME TOGGLE =========================== */ .switch-dark { position: relative; display: inline-block; width: 64px; height: 34px; } .switch-dark input { opacity: 0; width: 0; height: 0; } /* Hintergrundleiste */ .slider-dark { position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0; background-color: #d1d5db; transition: 0.4s; border-radius: 999px; } /* Weißer Knopf mit Icon */ .slider-dark::before { position: absolute; content: "🌞"; height: 26px; width: 26px; left: 4px; bottom: 3px; background-color: white; transition: 0.4s; border-radius: 50%; font-size: 18px; line-height: 26px; text-align: center; } /* Zustand: checked → Knopf rechts + Mond */ input:checked + .slider-dark { background-color: #4b5563; } input:checked + .slider-dark::before { transform: translateX(28px); content: "🌙"; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ .switch .slider::before, .switch .slider::after{ transition:none; } } /* =========================== PUBLIC GRID / CARDS =========================== */ .content{ padding:24px } .public-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px } /* Kachelkarte – eine klare Version */ .card{ background:var(--card); border:1px solid var(--border); border-radius:14px; overflow:hidden; box-shadow:0 3px 8px rgba(0,0,0,.12); transition: transform .25s cubic-bezier(.25,.8,.25,1), box-shadow .25s ease, filter .25s ease; will-change: transform, box-shadow; } .card:hover{ transform: translateY(-6px) scale(1.02); box-shadow:0 10px 22px rgba(0,0,0,.25); filter:brightness(1.03) } .image-container{ position:relative } .tile-image{ width:100%; object-fit:cover; display:block; transition: transform .4s ease } /* Bild leicht vergrößern beim Hover */ .card:hover .tile-image{ transform:scale(1.07) } .card .body{ padding:14px 16px 18px } .card h3{ margin:0 0 6px; font-weight:600 } .card p{ margin:0; color:var(--muted); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; text-overflow:ellipsis; } /* Preis-Badge */ .price-badge{ position:absolute; top:8px; right:8px; font-weight:700; background:var(--card); padding:6px 10px; border:1px solid var(--border); border-radius:10px; } /* =========================== PAGINATION =========================== */ .pagination{ display:flex; gap:8px; justify-content:center; align-items:center; margin:16px 0 8px } .pagination .page{ display:inline-block; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text); text-decoration:none; } .pagination .page:hover{ filter:brightness(0.98) } .pagination .current{ font-weight:700; border-color:var(--acc) } .pagination .disabled{ opacity:.5; pointer-events:none } .pagination .gap{ padding:0 6px; color:var(--muted) } /* =========================== SEARCH INLINE (aufklappend) =========================== */ .search-inline{ display:flex; align-items:center; gap:8px; position:relative } .search-input{ height:40px; line-height:40px; padding:0 12px; margin:0; border:1px solid var(--border); border-radius:10px; background:var(--card); color:var(--text); width:0; opacity:0; pointer-events:none; appearance:none; -webkit-appearance:none; box-sizing:border-box; transition: width .18s ease, opacity .15s ease; } .search-inline.open .search-input{ width: clamp(180px, 32vw, 360px); opacity:1; pointer-events:auto; } .icon-btn, .reset-btn{ width:40px; height:40px; line-height:0; display:inline-flex; align-items:center; justify-content:center; padding:0; margin:0; border:1px solid transparent; border-radius:10px; background:transparent; } .icon-btn svg, .reset-btn svg{ display:block } .reset-btn{ background:var(--danger); color:#fff; box-shadow:0 2px 4px rgba(0,0,0,.1); transition: transform .1s, filter .1s ease; display:none; /* sichtbarkeit steuert JS */ } .reset-btn:hover{ filter:brightness(1.1) } .reset-btn:active{ transform:scale(0.9) } /* =========================== CHIPBAR =========================== */ .chipbar{ display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 16px } .chip{ display:inline-block; padding:8px 12px; border-radius:12px; border:1px solid var(--border); background:var(--card); color:var(--text); text-decoration:none; transition: filter .15s ease, transform .12s ease, box-shadow .2s ease; box-shadow:0 2px 6px rgba(0,0,0,.08); } .chip:hover{ filter:brightness(0.98); transform:translateY(-1px) } .chip.active{ background:#2b2f36; color:#fff; border-color:transparent } :root[data-theme="light"] .chip.active{ background:#e5e7eb; color:#111; border-color:#d1d5db } /* =========================== OVERLAY (einmalig, mit Fade+Zoom) =========================== */ .overlay{ position:fixed; inset:0; z-index:1000; display:flex; justify-content:center; align-items:center; padding:20px; background:rgba(0,0,0,.8); opacity:0; visibility:hidden; transition: opacity .35s ease, visibility .35s ease; } .overlay.show{ opacity:1; visibility:visible } .overlay-content{ position:relative; background:var(--card); padding:20px; max-width:80%; max-height:80%; overflow-y:auto; border-radius:8px; box-shadow:var(--shadow); transform:scale(.97); transition: transform .3s ease; } .overlay.show .overlay-content{ transform:scale(1) } .overlay img{ max-width: 90vw; max-height: 55vh; /* etwas niedriger = kein Scroll */ object-fit: contain; margin: 0 auto; display: block; } .overlay .close{ position:absolute; top:10px; right:10px; width:30px; height:30px; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; font-size:20px; background:#fff; color:#000; transition: background .2s ease, color .2s ease; } .overlay .close:hover{ background:var(--danger); color:#fff } /* =========================== BUTTONS (Overlay) =========================== */ .overlay-buttons{ display:flex; gap:10px; margin:12px 0 14px; flex-wrap:wrap; justify-content:flex-start } .btn-yellow{ appearance:none; text-decoration:none; font-weight:600; padding:10px 16px; border-radius:999px; background:var(--yellow); color:#111; border:1px solid rgba(0,0,0,.05); display:inline-flex; align-items:center; justify-content:center; gap:8px; transition: transform .12s ease, filter .15s ease, box-shadow .2s ease; box-shadow:0 2px 6px rgba(0,0,0,.15); } .btn-yellow:hover{ filter:brightness(1.05); box-shadow:0 6px 14px rgba(0,0,0,.22) } .btn-yellow:active{ transform: translateY(1px) scale(.99) } /* =========================== FOOTER =========================== */ .main-footer{ text-align:center; color:#6b7280; font-size:14px; border-top:1px solid var(--border); } /* =========================== REDUCED MOTION =========================== */ @media (max-width:480px){ .search-inline.open .search-input{ width:160px } } @media (prefers-reduced-motion: reduce){ *{ transition:none !important } html{ transition:none !important } } /* Sticky-Footer Layout */ html, body { height: 100%; } body{ min-height: 100svh; /* mobile-safe viewport */ display: flex; flex-direction: column; } /* Hauptinhalt füllt den Rest – Footer rutscht nach unten */ .content{ flex: 1 0 auto; } /* Footer klebt am unteren Rand, ohne extra Höhe */ .main-footer{ margin-top: auto; /* key line */ } /* ===== Header immer passend zur Logogröße ===== */ /* Header zum Bezugspunkt machen */ .main-header{ position: relative; } /* Die mittige Zeile bleibt mittig und begrenzt */ .header-inner{ max-width: 1200px; margin: 0 auto; height: 96px; display: flex; align-items: center; justify-content: center; /* Logo exakt mittig */ } /* Toggle (und ggf. Lupe) absolut an den rechten Rand der GELBEN Leiste */ .header-actions{ position: absolute; right: 16px; /* Abstand zum Rand der gelben Bar */ top: 50%; transform: translateY(-50%); display: flex; align-items: center; gap: 10px; min-width: 0; /* alte min-width entfernen/überschreiben */ justify-content: flex-end; z-index: 2; /* falls Overlay/Logo darüber liegen */ } /* Linke "spacer"-Spalte brauchst du so nicht mehr – falls noch Platzhalter, gib ihr einfach 0 Breite */ .spacer{ width: 0; } /* ===== Logo wirklich 80px hoch, nicht gequetscht oder gestreckt ===== */ .logo-img{ height: 80px; width: auto; object-fit: contain; display: block; margin: 0; /* kein Verschieben durch default whitespace */ padding: 0; } .main-header, .header-inner { height: 96px; display:flex; align-items:center; } .logo-img { height: 80px; width: auto; display:block; object-fit: contain; } /* ----- Einheitlicher Tile-Look (Light & Dark automatisch) ----- */ .public-grid .card { background: var(--card); border-radius: 16px; border: 1px solid var(--border); transition: box-shadow .25s ease, transform .15s ease; will-change: box-shadow, transform; overflow: hidden; } /* Bild sauber rund */ .public-grid .card .image-container { border-radius: 14px; overflow: hidden; } /* Immer gleich */ .public-grid .card:hover { transform: translateY(-1px); } .public-grid .card:active { transform: translateY(0); } /* --- Light: feiner Schatten --- */ html[data-theme="light"] .public-grid .card { box-shadow: 0 1px 3px rgba(0,0,0,.10), 0 6px 18px rgba(0,0,0,.08); } html[data-theme="light"] .public-grid .card:hover { box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 10px 28px rgba(0,0,0,.14); } /* --- Dark Mode: warm, subtil, aber sichtbar --- */ /* Feine goldene Innenkante – wirkt wie poliert */ html[data-theme="dark"] .public-grid .card{ position: relative; border-color: color-mix(in oklab, var(--yellow) 34%, var(--border) 66%); box-shadow: 0 10px 28px rgba(0,0,0,.55), 0 0 10px rgba(250,204,21,.26), 0 0 26px rgba(250,204,21,.18), 0 0 90px rgba(250,204,21,.10); } html[data-theme="dark"] .public-grid .card::before{ content:""; position:absolute; inset:0; border-radius:16px; pointer-events:none; box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--yellow) 45%, transparent 55%), inset 0 0 18px rgba(250,204,21,.15); } /* Glänzender Sweep über die Kachel bei Hover */ .public-grid .card{ --sheen-op: .0; } .public-grid .card::after{ content:""; position:absolute; inset:-20%; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,var(--sheen-op)) 45%, rgba(255,255,255,0) 60%); transform: translateX(-30%) rotate(2deg); transition: opacity .25s ease, transform .6s ease; opacity:0; pointer-events:none; border-radius:20px; } .public-grid .card:hover::after{ transform: translateX(35%) rotate(2deg); opacity:1; } html[data-theme="dark"] .public-grid .card{ --sheen-op: .07; } html[data-theme="light"] .public-grid .card{ --sheen-op: .05; } /* Parallax: Bild folgt dem Cursor ganz leicht */ .public-grid .card{ --tx: 0px; --ty: 0px; } .public-grid .card .tile-image{ transform: translate(var(--tx), var(--ty)) scale(1.04); transition: transform .15s ease; } /* Weicher Glas-Hintergrund + feine Vignette */ .overlay{ background: radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,.88) 0%, rgba(0,0,0,.78) 60%, rgba(0,0,0,.70) 100%); backdrop-filter: blur(6px); } /* sanfter Scale/Fade */ .overlay{ opacity:0; visibility:hidden; } .overlay.show{ opacity:1; visibility:visible; } .overlay-content{ transform: translateY(6px) scale(.98); opacity:.0; transition: transform .28s cubic-bezier(.2,.7,.2,1), opacity .28s ease; } .overlay.show .overlay-content{ transform: translateY(0) scale(1); opacity:1; } /* Skelett-Lader */ .overlay .img-loading{ background: linear-gradient(90deg, #2a2a2a 0%, #3a3a3a 50%, #2a2a2a 100%); background-size: 200% 100%; animation: shimmer 1.1s linear infinite; border-radius: 8px; height: 48vh; /* Platzhalter */ } @keyframes shimmer{ from{background-position:200% 0} to{background-position:-200% 0} } /* dezenter Glow passend zu Dark */ html[data-theme="dark"] .btn-yellow{ box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 12px rgba(250,204,21,.20); } html[data-theme="dark"] .btn-yellow:hover{ box-shadow: 0 10px 26px rgba(0,0,0,.45), 0 0 18px rgba(250,204,21,.30); } /* Handy-Hochformat Layout */ @media (max-width: 480px) { .header-inner { height: 72px; justify-content: center; } /* Logo leicht kleiner und wirklich mittig */ .logo-img { height: 60px; } /* Toggle & Lupe schön rechts, aber nicht aufs Logo drücken */ .header-actions { right: 8px; top: 50%; transform: translateY(-50%); gap: 6px; } } /* Handy-Hochformat: Platz für Toggle + Lupe reservieren */ @media (max-width: 520px){ .header-inner{ height: 72px; justify-content: center; /* Logo bleibt mittig */ padding-right: 128px; /* >>> Parkfläche rechts für Actions <<< */ } .logo-img{ height: 60px; } /* Logo minimal kleiner auf Handy */ .header-actions{ right: 8px; top: 50%; transform: translateY(-50%); gap: 6px; } } /* Super-klein (z. B. 360px): Icons/Toggler dezent skalieren */ @media (max-width: 360px){ .header-inner{ padding-right: 112px; } .switch-dark{ transform: scale(.86); transform-origin: right center; } .icon-btn{ width:36px; height:36px; } } /* Overlay mobil sauber einpassen */ @media (max-width: 600px) { /* Das Overlay-Innenleben darf nie breiter als der Bildschirm sein */ .overlay-content { max-width: 100vw; width: 100%; padding: 14px; box-sizing: border-box; } /* Bild IMMER skalieren, niemals hinauswachsen */ .overlay img, #overlayImage { max-width: 60%; width: 60%; height: auto; display: block; object-fit: contain; } /* Buttons nicht aus dem Layout drücken */ .overlay-buttons { flex-wrap: wrap; } } /* Einheitliche Breite fürs Overlay-Innenleben */ .overlay .overlay-content{ width: 680px; /* Zielbreite */ max-width: calc(100vw - 32px);/* auf kleinen Screens weich werden */ margin: 0 auto; /* zentrieren */ } /* Bild im Overlay skaliert sich schön, lässt oben/unten Luft */ #overlayImage{ display:block; width:100%; height:auto; max-height:50vh; object-fit:contain; } /* Wenn das Bild ausgeblendet ist (Benötigt-Ansicht), halte Buttons/Text Struktur */ .overlay.is-needs #overlayImage, .overlay.is-needs #carouselPrev, .overlay.is-needs #carouselNext{ display:none !important; } /* Benötigt-Ansicht: Bild & Pfeile komplett ausblenden */ .overlay.is-needs #overlayImage, .overlay.is-needs .ov-arrow { display: none !important; } /* Während des Fade-Outs: gar nichts durchblitzen lassen */ .overlay.closing #overlayImage, .overlay.closing .ov-arrow { visibility: hidden !important; } html[data-theme="dark"] .icon-btn { color: #111 !important; } /* Cursor für Zoom */ #overlayImage { cursor: zoom-in; } .overlay.zoom #overlayImage { cursor: grab; } .overlay.zoom #overlayImage.dragging { cursor: grabbing; } /* ====== IDEENBU.DE · Grid entspannen (Rezepte-Feeling) ====== */ :root{ --tileMinW: 220px; /* min. Kachelbreite (kleiner = luftiger) */ --tileGap: 24px; /* Abstand zwischen Kacheln */ --tileRadius: 16px; /* weicher wirkt freundlicher */ --tilePad: 12px; /* innen weniger Polster */ } /* Optional: die Gesamtlayout-Breite begrenzen, damit es nicht erschlägt */ .main, .grid-wrap, .container{ max-width: 1380px; /* je nach Geschmack 1280–1440 testen */ margin-inline: auto; padding-inline: 20px; } /* Dein Grid: 5 Spalten auf groß, aber mit kleinerem minmax + mehr Abstand */ .grid{ display: grid; grid-template-columns: repeat(5, minmax(var(--tileMinW), 1fr)); gap: var(--tileGap); } /* Responsives Umschalten (fühlt sich natürlicher an) */ @media (max-width: 1400px){ .grid{ grid-template-columns: repeat(4, minmax(210px, 1fr)); } } @media (max-width: 1100px){ .grid{ grid-template-columns: repeat(3, minmax(200px, 1fr)); } } @media (max-width: 800px){ .grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (max-width: 520px){ .grid{ grid-template-columns: 1fr; } } /* Kachel-Optik entspannen */ .tile, .card, .kachel{ border-radius: var(--tileRadius); padding: var(--tilePad); box-shadow: 0 6px 14px rgba(0,0,0,.10); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; /* saubere Ecken bei Bildern */ } .tile:hover, .card:hover, .kachel:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.16); } /* Bildbereich konsistent: weniger „erschlägt“ */ .tile img, .card img, .kachel img{ width: 100%; height: auto; aspect-ratio: 4 / 3; /* 4:3 wirkt ruhiger als sehr breite Banner */ object-fit: cover; display: block; border-radius: calc(var(--tileRadius) - 4px); } /* Texte etwas feiner skalieren */ .tile .title, .card .title, .kachel .title{ font-size: clamp(15px, 1.4vw, 18px); line-height: 1.28; margin: 8px 6px 2px; } .tile .meta, .card .meta, .kachel .meta{ font-size: 13px; opacity: .8; } /* Mehr Luft zwischen Bild und Text, falls nötig */ .tile .content, .card .content, .kachel .content{ gap: 8px; } /* Kleinigkeit: Hover nicht zu „sprunghaft“ */ @media (prefers-reduced-motion: reduce){ .tile:hover, .card:hover, .kachel:hover{ transform:none; } } /* ===== Ideenbude · Kachel-Layout entspannen (5 Spalten, luftiger) ===== */ /* (optional) Gesamtbreite begrenzen, damit 5 Spalten nicht zu breit wirken */ .main, .container, .grid-wrap, body > main { max-width: 1380px; /* 1280–1440 testen nach Geschmack */ margin-inline: auto; padding-inline: 20px; } /* GRID: 5 Spalten groß, mit kleinerer Mindestbreite + mehr Abstand */ .public-grid{ display: grid; grid-template-columns: repeat(5, minmax(220px, 1fr)); gap: 24px; /* mehr Luft */ align-items: start; } /* Responsiv runterstaffeln – fühlt sich „natürlicher“ an */ @media (max-width: 1400px){ .public-grid{ grid-template-columns: repeat(4, minmax(210px, 1fr)); } } @media (max-width: 1100px){ .public-grid{ grid-template-columns: repeat(3, minmax(200px, 1fr)); } } @media (max-width: 800px){ .public-grid{ grid-template-columns: repeat(2, minmax(180px, 1fr)); } } @media (max-width: 520px){ .public-grid{ grid-template-columns: 1fr; } } /* Kachel-Optik: sanfter, weniger wuchtig */ .public-grid .card{ border-radius: 16px; box-shadow: 0 6px 14px rgba(0,0,0,.10); transition: transform .18s ease, box-shadow .18s ease; overflow: hidden; /* saubere Ecken fürs Bild */ background: var(--card, #fff); } .public-grid .card:hover{ transform: translateY(-3px); box-shadow: 0 12px 26px rgba(0,0,0,.16); } /* Bild: einheitliches Seitenverhältnis = ruhigeres Grid */ .public-grid .image-container{ position: relative; aspect-ratio: 4 / 3; /* 4:3 wirkt weniger „bannerig“ */ overflow: hidden; } .public-grid .tile-image{ width: 100%; height: 100%; object-fit: cover; display: block; } /* Price-Badge etwas dezenter */ .public-grid .price-badge{ position: absolute; right: 10px; top: 10px; padding: 6px 10px; font-size: 14px; border-radius: 10px; background: var(--yellow, #facc15); color: #111; } /* Textteil: kompaktere Typo + etwas Luft */ .public-grid .card .body{ padding: 10px 12px 12px; } .public-grid .card h3{ font-size: clamp(15px, 1.4vw, 18px); line-height: 1.28; margin: 0 0 6px; } .public-grid .card p{ margin: 0; font-size: 14px; opacity: .9; } /* Motion etwas bremsen, falls Nutzer es wünschen */ @media (prefers-reduced-motion: reduce){ .public-grid .card:hover{ transform:none; box-shadow: 0 6px 14px rgba(0,0,0,.10); } } /* ===== Kacheln alle gleich hoch machen ===== */ .public-grid .card{ display: flex; flex-direction: column; height: 100%; } .public-grid .image-container{ flex: 0 0 auto; } .public-grid .card .body{ flex: 1 1 auto; display: flex; flex-direction: column; justify-content: flex-start; } /* Falls du willst, dass alle Beschreibungstexte NICHT zu lang werden */ .public-grid .card p{ flex: 1 1 auto; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; /* Anzahl Zeilen begrenzen */ -webkit-box-orient: vertical; }