/* Shared design tokens & components, derived from freilich.amstudio.ink reference analysis */
:root{
  /* Elotec-Markenpalette: ~75% Weiss/helle Flächen, ~20% Dunkelblau, ~5% kräftiges Blau. */
  --cream:#ffffff;         /* Seitenhintergrund */
  --alt:#eff6ff;            /* abwechselnde Abschnitte */
  --ink:#102a43;            /* Überschriften, Footer, dunkle Flächen */
  --accent:#1d4ed8;     /* Buttons & Links */
  --accent-hover:#1e40af;   /* Button-Hover */
  --accent-on-dark:#93c5fd; /* helleres Blau für Akzenttext auf dunklem Grund (AA-Kontrast) */
  --text:#334155;           /* Fliesstext */
  --line: #dce5ef;
  --line-dark: rgba(255,255,255,0.22);
  --font-display:"Newsreader Variable","Newsreader",Georgia,serif;
  --font-body:"IBM Plex Sans",system-ui,sans-serif;
  /* Abstände in rem, damit das Layout mit der Schriftgrösse des Nutzers
     mitwächst statt zu brechen, wenn jemand grösser stellt. */
  --space-1:0.5rem;
  --space-2:1rem;
  --space-3:1.5rem;
  --space-4:2.5rem;
  --space-5:4rem;
  --space-6:6rem;
  --space-7:8.75rem;
  --bp-tablet:900px;
  --bp-mobile:600px;
  --ease:cubic-bezier(.16,1,.3,1);
  /* Druckrückmeldung: kurz genug, um beim Drücken sofort da zu sein. */
  --press:transform 100ms ease-out;
  --focus:var(--accent);
  /* Wie hoch die schwebende Kopfzeile baut. Sprungziele halten diesen
     Abstand ein, damit eine Überschrift nicht dahinter verschwindet. */
  --header-h:84px;
}
@media (max-width:600px){
  :root{--header-h:76px;}
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  background:var(--cream);
  color:var(--text);
  font-size:1rem;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  /* Variable Schriften tragen eigene Zeichnungen je Grösse. */
  font-optical-sizing:auto;
}

/* Überschriften tragen die Markenfarbe, Fliesstext bleibt Schiefergrau. */
h1,h2,h3,h4,
.section-heading,.page-head h1,.band h2,.quote-card-heading,
.row h3,.steps h3,.svc-card h2,.svc-card h3,.ort-grid strong,
.fact-card h2{color:var(--ink);}
.hero h1,.hero-inner h1{color:inherit;}
.section-dark h1,.section-dark h2,.section-dark h3,
.band-dark h1,.band-dark h2,.band-dark h3{color:var(--cream);}

/* Sichtbarer Fokus überall, nicht nur dort, wo zufällig ein Browser-Default
   greift: wer mit der Tastatur unterwegs ist, muss sehen, wo er steht. */
:where(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--focus);
  outline-offset:3px;
  border-radius:2px;
}

/* Ein Sprung ans Ziel landet unter der schwebenden Kopfzeile, nicht
   dahinter. Ohne das verschwindet jede angesprungene Überschrift. */
:where([id]){scroll-margin-top:calc(var(--header-h) + var(--space-2));}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 var(--space-4);
}
@media (max-width:600px){
  .container{padding:0 var(--space-3);}
}

/* Header, immer weiss, dunkelblaues Logo/Nav, sticky mit dezentem
   Schatten sobald Inhalt darunter läuft. Kein Floating-Overlay-Look mehr:
   das Video im Hero bekommt seinen Kontrast über das dunkle Overlay,
   nicht über eine transparente Kopfzeile. */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-2) var(--space-4);
  background:var(--cream);
  box-shadow:0 1px 0 var(--line);
  transition:box-shadow .3s var(--ease);
}
.site-header.is-scrolled{
  box-shadow:0 4px 18px rgba(16,42,67,.12);
}
.site-header .brand{
  display:flex;align-items:center;
  font-family:var(--font-display);
  font-size:22px;
  color:var(--ink);
}
.site-header .brand svg{height:38px;width:auto;display:block;}
.site-header .brand small{
  display:block;
  font-family:var(--font-body);
  font-size:9px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--text);
  margin-top:2px;
}
.site-header nav{display:flex;align-items:center;gap:var(--space-4);}
.site-header nav a{
  font-size:11.5px;
  letter-spacing:1.5px;
  text-transform:uppercase;
  color:var(--ink);
  font-weight:500;
}
.site-header nav a:hover{color:var(--accent);}
.site-header nav a.nav-cta{
  border:1px solid var(--accent);
  color:var(--accent);
  padding:8px 14px;
  transition:var(--press), background .2s var(--ease), color .2s var(--ease);
}
.site-header nav a.nav-cta:hover{background:var(--accent);color:#fff;}
.site-header nav a.nav-cta:active{transform:scale(.97);}
@media (max-width:900px){
  .site-header nav{gap:var(--space-3);}
}

.nav-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
  width:44px;height:44px;
  border:none;
  background:transparent;
  cursor:pointer;
  padding:0;
  /* Bleibt über der geöffneten Schublade: dieselbe Taste öffnet und
     schliesst, und ihr Symbol wird dabei zum Kreuz. */
  position:relative;
  z-index:61;
  transition:var(--press);
}
.nav-toggle:active{transform:scale(.92);}
.nav-toggle span{
  display:block;
  width:22px;height:1.5px;
  background:var(--ink);
  transition:transform .25s var(--ease), opacity .25s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.25px) rotate(45deg);}
