/* vertical.guide – Stylesheet (ersetzt Elementor/OceanWP) */
@import url("fonts.css");

:root{
  --p:#0175C4;      /* Primär */
  --a:#023358;      /* Akzent dunkel */
  --t:#7A7A7A;      /* Text */
  --l:#F4F4F4;      /* hell */
  --c:#00EBEF;      /* Cyan */
  --w:#fff;
  --font:"Roboto Condensed",system-ui,-apple-system,"Segoe UI",Arial,sans-serif;
  --script:"Kaushan Script","Segoe Script",cursive;
  --wrap:1140px;
  --head:78px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--font);font-size:18px;line-height:1.65;color:var(--t);background:var(--w);-webkit-font-smoothing:antialiased}
img,svg{max-width:100%;height:auto}
img{display:block}
a{color:var(--p);text-decoration:none}
a:hover{color:var(--a)}
:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:0;background:var(--a);color:#fff;padding:.6rem 1rem;z-index:1000}
.skip:focus{left:0}
h1,h2,h3,h4{font-weight:500;line-height:1.15;margin:0 0 .5em;color:var(--a)}
p{margin:0 0 1em}
hr.div{width:60px;height:3px;border:0;background:var(--c);margin:1.2rem auto}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:underline}

/* ---------- Header ---------- */
.site-header{position:absolute;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.6rem clamp(1rem,3vw,2.5rem);min-height:var(--head);background:rgba(14,96,158,.5);backdrop-filter:blur(3px)}
.site-header__logo img{height:50px;width:auto}
.site-nav ul{display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:0;list-style:none}
.site-nav a{display:block;padding:.5rem .8rem;color:#fff;font-size:17px;font-weight:500;letter-spacing:.4px;text-transform:uppercase}
.site-nav a:hover,.site-nav a[aria-current]{color:var(--c)}
.nav-toggle{display:none;background:none;border:0;width:48px;height:48px;cursor:pointer;color:#fff}
.nav-toggle__bars,.nav-toggle__bars::before,.nav-toggle__bars::after{display:block;width:26px;height:3px;background:currentColor;border-radius:2px;position:relative;margin:auto;transition:.2s}
.nav-toggle__bars::before,.nav-toggle__bars::after{content:"";position:absolute;left:0}
.nav-toggle__bars::before{top:-8px}.nav-toggle__bars::after{top:8px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0;transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0;transform:rotate(-45deg)}
@media(max-width:1000px){
  .nav-toggle{display:block}
  .site-nav{position:absolute;left:0;right:0;top:100%;background:rgba(2,51,88,.97);display:none}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;padding:.5rem 1rem 1rem}
  .site-nav a{padding:.8rem .4rem;border-bottom:1px solid rgba(255,255,255,.12)}
}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate;min-height:var(--h,60vh);display:grid;place-items:center;text-align:center;color:#fff;
  padding:calc(var(--head) + 2rem) 1.25rem 5rem;background-color:var(--a);background-position:center;background-size:cover;background-repeat:no-repeat;background-attachment:fixed;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ov,rgba(0,0,0,.25))}
.hero__in{max-width:820px;width:100%}
.hero h1,.hero h2,.hero p{color:#fff;text-shadow:0 1px 40px rgba(0,0,0,.55)}
.hero .rich{color:#fff}
.hero__edge{position:absolute;left:0;bottom:-1px;width:100%;height:53px;fill:#fff;transform:scaleX(-1);z-index:2}
.hero__slide{position:absolute;inset:0;z-index:-2;background:var(--a) center/cover no-repeat;opacity:0;transition:opacity .8s ease}
.hero__slide.is-on{opacity:1;animation:kb var(--dur,7500ms) ease-out forwards}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.12)}}
.hero[data-slides]{background-attachment:scroll}
@media(max-width:1024px){.hero{background-attachment:scroll}}
@media(prefers-reduced-motion:reduce){.hero__slide.is-on{animation:none}.hero,html{scroll-behavior:auto}}

