@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/ChakraPetch-400.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:500;font-display:swap;
  src:url('/fonts/ChakraPetch-500.woff2') format('woff2')}
@font-face{font-family:'Chakra Petch';font-style:normal;font-weight:600;font-display:swap;
  src:url('/fonts/ChakraPetch-600.woff2') format('woff2')}
@font-face{font-family:'Russo One';font-style:normal;font-weight:400;font-display:swap;
  src:url('/fonts/RussoOne-400.woff2') format('woff2')}

:root{
  --navy:#070B18; --panel:#0D1428; --panel-2:#111A33; --blue:#4263EB; --blue-soft:#5C7BFF;
  --ink:#E8ECF8; --muted:#8A94B8; --line:#1C2647; --gold:#C9A24B;
  --pad:clamp(20px,4vw,56px);     /* eine Variable für Rand UND Abstände */
  --maxw:1680px;              /* volle Breite nutzen — Florians Vorgabe 20.09. */
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--navy); color:var(--ink); line-height:1.65;
  font-family:'Chakra Petch',system-ui,sans-serif;
  background-image:
    radial-gradient(1px 1px at 12% 22%, #ffffff2e 0, transparent 100%),
    radial-gradient(1px 1px at 78% 14%, #ffffff24 0, transparent 100%),
    radial-gradient(1.5px 1.5px at 64% 74%, #ffffff1f 0, transparent 100%),
    radial-gradient(1px 1px at 32% 86%, #ffffff29 0, transparent 100%),
    radial-gradient(ellipse 90% 60% at 50% -10%, #16214420 0, transparent 70%);
  background-attachment:fixed;
}
.wrap{max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad)}
header{border-bottom:1px solid var(--line); position:sticky; top:0; z-index:9;
  background:#070B18f2; backdrop-filter:blur(8px)}
header .wrap{display:flex; align-items:center; justify-content:space-between; gap:var(--pad);
  height:64px}
.brand{font-family:'Russo One',sans-serif; font-size:18px; letter-spacing:.05em;
  color:var(--ink); text-decoration:none; white-space:nowrap}
.brand .ai{color:var(--blue)}
header nav{display:flex; gap:22px; align-items:center; flex-wrap:wrap}
header nav a{color:var(--muted); text-decoration:none; font-size:14px; font-weight:500}
header nav a:hover,header nav a:focus-visible{color:var(--ink); outline:none}

h1{font-family:'Russo One',sans-serif; font-weight:400; letter-spacing:.03em; line-height:1.08;
  font-size:clamp(30px,5.2vw,54px)}
h2{font-family:'Russo One',sans-serif; font-weight:400; letter-spacing:.02em;
  font-size:clamp(22px,3vw,30px); margin-bottom:18px}
h3{font-size:17px; font-weight:600; margin-bottom:8px}
p{margin-bottom:12px}
a{color:var(--blue-soft)}
.eyebrow{font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--blue-soft); font-weight:600; margin-bottom:14px}
.lead{font-size:clamp(16px,1.35vw,19px); color:var(--ink); max-width:46em}
.muted{color:var(--muted)}
section{padding:clamp(40px,7vh,84px) 0}
section + section{border-top:1px solid var(--line)}

.hero{display:grid; grid-template-columns:1fr 1fr; gap:var(--pad); align-items:center}
.hero-shot img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:14px}
@media(max-width:860px){.hero{grid-template-columns:1fr}}

.cards{display:grid; gap:var(--pad); grid-template-columns:repeat(3,1fr)}
.cards.two{grid-template-columns:repeat(2,1fr)}
.cards.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:1000px){.cards,.cards.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.cards,.cards.two,.cards.four{grid-template-columns:1fr}}
.card{background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:clamp(18px,2.2vw,26px); display:flex; flex-direction:column; gap:6px}
.card p:last-child{margin-bottom:0}
.card .fuss{margin-top:auto; padding-top:14px}
.card .num{font-family:'Russo One',sans-serif; color:var(--blue); font-size:22px}

.price{display:flex; align-items:baseline; gap:12px; margin:20px 0 6px; flex-wrap:wrap}
.price b{font-family:'Russo One',sans-serif; font-size:clamp(28px,4vw,40px); font-weight:400}
.price span{color:var(--muted); font-size:14px}
.price s{color:var(--muted); font-size:19px; text-decoration-thickness:1px}
.fuss s{color:var(--muted); font-size:14px; margin-left:4px}
/* Der ovale Rahmen endet am Text, nicht am Panelrand: in einer Flex-Spalte werden
   Kinder sonst auf volle Breite gedehnt (align-items:stretch ist der Standard). */
.aktion{display:inline-block; align-self:flex-start; width:fit-content;
  font-size:13px; font-weight:600; color:var(--gold);
  border:1px solid #C9A24B55; border-radius:999px; padding:3px 14px; margin-top:2px}
.btnrow{display:flex; gap:14px; flex-wrap:wrap; margin-top:18px}
.btn{display:inline-flex; align-items:center; justify-content:center; height:52px;
  padding:0 30px; border-radius:999px; text-decoration:none; font-weight:600; font-size:15px;
  border:1px solid var(--blue); background:var(--blue); color:#fff; white-space:nowrap}
.btn:hover,.btn:focus-visible{background:var(--blue-soft); border-color:var(--blue-soft);
  outline:none}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--line)}
.btn.ghost:hover,.btn.ghost:focus-visible{border-color:var(--blue); color:var(--blue-soft)}
.hint{font-size:13px; color:var(--muted); margin-top:10px}

/* drei Mehrwerte mit Symbol — gleiche Breite, gleiche Höhe, eine volle Reihe */
.icons3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--pad);
  margin-top:var(--pad)}
