/* Die Website zu BauTaktik.
   Farben Zeichen fuer Zeichen wie in app/stil.css -- test.mjs prueft das.
   Wer hier etwas aendert, aendert es dort mit. */
:root {
  --papier: #f4f5f8;
  --karte: #ffffff;
  --tinte: #171d2b;
  --tinte-leise: #5b6478;
  --akzent: #2f5d8c;
  --akzent-dunkel: #1f4166;
  --akzent-hell: #8fb6de;
  --linie: #d9dde6;
  --band: #eaecf3;
  --auf-akzent: #ffffff;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --zahlen: ui-monospace, "SF Mono", "Cascadia Mono", Consolas, monospace;
  --breite: 1200px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--papier); color: var(--tinte);
  font-family: var(--schrift); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; }
a { color: var(--akzent-dunkel); }

.mitte { width: 100%; max-width: var(--breite); margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 16px; }
h1 { font-size: clamp(34px, 6vw, 58px); font-weight: 800; }
h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; }
h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
p { margin: 0 0 16px; }
.gross { font-size: clamp(18px, 2.2vw, 21px); color: var(--tinte-leise); max-width: 62ch; }

/* ------------------------------------------------------------------ Kopf */

header.kopf {
  position: sticky; top: 0; z-index: 30;
  background: rgba(23, 29, 43, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
header.kopf .mitte { display: flex; align-items: center; gap: 20px; height: 66px; }
.wortmarke { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; font-weight: 800; font-size: 20px; letter-spacing: -0.02em; color: #fff; }
.wortmarke svg { width: 30px; height: 30px; border-radius: 7px; flex: none; }
.wm-akzent { color: var(--akzent-hell); }
.wm-text { white-space: nowrap; }
.wm-de { color: var(--akzent-hell); opacity: 0.6; font-weight: 700; }

nav.haupt { margin-left: auto; display: flex; align-items: center; gap: 6px; }
nav.haupt a { color: #dfe2ea; text-decoration: none; padding: 8px 12px; border-radius: 8px; font-size: 15px; font-weight: 500; }
nav.haupt a:hover { background: rgba(255,255,255,.1); color: #fff; }
@media (max-width: 780px) { nav.haupt a.verbergen { display: none; } }

/* ---------------------------------------------------------------- Knoepfe */

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  background: var(--akzent); color: var(--auf-akzent);
  font: inherit; font-weight: 700; font-size: 16px;
  text-decoration: none; border: 2px solid var(--akzent); cursor: pointer;
}
.knopf:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knopf.hell { background: var(--akzent-hell); border-color: var(--akzent-hell); color: #1b1338; }
.knopf.hell:hover { background: #bfb0ff; border-color: #bfb0ff; }
.knopf.rand { background: transparent; border-color: rgba(255,255,255,.4); color: #fff; }
.knopf.rand:hover { background: rgba(255,255,255,.12); border-color: #fff; }
.knopf.dunkelrand { background: transparent; border-color: var(--linie); color: var(--tinte); }
.knopf.dunkelrand:hover { background: var(--band); }
.knopf.klein { min-height: 42px; padding: 0 18px; font-size: 15px; }
.knopfzeile { display: flex; gap: 12px; flex-wrap: wrap; }

/* ------------------------------------------------------------------ Hero */

.hero { background: var(--tinte); color: #fff; padding: clamp(48px, 8vw, 90px) 0 clamp(56px, 9vw, 100px); }
.hero h1 { color: #fff; }
.hero .akzentwort { color: var(--akzent-hell); }
.hero p { color: #c9cfdd; font-size: clamp(17px, 2.1vw, 20px); max-width: 56ch; }
.hero-raster { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .hero-raster { grid-template-columns: 1.05fr .95fr; gap: 56px; } }

.vorzeile {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 18px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--akzent-hell);
}
.vorzeile::before { content: ''; width: 26px; height: 2px; background: var(--akzent-hell); }

.nebenweg { margin: 12px 0 0; font-size: 14px; color: #aeb6c7; }
.nebenweg a { color: var(--akzent-hell); }
.marken { display: flex; gap: 10px 22px; flex-wrap: wrap; margin-top: 26px; padding: 0; list-style: none; }
.marken li { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #aeb6c7; }
.marken li::before { content: '✓'; color: var(--akzent-hell); font-weight: 800; }

/* Der Bildschirm im Hero. Kein Foto einer Baustelle aus einer Bilddatenbank:
   Was hier gezeigt wird, ist die App selbst, und zwar als echtes Markup -- so
   bleibt es richtig, wenn sich die App aendert, und laedt ohne ein einziges
   Bild. */
.schirm {
  background: var(--karte); border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,.45); color: var(--tinte);
  border: 1px solid rgba(255,255,255,.12);
}
.schirm-kopf {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--linie); font-weight: 700; font-size: 14px;
}
.schirm-kopf .punkte { display: flex; gap: 5px; margin-right: 6px; }
.schirm-kopf .punkte span { width: 9px; height: 9px; border-radius: 50%; background: var(--linie); }
.schirm-rumpf { padding: 14px; display: grid; gap: 10px; }
.schirm-foto {
  position: relative; border-radius: 10px; overflow: hidden;
  background: linear-gradient(155deg, #c3bcb0, #8e857a);
  aspect-ratio: 4 / 3;
}
.schirm-foto .kringel {
  position: absolute; left: 46%; top: 40%; width: 34%; aspect-ratio: 1.25;
  border: 4px solid #e02020; border-radius: 50%; transform: rotate(-8deg);
}
/* Andeutung eines Raums statt einer leeren Flaeche: Sockelleiste unten, eine
   schief sitzende Steckdose in der Mitte. Es soll nicht wie ein Foto wirken,
   nur klar machen, worauf der rote Kreis zeigt. */
.schirm-foto::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14%;
  background: #9c9287; border-top: 2px solid rgba(0,0,0,.14);
}
.schirm-foto .fleck {
  position: absolute; left: 52%; top: 44%; width: 15%; aspect-ratio: 1;
  border-radius: 3px; background: #ded9d1; border: 1px solid rgba(0,0,0,.22);
  transform: rotate(6deg);
  box-shadow: inset 0 0 0 3px #c9c3ba;
}
.schirm-foto .fleck::after {
  content: ''; position: absolute; inset: 32%; border-radius: 50%; background: #6f675d;
}
.schirm-zeile { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.schirm-zeile .plakette { font-size: 12px; font-weight: 700; padding: 2px 9px; border-radius: 999px; background: #fdecea; color: #8c2318; }
.schirm-zeile .leise { color: var(--tinte-leise); }

/* -------------------------------------------------------------- Abschnitt */

section { padding: clamp(52px, 8vw, 92px) 0; }
section.hell { background: var(--karte); }

/* Ueberschrift links, Erklaerung rechts -- nicht beides in einer schmalen
   Spalte, waehrend die halbe Seite leer bleibt. Der Fliesstext behaelt seine
   Zeilenlaenge, er steht nur woanders. */
.kopfzeile { display: grid; gap: 10px; margin-bottom: 44px; }
.kopfzeile h2 { margin: 0; }
@media (min-width: 900px) {
  .kopfzeile { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 16px 56px; align-items: start; }
  .kopfzeile .gross { margin: 0; }
}

/* minmax(320px) und nicht 270: Bei sechs Kacheln auf 1160 Pixeln ergaeben
   270 vier Spalten -- und die zweite Reihe stuende mit zwei Kacheln und einem
   Loch daneben. Mit 320 sind es drei und drei. */
.raster { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); }

.kachel {
  background: var(--karte); border: 1px solid var(--linie);
  border-radius: 16px; padding: 26px;
}
section.hell .kachel { background: var(--papier); }
/* Gezeichnete Zeichen statt Schriftzeichen: Emoji und Sonderzeichen sehen auf
   jedem System anders aus -- mal bunt, mal als duenner Strich, mal als leeres
   Rechteck. Ein SVG sieht ueberall gleich aus und traegt die Markenfarbe. */
.kachel .zeichen {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  background: var(--band); color: var(--akzent-dunkel);
}
.kachel .zeichen svg { width: 24px; height: 24px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kachel p { margin: 0; color: var(--tinte-leise); font-size: 16px; }

/* Der Ablauf eines Arbeitstags als nummerierte Kette. */
.schritte { counter-reset: schritt; display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }
.schritt { position: relative; padding-top: 52px; }
.schritt::before {
  counter-increment: schritt; content: counter(schritt);
  position: absolute; top: 0; left: 0;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--akzent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-family: var(--zahlen);
}
.schritt h3 { margin-bottom: 8px; }
.schritt p { color: var(--tinte-leise); font-size: 16px; margin: 0; }

/* Vergleichstabelle. Sie nennt die Wettbewerber beim Namen und bleibt dabei
   fair -- wer sie schlechtredet, verliert den Leser, der beide kennt. */
.vergleich { overflow-x: auto; border: 1px solid var(--linie); border-radius: 16px; background: var(--karte); }
.vergleich table { width: 100%; border-collapse: collapse; min-width: 620px; }
.vergleich th, .vergleich td { text-align: left; padding: 14px 18px; border-bottom: 1px solid var(--linie); font-size: 16px; }
.vergleich thead th { font-size: 14px; color: var(--tinte-leise); font-weight: 700; }
.vergleich tbody tr:last-child td { border-bottom: none; }
.vergleich .wir { background: rgba(91, 59, 214, .05); font-weight: 600; }
.vergleich thead .wir { color: var(--akzent-dunkel); }

.frage { border-bottom: 1px solid var(--linie); }
.frage summary {
  cursor: pointer; padding: 20px 0; font-weight: 700; font-size: 18px;
  list-style: none; display: flex; gap: 16px; align-items: flex-start;
}
.frage summary::-webkit-details-marker { display: none; }
.frage summary::after { content: '+'; margin-left: auto; color: var(--akzent); font-weight: 800; font-size: 24px; line-height: 1; }
.frage[open] summary::after { content: '–'; }
.frage p { color: var(--tinte-leise); margin: 0 0 20px; max-width: 68ch; }

.schluss { background: var(--tinte); color: #fff; text-align: center; }
.schluss h2 { color: #fff; }
.schluss p { color: #c9cfdd; margin-left: auto; margin-right: auto; }
.schluss .knopfzeile { justify-content: center; }

footer {
  background: #10151f; color: #9aa3b5; padding: 48px 0 32px; font-size: 15px;
}
footer a { color: #c9cfdd; text-decoration: none; }
footer a:hover { color: #fff; text-decoration: underline; }
footer .reihen { display: grid; gap: 28px; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); margin-bottom: 32px; }
footer h4 { color: #fff; font-size: 14px; text-transform: uppercase; letter-spacing: .07em; margin: 0 0 12px; }
footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
footer .fuss { border-top: 1px solid rgba(255,255,255,.1); padding-top: 20px; display: flex; gap: 16px; flex-wrap: wrap; justify-content: space-between; font-size: 14px; }

/* --------------------------------------------------------- Rechtstexte */

/* Kein 760 Pixel schmaler Streifen in der Mitte eines breiten Monitors: Der
   Rahmen ist so breit wie Kopf- und Fussleiste. Die gewonnene Breite bekommt
   die Gliederung als Seitenspalte -- der Fliesstext bleibt bei rund 72
   Zeichen je Zeile, denn laengere Zeilen liest niemand. */
.rechtstext { background: var(--karte); padding: 48px 0 72px; }
.rechtstext h1 { font-size: clamp(28px, 4vw, 40px); }
.rechtstext h2 { font-size: 22px; margin-top: 36px; }
.rechtstext p, .rechtstext li { color: var(--tinte-leise); font-size: 16px; max-width: 72ch; }

.rechtsraster { display: grid; gap: 32px; grid-template-columns: 1fr; }
@media (min-width: 900px) {
  .rechtsraster { grid-template-columns: 240px minmax(0, 1fr); gap: 56px; }
  .rechtsraster .gliederung { position: sticky; top: 96px; align-self: start; }
}
.gliederung h4 { font-size: 13px; text-transform: uppercase; letter-spacing: .07em; color: var(--tinte-leise); margin: 0 0 12px; }
.gliederung ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.gliederung a { color: var(--tinte); text-decoration: none; font-size: 15px; }
.gliederung a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.luecke { background: #fdecea; color: #8c2318; padding: 2px 6px; border-radius: 4px; font-weight: 600; }

/* Sichtbarer Fokus fuer die Tastatur -- siehe app/stil.css. */
:focus-visible { outline: 3px solid var(--akzent); outline-offset: 2px; border-radius: 4px; }
.hero :focus-visible, .schluss :focus-visible, header.kopf :focus-visible { outline-color: var(--akzent-hell); }

/* ------------------------------------------------------------ Ratgeber */

/* Brotkrumen: der Weg hierher, für den Leser und für die Suchmaschine.
   Das passende Schema setzt der Erzeuger als JSON-LD daneben. */
.krumen { background: var(--karte); border-bottom: 1px solid var(--linie); font-size: 14px; }
.krumen .mitte { padding-top: 12px; padding-bottom: 12px; color: var(--tinte-leise); }
.krumen a { color: var(--tinte-leise); text-decoration: none; }
.krumen a:hover { color: var(--akzent-dunkel); text-decoration: underline; }
.krumen .trenner { color: var(--linie); }

.hero.schmal { padding: clamp(40px, 6vw, 64px) 0; }
.hero.schmal h1 { font-size: clamp(30px, 5vw, 46px); }
.vorzeile.dunkel { color: var(--akzent-dunkel); }
.vorzeile.dunkel::before { background: var(--akzent-dunkel); }

.artikel { background: var(--karte); padding: 40px 0 72px; }
.artikelkopf { max-width: 68ch; margin-bottom: 36px; }
.artikelkopf h1 { font-size: clamp(28px, 4.4vw, 44px); margin-bottom: 14px; }

/* Gliederung links, Text rechts -- und nicht beides in einer schmalen Spalte,
   während der halbe Monitor leer bleibt. Der Fließtext behält trotzdem seine
   Zeilenlänge: Über etwa 70 Zeichen verliert das Auge beim Rücksprung die
   nächste Zeile. */
/* min-width: 0 an den Kindern ist Bedingung und nicht Geschmack: Eine
   Rasterspalte ist mindestens so breit wie der kleinstmoegliche Inhalt, und
   eine Tabelle mit nicht umbrechenden Zellen ist das schnell 680 Pixel. Ohne
   die Null steht der ganze Artikel auf dem Telefon ueber dem Rand. */
.artikelraster { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); }
.artikelraster > * { min-width: 0; }
@media (min-width: 900px) {
  /* Die Textspalte bekommt ihre Lesebreite, nicht den ganzen Rest: Ueber etwa
     72 Zeichen je Zeile wird Fliesstext unangenehm. Damit daneben kein
     Loch steht, wird das Paar aus Gliederung und Text mittig gestellt --
     dann sieht der Rand nach Absicht aus und nicht nach Fehler. */
  .artikelraster {
    grid-template-columns: 240px minmax(0, 72ch);
    gap: 56px; align-items: start; justify-content: center;
  }
  .artikelraster .gliederung { position: sticky; top: 96px; }
  .fliesstext { max-width: none; }
}

.fliesstext { max-width: 72ch; font-size: 17px; }
.fliesstext h2 { font-size: clamp(22px, 3vw, 28px); margin: 40px 0 14px; scroll-margin-top: 90px; }
.fliesstext h2:first-child { margin-top: 0; }
.fliesstext h3 { font-size: 19px; margin: 28px 0 10px; }
.fliesstext p { margin: 0 0 18px; }
.fliesstext ul, .fliesstext ol { margin: 0 0 18px; padding-left: 22px; }
.fliesstext li { margin-bottom: 8px; }
.fliesstext strong { font-weight: 700; }
.fliesstext em { color: var(--tinte-leise); font-style: normal; font-size: 15px; }
.fliesstext a { color: var(--akzent-dunkel); }

/* Tabellen im Artikel dürfen waagerecht scrollen -- eine Tabelle, die sich in
   320 Pixel quetscht, ist keine Tabelle mehr. */
.fliesstext table {
  width: 100%; border-collapse: collapse; margin: 0 0 22px;
  display: block; overflow-x: auto; white-space: nowrap;
}
@media (min-width: 700px) { .fliesstext table { display: table; white-space: normal; } }
.fliesstext th, .fliesstext td { text-align: left; padding: 10px 14px; border-bottom: 1px solid var(--linie); font-size: 16px; }
.fliesstext thead th { font-size: 14px; color: var(--tinte-leise); background: var(--papier); }
.fliesstext tbody tr:last-child td { border-bottom: none; }

/* Der Hinweis auf das Werkzeug steht mitten im Text. Wer bis zum Schluss
   liest, ist die Ausnahme. */
.aufruf {
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 4px solid var(--akzent);
  border-radius: 12px; padding: 22px 24px; margin: 32px 0;
}
.aufruf h3 { margin: 0 0 8px; font-size: 18px; }
.aufruf p { margin: 0 0 16px; color: var(--tinte-leise); }
.aufruf .knopfzeile { margin: 0; }
.aufruf .knopf { min-height: 46px; font-size: 15px; }

.verwandt { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--linie); }
.verwandt h3 { font-size: 18px; margin-bottom: 12px; }
.verwandt ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.verwandt a { color: var(--akzent-dunkel); font-weight: 600; }

.kachel.klickbar { display: block; text-decoration: none; color: inherit; }
.kachel.klickbar:hover { border-color: var(--akzent); }
.kachel.klickbar h3 { margin-bottom: 8px; }

/* Musterschreiben und Vorlagen stehen als Zitatblock im Artikel. Sie sollen
   sich abheben, ohne wie ein Kasten mit Warnung auszusehen -- es ist Text zum
   Übernehmen, kein Hinweis. */
.fliesstext blockquote {
  margin: 0 0 24px; padding: 22px 24px;
  background: var(--papier); border: 1px solid var(--linie);
  border-left: 4px solid var(--tinte-leise); border-radius: 10px;
  font-size: 16px;
}
.fliesstext blockquote > :last-child { margin-bottom: 0; }
.fliesstext blockquote p { margin: 0 0 12px; }
/* Die Platzhalter in eckigen Klammern sollen als solche erkennbar sein. */
.fliesstext blockquote strong { color: var(--tinte); }
.fliesstext blockquote table { margin: 12px 0; background: var(--karte); border-radius: 8px; }
.fliesstext blockquote em { display: block; margin-top: 4px; }