/* ============================================================
   AI Innovation Canvas — Landing Page
   Pandata × Retail AI
   ============================================================ */

/* ---------- Self-hosted Open Sans (no Google Fonts) ---------- */
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/OpenSans-Regular.ttf') format('truetype');
}
@font-face{
  font-family:'Open Sans';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/OpenSans-Italic.ttf') format('truetype');
}
@font-face{
  font-family:'Open Sans';
  font-style:normal;
  font-weight:600;
  font-display:swap;
  src:url('assets/fonts/OpenSans-SemiBold.ttf') format('truetype');
}

/* ---------- Reset (minimal) ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
img,svg{ max-width:100%; }
a{ color:inherit; }
button{ font:inherit; border:none; background:none; cursor:pointer; }

/* ---------- Tokens ---------- */
:root{
  --c-bg:#FFFFFF;
  --c-ink:#58595B;
  --c-ink-strong:#0F0F0F;
  --c-ink-2:#7A7A7C;
  --c-ink-3:#A8A8AA;
  --c-line:#E6E6E6;
  --c-line-2:#EFEFEE;
  --c-surface:#F7F7F5;
  --c-coral:#EF7B6B;
  --c-coral-soft:#F8D9D0;
  --c-blush:#FFF5F1;
  --c-partner:#001F60;
  --c-partner-2:#00A2E2;
  --c-partner-deep:#00153F;
  --c-partner-tint:#EAF4FB;
  --c-partner-tint-2:#F4F7FC;
  --c-partner-line:#D3E3F2;
  --c-partner-2-line:#CDEAFA;
  --c-coral-deep:#D9544A;
}

/* Visually-hidden utility (a11y) */
.visually-hidden{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
*{ -webkit-font-smoothing:antialiased; }
html,body{ background:var(--c-bg); color:var(--c-ink); font-family:'Open Sans',ui-sans-serif,system-ui,sans-serif; font-weight:400; }
h1,h2,h3{ color:var(--c-ink); font-weight:600; letter-spacing:-.01em; margin:0; }
h1{ line-height:1.1; }
h2{ line-height:1.18; }
p{ color:var(--c-ink); margin:0; }

/* Focus ring for keyboard users */
a:focus-visible, button:focus-visible{
  outline:2px solid var(--c-partner-2); outline-offset:3px; border-radius:4px;
}

.eyebrow{
  text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:600;
  color:var(--c-partner);
}
.eyebrow.coral{ color:var(--c-coral); }

/* ---------- Pandata-net pattern (used as decorative backdrops) ---------- */
.net-bg{
  position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(0,31,96,.08) 0 1.6px, transparent 2px),
    radial-gradient(circle at 38% 10%, rgba(0,31,96,.08) 0 1.6px, transparent 2px),
    radial-gradient(circle at 64% 28%, rgba(0,162,226,.10) 0 1.6px, transparent 2px),
    radial-gradient(circle at 88% 14%, rgba(0,31,96,.08) 0 1.6px, transparent 2px),
    radial-gradient(circle at 22% 60%, rgba(239,123,107,.10) 0 1.6px, transparent 2px),
    radial-gradient(circle at 50% 78%, rgba(0,31,96,.08) 0 1.6px, transparent 2px),
    radial-gradient(circle at 78% 64%, rgba(0,162,226,.10) 0 1.6px, transparent 2px);
}
.net-svg{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; opacity:.55; z-index:0; }

/* ---------- Co-brand header ---------- */
.cobrand-bar{
  position:sticky; top:0; z-index:50;
  background:#fff;
  border-bottom:1px solid var(--c-line);
}
.cobrand-lockup{
  display:flex; align-items:center; justify-content:center; gap:34px;
  padding:18px 24px;
}
.cobrand-lockup-link{
  display:flex; align-items:center; justify-content:center; gap:34px;
  text-decoration:none;
}
.cobrand-lockup img{ display:block; }
.cobrand-lockup .logo-pd{ height:54px; width:auto; }
.cobrand-lockup .logo-rt{ height:46px; width:auto; }
/* × bridge: thin, gray, calm */
.cobrand-lockup .x-bridge{
  width:22px; height:22px; display:flex; align-items:center; justify-content:center;
  color:var(--c-ink-3); font-weight:400; font-size:24px; line-height:1;
  font-family:'Open Sans', sans-serif;
}
@media (max-width:720px){
  .cobrand-lockup .logo-pd{ height:40px; }
  .cobrand-lockup .logo-rt{ height:34px; }
  .cobrand-lockup{ gap:22px; padding:14px 16px; }
  .cobrand-lockup .x-bridge{ font-size:20px; }
}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:80px 24px 32px;
  text-align:center;
}
.hero-inner{ position:relative; z-index:2; max-width:1100px; margin:0 auto; }
.hero h1{
  font-size:clamp(34px, 4.6vw, 52px);
  max-width:18ch; margin:14px auto 18px;
}
.hero .sub{
  font-size:clamp(16px, 1.2vw, 18px); line-height:1.55;
  max-width:62ch; margin:0 auto 56px;
}

