/* ================================================================
   LUSTVIERTEL — TAGSCHICHT
   The district with the shutters open.

   Germany's flag is the easy one: three equal stripes, black on top,
   then red, then gold. No half-and-quarters to fake. So the page runs
   in that order down the scroll — gold as the field you stand on,
   black doing the structure and every word you read, red reserved for
   the one thing on screen that wants your attention. The colours
   aren't decoration sitting on a dark room, they ARE the room.

   Black can't be the ground here — a black page is just the night
   version. So the stripe order is honoured in the ribbon and in the
   section rhythm, and the field takes gold.

   Loaded after casa.css. Everything here is an override; deleting
   this one <link> puts the night version back untouched.
   ================================================================ */

:root{
  /* the field */
  --sol:#e8c10c;            /* plaster gold, the ground */
  --sol-alto:#ffd93d;       /* sunlit edge */
  --sol-hondo:#b8960a;      /* the ochre in shadow */
  --crema:#fdf6e0;          /* card stock */
  --crema2:#f7ead0;
  --tinta:#0b0b0f;          /* flag black — everything readable */
  --azul:#16161c;           /* the black stripe, does the structure */
  --azul-alto:#33333d;
  --rojo:#dd0000;           /* flag red, does the signal */
  --rojo-alto:#ff2b2b;

  /* flag order, top to bottom: black, red, gold — equal thirds */
  --cinta:linear-gradient(90deg,var(--azul) 0 33.33%,var(--rojo) 33.33% 66.66%,var(--sol) 66.66% 100%);

  /* --- flip the inherited token set ------------------------------ */
  --wine:var(--sol); --wine2:var(--sol); --bg:var(--sol);
  --ink:var(--crema); --ink2:var(--crema2);
  --text:var(--tinta);
  --muted:rgba(11,11,15,.72);
  --muted2:rgba(11,11,15,.48);
  --line:rgba(11,11,15,.18);
  --line-strong:rgba(11,11,15,.34);
  --gold:var(--azul);       /* the "accent" slot now carries black */
  --rouge:var(--rojo); --rouge2:var(--rojo-alto);
  --red:var(--rojo); --blue:var(--azul);
  --blush:var(--sol-alto);
  --accent:var(--rojo); --accent-2:var(--azul);
  --good:var(--azul); --warn:var(--rojo);
  --glass:rgba(253,246,224,.78); --glass-2:rgba(253,246,224,.9);
  --glow:rgba(221,0,0,.22); --glow-blue:rgba(22,22,28,.18);
  --bg-elev:var(--crema); --border:var(--line);

  /* casa.css keeps calling these; point them somewhere legible */
  --ambar:var(--sol-hondo); --ambar-alto:var(--sol-hondo);
  --carmin:var(--rojo); --carmin-alto:var(--rojo-alto);
  --cobalto:var(--azul); --cobalto-hondo:var(--azul);
  --noche:var(--tinta);
}

body{background:var(--sol) !important;color:var(--tinta) !important}

/* ---------------- the field --------------------------------------
   Sun coming in high and left, plaster soaking it up. No blur-blobs:
   this is a wall, not a nightclub. */
body.lqx::before{
  content:'';position:fixed;inset:0;z-index:-3;
  background:
    radial-gradient(120% 70% at 18% -10%,rgba(255,242,199,.85),transparent 62%),
    radial-gradient(100% 60% at 88% 8%,rgba(255,232,163,.55),transparent 60%),
    linear-gradient(180deg,var(--sol-alto) 0%,var(--sol) 34%,var(--sol-hondo) 100%);
  filter:none;animation:none;
}
/* plaster tooth — a fine diagonal grain in ink, not light */
body.lqx::after{
  content:'';position:fixed;inset:0;z-index:-2;pointer-events:none;
  background-image:repeating-linear-gradient(58deg,rgba(11,11,15,.055) 0 1px,transparent 1px 26px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.5),rgba(0,0,0,.14) 60%,rgba(0,0,0,.3));
  animation:none;
}
.orbs,.embers,.grain{display:none !important}

/* ---------------- chrome ------------------------------------------ */
/* la barra va fija arriba (viene así del armazón) y la habíamos dejado
   transparente. Al bajar, los titulares en Anton — que son enormes y
   rojos — pasaban por debajo y se leían a través de la barra: parecía
   que el nombre del sitio estaba roto. Ahora la barra es crema opaca
   con desenfoque, igual que ya estaba en el teléfono. */
