/* =========================================================
   /assets/css/home.css
   NUR Home-spezifische Styles (Startseite /home/)
   Ziel: weniger editorial als Magazin, aber markenkonform.
   ========================================================= */
  /* =========================================
   Section Head: klassisch mittig
   (Eyebrow + H2 + Lede zentriert)
   ========================================= */

.page--home .homeSectionHead{
  display: grid;
  gap: 10px;
  margin: 0 auto 18px;
}

/* Center-Variante */
.page--home .homeSectionHead--center{
  text-align: center;
  justify-items: center;
  max-width: 820px; /* verhindert zu lange Zeilen auf großen Screens */
}

/* Eyebrow: mittig + schöner Abstand */
.page--home .homeSectionHead--center .eyebrow{
  margin: 0;
}

/* Titel */
.page--home .homeSectionHead--center .homeSectionTitle{
  margin: 0;
}

/* Lede / Subline */
.page--home .homeSectionHead--center .homeHeadLede,
.page--home .homeSectionHead--center .lede{
  margin: 0;
  max-width: 68ch;
}
/* Eyebrow: Farbe exakt wie homeSectionTitle */
.page--home .homeSectionHead--center .eyebrow{
  color: inherit;
  opacity: 1;
}
.page--home .homeSectionHead--center{
  color: var(--text, rgba(111,100,90,0.95));
}
.page--home .homeSectionHead--center .homeSectionTitle{
  color: var(--text, rgba(111,100,90,0.95));
}

/* ---------------------------------------------------------
   Home Defaults / Fallbacks (falls Tokens fehlen)
   --------------------------------------------------------- */
.page--home{
  --sb-right: 320px;
  --sb-left:  320px;
  --sb-gap:   32px;
}

/* Section-Hintergründe (Home only) */
.bg-elfenbein{ background: var(--ivory); }
.bg-sand{ background: var(--sand); }
.bg-salbei{ background: var(--sage); }
.bg-rose{ background: var(--rose); }

/* Home: weicher als Magazin */
.page--home .section{
  border-top: 1px solid rgba(183,169,154,0.14);
}
.page--home .section--first{
  padding-top: 26px;
}
/* =========================================================
   HOME – HERO: Eyebrow, H1, H3 & CTAs klassisch zentriert
   ========================================================= */
.page--home .heroWide__flair{
  font-size: clamp(1.2rem, 2.1vw, 1.75rem);
}

.page--home .homeHeroWide .container{
  text-align: center;
}

/* Eyebrow mittig */
.page--home .homeHeroEyebrow{
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

/* Overlay im Bild: ebenfalls mittig statt links */
.page--home .heroWide__overlay{
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
  width: min(92%, 980px);
}

/* Flair + Title mittig */
.page--home .heroWide__flair,
.page--home .heroWide__title{
  text-align: center;
}

/* H3 unter dem Bild: mittig + angenehme Zeilenlänge */
.page--home .homeHeroH3{
  text-align: center;
  max-width: 70ch;
  margin-left: auto;
  margin-right: auto;
}

/* Buttons mittig */
.page--home .heroWide__ctas{
  justify-content: center;
}

/* ---------------------------------------------------------
   Headings / Section-Head
   --------------------------------------------------------- */
.homeSectionTitle{
  margin: 0 0 10px 0;
  color: var(--taupe-dark);
}
.homeSectionTitle--left{ text-align: left; }

.homeHeadLede{
  margin: 0;
  max-width: 60ch;
}

/* Split-Head: H2 links + Lede rechts */
.homeSplitHead{
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: flex-end;
  margin-bottom: 18px;
}
.homeSplitHead .eyebrow{ margin-bottom: 8px; }
.homeSplitHead .lede{ text-align: left; }

@media (max-width: 900px){
  .homeSplitHead{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------
   Innenliegende Farbbänder (statt full-width Section-Background)
   --------------------------------------------------------- */
.homeBand{
  border-radius: var(--r-lg);
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(183,169,154,0.14);
  box-shadow: 0 10px 30px rgba(111,100,90,0.05);
}

/* Varianten */
.homeBand--ivory{ background: rgba(249,245,239,0.96); }
.homeBand--sand{  background: rgba(234,221,200,0.55); }
.homeBand--salbei{background: rgba(196,209,192,0.46); }
.homeBand--rose{  background: rgba(243,215,208,0.55); }

/* ---------------------------------------------------------
   HOME HERO — großes 16:9 Bild + Overlay unten links
   Eyebrow & H3 + Buttons UNTER dem Bild
   --------------------------------------------------------- */
.homeHeroWide{
  padding-top: 18px;
  border-top: none;
}

/* Eyebrow ÜBER dem Bild, mittig */
.homeHeroEyebrow{
  text-align: center;
  margin: 0 0 12px 0;
}

/* Hero Bild-Container */
.heroWide{
  position: relative;
  width: 100%;
  max-width: var(--max); /* <- damit Hero exakt zu Center passt */
  margin: 0 auto;

  aspect-ratio: 16 / 9;
  min-height: clamp(320px, 42vw, 620px);

  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid rgba(183,169,154,0.18);
  box-shadow: var(--shadow);
  background: rgba(249,245,239,0.55);
}

/* Bild */
.heroWide img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  z-index: 0;
}

/* Scrim für Lesbarkeit (liegt ÜBER dem Bild, UNTER dem Text) */
.heroWide::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(249,245,239,0.82) 0%,
    rgba(249,245,239,0.58) 34%,
    rgba(249,245,239,0.12) 60%,
    rgba(249,245,239,0.00) 100%
  );
}

