/* ══════════════════════════════════════════════════════════════════════════════════
   aktienanalyse.online
   Dirección: casa de análisis, no medio. La credibilidad ES el producto.

   Referente principal: MORNINGSTAR — retícula editorial, titulares en serif, filetes
   finos en vez de cajas, secciones rotuladas en versalitas, y la metodología siempre
   a la vista. De Simply Wall St se toman los bloques de datos; del FT, la autoridad
   tipográfica. Contraejemplos deliberados: Der Aktionär y GOLDINVEST.

   CUATRO DECISIONES QUE NO SON ESTÉTICAS
   ──────────────────────────────────────
   1. NO se copia el rojo de Morningstar. El color de señal está reservado a UNA cosa:
      el marcado «Anzeige». Si el rojo se gasta en la marca o en variaciones de cotización,
      deja de significar «cuidado, esto está pagado» — y ese marcado es una obligación
      legal, no un adorno. El acento es azul petróleo, y a propósito no el azul de banca.
   2. Cifras con `tabular-nums` en todo el sitio. Sin eso una columna de importes baila,
      y un sitio de análisis con números desalineados no se lee dos veces.
   3. `hyphens: auto` y medida contenida. El alemán encadena palabras
      («Zulassungswahrscheinlichkeit», «Erneuerbare-Energien-Bewertung») y sin partición
      deja ríos y desbordes. Es la diferencia entre parecer alemán y parecer traducido.
   4. Hoja de impresión con la divulgación incluida. Un análisis se imprime y se archiva;
      una copia impresa sin el bloque legal es una recomendación sin sus advertencias.
   ══════════════════════════════════════════════════════════════════════════════════ */


/* ── Tipografía autoalojada ───────────────────────────────────────────────────────
   ⚠️ NO se enlaza Google Fonts. Cargar la hoja de Google envía la IP del visitante a
   EE.UU. sin consentimiento: es EXACTAMENTE el caso por el que el LG München dictó la
   sentencia sobre Google Fonts (§25 TDDDG). Los ficheros están en site/src/fonts/ y se
   sirven desde nuestro dominio. Subconjunto latino, ~6 KB cada uno.
   Outfit es SIL Open Font License 1.1. */
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-400.woff2") format("woff2");
             font-weight: 400; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-500.woff2") format("woff2");
             font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-600.woff2") format("woff2");
             font-weight: 600; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/fonts/outfit-700.woff2") format("woff2");
             font-weight: 700; font-display: swap; }

