/* =========================================================
   KLAUS PICHLER — KP CONSULTING WEBSITE
   Design-Tokens aus Figma (Dev Mode) übernommen.
   ========================================================= */

/* ---------- Original-Schrift: Big Caslon (lizenziert, von Raffaela bereitgestellt) ---------- */
@font-face {
  font-family: 'Big Caslon';
  src: url('assets/fonts/BigCaslon-Medium.woff2') format('woff2'),
       url('assets/fonts/BigCaslon-Medium.ttf') format('truetype');
  font-weight: 100 900; /* eine Schnittbreite (Medium) deckt alle angeforderten Weights ab, kein Fake-Bold */
  font-style: normal;
  font-display: swap;
}

/* ---------- Design Tokens ---------- */
:root {
  /* Farben (Figma-Variablen) */
  --color-main: #19283C;       /* dunkles Petrol/Navy – Nav, Zitat-Box, Footer */
  --color-accent: #460A00;     /* dunkles Rot/Bordeaux – primäre Buttons */
  --color-highlight: #F2EDE7;  /* Creme – Sektion "Über mich" Hintergrund */
  --color-brown: #614838;      /* Icon-Kreis Variante */
  --color-lightblue: #E8F2FA;  /* Icon-Kreis Variante */
  --color-gray: #7B7B7B;       /* Sekundärtext */
  --color-black: #000000;
  --color-white: #FFFFFF;

  /* Typografie
     "Big Caslon" ist jetzt als Original-Schriftdatei eingebunden (siehe @font-face oben),
     mit Libre Caslon Text/Georgia als Fallback, falls die Datei mal fehlt.
     "Basic Sans" (Original-Foundry-Font) liegt uns noch nicht vor – "Work Sans" bleibt
     hier als kostenloser, sehr ähnlicher Ersatz, bis die Datei nachgereicht wird. */
  --font-serif: 'big-caslon-fb', 'Big Caslon', 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --font-sans: 'basic-sans', 'Work Sans', 'Helvetica Neue', Arial, sans-serif;

  --fs-h1: 64px;
  --fs-h2: 44px;
  --fs-h3: 28px;
  --fs-body: 16px;
  --fs-label: 15px;

  --radius-pill: 100px;
  --radius-lg: 30px;
  --radius-md: 16px;

  --container-width: 1280px;
  --section-padding-y: 100px;
}

/* ---------- Reset ---------- */
* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--color-black);
  background: var(--color-white);
}

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

a { color: inherit; text-decoration: none; }

ul { list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: 1.15;
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h3.subheading { margin: 60px 0 30px; text-align: center; }
.subheading--accent { color: var(--color-accent); margin-bottom: 50px; }
.subheading--gap-top { margin-top: 90px; }
h4 { font-size: var(--fs-h3); margin-bottom: 8px; }

p { color: var(--color-black); }
.site-footer .cta-box p { color: var(--color-white); }

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

/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.legal {
  padding-top: var(--section-padding-y);
  padding-bottom: var(--section-padding-y);
  min-height: 40vh;
}

.legal h1 { font-size: var(--fs-h2); margin-bottom: 24px; }

.legal p { max-width: 720px; line-height: 1.6; margin-bottom: 20px; }

.legal h2 {
  font-family: var(--font-sans);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-main);
  margin: 40px 0 12px;
}

.legal h2:first-of-type { margin-top: 8px; }

.legal a { color: var(--color-accent); text-decoration: underline; }

/* ---------- Reusable: Eyebrow / Kicker ---------- */
.eyebrow {
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-black);
  margin-bottom: 12px;
}

.eyebrow--center { text-align: center; }
.text-center { text-align: center; }

