/* Nombre arriba a la izquierda y botón del menú, comunes a la Startseite y a las demás páginas.
   Las medidas van por aparato: Thomas las elige en la prueba (?probe=1, js/probe.js) y se copian aquí.
   Los bloques @media tienen que coincidir con APARATOS de js/probe.js; el de móvil en horizontal va el último
   porque un iPhone girado también cae en el ancho del iPad. */
:root {
  /* Tamaños: los escribe el motor en css/ajustes.css (tipografía que escala sola, datos/ajustes.json → schriften). */
  --t-name: var(--schrift-name-groesse);
  --t-zusatz: var(--schrift-zusatz-groesse);
  /* Thomas, 20 oct: colores al revés que en la web antigua, el nombre gris y «fotografisches» blanco. */
  --c-name: var(--texto);
  --c-zusatz: var(--farbe-zusatz);
  --marca-lado: flex-end;
  /* Las rayas del menú con el trazo de la letra del nombre (Thomas, 20 oct) y del alto de sus mayúsculas:
     del alto de las dos líneas quedaban enormes (Xavi, 21 oct). Thomas lo afina en la prueba. */
  --menu-alto: calc(var(--t-name) * 0.72);
  --menu-strich: 1.5px;
}
/* Título de Serie y libro. */
:root { --t-titulo: var(--schrift-serientitel-groesse); }

/* Valores de la prueba que mandó Thomas el 23 oct (KUTSCHKER-PROBE v2, 12:26) y el 24 oct (19:50). Lo que no tocó se queda como estaba.
   Los de cada página (Projekte, Serie, Startseite) están en su CSS o plantilla. */
:root { --c-name: var(--farbe-name); --pj-titel-farbe: var(--farbe-projekte); --ak-titel-farbe: var(--farbe-titel); }
@media (min-width: 1181px) {
  :root { --arriba: 20px; --margen: 30px; --menu-alto: 20px; --menu-strich: 1px;
    --ak-titel-oben: 20px; --ak-titel-unten: 50px; --kb-buch-abstand: 40px; }
}
@media (min-width: 700px) and (max-width: 1180px) and (orientation: portrait) {
  :root { --arriba: 30px; --margen: 40px; --menu-alto: 20px; --menu-strich: 1px;
    --ak-titel-oben: 50px; --ak-titel-unten: 50px; --kb-buch-abstand: 50px; }
}
@media (min-width: 700px) and (max-width: 1180px) and (orientation: landscape) {
  :root { --ak-titel-oben: 5px; --ak-titel-unten: 40px; --kb-buch-abstand: 40px; }
}
@media (max-width: 699px) {
  :root { --arriba: 10px; --margen: 20px; --menu-alto: 20px; --menu-strich: 1px;
    --ak-titel-oben: 15px; --ak-titel-unten: 35px; --kb-buch-abstand: 40px; }
}
/* El iPhone girado, el último: también cae en el ancho del iPad. */
@media (orientation: landscape) and (max-height: 500px) {
  /* Thomas, 20 oct: en horizontal el nombre tan pegado al borde como en vertical. */
  :root { --margen: 20px; --arriba: 10px;
    --ak-titel-unten: 30px; }
}

/* Startseite, Projekte, Serien y la lista de libros: sin zoom con dos dedos ni con doble toque; la página se quedaba
   ampliada y no volvía (Thomas, 24 oct). El visor de libros y las páginas de texto sí se pueden ampliar. */
.sin-zoom { touch-action: pan-x pan-y; }

.marca { display: flex; flex-direction: column; align-items: var(--marca-lado); line-height: 1.15; color: inherit; text-decoration: none; }
/* Los trazos de Adventor sobresalen de la caja de la línea: con este margen interior quedan dentro y el navegador
   los borra bien al mover el nombre (dejaba rayitas al mover el regulador, 21 oct). El margen negativo lo compensa. */
.marca span { padding-block: 0.2em; margin-block: -0.2em; }
/* El margen negativo quita el espaciado que sobra tras la última letra, para que las dos líneas cierren igual por la derecha. */
.marca span:first-child { font-size: var(--t-name); letter-spacing: var(--name-laufweite, var(--schrift-name-laufweite)); margin-right: calc(-1 * var(--name-laufweite, var(--schrift-name-laufweite))); text-transform: var(--schrift-name-case); color: var(--c-name); transition: color .3s; }
.marca span:last-child { margin-top: calc(0.25rem - 0.2em); font-size: var(--t-zusatz); letter-spacing: var(--zusatz-laufweite, var(--schrift-zusatz-laufweite)); margin-right: calc(-1 * var(--zusatz-laufweite, var(--schrift-zusatz-laufweite))); text-transform: var(--schrift-zusatz-case); color: var(--c-zusatz); transition: color .3s; }

.menu__boton { display: flex; align-items: center; justify-content: center; min-width: 2.25rem; min-height: 2.25rem; margin-right: -0.5rem; transition: color .3s; }
.menu__boton .icono { width: calc(var(--menu-alto) * 1.4); height: var(--menu-alto); stroke-width: var(--menu-strich); }
/* Trazo en px de pantalla, sea cual sea el tamaño del icono. */
.menu__boton path { vector-effect: non-scaling-stroke; }