/* =====================================================================
   Handwerk & Innovatives, Maurermeister Leopoldo Goldmann
   Version 2. Zwei Seiten, keine Bilder, kurz und buendig.
   Farben ausschliesslich aus dem Logo: Rot, Grau, Weiss.
   Kein Framework, keine Bibliothek, kein Build, keine fremden Server.
   ===================================================================== */

:root{
  --rot:        #B61622;
  --rot-dunkel: #8E0F19;
  --grau:       #5F5F62;
  --grau-hell:  #9A9A9C;
  --nacht:      #1D1D20;
  --papier:     #FFFFFF;
  --papier2:    #F3F3F4;
  --papier3:    #E7E7E9;
  --linie:      #D8D8DB;
  /* Kein Schwarz als Schriftfarbe. Flaechentext im Logograu,
     Ueberschriften und Marker im Logorot. */
  --schrift:    #5F5F62;

  /* Systemschriften: sofort da, keine Ladezeit, kein fremder Server. */
  --display: "Helvetica Neue", "Segoe UI", Roboto, Arial, sans-serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 980px;
  --rand: 20px;
  --luft: 52px;
  --s1: 0 1px 2px rgba(29,29,32,.07), 0 4px 12px rgba(29,29,32,.06);
}
@media(min-width:700px){:root{--rand:34px;--luft:76px}}
@media(min-width:1024px){:root{--luft:92px}}

/* =====================================================================
   Rueckfall fuer aeltere Telefone.
   Safari vor 13.4 und Chrome vor 79 kennen clamp() und min() nicht und
   werfen solche Zeilen weg. Darum stehen hier zuerst feste Werte.
   Neuere Browser ueberschreiben sie weiter unten mit den Rechenwerten.
   ===================================================================== */
.blatt-kopf .wrap,.blatt .wrap{padding-left:4.4%;padding-right:4.4%}
.blatt-kopf{padding-top:30px;padding-bottom:10px}
.blatt-marke{margin:0 0 20px}
.blatt-zeile img{width:100%}
.blatt .wrap{padding-top:26px}
.blatt .anspruch{margin:0 4.23% 0 0}
.blatt .anspruch img{width:34.5%}
.blatt figure{margin:16px auto 0}
.blatt figure img{max-width:86.5%}
.h2{font-size:28px}
.titel h1{font-size:40px}
.titel .unter{font-size:18px}
.dlg h2{font-size:24px}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--papier);color:var(--schrift);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased}

h1,h2,h3{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  line-height:1.12;margin:0;color:var(--rot)}
p{margin:0 0 14px}
a{color:var(--rot);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{color:var(--rot-dunkel)}
:focus-visible{outline:3px solid var(--rot);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--wrap);margin:0 auto;padding-left:var(--rand);padding-right:var(--rand)}
.sekt{padding:var(--luft) 0}
.sekt-papier{background:var(--papier2);border-top:1px solid var(--linie);
  border-bottom:1px solid var(--linie)}
