/* ==========================================================================
   WEGNER BEDACHUNGSUNTERNEHMEN GMBH, Basis
   Schriften, Farben, Masse, Typografie, Raster, Kopf und Fuss.
   Bausteine (Karten, Galerie, Schieber, Formulare) stehen in bausteine.css.

   Gestaltungsprinzip: klare Kanten, breite Versalien, viel Weissraum.
   Rot traegt Bedeutung, es ist keine Dekoration. Rot markiert genau die
   Stellen, an denen der Besucher etwas tun kann.
   ========================================================================== */

/* -------------------------------------------------------------- Schriften
   Beide Schriften liegen auf dem eigenen Server. Kein Google Fonts, kein
   fremder Host. Genau deshalb braucht die Seite kein Einwilligungsbanner.
   Wird das geaendert, wird das Banner Pflicht. */
@font-face{
  font-family:'Archivo';
  src:url('../schriften/archivo.woff2') format('woff2-variations');
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:'Manrope';
  src:url('../schriften/manrope.woff2') format('woff2');
  font-weight:200 800;font-style:normal;font-display:swap;
}

/* ----------------------------------------------------------------- Marken
   Die Seite ist schwarzweiss. Rot ist Akzent, keine Grundfarbe.
   Rot erscheint nur an drei Sorten von Stellen:
     1. Handlungsknoepfe, also alles, was der Besucher druecken soll
     2. ein hervorgehobenes Wort in einer Ueberschrift (<em>)
     3. Fehler und Hinweise in Formularen
   Ueberall sonst gilt Anthrazit, Weiss und Grau. Wer Rot woanders einsetzt,
   nimmt den Knoepfen ihre Wirkung. */
:root{
  /* Rot, direkt aus dem Firmenlogo abgemessen (dort #C80000 bis #D00000)
     und leicht abgedunkelt, damit es auf Weiss 6,1:1 haelt. */
  --rot:#C10A0A;
  --rot-tief:#8E0606;
  --rot-leucht:#FF5A46;        /* nur auf dunklem Grund einsetzen */
  --rot-hauch:#FBECEC;

  /* Dunkle Flaechen */
  --anthrazit:#15181B;
  --anthrazit-weich:#22272C;

  /* Schrift und Linien */
  --ink:#14171A;
  --leise:#565E66;
  --haar:#DDE2E6;

  /* Grundflaechen */
  --papier:#FFFFFF;
  --papier-kuehl:#F3F5F7;

  --warnung:#B3302A;
  --erfolg:#0F6E3F;

  /* Masse, Achterschritte */
  --r1:.5rem;  --r2:1rem;   --r3:1.75rem;
  --r4:3rem;   --r5:5rem;   --r6:7.5rem;

  /* Bewegung. Mikro-Interaktionen 150 bis 300 ms, groessere Uebergaenge
     unter 500 ms. Laenger fuehlt sich nicht edler an, sondern traege. */
  --weich:cubic-bezier(.2,.7,.2,1);
  --kurz:.16s; --mittel:.28s; --lang:.45s;

  /* Kleinstes Antippziel. Alles Drueckbare haelt das ein. */
  --griff:44px;

  --kopf-hoehe:68px;
  --kopf-rand:clamp(1rem,3vw,2.4rem);
  /* Das grosse Logo auf der Startseite, gleiche Masse fuer Platzhalter und Bild */
  --logo-gross:clamp(96px,12vw,170px);
  --breite:1240px;
}
@media(max-width:1100px){:root{--kopf-hoehe:58px}}

/* ---------------------------------------------------------------- Grundlage */
*,*::before,*::after{box-sizing:border-box}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--kopf-hoehe) + 1rem);
}
body{
  margin:0;background:var(--papier);color:var(--ink);
  font-family:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  font-size:17px;line-height:1.65;font-weight:400;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-top:var(--kopf-hoehe);
}
/* Seiten mit Kopfbild holen sich den Platz unter der Kopfzeile zurueck. */
body.hat-hero{padding-top:0}

