/* zusatz CSS: Rezepte Seite */
/* ===================== DESKTOP ===================== */
.rezepte-wrapper {
max-width: 800px; /* Desktop-Breite */
width: 100%;
margin: 0 auto; /* zentriert */
}
/* EIN kariertes Blatt als Hintergrund */
.papier {
background: url("../images/Blatt_Papier_Kariert.png") center top no-repeat;
background-size: cover; /* füllt den Container */
padding: 50px 50px 20px 50px; /* Abstand zum Rand */
border-radius: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.15); /* moderner Schatten */
/* filter: saturate(50%) brightness(1.05); */ /* weniger Farbe (entsättigen) */
}
/* Papier Farbe entsättigen */
.papier {
background-blend-mode: lighten;
background-color: rgba(255,255,255,0.4); /* Helligkeit / Entsättigung */
}
/* ===================== LISTE ===================== */
/* Schriftart >> Spezielle Schriftarten wie Caveat sind über Haupt-CSS eingebunden */
.rezepte {
font-family: 'Caveat', cursive;
font-size: 1.6rem;
line-height: 1.4;
}
/* ===================== DESKTOP: 2 Spalten ===================== */
ul.rezepte {
columns: 2; /* Anzahl der Spalten (Zeitungs-Layout) */
column-gap: 20px; /* Abstand zwischen den beiden Spalten */
}
/* ===================== Grundlayout der Liste ===================== */
ul.rezepte {
list-style: none; /* keine Standard-Bullets */
margin: 0; /* kein Außenabstand */
padding: 0; /* kein Innenabstand */
}
ul.rezepte li {
margin: 0 0 12px 0; /* nur unten Abstand → verhindert Abstand oben beim 1. Eintrag */
break-inside: avoid; /* verhindert, dass ein über zwei Spalten zerrissen wird */
}
/* NEU – eigene Rahmenfarbe + leichte Tiefe */
ul.rezepte li.neu a {
border-color: rgba(151, 0, 0, 0.5); /* dezenter, eigener Rand */
box-shadow: 0 2px 2px rgba(0,0,0,0.15); /* leichte Tiefe */
/* KEINE Hintergrundfarbe! */
}
/* ============= Button-Styling der Rezeptlinks =================== */
ul.rezepte li a {
display: block; /* macht den Link zum Block → klickbarer Button */
padding: 0.4em 0.1em; /* Innenabstand für angenehme Lesbarkeit */
background: rgba(255,255,255,0.1); /* leicht transparentes Weiß über dem Papier */
backdrop-filter: blur(2px); /* moderner „Glas“-Effekt */
border-radius: 4px; /* abgerundete Ecken */
border: 1px solid rgba(121, 0, 0, 0.164); /* dezente Rahmenfarbe */
color: #663333; /* Textfarbe passend zum Papier-Look */
font-family: 'Caveat', sans-serif; /* Handschrift-Font, sans-serif als Fallback */
font-weight: 700; /* kräftiger Schriftzug */
font-size: 1.4rem; /* Textgröße Desktop */
line-height: 1; /* kompakte Zeilenhöhe für Mehrzeiler */
text-decoration: none; /* keine Unterstreichung */
transition: all 0.2s ease; /* weiche Hover-Animation */
}
/* ===================== Hover-Effekt ===================== */
ul.rezepte li a:hover {
background: rgba(255,255,255,0.9); /* hellerer Button beim Hover */
box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* leichter Schatten */
transform: translateY(-2px); /* Button hebt sich minimal an */
}
/* ---------------------------------------
STICKER
--------------------------------------- */
/* NEU‑Rezepte: Basis-Setup für den Sticker
→ position: relative = Ankerpunkt für ::after + ::before */
.rezepte li.neu {
position: relative;
}
/* NEU‑Sticker selbst (rotes Label oben rechts)
→ absolut positioniert
→ kleiner roter Kasten mit Text "NEU"
→ leichte Rotation für „Sticker-Look“ */
.rezepte li.neu::after {
content: "NEU"; /* Text im Sticker */
position: absolute; /* Position relativ zum */
top: -4px; /* leicht oberhalb des Buttons */
right: -10px; /* rechts außen */
background: #c03737; /* Stickerfarbe */
color: white; /* Textfarbe */
font-family: 'Arial Black', sans-serif; /* fette, kompakte Schrift */
font-size: 0.7rem; /* kleine Stickergröße */
font-weight: 700;
padding: 2px 4px; /* Innenabstand */
border-radius: 4px; /* abgerundete Ecken */
transform: rotate(20deg); /* Sticker leicht gedreht */
box-shadow: 0 2px 6px rgba(0,0,0,0.25); /* Schatten für Tiefe */
letter-spacing: 0.5px; /* etwas breitere Buchstaben */
z-index: 3; /* Sticker immer ganz oben */
}
/* Hover-Effekt für den NEU‑Sticker
→ wird heller + größer beim Überfahren des Buttons */
.rezepte li.neu:hover::after,
.rezepte li.neu a:hover + ::after {
background: #df5050; /* helleres Rot beim Hover */
transform: rotate(20deg) scale(1.05); /* leicht vergrößert */
box-shadow: 0 3px 10px rgba(0,0,0,0.35); /* stärkerer Schatten */
}
/* ============================================================
NEU – statt Hintergrundfarbe → halbtransparenter Overlay
→ Vorteil: GRÜNKOST bleibt sichtbar, NEU bleibt sichtbar
============================================================ */
.rezepte li.neu::before {
content: "";
position: absolute;
inset: 0; /* füllt kompletten Button */
background: rgba(0, 0, 0, 0.06); /* leichte Abdunklung */
border-radius: inherit; /* gleiche Rundung wie Button */
pointer-events: none; /* Klicks gehen durch */
z-index: 1; /* unter dem Sticker, über dem Button */
}
/* Der eigentliche Button-Inhalt bleibt oben */
.rezepte li.neu a {
position: relative;
z-index: 2;
}
/* ============================================================
GRÜNKOST – dezente grüne Tönung
→ bleibt sichtbar, auch wenn NEU zusätzlich aktiv ist
============================================================ */
ul.rezepte li.gruenkost {
background-color: rgba(0, 148, 20, 0.08); /* dezente Tönung */
}
/* Süße Rezepte – dezente warme Tönung */
ul.rezepte li.suess {
background-color: rgba(200, 120, 0, 0.12); /* warmes Orange, sehr dezent */
}
/* -------------- ⭐-Sticker ------------- */
/* für spezielle ?? Rezepte */
/* ------------------------ in Arbeit :-) kollidiert nohch mit NEU-Sticker -------
.rezepte li.star {
position: relative;
}
.rezepte li.star::after {
content: "⭐";
position: absolute;
top: -6px;
right: -4px;
font-size: rem;
transform: rotate(12deg);
text-shadow: 0 2px 4px rgba(0,0,0,0.25);
}
*/
/* =================================================
SMARTPHONE, MOBILE
================================================= */
@media (max-width: 1000px) {
.rezepte-wrapper {
max-width: none; /* volle Breite auf Mobile – kein zentrierter Container */
margin: 0; /* kein Außenabstand */
}
.papier {
padding: 20px; /* mehr Innenabstand für Fingerfreundlichkeit */
background-size: cover; /* Hintergrundbild füllt Fläche komplett */
border-radius: 20px; /* optional: abgerundete Ecken auf Handy */
}
ul.rezepte li a {
font-size: 2.6rem; /* größere Schrift für Touch-Geräte */
font-weight: 1000; /* sehr kräftige Schrift */
padding: 0.3em 0.1em; /* kompakterer Innenabstand */
border-radius: 8px; /* stärker abgerundet für Mobile */
background: rgba(99, 67, 0, 0.062); /* etwas dunklerer Button-Hintergrund */
box-shadow: 0 2px 5px rgba(0,0,0,0.5); /* deutlicherer Schatten für Tiefe */
}
/* NEU-Sticker – Mobile-Version */
.rezepte li.neu::after {
font-size: 1.4rem; /* größerer Sticker auf Mobile */
border-radius: 7px; /* stärker abgerundet */
top: -5px; /* leicht oberhalb des Buttons */
right: -16px; /* rechts außen */
padding: 2px 4px; /* Innenabstand */
}
ul.rezepte {
columns: 2; /* auch auf Mobile 2 Spalten (falls gewünscht) */
column-gap: 20px; /* Abstand zwischen den Spalten */
}
ul.rezepte li {
margin: 0 0 20px 0; /* größerer Abstand zwischen Einträgen */
}
}