/* zusatz CSS: Aktuelles Seite */

/* ===================== DESKTOP ===================== */


/* ---------------------------------------------------------
   Grundlayout für jeden Aktuelles‑Block (EINZELBEITRAG)
   Icon links – Text rechts – sauberer Abstand
--------------------------------------------------------- */
.aktuelles-block {
    display: flex;        /* ersetzt die alte Tabelle */
    gap: 10px;            /* 👈 Abstand zwischen Icon und Text */
    margin-bottom: 4em;   /* 👈 Abstand zum nächsten Beitrag */
}

/* ---------------------------------------------------------
   Icon links (50x50) – fixiert, schrumpft nicht
--------------------------------------------------------- */
.aktuelles-icon {
    flex-shrink: 0;       /* Breite passt sich automatisch an */
    padding-right: 0px;   /* ersetzt GlasLogo >> nein... macht OBEN das "gap" schon */
    padding-top: 35px;    /* 👈 abstimmen mit padding des .aktuelles-content containers */
    display: flex;
    align-items: flex-start; /* optional: Icons oben ausrichten */
}

/* ======= 50x50 Icons ====== */  
.aktuelles-icon img {
    border-radius: 4px;   /* abrunden */
}



/* ========================================================== */






/* #region 🟫 CONTENT‑CONTAINER (Grundlayout, Papierhintergrund) */
/* ============================================================ */
.aktuelles-content { 
    flex-basis: 100%; /* verhindert Schrumpfen im Flex‑Layout */
    text-align: center;

    /* Innenabstände (oben/seitlich/unten) */
    padding: 35px 50px 10px; /* 👈 abgestimmt auf Lochung + Abriss (Abstand mit ICON oben abstimmen)*/

    /* Papier – Mittelteil (kachelbare Linien) */
    position: relative;
    z-index: 0;
    background-image: url("../images/deko/blatt_liniert_MITTE_blass.png");
    background-repeat: repeat-y;
    background-size: 1200px auto; /* 👈 Stellschraube: Breite des Blatts >> 
                                     ⚠️ Ändert auch die Größenoptik, quasi ZOOM */
    background-position-x: -60px; /* 👈 horizontale Ausrichtung >> ROTE LINIE */
    background-position-y: 6px;   /* 👈 Startpunkt der Linien */

    /* leichter Gesamtschatten (nicht Abriss!) */
    filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.1));

    border-radius: 10px; /* optische Abrundung */
}



/* ============================================================
   🟫 LOCHUNG OBEN – fixer Bereich
============================================================ */
.aktuelles-content::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;

    height: 23px; /* 👈 Stellschraube: Höhe der Lochung */

    background-image: url("../images/deko/blatt_liniert_KOPF_blass.png");
    background-repeat: no-repeat;
    background-size: 1200px auto; /* 👈 gleiche Breite wie Mittelteil */
    background-position-x: -15px;  /* Lochrand sollte lediglich ROTE LINIE etwas verdecken  */
    background-position-y: top;

    z-index: 0;

    /* Mini‑Schatten nach oben → leichte Wölbung */
    filter: drop-shadow(0px -0px 2px rgba(0, 0, 0, 0.12));
}



/* ============================================================
   🟫 ABRISS UNTEN – fixer Bereich
============================================================ */
.aktuelles-content::after {
    content: "";
    position: absolute;
    left: 0; right: 0;

    /* Abriss hängt unter dem Container → eigener Schatten */
    bottom: -20px; /* 👈 wie weit der Abriss übersteht */
    height: 20px;  /* 👈 Höhe des Abrissbereichs */

    background-image: url("../images/deko/blatt_liniert_FUSS_blass.png");
    background-repeat: no-repeat;
    background-size: 1200px auto; /* 👈 gleiche Breite wie oben */
    background-position-x: -59px; /* 👈 Ausrichtung >> ROTE LINIE */
    background-position-y: bottom;

    /* Schatten nur am Abriss */
    filter: drop-shadow(0px 3px 3px rgba(0,0,0,0.1));
}



/* ============================================================
   🟫 INHALT – liegt über allem
============================================================ */
.aktuelles-content > * {
    position: relative;
    z-index: 1; /* Inhalt über Papier */
}

/* #endregion */



/* #region 🟣 QR-Boxen */
/* ---------------------------------------------------------
   QR‑Boxen (Instagram / WhatsApp Kanal / WhatsApp Chat)
 -----------------------------------------------------------
   QR‑WRAPPER: Flex‑Container für die drei QR‑Boxen
   – sorgt für sauberes Nebeneinander + automatisches Umbrechen
 --------------------------------------------------------- */
