*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif;color:#0c1f2b;background:#fff;line-height:1.6}
img{max-width:100%;height:auto}
a{text-decoration:none}
#container{width:100%;margin:0;padding:0;background:#fff;border:0!important}
.ksm_inner{width:92%;max-width:1180px;margin:0 auto}

#ksm_header{width:100%;background:rgba(255,255,255,.98);border-bottom:1px solid #e2e8eb;position:relative;z-index:20}
.ksm_header_inner{min-height:82px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.ksm_brand{display:flex;align-items:center;gap:12px;color:#071d2b}
.ksm_mark{width:52px;height:52px;border-radius:13px;background:linear-gradient(135deg,#071d2b,#0b74b8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px;font-weight:900;letter-spacing:1px}
.ksm_brand_text strong{display:block;color:#071d2b;font-size:20px;line-height:20px;letter-spacing:2px}
.ksm_brand_text small{display:block;margin-top:5px;color:#6b7b84;font-size:9px;letter-spacing:1.4px}

#navigation{float:none!important;width:auto!important;margin:0!important;padding:0!important;background:transparent!important}
#navigation ul{margin:0!important;padding:0!important;list-style:none!important}
#navigation li{display:inline-block!important;float:none!important;margin:0 4px!important;padding:0!important;background:none!important}
#navigation a{display:inline-block!important;padding:10px 8px!important;color:#071d2b!important;background:transparent!important;border:0!important;font-size:14px!important;font-weight:bold!important;text-decoration:none!important}
#navigation a:hover,#navigation .current a,#navigation .active a{color:#0b74b8!important}

#ksm_hero{position:relative;width:100%;min-height:590px;display:flex;align-items:center;color:#fff;background-image:linear-gradient(90deg,rgba(7,29,43,.98) 0%,rgba(7,29,43,.90) 34%,rgba(7,29,43,.52) 66%,rgba(7,29,43,.20) 100%),url("1001-emotionheader.jpg");background-size:cover;background-position:center center;background-repeat:no-repeat}
.ksm_hero_inner{padding:85px 0}
.ksm_eyebrow{margin-bottom:17px;color:#d4df7c;font-size:12px;font-weight:bold;letter-spacing:3px}
#ksm_hero h1{max-width:700px;margin:0 0 24px;color:#fff!important;font-size:70px;line-height:.98;font-weight:900;letter-spacing:-3px}
#ksm_hero p{max-width:640px;margin:0 0 29px;color:#dce8ee!important;font-size:19px;line-height:1.55}
.ksm_buttons{display:flex;flex-wrap:wrap;gap:12px}
.ksm_btn{display:inline-block;padding:14px 23px;border-radius:30px;font-size:14px;font-weight:bold;text-decoration:none!important}
.ksm_btn_blue{background:#0b74b8;color:#fff!important}
.ksm_btn_blue:hover{background:#095f96}
.ksm_btn_white{background:#fff;color:#071d2b!important}
.ksm_btn_white:hover{background:#edf2f4}

#wrapper{width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important}
#content{float:none!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important;background:#fff!important}
#content .gutter{padding:0!important}
.ksm_content_inner{width:92%;max-width:1160px;margin:0 auto;padding:70px 0}
#content h1,#content h2,#content h3,#content h4{color:#071d2b!important;font-family:Arial,Helvetica,sans-serif!important}
#content h1{font-size:44px!important;line-height:1.08!important}
#content h2{font-size:36px!important;line-height:1.12!important}
#content h3{font-size:25px!important}
#content p,#content li{color:#52656f!important;font-size:17px!important;line-height:1.7!important}
#content a{color:#0b74b8}

#sidebar{float:none!important;width:92%!important;max-width:1160px!important;margin:0 auto 55px!important;padding:0!important;background:#f5f6f3!important;border-radius:18px}
#sidebar_content{padding:25px!important}

#footer{width:100%!important;margin:0!important;padding:0!important;background:#061927!important;color:#b9c9d1!important}
.ksm_footer_inner{padding:42px 0}
.ksm_footer_brand{margin-bottom:20px}
.ksm_footer_brand strong{display:block;color:#fff;font-size:24px;letter-spacing:2px}
.ksm_footer_brand span{color:#b9c9d1;font-size:13px}
#footer .gutter{padding:0!important}
#footer a{color:#fff!important}
#footer a:hover{color:#75bce3!important}
.c{clear:both}

@media screen and (max-width:900px){
  .ksm_header_inner{display:block;padding:14px 0}
  .ksm_brand{margin-bottom:12px}
  #navigation{text-align:left!important}
  #navigation li{margin:2px 4px 2px 0!important}
  #ksm_hero{min-height:520px;background-position:62% center}
  #ksm_hero h1{font-size:50px;letter-spacing:-2px}
  #ksm_hero p{font-size:17px}
}

@media screen and (max-width:560px){
  .ksm_inner,.ksm_content_inner{width:90%}
  .ksm_brand_text small{display:none}
  #navigation li{display:block!important;width:100%!important;margin:0!important;border-top:1px solid #edf1f3}
  #navigation a{display:block!important;width:100%!important;padding:9px 3px!important}
  #ksm_hero{min-height:500px;background-position:65% center}
  .ksm_hero_inner{padding:60px 0}
  #ksm_hero h1{font-size:41px;letter-spacing:-1.5px}
  #ksm_hero p{font-size:16px}
  .ksm_btn{width:100%;text-align:center}
  .ksm_content_inner{padding:48px 0}
  #content h1{font-size:34px!important}
  #content h2{font-size:29px!important}
}                            
#ksm_hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(7,29,43,.98) 0%,
            rgba(7,29,43,.90) 34%,
            rgba(7,29,43,.52) 66%,
            rgba(7,29,43,.20) 100%
        ),
        url("mountainbike_abenteuer_vor_alpenkulisse.png") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}                            
#ksm_hero {
    background-image:
        linear-gradient(
            90deg,
            rgba(7,29,43,.98) 0%,
            rgba(7,29,43,.90) 34%,
            rgba(7,29,43,.52) 66%,
            rgba(7,29,43,.20) 100%
        ),
        url("https://103.sb.mywebsite-editor.com/rest/websites/843968619/storage-files/7060316/preview") !important;

    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}                            
#header_wrapper {
    position: relative !important;
}

#header_wrapper::before {
    content: "";
    display: block;
    width: 210px;
    height: 95px;

    background-image: url("https://103.sb.mywebsite-editor.com/rest/websites/843968619/storage-files/6355807/preview");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;

    margin: 0 auto;
}                            
.ksm_logo_image {
    display: block !important;
    width: 185px !important;
    max-width: 185px !important;
    height: auto !important;
}

.ksm_brand {
    display: flex !important;
    align-items: center !important;
}

@media screen and (max-width: 560px) {
    .ksm_logo_image {
        width: 145px !important;
        max-width: 145px !important;
    }
}                            
/* Navigation moderner gestalten */

#navigation ul {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}

#navigation li {
    margin: 0 !important;
}

#navigation a {
    padding: 10px 12px !important;
    border-radius: 22px !important;
    transition: all .2s ease !important;
}

#navigation a:hover {
    background: #eef5f8 !important;
    color: #0b74b8 !important;
}

/* letzten normalen Menüpunkt etwas zurückhaltender */
#navigation li:last-child a {
    color: #667780 !important;
    font-size: 13px !important;
}

/* aktiver Menüpunkt */
#navigation .current a,
#navigation .active a {
    background: #071d2b !important;
    color: #ffffff !important;
}                            
#navigation li:last-child a {
    background: #0b74b8 !important;
    color: #ffffff !important;
    padding: 11px 16px !important;
    border-radius: 24px !important;
    font-size: 14px !important;
    font-weight: 800 !important;
}

#navigation li:last-child a:hover {
    background: #095f96 !important;
    color: #ffffff !important;
}                            
/* KSM Buttons */
a.button,
button,
.ksm_btn,
#navigation li:last-child a {
    background: #0b74b8 !important;
    color: #ffffff !important;
    border-radius: 24px !important;
    font-weight: bold !important;
}
#content h1,
#content h2 {
    color: #071d2b !important;
    font-weight: 800 !important;
    letter-spacing: -1px !important;
}