.nav-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.25px) rotate(-45deg);}

/* 860px statt 600px: der Header trägt jetzt sechs Nav-Links plus Anruf-
   Button (Leistungen, Projekte, Über uns, Bewertungen, Kontakt/Einzugsgebiet,
   Werkzeuge je nach Seite) und quetscht sich auf schmalen Laptop-Fenstern
   sonst zusammen mit dem Logo. */
@media (max-width:860px){
  .nav-toggle{display:flex;}
  .site-header nav{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:0;
    position:fixed;
    top:0;right:0;
    height:100dvh;
    width:min(78vw,320px);
    background:var(--ink);
    padding:calc(var(--space-3) + 44px) var(--space-3) var(--space-3);
    transform:translateX(100%);
    transition:transform .3s var(--ease);
    z-index:60;
    overflow-y:auto;
    /* Eine grössere Fläche liest sich schwerer: tieferer Schatten und eine
       helle Kante, an der das Licht bricht. */
    box-shadow:-24px 0 60px rgba(0,0,0,.45);
    border-left:1px solid rgba(255,255,255,.14);
  }
  /* Sobald die Geste die Schublade führt, darf keine CSS-Transition
     dazwischenfunken: die Spring in script.js schreibt den Transform. */
  .site-header nav.is-grabbable{
    transition:none;
    touch-action:pan-y;
    will-change:transform;
  }
  .site-header nav.is-open{transform:translateX(0);}
  .site-header nav a{
    width:100%;
    min-height:44px;
    display:flex;
    align-items:center;
    padding:var(--space-2) 0;
    border-bottom:1px solid var(--line-dark);
    font-size:14px;
    color:var(--cream);
  }
  .site-header nav a:hover{color:var(--accent-on-dark);}
  .site-header nav a.nav-cta{
    margin-top:var(--space-2);
    border:1px solid var(--line-dark);
    color:var(--cream);
    justify-content:center;
    text-align:center;
  }
  .site-header nav a:active{background:rgba(255,255,255,.08);}
}

/* Abdunkeln, um den Blick zu bündeln: die Schublade ist eine Aufgabe, die
   den Rest der Seite so lange zurücktreten lässt. */
.nav-scrim{
  position:fixed;inset:0;z-index:55;
  background:rgba(16,42,67,.55);
  opacity:0;
  -webkit-tap-highlight-color:transparent;
}
.nav-scrim[hidden]{display:none;}
.nav-locked,.nav-locked body{overflow:hidden;}
/* Die Kopfzeile bildet einen eigenen Stapelkontext, die Schublade liegt
   darin. Ohne diese Anhebung würde die Abdunklung sie mitverdunkeln,
   statt nur den Hintergrund. */
.nav-locked .site-header{z-index:70;}
.nav-locked .site-header::after{display:none;}

/* Hero */
.hero{
  position:relative;
  /* svh statt vh: sonst schiebt die ein- und ausfahrende Browserleiste am
     Handy die Kennzahlen unter den Bildschirmrand. */
  min-height:100vh;
  min-height:100svh;
  background:var(--ink);
  color:var(--cream);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  overflow:hidden;
}
.hero-video{
  position:absolute;inset:0;
  z-index:0;
  width:100%;height:100%;
  object-fit:cover;
}
.hero::after{
  content:"";
  position:absolute;inset:0;
  z-index:1;
  /* #102A43 bei ca. 55% Deckkraft, per Spec: sichert AA-Kontrast der
     weissen H1 unabhängig vom darunterliegenden Videobild. */
  background:
    linear-gradient(180deg, rgba(16,42,67,.62) 0%, rgba(16,42,67,.55) 42%, rgba(16,42,67,.92) 100%),
    linear-gradient(90deg, rgba(16,42,67,.58) 0%, rgba(16,42,67,.20) 58%, rgba(16,42,67,.05) 100%);
}
.hero-inner,.hero>.hero-meta{position:relative;z-index:2;}
.hero-inner{
  position:relative;
  padding:calc(var(--header-h) + var(--space-4)) var(--space-4) 0;
}
.hero-inner-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:var(--space-5);
  flex-wrap:wrap;
}
.hero h1{
  font-family:var(--font-display);
  font-weight:350;
  font-size:clamp(40px,7vw,96px);
  line-height:0.92;
  /* Laufweite gehört zur Grösse, nicht zum Element: -2.4px waren am Desktop
     richtig und haben die Zeile am Handy zusammengequetscht. In em bleibt
     das Verhältnis über die ganze clamp-Spanne gleich. */
  letter-spacing:-0.03em;
  max-width:14ch;
}
.hero h1 em{
  font-style:italic;
  color:var(--accent-on-dark);
}

