/* ─────────────────────────────────────────────────────────────
   michaelkoepf.de – Hugo Rebuild
   CSS 1:1 aus Original (Bricks Builder / theme-style-global.min.css)
───────────────────────────────────────────────────────────── */

/* ── Fonts (selbst gehostet, originalgetreu) ──
   NOTE: Schriftgrößen-Korrekturen:
   - bricks-type-hero: scale-5xl (Hero H1, ~48-65px)
   - section-heading:  scale-3xl (~33-44px)
   - Fließtext:        scale-sm  (~14-16px)
   Alle via fluid clamp, originalgetreu.
── */
@font-face {
  font-family: "Inter Local";
  font-weight: 400;
  font-display: swap;
  src: url(/fonts/inter-v13-latin-regular.woff2) format("woff2");
}
@font-face {
  font-family: "Inter Local";
  font-weight: 600;
  font-display: swap;
  src: url(/fonts/inter-v13-latin-600.woff2) format("woff2");
}
@font-face {
  font-family: "Satoshi Local";
  font-weight: 500;
  font-display: swap;
  src: url(/fonts/Satoshi-Medium.woff2) format("woff2");
}
@font-face {
  font-family: "Satoshi Local";
  font-weight: 700;
  font-display: swap;
  src: url(/fonts/Satoshi-Bold.woff2) format("woff2");
}

/* ── Design Tokens (exakt aus Original) ── */
:root {
  /* Farben */
  --clr-white-100:   #ffffff;
  --clr-white-70:    hsla(0, 0%, 100%, 0.7);
  --clr-white-50:    hsla(0, 0%, 100%, 0.5);
  --clr-navi-deep:   hsla(208.75, 60%, 15.7%, 1);
  --clr-navi-dark:   hsla(205.42, 66.3%, 17.5%, 1);
  --clr-stack-100:   hsla(190.06, 71.6%, 55.9%, 1);
  --clr-accent-100:  hsla(167.14, 74%, 59.2%, 1);
  --clr-cta-100:     hsla(59.56, 91.9%, 71%, 1);
  --clr-empower-100: hsla(26.91, 96%, 60.4%, 1);
  --clr-alert-100:   hsla(351.93, 81.8%, 59%, 1);

  /* Fluid scale — exakt nach Original (min-viewport:360, max-viewport:1600, base-font:10) */
  --scale-3xs: 0.8rem;
  --scale-2xs: 1rem;
  --scale-xs:  clamp(1.2rem, 0.081vw + 1.171rem, 1.3rem);
  --scale-sm:  clamp(1.4rem, 0.161vw + 1.342rem, 1.6rem);
  --scale-md:  clamp(1.6rem, 0.323vw + 1.484rem, 2rem);
  --scale-lg:  clamp(1.9rem, 0.484vw + 1.726rem, 2.5rem);
  --scale-xl:  clamp(2.3rem, 0.645vw + 2.068rem, 3.1rem);
  --scale-2xl: clamp(2.8rem, 0.887vw + 2.481rem, 3.9rem);
  --scale-3xl: clamp(3.3rem, 1.290vw + 2.835rem, 4.9rem);
  --scale-4xl: clamp(4rem,   1.694vw + 3.390rem, 6.1rem);
  --scale-5xl: clamp(4.8rem, 2.258vw + 3.987rem, 7.6rem);
  --scale-1col: clamp(3.3rem, 5.242vw + 1.413rem, 9.8rem);

  /* Typografie-Aliase */
  --font-hero: var(--scale-5xl);
  --font-h1:   var(--scale-4xl);
  --font-h2:   var(--scale-3xl);
  --font-h3:   var(--scale-xl);
  --font-h4:   var(--scale-lg);
  --font-lg:   var(--scale-lg);
  --font-m:    var(--scale-md);
  --font-sm:   var(--scale-sm);
  --font-body: var(--scale-md);

  /* Spacing */
  --sec-pd-horizontal: clamp(2rem, 2.4375vw + 1.125rem, 3.9rem);
  --sec-pd-vertical:   var(--scale-5xl);
  --grid-gap-md:       var(--scale-2xl);
  --grid-gap-lg:       var(--scale-5xl);
  --space-card:        var(--scale-2xl);
  --radius-md:         var(--scale-lg);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 62.5%; scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background-color: var(--clr-navi-deep); }
