/* === RESET & BASE === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{font-family:arial,system-ui,sans-serif;color:#1a1a1a;background:radial-gradient(ellipse farthest-corner,white 50%,#a0abe3 95%,#014969 130%);line-height:1.6;min-height:100vh}
img{max-width:100%;height:auto;display:block}
a{color:#014fc9}

/* === SKIP LINK === */
.skip-link{position:absolute;top:-100%;left:0;padding:8px 16px;background:#000;color:#fff;z-index:9999;text-decoration:none}
.skip-link:focus{top:0}

/* === HEADER === */
header{background:linear-gradient(105deg,#a0abe3 0%,#6470d6 28%,#3d49b8 55%,#1e2781 100%);padding:0;position:sticky;top:0;z-index:100;box-shadow:0 3px 14px rgba(15,22,100,.35)}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1100px;margin:0 auto;gap:16px}
.logo-link img{height:auto;width:240px;display:block}

/* === NAV === */
nav{display:flex;gap:6px;flex-wrap:wrap}
nav a{display:block;color:rgba(255,255,255,.92);padding:8px 16px;font-size:14px;font-weight:500;text-decoration:none;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);border-radius:20px;transition:all .2s ease;white-space:nowrap}
nav a:hover,nav a:focus{color:#fff;background:rgba(255,255,255,.28);border-color:rgba(255,255,255,.6);box-shadow:0 2px 8px rgba(0,0,0,.15)}

/* === MAIN === */
main{max-width:1000px;margin:0 auto;padding:24px 16px;background:#fff}
#alles{max-width:1100px;margin:0 auto;background:#fff}

/* === SLIDER === */
.slider-wrap{position:relative;overflow:hidden;border-radius:4px;box-shadow:0 4px 4px #9d9d9d;margin:20px 0}
.slider-track{display:flex;width:600%;animation:slide-anim 48s infinite}
.slider-track img{width:calc(100%/6);flex-shrink:0;aspect-ratio:16/9;object-fit:cover;border-radius:4px}
@keyframes slide-anim{
  0%,13%{transform:translateX(0)}
  14%,15%{transform:translateX(0)}
  16%,29%{transform:translateX(calc(-100%/6))}
  30%,31%{transform:translateX(calc(-100%/6))}
  32%,45%{transform:translateX(calc(-200%/6))}
  46%,47%{transform:translateX(calc(-200%/6))}
  48%,61%{transform:translateX(calc(-300%/6))}
  62%,63%{transform:translateX(calc(-300%/6))}
  64%,77%{transform:translateX(calc(-400%/6))}
  78%,79%{transform:translateX(calc(-400%/6))}
  80%,93%{transform:translateX(calc(-500%/6))}
  94%,95%{transform:translateX(calc(-500%/6))}
  96%,100%{transform:translateX(0)}
}

/* === CONTENT LAYOUT === */
.content-body{display:flex;gap:24px;padding:16px 0}
.text-main{flex:1 1 65%}
.sidebar{flex:0 0 240px;max-width:260px}

/* === TYPOGRAPHY === */
h1{font-size:20px;color:#1e2981;margin:16px 0 8px}
h2,h3{font-size:18px;color:#1e2981;margin:16px 0 8px}
p{margin-bottom:12px;color:#333}
strong{color:#333}
ol,ul{padding-left:20px;margin-bottom:12px}
ol li,ul li{margin-bottom:4px;color:#333}
hr{border:none;border-top:1px solid #d2d5ef;margin:20px 0}
.text-main a{color:#014fc9}

/* === HINWEIS === */
.hinweis{background:#fffccc;padding:10px;border:double 5px #eee;margin:16px 0}
.hinweis p{margin-bottom:8px;font-size:14px}
.hinweis a{color:#014fc9}

/* === STÄDTE GRID === */
.staedte-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin:16px 0}
.staedte-grid a{display:block;padding:10px 8px;background:#fff;border:1px solid #ccc;border-radius:4px;text-decoration:none;color:#111;font-size:15px;text-align:center;transition:all .3s ease}
.staedte-grid a:hover{color:#767fda;border-color:#767fda;background:#f5f5ff}
.affiliate-hinweis{font-size:13px;color:#555;margin-top:8px}
.affiliate-hinweis a{color:#014fc9}

/* === IMAGES === */
.service-img{border-radius:6px;margin:16px 0;max-width:400px}
.content-img{border-radius:6px;margin:16px 0;max-width:100%}
.cta-buttons{display:flex;gap:16px;margin:16px 0;flex-wrap:wrap}
.cta-buttons a img{border-radius:4px;max-width:220px}

/* === FAQ (details/summary) === */
details{border:1px solid #d2d5ef;border-radius:6px;margin-bottom:8px;background:#fff}
summary{padding:14px 16px;cursor:pointer;font-weight:500;list-style:none;display:flex;justify-content:space-between;align-items:center;color:#1e2981}
summary::-webkit-details-marker{display:none}
summary::after{content:'+';font-size:1.2rem;color:#888;transition:transform .2s}
details[open] summary::after{transform:rotate(45deg)}
details p,details div{padding:0 16px 14px;color:#444;line-height:1.6}

/* === SIDEBAR === */
.sidebar-box{border:1px solid #dbdefc;border-radius:10px;padding:16px;text-align:center;background:#fff;font-size:14px;color:#333}
.sidebar-box a{color:#000;text-decoration:none}
.sidebar-box p{font-size:13px;line-height:1.5;margin-bottom:6px}

/* === BUTTON === */
.button{display:inline-block;padding:10px 20px;background:#767fda;color:#fff;text-decoration:none;border-radius:6px;font-weight:500;transition:background .2s;font-size:15px}
.button:hover{background:#014969}

/* === FORM (kontakt.html) === */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;max-width:640px}
.field{display:flex;flex-direction:column;gap:6px}
.field.span-2{grid-column:span 2}
label{font-size:.875rem;font-weight:500;color:#333}
input,textarea{padding:10px 12px;border:1px solid #ccc;border-radius:6px;font-size:1rem;font-family:inherit;width:100%}
input:focus,textarea:focus{outline:2px solid #767fda;border-color:transparent}
textarea{min-height:120px;resize:vertical}
button[type="submit"]{padding:12px 28px;background:#767fda;color:#fff;border:none;border-radius:6px;font-size:1rem;cursor:pointer;transition:background .2s;margin-top:8px}
button[type="submit"]:hover{background:#014969}

/* === FOOTER === */
footer{border-top:1px solid #d2d5ef;padding:20px 24px;text-align:center;font-size:14px;color:#666;background:#fff}
footer a{color:#aaa;text-decoration:none;margin:0 8px}
footer a:hover{color:#1a1a1a}

/* === RESPONSIVE === */
@media(max-width:768px){
  .header-inner{flex-wrap:wrap;gap:8px;padding:8px 12px}
  .logo-link img{width:180px}
  nav a{padding:7px 13px;font-size:13px}
  .content-body{flex-direction:column}
  .sidebar{max-width:100%;width:100%}
  .staedte-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}
  .form-grid{grid-template-columns:1fr}
  .field.span-2{grid-column:span 1}
}
@media(max-width:480px){
  nav{flex-direction:column}
  nav a{width:100%;border-radius:8px;text-align:center}
  h1{font-size:18px}
  h2,h3{font-size:16px}
}