/* ============================================================
   EmpfehlungsHeld - Berater Template CSS
   Premium UI/UX - Design System für Berater und Dienstleister
   ============================================================ */

/* Google-Fonts-Import entfernt (DSGVO: keine IP-Uebertragung an Google-Server).
   Bei Bedarf 'Inter' lokal hosten und hier per @font-face einbinden. */

:root {
  /* Markenfarben (Variablenname --dvag-* aus historischen Gruenden beibehalten) */
  --dvag-red: #9D2235;
  --dvag-gold: #C8AA22;
  --dvag-gold-hover: #A08918;
  --dvag-dark: #1A1A1A;
  --dvag-text: #333333;
  --dvag-text-light: #666666;
  --dvag-text-muted: #888888;
  --dvag-grey: #F5F5F5;
  --dvag-grey-light: #FAFAFA;
  --dvag-white: #FFFFFF;
  --dvag-border: #E0E0E0;
  --dvag-success: #22C55E;
  --dvag-warning: #F59E0B;
  
  /* Abstände */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  
  /* Typografie */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3rem;
  
  /* Radien */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.07);
  --shadow-lg: 0 10px 25px rgba(0,0,0,0.1);
  --shadow-xl: 0 20px 40px rgba(0,0,0,0.15);
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Reset & Base */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--dvag-text);
  background: var(--dvag-white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

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

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-sm);
  }
}

/* Header */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--dvag-border);
}

.header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-md);
}

.logo {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-weight: 700;
  font-size: var(--text-lg);
  color: var(--dvag-dark);
}

.logo__mark {
  width: 40px;
  height: 40px;
  background: var(--dvag-gold);
  color: var(--dvag-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--text-xl);
  border-radius: var(--radius-sm);
}

.nav {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--dvag-text-light);
  transition: color var(--transition-fast);
  position: relative;
}

.nav__link:hover {
  color: var(--dvag-gold);
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--dvag-gold);
  transition: width var(--transition-base);
}

.nav__link:hover::after {
  width: 100%;
}

.header__cta {
  background: var(--dvag-gold);
  color: var(--dvag-white);
  padding: 0.75rem 1.5rem;
  font-weight: 600;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.header__cta:hover {
  background: var(--dvag-gold-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--dvag-dark);
  transition: all var(--transition-fast);
}

@media (max-width: 768px) {
  .nav {
    display: none;
    position: absolute;
    top: 72px;
    left: 0;
    right: 0;
    background: var(--dvag-white);
    flex-direction: column;
    padding: var(--space-md);
    gap: var(--space-sm);
    border-bottom: 1px solid var(--dvag-border);
    box-shadow: var(--shadow-lg);
  }
  
  .nav.open {
    display: flex;
  }
  
  .menu-toggle {
    display: flex;
  }
  
  .header__cta {
    display: none;
  }
}

/* Hero Section */
.hero {
  padding: calc(72px + var(--space-2xl)) 0 var(--space-2xl);
  background: linear-gradient(135deg, var(--dvag-grey-light) 0%, var(--dvag-grey) 100%);
  position: relative;
  overflow: hidden;
  min-height: 80vh;
  display: flex;
  align-items: center;
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 50%;
  height: 100%;
  /* Unsplash-Bild entfernt (externer Request = DSGVO-Risiko); dezenter Verlauf als Ersatz */
  background: radial-gradient(circle at 70% 30%, rgba(200, 170, 34, 0.35), transparent 65%);
  opacity: 0.15;
}

.hero__content {
  max-width: 640px;
  position: relative;
  z-index: 1;
}

.hero__title {
  font-size: var(--text-5xl);
  font-weight: 700;
  line-height: 1.1;
  color: var(--dvag-dark);
  margin-bottom: var(--space-md);
}

.hero__title span {
  color: var(--dvag-gold);
}

.hero-avatar {
  width: 180px;
  height: 180px;
}

.hero-avatar__placeholder {
  font-size: 84px;
  line-height: 1;
}

.hero__subtitle {
  font-size: var(--text-xl);
  color: var(--dvag-text-light);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

.hero__actions {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 1rem 2rem;
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: all var(--transition-fast);
  cursor: pointer;
  border: none;
}

.btn--primary {
  background: var(--dvag-gold);
  color: var(--dvag-white);
  box-shadow: 0 4px 14px rgba(200,170,34,0.4);
}

.btn--primary:hover {
  background: var(--dvag-gold-hover);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,170,34,0.5);
}

.btn--secondary {
  background: var(--dvag-white);
  color: var(--dvag-dark);
  border: 2px solid var(--dvag-border);
}

.btn--secondary:hover {
  border-color: var(--dvag-gold);
  color: var(--dvag-gold);
}

.btn--lg {
  padding: 1.25rem 2.5rem;
  font-size: var(--text-lg);
}

@media (max-width: 768px) {
  .hero {
    padding: calc(72px + var(--space-xl)) 0 var(--space-xl);
  }
  
  .hero__title {
    font-size: var(--text-3xl);
  }
  
  .hero__subtitle {
    font-size: var(--text-lg);
  }

  .hero-avatar {
    width: 130px;
    height: 130px;
    margin: 0 auto;
  }

  .hero-avatar__placeholder {
    font-size: 60px;
  }

  .btn {
    width: 100%;
  }
}

/* Sections */
.section {
  padding: var(--space-2xl) 0;
}

.section--white {
  background: var(--dvag-white);
}

.section--grey {
  background: var(--dvag-grey-light);
}

.section--gold {
  background: var(--dvag-gold);
  color: var(--dvag-white);
}

.section--dark {
  background: var(--dvag-dark);
  color: var(--dvag-white);
}

.section__label {
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dvag-gold);
  margin-bottom: var(--space-sm);
}

.section--gold .section__label,
.section--dark .section__label {
  color: rgba(255,255,255,0.8);
}

.section__title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--dvag-dark);
  margin-bottom: var(--space-md);
  line-height: 1.2;
}

.section--gold .section__title,
.section--dark .section__title {
  color: var(--dvag-white);
}