.qr-wrapper {
    display: flex;
    flex-wrap: wrap;      /* bricht auf kleinen Screens um */
    gap: 20px;            /* Abstand zwischen den Boxen */
    margin: 20px 0;       /* Abstand oberhalb und unterhalb */
    justify-content: center;   /* <<< Zentriert ALLE Zeilen */
}

/* ---------------------------------------------------------
   Einzelne QR‑Box
   – Flex‑Column für Bild + Label
--------------------------------------------------------- */
.aktuelles-qrbox {
    width: 130px;                 /* Startbreite */
    flex: 1 1 130px;              /* 👈 erlaubt Verteilung */
    border-top: 1px dotted #330000;
    padding-top: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

/* Bild-Link als Block, keine Baseline-Lücke */
.aktuelles-qrbox a,
.aktuelles-qrbox img {
    display: block;
    margin: 0 auto;
    width: 160px;              /* 👈 hier die Größe der Grafiken */
    height: auto;
}

/* Label unter dem QR */
.aktuelles-qrbox p {
    margin-top: 0.3rem;
    font-size: 0.875rem;       /* 👈 Schriftgröße */
    line-height: 1.2;
    text-align: center;
}

/* #endregion */



/* #region 🟢 WA‑Posts/Flyer SCREENSHOTS >> kleiner Sticker oben rechts */

/* Wrapper als Link */
.wa-flyer {
    position: relative;              /* Sticker braucht Bezugspunkt */
    display: inline-block;
    margin: 0 auto;
    transition: transform 0.25s ease; /* Hover-Geschwindigkeit */

            /* ⚠️ aktiv lassen, falls Link ausgeschaltet werden soll ⚠️ */
            pointer-events: none;   /* 👉 macht den Link TOT */
            cursor: default;
}

.wa-flyer:hover {
    transform: scale(1.05);          /* 👉 Hover-Zoom-Stärke */
}

/* Bild */
.wa-flyer img {
    display: block;
    width: 100%;
    height: auto;
}

/* Sticker */
.wa-flyer::after {
    content: "WhatsApp\A ⭐️ Kanal\A I N F O ";     /* 2 Zeilen */
    white-space: pre;
    position: absolute;

    top: -10px;                      /* 👉 Sticker-Position vertikal */
    right: -10px;                    /* 👉 Sticker-Position horizontal */

    background: #1fb456ad;             /* 👉 Sticker-Farbe */
    color: white;
    font-family: 'Arial Black', sans-serif;
    font-size: 0.9rem;              /* 👉 Sticker-Schriftgröße */
    line-height: 1;                  /* kompakte Zeilenhöhe */

    font-weight: 700;

    padding: 8px 10px;                /* 👉 Sticker-Größe / Innenabstand */
    border-radius: 8px;

    transform: rotate(12deg);        /* 👉 Schieflage */
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
    letter-spacing: 0.3px;
    text-align: center;
}
/* #endregion */


/* #region 🔵 AKTUELLES – Quadratische Thumbs mit Hover-Zoom-Overlay */
/* für die ganze Standard Produktbildchen in Aktuelles */

/* Bildreihe */
.aktuelles-thumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 15px 0 25px 0;
}

/* Thumb-Container (Quadrat + Overlay-Anker) */
.thumb-box {
  position: relative;
  width: 60px;      /* Thumb-Größe */
  height: 60px;     /* Thumb-Größe */
  cursor: pointer;
}

/* Thumbnail (Quadrat) */
.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;     /* sauberes Quadrat */
  border-radius: 6px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: transform 0.25s ease;
}

/* Optional: leichtes Thumb-Zoom */
.thumb-box:hover .thumb {
  transform: scale(1.1);
} 

/* Overlay für das große Bild */
.full-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 350px;           /* maximale Breite des großen Bildes */
  border-radius: 10px;
  overflow: hidden;

  transform: translate(-50%, -50%) scale(0.2); /* Startzustand */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 99;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Großes Bild im Originalformat */
