/* ==========================================================================
myprecious.ch – Central Style Engine (Vollständig & Komplett)
========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;600;700&family=Plus+Jakarta+Sans:wght@500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cherry+Cream+Soda&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Protest+Revolution&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

/* --------------------------------------------------------------------------

Theme-Variablen & Definitionen
-------------------------------------------------------------------------- */

/* Vintage Grün (Pastell-Türkis) */
:root,
html[data-theme="green"] {
--bg-color: #a3d9cf;
--card-bg: #fefbf3;
--text-main: #2b1f17;
--text-stroke: #25463b;
--accent-red: #d9534f;
--badge-bg: #40826d;
}

/* Diner Blau (Heller & freundlicher) */
html[data-theme="blue"] {
--bg-color: #8ab4d1;
--card-bg: #fdfbf7;
--text-main: #1c2d37;
--text-stroke: #1f3a4d;
--accent-red: #e65c5c;
--badge-bg: #5fa8d3;
}

/* Bubblegum Pink */
html[data-theme="pink"] {
--bg-color: #ff7bc0;
--card-bg: #fff5fc;
--text-main: #3a1529;
--text-stroke: #2e0f20;
--accent-red: #ff2a6d;
--badge-bg: #ff1493;
}

/* Vintage Gelb (Viel sanfter & cremiger) */
html[data-theme="yellow"] {
--bg-color: #fcf5e5;
--card-bg: #fffdf9;
--text-main: #3d311d;
--text-stroke: #4a3d24;
--accent-red: #d9534f;
--badge-bg: #d4a373;
}

/* Dark Mode */
html[data-theme="dark"] {
--bg-color: #1a1c1e;
--card-bg: #282b2e;
--text-main: #e2e4e6;
--text-stroke: #f0f2f5;
--accent-red: #ff6b6b;
--badge-bg: #d3a245;
}

/* Editorial Studio / Matrix */
html[data-theme="editorial"] {
--bg-color: #030803 !important;
--card-bg: #050f05 !important;
--text-main: #00ff66 !important;
--text-stroke: #00ff66 !important;
--accent-red: #ff0055 !important;
--badge-bg: #008f3f !important;
}

/* Vice City (Synthwave / 80s Retro Farbpalette) */
html[data-theme="vicecity"] {
--bg-color: #0b0f2b !important;
--card-bg: #13173d !important;
--text-main: #ffffff !important;
--text-stroke: #ff5ca8 !important;
--accent-red: #ff2a6d !important;
--badge-bg: #00f0ff !important;
}

/* Vice City Custom Styling */
html[data-theme="vicecity"] .recipe-card,
html[data-theme="vicecity"] .collection-card,
html[data-theme="vicecity"] .filter-bar,
html[data-theme="vicecity"] .view-recipe-container,
html[data-theme="vicecity"] .sf-editor-container,
html[data-theme="vicecity"] .login-box,
html[data-theme="vicecity"] .rating-box,
html[data-theme="vicecity"] .recipe-meta-bar,
html[data-theme="vicecity"] .collection-item {
background-color: #13173d !important;
border: none !important;
box-shadow: -8px -8px 20px rgba(188, 108, 255, 0.25);
border-radius: 16px !important;
color: #ffffff !important;
}

html[data-theme="vicecity"] .site-header,
html[data-theme="vicecity"] .site-footer {
background-color: rgba(11, 15, 43, 0.9) !important;
border-color: #ffb86b !important;
color: #ffb86b !important;
}

html[data-theme="vicecity"] .search-input,
html[data-theme="vicecity"] .filter-select,
html[data-theme="vicecity"] .form-input-text,
html[data-theme="vicecity"] .form-textarea,
html[data-theme="vicecity"] .form-select,
html[data-theme="vicecity"] .theme-select {
background-color: #0b0f2b !important;
border: 1px solid #00f0ff !important;
color: #00f0ff !important;
}

/* Matrix Scanlines */
html[data-theme="editorial"] body::before {
content: " ";
display: block;
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 255, 0, 0.05) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.02), rgba(0, 255, 0, 0.01), rgba(0, 0, 255, 0.02));
z-index: 99999;
background-size: 100% 4px, 6px 100%;
pointer-events: none;
}

/* Nordic Light Theme */
html[data-theme="nordiclight"] {
--bg-color: #f6f5f0;
--card-bg: #ffffff;
--text-main: #2f3834;
--text-stroke: #2f3834;
--accent-red: #b85d4d;
--badge-bg: #7c9082;
}

/* --------------------------------------------------------------------------
2. Einheitliche Schriftarten & Globale Resets (Behoben: Box-Sizing & Overflow)
-------------------------------------------------------------------------- */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
min-width: 0;
}

html, body {
width: 100%;
max-width: 100vw;
overflow-x: hidden;
}

