/* ==========================================================================
   STYLES – lowinski tech
   --------------------------------------------------------------------------
   Farben, Schrift und Grundmaße stehen in variables.css.
   Diese Datei ist nach den Abschnitten der Seite gegliedert (von oben
   nach unten), damit sich jede Regel schnell finden lässt.

   Inhalt
     1.  Grundlagen
     2.  Layout-Bausteine (Container, Abschnitte, Zeilen)
     3.  Typografie & Icons
     4.  Buttons
     5.  Header & Navigation
     6.  Hero (Einstieg)
     7.  Marktzahlen
     8.  So helfe ich (1-2-3)
     9.  KI-Abschnitt
     10. Angebot
     11. Erfahrung
     12. Branchen
     13. Über mich
     14. Stimmen
     15. Kontakt
     16. Footer
     17. Rechtliche Seiten (Impressum, Datenschutz)
     18. Animationen (Einblenden beim Scrollen, Hover)
   ========================================================================== */


/* 1. Grundlagen
   ========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-white);
  font-family: var(--font-base);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
}

a       { color: var(--color-navy); }
a:hover { color: var(--color-navy-dark); }

h1, h2, h3 {
  margin: 0;
  font-weight: 600;
  color: inherit;
}

p, ul, figure, blockquote { margin: 0; }

strong { font-weight: 600; }

li::marker { color: var(--color-orange); }

.list {
  padding-left: 20px;
  display: flex;
  flex-direction: column;
}

/* Fotos im Hochformat (4:5) */
.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-image);
}


/* 2. Layout-Bausteine
   ========================================================================== */

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding-left: var(--container-padding);
  padding-right: var(--container-padding);
  box-sizing: border-box;
}

.section {
  padding-top: var(--section-padding);
  padding-bottom: var(--section-padding);
}

.section--tint { background: var(--color-orange-tint); }

.section--navy {
  background: var(--color-navy);
  color: var(--color-on-navy);
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.stack {
  display: flex;
  flex-direction: column;
}

@media (max-width: 640px) {
  :root { --section-padding: 80px; }
}


/* 3. Typografie & Icons
   ========================================================================== */

.h2 {
  font-size: 34px;
  line-height: 1.15;
  letter-spacing: -.01em;
}

.section--navy .h2 { color: var(--color-white); }

.lead {
  font-size: 18px;
  color: var(--color-text-lead);
  max-width: 620px;
}

.muted                 { color: var(--color-text-muted); }
.section--navy .muted  { color: var(--color-on-navy-muted); }

/* Hervorgehobenes Wort, z. B. in der Hauptüberschrift */
.highlight { color: var(--color-orange-dark); }

.eyebrow { font-size: 16px; }

/* Orangener Kreis vor Überschriften */
.icon-dot::before {
  content: "";
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 4px solid var(--color-orange);
  background: var(--color-white);
  box-sizing: border-box;
  margin-right: 10px;
  vertical-align: -1px;
}

.section--navy .icon-dot::before { background: var(--color-navy); }

/* Kleine Zwischenüberschrift mit Text darunter (Problem, Arbeitsweise) */
.feature__title {
  font-size: 19px;
  margin-bottom: 6px;
}

@media (max-width: 640px) {
  .h2 { font-size: 28px; }
}


/* 4. Buttons
   ========================================================================== */

.btn,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  min-height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background-color .2s ease, transform .2s ease;
}

.btn {
  background: var(--color-orange);
  color: var(--color-text-on-orange);
  font-weight: 600;
}

.btn:hover {
  background: var(--color-orange-dark);
  color: var(--color-text-on-orange);
}

.btn--large {
  align-self: flex-start;
  min-height: 54px;
  font-size: 18px;
}

.btn-ghost,
.btn-ghost:hover {
  border: 1.5px solid var(--color-navy);
  color: var(--color-navy);
  font-weight: 500;
}

