/* ==========================================================================
   polswi-partners  ·  Design-System
   Farben aus dem Logo abgeleitet: Dunkelblau der Bruecke, Rot der Flaggen.
   ========================================================================== */

/* --- Schriften, lokal gehostet (keine externen Server, DSGVO-konform) --- */
@font-face {
  font-family: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-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: 'Spectral';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/spectral-400-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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/spectral-600-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: 'Spectral';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/spectral-600-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: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spectral-700-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: 'Spectral';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/spectral-700-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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-var-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: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/karla-var-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;
}

/* --- Farben und Grundwerte --- */
:root {
  --brand:        #14294f;   /* Dunkelblau aus dem Logo */
  --brand-deep:   #0a1730;   /* dunkler, fuer Fusszeile und Bildschleier */
  --brand-soft:   #e8ecf3;   /* sehr helles Blau fuer Flaechen */
  --red:          #c01f26;   /* Rot der beiden Flaggen */
  --paper:        #f7f5f1;   /* warmes Off-White, Seitenhintergrund */
  --white:        #ffffff;
  --line:         #dcd7ce;   /* Haarlinien */
  --muted:        #5b6577;   /* Nebentext */

  --font-head: 'Spectral', Georgia, 'Times New Roman', serif;
  --font-body: 'Karla', 'Helvetica Neue', Helvetica, Arial, sans-serif;

  --wrap: 1140px;
  --pad: 24px;
  --radius: 3px;
  --shadow: 0 1px 2px rgba(10, 23, 48, .05), 0 8px 24px rgba(10, 23, 48, .06);
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--brand-deep);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 600;
  color: var(--brand);
  line-height: 1.18;
  margin: 0 0 .5em;
  letter-spacing: -.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.35rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); }
h3 { font-size: 1.2rem; line-height: 1.35; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red); }

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

::selection { background: var(--brand); color: var(--white); }

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

/* Sprunglink fuer Tastatur und Screenreader */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--brand);
  color: var(--white);
  padding: 12px 20px;
  font-weight: 600;
}
.skip-link:focus { left: 8px; top: 8px; color: var(--white); }

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

.wrap--narrow { max-width: 780px; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  transition: background .3s var(--ease), border-color .3s var(--ease),
              padding .3s var(--ease);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 14px;
  transition: padding .3s var(--ease);
}

/* Logo */
.logo { display: block; flex: 0 0 auto; line-height: 0; }
.logo img {
  width: 240px;
  height: auto;
  transition: width .3s var(--ease);
}
.logo .logo--light { display: none; }

/* Ueber dem Kopfbild: transparente Kopfzeile, helles Logo */
.site-header--overlay {
  background: transparent;
  border-bottom-color: transparent;
  position: absolute;
  left: 0;
  right: 0;
}
.site-header--overlay .logo .logo--dark { display: none; }
.site-header--overlay .logo .logo--light { display: block; }
.site-header--overlay .nav__link { color: rgba(255, 255, 255, .92); }
.site-header--overlay .nav__link:hover,
.site-header--overlay .nav__link[aria-current='page'] { color: var(--white); }
.site-header--overlay .nav__link::after { background: var(--white); }
.site-header--overlay .nav-toggle__bar { background: var(--white); }

/* Nach dem Scrollen wird die Kopfzeile wieder fest */
.site-header.is-stuck {
  position: fixed;
  background: rgba(247, 245, 241, .96);
  backdrop-filter: blur(8px);
  border-bottom-color: var(--line);
  animation: dropIn .32s var(--ease);
}
.site-header.is-stuck .logo .logo--dark { display: block; }
.site-header.is-stuck .logo .logo--light { display: none; }
.site-header.is-stuck .logo img { width: 186px; }
.site-header.is-stuck .site-header__inner { padding-block: 9px; }
.site-header.is-stuck .nav__link { color: var(--brand); }
.site-header.is-stuck .nav-toggle__bar { background: var(--brand); }

