/*
 * Theme Name: Drip. twentytwentyfive
 * Theme URI: https://dein-projekt-uri.de
 * Description: Ein Child Theme für das Drip. Projekt, basierend auf Twenty Twenty-Four.
 * Author: happy.dawg alias Duc Ngoc Dao, Conscious.hemp GmbH
 * Author URI: beaCHEMP.de
 * Template: twentytwentyfive
 * Version: 1.0.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: drip-twentytwentyfive
 */

/* Kommentar: Hier kannst du später deine CSS-Anpassungen hinzufügen.
   Wichtig ist der "Template"-Header, der auf den Ordnernamen des Parent Themes verweist. */

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* Style: Responsive Container */
.form-container {
  position: relative;
  width: 100%;
  padding-bottom: 1200px; /* Platz für das Formular (Höhe) */
  height: 0;
  overflow: hidden;
}

/* Style: Embedded Google Form */
.form-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

.form-container2 {
  position: relative;
  width: 100%;
  padding-bottom: 640px; /* Oder eine andere Höhe, die für dein Formular passt.
                            Dies sollte die ursprüngliche Höhe deines Iframes sein,
                            oder ein Vielfaches davon, um genügend Platz zu gewährleisten.
                            Du kannst diesen Wert anpassen, um die optimale Darstellung
                            für dein Formular zu finden.
                            Wenn dein Formular sehr lang ist, musst du diesen Wert erhöhen. */
  height: 0;
  overflow: hidden;
  max-width: 640px; /* Optional: Beschränkt die maximale Breite des Formulars,
                       wenn es nicht die gesamte Bildschirmbreite einnehmen soll. */
  margin: 0 auto; /* Zentriert den Container, wenn max-width verwendet wird. */
}

/* Style: Embedded Google Form */
.form-iframe2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}

:root {
  --wp--style--global--content-size: clamp(645px, 90vw, 1000px);
  --wp--style--global--wide-size: 1200px;
}

.header_wrapper {
    background-color: #f0f0f0; /* Beispiel: Hintergrundfarbe der Kopfzeile ändern */
    padding: 20px; /* Beispiel: Innenabstand der Kopfzeile anpassen */
}

.header-with-accent-bar {
    position: relative; /* WICHTIG: Damit wir Pseudo-Elemente relativ dazu positionieren können. */
    /* Du könntest hier auch ein Padding hinzufügen, wenn der Balken nicht direkt am Text kleben soll. */
}

.header-with-accent-bar::before {
    content: ''; /* Erforderlich für Pseudo-Elemente. */
    position: absolute; /* Absolut innerhalb des 'position: relative' Elternelements. */
    bottom: 0; /* Positioniert den Balken am unteren Rand des Elternelements. */
    left: 0; /* Beginnt am linken Rand. */
    width: 100%; /* Der Balken erstreckt sich über die gesamte Breite des Elternelements. */
    background-color: #ffcc00; /* Deine Wunschfarbe für den Balken. Anpassbar! */
    height: calc(var(--wp--preset--font-size--normal) / 2); /* VORSICHT: Hier wird's spezifisch für FSE! */
    /*
     * Erläuterung 'height: calc(...)':
     * Im Full Site Editing (FSE) von WordPress werden viele Werte,
     * wie z.B. Schriftgrößen, über CSS-Variablen definiert (--wp--preset--font-size--...).
     * Um die Höhe des Balkens auf die HÄLFTE der Letter-Höhe (hier vereinfacht als Schriftgröße)
     * zu setzen, greifen wir auf diese Variable zu.
     * Wenn deine Letter-Höhe nicht direkt der Schriftgröße entspricht, sondern der 'line-height',
     * müsstest du eine CSS-Variable für die 'line-height' deines Headers definieren oder
     * den Wert manuell anpassen, z.B. 'height: 0.5em;' (relativ zur Schriftgröße des Elternelements)
     * oder 'height: 12px;' (ein fester Wert).
     * Für maximale Flexibilität empfehle ich, die 'line-height' deines Header-Textes zu prüfen
     * und den 'calc'-Wert entsprechend anzupassen. Beispiel: Wenn 'line-height: 1.5em', dann 'height: calc(1.5em / 2);'.
     */
    z-index: -1; /* Schiebt den Balken hinter den Text, damit der Text lesbar bleibt. */
}