/* ---------- Typografie-Helfer (aus Elementor-Einstellungen abgeleitet) ---------- */
.script{font-family:var(--script);font-weight:700;letter-spacing:-.02em}
.s-xl{font-size:clamp(2.1rem,5vw,4rem)}
.s-lg{font-size:clamp(1.8rem,4vw,2.9rem)}
.s-md{font-size:clamp(1.4rem,2.6vw,1.9rem)}
.s-sm{font-size:.9rem}
.c-w{color:#fff}.c-p{color:var(--p)}.c-a{color:var(--a)}.c-k{color:#000}
.b{font-weight:700}
.ta-c{text-align:center}.ta-r{text-align:right}
.rich>:last-child{margin-bottom:0}
.rich ul,.rich ol{padding-left:1.3em;margin:0 0 1em}
.rich b,.rich strong{color:var(--a);font-weight:700}
.bg-p .rich b,.bg-a .rich b,.hero .rich b{color:inherit}

/* ---------- Sektionen & Spalten ---------- */
.sec{padding:clamp(1.8rem,4vw,3.2rem) 1.25rem}
.sec>.row{max-width:var(--wrap);margin-inline:auto}
.row{display:flex;flex-wrap:wrap;gap:2rem;align-items:flex-start;width:100%}
.row[style*="--w"]{width:calc(var(--w)*1%)}
.row[style*="--w"]:not(.row--2):not(.row--3){margin-inline:auto}
.row[style*="--ml"]{margin-left:calc(var(--ml)*1%)}
.row .col{flex:1 1 calc(var(--w,100)*1% - 2rem);min-width:min(100%,260px)}
.row:not(.row--2):not(.row--3) .col{flex-basis:100%}
.sec .row .row{padding:0}
.bg-p{background:var(--p);color:#fff}.bg-a{background:var(--a);color:#fff}.bg-l{background:var(--l)}
.bg-p h1,.bg-p h2,.bg-p h3,.bg-a h1,.bg-a h2,.bg-a h3{color:#fff}
.bg-img{background-size:cover;background-position:center}
.bg-fix{background-attachment:fixed}
@media(max-width:767px){.row{gap:1.2rem}.row .col{flex-basis:100%}.row[style*="--w"],.row[style*="--ml"]{width:100%;margin-left:0}.bg-fix{background-attachment:scroll}}

/* ---------- Bausteine ---------- */
.fig{margin:0 0 1.2rem}
.fig img{width:100%;border-radius:2px}
.fig figcaption{font-size:.85rem;margin-top:.4rem}
.fig a{display:block;overflow:hidden}
.fig a img{transition:transform .5s ease}
.fig a:hover img{transform:scale(1.04)}
.btn{display:inline-block;background:var(--p);color:#fff;padding:.65rem 1.5rem;border-radius:2px;font-weight:500;letter-spacing:.4px;text-transform:uppercase;font-size:16px;transition:background .5s}
.btn:hover,.btn:focus{background:var(--a);color:#fff}
.iconbtn{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:50%;background:var(--p);color:#fff}
.iconbtn:hover{background:var(--a);color:#fff}
.ico{width:1.2em;height:1.2em;flex:none}
.iconlist{list-style:none;margin:0 0 1em;padding:0}
.iconlist li{display:flex;align-items:center;gap:.6rem;margin-bottom:.5rem}
.iconlist .ico{color:var(--p)}
.meter{margin-bottom:1.1rem}
.meter__l{display:block;font-weight:500;color:var(--a);margin-bottom:.3rem;letter-spacing:.4px}
.meter__bar{height:14px;background:var(--l);border-radius:7px;overflow:hidden}
.meter__bar i{display:block;height:100%;background:var(--p);border-radius:7px}
.card{position:relative;display:block;overflow:hidden;aspect-ratio:3/4;border-radius:2px;color:#fff;background:var(--a)}
.card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.card span{position:absolute;inset:auto 0 0 0;padding:2rem 1rem 1rem;background:linear-gradient(transparent,rgba(2,51,88,.9));font-size:1.15rem;font-weight:500}
.card:hover img{transform:scale(1.05)}
.card:hover{color:#fff}
.rawhtml{margin:0 0 1em}
.embed{position:relative;aspect-ratio:16/9;background:var(--a);color:#fff;display:grid;place-items:center;text-align:center;padding:1rem;border-radius:2px}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.embed__box{max-width:34rem;font-size:15px;line-height:1.5}
.embed__box .btn{margin-top:.6rem;border:0;cursor:pointer}
.embed__box a{color:var(--c)}

/* ---------- Popup (Bild-Lightbox) ---------- */
.popup{border:0;padding:1rem;max-width:min(94vw,980px);max-height:92vh;background:#fff;border-radius:3px}
.popup::backdrop{background:rgba(0,0,0,.75)}
.popup img{max-height:80vh;width:auto;margin:auto}
.popup .sec{padding:0}
.popup form{position:sticky;top:0;text-align:right;height:0}
.popup__x{position:relative;z-index:2;width:40px;height:40px;border:0;border-radius:50%;background:var(--a);color:#fff;font-size:24px;line-height:1;cursor:pointer}

/* ---------- Footer ---------- */
.site-footer{background:var(--a);color:#fff;font-size:16px}
.site-footer a{color:#fff}.site-footer a:hover{color:var(--c)}
.site-footer__in{max-width:var(--wrap);margin:auto;padding:3rem 1.25rem;display:grid;grid-template-columns:2fr 1.2fr 1.5fr;gap:2rem;align-items:start}
.site-footer__logo{height:70px;width:auto;margin-bottom:1rem}
.site-footer address{font-style:normal}
.site-footer__social{display:grid;gap:1rem;justify-items:start}
.site-footer .google{display:flex;align-items:center;gap:.6rem}
.site-footer .google img{height:28px;width:auto}
.site-footer__partners{display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap}
.site-footer__partners img{height:56px;width:auto}
.site-footer__bar{border-top:1px solid rgba(255,255,255,.18);padding:1rem 1.25rem;display:flex;flex-wrap:wrap;gap:.5rem 1.5rem;justify-content:center;font-size:14px}
.site-footer__bar .linklike{color:#fff}
@media(max-width:800px){.site-footer__in{grid-template-columns:1fr}}
.fab{position:fixed;right:18px;z-index:60;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;box-shadow:0 3px 12px rgba(0,0,0,.3)}
.fab .ico{width:28px;height:28px}
.fab--wa{bottom:18px;background:#25D366}
.fab--top{bottom:82px;background:var(--p)}
.fab:hover{color:#fff;filter:brightness(.92)}

/* ---------- Cookie-/Consent-Banner ---------- */
.consent{position:fixed;inset:auto 0 0 0;z-index:200;display:flex;justify-content:center;padding:1rem;pointer-events:none}
.consent__box{pointer-events:auto;width:min(100%,720px);max-height:90vh;overflow:auto;background:#fff;color:#444;border-radius:4px;box-shadow:0 8px 40px rgba(0,0,0,.35);padding:1.4rem 1.5rem;font-size:15px;line-height:1.5}
.consent h2{font-size:1.4rem;margin-bottom:.4rem}
.consent p{margin:0 0 .8rem}
.consent__opts{display:grid;gap:.6rem;margin:1rem 0}
.consent__opt{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem .8rem;border:1px solid #ddd;border-radius:3px}
.consent__opt input{margin-top:.3rem;width:18px;height:18px;accent-color:var(--p)}
.consent__opt small{display:block;color:#777}
.consent__btns{display:flex;flex-wrap:wrap;gap:.6rem}
.consent__btns .btn{border:0;cursor:pointer}
.consent__btns .btn--ghost{background:#fff;color:var(--a);box-shadow:inset 0 0 0 2px var(--a)}
.consent__btns .btn--ghost:hover{background:var(--a);color:#fff}
.consent__links{font-size:13px;margin-top:.8rem;color:#777}