@keyframes dropIn {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

/* Navigation */
.nav ul {
  display: flex;
  align-items: center;
  gap: 22px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav__link {
  position: relative;
  /* laengere Beschriftungen sollen nicht mitten im Wort umbrechen */
  white-space: nowrap;
  font-size: .95rem;
  font-weight: 500;
  letter-spacing: .02em;
  color: var(--brand);
  text-decoration: none;
  padding-block: 6px;
  transition: color .2s var(--ease);
}
.nav__link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav__link:hover::after,
.nav__link[aria-current='page']::after { transform: scaleX(1); }
.nav__link[aria-current='page'] { font-weight: 700; }

.nav__cta {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  background: var(--red);
  color: var(--white);
  padding: 10px 20px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: .93rem;
  text-decoration: none;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.nav__cta:hover {
  background: #a5171e;
  color: var(--white);
  transform: translateY(-1px);
}
.nav__cta::after { display: none; }

/* Sprachumschalter, letzter Eintrag in der Navigation */
.nav__sprachen {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 4px;
}
.nav__sprache {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--muted);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.nav__sprache:hover { color: var(--red); }
.nav__sprache.is-aktiv { color: var(--brand); }
.nav__sprachen span {
  color: var(--line);
  font-size: .8rem;
}
.site-header--overlay .nav__sprache { color: rgba(255, 255, 255, .6); }
.site-header--overlay .nav__sprache.is-aktiv { color: var(--white); }
.site-header--overlay .nav__sprachen span { color: rgba(255, 255, 255, .35); }
.site-header.is-stuck .nav__sprache { color: var(--muted); }
.site-header.is-stuck .nav__sprache.is-aktiv { color: var(--brand); }
.site-header.is-stuck .nav__sprachen span { color: var(--line); }

/* Menue-Schalter, nur auf schmalen Bildschirmen sichtbar */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 11px 9px;
  flex-direction: column;
  justify-content: space-between;
}
.nav-toggle__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--brand);
  transition: transform .3s var(--ease), opacity .2s var(--ease);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded='true'] .nav-toggle__bar:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* ==========================================================================
   Kopfbereich mit Bild
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* nach oben begrenzt, damit auf hohen Bildschirmen kein leeres Feld entsteht */
  min-height: clamp(500px, 76vh, 740px);
  padding-top: 150px;
  padding-bottom: 68px;
  overflow: hidden;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-color: var(--brand);
  background-image: url('../img/hero.jpg?v=4');
  background-size: cover;
  background-position: 50% 42%;
}

/* Schleier, damit weisse Schrift lesbar bleibt.
   Zurueckhaltend gehalten, weil das Foto selbst schon dunkel ist.
   Zusaetzlich von links nach rechts, dort steht der Text. */
.hero__media::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right,
      rgba(10, 23, 48, .55) 0%,
      rgba(10, 23, 48, .22) 52%,
      rgba(10, 23, 48, 0) 78%),
    linear-gradient(to bottom,
      rgba(10, 23, 48, .42) 0%,
      rgba(10, 23, 48, .1) 38%,
      rgba(10, 23, 48, .55) 100%);
}

.hero__content { position: relative; max-width: 720px; color: var(--white); }

.hero h1 {
  color: var(--white);
  margin-bottom: .38em;
  text-shadow: 0 2px 24px rgba(10, 23, 48, .45);
}

.hero__lead {
  font-size: clamp(1.05rem, 1.9vw, 1.28rem);
  line-height: 1.6;
  color: rgba(255, 255, 255, .93);
  max-width: 55ch;
  margin-bottom: 2rem;
  text-shadow: 0 1px 14px rgba(10, 23, 48, .5);
}

.hero__kicker {
  display: inline-block;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
  margin-bottom: 1.1rem;
  padding-bottom: .55rem;
  border-bottom: 2px solid var(--red);
}

