/* assets/css/styles.css */
:root{
  --bg:#000;
  --fg:#fff;
  --muted:rgba(255,255,255,.72);
  --muted2:rgba(255,255,255,.5);
  --line:rgba(255,255,255,.12);
  --max:1100px;
  --pad:clamp(16px,2.6vw,28px);
  --radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  letter-spacing:.01em;
}

a{color:inherit; text-decoration:none}
a:hover{opacity:.92}

.bg{
  background:
    radial-gradient(1200px 600px at 30% 10%, rgba(255,255,255,.07), rgba(0,0,0,0)),
    radial-gradient(900px 500px at 70% 30%, rgba(255,255,255,.05), rgba(0,0,0,0)),
    var(--bg);
}

/* Topbar */
.topbar{
  position:fixed;
  top:0; left:0; right:0;
  z-index:30;
  background: linear-gradient(to bottom, rgba(0,0,0,.88), rgba(0,0,0,.55), rgba(0,0,0,0));
  backdrop-filter: blur(6px);
}
.topbar__inner{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:14px var(--pad);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  font-size:14px;
  letter-spacing:.18em;
  text-transform:uppercase;
  opacity:.92;
}
.nav{display:flex; gap:16px; align-items:center}
.nav__link{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  opacity:.75;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid transparent;
}
.nav__link:hover{opacity:.95; border-color:var(--line)}
.nav__link.is-active{opacity:.98; border-color:var(--line)}

/* Page */
.page{
  padding-top:72px;
  min-height:100vh;
}
.page__intro{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:calc(var(--pad) + 14px) var(--pad) var(--pad);
}
.page__title{
  margin:0 0 10px;
  font-size: clamp(26px, 4.2vw, 44px);
  letter-spacing:.04em;
}
.page__lead{
  margin:0;
  color:var(--muted);
  max-width:70ch;
  line-height:1.55;
}

/* Controls */
.controls{
  margin-top:18px;
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
}
.input{
  background:rgba(255,255,255,.04);
  border:1px solid var(--line);
  color:var(--fg);
  border-radius:999px;
  padding:10px 14px;
  min-width:min(380px, 92vw);
  outline:none;
}
.input::placeholder{color:rgba(255,255,255,.35)}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip{
  background:rgba(255,255,255,.03);
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:999px;
  padding:9px 12px;
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
}
.chip:hover{color:rgba(255,255,255,.9)}
.chip.is-active{
  background:rgba(255,255,255,.08);
  color:rgba(255,255,255,.96);
}

/* Stack */
.stack{
  max-width:calc(var(--max) + 2*var(--pad));
  margin:0 auto;
  padding:0 var(--pad) calc(var(--pad)*2);
  display:flex;
  flex-direction:column;
  gap:22px;
}

/* Card */
.card{
  position:relative;
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.02);
}

.card__row{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns: 1.35fr 1fr;
  min-height: clamp(280px, 42vw, 420px);
}
.card.is-right .card__row{
  grid-template-columns: 1fr 1.35fr;
}

/* Media */
.card__media{
  position:relative;
  display:flex;
  overflow:hidden;
  background:
    radial-gradient(600px 300px at 30% 30%, rgba(255,255,255,.18), rgba(0,0,0,0)),
    linear-gradient(120deg, rgba(255,255,255,.06), rgba(0,0,0,0)),
    #000;
}

.card__img{
  width:100%;
  height:100%;
  object-fit:cover;
  filter: grayscale(1) contrast(1.05) brightness(.92);
}

/* Fade lives INSIDE media so it never dims the text
   Values tuned in DevTools */
.card__media .card__fade{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background: linear-gradient(
    90deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.012) 30%,
    rgba(0, 0, 0, 0.035) 48%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Optional: mirrored cards (only relevant if you add .card.is-right in HTML/JS) */
.card.is-right .card__media .card__fade{
  background: linear-gradient(
    270deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.012) 30%,
    rgba(0, 0, 0, 0.035) 48%,
    rgba(0, 0, 0, 0.05) 62%,
    rgba(0, 0, 0, 0.08) 72%,
    rgba(0, 0, 0, 1) 100%
  );
}

/* Content */
.card__content{
  position:relative;
  z-index:3;
  padding: clamp(18px, 3vw, 26px);
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  gap:10px;

  /* tuned in DevTools */
  background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 1) 100%);
}

.card__kicker{
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted2);
}
.card__title{
  margin:0;
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing:.04em;
  line-height:1.2;
}
.card__title a{
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(255,255,255,.28);
}
.card__title a:hover{
  text-decoration-color: rgba(255,255,255,.6);
}
.card__summary{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  max-width:65ch;
}
.card__meta{
  margin-top:6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  color:rgba(255,255,255,.45);
  font-size:12px;
}
.tag{
  border:1px solid rgba(255,255,255,.14);
  border-radius:999px;
  padding:6px 10px;
}

/* Footer */
.footer{
  border-top:1px solid rgba(255,255,255,.06);
  padding:18px var(--pad) 26px;
}
.footer__inner{
  max-width:var(--max);
  margin:0 auto;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:center;
  color:rgba(255,255,255,.45);
  font-size:12px;
}
.footer__link{opacity:.8}
.footer__link:hover{opacity:1}
.sep{opacity:.25}

