/* Page-specific Styles for index.html */

/* =========================
   HERO – Update: dunkler, größer, Hover-Animation
   ========================= */
.hero-video {
  position: relative;
  min-height: clamp(520px, 70vh, 780px);
  display: grid;
  align-items: center;
  isolation: isolate;
  color: #fff;
}

.hero-video__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-video__overlay {
  position: absolute;
  inset: 0;
  /* dunkleres Overlay für mehr Kontrast */
  background: rgba(0,0,0,.6);
  z-index: 1;
}

.hero-video__inner {
  position: relative;
  z-index: 2;
  width: min(92%, 1200px);
  margin: 0 auto;
}

/* 3 Spalten: links (2 Stats), mitte leer, rechts (2 Stats) */
.hero-grid {
  display: grid;
  grid-template-columns: 1fr .4fr 1fr; /* Mitte bleibt leer */
  gap: clamp(1rem, 3vw, 2rem);
  align-items: center;
}

.hero-col { display: grid; gap: clamp(.8rem, 2vw, 1.1rem); }

/* Karten dunkler, stärkerer Kontrast */
.stat {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: .75rem;
  align-items: start;
  background: rgba(10,10,10,.35);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius);
  padding: 1rem 1.1rem;
  backdrop-filter: blur(2px);
  transition: transform .25s ease, opacity .25s ease, background .25s ease;
}