body {
background-color: var(--bg-color);
font-family: 'Quicksand', sans-serif !important;
color: var(--text-main);
min-height: 100vh;
display: flex;
flex-direction: column;
transition: background-color 0.2s ease, color 0.2s ease;
overflow-wrap: break-word;
word-break: break-word;
}

h1,
.section-title {
font-family: 'Protest Revolution', cursive, sans-serif !important;
font-size: 2.4rem !important;
font-weight: 400 !important;
letter-spacing: 0.03em;
color: var(--text-stroke);
margin-bottom: 14px;
line-height: 1.15;
}

h2,
.recipe-view-title {
font-family: 'Protest Revolution', cursive, sans-serif !important;
font-size: 2.0rem !important;
font-weight: 400 !important;
letter-spacing: 0.03em;
color: var(--text-stroke);
margin-bottom: 12px;
line-height: 1.2;
}

h3,
.sf-label-title,
.popup-title {
font-family: 'Protest Revolution', cursive, sans-serif !important;
font-size: 1.6rem !important;
font-weight: 400 !important;
letter-spacing: 0.02em;
color: var(--text-stroke);
margin-bottom: 10px;
}

h4,
.filter-title-label {
font-family: 'Protest Revolution', cursive, sans-serif !important;
font-size: 1.3rem !important;
font-weight: 400 !important;
color: var(--text-stroke);
}

.brand-title {
font-family: 'Protest Revolution', cursive, sans-serif !important;
font-size: 2.2rem !important;
font-weight: 400 !important;
line-height: 1.0;
color: var(--text-stroke);
}

/* --------------------------------------------------------------------------
Nachhaltige Fixierung für Rezept- & Sammlungs-Titel
-------------------------------------------------------------------------- */
.recipe-title,
.collection-card .recipe-title,
.collection-card a,
.collection-card span,
.collection-title,
.collection-name {
font-family: 'Quicksand', sans-serif !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--text-stroke) !important;
text-align: center !important;
line-height: 1.25em !important;
height: 3.75em !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
white-space: normal !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
}

/* --------------------------------------------------------------------------
3. Header & Navigation
-------------------------------------------------------------------------- */
.site-header {
width: 100%;
padding: 12px 15px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 12px;
background-color: rgba(254, 251, 243, 0.4);
border-bottom: 2px solid rgba(54, 34, 25, 0.15);
}

.header-brand-block { flex: 0 1 auto; }

.brand-link {
text-decoration: none;
color: var(--text-stroke);
display: flex;
flex-direction: column;
}

.brand-subtitle { font-size: 0.75rem; font-weight: 700; color: var(--text-stroke); margin-top: 2px; opacity: 0.9; }

.header-search {
flex: 1 1 100%;
max-width: 100%;
display: flex;
justify-content: center;
order: 3;
}

@media (min-width: 768px) {
.header-search { flex: 1 1 250px; max-width: 420px; order: unset; }
}

.search-input {
width: 100%;
padding: 8px 36px 8px 16px;
border-radius: 25px;
border: 2px solid var(--text-stroke);
background-color: var(--card-bg);
font-size: 0.9rem;
color: var(--text-main);
outline: none;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.header-nav { flex: 0 1 auto; order: 2; }
.nav-list { display: flex; flex-wrap: wrap; list-style: none; gap: 10px; align-items: center; }
.nav-link { text-decoration: none; color: var(--text-stroke); font-weight: 700; font-size: 0.9rem; white-space: nowrap; }

.user-dropdown-container {
position: relative;
display: inline-block;
}

.user-badge-btn {
background: rgba(254, 251, 243, 0.7);
border: 1px solid var(--text-stroke);
padding: 5px 10px;
border-radius: 12px;
font-size: 0.8rem;
font-weight: 700;
color: var(--text-stroke);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
}

.user-avatar-img {
width: 22px !important;
height: 22px !important;
min-width: 22px !important;
min-height: 22px !important;
border-radius: 50%;
object-fit: cover;
}

/* --------------------------------------------------------------------------
3b. Dropdown-System
-------------------------------------------------------------------------- */
:root {
--dd-dur: 0.4s;
--dd-ease: cubic-bezier(0.22, 0.8, 0.24, 1);
--dd-close-delay: 0.12s;
}

@keyframes dd-roll {
from { clip-path: inset(-14px -40px 100% -40px); }
to   { clip-path: inset(-14px -40px -40px -40px); }
}

.dd { position: relative; display: inline-block; }
.dd-trigger { cursor: pointer; }

.dd-arrow, .dropdown-arrow {
display: inline-block;
font-size: 0.8em;
line-height: 1;
transition: transform var(--dd-dur) var(--dd-ease);
}
.dd-arrow--side { transform: rotate(90deg); }

.dd-panel {
position: absolute;
top: calc(100% + 8px);
right: 0;
min-width: 190px;
box-sizing: border-box;
padding: 8px;
background-color: var(--card-bg);
border: 2px solid var(--text-stroke);
border-radius: 14px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
z-index: 1000;
text-align: left;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.18s ease var(--dd-close-delay),
transform 0.18s ease var(--dd-close-delay),
visibility 0s linear calc(0.18s + var(--dd-close-delay));
}

.dd-panel::before {
content: "";
position: absolute;
left: 0; right: 0;
top: -12px;
height: 12px;
}

.dd-panel--user { width: 210px; }
.dd-panel--start { left: 0; right: auto; }
.dd-panel--left { right: calc(100% - 2px); top: -8px; width: 180px; }
.dd-panel--left::before { display: none; }
.dd-panel--scroll { max-height: 220px; overflow-y: auto; }

.dd.is-open > .dd-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
animation: dd-roll var(--dd-dur) var(--dd-ease) backwards;
transition-delay: 0s;
}
.dd.is-open > .dd-trigger .dd-arrow { transform: rotate(180deg); }
.dd.is-open > .dd-trigger .dd-arrow--side { transform: rotate(90deg); }

