/* ==========================================================================
   InstrucTip – Corporate Stylesheet
   Farben, Typografie und Gestaltungsprinzipien gemäß CLAUDE.md / Corporate
   Design Guide. Bewusst schlicht gehalten (Funktion vor Formalismus) und in
   klarem, semantischem HTML/CSS, damit die Übernahme nach Elementor später
   unkompliziert ist.
   ========================================================================== */

:root {
  --color-blue: #36526e;
  --color-blue-dark: #2a4054;
  --color-orange: #e94e1b;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-offwhite: #fafafa;
  --color-border: #e5e5e5;

  --font-heading: 'Lato', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'Fira Sans', 'Helvetica Neue', Arial, sans-serif;

  --container-width: 1180px;
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;
}

/* -------------------------------------------------------------------- */
/* Reset & Grundlagen                                                    */
/* -------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-black);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  text-align: left;
  -webkit-font-smoothing: antialiased;
}

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

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

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  color: var(--color-blue);
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  font-weight: 900;
}

h1 { font-size: clamp(2.2rem, 4.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: 1.25rem; font-weight: 700; }

p { margin: 0 0 var(--space-sm); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

section { position: relative; overflow: hidden; }

.section-padding { padding: var(--space-xl) 0; }

.kicker {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: var(--space-xs);
}

.lead {
  font-size: 1.15rem;
  max-width: 42em;
}

/* -------------------------------------------------------------------- */
/* Buttons                                                               */
/* -------------------------------------------------------------------- */

.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.9em 1.8em;
  border-radius: 4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.btn-primary {
  background: var(--color-orange);
  color: var(--color-white);
}
.btn-primary:hover { background: #c73f13; }

.btn-secondary {
  background: transparent;
  color: var(--color-blue);
  border-color: var(--color-blue);
}
.btn-secondary:hover { background: var(--color-blue); color: var(--color-white); }

.btn-onblue {
  background: var(--color-white);
  color: var(--color-blue);
}
.btn-onblue:hover { background: var(--color-orange); color: var(--color-white); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }

/* -------------------------------------------------------------------- */
/* Header / Navigation                                                   */
/* -------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid var(--color-border);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}

.site-logo img { height: 42px; width: auto; }

.nav-toggle { display: none; }

.nav-toggle-label {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 0.5rem;
}
.nav-toggle-label span {
  width: 24px;
  height: 2px;
  background: var(--color-blue);
  display: block;
}

.main-nav ul {
  display: flex;
  gap: var(--space-md);
  list-style: none;
  margin: 0;
  padding: 0;
}

.main-nav a {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-blue);
  padding: 0.4rem 0;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover,
.main-nav a[aria-current="page"] { border-color: var(--color-orange); color: var(--color-orange); }

/* -------------------------------------------------------------------- */
/* Hero                                                                  */
/* -------------------------------------------------------------------- */

.hero {
  padding: var(--space-xl) 0 var(--space-lg);
  background: var(--color-white);
}

.hero .container { position: relative; z-index: 2; }

/* Sektionen mit Dreiecksmuster: Inhalt liegt über dem Muster. */
.has-pattern > .container { position: relative; z-index: 2; }

.hero-content { max-width: 46em; }

.hero-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: var(--space-sm);
}
.hero-eyebrow img { height: 32px; width: auto; }
.hero-eyebrow span {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  letter-spacing: 0.03em;
}

