/* --------------------------------------------------------------------------
   Montserrat, selbst gehostet (SIL Open Font License)
   Struktur exakt wie von Google ausgeliefert: variable Datei je Zeichensatz,
   je Schnitt eine Regel. Kein externer Aufruf mehr -> keine IP-Uebermittlung.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/montserrat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(../fonts/montserrat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   INTENSA Website 2026 | Design System
   Farben & Tokens aus INTENSA_WEBSITE_BRIEF.md abgeleitet.
   ========================================================================== */

:root {
  /* Marken-Farben */
  --intensa-navy-deep: #0A1629;
  --intensa-navy: #0F2038;
  --intensa-orange: #EB6437;
  --intensa-cream: #F5F4F0;
  --intensa-blue-gray: #8899AA;
  --intensa-blue-light: #7FB6E8;

  /* Semantische Tokens */
  --background-primary: var(--intensa-navy);
  --background-dark: var(--intensa-navy-deep);
  --background-light: var(--intensa-cream);
  --text-primary: var(--intensa-cream);
  --text-secondary: var(--intensa-blue-gray);
  --text-on-light: var(--intensa-navy);
  --accent: var(--intensa-orange);
  --card-background: var(--intensa-navy-deep);
  --divider: rgba(136, 153, 170, 0.28);
  --divider-strong: rgba(136, 153, 170, 0.72);

  /* Layout */
  --container-max: 1200px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);
  --header-height: 4.75rem;
  --section-gap: clamp(4.5rem, 10vw, 9rem);
  --radius: 14px;

  /* Typografie */
  --font-sans: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --measure: 68ch;

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Anker-Offset fuer die sticky Navigation */
  scroll-padding-top: calc(var(--header-height) + 1rem);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--background-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

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

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

h1, h2, h3, h4, p { margin: 0; }

ul { margin: 0; padding: 0; list-style: none; }

button { font: inherit; cursor: pointer; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   Layout-Utilities
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

.section { padding-block: var(--section-gap); }
.section--dark { background-color: var(--background-dark); }
.section--light { background-color: var(--background-light); color: var(--text-on-light); }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -100%;
  z-index: 200;
  background: var(--accent);
  color: #fff;
  padding: 0.65rem 1.1rem;
  border-radius: 8px;
  font-weight: 700;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 1rem; }

/* --------------------------------------------------------------------------
   Typografie-Bausteine
   -------------------------------------------------------------------------- */
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

.lead {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--text-secondary);
  max-width: var(--measure);
}

.text-accent { color: var(--accent); }

.body-text { max-width: var(--measure); }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 48px;
  padding: 0.8rem 1.6rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease),
              border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.btn--primary { background: var(--accent); color: #fff; }
.btn--primary:hover { transform: translateY(-2px); background: #d5552b; }
.btn--outline { border-color: var(--divider-strong); color: var(--text-primary); }
.btn--outline:hover { border-color: var(--accent); color: var(--accent); }
.btn--on-light { color: var(--intensa-navy); border-color: rgba(15,32,56,0.35); }
.btn--on-light:hover { border-color: var(--accent); color: var(--accent); }

/* --------------------------------------------------------------------------
   Header / Navigation
   -------------------------------------------------------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  height: var(--header-height);
  background: var(--intensa-navy-deep);
  border-bottom: 1px solid var(--divider);
  /* am Seitenanfang versteckt, erscheint beim Runterscrollen */
  transform: translateY(-100%);
  transition: transform 0.35s var(--ease);
}
.header.is-visible { transform: translateY(0); }

/* Startseite: Kopfzeile von Anfang an sichtbar, ueber dem Hero transparent.
   Oben links steht "Unternehmensberatung in Graz" statt des Logos, weil das
   grosse Logo im Hero steht. Beim Scrollen wird sie navy und zeigt das Logo. */
.header--hero {
  transform: none;
  background: transparent;
  border-bottom-color: transparent;
  transition: background-color 0.35s var(--ease), border-color 0.35s var(--ease);
}
.header--hero.is-solid,
body.nav-open .header--hero {
  background: var(--intensa-navy-deep);
  border-bottom-color: var(--divider);
}
.header--hero .header__inner { position: relative; }
.header--hero .header__logo { transition: opacity 0.3s var(--ease), visibility 0.3s; }
.header--hero:not(.is-solid) .header__logo { opacity: 0; visibility: hidden; }
/* ueber dem Hero nur Rahmen, sonst stehen zwei gleich starke orange Buttons untereinander */
@media (min-width: 861px) {
  .header--hero:not(.is-solid) .nav__cta { background: transparent; border-color: rgba(245, 244, 240, 0.35); }
  .header--hero:not(.is-solid) .nav__cta:hover { border-color: var(--accent); color: var(--accent); }
}
.header--hero:not(.is-solid) .scrollbar { opacity: 0; }

/* Scroll-Fortschritt am unteren Rand der Kopfzeile */
.scrollbar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  pointer-events: none;
}
.scrollbar__line {
  display: block;
  height: 100%;
  width: var(--progress, 0%);
  background: var(--intensa-blue-light);
  border-radius: 0 2px 2px 0;
  transition: width 0.08s linear;
}
.scrollbar__boat {
  position: absolute;
  /* unter der Zeichnung liegt leere SVG-Flaeche -> Versatz, damit der
     Rumpf auf der Linie aufliegt statt darueber zu schweben */
  bottom: -5px;
  /* Boot bleibt am Rand vollstaendig sichtbar */
  left: clamp(15px, var(--progress, 0%), calc(100% - 15px));
  width: 30px;
  height: auto;
  transform: translateX(-50%);
  transition: left 0.08s linear;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.header__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.header__logo img { height: 1.85rem; width: auto; max-width: 58vw; }

.nav { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.5rem); }
.nav__list { display: flex; align-items: center; gap: clamp(1.25rem, 3vw, 2.25rem); }
.nav__link {
  font-weight: 600;
  color: var(--text-primary);
  padding: 0.4rem 0;
  position: relative;
  transition: color 0.2s var(--ease);
}
.nav__link::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}
.nav__link:hover, .nav__link:focus-visible { color: var(--accent); }
.nav__link:hover::after, .nav__link:focus-visible::after { width: 100%; }

.nav__cta { margin-left: 0.5rem; }

