/* Kartenwerkzeug. Handy zuerst, groessere Schirme per min-width darueber.
   Baut auf den Tokens aus style.css auf. */

body.werkzeug {
  padding: 0;
  background-image:
    radial-gradient(140% 55% at 50% 0%, rgba(234, 54, 1, 0.10) 0%, rgba(234, 54, 1, 0) 55%),
    linear-gradient(180deg, var(--ground) 0%, var(--ground-deep) 100%);
  background-attachment: fixed;
}

/* ---------------------------------------------------------------- Kopfleiste */

/* Kopf, Suchband und Sprungleiste kleben gemeinsam als ein Block.
   Vorher hatte jedes Element sein eigenes sticky mit geratenem Abstand,
   auf dem iPhone hat sich das beim Scrollen ueberlagert. */
/* Der Kopfblock scrollt weg. Er belegte klebend 253px von 800px, also fast
   ein Drittel des Schirms, dauerhaft. Oben stehen bleibt nur die
   Abschnittsleiste, die man beim Lesen tatsaechlich benutzt. */
/* Feste Hoehe der Kopfzeile. Vorher ergab sie sich aus der Polsterung und
   war je nach Schriftgroesse unterschiedlich. */
:root { --kopf-h: 3.5rem; }

/* Der Kopfblock klebt nur, wo die Seite es anfordert. Das ist die Startseite,
   auf der sonst nichts oben stehen bleibt. Ueberall sonst klebt das Werkzeug
   der Seite: Suchband oder Abschnittsleiste. */
.kopfbereich.klebt {
  position: sticky;
  top: 0;
  z-index: 40;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.kopfbereich {
  background: rgba(12, 15, 17, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.kopf {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  height: var(--kopf-h);
  box-sizing: border-box;
  padding: 0 max(1rem, env(safe-area-inset-right)) 0 max(1rem, env(safe-area-inset-left));
  max-width: 68rem;
  margin: 0 auto;
}

.marke {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  flex: 0 0 auto;
  color: var(--text);
  text-decoration: none;
}
.marke img { display: block; width: 9.5rem; height: auto; }
.marke picture { display: block; }

/* Navigation liegt hier statt in deck.css, sonst fehlt sie auf allen
   Seiten, die deck.css nicht laden. */
.haupt-nav { margin-left: auto; display: flex; gap: 0.25rem; flex: 0 0 auto; }
.haupt-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;          /* Daumenmass */
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-2);
  text-decoration: none;
}
.haupt-nav a:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.haupt-nav a.aktiv { color: #14181B; background: var(--gold); }

/* Lange Namen sagen, was hinter dem Reiter steckt. Auf dem Telefon passen sie
   zu viert nicht, dort greift die kurze Fassung. */
.nav-kurz { display: none; }


/* min-width:0, sonst schrumpft das Formular nicht unter die Eigenbreite eines
   search-Feldes. Bei 320px Bildbreite ragte es dadurch 34 Pixel ueber den Rand
   und die ganze Seite liess sich seitlich schieben. */
.suche { position: relative; flex: 1 1 auto; min-width: 0; display: flex; }
.suche input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 16px;                 /* unter 16px zoomt iOS beim Fokus hinein */
  color: var(--text);
  background: rgba(0, 0, 0, 0.32);
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  padding: 0.8rem 3.4rem 0.8rem 1.05rem;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.suche input::placeholder { color: var(--text-3); }
.suche input:focus {
  outline: none;
  border-color: rgba(217, 182, 80, 0.7);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.4), 0 0 0 3px rgba(217, 182, 80, 0.15);
}
.suche input::-webkit-search-cancel-button { -webkit-appearance: none; }

.suche button {
  position: absolute;
  right: 5px; top: 5px; bottom: 5px;
  width: 2.6rem;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-2);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}
