/* ===========================================================================
   Arbeitsrecht — Stil fuer Impressum und Datenschutz

   Die Landingpage traegt ihre Gestaltung inline und brauchte nie eine externe
   Datei. Impressum und Datenschutz werden aber seit dem 14.08.2026 zentral aus
   /opt/lead-funnel/vorlagen erzeugt, und diese Vorlage bindet /stil.css ein.
   Im Arbeitsrecht existierte sie nicht: Der Aufruf lief auf HTTP 404, die
   Rechtstexte erschienen ohne jede Gestaltung -- weisser Grund, schwarzer Text,
   Serifenschrift des Browsers, waehrend die Landingpage daneben dunkel ist.

   Diese Datei bildet deshalb genau die Variablen ab, die die Vorlage erwartet,
   in den Farben der Arbeitsrechts-Landingpage. Sie wird von index.html NICHT
   benutzt -- dort bleibt alles inline, damit nichts doppelt gepflegt wird.
   =========================================================================== */

:root{
  /* uebernommen aus arbeitsrecht/public/index.html, Stand 19.08.2026 */
  --bg:#070f1c; --bg2:#0b1930;
  --glass:rgba(255,255,255,.055); --glass2:rgba(255,255,255,.085);
  --stroke:rgba(255,255,255,.13); --stroke2:rgba(255,255,255,.22);
  --txt:#eaf2fb; --mut:#9db2c8;
  --acc:#19d3a2; --acc2:#0fbf8f;

  /* Die Vorlage der Rechtstexte stammt von den hellen Funnels und erwartet
     zusaetzlich diese beiden. Im dunklen Design bedeuten sie etwas anderes:
     --pap2 ist die abgesetzte Flaeche (dort Papierton, hier Glaseffekt),
     --serif die Auszeichnungsschrift (dort EB Garamond, hier dieselbe
     Systemschrift -- Arbeitsrecht hostet keine eigenen Schriften). */
  --pap2:rgba(255,255,255,.055);
  --serif:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--txt);
  line-height:1.6; -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

header{
  position:sticky; top:0; z-index:50;
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  background:rgba(7,15,28,.65); border-bottom:1px solid var(--stroke);
}
header .wrap{display:flex;align-items:center;justify-content:space-between;padding:14px 22px}

.logo{font-weight:700;font-size:1.02rem;color:var(--txt);text-decoration:none;letter-spacing:-.2px}
.logo:hover{color:var(--acc)}

.btn{
  display:inline-block; padding:11px 20px; border-radius:10px;
  background:var(--acc); color:#04231b; font-weight:700; font-size:.92rem;
  text-decoration:none; border:1px solid var(--acc2); transition:.15s;
}
.btn:hover{background:var(--acc2)}
.btn.small{padding:8px 15px;font-size:.86rem}

a{color:var(--acc)}
a:hover{color:var(--acc2)}

footer{
  border-top:1px solid var(--stroke);
  padding:30px 0 40px; font-size:.88rem; color:var(--mut); margin-top:40px;
}
footer a{color:var(--mut);text-decoration:none;margin-right:18px}
footer a:hover{color:var(--acc)}
footer .fineprint{margin-top:14px;font-size:.8rem;line-height:1.55;color:var(--mut);opacity:.78;max-width:70ch}

/* Fliesstext der Rechtstexte. Die Seiten bringen eigene Feinheiten in einem
   <style>-Block mit; hier steht nur, was ohne diesen bereits traegt. */
main{padding:48px 0 64px}
main h1{font-size:2rem;margin-bottom:8px;font-weight:800;letter-spacing:-.4px}
main h2{font-size:1.2rem;margin:34px 0 8px;color:var(--acc)}
main h3{font-size:1rem;margin:20px 0 6px;color:var(--txt)}
main p, main li{margin-bottom:10px;max-width:68ch;color:var(--txt)}
main ul{margin:0 0 12px 22px}
main .anschrift{font-size:1.05rem;line-height:1.9}

/* Hervorgehobene Kaesten (Markenhinweis, Datenschutz-Hinweis) */
.marke, .hin{
  background:var(--pap2); border:1px solid var(--stroke);
  border-left:4px solid var(--acc);
  padding:16px 20px; border-radius:8px; margin:20px 0; color:var(--txt);
}

@media (max-width:640px){
  main h1{font-size:1.6rem}
  .wrap{padding:0 16px}
}

/* ===========================================================================
   Ratgeber — ergaenzt am 25.08.2026

   Ausschliesslich NEUE Klassen. Keine bestehende Regel dieser Datei wurde
   geaendert. Die beiden Landingpages binden stil.css nicht ein (ihr CSS steht
   inline), Impressum und Datenschutz benutzen keine der hier ergaenzten
   Klassen -- die Ergaenzung kann dort also nichts verschieben.

   Die Artikeltypografie ist bewusst unter .artikel gekapselt, damit die
   bestehenden Regeln fuer "main h1/h2/h3" (Rechtstexte) unberuehrt bleiben.
   =========================================================================== */

.logo span{color:var(--acc)}

/* Gestalteter Hintergrund wie auf der Landingpage steht bewusst NICHT hier,
   sondern im style-Block der jeweiligen Ratgeberseite -- sonst wuerden sich
   Impressum und Datenschutz mit veraendern. */

.artikel{max-width:780px}
.artikel h1{font-size:clamp(1.7rem,4.2vw,2.35rem);line-height:1.22;letter-spacing:-.5px;
  font-weight:800;margin:0 0 14px;max-width:26ch}
