/* Signika, lokal gehostet – Variable Font 300–700 */
@font-face{
  font-family:'Signika';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/schrift/signika-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Signika';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url('/schrift/signika-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root{
  --blue:#2d6ebe; --blue-dark:#1d4d8c; --blue-soft:#eef4fb; --slate:#3a4856;
  --bg:#eef1f5; --card:#fff; --text:#222; --muted:#5d6670; --line:#dde3ea;
  --red:#e30613; --yellow:#ffdd00;
  --maxw:72rem; --gap:clamp(3rem,6vw,4.5rem); --sgap:clamp(2.6rem,5.5vw,4rem);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--text);background:var(--bg);position:relative;
  font:16px/1.65 Signika,"Trebuchet MS",Helvetica,Arial,sans-serif}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
a{color:var(--blue)}
h2{margin:0 0 1.5rem;font-size:clamp(1.35rem,3.4vw,1.75rem);color:var(--blue-dark);font-weight:700}
h3{margin:0;font-size:1.06rem}

/* ---- Animierter Hintergrund: Zielflagge + Speedlines ---- */
.bg{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}
.bg-flag{position:absolute;top:-45%;left:-35%;width:180%;height:190%;
  transform:rotate(-11deg);
  background-image:
    linear-gradient(45deg,rgba(29,77,140,.11) 25%,transparent 25%,transparent 75%,rgba(29,77,140,.11) 75%),
    linear-gradient(45deg,rgba(29,77,140,.11) 25%,transparent 25%,transparent 75%,rgba(29,77,140,.11) 75%);
  background-size:52px 52px;
  background-position:0 0,26px 26px;
  animation:flagdrift 9s linear infinite;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 26%,rgba(0,0,0,.45) 58%,transparent 88%);
          mask-image:linear-gradient(to bottom,#000 0,#000 26%,rgba(0,0,0,.45) 58%,transparent 88%);
}
@keyframes flagdrift{to{background-position:-52px 52px,-26px 78px}}
.bg-speed{position:absolute;inset:0}
.bg-speed i{position:absolute;display:block;height:var(--h,6px);width:var(--w,260px);
  border-radius:99px;background:linear-gradient(90deg,transparent,rgba(45,110,190,.26));
  opacity:0;animation:zoomby var(--d,4.5s) linear var(--delay,0s) infinite}
