/* ============================================================
   LOCAL FONTS
   ============================================================ */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/inter-v20-latin-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/inter-v20-latin-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-v20-latin-700.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/inter-v20-latin-800.woff2") format("woff2"); }

/* ============================================================
   interwayz – STYLESHEET
   ============================================================ */

/* --- 1. CUSTOM PROPERTIES --- */
:root {
  --bg:           #f4f7fb;
  --surface:      #ffffff;
  --muted:        #5b6472;
  --line:         #d9e2ec;

  --primary:      #1560bb;
  --primary-hover:#084ea3;
  --footer-bg:    #243e73;

  --shadow:       0 12px 30px rgba(15, 23, 42, 0.08);
  --shadow-soft:  0 8px 20px rgba(15, 23, 42, 0.05);

  --radius:       18px;
  --radius-sm:    12px;

  --text:         #102033;
  --text-2:       #4a5a6b;
  --text-3:       #8494a7;
  --primary-tint: #eaf1fb;
}

/* --- 2. RESET & BASE --- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Scroll-Offset für fixe Header */
[id] {
  scroll-margin-top: 100px;
}



html {
  overflow-x: hidden;
}

body {
  margin: 0;
  overflow-x: hidden;
  font-family: "Inter", sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; }
strong { color: #e5e8ed; }
strong_black { color: #000000; }

.container {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
}

/* --- 3. HEADER & NAV --- */
.header {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
}

/* Dunkler Gradient von oben – Logo immer erkennbar */
.header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(5, 15, 35, 0.55) 0%,
    rgba(5, 15, 35, 0.0) 100%
  );
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.28s ease;
  z-index: -1;
}

.header.is-scrolled::before {
  opacity: 0;
}

/* Logo Fade-in beim Laden */
@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.brand {
  animation: fadeInDown 0.6s ease forwards;
}

.nav-links {
  animation: fadeInDown 0.6s ease 0.1s both;
}

.header.is-scrolled {
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid #e6ebf2;
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.06);
}

.nav {
  min-height: 90px;
  display: flex;
  align-items: center;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  margin-right: auto;
}

.brand-logo {
  height: 42px;
  width: auto;
  display: block;
}

.brand-text {
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: #ffffff;
  transition: color 0.28s ease;
}

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

.nav-links a {
  position: relative;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  transition: color 0.28s ease;
}

/* Unterstrich nur für Top-Level Nav-Links, nicht für Dropdown-Unterlinks */
.nav-links > a::after,
.nav-dropdown > a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -12px;
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.22s ease;
}

.nav-dropdown__menu a::after,
.nav-dropdown__menu a::before {
  content: none !important;
  display: none !important;
}

.nav-links > a:hover::after,
.nav-dropdown > a:hover::after { transform: scaleX(1); }

.header.is-scrolled .brand-text,
.header.is-scrolled .nav-links a {
  color: #183f8f;
}

/* --- 4. HAMBURGER --- */
.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 6px;
  background: transparent;
  border: none;
  cursor: pointer;
  margin-left: auto;
  z-index: 1100;
}

.nav-toggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease, background 0.28s ease;
  transform-origin: center;
}

.header.is-scrolled .nav-toggle span { background: #183f8f; }

.nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- 5. HERO (HOME) --- */
.hero {
  width: 100%;
  min-height: 75vh;
  display: flex;
  align-items: center;
  padding: 130px 0 60px;
  background:
    linear-gradient(rgba(10, 20, 40, 0.55), rgba(10, 20, 40, 0.55)),
    url("images/hero.jpg") center / cover no-repeat;
  color: #ffffff;
  position: relative;
}

.hero__inner {
  max-width: 820px;
}

.hero h1 {
  margin: 12px 0 24px;
  font-size: clamp(2.8rem, 5.5vw, 5rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
}

.hero__lead {
  margin: 0 0 16px;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  color: rgba(255, 255, 255, 0.92);
  max-width: 62ch;
  line-height: 1.65;
}

.hero__sub {
  margin: 0 0 40px;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  line-height: 1.75;
}

.hero strong { color: #ffffff; }

.hero__actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* --- 6. PAGE HERO (Unterseiten) --- */
.page-hero {
  position: relative;
  min-height: 580px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 90px;
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  background: url("images/hero.jpg") center / cover no-repeat;
}

.page-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(10, 25, 60, 0.82) 0%, rgba(10, 25, 60, 0.65) 100%);
}

.page-hero__content {
  position: relative;
  z-index: 2;
  color: #fff;
  padding: 60px 0;
}

.page-hero__content h1 {
  margin: 8px 0 16px;
  font-size: clamp(2.2rem, 4.5vw, 3.8rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}

.page-hero__text {
  margin: 0;
  max-width: 58ch;
  font-size: 1.08rem;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.85);
}

/* --- 7. EYEBROW --- */
.eyebrow {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

.section-eyebrow {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px;
}

/* --- 8. BUTTONS --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-width: 180px;
  min-height: 50px;
  padding: 14px 28px;
  border: none;
  border-radius: 12px;
  background: var(--primary);
  color: #ffffff;
  font-size: 0.95rem;
  font-weight: 700;
  box-shadow: var(--shadow);
  cursor: pointer;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.btn:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(15, 88, 182, 0.2);
}

.btn--ghost {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.22);
  transform: translateY(-1px);
}

.btn--outline {
  background: transparent;
  border: 2px solid var(--primary);
  color: var(--primary);
  box-shadow: none;
}
.btn--outline:hover {
  background: var(--primary);
  color: #fff;
}

.btn--white {
  background: #fff;
  color: var(--primary);
  box-shadow: none;
}
.btn--white:hover {
  background: #e8f0fc;
  transform: translateY(-1px);
}

.btn--small {
  min-width: unset;
  padding: 10px 20px;
  font-size: 0.88rem;
  min-height: 40px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* --- 9. TRUST BAR --- */
.trust-bar {
  background: linear-gradient(135deg, #0f2244 0%, #1560bb 100%);
  padding: 28px 0;
}

.trust-bar__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.trust-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 20px;
  border-right: 1px solid rgba(255,255,255,0.15);
}

.trust-item:last-child { border-right: none; }

.trust-item__value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.02em;
}

.trust-item__label {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.65);
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* --- 10. MAIN & SECTIONS --- */
.main {
  background: var(--bg);
  padding: 0;
}

.section {
  padding: 72px 0;
}

.section h2 {
  margin: 0 0 20px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  line-height: 1.15;
}

.section-intro {
  max-width: 62ch;
  color: var(--muted);
  margin: 0 0 40px;
  font-size: 1.05rem;
  line-height: 1.75;
}

.section-cta { margin-top: 36px; }

.section--light {
  background: linear-gradient(180deg, #ffffff 0%, #f7faff 100%);
  border-radius: var(--radius);
  padding: 56px 48px;
  margin-left: -48px;
  margin-right: -48px;
  border: 1px solid var(--line);
}

/* --- 11. CARDS (HOME GRID) --- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 28px;
  align-items: stretch;
}

.card {
  padding: 32px 28px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  position: relative;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.card__icon {
  font-size: 2.2rem;
  margin-bottom: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  min-height: 80px;
}

.card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--text);
}

.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- 12. WHY / ANSATZ GRID --- */
.why-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 28px;
}

.why-card {
  padding: 28px 32px;
  background: linear-gradient(135deg, #ffffff 0%, #f7faff 100%);
  border: 1px solid var(--line);

  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-left-color 0.2s ease;
}

.why-card:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow);

}

.why-card h3 {
  margin: 0 0 10px;
  font-size: 1.05rem;
  color: var(--text);
}

.why-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- 13. STEPS --- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  margin-top: 12px;
}

.step {
  padding: 28px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.step:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
}

.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: 0;
}

.step h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  color: var(--text);
}

.step p {
  margin: 0;
  font-size: 0.93rem;
  color: var(--muted);
  line-height: 1.65;
}

/* --- 14. ÜBER UNS – INTRO --- */
.about-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.about-intro__text h2 {
  margin: 8px 0 20px;
  font-size: clamp(1.8rem, 3vw, 2.6rem);
}

.about-intro__text p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 16px;
}

.about-stat-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.about-stat {
  background: linear-gradient(135deg, #ffffff 0%, #f0f6ff 100%);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 24px 20px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.about-stat:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.about-stat__value {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
  line-height: 1;
}

.about-stat__label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* --- 15. WERTE --- */
.values-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 12px;
}

.value-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  text-align: center;
}

.value-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  font-size: 1.6rem;
  margin-bottom: 18px;
  background: var(--primary-tint, #eaf1fb);
  border-radius: 50%;
}

.value-card h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
  color: var(--text);
}

.value-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* --- 16. TEAM --- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 12px;
}

.team-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 24px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-soft);
}

.team-card--placeholder {
  border-style: dashed;
  background: var(--bg);
}

.team-card__avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

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

.team-card--placeholder .team-card__avatar {
  background: var(--line);
  color: var(--muted);
  font-size: 1.4rem;
}

.team-card__body h3 {
  margin: 0 0 4px;
  font-size: 1.1rem;
  color: var(--text);
}

.team-card__role {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--primary);
  margin-bottom: 12px;
}

.team-card--placeholder .team-card__role { color: var(--muted); }

.team-card__body p {
  margin: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.7;
}

a.team-card {
  display: grid;
  text-decoration: none;
  color: inherit;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

a.team-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
}

a.team-card:hover .team-card__role { color: var(--primary); }

/* --- 17. STANDORT --- */
.location-block {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 28px;
  align-items: stretch;
  margin-top: 12px;
}

.location-block__info {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.location-block__map {
  border-radius: var(--radius);
  overflow: hidden;
  min-height: 300px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
}

.location-block__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
}

.info-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 15px;
  color: var(--text);
}

.info-item p,
.info-item a {
  margin: 0;
  color: var(--muted);
  text-decoration: none;
}

/* --- 18. CTA BANNER --- */
.cta-banner { margin: 0 0 72px; }

.cta-banner__inner {
  background: linear-gradient(135deg, #0f2244 0%, #1560bb 60%, #2a7fff 100%);
  border-radius: var(--radius);
  padding: 64px 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

.cta-banner__inner::before {
  content: "";
  position: absolute;
  right: -60px;
  top: -60px;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}

.cta-banner__inner::after {
  content: "";
  position: absolute;
  right: 60px;
  bottom: -80px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: rgba(255,255,255,0.03);
  pointer-events: none;
}

.cta-banner__inner h2 {
  margin: 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: #fff;
  line-height: 1.2;
}

.cta-banner__inner p {
  margin: 0;
  color: rgba(255,255,255,0.82);
  font-size: 1.05rem;
}

/* --- 19. SERVICE BLOCKS (Dienstleistungen) --- */
.service-blocks {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-top: 12px;
}

.service-block {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 28px;
  align-items: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.service-block:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.service-block__icon {
  font-size: 2.4rem;
  line-height: 1;
  padding-top: 4px;
}

.service-block__body h3 {
  margin: 0 0 12px;
  font-size: 1.3rem;
  color: var(--text);
}

.service-block__body > p {
  margin: 0 0 18px;
  color: var(--muted);
  line-height: 1.75;
}

.service-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 24px;
}

.service-list li {
  font-size: 0.93rem;
  color: var(--text-2, #3d5166);
  padding-left: 18px;
  position: relative;
}

.service-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* --- 20. CONTAINER GRID (Dienstleistungen) --- */
.container-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.container-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 28px 20px;
  text-align: center;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.container-card--muted {
  background: var(--bg);
  border-style: dashed;
}

.container-card__size {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.container-card__label {
  font-size: 0.78rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
}

/* --- 22. KONTAKT – FORM LAYOUT --- */
.contact-form-section { padding-top: 0; }

.contact-form-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 48px;
  align-items: start;
}

.contact-form-intro h2 {
  margin: 8px 0 18px;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.2;
}

.contact-form-intro p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 14px;
  font-size: 0.97rem;
}

.contact-form-intro__link {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* --- 23. FORM --- */
.form {
  display: grid;
  gap: 18px;
  padding: 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.form-section-label {
  margin: 8px 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-section-label:first-child { margin-top: 0; }

.row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.full { grid-column: 1 / -1; }

label {
  display: grid;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: #223548;
}

input, select, textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 16px;
  border: 1px solid #d7e0ea;
  border-radius: 10px;
  background: #f9fbfd;
  color: var(--text);
  outline: none;
  transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

input::placeholder { color: #8b96a7; }

input:focus, select:focus, textarea:focus {
  border-color: var(--primary);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(21, 96, 187, 0.1);
}

textarea {
  resize: vertical;
  min-height: 120px;
}

.input-file {
  min-height: unset;
  padding: 10px 14px;
  font-size: 0.9rem;
  cursor: pointer;
}

.form-card {
  background: #fff;
  border: 1px solid #e4ebf3;
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow);
}

/* --- 24. FORM TOGGLE (Import/Export) --- */
.form-toggle {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.form-toggle__inner {
  display: inline-flex;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 4px;
  gap: 4px;
}

.form-toggle__btn {
  padding: 9px 28px;
  border: none;
  border-radius: 9px;
  background: transparent;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.form-toggle__btn.is-active {
  background: var(--primary);
  color: #fff;
  box-shadow: 0 2px 8px rgba(21, 96, 187, 0.25);
}

.form-toggle__btn:not(.is-active):hover {
  background: var(--line);
  color: var(--text);
}

/* --- 25. KARRIERE --- */
.karriere-benefits {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 12px;
}

.benefit-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.benefit-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
}

.benefit-card__icon {
  display: block;
  font-size: 1.8rem;
  margin-bottom: 14px;
  line-height: 1;
}

.benefit-card h3 { margin: 0 0 8px; font-size: 1rem; color: var(--text); }
.benefit-card p  { margin: 0; font-size: 0.93rem; color: var(--muted); line-height: 1.7; }

.job-list { display: flex; flex-direction: column; gap: 20px; margin-top: 12px; }

.job-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
  box-shadow: var(--shadow-soft);
}

.job-card__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 16px;
}

.job-card__head h3 { margin: 0 0 10px; font-size: 1.15rem; color: var(--text); line-height: 1.3; }

.job-tags { display: flex; gap: 8px; flex-wrap: wrap; }

.job-tag {
  display: inline-block;
  padding: 4px 12px;
  background: #eef3fb;
  color: var(--primary);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 100px;
}

.job-card > p { margin: 0 0 16px; color: var(--muted); line-height: 1.75; font-size: 0.97rem; }

.job-requirements { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }

.job-requirements li {
  font-size: 0.92rem;
  color: var(--text-2, #3d5166);
  padding-left: 18px;
  position: relative;
}

.job-requirements li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.karriere-form-layout {
  display: grid;
  grid-template-columns: 1fr 1.8fr;
  gap: 48px;
  align-items: start;
}

.karriere-form-intro h2 { margin: 8px 0 18px; font-size: clamp(1.6rem, 2.5vw, 2.2rem); line-height: 1.2; }
.karriere-form-intro p  { color: var(--muted); line-height: 1.8; margin: 0 0 14px; font-size: 0.97rem; }

.karriere-contact-hint {
  display: flex;
  flex-direction: column;
  gap: 5px;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}

.karriere-contact-hint a { font-size: 1rem; font-weight: 700; color: var(--primary); }

/* --- 26. DANKE-SEITE --- */
.danke-section {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 120px 0 80px;
}

.danke-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 56px 48px;
  text-align: center;
  max-width: 520px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.danke-icon  { font-size: 3rem; line-height: 1; }
.danke-card h1 { margin: 0; font-size: 2rem; color: var(--text); }
.danke-card p  { margin: 0; color: var(--muted); line-height: 1.75; max-width: 38ch; }

/* --- 27. LEGAL PAGES --- */
.legal-page {
  padding: 10rem 0 6rem;
  background: var(--bg);
}

.legal-container {
  width: min(100% - 2rem, 720px);
  margin: 0 auto;
}

.legal-page h1 {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1.1;
  margin-bottom: 0.5rem;
}

.legal-intro {
  font-size: 1rem;
  color: var(--muted);
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}

.legal-body { display: flex; flex-direction: column; }

.legal-section {
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--line);
}

.legal-section:last-child { border-bottom: none; }

.legal-section h2 {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3, #8494a7);
  margin-bottom: 0.75rem;
}

.legal-section p { font-size: 1rem; line-height: 1.8; color: var(--text); }
.legal-section a { color: var(--primary); font-weight: 500; }
.legal-section a:hover { text-decoration: underline; }

/* --- 28. FOOTER --- */
.footer {
  background: var(--footer-bg);
  color: #ffffff;
  padding: 44px 0 4px;
  margin-top: 0;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
}

.footer h4,
.footer .footer__title {
  margin: 0 0 16px;
  color: inherit;
  line-height: 1.4;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.6;
  font-weight: 700;
}

.footer p {
  margin: 6px 0;
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.8);
}

.footer a {
  display: block;
  font-size: 0.95rem;
  margin: 6px 0;
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.footer a:hover { color: #ffffff; }

/* --- 29. RESPONSIVE --- */

/* Tablet */
@media (max-width: 960px) {
  .grid,
  .contact-form-layout,
  .karriere-form-layout,
  .row,
  .about-intro,
  .location-block { grid-template-columns: 1fr; }

  .why-grid         { grid-template-columns: 1fr; }
  .steps            { grid-template-columns: repeat(2, 1fr); }
  .container-grid   { grid-template-columns: repeat(2, 1fr); }
  .values-grid      { grid-template-columns: 1fr; }
  .team-grid        { grid-template-columns: 1fr; }
  .karriere-benefits{ grid-template-columns: repeat(2, 1fr); }

  .trust-bar__grid  { grid-template-columns: repeat(2, 1fr); }
  .trust-item:nth-child(2)               { border-right: none; }
  .trust-item:nth-child(1),
  .trust-item:nth-child(2)               { border-bottom: 1px solid var(--line); }

  .service-block    { grid-template-columns: 1fr; gap: 16px; }
  .service-list     { grid-template-columns: 1fr; }

  .section--light   { margin-left: 0; margin-right: 0; padding: 40px 28px; }
  .cta-banner__inner{ padding: 44px 32px; }

  .contact-form-layout { gap: 28px; }
  .karriere-form-layout{ gap: 28px; }
  .about-intro         { gap: 36px; }

  .footer-grid { grid-template-columns: 1fr; gap: 32px; }

  .job-card__head { flex-direction: column; align-items: flex-start; }
}

/* Mobile: hamburger activates */
@media (max-width: 720px) {
  .container { width: min(1180px, calc(100% - 28px)); }

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

  .nav { min-height: 70px; }

  .nav-toggle { display: flex; }

  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 22, 50, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    z-index: 999;
  }

  .nav-links.is-open { display: flex; }

  /* Nur Top-Level Links — nicht die Dropdown-Unterlinks */
  .nav-links > a,
  .nav-links .nav-dropdown > a {
    font-size: 1.6rem;
    color: #fff !important;
    text-align: center;
  }
  .nav-links > a::after,
  .nav-links .nav-dropdown > a::after {
    display: none !important;
    content: none !important;
  }

  .hero { padding: 130px 0 70px; min-height: auto; }
  .hero h1 { font-size: 2.2rem; }

  .page-hero { min-height: 340px; }

  .section { padding: 48px 0; }
  .section--light { padding: 32px 20px; }

  .steps { grid-template-columns: 1fr; }
  .karriere-benefits { grid-template-columns: repeat(2, 1fr); }

  .contact-way  { padding: 22px 24px; }
  .contact-way__divider { width: auto; height: 1px; align-self: auto; }

  .team-card  { grid-template-columns: 56px 1fr; gap: 16px; padding: 22px; }
  .team-card__avatar { width: 52px; height: 52px; font-size: 0.95rem; }

  .job-card   { padding: 22px; }
  .form-card  { padding: 20px; }
  .form       { padding: 20px; }

  .cta-banner__inner { padding: 36px 24px; }
  .footer { padding: 48px 0; }
}

/* Small mobile */
@media (max-width: 480px) {
  .hero h1    { font-size: 1.9rem; }
  .hero__actions { flex-direction: column; }
  .hero__actions .btn { width: 100%; justify-content: center; }

  .trust-bar__grid     { grid-template-columns: 1fr 1fr; }
  .karriere-benefits   { grid-template-columns: 1fr; }
  .about-stat-block    { grid-template-columns: 1fr; max-width: 100%; }
  .container-grid      { grid-template-columns: repeat(2, 1fr); }

  .legal-page { padding: 8rem 0 4rem; }
}

.brand-text { display: none; }

/* ===========================
   GOOGLE MAPS CONSENT
   =========================== */
.map-consent {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border-radius: var(--radius);
}

.map-consent__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  padding: 32px;
}

.map-consent__icon {
  font-size: 2.5rem;
  line-height: 1;
}

.map-consent__inner p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 28ch;
  line-height: 1.6;
}

.map-consent__inner strong {
  color: var(--text);
  font-size: 1rem;
}

.map-consent__inner .btn {
  margin-top: 6px;
  min-width: 140px;
}

/* ===========================
   KONTAKT – INFO BOX
   =========================== */
.contact-info-box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px;
  box-shadow: var(--shadow-soft);
  display: flex;
  flex-direction: column;
  gap: 0;
}

.contact-info-box__item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
}

.contact-info-box__item:first-child { padding-top: 0; }
.contact-info-box__item:last-child  { padding-bottom: 0; border-bottom: none; }

.contact-info-box__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-info-box__value {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
  transition: color 0.2s ease;
}

a.contact-info-box__value:hover { color: var(--primary); }

.contact-info-box__hint {
  font-size: 0.8rem;
  color: var(--muted);
}
/* ============================================================
   BARRIEREFREIHEIT
   ============================================================ */

/* Skip-Link */
.skip-link {
  position: absolute;
  top: -100px;
  left: 16px;
  z-index: 9999;
  padding: 12px 20px;
  background: var(--primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  text-decoration: none;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* Fokus-Styles für Tastaturnavigation */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 3px;
  border-radius: 4px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(21, 96, 187, 0.15);
}

/* Screenreader-only Text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* --- Code of Conduct Download --- */
.coc-download {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 16px;
  padding: 8px 16px;
  background: var(--primary);
  color: #fff;
  font-size: 0.85rem;
  font-weight: 700;
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease;
  vertical-align: middle;
}

.coc-download:hover {
  background: var(--primary-hover);
  transform: translateY(-1px);
}

/* ============================================================
   ANIMATIONEN
   ============================================================ */

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

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* Seitenübergang – Bahn-Wipe */
.page-transition {
  position: fixed;
  top: 0; left: -100%;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--primary) 0%, #4a9eff 50%, var(--primary) 100%);
  z-index: 9999;
  transition: left 0.4s ease;
  opacity: 0;
}

.page-transition.is-running {
  left: 0;
  opacity: 1;
}



/* Intro-Animation Homepage */
@keyframes heroFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero__inner > *,
.page-hero__content > * {
  opacity: 0;
  animation: heroFadeUp 0.7s ease forwards;
}

.hero__inner > *:nth-child(1),
.page-hero__content > *:nth-child(1) { animation-delay: 0.2s; }

.hero__inner > *:nth-child(2),
.page-hero__content > *:nth-child(2) { animation-delay: 0.4s; }

.hero__inner > *:nth-child(3),
.page-hero__content > *:nth-child(3) { animation-delay: 0.6s; }

.hero__inner > *:nth-child(4),
.page-hero__content > *:nth-child(4) { animation-delay: 0.7s; }
/* --- Inlandsterminals --- */
.terminal-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 12px;
}

.terminal-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.terminal-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: var(--primary);
  color: var(--primary);
}

.terminal-hint {
  margin-top: 20px;
  font-size: 0.95rem;
  color: var(--muted);
}

.terminal-hint a {
  color: var(--primary);
  font-weight: 600;
  margin-left: 4px;
}

.terminal-hint a:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .terminal-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .terminal-grid { grid-template-columns: repeat(2, 1fr); }
}

.terminal-group-label {
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 28px 0 10px;
}

.terminal-group-label:first-of-type {
  margin-top: 0;
}

/* --- Nav Dropdown --- */
.nav-dropdown {
  position: relative;
}