@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
.dd:hover > .dd-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
animation: dd-roll var(--dd-dur) var(--dd-ease) backwards;
transition-delay: 0s;
}
.dd:hover > .dd-trigger .dd-arrow { transform: rotate(180deg); }
.dd:hover > .dd-trigger .dd-arrow--side { transform: rotate(90deg); }
}

.dd-item {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
box-sizing: border-box;
padding: 8px 10px;
margin: 0;
background: none;
border: none;
border-radius: 8px;
color: var(--text-stroke);
font-family: inherit;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition: background-color 0.15s ease, padding-left 0.2s ease;
}
.dd-item:hover, .dd-item:focus-visible {
background-color: rgba(43, 122, 120, 0.12);
padding-left: 14px;
outline: none;
}
.dd-item--danger { color: var(--accent-red); }
.dd-item--danger:hover, .dd-item--danger:focus-visible { background-color: rgba(217, 83, 79, 0.12); }
.dd-item--small { font-size: 0.85rem; padding: 6px 10px; }
.dd-item.is-active { font-weight: 800; }
.dd-item.is-active::after { content: "✓"; color: var(--badge-bg); }
.dd-sep { margin-top: 4px; padding-top: 4px; border-top: 1px dashed rgba(54, 34, 25, 0.2); }
.dd-sub { position: relative; display: block; }

@media (max-width: 768px) {
.header-nav .dd { display: block; width: 100%; }
.header-nav .dd-trigger { width: 100%; justify-content: space-between; box-sizing: border-box; }
.header-nav .dd-panel,
.header-nav .dd-panel--left {
position: static;
width: 100%;
min-width: 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: none;
animation: none !important;
max-height: 0;
overflow: hidden;
margin-top: 0;
padding-top: 0;
padding-bottom: 0;
background: transparent;
border: 0 dashed rgba(54, 34, 25, 0.25);
border-radius: 0;
box-shadow: none;
transition: max-height 0.4s var(--dd-ease),
padding 0.4s var(--dd-ease),
margin 0.4s var(--dd-ease),
border-width 0.4s var(--dd-ease),
opacity 0.25s ease,
visibility 0s linear 0.4s;
}
.header-nav .dd-panel::before { display: none; }
.header-nav .dd.is-open > .dd-panel {
visibility: visible;
opacity: 1;
pointer-events: auto;
max-height: 700px;
margin-top: 8px;
padding-top: 8px;
border-top-width: 1px;
transition-delay: 0s;
}
.header-nav .dd-arrow--side { transform: none; }
.header-nav .dd.is-open > .dd-trigger .dd-arrow--side { transform: rotate(180deg); }
.header-nav .dd-sub > .dd-panel { padding-left: 8px; }
}

@media (prefers-reduced-motion: reduce) {
.dd-panel, .multi-select-list { animation: none !important; transition-duration: 0.01s !important; transition-delay: 0s !important; }
.dd-arrow, .dropdown-arrow { transition: none; }
}

.popup-title {
font-weight: 700;
font-size: 1.05rem;
color: var(--text-stroke);
margin-bottom: 10px;
border-bottom: 1px dashed rgba(54, 34, 25, 0.2);
padding-bottom: 6px;
}

.theme-select {
width: 100%;
padding: 8px 12px;
border-radius: 12px;
border: 2px solid var(--text-stroke);
background-color: var(--card-bg);
color: var(--text-stroke);
font-weight: 700;
font-size: 0.9rem;
cursor: pointer;
outline: none;
}

/* --------------------------------------------------------------------------
4. Layout-Wrapper, Grid & 3D-Kästchen-Effekt
-------------------------------------------------------------------------- */
.main-wrapper {
flex: 1;
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 15px 12px;
display: flex;
flex-direction: column;
gap: 15px;
}