.nav{
  background:rgb(253,246,224);
  box-shadow:0 1px 0 rgba(11,11,15,.10), 0 10px 28px rgba(120,84,10,.10);
}
.brand span{color:var(--tinta)}
.brand .viertel-block{filter:none}
.pill{
  background:rgba(253,246,224,.86) !important;
  border:1px solid rgba(11,11,15,.18) !important;
}
.pill a{color:var(--tinta) !important}
.pill a + a{border-left:1px solid rgba(11,11,15,.14)}
.pill a:hover{background:rgba(22,22,28,.12) !important}
.nav-cta{
  background:var(--rojo) !important;color:#fff !important;
  border-bottom:2px solid var(--azul) !important;
}
.nav-burger span{background:var(--tinta)}
.nav-mobile{background:var(--crema) !important}
.nav-mobile a{color:var(--tinta) !important}

/* ---------------- type on a field --------------------------------- */
h1,h2,h3,h4,.hero-h1,.feat-h2,.cta-h2,.show-h2,.ls-disp-line{color:var(--tinta) !important}
.hero-serif{color:var(--rojo) !important}
.hero-h1 .line:not(.hero-serif){
  color:var(--tinta) !important;
  text-shadow:0 2px 0 rgba(255,246,214,.55);   /* letterpress, not glow */
}
.eyebrow{color:var(--azul) !important}
.eyebrow::before{background:linear-gradient(90deg,var(--rojo),var(--azul)) !important}
.lede,.muted,p{color:inherit}
.lede,.hero-lede{color:rgba(11,11,15,.74) !important}
a{color:var(--azul)}
a:hover{color:var(--rojo)}
.go{color:var(--azul) !important}
.shimmer .word,.shimmer-txt{
  background:linear-gradient(100deg,var(--rojo) 0%,var(--sol-hondo) 45%,var(--azul) 100%) !important;
  -webkit-background-clip:text !important;background-clip:text !important;
}

/* ---------------- surfaces ---------------------------------------- */
.card,.glass,.feat-card,.step-card,.cat-card,.ls-verdict,.casa-aparte{
  background:var(--crema) !important;
  border:1px solid rgba(11,11,15,.14) !important;
  box-shadow:0 10px 0 -4px rgba(11,11,15,.10),0 18px 40px rgba(120,84,10,.18) !important;
}
.card:hover,.feat-card:hover,.cat-card:hover{
  box-shadow:0 14px 0 -4px rgba(221,0,0,.22),0 22px 50px rgba(120,84,10,.22) !important;
}
.ls-verdict{border-left:4px solid var(--azul) !important}
.casa-aparte{border-left:4px solid var(--azul) !important}
.casa-nota{color:var(--rojo);border-left-color:var(--rojo)}
.feat-glow,.cta-glow,.ls-fan-sec::before{display:none !important}
.disclosure{background:rgba(221,0,0,.07) !important;border-color:rgba(11,11,15,.16) !important;
  border-left:3px solid var(--rojo) !important;color:rgba(11,11,15,.78) !important}