.nav-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

.nav-dropdown__arrow {
  transition: transform 0.2s ease;
  flex-shrink: 0;
}

.nav-dropdown:hover .nav-dropdown__arrow {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding-top: 12px;
  transition: opacity 0.2s ease, transform 0.2s ease;
  z-index: 200;
  min-width: 210px;
}

.nav-dropdown:hover .nav-dropdown__menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu__inner {
  background: rgba(10, 22, 50, 0.96);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  padding: 8px;
  overflow: hidden;
}

.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8) !important;
  text-transform: none;
  letter-spacing: 0.01em;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}

.nav-dropdown__menu a::before {
  display: none;
}

.nav-dropdown__menu a:hover {
  background: rgba(255,255,255,0.1);
  color: #fff !important;
}

.nav-dropdown__menu a::after { display: none; }

/* Mobile (Hamburger-Menü bis 960px) */
@media (max-width: 960px) {
  .nav-dropdown__trigger {
    font-size: 1.6rem;
    color: #fff !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    text-align: center;
  }
  .nav-dropdown__trigger::after,
  .nav-dropdown__trigger::before {
    display: none !important;
    content: none !important;
  }
  .nav-dropdown__arrow {
    display: block;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: transform 0.25s;
    flex-shrink: 0;
  }
  .nav-dropdown.is-open .nav-dropdown__arrow {
    transform: rotate(180deg);
  }
  .nav-dropdown__menu {
    position: static !important;
    transform: none !important;
    left: auto !important;
    top: auto !important;
    opacity: 1 !important;
    pointer-events: none;
    padding-top: 0;
    max-height: 0;
    min-width: 0 !important;
    width: 100% !important;
    overflow: hidden;
    transition: max-height 0.3s ease;
  }
  .nav-dropdown.is-open .nav-dropdown__menu {
    pointer-events: auto;
    max-height: 400px;
    padding-top: 8px;
  }
  .nav-dropdown__menu__inner {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    width: 100%;
    gap: 0;
  }
  .nav-dropdown__menu a,
  .nav-dropdown__menu a:link,
  .nav-dropdown__menu a:visited {
    display: block !important;
    width: auto !important;
    text-align: center !important;
    font-size: 1.1rem !important;
    color: rgba(255,255,255,0.65) !important;
    padding: 8px 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    position: static !important;
    align-items: unset !important;
    gap: 0 !important;
  }
  .nav-dropdown__menu a::after,
  .nav-dropdown__menu a::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
  }
  /* nav-links a::after Unterstrich in Dropdowns deaktivieren */
  .nav-dropdown__menu .nav-links a::after,
  .nav-links .nav-dropdown__menu a::after {
    display: none !important;
    content: none !important;
  }
  .nav-dropdown__menu a:hover,
  .nav-dropdown__menu a:active {
    background: transparent !important;
    color: #fff !important;
    padding-left: 0 !important;
    transform: none !important;
  }
}

.service-block__icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.card__icon img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.about-intro__text .section-eyebrow {
  color: var(--primary);
}
/* Container-Grid Auf Anfrage – 5 Spalten */
.container-grid + .terminal-group-label + .container-grid {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 960px) {
  .container-grid + .terminal-group-label + .container-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .container-grid + .terminal-group-label + .container-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* values-grid 4-spaltig */
.values-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 960px) {
  .values-grid--4 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .values-grid--4 { grid-template-columns: 1fr; }
}

/* ============================================================
   DIENSTLEISTUNGEN – NEUE LAYOUTS
   ============================================================ */

/* --- Kernleistungen: nummerierte Split-Blöcke --- */
.dl-section-header {
  max-width: 680px;
  margin-bottom: 64px;
}

.dl-leistung {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  position: relative;
}

.dl-leistung:last-child { border-bottom: 1px solid var(--line); }

.dl-leistung--reverse {
  grid-template-columns: 48px 1fr 1fr;
  direction: rtl;
}

.dl-leistung--reverse > * { direction: ltr; }

.dl-leistung__num {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  opacity: 0.5;
  align-self: start;
  padding-top: 6px;
}

.dl-leistung__img {
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--bg);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dl-leistung__img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 24px;
}

.dl-leistung__icon {
  font-size: 5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4/3;
}

.dl-leistung__content h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--text);
  margin: 0 0 14px;
  letter-spacing: -0.02em;
}

.dl-leistung__content > p {
  color: var(--muted);
  line-height: 1.8;
  margin: 0 0 20px;
  font-size: 0.97rem;
}

.dl-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dl-list li {
  font-size: 0.9rem;
  color: var(--text-2);
  padding-left: 16px;
  position: relative;
}

.dl-list li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

/* --- Containertypen: Tabellen-Layout --- */
.dl-container__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.dl-container__sub {
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 32ch;
  text-align: right;
  margin: 0;
  line-height: 1.6;
}

.dl-container__table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.dl-ctable__head {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  gap: 0;
  background: var(--primary);
  color: #fff;
  padding: 14px 28px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dl-ctable__row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  gap: 0;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.15s ease;
}

.dl-ctable__row:last-child { border-bottom: none; }

.dl-ctable__row:hover { background: var(--bg); }

.dl-ctable__row--muted {
  opacity: 0.6;
}

.dl-ctable__row--muted:hover { opacity: 0.9; }

.dl-ctable__size {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.dl-ctable__row--muted .dl-ctable__size { color: var(--muted); }

.dl-ctable__avail {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.dl-ctable__avail--yes {
  color: #1a9e5c;
  background: #e6f9f0;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
}

/* --- Standorte: Zwei-Spalten Listenlayout --- */
.dl-standorte__intro { margin-bottom: 40px; }

.dl-standorte__cols {
  display: grid;
  grid-template-columns: 1fr 20px 2fr;
  gap: 0 32px;
  align-items: start;
}

.dl-standorte__divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 0 auto;
}

.dl-standorte__col-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.dl-standorte__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.dl-standorte__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.dl-standorte__list li:first-child { border-top: 1px solid var(--line); }

.dl-standorte__list li:hover {
  color: var(--primary);
  padding-left: 8px;
}

.dl-standorte__list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dl-standorte__list--grid li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
.dl-standorte__list--grid li:nth-child(even) { padding-left: 24px; }

/* --- Ablauf: Horizontale Timeline --- */
.dl-timeline {
  position: relative;
  margin-top: 48px;
}

.dl-timeline__line {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--primary), #4a9eff);
  z-index: 0;
}

.dl-timeline__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
  position: relative;
  z-index: 1;
}

.dl-timeline__step {
  padding-top: 52px;
}

.dl-timeline__dot {
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 0 0 4px var(--bg);
  position: relative;
  margin-bottom: 20px;
}

.dl-timeline__step h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}

.dl-timeline__step p {
  font-size: 0.9rem;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 960px) {
  .dl-leistung,
  .dl-leistung--reverse {
    grid-template-columns: 1fr;
    direction: ltr;
  }
  .dl-leistung__num { display: none; }
  .dl-leistung__img { max-width: 280px; }

  .dl-container__header { flex-direction: column; align-items: flex-start; }
  .dl-container__sub { text-align: left; }
  .dl-ctable__head,
  .dl-ctable__row { grid-template-columns: 100px 1fr 120px; padding: 12px 16px; }

  .dl-standorte__cols { grid-template-columns: 1fr; }
  .dl-standorte__divider { display: none; }
  .dl-standorte__list--grid { grid-template-columns: 1fr; }
  .dl-standorte__list--grid li:nth-child(odd),
  .dl-standorte__list--grid li:nth-child(even) { border-right: none; padding-left: 0; padding-right: 0; }

  .dl-timeline__line { display: none; }
  .dl-timeline__steps { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  .dl-timeline__steps { grid-template-columns: 1fr; }
  .dl-ctable__head { display: none; }
  .dl-ctable__row { grid-template-columns: 80px 1fr; }
  .dl-ctable__row > span:last-child { display: none; }
}

/* Terminals klickbar */
.dl-standorte__list a {
  color: inherit;
  text-decoration: none;
  display: block;
  width: 100%;
}

.dl-standorte__list li:hover {
  color: var(--primary);
  padding-left: 8px;
  cursor: pointer;
}

.dl-standorte__list a:hover { color: var(--primary); }

/* --- Datenschutz Checkbox --- */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
  border-radius: 4px;
}

.checkbox-label a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- About Facts: Liste statt Boxen --- */
.about-facts {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.about-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}

.about-fact:last-child { border-bottom: none; }

.about-fact__value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.about-fact__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}

.trust-bar__grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.trust-item--link {
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.trust-item--link:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
}

.trust-item--link .trust-item__label {
  color: rgba(255,255,255,0.85);
}

@media (max-width: 960px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(2, 1fr); }
}
/* --- Footer Copyright --- */
.footer-bottom {
  background: transparent;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  text-align: center;
}

/* --- About Facts: Liste statt Boxen --- */
.about-facts {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
}

.about-fact {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 24px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--line);
}

.about-fact:last-child { border-bottom: none; }

.about-fact__value {
  font-size: 1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.01em;
}

.about-fact__label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-align: right;
}

/* --- Checkbox --- */
.checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.6;
}

.checkbox-label input[type="checkbox"] {
  width: 18px;
  min-width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 2px 0 0;
  padding: 0;
  accent-color: var(--primary);
  cursor: pointer;
}

.checkbox-label a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* --- Trust Bar 5 Spalten --- */
.trust-bar__grid--5 {
  grid-template-columns: repeat(5, 1fr);
}

.trust-item--link {
  text-decoration: none;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: var(--radius-sm);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.trust-item--link:hover {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.5);
}

.trust-item--link .trust-item__label {
  color: rgba(255,255,255,0.85);
}

@media (max-width: 960px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(2, 1fr); }
}

/* --- Dienstleistungen neue Layouts --- */
.dl-container__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.dl-container__sub {
  color: var(--muted);
  font-size: 0.97rem;
  max-width: 32ch;
  text-align: right;
  margin: 0;
  line-height: 1.6;
}

.dl-container__table {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
  box-shadow: var(--shadow-soft);
}

.dl-ctable__head {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  background: var(--primary);
  color: #fff;
  padding: 14px 28px;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.dl-ctable__row {
  display: grid;
  grid-template-columns: 140px 1fr 160px;
  padding: 16px 28px;
  border-bottom: 1px solid var(--line);
  align-items: center;
  transition: background 0.15s ease;
}

.dl-ctable__row:last-child { border-bottom: none; }
.dl-ctable__row:hover { background: var(--bg); }
.dl-ctable__row--muted { opacity: 0.6; }
.dl-ctable__row--muted:hover { opacity: 0.9; }

.dl-ctable__size {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.dl-ctable__row--muted .dl-ctable__size { color: var(--muted); }

.dl-ctable__avail {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}

.dl-ctable__avail--yes {
  color: #1a9e5c;
  background: #e6f9f0;
  padding: 4px 10px;
  border-radius: 100px;
  display: inline-block;
}

.dl-standorte__intro { margin-bottom: 40px; }

.dl-standorte__cols {
  display: grid;
  grid-template-columns: 1fr 20px 2fr;
  gap: 0 32px;
  align-items: start;
}

.dl-standorte__divider {
  width: 1px;
  background: var(--line);
  align-self: stretch;
  margin: 0 auto;
}

.dl-standorte__col-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

.dl-standorte__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.dl-standorte__list li {
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.97rem;
  font-weight: 600;
  color: var(--text);
  transition: color 0.15s ease, padding-left 0.15s ease;
}

.dl-standorte__list li:first-child { border-top: 1px solid var(--line); }
.dl-standorte__list li:hover { color: var(--primary); padding-left: 8px; }

.dl-standorte__list a { color: inherit; text-decoration: none; display: block; }
.dl-standorte__list a:hover { color: var(--primary); }

.dl-standorte__list--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.dl-standorte__list--grid li:nth-child(odd) { border-right: 1px solid var(--line); padding-right: 24px; }
.dl-standorte__list--grid li:nth-child(even) { padding-left: 24px; }

@media (max-width: 960px) {
  .dl-container__header { flex-direction: column; align-items: flex-start; }
  .dl-container__sub { text-align: left; }
  .dl-ctable__head, .dl-ctable__row { grid-template-columns: 100px 1fr 120px; padding: 12px 16px; }
  .dl-standorte__cols { grid-template-columns: 1fr; }
  .dl-standorte__divider { display: none; }
  .dl-standorte__list--grid { grid-template-columns: 1fr; }
  .dl-standorte__list--grid li:nth-child(odd),
  .dl-standorte__list--grid li:nth-child(even) { border-right: none; padding-left: 0; padding-right: 0; }
}

@media (max-width: 640px) {
  .dl-ctable__head { display: none; }
  .dl-ctable__row { grid-template-columns: 80px 1fr; }
  .dl-ctable__row > span:last-child { display: none; }
}

/* --- scroll-margin-top --- */
[id] { scroll-margin-top: 100px; }
/* --- Germanports ID im Hero --- */
.hero__bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 16px;
  margin-top: 16px;
  width: calc(100vw - 40px);
  max-width: 1180px;
}

.hero__sub {
  margin: 0;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  max-width: 58ch;
  line-height: 1.75;
  align-self: flex-start;
  padding-left: 0;
}

.hero__germanports {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: rgba(21, 96, 187, 0.35);
  border: 1px solid rgba(74, 159, 255, 0.4);
  border-radius: var(--radius-sm);
  backdrop-filter: blur(4px);
  flex-shrink: 0;
  white-space: nowrap;
}

.hero__germanports__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}

.hero__germanports__value {
  font-size: 0.92rem;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: 0.04em;
}

/* Hero: kurze, scannbare Highlights statt Fließtext */
.iw-hero-highlights {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-self: flex-start;
  gap: 10px 26px;
  max-width: 640px;
}
.iw-hero-highlight {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}
.iw-hero-highlight__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(74, 159, 255, 0.22);
  border: 1px solid rgba(74, 159, 255, 0.5);
  color: #8fd0ff;
}
@media (max-width: 640px) {
  .iw-hero-highlights { max-width: none; }
  .iw-hero-highlight { white-space: normal; }
}

/* --- Footer Copyright --- */
.footer-bottom {
  background: transparent;
  padding: 14px 0;
  border-top: 1px solid rgba(255,255,255,0.1);
}

.footer-bottom p {
  margin: 0;
  font-size: 0.82rem;
  color: rgba(255,255,255,0.72);
  text-align: center;
}


/* --- ADSp Link --- */
.adsp-link {
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 800;
  transition: opacity 0.2s ease;
}

.adsp-link:hover {
  opacity: 0.75;
}
/* --- Code of Conduct Block auf ueber-uns --- */
.coc-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: center;
}

.coc-block__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.coc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
}

.coc-item__icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

@media (max-width: 800px) {
  .coc-block { grid-template-columns: 1fr; gap: 32px; }
  .coc-block__items { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
  .coc-block__items { grid-template-columns: 1fr; }
}
/* --- Bewerbung Layout --- */
.bewerbung-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  align-items: start;
}

.bewerbung-kontakt {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 32px;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.bewerbung-kontakt__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.bewerbung-kontakt__email {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--primary);
  text-decoration: none;
}

.bewerbung-kontakt__email:hover { text-decoration: underline; }

.bewerbung-kontakt__hint {
  font-size: 0.82rem;
  color: var(--muted);
  margin-top: 2px;
}

.bewerbung-checklist__title {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 24px;
}

.bewerbung-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.bewerbung-step {
  display: flex;
  gap: 20px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}

.bewerbung-step:first-child { border-top: 1px solid var(--line); }

.bewerbung-step__num {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--primary);
  opacity: 0.2;
  line-height: 1;
  flex-shrink: 0;
  width: 36px;
}

.bewerbung-step strong {
  display: block;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 4px;
}

.bewerbung-step p {
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
}

@media (max-width: 800px) {
  .bewerbung-layout { grid-template-columns: 1fr; gap: 40px; }
}
/* ============================================================
   LANGUAGE SWITCHER
   ============================================================ */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-left: 28px;
  padding-left: 24px;
  border-left: 1px solid rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.header.is-scrolled .lang-switcher {
  border-left-color: rgba(21,96,187,0.2);
}
.lang-switcher__btn {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 10px;
  border-radius: 6px;
  color: rgba(255,255,255,0.55);
  background: transparent;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background 0.18s, color 0.18s;
  line-height: 1;
}
.header.is-scrolled .lang-switcher__btn {
  color: var(--text-2);
}
.lang-switcher__btn.is-active {
  color: #fff;
  background: rgba(255,255,255,0.18);
  border-radius: 6px;
}
.lang-switcher__btn:hover {
  color: #fff;
}
.header.is-scrolled .lang-switcher__btn.is-active {
  background: var(--primary);
  color: #fff;
}
.header.is-scrolled .lang-switcher__btn:hover {
  color: var(--primary);
  background: transparent;
}

@media (max-width: 720px) {
  .lang-switcher {
    margin-left: 0;
    margin-right: 12px;
    padding-left: 0;
    border-left: none;
  }
  .lang-switcher__btn {
    color: rgba(255,255,255,0.65);
  }
  .lang-switcher__btn.is-active {
    background: rgba(255,255,255,0.2);
    color: #fff;
  }
}

/* ============================================================
   STARTSEITE – ANIMATIONEN (Redesign-Entwurf, bereinigt nach Teil A)
   Additiv: neue Klassen (iw-*) und Modifier, verwendet nur in
   index.html und en/index.html. Animiert werden ausschließlich
   transform und opacity; Übergangsdauern kommen aus den Variablen.
   Geteilt mit anderen Seiten sind nur .footer (position/overflow
   für die Footer-Partikel) und der Block für reduzierte Bewegung.
   ============================================================ */

:root {
  --iw-dur-fast: 200ms;
  --iw-dur:      300ms;
  --iw-dur-slow: 400ms;
  --iw-dur-draw: 1200ms; /* bewusst langsam: Linien, die sich beim Scrollen zeichnen */
  --iw-ease:     cubic-bezier(.2, .8, .3, 1);
  --iw-ease-out: cubic-bezier(.16, 1, .3, 1);
}

@keyframes iw-float-particle {
  0%   { transform: translate(0, 0); opacity: 0; }
  10%  { opacity: .6; }
  85%  { opacity: .35; }
  100% { transform: translate(14px, -160px); opacity: 0; }
}
@keyframes iw-ring {
  0%       { transform: scale(1); opacity: .7; }
  70%,100% { transform: scale(1.08, 1.3); opacity: 0; }
}
@keyframes iw-fade-pulse {
  0%, 100% { opacity: 0; }
  50%      { opacity: 1; }
}
@keyframes iw-seam-flow   { to { transform: translateX(-50%); } }
@keyframes iw-sheen {
  0%   { transform: translateX(-130%) rotate(8deg); }
  100% { transform: translateX(650%) rotate(8deg); }
}
@keyframes iw-dotgrid-drift { to { transform: translate(22px, 22px); } }
@keyframes iw-kenburns    { 0% { transform: scale(1); } 100% { transform: scale(1.12); } }
@keyframes iw-line-rise   { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes iw-scroll-bob  { 0%, 100% { transform: translate(-50%, 0); opacity: .55; } 50% { transform: translate(-50%, 8px); opacity: 1; } }
@keyframes iw-node-pulse  { 0%, 100% { opacity: .9; transform: scale(1); } 50% { opacity: .2; transform: scale(1.9); } }
@keyframes iw-globe-sheen { 0%, 100% { transform: translateX(-40px); } 50% { transform: translateX(80px); } }
@keyframes iw-idle-vibrate {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(-0.6px, 0.4px); }
  50%      { transform: translate(0.5px, -0.4px); }
  75%      { transform: translate(-0.4px, 0.3px); }
}

/* --- Hero: Foto als eigene Ebene mit langsamem Zoom --- */
.hero {
  overflow: hidden;
  background: #0a1628; /* Foto kommt aus .iw-hero-bg, nicht doppelt laden/malen */
}
.hero .container { position: relative; z-index: 2; }

.iw-hero-bg {
  position: absolute;
  inset: -24px;
  z-index: 0;
  background: linear-gradient(rgba(8, 16, 32, .68), rgba(8, 16, 32, .68)), url('images/hero.jpg') center / cover no-repeat;
  background-image:
    linear-gradient(rgba(8, 16, 32, .68), rgba(8, 16, 32, .68)),
    image-set(url('images/hero.webp') type('image/webp'), url('images/hero.jpg') type('image/jpeg'));
  animation: iw-kenburns 26s ease-in-out infinite alternate;
  pointer-events: none;
}
/* Handy: Hochformat-Ausschnitt statt des breiten Fotos */
@media (max-width: 720px) {
  .iw-hero-bg {
    background-image:
      linear-gradient(rgba(8, 16, 32, .68), rgba(8, 16, 32, .68)),
      url('images/hero-mobile.jpg');
    background-image:
      linear-gradient(rgba(8, 16, 32, .68), rgba(8, 16, 32, .68)),
      image-set(url('images/hero-mobile.webp') type('image/webp'), url('images/hero-mobile.jpg') type('image/jpeg'));
  }
}

/* Hero-Headline: zeilenweise aufsteigen */
.hero h1 .iw-line {
  display: inline-block;
  opacity: 0;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .15s forwards;
}
.hero h1 .iw-line-2 { animation-delay: .35s; }

/* Hero: kurze, scannbare Highlights statt Fließtext (Basis-Styles weiter oben) */

/* Germanports-Badge: Puls als Ring-Ebene statt box-shadow */
.iw-badge-pulse { position: relative; }
.iw-badge-pulse::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  border: 2px solid rgba(74, 159, 255, .5);
  pointer-events: none;
  animation: iw-ring 2.8s ease-out infinite;
}

/* Scroll-Hinweis unten im Hero */
.iw-scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 22px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
  color: rgba(255,255,255,.8);
  background: rgba(255,255,255,.06);
  transform: translate(-50%, 0);
  animation: iw-scroll-bob 2.2s ease-in-out infinite;
  transition: border-color var(--iw-dur-fast) ease, color var(--iw-dur-fast) ease, background var(--iw-dur-fast) ease;
}
.iw-scroll-cue:hover { color: #fff; border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); }

/* Partikel über dem Foto und im Footer */
.iw-particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.iw-particles span {
  position: absolute;
  bottom: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 200, 130, .8);
  animation: iw-float-particle 10s ease-in infinite;
}
.iw-particles span:nth-child(1)  { left: 6%;  width: 4px; height: 4px; background: rgba(255,190,120,.75); animation-duration: 9s;    animation-delay: 0s; }
.iw-particles span:nth-child(2)  { left: 16%; width: 6px; height: 6px; background: rgba(120,190,255,.7);  animation-duration: 12s;   animation-delay: 1.6s; }
.iw-particles span:nth-child(3)  { left: 27%; width: 4px; height: 4px; background: rgba(255,190,120,.7);  animation-duration: 8.5s;  animation-delay: 3s; }
.iw-particles span:nth-child(4)  { left: 41%; width: 5px; height: 5px; background: rgba(255,255,255,.55); animation-duration: 11s;   animation-delay: .6s; }
.iw-particles span:nth-child(5)  { left: 58%; width: 6px; height: 6px; background: rgba(120,190,255,.7);  animation-duration: 10.5s; animation-delay: 4.2s; }
.iw-particles span:nth-child(6)  { left: 69%; width: 4px; height: 4px; background: rgba(255,190,120,.7);  animation-duration: 13s;   animation-delay: 2.2s; }
.iw-particles span:nth-child(7)  { left: 81%; width: 5px; height: 5px; background: rgba(255,255,255,.5);  animation-duration: 9.5s;  animation-delay: 5s; }
.iw-particles span:nth-child(8)  { left: 92%; width: 4px; height: 4px; background: rgba(120,190,255,.65); animation-duration: 11.5s; animation-delay: 1s; }
.iw-particles span:nth-child(9)  { left: 12%; width: 5px; height: 5px; background: rgba(255,255,255,.5);  animation-duration: 10.2s; animation-delay: 2.8s; }
.iw-particles span:nth-child(10) { left: 24%; width: 4px; height: 4px; background: rgba(120,190,255,.6);  animation-duration: 12.4s; animation-delay: .9s; }
.iw-particles span:nth-child(11) { left: 47%; width: 6px; height: 6px; background: rgba(255,190,120,.65); animation-duration: 9.8s;  animation-delay: 3.6s; }
.iw-particles span:nth-child(12) { left: 63%; width: 4px; height: 4px; background: rgba(255,255,255,.45); animation-duration: 11.8s; animation-delay: 1.4s; }
.iw-particles span:nth-child(13) { left: 75%; width: 5px; height: 5px; background: rgba(120,190,255,.6);  animation-duration: 10.6s; animation-delay: 4.8s; }
.iw-particles span:nth-child(14) { left: 88%; width: 4px; height: 4px; background: rgba(255,190,120,.55); animation-duration: 13.4s; animation-delay: 2.6s; }