.btn:hover,
.btn-ghost:hover { transform: translateY(-1px); }

.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 4px;
}


/* 5. Header & Navigation
   ========================================================================== */

/* Header bleibt beim Scrollen oben stehen */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  backdrop-filter: saturate(1.4) blur(8px);
  border-bottom: 1px solid var(--color-border);
  transition: box-shadow .3s ease;
}

/* Schatten, sobald gescrollt wurde (wird per JavaScript gesetzt) */
.site-header.is-scrolled { box-shadow: 0 6px 24px -14px rgba(14, 23, 41, .35); }

.site-header__inner {
  padding-top: 16px;
  padding-bottom: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.site-header__logo {
  display: inline-flex;
  text-decoration: none;
}

.logo {
  display: block;
  width: auto;
  height: 44px;
}

.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 26px;
  font-size: 16px;
}

.main-nav a { text-decoration: none; }

.main-nav__cta,
.main-nav__cta:hover {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 20px;
  border-radius: var(--radius-pill);
  background: var(--color-nav-button);
  color: var(--color-white);
  font-weight: 600;
}


/* 6. Hero (Einstieg)
   ========================================================================== */

.hero {
  padding-top: 88px;
  padding-bottom: 104px;
  display: flex;
  flex-wrap: wrap;
  gap: 72px;
  align-items: center;
}

.hero__content {
  flex: 1 1 480px;
  min-width: 0;
  gap: 32px;
}

.hero__title {
  font-size: 46px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.hero__lead { font-size: 19px; }

.hero__photo {
  flex: 0 1 370px;
  min-width: 260px;
}

@media (max-width: 640px) {
  .hero__title { font-size: 34px; }
  .hero { padding-top: 56px; padding-bottom: 72px; gap: 48px; }
}


/* 7. Marktzahlen (dunkelblaue Leiste unter dem Einstieg)
   ========================================================================== */

.stats__inner {
  padding-top: 64px;
  padding-bottom: 64px;
  gap: 32px;
}

.stats__title { font-size: 16px; }

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

.stat { gap: 8px; }

.stat__value {
  font-size: 40px;
  font-weight: 600;
  color: var(--color-orange);
  line-height: 1.1;
}

.stat__label {
  font-size: 16px;
  line-height: 1.5;
}

.stat__source {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-on-navy-muted);
}

.stat__source a,
.stat__source a:hover { color: inherit; }


/* 8. So helfe ich (1-2-3)
   ========================================================================== */

.approach__inner { gap: 64px; }

.approach__top {
  gap: 36px 72px;
  align-items: center;
  justify-content: space-between;
}

.approach__intro {
  flex: 1 1 300px;
  max-width: 440px;
  gap: 18px;
}

.approach__diagram {
  flex: 1 1 480px;
  max-width: 540px;
}

.process-diagram {
  display: block;
  width: 100%;
  height: auto;
  font-family: var(--font-base);
}

.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 40px 64px;
  border-top: 1px solid var(--color-border);
  padding-top: 40px;
  font-size: 16px;
}

.step { gap: 10px; }

.step__number {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-orange);
  letter-spacing: .04em;
}

.step__title { font-size: 21px; }

.step__link {
  align-self: flex-start;
  font-weight: 500;
  text-decoration: none;
}


/* 9. KI-Abschnitt
   ========================================================================== */

.ai__inner {
  gap: 40px 80px;
  align-items: center;
}

.ai__intro {
  flex: 1 1 380px;
  gap: 20px;
}

.ai__list {
  flex: 1 1 420px;
  gap: 18px;
}


/* 10. Angebot
   ========================================================================== */

.offer__inner { gap: 48px; }

.offer__header { gap: 14px; }

.offer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 28px;
  align-items: stretch;
  font-size: 16px;
  line-height: 1.55;
}

.offer-card {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-card);
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Weiße Karten im dunkelblauen Abschnitt: normaler grauer Nebentext */
.section--navy .offer-card .muted { color: var(--color-text-muted); }

