/* MeineMappe.de / Bewerbungsstudio – modernes Erscheinungsbild (Desktop und Web-App). Liegt ÜBER studio.css bzw.
   mm.css (Serverseiten der Web-App) und ändert nur
   Gestaltung, nicht den Aufbau: Schrift Inter (eingebettet, OFL), ruhigere Farben, größere Rundungen, weiche Schatten,
   Glas-Leisten, Knöpfe mit Verlauf, deutlichere Eingabefelder. Hell und dunkel automatisch. */
@font-face {
  font-family: "Inter MM"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("schrift/InterVariable.woff2") format("woff2");   /* relativ: /static/… am Desktop und in der Web-App */
}
:root {
  --hg: #f4f6f8; --flaeche: #ffffff; --flaeche-2: #f1f4f7; --rand: #e4e8ee; --rand-stark: #cdd5df;
  --text: #0f172a; --text-2: #475569; --text-3: #8391a5;
  --akzent: #0d9488; --akzent-2: #14b8a6; --akzent-hell: #e3f7f4; --akzent-text: #ffffff;
  --akzent-verlauf: linear-gradient(135deg, #0f766e 0%, #0d9488 45%, #14b8a6 100%);
  --radius: 16px; --radius-klein: 10px;
  --schatten: 0 1px 2px rgba(15, 23, 42, .04), 0 6px 16px -6px rgba(15, 23, 42, .08);
  --schatten-gross: 0 28px 56px -16px rgba(15, 23, 42, .22);
  --schatten-knopf: 0 1px 2px rgba(15, 118, 110, .25), 0 8px 18px -8px rgba(13, 148, 136, .65);
  --fokus: 0 0 0 4px color-mix(in srgb, var(--akzent) 20%, transparent);
  --glas: color-mix(in srgb, var(--flaeche) 78%, transparent);
  --schrift: "Inter MM", "Inter Variable", Inter, "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --hg: #0a0e13; --flaeche: #11171f; --flaeche-2: #18202a; --rand: #222c38; --rand-stark: #2f3b4a;
    --text: #e7edf4; --text-2: #a3afbf; --text-3: #6f7d8f;
    --akzent: #2dd4bf; --akzent-2: #5eead4; --akzent-hell: #0f2e2b; --akzent-text: #04211e;
    --akzent-verlauf: linear-gradient(135deg, #14b8a6 0%, #2dd4bf 60%, #5eead4 100%);
    --schatten: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 20px -10px rgba(0, 0, 0, .6);
    --schatten-gross: 0 30px 60px -18px rgba(0, 0, 0, .8);
    --schatten-knopf: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 20px -8px rgba(45, 212, 191, .45);
    --glas: color-mix(in srgb, var(--flaeche) 72%, transparent);
  }
}

/* Grundlage */
[hidden] { display: none !important; }   /* sonst überstimmt z. B. display: grid das Attribut (wie im Studio) */
body { font-family: var(--schrift); font-feature-settings: "cv11", "ss01", "calt"; letter-spacing: -0.006em;
  background: var(--hg) radial-gradient(1200px 600px at 100% -10%, color-mix(in srgb, var(--akzent) 7%, transparent), transparent 60%) no-repeat fixed; }
h1 { font-weight: 750; letter-spacing: -0.025em; }
h2 { font-weight: 680; letter-spacing: -0.015em; }
::selection { background: color-mix(in srgb, var(--akzent) 25%, transparent); }

/* Karten */
.karte { border-radius: var(--radius); border-color: var(--rand); box-shadow: var(--schatten); }
.karte.kachel, .bw-karte, .profil-eintrag { transition: transform .18s ease, box-shadow .18s ease, border-color .18s; }
@media (hover: hover) {
  .karte.kachel:hover, .bw-karte:hover, .profil-eintrag:hover { transform: translateY(-2px); box-shadow: var(--schatten-gross); }
}

/* Knöpfe */
.knopf { border-radius: var(--radius-klein); font-weight: 600; transition: transform .12s ease, box-shadow .15s, background .15s, border-color .15s, filter .15s; }
.knopf.primaer { background: var(--akzent-verlauf); border-color: transparent; color: var(--akzent-text); box-shadow: var(--schatten-knopf); }
@media (hover: hover) { .knopf.primaer:hover { filter: brightness(1.06) saturate(1.05); transform: translateY(-1px); background: var(--akzent-verlauf); } }
.knopf:focus-visible { outline: none; box-shadow: var(--fokus); }

/* Eingaben */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=time], input[type=number],
input:not([type]), select, textarea {
  border-radius: var(--radius-klein); border: 1px solid var(--rand-stark); background: var(--flaeche);
  transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--akzent); box-shadow: var(--fokus); }