.footer { position: relative; overflow: hidden; }
.iw-particles--footer { opacity: .55; }
.iw-particles--footer span { background: rgba(150, 200, 255, .5) !important; }

/* --- Globus mit Routen, direkt ins Foto gemischt (nur ab 901px) --- */
.iw-globe {
  position: absolute;
  right: clamp(10px, 5vw, 90px);
  top: 90px;
  z-index: 1;
  width: clamp(300px, 35vw, 540px);
  max-width: 52%;
  height: auto;
  pointer-events: none;
  mix-blend-mode: screen;
}
@media (max-width: 1150px) {
  .iw-globe { top: 70px; right: clamp(8px, 3vw, 50px); width: clamp(240px, 30vw, 360px); }
}

.iw-globe__sheen { animation: iw-globe-sheen 12s ease-in-out infinite; }
.iw-globe__hub-ring { animation: iw-node-pulse 2.6s ease-in-out infinite; transform-origin: 176px 182px; }
/* Checkpoints leuchten nacheinander auf, wie Stationen, die passiert werden */
.iw-globe__checkpoint {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: iw-node-pulse 2.4s ease-in-out infinite;
}
.iw-globe__checkpoint--1 { animation-delay: 2.6s; }
.iw-globe__checkpoint--2 { animation-delay: 5.3s; }
.iw-globe__checkpoint--3 { animation-delay: 4.3s; }
.iw-globe__checkpoint--4 { animation-delay: 7.5s; }

/* Standort-Ping (script.js, nur mit Maus): Marker schrumpft ein, Route blendet ein,
   Punkt fährt die Kurve entlang, Ankunft blinkt kurz auf, alles blendet aus */
.iw-locate-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  z-index: 4;
}
.iw-locate-path {
  fill: none;
  stroke: rgba(143,208,255,.55);
  stroke-width: 2;
  stroke-dasharray: 3 9;
  stroke-linecap: round;
  opacity: 0;
  transition: opacity var(--iw-dur-slow) ease;
}
.iw-locate-path.is-visible { opacity: 1; }
.iw-locate-path.is-fading  { opacity: 0; }

.iw-locate-traveler { opacity: 0; }
.iw-locate-traveler .iw-locate-traveler__halo { fill: #8fd0ff; opacity: .32; }
.iw-locate-traveler .iw-locate-traveler__core { fill: #eaf5ff; }
.iw-locate-traveler.is-moving {
  animation-name: iw-traveler-fade;
  animation-timing-function: ease;
  animation-fill-mode: forwards;
}

.iw-locate-dot {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  background: rgba(255,255,255,.92);
  pointer-events: none;
  z-index: 5;
  transform: scale(3.2);
  transition: transform var(--iw-dur-slow) var(--iw-ease), opacity var(--iw-dur-slow) ease;
}
.iw-locate-dot.is-in     { transform: scale(1); }
.iw-locate-dot.is-blink  { animation: iw-locate-blink var(--iw-dur-slow) ease; }
.iw-locate-dot.is-fading { opacity: 0; }
.iw-locate-dot::before {
  content: "";
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  border: 2px solid rgba(74,158,255,.7);
  animation: iw-locate-ring 1.5s ease-out infinite;
}
@keyframes iw-locate-ring  { 0% { transform: scale(.4); opacity: .9; } 100% { transform: scale(1.7); opacity: 0; } }
@keyframes iw-locate-blink { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.9); } }
@keyframes iw-traveler-fade { 0% { opacity: 0; } 10%, 85% { opacity: 1; } 100% { opacity: 0; } }

/* --- Nahtlinie zwischen Hero und Trust-Bar: Verlauf als verschobene Ebene --- */
.iw-hero-seam {
  position: relative;
  height: 3px;
  overflow: hidden;
  background: var(--primary);
}
.iw-hero-seam::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background: linear-gradient(90deg, var(--primary), #4a9eff, #0f2244, var(--primary), #4a9eff, #0f2244, var(--primary));
  animation: iw-seam-flow 9s linear infinite;
}

/* --- Trust-Bar als Zug aus Container-Waggons --- */
.trust-bar { position: relative; overflow: hidden; }
/* Schienen-Schwellen am unteren Rand */
.trust-bar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 6px;
  background:
    repeating-linear-gradient(90deg, rgba(0,0,0,.4) 0 4px, transparent 4px 26px),
    rgba(0,0,0,.22);
  opacity: .6;
  pointer-events: none;
}
/* Lok vor den Waggons; nur sie vibriert leicht (Motor im Leerlauf), der Text bleibt ruhig */
.iw-loco { width: 84px; height: 118px; display: flex; align-items: center; }
.iw-loco__svg { width: 100%; height: auto; display: block; animation: iw-idle-vibrate .28s steps(2) infinite; }

.trust-bar__grid--5 { grid-template-columns: auto repeat(5, 1fr); align-items: center; }
@media (max-width: 960px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(3, 1fr); }
  .iw-loco { display: none; }
}
/* Handy: erst zwei, dann eine Spalte, damit die Waggons nicht zu schmal werden */
@media (max-width: 640px) {
  .trust-bar__grid--5 { grid-template-columns: repeat(2, 1fr); }
  .trust-item__value { font-size: 1rem; }
}
@media (max-width: 380px) {
  .trust-bar__grid--5 { grid-template-columns: 1fr; }
}

/* Jede Kachel = ein gleich großer Container-Waggon */
.trust-item {
  position: relative;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin: 5px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.12);
}

/* --- Leistungs-Karten --- */
.iw-icon-bob { display: inline-flex; }

/* Ersatz-Icon "Operative Steuerung" statt Emoji – Badge im Look der Foto-Icons */
.iw-icon-badge {
  width: 80px;
  height: 80px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(74, 159, 255, .9), rgba(15, 34, 68, .96) 72%);
  box-shadow: 0 4px 14px rgba(15, 23, 42, .25);
}

/* Lichtstreif + etwas mehr Lift, nur bei echter Maus (auf Touch kein Hover) */
@media (hover: hover) and (pointer: fine) {
  .card::after {
    content: "";
    position: absolute;
    top: -60%;
    left: -60%;
    width: 40%;
    height: 220%;
    background: linear-gradient(115deg, transparent, rgba(21,96,187,.16), transparent);
    transform: translateX(-40%) rotate(12deg);
    transition: transform calc(var(--iw-dur-slow) * 1.5) ease;
    pointer-events: none;
  }
  .card:hover::after { transform: translateX(340%) rotate(12deg); }
  .card:hover { transform: translateY(-7px) scale(1.015); }
}

.why-card { position: relative; overflow: hidden; }

/* --- Über-uns-Kennzahlen: sanftes Glühen als eingeblendete Ebene --- */
.about-stat.iw-stat { position: relative; }
.about-stat.iw-stat::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 20px 2px rgba(21,96,187,.22);
  opacity: 0;
  pointer-events: none;
  animation: iw-fade-pulse 3.2s ease-in-out infinite;
}
.about-stat.iw-stat:nth-child(2)::after { animation-delay: .5s; }
.about-stat.iw-stat:nth-child(3)::after { animation-delay: 1s; }
.about-stat.iw-stat:nth-child(4)::after { animation-delay: 1.5s; }

/* --- CTA-Banner: Lichtstreif, Punktraster, pulsierender Button --- */
.cta-banner--sheen .cta-banner__inner { isolation: isolate; }
.cta-banner--sheen .cta-banner__inner::before {
  top: -60%;
  left: 0;
  right: auto;
  width: 18%;
  height: 220%;
  border-radius: 0;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,.18), transparent);
  transform: translateX(-130%) rotate(8deg);
  animation: iw-sheen 7s ease-in-out infinite;
  z-index: 0;
}
/* Punktraster über die ganze Fläche statt der Kreise; Ebene etwas größer, damit beim Verschieben kein Rand sichtbar wird */
.cta-banner--sheen .cta-banner__inner::after {
  top: -22px;
  left: -22px;
  right: 0;
  bottom: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: radial-gradient(rgba(255,255,255,.18) 1.5px, transparent 1.5px) 0 0 / 22px 22px;
  opacity: .5;
  animation: iw-dotgrid-drift 14s linear infinite;
  z-index: 0;
}
.cta-banner--sheen .cta-banner__inner > * { position: relative; z-index: 1; }
.cta-banner--sheen .btn--white { position: relative; }
.cta-banner--sheen .btn--white::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid rgba(255, 255, 255, .55);
  pointer-events: none;
  animation: iw-ring 2.6s ease-out infinite;
}

/* --- Mobil: aufwendige Ebenen weglassen --- */
@media (max-width: 900px) {
  .iw-globe { display: none; }
}
@media (max-width: 720px) {
  .iw-particles,
  .iw-scroll-cue { display: none; }
}

/* --- Reduzierte Bewegung: keine Bewegung, alles sofort sichtbar --- */
@media (prefers-reduced-motion: reduce) {
  .iw-particles,
  .iw-globe__travelers,
  .iw-locate-svg,
  .iw-locate-dot,
  .iw-badge-pulse::after,
  .about-stat.iw-stat::after,
  .cta-banner--sheen .cta-banner__inner::before,
  .cta-banner--sheen .btn--white::after,
  .card::after { display: none !important; }

  .iw-hero-bg,
  .iw-hero-seam::before,
  .iw-scroll-cue,
  .iw-loco__svg,
  .iw-globe__sheen,
  .iw-globe__hub-ring,
  .iw-globe__checkpoint,
  .cta-banner--sheen .cta-banner__inner::after { animation: none !important; }

  .hero h1 .iw-line { animation: none !important; opacity: 1 !important; transform: none !important; }
  .card:hover { transform: none !important; }

  /* gilt seitenweit: Scroll-Einblendungen und Seitenübergang ohne Bewegung */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .page-transition { display: none !important; }
}

/* ============================================================
   KUNDENKONTO – Teil B1: Benutzer-Icon im Header + Seite „Konto anfragen“
   Gilt auf allen Seiten. Menü ist ein <details>, funktioniert also
   ohne JavaScript; script.js schließt es nur bei Klick daneben/Escape.
   ============================================================ */

.user-menu {
  position: relative;
  margin-left: 28px;
  flex-shrink: 0;
}
.user-menu__toggle {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  color: #fff;
  cursor: pointer;
  transition: background var(--iw-dur-fast) ease, border-color var(--iw-dur-fast) ease, color var(--iw-dur-fast) ease;
}
.user-menu__toggle::-webkit-details-marker { display: none; }
.user-menu__toggle:hover,
.user-menu[open] .user-menu__toggle { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.7); }
.user-menu__toggle:focus-visible { outline: 2px solid #4a9eff; outline-offset: 2px; }

.header.is-scrolled .user-menu__toggle { color: #183f8f; border-color: rgba(21,96,187,0.3); }
.header.is-scrolled .user-menu__toggle:hover,
.header.is-scrolled .user-menu[open] .user-menu__toggle { background: var(--primary-tint); border-color: var(--primary); }

.user-menu__panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  min-width: 210px;
  padding: 8px;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  z-index: 1200;
  transform-origin: top right;
}
.user-menu[open] .user-menu__panel { animation: user-menu-in var(--iw-dur-fast) var(--iw-ease); }
@keyframes user-menu-in { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }

.user-menu__item {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  white-space: nowrap;
}
a.user-menu__item:hover,
a.user-menu__item:focus-visible { background: var(--primary-tint); color: var(--primary); outline: none; }
/* „Einloggen“: sichtbar, aber noch ohne Funktion */
.user-menu__item--inactive { cursor: default; }

/* Platz für das Icon: Navigation bricht auf schmaleren Desktop-Breiten nicht um */
.nav-links > a,
.nav-dropdown__trigger { white-space: nowrap; }
@media (min-width: 961px) and (max-width: 1200px) {
  .nav-links { gap: 30px; }
  .user-menu { margin-left: 20px; }
  .lang-switcher { margin-left: 20px; padding-left: 18px; }
}
/* Hamburger-Menü auch auf Tablet-Breiten (vorher erst ab 720px; dazwischen schrumpfte das Logo und die Navigation brach um) */
@media (min-width: 721px) and (max-width: 960px) {
  .nav-toggle { display: flex; }
  .nav-links {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 22, 50, 0.97);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 36px;
    z-index: 999;
  }
  .nav-links.is-open { display: flex; }
  .nav-links > a,
  .nav-links .nav-dropdown > a {
    font-size: 1.6rem;
    color: #fff !important;
    text-align: center;
  }
  .nav-links > a::after,
  .nav-links .nav-dropdown > a::after {
    display: none !important;
    content: none !important;
  }
  .lang-switcher { margin-left: 0; margin-right: 12px; padding-left: 0; border-left: none; }
}
@media (max-width: 960px) {
  .user-menu { margin-left: 4px; margin-right: 8px; }
  .user-menu__toggle { width: 36px; height: 36px; }
}

/* --- Seite „Konto anfragen“ --- */
.account-request {
  padding: 140px 0 80px;
  max-width: 900px;
}
.account-request h1 { margin: 6px 0 16px; font-size: clamp(2rem, 5vw, 2.6rem); color: var(--text); }
.account-request__lead { margin: 0 0 28px; max-width: 62ch; color: var(--text-2); line-height: 1.75; font-size: 1.05rem; }
.account-request__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.account-request__note {
  margin: 20px 0 40px;
  padding: 14px 18px;
  max-width: 62ch;
  border-left: 3px solid var(--primary);
  background: var(--primary-tint);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  color: var(--text-2);
  line-height: 1.65;
}
.account-request__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.account-request__card {
  padding: 28px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  min-width: 0;
}
.account-request__card h2 { margin: 0 0 14px; font-size: 1.2rem; color: var(--text); }
.account-request__card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.65; }
.account-request__fields { list-style: none; margin: 0; padding: 0; }
.account-request__fields li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  color: var(--text);
  font-weight: 600;
  font-size: 0.95rem;
}
.account-request__fields li:last-child { border-bottom: none; }
.account-request__need { color: var(--text-3); font-weight: 500; text-align: right; }
.account-request__subject { font-size: 0.92rem; overflow-wrap: anywhere; }
.account-request__template {
  margin: 0 0 14px;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 0.85rem;
  line-height: 1.6;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text);
}
.account-request__privacy { margin: 28px 0 0; color: var(--muted); font-size: 0.92rem; }

@media (max-width: 720px) {
  .account-request { padding: 110px 0 56px; }
  .account-request__grid { grid-template-columns: 1fr; }
  .account-request__actions .btn { width: 100%; }
  .account-request__fields li { flex-direction: column; gap: 2px; }
  .account-request__need { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .user-menu[open] .user-menu__panel { animation: none; }
}

/* ============================================================
   UNTERSEITEN – Teil A (zuerst Dienstleistungen / Services)
   Wiederverwendbare Bausteine für alle Seiten mit .page-hero;
   aktiviert nur, wo die Modifier-Klassen im HTML stehen.
   ============================================================ */

/* Hero: Foto als Klasse statt Inline-Style, damit WebP und Handy-Ausschnitt greifen */
.page-hero__bg--dienstleistung {
  background-image: url('images/dienstleistung.jpg');
  background-image: image-set(url('images/dienstleistung.webp') type('image/webp'), url('images/dienstleistung.jpg') type('image/jpeg'));
}
@media (max-width: 720px) {
  .page-hero__bg--dienstleistung {
    background-image: url('images/dienstleistung-mobile.jpg');
    background-image: image-set(url('images/dienstleistung-mobile.webp') type('image/webp'), url('images/dienstleistung-mobile.jpg') type('image/jpeg'));
  }
}

.page-hero__bg--ueber-uns {
  background-image: url('images/ueber-uns.jpg');
  background-image: image-set(url('images/ueber-uns.webp') type('image/webp'), url('images/ueber-uns.jpg') type('image/jpeg'));
}
.page-hero__bg--karriere {
  background-image: url('images/karriere.jpg');
  background-image: image-set(url('images/karriere.webp') type('image/webp'), url('images/karriere.jpg') type('image/jpeg'));
}
.page-hero__bg--kontakt {
  background-image: url('images/kontakt.jpg');
  background-image: image-set(url('images/kontakt.webp') type('image/webp'), url('images/kontakt.jpg') type('image/jpeg'));
}
@media (max-width: 720px) {
  .page-hero__bg--ueber-uns {
    background-image: url('images/ueber-uns-mobile.jpg');
    background-image: image-set(url('images/ueber-uns-mobile.webp') type('image/webp'), url('images/ueber-uns-mobile.jpg') type('image/jpeg'));
  }
  .page-hero__bg--karriere {
    background-image: url('images/karriere-mobile.jpg');
    background-image: image-set(url('images/karriere-mobile.webp') type('image/webp'), url('images/karriere-mobile.jpg') type('image/jpeg'));
  }
  .page-hero__bg--kontakt {
    background-image: url('images/kontakt-mobile.jpg');
    background-image: image-set(url('images/kontakt-mobile.webp') type('image/webp'), url('images/kontakt-mobile.jpg') type('image/jpeg'));
  }
}

/* Hero: langsamer Zoom aufs Foto, Inhalt steigt zeilenweise auf (reines CSS, auch ohne JS) */
.page-hero--animated .page-hero__bg { animation: iw-kenburns 26s ease-in-out infinite alternate; }
.page-hero--animated .page-hero__content > * {
  opacity: 0;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) forwards;
}
.page-hero--animated .page-hero__content > :nth-child(1) { animation-delay: .1s; }
.page-hero--animated .page-hero__content > :nth-child(2) { animation-delay: .2s; }
.page-hero--animated .page-hero__content > :nth-child(3) { animation-delay: .35s; }

/* Icon-Badge in den Leistungsblöcken auf Spaltenbreite */
.service-block__icon .iw-icon-badge { width: 72px; height: 72px; }

/* Ablauf: Verbindungslinie zwischen den Schritten, zeichnet sich beim Hinscrollen.
   Liegt hinter den Karten und ist nur in den Lücken sichtbar. */
.steps--route { position: relative; }
.steps--route .step { z-index: 1; }
.steps--route::before {
  content: "";
  position: absolute;
  z-index: 0;
  background: linear-gradient(90deg, var(--primary), #4a9eff);
  pointer-events: none;
  /* Desktop: waagerecht auf Höhe der Nummern */
  left: 24px;
  right: 24px;
  top: 50px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--iw-dur-draw) var(--iw-ease);
}
.steps--route:has(.step.is-visible)::before { transform: scaleX(1); }
/* Tablet (2 Spalten): keine Linie, sie würde quer durch die Reihen laufen */
@media (min-width: 721px) and (max-width: 960px) {
  .steps--route::before { display: none; }
}
/* Handy (1 Spalte): senkrecht auf Höhe der Nummern */
@media (max-width: 720px) {
  .steps--route::before {
    left: 46px;
    right: auto;
    top: 50px;
    bottom: 50px;
    width: 2px;
    height: auto;
    background: linear-gradient(180deg, var(--primary), #4a9eff);
    transform: scaleY(0);
    transform-origin: center top;
  }
  .steps--route:has(.step.is-visible)::before { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
  .page-hero--animated .page-hero__bg { animation: none; }
  .page-hero--animated .page-hero__content > * { animation: none; opacity: 1; transform: none; }
  .steps--route::before { transition: none; transform: none !important; }
}

/* Linien-Icons statt Emojis (Werte, Verhaltenskodex, Benefits, Karten-Hinweis) */
.value-card__icon { color: var(--primary); }
.value-card__icon svg,
.benefit-card__icon svg,
.coc-item__icon svg,
.map-consent__icon svg { display: block; }
.benefit-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--primary-tint);
  color: var(--primary);
}
.coc-item__icon { color: var(--primary); margin-top: 2px; }
.map-consent__icon { color: var(--primary); display: inline-flex; }

/* Karten mit Icon: etwas Lift, nur bei echter Maus */
@media (hover: hover) and (pointer: fine) {
  .value-card,
  .benefit-card { transition: transform var(--iw-dur) var(--iw-ease), box-shadow var(--iw-dur) ease; }
  .value-card:hover,
  .benefit-card:hover { transform: translateY(-4px); }
  .value-card:hover .value-card__icon,
  .benefit-card:hover .benefit-card__icon { transform: scale(1.08); }
  .value-card__icon,
  .benefit-card__icon { transition: transform var(--iw-dur) var(--iw-ease); }
}
@media (prefers-reduced-motion: reduce) {
  .value-card:hover,
  .benefit-card:hover,
  .value-card:hover .value-card__icon,
  .benefit-card:hover .benefit-card__icon { transform: none; }
}

/* ============================================================
   PROTOTYP „UNSER NETZ“ (netz-prototyp.html, nicht verlinkt)
   Hero: Titel, Netzkarte, Terminal-Buttons (steuern die Karte),
   Info-Box. Darunter die Schnellanfrage als farbiger Block.
   Animiert werden nur transform und opacity.
   Farben: Seehäfen helles Blau, Inlandsterminals dunkleres Blau.
   ============================================================ */

:root {
  --nz-hafen: #4a9eff;
  --nz-hafen-soft: rgba(74, 159, 255, .2);
  --nz-inland: #1560bb;
  --nz-inland-soft: rgba(21, 96, 187, .32);
  --nz-navy: #0a1628;
}

.nz-proto-note {
  position: fixed;
  z-index: 1001;
  left: 12px;
  bottom: 12px;
  max-width: 340px;
  margin: 0;
  padding: 10px 14px;
  background: #eaf1fb;
  color: #0f2244;
  border: 1px solid #4a9eff;
  border-radius: 10px;
  box-shadow: var(--shadow);
  font-size: 0.82rem;
  line-height: 1.45;
}
.nz-proto-note strong { color: inherit; }
.nz-proto-note__close {
  float: right;
  margin: -4px -6px 0 8px;
  padding: 0 6px;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1.1rem;
  line-height: 1;
  color: inherit;
  cursor: pointer;
}

/* --- Hero --- */
.nz-hero {
  min-height: auto;
  padding: 120px 0 64px;
  background:
    radial-gradient(ellipse 60% 55% at 75% 35%, rgba(74,159,255,.20) 0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 12% 30%, rgba(21,96,187,.22) 0%, transparent 70%),
    linear-gradient(180deg, #0d1d38 0%, var(--nz-navy) 85%);
  color: #fff;
}
.nz-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas:
    "title  map"
    "picker map"
    "info   map"
    "plan   plan";
  grid-template-rows: auto auto 1fr auto;
  column-gap: 48px;
  row-gap: 28px;
  align-items: start;
}
.nz-hero__kopf { grid-area: title; margin-top: 16px; }
.nz-hero__title {
  margin: 0 0 12px;
  font-size: clamp(2.4rem, 4.6vw, 4rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .1s forwards;
}
.nz-hero__lead { margin: 0; max-width: 46ch; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,.72); }