.home-hero-header-wrapper {
   z-index: 10;
}

.header-accent-coffee {
   z-index: 25;
   position: relative;
}

.header-accent-matcha {
   z-index: 25;
   position: relative;
}

.header-accent-bfast {
   z-index: 25;
   position: relative;
}

.header-accent-coffee::after {
  content: "";
  position: absolute;
  bottom: clamp(1px, 6%, 15px); /* ragt 20px nach unten in den Content */
  left: -10px;
  width: clamp(230px, 32%, 360px);
  height: 42px; /* Höhe des Balkens */
  background-color: #ed7a16; /* Beispiel: rot – kann angepasst werden */
  z-index: -1; /* liegt hinter dem Header und dem Content */
  border-radius: 4px 4px 4px 4px;
}

.header-accent-matcha::after {
  content: "";
  position: absolute;
  bottom: clamp(0px, 6%, 15px); /* ragt 20px nach unten in den Content */
  left: -10px;
  width: clamp(260px, 45%, 440px);
  height: 42px; /* Höhe des Balkens */
  background-color: #ed7a16; /* Beispiel: rot – kann angepasst werden */
  z-index: -1; /* liegt hinter dem Header und dem Content */
  border-radius: 4px 4px 4px 4px;
}

.header-accent-bfast::after {
  content: "";
  position: absolute;
  bottom: clamp(1px, 2%, 15px); /* ragt 20px nach unten in den Content */
  left: -10px;
  width: clamp(210px, 40%, 400px);
  height: 42px; /* Höhe des Balkens */
  background-color: #ed7a16; /* Beispiel: rot – kann angepasst werden */
  z-index: -1; /* liegt hinter dem Header und dem Content */
  border-radius: 4px 4px 4px 4px;
}

.wp-block-navigation .wp-block-navigation-item a {
  /*
   * 'transition' ist die Eigenschaft, die den sanften Übergang steuert.
   * - 'color': Wir animieren nur die Farbeigenschaft.
   * - '0.25s': Die Animation dauert 0.25 Sekunden. Ein guter Wert für unaufdringliche Effekte.
   * - 'ease-in-out': Dies ist die "Beschleunigungskurve" der Animation, die sie natürlich wirken lässt.
  */
  transition: color 0.25s ease-in-out;
}

/**
 * 2. Hover-Zustand des Navigationslinks
 *
 * Zweck: Diese Regel wird nur dann aktiv, wenn der Mauszeiger
 * über dem Link schwebt (dank der ":hover" Pseudo-Klasse).
*/
.wp-block-navigation .wp-block-navigation-item a:hover {
  /*
   * Hier definieren wir die Zielfarbe für den Hover-Effekt.
   * Ich verwende hier 'accent-1' aus Ihrer theme.json.
   * Sie können JEDE Ihrer vordefinierten Farben verwenden, indem Sie
   * die Variable anpassen, z.B. zu var(--wp--preset--color--accent-2).
   * Dies ist die Best Practice, um Design-Konsistenz zu wahren.
  */
  color: var(--wp--preset--color--accent-2) !important;
}

/* ========== Grundlayout für Container ========== */
.wp-block-image-overlay-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: auto;
    cursor: pointer;
}

/* ========== Cover-Block: Initial-Zustand ========== */

/* Bild sichtbar */
.wp-block-cover.wp-block-image-overlay .wp-block-cover__image-background {
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Overlay unsichtbar (du kannst hier auch rgba für dezente Farbe setzen) */
.wp-block-cover.wp-block-image-overlay .wp-block-cover__background {
    background-color: rgba(0, 0, 0, 0); /* transparent */
    transition: background-color 0.3s ease;
}

/* Text nicht sichtbar */
.wp-block-image-overlay-container .wp-block-text-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    position: relative;
    z-index: 2;
}

/* ========= HOVER-STIL PRO BLOCK (ZIELGENAU) ========= */

/* --- Coffee Block --- */
.wp-block-cover.wp-block-image-overlay-cof:hover .wp-block-cover__image-background {
    opacity: 0.8;
}
.wp-block-cover.wp-block-image-overlay-cof:hover .wp-block-cover__background {
    background-color: #632b0d !important; /* z. B. dunkles Overlay */
    opacity: 0.85;
}
.wp-block-cover.wp-block-image-overlay-cof:hover .wp-block-text-overlay-cof {
    opacity: 1;
}