.section__text {
  font-size: var(--text-lg);
  color: var(--dvag-text-light);
  max-width: 600px;
}

.section--gold .section__text,
.section--dark .section__text {
  color: rgba(255,255,255,0.9);
}

@media (max-width: 768px) {
  .section {
    padding: var(--space-xl) 0;
  }
  
  .section__title {
    font-size: var(--text-2xl);
  }
}

/* Steps */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.step {
  text-align: center;
  padding: var(--space-lg);
  background: var(--dvag-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: transform var(--transition-base);
}

.step:hover {
  transform: translateY(-4px);
}

.step__number {
  width: 64px;
  height: 64px;
  background: var(--dvag-gold);
  color: var(--dvag-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  font-weight: 700;
  border-radius: 50%;
  margin: 0 auto var(--space-md);
}

.step__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--dvag-dark);
  margin-bottom: var(--space-xs);
}

.step__text {
  font-size: var(--text-base);
  color: var(--dvag-text-light);
  line-height: 1.6;
}

@media (max-width: 768px) {
  .steps {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Cards */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.card {
  background: var(--dvag-white);
  padding: var(--space-lg);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
  border: 1px solid var(--dvag-border);
}

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

.card__title {
  font-size: var(--text-xl);
  font-weight: 600;
  color: var(--dvag-dark);
  margin-bottom: var(--space-xs);
}

.card__text {
  font-size: var(--text-base);
  color: var(--dvag-text-light);
  line-height: 1.6;
}

.card--testimonial {
  background: var(--dvag-white);
  position: relative;
  padding-top: var(--space-xl);
}

.card--testimonial::before {
  content: '"';
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-size: 4rem;
  color: var(--dvag-gold);
  opacity: 0.3;
  font-family: Georgia, serif;
  line-height: 1;
}

.testimonial__text {
  font-size: var(--text-base);
  color: var(--dvag-text);
  line-height: 1.7;
  font-style: italic;
  margin-bottom: var(--space-md);
}

.testimonial__author {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.testimonial__name {
  font-weight: 600;
  color: var(--dvag-dark);
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

/* FAQ */
.faq-list {
  max-width: 800px;
  margin: var(--space-xl) auto 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.faq-item {
  background: var(--dvag-grey-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--dvag-border);
  transition: all var(--transition-base);
}

.faq-item:hover {
  border-color: var(--dvag-gold);
}

.faq-item.active {
  border-color: var(--dvag-gold);
  box-shadow: var(--shadow-md);
}

.faq-question {
  width: 100%;
  padding: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--dvag-dark);
  text-align: left;
  background: transparent;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.faq-question:hover {
  color: var(--dvag-gold);
}

.faq-icon {
  width: 32px;
  height: 32px;
  min-width: 32px;
  border: 2px solid var(--dvag-gold);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-lg);
  color: var(--dvag-gold);
  transition: all var(--transition-base);
  position: relative;
}

.faq-icon::before {
  content: '+';
  font-weight: 300;
}

.faq-item.active .faq-icon {
  background: var(--dvag-gold);
  color: var(--dvag-white);
  transform: rotate(45deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-10px);
  transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease;
}

.faq-item.active .faq-answer {
  max-height: 500px;
  opacity: 1;
  transform: translateY(0);
}

.faq-answer-inner {
  padding: 0 var(--space-md) var(--space-md);
  font-size: var(--text-base);
  color: var(--dvag-text-light);
  line-height: 1.7;
}

@media (max-width: 768px) {
  .faq-question {
    font-size: var(--text-base);
    padding: var(--space-sm);
  }
  
  .faq-answer-inner {
    padding: 0 var(--space-sm) var(--space-sm);
  }
}

/* Form */
.form {
  max-width: 700px;
  margin: var(--space-xl) auto 0;
  background: rgba(255,255,255,0.05);
  padding: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255,255,255,0.1);
}

.form__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-lg);
}

.form__section h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--dvag-white);
  padding-bottom: var(--space-xs);
  border-bottom: 2px solid var(--dvag-gold);
}

.form__group {
  margin-bottom: var(--space-md);
}

.form__group label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 500;
  color: rgba(255,255,255,0.8);
  margin-bottom: var(--space-xs);
}

.form__group input {
  width: 100%;
  padding: 1rem;
  font-size: var(--text-base);
  border: 2px solid rgba(255,255,255,0.2);
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.1);
  color: var(--dvag-white);
  transition: all var(--transition-fast);
}

.form__group input::placeholder {
  color: rgba(255,255,255,0.4);
}

.form__group input:focus {
  outline: none;
  border-color: var(--dvag-gold);
  background: rgba(255,255,255,0.15);
}

.form__actions {
  text-align: center;
}

.form__hint {
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  margin-top: var(--space-sm);
}

.form__hint--left {
  text-align: left;
}

/* Honeypot: fuer Menschen unsichtbar, fuer Bots aber im DOM vorhanden.
   Bewusst NICHT display:none - manche Bots ueberspringen versteckte Felder. */
.hp-feld {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Wiederholbare Bloecke fuer mehrere empfohlene Personen (max. 5 pro Vorgang) */
.person-block + .person-block {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px dashed rgba(255,255,255,0.2);
}

.person-block__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-xs);
}

.person-block__nr {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dvag-gold);
  letter-spacing: 0.03em;
}

.person-block__remove {
  background: none;
  border: none;
  padding: 0;
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.6);
  text-decoration: underline;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.person-block__remove:hover {
  color: var(--dvag-white);
}

.btn--outline {
  background: transparent;
  color: var(--dvag-white);
  border: 2px dashed rgba(255,255,255,0.35);
}

.btn--outline:hover {
  border-color: var(--dvag-gold);
  color: var(--dvag-gold);
}

.btn--block {
  display: block;
  width: 100%;
  margin-top: var(--space-md);
}

@media (max-width: 768px) {
  .form {
    padding: var(--space-md);
  }
  
  .form__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
}

