/* Gezielte Überarbeitung vom 03.08.2026: neues Titelbild, Karten- und Prozesssymbole. */

/* Der Mittelpunkt des Ausgangsfotos ist der feste Fokuspunkt. So bleibt die
   stoppende Hand bei breiten, quadratischen und schmalen Ansichten sichtbar. */
.hero-visual > img {
  object-position: 25% 50% !important;
}

@media (min-width: 721px) and (max-width: 1200px) {
  .hero-visual > img {
    object-position: 25% 50% !important;
  }
}

@media (max-width: 720px) {
  .hero-visual > img {
    object-position: 51% 50% !important;
  }
}

/* Die vier Themenkarten enthalten wieder ausschließlich Motiv und Text.
   Die früheren KI-Hinweiszeilen unter diesen vier Motiven entfallen. */
.topic-grid .topic-card,
.topic-grid .topic-card:nth-child(2) {
  display: block;
  min-height: 275px;
  padding: 30px;
  position: relative;
  overflow: hidden;
}

.topic-grid .topic-card > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.topic-grid .topic-card > .topic-copy {
  position: relative;
  z-index: 2;
  display: flex;
  height: 100%;
  padding: 0;
}

.ai-image-notice--topic,
.topic-arrow {
  display: none !important;
}

.topic-icon {
  position: absolute;
  z-index: 3;
  top: 22px;
  right: 22px;
  display: grid;
  width: 52px;
  height: 52px;
  place-items: center;
  color: #687078;
  background: rgba(255, 255, 255, .9);
  border: 1px solid rgba(104, 112, 120, .42);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(3, 44, 66, .09);
  transition: color .18s, background .18s, border-color .18s, transform .18s;
}

.topic-icon svg,
.process-contact-icon svg {
  width: 25px;
  height: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Reduziertes Flugzeug in derselben kräftigen Linienoptik wie die übrigen Kartensymbole. */
.topic-icon--flight svg {
  width: 27px;
  height: 27px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.65;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vom Nutzer bereitgestelltes Flugzeugsymbol: Der weiße Kreis und die graue
   Silhouette werden im vorhandenen Kartenbutton exakt zentriert. */
.topic-icon--flight {
  overflow: hidden;
  background: #fff;
  border-color: transparent;
}

.topic-icon--flight > img {
  display: block;
  width: 165%;
  height: 165%;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Das Eurozeichen bleibt unverändert proportioniert und wird nur leicht kräftiger. */
.topic-icon--cost svg {
  stroke-width: 2.9;
}

/* Das Schiff in der ausführlichen Rubrik übernimmt exakt das reduzierte
   Linienmotiv der Rechtsbereiche-Karte, dort jedoch in der Kanzleifarbe. */
.legacy-cruise-icon {
  display: inline-grid;
  width: 58px;
  height: 58px;
  margin: 0 16px 10px 0;
  place-items: center;
  color: var(--navy);
  vertical-align: middle;
}

.legacy-cruise-icon svg {
  width: 42px;
  height: 42px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Vom Nutzer bereitgestelltes Rundsymbol mit grauem Untergrund und weißem Schiff. */
.legacy-cruise-icon {
  overflow: hidden;
  background: #fff;
  border-radius: 50%;
  margin-bottom: 0;
}

.legacy-cruise-icon > img {
  display: block;
  width: 149%;
  height: 149%;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
}

/* Das Schiff und die Überschrift stehen auf einer gemeinsamen Achse. Der
   Abstand zur folgenden Einleitung entspricht dem Rhythmus der Nachbarteile. */
.legacy-cruise-icon + .RotSehrGross1 {
  display: inline-block;
  vertical-align: middle;
}

.legacy-cruise-heading-break {
  display: block;
  height: 0;
  margin: 0 0 .85rem;
  line-height: 0;
}

/* In der alten HTML-Struktur erzeugte ein eigener leerer Zwischenblock unter
   „Kreuzfahrten“ einen sichtbar größeren Abstand als in den Nachbarrubriken. */
.legacy-cruise-spacer {
  display: none !important;
}

.topic-card:hover .topic-icon,
.topic-card:focus-visible .topic-icon {
  color: #4d565e;
  background: #fff;
  border-color: rgba(255, 255, 255, .76);
  transform: translateY(-2px);
}

@media (max-width: 720px) {
  .topic-grid .topic-card,
  .topic-grid .topic-card:nth-child(2) {
    min-height: 220px;
    padding: 26px;
  }

  .topic-icon {
    top: 18px;
    right: 18px;
    width: 48px;
    height: 48px;
  }
}

/* Kleine weiße Kreise markieren die drei Schritte ruhig und einheitlich. */
.process-copy li > .process-marker {
  display: block;
  width: 11px;
  height: 11px;
  margin: 5px 0 0 4px;
  background: #ffffff;
  border: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 5px rgba(255, 255, 255, .10);
}

/* Ruhiger Textlink mit einem zur Seitenleiste passenden Rundsymbol. */
.process-copy > .process-contact-link {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  align-self: flex-start;
  padding: 0;
  color: var(--white);
  border: 0;
  font-weight: 800;
  text-decoration: none;
}

.process-contact-link > span:first-child {
  border-bottom: 1px solid var(--orange);
  padding-bottom: 6px;
}

.process-contact-icon {
  display: grid;
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  place-items: center;
  color: #f8f9fa;
  background: #65717a;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 50%;
  box-shadow: 0 9px 24px rgba(0, 0, 0, .17);
  transition: background .18s, transform .18s;
}

.process-contact-link:hover .process-contact-icon,
.process-contact-link:focus-visible .process-contact-icon {
  background: #7a858d;
  transform: translateY(-2px);
}

@media (max-width: 420px) {
  .process-copy > .process-contact-link {
    align-items: flex-start;
  }
}

/* Feinabstimmung der vertikalen Dramaturgie nach der neuen Reihenfolge:
   Bild -> Rechtsbereiche -> persönliche Besprechung -> einfacher Einstieg. */
.topic-section {
  padding-top: 72px;
  padding-bottom: 32px;
}

.topic-section + .offices-section {
  padding-top: 32px;
  padding-bottom: 84px;
}

/* Das DAV-Zeichen bleibt als Abschluss der Rechtsinformationen sichtbar,
   der Kontaktbereich rückt jedoch deutlich näher heran. */
.legacy-content {
  padding-bottom: 42px;
}

.legacy-content + .contact-section {
  padding-top: clamp(58px, 6vw, 86px);
}

@media (max-width: 720px) {
  .topic-section {
    padding-top: 48px;
    padding-bottom: 22px;
  }

  .topic-section + .offices-section {
    padding-top: 22px;
    padding-bottom: 62px;
  }

  .legacy-content {
    padding-bottom: 28px;
  }

  .legacy-content + .contact-section {
    padding-top: 48px;
  }
}
/* Einheitliche Typografie für die Unterüberschriften der Rechtsinformationen. */
.legacy-content .SchwarzSehrGross.content-subheading {
  display: inline-block;
  color: var(--navy-deep) !important;
  background: transparent !important;
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 1.34rem !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: normal !important;
}