@keyframes zoomby{
  0%{transform:translateX(-30vw);opacity:0}
  12%{opacity:.75}
  78%{opacity:.5}
  100%{transform:translateX(118vw);opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .bg-flag{animation:none}
  .bg-speed{display:none}
}

/* ---- Kopf ---- */
.topbar{background:linear-gradient(180deg,#3f7fd0,#1d4d8c);border-bottom:3px solid #163f73;
  position:sticky;top:0;z-index:10;box-shadow:0 2px 10px rgba(0,0,0,.18)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  flex-wrap:wrap;padding-block:.55rem}
.logo-link{display:flex;align-items:center;text-decoration:none}
.logo{display:block;height:58px;width:auto;filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}
.tel{display:inline-flex;align-items:center;gap:.55rem;color:#fff;text-decoration:none;
  font-weight:700;font-size:1.12rem;padding:.4rem .7rem;border-radius:6px;white-space:nowrap}
.tel:hover{background:rgba(255,255,255,.16)}
.phone-ic{display:block;width:20px;height:20px;overflow:visible;flex:0 0 auto}
.phone-body{transform-box:fill-box;transform-origin:center;animation:phoneshake 3.2s ease-in-out infinite}
.wave{opacity:0}
.w1{animation:ringwave 3.2s ease-out infinite}
.w2{animation:ringwave 3.2s ease-out .13s infinite}
@keyframes phoneshake{0%,24%,100%{transform:rotate(0)}4%{transform:rotate(-16deg)}9%{transform:rotate(14deg)}14%{transform:rotate(-9deg)}19%{transform:rotate(5deg)}}
@keyframes ringwave{0%,5%{opacity:0}12%{opacity:.95}34%{opacity:0}100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.phone-body,.w1,.w2{animation:none}.wave{opacity:.9}}

/* ---- Hero ---- */
.hero{position:relative;overflow:hidden;color:#fff;
  background:linear-gradient(180deg,#44536382,#3a4856),
             repeating-linear-gradient(115deg,#36424f 0 34px,#3d4a58 34px 68px);
  border-bottom:5px solid var(--yellow)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:5px;
  background:linear-gradient(90deg,var(--yellow),var(--red))}
.hero .wrap{padding-block:clamp(2.6rem,6vw,4rem)}
.hero h1{margin:0 0 .6rem;font-size:clamp(1.65rem,4.8vw,2.45rem);line-height:1.18;font-weight:700}
.hero p{margin:0;color:#d7dde4;font-size:1.06rem}
.badge{display:inline-block;margin-bottom:1rem;padding:.3rem .7rem;border-radius:999px;
  background:rgba(255,221,0,.16);border:1px solid rgba(255,221,0,.5);color:#ffe866;
  font-size:.8rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase}

/* ---- Rhythmus ---- */
/* Ein einziger Abstandswert: main ist ein Grid, der Zeilenabstand liegt EINMAL
   zwischen zwei Abschnitten. Mit Paddings addieren sich oberer und unterer Wert,
   genau das war der ungleiche Rhythmus. .wrap ist eine Klasse und schlaegt reine
   Elementselektoren, daher ueberall section.wrap. */
main{display:grid;row-gap:var(--sgap)}
section.wrap{padding-block:0}
main > section.wrap:first-child{padding-top:var(--sgap)}
main > section.wrap:last-child{padding-bottom:var(--sgap)}

/* ---- Bausteine ---- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 2px 10px rgba(32,54,80,.07)}
.lead{font-size:1.06rem;color:var(--muted);margin:0 0 1.6rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 2rem;padding:0;list-style:none}
.chips li{background:var(--blue-soft);border:1px solid #cfe0f3;color:var(--blue-dark);
  border-radius:999px;padding:.32rem .85rem;font-size:.9rem;font-weight:600}

.feature{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));
  align-items:start;margin-bottom:2rem}
.feature .panel{padding:1.3rem 1.4rem}
.feature h3{color:var(--blue-dark);margin-bottom:.5rem}
.feature p{margin:0 0 .6rem;color:var(--muted);font-size:.96rem}
.feature ul{margin:0;padding-left:1.15rem;color:var(--muted);font-size:.95rem}
.feature li{margin:.26rem 0}

.live{display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
  padding:1.3rem 1.5rem;border-left:5px solid var(--yellow);margin-bottom:2rem}
.live .txt{flex:1 1 18rem}
.live h3{color:var(--blue-dark);margin-bottom:.35rem}
.live p{margin:0;color:var(--muted);font-size:.96rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--blue);color:#fff;
  text-decoration:none;font-weight:700;padding:.7rem 1.2rem;border-radius:6px;white-space:nowrap}
.btn:hover{background:var(--blue-dark)}
.btn.ghost{background:transparent;color:var(--blue-dark);border:2px solid var(--blue)}
.btn.ghost:hover{background:var(--blue-soft)}

.gallery{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-bottom:.8rem}
figure{margin:0;background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden;
  box-shadow:0 2px 10px rgba(32,54,80,.07)}
figure img{display:block;width:100%;height:170px;object-fit:cover}
figcaption{padding:.6rem .85rem;font-size:.87rem;color:var(--muted)}
.credit{margin:0;font-size:.82rem;color:#8b949e}

.terms{padding:1.4rem 1.6rem}
.terms h3{color:var(--blue-dark);margin-bottom:.8rem}
.terms dl{margin:0;display:grid;gap:.7rem}
.terms dt{font-weight:700;color:var(--text);font-size:.95rem}
.terms dd{margin:.1rem 0 0;color:var(--muted);font-size:.94rem}
.terms .btn{margin-top:1.3rem}

/* ---- Aufkleber ---- */
.sticker{display:grid;gap:1.6rem;grid-template-columns:repeat(auto-fit,minmax(18rem,1fr));align-items:start}
.sticker .panel{padding:1.3rem 1.4rem}
.sticker p{margin:0 0 .8rem;color:var(--muted);font-size:.96rem}
.sticker ul{margin:0 0 .9rem;padding-left:1.15rem;color:var(--muted);font-size:.95rem}
.price{display:flex;align-items:baseline;gap:.5rem;flex-wrap:wrap;
  padding-top:1rem;border-top:1px dashed var(--line)}
.price .label{font-size:.82rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.price .val{font-weight:700;color:var(--blue-dark);font-size:1.08rem}
.illu{display:block;width:100%;height:auto;max-height:200px}
.illu-box{background:var(--blue-soft);border:1px solid var(--line);border-radius:10px;padding:1.2rem}

.hinweis{background:#fff8e1;border:1px solid #f0d890;border-radius:8px;
  padding:.8rem 1rem;font-size:.92rem;color:#5e4b16}
.hinweis strong{color:#4a3a0f}

/* ---- Ablauf ---- */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:1.2rem}
.step{display:flex;gap:1rem;align-items:flex-start;padding:1.2rem 1.35rem}
.step-no{flex:0 0 2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:var(--blue);color:#fff;font-weight:700;font-size:1rem}
.step h3{color:var(--blue-dark);margin-bottom:.3rem}
.step p{margin:0 0 .5rem;color:var(--muted);font-size:.96rem}
.step .kontakt{display:flex;gap:.4rem 1.2rem;flex-wrap:wrap;margin:.7rem 0 0;
  font-weight:700;font-size:.97rem}
.step .kontakt a{text-decoration:none}
.step .kontakt a:hover{text-decoration:underline}

/* ---- Partner ---- */
.partner{padding-block:0 var(--sgap)}
.partner .box{display:flex;align-items:center;justify-content:space-between;gap:1.6rem;
  flex-wrap:wrap;background:var(--card);border:1px solid var(--line);
  border-left:5px solid var(--yellow);border-radius:10px;padding:1.5rem 1.6rem;
  box-shadow:0 2px 10px rgba(32,54,80,.07)}
.partner .txt{flex:1 1 22rem}
.partner h2{margin:0 0 .4rem}
.partner p{margin:0;color:var(--muted);font-size:.98rem}
.btn.big{font-size:1.02rem;padding:.85rem 1.4rem}

/* ---- Fuss ---- */
footer{background:var(--slate);color:#c9d1d9;font-size:.9rem;
  padding-block:2rem calc(var(--gap) * .7);border-top:5px solid var(--blue)}
.split{display:grid;gap:1.8rem;grid-template-columns:repeat(auto-fit,minmax(17rem,1fr))}

/* ---- Unterseiten ---- */
.seite{padding-block:var(--sgap)}
.seite h1{margin:0 0 1.4rem;font-size:clamp(1.5rem,4vw,2rem);color:var(--blue-dark)}
.doc{background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:1.6rem 1.8rem;box-shadow:0 2px 10px rgba(32,54,80,.07)}
.doc h2{font-size:1.12rem;margin:1.9rem 0 .5rem}
.doc h2:first-child{margin-top:0}
.doc p{margin:.45rem 0;color:var(--muted)}
.doc ul{margin:.45rem 0;padding-left:1.2rem;color:var(--muted)}
.doc li{margin:.25rem 0}
.doc dl{margin:.4rem 0;display:grid;grid-template-columns:auto 1fr;gap:.3rem 1.2rem}
.doc dt{font-weight:600;color:var(--text)}
.doc dd{margin:0;color:var(--muted)}
.zurueck{display:inline-block;margin-top:1.6rem;font-weight:600}

/* ---- Fuss neu ---- */
footer{background:var(--slate);color:#c9d1d9;font-size:.9rem;
  padding-block:1.4rem;border-top:5px solid var(--blue)}
footer .wrap{display:flex;align-items:center;justify-content:space-between;
  gap:.8rem 1.6rem;flex-wrap:wrap}
footer a{color:#9fc4ef}
footer p{margin:0}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer nav a{text-decoration:none}
footer nav a:hover{text-decoration:underline}