img,video,svg{display:block;max-width:100%}
img,video{height:auto}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
::selection{background:var(--rot);color:#fff}

:focus-visible{
  outline:3px solid var(--rot);
  outline-offset:3px;
  border-radius:2px;
}

/* Sprungmarke fuer Tastatur und Screenreader */
.zum-inhalt{
  position:fixed;top:8px;left:8px;z-index:200;
  padding:.8rem 1.2rem;background:var(--anthrazit);color:#fff;
  font-weight:700;transform:translateY(-160%);transition:transform var(--kurz);
}
.zum-inhalt:focus{transform:translateY(0)}

/* ------------------------------------------------------------- Typografie */
h1,h2,h3,h4{
  font-family:'Archivo',system-ui,sans-serif;
  font-weight:750;line-height:1.05;letter-spacing:-.02em;
  margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:clamp(2.5rem,6.2vw,4.9rem);font-stretch:104%}
h2{font-size:clamp(1.9rem,3.9vw,3.1rem);font-stretch:102%}
h3{font-size:clamp(1.2rem,1.8vw,1.5rem);letter-spacing:-.01em}
h4{font-size:1.05rem;letter-spacing:.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}

.lead{
  font-size:clamp(1.08rem,1.55vw,1.32rem);line-height:1.55;
  color:var(--leise);max-width:60ch;
}
.klein{font-size:.86rem;line-height:1.5;color:var(--leise)}
/* Auf dunklem Grund waere das Grau von --leise unlesbar, nur 2,7:1.
   Diese Stellen bekommen den hellen Ton, damit ueberall 4,5:1 haelt. */
.fuss .klein,.kontaktkarte .klein,.abschnitt--dunkel .klein,.hero .klein{color:#AEB6BD}
.leicht{font-weight:300;font-stretch:88%}
em{font-style:normal;color:var(--rot)}

/* Die Vorspannzeilen ueber den Ueberschriften sind auf Wunsch entfallen.
   Die Ueberschriften tragen die Gliederung jetzt allein. */

/* Zahlen und technische Angaben tabellarisch, damit Spalten stehen */
.zahl{font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}

/* ------------------------------------------------------------------ Raster */
.huelle{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
@media(max-width:640px){.huelle{width:calc(100% - 2rem)}}

.abschnitt{padding-block:clamp(3.5rem,8vw,7rem)}
.abschnitt--eng{padding-block:clamp(2.5rem,5vw,4.5rem)}
.abschnitt--kuehl{background:var(--papier-kuehl)}
.abschnitt--dunkel{background:var(--anthrazit);color:#EDEFF1}
.abschnitt--dunkel h1,.abschnitt--dunkel h2,.abschnitt--dunkel h3{color:#fff}
.abschnitt--dunkel .lead,.abschnitt--dunkel .klein{color:#AEB6BD}

.kopfblock{max-width:74ch;margin-bottom:clamp(2rem,4vw,3.4rem)}
.kopfblock--geteilt{
  max-width:none;display:grid;gap:1.5rem 4rem;align-items:end;
  grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
}
@media(max-width:900px){.kopfblock--geteilt{grid-template-columns:1fr}}

/* --------------------------------------------------------------- Knoepfe */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:var(--griff);padding:.95rem 1.6rem;
  background:var(--rot);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;
  letter-spacing:.02em;border:2px solid var(--rot);cursor:pointer;
  transition:background var(--kurz),border-color var(--kurz),transform var(--kurz);
}
.knopf:hover{background:var(--rot-tief);border-color:var(--rot-tief)}
.knopf:active{transform:translateY(1px)}
.knopf svg{width:19px;height:19px;flex:none}

.knopf--linie{background:transparent;color:var(--ink);border-color:var(--ink)}
.knopf--linie:hover{background:var(--ink);border-color:var(--ink);color:#fff}

.knopf--hell{background:#fff;color:var(--anthrazit);border-color:#fff}
.knopf--hell:hover{background:var(--rot);border-color:var(--rot);color:#fff}

.knopf--hell-linie{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.knopf--hell-linie:hover{background:#fff;color:var(--anthrazit);border-color:#fff}

.knopf--klein{padding:.6rem 1.1rem;font-size:.85rem}

.knopfreihe{display:flex;flex-wrap:wrap;gap:.9rem;margin-top:2rem}

/* Textlink mit Pfeil. Bewusst nicht rot, damit die Knoepfe die einzigen
   roten Flaechen bleiben. Erst beim Zeigen wechselt er auf Rot. */
.pfeil-link{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.92rem;
  color:var(--ink);min-height:var(--griff);
  transition:color var(--kurz);
}
.pfeil-link svg{width:17px;height:17px;transition:transform var(--kurz)}
.pfeil-link:hover{color:var(--rot)}
.pfeil-link:hover svg{transform:translateX(5px)}
.auf-dunkel .pfeil-link{color:#fff}
.auf-dunkel .pfeil-link:hover{color:var(--rot-leucht)}

/* ------------------------------------------------------------------- Kopf */
.kopf{
  position:fixed;inset:0 0 auto;z-index:100;height:var(--kopf-hoehe);
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--haar);
  transition:transform var(--mittel) var(--weich),box-shadow var(--kurz);
}
.kopf.ist-gescrollt{box-shadow:0 6px 26px rgba(20,23,26,.09)}
.kopf.ist-weg{transform:translateY(-100%)}

.kopf__innen{
  height:100%;display:flex;align-items:center;gap:1.5rem;
  width:100%;padding-inline:var(--kopf-rand);
}
@media(max-width:640px){:root{--kopf-rand:1rem}.kopf__innen{gap:.75rem}}

/* Logo transparent in der flachen weissen Leiste, ohne Platte und Schatten.
   Beide Fassungen liegen uebereinander im selben Rasterfeld: die dunkle
   Unterzeile fuer die weisse Leiste, die helle fuer das Kopfbild. Auf den
   Unterseiten ist nur die dunkle sichtbar. */
.kopf__innen{position:relative}
.marke{display:grid;align-items:center;flex:none}
.marke img{grid-area:1/1;width:auto;height:calc(var(--kopf-hoehe) - 16px);display:block}
.marke img.marke__hell{display:none}

/* --- Startseite: das Logo wird beim Scrollen eingesammelt ----------------
   Oben steht das grosse Logo im Kopfbild, zwischen Leiste und Vorspann, am
   Inhaltsrand. Der Platz dafuer ist .hero__marke. Das Logo selbst gehoert
   der Kopfleiste und wird von js/logo.js per Transform ueber den Platzhalter
   gelegt; beim Scrollen wandert und schrumpft es in die Leiste (Skalierung
   nur nach unten, dadurch bleibt es scharf). Die helle Fassung blendet
   dabei in die dunkle ueber. Ohne JavaScript bleibt alles beim Kleinen. */
.js .hat-hero .marke{
  position:absolute;left:var(--kopf-rand);top:0;
  transform-origin:0 0;will-change:transform;
}
.js .hat-hero .marke img{height:var(--logo-gross);transition:none}
.js .hat-hero .marke img.marke__hell{display:block}
@media(max-width:1100px){
  /* Offenes Menue: das Logo ausblenden, sonst deckt es Punkte zu. */
  .kopf__innen:has(.navi.ist-offen) .marke{opacity:0;pointer-events:none}
}

.navi{margin-left:auto;display:flex;align-items:center;gap:.25rem}
.navi a{
  padding:.6rem .9rem;font-size:1.08rem;font-weight:600;
  color:var(--ink);position:relative;white-space:nowrap;
}
.navi a::after{
  content:"";position:absolute;left:.78rem;right:.78rem;bottom:.35rem;
  height:2px;background:var(--rot);transform:scaleX(0);transform-origin:left;
  transition:transform var(--kurz) var(--weich);
}
.navi a:hover::after,.navi a[aria-current="page"]::after{transform:scaleX(1)}
.navi a[aria-current="page"]{color:var(--rot)}

/* Die Auswahl steht bewusst doppelt: .navi a faerbt sonst auch diesen Knopf
   dunkel ein und dunkle Schrift auf Rot haelt nur 2,8:1. */
.navi a.kopf__ruf,
.kopf__ruf{
  display:inline-flex;align-items:center;gap:.55rem;margin-left:1rem;
  padding:.7rem 1.15rem;background:var(--rot);color:#fff;
  font-family:'Archivo',sans-serif;font-weight:700;font-size:.95rem;
  min-height:var(--griff);transition:background var(--kurz);
}
.kopf__ruf:hover{background:var(--rot-tief)}
.kopf__ruf svg{width:18px;height:18px;flex:none}

/* Menueschalter, nur auf schmalen Fenstern */
.menue-schalter{
  display:none;margin-left:auto;width:var(--griff);height:var(--griff);
  background:none;border:1px solid var(--haar);cursor:pointer;
  align-items:center;justify-content:center;flex-direction:column;gap:5px;
}
.menue-schalter span{
  display:block;width:20px;height:2px;background:var(--ink);
  transition:transform var(--kurz) var(--weich),opacity var(--kurz);
}
.menue-schalter[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menue-schalter[aria-expanded="true"] span:nth-child(2){opacity:0}
.menue-schalter[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:1100px){
  .menue-schalter{display:flex}
  .navi{
    position:fixed;inset:var(--kopf-hoehe) 0 auto;margin:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--papier);border-bottom:1px solid var(--haar);
    padding:.5rem 1rem 1.5rem;
    max-height:calc(100dvh - var(--kopf-hoehe));overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform var(--mittel) var(--weich),opacity var(--mittel),visibility var(--mittel);
    box-shadow:0 20px 40px rgba(20,23,26,.14);
  }
  .navi.ist-offen{transform:translateY(0);opacity:1;visibility:visible}
  .navi a{padding:.95rem .4rem;font-size:1.05rem;border-bottom:1px solid var(--haar)}
  .navi a::after{display:none}
  .kopf__ruf{margin:1rem .4rem 0;justify-content:center}
}

/* Dauerhafte Ruf-Leiste auf dem Handy. Die Telefonnummer ist nie weiter
   als einen Daumen entfernt, das ist bei Handwerk der wichtigste Weg. */
.ruf-leiste{display:none}
@media(max-width:760px){
  .ruf-leiste{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;inset:auto 0 0;z-index:95;
    background:var(--anthrazit);
    padding-bottom:env(safe-area-inset-bottom);
    transform:translateY(110%);transition:transform var(--mittel) var(--weich);
  }
  .ruf-leiste.ist-da{transform:translateY(0)}
  .ruf-leiste a{
    display:flex;align-items:center;justify-content:center;gap:.5rem;
    min-height:56px;color:#fff;font-family:'Archivo',sans-serif;
    font-weight:700;font-size:.95rem;
  }
  .ruf-leiste a:first-child{background:var(--rot)}
  .ruf-leiste svg{width:18px;height:18px}
  body{padding-bottom:56px}
}

/* -------------------------------------------------------------------- Fuss */
.fuss{background:var(--anthrazit);color:#AEB6BD;padding-block:clamp(3rem,6vw,4.5rem) 0}
.fuss__raster{
  display:grid;gap:2.5rem 3rem;
  grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));
}
@media(max-width:960px){.fuss__raster{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.fuss__raster{grid-template-columns:1fr}}

/* Im Fuss steht dasselbe Logo wie im Kopf, transparent und ohne Kasten.
   Moeglich macht das eine helle Fassung, siehe werkzeuge/logo-hell.py: das
   rote Dach und der weiss ausgefuellte Schriftzug tragen auf Anthrazit von
   allein, nur die schwarze Unterzeile ist dort auf Weiss umgestellt. */
.fuss__marke{display:inline-block;margin-bottom:1.2rem}
.fuss__marke img{display:block;width:176px;height:auto}
@media(max-width:560px){.fuss__marke img{width:150px}}

.fuss h4{
  color:#fff;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  margin-bottom:1rem;
}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.fuss li a,.fuss li span{display:block;padding:.32rem 0;font-size:.94rem}
.fuss li a:hover{color:#fff}
.fuss__leiste{
  margin-top:clamp(2.5rem,5vw,3.5rem);padding-block:1.5rem;
  border-top:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:space-between;
  font-size:.85rem;
}
.fuss__leiste nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.fuss__leiste a:hover{color:#fff}

/* --------------------------------------------------------------- Bewegung
   Alles Aufblenden laeuft ueber data-auf. Ohne JavaScript bleibt der
   Inhalt sichtbar, das ist Absicht. */
.js [data-auf]{opacity:0;transform:translateY(22px)}
.js [data-auf].ist-da{
  opacity:1;transform:none;
  transition:opacity var(--lang) var(--weich),transform var(--lang) var(--weich);
  transition-delay:calc(var(--takt,0) * 80ms);
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .js [data-auf]{opacity:1;transform:none}
}

/* ------------------------------------------------------ Offene Stellen
   Rot umrandete Kaesten markieren jede Stelle, an der eine Angabe fehlt
   oder unbestaetigt ist. Vor dem Livegang muessen alle verschwinden.
   Suchen nach: class="offen" */
.offen{
  border:2px dashed var(--warnung);background:#FFF6F5;color:#7A1F1A;
  padding:1rem 1.15rem;margin:1.2rem 0;font-size:.9rem;line-height:1.55;
  border-radius:3px;
}
.offen strong{display:block;font-family:'Archivo',sans-serif;
  letter-spacing:.08em;text-transform:uppercase;font-size:.72rem;margin-bottom:.35rem}
.abschnitt--dunkel .offen{background:rgba(179,48,42,.16);color:#FFD9D5;border-color:#E4695F}

/* Nur fuer Screenreader */
.nur-vorlesen{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* Nach oben */
.hoch{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:90;
  width:48px;height:48px;background:var(--anthrazit);color:#fff;
  border:none;cursor:pointer;display:grid;place-items:center;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity var(--kurz),visibility var(--kurz),transform var(--kurz),background var(--kurz);
}
.hoch.ist-da{opacity:1;visibility:visible;transform:none}
.hoch:hover{background:var(--rot)}
.hoch svg{width:20px;height:20px}
@media(max-width:760px){.hoch{bottom:70px;right:.9rem}}