/* ============================================================
   landing.css — Zusatz-Stile für die Leistungs-Unterseiten
   Ergänzt styles.css (nicht ersetzen). Nutzt dieselben Variablen.
   ============================================================ */

/* ============================================================
   NAVIGATION: Home-Knopf + aufklappbares Leistungen-Menü
   (gilt auf allen Seiten, auch der Startseite)
   ============================================================ */

/* --- Home-Knopf --- */
.nav-links .nav-home{
  display:inline-flex;align-items:center;gap:7px;
}
.nav-links .nav-home svg{
  width:17px;height:17px;flex:0 0 17px;
  transition:transform .2s;
}
.nav-links .nav-home:hover svg{transform:translateY(-1px)}

/* aktive Seite in der Navigation */
.nav-links a.active{color:var(--brand);font-weight:700}

/* --- Aufklappbares Leistungen-Menü --- */
.nav-drop{position:relative}
.nav-drop-btn{
  display:inline-flex;align-items:center;gap:5px;
  background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;cursor:pointer;
  letter-spacing:inherit;
}
.nav-drop.active > .nav-drop-btn{color:var(--brand);font-weight:700}
.nav-drop-btn .chev{
  width:15px;height:15px;flex:0 0 15px;
  transition:transform .22s cubic-bezier(.2,.7,.3,1);
  opacity:.7;
}
.nav-drop-btn[aria-expanded="true"] .chev{transform:rotate(180deg)}