.offer-card__title { font-size: 22px; }

.offer-card__meta { font-size: 15px; }

.offer-card__list { gap: 6px; }

/* Feld "Ihr Ergebnis" – steht immer unten in der Karte */
.offer-card__outcome {
  margin-top: auto;
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--color-orange-tint);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.offer-card__outcome-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--color-orange-dark);
}

.offer-card__outcome-text {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.45;
}

/* Hervorgehobene Karte ("Schwerpunkt", orange) */
.offer-card--featured {
  position: relative;
  background: var(--color-orange);
  color: var(--color-text-on-orange);
}

.offer-card--featured .offer-card__title { color: var(--color-text-on-orange); }
.offer-card--featured .offer-card__meta  { color: var(--color-text-on-orange-muted); }
.offer-card--featured .offer-card__list  { color: var(--color-text-on-orange-list); }
.offer-card--featured li::marker         { color: var(--color-navy); }
.offer-card--featured .offer-card__outcome       { background: rgba(255, 255, 255, .28); }
.offer-card--featured .offer-card__outcome-label { color: var(--color-navy); }

.offer-card__badge {
  position: absolute;
  top: 18px;
  right: 18px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-white);
  background: var(--color-navy);
  border-radius: var(--radius-pill);
  padding: 3px 12px;
}


/* 11. Erfahrung
   ========================================================================== */

.experience__inner { gap: 40px; }

.experience__header { gap: 14px; }

.experience__list {
  font-size: 16px;
  line-height: 1.55;
}

.exp-item {
  gap: 10px 64px;
  padding: 30px 0;
  border-top: 1px solid var(--color-border);
}

.exp-item:last-child { border-bottom: 1px solid var(--color-border); }

.exp-item__head { flex: 0 1 280px; }

.exp-item__title { font-size: 20px; }

.exp-item__role { font-size: 15px; }

.exp-item__body {
  flex: 1 1 520px;
  gap: 12px;
}


/* 12. Branchen
   ========================================================================== */

.industries__inner {
  gap: 32px 56px;
  align-items: flex-start;
}

.industries__intro {
  flex: 1 1 220px;
  max-width: 260px;
  gap: 16px;
}

/* Bild mit darübergelegten Branchen-Boxen.
   Die Position jeder Box steht direkt im HTML (--x / --y in Prozent).
   Die Boxen bleiben auf jeder Bildschirmbreite auf dem Bild verankert:
   Größe, Schrift und Abstände wachsen und schrumpfen mit der Bildbreite
   (Einheit cqw = 1 % der Bildbreite; bei 840 px Bildbreite = Originalgröße). */
.industry-map {
  position: relative;
  flex: 1 1 600px;
  max-width: 840px;
  container-type: inline-size;
}

.industry-map__image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-image);
}

.industry-map__hub {
  position: absolute;
  left: calc(var(--x) + 2.1cqw);      /* 18 px bei 840 px Bildbreite */
  top: calc(var(--y) + 1.7cqw);       /* 14 px */
  width: 23.8cqw;                     /* 200 px */
  box-sizing: border-box;
  padding: 1.4cqw 1.7cqw;             /* 12 px 14 px */
  color: var(--color-text);
  background: rgba(255, 255, 255, .95);
  border-radius: var(--radius-card);
  display: flex;
  flex-direction: column;
  gap: .5cqw;
  box-shadow: 0 6px 20px -10px rgba(14, 23, 41, .45);
}

.industry-map__hub h3 { font-size: max(12px, 2.02cqw); }   /* 17 px, mind. 12 px */

.industry-map__hub p {
  font-size: max(10px, 1.67cqw);                           /* 14 px, mind. 10 px */
  line-height: 1.4;
  color: var(--color-text-hub);
}

