/* ============================================================
   digiRobe — oeffentliche Seiten (Homepage "/" und Info "/info")
   Baut auf v2.css auf: Tokens, Reset und Schriftfamilien kommen
   von dort. Hier nur die Landing-eigenen Werte und Komponenten.
   Klassenpraefix: lp-* ("landing page").
   ============================================================ */

:root{
  /* Werte des Landing-Handoffs, die es im V2-System nicht gibt. */
  --lp-frame-3:      #33352B;  /* Dunkelflaeche Hover / Divider auf dunkel */
  --lp-line-strong:  #E5E5DE;  /* Rahmen hell (Login-Outline) */

  /* Homepage: Text liegt auf dem Foto, eigene Abstufungen. */
  --lp-photo-ink:    #141511;
  --lp-photo-claim:  #3A3B36;
  --lp-photo-foot:   #4A4B45;
  --lp-photo-link:   #D9D9D4;
  --lp-photo-link-2: #C9C9C4;
}

html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
}

/* Public-Seiten setzen keine App-Shell, sondern fuellen den Body selbst. */
body.lp{background:var(--db-app-bg);}
/* Gleiche Spezifitaet wie `.v2 a` in v2.css, aber spaeter im Cascade —
   damit gewinnen die Link-Regeln weiter unten in dieser Datei. */
.lp a{color:inherit;text-decoration:none;}
.lp-t{transition:background .15s ease,color .15s ease,border-color .15s ease,
                 transform .15s ease,box-shadow .15s ease,filter .15s ease;}

/* Nur fuer Screenreader (Sprungmarke). */
.lp .lp-skip{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--db-frame);color:#FFFFFF;
  border-radius:var(--db-r-pill);padding:12px 22px;
  font-size:13px;font-weight:700;
}
.lp .lp-skip:focus{left:14px;top:14px;}

/* ============================================================
   1 — Homepage (Statement-Seite)
   ============================================================ */

.lp-home{position:relative;min-height:100vh;overflow:hidden;}
@supports (min-height:100svh){ .lp-home{min-height:100svh;} }

.lp-home__bg{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:right center;
}
/* Abdunkelung nur in der Schmal-Variante (siehe Media Query unten). */
.lp-home__veil{position:absolute;inset:0;background:rgba(0,0,0,.45);display:none;}

.lp-home__nav{
  position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:28px 40px;
}
.lp-home__mark{
  font-family:var(--db-font-display);font-size:17px;font-weight:700;
  letter-spacing:-0.01em;color:var(--db-frame);
}
.lp-home__navactions{display:flex;align-items:center;gap:24px;font-size:13px;font-weight:700;}
.lp .lp-home__navlink{color:var(--lp-photo-link);}
.lp .lp-home__navlink:hover{color:var(--db-accent);}
.lp .lp-home__login{
  display:inline-flex;align-items:center;color:#FFFFFF;
  border:1.5px solid rgba(255,255,255,.45);border-radius:var(--db-r-pill);padding:9px 20px;
}
.lp .lp-home__login:hover{border-color:var(--db-accent);color:var(--db-accent);}

/* Bildmarke ueber der Wortmarke.
   Die SVG hat eine quadratische ViewBox (510.24), der Buegel belegt darin aber
   nur 427.5 x 253.8 ab 41.4/103.4 — die Marke waere also von Luft umgeben und
   wirkte klein. Der Rahmen schneidet diese Luft weg: --lp-logo-w ist die
   BREITE DER ZEICHNUNG, alles andere leitet sich aus den BBox-Verhaeltnissen
   ab (510.24/427.5 = 1.1935, 253.8/427.5 = 0.5936, 41.4/427.5 = 0.0968,
   103.4/427.5 = 0.2419).
   Auf dem hellen Verlauf links traegt Lime nicht — dort steht die Marke in
   derselben Tinte wie die H1 und wirkt ueber die Groesse. Lime kommt in der
   Schmal-Variante, wo der Text auf dunklem Grund liegt. */