.hero h1 { color: var(--color-blue); }
.hero .subheadline {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  color: var(--color-orange);
  margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------- */
/* Dreiecksmuster (nachgebaut als SVG, Deckkraft/Farbe frei steuerbar)   */
/* -------------------------------------------------------------------- */

.triangle-pattern {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 220px;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.2;
}
.triangle-pattern svg { width: 100%; height: 100%; display: block; }

.triangle-pattern.pattern-orange { color: var(--color-orange); }
.triangle-pattern.pattern-blue { color: var(--color-blue); }

/* Band nicht am Fuß der Sektion, sondern frei im Textfluss – der Abstand
   ist von der Oberkante der Sektion aus gemessen. */
.triangle-pattern.pattern-float {
  top: 20rem;
  bottom: auto;
}

/* Parallax: Das Dreiecksmuster wandert beim Scrollen langsamer als der
   Seiteninhalt. Umgesetzt per Scroll-driven Animation, also ohne JavaScript;
   Browser ohne Unterstützung zeigen das Muster unverändert statisch, und bei
   "prefers-reduced-motion" bleibt es ebenfalls stehen.

   Nur Bänder mit der Zusatzklasse .pattern-parallax bewegen sich – deren SVG
   braucht eine höhere viewBox (1200 x 470) als der sichtbare Ausschnitt
   (220 px), damit beim Wandern oben und unten Muster nachrückt. Die Sektion,
   die ein solches Band enthält, braucht die Klasse .has-pattern; sie liefert
   die Zeitachse der Bewegung und hebt den Inhalt über das Muster.

   Die Bildmarke (.brand-watermark) bleibt bewusst unbewegt. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .has-pattern { view-timeline-name: --tri-section; }

    .pattern-parallax svg {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 470px;
      animation: tri-parallax linear both;
      animation-timeline: --tri-section;
      /* Die Bewegung läuft genau, während die Sektion nach oben aus dem
         Bild scrollt – dadurch startet sie nicht schon vor dem ersten Scroll. */
      animation-range: exit;
    }

    /* Ein frei im Textfluss stehendes Band sitzt oft in einer sehr langen
       Sektion – deren Ein- und Auslauf taugt dann nicht als Zeitachse.
       Ein solches Band bringt deshalb seine eigene mit und wandert genau
       dann, wenn es vollständig im Bild steht. Dafür darf seine Sektion
       kein eigener Scroll-Container sein (kein overflow: hidden); das Band
       selbst beschneidet sein SVG ohnehin. */
    section:has(> .pattern-float) { overflow: visible; }

    .pattern-float { view-timeline-name: --tri-band; }

    .pattern-float svg {
      animation-timeline: --tri-band;
      animation-range: contain;
    }

    @keyframes tri-parallax {
      from { transform: translateY(-250px); }
      to   { transform: translateY(0); }
    }
  }
}

/* Großflächige Bildmarke im Hintergrund, ca. 10% Deckkraft. */
.brand-watermark {
  position: absolute;
  top: -30px;
  right: -2%;
  width: 340px;
  height: 408px;
  background-image: url('../branding/Kjellwassermann-logo-Bildmarke.svg');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  opacity: 0.1;
  pointer-events: none;
  z-index: 1;
}

/* -------------------------------------------------------------------- */
/* Mission / Intro                                                       */
/* -------------------------------------------------------------------- */

.mission { background: var(--color-offwhite); }
.mission .container { position: relative; z-index: 2; }
.mission-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--space-lg);
  align-items: start;
}
.mission-values {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md) var(--space-sm);
}
.mission-values dt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  margin-bottom: 0.2rem;
}
.mission-values dd { margin: 0; font-size: 0.95rem; }

/* -------------------------------------------------------------------- */
/* 3-Spalten: Branchen                                                   */
/* -------------------------------------------------------------------- */

.industries-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.industry-card {
  padding: var(--space-md);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}
.industry-icon {
  width: 52px;
  height: 52px;
  margin-bottom: var(--space-sm);
  color: var(--color-blue);
}
.industry-icon svg { width: 100%; height: 100%; }

/* -------------------------------------------------------------------- */
/* Leistungen (Kacheln)                                                  */
/* -------------------------------------------------------------------- */

