/* hipking – Grunddesign, Paket 1
   Hell/Dunkel, drei Schriftgrössen, eigener Farbton für S'Cave */

/* ---------------------------------------------------------- Schriftgrössen */
html                      { font-size: 19px; }
html[data-schrift="2"]    { font-size: 22px; }
html[data-schrift="3"]    { font-size: 26px; }

/* ---------------------------------------------------------- Farben: hell */
:root {
  --bg:        #f4f4f2;
  --flaeche:   #ffffff;
  --flaeche-2: #ebebe8;
  --rand:      #d6d6d1;
  --text:      #18181b;
  --leise:     #65656d;
  --akzent:    #1d4ed8;
  --akzent-kontrast: #ffffff;
  --ok:        #15803d;
  --fehler:    #b3261e;
  --schatten:  0 1px 2px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.06);
  --rund:      4px;
  --takt:      .18s ease;
}

/* ---------------------------------------------------------- Farben: dunkel */
:root[data-thema="dunkel"] {
  --bg:        #101012;
  --flaeche:   #1a1a1e;
  --flaeche-2: #232329;
  --rand:      #34343c;
  --text:      #f2f2f4;
  --leise:     #a0a0aa;
  --akzent:    #6ea8fe;
  --akzent-kontrast: #0b1220;
  --ok:        #4ade80;
  --fehler:    #ff8382;
  --schatten:  0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) {
    --bg:        #101012;
    --flaeche:   #1a1a1e;
    --flaeche-2: #232329;
    --rand:      #34343c;
    --text:      #f2f2f4;
    --leise:     #a0a0aa;
    --akzent:    #6ea8fe;
    --akzent-kontrast: #0b1220;
    --ok:        #4ade80;
    --fehler:    #ff8382;
    --schatten:  0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
  }
}

/* ------------------------------------------------- S'Cave: eigener Farbton */
body[data-bereich="cave"] {
  --bg:        #211d19;
  --flaeche:   #2b2621;
  --flaeche-2: #37302a;
  --rand:      #4a4138;
  --text:      #f5efe6;
  --leise:     #b6a894;
  --akzent:    #d99a3a;
  --akzent-kontrast: #1a1613;
  --schatten:  0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.5);
}
:root[data-thema="dunkel"] body[data-bereich="cave"] {
  --bg:        #141110;
  --flaeche:   #1e1a17;
  --flaeche-2: #29231e;
  --rand:      #3b322b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="hell"]) body[data-bereich="cave"] {
    --bg:        #141110;
    --flaeche:   #1e1a17;
    --flaeche-2: #29231e;
    --rand:      #3b322b;
  }
}

/* ---------------------------------------------------------- Grundgerüst */
* { box-sizing: border-box; }

/* Nichts darf breiter werden als das Fenster – sonst rutscht die Kopfleiste
   beim Scrollen nach rechts aus dem Bild. «clip» statt «hidden», damit
   die klebende Kopfleiste oben weiterhin kleben bleibt. */
html, body { height: 100%; overflow-x: clip; max-width: 100%; }

img, video, canvas, svg, table, pre { max-width: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  transition: background var(--takt), color var(--takt);
}

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; font-weight: 650; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }
p  { margin: 0 0 1rem; }
a  { color: var(--akzent); }

.huelle {
  width: 100%;
  max-width: 46rem;
  margin: 0 auto;
  padding: 1.25rem;
}

/* ---------------------------------------------------------- Kopfleiste */
.kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .75rem 1.25rem;
  background: var(--flaeche);
  border-bottom: 1px solid var(--rand);
  position: sticky;
  top: 0;
  z-index: 20;
}
.kopf .marke {
  font-weight: 700;
  letter-spacing: .01em;
  font-size: 1.05rem;
  text-decoration: none;
  color: var(--text);
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  min-width: 0;
}
.kopf .marke span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.werkzeuge { display: flex; align-items: center; gap: .4rem; flex: 0 0 auto; }

