/* BMW-AZ / October 2026. Presentation layer over the original DLE theme.
   Advertising selectors, partner images and their source markup are untouched. */

:root {
  --maxw: 1240px;
  --bg0: #041325;
  --bg1: #092a50;
  --cyan: #39caff;
  --cyan-deep: #0089e8;
  --text: #edf5ff;
  --muted: #b5c9df;
  --muted-2: #8faac4;
}

html { color-scheme: dark; }
body {
  background:
    radial-gradient(ellipse at 48% 0, #103f69 0, transparent 48rem),
    linear-gradient(145deg, #041325, #06213f 60%, #082c50);
  background-attachment: fixed;
}
.wrap { padding-inline: 26px; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #83e2ff;
  outline-offset: 4px;
}

/* Masthead: real text over a lightweight photographic asset. */
.topbar { background: rgba(3, 17, 34, .94); border-bottom-color: #17476b; }
.topbar-inner { min-height: 52px; justify-content: space-between; }
.topnav a { font-size: 13px; font-weight: 600; min-height: 38px; display: inline-flex; align-items: center; }
.topnav a.active { border: 1px solid #2fbeff; box-shadow: inset 0 0 14px #0d5a87, 0 0 12px #0876b333; }
.topbar-signature { color: #9ebedb; font-size: 11px; letter-spacing: .6px; }
.topbar-signature span { color: var(--cyan); margin-inline: 8px; }
.mobile-jumps { display: none; }
#main-content, #user-panel { scroll-margin-top: 72px; }
header.masthead { padding: 22px 0 8px; }
.logo-bar {
  position: relative;
  isolation: isolate;
  min-height: 148px;
  padding: 16px 20px 16px 0;
  gap: 22px;
  background: #04162d;
  border: 1px solid #23648b;
  border-radius: 18px;
  box-shadow: 0 20px 60px #0005, inset 0 0 40px #1375bf22;
  animation: masthead-arrive .7s ease-out both;
}
.logo-bar:hover { border-color: #40c2fb; box-shadow: 0 20px 60px #0005, 0 0 28px #079edd22; }
.logo-car {
  position: absolute;
  z-index: -2;
  top: -20%;
  left: 0;
  height: 140%;
  width: auto;
  max-width: none;
  filter: none;
  pointer-events: none;
}
.logo-bar::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 28%, #04162d22 42%, #04162d55 72%, #04162d 100%);
}
.logo-bar::after {
  content: "";
  position: absolute;
  left: 23%; right: 4%; bottom: 10px;
  height: 2px;
  opacity: .7;
  background: linear-gradient(90deg, transparent, #36c8ff 12%, #1962b7 68%, #ee1942 83%, transparent);
  transform-origin: left;
  animation: masthead-line 1.1s .1s ease-out both;
}
.logo-word { margin-left: 23%; flex: 0 0 40%; min-width: 0; }
.lw-main { font-size: 52px; letter-spacing: -1.5px; text-shadow: 0 2px 5px #00132c, 0 0 26px #35c4f044; white-space: nowrap; }
.lw-dash { color: #f20e31; }
.lw-sub { font-size: 17px; margin-top: 6px; padding-top: 5px; border-color: #39caff66; white-space: nowrap; }
.lw-sub i { color: #f2f7ff; }
.lw-alt { display: flex; justify-content: center; align-items: center; font-size: clamp(14px, 1.3vw, 16px); font-weight: 750; letter-spacing: .2px; margin-top: 8px; padding-top: 7px; white-space: nowrap; color: #bdeeff; border-top-color: #49bded66; text-shadow: 0 0 10px #1ab9ff55; }
.lw-domain { display: inline-block; }
.lw-alt .sep { margin-inline: 7px; color: #41b6e8; opacity: .7; }
.logo-deco.d1-root { height: 104px !important; opacity: 1; mask-image: none; -webkit-mask-image: none; }
.logo-deco.d1-root .d1-glow { background: radial-gradient(ellipse at 45% 50%, #159aca2b, transparent 75%); }
.logo-deco.d1-root .d1-view { mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); -webkit-mask-image: linear-gradient(180deg, transparent, #000 8%, #000 92%, transparent); }
.logo-deco.d1-root .d1-list { padding: 0; }
.logo-deco.d1-root .d1-row { height: 22px; line-height: 22px; font-size: 12px; letter-spacing: 0; gap: 4px; padding-left: 6px; font-weight: 600; }
.logo-deco.d1-root .d1-hex { display: block; width: 104px; color: #9fc2d9; opacity: 1; font-size: 11px; }
.logo-deco.d1-root .d1-addr { width: 60px; color: #43c9f6; }
.logo-deco.d1-root .d1-asm { color: #e3f4ff; text-shadow: 0 0 9px #5fdcff33; }
.logo-deco.d1-root .d1-mn { color: #55dbff; }
.logo-deco.d1-root .d1-cm { color: #8eb2cb; }
.logo-deco.d1-root .d1-hot { background: linear-gradient(90deg, #ffb30020, transparent); }
.logo-deco.d1-root .d1-bp .d1-addr { color: #ff5375; }
.logo-deco.d1-root .d1-scan { opacity: .16; }

/* The original advertising slots retain their placement inside this grid. */
.content { grid-template-columns: minmax(0, 1fr) 316px; gap: 26px; padding-top: 30px; }
.blok-left { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.grid.paid, .grid.latest { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
/* DLE can add its own content wrapper. Non-card content always spans the row. */
#dle-content { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; min-width: 0; }
#dle-content > :not(.card) { grid-column: 1 / -1; min-width: 0; }
.blok-right { gap: 20px; }
/* CMS-injected center banners keep their original artwork and shrink on phones. */
.blok-left > center img, #dle-content > center img { max-width: 100%; height: auto; }
.hot-banner { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.sec-head { gap: 12px; margin: 9px 0 0; }
.sec-head h3 { font-size: 16px; letter-spacing: 1.7px; }
.sec-head .accent { width: 6px; height: 22px; }
.sec-head .rule { background: linear-gradient(90deg, #237aaa, #237aaa44); }

/* Image / category / title / calendar: matches the supplied card reference. */
.card {
  background: linear-gradient(150deg, #182f48, #102740);
  border: 1px solid #2a4863;
  border-radius: 16px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 7px 18px #00101f22;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.card::before { height: 3px; }
.card:hover { transform: translateY(-3px); border-color: #30bbf1; box-shadow: 0 14px 26px #0004, 0 0 18px #0699da12; }
.card:focus-within { border-color: #69d7ff; }
.card .thumb {
  height: auto;
  aspect-ratio: 1.95;
  display: block;
  padding: 10px 10px 0;
  border-bottom: 0;
  background: none;
}
.card .thumb > a {
  display: block;
  overflow: hidden;
  width: 100%; height: 100%;
  border-radius: 8px;
  background: #08172a;
}
.card .thumb-img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; border-radius: 7px; filter: none; }
.card:hover .thumb-img { transform: scale(1.025); }
.card-body { padding: 14px 15px 15px; gap: 11px; }
.card .cat { max-width: 100%; flex-wrap: wrap; font-size: 10px; letter-spacing: .25px; line-height: 1.45; padding: 4px 9px; border-color: #2d6886; background: #11648626; color: #37ccfc; }
.card .cat a { color: inherit; overflow-wrap: anywhere; }
.card h4 { font-size: 14px; line-height: 1.45; letter-spacing: -.15px; overflow-wrap: anywhere; }
.card h4 a { color: #edf4ff; }
.card .date { padding-top: 11px; border-top: 1px dashed #45617966; font-size: 11.5px; color: #8faac4; }
.card .ribbon-paid { top: 16px; right: 16px; padding: 4px 9px; font-size: 10px; box-shadow: 0 3px 12px #00132988; }

/* Feature and downloads; existing covers remain real publication images. */
.slider { background: #061a30; border-color: #24638b; box-shadow: 0 12px 28px #0003; overflow: clip; }
.slider, .slides { min-height: 350px; }
.slide { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 8px; padding: 40px 24px 72px; overflow: clip; }
.slide:first-child { opacity: 1; visibility: visible; }
.slider.is-ready .slide { opacity: 0; visibility: hidden; }
.slider.is-ready .slide.is-active { opacity: 1; visibility: visible; }
.slide-bg { opacity: .3; filter: blur(24px) saturate(1.2); }
.slide-shade { background: linear-gradient(180deg, #04172c33, #04142655 40%, #041426 85%); }
.slide-img { position: relative; top: auto; left: auto; transform: none; width: 100%; height: 100%; min-width: 0; min-height: 0; max-width: none; max-height: none; object-fit: contain; justify-self: center; border: 0; }
.slide-cap { position: relative; inset: auto; padding: 0; }
.slide-cap b { max-width: 100%; font-size: 18px; line-height: 1.3; }
.slide-cta { display: inline-flex; align-items: center; gap: 16px; margin-top: 8px; padding: 6px 15px; border-radius: 7px; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(#17bdff, #0086df); border: 1px solid #48cbff88; box-shadow: 0 5px 16px #0089e82b; }
.slide-nav { top: 90px; width: 38px; height: 38px; border-color: #31769e; }
.sl-thumbs { bottom: 16px; gap: 7px; flex-wrap: nowrap; }
.sl-thumb { flex: 1 1 0; max-width: 72px; min-width: 0; height: 46px; }
.badge-hot.on-slider { top: 15px; left: 15px; font-size: 10px; letter-spacing: .4px; }
.dl-widget .wbody { padding: 16px; justify-content: center; }
.dl-item { gap: 14px; padding-block: 14px; }
.dl-thumb { width: 94px; height: 68px; border-radius: 8px; }
.dl-info b { font-size: 12.5px; line-height: 1.45; }
.dl-info small { font-size: 11px; line-height: 1.5; }

/* Limit panel changes to functional widgets; partner/donation panels stay original. */
.widget:not(.friends):not(.donate) { background: linear-gradient(135deg, #123657, #0d2b4a); border-color: #275275; box-shadow: 0 8px 24px #0002; }
.widget:not(.friends):not(.donate) .whead { font-size: 12px; padding: 14px 16px; background: linear-gradient(#1c496555, transparent); border-bottom-color: #32618277; letter-spacing: 1px; }
.catlist li a { font-size: 12px; font-weight: 500; letter-spacing: 0; text-transform: none; padding: 10px 8px; line-height: 1.5; }
.catlist li a::before { width: 6px; height: 6px; border-radius: 2px; background: transparent; border: 1px solid #75adce; }
.catlist li a::after { content: "\203a"; margin-left: auto; color: #8baac4; font-size: 17px; }
.catlist li a:hover { padding-left: 12px; }
.catlist .txt { min-width: 0; overflow-wrap: anywhere; }
.up-identity { display: flex; gap: 14px; align-items: center; }
.up-avatar { flex: 0 0 60px; width: 60px; height: 60px; display: grid; place-items: center; border: 2px solid #63d4ff; border-radius: 50%; color: #8ad7ff; background: radial-gradient(circle at 35% 20%, #3885b9, #0c2b49 70%); box-shadow: inset 0 0 12px #3ebefa33; }
.up-hello { min-width: 0; }
.up-hello > span { display: block; font-size: 11px; color: #a7c2da; margin-bottom: 4px; }
.up-hello > b { display: block; font-size: 17px; color: #fff; overflow-wrap: anywhere; }
.up-links a { display: flex; justify-content: space-between; padding: 10px 2px; }
.up-logout { font-size: 12px; padding: 9px; }
.login-wrap .field label { color: #a6bfd6; font-size: 10px; }
.login-wrap input.f_input { min-height: 44px; background: #051b33aa; border-color: #325674; }
.login-wrap .btn-primary { min-height: 42px; color: white; border: 1px solid #42c3fa66; background: linear-gradient(#12bcfc, #008be4); box-shadow: 0 6px 18px #0098e826; }
.login-wrap .btn-primary:hover { color: white; box-shadow: 0 6px 20px #00a3f14d; }
.navigation { margin-top: 12px; }
.navigation a { border-color: #285171; background: #0e2c49; }

.footer { position: relative; border-top-color: #176092; background: linear-gradient(115deg, #06192e, #0a2b49); }
.footer::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, #37b9e6 35%, #215dc1 58%, #e91637 70%, transparent); }
.footer-inner { padding: 30px; }
.footer-inner p { font-size: 12px; line-height: 1.7; }
.footer-inner p > a { color: #fff; font-weight: 800; }
.full-text { overflow-wrap: anywhere; }
.full-text iframe, .full-text video { max-width: 100%; }

@keyframes masthead-arrive { from { transform: translateY(5px); } to { transform: none; } }
@keyframes masthead-line { from { transform: scaleX(0); opacity: 0; } to { transform: scaleX(1); opacity: .7; } }

/* Compact desktops/tablets retain complete cards and usable sidebar widths. */
@media (max-width: 1120px) {
  .wrap { padding-inline: 22px; }
  .content { grid-template-columns: minmax(0, 1fr) 280px; gap: 20px; }
  .blok-left, .grid.paid, .grid.latest, #dle-content { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .logo-bar { min-height: 148px; }
  .logo-word { margin-left: 25%; flex-basis: 48%; }
  .lw-main { font-size: 50px; }
  .lw-sub { font-size: 16px; }
  .lw-alt { font-size: clamp(12px, 1.25vw, 14px); }
  .logo-deco.d1-root .d1-addr { display: none; }
  .logo-deco.d1-root .d1-hex { display: none; }
  .logo-deco.d1-root .d1-cm { display: none; }
  .hot-banner { grid-template-columns: minmax(0, 1fr); }
  .dl-widget .wbody { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .dl-item { flex-direction: column; align-items: flex-start; border-bottom: 0; }
  .dl-thumb { width: 72px; height: 55px; }
  .slider, .slides { min-height: 350px; }
}
@media (max-width: 900px) {
  .content { grid-template-columns: minmax(0, 1fr); }
  .blok-right { order: 2; }
  .logo-bar { min-height: 148px; padding-right: 24px; }
  .logo-deco.d1-root { display: none; }
  .logo-word { margin-left: 31%; flex-basis: 66%; }
  .lw-main { font-size: 46px; }
  .lw-sub { font-size: clamp(12px, 1.9vw, 17px); }
  .lw-alt { font-size: 11px; }
  .lw-alt .sep { margin-inline: 3px; }
  .topbar-signature { display: none; }
}
@media (max-width: 620px) {
  body { background-attachment: scroll; }
  .wrap { padding-inline: 14px; }
  .topbar-inner { min-height: 50px; }
  .topnav { width: 100%; justify-content: space-between; gap: 3px; }
  .topnav a { padding: 8px 12px; font-size: 12px; }
  header.masthead { padding: 14px 0 0; }
  .logo-bar { min-height: 310px; padding: 0; display: block; border-radius: 14px; }
  .logo-car { height: 250px; top: -16px; left: calc(50% - 145px); }
  .logo-bar::before { background: linear-gradient(0deg, #04162d 4%, #04162dcc 24%, transparent 52%); }
  .logo-bar::after { left: 10%; right: 10%; bottom: 12px; }
  .logo-word { position: absolute; left: 0; bottom: 28px; width: 100%; margin: 0; padding-inline: 10px; }
  .lw-main { font-size: 48px; letter-spacing: -2px; }
  .lw-sub { font-size: 13px; margin-top: 7px; padding-top: 7px; }
  .lw-sub i { margin-right: 7px; }
  .lw-alt { max-width: 100%; flex-wrap: wrap; gap: 4px 7px; font-size: 11px; letter-spacing: 0; margin-top: 8px; padding-top: 6px; }
  .lw-domain { padding: 3px 5px; border: 1px solid #47a9d744; border-radius: 4px; background: #123a5755; }
  .lw-alt .sep { display: none; }
  .content { padding-top: 18px; gap: 24px; }
  .mobile-jumps { display: flex; gap: 10px; margin-top: 14px; }
  .mobile-jumps a { flex: 1; display: flex; justify-content: space-between; align-items: center; gap: 6px; padding: 11px 10px; border: 1px solid #2a587b; border-radius: 8px; background: #0d2b47; font-size: 11px; font-weight: 600; color: #c7e6fa; }
  .blok-left, .grid.paid, .grid.latest, #dle-content { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .hot-banner { gap: 16px; }
  .slider, .slides { min-height: 420px; }
  .slide { padding: 48px 20px 79px; gap: 12px; }
  .slide-cap b { font-size: 17px; line-height: 1.4; }
  .slide-cta { font-size: 12px; min-height: 40px; padding: 8px 17px; margin-top: 10px; }
  .slide-nav { top: 119px; width: 36px; height: 36px; }
  .slide-nav.nav-prev { left: 10px; }
  .slide-nav.nav-next { right: 10px; }
  .sl-thumbs { gap: 6px; padding-inline: 14px; }
  .sl-thumb { height: 44px; }
  .sec-head h3 { font-size: 15px; }
  .card .thumb { aspect-ratio: 1.95; padding: 10px 10px 0; }
  .card-body { padding: 15px 16px 16px; gap: 11px; }
  .card .cat { font-size: 10.5px; }
  .card h4 { font-size: 16px; }
  .card .date { font-size: 12px; }
  .card:hover { transform: none; }
  .dl-widget .wbody { display: flex; flex-direction: column; gap: 0; padding: 0 16px; }
  .dl-item { flex-direction: row; align-items: center; gap: 14px; padding-block: 16px; border-bottom: 1px solid var(--border-soft); }
  .dl-thumb { width: 84px; height: 64px; }
  .dl-info b { font-size: 14px; }
  .dl-info small { font-size: 12px; }
  .catlist li a { padding-block: 12px; font-size: 13px; }
  .login-wrap input.f_input { font-size: 16px; }
  .login-wrap .btn-primary { min-height: 46px; }
  .navigation { gap: 6px; }
  .navigation a, .navigation span { min-width: 36px; height: 40px; padding-inline: 10px; font-size: 12px; }
  .footer-inner { padding: 24px 16px; gap: 14px; }
  .footer-inner .fnav { width: 100%; justify-content: space-between; }
  .full-text { padding: 17px; font-size: 15px; }
  .fn-head h1 { font-size: 24px; }
  .fn-meta { gap: 12px; }
  .fn-download { padding: 14px; gap: 12px; }
  .full-text .fn-download a.dl-btn { margin: 4px 0 0; width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .logo-bar, .logo-bar::after, .logo-deco .d1-scroll, .logo-deco .d1-cur { animation: none !important; }
  .card, .thumb-img, .slide, .slide-nav, .sl-thumb, .slide-cta, .login-wrap .btn-primary { transition: none !important; }
  .card:hover, .card:hover .thumb-img, .login-wrap .btn-primary:hover { transform: none; }
}