/*
 Platz für eigenes CSS
 Die hier gemachten Regeln überschreiben ggfs. andere Regeln, da diese Datei
 als letzte geladen wird.

 OneSource selbst liegt in themes/onesource/pj-bauteile.css und im Stylesheet
 des gewählten Stils. Diese Datei gehört Ihnen.

 Achtung: ein Template-Update liefert diese Datei mit aus und überschreibt
 damit Ihre Änderungen. Was ein Update überleben soll, gehört in das Feld
 customContent unter Darstellung → Templates → OneSource → Einstellungen →
 Eigenes Sass. Siehe doku/06-gestaltung.md.
*/

/* ===========================================================================
   pj - Übergang vitacoustic.de, 2026-10-01 — KEIN Teil von OneSource.

   Die alten OPC-Seiten des Live-Shops (Startseite, Referenzseiten) tragen
   Klassen aus dem Vorgängertemplate. Hier stehen nur PJs eigene Regeln dafür
   (VitalOffice2025_545/css/custom.css — eigener Code, übernehmbar), und nur
   die, für die OneSource/Bootstrap kein Gegenstück haben. Hilfsklassen
   (col-xs, btn-default, center, w100, dpflex-*) sind im OPC-Inhalt auf
   Bootstrap-Namen umgeschrieben; die Aufklapptexte laufen über Bootstraps
   Modal mit .pj-modal (js/custom.js). Nichts davon ist doppelt zu OneSource.

   Weglassen gegenüber dem Alten: die globalen Regeln auf h3 und .btn-success
   — sie griffen in jedes Bauteil.

   LÖSCHEN, sobald diese Inhalte aus der Wawi kommen: diesen Block, den Block
   in js/custom.js und die Zeile opc_after_mainmenu in layout/header.tpl.
   =========================================================================== */

/* Farbwechsel Animation */
@keyframes colorCycle {
    0% {
        background-color: #f7f7e7; /* Hellbeige */
    }
    33% {
        background-color: #dfe7d7; /* Helles Grün */
    }
    66% {
        background-color: #d7e7e7; /* Blasses Türkis */
    }
    100% {
        background-color: #efefef; /* Zurück zur Startfarbe */
    }
}

/* Farbwechsel Animation */
@keyframes colorCycle2 {
    0% {
        background-color: #a2c2a1; /* Helles Grün */
    }
    33% {
        background-color: #ebebbf; /* Hellbeige */
    }
    66% {
        background-color: #e1e1e1; /* Zurück zur Startfarbe */
    }
    100% {
        background-color: #9ac5c3; /* Blasses Türkis */
    }
}

.pj01 {
    width: 80%;
    margin: 0 auto;
    letter-spacing: .4px;
    padding: 20px;
    border-radius: 1rem;
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: #efefef; /* Startfarbe */
    animation: colorCycle 30s ease infinite;
    transition: background-color 100s ease; /* Sanfter Übergang */
    box-shadow:
        10px 10px 30px rgba(0, 0, 0, 0.15),
        20px 20px 50px rgba(0, 0, 0, 0.10),
        30px 30px 60px rgba(0, 0, 0, 0.05);
}

.pj02 { /* Überschriften */
    align-items: normal;
    background-color: #e1e1e1; /* Startfarbe */
    animation: colorCycle2 30s ease infinite;
}

/* alt: ".pj02 p, .pj01 p, h3" — das nackte h3 ist weggelassen (global) */
.pj02 p, .pj01 p {
    margin: 1rem 0 15px 0;
}

.pj01 h2 {
    font-size: 2rem;
    margin: 15px 0px 15px 0px;
    letter-spacing: 0.9px;
    text-shadow: -3px 2.5px 2px rgba(180, 180, 180, .5);
}

.pj02 h2 {
    margin: 0;
    padding-top: 0;
    text-shadow: -3px 2.5px 2px rgba(180, 180, 180, .5);
}

.pj02 h3 {
    line-height: 1.5rem;
    color: #2d7331;
    text-shadow: -3px 2.5px 2px rgba(180, 180, 180, .5);
}

.pj01 p blockquote {
    font-size: 1.25rem;
    color: #555;
    margin-bottom: 20px;
    text-align: center;
}

.pj01 blockquote, .pj01 .blockquote {
    font-size: 1.2rem;
    font-style: italic;
    font-weight: 700;
    color: #28a745;
    margin: 0px;
    text-align: justify;
}

.pj01 blockquote a {
    color: #28a745 !important;
}

.pj01 ul {
    list-style-type: none; /* Verwendet ::before */
    margin: 0;
    padding: 0;
}

.pj01 li {
    margin: 0;
    padding: 0 0 5px 0;
    display: flex;
    position: relative;
    overflow: hidden;
    color: #555;
}

