/*
Theme Name: Meier Bauleitung
Theme URI: https://meier-bauleitung.ch
Author: media.art – Roland Blassnig
Author URI: https://mediaart.ch
Description: Theme  Meier Bauleitung GmbH
Version: 0.5.21
Requires at least: 6.5
Requires PHP: 8.1
Text Domain: meier
*/

/* Design*/
:root {
  --rot: #C10830;                  /* Figma: rot */
  --rot-dunkel: #9A1434;
  --schwarz: #333333;              /* 80 % Schwarz (Figma: #242424) */
  --linie-aktiv: #1D1D1B;          /* Unterstreichung aktiver Menüpunkt */
  --text: var(--schwarz);
  --text-leise: #555A63;
  --bg: #FFFFFF;

  --raster-farbe: 193 8 48;        /* #C10830 als RGB-Kanäle */
  --raster-size: 24px;
  --raster-deckkraft: .28;         /* Figma-Kachel: Punkt 2 px, #C10830 @ 28 % (Alpha 71/255) */
  --raster-punkt: 1px;             /* Radius */

  --u: 8px;                        /* Spacing-Einheit */
  --container: 1200px;
  /* Inhaltsbereich – proportional zum Figma-Raster (main ist Container, siehe layout.css). */
  --karte: #F8F8F8;                /* Kartenhintergrund (Referenzen, Team) */
  --rand-mobil: 24px;              /* Mobile: Rand links = rechts = Logo- bzw. Hamburger-Kante */
  /* Mindestrand: Inhalt beginnt nie links vom «B» von BAULEITUNG im Logo
     (Logo bei 40 px + 110,9 px bis zum B = 151 px). Rand rechts gleich gross, Inhalt bleibt mittig.
     Mobile (≤ 960 px) setzt eigene Werte in layout.css. */
  --inhalt-rand-min: 151px;
  --inhalt-breite: min(83.333cqw, 1200px, 100cqw - 2 * var(--inhalt-rand-min));   /* fix 1200 px bis 1440 px Fenster, darunter proportional (1200/1440) */
  --inhalt-links: calc((100cqw - var(--inhalt-breite)) / 2);   /* Inhalt mittig im Fenster */
  /* Reine Textfelder (Titel, Fliesstext): rechts Innenabstand, damit die Zeilen nicht zu lang werden.
     900 px bei 1200 px Inhalt, darunter im gleichen Verhältnis. Mobile: volle Breite. */
  --text-breite: calc(var(--inhalt-breite) * 0.75);
  --rand: 120px;
}
@media (max-width: 1080px) { :root { --rand: 48px; } }
@media (max-width: 640px)  { :root { --rand: 24px; } }
@media (prefers-contrast: more) { :root { --raster-deckkraft: .12; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  color: var(--text);
  background-color: var(--bg);
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 24px;               /* = 1 Rasterzelle */
}
img { max-width: 100%; height: auto; display: block; }
/* Links in Texten: Textfarbe mit Unterstreichung, rot erst beim Hovern */
a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s ease; }
a:hover, a:focus-visible { color: var(--rot); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: 8px; left: 8px; z-index: 100; width: auto; height: auto; clip: auto; background: #fff; padding: 8px 16px; }