/* Utility */
.h2{margin:24px 0 10px; font-size:16px; letter-spacing:.12em; text-transform:uppercase; opacity:.9}
.p{margin:0; color:var(--muted); line-height:1.6; max-width:75ch}
.ul{margin:10px 0 0; padding-left:18px; color:var(--muted); line-height:1.7}
.code{
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  border-radius:8px;
  padding:2px 6px;
}

.ctaRow{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:16px;
}

/* Mobile */
@media (max-width: 860px){

  .card__row{
    grid-template-columns: 1fr;
    min-height: unset;
  }

  .card__media{
    height: min(46vh, 380px);
  }

  .card__img{
    object-position: center 35%;
  }

  /* Vertical fade on mobile */
  .card__media .card__fade{
    background: linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0%,
      rgba(0, 0, 0, 0.18) 32%,
      rgba(0, 0, 0, 0.62) 62%,
      rgba(0, 0, 0, 1) 78%,
      rgba(0, 0, 0, 1) 100%
    );
  }

  .card__content{
    padding-top:22px;
  }

  .controls{gap:10px}
  .chips{row-gap:8px}
  .input{min-width:100%}
}

/* Landing */
.landing{
  position:relative;
  min-height:100vh;
  height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
}
.landing__canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
}
.landing__veil{
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom, rgba(0,0,0,.3), rgba(0,0,0,.6));
  pointer-events:none;
}
.landing__copy{
  position:relative;
  z-index:10;
  text-align:center;
  padding:var(--pad);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
}
.landing__title{
  margin:0 0 14px;
  font-size:clamp(32px, 5vw, 56px);
  letter-spacing:.04em;
}
.landing__subtitle{
  margin:0 auto 28px;
  color:var(--muted);
  font-size:clamp(14px, 2vw, 18px);
  line-height:1.6;
  max-width:60ch;
}
.landing__cta{
  margin-top:24px;
}
.btn{
  display:inline-block;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  color:var(--fg);
  border-radius:999px;
  padding:12px 24px;
  font-size:13px;
  letter-spacing:.14em;
  text-transform:uppercase;
  transition:all .2s;
}
.btn:hover{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.3);
  opacity:1;
}
.landing__hint{
  position:absolute;
  bottom:var(--pad);
  left:50%;
  transform:translateX(-50%);
  z-index:10;
}
.hint{
  font-size:11px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted2);
  opacity:.6;
}
.is-hidden{display:none}
.is-visible{display:flex}
[hidden] { display: none !important; }

.filter-group > button {
  background: #151517;
}

.filter-group > button {
  border-bottom: 1px solid #242426;
}

.filter-group button[data-project-class],
.filter-group button[data-fiction-class],
.filter-group button[data-topic] {
  background: #1b1b1e;
}

/* Library: category level distinction */
.filters .filter-group > button {
  background: #151517;
}

.filters .filter-group button[data-project-class],
.filters .filter-group button[data-fiction-class],
.filters .filter-group button[data-topic] {
  background: #1b1b1e;
}

/* Library: feiner Ebenen-Unterschied (Top vs Sub) */
.chips:not(.chips-sub) .chip {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.14) !important;
}

.chips.chips-sub .chip {
  background: rgba(255,255,255,0.14) !important;
  border-color: rgba(255,255,255,0.20) !important;
}

/* Library: fixed card height */
#cards .card {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 420px; /* an bestehende Book-Karten angepasst */
}

/* Library: constrain card images */
#cards .card img {
  max-height: 100%;
  width: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
/* Cards dürfen auf Mobile wachsen */
#cards .card {
height: auto;
}

/* Bild bekommt festen Bildbereich */
#cards .card img {
height: 220px;
max-height: 220px;
object-fit: cover;
}
}
@media (max-width: 720px) {

  #cards .card {
    position: relative;
    overflow: hidden;
    height: auto;
  }

  #cards .card::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 96px;
    background: linear-gradient(
      to bottom,
      rgba(0,0,0,0),
      rgba(0,0,0,0.35),
      rgba(0,0,0,0.65),
      rgba(0,0,0,0.9)
    );
    pointer-events: none;
  }

  #cards .card img {
    display: block;
    width: 100%;
    max-height: 200px;
    object-fit: cover;

    -webkit-mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );
    mask-image: linear-gradient(
      to bottom,
      rgba(0,0,0,1) 70%,
      rgba(0,0,0,0) 100%
    );
  }
}


html, body {
  min-height: 100%;
  background: #000;
}

body {
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

@media (max-width: 520px) {
  .topbar {
    height: auto;
    overflow: visible;
  }

  .topbar__inner {
    flex-wrap: nowrap;      /* bleibt eine Zeile */
    gap: 10px;
  }

  .brand {
    flex: 0 0 auto;
  }

  .nav {
    flex: 0 0 auto;         /* kein Sprung in eigene Zeile */
    display: flex;
    justify-content: flex-end;
    gap: 8px;               /* gleicher Abstand zwischen INDEX/ABOUT/EN */
    flex-wrap: nowrap;      /* kein Umbruch */
  }

  .nav__link {
    padding: 6px 8px;
    font-size: 11px;
    letter-spacing: .14em;
  }
}


/* Language toggle */
.lang-switch{display:inline-flex;gap:8px;align-items:center;}