/* =================================================================
   Uttwil Kiosk - Home screen design (1080 x 1920, fixed, non-responsive)
   Mockup layout. Data is currently hardcoded in the views and will be
   wired to Umbraco / the API in a later session.
   ================================================================= */

:root {
    --navy: #073456;
    --deep: #092d4c;
    --blue: #0874ce;
    --teal: #21b4a6;
    --light-teal: #e8f8f8;
    --line: #bdd7df;
    --muted: #5d7890;
}

/* Border-box for the whole home design so the fixed section heights below
   (hero/content/bottom-panel/footer) sum to exactly 1920 with their padding
   included. Scoped to these sections so the events/news sub-pages that render
   via RenderBody are left untouched. */
.hero, .hero *, .hero *::before, .hero *::after,
.content, .content *, .content *::before, .content *::after,
.bottom-panel, .bottom-panel *, .bottom-panel *::before, .bottom-panel *::after,
.site-footer, .site-footer *,
.kiosk-modal, .kiosk-modal * { box-sizing: border-box; }

/* The fixed kiosk canvas. Everything stacks inside this. */
.screen {
    width: 1080px;
    height: 1920px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    background: #fff;
    box-shadow: 0 0 40px rgba(0, 0, 0, .35);
    color: var(--deep);
}

/* =========================== HERO =============================== */
.hero {
    height: 655px;
    position: relative;
    overflow: hidden;
    color: #fff;
    /* Fallback gradient shown until / behind the slider images. */
    background: linear-gradient(180deg, #1297d8 0 8%, #3fb1e3 8% 25%, #1979a3 25% 31%, #5ba843 31% 100%);
}

/* Slider images (toggled by the existing slider JS via .opacity-100) */
.hero-slider { position: absolute; inset: 0; z-index: 0; }
.hero-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease;
}
.hero-slide.opacity-100 { opacity: 1; }

/* Dark gradient so the white text on top stays legible */
.hero-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(180deg, rgba(0, 0, 0, .34) 0, rgba(0, 0, 0, 0) 24%),
        linear-gradient(0deg, rgba(0, 0, 0, .30) 0, rgba(0, 0, 0, 0) 22%);
    pointer-events: none;
}

.topbar {
    position: relative;
    z-index: 2;
    height: 82px;
    padding: 0 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 21px;
    font-weight: 600;
    text-shadow: 0 1px 5px rgba(0, 0, 0, .25);
}
.top-left, .weather-top, .meta-item { display: flex; align-items: center; gap: 18px; }
.weather-top { gap: 15px; font-size: 24px; }
.weather-top strong, .meta-item strong { font-weight: 700; }
.separator { width: 1px; height: 32px; background: rgba(255, 255, 255, .45); display: inline-block; }
.circle-icon {
    display: inline-grid;
    place-items: center;
    width: 29px;
    height: 29px;
    border: 2px solid rgba(255, 255, 255, .95);
    border-radius: 50%;
    font-size: 14px;
}

/* Weather icon sizing (inline SVGs reused in topbar + glass card) */
.wx-ico { width: 34px; height: 34px; display: inline-block; vertical-align: middle; }
.weather-top .wx-ico { width: 30px; height: 30px; }

.hero-title {
    position: absolute;
    z-index: 3;
    left: 38px;
    top: 132px;
    text-shadow: 0 7px 18px rgba(0, 0, 0, .26);
}
.hero-title h1 { margin: 0; font-size: 106px; line-height: .96; letter-spacing: -5px; font-weight: 800; }
.hero-title h2 { margin: 6px 0 0; font-size: 77px; line-height: .94; letter-spacing: -3px; font-weight: 500; }

.weather-card {
    position: absolute;
    z-index: 3;
    left: 37px;
    bottom: 31px;
    height: 66px;
    min-width: 456px;
    padding: 0 25px;
    display: flex;
    align-items: center;
    gap: 17px;
    border-radius: 10px;
    font-size: 30px;
    color: #fff;
    background: rgba(0, 0, 0, .48);
    backdrop-filter: blur(4px);
}
.weather-card strong { font-weight: 700; }
.weather-card .separator { background: rgba(255, 255, 255, .28); }
.weather-card .wx-ico { width: 38px; height: 38px; }