.services { background: var(--color-offwhite); }
.services-grid, .badges-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.service-card, .badge-card {
  background: var(--color-white);
  border-radius: 8px;
  padding: var(--space-md) var(--space-sm);
  border-top: 4px solid var(--color-orange);
}
.service-card h3, .badge-card h3 { margin-bottom: 0.4rem; }
.service-card p, .badge-card p { font-size: 0.92rem; margin: 0; }

/* Abweichende Spaltenzahl, wenn ein Raster nicht vier Karten hat.
   Bewusst an eine Mindestbreite gebunden: Sonst würden diese Regeln die
   schmaleren Breakpoints weiter unten überstimmen (höhere Spezifität). */
@media (min-width: 901px) {
  .services-grid.cols-3, .badges-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
  .services-grid.cols-2, .badges-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
}

/* -------------------------------------------------------------------- */
/* Infografiken: Ablauf, Zyklus, Zeitachse                               */
/* Bewusst zurückhaltend: weiße Karten, dünne Rahmen, blaue Überschrift, */
/* Orange nur für Richtung und Akzent. Aufgebaut aus HTML statt SVG,     */
/* damit die Beschriftungen umbrechen, lesbar bleiben und sich später    */
/* in Elementor nachbauen lassen.                                        */
/* -------------------------------------------------------------------- */

.flow {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: var(--space-sm) 0 var(--space-md);
}

.flow-step {
  position: relative;
  flex: 1 1 9rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.flow-step + .flow-step { margin-left: 1.9rem; }

/* Dreieck als Richtungszeichen zwischen zwei Schritten */
.flow-step + .flow-step::before {
  content: "";
  position: absolute;
  left: -1.32rem;
  top: 50%;
  margin-top: -0.42rem;
  width: 0;
  height: 0;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-left: 0.66rem solid var(--color-orange);
}

.flow-label {
  display: block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-orange);
  margin-bottom: 0.2rem;
}
.flow-step h3 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.flow-step p { font-size: 0.88rem; margin: 0; }

/* Rückkopplung unter einem Ablauf */
.flow-feedback {
  position: relative;
  margin: 0 0 var(--space-md);
  padding: 0.6rem 1rem 0.6rem 2.1rem;
  border-top: 2px solid var(--color-border);
  font-size: 0.9rem;
  color: #555555;
}
.flow-feedback::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.95rem;
  width: 0;
  height: 0;
  border-top: 0.42rem solid transparent;
  border-bottom: 0.42rem solid transparent;
  border-right: 0.66rem solid var(--color-orange);
}

/* Zwei Wege nebeneinander: Beschriftung links, Schritte rechts */
.flow-lane {
  display: grid;
  grid-template-columns: 11rem 1fr;
  gap: var(--space-sm);
  align-items: center;
}
.flow-lane + .flow-lane { margin-top: var(--space-xs); }
.flow-lane-label {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  font-size: 0.95rem;
}
.flow-lane .flow { margin: 0.55rem 0; }

/* Zeitachse: Linie hinter den Schritten */
.flow--timeline { padding-top: 1.6rem; }
.flow--timeline::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  right: 0.5rem;
  top: 0.55rem;
  height: 2px;
  background: var(--color-border);
}
.flow--timeline .flow-step::after {
  content: "";
  position: absolute;
  left: 1rem;
  top: -1.35rem;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--color-orange);
}
.flow--timeline .flow-step { border-top-color: var(--color-orange); }

/* Kreislauf: vier Stationen um einen Ring */
.cycle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Der Abstand ist bewusst groß: Der Ring in der Mitte soll frei im
     Kreuz zwischen den vier Karten stehen, nicht hinter ihnen liegen. */
  gap: 5rem;
  max-width: 52em;
  margin: var(--space-sm) 0 var(--space-md);
}
/* Stationen im Uhrzeigersinn statt in Lesereihenfolge anordnen */
.cycle-step:nth-of-type(3) { grid-column: 2; grid-row: 2; }
.cycle-step:nth-of-type(4) { grid-column: 1; grid-row: 2; }
.cycle-step {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  border-radius: 6px;
  padding: 0.85rem 1rem;
}
.cycle-step h3 { font-size: 1rem; font-weight: 700; margin-bottom: 0.25rem; }
.cycle-step p { font-size: 0.88rem; margin: 0; }
.cycle-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 4.4rem;
  height: 4.4rem;
  transform: translate(-50%, -50%);
  color: var(--color-orange);
  opacity: 0.55;
  pointer-events: none;
}

