/* =====================================================================
   www.steffen-stb.de – Stylesheet (neues Design)
   ---------------------------------------------------------------------
   Aufbau dieser Datei:
     1. Farben und Grundwerte (hier zentral ändern)
     2. Grundlagen
     3. Kopfbereich mit Logo und Menü
     4. Titelband
     5. Inhaltsbereich
     6. Karten (Leistungen, Kontakt)
     7. Fußzeile
     8. Anpassungen für Smartphones
   Nur reines CSS – keine externen Schriften, kein JavaScript.
   ===================================================================== */


/* ---------- 1. Farben und Grundwerte ---------- */
:root {
  --lila:        #5D2685;   /* Hauptfarbe aus dem Logo            */
  --lila-dunkel: #461c64;   /* etwas dunkler, für Hover            */
  --grau-hell:   #a8a9ad;   /* Hellgrau (bisheriger Inhaltsbereich) */
  --grau-dunkel: #6d6e70;   /* Dunkelgrau (bisheriger Hintergrund)  */
  --grau-flaeche:#f3f3f4;   /* sehr helles Grau für Seitenhintergrund */
  --weiss:       #ffffff;
  --text:        #3a3a3c;   /* Fließtext (gut lesbar)              */

  --breite:      1100px;    /* maximale Inhaltsbreite              */
  --radius:      14px;      /* Rundung von Bildern und Karten       */
  --schatten:    0 10px 30px rgba(93, 38, 133, 0.12);
}


/* ---------- 2. Grundlagen ---------- */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--text);
  background: var(--grau-flaeche);
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: var(--lila);
  text-underline-offset: 3px;
}
a:hover {
  color: var(--lila-dunkel);
}

h1, h2 {
  color: var(--lila);
  line-height: 1.25;
}

/* Unsichtbarer Link für Tastatur-Nutzer, erscheint bei Fokus */
.sprunglink {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 0.6em 1em;
  background: var(--lila);
  color: var(--weiss);
}
.sprunglink:focus {
  left: 1rem;
}


/* ---------- 3. Kopfbereich mit Logo und Menü ---------- */
.kopf {
  position: sticky;          /* bleibt beim Scrollen oben stehen */
  top: 0;
  z-index: 50;
  background: var(--weiss);
  border-bottom: 4px solid var(--lila);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.kopf-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0.6rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}

.logo img {
  width: 320px;
}

.navigation ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.25rem;
}

.navigation a {
  display: block;
  padding: 0.5em 0.8em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: var(--lila);
  transition: background-color 0.2s, color 0.2s;
}

.navigation a:hover,
.navigation a:focus-visible {
  background: var(--grau-flaeche);
}

/* aktuelle Seite: lila hinterlegt */
.navigation a[aria-current="page"] {
  background: var(--lila);
  color: var(--weiss);
}

/* Menü-Schalter: nur auf Smartphones sichtbar (siehe Abschnitt 8) */
.menue-schalter,
.menue-knopf {
  display: none;
}


/* ---------- 4. Titelband ---------- */
.titelband {
  background: linear-gradient(120deg, var(--lila) 0%, var(--lila-dunkel) 100%);
  color: var(--weiss);
  padding: 3rem 0 6rem;   /* unten Platz, damit der Inhalt überlappen kann */
}

.titelband-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 0 1.25rem;
}

.titelband-zeile {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--grau-hell);
}

.titelband h1 {
  margin: 0;
  color: var(--weiss);
  font-size: clamp(1.8rem, 4vw, 2.8rem);
}


/* ---------- 5. Inhaltsbereich ---------- */
/* Standard: Textkarte links, Bild rechts – beide ragen ins Titelband */
.inhalt {
  max-width: var(--breite);
  margin: -4rem auto 4rem;
  padding: 0 1.25rem;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 2rem;
  align-items: start;
}

.inhalt-bild {
  order: 2;
  margin: 0;
  position: sticky;
  top: 7rem;
}

.inhalt-bild img {
  width: 100%;
  border-radius: var(--radius);
  border: 6px solid var(--weiss);
  box-shadow: var(--schatten);
}

.inhalt-text {
  order: 1;
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 2.5rem;
  border-top: 6px solid var(--grau-hell);
}

.inhalt-text > :first-child {
  margin-top: 0;
}

