:root{
  --topbar-h: 70px;
}

html,body{
  margin:0;
  height:100%;
}
body{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: #000;
  color: #fff;
}

/* ===== SEITENLAYOUT ===== */
.page{
  height:100dvh;
  display:grid;
  grid-template-rows: var(--topbar-h) 1fr;
  overflow:hidden;
  background:#000;
}

/* ===== MENU ===== */
.topbar{
  height:var(--topbar-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 20px;
  background:rgba(0,0,0,0.85);
  border-bottom:1px solid rgba(255,255,255,0.15);
  color:white;
}

.menu{
  display:flex;
  gap:15px;
}

.menu a{
  color:white;
  text-decoration:none;
}


/* ===== NAV BUTTONS ===== */
.nav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:40px;
  color:white;
  background:rgba(0,0,0,0.5);
  border:none;
  width:50px;
  height:50px;
  cursor:pointer;
}

.prev{ left:10px; }
.next{ right:10px; }


/* Responsive */
@media (max-width: 600px){
  .viewer{ grid-template-rows: 1fr 115px; }
  .thumb{ width: 120px; height: 80px; }
}

/* ===== CONTENT BEREICH (Text/Bilder) ===== */
.content{
  /* liegt automatisch in der 2. Grid-Zeile (1fr) */
  overflow:auto;                 /* wichtig: Content darf scrollen */
  padding: clamp(16px, 4vw, 48px);
  background:#000;
  -webkit-overflow-scrolling: touch;
}

.content-inner{
  max-width: 900px;              /* mittiger Lesebereich */
  margin: 0 auto;
  width: 100%;
  line-height: 1.65;
  font-size: 16px;
}

/* bessere Typo */
.content-inner p{
  margin: 0 0 1rem 0;
}

.content-inner h1,
.content-inner h2,
.content-inner h3{
  line-height: 1.2;
  margin: 0 0 0.75rem 0;
}

.content-inner a{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Bilder responsive & hübsch */
.content-inner img{
  max-width: 100%;
  height: auto;
  display: block;
  margin: 1rem 0;
  border-radius: 10px;
}

/* Card-Look */
.content-inner{
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  padding: clamp(14px, 3vw, 24px);
}

/* Bilder anpassen, links oder rechts darstellen im Text */
.float-right{
  float:right;
  width:40%;
  max-width:320px;
  margin:0 0 15px 20px;
}

.float-right img{
  width:100%;
  height:auto;
}

@media (max-width:600px){

  .img-left,
  .img-right,
  .float-right{
    float:none;
    width:100%;
    max-width:none;
    margin:0 0 15px 0;
  }
}

.content-inner img{
  shape-margin: 10px;
}