/* buttons keep the hard slab, restated for the light field */
.btn{background:var(--rojo) !important;color:#fff !important;border-bottom:3px solid var(--azul) !important}
.btn:hover{background:var(--rojo-alto) !important}
.btn .arrow{background:#fff !important;color:var(--rojo) !important}
.btn-ghost{background:transparent !important;color:var(--tinta) !important;
  border:1px solid rgba(11,11,15,.3) !important;border-bottom:3px solid var(--azul) !important}
.btn-ghost:hover{background:rgba(22,22,28,.10) !important}
.btn-ghost .arrow{background:var(--tinta) !important;color:var(--crema) !important}

.badge.good{background:rgba(22,22,28,.12) !important;color:var(--azul) !important;border-left:3px solid var(--azul)}
.badge.warn{background:rgba(221,0,0,.12) !important;color:var(--rojo) !important;border-left:3px solid var(--rojo)}
.rank-pill{color:var(--rojo) !important}
.avatar,.cat-ic,.ls-hc-ic{background:linear-gradient(135deg,var(--azul),var(--rojo)) !important;color:#fff !important;border:none !important}
.stat-num{color:var(--rojo) !important}
.stat + .stat::before{background:rgba(11,11,15,.18)}
.step-n{opacity:.16 !important;background:linear-gradient(160deg,var(--azul),var(--rojo)) !important}
.faq{border-top:1px solid rgba(11,11,15,.2)}
.faq h3,.faq-item summary{color:var(--tinta) !important}
.faq-item{border-bottom:1px solid rgba(11,11,15,.16)}
.faq-item summary:hover{color:var(--rojo) !important}
.faq-ic{color:var(--azul) !important;border:1px solid rgba(11,11,15,.28) !important}
.faq-item[open] .faq-ic{background:rgba(22,22,28,.14) !important}
.ls-author{background:var(--crema) !important;border-left:4px solid var(--rojo) !important}
.aav{background:var(--azul) !important;color:#fff !important}
.pull{border-left:3px solid var(--rojo)}
hr{border-top-color:rgba(11,11,15,.18)}
::selection{background:var(--azul);color:#fff}

/* the light-section blocks were already cream — just fix their accents */
.ls-lead b,.ls-lead strong{color:var(--rojo)}
.ls-scan a{color:var(--azul);text-decoration-color:rgba(22,22,28,.4)}

/* ---------------- LA BANDERA: the page in flag proportions --------
   Yellow has had the top half of the scroll. Now blue, then red. */
.marquee-sec{
  background:var(--azul) !important;border:none !important;
  padding:26px 0 !important;margin-top:0 !important;
}
.marquee-item{color:rgba(255,255,255,.92) !important}
.mq-dot,.ls-band-row .mq-dot{color:var(--sol-alto) !important}

.ls-band{background:var(--azul) !important;border:none !important}
.ls-band-row .marquee-item{color:rgba(255,255,255,.9) !important}

/* the full-bleed slot is the red quarter — no photo, just the field */
.ls-fullbleed{background:var(--rojo) !important}
.ls-fb-media{background-image:none !important;background:var(--rojo) !important}
.ls-fb-scrim,.ls-fb-overlay{background:none !important}
.ls-fb-word{color:#fff !important}
.ls-fb-bubble{background:var(--sol) !important;color:var(--tinta) !important}

/* hook bands: the flag laid down flat */
.lq-hook{
  background:linear-gradient(100deg,var(--sol) 0 42%,var(--azul) 42% 71%,var(--rojo) 71% 100%) !important;
  box-shadow:0 18px 50px rgba(120,84,10,.28) !important;
}
.lq-hook--alt{
  background:linear-gradient(100deg,var(--rojo) 0 29%,var(--azul) 29% 50%,var(--sol) 50% 100%) !important;
}
.lq-hook::before{background:repeating-linear-gradient(-45deg,rgba(255,255,255,.12) 0 1px,transparent 1px 18px)}
.lq-hook::after{color:rgba(11,11,15,.12)}
.lq-hook-text{color:#fff !important;text-shadow:0 3px 14px rgba(11,11,15,.35) !important}

.cta-band{
  background:var(--crema) !important;border:1px solid rgba(11,11,15,.16) !important;
  border-bottom:6px solid var(--rojo) !important;
}

/* footer sits on the red, the way the flag ends */
.site-footer{background:var(--rojo) !important;border-top:none !important;color:#fff}
.site-footer::before{background:var(--azul);height:6px;opacity:1}
.site-footer .disclosure{background:rgba(255,255,255,.10) !important;color:rgba(255,255,255,.92) !important;
  border-color:rgba(255,255,255,.25) !important;border-left:3px solid var(--sol) !important}
.site-footer .foot-nav a{color:rgba(255,255,255,.92) !important}
.site-footer .foot-nav a:hover{color:var(--sol-alto) !important}
.site-footer .muted{color:rgba(255,255,255,.72) !important}

/* the age gate opens onto the field, not a black void */
#age-gate{background:rgba(232,193,12,.94) !important;backdrop-filter:blur(6px)}
.ag-box{background:var(--crema) !important;border:1px solid rgba(11,11,15,.2) !important;
  border-bottom:6px solid var(--rojo) !important;box-shadow:0 24px 60px rgba(120,84,10,.35) !important}
.ag-h{color:var(--tinta) !important;font-family:var(--anton);text-transform:uppercase;
  font-size:1.9rem;line-height:.95;margin:0 0 12px}
.ag-leave{color:rgba(11,11,15,.6) !important}

/* card fan reads as slides on a lightbox — give it a white mount */
.card-band .fan-card,.fan-card{box-shadow:0 14px 34px rgba(120,84,10,.34) !important}

@media (prefers-reduced-motion:reduce){body.lqx::before,body.lqx::after{animation:none}}

/* the shimmer had a light stop in the middle, which vanished on the
   field. On the yellow it runs red into blue and never goes pale. */
.shimmer .word,.shimmer-txt,.hero-serif,.serif,.ls-fb-word{
  background:linear-gradient(100deg,var(--rojo) 0%,#b30000 38%,var(--azul) 74%,var(--rojo) 100%) !important;
  background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
}
.ls-fb-word{background:none !important;-webkit-text-fill-color:#fff !important;color:#fff !important}

/* ---- remates del día -------------------------------------------- */
/* the light band still had a pale stop in the middle, left over from the
   gold divider. On the field it read as a hole. Solid blue, flag order. */
.ls-band-inner{
  background:linear-gradient(90deg,var(--azul) 0 62%,var(--azul-alto)) !important;
  box-shadow:0 14px 40px rgba(120,84,10,.28) !important;
}

/* category cards: the whole card is an <a>, so the blurb was inheriting
   link colour. Body copy is ink, headings are ink, the arrow is red. */
.cat-body h3{color:var(--tinta) !important}
.cat-body p,.cat-body .lq-body{color:rgba(11,11,15,.72) !important}
.cat-body .go{color:var(--rojo) !important;font-weight:700}
.cat-thumb::after{background:linear-gradient(180deg,transparent 42%,rgba(11,11,15,.42)) !important}
.cat-ic{background:rgba(253,246,224,.9) !important;border:1px solid rgba(11,11,15,.18) !important;
  color:var(--azul) !important;border-radius:3px !important}

/* the floating handle was the last capsule on the page */
.ls-fb-bubble{border-radius:2px !important;font-weight:700;letter-spacing:.02em}

/* three-word Anton heads were kissing at .93 */
.cta-h2,.feat-h2{line-height:1.0 !important}

/* ---- teléfono: la barra seguía siendo de noche -------------------- */
@media (max-width:900px){
  header.nav{
    background:rgb(253,246,224) !important;
    border-bottom:1px solid rgba(11,11,15,.16) !important;
  }
  header.nav .brand{color:var(--tinta) !important}
  .nav-burger{
    background:var(--azul) !important;border:none !important;border-radius:2px !important;
  }
  .nav-burger span{background:#fff !important}
  .nav-mobile{
    background:var(--crema) !important;border:1px solid rgba(11,11,15,.18) !important;
    border-radius:3px !important;box-shadow:0 22px 50px rgba(120,84,10,.34) !important;
  }
  .nav-mobile a{color:var(--tinta) !important;border-radius:2px !important}
  .nav-mobile a:hover,.nav-mobile a:focus{background:rgba(22,22,28,.10) !important}
  .nav-mobile .nm-cta{background:var(--rojo) !important;color:#fff !important;border-radius:2px !important}
}

/* ---- la sección de puertas seguía siendo de noche ----------------
   Era un hueco oscuro en el campo amarillo y el epígrafe azul
   encima del fondo oscuro casi no se leía. Ahora es una franja
   crema sobre el amarillo, con las puertas en los tres colores. */
.lq-lanes{
  background:linear-gradient(180deg,rgba(253,246,224,.96),rgba(247,232,196,.96)) !important;
  border-top:6px solid var(--azul) !important;
  border-bottom:6px solid var(--rojo) !important;
}
.lq-lanes .eyebrow{color:var(--rojo) !important;opacity:1}
.lq-lanes-list{border-top:1px solid rgba(11,11,15,.20) !important}
.lq-lanes-list li{border-bottom:1px solid rgba(11,11,15,.20) !important}
.lq-lanes-list a:hover{
  color:var(--tinta) !important;
  background:linear-gradient(90deg,rgba(11,11,15,.06),transparent) !important;
}

/* escenarios sobre el campo */
.cl-esc{border-top-color:var(--tinta) !important}
.cl-esc-row{border-bottom-color:rgba(11,11,15,.20) !important}
.cl-esc-n{color:var(--rojo) !important}
.cl-esc-q{color:var(--tinta) !important}
.cl-esc-row p{color:rgba(11,11,15,.82) !important}
.cl-esc-row .yesi{color:var(--azul) !important}
.cl-esc-go{color:var(--rojo) !important;border-bottom-color:var(--rojo) !important}
.cl-esc-row a[target="_blank"]{color:var(--azul) !important;text-decoration:underline;
  text-underline-offset:3px;text-decoration-thickness:1px}

/* las cuatro puertas sobre crema: el amarillo y el celeste no se leían */
.lq-lanes-list a{color:var(--azul) !important}
.lq-lanes-list li:nth-child(2) a,
.lq-lanes-list li:nth-child(4) a{color:var(--rojo) !important}
.lq-lanes-list a span{color:inherit !important}

/* la caja del autor quedaba en gris de noche sobre crema */
.ls-author{background:rgba(253,246,224,.72) !important;border:1px solid rgba(11,11,15,.18) !important;
  border-left:5px solid var(--rojo) !important;border-radius:3px !important}
.ls-author p{color:rgba(11,11,15,.82) !important}
.ls-author .aname{color:var(--tinta) !important;font-weight:800}
.ls-author .aav{background:var(--azul) !important;color:#fff !important;border-radius:3px !important}
.ls-author a{color:var(--rojo) !important;font-weight:700}

/* método y correo sobre crema: el espinazo y las hairlines eran blancos */
.cl-met-wrap{border-left-color:rgba(11,11,15,.22) !important}
.cl-met + .cl-met{border-top-color:rgba(11,11,15,.16) !important}
.cl-met-n{background:var(--azul) !important;color:var(--crema) !important}
.cl-met h3{color:var(--tinta) !important}
.cl-met p{color:rgba(11,11,15,.82) !important}
.cl-mail a{color:var(--azul) !important;border-bottom-color:var(--rojo) !important}
.cl-mail a:hover{color:var(--rojo) !important}

/* --- hubs sobre crema: las hairlines blancas y los ámbar no se leen --- */
.cl-nota{border-left-color:var(--rojo) !important;color:rgba(11,11,15,.86) !important}

.cl-tabla th,.cl-tabla td{border-bottom-color:rgba(11,11,15,.16) !important}
.cl-tabla thead th{background:var(--azul) !important;color:var(--crema) !important;
  border-bottom-color:var(--rojo) !important}
.cl-tabla tbody th{color:var(--azul) !important}
.cl-tabla tbody td{color:rgba(11,11,15,.84) !important}
.cl-tabla tbody tr:nth-child(even){background:rgba(11,11,15,.045) !important}

.cl-fichas{border-top-color:var(--rojo) !important}
.cl-ficha{border-bottom-color:rgba(11,11,15,.16) !important}
.cl-ficha + .cl-ficha{border-left-color:rgba(11,11,15,.16) !important}
.page .narrow .cl-ficha h3{color:var(--azul) !important}
.cl-ficha p{color:rgba(11,11,15,.84) !important}

.cl-filtro-item{border-top-color:rgba(11,11,15,.18) !important}
.cl-filtro-item:last-child{border-bottom-color:rgba(11,11,15,.18) !important}
.cl-filtro-q{color:var(--tinta) !important}
.cl-filtro-q::before{color:var(--rojo) !important}
.cl-filtro-a{color:rgba(11,11,15,.84) !important}

.cl-cat{border-bottom-color:rgba(11,11,15,.16) !important}
.cl-cat-n{color:var(--azul) !important;opacity:1 !important}
.cl-cat p{color:rgba(11,11,15,.84) !important}

/* --- posiciones y ranking sobre crema --- */
.cl-pos{border-top-color:rgba(11,11,15,.16) !important}
.cl-pos:last-child{border-bottom-color:rgba(11,11,15,.16) !important}
.page .narrow .cl-pos h3{color:var(--tinta) !important}
.cl-pos-que{color:var(--azul) !important}
.cl-pos-dl dt{color:var(--rojo) !important;border-left-color:var(--rojo) !important}
.cl-pos-dl dd{color:rgba(11,11,15,.84) !important}

.cl-rk-wrap{border-top-color:var(--rojo) !important}
.cl-rk{border-bottom-color:rgba(11,11,15,.16) !important}
.cl-rk-n{color:var(--azul) !important}
.cl-rk-cat a{color:var(--rojo) !important;border-bottom-color:rgba(221,0,0,.45) !important}
.cl-rk-cat a:hover{color:var(--tinta) !important;border-bottom-color:var(--tinta) !important}
.cl-rk-ver{color:rgba(11,11,15,.86) !important}
.cl-rk-para,.cl-rk-pero{color:rgba(11,11,15,.84) !important}
.cl-rk-para strong{color:var(--azul) !important}
.cl-rk-pero{border-left-color:var(--rojo) !important}
.cl-rk-pero strong{color:var(--rojo) !important}

/* --- baraja del hero y flechita sobre crema --- */
.hd-face{box-shadow:0 18px 40px rgba(11,11,15,.28), 0 0 0 1px rgba(11,11,15,.34) !important}
.hd-card:hover .hd-face,.hd-card:focus-visible .hd-face{
  box-shadow:0 26px 56px rgba(11,11,15,.34), 0 0 0 2px var(--tinta) !important;
}
/* el nombre va siempre encima de la carta, sobre la banda oscura del
   pie. Blanco en todos los tamaños. Antes, en teléfono, el rótulo
   colgaba debajo de la carta sobre la crema y se pintaba de tinta;
   ese rótulo suelto ya no existe y la tinta quedó ilegible sobre la
   banda. */
.hd-tit{color:#fff !important}
.hd-card:hover .hd-tit,.hd-card:focus-visible .hd-tit{color:#fff !important}
.hd-card:focus-visible .hd-face{outline-color:var(--tinta) !important}
.hs-txt{color:var(--azul) !important}
.hs-rail{background:linear-gradient(180deg, rgba(22,22,28,.5), rgba(22,22,28,0)) !important}
.hs-dot{background:var(--azul) !important;box-shadow:0 0 10px rgba(22,22,28,.55) !important}
.hs-chev{border-right-color:var(--rojo) !important;border-bottom-color:var(--rojo) !important}
.cl-tabla--gastos tfoot th,.cl-tabla--gastos tfoot td{
  background:rgba(11,11,15,.07) !important;color:var(--azul) !important}
.cl-regla{
  background:linear-gradient(180deg,rgba(221,0,0,.09),rgba(255,255,255,.32)) !important;
  box-shadow:8px 8px 0 rgba(11,11,15,.16) !important}
.cl-regla-frase{color:var(--rojo,#dd0000) !important}
.cl-regla p{color:rgba(11,11,15,.88) !important}
.cl-regla-firma{color:rgba(11,11,15,.6) !important;border-top-color:rgba(11,11,15,.18) !important}

/* ==================================================================
   LEGIBILIDAD DE DÍA — se estaba pintando blanco sobre amarillo.
   lqx.css pone TODOS los párrafos de .narrow en blanco porque fue
   escrito para el fondo de noche, y esa regla es más específica que
   el `p{color:inherit}` de arriba, así que ganaba. Sobre el campo
   ámbar el resultado era texto casi invisible en todas las páginas
   de reseña. Aquí vuelve la tinta.

   La excepción es a propósito: el texto que va ENCIMA de una foto
   (.cl-franja, .cl-edit) sigue en claro, porque ahí el fondo no es
   el amarillo sino la imagen.
   ================================================================== */
.lqx .page .narrow p,
.lqx .page .narrow li,
.lqx .page .narrow dd,
.lqx .page .narrow .rev-sec p,
.lqx .page .narrow .rev-sec li{color:rgba(11,11,15,.88) !important}
.lqx .page .narrow strong,
.lqx .page .narrow b,
.lqx .page .narrow h4{color:var(--tinta) !important}
.lqx .page .narrow em{color:inherit !important}

.ls-byline,.ls-updated{color:rgba(11,11,15,.72) !important}
.ls-byline a{color:var(--azul) !important}
.ls-crumb a{color:rgba(11,11,15,.70) !important}
.ls-crumb span{color:rgba(11,11,15,.45) !important}

/* Nur was WIRKLICH auf einem Foto liegt, wird hell. .cl-franja liegt auf
   einem Foto — .cl-edit nicht: dessen Textspalte sitzt auf der cremefarbenen
   Tafel. Die stand hier faelschlich mit drin und war dadurch weiss auf Creme,
   also praktisch unsichtbar (1,08:1). */
.lqx .page .narrow .cl-franja p,
.lqx .page .narrow .cl-franja span,
.lqx .page .narrow .cl-franja strong{color:#fff !important}
.lqx .page .narrow .cl-edit .cl-ed-txt p,
.lqx .page .narrow .cl-edit .cl-ed-txt li{color:rgba(11,11,15,.88) !important}
.lqx .page .narrow .cl-edit .cl-ed-txt strong{color:var(--tinta) !important}
.cl-edit p.cl-ed-ojo{color:var(--rojo) !important}
.cl-edit .cl-ed-h{color:var(--tinta) !important}
.cl-edit .cl-ed-pie{color:rgba(11,11,15,.66) !important}

/* Breadcrumb: die aktuelle Seite war Hellgold auf Gold. */
.ls-crumb{color:rgba(11,11,15,.55) !important}
.ls-crumb span,.ls-crumb b,.ls-crumb strong,
.ls-crumb [aria-current]{color:rgba(11,11,15,.60) !important}
.lqx .page .narrow .cl-regla p{color:rgba(11,11,15,.88) !important}
.lqx .page .narrow .btn,
.lqx .page .narrow .btn strong{color:#fff !important}

/* tarjetas de tabla en móvil, en versión de día */
@media (max-width:760px){
  .cl-tabla tbody tr,.cl-tabla tfoot tr{
    background:var(--crema) !important;
    border-color:var(--rojo) !important;
    box-shadow:5px 5px 0 rgba(11,11,15,.14) !important}
  .cl-tabla tbody tr:nth-child(even){background:var(--crema) !important}
  .cl-tabla tbody th,.cl-tabla tfoot th{
    background:var(--azul) !important;color:var(--crema) !important;
    border-bottom-color:var(--rojo) !important}
  .cl-tabla tbody td,.cl-tabla tfoot td{
    border-bottom-color:rgba(11,11,15,.16) !important}
  .cl-tabla tbody td::before,.cl-tabla tfoot td::before{
    color:var(--azul) !important}
}

/* ==================================================================
   TABLAS DE DÍA EN ESCRITORIO — el cuerpo va en crema para que la
   tabla se despegue del campo ámbar. Sobre el amarillo, una rejilla
   amarilla no se ve; ese era medio problema.
   ================================================================== */
@media (min-width:761px){
  .cl-tabla-wrap{
    border-color:var(--rojo) !important;
    box-shadow:9px 9px 0 rgba(11,11,15,.18) !important;
    background:var(--crema) !important;
  }
  .cl-tabla tbody tr:nth-child(even){background:var(--crema2) !important}
  .cl-tabla tbody tr:hover{background:#fffaf0 !important}
  .cl-tabla thead th{border-bottom:3px solid var(--rojo) !important}
  .cl-tabla tbody th{color:var(--azul) !important}
  .cl-tabla th,.cl-tabla td{border-bottom-color:rgba(11,11,15,.14) !important}
}

/* ================================================================
   KONTRAST AUF DEM GOLDFELD

   Rot auf Gold ist 2,96:1. Das reicht fuer eine Fahne, aber nicht
   fuer Text: WCAG AA will 4,5:1 bei normaler Groesse. Auf dem alten
   gelben Feld lag der Akzent auf Blau, das kam auf ~8:1 und fiel nie
   auf. Schwarz-Rot-Gold hat kein Blau, also uebernimmt Schwarz die
   Rolle: Rot bleibt Signalfarbe fuer Flaechen und grosse Schrift,
   jeder kleine Text auf Gold wird schwarz.

   Faustregel fuer alles, was hier spaeter dazukommt:
     Rot als Hintergrund + weisser Text  -> gut  (5,2:1)
     Schwarzer Text auf Gold             -> gut (13,4:1)
     Roter Text auf Gold                 -> nur ab 24px, besser nie
   ================================================================ */

/* kleine Akzenttexte, die auf dem Goldfeld stehen */
.lq-lanes .eyebrow,
.cl-esc-go,
.cl-cita-quien,
.cl-fr-ojo{
  color:var(--tinta) !important;
}
.cl-esc-go{border-bottom-color:var(--tinta) !important}
.cl-esc-go:hover{color:var(--rojo) !important;border-bottom-color:var(--rojo) !important}

/* Text, der auf einem Foto sitzt: der Scrim traegt ihn, aber wenn das
   Bild an der Stelle hell ist, faellt er weg. Harte Kante drunter. */
.cl-fr-txt .cl-fr-ojo,
.cl-fr-txt .cl-fr-frase,
.hd-tit{
  text-shadow:0 1px 2px rgba(11,11,15,.85), 0 0 18px rgba(11,11,15,.55);
}
.cl-fr-txt .cl-fr-ojo{color:var(--sol-alto) !important}

/* Der Zitatname stand in Hellgold auf Gold — praktisch unsichtbar. */
.cl-cita-quien{opacity:1 !important;font-weight:700}