:root {
  --papel:       #FBFAF8;   /* papel, no blanco puro: menos brillo en lecturas largas */
  --panel:       #FFFFFF;
  --tinta:       #15171B;
  --tinta-suave: #5D626B;
  --linea:       #E4E0DA;
  --linea-fina:  #EFECE7;
  --acento:      #12556B;
  --acento-osc:  #0E4557;
  --acento-claro:#EAF1F4;
  --senal:       #8A5210;   /* reservado a «Anzeige» y avisos. Nada más. */
  --senal-fondo: #FDF6EC;
  --positivo:    #1F5B3A;
  --negativo:    #8C2F22;

  --display: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ⚠️ `--serif` APUNTABA A OUTFIT, que es una geométrica sin gracias. O sea que la
     variable existía y no había ninguna serif en el sitio: todo el cuerpo de texto se
     componía con la fuente de interfaz del sistema. Eso es precisamente lo que hace que
     una página larga se lea como un blog y no como prensa financiera — Börsen-Zeitung,
     FAZ y Handelsblatt componen el cuerpo con serif y reservan la sans para el mobiliario.
     Pila del sistema, sin descarga: Charter e Iowan vienen en macOS, Cambria en Windows,
     Georgia en todas partes. */
  --serif: Charter, "Iowan Old Style", "Bitstream Charter", Cambria, Georgia,
           "Times New Roman", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --medida: 40rem;   /* ~68 caracteres */
  --ancho:  64rem;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
p, li, td, th, dd, .lead { hyphens: auto; -webkit-hyphens: auto; }

/* ── El texto de lectura ───────────────────────────────────────────────────────────
   Solo el CUERPO de las páginas de contenido. La cabecera, el raíl, las tarjetas, los
   distintivos y el pie se quedan en sans: es el reparto de la prensa —serif para leer,
   sans para orientarse— y es lo que separa un periódico de un blog.
   La medida baja de 40 a 36 rem porque una serif a 17 px rinde ~66 caracteres por línea,
   que es donde el ojo salta de renglón sin perderse. */
.texto { font-family: var(--serif); font-size: 1.05rem; line-height: 1.62; }
/* El h1 general escala hasta 4 rem, que en la portada tiene sentido y en una página de
   lectura no: un titular de 64 px sobre un texto de 17 empuja el contenido fuera de la
   pantalla y compite con él. Aquí manda el texto. */
.texto h1 { font-size: clamp(1.9rem, 1.3rem + 1.9vw, 2.6rem); line-height: 1.12;
            margin-bottom: 1.1rem; max-width: 34rem; }
/* La entradilla de una Kennzahl (el primer párrafo, que abre en negrita) se separa del
   titular como en prensa: un poco más grande y con aire. */
.texto h1 + p { font-size: 1.12rem; line-height: 1.55; color: #2A2E35; margin-bottom: 1.6rem; }
.texto > p, .texto > ul, .texto > ol, .texto > blockquote { max-width: 36rem; }
.texto h2 { margin-top: 2.2rem; }
.texto h3 { font-family: var(--display); font-weight: 600; font-size: 1.06rem;
            letter-spacing: -.02em; margin-top: 1.8rem; }
.texto strong { font-weight: 600; }
.texto blockquote { margin: 1.4rem 0; padding: .1rem 0 .1rem 1.1rem;
                    border-left: 2px solid var(--acento); color: #2A2E35; }
.texto blockquote p { margin: .3rem 0; }
.texto hr { border: 0; border-top: 1px solid var(--linea-fina); margin: 2.4rem 0; }
.texto table { font-family: var(--sans); }
/* La ficha de análisis NO lleva `.texto`: tiene maquetación propia —cabecera de valor,
   tablas, SWOT— y la serif se le colaba en las etiquetas y descuadraba la cabecera.
   Aquí se aplica solo al texto corrido, que es lo que se lee de seguido. */
.bloque > p, .bloque > ul, .bloque > ol, .lead, .lead p { font-family: var(--serif); }
.bloque > p, .bloque > ul, .bloque > ol { font-size: 1.03rem; line-height: 1.62; }
.lead, .lead p { font-size: 1.16rem; line-height: 1.58; }

main { max-width: var(--ancho); margin: 0 auto; padding: 1.6rem 1.5rem 4rem; }
.analyse > *, .bloque > p, .bloque > ul, .bloque > h2, .bloque > h3 { max-width: var(--medida); }
.analyse table, .swot, .profil, .tv-hueco { max-width: none; }

/* ── Tipografía ───────────────────────────────────────────────────────────────── */
h1, h2, h3 { font-family: var(--display); font-weight: 500; letter-spacing: -0.035em; }
h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 4rem); line-height: 1.02; margin: 0 0 .75rem; }
h2 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); line-height: 1.1; margin: 0 0 .7rem; }
h3 { font-size: 1.02rem; font-family: var(--sans); font-weight: 700; margin: 1.5rem 0 .35rem; }
.lead { font-size: 1.13rem; line-height: 1.55; color: #2A2E35; }
a { color: var(--acento); text-underline-offset: .15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
.mono { font-family: var(--mono); font-size: .88em; letter-spacing: -.01em; }
.meta { color: var(--tinta-suave); font-size: .85rem; }

/* Rótulo de sección en versalitas con filete: el recurso de Morningstar que ordena la
   página sin cajas ni sombras. */
.rotulo {
  font-family: var(--sans); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave);
  border-top: 2px solid var(--tinta); padding-top: .55rem; margin: 2.5rem 0 1.25rem;
  display: flex; align-items: baseline; gap: 1rem;
}
.rotulo a { margin-left: auto; font-size: .78rem; letter-spacing: .02em; text-transform: none; font-weight: 400; }

/* ── Cabecera y pie ───────────────────────────────────────────────────────────── */
.staging {
  background: var(--senal); color: #fff; text-align: center;
  padding: .45rem; font-size: .78rem; letter-spacing: .05em; text-transform: uppercase;
}
/* Masthead: nombre centrado entre filetes, navegación debajo. El logotipo del sitio es una
   cabecera de periódico y esta es la única disposición en la que esa forma funciona: los
   filetes cruzan la medida completa en vez de pelearse con el menú. → `marca/README.md` */
.top {
  max-width: var(--ancho); margin: 0 auto; padding: .5rem 1.5rem 0;
  border-bottom: 1px solid var(--linea);
}

/* Fila de utilidad: solo el idioma, muy discreto, encima del nombre. */
.top-utilidad { display: flex; justify-content: flex-end; min-height: 1.15rem; }
.sprache { font-size: .74rem; letter-spacing: .06em; color: var(--tinta-suave); }
.sprache a { color: var(--tinta-suave); text-decoration: none; }
.sprache a:hover { color: var(--acento); }

.marke { display: block; text-align: center; text-decoration: none; color: var(--tinta);
         padding: .1rem 0 .85rem; }
.marke-nombre {
  display: block;
  /* El filete de arriba es más grueso que el de abajo, como en el logotipo: da un «peso»
     que asienta el bloque en vez de encajonarlo entre dos líneas iguales. */
  border-top: 2px solid var(--tinta); border-bottom: 1px solid var(--tinta);
  padding: clamp(.34rem, 1.7vw, 1.1rem) 0 clamp(.26rem, 1.1vw, .55rem);
}
/* El nombre es un SVG con los trazados de la fuente, no texto: ver el comentario de
   `_includes/base.njk`. Escala con el ancho disponible y se topa a 29rem, que es más o
   menos lo que ocupaba compuesto en vivo a 2,6rem. `currentColor` hace que valga en
   negativo y al imprimir sin tener que duplicar el fichero. */
.marke-nombre svg {
  display: block; width: min(100%, 29rem); height: auto; margin: 0 auto;
  fill: currentColor;
}
.marke-kicker {
  display: block; font-family: var(--sans); font-size: .62rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase; color: var(--tinta-suave);
  margin-top: .5rem;
}

.top nav {
  display: flex; justify-content: center; flex-wrap: wrap; gap: .35rem 1.4rem;
  font-size: .88rem; padding-bottom: .7rem;
}
.top nav a { color: var(--tinta); text-decoration: none; padding-bottom: .18rem;
             border-bottom: 2px solid transparent; }
.top nav a:hover { border-bottom-color: var(--acento); }

/* En móvil el menú ENVUELVE, no se desplaza en horizontal.
   ⚠️ Probé primero la fila con desplazamiento lateral, que es lo bonito, y dejaba
   «Interessenkonflikte» 153 px fuera de pantalla — invisible salvo que alguien adivine que
   hay que arrastrar. Y ese enlace está en la navegación primaria a propósito: en un sitio de
   análisis los conflictos de interés no son cumplimiento defensivo, son el argumento de venta
   (ver el comentario en `_includes/base.njk`). Envolver cuesta un renglón de alto y no
   esconde nada. */
@media (max-width: 34rem) {
  .top nav {
    flex-wrap: wrap; gap: .45rem 1.05rem; font-size: .84rem; padding-bottom: .6rem;
  }
}
.pie { max-width: var(--ancho); margin: 4rem auto 0; padding: 1.5rem 1.5rem 2.2rem;
       border-top: 1px solid var(--linea); font-size: .85rem; color: var(--tinta-suave); }
.pie-marca { font-family: var(--display); font-weight: 600; color: var(--tinta);
             margin: 0 0 1rem; }
/* Las secciones de la web y los textos legales son dos cosas distintas y se leen con
   intenciones distintas. Iban en la misma línea separadas por un punto medio, y se
   confundían. Ahora son dos bloques con una línea entre ellos. */
.pie-nav { display: flex; flex-wrap: wrap; gap: .3rem 1.3rem; margin: 0 0 1rem;
           font-family: var(--display); font-weight: 500; }
.pie-nav a { color: var(--tinta); text-decoration: none; }
.pie-nav a:hover { color: var(--acento); text-decoration: underline; }
.pie-legal { display: flex; flex-wrap: wrap; gap: .3rem 1.1rem; margin: 0;
             padding-top: .95rem; border-top: 1px solid var(--linea-fina);
             font-size: .8rem; }
.pie-legal a { color: var(--tinta-suave); }
.pie-ki { margin: .9rem 0 0; font-size: .78rem; line-height: 1.5; max-width: 44rem; }

/* ══ HOME ═════════════════════════════════════════════════════════════════════
   Estructura tipo Morningstar: sin imagen decorativa de cabecera, densa, a dos columnas
   con raíl, y miniaturas pequeñas al lado del titular en vez de imagen grande encima.

   El titular de página es MODESTO a propósito. En un portal de análisis la página no va
   sobre sí misma: va sobre lo que hay dentro. Un h1 de 64 px empuja el contenido fuera de
   la pantalla y obliga al lector a hacer scroll para llegar a lo único que le interesa.
   ═══════════════════════════════════════════════════════════════════════════════ */

.badge-seccion {
  display: inline-block; background: #F2F0EC; color: var(--tinta);
  font-family: var(--display); font-size: .78rem; font-weight: 500;
  padding: .22rem .7rem; border-radius: 8px; margin-bottom: .7rem;
}
.intro { padding-bottom: 1.1rem; border-bottom: 1px solid var(--tinta); }
.intro h1 { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.15rem); letter-spacing: -.03em;
            max-width: none; margin-bottom: .35rem; }