/* Auswahl: oben die Leiste „Start → Ziel“, darunter die Terminals als gleich große Knöpfe in einem Raster */
.nz-picker { grid-area: picker; }
.nz-wahl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 10px; }
.nz-wahl__slot { flex: 1 1 170px; display: flex; flex-direction: column; gap: 3px; min-height: 64px; justify-content: center; padding: 10px 16px; border-radius: 12px; border: 1px dashed rgba(255,255,255,.25); transition: border-color .25s ease, background-color .25s ease; }
.nz-wahl__k { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.nz-wahl__v { font-size: 1.15rem; font-weight: 700; color: rgba(255,255,255,.55); }
.nz-wahl__slot.is-gesetzt { border-style: solid; border-color: #8fd0ff; background: rgba(143,208,255,.1); }
.nz-wahl__slot.is-gesetzt .nz-wahl__v { color: #fff; }
.nz-wahl__slot.is-neu { animation: nz-slot-neu .45s cubic-bezier(.2,1.4,.4,1); }
@keyframes nz-slot-neu { 0% { transform: scale(.94); } 60% { transform: scale(1.03); } 100% { transform: none; } }
.nz-wahl__pfeil { font-size: 1.3rem; color: rgba(255,255,255,.4); }
.nz-wahl__reset { min-height: 44px; padding: 0 4px; border: 0; background: none; font: inherit; font-size: .95rem; font-weight: 700; color: #8fd0ff; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.nz-wahl__reset:hover { color: #fff; }
.nz-wahl__reset[hidden] { display: none; }
.nz-step { min-height: 1.5em; margin: 0 0 22px; font-size: 1rem; font-weight: 600; color: #8fd0ff; }
.nz-picker__label { margin: 0 0 10px; font-size: .74rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.nz-chips { list-style: none; margin: 0 0 24px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.nz-chip {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.04);
  font: inherit; font-size: 1.05rem; font-weight: 700; text-align: left; color: rgba(255,255,255,.88); cursor: pointer;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease, opacity .25s ease;
}
.nz-chip__dot { flex-shrink: 0; width: 10px; height: 10px; border-radius: 50%; background: var(--nz-inland); box-shadow: 0 0 0 1.5px #8fd0ff; }
.nz-chip--hafen .nz-chip__dot { width: 12px; height: 12px; background: var(--nz-hafen); box-shadow: 0 0 0 1.5px #fff; }
.nz-chip--anfrage { border-style: dashed; color: rgba(255,255,255,.62); font-weight: 600; }
.nz-chip--anfrage .nz-chip__dot { background: var(--nz-navy); box-shadow: 0 0 0 1.5px #8fd0ff; }
.nz-chip:hover { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.32); color: #fff; }
.nz-chip:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 3px; }
/* Mit gewähltem Start: mögliche Ziele bleiben klar, feste Partner leuchten, der Rest tritt zurück */
.has-start .nz-chip { opacity: .38; }
.has-start .nz-chip.is-moeglich, .has-start .nz-chip.is-active { opacity: 1; }
.nz-chip.is-linked { border-color: rgba(143,208,255,.6); box-shadow: 0 0 0 1px rgba(143,208,255,.25), 0 0 18px rgba(74,159,255,.18); color: #fff; }
.nz-chip.is-active { border-color: #8fd0ff; background: #8fd0ff; color: var(--nz-navy); }
.nz-chip.is-active .nz-chip__dot { background: var(--nz-navy); box-shadow: 0 0 0 1.5px var(--nz-navy); }
/* Impuls beim Auswählen: Knopf federt, ein Ring läuft nach außen */
.nz-chip::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; border: 2px solid #8fd0ff; opacity: 0; pointer-events: none; }
.nz-chip.is-picked { animation: nz-pick .45s cubic-bezier(.2,1.4,.4,1); }
.nz-chip.is-picked::before { animation: nz-pick-ring .7s ease-out; }
@keyframes nz-pick { 0% { transform: scale(.95); } 55% { transform: scale(1.04); } 100% { transform: none; } }
@keyframes nz-pick-ring { 0% { opacity: .9; transform: scale(1); } 100% { opacity: 0; transform: scale(1.18, 1.5); } }
.nz-picker__noscript { margin: 0; font-size: .95rem; color: rgba(255,255,255,.8); }

.nz-map { grid-area: map; position: sticky; top: 100px; }
.nz-legend { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: .95rem; color: rgba(255,255,255,.65); }
.nz-legend li { display: inline-flex; align-items: center; gap: 6px; }
.nz-legend__port { fill: var(--nz-hafen); stroke: #fff; stroke-width: 1.2; }
.nz-legend__fest { fill: var(--nz-inland); stroke: #8fd0ff; stroke-width: 1; }
.nz-legend__anfrage { fill: var(--nz-navy); stroke: #8fd0ff; stroke-width: 1.4; }
.nz-svg { display: block; width: 100%; max-width: 600px; height: auto; margin: 0 auto; overflow: visible; }
.nz-land { fill: rgba(74,159,255,.08); stroke: rgba(143,208,255,.4); stroke-width: 1.4; stroke-linejoin: round; }
/* Deutschland und Österreich kräftig, Benelux zurückgenommen, übrige Nachbarn nur als Andeutung */
.nz-land--benelux { fill: rgba(74,159,255,.05); stroke: rgba(143,208,255,.26); stroke-width: 1.1; }
.nz-land--neighbor { display: none; } /* Nachbarländer ausgeblendet: der Zuschnitt am Kartenrand zeichnete sonst ein sichtbares Rechteck */
.nz-route {
  fill: none;
  stroke: var(--nz-inland);
  stroke-width: 1.4;
  stroke-dasharray: 3 6;
  stroke-linecap: round;
  opacity: .28;
  transition: opacity var(--iw-dur) ease;
}
.nz-svg.has-active .nz-route { opacity: .08; }
.nz-svg.has-active .nz-route.is-active { opacity: .9; stroke: #8fd0ff; stroke-width: 2; stroke-dasharray: none; } /* gewählt: durchgezogen, damit eng liegende Linien unterscheidbar bleiben */
.nz-svg.has-active .nz-route--anfrage.is-active { stroke-dasharray: 2 5; }

.nz-hq rect { fill: #fff; }
.nz-hq__label { fill: rgba(255,255,255,.8); font-size: 12.5px; font-weight: 700; letter-spacing: .04em; }

.nz-node { cursor: pointer; }
.nz-node__hit { fill: transparent; }
.nz-node__dot { fill: var(--nz-inland); stroke: #8fd0ff; stroke-width: 1; transform-box: fill-box; transform-origin: center; transition: transform var(--iw-dur-fast) var(--iw-ease); }
.nz-node:hover .nz-node__dot { transform: scale(1.4); }
/* Impuls beim Auswählen: Ring läuft vom Punkt nach außen */
.nz-node__burst { fill: none; stroke: #8fd0ff; stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; pointer-events: none; }
.nz-node.is-picked .nz-node__burst { animation: nz-burst .8s ease-out; }
@keyframes nz-burst { 0% { opacity: .95; transform: scale(.6); } 100% { opacity: 0; transform: scale(3.2); } }
.nz-node--hafen .nz-node__dot { fill: var(--nz-hafen); stroke: #fff; }
.nz-node__ring {
  fill: none;
  stroke: var(--nz-inland);
  stroke-width: 1.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}
.nz-node--hafen .nz-node__ring { stroke: #8fd0ff; }
.nz-node__label { fill: rgba(255,255,255,.78); font-size: 14px; font-weight: 600; }
.nz-node--hafen .nz-node__label { fill: #fff; font-weight: 800; font-size: 15px; }
.nz-node.is-active .nz-node__ring { animation: iw-node-pulse 1.8s ease-in-out infinite; opacity: .9; }
.nz-node.is-active .nz-node__label { fill: #fff; }
/* Ziele auf Anfrage: hohler Punkt, leisere Beschriftung, Strecke nur gestrichelt bei Auswahl */
.nz-node--anfrage .nz-node__dot,
.nz-node--hafen.nz-node--anfrage .nz-node__dot { fill: var(--nz-navy); stroke: #8fd0ff; stroke-width: 1.4; }
.nz-node--anfrage .nz-node__label,
.nz-node--hafen.nz-node--anfrage .nz-node__label { fill: rgba(255,255,255,.55); font-size: 12.5px; font-weight: 500; }
.nz-node--anfrage.is-active .nz-node__label { fill: #fff; }
.nz-route--anfrage { stroke: #8fd0ff; stroke-dasharray: 2 5; }
.nz-route--anfrage:not(.is-active) { opacity: 0 !important; }

.nz-traveler rect { fill: #fff; stroke: var(--nz-hafen); stroke-width: 1.5; }
.nz-traveler { opacity: 0; transition: opacity var(--iw-dur-fast) ease; }
.nz-traveler.is-moving { opacity: 1; }

/* --- Anfrage direkt unter der gewählten Relation (klappt auf Klick auf) --- */
.nz-main { background: var(--nz-navy); }
.nz-hero { padding-bottom: 96px; }

.nz-req {
  margin-top: 22px;
  color-scheme: dark;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out);
}
.nz-req[hidden] { display: none; }
.nz-req__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 16px;
}
.nz-req__full { grid-column: 1 / -1; }
.nz-req label { gap: 6px; font-size: .88rem; color: rgba(255,255,255,.8); }
.nz-req input,
.nz-req select,
.nz-req textarea {
  min-height: 44px;
  padding: 10px 14px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(143,208,255,.25);
  border-radius: 8px;
  color: #fff;
}
.nz-req textarea { min-height: 70px; }
.nz-req input::placeholder,
.nz-req textarea::placeholder { color: rgba(255,255,255,.42); }
.nz-req input:focus,
.nz-req select:focus,
.nz-req textarea:focus {
  background: rgba(255,255,255,.1);
  border-color: #8fd0ff;
  box-shadow: 0 0 0 3px rgba(143,208,255,.18);
}
.nz-req option,
.nz-req optgroup { background: #0f2244; color: #fff; }
.nz-req__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin-top: 18px; }
.nz-req .btn { min-width: 0; background: #8fd0ff; color: var(--nz-navy); box-shadow: none; }
.nz-req .btn:hover { background: #fff; }
.nz-req__hint { flex: 1 1 220px; margin: 0; font-size: .88rem; line-height: 1.5; color: rgba(255,255,255,.75); }
.nz-req__hint.is-error { color: #ffb4a8; font-weight: 600; }
.nz-req__note { margin: 14px 0 0; font-size: .82rem; line-height: 1.55; color: rgba(255,255,255,.5); }

@media (max-width: 960px) {
  .nz-hero__inner {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "title" "picker" "map" "info" "plan";
    grid-template-rows: auto;
    row-gap: 20px;
  }
  .nz-map { position: static; }
  .nz-svg { max-width: 440px; }
}
@media (max-width: 720px) {
  .nz-hero { padding: 96px 0 40px; }
  .nz-hero__title { margin-top: 8px; }
  .nz-chips { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); }
  .nz-hero { padding-bottom: 56px; }
  .nz-req__grid { grid-template-columns: 1fr; }
  .nz-req .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .nz-hero__title { animation: none; opacity: 1; transform: none; }
  .nz-info__cta:hover,
  .nz-node:hover .nz-node__dot { transform: none; }
  .nz-node.is-active .nz-node__ring { animation: none; }
  .nz-node.is-picked .nz-node__burst, .nz-chip.is-picked, .nz-chip.is-picked::before, .nz-wahl__slot.is-neu { animation: none; }
  .nz-traveler { display: none; }
  .nz-req { animation: none; }
}

/* Rechtsseiten: Stand-Vermerk am Ende */
.legal-stand { margin: 32px 0 0; font-size: 0.9rem; color: var(--muted); }

/* Kontaktformular: Hinweis zum Mail-Entwurf */
.contact-form__note { margin: 0; font-size: 0.9rem; line-height: 1.6; color: var(--text-2); }
.contact-form__note a { color: var(--primary); font-weight: 600; }

/* Prototyp-Seite ist durchgehend dunkel: Header bleibt auch beim Scrollen dunkel */
.nz-page .header.is-scrolled {
  background: rgba(10, 22, 40, 0.96);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border-bottom-color: rgba(143, 208, 255, 0.14);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25);
}
.nz-page .header.is-scrolled .brand-text,
.nz-page .header.is-scrolled .nav-links a { color: #fff; }
.nz-page .header.is-scrolled .nav-toggle span { background: #fff; }
.nz-page .header.is-scrolled .lang-switcher { border-left-color: rgba(255,255,255,0.25); }
.nz-page .header.is-scrolled .lang-switcher__btn { color: rgba(255,255,255,0.55); }
.nz-page .header.is-scrolled .lang-switcher__btn.is-active { background: rgba(255,255,255,0.18); color: #fff; }
.nz-page .header.is-scrolled .lang-switcher__btn:hover { color: #fff; background: transparent; }
.nz-page .header.is-scrolled .user-menu__toggle { color: #fff; border-color: rgba(255,255,255,0.35); }
.nz-page .header.is-scrolled .user-menu__toggle:hover,
.nz-page .header.is-scrolled .user-menu[open] .user-menu__toggle { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.7); }

/* ============================================================
   SPIELERISCHE MIKRO-INTERAKTIONEN (Stufe 1, alle Seiten)
   Buttons wachsen beim Drüberfahren und ein Lichtschimmer läuft
   einmal darüber; beim Klicken geben sie kurz nach.
   Nur transform/opacity; Hover nur bei echter Maus.
   ============================================================ */
.btn:active { transform: scale(0.97); transition-duration: 80ms; }

@media (hover: hover) and (pointer: fine) {
  .btn { position: relative; overflow: hidden; isolation: isolate; }
  .btn::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 45%;
    z-index: -1; /* über dem Hintergrund, unter der Schrift */
    background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.45) 50%, transparent 100%);
    transform: translateX(-130%) skewX(-18deg);
    pointer-events: none;
  }
  .btn--outline::before,
  .btn--white::before { background: linear-gradient(105deg, transparent 0%, rgba(21,96,187,.18) 50%, transparent 100%); }
  .btn:hover { transform: translateY(-2px) scale(1.04); }
  .btn:hover::before { animation: iw-btn-shimmer 700ms var(--iw-ease) forwards; }
  .btn:active { transform: scale(0.97); }

  /* Der pulsierende Ring am CTA-Button der Startseite darf nicht abgeschnitten werden */
  .cta-banner--sheen .btn--white { overflow: visible; }
  .cta-banner--sheen .btn--white::before { display: none; }

}
@keyframes iw-btn-shimmer {
  from { transform: translateX(-130%) skewX(-18deg); }
  to   { transform: translateX(330%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:hover,
  .btn:active,
  .nz-chip:hover { transform: none; }
  .btn:hover::before { animation: none; }
}

/* ============================================================
   STARTSEITE (neu, 08.10.2026): Foto-Bildfolge, Fakten, Netz-Teaser
   Bild 1 lädt sofort, Bild 2 und 3 erst nach dem Laden der Seite
   (Klasse .is-loaded per script.js). Nur opacity/transform animiert.
   ============================================================ */
.hs {
  min-height: min(88vh, 860px);
  padding: 120px 0 80px;
  background: #0a1628;
  color: #fff;
}
.hs__slides { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hs__slide {
  position: absolute;
  inset: -2%;
  background: center / cover no-repeat;
  opacity: 0;
  transform: scale(1);
  transition: opacity 1400ms ease;
}
.hs__slide.is-active { opacity: 1; animation: iw-kenburns 9s ease-out forwards; }
.hs__slide--1 {
  background-image: url('images/hero.jpg');
  background-image: image-set(url('images/hero.webp') type('image/webp'), url('images/hero.jpg') type('image/jpeg'));
}
.hs.is-loaded .hs__slide--2 {
  background-image: url('images/dienstleistung.jpg');
  background-image: image-set(url('images/dienstleistung.webp') type('image/webp'), url('images/dienstleistung.jpg') type('image/jpeg'));
}
.hs.is-loaded .hs__slide--3 {
  background-image: url('images/kontakt.jpg');
  background-image: image-set(url('images/kontakt.webp') type('image/webp'), url('images/kontakt.jpg') type('image/jpeg'));
}
@media (max-width: 720px) {
  .hs__slide--1 {
    background-image: url('images/hero-mobile.jpg');
    background-image: image-set(url('images/hero-mobile.webp') type('image/webp'), url('images/hero-mobile.jpg') type('image/jpeg'));
  }
  .hs.is-loaded .hs__slide--2 {
    background-image: url('images/dienstleistung-mobile.jpg');
    background-image: image-set(url('images/dienstleistung-mobile.webp') type('image/webp'), url('images/dienstleistung-mobile.jpg') type('image/jpeg'));
  }
  .hs.is-loaded .hs__slide--3 {
    background-image: url('images/kontakt-mobile.jpg');
    background-image: image-set(url('images/kontakt-mobile.webp') type('image/webp'), url('images/kontakt-mobile.jpg') type('image/jpeg'));
  }
}
.hs__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(10,22,40,.82) 0%, rgba(10,22,40,.45) 55%, rgba(10,22,40,.2) 100%),
    linear-gradient(0deg, rgba(10,22,40,.6) 0%, transparent 40%);
}
.hs__content { position: relative; z-index: 2; }
.hs__title {
  display: flex;
  flex-wrap: nowrap;
  white-space: nowrap;
  align-items: baseline;
  gap: 0 .3em;
  margin: 0 0 18px;
  font-size: clamp(2.6rem, 8vw, 6.4rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
  color: #fff;
  opacity: 0;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .1s forwards;
}
.hs__title span { font-size: .42em; font-weight: 600; letter-spacing: .01em; color: #8fd0ff; }
.hs__lead {
  max-width: 34ch;
  margin: 0 0 28px;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.5;
  color: rgba(255,255,255,.88);
  opacity: 0;
  animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .25s forwards;
}
.hs__actions { display: flex; flex-wrap: wrap; gap: 12px; opacity: 0; animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .4s forwards; }
.hs__actions .btn:not(.btn--ghost) { background: #8fd0ff; color: #0a1628; }
.hs__actions .btn:not(.btn--ghost):hover { background: #fff; }

/* Fortschritt der Bildfolge: dünne Striche statt Punkte */
.hs__dots { position: absolute; z-index: 2; left: 50%; bottom: 28px; display: flex; gap: 8px; transform: translateX(-50%); }
.hs__dots[hidden] { display: none; }
.hs__dot { position: relative; width: 34px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer; }
.hs__dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.35);
  transition: background var(--iw-dur) ease;
}
.hs__dot.is-active::before { background: #fff; }
.hs__dot:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 2px; }

/* Fakten-Zeile: Typografie, keine Kästen */

/* Netz-Teaser: dunkles Band mit fester Kartenvorschau */
.hs-teaser {
  padding: 88px 0;
  color: #fff;
  background:
    radial-gradient(ellipse 50% 60% at 78% 45%, rgba(74,159,255,.2) 0%, transparent 70%),
    linear-gradient(180deg, #0a1628 0%, #0d1d38 100%);
}
.hs-teaser__inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; }
.hs-teaser__eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8fd0ff; }
.hs-teaser h2 { margin: 0 0 16px; font-size: clamp(1.8rem, 3.4vw, 2.6rem); line-height: 1.12; letter-spacing: -0.02em; color: #fff; }
.hs-teaser p { margin: 0 0 26px; max-width: 42ch; font-size: 1.05rem; line-height: 1.7; color: rgba(255,255,255,.82); }
.hs-teaser__btn { background: #8fd0ff; color: #0a1628; }
.hs-teaser__btn:hover { background: #fff; }
.hs-teaser__map { display: block; }
.hs-map { display: block; width: 100%; max-width: 500px; height: auto; margin: 0 auto; }
.hs-map__land { fill: rgba(74,159,255,.08); stroke: rgba(143,208,255,.4); stroke-width: 1.4; stroke-linejoin: round; }
.hs-map__land--benelux { fill: rgba(74,159,255,.04); stroke: rgba(143,208,255,.2); }
.hs-map__route { fill: none; stroke: #4a9eff; stroke-width: 1.3; stroke-dasharray: 3 6; stroke-linecap: round; opacity: .5; }
.hs-map__dot { fill: #1560bb; stroke: #8fd0ff; stroke-width: 1; }
.hs-map__port { fill: #4a9eff; stroke: #fff; stroke-width: 1.2; }
@media (hover: hover) and (pointer: fine) {
  .hs-teaser__map .hs-map { transition: transform var(--iw-dur-slow) var(--iw-ease); }
  .hs-teaser__map:hover .hs-map { transform: scale(1.03); }
}

@media (max-width: 960px) {
  .hs-teaser__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 720px) {
  .hs { min-height: 82vh; padding: 104px 0 72px; }
  .hs__overlay { background: linear-gradient(0deg, rgba(10,22,40,.85) 0%, rgba(10,22,40,.5) 60%, rgba(10,22,40,.35) 100%); }
  .hs-teaser { padding: 56px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .hs__slide { transition: none; }
  .hs__slide.is-active { animation: none; }
  .hs__title, .hs__lead, .hs__actions { animation: none; opacity: 1; transform: none; }
  .hs-teaser__map:hover .hs-map { transform: none; }
}



/* Startseite: Fakten als Container auf Tragwagen hinter der Lok, alle auf einem Gleis */
.hs-facts { padding: 56px 0 8px; }
.hs-facts__row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: end; padding-bottom: 6px; }
.hs-facts__row::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: repeating-linear-gradient(90deg, #8a96a8 0 14px, transparent 14px 20px), #c3ccd9; }
.hs-facts__loco { width: 156px; height: auto; padding-bottom: 6px; }
.hs-facts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hs-facts__list li {
  position: relative; display: grid; align-content: center; gap: 6px; min-height: 120px; margin-bottom: 16px; padding: 16px 18px;
  border-radius: 3px; color: #fff;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 11px),
    linear-gradient(180deg, #1a6cc9 0%, #1560bb 55%, #0f4a94 100%);
  box-shadow: inset 0 0 0 2px rgba(10,22,40,.25);
}
.hs-facts__list li:nth-child(even) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 3px, transparent 3px 11px), linear-gradient(180deg, #243e73 0%, #1b3160 55%, #13244a 100%); }
/* Tragwagen mit zwei Radsätzen unter jedem Container */
.hs-facts__list li::after { content: ''; position: absolute; left: 6px; right: 6px; bottom: -16px; height: 16px;
  background: radial-gradient(circle at 16% 62%, #0a1628 0 6px, transparent 6.5px), radial-gradient(circle at 84% 62%, #0a1628 0 6px, transparent 6.5px), linear-gradient(#3a4a5f, #3a4a5f) top / 100% 5px no-repeat; }
.hs-facts__num { font-size: clamp(1.8rem, 3.4vw, 2.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: #fff; }
.hs-facts__label { font-size: .92rem; font-weight: 600; line-height: 1.35; color: rgba(255,255,255,.85); }
@media (max-width: 960px) {
  .hs-facts__row { grid-template-columns: minmax(0, 1fr); padding-bottom: 0; }
  .hs-facts__row::after { display: none; }
  .hs-facts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 10px; }
}
@media (max-width: 720px) { .hs-facts { padding-top: 40px; } .hs-facts__list li { min-height: 104px; padding: 14px; } }

/* Startseite: Germanports-ID und ADSp unten im Hero; Linie zeichnet sich, ein Lichtstreif läuft einmal über die ID */
.hs { position: relative; }
.hs__meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 30px; display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 32px; pointer-events: none; }
.hs__meta > * { pointer-events: auto; }
.hs__gp { position: relative; margin: 0 44px 0 0; /* Platz für die Vergrößerung beim Hover */ opacity: 0; animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .7s forwards; }
.hs__gp-label { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #8fd0ff; }
.hs__gp-id { position: relative; overflow: hidden; font-size: 1.1rem; font-weight: 700; letter-spacing: .14em; font-variant-numeric: tabular-nums; color: #fff; }
.hs__gp-id::after { content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(143,208,255,.55), transparent); transform: translateX(-120%); animation: hs-gp-sweep 9s linear 1.5s infinite; }
.hs__adsp { padding-bottom: 2px; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.75); text-decoration: none; border-bottom: 1px solid rgba(143,208,255,.35); opacity: 0; animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .85s forwards; transition: color var(--iw-dur-fast), border-color var(--iw-dur-fast); }
.hs__adsp:hover, .hs__adsp:focus-visible { color: #fff; border-color: #8fd0ff; }
/* Lichtstreif alle 9 s: läuft in den ersten 1,4 s über die ID, danach Pause */
@keyframes hs-gp-sweep { 0% { transform: translateX(-120%); animation-timing-function: cubic-bezier(.2,.7,.2,1); } 16%, 100% { transform: translateX(300%); } }
@media (max-width: 720px) { .hs__meta { bottom: 64px; } .hs__gp-id { font-size: 1rem; } }

/* Startseite: Zug fährt beim ersten Sichtbarwerden von rechts ein, bremst und die Container rucken kurz nach */
.hs-facts { overflow-x: clip; }
@media (min-width: 961px) {
  /* Lok etwas höher als Container auf Tragwagen (real ca. 4,3 m zu 3,8 m) */
  .hs-facts__loco { width: 230px; padding-bottom: 2px; }
  .hs-facts.is-pending .hs-facts__loco, .hs-facts.is-pending .hs-facts__list li { transform: translateX(110vw); }
  .hs-facts.is-arriving .hs-facts__loco, .hs-facts.is-arriving .hs-facts__list li { animation: hs-train-in 2.4s cubic-bezier(.15,.6,.25,1) both; }
  .hs-facts.is-arriving .hs-facts__list li:nth-child(1) { animation-delay: .04s; }
  .hs-facts.is-arriving .hs-facts__list li:nth-child(2) { animation-delay: .08s; }
  .hs-facts.is-arriving .hs-facts__list li:nth-child(3) { animation-delay: .12s; }
  .hs-facts.is-arriving .hs-facts__list li:nth-child(4) { animation-delay: .16s; }
}
@keyframes hs-train-in {
  0% { transform: translateX(110vw); }
  82% { transform: translateX(-5px); }
  91% { transform: translateX(2px); }
  100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hs__gp, .hs__adsp { animation: none; opacity: 1; }
  .hs__gp-id::after { display: none; }
  .hs-facts.is-pending .hs-facts__loco, .hs-facts.is-pending .hs-facts__list li { transform: none; }
}
@media (min-width: 721px) { .hs__dots { left: auto; right: max(20px, calc((100vw - 1180px) / 2)); transform: none; } }

/* ===== Startseite (09.10.2026): Zug vor dem Hafen in der Dämmerung, Leistungen als Strecke, Netz-Vorschau ===== */
/* Akzent in dunklen Abschnitten: kühles Weiß-Grau statt einer weiteren Farbe */
:root { --iw-accent: #c9d4e3; }

/* --- Fakten-Szene: läuft über die volle Breite; der Zug kommt vom Bildschirmrand (html/body schneiden seitlich ab) --- */
.hs-facts--szene { position: relative; isolation: isolate; overflow: visible; padding: 72px 0 34px; }
.hs-facts--szene .hs-facts__row { padding-bottom: 0; }
.hs-facts--szene .hs-facts__row::after { display: none; }
.hs-szene { position: absolute; z-index: -1; top: -1px; bottom: -1px; /* 1px Überlapp gegen Haarlinien bei halben Pixeln */ left: 50%; width: 100vw; transform: translateX(-50%); overflow: hidden; pointer-events: none; }
/* Himmel schließt oben an den Hero an und wird zum Horizont warm und hell, damit Zug und Container davor klar stehen */
.hs-facts--hafen .hs-szene {
  background:
    radial-gradient(ellipse 60% 55% at 50% 96%, rgba(255,214,160,.55), transparent 70%),
    linear-gradient(180deg, #0a1628 0%, #1f2f55 28%, #5a5482 55%, #c97e6a 80%, #f0b27e 94%, #f6c896 100%);
}
.hs-szene__hafen { position: absolute; left: 0; bottom: 34px; width: 100%; height: 220px; }
.hs-szene__fern { fill: #0e1527; stroke: #0e1527; }
.hs-szene__nah { fill: #080d19; }
.hs-rotor { animation: hs-rotor 10s linear infinite; }
@keyframes hs-rotor { to { transform: rotate(360deg); } }
/* Gleis von der Seite: Schiene, Schwellenköpfe, Schotter, unten Übergang in die dunkle Leistungen-Sektion */
.hs-szene__bett {
  position: absolute; left: 0; right: 0; bottom: 0; height: 34px; filter: brightness(.55) saturate(.6);
  background:
    linear-gradient(180deg, #d5dce6 0, #9aa7b8 2px, #6b7788 4px) top / 100% 4px no-repeat,
    repeating-linear-gradient(90deg, #3a3631 0 22px, transparent 22px 38px) 0 4px / 100% 6px no-repeat,
    linear-gradient(180deg, transparent 45%, #0a1628 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='34'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='1 0 0 0 0 1 0 0 0 0 1 0 0 0 0 0 0 0 0 .6'/%3E%3C/filter%3E%3Crect width='180' height='34' fill='%237d8592'/%3E%3Crect width='180' height='34' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* Hero läuft unten in denselben Ton aus, damit keine Kante entsteht */
html:has(.hs-facts--hafen) .hs__overlay {
  background:
    linear-gradient(0deg, #0a1628 0%, rgba(10,22,40,0) 22%),
    linear-gradient(90deg, rgba(10,22,40,.82) 0%, rgba(10,22,40,.45) 55%, rgba(10,22,40,.2) 100%),
    linear-gradient(0deg, rgba(10,22,40,.6) 0%, transparent 40%);
}
/* Container in vier typischen Containerfarben (der erste in interwayz-Blau), mit Lichtkante und Schatten */
.hs-facts--szene .hs-facts__list li { box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 3px 0 rgba(255,255,255,.18); filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.hs-facts--szene .hs-facts__list li:nth-child(1) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 11px), linear-gradient(180deg, #2178d8 0%, #1560bb 55%, #0e4a92 100%); }
.hs-facts--szene .hs-facts__list li:nth-child(2) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 11px), linear-gradient(180deg, #c4502f 0%, #a93f24 55%, #85301a 100%); }
.hs-facts--szene .hs-facts__list li:nth-child(3) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 3px, transparent 3px 11px), linear-gradient(180deg, #2f8a74 0%, #23705e 55%, #185446 100%); }
.hs-facts--szene .hs-facts__list li:nth-child(4) { background: repeating-linear-gradient(90deg, rgba(255,255,255,.08) 0 3px, transparent 3px 11px), linear-gradient(180deg, #dc7f22 0%, #c4691a 55%, #9e5112 100%); }
.hs-facts--szene .hs-facts__label { color: rgba(255,255,255,.92); }
/* Lok hell mit blauem Streifen (wie die Lok-Illustration), dunkle Scheibe, warmes Spitzenlicht */
.hs-facts--szene .hs-facts__loco svg { filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.hs-facts--szene .hs-facts__loco path:nth-of-type(1) { fill: #eef3f9; }
.hs-facts--szene .hs-facts__loco path:nth-of-type(2) { fill: #0f1f3d; opacity: 1; }
.hs-facts--szene .hs-facts__loco circle { fill: #ffd27a; }
/* Leichter Parallax beim Einfahren: Kräne ziehen langsamer mit als der Zug */
@media (min-width: 961px) {
  .hs-facts--szene.is-pending .hs-szene__fern { transform: translateX(60px); }
  .hs-facts--szene.is-arriving .hs-szene__fern { animation: hs-parallax 2.4s cubic-bezier(.15,.6,.25,1) both; }
}
@keyframes hs-parallax { from { transform: translateX(60px); } to { transform: none; } }
@media (max-width: 960px) {
  .hs-facts--szene { padding: 48px 0 40px; }
  .hs-szene__hafen { height: 160px; opacity: .7; }
}

/* --- Netz-Teaser (kommt vor den Leistungen): Text links, rechts eine Vorschau mit Beispieldaten --- */
.hs-teaser {
  padding: 72px 0;
  background:
    radial-gradient(ellipse 45% 70% at 80% 40%, rgba(74,159,255,.12) 0%, transparent 70%),
    linear-gradient(180deg, #0a1628 0%, #0c121e 100%);
}
.hs-teaser__inner { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 56px; align-items: center; }
.hs-teaser h2 { margin-bottom: 22px; }
.hs-teaser__eyebrow { color: var(--iw-accent); }
.hs-teaser p { margin-bottom: 20px; max-width: 34ch; }
.hs-teaser__link { display: inline-flex; gap: 6px; padding-bottom: 3px; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color var(--iw-dur-fast); }
.hs-teaser__link span { display: inline-block; transition: transform var(--iw-dur-fast); }
.hs-teaser__link:hover { border-color: #fff; }
.hs-teaser__link:hover span { transform: translateX(4px); }

/* Vorschau: ganze Bühne ist der Link zur Netzseite. Drei Ebenen, diagonal versetzt und weich ineinander auslaufend:
   Netzkarte mit Ortsnamen oben links, Suche mit erweiterter Suche oben rechts, Ergebnistabelle davor unten rechts */
.hs-vorschau { position: relative; display: block; color: inherit; text-decoration: none; transition: opacity .6s ease, transform .6s ease; }
.hs-vorschau:focus-visible { outline: 3px solid #8fd0ff; outline-offset: 6px; border-radius: 16px; }
.hs-vorschau__buehne { position: relative; display: block; height: 470px; }
.hs-glas { position: absolute; display: block; padding: 16px 18px; border-radius: 14px; border: 1px solid rgba(255,255,255,.12); background: rgba(14,22,38,.78); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 24px 60px rgba(0,0,0,.45); transition: transform .4s cubic-bezier(.2,.7,.2,1), border-color .3s ease; }
.hs-vorschau:hover .hs-glas { border-color: rgba(255,255,255,.24); }
.hs-vorschau:hover .hs-vorschau__ergebnis { transform: translate(-4px, -6px); }
.hs-vorschau:hover .hs-vorschau__such { transform: translate(4px, -4px); }

/* Netzkarte: oben links hinten, läuft rundum aus */
.hs-vorschau__karte { position: absolute; top: -60px; left: -6%; width: 60%; -webkit-mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); mask-image: radial-gradient(ellipse 50% 50% at 50% 50%, #000 55%, transparent 100%); }
.hs-vorschau__karte .hs-map { max-width: none; }
.hs-map__label { fill: rgba(255,255,255,.72); font-size: 13px; font-weight: 600; }
.hs-map__label--port { fill: #fff; font-size: 14px; font-weight: 800; }

/* Suche oben rechts */
.hs-vorschau__such { top: 0; right: 0; width: 54%; }
.hs-vorschau__suche { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-vorschau__suche > span { padding: 6px 11px; border-radius: 999px; background: rgba(255,255,255,.1); font-size: .82rem; font-weight: 600; color: #fff; }
.hs-vorschau__titel { display: block; margin: 14px 0 8px; font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--iw-accent); }
.hs-vorschau__filter { display: flex; flex-wrap: wrap; gap: 6px; }
.hs-chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); font-size: .78rem; color: #fff; }
.hs-chip b { font-size: .64rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255,255,255,.5); }

/* Ergebnistabelle davor, unten rechts; letzte Zeile blendet aus */
.hs-vorschau__ergebnis { right: 6%; bottom: 0; width: 72%; padding-bottom: 4px; -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
.hs-vorschau table { width: 100%; border-collapse: collapse; font-size: .86rem; }
.hs-vorschau th { padding: 2px 8px 10px; text-align: left; font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); border-bottom: 1px solid rgba(255,255,255,.14); }
.hs-vorschau td { padding: 10px 8px; color: rgba(255,255,255,.88); border-bottom: 1px solid rgba(255,255,255,.07); white-space: nowrap; }
.hs-vorschau td:first-child { font-variant-numeric: tabular-nums; font-weight: 600; color: #fff; }
.hs-status { display: inline-flex; align-items: center; gap: 8px; }
.hs-status::before { content: ''; width: 8px; height: 8px; border-radius: 50%; }
.hs-status--frei::before { background: #35c48a; box-shadow: 0 0 0 4px rgba(53,196,138,.18); }
.hs-status--anfrage::before { background: #e8c547; box-shadow: 0 0 0 4px rgba(232,197,71,.16); }
.hs-preis { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: .76rem; color: rgba(255,255,255,.7); }

/* Einblenden: Karte, dann Suche mit Filtern, dann die Zeilen */
.hs-vorschau__karte, .hs-vorschau__such, .hs-vorschau__ergebnis, .hs-chip, .hs-vorschau tbody tr { opacity: 0; }
.hs-vorschau__such, .hs-vorschau__ergebnis, .hs-vorschau tbody tr { transform: translateY(12px); }
.hs-vorschau.is-visible .hs-vorschau__karte { opacity: 1; transition: opacity 1.2s ease .1s; }
.hs-vorschau.is-visible .hs-vorschau__such { opacity: 1; transform: none; transition: opacity .5s ease .3s, transform .5s ease .3s, border-color .3s ease; }
.hs-vorschau.is-visible .hs-vorschau__ergebnis { opacity: 1; transform: none; transition: opacity .5s ease .6s, transform .5s ease .6s, border-color .3s ease; }
.hs-vorschau.is-visible .hs-chip { opacity: 1; transition: opacity .4s ease; }
.hs-vorschau.is-visible .hs-chip:nth-child(1) { transition-delay: .6s; }
.hs-vorschau.is-visible .hs-chip:nth-child(2) { transition-delay: .7s; }
.hs-vorschau.is-visible .hs-chip:nth-child(3) { transition-delay: .8s; }
.hs-vorschau.is-visible .hs-chip:nth-child(4) { transition-delay: .9s; }
.hs-vorschau.is-visible tbody tr { opacity: 1; transform: none; transition: opacity .4s ease, transform .4s ease; }
.hs-vorschau.is-visible tbody tr:nth-child(1) { transition-delay: .9s; }
.hs-vorschau.is-visible tbody tr:nth-child(2) { transition-delay: 1s; }
.hs-vorschau.is-visible tbody tr:nth-child(3) { transition-delay: 1.1s; }
.hs-vorschau.is-visible tbody tr:nth-child(4) { transition-delay: 1.2s; }
.hs-vorschau.is-visible tbody tr:nth-child(5) { transition-delay: 1.3s; }
/* Nach dem Einblenden reagieren die Ebenen beim Hover ohne Verzögerung */
.hs-vorschau.is-visible:hover .hs-vorschau__such, .hs-vorschau.is-visible:hover .hs-vorschau__ergebnis { transition-delay: 0s; }

@media (max-width: 960px) {
  .hs-teaser { padding: 56px 0; }
  .hs-teaser__inner { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  /* Mobil: Ebenen untereinander, Karte nur als Hintergrund hinter der Tabelle */
  .hs-vorschau__buehne { height: auto; display: flex; flex-direction: column; gap: 14px; }
  .hs-glas { position: relative; inset: auto; width: auto; }
  .hs-vorschau__karte { top: 40%; left: auto; right: -20%; width: 90%; opacity: .5; }
  .hs-vorschau.is-visible .hs-vorschau__karte { opacity: .5; }
}
@media (max-width: 520px) {
  .hs-glas { padding: 14px 12px; }
  .hs-vorschau th:nth-child(4), .hs-vorschau td:nth-child(4) { display: none; }
}

/* --- Leistungen (zuletzt): dunkel, als Strecke ohne Kästen; Gleis oben, darunter je Etappe Fahrzeug und Text --- */
.lk { position: relative; isolation: isolate; padding: 72px 0 64px; color: #fff; }
.lk::before {
  content: ''; position: absolute; z-index: -1; top: -4px; /* Überlapp gegen Haarlinien */ bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  background: linear-gradient(180deg, #0c121e 0%, #111a2b 50%, #0c121e 100%);
}
.lk .section-eyebrow { color: var(--iw-accent); }
.lk h2 { margin: 0; color: #fff; }
.lk-kopf { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 48px; margin-bottom: 36px; }
.lk-intro { margin: 0; font-size: 1.05rem; line-height: 1.6; color: rgba(255,255,255,.7); }

/* Gleis: Linie, drei Halte; ein heller Container fährt in Schleife, die Halte leuchten beim Vorbeifahren */
.lk-gleis { position: relative; height: 52px; margin-bottom: 20px; }
.lk-gleis::before {
  content: ''; position: absolute; left: 0; right: 0; top: 8px; height: 3px;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.5) 0 14px, transparent 14px 20px);
  transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.3,.7,.2,1) .3s;
}
.lk.is-visible .lk-gleis::before { transform: scaleX(1); }
.lk-gleis__lauf { position: absolute; z-index: 1; left: 0; right: 0; top: 0; height: 20px; pointer-events: none; }
.lk-gleis__lauf::after {
  content: ''; position: absolute; top: 3px; left: 0; width: 34px; height: 13px; border-radius: 2px;
  background: linear-gradient(180deg, #eef3f9, #9aa7b8); box-shadow: 0 0 14px rgba(255,255,255,.45);
  opacity: 0;
}
/* Prozentwerte von translateX beziehen sich auf das Element selbst – deshalb läuft eine volle Breite als Hülle mit */
/* 12 s je Umlauf: 0–44 % Export (Rampe → Seehafen), kurze Pause, 50–94 % Import (Seehafen → Rampe) */
.lk.is-visible .lk-gleis__lauf { animation: lk-lauf-huelle 12s linear 1.8s infinite; }
.lk.is-visible .lk-gleis__lauf::after { animation: lk-lauf 12s linear 1.8s infinite; }
@keyframes lk-lauf-huelle { 0% { transform: translateX(0); } 44%, 50% { transform: translateX(calc(100% - 34px)); } 94%, 100% { transform: translateX(0); } }
@keyframes lk-lauf { 0% { opacity: 0; } 3%, 96% { opacity: 1; } 100% { opacity: 0; } }

.lk-halt { position: absolute; z-index: 2; top: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; font-size: .78rem; font-weight: 700; letter-spacing: .04em; color: rgba(255,255,255,.75); white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .5s ease; }
.lk-halt i { position: relative; width: 18px; height: 18px; border-radius: 50%; background: #0c121e; border: 3px solid var(--iw-accent); }
/* Aufleuchten im Takt des Containers (12 s, 1,8 s Verzögerung), auf dem Hin- und auf dem Rückweg */
.lk-halt i::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.95) 0 30%, rgba(255,255,255,.35) 45%, transparent 70%); opacity: 0; transform: scale(.6); }
.lk.is-visible .lk-halt i::after { animation: 12s linear 1.8s infinite; }
.lk.is-visible .lk-halt--1 i::after { animation-name: lk-glow-1; }
.lk.is-visible .lk-halt--2 i::after { animation-name: lk-glow-2; }
.lk.is-visible .lk-halt--3 i::after { animation-name: lk-glow-3; }
@keyframes lk-glow-1 { 0% { opacity: 0; transform: scale(.6); } 2% { opacity: 1; transform: scale(1.3); } 9% { opacity: 0; transform: scale(1.6); } 88% { opacity: 0; transform: scale(.6); } 94% { opacity: 1; transform: scale(1.3); } 100% { opacity: 0; transform: scale(1.6); } }
@keyframes lk-glow-2 { 0%, 17% { opacity: 0; transform: scale(.6); } 22% { opacity: 1; transform: scale(1.3); } 29% { opacity: 0; transform: scale(1.6); } 66% { opacity: 0; transform: scale(.6); } 72% { opacity: 1; transform: scale(1.3); } 79%, 100% { opacity: 0; transform: scale(1.6); } }
@keyframes lk-glow-3 { 0%, 38% { opacity: 0; transform: scale(.6); } 44% { opacity: 1; transform: scale(1.3); } 50% { opacity: .8; transform: scale(1.4); } 57%, 100% { opacity: 0; transform: scale(1.6); } }
/* Richtung über dem Gleis wechselt im selben Takt */
.lk-richtung { position: relative; height: 18px; margin: 0 0 12px; text-align: center; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--iw-accent); }
.lk-richtung span { position: absolute; inset: 0; }
.lk-richtung__import { opacity: 0; }
.lk.is-visible .lk-richtung__export { animation: lk-richtung-export 12s linear 1.8s infinite; }
.lk.is-visible .lk-richtung__import { animation: lk-richtung-import 12s linear 1.8s infinite; }
@keyframes lk-richtung-export { 0%, 45% { opacity: 1; } 49%, 96% { opacity: 0; } 100% { opacity: 1; } }
@keyframes lk-richtung-import { 0%, 45% { opacity: 0; } 49%, 96% { opacity: 1; } 100% { opacity: 0; } }
.lk-halt--1 { left: 0; transform: none; align-items: flex-start; }
.lk-halt--2 { left: 50%; }
.lk-halt--3 { left: auto; right: 0; transform: none; align-items: flex-end; }
.lk.is-visible .lk-halt { opacity: 1; }
.lk.is-visible .lk-halt--1 { transition-delay: .3s; }
.lk.is-visible .lk-halt--2 { transition-delay: 1s; }
.lk.is-visible .lk-halt--3 { transition-delay: 1.6s; }

/* Je Etappe: Fahrzeug links, Text rechts – steht unter ihrem Gleisabschnitt */
.lk-abschnitte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
.lk-abschnitt { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 18px; align-items: start; }
.lk-abschnitt__bild { width: 112px; height: 112px; object-fit: contain; margin-top: -18px; filter: drop-shadow(0 10px 12px rgba(0,0,0,.45)); }
.lk-abschnitt__nr { display: block; margin-bottom: 6px; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--iw-accent); }
.lk-abschnitt h3 { margin: 0 0 6px; font-size: 1.2rem; color: #fff; }
.lk-abschnitt p { margin: 0; max-width: 44ch; font-size: .95rem; line-height: 1.65; color: rgba(255,255,255,.7); }

/* Weitere Leistungen ohne Gleisbezug: Leercontainer und Steuerung nebeneinander */
.lk-weitere { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 48px; margin-top: 36px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.lk-steuerung { display: flex; align-items: flex-start; gap: 18px; }
.lk-steuerung__icon { flex-shrink: 0; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(201,212,227,.45); color: var(--iw-accent); }
.lk-steuerung h3 { margin: 0 0 3px; font-size: 1.05rem; color: #fff; }
.lk-steuerung p { margin: 0; font-size: .95rem; line-height: 1.6; color: rgba(255,255,255,.7); }
.lk-link { display: inline-flex; gap: 6px; margin-top: 28px; padding-bottom: 3px; font-weight: 700; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.35); transition: border-color var(--iw-dur-fast); }
.lk-link span { display: inline-block; transition: transform var(--iw-dur-fast); }
.lk-link:hover { border-color: #fff; }
.lk-link:hover span { transform: translateX(4px); }

@media (max-width: 960px) {
  .lk { padding: 56px 0 48px; }
  .lk-gleis { display: none; }
  .lk-abschnitte { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lk-abschnitt { grid-template-columns: 84px minmax(0, 1fr); }
  .lk-abschnitt__bild { width: 84px; height: 84px; margin-top: -8px; }
  .lk-weitere { grid-template-columns: minmax(0, 1fr); }
  .lk-richtung { display: none; }
}

/* --- Intro (einmal pro Sitzung): Initialen schlagen ein, der Name baut sich auf, ein Gleis zieht sich,
       dann zoomt das Bild auf die Containertür zu und blendet aus; dahinter baut sich die Startseite auf. Klasse iw-auftakt-an setzt der Kopf der Seite. --- */
.iw-auftakt { display: none; }
.iw-auftakt-an:not(.iw-auftakt-fertig) .iw-auftakt { display: block; position: fixed; inset: 0; z-index: 10000; pointer-events: none; }
.iw-auftakt__tuer {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.035) 0 6px, rgba(0,0,0,.18) 6px 9px, transparent 9px 26px),
    linear-gradient(180deg, #13244a 0%, #0a1628 100%);
}
.iw-auftakt__tuer--l { left: 0; box-shadow: inset -2px 0 0 rgba(0,0,0,.4); }
.iw-auftakt__tuer--r { right: 0; box-shadow: inset 2px 0 0 rgba(255,255,255,.06); }
/* Ende: Fahrt auf die Containertür zu, dabei blendet das Bild aus und gibt die Startseite frei */
.iw-auftakt__buehne { position: absolute; inset: 0; animation: iw-zoom-weg .85s cubic-bezier(.5,0,.75,0) 1.65s forwards; }
@keyframes iw-zoom-weg { 0% { transform: scale(1); opacity: 1; } 45% { opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }

.iw-auftakt__marke { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; }
.iw-auftakt__wort { display: flex; font-size: clamp(3.4rem, 11vw, 8.5rem); font-weight: 800; line-height: 1; letter-spacing: -0.04em; color: #fff; }
.iw-auftakt__wort > span { display: inline-block; }
/* i und w schlagen zuerst ein, groß und mit Überschwinger; danach füllen sich die übrigen Buchstaben auf */
.iw-auftakt__ini { opacity: 0; transform: scale(2.6); animation: iw-ini-ein .5s cubic-bezier(.2,1.6,.4,1) .15s forwards; }
.iw-auftakt__ini--w { color: #4a9eff; animation-delay: .32s; }
.iw-auftakt__rest { opacity: 0; transform: translateY(.35em); animation: iw-rest-ein .35s cubic-bezier(.2,.8,.2,1) forwards; }
.iw-auftakt__rest--b { color: #4a9eff; }
.iw-auftakt__wort > span:nth-child(2) { animation-delay: .75s; }
.iw-auftakt__wort > span:nth-child(3) { animation-delay: .8s; }
.iw-auftakt__wort > span:nth-child(4) { animation-delay: .85s; }
.iw-auftakt__wort > span:nth-child(5) { animation-delay: .9s; }
.iw-auftakt__wort > span:nth-child(7) { animation-delay: .95s; }
.iw-auftakt__wort > span:nth-child(8) { animation-delay: 1s; }
.iw-auftakt__wort > span:nth-child(9) { animation-delay: 1.05s; }
@keyframes iw-ini-ein { to { opacity: 1; transform: none; } }
@keyframes iw-rest-ein { to { opacity: 1; transform: none; } }
/* Gleis unter dem Namen: zieht sich von der Mitte auf, ein Lichtpunkt schießt darüber */
.iw-auftakt__gleis { position: relative; width: min(70vw, 620px); height: 3px; overflow: hidden; background: repeating-linear-gradient(90deg, rgba(255,255,255,.55) 0 14px, transparent 14px 20px); transform: scaleX(0); animation: iw-gleis-auf .5s cubic-bezier(.3,.7,.2,1) 1s forwards; }
.iw-auftakt__gleis span { position: absolute; inset: 0; }
.iw-auftakt__gleis span::after { content: ''; position: absolute; top: -3px; left: 0; width: 60px; height: 9px; border-radius: 5px; background: radial-gradient(closest-side, #fff, rgba(143,208,255,.6), transparent); }
.iw-auftakt__gleis span { transform: translateX(-10%); animation: iw-licht .6s ease-in 1.2s forwards; }
@keyframes iw-gleis-auf { to { transform: scaleX(1); } }
@keyframes iw-licht { to { transform: translateX(100%); } }


/* Die Startseite baut sich hinter den Türen auf: Kopfzeile von oben, Hero-Inhalte steigen nacheinander auf */
.iw-auftakt-an .header { animation: iw-kopf-ein .6s cubic-bezier(.2,.8,.2,1) 2.15s both; }
.iw-auftakt-an .hs__title, .iw-auftakt-an .hs__lead, .iw-auftakt-an .hs__map, .iw-auftakt-an .hs__gp, .iw-auftakt-an .hs__adsp { animation: iw-line-rise .7s cubic-bezier(.2,.8,.2,1) both; }
.iw-auftakt-an .hs__title { animation-delay: 2.2s; }
.iw-auftakt-an .hs__lead { animation-delay: 2.35s; }
.iw-auftakt-an .hs__map { animation-delay: 2.45s; }
.iw-auftakt-an .hs__gp { animation-delay: 2.6s; }
.iw-auftakt-an .hs__adsp { animation-delay: 2.7s; }
@keyframes iw-kopf-ein { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .iw-auftakt-an .iw-auftakt { display: none; }
  .lk-gleis::before { transform: none; transition: none; }
  .lk-halt { opacity: 1; transition: none; }
  .lk-gleis__lauf, .lk-gleis__lauf::after, .lk-halt i::after { animation: none !important; display: none; }
  .lk-richtung span { position: static; opacity: 1; animation: none !important; }
  .lk-richtung { display: flex; justify-content: center; gap: 24px; height: auto; }
  .hs-vorschau tbody tr, .hs-chip, .hs-vorschau__karte, .hs-vorschau__such, .hs-vorschau__ergebnis { opacity: 1; transform: none; transition: none; }
}

/* ===== KONTAKT (neu, 08.10.2026): Sprung zur Netzkarte, Direktkontakte, kurzes Formular – ohne Karten und Kästen ===== */
.kt-route { padding: 44px 0; background: #e8f0fa; border-bottom: 1px solid #d6dde8; }
.kt-route__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.kt-route__eyebrow { margin: 0 0 6px; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--primary); }
.kt-route h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 2.8vw, 2rem); line-height: 1.15; color: var(--text); }
.kt-route p { margin: 0; max-width: 60ch; line-height: 1.65; color: var(--text-2); }
.kt-route__btn { flex-shrink: 0; }

.kt-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: start; }
.kt-grid h2 { margin: 0 0 20px; font-size: clamp(1.4rem, 2.4vw, 1.75rem); }
.kt-direct__list { margin: 0; }
.kt-direct__list > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 14px 0; border-top: 1px solid #d6dde8; }
.kt-direct__list > div:last-child { border-bottom: 1px solid #d6dde8; }
.kt-direct__list dt { padding-top: 3px; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); }
.kt-direct__list dd { margin: 0; font-weight: 600; line-height: 1.5; color: var(--text); }
.kt-direct__list dd a { color: var(--text); text-decoration: none; border-bottom: 1px solid rgba(21,96,187,.3); transition: color var(--iw-dur-fast), border-color var(--iw-dur-fast); }
.kt-direct__list dd a:hover, .kt-direct__list dd a:focus-visible { color: var(--primary); border-color: var(--primary); }
.kt-direct__list dd span { display: block; font-size: .88rem; font-weight: 500; color: var(--text-2); }
.kt-map { margin-top: 18px; }
.kt-map__btn { padding: 0 0 2px; border: 0; border-bottom: 1px solid var(--primary); background: none; font: inherit; font-weight: 700; color: var(--primary); cursor: pointer; }
.kt-map p { margin: 6px 0 0; font-size: .82rem; color: var(--muted); }
.kt-map__frame { width: 100%; height: 260px; margin-top: 18px; border: 0; border-radius: 4px; }
.kt-direct__jobs { margin: 22px 0 0; font-size: .92rem; color: var(--text-2); }

.kt-form { display: grid; gap: 18px; }
.kt-form h2 { margin-bottom: 2px; }
.kt-form__note { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--muted); }
.kt-form .btn { justify-self: start; }

@media (max-width: 960px) {
  .kt-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
}
@media (max-width: 720px) {
  .kt-route { padding: 36px 0; }
  .kt-form .row { grid-template-columns: minmax(0, 1fr); }
}

/* ===== LEISTUNGEN (neu, 08.10.2026): Container-Spickzettel, Verweis auf „Unser Netz“ ===== */
.dl-sheet__wrap { margin-top: 24px; }
.dl-sheet__table { width: 100%; border-collapse: collapse; font-size: .98rem; }
.dl-sheet__table thead th { padding: 0 16px 12px 0; text-align: left; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--primary); border-bottom: 2px solid var(--primary); }
.dl-sheet__table tbody th, .dl-sheet__table td { padding: 16px 16px 16px 0; text-align: left; vertical-align: top; border-bottom: 1px solid #d6dde8; color: var(--text); }
.dl-sheet__table td { font-variant-numeric: tabular-nums; }
.dl-sheet__typ { display: block; font-size: 1.15rem; font-weight: 800; color: var(--text); }
.dl-sheet__name { display: block; font-size: .88rem; font-weight: 500; color: var(--text-2); }
.dl-sheet__daily { font-weight: 700; color: var(--primary) !important; }
.dl-sheet__muted td { color: var(--text-2); }
.dl-sheet__note { margin: 16px 0 0; max-width: 80ch; font-size: .85rem; line-height: 1.6; color: var(--muted); }
@media (max-width: 720px) {
  .dl-sheet__table thead { display: none; }
  .dl-sheet__table, .dl-sheet__table tbody, .dl-sheet__table tr, .dl-sheet__table th, .dl-sheet__table td { display: block; }
  .dl-sheet__table tr { padding: 14px 0; border-bottom: 1px solid #d6dde8; }
  .dl-sheet__table tbody th, .dl-sheet__table td { padding: 2px 0; border: 0; }
  .dl-sheet__table tbody th { margin-bottom: 6px; }
  .dl-sheet__table td { display: grid; grid-template-columns: 9.5em minmax(0, 1fr); gap: 8px; font-size: .92rem; }
  .dl-sheet__table td::before { content: attr(data-label); font-size: .78rem; font-weight: 700; color: var(--muted); }
}



/* Leistungen: Blöcke ohne Karten, zwei Spalten mit Linie oben */
.dl-kernleistungen .service-blocks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; margin-top: 28px; }
.dl-kernleistungen .service-block { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; padding: 24px 0 0; background: none; border: 0; border-top: 1px solid #d6dde8; border-radius: 0; box-shadow: none; }
.dl-kernleistungen .service-block:hover { transform: none; box-shadow: none; }
.dl-kernleistungen .service-block__icon img { width: 64px; height: auto; }
.dl-kernleistungen .service-block h3 { margin: 0 0 8px; }
.dl-kernleistungen .service-list { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 960px) { .dl-kernleistungen .service-blocks { grid-template-columns: minmax(0, 1fr); gap: 32px; } }
.dl-netz { margin: 28px 0 0; color: var(--text-2); }
.dl-netz a { font-weight: 700; color: var(--primary); text-decoration: none; }
.dl-netz a:hover { text-decoration: underline; }

/* Netzkarte: Zoom-Regler; Linien behalten beim Zoomen ihre Stärke */
.nz-land, .nz-route { vector-effect: non-scaling-stroke; }
/* Hineingezoomt: Karte schneidet ab, die Ränder laufen weich aus statt hart rechteckig */
.nz-svg.is-zoomed { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent), linear-gradient(180deg, transparent, #000 9%, #000 91%, transparent); mask-composite: intersect; }

/* Startseite: Karte DE + AT rechts im Hero, die ganze Karte ist der Link „Netz entdecken“ */
.hs__content { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px 48px; }
.hs__map { position: relative; display: block; opacity: 0; animation: iw-line-rise var(--iw-dur-slow) var(--iw-ease-out) .4s forwards; }
.hs__map .hs-map { width: auto; height: clamp(280px, 54vh, 580px); max-width: min(42vw, 560px); margin: 0; }
.hs__map .hs-map__land--main { fill: rgba(10,22,40,.62); stroke: rgba(143,208,255,.85); stroke-width: 1.8; }
.hs__map .hs-map__route { opacity: .7; }
.hs__map-cta { position: absolute; inset: 0; z-index: 2; text-decoration: none; }
.hs__map-label { position: absolute; left: 40%; top: 45%; font-size: clamp(1rem, 1.35vw, 1.3rem); font-weight: 800; letter-spacing: -0.01em; white-space: nowrap; background: linear-gradient(90deg, #cfeaff 0%, #8fd0ff 45%, #4a9eff 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 2px 10px rgba(10,22,40,.9)) drop-shadow(0 0 2px rgba(10,22,40,.8)); transform: translate(-50%, -50%); transition: transform var(--iw-dur) var(--iw-ease); }
.hs__map-cta:focus-visible { outline: 2px solid #8fd0ff; outline-offset: 8px; border-radius: 12px; }
@media (max-width: 960px) {
  .hs__content { grid-template-columns: minmax(0, 1fr); }
  .hs__map { justify-self: center; }
  .hs__map .hs-map { height: clamp(220px, 40vh, 380px); max-width: 100%; }
}
@media (max-width: 720px) {
  .hs { padding-bottom: 150px; }
  .hs__map .hs-map { height: clamp(200px, 34vh, 300px); }
}
@media (prefers-reduced-motion: reduce) {
  .hs__map { animation: none; opacity: 1; }
}

/* Hero-Karte: auf großen Bildschirmen näher an den rechten Rand */
.hs__map { margin-right: min(0px, calc((1180px - 100vw) / 2 + 48px)); }
.hs__map-inner { position: relative; display: block; transform-origin: center; transition: transform var(--iw-dur-slow) var(--iw-ease); }
.hs-map__glow { fill: none; stroke: #8fd0ff; stroke-width: 4; stroke-linejoin: round; opacity: 0; filter: drop-shadow(0 0 6px #4a9eff) drop-shadow(0 0 14px rgba(74,159,255,.8)); }
.hs.is-map-active .hs__map-label, .hs.is-map-active .hs__map-arrow { background-image: linear-gradient(90deg, #ffffff 0%, #cfeaff 50%, #8fd0ff 100%); }

/* Hover-Effekt: Karte groß in die Mitte, Hero blau getönt, Container fahren ruhig im Hintergrund, Umriss schimmert.
   Die Verschiebung zur Mitte (--hs-dx/--hs-dy/--hs-s) rechnet script.js; ohne JS bleibt es beim Farbwechsel der Schrift. */
.hs__fx { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hs__tint { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 50%, rgba(21,96,187,.55) 0%, rgba(13,45,99,.78) 100%); opacity: 0; transition: opacity var(--iw-dur-slow) var(--iw-ease); }
.hs.is-map-active .hs__tint { opacity: 1; }
.hs.is-map-active .hs__map-inner { transform: translate(var(--hs-dx, 0px), var(--hs-dy, 0px)) scale(var(--hs-s, 1.2)); }
.hs.is-map-active .hs-map__glow { animation: hs-glow 1.6s ease-in-out infinite; }
.hs__text, .hs__meta, .hs__dots { transition: opacity var(--iw-dur-slow) var(--iw-ease); }
@keyframes hs-glow { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@media (max-width: 960px), (hover: none), (prefers-reduced-motion: reduce) {
  .hs__fx { display: none; }
  .hs.is-map-active .hs__map-inner { transform: none; }
  .hs.is-map-active .hs__text, .hs.is-map-active .hs__meta, .hs.is-map-active .hs__dots { opacity: 1; }
}

/* Fahrende Container (Hover): ruhig, hinter Schrift und Karte; 40' lang, 20' kurz */
.hs__box { position: absolute; left: 0; width: 7vw; height: 1.5vw; min-height: 14px; border-radius: 2px; opacity: 0;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 2px, transparent 2px 7px), linear-gradient(180deg, #2a78d0, #1560bb 60%, #0f4a94);
  box-shadow: inset 0 0 0 1px rgba(10,22,40,.35); }
.hs__box--20 { width: 3.4vw; background: repeating-linear-gradient(90deg, rgba(255,255,255,.12) 0 2px, transparent 2px 7px), linear-gradient(180deg, #31508a, #243e73 60%, #1b3160); }
.hs__box:nth-child(2) { top: 14%; --d: 7.0s; --w: 0.0s; }
.hs__box:nth-child(3) { top: 24%; --d: 11.0s; --w: -3.3s; }
.hs__box:nth-child(4) { top: 33%; --d: 9.4s; --w: -6.6s; }
.hs__box:nth-child(5) { top: 42%; --d: 7.8s; --w: -1.1s; }
.hs__box:nth-child(6) { top: 51%; --d: 11.8s; --w: -4.4s; }
.hs__box:nth-child(7) { top: 60%; --d: 10.2s; --w: -7.7s; }
.hs__box:nth-child(8) { top: 69%; --d: 8.6s; --w: -2.2s; }
.hs__box:nth-child(9) { top: 78%; --d: 7.0s; --w: -5.5s; }
.hs__box:nth-child(10) { top: 87%; --d: 11.0s; --w: 0.0s; }
.hs__box:nth-child(11) { top: 94%; --d: 9.4s; --w: -3.3s; }
.hs.is-map-active .hs__box--ltr { animation: hs-box-ltr var(--d) linear var(--w) infinite; }
.hs.is-map-active .hs__box--rtl { animation: hs-box-rtl var(--d) linear var(--w) infinite; }
@keyframes hs-box-ltr { 0% { transform: translateX(-10vw); opacity: 0; } 8%, 92% { opacity: .55; } 100% { transform: translateX(105vw); opacity: 0; } }
@keyframes hs-box-rtl { 0% { transform: translateX(105vw); opacity: 0; } 8%, 92% { opacity: .55; } 100% { transform: translateX(-10vw); opacity: 0; } }
/* Karte deckt beim Hover ab, damit die Container sichtbar dahinter fahren */
.hs__map .hs-map__land--main { transition: fill var(--iw-dur-slow) var(--iw-ease); }
.hs.is-map-active .hs__map .hs-map__land--main { fill: #0d2a55; }

/* Pfeil: steht rechts neben dem Schriftzug (Position setzt script.js) und bleibt beim Hover unter der Maus */
.hs__map-arrow { position: absolute; left: var(--hs-arrow-x, 72%); top: 45%; font-size: clamp(2.4rem, 3.4vw, 3.4rem); font-weight: 800; line-height: 1;
  background: linear-gradient(90deg, #cfeaff 0%, #8fd0ff 45%, #4a9eff 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 10px rgba(10,22,40,.9)); transform: translateY(-50%); transform-origin: left center; transition: transform var(--iw-dur) var(--iw-ease); }
.hs__map-cta:hover .hs__map-arrow, .hs__map-cta:focus-visible .hs__map-arrow { transform: translateY(-50%) scale(1.7); }
.hs.is-map-active .hs__map-arrow { animation: hs-arrow-nudge 1.2s var(--iw-ease) .3s infinite; }
@keyframes hs-arrow-nudge { 0%, 100% { transform: translateY(-50%) scale(1.7); } 50% { transform: translate(8px, -50%) scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .hs.is-map-active .hs__map-arrow { animation: none; } }

/* Germanports-ID: Container-Symbol, beim Hover größer mit Knopf zum Kopieren (Knopf erst mit JS sichtbar) */
.hs__gp-inner { display: grid; gap: 6px; transform-origin: left bottom; transition: transform var(--iw-dur) var(--iw-ease); }
.hs__gp-icon { flex-shrink: 0; color: #8fd0ff; }
.hs__gp-row { display: flex; align-items: center; gap: 14px; }
.hs__gp-copy { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; padding: 0; border: 0; background: none; font: inherit; font-size: .8rem; font-weight: 700; color: #8fd0ff; cursor: pointer;
  opacity: 0; transform: translateX(-6px); transition: opacity var(--iw-dur-fast), transform var(--iw-dur-fast), color var(--iw-dur-fast); }
.hs__gp-copy[hidden] { display: none; }
.hs__gp-copy:hover, .hs__gp-copy:focus-visible { color: #fff; }
.hs__gp-copy.is-done { color: #fff; }
.hs__gp:hover .hs__gp-inner, .hs__gp:focus-within .hs__gp-inner { transform: scale(1.12); }
.hs__gp:hover .hs__gp-copy, .hs__gp:focus-within .hs__gp-copy, .hs__gp-copy.is-done { opacity: 1; transform: none; }
@media (hover: none) { .hs__gp-copy { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hs__gp-inner, .hs__gp-copy { transition: none; } .hs__gp:hover .hs__gp-inner, .hs__gp:focus-within .hs__gp-inner { transform: none; } }
/* Kopier-Knopf nur als Symbol; der Text bleibt für Screenreader (und meldet „Kopiert“) */
.hs__gp-copy-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hs__gp-i-check { display: none; }
.hs__gp-copy.is-done .hs__gp-i-copy { display: none; }
.hs__gp-copy.is-done .hs__gp-i-check { display: block; }

/* Netzseite: mögliche Termine zur gewählten Relation (dunkler Hintergrund, nur Linien, keine Kästen) */
.nz-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.nz-plan { grid-area: plan; margin-top: 12px; padding-top: 28px; border-top: 1px solid rgba(143,208,255,.18); }
.nz-plan[hidden] { display: none; }
.nz-plan__title { margin: 0; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8fd0ff; }
.nz-plan__table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.nz-plan__table thead th { padding: 0 12px 8px 0; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.5); border-bottom: 1px solid rgba(143,208,255,.35); }
.nz-plan__table tbody th, .nz-plan__table td { padding: 11px 12px 11px 0; text-align: left; vertical-align: middle; border-bottom: 1px solid rgba(143,208,255,.14); color: rgba(255,255,255,.85); }
.nz-plan__kw { display: block; font-weight: 800; color: #fff; }
.nz-plan__zeit { display: block; font-size: .8rem; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; }
.nz-plan__status { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; white-space: nowrap; }
.nz-plan__status::before { content: ''; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.nz-plan__status.is-gruen { color: #7fe0b0; }
.nz-plan__status.is-gruen::before { background: #3ccf91; box-shadow: 0 0 8px rgba(60,207,145,.6); }
.nz-plan__status.is-gelb { color: #f5d38a; }
.nz-plan__status.is-gelb::before { background: #f2b84b; }
.nz-plan__preis { padding: 0 0 2px; border: 0; border-bottom: 1px solid rgba(143,208,255,.35); background: none; font: inherit; font-size: .85rem; font-weight: 600; color: #8fd0ff; cursor: pointer; white-space: nowrap; }
.nz-plan__preis:hover { color: #fff; border-color: #fff; }
.nz-plan__btn { padding: 0 0 2px; border: 0; border-bottom: 1px solid #8fd0ff; background: none; font: inherit; font-size: .88rem; font-weight: 700; color: #8fd0ff; cursor: pointer; white-space: nowrap; transition: color var(--iw-dur-fast), border-color var(--iw-dur-fast); }
.nz-plan__btn:hover, .nz-plan__btn:focus-visible { color: #fff; border-color: #fff; }
.nz-plan__note { margin: 12px 0 0; font-size: .8rem; line-height: 1.55; color: rgba(255,255,255,.55); }
@media (max-width: 560px) {
  .nz-plan__table thead { display: none; }
  .nz-plan__table, .nz-plan__table tbody, .nz-plan__table tr, .nz-plan__table th, .nz-plan__table td { display: block; }
  .nz-plan__table tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 12px 0; border-bottom: 1px solid rgba(143,208,255,.14); }
  .nz-plan__table tbody th, .nz-plan__table td { padding: 0; border: 0; }
}
.nz-plan__zeit, .nz-plan__preis, .nz-plan__kw { white-space: nowrap; }
.nz-plan__table td:last-child { text-align: right; padding-right: 0; }

/* Suche über der Tabelle; Zeile des Wunschtermins hervorgehoben */
.nz-req .nz-plan__title { margin-bottom: 12px; }
.nz-plan .nz-plan__title { margin-bottom: 8px; }
.nz-plan__container { white-space: nowrap; font-weight: 600; }
@media (max-width: 560px) { .nz-plan__container { grid-column: 1 / -1; font-size: .85rem; color: rgba(255,255,255,.65); } }
/* Benutzer-Knopf leuchtet auf, wenn in der Termin-Tabelle „Einloggen“ geklickt wird (3 Pulse) */
.user-menu__toggle::after { content: ''; position: absolute; inset: -3px; border: 2px solid #8fd0ff; border-radius: 50%; opacity: 0; pointer-events: none; }
.user-menu__toggle.is-callout { animation: iw-user-pulse .8s var(--iw-ease) 3; }
.user-menu__toggle.is-callout::after { animation: iw-user-ring .8s ease-out 3; }
@keyframes iw-user-pulse { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.18); } }
@keyframes iw-user-ring { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(1.9); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .user-menu__toggle.is-callout { animation: none; outline: 2px solid #8fd0ff; outline-offset: 3px; } .user-menu__toggle.is-callout::after { animation: none; } }

.nz-plan__table tbody th { font-weight: 700; color: #fff; white-space: nowrap; }
.nz-req select:disabled { opacity: .55; }
/* Lange Angebotsliste: Kopfzeile bleibt beim Scrollen sichtbar */
.nz-plan__table { font-size: .88rem; }
.nz-plan__table tbody th { font-weight: 600; }
.nz-plan__terminal { font-weight: 700; color: #fff; white-space: nowrap; }
@media (max-width: 560px) { .nz-plan__terminal { font-weight: 700; } }

/* ===== Netzseite (09.10.2026): kompakter – Auswahl als Liste ohne Kästen, Tabelle mit Filtern direkt unter Auswahl und Karte ===== */
.nz-hero { padding: 104px 0 72px; }
.nz-hero__inner {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  grid-template-areas: "title map" "picker map" "plan plan";
  grid-template-rows: auto auto auto;
  row-gap: 20px;
}
.nz-hero__kopf { margin-top: 0; }
.nz-hero__title { margin-bottom: 8px; font-size: clamp(2rem, 3.2vw, 2.8rem); }
.nz-hero__lead { font-size: .98rem; max-width: 52ch; }

/* Start → Ziel: schmale Leiste */
.nz-wahl { gap: 8px; margin-bottom: 6px; }
.nz-wahl__slot { flex: 1 1 140px; min-height: 0; padding: 8px 12px; border-radius: 10px; }
.nz-wahl__k { font-size: .62rem; }
.nz-wahl__v { font-size: .98rem; }
.nz-wahl__pfeil { font-size: 1.1rem; }
.nz-wahl__reset { min-height: 36px; font-size: .88rem; }
.nz-step { margin-bottom: 14px; font-size: .88rem; }

/* Terminals: drei Spalten, jede eine schlichte Liste – Zeilen statt Kästen */
.nz-gruppen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
.nz-picker__label { margin: 0 0 4px; padding-bottom: 6px; font-size: .64rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.nz-chips { display: block; margin: 0 0 16px; }
.nz-chip {
  min-height: 34px; padding: 6px 8px; gap: 9px; border: 0; border-radius: 6px; background: none;
  font-size: .9rem; font-weight: 600; color: rgba(255,255,255,.82);
}
.nz-chip--anfrage { border-style: none; font-weight: 500; color: rgba(255,255,255,.58); }
.nz-chip__dot { width: 8px; height: 8px; }
.nz-chip--hafen .nz-chip__dot { width: 10px; height: 10px; }
.nz-chip:hover { background: rgba(255,255,255,.06); border-color: transparent; }
.nz-chip.is-linked { box-shadow: none; color: #8fd0ff; }
/* Gewählt: hell hinterlegt, Name in Weiß */
.nz-chip.is-active { background: rgba(143,208,255,.14); color: #fff; box-shadow: none; }
.nz-chip.is-active .nz-chip__dot { background: #8fd0ff; box-shadow: 0 0 0 1.5px #fff; }
.nz-chip::before { border-width: 1.5px; }
@keyframes nz-pick { 0% { transform: translateX(0); } 40% { transform: translateX(4px); } 100% { transform: none; } }

/* Karte etwas kleiner, Beschriftung zurückhaltender */
.nz-svg { max-width: 500px; }
.nz-legend { margin-top: 8px; font-size: .82rem; }
.nz-node__label { font-size: 12.5px; }
.nz-node--hafen .nz-node__label { font-size: 13.5px; }
.nz-node--anfrage .nz-node__label,
.nz-node--hafen.nz-node--anfrage .nz-node__label { font-size: 11.5px; }
.nz-hq__label { font-size: 11.5px; }

/* Termine: Kopf mit Strecke, Filter als eine schmale Leiste, Tabelle mit Rahmen – von Anfang an sichtbar */
.nz-plan { margin-top: 8px; padding-top: 24px; }
.nz-plan__kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 12px; }
.nz-plan .nz-plan__title { margin: 0; font-size: .7rem; }
.nz-info { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.nz-info[hidden] { display: none; }
.nz-info p { margin: 0; }
.nz-info__type { font-size: .7rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.nz-info__name { font-size: 1.05rem; font-weight: 800; color: #fff; }
.nz-info__sub, .nz-info__links { flex-basis: 100%; font-size: .84rem; color: rgba(255,255,255,.62); }
.nz-req { margin: 0 0 14px; animation: none; }
.nz-req__grid { grid-template-columns: 1fr 1.3fr 1.6fr .7fr 1fr 1.4fr; gap: 10px; }
.nz-req label { font-size: .74rem; color: rgba(255,255,255,.6); }
.nz-req input, .nz-req select { min-height: 38px; padding: 7px 10px; font-size: .88rem; }
.nz-req__hint { margin: 8px 0 0; font-size: .82rem; }
.nz-req__hint:empty { display: none; }
.nz-plan__rahmen { border: 1px solid rgba(143,208,255,.16); border-radius: 12px; padding: 4px 16px; background: rgba(255,255,255,.02); }
.nz-plan__table thead th { padding-top: 12px; }
.nz-plan__table tr:last-child th, .nz-plan__table tr:last-child td { border-bottom: 0; }
.nz-plan__leer td { padding: 26px 0 !important; text-align: center !important; font-size: .92rem; color: rgba(255,255,255,.55); }

@media (max-width: 1100px) {
  .nz-req__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .nz-hero__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "picker" "map" "plan"; }
  .nz-gruppen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .nz-gruppen { grid-template-columns: minmax(0, 1fr); }
  .nz-req__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .nz-plan__rahmen { padding: 0 12px; }
}

/* ===== Startseite: Trennung Netz-Teaser / Leistungen – nur über den etwas helleren Grund der Leistungen ===== */
.lk::before { background: linear-gradient(180deg, #121c31 0%, #131e34 45%, #0e1524 100%); }
/* Netzseite: Kopf der Termine knapp halten; „Alle anzeigen“ unter den ersten Zeilen */
.nz-info__links { display: none; }
.nz-plan__mehr td { padding: 14px 0 !important; text-align: center !important; }
/* Karte scrollt mit, seit die Tabelle in voller Breite darunter steht (sonst schiebt sie sich darüber) */
.nz-map { position: relative; top: auto; }
/* Startseite: Leistungen sofort mit dunklem Grund zeigen (sonst scheint bis zum Hinscrollen der helle Seitenhintergrund durch);
   is-visible startet weiterhin nur die Gleis-Animation */
.lk.reveal { opacity: 1; transform: none; }

/* ===== Unterseiten im Stil der Startseite (09.10.2026): Leistungen, Kontakt, Karriere (DE/EN), body.iw-sub =====
   Dunkler Blauverlauf statt Weißfläche, offene Layouts statt Karten mit Rahmen, ruhige Lichtflächen im Hintergrund,
   Überschriften und Blöcke blenden beim Scrollen ein. Animiert werden nur transform und opacity. */
.iw-sub { --sub-navy: #0a1628; --sub-text: rgba(255,255,255,.74); --sub-line: rgba(255,255,255,.1); --sub-hell: #8fd0ff; background: var(--sub-navy); }

/* Hero geht ohne Kante in den Verlauf über */
.iw-sub .page-hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 180px; z-index: 1; background: linear-gradient(180deg, rgba(10,22,40,0) 0%, var(--sub-navy) 100%); pointer-events: none; }
.iw-sub .page-hero .eyebrow { color: var(--iw-accent); }

/* Grund: Verlauf und zwei langsam wandernde Lichtflächen. overflow: clip statt hidden – hidden machte .main zu einem
   Scroll-Container, scrollIntoView (z. B. „Freischalten“ im Admin-Bereich) schob dann den Inhalt darin nach oben,
   ohne dass man zurückscrollen konnte (15.10.2026); clip schneidet nur ab. hidden davor als Rückfall für alte Browser. */
.iw-sub .main { position: relative; isolation: isolate; overflow: hidden; overflow: clip; color: var(--sub-text); background: linear-gradient(180deg, #0a1628 0%, #0f1d38 30%, #13223f 62%, #0c1629 100%); }
.iw-sub .main::before, .iw-sub .main::after { content: ''; position: absolute; z-index: -1; width: 900px; height: 900px; border-radius: 50%; pointer-events: none; }
.iw-sub .main::before { top: -200px; right: -320px; background: radial-gradient(closest-side, rgba(74,158,255,.16), rgba(74,158,255,0)); animation: iw-sub-drift 34s ease-in-out infinite alternate; }
.iw-sub .main::after { bottom: -260px; left: -360px; background: radial-gradient(closest-side, rgba(143,208,255,.10), rgba(143,208,255,0)); animation: iw-sub-drift 42s ease-in-out infinite alternate-reverse; }
@keyframes iw-sub-drift { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-160px, 220px) scale(1.15); } }

/* Typografie */
.iw-sub .section h2, .iw-sub .main h2 { color: #fff; }
.iw-sub .main h3 { color: #fff; }
.iw-sub .section-eyebrow { display: inline-flex; align-items: center; gap: 10px; color: var(--iw-accent); }
.iw-sub .section-eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; transform-origin: left; transform: scaleX(.35); transition: transform 900ms var(--iw-ease); }
.iw-sub .section-eyebrow.is-visible::before, .iw-sub .is-visible .section-eyebrow::before { transform: scaleX(1); }
.iw-sub .section-intro { color: var(--sub-text); }
.iw-sub .main a:not(.btn) { color: var(--sub-hell); }
.iw-sub .section--light { background: none; border: 0; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }

/* Knöpfe: hell auf dunkel, Umriss-Knöpfe als Textlink */
.iw-sub .main .btn { background: #fff; color: #0a1628; box-shadow: 0 10px 30px rgba(74,158,255,.18); }
.iw-sub .main .btn:hover { background: var(--sub-hell); color: #0a1628; }
.iw-sub .main .btn--outline { min-width: 0; min-height: 0; padding: 0 0 3px; border: 0; border-bottom: 1px solid rgba(255,255,255,.4); border-radius: 0; background: none; box-shadow: none; color: #fff; }
.iw-sub .main .btn--outline::after { content: ' →'; display: inline-block; margin-left: 6px; transition: transform var(--iw-dur-fast); }
.iw-sub .main .btn--outline:hover { background: none; color: var(--sub-hell); border-color: var(--sub-hell); transform: none; }
.iw-sub .main .btn--outline:hover::after { transform: translateX(4px); }

/* Formulare dunkel */
.iw-sub .main label { color: rgba(255,255,255,.7); font-weight: 600; }
.iw-sub .main input, .iw-sub .main select, .iw-sub .main textarea { border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.05); color: #fff; }
.iw-sub .main select option { color: #0a1628; }
.iw-sub .main input::placeholder, .iw-sub .main textarea::placeholder { color: rgba(255,255,255,.38); }
.iw-sub .main input:focus, .iw-sub .main select:focus, .iw-sub .main textarea:focus { border-color: var(--sub-hell); background: rgba(255,255,255,.08); box-shadow: 0 0 0 3px rgba(143,208,255,.15); }

/* --- Leistungen: Blöcke als Strecke – Symbole auf einer Linie, die sich beim Scrollen zeichnet --- */
.iw-sub .service-blocks { position: relative; gap: 56px 64px; }
.iw-sub .service-blocks::before { content: ''; display: none; position: absolute; left: 39px; top: 40px; bottom: 40px; width: 2px; background: linear-gradient(180deg, rgba(143,208,255,.6), rgba(74,158,255,.15)); transform-origin: top; transform: scaleY(0); transition: transform 1800ms var(--iw-ease); }
.iw-sub .service-blocks:has(.service-block.is-visible)::before { transform: scaleY(1); }
/* Linie nur, wenn die Blöcke untereinander stehen */
@media (max-width: 960px) { .iw-sub .service-blocks::before { display: block; } }
.iw-sub .service-block { grid-template-columns: 80px minmax(0, 1fr); gap: 40px; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .service-block:hover { transform: none; box-shadow: none; }
.iw-sub .service-block__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 80px; height: 80px; padding: 0; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #1b3561, #0d1a33); box-shadow: 0 0 0 1px rgba(143,208,255,.25), 0 0 34px rgba(74,158,255,.25); }
.iw-sub .service-block__icon img { width: 52px; height: 52px; object-fit: contain; filter: brightness(0) invert(1); opacity: .92; }
.iw-sub .service-block__icon .iw-icon-badge { width: 52px; height: 52px; background: none; box-shadow: none; color: #fff; }
.iw-sub .service-block.is-visible .service-block__icon { animation: iw-sub-glow 1.6s var(--iw-ease) .2s both; }
@keyframes iw-sub-glow { 0% { transform: scale(.7); opacity: 0; } 60% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); } }
.iw-sub .service-block__body h3 { font-size: 1.45rem; color: #fff; }
.iw-sub .service-block__body > p { max-width: 60ch; color: var(--sub-text); }
.iw-sub .service-list li { color: rgba(255,255,255,.66); }
.iw-sub .service-list li::before, .iw-sub .job-requirements li::before { content: ''; top: .55em; width: 7px; height: 7px; border-radius: 50%; background: var(--sub-hell); box-shadow: 0 0 10px rgba(143,208,255,.7); }
.iw-sub .dl-netz { margin-top: 48px; font-size: 1.05rem; color: #fff; }

/* Container-Spickzettel: Tabelle wie auf der Netzseite */
.iw-sub .dl-sheet__table thead th { color: var(--iw-accent); border-bottom-color: rgba(143,208,255,.4); }
.iw-sub .dl-sheet__table tbody th, .iw-sub .dl-sheet__table td { color: var(--sub-text); border-bottom-color: var(--sub-line); }
.iw-sub .dl-sheet__table tbody tr { transition: background var(--iw-dur-fast); }
.iw-sub .dl-sheet__table tbody tr:hover { background: rgba(143,208,255,.05); }
.iw-sub .dl-sheet__typ { color: #fff; }
.iw-sub .dl-sheet__name, .iw-sub .dl-sheet__muted td, .iw-sub .dl-sheet__note { color: rgba(255,255,255,.5); }
.iw-sub .dl-sheet__daily { color: #7ee2a8 !important; }
.iw-sub .dl-sheet.is-visible tbody tr { animation: iw-line-rise 600ms var(--iw-ease-out) both; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(2) { animation-delay: 80ms; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(3) { animation-delay: 160ms; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(4) { animation-delay: 240ms; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(5) { animation-delay: 320ms; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(6) { animation-delay: 400ms; }
.iw-sub .dl-sheet.is-visible tbody tr:nth-child(7) { animation-delay: 480ms; }
@media (max-width: 720px) { .iw-sub .dl-sheet__table tr { border-bottom-color: var(--sub-line); } .iw-sub .dl-sheet__table td::before { color: rgba(255,255,255,.45); } }

/* Ablauf: Schritte ohne Kästen, leuchtende Nummern auf der Linie */
.iw-sub .step { padding: 0 12px 0 0; background: none; border: 0; box-shadow: none; }
.iw-sub .step:hover { transform: none; box-shadow: none; }
.iw-sub .step__num { background: #0d1a33; color: #fff; box-shadow: 0 0 0 1px rgba(143,208,255,.45), 0 0 22px rgba(74,158,255,.35); }
.iw-sub .step p { color: var(--sub-text); }
.iw-sub .steps--route::before { top: 22px; left: 22px; background: linear-gradient(90deg, rgba(143,208,255,.7), rgba(74,158,255,.15)); }

/* --- Kontakt --- */
.iw-sub .kt-route { position: relative; padding: 56px 0; background: radial-gradient(ellipse at 80% 50%, rgba(74,158,255,.18), rgba(74,158,255,0) 60%); border-bottom: 0; }
.iw-sub .kt-route__eyebrow { color: var(--iw-accent); }
.iw-sub .kt-route h2 { color: #fff; }
.iw-sub .kt-route p { color: var(--sub-text); }
.iw-sub .main .kt-route__btn { min-width: 0; min-height: 0; padding: 0 0 3px; border-radius: 0; background: none; box-shadow: none; color: #fff; font-size: 1.05rem; border-bottom: 1px solid rgba(255,255,255,.4); }
.iw-sub .main .kt-route__btn:hover { background: none; color: var(--sub-hell); border-color: var(--sub-hell); transform: translateX(4px); }
.iw-sub .kt-direct__list > div, .iw-sub .kt-direct__list > div:last-child { border-color: var(--sub-line); transition: transform var(--iw-dur) var(--iw-ease); }
.iw-sub .kt-direct__list > div:hover { transform: translateX(6px); }
.iw-sub .kt-direct__list dt { color: var(--iw-accent); }
.iw-sub .kt-direct__list dd, .iw-sub .kt-direct__list dd a { color: #fff; }
.iw-sub .kt-direct__list dd a { border-bottom-color: rgba(143,208,255,.35); }
.iw-sub .kt-direct__list dd span, .iw-sub .kt-direct__jobs, .iw-sub .kt-map p, .iw-sub .kt-form__note { color: rgba(255,255,255,.55); }
.iw-sub .kt-map__btn { color: var(--sub-hell); border-bottom-color: var(--sub-hell); }

/* --- Karriere: Vorteile als offenes Raster mit leuchtenden Symbolen, Stelle ohne Kasten --- */
.iw-sub .karriere-benefits { gap: 44px 36px; }
.iw-sub .benefit-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .benefit-card:hover { transform: none; box-shadow: none; }
.iw-sub .benefit-card__icon { display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 18px; border-radius: 50%; color: #fff; background: radial-gradient(circle at 50% 40%, #1b3561, #0d1a33); box-shadow: 0 0 0 1px rgba(143,208,255,.25), 0 0 26px rgba(74,158,255,.22); transition: transform var(--iw-dur) var(--iw-ease), box-shadow var(--iw-dur); }
.iw-sub .benefit-card:hover .benefit-card__icon { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(143,208,255,.6), 0 0 36px rgba(74,158,255,.45); }
.iw-sub .benefit-card h3 { font-size: 1.05rem; color: #fff; }
.iw-sub .benefit-card p { color: rgba(255,255,255,.62); }
.iw-sub .job-card { position: relative; padding: 36px 0 36px 32px; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .job-card::before { content: ''; position: absolute; left: 0; top: 36px; bottom: 36px; width: 2px; background: linear-gradient(180deg, var(--sub-hell), rgba(74,158,255,0)); transform-origin: top; transform: scaleY(0); transition: transform 1200ms var(--iw-ease) .2s; }
.iw-sub .job-card.is-visible::before { transform: scaleY(1); }
.iw-sub .job-card__head h3 { font-size: 1.35rem; color: #fff; }
.iw-sub .job-tag { background: rgba(143,208,255,.1); color: var(--sub-hell); }
.iw-sub .job-card > p { max-width: 70ch; color: var(--sub-text); }
.iw-sub .job-requirements li { color: rgba(255,255,255,.66); }
.iw-sub .bewerbung-kontakt { padding: 0; background: none; border: 0; }
.iw-sub .bewerbung-kontakt__label, .iw-sub .bewerbung-kontakt__hint, .iw-sub .bewerbung-checklist__title { color: rgba(255,255,255,.5); }
.iw-sub .bewerbung-kontakt__email { font-size: 1.5rem; color: #fff !important; }
.iw-sub .bewerbung-info p { color: var(--sub-text); }
.iw-sub .bewerbung-step, .iw-sub .bewerbung-step:first-child { border-color: var(--sub-line); transition: transform var(--iw-dur) var(--iw-ease); }
.iw-sub .bewerbung-step:hover { transform: translateX(6px); }
.iw-sub .bewerbung-step__num { color: var(--sub-hell); opacity: .7; }
.iw-sub .bewerbung-step strong { color: #fff; }
.iw-sub .bewerbung-step p { color: rgba(255,255,255,.58); }

/* Header bleibt beim Scrollen dunkel (wie auf der Netzseite) */
.iw-sub .header.is-scrolled { background: rgba(10, 22, 40, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom-color: rgba(143, 208, 255, 0.14); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.25); }
.iw-sub .header.is-scrolled .brand-text, .iw-sub .header.is-scrolled .nav-links a { color: #fff; }
.iw-sub .header.is-scrolled .nav-toggle span { background: #fff; }
.iw-sub .header.is-scrolled .lang-switcher { border-left-color: rgba(255,255,255,0.25); }
.iw-sub .header.is-scrolled .lang-switcher__btn { color: rgba(255,255,255,0.55); }
.iw-sub .header.is-scrolled .lang-switcher__btn.is-active { background: rgba(255,255,255,0.18); color: #fff; }
.iw-sub .header.is-scrolled .user-menu__toggle { color: #fff; border-color: rgba(255,255,255,0.35); }

@media (max-width: 720px) {
  .iw-sub .service-blocks::before { left: 31px; }
  .iw-sub .service-block { grid-template-columns: 64px minmax(0, 1fr); gap: 20px; }
  .iw-sub .service-block__icon { width: 64px; height: 64px; }
  .iw-sub .service-block__icon img { width: 40px; height: 40px; }
  .iw-sub .service-list { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  .iw-sub .main::before, .iw-sub .main::after, .iw-sub .service-block.is-visible .service-block__icon, .iw-sub .dl-sheet.is-visible tbody tr { animation: none; }
  .iw-sub .service-blocks::before, .iw-sub .job-card::before, .iw-sub .section-eyebrow::before { transform: none; transition: none; }
}

/* --- Über uns (iw-sub): Kennzahlen, Werte, Team, Standort und Verhaltenskodex ohne Kästen --- */
.iw-sub .about-intro__text p { color: var(--sub-text); }
.iw-sub .about-stat-block { gap: 36px 32px; }
.iw-sub .about-stat { position: relative; padding: 4px 0 4px 22px; background: none; border: 0; border-radius: 0; box-shadow: none; gap: 10px; }
.iw-sub .about-stat::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: linear-gradient(180deg, var(--sub-hell), rgba(74,158,255,0)); transform-origin: top; transform: scaleY(0); transition: transform 1000ms var(--iw-ease) .15s; }
.iw-sub .about-stat.is-visible::before { transform: scaleY(1); }
.iw-sub .about-stat:hover { transform: none; box-shadow: none; }
.iw-sub .about-stat__value { font-size: 1.45rem; line-height: 1.15; color: #fff; }
.iw-sub .main .about-stat__value a { color: #fff; }
.iw-sub .about-stat__label { color: rgba(255,255,255,.5); }

.iw-sub .values-grid { gap: 48px 40px; }
.iw-sub .value-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; text-align: left; }
.iw-sub .value-card:hover { transform: none; box-shadow: none; }
.iw-sub .value-card__icon { width: 56px; height: 56px; color: #fff; background: radial-gradient(circle at 50% 40%, #1b3561, #0d1a33); box-shadow: 0 0 0 1px rgba(143,208,255,.25), 0 0 28px rgba(74,158,255,.24); transition: transform var(--iw-dur) var(--iw-ease), box-shadow var(--iw-dur); }
.iw-sub .value-card:hover .value-card__icon { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(143,208,255,.6), 0 0 38px rgba(74,158,255,.45); }
.iw-sub .value-card.is-visible .value-card__icon { animation: iw-sub-glow 1.6s var(--iw-ease) .15s both; }
.iw-sub .value-card h3 { color: #fff; }
.iw-sub .value-card p { color: rgba(255,255,255,.62); }

.iw-sub .team-grid { gap: 44px 56px; }
.iw-sub .team-card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .team-card__avatar { background: radial-gradient(circle at 50% 35%, #2a5aa0, #0d1a33); box-shadow: 0 0 0 1px rgba(143,208,255,.35), 0 0 30px rgba(74,158,255,.3); }
.iw-sub .team-card__body h3 { color: #fff; }
.iw-sub .team-card__role { color: var(--iw-accent); }
.iw-sub .team-card__body p { color: rgba(255,255,255,.62); }
.iw-sub .team-card--placeholder { background: none; }
.iw-sub .team-card--placeholder .team-card__avatar { background: none; color: var(--sub-hell); box-shadow: inset 0 0 0 1px rgba(143,208,255,.45); }
.iw-sub .team-card--placeholder .team-card__role { color: var(--sub-hell); }
.iw-sub a.team-card:hover { transform: translateX(6px); box-shadow: none; }

.iw-sub .location-block__info { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .info-item { padding-left: 18px; border-left: 2px solid rgba(143,208,255,.35); }
.iw-sub .info-item strong { color: #fff; }
.iw-sub .info-item p, .iw-sub .info-item a { color: var(--sub-text); }
.iw-sub .location-block__map { border-color: rgba(143,208,255,.16); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.iw-sub .map-consent { background: radial-gradient(ellipse at 50% 40%, rgba(74,158,255,.14), rgba(10,22,40,.6)); }
.iw-sub .map-consent__icon { color: var(--sub-hell); }
.iw-sub .map-consent__inner strong { color: #fff; }
.iw-sub .map-consent__inner p { color: rgba(255,255,255,.6); }

.iw-sub .coc-block__text p { color: var(--sub-text); }
.iw-sub .coc-block__items { gap: 6px 28px; }
.iw-sub .coc-item { padding: 12px 0; background: none; border: 0; border-radius: 0; color: #fff; transition: transform var(--iw-dur) var(--iw-ease); }
.iw-sub .coc-item:hover { transform: translateX(6px); }
.iw-sub .coc-item__icon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: var(--sub-hell); background: rgba(143,208,255,.08); box-shadow: 0 0 18px rgba(74,158,255,.18); }

/* Schlussaufruf: Verlauf statt Kasten, über die volle Breite in den Grund gelegt */
.iw-sub .cta-banner__inner { border-radius: 24px; background: linear-gradient(135deg, #12284d 0%, #1560bb 55%, #2a7fff 100%); box-shadow: 0 30px 80px rgba(21,96,187,.28); }
@media (prefers-reduced-motion: reduce) {
  .iw-sub .about-stat::before { transform: none; transition: none; }
  .iw-sub .value-card.is-visible .value-card__icon { animation: none; }
}

/* ===== Kundenportal: Mein Konto, Admin (konto.html, admin.html; werkzeuge/build-portal.js) =====
   Kompakt, offene Tabellen ohne Kartenrahmen, Aktionen als Textlinks. */
.portal { padding: 130px 0 72px; }
.portal h1 { margin: 6px 0 14px; font-size: clamp(1.7rem, 4vw, 2.2rem); color: var(--text); }
.portal h2 { margin: 36px 0 12px; font-size: 1.1rem; color: var(--text); }
.portal__lead { margin: 0 0 20px; max-width: 62ch; color: var(--text-2); line-height: 1.7; }
.portal__status, .portal__hinweis { color: var(--muted); font-size: .9rem; margin: 8px 0; }
.portal__fehler { color: #a3261b; margin: 12px 0; }
.portal__links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; }
.portal__links a:not(.btn), .portal__wer a, .portal-tabelle__aktionen a, .portal__protokoll summary { color: var(--primary); font-weight: 600; text-decoration: none; cursor: pointer; }
.portal__links a:not(.btn):hover, .portal__wer a:hover, .portal-tabelle__aktionen a:hover { text-decoration: underline; }
.portal__wer { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: baseline; margin: 0 0 8px; color: var(--text-2); font-size: .95rem; }
.portal__wer strong { color: var(--text); }
.portal__kopf { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px 24px; margin-top: 28px; }
.portal__kopf h2 { margin: 0; }
.portal__filter, .portal-formular { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: flex-end; }
.portal__filter label, .portal-formular label { display: flex; flex-direction: column; gap: 4px; font-size: .78rem; font-weight: 600; color: var(--text-3); }
.portal__filter input, .portal__filter select, .portal-formular input, .portal-formular select {
  font: inherit; font-size: .9rem; color: var(--text); padding: 7px 10px; min-width: 150px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--surface);
}
.portal__filter input[type="search"] { min-width: 240px; }
.portal-formular { margin: 4px 0 8px; }
.portal-formular__breit { flex: 1 1 340px; }
.portal-formular__breit input { width: 100%; }
.portal-formular .btn { min-width: 0; min-height: 0; padding: 9px 18px; }
.portal__tabelle { overflow-x: auto; margin: 10px 0; -webkit-overflow-scrolling: touch; }
.portal-tabelle { width: 100%; border-collapse: collapse; font-size: .86rem; }
.portal-tabelle th { text-align: left; font-size: .72rem; letter-spacing: .04em; text-transform: uppercase; color: var(--text-3); font-weight: 700; padding: 6px 10px; white-space: nowrap; }
.portal-tabelle td { padding: 8px 10px; color: var(--text); white-space: nowrap; }
.portal-tabelle tbody tr:nth-child(odd):not(.portal-tabelle__details) td { background: rgba(21, 96, 187, .035); }
.portal-tabelle__zeile { cursor: pointer; }
.portal-tabelle__zeile:hover td, .portal-tabelle__zeile:focus-visible td { background: var(--primary-tint) !important; outline: none; }
.portal-tabelle__details td { white-space: normal; padding: 4px 10px 14px; }
.portal-tabelle__details dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 18px; margin: 0; }
.portal-tabelle__details dt { color: var(--text-3); font-size: .8rem; }
.portal-tabelle__details dd { margin: 0; overflow-wrap: anywhere; }
.portal-tabelle__aktionen a { display: inline-block; margin-right: 12px; }
.portal--admin .portal-tabelle td { white-space: normal; overflow-wrap: anywhere; }
.portal--admin .portal-tabelle td.portal-tabelle__aktionen { min-width: 190px; }
.portal--admin .portal-tabelle td.portal-status { white-space: nowrap; overflow-wrap: normal; }
.portal-status { font-weight: 600; }
.portal-status--geplant, .portal-status--eingeladen { color: var(--text-2); }
.portal-status--unterwegs { color: var(--primary); }
.portal-status--zugestellt, .portal-status--aktiv { color: #1d7a46; }
.portal-status--storniert, .portal-status--gesperrt { color: #a3261b; }
.portal__meldung { margin: 10px 0; color: #1d7a46; font-weight: 600; }
.portal__meldung--fehler { color: #a3261b; }
.portal__einladung { margin: 20px 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--primary); }
.portal__einladung h2 { margin-top: 0; }
.portal__einladung pre { white-space: pre-wrap; font: inherit; font-size: .9rem; color: var(--text-2); margin: 10px 0; max-width: 72ch; }
.portal__protokoll { margin-top: 36px; }
.portal__protokoll summary { font-size: 1rem; }
.portal__protokoll .portal-tabelle td:last-child { white-space: normal; }
@media (max-width: 720px) {
  .portal { padding: 100px 0 48px; }
  .portal__filter, .portal-formular { flex-direction: column; align-items: stretch; }
  .portal__filter input, .portal__filter select, .portal-formular input, .portal-formular select { min-width: 0; width: 100%; }
}

/* Netzseite: Preise für angemeldete Kunden (Spez Teil F) – Häkchen unter der Suche, Positionen zum Aufklappen */
.nz-req__zusatz { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 10px 0 0; }
.nz-req .nz-req__zusatz label { display: inline-flex; flex-direction: row; align-items: center; gap: 7px; font-size: .82rem; color: rgba(255,255,255,.75); cursor: pointer; }
.nz-req__zusatz input { width: 15px; height: 15px; margin: 0; accent-color: #8fd0ff; }
.nz-plan__preis { font-variant-numeric: tabular-nums; }
.nz-plan__preis-text { font-size: .85rem; color: rgba(255,255,255,.6); white-space: nowrap; }
.nz-plan__table .nz-plan__details td { padding: 2px 0 14px; color: rgba(255,255,255,.75); text-align: left; }
.nz-plan__details dl { display: grid; grid-template-columns: max-content max-content; gap: 3px 28px; margin: 0; font-size: .84rem; font-variant-numeric: tabular-nums; }
.nz-plan__details dt { color: rgba(255,255,255,.6); }
.nz-plan__details dd { margin: 0; text-align: right; }
.nz-plan__details .is-summe { font-weight: 700; color: #fff; }
.nz-plan__details p { margin: 8px 0 0; font-size: .78rem; color: rgba(255,255,255,.5); }
@media (max-width: 560px) { .nz-plan__table tr.nz-plan__details { display: block; padding-top: 0; } }
.nz-req .nz-req__zusatz .nz-req__ortwahl[hidden] { display: none; }
.nz-req__ortwahl select { margin-left: 4px; padding: 3px 8px; font: inherit; font-size: .82rem; color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(143,208,255,.45); border-radius: 6px; }
.nz-req__ortwahl select option { color: #102033; }
.portal h3 { margin: 22px 0 6px; font-size: .95rem; color: var(--text); }
.portal [data-suchfilter] .portal__links { margin: 0 0 8px; }

/* Angebot als Fenster auf der Seite (angebot.js; Netzseite, Mein Konto, Admin) – Spez Teil F */
.iw-angebot { width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 12px; background: #eef1f5; color: var(--text); box-shadow: 0 24px 60px rgba(8, 20, 40, .45); overflow: auto; }
.iw-angebot::backdrop { background: rgba(8, 20, 40, .6); }
.iw-angebot__kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 14px 20px 6px; }
.iw-angebot__titel { margin: 0; font-weight: 700; color: var(--text); }
.iw-angebot__status { margin: 0; font-size: .85rem; color: var(--text-2); }
.iw-angebot__meldung { margin: 0 20px 8px; font-size: .88rem; color: #1d7a46; }
.iw-angebot__meldung.is-fehler { color: #a3261b; }
.iw-angebot__dokument { display: block; width: 100%; height: 70vh; border: 0; background: #eef1f5; }
.iw-angebot__aktionen { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 20px; background: #fff; border-top: 1px solid var(--line); }
.iw-angebot__aktionen .btn { min-width: 0; min-height: 0; padding: 9px 18px; }
.iw-angebot__link { padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--primary); cursor: pointer; }
.iw-angebot__link:hover { text-decoration: underline; }
.nz-plan__angebot { margin-top: 10px; }
.nz-plan__angebot-fehler { display: block; margin-top: 6px; font-size: .8rem; color: #f5d38a; }

/* ===== Kundenkonto-Menü angemeldet (script.js): Name, Mein Konto bzw. Konten verwalten, Abmelden ===== */
.user-menu__punkt { position: absolute; pointer-events: none; right: 0; bottom: 0; width: 9px; height: 9px; border-radius: 50%; background: #3ecf7a; box-shadow: 0 0 0 2px #0a1628; }
.user-menu__wer { display: flex; flex-direction: column; gap: 2px; min-width: 230px; max-width: 280px; padding: 8px 14px 10px; }
.user-menu__wer strong { font-size: .95rem; color: var(--text); overflow-wrap: anywhere; }
.user-menu__wer span { font-size: .8rem; color: var(--muted); line-height: 1.4; }
button.user-menu__item { width: 100%; border: 0; background: none; font: inherit; font-size: 0.95rem; font-weight: 600; text-align: left; cursor: pointer; }
button.user-menu__item:hover,
button.user-menu__item:focus-visible { background: var(--primary-tint); color: var(--primary); outline: none; }

/* ===== Kundenportal im dunklen Design der Unterseiten (13.10.2026): Mein Konto, Admin, Konto anfragen (body.iw-sub) ===== */
.iw-sub .portal h1, .iw-sub .portal h2, .iw-sub .portal h3, .iw-sub .account-request h1 { color: #fff; }
.iw-sub .portal__lead, .iw-sub .portal__wer, .iw-sub .account-request__lead { color: var(--sub-text); }
.iw-sub .portal__wer strong { color: #fff; }
.iw-sub .portal__status, .iw-sub .portal__hinweis, .iw-sub .account-request__privacy { color: rgba(255,255,255,.55); }
.iw-sub .portal__fehler, .iw-sub .portal__meldung--fehler { color: #ff9b8f; }
.iw-sub .portal__meldung { color: #7ee2a8; }
.iw-sub .portal__links a:not(.btn), .iw-sub .portal__wer a, .iw-sub .portal-tabelle__aktionen a, .iw-sub .portal__protokoll summary { color: var(--sub-hell); }
.iw-sub .portal__filter label, .iw-sub .portal-formular label { color: rgba(255,255,255,.6); }
.iw-sub .portal__tabelle { color-scheme: dark; }
.iw-sub .portal-tabelle th { color: var(--iw-accent); border-bottom: 1px solid rgba(143,208,255,.35); }
.iw-sub .portal-tabelle td { color: var(--sub-text); border-bottom: 1px solid var(--sub-line); }
.iw-sub .portal-tabelle tbody tr:nth-child(odd):not(.portal-tabelle__details) td { background: none; }
.iw-sub .portal-tabelle__zeile:hover td, .iw-sub .portal-tabelle__zeile:focus-visible td { background: rgba(143,208,255,.07) !important; }
.iw-sub .portal-tabelle__details dt { color: rgba(255,255,255,.5); }
.iw-sub .portal .portal-status--geplant, .iw-sub .portal .portal-status--eingeladen { color: rgba(255,255,255,.75); }
.iw-sub .portal .portal-status--unterwegs { color: var(--sub-hell); }
.iw-sub .portal .portal-status--zugestellt, .iw-sub .portal .portal-status--aktiv { color: #7ee2a8; }
.iw-sub .portal .portal-status--storniert, .iw-sub .portal .portal-status--gesperrt { color: #ff9b8f; }
.iw-sub .portal__einladung { border-left-color: var(--sub-hell); }
.iw-sub .portal__einladung p, .iw-sub .portal__einladung pre { color: var(--sub-text); }
.iw-sub .portal__einladung strong { color: #fff; }
.iw-sub .account-request__note { background: rgba(143,208,255,.06); border-left-color: var(--sub-hell); color: var(--sub-text); }
.iw-sub .account-request__grid { gap: 40px; }
.iw-sub .account-request__card { padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none; }
.iw-sub .account-request__card h2 { color: #fff; }
.iw-sub .account-request__card p { color: var(--sub-text); }
.iw-sub .account-request__fields li { border-bottom-color: var(--sub-line); color: #fff; }
.iw-sub .account-request__need { color: rgba(255,255,255,.5); }
.iw-sub .account-request__template { background: rgba(255,255,255,.04); border-color: var(--sub-line); color: var(--sub-text); }

/* ===== Kundenportal ruhiger (13.10.2026): Felder als Linie statt Kasten, Admin mit Reitern und Formularen auf Klick ===== */
.iw-sub .portal input, .iw-sub .portal select {
  min-width: 0; padding: 6px 0; border: 0; border-bottom: 1px solid rgba(255,255,255,.22); border-radius: 0;
  background: transparent; box-shadow: none; color: #fff; font-size: .9rem;
}
.iw-sub .portal select {
  -webkit-appearance: none; appearance: none; padding-right: 20px; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238fd0ff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 2px center;
}
.iw-sub .portal input:focus, .iw-sub .portal select:focus { outline: none; border-bottom-color: var(--sub-hell); background-color: transparent; box-shadow: none; }
.iw-sub .portal input[type="date"] { color-scheme: dark; }
.iw-sub .portal input[type="search"] { min-width: 220px; }
/* Vom Browser ausgefüllte Felder (Autofill): sonst hellblauer Kasten mit schwarzer Schrift im dunklen Design
   (15.10.2026). Den Hintergrund setzt der Browser fest – die lange Übergangszeit hält ihn praktisch transparent. */
.iw-sub .portal input:-webkit-autofill, .iw-sub .portal input:-webkit-autofill:hover, .iw-sub .portal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #fff; caret-color: #fff; font-size: .9rem;
  transition: background-color 600000s 0s, color 600000s 0s;
}
.iw-sub .portal input:autofill { -webkit-text-fill-color: #fff; caret-color: #fff; }
.iw-sub .portal__filter label, .iw-sub .portal-formular label { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.5); }
.iw-sub .portal__filter { gap: 10px 28px; }
.iw-sub .portal__filter select { min-width: 120px; }
.iw-sub .portal-tabelle select { padding-top: 2px; padding-bottom: 2px; font-size: .86rem; }

.portal-reiter { display: flex; gap: 28px; margin: 26px 0 22px; overflow-x: auto; scrollbar-width: none; }
.portal-reiter::-webkit-scrollbar { display: none; }
.portal-reiter a { position: relative; padding: 6px 0; font-size: .95rem; font-weight: 700; white-space: nowrap; text-decoration: none; }
.iw-sub .main .portal-reiter a { color: rgba(255,255,255,.5); }
.iw-sub .main .portal-reiter a:hover, .iw-sub .main .portal-reiter a[aria-current="page"] { color: #fff; }
.portal-reiter a::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--sub-hell, #8fd0ff); transform: scaleX(0); transform-origin: left; transition: transform var(--iw-dur-fast, .2s) ease; }
.portal-reiter a[aria-current="page"]::after { transform: scaleX(1); }

.portal-leiste { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 12px 28px; margin: 0 0 14px; }
.portal-leiste .portal__hinweis { margin: 0; }
.portal-leiste__aktion { font-weight: 700; text-decoration: none; white-space: nowrap; }
.portal-leiste__aktion[hidden] { display: none; }

.portal--admin .portal-formular { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 28px; margin: 4px 0 26px; }
.portal--admin .portal-formular[hidden] { display: none; }
.portal--admin .portal-formular__breit { grid-column: 1 / -1; max-width: 520px; }
.portal--admin .portal-formular input, .portal--admin .portal-formular select { width: 100%; }
.portal-formular__knoepfe { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; margin: 4px 0 0; }
.iw-sub .main .portal-formular__knoepfe .btn--outline { padding: 0 0 3px; font-size: .95rem; }
.iw-sub .portal-bereich h3 { margin-top: 26px; }
@media (max-width: 720px) {
  .portal-reiter { gap: 22px; }
  .portal-leiste { flex-direction: column; align-items: stretch; }
}
.portal-formular__titel { grid-column: 1 / -1; margin: 18px 0 0 !important; font-size: 1rem !important; }

/* Cookie-Hinweis (script.js): schmale dunkle Leiste unten, nur transform/opacity animiert */
.iw-cookie { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; gap: 10px 28px; padding: 12px 20px; padding-bottom: max(12px, env(safe-area-inset-bottom)); background: rgba(12, 22, 40, .94); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: rgba(255,255,255,.72); font-size: .82rem; line-height: 1.45; transform: translateY(100%); opacity: 0; transition: transform .35s ease, opacity .35s ease; }
.iw-cookie.is-sichtbar { transform: none; opacity: 1; }
.iw-cookie p { margin: 0; max-width: 760px; }
.iw-cookie a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; }
.iw-cookie a:hover { color: #fff; }
.iw-cookie button { flex: none; padding: 4px 0; border: 0; background: none; color: #fff; font: inherit; font-weight: 700; cursor: pointer; }
.iw-cookie button:hover, .iw-cookie button:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 600px) { .iw-cookie { justify-content: space-between; padding-left: 16px; padding-right: 16px; font-size: .78rem; } }
@media (prefers-reduced-motion: reduce) { .iw-cookie { transition: none; } }

/* Selbstregistrierung (Teil B3): Angaben-Formular auf Mein Konto, Schritte auf Konto anfragen */
.portal-formular--angaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 28px; max-width: 760px; margin: 8px 0 26px; }
.portal-formular--angaben input { width: 100%; }
.portal-formular--angaben .portal__fehler { margin: 0; }
.account-request__schritte { margin: 0 0 28px; padding-left: 1.2em; max-width: 62ch; line-height: 1.75; }
.account-request__schritte li { margin: 0 0 8px; }
.iw-sub .account-request__schritte { color: var(--sub-text); }
.iw-sub .account-request__schritte strong { color: #fff; }

/* Zahlen-Zug mit Lok-Bild statt gezeichneter Lok (Vorlage Adem, 15.10.2026): Seitenansicht, ca. 3,5 : 1 */
.iw-loco.hs-facts__loco--bild { width: 240px; height: auto; padding-bottom: 4px; }
.hs-facts--szene .hs-facts__loco--bild img { filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
/* Lok so groß, dass das Dach etwa auf Höhe der Container liegt, ohne den Containern Breite zu nehmen: die Spalte bleibt
   schmal, das Bild ist 135 % breit und ragt links aus dem Bild (Wunsch Adem 15.10.2026) */
@media (min-width: 961px) {
  .iw-loco.hs-facts__loco--bild { width: clamp(240px, 24vw, 380px); padding-bottom: 2px; }
  .hs-facts__loco--bild img { width: 135%; max-width: none; margin-left: -35%; }
}

/* ===== Startseite, Netz-Teaser: Angebot als schräge Banner, die nacheinander von rechts hereinfliegen
   (wie „Choose your Character“, Wunsch Adem 15.10.2026). Nur transform/opacity, reduzierte Bewegung: sofort sichtbar ===== */
.hs-werbung { position: absolute; top: 10px; right: -10px; width: 58%; display: grid; justify-items: end; gap: 12px; pointer-events: none; }
.hs-werbung ul { list-style: none; margin: 0; padding: 0; display: grid; justify-items: end; gap: 10px; }
.hs-werbung li, .hs-werbung__titel { margin: 0; transform: skewX(-14deg); opacity: 0; }
.hs-werbung li > span, .hs-werbung__titel > span { display: block; transform: skewX(14deg); white-space: nowrap; }
.hs-werbung__haupt li { position: relative; overflow: hidden; padding: 12px 34px 12px 26px; box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.hs-werbung__haupt li span { font-size: clamp(1.25rem, 2vw, 1.75rem); font-weight: 800; letter-spacing: -.01em; line-height: 1.1; }
.hs-werbung__haupt li:nth-child(1) { background: linear-gradient(100deg, #1f4f8c, #2f7fd6); color: #fff; margin-right: 40px; }
.hs-werbung__haupt li:nth-child(2) { background: linear-gradient(100deg, #eef3f9, #ffffff); color: #0f1f3d; margin-right: 10px; }
.hs-werbung__haupt li:nth-child(3) { background: linear-gradient(100deg, #e0702a, #f59a3c); color: #fff; margin-right: 56px; }
/* heller Lichtstreif, der einmal über jedes Banner zieht */
.hs-werbung__haupt li::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%); transform: translateX(-120%); }
.hs-werbung__titel { padding: 4px 16px; margin-top: 6px; background: rgba(143,208,255,.14); }
.hs-werbung__titel span { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: #8fd0ff; }
.hs-werbung__filter { grid-template-columns: repeat(2, auto); justify-content: end; }
.hs-werbung__filter li { padding: 8px 18px; background: rgba(14,22,38,.82); border: 1px solid rgba(143,208,255,.25); box-shadow: 0 8px 18px rgba(0,0,0,.3); }
.hs-werbung__filter li span { font-size: .86rem; color: #fff; }
.hs-werbung__filter b { font-size: .66rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-right: 4px; }
@keyframes hs-einflug {
  0% { opacity: 0; transform: translateX(120%) skewX(-14deg); }
  55% { opacity: 1; }
  78% { transform: translateX(-4%) skewX(-14deg); }
  100% { opacity: 1; transform: translateX(0) skewX(-14deg); }
}
@keyframes hs-streif { from { transform: translateX(-120%); } to { transform: translateX(120%); } }
.hs-vorschau.is-visible .hs-werbung li, .hs-vorschau.is-visible .hs-werbung__titel { animation: hs-einflug .6s cubic-bezier(.2,.9,.3,1) calc(.25s + var(--i) * .09s) both; }
.hs-vorschau.is-visible .hs-werbung__haupt li::after { animation: hs-streif .9s ease-out calc(.75s + var(--i) * .09s) both; }
.hs-vorschau:hover .hs-werbung__haupt li:nth-child(odd) { transform: translateX(-6px) skewX(-14deg); transition: transform .3s var(--iw-ease); }
@media (max-width: 960px) {
  .hs-werbung { position: relative; top: auto; right: auto; width: auto; justify-items: start; }
  .hs-werbung ul, .hs-werbung__filter { justify-items: start; justify-content: start; }
  .hs-werbung__haupt li:nth-child(n) { margin-right: 0; margin-left: 8px; }
}
@media (max-width: 520px) { .hs-werbung__filter { grid-template-columns: auto; } }
@media (prefers-reduced-motion: reduce) {
  .hs-werbung li, .hs-werbung__titel { opacity: 1; animation: none !important; }
  .hs-werbung__haupt li::after { display: none; }
}

/* Profile und Ansprechpartner-Tabelle im Portal (Teil B3 Neufassung 15.10.2026) */
.portal-profile { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0 8px; }
.portal-profil.is-aktiv { border-color: var(--sub-hell); }
.portal--admin .portal-konto--gruppe td { background: rgba(143,208,255,.05); }
.portal--admin .portal-konto--gruppe + .portal-konto--profil td { border-top: 0; }
.portal--admin .portal-konto--profil td:first-child { padding-left: 22px; }
.portal__warnung { color: #ffb86b; }
.portal-tabelle__tabelle { white-space: normal; min-width: 150px; }