html, body { height: 100%; }
* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
    font-weight: 100;
    background: #FFF1DB;
    color: #231F20;
}
a {
    color: #231F20;
    text-decoration: none;
}

.wrapper {
    position: relative;
    min-height: 100vh;
}

.corner {
    position: fixed;
    padding: 12px 14px;
    font-size: clamp(12px, 2.5vw, 18px);
}

.tl { top: 30px; left: 30px; font-size: clamp(36px, 16vw, 128px); }
.tr { top: 30px; right: 30px; font-size: clamp(20px, 8vw, 64px); }
.bl { bottom: 30px; left: 30px; font-size: clamp(20px, 8vw, 64px); }
.br { bottom: 30px; right: 30px; font-size: clamp(14px, 4vw, 24px); }

@media (max-width: 1024px) {
    .tl { top: 24px; left: 24px; }
    .tr { top: 24px; right: 24px; }
    .bl { bottom: 24px; left: 24px; }
    .br { bottom: 24px; right: 24px; }
}

@media (max-width: 600px) {
    .corner { padding: 10px 12px; }
    .tl { top: 16px; left: 16px; }
    .tr { top: 16px; right: 16px; }
    .bl { bottom: 16px; left: 16px; }
    .br { bottom: 16px; right: 16px; }
}

/* Sine Cross */
#sine-cross {
    position: fixed;
    width: 50px;
    height: 50px;
    left: 0;
    top: 0;
    pointer-events: auto;
    cursor: pointer;
}
#sine-cross .bar {
    position: absolute;
    background: #231F20;
    border-radius: 1px;
}
#sine-cross .bar.horizontal { width: 50px; height: 1px; top: 50%; left: 0; transform: translateY(-50%); }
#sine-cross .bar.vertical { width: 1px; height: 50px; left: 50%; top: 0; transform: translateX(-50%); }

/* Overlay und Modal */
#overlay {
    position: fixed;
    inset: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.0);
    z-index: 1000;
}
#overlay.active { display: flex; }
#modal {
    width: 800px;
    height: 600px;
    background: #FFF1DB;
    color: #000;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    border-radius: 3px;
    display: grid;
    place-items: center;
    padding: 24px;
}
#modal .modal-content { text-align: left; }

/* Modal Typografie (ersetzt Inline-Styles) */
.modal-title { font-size: clamp(18px, 2.4vw, 24px); }
.modal-text { font-size: clamp(16px, 2vw, 18px); }
.modal-credit { font-size: clamp(11px, 1.6vw, 12px); }

/* Responsive Modal-Größen und Controls */
@media (max-width: 1024px) {
    #modal {
        width: min(90vw, 700px);
        height: auto;
        max-height: 80vh;
        overflow: auto;
    }
}
@media (max-width: 600px) {
    #sine-cross { width: 56px; height: 56px; }
    #sine-cross .bar.horizontal { width: 56px; }
    #sine-cross .bar.vertical { height: 56px; }
    #modal { width: 92vw; height: auto; max-height: 80vh; padding: 16px; }
    #modal .modal-content p { line-height: 1.35; }
}