/* deck-fan: realistic-looking card cluster from the deck */
.deck-fan{
  position:relative; width:min(640px, 100%); margin:0 auto;
  height:340px;
}
.deck-card{
  position:absolute; top:0; left:50%;
  width:200px; height:300px;
  background:#fff; border:2px solid var(--c-coral);
  border-radius:14px; padding:18px 18px 16px;
  box-shadow:0 30px 60px -30px rgba(15,15,15,.35);
  text-align:left;
  transition: transform .35s ease;
}
.deck-card .cat{
  position:absolute; left:18px; top:18px;
  font-size:10px; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:var(--c-coral);
}
.deck-card .num{
  position:absolute; right:14px; top:14px;
  font-size:54px; font-weight:600; color:var(--c-coral); line-height:1; opacity:.95;
}
.deck-card h4{ position:absolute; left:18px; right:18px; top:62px; font-size:15px; font-weight:600; color:var(--c-ink); line-height:1.25; margin:0; }
.deck-card .lines{ position:absolute; left:18px; right:18px; top:120px; display:flex; flex-direction:column; gap:7px; }
.deck-card .lines i{ display:block; height:5px; border-radius:3px; background:var(--c-line); font-style:normal; }
.deck-card .lines i:nth-child(1){ width:100%; }
.deck-card .lines i:nth-child(2){ width:90%; }
.deck-card .lines i:nth-child(3){ width:96%; }
.deck-card .lines i:nth-child(4){ width:70%; }
.deck-card .footer-strip{
  position:absolute; left:18px; right:18px; bottom:18px;
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:var(--c-ink-2); letter-spacing:.08em; text-transform:uppercase;
}
.deck-card .footer-strip .pip{ width:6px; height:6px; border-radius:999px; background:var(--c-coral); }
.deck-card.dark{ border-color:var(--c-partner); }
.deck-card.dark .cat,
.deck-card.dark .num{ color:var(--c-partner); }
.deck-card.dark .footer-strip .pip{ background:var(--c-partner); }

.deck-card.c1{ transform:translateX(calc(-50% - 200px)) rotate(-10deg); }
.deck-card.c2{ transform:translateX(-50%) rotate(0deg); z-index:2; }
.deck-card.c3{ transform:translateX(calc(-50% + 200px)) rotate(10deg); }

.deck-fan:hover .deck-card.c1{ transform:translateX(calc(-50% - 220px)) rotate(-13deg); }
.deck-fan:hover .deck-card.c3{ transform:translateX(calc(-50% + 220px)) rotate(13deg); }
.deck-fan:hover .deck-card.c2{ transform:translateX(-50%) rotate(0deg) translateY(-8px); }

@media (max-width:680px){
  .deck-fan{ height:300px; }
  .deck-card{ width:170px; height:255px; }
  .deck-card.c1{ transform:translateX(calc(-50% - 110px)) rotate(-9deg); }
  .deck-card.c3{ transform:translateX(calc(-50% + 110px)) rotate(9deg); }
}

/* ---------- Big route tiles ---------- */
.routes{
  padding:24px 24px 96px;
  max-width:1180px; margin:0 auto;
}
.routes-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
}
@media (max-width:860px){ .routes-grid{ grid-template-columns:1fr; } }

.tile{
  border-radius:18px; overflow:hidden;
  display:flex; flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease;
  text-decoration:none;
}
.tile:hover{ transform:translateY(-4px); }

.tile .preview{
  height:240px; position:relative; overflow:hidden;
}
.tile .body{
  padding:28px 32px 32px; flex:1; display:flex; flex-direction:column;
}
.tile .badge{
  display:inline-block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; font-weight:600;
  padding:6px 10px; border-radius:999px; margin-bottom:14px; align-self:flex-start;
}
.tile h3{ font-size:24px; margin-bottom:8px; }
.tile .lead{ font-size:15px; line-height:1.5; margin-bottom:22px; max-width:38ch; }

