/* Basis-Styles gemäß DESIGN-BRIEFING.md (vereinfachtes Dark-Design,
   ohne Hintergrundbild und ohne App-Kopfzeile mit Menü/Dropdown). */

*, *::before, *::after {
    box-sizing: border-box;
}

:root {
    /* Fluide Schriftskala aus dem Briefing */
    --fs-sm:       clamp(0.75rem,   1vw,   1.125rem);
    --fs-base:     clamp(0.9375rem, 1.2vw, 1.375rem);
    --fs-md:       clamp(1rem,      1.4vw, 1.5rem);
    --fs-lg:       clamp(1rem,      1.5vw, 1.625rem);
    --fs-title:    clamp(1.125rem,  1.6vw, 1.75rem);
    --fs-xl:       clamp(1.125rem,  2vw,   1.875rem);
    --tap:         44px; /* Mindest-Trefferfläche */
}

html, body {
    margin: 0;
    padding: 0;
    /* background-color auf html/body: füllt auch die Safe-Areas (iOS) */
    background-color: rgb(27, 27, 27);
    color: lightgray;
    font-family: Arial, Helvetica, sans-serif;
    font-size: var(--fs-base);
}

/* Sichtbarkeit wird per JS über diese Klasse geschaltet */
.imp_hidden {
    display: none;
}

/* App-Gerüst: Vollhöhen-Flex-Spalte mit fester Höhe –
   gescrollt wird nur im inneren Content-Container (.imp_content) */
.imp_app {
    display: flex;
    flex-direction: column;
    height: 100vh;  /* Fallback */
    height: 100dvh;
}

.imp_app > * {
    flex-shrink: 0;
}

/* Kopfzeile */
.imp_head {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: rgb(53, 53, 53);
    padding: 1.5vh 4vw;
    padding-top: calc(1.5vh + env(safe-area-inset-top));
    padding-left: calc(4vw + env(safe-area-inset-left));
    padding-right: calc(4vw + env(safe-area-inset-right));
    flex-wrap: wrap;
    gap: 1vh 4vw;
}

.imp_logo {
    color: white;
    font-size: var(--fs-xl);
    font-weight: bold;
    -webkit-user-select: none; /* Safari benötigt das Präfix */
    user-select: none;
}

.logo_clamp {
    color: red;
}

/* Tab-Navigation */
.imp_tabs {
    display: flex;
    gap: 2vw;
}

.imp_tab {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap);
    padding: 0 1.5rem;
    font-size: var(--fs-md);
    color: lightgray;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-user-select: none; /* Safari benötigt das Präfix */
    user-select: none;
}

.imp_tab_active {
    /* Aktives Item: rote Pille */
    background-color: red;
    color: white;
    border-radius: 2vh;
    border-bottom: 2px solid transparent;
}

/* Content-Bereich, Scrollen nur hier */
.imp_content {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 4vh 4vw;
    padding-left: calc(4vw + env(safe-area-inset-left));
    padding-right: calc(4vw + env(safe-area-inset-right));
}

.imp_view {
    max-width: min(90vw, 50rem);
    margin: 0 auto;
}

/* Überschriften */
.imp_h1 {
    color: white;
    font-size: var(--fs-xl);
    border-bottom: 1px solid red;
    padding-bottom: 1vh;
    margin: 0 0 3vh 0;
}

.imp_h2 {
    color: white;
    font-size: var(--fs-title);
    margin: 4vh 0 1.5vh 0;
}

/* Fließtext */
.imp_p {
    margin: 0 0 1.5vh 0;
    line-height: 1.4;
    white-space: pre-line; /* Zeilenumbrüche aus dem JSON (Adressblöcke) erhalten */
    overflow-wrap: break-word;
}

.imp_ul {
    margin: 0 0 1.5vh 0;
    padding-left: 1.5rem;
    line-height: 1.4;
}

.imp_ul li {
    margin-bottom: 1vh;
}

.imp_content a {
    color: yellow;
    overflow-wrap: break-word;
}

/* Fußzeile */
.imp_foot {
    flex: 0 0 auto;
    background-color: rgb(53, 53, 53);
    color: gray;
    font-size: var(--fs-sm);
    text-align: center;
    padding: 1.5vh 4vw;
    padding-bottom: calc(1.5vh + env(safe-area-inset-bottom));
    line-height: 1.4;
}

/* Fehler-/NoScript-Hinweise */
.imp_error {
    color: white;
    background-color: red;
    border-radius: 1vw;
    padding: 2vh 4vw;
    max-width: min(90vw, 50rem);
    margin: 0 auto;
    line-height: 1.4;
}

.imp_noscript {
    color: white;
    background-color: red;
    padding: 2vh 4vw;
    text-align: center;
    line-height: 1.4;
}