.intro .lead { font-size: 1rem; color: #666B73; max-width: 46rem; margin: 0; }

/* Dos columnas con raíl */
.portada { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-top: 0; }
@media (min-width: 62rem) { .portada { grid-template-columns: minmax(0,2.05fr) minmax(0,1fr); gap: 3rem; } }
.rail { align-self: start; }
@media (min-width: 62rem) { .rail { position: sticky; top: 1.5rem; } }

/* El h1 de la home usa esta misma clase: titula el documento sin gastar espacio. */
h1.rotulo { margin-top: 2rem; }
.rotulo {
  font-family: var(--display); font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em; color: var(--tinta-suave);
  border-top: 2px solid var(--tinta); padding-top: .5rem; margin: 2rem 0 1rem;
  display: flex; align-items: baseline; gap: 1rem;
}
/* ⚠️ El primer rótulo de cada columna va SIN filete.
   El filete separa secciones; arriba del todo no separa nada —la cabecera ya lo hace— y se
   lee como una raya suelta con hueco muerto encima. Se quitan borde, relleno y margen para
   que el contenido empiece donde tiene que empezar. */
.portada > div > .rotulo:first-child,
.rail > .rotulo:first-child,
.portada > div > h1.rotulo:first-child {
  border-top: 0; padding-top: 0; margin-top: 0;
}
.rotulo a { margin-left: auto; font-size: .76rem; letter-spacing: .01em;
            text-transform: none; font-weight: 400; }

/* ── Pieza destacada: texto arriba, miniatura media ──────────────────────────── */
.destacado { display: block; border: 0; border-radius: 0; background: none;
             padding: 0 0 1.5rem; margin: 0; border-bottom: 1px solid var(--linea); }
.destacado .visual { border-radius: 10px; aspect-ratio: 16 / 9; margin-bottom: 1rem; }
.destacado h2 { font-size: clamp(1.5rem, 1rem + 1.8vw, 2rem); letter-spacing: -.035em;
                margin: .5rem 0 .5rem; text-wrap: balance; }
.destacado h2 a { color: var(--tinta); text-decoration: none; }
.destacado h2 a:hover { color: var(--acento); }
.destacado-desc { color: #666B73; font-size: 1rem; line-height: 1.55; margin: 0; }
.destacado-pie { display: flex; gap: .9rem; align-items: center; flex-wrap: wrap;
                 margin-top: .9rem; }

/* ── Lista de análisis: titular a la izquierda, miniatura pequeña a la derecha ── */
.lead p + p { margin-top: .7rem; }
.seccion-intro { margin: .1rem 0 .9rem; font-size: .9rem; color: var(--tinta-suave);
                 line-height: 1.55; }
.karten { display: block; }
.karte { display: grid; grid-template-columns: 1fr 6.5rem; gap: 1.1rem; align-items: start;
         padding: 1.15rem 0; border-bottom: 1px solid var(--linea-fina); }
.karte:last-child { border-bottom: 0; }
.karte .visual { grid-column: 2; grid-row: 1; border-radius: 6px; aspect-ratio: 4 / 3; }
.karte-cuerpo { grid-column: 1; grid-row: 1; padding: 0; }
.karte-titulo { display: block; }
.karte h3 { font-family: var(--display); font-size: 1.02rem; font-weight: 600;
            letter-spacing: -.02em; margin: .3rem 0 .25rem; line-height: 1.32; }
.karte h3 a { color: var(--tinta); text-decoration: none; }
.karte h3 a:hover { color: var(--acento); }
.karte p { margin: 0 0 .4rem; font-size: .88rem; line-height: 1.5; color: #666B73; }
.karte-pie { display: flex; align-items: center; gap: .5rem; font-size: .74rem;
             color: var(--tinta-suave); }
.karte-filete { display: none; }

/* ── Píldoras ─────────────────────────────────────────────────────────────────── */
.badge-cat { display: inline-block; color: #fff; font-family: var(--display);
             font-size: .64rem; font-weight: 600; letter-spacing: .04em;
             padding: .16rem .55rem; border-radius: 20px; text-transform: uppercase; white-space: nowrap; }
.cat-rohstoffe { background: #5A6470; } .cat-technologie { background: #12556B; }
.cat-biotech { background: #3F5A46; }   .cat-erneuerbare-energien { background: #2F5F66; }
/* ⚠️ Sin esta regla, las guías de plaza salían con `.badge-cat` —texto BLANCO— y sin
   fondo: invisibles. El distintivo estaba ahí, en el HTML, y no se veía. Un color que
   falta no da error en ninguna parte; solo se ve mirando la página. */
.cat-handelsplatz { background: #6B5B4A; }
.badge-negro { display: inline-block; align-self: flex-start; background: var(--tinta);
               color: #fff; font-family: var(--display); font-size: .66rem; font-weight: 600;
               letter-spacing: .05em; text-transform: uppercase;
               padding: .2rem .6rem; border-radius: 20px; }

/* ── Interacciones sobre el visual ────────────────────────────────────────────── */
.visual { position: relative; overflow: hidden; display: block; line-height: 0; background: var(--panel); }
.visual .branche-visual, .visual img { width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .5s cubic-bezier(.33, 1, .68, 1); }
.visual::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.22);
  opacity: 0; transition: opacity .4s ease; pointer-events: none; }
.visual:hover .branche-visual, .visual:hover img { transform: scale(1.06); }
.visual:hover::after { opacity: 1; }
.visual .mas-circulo, .visual .esquina { display: none; }   /* demasiado ruido a este tamaño */

/* Etiqueta «Symbolbild» incrustada. Pequeña pero siempre legible: es lo que impide que la
   foto se lea como documentación del activo de la empresa analizada. No se oculta nunca. */
.symbolbild {
  position: absolute; bottom: 0; left: 0; z-index: 2;
  background: rgba(21,23,27,.72); color: #fff;
  font-family: var(--display); font-size: .58rem; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase;
  padding: .14rem .4rem; line-height: 1.5; border-radius: 0 3px 0 0;
}
.destacado .symbolbild { font-size: .64rem; padding: .2rem .55rem; }
.destacado .visual .mas-circulo {
  display: flex; position: absolute; top: 50%; left: 50%; width: 60px; height: 60px;
  margin: -30px 0 0 -30px; border-radius: 50%; background: rgba(255,255,255,.24);
  align-items: center; justify-content: center; color: #fff; font-family: var(--display);
  font-size: 1.7rem; line-height: 1; transform: scale(.7); opacity: 0;
  transition: transform .3s ease, opacity .3s ease; z-index: 2;
}
.destacado .visual:hover .mas-circulo { transform: scale(1); opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .visual .branche-visual, .visual img, .visual::after { transition: none; }
  .visual:hover .branche-visual, .visual:hover img { transform: none; }
}

/* ── Raíl ─────────────────────────────────────────────────────────────────────── */
.rail-lista { list-style: none; padding: 0; margin: 0; }
.rail-lista li { padding: .55rem 0; border-bottom: 1px solid var(--linea-fina); font-size: .9rem; }
.rail-lista li:last-child { border-bottom: 0; }
.rail-lista a { color: var(--tinta); text-decoration: none; font-weight: 600; }
.rail-lista a:hover { color: var(--acento); }
.rail-lista .peso { font-family: var(--display); font-size: .68rem; letter-spacing: .07em;
                    color: var(--acento); font-weight: 700; margin-right: .4rem; }
.rail-lista .def { display: block; color: var(--tinta-suave); font-size: .82rem;
                   font-weight: 400; line-height: 1.45; margin-top: .1rem; }
.rail-nota { font-size: .84rem; line-height: 1.55; color: var(--tinta-suave); margin: 0; }
.rail-nota strong { color: var(--tinta); }

/* ── Anatomía de un análisis ──────────────────────────────────────────────────── */
.anatomia { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
            gap: 1px; background: var(--linea-fina); border: 1px solid var(--linea-fina);
            border-radius: 10px; overflow: hidden; margin-top: 1rem; }
.anatomia > div { background: var(--panel); padding: .9rem 1rem; }
.anatomia .num { font-family: var(--display); font-size: 1.25rem; font-weight: 600;
                 color: var(--acento); line-height: 1; letter-spacing: -.03em; }
.anatomia h3 { font-family: var(--display); font-size: .92rem; font-weight: 600;
               margin: .35rem 0 .25rem; letter-spacing: -.015em; }
/* Los pasos de «anatomía de un análisis» no enlazan a ninguna parte, pero la rejilla se
   reutiliza en la home inglesa para las Kennzahlen, y ahí los rótulos SÍ son enlaces. Un
   enlace por defecto sale subrayado y en color: como titular de tarjeta pesa demasiado y
   rompe con .karte h3 a, que es tinta y sin subrayar. Se iguala a ese patrón. */
.anatomia h3 a { color: var(--tinta); text-decoration: none; }
.anatomia h3 a:hover { color: var(--acento); }
.anatomia p { margin: 0; font-family: var(--serif); font-size: .9rem; line-height: 1.52;
              color: #5A6068; }

/* ── Imagen editorial ─────────────────────────────────────────────────────────── */
.imagen { margin: 0; }
.imagen img { display: block; width: 100%; height: auto; border-radius: 10px; }
.imagen figcaption { font-size: .66rem; letter-spacing: .06em; text-transform: uppercase;
                     color: var(--tinta-suave); margin-top: .4rem; }
.imagen--banda img { border-radius: 10px; aspect-ratio: 21 / 9; object-fit: cover; }

/* ── Botón ────────────────────────────────────────────────────────────────────── */
.boton { display: inline-block; background: var(--tinta); color: #fff; text-decoration: none;
         font-family: var(--display); font-size: .86rem; font-weight: 600;
         padding: .55rem 1.2rem; border-radius: 40px; white-space: nowrap;
         transition: transform .25s ease; }
.boton:hover { transform: scale(1.02); }

/* ══ FICHA DE ANÁLISIS ════════════════════════════════════════════════════════ */
.wertpapier { background: var(--panel); border: 1px solid var(--linea); border-radius: 3px;
              padding: 1.4rem 1.5rem; margin-bottom: 1.5rem; }
.wertpapier h1 { margin-bottom: .9rem; }
.kennung { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
           gap: .9rem 1.5rem; margin: 0 0 1rem; padding-bottom: 1rem;
           border-bottom: 1px solid var(--linea-fina); }
.kennung dt { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
              color: var(--tinta-suave); margin-bottom: .1rem; }
.kennung dd { margin: 0; font-size: 1rem; font-weight: 600; }
.kennung dd.mono { font-size: 1.02rem; letter-spacing: .02em; }
.handelsplaetze ul { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: .3rem 0 0; }
.handelsplaetze li { border: 1px solid var(--linea); border-radius: 2px; padding: .12rem .5rem;
                     font-size: .78rem; color: var(--tinta-suave); background: var(--papel); }
.etikett { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
           color: var(--tinta-suave); margin-top: .9rem; }
.bewertung { display: flex; gap: 1.5rem; align-items: baseline; flex-wrap: wrap;
             padding-top: .9rem; border-top: 1px solid var(--linea-fina); margin-top: .9rem; }
.wert { font-family: var(--serif); font-size: 1.9rem; line-height: 1; }
.empfehlung { font-size: 1rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.empfehlung--kaufen { color: var(--positivo); }
.empfehlung--verkaufen { color: var(--negativo); }
.wertpapier .meta { border-top: 1px solid var(--linea-fina); padding-top: .7rem; margin: 1rem 0 0; }

.bloque { border-top: 1px solid var(--linea); margin-top: 2.5rem; padding-top: 1.6rem; }
.bloque > h2 { margin-top: 0; }
.hinweis-klein { color: var(--tinta-suave); font-size: .89rem; line-height: 1.55;
                 background: var(--acento-claro); border-left: 2px solid var(--acento);
                 padding: .7rem .9rem; margin: .7rem 0; }
.hinweis { background: var(--acento-claro); border-left: 3px solid var(--acento);
           padding: .9rem 1.1rem; margin: 1.5rem 0; font-size: .95rem; }
.dato-clave { border: 1px solid var(--linea); border-left: 3px solid var(--acento); border-radius: 2px;
              padding: .8rem 1rem; display: flex; gap: .7rem; align-items: baseline; flex-wrap: wrap;
              background: var(--panel); }
.dato-clave .etikett { margin: 0; }
.dato-clave strong { font-family: var(--serif); font-size: 1.45rem; line-height: 1; }

/* ── Tablas ───────────────────────────────────────────────────────────────────── */
/* Sin cebra y sin rejilla: filetes finos y aire. Es donde se nota si un sitio financiero
   está hecho por alguien que lee tablas o por alguien que las decora. */
table { border-collapse: collapse; width: 100%; margin: 1rem 0; font-size: .94rem; }
th, td { text-align: left; padding: .6rem .8rem .6rem 0; border-bottom: 1px solid var(--linea-fina); vertical-align: top; }
thead th, tr:first-child th { font-size: .68rem; text-transform: uppercase; letter-spacing: .07em;
                              color: var(--tinta-suave); font-weight: 600; border-bottom: 1px solid var(--linea); }
.kennzahlen th { width: 52%; font-weight: 400; color: var(--tinta-suave); text-transform: none;
                 letter-spacing: 0; font-size: .94rem; }
.kennzahlen td { font-weight: 600; text-align: right; padding-right: 0; }
.szenarien th, .szenarien td { text-align: center; padding: .7rem .5rem; }
.szenarien td { font-size: 1.1rem; }
.szenarien td strong { font-family: var(--serif); font-size: 1.35rem; }

.profil { list-style: none; padding: 0; margin: 1rem 0 0; }
.profil li { display: grid; grid-template-columns: 8.5rem 1fr 2.6rem; gap: .9rem;
             align-items: center; margin-bottom: .55rem; font-size: .92rem; }
.profil-barra { display: block; height: .5rem; background: var(--linea-fina); border-radius: 99px; overflow: hidden; }
.profil-relleno { display: block; height: 100%; background: var(--acento); border-radius: 99px; }
.profil-valor { font-size: .82rem; color: var(--tinta-suave); text-align: right; }

.swot { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1px;
        background: var(--linea); border: 1px solid var(--linea); margin-top: 1rem; }
.swot-caja { background: var(--panel); padding: .9rem 1.1rem; }
.swot-caja h3 { margin: 0 0 .45rem; font-size: .68rem; text-transform: uppercase;
                letter-spacing: .07em; color: var(--tinta-suave); }
.swot-plus h3 { color: var(--positivo); }
.swot-minus h3 { color: var(--senal); }
.swot-caja ul { margin: 0; padding-left: 1.05rem; font-size: .92rem; }
.swot-caja li { margin-bottom: .3rem; }

.katalysatoren { list-style: none; padding: 0; margin: 1rem 0 0; }
/* El renglón lleva fecha + titular; la explicación va DEBAJO, en `.kat-nota`, porque suele
   ser una frase entera. Antes iba dentro del renglón metida en un `.pill`. → ficha.njk */
.katalysatoren li { border-bottom: 1px solid var(--linea-fina); padding: .6rem 0; }
.kat-linea { display: flex; gap: .9rem; align-items: baseline; }
.kat-nota { margin: .3rem 0 0 5.9rem; font-size: .88rem; color: var(--tinta-suave);
            line-height: 1.5; }
@media (max-width: 640px) { .kat-nota { margin-left: 0; } }
.kat-fecha { font-family: var(--mono); font-size: .8rem; color: var(--tinta-suave); min-width: 5rem; }
.kat-titel { flex: 1; }
.pill { font-size: .66rem; text-transform: uppercase; letter-spacing: .06em;
        padding: .1rem .45rem; border: 1px solid var(--linea); border-radius: 2px; color: var(--tinta-suave); }
.kat-hoch { border-color: var(--senal); color: var(--senal); }

/* Los riesgos NO se maquetan como letra pequeña: es lo primero que mira un lector serio. */
.risiken { padding-left: 1.1rem; margin: 1rem 0 0; }
.risiken li { margin-bottom: .6rem; }

.tv-hueco { border: 1px dashed var(--linea); border-radius: 3px; padding: 1.5rem 1.2rem;
            text-align: center; background: var(--panel); margin: 1rem 0; }
.tv-aviso { color: var(--tinta-suave); font-size: .85rem; margin: 0 auto .8rem; max-width: 32rem; }
.tv-boton { background: var(--acento); color: #fff; border: 0; border-radius: 2px;
            padding: .55rem 1.2rem; font: inherit; font-size: .92rem; cursor: pointer; }
.tv-boton:hover { background: var(--acento-osc); }

/* ── Cumplimiento ─────────────────────────────────────────────────────────────── */
.anzeige-banner { background: var(--senal-fondo); border: 1px solid var(--senal); border-left-width: 4px;
                  padding: 1rem 1.2rem; margin: 0 0 1.75rem; }
.anzeige-banner strong { display: block; color: var(--senal); font-size: .78rem;
                         text-transform: uppercase; letter-spacing: .09em; margin-bottom: .4rem; }
.anzeige-banner p { margin: 0; font-size: .88rem; line-height: 1.55; color: #4A3A24; }
.offenlegung { border-top: 2px solid var(--tinta); margin-top: 3rem; padding-top: 1rem;
               font-size: .84rem; line-height: 1.6; color: var(--tinta-suave); }
.offenlegung h2 { font-family: var(--sans); font-size: .7rem; text-transform: uppercase;
                  letter-spacing: .09em; color: var(--tinta); margin-bottom: .4rem; }

.liste { list-style: none; padding: 0; }
.liste li { padding: .7rem 0; border-bottom: 1px solid var(--linea-fina); }
.liste li:last-child { border-bottom: 0; }
.stammdaten th { width: 34%; font-weight: 600; color: var(--tinta-suave);
                 text-transform: none; letter-spacing: 0; font-size: .94rem; }
code { font-family: var(--mono); font-size: .86em; background: #F1EEE9;
       padding: .05rem .3rem; border-radius: 2px; }

/* ── Impresión ────────────────────────────────────────────────────────────────── */
@media print {
  /* `.top-utilidad` en vez de `.sprache`: si no, el contenedor vacío deja un hueco sobre el
     masthead en el papel. */
  .top nav, .top-utilidad, .tv-hueco, .staging { display: none; }
  .top { padding-top: 0; }
  body { background: #fff; font-size: 11pt; }
  .bloque { break-inside: avoid; }
  .offenlegung, .anzeige-banner { break-inside: avoid; border-color: #000; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; }
}

/* ── Banner de consentimiento ────────────────────────────────────────────────────────
   🔴 LOS DOS BOTONES SON IDÉNTICOS Y ES DELIBERADO. Misma clase, mismo color, mismo
   tamaño, mismo peso. Un «aceptar» destacado frente a un «rechazar» en gris o escondido
   detrás de «configurar» invalida el consentimiento —no es libre—, y eso lo han
   sancionado la CNIL y varias autoridades alemanas.
   Si alguien «mejora» esto poniendo el botón de aceptar en color, rompe el cumplimiento
   sin tocar una línea de lógica y sin que falle ninguna comprobación. No se toca.
   → src/js/consentimiento.js                                                          */
.consent { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 9999;
           max-width: 46rem; margin: 0 auto; background: #fff; color: var(--tinta);
           border: 1px solid var(--tinta); border-radius: 4px; padding: 1.1rem 1.2rem;
           box-shadow: 0 6px 28px rgba(0,0,0,.18); font-size: .92rem; line-height: 1.55; }
.consent-texto strong { display: block; font-family: var(--display); margin-bottom: .35rem; }
.consent-texto p { margin: 0; }
.consent-botones { display: flex; gap: .6rem; margin-top: .9rem; flex-wrap: wrap; }
.consent-btn { flex: 1 1 10rem; font-family: var(--display); font-size: .9rem; font-weight: 600;
               padding: .55rem 1.1rem; cursor: pointer;
               background: #fff; color: var(--tinta);
               border: 1px solid var(--tinta); border-radius: 3px; }
.consent-btn:hover { background: var(--tinta); color: #fff; }
.consent-retirar { cursor: pointer; }
@media (max-width: 480px) { .consent { left: .5rem; right: .5rem; bottom: .5rem; } }