.lp-home__logo{
  --lp-logo-w:clamp(120px,13vw,210px);
  display:block;overflow:hidden;
  width:var(--lp-logo-w);
  height:calc(var(--lp-logo-w) * .5936);
  color:var(--lp-photo-ink);
  margin-bottom:6px;
}
.lp-home__logo .db-logo{
  display:block;height:auto;
  width:calc(var(--lp-logo-w) * 1.1935);
  margin-left:calc(var(--lp-logo-w) * -.0968);
  margin-top:calc(var(--lp-logo-w) * -.2419);
}

.lp-home__main{
  position:relative;min-height:calc(100vh - 200px);
  display:flex;flex-direction:column;justify-content:center;gap:28px;
  padding:40px 5vw;max-width:34vw;   /* haelt den Text im bildfreien Bereich */
}
.lp-home__intro{display:flex;flex-direction:column;align-items:flex-start;gap:14px;}
.lp-home__h1{
  font-family:var(--db-font-display);font-size:clamp(36px,4.2vw,64px);font-weight:700;
  letter-spacing:-0.03em;line-height:1.02;margin:0;color:var(--lp-photo-ink);
}
.lp-home__claim{
  font-size:clamp(17px,1.5vw,22px);line-height:1.5;font-weight:600;
  color:var(--lp-photo-claim);margin:0;
}
.lp .lp-home__cta{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--db-accent);color:var(--lp-photo-ink);
  border-radius:var(--db-r-pill);padding:16px 34px;
  font-size:15px;font-weight:800;box-shadow:0 10px 30px rgba(0,0,0,.18);
}
.lp .lp-home__cta:hover{filter:brightness(.93);color:var(--lp-photo-ink);}

.lp-home__footer{
  position:absolute;bottom:0;left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:22px 40px;font-size:12px;font-weight:600;
  color:var(--lp-photo-foot);flex-wrap:wrap;
}
.lp-home__legal{display:flex;gap:20px;}
.lp-home__legal a{color:var(--lp-photo-link-2);}
.lp-home__legal a:hover{color:var(--db-accent);}

/* Einstiegsanimation */
@keyframes lp-fadeUp{
  from{opacity:0;transform:translateY(18px);}
  to{opacity:1;transform:translateY(0);}
}
.lp-home__intro{animation:lp-fadeUp .9s ease-out both;}
.lp-home__ctawrap{animation:lp-fadeUp .9s ease-out .25s both;}
@media (prefers-reduced-motion:reduce){
  .lp-home__intro,.lp-home__ctawrap{animation:none;}
}

/* Schmal: der 34vw-Textblock traegt nicht mehr. Das Foto wird so
   beschnitten, dass das digiRobe-App-Icon im oberen Bereich steht und vom
   Telefon nur ein Ausschnitt zu sehen ist; der Text rutscht nach unten und
   bekommt einen eigenen Verlauf, damit er nicht auf den hellen Icons liegt. */