/* Footer */
.footer {
  background: var(--dvag-dark);
  color: var(--dvag-white);
  padding: var(--space-xl) 0 var(--space-md);
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
  padding-bottom: var(--space-xl);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.footer__label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--dvag-gold);
  margin-bottom: var(--space-sm);
  display: block;
}

.footer nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer nav a {
  font-size: var(--text-base);
  color: rgba(255,255,255,0.7);
  transition: color var(--transition-fast);
}

.footer nav a:hover {
  color: var(--dvag-gold);
}

.footer__legal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.5);
}

.footer__legal nav {
  flex-direction: row;
  gap: var(--space-md);
}

@media (max-width: 768px) {
  .footer__grid {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  
  .footer__legal {
    flex-direction: column;
    text-align: center;
  }
}

/* Modal */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.8);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  backdrop-filter: blur(4px);
}

.modal.active {
  display: flex;
}

.modal__content {
  background: var(--dvag-white);
  border-radius: var(--radius-lg);
  max-width: 520px;
  width: 100%;
  max-height: min(90vh, 720px);
  overflow-y: auto;
  /* Beim Scrollen im Dialog nicht die Seite dahinter mitscrollen. */
  overscroll-behavior: contain;
  position: relative;
  /* Innenabstand der Karte - vorher hatte .modal__content gar keinen,
     deshalb klebten Titel und Text direkt am Rand. */
  padding: var(--space-md);
  animation: modalSlide 0.3s ease;
}

@keyframes modalSlide {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

.modal__close {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-2xl);
  line-height: 1;
  color: var(--dvag-text-light);
  background: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--transition-fast), background var(--transition-fast);
}

.modal__close:hover {
  color: var(--dvag-dark);
  background: var(--dvag-grey-light);
}

.modal__close:focus-visible {
  outline: 2px solid var(--dvag-gold);
  outline-offset: 2px;
}

.modal__title {
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--dvag-dark);
  /* Platz fuer den Schliessen-Button, damit lange Titel nicht darunter laufen. */
  padding-right: 44px;
  margin-bottom: var(--space-xs);
}

.modal__text {
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--dvag-text-light);
  margin-bottom: var(--space-md);
}

.modal__share {
  background: var(--dvag-grey-light);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
}

.modal__share h3 {
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.4;
  color: var(--dvag-dark);
  margin-bottom: var(--space-xs);
}

/* Ein Block je empfohlener Person - jeder Link ist personenbezogen */
.share__item + .share__item {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--dvag-border);
}

.share__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--dvag-dark);
  margin-bottom: var(--space-xs);
}

/* Ruhiger Hinweistext innerhalb eines Link-Blocks (Fussnote, kein Titel) -
   bewusst leichter als .share__name, damit die Hierarchie stimmt. */
.share__hinweis {
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--dvag-text-light);
  margin-bottom: var(--space-xs);
}

.share__hinweis--fuss {
  margin-top: var(--space-sm);
  margin-bottom: 0;
}

.share__hinweis a {
  color: var(--dvag-gold-hover);
  text-decoration: underline;
}

.modal__hinweis {
  background: #FFF4D6;
  border: 1px solid #E8C766;
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-bottom: var(--space-md);
  font-size: var(--text-sm);
  color: var(--dvag-dark);
  line-height: 1.55;
  text-align: left;
}

/* Mobil: weniger Aussenabstand, dafuer bleibt der Inhalt lesbar. Ab hier
   stehen Link-Feld und Kopieren-Button untereinander, sonst wird das Feld
   auf schmalen Geraeten unbrauchbar schmal. */
@media (max-width: 480px) {
  .modal {
    padding: var(--space-xs);
  }

  .modal__content {
    padding: var(--space-sm);
  }

  .modal__title {
    font-size: var(--text-xl);
  }

  .share__link {
    flex-direction: column;
  }

  .share__link .btn {
    width: 100%;
  }
}

.share__link {
  display: flex;
  gap: var(--space-xs);
  margin-bottom: 0;
}

.share__link input {
  flex: 1;
  min-width: 0;   /* sonst sprengt der lange Link die Flexbox */
  min-height: 44px;
  padding: 0.75rem 0.875rem;
  font-size: var(--text-sm);
  color: var(--dvag-dark);
  border: 1px solid var(--dvag-border);
  border-radius: var(--radius-sm);
  background: var(--dvag-white);
  text-overflow: ellipsis;
}

/* Kopieren-Button neben dem Feld: schmaler als ein Standard-Button, aber
   weiterhin 44px hoch (Touch-Ziel). */
.share__link .btn {
  flex: none;
  min-height: 44px;
  padding: 0 1.25rem;
  font-size: var(--text-sm);
  white-space: nowrap;
}

.btn--whatsapp {
  width: 100%;
  min-height: 44px;
  background: #25D366;
  color: var(--dvag-white);
  margin-top: var(--space-xs);
}

.btn--whatsapp:hover {
  background: #128C7E;
}

/* Utilities */
.text-center {
  text-align: center;
}

.mt-1 { margin-top: var(--space-xs); }
.mt-2 { margin-top: var(--space-sm); }
.mt-3 { margin-top: var(--space-md); }
.mt-4 { margin-top: var(--space-lg); }
.mt-5 { margin-top: var(--space-xl); }

/* ============================================================
   ERGAENZUNG: Styles fuer Verkaufsseite (index.html),
   Empfohlenen-Seite (berater/template/empfohlen/) sowie
   Datenschutz/Impressum. Diese Seiten nutzen andere Klassen-
   namen als das Berater-Template (BEM) – die Definitionen
   fehlten bisher komplett, wodurch die Seiten ungestylt waren.
   ============================================================ */

:root {
  --gold: var(--dvag-gold);
  --gold-dark: var(--dvag-gold-hover);
  --gold-light: #E3CD66;
  --gold-pale: #F7F1DC;
  --navy: #1A2B49;
  --text: var(--dvag-text);
  --text-light: var(--dvag-text-light);
  --text-muted: var(--dvag-text-muted);
  --line: var(--dvag-border);
  --bg-soft: #F7F8FA;
  --radius: 8px;
  --radius-xl: 20px;
}

