/*
Theme Name: Krahl
Theme URI: https://krahlconsulting.com/
Author: Krahl & Partner Consulting SL
Author URI: https://krahlconsulting.com/
Description: Tema clásico trilingüe (DE/EN/ES) para Krahl & Partner Consulting SL. Paleta marino+turquesa de la propuesta ganadora «fiel-referencia» (porstmann.net). Un solo primitivo de composición (el registro), cero JavaScript de terceros, cero peticiones externas, tipografía autoalojada. Accesibilidad AA verificada por cálculo de contraste, no estimada.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: krahl
Tags: accessibility-ready, translation-ready, custom-menu, threaded-comments
*/

/* ============================================================================
   KRAHL & PARTNER CONSULTING · SISTEMA DE DISEÑO
   ============================================================================

   PALETA — MARINO + TURQUESA, corregida el 7-ago-2026 (CLAUDE.md del proyecto,
   REGLA 1). El cliente eligió porstmann.net y dijo «también tipo azul verde»:
   no era una preferencia abstracta de dos colores cualesquiera, era la pareja
   REAL de ese sitio (marino #002F5A + turquesa #009AA5, ver diseno/00-
   referencias.md §1.3). El brief anterior a ese análisis había fijado azul
   #0E5A8A + VERDE BOSQUE #136B4E, y esta hoja llegó a maquetarse con esa
   paleta equivocada. Se corrige aquí: marino literal de la referencia +
   turquesa oscurecido lo justo para cumplir AA (la referencia, #009AA5, da
   3,41:1 y suspende en sus siete usos medidos). Es la paleta de
   diseno/propuesta-fiel-referencia.html, la ganadora del concurso de diseño
   (80,8/100, 5 jueces — diseno/01-veredicto-final.md). CERO VERDE en todo el
   sistema: el cliente pidió «azul verde», no «azul y verde».

   UN SOLO PRIMITIVO DE COMPOSICIÓN: EL REGISTRO.
   Marca de cota (2 px) + rótulo en el margen + contenido que arranca en la
   línea de referencia (--datum). Se usa en el cuerpo y en el pie: todo el
   documento se acota desde la misma x. La página está ACOTADA, no decorada.

   ---------------------------------------------------------------------------
   CONTRASTES — calculados con la fórmula de luminancia relativa de WCAG 2.1
   (sRGB linealizado). Reproducibles con `_scratch/contraste-tema.py` (mismo
   script que auditaba la paleta anterior; los números de abajo son los que
   imprime HOY, con la paleta marino+turquesa).
   Umbrales: texto normal >= 4,5:1 · texto grande (>=24px, o >=18,66px en 600)
   >= 3:1 · componentes de interfaz y bordes con significado >= 3:1.

   TEXTO SOBRE LOS TRES FONDOS CLAROS
                       #FFFFFF  #F4F7F9  #EAF7F8
     #12212D tinta      16,39    15,24    14,95
     #46565F tinta-70    7,62     7,08     6,95
     #5A6B75 tinta-60    5,53     5,14     5,05
     #002F5A marine-900 13,51    12,56    12,33
     #00707A tuerkis-700 5,84     5,42     5,32
     #005A63 tuerkis-800 7,95     7,39     7,25
     #A4192B error       7,63     7,09     6,96

   RELLENOS — SC 1.4.11 exige medir el RELLENO contra la banda que lo sostiene,
   no solo el texto contra el relleno.
     relleno #00707A contra #FFFFFF 5,84 · #F4F7F9 5,42 · #EAF7F8 5,32
       -> pasa el 3:1 sobre las tres bandas, y el 4,5:1 de texto normal también
     texto #FFFFFF sobre #00707A = 5,84 · hover sobre #005A63 = 7,95
     contorno #00707A contra #FFFFFF = 5,84 · hover #005A63 = 7,95

   PIE Y BANDA OSCURA, fondo #002F5A (el mismo marine-900 de la estructura:
   fiel-referencia reutiliza un solo marino para las dos cosas)
     #FFFFFF 13,51 · #C7D8E4 pie-texto 9,25 · #8FE3E8 tuerkis-claro 9,21 ·
     #5FB3BA tuerkis-borde 5,56 (borde discontinuo, no-texto, >=3:1)
     PROHIBIDO sobre esta banda: #00707A directo como texto, da 2,32:1.

   ANILLO DE FOCO #002F5A con separador blanco de 2 px
     sobre #FFFFFF 13,51 · #F4F7F9 12,56 · #EAF7F8 12,33
     sobre el botón turquesa #00707A el anillo solo daría 2,32 y sobre el pie
     #002F5A daría 1,00: por eso el separador blanco es obligatorio, y por eso
     el pie invierte el anillo (blanco con separador #002F5A = 13,51).

   TARJETA DE CONVERSACIÓN (Gesprächskarte)
     blanco #FFFFFF sobre la banda #EAF7F8 = 1,08. La tarjeta NO se distingue
     por su fondo: la distingue el canto #00707A, que da 5,32 contra la banda.
     Sin ese canto la tarjeta no existe para nadie. No es adorno.

   DECORATIVO, NUNCA TEXTO NI PORTADOR DE INFORMACIÓN
     El propio #00707A (5,84 sobre blanco) se reutiliza para marcas de cota de
     2-3 px: no hace falta un tono aparte y así hay un solo hex «acción» en
     todo el sistema.
     #D3DCE3 borde-suave: decorativo, SOLO filetes; ninguna información
     depende de verlo.
     El borde de CONTROL (campos de formulario, que sí portan información) es
     #6E8291 —el mismo «--k-rand» de fiel-referencia—: 3,99 / 3,71 / 3,64
     sobre los tres fondos claros.

   ---------------------------------------------------------------------------
   MEDIDA DE LÍNEA — la disciplina, no solo el número.
   `ch` NO mide el ancho medio del carácter: mide el ancho del glifo «0», y se
   resuelve con la fuente del CONTENEDOR, no con la del párrafo. 68ch dio 85
   caracteres reales en la maqueta. Por eso el tope es doble:
       --medida: min(68ch, 40rem)
   40rem = 640 px son ~74 caracteres reales a 18 px en IBM Plex Sans.
   Si algún día entra una serifa, la medida se vuelve a MEDIR en navegador; no
   se supone.

   PROHIBIDO en este proyecto y ausente de esta hoja: Google Fonts, cualquier
   CDN, iframes, imágenes remotas, analítica de terceros, overlays de
   accesibilidad. En Alemania hay sentencia firme por cargar fuentes de Google
   (LG München I, 20-01-2022, Az. 3 O 17493/20).
   ========================================================================= */


/* --- TIPOGRAFÍA AUTOALOJADA -----------------------------------------------
   IBM Plex Sans + IBM Plex Mono · SIL Open Font License 1.1 (autoalojable y
   de uso comercial sin coste). Los ficheros van en assets/fonts/ del propio
   tema: ver assets/fonts/README.md para qué descargar y de dónde.

   El PRECARGADO NO SE DECLARA AQUÍ. Las etiquetas <link rel="preload"> reales
   de Regular 400 y SemiBold 600 se emiten desde inc/assets.php, en el <head>.
   Un comentario en el CSS que dijera «se precargan» sin que exista la etiqueta
   es exactamente la clase de afirmación falsa que este proyecto no admite.

   La familia de reserva es de sistema y aguanta sola: si los woff2 no están
   subidos, la página se lee igual y no se rompe ninguna medida.

   `unicode-range` corregido en la ronda 2 (8-ago-2026): el bloque de símbolos
   de moneda declaraba U+20A0-20AB, que llega hasta ₫ pero SE PARA justo
   antes de U+20AC, el signo EURO — el único que de verdad hace falta en una
   consultora española que factura en Alemania. Hoy no hay ningún € publicado
   (verificado con `curl` sobre las 18 páginas), así que el hueco no se veía,
   pero en cuanto alguien escriba un precio, ese carácter habría caído fuera
   de las cinco fuentes autoalojadas y se habría renderizado con la tipografía
   de sistema, mezclada con el resto del texto en IBM Plex. Ampliado a
   U+20A0-20CF: todo el bloque Unicode «Currency Symbols».
   ------------------------------------------------------------------------- */

