/* ============================================================
   Datei: stil.css
   Beschreibung: Aussehen der Startseite von IWS Elektro
   Autor: HopeApps | Umut Zerman
   ============================================================

   Eigene Datei, nicht die aus /verkauf/: Die Verkaufsseite darf sich
   aendern, ohne dass die Firmenseite mitwandert. Die Formensprache ist
   aber dieselbe -- gleiche Rundungen, gleiche Knopfgroessen --, damit
   der Sprung von hier zu den Angeboten nicht wie ein Sprung auf eine
   fremde Seite wirkt.

   Farben stehen als Variablen ganz oben. Wer das Aussehen anpassen will,
   kommt mit den ersten dreissig Zeilen aus.
   ============================================================ */

:root {
  --grund: #ffffff;
  --gedaempft: #f4f5f7;
  --karte: #ffffff;
  --rand: #e3e5e9;
  --text: #16181d;
  --text-still: #5f6570;
  --akzent: #1d4ed8;      /* Elektroblau, aus dem alten Logo uebernommen */
  --akzent-dunkel: #16389e;
  --akzent-text: #ffffff;
  --radius: 10px;
  --spalte: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund: #15171b;
    --gedaempft: #1c1f25;
    --karte: #1f232a;
    --rand: #333842;
    --text: #eceef2;
    --text-still: #a2a8b4;
    --akzent: #60a5fa;
    --akzent-dunkel: #93c5fd;
    --akzent-text: #15171b;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--text);
  font: 16px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.spalte {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 20px;
}

a { color: var(--akzent); }

h1 { font-size: 2.1rem; line-height: 1.15; margin: 0 0 14px; letter-spacing: -0.02em; }
h2 { font-size: 1.45rem; margin: 0 0 16px; letter-spacing: -0.01em; }
h3 { font-size: 1.02rem; margin: 0 0 6px; }

.klein { color: var(--text-still); font-size: 0.88rem; }
.abschnitt { padding: 48px 20px; }

/* ---------------- Kopf ---------------- */

.kopf {
  background: var(--karte);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 10;
}

.kopf-innen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
}

.marke { text-decoration: none; color: inherit; display: block; }

.marke-kurz {
  font-weight: 800;
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  color: var(--akzent);
}

.marke-lang {
  display: block;
  font-size: 0.78rem;
  color: var(--text-still);
}

/* Abstaende hier ueber Aussenabstaende statt ueber "gap": Die
   Eigenschaft wirkt in Flexboxen erst ab Chrome 84. Auf aelteren
   Geraeten -- und davon steht garantiert eins in einem Werkzeugkoffer --
   klebten die Menuepunkte sonst zu einem Wort zusammen und stiessen an
   den Anrufknopf. Der negative Rand am Behaelter gleicht die Abstaende
   der Kinder nach aussen wieder aus.
   (Bei Rastern unten ist "gap" in Ordnung -- das koennen Browser laenger.) */
.menue { display: flex; align-items: center; flex-wrap: wrap; margin: -5px -9px; }
.menue > * { margin: 5px 9px; }
.menue a { text-decoration: none; font-size: 0.94rem; color: var(--text); }
.menue a:hover { color: var(--akzent); }
.menue .knopf { color: var(--akzent-text); }

/* ---------------- Knoepfe ---------------- */

.knopfreihe { display: flex; flex-wrap: wrap; margin: 22px -6px 0; }
.knopfreihe > * { margin: 6px; }

.knopf, .knopf-klein {
  display: inline-block;
  background: var(--akzent);
  color: var(--akzent-text);
  text-decoration: none;
  font-weight: 600;
  border-radius: var(--radius);
  /* Grosszuegig: Die Seite wird ueberwiegend am Handy gelesen, und der
     Anrufknopf ist das Wichtigste darauf. */
  padding: 13px 20px;
  min-height: 46px;
  line-height: 20px;
}

.knopf-klein { padding: 9px 15px; min-height: 0; font-size: 0.88rem; }

.knopf-still {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--rand);
}

.knopf:hover { background: var(--akzent-dunkel); }

/* ---------------- Buehne ---------------- */

.buehne {
  /* Kein Foto: Die vorhandenen Bilder der alten Seite waren blaue
     Platzhalter. Ein ehrlicher Farbverlauf mit klarer Schrift wirkt
     besser als ein Platzhalter, der wie ein Ladefehler aussieht. */
  background:
    radial-gradient(1200px 400px at 15% -20%, rgba(29, 78, 216, 0.14), transparent 60%),
    var(--gedaempft);
  border-bottom: 1px solid var(--rand);
  padding: 64px 0 56px;
}

.vorspann { font-size: 1.1rem; max-width: 62ch; color: var(--text-still); margin: 0; }

/* ---------------- Leistungen ---------------- */


.gitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
}

.karte {
  background: var(--karte);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 20px;
}

.karte p { margin: 0; color: var(--text-still); font-size: 0.94rem; }

/* ---------------- Lagerverkauf ---------------- */

.streifen {
  background: var(--gedaempft);
  border-top: 1px solid var(--rand);
  border-bottom: 1px solid var(--rand);
  padding: 44px 0;
}

.streifen p { max-width: 62ch; }
.streifen .klein { margin-top: 12px; }

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

.kontaktgitter {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 28px;
}

.kontaktzeile { margin: 4px 0; }
.gross { font-size: 1.35rem; font-weight: 700; text-decoration: none; }
.gross:hover { text-decoration: underline; }

/* ---------------- Fuss ---------------- */

.fuss {
  border-top: 1px solid var(--rand);
  background: var(--karte);
  padding: 28px 0 36px;
  font-size: 0.94rem;
}

.fuss .kontakt { margin: 0 0 16px; }
.impressum summary { cursor: pointer; color: var(--text-still); }
.impressum p { color: var(--text-still); font-size: 0.9rem; }

/* Was noch fehlt, soll ins Auge springen -- sonst bleibt es stehen. */
.impressum mark {
  background: #fde68a;
  color: #1c1917;
  padding: 0 4px;
  border-radius: 3px;
}

@media (max-width: 560px) {
  h1 { font-size: 1.7rem; }
  .buehne { padding: 44px 0 40px; }
  .abschnitt { padding: 36px 20px; }
  .marke-lang { display: none; }
}