/* ---------- Buttons (Nicht-BEM-Variante) ---------- */
.btn-primary {
  background: var(--gold);
  color: #fff;
  box-shadow: 0 4px 14px rgba(200,170,34,0.4);
}
.btn-primary:hover {
  background: var(--gold-dark);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(200,170,34,0.5);
}
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 2px solid var(--line);
}
.btn-outline:hover { border-color: var(--gold); color: var(--gold); }
.btn-white {
  background: #fff;
  color: var(--navy);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-sm);
}
.btn-white:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); }
.btn-lg { padding: 1.25rem 2.5rem; font-size: var(--text-lg); }
.btn-block { width: 100%; }

/* ---------- Header (Verkaufsseite + Empfohlenen-Seite) ---------- */
.header-content,
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: var(--space-md);
}
.header-inner { padding: 0 var(--space-md); max-width: 1200px; margin: 0 auto; }
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--gold);
  color: #fff;
  font-weight: 700;
  margin-right: 8px;
}
.header-content .logo { display: flex; align-items: center; font-weight: 700; font-size: 18px; color: var(--navy); }
.header-content .logo span { color: var(--gold); }
.header-logo { font-weight: 700; font-size: 18px; color: var(--navy); text-decoration: none; }
.header-logo span { color: var(--gold); }
.header-nav { display: flex; gap: var(--space-md); }
.nav-link { color: var(--text-light); font-weight: 500; text-decoration: none; transition: color var(--transition-fast); }
.nav-link:hover { color: var(--gold); }
.header-cta { display: flex; align-items: center; gap: var(--space-sm); }
@media (max-width: 768px) {
  .header-nav { display: none; }
  .header-content .btn, .header-cta .btn { width: auto; padding: 0.75rem 1.25rem; font-size: var(--text-sm); }
}

/* ---------- Mobile Navigation (Empfohlenen-Seite) ---------- */
.mobile-nav-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0; pointer-events: none;
  transition: opacity var(--transition-fast);
  z-index: 150;
}
.mobile-nav-overlay.open { opacity: 1; pointer-events: auto; }
.mobile-nav {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(320px, 85vw);
  background: #fff;
  padding: 88px 24px 24px;
  transform: translateX(100%);
  transition: transform var(--transition-base);
  z-index: 200;
  display: flex; flex-direction: column; gap: 16px;
  box-shadow: var(--shadow-xl);
}
.mobile-nav.open { transform: translateX(0); }
.mobile-nav a { color: var(--navy); font-weight: 600; text-decoration: none; }

/* ---------- Hero (Verkaufsseite) ---------- */
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--gold-pale);
  color: var(--gold-dark);
  font-size: 13px; font-weight: 600;
  padding: 8px 16px; border-radius: 999px;
  margin-bottom: 24px;
}
.hero-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; flex-wrap: wrap; }
.hero-stat { display: flex; flex-direction: column; }
.hero-stat-number { font-size: 28px; font-weight: 800; color: var(--navy); }
.hero-stat-label { font-size: 13px; color: var(--text-muted); }

/* ---------- Sections (Nicht-BEM-Variante) ---------- */
.section-alt { background: var(--bg-soft); }
.section-header { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.section-label {
  display: inline-block;
  color: var(--gold);
  font-size: 13px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 12px;
}
.section-title { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.section-header h2 { font-size: clamp(26px, 4vw, 38px); font-weight: 800; color: var(--navy); line-height: 1.2; margin-bottom: 16px; }
.section-subtitle, .section-header > p { color: var(--text-light); font-size: 17px; line-height: 1.7; }

/* ---------- Testimonials (Verkaufsseite) ---------- */
.testimonials-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
/* Zwei Karten, zwei Spalten - je die Haelfte. Vorher stand hier
   repeat(3, 1fr) aus der Zeit mit drei (erfundenen) Stimmen; mit nur zwei
   Karten blieb rechts eine Luecke, die wie ein Fehler aussah. */
@media (min-width: 768px) { .testimonials-grid { grid-template-columns: repeat(2, 1fr); } }
.testimonial-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 28px;
  box-shadow: var(--shadow-sm);
}
.testimonial-stars { color: var(--gold); font-size: 18px; letter-spacing: 2px; margin-bottom: 12px; }
.testimonial-text { color: var(--text); line-height: 1.7; margin-bottom: 20px; }
.testimonial-author { display: flex; align-items: center; gap: 12px; }
.testimonial-avatar {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gold-pale); color: var(--gold-dark);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700;
}
.testimonial-name { font-weight: 700; color: var(--navy); font-size: 15px; }
.testimonial-role { color: var(--text-muted); font-size: 13px; }

/* ---------- Footer (Verkaufsseite + Empfohlenen-Seite) ---------- */
.footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }
.footer-brand { font-size: 20px; font-weight: 700; color: #fff; }
.footer-brand span { color: var(--gold); }
.footer-brand p, .footer-tagline { color: rgba(255,255,255,0.65); font-size: 14px; font-weight: 400; margin-top: 12px; line-height: 1.6; }
.footer-title, .footer-nav-title {
  color: rgba(255,255,255,0.5);
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  margin-bottom: 14px;
}
.footer-links-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer-links-list a, .footer-nav-links a { color: rgba(255,255,255,0.75); font-size: 14px; text-decoration: none; }
.footer-links-list a:hover, .footer-nav-links a:hover { color: var(--gold); }
.footer-nav-links { display: flex; flex-direction: column; gap: 10px; }
.footer-inner {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.15);
}
@media (min-width: 768px) { .footer-inner { grid-template-columns: 2fr 1fr; } }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between;
  padding-top: 24px;
  color: rgba(255,255,255,0.6); font-size: 13px;
}
.footer-copy { margin: 0; }
.footer-legal { display: flex; gap: 16px; }
.footer-legal a { color: rgba(255,255,255,0.7); text-decoration: none; }
.footer-legal a:hover { color: var(--gold); }