@font-face{
  font-family:"IBM Plex Sans";
  src:url("assets/fonts/IBMPlexSans-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF,U+2113,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("assets/fonts/IBMPlexSans-Italic.woff2") format("woff2");
  font-weight:400;font-style:italic;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF,U+2113,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("assets/fonts/IBMPlexSans-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF,U+2113,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Sans";
  src:url("assets/fonts/IBMPlexSans-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF,U+2113,U+2C60-2C7F;
}
@font-face{
  font-family:"IBM Plex Mono";
  src:url("assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap;
  unicode-range:U+0000-00FF,U+0100-024F,U+2000-206F,U+20A0-20CF,U+2113,U+2C60-2C7F;
}


/* --- FICHAS DEL SISTEMA --------------------------------------------------- */
:root{
  /* Paleta obligatoria: marino + turquesa de fiel-referencia.html, literal.
     Ni un color fuera de esta lista salvo --k-error, que está justificado
     abajo y nunca porta significado por sí solo. DOS familias, no cuatro:
     marine-* es la ESTRUCTURA (títulos, marca, foco, banda oscura); tuerkis-*
     es la ACCIÓN (enlaces, botones, bordes de voz, decorativo). La paleta
     anterior tenía una familia «azul» Y una familia «verde» separadas para
     esos mismos dos papeles — el error que corrige esta hoja el 7-ago-2026. */
  --k-blanco:#FFFFFF;
  --k-nieve:#F4F7F9;
  --k-tuerkis-hell:#EAF7F8;    /* fondo de sección/bloque alterno, claro */
  --k-tinta:#12212D;
  --k-tinta-70:#46565F;
  --k-tinta-60:#5A6B75;

  --k-marine-900:#002F5A;      /* estructura — el marino literal de la referencia */
  --k-tuerkis-700:#00707A;     /* acción — turquesa corregido a AA (ref.: #009AA5 = 3,41, suspende) */
  --k-tuerkis-800:#005A63;     /* hover del turquesa */
  --k-tuerkis-claro:#8FE3E8;   /* turquesa legible SOLO sobre la banda oscura (texto) */
  --k-tuerkis-borde:#5FB3BA;   /* borde discontinuo decorativo sobre la banda oscura */

  --k-borde-control:#6E8291;   /* bordes que SÍ portan información (campos) — «--k-rand» de la referencia */
  --k-borde-suave:#D3DCE3;     /* filetes decorativos */
  --k-pie-texto:#C7D8E4;       /* texto general sobre la banda oscura */

  /* --k-error es el ÚNICO color fuera de la paleta base. Un estado de error
     que se señalara con el mismo turquesa que todo lo demás no se distingue de
     un estado normal. Nunca va solo: siempre lleva texto, aria-invalid y
     entrada en el resumen de errores (SC 1.4.1). Rojo ladrillo, no rojo de
     alarma, y no se confunde con ningún tono de la paleta de marca. */
  --k-error:#A4192B;
  --k-error-fondo:#FBEAEC;

  /* Líneas del pie: transparencias de --k-pie-texto, no colores nuevos. */
  --k-pie-linea:rgba(199,216,228,.22);
  --k-pie-linea-fuerte:rgba(199,216,228,.36);

  --ff-sans:"IBM Plex Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --ff-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Escala de espaciado de base 4px. Una sola cifra base, sin excepciones. */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;
  --sp-5:1.25rem;--sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;
  --sp-12:3rem;  --sp-16:4rem;  --sp-24:6rem;  --sp-32:8rem;

  --ancho:1200px;
  --margen:clamp(1.25rem,5vw,3rem);
  --datum:12.5rem;            /* la línea de referencia: 200 px */
  --ritmo:clamp(3.5rem,8vw,7rem);

  /* Medida de línea. Ver la nota de arriba: el tope en rem es el que manda. */
  --medida:min(68ch,40rem);
  --medida-corta:min(52ch,32rem);

  --radio:4px;
}


/* --- BASE ----------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
  margin:0;
  background:var(--k-blanco);
  color:var(--k-tinta);
  font-family:var(--ff-sans);
  font-size:clamp(1.0625rem,.98rem + .4vw,1.125rem);   /* 17px -> 18px */
  line-height:1.65;
  font-weight:400;
  /* Un peso que falte NUNCA se renderiza como negrita falsa: antes se ve el
     texto en regular que en una síntesis que desalinea toda la página. */
  font-synthesis-weight:none;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

h1,h2,h3,h4{color:var(--k-marine-900);font-weight:600;margin:0;text-wrap:balance}
p{margin:0}
p + p{margin-top:1.35em}

/* El alemán compone palabras de 28 letras y las columnas estrechas aparecen en
   todas las páginas de servicio: la partición va en global, no por bloque. */
p,li,dd,dt,blockquote,figcaption{
  hyphens:auto;-webkit-hyphens:auto;
  hyphenate-limit-chars:8 4 4;
  overflow-wrap:break-word;
}

a{color:var(--k-tuerkis-700)}
ul,ol{margin:0;padding:0}
table{border-collapse:collapse}
img,svg,video{max-width:100%;height:auto}
img{display:block}
strong,b{font-weight:600}
abbr[title]{text-decoration:underline dotted;cursor:help}
sup{font-size:.7em;line-height:0;vertical-align:super}

/* Cualquier ancla interna a la que se salte queda por debajo de la cabecera. */
:target{scroll-margin-top:var(--sp-16)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}


/* --- UTILIDADES ----------------------------------------------------------- */
.wrap{max-width:var(--ancho);margin-inline:auto;padding-inline:var(--margen)}
.u-vh{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
.u-vh-foco:focus,.u-vh-foco:focus-visible{
  position:static;width:auto;height:auto;margin:0;overflow:visible;
  clip-path:none;white-space:normal;
}
.prosa{max-width:var(--medida);text-wrap:pretty}
.prosa > * + *{margin-top:1.35em}
.u-sep{margin-top:var(--sp-6)}

/* Rótulo técnico: IBM Plex Mono 500, versalitas, +0,1em. Es la voz de la
   maquinaria del sitio: rótulos, fechas, cifras. Nunca se usa para prosa. */
.rot{
  font-family:var(--ff-mono);font-weight:500;font-size:.8125rem;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;color:var(--k-tinta-70);
}

/* Cifras dentro de la prosa. La monoespaciada tabular da densidad de dato sin
   sacar el número de la frase que lo atribuye a su fuente: 257 insolvencias
   son de Oliver Wyman, no de Sascha, y en un mosaico gigante dejarían de
   parecerlo. */
.zahl{
  font-family:var(--ff-mono);font-weight:500;
  font-variant-numeric:tabular-nums;
  font-size:.94em;letter-spacing:.005em;
}


/* --- SKIP-LINK ------------------------------------------------------------ */
.skip{
  position:absolute;left:var(--margen);top:0;z-index:50;
  transform:translateY(-150%);
  background:var(--k-marine-900);color:var(--k-blanco);
  padding:var(--sp-3) var(--sp-4);border-radius:0 0 var(--radio) var(--radio);
  font-weight:600;text-decoration:none;
}
.skip:focus{transform:translateY(0)}


/* --- CABECERA -------------------------------------------------------------
   No pegajosa: en un móvil de 390 px una cabecera fija roba un tercio de la
   pantalla útil.

   SIN REORDENAR NADA. La colocación es automática en el orden del DOM
   (marca · nav · idiomas · CTA), que es el orden que prescribe la
   arquitectura y el que oye un lector de pantalla. No se usa `order` ni
   `grid-area`: cambiar el orden visual sin cambiar el DOM rompe el recorrido
   de foco (SC 1.3.2 y 2.4.3), y era el defecto exacto de una de las
   propuestas descartadas.

   Por debajo de 700px: UNA columna, cada bloque a ancho completo, en el
   orden del DOM. (Corregido en la ronda 2 del 8-ago-2026: este comentario
   prometía un empaquetado en 2 filas —marca+nav / idiomas+CTA— que la
   rejilla de 2 columnas de abajo nunca produjo porque `.cab__panel`
   envolvía nav+idiomas+CTA como un único hijo sin tratamiento propio, y
   forzar esas 2 columnas de verdad exprimía la columna de la marca a
   ~112px, partiendo «Krahl & Partner Consulting» en varias líneas cortas.
   El nombre de marca y el subtítulo son intrínsecamente largos —27 y 49
   caracteres— y van a partirse en más de una línea en cualquier ancho de
   móvil: la solución no es una columna estrecha compartida con el CTA, es
   darle las 350 px enteras del viewport.) A partir de 700px, donde ya cabe
   sin apretar, vuelve el empaquetado en fila con las 4 columnas de abajo.
   ------------------------------------------------------------------------- */
.cab{border-bottom:1px solid var(--k-borde-suave);background:var(--k-blanco)}
.cab__in{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:var(--sp-3) var(--sp-4);
  padding-block:var(--sp-4);
}
.marca{text-decoration:none;color:inherit;display:block}
.marca__n{
  display:block;font-weight:600;font-size:1.0625rem;letter-spacing:-.005em;
  color:var(--k-marine-900);line-height:1.25;
}
/* Segunda cadena más importante de la cabecera: 12,5 px con el tracking bajado.
   A 11 px con +0,11em era ilegible a 1440. */
.marca__d{display:block;margin-top:.2rem;font-size:.78125rem;letter-spacing:.06em}

.cab__nav{justify-self:end}
.cab__nav ul{display:flex;align-items:center;gap:var(--sp-5);flex-wrap:wrap;list-style:none}
.cab__nav a{
  display:inline-block;
  font-size:.9375rem;font-weight:500;color:var(--k-tinta);
  text-decoration:none;padding-block:.55rem;
  border-bottom:2px solid transparent;
}
.cab__nav a:hover{color:var(--k-tuerkis-800);border-bottom-color:var(--k-tuerkis-700)}
.cab__nav .current-menu-item > a,
.cab__nav [aria-current="page"]{color:var(--k-marine-900);border-bottom-color:var(--k-tuerkis-700)}

.cab__cta{justify-self:end}

/* Selector de idioma: lista de enlaces, no <select>. Cada idioma escrito en su
   propio nombre, con su lang y su hreflang (SC 3.1.2). Sin banderas: una
   bandera es un estado, no un idioma. */
.idi{display:flex;align-items:stretch;gap:0;list-style:none}
.idi li{display:flex;align-items:center}
.idi li + li{border-left:1px solid var(--k-borde-suave);margin-left:.625rem;padding-left:.625rem}
.idi a{
  display:inline-block;padding-block:.5625rem;   /* destino táctil >= 32 px */
  font-family:var(--ff-mono);font-weight:500;font-size:.8125rem;letter-spacing:.06em;
  text-transform:uppercase;text-decoration:none;color:var(--k-tinta-70);
}
.idi a:hover{color:var(--k-tuerkis-800);text-decoration:underline;text-underline-offset:.2em}
.idi a[aria-current]{
  color:var(--k-marine-900);text-decoration:underline;
  text-decoration-thickness:.09em;text-underline-offset:.22em;
}

/* Botón de menú. Solo se muestra cuando hace falta un menú de verdad (más de
   cuatro entradas). Mientras la navegación tenga dos entradas, no aparece:
   un mecanismo cuesta un clic, un estado y una tecla, y aquí no compra nada. */
.cab__boton{display:none}
.no-js .cab__boton{display:none !important}   /* sin JS, el menú va desplegado */

/* `.cab__panel` transparente a la rejilla POR DEFECTO, en todos los anchos —
   no solo desde 700px. Antes esta regla vivía solo dentro de
   `@media (min-width:700px)`: por debajo de 700px `.cab__panel` caía a su
   `display:block` de `<div>` sin estilo, con navegación+idiomas+CTA
   apilados dentro de una sola pista de la rejilla de 2 columnas de
   `.cab__in` mientras la marca ocupaba la otra, exprimida a ~112px.
   Hallazgo ronda 2 (8-ago-2026), verificado con getBoundingClientRect a
   390px: cabecera de ~160px con la marca partida en 3 líneas cortas.
   `display:contents` hace que nav/idiomas/CTA entren como hijos directos de
   `.cab__in`, que por debajo de 700px es ahora una única columna (ver
   bloque de abajo): cada uno a ancho completo, en el orden del DOM. La
   variante `.cab--plegable` (5+ entradas, con JS) lo revierte a una caja
   real más abajo, porque ahí el panel sí tiene que poder ocultarse/mostrarse
   como menú desplegable. */
.cab__panel{display:contents}
.cab__panel[hidden]{display:contents}

@media (max-width:699px){
  /* Una columna, no dos: con `minmax(0,1fr) auto` la pista `auto` se
     dimensiona por el hijo más ancho de TODA la columna (el CTA,
     «Erstgespräch vereinbaren», ~222px) en las dos filas a la vez, y eso
     exprimía la columna de la marca. En una sola columna cada bloque recibe
     el ancho completo del viewport y ya no hace falta exprimir nada. */
  .cab__in{grid-template-columns:1fr;row-gap:var(--sp-4)}
  .cab__nav,.cab__cta{justify-self:start}

  .cab--plegable .cab__boton{
    display:inline-flex;align-items:center;gap:var(--sp-2);
    min-height:44px;padding:.5rem .9rem;
    background:transparent;border:1.5px solid var(--k-tuerkis-700);border-radius:var(--radio);
    color:var(--k-tuerkis-700);font:inherit;font-size:.9375rem;font-weight:600;cursor:pointer;
    justify-self:end;
  }
  .cab--plegable .cab__boton[aria-expanded="true"]{background:var(--k-nieve)}
  /* Aquí SÍ hace falta una caja real: es el menú desplegable que el botón
     abre y cierra. Pisa el `display:contents` de la regla base de arriba. */
  .cab--plegable .cab__panel{display:block;grid-column:1 / -1}
  .cab--plegable .cab__panel[hidden]{display:none}
}

@media (min-width:700px){
  .cab__in{
    grid-template-columns:minmax(0,1fr) auto auto auto;
    gap:var(--sp-4) var(--sp-8);
  }
  .cab__panel{display:contents}
  .cab__panel[hidden]{display:contents}
}
@media (min-width:900px){
  .cab__in{min-height:88px}
}


/* --- BOTONES Y ENLACES -----------------------------------------------------
   Dos botones, y ni uno más. Relleno turquesa = la única acción del sitio.
   Contorno marino = la misma acción cuando vive dentro de la navegación, o sea
   subordinada. Si un tercer estilo de botón aparece algún día, es que se ha
   inventado una tercera acción, y no hay tercera acción.
   ------------------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.875rem 1.75rem;border-radius:var(--radio);
  font:inherit;font-weight:600;font-size:1rem;line-height:1.2;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  text-align:center;
  transition:background-color 160ms linear,border-color 160ms linear,color 160ms linear;
}
.btn--acento{background:var(--k-tuerkis-700);color:var(--k-blanco)}
.btn--acento:hover{background:var(--k-tuerkis-800);color:var(--k-blanco)}
.btn--acento[disabled],.btn--acento[aria-disabled="true"]{
  background:var(--k-tinta-60);cursor:not-allowed;
}
.btn--linea{
  background:transparent;color:var(--k-tuerkis-700);border-color:var(--k-tuerkis-700);
  padding:.6rem 1.1rem;font-size:.9375rem;
}
.btn--linea:hover{color:var(--k-tuerkis-800);border-color:var(--k-tuerkis-800);background:var(--k-nieve)}

/* Enlace de texto: subrayado SIEMPRE. Nunca solo color (SC 1.4.1). */
.enl{
  color:var(--k-tuerkis-700);font-weight:500;
  text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.08em;
}
.enl:hover{color:var(--k-marine-900)}

.correo{
  display:inline-block;padding-block:.4375rem;   /* destino aislado >= 24 px */
  font-family:var(--ff-mono);font-weight:500;font-size:.9375rem;letter-spacing:.01em;
  color:var(--k-tuerkis-700);overflow-wrap:anywhere;
}


/* --- EL REGISTRO -----------------------------------------------------------
   El único primitivo de composición. Marca de cota de 2 px que mide la
   distancia hasta la línea de referencia, rótulo debajo, contenido empezando
   en esa línea. Cuerpo y pie se acotan desde la misma x.
   ------------------------------------------------------------------------- */
.reg{display:grid;gap:var(--sp-3)}
.reg__rot{margin:0}
.reg__rot::before{
  content:"";display:block;width:2.5rem;height:2px;
  background:var(--k-tuerkis-700);margin-bottom:.625rem;
}
.reg__cuerpo{min-width:0}

@media (min-width:900px){
  .reg{grid-template-columns:var(--datum) minmax(0,1fr);gap:0}
  .reg__rot{grid-column:1;padding-right:var(--sp-8);padding-top:1.2rem}  /* a la línea base del H2 */
  .reg__rot::before{width:calc(var(--datum) - var(--sp-8))}
  /* Explícito, no confiar en el auto-placement: si `.reg__rot` no existe como
     hermano (page.php, single.php, archive.php, index.php, 404.php no lo
     emiten), el grid metía `.reg__cuerpo` en la pista de 200 px por ser el
     primer/único hijo — la página entera se renderizaba en una columna
     estrecha. Fijar la pista 2 explícitamente lo hace correcto exista o no
     `.reg__rot`. Hallazgo ronda 2 (8-ago-2026), verificado con
     getBoundingClientRect en /leistungen/, /kontakt/, /impressum/. */
  .reg__cuerpo{grid-column:2}
}


/* --- SECCIONES -------------------------------------------------------------
   El ritmo (--ritmo) es la distancia ENTRE secciones, no el relleno de cada
   una: dos secciones seguidas suman sus dos rellenos. Por eso la sección
   suelta lleva la mitad larga y la banda lleva el entero — una banda necesita
   más aire por dentro que un simple cambio de asunto.
   ------------------------------------------------------------------------- */
.sec{padding-block:calc(var(--ritmo) * .62)}
.sec--nieve{background:var(--k-nieve);padding-block:var(--ritmo)}
.sec--tuerkis{background:var(--k-tuerkis-hell);padding-block:var(--ritmo)}
.sec h2{
  font-size:clamp(1.875rem,1.6rem + 1.2vw,2.375rem);line-height:1.22;letter-spacing:-.01em;
  margin-bottom:var(--sp-4);max-width:26ch;
}
.sec h3{font-size:clamp(1.5rem,1.35rem + .7vw,1.75rem);line-height:1.3;letter-spacing:-.005em}


/* --- HÉROE -----------------------------------------------------------------
   Banda --k-nieve A SANGRE, de lado a lado del viewport, con el filete
   turquesa de 3 px pegado al borde inferior. Es lo único que impide que la composición
   se lea como una cinta a la izquierda con 400 px muertos a la derecha a 1440.
   El gesto es horizontal a propósito: el registro es vertical, y sin un gesto
   que cruce, el sistema no tiene contrapunto en toda la página.
   ------------------------------------------------------------------------- */
.hero{
  background:var(--k-nieve);
  border-bottom:3px solid var(--k-tuerkis-700);   /* decorativo: nada depende de verlo */
  padding-block:clamp(3.25rem,8vw,6.5rem);
}

/* Línea de encabezamiento sobre el H1: resuelve categoría, sector y mercado
   antes de que hable el titular. Es la ganancia más barata en la prueba de los
   cinco segundos, y el raíl izquierdo del héroe estaba libre esperándola. */
.hero__datum{margin:0 0 var(--sp-5);color:var(--k-tinta-70)}

.hero h1{
  font-size:clamp(2.5rem,1.9rem + 3.1vw,3.75rem);line-height:1.08;letter-spacing:-.022em;
  max-width:22ch;
  text-wrap:balance;
}
/* CORTE CONTROLADO DEL TITULAR. La segunda mitad va en su propio bloque, así
   que el corte cae siempre en la cesura y no depende de qué fuente cargue ni
   de lo que decida `text-wrap:balance`. El punto de corte lo marca cada idioma
   con una barra vertical en su propia traducción: la cesura del alemán no es
   la del español. */
.hero h1 .h1__b{display:block}
@media (min-width:900px){
  /* El guion sale al margen: la línea óptica arranca donde arranca la primera.
     Solo a partir de 900 px, que es donde hay margen del que colgarlo. */
  .hero h1 .h1__b--guion{margin-left:-.52em}
}

.hero__sub{
  margin-top:var(--sp-6);
  font-size:clamp(1.1875rem,1.1rem + .4vw,1.375rem);line-height:1.55;
  color:var(--k-tinta-70);max-width:var(--medida-corta);text-wrap:pretty;
}
.hero__acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);margin-top:var(--sp-10)}

/* HUECO DEL RETRATO. No se dibuja hoy: mientras no exista la fotografía, el
   héroe va a una columna y no hay recuadro vacío en el sitio más visible de la
   página. Lo que sí queda escrito es la proporción, para que el día que entre
   la imagen el CLS siga siendo cero. Nunca un campo reservado en el primer
   viewport: un recuadro con un número de ticket al lado del CTA es decoración
   dirigida a la agencia, no al comprador. */
.hero__retrato{display:none}
.hero:has(.hero__retrato img) .hero__cuerpo{min-width:0}
@media (min-width:900px){
  .hero:has(.hero__retrato img) .reg__cuerpo{
    display:grid;grid-template-columns:minmax(0,1fr) 40%;gap:var(--sp-12);align-items:start;
  }
  .hero:has(.hero__retrato img) .hero__retrato{display:block}
}
.hero__retrato img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;
  border-radius:var(--radio);
}


/* --- BLOQUE CITABLE --------------------------------------------------------
   Fondo azul claro, filete izquierdo de 4 px. Va en el primer tercio de la
   página y tiene que pasar la prueba del recorte: copiado solo, en un
   documento en blanco, sigue teniendo sentido y sigue siendo verdad.
   Es además el CÓDIGO DE VOZ del sitio: donde aparece este filete, habla
   Sascha. Por eso lo llevan también la frase pivote del bloque de mercado y
   las respuestas del FAQ, y por eso NO lo lleva la prosa de mercado, que es
   de Oliver Wyman, de EY y del VDA.
   ------------------------------------------------------------------------- */
.citable{
  background:var(--k-tuerkis-hell);
  border-left:4px solid var(--k-tuerkis-700);
  padding:var(--sp-6) var(--sp-8);
  max-width:var(--medida);
}
.citable p{font-size:1.0625em;line-height:1.6}
.citable + .citable{margin-top:var(--sp-6)}

/* La misma voz, sin la caja: para cuando el bloque va dentro de otra banda. */
.voz{
  border-left:4px solid var(--k-tuerkis-700);
  padding-left:var(--sp-6);
  max-width:var(--medida);
}


/* --- ÍNDICE DE PÁGINA ------------------------------------------------------
   Convierte los rótulos del margen en un sistema de referencia real en lugar
   de cinco etiquetas decorativas. Va DESPUÉS del bloque citable a propósito:
   ningún índice se pone por delante de lo que un motor tiene que extraer.
   Ayuda al usuario de teclado, habilita enlaces profundos y pesa cero.
   ------------------------------------------------------------------------- */
.inhalt{padding-block:var(--sp-8);border-block:1px solid var(--k-borde-suave)}
.inhalt ol{
  list-style:none;display:flex;flex-wrap:wrap;
  gap:var(--sp-3) var(--sp-8);counter-reset:k;
}
.inhalt li{counter-increment:k}
.inhalt a{
  display:inline-flex;align-items:baseline;gap:.55rem;
  padding-block:.3rem;text-decoration:none;color:var(--k-tinta);
  font-size:.9375rem;font-weight:500;
}
.inhalt a::before{
  content:counter(k,decimal-leading-zero);
  font-family:var(--ff-mono);font-weight:500;font-size:.75rem;letter-spacing:.06em;
  color:var(--k-tuerkis-700);font-variant-numeric:tabular-nums;
}
.inhalt a:hover{color:var(--k-tuerkis-800);text-decoration:underline;text-underline-offset:.2em}


/* --- DOS COLUMNAS DE TRABAJO ---------------------------------------------- */
.cols{display:grid;gap:var(--sp-8);margin-top:var(--sp-8)}
.col h3{margin-bottom:var(--sp-3)}
.col p{color:var(--k-tinta);max-width:44ch}
/* El orden importa: esta regla va ANTES del @media, porque su margin-top
   anularía el `margin-top:auto` que alinea los dos enlaces. */
.col .enl{align-self:start;margin-top:var(--sp-6);padding-block:.25rem}
@media (min-width:600px){
  .cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-12);align-items:stretch}
  .cols > * + *{border-left:1px solid var(--k-borde-suave);padding-left:var(--sp-12)}
  /* Los dos enlaces caen en la misma línea aunque los párrafos midan distinto:
     si no, el ojo lee dos columnas desalineadas y el sistema deja de leerse. */
  .col{display:flex;flex-direction:column}
  .col .enl{margin-top:auto;padding-top:var(--sp-6)}
}


