/* ===========================
   WBTSBY – Global Styles
   =========================== */

/* Farben & Basis */
:root{
  --bg:#fff;
  --fg:#000;
}
*{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"Neue Haas Grotesk Display Pro","Helvetica Neue",Arial,Helvetica,system-ui,sans-serif;
}

/* Optional: echte Webfont-Dateien einbinden
@font-face{
  font-family:"Neue Haas Grotesk Display Pro";
  src:url("fonts/NHGDPro.woff2") format("woff2");
  font-weight:400 700;
  font-style:normal;
  font-display:swap;
}
*/

.visually-hidden,
.sr-only{
  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ===========================
   Header / Topbar
   =========================== */
.topbar{
  position:fixed; inset:0 0 auto 0;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px;
  z-index:40;
  pointer-events:none; /* nur interaktive Elemente erlauben */
}

/* Logo als externes SVG-Bild */
.logo{ display:inline-block; line-height:0; pointer-events:auto; }
.logo-img{ height:34px; width:auto; display:block; }

/* Default: Desktop-Logo sichtbar, Mobile-Logo versteckt */
.logo-mobile{ display:none; }

/* Plus/Minus Toggle */
.menu-toggle{
  pointer-events:auto;
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; cursor:pointer; user-select:none;
}
.menu-toggle .pm{
  font-size:24pt; line-height:34px; display:block; transition:opacity .25s ease;
}
.menu-toggle .minus{ opacity:0; position:absolute }

/* Text-Menü (geschlossen → offen via Checkbox) */
.topmenu{
  position:fixed; top:16px; right:64px;
  display:flex; gap:10px; align-items:center; justify-content:flex-end;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  pointer-events:auto;
}
.topmenu a{
  font-size:16pt;           /* Vorgabe */
  line-height:34px;         /* Vorgabe */
  text-decoration:none;
  color:var(--fg);
  cursor:cell;              /* Vorgabe */
}
.topmenu a:hover{ text-decoration:underline }

/* Toggle-Zustände (ohne JS) */
#nav-toggle:not(:checked) ~ .topbar .topmenu{ opacity:0; visibility:hidden }
#nav-toggle:checked ~ .topbar .topmenu{ opacity:1; visibility:visible }
#nav-toggle:checked ~ .topbar .menu-toggle .plus{ opacity:0 }
#nav-toggle:checked ~ .topbar .menu-toggle .minus{ opacity:1 }

/* ===========================
   Rechter vertikaler Rail-Text
   =========================== */
.legal-rail{
  position:fixed; top:0; right:20px; bottom:20px;
  display:flex; align-items:flex-end;
  writing-mode:vertical-rl; transform:rotate(180deg); /* bottom → top */
  font-size:8pt; letter-spacing:.2px;
  max-width:1ch; z-index:10; pointer-events:none; opacity:.85;
}

/* ===========================
   Layout / Produktsektionen
   =========================== */
.wrapper{ max-width:1400px; margin:0 auto; }
.product{
  min-height:100svh;
  display:grid; place-items:center;
  position:relative;
  padding:64px 24px 96px; /* Platz für Topbar & NEXT PRODUCT */
}

/* ===========================
   Slideshow (ohne Pfeile)
   =========================== */
.product-figure{ margin:0; display:grid; place-items:center; width:100% }

/* ===========================
   Slideshow mit Crossfade
   =========================== */
.slideshow .slides{
  position:relative;
  display:grid;
  align-items:center;
  justify-items:center;
  width:100%;
  height:calc(100svh - 160px); /* volle Höhe minus Topbar + NEXT PRODUCT */
  overflow:hidden;
}

.slideshow .slide{
  grid-area:1/1;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  margin:auto;
  
  opacity:0;
  transition:opacity .5s ease; /* Crossfade */
  position:absolute; /* übereinander stapeln */
  inset:0;
}

/* Radios bleiben unsichtbar */
.slide-radio{ position:absolute; opacity:0; pointer-events:none }

/* Sichtbares Slide – bekommt opacity:1 */
#p1-s1:checked ~ .slides .slide:nth-of-type(1),
#p1-s2:checked ~ .slides .slide:nth-of-type(2),
#p1-s3:checked ~ .slides .slide:nth-of-type(3),
#p1-s4:checked ~ .slides .slide:nth-of-type(4),
#p2-s1:checked ~ .slides .slide:nth-of-type(1),
#p2-s2:checked ~ .slides .slide:nth-of-type(2),
#p2-s3:checked ~ .slides .slide:nth-of-type(3){
  opacity:1;
  z-index:1;
}

