/*!
Theme Name: Botiga
Theme URI: https://athemes.com/theme/botiga/
Author: aThemes
Author URI: https://athemes.com
Description: Launch your store with Botiga. A beautiful theme that is optimized for both the block editor and Elementor. We proudly introduce Botiga, with a modern and clean design that will effortlessly match your brand. Botiga has been developed from the ground up with clean code for optimal performance. You’ll get a mobile-optimized theme that looks and works great on any device and comes with plenty of customization options as well. Discover the theme that will transform your online business.
Version: 2.3.9
Tested up to: 6.8
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: botiga
Tags: e-commerce, custom-menu, custom-logo, grid-layout, featured-images, right-sidebar, left-sidebar, custom-colors, editor-style, theme-options, threaded-comments, translation-ready, blog, one-column, two-columns, rtl-language-support, custom-background, custom-header, footer-widgets, post-formats, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Botiga is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/


/* ===== GLOBAL ===== */
body {
  margin: 0;
  font-family: sans-serif; /* Schriftart ersetzt du später */
  background: linear-gradient(
    135deg,
    #FFF4E0 0%,
    #EAD2A8 20%,
    #FFB499 80%,
    #EA96FF 100%
  );
}

/* Zentrale Ausrichtung */
.rezept {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0px 20px;
}

/* ===== HERO ===== */
.rezept-hero {
  text-align: center;
  margin-bottom: 40px;
}

.rezept-image img {
  width: 1200px;
  height: 500px;
  border-radius: 20px;
  display: block;
  margin-bottom: 30px;
  object-fit: cover;
}

/* Schriftarten Adobe */

/* ===== TYPOGRAFIE ÜBERSCHRIFTEN ===== */

h1,
h2,
h3 {
  font-family: "obviously", sans-serif;
  font-weight: 900;
  font-style: normal;
}

/* Farben gezielt steuern */
h1,
h3 {
  color: #237DD0 !important;
}

h2 {
  color: #000;
}


/* Titel */
.rezept-hero h1 {
  color: #237DD0;
  margin-bottom: 20px;
}

/* ===== META ===== */
.rezept-meta {
  display: flex;
  justify-content: center;
  gap: 30px;
  margin-bottom: 40px;
  font-size: 16px;
}

/* ===== CONTENT BUBBLES ===== */
.rezept-content section,
.rezept-kurzbeschreibung,
.content-text,
.rezept-zutaten,
.rezept-zubereitung,
.content-tipp {
  background-color: #EFD9D0;
  border-radius: 20px;
  padding: 30px;
  margin-bottom: 30px;
  color: #000;
}

/* letzte Bubble kein Extra-Abstand */
.rezept-content > *:last-child {
  margin-bottom: 0;
}

.rezept-kurzbeschreibung {
  font-size: 18px;
  line-height: 1.6;
}

.content-text {
  line-height: 1.6;
  font-size: 18px;
}

.rezept-zutaten h2 {
  margin-top: 0;
}

.rezept-zutaten ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rezept-zutaten li {
  margin-bottom: 10px;
}

.rezept-zubereitung h2 {
  margin-top: 0;
}

.rezept-zubereitung ol {
  padding-left: 20px;
}

.rezept-zubereitung li {
  margin-bottom: 12px;
  line-height: 1.5;
}

.content-tipp {
  margin-top: 20px;
  background-color: rgba(255,255,255,0.4);
}

/* ===== ENTDECKEN ===== */
.rezept-content h3.entdecken-title {
  text-align: center;
  color: #237DD0;
  margin: 60px 0 30px;
}

/* ===== VERLINKTE REZEPTE ===== */
.rezept-link-image-wrapper {
  overflow: hidden;
}

/* 3:4 Hochformat */
.rezept-link-image {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 20px !important;
  display: block;
}

/* Nebeneinander + 30px Abstand */
.content-link-wrapper {
  display: flex;
  gap: 30px; /* DAS ist der gewünschte Abstand */
  justify-content: left;
}

.content-link {
  max-width: 277.5px;
}

.content-link img {
  width: 100%;
  display: block;
  margin-bottom: 15px;
}

.content-link a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

.content-video {
  text-align: center;
}

.content-video a {
  display: inline-block;
  padding: 12px 24px;
  background-color: #4EAAFF;
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
}

@media (max-width: 768px) {
  .rezept {
    padding: 40px 15px;
  }

  .rezept-meta {
    flex-direction: column;
    gap: 10px;
  }

  .content-link-wrapper {
    flex-direction: column;
  }
}






.komponente h3 a {
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

.komponente h3 a:hover {
  opacity: 0.7;
}


.rezept-suche {
  position: relative;
  max-width: 400px;
}

#rezept-suche-input {
  width: 100%;
  padding: 12px;
}

#rezept-suche-ergebnisse {
  position: absolute;
  background: #fff;
  width: 100%;
  border: 1px solid #ddd;
  z-index: 10;
}

.rezept-suche-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}

.rezept-suche-liste li {
  padding: 8px 12px;
}

.rezept-suche-liste li a {
  text-decoration: none;
  color: inherit;
}
.rezept-content > div {
  margin-bottom: 24px;
}

/* ===== VIDEO ICONS ===== */

.content-video-social {
    display: flex;
    justify-content: center; /* Icons horizontal zentrieren */
    gap: 30px;               /* horizontaler Abstand zwischen den Icons */
    align-items: center;     /* Icons vertikal zentrieren */
    margin: 20px 0;          /* optional: Abstand oberhalb und unterhalb */
}

.content-video-social img {
    width: 48px;
    height: 48px;
    display: block;
    transition: transform 0.2s ease; /* optional: für sanfte Hover-Effekte */
}

/* Optional: leichter Hover-Effekt */
.content-video-social a:hover img {
    transform: scale(1.1);
}
/* ===== SWIPER SLIDER VERLINKTE REZEPTE ===== */
.entdecken-slider {
    margin: 40px 0;
    position: relative;
}

.swiper-slide {
    width: 277.5px; /* Fixgröße Desktop */
    flex-shrink: 0;
    border-radius: 20px;
    overflow: hidden;
}

.swiper-slide img {
    width: 100%;
    aspect-ratio: 3 / 4;
    object-fit: cover;
    border-radius: 20px;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.swiper-slide img:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

/* Pfeile */
.swiper-button-prev,
.swiper-button-next {
    color: #237DD0;
    width: 40px;
    height: 40px;
}

.swiper-button-prev::after,
.swiper-button-next::after {
    font-size: 20px;
    font-weight: bold;
}

/* Pagination für mobile */
.swiper-pagination {
    bottom: 10px !important;
}

/* RESPONSIVE */
@media (max-width: 1200px) {
    .swiper-slide {
        width: 45%; /* 2 nebeneinander bei Tablet */
    }
}

@media (max-width: 768px) {
    .swiper-slide {
        width: 90%; /* 1 Bild pro Slide */
        margin: 0 auto;
    }
}