/* --- REGISTRO DE FUENTES ---------------------------------------------------
   La única tabla del sitio y el componente que ningún comparable tiene: qué se
   afirma, quién lo midió, cuándo se publicó y cuándo lo comprobamos NOSOTROS.
   Aparato de informe, no tarjeta de estadística.
   ------------------------------------------------------------------------- */
.fuentes{margin-top:var(--sp-12);width:100%}
.fuentes caption{text-align:left;padding-bottom:var(--sp-3)}
.fuentes th,.fuentes td{text-align:left;vertical-align:top;padding:var(--sp-4) var(--sp-6) var(--sp-4) 0}
.fuentes thead th{
  border-top:2px solid var(--k-marine-900);border-bottom:1px solid var(--k-borde-suave);
  padding-block:var(--sp-2);
}
.fuentes tbody th{font-weight:600;color:var(--k-marine-900);white-space:nowrap}
.fuentes tbody tr + tr th,.fuentes tbody tr + tr td{border-top:1px solid var(--k-borde-suave)}
.fuentes .fecha{
  font-family:var(--ff-mono);font-weight:500;font-variant-numeric:tabular-nums;
  white-space:nowrap;color:var(--k-tinta-70);
}
.fuentes td:last-child,.fuentes th:last-child{padding-right:0}