/* Intro-Overlay über allem */
#intro-banner{
  position:fixed; inset:0;
  display:grid; place-items:center;
  z-index:60;
  pointer-events:none;
  opacity:0;
  transform:translateZ(0) scale(0.98);
  filter:blur(2px);
  transition:opacity .6s ease, transform .6s ease, filter .6s ease;
}

/* SVG-Größe responsiv an Viewport koppeln */
#intro-banner .intro-svg{
  max-width: 70vw;
  max-height: 50vh;
  width:100%;
  height:auto;
  display:block;
}

/* sichtbarer Zustand */
#intro-banner.is-visible{
  opacity:1;
  transform:translateZ(0) scale(1);
  filter:blur(0);
}

/* nach dem Timeout ausgeblendet */
#intro-banner.is-hidden{
  opacity:0;
  transform:translateZ(0) scale(0.98);
  filter:blur(2px);
}


/* ===========================
   NEXT PRODUCT (unten mittig)
   =========================== */
.next-product{
  position:absolute; left:50%; bottom:20px; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-decoration:none; color:var(--fg);
  font-size:14pt; line-height:34px; /* Vorgaben */
}
.caret{
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:14px solid var(--fg);
  animation:bob 1.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(6px) } }

/* ===========================
   Linke Produktinfos + Modal-Trigger
   =========================== */
.product-meta{
  position:absolute; left:20px; bottom:20px;
  display:flex; flex-direction:column; gap:2px;
  font-size:10pt; /* Vorgabe */
}
.meta-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }

.meta-plus{
  width:24px;
  height:24px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--fg);
  border-radius:50%;
  cursor:cell;
  user-select:none;
  font-size:18px;
  line-height:0;
  color:var(--fg);          /* + ist schwarz im Normalzustand */
  background:transparent;   /* Hintergrund transparent */
  transition:all .25s ease; /* smooth transition */
}

.meta-plus:hover{
  background:var(--fg); /* Kreis schwarz */
  color:#fff;           /* + weiß */
}

.slideshow:focus-visible{
  outline:2px dashed #000;  /* oder entfernen, wenn du keinen Fokusrahmen willst */
  outline-offset:4px;
}

/* Zahlen-Navigation der Slideshow */
.slide-dots{
  display:flex; gap:8px; align-items:center; user-select:none;
  font-size:14pt; line-height:1;
}
.slide-dots label{ cursor:pointer; border-bottom:1px solid transparent }
.slide-dots label:hover{ border-bottom:1px solid var(--fg) }

/* Aktive Nummer hervorheben – via :has() auf Section
   (unterstützt in modernen Browsern: Chrome/Edge/Safari/Firefox 121+) */
section#p1:has(#p1-s1:checked) .slide-dots label:nth-child(1),
section#p1:has(#p1-s2:checked) .slide-dots label:nth-child(2),
section#p1:has(#p1-s3:checked) .slide-dots label:nth-child(3),
section#p1:has(#p1-s4:checked) .slide-dots label:nth-child(4),
section#p2:has(#p2-s1:checked) .slide-dots label:nth-child(1),
section#p2:has(#p2-s2:checked) .slide-dots label:nth-child(2),
section#p2:has(#p2-s3:checked) .slide-dots label:nth-child(3){
  border-bottom:1px solid var(--fg);
}