body {
  font-family: "Inter Local", -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: var(--font-body);
  font-weight: 400;
  color: var(--clr-white-70);
  background: none;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
  color: var(--clr-white-100);
  font-family: "Satoshi Local", sans-serif;
  font-weight: 700;
}
h1 { font-size: var(--font-h1); line-height: 1.2; }
h2 { font-size: var(--font-h2); line-height: 1.2; }
h3 { font-size: var(--font-h3); line-height: 1.3; }
h4 { font-size: var(--font-h4); line-height: 1.3; }

/* ── Sections ── */
.brxe-section {
  padding-top:    var(--sec-pd-vertical);
  padding-right:  var(--sec-pd-horizontal);
  padding-bottom: var(--sec-pd-vertical);
  padding-left:   var(--sec-pd-horizontal);
}
.brxe-container {
  width: 100%;
  max-width: 1600px;
  margin: 0 auto;
}

/* ── Header ── */
.site-header {
  padding: var(--scale-2xl) var(--sec-pd-horizontal);
  background: var(--clr-navi-deep);
}
@media (max-width: 991px) {
  .site-header { padding-top: var(--scale-sm); padding-bottom: var(--scale-sm); }
}
.site-header__container {
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  column-gap: var(--grid-gap-md);
  max-width: 1600px; margin: 0 auto;
}
.header-card {
  display: grid;
  grid-gap: var(--grid-gap-md);
  grid-template-columns: var(--scale-1col) auto;
  align-items: center;
  text-decoration: none;
}
@media (max-width: 478px) { .header-card { grid-gap: var(--scale-md); } }
.header-card__image {
  border-radius: var(--radius-md);
  overflow: hidden;
  width: var(--scale-1col);
  height: var(--scale-1col);
  flex-shrink: 0;
}
.header-card__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.header-card__content { display: flex; flex-direction: column; }
.header-card__title    { color: var(--clr-white-50); font-size: var(--font-sm); }
.header-card__name     { color: var(--clr-white-100); font-family: "Satoshi Local", sans-serif; font-weight: 700; font-size: var(--font-h3); line-height: 1.2; }
@media (max-width: 991px) { .header-card__name { font-size: var(--font-h4); } }
.header-card__subtitle { color: var(--clr-white-50); font-size: var(--font-sm); }
@media (max-width: 478px) { .header-card__subtitle { display: none; } }

/* ── HERO ── */
.grid-hero {
  display: grid;
  grid-gap: var(--grid-gap-lg);
  grid-template-columns: 4fr 3fr;
  align-items: center;
}
@media (max-width: 991px) { .grid-hero { grid-template-columns: 1fr; } }

.bricks-type-hero {
  font-family: "Satoshi Local", sans-serif;
  font-weight: 700;
  font-size: var(--font-hero);
  line-height: 1.15;
  color: var(--clr-white-100);
}
.bricks-type-hero span { color: var(--clr-stack-100); }
.hero__text p { font-size: var(--font-m); line-height: 1.7; }

/* Button — Original: cta-100 (gelb) als primary */
.bricks-button {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: "Satoshi Local", sans-serif;
  font-weight: 700;
  line-height: 1;
  border: 2px solid;
  border-radius: var(--scale-3xs);
  transition: all ease 0.25s;
  padding: var(--scale-sm) var(--scale-lg);
  cursor: pointer;
  white-space: nowrap;
}
.bricks-button.primary {
  background-color: var(--clr-cta-100);
  color: var(--clr-navi-deep);
  border-color: var(--clr-cta-100);
}
.bricks-button.primary:hover {
  background-color: var(--clr-accent-100);
  border-color: var(--clr-accent-100);
}
@media (max-width: 478px) { .bricks-button { width: 100%; } }

