/* TcZ IT Service — Stylesheet.
 *
 * Bewusst NUR dunkel, kein Hellmodus. Grund: Das Logo ist Bernstein auf transparentem
 * Grund. Auf Weiss muesste das Gelb fuer lesbaren Kontrast so weit abgedunkelt werden,
 * dass es braun wirkt - und braun war ausdruecklich nicht gewollt. Auf dunklem Grund
 * traegt dieselbe Farbe ohne Abstriche, und die Seite bekommt eine klare Handschrift
 * statt zweier halbguter.
 *
 * Farbe: Bernstein als einziger Traeger, fuer Verlaeufe nach Orange aufgefaechert.
 * Kein zweiter Akzent - er wuerde mit dem Logo konkurrieren.
 */
:root {
  color-scheme: dark;
  --tinte:      #0a0c11;
  --tinte-tief: #06080c;
  --glas:       rgba(255, 255, 255, .030);
  --glas-hell:  rgba(255, 255, 255, .055);
  --linie:      rgba(255, 255, 255, .085);
  --linie-hell: rgba(255, 255, 255, .16);
  --text:       #f2f4f7;
  --gedaempft:  #8e97a7;
  --leise:      #6b7484;
  --gelb:       #ffc300;
  --gelb-tief:  #ff9500;
  --gelb-weich: rgba(255, 195, 0, .14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--tinte); color: var(--text);
  font: 16px/1.7 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
.huelle { max-width: 58rem; margin: 0 auto; padding: 0 1.6rem; }

/* --- Kopf ---------------------------------------------------------------------------
 * Drei Ebenen: Punktraster (Anklang an das Drahtgitter im Signet), ein warmer Schein
 * hinter dem Logo, darueber ein Verlauf, der beides nach unten auslaufen laesst.
 */
header { position: relative; overflow: hidden; }
header::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(38rem 22rem at 12% -10%, rgba(255,195,0,.10), transparent 65%),
    radial-gradient(rgba(255,195,0,.10) 1px, transparent 1px);
  background-size: auto, 28px 28px;
  background-position: 0 0, -14px -14px;
}
header::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, transparent 35%, var(--tinte) 100%);
}
header .huelle { position: relative; z-index: 1; padding: 5rem 1.6rem 4rem; }

.logo { display: block; height: 54px; width: auto; margin: 0 0 2.75rem;
        filter: drop-shadow(0 0 22px rgba(255,195,0,.20)); }

h1 {
  font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.1; margin: 0 0 1.2rem;
  font-weight: 620; letter-spacing: -.025em; max-width: 18ch;
}
/* Das betonte Wort traegt den Farbverlauf - kein flaches Gelb, kein Braun. */
h1 .betont {
  background: linear-gradient(96deg, var(--gelb) 12%, var(--gelb-tief) 88%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.vorspann { font-size: 1.14rem; color: var(--gedaempft); margin: 0; max-width: 38rem; }

/* --- Abschnitte --------------------------------------------------------------------- */
main .huelle { padding-top: 1rem; padding-bottom: 4.5rem; }
section + section { margin-top: 4rem; }
h2 {
  font-size: .72rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: var(--leise); margin: 0 0 1.5rem; display: flex; align-items: center; gap: 1rem;
}
h2::before { content: ""; width: 1.6rem; height: 2px; background: var(--gelb); border-radius: 2px; }
h2::after  { content: ""; flex: 1; height: 1px;
             background: linear-gradient(to right, var(--linie), transparent); }

/* --- Leistungen ---------------------------------------------------------------------
 * Glaskarten: kaum sichtbarer Rahmen, die Ziffer als grosse, sehr leise Hausnummer.
 * Beim Ueberfahren wandert ein Bernsteinstrich ueber die Oberkante.
 */
.felder { display: grid; gap: .9rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 54rem) { .felder { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 27rem) { .felder { grid-template-columns: 1fr; } }

.feld {
  position: relative; overflow: hidden;
  background: var(--glas); border: 1px solid var(--linie); border-radius: 14px;
  padding: 1.5rem 1.25rem 1.35rem;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.feld::before {                       /* Bernsteinstrich an der Oberkante */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, var(--gelb), var(--gelb-tief));
  transform: scaleX(0); transform-origin: left; transition: transform .28s ease;
}
.feld:hover { background: var(--glas-hell); border-color: var(--linie-hell); transform: translateY(-3px); }
.feld:hover::before { transform: scaleX(1); }
.feld .nr {
  position: absolute; top: .35rem; right: .85rem;
  font-size: 2.6rem; font-weight: 700; line-height: 1;
  color: var(--text); opacity: .045; letter-spacing: -.03em;
}
.feld h3 { margin: 0 0 .5rem; font-size: 1.02rem; font-weight: 600; letter-spacing: -.01em; }
.feld p  { margin: 0; font-size: .9rem; color: var(--gedaempft); line-height: 1.62; }

/* --- Kontakt ------------------------------------------------------------------------ */
.kontaktkarte {
  position: relative; background: var(--glas); border: 1px solid var(--linie);
  border-radius: 14px; padding: 1.9rem 1.75rem; overflow: hidden;
}
.kontaktkarte::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: linear-gradient(180deg, var(--gelb), var(--gelb-tief));
}
dl.paare { display: grid; grid-template-columns: 7.5rem 1fr; gap: .7rem 1.5rem; margin: 0; font-size: .98rem; }
dl.paare dt { color: var(--leise); }
dl.paare dd { margin: 0; }

a { color: var(--gelb); text-decoration: none; }
a:hover { color: var(--gelb-tief); text-decoration: underline; text-underline-offset: .22em; }

/* --- Fuss --------------------------------------------------------------------------- */
footer { border-top: 1px solid var(--linie); background: var(--tinte-tief); }
footer .huelle {
  padding: 1.7rem 1.6rem; font-size: .85rem; color: var(--leise);
  display: flex; flex-wrap: wrap; gap: .5rem 1.7rem; align-items: center;
}
footer a { color: var(--gedaempft); }
footer a:hover { color: var(--gelb); text-decoration: none; }

/* --- Rechtstexte -------------------------------------------------------------------- */
.rechtstext h2 { margin-top: 3rem; }
.rechtstext h2:first-of-type { margin-top: 0; }
.rechtstext p, .rechtstext li { color: var(--gedaempft); font-size: .95rem; max-width: 44rem; }
.rechtstext ul { padding-left: 1.15rem; }
.rechtstext li { margin-bottom: .3rem; }
.rechtstext dl.paare { margin-bottom: 1.4rem; }
.rechtstext strong { color: var(--text); font-weight: 600; }
.zurueck { margin-top: 3.5rem; font-size: .92rem; }

@media (max-width: 30rem) {
  dl.paare { grid-template-columns: 1fr; gap: .1rem 0; }
  dl.paare dd { margin-bottom: .7rem; }
  header .huelle { padding-top: 3.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .feld, .feld::before { transition: none; }
  .feld:hover { transform: none; }
}