.artikel .lead-in{font-size:1.07rem;line-height:1.62;color:var(--txt);max-width:70ch;margin:0 0 24px}
.artikel .lead-in b{color:var(--acc);font-weight:700}
.artikel h2{font-size:1.32rem;font-weight:700;letter-spacing:-.2px;color:var(--txt);
  margin:40px 0 10px;scroll-margin-top:84px}
.artikel h3{font-size:1rem;font-weight:700;color:var(--acc);margin:22px 0 6px}
.artikel p,.artikel li{max-width:70ch;color:var(--txt);margin-bottom:11px}
.artikel ul,.artikel ol{margin:0 0 14px 22px}
.artikel li{margin-bottom:7px}
.artikel a{color:var(--acc)}
.artikel a:hover{color:var(--acc2)}
/* .artikel a ist spezifischer als .btn -- sonst faerbt der Fliesstext die
   Knopfbeschriftung gruen auf gruen und der Knopf wirkt leer. */
.artikel a.btn,.artikel a.btn:hover{color:#04231b}

/* Normzitat -- der Beleg zum Absatz, klein und abgesetzt */
.norm{display:block;margin:6px 0 16px;padding:9px 14px;border-left:3px solid var(--stroke2);
  background:var(--glass);border-radius:0 8px 8px 0;font-size:.88rem;line-height:1.55;
  color:var(--mut);max-width:70ch}
.norm b{color:var(--txt);font-weight:600}

/* Sprungmarken */
.sprung{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 32px;padding:14px 16px;
  background:var(--glass);border:1px solid var(--stroke);border-radius:12px}
.sprung a{font-size:.87rem;text-decoration:none;color:var(--mut);border:1px solid var(--stroke);
  border-radius:999px;padding:5px 13px;line-height:1.4}
.sprung a:hover{color:var(--acc);border-color:var(--acc)}
.sprung a.zumWerkzeug{background:var(--acc);border-color:var(--acc);color:#04231b;font-weight:700}
.sprung a.zumWerkzeug:hover{background:var(--acc2);border-color:var(--acc2);color:#04231b}

/* Werkzeugkasten -- der zweite und letzte Verweis auf das Werkzeug */
.werkzeugkasten{margin:32px 0;padding:20px 22px;border:1px solid var(--stroke2);
  border-radius:14px;background:var(--glass2)}
.werkzeugkasten b{display:block;font-size:1.05rem;color:var(--txt);margin-bottom:6px}
.werkzeugkasten p{color:var(--mut);font-size:.95rem;margin-bottom:14px;max-width:62ch}
.werkzeugkasten .btn{font-size:.95rem}

/* Kanzleiblock -- Klassennamen zeichengleich mit index.html, damit
   seiteAnreichern() denselben Block einsetzen kann */
.kanzlei{display:grid;grid-template-columns:auto 1fr;gap:5px 12px;align-items:baseline;
  background:var(--glass);border:1px solid var(--stroke);border-left:3px solid var(--acc);
  border-radius:12px;padding:16px 20px;margin:38px 0 0}
.kanzlei .lbl{grid-column:1/-1;font-size:.72rem;color:var(--mut);text-transform:uppercase;
  letter-spacing:.12em;font-weight:600}
.kanzlei .nam{font-size:1.18rem;font-weight:700;color:var(--txt);letter-spacing:-.2px}
.kanzlei .ort{color:var(--acc);font-weight:600}
.kanzlei .det{grid-column:1/-1;color:var(--mut);font-size:.93rem;line-height:1.55}
.kanzlei .tel{grid-column:1/-1;color:var(--txt);font-weight:600;font-variant-numeric:tabular-nums}
.redaktionszeile{margin:34px 0 0;font-size:.82rem;color:var(--mut);letter-spacing:.02em}

/* Rechtshinweis -- steht auf jeder Ratgeberseite */
.rechtshinweis{display:block;margin:26px 0 0;padding:18px 20px;border:1px solid var(--stroke);
  border-radius:12px;background:var(--glass);color:var(--mut)}
.rechtshinweis b{display:block;color:var(--txt);font-size:.95rem;margin-bottom:8px}
.rechtshinweis p{font-size:.9rem;line-height:1.6;max-width:78ch;margin-bottom:9px;color:var(--mut)}
.rechtshinweis .stand{font-size:.85rem;opacity:.85;margin-bottom:0}
.rechtshinweis time{color:var(--txt);font-weight:600}

/* Uebersichtsseite /ratgeber */
.rgListe{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin:28px 0 0}
a.rgKarte,.artikel a.rgKarte{display:block;padding:18px 20px;border:1px solid var(--stroke);
  border-radius:14px;background:var(--glass);text-decoration:none;transition:.15s;color:var(--txt)}
a.rgKarte:hover,.artikel a.rgKarte:hover{border-color:var(--acc);background:var(--glass2);color:var(--txt)}
.rgKarte b{display:block;color:var(--txt);font-size:1.02rem;line-height:1.35;margin-bottom:6px}
.rgKarte:hover b{color:var(--acc)}
.rgKarte span{display:block;color:var(--mut);font-size:.9rem;line-height:1.5}
.rgAndere{margin:30px 0 0;font-size:.9rem;color:var(--mut)}

@media (max-width:640px){
  .artikel h1{font-size:1.55rem}
  .artikel h2{font-size:1.18rem;margin-top:32px}
  .sprung{gap:6px;padding:12px}
  .werkzeugkasten{padding:16px 18px}
}