/* Proof bar */
.proof {
  display: flex; flex-direction: row; flex-wrap: nowrap;
  column-gap: var(--scale-sm); align-items: center;
}
.proof__profiles {
  display: flex; flex-direction: row; flex-wrap: nowrap;
}
.proof__profiles .proof__query:nth-of-type(2),
.proof__profiles .proof__query:nth-of-type(3) { margin-left: -20px; }
.proof__query {
  width: var(--scale-3xl);
  height: var(--scale-3xl);
  border: 3px solid var(--clr-navi-deep);
  border-radius: 50vh;
  overflow: hidden;
  flex-shrink: 0;
}
.proof__query img { width: 100%; height: 100%; object-fit: cover; }
.proof__content { display: flex; flex-direction: column; row-gap: 4px; }
.proof__rating  { display: flex; gap: 2px; color: var(--clr-stack-100); }
.proof__rating svg { width: 1.8rem; height: 1.8rem; fill: currentColor; flex-shrink: 0; }
.proof__text { color: var(--clr-white-50); font-size: var(--font-sm); line-height: 1.4; white-space: nowrap; }

/* Portrait */
.hero-portrait { border-radius: var(--radius-md); overflow: hidden; }
.hero-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: top; }

/* ── BILDER-GRID (Section 2) ── */
.list-images {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: var(--grid-gap-md);
}
@media (max-width: 991px) { .list-images { grid-template-columns: repeat(2, 1fr); } }
.list-images__item {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 1/1;
}
.list-images__item img { object-fit: cover; width: 100%; height: 100%; }

/* ── REFERENZEN ── */
.section-label {
  display: block;
  font-family: "Satoshi Local", sans-serif;
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--clr-stack-100);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.list-refs {
  display: flex;
  flex-direction: row;
  column-gap: var(--grid-gap-md);
  row-gap: var(--grid-gap-md);
  flex-wrap: wrap;
  list-style: none; padding: 0; margin: 0;
  align-items: center;
}
.list-refs__item {
  background-color: var(--clr-white-100);
  padding: var(--scale-lg);
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  height: calc(var(--scale-2xl) + var(--scale-lg) * 2);
}
.list-refs__image { height: var(--scale-2xl); width: 100%; display: block; object-fit: contain; }