/* Schmalere Variante fuer die Unterseiten */
.page-head {
  position: relative;
  background: var(--brand);
  color: var(--white);
  padding-block: 62px 56px;
  overflow: hidden;
  isolation: isolate;
}
/* Foto als ruhiger Hintergrund: kraeftiger Farbschleier darueber, links
   staerker als rechts, damit die Schrift sauber steht und das Motiv nur
   noch durchschimmert. */
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(100deg,
      rgba(20, 41, 79, .96) 0%,
      rgba(20, 41, 79, .88) 46%,
      rgba(20, 41, 79, .74) 100%),
    url('../img/hero.jpg?v=4') 50% 44% / cover no-repeat;
}
.page-head::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 96px;
  height: 3px;
  background: var(--red);
  margin-left: max(var(--pad), calc((100% - var(--wrap)) / 2 + var(--pad)));
}
.page-head h1 { color: var(--white); margin-bottom: .3em; }
.page-head__lead {
  font-size: 1.1rem;
  color: rgba(255, 255, 255, .9);
  max-width: 58ch;
  margin: 0;
}

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 14px 30px;
  border: 0;
  border-radius: var(--radius);
  background: var(--red);
  color: var(--white);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s var(--ease), transform .22s var(--ease),
              box-shadow .22s var(--ease);
}
.btn:hover {
  background: #a5171e;
  color: var(--white);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(192, 31, 38, .26);
}
.btn:active { transform: translateY(0); }

.btn--ghost {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, .5);
}
.btn--ghost:hover {
  background: rgba(255, 255, 255, .1);
  border-color: var(--white);
  box-shadow: none;
}

/* Textlink mit wanderndem Pfeil */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: .97rem;
  color: var(--brand);
  text-decoration: none;
  border-bottom: 1px solid rgba(20, 41, 79, .28);
  padding-bottom: 2px;
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.arrow-link svg { transition: transform .28s var(--ease); flex: 0 0 auto; }
.arrow-link:hover { color: var(--red); border-color: var(--red); }
.arrow-link:hover svg { transform: translateX(5px); }

/* Auf Tastbildschirmen ist der Verweis mit 29 Pixeln Hoehe zu flach, um ihn
   mit dem Finger sicher zu treffen. Diese unsichtbare Flaeche vergroessert
   das Ziel auf 44 Pixel. Am Aussehen und an den Abstaenden aendert sich
   nichts, weil sie aus dem Textfluss herausgeloest ist. */
@media (hover: none), (max-width: 780px) {
  .arrow-link { position: relative; }
  .arrow-link::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
  }
}

/* ==========================================================================
   Abschnitte
   ========================================================================== */
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--tint { background: var(--white); }
.section--brand { background: var(--brand); color: rgba(255, 255, 255, .88); }
.section--brand h2, .section--brand h3 { color: var(--white); }

.section__head { max-width: 640px; margin-bottom: 48px; }
.section__head p { color: var(--muted); font-size: 1.08rem; margin-bottom: 0; }
.section--brand .section__head p { color: rgba(255, 255, 255, .82); }

.eyebrow {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 14px;
}
.section--brand .eyebrow,
.page-head .eyebrow { color: #ff8f95; }

/* Zwei Beratungsfelder auf der Startseite */
.fields {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
}

.field {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 38px 34px 34px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.field::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.field:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.field:hover::before { transform: scaleX(1); }

.field__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 22px;
  color: var(--brand);
}
.field h3,
.field h2 { font-size: 1.42rem; margin-bottom: .5em; }
.field p { color: var(--muted); }
.field ul {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}
.field li {
  position: relative;
  padding-left: 22px;
  margin-bottom: 8px;
  font-size: .97rem;
  color: var(--brand-deep);
}
.field li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--red);
  opacity: .55;
}
.field .arrow-link { margin-top: auto; align-self: flex-start; }

/* Drei Vertrauensargumente */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
}
.pillar { padding-top: 26px; border-top: 2px solid rgba(255, 255, 255, .22); }
.pillar__num {
  display: block;
  font-family: var(--font-head);
  font-size: 1rem;
  color: #ff8f95;
  margin-bottom: 12px;
}
.pillar h3 { font-size: 1.16rem; margin-bottom: .45em; }
.pillar p { font-size: .98rem; margin-bottom: 0; }

/* Leistungs-Bloecke auf den Unterseiten */
.service {
  display: grid;
  grid-template-columns: 1fr 1.35fr;
  gap: 52px;
  align-items: start;
  padding-block: clamp(44px, 5vw, 62px);
  border-top: 1px solid var(--line);
}
.service:first-of-type { border-top: 0; padding-top: 0; }

.service__label { position: sticky; top: 118px; }
.service__num {
  display: block;
  font-family: var(--font-head);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--red);
  margin-bottom: 10px;
}
.service h2 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 0; }
.service__body p { color: var(--muted); }
.service__body > p:first-child {
  color: var(--brand-deep);
  font-size: 1.1rem;
}

