/* ===========================================================
   Hello Expansion – Digitale Visitenkarte
   Geteiltes Design für card.html + editor.html
   =========================================================== */
:root{
  --navy:#0a2150;
  --navy-2:#143a7a;
  --ink:#1d1d1f;
  --muted:#86868b;
  --line:#ededf0;
  --bg:#f5f5f7;
  --card:#ffffff;
  --accent:#0071e3;
  --radius:20px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Inter",Roboto,Helvetica,Arial,sans-serif;
  background:#fff;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}

.wrap{
  width:100%;max-width:760px;min-height:100vh;margin:0 auto;
  background:#fff;position:relative;overflow:hidden;
}

/* ---- Brand-Header: Logo mittig, groß, auf Weiß (der eigentliche Header) ---- */
.brandbar{background:#fff;text-align:center;padding:34px 28px 26px}
.brandbar img{height:64px;width:auto;display:inline-block}

/* ---- Banner (Karten-Grafik) ---- */
.banner{position:relative;width:100%;height:185px;line-height:0;background:#fff;overflow:hidden;z-index:0}
.banner .banner-map{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}

/* ---- Weißes Blatt – bündig unter dem Banner, deckt es NICHT ab ---- */
/* display:flow-root verhindert margin-collapsing, damit der negative Avatar-Margin
   NICHT das ganze weiße Blatt nach oben über das Banner zieht. */
.sheet{
  position:relative;z-index:1;background:#fff;
  margin-top:0;display:flow-root;
}

/* ---- Avatar – ragt allein ins Banner, weißer Ring ---- */
.avatar-wrap{position:relative;z-index:2;margin-top:-52px;padding:0 28px;text-align:center}
.avatar{
  width:160px;height:160px;border-radius:50%;margin:0 auto;
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-2) 100%);
  color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:54px;font-weight:600;letter-spacing:.5px;
  overflow:hidden;
  border:7px solid #fff;
  box-shadow:0 8px 22px rgba(10,33,80,.18);
}
/* mit Foto: heller Hintergrund, damit kein dunkler Rand durchscheint */
.avatar.has-photo{background:#fff}
.avatar img{display:block;width:101%;height:101%;object-fit:cover;border-radius:0}

/* ---- Identität – Name als großer Anker ---- */
.id{text-align:center;padding:18px 28px 0}
.id h1{font-size:30px;font-weight:600;letter-spacing:-.5px}
.id .role{color:var(--accent);font-weight:500;font-size:16px;margin-top:8px}
.id .company{color:#a0a0a8;font-size:11px;margin-top:6px;text-transform:uppercase;letter-spacing:1.4px;font-weight:400}

/* ---- Buttons (wazzl-Proportionen): hell „speichern" + navy „austauschen" ---- */
.cta{display:flex;flex-direction:column;gap:11px;padding:30px 28px 0}
.save,.exchange{
  display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  border:none;padding:16px;border-radius:16px;
  font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
  transition:transform .12s ease,filter .15s ease;
}
.save{background:var(--bg);color:var(--ink)}
.exchange{background:var(--navy);color:#fff}
.save:active,.exchange:active{transform:scale(.985)}
.save svg,.exchange svg{width:19px;height:19px}

/* ---- Section-Titel ---- */
.sec-title{
  font-size:11.5px;font-weight:600;letter-spacing:.7px;text-transform:uppercase;
  color:var(--muted);padding:34px 30px 14px;
}

/* ---- Portal-Kacheln (Brand-Logos) – flach & clean, alle in einer Reihe ---- */
.portals{
  display:flex;flex-wrap:wrap;justify-content:center;gap:16px 6px;
  padding:36px 18px 0;
}
.portal{
  text-decoration:none;text-align:center;width:54px;
  display:flex;flex-direction:column;align-items:center;gap:7px;
}
.portal .badge{
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  transition:transform .12s ease;
}
.portal:active .badge{transform:scale(.9)}
.portal .badge svg{width:23px;height:23px;fill:currentColor}
.portal span{font-size:10px;font-weight:400;color:var(--muted);line-height:1.2}

/* ---- Detail-Liste als gefüllte Karten (wazzl-Stil) ---- */
.details{padding:4px 28px 0;display:flex;flex-direction:column;gap:10px}
.row{
  display:flex;align-items:center;gap:14px;
  padding:14px 16px;background:var(--bg);border-radius:15px;
  text-decoration:none;color:inherit;
}
.row .ic{
  width:42px;height:42px;flex:0 0 42px;border-radius:12px;
  background:#fff;display:flex;align-items:center;justify-content:center;
}
.row .ic svg{width:19px;height:19px;color:var(--navy)}
.row .t{min-width:0}
.row .t .lbl{font-size:12.5px;color:var(--muted)}
.row .t .val{font-size:16px;font-weight:500;margin-top:2px;word-break:break-word}

/* ---- Footer ---- */
.foot{padding:48px 32px 48px;text-align:center}
.foot img{height:24px;opacity:.55;margin-bottom:10px}
.foot p{color:var(--muted);font-size:12px;line-height:1.6}
.foot a{color:var(--muted)}
.foot-legal{margin-top:8px;font-size:12px}
.foot-legal a{color:var(--accent);text-decoration:none}

/* ---- Lead-Formular ---- */
.lead{padding:4px 32px 0;display:flex;flex-direction:column;gap:10px}
.lead-intro{color:var(--muted);font-size:13.5px;margin-bottom:2px}
.lead input,.lead textarea{
  width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;
  font-size:15px;font-family:inherit;background:var(--bg);color:var(--ink);
}
.lead input:focus,.lead textarea:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px rgba(0,113,227,.12)}
.lead-two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lead textarea{resize:vertical}
.lead .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.lead-consent{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;color:var(--muted);line-height:1.45;text-align:left;margin-top:2px}
.lead-consent input{margin-top:2px;flex:0 0 auto;width:16px;height:16px}
.lead-consent a{color:var(--accent)}
.lead button{
  margin-top:4px;background:var(--navy);color:#fff;border:none;border-radius:13px;
  padding:15px;font-size:16px;font-weight:600;cursor:pointer;font-family:inherit;
}
.lead button:disabled{opacity:.6}
.lead-ok{margin:12px 28px 0;background:#e8f7ee;color:#1c7a44;border-radius:12px;padding:14px 16px;font-size:14.5px;text-align:center;font-weight:500}

/* leerer Zustand */
.empty{padding:80px 28px;text-align:center;color:var(--muted);font-size:15px;line-height:1.6}