/* Hero quote card */
.quote-card{
  flex:0 0 auto;
  width:100%;
  max-width:380px;
  background:var(--cream);
  color:var(--ink);
  padding:var(--space-4);
  box-shadow:0 30px 60px rgba(0,0,0,.35);
}
.quote-card-brand{
  font-family:var(--font-body);
  font-weight:600;
  font-size:12px;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--accent);
}
.quote-card-heading{
  font-family:var(--font-display);
  font-weight:400;
  font-size:26px;
  line-height:1.1;
  letter-spacing:-0.01em;
  margin-top:8px;
}
.quote-form{
  margin-top:var(--space-3);
  display:flex;
  flex-direction:column;
  gap:14px;
}
.quote-form label{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:12px;
  font-weight:500;
}
.quote-form input,.quote-form textarea{
  font-family:var(--font-body);
  font-size:14px;
  padding:11px 12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  resize:vertical;
}
.quote-form input:focus,.quote-form textarea:focus{
  outline:2px solid var(--accent);
  outline-offset:1px;
}
.quote-form input.is-invalid,.quote-form textarea.is-invalid{
  border-color:#b3261e;
}
.quote-error{
  display:none;
  color:#b3261e;
  font-size:11px;
  font-weight:400;
}
.quote-check{
  flex-direction:row !important;
  align-items:flex-start;
  gap:8px !important;
  font-size:12px;
  font-weight:400;
  line-height:1.4;
}
.quote-check input{width:auto;margin-top:2px;}
.quote-check a{color:var(--ink);text-decoration:underline;}
.quote-check.is-invalid span{color:#b3261e;}
.btn-quote{
  font-family:var(--font-body);
  font-weight:600;
  font-size:14px;
  letter-spacing:.4px;
  text-transform:uppercase;
  background:var(--accent);
  color:#fff;
  border:none;
  padding:14px;
  cursor:pointer;
  transition:background .2s var(--ease), var(--press);
}
.btn-quote:hover{background:var(--accent-hover);}
/* Die Rückmeldung sitzt auf dem Drücken, nicht auf dem Loslassen. */
.btn-quote:active{transform:scale(.97);}
/* .quote-success und .quote-fail stehen weiter unten bei den Formular-
   Rueckmeldungen. Die fruehere Regel hier war nach dem Umbau wirkungslos
   und nur noch eine zweite Fundstelle, die bei Aenderungen irrefuehrt. */
@media (max-width:900px){
  .quote-card{max-width:100%;}
}
@media (max-width:600px){
  .quote-card{padding:var(--space-3);}
  .hero-inner{padding:calc(var(--space-5) + 44px) var(--space-3) 0;}
}
/* .hero ist ein Spalten-Flex. Ein Element mit automatischen Rändern in der
   Querachse (margin:0 auto aus .container) wird darin NICHT gedehnt, sondern
   auf seine Inhaltsbreite geschrumpft. Deshalb stand die Kennzahlenzeile am
   Desktop 190px weiter innen als die H1. width:100% gibt ihr wieder eine
   feste Breite, max-width und die automatischen Ränder zentrieren dann wie
   bei jedem anderen .container. */
.hero-meta{
  width:100%;
  border-top:1px solid var(--line-dark);
  margin-top:var(--space-5);
  /* Gleicher seitlicher Innenabstand wie .hero-inner, damit die Zeile exakt
     unter der H1 beginnt. Vorher trug sie zusätzlich .container: die Shorthand
     padding:... 0 hat dessen seitlichen Abstand auf 0 gesetzt, damit klebte
     die Zeile am Handy am Bildschirmrand, während Logo, H1 und alle Abschnitte
     24px eingerückt sind. */
  padding:var(--space-4) var(--space-4) var(--space-5);
  display:flex;
  flex-wrap:wrap;
  gap:var(--space-4);
  justify-content:space-between;
  align-items:flex-end;
}
.hero-lines{display:flex;flex-direction:column;gap:var(--space-1);}
.hero-lines p{font-size:14px;line-height:1.45;max-width:38ch;color:rgba(255,255,255,.92);}
.hero-stats{display:flex;gap:var(--space-5);}
.hero-stats div{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:rgba(255,255,255,.72);}
.hero-stats strong{display:block;font-size:18px;letter-spacing:0;text-transform:none;color:var(--cream);margin-top:4px;font-family:var(--font-body);font-weight:500;}
@media (max-width:600px){
  .hero-meta{flex-direction:column;align-items:flex-start;gap:var(--space-3);
    padding:var(--space-4) var(--space-3);}
  /* Am Handy liest sich der Dreiklang als Liste, nicht als Textblock:
     etwas grösser, mit sichtbarem Abstand zwischen den Zeilen. */
  .hero-lines{gap:10px;}
  .hero-lines p{font-size:15px;max-width:34ch;text-wrap:balance;}
  /* Vorher: flex-wrap mit 40px Abstand -> "Sitz" und "Handwerk" nebeneinander,
     "Bewertungen" 40px darunter allein. Das sah nach Layoutfehler aus.
     Jetzt eine gleichmässige Liste mit engem Zeilenabstand. */
  .hero-stats{gap:var(--space-2) var(--space-3);flex-wrap:wrap;}
  .hero-stats div{flex:1 1 auto;}
  .hero-stats strong{font-size:17px;}
}

/* Section basics */
section{padding:var(--space-6) 0;}
.section-dark{background:var(--ink);color:var(--cream);}
.section-dark .accent{color:var(--accent-on-dark);font-style:italic;font-family:var(--font-display);}
.section-label{
  font-size:11px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent);
  margin-bottom:var(--space-2);
}
.section-heading{
  font-family:var(--font-body);
  font-size:clamp(28px,4vw,42px);
  line-height:1.1;
  /* Grosse Schrift wirkt zu weit gesetzt, deshalb leicht negativ. */
  letter-spacing:-0.015em;
  max-width:16ch;
}
.section-intro{
  font-size:16px;
  max-width:48ch;
  opacity:.8;
  margin-top:var(--space-2);
}
.big-statement{
  font-family:var(--font-display);
  font-weight:350;
  font-size:clamp(26px,4.2vw,44px);
  line-height:1.25;
  letter-spacing:-0.012em;
  max-width:24ch;
}