/* ----- Course tile ----- */
.tile.course{
  background:#fff;
  border:1px solid var(--c-line);
  box-shadow:0 30px 60px -34px rgba(0,31,96,.35);
}
.tile.course .preview{ background:#fff; }
.tile.course .preview .screenshot{
  width:100%; height:100%; object-fit:cover; object-position:center top;
  display:block;
}
.tile.course .badge{ background:var(--c-partner-tint); color:var(--c-partner); border:1px solid var(--c-partner-line); }
.retail-btn{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:10px;
  padding:13px 22px; border-radius:999px;
  border:1.5px solid var(--c-partner);
  background:var(--c-partner); color:#fff;
  text-transform:uppercase; letter-spacing:.12em; font-weight:600; font-size:12px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.retail-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -10px rgba(0,31,96,.6); }
.retail-btn::after{ content:"\2192"; }

/* ----- Case Coach tile ----- */
.tile.assist{
  background:#fff;
  border:1px solid var(--c-line);
  box-shadow:0 30px 60px -34px rgba(239,123,107,.4);
}
.tile.assist .preview{
  overflow:hidden;
  background:
    radial-gradient(80% 100% at 50% 0%, rgba(239,123,107,.16), transparent 60%),
    var(--c-blush);
}
.tile.assist .preview .screenshot{
  width:140%; height:140%; object-fit:cover; object-position:0% 55%;
  display:block;
  transform:translate(0, -10%);
}
.tile.assist .badge{ background:var(--c-blush); color:var(--c-coral); border:1px solid var(--c-coral-soft); }
.pandata-btn{
  align-self:flex-start; margin-top:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 22px; border-radius:999px;
  background:var(--c-coral); color:#0F0F0F;
  font-weight:600; font-size:14px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.pandata-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 24px -10px rgba(239,123,107,.6); }
.pandata-btn::after{ content:"\2192"; }

.helper{
  text-align:center; margin-top:22px; color:var(--c-ink-2); font-size:14px;
}
.helper b{ color:var(--c-coral); font-weight:600; }

/* ---------- Section: So funktioniert's (no boxes — flow with connecting lines, Pandata-net feel) ---------- */
.how{
  position:relative; overflow:hidden;
  padding:96px 24px 104px;
  background:var(--c-surface);
}
.how::before, .how::after{
  content:""; position:absolute; left:0; right:0; height:1px;
  background:linear-gradient(90deg, transparent, var(--c-partner-2) 50%, transparent);
  opacity:.35; z-index:1;
}
.how::before{ top:0; }
.how::after{ bottom:0; }
.how-inner{ max-width:1100px; margin:0 auto; position:relative; z-index:2; }
.how h2{ text-align:center; font-size:clamp(26px, 3.2vw, 38px); margin-bottom:14px; }
.how .lead{ text-align:center; max-width:54ch; margin:0 auto 64px; color:var(--c-ink); font-size:16px; }

.flow{
  position:relative; display:grid; grid-template-columns:1fr 1fr 1fr; gap:8px;
  max-width:980px; margin:0 auto;
}
.flow svg.connect{
  position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1;
  overflow:visible;
}
.node{
  position:relative; z-index:2; text-align:center;
  padding:0 18px;
}
.node .dot{
  width:80px; height:80px; margin:0 auto 22px;
  border-radius:999px; background:#fff; border:1.5px solid var(--c-line);
  display:flex; align-items:center; justify-content:center;
  font-size:34px; font-weight:600; line-height:1;
  box-shadow:0 14px 30px -16px rgba(0,31,96,.18);
  position:relative;
}
.node:nth-child(1) .dot{ color:var(--c-coral); border-color:var(--c-coral-soft); }
.node:nth-child(2) .dot{ color:var(--c-partner); border-color:var(--c-partner-line); }
.node:nth-child(3) .dot{ color:var(--c-partner-2); border-color:var(--c-partner-2-line); }
.node h3{ font-size:17px; margin-bottom:8px; }
.node p{ font-size:14.5px; line-height:1.5; color:var(--c-ink); max-width:32ch; margin:0 auto; }

/* on mobile, the flow stacks and the connector is hidden */
@media (max-width:820px){
  .flow{ grid-template-columns:1fr; gap:42px; }
  .flow svg.connect{ display:none; }
}

/* ---------- Section: Partner ---------- */
.partner{
  position:relative; overflow:hidden;
  padding:96px 24px 80px;
  background:linear-gradient(180deg, var(--c-partner-tint-2) 0%, #fff 100%);
}
.partner-inner{ max-width:1100px; margin:0 auto; position:relative; z-index:2; }
.partner h2{ text-align:center; font-size:clamp(26px, 3vw, 36px); margin-bottom:48px; }
.partner-grid{ display:grid; grid-template-columns:1fr 1fr; gap:28px; }
@media (max-width:820px){ .partner-grid{ grid-template-columns:1fr; } }
.partner-card{
  background:#fff; border:1px solid var(--c-line); border-radius:16px;
  padding:36px 36px 28px;
  display:flex; flex-direction:column;
  text-decoration:none; color:inherit;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.partner-card:hover{ transform:translateY(-3px); box-shadow:0 24px 60px -28px rgba(15,15,15,.18); }
.partner-card .logo-row{
  display:flex; align-items:center; height:80px; margin-bottom:22px;
}
.partner-card .logo-row img{ height:64px; width:auto; }
.partner-card.retail{ border-top:3px solid var(--c-partner); }
.partner-card.retail .logo-row img{ height:54px; }
.partner-card.retail:hover{ border-top-color:var(--c-partner-2); }
.partner-card.pandata{ border-top:3px solid var(--c-coral); }
.partner-card.pandata:hover{ border-top-color:var(--c-coral-deep); }
.partner-card p{ font-size:15px; line-height:1.55; color:var(--c-ink); }
.partner-card .tagline{ font-style:italic; color:var(--c-ink-2); margin-top:10px; font-size:14px; }
.partner-card .visit{
  margin-top:auto; padding-top:18px;
  font-size:13px; font-weight:600; letter-spacing:.04em;
  color:var(--c-ink-2);
  transition:color .2s ease;
}
.partner-card.pandata:hover .visit{ color:var(--c-coral); }
.partner-card.retail:hover .visit{ color:var(--c-partner); }

/* ---------- Footer ---------- */
footer{
  padding:56px 24px 28px;
  border-top:1px solid var(--c-line);
  background:#fff;
}
footer .f-inner{ max-width:1100px; margin:0 auto; display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap;}
footer .left{ font-size:13px; color:var(--c-ink-2); line-height:1.7; max-width:48ch; }
footer .left b{ color:var(--c-ink); font-weight:600; }
footer .left a{ color:inherit; text-decoration:none; border-bottom:1px solid var(--c-line); }
footer .left a:hover{ border-bottom-color:var(--c-partner); }
footer .legal{ font-size:13px; }
footer .legal a{ color:var(--c-ink-2); text-decoration:none; border-bottom:1px solid transparent; transition:.2s; }
footer .legal a:hover{ color:var(--c-partner); border-bottom-color:var(--c-partner-2); }
footer .legal a + a{ margin-left:18px; }

/* ---------- Reveal animation ---------- */
@keyframes rise { from { opacity:0; transform:translateY(14px);} to { opacity:1; transform:none;} }
.reveal > *{ animation: rise .7s ease both; }
.reveal > *:nth-child(1){ animation-delay:.05s; }
.reveal > *:nth-child(2){ animation-delay:.18s; }
.reveal > *:nth-child(3){ animation-delay:.32s; }
.reveal > *:nth-child(4){ animation-delay:.46s; }

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    transition-duration:.001ms !important;
  }
}

/* ---------- Legal subpages (impressum / datenschutz) ---------- */
.legal-page{
  max-width:760px; margin:0 auto;
  padding:80px 24px 96px;
  font-size:15.5px; line-height:1.65;
}
.legal-page h1{
  font-size:clamp(28px, 3.4vw, 40px);
  margin-bottom:32px;
}
.legal-page h2{
  font-size:20px; margin:40px 0 12px;
}
.legal-page h3{
  font-size:16px; margin:24px 0 8px;
}
.legal-page p{ margin:0 0 14px; }
.legal-page ul{ margin:0 0 14px; padding-left:22px; }
.legal-page li{ margin-bottom:6px; }
.legal-page a{ color:var(--c-partner); text-decoration:underline; text-underline-offset:3px; }
.legal-page a:hover{ color:var(--c-partner-2); }
.legal-page .back{
  display:inline-flex; align-items:center; gap:6px;
  font-size:13px; color:var(--c-ink-2); text-decoration:none;
  margin-bottom:32px;
}
.legal-page .back::before{ content:"\2190"; }
.legal-page .back:hover{ color:var(--c-partner); }