/* JM Energy Consulting, gemeinsames Stylesheet der Demo-Anwendungen (09.09.2026)
   Uebernimmt die Design-Sprache der Leistungsseiten (Cream, Bronze, Fraunces),
   ergaenzt um alles, was eine Anwendung braucht: Tabellen, Formulare, Belege. */

:root {
  --ink:        #1A1410;
  --cream:      #F4EFE6;
  --paper:      #FBF8F1;
  --bronze:     #A37D38;
  --bronze-deep:#6E5226;
  --olive:      #6E8E22;
  --rot:        #A8442A;
  --mut:        #6B5B44;
  --mut-soft:   #8B7050;
  --line:       rgba(26,20,16,0.10);
  --line-hart:  rgba(26,20,16,0.18);
  --display: 'Fraunces', Georgia, serif;
  --body: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--cream); color: var(--ink);
  font-family: var(--body); font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bronze-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Kopf ---------- */
.demo-nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 18px;
  padding: 12px 26px; background: rgba(251,248,241,.92);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.demo-nav .logo { font-family: var(--display); font-size: 17px; letter-spacing: .2px; }
.demo-nav .logo em { font-style: normal; color: var(--bronze); }
.demo-nav .rest { margin-left: auto; display: flex; gap: 18px; align-items: center; font-size: 13.5px; }
.marke {
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  background: var(--bronze); color: #FFFCF3; padding: 3px 9px; border-radius: 999px;
}

.demo-kopf { max-width: 1180px; margin: 0 auto; padding: 40px 26px 6px; }
.demo-kopf .eyebrow {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--mut-soft); margin-bottom: 10px;
}
.demo-kopf h1 { font-family: var(--display); font-weight: 300; font-size: clamp(28px, 4vw, 44px); line-height: 1.12; }
.demo-kopf h1 em { font-style: italic; color: var(--bronze); }
.demo-kopf .lede { margin-top: 12px; max-width: 74ch; color: var(--mut); font-size: 16px; }

.hinweis {
  max-width: 1180px; margin: 20px auto 0; padding: 12px 16px;
  background: #FFF6E2; border-left: 3px solid var(--bronze);
  font-size: 13.5px; color: var(--bronze-deep);
}

/* ---------- Flaechen ---------- */
.wrap { max-width: 1180px; margin: 0 auto; padding: 26px; }
.karte {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 20px;
}
.karte > h2 {
  font-family: var(--display); font-weight: 400; font-size: 21px;
  margin-bottom: 4px;
}
.karte > .unter { color: var(--mut); font-size: 13.5px; margin-bottom: 16px; }
.reihe { display: flex; gap: 20px; flex-wrap: wrap; }
.reihe > * { flex: 1 1 320px; min-width: 0; }