.filter-bar {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
background-color: var(--card-bg);
border: 2px solid var(--text-stroke);
border-radius: 16px;
padding: 12px 16px;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}

.filter-group { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; }

@media (min-width: 768px) {
.filter-group { flex-direction: row; align-items: center; width: auto; }
}

.filter-select {
width: 100%;
padding: 8px 12px;
border-radius: 12px;
border: 2px solid var(--text-stroke);
background-color: var(--card-bg);
font-weight: 700;
font-size: 0.9rem;
color: var(--text-main);
outline: none;
cursor: pointer;
}

@media (min-width: 768px) {
.filter-select { width: auto; }
}

.recipe-grid { display: grid; grid-template-columns: 1fr; gap: 20px; align-items: stretch; }

@media (min-width: 481px) {
.recipe-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 769px) {
.recipe-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1025px) {
.recipe-grid { grid-template-columns: repeat(5, 1fr); }
}

.recipe-card, .collection-card {
background-color: var(--card-bg);
border: none !important;
border-radius: 16px;
overflow: hidden;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
height: 100%;
position: relative;
box-shadow: -8px -10px 22px rgba(0, 0, 0, 0.16), -3px -4px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
transform: perspective(1000px) rotateX(0deg) rotateY(0deg) translateZ(0);
}

.recipe-card:hover, .collection-card:hover {
transform: perspective(1000px) translateY(-5px) scale(1.02) rotateX(-1deg);
box-shadow: -12px -16px 30px rgba(0, 0, 0, 0.22), -4px -6px 12px rgba(0, 0, 0, 0.12);
}

.recipe-image-wrapper {
width: 100% !important;
height: 170px !important;
min-height: 170px !important;
max-height: 170px !important;
position: relative !important;
overflow: hidden !important;
background-color: var(--card-bg) !important;
display: block !important;
flex-shrink: 0 !important;
cursor: pointer;
}

.recipe-image {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center !important;
display: block !important;
transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.recipe-card:hover .recipe-image,
.collection-card:hover .recipe-image {
transform: scale(1.08) translateZ(10px);
}

.recipe-collections-overlay {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: linear-gradient(to top, rgba(54, 34, 25, 0.96) 0%, rgba(54, 34, 25, 0.90) 80%, rgba(54, 34, 25, 0.6) 100%) !important;
color: #fff !important;
padding: 10px 12px !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
text-align: left !important;
opacity: 0;
transition: opacity 0.25s ease, transform 0.25s ease;
transform: translateY(10px);
pointer-events: none;
z-index: 5;
max-height: 100% !important;
box-sizing: border-box !important;
line-height: 1.4;
}

.recipe-image-wrapper:hover .recipe-collections-overlay {
opacity: 1 !important;
transform: translateY(0) !important;
pointer-events: auto !important;
}

.recipe-collections-overlay a {
color: #ffd700;
text-decoration: underline;
transition: color 0.2s;
display: inline !important;
}

.recipe-collections-overlay a:hover {
color: #ffffff;
}

.recipe-new-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--badge-bg);
color: #fff;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.5rem !important;
font-weight: 800;
z-index: 2;
}

.recipe-fav-badge {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255, 255, 255, 0.9);
border: 2px solid var(--text-stroke);
border-radius: 50%;
width: 34px;
height: 34px;
display: flex;
align-items: center;
justify-content: center;
font-size: 1rem;
cursor: pointer;
z-index: 10;
box-shadow: 0 3px 6px rgba(0,0,0,0.15);
transition: transform 0.2s;
}
.recipe-fav-badge:hover {
transform: scale(1.1);
}

.recipe-rating-badge-overlay {
position: absolute;
top: 8px;
right: 8px;
background: rgba(0, 0, 0, 0.75);
color: #fff;
padding: 3px 8px;
border-radius: 6px;
font-size: 0.75rem;
font-weight: 700;
display: flex;
align-items: center;
gap: 4px;
z-index: 2;
}

.recipe-content-box {
padding: 12px;
display: flex;
flex-direction: column;
flex: 1;
justify-content: space-between;
gap: 8px;
background-color: var(--card-bg);
}

.recipe-title-link {
text-decoration: none;
color: inherit;
display: block;
}

.recipe-title-link:hover .recipe-title {
text-decoration: underline;
}

.recipe-card-info {
display: flex;
align-items: center;
justify-content: space-between;
font-size: 0.8rem;
color: var(--text-stroke);
opacity: 0.75;
border-top: 1px dashed rgba(54, 34, 25, 0.2);
padding-top: 6px;
width: 100%;
margin-top: auto;
}

/* --------------------------------------------------------------------------
5. Formulare & Editor
-------------------------------------------------------------------------- */
.multi-select-dropdown { position: relative; width: 100%; }