/* Einblicke: Panels, die beim Überfahren elastisch aufgehen */
.section-einblicke{padding-block:var(--space-6);}
.section-einblicke .section-label{color:var(--accent-on-dark);}
.section-einblicke .section-heading{max-width:16ch;}
.elastic-gallery{
  display:flex;gap:12px;
  height:clamp(380px,46vw,560px);
  margin-top:var(--space-5);
}
.elastic-panel{
  position:relative;flex:1;min-width:0;
  overflow:hidden;border-radius:16px;
  background:#0b1f33;
  cursor:pointer;
  filter:brightness(.55) saturate(.8);
  transition:flex .8s cubic-bezier(.22,1,.36,1), filter .6s ease;
}
.elastic-panel.is-active{flex:5;filter:brightness(1) saturate(1);}
.elastic-panel:focus-visible{outline:2px solid var(--accent-on-dark);outline-offset:3px;}
.elastic-panel img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.elastic-panel::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(16,42,67,0) 45%, rgba(16,42,67,.92) 100%);
}
.elastic-panel-meta{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  padding:var(--space-3);
  opacity:0;transform:translateY(8px);
  transition:opacity .5s ease .15s, transform .5s ease .15s;
}
.elastic-panel.is-active .elastic-panel-meta{opacity:1;transform:none;}
.elastic-panel-cat{
  display:block;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;
  color:var(--accent-on-dark);margin-bottom:6px;
}
.elastic-panel-meta h3{
  margin:0;font-family:var(--font-display);font-weight:400;
  font-size:clamp(20px,2.2vw,28px);line-height:1.15;color:var(--cream);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.elastic-gallery-more{margin-top:var(--space-3);}
.section-einblicke .more-link{color:var(--cream);}
.section-einblicke .more-link:hover{color:var(--accent-on-dark);}
@media (max-width:767px){
  .elastic-gallery{flex-direction:column;height:520px;gap:8px;}
  .elastic-panel{border-radius:12px;}
  .elastic-panel.is-active{flex:4;}
  .elastic-panel-meta{padding:var(--space-2);}
}
@media (prefers-reduced-motion:reduce){
  .elastic-panel,.elastic-panel-meta{transition:none;}
}

/* Testimonials */
.testimonial-grid{
  margin-top:var(--space-5);
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:var(--space-4);
}
.testimonial-card{
  border-top:1px solid var(--line);
  padding-top:var(--space-3);
}
.testimonial-card blockquote{
  font-family:var(--font-display);
  font-style:italic;
  font-size:19px;
  line-height:1.4;
  margin:0;
}
.testimonial-card figcaption{
  margin-top:var(--space-3);
  font-size:12px;
  letter-spacing:.5px;
  text-transform:uppercase;
  opacity:.6;
}
.testimonial-card figcaption time{margin-left:6px;opacity:.7;}
@media (max-width:900px){
  .testimonial-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:600px){
  .testimonial-grid{grid-template-columns:1fr;}
}

/* rows with hairline divider (services list), Nummer, Titel, Text,
   Hover-Vorschaubild. Angelehnt an die vom Kunden bevorzugte Darstellung
   auf riegler.amstudio.ink, mit echten Projektfotos statt Platzhaltern. */
.row-list{margin-top:var(--space-4);}
.row{
  display:grid;
  grid-template-columns:auto 1fr 1.5fr auto;
  align-items:center;
  gap:var(--space-3) var(--space-4);
  padding:var(--space-4) 0;
  border-top:1px solid var(--line);
  position:relative;
  overflow:hidden;
}
.row:last-child{border-bottom:1px solid var(--line);}
.row-num{
  font-family:var(--font-body);font-size:13px;font-weight:600;
  color:var(--accent);letter-spacing:.03em;min-width:2ch;
}
.row h2,.row h3{font-family:var(--font-display);font-weight:400;font-size:26px;letter-spacing:-0.01em;color:var(--ink);transition:color .2s var(--ease);}
.row p{font-size:15px;opacity:.8;max-width:52ch;}
.row-thumb{
  width:120px;height:76px;border-radius:6px;overflow:hidden;
  background:var(--alt);flex:0 0 auto;
}
.row-thumb img{
  width:100%;height:100%;object-fit:cover;
  opacity:.82;transform:scale(1.02);
  transition:opacity .35s var(--ease), transform .5s var(--ease);
}
.row-link{transition:background .2s var(--ease);}
.row-link:hover{background:var(--alt);}
.row-link:hover h3{color:var(--accent);}
.row-link:hover .row-thumb img{opacity:1;transform:scale(1.08);}
@media (max-width:900px){
  .row{grid-template-columns:1fr;gap:6px;}
  .row-num{order:-1;}
  .row-thumb{display:none;}
}

/* Contact / footer */
.contact-block{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:var(--space-5);
}
@media (max-width:900px){
  .contact-block{grid-template-columns:1fr;}
}
.contact-card{
  border:1px solid var(--line);
  padding:var(--space-4);
}
.contact-card dt{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;opacity:.6;margin-top:var(--space-3);
}
.contact-card dt:first-child{margin-top:0;}
.contact-card dd{font-size:17px;margin-top:4px;}

.map-embed{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  margin-top:var(--space-3);
}
.map-embed iframe{
  display:block;
  width:100%;
  height:220px;
  border:0;
}
.map-platzhalter{
  height:220px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:var(--space-2);
  padding:var(--space-3);
  background:var(--alt);
  font-size:14px;
}
.map-platzhalter p{margin:0;max-width:46ch;}
.map-embed-link{
  display:block;
  padding:var(--space-2) var(--space-3);
  font-size:13px;
  border-top:1px solid var(--line);
  background:var(--alt);
}

.btn{
  display:inline-block;
  border-bottom:1px solid currentColor;
  padding:var(--space-1) 0;
  font-size:13px;
  letter-spacing:1.2px;
  text-transform:uppercase;
  transition:opacity .3s var(--ease), var(--press);
}
.btn:hover{opacity:.6;}
.btn:active{transform:scale(.97);}
.btn-solid{
  background:var(--accent);
  color:#fff;
  border:none;
  padding:14px 28px;
  transition:background .2s var(--ease), var(--press);
}
.btn-solid:hover{background:var(--accent-hover);}

.rating-inline{display:flex;align-items:baseline;gap:var(--space-2);margin-top:var(--space-2);}
.rating-inline strong{font-family:var(--font-display);font-size:32px;font-weight:400;}
.rating-inline span{font-size:13px;opacity:.65;}

/* Footer, dunkelblau, volle NAP-Daten inkl. MwSt.-Nr. und PEC (Pflicht
   auf jeder Seite, siehe Art. 35 DPR 633/1972). */
footer{
  background:var(--ink);
  color:var(--cream);
  padding:var(--space-5) 0 var(--space-4);
}
footer .footer-grid{
  display:grid;
  grid-template-columns:1.3fr 1fr 1fr;
  gap:var(--space-4);
  padding-bottom:var(--space-4);
  border-bottom:1px solid var(--line-dark);
}
footer .footer-brand{display:flex;flex-direction:column;gap:10px;}
footer .footer-brand svg{height:34px;width:auto;}
footer .footer-brand .brand{color:var(--cream);}
footer .footer-brand .brand small{color:rgba(255,255,255,.72);}
footer .footer-brand p{font-size:13px;opacity:.9;max-width:34ch;line-height:1.6;}
footer h3{
  font-size:11px;letter-spacing:1.2px;text-transform:uppercase;
  opacity:.85;margin-bottom:var(--space-2);font-weight:600;
}
footer .footer-col dl{display:grid;grid-template-columns:auto 1fr;gap:6px var(--space-2);font-size:13.5px;}
footer .footer-col dt{opacity:.85;white-space:nowrap;}
footer .footer-col dd a{border-bottom:1px solid var(--line-dark);}
footer .footer-col dd a:hover{color:var(--accent-on-dark);border-color:var(--accent-on-dark);}
footer .footer-bottom{
  display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);
  margin-top:var(--space-3);font-size:12px;opacity:.8;
}
footer .footer-links a{border-bottom:1px solid currentColor;}
footer .footer-links a:hover{color:var(--accent-on-dark);}
@media (max-width:900px){
  footer .footer-grid{grid-template-columns:1fr 1fr;}
  footer .footer-brand{grid-column:1 / -1;}
}
@media (max-width:600px){
  footer .footer-grid{grid-template-columns:1fr;}
}

