/* ============================================================ KAS DESIGN VARIABLES ============================================================ */ :root{ --kas-navy:#172b3d; --kas-navy-deep:#102536; --kas-light:#f3f5f6; --kas-light-2:#eef2f4; --kas-white:#ffffff; --kas-text:#172b3d; --kas-muted:#7f8d98; --kas-gold:#dfb565; --kas-gold-dark:#a47e3e; --kas-border:#d7dfe4; --kas-radius-xl:28px; --kas-radius-lg:20px; --kas-radius-md:14px; --kas-shadow: 0 10px 28px rgba(14,36,52,.08); } /* ============================================================ IMPORTANT NO: body * { ... } This prevents Bottom Navigation icons from being converted into bars / squares. ============================================================ */ /* ============================================================ 3. BOOKING APPROVED VERSION – KEEP THIS STYLE ============================================================ */ body.kas-v6-booking #kas-booking-app{ max-width:820px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; font-variant-numeric:tabular-nums; /* white "sheet" so Booking matches the other pages, which get theirs from the theme page wrapper (Booking uses the Elementor Canvas template and has none). Set here at the root because a plain #kas-booking-app rule loses to this more specific one. */ background:#ffffff !important; border-radius:28px !important; padding:26px 16px 30px !important; box-shadow:var(--kas-card-shadow) !important; /* ROUND 55: war 150px. Booking ist die Vorlage fuer alle anderen Seiten - dieser Wert und der der Sheet-Regel weiter unten muessen immer identisch sein. */ margin-top: 140px !important; } /* BOOKING HEADER */ body.kas-v6-booking .kas-booking-head{ background:var(--kas-navy) !important; padding:24px !important; border-radius:var(--kas-radius-xl) !important; margin-bottom:8px !important; box-shadow:var(--kas-navy-shadow) !important; position:relative !important; z-index:2 !important; overflow:hidden !important; } body.kas-v6-booking .kas-booking-head h2{ color:#fff !important; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.02em !important; line-height:1.1 !important; margin:7px 0 7px !important; } body.kas-v6-booking .kas-booking-head p{ color:#b5c0c8 !important; font-size:14px !important; font-weight:400 !important; line-height:1.45 !important; margin:0 !important; } body.kas-v6-booking .kas-mini{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase; } /* BOOKING LIGHT PANEL */ body.kas-v6-booking .kas-booking-card{ background:#ffffff !important; color:var(--kas-text) !important; padding:60px 22px 22px !important; border-radius:var(--kas-radius-xl) !important; box-shadow:var(--kas-card-shadow) !important; } /* LABELS */ body.kas-v6-booking .kas-booking-card label{ color:var(--kas-gold-dark) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:1.5px !important; margin:24px 0 8px !important; text-transform:uppercase; } body.kas-v6-booking .kas-booking-card label:first-of-type{ margin-top:10px !important; } /* GRIDS */ body.kas-v6-booking .kas-resource-grid, body.kas-v6-booking .kas-duration-grid{ gap:10px !important; } /* NORMAL BOOKING CHOICES */ body.kas-v6-booking .kas-resource, body.kas-v6-booking .kas-duration{ background:#fff !important; color:var(--kas-text) !important; border:1px solid var(--kas-border) !important; border-radius:14px !important; min-height:52px !important; padding:12px !important; font-size:15px !important; font-weight:520 !important; letter-spacing:0 !important; box-shadow:none !important; } /* SELECTED */ body.kas-v6-booking .kas-resource.active, body.kas-v6-booking .kas-duration.active{ background:var(--kas-gold) !important; color:var(--kas-text) !important; border-color:var(--kas-gold) !important; font-weight:600 !important; } body.kas-v6-booking .kas-resource.active *, body.kas-v6-booking .kas-duration.active *{ color:var(--kas-text) !important; } /* INPUTS */ body.kas-v6-booking .kas-booking-card input, body.kas-v6-booking .kas-booking-card select{ width:100% !important; min-height:52px !important; background:#fff !important; color:var(--kas-text) !important; border:1px solid var(--kas-border) !important; border-radius:13px !important; padding:0 14px !important; font-size:15px !important; font-weight:400 !important; box-shadow:none !important; } /* REQUEST BUTTON */ body.kas-v6-booking #kas-book-now{ width:100% !important; min-height:54px !important; background:var(--kas-navy) !important; color:#fff !important; border:none !important; border-radius:14px !important; font-size:15px !important; font-weight:580 !important; letter-spacing:0 !important; } body.kas-v6-booking .kas-info{ color:var(--kas-muted) !important; font-size:13px !important; } /* ============================================================ 4. TRAINING CURRENT APPROVED VERSION ============================================================ */ body.kas-v6-training .kas-training-shell{ width:calc(100% - 36px); max-width:820px; margin:0 auto 35px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* TRAINING HEADER */ body.kas-v6-training .kas-training-header{ background:var(--kas-navy); border-radius:var(--kas-radius-xl); padding:24px; margin-bottom:20px; box-shadow:var(--kas-navy-shadow) !important; position:relative; overflow:hidden; } body.kas-v6-training .kas-training-eyebrow{ color:var(--kas-gold); font-size:11px; font-weight:650; letter-spacing:2px; text-transform:uppercase; margin-bottom:9px; } body.kas-v6-training .kas-training-main-title{ color:#fff; font-size:28px; line-height:1.1; font-weight:580; letter-spacing:-.025em; margin:0 0 9px; } body.kas-v6-training .kas-training-subtitle{ color:#b5c0c8; font-size:14px; line-height:1.45; font-weight:400; margin:0; } /* TRAINING LIGHT PANEL */ body.kas-v6-training .kas-training-panel{ background:var(--kas-light); border-radius:var(--kas-radius-xl); padding:18px; box-shadow:var(--kas-card-shadow) !important; } body.kas-v6-training .kas-training-section-label{ color:var(--kas-gold-dark); font-size:11px; font-weight:650; letter-spacing:1.5px; text-transform:uppercase; margin:2px 0 13px; } /* TRAINING CARDS */ body.kas-v6-training .kas-training-card-new{ display:block; width:100%; background:#fff; color:var(--kas-text); border:1px solid var(--kas-border); border-radius:14px; padding:18px 17px; margin:0 0 12px; text-decoration:none !important; box-shadow:var(--kas-card-shadow) !important; } body.kas-v6-training .kas-training-card-line{ display:flex; align-items:center; gap:11px; } body.kas-v6-training .kas-training-card-icon{ font-size:24px; line-height:1; } body.kas-v6-training .kas-training-card-title{ color:var(--kas-text); font-size:16px; line-height:1.25; font-weight:600; } body.kas-v6-training .kas-training-card-description{ color:var(--kas-muted); font-size:14px; line-height:1.4; font-weight:400; margin-top:9px; } body.kas-v6-training .kas-training-arrow{ color:var(--kas-gold-dark); padding-left:4px; } body.kas-v6-training .kas-training-old-hidden{ display:none !important; } /* ============================================================ 5. QUESTION BANK / EXAM SAME TRAINING STYLE ============================================================ */ body.kas-v6-training #kas-qb .kas-header, body.kas-v6-training #kas-exam-app .kas-exam-header{ background:var(--kas-navy) !important; color:#fff !important; border-radius:var(--kas-radius-xl) !important; padding:24px !important; box-shadow:var(--kas-navy-shadow) !important; position:relative !important; overflow:hidden !important; } body.kas-v6-training #kas-qb .kas-subject-grid{ gap:12px !important; } body.kas-v6-training #kas-qb .kas-subject{ background:#fff !important; color:var(--kas-text) !important; border:1px solid var(--kas-border) !important; border-radius:14px !important; padding:18px !important; box-shadow:var(--kas-card-shadow) !important; } body.kas-v6-training #kas-qb .kas-subject strong{ color:var(--kas-text) !important; font-size:16px !important; font-weight:600 !important; } body.kas-v6-training #kas-qb .kas-subject span{ color:var(--kas-gold-dark) !important; font-size:13px !important; font-weight:400 !important; } body.kas-v6-training .kas-question-card, body.kas-v6-training .kas-exam-question{ background:var(--kas-light) !important; color:var(--kas-text) !important; border:none !important; border-radius:20px !important; } body.kas-v6-training .kas-answer, body.kas-v6-training .kas-exam-option{ background:#fff !important; color:var(--kas-text) !important; border:1px solid var(--kas-border) !important; border-radius:13px !important; font-size:14px !important; font-weight:400 !important; } body.kas-v6-training .kas-exam-option.selected{ background:var(--kas-gold) !important; color:var(--kas-text) !important; border-color:var(--kas-gold) !important; } /* ============================================================ 6. LOGBOOK INTENTIONALLY EMPTY. IMPORTANT: NO LOGBOOK SELECTORS ARE INCLUDED IN THIS DESIGN SYSTEM. The standalone Logbook snippet controls: - Header - Student card - Statistics - Progress - Flight History - Print / PDF - Mobile positioning ============================================================ */ /* ============================================================ 7. WEATHER DO NOT CHANGE ============================================================ */ /* Intentionally empty. Weather remains visual reference. */ /* ============================================================ 8. KAS NAV DO NOT CHANGE FUNCTIONAL LAYOUT ============================================================ */ /* Only preserve normal text rendering. No backgrounds or functional layout changed. */ body.kas-v6-nav main, body.kas-v6-nav .site-main{ font-variant-numeric:tabular-nums; } /* KAS NAV – TITLE LIKE AVIATION WEATHER MAP */ body.kas-v6-nav h1{ font-family: Georgia, "Times New Roman", serif !important; font-size:56px !important; line-height:1.05 !important; font-weight:700 !important; letter-spacing:-1px !important; color:#142433 !important; text-align:center !important; margin-top:-35px !important; margin-bottom:28px !important; } /* ============================================================ 9. HOME NO DESTRUCTIVE CHANGES ============================================================ */ body.kas-v6-home main, body.kas-v6-home .site-main{ font-variant-numeric:tabular-nums; } /* ============================================================ 10. MOBILE LOGBOOK INTENTIONALLY EXCLUDED ============================================================ */ @media(max-width:600px){ /* BOOKING */ body.kas-v6-booking .kas-booking-head, body.kas-v6-booking .kas-booking-card{ padding:19px !important; } body.kas-v6-booking .kas-resource, body.kas-v6-booking .kas-duration{ min-height:49px !important; font-size:14px !important; } /* TRAINING */ body.kas-v6-training .kas-training-shell{ width:calc(100% - 34px); margin-top:-110px !important; } body.kas-v6-training .kas-training-header{ padding:21px; } body.kas-v6-training .kas-training-panel{ padding:18px; } body.kas-v6-training .kas-training-main-title{ font-size:27px; } } /* ============================================================ BOTTOM NAVIGATION KEEP EXISTING POSITION ADJUSTMENT ============================================================ */ .kas-bottom-nav a:last-child{ transform:translateX(-20px); } /* ============================================================ UNIFIED PAGE-HEADER (the dark "title card" seen on the Weather page: gold eyebrow label + white heading, on a navy rounded card) WHY THIS BLOCK EXISTS: Weather, Nav, Booking, Logbook and Exam already used this same visual idea independently - but each one had copy-pasted its own slightly different hex codes and sizes instead of sharing one definition (e.g. gold was #dfb565 in one place, #E1B65F in another, #E8B75F in a third; navy was #172B3D in one place and #1E3044 in another). This block forces all of them to the exact same values, using !important + matching selector specificity so it wins regardless of which other snippet is active. Only THIS file needs to change to update the header design everywhere. Every property below maps 1:1 to the reference design (the Weather page header): navy card, 28px radius, soft shadow, gold 11px/650/uppercase/2px-tracking eyebrow, white 28px/580 heading. ============================================================ */ /* --- WEATHER (reference design) --- */ .kas-weather-map-title{ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; } .kas-weather-kicker{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } .kas-weather-map-title h2{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } /* --- NAV --- */ .kas-nav-title-card{ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; } .kas-nav-title-card .kas-nav-kicker{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } .kas-nav-title-card .kas-title{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } .kas-nav-title-card .kas-sub{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; } /* --- BOOKING --- */ .kas-booking-head:not(#_){ /* same specificity-boost as .kas-booking-card: the original "body.kas-v6-booking .kas-booking-head{box-shadow:var(--kas-shadow)}" rule was silently winning here too. */ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; } .kas-booking-head .kas-mini{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } .kas-booking-head h2{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } .kas-booking-head p{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; opacity:1 !important; } /* --- LOGBOOK --- */ .kas-v51-hero{ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; } .kas-v51-eyebrow{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } .kas-v51-title{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } .kas-v51-description{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; } /* --- PAYMENT --- */ .kas-pay-hero .eyebrow{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } .kas-pay-hero h2{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } .kas-pay-hero p{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; opacity:1 !important; } /* --- EXAM --- (matches #kas-exam's own ID+class specificity so this wins) */ #kas-exam .kas-exam-hero{ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; } #kas-exam .kas-exam-eyebrow{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } #kas-exam .kas-exam-hero h2{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } #kas-exam .kas-exam-hero p{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; opacity:1 !important; } /* --- EXAM + QUESTION BANK: Hero in den Rahmen ziehen --- */ html body:not(.home) #kas-exam .kas-exam-hero:not(#_):not(#__), html body:not(.home) #kas-qb .kas-hero:not(#_):not(#__){ position:relative !important; z-index:2 !important; margin-top:45px !important; margin-bottom:24px !important; } /* --- QUESTION BANK --- CORRECTION: the real header markup turned out to be #kas-qb .kas-hero / .kas-eyebrow (exactly parallel to Exam's .kas-exam-hero / .kas-exam-eyebrow above) - a real wrapper div, not a bare

like first assumed. The synthetic "h2 IS the card" trick below never actually matched anything in the real page (the h2 sits inside .kas-hero, so it's not a direct child of #kas-qb), which is why this header had no glow/shadow at all despite everything else being covered. Left the harmless old rule in place and added the correct one. */ #kas-qb .kas-hero{ background:var(--kas-navy) !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; position:relative !important; overflow:hidden !important; } #kas-qb .kas-eyebrow{ color:var(--kas-gold) !important; font-size:11px !important; font-weight:650 !important; letter-spacing:2px !important; text-transform:uppercase !important; } #kas-qb .kas-hero h2{ color:#ffffff !important; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI", Arial,Sans-serif !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } #kas-qb .kas-hero p{ color:#b5c0c8 !important; font-size:14px !important; line-height:1.45 !important; opacity:1 !important; } #kas-qb .kas-hero > *{ position:relative; z-index:1; } /* (old, non-matching attempt kept harmless rather than risk removing something that might match in some other context) */ #kas-qb > h2:first-child{ background:var(--kas-navy) !important; color:#ffffff !important; border-radius:28px !important; box-shadow:var(--kas-navy-shadow) !important; padding:24px !important; margin:0 0 24px 0 !important; font-size:28px !important; font-weight:580 !important; letter-spacing:-.025em !important; line-height:1.1 !important; } #kas-qb > h2:first-child::before{ content:"KAS AVIATION ACADEMY"; display:block; color:var(--kas-gold); font-size:11px; font-weight:650; letter-spacing:2px; text-transform:uppercase; margin:0 0 9px; } /* ============================================================ ROUND 2 FIXES (2026-09-02b) - based on direct screenshot feedback ============================================================ */ /* --- 1. SHADOW ON EVERY CARD/TILE --- Several cards had no shadow at all (flat against busy photo backgrounds especially on the Home page), which is why they didn't read the same as the reference Weather card. */ .kas-home-card, .kas-home-news{ box-shadow:0 16px 40px rgba(0,0,0,.28) !important; } #kas-qb .kas-subject{ box-shadow:0 4px 14px rgba(23,43,61,.07) !important; } /* --- 2. HOME CARDS: remove the flat pale circle, replace with a subtle, "smudged"/blurred blue glow (same TECHNIQUE as a soft blurred accent on a dark card, NOT the Billing blue - a different, dedicated blue tone). Applies uniformly to every .kas-home-card (Next Flight + Logbook progress card today, and any future card using the same class), so the Home page reads as one consistent set instead of mismatched cards. Kept subtle on purpose - low opacity, heavily blurred, no hard edge. --- */ .kas-home-card{ background:var(--kas-navy) !important; } .kas-home-card:after{ /* Kept the exact same size/position as before (proven safe - no corner leak), just made the fade itself much more gradual (stronger blur + gradient reaching all the way out to 85% instead of stopping at 65%) so there's no perceptible round "edge" to the glow anymore, just a gentle brightness gradient. */ width:280px !important; height:280px !important; right:-90px !important; top:40px !important; border-radius:50% !important; background: radial-gradient( circle, rgba(64,133,181,.44) 0%, rgba(64,133,181,.22) 30%, rgba(64,133,181,.08) 58%, rgba(64,133,181,0) 85% ) !important; filter:blur(30px) !important; } /* --- 3. WEATHER REFRESH BUTTON -> gold outline, matching the reference screenshot (was a solid navy button before). --- */ .kas-weather-refresh{ background:transparent !important; border:1.5px solid var(--kas-gold) !important; color:var(--kas-gold) !important; box-shadow:none !important; text-transform:uppercase !important; letter-spacing:1px !important; } .kas-weather-refresh:hover{ background:rgba(223,181,101,.08) !important; } /* --- 4. QUESTION BANK TILES: were noticeably larger than every other tile in the app; brought down to the same scale (padding/radius) used elsewhere. --- */ #kas-qb .kas-subject{ padding:16px !important; border-radius:14px !important; border-left:4px solid var(--kas-gold) !important; } /* --- 5. HOME "LATEST UPDATES": gold accent, unified with the rest of the app (was a dimmer, one-off gold #d5aa66 used only here) and given a bit more presence. --- */ .kas-home-welcome > span, .kas-home-label, .kas-home-section-title > span, .kas-home-news-head span, .kas-home-news-head > a, .kas-home-news > a small{ color:var(--kas-gold) !important; } .kas-home-news-head{ border-bottom:1px solid rgba(223,181,101,.25) !important; padding-bottom:14px !important; } /* ============================================================ ROUND 3 FIXES (2026-09-02c) - shadow was still missing (or too faint / inconsistent) on the main content cards in Booking, Logbook, Nav, Exam and Payment, and Question Bank's tile text was still reading too large. Everything below uses the SAME shadow value as the reference Weather card, applied with !important so it wins over each area's own (often much fainter, or entirely absent) shadow. ============================================================ */ :root{ --kas-navy-shadow:0 3px 8px rgba(15,35,50,.20), 0 30px 58px rgba(15,35,50,.48); --kas-card-shadow:0 8px 20px rgba(15,35,50,.14); } /* --- BOOKING --- */ .kas-booking-card:not(#_){ /* :not(#_) is a harmless specificity boost - no element has id="_", it just makes this selector as specific as an ID so it reliably beats the older, more specific "body.kas-v6-booking .kas-booking-card{box-shadow:var(--kas-shadow)}" rule from the original design system that was silently winning here before. */ box-shadow:var(--kas-card-shadow) !important; } /* --- LOGBOOK --- */ .kas-v51-content-section{ box-shadow:var(--kas-card-shadow) !important; } /* --- KAS NAV --- */ .kas-data-box, .kas-panel{ box-shadow:var(--kas-card-shadow) !important; } /* --- WEATHER (bring its own, fainter shadow up to the same strength as everywhere else) --- */ .kas-weather-status-inner{ box-shadow:var(--kas-card-shadow) !important; padding:12px 15px !important; } /* --- EXAM --- */ #kas-exam .kas-exam-card{ box-shadow:var(--kas-card-shadow) !important; } /* --- QUESTION BANK --- */ #kas-qb .kas-subject:not(#_){ /* same specificity-boost fix as Booking above: the original design system has "body.kas-v6-training #kas-qb .kas-subject {box-shadow:none !important}" which was silently winning here. */ box-shadow:var(--kas-card-shadow) !important; } /* --- PAYMENT (already had a shadow, but much fainter than everywhere else - unified to the same strength, colors untouched). NOTE: .kas-pay-hero is a navy card like the other headers, so it gets the stronger navy shadow, not the white-card one - it was wrongly grouped with the white cards before. */ .kas-pay-hero{ box-shadow:var(--kas-navy-shadow) !important; } .kas-pay-card, .kas-pay-admin-box{ box-shadow:var(--kas-card-shadow) !important; } /* --- QUESTION BANK TILE TEXT: still reading too large - brought down and made consistent (title vs. subtitle) --- */ #kas-qb .kas-subject:not(#_){ padding:14px !important; } #kas-qb .kas-subject:not(#_) strong{ font-size:14px !important; font-weight:650 !important; } #kas-qb .kas-subject:not(#_) span{ font-size:12px !important; } /* ============================================================ ROUND 5 FIX (2026-09-02e) - shadow was STILL barely visible in practice even at 0.32 alpha, so this now uses a layered "contact + ambient" shadow (a tight, slightly darker shadow right at the edge, plus a large soft one further out) applied to --kas-card-shadow and to every header title card - this is what actually reads as a clearly "lifted" card, matching what was circled on the reference screenshot. Also added here: Question Bank's study-mode card (#kas-qb .kas-card), which is the exact same kind of element as Exam's card but was missed before. NOTE: if this still isn't visible after importing, it's almost certainly a caching issue (browser cache, a WP cache plugin, or a CDN) rather than the CSS itself - do a hard refresh (Ctrl/Cmd+Shift+R) or clear the site cache and check again. ============================================================ */ #kas-qb .kas-card{ box-shadow:var(--kas-card-shadow) !important; } /* ============================================================ ROUND 7 (2026-09-02g) - three fixes from direct client feedback: 1. THE REAL BOOKING/TRAINING SHADOW BUG: there turned out to be a whole SEPARATE "Training landing page" skin in the original design system (body.kas-v6-training .kas-training-header / .kas-training-panel / .kas-training-card-new, and body.kas-v6-training #kas-qb .kas-header / #kas-exam-app .kas-exam-header / #kas-qb .kas-subject) that this file hadn't touched at all - THAT is the actual Training UI, not the plain #kas-qb/#kas-exam selectors targeted before. Its box-shadow was explicitly "none" (or the old faint value) with higher specificity than our old overrides. Fixed at the root this time (edited those original declarations directly) instead of adding another competing override, so there's no more specificity fight. 2. TWO SHADOW STRENGTHS: --kas-navy-shadow (strong) for the dark navy header cards, --kas-card-shadow (weakened back down) for white/light content cards - these had been merged into one overly strong value, which is why Weather's "Last Update" card and Nav's small data boxes started looking oversized/cluttered (a huge shadow blur on several small tiles sitting close together reads as visual noise, not depth). 3. BLUE GLOW: the soft blurred blue glow used on the Home cards is now applied to every navy header card app-wide (Weather, Nav, Booking, Logbook, Exam, Question Bank, Training landing page, Payment), so they all match. 4. NOTAM heading had no card/background at all and looked bare - given a soft "shelf-edge" shadow under it instead of a full navy card (smaller footprint, matches what was asked). ============================================================ */ /* --- shared blue glow blob, applied to every navy header --- */ .kas-weather-map-title, .kas-nav-title-card, .kas-v51-hero, #kas-exam .kas-exam-hero, #kas-qb > h2:first-child, #kas-qb .kas-hero, .kas-pay-hero{ position:relative !important; overflow:hidden !important; /* NOTE: clip-path was tried here and removed again - it clips an element's entire paint (including its own box-shadow), which made every card's shadow disappear. overflow:hidden alone does NOT clip box-shadow, so it's safe - the glow below is sized and inset so it never needs to reach the rounded corner anyway. */ } .kas-nav-title-card:after, .kas-booking-head:after, .kas-v51-hero:after, #kas-exam .kas-exam-hero:after, #kas-qb > h2:first-child:after, #kas-qb .kas-hero:after, .kas-pay-hero:after, body.kas-v6-training .kas-training-header:after, body.kas-v6-training #kas-qb .kas-header:after, body.kas-v6-training #kas-exam-app .kas-exam-header:after{ /* Bright center sits ON the right edge (vertically centered, away from the rounded corners so overflow:hidden clips it cleanly), so the light visibly "runs out" at the edge instead of floating as a separate circle in the middle of the card. */ content:"" !important; position:absolute !important; width:260px !important; height:260px !important; right:-130px !important; top:50% !important; transform:translateY(-50%) !important; border-radius:50% !important; background: radial-gradient( circle, rgba(64,133,181,.34) 0%, rgba(64,133,181,.15) 35%, rgba(64,133,181,0) 65% ) !important; filter:blur(22px) !important; pointer-events:none !important; } /* Weather gets a bigger, more visible glow than the other headers, as requested, so it stands out a bit more from the text. */ .kas-weather-map-title:after{ /* same "fades out at the right edge" fix as the shared header rule, just a bit bigger since Weather's glow is meant to stand out a little more. */ content:"" !important; position:absolute !important; width:340px !important; height:340px !important; right:-170px !important; top:50% !important; transform:translateY(-50%) !important; border-radius:50% !important; background: radial-gradient( circle, rgba(64,133,181,.40) 0%, rgba(64,133,181,.18) 32%, rgba(64,133,181,0) 65% ) !important; filter:blur(26px) !important; pointer-events:none !important; } /* text inside these headers needs to sit above the glow */ .kas-weather-map-title > *, .kas-nav-title-card > *, .kas-booking-head > *, .kas-v51-hero > *, #kas-exam .kas-exam-hero > *, .kas-pay-hero > *{ position:relative; z-index:1; } /* --- NOTAM: now that other pages have a photo background behind everything, this section needs a real card (not just a shadow under the heading) so the dark text stays legible no matter what photo sits behind it. --- */ .kas-notam-v2{ background:#ffffff !important; border-radius:24px !important; padding:24px 18px !important; box-shadow:var(--kas-card-shadow) !important; margin:0 -50px !imoprtant; } .kas-notam-v2-head{ padding-bottom:14px !important; } /* ============================================================ ROUND 17 (2026-09-03) - site-wide background photo on every page except Home, requested instead of setting it per-page in Elementor. ============================================================ */ /* --- BACKGROUND PHOTO EVERYWHERE EXCEPT HOME --- WordPress automatically adds the "home" class to on whichever page is set as the site's front page in Settings -> Reading, so this leaves that one page completely untouched, exactly as asked. FIX (round 18): a plain body background wasn't showing at all - almost certainly because the theme wraps all page content in a solid-colored container (e.g. #page, .site, .site-content) that sits on top of and hides its background completely. Two changes to fix this robustly: 1. The image now lives on a fixed, full-screen layer BEHIND everything (z-index:-1) instead of directly on body. 2. The most common WordPress/Elementor wrapper elements are forced transparent so that layer can actually show through them, whichever one this theme happens to use. */ body:not(.home){ position:relative !important; } body:not(.home):before{ content:"" !important; position:fixed !important; top:-10% !important; left:-10% !important; right:-10% !important; bottom:-10% !important; z-index:-1 !important; background-image: url('https://app.kosovoaeroservices.com/wp-content/uploads/2026/08/IMG_6572-scaled.webp') !important; background-size:auto 160% !important; background-position:center 70% !important; background-repeat:no-repeat !important; pointer-events:none !important; -webkit-transform:translate3d(0,0,0) !important; transform:translate3d(0,0,0) !important; will-change:transform !important; -webkit-backface-visibility:hidden !important; } body:not(.home) #page, body:not(.home) .site, body:not(.home) #content, body:not(.home) .site-content, body:not(.home) #primary, body:not(.home) .content-area, body:not(.home) .flynext-page-content-area, body:not(.home) [class*="page-content-wrap-"], body:not(.home) main, body:not(.home) .elementor, body:not(.home) .elementor-kit, body:not(.home) [data-elementor-type="wp-page"], body:not(.home) .elementor-section, body:not(.home) .elementor-container, body:not(.home) .elementor-widget-wrap, body:not(.home) .elementor-element, body:not(.home) .e-con, body:not(.home) .e-con-inner, body:not(.home) .elementor-top-section, body:not(.home) [data-settings*="background"], body:not(.home) [data-element_type="container"]{ background:transparent !important; background-color:transparent !important; background-image:none !important; } /* --- REMOVED (round 24): the "give #primary rounded corners + shadow if transparency fails" fallback from round 20 backfired on Payment - it turned a residual white wrapper into what looked like ONE deliberate giant card wrapping the entire page (header + everything below it), instead of individual floating cards like Training/Logbook actually look. Relying on the transparency rules above alone now, matching how Training/Logbook naturally work - no synthetic "make the leftover white look intentional" fallback that can create a worse result than just staying transparent. */ /* --- SMOOTH THE SEAM BETWEEN THE THEME'S TOP HEADER BAR AND THE PHOTO --- Best-effort: the top bar (KAS logo, language switcher, menu) is part of the Flynext theme, not one of the KAS app snippets, so its exact CSS class isn't known here. This targets the most common header selectors used by this theme/Elementor setups; if none of them match on your site, this simply has no effect and nothing breaks - send an "Inspect Element" screenshot of that bar if it still looks like a hard cut and this can be pointed at the right class directly. */ body:not(.home) .site-header, body:not(.home) #masthead, body:not(.home) .elementor-location-header, body:not(.home) header.site-header{ position:relative !important; } body:not(.home) .site-header::after, body:not(.home) #masthead::after, body:not(.home) .elementor-location-header::after, body:not(.home) header.site-header::after{ content:"" !important; position:absolute !important; left:0 !important; right:0 !important; bottom:-70px !important; height:70px !important; background:linear-gradient(to bottom, var(--kas-navy), transparent) !important; pointer-events:none !important; } /* --- BOOKING: date field's native calendar UI was pushing past the card's right edge in some browsers. Previous attempts (width/ box-sizing) alone weren't enough - this is a known iOS Safari quirk with the native date-picker's internal calendar icon that doesn't always respect width constraints. Clipping the card itself as a hard safety net so nothing can visually bleed past its edge regardless of what the input does internally. --- */ .kas-booking-card{ overflow-x:hidden !important; } .kas-booking-card input[type="date"]{ width:100% !important; min-width:0 !important; max-width:100% !important; box-sizing:border-box !important; display:block !important; } /* --- WEATHER: header pull-up scaled right back (round 39). At -90px everything ended up crammed against the top nav bar; a small -10px keeps the header just slightly raised without colliding with the nav. --- */ .kas-weather-map-title{ margin-top:-10px !important; transform:none !important; } /* ============================================================ ROUND 25 (2026-09-03i) - Training's overlap is much deeper than what round 23 did (roughly half the header's own height tucks behind the white card, not just a small 26px peek). Increased the overlap for Booking/Weather to match that depth, and brought Payment back in too - its header now pulls both the "OPEN PAYMENTS" label AND the white card up together (label gets its own low z-index so it stays visually behind/alongside the header rather than colliding with it). ============================================================ */ .kas-booking-head{ position:relative !important; z-index:2 !important; margin-bottom:115px !important; } .kas-weather-map-title{ position:relative !important; z-index:2 !important; } .kas-booking-card{ position:relative !important; z-index:1 !important; padding-top:56px !important; } .kas-weather-status{ /* round 30: still not enough overlap at -70px, pulled up further to -115px. Padding-top increased too so "WEATHER DATA" / "Last update" text keeps a comfortable gap from the navy bar above it instead of sitting right against it. */ position:relative !important; z-index:1 !important; margin-top:-60px !important; padding-top:44px !important; } .kas-pay-hero{ position:relative !important; z-index:2 !important; margin-bottom:-78px !important; } .kas-pay-section-title{ position:relative !important; z-index:1 !important; margin-top:60px !important; } .kas-pay-card, .kas-pay-admin-box{ position:relative !important; z-index:1 !important; } /* --- ROUND 36's wrapper padding-top override REMOVED in round 38: it applied to every page and raised the white content block itself everywhere, which was not wanted - only Weather's navy bar should sit higher, the white block stays where it was. --- */ /* --- BOOKING: white "sheet" is set at the root rule (body.kas-v6-booking #kas-booking-app) near the top of this file, because that more specific selector was overriding a plain #kas-booking-app rule here. Only the inner card stays here. --- */ .kas-booking-card{ background:#ffffff !important; } /* --- ROUND 44: EXACTLY THE BOOKING RECIPE, NOTHING ELSE --- Round 43 tried to reuse the theme's page wrapper as the white sheet. That kept failing because that wrapper also carries a large top padding of its own, which showed up as a tall empty white block above the content, with the rounding applied around the whole thing including that dead space. Now doing it exactly like Booking, which is signed off: - The theme wrapper is made fully transparent and its padding removed, so it contributes NO white box at all. - The white sheet is drawn by the app wrapper itself, the same way #kas-booking-app does it. Result: one rounded white sheet per page, starting right at the content, no leftover square block. --- */ body:not(.home) #primary, body:not(.home) [class*="page-content-wrap-"], body:not(.home) .content-area, body:not(.home) .flynext-page-content-area{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; border-radius:0 !important; padding-top:0 !important; padding-bottom:0 !important; } /* ROUND 45: the white sheet still rendered square and edge-to-edge, which means the white is painted by an ancestor of these app wrappers (an Elementor container), not by the wrappers themselves. So: strip white + padding from every Elementor level too, and let only the app wrapper paint it - with side margins so the rounded corners are actually visible instead of running off-screen. */ body:not(.home) .elementor-section, body:not(.home) .elementor-container, body:not(.home) .elementor-widget-wrap, body:not(.home) .elementor-element, body:not(.home) .e-con, body:not(.home) .e-con-inner, body:not(.home) .elementor-top-section, body:not(.home) .elementor-widget, body:not(.home) .elementor-widget-container{ background:transparent !important; background-color:transparent !important; box-shadow:none !important; border-radius:0 !important; } /* ROUND 46: the full-width white box survived every targeted rule, so it's painted by some wrapper div this file hasn't named yet. Catch-all instead of guessing: strip the background from EVERY non-KAS div between #content and the app, leaving all .kas-* / #kas-* elements (the actual cards) untouched. */ /* ROUND 47: still there - the previous rule only matched DIVs that are DESCENDANTS of #content/#primary, so it missed (a) those two elements themselves and (b) any non-div wrapper (main, section, article, aside). Widened to every element inside the page body, any tag, plus the wrappers themselves - with .kas-*/#kas-* excluded so the real cards keep their styling, and the site header/footer/nav left alone. */ /* ROUND 50: DevTools showed this rule loading but STRUCK THROUGH - something more specific was winning. Specificity raised with an html prefix and a :not(#_) boost (no element has id="_", it just adds ID-level weight) so it can no longer be outranked. */ html body:not(.home) #content:not(#_), html body:not(.home) #primary:not(#_), html body:not(.home) #page:not(#_), html body:not(.home) .site:not(#_), html body:not(.home) .site-content:not(#_), html body:not(.home) main:not(#_), html body:not(.home) .entry-content:not(#_), html body:not(.home) [class*="page-content-inner-"]:not(#_), html body:not(.home) [class*="post-"]:not(#_), html body:not(.home) .container:not(#_), html body:not(.home) .row:not(#_), html body:not(.home) [class*="col-"]:not(#_), html body:not(.home) #content *:not([class*="kas"]):not([id*="kas"]):not(header):not(footer):not(nav):not(input):not(select):not(button):not(textarea):not(#_), html body:not(.home) #primary *:not([class*="kas"]):not([id*="kas"]):not(header):not(footer):not(nav):not(input):not(select):not(button):not(textarea):not(#_){ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; border-radius:0 !important; } /* ROUND 51: the DOM dump showed ::before / ::after pseudo-elements sitting directly inside #content, #primary and .entry-content. Those were never reset by any previous rule - a pseudo-element with a white background and full width is exactly what the leftover box looks like. Neutralised here. */ html body:not(.home) #content::before, html body:not(.home) #content::after, html body:not(.home) #primary::before, html body:not(.home) #primary::after, html body:not(.home) .entry-content::before, html body:not(.home) .entry-content::after, html body:not(.home) .elementor::before, html body:not(.home) .elementor::after, html body:not(.home) [class*="page-content-wrap-"]::before, html body:not(.home) [class*="page-content-wrap-"]::after, html body:not(.home) [class*="page-content-inner-"]::before, html body:not(.home) [class*="page-content-inner-"]::after{ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; content:none !important; display:none !important; } /* the sheet itself - same :not(#_) weight so the reset above can never outrank it. overflow is NOT hidden here: Logbook and Nav deliberately pull their headers up out of the box (-65px), and clipping that is what cut them off before. */ html body:not(.home) .kas-weather-app:not(#_), html body:not(.home) .kas-v51-page:not(#_), html body.kas-v6-training .kas-training-shell:not(#_), html body:not(.home) .kas-pay-wrap:not(#_), html body:not(.home) #kas-nav:not(#_), html body:not(.home) #kas-qb:not(#_), html body:not(.home) #kas-exam:not(#_){ /* ROUND 55: das weisse Sheet bleibt - es ist gewollt und soll genau wie auf Booking aussehen (weiss, 28px Rundung, Schatten, Foto ringsherum sichtbar). Warum es vorher nicht so aussah, lag nicht an dieser Regel, sondern an den Elementor-Wrappern darueber: die haben ihr eigenes Weiss randlos ueber die volle Breite gemalt, wodurch das Sheet als eckiger Vollbreite-Kasten wirkte statt als gerundete Karte. Diese Wrapper sind seit der :has()-Regel am Ende der Datei transparent, also greift das Booking-Rezept hier jetzt genauso. margin-top ist identisch mit dem Booking-Wert oben. 150px war zu viel (leerer Block), 18px zu wenig (klebte am Header). */ display:block !important; background:#ffffff !important; border-radius:28px !important; overflow:visible !important; padding:16px 16px 18px !important; box-shadow:var(--kas-card-shadow) !important; margin:140px -12px 30px !important; box-sizing:border-box !important; width:auto !important; max-width:none !important; } /* Training einzeln hoeher setzen. Die Sammelregel oben gilt fuer alle Seiten - hier nur Training abweichend. Kleinere Zahl = weiter oben. */ html body.kas-v6-training .kas-training-shell:not(#_):not(#__){ margin-top:115px !important; } /* ============================================================ LOGBOOK + KAS NAV: Position des blauen Balkens Nur die erste Zahl aendern. Negativ = Balken nach OBEN (ragt aus dem weissen Sheet heraus) Positiv = Balken nach UNTEN Die zweite Zahl (margin-bottom) haelt den Inhalt darunter an Ort: aendert man oben -40, setzt man unten +40, dann ruecken die Karten unter dem Balken nicht mit. ============================================================ */ /* --- LOGBOOK --- */ html body:not(.home) .kas-v51-hero:not(#_):not(#__){ position:relative !important; z-index:2 !important; margin-top:65px !important; margin-bottom:24px !important; } /* --- KAS NAV --- */ html body:not(.home) .kas-nav-title-card:not(#_):not(#__){ position:relative !important; z-index:2 !important; margin-top:1px !important; margin-bottom:24px !important; } /* --- WEATHER: the navy header must sit HIGHER than the white card, not lower. A negative margin-top here moved it DOWN into the content (wrong direction, kept happening) - correct approach is a positive translateY-free offset combined with the white card being pulled up under it, which .kas-weather-status already does via its own margin-top. So no negative offset on the header at all - it just stays put and the card slides under it. --- */ .kas-weather-map-title{ margin-top:0 !important; } /* ROUND 49: round 48's header-offset overrides were reverted - they brought the full-width white boxes back on all four pages. Logbook/Nav header clipping needs a different approach that does not touch these elements. */ /* ============================================================ ROUND 55 (2026-09-03) - DER WEISSE VOLLBREITE-KASTEN ============================================================ Der Kasten kam von den Elementor-Wrappern (.e-con / .e-con-inner / .elementor-element) rund um die App-Shell. Die haben ihr eigenes Weiss ueber die volle Breite gemalt, direkt unter dem Header - das sah aus wie ein eckiger Block und hat das gerundete Sheet der Shell komplett ueberdeckt. Alle Catch-all-Versuche der Runden 44-51 haben diese Wrapper verfehlt. Statt weiter Klassennamen zu raten, trifft die Regel unten per :has() ausschliesslich die VORFAHREN der App-Shell. Header, Footer und Bottom-Navigation enthalten die Shell nicht und koennen deshalb gar nicht matchen - das ist die sichere Variante der `body *`-Regel, die diese Datei immer vermieden hat. Padding wird hier bewusst NICHT zurueckgesetzt: traegt ein inline padding-bottom fuer die Bottom-Nav, und sobald der Wrapper transparent ist, ist sein Padding ohnehin unsichtbar. ============================================================ */ /* CONTACT MOBILE – leere Seiten-Spalten bei Überschrift ausblenden */ @media (max-width:767px){ html body.page-id-990 .elementor-element-8685db2 > .elementor-container > .elementor-column:first-child, html body.page-id-990 .elementor-element-8685db2 > .elementor-container > .elementor-column:last-child{ display:none !important; } /* mittlere Spalte mit Get In Touch / Contact Us volle Breite */ html body.page-id-990 .elementor-element-8685db2 > .elementor-container > .elementor-column:nth-child(2){ width:100% !important; } } /* KAS Bottom Navigation – Text Gold */ #kas-bottom-nav a, #kas-bottom-nav span, .kas-bottom-nav a, .kas-bottom-nav span { color: #C4A055 !important; } /* ============================================================ ROUND 58 (2026-09-03) - LOGIN / CONTACT / LOCATIONS, EINHEITLICH ============================================================ Runde 56 und 57 sind komplett entfernt und hier ersetzt. Grund waren drei Fehler, die sich gegenseitig verstaerkt haben: 1. UNSICHTBARE BOTTOM-NAV auf diesen drei Seiten. Die Farbregeln lauteten "html body.page-id-990 span {color:navy}" - das trifft JEDEN span der Seite, also auch die Beschriftungen der unteren Menueleiste. Navy auf Navy ist unsichtbar. Alle Textfarben sind jetzt auf den Seiteninhalt eingegrenzt ([data-elementor-type="wp-page"] bzw. .elementor-); die Menueleiste liegt ausserhalb davon und sieht damit wieder aus wie auf allen anderen Seiten. 2. GRAUE BLOECKE im Kontaktformular. Die Flaechenfarbe lag auf .elementor-section UND .e-con, also auf mehreren verschachtelten Ebenen gleichzeitig, dazu kamen Elementor-Overlays. Jetzt traegt nur noch EIN Element die Farbe (das Sheet), alles darin ist transparent - dadurch gibt es keine unterschiedlichen Grautoene und keine harten Kanten mehr. 3. KLEBENDE KARTEN auf Locations. Mindestens eine Section steht in Elementor auf "Full Width", zieht sich also per width:100vw ueber den Wrapper hinaus. Wird unten neutralisiert. Alle drei Seiten teilen sich jetzt dieselben Werte, damit die Breite ueberall gleich wirkt. ============================================================ */ /* ------------------------------------------------------------ GEMEINSAME WERTE - hier stellst du alles ein ------------------------------------------------------------ */ html body.page-id-6190, html body.page-id-990, html body.page-id-5012{ --kas-oben:110px; /* Abstand zum Site-Header */ --kas-seite:16px; /* Abstand links/rechts */ --kas-unten:34px; /* Abstand nach unten */ --kas-innen:26px 18px 30px; /* Innenabstand: oben/seitlich/unten */ --kas-rundung:28px; --kas-flaeche:#eef2f6; /* Flaechenfarbe Contact */ --kas-feld:#ffffff; /* Eingabefelder */ } /* ------------------------------------------------------------ SHEET - Login und Contact bekommen eine Flaeche, Locations nicht ------------------------------------------------------------ */ html body.page-id-6190 [data-elementor-type="wp-page"], html body.page-id-6190 .elementor-6190, html body.page-id-990 [data-elementor-type="wp-page"]{ border-radius:var(--kas-rundung) !important; padding:var(--kas-innen) !important; box-shadow:var(--kas-card-shadow) !important; margin:var(--kas-oben) var(--kas-seite) var(--kas-unten) !important; box-sizing:border-box !important; overflow:visible !important; } html body.page-id-6190 [data-elementor-type="wp-page"], html body.page-id-6190 .elementor-6190{ background:#ffffff !important; } html body.page-id-990 [data-elementor-type="wp-page"]{ background:var(--kas-flaeche) !important; } /* ------------------------------------------------------------ CONTACT US (990) Nur das Sheet traegt Farbe - alles darin transparent. Damit sind die verschiedenen Grautoene und Kanten von gestern weg. ------------------------------------------------------------ */ html body.page-id-990 [data-elementor-type="wp-page"] .elementor-section, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-container, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-column, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-wrap, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-container, html body.page-id-990 [data-elementor-type="wp-page"] .e-con, html body.page-id-990 [data-elementor-type="wp-page"] .e-con-inner{ background:transparent !important; background-color:transparent !important; background-image:none !important; box-shadow:none !important; border:0 !important; min-height:0 !important; } /* Elementor-Overlays und leere Bildplatzhalter raus - das waren die grauen Balken ueber der Ueberschrift und unter dem Button */ html body.page-id-990 [data-elementor-type="wp-page"] .elementor-background-overlay, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-image:empty, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-spacer{ display:none !important; } /* Schriftfarben - eingegrenzt auf den Seiteninhalt */ html body.page-id-990 [data-elementor-type="wp-page"] h1, html body.page-id-990 [data-elementor-type="wp-page"] h2, html body.page-id-990 [data-elementor-type="wp-page"] h3, html body.page-id-990 [data-elementor-type="wp-page"] h4{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; } html body.page-id-990 [data-elementor-type="wp-page"] p, html body.page-id-990 [data-elementor-type="wp-page"] label, html body.page-id-990 [data-elementor-type="wp-page"] span, html body.page-id-990 [data-elementor-type="wp-page"] li{ color:var(--kas-text) !important; -webkit-text-fill-color:var(--kas-text) !important; } /* Eingabefelder - alle gleich, ein Rahmen, eine Rundung */ html body.page-id-990 input[type="text"], html body.page-id-990 input[type="email"], html body.page-id-990 input[type="tel"], html body.page-id-990 input[type="number"], html body.page-id-990 textarea{ background:var(--kas-feld) !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; border:1px solid rgba(23,43,61,0.18) !important; border-radius:14px !important; padding:14px 16px !important; box-shadow:none !important; width:100% !important; box-sizing:border-box !important; } html body.page-id-990 input:focus, html body.page-id-990 textarea:focus{ border:2px solid var(--kas-gold) !important; outline:none !important; } html body.page-id-990 input::placeholder, html body.page-id-990 textarea::placeholder{ color:#8a9aa3 !important; -webkit-text-fill-color:#8a9aa3 !important; } html body.page-id-990 .elementor-widget-form i, html body.page-id-990 .elementor-widget-form svg{ color:var(--kas-gold) !important; fill:var(--kas-gold) !important; } /* Button */ html body.page-id-990 button[type="submit"], html body.page-id-990 input[type="submit"], html body.page-id-990 .elementor-button{ background:var(--kas-navy) !important; background-color:var(--kas-navy) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:2px solid var(--kas-gold) !important; border-radius:24px !important; padding:15px 28px !important; font-weight:600 !important; width:100% !important; } html body.page-id-990 button[type="submit"] span, html body.page-id-990 button[type="submit"] i, html body.page-id-990 .elementor-button span, html body.page-id-990 .elementor-button i{ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; fill:#ffffff !important; } /* ------------------------------------------------------------ LOGIN (6190) ------------------------------------------------------------ */ html body.page-id-6190 [data-elementor-type="wp-page"] label, html body.page-id-6190 [data-elementor-type="wp-page"] p, html body.page-id-6190 [data-elementor-type="wp-page"] span, html body.page-id-6190 [data-elementor-type="wp-page"] h1, html body.page-id-6190 [data-elementor-type="wp-page"] h2, html body.page-id-6190 .elementor-6190 label, html body.page-id-6190 .elementor-6190 p, html body.page-id-6190 .elementor-6190 span{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; } /* Die Links stehen je nach Theme AUSSERHALB des Formulars und landen dann auf dem Foto. Deshalb bekommt jeder Link eine eigene weisse Flaeche - damit ist er lesbar, egal wo er sitzt. */ html body.page-id-6190 .elementor-widget-shortcode a, html body.page-id-6190 #loginform + p a, html body.page-id-6190 .login-links a, html body.page-id-6190 #nav a, html body.page-id-6190 #backtoblog a{ display:inline-block !important; background:#ffffff !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; padding:8px 14px !important; margin:4px 0 !important; border-radius:12px !important; border:1px solid var(--kas-gold) !important; text-decoration:none !important; font-weight:600 !important; } html body.page-id-6190 input[type="text"], html body.page-id-6190 input[type="email"], html body.page-id-6190 input[type="password"]{ background:#f7f9fb !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; border:1px solid rgba(23,43,61,0.18) !important; border-radius:14px !important; padding:14px 16px !important; width:100% !important; box-sizing:border-box !important; } html body.page-id-6190 input:focus{ border:2px solid var(--kas-gold) !important; outline:none !important; } html body.page-id-6190 .login-remember, html body.page-id-6190 .forgetmenot{ display:flex !important; align-items:center !important; gap:8px !important; margin:14px 0 !important; } html body.page-id-6190 input[type="checkbox"]{ accent-color:var(--kas-gold) !important; width:18px !important; height:18px !important; margin:0 !important; } html body.page-id-6190 input[type="submit"], html body.page-id-6190 button[type="submit"]{ background:var(--kas-navy) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:2px solid var(--kas-gold) !important; border-radius:24px !important; padding:15px 28px !important; font-weight:600 !important; width:100% !important; } /* ------------------------------------------------------------ LOCATIONS (5012) - Karten statt Sheet, Breite wie die anderen ------------------------------------------------------------ */ html body.page-id-5012 [data-elementor-type="wp-page"]{ background:transparent !important; box-shadow:none !important; border-radius:0 !important; padding:0 !important; overflow:visible !important; margin:var(--kas-oben) 0 var(--kas-unten) !important; } /* Elementor-Stretch neutralisieren, sonst kleben die Karten trotz Margin am Bildschirmrand */ html body.page-id-5012 [data-elementor-type="wp-page"] .elementor-section, html body.page-id-5012 [data-elementor-type="wp-page"] .e-con, html body.page-id-5012 .elementor-section-stretched{ width:auto !important; max-width:none !important; min-width:0 !important; left:auto !important; right:auto !important; transform:none !important; box-sizing:border-box !important; } /* Jeder Abschnitt eine eigene Karte */ html body.page-id-5012 [data-elementor-type="wp-page"] > .elementor-section, html body.page-id-5012 [data-elementor-type="wp-page"] > .e-con{ background:#ffffff !important; border-radius:var(--kas-rundung) !important; box-shadow:var(--kas-card-shadow) !important; border-left:4px solid var(--kas-navy) !important; padding:22px 16px 26px !important; margin:0 var(--kas-seite) 18px !important; overflow:hidden !important; } html body.page-id-5012 [data-elementor-type="wp-page"] h1, html body.page-id-5012 [data-elementor-type="wp-page"] h2, html body.page-id-5012 [data-elementor-type="wp-page"] h3{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; } html body.page-id-5012 [data-elementor-type="wp-page"] p, html body.page-id-5012 [data-elementor-type="wp-page"] li, html body.page-id-5012 [data-elementor-type="wp-page"] span{ color:var(--kas-text) !important; -webkit-text-fill-color:var(--kas-text) !important; } html body.page-id-5012 [data-elementor-type="wp-page"] strong, html body.page-id-5012 [data-elementor-type="wp-page"] b{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; } html body.page-id-5012 .elementor-icon-list-icon i, html body.page-id-5012 .elementor-icon-list-icon svg, html body.page-id-5012 .elementor-icon i, html body.page-id-5012 .elementor-icon svg{ color:var(--kas-gold) !important; fill:var(--kas-gold) !important; } html body.page-id-5012 iframe, html body.page-id-5012 .elementor-widget-google_maps{ width:100% !important; max-width:100% !important; border-radius:16px !important; border:0 !important; } /* ------------------------------------------------------------ BOTTOM-NAV - Sicherheitsnetz Falls doch noch eine Farbregel durchschlaegt, wird die untere Menueleiste hier ausdruecklich zurueckgesetzt, damit sie auf diesen drei Seiten aussieht wie ueberall sonst. ------------------------------------------------------------ */ html body.page-id-6190 #wp-bottom-menu, html body.page-id-990 #wp-bottom-menu, html body.page-id-5012 #wp-bottom-menu, html body.page-id-6190 #wp-bottom-menu *, html body.page-id-990 #wp-bottom-menu *, html body.page-id-5012 #wp-bottom-menu *{ color:inherit !important; -webkit-text-fill-color:currentColor !important; } /* ============================================================ ROUND 59 (2026-09-03) - FARBEN CONTACT + LESBARKEIT LOGIN ============================================================ Zwei Sachen aus Runde 58 waren noch falsch: 1. "GET IN" BLIEB WEISS. Meine Farbregel listete p, label, span und li - aber nicht strong und b. Genau darin steckt das "Get In" mit weisser Inline-Farbe von Elementor. Deshalb war ein Wort weiss und das andere navy. strong/b/em sind jetzt mit drin, und der Kicker ueber der Ueberschrift bekommt durchgehend Gold - das ist die Farbe, die diese Zeile auf allen anderen Seiten der App auch hat. Die Flaeche ist jetzt weiss statt hellblau. Alle App-Seiten (Training, Logbook, Weather, Nav, Booking) haben weisse Sheets - hellblau war der einzige Ausreisser. 2. DAS LOGIN-SHEET HAT NIE GEGRIFFEN. Die Selektoren [data-elementor-type="wp-page"] und .elementor-6190 treffen auf dieser Seite nichts - deshalb standen Labels und Links weiter direkt auf dem Foto. Statt weiter zu raten, haengt die Karte jetzt per :has() an dem Element, das das Formular tatsaechlich enthaelt. Alle Login-Regeln sind auf #content eingegrenzt. Die untere Menueleiste (#wp-bottom-menu) liegt ausserhalb davon und kann dadurch nicht mehr versehentlich mitgefaerbt werden - das war der Fehler, der die Beschriftungen unsichtbar gemacht hat. ============================================================ */ /* ------------------------------------------------------------ CONTACT US (990) - weisse Flaeche, Kicker in Gold ------------------------------------------------------------ */ html body.page-id-990{ --kas-flaeche:#ffffff; /* war #eef2f6 - jetzt wie alle anderen Seiten */ } /* strong/b/em fehlten bisher - daher das weisse "Get In" */ html body.page-id-990 [data-elementor-type="wp-page"] strong, html body.page-id-990 [data-elementor-type="wp-page"] b, html body.page-id-990 [data-elementor-type="wp-page"] em{ color:var(--kas-text) !important; -webkit-text-fill-color:var(--kas-text) !important; } /* Kicker "Get In Touch" komplett in Gold, egal wie Elementor die Woerter intern aufteilt */ html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-heading:first-of-type, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-heading:first-of-type *, html body.page-id-990 [data-elementor-type="wp-page"] h4, html body.page-id-990 [data-elementor-type="wp-page"] h4 *, html body.page-id-990 [data-elementor-type="wp-page"] h5, html body.page-id-990 [data-elementor-type="wp-page"] h5 *{ color:var(--kas-gold) !important; -webkit-text-fill-color:var(--kas-gold) !important; letter-spacing:.08em !important; text-transform:uppercase !important; } /* Hauptueberschrift bleibt Navy */ html body.page-id-990 [data-elementor-type="wp-page"] h1, html body.page-id-990 [data-elementor-type="wp-page"] h1 *, html body.page-id-990 [data-elementor-type="wp-page"] h2, html body.page-id-990 [data-elementor-type="wp-page"] h2 *{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; text-transform:none !important; } /* Eingabefelder heben sich auf Weiss sonst nicht ab */ html body.page-id-990 input[type="text"], html body.page-id-990 input[type="email"], html body.page-id-990 input[type="tel"], html body.page-id-990 input[type="number"], html body.page-id-990 textarea{ background:#f7f9fb !important; border:1px solid rgba(23,43,61,0.22) !important; } /* ------------------------------------------------------------ LOGIN (6190) - Karte um das Formular, mittig, alles lesbar Alles unter #content, damit die Bottom-Nav unberuehrt bleibt. ------------------------------------------------------------ */ /* Die Karte haengt an dem Element, das das Formular enthaelt */ html body.page-id-6190 #content .elementor-widget-container:has(#loginform), html body.page-id-6190 #content .elementor-shortcode:has(#loginform), html body.page-id-6190 #content .elementor-widget-shortcode:has(#loginform), html body.page-id-6190 #content div:has(> #loginform){ background:#ffffff !important; border-radius:var(--kas-rundung) !important; padding:26px 20px 30px !important; box-shadow:var(--kas-card-shadow) !important; max-width:440px !important; margin:0 auto !important; box-sizing:border-box !important; } /* Falls :has() nicht greift: das Formular selbst ist die Karte */ html body.page-id-6190 #content #loginform{ background:#ffffff !important; border-radius:var(--kas-rundung) !important; padding:26px 20px 30px !important; box-shadow:var(--kas-card-shadow) !important; max-width:440px !important; margin:0 auto !important; box-sizing:border-box !important; } /* Labels und Fliesstext */ html body.page-id-6190 #content label, html body.page-id-6190 #content p, html body.page-id-6190 #content strong, html body.page-id-6190 #content b, html body.page-id-6190 #content span:not(.dashicons){ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; } /* Sternchen in Gold statt Rot */ html body.page-id-6190 #content .required, html body.page-id-6190 #content abbr[title="required"]{ color:var(--kas-gold) !important; -webkit-text-fill-color:var(--kas-gold) !important; border:0 !important; text-decoration:none !important; } /* Links stehen ausserhalb der Karte auf dem Foto - deshalb bekommt jeder Link eine eigene weisse Flaeche */ html body.page-id-6190 #content a{ display:inline-block !important; background:#ffffff !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; padding:9px 16px !important; margin:6px 0 !important; border-radius:14px !important; border:1px solid var(--kas-gold) !important; text-decoration:none !important; font-weight:600 !important; box-shadow:var(--kas-card-shadow) !important; } /* Der Bereich unter dem Button mittig, passend zur Karte */ html body.page-id-6190 #content #loginform ~ *{ max-width:440px !important; margin-left:auto !important; margin-right:auto !important; text-align:center !important; } /* Formularelemente auf Kartenbreite */ html body.page-id-6190 #content input[type="text"], html body.page-id-6190 #content input[type="email"], html body.page-id-6190 #content input[type="password"], html body.page-id-6190 #content input[type="submit"], html body.page-id-6190 #content button[type="submit"]{ max-width:100% !important; box-sizing:border-box !important; } /* ============================================================ ROUND 60 (2026-09-03) - "GET IN" WAR MEIN FEHLER ============================================================ Das verschwundene "Get In" habe ich selbst verursacht. Elementor faerbt einzelne Wortgruppen in Ueberschriften haeufig ueber einen Farbverlauf: das Wort bekommt ein background-image und wird per -webkit-background-clip:text ausgestanzt, die Schriftfarbe selbst ist dabei transparent. Meine Regel aus Runde 58 hat allen Containern background-image:none gegeben - damit war der Verlauf weg, die Schrift blieb transparent, das Wort unsichtbar. Unten wird deshalb fuer Ueberschriften background-clip wieder auf border-box gesetzt und die Fuellfarbe hart gesetzt. Dann ist es egal, ob Elementor dort einen Verlauf hinterlegt hatte. Ausserdem: - Contact bekommt oben und unten weniger Weissraum und die Navy-Kante links, wie die Karten auf Locations. - Die Link-Kaesten auf dem Login sahen wie zufaellige Buttons aus. Sie sind wieder normale Textlinks, nur in Weiss mit leichtem Schatten - damit auf dem Foto lesbar, ohne dass es nach Button aussieht. Der Login-Button bleibt wie er ist. ============================================================ */ /* ------------------------------------------------------------ CONTACT US (990) ------------------------------------------------------------ */ html body.page-id-990{ --kas-innen:14px 18px 18px; /* war 26px 18px 30px - weniger Weissraum */ } /* Navy-Kante links wie auf Locations */ html body.page-id-990 [data-elementor-type="wp-page"]{ border-left:4px solid var(--kas-navy) !important; } /* Ueberschriften: Farbverlauf-Ausstanzung zuruecksetzen, sonst bleiben einzelne Woerter unsichtbar */ html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-heading, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-widget-heading *, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-heading-title, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-heading-title *, html body.page-id-990 [data-elementor-type="wp-page"] h1, html body.page-id-990 [data-elementor-type="wp-page"] h1 *, html body.page-id-990 [data-elementor-type="wp-page"] h2, html body.page-id-990 [data-elementor-type="wp-page"] h2 *, html body.page-id-990 [data-elementor-type="wp-page"] h3, html body.page-id-990 [data-elementor-type="wp-page"] h3 *, html body.page-id-990 [data-elementor-type="wp-page"] h4, html body.page-id-990 [data-elementor-type="wp-page"] h4 *, html body.page-id-990 [data-elementor-type="wp-page"] h5, html body.page-id-990 [data-elementor-type="wp-page"] h5 *, html body.page-id-990 [data-elementor-type="wp-page"] h6, html body.page-id-990 [data-elementor-type="wp-page"] h6 *{ -webkit-background-clip:border-box !important; background-clip:border-box !important; background-image:none !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; text-transform:none !important; letter-spacing:normal !important; } /* Der Kicker darueber in Gold - kleinere Ueberschriftenebenen */ html body.page-id-990 [data-elementor-type="wp-page"] h4, html body.page-id-990 [data-elementor-type="wp-page"] h4 *, html body.page-id-990 [data-elementor-type="wp-page"] h5, html body.page-id-990 [data-elementor-type="wp-page"] h5 *, html body.page-id-990 [data-elementor-type="wp-page"] h6, html body.page-id-990 [data-elementor-type="wp-page"] h6 *{ color:#8a6a1f !important; -webkit-text-fill-color:#8a6a1f !important; letter-spacing:.08em !important; text-transform:uppercase !important; } /* Erstes und letztes Element ohne zusaetzlichen Aussenabstand */ html body.page-id-990 [data-elementor-type="wp-page"] > *:first-child, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-section:first-child, html body.page-id-990 [data-elementor-type="wp-page"] .e-con:first-child{ margin-top:0 !important; padding-top:0 !important; } html body.page-id-990 [data-elementor-type="wp-page"] > *:last-child, html body.page-id-990 [data-elementor-type="wp-page"] .elementor-section:last-child, html body.page-id-990 [data-elementor-type="wp-page"] .e-con:last-child{ margin-bottom:0 !important; padding-bottom:0 !important; } /* ------------------------------------------------------------ LOGIN (6190) - Text auf dem Foto lesbar, ohne Button-Optik ------------------------------------------------------------ */ /* Die Kaesten von Runde 59 zuruecknehmen */ html body.page-id-6190 #content a{ display:inline !important; background:transparent !important; border:0 !important; box-shadow:none !important; padding:0 !important; margin:0 !important; border-radius:0 !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-decoration:underline !important; font-weight:700 !important; text-shadow:0 1px 3px rgba(0,0,0,0.65) !important; } /* Labels und Fliesstext ebenfalls weiss mit Schatten - sie stehen direkt auf dem Foto, Navy war dort nicht lesbar */ html body.page-id-6190 #content label, html body.page-id-6190 #content p, html body.page-id-6190 #content strong, html body.page-id-6190 #content b, html body.page-id-6190 #content span:not(.dashicons){ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 1px 3px rgba(0,0,0,0.65) !important; } /* Sternchen in Gold, ebenfalls mit Schatten */ html body.page-id-6190 #content .required, html body.page-id-6190 #content abbr[title="required"]{ color:var(--kas-gold) !important; -webkit-text-fill-color:var(--kas-gold) !important; text-shadow:0 1px 3px rgba(0,0,0,0.65) !important; border:0 !important; text-decoration:none !important; } /* Eingabefelder behalten dunkle Schrift auf hellem Grund */ html body.page-id-6190 #content input[type="text"], html body.page-id-6190 #content input[type="email"], html body.page-id-6190 #content input[type="password"]{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; text-shadow:none !important; } /* Der Login-Button bleibt unveraendert - nur sicherstellen, dass die weisse Schrift keinen Schatten mitbekommt */ html body.page-id-6190 #content input[type="submit"], html body.page-id-6190 #content button[type="submit"]{ text-shadow:none !important; } /* ============================================================ ROUND 61 (2026-09-03) - STUDENT LOGIN (6195) + TEXT-FIX ============================================================ "Student Login" ist eine zweite, eigene Seite (page-id-6195) - keine der bisherigen Login-Regeln (alle auf page-id-6190) hat dort je gegriffen, deshalb blieb sie unveraendert. Statt 60+ Zeilen aus den Runden 58-60 einzeln zu duplizieren, steht hier ein neuer, kompakter Block, der beide Login-Seiten gemeinsam bedient (6190 und 6195 als eine Selektorliste). Er deckt genau das ab, was inzwischen als richtig bestaetigt ist: weisse Karte um das Formular, Text lesbar, Bottom-Nav unberuehrt, kein iOS-Auto-Zoom beim Antippen der Felder. Der graue Satz "Don't have an account?" blieb bisher grau, weil die Regel nur einzelne Tags (p, label, span) erfasst hat - falls der Text in einem anderen Element steckt, greift sie nicht. Die Regel unten faengt stattdessen ALLES im Inhaltsbereich außer Eingabefeldern und der Bottom-Nav ab, kann also keinen Text mehr uebersehen. ============================================================ */ html body.page-id-6190, html body.page-id-6195{ --kas-login-oben:70px; /* Abstand der Karte zum Header */ } /* Karte um das Formular - haengt an dem Element, das das Formular tatsaechlich enthaelt, mit Fallback auf #loginform */ html body.page-id-6190 #content .elementor-widget-container:has(#loginform), html body.page-id-6190 #content div:has(> #loginform), html body.page-id-6195 #content .elementor-widget-container:has(#loginform), html body.page-id-6195 #content div:has(> #loginform){ background:#ffffff !important; border-radius:var(--kas-rundung) !important; padding:26px 20px 30px !important; box-shadow:var(--kas-card-shadow) !important; max-width:440px !important; margin:var(--kas-login-oben) auto 0 !important; box-sizing:border-box !important; } html body.page-id-6190 #content #loginform, html body.page-id-6195 #content #loginform{ background:#ffffff !important; border-radius:var(--kas-rundung) !important; padding:26px 20px 30px !important; box-shadow:var(--kas-card-shadow) !important; max-width:440px !important; margin:var(--kas-login-oben) auto 0 !important; box-sizing:border-box !important; } /* ALLES im Inhaltsbereich weiss mit Schatten - ausser den Eingabefeldern (bleiben dunkel auf hellem Grund) und der Bottom-Nav (bleibt unberuehrt) */ html body.page-id-6190 #content, html body.page-id-6195 #content, html body.page-id-6190 #content *:not(input):not(textarea):not(select):not(button):not(#wp-bottom-menu):not(#wp-bottom-menu *), html body.page-id-6195 #content *:not(input):not(textarea):not(select):not(button):not(#wp-bottom-menu):not(#wp-bottom-menu *){ color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:0 1px 3px rgba(0,0,0,0.65) !important; } /* Links unterstrichen und fett, wie bisher */ html body.page-id-6190 #content a, html body.page-id-6195 #content a{ text-decoration:underline !important; font-weight:700 !important; } /* Sternchen in Gold statt Rot */ html body.page-id-6190 #content .required, html body.page-id-6190 #content abbr[title="required"], html body.page-id-6195 #content .required, html body.page-id-6195 #content abbr[title="required"]{ color:var(--kas-gold) !important; -webkit-text-fill-color:var(--kas-gold) !important; text-shadow:0 1px 3px rgba(0,0,0,0.65) !important; border:0 !important; text-decoration:none !important; } /* Eingabefelder: dunkle Schrift auf hellem Grund, kein Schatten, 16px verhindert den iOS-Auto-Zoom beim Antippen */ html body.page-id-6190 #content input[type="text"], html body.page-id-6190 #content input[type="email"], html body.page-id-6190 #content input[type="password"], html body.page-id-6195 #content input[type="text"], html body.page-id-6195 #content input[type="email"], html body.page-id-6195 #content input[type="password"]{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; text-shadow:none !important; font-size:16px !important; } html body.page-id-6190 #content input[type="checkbox"], html body.page-id-6195 #content input[type="checkbox"]{ accent-color:var(--kas-gold) !important; width:18px !important; height:18px !important; } /* Login-Button: Navy mit Goldrand, kein Textschatten */ html body.page-id-6190 #content input[type="submit"], html body.page-id-6190 #content button[type="submit"], html body.page-id-6195 #content input[type="submit"], html body.page-id-6195 #content button[type="submit"]{ background:var(--kas-navy) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; text-shadow:none !important; border:2px solid var(--kas-gold) !important; border-radius:24px !important; padding:15px 28px !important; font-weight:600 !important; width:100% !important; } /* Login: echte Selektoren (WP User Manager, nicht #loginform) */ html body.page-id-6190{ --kas-login-oben:130px; } html body.page-id-6190 #content .wpum-login-form{ background:#transparent !important; box-shadow:none !important; max-width:440px !important; margin:var(--kas-login-oben) auto 0 !important; box-sizing:border-box !important; } html body.page-id-6190 #content .wpum-login-form label, html body.page-id-6190 #content .wpum-login-form span, html body.page-id-6190 #content .wpum-action-links, html body.page-id-6190 #content .wpum-action-links a{ color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; text-shadow:none !important; } html body.page-id-6190 #content .wpum-login-form input[type="text"], html body.page-id-6190 #content .wpum-login-form input[type="email"], html body.page-id-6190 #content .wpum-login-form input[type="password"]{ background:#f7f9fb !important; color:var(--kas-navy) !important; -webkit-text-fill-color:var(--kas-navy) !important; border:1px solid rgba(23,43,61,0.18) !important; border-radius:14px !important; padding:14px 16px !important; width:100% !important; box-sizing:border-box !important; font-size:16px !important; } html body.page-id-6190 #content .wpum-login-form input[type="submit"]{ background:var(--kas-navy) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; border:2px solid var(--kas-gold) !important; border-radius:24px !important; padding:15px 28px !important; font-weight:600 !important; width:100% !important; } /* ============================================================ ROUND 62 (2026-09-03) - PDF-SEITEN DER TRAINING LIBRARY ============================================================ Betrifft die vier Unterseiten: /training-book/ /checklists/ /aircraft-manual/ /vfr-charts/ 1. Back-Button (gold, im KAS-Stil) - wird per JS unten eingefuegt, aber NUR falls die Seite noch keinen hat. Die Seite, die den Button schon per Elementor traegt, bekommt keinen zweiten. 2. PDF-Embedder-Viewer horizontal zentriert statt links anliegend, plus etwas Luft nach oben zum Header. SCHNELL AENDERN: - Abstand oben: padding-top in .kas-pdf-topbar - Button-Farbe: background in .kas-pdf-back ============================================================ */ .kas-pdf-topbar{ display:flex !important; justify-content:flex-start !important; padding:18px 16px 6px !important; box-sizing:border-box !important; } .kas-pdf-back{ display:inline-flex !important; align-items:center !important; gap:8px !important; background:var(--kas-gold) !important; color:var(--kas-text) !important; text-decoration:none !important; font-size:16px !important; font-weight:700 !important; line-height:1 !important; padding:16px 22px !important; border-radius:16px !important; box-shadow:var(--kas-card-shadow) !important; } .kas-pdf-back:hover, .kas-pdf-back:focus{ background:var(--kas-gold-dark) !important; color:#ffffff !important; -webkit-text-fill-color:#ffffff !important; } /* ============================================================ ROUND 63 (2026-09-03) - DEARFLIP STATT PDF EMBEDDER ============================================================ Korrektur zu Runde 62: der Viewer auf den vier Seiten ist NICHT PDF Embedder, sondern DearFlip ("DearFlip: Loading PDF ..."). Die .pdfemb-* Regeln liefen deshalb ins Leere. Blaettermodus bleibt unveraendert - hier wird nur die Darstellung angeglichen (weisser statt grauer Rahmen, zentriert, gerundet) und Abstand zum Header gegeben. SCHNELL AENDERN: - Abstand Button/Header: padding-top in .kas-pdf-topbar - Abstand ueber dem PDF: margin-top in .df-container - Rahmenfarbe: background in .df-container ============================================================ */ .df-container, ._df_book, .dearflip-container, .df-element{ background:#ffffff !important; margin-left:auto !important; margin-right:auto !important; border-radius:16px !important; overflow:hidden !important; } /* grauer Rahmen innerhalb des Viewers */ .df-container .df-ui-wrapper, .df-container .df-book-wrapper, ._df_book .df-ui-wrapper, ._df_book .df-book-wrapper{ background:#ffffff !important; } /* Abstand zum Header */ .kas-pdf-topbar{ padding-top:25px !important; padding-bottom:16px !important; } .df-container, .dearflip-container, ._df_book{ margin-top:0px !important; } /* ============================================================ ROUND 68 (2026-10-04) - URSACHE GEFUNDEN Die Diagnose zeigt: der weisse Hintergrund des selbst lag vor dem Foto (Theme-Vorlage "Elementor Header & Footer" auf allen Seiten ausser Booking/Nav). Jetzt fest per CSS transparent - nur die FARBE, Hintergrundbilder bleiben erhalten (Booking). ============================================================ */ html body:not(.home):not(#_){ background-color:transparent !important; } html:has(> body:not(.home)):not(#_){ background-color:transparent !important; } /* ============================================================ ROUND 70 (2026-10-04) - FOTO DIREKT ALS BODY-HINTERGRUND Diagnose v69: auf Weather/Logbook ist ALLES transparent, die Foto-Ebenen (body::before und #kas-foto-bg, z-index -1) sind da - werden in der iOS-App aber nicht gezeichnet. Booking funktioniert, weil Elementor dort das Foto direkt als body-Hintergrundbild setzt ("+BILD" in der Diagnose). Genau diese Methode jetzt fuer alle Seiten ausser Home. Bewusst OHNE !important und mit niedriger Spezifitaet: Seiten mit eigenem Elementor-Hintergrund (Booking) behalten ihren. ============================================================ */ html body:not(.home){ background-image:url('https://app.kosovoaeroservices.com/wp-content/uploads/2026/08/IMG_6572-scaled.webp'); background-size:cover; background-position:center 70%; background-repeat:no-repeat; background-attachment:scroll; min-height:100vh; } /* ============================================================ ROUND 72 (2026-10-04) - URSACHE ENDGUELTIG Diagnose v71: IMG_6572.jpeg laedt in der App NICHT (Fehler), Booking nutzt IMG_6572-scaled.webp - und das laedt. Alle Verweise im Snippet zeigen jetzt auf IMG_6572-scaled.webp. Admin-Diagnose wieder aus (nur noch mit ?kasdebug=1). ============================================================ */ /* ============================================================ ROUND 73 (2026-10-04) - EIGENE SEITENFOTOS WIEDER SICHTBAR + SPEED - Die Foto-Ebenen body::before und #kas-foto-bg lagen VOR den eigenen Hintergrundbildern einzelner Seiten (Elementor) und haben sie verdeckt. Entfernt. Das Standardfoto kommt jetzt nur noch als body-Hintergrund mit niedriger Prioritaet (Runde 70): Seiten mit eigenem Elementor-Hintergrund behalten ihr Bild. - Speed: alle "*:has(...)"-Regeln entfernt (sehr rechenintensiv auf dem iPhone; die Wrapper sind ueber die festen Listen in Runde 18 und 51 schon transparent). Diagnose-Skript laeuft nur noch mit ?kasdebug=1. ============================================================ */ html body:not(.home):not(#_)::before{ content:none !important; display:none !important; } /* ============================================================ ROUND 74 (2026-10-04) - FOTO UEBERALL WIE BOOKING Bisher hing das Foto am body-Hintergrund und wurde auf die Seitenhoehe gestreckt - jede Seite zeigte dadurch einen anderen Ausschnitt. Jetzt liegt es als fest stehende Ebene in Bildschirm- groesse hinter allem (#kas-foto-bg): gleicher Ausschnitt auf allen Seiten, das Foto bleibt beim Scrollen stehen. Gleiches Bild wie Booking (IMG_6572-scaled.webp). Home bleibt unveraendert. ============================================================ */ html body:not(.home):not(#_){ background-image:none !important; background-color:transparent !important; } #kas-foto-bg{ position:fixed !important; top:0 !important; left:0 !important; width:100vw !important; height:100vh !important; height:100lvh !important; z-index:-1 !important; display:block !important; background-image:url('https://app.kosovoaeroservices.com/wp-content/uploads/2026/08/IMG_6572-scaled.webp') !important; background-size:cover !important; background-position:center center !important; background-repeat:no-repeat !important; background-color:#1b2436 !important; pointer-events:none !important; -webkit-transform:translate3d(0,0,0) !important; transform:translate3d(0,0,0) !important; } body.home #kas-foto-bg{ display:none !important; } /* ============================================================ ROUND 75 (2026-10-04) - FOTO-AUSSCHNITT + STATUSLEISTE - Hochformat (Handy): Foto groesser und nach unten geschoben, damit der dunkle Kondensstreifen oben im Himmel nicht mehr zu sehen ist. ANPASSEN: 150% = Zoom, 92% = wie weit nach unten (100% = ganz unten). - Querformat/Desktop: normales Cover. - App (Home-Bildschirm): Statusleiste durchsichtig, damit oben beim Scrollen das Foto statt einer weissen Leiste zu sehen ist. ============================================================ */ @media (orientation: portrait){ #kas-foto-bg{ /* ROUND 77: wieder der Wolken-Ausschnitt wie vorher, nur leicht gezoomt und hochgeschoben - der Kondensstreifen liegt jetzt hinter dem Header. ANPASSEN: 122% = Zoom, 100% = Position */ background-size:auto 122% !important; background-position:center 100% !important; } } @media (orientation: landscape){ #kas-foto-bg{ background-size:cover !important; background-position:center 70% !important; } } html.kas-standalone .kas-safe-top{ padding-top:env(safe-area-inset-top, 0px) !important; } /* ============================================================ ROUND 76 (2026-10-04) - HEADER BLEIBT OBEN STEHEN Der Header (Logo, Sprache, Menue) scrollt nicht mehr mit, sondern bleibt fest oben. Ein unsichtbarer Platzhalter in Header-Hoehe verhindert, dass der Inhalt darunter rutscht. In der App wird die WordPress-Adminleiste ausgeblendet (sie lag sonst unter dem Header). ============================================================ */ html body .kas-fixed-header:not(#_){ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; width:100% !important; z-index:99990 !important; transform:none !important; -webkit-transform:none !important; margin-top:0 !important; } #kas-header-spacer{ display:block; width:100%; pointer-events:none; } html.kas-standalone #wpadminbar{ display:none !important; } html.kas-standalone{ margin-top:0 !important; } /* ============================================================ ROUND 77 (2026-10-04) - PROFILBILD + SPRACHAUSWAHL BLEIBEN IM HEADER Das runde Profilbild (Login) und die Sprachauswahl sind eigene Elemente ausserhalb des Headers. Sie werden jetzt beim Laden erkannt (liegen im Header-Bereich) und mit dem Header fest oben gehalten - und liegen ueber dem Header, nicht darunter. ============================================================ */ .kas-pinned-top{ position:fixed !important; z-index:99995 !important; margin:0 !important; }