/* Blätterung zwischen den vier Leistungsseiten */
.leistung-pager {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
}
.leistung-pager .text-link { font-size: 0.95rem; }

@media (max-width: 900px) {
  .flow-lane { grid-template-columns: 1fr; gap: 0; }
  .cycle { gap: var(--space-sm); }
  .cycle-ring { display: none; }
}

@media (max-width: 680px) {
  .flow-step { flex: 1 1 100%; }
  .flow-step + .flow-step { margin-left: 0; margin-top: 1.7rem; }
  /* Bei gestapelten Schritten zeigt das Dreieck nach unten */
  .flow-step + .flow-step::before {
    left: 1.2rem;
    top: -1.25rem;
    margin-top: 0;
    border-left: 0.42rem solid transparent;
    border-right: 0.42rem solid transparent;
    border-top: 0.66rem solid var(--color-orange);
    border-bottom: 0;
  }
  .flow--timeline::before { display: none; }
  .flow--timeline .flow-step::after { display: none; }
  .cycle { grid-template-columns: 1fr; }
  .cycle-step:nth-of-type(3),
  .cycle-step:nth-of-type(4) { grid-column: 1; grid-row: auto; }
}

/* -------------------------------------------------------------------- */
/* Aufzählung mit Dreieck als Zeichen (Motiv der Bildmarke)              */
/* -------------------------------------------------------------------- */

.tri-list {
  list-style: none;
  margin: var(--space-sm) 0 var(--space-md);
  padding: 0;
  max-width: 46em;
}
.tri-list li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.7rem;
}
.tri-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0;
  height: 0;
  border-left: 0.42rem solid transparent;
  border-right: 0.42rem solid transparent;
  border-bottom: 0.68rem solid var(--color-orange);
}
/* Kompakte Variante innerhalb einer Karte */
.tri-list-compact {
  margin: 0.6rem 0 0;
  font-size: 0.92rem;
}
.tri-list-compact li { margin-bottom: 0.35rem; padding-left: 1.3rem; }
.tri-list-compact li::before {
  top: 0.4em;
  border-left-width: 0.32rem;
  border-right-width: 0.32rem;
  border-bottom-width: 0.52rem;
}

/* -------------------------------------------------------------------- */
/* Zitat / Claim-Block                                                   */
/* -------------------------------------------------------------------- */

.claim {
  background: var(--color-blue);
  color: var(--color-white);
  text-align: left;
}
.claim .container { position: relative; z-index: 2; max-width: 900px; }
.claim blockquote {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(1.4rem, 3vw, 2rem);
  line-height: 1.3;
}
.claim cite {
  display: block;
  margin-top: var(--space-sm);
  font-style: normal;
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.75);
}

/* -------------------------------------------------------------------- */
/* Expertise-Säulen                                                      */
/* -------------------------------------------------------------------- */

.expertise-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-md);
}
.expertise-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  border: 2px solid var(--color-orange);
  color: var(--color-orange);
  font-family: var(--font-heading);
  font-weight: 700;
  margin-bottom: var(--space-sm);
}

/* -------------------------------------------------------------------- */
/* Vertrauenssignale                                                     */
/* -------------------------------------------------------------------- */

.trust {
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}
.trust .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
}
.trust-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.trust-names {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-blue);
}

/* -------------------------------------------------------------------- */
/* CTA-Banner                                                            */
/* -------------------------------------------------------------------- */

