* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;

}

.viewport {
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    position: relative;
}

/* Der Layer, den panzoom bewegt. Bild + Hotspots liegen gemeinsam darin,
   dadurch bleiben die Buttons beim Zoomen auf ihrer Stelle im Bild. */
.zoom-layer {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: 0 0;
    /* panzoom rechnet ab der linken oberen Ecke */

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

/* Deckt sich exakt mit der sichtbaren Bildflaeche: aspect-ratio haelt das
   Seitenverhaeltnis des PNG (4535x2551), die max-Werte lassen den Rahmen
   niemals ueber das Fenster hinauswachsen. Dadurch beziehen sich die
   Prozentwerte der Hotspots aufs Bild und nicht aufs Fensterformat.
   Bei einem anderen Bild hier das neue Seitenverhaeltnis eintragen. */
.bild-rahmen {
    position: relative;
    aspect-ratio: 4535 / 2551;
    max-width: 100%;
    max-height: 100%;
}

.BigPicture {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    /* Klicks gehen an den Layer, nicht ans Bild */
}

.BigPicture.grabbing {
    cursor: grabbing;
}


/* ===== Hotspot-Buttons ===================================================
   .hotspots liegt IM Zoom-Layer und wird deshalb mitgezoomt.
   pointer-events: none laesst das Ziehen/Zoomen ueberall durch,
   die Buttons selbst fangen ihre Klicks per pointer-events: auto wieder ab.
   ======================================================================== */

.hotspots {
    position: absolute;
    inset: 0;
    /* = top/right/bottom/left: 0 */
    z-index: 10;
    pointer-events: none;
}

/* Gemeinsames Aussehen aller Buttons */
.button {
    position: absolute;
    pointer-events: auto;

    width: 26px;
    height: 26px;
    padding: 0;
    border: 2px solid #fff;
    border-radius: 50%;
    /* rund; fuer eckig: 6px */

    color: #fff;
    font-size: 12px;
    font-weight: bold;
    font-family: sans-serif;
    line-height: 1;
    /* Zahl exakt mittig */
    display: flex;
    align-items: center;
    justify-content: center;

    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);

    /* scale liegt getrennt vom translate der Positionierung, sonst wuerde
       :hover das translate(-50%, -50%) ueberschreiben und der Button springt */
    scale: 1;
    transition: scale .15s ease;
}

.button:hover {
    scale: 1.15;
}

/* Farben pro Gruppe */
.button.rot {
    background: #d62828;
}

.button.blau {
    background: #1d6fb8;
}

.button.gelb {
    background: #f0a202;
}
.hover-info
{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 30;
    background: rgba(255, 255, 255, .85);
    padding: 6px 12px;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
    pointer-events: none;
    font-size: 17px;
    max-width: 300px;
}

.hover-info p {
    margin: 0;
}

/* ===== Position jedes einzelnen Buttons ==================================
   Prozentwerte = Anteil vom .viewport, damit es mitskaliert.
   Hier einfach die Werte anpassen, bis jeder Punkt richtig sitzt.
   translate(-50%, -50%) macht top/left zum MITTELPUNKT des Buttons.
   ======================================================================== */

#rot-button1 {
    top: 55.4%;
    left: 4%;
    transform: translate(-50%, -50%);
}

#rot-button2 {
    top: 39%;
    left: 11%;
    transform: translate(-50%, -50%);
}

#rot-button3 {
    top: 28.3%;
    left: 22.2%;
    transform: translate(-50%, -50%);
}

#rot-button4 {
    top: 24.5%;
    left: 36.9%;
    transform: translate(-50%, -50%);
}

#blau-button1 {
    top: 25%;
    left: 53.5%;
    transform: translate(-50%, -50%);
}

#blau-button2 {
    top: 29.4%;
    left: 69%;
    transform: translate(-50%, -50%);
}

#blau-button3 {
    top: 39.5%;
    left: 80.7%;
    transform: translate(-50%, -50%);
}

#blau-button4 {
    top: 55%;
    left: 86.6%;
    transform: translate(-50%, -50%);
}

#gelb-button1 {
    top: 74.7%;
    left: 79.6%;
    transform: translate(-50%, -50%);
}

#gelb-button2 {
    top: 83.3%;
    left: 66.8%;
    transform: translate(-50%, -50%);
}

#gelb-button3 {
    top: 87.3%;
    left: 53.2%;
    transform: translate(-50%, -50%);
}

#gelb-button4 {
    top: 87.1%;
    left: 36.1%;
    transform: translate(-50%, -50%);
}

#gelb-button5 {
    top: 83.5%;
    left: 24.2%;
    transform: translate(-50%, -50%);
}

#gelb-button6 {
    top: 74.5%;
    left: 10.7%;
    transform: translate(-50%, -50%);
}


/* ===== Info-Box ========================================================== */

.info-box {
    /* fixed statt absolute: bleibt am Fenster verankert, unabhaengig
       von Zoom und Pan des Bildes */
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 20;

    width: 520px;
    max-height: calc(100dvh - 80px);
    overflow-y: auto;
    padding: 20px;
    padding-bottom: 66px;
    background: rgba(255, 255, 255, .70);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, .3);

    display: flex;
    flex-direction: row;
    gap: 16px;
    align-items: flex-start;
}

/* Feste Buehne fuer das Bild: bleibt immer gleich gross, egal welche
   Aufloesung oder Seitenverhaeltnis das eingesetzte Bild hat. */
.info-bild {
    flex: 0 0 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: rgba(255, 255, 255, .55);
    border: 1px dashed rgba(0, 0, 0, .25);
}

/* contain: das Bild wird komplett sichtbar eingepasst, nie beschnitten
   oder verzerrt - unabhaengig von seinen Originalmassen. */
.info-bild-img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.info-bild-platzhalter {
    color: rgba(0, 0, 0, .45);
    font-family: sans-serif;
    font-size: 13px;
}

.info-inhalt {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Sichtbarkeit steuert GSAP ueber opacity (siehe script.js),
   damit die Box weich ein- und ausblenden kann. */

.info-titel {
    margin: 0;
    font-size: 20px;
}

.info-text {
    margin: 0;
    line-height: 1.5;
}

.close-button {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: #eee;
    cursor: pointer;
}

.close-button:hover {
    background: #ddd;
}

.next-button,
.prev-button {
    position: absolute;
    bottom: 12px;
    width: 64px;
    height: 42px;
    padding: 0;
    border: none;
    background: url("grafik/Pfeil_Button.png") center / contain no-repeat;
    color: transparent;
    cursor: pointer;
    transition: scale .15s ease;
}

.prev-button {
    left: 12px;
}

.next-button {
    right: 12px;
    transform: scaleX(-1);
}

.next-button:hover,
.prev-button:hover {
    scale: 1.1;
}

.Hotbar {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 30;
}
.hotbar-button {
    padding: 10px 20px;
    border: none;
    border-radius: 6px;
    background-color: #23058f;
    color: white;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.hotbar-button:hover {
    scale: 1.25;
}

/* Beim Laden ist "Alle" die aktive Auswahl, also gleich in der aktiven Farbe.
   Ab dem ersten Klick uebernimmt GSAP die Farben (siehe script.js). */
#alleBtn {
    background-color: #18dd71;
}