/* Ohne JavaScript bleibt nichts unsichtbar: die Startlage hängt an der
   .js-Markierung, die das Skript im Seitenkopf setzt. Die Bewegung selbst
   schreibt dann eine Spring aus /motion.js inline, deshalb hier keine
   Transition mit fester Dauer, die ihr dazwischenfunken könnte. */
.js .fade-up{
  opacity:0;
  /* Woher das Element hereinkommt, entscheidet die Scrollrichtung. */
  transform:translate3d(0,var(--reveal-from,24px),0);
}
.js .fade-up.is-visible{opacity:1;transform:none;}

/* ---------------------------------------------------------------------
   Nutzerpräferenzen
   Weniger Bewegung heisst nicht keine Rückmeldung, sondern eine sanftere:
   Überblendung statt Verschieben, kein Überschwingen.
--------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .js .fade-up{transform:none;transition:opacity .3s ease;}
  .js .fade-up.is-visible{transform:none;}
  .site-header nav{transition:opacity .2s ease;}
  .nav-toggle:active,.btn:active,.btn-solid:active,.btn-quote:active,
  .site-header nav a.nav-cta:active,.svc-card:active,.ort-grid a:active{transform:none;}
  .nav-toggle span{transition:none;}
}

/* Weniger Transparenz: der Nav-Scrim wird deckend statt halbtransparent.
   Der Header selbst ist ohnehin immer deckend weiss, kein Blur beteiligt. */
@media (prefers-reduced-transparency:reduce){
  .nav-scrim{background:rgba(16,42,67,.85);}
}

/* Mehr Kontrast: nahezu deckende Flächen mit klarer Kante. */
@media (prefers-contrast:more){
  :root{--line:rgba(16,42,67,.45);--line-dark:rgba(255,255,255,.5);}
  .site-header{border-bottom:1px solid var(--ink);box-shadow:none;}
  .section-intro,.row p,.contact-card dt,.testimonial-card figcaption{opacity:1;}
  .btn,.btn-solid{outline:1px solid currentColor;outline-offset:-1px;}
}