.checklist { list-style: none; margin: 22px 0 0; padding: 0; }
.checklist li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 11px;
  color: var(--brand-deep);
}
.checklist li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: .52em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--red);
  border-bottom: 2px solid var(--red);
  transform: rotate(-45deg);
}

/* Text plus Platzhalterbild */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.split__text h2 { margin-bottom: .6em; }
.split__text p { color: var(--muted); }

/* Echtes Bild neben einem Textblock */
.split__bild {
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}
/* Hochformat wird begrenzt, sonst erschlaegt es den Text daneben */
.split__bild--hoch { max-width: 360px; }

/* Platzhalter-Flaeche, bis echte Fotos da sind */
.ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--brand);
  background-image:
    radial-gradient(circle at 26% 22%, rgba(255, 255, 255, .09), transparent 55%),
    linear-gradient(148deg, #1b3563 0%, #14294f 46%, #0d1e3c 100%);
  border-radius: var(--radius);
  overflow: hidden;
  color: rgba(255, 255, 255, .82);
}
.ph::after {
  content: '';
  position: absolute;
  inset: 12px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 2px;
  pointer-events: none;
}
.ph svg { width: 76px; height: 76px; opacity: .8; }
.ph--4x3 { aspect-ratio: 4 / 3; }
.ph--3x2 { aspect-ratio: 3 / 2; }
.ph--1x1 { aspect-ratio: 1 / 1; }
/* Hochformat wird begrenzt, sonst erschlaegt es den Text daneben */
.ph--portrait { aspect-ratio: 3 / 4; max-width: 360px; width: 100%; }

/* Referenzen: Firmen, die begleitet wurden */
.refs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.ref {
  position: relative;
  /* waechst nicht, darf schrumpfen, Ausgangsbreite 255 px */
  flex: 0 1 255px;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 26px;
  transition: transform .3s var(--ease), box-shadow .3s var(--ease),
              border-color .3s var(--ease);
}
.ref::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.ref:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: transparent;
}
.ref:hover::before { transform: scaleX(1); }
.ref h3 { font-size: 1.24rem; margin-bottom: .35em; }
.ref p { font-size: .97rem; color: var(--muted); margin: 0; }

/* Logofeld: gleiche Hoehe fuer alle, damit die Reihe ruhig bleibt.
   Die Logos behalten ihre eigenen Farben, vereinheitlicht wird nur der
   Rahmen darum. */
.ref__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin-bottom: 20px;
  padding: 12px;
  background: var(--paper);
  border-radius: 2px;
}
.ref__logo img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  object-fit: contain;
}
/* Logo mit Verweis: der Verweis fuellt das ganze Feld, damit er sich auch
   mit dem Finger sicher treffen laesst. Beim Darueberfahren hebt sich das
   Logo minim, das genuegt als Hinweis, dass hier etwas anklickbar ist. */
.ref__logo a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 2px;
}
.ref__logo a img { transition: transform .3s var(--ease); }
.ref:hover .ref__logo a img { transform: scale(1.04); }
.ref__logo a:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .ref__logo a img { transition: none; }
  .ref:hover .ref__logo a img { transform: none; }
}
/* Firmen ohne Logo: der Name in der Hausschrift statt eines Bildes */
.ref__logo--text {
  font-family: var(--font-head);
  font-size: 1.06rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--brand);
  text-align: center;
}

/* Ablauf in Schritten */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 24px;
  border-top: 2px solid var(--line);
  counter-increment: step;
  transition: border-color .3s var(--ease);
}
.step:hover { border-top-color: var(--red); }
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-head);
  font-size: .92rem;
  font-weight: 600;
  letter-spacing: .1em;
  color: var(--red);
  margin-bottom: 10px;
}
.step h3 { font-size: 1.1rem; margin-bottom: .4em; }
.step p { font-size: .97rem; color: var(--muted); margin-bottom: 0; }

/* Haeufige Fragen */
.faq { border-top: 1px solid var(--line); }
.faq details {
  border-bottom: 1px solid var(--line);
  padding: 4px 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--brand);
  list-style: none;
  transition: color .2s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--red); }
.faq summary::after {
  content: '';
  flex: 0 0 auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .28s var(--ease);
}
.faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
}
.faq details p {
  padding-bottom: 22px;
  margin: 0;
  color: var(--muted);
  max-width: 68ch;
}

