/**
 * HEROSE – Landingpage "Maritime / SMM"
 * Werte aus Frame_Landingpage.png (6400x24008 = 4x, Design 1600x6002) ausgemessen.
 *
 * Alles unter .lp-smm gescoped – die Datei kann gefahrlos vor der
 * Template-Umstellung hochgeladen werden und wirkt erst, wenn ein
 * Element die Klasse .lp-smm traegt.
 *
 * Einbinden ueber we:master name="css_zusatz" im Landingpage-Template.
 */

.lp-smm {
  /*
   * Farben. Gruen kommt aus variables.css der Hauptseite, nicht aus dem
   * Figma – dort steht #59AA27, die Marke nutzt #64B32C.
   */
  --lp-dark: #002432;
  --lp-green: var(--color-primary, #64b32c);
  --lp-green-hover: #559726;
  --lp-tagline: #708497;
  --lp-light: #ffffff;

  /* Container wie .container der Live-Seite (bootstrap-grid + grid.css) */
  --lp-container-width: 100%;
  --lp-container-padding: calc(var(--bs-gutter-x, 1.5rem) * 0.5);

  /*
   * Typo aus variables.css der Hauptseite, damit die Landingpage nicht aus
   * der Reihe faellt. Das Figma ist groesser gezeichnet (H1 64px, Text 24px)
   * als die Seite tatsaechlich laeuft (42px / 21px) – hier gewinnt die Seite.
   * Die Fallback-Werte greifen nur, wenn variables.css fehlt (lokale Vorschau).
   */
  --lp-h1: var(--font-size-h1, 2.625rem);
  --lp-h2: var(--font-size-h2, 2.15rem);
  --lp-text: var(--font-size-default, 21px);
  --lp-tagline-size: var(--font-size-extra-small, 16px);

  --lp-section-py: clamp(3rem, 5.5vw, 5.5rem);

  font-family: "Inter-Regular", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--lp-text);
  line-height: 1.6;
}

.lp-smm *,
.lp-smm *::before,
.lp-smm *::after {
  box-sizing: border-box;
}

.lp-smm .lp-inner {
  width: 100%;
  max-width: var(--lp-container-width);
  margin-inline: auto;
  padding-inline: var(--lp-container-padding);
}

/* ------------------------------------------------------------ Sektionen */

.lp-smm .lp-section {
  padding-block: var(--lp-section-py);
}

.lp-smm .lp-section--dark {
  background: var(--lp-dark);
  color: var(--lp-light);
}

.lp-smm .lp-section--light {
  background: var(--lp-light);
  color: var(--lp-dark);
}

/* ------------------------------------------------------------ Typografie */

.lp-smm .lp-tagline {
  display: block;
  margin: 0 0 0.5rem;
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: var(--lp-tagline-size);
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-tagline);
}

/* margin-bottom wie bei den Ueberschriften der Hauptseite (typography.css).
   Noetig, weil .lp-rich > :first-child den oberen Abstand des Folgetextes
   auf 0 setzt – ohne das kleben Linie und Text aneinander. */