/* La frase que hace creíble todo lo demás. Envejece sola: se revalida con
   fecha nueva en cada republicación o se retira. Si una URL da 404 se retira
   LA FRASE que depende de ella, no solo el enlace. */
.fuentes__geprueft{
  margin-top:var(--sp-4);font-size:.875rem;color:var(--k-tinta-70);
  font-family:var(--ff-mono);font-weight:500;letter-spacing:.02em;
}
.fuentes__geprueft time{font-variant-numeric:tabular-nums}

/* Llamada volada: ata cada afirmación a la fila del registro que la sostiene.
   Es lo que un motor generativo necesita para citar con procedencia. */
.nota-ref{font-size:.68em;line-height:0;vertical-align:super}
.nota-ref a{
  font-family:var(--ff-mono);font-weight:500;text-decoration:none;
  padding-inline:.15em;color:var(--k-tuerkis-700);
}
.nota-ref a:hover{text-decoration:underline}

@media (max-width:699px){
  /* Debajo de 700 px la tabla se apila. La SEMÁNTICA no cambia: sigue siendo
     una tabla con th scope, y solo se oculta visualmente la fila de
     encabezado. Un lector de pantalla lee exactamente lo mismo en las dos
     anchuras. */
  .fuentes thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .fuentes tbody tr{display:block;padding-block:var(--sp-4)}
  .fuentes tbody tr:first-child{border-top:2px solid var(--k-marine-900)}
  .fuentes tbody tr + tr{border-top:1px solid var(--k-borde-suave)}
  .fuentes tbody th,.fuentes tbody td{display:block;padding:0;border:0}
  .fuentes tbody th{
    font-family:var(--ff-mono);font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;
    font-weight:500;color:var(--k-tinta-70);margin-bottom:var(--sp-1);white-space:normal;
  }
  .fuentes tbody .fecha{margin-top:var(--sp-2)}
}