/* Abschliessender Aufruf */
.cta-band {
  background: var(--brand);
  color: var(--white);
  padding-block: clamp(56px, 7vw, 84px);
  position: relative;
  overflow: hidden;
  /* feine Trennlinie, falls davor schon ein dunkler Abschnitt steht */
  border-top: 1px solid rgba(255, 255, 255, .13);
}
.cta-band::before {
  content: '';
  position: absolute;
  top: -60%;
  right: -8%;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 50%;
}
.cta-band__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.cta-band h2 { color: var(--white); margin-bottom: .35em; }
.cta-band p {
  color: rgba(255, 255, 255, .85);
  max-width: 46ch;
  margin-bottom: 0;
}

/* ==========================================================================
   Kontaktformular
   ========================================================================== */
.contact-grid {
  display: grid;
  grid-template-columns: 1.25fr .85fr;
  gap: 64px;
  align-items: start;
}

.form-row { margin-bottom: 22px; }
.form-row label {
  display: block;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--brand);
  margin-bottom: 7px;
}
.form-row .req { color: var(--red); }
.form-row .optional { font-weight: 400; color: var(--muted); }

/* Rechtstexte: Zeile mit dem Bearbeitungsstand */
.legal__stand {
  margin-top: 2.5em;
  color: var(--muted);
  font-size: .92rem;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 13px 15px;
  font-family: var(--font-body);
  font-size: 1rem;
  color: var(--brand-deep);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.form-row textarea { min-height: 158px; resize: vertical; }
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(20, 41, 79, .12);
}
.form-row input::placeholder,
.form-row textarea::placeholder { color: #9aa2b1; }

/* Honigtopf: unsichtbares Feld, das nur Spam-Programme ausfuellen */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-consent {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 26px;
  font-size: .92rem;
  color: var(--muted);
  line-height: 1.55;
}
.form-consent input {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 2px;
  accent-color: var(--brand);
}
.form-consent label { font-weight: 400; margin: 0; font-size: .92rem; color: var(--muted); }

.form-note { font-size: .87rem; color: var(--muted); margin-top: 18px; }

.form-msg {
  padding: 16px 20px;
  border-radius: var(--radius);
  margin-bottom: 28px;
  font-size: .97rem;
  border-left: 3px solid;
}
.form-msg--ok {
  background: #edf4ee;
  border-color: #2f7d4f;
  color: #1c5233;
}
.form-msg--err {
  background: #fbeded;
  border-color: var(--red);
  color: #8d151b;
}

/* Kontaktdaten neben dem Formular */
.contact-aside {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 34px 30px;
}
.contact-aside h2 { font-size: 1.3rem; }
.contact-item {
  display: flex;
  gap: 15px;
  padding-block: 17px;
  border-top: 1px solid var(--line);
}
.contact-item:first-of-type { border-top: 0; padding-top: 6px; }
.contact-item svg {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  margin-top: 3px;
  color: var(--red);
}
.contact-item__label {
  display: block;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}
.contact-item a { text-decoration: none; font-weight: 600; }
.contact-item a:hover { text-decoration: underline; }

/* ==========================================================================
   Rechtstexte
   ========================================================================== */
.legal { padding-block: clamp(48px, 6vw, 76px); }
.legal h2 {
  font-size: 1.35rem;
  margin-top: 2.2em;
  padding-top: .8em;
  border-top: 1px solid var(--line);
}
.legal h2:first-of-type { margin-top: 1em; }
.legal h3 { font-size: 1.05rem; margin-top: 1.7em; }
.legal p, .legal li { color: #37415a; }
.legal ul { padding-left: 20px; }
.legal li { margin-bottom: .5em; }

.legal-hint {
  background: var(--brand-soft);
  border-left: 3px solid var(--brand);
  padding: 20px 24px;
  border-radius: var(--radius);
  font-size: .95rem;
  margin-bottom: 34px;
}
.legal-hint strong { color: var(--brand); }

/* ==========================================================================
   Fusszeile
   ========================================================================== */
.site-footer {
  background: var(--brand-deep);
  color: rgba(255, 255, 255, .68);
  padding-block: 60px 30px;
  font-size: .93rem;
}
.site-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 46px;
  padding-bottom: 42px;
}
.site-footer img { width: 216px; margin-bottom: 20px; }
.site-footer h3 {
  font-family: var(--font-body);
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .55);
  margin-bottom: 16px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 10px; }