@media(max-width:760px){.icons3{grid-template-columns:1fr}}
.ikon{display:flex; flex-direction:column; align-items:center; text-align:center; gap:10px}
.ikon svg{width:46px; height:46px; stroke:var(--blue); fill:none; stroke-width:1.6;
  stroke-linecap:round; stroke-linejoin:round}
.ikon b{font-size:16px}
.ikon p{color:var(--muted); font-size:14px; margin:0; max-width:24em}

/* Screenshot-Sektion: Bild und Text nebeneinander, jede zweite gespiegelt */
/* Bild zwei Drittel, Text ein Drittel — jede zweite Sektion gespiegelt.
   Kein Beschnitt: die Aufnahme wird vollständig gezeigt, sonst erkennt man nichts. */
.shotsec{display:grid; grid-template-columns:2fr 1fr;
  gap:clamp(28px,3.5vw,64px); align-items:center}
.shotsec.rechts{grid-template-columns:1fr 2fr}
.shotsec.rechts .bild{order:2}
.shotsec .bild{margin:0}
.shotsec img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:14px; box-shadow:0 24px 60px #0004}
.shotsec h2{margin-bottom:14px}
.hero{gap:clamp(32px,4vw,72px)}
.shotsec .txt p{font-size:15.5px}
.shotsec .txt p:last-child{margin-bottom:0}
@media(max-width:1000px){.shotsec,.shotsec.rechts{grid-template-columns:1fr}
  .shotsec.rechts .bild{order:0}}

/* Galerie kleiner Aufnahmen für die restlichen Bereiche */
.gal{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.4vw,36px)}
@media(max-width:900px){.gal{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.gal{grid-template-columns:1fr}}
.gal figure{margin:0; display:flex; flex-direction:column; gap:8px}
/* Die Aufnahmen sind unterschiedlich hoch; ohne festes Seitenverhältnis stehen die
   Kacheln einer Reihe verschieden hoch und die Beschriftungen springen. */
.gal img{width:100%; height:auto; aspect-ratio:16/10; object-fit:cover;
  object-position:top left; display:block; border:1px solid var(--line);
  border-radius:12px; box-shadow:0 14px 34px #0003}
.gal p{min-height:3.2em}
.gal b{font-size:15px}
.gal p{color:var(--muted); font-size:13.5px; margin:0}

.shot{margin-top:var(--pad)}
.shot img{width:100%; height:auto; display:block; border:1px solid var(--line);
  border-radius:14px}
.shot figcaption{color:var(--muted); font-size:13px; margin-top:10px; text-align:center}

table{width:100%; border-collapse:collapse; margin-top:8px}
th,td{text-align:left; padding:10px 14px; border-bottom:1px solid var(--line);
  vertical-align:top; font-size:15px}
th{color:var(--muted); font-weight:500; white-space:nowrap}

article h2{margin-top:34px}
article h2:first-of-type{margin-top:0}
article ul,article ol{margin:0 0 12px 22px}
article li{margin-bottom:6px}
.legal{max-width:760px}

footer{border-top:1px solid var(--line); padding:calc(var(--pad)*.8) 0; font-size:14px;
  color:var(--muted)}
footer .wrap{display:flex; gap:16px; flex-wrap:wrap; justify-content:space-between;
  align-items:center}
footer nav{display:flex; gap:16px; flex-wrap:wrap}
footer a{color:var(--muted); text-decoration:none}
footer a:hover,footer a:focus-visible{color:var(--ink); outline:none}
.badge{display:inline-block; font-size:12px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold); border:1px solid #C9A24B55; border-radius:999px; padding:3px 12px}