* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
body { margin:0; padding:0; font-family: 'Roboto Slab', serif; }

section { padding: 100px 140px; min-height: 100vh; display: flex; align-items: flex-start; }
.section-inner { max-width: 1600px; margin: 0 auto; width: 100%; position: relative; }

.kicker { font-weight: 700; font-size: 35px; line-height: 45px; margin: 0 0 8px 0; cursor: pointer; transition: opacity 0.3s ease; opacity: 1; }
.kicker:hover { opacity: 0.6; }

.headline { font-weight: 700; font-size: 75px; line-height: 90px; margin: 0 0 30px 0; }
.hero-headline { padding-top: 80px; margin-bottom: 80px; }
.text { font-weight: 700; font-size: 35px; line-height: 45px; margin: 0 0 30px 0; }
.col-title { font-weight: 700; font-size: 35px; line-height: 45px; margin-bottom: 16px; }
.col-text { font-weight: 700; font-size: 22px; line-height: 32px; }
.list-text { font-weight: 700; font-size: 22px; line-height: 32px; margin-bottom: 30px; }
.screenshot-placeholder { background:#ffffff; border-radius:8px; height:220px; display:flex; align-items:center; justify-content:center; font-size:12px; opacity:0.6; }

.btn { border: none; border-radius: 0; padding: 15px 40px; font-weight: 700; font-size: 25px; line-height: 32px; cursor: pointer; transition: 0.3s ease; }

/* Farbklassen, fest definiert, einmalig */
.blue      { background:#02aeea; color:#04303f; }
.blue .btn { background:#04303f; color:#02aeea; }
.blue .btn:hover { background:#0a5570; }
.blue .screenshot-placeholder { color:#04303f; }

.navy      { background:#023347; color:#d8f2fc; }
.navy .btn { background:#d8f2fc; color:#023347; }
.navy .btn:hover { background:#7fd4f0; }

.sky       { background:#016d95; color:#d8f2fc; }
.sky .btn  { background:#d8f2fc; color:#016d95; }
.sky .btn:hover { background:#7fd4f0; }
.sky .screenshot-placeholder { color:#016d95; }

.ice       { background:#d8f2fc; color:#04303f; }
.ice .btn  { background:#04303f; color:#d8f2fc; }
.ice .btn:hover { background:#0a5570; }
.ice .screenshot-placeholder { color:#04303f; }

.divider { min-height: 220px; background-size: cover; background-position: center; padding: 0; }

nav { display:flex; justify-content:space-between; align-items:center; height: 100px; margin-bottom: 24px; }
.lang-floating { position: absolute; right: 0; bottom: 30px; display:flex; gap:16px; font-size:22px; font-weight: 700; }
.lang-floating span:last-child { opacity:0.5; }
.lang-floating span { transition: opacity 0.3s ease; cursor: pointer; }
.lang-floating span:hover { opacity: 1 !important; }
nav .brand { display:flex; align-items:center; gap:12px; font-size:22px; font-weight:700; }
nav .dot { width:36px; height:36px; border-radius:50%; background:#04303f; }
nav .links { display:flex; gap:36px; font-size:22px; font-weight: 700; }
nav .links a { color: inherit; text-decoration: none; }
nav .links a:not(:first-child) { opacity:0.6; }
nav .links a { transition: opacity 0.3s ease; cursor: pointer; }
nav .links a:hover { opacity: 1 !important; }

.footer-links { display:flex; justify-content:flex-end; gap:24px; margin-top:60px; font-size:18px; font-weight:700; }
.footer-links span, .footer-links a { cursor:pointer; opacity:0.7; transition:opacity 0.3s ease; color:inherit; text-decoration:none; }
.footer-links span:hover, .footer-links a:hover { opacity:1; }

/* Lightbox */
.lightbox-overlay { display:none; position:fixed; inset:0; background:rgba(2,51,71,0.85); z-index:100; align-items:center; justify-content:center; padding:40px; opacity:0; transition: opacity 0.3s ease; }
.lightbox-overlay.open { display:flex; opacity:1; }
.lightbox-box { background:#ffffff; color:#04303f; max-width:700px; width:100%; max-height:80vh; overflow-y:auto; padding:48px; border-radius:4px; position:relative; transform: translateY(20px); transition: transform 0.3s ease; }
.lightbox-overlay.open .lightbox-box { transform: translateY(0); }
.lightbox-close { position:absolute; top:24px; right:28px; font-size:28px; cursor:pointer; font-weight:700; }
.lightbox-content { display:none; }
.lightbox-content.active { display:block; }
.lightbox-content h2 { font-size:32px; font-weight:700; margin-bottom:24px; }
.lightbox-content p { font-size:16px; line-height:1.7; }

/* Nach-oben-Button mit Einblendanimation beim Hochscrollen */
#back-to-top {
  position: fixed;
  bottom: 32px;
  right: 32px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #02aeea;
  color: #04303f;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
  border: none;
  opacity: 0;
  transform: translateY(20px);
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
  z-index: 90;
}
#back-to-top.visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}