/* ---------- Reusable: Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--color-white);
  border: none;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.btn:hover { opacity: 0.88; transform: translateY(-1px); }

.btn--main { background: var(--color-main); }
.btn--accent { background: var(--color-accent); }
.btn--small { padding: 10px 18px; font-size: 13px; }

.btn--second {
  background: transparent;
  color: var(--color-main);
  border: 1.5px solid var(--color-main);
}

.btn--second:hover { background: var(--color-main); color: var(--color-white); opacity: 1; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: 1px;
  text-transform: uppercase;
  border-bottom: 1px solid currentColor;
  padding-bottom: 4px;
}

/* ---------- Reusable: Icon Circles ---------- */
.icon-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.icon-circle--main { background: var(--color-main); color: var(--color-white); }
.icon-circle--accent { background: var(--color-accent); color: var(--color-white); }
.icon-circle--brown { background: var(--color-brown); color: var(--color-white); }
.icon-circle--lightblue { background: var(--color-lightblue); color: var(--color-main); }

.icon-circle__svg {
  width: 34px;
  height: 34px;
  color: inherit;
  overflow: visible;
}

/* ---------- Reusable: Badge (Säulen-Nummer) ---------- */
.badge {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-white);
  border: 1px solid rgba(0,0,0,0.08);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  color: var(--color-main);
  font-family: var(--font-serif);
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Scroll-down Pfeil ---------- */
.scroll-down {
  width: 44px;
  height: 64px;
  border: 1px solid var(--color-black);
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-black);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.scroll-down svg { width: 19px; height: 19px; animation: scroll-down-bounce 2s ease-in-out infinite; }
.scroll-down:hover { opacity: 0.7; }

@keyframes scroll-down-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-down svg { animation: none; }
}

/* ---------- Header / Nav ---------- */
.site-header { background: var(--color-white); position: relative; }

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 200;
  padding-top: 60px;
  padding-bottom: 30px;
  transition: padding 0.25s ease;
}

.nav-wrap.is-scrolled {
  padding-top: 16px;
  padding-bottom: 16px;
  background: rgba(255, 255, 255);
  box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.05);
  transition: 0.25s ease;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--color-white);
  border-radius: 100px;
  transition: box-shadow 0.25s ease;
}

.logo {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  display: inline-flex;
}

.logo__img {
  height: 81px;
  width: auto;
  transition: height 0.25s ease;
}

.nav-wrap.is-scrolled .logo__img { height: 40px; }

.nav-links {
  display: flex;
  align-items: center;
  gap: 36px;
}

.nav-links a:not(.btn) {
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nav-links a:not(.btn):hover { color: var(--color-accent); }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding-top: 40px;
  padding-bottom: 80px;
}

.hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  max-width: 579px;
  position: relative;
  z-index: 1;
}

.hero__text .eyebrow { margin-bottom: 0; }

.hero h1 { margin-bottom: 0; }

.hero__subtitle {
  margin-bottom: 0;
}

/* Diagonal geschnittenes Hintergrundbild - liegt hinter Nav & Hero-Text,
   bündig mit der rechten Seite der 1440px-Design-Fläche (siehe Figma "Bild Header").
   Ist jetzt ein Kind von .site-header (nicht mehr des ganzen Body) - dadurch bewegt
   es sich immer exakt im Gleichschritt mit dem Hero-Text, auch wenn die Nav beim
   Scrollen schrumpft. top: -171px zieht es genau so weit nach oben, dass es (wie im
   Design) schon hinter der Nav beginnt - 171px entspricht der Nav-Höhe im Ausgangszustand. */
.hero-bleed {
  position: absolute;
  top: -171px;
  right: max(0px, calc((100vw - 1440px) / 2));
  width: 720px;
  height: 683px;
  clip-path: polygon(41.6% 0%, 100% 0%, 100% 100%, 0% 100%);
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.hero-bleed img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- Intro-Text ---------- */
.intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
  padding: 100px 80px 80px;
  text-align: center;
}

.intro__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.intro__text {
  max-width: 920px;
  margin: 0;
  font-size: var(--fs-body);
  line-height: 1.4;
}

.intro__credit {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding-top: 10px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  color: var(--color-main);
}

.intro__credit svg { width: 18px; height: 18px; flex-shrink: 0; }
.intro__credit:hover { opacity: 0.8; }

/* ---------- Pillars (2 Säulen Übersicht) ---------- */
.pillars { padding: 0 80px 100px; }

.section-header { text-align: center; margin-bottom: 60px; }
.section-header .eyebrow { text-align: center; }