/* Grössere Ziele, wo mit dem Finger getippt wird. */
@media (pointer:coarse){
  .btn{min-height:44px;display:inline-flex;align-items:center;}
  .crumbs a{display:inline-flex;align-items:center;min-height:44px;}
  .quote-check{min-height:44px;align-items:center;}
}

/* Unter 16px zoomt iOS beim Fokus ins Feld hinein und schiebt das halbe
   Formular aus dem Bild. Das ist keine Antwort, das ist ein Ruck.
   Haengt an der Zeigerart statt an der Breite: ein iPad meldet 768 oder
   1024 Pixel, zoomt aber genauso wie ein Telefon. */
@media (pointer:coarse){
  .quote-form input,.quote-form textarea{font-size:16px;padding:12px;}
}

/* Nur für Screenreader */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* Abwechselnde helle Abschnitte, wie im Farbschema vorgesehen. */
.section-alt{background:var(--alt);}

/* --- Echte Bildwelt (4 Renderings) ------------------------------------- */
.media-band{
  display:grid;grid-template-columns:1fr 1fr;gap:1px;
  background:var(--line);border-block:1px solid var(--line);
}
.media-band--single{grid-template-columns:1fr;}
.media-band--trio{grid-template-columns:repeat(3,1fr);}
.media-band figure{background:var(--cream);margin:0;}
.media-band img{width:100%;height:clamp(240px,34vw,460px);object-fit:cover;}
.media-band figcaption{
  padding:var(--space-2) var(--space-3);font-size:14px;line-height:1.5;opacity:.72;
}
@media (max-width:900px){
  .media-band{grid-template-columns:1fr;}
  .media-band img{height:clamp(220px,52vw,320px);}
}

/* Aussage-Band vor dem dunklen Gebäude */
.section-dark--foto{
  position:relative;isolation:isolate;
  background-image:linear-gradient(90deg, rgba(16,42,67,.94) 0%, rgba(16,42,67,.82) 48%, rgba(16,42,67,.55) 100%),
                   url("/media/gebaeude-dunkel-1600.webp");
  background-size:cover;background-position:center right;
  padding-block:var(--space-7);
}
@media (max-width:900px){
  .section-dark--foto{
    background-image:linear-gradient(180deg, rgba(16,42,67,.88) 0%, rgba(16,42,67,.94) 100%),
                     url("/media/gebaeude-dunkel-900.webp");
    padding-block:var(--space-6);
  }
}

/* Hero-Video mit Standbild-Rückfall bei reduzierter Bewegung.
   Das Standbild liegt als Hintergrundbild in der Media Query, nicht als
   <img> im Markup: so lädt es nur, wer es auch sieht, und wer Bewegung
   zulässt, zahlt nicht zusätzlich für ein 1600px-Bild, das er nie zu
   Gesicht bekommt. */
@media (prefers-reduced-motion:reduce){
  .hero video.hero-video{display:none;}
  .hero{
    background-image:url("/media/hero-poster.webp");
    background-size:cover;
    background-position:center;
  }
}

/* Unter 768px läuft die leichte Hochformat-Fassung (hero-video-mobile.mp4,
   Auswahl über <source media> im Markup). Der Hero ist am Handy wegen des
   Formulars über 1400px hoch: auf volle Höhe gestreckt bliebe vom Video nur
   ein schmaler, stark vergrösserter Streifen. Deshalb deckt es nur den
   oberen Teil hinter H1 und Unterzeile ab und läuft hinter der Anfragekarte
   ins Dunkelblau aus. */
