/* ============================================================
   IT Solutions Sebastian Reßler - Stylesheet
   Reines CSS, keine Fremdanbieter, keine Schriftdienste.
   Schrift: Systemschriften (auf jedem Gerät vorhanden).
   ============================================================ */

:root {
      --bg: #e9e9ea; --surface: #ffffff; --ink: #1a1720; --ink-soft: #585263; --ink-faint: #837d8d;
  --line: #e6e2ec; --line-strong: #bdb4cb;
  --brand: #6740c4; --brand-ink: #5330a8; --brand-soft: #ede7fb;
  --btn-bg: #6740c4; --btn-bg-hover: #5330a8; --btn-ink: #ffffff;
  --badge-ink: #5330a8; --nav-ink: #5330a8;
  --head-bg: rgba(255,255,255,.92); --foot-bg: #181322; --foot-ink: #b6afc2; --foot-head: #ffffff; --foot-link: #ded8e8;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.62;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Kopfbereich ---------- */

.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--head-bg);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}

.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; min-height: 70px;
}

.brand { display: flex; align-items: center; gap: 11px; font-weight: 650; color: var(--ink); letter-spacing: -.015em; }
.brand:hover { text-decoration: none; }
.brand svg { flex: none; }
.brand b { font-weight: 650; }
.brand span { display: block; font-size: .78rem; font-weight: 500; color: var(--ink-faint); letter-spacing: .02em; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  color: var(--ink-soft); font-size: .95rem; font-weight: 500;
  padding: 8px 13px; border-radius: var(--radius-sm);
}
.nav a:hover { color: var(--ink); background: var(--bg); text-decoration: none; }
.nav a[aria-current="page"] { color: var(--nav-ink); background: var(--brand-soft); }

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

.hero { padding: 88px 0 76px; background: var(--surface); border-bottom: 1px solid var(--line); }
.hero h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.15rem); line-height: 1.12; letter-spacing: -.032em; font-weight: 680; max-width: 30ch; }
.hero .lead { margin-top: 20px; font-size: clamp(1.05rem, 1rem + .35vw, 1.25rem); color: var(--ink-soft); max-width: 56ch; }
.hero .actions { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 12px; }

.eyebrow {
  display: inline-block; margin-bottom: 18px; padding: 5px 12px;
  background: var(--brand-soft); color: var(--badge-ink);
  border-radius: 999px; font-size: .8rem; font-weight: 600; letter-spacing: .01em;
}

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--radius-sm);
  font-size: .96rem; font-weight: 600; border: 1px solid transparent; cursor: pointer;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--btn-bg); color: var(--btn-ink); }
.btn-primary:hover { background: var(--btn-bg-hover); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--bg); border-color: var(--ink-faint); }

/* ---------- Abschnitte ---------- */

.section { padding: 72px 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { max-width: 62ch; margin-bottom: 40px; }
.section-head h2 { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); letter-spacing: -.025em; font-weight: 660; line-height: 1.2; }
.section-head p { margin-top: 12px; color: var(--ink-soft); font-size: 1.05rem; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 26px;
  box-shadow: var(--shadow);
}
.card h3 { font-size: 1.1rem; font-weight: 640; letter-spacing: -.012em; margin-bottom: 9px; }
.card p { color: var(--ink-soft); font-size: .96rem; }
.card .icon {
  width: 42px; height: 42px; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}

.card-link { display: block; color: inherit; }
.card-link:hover { text-decoration: none; border-color: var(--brand); }
.card-link:hover h3 { color: var(--brand); }

/* ---------- Projektkarten ---------- */

.project { display: flex; flex-direction: column; gap: 14px; }
.project .tag {
  align-self: flex-start; padding: 4px 10px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--line);
  font-size: .76rem; font-weight: 600; color: var(--ink-soft); letter-spacing: .02em;
}
.project .facts { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; }
.project .facts li {
  font-size: .84rem; color: var(--ink-soft);
  background: var(--bg); border: 1px solid var(--line);
  padding: 3px 10px; border-radius: 999px;
}

/* ---------- Fließtext-Seiten ---------- */

.page-head { padding: 60px 0 44px; background: var(--surface); border-bottom: 1px solid var(--line); }
.page-head h1 { font-size: clamp(1.75rem, 1.3rem + 1.7vw, 2.5rem); letter-spacing: -.03em; font-weight: 670; line-height: 1.15; }
.page-head p { margin-top: 14px; color: var(--ink-soft); font-size: 1.08rem; max-width: 60ch; }