#content h1 {
    font-size: 42px !important;
}

#content h2 {
    font-size: 32px !important;
}
#content .gutter > div,
.ksm_content_inner > div {
    margin-bottom: 28px;
}
a.button:hover,
button:hover,
.ksm_btn:hover,
#navigation li:last-child a:hover {
    background: #095f96 !important;
}                            
#content img {
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(7,29,43,.10);
}                            
@media screen and (max-width: 560px) {

    #content h1 {
        font-size: 33px !important;
    }

    #content h2 {
        font-size: 27px !important;
    }

    #content p {
        font-size: 16px !important;
    }
/* =========================================
   STARTSEITE: MODERNE LEISTUNGS-KARTEN
   ========================================= */

.ksm_content_inner > div:nth-child(1),
.ksm_content_inner > div:nth-child(2),
.ksm_content_inner > div:nth-child(3) {
    background: #ffffff !important;
    border: 1px solid #dfe6ea !important;
    border-radius: 20px !important;
    padding: 26px !important;
    box-shadow: 0 10px 28px rgba(7,29,43,.07) !important;
}

/* Überschriften in den Karten */
.ksm_content_inner > div:nth-child(1) h1,
.ksm_content_inner > div:nth-child(1) h2,
.ksm_content_inner > div:nth-child(2) h1,
.ksm_content_inner > div:nth-child(2) h2,
.ksm_content_inner > div:nth-child(3) h1,
.ksm_content_inner > div:nth-child(3) h2 {
    margin-top: 0 !important;
    color: #071d2b !important;
}