/* ========================= CONTENT ============================= */
.content {
    height: 848px;
    background: linear-gradient(180deg, #fff 0%, #f6fbfc 80%, #fff 100%);
    padding: 38px 27px 0;
}
.content h3 {
    margin: 0 0 28px;
    text-align: center;
    font-size: 46px;
    line-height: 1.05;
    color: #0a3456;
    letter-spacing: -1.2px;
    font-weight: 800;
}
.cards-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 13px;
}
.info-card {
    height: 700px;
    background: linear-gradient(145deg, #e3f7f8 0%, #f3fbfb 57%, #e9f8f8 100%);
    border-radius: 16px;
    padding: 22px 20px 18px;
    box-shadow: 0 16px 28px rgba(26, 112, 126, .10);
    display: flex;
    flex-direction: column;
    position: relative;
    /* Grid items default to min-width:auto, so a long non-breaking header word
       (e.g. "Veranstaltungen") inflates its 1fr track and stops the four columns
       equalising — pushing the grid past the fixed 1080 canvas. Pin to 0 so the
       tracks always resolve to an equal 1fr and the row fits the screen. */
    min-width: 0;
}
.info-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.card-icon {
    width: 44px;
    height: 44px;
    display: inline-grid;
    place-items: center;
    border-radius: 50%;
    background: linear-gradient(145deg, #22b7aa, #149d96);
    color: #fff;
    font-size: 21px;
    box-shadow: 0 5px 8px rgba(16, 156, 150, .25);
}
.info-card h4 { font-size: 25px; margin: 0; line-height: 1; font-weight: 800; color: #0a2c4c; min-width: 0; overflow-wrap: break-word; }

.list-item, .text-row, .pdf-row { border-bottom: 1px solid var(--line); }
.list-item { min-height: 126px; padding: 8px 0 13px; }
time { display: block; font-size: 16px; font-weight: 800; margin-bottom: 8px; color: #0a3456; }
.list-item p, .text-row p { margin: 0; font-size: 20px; line-height: 1.22; font-weight: 700; color: #0a2c4c; }
.text-row { min-height: 138px; display: flex; align-items: center; }
.text-row p { font-weight: 600; }

.more-btn {
    margin-top: auto;
    align-self: center;
    background: transparent;
    color: #0b4f78;
    font-size: 16px;
    font-weight: 800;
    padding: 12px 10px 3px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.more-btn .arrow { font-size: 19px; }

/* Publikationen card specifics */
.publication-card { padding-left: 17px; padding-right: 17px; }
.pinned-row {
    height: 53px;
    width: 100%;
    border-radius: 8px;
    background: linear-gradient(90deg, #18ad9d, #21b6aa);
    color: #fff;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 14px;
    padding-left: 20px;
    font-size: 17px;
    font-weight: 800;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3);
    margin: 6px 0 19px;
}
.pinned-row .pin-ico { font-size: 20px; }
.pdf-row {
    width: 100%;
    min-height: 112px;
    display: flex;
    align-items: center;
    gap: 17px;
    text-align: left;
    background: transparent;
    color: #0a2c4c;
    padding: 0 4px;
}
.pdf-icon {
    width: 30px;
    height: 38px;
    display: inline-grid;
    place-items: center;
    color: #ff3b3b;
    font-size: 30px;
    flex: 0 0 auto;
}
.pdf-row p { margin: 0; font-size: 16px; line-height: 1.25; font-weight: 600; }

/* ======================= BOTTOM PANEL ========================== */
.bottom-panel {
    position: relative;
    height: 373px;
    border-top: 2px solid #a9d3e9;
    padding: 45px 27px 0;
    display: grid;
    grid-template-columns: 200px 300px 260px 1fr;
    gap: 22px;
    background: linear-gradient(180deg, #fff 0%, #f5fbfe 100%);
}

.contact-block { border-right: 1px solid #d0e2ea; padding: 0 19px 0 13px; color: #0871c9; }
.contact-logo { display: block; height: 96px; width: auto; margin: 0 auto 18px; }
.logo-fallback { text-align: center; color: #0871c9; margin-bottom: 18px; }
.logo-fallback .anchor { font-size: 46px; }
.logo-fallback .logo-text { font-size: 26px; line-height: 1; font-weight: 600; margin-top: 6px; }
address { font-style: normal; color: #0a4775; font-size: 17px; line-height: 1.45; font-weight: 600; margin-bottom: 22px; }
.contact-line { display: flex; align-items: center; gap: 11px; color: #0871c9; text-decoration: none; font-size: 17px; font-weight: 700; margin: 13px 0; }
.contact-line i { width: 20px; text-align: center; }

.opening-block { border-right: 1px solid #d0e2ea; padding: 0 16px 0 18px; }
.opening-block h4 { margin: 0 0 22px; color: #0871c9; font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 12px; }
.opening-block h4 .clock { font-size: 24px; }
dl { margin: 0; font-size: 15px; color: #0a3456; }
dl div { display: grid; grid-template-columns: 110px 1fr; margin-bottom: 16px; }
dt { font-weight: 600; }
dd { margin: 0; font-weight: 600; color: #34506a; }
.opening-block .note { margin: 22px 0 0; color: #62788b; font-size: 13.5px; line-height: 1.45; font-weight: 500; }

.quick-buttons { padding-top: 2px; display: flex; flex-direction: column; gap: 23px; }
.quick-btn {
    width: 100%;
    height: 105px;
    color: #fff;
    border-radius: 13px;
    position: relative;
    text-align: left;
    padding-left: 87px;
    box-shadow: 0 12px 22px rgba(0, 104, 144, .18);
}
.quick-btn.teal { background: linear-gradient(145deg, #29baa4, #19a691); }
.quick-btn.blue { background: linear-gradient(145deg, #159ce1, #006bc6); }
.quick-btn .lead-ico { position: absolute; left: 25px; top: 50%; transform: translateY(-50%); font-size: 42px; }
.quick-btn strong { display: block; font-size: 22px; line-height: 1; margin-bottom: 8px; }
.quick-btn small { display: block; font-size: 16px; }
.quick-btn .chev { position: absolute; right: 22px; top: 50%; transform: translateY(-50%); font-size: 34px; font-weight: 200; }

.map-card {
    height: 292px;
    border: 1px solid #b8d3e2;
    border-radius: 14px;
    overflow: hidden;
    position: relative;
    background: #d9edf4;
    box-shadow: 0 10px 18px rgba(0, 70, 110, .12);
    cursor: pointer;
}
/* Preview map fills the card but ignores pointer events, so a tap anywhere opens the modal. */
.map-card .map-preview { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
.map-card .gmaps-btn {
    position: absolute;
    left: 36px;
    bottom: 14px;
    right: 36px;
    height: 54px;
    border-radius: 8px;
    background: #fff;
    color: #0a4c85;
    font-size: 16px;
    font-weight: 700;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .12);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    pointer-events: none;
}
.map-card .gmaps-btn .gmaps { color: #10a45d; }

/* Interactive map modal (free keyless Google Maps embed) */
.map-modal-window {
    width: 1000px;
    height: 1500px;
    background: #fff;
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
}
.map-bar {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    background: linear-gradient(145deg, #073456, #092d4c);
    color: #fff;
}
.map-title { margin: 0 auto 0 0; font-size: 30px; font-weight: 800; display: flex; align-items: center; gap: 16px; }
.map-title i { color: var(--teal); font-size: 28px; }
.map-close {
    width: 60px;
    height: 60px;
    border: 0;
    border-radius: 10px;
    background: #0a74c9;
    color: #fff;
    font-size: 36px;
    line-height: 1;
    cursor: pointer;
}
.map-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }

.accessibility {
    position: absolute;
    right: 23px;
    top: -57px;
    width: 107px;
    height: 107px;
    border-radius: 50%;
    background: linear-gradient(160deg, #087ad8, #0059b7);
    color: #fff;
    border: 4px solid #fff;
    box-shadow: 0 5px 15px rgba(0, 0, 0, .35);
    text-align: center;
    z-index: 5;
}
.accessibility .wc { display: block; font-size: 40px; margin-top: 12px; line-height: .9; }
.accessibility em { font-style: normal; font-size: 14px; line-height: 1.05; font-weight: 700; }

/* =========================== FOOTER ============================ */
.site-footer {
    height: 44px;
    background: #073456;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    font-size: 17px;
    font-weight: 700;
}
.site-footer .heart { color: #29d6c2; font-size: 22px; }

/* ===================== GENERIC MOCK MODAL ====================== */
.kiosk-modal {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    background: rgba(2, 24, 42, .72);
    align-items: center;
    justify-content: center;
}
.kiosk-modal.active { display: flex; }
.kiosk-modal-window {
    width: 840px;
    min-height: 500px;
    background: #fff;
    border-radius: 24px;
    padding: 58px;
    box-shadow: 0 25px 80px rgba(0, 0, 0, .35);
    color: var(--deep);
    position: relative;
}
.kiosk-modal-window h2 { font-size: 48px; margin: 0 0 25px; }
.kiosk-modal-window p { font-size: 24px; line-height: 1.45; }
.kiosk-modal .close {
    position: absolute;
    right: -18px;
    top: -18px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #0a74c9;
    color: #fff;
    font-size: 34px;
    line-height: 1;
}

/* "Display senken" lowers the whole layout for easier reach */
.screen.lowered .content,
.screen.lowered .bottom-panel,
.screen.lowered .site-footer { transform: translateY(115px); transition: transform .35s ease; }

/* ================= NEWS / BAUGESUCHE (live data) ================ */
/* Preview rows are <button>s so the whole row is tappable. Keep the
   .list-item geometry but strip the native button chrome. */
.info-card .news-item,
.info-card .event-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    cursor: pointer;
    font: inherit;
    color: inherit;
}
.info-card .news-item p,
.info-card .event-item p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.info-card .news-empty { display: flex; align-items: center; }
.info-card .news-empty p { color: var(--muted); font-weight: 600; }

/* News modal: larger window, scrollable body */
.news-modal-window {
    width: 920px;
    height: 1480px;
    min-height: 0;
    padding: 46px 46px 36px;
    display: flex;
    flex-direction: column;
}
.news-modal-body { flex: 1; overflow-y: auto; overflow-x: hidden; }
.news-loading { font-size: 24px; color: var(--muted); padding: 48px 0; text-align: center; }

/* Article detail */
.news-article__title { font-size: 40px; line-height: 1.12; margin: 0 0 12px; color: var(--navy); font-weight: 800; }
.news-article__date { font-size: 20px; font-weight: 700; color: var(--blue); margin: 0 0 26px; }
.news-article__body { font-size: 25px; line-height: 1.5; color: #0a2c4c; }
.news-article__body p { margin: 0 0 20px; }
.news-article__body img { max-width: 100%; height: auto; border-radius: 8px; }

/* Full list ("Erfahren Sie mehr") */
.news-modal-head h2 { font-size: 44px; margin: 0 0 22px; color: var(--navy); font-weight: 800; }
.news-list-full { display: flex; flex-direction: column; }
.news-list-row,
.event-list-row {
    display: flex;
    gap: 22px;
    align-items: baseline;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px 4px;
    cursor: pointer;
    font: inherit;
    color: #0a2c4c;
}
.news-list-row:last-child,
.event-list-row:last-child { border-bottom: 0; }
.news-list-row time,
.event-list-row time { flex: 0 0 140px; font-size: 18px; font-weight: 800; color: var(--blue); margin: 0; }
.news-list-row span,
.event-list-row span { font-size: 24px; font-weight: 600; line-height: 1.3; }

/* PDF link inside an article + in-modal PDF viewer */
.news-pdf-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #0a74c9;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 14px 22px;
    font-size: 22px;
    font-weight: 700;
    cursor: pointer;
    margin: 8px 0;
}
.news-pdf-link i { font-size: 24px; }
.news-pdf-frame { width: 100%; height: 100%; border: 0; display: block; }

/* ============== VERANSTALTUNGEN detail (read-only) ============== */
/* The fragment is the source page's .main-section > .row (Bootstrap col-md-8 /
   col-md-4). We have no Bootstrap grid here, so the two columns stack top-to-bottom
   (description first, then the date/price/location detail block) — legible on the
   tall kiosk modal. All former links arrive as plain .event-detail__text spans. */
.event-detail { font-size: 23px; line-height: 1.5; color: #0a2c4c; }
.event-detail .row { display: block; }
.event-detail .banner-left,
.event-detail .banner-right { width: 100%; }
.event-detail img { max-width: 100%; height: auto; border-radius: 8px; margin-bottom: 16px; }

.event-detail .secondary-title { font-size: 38px; line-height: 1.12; margin: 0 0 14px; color: var(--navy); font-weight: 800; }
.event-detail .headings { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--blue); margin: 26px 0 6px; }
.event-detail .long-desc { margin: 0; }

.event-detail .right-details { margin-top: 22px; }
.event-detail .date-sec {
    display: inline-block;
    text-align: center;
    background: linear-gradient(145deg, #22b7aa, #149d96);
    color: #fff;
    border-radius: 12px;
    padding: 10px 22px;
    margin-bottom: 16px;
}
.event-detail .date-sec span { display: block; line-height: 1.1; }
.event-detail .date-sec span:first-of-type { font-size: 17px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.event-detail .date-sec span:last-of-type { font-size: 34px; font-weight: 800; }
.event-detail .date-sec br { display: none; }

.event-detail .right-details .h4 { font-size: 28px; font-weight: 800; color: var(--navy); margin: 6px 0; }
.event-detail .right-details h5 { font-size: 20px; font-weight: 600; color: var(--muted); margin: 4px 0 0; }
.event-detail .price-sec { font-size: 22px; font-weight: 700; margin: 12px 0 0; }

.event-detail .about-sec-right,
.event-detail .location-sec { margin-top: 6px; }
.event-detail__text { font-weight: 600; color: var(--blue); }

/* ============ SEEBLICK (live site, full-screen in-modal browser) ========= */
/* Reuses .kiosk-modal for the backdrop + .active toggle; the window is full-bleed
   (1080×1920) with a top toolbar and the sandboxed iframe filling the rest. */
.seeblick-modal-window {
    width: 1080px;
    height: 1920px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #fff;
}
.seeblick-bar {
    flex: 0 0 96px;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0 26px;
    background: linear-gradient(145deg, #073456, #092d4c);
    color: #fff;
}
.seeblick-title {
    margin: 0 auto 0 0;
    font-size: 30px;
    font-weight: 800;
    display: flex;
    align-items: center;
    gap: 16px;
}
.seeblick-title i { color: var(--teal); font-size: 28px; }
.seeblick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 60px;
    padding: 0 26px;
    border: 0;
    border-radius: 10px;
    color: #fff;
    background: rgba(255, 255, 255, .15);
    font: inherit;
    font-size: 22px;
    font-weight: 800;
    cursor: pointer;
}
.seeblick-btn i { font-size: 22px; }
.seeblick-btn.seeblick-close { width: 60px; padding: 0; font-size: 36px; line-height: 1; background: #0a74c9; }
.seeblick-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; background: #fff; }

/* ================= PUBLIKATIONEN (CMS-uploaded PDFs) ================= */
/* Card rows reuse the .pdf-row geometry; these add the interactive cues + the
   file-explorer / PDF viewer that live inside #publications-modal. */
.publication-card .pdf-row { cursor: pointer; }
.pdf-empty { cursor: default; }
.pdf-empty p { color: var(--muted); font-weight: 600; }

/* File-explorer list (reuses the news modal window). */
.pub-list-row {
    display: flex;
    gap: 20px;
    align-items: center;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: 26px 4px;
    cursor: pointer;
    font: inherit;
    color: #0a2c4c;
}
.pub-list-row:last-child { border-bottom: 0; }
.pub-row-ico { flex: 0 0 36px; text-align: center; color: #ff3b3b; font-size: 32px; }
.pub-list-row span:last-child { font-size: 26px; font-weight: 600; line-height: 1.3; }

/* Single PDF view inside the modal (fills the fixed-height modal body). */
.pub-pdf-view { display: flex; flex-direction: column; height: 100%; }
.pub-pdf-head { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; margin: 0 0 20px; }
.pub-pdf-title {
    flex: 1;
    margin: 0;
    font-size: 32px;
    font-weight: 800;
    color: var(--navy);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.pub-back {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    background: #0a74c9;
    color: #fff;
    border: 0;
    border-radius: 10px;
    padding: 14px 24px;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}
.pub-pdf-frame { flex: 1 1 auto; width: 100%; border: 0; display: block; }