/* --- PREGUNTAS -------------------------------------------------------------
   Sin acordeón, por decisión de arquitectura y no por descuido. Tres preguntas
   cortas no necesitan un mecanismo: abrirlas cuesta un clic, un estado y una
   tecla, esconde el texto de los motores generativos y deja los encabezados
   fuera del primer paint. Los tres H3 salen como encabezados reales.

   Regla del sistema: los FILETES abarcan la columna de contenido entera; el
   TEXTO se para en su medida. Así el registro de fuentes y el de preguntas se
   leen como el mismo componente, que es lo que son.
   ------------------------------------------------------------------------- */
.faq{margin-top:var(--sp-8)}
.faq__item{border-top:1px solid var(--k-borde-suave);padding-block:var(--sp-8)}
.faq__item:first-child{border-top:2px solid var(--k-marine-900)}
.faq__item:last-child{padding-bottom:0}
.faq h3{margin-bottom:var(--sp-4);max-width:34ch}
/* El mismo filete azul de 4 px del bloque citable: sin que nadie se lo diga,
   el lector aprende que en las respuestas sigue hablando él. */
.faq__item p{
  max-width:var(--medida);
  border-left:4px solid var(--k-tuerkis-700);
  padding-left:var(--sp-5);
}


/* --- CIERRE: GESPRÄCHSKARTE ------------------------------------------------
   El único sitio donde el sistema se rompe a propósito es donde se pide la
   conversación. Tarjeta blanca con canto turquesa sobre la banda turquesa
   clara: la tarjeta NO se distingue por su fondo (1,10 contra la banda), la
   distingue el canto (5,32, recalculado con `_scratch/contraste-tema.py` sobre
   la paleta marino+turquesa vigente). Por eso el canto no es decoración.
   ------------------------------------------------------------------------- */