.pillars__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.pillar-card {
  background: var(--color-highlight);
  border-radius: var(--radius-lg);
  padding: 48px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pillar-card__logo {
  height: 52px;
  display: flex;
  align-items: center;
  margin-bottom: 24px;
}

.pillar-card__logo img { height: 100%; width: auto; max-width: 220px; object-fit: contain; }

.pillar-card h3 { margin-bottom: 16px; }
.pillar-card p { margin-bottom: 28px; }

/* ---------- About ---------- */
.about {
  background: var(--color-highlight);
  padding: var(--section-padding-y) 80px;
  border-radius: var(--radius-lg);
  width: calc(100% - 80px);
  max-width: calc(var(--container-width) + 80px);
  margin: 0 auto;
}

.about__grid {
  display: grid;
  grid-template-columns: 1.4fr 0.6fr;
  gap: 60px;
  align-items: center;
  margin-bottom: 60px;
}

.about__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.about__text .eyebrow { margin-bottom: 0; }
.about__text h2 { margin: 0; }
.about__text p { margin: 0; }

.about__media {
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 300px;
  margin-left: auto;
}

.about__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.quote {
  background: var(--color-main);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 48px 60px;
  display: flex;
  align-items: center;
  gap: 32px;
  text-align: left;
}

.quote__mark {
  font-family: var(--font-serif);
  font-size: 200px;
  font-weight: 400;
  line-height: 0;
  margin-top: 100px;
  color: var(--color-white);
  flex-shrink: 0;
}

.quote p {
  font-family: var(--font-serif);
  font-style: normal;
  font-weight: 400;
  font-size: 28px;
  letter-spacing: 1.12px;
  color: var(--color-white);
  margin: 0;
  flex: 1;
}

.quote__attribution {
  font-size: 16px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
  font-weight: 500;
  text-align: left;
  flex-shrink: 0;
  margin-right: 24px;
}

.quote__attribution span {
  display: block;
  font-size: 14px;
  font-weight: 200;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-white);
  margin-top: 2px;
}

/* ---------- Pillar Detail Sections (Säule 1 / 2) ---------- */
.pillar-detail { padding: var(--section-padding-y) 0; }
.pillar-detail--alt { background: var(--color-highlight); }

.pillar-detail__header {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 20px;
  margin-bottom: 40px;
}

.pillar-detail__header > div {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pillar-detail__header .eyebrow { text-align: center; }
.pillar-detail__header h2 { margin-top: 0; max-width: 780px; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 40px;
}

.service-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.service-card p { font-size: var(--fs-body); }

.targets { margin-top: 8px; }

.targets__row {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid rgba(0,0,0,0.1);
}

.targets__label {
  font-weight: 600;
  font-family: var(--font-serif);
  font-size: 18px;
}


.usp-box {
  background: var(--color-main);
  color: var(--color-white);
  border-radius: var(--radius-lg);
  padding: 48px;
  margin-top: 40px;
  text-align: center;
}

.usp-box p { color: var(--color-white); }

.usp-box__label {
  font-family: var(--font-serif);
  font-size: 20px;
  margin-bottom: 16px;
}

.section-cta { margin-top: 48px; text-align: center; }

.product-intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  margin-bottom: 20px;
}

.product-intro__logo img { height: 90px; width: auto; }

.product-text { max-width: 820px; margin: 0 auto 28px; text-align: center; }

.pillar-detail .text-center--btn { text-align: center; margin-bottom: 40px; }

/* ---------- Clients / Referenzen ---------- */
.clients { padding: var(--section-padding-y) 80px; text-align: center; }

.clients h2 { margin-bottom: 48px; }

.clients__logos {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 48px;
}

.clients__logos img {
  height: 56px;
  width: auto;
  max-width: 180px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.65;
  transition: opacity 0.2s ease, filter 0.2s ease;
}

.clients__logos img:hover {
  filter: grayscale(0);
  opacity: 1;
}

/* ---------- Footer ---------- */
.site-footer { background: var(--color-main); color: var(--color-white); }