@media (max-width:767px){
  .hero-video{
    bottom:auto;
    height:78svh;
    -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
    mask-image:linear-gradient(180deg,#000 62%,transparent 100%);
  }
}

/* H1 traegt jetzt Keyword + Ort, der Slogan steht als Subline darunter */
.hero h1{max-width:19ch;font-size:clamp(36px,6vw,82px);}
.hero-sub{
  margin-top:var(--space-3);max-width:46ch;
  font-size:clamp(15px,1.6vw,19px);line-height:1.55;color:rgba(255,255,255,.88);
}

/* Cookie-Consent-Banner (GA4). Fixe untere Leiste, Markenfarben, bleibt bis
   zur Entscheidung sichtbar und verschwindet danach dauerhaft (localStorage). */
.cookie-banner{
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:60;
  background:var(--cream);
  border-top:1px solid var(--line);
  box-shadow:0 -8px 24px rgba(16,42,67,.12);
}
.cookie-banner-inner{
  max-width:1180px;
  margin:0 auto;
  padding:var(--space-3) var(--space-3);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:var(--space-3);
}
.cookie-banner-inner p{
  margin:0;
  flex:1 1 42ch;
  color:var(--text);
  font-size:14px;
  line-height:1.55;
}
.cookie-banner-inner p a{color:var(--accent);text-decoration:underline;}
.cookie-banner-actions{
  display:flex;
  gap:var(--space-2);
  flex-wrap:wrap;
  align-items:center;
}
.cookie-banner-actions .btn{color:var(--ink);}
@media (max-width:600px){
  .cookie-banner-inner{padding:var(--space-2);}
  .cookie-banner-actions{width:100%;}
  .cookie-banner-actions .btn,.cookie-banner-actions .btn-solid{flex:1 1 auto;text-align:center;justify-content:center;}
}

/* Weiterweg am Ende eines Abschnitts. Stand frueher nur in prog-seo.css,
   die die Startseite gar nicht laedt: dort war der Link deshalb ohne
   Farbe und ohne Groesse. Geteilte Komponente, also gehoert sie hierher. */
.more-link{color:var(--accent);font-size:14px;letter-spacing:.03em;display:inline-block;margin-top:var(--space-2);}

/* ---------------------------------------------------------------------
   Mobile-Feinschliff (2026-09-22)

   Gesammelte Korrekturen aus dem Durchgang am schmalen Gerät. Bewusst am
   Ende, damit sichtbar bleibt, was zum Handy gehört und was zum Grundlayout.
--------------------------------------------------------------------- */

/* Deutsche Komposita sind lang: "Notbeleuchtungssysteme" sprengt bei 38px
   jede 375px-Spalte. Ohne Trennung schiebt eine einzige Überschrift die
   ganze Seite seitlich weg. Trennung nur bei Überschriften, im Fliesstext
   liest sie sich unruhig. */
h1,h2,h3,
.section-heading,.page-head h1,.band h2,.big-statement,
.hero h1,.row h3,.quote-card-heading{
  overflow-wrap:break-word;
  hyphens:auto;
  -webkit-hyphens:auto;
}

@media (max-width:600px){
  /* 96px Luft über und unter jedem Abschnitt sind am Schreibtisch eine
     Pause und am Handy ein Marsch: zwei Daumenwischer bis zum nächsten
     Inhalt. */
  section{padding:var(--space-5) 0;}

  /* Logo und Menütaste standen 40px vom Rand, der Inhalt darunter 24px.
     Diese 16px Versatz sieht man sofort, sobald man scrollt. */
  .site-header{padding-inline:var(--space-3);}

  /* Karten mit 40px Innenrand lassen auf 375px nur noch 295px Text übrig. */
  .contact-card{padding:var(--space-3);}

  /* Die Karte trägt lange Werte (PEC-Adresse, MwSt.-Nummer). */
  .contact-card dd{overflow-wrap:anywhere;}

  /* Die Karte war so hoch wie ein halber Bildschirm, ohne mehr zu zeigen. */
  .map-embed iframe,.map-platzhalter{height:180px;}

  /* Die Zeilen der Leistungsliste hatten 40px oben und unten: sieben
     Leistungen wurden so zu einer sehr langen Strecke. */
  .row{padding:var(--space-3) 0;}
}

/* Mit dem Finger bedient: jedes Ziel mindestens 44px, und Eingabefelder
   nie unter 16px, sonst zoomt iOS beim Fokus ins Feld hinein und schiebt
   das halbe Formular aus dem Bild. Die Regel galt bisher nur für das
   Anfrageformular im Hero, nicht für die neun Rechner unter /werkzeuge/. */
@media (pointer:coarse){
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea,
  select{
    font-size:16px;
  }
  /* Die Rechner-Regeln stehen in tools.css: die Datei wird nach dieser
     geladen und gewinnt sonst bei gleicher Spezifitaet. */
  .ort-grid a,.svc-card{min-height:44px;}
  .footer-links a,.footer-col dd a{display:inline-block;padding-block:4px;}
  /* Ein 13px-Kaestchen trifft man nicht. Das Label ringsum ist zwar
     anklickbar, aber das Kaestchen ist das, was man ansieht. */
  /* flex:none, sonst schrumpft das Kaestchen als Flex-Element wieder auf
     13px zusammen, sobald der Text daneben lang wird. */
  .quote-check input{width:24px;height:24px;flex:none;}
  /* Kopf und Fuss tragen das Logo als Link: 38px hoch war knapp unter dem,
     was man sicher trifft. 44px passt genau in die Kopfhoehe von 76px. */
  .site-header .brand,footer .footer-brand .brand{min-height:44px;display:inline-flex;align-items:center;}
  .more-link{display:inline-flex;align-items:center;min-height:44px;}
}

/* ===================================================================
   Magazin: Übersicht (/magazin/) und Beitrag (/magazin/<slug>/).
   Steht bewusst hier und nicht in prog-seo.css: styles.css wird von
   jeder Seite geladen, prog-seo.css nicht von der Startseite. Genau
   daran ist .more-link schon einmal gescheitert.
   =================================================================== */

/* Lesespalte. 68ch ist bei ~18px rund 75 Zeichen je Zeile, also im
   lesbaren Bereich, ohne dass die Spalte auf dem Handy schmäler wird
   als der normale Seiteninhalt. */
.container-narrow{max-width:760px;}

.post-head{padding-bottom:var(--space-4);}
.post-head h1{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(32px,4.6vw,54px);line-height:1.08;letter-spacing:-.02em;
  margin:var(--space-2) 0 var(--space-3);
  /* Ausgewogener Umbruch statt einer kurzen Schlusszeile. Getrennt wird nur
     im Notfall und erst ab 12 Zeichen: sonst zerlegt der Browser genau die
     Eigennamen, wegen denen die Seite gefunden werden soll. */
  text-wrap:balance;
  hyphens:auto;
  hyphenate-limit-chars:12 5 5;
}
.post-meta{
  margin-top:var(--space-3);
  display:flex;flex-wrap:wrap;align-items:center;gap:10px;
  font-size:14px;color:var(--text);opacity:.7;
}
.post-meta a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}

