html, body { overflow-x: hidden; }
body {
    font-family: 'Inter', sans-serif;
}

/* Hasło (SAModzielni!/INDEPENDENT!/SELBSTSTÄNDIG!):
   - NIE dzielimy / nie zawijamy (nowrap)
   - mobile: wyśrodkowane
   - desktop (>=640px): wyrównane do prawej
   - zawsze: w 100% w obrębie szarego, zaokrąglonego kafelka (przez flex + autoskalowanie w JS) */
.concept-independent-wrap{
    display: flex;
    justify-content: center; /* mobile */
    align-items: center;
    max-width: 100%;
    overflow: hidden;        /* nic nie wyjdzie poza kafelek */
}
@media (min-width: 640px){
    .concept-independent-wrap{
        justify-content: flex-end; /* desktop */
    }
}
.concept-independent{
    display: inline-block;
    max-width: 100%;
    white-space: nowrap; /* zakaz dzielenia / zawijania */
    line-height: 1;
    will-change: transform;
}
.tab-content-container {
    min-height: 400px; /* Zapewnienie minimalnej wysokości, aby uniknąć skoków layoutu */
    transition: all 0.3s ease-in-out;
}
.tab-button {
    transition: all 0.2s;
    position: relative;
}
.tab-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%);
    height: 4px;
    width: 0;
    background-color: transparent;
    border-radius: 2px 2px 0 0;
    transition: width 0.3s ease-out;
}
.tab-button.active::after {
    width: 100%;
    background-color: #d97706; /* yellow-600 */
}

/* Styl dla płynnego pojawiania się sekcji z prezentacją */
.presentation-toggle {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.7s ease-in-out, padding 0.5s ease-in-out;
    padding: 0;
}
.presentation-toggle.active {
    max-height: 8000px;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

/* Cień dla tekstu na obrazku */
.text-on-image-shadow {
     text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* === POCZĄTEK STYLI DLA "WIĘCEJ NIŻ ULOTKA" (AUTOBUS) === */

/* Styl bazowy dla kontenera, aby pozycjonowanie absolutne hotspotów działało */
.interactive-container {
    position: relative;
    max-width: 800px; /* Maksymalna szerokość dla obrazu */
    margin: 0 auto;
    /* Zapewnienie, że interaktywny kontener jest responsywny */
    width: 100%;
    height: auto;
}

/* Hotspot: Przezroczysty obszar do najechania/kliknięcia */
.hotspot {
    position: absolute;
    width: 50px; /* Zwiększony rozmiar */
    height: 55px; /* Wysokość: 55px (poprzednia zmiana) */
    border-radius: 50%;
    cursor: pointer;
    z-index: 20; /* Nad obrazem */
    
    /* Domyślny stan jest teraz całkowicie PRZEZROCZYSTY */
    background: transparent; /* Usunięte tło */
    box-shadow: none; /* Usunięty cień/obwódka */

    transition: all 0.2s ease-in-out;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 1.5rem;
    color: transparent; /* Domyślny kolor litery (PRZEZROCZYSTY) */
}

/* Efekt po najechaniu na Hotspot (desktop) lub po kliknięciu (mobile) */
.hotspot:hover,
.hotspot.active { 
    /* Podświetlenie na hover/active jest przezroczyste (z poprzedniej zmiany) */
    box-shadow: none; /* Usunięcie cienia/poświaty */
    background: transparent; /* Usunięcie tła */
    transform: scale(1.1);
}

/* Dodanie widocznego, delikatnego podświetlenia na hover, aby wskazać obszar interakcji */
.hotspot:hover,
.hotspot.active {
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.2); /* Delikatna biała poświata, gdy aktywny */
    transform: scale(1.1);
}


/* Tooltip: Chmurka z informacją */
.tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    background-color: #1e3a8a; /* Ciemnoniebieskie tło chmurki */
    color: white;
    padding: 10px 15px;
    border-radius: 12px;
    width: 300px; /* Zwiększona szerokość dla lepszej czytelności (DESKTOP) */
    font-size: 0.9rem; /* Rozmiar czcionki (DESKTOP) */
    text-align: left;
    z-index: 30; /* Nad hotspotem */
    pointer-events: none; /* Pozwala na interakcję z elementami pod spodem */
    transition: visibility 0.3s, opacity 0.3s ease-in-out, transform 0.3s;
    transform: translateY(10px); /* Początkowe przesunięcie dla animacji */
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.4);
}