/* ── KUNDENSTIMMEN ── */
.grid-3x1fr--md {
  display: grid;
  grid-gap: var(--grid-gap-md);
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 991px) { .grid-3x1fr--md { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 478px)  { .grid-3x1fr--md { grid-template-columns: 1fr; } }

.card {
  background-color: var(--clr-navi-dark);
  padding: var(--space-card);
  border-radius: var(--radius-md);
}
.testimonial {
  display: flex; flex-direction: column;
  row-gap: var(--grid-gap-md);
  justify-content: space-between;
  height: 100%;
}
.testimonial__quote {
  font-size: var(--font-sm);
  color: var(--clr-white-70);
  line-height: 1.7;
}
.testimonial__quote em { color: var(--clr-alert-100); font-style: normal; }
.testimonial__quote span { color: var(--clr-alert-100); }
.testimonial__footer {
  display: grid;
  grid-gap: var(--scale-md);
  grid-template-columns: var(--scale-1col) auto;
  align-items: center;
}
.testimonial__profile {
  width: var(--scale-1col);
  height: var(--scale-1col);
  border-radius: 50vh;
  overflow: hidden;
  flex-shrink: 0;
}
.testimonial__profile img { width: 100%; height: 100%; object-fit: cover; }
.testimonial__name {
  font-family: "Satoshi Local", sans-serif;
  font-weight: 700;
  font-size: var(--font-sm);
  color: var(--clr-white-100);
  line-height: 1.2;
}
.testimonial__job { font-size: var(--font-sm); color: var(--clr-white-50); line-height: 1.3; }
.testimonial--load { display: none; }
.toggle-testimonials {
  display: inline-flex; flex-direction: row;
  align-items: center; column-gap: var(--scale-sm);
  padding: var(--scale-md) var(--scale-xl);
  background-color: transparent;
  border-radius: var(--scale-3xs);
  font-size: var(--font-sm);
  color: var(--clr-white-70);
  font-family: "Inter Local", sans-serif;
  border: 1px solid hsla(205, 66%, 45%, 0.6); cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.toggle-testimonials:hover { background: hsla(205,66%,20%,0.4); color: var(--clr-white-100); border-color: var(--clr-stack-100); }
.toggle-icon { color: var(--clr-empower-100); flex-shrink: 0; }

/* ── ÜBER MICH ── */
.grid-4-8--md {
  display: grid;
  grid-gap: var(--grid-gap-md);
  grid-template-columns: repeat(12, 1fr);
}
.grid-4-8--md .col-4 { grid-column: span 4; }
.grid-4-8--md .col-8 { grid-column: span 8; }
@media (max-width: 991px) {
  .grid-4-8--md { grid-template-columns: 1fr; }
  .grid-4-8--md .col-4, .grid-4-8--md .col-8 { grid-column: 1; }
}

.profile {
  display: flex; flex-direction: column;
  justify-content: flex-start; align-items: flex-start;
  row-gap: var(--grid-gap-md);
}
.profile__image {
  border-radius: 50vh; overflow: hidden;
  max-width: 240px; width: 100%;
  aspect-ratio: 1/1;
}
.profile__image img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.profile__name {
  font-family: "Satoshi Local", sans-serif; font-weight: 700;
  font-size: var(--font-h4); color: var(--clr-white-100);
  text-align: left;
}
.about-linkedin {
  display: inline-flex; align-items: center; gap: 0.5em;
  color: var(--clr-white-100);
  font-family: "Satoshi Local", sans-serif; font-weight: 700;
  font-size: var(--font-sm);
  background-color: #0A66C2;
  border: none;
  border-radius: var(--scale-3xs);
  padding: var(--scale-xs) var(--scale-lg);
  transition: background 0.2s ease;
}
.about-linkedin:hover { background: #0050A0; }

.profile__card {
  display: flex; flex-direction: column;
  align-items: center;
  row-gap: var(--scale-md);
  width: 100%;
}

.counter {
  display: flex; flex-direction: row;
  align-items: center; column-gap: var(--scale-md);
  flex-wrap: nowrap;
}
.card.counter {
  padding: var(--scale-md) var(--scale-lg);
}

.counter__count {
  color: var(--clr-stack-100);
  font-size: var(--scale-3xl);
  font-family: "Satoshi Local", sans-serif; font-weight: 700;
  line-height: 1; text-align: right; min-width: 100px;
}
.counter__label { color: var(--clr-white-70); font-size: var(--font-sm); line-height: 1.3; }

.section-heading {
  font-size: var(--font-h2);
  font-family: "Satoshi Local", sans-serif; font-weight: 700;
  color: var(--clr-white-100); line-height: 1.2;
  text-transform: none;
  letter-spacing: normal;
  margin-bottom: 0;
}

/* ── FOOTER ── */
.site-footer {
  padding: var(--sec-pd-vertical) var(--sec-pd-horizontal);
}
.site-fooer__container {
  font-size: var(--scale-xs);
  color: var(--clr-white-50);
  display: flex; flex-direction: row;
  justify-content: space-between; align-items: center;
  max-width: 1600px; margin: 0 auto;
}
@media (max-width: 478px) {
  .site-fooer__container { flex-direction: column; justify-content: center; align-items: center; row-gap: var(--scale-3xs); }
}
.site-footer a { color: var(--clr-white-50); transition: color 0.15s ease; }
.site-footer a:hover { color: var(--clr-stack-100); }

/* ── LEGAL PAGES ── */
.legal-page {
  padding: var(--sec-pd-vertical) var(--sec-pd-horizontal);
  max-width: 760px;
}
.legal-page h1 { font-family: "Satoshi Local", sans-serif; font-size: var(--font-h2); color: var(--clr-white-100); margin-bottom: var(--scale-2xl); }
.legal-page h2 { font-family: "Satoshi Local", sans-serif; font-size: var(--font-h4); color: var(--clr-stack-100); margin-top: var(--scale-2xl); margin-bottom: var(--scale-sm); }
.legal-page p, .legal-page li { font-size: var(--font-m); color: var(--clr-white-70); line-height: 1.75; margin-bottom: var(--scale-xs); }
.legal-page ul { padding-left: 1.5em; }
.legal-page a { color: var(--clr-stack-100); }

/* ── Utility ── */
.col-gap-md { display: flex; flex-direction: column; row-gap: var(--grid-gap-md); }
.col-gap-sm { display: flex; flex-direction: column; row-gap: var(--scale-md); }