.multi-select-header {
width: 100%;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid #d1d5db;
background-color: var(--card-bg);
font-size: 0.95rem;
font-weight: 600;
color: var(--text-main);
cursor: pointer;
display: flex;
justify-content: space-between;
align-items: center;
}

.multi-select-list {
display: flex;
flex-direction: column;
position: absolute;
top: calc(100% + 4px);
left: 0; right: 0;
max-height: 200px;
overflow-y: auto;
background-color: var(--card-bg);
border: 1px solid #d1d5db;
border-radius: 12px;
z-index: 99;
box-shadow: 0 6px 16px rgba(0,0,0,0.1);
padding: 6px 0;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateY(-8px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}

.multi-select-dropdown.is-open .multi-select-list {
visibility: visible;
opacity: 1;
pointer-events: auto;
transform: none;
animation: dd-roll var(--dd-dur, 0.4s) var(--dd-ease, ease) backwards;
transition-delay: 0s;
}

.multi-select-dropdown.is-open .dropdown-arrow { transform: rotate(180deg); }

.multi-select-item {
display: flex;
align-items: center;
gap: 10px;
padding: 10px 16px;
cursor: pointer;
font-size: 0.9rem;
font-weight: 600;
}

.sf-editor-container, .view-recipe-container, .login-box,
.message-center-container, .messages-box, .chat-container,
table, tr, td, th, p, span, div {
max-width: 100%;
overflow-wrap: break-word;
word-break: break-word;
}

.sf-editor-container, .view-recipe-container, .login-box {
background-color: var(--card-bg);
border: 1px solid #e5e7eb;
border-radius: 16px;
padding: 16px;
box-shadow: 0 4px 15px rgba(0,0,0,0.04);
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
overflow-x: hidden;
}

@media (min-width: 768px) {
.sf-editor-container, .view-recipe-container {
padding: 35px;
}
}

.sf-editor-container { max-width: 1200px; margin: 10px auto; }
.login-box { max-width: 420px; margin: 20px auto; }

.sf-section { display: flex; flex-direction: column; gap: 8px; width: 100%; }

.sf-sublabel { font-size: 0.85rem; font-weight: 600; color: var(--text-stroke); opacity: 0.8; }

.form-input-text, .form-textarea, .form-select {
width: 100%;
max-width: 100%;
padding: 12px 14px;
border-radius: 12px;
border: 1px solid #d1d5db;
background-color: var(--card-bg);
font-size: 1rem;
color: var(--text-main);
outline: none;
box-sizing: border-box;
}

.form-textarea { resize: vertical; min-height: 90px; line-height: 1.5; }

.drag-sort-container {
display: flex;
flex-direction: column;
gap: 10px;
width: 100%;
overflow-x: hidden;
}

.sf-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
width: 100%;
background: rgba(0, 0, 0, 0.015);
padding: 10px;
border-radius: 12px;
border: 1px solid #e5e7eb;
}

@media (min-width: 600px) {
.sf-row { flex-wrap: nowrap; }
}

.sf-row.is-header {
background: rgba(43, 122, 120, 0.1);
border-color: rgba(43, 122, 120, 0.3);
}

.sf-row .input-amount, .sf-row .input-unit, .sf-row .input-name {
width: 100% !important;
flex: 1 1 100% !important;
}

@media (min-width: 600px) {
.sf-row .input-amount { width: 90px !important; flex: 0 0 90px !important; text-align: center; }
.sf-row .input-unit { width: 130px !important; flex: 0 0 130px !important; }
.sf-row .input-name { flex: 1 !important; min-width: 150px; }
}

.sf-row-alt {
display: none;
margin-top: 4px;
background: rgba(0,0,0,0.01);
border-style: dashed;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
@media (min-width: 600px) {
.sf-row-alt { flex-wrap: nowrap; }
}
.sf-row-alt.is-visible {
display: flex;
}

.sf-step-wrapper {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
background: rgba(0, 0, 0, 0.015);
padding: 12px;
border-radius: 14px;
border: 1px solid #e5e7eb;
}

.sf-step-row {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 10px;
width: 100%;
background: transparent;
padding: 0;
border: none;
}

@media (min-width: 600px) {
.sf-step-row { flex-direction: row; align-items: center; }
}

.step-textarea {
width: 100%;
flex: 1 !important;
min-height: 80px;
resize: vertical;
}

.existing-images-grid, .image-preview-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
max-width: 100%;
}

.existing-img-card, .preview-item {
background: var(--card-bg);
border: 1px solid #d1d5db;
border-radius: 12px;
padding: 8px;
display: flex;
flex-direction: column;
gap: 6px;
align-items: center;
max-width: 120px;
}

.existing-img-card img,
.preview-item img,
.step-img-thumb {
width: 80px !important;
height: 80px !important;
object-fit: cover !important;
border-radius: 8px;
border: 1px solid #e5e7eb;
}