/* ---------------------------------------------------- Knöpfe und Symbole */
.b {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 2.9rem;
  padding: .6rem 1.1rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund);
  background: var(--flaeche);
  color: var(--text);
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--takt), border-color var(--takt), transform var(--takt);
}
.b:hover  { background: var(--flaeche-2); }
.b:active { transform: translateY(1px); }
.b.voll   { width: 100%; }
.b.haupt  { background: var(--akzent); border-color: var(--akzent); color: var(--akzent-kontrast); }
.b.haupt:hover { filter: brightness(1.08); }

/* Symbolknopf: exakt quadratisch, Symbol exakt mittig */
.b-symbol {
  width: 2.9rem;
  height: 2.9rem;
  min-height: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  flex: 0 0 auto;
}
.b-symbol svg { display: block; width: 1.3rem; height: 1.3rem; }
.b-symbol .schriftmass {
  display: block;
  font-weight: 700;
  font-size: .95rem;
  line-height: 1;
  text-align: center;
}

:where(a, button, input, select, textarea):focus-visible {
  outline: 3px solid var(--akzent);
  outline-offset: 2px;
}

/* ---------------------------------------------------------- Karten */
.karte {
  background: var(--flaeche);
  border: 1px solid var(--rand);
  border-radius: var(--rund);
  box-shadow: var(--schatten);
  padding: 1.5rem;
}
.karte + .karte { margin-top: 1rem; }

/* ---------------------------------------------------------- Formulare */
.feld { margin-bottom: 1.1rem; }
.feld label {
  display: block;
  margin-bottom: .35rem;
  font-weight: 600;
  font-size: .95rem;
  color: var(--leise);
}
.feld input[type=text],
.feld input[type=email],
.feld input[type=password],
.feld input[type=number],
.feld select,
.feld textarea {
  width: 100%;
  min-height: 2.9rem;
  padding: .65rem .8rem;
  border: 1px solid var(--rand);
  border-radius: var(--rund);
  background: var(--bg);
  color: var(--text);
  font: inherit;
}
.feld .hinweis { margin: .35rem 0 0; font-size: .85rem; color: var(--leise); }
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------- Meldungen */
.meldung {
  padding: .9rem 1.1rem;
  border-radius: var(--rund);
  border: 1px solid var(--rand);
  background: var(--flaeche-2);
  margin-bottom: 1rem;
}
.meldung.fehler { border-color: var(--fehler); color: var(--fehler); }
.meldung.ok     { border-color: var(--ok); color: var(--ok); }

/* ---------------------------------------------------------- Kleinkram */
.leise  { color: var(--leise); }
.mitte  { text-align: center; }
.stapel > * + * { margin-top: 1rem; }
.fuss {
  padding: 2rem 1.25rem 3rem;
  text-align: center;
  color: var(--leise);
  font-size: .85rem;
}

/* ---------------------------------------------------------- Anmeldeseite */
.anmeldung {
  min-height: calc(100vh - 4.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
}
.anmeldung .karte { width: 100%; max-width: 26rem; }
.anmeldung .wappen {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  margin: 0 auto 1rem;
  border-radius: var(--rund);
  background: var(--akzent);
  color: var(--akzent-kontrast);
  font-weight: 800;
  font-size: 1.4rem;
  line-height: 1;
}

@media (max-width: 30rem) {
  .kopf { padding: .6rem .8rem; }
  .huelle { padding: 1rem .8rem; }
  .karte { padding: 1.1rem; }
}

/* ---------------------------------------------------------- Angaben-Tabelle */
.karte table { width: 100%; border-collapse: collapse; }
.karte table th,
.karte table td {
  text-align: left;
  padding: .5rem .5rem .5rem 0;
  border-bottom: 1px solid var(--rand);
  vertical-align: top;
  font-weight: 400;
}
.karte table th { color: var(--leise); width: 45%; }
@media (max-width: 34rem) {
  .karte table th, .karte table td { display: block; width: 100%; border: 0; padding: .1rem 0; }
  .karte table td { border-bottom: 1px solid var(--rand); padding-bottom: .6rem; margin-bottom: .6rem; }
}