/* Landing-Page Hero-Section
   Namespace: .landing-page__hero-* (BEM, an deepvalue.css angelehnt)
   Referenziert ausschliesslich Tokens aus colors.css (--pl-*) und
   fontsfaces.css (Open Sans). Keine ungescopten Tag-Selektoren (h1, body),
   da diese Datei global auf jeder Seite geladen wird. */

.landing-page__hero-section{
  box-sizing:border-box;
}
.landing-page__hero-section,
.landing-page__hero-section *{
  box-sizing:border-box;
  /* Blocksy setzt font-family/-weight direkt auf body,h1-h6,label,...
     (siehe main.min.css). Direkt auf jedes Element erzwingen statt auf
     Vererbung zu vertrauen, sonst gewinnt Blocksy dort, wo es selbst
     ein Element direkt anspricht. */
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

.landing-page__mockup-note{
  background:#fff8e8;
  border-bottom:1px solid #f0ddb0;
  color:#7a5b16;
  font-size:13px;
  text-align:center;
  padding:8px 16px;
}

/* Nav (nur fuer Mockup-Vorschau-Kontext, nicht der echte Blocksy-Header) */
.landing-page__nav,
.landing-page__nav *{
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}
.landing-page__nav{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:20px 48px;
  max-width:1280px !important;
  margin:0 auto !important;
}
.landing-page__nav-logo{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:700;
  font-size:18px;
  color:var(--pl-blue);
  letter-spacing:0.2px;
}
.landing-page__nav-logo svg{width:28px;height:28px;flex-shrink:0;}
.landing-page__nav-links{
  list-style:none;
  display:flex;
  gap:32px;
  margin:0;
  padding:0;
  font-size:14px;
  font-weight:600;
  color:var(--font-color);
  letter-spacing:0.3px;
}
.landing-page__nav-links a{color:inherit;text-decoration:none;}
.landing-page__nav-cta{
  background:var(--pl-blue);
  color:#fff;
  padding:10px 20px;
  border-radius:8px;
  font-size:14px;
  font-weight:700;
  text-decoration:none;
  white-space:nowrap;
  transition:background-color .15s ease, transform .15s ease;
}
/* Blocksy faerbt Links beim Hover global blau ein (Text UND Hintergrund
   waeren dann beide blau, Text verschwindet) - eigenen Hover-Zustand
   erzwingen, Text bleibt weiss. */
.landing-page__nav-cta:hover{
  color:#fff;
  background:#003366;
}

/* Hero */
.landing-page__hero-section{
  max-width:1280px !important;
  margin:0 auto !important;
  padding:56px 48px 0px;
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:56px;
  align-items:center;
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  color:var(--pl-dark);
  background:#fff;
}

.landing-page__hero-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:var(--pl-light);
  border:1px solid #e4e9f2;
  color:var(--pl-blue);
  font-size:13px;
  font-weight:700;
  padding:6px 14px;
  border-radius:999px;
  margin-bottom:20px;
}
.landing-page__hero-eyebrow-dot{width:7px;height:7px;border-radius:50%;background:var(--pl-gold);display:inline-block;}

.landing-page__hero-title{
  font-size:44px;
  line-height:1.14;
  letter-spacing:-0.5px;
  margin:0 0 20px;
  color:var(--pl-blue);
  font-weight:800;
}
.landing-page__hero-title-accent{color:var(--pl-gold);}

.landing-page__hero-subhead{
  font-size:18px;
  line-height:1.6;
  color:var(--font-color);
  margin:0 0 32px;
  max-width:520px;
}

