/* H&K Branchenwissen — Design nach 00 Kontext/Branding.md:
   helles Neumorphic, Indigo Akzent, Poppins fuer Ueberschriften, Inter fuer Text.
   Bewusste Abweichung vom App Standard: keine Sidebar. Die App hat keine Navigation,
   und auf dem Handy wuerde eine feste Leiste die Karte erdruecken. */

@font-face { font-family:'Inter';   src:url('/fonts/inter.woff2') format('woff2');       font-weight:400 600; font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/fonts/poppins-600.woff2') format('woff2'); font-weight:600;     font-display:swap; }
@font-face { font-family:'Poppins'; src:url('/fonts/poppins-700.woff2') format('woff2'); font-weight:700;     font-display:swap; }

:root {
  --bg:#ecedf1; --acc:#6d7aff; --acc-d:#5c6ae8;
  --text:#050505; --text-2:#6b7280; --text-3:#9ca3af;
  --sl:rgba(255,255,255,.9); --sd:rgba(166,171,189,.45); --sd2:rgba(166,171,189,.25);
  --green:#10b981; --orange:#f59e0b; --red:#ef4444;
}
* { box-sizing:border-box; margin:0; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; }
body {
  font-family:'Inter','Helvetica Neue',Arial,sans-serif; background:var(--bg); color:var(--text);
  font-size:14px; overflow:hidden;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ═══ Wortmarke ═══ */
.marke { font-family:'Poppins',sans-serif; font-weight:700; letter-spacing:-.01em; }
.marke span { color:var(--acc); }
.unterzeile { font-size:.66rem; color:var(--text-3); text-transform:uppercase; letter-spacing:.1em; margin-top:3px; }

/* ═══ Anmeldung ═══ */
#login-seite { height:100%; display:flex; align-items:center; justify-content:center; padding:20px; }
.login-karte {
  width:380px; max-width:100%; background:var(--bg); border-radius:18px; padding:38px 36px;
  box-shadow:-6px -6px 16px var(--sl), 6px 6px 16px var(--sd2); text-align:center;
}
.login-karte .marke { font-size:1.05rem; }
.login-karte form { margin-top:26px; }
.feld {
  width:100%; border:none; outline:none; background:var(--bg); color:var(--text);
  font-family:inherit; font-size:.92rem; padding:13px 16px; border-radius:12px; text-align:left;
  box-shadow:inset 3px 3px 7px var(--sd2), inset -3px -3px 7px var(--sl);
}
.feld::placeholder { color:var(--text-3); }
.feld-2 { margin-top:10px; }
.knopf-voll {
  width:100%; margin-top:14px; border:none; cursor:pointer; font-family:'Poppins',sans-serif;
  font-weight:600; font-size:.86rem; color:#fff; background:var(--acc); padding:13px;
  border-radius:12px; box-shadow:-3px -3px 8px var(--sl), 3px 3px 8px var(--sd2); transition:background .15s;
}
.knopf-voll:hover { background:var(--acc-d); }
.knopf-voll:disabled { opacity:.55; cursor:default; }
.hinweis { margin-top:14px; font-size:.76rem; color:var(--red); min-height:1.1em; }

/* ═══ Lernansicht ═══ */
#app { height:100%; display:flex; flex-direction:column; max-width:640px; margin:0 auto; padding:14px 16px 18px; }
.kopf { display:flex; align-items:flex-start; justify-content:space-between; flex-shrink:0; }
.kopf .marke { font-size:.9rem; }
.kopf-rechts { display:flex; align-items:center; gap:14px; }
.mini {
  background:none; border:none; cursor:pointer; font-family:inherit; font-size:.72rem;
  color:var(--text-3); padding:4px; transition:color .15s;
}
.mini:hover { color:var(--text-2); }
.mini.weg:hover { color:var(--red); }

/* Karte: dreht sich in 3D um die Y Achse */
.buehne { flex:1; min-height:0; display:flex; align-items:stretch; padding:18px 0; perspective:1600px; }
.karte { position:relative; width:100%; height:100%; cursor:pointer; transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.15,.2,1); }
.karte.gedreht { transform:rotateY(180deg); }
.seite {
  position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  background:var(--bg); border-radius:22px; padding:30px 26px;
  box-shadow:-7px -7px 18px var(--sl), 7px 7px 18px var(--sd2);
  display:flex; flex-direction:column; overflow:hidden;
}
.seite.rueck { transform:rotateY(180deg); }

.vorn-inhalt { margin:auto; text-align:center; width:100%; }
/* Lange Komposita wie "Rechnungsabgrenzungsposten" muessen umbrechen duerfen,
   sonst sprengen sie die Karte nach rechts. */
.begriff {
  font-family:'Poppins',sans-serif; font-weight:700; line-height:1.25; letter-spacing:-.01em;
  font-size:clamp(1.05rem, 5.4vw, 1.6rem); overflow-wrap:anywhere; hyphens:auto;
}
.block-pille {
  display:inline-block; margin-bottom:18px; font-size:.62rem; font-weight:600; letter-spacing:.1em;
  text-transform:uppercase; color:var(--text-3); padding:5px 12px; border-radius:50px;
  box-shadow:inset 2px 2px 5px var(--sd2), inset -2px -2px 5px var(--sl);
}
.tipp { margin-top:22px; font-size:.72rem; color:var(--text-3); }

.rueck .begriff-klein { font-family:'Poppins',sans-serif; font-weight:600; font-size:.95rem; color:var(--acc); flex-shrink:0; overflow-wrap:anywhere; hyphens:auto; }
.trenner { height:1px; background:rgba(166,171,189,.3); margin:14px 0 16px; flex-shrink:0; }
.erklaerung { font-size:.95rem; line-height:1.65; color:var(--text); overflow-y:auto; min-height:0; overflow-wrap:break-word; -webkit-overflow-scrolling:touch; }

/* Bewertung */
.bewertung { display:flex; gap:10px; flex-shrink:0; opacity:0; pointer-events:none; transition:opacity .25s; }
.bewertung.an { opacity:1; pointer-events:auto; }
.b-knopf {
  flex:1; border:none; cursor:pointer; background:var(--bg); font-family:'Poppins',sans-serif;
  font-weight:600; font-size:clamp(.72rem,3.2vw,.8rem); white-space:nowrap; color:var(--text-2); padding:15px 6px; border-radius:14px;
  box-shadow:-4px -4px 10px var(--sl), 4px 4px 10px var(--sd2); transition:box-shadow .12s, transform .12s;
  display:flex; flex-direction:column; align-items:center; gap:7px;
}
.b-knopf:active { box-shadow:inset 3px 3px 7px var(--sd2), inset -3px -3px 7px var(--sl); transform:translateY(1px); }
.punkt { width:9px; height:9px; border-radius:50%; }
.b-gruen  .punkt { background:var(--green); }
.b-gelb   .punkt { background:var(--orange); }
.b-rot    .punkt { background:var(--red); }
.b-gruen:hover { color:var(--green); }
.b-gelb:hover  { color:var(--orange); }
.b-rot:hover   { color:var(--red); }

/* Meldung unten (Ausmustern rueckgaengig, Offline Hinweis) */
.toast {
  position:fixed; left:50%; bottom:calc(18px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  background:var(--bg); border-radius:14px; padding:11px 16px; display:flex; align-items:center; gap:14px;
  box-shadow:-4px -4px 12px var(--sl), 5px 5px 14px var(--sd); font-size:.78rem; color:var(--text-2);
  opacity:0; pointer-events:none; transition:opacity .2s; z-index:20; max-width:calc(100% - 32px);
}
.toast.an { opacity:1; pointer-events:auto; }
.toast button { background:none; border:none; cursor:pointer; font-family:'Poppins',sans-serif; font-weight:600; font-size:.78rem; color:var(--acc); padding:0; }

.leer { margin:auto; text-align:center; color:var(--text-2); }
.leer h2 { font-family:'Poppins',sans-serif; font-size:1.05rem; color:var(--text); margin-bottom:8px; }

/* Rechner: Karte nicht ueber die ganze Hoehe ziehen, sonst wirkt sie leer */
@media (min-width:720px) and (min-height:700px) {
  .buehne { align-items:center; }
  .karte { height:min(100%, 540px); }
}

/* Handy: Karte darf die volle Hoehe nutzen, Knoepfe bleiben in Daumennaehe */
@media (max-width:520px) {
  .seite { padding:26px 22px; border-radius:20px; }
  .erklaerung { font-size:.92rem; }
  #app { padding:12px 13px 14px; }
}
@media (max-height:640px) {
  .begriff { font-size:clamp(1rem, 4.4vw, 1.25rem); }
  .tipp { margin-top:14px; }
  .b-knopf { padding:12px 6px; }
}