/* Overlay unten links */
.heroWide__overlay{
  position: absolute;
  left: clamp(16px, 3vw, 34px);
  bottom: clamp(16px, 3vw, 34px);
  z-index: 2;

  max-width: 72ch;
}

/* H2 Flair: Playfair, etwas größer & weiterhin dezent */
.page--home .heroWide__flair{
  margin: 0 0 6px 0;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.18rem, 1.9vw, 1.60rem);
  line-height: 1.12;
  color: rgba(111,100,90,0.72);
  text-shadow: 0 2px 14px rgba(249,245,239,0.85);
}

/* H1 im Overlay */
.heroWide__title{
  margin: 0;
  font-size: clamp(2.1rem, 4.2vw, 3.2rem);
  line-height: 1.06;
  color: var(--taupe-dark);
  text-shadow: 0 2px 18px rgba(249,245,239,0.85);
}

/* Wunsch: H1 auf Desktop 1 Zeile (auf Mobile darf sie umbrechen) */
@media (min-width: 1024px){
  .heroWide__title{ white-space: nowrap; }
}

/* H3 UNTER dem Bild (Montserrat) */
.homeHeroH3{
  margin: 14px auto 0;
  text-align: center;
  max-width: 86ch;
  font-family: var(--font-sans);
  font-weight: 500;
  color: rgba(111,100,90,0.92);
}