/* Burger */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px; height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
}
.nav-toggle span {
  display: block;
  width: 24px; height: 2px;
  margin-inline: auto;
  background: var(--text-primary);
  transition: transform 0.25s var(--ease), opacity 0.2s var(--ease);
}
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
body.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) {
  .nav-toggle { display: flex; }
  .nav {
    position: fixed;
    inset: var(--header-height) 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: var(--background-dark);
    border-bottom: 1px solid var(--divider);
    padding: 1rem var(--container-pad) 2rem;
    /* ganz aus dem Bild: eigene Hoehe plus Kopfzeile, sonst blitzt unten ein Streifen hervor */
    transform: translateY(calc(-100% - var(--header-height)));
    visibility: hidden;
    transition: transform 0.3s var(--ease), visibility 0s linear 0.3s;
    max-height: calc(100dvh - var(--header-height));
    overflow-y: auto;
  }
  body.nav-open .nav { transform: translateY(0); visibility: visible; transition: transform 0.3s var(--ease), visibility 0s; }
  .nav__list { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .nav__list li { display: block; width: 100%; }
  /* Trennlinie muss ueber die ganze Zeile laufen, nicht nur unter dem Text */
  .nav__link { display: block; width: 100%; padding: 0.95rem 0; border-bottom: 1px solid var(--divider); font-size: 1.1rem; }
  .nav__list li:last-child .nav__link { border-bottom: 0; }
  .nav__cta { margin: 1.5rem 0 0; width: 100%; text-align: center; }
}

/* --------------------------------------------------------------------------
   Hero: Nacht mit Leuchtturm-Licht
   Das Licht geht vom Punkt des "i" aus (Lampe). Position relativ zum Logo:
   Punktmitte liegt bei 3.28 % Breite / 14.16 % Hoehe der Logo-Grafik.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: calc(var(--header-height) + 1rem) var(--container-pad) clamp(1.25rem, 3vh, 2rem);
  text-align: center;
  color: var(--text-primary);
  /* bewusst flach: ein heller Verlauf hinter dem Logo wirkt wie ein Schein */
  background: var(--intensa-navy-deep);
  border-bottom: 1px solid var(--divider);
}
.hero__content {
  --hero-gap: clamp(1.75rem, 4vw, 3rem);
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--hero-gap);
}

.hero__mark {
  --lamp-x: 3.28%;
  --lamp-y: 14.16%;
  position: relative;
  width: min(100%, 980px);
}
.hero__logo { position: relative; z-index: 1; width: 100%; height: auto; }

/* Lichtebenen sitzen auf der Lampe */
.hero__sweep,
.hero__lamp {
  position: absolute;
  left: var(--lamp-x);
  top: var(--lamp-y);
  border-radius: 50%;
  pointer-events: none;
}
/* Lichtstrahl, nur waehrend der Startanimation: 22deg breit mit klaren Kanten,
   hell an der Lampe und mit der Entfernung auslaufend. Im Ruhezustand kein Strahl. */