@media (max-width:900px){
  .lp-home__bg{object-position:41% 42%;}
  .lp-home__veil{
    display:block;
    /* Oben nur so viel Abdunkelung, dass die Nav sitzt; in der Bildmitte
       bleibt das App-Icon frei; ab 46% laeuft es hart dunkel, weil dort der
       Textblock steht. */
    background:linear-gradient(
      180deg,
      rgba(0,0,0,.55) 0%,
      rgba(0,0,0,.10) 20%,
      rgba(0,0,0,.10) 46%,
      rgba(0,0,0,.80) 60%,
      rgba(0,0,0,.95) 74%,
      rgba(0,0,0,.96) 100%);
  }
  .lp-home__nav{padding:20px 22px;}
  .lp-home__mark{color:#FFFFFF;}
  .lp-home__main{
    max-width:none;padding:32px 22px 76px;
    min-height:calc(100vh - 160px);
    justify-content:flex-end;   /* Text nach unten, Foto bleibt oben frei */
    gap:22px;
  }
  .lp-home__logo{
    --lp-logo-w:clamp(110px,34vw,180px);
    color:var(--db-accent);
    filter:drop-shadow(0 0 12px rgba(224,250,41,.5)) drop-shadow(0 0 30px rgba(224,250,41,.25));
  }
  .lp-home__h1{color:#FFFFFF;}
  .lp-home__claim{color:#F2F2EC;}
  .lp-home__footer{padding:18px 22px;color:#B9BAB4;}
}
@media (max-width:480px){
  .lp-home__navactions{gap:14px;}
  .lp .lp-home__cta{padding:15px 28px;}
}

/* ============================================================
   2 — Info-Landingpage
   ============================================================ */

.lp-page{
  min-height:100vh;padding:14px;
  display:flex;flex-direction:column;gap:14px;
}
.lp-card{border-radius:var(--db-r-card);}
.lp-card--light{background:var(--db-surface);box-shadow:var(--db-shadow-card);}
.lp-card--dark{background:var(--db-frame);}
.lp-card--accent{background:var(--db-accent);}
.lp-sec{padding:64px 58px;scroll-margin-top:92px;}

/* Eyebrow / Mikro-Label */
.lp-eyebrow{
  font-family:var(--db-font-mono);font-size:10px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--db-ink-3);
}
.lp-eyebrow--dark{color:var(--db-on-frame-2);}

.lp-h2{
  font-family:var(--db-font-display);font-size:34px;font-weight:700;
  letter-spacing:-0.02em;margin:0;text-wrap:balance;
}
.lp-lead{font-size:15px;line-height:1.6;color:var(--db-ink-2);margin:0;text-wrap:pretty;}
.lp-head{display:flex;flex-direction:column;gap:12px;max-width:640px;}

/* ── Nav ───────────────────────────────────────────────── */
.lp-nav{
  padding:14px 22px;display:flex;align-items:center;gap:24px;
  position:sticky;top:14px;z-index:50;
}
.lp-nav__brand{display:flex;align-items:center;gap:11px;}
.lp-nav__tile{
  width:42px;height:42px;border-radius:13px;background:var(--db-accent);
  color:var(--db-frame);display:flex;align-items:center;justify-content:center;flex:none;
}
.lp-nav__tile .db-logo{width:26px;height:26px;display:block;}
.lp-nav__name{
  font-family:var(--db-font-display);font-size:19px;font-weight:700;letter-spacing:-0.01em;
}
.lp-nav__menu{
  display:flex;align-items:center;gap:4px;margin-left:auto;
  font-size:13.5px;font-weight:600;color:var(--db-ink-2);
}
.lp-nav__menu a{padding:9px 14px;border-radius:var(--db-r-pill);}
.lp-nav__menu a:hover{background:var(--db-tile);color:var(--db-ink);}
.lp-nav__actions{display:flex;align-items:center;gap:10px;}
.lp .lp-nav__login{
  display:inline-flex;align-items:center;background:var(--db-surface);
  border:1px solid var(--lp-line-strong);border-radius:var(--db-r-pill);
  padding:9px 18px;font-size:13px;font-weight:600;
}
.lp .lp-nav__login:hover{background:var(--db-tile);}
.lp .lp-nav__demo{
  display:inline-flex;align-items:center;background:var(--db-frame);color:#FFFFFF;
  border-radius:var(--db-r-pill);padding:10px 20px;font-size:13px;font-weight:700;
}
.lp .lp-nav__demo:hover{background:var(--db-frame-2);color:#FFFFFF;}

/* ── Hero ──────────────────────────────────────────────── */
.lp-hero{
  box-shadow:var(--db-shadow-float);overflow:hidden;
  display:grid;grid-template-columns:1.05fr 1fr;align-items:center;
  scroll-margin-top:92px;
}
.lp-hero__text{padding:72px 26px 72px 58px;display:flex;flex-direction:column;gap:26px;}
.lp-pill{
  display:inline-flex;align-items:center;gap:8px;align-self:flex-start;
  background:var(--db-band-accent-bg);color:var(--db-band-accent-fg);
  border-radius:var(--db-r-pill);padding:7px 14px;
  font-family:var(--db-font-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
}
.lp-pill__dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex:none;}
.lp-hero__h1{
  font-family:var(--db-font-display);font-size:52px;line-height:1.06;font-weight:700;
  letter-spacing:-0.02em;color:#FFFFFF;margin:0;text-wrap:balance;
}
.lp-hero__p{
  font-size:16.5px;line-height:1.6;color:var(--db-on-frame-2);
  margin:0;max-width:46ch;text-wrap:pretty;
}
.lp-hero__buttons{display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.lp .lp-btn-accent{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--db-accent);color:var(--db-accent-ink);
  border-radius:var(--db-r-pill);padding:14px 26px;font-size:14.5px;font-weight:800;
}
.lp .lp-btn-accent:hover{filter:brightness(.93);color:var(--db-accent-ink);}
.lp-btn-accent__arrow{
  width:24px;height:24px;border-radius:50%;background:var(--db-frame);color:var(--db-accent);
  display:flex;align-items:center;justify-content:center;font-size:13px;flex:none;
}
.lp .lp-btn-frame{
  display:inline-flex;align-items:center;background:var(--db-frame-2);color:var(--db-on-frame);
  border-radius:var(--db-r-pill);padding:14px 24px;font-size:14px;font-weight:600;
}
.lp .lp-btn-frame:hover{background:var(--lp-frame-3);color:#FFFFFF;}

.lp-kpis{display:flex;gap:26px;flex-wrap:wrap;padding-top:8px;}
.lp-kpi{display:flex;flex-direction:column;gap:3px;}
.lp-kpi__value{
  font-family:var(--db-font-display);font-size:22px;font-weight:700;color:var(--db-accent);
}
.lp-kpi__label{
  font-family:var(--db-font-mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--db-on-frame-2);
}
.lp-kpis__sep{width:1px;background:var(--lp-frame-3);align-self:stretch;}

.lp-hero__media{align-self:stretch;position:relative;min-height:520px;overflow:hidden;}
.lp-hero__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:38% 30%;
}

/* ── Integrationen ─────────────────────────────────────── */
.lp-logos{
  padding:22px 30px;display:flex;align-items:center;justify-content:center;
  gap:14px;flex-wrap:wrap;
}
.lp-logos__label{margin-right:8px;}
.lp-chip{
  display:inline-flex;align-items:center;background:var(--db-tile);
  border-radius:var(--db-r-pill);padding:8px 16px;
  font-size:12.5px;font-weight:700;color:var(--db-ink-2);
}
.lp-chip--soft{font-weight:600;}

/* ── Funktionen ────────────────────────────────────────── */
.lp-sec--features{display:flex;flex-direction:column;gap:36px;}
.lp-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.lp-feature{
  background:var(--db-tile);border-radius:var(--db-r-tile);padding:26px;
  display:flex;flex-direction:column;gap:14px;
}
.lp-feature__marker{
  width:12px;height:12px;border-radius:var(--db-r-marker);background:var(--db-accent);
}
.lp-feature h3{font-family:var(--db-font-display);font-size:18px;font-weight:700;margin:0;}
.lp-feature p{font-size:13.5px;line-height:1.6;color:var(--db-ink-2);margin:0;text-wrap:pretty;}
@media (hover:hover){
  .lp-feature:hover{box-shadow:0 10px 28px rgba(0,0,0,.08);transform:translateY(-2px);}
}

/* ── So funktioniert's ─────────────────────────────────── */
.lp-sec--steps{display:flex;flex-direction:column;gap:40px;}
.lp-sec--steps .lp-h2{color:#FFFFFF;}
.lp-step{
  background:var(--db-frame-2);border-radius:var(--db-r-tile);padding:28px;
  display:flex;flex-direction:column;gap:16px;
}
.lp-step__num{
  font-family:var(--db-font-mono);font-size:12px;font-weight:700;
  color:var(--db-accent);letter-spacing:.08em;
}
.lp-step h3{font-family:var(--db-font-display);font-size:19px;font-weight:700;margin:0;color:#FFFFFF;}
.lp-step p{font-size:13.5px;line-height:1.6;color:var(--db-on-frame-2);margin:0;text-wrap:pretty;}

/* ── Einsatzbereiche ───────────────────────────────────── */
.lp-sec--venues{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;}
.lp-venues__text{display:flex;flex-direction:column;gap:14px;}
.lp-venues__chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:6px;}
.lp-venues__media{
  border-radius:var(--db-r-tile);overflow:hidden;min-height:460px;
  position:relative;background:var(--db-tile);
}
.lp-venues__media img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;object-position:52% 40%;
}

/* ── Kontakt-CTA ───────────────────────────────────────── */
.lp-sec--cta{
  padding:72px 58px;display:flex;flex-direction:column;align-items:center;
  gap:22px;text-align:center;scroll-margin-top:92px;
}
.lp-sec--cta .db-logo{width:64px;height:64px;color:var(--db-frame);}
.lp-cta__h2{
  font-family:var(--db-font-display);font-size:40px;font-weight:700;
  letter-spacing:-0.02em;margin:0;max-width:18ch;text-wrap:balance;
}
.lp-cta__p{
  font-size:15.5px;line-height:1.6;color:var(--db-ink-2);
  margin:0;max-width:52ch;text-wrap:pretty;
}
.lp-cta__buttons{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;}
.lp .lp-btn-frame-solid{
  display:inline-flex;align-items:center;background:var(--db-frame);color:#FFFFFF;
  border-radius:var(--db-r-pill);padding:14px 28px;font-size:14.5px;font-weight:800;
}
.lp .lp-btn-frame-solid:hover{background:var(--db-frame-2);color:#FFFFFF;}
.lp .lp-btn-white{
  display:inline-flex;align-items:center;background:var(--db-surface);color:var(--db-frame);
  border-radius:var(--db-r-pill);padding:14px 26px;font-size:14px;font-weight:700;
}
.lp .lp-btn-white:hover{filter:brightness(.95);}

/* ── Anmeldung ─────────────────────────────────────────── */
.lp-auth{
  min-height:100vh;padding:24px 14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
}
@supports (min-height:100svh){ .lp-auth{min-height:100svh;} }
.lp-auth__brand{display:flex;align-items:center;gap:11px;}
.lp-auth__brand .lp-nav__name{font-size:21px;}
.lp-auth__card{width:100%;max-width:420px;padding:36px 34px;}
.lp-auth__head{display:flex;flex-direction:column;gap:8px;margin-bottom:24px;}
.lp-auth__head h1{
  font-family:var(--db-font-display);font-size:26px;font-weight:700;
  letter-spacing:-0.02em;margin:0;
}
.lp-auth__head p{font-size:13.5px;line-height:1.6;color:var(--db-ink-3);margin:0;}
.lp-auth__form{display:grid;gap:16px;}
.lp-auth__error{
  background:var(--db-attention-bg);color:var(--db-attention);
  border-radius:var(--db-r-control);padding:11px 14px;
  font-size:13px;font-weight:600;
}
.lp-auth__error ul{list-style:none;margin:0;padding:0;}
.lp .lp-auth__submit{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  width:100%;border:none;cursor:pointer;
  background:var(--db-accent);color:var(--db-accent-ink);
  border-radius:var(--db-r-pill);padding:14px 26px;
  font-family:var(--db-font-ui);font-size:14.5px;font-weight:800;
}
.lp .lp-auth__submit:hover{filter:brightness(.93);}
.lp .lp-auth__back{font-size:12.5px;font-weight:600;color:var(--db-ink-3);}
.lp .lp-auth__back:hover{color:var(--db-ink);}
@media (max-width:480px){
  .lp-auth__card{padding:28px 22px;}
}

/* ── Rechtstexte (Impressum) ───────────────────────────── */
.lp-legal{display:flex;flex-direction:column;gap:30px;}
/* Karte bleibt volle Breite wie alle anderen Sektionen — begrenzt wird die
   Zeilenlaenge des Textes, nicht die Flaeche. */
.lp-legal > *{max-width:820px;}
.lp-legal__block{display:flex;flex-direction:column;gap:10px;}
.lp-legal h2{
  font-family:var(--db-font-display);font-size:19px;font-weight:700;
  letter-spacing:-0.01em;margin:0;
}
.lp-legal h3{
  font-family:var(--db-font-display);font-size:15px;font-weight:700;
  margin:8px 0 0;color:var(--db-ink-2);
}
.lp-legal p{font-size:14.5px;line-height:1.7;color:var(--db-ink-2);margin:0;}
/* Freitextfelder kommen aus einer <textarea> — Zeilenumbrueche muessen bleiben. */
.lp-legal__pre{white-space:pre-line;}
.lp-legal__dl{
  display:grid;grid-template-columns:minmax(140px,auto) 1fr;gap:6px 20px;
  margin:0;font-size:14.5px;line-height:1.7;
}
.lp-legal__dl dt{color:var(--db-ink-3);}
.lp-legal__dl dd{margin:0;color:var(--db-ink-2);}
.lp .lp-legal a{text-decoration:underline;text-underline-offset:2px;}
.lp .lp-legal a:hover{color:var(--db-ink);}
@media (max-width:560px){
  .lp-legal__dl{grid-template-columns:1fr;gap:2px;}
  .lp-legal__dl dd{margin-bottom:8px;}
}

/* ── Footer ────────────────────────────────────────────── */
.lp-footer{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:10px 24px 18px;flex-wrap:wrap;
}
.lp-footer__brand{display:flex;align-items:center;gap:10px;}
.lp-footer__brand .db-logo{width:22px;height:22px;opacity:.7;color:var(--db-frame);}
.lp-footer__brand span{font-size:12.5px;color:var(--db-ink-3);}
.lp-footer__links{display:flex;gap:20px;font-size:12.5px;font-weight:600;color:var(--db-ink-3);}
.lp-footer__links a{color:var(--db-ink-3);}
.lp-footer__links a:hover{color:var(--db-ink);}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width:1024px){
  .lp-sec{padding:44px 32px;}
  .lp-sec--cta{padding:56px 32px;}
  .lp-hero{grid-template-columns:1fr;}
  .lp-hero__text{padding:44px 32px;}
  .lp-hero__h1{font-size:42px;}
  .lp-hero__media{min-height:320px;order:2;}
  .lp-sec--venues{grid-template-columns:1fr;gap:32px;}
  .lp-venues__media{min-height:320px;}
  .lp-grid-3{grid-template-columns:repeat(2,1fr);}
  .lp-nav__menu{display:none;}
}
@media (max-width:720px){
  .lp-sec{padding:32px 22px;}
  .lp-sec--cta{padding:44px 22px;}
  .lp-hero__text{padding:32px 22px;}
  .lp-hero__h1{font-size:34px;}
  .lp-h2,.lp-cta__h2{font-size:26px;}
  .lp-grid-3{grid-template-columns:1fr;}
  .lp-nav{padding:12px 14px;gap:12px;}
  .lp-nav__name{display:none;}
  .lp-logos{justify-content:flex-start;}
  .lp-footer{padding:10px 14px 18px;}
  /* Umgebrochene Kennzahlen: Divider wuerden sonst am Zeilenanfang stehen. */
  .lp-kpis{gap:8px 22px;}
  .lp-kpis__sep{display:none;}
}
@media (max-width:420px){
  /* Login und "Demo anfragen" bleiben laut Handoff auch schmal sichtbar. */
  .lp-hero__buttons .lp-btn-accent,
  .lp-hero__buttons .lp-btn-frame{flex:1 1 100%;justify-content:center;}
}