.sf-btn-outline {
background-color: transparent;
color: var(--text-stroke);
border: 1px solid #cbd5e1;
padding: 8px 16px;
border-radius: 20px;
font-weight: 800;
font-size: 0.85rem;
cursor: pointer;
text-decoration: none;
display: inline-block;
text-align: center;
}

.sf-submit-btn {
width: 100%;
background-color: var(--badge-bg);
color: #ffffff;
border: 1px solid rgba(0,0,0,0.1);
padding: 14px;
border-radius: 30px;
font-size: 1.05rem;
font-weight: 800;
cursor: pointer;
margin-top: 10px;
box-shadow: 0 4px 10px rgba(0,0,0,0.06);
}

.sf-image-manager-grid {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: flex-end;
margin-top: 10px;
}
.img-manage-card {
background: var(--card-bg, #fff);
border: 2px solid var(--text-stroke, #362219);
border-radius: 10px;
padding: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 6px;
}
.img-manage-card img {
object-fit: cover;
border-radius: 6px;
width: 60px;
height: 60px;
}

/* --------------------------------------------------------------------------
6. Rezeptansicht, Lightbox & 3D-Bilder in rezept.php
-------------------------------------------------------------------------- */
.recipe-view-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; flex-wrap: wrap; }

.recipe-view-subtitle { font-size: 1rem; font-weight: 600; color: var(--text-stroke); opacity: 0.8; margin-top: 4px; }

.recipe-meta-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }

.recipe-status-badge, .collection-tag {
background-color: rgba(0, 0, 0, 0.08);
color: var(--text-stroke);
font-size: 0.75rem;
font-weight: 700;
padding: 4px 8px;
border-radius: 10px;
border: 1px solid rgba(54,34,25,0.15);
display: inline-flex;
align-items: center;
}
.collection-tag { background-color: var(--badge-bg); color: #fff; }

.recipe-gallery-container { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.recipe-main-media {
width: 100%;
height: 280px;
border-radius: 16px;
overflow: hidden;
border: none !important;
position: relative;
cursor: pointer;
box-shadow: -10px -12px 24px rgba(0, 0, 0, 0.16), -4px -5px 10px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.recipe-main-media:hover {
transform: translateY(-3px);
box-shadow: -14px -16px 32px rgba(0, 0, 0, 0.22), -5px -6px 12px rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
.recipe-main-media { height: 420px; }
}

.recipe-detail-image { width: 100%; height: 100%; object-fit: cover; display: block; }

.recipe-thumbnails-row { display: flex; gap: 8px; flex-wrap: wrap; }

.recipe-thumb-card {
width: 64px;
height: 64px;
border-radius: 8px;
overflow: hidden;
border: 1px solid #d1d5db;
cursor: pointer;
opacity: 0.6;
}
.recipe-thumb-card.active { opacity: 1; border-color: var(--badge-bg); }
.recipe-thumb-card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.image-modal {
display: none;
position: fixed;
z-index: 99999;
inset: 0;
width: 100vw;
height: 100vh;
background-color: rgba(0, 0, 0, 0.88);
align-items: center;
justify-content: center;
padding: 12px;
}
.image-modal.is-open { display: flex !important; }

.lightbox-container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
max-width: 95vw;
max-height: 90vh;
}

.modal-content {
max-width: 95vw;
max-height: 80vh;
border-radius: 10px;
object-fit: contain;
border: 2px solid #fff;
display: block;
}

.modal-close {
position: absolute;
top: 20px;
right: 30px;
color: #fff;
font-size: 38px;
font-weight: bold;
cursor: pointer;
z-index: 100000;
background: rgba(0,0,0,0.4);
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
transition: background 0.2s;
}
.modal-close:hover {
background: rgba(0,0,0,0.8);
}

.lightbox-prev, .lightbox-next {
position: absolute;
top: 50%;
transform: translateY(-50%);
background-color: rgba(0, 0, 0, 0.5);
color: white;
border: 2px solid rgba(255, 255, 255, 0.6);
cursor: pointer;
font-size: 24px;
font-weight: bold;
z-index: 100000;
transition: background-color 0.2s, transform 0.2s;
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: 50%;
user-select: none;
}

.lightbox-prev:hover, .lightbox-next:hover {
background-color: rgba(0, 0, 0, 0.85);
transform: translateY(-50%) scale(1.05);
}

.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }

.lightbox-counter {
margin-top: 12px;
color: #fff;
font-size: 0.95rem;
font-weight: 700;
background: rgba(0, 0, 0, 0.6);
padding: 6px 14px;
border-radius: 14px;
letter-spacing: 0.5px;
}

@media (max-width: 768px) {
.lightbox-prev { left: 10px; width: 44px; height: 44px; font-size: 18px; }
.lightbox-next { right: 10px; width: 44px; height: 44px; font-size: 18px; }
.modal-close { top: 10px; right: 12px; font-size: 28px; }
}

.recipe-meta-bar {
display: grid;
grid-template-columns: repeat(2, 1fr);
background-color: rgba(0,0,0,0.02);
border: 1px solid #e5e7eb;
padding: 12px;
border-radius: 14px;
gap: 10px;
}
@media (min-width: 600px) {
.recipe-meta-bar { display: flex; justify-content: space-around; }
}

.meta-item { display: flex; flex-direction: column; align-items: center; text-align: center; }
.meta-label { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; color: var(--text-stroke); opacity: 0.7; }
.meta-value { font-weight: 800; font-size: 0.95rem; color: var(--text-stroke); margin-top: 2px; }

.rating-box {
display: flex;
flex-direction: column;
align-items: stretch;
background-color: rgba(0,0,0,0.02);
border: 1px solid #e5e7eb;
padding: 14px;
border-radius: 14px;
gap: 12px;
}
@media (min-width: 600px) {
.rating-box { flex-direction: row; align-items: center; justify-content: space-between; }
}

.rating-display-group { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-stroke); font-size: 0.9rem; flex-wrap: wrap; }
.rating-form-group { display: flex; align-items: center; gap: 2px; justify-content: flex-start; }