.hero__sweep {
  width: 320%;
  aspect-ratio: 1;
  opacity: 0;
  background: conic-gradient(from 0deg,
    rgba(255, 240, 222, 0) 0deg, rgba(255, 240, 222, 0.5) 1.4deg,
    rgba(255, 240, 222, 0.34) 20.6deg, rgba(255, 240, 222, 0) 22deg,
    rgba(255, 240, 222, 0) 360deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, #000 6%, rgba(0, 0, 0, 0.6) 24%, transparent 52%);
          mask-image: radial-gradient(circle, #000 0%, #000 6%, rgba(0, 0, 0, 0.6) 24%, transparent 52%);
}
/* eigener Punkt fuer die Zuendung; danach uebernimmt der Punkt im Logo */
.hero__lamp {
  z-index: 2;
  width: 4.86%;
  aspect-ratio: 1;
  opacity: 0;
  background: #EC6739;
  transform: translate(-50%, -50%);
}

.hero__claim {
  margin: -0.25rem 0 0;
  font-size: clamp(2.3rem, 4.6vw, 3.25rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}
.hero__claim .accent { color: var(--accent); }
/* sagt, was INTENSA ist; haengt eng am Claim */
.hero__tagline {
  margin: calc(var(--hero-gap) * -0.62) 0 0;
  font-size: clamp(1rem, 1.5vw, 1.25rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: rgba(245, 244, 240, 0.74);
}

@media (max-width: 620px) {
  .hero__content { --hero-gap: 1.6rem; padding-bottom: 5vh; }   /* optische Mitte etwas ueber der Bildmitte */
  .hero__mark { width: min(100%, 340px); }
  .hero__claim { font-size: clamp(1.95rem, 8.8vw, 2.35rem); }
  .hero__tagline { margin-top: calc(var(--hero-gap) * -0.5); }
  .hero__cta-row .btn { min-height: 52px; padding-inline: 2rem; }
  /* am Handy zeigt der hereinschauende naechste Abschnitt, dass es weitergeht
     (.hero davor, weil die Grundregel weiter unten steht) */
  .hero .hero__scroll { display: none; }
}
/* Handy und Tablet hochkant: Hero etwas niedriger, der naechste Abschnitt schaut herein,
   statt dass unter dem Button eine leere Flaeche steht */
@media (max-width: 860px) and (orientation: portrait) {
  .hero { min-height: 84vh; min-height: 84svh; }
}
/* niedrige Laptop-Fenster: Logo kleiner, damit Button und Scroll-Hinweis sichtbar bleiben */
@media (min-width: 621px) and (max-height: 760px) {
  .hero__content { --hero-gap: 2rem; }
  .hero__mark { width: min(100%, 760px); }
}
/* Handy quer: alles kompakt, Button muss ohne Scrollen sichtbar sein */
@media (max-height: 520px) and (orientation: landscape) {
  .hero .hero__scroll { display: none; }
  .hero__content { --hero-gap: 1.1rem; }
  .hero__mark { width: min(100%, 420px); }
  .hero__claim { font-size: 1.9rem; }
}
/* grosse Monitore: Logo und Claim wachsen etwas mit */
@media (min-width: 1700px) and (min-height: 900px) {
  .hero__mark { width: min(100%, 1140px); }
  .hero__claim { font-size: 3.6rem; }
  .hero__tagline { font-size: 1.35rem; }
}

/* Scroll-Hinweis: eigener Platz am unteren Rand, kollidiert nicht mit dem Button */
.hero__scroll {
  flex: none;
  margin-top: clamp(1rem, 3vh, 2rem);
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(245, 244, 240, 0.3);
  background: rgba(245, 244, 240, 0.04);
  color: var(--text-primary);
  text-decoration: none;
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
  animation: heroNudge 2.4s ease-in-out infinite;
}
.hero__scroll:hover { border-color: var(--accent); background: rgba(245, 244, 240, 0.1); }
.hero__scroll svg { width: 18px; height: 18px; }
@keyframes heroNudge {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(6px); }
}
.hero__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
}
.btn__arrow { transition: transform 0.25s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   Startanimation "Der Leuchtturm geht an" (nur mit html.hero-intro)
   1. Lampe zuendet  2. Strahl schwenkt, der Schriftzug erscheint dort,
   wo das Licht hinfaellt  3. Claim, Button, Menue kommen dazu.
   --sweep ist der aktuelle Winkel des Strahls (0deg = oben, im Uhrzeigersinn).
   -------------------------------------------------------------------------- */
@property --sweep {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0deg;
}
html.hero-intro .hero__mark { animation: heroSweep 1.7s 0.55s cubic-bezier(0.55, 0.05, 0.35, 1) both; }
html.hero-intro .hero__logo {
  /* sichtbar wird, was die Vorderkante des Strahls schon erreicht hat */
  -webkit-mask-image: conic-gradient(from 0deg at 3.28% 14.16%, #000 calc(var(--sweep) + 5deg), transparent calc(var(--sweep) + 11deg));
          mask-image: conic-gradient(from 0deg at 3.28% 14.16%, #000 calc(var(--sweep) + 5deg), transparent calc(var(--sweep) + 11deg));
}
html.hero-intro .hero__sweep {
  /* Strahlmitte liegt auf --sweep */
  transform: translate(-50%, -50%) rotate(calc(var(--sweep) - 11deg));
  animation: heroSweepLight 2.3s 0.45s ease-in-out both;
}
html.hero-intro .hero__lamp { animation: heroLamp 0.7s 0.1s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
html.hero-intro .hero__claim { animation: heroUp 0.9s 1.75s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.hero-intro .hero__tagline { animation: heroUp 0.9s 1.85s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.hero-intro .hero__cta-row { animation: heroUp 0.9s 1.95s cubic-bezier(0.22, 1, 0.36, 1) both; }
html.hero-intro .hero__scroll { animation: heroFade 0.8s 2.4s ease-out both, heroNudge 2.4s 3.2s ease-in-out infinite; }
/* unsichtbare Links waehrend des Intros nicht anklickbar */
html.hero-intro .header--hero { animation: heroFade 0.8s 2.3s ease-out both; pointer-events: none; }

@keyframes heroSweep {
  from { --sweep: 50deg; }
  to   { --sweep: 235deg; }
}
@keyframes heroSweepLight {
  0%   { opacity: 0; }
  15%  { opacity: 1; }
  72%  { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes heroLamp {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0); }
  60%  { opacity: 1; transform: translate(-50%, -50%) scale(1.3); }
  100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes heroUp {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes heroFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__scroll { animation: none; }
  html.hero-intro .hero__mark,
  html.hero-intro .hero__sweep,
  html.hero-intro .hero__lamp,
  html.hero-intro .hero__claim,
  html.hero-intro .hero__tagline,
  html.hero-intro .hero__cta-row,
  html.hero-intro .hero__scroll,
  html.hero-intro .header--hero { animation: none; }
  html.hero-intro .hero__logo { -webkit-mask-image: none; mask-image: none; }
}

/* --------------------------------------------------------------------------
   Divider
   -------------------------------------------------------------------------- */
.divider {
  border: 0;
  height: 1px;
  background: var(--divider-strong);
  margin-block: clamp(1.5rem, 3vw, 2.25rem);
}

/* --------------------------------------------------------------------------
   Pain Points
   -------------------------------------------------------------------------- */
.pain__title { margin-bottom: clamp(2.5rem, 6vw, 4rem); max-width: 20ch; }

/* Editorial Rows | große, gut erkennbare Grafiken */
.pain-list { border-top: 1px solid var(--divider); }
.pain-row {
  display: grid;
  grid-template-columns: 132px 1fr 230px;
  align-items: center;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  padding-block: clamp(1.25rem, 2.4vw, 1.9rem);
  padding-inline: clamp(0.6rem, 1.5vw, 1rem);
  margin-inline: calc(-1 * clamp(0.6rem, 1.5vw, 1rem));
  border-bottom: 1px solid var(--divider);
  border-radius: 14px;
  color: inherit;
  transition: background 0.25s var(--ease);
}
.pain-row:hover { background: rgba(255, 255, 255, 0.045); }
.pain-row:focus-visible { outline-offset: 2px; }
.pain-row__icons {
  width: 132px;
  height: clamp(76px, 7.4vw, 96px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pain-row__icon {
  max-width: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  transition: transform 0.3s var(--ease);
}
.pain-row:hover .pain-row__icon { transform: scale(1.05); }
.pain-row__text {
  font-size: clamp(1.05rem, 1.9vw, 1.45rem);
  font-weight: 700;
  line-height: 1.15;
}
.pain-row__sol {
  justify-self: start;
  font-weight: 700;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: color 0.25s var(--ease), gap 0.25s var(--ease);
}
.pain-row__sol:hover, .pain-row:hover .pain-row__sol { color: var(--accent); }
.pain-row__sol:hover { gap: 0.8rem; }

/* Platzhalter-Icons für die Leistungssektionen (bis Solution-Grafiken eingebaut) */
.service__icon {
  display: block;
  border-radius: 12px;
  background: radial-gradient(circle at 30% 30%, rgba(136,153,170,0.35), rgba(136,153,170,0.12));
  border: 1px dashed var(--divider-strong);
}

@media (max-width: 820px) {
  .pain-row { grid-template-columns: 96px 1fr; gap: 1rem 1.25rem; }
  .pain-row__icons { width: 96px; height: 78px; }
  .pain-row__sol { grid-column: 2; justify-self: start; }
}
@media (max-width: 480px) {
  .pain-row { grid-template-columns: 96px 1fr; }
  .pain-row__icons { width: 96px; height: 88px; }
}

/* --------------------------------------------------------------------------
   Solutions Intro
   -------------------------------------------------------------------------- */
.solutions-intro .lead { margin-top: 1.25rem; }
.solutions-nav {
  margin-top: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.solutions-nav a {
  display: inline-flex;
  align-items: center;
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--divider-strong);
  border-radius: 999px;
  font-weight: 600;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.solutions-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* --------------------------------------------------------------------------
   Service Sections
   -------------------------------------------------------------------------- */
.service__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: clamp(2rem, 6vw, 5rem);
  align-items: center;
}
.service--reverse .service__body { order: 2; }
.service--reverse .service__media { order: 1; }
.service__title { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.service__title-sub { display: inline-block; font-size: 0.6em; opacity: 0.85; }
.service__statement {
  font-size: clamp(1.3rem, 2.5vw, 1.75rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.15;
  margin-bottom: 0.85rem;
}
.service__subheading {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  font-weight: 800;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}
.service__block .body-text { color: var(--text-secondary); }
.service__cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

.service__media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  border-radius: 20px;
  background: radial-gradient(circle at 50% 42%, rgba(136,153,170,0.12), transparent 68%);
}
.service__img {
  width: min(78%, 300px);
  height: auto;
  transition: transform 0.5s var(--ease);
}
.service:hover .service__img { transform: translateY(-6px) scale(1.04); }
/* Platzhalter (nur noch Meeting-Docs, bis Grafik vorliegt) */
.service__icon {
  width: min(60%, 260px);
  aspect-ratio: 1;
  opacity: 0.85;
}

@media (max-width: 860px) {
  .service__inner { grid-template-columns: 1fr; }
  .service--reverse .service__body { order: 1; }
  .service--reverse .service__media { order: 2; }
  .service__media { justify-content: flex-start; }
  .service__icon { width: 140px; }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tstm {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  display: grid;
  grid-template-columns: clamp(240px, 26vw, 320px) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

/* Buehne: Portraits liegen gestapelt, nur das aktive ist sichtbar */
.tstm__stage { position: relative; aspect-ratio: 4/5; }
.tstm__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 22px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
}
.tstm__photo.is-active { opacity: 1; }.tstm__photo--todo {
  background: linear-gradient(150deg, #24344f, #16243a 60%, #1c2c45);
  border: 1px dashed var(--divider-strong);
}

.tstm__content { min-height: calc(clamp(240px, 26vw, 320px) * 1.25); display: flex; flex-direction: column; }
.tstm__content .tstm__dots { margin-top: auto; padding-top: clamp(1.75rem, 3.5vw, 2.5rem); }
.tstm__mark { display: block; font-size: 4.5rem; line-height: 0.6; font-weight: 900; color: var(--accent); margin-bottom: 1rem; }
.tstm__panel { display: none; }
.tstm__panel.is-active { display: block; }
.tstm__quote {
  margin: 0 0 1.1rem;
  font-size: clamp(1.4rem, 2.8vw, 2.2rem);
  font-weight: 800;
  line-height: 1.16;
  color: var(--text-primary);
}
.tstm__text { color: var(--text-secondary); max-width: var(--measure); margin: 0 0 1.5rem; }
.tstm__text p { margin: 0 0 0.8rem; }
.tstm__text p:last-child { margin-bottom: 0; }
.tstm__credit { color: var(--text-secondary); opacity: 0.65; font-size: 0.78rem; margin: 0.6rem 0 0; }
.tstm__name { font-weight: 800; margin: 0; }
.tstm__role { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.45; margin: 0.15rem 0 0; }

/* Portrait-Leiste zum Umschalten */
.tstm__dots { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: clamp(1.75rem, 3.5vw, 2.5rem); padding: 0; list-style: none; }
.tstm__dot {
  /* feste Chip-Groesse -> alle Logos stehen auf gleicher Hoehe */
  width: 168px; height: 88px; border-radius: 14px; padding: 0.85rem 1.1rem; flex: none;
  border: 2px solid transparent; background: #fff; cursor: pointer; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  opacity: 0.72;
  transition: opacity 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.tstm__dot img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }
/* Breite Wortmarken duerfen die Chipbreite ausnutzen, kompakte die Hoehe */
.tstm__dot img[data-fit="wide"] { width: 100%; height: auto; }
.tstm__dot img[data-fit="tall"] { height: 100%; width: auto; }
/* sehr breite Wortmarken (z. B. Rail Cargo) brauchen weniger Rand, sonst wirken sie zu klein */
.tstm__dot.tstm__dot--tight { padding-inline: 0.55rem; }
/* Rail Cargo: "Member of OeBB" haengt unter der Wortmarke und zieht die Mitte nach unten;
   etwas tiefer setzen, damit die Hauptzeile auf Hoehe der anderen Logos steht */
.tstm__dot--tight img { transform: translateY(14%); }
.tstm__dot--todo { background: linear-gradient(150deg, #24344f, #16243a); border-color: var(--divider-strong); }
.tstm__dot:hover { opacity: 0.92; transform: translateY(-2px); }
.tstm__dot[aria-selected="true"] { opacity: 1; border-color: var(--accent); }

@media (max-width: 860px) {
  .tstm { grid-template-columns: minmax(0, 1fr); }
  .tstm__stage { width: 100%; max-width: 300px; margin-inline: auto; }
}
@media (max-width: 620px) {
  /* Chips teilen sich die Zeile, statt untereinander zu stapeln */
  /* Raster statt Flex: alle Kacheln exakt gleich breit, auch mit unterschiedlichem Innenabstand */
  .tstm__dots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; }
  .tstm__dot { width: auto; min-width: 0; height: 68px; padding: 0.6rem 0.7rem; }
}
@media (prefers-reduced-motion: reduce) {
  .tstm__photo, .tstm__dot { transition: none; }
}

/* --------------------------------------------------------------------------
   Kundenlogos
   -------------------------------------------------------------------------- */
.logo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
}
.logo-grid img { max-height: 56px; width: auto; margin-inline: auto; object-fit: contain; }
@media (max-width: 720px) { .logo-grid { grid-template-columns: repeat(2, 1fr); } }

/* --------------------------------------------------------------------------
   Terminbuchung
   -------------------------------------------------------------------------- */
.booking__head { max-width: var(--measure); margin: 0 auto clamp(2rem, 4vw, 3rem); text-align: center; }
.booking__head .lead { margin-top: 1rem; }

/* Microsoft laesst Bookings-Seiten nicht mehr einbetten ->
   klarer Einstieg statt iframe. Nebeneffekt: keine Verbindung zu
   Microsoft, bevor der Besucher bewusst klickt. */
.booking__card {
  max-width: 34rem;
  margin-inline: auto;
  padding: clamp(2rem, 4vw, 3rem);
  border: 1px solid var(--divider);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.03);
  text-align: center;
}
.booking__service {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.booking__hint {
  color: var(--text-secondary);
  font-size: 0.98rem;
  line-height: 1.55;
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
}
.booking__cta { font-size: 1.02rem; }
.booking__alt {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  padding-top: clamp(1.25rem, 2.5vw, 1.5rem);
  border-top: 1px solid var(--divider);
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.booking__alt a { color: var(--text-primary); font-weight: 700; }
.booking__alt a:hover { color: var(--accent); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { padding-block: clamp(3rem, 6vw, 4.5rem); }
.footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.footer__logo img { height: 2.75rem; width: auto; }
.footer__mail {
  font-size: clamp(1.1rem, 2.2vw, 1.3rem);
  font-weight: 700;
  color: var(--text-primary);
  transition: color 0.2s var(--ease);
  word-break: break-word;
}
.footer__mail:hover { color: var(--accent); }
.footer__meta {
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--divider);
  color: var(--text-secondary);
  font-size: 0.9rem;
}

/* --------------------------------------------------------------------------
   Reduced Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* --------------------------------------------------------------------------
   Lösungen | Sticky Split Switcher
   -------------------------------------------------------------------------- */
.solswitch {
  display: grid;
  grid-template-columns: 0.72fr 1.28fr;
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}
.solswitch__list {
  position: sticky;
  top: calc(var(--header-height) + 1.5rem);
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--divider);
}
.solswitch__opt {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--divider);
  padding: clamp(1rem, 2.2vw, 1.5rem) 0;
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  transition: color 0.25s var(--ease), padding-left 0.25s var(--ease);
}
.solswitch__opt:hover { color: var(--text-primary); padding-left: 0.4rem; }
.solswitch__opt.is-active { color: var(--accent); }
.solswitch__num { font-size: 0.8rem; font-weight: 700; flex: none; }
.solswitch__name { font-size: clamp(1.05rem, 2vw, 1.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1; }

.solswitch__panels { position: relative; }
.solswitch__panel { display: none; }
.solswitch__panel.is-active {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: clamp(1.5rem, 3vw, 2.75rem);
  background: var(--background-primary);
  border: 1px solid var(--divider);
  border-radius: 22px;
  padding: clamp(1.75rem, 3.5vw, 3rem);
  box-shadow: 0 30px 60px -40px rgba(0,0,0,0.7);
  animation: solfade 0.45s var(--ease);
}
@keyframes solfade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.solswitch__media {
  width: 190px;
  height: 190px;
  border-radius: 18px;
  border: 1px solid var(--divider);
  background: radial-gradient(circle at 50% 42%, rgba(136,153,170,0.14), transparent 70%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.solswitch__media img { width: 74%; height: 74%; object-fit: contain; }
.solswitch__media--todo .solswitch__todo { width: 60%; height: 60%; border: 1px dashed var(--divider-strong); border-radius: 12px; display: block; }

.solswitch__title { font-size: clamp(1.5rem, 3vw, 2.4rem); font-weight: 800; text-transform: uppercase; color: var(--accent); letter-spacing: -0.01em; line-height: 1.05; margin-bottom: 1rem; }
.solswitch__title .service__title-sub { display: inline-block; font-size: 0.5em; color: var(--text-secondary); }
.solswitch__statement { font-size: clamp(1.2rem, 2vw, 1.65rem); font-weight: 700; line-height: 1.18; }
.solswitch__intro { color: var(--text-secondary); margin-top: 0.6rem; max-width: var(--measure); }
.solswitch__block { margin-top: clamp(1.25rem, 2.5vw, 1.85rem); padding-top: clamp(1.25rem, 2.5vw, 1.85rem); border-top: 1px solid var(--divider); }
.solswitch__k { display: block; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.5rem; }
.solswitch__block p { color: var(--text-secondary); margin: 0; max-width: var(--measure); }
.solswitch__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* optische Größen-Angleichung der Icons */
.ic-change { transform: scale(0.92); }
.ic-leader { transform: scale(1.16); }
.ic-potential { transform: scale(1.02); }
.ic-sales { transform: scale(0.98); }

@media (max-width: 900px) {
  .solswitch { grid-template-columns: 1fr; gap: 2rem; }
  .solswitch__list { position: static; }
  .solswitch__panel.is-active { grid-template-columns: 1fr; }
  .solswitch__media { width: 150px; height: 150px; }
}

/* --------------------------------------------------------------------------
   Lösungen | Dropdown / Accordion
   -------------------------------------------------------------------------- */
.solacc { margin-top: clamp(2rem, 4vw, 3rem); }
.solacc__item { border-bottom: 1px solid var(--divider); }
.solacc__item:first-child { border-top: 1px solid var(--divider); }
.solacc__h { margin: 0; }
.solacc__head {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;   /* minmax(0,..): Titel darf schrumpfen statt das Plus aus dem Bild zu druecken */
  align-items: center;
  gap: clamp(0.6rem, 2.5vw, 1.5rem);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: clamp(1.1rem, 2.2vw, 1.5rem) 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--text-primary);
  transition: padding-left 0.25s var(--ease);
}
.solacc__head:hover { padding-left: 0.4rem; }
.solacc__tile {
  width: clamp(64px, 8vw, 84px);
  height: clamp(64px, 8vw, 84px);
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--divider);
  display: flex; align-items: center; justify-content: center;
  flex: none;
}
.solacc__tile img { width: 70%; height: 70%; object-fit: contain; }
/* Meeting-Docs-Logo fuellt die Kachel randlos aus */
.solacc__tile--mdocs { background: none; border-color: transparent; overflow: hidden; }
.solacc__tile .ic-meetingdocs { width: 100%; height: 100%; object-fit: cover; border-radius: 13px; }
.solacc__num { font-size: 0.8rem; font-weight: 700; color: var(--text-secondary); }
.solacc__title {
  font-size: clamp(1.15rem, 2.4vw, 1.9rem);
  font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.1;
  transition: color 0.25s var(--ease);
}
.solacc__title .service__title-sub { display: inline-block; font-size: 0.55em; color: var(--text-secondary); }

/* Chevron als +/- */
.solacc__chevron { width: 36px; height: 36px; border: 1.5px solid var(--divider-strong); border-radius: 50%; position: relative; flex: none; transition: border-color 0.25s var(--ease); }
.solacc__chevron::before, .solacc__chevron::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--text-primary); transform: translate(-50%,-50%); transition: transform 0.3s var(--ease), background 0.25s var(--ease); }
.solacc__chevron::before { width: 13px; height: 2px; }
.solacc__chevron::after { width: 2px; height: 13px; }
.solacc__item.is-open .solacc__chevron { border-color: var(--accent); }
.solacc__item.is-open .solacc__chevron::before,
.solacc__item.is-open .solacc__chevron::after { background: var(--accent); }
.solacc__item.is-open .solacc__chevron::after { transform: translate(-50%,-50%) scaleY(0); }

/* Body: sanftes Aufklappen */
.solacc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s var(--ease); }
.solacc__item.is-open .solacc__body { grid-template-rows: 1fr; }
.solacc__inner { overflow: hidden; padding-left: calc(clamp(64px, 8vw, 84px) + clamp(1rem, 2.5vw, 1.5rem)); }
.solacc__item.is-open .solacc__inner { padding-bottom: clamp(1.75rem, 3.5vw, 2.5rem); }
.solacc__stmt { font-size: clamp(1.1rem, 2vw, 1.5rem); font-weight: 700; line-height: 1.18; margin-bottom: 0.5rem; }
.solacc__intro { color: var(--text-secondary); max-width: var(--measure); }
.solacc__block { margin-top: clamp(1.1rem, 2.4vw, 1.6rem); padding-top: clamp(1.1rem, 2.4vw, 1.6rem); border-top: 1px solid var(--divider); max-width: var(--measure); }
.solacc__k { display: block; font-size: 1rem; font-weight: 700; letter-spacing: 0; text-transform: none; color: var(--text-primary); margin-bottom: 0.4rem; }
.solacc__k .text-accent { color: var(--accent); }
.solacc__block p { color: var(--text-secondary); margin: 0; }
.solacc__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }

/* Meeting-Docs: Logo-Karte als Backlink */
.mdocs-btn {
  display: inline-flex;
  align-items: stretch;
  border-radius: 18px;
  overflow: hidden;
  text-decoration: none;
  border: 1px solid var(--divider-strong);
  background: rgba(255, 255, 255, 0.04);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease), transform 0.25s var(--ease);
}
.mdocs-btn__logo {
  width: clamp(92px, 10vw, 118px);
  object-fit: cover;
  flex: none;
  align-self: stretch;
  height: auto;
}
.mdocs-btn__txt {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.15rem;
  padding: 1.35rem clamp(1.6rem, 3.5vw, 2.4rem);
}
.mdocs-btn__main {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--text-primary);
}
.mdocs-btn:hover {
  border-color: var(--accent);
  background: rgba(255, 255, 255, 0.07);
  transform: translateY(-3px);
}
.mdocs-btn .btn__arrow { display: inline-block; transition: transform 0.25s var(--ease); }
.mdocs-btn:hover .btn__arrow { transform: translateX(4px); }

@media (max-width: 560px) {
  .solacc__inner { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .solacc__body { transition: none; }
}

/* --------------------------------------------------------------------------
   Leistungs-Unterseiten
   -------------------------------------------------------------------------- */
.page-leistung { background: var(--background-light); }
/* Auf Unterseiten steht die Kopfzeile fix sichtbar, nicht erst beim Scrollen */
.header--static { position: sticky; transform: none; }

.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(15, 32, 56, 0.5);
  margin-bottom: clamp(1.75rem, 4vw, 2.75rem);
}
.crumbs a { color: inherit; text-decoration: none; }
.crumbs a:hover { color: var(--accent); }
.crumbs [aria-current] { color: var(--intensa-navy); }

.lp-hero {
  background: var(--background-light);
  color: var(--intensa-navy);
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.lp-hero__head {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  margin-bottom: clamp(1.5rem, 3.5vw, 2.25rem);
}
.lp-hero__tile {
  width: clamp(64px, 8vw, 88px);
  height: clamp(64px, 8vw, 88px);
  border-radius: 16px;
  background: rgba(15, 32, 56, 0.04);
  border: 1px solid rgba(15, 32, 56, 0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  overflow: hidden;
}
.lp-hero__tile img { width: 70%; height: 70%; object-fit: contain; filter: invert(1) brightness(0.35); }
.lp-hero__tile--logo { background: none; border-color: transparent; }
.lp-hero__tile--logo img { width: 100%; height: 100%; object-fit: cover; filter: none; border-radius: 15px; }
.lp-hero .eyebrow { color: rgba(15, 32, 56, 0.45); margin-bottom: 0.35rem; }
.lp-hero__h {
  font-size: clamp(1.9rem, 4.6vw, 3.1rem);
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.015em;
}
.lp-hero__sub { display: inline-block; font-size: 0.5em; color: rgba(15, 32, 56, 0.5); }
.lp-hero__stmt {
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
  font-weight: 700;
  line-height: 1.2;
  max-width: 24ch;
  margin-bottom: 0.75rem;
}
.lp-hero__lead { color: rgba(15, 32, 56, 0.7); max-width: var(--measure); font-size: 1.05rem; }
.lp-hero__pain {
  margin-top: 1.25rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: rgba(15, 32, 56, 0.5);
  border-left: 3px solid var(--accent);
  padding-left: 0.85rem;
}
.lp-hero__cta { margin-top: clamp(1.75rem, 4vw, 2.5rem); }

/* Textkoerper: eine ruhige Lesespalte statt Label-Spalte */
.lp-body { max-width: 46rem; margin-inline: auto; }

.lp-block { padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--divider); }
.lp-block:first-child { border-top: 0; padding-top: 0; }
.lp-block__h {
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 0.9rem;
  color: var(--text-primary);
}
.lp-block__p {
  color: var(--text-secondary);
  font-size: clamp(1.02rem, 1.6vw, 1.12rem);
  line-height: 1.65;
}
.lp-block--result {
  border-top: 0;
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.04);
  border-left: 3px solid var(--accent);
}
.lp-block--result .lp-block__h { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); margin-bottom: 0.6rem; }
.lp-block--result .lp-block__p {
  color: var(--text-primary);
  font-size: clamp(1.2rem, 2.2vw, 1.5rem);
  font-weight: 700;
  line-height: 1.3;
}

.lp-list {
  list-style: none;
  margin-top: 1.25rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.6rem;
}
.lp-list li {
  padding: 0.75rem 1rem;
  border: 1px solid var(--divider);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.92rem;
}

.lp-steps { list-style: none; margin-top: 1.5rem; display: flex; flex-direction: column; gap: 1.6rem; }
.lp-step { display: grid; grid-template-columns: 2.4rem 1fr; gap: 1rem; align-items: start; }
.lp-step__num { font-size: 1.05rem; font-weight: 800; color: var(--accent); line-height: 1.7; }
.lp-step__h { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.3rem; }
.lp-step__p { color: var(--text-secondary); line-height: 1.6; }

.lp-kpis { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; margin-top: 1.25rem; }
.lp-kpis li { position: relative; padding-left: 1.6rem; color: var(--text-primary); }
.lp-kpis li::before {
  content: ""; position: absolute; left: 0; top: 0.6em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

.lp-quote {
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2rem) 0 0;
  border-top: 1px solid var(--divider);
}
.lp-quote blockquote {
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}
.lp-quote figcaption { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.lp-quote figcaption strong { color: var(--text-primary); }

.lp-source { margin-top: 2rem; font-size: 0.78rem; color: var(--text-secondary); opacity: 0.7; }

@media (max-width: 620px) {
  .lp-hero__head { gap: 0.9rem; }
  .lp-step { grid-template-columns: 2rem 1fr; gap: 0.75rem; }
}

/* "Mehr erfahren" im Loesungs-Akkordeon */
.solacc__more { margin-top: clamp(1.5rem, 3vw, 2rem); }
.solacc__more + .solacc__cta { margin-top: 1rem; display: flex; }


/* Breite Partnerlogos vollstaendig zeigen statt beschneiden */
.mdocs-btn__logo--contain {
  object-fit: contain;
  background: #fff;
  padding: 0.55rem;
  width: clamp(104px, 11vw, 132px);
}

/* Partner-Button im Hero der Leistungsseiten */
.lp-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; }
.mdocs-btn--sm { border-radius: 999px; align-items: center; padding-left: 0.4rem; }
/* Logo als eingeruecktes Plaettchen: wird nicht auf Pillenhoehe gestreckt
   und kann deshalb an der Rundung nicht abgeschnitten werden */
.mdocs-btn--sm .mdocs-btn__logo {
  align-self: center;
  height: 44px;
  width: auto;
  max-width: 96px;
  object-fit: contain;
  border-radius: 999px;
  padding: 0;
}
.mdocs-btn--sm .mdocs-btn__logo--contain {
  height: 38px;
  border-radius: 8px;
  padding: 0.25rem 0.4rem;
  background: #fff;
}
.mdocs-btn--sm .mdocs-btn__txt { padding: 0.7rem 1.3rem; }
.mdocs-btn--sm .mdocs-btn__main { font-size: 0.95rem; }
.page-leistung .mdocs-btn {
  border-color: rgba(15, 32, 56, 0.22);
  background: rgba(255, 255, 255, 0.5);
}
.page-leistung .mdocs-btn__main { color: var(--intensa-navy); }
.page-leistung .mdocs-btn:hover { border-color: var(--accent); background: #fff; }

/* --------------------------------------------------------------------------
   Navigation: Dropdown "Lösungen"
   -------------------------------------------------------------------------- */
.nav__item--menu { position: relative; display: flex; align-items: center; gap: 0.3rem; }
.nav__caret {
  width: 22px; height: 22px; padding: 0;
  border: 0; background: none; cursor: pointer;
  display: grid; place-items: center;
  color: var(--text-primary);
}
.nav__caret span {
  width: 7px; height: 7px; display: block;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.nav__item--menu.is-open .nav__caret span { transform: translateY(1px) rotate(-135deg); }
.nav__caret:hover, .nav__item--menu.is-open .nav__caret { color: var(--accent); }

.nav__menu {
  position: absolute;
  top: calc(100% + 0.85rem);
  left: -0.9rem;
  min-width: 17rem;
  list-style: none;
  padding: 0.5rem;
  border-radius: 14px;
  background: var(--intensa-navy-deep);
  border: 1px solid var(--divider);
  box-shadow: 0 22px 44px -20px rgba(0, 0, 0, 0.75);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  /* visibility ist eine diskrete Eigenschaft: mit Dauer springt sie erst
     zur Haelfte des Uebergangs um - das Menue erschiene spuerbar verzoegert.
     Deshalb ohne Dauer, beim Schliessen erst nach dem Ausblenden. */
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease), visibility 0s linear 0.16s;
}
.nav__item--menu:hover .nav__menu,
.nav__item--menu:focus-within .nav__menu,
.nav__item--menu.is-open .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;   /* beim Oeffnen sofort sichtbar */
}
.nav__sublink {
  display: block;
  padding: 0.65rem 0.85rem;
  border-radius: 9px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-primary);
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.nav__sublink:hover, .nav__sublink:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
}

@media (max-width: 860px) {
  /* Im mobilen Menü klappt das Untermenü in der Liste auf */
  /* .nav__list li ist mobil display:block -> hier wieder auf flex setzen */
  .nav__list li.nav__item--menu { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
  .nav__item--menu .nav__link { width: auto; flex: 1; border-bottom: 0; }
  .nav__list li.nav__item--menu { border-bottom: 1px solid var(--divider); }
  .nav__caret { width: 44px; height: 44px; }
  .nav__menu {
    position: static;
    width: 100%;
    min-width: 0;
    padding: 0 0 0.75rem 0.9rem;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__item--menu:hover .nav__menu,
  .nav__item--menu:focus-within .nav__menu { display: none; }
  .nav__item--menu.is-open .nav__menu { display: block; }
  .nav__sublink { padding: 0.7rem 0.5rem; font-size: 1rem; color: var(--text-secondary); }
}

/* --------------------------------------------------------------------------
   Mobil: Schrift ausserhalb von Hero und Navigation etwas kleiner
   (Hero-Logo, Claim, Hero-Zeilen und die Kopfzeile bleiben unveraendert)
   -------------------------------------------------------------------------- */
@media (max-width: 620px) {
  /* Abschnittsueberschriften */
  .section-title { font-size: 1.85rem; }
  .eyebrow { font-size: 0.72rem; }
  .lead { font-size: 0.98rem; }

  /* Pain Points */
  .pain-row__text { font-size: 0.98rem; }
  .pain-row__sol { font-size: 0.82rem; }

  /* Loesungs-Akkordeon */
  .solacc__title { font-size: 1.05rem; }
  .solacc__num { font-size: 0.72rem; }
  .solacc__stmt { font-size: 1rem; }
  .solacc__intro,
  .solacc__block p { font-size: 0.94rem; }
  .solacc__k { font-size: 0.92rem; }

  /* Kundenstimmen */
  .tstm__quote { font-size: 1.2rem; }
  .tstm__text { font-size: 0.94rem; }
  .tstm__name { font-size: 0.98rem; }
  .tstm__role { font-size: 0.86rem; }

  /* Leistungs-Unterseiten (Hero dort bleibt gross) */
  .lp-block__h { font-size: 1.15rem; }
  .lp-block__p { font-size: 0.96rem; }
  .lp-block--result .lp-block__p { font-size: 1.1rem; }
  .lp-list li { font-size: 0.86rem; }
  .lp-step__h { font-size: 1rem; }
  .lp-step__p,
  .lp-kpis li { font-size: 0.94rem; }
  .lp-quote blockquote { font-size: 1.05rem; }
  .lp-quote figcaption { font-size: 0.85rem; }
  .crumbs { font-size: 0.76rem; }

  /* Kontakt und Fussbereich */
  .booking__hint,
  .footer__mail,
  .footer__meta { font-size: 0.9rem; }
}

/* Kundenstimmen: laengere Referenz bei Bedarf aufklappen
   (<details> - funktioniert auch ohne JavaScript) */
.tstm__more,
.crew__more { margin-top: 0.9rem; }
.tstm__more > summary,
.crew__more > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--accent);
  list-style: none;
  transition: gap 0.2s var(--ease);
}
.tstm__more > summary::-webkit-details-marker,
.crew__more > summary::-webkit-details-marker { display: none; }
.tstm__more > summary::marker,
.crew__more > summary::marker { content: ""; }
.tstm__more > summary:hover,
.crew__more > summary:hover { gap: 0.7rem; }
.tstm__more > summary:focus-visible,
.crew__more > summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.tstm__more-chevron,
.crew__more-chevron {
  width: 7px; height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s var(--ease);
}
.tstm__more[open] .tstm__more-chevron,
.crew__more[open] .crew__more-chevron { transform: translateY(1px) rotate(-135deg); }

/* Beschriftung wechselt je nach Zustand */
.tstm__more-close,
.crew__more-close { display: none; }
.tstm__more[open] .tstm__more-open,
.crew__more[open] .crew__more-open { display: none; }
.tstm__more[open] .tstm__more-close,
.crew__more[open] .crew__more-close { display: inline; }

.tstm__more-body,
.crew__more-body { margin-top: 0.9rem; }
.tstm__more-body p,
.crew__more-body p { margin: 0 0 0.8rem; }
.tstm__more-body p:last-child,
.crew__more-body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   Über uns: Besatzung am Horizont
   -------------------------------------------------------------------------- */
.crew { position: relative; }
/* durchgehende Linie, auf der die Portraits stehen */
.crew__line {
  position: absolute;
  left: 0; right: 0; top: 58%;
  height: 1px;
  background: var(--divider-strong);
}
.crew__grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}
.crew__img {
  width: 100%;
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: 18px 18px 0 0;
  display: block;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.35s var(--ease), transform 0.35s var(--ease);
}
.crew__p:hover .crew__img { filter: none; transform: translateY(-6px); }
/* jede zweite Person sitzt hoeher -> versetzte Reihe */
.crew__p--shift { transform: translateY(-2.5rem); }
.crew__cap { padding-top: 1rem; border-top: 2px solid var(--accent); }
.crew__name {
  font-weight: 800;
  font-size: 1.15rem;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.crew__role { color: var(--text-secondary); font-size: 0.88rem; margin-top: 0.2rem; }
.crew__bio { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; margin-top: 0.7rem; }

/* Platzhalter, solange Texte und Fotos fehlen -> faellt beim Durchsehen auf */
.ph-text { color: rgba(255, 255, 255, 0.4); font-style: italic; }
.lp-hero .ph-text { color: rgba(15, 32, 56, 0.4); }
.ph-photo {
  background: repeating-linear-gradient(45deg, #1b2a44, #1b2a44 10px, #16243a 10px, #16243a 20px);
  border: 1px dashed var(--divider-strong);
  border-bottom: 0;
}

@media (max-width: 820px) {
  .crew__p--shift { transform: none; }
  .crew__line { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .crew__img { transition: none; }
  .crew__p:hover .crew__img { transform: none; }
}

/* Team-Karten: Aufklapper und Themenliste */
.crew__more > summary { font-size: 0.85rem; }
.crew__more-body { color: var(--text-secondary); font-size: 0.9rem; line-height: 1.55; }
.crew__list { list-style: none; margin-top: 0.6rem; display: flex; flex-direction: column; gap: 0.35rem; }
.crew__list li { position: relative; padding-left: 1.1rem; }
.crew__list li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
}

/* Einleitung auf der Über-uns-Seite darf breiter laufen */
.lp-hero__stmt--wide { max-width: 40ch; }

/* Footer: Anschrift und Telefon */
.footer__details {
  margin-top: 0.85rem;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 0.5rem 2.5rem;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
}
.footer__address { font-style: normal; }
.footer__tel { color: var(--text-secondary); font-weight: 700; transition: color 0.2s var(--ease); }
.footer__tel:hover { color: var(--accent); }

/* Footer: rechtliche Links neben dem Copyright */
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 2rem; }
.footer__legal { display: flex; gap: 1.5rem; }
.footer__legal a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s var(--ease); }
.footer__legal a:hover, .footer__legal a[aria-current="page"] { color: var(--accent); }

/* --------------------------------------------------------------------------
   Rechtliche Seiten (Impressum, Datenschutz): ruhiger Lesetext auf Creme
   -------------------------------------------------------------------------- */
.legal { background: var(--background-light); color: var(--intensa-navy); padding-top: 0; }
/* Breite ueber die Kinder begrenzen, damit der Text buendig unter der Ueberschrift beginnt */
.legal__body > * { max-width: 46rem; }
.legal__intro { font-size: 1.05rem; line-height: 1.65; color: rgba(15, 32, 56, 0.8); margin-bottom: 2rem; }
.legal__block { padding-block: 1.5rem; border-top: 1px solid rgba(15, 32, 56, 0.12); }
.legal__block h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 0.6rem; }
.legal__block p { line-height: 1.65; color: rgba(15, 32, 56, 0.82); margin-bottom: 0.75rem; }
.legal__block p:last-child { margin-bottom: 0; }
.legal__block a { color: var(--intensa-navy); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.legal__block a:hover { color: var(--accent); }
.legal__dl { display: grid; grid-template-columns: max-content 1fr; gap: 0.45rem 1.75rem; }
.legal__dl dt { font-weight: 700; color: var(--intensa-navy); }
.legal__dl dd { margin: 0; color: rgba(15, 32, 56, 0.82); line-height: 1.55; }
.legal__stand { margin-top: 1.5rem; font-size: 0.85rem; color: rgba(15, 32, 56, 0.5); }
/* noch fehlende Firmendaten: auffaellig, damit nichts unbemerkt live geht */
.legal__open { color: var(--accent); font-weight: 700; font-style: italic; }
@media (max-width: 620px) {
  .legal__dl { grid-template-columns: 1fr; gap: 0.1rem; }
  .legal__dl dd { margin-bottom: 0.6rem; }
}


/* --------------------------------------------------------------------------
   Mobil-Feinschliff: lange Woerter und schmale Geraete (bis 320px)
   -------------------------------------------------------------------------- */
.lp-hero__head > div { min-width: 0; }
/* Nur als Notanker fuer ueberlange Woerter, bewusst ohne automatische Silbentrennung */
.lp-hero__h, .lp-hero__stmt, .solacc__title, .crew__name, .tstm__quote {
  overflow-wrap: break-word;
}
@media (max-width: 520px) {
  /* Kachel ueber den Titel stellen: so bekommt auch "POTENZIALANALYSE" die volle Breite */
  .lp-hero__head { flex-direction: column; align-items: flex-start; gap: 0.9rem; }
  .lp-hero__h { font-size: clamp(1.3rem, 6.4vw, 1.9rem); }
  .lp-hero__stmt { font-size: 1.12rem; }   /* bleibt kleiner als die Seitenueberschrift */
  .lp-hero__sub { display: block; margin-top: 0.15rem; }
  .solacc__tile { width: 52px; height: 52px; }
  .solacc__chevron { width: 32px; height: 32px; }
}
@media (max-width: 360px) {
  /* Nummer entfaellt, Titel braucht den Platz. Raster mit anpassen, sonst rutscht
     der Titel in eine "auto"-Spalte, die nie umbricht. */
  .solacc__num { display: none; }
  .solacc__head { grid-template-columns: auto minmax(0, 1fr) auto; }
}

@media (max-width: 400px) {
  /* lange Woerter wie "Entwicklungsmassnahmen" passen sonst nicht in den Ergebnis-Kasten */
  .lp-block--result { padding: 1.4rem 1.2rem; }
  .lp-block--result .lp-block__p { -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; }
  .booking__card { padding: 1.6rem 1.15rem; }
  .booking__cta { font-size: 0.95rem; padding-inline: 1.2rem; white-space: nowrap; }
}