.nav-drop-menu{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(360px,86vw);
  background:#fff;border-radius:16px;
  border:1px solid var(--line,#e6ecef);
  box-shadow:0 26px 60px -22px rgba(12,42,54,.32);
  padding:8px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .2s, transform .22s cubic-bezier(.2,.7,.3,1), visibility .2s;
  z-index:60;
}
/* kleine Brücke nach oben, damit die Maus nicht ins Leere fährt */
.nav-drop-menu::before{
  content:"";position:absolute;left:0;right:0;top:-16px;height:16px;
}
.nav-drop-btn[aria-expanded="true"] + .nav-drop-menu,
.nav-drop:hover .nav-drop-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}
.nav-drop-menu a{
  display:block;padding:11px 13px;border-radius:11px;
  text-decoration:none;color:var(--ink);
  transition:background .16s;
}
.nav-drop-menu a:hover{background:#f1f7f8}
.nav-drop-menu a.active{background:rgba(47,143,214,.09)}
.nav-drop-menu a b{
  display:block;font-size:14.5px;font-weight:650;line-height:1.35;color:var(--ink);
}
.nav-drop-menu a.active b{color:var(--brand)}
.nav-drop-menu a span{
  display:block;font-size:12.5px;line-height:1.4;color:var(--muted);margin-top:2px;
}
.nav-drop-menu .ndm-all{
  border-bottom:1px solid var(--line,#e6ecef);
  border-radius:11px 11px 0 0;margin-bottom:4px;padding-bottom:12px;
}
.nav-drop-menu .ndm-all b{color:var(--brand)}

/* --- Mobil: Menü ist Teil der Liste, kein Overlay ---
   Umschaltpunkt 720px = derselbe wie in styles.css für das Burger-Menü.
   (Bei einer anderen Breite bräche die Navigation im Zwischenbereich.) */
@media (max-width:720px){
  .nav-drop{width:100%}
  .nav-drop-btn{
    width:100%;justify-content:space-between;
    padding:10px 0;
  }
  .nav-drop-menu{
    position:static;transform:none;width:100%;
    opacity:1;visibility:visible;pointer-events:auto;
    box-shadow:none;border:0;border-radius:0;
    padding:0 0 6px 10px;
    background:transparent;
    display:none;
  }
  .nav-drop-btn[aria-expanded="true"] + .nav-drop-menu{display:block;transform:none}
  .nav-drop:hover .nav-drop-menu{transform:none}
  .nav-drop-menu a{padding:9px 10px}
  .nav-drop-menu a span{display:none}
  .nav-drop-menu .ndm-all{border-bottom:0;padding-bottom:9px;margin-bottom:0}
}

/* ---------- Breadcrumb ---------- */
.breadcrumb{
  padding:96px 0 0;
  font-size:14px;
  color:var(--muted);
}
.breadcrumb ol{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;gap:6px;
}
.breadcrumb li{display:flex;align-items:center;gap:6px}
.breadcrumb li+li::before{
  content:"";width:5px;height:5px;border-right:1.5px solid currentColor;
  border-bottom:1.5px solid currentColor;transform:rotate(-45deg);
  opacity:.45;margin-right:2px;
}
.breadcrumb a{color:var(--muted);text-decoration:none}
.breadcrumb a:hover{color:var(--brand);text-decoration:underline}
.breadcrumb [aria-current]{color:var(--ink);font-weight:600}

/* ---------- Seiten-Hero (Unterseite) ---------- */
.page-hero{
  position:relative;
  padding:44px 0 64px;
  /* overflow:hidden entfernt (Mubarik 11.08.2026: "30 kwp ist geschnitten,
     dass ist auf allen seiten so"). Der Abschnitt endete 34 px oberhalb des
     Hinweis-Kaestchens und schnitt dessen letzte Zeile ab - auf JEDER Seite
     mit Kasten, in jeder Fensterbreite. Der Kasten selbst war nie zu klein;
     gemessen war unter dem Text immer 16 bis 20 px Luft.
     Geprueft, bevor die Zeile wegkam: kein ::before/::after am page-hero,
     kein absolut positioniertes Element in einem der Hero-Bereiche. Das
     Abschneiden hatte also keinen Zweck mehr. */
}
.page-hero .container{position:relative;z-index:2}
/* align-items:stretch statt center (Mubarik 09.08.2026): Das Hero-Bild soll
   die volle Hoehe der Textspalte einnehmen. Bei "center" blieb es auf seiner
   Eigenhoehe stehen und wirkte neben dem langen Text zu klein. Mit "stretch"
   wachsen beide Spalten gleich hoch; das Bild fuellt den Rahmen ueber
   object-fit:cover und wird dabei mittig beschnitten. */
.ph-inner{
  display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:stretch;
}
.ph-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--brand);margin-bottom:16px;
}
.ph-eyebrow::before{
  content:"";width:26px;height:2px;background:var(--brand);border-radius:2px;
}
.page-hero h1{
  font-family:var(--font-display,inherit);
  font-size:clamp(34px,4.4vw,54px);
  line-height:1.08;letter-spacing:-.025em;
  margin:0 0 20px;color:var(--ink);
}
.page-hero h1 em{font-style:normal;color:var(--brand)}
.ph-lead{
  font-size:clamp(16.5px,1.35vw,19px);line-height:1.68;color:var(--muted);
  max-width:60ch;margin:0 0 28px;
}
.ph-actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:26px}
.ph-usp{
  display:flex;flex-wrap:wrap;gap:10px 22px;
  padding:0;margin:0;list-style:none;
}
.ph-usp li{
  display:flex;align-items:center;gap:9px;
  font-size:14.5px;font-weight:600;color:var(--ink);
}
.ph-usp li svg{
  width:18px;height:18px;flex:0 0 18px;color:var(--brand);
}
.ph-media{position:relative}
.ph-media img{
  width:100%;height:100%;min-height:340px;object-fit:cover;
  border-radius:22px;display:block;
  box-shadow:0 26px 60px -28px rgba(12,42,54,.45);
}
/* Hinweis-Kaestchen unter dem Bild statt darueber (Mubarik 23.07.2026):
   In der absoluten Position lag es ueber dem Foto und verdeckte genau das
   Geraet, das gezeigt werden soll. Jetzt sitzt es unterhalb, volle Breite. */