.stat__icon { display: grid; place-items: center; color: #ffffff; }

.stat__content { display: grid; gap: .25rem; }

.stat__number {
  font-size: clamp(1.45rem, 1.1rem + 1.4vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  display: flex;
  align-items: baseline;
  gap: .2rem;
}

.stat__unit { font-weight: 700; }

.stat__desc {
  font-size: 1rem;
  line-height: 1.45;
  color: #f0f0f0;
}

/* Tagline deutlich größer, linksbündig */
.hero-tagline {
  margin-top: clamp(1.2rem, 2.5vw, 3rem);
  max-width: 70ch;
  color: #f7f7f7;
  font-size: clamp(1.15rem, 1rem + .9vw, 2.6rem); /* größer */
  font-weight: 600;
  text-align: left;
}

/* =========================
   SECTION – Pains
   ========================= */
.section-pains { padding: clamp(2rem, 6vw, 4rem) 0; background:#fff; }

.pains-header { display:grid; gap:.8rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }

.pains-header h2 {
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 2rem);
  color: #2b2b2b; /* etwas dunkler für Headline */
  font-weight: 700;
}

.pains-intro {
  color: var(--text);
  max-width: 75ch;
  font-size: 1.125rem; /* ≈ 18px */
  line-height: 1.6;
}

.pain-list {
  display:grid;
  grid-template-columns: repeat(12, 1fr);
  gap: .9rem;
  list-style:none;
}

.pain-item {
  grid-column: span 12;
  display:flex;
  gap:.75rem;
  align-items:flex-start;
  padding: 1rem 1.1rem;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;              /* leicht abgesetzt */
  transition: transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.pain-icon { color:#404040; line-height:0; margin-top:.15rem; }

.pain-item p {
  color:#3a3a3a;
  font-size: 1.125rem; /* ≈ 18px */
  line-height: 1.55;
}

.pain-item:hover {
  background:#f3f3f3;
  border-color:#dcdcdc;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.06);
}

/* Abschlusszeile */
.pains-outro {
  margin-top: clamp(1.2rem, 3vw, 2rem);
  color:#2b2b2b;
  font-size: 1.25rem; /* etwas größer für stärkere emotionale Wirkung */
  line-height: 1.6;
  max-width: 70ch;
}

/* =========================
   SECTION – Lösung / Handhabbar
   ========================= */
.section-solution {
  padding: clamp(2.2rem, 6vw, 4.2rem) 0;
  /* Weicher Verlauf von hellem Grau zu fast Weiß */
  background: #fff;
}

.solution-header { display:grid; gap:.6rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }

.solution-header h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  color:#2b2b2b;
  font-weight: 700;
}

.solution-subtitle {
  color: var(--text);
  font-size: 1.125rem; /* ≈18px */
  line-height: 1.6;
}

/* Tabelle */
.table-wrap {
  background: #fafafa;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

/* Für horizontales Scrollen, wenn nötig */
.table-wrap { overflow-x: auto; }

.solution-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px; /* sorgt für ruhiges Layout auf Desktop */
  background: #fff;
}

.solution-table thead th {
  text-align: left;
  padding: 1rem 1rem;
  font-weight: 700;
  color: #1f1f1f;
  background: #f3f3f3;
  border-bottom: 1px solid var(--border);
  font-size: 1.05rem;
}

.solution-table tbody td {
  padding: 1rem 1rem;
  color: #2f2f2f;
  font-size: 1.125rem; /* ≈18px */
  line-height: 1.55;
  border-bottom: 1px solid #f0f0f0;
}

.solution-table tbody tr:nth-child(odd) td { background: #fff; }

.solution-table tbody tr:nth-child(even) td { background: #fcfcfc; }

/* Visually hidden helper for caption */
.visually-hidden {
  position:absolute !important; height:1px; width:1px; overflow:hidden; clip:rect(1px,1px,1px,1px);
  white-space:nowrap; border:0; padding:0; margin:-1px;
}

/* =========================
   SECTION – Unsere Leistung (Tabs)
   ========================= */
.section-offer { padding: clamp(2.2rem, 6vw, 4.2rem) 0; background:#fff; }

.offer-header { display:grid; gap:.5rem; margin-bottom: clamp(1.2rem, 3vw, 1.8rem); }

.offer-header h2 {
  font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem);
  color:#2b2b2b;
  font-weight: 700;
}

.offer-subtitle { color: var(--text); font-size: 1.125rem; line-height: 1.6; }

/* Tabs */
.offer-tabs {
  display: inline-flex;
  gap: .5rem;
  padding: .35rem;
  border:1px solid var(--border);
  border-radius: var(--radius);
  background: #fafafa;
  margin-bottom: clamp(1rem, 3vw, 1.6rem);
}

.offer-tab {
  padding: .9rem 1.4rem;
  font-size: 1.1rem;
  border: 1px solid transparent;
  background: transparent;
  color: #2b2b2b;
  border-radius: var(--radius);
  cursor: pointer;
  font-weight: 600;
}

/* Content */

.offer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: clamp(1.6rem, 4vw, 2.6rem); /* mehr Raum zwischen den Boxen */
}

.offer-card,
.offer-aside {
  border:1px solid var(--border);
  padding: clamp(1.4rem, 3vw, 1.8rem); /* mehr Innenabstand */
  border-radius: .4rem; /* minimal runder */
  background: #fff;
  padding: clamp(1rem, 2.5vw, 1.3rem);
  box-shadow: 0 6px 20px rgba(0,0,0,.04);
}

.offer-card h3 {
  font-size: clamp(1.35rem, 1.05rem + 1vw, 1.8rem);
  font-weight: 700;
  margin-bottom: .6rem;
}

.offer-card p {
  font-size: 1.15rem;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.bullets { list-style: none; display:grid; gap:.35rem; margin-bottom: .9rem; }

/* Mehr Abstand zwischen Haken & Text */
.bullets li {
  padding-left: 1.9rem; /* vorher ~1.1–1.4rem → jetzt spürbar mehr Platz */
  position: relative;
  font-size: 1.1rem;
  line-height: 1.65;
}

.bullets li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: .15rem;          /* optische Ausrichtung zur Textlinie */
  font-weight: 800;
  color: #0a8a3e;       /* sattes, ruhiges Grün */
  font-size: 1.25rem;   /* etwas größer, wirkt klarer */
}

.fact {
  background: #fafafa;
  border: 1px solid #ececec;
  padding: 1.1rem 1.3rem;
  border-radius: .35rem;
}

.fact p {
  font-size: 1.05rem;
  line-height: 1.6;
}

.fact-label {
  background: #d72626;      /* kräftig aber seriös */
  color: #fff;
  border: none;
  border-radius: .3rem;
  padding: .3rem .55rem;
  font-size: .85rem;
  font-weight: 700;
  display: inline-block;
}

.contact-cta { margin-top: .8rem; }

.contact-cta .cta-tooltip {
  display:block;
  margin-top:.5rem;
}

/* Hervorhebung für den DSB-Check-Button im Unternehmens-Tab */
.dsb-check-cta {
  width:100%;
  justify-content:center;
}

.btn-ghost { background:#fff; color:#1f1f1f; border-color: var(--border); }

.btn-ghost:hover { background:#f6f6f6; }

.btn-ghost { background:#fff; color:#1f1f1f; border-color: var(--border); }

.btn-ghost:hover { background:#f6f6f6; }

/* Bildspalte – Desktop */
.vb-section-wieso-image {
  flex: 1;
  display: flex;
  align-items: flex-end;   /* Bild am unteren Rand der Spalte ausrichten */
}

/* Bild im Desktop-Layout */
.vb-section-wieso-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 10px;
}

/* ===========================
   FAQ-Section mit Privy-Chat
   =========================== */

.vb-section-faq {
  background: #ffffff;           /* weißer Hintergrund */
  padding: 60px 0;
}

.vb-section-faq-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  display: flex;
  gap: 40px;
  align-items: stretch;           /* beide Spalten gleich hoch */
}

/* Linke Seite: Fragen + Chat */
.vb-faq-left {
  flex: 1.2;
}

.vb-faq-left h2 {
  font-size: 2rem;
  margin-bottom: 0.75rem;
}

.vb-faq-intro {
  color: var(--text);
  margin-bottom: 1.5rem;
  line-height: 1.5;
}

.vb-faq-list {
  list-style: none;
  margin-bottom: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vb-faq-item {
  padding: 0.85rem 1rem;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: #fafafa;
  cursor: pointer;
  font-weight: 500;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.vb-faq-item:hover {
  background: #f0f0f0;            /* Grau statt Blau */
  border-color: #bdbdbd;
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.03);
}

/* Chat-Bereich */
.vb-faq-chat {
  min-height: 140px;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 1rem 1.25rem;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
}

.vb-faq-chat-placeholder p {
  color: var(--text);
  font-size: 0.95rem;
}

/* Rechte Seite: Roboter + Sprechblase */
.vb-faq-right {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;        /* vertikal in der Spalte zentriert */
  gap: 1.25rem;
}

/* Sprechblase jetzt grau + dezente Umrandung */
.vb-faq-speechbubble {
  position: relative;
  background: #f2f2f2;           /* Grau statt Blau */
  color: #111111;
  padding: 0.9rem 1.1rem;
  border-radius: 18px;
  border: 1px solid #dddddd;
  font-size: 0.95rem;
  line-height: 1.5;
  text-align: center;

  /* Animation */
  animation: vbFloat 4s ease-in-out infinite;
}

/* kleine Spitze der Sprechblase */
.vb-faq-speechbubble::after {
  content: "";
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 10px 10px 0 10px;
  border-style: solid;
  border-color: #f2f2f2 transparent transparent transparent;
}

/* Roboterbild */
.vb-faq-robot img {
  max-width: 260px;
  height: auto;
  display: block;

  /* Animation – leichtes Schweben */
  animation: vbFloat 4s ease-in-out infinite;
  animation-delay: 0.3s;          /* kleiner Versatz zur Sprechblase */
}

/* ===========================
   DSGVO-Umsetzung – Section
   =========================== */

.vb-section-dsgvo {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Weicher grauer Verlauf ähnlich der Solution-Section */
  background: #fff;
}

.vb-section-dsgvo-inner {
  width: min(92%, 1200px);
  margin-inline: auto;
}

.vb-section-dsgvo-header {
  max-width: 780px;
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.vb-section-dsgvo-header h2 {
  font-size: clamp(1.6rem, 1.1rem + 1.4vw, 2.1rem);
  font-weight: 700;
  color: #222;
  margin-bottom: 0.8rem;
}

.vb-section-dsgvo-header p {
  font-size: 0.98rem;
  line-height: 1.7;
  color: #4b4b4b;
}

/* Grid für die 4 Schritte */

/* 1–4 Schritte untereinander */
.vb-dsgvo-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

.vb-dsgvo-step {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.4rem 1.2rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;

  /* Ausgangszustand für Scroll-Animation */
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
}

.vb-dsgvo-step-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.1rem;
}

.vb-dsgvo-step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  background: #101828;
  color: #ffffff;
  flex-shrink: 0;
}

.vb-dsgvo-step h3 {
  font-size: 1rem;
  font-weight: 600;
  color: #222;
}

.vb-dsgvo-step p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #4c4c4c;
}

/* Sichtbarer Zustand nach Scroll-Animation */

.vb-dsgvo-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* gestaffelte Verzögerung für 1–4 beim Einblenden */

.vb-dsgvo-step:nth-child(1) {
  transition-delay: 0.0s;
}

.vb-dsgvo-step:nth-child(2) {
  transition-delay: 0.12s;
}

.vb-dsgvo-step:nth-child(3) {
  transition-delay: 0.24s;
}

.vb-dsgvo-step:nth-child(4) {
  transition-delay: 0.36s;
}

/* ===========================
   Kontakt-Section
   =========================== */

.vb-contact {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  /* Gleicher weicher Verlauf wie die vorherigen Sektionen */
  background: #fff;
}

.vb-contact-inner {
  width: min(92%, 1200px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.vb-contact-header {
  max-width: 720px;
}

.vb-contact-header h2 {
  font-size: clamp(1.7rem, 3vw, 2.1rem);
  margin-bottom: 0.5rem;
}

.vb-contact-header p {
  color: var(--text);
  line-height: 1.6;
}

/* Tabs / Auswahl Ansprechpartner */

.vb-contact-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: stretch;
}

.vb-contact-tab {
  flex: 1 1 220px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.75rem 1.25rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: #ffffff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.vb-contact-tab-name {
  font-weight: 600;
}

.vb-contact-tab-role {
  font-size: 0.85rem;
  color: var(--text);
}

.vb-contact-tab:is(:hover, :focus-visible) {
  border-color: #cbd5e1; /* dezentes Grau statt Blau */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
  transform: translateY(-1px);
}

/* Layout: Text + Bild */

.vb-contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1.6fr);
  gap: 2rem;
  align-items: stretch;
}

.vb-contact-person {
  background: #ffffff;
  border-radius: 1rem;
  border: 1px solid var(--border);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
  display: none; /* Standard: versteckt – nur aktive Person sichtbar */
}

.vb-contact-person h3 {
  font-size: 1.3rem;
  margin-bottom: 0.35rem;
}

.vb-contact-role {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.vb-contact-text {
  line-height: 1.7;
  margin-bottom: 1.1rem;
  color: #333;
}

.vb-contact-data {
  display: grid;
  gap: 0.5rem;
}

.vb-contact-row {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 0.5rem;
  align-items: baseline;
}

.vb-contact-row dt {
  font-size: 0.9rem;
  font-weight: 600;
  color: #505050;
}

.vb-contact-row dd {
  font-size: 0.95rem;
}

.vb-contact-row a {
  color: #2b2b2b;      /* grau statt blau */
  text-decoration: none;
}

.vb-contact-row a:hover {
  color: #404040;
}

/* Bildbereich */

.vb-contact-figure {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  border: 1px solid var(--border);
  background: #000; /* Fallback, wird vom Bild komplett überdeckt */
  min-height: 260px;
}

.vb-contact-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Bild füllt die Box komplett aus */
  opacity: 0;
  transform: scale(1.02); /* leichter Zoom-Effekt */
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.trust-logos {
  padding: 40px 0;
  background: #fff;
}

.trust-container {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
}

.trust-container img {
  width: 110px;
  height: auto;
  filter: grayscale(100%);
  opacity: 0.8;
  transition: opacity 0.3s ease, filter 0.3s ease;
}

.trust-container img:hover {
  filter: grayscale(60%);
  opacity: 1;
}



/* =========================================================
   RESPONSIVE (INDEX) nach Vorgabe (v2):
   Smartphone:
   - Hero: Video AUS + neutraler Hintergrund (weiß)
   - Stats (4 Kästen) mittig untereinander
   - "Wir machen Datenschutz wieder handhabbar": Tabelle -> Accordion (per JS)
   - "Unsere Leistung": Unternehmen/Behörden per Dropdown, jeweils nur das jeweilige sichtbar
   - DSB-Box (offer-aside) auf Smartphone ausblenden
   - Kontakt: Bilder aus, reduziert
   ========================================================= */

/* Tablet (<= 1024px) */
@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr !important; }
  .hero-col { width: 100%; }
}

/* Smartphone (<= 768px) */
@media (max-width: 768px) {
  /* HERO: Video & Overlay deaktivieren + neutraler Hintergrund */
  .hero-video__bg { display: none !important; }
  .hero-video__overlay { display: none !important; }
  .hero-video {
    background: #ffffff !important;
    color: #111111;
  }

  /* Buttons/Animationen bleiben – Button-Hintergrund bleibt wie im Original definiert */

  .hero-video__inner { padding: 56px 16px !important; }
  .hero-grid { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* Stats: 4 Kästen mittig untereinander */
  .hero-col--left,
  .hero-col--right {
    display: grid;
    justify-items: center;
  }
  .stat {
    width: 100%;
    max-width: 520px;
    justify-content: center;
    text-align: center;
    color: #ffffff; /* Stats bleiben lesbar auf dunkler Karte */
  }
  .stat__icon { margin-inline: auto; }
  .hero-tagline { text-align: center; }

  /* "Wir machen Datenschutz wieder handhabbar": Tabelle aus, Accordion an (Accordion wird per JS erzeugt) */
  .table-wrap { display: none !important; }
  .solution-accordion { display: block !important; margin-top: 18px; }
  .solution-acc-item { border: 1px solid rgba(0,0,0,0.12); border-radius: 12px; overflow: hidden; margin-bottom: 12px; }
  .solution-acc-btn {
    width: 100%;
    background: rgba(0,0,0,0.04);
    color: inherit;
    border: 0;
    padding: 14px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-weight: 700;
    text-align: left;
  }
  .solution-acc-panel { display: none; padding: 12px 14px 14px; background: rgba(0,0,0,0.02); }
  .solution-acc-item.is-open .solution-acc-panel { display: block; }
  .solution-acc-kv { margin: 0 0 10px; }
  .solution-acc-kv dt { font-weight: 700; margin-top: 10px; }
  .solution-acc-kv dd { margin: 4px 0 0; opacity: 0.95; }

  /* Unsere Leistung: Tabs verstecken, Dropdown anzeigen (Dropdown wird per JS eingefügt) */
  .offer-tabs { display: none !important; }
  .offer-select { display: block !important; width: 100%; max-width: 520px; margin: 0 auto 16px; padding: 12px 12px; border-radius: 12px; }

  /* DSB-Box / Aside auf Smartphone ausblenden */
  .offer-aside { display: none !important; }

  /* Steps (1-4) als Accordion (wenn vorhanden) */
  .vb-dsgvo-step { border-radius: 14px; overflow: hidden; }
  .vb-dsgvo-step-head { cursor: pointer; }
  .vb-dsgvo-step > p { display: none; padding: 0 14px 14px; }
  .vb-dsgvo-step.is-open > p { display: block; }

  /* Kontakt: Bilder aus, Fokus auf Name + Telefon */
  .vb-contact-layout { grid-template-columns: 1fr !important; }
  .vb-contact-figure,
  .vb-contact-image { display: none !important; }
  .vb-contact-text { display: none !important; }
}

/* Small Phones (<= 480px) */
@media (max-width: 480px) {
  .stat { max-width: 100%; }
  .hero-video__inner { padding: 48px 14px !important; }
}


/* =========================================================
   PATCH v3 (Smartphone):
   - Hero Titel ("Wir reduzieren Ihre ...") grau
   - Offer Dropdown entfernen
   - Service-Card (insb. Externer DSB) mittig mit gleichen Rändern
   ========================================================= */
@media (max-width: 768px) {
  /* Hero Titel grau (nur Textfarbe, Buttons bleiben wie definiert) */
  .hero h1,
  .hero-title,
  .hero-content h1 {
    color: #666666 !important;
  }

  /* Dropdown (Unternehmen/Behörden) ausblenden */
  .offer-select { display: none !important; }

  /* Service Cards mittig, gleichmäßige Seitenränder */
  .services-grid { justify-items: center; }
  .service-card {
    width: 100%;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Leistungen Cards zentrieren – Mobile */
@media (max-width: 768px) {
  .leistungen-grid {
    justify-items: center;
  }
}