/* ==========================================================================
   Grams IT — Unternehmenswebseite
   Designsystem: helle Fassung des Ordivis Corporate Design.
   Farben, Radien, Abstaende und Schrift stammen unveraendert aus
   dem Ordivis Brand Sheet bzw. aus ordivis.eu/css/style.css.
   Neu ist nur die Grundflaeche: hell statt dunkel — weil die
   Herstellerseite wie ein Geschaeftsdokument gelesen werden soll und
   sich dadurch sichtbar von der Produktseite trennt.
   ========================================================================== */

:root {
  /* --- Markenfarben. Unveraendert aus dem Brand Sheet, nur diese fuenf. --- */
  --clr-navy:        #16233F;
  --clr-teal:        #17B8B0;   /* Flaechen, Icons */
  --clr-teal-deep:   #0F9E96;   /* farbiger Text auf hellem Grund */
  --clr-teal-bright: #34C8BE;   /* auf dunklem Grund */
  --clr-light:       #EAF1F8;

  /* --- Helle Fassung. Abgeleitete Werte, ebenfalls aus dem Brand Sheet. --- */
  --bg:          #F5F7FA;
  --bg-alt:      #EDF1F7;
  --surface:     #FFFFFF;
  --surface-2:   #F8FAFC;
  --line:        #E3E8EF;
  --line-strong: #CBD5E3;
  /* Rahmen von Bedienelementen brauchen 3:1 gegen ihre Umgebung
     (WCAG 1.4.11) - #CBD5E3 schafft gegen Weiss nur rund 1,5:1. */
  --field-line:  #7C8AA3;
  --ink:         #16233F;   /* Ueberschriften */
  --body:        #2C3A54;   /* Fliesstext */
  /* Gemessen, nicht geschaetzt: #6B7A93 aus dem Brand Sheet erreicht auf
     #EDF1F7 nur 3,84:1 und faellt damit unter WCAG AA. #616E85 haelt denselben
     Blauton und schafft auf allen vier hellen Flaechen mindestens 4,5:1. */
  --muted:       #616E85;
  /* Ebenso der Textakzent: das Brand Sheet nennt #0F9E96 fuer farbige
     Textteile auf hellem Grund - der Wert erreicht auf Weiss aber nur 3,31:1
     und genuegt damit nur fuer grosse Schrift. #0B7A74 ist dieselbe Farbe,
     so weit abgedunkelt, dass sie auch bei 14 px besteht (4,57-5,18:1). */
  --accent:      #0B7A74;   /* Textakzent, Verweise, Eyebrow */
  --accent-fill: #17B8B0;   /* Flaechenakzent */
  --on-accent:   #16233F;   /* Schrift auf Teal — nie Weiss, siehe Kontrastregel */
  --focus:       #0F9E96;
  --shadow:      0 1px 2px rgba(22,35,63,.05), 0 12px 32px rgba(22,35,63,.07);
  --shadow-sm:   0 1px 2px rgba(22,35,63,.06);

  /* --- Das dunkle Band. Bleibt in beiden Erscheinungsbildern dunkel:
         es zitiert die Produktwelt und muss dort dunkel sein. --- */
  --band:        #16233F;
  --band-2:      #1E2E4E;
  --band-line:   #2A3B5E;
  --band-text:   #EAF1F8;
  --band-muted:  #A9B7D0;
  --band-accent: #34C8BE;

  /* --- Schrift --- */
  /* Derselbe Stapel wie ordivis.eu/css/style.css. Bewusst keine Webschrift:
     jede Fremdschrift ist eine Fremdanfrage, und Inter kommt auf der
     Produktseite ohnehin nicht vor - die CI verlangt sie also gar nicht. */
  --font-sans: "Segoe UI", system-ui, -apple-system, Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;

  /* --- Raster. Werte aus ordivis.eu. --- */
  --maxw: 1180px;
  --radius: 14px;
  --radius-sm: 8px;
  --trans: .2s ease;
}

