/*
 * custom-kopie.css
 * Individuelle Anpassungen für ruether-architektur.com
 * Basis: Pixelarity Ethereal Theme
 * ─────────────────────────────────────────────────────────────────────────────
 * Gliederung:
 *  1. Globale Farben & Typografie
 *  2. Buttons
 *  3. Panel-Hintergründe & Textfarben
 *  4. Headings (Logo, Banner)
 *  5. Bildergalerie
 *  6. Lightbox
 *  7. Responsive – Smartphone Portrait  (≤ 736px)
 *  8. Responsive – Desktop              (≥ 1280px)
 
 *  Responsive – Tablet Portrait      (600px – 1024px) erstmal raus
 * ─────────────────────────────────────────────────────────────────────────────
 */


/* ═══════════════════════════════════════════════════════════
   1. GLOBALE FARBEN & TYPOGRAFIE
   ═══════════════════════════════════════════════════════════ */

body {
    color: #2a2a2a;
}


/* ═══════════════════════════════════════════════════════════
   2. BUTTONS
   ═══════════════════════════════════════════════════════════ */

input[type="submit"],
input[type="reset"],
input[type="button"],
button,
.button {
    color: #2a2a2a !important;
    box-shadow: inset 0 0 0 2px rgba(42, 42, 42, 0.25);
}

.button:hover {
    box-shadow: inset 0 0 0 2px #2a2a2a;
    color: #2a2a2a !important;
}


/* ═══════════════════════════════════════════════════════════
   3. PANEL-HINTERGRÜNDE & TEXTFARBEN
   ═══════════════════════════════════════════════════════════ */

/* color0b – heller Hintergrund statt Theme-Farbverlauf */
.panel > *.color0b {
    background-image: none !important;
    background-color: #e2e2e2 !important;
}

/* intro.color2 – bunten Hintergrund entfernen (z. B. QR-Code-Kachel, Wissenswertes) */
.panel > .intro.color2 {
    background-image: none !important;
    background-color: #e2e2e2 !important;
}

/* Textfarbe in hellen Panels auf dunkel setzen */
.panel > *.color0b,
.panel > .intro.color2 {
    color: #2a2a2a !important;
}

.panel > *.color0b h1,
.panel > *.color0b h2,
.panel > *.color0b h3,
.panel > *.color0b p,
.panel > .intro.color2 h1,
.panel > .intro.color2 h2,
.panel > .intro.color2 p {
    color: #2a2a2a !important;
}


/* ═══════════════════════════════════════════════════════════
   4. HEADINGS – LOGO & BANNER
   ═══════════════════════════════════════════════════════════ */

/* h1 „RÜTHER" – rot */
h1.major.logo {
    color: #c5192a !important;
    padding-top: 1rem;
}

/* Dekorationslinie unter h1.major entfernen */
h1.major.logo::after {
    background-color: none;
}

/* h2 in der Banner-Startkachel – dunkel */
.panel.banner h2 {
    color: #2a2a2a !important;
    padding-bottom: 1rem;
}


/* ═══════════════════════════════════════════════════════════
   5. BILDERGALERIE
   ═══════════════════════════════════════════════════════════ */

/* Alle Galeriebilder füllen ihre Kachel vollständig */
.gallery .image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hover-Zoom-Effekt des Themes deaktivieren */
.gallery .image img {
    transform: none !important;
    transition: none !important;
}

.gallery .image:hover img {
    transform: none !important;
}

/* Rahmen um jede Kachel */
.gallery .image {
    outline: 3px solid #e2e2e2;
}

/* Planungsskizzen: einpassen statt beschneiden, heller Hintergrund */
.gallery img.skizze {
    object-fit: contain;
    background-color: #f2f2f2;
}

/* Breite der Hochkant-Kachel (Olpenitz) – Desktop */
.panel .span-2-2 {
    width: 22rem;
}


/* ═══════════════════════════════════════════════════════════
   6. LIGHTBOX (Caption-Overlay für Galeriebilder)
   ═══════════════════════════════════════════════════════════ */

#caption-lightbox {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 99999;
    align-items: center;
    justify-content: center;
}

#caption-lightbox.active {
    display: flex;
}

#caption-lightbox-inner {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
}

#caption-lightbox-img {
    display: block;
    max-width: 90vw;
    max-height: 85vh;
    object-fit: contain;
}

#caption-lightbox-text {
    background: rgba(255, 255, 255, 1);
    color: #2a2a2a;
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
    text-align: center;
}

#caption-lightbox-close {
    position: absolute;
    top: 0;
    right: 0;
    background: none;
    border: none;
    color: #2a2a2a;
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
}


/* ═══════════════════════════════════════════════════════════
   7. RESPONSIVE – SMARTPHONE PORTRAIT  (≤ 736px)
   ═══════════════════════════════════════════════════════════ */

/* QR-Code-Kachel ausblenden */
@media screen and (max-width: 736px),
       screen and (orientation: landscape) and (max-height: 500px) {
    #qr-section {
        display: none;
    }
}

/* Galerie: Kachelhöhe und Hochkant-Breite anpassen */
@media screen and (max-width: 480px) {
    .gallery .image {
        height: 40rem;
    }

    .panel .span-2-2 {
        width: 26rem !important;
    }
}

/* Portraitbild: Ganzporträt für alle Portrait-Geräte bis 1024px */
@media only screen and (max-width: 1024px) and (orientation: portrait) {
    .resp-img {
        content: url('/images/mobile-portrait.jpg');
        object-position: center;
    }
}


/* ═══════════════════════════════════════════════════════════
   8. RESPONSIVE – DESKTOP  (≥ 1280px)
   ═══════════════════════════════════════════════════════════ */

/* Trennlinie zwischen Panels */
@media screen and (min-width: 1280px) {
    .panel {
        border-left: 1px solid #d2d2d2 !important;
    }
}