/* ---------- Formulare (geteilt) ---------- */
.form-row { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 640px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-group { margin-bottom: 18px; }
.form-row .form-group { margin-bottom: 0; }
.form-label { display: block; font-weight: 600; color: var(--navy); font-size: 14px; margin-bottom: 8px; }
.form-group label { display: block; font-weight: 600; color: var(--navy); font-size: 14px; margin-bottom: 8px; }
.form-control,
.form-group input, .form-group select, .form-group textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-control:focus,
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(200,170,34,0.15);
}
.form-check { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-light); line-height: 1.6; margin-top: 8px; cursor: pointer; }
.form-check input { margin-top: 3px; min-width: 16px; }
.form-check a { color: var(--gold); text-decoration: underline; }
.checkbox-group { display: flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-light); line-height: 1.6; }
.checkbox-group input { margin-top: 3px; min-width: 16px; }
.checkbox-group label { font-weight: 400; margin: 0; }
.required { color: var(--gold); }
.card-subtitle { color: var(--text-muted); font-size: 14px; margin-bottom: 20px; }

/* ---------- Empfohlenen-Seite: Hero ---------- */
.hero--empfohlen {
  background: linear-gradient(135deg, #1A2B49 0%, #24395E 60%, #2C4A77 100%);
  padding: calc(72px + 56px) 0 64px;
  color: #fff;
}
.hero--empfohlen::before { display: none; }
.hero-inner { display: flex; align-items: center; gap: 40px; }
.hero-content { position: relative; }
.hero--empfohlen .hero-badge { background: rgba(200,170,34,0.18); color: var(--gold-light); }
.hero--empfohlen h1 { font-size: clamp(28px, 5vw, 44px); line-height: 1.15; margin-bottom: 20px; }
.hero-subtitle { font-size: 17px; line-height: 1.7; color: rgba(255,255,255,0.85); margin-bottom: 28px; }
.hero--empfohlen .hero-actions { justify-content: center; margin-bottom: 28px; }
.berater-photo-wrap { margin-bottom: 28px; }
.berater-photo {
  width: 180px; height: 180px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--dvag-gold);
  box-shadow: var(--shadow-lg);
}
.berater-photo-placeholder {
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  align-items: center; justify-content: center;
  font-size: 84px;
  margin: 0 auto;
  border: 4px solid var(--dvag-gold);
}
.trust-badges { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 28px; }
.trust-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 999px;
  padding: 8px 16px;
  font-size: 13px; color: rgba(255,255,255,0.9);
}
.scroll-hint { color: rgba(255,255,255,0.6); font-size: 14px; }

/* ---------- Empfohlenen-Seite: Video-Platzhalter ---------- */
.video-placeholder {
  position: relative;
  max-width: 760px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  background: #1A1A1A;
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  overflow: hidden;
}
.play-btn {
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--gold);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px;
  padding-left: 6px;
  box-shadow: 0 8px 24px rgba(200,170,34,0.5);
  transition: transform var(--transition-fast);
}
.video-placeholder:hover .play-btn { transform: scale(1.08); }
.video-placeholder-text { position: absolute; bottom: 16px; color: rgba(255,255,255,0.6); font-size: 13px; }

/* ---------- Empfohlenen-Seite: Video-First-Hero ----------
   Zwei Baender: oben weiss (Headline + Video), darunter blau
   (Berater, Text, CTA). Der helle Block haelt den Blick beim
   Video, der blaue Block traegt danach die Conversion. */

/* --- Band 1: weiss --- */
.hero-top {
  background: #fff;
  padding: calc(72px + 48px) 0 48px;
  text-align: center;
}
.hero-intro { max-width: 720px; margin: 0 auto; }
.hero-top h1 {
  font-size: clamp(28px, 5vw, 44px);
  line-height: 1.15;
  font-weight: 400;
  color: var(--dvag-dark);
  margin-bottom: 20px;
}
.hero-top-subtitle {
  font-size: 17px;
  line-height: 1.7;
  color: var(--dvag-text-light);
  margin-bottom: 36px;
}
.hero-top-subtitle strong { color: var(--dvag-dark); }
.hero-badge--light {
  background: rgba(200,170,34,0.14);
  color: var(--dvag-gold-hover);
}