.ph-badge{
  position:static;margin-top:16px;
  background:#fff;border-radius:16px;padding:16px 22px;
  box-shadow:0 12px 32px -18px rgba(12,42,54,.34);
  border:1px solid var(--line,#e6ecef);
  display:flex;align-items:center;gap:16px;
  max-width:none;
}
.ph-badge .n{
  font-family:var(--font-display,inherit);
  font-size:26px;font-weight:700;color:var(--brand);line-height:1.05;
  white-space:nowrap;flex:0 0 auto;
}
.ph-badge .t{font-size:13.5px;line-height:1.4;color:var(--muted)}

/* ---------- Leistungs-Übersicht: Kachelraster ---------- */
/* Vier Kacheln: 2x2 statt 3+1, damit keine einsame Kachel unten steht. */
.lp-grid{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:24px;align-items:stretch;
}
@media (max-width:860px){ .lp-grid{grid-template-columns:1fr} }
/* Die Schlagwort-Liste sitzt immer direkt über dem Link, egal wie lang der Text ist */
.lp-tile ul{margin-top:auto}
.lp-tile{
  position:relative;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line,#e6ecef);border-radius:20px;
  overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .28s cubic-bezier(.2,.7,.3,1), box-shadow .28s, border-color .28s;
}
.lp-tile:hover{
  transform:translateY(-6px);
  border-color:transparent;
  box-shadow:0 26px 54px -26px rgba(12,42,54,.35);
}
.lp-tile-img{position:relative;aspect-ratio:21/9;overflow:hidden;background:#eef3f4}
.lp-tile-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s cubic-bezier(.2,.7,.3,1)}
.lp-tile:hover .lp-tile-img img{transform:scale(1.06)}
.lp-tile-body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.lp-tile h3{
  font-family:var(--font-display,inherit);
  font-size:20px;line-height:1.28;letter-spacing:-.01em;margin:0 0 10px;
}
.lp-tile p{font-size:15px;line-height:1.62;color:var(--muted);margin:0 0 16px;flex:1}
.lp-tile ul{
  list-style:none;margin:0 0 18px;padding:0;
  display:flex;flex-wrap:wrap;gap:6px;
}
.lp-tile ul li{
  font-size:12.5px;font-weight:600;color:var(--brand);
  background:rgba(47,143,214,.09);border-radius:999px;padding:5px 11px;
}
.lp-more{
  display:inline-flex;align-items:center;gap:8px;
  font-weight:700;font-size:14.5px;color:var(--brand);
}
.lp-more svg{width:17px;height:17px;transition:transform .25s}
.lp-tile:hover .lp-more svg{transform:translateX(4px)}

/* Erste Sektion direkt nach dem Hero: oben weniger Luft */
.page-hero + .section{padding-top:30px;padding-bottom:30px}
/* Die Anker-Navigation braucht unten keinen vollen Sektionsabstand */
.page-hero + .section .section-head{margin-bottom:20px}

/* ---------- Inhaltsabschnitt mit Anker-Navigation ---------- */
.jump-nav{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0;margin:0 0 8px;list-style:none;
}
.jump-nav a{
  display:inline-block;padding:9px 16px;border-radius:999px;
  background:#fff;border:1px solid var(--line,#e6ecef);
  font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;
  transition:background .2s,color .2s,border-color .2s;
}
.jump-nav a:hover{background:var(--brand);border-color:var(--brand);color:#fff}

/* ---------- Textblock (2 Spalten) ---------- */
/* ABSTAND_LP_SPLIT_2026-08-12 */
/* align-items:center zentriert Bild und Text nebeneinander. Ist das Bild
   hoeher als der Text, ragt es nach OBEN heraus - gemessen 12.08.2026 bis
   auf 2 px an den Hinweiskasten darueber (Mubarik: „direkt an den text von
   oben dran und zu nah"). Nur bei zwei Spalten; einspaltig waren es 626 px.
   Ein Mindestabstand oben loest das, ohne die Zentrierung aufzugeben. */
.lp-split{
  display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center;
  margin-top:88px;   /* 12.08.2026: 40 px waren Mubarik zu wenig */
}
.lp-split.flip .lp-split-media{order:-1}
.lp-split-media img{
  width:100%;border-radius:20px;display:block;
  box-shadow:0 22px 48px -26px rgba(12,42,54,.4);
}
.lp-split-text h2{
  font-family:var(--font-display,inherit);
  font-size:clamp(26px,2.6vw,34px);line-height:1.16;letter-spacing:-.02em;
  margin:0 0 16px;
}
.lp-split-text h3{
  font-family:var(--font-display,inherit);
  font-size:19px;margin:26px 0 8px;letter-spacing:-.01em;
}
.lp-split-text p{font-size:16px;line-height:1.72;color:var(--muted);margin:0 0 14px}
.lp-split-text ul{margin:0 0 16px;padding-left:0;list-style:none}
.lp-split-text ul li{
  position:relative;padding-left:28px;margin-bottom:10px;
  font-size:15.5px;line-height:1.6;color:var(--muted);
}
.lp-split-text ul li::before{
  content:"";position:absolute;left:0;top:4px;
  width:19px;height:19px;border-radius:50%;
  background:rgba(47,143,214,.12)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f8fd6' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E")
    center/11px 11px no-repeat;
}
.lp-split-text ul li strong{color:var(--ink)}

/* ---------- Ablauf / Schritte ---------- */
.steps{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px;
  counter-reset:step;
}
.step{
  position:relative;background:#fff;border:1px solid var(--line,#e6ecef);
  border-radius:18px;padding:26px 22px 24px;
}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:var(--font-display,inherit);
  display:block;font-size:13px;font-weight:700;letter-spacing:.1em;
  color:var(--brand);margin-bottom:12px;
}
.step h3{font-family:var(--font-display,inherit);font-size:17.5px;margin:0 0 8px;letter-spacing:-.01em}
.step p{font-size:14.5px;line-height:1.6;color:var(--muted);margin:0}

/* ---------- Faktenband ---------- */
.factband{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:2px;
  background:var(--line,#e6ecef);border-radius:20px;overflow:hidden;
}
.factband .f{background:#fff;padding:26px 22px;text-align:center}
.factband .f .n{
  font-family:var(--font-display,inherit);
  font-size:30px;font-weight:700;color:var(--brand);line-height:1;margin-bottom:8px;
}
.factband .f .t{font-size:14px;line-height:1.5;color:var(--muted)}

/* ---------- CTA-Streifen ---------- */
.lp-cta{
  position:relative;overflow:hidden;
  background:linear-gradient(135deg,#0e3a48 0%,#157180 55%,#1b8a86 100%);
  border-radius:26px;padding:48px 44px;
  display:grid;grid-template-columns:1.3fr auto;gap:32px;align-items:center;
}
.lp-cta::after{
  content:"";position:absolute;right:-70px;top:-70px;
  width:260px;height:260px;border-radius:50%;
  background:radial-gradient(circle,rgba(56,194,164,.35),transparent 68%);
}
.lp-cta-txt{position:relative;z-index:2}
.lp-cta h2{
  font-family:var(--font-display,inherit);
  color:#fff;font-size:clamp(24px,2.4vw,32px);line-height:1.18;
  letter-spacing:-.02em;margin:0 0 10px;
}
.lp-cta p{color:rgba(255,255,255,.82);font-size:16px;line-height:1.65;margin:0;max-width:56ch}
.lp-cta-btns{position:relative;z-index:2;display:flex;flex-direction:column;gap:10px}
.lp-cta .btn-white{
  background:#fff;color:#0e3a48;border:none;
  padding:14px 24px;border-radius:12px;font-weight:700;font-size:15.5px;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:transform .2s,box-shadow .2s;
}
.lp-cta .btn-white:hover{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.4)}
.lp-cta .btn-ghost{
  background:transparent;border:1.5px solid rgba(255,255,255,.42);color:#fff;
  padding:13px 24px;border-radius:12px;font-weight:600;font-size:15px;
  text-decoration:none;text-align:center;white-space:nowrap;
  transition:background .2s,border-color .2s;
}
.lp-cta .btn-ghost:hover{background:rgba(255,255,255,.13);border-color:#fff}

/* ---------- FAQ auf Unterseiten ---------- */
.lp-faq details{
  background:#fff;border:1px solid var(--line,#e6ecef);border-radius:14px;
  padding:0;margin-bottom:10px;overflow:hidden;
}
.lp-faq summary{
  cursor:pointer;list-style:none;padding:18px 52px 18px 22px;
  font-weight:650;font-size:16px;line-height:1.45;position:relative;
}
.lp-faq summary::-webkit-details-marker{display:none}
.lp-faq summary::after{
  content:"";position:absolute;right:22px;top:24px;
  width:9px;height:9px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .22s;
}
.lp-faq details[open] summary::after{transform:rotate(-135deg);top:27px}
.lp-faq details > div{padding:0 22px 20px;font-size:15.5px;line-height:1.7;color:var(--muted)}
.lp-faq details > div p{margin:0 0 10px}
.lp-faq details > div p:last-child{margin:0}

/* ---------- Abschnitts-Farbwechsel ---------- */
.sec-mint{background:linear-gradient(180deg,#f2fbf8 0%,#eaf7f3 100%)}
.sec-petrol-soft{background:linear-gradient(180deg,#f2f8fb 0%,#e9f2f7 100%)}

/* ---------- Responsiv ---------- */
@media (max-width:980px){
  .ph-inner{grid-template-columns:1fr;gap:36px}
  .ph-media{order:-1}
  /* height:100% ist fuer die zweispaltige Ansicht gedacht, wo Bild und Text
     gleich hoch sein sollen. Einspaltig fuellte das Bild die ganze Spaltenhoehe
     und der Kasten darunter ragte aus dem Bereich heraus - genau ueber die
     Ueberschrift. Deshalb hier auf natuerliche Hoehe zuruecksetzen.
     (Gemessen 11.08.2026: Kasten lag bei y 729..832, ph-media endete bei 713.) */
  .ph-media img{min-height:260px;height:auto;aspect-ratio:4/3}
  .lp-split{grid-template-columns:1fr;gap:30px}
  .lp-split.flip .lp-split-media{order:0}
  .lp-cta{grid-template-columns:1fr;padding:36px 26px}
  .lp-cta-btns{flex-direction:row;flex-wrap:wrap}
}
@media (max-width:640px){
  .breadcrumb{padding-top:86px;font-size:13px}
  .page-hero{padding:30px 0 44px}
  .lp-cta .btn-white,.lp-cta .btn-ghost{flex:1 1 100%}
  /* Badge nicht mehr ueberstehen lassen: sonst weitet es die Seite auf
     und der Inhalt laeuft rechts aus dem Bild (horizontales Scrollen). */
  /* Am Handy untereinander statt nebeneinander (Mubarik 11.08.2026): in der
     Zeile blieb fuer den Text nur eine schmale Spalte, er brach auf zwei
     Zeilen um und der Kasten sah unten abgeschnitten aus. */
  /* left/right/bottom sind Reste der frueheren absoluten Position. Seit der
     Kasten static unter dem Bild sitzt, verschoben sie ihn nur noch nach oben
     ueber die Ueberschrift. Deshalb zurueckgesetzt. */
  /* Der Kasten stiess am Handy an die Ueberschrift. Zwei Ursachen, beide
     behoben (gemessen 11.08.2026 bei 390 und 414 px auf allen sieben Seiten
     mit Kasten):
       1. left/right/bottom waren Reste der frueheren absoluten Position und
          zogen den Kasten nach oben.
       2. Das Bild hatte height:100% (fuer die zweispaltige Ansicht gedacht).
          Einspaltig fuellte es die ganze Spaltenhoehe, der Kasten darunter
          ragte aus dem Bereich heraus und lag ueber der Ueberschrift. Behoben
          in der 980px-Regel weiter unten (height:auto). */
  .ph-badge{
    left:auto;right:auto;bottom:auto;max-width:none;
    flex-direction:column;align-items:flex-start;gap:6px;
    padding:16px 18px;margin-bottom:20px;
  }
  .ph-badge .t{font-size:14px}
  .ph-actions .btn{flex:1 1 100%;text-align:center}
}
/* Sicherheitsnetz: nichts darf die Seite horizontal aufweiten */
html,body{overflow-x:hidden}

/* ---------- Staedte-Raster auf /deutschlandweit/ (08.08.2026) ----------
   Sechs Staedte sollen als 3+3 stehen. Das Standard-Raster (.steps, auto-fit)
   bricht je nach Fensterbreite zu 4+2 um, was unruhig wirkt.
   Am Handy stapeln sie wie ueberall. */
.staedte-raster{grid-template-columns:repeat(3,1fr)}
@media(max-width:900px){ .staedte-raster{grid-template-columns:repeat(2,1fr)} }
@media(max-width:560px){ .staedte-raster{grid-template-columns:1fr} }

/* Letzte Reihe mittig, wenn sie nicht voll wird (14.08.2026).
   Seit die Liste von 6 auf 11 Staedte gewachsen ist, geht die Zahl in keinem
   Raster mehr glatt auf und rechts klafft eine Luecke.
   Gemessen bei 11 Kacheln: 1239px -> 3+3+3+2 (Rest 2), 819px -> 5x2+1 (Rest 1).
   Beide Faelle werden hier mittig gerueckt, jeweils um eine halbe Spalte
   plus die Haelfte des Spaltenabstands. */
@media(min-width:901px){
  /* 3 Spalten, Rest 2: beide Kacheln um eine halbe Spalte nach rechts */
  .staedte-raster > :nth-last-child(2):nth-child(3n+1),
  .staedte-raster > :last-child:nth-child(3n+2){
    transform:translateX(calc(50% + 11px));
  }
  /* 3 Spalten, Rest 1: die einzelne Kachel um eine ganze Spalte */
  .staedte-raster > :last-child:nth-child(3n+1){
    transform:translateX(calc(100% + 22px));
  }
}
@media(min-width:561px) and (max-width:900px){
  /* 2 Spalten, Rest 1: einzelne Kachel um eine halbe Spalte nach rechts */
  .staedte-raster > :last-child:nth-child(2n+1){
    transform:translateX(calc(50% + 11px));
  }
}

/* ---------- Weiterlesen-Link in den Stadt-Kacheln (14.08.2026) ----------
   Der Abschnitt "In OWL unterwegs" auf /waermepumpe/ ist die Hub-Seite und
   verweist auf die vier Ortsseiten. Ohne diesen sichtbaren Link finden weder
   Besucher noch Google die Unterseiten.
   Gestaltung bewusst wie .card-more in styles.css, damit es sich einfuegt. */
/* Farbe ueber var(--brand) mit Rueckfallwert --blue-600.
   Hintergrund: --brand wird nur in kategorie.css gesetzt (aus der Gewerkefarbe
   --kat). Seiten ohne kategorie.css haetten sonst keine Farbe. Der zweite
   Wert in var() faengt genau diesen Fall ab (geprueft 14.08.2026). */
.step h3 a{
  color:inherit;text-decoration:none;
  border-bottom:2px solid transparent;
  transition:color .18s, border-color .18s;
}
.step h3 a:hover{
  color:var(--brand,var(--blue-600));
  border-bottom-color:var(--brand,var(--blue-600));
}
.mehr-link{
  display:inline-flex;align-items:center;gap:6px;
  font-weight:700;font-size:14.5px;
  color:var(--brand,var(--blue-600));
  text-decoration:none;
}
.mehr-link::after{
  content:"";width:7px;height:7px;flex:0 0 7px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .2s;
}
.mehr-link:hover{text-decoration:underline}
.mehr-link:hover::after{transform:rotate(-45deg) translate(2px,2px)}
.step h3 a:focus-visible,
.mehr-link:focus-visible{outline:3px solid var(--brand,var(--blue-600));outline-offset:3px;border-radius:3px}