/* Strzałka (ogon) chmurki */
.tooltip::after {
    content: "";
    position: absolute;
    border-width: 8px;
    border-style: solid;
}

/* Styl dla dymka po najechaniu (Desktop) */
.hotspot:hover .tooltip,
/* Styl dla dymka po kliknięciu/dotknięciu (Mobile/JS) */
.hotspot.active .tooltip {
     visibility: visible;
     opacity: 1;
     transform: translateY(0) translateX(0) !important; /* Resetowanie wszystkich transformacji dla dymku */
     pointer-events: auto;
}


/* POZYCJONOWANIE CHMUREK (DESKTOP) */

/* A: Chmurka pojawia się PONIŻEJ hotspota (ze względu na wysoką pozycję) */
.hotspot-A .tooltip { top: 100%; left: 50%; transform: translate(-50%, 15px) !important; }
.hotspot-A .tooltip::after { top: -16px; left: 50%; margin-left: -8px; border-color: transparent transparent #1e3a8a transparent; }

/* C: Chmurka pojawia się PO PRAWEJ stronie hotspota */
.hotspot-C .tooltip { left: 100%; top: 50%; transform: translate(15px, -50%) !important; }
.hotspot-C .tooltip::after { left: -16px; top: 50%; margin-top: -8px; border-color: transparent #1e3a8a transparent transparent; }

/* B: Chmurka pojawia się PO LEWEJ stronie hotspota */
.hotspot-B .tooltip { right: 100%; top: 50%; transform: translate(-15px, -50%) !important; }
.hotspot-B .tooltip::after { right: -16px; top: 50%; margin-top: -8px; border-color: transparent transparent transparent #1e3a8a; }

/* D: Chmurka pojawia się PO LEWEJ stronie hotspota */
.hotspot-D .tooltip { right: 100%; top: 50%; transform: translate(-15px, -50%) !important; }
.hotspot-D .tooltip::after { right: -16px; top: 50%; margin-top: -8px; border-color: transparent transparent transparent #1e3a8a; }

/* --- POZYCJONOWANIE CHMUREK DLA REWERSU (E, F, G, H, I) --- */

/* E (PONIŻEJ hotspota, ze względu na bardzo wysoką pozycję) */
.hotspot-E .tooltip { top: 100%; left: 50%; transform: translate(-50%, 15px) !important; }
.hotspot-E .tooltip::after { top: -16px; left: 50%; margin-left: -8px; border-color: transparent transparent #1e3a8a transparent; }

/* F, G, H, I: PO PRAWEJ, bo są blisko lewej krawędzi */
.hotspot-F .tooltip,
.hotspot-G .tooltip,
.hotspot-H .tooltip,
.hotspot-I .tooltip { left: 100%; top: 50%; transform: translate(15px, -50%) !important; }
.hotspot-F .tooltip::after,
.hotspot-G .tooltip::after,
.hotspot-H .tooltip::after,
.hotspot-I .tooltip::after { left: -16px; top: 50%; margin-top: -8px; border-color: transparent #1e3a8a transparent transparent; }

/* DODATKOWA RESPONSYWNOŚĆ: Zmiana pozycji i rozmiarów dymków na urządzeniach mobilnych */
@media (max-width: 639px) {
    .interactive-container {
        padding: 1rem;
    }
    
    /* ZMNIEJSZENIE ROZMIARU HOTSPOTÓW */
    .hotspot {
        width: 40px; 
        height: 40px;
        font-size: 1.25rem;
    }
    /* Podświetlenie na hover/active na mobile */
    .hotspot:hover,
    .hotspot.active { 
        box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.2); /* Delikatna biała poświata, gdy aktywny */
        background: transparent;
        transform: scale(1.1); 
    }

    .tooltip {
        width: 150px;
        font-size: 0.75rem;
        padding: 6px 10px;
    }
    .tooltip h3 {
        font-size: 0.75rem;
    }
    .tooltip ul, .tooltip p, .tooltip address {
        font-size: 0.75rem;
    }

    /* --- RESPONSYWNOŚĆ DLA AWERSU (A, B, C, D) --- */

    /* Zmiana: Dymki pojawiają się PO LEWEJ stronie hotspota na małych ekranach.
       Centrowanie pionowe dla A, B, C. */
    .hotspot-A .tooltip,
    .hotspot-B .tooltip,
    .hotspot-C .tooltip {
        left: auto !important; 
        right: 100% !important; /* Pozycja po lewej stronie hotspota */
        top: 50% !important; /* Wyśrodkowanie w pionie */
        bottom: auto !important; 
        transform: translate(-15px, -50%) !important; /* Przesunięcie 15px w lewo i wyśrodkowanie pionowe */
    }

    /* REGUŁA DLA HOTSPOT D: Podniesienie znacznie wyżej.
       Używamy transform: translate(-15px, -300%) by przesunąć go w górę o 300% własnej wysokości. */
    .hotspot-D .tooltip {
        left: auto !important; 
        right: 100% !important; 
        top: 50% !important; /* Start od połowy wysokości hotspota */
        bottom: auto !important; 
        /* Podniesienie w górę o 300% wysokości dymka */
        transform: translate(-15px, -300%) !important; 
    }
    
    /* Ustawienie strzałki (ogona) dymka, aby wskazywała w prawo (do hotspota) */
    .hotspot-A .tooltip::after,
    .hotspot-B .tooltip::after,
    .hotspot-C .tooltip::after,
    .hotspot-D .tooltip::after {
        top: 50%;
        right: -16px; /* Strzałka na prawej krawędzi dymka */
        left: auto;
        margin-top: -8px;
        margin-left: auto;
        border-color: transparent transparent transparent #1e3a8a; /* Wskazuje w prawo */
    }


    /* --- RESPONSYWNOŚĆ DLA REWERSU (E, F, G, H, I) --- */

    /* E (jak A, B, C): Dymek po lewej, wyśrodkowany */
    .hotspot-E .tooltip {
        left: auto !important; 
        right: 100% !important;
        top: 50% !important;
        bottom: auto !important; 
        transform: translate(-15px, -50%) !important;
    }
    
    /* F, G, H i I (zmiana na PONIŻEJ na mobile, bo są blisko lewej krawędzi) */
    .hotspot-F .tooltip,
    .hotspot-G .tooltip,
    .hotspot-H .tooltip,
    .hotspot-I .tooltip {
        left: 50% !important; 
        right: auto !important;
        top: 100% !important; 
        bottom: auto !important; 
        transform: translate(-50%, 15px) !important;
    }

    /* Strzałki dla E, F, G, H, I */
    .hotspot-E .tooltip::after {
        top: 50%;
        right: -16px;
        left: auto;
        margin-top: -8px;
        margin-left: auto;
        border-color: transparent transparent transparent #1e3a8a;
    }
    
    .hotspot-F .tooltip::after,
    .hotspot-G .tooltip::after,
    .hotspot-H .tooltip::after,
    .hotspot-I .tooltip::after { 
        top: -16px; /* Strzałka na górnej krawędzi dymka */
        left: 50%;
        right: auto;
        margin-top: auto;
        margin-left: -8px; 
        border-color: transparent transparent #1e3a8a transparent; /* Wskazuje w górę */
    }
}
/* === KONIEC STYLI DLA "WIĘCEJ NIŻ ULOTKA" (AUTOBUS) === */

/* === POCZĄTEK STYLI DLA GALERII === */
/* Styl dla kontenera Wycinanki (naśladuje układ poziomy A4) */
.a4-horizontal-wrapper {
    /* Ratio 1.414:1 (A4 poziome) */
    padding-top: calc(100% / 1.414); 
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.a4-horizontal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* STYLE DLA UKŁADU PIONOWEGO (dodane dla galerii) */
.a4-vertical-wrapper {
    /* Ratio 1:1.414 (A4 pionowe) */
    padding-top: calc(100% * 1.414); 
    position: relative;
    overflow: hidden;
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.a4-vertical-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.side-label {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    z-index: 10;
    opacity: 0.9;
}

.front-color {
    background-color: #2563eb; /* Jasnoniebieski dla awersu */
}

.back-color {
    background-color: #dc2626; /* Czerwony dla rewersu */
}

/* STYL DLA OBRAZKÓW W GALERII */
/* Zapewnia, że obrazki w galeriach skalują się, aby być w całości widoczne */
.a4-horizontal-content img,
.a4-vertical-content img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain; /* Upewnij się, że obraz jest zawarty w całości */
    position: absolute; /* Pozycjonowanie wewnątrz kontenera */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Wyśrodkowanie obrazka */
}
/* === KONIEC STYLI DLA GALERII === */
.hero-video-container{position:relative;width:100%;height:100vh;overflow:hidden}
.hero-video-container video{width:100%;height:100%;object-fit:cover}

/* Prevent hero title from overflowing on small screens */
.hero-title-mobile{
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-word;
  hyphens:auto;
}


/* === MOBILE HERO TITLE SCALE +15% (PL / EN / DE) === */
@media (max-width: 639px){
  .hero-title,
  .hero-title-line,
  .hero-title-brand{
    font-size: 115%;
  }
  /* DE: keep 'Zum Ausschneiden und Zusammenbauen' unchanged */
  .hero-afterLine2{
    font-size: 100% !important;
  }
}

/* === HERO: większe, czytelne hasła w osobnych wierszach === */
.hero-slogan {
    text-align: left;
}
.hero-slogan-line {
    display: block;
    width: 100%;
    max-width: 100%;
    white-space: nowrap;
    overflow: visible;
    letter-spacing: -0.045em;
    line-height: 1.04;
    margin-top: 0.18em;
}
.hero-slogan-line:first-child {
    margin-top: 0;
    margin-bottom: 0.48em;
}

/* Desktop: rozmiar dobierany do długości konkretnego wiersza. */
.hero-xshort { font-size: clamp(3.10rem, 6.10vw, 6.10rem) !important; }
.hero-short  { font-size: clamp(2.65rem, 5.20vw, 5.35rem) !important; }
.hero-medium { font-size: clamp(2.25rem, 4.35vw, 4.55rem) !important; }
.hero-long   { font-size: clamp(2.00rem, 3.85vw, 4.05rem) !important; }
.hero-xlong  { font-size: clamp(1.72rem, 3.30vw, 3.48rem) !important; }

/* Telefon: maksymalnie duże litery, ale każdy wskazany tekst pozostaje w jednym wierszu. */
@media (max-width: 639px) {
    .hero-slogan-line {
        letter-spacing: -0.065em;
        line-height: 1.06;
        margin-top: 0.24em;
    }
    .hero-slogan-line:first-child {
        margin-bottom: 0.62em;
    }
    .hero-xshort { font-size: clamp(2.25rem, 12.0vw, 3.15rem) !important; }
    .hero-short  { font-size: clamp(1.62rem, 8.25vw, 2.20rem) !important; }
    .hero-medium { font-size: clamp(1.23rem, 6.15vw, 1.62rem) !important; }
    .hero-long   { font-size: clamp(1.04rem, 5.10vw, 1.38rem) !important; }
    .hero-xlong  { font-size: clamp(0.91rem, 4.35vw, 1.18rem) !important; }
}