.prose { max-width: 74ch; }
.prose h2 { font-size: 1.35rem; font-weight: 650; letter-spacing: -.02em; margin: 38px 0 10px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.08rem; font-weight: 640; margin: 26px 0 8px; }
.prose p { margin-bottom: 13px; color: var(--ink-soft); }
.prose ul, .prose ol { margin: 0 0 14px 20px; color: var(--ink-soft); }
.prose li { margin-bottom: 6px; }
.prose strong { color: var(--ink); font-weight: 620; }
.prose code { background: var(--bg); border: 1px solid var(--line); padding: 1px 6px; border-radius: 5px; font-size: .89em; }
.prose address { font-style: normal; margin-bottom: 14px; color: var(--ink-soft); }

.hinweis {
  background: var(--brand-soft); border: 1px solid #cfe0f7;
  border-radius: var(--radius); padding: 18px 22px; margin-bottom: 26px;
}
.hinweis p { margin: 0; color: var(--brand-ink); font-size: .96rem; }

/* ---------- Kontakt ---------- */

.contact-list { list-style: none; display: grid; gap: 14px; }
.contact-list li { display: flex; gap: 13px; align-items: flex-start; }
.contact-list svg { flex: none; margin-top: 3px; color: var(--brand); }
.contact-list b { display: block; font-weight: 600; font-size: .95rem; }
.contact-list span { color: var(--ink-soft); font-size: .96rem; }

/* ---------- Fußbereich ---------- */

.site-foot { background: var(--foot-bg); color: var(--foot-ink); padding: 56px 0 30px; margin-top: 0; }
.site-foot a { color: var(--foot-link); }
.site-foot a:hover { color: #fff; }
.site-foot .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; }
.site-foot h4 { color: var(--foot-head); font-size: .82rem; text-transform: uppercase; letter-spacing: .07em; margin-bottom: 15px; font-weight: 620; }
.site-foot ul { list-style: none; }
.site-foot li { margin-bottom: 9px; font-size: .93rem; }
.site-foot .about p { font-size: .93rem; max-width: 40ch; }
.site-foot .bottom {
  margin-top: 44px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between;
  font-size: .86rem; color: #8b95a5;
}

/* ---------- Responsiv ---------- */