/* Buttons UNTER dem Bild, mittig */
.heroWide__ctas{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

@media (max-width: 640px){
  .heroWide__ctas .btn{ width: 100%; }
}

/* Mobile: scrim von unten statt links */
@media (max-width: 900px){
  .heroWide{
    border-radius: 18px;
  }
  .heroWide::after{
    background: linear-gradient(
      180deg,
      rgba(249,245,239,0.08) 0%,
      rgba(249,245,239,0.58) 58%,
      rgba(249,245,239,0.86) 100%
    );
  }
}

/* ---------------------------------------------------------
   Sidebars (home-only Styling)
   --------------------------------------------------------- */
.sidebarCard{
  background: rgba(249,245,239,0.96);
  border: 1px solid rgba(183,169,154,0.18);
  border-radius: 16px;
  padding: 16px 16px 14px;
  box-shadow: 0 10px 24px rgba(111,100,90,0.05);
}

.sidebarTitle{
  margin: 6px 0 10px 0;
  font-family: var(--font-serif);
  font-weight: 600;
  color: var(--taupe-dark);
}

.sidebarList{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.sidebarList a{
  text-decoration: none;
  color: var(--taupe-dark);
  font-weight: 700;
}
.sidebarList a:hover{ text-decoration: underline; }

.sidebarMeta{
  display: block;
  font-size: 0.85rem;
  opacity: 0.85;
  margin-top: 2px;
}

.partnerPills{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.partnerPill{
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(234,221,200,0.45);
  border: 1px solid rgba(183,169,154,0.22);
  text-decoration: none;
  color: rgba(111,100,90,0.92);
  font-weight: 700;
  font-size: 0.9rem;
}
.partnerPill:hover{
  background: rgba(234,221,200,0.60);
}

/* ---------------------------------------------------------
   Intro (Sand)
   --------------------------------------------------------- */
.homeIntro{ text-align: center; }

.homeIntroSub{
  margin: 0 0 14px 0;
  font-size: 1.1rem;
  color: rgba(111,100,90,0.88);
  font-family: var(--font-serif);
  font-weight: 500;
}

.homeIntroText{
  max-width: 86ch;
  margin: 0 auto;
  text-align: left;
}

.homeIntroLinks{
  margin-top: 18px;
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.method-link{
  display: inline-block;
  color: rgba(111,100,90,0.92);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(183,169,154,0.55);
  padding-bottom: 2px;
}
.method-link:hover{ border-bottom-color: rgba(183,169,154,0.9); }
.method-link--quiet{ opacity: 0.92; }

/* ---------------------------------------------------------
   3 Steps
   --------------------------------------------------------- */
.stepGrid{ margin-top: 18px; }

.stepCard{
  display: flex;
  align-items: stretch;
  overflow: hidden;
  border-radius: var(--r);
  border: 1px solid rgba(183,169,154,0.20);
  box-shadow: var(--shadow);
  background: rgba(249,245,239,0.65);
  min-height: 175px;
}
.stepCard--sand{ background: rgba(234,221,200,0.52); }
.stepCard--salbei{ background: rgba(196,209,192,0.44); }
.stepCard--rose{ background: rgba(243,215,208,0.52); }

.stepCard__media{ flex: 0 0 46%; }
.stepCard__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }

.stepCard__body{
  flex: 1 1 auto;
  padding: 16px 16px 18px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stepCard__title{ margin: 0 0 8px 0; }
.stepCard__text{ margin: 0; opacity: 0.92; }

@media (max-width: 640px){
  .stepCard{ flex-direction: column; }
  .stepCard__media{ height: 200px; flex: 0 0 auto; }
}

/* ---------------------------------------------------------
   Cards: Actions + Ghost Button
   --------------------------------------------------------- */

/* ---------------------------------------------------------
   Zodiac Tiles
   --------------------------------------------------------- */
.zodiacTiles{
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  margin-top: 14px;
}
.zodiacTiles--soft .zodiacTile{ background: rgba(234,221,200,0.18); }

.zodiacTile{
  display: block;
  padding: 16px 16px 14px;
  border-radius: 14px;
  border: 1px solid rgba(183,169,154,0.20);
  background: rgba(196,209,192,0.12);
  text-decoration: none;
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.zodiacTile:hover{
  transform: translateY(-2px);
  border-color: rgba(183,169,154,0.38);
  background: rgba(234,221,200,0.24);
}

.zodiacTile__title{
  display: block;
  font-family: var(--font-serif);
  font-size: 1.2rem;
  margin-bottom: 6px;
}
.zodiacTile__text{
  display: block;
  opacity: 0.88;
  font-size: 0.95rem;
  margin-bottom: 10px;
}
.zodiacTile__cta{
  display: inline-block;
  font-weight: 700;
  font-size: 0.95rem;
  opacity: 0.92;
}

.homeCenterCta{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* ---------------------------------------------------------
   Highlights Quick Win
   --------------------------------------------------------- */
.homeQuickWin{
  margin-top: 10px;
  opacity: 0.86;
}

/* ---------------------------------------------------------
   Auswahlprinzip (Bullets + Bild)
   --------------------------------------------------------- */
.homePrinciples{
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 18px;
  align-items: start;
  margin-top: 10px;
}

.homeBullets{
  margin: 0;
  padding-left: 1.2rem;
  line-height: 1.7;
}
.homeBullets li{ margin: 0.5rem 0; }

.homePrinciplesMedia{
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(183,169,154,0.20);
  box-shadow: var(--shadow);
  background: rgba(249,245,239,0.55);
}
.homePrinciplesMedia img{
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

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

/* ---------------------------------------------------------
   Newsletter
   --------------------------------------------------------- */
.homeNewsletter__content{
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.homeNewsletter__left{ flex: 1 1 auto; }

.homeNewsletter__title{
  text-align: left;
  color: var(--taupe-dark);
  margin-top: 0;
}
.homeNewsletter__text{ max-width: 60ch; }

.homeNewsletter__consent{
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 0.9rem;
  margin: 6px 0 8px;
}
.homeNewsletter__consent input{ margin: 0; }

.homeNewsletter__right{
  flex: 0 0 320px;
  display: flex;
  justify-content: flex-end;
}
.homeNewsletter__right img{
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
}

.homeFormNote{ margin-top: 10px; opacity: 0.8; }

@media (max-width: 900px){
  .homeNewsletter__content{
    flex-direction: column-reverse;
    text-align: center;
  }
  .homeNewsletter__title{ text-align: center; }
  .homeNewsletter__right{ justify-content: center; flex: 0 0 auto; }
  .homeNewsletter__right img{ max-width: 220px; }
  .homeNewsletter__consent{ justify-content: center; }
}

/* ---------------------------------------------------------
   Final CTA
   --------------------------------------------------------- */
.homeFinalCta{
  text-align: center;
}
/* =========================================================
   HOME – ELEMENT PICKER (Salbei-Band + 2x2 Grid + Ivory Tiles)
   ========================================================= */

.page--home .homeElementPick{
  /* Band wirkt wie im Screenshot: Salbei Fläche als “Rahmen” */
  background: var(--c-sage, #C4D1C0);
  border-radius: 24px;
  padding: clamp(18px, 2.5vw, 32px);
}

/* Headline/Intro im Band zentrieren (optional – wirkt wie Screenshot) */
.page--home .homeElementPick .homeSplitHead{
  text-align: center;
  justify-content: center;
  gap: 10px;
}
.page--home .homeElementPick .homeHeadLede{
  max-width: 60ch;
  margin: 0 auto;
}

/* 2x2 Grid (statt 4 Spalten) */
.page--home .homeElementPick .elementGrid{
  display: grid;
  grid-template-columns: 1fr;      /* Mobile: untereinander */
  gap: 22px;
  margin-top: 18px;
}

/* ab Tablet: 2 Spalten */
@media (min-width: 760px){
  .page--home .homeElementPick .elementGrid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px;
  }
}

/* Tiles: Ivory, clean, große Bilder */
.page--home .homeElementPick .card{
  background: var(--c-ivory, #F9F5EF);
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid rgba(183,169,154,0.25);
}

/* Bild größer + gleichmäßiger Look */
.page--home .homeElementPick .card__media{
  aspect-ratio: 16 / 9; /* “groß und breit” wie im Screenshot */
}
.page--home .homeElementPick .card__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Innenabstände etwas “magaziniger” */
.page--home .homeElementPick .card__body{
  padding: 18px 18px 16px;
}

/* =========================================================
   HOME – ELEMENT PICKER: CTA wieder Salbei + dunkle Schrift
   ========================================================= */

/* Primär-CTA: salbei Hintergrund, dunkle Schrift */
.page--home .homeElementPick .card .btn:not(.btn--ghost){
  background: var(--c-sage, #C4D1C0);
  border: 1px solid rgba(111,100,90,0.18);
  color: rgba(111,100,90,0.95);
}

/* Hover: minimal dunkler, aber ruhig */
.page--home .homeElementPick .card .btn:not(.btn--ghost):hover{
  filter: brightness(0.98);
}

/* Ghost bleibt neutral (falls du ihn nutzt) */
.page--home .homeElementPick .card .btn--ghost{
  background: transparent;
  color: rgba(111,100,90,0.92);
  border: 1px solid rgba(111,100,90,0.20);
}
/* =========================================================
   ✅ HOME HERO – clean wie Screenshot
   (kein Overlay, keine Shadow, keine Rundungen)
   ========================================================= */

.page--home .homeHeroTop{
  text-align: center;
}

/* Brand-Zeile oben (Script, falls vorhanden; sonst fallback) */
/* Brand-Zeile oben: WindSong */
.page--home .homeHeroBrand{
  margin: 0 0 10px;
  font-family: "WindSong", cursive;
  font-weight: 400; /* WindSong hat meist 400/500 je nach Import */
  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.05;
  color: rgba(111,100,90,0.95);
}

.page--home .homeHeroTitle{
  margin: 0 0 12px;
}

.page--home .homeHeroLead{
  margin: 0 auto 22px;
  max-width: 70ch;
  color: rgba(111,100,90,0.92);
}

/* Bild: clean */
.page--home .heroWide--home.heroWide--clean{
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
  background: none;
}

/* Falls irgendwo ein “Film/Shadow/Overlay” via Pseudo-Element sitzt */
.page--home .heroWide--home::before,
.page--home .heroWide--home::after{
  display: none !important;
}

/* Falls du das Overlay-HTML noch irgendwo drin hast: sicher ausblenden */
.page--home .heroWide__overlay{
  display: none !important;
}

/* Bild selbst: keine Rundung, keine Filter */
.page--home .heroWide--home img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: none;
  opacity: 1;
}

.page--home .homeHeroSubline{
  margin: 18px auto 18px;
  max-width: 70ch;
  color: rgba(111,100,90,0.85);
}

/* Buttons mittig + “2 Zeilen” */
.page--home .homeHeroWide .heroWide__ctas{
  justify-content: center;
}

.page--home .homeHeroWide .btn--stack{
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.1;
  padding-top: 14px;
  padding-bottom: 14px;
}

.page--home .homeHeroWide .btn--stack .btn__sub{
  font-size: 0.78em;
  opacity: 0.85;
  margin-top: 3px;
}

.page--home .homeHeroAff{
  margin: 14px auto 0;
  opacity: 0.8;
}

/* Head-Block: breiter, damit die Unterzeile nicht umbrechen muss */
.page--home .homeSectionHead--center{
  max-width: 92ch; /* statt 70ch */
  margin: 0 auto 18px;
}

/* Unterzeile: ab Desktop auf 1 Zeile zwingen */
@media (min-width: 1024px){
  .page--home .homeSectionHead--center .lede{
    white-space: nowrap;
  }
}
/* =========================================
   HOME – "Wie wir auswählen": Bild volle Breite
   ========================================= */

.page--home .homePrinciples{
  display: grid;
  grid-template-columns: 1fr; /* erzwingt 1 Spalte */
  gap: 18px;
}

/* Bild-Wrapper darf NICHT begrenzen */
.page--home .homePrinciplesMedia{
  width: 100%;
  max-width: none;
  margin: 0;
}

/* Bild selbst: volle Breite */
.page--home .homePrinciplesMedia img{
  width: 100%;
  height: auto;
  display: block;
  max-width: none;
}

/* =========================================
   HOME — Auswahlprinzip (homeSelect--center)
   Ziel:
   - Headline/Eyebrow/Lede klassisch mittig
   - Bild volle Breite der Main-Mitte
   - Bullets an Bildkante ausgerichtet
   - Lede auf großen Screens 1 Zeile (ohne BR)
   ========================================= */

.page--home .homeSelect--center .homeSectionHead{
  text-align: center;
  margin: 0 auto 18px; /* <- wichtig: auto zentriert den Block */
}

/* Eyebrow besser sichtbar (statt zu hell/taupe) */
.page--home .homeSelect--center .homeSectionHead .eyebrow{
  color: rgba(111,100,90,0.88); /* nah an deiner H2-Farbe */
}

/* Unterzeile: nicht künstlich schmal machen (sonst bricht sie um) */
.page--home .homeSelect--center .homeSectionHead .lede{
  max-width: none;
  margin-left: auto;
  margin-right: auto;
}

/* Wenn genug Platz ist: Unterzeile als 1 Zeile halten */
@media (min-width: 1024px){
  .page--home .homeSelect--center .homeSectionHead .lede{
    white-space: nowrap;
  }
}

/* FIGURE hat oft Default-Margins -> reset */
.page--home .homeSelect--center .homeSelectMedia{
  width: 100%;
  margin: 18px 0 0;
}

/* Bild wirklich auf 100% der Containerbreite */
.page--home .homeSelect--center .homeSelectMedia img{
  display: block;
  width: 100% !important;
  max-width: none !important;
  height: auto;
}
/* =========================================================
   ✅ HOME – Element-Kacheln: gleiche Höhe + Buttons stabil unten
   (Fix für Zwischenbreiten wie ~732px)
   ========================================================= */

/* Grid soll Items strecken */
.page--home .elementGrid{
  align-items: stretch;
}

/* Card muss volle Höhe bekommen */
.page--home .elementGrid .card{
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Body wird Flex-Column, damit margin-top:auto überhaupt wirkt */
.page--home .elementGrid .card__body{
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

/* Text darf etwas „puffern“, damit Karten ruhiger wirken (optional) */
.page--home .elementGrid .card__text{
  min-height: 3.4em; /* ca. 2 Zeilen */
}

/* ✅ Actions immer nach unten schieben */
.page--home .elementGrid .homeCardActions{
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* Buttons sollen nicht durch min-width „springen“ */
.page--home .elementGrid .homeCardActions .btn{
  min-width: 0;
  width: 100%;
  justify-content: center;
}

/* Zwischenbreiten / Mobile: Buttons untereinander */
@media (max-width: 860px){
  .page--home .elementGrid .homeCardActions{
    grid-template-columns: 1fr;
  }
}
/* Auswahlprinzip: Head wirklich mittig im Center */
.homeSelect.homeSelect--center .homeSectionHead--center {
  text-align: center;
}

.homeSelect.homeSelect--center .homeSectionHead--center .lede {
  margin-left: auto;
  margin-right: auto;
}
.homeQuickWin{
  margin-top: 10px;
  opacity: 0.86;
  min-height: 2.6em;   /* <- ca. 2 Zeilen, stabilisiert Button-Position 
  falls manche Quick Wins 3 Zeilen brauchen: min-height: 3.9em;.*/
}