.sekt-nacht{background:var(--nacht);color:#fff}
.sekt-nacht h2,.sekt-nacht h3{color:#fff}
.sekt-nacht a{color:#fff}

/* ---------- Marke ---------- */
.marke{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:19px;line-height:1.1;color:var(--schrift);text-decoration:none;display:block}
.marke span{color:var(--rot)}
.marke em{display:block;font-style:normal;font-family:var(--mono);font-weight:500;
  font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--grau);margin-top:4px}

/* ---------- Knopf ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:3px;
  font-family:var(--text);font-size:16px;font-weight:700;text-decoration:none;
  cursor:pointer;transition:background .15s ease,color .15s ease}
.btn-rot{background:var(--rot);color:#fff}
.btn-rot:hover{background:var(--rot-dunkel);color:#fff}
.btn-linie{background:transparent;color:var(--schrift);border-color:var(--linie)}
.btn-linie:hover{border-color:var(--rot);color:var(--rot)}
.sekt-nacht .btn-linie{color:#fff;border-color:rgba(255,255,255,.34)}
.sekt-nacht .btn-linie:hover{border-color:#fff;color:#fff}

/* ---------- Titelblatt, die Prospektseite eins zu eins ----------
   Alle Masse sind an der Vorlage abgemessen (Blatt 902 mal 1280) und in
   Prozent der Blattbreite umgerechnet. Sie sind zusaetzlich in Pixeln
   gedeckelt, damit das Blatt auf grossen Bildschirmen nicht ins Riesige
   waechst. Bezugsbreite fuer die Deckel ist die Blattbreite 1180.

     weisser Kopf      0    bis 188   = 14.7 %
     Logo              x 40 bis 862   = 91.1 % breit, oben 48  = 5.32 %
     Kontaktzeile      y 145 bis 171,  Abstand zum Logo 30      = 3.33 %
     Kopf unten        14                                      = 1.55 %
     Schlagzeile       x 560 bis 827  = 29.6 % breit, rechter Rand 75 = 8.3 %
                       oben 39 unter der Kopfkante             = 4.32 %
     Bogen             x 59 bis 840   = 86.6 % breit
                       oben 35 unter der Kopfkante, unten 65 ueber der Kante
   ---------------------------------------------------------------- */
.blatt-kopf .wrap,.blatt .wrap{max-width:1180px;
  padding-left:min(4.3vw,51px);padding-right:min(4.3vw,51px)}
.blatt-kopf{background:var(--papier);
  padding-top:min(5.32vw,63px);padding-bottom:min(1.55vw,18px)}
.blatt-marke{margin:0 0 min(2.7vw,32px)}
.blatt-marke img{display:block;width:100%;height:auto}

/* Kontaktzeile: Schriftzug aus dem Prospekt, gleiche Schrift wie das Logo.
   Die drei Teile sind in Prozent der Zeilenbreite gesetzt, zusammen genau
   100 %. So steht die Zeile auf jeder Breite in einer Zeile, im gleichen
   Verhaeltnis wie auf dem gedruckten Blatt. */
.blatt-zeile{margin:0;display:flex;align-items:center;flex-wrap:nowrap;
  line-height:0}
.blatt-zeile img{display:block;width:100%;height:auto}
.blatt-zeile .z-name{width:62.2%}
.blatt-zeile .z-punkt{width:1.5%}
.blatt-zeile .z-tel{display:block;width:36.3%;line-height:0}
/* Das Titelblatt ist genau einen Bildschirm hoch, wie eine Prospektseite. */
.titelblatt{display:flex;flex-direction:column;height:100vh;height:100svh}

/* Das rote Blatt fuellt den Rest des Bildschirms. */
.blatt{background:var(--rot);color:#fff;overflow:hidden;position:relative;
  flex:1;min-height:0}
.blatt .wrap{position:relative;height:100%;
  padding-top:min(4.32vw,51px);padding-bottom:0}
/* Schlagzeile oben rechts, weiss auf Rot. */
.blatt .anspruch{position:relative;z-index:2;margin:0 4.23% 0 0;
  display:flex;justify-content:flex-end;line-height:0}
.blatt .anspruch img{display:block;width:34.5%;min-width:190px;height:auto}
/* Bogen: liegt hinter der Schlagzeile, mittig, mit dem Fussabstand der Vorlage. */
.blatt figure{position:absolute;left:0;right:0;top:3.2%;bottom:5.96%;
  margin:0;z-index:1;display:flex;align-items:flex-end;justify-content:center}
.blatt figure picture{display:flex;align-items:flex-end;justify-content:center;
  width:100%;height:100%;min-height:0}
.blatt figure img{display:block;width:auto;height:100%;max-width:86.5%;
  object-fit:contain;object-position:bottom;margin:0 auto}

/* Schmale Geraete: das Titelblatt behaelt das Seitenverhaeltnis der
   Prospektseite (902 zu 1280). Es ist dann nicht mehr bildschirmhoch,
   dafuer steht alles im gleichen Verhaeltnis wie auf dem gedruckten Blatt.
   Geraete ohne aspect-ratio (Safari vor 15) bekommen darunter den
   einfachen Rueckfall: rotes Blatt waechst mit dem Bogen mit. */
@media(max-width:699px){
  .titelblatt{height:auto}
  .blatt .wrap{height:auto;padding-bottom:5.96%}
  .blatt figure{position:static;margin:4vw auto 0;display:block}
  .blatt figure picture{display:block;height:auto}
  .blatt figure img{width:100%;height:auto;max-width:100%}
  .blatt-zeile{display:block}
  .blatt-zeile .z-punkt{display:none}
  .blatt-zeile .z-name{width:100%}
  .blatt-zeile .z-tel{width:58.5%;margin-top:2.6vw}
}
@supports (aspect-ratio:1/1){
  @media(max-width:699px){
    .titelblatt{aspect-ratio:902/1280}
    .blatt .wrap{height:100%;padding-bottom:0}
    .blatt figure{position:absolute;left:0;right:0;top:3.2%;bottom:5.96%;
      margin:0;display:flex;align-items:flex-end;justify-content:center}
    .blatt figure picture{display:flex;align-items:flex-end;justify-content:center;
      width:100%;height:100%;min-height:0}
    .blatt figure img{display:block;width:auto;height:100%;max-width:86.5%;
      object-fit:contain;object-position:bottom;margin:0 auto}
    .blatt .anspruch img{width:34.5%;min-width:0}
    /* Kontaktzeile bleibt einzeilig, genau wie auf dem Blatt. */
    .blatt-zeile{display:flex}
    .blatt-zeile .z-punkt{display:block}
    .blatt-zeile .z-name{width:62.2%}
    .blatt-zeile .z-tel{width:36.3%;margin-top:0}
  }
}

/* Sehr flache Fenster: lieber scrollen als den Bogen zerdruecken. */
@media(max-height:520px) and (min-width:700px){
  .titelblatt{height:auto}
  .blatt .wrap{height:auto;padding-bottom:4%}
  .blatt figure{position:static;margin:18px auto 0;display:block}
  .blatt figure picture{display:block;height:auto}
  .blatt figure img{width:auto;height:auto;max-height:70vh;max-width:86.5%}
}

/* ---------- Titelblock ---------- */
.titel{padding:calc(var(--luft) * .9) 0 var(--luft)}
.strich{width:52px;height:4px;background:var(--rot);border-radius:2px;margin-bottom:22px}
.titel h1{font-size:clamp(34px,8.4vw,66px)}
.titel h1 span{display:block;color:var(--rot)}
.titel .unter{font-size:clamp(17px,2.6vw,21px);color:var(--grau);
  margin-top:20px;max-width:44ch}
.kennung{margin-top:30px;padding-top:22px;border-top:1px solid var(--linie);
  display:grid;gap:4px}
.kennung .name{font-family:var(--display);font-weight:800;font-size:21px}
.kennung .rolle{font-size:16px;color:var(--grau)}
.tuen{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* ---------- Marker, kleine Ueberschrift ---------- */
.marker{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--rot);font-weight:600;margin:0 0 12px}
/* Arbeitsgebiete: mittig gesetzt, gleiche Raender links und rechts. */
.sekt-papier{text-align:center}
.sekt-papier .marker{margin-bottom:18px}
.sekt-papier .h2{max-width:24ch;margin-left:auto;margin-right:auto}
.sekt-nacht .marker{color:#fff;opacity:.72}
.h2{font-size:clamp(25px,4.6vw,38px);max-width:22ch}
/* Mehrere Arbeitsgebiete stehen als Liste untereinander. */
.h2 + .h2{margin-top:26px}
.vor{color:var(--grau);max-width:60ch;margin-top:14px;font-size:17px}
.sekt-nacht .vor{color:#C7C7CA}

/* ---------- Raster ---------- */
.raster{display:grid;gap:18px;margin-top:34px}
@media(min-width:640px){.raster{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.raster-3{grid-template-columns:repeat(3,1fr)}}

.karte{background:var(--papier);border:1px solid var(--linie);border-radius:3px;
  padding:22px;box-shadow:var(--s1)}
.karte h3{font-size:19px;margin-bottom:9px}
.karte p{font-size:15.5px;color:var(--grau);margin:0}
.karte .nr{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  color:var(--rot);font-weight:600;display:block;margin-bottom:10px}

/* ---------- Fakten, zweispaltige Liste ---------- */
.fakten{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:0;
  border-top:1px solid var(--linie)}
.fakten li{display:grid;gap:2px;padding:14px 0;border-bottom:1px solid var(--linie)}
@media(min-width:640px){.fakten li{grid-template-columns:230px 1fr;gap:24px;align-items:baseline}}
.fakten dt,.fakten b{font-family:var(--mono);font-size:10px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--grau);font-weight:600}
.fakten span{font-size:16.5px}
.sekt-nacht .fakten{border-color:rgba(255,255,255,.16)}
.sekt-nacht .fakten li{border-color:rgba(255,255,255,.16)}
.sekt-nacht .fakten b{color:var(--grau-hell)}

/* ---------- Ablauf, nummerierte Schritte ---------- */
.schritte{list-style:none;margin:32px 0 0;padding:0;display:grid;gap:16px;counter-reset:s}
@media(min-width:820px){.schritte{grid-template-columns:repeat(4,1fr)}}
.schritte li{counter-increment:s;padding-top:16px;border-top:3px solid var(--rot)}
.schritte li::before{content:counter(s,decimal-leading-zero);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;color:var(--rot);font-weight:700;display:block;margin-bottom:8px}
.schritte h3{font-size:17px;margin-bottom:6px}
.schritte p{font-size:15px;color:var(--grau);margin:0}

/* ---------- Fuss ---------- */
.fuss{background:var(--nacht);color:#B4B4B8;padding:44px 0 0;font-size:15px}
.fuss a{color:#E7E7E9;text-decoration:none}
.fuss a:hover{color:#fff;text-decoration:underline}
.fuss h4{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--grau-hell);margin:0 0 12px;font-weight:600}
.fuss-raster{display:grid;gap:30px}
@media(min-width:700px){.fuss-raster{grid-template-columns:1.4fr 1fr 1fr}}
.fuss ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.fuss button{font:inherit;background:none;border:0;color:#E7E7E9;padding:0;
  cursor:pointer;text-align:left}
.fuss button:hover{color:#fff;text-decoration:underline}
.fuss .marke{color:#fff}
.fuss .marke em{color:var(--grau-hell)}
.fuss-unten{margin-top:38px;border-top:1px solid rgba(255,255,255,.13);padding:18px 0 22px}
.fuss-unten .wrap{display:flex;flex-wrap:wrap;gap:8px 26px;justify-content:space-between}
.fuss-unten p{margin:0;font-size:13.5px;color:var(--grau-hell)}

/* ---------- Dialoge ---------- */
/* Der Dialog erbt die Textfarbe nicht vom Body, deshalb hier ausdruecklich. */
dialog{border:0;padding:0;background:transparent;color:var(--schrift);
  max-width:760px;width:calc(100% - 28px)}
dialog::backdrop{background:rgba(29,29,32,.62)}
/* Ohne dialog Unterstuetzung wird der Kasten vom Skript mit display block
   geoeffnet. Damit er dann trotzdem ueber der Seite liegt: */
dialog:not([open]){display:none}
dialog[open]{position:fixed;top:50%;left:50%;
  -webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);
  margin:0;z-index:99;box-shadow:0 20px 60px rgba(29,29,32,.4)}
.dlg{background:var(--papier);border-radius:4px;padding:24px;max-height:86vh;overflow-y:auto}
@media(min-width:700px){.dlg{padding:36px}}
.dlg-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:18px}
.dlg h2{font-size:1.6rem}
.dlg-zu{font:inherit;font-size:30px;line-height:1;background:none;border:0;
  color:var(--grau);cursor:pointer;padding:0 8px}
.dlg-zu:hover{color:var(--rot)}
.dlg section{margin-top:20px}
.dlg h4{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--grau);margin:0 0 7px;font-weight:600}
.dlg p{font-size:15px;line-height:1.65}

/* ---------- Druck ---------- */
@media print{
  .fuss{display:none}
  .blatt{background:none;color:var(--schrift)}
  .blatt .anspruch{color:var(--schrift)}
  body{padding-bottom:0;font-size:11pt}
  .sekt{padding:14pt 0}
}