:root{
  --bg: floralwhite;
  --accent: saddlebrown;
  --card: #fff;
  --text: #2b2b2b;
  --expanded-width: 520px;   /* feste Breite im Expanded-Modus */
  --meta-width: 450px;
  --meta-gap: 260px;
  --card-radius: 20px;
}
body {
  margin: 0;
  /*font-family: Heiti SC, Arial, Helvetica, sans-serif;*/
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 14px 20px;
  background: var(--bg);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

h1 {
  margin: 0;
  /*color: var(--accent);*/
}

.container {
  display: flex;
  gap: 14px;
  max-width: 1320px;
  margin: 14px auto;
  margin-top: 0;
  margin-bottom: 0;
  padding: 12px;
}
aside{
  min-width: 2rem;
  max-width: 2.5rem;
  width: 2rem;
  box-shadow: 0 0 12px rgba(150, 120, 80, 0.6);
  border: 0.5px dotted saddlebrown;
}
aside.alpha {
  position: fixed;
  left: 20px;
  top: 8rem;
  width: 56px;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 50;
}
.alphaBtn {
  background: transparent;
  border: none;
  color: #6b4b3a;
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: transform 0.3s ease, color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.alphaBtn.active {
  color: var(--accent);
  font-weight: 700;
  transform: scale(1.2);
  background: floralwhite; /* cornsilk */
  box-shadow: 0 0 8px rgba(150, 120, 80, 0.8);
}


.main {
  flex: 1;
  margin-left: 124px;
}

/* Grid */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  gap: 18px;
  max-width: 1320px;
}


/* Card: white box with shadow (normal small state) */
.card{
  background:var(--card);
  border-radius:var(--card-radius);
  box-shadow:0 10px 28px rgba(0,0,0,0.06);
  display:flex;
  gap:16px;
  align-items:flex-start;
  padding:14px;
  min-height:160px;
  position:relative;
  overflow:visible;
  transition:transform .28s ease, box-shadow .28s ease, min-height .28s ease, padding .28s ease, width .28s ease, height .28s ease;
}

/* Small-state cover (left) - normal view */
.coverSmall{
  width:140px;
  height:200px;
  flex:0 0 140px;
  overflow:hidden;
  border-radius:10px;
  background:#f6f6f6;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  border:1px solid rgba(0,0,0,0.04);
}
.coverSmall img{max-width:100%;max-height:100%;display:block}

/* Meta (right of small cover) */
.meta{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.title{font-weight:700;color:var(--accent);cursor:pointer}
.infoRow{font-size:14px;color:#6b4b3a;display:flex;gap:12px;flex-wrap:wrap}

/* Expanded state: feste Breite, Höhe wird per JS gesetzt nach Bildseitenverhältnis */
.card.expanded{
  z-index:400;
  transform:translateY(-6px) scale(0.90);
  box-shadow:0 40px 80px rgba(0,0,0,0.25);
  padding:0;                 /* Cover füllt innen, Rand bleibt sichtbar */
  width:var(--expanded-width);
  /*max-width:calc(100% - 40px);*/
  margin:0px auto;          /* horizontal zentrieren */
  margin-top: 0;
  align-items:stretch;
  position:relative;
}

/* When expanded: hide original meta children (they will be replaced by expandedInnerContainer) */
.card.expanded .meta > :not(.expandedInnerContainer){
  display:none;
}

/* coverFull: Bild vollständig anzeigen, Karte bleibt als 5px weißer Rahmen sichtbar */
.coverFull{
  position:absolute;
  inset:3px;                 /* 5px Abstand zum Kartenrand, so bleibt die Karte sichtbar */
  width:calc(100% - 10px);
  height:calc(100% - 10px);
  overflow:hidden;
  border-radius:calc(var(--card-radius) - 3px);
  background:transparent;
  display:block;
  z-index:350;
}
.coverFull img{
  width:100%;
  height:100%;
  object-fit:contain;        /* ganze Bild anzeigen, nicht zuschneiden */
  object-position:center center;
  display:block;
}

/* Meta weiter nach rechts (mehr Abstand) */
.card.expanded .meta{
  position:absolute;
  top:70px;
  right: calc(-1 * var(--meta-width) - var(--meta-gap));
  width:var(--meta-width);
  background:transparent;
  padding:0;
  transform: translateY(-6px) scale(1.20);
}

/* Hidden state for other cards */
.card.hidden{display:none !important}

/* Expanded inner content */
.expandedInner .expInfo .detailTable{width:100%;border-collapse:collapse;margin-top:8px}
.expandedInner .expInfo .detailTable th{width:140px;text-align:left;padding:6px;color:#6b4b3a;vertical-align:top}
.expandedInner .expInfo .detailTable td{padding:6px;color:#222}

a {
color: black;
text-decoration: none;
}

.search-form {
  margin: 7rem auto;
}

@media (max-width:550px){
/*aside{
  max-width: 2rem;
}*/
aside.alpha{
  left: 10px;
  padding: 2px;
  gap: 12px;
  top: 6rem;
}


/* Basisvariablen (anpassen falls deine Sidebar breiter ist) */
:root{
  --aside-width: 56px;      /* Breite der fixen Sidebar */
  --aside-gap: 20px;        /* Abstand zwischen aside und main */
  --card-gap: 18px;         /* Abstand zwischen Karten */
  --card-min: 240px;        /* minimale Kartenbreite (flexibel) */
  --card-max: 1fr;
}

/* Sicherer Abstand für main, damit Cards nicht unter aside rutschen */
.main {
  margin-left: calc(var(--aside-width) + var(--aside-gap));
  transition: margin-left 0.18s ease;
  padding-right: 1rem;
}

/* Grid: automatische Spaltenanzahl, abhängig von minmax */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), var(--card-max)));
  gap: var(--card-gap);
  align-items: start;
}

/* Card Grundstil (kleine Anpassungen für responsive Skalierung) */
.card {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  min-height: 140px;
  border-radius: 12px;
  background: var(--card);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
  transition: transform .18s ease, box-shadow .18s ease;
}

/* Cover und Meta: flexible Basis */
.coverSmall {
  width: 120px;
  height: 160px;
  flex: 0 0 120px;
  border-radius: 8px;
  overflow: hidden;
}
.coverSmall img { width:100%; height:100%; object-fit:cover; display:block; }

.meta { flex: 1; display:flex; flex-direction:column; gap:8px; }

/* -------------------------
   Breakpoints: Anzahl Spalten
   ------------------------- */

/* Desktop large: möglichst viele Spalten, Karten mindestens 280px */
@media (min-width: 1400px) {
  :root { --card-min: 300px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
}

/* Desktop / Laptop: 3 Spalten bei ausreichend Platz */
@media (min-width: 1100px) and (max-width: 1399px) {
  :root { --card-min: 300px; }
  .grid { grid-template-columns: repeat(3, 1fr); }
}

/* Responsive: on small screens meta becomes static under the card */
@media (max-width:1100px){
  :root{ --meta-width: 100%; --meta-gap: 18px; }
  .main{margin-left:50px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
  .card{min-height:200px}
  .card.expanded{ width:100%; margin:12px 0; transform:none; }
  .card.expanded .meta{ position:static; right:auto; width:100%; margin-top:12px; }
  .coverFull{ border-radius:12px; inset:6px; }
}

/* Optional: kleine visuelle Anpassungen für Touch */
@media (max-width: 900px) {
  .card { box-shadow: 0 6px 16px rgba(0,0,0,0.06); }
  .alphaBtn { padding: 8px; min-width: 40px; }
}

/* Tablet: 2 Spalten */
@media (min-width: 700px) and (max-width: 1099px) {
  :root { --card-min: 320px; }
  .main{margin-left:30px}
  .grid { grid-template-columns: repeat(2, 1fr); }
  .coverSmall { width: 110px; height: 150px; flex: 0 0 110px; }
}

/* Mobile: 1 Spalte, Karten kompakter, Meta unter Cover */
@media (max-width: 699px) {
  :root { --card-min: 100%; }
  .grid { grid-template-columns: 1fr; gap: 12px; }
  .card {
    flex-direction: column;
    padding: 10px;
    min-height: auto;
  }
  .alphaBtn { padding: 0px; min-width: 0px; font-size: 0.8rem;}
  .coverSmall {
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    border-radius: 10px;
  }
  .meta { margin-top: 8px; gap:6px; }
  .title { font-size: 1rem; }
  .infoRow { font-size: 13px; gap:8px; }
}

/* Extra: wenn aside größer wird (z.B. expanded), setze margin-left dynamisch */
body.aside-expanded .main {
  margin-left: calc(var(--aside-width) + var(--aside-gap) + 160px);
}