/* Schmales Bild (Handy): Boxen zeigen nur noch die Branche als kompaktes
   Etikett. Die Beschreibung bleibt für Screenreader und Google lesbar. */
@container (max-width: 520px) {
  .industry-map__hub {
    /* rechte Boxen auf sehr schmalen Handys nicht über den Bildrand schieben */
    left: min(calc(var(--x) + 2.1cqw), calc(100cqw - 104px));
    width: auto;
    padding: 5px 9px;
    border-radius: var(--radius-pill);
  }

  .industry-map__hub h3 {
    font-size: 12px;
    white-space: nowrap;
  }

  .industry-map__hub p {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}


/* 13. Über mich
   ========================================================================== */

.about__inner {
  gap: 56px 80px;
  align-items: center;
}

.about__photo {
  flex: 0 1 360px;
  min-width: 260px;
}

.about__content {
  flex: 1 1 440px;
  min-width: 0;
  gap: 32px;
}

.about__heading { gap: 4px; }

.about__name { font-size: 38px; }

.about__text {
  font-size: 18px;
  max-width: 620px;
}

.about__facts {
  gap: 28px 64px;
  font-size: 16px;
}

.about__fact { flex: 1 1 220px; }

.about__fact-title {
  font-size: 16px;
  margin-bottom: 14px;
  color: var(--color-orange-dark);
}

/* Punkte unter "Ausbildung" und "Was mir wichtig ist":
   orangefarbener Aufzählungspunkt, Abstand zwischen den Punkten über gap */
.about__fact-list {
  gap: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}


/* 14. Stimmen
   ========================================================================== */

.testimonials__inner { gap: 40px; }

.testimonials__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 56px;
}

.testimonial { gap: 12px; }

/* Großes orangenes Anführungszeichen */
.testimonial__mark {
  font-size: 64px;
  line-height: .6;
  color: var(--color-orange);
  font-weight: 700;
  height: 30px;
}

.testimonial__quote {
  font-size: 18px;
  line-height: 1.5;
}

.testimonial__author { font-size: 15px; }


/* 15. Kontakt
   ========================================================================== */

.contact__inner {
  gap: 56px 80px;
  align-items: center;
}

.contact__photo {
  flex: 0 1 340px;
  min-width: 240px;
}

.contact__content {
  flex: 1 1 420px;
  min-width: 0;
  gap: 28px;
}

.contact__title {
  font-size: 42px;
  line-height: 1.1;
}

.contact__text { font-size: 18px; }

.contact__outcomes {
  font-size: 17px;
  gap: 10px;
}



/* 16. Footer
   ========================================================================== */

.site-footer {
  background: var(--color-navy);
  color: var(--color-on-navy-muted);
}

.site-footer__inner {
  padding-top: 28px;
  padding-bottom: 28px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  font-size: 15px;
}

.site-footer .logo { height: 34px; }

.site-footer__links {
  display: flex;
  gap: 24px;
}

.site-footer__links a,
.site-footer__links a:hover { color: var(--color-on-navy); }


/* 17. Rechtliche Seiten (Impressum, Datenschutz)
   ========================================================================== */

.legal {
  max-width: 760px;
  gap: 16px;
}

.legal h2 {
  font-size: 22px;
  margin-top: 16px;
}


/* 18. Animationen
   --------------------------------------------------------------------------
   Einblenden beim Scrollen: assets/js/main.js setzt die Klassen.
   Ohne JavaScript ist alles sofort sichtbar.
   ========================================================================== */

html.js .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--reveal-delay, 0ms);
}

html.js .reveal.reveal--image { transform: scale(1.03); }

html.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Karten heben sich beim Überfahren leicht an */
.offer-card { transition: transform .3s ease, box-shadow .3s ease; }

.offer-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px -18px rgba(14, 23, 41, .5);
}

/* Weniger Bewegung, wenn im Betriebssystem so eingestellt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  html.js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .offer-card:hover,
  .btn:hover { transform: none; }
}