.site-footer a {
  color: rgba(255, 255, 255, .82);
  text-decoration: none;
  transition: color .2s var(--ease);
}
.site-footer a:hover { color: var(--white); text-decoration: underline; }
.site-footer p { margin-bottom: 10px; }

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: .86rem;
  color: rgba(255, 255, 255, .5);
}
.site-footer__bottom ul { display: flex; gap: 22px; }
.site-footer__bottom li { margin: 0; }

/* ==========================================================================
   Sanfter Auftritt beim Laden der Seite
   Reine CSS-Animation, laeuft also auch ohne JavaScript. Wer im Betriebssystem
   weniger Bewegung eingestellt hat, sieht die Seite sofort fertig (siehe unten).
   ========================================================================== */
@keyframes auftrittHoch {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes auftrittSanft {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes bildBeruhigen {
  from { transform: scale(1.055); }
  to   { transform: scale(1); }
}
@keyframes linieWachsen {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* Kopfzeile */
.logo    { animation: auftrittSanft .9s var(--ease) backwards; }
.nav ul  { animation: auftrittSanft .9s var(--ease) .12s backwards; }

/* Grosser Kopfbereich der Startseite */
.hero__media   { animation: bildBeruhigen 1.8s var(--ease) backwards; }
.hero__kicker  { animation: auftrittHoch .75s var(--ease) .12s backwards; }
.hero h1       { animation: auftrittHoch .85s var(--ease) .24s backwards; }
.hero__lead    { animation: auftrittHoch .85s var(--ease) .38s backwards; }
.hero .btn     { animation: auftrittHoch .85s var(--ease) .52s backwards; }

/* Schmaler Kopfbereich der Unterseiten, etwas zuegiger */
.page-head::before     { animation: bildBeruhigen 1.6s var(--ease) backwards; }
.page-head .eyebrow    { animation: auftrittHoch .6s var(--ease) .08s backwards; }
.page-head h1          { animation: auftrittHoch .7s var(--ease) .18s backwards; }
.page-head__lead       { animation: auftrittHoch .7s var(--ease) .3s backwards; }
.page-head::after      { transform-origin: left; animation: linieWachsen .7s var(--ease) .45s backwards; }

/* ==========================================================================
   Sanftes Einblenden beim Scrollen
   ========================================================================== */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal:nth-child(2) { transition-delay: .08s; }
.reveal:nth-child(3) { transition-delay: .16s; }

/* ==========================================================================
   Mobil: eigener Durchgang, nicht nur verkleinert
   ========================================================================== */
@media (max-width: 900px) {
  .fields, .pillars, .steps, .split, .contact-grid,
  .site-footer__grid { grid-template-columns: 1fr; }
  /* Referenzen ordnen sich von selbst um, hier nur engerer Abstand */
  .refs { gap: 20px; }

  .service { grid-template-columns: 1fr; gap: 20px; }
  .service__label { position: static; }
  .split { gap: 34px; }
  .pillars { gap: 26px; }
  .steps { gap: 26px; }
  .refs { gap: 16px; }
  .ref { flex: 1 1 100%; }
  .contact-grid { gap: 44px; }
  .site-footer__grid { gap: 34px; }

  .cta-band__inner { flex-direction: column; align-items: flex-start; gap: 26px; }
}

/* Ab hier wird die Navigation zum Klappmenue. Mit dem Sprachumschalter
   braucht die Zeile rund 980 px, darunter wird es zu eng. */
@media (max-width: 1080px) {
  /* Navigation wird zum Klappmenue */
  .nav-toggle { display: flex; }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(84vw, 340px);
    background: var(--brand);
    padding: 96px 30px 34px;
    transform: translateX(100%);
    transition: transform .34s var(--ease);
    overflow-y: auto;
    box-shadow: -20px 0 50px rgba(10, 23, 48, .3);
  }
  .nav.is-open { transform: translateX(0); }

  .nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }
  .nav li { border-bottom: 1px solid rgba(255, 255, 255, .14); }
  .nav li:last-child { border-bottom: 0; margin-top: 26px; }

  /* Sprachwahl im Klappmenue: etwas groesser, damit sie sich mit dem
     Finger sicher treffen laesst, und mit Abstand zum letzten Eintrag. */
  .nav__sprachen { gap: 14px; padding-left: 0; }
  .nav__sprache { font-size: .95rem; padding: 9px 2px; }

  .nav__link,
  .site-header--overlay .nav__link,
  .site-header.is-stuck .nav__link {
    display: block;
    padding: 17px 0;
    font-size: 1.06rem;
    line-height: 1.35;
    /* im Klappmenue ist Platz nach unten, hier darf umgebrochen werden */
    white-space: normal;
    color: rgba(255, 255, 255, .9);
  }
  .nav__cta { white-space: normal; }
  .nav__link[aria-current='page'] { color: var(--white); }
  .nav__link::after { display: none; }

  .nav__cta { width: 100%; justify-content: center; padding: 15px 20px; font-size: 1rem; }

  /* Menue offen: Hintergrund abdunkeln */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 23, 48, .5);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
    z-index: 90;
  }
  .nav-backdrop.is-open { opacity: 1; visibility: visible; }

  .site-header { z-index: 100; }
  .nav { z-index: 101; }
  .nav-toggle { z-index: 102; position: relative; }
  .site-header--overlay .nav-toggle[aria-expanded='true'] .nav-toggle__bar,
  .nav-toggle[aria-expanded='true'] .nav-toggle__bar { background: var(--white); }

}

