/* v4 Shells — /partei/index.html und /makro/index.html
   Server-side prerendered, laden ohne JS vollständig. */

/* Skip-Link liegt in base.css (global) — hier raus, weil shells.css
 * nur in bundesland.html geladen wird. */

.v4-shell{
  max-width:var(--mw);
  margin:0 auto;
  padding:clamp(1.5rem,4vh,3rem) 1.25rem 3rem;
}

.v4-shell-hero{
  margin-bottom:2rem;
}
.v4-shell-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--gray-500);
  font-weight:600;
  margin-bottom:.5rem;
}
.v4-shell-title{
  font-size:clamp(1.6rem,4vw,2.6rem);
  line-height:1.1;
  letter-spacing:-.022em;
  font-weight:700;
  max-width:24ch;
}
.v4-shell-lede{
  margin-top:.8rem;
  font-size:var(--fs-lg);
  line-height:1.55;
  color:var(--gray-800);
  max-width:60ch;
}

/* === Kachel-Grid === */
.v4-shell-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(220px,1fr));
  gap:.85rem;
  margin-top:2rem;
}

.v4-shell-tile{
  --tile-accent:var(--gray-800);
  display:flex;
  flex-direction:column;
  gap:.4rem;
  padding:1.05rem 1.2rem 1rem;
  border:1px solid var(--gray-200);
  background:var(--white);
  text-decoration:none;
  color:var(--black);
  transition:border-color var(--tr-fast),background var(--tr-fast),transform var(--tr-fast);
  position:relative;
}
.v4-shell-tile:hover{
  border-color:var(--black);
  background:var(--gray-50);
  transform:translateY(-1px);
  text-decoration:none;
}
.v4-shell-tile-bar{
  position:absolute;
  left:0;top:0;bottom:0;
  width:3px;
  background:var(--tile-accent);
}
.v4-shell-tile-name{
  font-family:var(--font-d);
  font-size:var(--fs-md);
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--black);
  padding-left:.5rem;
}
.v4-shell-tile-hint{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--gray-500);
  padding-left:.5rem;
}

/* Makro-Kacheln sind etwas dichter */
.v4-shell-tile-makro{padding-left:1.2rem;}
.v4-shell-tile-makro .v4-shell-tile-kicker{
  font-family:var(--font-d);
  font-size:var(--fs-xs);
  text-transform:uppercase;
  letter-spacing:.12em;
  color:var(--gray-500);
  font-weight:600;
}
.v4-shell-tile-makro .v4-shell-tile-name{padding-left:0}
.v4-shell-tile-desc{
  font-size:var(--fs-sm);
  color:var(--gray-700);
  line-height:1.5;
}

/* === Hints & Noscript === */
.v4-shell-hint{
  margin-top:2.5rem;
  padding:1rem 1.2rem;
  background:var(--gray-50);
  border-left:3px solid var(--gray-300);
  font-size:var(--fs-sm);
  color:var(--gray-700);
  line-height:1.6;
  max-width:64ch;
}
.v4-shell-noscript{
  margin-top:1rem;
  padding:1rem 1.2rem;
  background:color-mix(in oklab, #c09032 8%, var(--white));
  border-left:3px solid #c09032;
  font-size:var(--fs-sm);
  color:var(--gray-800);
  line-height:1.6;
}
.v4-shell-noscript code{
  font-family:var(--font-d);
  font-size:.9em;
}

@media (prefers-reduced-motion: reduce){
  .v4-shell-tile,.v4-shell-tile:hover{transform:none;transition:none}
}