` que el propio `the_content` inyecta en
tiempo de render (`krahl_tablas_ruedan()` en `inc/setup.php`, filtro
previo a este reskin, no tocado hoy) — y ese `div` YA tiene
`overflow-x:auto` (regla `.tabla-rueda` de abajo, preexistente).
2. El "arreglo" de esta mañana puso una SEGUNDA capa de scroll en la propia
`
` (`display:block` + `overflow-x:auto` + `max-width:100%`). Ese
`max-width:100%` capaba el ancho de LA TABLA al 100% de su padre
(`.tabla-rueda`), así que la tabla, vista desde fuera, NUNCA desbordaba
su contenedor — de ahí que `.tabla-rueda` midiera desbordamiento 0.
3. Pero `display:block` en un `` cuyos hijos (`thead`/`tbody`/`tr`)
conservan su display de agente de usuario (`table-row-group`/
`table-row`) hace que el navegador genere una caja de tabla ANÓNIMA por
dentro para poder maquetar esas filas — y esa caja anónima sí atendía al
`min-width` de las celdas y desbordaba LA PROPIA TABLA (de ahí que forzar
`scrollLeft` en la tabla misma sí avanzara: comprobado, avanzaba a
215-229px según idioma). Verificar sobre la tabla en vez de sobre el
contenedor —que es lo que un dedo real toca primero, y lo que Ángel
testeó— fue lo que dio un "verificado" que no correspondía a la
experiencia real: exactamente la familia B de la regla 17 del CLAUDE.md
global (medir el proceso interno, no el efecto que ve el visitante).
CORRECCIÓN: se retira la segunda capa (`display:block`, `max-width:100%`,
`overflow-x` y `-webkit-overflow-scrolling` propios de la tabla). La tabla
vuelve a su ancho natural (`display:table` por defecto) y el ÚNICO
contenedor con scroll es `.tabla-rueda`, que ya existía, ya es fiable y no
depende de ningún comportamiento de "caja anónima". El `min-width` en
celdas se mantiene sin cambios: es lo que fuerza que la tabla, con sus 5
columnas, sea más ancha que el móvil y por tanto desborde DE VERDAD dentro
de `.tabla-rueda`.
VERIFICADO tras el cambio, tres idiomas a 390px (`.tabla-rueda`, el
contenedor real, no la tabla): `scrollWidth-clientWidth` = 215px (de),
210px (en), 229px (es); forzar `scrollLeft=9999` en el CONTENEDOR avanza a
esas mismas cifras (antes: 0 en los tres); `document.body.scrollWidth` se
queda en 390 en los tres (la página no gana scroll). A 1440px, sin cambios:
`body.scrollWidth`=1440, sin desbordamiento — `.contenido` ya mide más que
5×7rem, así que la regla de abajo no hace nada ahí. Capturas antes/después
en `_scratch/cotejo/` (antes: cabecera "Dauer" cortada en una letra;
después: columna "Dauer"/"Duration"/"Duración" y la de consentimiento
legibles enteras al desplazar el contenedor). */
.contenido table{margin-block:2em;font-size:.9375rem}
@media (max-width:699px){
.contenido th,.contenido td{min-width:7rem}
}
/* El navegador centra `caption` por defecto: la única tabla real de contenido
hoy (`.k-tabla`, cookies de datenschutz) leería distinto del resto del
sitio, que alinea todo a la izquierda (ver `.fuentes caption`). */
.contenido caption{text-align:left;padding-bottom:var(--sp-3);color:var(--k-tinta-70)}
.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}
/* ============================================================================
PÁGINAS INTERIORES — RESKIN (§ TAREA-RESKIN-ESTETICA.md, apartado añadido
5-sep-2026, "PÁGINAS INTERIORES").
============================================================================
Traduce la estética fotográfica de la portada (Newsreader, numerales por
`counter()`, bandas oscuras con foto) a /leistungen/ (`publico/_build/
b3.html`) y /kontakt/ (`b4.html`), y da coherencia tipográfica al resto
(impressum, datenschutz, danke), que la maqueta no cubre.
NINGUNA REGLA DE AQUÍ ABAJO TOCA `post_content`. Las clases `k-seccion`,
`k-intro`, `k-citable`, `k-bloque`, `k-zusammenarbeit`, `k-ablauf`, `k-faq`,
`k-cierre`, `k-acciones`, `k-btn(--primario|--secundario)`, `k-correo`,
`k-erstgespraech`, `k-utilidad`, `k-legal`, `k-legal-versiones` y `k-tabla`
YA EXISTEN en las 288 líneas de post_content de las 5 páginas × 3 idiomas
que pasan por page.php (comprobado con grep sobre los 15 fixtures de
tema/mu-plugins/krahl-editor-textos/tests/fixtures/real/ antes de escribir
esto) y no tenían una sola regla en esta hoja. Es CSS puro sobre marcado ya
guardado: cero riesgo para el enumerador de bloques del editor del cliente
(bloques.php ETIQUETAS_HOJA/ETIQUETAS_BLOQUE no cambian su lista, y ningún
``/`
`/``/`
`/`` cambia de etiqueta).
========================================================================= */
/* --- Tipografía editorial: Newsreader también en H2/H3 de contenido --------
Mismo criterio que `.sec h2/h3` de la portada (ver su comentario: esa regla
solo tocaba las 5 plantillas de portada "a propósito", dejando dicho que
`.contenido` seguía con "su propia tipografía, sin tocar" — este es el
punto en el que SÍ se toca, ahora que le llega su turno). Alcance: TODO
`.contenido` (page.php, single.php, archive.php) — un H2 de un artículo del
blog no tiene motivo para verse peor que uno de /leistungen/. */
.contenido h2,
.contenido h3{
font-family:var(--ff-serif);font-weight:500;letter-spacing:-.01em;
}
/* --- `.k-intro`: el párrafo de entrada de cada página ----------------------
Mismo papel que `.hero__sub` en portada: un pelín más grande y más suave
que el cuerpo. Excluye `.k-correo` (ver más abajo, voz distinta). */
.contenido .k-intro > p:not(.k-correo){
font-size:1.0625em;line-height:1.65;color:var(--k-tinta-70);
max-width:var(--medida);
}
/* Correo dentro de la intro de /kontakt/: mismo tratamiento tipográfico que
`.correo` de portada/pie — monoespaciada, sin adorno de tamaño. */
.contenido .k-correo{
font-family:var(--ff-mono);font-weight:500;font-size:.9375rem;letter-spacing:.01em;
}
/* HALLAZGO DE CAPTURA (5-sep-2026, móvil 390px, /danke/ y /kontakt/): la
`hyphens:auto` global de `p` (ver la regla grande junto a `h1,h2,h3,h4`
más arriba) hereda también en el `` que vive DENTRO del
párrafo, y el motor de guionado parte la dirección de correo por una
sílaba («krahlconsultin-g.com») en vez de tratarla como una cadena que no
se corta. Es el mismo problema que `.correo` del pie ya resuelve con
`overflow-wrap:anywhere` — aquí el enlace no lleva esa clase (viene tal
cual del `post_content` aprobado), así que se corrige por atributo, sin
tocar el HTML: cualquier `mailto:` dentro de `.contenido` deja de
guionarse. */
.contenido a[href^="mailto:"]{hyphens:none}
/* Segunda sección de /kontakt/ ("Das erste Gespräch"): separador sutil, el
mismo filete que usa el resto del sitio entre bloques del registro. */
.contenido .k-erstgespraech{
margin-top:var(--sp-10);padding-top:var(--sp-8);
border-top:1px solid var(--k-borde-suave);
}
/* --- `.k-bloque`: los dos pilares de servicio, numerados -------------------
El mismo mecanismo de `counter()` que `.faq__item`/`.col` de portada —
nunca texto nuevo, solo dígitos generados. Hoy son DOS bloques (Kosten /
Organisation): el copy aprobado son dos pilares, no los tres de la
maqueta (CLAUDE.md REGLA 1 — no se inventa un tercero para "completar" la
cuadrícula). */
.contenido{counter-reset:k-bloque}
.contenido .k-bloque{
counter-increment:k-bloque;
margin-top:var(--sp-12);padding-top:var(--sp-10);
border-top:1px solid var(--k-borde-suave);
}
.contenido .k-bloque::before{
content:counter(k-bloque,decimal-leading-zero);
display:block;margin-bottom:var(--sp-2);
font-family:var(--ff-serif);font-style:italic;font-weight:500;
font-size:clamp(1.75rem,1.55rem + .7vw,2.25rem);line-height:1;
color:var(--k-tuerkis-700);
}
.contenido .k-bloque h2{margin-top:0}
/* Los subtítulos "Ausgangslage"/"Vorgehen" (y sus traducciones) hablan con la
VOZ DE LA MAQUINARIA del sitio (`.rot`), no con la del titular: mismo
mono/versalitas/tracking que el resto de rótulos técnicos, para que no
compitan con el numeral ni con el H2. */
.contenido .k-bloque h3{
font-family:var(--ff-mono);font-weight:500;font-style:normal;
font-size:.8125rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;
color:var(--k-tuerkis-700);
margin-top:1.8em;margin-bottom:.6em;
}
/* --- `.k-zusammenarbeit`: condiciones de colaboración ----------------------
Sin caja propia — es prosa de cierre de la sección de servicios, no una
voz distinta —, solo el filete de separación habitual. */
.contenido .k-zusammenarbeit{
margin-top:var(--sp-10);padding-top:var(--sp-8);
border-top:1px solid var(--k-borde-suave);
}
/* --- `.k-ablauf`: pasos numerados ("Was nach Ihrer Nachricht passiert") ----
Mismo lenguaje que los pasos «01…05» de la banda oscura de portada
(Vorgehen) y que "So läuft es ab" de la maqueta de contacto (b4.html),
aplicado al `` real del copy aprobado — dos pasos hoy, no los tres
inventados de la maqueta. */
.contenido .k-ablauf{margin-top:var(--sp-10)}
.contenido .k-ablauf ol{
list-style:none;padding-left:0;margin-block:var(--sp-6);
display:flex;flex-wrap:wrap;gap:var(--sp-8) var(--sp-10);
counter-reset:k-ablauf;
}
.contenido .k-ablauf li{
counter-increment:k-ablauf;
flex:1 1 220px;min-width:200px;margin-top:0;
}
.contenido .k-ablauf li::before{
content:counter(k-ablauf,decimal-leading-zero);
display:block;margin-bottom:var(--sp-2);
font-family:var(--ff-serif);font-style:italic;font-weight:500;
font-size:clamp(1.5rem,1.35rem + .5vw,1.875rem);line-height:1;
color:var(--k-tuerkis-700);
}
.contenido .k-ablauf li strong{
display:block;margin-bottom:.3em;font-size:1.0625rem;font-weight:600;color:var(--k-marine-900);
}
/* --- `.k-faq`: preguntas frecuentes -----------------------------------------
Numeral por pregunta, mismo mecanismo que `.faq__item` de portada. Los H3
siguen siendo encabezados reales (sin acordeón, misma decisión de
arquitectura que portada: ver el comentario grande de `.faq` más arriba). */
.contenido .k-faq{counter-reset:k-faq;margin-top:var(--sp-10)}
.contenido .k-faq h3{
counter-increment:k-faq;
position:relative;
border-top:1px solid var(--k-borde-suave);
padding-top:var(--sp-8);margin-top:var(--sp-8);margin-bottom:var(--sp-3);
max-width:34ch;
}
.contenido .k-faq h3:first-of-type{border-top:2px solid var(--k-marine-900)}
.contenido .k-faq h3::before{
content:counter(k-faq,decimal-leading-zero);
display:block;margin-bottom:var(--sp-2);
font-family:var(--ff-serif);font-style:italic;font-weight:500;
font-size:clamp(1.5rem,1.35rem + .5vw,1.875rem);line-height:1;
color:var(--k-tuerkis-700);
}
/* La respuesta lleva el mismo filete de voz que `.faq__item p` de portada. */
.contenido .k-faq h3 + p{
max-width:var(--medida);
border-left:4px solid var(--k-tuerkis-700);padding-left:var(--sp-5);
}
/* --- `.k-cierre`: la última pregunta antes del formulario -------------------
Tarjeta con esquina cortada — el mismo lenguaje de `.col`/`.gespraech` —
pero más ligera que `.gespraech`: en /leistungen/ el cierre canónico
(template-parts/portada/cierre.php) ya llega justo después con su propia
tarjeta turquesa, y dos tarjetas idénticas seguidas leerían como un error,
no como énfasis. */
.contenido .k-cierre{
margin-top:var(--sp-12);padding:var(--sp-8) clamp(var(--sp-6),4vw,var(--sp-10));
background:var(--k-nieve);border-top:2px solid var(--k-marine-900);
clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%);
}
.contenido .k-cierre h2{margin-top:0}
.contenido .k-cierre p{max-width:var(--medida)}
/* --- `.k-acciones`: fila de botones ------------------------------------------
Mismo patrón que `.hero__acc`/`.gespraech__acc`: nunca los botones pegados
al texto ni entre sí. */
.contenido .k-acciones{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4) var(--sp-6);
margin-top:var(--sp-6);
}
/* --- `.k-utilidad`: aviso de utilidad (p. ej. /danke/ con el formulario
todavía apagado) ------------------------------------------------------------
Caja neutra, canto marino (estructura), no turquesa (acción): no es la voz
editorial de Sascha, es un estado del sitio. */
.contenido .k-utilidad{
padding:var(--sp-6) var(--sp-8);
background:var(--k-nieve);border-left:4px solid var(--k-marine-900);
}
.contenido .k-utilidad p{font-size:1.0625em;line-height:1.6}
/* --- `.k-legal`: Impressum / Datenschutz -------------------------------------
Documento largo, muchos H2 seguidos: un filete antes de cada uno (salvo el
primero) lo lee como un registro de artículos, no como una pared de texto.
`:first-of-type` cuenta solo entre los H2 hermanos — los H3 intercalados no
rompen la cuenta. */
.contenido .k-legal > h2:not(:first-of-type){
border-top:1px solid var(--k-borde-suave);
padding-top:var(--sp-8);margin-top:var(--sp-10);
}
/* Fila final con los enlaces a las otras versiones de idioma del documento
legal: voz técnica, discreta, igual que `.fuentes__geprueft`. */
.contenido .k-legal-versiones{
margin-top:var(--sp-10);padding-top:var(--sp-6);
border-top:1px solid var(--k-borde-suave);
font-family:var(--ff-mono);font-size:.8125rem;letter-spacing:.02em;
color:var(--k-tinta-70);
}
.contenido .k-legal-versiones a{color:var(--k-tuerkis-700)}
/* --- HÉROE FOTOGRÁFICO DE /kontakt/ (`.pagina-hero`) ------------------------
Traduce la sección "Seitenkopf" de la maqueta de contacto (`publico/
_build/b4.html`): foto a sangre + capa marino + UN corte en la esquina
inferior derecha (no el corte diagonal completo de `.hero`: esta banda es
más baja, hay una página entera con el formulario debajo). Mismo mecanismo
de foto+capa que `.hero`/`.markt__foto`, con su propia variable de corte
para no acoplarse a `--hero-corte` de portada (papeles parecidos, pero
plantillas distintas: portada vs. page.php).
CONTRASTE MEDIDO sobre esta foto concreta (`_scratch/reskin/
medir-contraste-kontakt.py`, 5-sep-2026): reutiliza el MISMO degradado de
tres paradas que el héroe de portada (.90/.84/.78 de --k-marine-900) — ni
una opacidad nueva. Contra el píxel más brillante de TODA la foto (p100,
un reflejo de cristal, luminancia 1,0) incluso en la parada más clara
(.78): blanco 6,93:1, turquesa-claro 4,73:1, pie-texto 4,74:1 — los tres
pasan AA con margen. Si se cambia la foto, hay que volver a medir. */
.pagina-hero{
position:relative;overflow:hidden;isolation:isolate;
background:var(--k-marine-900);color:var(--k-blanco);
padding-block:clamp(3.5rem,8vw,6rem) clamp(3rem,7vw,5rem);
--pagina-hero-corte:clamp(20px,3.5vw,40px);
clip-path:polygon(0 0,100% 0,100% calc(100% - var(--pagina-hero-corte)),0 100%);
}
.pagina-hero__foto,
.pagina-hero__foto img{
position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;object-position:center;
}
.pagina-hero__foto{z-index:-2}
.pagina-hero__capa{
position:absolute;inset:0;z-index:-1;
background:linear-gradient(
100deg,
rgba(0,47,90,.90) 0%,
rgba(0,47,90,.84) 45%,
rgba(0,47,90,.78) 100%
);
}
.pagina-hero__datum{margin:0 0 var(--sp-4);color:var(--k-tuerkis-claro)}
.pagina-hero h1{
font-family:var(--ff-serif);font-weight:500;color:var(--k-blanco);
font-size:clamp(2.25rem,1.8rem + 2.4vw,3.25rem);line-height:1.1;letter-spacing:-.016em;
max-width:20ch;margin:0;text-wrap:balance;
}
/* Nombre + titulación bajo el H1, SOLO en el héroe de /ueber-mich/
(template-parts/comun/ueber-mich-hero.php, 10-sep-2026). `--k-pie-texto`
es el MISMO tono que `.pagina-hero__datum`... no, ese usa tuerkis-claro;
aquí se usa pie-texto (el tono de prosa sobre banda oscura, ver la nota
«PIE Y BANDA OSCURA» al principio de esta hoja: 9,25:1 sobre
--k-marine-900 sólido — sobra AA con margen incluso antes de contar la
foto de fondo). Tamaño de subtítulo, no de prosa de cuerpo: es una sola
línea corta (nombre + titulación), no un párrafo. */
.pagina-hero__persona{margin:var(--sp-3) 0 0;color:var(--k-pie-texto);font-size:1.0625rem;line-height:1.5}
/* Mismo motivo que `.sec--marino a:focus-visible`: el anillo marino directo
no se distingue sobre esta banda. Sin enlaces hoy dentro del héroe, pero
la regla queda escrita para el día que los haya. */
.pagina-hero a:focus-visible{outline-color:var(--k-blanco);box-shadow:0 0 0 2px var(--k-marine-900)}
/* --- BANDA FOTOGRÁFICA DECORATIVA DE /leistungen/ (`.pagina-foto`) ----------
Traduce la foto ancha bajo el "Seitenkopf" de la maqueta de servicios
(`b3.html`). La maqueta la recorta en pastilla (border-radius redondeado);
aquí se usa el MISMO lenguaje de esquina cortada que `.col`/`.faq__item`/
`.gespraech` — nos parecemos a la maqueta, no le copiamos un gesto que el
resto del sitio no usa (CLAUDE.md REGLA 1). Puramente decorativa: sin
texto encima, nada que medir en contraste. */
.pagina-foto{
position:relative;overflow:hidden;
margin-bottom:var(--sp-10);
aspect-ratio:21/9;
clip-path:polygon(0 0,calc(100% - 56px) 0,100% 56px,100% 100%,0 100%);
box-shadow:0 20px 44px rgba(0,36,62,.14);
}
.pagina-foto img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){
.pagina-foto{aspect-ratio:4/3;clip-path:polygon(0 0,calc(100% - 32px) 0,100% 32px,100% 100%,0 100%)}
}
/* ============================================================================
MAQUETACIÓN «ÜBER MICH» (10-sep-2026)
============================================================================
Petición del cliente: «Todo el diseño del apartado "über mich" es poco
atractivo visualmente». El contenido real vive en `publicable/paginas/
ueber-mich-de.html` — NI UNA PALABRA de ese fichero se ha tocado, solo la
envoltura (control: _scratch/medir-eslogan/contar-palabras.py, misma
bolsa de 605 palabras antes y después). Todo lo de aquí abajo es CSS +
las clases/envoltorios nuevos de ese HTML.
RITMO GENERAL: hasta hoy `.k-seccion` no tenía NINGUNA regla propia — la
única separación entre secciones venía del genérico `.contenido > * +
*{margin-top:1.35em}` (≈23px), que es la misma distancia que separa DOS
PÁRRAFOS dentro de la misma idea. Por eso siete `` seguidos se leían
como un único muro: nada marcaba dónde empezaba una sección nueva.
⚠️ `.k-seccion` y `.k-intro`/`.k-schwerpunkte` NO son exclusivos de esta
página: `grep -rl "k-seccion"` los encuentra también en Impressum,
Datenschutz, Leistungen, Kontakt y la Startseite. Estilarlos a secas
cambiaría esas seis páginas sin que nadie las haya revisado — justo lo
que la tarea pide NO hacer salvo que sea imprescindible. Por eso todo
este bloque va cualificado con `.contenido:has(.k-keyfacts)`:
`.k-keyfacts` SÍ es exclusiva de /ueber-mich/ (comprobado con el mismo
grep), así que el selector solo entra en el `.contenido` de ESTA
página. La técnica `:has()` ya la usa el tema (`.hero:has(.hero__retrato
img)`, más arriba), no es una novedad para esta hoja. */
.contenido:has(.k-keyfacts) .k-seccion{margin-top:clamp(3rem,5vw + 1.5rem,5rem)}
.contenido:has(.k-keyfacts) .k-seccion:first-child{margin-top:0}
/* Filete turquesa antes de CADA h2 de sección — el mismo lenguaje visual que
`.reg__rot::before` (la marca de cota del sistema), reutilizado aquí en
vez de inventar un segundo adorno. Es lo que rompe «los siete h2 pesan
igual»: no se trata de agrandar unos y encoger otros —seguirían siendo el
mismo nivel de encabezado, falsear el tamaño confundiría la jerarquía—,
sino de darle a cada uno un arranque visual propio, igual que ya tienen
los `` de la portada dentro de `.reg`. */
.contenido:has(.k-keyfacts) .k-seccion > h2::before{
content:"";display:block;width:2.5rem;height:2px;
background:var(--k-tuerkis-700);margin-bottom:.625rem;
}
/* --- KEY FACTS → REJILLA DE TARJETAS ---------------------------------------
Antes: un h2 y tres h3 corridos con sus párrafos, sin ninguna separación
visual entre los tres bloques — un muro más. Ahora, tres tarjetas con
filete superior turquesa (mismo tono de acción que el resto del sitio,
nunca un color nuevo). 3 columnas en escritorio, 1 en móvil. */
.k-keyfacts__grid{
display:grid;grid-template-columns:1fr;gap:var(--sp-6);
margin-top:var(--sp-6);
}
.k-keyfacts__karte{
padding:var(--sp-6) var(--sp-6) var(--sp-2);
background:var(--k-nieve);border-top:3px solid var(--k-tuerkis-700);
}
.k-keyfacts__karte h3{margin-top:0}
.k-keyfacts__karte p{font-size:.95em}
@media (min-width:760px){
.k-keyfacts__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* --- AUSBILDUNG / SCHWERPUNKTE → LISTAS A DOS COLUMNAS ---------------------
`.k-lista-2col` sustituye el bullet por defecto (heredado de `.contenido
ul{list-style:disc}`) por un marcador propio del sistema: un guion corto
turquesa, no un punto genérico de navegador — mismo criterio que
`.contenido li::marker{color:var(--k-tuerkis-700)}` ya aplicaba al color,
aquí además se cambia la FORMA.
DOS COLUMNAS CON `columns:2` (multi-columna CSS), NO `display:grid` — a
propósito, aunque el resto de la hoja use grid para todo lo demás. Con
grid y 6 `
- ` sin `grid-row`/`grid-column` explícitos, el navegador los
coloca en PARES por fila (1-2, 3-4, 5-6: zigzag), no "3 arriba a la
izquierda, 3 abajo a la derecha" como pide una lectura normal de dos
columnas. `columns:2` sí da ese orden (se lee la columna izquierda
entera de arriba abajo y LUEGO la derecha) sin tener que numerar filas a
mano. `break-inside:avoid` en cada `
- ` evita que el texto de un ítem
se parta justo en el salto de columna (única forma de que "dos columnas
de texto" no corte una frase por la mitad).
>=560px: donde 6 ítems cortos empiezan a tener sitio real a los dos
lados sin apretarse; por debajo, la columna única ya usa bien el ancho
de `.contenido`. */
/* Cualificado con `.contenido` A PROPÓSITO: `.contenido ul{list-style:disc}`
y `.contenido ul{padding-left:1.35em}` (más arriba en esta hoja) tienen
especificidad 0,1,1 y ganaban a `.k-lista-2col` a secas (0,1,0). Medido
en la captura real del 10-sep-2026: salían el bullet nativo Y el guion
(«• –»). Con 0,2,0 gana esta. */
.contenido .k-lista-2col{list-style:none;padding-left:0}
.k-lista-2col li{
position:relative;padding-left:1.3em;
break-inside:avoid;-webkit-column-break-inside:avoid;
}
.k-lista-2col li::before{
content:"–";position:absolute;left:0;color:var(--k-tuerkis-700);font-weight:600;
}
@media (min-width:560px){
.k-lista-2col{columns:2;column-gap:var(--sp-8)}
}
/* --- BRANCHEN → CHIPS -------------------------------------------------------
Convertido de párrafo con comas a lista de píldoras SOLO donde el reparto
salía limpio y reversible (comprobado con _scratch/medir-eslogan/
partir-branchen.py: reconstruir los 7 trozos con ", " devuelve el texto
original carácter a carácter). `k-warengruppen` NO lleva esta clase a
propósito — ver el comentario en el HTML fuente y el informe de esta
tarea: "Guss-, Schmiede- und Stanz-Biege-Bauteile" se partiría por la
mitad de una palabra compuesta alemana si se separase por comas. */
.contenido .k-chips{ /* cualificado por el mismo motivo que .k-lista-2col */
list-style:none;padding-left:0;margin-top:var(--sp-5);
display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-3);
}
.contenido .k-chips li + li{margin-top:0} /* pisa `.contenido li + li{margin-top:.5em}`: el gap del flex ya separa */
.k-chips li{
margin:0;padding:.4em .9em;
background:var(--k-tuerkis-hell);border:1px solid var(--k-tuerkis-borde);
border-radius:999px;font-size:.9em;line-height:1.3;color:var(--k-tinta);
}
/* --- WARENGRUPPEN: SOLO TIPOGRAFÍA -----------------------------------------
Ver arriba: esta sección se queda en prosa a propósito. Se mejora el
ritmo de lectura (line-height más generoso, ancho de línea recortado a
`--medida-corta` en vez del ancho completo de `.contenido`, que a
68/40rem ya es largo para dos frases densas en comas) sin tocar ni una
coma del texto real. */
.k-warengruppen p{max-width:var(--medida-corta);line-height:1.7}
/* --- PROJEKTE UND STATIONEN --------------------------------------------------
La tabla reutiliza el componente compartido `.fuentes` (registro de
fuentes, style.css arriba) para heredar su base — tipografía, el `thead`
visualmente oculto en móvil, el borde superior de la primera fila — pero
TODO lo de aquí abajo va bajo el modificador `.k-tabla-stationen`
(segunda clase del mismo `
`), nunca sobre `.fuentes` a secas: ese
componente lo usa el registro de fuentes de otras páginas y no se toca
su aspecto por esta tarea.
ENVOLTORIO CON SCROLL: `.k-tabla-scroll` deja que la tabla respire más
ancho que `.contenido` (68ch/40rem) sin desbordar la página. El
`margin-inline-end` negativo SOLO entra a partir de 1024px, y el número
(`--sp-12`=48px) está puesto con margen de seguridad DELIBERADO: a esa
anchura `.reg__cuerpo` (la columna de contenido dentro de `.reg`, ver el
bloque REGISTRO al principio de esta hoja) mide `1024 − 2×48(margen) −
200(--datum) = 728px`, y `.contenido` sigue topado en 640px
(`--medida`) — sobran 88px de hueco real. 48px de los 88 es un tercio de
margen de seguridad sobre el cálculo, no un número puesto a ojo. Por
debajo de 1024px no hay breakout (no hace falta comprobar `.reg__cuerpo`
en ese rango: por debajo de 900px `.reg` ni siquiera parte en 2
columnas, y entre 900-1023px el hueco es más variable) — el
`overflow-x:auto` de abajo es quien absorbe cualquier apriete residual,
nunca la página. */
.k-tabla-scroll{overflow-x:auto}
/* ANCHURA (corregido 10-sep-2026 tras la captura real a 1440px: con el
margen negativo de 48px la columna Jahresvolumen seguía CORTADA —
«Jahresvo», «40 Mio. €» a medias — que es justo el dato que pidió el
cliente). En vez de estirar la tabla con un margen negativo, el
contenedor de ESTA página deja de toparse en `--medida` y son las
secciones de prosa las que se limitan a ella. Números: a 1440px
`.reg__cuerpo` mide 1200 − 2×48 − 200 = 904px; a 1024px, 728px. La
tabla, las tarjetas de Key Facts, las listas a dos columnas y los chips
usan ese ancho entero (3 tarjetas de ~290px en vez de ~200; dos columnas
de ~430px, que sigue siendo medida de lectura). Intro y Warengruppen
siguen en 640px (`--medida`) porque son párrafos de lectura, y los h2
ya llevan `max-width:26ch` en `.contenido h2`. Todo bajo el mismo
`:has(.k-keyfacts)` que el resto del bloque: ninguna otra página cambia. */
.contenido:has(.k-keyfacts){max-width:none}
.contenido:has(.k-keyfacts) > .k-intro,
.contenido:has(.k-keyfacts) > .k-warengruppen{max-width:var(--medida)}
/* Escritorio (>=700px, donde `.fuentes` sigue siendo una tabla real: por
debajo de eso el bloque de abajo la convierte en tarjetas). Cabecera
marino con texto claro: el par #FFFFFF sobre #002F5A SÓLIDO ya está
medido en la nota «PIE Y BANDA OSCURA» al principio de esta hoja — 13,51:1,
el mismo marino de estructura, ningún color nuevo que volver a medir. */
.k-tabla-stationen thead th{
background:var(--k-marine-900);color:var(--k-blanco);
border-top:0;border-bottom:0;padding-block:var(--sp-3);
}
/* Cebra suave en vez del borde-superior por fila de `.fuentes`: con cabecera
de color, un borde tenue entre filas claras se perdía visualmente: la
cebra separa sin necesitar esa línea. */
.k-tabla-stationen tbody tr:nth-child(even){background:var(--k-nieve)}
.k-tabla-stationen tbody tr + tr th,
.k-tabla-stationen tbody tr + tr td{border-top:0}
.k-tabla-stationen{font-size:.9375rem} /* 15px: cinco columnas en 728px (1024) sin apretar; a 16px la Rolle partía en 4 líneas */
.k-tabla-stationen tbody th{font-variant-numeric:tabular-nums;white-space:nowrap}
/* Columna Jahresvolumen destacada — quedaba cortada por el ancho
estrecho de `.contenido`; con el ancho completo de arriba ya no hay corte, y
además se le da peso visual porque es el dato que más se busca en esta
tabla. */
.k-tabla-stationen td.k-tabla-vol{
font-weight:600;color:var(--k-marine-900);font-variant-numeric:tabular-nums;
white-space:nowrap;
}
@media (max-width:699px){
/* Tarjetas apiladas. LA TABLA SIGUE SIENDO UNA SEMÁNTICA: el
`` se oculta visualmente igual que en `.fuentes` (clip a 1px, no
`display:none`, sigue en el árbol de accesibilidad), `scope="row"` y
`scope="col"` siguen intactos en el HTML — esto solo cambia el
`display` visual, nunca el marcado. La técnica es `data-label` +
`::before` en cada `| ` (los ` | ` de Zeitraum NO llevan
data-label: ya hacen de título de tarjeta con el tratamiento que
`.fuentes tbody th` les da de por sí — negrita + marino). */
.k-tabla-stationen tbody th{margin-bottom:var(--sp-3)}
.k-tabla-stationen tbody td{
display:grid;grid-template-columns:6.5rem minmax(0,1fr);
gap:var(--sp-3);align-items:baseline;
padding:.35em 0;border:0;
}
.k-tabla-stationen tbody td[data-label]::before{
content:attr(data-label);
font-family:var(--ff-mono);font-size:.6875rem;letter-spacing:.06em;
text-transform:uppercase;color:var(--k-tinta-70);
}
.k-tabla-stationen td.k-tabla-vol{white-space:normal}
}
.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
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 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 (REDISEÑO 30-sep-2026, maqueta b1) ----------------------------------
Banda azul muy oscura, frase grande en serifa con el botón turquesa, cuatro
columnas (marca, navegación, contacto, idioma), «&» de marca de agua y una
línea fina inferior con © y los textos legales. Sustituye al cajetín
«Schriftfeld» de filas con borde. El «&» y las flechas son CSS (`content:`):
no son texto del DOM.
CONTRASTES (calculados sobre --mq-noche #001B30, no estimados):
blanco 15,9:1 · rgba(255,255,255,.72) ≈ 9:1 · rgba(255,255,255,.62) ≈ 6,3:1 ·
turquesa claro #2FC4BE ≈ 8,6:1 · botón #00243E sobre #0BA5A5 ≈ 5,2:1.
------------------------------------------------------------------------- */
:root{
--mq-papel:#F7F5F0; /* fondo de página de las maquetas (papel) */
--mq-arena:#F0EBE3; /* banda beige alterna */
--mq-noche:#001B30; /* banda azul muy oscura: pie y galerías */
--mq-tur:#0BA5A5; /* turquesa de relleno (botones, filetes); NO para texto claro */
--mq-tur-claro:#2FC4BE; /* turquesa legible SOBRE la banda oscura */
--mq-x:max(var(--margen),calc((100% - var(--ancho)) / 2 + var(--margen)));
--mq-y:clamp(3.5rem,7vw,6rem);
}
.pie{
position:relative;isolation:isolate;
overflow:hidden;overflow:clip; /* clip: el «&» sobresale y hidden dejaba el pie desplazable por foco/scrollIntoView */
background:var(--mq-noche);color:rgba(255,255,255,.72);
border-top:2px solid rgba(11,165,165,.55);
padding-block:clamp(2.75rem,5vw,4.25rem) 0;
font-size:.9063rem;line-height:1.65;
}
.pie::after{
content:"&";position:absolute;right:-1.25rem;bottom:-7.5rem;z-index:-1;
font-family:var(--ff-serif);font-style:italic;font-weight:400;
font-size:clamp(13rem,30vw,24rem);line-height:1;
color:rgba(47,196,190,.06);pointer-events:none;user-select:none;
}
.pie a{color:var(--mq-tur-claro)}
.pie a:hover{color:var(--k-blanco)}
/* Frase + botón */
.pie__cta{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-6);
padding-bottom:clamp(2rem,4vw,3.25rem);border-bottom:1px solid rgba(255,255,255,.14);
}
.pie__frase{
margin:0;max-width:18ch;color:var(--k-blanco);text-wrap:balance;
font-family:var(--ff-serif);font-weight:500;letter-spacing:-.008em;
font-size:clamp(1.75rem,1.2rem + 2vw,2.625rem);line-height:1.15;
}
.pie .pie__boton{
display:inline-flex;align-items:center;gap:.625rem;
background:var(--mq-tur);color:#00243E;border-radius:2px;
padding:.9375rem 1.75rem;min-height:44px;
font-family:var(--ff-sans-display);font-weight:600;font-size:.9688rem;line-height:1.2;text-decoration:none;
transition:background-color 200ms linear,gap 200ms linear;
}
.pie .pie__boton::after{content:"\2192";font-size:1.05em}
.pie .pie__boton:hover{background:var(--mq-tur-claro);color:#00243E;gap:1rem}
/* Cuatro columnas */
.pie__campo{
display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-10);
padding-block:clamp(2.25rem,4vw,3.25rem);
}
@media (min-width:640px){.pie__campo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1000px){
.pie__campo{grid-template-columns:minmax(0,1.5fr) minmax(0,.85fr) minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,4vw,4.25rem)}
}
.pie h2{
margin:0 0 var(--sp-4);
font-family:var(--ff-sans-display);font-weight:600;font-size:.75rem;line-height:1.4;
letter-spacing:.18em;text-transform:uppercase;color:var(--mq-tur-claro);
}
.pie__logo{height:2.5rem;width:auto;max-width:100%}
.pie__lema{margin-top:var(--sp-4);max-width:30ch;color:rgba(255,255,255,.62);font-size:.9375rem;line-height:1.65}
.pie address{font-style:normal;line-height:1.7;color:rgba(255,255,255,.72)}
.pie address a{text-decoration:underline;text-underline-offset:.2em;text-decoration-thickness:.06em;overflow-wrap:anywhere;hyphens:none}
.pie__marca{color:var(--k-blanco);font-weight:600}
.pie__lista{display:flex;flex-direction:column;gap:.125rem;list-style:none}
.pie__lista a{display:inline-block;padding-block:.3rem;color:rgba(255,255,255,.78);text-decoration:none;font-size:.9063rem}
.pie__lista a:hover{color:var(--mq-tur-claro)}
.pie__perfiles{padding-bottom:var(--sp-8)}
.pie__perfiles .pie__lista{flex-direction:row;flex-wrap:wrap;gap:var(--sp-2) var(--sp-6)}
/* Idioma */
.pie__idiomas{display:flex;flex-wrap:wrap;gap:.375rem;list-style:none}
.pie .pie__idiomas a{
display:inline-block;padding:.4375rem .75rem;min-height:32px;border-radius:2px;
border:1px solid rgba(128,144,156,.6);color:rgba(255,255,255,.78);text-decoration:none;
font-family:var(--ff-sans-display);font-weight:600;font-size:.75rem;letter-spacing:.04em;
}
.pie .pie__idiomas a:hover{border-color:var(--mq-tur-claro);color:var(--mq-tur-claro)}
.pie .pie__idiomas a[aria-current]{background:var(--mq-tur);border-color:var(--mq-tur);color:#00243E}
.pie__nota{margin-top:var(--sp-4);max-width:26ch;color:rgba(255,255,255,.62);font-size:.8125rem;line-height:1.6}
/* Membresías y fondos */
.pie__banda{
display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-8) clamp(2rem,5vw,4.5rem);
padding-block:clamp(1.75rem,3vw,2.5rem);border-top:1px solid rgba(255,255,255,.14);
}
.pie__socios{display:flex;flex-wrap:wrap;gap:var(--sp-4);list-style:none;margin:0;padding:0;align-items:stretch}
.pie .pie__socios a{
display:flex;align-items:center;justify-content:center;height:100%;
background:var(--k-blanco);padding:var(--sp-3) var(--sp-4);border-radius:2px;
}
.pie__socios img{display:block;height:3.25rem;width:auto;max-width:100%}
.pie__socios li:last-child img{height:2.875rem}
/* Logos preceptivos del Kit Digital: composición oficial en una sola imagen,
franja de ancho completo con fondo BLANCO (la imagen lleva fondo blanco y
logos oscuros: nunca sobre azul). Sin recolorear ni recortar. */
.pie__kit{background:var(--k-blanco);padding-block:clamp(.875rem,2vw,1.5rem)}
.pie__kit .wrap{padding-inline:.75rem}
.pie__kit img{display:block;width:100%;max-width:1200px;height:auto;margin-inline:auto}
.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;
}
/* Línea inferior */
.pie__cierre{border-top:1px solid rgba(255,255,255,.12);font-size:.8125rem;color:rgba(255,255,255,.62)}
.pie__cierre-in{
display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--sp-3) var(--sp-6);
padding-block:1.125rem;
}
.pie__copy{margin:0}
.pie__legal .pie__lista{flex-direction:row;flex-wrap:wrap;gap:.25rem 1.375rem}
.pie__legal .pie__lista a{font-size:.8125rem;color:rgba(255,255,255,.72)}
.pie__legal .pie__lista a:hover{color:var(--k-blanco)}
/* --- 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;
}
/* ============================================================================
FOTOS DE SASCHA (30-sep-2026)
Cinco fotos de la mediateca colocadas desde las plantillas (page.php,
leistungen-foto.php, cierre.php), sin tocar el texto de ningún post.
Mismo lenguaje de tarjeta que el resto del tema: esquina superior derecha
cortada en diagonal + sombra marino suave. width/height los pone
wp_get_attachment_image (sin CLS) y hay srcset + carga diferida.
========================================================================= */
.foto-sascha{margin:0;overflow:hidden;box-shadow:0 20px 44px rgba(0,36,62,.14);background:var(--k-nieve)}
.foto-sascha img{display:block;width:100%;height:100%;object-fit:cover}
/* Retrato junto al inicio del contenido (/ueber-mich/, /kontakt/) */
.foto-retrato{
width:min(100%,20rem);aspect-ratio:4/5;margin:0 0 var(--sp-8);
clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);
}
.foto-retrato img{object-position:50% 12%}
@media (min-width:900px){
.foto-retrato{float:right;width:15rem;margin:0 0 var(--sp-8) var(--sp-8)}
}
/* Segunda foto de /ueber-mich/, intercalada entre bloques del contenido */
.foto-segunda{
width:min(100%,20rem);aspect-ratio:4/5;margin:var(--sp-10) 0;
clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);
}
.foto-segunda{border-top:4px solid var(--k-tuerkis-700)}
.foto-segunda img{object-position:50% 15%}
/* Banda ancha de /leistungen/ con la foto real: el encuadre sube para no
cortar la cabeza al pasar de 3:2 a 21:9. */
.pagina-foto--sascha img{object-position:50% 22%}
/* Cierre de la portada: tarjeta + foto */
.gespraech-con-foto{display:grid;gap:var(--sp-8);align-items:center}
.foto-cierre{
width:min(100%,19rem);aspect-ratio:2/3;
clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%);
}
.foto-cierre img{object-position:50% 30%}
@media (min-width:900px){
.gespraech-con-foto{grid-template-columns:minmax(0,1fr) 17rem;gap:var(--sp-10)}
.gespraech-con-foto .gespraech{max-width:none}
.foto-cierre{width:100%}
}
|