/* Links in den Karten */
.ksm_content_inner > div:nth-child(1) a,
.ksm_content_inner > div:nth-child(2) a,
.ksm_content_inner > div:nth-child(3) a {
    color: #0b74b8 !important;
    font-weight: bold !important;
}

/* Desktop: 3 Karten nebeneinander */
@media screen and (min-width: 851px) {
    .ksm_content_inner {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 22px !important;
        align-items: start !important;
    }

    .ksm_content_inner > div:nth-child(n+4) {
        grid-column: 1 / -1 !important;
    }
}

/* Tablet & Smartphone: untereinander */
@media screen and (max-width: 850px) {
    .ksm_content_inner {
        display: block !important;
    }

    .ksm_content_inner > div:nth-child(1),
    .ksm_content_inner > div:nth-child(2),
    .ksm_content_inner > div:nth-child(3) {
        margin-bottom: 20px !important;
    }
}
    #content img {
        width: 100% !important;
        height: auto !important;
    }
}
/* =========================================
   BIKEZEIT 27 ALS HIGHLIGHT-BEREICH
   ========================================= */

/* 4. Inhaltsblock der Startseite */
.ksm_content_inner > div:nth-child(4) {
    grid-column: 1 / -1 !important;

    background:
        linear-gradient(
            90deg,
            rgba(7,29,43,.97),
            rgba(7,29,43,.88)
        ) !important;

    color: #ffffff !important;

    border-radius: 26px !important;

    padding: 42px !important;

    margin-top: 14px !important;
    margin-bottom: 35px !important;

    box-shadow: 0 14px 35px rgba(7,29,43,.16) !important;
}

/* Überschriften weiß */
.ksm_content_inner > div:nth-child(4) h1,
.ksm_content_inner > div:nth-child(4) h2,
.ksm_content_inner > div:nth-child(4) h3 {
    color: #ffffff !important;
}

/* Texte hell */
.ksm_content_inner > div:nth-child(4) p,
.ksm_content_inner > div:nth-child(4) li {
    color: #dce7ec !important;
}

/* Bild im Bikezeit-Bereich */
.ksm_content_inner > div:nth-child(4) img {
    border-radius: 18px !important;
    box-shadow: 0 12px 30px rgba(0,0,0,.20) !important;
}

/* Button */
.ksm_content_inner > div:nth-child(4) a {
    display: inline-block !important;

    background: #0b74b8 !important;
    color: #ffffff !important;

    padding: 13px 20px !important;

    border-radius: 28px !important;

    font-weight: bold !important;

    margin-top: 8px !important;
}

.ksm_content_inner > div:nth-child(4) a:hover {
    background: #095f96 !important;
}


/* Smartphone */
@media screen and (max-width: 560px) {

    .ksm_content_inner > div:nth-child(4) {
        padding: 26px 20px !important;
        border-radius: 20px !important;
    }
}