/* --- Matcha Block --- */
.wp-block-cover.wp-block-image-overlay-mat:hover .wp-block-cover__image-background {
    opacity: 0.8;
}
.wp-block-cover.wp-block-image-overlay-mat:hover .wp-block-cover__background {
    background-color: #223127 !important; /* z. B. grünlich */
    opacity: 0.85;
}
.wp-block-cover.wp-block-image-overlay-mat:hover .wp-block-text-overlay-mat {
    opacity: 1;
}

/* --- Brioches Block --- */
.wp-block-cover.wp-block-image-overlay-bri:hover .wp-block-cover__image-background {
    opacity: 0.8;
}
.wp-block-cover.wp-block-image-overlay-bri:hover .wp-block-cover__background {
    background-color: #223127 !important; /* z. B. warmes Braun */
    opacity: 0.85;
}
.wp-block-cover.wp-block-image-overlay-bri:hover .wp-block-text-overlay-brio {
    opacity: 1;
}

/* --- Sweets Block --- */
.wp-block-cover.wp-block-image-overlay-swe:hover .wp-block-cover__image-background {
    opacity: 0.8;
}
.wp-block-cover.wp-block-image-overlay-swe:hover .wp-block-cover__background {
    background-color: #632b0d !important; /* z. B. pink/lila */
    opacity: 0.85;
}
.wp-block-cover.wp-block-image-overlay-swe:hover .wp-block-text-overlay-swe {
    opacity: 1;
}

.home-accent-pic1 {
    position: relative;
}

.home-accent-pic1 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic1::before {
    content: "";
    position: absolute;
    top: 12px; /* Abstand vom oberen Rand des Bildes */
    left: -85px; /* Abstand vom linken Rand des Bildes */
    width: 280px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 2;
    border-radius: 4px 4px 4px 4px;

}

.home-accent-pic2 {
    position: relative;
}

.home-accent-pic2 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic2::before {
    content: "";
    position: absolute;
    top: 80%; /* Abstand vom oberen Rand des Bildes */
    right: -218px;
    width: 180px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 2;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(90deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}

.home-accent-pic3 {
    position: relative;
}

.home-accent-pic3 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic3::before {
    content: "";
    position: absolute;
    bottom: -8px; /* Abstand vom oberen Rand des Bildes */
    left: 38%;
    width: 280px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 2;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(180deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}

.home-accent-pic4 {
    position: relative;
}

.home-accent-pic4 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic4::before {
    content: "";
    position: absolute;
    top: 80%;
    left: -23px;
    width: 300px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 35;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(90deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}

.home-accent-pic5 {
    position: relative;
}

.home-accent-pic5 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic5::before {
    content: "";
    position: absolute;
    bottom: -8px; /* Abstand vom oberen Rand des Bildes */
    left: 42%;
    width: 210px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 2;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(180deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}

.home-accent-pic6 {
    position: relative;
}

.home-accent-pic6 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic6::before {
    content: "";
    position: absolute;
    bottom: 1px; /* Abstand vom oberen Rand des Bildes */
    left:  -3vw;
    width: 280px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 2;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(90deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}

.header-accent-mage {
   z-index: 25;
   position: relative;
}

.header-accent-mage::after {
  content: "";
  position: absolute;
  bottom: -15px; /* ragt 20px nach unten in den Content */
  left: -10px;
  width: clamp(170px, 20%, 240px);
  height: 42px; /* Höhe des Balkens */
  background-color: #ed7a16; /* Beispiel: rot – kann angepasst werden */
  z-index: -1; /* liegt hinter dem Header und dem Content */
  border-radius: 4px 4px 4px 4px;
}

.home-accent-pic7 {
    position: relative;
}

.home-accent-pic7 {
    position: relative; /* Wichtig für das Pseudo-Element */
    border-radius: 4px; /* Optional: passt zum Bild */
}

.home-accent-pic7::before {
    content: "";
    position: absolute;
    bottom: -35px;
    left: 32vw;
    width: 240px; /* Breite des gesamten Streifens */
    height: 24px; /* Höhe des gesamten Streifens */
    background: #ed7a16; /* Farbe des oberen Streifens */
    z-index: 25;
    border-radius: 4px 4px 4px 4px;
    transform: rotate(180deg);
    transform-origin: top left; /* Wichtig für korrektes Drehen */

}