.cta-banner {
  background: var(--color-orange);
  color: var(--color-white);
  text-align: left;
}
.cta-banner h2 { color: var(--color-white); }
.cta-banner .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}
.cta-banner-text { max-width: 40em; }

/* -------------------------------------------------------------------- */
/* Footer                                                                */
/* -------------------------------------------------------------------- */

.site-footer {
  background: var(--color-blue-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: var(--space-lg) 0 var(--space-md);
}
.site-footer .container { position: relative; z-index: 2; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
}
.footer-logo img { height: 36px; margin-bottom: var(--space-sm); }
.footer-slogan {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-white);
}
.footer-col h4 {
  color: var(--color-white);
  font-size: 0.9rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: var(--space-sm);
}
.footer-col ul { list-style: none; margin: 0; padding: 0; }
.footer-col li { margin-bottom: 0.5rem; }
.footer-col a:hover { color: var(--color-orange); }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
  padding-top: var(--space-sm);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-sm);
  font-size: 0.85rem;
}
.footer-bottom ul { list-style: none; display: flex; gap: var(--space-sm); margin: 0; padding: 0; }

/* -------------------------------------------------------------------- */
/* Profil-Hero (Über mich)                                               */
/* -------------------------------------------------------------------- */

.profile-hero { padding: var(--space-xl) 0 var(--space-lg); }
.profile-hero .container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: var(--space-lg);
  align-items: center;
  position: relative;
  z-index: 2;
}
.profile-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.profile-photo img { width: 100%; height: 100%; object-fit: cover; }

/* -------------------------------------------------------------------- */
/* Werte-Chips                                                           */
/* -------------------------------------------------------------------- */

.values-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}
.value-chip {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 0.6em 1.4em;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  font-size: 0.95rem;
}

/* -------------------------------------------------------------------- */
/* Pull-Quote                                                            */
/* -------------------------------------------------------------------- */

.pull-quote {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: clamp(1.5rem, 3.2vw, 2.2rem);
  color: var(--color-blue);
  border-left: 4px solid var(--color-orange);
  padding-left: 1.2rem;
  margin: var(--space-md) 0;
  max-width: 34em;
}

/* -------------------------------------------------------------------- */
/* Kurzprofil-Box                                                        */
/* -------------------------------------------------------------------- */

.quick-facts {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: var(--space-md);
}
.quick-facts dl.mission-values { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

/* -------------------------------------------------------------------- */
/* Feature-Liste (Leistungsdetails)                                      */
/* -------------------------------------------------------------------- */

.feature-list { margin: var(--space-sm) 0 var(--space-md); max-width: 46em; }
.feature-list dt {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
  margin-top: 1.1rem;
}
.feature-list dt:first-child { margin-top: 0; }
.feature-list dd { margin: 0.2rem 0 0; }

/* -------------------------------------------------------------------- */
/* Entwurfsmarkierungen auf den Rechtsseiten                             */
/* Bewusst neutral-grau statt in den Markenfarben: Diese Elemente sind   */
/* Baustellenschilder und sollen nicht wie fertige Gestaltung wirken.    */
/* -------------------------------------------------------------------- */

/* Rechtstexte: viele kurze Abschnitte – die Überschriften dürfen hier
   leiser sein als auf den Inhaltsseiten. */
.legal h2 { font-size: 1.35rem; font-weight: 700; }
.legal .content-block + .content-block { margin-top: var(--space-md); }

.notice-box {
  border: 1px dashed #b0b0b0;
  background: var(--color-offwhite);
  border-radius: 6px;
  padding: var(--space-sm) var(--space-md);
  margin-bottom: var(--space-lg);
  max-width: 46em;
}
.notice-box p { font-size: 0.92rem; }
.notice-box p:last-child { margin-bottom: 0; }

.todo {
  background: #f0f0f0;
  border-bottom: 1px dashed #999999;
  color: #555555;
  font-size: 0.95em;
}

.result-line {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-orange);
  margin-top: var(--space-sm);
  max-width: 46em;
}