.gespraech{
  background:var(--k-blanco);
  border-left:6px solid var(--k-tuerkis-700);
  border-radius:0 var(--radio) var(--radio) 0;
  padding:var(--sp-10) clamp(var(--sp-6),4vw,var(--sp-12));
  max-width:46rem;
}
.gespraech h2{margin-bottom:var(--sp-4)}
.gespraech__acc{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-6);margin-top:var(--sp-8)}


/* --- MIGAS DE PAN --------------------------------------------------------- */
.migas{padding-block:var(--sp-6) 0}
.migas ol{list-style:none;display:flex;flex-wrap:wrap;gap:.35rem .5rem;font-size:.875rem}
.migas li{display:flex;align-items:center;gap:.5rem;color:var(--k-tinta-70)}
.migas li + li::before{content:"›";color:var(--k-tinta-60)}
.migas a{color:var(--k-tuerkis-700);text-decoration:underline;text-underline-offset:.18em}
.migas [aria-current="page"]{color:var(--k-tinta-70)}


/* --- CONTENIDO EDITORIAL (page / single / archive) ------------------------ */
.entrada{padding-block:calc(var(--ritmo) * .62)}
.entrada__cab{margin-bottom:var(--sp-10)}
.entrada h1{
  font-size:clamp(2.125rem,1.7rem + 2vw,3rem);line-height:1.12;letter-spacing:-.018em;
  max-width:24ch;
}
.entrada__meta{margin-top:var(--sp-4);display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
.entrada__meta time{font-variant-numeric:tabular-nums}

/* Firma y fechas visibles — inc/geo.php §4. Los modelos leen el TEXTO
   RENDERIZADO, no solo el schema: por eso la autoría y las fechas van en el
   documento y no únicamente en el JSON-LD. */
.firma{
  font-family:var(--ff-mono);font-weight:500;font-size:.9375rem;
  color:var(--k-marine-900);
}
.firma a{color:var(--k-marine-900);text-decoration:underline;text-underline-offset:.18em}
.fechas{
  margin-top:var(--sp-1);font-size:.8125rem;color:var(--k-tinta-70);
  font-variant-numeric:tabular-nums;
}
.fechas time{font-family:var(--ff-mono)}

/* Bloque citable de artículo — krahl_geo_bloque_citable() en inc/geo.php §5.
   Mismo filete que el `.citable` de la portada: es el mismo código de voz. */
.citable .respuesta{font-size:1.0625em;font-weight:500;line-height:1.55;color:var(--k-marine-900)}
.citable .desarrollo{margin-top:var(--sp-3);color:var(--k-tinta)}
.citable .desarrollo > * + *{margin-top:1.35em}
.citable .stand{
  margin-top:var(--sp-4);font-family:var(--ff-mono);font-size:.8125rem;
  color:var(--k-tinta-70);border-top:1px dashed var(--k-borde-suave);padding-top:var(--sp-2);
}

/* Línea «fuentes comprobadas el …» — krahl_geo_fuentes_revisadas(). Misma
   voz tipográfica que .fuentes__geprueft de la portada. */
.fuentes-revisadas{
  margin-top:var(--sp-4);font-size:.875rem;color:var(--k-tinta-70);
  font-family:var(--ff-mono);font-weight:500;letter-spacing:.02em;
}
.fuentes-revisadas time{font-variant-numeric:tabular-nums}

.contenido{max-width:var(--medida)}
.contenido > * + *{margin-top:1.35em}
.contenido h2{
  font-size:clamp(1.625rem,1.45rem + .9vw,2rem);line-height:1.25;
  margin-top:2.2em;margin-bottom:.5em;max-width:26ch;
}
.contenido h3{
  font-size:clamp(1.3125rem,1.2rem + .6vw,1.5rem);line-height:1.3;
  margin-top:1.8em;margin-bottom:.4em;max-width:32ch;
}
.contenido h4{font-size:1.125rem;margin-top:1.6em;margin-bottom:.35em}
.contenido a{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.08em}
.contenido ul,.contenido ol{padding-left:1.35em;margin-block:1.35em}
.contenido ul{list-style:disc}
.contenido ol{list-style:decimal}
.contenido li + li{margin-top:.5em}
.contenido li::marker{color:var(--k-tuerkis-700)}
.contenido blockquote{
  margin:1.8em 0;padding-left:var(--sp-6);
  border-left:4px solid var(--k-tuerkis-700);color:var(--k-tinta);
}
.contenido figure{margin:2em 0}
.contenido figcaption{margin-top:var(--sp-3);font-size:.875rem;color:var(--k-tinta-70)}
.contenido table{width:100%;margin-block:2em;font-size:.9375rem}
.contenido th,.contenido td{
  text-align:left;vertical-align:top;padding:var(--sp-3) var(--sp-4) var(--sp-3) 0;
  border-bottom:1px solid var(--k-borde-suave);
}
.contenido thead th{border-bottom:2px solid var(--k-marine-900);color:var(--k-marine-900)}
.contenido code,.contenido kbd{font-family:var(--ff-mono);font-size:.9em;background:var(--k-nieve);padding:.1em .35em;border-radius:2px}
.contenido pre{
  font-family:var(--ff-mono);font-size:.875rem;background:var(--k-nieve);
  padding:var(--sp-4);border-radius:var(--radio);overflow-x:auto;
}
.contenido pre code{background:none;padding:0}
.contenido hr{border:0;border-top:1px solid var(--k-borde-suave);margin-block:2.5em}
/* Cualquier tabla ancha rueda dentro de su propio contenedor: el cuerpo de la
   página no hace scroll horizontal nunca. */
.tabla-rueda{overflow-x:auto;-webkit-overflow-scrolling:touch}

.paginacion{
  margin-top:var(--sp-16);padding-top:var(--sp-8);
  border-top:1px solid var(--k-borde-suave);
  display:flex;flex-wrap:wrap;gap:var(--sp-4);
}
.paginacion .page-numbers{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;padding:0 .75rem;border-radius:var(--radio);
  text-decoration:none;color:var(--k-tuerkis-700);border:1px solid var(--k-borde-suave);
  font-variant-numeric:tabular-nums;
}
.paginacion .page-numbers:hover{background:var(--k-nieve);border-color:var(--k-tuerkis-700)}
.paginacion .page-numbers.current{
  background:var(--k-marine-900);color:var(--k-blanco);border-color:var(--k-marine-900);font-weight:600;
}

/* Listado de piezas */
.lista{list-style:none;margin-top:var(--sp-8)}
.lista > li{border-top:1px solid var(--k-borde-suave);padding-block:var(--sp-8)}
.lista > li:first-child{border-top:2px solid var(--k-marine-900)}
.teaser h2,.teaser h3{
  font-size:clamp(1.375rem,1.25rem + .6vw,1.625rem);line-height:1.3;margin-bottom:var(--sp-3);
  max-width:30ch;
}
.teaser h2 a,.teaser h3 a{color:inherit;text-decoration:none}
.teaser h2 a:hover,.teaser h3 a:hover{text-decoration:underline;text-underline-offset:.18em}
.teaser__fecha{display:block;margin-bottom:var(--sp-2);font-variant-numeric:tabular-nums}
.teaser p{max-width:var(--medida);color:var(--k-tinta-70)}
.teaser .enl{display:inline-block;margin-top:var(--sp-4);padding-block:.25rem}

/* Barra lateral opcional de single.php (widget-area "lateral" de setup.php).
   Vacía por defecto: mientras no haya widgets, `.sin-lateral` en el <body>
   mantiene una sola columna y esta regla no se aplica a nada. */
.entrada--con-lateral .wrap.reg{max-width:none}
@media (min-width:64rem){
  .entrada--con-lateral .reg__cuerpo{
    display:grid;grid-template-columns:minmax(0,1fr) 20rem;gap:var(--sp-12);align-items:start;
  }
  .entrada--con-lateral .entrada__principal{min-width:0}
  .entrada--con-lateral .contenido{max-width:none}
}
.lateral .widget + .widget{margin-top:var(--sp-10)}
.lateral .widget h2{margin-bottom:var(--sp-3)}


/* --- FORMULARIO ------------------------------------------------------------
   Los bordes de los campos SÍ portan información (dónde se escribe): por eso
   usan --k-borde-control (3,99 sobre blanco), no --k-borde-suave (1,39).
   ------------------------------------------------------------------------- */
.form{max-width:38rem;margin-top:var(--sp-8)}
.form__leyenda{margin-bottom:var(--sp-8);color:var(--k-tinta-70);font-size:.9375rem}
.form__campo + .form__campo{margin-top:var(--sp-6)}
.form__campo label,.form__grupo legend{
  display:block;font-weight:600;font-size:.9375rem;color:var(--k-marine-900);
  margin-bottom:var(--sp-2);
}
.form__ayuda{display:block;margin-bottom:var(--sp-2);font-size:.875rem;color:var(--k-tinta-70)}
.form__req{color:var(--k-error);font-weight:700}

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="search"],
.form select,
.form textarea{
  width:100%;min-height:44px;padding:.6875rem .875rem;
  font:inherit;font-size:1rem;color:var(--k-tinta);
  background:var(--k-blanco);
  border:1.5px solid var(--k-borde-control);border-radius:var(--radio);
}
.form textarea{min-height:11rem;resize:vertical;line-height:1.6}
.form select{appearance:none;padding-right:2.5rem;
  background-image:linear-gradient(45deg,transparent 50%,var(--k-tinta-70) 50%),
                   linear-gradient(135deg,var(--k-tinta-70) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px),calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat;
}
.form input::placeholder,.form textarea::placeholder{color:var(--k-tinta-60);opacity:1}