.post-hero{margin:0 0 var(--space-5);}
.post-hero img{
  width:100%;height:clamp(240px,42vw,520px);object-fit:cover;
}

/* Fliesstext im Beitrag: grösser als der Rest der Seite, weil hier
   wirklich gelesen wird und nicht überflogen. */
.post-body>p{
  font-size:clamp(17px,1.4vw,19px);line-height:1.68;max-width:68ch;
  margin-bottom:var(--space-3);
}
.post-body h2{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(24px,2.8vw,34px);line-height:1.15;letter-spacing:-.015em;
  margin:var(--space-5) 0 var(--space-2);max-width:26ch;hyphens:auto;
}
.post-list{
  list-style:none;display:grid;gap:14px;
  max-width:68ch;margin:var(--space-2) 0 var(--space-4);
  font-size:clamp(16px,1.3vw,18px);line-height:1.6;
}
.post-list li{padding-left:22px;position:relative;}
.post-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:8px;height:1px;background:var(--accent);
}

/* Bilder dürfen aus der Lesespalte heraustreten, bleiben aber am Handy
   bündig mit dem Text. */
.post-figure{margin:var(--space-4) 0;}
.post-figure img{width:100%;height:auto;}
.post-figure figcaption{
  margin-top:10px;font-size:14px;line-height:1.5;color:var(--text);opacity:.72;
  max-width:60ch;
}

.post-note{
  margin:var(--space-4) 0 0;padding:var(--space-2) var(--space-3);
  background:var(--alt);border-left:3px solid var(--accent);
  font-size:14px;line-height:1.6;max-width:68ch;
}

.post-sources{margin-top:var(--space-5);padding-top:var(--space-3);border-top:1px solid var(--line);}
.post-sources h2{font-size:18px;font-family:var(--font-body);font-weight:600;margin:0 0 var(--space-2);letter-spacing:0;}
.post-sources ul{list-style:none;display:grid;gap:10px;}
.post-sources li{font-size:14px;line-height:1.55;}
.post-sources a{color:var(--accent);text-decoration:underline;text-underline-offset:2px;}
.post-sources a:hover{color:var(--accent-hover);}

.post-cta{
  margin:var(--space-5) 0 0;padding:var(--space-4);
  background:var(--ink);color:var(--cream);
}
.post-cta h2{
  color:var(--cream);font-family:var(--font-display);font-weight:350;
  font-size:clamp(22px,2.4vw,30px);line-height:1.15;margin:0 0 var(--space-2);
  max-width:24ch;hyphens:auto;
}
.post-cta p{color:rgba(255,255,255,.86);line-height:1.6;max-width:56ch;}
.post-cta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-2);
  margin-top:var(--space-3);
}
.post-cta .more-link{color:var(--accent-on-dark);}

/* Beitragskarten (Übersicht und "Weitere Beiträge") */
.post-grid{
  display:grid;gap:var(--space-4);
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  margin-top:var(--space-3);
}
.post-card{
  display:flex;flex-direction:column;gap:10px;
  background:var(--cream);border:1px solid var(--line);
  padding:var(--space-2);
  transition:border-color 160ms var(--ease),transform 160ms var(--ease);
}
.post-card:hover{border-color:var(--accent);transform:translateY(-2px);}
.post-card img{width:100%;height:200px;object-fit:cover;}
.post-card-meta{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  font-size:12px;letter-spacing:.6px;text-transform:uppercase;color:var(--text);opacity:.65;
}
.post-card h2,.post-card h3{
  font-family:var(--font-display);font-weight:350;
  font-size:clamp(20px,2vw,26px);line-height:1.15;letter-spacing:-.01em;hyphens:auto;
}
.post-card p{font-size:15px;line-height:1.55;color:var(--text);opacity:.85;}
.post-card .more-link{margin-top:auto;}

/* Ein einzelner Beitrag soll nicht als schmale Karte allein dastehen. */
.post-grid-lead:has(> :only-child){grid-template-columns:minmax(0,1fr);}
.post-grid-lead > :only-child img{height:clamp(220px,34vw,420px);}

@media (max-width:600px){
  .post-hero{margin-bottom:var(--space-4);}
  .post-body h2{margin-top:var(--space-4);}
  .post-cta{padding:var(--space-3);margin-left:calc(var(--space-3) * -1);margin-right:calc(var(--space-3) * -1);}
  .post-card img{height:180px;}
}
.band-links{display:flex;flex-wrap:wrap;gap:var(--space-1) var(--space-3);margin-top:16px;}

/* Honigtopf des Kontaktformulars. Nicht display:none: manche Bots erkennen
   das und lassen das Feld dann bewusst leer. Stattdessen aus dem Sichtfeld
   geschoben, fuer Hilfsmittel per aria-hidden am Container ausgeblendet. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;}

/* Fehlermeldung des Formulars. Muss auffallen, ohne zu schreien. */
.quote-fail{
  margin-top:var(--space-2);
  padding:10px 12px;
  background:#fef2f2;
  border-left:3px solid #b91c1c;
  color:#7f1d1d;
  font-size:14px;line-height:1.5;
}
.quote-success{
  margin-top:var(--space-2);
  padding:10px 12px;
  background:var(--alt);
  border-left:3px solid var(--accent);
  color:var(--ink);
  font-size:14px;line-height:1.5;
}