.content-block { max-width: 46em; }
.content-block + .content-block { margin-top: var(--space-lg); }

/* Kopfzeile der Ecken-Abschnitte: Überschrift links, das Ausrichtungs-
   dreieck mit der jeweils hervorgehobenen Ecke als Wiedererkennung rechts. */
.detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}
.detail-head > div { min-width: 0; }
.detail-head .kicker { margin-bottom: 0.3rem; }
.detail-head h3 { margin-bottom: 0; }
.detail-mark {
  flex: none;
  width: 120px;
  height: auto;
}

/* -------------------------------------------------------------------- */
/* Datentabelle                                                          */
/* -------------------------------------------------------------------- */

.table-wrap { overflow-x: auto; margin: var(--space-sm) 0 var(--space-md); }
.data-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; min-width: 480px; }
.data-table th, .data-table td {
  text-align: left;
  padding: 0.65em 0.9em;
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
}
.data-table th {
  font-family: var(--font-heading);
  color: var(--color-blue);
  font-weight: 700;
  border-bottom: 2px solid var(--color-blue);
}

.citation {
  font-size: 0.85rem;
  color: #555555;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-sm);
  margin-top: var(--space-lg);
  max-width: 46em;
}

/* -------------------------------------------------------------------- */
/* Kontaktseite                                                          */
/* -------------------------------------------------------------------- */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: var(--space-lg);
  align-items: start;
}
.contact-details { display: flex; flex-direction: column; gap: var(--space-sm); }
.contact-detail-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-blue);
}
.contact-detail-item .icon { width: 22px; height: 22px; flex-shrink: 0; color: var(--color-orange); }

.contact-form { display: flex; flex-direction: column; gap: var(--space-sm); }
.form-row { display: flex; flex-direction: column; gap: 0.35rem; }
.form-row label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-blue);
}
.form-row input, .form-row select, .form-row textarea {
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 0.7em 0.9em;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  background: var(--color-white);
  color: var(--color-black);
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: 2px solid var(--color-orange);
  outline-offset: 1px;
}
.form-consent { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.9rem; }
.form-consent input { margin-top: 0.25rem; }

/* -------------------------------------------------------------------- */
/* Textlink & Sprungziele                                                */
/* -------------------------------------------------------------------- */

.text-link {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-orange);
  border-bottom: 2px solid transparent;
}
.text-link:hover { border-color: var(--color-orange); }

/* Abstand zum klebenden Header beim Ansteuern von Ankern */
:target { scroll-margin-top: 6rem; }

/* -------------------------------------------------------------------- */
/* Ausrichtungsdreieck – interaktive Grafik                              */
/* Grundlage ist die Bildmarke selbst (Lerndreieck, gleichseitig, mit    */
/* Knoten in den Ecken). Pro Ecke existiert eine SVG-Variante in         */
/* assets/images/ausrichtungsdreieck-*.svg; umgeschaltet wird per        */
/* Radio-Button, Ziffern und Beschriftungen liegen als HTML darüber.     */
/* -------------------------------------------------------------------- */

.triangle-explorer {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 1fr) 1.05fr;
  gap: var(--space-lg);
  align-items: center;
  margin-top: var(--space-md);
}

.te-hint {
  font-size: 0.9rem;
  color: #555555;
  margin-bottom: 0;
}

/* Radios steuern die Auswahl – sichtbar nur für Tastatur & Screenreader */
.te-input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.triangle-figure {
  position: relative;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 245 / 220;
  margin: 0 auto;
}

/* Die drei Varianten liegen deckungsgleich übereinander; sichtbar ist
   jeweils nur die zur ausgewählten Ecke gehörende. */
.te-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.3s ease;
}
#te-1:checked ~ .triangle-figure .te-image-1,
#te-2:checked ~ .triangle-figure .te-image-2,
#te-3:checked ~ .triangle-figure .te-image-3 { opacity: 1; }

