/* ==========================================================
   Atlas Engine 3.0
   Final Layout
   © 2026 Ray Adam
   Software Architecture:
   Ray Adam & OpenAI ChatGPT
   ========================================================== */

*{
    box-sizing:border-box;
    user-select:none;
    -webkit-user-select:none;
}

html,body{
    margin:0;
    padding:0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: transparent;
    font-family: Georgia, serif;
}

img{
    -webkit-user-drag:none;
    user-select:none;
}

#atlas{
    position:relative;
    width:1085px;
    height:802px;
    overflow:hidden;
}

/* ---------- Rahmen ---------- */

#frame{
    position:absolute;
    inset:0;
    width:1085px;
    height:802px;
    z-index:100;
    pointer-events:none;
}

/* ---------- Karte ---------- */

#viewport{
    position:absolute;
    left:42px;
    top:56px;
    width:1000px;
    height:693px;
    overflow:hidden;
    cursor:grab;
    z-index:5;
}
#viewport.dragging{cursor:grabbing;}

#world{
    position:absolute;
    left:0;
    top:0;
    transform-origin:0 0;
}

#map{
    width:2600px;
    height:1800px;
    display:block;
    pointer-events:none;
}

#hotspots{
    position:absolute;
    inset:0;
    width:2600px;
    height:1800px;
}

.hotspot{
    position:absolute;
    width:68px;
    height:68px;
    margin:-34px 0 0 -34px;
    border-radius:50%;
    border:4px solid rgba(255,220,70,.96);
    background:rgba(255,210,70,.36);
    box-shadow:0 0 22px rgba(255,220,70,.70);
    cursor:pointer;
    transition:transform .15s ease;
}

.hotspot:hover{
    transform:scale(1.08);
}

/* ---------- Maßstab ---------- */

#scalePanel{
    position:absolute;
    right:18px;
    top:20px;
    width:112px;
    height:176px;
    z-index:220;
}

#scalePanel .panel{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    pointer-events:none;
}

#zoomIn,#zoomOut{
    position:absolute;
    left:32px;
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
}

#zoomIn{top:22px;}
#zoomOut{bottom:18px;}

#zoomIn img,#zoomOut img,#infoClose img{
    width:48px;
    height:48px;
}

#zoomValue{
    position:absolute;
    top:82px;
    left:0;
    width:100%;
    text-align:center;
    font-size:15px;
    font-weight:bold;
    color:#fff8dd;
    text-shadow:0 2px 3px #000;
}

/* ---------- Großbild ---------- */

#imageStage{
    position:absolute;
    left:42px;
    top:92px;
    width:505px;
    height:650px;
    z-index:260;
}

#imageCloud{
    position:absolute;
    inset:0;
    width:505px;
    height:650px;
}

#imageLarge{
    position:absolute;
    left:52px;
    top:40px;
    width:400px;
    height:560px;
    object-fit:contain;
    cursor:pointer;
}

/* ---------- Informationskasten ---------- */

#infoPanel{
    position:absolute;
    right:18px;
    bottom:18px;
    height:415px;
    width:auto;
    display:none;
    z-index:250;
}

#infoPanel .panel{
    display:block;
    height:415px;
    width:auto;
    pointer-events:none;
}

#infoClose{
    position:absolute;
    right:18px;
    top:18px;
    border:0;
    background:none;
    padding:0;
    cursor:pointer;
}

#infoTitle{
    position:absolute;
    left:60px;
    top:118px;
    width:185px;
    margin:0;
    font-size:18px;
    font-weight:bold;
    line-height:1.15;
    color:#2f1d0f;
}

#infoText{
    position:absolute;
    left:60px;
    top:159px;
    width:185px;
    height:165px;
    overflow:hidden;
    font-size:12px;
    line-height:1.45;
    color:#352415;
}

/* Touchbedienung auf Handy und Tablet */
#viewport,
.hotspot {
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
}

/* Zoomkasten grundsätzlich unten links */
#scalePanel {
    display: block !important;
    left: 18px !important;
    right: auto !important;
    top: auto !important;
    bottom: 18px !important;
}

/* Kleinere Fotowiedergabe auf schmalen Handydisplays */
/* ==========================================================
   Responsive Bild- und Infowiedergabe
   ========================================================== */

/* Längere Infotexte innerhalb des Kastens scrollbar machen */
#infoText {
    overflow-x: hidden;
    overflow-y: auto;
    padding-right: 4px;
    -webkit-overflow-scrolling: touch;
}

/* Handy hochkant */
@media (max-width: 500px) {

    #imageStage {
        left: 10px;
        top: 15px;
        width: 270px;
        height: 347px;
        transform: none;
    }

    #imageCloud {
        width: 100%;
        height: 100%;
    }

    #imageLarge {
        left: 10.3%;
        top: 6.15%;
        width: 79.2%;
        height: 86.15%;
        object-fit: contain;
    }

    #infoPanel {
        left: 10px;
        right: auto;
        top: auto;
        bottom: 5px;
        z-index: 270;
    }
}

/* Tablet hochkant – sowie große Handys mit hohem Atlasfenster */
@media (min-width: 501px) and (max-width: 800px)
       and (orientation: portrait) {

    #imageStage {
        left: 10px;
        top: 15px;
        transform: scale(0.55);
        transform-origin: top left;
    }

    #infoPanel {
        left: 10px;
        right: auto;
        top: auto;
        bottom: 5px;
        z-index: 270;
    }
}

/* Tablet quer – Bild und Infokasten nebeneinander */
@media (min-width: 501px) and (max-width: 900px)
       and (orientation: landscape) {

    #imageStage {
        left: 10px;
        top: 20px;
        transform: scale(0.60);
        transform-origin: top left;
    }

    #infoPanel {
        left: 350px;
        right: auto;
        top: 20px;
        bottom: auto;
        z-index: 270;
    }
}

/* Überschrift bündig mit dem Infotext */
#infoTitle {
    left: 70px;
    width: 155px;
    text-align: center;
}

/* Infotext innerhalb der Ranken mit Silbentrennung */
#infoText {
    left: 70px;
    width: 155px;

    -webkit-hyphens: auto;
    hyphens: auto;

    word-break: normal;
    overflow-wrap: break-word;
}

/* Etwas kleinere Schrift im Infokasten – nur Desktop */
@media (min-width: 901px) {
    #infoText {
        font-size: 10.5px;
        line-height: 1.35;
    }
}