.form [aria-invalid="true"]{border-color:var(--k-error);border-width:2px}
.form__error{
  display:block;margin-top:var(--sp-2);
  color:var(--k-error);font-size:.875rem;font-weight:500;
}
/* El error nunca se señala solo con color: además del rojo hay texto, el
   borde engordado y la entrada en el resumen de arriba (SC 1.4.1, SC 3.3.1). */
.form__error::before{content:"▲ ";font-size:.8em}

.form__resumen{
  margin-bottom:var(--sp-8);padding:var(--sp-5) var(--sp-6);
  background:var(--k-error-fondo);border-left:4px solid var(--k-error);
  border-radius:0 var(--radio) var(--radio) 0;
}
.form__resumen h2,.form__resumen p:first-child{
  font-size:1rem;font-weight:600;color:var(--k-error);margin-bottom:var(--sp-3);
}
.form__resumen ul{list-style:disc;padding-left:1.35em}
.form__resumen li + li{margin-top:.35em}
.form__resumen a{color:var(--k-error);font-weight:500}

.form__casilla{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-3);align-items:start}
.form__casilla input[type="checkbox"]{
  width:1.375rem;height:1.375rem;margin:.1rem 0 0;flex:none;
  accent-color:var(--k-tuerkis-700);
}
.form__casilla label{margin:0;font-weight:400;font-size:.9375rem;line-height:1.55;color:var(--k-tinta)}
.form__casilla + .form__casilla{margin-top:var(--sp-6)}
/* El mensaje ocupa la fila entera: alineado bajo el texto, no bajo la casilla. */
.form__casilla .form__error{grid-column:1 / -1}

.form__opciones{display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-6)}
.form__opcion{display:flex;align-items:center;gap:var(--sp-2);min-height:44px}
.form__opcion input[type="radio"]{width:1.25rem;height:1.25rem;accent-color:var(--k-tuerkis-700)}
.form__opcion label{margin:0;font-weight:400}

.form__acc{margin-top:var(--sp-10)}
/* Trampa de miel: fuera de la vista y fuera del recorrido de foco y del árbol
   de accesibilidad. Nunca `display:none`, que algunos rellenadores detectan. */
.form__miel{
  position:absolute !important;left:-9999px !important;
  width:1px;height:1px;overflow:hidden;
}

/* Capa 1 de privacidad. Es el único <details> del sitio y está justificado:
   es texto legal de consulta, no una objeción comercial que haya que
   responder antes de que la pregunten. */
.privacidad{
  margin-top:var(--sp-8);border:1px solid var(--k-borde-suave);
  border-radius:var(--radio);background:var(--k-nieve);
}
.privacidad > summary{
  padding:var(--sp-4) var(--sp-5);cursor:pointer;
  font-family:var(--ff-mono);font-weight:500;font-size:.8125rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--k-marine-900);
  list-style-position:inside;
}
.privacidad > summary::marker{color:var(--k-tuerkis-700)}
.privacidad__cuerpo{padding:0 var(--sp-5) var(--sp-5);font-size:.9375rem;line-height:1.6}
.privacidad__cuerpo dt{font-weight:600;color:var(--k-marine-900);margin-top:var(--sp-4)}
.privacidad__cuerpo dt:first-child{margin-top:0}
.privacidad__cuerpo dd{margin:.2rem 0 0}


/* --- BUSCADOR ------------------------------------------------------------- */
.buscador{display:flex;flex-wrap:wrap;gap:var(--sp-3);max-width:32rem;margin-top:var(--sp-6)}
.buscador label{
  flex-basis:100%;font-weight:600;font-size:.9375rem;color:var(--k-marine-900);
  margin-bottom:var(--sp-1);
}
.buscador input[type="search"]{
  flex:1 1 14rem;min-width:0;min-height:44px;padding:.6875rem .875rem;
  font:inherit;font-size:1rem;color:var(--k-tinta);background:var(--k-blanco);
  border:1.5px solid var(--k-borde-control);border-radius:var(--radio);
}