@media (max-width: 900px) {
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .site-foot .cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wrap { padding: 0 18px; }
  /* Kopfbereich auf zwei Zeilen: oben die Marke, darunter die Navigation.
     Vorher standen Logo und vier Menuepunkte in einer Zeile und klebten
     aneinander. */
  .site-head .wrap { flex-wrap: wrap; justify-content: center; gap: 10px; padding-top: 12px; padding-bottom: 12px; }
  .brand { width: 100%; justify-content: center; }
  .nav { width: 100%; justify-content: center; }
  .nav a { padding: 7px 11px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .site-foot .cols { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding: 60px 0 52px; }
  .section { padding: 52px 0; }
  .nav { gap: 0; }
  .nav a { padding: 8px 9px; font-size: .9rem; }
  .brand span { display: none; }
}

@media print {
  .site-head, .site-foot, .actions { display: none; }
  body { background: #fff; }
}

/* ------------------------------------------------------------------
   Dunkler Modus des Geraets.
   Wer sein Betriebssystem dunkel gestellt hat, bekommt die warme
   Farbwelt. Die Wahl haengt am Geraet, nicht an einer Einstellung
   in der Seite - deshalb braucht es kein Skript und keinen Schalter.
   ------------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  :root {
  --bg: #17161b; --surface: #232128; --ink: #eeecf2; --ink-soft: #a9a4b4; --ink-faint: #7d7889;
  --line: #2f2c37; --line-strong: #45414f;
  --brand: #a98bf0; --brand-ink: #c3aef7; --brand-soft: #2a2440;
  --btn-bg: #7c56d6; --btn-bg-hover: #6a45c4; --btn-ink: #ffffff;
  --badge-ink: #c3aef7; --nav-ink: #c3aef7;
  --head-bg: rgba(23,22,27,.92); --foot-bg: #101014; --foot-ink: #a8a3b3; --foot-head: #ffffff; --foot-link: #cbc6d6;
  }
}

/* ------------------------------------------------------------------
   Die beiden Projektkarten tragen die Farbe ihrer Anwendung:
   Hello ist gruen (Smaragd), Salve ist warm (Terrakotta).
   So sind sie auf einen Blick auseinanderzuhalten.
   ------------------------------------------------------------------ */
/* Die beiden Projektkarten tragen die Markenfarbe. Unterschieden werden
   sie nur noch ueber ihre Etiketten, nicht mehr ueber eigene Farben. */
.project-hello, .project-salve { border-top: 3px solid var(--brand); }
.project-hello .tag, .project-salve .tag {
  background: var(--brand-soft); border-color: var(--line-strong); color: var(--badge-ink);
}

/* ------------------------------------------------------------------
   Eine feine pinke Kante ueber dem Fussbereich. Sie fuehrt die
   Markenfarbe bis unten durch, damit der dunkle Block nicht
   unvermittelt anfaengt.
   ------------------------------------------------------------------ */
.site-foot { border-top: 3px solid var(--brand); }

/* ------------------------------------------------------------------
   Kontaktformular. Bewusst schlicht: keine Fremdbibliothek, kein
   Skript eines Drittanbieters, keine Weitergabe der Eingaben.
   ------------------------------------------------------------------ */
.formular { display: grid; gap: 16px; }
.feld { display: grid; gap: 6px; }
.feld label { font-size: .9rem; font-weight: 600; color: var(--ink); }
.feld input, .feld select, .feld textarea {
  font: inherit; color: var(--ink); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  padding: 11px 13px; width: 100%;
}
.feld textarea { resize: vertical; min-height: 120px; }
.feld input:focus, .feld select:focus, .feld textarea:focus {
  outline: none; border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-soft);
}
.feld input:user-invalid, .feld textarea:user-invalid, .feld select:user-invalid { border-color: #b03030; }
.feld label .pflicht { color: var(--brand); font-weight: 700; }
.feld-kasten { display: flex; gap: 10px; align-items: flex-start; }
.feld-kasten input[type="checkbox"] { width: auto; margin-top: 3px; flex: none; accent-color: var(--brand); }
.feld-kasten label { font-weight: 400; font-size: .9rem; color: var(--ink-soft); line-height: 1.5; }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.formular-hinweis { font-size: .84rem; color: var(--ink-soft); margin: 2px 0 0; }
.formular-status { margin: 6px 0 0; font-size: .94rem; min-height: 1.4em; }
.formular-status.gut { color: #1a6142; font-weight: 600; }
.formular-status.schlecht { color: #b03030; font-weight: 600; }
.btn[disabled] { opacity: .6; cursor: progress; }

/* Fester Umbruch in der Hauptüberschrift: auf breiten Bildschirmen trennt er
   die beiden Sätze, auf schmalen Geräten wird er ausgeblendet und der Text
   laeuft natuerlich um. */
@media (max-width: 760px) {
  .umbruch-breit { display: none; }
}
h1 { text-wrap: pretty; }

/* ------------------------------------------------------------------
   Kopfbereich mittig. Bewusst auf jeder Bildschirmgroesse, damit die
   Aussage im Zentrum steht und nicht am linken Rand haengt.
   Die Bloecke bleiben in der Breite begrenzt, damit die Zeilen nicht
   ueber die ganze Flaeche laufen.
   ------------------------------------------------------------------ */
.hero { text-align: center; }
.hero .eyebrow { display: inline-block; }
.hero h1 { margin-left: auto; margin-right: auto; }
.hero .lead { margin-left: auto; margin-right: auto; }
.hero .actions { justify-content: center; }

/* ------------------------------------------------------------------
   Seitentitel und Abschnitts-Ueberschriften mittig - einheitlich mit
   dem Kopfbereich der Startseite. Die Rechtstexte (.prose) bleiben
   bewusst linksbuendig: zentrierter Fliesstext ueber mehrere Absaetze
   ist nicht lesbar.
   ------------------------------------------------------------------ */
.page-head { text-align: center; margin-left: auto; margin-right: auto; }
.page-head .lead { margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-left: auto; margin-right: auto; }

/* Einleitungstext unter den Seitentiteln: das ist ein normales <p>, nicht .lead */
.page-head p { text-align: center; margin-left: auto; margin-right: auto; max-width: 62ch; }

/* Rechtstexte vollstaendig mittig - auf ausdruecklichen Wunsch, inklusive
   Fliesstext. Aufzaehlungspunkte wandern mit dem Text (list-style-position:
   inside), sonst haengen die Punkte am linken Rand waehrend der Text mittig
   steht. */
.prose { text-align: center; margin-left: auto; margin-right: auto; }
.prose h2, .prose h3 { text-align: center; }
.prose h2:first-child { margin-bottom: 18px; }
.prose p, .prose address { text-align: center; }
.prose address { margin-left: auto; margin-right: auto; }
/* Listen: der Block steht mittig, die Eintraege bleiben linksbuendig mit
   Punkt daneben. Voll zentrierte Eintraege setzen den Punkt ueber den Text -
   das sieht aus wie ein Fehler und ist nicht lesbar. */
.prose ul, .prose ol {
  display: inline-block; text-align: left; list-style-position: outside;
  padding-left: 1.35em; margin-left: auto; margin-right: auto;
}
.prose li { text-align: left; }