/* TOMIGX - Gestaltung
 *
 * Vorbild: citadel.com. Was dort wirkt, sind drei Dinge, und nur die drei
 * sind hier uebernommen:
 *
 *   1. Ueberschriften in einer Serifenschrift, in NORMALER Staerke, sehr
 *      gross. Nicht fett. Fett wirkt laut, normal wirkt souveraen.
 *   2. Eine einzige Farbe - tiefes Navy - und sonst Weiss und Grau.
 *   3. Sehr viel Luft. Die Abstaende sind der eigentliche Entwurf.
 *
 * Citadel arbeitet zusaetzlich mit ganzseitiger Fotografie. Das fehlt hier
 * bewusst: echte Bilder gibt es nicht, und Stockfotos von haendeschuettelnden
 * Menschen kosten genau das Vertrauen, das die Seite aufbauen soll. Die
 * Arbeit macht stattdessen die Typografie.
 *
 * Keine Google Fonts, keine Webfonts von fremden Servern. Georgia liegt auf
 * praktisch jedem Geraet und ist eine gut gezeichnete Serifenschrift. Das
 * kostet einen Hauch Eleganz gegenueber Citadels Lizenzschrift und spart die
 * IP-Uebertragung in die USA - bei einem Anbieter, der Datenschutz verkauft,
 * ist das kein schwerer Handel.
 */