/* ===========================
   Modal (Details)
   =========================== */
/* ===========================
   Modal (Öffnen/Schließen)
   =========================== */
.modal{
  position:fixed; inset:0; display:grid; place-items:center;
  opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;
  z-index:50;
}
.modal__scrim{ position:absolute; inset:0; background:rgba(0,0,0,.25); cursor:pointer }

/* Panel exakt nach Entwurf */
.modal__panel{
  position:relative; z-index:1;
  background:#fff; color:#000;
  width:100%;
  max-width:900px;          /* mehr Luft wie im Entwurf */
  min-height:360px;
  padding:40px 36px 110px;   /* großer Innenabstand, unten Platz für Button */
  border:1px solid #000;
  box-shadow:none;
}

/* Brand über beide Spalten, linksbündig */
.modal__brand{
  grid-column: 1 / -1;       /* spannt Spalte 1 + 2 */
  justify-self: start;       /* links ausrichten */
  margin: 0 0 24px 0;
}

/* falls ein leeres dd hinter dem Brand-dt steht: ausblenden */
.modal__brand + dd{ display:none; }

/* SVG-Größe */
.modal__brand img{
  display:block;
  width:100%;
  max-width:200px;           /* dein Wunschmaß */
  height:auto;
}

/* zweispaltiges Raster für ITEM / SIZE / INFO */
.modal__specs{
  display:grid;
  grid-template-columns: max-content 1fr; /* statt 50px */
  column-gap:28px;
  row-gap:12px;
  align-items:start;
  max-width:900px;
}

.modal__specs dt,
.modal__specs dd {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
}
/* linke Spalte: Labels */
.modal__specs dt {
  font-weight: 700;          /* fett */
  text-transform: uppercase; /* optional: wie im Entwurf */
  letter-spacing: .3px;      /* optional */
}

/* rechte Spalte: Inhalte */
.modal__specs dd {
  font-weight: 400;          /* normal */
}

/* Close oben rechts – nur Außenkanten zeichnen, keine Doppelränder */
.modal__close{
  position:absolute; top:0; right:0;
  width:40px; height:40px;
  background:#fff; display:grid; place-items:center;
  cursor:cell; font-size:20px; line-height:1;
  border-left:1px solid #000;  /* nur links & unten -> keine doppelte Linie */
  border-bottom:1px solid #000;
  border-top:none; border-right:none;
}