.pj01 li::before {
    content: "\2714"; /* Häkchen */
    color: #28a745;
    font-size: 22px;
    margin-right: 10px;
    margin-top: -2px;
}

.pj01 li:hover {
    color: #333;
    text-shadow: 0.5px 0.5px 1px rgba(100, 100, 100, 0.8);
}

.pj01 li:hover::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0);
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3);
    pointer-events: none;
    transition: all 0.3s ease-in-out;
}

.pj01-h1 {
    font-size: 3rem;
    margin-bottom: 50px;
    margin-top: 50px;
    text-align: center;
    color: #333;
    text-shadow: -3px 2.5px 2px rgba(180, 180, 180, .8);
}

.pj01-subtitle {
    font-size: 1.7rem;
    font-style: italic;
    font-weight: bold;
    color: #2d7331;
    margin: -30px 50px 50px 50px;
    text-align: center;
    text-shadow: -3px 2.5px 2px rgba(180, 180, 180, .5);
}

.pj01-video {
    border-radius: 1rem;
    margin-left: 55px;
    width: 100%;
}

.pj01-video video {
    /* pj - ergaenzt 2026-10-01: JTLs Video-Portlet (5.7.4) setzt den Wrapper
       auf inline-block und gibt dem <video> keine Breite — das 1920er Video
       lief ueber den Rand. Snackys' Grund-CSS fing das ab, OneSource/Bootstrap
       nicht (Reboot setzt video nur auf inline-block). */
    max-width: 100%;
    height: auto;
    box-shadow:
        10px 10px 30px rgba(0, 0, 0, 0.15),
        20px 20px 50px rgba(0, 0, 0, 0.10),
        30px 30px 60px rgba(0, 0, 0, 0.05);
}

/* Aufklapptext: der sichtbare, beschnittene Teil und der Knopf dahinter.
   Das Modal selbst ist Bootstrap + .pj-modal (OneSource), nicht hier. */
.pj01-modal-ct {
    position: relative;
    overflow: hidden;
}

.pjmodal-text {
    overflow: hidden;
    max-height: 508px;
}

.pj01-read-more-dots {
    background: transparent;
    border: none;
    cursor: pointer;
    float: right;
    margin-top: 5px;
}

/* Der alte Vollbild-Behälter aus dem Inhalt bleibt im Markup, wird aber nicht
   mehr gebraucht — js/custom.js füllt stattdessen ein Bootstrap-Modal. */
.pjModal {
    display: none;
}

.Star5Rate {
    float: left;
    color: #ffc700;
    font-size: 20px;
    line-height: 1rem;
    margin-top: 5px;
}

.marker {
    background-color: yellow;
}

.pj01green {
    color: #2d7331;
}

@media (max-width: 1200px) {
    .pj01-video {
        width: 80%;
        margin: 0 auto;
    }
}

@media (max-width: 768px) {
    .pj01 {
        width: 90%;
    }
    .pj01 h2 {
        font-size: 1.5rem;
        margin: 10px 0px 10px 0px;
        padding-top: 5px;
    }
    .pj01 p {
        font-size: 1rem;
        margin-bottom: 15px;
    }
    .pj01 blockquote {
        font-size: 1.1rem;
        margin: 30px;
    }
    .pj02 {
        width: 95%;
    }
    .pj02 h3 {
        font-size: 1.2rem;
    }
    .pj01-h1 {
        font-size: 2rem;
    }
    .pj01-subtitle {
        font-size: 1.5rem;
    }
    .pj01-video {
        width: 90%;
        margin: 0 auto;
    }
}
/* === Ende Übergang vitacoustic.de ========================================= */

/* ===========================================================================
   pj - Übergang Downloadbereich (pflip-Regal), 2026-10-02 — KEIN Teil von
   OneSource. Auftrag PJ: „erstmal 1 nachbauen .. später ändern wir das".

   Abschrift der Iframe-Hülle aus VitalOffice2025_545/css/custom.css:522-553
   (PJs eigener Code), unverändert bis auf eine Zahl: der Behälter lag auf
   z-index 1000 — hier läge er damit unter dem stehenden Kopf (1020), der
   B2B-Leiste (1021) und dem Seitenmenü (1036). Kreuz und Rahmen behalten
   ihre Werte; sie zählen nur noch innerhalb des Behälters.

   LÖSCHEN zusammen mit dem gleichnamigen Block in js/custom.js.
   =========================================================================== */
.pjiframe {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1000;
}

#pjiframe-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    z-index: 1040; /* alt: 1000 */
}

#pjiframe-close {
    position: absolute;
    font-size: 30px;
    cursor: pointer;
    z-index: 1100;
    top: 0px;
    background: #28a745;
    right: 0;
}

#pjiframe-close::before {
    content: "\274C"; /* Kreuz */
    font-size: 24px;
}
/* === Ende Übergang Downloadbereich ======================================== */