/* --- 404 y páginas de utilidad -------------------------------------------- */
.utilidad{padding-block:clamp(3rem,8vw,6rem)}
.utilidad h1{
  font-size:clamp(2.125rem,1.7rem + 2vw,3rem);line-height:1.12;letter-spacing:-.018em;
  max-width:20ch;
}
.utilidad__salidas{list-style:none;display:flex;flex-wrap:wrap;gap:var(--sp-4) var(--sp-8);margin-top:var(--sp-10)}
.utilidad__salidas a{display:inline-block;padding-block:.35rem}


/* --- PIE: EL SCHRIFTFELD ---------------------------------------------------
   La identidad legal del sitio se lee como el cajetín de un plano: celdas con
   filete de un pelo, rótulo en el margen, contenido sobre la línea de
   referencia. Es la misma retícula del cuerpo; lo que cambia es que aquí las
   filas se encajonan. Se injerta la RETÍCULA, no las cajas de trazo
   discontinuo con códigos de ticket dentro: el cartel de obra se queda en el
   sótano, y en el sótano quiere decir los dos huecos de los emblemas, no el
   resto del pie.
   ------------------------------------------------------------------------- */
.pie{
  background:var(--k-marine-900);color:var(--k-pie-texto);
  padding-block:var(--sp-16) var(--sp-12);
}
.pie a{color:var(--k-tuerkis-claro)}
.pie a:hover{color:var(--k-blanco)}

.pie__campo{border:1px solid var(--k-pie-linea-fuerte)}
.pie__fila{padding:var(--sp-6) var(--sp-5)}
.pie__fila + .pie__fila{border-top:1px solid var(--k-pie-linea)}
.pie h2{
  font-family:var(--ff-mono);font-weight:500;font-size:.8125rem;line-height:1.4;
  letter-spacing:.1em;text-transform:uppercase;color:var(--k-tuerkis-claro);margin:0 0 var(--sp-3);
}
.pie address{font-style:normal;line-height:1.7}
.pie__marca{color:var(--k-blanco);font-weight:600}
.pie__lista{display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6);line-height:1.7;list-style:none}
.pie__lista a{display:inline-block;padding-block:.25rem}   /* destino aislado >= 24 px */
.pie__glosa{max-width:60ch;font-size:.9375rem;line-height:1.6}
.pie__glosa + .pie__glosa{margin-top:var(--sp-3)}
.pie__logos{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-bottom:var(--sp-6);align-items:center}
.pie__logos img{max-height:4.5rem;width:auto}

/* Campo reservado. Es la ÚNICA convención de trazo discontinuo del sitio y
   vive únicamente aquí: no se dibuja un emblema que no tenemos, y tampoco se
   rellena con un banco de imágenes. Nunca en el primer viewport. */
.hueco{
  width:8.5rem;height:4.5rem;border:1px dashed var(--k-tuerkis-borde);border-radius:var(--radio);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--k-pie-texto);padding:var(--sp-2);line-height:1.3;
}

.pie__cierre{margin-top:var(--sp-8);font-size:.9375rem;line-height:1.7}
.pie__cierre p + p{margin-top:var(--sp-2)}

@media (min-width:900px){
  .pie__fila{display:grid;grid-template-columns:var(--datum) minmax(0,1fr);gap:0;padding-inline:var(--sp-6)}
  .pie h2{padding-right:var(--sp-8);margin-bottom:0}
  .pie__cierre-in{display:grid;grid-template-columns:var(--datum) minmax(0,1fr);gap:0}
  .pie__cierre-in > :first-child{grid-column:2}
}


/* --- IMPRESIÓN -------------------------------------------------------------
   El comprador industrial alemán imprime y hace circular el papel. En papel,
   una fuente sin su URL no es una fuente: por eso los enlaces del registro y
   de la prosa de mercado sacan su href detrás. Los enlaces de navegación NO
   lo hacen: en una hoja impresa, «Kontakt (https://…/kontakt/)» es ruido.
   ------------------------------------------------------------------------- */
@media print{
  :root{--ritmo:1.5rem;--margen:0}
  *{background:transparent !important;color:#000 !important;box-shadow:none !important}
  body{font-size:11pt;line-height:1.45}
  .skip,.cab__nav,.cab__cta,.cab__boton,.idi,.inhalt,.buscador,.paginacion,
  .form__acc,.gespraech__acc,.hero__acc,.utilidad__salidas,.hueco{display:none !important}
  .cab,.pie{border:0}
  .hero{border-bottom:1pt solid #000;padding-block:0 1rem}
  .sec,.sec--nieve,.sec--tuerkis,.entrada{padding-block:.6rem;break-inside:auto}
  .reg{display:block}
  .reg__rot{margin-bottom:.25rem}
  .reg__rot::before{background:#000;width:2.5rem !important}
  h1,h2,h3{break-after:avoid-page}
  h1{font-size:20pt}h2{font-size:14pt}h3{font-size:12pt}
  .citable,.voz,.faq__item p,.gespraech{border-left:2pt solid #000;background:transparent !important}
  .fuentes{break-inside:avoid}
  .fuentes th,.fuentes td{border-color:#000 !important}
  /* La URL detrás del enlace, SOLO donde la procedencia es el contenido. */
  .fuentes a::after,.prosa a[href^="http"]::after{
    content:" (" attr(href) ")";
    font-family:monospace;font-size:8.5pt;word-break:break-all;
  }
  a[href^="mailto:"]::after{content:""}
  .pie__campo{border:1pt solid #000}
  .pie__fila + .pie__fila{border-top:1pt solid #000}
}


/* ============================================================================
   ANILLO DE FOCO — LA ÚLTIMA REGLA DE LA HOJA, A PROPÓSITO.

   Va aquí y no arriba por dos motivos, y los dos son de fallo mudo:

   1. NO usa `:where()`. `:where()` tiene especificidad CERO: cualquier regla
      que WordPress, un plugin, un bloque del editor o un tema hijo añada
      después se la come EN SILENCIO, y nadie se entera hasta que un usuario de
      teclado se queda sin saber dónde está. Es el fallo exacto de la web que
      el cliente puso de referencia.
   2. Va la última para que ninguna regla POSTERIOR de esta misma hoja pueda
      anularla. Si alguien añade CSS debajo de este bloque, lo está haciendo a
      sabiendas.

   Nunca `outline:none` sin sustituto (SC 2.4.7 + SC 1.4.11).
   ========================================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--k-marine-900);
  outline-offset:2px;
  /* El separador blanco no es adorno: sobre el botón turquesa el anillo
     marino directo solo daría 2,32 (falla el 3:1 de SC 1.4.11), y el
     separador blanco que se interpone entre los dos da 5,84 — recalculado
     con `_scratch/contraste-tema.py` sobre la paleta marino+turquesa vigente. */
  box-shadow:0 0 0 2px var(--k-blanco);
  border-radius:2px;
}

/* Sobre la banda oscura del pie el anillo azul da 1,00 contra el fondo. Ahí se
   invierte: anillo blanco (14,39) con separador oscuro. Es más robusto que
   fiarlo todo al halo blanco de 2 px. */
.pie a:focus-visible,
.pie button:focus-visible{
  outline-color:var(--k-blanco);
  box-shadow:0 0 0 2px var(--k-marine-900);
}

/* El destino del skip-link recibe foco programático: se le marca, pero sin el
   halo, que sobre un bloque de 1200 px de ancho no dice nada. */
main:focus-visible{
  outline:3px solid var(--k-marine-900);
  outline-offset:-3px;
  box-shadow:none;
}