.suche button:hover { background: var(--gold); color: #14181B; }
.suche button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.vorschlaege {
  position: absolute;
  top: calc(100% + 0.45rem);
  left: 0; right: 0;
  margin: 0; padding: 0.3rem;
  list-style: none;
  background: #1A2025;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
  max-height: 60vh;
  overflow-y: auto;
}
.vorschlaege li a {
  display: block;
  padding: 0.6rem 0.75rem;
  color: var(--text);
  text-decoration: none;
  border-radius: 5px;
  font-size: 0.95rem;
}
.vorschlaege li a:hover,
.vorschlaege li[aria-selected="true"] a { background: rgba(255, 255, 255, 0.08); }

/* -------------------------------------------------------------------- Rumpf */

.karte-seite {
  max-width: 68rem;
  margin: 0 auto;
  padding: 1.1rem max(1.1rem, env(safe-area-inset-left)) 4rem max(1.1rem, env(safe-area-inset-right));
}

.klein-label {
  margin: 0 0 0.7rem;
  font-family: var(--f-body);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.anzahl {
  font-size: 0.68rem;
  letter-spacing: 0;
  color: var(--text-2);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.05rem 0.42rem;
  font-variant-numeric: tabular-nums;
}

/* --------------------------------------------------------------- Leerzustand */

/* Ohne das Zuruecksetzen addiert sich die globale Regel section{padding-top:3rem}
   auf den Abstand des naechsten Blocks und reisst ein Loch in die Seite. */
.leer { padding: 1.8rem 0 0; max-width: none; }
.karte-seite > section { padding-top: 0; }
.leer h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.8rem;
}
.leer p { color: var(--text-2); }
.leer .fehler {
  color: #FFB59E;
  background: rgba(234, 54, 1, 0.12);
  border-left: 3px solid var(--accent);
  padding: 0.7rem 0.9rem;
  border-radius: 3px;
}
.beispiele { font-size: 0.93rem; }
.beispiele a { color: var(--accent-hot); }

/* ------------------------------------------------------------------- Karte */

.karte { display: flex; flex-direction: column; gap: 1.5rem; }

.bildspalte { display: flex; flex-direction: column; align-items: center; }
.kartenbild {
  width: min(78vw, 20rem);
  height: auto;
  border-radius: 4.75% / 3.5%;
  box-shadow:
    0 0 0 1px rgba(217, 182, 80, 0.22),
    0 22px 50px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(217, 182, 80, 0.07);
}
.hinweis { font-size: 0.85rem; color: var(--text-3); margin-top: 0.7rem; }

.textspalte { display: flex; flex-direction: column; gap: 1.6rem; }

.titel h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(1.75rem, 7vw, 2.4rem);
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
.titel .kosten { margin: 0.55rem 0 0; font-size: 1.15rem; display: flex; gap: 0.2rem; flex-wrap: wrap; }
.titel .typ {
  margin: 0.5rem 0 0;
  color: var(--text-2);
  font-size: 1rem;
}
.titel .deutsch { margin: 0.35rem 0 0; font-size: 0.9rem; color: var(--text-3); }
.titel .deutsch strong { color: var(--text-2); font-weight: 600; }

/* ------------------------------------------------------- Einschaetzung (Kern) */

.einschaetzung {
  background: linear-gradient(165deg, #232B31 0%, #1A2126 100%);
  border: 1px solid var(--line-strong);
  border-radius: 5px;
  padding: 1.05rem 1.1rem 1.15rem;
}

.gc {
  display: flex;
  flex-direction: column;
  gap: 0.28rem;
  padding: 0.75rem 0.85rem;
  margin-bottom: 1rem;
  border-radius: 4px;
  background: linear-gradient(135deg, rgba(217, 182, 80, 0.20) 0%, rgba(217, 182, 80, 0.06) 100%);
  border: 1px solid rgba(217, 182, 80, 0.42);
}
.gc strong {
  font-family: var(--f-caps);
  font-size: 1.02rem;
  letter-spacing: 0.06em;
  color: #F0D48A;
}
.gc span { font-size: 0.86rem; line-height: 1.5; color: var(--text-2); }

.werte { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.9rem; margin: 0; }
.werte > div { display: flex; flex-direction: column; gap: 0.1rem; }
.werte dt {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
}
.werte dd { margin: 0; }
.werte .zahl {
  font-family: var(--f-display);
  font-size: 1.5rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.werte .deutung { font-size: 0.79rem; color: var(--text-3); line-height: 1.35; }

.selt-common   { color: #C2C2C2; }
.selt-uncommon { color: #B6C9D4; }
.selt-rare     { color: #D9B650; }
.selt-mythic   { color: #F0762F; }

/* -------------------------------------------------------------- Regeltext */

.regeln { }
.regeltext {
  background: rgba(255, 255, 255, 0.035);
  border-left: 2px solid var(--line-strong);
  border-radius: 0 4px 4px 0;
  padding: 0.9rem 1rem;
  font-size: 1.02rem;
  line-height: 1.62;
}
.regeltext p { margin: 0 0 0.75rem; max-width: none; }
.regeltext p:last-child { margin-bottom: 0; }
.regeltext .erinnerung { color: var(--text-3); font-style: italic; }
.regeltext .ms { vertical-align: -0.12em; }

.pt {
  margin: 0.8rem 0 0;
  font-family: var(--f-display);
  font-size: 1.3rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.flavor {
  margin: 0;
  font-style: italic;
  color: var(--text-3);
  font-size: 0.95rem;
  line-height: 1.6;
  padding-left: 1rem;
  border-left: 1px solid var(--line);
}

/* --------------------------------------------------------------- Formate */

.pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.45rem; }
.pill {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.34rem 0.75rem;
  border-radius: 999px;
  font-size: 0.83rem;
  border: 1px solid var(--line-strong);
  background: rgba(255, 255, 255, 0.045);
  color: var(--text-3);
}
.pill span { font-weight: 600; }
.pill em { font-style: normal; font-size: 0.76rem; }
.pill.st-legal      { color: #A8DCC0; border-color: rgba(120, 200, 160, 0.42); background: rgba(120, 200, 160, 0.10); }
.pill.st-banned     { color: #F2A493; border-color: rgba(234, 84, 54, 0.42);  background: rgba(234, 84, 54, 0.10); }
.pill.st-restricted { color: #E6C77A; border-color: rgba(217, 182, 80, 0.42); background: rgba(217, 182, 80, 0.10); }

/* ---------------------------------------------------------------- Combos */

.combo-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.combo-liste li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--line);
  border-radius: 4px;
  padding: 0.75rem 0.9rem;
}
.ergebnis { margin: 0; font-size: 0.87rem; color: #E6C77A; }
.quelle { margin: 0.6rem 0 0; font-size: 0.76rem; color: var(--text-3); }

/* --------------------------------------------------------------- Rulings */

.rulings ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.rulings li {
  padding: 0.8rem 0;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 0.25rem;
}
.rulings li:last-child { border-bottom: 1px solid var(--line); }
.rulings time {
  font-size: 0.71rem;
  letter-spacing: 0.1em;
  color: var(--text-3);
  font-variant-numeric: tabular-nums;
}
.rulings p { margin: 0; font-size: 0.94rem; line-height: 1.58; color: var(--text-2); max-width: 78ch; }
.rulings .ms { vertical-align: -0.12em; }

/* ------------------------------------------------------------------ Meta */

.meta dl { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 1.1rem; margin: 0; font-size: 0.9rem; }
.meta dt { color: var(--text-3); }
.meta dd { margin: 0; color: var(--text-2); }
.meta a { color: var(--accent-hot); }

/* ---------------------------------------------------------------- Drucke */

.druckreihe {
  list-style: none;
  margin: 0 -1.1rem;
  padding: 0 1.1rem 0.4rem;
  display: flex;
  gap: 0.6rem;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.druckreihe li { flex: 0 0 auto; scroll-snap-align: start; }
.druckreihe a { display: block; text-decoration: none; text-align: center; }
.druckreihe img {
  display: block;
  width: 5.4rem;
  height: auto;
  border-radius: 4.75% / 3.5%;
  border: 1px solid var(--line);
}
.druckreihe a:hover img { border-color: rgba(217, 182, 80, 0.5); }
.druckreihe span {
  display: block;
  margin-top: 0.3rem;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  color: var(--text-3);
}

/* ------------------------------------------------------------------ Fuss */

/* Klein und mittig ganz unten. Der Hinweis muss da sein, aber nichts erklaeren. */
.werkzeug-fuss {
  margin-top: 4rem;
  border-top: 1px solid var(--line);
  padding: 1.4rem 1.1rem calc(2rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 0.71rem;
  line-height: 1.6;
  color: var(--text-3);
  opacity: 0.75;
}
.werkzeug-fuss p {
  margin: 0 auto 0.3rem;
  max-width: 46rem;
}
.werkzeug-fuss p:last-child { margin-bottom: 0; }

/* =============================================================== ab Tablet */

@media (min-width: 40rem) {
  .kopf { padding: 0.7rem 1.4rem; gap: 1.1rem; }
  .marke span { display: block; }
  .suche { max-width: 34rem; }
  .karte-seite { padding: 2rem 1.4rem 5rem; }
  .kartenbild { width: 22rem; }
  .druckreihe { margin: 0; padding: 0 0 0.4rem; }
  .werkzeug-fuss { padding-left: 1.4rem; padding-right: 1.4rem; }
}

/* =============================================================== ab Desktop */

@media (min-width: 60rem) {
  .leer { padding-top: 2.4rem; }
  .karte {
    flex-direction: row;
    align-items: flex-start;
    gap: 2.6rem;
  }
  .bildspalte {
    flex: 0 0 22rem;
    position: sticky;
    top: 5.2rem;
  }
  .textspalte { flex: 1 1 auto; min-width: 0; gap: 1.9rem; }
  .leer { padding: 4.5rem 0 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}

/* ------------------------------------------------- Sprungleiste (Abschnitte) */

/* Auf Seiten ohne Sprungmarken ist das Suchfeld das Werkzeug der Seite.
   Karte leer sind 4,2 Bildschirme, Suchtreffer bis zu 19,4. Dort bleibt das
   Band oben stehen, der Logostreifen scrollt darueber weg. */
.suchband.klebt {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}

.sprungleiste {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(12, 15, 17, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sprungleiste ul {
  display: flex;
  gap: 0.3rem;
  list-style: none;
  margin: 0 auto;
  padding: 0.45rem max(0.9rem, env(safe-area-inset-left));
  max-width: 68rem;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.sprungleiste ul::-webkit-scrollbar { display: none; }
.sprungleiste li { flex: 0 0 auto; }
.sprungleiste a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 0.9rem;
  border-radius: 999px;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  border: 1px solid transparent;
}
.sprungleiste a:hover { color: var(--text-2); background: rgba(255,255,255,0.05); }
.sprungleiste a.aktiv {
  color: var(--gold);
  background: rgba(217, 182, 80, 0.13);
  border-color: rgba(217, 182, 80, 0.4);
}

/* Anker duerfen nicht unter der klebenden Leiste verschwinden. Statt einer
   Aufzaehlung einzelner Kennungen, die bei jeder Umbenennung veraltet, gilt
   die Regel fuer alles mit Kennung im Inhalt. */
:root { --kopf-hoehe: 4.6rem; }
main [id], main .anker { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ------------------------------------------------------- Rang als Perzentil */

.werte .weit { grid-column: 1 / -1; }
.werte .zahl .von {
  font-family: var(--f-body);
  font-size: 0.74rem;
  color: var(--text-3);
  margin-left: 0.4rem;
  font-variant-numeric: normal;
}
.rangbalken {
  height: 0.42rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.09);
  overflow: hidden;
  margin: 0.4rem 0 0.35rem !important;
  max-width: 22rem;
}
.rangbalken i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold) 0%, #F0D48A 100%);
}

/* ------------------------------------------------------------ Formatraster */

.formatraster {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
  gap: 0.45rem;
}
.fr {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.55rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  border-left-width: 3px;
}
.fr-name { font-size: 0.88rem; font-weight: 600; color: var(--text-2); }
.fr-status { font-size: 0.76rem; color: var(--text-3); }
.fr.st-legal      { border-left-color: #6FCF97; }
.fr.st-legal      .fr-name { color: var(--text); }
.fr.st-legal      .fr-status { color: #A8DCC0; }
.fr.st-banned     { border-left-color: var(--accent); }
.fr.st-banned     .fr-status { color: #F2A493; }
.fr.st-restricted { border-left-color: var(--gold); }
.fr.st-restricted .fr-status { color: #E6C77A; }
.fr.st-not_legal  { opacity: 0.55; }

/* --------------------------------------------------------- Preisspanne */

.spanne { padding-top: 0.2rem; }
.spanne-enden { display: flex; justify-content: space-between; gap: 1rem; margin-bottom: 0.7rem; }
.ende { display: flex; flex-direction: column; gap: 0.05rem; }
.ende.rechts { text-align: right; }
.ende-label { font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-3); }
.ende-preis {
  font-family: var(--f-display);
  font-size: 1.3rem;
  line-height: 1.15;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.ende-set { font-size: 0.74rem; color: var(--text-3); }

.spanne-leiste {
  position: relative;
  height: 2.4rem;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(111,207,151,0.14) 0%, rgba(217,182,80,0.14) 55%, rgba(234,84,54,0.16) 100%);
  border: 1px solid var(--line);
}
.spanne-leiste i {
  position: absolute;
  top: 0.45rem; bottom: 0.45rem;
  width: 2px;
  margin-left: -1px;
  background: rgba(255,255,255,0.45);
  border-radius: 2px;
}
.spanne-leiste .median {
  position: absolute;
  top: 0; bottom: 0;
  width: 3px;
  margin-left: -1.5px;
  background: var(--gold);
  border-radius: 2px;
  box-shadow: 0 0 10px rgba(217,182,80,0.6);
}
.spanne-hinweis { margin: 0.55rem 0 0; font-size: 0.79rem; color: var(--text-3); }
.block-hinweis { margin: 0.9rem 0 0; font-size: 0.85rem; color: var(--text-3); }

@media (min-width: 40rem) {
  .sprungleiste ul { padding-left: 1.4rem; padding-right: 1.4rem; }
  .marke img { width: 12.5rem; }
}


/* -------------------------------------------------------------- Suchband */

/* Das Band liegt seit der Trennung vom Kopfblock frei und malt seinen
   Hintergrund selbst. Es muss deshalb ueber die volle Breite laufen, sonst
   steht ein dunkler Streifen mitten auf der Seite. Der Inhalt wird ueber den
   Innenabstand ausgerichtet und fluchtet weiter mit dem Logo. */
.suchband {
  border-top: 1px solid var(--line);
  background: rgba(12, 15, 17, 0.94);
  padding-top: 0.85rem;
  padding-bottom: 0.9rem;
  padding-left:  calc(max(1rem, env(safe-area-inset-left))  + max(0px, (100% - 68rem) / 2));
  padding-right: calc(max(1rem, env(safe-area-inset-right)) + max(0px, (100% - 68rem) / 2));
}
.suchband { display: flex; align-items: center; gap: 1.1rem; }
.suchband .suche input { padding-top: 0.72rem; padding-bottom: 0.72rem; padding-right: 6.1rem; }
.suchband .suche { max-width: none; }

.s-wuerfel, .s-filter {
  position: absolute;
  top: 5px; bottom: 5px;
  width: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: var(--text-3);
  text-decoration: none;
  transition: color 0.12s ease, background 0.12s ease;
}
.s-filter { right: 3.15rem; }
.s-wuerfel { right: 5.55rem; }
.s-wuerfel:hover, .s-filter:hover { color: var(--gold); background: rgba(255,255,255,0.07); }
.s-wuerfel:focus-visible, .s-filter:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* Bis 34rem uebernimmt das Filtersymbol im Feld die erweiterte Suche.
   Der Textlink kostete eine eigene Zeile von 45px, das Symbol kostet nichts. */
@media (max-width: 34rem) {
  .s-erweitert { display: none; }
  .suchband { padding-top: 0.6rem; padding-bottom: 0.65rem; }
  .suchband .suche input { padding-right: 8.5rem; }
}
@media (min-width: 34.0625rem) {
  .s-filter { display: none; }
  .s-wuerfel { right: 3.15rem; }
}


.s-erweitert {
  flex: 0 0 auto;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--text-3);
  text-decoration: none;
  white-space: nowrap;
  padding: 0.4rem 0;
  border-bottom: 1px solid transparent;
}
.s-erweitert:hover { color: var(--gold); border-bottom-color: var(--gold); }

@media (min-width: 40rem) {
  :root { --kopf-h: 4.6rem; }
  .suchband {
    padding-left:  calc(1.4rem + max(0px, (100% - 68rem) / 2));
    padding-right: calc(1.4rem + max(0px, (100% - 68rem) / 2));
  }
}

/* --------------------------------------------------------- Drucke als Gitter */

.druckgitter {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr));
  gap: 0.7rem;
}
.druckgitter li { display: flex; flex-direction: column; gap: 0.25rem; }
.druckgitter a {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: 4.75% / 3.5%;
  overflow: hidden;
  border: 1px solid var(--line);
  transition: transform 0.13s ease, border-color 0.13s ease;
}
.druckgitter a:hover { transform: translateY(-2px); border-color: rgba(217,182,80,0.55); }
.druckgitter a:focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; }
.druckgitter img { width: 100%; height: auto; display: block; background: var(--surface); }

.druckgitter .aktueller a {
  border-color: var(--accent-hot);
  box-shadow: 0 0 0 2px rgba(255,96,0,0.35);
}
.druckgitter .guenstigster a {
  border-color: rgba(111,207,151,0.7);
  box-shadow: 0 0 0 1px rgba(111,207,151,0.35);
}

.dr-marke {
  position: absolute;
  left: 0.28rem; top: 0.28rem;
  line-height: 1;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  border-radius: 999px;
  padding: 0.2rem 0.42rem;
}
.dr-marke.hier   { background: var(--accent-hot); color: #14181B; }
.dr-marke.billig { background: #6FCF97; color: #14181B; }

.dr-zeile { display: flex; align-items: baseline; gap: 0.35rem; }
.dr-set {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--gold);
}
.dr-jahr { font-size: 0.66rem; color: var(--text-3); font-variant-numeric: tabular-nums; }
.dr-preis {
  font-size: 0.74rem;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
}
.druckgitter .guenstigster .dr-preis { color: #A8DCC0; font-weight: 600; }

@media (min-width: 34rem) {
  .druckgitter { grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); }
}
@media (min-width: 52rem) {
  .druckgitter { grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .druckgitter a { transition: none; }
}

/* ---------------------------------------------------- Einzelkarte als Proxy */

.proxywahl {
  list-style: none;
  margin: 0.9rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(5.5rem, 1fr));
  gap: 0.5rem;
}
.proxywahl a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
  min-height: 62px;
  padding: 0.6rem 0.5rem;
  border-radius: 5px;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,0.04);
  text-decoration: none;
}
.proxywahl a:hover { border-color: var(--gold); background: rgba(217,182,80,0.1); }
.proxywahl strong {
  font-family: var(--f-display);
  font-size: 1.25rem;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.proxywahl a:hover strong { color: var(--gold); }
.proxywahl span { font-size: 0.72rem; color: var(--text-3); }

.leer-klein { font-size: 0.88rem; color: var(--text-3); margin-top: -0.4rem; }

/* -------------------------------------------- Einstieg der Kartensuche */

.leer { display: grid; gap: 1.6rem; }
.leer-text { max-width: 58ch; }
.leer-text h1 { margin-bottom: 0.7rem; }
.leer-text p { color: var(--text-2); max-width: none; }


@media (min-width: 52rem) {
  .leer { grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr); gap: 2.6rem; align-items: start; }
  .leer-text { max-width: 62ch; }
}


/* ------------------------------------------- Zufällig herausgegriffene Karte */

.leer-karte {
  margin: 0;
  padding: 1rem 1.1rem 1.15rem;
  background: linear-gradient(165deg, #232B31 0%, #1A2126 100%);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "label label" "bild text";
  gap: 0.3rem 1rem;
  align-items: start;
}
.lk-label {
  grid-area: label;
  margin: 0 0 0.6rem;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-3);
}
.lk-bild { grid-area: bild; display: block; line-height: 0; }
.leer-karte img {
  display: block;
  width: 8.6rem;
  height: auto;
  border-radius: 4.75% / 3.5%;
  box-shadow: 0 0 0 1px rgba(217,182,80,0.22), 0 12px 28px rgba(0,0,0,0.5);
  transition: box-shadow 0.14s ease, transform 0.14s ease;
}
.lk-bild:hover img { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(217,182,80,0.6), 0 16px 34px rgba(0,0,0,0.55); }

.leer-karte figcaption { grid-area: text; display: flex; flex-direction: column; gap: 0.35rem; }
.leer-karte figcaption > a:first-child {
  font-family: var(--f-display);
  font-size: 1.12rem;
  line-height: 1.2;
  color: var(--text);
  text-decoration: none;
}
.leer-karte figcaption > a:first-child:hover { color: var(--gold); }
.leer-karte figcaption span { font-size: 0.82rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Knopf zum Weiterwuerfeln. Hatte vorher gar keine Regel und kam deshalb
   als blauer Browserlink daher. */
.leer-noch {
  align-self: start;
  margin-top: 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 40px;
  padding: 0 0.9rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.05);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.leer-noch::before {
  content: "";
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
  box-shadow: inset 3px 3px 0 -1.5px currentColor, inset -3px -3px 0 -1.5px currentColor;
}
.leer-noch:hover { background: var(--gold); border-color: var(--gold); color: #14181B; }
.leer-noch:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.leer-karte.laedt img { opacity: 0.45; }
.leer-karte img { transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.14s ease; }
.leer-noch {
  align-self: flex-start;
  margin-top: 0.35rem;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 0.85rem;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line-strong);
  color: var(--text-2);
  font-size: 0.82rem;
  font-weight: 600;
  text-decoration: none;
}
.leer-noch:hover { background: var(--gold); color: #14181B; border-color: var(--gold); }

@media (min-width: 52rem) {
  .leer-karte img { width: 9.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  .leer-karte img, .suche input, .suche button, .s-wuerfel { transition: none; }
}

/* Logo plus Reiter passen auf Telefonen nicht in der grossen Fassung. Mit 3
   Reitern ergab das 391px und riss schon bei 360px Breite, mit dem vierten
   (Playtest) reisst es bis rauf zu den grossen Telefonen. Zwei Stufen: eine
   fuer Telefone allgemein, eine fuer die schmalen. */
@media (max-width: 30rem) {
  .kopf { gap: 0.5rem; padding-left: 0.7rem; padding-right: 0.7rem; }
  /* Monogramm statt Wortmarke: das sind rund 90 Pixel, die die Reiter brauchen. */
  .marke img { width: 2.1rem; height: 2.1rem; }
  .haupt-nav { gap: 0.2rem; }
  .haupt-nav a { padding: 0.42rem 0.7rem; font-size: 0.85rem; }
  .nav-lang { display: none; }
  .nav-kurz { display: inline; }
}

@media (max-width: 24rem) {
  .marke img { width: 1.9rem; height: 1.9rem; }
  .haupt-nav { gap: 0.12rem; }
  .haupt-nav a { padding: 0.42rem 0.52rem; font-size: 0.8rem; }
}

/* 320px, das schmalste, was noch vorkommt. */
@media (max-width: 20rem) {
  .kopf { padding-left: 0.5rem; padding-right: 0.5rem; }
  .haupt-nav a { padding: 0.42rem 0.38rem; font-size: 0.76rem; }
}