/* ─────────────────────────────────────────────────────────────────────────────
   Info-Seiten des externen Gateways
   body.parken — Look des Parkplatz Portals (Tokens aus src/portal/assets/style.css)
   body.adp    — Look des ADP-Logins (packages/portal-common/assets/css/)
   Keine externen Ressourcen, kein JS.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: light dark;
    --uk-blau: #004B93;
    --uk-blau-dunkel: #003670;
    --uk-rot: #DC3545;
    --bernstein: #F0A020;

    --bg: #F4F6F9;
    --surface: #FFFFFF;
    --text: #1F2937;
    --text-2: #4B5563;
    --text-muted: #6B7280;
    --rand: #E2E6EC;
    --brand: #004B93;
    --link: #004B93;
    --link-hover: #003670;
    --schatten: 0 2px 8px rgba(0, 0, 0, 0.06);
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #0B0E13;
        --surface: #1B1F27;
        --text: #E8EAED;
        --text-2: #C9CDD3;
        --text-muted: #9CA3AF;
        --rand: #2A2F3A;
        --brand: #5BA3E0;
        --link: #7DBAEA;
        --link-hover: #A8D0F3;
        --schatten: 0 2px 12px rgba(0, 0, 0, 0.35);
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--text);
    font: 1rem/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: var(--link); text-underline-offset: 0.18em; }
a:hover { color: var(--link-hover); }
a:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 3px; }

/* ── Kopf wie der Portal-Login ─────────────────────────────────────────────── */
.kopf {
    background: var(--surface);
    border-bottom: 1px solid var(--rand);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.kopf-inhalt {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0.75rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
}
.logo-flaeche { display: inline-flex; border-radius: 6px; }
.logo { display: block; height: 44px; width: auto; }
.trenner { width: 1px; height: 28px; background: var(--rand); flex: none; }
.portalname {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--brand);
    white-space: nowrap;
}
.p-symbol { width: 24px; height: 24px; flex: none; }
.p-symbol rect { fill: var(--brand); }
.p-symbol path { fill: #FFFFFF; }

@media (prefers-color-scheme: dark) {
    /* Das Original-Logo hat dunkle Schrift — im Dunkelmodus auf heller Fläche */
    .logo-flaeche { background: #FFFFFF; padding: 0.2rem 0.45rem; }
    .logo { height: 40px; }
    .p-symbol path { fill: #0B0E13; }
}

/* ── Hinweis-Karte: blaue Szene links, Text rechts ─────────────────────────── */
main {
    flex: 1;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 1.25rem 2rem;
    display: flex;
    align-items: center;
}
.hinweis {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    background: var(--surface);
    border: 1px solid var(--rand);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--schatten);
}
.szene {
    background: var(--uk-blau);
    display: flex;
    align-items: flex-end;
    padding-top: 1.5rem;
    min-height: 320px;
}
.text { padding: 2.5rem 2.5rem 2.25rem; }

h1 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.45rem, 1.05rem + 1.5vw, 1.95rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.012em;
    color: var(--brand);
    text-wrap: balance;
}
.einleitung { margin: 0 0 1.6rem; color: var(--text-2); max-width: 60ch; }
h2 { margin: 0 0 0.5rem; font-size: 1rem; line-height: 1.4; font-weight: 700; color: var(--text); }
.wege { margin: 0 0 1.75rem; padding: 0; list-style: none; display: grid; gap: 0.55rem; }
.wege li { position: relative; padding-left: 1.4rem; color: var(--text-2); max-width: 60ch; }
.wege li::before {
    content: "";
    position: absolute;
    left: 0.15rem;
    top: 0.6em;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 2px;
    background: var(--brand);
}
.kontakt {
    margin: 0;
    padding-top: 1.1rem;
    border-top: 1px solid var(--rand);
    color: var(--text-muted);
    font-size: 0.95rem;
}
.kontakt a { font-weight: 600; white-space: nowrap; }

.fuss {
    padding: 1.25rem 1rem 1.75rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-muted);
}