.full {
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* Hover aktiviert das Overlay */
.thumb-box:hover .full-wrap {
  opacity: 1;
}

/* ============================================================
   ZOOMGRÖSSEN – DESKTOP (da ist Hover möglich)
   ============================================================ */
/* @media (hover: hover) { */
  .thumb-box:hover .full-wrap      { transform: translate(-50%, -50%) scale(0.75); }
  .thumb-box.quer:hover .full-wrap { transform: translate(-50%, -50%) scale(0.9); }
  .thumb-box.hoch:hover .full-wrap { transform: translate(-50%, -50%) scale(0.5); }
/* } */

/* ============================================================
   ZOOMGRÖSSEN – TOUCHGERÄTE (Geräte ohne Hover)
   ============================================================ */
/* @media (hover: none) {     } */              /* siehe unten */

/* #endregion */


/* #region 🟢 VIDEO LIGHTBOX                     */
/* =======================================================
   LIGHTBOX-GRUNDELEMENT
   Unsichtbar, liegt über der ganzen Seite, wird per :target sichtbar
========================================================== */
.video-lightbox {
    display: none;                 /* Standard: unsichtbar */
    position: fixed;               /* Überlagert die komplette Seite */
    inset: 0;                      /* top:0; right:0; bottom:0; left:0 */
    background: rgba(0,0,0,0.85);  /* Abdunkelung */
    z-index: 9999;                 /* Ganz oben */
    justify-content: center;       /* Inhalt horizontal zentrieren */
    align-items: center;           /* Inhalt vertikal zentrieren */
}

/* ----------------------------------------------------------
   AKTIVIERUNG PER :target
   Wenn der Link #video1 angesprungen wird → Lightbox sichtbar
---------------------------------------------------------- */
.video-lightbox:target {
    display: flex;                 /* Flexbox aktiv → Lightbox erscheint */
}

/* ----------------------------------------------------------
   INHALTSBEREICH DER LIGHTBOX
   Enthält das Video + Schließen-Button
---------------------------------------------------------- */
.video-lightbox-content {
    position: relative;            /* Für den Close-Button */
    max-width: 90vw;               /* Video nie breiter als 90% der Viewport-Breite */
    max-height: 90vh;              /* Video nie höher als 90% der Viewport-Höhe */
}

/* ----------------------------------------------------------
   VIDEO-STYLING
   Passt sich flexibel an, behält Seitenverhältnis
---------------------------------------------------------- */
.video-lightbox video {
    width: 100%;                   /* Füllt den Lightbox-Container */
    height: auto;                  /* Höhe automatisch → kein Verzerren */
    border: 5px solid #F6EAD9;     /* Dein typischer Rahmen */
}

/* ----------------------------------------------------------
   SCHLIESSEN-BUTTON
   Einfaches X über dem Video
---------------------------------------------------------- */
.close-lightbox {
    position: absolute;            /* Position relativ zur Lightbox-Box */
    top: -40px;                    /* Über dem Video */
    right: 0;                      /* Rechtsbündig */
    font-size: 30px;               /* Großes X */
    color: #fff;                   /* Weiß für Kontrast */
    text-decoration: none;         /* Kein Unterstrich */
}

/* das Schließen "X" soll weiß bleiben */
.close-lightbox,
.close-lightbox:visited,
.close-lightbox:active,
.close-lightbox:hover {
    color: #ffffff !important;
}


/* Scroll-Offset für den #close-Anker:
   verschiebt den :target-Treffpunkt um 80px nach unten,
   ohne das Layout zu verändern */
#closevideoapfelanlage, #closevideomarkt {
    display: block;
    padding-top: 180px;   /* gewünschter Abstand zum oberen Viewport-Rand */
    margin-top: -180px;   /* neutralisiert das Padding im Layout */
}



/* Text unter dem Video-Thumbnail */
.thumb-label {
    display: block;
    text-align: center;
    font-size: 0.7rem;
    color: #993300;
    margin-top: 1px;
}

/* #endregion */


/* #region 🔶 UTILITIES - Nützliches, Diverses */


.aktuelles-content a {
   /*  word-break: break-all; */    /*  bricht URLs radikal - (Smartphone machte Layoutprobleme wg. langen INSTA- und WA-Links) */
    word-break: normal; /* vllt doch mit normal versuchen :-) */

}



/* etwas größere Überschriften */
.aktuelles-content h3 {
    font-size: 1.3rem;
    text-align: left;

            font-family: 'Caveat';
            font-size: 2.3rem;
            line-height: 0.9;
            color: #441100ee; /* leicht transparent >> blasser */
            margin: 0 0 0.2em 0;         /*   */
}


/* Bullet bei h3 hier */
.aktuelles-content h3::before {
    content: "• ";
}





/* subtiles Datum unter jedem Block - Eintrag */
.aktuelles-content .datum {
    font-size: 0.8rem;
    color: #808080;
}




/* ---------------------------------------------------------
   Utility-Klassen für Zoom-Link-Flyer, Breite und Bildverhalten
--------------------------------------------------------- */

.flyer {
    display: inline-block;
    margin: 0 auto;
}

.flyer-img {
    display: block;
    width: 100%;
    height: auto;
}