:root{
  /* Direkt von citadel.com abgenommen */
  --navy:#08225a;
  --navy-hell:#144aa5;
  --ink:#373a3c;          /* waermeres Dunkelgrau statt Schwarz */

  --muted:#5f6669;
  --leise:#6b7275;   /* dunkler als optisch noetig: die Marker- und
                        Label-Schriften sind klein, und #8d9497 lag mit 3,0:1
                        unter dem WCAG-Mindestkontrast von 4,5:1 */
  --linie:#e3e5e8;
  --papier:#f5f6f7;
  --navy-feld:#08225a;

  --serif:Georgia,"Iowan Old Style","Times New Roman",Times,serif;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --luft:clamp(72px,11vw,132px);   /* Abstand zwischen Abschnitten */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:#fff;
  color:var(--ink);
  font-family:var(--sans);
  font-size:18px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

.wrap{max-width:1120px;margin:0 auto;padding:0 32px}
.schmal{max-width:720px}
@media(max-width:640px){.wrap{padding:0 22px}}

a{color:var(--navy-hell);text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:3px}

/* ---------- Typografie ----------
 * Serif fuer Ueberschriften, Gewicht 400. Das ist der ganze Trick. */
h1,h2,h3{margin:0}
h1,h2{
  font-family:var(--serif);
  font-weight:400;
  color:var(--navy);
  letter-spacing:-0.01em;
}
h1{font-size:clamp(2.5rem,6.2vw,4.1rem);line-height:1.07}
h2{font-size:clamp(1.85rem,4.2vw,3rem);line-height:1.12;margin-bottom:.55em}
h3{
  font-family:var(--sans);font-size:1.02rem;font-weight:600;
  color:var(--ink);letter-spacing:.005em;margin-bottom:.5em;
}
p{margin:0 0 1.15em}
p:last-child{margin-bottom:0}

.lead{font-size:clamp(1.12rem,1.9vw,1.32rem);line-height:1.55;color:var(--muted)}
.lead strong{color:var(--ink);font-weight:600}

/* ---------- Kopf ---------- */
header{border-bottom:1px solid var(--linie);background:#fff}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:20px;height:84px}
.marke{
  font-family:var(--sans);font-weight:700;font-size:1.16rem;
  letter-spacing:.13em;color:var(--navy);text-transform:uppercase;
}
.marke:hover{text-decoration:none}
.kopf nav{display:flex;gap:34px;font-size:1rem}
.kopf nav a{color:var(--navy)}
@media(max-width:720px){.kopf nav{display:none}.kopf{height:68px}}

/* ---------- Hero ----------
 * Statt Foto ein Navy-Feld. Die Ueberschrift bricht bewusst in drei Zeilen -
 * bei Citadel macht genau das den Auftritt. */
.hero{background:var(--navy-feld);color:#fff;padding:clamp(84px,13vw,152px) 0}
.hero h1{color:#fff;max-width:15ch;margin-bottom:.62em}
.hero .lead{color:#c3d0e4;max-width:46ch;margin-bottom:2.4em}
.hero .lead strong{color:#fff;font-weight:600}

.knopf{
  display:inline-block;border:1px solid rgba(255,255,255,.55);
  color:#fff;padding:15px 34px;font-size:1rem;font-weight:500;
  letter-spacing:.02em;transition:background .15s,border-color .15s;
}
.knopf:hover{background:#fff;color:var(--navy);border-color:#fff;text-decoration:none}
.knopf.dunkel{border-color:var(--navy);color:var(--navy)}
.knopf.dunkel:hover{background:var(--navy);color:#fff}

/* ---------- Abschnitte ---------- */
section{padding:var(--luft) 0;border-bottom:1px solid var(--linie)}
section.grau{background:var(--papier);border-bottom:0}
section:last-of-type{border-bottom:0}

/* Kleines Label ueber einer Ueberschrift */
.marker{
  font-size:.76rem;text-transform:uppercase;letter-spacing:.16em;
  color:var(--leise);font-weight:600;margin-bottom:1.6em;
}

/* ---------- Beispieldialog ---------- */
.dialog{border-top:1px solid var(--linie);margin-top:2.6em}
.blase{padding:26px 0;border-bottom:1px solid var(--linie)}
.wer{
  font-size:.72rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--leise);margin-bottom:9px;font-weight:600;
}
.blase p{margin:0;font-size:1.06rem;line-height:1.5}
.blase.bot p{color:var(--navy);font-family:var(--serif);font-size:1.16rem}
.fussnote{font-size:.98rem;color:var(--muted);margin-top:2.2em;max-width:56ch}

/* ---------- Raster ---------- */
.raster{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:56px 52px;margin-top:3.2em}
.karte{border-top:2px solid var(--navy);padding-top:22px}
.karte .nr{
  display:block;font-size:.76rem;font-weight:700;color:var(--navy);
  letter-spacing:.16em;margin-bottom:1.1em;
}
.karte p{font-size:1rem;color:var(--muted);margin:0}

/* ---------- Leistungsliste ---------- */
ul.haken{list-style:none;padding:0;margin:2.6em 0 0}
ul.haken li{
  padding:30px 0;border-top:1px solid var(--linie);
  color:var(--muted);font-size:1.04rem;
}
ul.haken li:last-child{border-bottom:1px solid var(--linie)}
ul.haken li strong{
  display:block;font-family:var(--serif);font-weight:400;font-size:1.34rem;
  color:var(--navy);margin-bottom:.35em;line-height:1.25;
}
ul.haken li em{font-style:normal;color:var(--ink);font-weight:600}

/* ---------- Ausprobieren ---------- */
.probe{background:var(--navy-feld);color:#fff;border-bottom:0}
.probe h2{color:#fff}
.probe p{color:#c3d0e4;max-width:54ch}
.probe .pfeil{
  display:inline-flex;align-items:center;gap:12px;margin-top:2em;
  font-weight:500;color:#fff;font-size:1.04rem;letter-spacing:.02em;
}
.probe .pfeil span[aria-hidden]{font-size:1.5rem;line-height:1}

/* ---------- Kontakt ---------- */
.kontakt dl{
  display:grid;grid-template-columns:150px 1fr;gap:0;margin:2.8em 0 0;
  border-top:1px solid var(--linie);
}
.kontakt dt{
  font-size:.74rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--leise);font-weight:600;padding:22px 0;
  border-bottom:1px solid var(--linie);
}
.kontakt dd{margin:0;padding:22px 0;border-bottom:1px solid var(--linie);font-size:1.06rem}
@media(max-width:560px){
  .kontakt dl{grid-template-columns:1fr}
  .kontakt dt{padding-bottom:2px;border-bottom:0}
  .kontakt dd{padding-top:2px}
}

/* ---------- Fuss ---------- */
footer{padding:44px 0 56px;font-size:.94rem;color:var(--leise);border-top:1px solid var(--linie)}
.fuss{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px}
.fuss nav{display:flex;gap:28px}
.fuss a{color:var(--muted)}

/* ---------- Rechtstexte ---------- */
.rechtstext{padding:clamp(56px,8vw,92px) 0 var(--luft)}
.rechtstext h1{font-size:clamp(2rem,4.4vw,2.9rem);margin-bottom:.8em}
.rechtstext h2{
  font-size:1.32rem;font-family:var(--sans);font-weight:600;
  color:var(--ink);margin-top:2.6em;letter-spacing:0;
}
.rechtstext h2:first-of-type{margin-top:1.6em}
.rechtstext p,.rechtstext li{color:var(--muted);font-size:1rem}
.rechtstext strong{color:var(--ink);font-weight:600}
.rechtstext ul{padding-left:20px;margin:0 0 1.2em}
.rechtstext li{margin-bottom:.5em}
.rechtstext address{font-style:normal;color:var(--muted);margin-bottom:1.2em;font-size:1rem}
.hinweis{
  background:#fff8e6;border-left:3px solid #b45309;
  padding:20px 24px;margin:0 0 2em;font-size:.97rem;
}
.hinweis p{color:var(--ink);margin-bottom:.6em}
.hinweis p:last-child{margin-bottom:0}