/* Studio: Seitenleiste, Kopf, Navigation */
/* Glas nur am PC: backdrop-filter macht ein Element zum Bezugsrahmen für position: fixed – am Handy säße die
   Navigationsleiste (Kind der Seitenleiste) sonst oben statt unten */
@media (min-width: 761px) {
  .seitenleiste { background: var(--glas); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
}
.marke .logo, .app-marke .logo { background: var(--akzent-verlauf); box-shadow: var(--schatten-knopf); border-radius: 10px; }
.nav button { border-radius: var(--radius-klein); }
.nav button.aktiv { box-shadow: inset 3px 0 0 var(--akzent); }
.kopf { background: linear-gradient(to bottom, color-mix(in srgb, var(--hg) 92%, transparent), color-mix(in srgb, var(--hg) 70%, transparent));
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.kopf h1 { font-size: 26px; }
.bereiche button { border-radius: 14px; transition: border-color .15s, background .15s, box-shadow .15s; }
.bereiche button.an { box-shadow: 0 0 0 3px color-mix(in srgb, var(--akzent) 14%, transparent); }
.pille { border-radius: 999px; }
.schleier { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog { border-radius: 20px; box-shadow: var(--schatten-gross); }

/* Handy: Navigation als schwebende Glasleiste (Studio .nav und Serverseiten .app-leiste) */
@media (max-width: 760px) {
  .nav, .app-leiste { left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); border: 1px solid var(--rand);
    border-radius: 22px; padding: 6px 4px; background: var(--glas); backdrop-filter: saturate(160%) blur(18px);
    -webkit-backdrop-filter: saturate(160%) blur(18px); box-shadow: var(--schatten-gross); }
  .nav button.aktiv { box-shadow: none; }
  .nav button.aktiv svg, .app-leiste a.aktiv svg { color: var(--akzent); }
  .inhalt { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }
  .toasts { bottom: calc(92px + env(safe-area-inset-bottom)); }
  .kopf h1 { font-size: 22px; }
}

/* Öffentliche Seiten (mm.css): Kopfzeile aus Glas, Anmeldung */

.seitenkopf { background: var(--glas); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); }
.anmelde-karte { padding: 28px; border-radius: 22px; box-shadow: var(--schatten-gross); }
.anmelde-karte h2 { font-size: 22px; margin-bottom: 4px; }
.anmelde-karte .formular { gap: 14px; margin-top: 14px; }
.anmelde-karte input { font-size: 16px; padding: 12px 14px; min-height: 48px; }
.anmelde-karte .knopf.gross { width: 100%; min-height: 50px; font-size: 16px; }
.anmelde-weiter { margin: 16px 0 6px; text-align: center; }
.anmelde-weiter a { font-weight: 600; text-decoration: none; }
.test-willkommen img { box-shadow: var(--schatten-knopf); }
.test-willkommen h1 { font-size: 32px; }
.code-feld { font-size: 26px !important; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.pw-zeile { display: flex; gap: 8px; align-items: center; }
.pw-zeile input { flex: 1; min-width: 0; }
.pw-staerke { height: 4px; border-radius: 99px; background: var(--flaeche-2); overflow: hidden; margin-top: 6px; }
.pw-staerke span { display: block; height: 100%; width: 0; border-radius: inherit; transition: width .25s, background .25s; background: #ef4444; }
.pw-staerke span[data-stufe=mittel] { background: #f59e0b; }
.pw-staerke span[data-stufe=gut] { background: var(--akzent); }

/* Bestätigungsseite: für welches Konto gilt der Link? */
.link-konto { display: grid; gap: 2px; padding: 12px 14px; margin: 4px 0 12px; border-radius: var(--radius-klein);
  background: var(--akzent-hell); border: 1px solid color-mix(in srgb, var(--akzent) 30%, transparent); }
.link-konto b { font-size: 17px; overflow-wrap: anywhere; }