/* ---------- Kennzahlen ---------- */
.kpis { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.kpi {
  flex: 1 1 150px; background: var(--paper); border: 1px solid var(--line);
  border-left: 3px solid var(--olive); border-radius: 10px; padding: 12px 14px;
}
.kpi b { display: block; font-family: var(--display); font-size: 25px; font-weight: 400; line-height: 1.15; }
.kpi span { font-size: 12px; color: var(--mut); }

/* ---------- Bedienelemente ---------- */
label { display: block; font-size: 12.5px; color: var(--mut); margin-bottom: 4px; }
input, select, textarea {
  width: 100%; padding: 9px 11px; font: inherit; font-size: 14px;
  background: #fff; color: var(--ink);
  border: 1px solid var(--line-hart); border-radius: 8px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold-soft, #F4D9A0); border-color: var(--bronze); }
.feld { margin-bottom: 12px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 500;
  background: var(--bronze); color: #FFFCF3; border: 1px solid var(--bronze);
  border-radius: 999px;
}
.btn:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }
.btn.stumm { background: transparent; color: var(--bronze-deep); }
.btn.stumm:hover { background: rgba(163,125,56,.10); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-reihe { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* ---------- Tabellen ---------- */
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
th {
  text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--mut);
  padding: 8px 10px; border-bottom: 1.5px solid var(--line-hart);
}
td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
tr:hover td { background: rgba(163,125,56,.05); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
td.mono { font-family: var(--mono); font-size: 12.5px; }
.tab-scroll { overflow-x: auto; }

.pill {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 11.5px; font-weight: 500; white-space: nowrap;
}
.pill.gruen { background: rgba(110,142,34,.15); color: #4A6316; }
.pill.gelb  { background: rgba(163,125,56,.18); color: var(--bronze-deep); }
.pill.rot   { background: rgba(168,68,42,.14); color: var(--rot); }
.pill.grau  { background: rgba(26,20,16,.07); color: var(--mut); }

.leer { padding: 26px; text-align: center; color: var(--mut-soft); font-size: 14px; }

/* ---------- Beleg / Dokumentvorschau ---------- */
.beleg {
  background: #fff; border: 1px solid var(--line-hart); border-radius: 6px;
  padding: 30px 34px; font-size: 13px; line-height: 1.55;
  box-shadow: 0 8px 30px rgba(26,20,16,.07);
}
.beleg .kopfzeile { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 26px; }
.beleg .absender { font-family: var(--display); font-size: 17px; }
.beleg .absender span { display: block; font-family: var(--body); font-size: 11.5px; color: var(--mut); margin-top: 3px; }
.beleg h3 { font-family: var(--display); font-weight: 400; font-size: 20px; margin: 18px 0 10px; }
.beleg .meta { display: flex; gap: 28px; flex-wrap: wrap; font-size: 12px; color: var(--mut); margin-bottom: 16px; }
.beleg .meta b { display: block; color: var(--ink); font-weight: 500; font-size: 13px; }
.beleg table { font-size: 12.5px; }
.beleg .summen { margin-top: 14px; margin-left: auto; width: 280px; }
.beleg .summen div { display: flex; justify-content: space-between; padding: 4px 0; }
.beleg .summen .gesamt { border-top: 1.5px solid var(--line-hart); margin-top: 5px; padding-top: 7px; font-weight: 600; font-size: 14.5px; }
.beleg .fuss { margin-top: 24px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 10.5px; color: var(--mut); }
.beleg.storniert { position: relative; }
.beleg.storniert::after {
  content: 'STORNIERT'; position: absolute; top: 42%; left: 50%;
  transform: translate(-50%,-50%) rotate(-16deg);
  font-family: var(--display); font-size: 58px; color: rgba(168,68,42,.16);
  letter-spacing: .06em; pointer-events: none;
}

/* ---------- Protokoll ---------- */
.log { font-family: var(--mono); font-size: 12px; max-height: 260px; overflow-y: auto; }
.log div { padding: 4px 0; border-bottom: 1px solid var(--line); color: var(--mut); }
.log div b { color: var(--ink); font-weight: 500; }

/* ---------- Fuss ---------- */
.demo-fuss {
  max-width: 1180px; margin: 10px auto 60px; padding: 22px 26px;
  border-top: 1px solid var(--line); font-size: 13px; color: var(--mut);
  display: flex; gap: 20px; flex-wrap: wrap; align-items: center;
}
.demo-fuss .btn { margin-left: auto; }

@media (max-width: 720px) {
  .demo-kopf { padding-top: 26px; }
  .karte { padding: 16px; }
  .beleg { padding: 20px; }
  .beleg .summen { width: 100%; }
}
@media print {
  .demo-nav, .demo-kopf, .hinweis, .demo-fuss, .btn-reihe, .karte:not(.druck) { display: none !important; }
  body { background: #fff; }
  .beleg { border: none; box-shadow: none; padding: 0; }
}

/* ============================================================
   Grafische Aufwertung (09.09.2026)
   Diagramm-Bausteine, feinere Flaechen, Bewegung beim Laden.
   ============================================================ */

/* ---------- Kopf mit Raster und Lichtschein ---------- */
body {
  background-image:
    radial-gradient(circle at 18% -6%, rgba(163,125,56,.13), transparent 46%),
    radial-gradient(circle at 92% 2%, rgba(110,142,34,.10), transparent 40%);
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.demo-kopf { position: relative; }
.demo-kopf::before {
  content: ''; position: absolute; inset: -10px -26px auto auto; width: 240px; height: 150px;
  background-image: radial-gradient(rgba(163,125,56,.30) 1px, transparent 1px);
  background-size: 13px 13px; opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(200deg, #000, transparent 72%);
  mask-image: linear-gradient(200deg, #000, transparent 72%);
}
.demo-kopf h1 { letter-spacing: -.012em; }
.demo-kopf .eyebrow::before {
  content: ''; display: inline-block; width: 22px; height: 1px;
  background: var(--bronze); vertical-align: middle; margin-right: 9px;
}

/* ---------- Flaechen mit mehr Tiefe ---------- */
.karte {
  background: linear-gradient(180deg, #FDFBF6 0%, var(--paper) 100%);
  box-shadow: 0 1px 2px rgba(26,20,16,.03), 0 10px 30px -18px rgba(26,20,16,.22);
  transition: box-shadow .25s ease, transform .25s ease;
}
.karte > h2 {
  display: flex; align-items: baseline; gap: 10px;
}
.karte > h2::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, rgba(163,125,56,.35), transparent);
}
.kpi {
  transition: transform .22s ease, box-shadow .22s ease;
  background: linear-gradient(180deg, #FDFBF6, var(--paper));
}
.kpi:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -16px rgba(26,20,16,.3); }
.btn { transition: background .18s ease, transform .12s ease, box-shadow .18s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 6px 16px -8px rgba(110,82,38,.6); }
.btn:active:not(:disabled) { transform: translateY(0); }
tbody tr:nth-child(even) td { background: rgba(163,125,56,.028); }
tbody tr:hover td { background: rgba(163,125,56,.075); }

/* ---------- Balken im Vergleich ---------- */
.balkenwerk { display: grid; gap: 9px; }
.balkenzeile { display: grid; grid-template-columns: minmax(96px, 168px) 1fr auto;
               align-items: center; gap: 12px; font-size: 12.8px; }
.balkenzeile .bez { color: var(--mut); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balkenzeile .wert { font-variant-numeric: tabular-nums; font-weight: 500; min-width: 74px; text-align: right; }
.spur { height: 11px; border-radius: 999px; background: rgba(26,20,16,.06); overflow: hidden; position: relative; }
.spur i { display: block; height: 100%; border-radius: 999px; width: 0;
          background: linear-gradient(90deg, var(--bronze), #C79B4F);
          transition: width .7s cubic-bezier(.22,.8,.28,1); }
.spur i.olive { background: linear-gradient(90deg, #5F7D1C, var(--olive)); }
.spur i.rot   { background: linear-gradient(90deg, #8E3822, var(--rot)); }
.spur i.grau  { background: linear-gradient(90deg, #9C9184, #B6ADA1); }
.spur .grenze { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--rot); opacity: .75; }

/* ---------- Saeulen ---------- */
.stabwerk { display: flex; align-items: flex-end; gap: 9px; height: 148px; padding-top: 8px; }
.stabwerk > div { flex: 1; display: flex; flex-direction: column; justify-content: flex-end;
                 align-items: center; gap: 6px; min-width: 0; }
.stabwerk b { display: block; width: 100%; border-radius: 6px 6px 2px 2px;
             background: linear-gradient(180deg, #C79B4F, var(--bronze));
             transition: height .7s cubic-bezier(.22,.8,.28,1); }
.stabwerk b.leer { background: rgba(26,20,16,.09); }
.stabwerk span { font-size: 10.5px; color: var(--mut-soft); white-space: nowrap; }
.stabwerk em { font-style: normal; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--mut); }

/* ---------- Ring ---------- */
.ringblock { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.ring { width: 118px; height: 118px; border-radius: 50%; flex: 0 0 auto; position: relative;
        display: grid; place-items: center; }
.ring::after {
  content: ''; position: absolute; inset: 15px; border-radius: 50%;
  background: var(--paper); box-shadow: inset 0 1px 3px rgba(26,20,16,.07);
}
.ring .mitte { position: relative; z-index: 1; text-align: center; line-height: 1.15; }
.ring .mitte b { display: block; font-family: var(--display); font-size: 25px; font-weight: 400; }
.ring .mitte span { font-size: 10.5px; color: var(--mut); }
.legende { display: grid; gap: 6px; font-size: 12.8px; }
.legende div { display: flex; align-items: center; gap: 8px; color: var(--mut); }
.legende i { width: 9px; height: 9px; border-radius: 3px; display: inline-block; flex: 0 0 auto; }
.legende b { color: var(--ink); font-variant-numeric: tabular-nums; }

/* ---------- Zeitstrahl ---------- */
.strahl { position: relative; height: 46px; margin: 8px 0 4px; }
.strahl .achse { position: absolute; left: 0; right: 0; top: 15px; height: 3px;
                 border-radius: 999px; background: rgba(26,20,16,.09); }
.strahl .fuellung { position: absolute; left: 0; top: 15px; height: 3px; border-radius: 999px;
                    background: linear-gradient(90deg, var(--bronze), #C79B4F); }
.strahl .punkt { position: absolute; top: 9px; width: 15px; height: 15px; border-radius: 50%;
                 background: var(--paper); border: 3px solid var(--bronze); transform: translateX(-50%); }
.strahl .punkt.offen { border-color: rgba(26,20,16,.22); }
.strahl .schilder { position: absolute; top: 28px; left: 0; right: 0; display: flex;
                    justify-content: space-between; gap: 10px; font-size: 10.5px; color: var(--mut); }
.strahl .schilder span:nth-child(2) { text-align: center; }
.strahl .schilder span:last-child { text-align: right; }

/* ---------- Icon-Flaechen ---------- */
.sinn { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center;
        background: linear-gradient(150deg, rgba(163,125,56,.16), rgba(163,125,56,.05));
        border: 1px solid rgba(163,125,56,.22); flex: 0 0 auto; }
.sinn svg { width: 22px; height: 22px; stroke: var(--bronze-deep); fill: none;
            stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Eintritt ---------- */
@media (prefers-reduced-motion: no-preference) {
  .karte, .kpi { animation: auf .5s cubic-bezier(.22,.8,.28,1) both; }
  @keyframes auf { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
}

@media print {
  .stabwerk, .ring, .strahl, .spur i { animation: none !important; transition: none !important; }
  body { background-image: none; }
}

/* Zweifarbige Spur: erster Teil belegt, zweiter Teil nachbewertet oder offen. */
.spur.geteilt { display: flex; }
.spur.geteilt i { flex: 0 0 auto; border-radius: 0; }
.spur.geteilt i:first-child { border-radius: 999px 0 0 999px; }
.spur.geteilt i:last-child { border-radius: 0 999px 999px 0; }
.gruppe { margin-bottom: 13px; }
.gruppe > .kopf { font-size: 12.5px; font-weight: 600; margin-bottom: 5px; display: flex;
                  justify-content: space-between; gap: 10px; }
.gruppe > .kopf span { color: var(--mut); font-weight: 400; font-variant-numeric: tabular-nums; }

/* ---------- Telefon: Kopfleiste und Titel ----------
   Am 09.09.2026 auf dem Telefon nachgemessen: Das Logo brach dreizeilig um,
   die Querlinks liefen aus dem Bild und der Knopf zum Gespraech war nicht mehr
   sichtbar. Auf schmalen Schirmen bleiben deshalb nur Logo und der wichtigste
   Link stehen, die Querverweise auf die anderen Demos treten zurueck. */
@media (max-width: 720px) {
  .demo-nav { padding: 9px 15px; gap: 10px; }
  .demo-nav .logo { font-size: 14.5px; white-space: nowrap; }
  .demo-nav .rest { font-size: 12.5px; gap: 13px; }
  .demo-nav .rest a.quer { display: none; }
  .marke { font-size: 10px; padding: 2px 7px; }
  .demo-kopf { padding: 24px 20px 4px; }
  .demo-kopf h1 { font-size: clamp(24px, 7.4vw, 34px); }
  .demo-kopf .lede { font-size: 14.5px; }
  .hinweis { font-size: 12.8px; padding: 11px 15px; }
  .wrap { padding: 20px 16px; }
  .kpi b { font-size: 22px; }
  .stabwerk { height: 118px; }
  .balkenzeile { grid-template-columns: minmax(78px, 116px) 1fr auto; gap: 9px; font-size: 12px; }
  .strahl { height: 58px; }
  .strahl .schilder { font-size: 9.5px; gap: 6px; line-height: 1.25; }
  .ring { width: 106px; height: 106px; }
  .ring::after { inset: 13px; }
  .ring .mitte b { font-size: 21px; }
  .ring .mitte span { font-size: 9.5px; }
}