/* EINFARBIG HELL - bewusst kein dunkles Erscheinungsbild.
   Die Wortmarke des Firmenlogos ist nahezu schwarz und hat keine
   Negativ-Fassung; auf dunklem Grund verschwindet sie. Solange es keine
   helle Logo-Variante gibt, bleibt die Seite hell. Alle Farben stehen
   deshalb ausdruecklich als Token - die Seite haelt auf jedem Untergrund.
   Sobald eine Negativ-Fassung vorliegt, kommen hier die Ordivis-Gruende
   (#0B1424 / #101B30 / #16233F) als zweites Erscheinungsbild dazu. */

/* --- Grundlagen ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--body);
  font-family: var(--font-sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  /* Lange Komposita wie "Umsatzsteuer-Identifikationsnummer" schieben die
     Seite sonst seitlich auf. */
  overflow-wrap: break-word;
}

img, svg { max-width: 100%; }
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
  letter-spacing: -.015em;
  text-wrap: balance;
}
h1 { font-size: clamp(2.05rem, 4.2vw, 3.05rem); }
h2 { font-size: clamp(1.5rem, 2.6vw, 2.05rem); }
h3 { font-size: 1.13rem; letter-spacing: -.005em; }
p  { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--accent); text-decoration: none; transition: color var(--trans); }
a:hover { text-decoration: underline; text-underline-offset: 3px; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}

/* --- Sprung zum Inhalt (WCAG 2.4.1) --------------------------------------
   Liegt als erstes Element im Dokument und wird erst bei Tastaturfokus
   sichtbar. Wer mit der Tastatur oder einem Screenreader kommt, ueberspringt
   damit Kopfzeile und Navigation, statt sie auf jeder Seite durchzugehen. */
.skip-link {
  /* z-index hoeher als die klebende Kopfzeile (die hat 100). Bei
     Gleichstand gewinnt das spaetere Element im Dokument - und das ist
     die Kopfzeile. Der Sprunglink lag dann beim Fokus hinter dem Logo:
     vorhanden, aber unsichtbar, also wirkungslos. */
  position: absolute; left: 12px; top: -60px; z-index: 200;
  padding: 10px 18px; border-radius: var(--r-sm);
  background: var(--clr-navy); color: var(--clr-light);
  font-weight: 600; text-decoration: none;
  transition: top var(--trans);
}
.skip-link:focus { top: 12px; text-decoration: none; }

/* Nur fuer Screenreader — sichtbar nicht vorhanden, im Baum aber schon. */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* --- Raster -------------------------------------------------------------- */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.section { padding: 84px 0; }
.section--tight { padding: 56px 0; }
.section--alt { background: var(--bg-alt); }

.eyebrow {
  display: block;
  margin: 0 0 14px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--accent);
}

/* Der kurze Balken vor Zwischenueberschriften — uebernommen aus
   .modul-signatur von ordivis.eu, damit die Verwandtschaft im Detail sitzt. */
.rule::before {
  content: ""; display: block;
  width: 34px; height: 2px; border-radius: 2px;
  background: linear-gradient(100deg, var(--clr-teal), var(--clr-teal-bright));
  margin-bottom: 20px;
}

.lead { font-size: 1.16rem; color: var(--muted); max-width: 62ch; }
.section-head { max-width: 62ch; margin-bottom: 44px; }

/* --- Schaltflaechen ------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: inherit; font-weight: 600; font-size: .97rem;
  padding: 12px 24px; border: 1px solid transparent; border-radius: var(--radius-sm);
  cursor: pointer; white-space: nowrap;
  transition: background var(--trans), border-color var(--trans), color var(--trans);
}
.btn:hover { text-decoration: none; }
/* Auf Teal steht Navy, nicht Weiss: Weiss auf #17B8B0 erreicht nur rund
   2,3:1 und faellt unter WCAG AA durch. Regel aus dem Ordivis-CSS. */
