/* ============================================================
   easyanfrage — Landingpage im Design der neuen EasyPlus-Website
   ------------------------------------------------------------
   Basis sind die drei kopierten Stylesheets der Referenz
   (assets/css/shadcn.css, bestof.css, persox.css). Diese Datei
   enthaelt ausschliesslich die easyanfrage-eigenen Bausteine
   und einige wenige Anpassungen. Die Referenz selbst wurde
   NICHT veraendert.
   Markenfarbe bleibt das Tuerkis --brand (#00aeb5), identisch
   zum Logo-Ton von easyanfrage.
   ============================================================ */

:root{
  --ea-ph:#00aeb5;                 /* Platzhalter-Markierung */
  --ea-ph-bg:rgba(0,174,181,.09);
}

/* ---------- Skip-Link, falls in der Basis nicht definiert ---------- */
.skip{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--ink);color:#fafafa;padding:10px 18px;border-radius:0 0 12px 0;
  font-size:14px;
}
.skip:focus{left:0}

/* ---------- Logo in der Pill / im Footer ---------- */
#nav .nav-logo img{height:20px}
@media(max-width:560px){#nav .nav-logo img{height:18px}}
.ea-foot-logo{height:22px;margin-bottom:12px}
/* Footer: nur noch Adresse + EasyAnfrage-Links, zwei Spalten */
.px-foot-grid{grid-template-columns:1.4fr 1fr}
@media(max-width:560px){.px-foot-grid{grid-template-columns:1fr}}
.ea-foot-claim{
  font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:16px;
}

/* ============================================================
   Platzhalter — bewusst sichtbar markiert
   ============================================================ */
.ea-ph{
  display:inline-block;font-family:var(--mono);font-size:.86em;font-weight:500;
  letter-spacing:.4px;color:var(--brand-deep);
  background:var(--ea-ph-bg);border:1px dashed rgba(0,174,181,.55);
  border-radius:8px;padding:1px 8px;white-space:nowrap;
}
.dark-block .ea-ph{color:#7fe3e8;border-color:rgba(127,227,232,.5);background:rgba(0,174,181,.16)}
.ea-ph-box{
  display:grid;place-items:center;text-align:center;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.5px;line-height:1.35;
  color:var(--brand-deep);background:var(--ea-ph-bg);
  border:1px dashed rgba(0,174,181,.55);border-radius:12px;
  width:64px;height:74px;flex:none;
}
.dark-block .ea-ph-box{color:#7fe3e8;border-color:rgba(127,227,232,.45);background:rgba(255,255,255,.06)}
.ea-ph-box.klein{width:54px;height:62px;font-size:9px;border-radius:10px}

/* ============================================================
   HERO
   ============================================================ */
.px-hero .hero-grid{align-items:start}
.px-hero .hero-copy{min-width:0}
/* Zwei CTAs nebeneinander: muessen umbrechen duerfen, sonst zwingt
   die nowrap-Geometrie der Buttons die Grid-Spalte breiter als das
   Viewport (horizontaler Scrollbalken auf dem Handy). */
.px-hero-cta{flex-wrap:wrap;gap:12px}
.px-hero-cta .btn{max-width:100%}
@media(max-width:560px){
  .px-hero-cta{width:100%}
  .px-hero-cta .btn{width:100%;justify-content:center;padding:0 18px}
}
@media(max-width:400px){
  .px-hero-cta .btn{font-size:13.5px;padding:0 14px}
}
.ea-hero-punkte{list-style:none;margin:26px 0 0;display:flex;flex-direction:column;gap:10px}
.ea-hero-punkte li{
  display:flex;align-items:flex-start;gap:11px;
  font-size:14.5px;line-height:1.5;color:var(--ink-soft);
}
.ea-tick{
  width:20px;height:20px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--brand-wash);color:var(--brand-deep);margin-top:1px;
}
.ea-tick svg{width:12px;height:12px}
.px-kpis .px-kpi-t{flex-direction:column;align-items:flex-start;gap:2px}
.px-kpis .px-kpi-s{font-size:10.5px;font-family:var(--mono);letter-spacing:.4px;text-transform:uppercase}

/* ---------- Gebietscheck-Karte (Frontend-Mock) ---------- */
.ck-frei .ea-check{padding:22px 24px 24px}
.ea-cform{display:flex;flex-direction:column;gap:14px;padding-top:4px}
.ea-cform[hidden]{display:none}
.ea-field{display:flex;flex-direction:column;gap:6px}
.ea-flabel{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--mid);
}
.ea-field input,.ea-field select{
  font-family:var(--font);font-size:15px;color:var(--ink);
  height:46px;padding:0 14px;width:100%;
  background:var(--paper);border:1px solid var(--hairline);border-radius:12px;
  transition:border-color .2s,box-shadow .2s;
  appearance:none;-webkit-appearance:none;
}
.ea-field select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23737373' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;
  padding-right:38px;
}
.ea-field input:focus,.ea-field select:focus{
  outline:none;border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-wash-soft);
}
.ea-field input::placeholder{color:#b0b0b0}
.ea-cbtn{width:100%;justify-content:center;height:48px;margin-top:2px}
.ea-cnote{font-size:12px;line-height:1.5;color:var(--mid)}

/* Land-Auswahl (Deutschland / Oesterreich / Schweiz) */
.ea-seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.ea-seg-btn{
  font-family:var(--font);font-size:13px;font-weight:500;color:var(--mid);
  height:42px;padding:0 4px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:12px;
  cursor:pointer;transition:border-color .2s,color .2s,background .2s,box-shadow .2s;
  white-space:nowrap;
}
.ea-seg-btn:hover{border-color:var(--brand);color:var(--ink)}
.ea-seg-btn[aria-pressed="true"]{
  border-color:var(--brand);color:var(--brand-deep);
  background:var(--brand-wash-soft);box-shadow:inset 0 0 0 1px var(--brand);
}
.ea-seg[aria-invalid="true"] .ea-seg-btn{border-color:#d97070}
@media(max-width:380px){.ea-seg-btn{font-size:12px}}

/* Zwischenzustand: "Wir pruefen Ihr Gebiet ..." */
.ea-checking[hidden]{display:none}
.ea-checking{
  display:flex;align-items:center;gap:12px;
  padding:26px 2px;animation:eaFade .3s cubic-bezier(.2,.8,.2,1);
}
.ea-checking-t{font-size:14.5px;font-weight:500;color:var(--ink)}
.ea-spin{
  width:18px;height:18px;flex:none;border-radius:50%;
  border:2px solid var(--brand-wash-soft);border-top-color:var(--brand);
  animation:eaSpin .7s linear infinite;
}
@keyframes eaSpin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ea-spin{animation:none;border-top-color:var(--brand)}}

.ea-cresult[hidden]{display:none}
.ea-cresult{animation:eaFade .45s cubic-bezier(.2,.8,.2,1)}
@keyframes eaFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ea-cres-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:4px 0 14px}
.ea-cres-badge{font-weight:500}
.ea-cres-back{
  background:none;border:none;font-family:var(--mono);font-size:11px;letter-spacing:.4px;
  color:var(--mid);text-decoration:underline;text-underline-offset:4px;padding:0;
}
.ea-cres-back:hover{color:var(--brand-deep)}
.ea-cres-t{font-size:14.5px;font-weight:500;letter-spacing:-.01em;margin-bottom:6px}
.ea-cres-sub{
  margin:16px 0 8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--mid);
}
.ea-cres-lead{border-top:1px solid var(--canvas);height:auto;padding:12px 2px}
/* CTA-Reihe unter dem Ergebnis — erscheint bewusst kurz NACH dem Ergebnis */
.ea-cres-cta{
  display:flex;flex-direction:column;gap:8px;margin-top:16px;
  animation:eaFade .45s cubic-bezier(.2,.8,.2,1) .9s backwards;
}
.ea-cres-cta .btn{width:100%;justify-content:center;height:46px}
@media(prefers-reduced-motion:reduce){.ea-cres-cta{animation:none}}
/* Weg zum Erstgespraech — falls jemand nach dem Auto-Scroll zurueckkommt */
.ea-cres-weiter{
  display:inline-flex;align-items:center;gap:7px;margin-top:14px;
  font-size:14px;font-weight:500;color:var(--brand-deep);
  border-bottom:1px solid rgba(0,174,181,.35);padding-bottom:2px;
  transition:color .2s,border-color .2s;
}
.ea-cres-weiter .arr{transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ea-cres-weiter:hover{color:var(--brand);border-color:var(--brand)}
.ea-cres-weiter:hover .arr{transform:translateX(3px)}
.ea-mock-hinweis{
  margin-top:14px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;
  text-transform:uppercase;color:#a3a3a3;
}
.ea-cres-weiter + .ea-mock-hinweis{margin-top:12px}
.dark-block .ea-mock-hinweis{color:#8c8c8c}
@media(prefers-reduced-motion:reduce){.ea-cres-weiter:hover .arr{transform:none}}

/* ============================================================
   PROBLEM — Abschlusszeile
   ============================================================ */
.ea-schluss{
  margin-top:42px;text-align:center;
  font-size:clamp(19px,2.2vw,26px);font-weight:600;letter-spacing:-.03em;color:var(--ink);
}
.ea-schluss.klein{
  margin-top:32px;font-size:15px;font-weight:400;letter-spacing:0;color:var(--mid);
  max-width:64ch;margin-left:auto;margin-right:auto;line-height:1.6;
}

/* ============================================================
   SYSTEM — Bento
   ============================================================ */
.ea-bmini{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--brand-deep);margin-bottom:8px;
}
.px-bcard:not(.px-bcard-breit) .px-bcopy h3{min-height:0}
.ea-eingang{--ein-h:64px}
.ea-eingang .ein-liste{height:calc(3 * var(--ein-h))}
.ea-eingang .ein-row{height:var(--ein-h)}
.ea-eingang .ein-av{width:32px;height:32px;font-size:11px}
.ea-eingang .ein-title{font-size:13.5px}
.px-bcard-breit .px-bvis .ea-eingang{width:100%}

/* ============================================================
   VERGLEICH / EINORDNUNG
   ============================================================ */
.vg-box .vs-col h3{flex-wrap:wrap;gap:10px}
.vg-ic{
  width:34px;height:34px;border-radius:10px;flex:none;display:grid;place-items:center;
  background:var(--canvas);color:var(--mid);
}
.vg-ic svg{width:18px;height:18px}
.vg-ic.brand{background:var(--brand-wash)}
.vg-ic img{max-height:16px;width:auto}
.ea-vgtag{
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.5px;
  text-transform:uppercase;color:var(--mid);
  background:var(--canvas);border-radius:999px;padding:4px 10px;
}
.ea-vgtag.on{background:var(--brand-wash);color:var(--brand-deep)}
.ea-vgtext{
  font-size:14.5px;line-height:1.6;color:var(--mid);
  margin:-6px 0 18px;max-width:44ch;
}
.vs-col.win .ea-vgtext{color:var(--ink-soft)}

/* ============================================================
   ABLAUF — Prozess-Spur mit scroll-getriebener Fortschrittslinie
   ------------------------------------------------------------
   Statt sieben gleichfoermiger Karten laeuft eine durchgehende
   Spur durch die Sektion. Sie faerbt sich beim Scrollen tuerkis
   und aktiviert die Schritte nacheinander. Die vier Schritte,
   die wir uebernehmen, liegen sichtbar in einer eigenen Bahn
   ("Unser Part") — die alten "wir"-Tags entfallen dadurch.
   Ohne JS ist alles lesbar: die Spur steht dann komplett
   gefuellt, alle Schritte sind voll sichtbar.
   ============================================================ */
.ea-fl{
  --ea-rail:27px;         /* x-Position der Spur */
  --ea-ein:74px;          /* Texteinzug rechts der Spur */
  --ea-bleed:24px;        /* Ueberstand der "Unser Part"-Bahn */
  position:relative;
  max-width:1000px;margin:0 auto;
}

/* ---------- Spur ---------- */
.ea-fl-rail{
  position:absolute;z-index:1;
  left:var(--ea-rail);top:14px;bottom:4px;
  width:2px;margin-left:-1px;border-radius:2px;
  background:linear-gradient(180deg,var(--hairline),var(--hairline) 92%,rgba(229,229,229,0));
}
.ea-fl-fill{
  position:absolute;inset:0;border-radius:2px;
  background:linear-gradient(180deg,var(--brand-hover),var(--brand) 40%,var(--brand-deep));
  transform:scaleY(var(--p,1));transform-origin:top;
  transition:transform .12s linear;
}
/* Laufender Kopf der Linie — nur bei aktivem JS sichtbar */
.ea-fl-head{
  position:absolute;left:50%;top:calc(var(--p,1) * 100%);
  width:9px;height:9px;border-radius:50%;
  background:var(--brand);
  box-shadow:0 0 0 5px var(--brand-wash),0 0 16px rgba(0,174,181,.5);
  transform:translate(-50%,-50%);
  opacity:0;transition:transform .12s linear,opacity .3s;
}
.ea-fl-live .ea-fl-head{opacity:1}
.ea-fl-live .ea-fl-head{transition:top .12s linear,opacity .3s}

/* ---------- Bahn-Abschnitte ---------- */
.ea-fl-phase{position:relative;padding:2px 0 6px}
.ea-fl-phase + .ea-fl-phase{margin-top:10px}
.ea-fl-phase-uns{margin:20px 0;padding:10px 0 16px}
.ea-fl-phase-uns::before{
  content:"";position:absolute;
  inset:0 calc(var(--ea-bleed) * -1);
  border-radius:var(--r-card);
  background:linear-gradient(180deg,rgba(0,174,181,.085),rgba(0,174,181,.028) 62%,rgba(0,174,181,.05));
  border:1px solid rgba(0,174,181,.2);
  box-shadow:0 1px 2px rgba(0,0,0,.03);
}

/* ---------- Bahn-Label ---------- */
.ea-fl-plabel{
  position:relative;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 0 10px var(--ea-ein);
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.9px;text-transform:uppercase;color:var(--mid);
}
.ea-fl-pname{color:var(--ink-soft)}
.ea-fl-pmeta{color:var(--mid);letter-spacing:.5px;text-transform:none;font-size:11px}
.ea-fl-pmeta::before{content:"·";margin-right:9px;color:var(--hairline)}
.ea-fl-phase-uns .ea-fl-pname,.ea-fl-phase-uns .ea-fl-pmeta{color:var(--brand-deep)}
.ea-fl-phase-uns .ea-fl-pmeta::before{color:rgba(0,174,181,.45)}
/* Marke des Bahn-Labels auf der Spur */
.ea-fl-tick{
  position:absolute;z-index:2;
  left:var(--ea-rail);top:50%;
  width:9px;height:9px;margin:-4.5px 0 0 -4.5px;
  border-radius:2px;background:var(--canvas);
  box-shadow:0 0 0 2px var(--paper),inset 0 0 0 2px var(--hairline);
  transform:rotate(45deg) scale(1);
  transition:background .35s,box-shadow .35s,transform .35s cubic-bezier(.2,.8,.2,1);
}
.ea-fl-plabel.on .ea-fl-tick{
  background:var(--brand);
  box-shadow:0 0 0 2px var(--paper),inset 0 0 0 2px var(--brand);
  transform:rotate(45deg) scale(1.18);
}
.ea-fl-phase-uns .ea-fl-tick{box-shadow:0 0 0 2px #fff,inset 0 0 0 2px rgba(0,174,181,.4)}

/* ---------- Schritte ---------- */
.ea-fl-list{list-style:none;margin:0;padding:0}
.ea-fl-step{
  position:relative;
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:6px 36px;align-items:start;
  padding:20px 0 20px var(--ea-ein);
}
.ea-fl-list li + li::after{
  content:"";position:absolute;left:var(--ea-ein);right:0;top:0;height:1px;
  background:var(--hairline);
}
.ea-fl-phase-uns .ea-fl-list li + li::after{background:rgba(0,174,181,.2)}

.ea-fl-dot{
  position:absolute;z-index:2;
  left:var(--ea-rail);top:29px;
  width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:var(--paper);
  box-shadow:inset 0 0 0 2px var(--hairline);
  display:grid;place-items:center;color:#fff;
  transition:box-shadow .4s cubic-bezier(.2,.8,.2,1),background .4s,transform .4s cubic-bezier(.2,.8,.2,1);
}
.ea-fl-step.on .ea-fl-dot{
  background:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand),0 0 0 5px var(--brand-wash);
  transform:scale(1.06);
}
.ea-fl-phase-uns .ea-fl-dot{background:#fff;box-shadow:inset 0 0 0 2px rgba(0,174,181,.35),0 0 0 4px rgba(255,255,255,.85)}
.ea-fl-phase-uns .ea-fl-step.on .ea-fl-dot{
  background:var(--brand);
  box-shadow:inset 0 0 0 2px var(--brand),0 0 0 5px rgba(255,255,255,.9);
}

.ea-fl-k{display:flex;flex-direction:column;gap:7px;min-width:0}
.ea-fl-n{
  font-size:11.5px;letter-spacing:.9px;color:var(--mid);
  transition:color .4s;
}
.ea-fl-step.on .ea-fl-n{color:var(--brand-deep)}
.ea-fl-step h3{
  font-size:19px;line-height:1.28;letter-spacing:-.028em;color:var(--ink);
  font-weight:600;
}
.ea-fl-step > p{
  font-size:14.5px;line-height:1.65;color:var(--mid);
  max-width:46ch;padding-top:2px;
}

/* ---------- Abschluss der Spur ---------- */
.ea-fl-cap{
  position:relative;padding:26px 0 0 var(--ea-ein);
  display:flex;align-items:center;height:52px;
}
.ea-fl-dot-ende{
  top:39px;width:26px;height:26px;margin:-13px 0 0 -13px;
  background:var(--canvas);box-shadow:inset 0 0 0 2px var(--hairline);
  color:transparent;
}
.ea-fl-dot-ende svg{width:13px;height:13px}
.ea-fl-cap.on .ea-fl-dot-ende{
  background:var(--brand);color:#fff;
  box-shadow:inset 0 0 0 2px var(--brand),0 0 0 6px var(--brand-wash);
  transform:scale(1);
}
.ea-fl-captext{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.9px;
  text-transform:uppercase;color:var(--mid);transition:color .4s;
}
.ea-fl-cap.on .ea-fl-captext{color:var(--brand-deep)}

/* ---------- Zustaende: nur mit aktivem JS gedimmt ---------- */
.ea-fl-live .ea-fl-step,
.ea-fl-live .ea-fl-plabel,
.ea-fl-live .ea-fl-cap{
  opacity:.4;transform:translateY(7px);
  transition:opacity .55s cubic-bezier(.2,.8,.2,1),transform .55s cubic-bezier(.2,.8,.2,1);
}
.ea-fl-live .ea-fl-step.on,
.ea-fl-live .ea-fl-plabel.on,
.ea-fl-live .ea-fl-cap.on{opacity:1;transform:none}
.ea-fl-live .ea-fl-fill{transform:scaleY(var(--p,0))}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .ea-fl-step{grid-template-columns:minmax(0,1fr);gap:8px}
  .ea-fl-step > p{max-width:60ch}
}
@media(max-width:560px){
  .ea-fl{--ea-rail:20px;--ea-ein:54px;--ea-bleed:14px}
  .ea-fl-step{padding:17px 0 17px var(--ea-ein)}
  .ea-fl-step h3{font-size:17.5px}
  .ea-fl-step > p{font-size:14px}
  .ea-fl-plabel{gap:7px;font-size:10.5px;padding-top:11px}
  .ea-fl-pmeta{font-size:10.5px}
  .ea-fl-pmeta::before{margin-right:6px}
  .ea-fl-phase-uns{margin:16px 0}
  .ea-fl-captext{font-size:10.5px}
}

@media(prefers-reduced-motion:reduce){
  .ea-fl-fill,.ea-fl-head,.ea-fl-dot,.ea-fl-tick,
  .ea-fl-live .ea-fl-step,.ea-fl-live .ea-fl-plabel,.ea-fl-live .ea-fl-cap{transition:none}
}
.ea-fl-fertig .ea-fl-step,
.ea-fl-fertig .ea-fl-plabel,
.ea-fl-fertig .ea-fl-cap{opacity:1;transform:none}

/* ============================================================
   SPLIT-SEKTIONEN (Vorqualifizierung, Ueber uns)
   ============================================================ */
.ea-split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(28px,4vw,64px);align-items:center;
}
.ea-split-eng{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)}
.ea-split-copy h2{margin:16px 0 16px}
.ea-split-copy .lead{font-size:16px;max-width:52ch}
.ea-liste{list-style:none;margin:26px 0 0;display:grid;gap:11px}
.ea-liste li{
  display:flex;align-items:flex-start;gap:12px;
  font-size:15px;line-height:1.5;color:var(--ink-soft);
}
.ea-betont{
  margin-top:26px;padding:18px 20px;border-radius:16px;
  background:var(--brand-wash-soft);border:1px solid rgba(0,174,181,.22);
  font-size:14.5px;line-height:1.6;color:var(--ink-soft);max-width:56ch;
}
@media(max-width:900px){
  .ea-split,.ea-split-eng{grid-template-columns:1fr;gap:36px}
}