@media (max-width: 780px) {
  :root { --pad: 20px; }

  body { font-size: 16.5px; }

  /* Logo kompakter, Kopfzeile flacher */
  .logo img,
  .site-header.is-stuck .logo img { width: 172px; }
  .site-header__inner,
  .site-header.is-stuck .site-header__inner { padding-block: 10px; }

  /* Kopfbild: flacher, Bogen und Kirchturm bleiben im Ausschnitt.
     Kleinere Bilddatei, das spart Datenvolumen auf dem Handy. */
  .hero {
    min-height: 0;
    padding-top: 128px;
    padding-bottom: 52px;
    align-items: flex-start;
  }
  .hero__media {
    background-image: url('../img/hero-mobil.jpg?v=4');
    background-position: 42% 42%;
  }
  .hero__media::after {
    background: linear-gradient(to bottom,
      rgba(10, 23, 48, .6) 0%,
      rgba(10, 23, 48, .34) 42%,
      rgba(10, 23, 48, .68) 100%);
  }
  .page-head::before {
    background:
      linear-gradient(180deg,
        rgba(20, 41, 79, .93) 0%,
        rgba(20, 41, 79, .86) 60%,
        rgba(20, 41, 79, .8) 100%),
      url('../img/hero-mobil.jpg?v=4') 46% 44% / cover no-repeat;
  }
  .hero__lead { margin-bottom: 1.7rem; }
  .hero .btn { width: 100%; }

  .page-head { padding-block: 40px 36px; }
  .page-head__lead { font-size: 1.02rem; }

  .field { padding: 30px 24px 28px; }
  .contact-aside { padding: 28px 22px; }

  .section__head { margin-bottom: 34px; }

  .cta-band .btn { width: 100%; }
  form .btn { width: 100%; }

  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__bottom ul { flex-wrap: wrap; gap: 8px 20px; }
}

@media (max-width: 420px) {
  .logo img, .site-header.is-stuck .logo img { width: 152px; }
  .hero { padding-top: 116px; }
  .field h3,
  .field h2 { font-size: 1.28rem; }
}

/* Bewegung reduzieren, wenn das Betriebssystem es verlangt */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    /* auch die Verzoegerung aufheben, sonst bleibt Text kurz unsichtbar */
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* Druckansicht */
@media print {
  .site-header, .nav, .cta-band, .site-footer { display: none; }
  body { background: #fff; font-size: 11pt; }
  .hero, .page-head { min-height: 0; padding-block: 20px; background: #fff; }
  .hero h1, .page-head h1 { color: #000; }
  .hero__media, .page-head::before, .page-head::after { display: none; }
  .hero__content, .page-head__lead, .hero__lead { color: #000; }
}