/* Desktop-Breiten (für feinere Abstufungen) */
.desk-w20 { width: 20%; }   /* 👉 sehr schmal (z.B. Mini-Flyer) */
.desk-w25 { width: 25%; }   /* 👉 Viertelbreite */
.desk-w30 { width: 30%; }   /* 👉 schmaler Teaser */
.desk-w33 { width: 33.33%; }/* 👉 Drittelbreite */
.desk-w40 { width: 40%; }   /* Standard */
.desk-w50 { width: 50%; }   /* 👉 halbe Breite */
.desk-w60 { width: 60%; }   /* Standard */
.desk-w70 { width: 70%; }   /* 👉 etwas breiter */
.desk-w80 { width: 80%; }   /* Standard */
.desk-w90 { width: 90%; }   /* 👉 fast volle Breite */
.desk-w100 { width: 100%; } /* volle Breite */




.aktuline   { margin: 30px auto; text-align:center; border:solid #F6EAD9 0px; } /* ⚠️ 0px AUSGEBLENDET */
.aktuline1 { margin:30px auto; text-align:center; border:solid #f0e0d0 1px; }  /* edc */
.aktulinerot { margin:30px auto; text-align:center; border:solid #ddbbbb 1px; } 






/* #endregion */



/* =================================== MOBILE ================================== */
/* #region 🔴 ======================== MOBILE ================================== */

@media (max-width: 1000px) {

    .aktuelles-content h3 {
        font-size: 3.5rem;
    }


    /* ======= Icons 50x50 >> MOBILE ====== */  
    .aktuelles-icon img {
        width: 100px;   /* etwas größer */
		border-radius: 10px;
    }



    /* ===========  QR ============== */
    .aktuelles-qrbox {
        width: 100%;        /* volle Zeilenbreite */
        max-width:500px;   /* Wie breit sich di QRs max verteilen dürfen */
    }    

    /* Label unter dem QR */
    .aktuelles-qrbox p {
        margin-top: 0.4rem;
        font-size: 1.5rem;        /* Schriftgröße */
    }

    .aktuelles-qrbox a,
    .aktuelles-qrbox img {
        width: 100%;
        max-width: 220px;          /* einzelne QR-Bild Breite (Größe) */
        height: auto;
    }




    /* MOBILE: größere Thumbs */
    .thumb-box { width: 140px; height: 140px; }



    /* MOBILE: stärkere Zooms */
    .thumb-box:hover .full-wrap      { transform: translate(-50%, -50%) scale(1.2); } 
    .thumb-box.quer:hover .full-wrap { transform: translate(-50%, -50%) scale(1.5); }
    .thumb-box.hoch:hover .full-wrap { transform: translate(-50%, -50%) scale(1.0); }


/* nicht mehr nötig ??
    .flyer-box:hover .flyer-full-wrap {
        transform: translate(-50%, -50%) scale(1.2);
    }
 */



    /* Text unter dem Thumbnail */
    .thumb-label {
        font-size: 1rem;
        margin-top: 1px;
    }



    /* subtiles Datum unter jedem Block - Eintrag */
    .aktuelles-content .datum {
    font-size: 1.2rem;
    color: #808080;
    }



/* ------------------------ MOBILE ---------------------------------
              ZOOM-LINK-FLYER  (WhatsApp Posts, HofladenFlyer)
   ----------------------------------------------------------------- */
    
   /* WA‑Posts SCREENSHOTS >> kleiner Sticker oben rechts >> MOBILE */

    .wa-flyer::after {
        top: -15px;
        right: -15px;
        font-size: 1.5rem;                /* etwas kleiner wegen 2 Zeilen */
        padding: 10px 15px;
        border-radius: 8px;
        line-height: 1.1;                  /* kompakte Zeilenhöhe */
        box-shadow: 0 2px 6px rgba(0,0,0,0.25);
        letter-spacing: 0.3px;
    }


/* - Utility-Klassen für Zoom-Link-Flyer, Breite und Bildverhalten - */

    .mob-w70  { width: 70%; }   /* 👉 Mobile-Breite */
    .mob-w80  { width: 80%; }   /* 👉 Mobile-Breite */
    .mob-w90  { width: 90%; }   /* 👉 Mobile-Breite */
    .mob-w100 { width: 100%; }  /* 👉 Mobile-Breite */

    /* Mobile-Obergrenzen */
    .mob-max400 { max-width: 400px; } /* 👉 max-Breite */
    .mob-max500 { max-width: 500px; } /* 👉 max-Breite */
    .mob-max600 { max-width: 600px; } /* 👉 max-Breite */



}


/* #endregion */