.hero-video {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.hero-video video,
.hero-video .video-placeholder {
  width: 100%;
  max-width: 100%;
  border-radius: var(--radius-lg);
  background: #000;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.hero-video video { display: block; aspect-ratio: 16 / 9; }

/* --- Band 2: blau --- */
.hero--empfohlen { padding: 56px 0 64px; min-height: 0; }
.hero-inner--stacked {
  flex-direction: column;
  text-align: center;
  gap: 0;
}
.hero-outro { max-width: 680px; margin: 0 auto; }

.hero-berater {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: rgba(255,255,255,0.85);
  font-size: 15px;
}
.hero-berater .berater-photo,
.hero-berater .berater-photo-placeholder {
  width: 120px; height: 120px;
  font-size: 56px;
}
.hero-berater .berater-photo-placeholder { display: flex; }
.hero-berater-name strong { color: #fff; }

@media (max-width: 768px) {
  .hero-top { padding: calc(72px + 28px) 0 36px; }
  .hero-top-subtitle { margin-bottom: 28px; font-size: 16px; }
  .hero--empfohlen { padding: 40px 0 48px; }
  .hero-berater { font-size: 14px; }
  .hero-berater .berater-photo,
  .hero-berater .berater-photo-placeholder { width: 96px; height: 96px; font-size: 44px; }
}

/* ---------- Empfohlenen-Seite: Sektionen & Karten ---------- */
.section--rosa { background: #FCEEF0; }
.cards-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .cards-grid--3 { grid-template-columns: repeat(3, 1fr); } }
.card--white { background: #fff; }
.card--accent { border-top: 3px solid var(--gold); }

/* ---------- Empfohlenen-Seite: Rueckruf-Karte ---------- */
.callback-card {
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 36px;
}
.callback-card h3 { color: var(--navy); font-size: 20px; margin-bottom: 6px; }
.highlight-box {
  display: flex; gap: 14px;
  background: var(--gold-pale);
  border: 1px solid rgba(200,170,34,0.35);
  border-radius: var(--radius);
  padding: 18px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 28px;
}
.highlight-box-icon { font-size: 22px; }

/* ---------- Empfohlenen-Seite: Opt-out ---------- */
.optout-link-wrap { text-align: center; margin-top: 28px; }
.optout-link {
  background: none; border: none;
  color: var(--text-muted);
  font-size: 14px;
  text-decoration: underline;
  cursor: pointer;
  padding: 8px;
}
.optout-link:hover { color: var(--dvag-red); }

/* ---------- Modals (Nicht-BEM-Variante, nutzt .modal-Basis) ---------- */
.modal-dialog {
  background: #fff;
  border-radius: var(--radius-lg);
  max-width: 480px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  padding: 28px;
  box-shadow: var(--shadow-xl);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-title { font-size: 20px; font-weight: 700; color: var(--navy); }
.modal-close {
  background: none; border: none;
  font-size: 20px; color: var(--text-muted);
  cursor: pointer; padding: 4px 8px;
  border-radius: var(--radius-sm);
}
.modal-close:hover { background: var(--bg-soft); color: var(--navy); }
.success-icon {
  width: 72px; height: 72px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: #E6F4EA; color: #1E7E34;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700;
}

/* ---------- Datenschutz / Impressum ---------- */
.cta-button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: var(--radius);
  background: var(--gold);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}
.cta-button.secondary { background: transparent; color: var(--navy); border: 2px solid var(--line); }
.cta-button.secondary:hover { border-color: var(--gold); color: var(--gold); }

/* ---------- FAQ-Container (Verkaufsseite) ---------- */
.faq .faq-answer p { padding: 0 var(--space-md) var(--space-md); color: var(--text-light); line-height: 1.7; }

/* ============================================================
   Touch-Bedienung
   ------------------------------------------------------------
   Gleiche Begruendung wie in admin.css: Berater und Empfehlende oeffnen
   diese Seiten fast ausschliesslich am Handy. Besonders wichtig ist hier
   das Einwilligungs-Kaestchen im Empfehlungsformular - es war 13px hoch
   und entscheidet darueber, ob das Formular abgeschickt werden kann.
   Ein daneben getippter Haken ist eine abgebrochene Empfehlung.
   ============================================================ */
@media (pointer: coarse) {

    input[type="checkbox"],
    input[type="radio"] {
        width: 22px;
        height: 22px;
        flex-shrink: 0;
    }

    /* Trefferflaeche ueber das Label, nicht ueber ein riesiges Kaestchen. */
    label:has(> input[type="checkbox"]),
    label:has(> input[type="radio"]),
    .checkbox-group label,
    .consent-label {
        min-height: 44px;
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .btn, button, .cta-button {
        min-height: 44px;
    }

    /* Verhindert das Hineinzoomen von iOS beim Fokussieren. */
    input, select, textarea {
        font-size: 16px;
    }
}

/* ============================================================
   Direkter Kontakt unterhalb des Anfrageformulars
   ------------------------------------------------------------
   Vorher: ein zentrierter Textblock mit <br>-Umbrüchen und Emoji, in
   Muted-Grau. Er wirkte verloren, weil ihm drei Dinge fehlten:

   1. Eine Verbindung nach oben. Ohne Trenner schwebte er unter dem
      Formular, statt erkennbar die ALTERNATIVE dazu zu sein.
   2. Bedienbarkeit. E-Mail und Telefonnummer waren reiner Text - am
      Handy tippt man auf eine Nummer und erwartet, dass es klingelt.
      Das war der eigentliche Verlust, nicht die Optik.
   3. Gewicht. Muted-Grau sagt "unwichtig" ueber genau den Weg, den
      jemand geht, der das Formular NICHT ausfuellen will.

   Emoji sind bewusst durch Inline-SVG ersetzt: Emoji werden je nach
   Betriebssystem voellig unterschiedlich gerendert (Apple, Google,
   Windows), lassen sich nicht einfaerben und skalieren nicht mit der
   Schrift. Als Bedienelement-Symbol sind sie deshalb unbrauchbar.
   ============================================================ */

/* "oder"-Trenner: zwei Linien mit Label dazwischen. Stellt den Bezug
   zum Formular her, ohne eine zweite Ueberschrift zu brauchen. */
.kontakt-alternativ {
  /* Exakt die Breite des Anfrageformulars darueber (.contact-form,
     600px). Beide teilen sich damit eine Achse - das ist der Grund,
     warum der Block nicht mehr "verloren" wirkt: er gehoert sichtbar
     zum Formular, statt darunter zu schweben.
     Ausserdem passt so "hallo@empfehlungsheld.de" in eine Zeile;
     bei 560px brach die Adresse mitten im Wort um. */
  max-width: 600px;
  margin: var(--space-lg) auto 0;
}

.kontakt-trenner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  color: var(--text-muted);
  font-size: var(--text-sm);
}

.kontakt-trenner::before,
.kontakt-trenner::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* Zwei gleichwertige Wege nebeneinander. auto-fit statt fester
   Spaltenzahl: bei schmalem Viewport stapeln sie sich von selbst,
   ohne eigene Media-Query. */
.kontakt-wege {
  display: grid;
  /* 280px ist kein runder Wunschwert, sondern gemessen: die laengste
     Angabe ("hallo@empfehlungsheld.de") braucht bei 15px/600 rund
     187px, dazu 32px Innenabstand, 40px Symbol und 16px Abstand - macht
     275px. Mit 220px bildeten sich zwei Spalten, LANGE bevor der Inhalt
     hineinpasste, und die Adresse brach mitten im Wort um.
     So entsteht der Umbruch dort, wo der Inhalt es verlangt, statt an
     einer geratenen Bildschirmbreite. */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-sm);
}

.kontakt-weg {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 14px;
  background: var(--dvag-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  /* Erfuellt die 44px-Untergrenze fuer Tippziele bereits ueber den
     Innenabstand - ohne dass die Karte kuenstlich aufgeblaeht wirkt. */
  min-height: 44px;
}

.kontakt-weg:hover,
.kontakt-weg:focus-visible {
  border-color: var(--dvag-gold);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* Sichtbarer Fokusring - Tastaturnutzer muessen sehen, wo sie sind. */
.kontakt-weg:focus-visible {
  outline: 2px solid var(--dvag-gold);
  outline-offset: 2px;
}

.kontakt-weg__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(200, 170, 34, 0.12);
  color: var(--dvag-gold);
}

.kontakt-weg__icon svg {
  width: 20px;
  height: 20px;
  /* currentColor: das Symbol folgt der Textfarbe, statt eine eigene
     zu haben - ein Grund mehr gegen Emoji. */
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.kontakt-weg__text {
  min-width: 0;   /* laesst lange Adressen umbrechen statt ueberlaufen */
}

.kontakt-weg__label {
  display: block;
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: 2px;
}

/* Der Wert selbst bewusst in voller Textfarbe, nicht in Muted-Grau:
   er ist der Handlungsaufruf, nicht die Fussnote. */
.kontakt-weg__wert {
  display: block;
  font-weight: 600;
  /* 15px statt 16px: "hallo@empfehlungsheld.de" braucht bei 16px genau
     200px, verfuegbar waren 198 - die Adresse brach mitten im Wort um.
     Statt es auf 2px Kante zu naehen (was der naechste Schriftschnitt
     oder eine laengere Adresse wieder sprengt) gibt 15px rund 15px
     Spielraum. Fuer einen Zweitweg neben dem Formular ist das die
     richtige Groesse, ohne kleinlaut zu wirken. */
  font-size: 15px;
  color: var(--text);
  /* E-Mail und Telefonnummer MUESSEN einzeilig bleiben - eine Adresse,
     deren ".de" in der naechsten Zeile steht, liest sich wie ein Fehler.
     Das ist hier keine Hoffnung, sondern durchgerechnet:
;
       benoetigt (breiteste Schrift):  196px
       Chrome je Karte:                14+14 Innenabstand
                                     + 36    Symbol
                                     + 12    Abstand      =  76px
       Mindestbreite Karte:            196 + 76           = 272px

     Die Spaltenregel unten steht deshalb auf minmax(280px) - erst ab
     dieser Kartenbreite bilden sich zwei Spalten, und dann ist der Platz
     sicher da. WIRD DIE ADRESSE LAENGER, muessen beide Werte mit. */
  white-space: nowrap;
}

.kontakt-weg:hover .kontakt-weg__wert {
  color: var(--dvag-gold-hover);
}

.kontakt-zeiten {
  margin: var(--space-sm) 0 0;
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .kontakt-weg { transition: none; }
  .kontakt-weg:hover { transform: none; }
}

/* ============================================================
   Rueckmeldung des Anfrageformulars
   ------------------------------------------------------------
   Vorher lief beides ueber alert(): ein Browser-Dialog, der den Nutzer
   aus der Seite reisst, sich nicht gestalten laesst und auf dem Handy
   wie eine Systemwarnung aussieht - also wie ein Fehler, selbst wenn er
   Erfolg meldet.

   Erfolg ersetzt jetzt das Formular. Ein Formular, das nach dem Absenden
   weiter dasteht, laedt zum zweiten Versuch ein, und niemand weiss, ob
   der erste ankam.

   Der Fehler steht unmittelbar ueber dem Absende-Knopf - dort schaut
   jemand hin, wenn nach dem Klick nichts passiert. Am Seitenanfang
   wuerde er ihn auf dem Handy gar nicht sehen.
   ============================================================ */

.form-erfolg {
  text-align: center;
  padding: var(--space-md) var(--space-sm);
}

.form-erfolg__zeichen {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  margin: 0 auto var(--space-sm);
  border-radius: 50%;
  background: rgba(34, 197, 94, 0.12);
  color: var(--dvag-success);
}

.form-erfolg h3 {
  margin: 0 0 8px;
  color: var(--navy);
}

.form-erfolg p {
  margin: 0;
  color: var(--text-light);
  line-height: 1.7;
  max-width: 42ch;
  margin-inline: auto;
}

/* Der Fokus landet nach dem Absenden hier (siehe submitAnfrage) - der
   Rahmen waere sichtbares Rauschen, die Meldung ist ohnehin eindeutig. */
#anfrage-erfolg:focus {
  outline: none;
}

/* MUSS vor der Regel mit display:flex stehen bzw. spezifischer sein:
   das hidden-Attribut wirkt ueber die Browser-Vorgabe
   [hidden] { display: none } - und eine eigene display-Angabe schlaegt
   die. Ohne diese Zeile war der Fehlerkasten dauerhaft sichtbar (leer,
   mit Ausrufezeichen), auch bevor ueberhaupt abgesendet wurde. */
.form-fehler[hidden] {
  display: none;
}

.form-fehler {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: var(--space-sm);
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  /* Rot allein traegt die Bedeutung nicht - wer Rot nicht unterscheiden
     kann, braucht ein zweites Merkmal. Deshalb die Randmarkierung links
     und ein vorangestelltes Zeichen. */
  border-left: 3px solid var(--dvag-red);
  background: rgba(157, 34, 53, 0.06);
  color: var(--dvag-red);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.form-fehler::before {
  content: '!';
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--dvag-red);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
}

/* Der Knopf waehrend des Sendens: erkennbar gesperrt, nicht nur blass. */
#anfrage-senden:disabled {
  opacity: .65;
  cursor: progress;
}

/* ============================================================
   Verkaufsseite: Kontrast, Rhythmus, Vertrauen
   ============================================================ */

/* --- Kontrast des Abschnitts-Labels ---------------------------
   Das Marken-Gold #C8AA22 erreicht auf Weiss nur 2,28:1 - WCAG AA
   verlangt 4,5:1 fuer Text. Bei 13px ist es faktisch schwer lesbar,
   und das Label steht auf JEDEM Abschnitt.

   Als Flaeche (Knopf mit weisser Schrift) bleibt das Gold unveraendert -
   dort stimmt der Kontrast. Nur als Textfarbe auf hellem Grund braucht
   es eine abgedunkelte Variante: gleiche Farbfamilie, gleiche Marke,
   aber lesbar (#8A7317 erreicht rund 4,6:1).
   ------------------------------------------------------------ */
:root {
  --gold-text: #8A7317;
}

.section-label {
  color: var(--gold-text);
}

/* Gleiche Ursache: #888 auf Weiss sind 3,54:1. */
.hero-stat-label {
  color: var(--text-light);
}

/* --- Rhythmus der Abschnitte ----------------------------------
   Vorher hatte jeder Abschnitt exakt dieselbe Hoehe an Innenabstand.
   Dadurch wirkt alles gleich wichtig und die Seite liest sich als
   gleichfoermige Liste. Drei Stufen geben ihr eine Betonung:

     weit    - Preise und Kontakt: die Stellen, an denen entschieden wird
     normal  - Standard
     dicht   - Aufzaehlungen (Vergleich), die von Enge profitieren
   ------------------------------------------------------------ */
.section--weit  { padding: calc(var(--space-2xl) * 1.5) 0; }
.section--dicht { padding: calc(var(--space-2xl) * 0.75) 0; }

/* Auf schmalen Bildschirmen wieder angleichen: dort kostet zusaetzliche
   Luft nur Scrollweg, ohne Hierarchie zu erzeugen. */
@media (max-width: 768px) {
  .section--weit,
  .section--dicht { padding: var(--space-2xl) 0; }
}

/* --- Vertrauensleiste ------------------------------------------
   Ersetzt die frueheren erfundenen Testimonials als Beleg. Der
   Unterschied: jede dieser Aussagen laesst sich nachpruefen - der
   Serverstandort, der AV-Vertrag und das Widerspruchsrecht sind im
   Produkt vorhanden, nicht behauptet.
   ------------------------------------------------------------ */
.vertrauen {
  display: grid;
  /* Feste Spaltenzahl statt auto-fit. Mit auto-fit brach die sechs-teilige
     Liste in 4 + 2 - eine angefangene zweite Reihe sieht nach Versehen aus.
     Drei mal zwei ist eine Form, vier plus zwei ein Rest. */
  grid-template-columns: 1fr;
  gap: var(--space-sm);
  max-width: 1000px;
  margin: 0 auto;
}

@media (min-width: 640px) {
  .vertrauen { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .vertrauen { grid-template-columns: repeat(3, 1fr); }
}

/* Gleiche Hoehe je Reihe, damit die Karten eine saubere Kante bilden -
   unterschiedlich lange Texte sollen das Raster nicht ausfransen. */
.vertrauen__punkt { height: 100%; }

.vertrauen__punkt {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 20px;
  background: var(--dvag-white);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}

.vertrauen__icon {
  flex-shrink: 0;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(200, 170, 34, 0.12);
  color: var(--gold-text);
}

.vertrauen__icon svg {
  width: 19px; height: 19px;
  stroke: currentColor; fill: none;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.vertrauen__titel { font-weight: 600; margin: 0 0 4px; color: var(--navy); }
.vertrauen__text  { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-light); }

/* --- Produktbilder ---------------------------------------------
   Ein B2B-Produkt, das man nicht sieht, muss man glauben. Die Rahmen
   sind bewusst schlicht: sie sollen den Screenshot zeigen, nicht sich
   selbst.
   ------------------------------------------------------------ */
.produkt-zeile {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: var(--space-lg);
  align-items: center;
}

.produkt-bild {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--dvag-grey-light);
  box-shadow: var(--shadow-lg);
}

.produkt-bild img {
  display: block;
  width: 100%;
  height: auto;
}

/* Platzhalter, solange kein Screenshot hinterlegt ist. Bewusst
   auffaellig: eine leere Flaeche wuerde man uebersehen und die Seite
   ginge ohne Produktbild live. */
.produkt-bild--leer {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 32px;
  text-align: center;
  color: var(--text-muted);
  border-style: dashed;
  box-shadow: none;
}

/* Ladeplatzhalter fuer die Preise im Hero.
   Die Preise werden bewusst weiterhin live geladen - sie aendern sich, und
   fest eingetragene Zahlen waeren irgendwann falsch. Ein Gedankenstrich als
   Zwischenzustand sieht aber nach Fehler aus, ausgerechnet im ersten
   Bildschirm. Der Balken haelt denselben Platz frei (kein Springen des
   Layouts) und signalisiert "laedt" statt "kaputt". */
.preis-laedt {
  display: inline-block;
  width: 3.2ch;
  height: 0.72em;
  vertical-align: baseline;
  border-radius: 4px;
  background: linear-gradient(90deg, #EDEDED 25%, #F7F7F7 37%, #EDEDED 63%);
  background-size: 400% 100%;
  animation: preisPuls 1.4s ease infinite;
}

@keyframes preisPuls {
  0%   { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .preis-laedt { animation: none; }
}

/* Feldbezogene Meldungen (assets/js/formular-validierung.js).
   Der bestehende .form-fehler-Kasten meldet das GANZE Formular; diese beiden
   Klassen haengen an genau einem Eingabefeld. */

.feld-fehler,
.feld-hinweis {
  margin: 6px 0 0;
  font-size: var(--text-sm);
  line-height: 1.5;
}

/* Wie beim .form-fehler-Kasten traegt Rot die Bedeutung nicht allein - das
   vorangestellte Zeichen ist das zweite Merkmal. */
.feld-fehler {
  color: var(--dvag-red);
}

.feld-fehler::before {
  content: '! ';
  font-weight: 700;
}

/* Hinweis, kein Fehler: bewusst zurueckhaltend und ohne Rot, denn das
   Absenden bleibt erlaubt. */
.feld-hinweis {
  color: var(--text-muted, rgba(255, 255, 255, 0.7));
}

.feld-hinweis::before {
  content: 'i ';
  font-weight: 700;
}

.ist-fehlerhaft {
  border-color: var(--dvag-red) !important;
}