.inhalt-text h2 {
  font-size: 1.2rem;
  margin: 2rem 0 0.6rem;
}

.inhalt-text ul {
  padding-left: 1.2em;
}

.inhalt-text li {
  margin-bottom: 0.35em;
}
.inhalt-text li::marker {
  color: var(--lila);
}

.zusatz {
  display: block;
  font-size: 0.88em;
  color: var(--grau-dunkel);
}

address {
  font-style: normal;
}

/* Zitat auf der Startseite */
.zitat {
  margin: 2.5rem 0 0;
  padding: 1.5rem 1.75rem;
  background: var(--grau-flaeche);
  border-left: 5px solid var(--lila);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.zitat blockquote {
  margin: 0;
}
.zitat blockquote p {
  margin: 0;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--lila);
}
.zitat figcaption {
  margin-top: 0.5rem;
  font-size: 0.9rem;
  color: var(--grau-dunkel);
}

/* Porträt auf "Über mich": rund */
.inhalt-bild img.portrait {
  border-radius: 50%;
}

/* Variante "breit" (Leistungen): Karten statt einer Textkarte */
.inhalt.breit .inhalt-text {
  background: none;
  box-shadow: none;
  border: 0;
  padding: 0;
}


/* ---------- 6. Karten ---------- */
.karten {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.karte {
  background: var(--weiss);
  border-radius: var(--radius);
  box-shadow: var(--schatten);
  padding: 1.75rem 2rem;
  border-top: 6px solid var(--lila);
}

.karte h2 {
  margin-top: 0;
}

/* Kontaktkarte innerhalb der Textkarte: dezenter */
.inhalt-text .karte {
  box-shadow: none;
  background: var(--grau-flaeche);
}

/* Leistungs-Karten bleiben weiß mit Schatten */
.inhalt.breit .karte {
  background: var(--weiss);
  box-shadow: var(--schatten);
}


/* ---------- 7. Fußzeile ---------- */
.fuss {
  background: var(--grau-dunkel);
  color: var(--weiss);
  font-size: 0.95rem;
}

.fuss-innen {
  max-width: var(--breite);
  margin: 0 auto;
  padding: 2.5rem 1.25rem 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.fuss p {
  margin: 0;
}

.fuss-titel {
  font-weight: 700;
  font-size: 1.05rem;
}

.fuss a {
  color: var(--weiss);
}

.fuss-copyright {
  text-align: center;
  padding: 1rem;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  font-size: 0.8rem;
}


/* ---------- 8. Anpassungen für Tablets und Smartphones ---------- */

/* Tablets: Menü unter das Logo */
@media (max-width: 1000px) {
  .kopf-innen {
    flex-wrap: wrap;
    justify-content: center;
  }
  .navigation ul {
    flex-wrap: wrap;
    justify-content: center;
  }
}

/* Tablets hochkant: Bild über den Text */
@media (max-width: 820px) {
  .inhalt {
    grid-template-columns: 1fr;
  }
  .inhalt-bild {
    order: 1;
    position: static;
    max-width: 320px;
    margin: 0 auto;
  }
  .inhalt-text {
    order: 2;
  }
  .fuss-innen {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
}

/* Smartphones: aufklappbares Menü */
@media (max-width: 640px) {
  body {
    font-size: 1rem;
  }

  .kopf-innen {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .logo img {
    width: 200px;
  }

  /* Hamburger-Knopf (drei Striche) */
  .menue-knopf {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 44px;
    height: 44px;
    padding: 10px;
    border-radius: 10px;
    background: var(--lila);
    cursor: pointer;
  }
  .menue-knopf span {
    display: block;
    height: 3px;
    background: var(--weiss);
    border-radius: 2px;
  }

  /* Menü zunächst versteckt, klappt unter dem Kopf auf */
  .navigation {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: var(--weiss);
    border-bottom: 4px solid var(--lila);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
  }
  .menue-schalter:checked ~ .navigation {
    display: block;
  }
  .navigation ul {
    flex-direction: column;
    padding: 0.5rem 1rem 1rem;
  }
  .navigation a {
    padding: 0.8em 1em;
    font-size: 1rem;
    border-radius: 10px;
  }

  .titelband {
    padding: 2rem 0 5rem;
  }

  .inhalt-text {
    padding: 1.5rem 1.25rem;
  }

  .karte {
    padding: 1.4rem 1.25rem;
  }
}