/* Button unten links – nur oben & rechts, damit keine Doppellinie an Panelkante */
.modal__button{
  position:absolute; left:0; bottom:0;
  padding:16px 22px;
  font-size:18px; text-decoration:none; color:#000; background:#fff; cursor:cell;
  border-top:1px solid #000; border-right:1px solid #000; border-left:none; border-bottom:none;
  transition:background .2s ease, color .2s ease;
}
.modal__button:hover{ background:#000; color:#fff }

/* Toggle-Regel (wichtig: generisch, NICHT #modal-toggle) */
.modal-toggle:checked + .modal{ opacity:1; visibility:visible }

/* Layering */
.topbar .topmenu{ z-index:45 }

/* ===== IDEA SECTION ===== */
.idea-section{
  background:#fff;
  min-height:100vh;              /* immer volle Höhe */
  display:flex;                  /* Flexbox für zentrierten Inhalt */
  align-items:center;            /* vertikal mittig */
  justify-content:center;        /* horizontal mittig */
  text-align:left;               /* Textausrichtung */
}
.idea-inner{
  max-width:1100px;
  padding:48px 24px;
  margin:0 auto;
}
.idea-inner h2{
  margin:0 0 16px 0;
  font-weight:800;
  font-size:clamp(20px,4vw,36px);
  line-height:1.1;
  text-transform:uppercase;
  letter-spacing:.3px;
}
.idea-text{
  font-size:clamp(16px,2.2vw,20px);
  line-height:1.6;
  max-width:70ch;
}
.idea-text p{ margin:0 0 1em 0; }

/* ===== HOW TO BUY ===== */
.howtobuy-section{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  background:#f5f5f5;          /* andere Hintergrundfarbe */
  border-top:2px solid #000;   /* stärkerer Rand */
}
.howtobuy-inner{max-width:900px;padding:60px 32px;text-align:center;}
.howtobuy-title{
  font-weight:900;font-size:clamp(24px,5vw,40px);
  margin:0 0 20px 0;letter-spacing:2px;
}
.howtobuy-text{
  font-size:clamp(15px,2vw,18px);
  line-height:1.8;color:#333;
}

/* ===== LEGAL ===== */
.legal-section{
  min-height:100vh;
  display:flex;align-items:flex-start;justify-content:flex-start;
  background:#000;color:#fff;
  padding-top:60px;
}
.legal-inner{max-width:1100px;padding:48px 24px;}
.legal-title{
  font-weight:700;font-size:clamp(18px,4vw,32px);
  margin:0 0 12px 0;color:#fff;
}
.legal-text{
  font-size:clamp(14px,2vw,18px);
  line-height:1.5;color:#ddd;
}
.legal-text p{margin:0 0 1em 0;}

/* ===========================
   Accessibility
   =========================== */
a, label{ outline-offset:3px }
a:focus-visible, label:focus-visible{ outline:2px dashed #000 }

/* ===========================
   Responsive
   =========================== */
@media (max-width: 1024px){ /* Tablet */
  .slideshow .slides{ width:min(80vw, 760px); max-height:calc(100svh - 160px) }
  .topmenu a{ font-size:20pt }
}
@media (max-width: 768px){ /* Mobile */
  .legal-rail{ display:none }
  .slideshow .slides{ width:min(88vw, 640px); max-height:calc(100svh - 150px) }
  .topmenu{ right:56px }
  .topmenu a{ font-size:18pt }
  .product-meta{ left:16px; bottom:20px }
  .next-product{ bottom:22px }
  .logo-desktop{ display:none; }
  .logo-mobile{ display:block; }
	
  /* NEXT PRODUCT rechts unten mit 10px Abstand */
  .next-product{
    left:auto;
    right:30px;
    bottom:22px;           /* gleicher Abstand wie vorher */
    transform:none;        
    align-items:flex-end;  
  }

  /* Text ausblenden, Dreieck bleibt */
  .next-product{
    font-size:0;           /* versteckt den Text visuell */
  }
  .next-product .caret{
    font-size:initial;     /* Pfeil unverändert */
  }
	
  #intro-banner .intro-svg{
    max-width:min(70vw, 420px);
    max-height:min(30vh, 200px);
  }
	
	.modal__brand img{
    max-width: min(90vw, 500px); /* auf Mobile nicht rauslaufen */
  }


/* dt und dd gleich groß, nur Gewicht anders (wie gewünscht) */
.modal__specs dt,
.modal__specs dd { font-size: clamp(16px, 2.2vw, 24px); line-height:1.35; margin:0; }
.modal__specs dt { font-weight:700; text-transform:uppercase; letter-spacing:.3px; }
.modal__specs dd { font-weight:400; }
	
	  .idea-inner{ padding:36px 16px 56px; }
  .idea-text{ max-width:85ch; }
}



/* Distinct section backgrounds */
#idea{ background: #f7f7f7; }
#howtobuy{ background: #fbfbfb; }
#legal{ background: #ffffff; }
#imprint{ background: #f9f9ff; }
#privacy{ background: #f8fffb; }


/* INFO page overlay adjustments */
.overlays, .product-overlays{ display:none !important; } /* remove overlays from index/components */
.idea-overlays{ display:block !important; opacity:1 !important; pointer-events:none; } /* ensure visible on IDEA */
.idea-overlay-hand, .idea-overlay-clouds{ opacity:1 !important; }
section{ border:none !important; } /* no solid lines between sections */