/* Die Knotenkreise liefert die Grafik – das Label steuert nur Ziffer,
   Beschriftung und Trefferfläche bei. */
.te-corner {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: transparent;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.2s ease;
}
.te-corner .te-caption {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: clamp(0.78rem, 2.3vw, 0.92rem);
  color: var(--color-blue);
}

.te-corner:hover { transform: translate(-50%, -50%) scale(1.1); }

/* Positionen entsprechen den Knotenmittelpunkten der Bildmarke
   (viewBox 150 50 245 220). */
.te-corner-1 { left: 66.4%; top: 15.9%; }
.te-corner-2 { left: 20.0%; top: 64.9%; }
.te-corner-3 { left: 81.1%; top: 85.4%; }
.te-corner-1 .te-caption { bottom: calc(100% + 1.3rem); }
.te-corner-2 .te-caption { top: calc(100% + 1.3rem); }
.te-corner-3 .te-caption { top: calc(100% + 1.3rem); left: auto; right: 0; transform: none; }

/* Aktive Ecke: Die Einfärbung des Knotens leistet die Grafik selbst,
   hier wird nur die zugehörige Beschriftung hervorgehoben. */
#te-1:checked ~ .triangle-figure .te-corner-1 .te-caption,
#te-2:checked ~ .triangle-figure .te-corner-2 .te-caption,
#te-3:checked ~ .triangle-figure .te-corner-3 .te-caption {
  color: var(--color-orange);
}

/* Tastaturfokus sichtbar an der zugehörigen Ecke */
#te-1:focus-visible ~ .triangle-figure .te-corner-1,
#te-2:focus-visible ~ .triangle-figure .te-corner-2,
#te-3:focus-visible ~ .triangle-figure .te-corner-3 {
  outline: 3px solid var(--color-blue);
  outline-offset: 4px;
}

.triangle-panels { min-height: 17rem; }
.triangle-panel {
  display: none;
  border-left: 4px solid var(--color-orange);
  padding-left: 1.4rem;
}
.triangle-panel h3 { margin-bottom: 0.5rem; }

#te-1:checked ~ .triangle-panels .te-panel-1,
#te-2:checked ~ .triangle-panels .te-panel-2,
#te-3:checked ~ .triangle-panels .te-panel-3 {
  display: block;
  animation: te-fade 0.35s ease both;
}

@keyframes te-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .te-corner { transition: none; }
  .te-image { transition: none; }
  .triangle-panel { animation: none !important; }
}

/* -------------------------------------------------------------------- */
/* Responsive                                                            */
/* -------------------------------------------------------------------- */

@media (max-width: 900px) {
  .mission-grid { grid-template-columns: 1fr; }
  .industries-grid { grid-template-columns: 1fr 1fr; }
  .services-grid, .badges-grid { grid-template-columns: 1fr 1fr; }
  .expertise-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .profile-hero .container { grid-template-columns: 1fr; }
  .profile-photo { max-width: 320px; }
  .quick-facts dl.mission-values { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .triangle-explorer { grid-template-columns: 1fr; }
  .triangle-panels { min-height: 0; }
}

@media (max-width: 680px) {
  .detail-mark { width: 82px; }
  .nav-toggle-label { display: flex; }
  .main-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    display: none;
  }
  .main-nav ul { flex-direction: column; gap: 0; padding: var(--space-sm) var(--space-md); }
  .main-nav li { border-bottom: 1px solid var(--color-border); }
  .main-nav li:last-child { border-bottom: none; }
  .main-nav a { display: block; padding: 0.9rem 0; }
  .nav-toggle:checked ~ .main-nav { display: block; }

  .industries-grid { grid-template-columns: 1fr; }
  .services-grid, .badges-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .cta-banner .container { flex-direction: column; align-items: flex-start; }
  .brand-watermark { display: none; }
  .profile-photo { max-width: 220px; }
}