.btn--primary { background: var(--accent-fill); color: var(--on-accent); }
.btn--primary:hover { background: var(--clr-teal-deep); color: var(--on-accent); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--field-line); }
.btn--ghost:hover { background: var(--surface); border-color: var(--muted); }
.btn--onband { background: var(--band-accent); color: var(--clr-navy); }
.btn--onband:hover { background: var(--clr-teal); color: var(--clr-navy); }

/* --- Kopfzeile ----------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 88px; }
.brand { display: inline-flex; align-items: center; }
.brand:hover { text-decoration: none; }
/* 62 px: der Schriftzug "GRAMS IT" nimmt nur rund ein Fuenftel der
   Bildhoehe ein - unter dieser Groesse ist er nicht mehr zu lesen.
   Deshalb ist die Kopfzeile hoeher als bei ordivis.eu. */
.brand-logo { height: 62px; width: auto; display: block; }
.nav-links {
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.nav-links a {
  display: block; padding: 8px 13px; border-radius: var(--radius-sm);
  color: var(--body); font-size: .95rem; font-weight: 500;
}
.nav-links a:hover { color: var(--ink); background: var(--surface); text-decoration: none; }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle {
  display: none; background: none; border: 1px solid var(--field-line);
  border-radius: var(--radius-sm); color: var(--ink); cursor: pointer; padding: 7px;
}
.nav-toggle svg { width: 22px; height: 22px; display: block; }

/* --- Kopfbereich --------------------------------------------------------- */
.hero {
  padding: 76px 0 68px;
  /* Sehr zurueckhaltend: auf hellem Grund reicht ein Hauch Teal.
     Die kraeftigen Radialverlaeufe von ordivis.eu gehoeren zur Produktseite. */
  background:
    radial-gradient(900px 420px at 88% -20%, rgba(23,184,176,.10), transparent 62%),
    var(--bg);
}
.hero-grid {
  display: grid; grid-template-columns: 1.05fr .95fr;
  gap: 56px; align-items: center;
}
.hero-grid > * { min-width: 0; }
.hero h1 { margin-bottom: .38em; }
.hero h1 em { font-style: normal; color: var(--accent); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

/* --- Steckbrief: das tragende Element der Seite --------------------------
   Ein Datenblatt, kein Bild. Die Zielgruppe prueft Angaben; ein Stockfoto
   beantwortet keine ihrer Fragen. */
.dossier {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.dossier-head {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 15px 22px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--line);
}
.dossier-head strong {
  font-size: .78rem; font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink);
}
.dossier-head span { font-size: .76rem; color: var(--muted); font-family: var(--font-mono); }
.dossier dl { margin: 0; padding: 6px 22px 16px; }
.dossier .row {
  display: grid; grid-template-columns: 8.6rem 1fr; gap: 16px;
  padding: 11px 0; border-bottom: 1px solid var(--line);
}
.dossier .row:last-child { border-bottom: 0; }
.dossier dt { color: var(--muted); font-size: .86rem; }
.dossier dd {
  margin: 0; color: var(--ink); font-size: .88rem; font-weight: 500;
  font-family: var(--font-mono); font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.dossier dd .todo { color: var(--muted); font-style: italic; font-family: var(--font-sans); }

/* --- Kennzahlenzeile ----------------------------------------------------- */
.facts {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  margin-top: 64px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.fact { background: var(--bg); padding: 22px 24px; }
.fact b {
  display: block; color: var(--ink);
  font-size: 1.42rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.fact span { display: block; margin-top: 3px; color: var(--muted); font-size: .85rem; }

/* --- Karten -------------------------------------------------------------- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px;
  transition: border-color var(--trans), box-shadow var(--trans);
}
.card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.card .ico {
  width: 42px; height: 42px; border-radius: 11px;
  display: grid; place-items: center; margin-bottom: 16px;
  background: rgba(23,184,176,.12); color: var(--accent);
}
.card .ico svg { width: 21px; height: 21px; display: block; }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--muted); font-size: .95rem; }

/* --- Das dunkle Band: die Produktwelt als Karte in der Herstellerwelt ----- */
.band {
  background:
    radial-gradient(760px 340px at 82% -10%, rgba(23,184,176,.20), transparent 60%),
    var(--band);
  border: 1px solid var(--band-line);
  border-radius: var(--radius);
  padding: 46px 44px;
  color: var(--band-text);
}
.band h2, .band h3 { color: #fff; }
.band p { color: var(--band-muted); }
.band .eyebrow { color: var(--band-accent); }
/* :not(.btn) ist noetig: sonst gewinnt ".band a" (Spezifitaet 0-1-1) gegen
   ".btn--onband" (0-1-0) und faerbt die Schrift der Schaltflaeche im selben
   Teal wie deren Flaeche - die Beschriftung verschwindet dann vollstaendig. */
.band a:not(.btn) { color: var(--band-accent); }
.band-grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: 46px; align-items: center; }
.band-grid > * { min-width: 0; }
.band-logo { height: 38px; width: auto; display: block; margin-bottom: 22px; }
.band-claim {
  font-size: 1.02rem; font-weight: 700; color: #fff;
  letter-spacing: .01em; margin-bottom: .6em;
}
.band-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--band-line);
  border: 1px solid var(--band-line); border-radius: var(--radius-sm); overflow: hidden; }
.band-stat { background: var(--band); padding: 17px 18px; }
.band-stat b { display: block; color: #fff; font-size: 1.24rem; font-weight: 700; letter-spacing: -.02em; }
.band-stat span { display: block; margin-top: 2px; color: var(--band-muted); font-size: .81rem; }
.band .btn { margin-top: 26px; }

/* --- Einwand und Antwort ------------------------------------------------- */
.qa { display: grid; gap: 0; border-top: 1px solid var(--line); }
.qa-item {
  display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: 40px; padding: 30px 0; border-bottom: 1px solid var(--line);
  align-items: start;
}
.qa-q {
  margin: 0; color: var(--ink);
  font-size: 1.19rem; font-weight: 600; line-height: 1.35;
  letter-spacing: -.01em; text-wrap: balance;
}
.qa-a { margin: 0; color: var(--muted); font-size: .97rem; }
.qa-a strong { color: var(--body); font-weight: 600; }
.qa-note {
  margin-top: 34px; padding-left: 18px;
  border-left: 2px solid var(--accent-fill);
  color: var(--ink); font-size: 1.02rem; font-weight: 500;
}

/* --- Definitionsliste Beschaffung ---------------------------------------- */
.specs {
  margin: 0; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 8px 26px;
}
.specs .row {
  display: grid; grid-template-columns: 15rem 1fr; gap: 22px;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.specs .row:last-child { border-bottom: 0; }
.specs dt { color: var(--ink); font-weight: 600; font-size: .95rem; }
.specs dd { margin: 0; color: var(--muted); font-size: .95rem; }
.specs dd code {
  font-family: var(--font-mono); font-size: .88em;
  background: var(--bg-alt); padding: 1px 6px; border-radius: 5px; color: var(--ink);
}

/* --- Hinweisblock -------------------------------------------------------- */
.note {
  margin-top: 26px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--accent-fill);
  border-radius: var(--radius-sm);
  color: var(--muted); font-size: .92rem;
}
.note strong { color: var(--ink); }

/* --- Kontakt ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 46px; align-items: start; }
.contact-grid > * { min-width: 0; }

.routes { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.routes li { background: var(--surface); padding: 18px 22px; }
.routes b { display: block; color: var(--ink); font-size: .95rem; }
.routes a { font-family: var(--font-mono); font-size: .88rem; }
.routes span { display: block; color: var(--muted); font-size: .86rem; margin-top: 2px; }

.form { display: grid; gap: 16px; }
.field { display: grid; gap: 6px; }
.field label { font-size: .88rem; font-weight: 600; color: var(--ink); }
.field input, .field textarea {
  font: inherit; font-size: .95rem;
  padding: 11px 14px; color: var(--body);
  background: var(--surface); border: 1px solid var(--field-line);
  border-radius: var(--radius-sm);
  transition: border-color var(--trans);
}
.field input:focus, .field textarea:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px rgba(23,184,176,.16); }
.field textarea { resize: vertical; min-height: 130px; }
.field-hint { font-size: .82rem; color: var(--muted); }
.field-note { font-size: .82rem; color: var(--muted); margin-bottom: .6rem; }
/* Das Sternchen ist rein visuell - fuer Screenreader steht die Pflicht
   bereits im required-Attribut des Feldes. */
.req { color: var(--accent); font-weight: 700; }

/* Honigtopf gegen Spam — kein Drittdienst, kein CAPTCHA, keine Datenweitergabe. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --- Rechtstext (Impressum, Datenschutz) --------------------------------- */
.legal { max-width: 74ch; }
.legal h2 { margin-top: 2.2em; font-size: 1.32rem; }
.legal h2:first-of-type { margin-top: 0; }
.legal address { font-style: normal; font-family: var(--font-mono); font-size: .92rem; color: var(--ink); line-height: 1.9; }
.legal p { color: var(--muted); font-size: .96rem; }
.legal .legal-meta { color: var(--muted); font-size: .86rem; margin-top: 3em; padding-top: 1.4em; border-top: 1px solid var(--line); }

/* --- Fusszeile ----------------------------------------------------------- */
/* Helle Fusszeile. Eine Navy-Fusszeile waere gestalterisch der staerkere
   Abschluss - das Firmenlogo verschwindet darauf aber fast vollstaendig.
   Der kraeftige Oberstrich uebernimmt das Abschliessen. */
.site-footer {
  background: var(--surface); color: var(--muted);
  border-top: 3px solid var(--clr-navy);
  padding: 58px 0 28px;
}
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 44px; }
.footer-brand .brand-logo { height: 66px; margin-bottom: 16px; margin-left: -4px; }
.footer-brand p { font-size: .92rem; max-width: 40ch; }
/* h3, nicht h4: sonst springt die Ueberschriftenebene auf Seiten mit
   reinem h2-Fliesstext (Impressum) von 2 auf 4. */
.site-footer h3 {
  color: var(--ink); font-size: .78rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.site-footer a { color: var(--muted); font-size: .92rem; }
.site-footer a:hover { color: var(--accent); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 8px 26px; justify-content: space-between;
  margin-top: 46px; padding-top: 22px;
  border-top: 1px solid var(--line);
  font-size: .84rem;
}

/* --- Schmale Bildschirme ------------------------------------------------- */
@media (max-width: 980px) {
  .hero-grid, .band-grid, .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .grid-3, .grid-2 { grid-template-columns: 1fr 1fr; }
  .facts { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 34px; }
  .qa-item { grid-template-columns: 1fr; gap: 12px; }
  .nav-toggle { display: block; }
  .nav-links {
    display: none; position: absolute; top: 88px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 2px; padding: 12px 18px 18px;
    background: var(--bg); border-bottom: 1px solid var(--line);
  }
  .nav-links.open { display: flex; }
  .nav-cta .btn { display: none; }
}
@media (max-width: 620px) {
  body { font-size: 16px; }
  .section { padding: 62px 0; }
  .grid-3, .grid-2, .facts { grid-template-columns: 1fr; }
  .band { padding: 32px 24px; }
  .dossier .row, .specs .row { grid-template-columns: 1fr; gap: 3px; }
  .footer-grid { grid-template-columns: 1fr; }
}