.cta-box {
  display: flex;
  align-items: center;
  gap: 60px;
  padding: var(--section-padding-y) 80px;
}

.cta-box__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.cta-box__main h2 { color: var(--color-white); margin: 0; }
.cta-box__main p { color: var(--color-white); opacity: 0.85; margin: 0; }

.cta-box__linkedin {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--color-white);
  font-weight: bold;
}

.cta-box__linkedin svg { width: 18px; height: 18px; flex-shrink: 0; }
.cta-box__linkedin:hover { opacity: 0.85; }

.cta-box__main .btn { margin-top: 8px; }
.cta-box__main .btn svg { width: 15px; height: 13px; flex-shrink: 0; }

.cta-box__contact {
  display: flex;
  align-items: center;
  gap: 40px;
  flex-shrink: 0;
  padding-left: 40px;
  border-left: 1px solid rgba(255,255,255,0.2);
  align-self: stretch;
}

.logo--light { color: var(--color-white); }

.cta-box__logo { height: 90px; width: auto; }

.cta-box__contact-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  justify-content: center;
}

.cta-box__contact-list a,
.cta-box__contact-list p {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-white);
  opacity: 0.9;
}

.cta-box__contact-list svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.cta-box__contact-list a:hover { opacity: 1; }

.footer-bottom {
  background: var(--color-highlight);
}

.footer-bottom__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 80px;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom__copyright {
  font-size: 14px;
  color: var(--color-black);
}

.footer-bottom__legal {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.footer-bottom__legal a { color: var(--color-black); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .container, .pillars, .intro, .about, .clients, .cta-box, .footer-bottom__inner { padding-left: 40px; padding-right: 40px; }
  .about { width: calc(100% - 40px); margin: 0 auto; }
  .services__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  :root { --fs-h1: 44px; --fs-h2: 32px; --section-padding-y: 64px; }

  .nav-wrap { transition: none; }

  .nav-toggle { display: flex; }

  .nav-links {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: flex-start;
    padding: 24px 40px;
    gap: 20px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
  }

  .nav-links.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .hero { padding-bottom: 60px; }
  .hero__text { max-width: none; }
  .hero__subtitle br { display: none; }

  .hero-bleed {
    position: static;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    clip-path: none;
    border-radius: var(--radius-lg);
    overflow: hidden;
    margin: 0 auto 32px;
  }

  .pillars__grid,
  .about__grid { grid-template-columns: 1fr; }

  .about__media { order: -1; aspect-ratio: 4/5; max-width: none; margin-left: 0; }
  .about__media img { object-position: top; }

  .quote { flex-direction: column; text-align: center; gap: 16px; }
  .quote__attribution { text-align: center; font-size: 14px; letter-spacing: 1px; }
  .quote__attribution span { font-size: 13px; }

  .services__grid h4 { font-size: 20px; }
  .services__grid h4 br { display: none; }

  .targets__row { grid-template-columns: 1fr; gap: 8px; }

  .cta-box { flex-direction: column; align-items: flex-start; gap: 32px; }
  .cta-box__contact {
    border-left: none;
    border-top: 1px solid rgba(255,255,255,0.2);
    padding-left: 0;
    padding-top: 32px;
    width: 100%;
  }
}

@media (max-width: 640px) {
  :root { --fs-h1: 34px; --fs-body: 14px; }
  .container, .pillars, .intro, .about, .clients, .cta-box, .footer-bottom__inner, .navbar { padding-left: 24px; padding-right: 24px; }
  .about { width: calc(100% - 24px); margin: 0 auto; padding: 48px 24px; }
  .quote { padding: 36px 24px; }
  .quote p { font-size: 22px; }
  .services__grid { grid-template-columns: 1fr; }
  .footer-bottom__inner { flex-direction: column; align-items: center; text-align: center; }
  .footer-bottom__legal { justify-content: center; }
  .cta-box__contact { flex-direction: column; gap: 24px; }
  .scroll-down { width: 40px; height: 56px; }
  .hero { padding-bottom: 24px; }
  .intro { padding-top: 24px; gap: 40px; }
}

/* ---------- Scroll-Reveal (Headlines) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}