.star-rating-container { display: inline-flex; flex-direction: row-reverse; gap: 2px; }
.star-input-btn { background: none; border: none; font-size: 1.4rem; cursor: pointer; color: #ccc; padding: 0; }
.star-input-btn.selected,
.star-input-btn.selected ~ .star-input-btn,
.star-input-btn:hover,
.star-input-btn:hover ~ .star-input-btn {
color: var(--badge-bg);
}

.recipe-notes-box { background-color: rgba(0, 0, 0, 0.02); border-left: 4px solid var(--badge-bg); padding: 12px 15px; border-radius: 8px; font-size: 0.9rem; line-height: 1.5; }

.post-it-container { margin: 15px 0; display: flex; justify-content: center; }
.post-it-note {
background: linear-gradient(135deg, #fffdf0 0%, #fff9c4 100%);
color: #2d3748;
padding: 18px 15px 15px 15px;
border-radius: 4px;
width: 100%;
box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.08);
position: relative;
border: 1px solid #f0e68c;
}
.post-it-delete-btn { position: absolute; top: 10px; right: 12px; background: transparent; border: none; color: #c53030; cursor: pointer; font-size: 1rem; }
.post-it-title { font-size: 1.15rem; font-weight: 700; color: #1a202c; margin-bottom: 6px; }
.post-it-textarea { width: 100%; background: transparent; border: none; border-bottom: 1px dashed rgba(0, 0, 0, 0.2); resize: vertical; min-height: 80px; font-size: 0.9rem; outline: none; box-sizing: border-box; }
.post-it-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; font-size: 0.75rem; opacity: 0.7; }
.post-it-save-btn { background-color: var(--badge-bg); color: #fff; border: none; padding: 6px 12px; border-radius: 20px; font-weight: 700; font-size: 0.75rem; cursor: pointer; }

.ingredients-header { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #e5e7eb; padding-bottom: 8px; margin-bottom: 12px; flex-wrap: wrap; gap: 10px; }
.servings-calculator { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 0.9rem; }
.calc-btn { background-color: var(--card-bg); color: var(--text-stroke); border: 1px solid #cbd5e1; border-radius: 50%; width: 28px; height: 28px; font-weight: 900; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.servings-num { font-size: 1rem; min-width: 18px; text-align: center; }

.view-ingredients-list { list-style: none; display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }

.ing-item {
padding: 6px 0;
border-bottom: 1px dashed rgba(120, 120, 120, 0.2);
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
font-size: 0.9rem;
}

.ing-header-item {
margin-top: 12px;
font-size: 1.05rem;
color: var(--text-stroke);
font-weight: 800;
}

.view-steps-list { display: flex; flex-direction: column; gap: 15px; margin-top: 12px; }

.step-card {
display: flex;
flex-direction: column;
gap: 12px;
padding: 0 0 16px 0;
border-bottom: 1px dashed rgba(120, 120, 120, 0.2);
}
@media (min-width: 600px) {
.step-card { flex-direction: row; gap: 16px; align-items: flex-start; }
}

.step-number {
background-color: var(--badge-bg);
color: #fff;
font-weight: 900;
font-size: 1rem;
width: 28px;
height: 28px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}

.step-content {
flex: 1;
display: flex;
flex-direction: column;
gap: 10px;
}

.step-content p { line-height: 1.5; font-size: 0.95rem; }

.step-detail-image {
width: 100%;
max-width: 320px;
height: 210px;
object-fit: cover;
border-radius: 14px;
border: none !important;
margin-top: 8px;
display: block;
cursor: pointer;
box-shadow: -8px -10px 20px rgba(0, 0, 0, 0.15), -3px -4px 8px rgba(0, 0, 0, 0.08);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.step-detail-image:hover {
transform: translateY(-3px);
box-shadow: -12px -14px 26px rgba(0, 0, 0, 0.2), -4px -5px 10px rgba(0, 0, 0, 0.1);
}

.collection-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.collection-item {
background: rgba(0, 0, 0, 0.01);
border: 1px solid #e5e7eb;
border-radius: 12px;
padding: 10px 12px;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
@media (min-width: 600px) {
.collection-item { flex-direction: row; justify-content: space-between; align-items: center; }
}

.collection-info { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.collection-name { font-weight: 700; color: var(--text-stroke); font-size: 0.95rem; }
.collection-count { font-size: 0.8rem; opacity: 0.7; background: rgba(0, 0, 0, 0.05); padding: 2px 6px; border-radius: 6px; }

.site-footer {
width: 100%;
background-color: rgba(254, 251, 243, 0.5);
border-top: 2px solid rgba(54, 34, 25, 0.15);
padding: 15px;
margin-top: auto;
text-align: center;
font-size: 0.8rem;
color: var(--text-stroke);
}
.footer-content { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 4px; }
.footer-row-main { font-weight: 700; }
.footer-row-sub { font-size: 0.75rem; opacity: 0.75; line-height: 1.3; }

@media (max-width: 600px) {
.image-modal { padding: 8px; }
.modal-close { top: 10px; right: 12px; font-size: 32px; }
}

@keyframes pulseHeart {
0% { transform: scale(1); }
50% { transform: scale(1.25); }
100% { transform: scale(1); }
}

.favorite-icon, .heart-btn {
transition: color 0.2s ease, transform 0.2s ease;
cursor: pointer;
}

.recipe-fav-badge:hover .heart-icon,
.favorite-icon:hover, .heart-btn:hover {
color: #e74c3c;
animation: pulseHeart 0.8s infinite ease-in-out;
}

.favorite-icon.is-active, .heart-btn.is-active,
.favorite-icon.favorited, .heart-btn.favorited,
.heart-icon.is-active {
color: #e74c3c;
animation: none;
}
/* --------------------------------------------------------------------------
7. Zusätzliche Startseiten-Stile (Verschoben aus index.php)
-------------------------------------------------------------------------- */
.load-more-container { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 40px 0 20px 0; }
.load-more-btn { padding: 12px 28px; border: 2px solid var(--text-stroke); background: var(--card-bg, #fff); color: var(--text-stroke); border-radius: 12px; text-decoration: none; font-weight: 700; font-size: 1rem; cursor: pointer; transition: all 0.2s; box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.load-more-btn:hover { background: rgba(0,0,0,0.05); transform: translateY(-2px); }
.load-more-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.recipe-fav-badge { position: absolute; top: 10px; left: 10px; background: rgba(255, 255, 255, 0.9); border: 2px solid var(--text-stroke); border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 1.1rem; cursor: pointer; z-index: 10; box-shadow: 0 3px 6px rgba(0,0,0,0.15); transition: transform 0.2s; }
.recipe-fav-badge:hover { transform: scale(1.1); }

.recipe-image-wrapper { position: relative; overflow: hidden; }
.recipe-external-ribbon {
    position: absolute;
    top: 14px;
    right: -32px;
    z-index: 5;
    width: 110px;
    text-align: center;
    transform: rotate(45deg);
    background-color: #e67e22;
    color: #fff;
    font-size: 0.45rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    pointer-events: none;
}

@keyframes pulseHeart {
    0% { transform: scale(1); }
    50% { transform: scale(1.25); }
    100% { transform: scale(1); }
}
.heart-icon {
    display: inline-block;
    transition: transform 0.2s ease;
}
.recipe-fav-badge:hover .heart-icon {
    animation: pulseHeart 0.8s infinite ease-in-out;
    filter: drop-shadow(0 0 3px rgba(231, 76, 60, 0.6));
}
.heart-icon.is-active {
    animation: none;
}

.recipe-card-info-grid {
    display: grid;
    grid-template-columns: 1fr auto;
    row-gap: 4px;
    align-items: center;
    font-size: 0.9rem;
    margin-top: 6px;
}
.info-cell-left { text-align: left; }
.info-cell-right { text-align: right; }

.recipe-visibility-btn { background: none; border: none; cursor: pointer; font-size: 0.95rem; padding: 0; display: inline-flex; align-items: center; transition: transform 0.2s; vertical-align: middle; }
.recipe-visibility-btn:hover { transform: scale(1.2); }

@media (max-width: 768px) {
    .recipe-visibility-btn.is-public .vis-icon {
        visibility: hidden;
        position: relative;
    }
    .recipe-visibility-btn.is-public .vis-icon::after {
        content: "👁️";
        visibility: visible;
        position: absolute;
        left: 0;
        top: 0;
    }
}