.landing-page__hero-cta-row{
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.landing-page__hero-btn-primary{
  background:var(--pl-blue);
  color:#fff;
  padding:15px 28px;
  border-radius:10px;
  font-weight:700;
  font-size:16px;
  text-decoration:none;
  box-shadow:0 8px 20px rgba(0,64,128,0.22);
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* Blocksy faerbt Links beim Hover global blau ein (Text UND Hintergrund
   waeren dann beide blau, Text verschwindet) - eigenen Hover-Zustand
   erzwingen, Text bleibt weiss, plus spuerbares Lift-Feedback. */
.landing-page__hero-btn-primary:hover{
  color:#fff;
  background:#003366;
  box-shadow:0 12px 26px rgba(0,64,128,0.32);
  transform:translateY(-2px);
}
.landing-page__hero-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  color:var(--pl-blue);
  font-weight:700;
  font-size:15px;
  text-decoration:none;
}
.landing-page__hero-play-circle{
  width:36px;height:36px;border-radius:50%;
  background:var(--pl-light);
  border:1px solid #e4e9f2;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}

.landing-page__hero-trust-row{
  display:flex;
  flex-wrap:wrap;
  gap:22px 28px;
  padding-top:24px;
  border-top:1px solid #e4e9f2;
}
.landing-page__hero-trust-item{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13.5px;
  font-weight:600;
  color:var(--font-color);
}
.landing-page__hero-trust-item svg{width:16px;height:16px;color:var(--pl-blue);flex-shrink:0;}

/* Visual side */
.landing-page__hero-visual{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.landing-page__hero-visual-bg{
  position:absolute;
  width:420px;height:420px;
  background:radial-gradient(circle at 30% 30%, rgba(0,64,128,0.08), rgba(212,160,23,0.05) 60%, transparent 70%);
  border-radius:50%;
}

/* Self-Hosting-Stempel - sekundaeres Vertrauenssignal fuer die Zielgruppe,
   der Self-Hosting/Datenhoheit wichtig ist, ohne die Hero-Kernbotschaft
   zu verwaesseren. Rotiert, doppelter Rahmen = Siegel-Optik. */
.landing-page__hero-stamp{
  position:absolute;
  top:-46px;
  left:-44px;
  width:112px;
  height:112px;
  border-radius:50%;
  background:#fff;
  border:2px solid var(--pl-gold);
  box-shadow:
    0 12px 26px -8px rgba(0,0,0,0.25),
    inset 0 0 0 4px rgba(212,160,23,0.12);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  transform:rotate(-10deg);
  z-index:4;
  gap:3px;
  animation:landing-page__hero-stamp-wobble 4s ease-in-out infinite;
  text-decoration:none;
  cursor:pointer;
  transition:box-shadow .2s ease;
}
.landing-page__hero-stamp:hover{
  box-shadow:
    0 16px 32px -8px rgba(0,0,0,0.32),
    inset 0 0 0 4px rgba(212,160,23,0.2);
}

@keyframes landing-page__hero-stamp-wobble{
  0%, 100%{transform:rotate(-10deg);}
  50%{transform:rotate(10deg);}
}
.landing-page__hero-stamp img{
  width:34px;
  height:34px;
  margin-bottom:2px;
}
.landing-page__hero-stamp-line1{
  font-size:10.5px;
  font-weight:800;
  letter-spacing:0.4px;
  color:var(--pl-blue);
  text-transform:uppercase;
  line-height:1.15;
}
.landing-page__hero-stamp-line2{
  font-size:8.5px;
  font-weight:700;
  letter-spacing:0.3px;
  color:var(--pl-gold);
  text-transform:uppercase;
  line-height:1.15;
}

@media (max-width: 900px){
  .landing-page__hero-stamp{top:-10px;left:8px;width:92px;height:92px;}
  .landing-page__hero-stamp-line1{font-size:9px;}
  .landing-page__hero-stamp-line2{font-size:7.5px;}
}
.landing-page__hero-phone{
  position:relative;
  width:270px;
  background:#fff;
  border-radius:44px;
  border:10px solid var(--pl-blue);
  box-shadow:
    0 30px 60px -20px rgba(0,64,128,0.35),
    inset 0 0 0 1px rgba(255,255,255,0.15),
    inset 0 1px 2px rgba(255,255,255,0.35);
  overflow:hidden;
}
/* Seitentasten - kleine Ausbuchtungen am Rahmen, fuer Realismus */
.landing-page__hero-phone::before,
.landing-page__hero-phone::after{
  content:"";
  position:absolute;
  background:var(--pl-blue);
  z-index:3;
}
.landing-page__hero-phone::before{
  /* Lautstaerkewippe links */
  left:-13px; top:78px;
  width:3px; height:46px;
  border-radius:2px 0 0 2px;
  box-shadow:0 60px 0 -2px var(--pl-blue);
}
.landing-page__hero-phone::after{
  /* Standby-Taste rechts */
  right:-13px; top:96px;
  width:3px; height:64px;
  border-radius:0 2px 2px 0;
}
.landing-page__hero-phone-island{
  position:absolute;
  top:14px;left:50%;transform:translateX(-50%);
  width:70px;height:22px;
  background:#0b0f14;
  border-radius:14px;
  z-index:2;
}
.landing-page__hero-phone-statusbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 20px 0;
  font-size:11px;
  font-weight:700;
  color:var(--pl-dark);
}
.landing-page__hero-phone-statusbar-icons{
  display:flex;
  align-items:center;
  gap:4px;
}
.landing-page__hero-phone-statusbar-icons svg{width:14px;height:10px;}
.landing-page__hero-phone-screen{padding:20px 16px 24px;}
.landing-page__hero-phone-title{font-weight:800;font-size:20px;color:var(--pl-blue);margin-bottom:12px;}
.landing-page__hero-phone-toggle{
  display:flex;
  background:var(--pl-light);
  border-radius:10px;
  padding:4px;
  margin-bottom:14px;
}
.landing-page__hero-phone-toggle span{
  flex:1;
  text-align:center;
  font-size:11.5px;
  font-weight:700;
  padding:7px 0;
  border-radius:7px;
  color:var(--font-color);
}
.landing-page__hero-phone-toggle span.is-active{background:var(--pl-blue);color:#fff;}
.landing-page__hero-phone-search{
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--pl-light);
  border-radius:9px;
  padding:9px 12px;
  font-size:12.5px;
  color:var(--pl-dark);
  margin-bottom:12px;
}
.landing-page__hero-phone-row{
  padding:10px 4px;
  border-bottom:1px solid #e4e9f2;
}
.landing-page__hero-phone-row:last-child{border-bottom:none;}
.landing-page__hero-phone-row .t{font-size:13px;font-weight:700;color:var(--pl-dark);}
.landing-page__hero-phone-row .s{font-size:11px;color:var(--font-color);margin-top:2px;letter-spacing:1px;}
.landing-page__hero-phone-row.is-highlighted .t{color:var(--pl-gold);}

.landing-page__hero-float-badge{
  position:absolute;
  background:#fff;
  border:1px solid #e4e9f2;
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 12px 28px rgba(0,64,128,0.16);
  display:flex;
  align-items:center;
  gap:9px;
  font-size:12.5px;
  font-weight:700;
  color:var(--pl-blue);
}
.landing-page__hero-float-badge .ic{
  width:26px;height:26px;
  border-radius:50%;
  background:#e9f7ee;
  color:var(--pl-green);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.landing-page__hero-float-badge .ic img{width:14px;height:14px;}
.landing-page__hero-phone-search-icon{width:14px;height:14px;color:var(--pl-blue);flex-shrink:0;}
.landing-page__hero-badge-connected{top:48px;right:68px;}
.landing-page__hero-badge-passkey{top:210px;right:80px;}
.landing-page__hero-badge-passkey .ic{background:#fdf1dc;color:var(--pl-gold);}

@media (max-width: 900px){
  .landing-page__hero-section{grid-template-columns:1fr;padding:32px 24px;}
  .landing-page__nav{padding:18px 24px;}
  .landing-page__nav-links{display:none;}
  .landing-page__hero-title{font-size:32px;}
  .landing-page__hero-visual{margin-top:20px;}
  .landing-page__hero-badge-connected{right:0;}
  .landing-page__hero-badge-passkey{right:0;}
}