/* Oberflaeche der Plattform. Bewusst wenig: die Startseite soll in einer
   Sekunde verstanden sein, die Arbeit passiert in den Konfiguratoren.
   Farben und Schriftlogik sind aus dem Konfigurator uebernommen, damit der
   Uebergang nicht auffaellt. */

:root {
  --ink: #2a2622;
  --bg: #f6f3ee;
  --karte: #fffdfa;
  --soil: #6b5b4b;
  --leaf: #5d6b4b;
  --clay: #b4472a;
  --fire: #e2662d;
  --linie: #e3ddd3;
  --schatten: 0 1px 2px rgba(42, 38, 34, .06), 0 8px 24px rgba(42, 38, 34, .06);
  --rund: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 16px/1.55 "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, strong { font-family: Quicksand, "Segoe UI", system-ui, sans-serif; letter-spacing: -.01em; }
h1 { font-size: 1.6rem; margin: 0 0 .4rem; }
h2 { font-size: 1.1rem; margin: 0; }

/* ------------------------------------------------------------- Kopf */

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .9rem clamp(1rem, 4vw, 2.5rem);
  background: var(--karte); border-bottom: 1px solid var(--linie);
}

.marke { display: flex; align-items: center; gap: .7rem; }
.marke strong { display: block; font-size: 1.05rem; letter-spacing: .06em; }
.marke span { color: var(--soil); font-size: .85rem; }

.flamme {
  width: 26px; height: 26px; border-radius: 50% 50% 50% 12px;
  transform: rotate(45deg);
  background: linear-gradient(140deg, var(--fire), var(--clay));
}

.konto { display: flex; align-items: center; gap: .8rem; font-size: .9rem; color: var(--soil); }

main { max-width: 1040px; margin: 0 auto; padding: clamp(1.2rem, 4vw, 2.5rem) clamp(1rem, 4vw, 2.5rem) 4rem; }

.titel { margin-bottom: 1.1rem; }

/* ------------------------------------------------------------ Karten */

.karte {
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.2rem 1.3rem; box-shadow: var(--schatten); margin-bottom: 1.4rem;
}

.karteKopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .9rem; }

.hinweis { color: var(--soil); font-size: .92rem; margin: .2rem 0 1rem; }

/* --------------------------------------------------------- Anmeldung */

.anmeldung { max-width: 420px; margin: 8vh auto; }
.anmeldung form { display: grid; gap: .8rem; }
label { display: grid; gap: .3rem; font-size: .88rem; color: var(--soil); }

input[type=email], input[type=password], input[type=search], input[type=text] {
  font: inherit; padding: .6rem .7rem; border: 1px solid var(--linie);
  border-radius: 9px; background: #fff; color: var(--ink);
}
input:focus-visible { outline: 2px solid var(--clay); outline-offset: 1px; border-color: transparent; }

button { font: inherit; cursor: pointer; border-radius: 9px; }

.haupt {
  background: var(--clay); color: #fff; border: 0; padding: .65rem 1.1rem; font-weight: 600;
}
.haupt:hover { background: #9d3d24; }

.schlicht { background: transparent; border: 1px solid var(--linie); padding: .35rem .7rem; color: var(--soil); }
.schlicht:hover { border-color: var(--soil); color: var(--ink); }

.fehler { color: var(--clay); font-size: .9rem; margin: 0; }

/* ----------------------------------------------------------- Kacheln */

.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 1.8rem; }

.kachel {
  display: flex; flex-direction: column; gap: .45rem; text-align: left;
  background: var(--karte); border: 1px solid var(--linie); border-radius: var(--rund);
  padding: 1.2rem 1.3rem 1.3rem; box-shadow: var(--schatten);
  color: inherit; text-decoration: none; position: relative; overflow: hidden;
  transition: transform .12s ease, box-shadow .12s ease;
}
.kachel:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(42,38,34,.08), 0 14px 32px rgba(42,38,34,.1); }
.kachel::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--farbe, var(--clay)); }
.kachelhaupt { display:flex; flex-direction:column; gap:.45rem; color:inherit; text-decoration:none }
.kachel h2 { font-size: 1.15rem; }
.kachel p { margin: 0; color: var(--soil); font-size: .92rem; }
.kachel[aria-disabled=true] { opacity: .55; pointer-events: none; }
.kachel .marke2 { font-size: .78rem; color: var(--soil); text-transform: uppercase; letter-spacing: .08em; }

/* ------------------------------------------------------------ Liste */

.suchfeld { min-width: 220px; }

.liste { display: grid; gap: .1rem; }

.zeile {
  display: grid; grid-template-columns: 7rem 1fr auto auto; gap: .8rem; align-items: center;
  padding: .55rem .2rem; border-bottom: 1px solid var(--linie); font-size: .93rem;
}
.zeile:last-child { border-bottom: 0; }
.zeile a { color: var(--ink); text-decoration: none; font-weight: 600; }
.zeile a:hover { color: var(--clay); }
.zeile .kunde { color: var(--soil); }
.zeile .betrag { font-variant-numeric: tabular-nums; }

.marker {
  font-size: .74rem; padding: .12rem .5rem; border-radius: 99px;
  background: #efe9e0; color: var(--soil); white-space: nowrap;
}
.marker.abgeschickt { background: #e6ecdd; color: var(--leaf); }
.marker.gewonnen { background: #dcead0; color: #3f5a2a; }
.marker.verloren { background: #f0dcd6; color: var(--clay); }

.leer { color: var(--soil); font-size: .92rem; padding: .6rem 0; }

/* -------------------------------------------------------------- Code */

.code {
  background: #f2ede5; border: 1px solid var(--linie); border-radius: 10px;
  padding: .9rem 1rem; overflow-x: auto; font: 13px/1.5 "IBM Plex Mono", ui-monospace, Consolas, monospace;
  color: #4a4038; margin: 0;
}

.fussnote { color: var(--soil); font-size: .82rem; text-align: center; margin-top: 2rem; }

@media (max-width: 640px) {
  .zeile { grid-template-columns: 1fr auto; }
  .zeile .kunde, .zeile .marker { display: none; }
}

/* Weitere Stände desselben Konfigurators (Beta).

   Sie hängen unten an ihrer Kachel statt daneben zu stehen: gestrichelte
   Trennlinie, kleinere Schrift, ein Punkt in der Farbe des Standes. So ist
   auf einen Blick klar, dass es dieselbe Sache in einer anderen Fassung ist
   und nicht ein dritter Konfigurator. */
.kachel .staende {
  margin-top: .9rem; padding-top: .7rem; border-top: 1px dashed var(--linie);
  display: flex; flex-wrap: wrap; gap: .9rem;
}
.kachel .staende a {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--soil); text-decoration: none; font-size: .86rem;
}
.kachel .staende a:hover { color: var(--ink); }
.kachel .staende .punkt {
  width: .5rem; height: .5rem; border-radius: 50%;
  background: var(--farbe, var(--soil)); flex: none;
}