/* =====================================================================
   JARDROBE – Platzhalter-/Coming-Soon-Seite
   Nutzt nur die hochgeladenen SVG-Assets. Roter Rahmen als CSS-Border.
   ===================================================================== */
@font-face{
  font-family:"JanzEinfach";
  src:url("janzeinfach.woff2") format("woff2");
  font-display:swap;
}
:root{
  --rot:#e30613;
  --weiss:#ffffff;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body{
  background:var(--weiss);
  font-family:system-ui,sans-serif;
  min-height:100vh;
  display:flex;
  padding:14px;
}

/* ---- Rahmen ---- */
.frame{
  border:2px solid var(--rot);
  width:100%;
  max-width:640px;
  margin:auto;
  padding:26px 22px 20px;
  display:flex;
  flex-direction:column;
  min-height:calc(100vh - 28px);
}
/* Startseite ist etwas höher/hochkant im Gefühl */
.frame-start{ max-width:600px; }
.frame-unter{ max-width:600px; }

img{ display:block; max-width:100%; height:auto; }
a{ text-decoration:none; }

/* ============ STARTSEITE ============ */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  margin-top:10px;
}
.jardrobe-gross{
  width:min(88%, 460px);
}
.inner-mache{
  width:min(70%, 340px);
  margin-top:4px;
}

/* Poster-Vorschau (kleine anklickbare Poster) */
.poster-vorschau{
  display:grid;
  grid-template-columns:repeat(6, 1fr);
  gap:10px;
  margin:auto 0 0;         /* schiebt die Vorschau nach unten Richtung Footer */
  padding:30px 0 22px;
}
.poster-vorschau a{
  display:block;
  transition:transform .15s ease;
}
.poster-vorschau a:hover{ transform:translateY(-4px); }
.poster-vorschau img{
  width:100%;
  aspect-ratio:3/4;
  object-fit:cover;
  border:1.5px solid var(--rot);
}
@media(max-width:520px){
  .poster-vorschau{ grid-template-columns:repeat(3, 1fr); gap:8px; }
}

/* ============ UNTERSEITEN (Poster / Impressum / Kontakt) ============ */
.logo-link{
  align-self:flex-start;
  display:block;
  margin-bottom:8px;
  transition:transform .15s ease;
}
.logo-link:hover{ transform:scale(1.04); }
.logo-simpel{
  width:min(46%, 220px);
}

.poster-gross{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px 0;
}
.poster-gross img{
  max-height:62vh;
  width:auto;
  max-width:100%;
  border:1.5px solid var(--rot);
}

/* Text-Seiten (Impressum / Kontakt) */
.textblock{
  flex:1;
  padding:24px 4px;
}
.seiten-titel{
  width:min(60%, 260px);
  margin-bottom:22px;
}
.info-text{
  font-family:"JanzEinfach", system-ui, sans-serif;
  color:var(--rot);
  font-size:26px;
  line-height:1.5;
}
.info-text a{ color:var(--rot); }

/* ============ FOOTER (auf allen Seiten) ============ */
.foot{
  display:flex;
  gap:26px;
  justify-content:center;
  align-items:center;
  padding-top:16px;
  margin-top:auto;
}
.foot a{
  display:block;
  transition:transform .15s ease;
}
.foot a:hover{ transform:translateY(-2px); }
.foot img{
  height:22px;
  width:auto;
}