/* Muffinchen – Theme-Schicht nach dem „Muffinchen Design System“ (claude.ai/design). Lädt nach style.css/rezepte.css und legt Tokens (tokens.css) über die bestehende Seite: magischer 3D-Comic-Look, Candy-Buttons mit Glanz + Lippe, Goldränder, runde Radien, Fredoka + Nunito. Saison über . Keine Emoji, nur ✦ als Schmuckzeichen. */ /* ---------- Alte Variablen auf Tokens umbiegen ---------- */ :root { --accent: var(--pink-600); --accent-dark: var(--pink-700); --choc: var(--choc-800); --choc-2: var(--choc-700); --text: var(--choc-700); --muted: var(--choc-600); --cream: var(--cream-100); --blush: var(--cream-300); --line: var(--cream-400); --serif: var(--font-display); --script: var(--font-display); --sans: var(--font-body); --radius: var(--radius-lg); --shadow: var(--shadow-float); --muffin-bg: var(--cream-100); --card-border: 2px solid rgba(239, 205, 152, .6); --ki-bg: rgba(46, 26, 58, .74); /* --bg-sparkle hat 5 Ebenen, --hero-bg 2: Größe je Ebene angeben, sonst kachelt der Verlauf */ --sparkle-size: 340px 260px, 340px 260px, 340px 260px, 340px 260px, 340px 260px, 100% 100%, 100% 100%; } /* ---------- Basis ---------- */ body { font: var(--text-body-default); color: var(--text-body); background: var(--bg-page); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-strong); font-weight: 600; letter-spacing: var(--ls-display); text-wrap: balance; } h1, h2 { font-weight: 700; } p { text-wrap: pretty; } a:hover { color: var(--link-hover); } :focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 3px; } ::selection { background: var(--pink-200); color: var(--choc-800); } .container { width: min(var(--container-max), 100% - 48px); } @media (max-width: 600px) { .container { width: calc(100% - 32px); } } .section { padding: 72px 0; } .section--soft { background: var(--bg-page-soft); } svg { flex: none; } /* Pillen / Tags (Design-System „Tag“) */ .pill, .script, .heading .script, .rcp__body .script, .legal .script, .group-bar .script, .drinks .script { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 14px; border-radius: var(--radius-pill); font: 700 14px/1.1 var(--font-body); letter-spacing: 0; white-space: nowrap; background: var(--gold-100); color: var(--gold-700); border: 2px solid var(--gold-300); } .pill svg { width: 15px; height: 15px; } .script::before, .heading .script::before, .rcp__body .script::before, .legal .script::before, .group-bar .script::before { content: "✦"; font-size: 12px; } .pill--pink { background: var(--pink-100); color: var(--pink-700); border-color: var(--pink-300); } .pill--mint { background: var(--mint-100); color: var(--mint-700); border-color: var(--mint-300); } .pill--lav { background: var(--lav-100); color: var(--lav-700); border-color: var(--lav-300); } .heading .script { margin-bottom: 14px; } .heading h2 { font: var(--text-h2); font-size: clamp(30px, 4vw, 38px); } .heading p { color: var(--text-muted); } .divider { display: none; } /* Candy-Buttons (Design-System „Button“): Glanz oben, farbige Lippe unten, federnd */ .btn, .cbtn { --c-bg: var(--candy-pink); --c-lip: var(--pink-600); --c-fg: var(--choc-800); display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border: 2px solid rgba(255, 255, 255, .55); border-radius: var(--radius-pill); background: var(--c-bg); color: var(--c-fg); font: 600 17px/1 var(--font-display); letter-spacing: .01em; text-transform: none; white-space: nowrap; cursor: pointer; box-shadow: var(--gloss-inset), 0 5px 0 var(--c-lip), var(--shadow-soft); transition: transform var(--dur-base) var(--ease-bounce), box-shadow var(--dur-fast) ease; } .btn:hover, .cbtn:hover { background: var(--c-bg); border-color: rgba(255, 255, 255, .55); color: var(--c-fg); transform: translateY(-2px) scale(1.03); } .btn:active, .cbtn:active { transform: translateY(4px); box-shadow: var(--gloss-inset), 0 1px 0 var(--c-lip), 0 2px 6px rgba(122, 78, 46, .15); } .btn svg, .cbtn svg { width: 20px; height: 20px; } .cbtn--sm { height: 38px; padding: 0 16px; font-size: 15px; } .cbtn--sm svg { width: 16px; height: 16px; } .cbtn--lg { height: 60px; padding: 0 30px; font-size: 20px; } .cbtn--lg svg { width: 24px; height: 24px; } .cbtn--mint { --c-bg: var(--candy-mint); --c-lip: var(--mint-600); } .cbtn--magic { --c-bg: var(--candy-lav); --c-lip: var(--lav-600); } .cbtn--gold { --c-bg: var(--candy-gold); --c-lip: var(--gold-600); } .cbtn--ghost, .btn--line, .btn--ghost { --c-bg: var(--surface-card); --c-lip: var(--cream-400); --c-fg: var(--text-strong); } .btn--line:hover, .btn--ghost:hover { background: var(--surface-card); color: var(--text-strong); } /* Runde Icon-Buttons */ .icon-btn { color: var(--text-strong); } .icon-btn--round { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; background: var(--surface-card); border: 2px solid var(--cream-400); box-shadow: 0 3px 0 var(--cream-400); transition: transform var(--dur-base) var(--ease-bounce); } .icon-btn--round svg { width: 20px; height: 20px; } .icon-btn--round:hover { color: var(--pink-700); transform: translateY(-2px) rotate(-6deg); } /* ---------- Saison-Leiste ---------- */ .themebar { background: var(--choc-800); color: var(--cream-200); font: 600 14px/1.3 var(--font-display); } .themebar .container { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 38px; text-align: center; } .themebar a { color: var(--gold-300); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .themebar a:hover { color: var(--gold-200); } .themebar__ic { width: 16px; height: 16px; color: var(--gold-300); } /* ---------- Header ---------- */ .header { background: color-mix(in srgb, var(--cream-200) 88%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 2px solid rgba(239, 205, 152, .5); } .header.is-scrolled { box-shadow: var(--shadow-soft); } .header .header__row, .header.is-scrolled .header__row { display: flex; align-items: center; gap: 24px; min-height: 0; padding: 10px 0; } .header .logo { flex: none; padding: 0; line-height: 0; } .header .logo img { height: 92px; width: auto; transition: height var(--dur-slow) var(--ease-soft); } .header.is-scrolled .logo img { height: 64px; } .pillnav { position: relative; display: flex; gap: 6px; padding: 6px; margin-right: auto; border-radius: var(--radius-pill); background: var(--cream-300); box-shadow: inset 0 3px 6px rgba(122, 78, 46, .12); } .pillnav a { position: relative; z-index: 1; padding: 10px 18px; border-radius: var(--radius-pill); font: 600 17px/1 var(--font-display); color: var(--choc-600); white-space: nowrap; transition: color .2s ease, transform var(--dur-base) var(--ease-bounce); } .pillnav a:hover, .pillnav a.is-lit { color: var(--choc-800); } .pillnav a:hover { transform: translateY(-1px); } .pillnav__blob { position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; opacity: 0; border-radius: var(--radius-pill); pointer-events: none; background: var(--candy-pink); box-shadow: var(--gloss-inset), 0 3px 0 var(--pink-600); transition: left var(--dur-slow) var(--ease-bounce), width var(--dur-slow) var(--ease-bounce), opacity .2s ease; } .pillnav__blob.on { opacity: 1; } .pillnav a[aria-current="page"]:not(.is-lit) { color: var(--choc-800); } .header__tools { display: flex; align-items: center; gap: 12px; } .burger { display: none; } @media (max-width: 1100px) { .header__cta { display: none; } .pillnav a { padding: 10px 14px; font-size: 16px; } } @media (max-width: 900px) { .pillnav { display: none; } .burger { display: inline-grid; } .header .header__row, .header.is-scrolled .header__row { justify-content: space-between; padding: 8px 0; } .header .logo img, .header.is-scrolled .logo img { height: 64px; } } @media (max-width: 380px) { .header .logo img, .header.is-scrolled .logo img { height: 54px; } } /* Mobiles Menü */ .drawer__bg { background: rgba(46, 26, 58, .55); } .drawer__panel { background: var(--cream-100); border-radius: 0 var(--radius-lg) var(--radius-lg) 0; gap: 8px; padding: 24px 20px; } .drawer__panel a { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 0; border-radius: var(--radius-md); background: var(--surface-card); font: 600 18px/1 var(--font-display); letter-spacing: 0; text-transform: none; color: var(--text-strong); box-shadow: 0 3px 0 var(--cream-400); } .drawer__panel a svg { width: 20px; height: 20px; color: var(--pink-600); } .drawer__panel a:hover { background: var(--pink-100); } /* ---------- Bühne (Hero) ---------- */ .stage { position: relative; overflow: hidden; background: var(--bg-sparkle), var(--hero-bg); background-size: var(--sparkle-size); } .stage__grid { position: relative; display: grid; grid-template-columns: 1.1fr .9fr; gap: 40px; align-items: center; padding: 56px 0 72px; } .stage h1 { font: var(--text-hero); font-size: clamp(44px, 6.2vw, 72px); color: var(--hero-title); margin: 18px 0; } .stage__hl { color: var(--pink-500); text-shadow: 0 3px 0 var(--gold-300); } .stage__lead { font: var(--text-lead); color: var(--hero-text); max-width: 500px; margin: 0; } .stage__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; } .stage__media { position: relative; justify-self: center; } .blob { position: relative; width: min(400px, 78vw); aspect-ratio: 400 / 460; border-radius: 48% 52% 44% 56% / 50% 46% 54% 50%; overflow: hidden; border: 5px solid var(--gold-300); box-shadow: var(--shadow-pop); background: var(--white); animation: blobWobble 9s ease-in-out infinite; } .blob img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; } @keyframes blobWobble { 0%, 100% { border-radius: 48% 52% 44% 56% / 50% 46% 54% 50%; } 50% { border-radius: 54% 46% 52% 48% / 46% 54% 46% 54%; } } .deco { position: absolute; opacity: .7; pointer-events: none; animation: decoFloat 6s ease-in-out infinite; } .deco--1 { left: 4%; top: 14%; width: 64px; height: 64px; color: var(--lav-400); --r: -12deg; } .deco--2 { left: 44%; top: 8%; width: 40px; height: 40px; color: var(--pink-400); --r: 10deg; animation-delay: -1s; } .deco--3 { left: 90%; top: 18%; width: 56px; height: 56px; color: var(--mint-500); --r: 14deg; animation-delay: -2s; } .deco--4 { left: 8%; top: 78%; width: 44px; height: 44px; color: var(--gold-400); --r: 8deg; animation-delay: -3s; } .deco--5 { left: 52%; top: 86%; width: 36px; height: 36px; color: var(--lav-400); --r: -8deg; animation-delay: -4s; } .deco--6 { left: 95%; top: 70%; width: 48px; height: 48px; color: var(--pink-400); --r: -14deg; animation-delay: -5s; } .deco { transform: rotate(var(--r)); } @keyframes decoFloat { 0%, 100% { transform: translateY(0) rotate(var(--r)); } 50% { transform: translateY(-10px) rotate(var(--r)); } } .stage--page .stage__center { position: relative; text-align: center; padding: 64px 0 76px; } .stage--page h1 { font-size: clamp(56px, 10vw, 104px); margin: 16px 0 10px; } .stage--page .stage__lead { margin: 0 auto 18px; } .stage .crumbs { display: inline-flex; gap: 12px; align-items: center; font: 600 15px/1 var(--font-display); color: var(--hero-text); } .stage .crumbs a { color: var(--gold-300); } .stage .crumbs span { color: var(--pink-400); } @media (max-width: 900px) { .stage__grid { grid-template-columns: 1fr; gap: 28px; padding: 40px 0 56px; text-align: center; } .stage__lead { margin: 0 auto; } .stage__actions { justify-content: center; } .deco--2, .deco--5 { display: none; } } @media (max-width: 600px) { .stage__actions .cbtn--lg { height: 52px; padding: 0 22px; font-size: 17px; } .deco { width: 34px !important; height: 34px !important; } } /* ---------- Kategorien (Candy-Kreise) ---------- */ .cats { padding: 40px 0 8px; } .cat-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; } .cat-tile { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 150px; padding: 18px 10px; border-radius: var(--radius-lg); background: var(--surface-card); box-shadow: var(--shadow-soft); text-align: center; transition: transform var(--dur-slow) var(--ease-bounce), box-shadow var(--dur-base) ease; } .cat-tile:hover { transform: translateY(-6px) rotate(-1.5deg); box-shadow: var(--shadow-float); color: inherit; } .cat-tile__label { font: 600 17px/1.2 var(--font-display); color: var(--text-strong); } .candy { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; color: var(--choc-800); background: var(--candy-pink); box-shadow: var(--gloss-inset), 0 4px 0 var(--pink-600); } .candy svg { width: 30px; height: 30px; } .candy--mint { background: var(--candy-mint); box-shadow: var(--gloss-inset), 0 4px 0 var(--mint-600); } .candy--lav { background: var(--candy-lav); box-shadow: var(--gloss-inset), 0 4px 0 var(--lav-600); } .candy--gold { background: var(--candy-gold); box-shadow: var(--gloss-inset), 0 4px 0 var(--gold-600); } .cat-tile:hover .candy { animation: candyBounce .6s var(--ease-bounce); } @keyframes candyBounce { 30% { transform: scale(1.12) rotate(-8deg); } 60% { transform: scale(.96) rotate(4deg); } } @media (max-width: 600px) { .cat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .cat-tile { width: auto; padding: 14px 6px; } .cat-tile__label { font-size: 15px; } .candy { width: 54px; height: 54px; } .candy svg { width: 26px; height: 26px; } } /* ---------- Abschnitts-Kopf ---------- */ .section-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; } .section-head h2 { font: var(--text-h2); font-size: clamp(28px, 4vw, 38px); margin: 0; } .section-head__link { display: inline-flex; align-items: center; gap: 6px; font: 700 16px var(--font-body); color: var(--link); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; } .section-head__link svg { width: 18px; height: 18px; transition: transform var(--dur-base) var(--ease-bounce); } .section-head__link:hover svg { transform: translateX(4px); } .section-head__note { font: 700 15px var(--font-body); color: var(--text-muted); } /* Filter als Tag-Chips */ .filters { justify-content: flex-start; gap: 8px; margin: 0 0 28px; } .filters button { height: 36px; padding: 0 16px; border-radius: var(--radius-pill); border: 2px solid var(--cream-400); background: var(--cream-100); font: 700 14px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--choc-700); transition: all var(--dur-fast) ease; } .filters button::after { display: none; } .filters button:hover { background: var(--pink-100); border-color: var(--pink-300); color: var(--pink-700); } .filters button.active { background: var(--pink-300); border-color: var(--pink-400); color: var(--choc-800); box-shadow: 0 3px 0 var(--pink-500); } /* ---------- Rezeptkarten (Design-System „RecipeCard“) ---------- */ .recipe-grid { gap: 28px 24px; } .recipe { display: flex; flex-direction: column; background: var(--surface-card); border-radius: var(--radius-xl); padding: 10px 10px 18px; box-shadow: var(--shadow-float); transition: transform var(--dur-slow) var(--ease-bounce), box-shadow var(--dur-base) ease; } .recipe:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--shadow-pop); } .recipe__img { aspect-ratio: 4 / 3; border-radius: 28px; margin: 0 0 14px; background: var(--pink-200); } .recipe__img img { transition: transform var(--dur-slow) var(--ease-soft); } .recipe:hover .recipe__img img { transform: scale(1.05); } .recipe > :not(.recipe__img) { margin-left: 10px; margin-right: 10px; } .recipe h3 { order: 1; font: 600 22px/1.2 var(--font-display); margin-bottom: 8px; } .recipe h3 a:hover { color: var(--pink-700); } .recipe p { order: 2; font-size: 15px; color: var(--text-muted); } .recipe .meta { order: 3; font: 600 14px var(--font-body); color: var(--text-muted); gap: 6px 14px; } .recipe .meta svg { width: 16px; height: 16px; color: var(--text-muted); } .recipe .meta span + span svg { color: var(--pink-600); } .recipe .more-link { order: 4; margin-top: 6px; } .more-link { font: 700 15px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--link); } .more-link svg { width: 18px; height: 18px; } .tag { top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: var(--radius-pill); font: 700 12.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--choc-800); background: var(--candy-gold); border: 2px solid rgba(255, 255, 255, .6); box-shadow: var(--gloss-inset), 0 3px 0 var(--gold-600); } .tag svg { width: 14px; height: 14px; } .tag--halloween { background: var(--candy-lav); box-shadow: var(--gloss-inset), 0 3px 0 var(--lav-600); color: var(--choc-800); } .center { margin-top: 44px; } /* ---------- Rezept-Finder (Karte in Lavendel mit Goldrand) ---------- */ .finder { padding: 56px 0 8px; } .finder__box { background: var(--lav-100); border: var(--stroke-gold); border-radius: var(--radius-xl); box-shadow: var(--shadow-float); padding: 40px clamp(18px, 5vw, 52px); } .finder__box h2 { font: var(--text-h2); font-size: clamp(26px, 3.6vw, 38px); margin: 14px 0 22px; } .finder__form { gap: 10px; align-items: center; background: transparent; box-shadow: none; padding: 0; } .finder__form input { height: 52px; padding: 0 22px; border-radius: var(--radius-pill); border: 2px solid var(--cream-400); background: var(--surface-raised); font: 500 17px var(--font-body); color: var(--text-strong); box-shadow: inset 0 3px 6px rgba(122, 78, 46, .08); outline: none; transition: border-color var(--dur-fast) ease, box-shadow var(--dur-fast) ease; } .finder__form input:focus { border-color: var(--lav-400); box-shadow: 0 0 0 4px var(--lav-200); } .finder__chips button { height: 34px; padding: 0 14px; border-radius: var(--radius-pill); border: 2px solid var(--cream-400); background: var(--cream-50); font: 700 14px/1 var(--font-body); color: var(--choc-700); } .finder__chips button:hover { background: var(--pink-300); border-color: var(--pink-400); color: var(--choc-800); } .finder__note { font-size: 14px; color: var(--text-muted); } .finder__note a, .legal a { color: var(--link); } .finder__intro { font: 600 20px/1.4 var(--font-display); color: var(--text-strong); } .finder__loading span { border-color: var(--lav-500); border-right-color: transparent; } .finder__card { background: var(--surface-card); border-radius: var(--radius-lg); border: var(--card-border); box-shadow: var(--shadow-soft); padding: 8px; gap: 12px; transition: transform var(--dur-slow) var(--ease-bounce), box-shadow var(--dur-base) ease; } .finder__card:hover { transform: translateY(-4px) rotate(-.6deg); box-shadow: var(--shadow-float); } .finder__img { flex-basis: 108px; border-radius: 18px; overflow: hidden; } .finder__body { padding: 6px 6px 6px 0; } .finder__body small { font: 700 12px/1.2 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--pink-700); } .finder__body strong { font: 600 18px/1.25 var(--font-display); color: var(--text-strong); } .finder__body em { font-size: 14.5px; color: var(--text-body); } .finder__chips-row span { font: 700 12px/1 var(--font-body); background: var(--mint-100); border: 2px solid var(--mint-300); color: var(--mint-700); padding: 4px 9px; border-radius: var(--radius-pill); } .finder__allergy { background: var(--warning-bg); border: 2px solid var(--gold-300); border-radius: var(--radius-md); color: var(--gold-700); font-weight: 600; } .finder__fallback { color: var(--text-muted); } @media (max-width: 700px) { .finder__form { align-items: stretch; } .finder__form input { flex: none; width: 100%; height: 56px; padding: 0 20px; } .finder__form .cbtn { width: 100%; } } /* ---------- Rezept der Woche ---------- */ .rotw { background: none; color: var(--hero-text); padding: 72px 0 0; overflow: visible; } .rotw .container { display: block; min-height: 0; } .rotw__card { position: relative; display: grid; grid-template-columns: 1fr 1fr; border-radius: var(--radius-blob); overflow: hidden; background: var(--bg-sparkle), var(--hero-bg); background-size: var(--sparkle-size); border: 5px solid var(--gold-300); box-shadow: var(--shadow-pop); } .rotw__img { position: relative; width: auto; min-height: 520px; background: url("img/rotw-mumien.webp?v=12f371fedb") center / cover; } .rotw__body { grid-column: 2; padding: 48px 48px 52px; } .rotw h2 { font: var(--text-h1); font-size: clamp(34px, 4.4vw, 52px); color: var(--hero-title); margin: 16px 0 14px; } .rotw__facts { gap: 10px; margin: 24px 0; } .rotw__facts div { background: rgba(255, 255, 255, .08); border: 2px solid rgba(255, 255, 255, .16); border-radius: var(--radius-md); padding: 12px 16px; min-width: 104px; } .rotw__facts small { font: 700 12px var(--font-body); letter-spacing: .04em; color: var(--lav-200); } .rotw__facts strong { font: 600 19px/1.3 var(--font-display); color: var(--hero-title); } .ingredients li { font-size: 15px; padding-left: 22px; } .ingredients li::before { content: "✦"; width: auto; height: auto; background: none; top: 7px; font-size: 12px; color: var(--gold-300); } @media (max-width: 900px) { .rotw__card { grid-template-columns: 1fr; } .rotw__img { min-height: 300px; } .rotw__body { grid-column: 1; padding: 32px 24px 36px; } } /* ---------- Über Alexa ---------- */ .about__media:has(.img-main--cutout)::before { background: radial-gradient(circle at 40% 35%, var(--lav-100) 0%, var(--lav-200) 55%, var(--lav-300) 100%); border: 5px solid var(--gold-300); box-shadow: var(--shadow-float); } .about__text h2 { font: var(--text-h1); font-size: clamp(32px, 4vw, 46px); margin: 16px 0 20px; } .about__text .lead { font: 600 20px/1.5 var(--font-display); color: var(--lav-700); } .stats { border: 0; padding: 0; gap: 12px; } .stat { background: var(--pink-100); border: 2px solid var(--pink-300); border-radius: var(--radius-md); padding: 16px 12px; text-align: center; } .stat--mint { background: var(--mint-100); border-color: var(--mint-300); } .stat--lav { background: var(--lav-100); border-color: var(--lav-300); } .stats strong { font: 700 40px/1 var(--font-display); color: var(--pink-700); } .stat--mint strong { color: var(--mint-700); } .stat--lav strong { color: var(--lav-700); } .stats span { font: 700 13px var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--text-muted); } .signature { flex-wrap: wrap; } .signature__name { font: 700 24px/1 var(--font-display); color: var(--pink-600); } .avatar-round { border: 3px solid var(--gold-300); box-shadow: var(--shadow-soft); } /* ---------- Backschule ---------- */ .post { border-radius: var(--radius-xl); border: 4px solid var(--surface-card); box-shadow: var(--shadow-float); } .post::after { background: linear-gradient(0deg, rgba(46, 26, 58, .88) 0%, rgba(46, 26, 58, .1) 65%); } .post__body h3 { font-family: var(--font-display); } .post__date { font: 700 12.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--choc-800); background: var(--candy-gold); box-shadow: var(--gloss-inset), 0 3px 0 var(--gold-600); } .post .more { font: 700 14px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--gold-200); } /* ---------- Karten: Backregeln + Kontakt ---------- */ .duo__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; } .card { background: var(--surface-card); border-radius: var(--radius-lg); border: var(--card-border); box-shadow: var(--shadow-float); padding: 32px; scroll-margin-top: 110px; } .card--mint { background: var(--mint-100); } .card--lav { background: var(--lav-100); } .card--gold { border: var(--stroke-gold); } .card__icon { width: 36px; height: 36px; color: var(--mint-700); } .card--lav .card__icon { color: var(--lav-700); } .card h3 { font: var(--text-h3); margin: 12px 0 8px; } .card__small { margin: 12px 0 0; font: 700 14px var(--font-body); color: var(--text-muted); } .rules { list-style: none; counter-reset: rule; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; } .rules li { counter-increment: rule; position: relative; padding-left: 48px; min-height: 34px; } .rules li::before { content: counter(rule); position: absolute; left: 0; top: -2px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font: 700 17px/1 var(--font-display); color: var(--choc-800); background: var(--candy-mint); box-shadow: var(--gloss-inset), 0 3px 0 var(--mint-600); } .rules strong { font-family: var(--font-display); font-weight: 600; color: var(--text-strong); } @media (max-width: 900px) { .duo__grid { grid-template-columns: 1fr; } } /* Kontakt-Bereich auf Unterseiten (alte Struktur) */ .newsletter { background: none; padding: 72px 0 0; } .newsletter .container { background: var(--lav-100); border-radius: var(--radius-xl); border: var(--card-border); box-shadow: var(--shadow-float); padding: 36px clamp(20px, 4vw, 44px); gap: 28px; } .newsletter h2 { font: var(--text-h3); margin: 12px 0 8px; } .newsletter p, .nl-note { color: var(--text-muted); } .kontakt-box .btn { --c-bg: var(--candy-lav); --c-lip: var(--lav-600); } /* ---------- Footer ---------- */ .footer { margin-top: 80px; background: var(--choc-800); color: var(--cream-100); border-radius: var(--radius-blob) var(--radius-blob) 0 0; padding-top: 56px; font-size: 15px; } .footer__grid { grid-template-columns: 2fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 36px; } .footer__brand { font: 700 32px/1 var(--font-display); color: var(--pink-300); margin-bottom: 16px; } .footer p { color: var(--cream-300); max-width: 340px; font-size: 15px; } .footer h4 { font: 600 18px/1.2 var(--font-display); color: var(--gold-300); margin-bottom: 12px; } .footer li a { color: var(--cream-200); } .footer li a:hover { color: var(--pink-300); } .footer__author { color: var(--cream-200); } .footer__author img { border: 3px solid var(--gold-300); } .footer__author strong { color: var(--cream-50); } .footer__bottom { border-top: 2px solid rgba(255, 255, 255, .08); color: var(--cream-300); font-size: 13.5px; } .footer__bottom a { color: var(--cream-100); } .footer__bottom .container { align-items: center; } .footer__spark { color: var(--gold-300); letter-spacing: .3em; } .ai-note { color: var(--lav-200); } @media (max-width: 1100px) { .footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 600px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } .footer { border-radius: 36px 36px 0 0; } } /* Nach oben */ .to-top { width: 52px; height: 52px; background: var(--candy-pink); color: var(--choc-800); border: 2px solid rgba(255, 255, 255, .55); box-shadow: var(--gloss-inset), 0 4px 0 var(--pink-600), var(--shadow-soft); } .to-top:hover { background: var(--candy-pink); color: var(--choc-800); } .to-top.show:hover { transform: translateY(-3px); } .to-top svg { width: 22px; height: 22px; } /* ---------- KI-Kennzeichnung am Bild (EU AI Act Art. 50) ---------- */ .blob::after { content: "KI-generiert"; position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 3; pointer-events: none; } .blob::after, .rotw__img::after, .recipe__img::after, .post::before, .finder__img::after, .rcp__media::after, .drink__img::after, .group-tile::before { font: 700 10.5px/1 var(--font-body); letter-spacing: .04em; text-transform: uppercase; color: var(--cream-50); background: var(--ki-bg); padding: 5px 9px; border-radius: var(--radius-pill); } .finder__img::after { font-size: 8.5px; padding: 4px 6px; } /* ---------- Rechtsseiten ---------- */ .legal { padding: 64px 0 40px; } .legal .container { background: var(--surface-card); border-radius: var(--radius-xl); border: var(--card-border); box-shadow: var(--shadow-float); padding: 44px clamp(20px, 5vw, 56px); } .legal h1 { font: var(--text-h1); font-size: clamp(34px, 5vw, 52px); margin: 16px 0 24px; } .legal h2 { font: var(--text-h4); font-size: 24px; border-top: 2px dashed var(--cream-400); } .legal h3 { font-size: 19px; } .legal__brand { background: var(--gold-100); border: 2px solid var(--gold-300); border-radius: var(--radius-md); } .legal__date { color: var(--text-muted); } /* Reveal: etwas federnder */ .reveal { transform: translateY(30px) scale(.98); transition: opacity .7s var(--ease-soft), transform .8s var(--ease-bounce); } .reveal.in { transform: none; } @media (prefers-reduced-motion: reduce) { .blob, .deco { animation: none !important; } } /* ===================================================================== Rezeptseite ===================================================================== */ .kids-note { padding: 48px 0 0; } .kids-note__box { background: var(--surface-card); border: var(--stroke-gold); border-radius: var(--radius-lg); box-shadow: var(--shadow-soft); } .kids-note__box img { box-shadow: 0 0 0 3px var(--gold-300); } .kids-note__box strong { font: 600 18px var(--font-display); color: var(--text-strong); } .help { font: 700 11.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--pink-700); background: var(--pink-100); border: 2px solid var(--pink-300); padding: 4px 9px; } /* Gruppen-Kacheln */ .groups { padding: 64px 0 72px; } .group-tile { border-radius: var(--radius-lg); border: 4px solid var(--surface-card); box-shadow: var(--shadow-float); background: var(--lav-600); transition: transform var(--dur-slow) var(--ease-bounce), box-shadow var(--dur-base) ease; } .group-tile::after { background: linear-gradient(0deg, rgba(46, 26, 58, .86) 0%, rgba(46, 26, 58, .04) 62%); } .group-tile strong { font: 600 clamp(19px, 2vw, 24px)/1.15 var(--font-display); color: var(--cream-50); } .group-tile small { font: 700 12.5px/1 var(--font-body); letter-spacing: 0; text-transform: none; color: var(--gold-300); } .group-tile:hover, .group-tile:focus-visible { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--shadow-pop); } .group-tile.is-active { outline: 4px solid var(--pink-400); outline-offset: 3px; } @media (min-width: 1101px) { .group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; } .group-tile { aspect-ratio: 4 / 3; } .group-tile strong { font-size: 21px; } } .group-bar { background: var(--bg-sparkle), var(--hero-bg); background-size: var(--sparkle-size); color: var(--hero-text); padding: 32px 0; } .group-bar h2 { font: var(--text-h2); font-size: clamp(28px, 3.6vw, 38px); color: var(--hero-title); margin-top: 10px; } .group-bar p { font: 700 14px var(--font-body); letter-spacing: 0; text-transform: none; color: var(--lav-200); } .group-bar .btn--line { color: var(--text-strong); border-color: rgba(255, 255, 255, .55); } /* Rezept-Abschnitte */ .rcp { padding: 80px 0; } .rcp.is-even { background: var(--bg-page-soft); } .rcp__media img { border-radius: var(--radius-xl); border: 5px solid var(--gold-300); box-shadow: var(--shadow-pop); } .rcp__num, .rcp.is-even .rcp__num { width: 84px; height: 84px; top: -22px; left: -22px; font: 700 30px/1 var(--font-display); color: var(--choc-800); background: var(--candy-pink); border: 5px solid var(--surface-card); box-shadow: var(--gloss-inset), 0 5px 0 var(--pink-600), var(--shadow-soft); } .rcp.is-even .rcp__num { left: auto; right: -22px; } .rcp__body h2 { font: var(--text-h1); font-size: clamp(32px, 4vw, 46px); margin: 16px 0 16px; } .rcp__intro { font-size: 17px; } .facts { gap: 10px; border: 0; margin: 26px 0; } .facts div, .facts div + div { background: var(--surface-card); border: 2px solid var(--cream-400); border-radius: var(--radius-md); padding: 14px 8px; } .facts svg { color: var(--pink-600); } .facts small { font: 700 12px var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--text-muted); } .facts strong { font: 600 17px/1.3 var(--font-display); color: var(--text-strong); } .rcp__toolbar h3, .rcp__body > h3 { font: var(--text-h3); font-size: 26px; } .servings { background: var(--cream-300); border: 0; box-shadow: inset 0 3px 6px rgba(122, 78, 46, .12); padding: 5px; gap: 6px; } .servings button { width: 36px; height: 36px; font: 700 20px/1 var(--font-display); color: var(--choc-800); background: var(--candy-pink); box-shadow: var(--gloss-inset), 0 3px 0 var(--pink-600); transition: transform var(--dur-base) var(--ease-bounce); } .servings button:hover { background: var(--candy-pink); color: var(--choc-800); transform: scale(1.08); } .servings button:active { transform: translateY(2px); } .servings output { font: 600 15px/1 var(--font-display); color: var(--text-strong); } .ing-group h4 { font: 700 13px/1.2 var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--pink-700); } .ing li { font-size: 16px; border-bottom: 2px dotted var(--cream-400); } .ing li::before { width: 18px; height: 18px; border: 2px solid var(--pink-500); border-radius: 6px; background-color: var(--surface-raised); transform: translateY(3px); } .ing li.done::before { background-color: var(--pink-500); } .ing b { color: var(--text-strong); } .steps li { padding-left: 62px; } .steps li::before { width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, .55); color: var(--choc-800); font: 700 16px/1 var(--font-display); background: var(--candy-lav); box-shadow: var(--gloss-inset), 0 3px 0 var(--lav-600); } .steps li:not(:last-child)::after { width: 3px; left: 21px; border-radius: 3px; background: var(--lav-200); } .steps li.done::before { background: var(--candy-mint); box-shadow: var(--gloss-inset), 0 3px 0 var(--mint-600); } .steps strong { font: 600 18px/1.35 var(--font-display); color: var(--text-strong); } .tip, .rcp:not(.is-even) .tip { background: var(--mint-100); border: 2px solid var(--mint-300); border-radius: var(--radius-md); box-shadow: none; } .tip svg { color: var(--mint-700); } .tip strong { font-family: var(--font-display); color: var(--text-strong); } .caffeine { background: var(--mint-100); border: 2px solid var(--mint-300); border-radius: var(--radius-md); } .caffeine strong { color: var(--mint-700); } /* Halloween-Rezepte: Nachtviolett mit Funkeln */ .rcp--halloween { background: var(--bg-sparkle), var(--hero-bg) !important; background-size: var(--sparkle-size) !important; color: var(--hero-text); } .rcp--halloween h2, .rcp--halloween h3, .rcp--halloween .rcp__toolbar h3, .rcp--halloween .rcp__body > h3, .rcp--halloween .steps strong, .rcp--halloween .ing b { color: var(--hero-title); } .rcp--halloween .facts div { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); } .rcp--halloween .facts strong { color: var(--hero-title); } .rcp--halloween .facts small { color: var(--lav-200); } .rcp--halloween .facts svg { color: var(--pink-400); } .rcp--halloween .ing li { border-color: rgba(255, 255, 255, .16); } .rcp--halloween .ing li::before { background-color: transparent; border-color: var(--pink-400); } .rcp--halloween .ing li.done::before { background-color: var(--pink-500); } .rcp--halloween .ing li.done, .rcp--halloween .ing li.done b { color: var(--lav-300); } .rcp--halloween .ing-group h4 { color: var(--pink-300); } .rcp--halloween .steps li:not(:last-child)::after { background: rgba(255, 255, 255, .18); } .rcp--halloween .tip { background: rgba(255, 255, 255, .08) !important; border-color: rgba(255, 255, 255, .16); color: var(--hero-text); } .rcp--halloween .tip strong { color: var(--hero-title); } .rcp--halloween .tip svg { color: var(--mint-400); } .rcp--halloween .servings { background: rgba(255, 255, 255, .1); box-shadow: none; } .rcp--halloween .servings output { color: var(--hero-title); } .rcp--halloween .rcp__num { border-color: var(--choc-800) !important; } .rcp--halloween .btn--line { color: var(--text-strong); border-color: rgba(255, 255, 255, .55); } .rcp--halloween .help { background: rgba(255, 162, 79, .16); border-color: var(--pink-400); color: var(--pink-200); } .rcp--halloween .script { background: rgba(242, 180, 60, .16); border-color: var(--gold-400); color: var(--gold-200); } /* Getränke */ .drinks { background: var(--lav-100); } .drink { border-radius: var(--radius-xl); padding: 10px; background: var(--surface-card); box-shadow: var(--shadow-float); transition: transform var(--dur-slow) var(--ease-bounce), box-shadow var(--dur-base) ease; } .drink:hover { transform: translateY(-6px) rotate(-.8deg); box-shadow: var(--shadow-pop); } .drink__img { border-radius: 28px; } .drink__body { padding: 18px 12px 12px; } .drink__body h3 { font: 600 24px/1.2 var(--font-display); } .drink__body h4 { font: 700 13px var(--font-body); letter-spacing: .02em; text-transform: none; color: var(--pink-700); } .drink__steps li::marker { color: var(--lav-600); } .drink .ing li { font-size: 15px; } @media (max-width: 900px) { .rcp { padding: 64px 0; } .rcp__num, .rcp.is-even .rcp__num { left: 14px; right: auto; top: -26px; width: 70px; height: 70px; font-size: 26px; } } @media (max-width: 600px) { .facts div:nth-child(n) { border-left: 2px solid var(--cream-400); border-top: 2px solid var(--cream-400); } .rcp--halloween .facts div:nth-child(n) { border-color: rgba(255, 255, 255, .16); } } @media (min-width: 901px) and (max-width: 1100px) { .group-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } .group-tile { aspect-ratio: 4 / 3; } } /* ---------- Lieblingsrezepte (Herz) ---------- */ .fav { position: absolute; z-index: 7; top: 12px; right: 12px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer; color: var(--choc-600); background: rgba(255, 251, 243, .94); box-shadow: var(--shadow-soft); transition: transform var(--dur-base) var(--ease-bounce), color var(--dur-fast) ease; } .fav svg { width: 22px; height: 22px; fill: transparent; transition: fill var(--dur-fast) ease; } .fav:hover { transform: scale(1.1); color: var(--cherry-500); } .fav[aria-pressed="true"] { color: var(--cherry-500); } .fav[aria-pressed="true"] svg { fill: currentColor; } .fav.pop { animation: favPop .5s var(--ease-bounce); } @keyframes favPop { 0% { transform: scale(1); } 35% { transform: scale(1.35) rotate(-10deg); } 70% { transform: scale(.92) rotate(4deg); } 100% { transform: scale(1); } } /* Rezeptseite: oben rechts sitzt bei jedem zweiten Rezept die Nummer → Herz unten links */ .rcp__media .fav { top: auto; right: auto; bottom: 14px; left: 14px; width: 52px; height: 52px; } .rcp__media .fav svg { width: 26px; height: 26px; } .recipe { position: relative; } .recipe > .fav { top: 20px; right: 20px; margin: 0; } .drink__img .fav { top: 10px; right: 10px; } /* Header-Herz mit Zähler */ .fav-link { position: relative; } .fav-link svg { transition: fill var(--dur-fast) ease; } .fav-link:has(.fav-count:not([hidden])) { color: var(--cherry-500); } .fav-link:has(.fav-count:not([hidden])) svg { fill: currentColor; } .fav-count { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--radius-pill); display: grid; place-items: center; font: 700 12px/1 var(--font-body); color: var(--white); background: var(--cherry-500); border: 2px solid var(--cream-100); } .fav-count[hidden] { display: none; } .fav-group { --c-bg: var(--candy-pink); --c-lip: var(--pink-600); } .groups__all { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; } /* Toast */ .fav-toast { position: fixed; z-index: 200; left: 50%; bottom: 24px; transform: translate(-50%, 140%); max-width: calc(100% - 32px); padding: 12px 20px; border-radius: var(--radius-pill); background: var(--choc-800); color: var(--cream-50); font: 600 15px/1.3 var(--font-display); box-shadow: var(--shadow-pop); text-align: center; transition: transform var(--dur-slow) var(--ease-bounce); pointer-events: none; } .fav-toast.show { transform: translate(-50%, 0); } @media print { .fav, .fav-toast { display: none !important; } } /* ---------- Vegan / vegetarisch ---------- */ .diet { display: inline-flex; align-items: center; gap: 5px; min-height: 28px; padding: 3px 12px; margin-left: 8px; vertical-align: middle; border-radius: var(--radius-pill); font: 700 13px/1.1 var(--font-body); background: var(--mint-100); color: var(--mint-700); border: 2px solid var(--mint-300); } .diet::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: currentColor; } .diet--vegan { background: var(--mint-300); color: var(--mint-700); border-color: var(--mint-500); } .drink__body .diet { margin: -6px 0 10px; } .rcp--halloween .diet { background: rgba(140, 196, 67, .18); color: var(--mint-300); border-color: var(--mint-500); } /* Gruppenraster: Kacheln zentriert, egal wie viele */ .group-grid { display: flex; flex-wrap: wrap; justify-content: center; } .group-grid .group-tile { flex: 0 0 calc((100% - 3 * 22px) / 4); } @media (min-width: 901px) and (max-width: 1100px) { .group-grid .group-tile { flex-basis: calc((100% - 3 * 16px) / 4); } } @media (max-width: 900px) { .group-grid .group-tile { flex-basis: calc((100% - 16px) / 2); } }