/* ── Szene: Schranke vor einem Parkhaus (Inline-SVG) ───────────────────────── */
.schranke { display: block; width: 100%; height: auto; overflow: visible; }
.schranke .haus { fill: rgba(255, 255, 255, 0.07); }
.schranke .haus-dach { fill: rgba(255, 255, 255, 0.13); }
.schranke .ebene { fill: rgba(0, 20, 60, 0.28); }
.schranke .schildmast { fill: rgba(255, 255, 255, 0.3); }
.schranke .haus-schild { fill: rgba(255, 255, 255, 0.88); }
.schranke .haus-p { fill: var(--uk-blau); }
.schranke .boden { fill: rgba(255, 255, 255, 0.08); }
.schranke .markierung { stroke: rgba(255, 255, 255, 0.35); stroke-width: 4; stroke-linecap: round; fill: none; }
.schranke .gehaeuse,
.schranke .stuetze { fill: var(--uk-blau-dunkel); stroke: rgba(255, 255, 255, 0.22); stroke-width: 1.5; }
.schranke .stuetze-gabel { fill: #C9DBEC; }
.schranke .gehaeuse-kappe { fill: #E8F0FA; }
.schranke .leser { fill: #E8F0FA; }
.schranke .leser-schlitz { fill: var(--uk-blau-dunkel); }
.schranke .leser-led { fill: var(--uk-blau); }
.schranke .arm-grund { fill: #FFFFFF; }
.schranke .arm-streifen { fill: var(--uk-rot); }
.schranke .drehpunkt { fill: #E8F0FA; stroke: var(--uk-blau-dunkel); stroke-width: 3; }
.schranke .leuchte-fuss { fill: #C9DBEC; }
.schranke .leuchte { fill: var(--uk-rot); }
.schranke .leuchte-schein { fill: rgba(255, 99, 99, 0.32); }
.schranke.stoerung .leuchte { fill: var(--bernstein); }
.schranke.stoerung .leuchte-schein { fill: rgba(255, 184, 64, 0.38); }

/* Der eine Moment: der Arm senkt sich beim Laden einmal in Position */
.schranke .arm { transform-box: view-box; transform-origin: 104px 238px; }
.schranke.anim .arm { animation: arm-senken 1.1s cubic-bezier(0.34, 0.9, 0.3, 1.12) 0.35s both; }
.schranke.anim .leuchte,
.schranke.anim .leuchte-schein { animation: leuchte-an 0.35s ease-out 1.3s both; }
@keyframes arm-senken {
    from { transform: rotate(-62deg); }
    to   { transform: rotate(0deg); }
}
@keyframes leuchte-an {
    from { opacity: 0.2; }
    to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .schranke.anim .arm,
    .schranke.anim .leuchte,
    .schranke.anim .leuchte-schein { animation: none; }
}

/* ── Schmale Bildschirme ───────────────────────────────────────────────────── */
@media (max-width: 760px) {
    main { padding: 1.25rem 1rem 1.5rem; align-items: flex-start; }
    .hinweis { grid-template-columns: 1fr; }
    .szene { min-height: 0; padding-top: 1rem; }
    .text { padding: 1.6rem 1.35rem 1.5rem; }
}
@media (max-width: 420px) {
    .kopf-inhalt { gap: 0.55rem; padding: 0.65rem 0.75rem; }
    .logo { height: 34px; }
    .trenner { height: 22px; }
    .portalname { font-size: 1rem; gap: 0.4rem; }
    .p-symbol { width: 20px; height: 20px; }
}
@media (max-width: 420px) and (prefers-color-scheme: dark) {
    .logo { height: 30px; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   ADP-Variante — Look des ADP-Logins (theme-uk-essen.css / components.css):
   blauer Verlauf mit Punktraster, weiße Karte, Orange als Akzent.
   Bleibt auch im Dunkelmodus so, wie der ADP-Login selbst.
   ───────────────────────────────────────────────────────────────────────────── */
body.adp {
    --adp-primary: #00338D;
    --adp-primary-dark: #002266;
    --adp-accent: #EC6500;
    --adp-link: #B34D00;
    --adp-soft: #F1F3F6;
    --adp-border: #DEE2E6;
    --adp-heading: #1F2937;
    --adp-text: #4B5563;
    --adp-muted: #6C757D;
    color: var(--adp-text);
    font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: var(--adp-primary-dark);
    background-image:
        radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        radial-gradient(circle at 25% 25%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 75% 75%, rgba(236, 101, 0, 0.05) 0%, transparent 50%),
        linear-gradient(135deg, var(--adp-primary) 0%, var(--adp-primary-dark) 100%);
    background-size: 32px 32px, auto, auto, auto;
    background-attachment: fixed;
}
body.adp a { color: var(--adp-link); font-weight: 600; white-space: nowrap; }
body.adp a:hover { color: var(--adp-primary); }
body.adp a:focus-visible { outline-color: var(--adp-accent); }

.adp-buehne { justify-content: center; align-items: center; padding: 28px 20px; }
.adp-karte {
    width: 100%;
    max-width: 560px;
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    overflow: hidden;
}
.adp-karte::before {
    content: "";
    display: block;
    height: 4px;
    background: linear-gradient(90deg, var(--adp-primary) 0%, var(--adp-accent) 100%);
}
.adp-kopf {
    background: var(--adp-soft);
    border-bottom: 1px solid var(--adp-border);
    text-align: center;
    padding: 30px 28px 24px;
}
.adp-logo { display: inline-block; height: 52px; width: auto; }
.adp-wortmarke {
    margin: 16px 0 4px;
    font-size: 2.4rem;
    line-height: 1;
    font-weight: 400;
    letter-spacing: 0.2em;
    padding-left: 0.2em; /* gleicht den Buchstabenabstand am Ende aus */
    color: var(--adp-primary);
}
.adp-wortmarke span { color: var(--adp-accent); font-weight: 700; }
.adp-untertitel { margin: 0; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--adp-muted); }
.adp-text { padding: 28px 32px 30px; }
body.adp h1 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.35rem, 1.1rem + 1vw, 1.6rem);
    line-height: 1.25;
    color: var(--adp-heading);
}
.adp-text p { margin: 0 0 0.9rem; max-width: 60ch; }
.adp-fragen {
    margin-top: 1.4rem;
    padding: 14px 18px;
    border-left: 4px solid var(--adp-accent);
    border-radius: 0 8px 8px 0;
    background: linear-gradient(90deg, rgba(236, 101, 0, 0.08) 0%, rgba(236, 101, 0, 0) 100%);
}
.adp-fragen p { margin: 0; }
.adp-fragen .adp-fragen-titel { margin-bottom: 0.2rem; font-weight: 600; color: var(--adp-heading); }

@media (max-width: 480px) {
    .adp-buehne { padding: 16px 12px; }
    .adp-kopf { padding: 24px 18px 18px; }
    .adp-logo { height: 44px; }
    .adp-wortmarke { font-size: 2rem; }
    .adp-text { padding: 22px 20px 24px; }
}