/* ---------- Beispiel-Anfrage-Karte ---------- */
.ea-lead{max-width:520px;margin-left:auto;width:100%;padding:24px}
.ea-lead-kopf{height:auto;padding:14px 2px;border-top:1px solid var(--canvas);margin-bottom:6px}
.ea-lead .uc-row .sb{text-align:right;max-width:60%}
.ea-lead-foot{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
@media(max-width:900px){.ea-lead{margin-left:0}}

/* ============================================================
   BRANCHEN-KACHELN
   ============================================================ */
.ea-gewerke{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ea-gcard{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  background:var(--paper);border:1px solid var(--hairline);border-radius:18px;
  box-shadow:var(--sh-card);padding:20px 22px;
  font-size:15.5px;font-weight:500;letter-spacing:-.015em;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .25s,color .2s;
}
/* Reine Uebersicht, nicht klickbar — daher kein Hover-Effekt */
@media(max-width:900px){.ea-gewerke{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.ea-gewerke{grid-template-columns:1fr}}

/* ============================================================
   UEBER EASYPLUS — Kennzahlen
   ============================================================ */
.ea-ep-logo{height:24px;width:auto;margin-top:28px;opacity:.85}
.ea-stats{display:grid;gap:14px}
.ea-stat{
  background:var(--paper);border:1px solid var(--hairline);border-radius:var(--r-card);
  box-shadow:var(--sh-card);padding:24px 26px;
}
.ea-stat-v{
  display:block;font-size:clamp(34px,4vw,46px);font-weight:600;
  letter-spacing:-.05em;line-height:1.05;color:var(--brand-deep);
}
.ea-stat-v b{font-weight:600}
.ea-stat-l{display:block;margin-top:6px;font-size:15px;color:var(--ink-soft)}
.ea-stat-q{
  display:block;margin-top:10px;font-family:var(--mono);font-size:10px;
  letter-spacing:.5px;text-transform:uppercase;color:var(--mid);
}

/* ============================================================
   TERMIN — dunkle CTA-Karte mit Kalender-Mock
   ============================================================ */
.ea-ctacard{grid-template-columns:1.02fr .98fr;min-height:0}
.ea-eyebrow-hell{color:#7fe3e8;margin-bottom:14px}
.ea-ctacard .px-ctacopy h2{max-width:16ch}
.ea-ansprech{display:flex;align-items:center;gap:14px;margin:6px 0 26px}
.ea-an{display:block;font-size:14.5px;font-weight:500;color:#fafafa}
.ea-ar{display:block;margin-top:4px;font-size:12.5px;color:#a3a3a3}
.ea-kalender{
  display:flex;align-items:center;justify-content:center;
  padding:clamp(26px,3vw,44px);min-width:0;
}
.ea-kal-card{width:100%;max-width:400px;padding:22px}
.ea-kal-grid{margin:4px 0 16px}
.ea-slots{margin-top:0}
.ea-slots .slot{border:none;background:var(--paper);transition:background .2s,color .2s,box-shadow .2s}
.ea-slots .slot:hover{background:var(--canvas)}
.ea-slots .slot.on{background:var(--brand);color:#fff;box-shadow:none}
.ea-kal-btn{width:100%;justify-content:center;margin-top:16px}
@media(max-width:900px){
  .ea-ctacard{grid-template-columns:1fr}
  .ea-ctacard .px-ctacopy{order:1}
  .ea-kalender{order:2;padding:0 clamp(20px,5vw,36px) clamp(28px,5vw,40px)}
  .ea-kal-card{max-width:none}
}

/* ============================================================
   SCHLUSS-CTA
   ============================================================ */
.ea-final{
  text-align:center;max-width:660px;margin:0 auto;
  display:flex;flex-direction:column;align-items:center;
}
.ea-final h2{margin-bottom:14px}
.ea-final .lead{margin-bottom:28px}
.ea-final .px-micro{max-width:52ch}

/* ============================================================
   FOOTER
   ============================================================ */
.ea-foot-ansprech{align-items:center}
.ea-foot-ep{
  display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;color:var(--mid);
}
.ea-foot-ep:hover{color:var(--brand-deep)}
.px-ansprech .px-an{display:block;font-size:14px;font-weight:500}
.px-ansprech .px-ar{display:block;margin-top:4px;font-size:12.5px;color:var(--mid)}

/* ============================================================
   Kleinigkeiten / Responsive
   ============================================================ */
.px-band-kopf{justify-content:center;margin-bottom:22px}
@media(max-width:980px){
  .px-hero .hero-grid{grid-template-columns:1fr}
  .ck-frei{max-width:540px;margin:8px auto 0}
}
@media(max-width:560px){
  .ea-lead{padding:20px}
  .ea-lead .uc-row{flex-direction:column;align-items:flex-start;gap:2px}
  .ea-lead .uc-row .sb{max-width:none;text-align:left}
  .ea-stat{padding:20px 22px}
}

@media(prefers-reduced-motion:reduce){
  .ea-cresult{animation:none}
}

/* ============================================================
   Korrekturen nach dem Browsertest
   ============================================================ */

/* Bento-Spalten duerfen unter ihre min-content-Breite schrumpfen,
   sonst schieben die Mock-Karten die Spalte auf dem Handy ueber
   die Viewport-Breite hinaus. */
.px-bento{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.px-bento{grid-template-columns:minmax(0,1fr)}}
.px-bcard,.px-bcard-breit{min-width:0}
.px-bcard .px-bvis,.px-bcard .px-bcopy{min-width:0}

/* Die Visual-Spalte der schmalen Bento-Karten darf mitwachsen,
   damit nichts abgeschnitten wird. */
.px-bcard:not(.px-bcard-breit){grid-template-rows:auto auto}
.px-bcard:not(.px-bcard-breit) .px-bvis{height:auto;min-height:158px}

/* Die Haken-Liste der Referenz blendet sich erst mit .lb-on ein.
   Diese Sektion hat keinen eigenen Trigger, also steht sie fix
   im Endzustand. */
.px-bcard .lb-ci{opacity:1;transform:none}
.px-bcard .lb-ci span{background:var(--brand);color:#fff;box-shadow:none}

/* Wortmarke statt quadratischem Icon im Vergleichskopf */
.vg-ic.brand{width:auto;min-width:34px;padding:0 11px}
.vg-ic.brand img{max-height:12px}
.vg-ic:not(.brand) img{max-height:13px;opacity:.6}

/* Helle Logovariante auf dem dunklen CTA-Block */
/* .px-ctacopy ist ein Flex-Container: ohne align-self wuerde das Logo
   auf volle Breite gedehnt. */
.ea-cta-logo{height:20px;width:auto;align-self:flex-start;margin-bottom:18px}

/* Kalender-Raster nicht ueber die Karte ziehen */
.ea-kal-grid{max-width:300px}

/* Ueberschriften ausgewogen umbrechen */
h1,h2,.px-head h2,.ea-final h2{text-wrap:balance}
.vg-ic.brand{width:34px;padding:0;color:var(--brand-deep)}

/* Sehr schmale Geraete (ab ca. 320px): Problemkarten und der
   Eingangs-Mock duerfen unter ihre min-content-Breite schrumpfen. */
.px-pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.px-pgrid{grid-template-columns:minmax(0,1fr)}}
.px-pcard,.px-pvis,.px-pvis .pm{min-width:0}
.px-pvis .pm-zeile{min-width:0}
@media(max-width:420px){
  .ea-eingang .ein-meta .ein-zeit,
  .ea-eingang .ein-meta .ein-sep2{display:none}
}

/* v1b: Hero-CTA 10 % kleiner */
.px-hero-cta .btn{height:54px;padding:0 32px;font-size:20px;border-radius:18px}

/* v1c: Hero-Buttons ohne schwere Schatten, weicher Übergang zur nächsten Sektion */
.px-hero-cta .btn{box-shadow:0 2px 10px -4px rgba(0,174,181,.35)}
.px-hero-cta .btn-ghost{box-shadow:inset 0 0 0 1px var(--hairline)}
.px-hero-cta .btn:hover{box-shadow:0 6px 18px -8px rgba(0,174,181,.45)}
.px-hero{padding-bottom:96px}
@media(max-width:760px){.px-hero{padding-bottom:64px}}

/* ============================================================
   Live-Ausbau: Gebietscheck mit Backend, Calendly, Rechtsseiten
   ============================================================ */

/* ---------- Honeypot: fuer Menschen unsichtbar, fuer Bots ein Koeder ---------- */
.ea-hp{
  position:absolute;left:-9999px;top:auto;width:1px;height:1px;
  overflow:hidden;opacity:0;pointer-events:none;
}

/* ---------- Ergebnis-Karte: drei ehrliche Schritte statt Fake-Balken ---------- */
.ea-cres-steps{
  list-style:none;margin:14px 0 0;padding:0;
  display:flex;flex-direction:column;gap:10px;
}
.ea-cres-steps li{
  display:flex;gap:10px;align-items:flex-start;
  font-size:13px;line-height:1.5;color:#5a5a5a;
}
.ea-cres-steps li span{
  flex:0 0 auto;width:19px;height:19px;border-radius:50%;
  display:grid;place-items:center;margin-top:1px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  color:var(--brand-deep);background:var(--ea-ph-bg);
  border:1px solid rgba(0,174,181,.28);
}
.ea-cres-steps li b{color:var(--ink);font-weight:500}
.ea-cres-text{
  margin:12px 0 2px;font-size:13.5px;line-height:1.6;color:#5a5a5a;
}

/* ---------- Calendly-Inline-Embed ---------- */
.ea-cal-embed{
  width:100%;min-height:620px;height:620px;
  margin:6px 0 0;border-radius:12px;overflow:hidden;
  background:var(--canvas);
}
.ea-cal-embed[hidden]{display:none}
.ea-cal-fallback{padding-top:4px}
.ea-cal-fallback[hidden]{display:none}
.ea-cal-ftext{
  font-size:13.5px;line-height:1.55;color:#5a5a5a;margin:2px 0 16px;
}
@media(max-width:900px){
  .ea-cal-embed{min-height:540px;height:540px}
}

/* ---------- Footer: Rechtslinks in der Fusszeile ---------- */
.ea-foot-rechts{display:inline-flex;gap:18px;align-items:center}
.ea-foot-rechts a{color:inherit;text-decoration:none;transition:color .2s ease}
.ea-foot-rechts a:hover{color:var(--brand)}

/* ============================================================
   Rechtsseiten (impressum.html, datenschutz.html)
   ============================================================ */
.ea-rechts-hero{
  padding:calc(var(--nav-h,72px) + 96px) 0 34px;
  background:var(--paper);
}
.ea-rechts-hero .eyebrow,
.ea-rechts-hero .px-eyebrow{margin-bottom:14px}
.ea-rechts-hero h1{
  font-size:clamp(34px,5vw,54px);line-height:1.06;letter-spacing:-.035em;
  font-weight:600;
}
.ea-rechts-meta{
  font-family:var(--mono);font-size:12px;letter-spacing:.3px;
  color:#7a7a7a;margin-top:16px;
}
.ea-rechts{padding:8px 0 clamp(60px,8vw,110px)}
.ea-rechts .prose{max-width:74ch;margin:0}
.ea-rechts .prose h2{
  font-size:clamp(19px,2.2vw,23px);line-height:1.25;letter-spacing:-.02em;
  font-weight:600;margin:44px 0 12px;color:var(--ink);
}
.ea-rechts .prose h2:first-child{margin-top:0}
.ea-rechts .prose h3{
  font-size:16px;line-height:1.3;letter-spacing:-.01em;
  font-weight:600;margin:28px 0 8px;color:var(--ink);
}
.ea-rechts .prose p,
.ea-rechts .prose li{
  font-size:15px;line-height:1.72;color:#4a4a4a;margin:0 0 12px;
}
.ea-rechts .prose ul{margin:0 0 14px;padding-left:20px}
.ea-rechts .prose a{color:var(--brand-deep);text-decoration:underline;text-underline-offset:2px;word-break:break-word}
.ea-rechts .prose a:hover{color:var(--brand)}
.ea-rechts-hin{
  margin:34px 0 0;padding:16px 18px;border-radius:12px;
  background:var(--ea-ph-bg);border:1px solid rgba(0,174,181,.24);
  font-size:13.5px;line-height:1.6;color:var(--brand-deep);
}
.ea-rechts-nav{
  display:flex;flex-wrap:wrap;gap:10px;margin:0 0 34px;
}
.ea-rechts-nav a{
  font-family:var(--mono);font-size:11.5px;letter-spacing:.4px;text-transform:uppercase;
  padding:7px 13px;border-radius:999px;border:1px solid rgba(10,10,10,.12);
  color:#5a5a5a;text-decoration:none;transition:all .2s ease;
}
.ea-rechts-nav a:hover{border-color:var(--brand);color:var(--brand-deep)}
.ea-rechts-nav a[aria-current="page"]{
  background:var(--ink);border-color:var(--ink);color:#fafafa;
}

/* Die Basis setzt `nav{position:fixed}` — die Sprungleiste auf den
   Rechtsseiten ist aber ein normales Element im Textfluss. */
.ea-rechts-nav{
  position:static;top:auto;left:auto;right:auto;z-index:auto;
  background:none;backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:0;transition:none;
}
.ea-rechts{background:var(--paper)}

/* Weisse Karte im dunklen Block: `.dark-block{color:#fafafa}` vererbt sonst
   Weiss in die Karte, wodurch der Kartentitel fast unsichtbar wird. */
.dark-block .uicard{color:var(--ink)}
.dark-block .uicard .uc-label{color:var(--mid)}

/* v1e: neues Logo (kompakteres Seitenverhältnis) groesser darstellen */
#nav .nav-logo img{height:30px}
@media(max-width:560px){#nav .nav-logo img{height:26px}}
.ea-foot-logo{height:34px}
.ea-cta-logo{height:32px}

/* v1f: Hero luftiger — mehr Abstand zur Nav und zwischen den Elementen */
.px-hero{padding-top:184px}
.px-hero .hero-copy .lead{margin-top:28px}
.px-hero-cta{margin-top:40px;gap:16px}
.px-hero .hero-grid{gap:clamp(40px,5vw,88px)}
@media(max-width:1100px){.px-hero{padding-top:160px}}
@media(max-width:760px){.px-hero{padding-top:132px}.px-hero-cta{margin-top:30px}}

/* v1g: Calendly einfacher bedienbar — volle Breite unter der Copy,
   damit die grosse Kalenderansicht statt der gequetschten Mobilansicht laedt */
.ea-ctacard.cal-breit{display:flex;flex-direction:column}
.ea-ctacard.cal-breit .px-ctacopy{padding-bottom:8px}
.ea-ctacard.cal-breit .ea-kalender{padding-top:0}
.ea-ctacard.cal-breit .ea-kal-card{max-width:none;padding:14px}
.ea-ctacard.cal-breit .uc-head{padding:8px 10px 12px}
.ea-ctacard.cal-breit .ea-cal-embed{height:700px;min-height:700px;margin:0}
@media(max-width:900px){
  .ea-ctacard.cal-breit .ea-cal-embed{height:760px;min-height:760px}
}

/* v1h: Calendly inline wie auf Onepage — nur Kalender, kompakte Karte */
.ea-kal-card{max-width:560px}
.ea-cal-embed{height:640px;min-height:640px;margin:0;background:#fff}
@media(max-width:900px){.ea-cal-embed{height:620px;min-height:620px}}

/* ============================================================
   Cookie-Banner
   ============================================================ */
.ck{position:fixed;left:16px;right:16px;bottom:16px;z-index:300;display:flex;justify-content:flex-start;pointer-events:none}
.ck[hidden]{display:none}
.ck-in{
  pointer-events:auto;max-width:480px;background:#fff;
  border:1px solid var(--hairline);border-radius:16px;padding:20px 20px 18px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.35);
  animation:ckAuf .45s cubic-bezier(.22,1,.36,1) both;
}
@keyframes ckAuf{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.ck-t{font-family:var(--mono);font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--brand-deep);margin:0 0 8px}
.ck-tx{font-size:14px;line-height:1.55;color:var(--ink-soft);margin:0 0 14px}
.ck-tx a{color:var(--brand-deep);text-decoration:underline}
.ck-opts{margin:0 0 14px;display:grid;gap:8px}
.ck-opt{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-soft);cursor:pointer}
.ck-opt input{accent-color:var(--brand);width:15px;height:15px;flex:none}
.ck-opt .ck-fix{color:var(--mid)}
.ck-btns{display:flex;flex-wrap:wrap;gap:8px}
.ck-btns .btn{font-size:13px;padding:9px 14px;border:0;cursor:pointer;font-family:var(--font)}
@media(max-width:560px){
  .ck{left:10px;right:10px;bottom:10px}
  .ck-in{max-width:none;width:100%}
  .ck-btns .btn{flex:1 1 auto;justify-content:center}
}

/* ============================================================
   Mobile-Feinschliff — bewusst am Dateiende, damit diese Regeln
   die weiter oben stehenden Desktop-Werte (u. a. .px-hero-cta
   .btn mit height:54px/font-size:20px) sicher ueberschreiben
   ============================================================ */
.nur-mobil{display:none}
@media(max-width:640px){
  .nur-desktop{display:none}
  .nur-mobil{display:inline}
}
@media(max-width:760px){
  .px-hero-cta .btn,
  .px-mitte .btn,
  .ea-final .btn{
    height:auto;min-height:50px;
    white-space:normal;line-height:1.3;text-align:center;justify-content:center;
    font-size:15.5px;padding:12px 18px;
  }
  .px-hero-cta .btn{width:100%}
}

/* Cookie-Banner: hidden-Attribut darf nicht von display-Regeln
   ueberschrieben werden (Erstansicht zeigte sonst alle Ebenen) */
.ck-opts[hidden]{display:none}
.ck-btns .btn[hidden]{display:none}

/* Cookie-Banner kompakt auf kleinen Screens */
@media(max-width:560px){
  .ck-in{padding:14px 14px 12px;border-radius:14px}
  .ck-t{margin-bottom:6px}
  .ck-tx{font-size:12.5px;line-height:1.45;margin-bottom:10px}
  .ck-opts{margin-bottom:10px;gap:6px}
  .ck-opt{font-size:12.5px}
  .ck-btns{gap:6px}
  .ck-btns .btn{font-size:12.5px;padding:8px 10px}
}