.lp-smm .lp-headline {
  margin: 0 0 1.75rem;
  font-family: "Inter-Light", "Inter", system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--lp-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.lp-smm .lp-hero .lp-headline {
  font-size: var(--lp-h1);
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

.lp-smm .lp-headline strong,
.lp-smm .lp-headline b {
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

/*
 * Der WYSIWYG-Editor verpackt den Inhalt von we:textarea immer in <p>.
 * In einer Ueberschrift ist das laut HTML-Spec nicht erlaubt, der Parser
 * belaesst es aber im Element – der DOM stimmt also. Es reicht, den Absatz
 * neutral zu stellen. Mehrere Absaetze ergeben so eine mehrzeilige Headline.
 */
.lp-smm .lp-headline p {
  margin: 0;
  font: inherit;
  color: inherit;
}

/*
 * Der gruene Strich unter den Ueberschriften ist der Mechanismus der
 * Hauptseite: typography.css haengt an jede h1/h2 ein ::after (56 x 4px,
 * var(--color-primary)). Hier wird er nur auf die Figma-Masse gebracht –
 * kein zusaetzliches Element noetig.
 * h3 und h4 haben dort schon content: none, die Karten-Titel bleiben also frei.
 */
.lp-smm .lp-headline::after {
  width: 115px;
  height: 6px;
  margin-top: 1.5rem;
  background: var(--lp-green);
}

.lp-smm .lp-text {
  margin: 2.25rem 0 0;
  max-width: 46em;
}

.lp-smm .lp-text strong {
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

.lp-smm .lp-text + .lp-text {
  margin-top: 1.5rem;
}

/* ----------------------------------------------------------------- Listen */

/*
 * .lp-list  = handgeschriebenes Markup (statische Vorschau)
 * .lp-rich  = Ausgabe aus we:textarea; der Editor liefert blanke <ul>/<p>,
 *             deshalb greifen die Regeln dort ueber den Elementnamen.
 */
.lp-smm .lp-rich > :first-child {
  margin-top: 0;
}

.lp-smm .lp-rich p {
  margin: 1.5rem 0 0;
  max-width: 46em;
}

.lp-smm .lp-rich strong,
.lp-smm .lp-rich b {
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

/* Zwei aufeinanderfolgende Redaktionsbloecke brauchen Luft dazwischen –
   der :first-child-Reset oben nimmt dem zweiten sonst den Abstand.
   Betrifft z. B. "Ihre Vorteile:" unter dem Sorgenfreiheit-Absatz. */
.lp-smm .lp-rich + .lp-rich {
  margin-top: 2.5rem;
}

.lp-smm .lp-list,
.lp-smm .lp-rich ul {
  list-style: none;
  margin: 1.25rem 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.lp-smm .lp-list li,
.lp-smm .lp-rich ul li {
  position: relative;
  padding-left: 1.6rem; /* Text-Einzug 26px laut Figma */
  line-height: 1.4;
}

/*
 * Chevron = /images/icon-bullet.svg, unveraendert als data-URI eingebettet
 * (inkl. Original-fill #64B32C), damit kein Extra-Request anfaellt und die
 * lokale Vorschau funktioniert.
 *
 * Achtung: Diese Farbe ist fest. Wenn --color-primary global geaendert wird,
 * ziehen Strich und Buttons mit, das Chevron nicht. Dann entweder den Wert
 * unten anpassen oder auf die Maskenvariante wechseln, die immer mitgeht:
 *   -webkit-mask: url("/images/icon-bullet.svg") left center / contain no-repeat;
 *           mask: url("/images/icon-bullet.svg") left center / contain no-repeat;
 *   background: var(--lp-green);
 */
.lp-smm .lp-list--chevron li::before,
.lp-smm .lp-rich--chevron ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.32em;
  width: 0.47em;
  height: 0.75em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 13.785 19.084'%3E%3Cpath fill='%2364b32c' d='M5639.178,3378.842l-4.243-4.243,5.3-5.3-5.3-5.3,4.243-4.243,9.542,9.542Z' transform='translate(-5634.936 -3359.757)'/%3E%3C/svg%3E") left center / contain no-repeat;
}

/* Haken – nur in "Ihre Vorteile", im Figma ein anderes Icon als die Chevrons.
   Als CSS-Form gebaut; falls es dafuer ein SVG gibt, tausche ich es. */
.lp-smm .lp-list--check li,
.lp-smm .lp-rich--check ul li {
  padding-left: 2rem;
}

.lp-smm .lp-list--check li::before,
.lp-smm .lp-rich--check ul li::before {
  content: "";
  position: absolute;
  left: 0.2rem;
  top: 0.28em;
  width: 0.45em;
  height: 0.8em;
  border-right: 3px solid var(--lp-green);
  border-bottom: 3px solid var(--lp-green);
  transform: rotate(40deg);
}

/* ---------------------------------------------------------------- Buttons */

.lp-smm .lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 0.75rem 1.75rem;
  border: 0;
  border-radius: 0;
  background: var(--lp-green);
  color: var(--lp-light);
  font-size: var(--button-font-size, 16px);
  line-height: 1.2;
  text-decoration: none;
  transition: background 0.15s ease;
}

.lp-smm .lp-btn:hover,
.lp-smm .lp-btn:focus-visible {
  background: var(--lp-green-hover);
  color: var(--lp-light);
}

.lp-smm a:focus-visible {
  outline: 2px solid var(--lp-green);
  outline-offset: 3px;
}

/* ----------------------------------------------------------- 1 Aufmacher */

/* Die Navigation liegt ueber dem Aufmacher. Der Versatz ist derselbe wie in
   header.css Zeile 29, damit der Text nicht unter der Navigation startet. */
.lp-smm .lp-hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: min(900px, 100vh);
  padding-top: calc(var(--navigation-height, 80px) + var(--navigation-space-around, 0px) + var(--lp-section-py));
  padding-bottom: var(--lp-section-py);
  background: var(--lp-dark) center / cover no-repeat;
  color: var(--lp-light);
}

/* Der Inhalt fuellt die volle Aufmacherhoehe, damit die Bildunterschrift
   unten rechts verankert werden kann; der Textblock bleibt mittig. */
.lp-smm .lp-hero .lp-inner {
  position: relative;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.lp-smm .lp-hero__body {
  max-width: 46%;
}

/* Bildunterschrift zum Key Visual */
.lp-smm .lp-hero__caption {
  margin: 1.25rem 0 2.5rem;
  font-size: var(--font-size-extra-small, 16px);
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
}

.lp-smm .lp-hero__caption p {
  margin: 0;
  max-width: none;
}

.lp-smm .lp-hero__caption p:last-child {
  font-size: 0.85em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.lp-smm .lp-hero .lp-cta {
  margin-top: clamp(2rem, 6vw, 5.5rem);
}

.lp-smm .lp-cta__label {
  margin: 0 0 1.25rem;
  line-height: 1.4;
}

.lp-smm .lp-cta__label strong {
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
}

/* ------------------------------------------------------ 2 Call-to-action */

.lp-smm .lp-person {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-top: 2.5rem;
  align-items: start;
}

/* Seitenverhaeltnis wie im Figma (296 x 300), damit vor dem Laden kein
   Layoutsprung entsteht. Der Ausschnitt kommt aus dem Design, nicht aus
   der Quelldatei – deshalb object-fit: cover. */
.lp-smm .lp-person__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 296 / 300;
  object-fit: cover;
}

.lp-smm .lp-contact {
  margin: 1.75rem 0 0;
  line-height: 1.5;
}

.lp-smm .lp-contact__name {
  display: block;
}

/* Telefon und E-Mail bekommen ihren Stil aus typography.css (gruen, ohne
   Unterstreichung). Hier bewusst keine eigene Regel – meine fruehere
   Ueberschreibung war nur noetig, weil in der lokalen Vorschau
   typography.css fehlt und dort die Browser-Standardfarbe durchschlaegt. */

/* dunkler Balken, im Design 100px hoch ueber die volle Inhaltsbreite */
.lp-smm .lp-cta-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding: 1.25rem clamp(1.25rem, 2.5vw, 2.5rem);
  min-height: 100px;
  background: var(--lp-dark);
  color: var(--lp-light);
}

.lp-smm .lp-cta-bar__label {
  margin: 0;
}

/* -------------------------------------------------------------- 4 Service */

.lp-smm .lp-map {
  margin-top: clamp(2rem, 4vw, 4rem);
}

.lp-smm .lp-map img {
  display: block;
  width: 100%;
  height: auto;
}

/* --------------------------------------------------------- 5 Kundenstimme */

/*
 * Das Zitatzeichen kommt aus typography.css: blockquote::before mit
 * /images/icon-quote.png, absolut auf top:0 / left:-2rem und z-index:-1.
 * Die Klasse "quote-alternative" entsaettigt es (brightness(0) invert(1),
 * opacity .2) – das ist das graue Zeichen. Deshalb hier kein eigenes.
 * position:relative ist noetig, damit das ::before hieran ausgerichtet wird.
 */
.lp-smm .lp-quote {
  position: relative;
  margin: 0;
  padding-left: 2.5rem;
}

.lp-smm .lp-quote__text {
  margin: 0;
  font-size: var(--lp-h2);
  font-family: "Inter-Light", "Inter", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.2;
}

.lp-smm .lp-quote__author {
  display: block;
  margin-top: 2rem;
  font-style: normal;
  line-height: 1.5;
}

.lp-smm .lp-quote__role {
  display: block;
  font-size: 0.8em;
  color: #b9c4cb;
}

/* -------------------------------------------------------- 6 Warum_Herose */

.lp-smm .lp-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2rem, 4vw, 3.5rem);
  text-align: center;
}

.lp-smm .lp-card__icon {
  display: block;
  width: auto;
  height: 96px;
  margin: 0 auto 1.5rem;
}

.lp-smm .lp-card__title {
  margin: 0 0 0.35rem;
  font-family: "Inter-Bold", "Inter", system-ui, sans-serif;
  font-weight: 700;
  font-size: 1em;
  line-height: 1.3;
}

.lp-smm .lp-card p {
  margin: 0;
  line-height: 1.4;
}

/* ------------------------------------------------------------ Breakpoints */

@media (min-width: 576px) {
  .lp-smm { --lp-container-width: 540px; }
}

@media (min-width: 768px) {
  .lp-smm { --lp-container-width: 720px; }

  .lp-smm .lp-person {
    grid-template-columns: 280px 1fr;
    gap: 2.5rem;
  }

  .lp-smm .lp-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (min-width: 992px) {
  .lp-smm { --lp-container-width: 960px; }

  /*
   * Bildunterschrift auf Desktop unten im Key Visual.
   * --lp-caption-inset ist der Abstand vom rechten Containerrand und die
   * einzige Stellschraube fuer die horizontale Position: groesser = weiter
   * links. 0% setzt sie buendig an den rechten Rand.
   */
  .lp-smm .lp-hero__caption {
    position: absolute;
    right: var(--lp-caption-inset, 34%);
    bottom: 0;
    margin: 0;
    max-width: 45%;
    text-align: right;
  }
}

@media (min-width: 1200px) {
  .lp-smm { --lp-container-width: 1140px; }
}

@media (min-width: 1400px) {
  .lp-smm { --lp-container-width: 1320px; }
}

@media (min-width: 1580px) {
  .lp-smm { --lp-container-width: 1480px; }
}

@media (min-width: 1800px) {
  .lp-smm { --lp-container-width: 1640px; }
}

/* Unter 992px steht das Key Visual als eigenes Bild ueber dem Text,
   damit der Kopf im Bild nicht vom Text ueberdeckt wird. */
@media (max-width: 991.98px) {
  .lp-smm .lp-hero {
    min-height: 0;
    background-image: none !important;
  }

  .lp-smm .lp-hero__media {
    display: block;
    margin: 0 0 2rem;
  }

  .lp-smm .lp-hero__media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .lp-smm .lp-hero__body {
    max-width: none;
  }
}

@media (min-width: 992px) {
  .lp-smm .lp-hero__media {
    display: none;
  }
}