/* ===========================
   OWN THE SUN – CI Stylesheet
   =========================== */

/* ---- Farb- & Typo-Variablen ---- */
:root{
  --gold:#FCC90D;              /* Solar Gold */
  --blue:#02476D;              /* Deep Solar Blue */
  --text:#02476D;
  --bg:#FFFFFF;
  --border:#c9d7e3;
}

/* ---- Reset/Grundlagen ---- */
html{box-sizing:border-box;scroll-behavior:smooth}
*,*:before,*:after{box-sizing:inherit}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}

/* ---- Typografie ---- */
h1,h2,h3{
  font-family:"Playfair Display",Georgia,serif;
  color:var(--blue); text-transform:uppercase; letter-spacing:.03em; margin:0 0 .5rem
}
h1{font-size:clamp(28px,4.2vw,46px)}
h2{font-size:clamp(22px,3vw,30px)}
h3{font-size:clamp(18px,2.2vw,22px)}
p,li{max-width:75ch}

/* ---- Layout ---- */
.container{max-width:1100px;margin:0 auto;padding:0 16px}
.logo{display:block;margin:24px auto;max-width:340px;height:auto}

/* ---- Hero / Startseite ---- */
.hero{padding:4rem 1rem;text-align:center}
#home .hero, #home h1, #home h2{ text-align:center }

/* ---- Sektionen ---- */
section{padding:2rem 1rem;margin-inline:auto;max-width:1100px}
.trust ul{list-style:none;padding:0;margin:1rem auto;display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center}
.trust li{border:1px solid #e6eef4;border-radius:8px;padding:.5rem .75rem}

/* ---- Buttons ---- */
.btn, .btn-secondary, button{
  display:inline-block;border-radius:8px;padding:14px 20px;
  font-weight:600;text-decoration:none;cursor:pointer;border:2px solid var(--gold);
  transition:transform .06s ease, background-color .15s ease
}
.btn{background:var(--gold);color:var(--blue)}
.btn:hover{background:transparent;color:var(--blue);transform:translateY(-1px)}
.btn-secondary{background:transparent;color:var(--blue)}
.btn-secondary:hover{background:var(--gold);color:var(--blue)}
.btn-lg{padding:16px 26px;font-size:1.05rem}

/* ---- Formulare (global) ---- */
form input, form textarea, form select, form button{
  width:100%;max-width:700px;margin:.5rem auto;display:block;
  padding:.7rem .85rem;border:1px solid var(--border);border-radius:8px;
  background:#fff;font-size:1rem
}
form textarea{resize:vertical}
form input:focus, form textarea:focus, form select:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(252,201,13,.22)
}

/* ---- Checkboxen inline (eine Zeile, klickbarer Text) ---- */
.checkbox-line{
  display:flex;align-items:center;gap:.5rem;margin:.5rem auto;max-width:700px;text-align:left
}
.checkbox-line input[type="checkbox"]{
  flex-shrink:0;width:18px;height:18px;accent-color:var(--gold)
}
label.checkbox{ /* falls irgendwo <label class="checkbox"> verwendet wird */
  display:flex;align-items:center;gap:.45rem;cursor:pointer;max-width:700px;margin:.5rem auto;line-height:1.45;font-size:.95rem
}
label.checkbox input[type="checkbox"]{flex-shrink:0;width:18px;height:18px;accent-color:var(--gold)}

/* ---- Inline-Lead (Startseite) ---- */
.inline-lead{padding-top:1rem}
.inline-lead h2{text-align:center;margin-bottom:.75rem}

/* ---- FAQ Teaser ---- */
.faq-teaser ul{list-style:disc;padding-left:1.25rem;margin:.5rem 0 1rem}
.faq-teaser li{margin:.25rem 0}

/* ---- 404/Fehlseiten (optional) ---- */
.not-found, .not-found h1{text-align:center}

/* ---- Footer Kleinteile ---- */
.microcopy{opacity:.85;font-size:.92rem}

/* ---- Responsive ---- */
@media (max-width: 640px){
  .hero{padding:3rem 1rem}
  .btn-lg{width:100%}
  form input, form textarea, form button{max-width:100%}
}