/* ===== Base layout ===== */
*{box-sizing:border-box;}
body{
    margin:0;
    font-family:Arial, sans-serif;
    color:#333;
    text-align:center;
    background:#f8f9fa;
}

/* ===== Fixed slim header ===== */
header{
    position:fixed;
    top:0; left:0; width:100%;
    background:#ffffff;
    padding:12px 16px;
    box-shadow:0 2px 6px rgba(0,0,0,.1);
    z-index:1000;
}
.header-title{margin:0;font-size:1.8em;color:#2c3e50;}
.header-subtitle{margin:0;font-size:.9em;color:#7f8c8d;}
nav ul{list-style:none;margin:6px 0 0;padding:0;display:flex;gap:16px;justify-content:center;}
nav a{text-decoration:none;color:#2c3e50;font-weight:bold;font-size:.9em;}

/* Spacer to offset fixed header height */
.header-spacer{height:90px;}   /* keep in sync with header padding & line-height */

/* ===== Sections & background helpers ===== */
section{padding:50px 20px;}
.white{background:#ffffff;}
.beige{background:#fdf3e7;}
.orange{background:#f5b041;}
.lightblue{background:#aed6f1;}
.cream            { background:#faf6ef; }
.beige-cream      { background:linear-gradient(#fdf3e7,#faf6ef); }
.cream-white      { background:linear-gradient(#faf6ef,#ffffff); }

/* ===== Transition strips ===== */
.transition{height:8px;}
@media(min-width:768px){.transition{height:12px;}}
.white-beige{background:linear-gradient(#ffffff,#fdf3e7);}
.beige-white{background:linear-gradient(#fdf3e7,#ffffff);}
.white-orange{background:linear-gradient(#ffffff,#f5b041);}
.white-lightblue{background:linear-gradient(#ffffff,#aed6f1);}
.lightblue-beige{background:linear-gradient(#aed6f1,#fdf3e7);}

/* ===== Buttons & CTA ===== */
.btn,
.rent-link{
    display:inline-block;
    padding:10px 24px;
    background:#f5b041;
    color:#fff;
    border-radius:6px;
    text-decoration:none;
    font-weight:bold;
    transition:background-color .2s, transform .2s;
}
.btn:hover,
.rent-link:hover{
    background:#e67e22;
    transform:scale(1.05);
}

/* ===== Hero video section ===== */
.hero{
    position:relative;
    height:50vh;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}
.hero video{
    position:absolute;
    inset:0;
    width:100%; height:100%;
    object-fit:cover;
    z-index:-1;
}
.hero-content{position:relative; z-index:1;}

/* ===== Gallery ===== */
.gallery{display:flex;flex-wrap:wrap;gap:15px;justify-content:center;}
.gallery img{width:300px;height:200px;object-fit:cover;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);}

/* ===== Wiki / Anleitung boxes ===== */
.wiki-container{max-width:800px;margin:auto;text-align:left;}
.wiki-entry{background:#ffffff;padding:15px;margin:10px 0;border-radius:5px;box-shadow:0 2px 5px rgba(0,0,0,.1);}
.wiki-entry h3{margin-top:0;}

/* ===== Kontakt page ===== */
.contact-container{max-width:600px;margin:auto;text-align:left;background:#ffffff;padding:20px;border-radius:10px;box-shadow:0 2px 5px rgba(0,0,0,.1);}
.contact-form input,
.contact-form textarea{width:100%;padding:10px;margin:10px 0;border:1px solid #ccc;border-radius:5px;}
.contact-form button{background:#f5b041;color:#fff;padding:10px 20px;border:none;border-radius:5px;cursor:pointer;}

/* ===== Footer compact ===== */
footer{background:#f5b041;color:#fff;padding:20px 20px;font-size:.9em;}
footer h2{margin:0 0 8px;font-size:1.2em;}
footer p{margin:4px 0;}
footer a{color:#fff;text-decoration:underline;}





/* Specs table */
/*.specs-table{width:100%;max-width:700px;margin:0 auto;border-collapse:collapse;}
.specs-table td{padding:4px 6px;text-align:left;vertical-align:top;}
@media(max-width:600px){
.specs-table td{display:block;width:100%;}
}
*/

/* --- zweispaltiges Specs-Layout --- */

.spec-columns{
    display:flex;
    gap:80px;
    justify-content:center;
    flex-wrap:wrap;
    max-width:1500px;
    margin:0 auto;
  }
  
  .spec-columns ul{
    list-style:none;
    padding:0; margin:0;
    flex:1 1 600px;
    text-align:left;               /* NEU – gesamter Block linksbündig */
  }
  
  .spec-columns li{
    display:flex;
    align-items:flex-start;
    margin:4px 0;
    line-height:1.6;
    text-align:left;               /* NEU – falls ul geerbtes Center hat */
  }
  
  .spec-columns li strong{
    flex:0 0 130px;
    padding-right:10px;
  }
  
  @media(max-width:700px){
    .spec-columns ul{flex:1 1 100%;}
    .hero video{display:none;}
  }