/* ==========================================================================
   Der smarte MeisterBetrieb — Stylesheet für den Webauftritt

   ERZEUGT von Website/_generator_webstil.py aus Grafik/_stil.py.
   NICHT VON HAND ÄNDERN — Änderungen gehen beim nächsten Lauf verloren.
   Farbe ändern: in Grafik/_stil.py, dann den Generator laufen lassen.

   Grundregel des Systems: Farbe gehört den Gewerken. Wertung läuft über
   Slate und Grau, Unterscheidung über Form und Füllgrad.
   ========================================================================== */

/* --- Schriften: vom eigenen Server, kein Aufruf bei Dritten -------------- */
@font-face { font-family:"Archivo";    src:url("Archivo.ttf") format("truetype");
             font-weight:100 900; font-display:swap; }
@font-face { font-family:"Newsreader"; src:url("Newsreader.ttf") format("truetype");
             font-weight:100 900; font-display:swap; }

/* --- Farben und Maße ---------------------------------------------------- */
:root{
  --papier:#FBFAF7;  --kachel:#FFFFFF;
  --ink:#15181E;        --muted:#6B7280;
  --linie:#DCD8CF;    --grau:#8C8C8C;
  --slate:#24485B;
  /* Gewerke — nur für Gewerke, nie für Wertung.
     Die Farbe steht unter ihrem Farbnamen, das Gewerk als Verweis darauf —
     so steht die Regel „Farbe = Gewerk" im Stylesheet selbst. */
  --terra:#B5532E;
  --saffron:#E0A12E;
  --violett:#8B5CF6;
  --metzger:var(--terra);   /* kreis */
  --baecker:var(--saffron);   /* quadrat */
  --konditor:var(--violett);   /* raute */
  /* Slate-Staffel: eine Stufe je Buchteil, alle >= 4,5:1 Kontrast */
  --slate-1:#24485B;
  --slate-2:#2C586F;
  --slate-3:#346884;
  --slate-4:#3B7796;
  --serif:"Newsreader", Georgia, serif;
  --grotesk:"Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --rand:clamp(24px, 3.6vw, 44px);
  --breite:1060px;
}

/* --- Grundgerüst --------------------------------------------------------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* Der Störer ragt bewusst über den Umschlag hinaus; auf schmalen Displays
   darf das aber keinen Querbalken erzeugen. */
html,body{overflow-x:hidden}
body{
  margin:0; background:var(--papier); color:var(--ink);
  font-family:var(--grotesk); line-height:1.55; font-size:17px;
}
.wrap{max-width:var(--breite); margin:0 auto; padding:0 var(--rand)}

/* --- Der dreifarbige Balken: dasselbe Motiv wie das Band auf dem Cover --- */
.balken{display:flex; height:6px}
.balken i{flex:1}
.balken .a{background:var(--metzger)}
.balken .b{background:var(--baecker)}
.balken .c{background:var(--konditor)}

/* --- Typografie ---------------------------------------------------------- */
h1{font-family:var(--serif); font-weight:600; font-size:clamp(30px,4.6vw,46px);
   line-height:1.1; margin:4px 0 6px}
h1 .klein{display:block; font-size:.46em; font-weight:400; color:var(--muted);
          letter-spacing:.01em; margin-bottom:2px}
.marke{font-size:12px; font-weight:700; letter-spacing:.22em;
       text-transform:uppercase; color:var(--muted)}
.unter{font-size:clamp(17px,2.1vw,21px); max-width:34em; margin:14px 0 26px}

/* --- Kacheln: weiß mit feiner Kontur, nie flächig eingefärbt ------------- */
.kachel{background:var(--kachel); border:1px solid var(--linie); border-radius:14px;
        padding:22px 24px}

/* --- Signetreihe: die drei Stellungen der wandernden Achse ---------------
   Regel: Die Marke selbst führt immer die mittlere Stellung. Diese Reihe ist
   Lesehilfe, kein zweites Logo — sie steht nur dort, wo sie etwas erklärt.
   Unter etwa 70 px verschwindet die Achse optisch; nicht kleiner setzen. */
.signetreihe{display:flex; align-items:center; gap:18px; margin:0 0 22px}
.signetreihe .sig{line-height:0}
.signetreihe .sig svg{display:block; width:78px; height:78px}
.signetreihe .txt{font-size:12px; font-weight:700; letter-spacing:.18em;
                  text-transform:uppercase; color:var(--muted)}
@media (max-width:520px){
  .signetreihe{gap:12px}
  .signetreihe .sig svg{width:70px; height:70px}
  .signetreihe .txt{display:none}
}

/* --- Gewerkeliste -------------------------------------------------------- */
.gewerke{list-style:none; margin:0 0 30px; padding:0}
.gewerke li{display:flex; align-items:center; gap:12px; font-weight:700; margin-bottom:7px}
.gewerke i{width:30px; height:4px; border-radius:2px; display:block}
.gewerke i.a{background:var(--metzger)}
.gewerke i.b{background:var(--baecker)}
.gewerke i.c{background:var(--konditor)}

/* --- Umschlag mit Störer ------------------------------------------------- */
.cover{position:relative; filter:drop-shadow(0 18px 34px rgba(21,24,30,.16))}
.cover img{display:block; width:100%; height:auto; border-radius:2px}
.stoerer{
  position:absolute; left:-7%; right:-7%; top:71%;
  transform:rotate(-7deg);
  background:var(--slate); color:#fff; text-align:center; padding:14px 10px;
  font-weight:700; font-size:clamp(17px,3.1vw,26px);
  letter-spacing:.06em; text-transform:uppercase;
  box-shadow:0 10px 24px rgba(21,24,30,.28);
}
.stoerer small{display:block; font-size:.56em; font-weight:700; letter-spacing:.18em;
               opacity:.85; margin-bottom:2px; text-transform:uppercase}

/* --- Zweispalter: Umschlag links, Text rechts ---------------------------- */
main{display:grid; grid-template-columns:minmax(0,420px) minmax(0,1fr); gap:56px;
     align-items:start; padding:26px 0 60px}
header{padding:38px 0 10px}
.punkte{border-top:1px solid var(--linie); padding-top:22px; margin-top:4px}
.punkte p{margin:0 0 10px; color:#3F4650}
.punkte strong{color:var(--ink)}

/* --- Fuß ----------------------------------------------------------------- */
footer{border-top:1px solid var(--linie); padding:30px 0 56px; font-size:14.5px;
       color:var(--muted)}
footer h2{font-family:var(--grotesk); font-size:12px; font-weight:700;
          letter-spacing:.2em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
footer .sp{display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr));
           gap:30px 34px}
footer a{color:var(--slate)}
footer p{margin:0 0 8px}

/* --- Schmale Fenster ----------------------------------------------------- */
@media (max-width:940px){
  main{grid-template-columns:1fr; gap:34px; padding-top:18px}
  /* Der Störer trägt beidseitig 7 % Überstand plus Drehung. Damit er auf dem
     Telefon vollständig sichtbar bleibt, wächst der Umschlag nur bis 82 vw. */
  .cover{max-width:min(340px,82vw); margin:0 auto}
}