/* Scoped CSS für index.html — extrahiert aus Inline-<style> 03.05.2026 */

/* Hero-Blüten — sechs Fallgruppen als Wiesenblumen, in zwei Reihen
     gestaffelt: oben Frauen/Männer/Paare, unten Unternehmen/General
     Counsel/Familien. Emaille-Gartenschilder darunter. */
  .hero__blossoms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-5) var(--space-5);
    margin-top: var(--space-5);
    width: 100%;
    align-items: start;
    padding-bottom: 2.5rem;
    justify-items: center;
  }
  .blossom {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.9rem;
    transition: transform .3s ease;
    text-decoration: none;
    cursor: pointer;
    color: inherit;
    width: 100%;
    min-width: 0;
  }
  .blossom:hover,
  .blossom:focus-visible {
    transform: translateY(-5px);
    text-decoration: none;
    outline: none;
  }
  .blossom:focus-visible {
    outline: 2px solid var(--color-gold-400, #D4A34C);
    outline-offset: 6px;
    border-radius: 10px;
  }

  /* Blüten-Oval mit Bild — Format an die hochformatigen Illustrationen (3:5)
     angepasst, damit die Blüten nicht gecroppt werden */
  .blossom__mark {
    --mark-y: 0px;
    position: relative;
    display: block;
    width: 100%;
    max-width: 160px;
    aspect-ratio: 3 / 5;
    overflow: hidden;
    border: 3px solid;
    box-shadow: 0 6px 18px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.18);
    background: #F2E8D0;
    transform: translateY(var(--mark-y));
    transition: box-shadow .25s ease, transform .3s ease;
  }
  /* Dezente Staffelung nur auf den Blüten-Ovalen — Wiesen-Feeling ohne Unruhe.
     Alle Werte <= 0, damit das Oval nie ins Schild ragt. */
  .blossom:nth-child(1) .blossom__mark { --mark-y: 0px; }
  .blossom:nth-child(2) .blossom__mark { --mark-y: -14px; }
  .blossom:nth-child(3) .blossom__mark { --mark-y: -28px; }
  .blossom:nth-child(4) .blossom__mark { --mark-y: -6px; }
  .blossom:nth-child(5) .blossom__mark { --mark-y: -20px; }
  .blossom__mark img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    display: block;
  }
  .blossom:hover .blossom__mark,
  .blossom:focus-visible .blossom__mark {
    box-shadow: 0 10px 26px rgba(0,0,0,0.4), 0 3px 6px rgba(0,0,0,0.22);
  }

  /* Emaille-Gartenschild: cremeweiß, gold beschriftet */
  .blossom__plaque {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    max-width: 210px;
    padding: 0.7rem 0.85rem 0.75rem;
    background:
      radial-gradient(ellipse at top, rgba(255,255,255,0.6), transparent 60%),
      linear-gradient(to bottom, #FBF4DE 0%, #F3E7C5 55%, #ECDBAC 100%);
    border: 1.5px solid #8A7048;
    border-radius: 4px;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.7),
      inset 0 -1px 2px rgba(110,85,45,0.18),
      0 4px 8px rgba(0,0,0,0.22),
      0 1px 2px rgba(0,0,0,0.15);
    font-family: var(--font-serif, Georgia, serif);
    text-align: center;
  }
  .blossom__plaque::before,
  .blossom__plaque::after {
    content: "";
    position: absolute;
    top: 5px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #6b5432 0%, #3a2a14 60%, #241707 100%);
    box-shadow: inset 0 0.5px 0.5px rgba(255,255,255,0.25);
  }
  .blossom__plaque::before { left: 7px; }
  .blossom__plaque::after  { right: 7px; }

  .blossom__who {
    display: block;
    font-size: 0.6rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #6E5530;
    font-family: var(--font-sans, system-ui, sans-serif);
    font-weight: 600;
  }
  .blossom__text {
    display: block;
    font-size: 0.95rem;
    font-weight: 600;
    color: #6B4E14;
    line-height: 1.25;
    letter-spacing: 0.005em;
  }

  /* Farbige Umrandungen + individuelle Ei-Formen bleiben auf dem Oval */
  .blossom--narzisse   .blossom__mark { border-color: #F0C860; border-radius: 48% 52% 40% 60% / 52% 48% 58% 42%; }
  .blossom--akelei     .blossom__mark { border-color: #1b4570; border-radius: 58% 42% 52% 48% / 48% 55% 45% 52%; }
  .blossom--hyazinthe  .blossom__mark { border-color: #8FA0E0; border-radius: 44% 56% 55% 45% / 60% 42% 58% 40%; }
  .blossom--feuerlilie .blossom__mark { border-color: #E57860; border-radius: 50% 50% 45% 55% / 52% 48% 60% 40%; }
  .blossom--wegwarte   .blossom__mark { border-color: #4A7BB8; border-radius: 52% 48% 58% 42% / 45% 55% 50% 50%; }
  .blossom--iris       .blossom__mark { border-color: #B78BD9; border-radius: 55% 45% 50% 50% / 48% 58% 42% 52%; }

  /* Schmalere Viewports: Staffelung reduzieren, Schilder kompakter */
  @media (max-width: 720px) {
    .hero__blossoms { gap: var(--space-2) var(--space-3); padding-bottom: 1.5rem; }
    .blossom { gap: 0.6rem; }
    .blossom__mark { max-width: 130px; }
    .blossom:nth-child(1) .blossom__mark { --mark-y: 0px; }
    .blossom:nth-child(2) .blossom__mark { --mark-y: -8px; }
    .blossom:nth-child(3) .blossom__mark { --mark-y: -16px; }
    .blossom:nth-child(4) .blossom__mark { --mark-y: -4px; }
    .blossom:nth-child(5) .blossom__mark { --mark-y: -10px; }
    .blossom:nth-child(6) .blossom__mark { --mark-y: -14px; }
    .blossom__plaque { padding: 0.5rem 0.55rem 0.55rem; max-width: 160px; }
    .blossom__who { font-size: 0.54rem; letter-spacing: 0.14em; }
    .blossom__text { font-size: 0.78rem; }
  }
  @media (max-width: 540px) {
    .hero__blossoms { grid-template-columns: repeat(3, 1fr); gap: 0.8rem 6px; padding-bottom: 1rem; }
    .blossom { gap: 0.4rem; }
    .blossom__mark { max-width: 90px; border-width: 2px; }
    .blossom:nth-child(1) .blossom__mark,
    .blossom:nth-child(2) .blossom__mark,
    .blossom:nth-child(3) .blossom__mark,
    .blossom:nth-child(4) .blossom__mark,
    .blossom:nth-child(5) .blossom__mark,
    .blossom:nth-child(6) .blossom__mark { --mark-y: 0px; }
    .blossom__plaque { padding: 0.35rem 0.35rem 0.4rem; border-width: 1px; max-width: 110px; }
    .blossom__plaque::before, .blossom__plaque::after { width: 3px; height: 3px; top: 3px; }
    .blossom__plaque::before { left: 4px; }
    .blossom__plaque::after  { right: 4px; }
    .blossom__who { font-size: 0.46rem; letter-spacing: 0.1em; }
    .blossom__text { font-size: 0.66rem; }
  }

  /* Formate-Hub */
  /* 5-Kachel-Layout: 3 oben, 2 unten zentriert */
  .formate-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--space-5); }
  .formate-grid > .format-card:nth-child(1) { grid-column: 1 / span 2; }
  .formate-grid > .format-card:nth-child(2) { grid-column: 3 / span 2; }
  .formate-grid > .format-card:nth-child(3) { grid-column: 5 / span 2; }
  .formate-grid > .format-card:nth-child(4) { grid-column: 2 / span 2; }
  .formate-grid > .format-card:nth-child(5) { grid-column: 4 / span 2; }
  @media (max-width: 900px) {
    .formate-grid { grid-template-columns: repeat(2, 1fr); }
    .formate-grid > .format-card:nth-child(n) { grid-column: auto; }
  }
  @media (max-width: 560px) {
    .formate-grid { grid-template-columns: 1fr; }
  }
  .format-card {
    background: #fff;
    padding: 1.75rem 1.75rem 1.5rem;
    border-top: 4px solid var(--color-petrol-500);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-wrap: break-word;
    hyphens: auto;
  }
  .format-card > * { max-width: 100%; }
  .format-card p, .format-card h3 { margin-left: 0; margin-right: 0; }
  .format-card--gold { border-top-color: var(--color-gold-400); }
  .format-card--moss { border-top-color: #6B7E4F; }
  .format-card--terracotta { border-top-color: #A55D3F; }
  .format-card--magenta { border-top-color: #B22E76; }
  .format-card h3 { margin-top: 0.5rem; margin-bottom: 0.75rem; }
  .format-card p { margin-bottom: 1rem; line-height: 1.5; }
  .format-card__link { margin-top: auto; padding-top: var(--space-4); font-weight: 500; display: inline-block; }

/* ================================================================
   [WOW-Sprint] Startseite: kinematischer Aufhänger, Mobile-Weiche,
   größere Bildmomente. Nur Startseite (hero--cinematic, drone-band,
   einblicke). Bewegungen respektieren prefers-reduced-motion.
   ================================================================ */

/* Langsamer Ken-Burns auf Drohnenband + Hero-Bild = Kino-Ruhe */
@keyframes eck-kenburns { from { transform: scale(1.0); } to { transform: scale(1.09); } }
.drone-band img { width: 100%; height: 100%; object-fit: cover; }
.drone-band img,
.hero--cinematic .hero__media img {
  will-change: transform;
  animation: eck-kenburns 24s ease-out both;
}

/* Scroll-Hinweis am Hero-Fuß — führt zu den zwei Türen */
.hero__scrollcue {
  display: flex; justify-content: center;
  margin: var(--space-4) auto 0;
  color: var(--color-cream); text-decoration: none; opacity: 0.65;
}
.hero__scrollcue:hover { opacity: 1; color: var(--color-gold-400); }
.hero__scrollcue svg { animation: eck-bob 1.8s ease-in-out infinite; }
@keyframes eck-bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* Leiser Einstieg in den stillen Pfad */
.hero__whisper { margin-top: var(--space-4); font-size: var(--fs-sm); }
.hero__whisper a {
  color: var(--color-cream); opacity: 0.82;
  border-bottom: 1px solid rgba(238,227,214,0.35); padding-bottom: 1px;
}
.hero__whisper a:hover { opacity: 1; color: var(--color-gold-400); }

/* Mobile: Weiche ohne Scrollen anschneiden — Drohnenband weg, Hero straffen */
@media (max-width: 720px) {
  .drone-band { display: none; }
  .hero--cinematic { min-height: 58vh; }
  .hero--cinematic .hero__secondary { display: none; }
  .hero--cinematic .hero__welcome { display: none; }
  .hero--cinematic .hero__cta-row .btn--ghost { display: none; }
  .hero--cinematic .hero__content { padding-top: var(--space-4); padding-bottom: var(--space-5); }
  .hero--cinematic .hero__whisper { margin-top: var(--space-3); }
  .hero--cinematic .hero__scrollcue { display: none; }
  #weiche { padding-top: 1.3rem !important; scroll-margin-top: 68px; }
}

/* Größere, immersivere Einblicke mit einem Leitbild */
.einblick--feature { grid-column: span 2; aspect-ratio: 16 / 10; }
.einblick__cap { font-size: 0.9rem; }
@media (max-width: 720px) { .einblick--feature { grid-column: span 1; aspect-ratio: 3 / 2; } }

@media (prefers-reduced-motion: reduce) {
  .drone-band img,
  .hero--cinematic .hero__media img,
  .hero__scrollcue svg { animation: none; }
}

/* Weiche-Türen: Sog per dezentem Hover-Lift */
.weiche__door {
  transition: transform .2s var(--ease, ease), box-shadow .2s var(--ease, ease), background .15s ease !important;
  will-change: transform;
}
.weiche__door:hover,
.weiche__door:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(12, 39, 66, 0.16);
  background: #fff !important;
  outline: none;
}