/* ============== Metals Theme – Single Source of Truth ============== */ /* ---- Design Tokens ---- */ :root{ --bg:#f8f7f1; --ink:#13161a; --muted:#697180; --card:#fff; --gold-400:#e1c04b; --gold-500:#d4af37; --gold-600:#b88900; --silver-200:#dfe5ee; --silver-400:#c7cfdb; --silver-500:#b7bfcb; --success:#17a673; --danger:#e5484d; --radius:14px; --shadow-1:0 10px 30px rgba(16,24,40,.06); } /* ---- Base ---- */ *{ box-sizing:border-box } html,body{ margin:0; padding:0; background:var(--bg); color:var(--ink); font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; line-height:1.45; } a{ color:#6b7cff; } .muted{ color:var(--muted); } .right{ text-align:right; white-space:nowrap; } .ok{ color:var(--success); } .danger{ color:var(--danger); } /* Container – NICHT als grid (damit gap uns nicht reinpfuscht) */ .wrap{ max-width:980px; margin:0 auto; padding:0 16px; } /* Abstand unter dem dunklen Header */ .app-header + .wrap{ padding-top:12px; } /* ---- Topbar ---- */ .app-header{ background:#121821; color:#fff; border-bottom:1px solid #2b3545; box-shadow:0 8px 24px rgba(0,0,0,.18); } .app-header .inner{ max-width:1100px; margin:0 auto; padding:4px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; } .app-brand{ font-weight:900; letter-spacing:.6px; font-size:clamp(22px,3.2vw,32px); text-transform:uppercase; background:linear-gradient(180deg,#ffd76e 0%,#a77400 100%); -webkit-background-clip:text; background-clip:text; color:transparent; text-shadow:0 2px 14px rgba(212,175,55,.35); } .app-actions{ display:flex; gap:10px; } /* ---- Cards & Abstände ---- */ .card{ background:var(--card); border-radius:var(--radius); border:1px solid transparent; background-image:linear-gradient(var(--card),var(--card)), linear-gradient(135deg,rgba(212,175,55,.45),rgba(183,191,203,.45)); background-clip:padding-box,border-box; box-shadow:var(--shadow-1); padding:12px 14px; } /* EINZIGE Quelle für Kartenabstand: */ .wrap > .card{ margin-top:6px !important; } .wrap > .card:first-of-type{ margin-top:0 !important; } .card--tight + .card{ margin-top:6px !important; } /* Karten-Headlines kompakt */ .card > h1,.card > h2,.card > h3{ margin:0 0 8px !important; line-height:1.2; } /* KPI-Kacheln */ .kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; } .kpi{ border-radius:14px; border:1.5px solid rgba(227,200,107,.6); background:linear-gradient(#fff,#faf7ea); box-shadow:var(--shadow-1); padding:12px; } .kpi .label{ color:var(--muted); font-size:.9rem; } .kpi .value{ font-weight:700; font-size:1.1rem; } .change-green{ color:var(--success)!important; } .change-red{ color:var(--danger)!important; } /* Buttons */ .btn{ border-radius:12px; border:1px solid var(--silver-400); background:linear-gradient(#fff,#f7f9fc); color:var(--ink); padding:10px 14px; cursor:pointer; } .btn.primary{ border-color:#e3c86b; color:#fff; background:linear-gradient(180deg,var(--gold-500),var(--gold-600)); box-shadow:0 6px 18px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.28); } .btn--gold{ border:1px solid #e3c86b; color:#fff; background:linear-gradient(180deg,#d4af37,#b88900); box-shadow:0 8px 22px rgba(212,175,55,.35), inset 0 1px 0 rgba(255,255,255,.28); } .btn--silver{ border:1px solid var(--silver-400); color:#1e232c; background:linear-gradient(180deg,#f7f9fc,#e9eff7); } .app-actions .btn{ padding:12px 18px; font-weight:600; } /* Inputs */ input,select,textarea{ background:#fff; color:var(--ink); border:1px solid var(--silver-400); border-radius:7px; padding:10px 12px; outline:0; box-shadow:inset 0 1px 2px rgba(16,24,40,.06); } input::placeholder{ color:var(--muted); } /* Status-Pill (#msg) */ #msg{ display:none; padding:8px 12px; border-radius:999px; font-weight:600; } #msg.muted{ background:linear-gradient(#fff,#faf7ea); border:1px solid var(--silver-400); color:var(--muted); box-shadow:var(--shadow-1); } #msg.ok{ background:linear-gradient(#ecfff6,#eafff2); border:1px solid rgba(23,166,115,.35); color:#0b5b43; box-shadow:var(--shadow-1); } #msg.danger{ background:#fff4f4; border:1px solid rgba(229,72,77,.35); color:#7b1116; box-shadow:var(--shadow-1); } /* ---- Portfolio-Gruppen (Accordion) ---- */ details.group{ position:relative; border-radius:16px !important; overflow:hidden; border:1px solid transparent !important; background-image:linear-gradient(#fff,#fff), linear-gradient(135deg,rgba(212,175,55,.65),rgba(183,191,203,.45)); background-clip:padding-box,border-box; box-shadow:var(--shadow-1); } summary.group-head{ list-style:none; cursor:pointer; } summary.group-head::-webkit-details-marker{ display:none; } .group-head{ padding:12px 16px !important; border-bottom:1px solid var(--silver-200) !important; background:linear-gradient(#fff,#f6f8fb) !important; } /* Tabellen-Grid (wie „früher“) */ .grid-6{ display:grid; grid-template-columns: 1fr 0.9fr 1fr 1fr minmax(210px,1.15fr); gap:12px; align-items:center; } .grid-headline{ padding-bottom:6px; } .grid-cols{ border-top:1px solid var(--silver-200); padding-top:6px; } .rows{ background:#fff; padding:0 16px 12px; } .rowline{ display:grid; grid-template-columns: inherit; gap:12px; align-items:center; padding:10px 0; border-top:1px dashed var(--silver-200); } .group-footer{ background:#fff !important; border-top:1px solid var(--silver-200) !important; padding:12px 16px !important; } /* Edit-Zustand – helle Zeile */ .group.editing .rowline.editing{ background:#fff6da; border-left:3px solid var(--gold-400); } /* Buttons in der Zeile (Gold/Silber/Rot) */ .row-actions .btn{ font-size:.85rem; padding:6px 10px; border-radius:10px; } .row-actions .row-edit{ border:1px solid var(--silver-400) !important; background:linear-gradient(180deg,#f7f9fc,#e9eff7) !important; color:#1e232c !important; } .row-actions .row-delete{ border:1px solid rgba(229,72,77,.45) !important; background:#fff4f4 !important; color:#7b1116 !important; } .row-actions .row-save{ border:1px solid #e3c86b !important; color:#fff !important; background:linear-gradient(180deg,#d4af37,#b88900) !important; box-shadow:0 6px 18px rgba(212,175,55,.35); } .row-actions .row-cancel{ border:1px solid var(--silver-400) !important; background:linear-gradient(#fff,#f7f9fc) !important; } /* „Speichern“ nur zeigen, wenn die Zeile wirklich geändert wurde (Klasse .dirty kommt aus JS) */ .row-actions .row-save{ display:none; } .rowline.editing.dirty .row-actions .row-save{ display:inline-block; } /* Marktwert-Spalte im Edit-Modus komplett ausblenden (Header + Zeilen) */ .group.editing .grid-6{ grid-template-columns: 1fr 0.9fr 1fr 0fr minmax(210px,1.15fr); } /* 4. Spalte = 0fr */ .group.editing .grid-cols > :nth-child(4){ display:none; } /* Header „Marktwert (EUR)“ */ .rowline .input-mv{ display:none; } /* disabled Input nicht zeigen */ .group.editing .rowline > :nth-child(4){ display:none; } /* gesamte 4. Spalte verbergen */ /* ---- Preisboxen (Gold/Silber) ---- */ .price-grid{ display:grid; gap:14px; grid-template-columns:1fr; } @media (min-width:900px){ .price-grid{ grid-template-columns:1fr 1fr; } } .metal-box{ position:relative; overflow:hidden; border-top-color:transparent; border-radius:14px; border:1px solid var(--silver-400); background:#fff; box-shadow:var(--shadow-1); padding:16px; } .metal-box h4{ margin:0 0 8px; } #goldBox::before,#silverBox::before{ content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:10px; border-radius:14px 14px 0 0; } #goldBox::before{ background:linear-gradient(90deg,#f3d26a,#b88900); } #silverBox::before{ background:linear-gradient(90deg,#c7cfdb,#9aa3b1); } /* ---- Auth (breiteres E-Mail, Buttons dichter) ---- */ .auth-row{ display:grid; gap:12px; grid-template-columns:minmax(340px,1.5fr) minmax(220px,1fr) auto; align-items:center; } .auth-actions{ display:flex; gap:10px; justify-content:flex-end; } @media (max-width:720px){ .auth-row{ grid-template-columns:1fr; } .auth-actions{ justify-content:stretch; } } /* ===================================================== Metals Theme — Consolidation Patch (2025-08-26) - Neutralize base.css grid on .wrap - Ensure table grid uses the Metals split - Restore right-column (col-change) + edit-mode button toggles - Make group footer flex-aligned to the right ===================================================== */ /* 1) Container must NOT be grid (neutralize base.css) */ .wrap{ display:block; gap:0; } /* 2) Keep the Metals table split as single source of truth */ .grid-6{ grid-template-columns: 1fr 0.9fr 1fr 1fr minmax(210px,1.15fr); } /* 3) Right column (value vs. actions) + row action toggles */ .col-change { display:flex; justify-content:flex-end; } .col-change-inner { display:flex; gap:6px; align-items:center; } .col-change .val-change { display:inline; } .col-change .row-actions { display:none; } /* When the whole group is in editing mode: show actions column-wise */ details.group.editing .col-change .val-change { display:none; } details.group.editing .col-change .row-actions { display:flex; flex-direction:column; gap:6px; align-items:flex-end; } /* Button toggling for a row's editing lifecycle */ .row-actions .row-save, .row-actions .row-cancel { display:none; } /* default hidden */ .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete { display:none; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel { display:inline-block; } /* Keep Metals' "only show save when dirty" refinement (already present) working side-by-side */ .rowline.editing.dirty .row-actions .row-save{ display:inline-block; } /* 4) Make group footer align actions to the right */ .group-footer{ display:flex; justify-content:flex-end; gap:8px; } /* === Fix: Edit-Felder standardmäßig ausblenden & nur bei Bearbeitung zeigen === */ .rowline .edit{ display:none; } .rowline .view{ display:inline; } /* Wenn Gruppe oder Zeile im Edit-Modus ist: Inputs zeigen, Views verstecken */ details.group.editing .rowline .edit, .rowline.editing .edit{ display:inline-block; } details.group.editing .rowline .view, .rowline.editing .view{ display:none; } /* Optional: Inputs in Tabellenzellen sollen bündig wirken */ .rowline .edit[type="number"], .rowline .edit[type="text"]{ width: 100%; box-sizing: border-box; } /* === Spacing: Abstand zwischen KPIs und Tabellengruppe === */ .kpis{ margin-bottom: 16px; } /* === Hide "Veränderung %" column header when editing === */ details.group.editing .grid-6.head > :last-child{ visibility:hidden; } /* === KPI colors follow table change colors === */ .kpi .value.change-green{ color: var(--success); } .kpi .value.change-red{ color: var(--danger); } /* In case classes are set on the KPI boxes themselves (green/red), keep support */ .kpi.green .value{ color: var(--success); } .kpi.red .value{ color: var(--danger); } /* === More vertical spacing between metal groups (Gold/Silber) === */ #groups details.group + details.group{ margin-top: 18px; } /* === Only allow editing when the specific row is in .editing === */ /* Default: hide edit controls, show view values */ .rowline .edit{ display:none; } .rowline .view{ display:inline; } /* Do NOT show edit controls for the whole group-editing state anymore */ details.group.editing .rowline .edit{ display:none !important; } details.group.editing .rowline .view{ display:inline !important; } /* Show edit controls ONLY on the active row */ .rowline.editing .edit{ display:inline-block !important; } .rowline.editing .view{ display:none !important; } /* Keep the action buttons visible in group editing so a row can be selected to edit */ details.group.editing .col-change .row-actions{ display:flex; } details.group.editing .col-change .val-change{ display:none; } /* Button toggling inside a row still applies */ .row-actions .row-save, .row-actions .row-cancel{ display:none; } .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-block; } /* ======= FINAL OVERRIDES (v5) ======= */ /* A) Fix conflicting grid-5 definitions */ .grid-6{ grid-template-columns: 1fr 0.9fr 1fr 1fr minmax(210px,1.15fr) !important; } /* B) Row edit/view visibility - default: view only - only the active .rowline.editing shows inputs */ .rowline .edit{ display:none !important; } .rowline .view{ display:inline !important; } .rowline.editing .edit{ display:inline-block !important; } .rowline.editing .view{ display:none !important; } /* C) In group editing show only the action buttons column, not the values */ details.group.editing .col-change .row-actions{ display:flex !important; } details.group.editing .col-change .val-change{ display:none !important; } /* D) Header: show "Veränderung %" normally, hide only while editing */ .grid-6.head > :last-child{ visibility:visible !important; } details.group.editing .grid-5.head > :last-child{ visibility:hidden !important; } /* E) The 4th column (Marktwert) must stay visible */ .rowline > :nth-child(4){ display:block !important; } /* F) Make edit-highlight fill the full row width inside .rows (which has side padding) */ .rows{ position:relative; } .rowline{ padding:10px 16px !important; margin:0 -16px !important; } /* stretch background */ .rowline.editing{ background:#fff6da !important; border-left:3px solid var(--gold-400) !important; } .rowline.editing > *{ background:transparent !important; } /* ensure cells don’t paint over */ /* ===== Fix: group-edit vs row-edit precedence ===== */ /* Base: inputs hidden, views shown */ .rowline .edit{ display:none !important; } .rowline .view{ display:inline !important; } /* In group editing: keep rows read-only (hide inputs) UNLESS the row itself is .editing */ details.group.editing .rowline:not(.editing) .edit{ display:none !important; } details.group.editing .rowline:not(.editing) .view{ display:inline !important; } details.group.editing .rowline.editing .edit{ display:inline-block !important; } details.group.editing .rowline.editing .view{ display:none !important; } /* Also outside of group editing (legacy single-row edit): still show edit fields on the active row */ .rowline.editing .edit{ display:inline-block !important; } .rowline.editing .view{ display:none !important; } /* Stretch the edit highlight reliably to full width */ .rows{ position:relative; } .rows .rowline{ padding:10px 16px !important; margin:0 -16px !important; } .rows .rowline.editing{ background:#fff6da !important; border-left:3px solid var(--gold-400) !important; } .rows .rowline.editing > *{ background:transparent !important; } /* === Hide Marktwert (4th column) while the row is being edited (avoid distraction) === */ .rowline.editing > :nth-child(4){ visibility:hidden !important; } /* keep layout, just hide text */ /* === Status bar spacing + shape (same corner radius as KPI cards) === */ #msg.success, #msg.error, #msg.info{ margin-bottom: 12px; /* space from KPIs */ border-radius: 14px !important; /* rectangular like KPI cards */ padding: 10px 14px; /* comfortable padding */ } /* Some themes apply pill styles to messages – neutralize if present */ #msg{ border-radius: 14px; } /* === Status bar spacing & shape (final tune) === */ #msg{ border-radius: var(--radius) !important; } /* base shape */ #msg.success, #msg.error, #msg.info, #msg.ok, #msg.danger{ margin-bottom: 20px !important; /* more space to KPIs */ border-radius: var(--radius) !important; padding: 12px 16px !important; } /* === App Footer (dunkler Block unten) === */ .app-footer{ background: var(--ink, #0b111a); color: #fff; box-shadow: var(--shadow-1); border-radius: var(--radius); margin-top: 24px; /* Abstand zum Inhalt darüber */ } .app-footer .wrap{ max-width: 980px; /* wie oben */ margin: 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; /* optional, falls du links/rechts Elemente willst */ } .app-footer p{ margin: 0; } /* keine Extramargen im Footer-Text */ /* === SPACING CONTROL (Portfolio) === */ /* 1) Abstand zwischen KPIs und der Metall-Tabelle darunter */ .kpis{ margin-bottom: 17px; } /* -> Wert nach Wunsch anpassen */ /* 2) Abstand zwischen den einzelnen Metallen (Gold, Silber, …) */ #groups details.group + details.group{ margin-top: 6px; } /* 3) Abstand zwischen den Karten-Sektionen */ section.card + section.card{ margin-top: 10px; } /* 4) Abstand unter der Überschrift "Portfolio-Verlauf" */ .card.card--tight > h3{ margin-bottom: 16px; } /* 5) Abstand unter der Überschrift "Aktuelle Marktpreise" */ .card > h3 + .price-grid{ margin-top: 16px; } /* 6) Abstand zwischen den Zeilen in "Aktuelle Marktpreise" */ .price-grid p{ margin: 6px 0; } /* vertikaler Zeilenabstand */ .price-grid h4{ margin-bottom: 8px; }/* Abstand Überschrift -> erste Zeile */ /* Abstand zwischen den drei Sektionen (Portfolio-Tabelle → Portfolio-Verlauf → Aktuelle Marktpreise) */ :root{ --section-gap: 29px; } /* << hier höher/kleiner stellen */ .wrap > section.card + section.card{ margin-top: var(--section-gap) !important; } /* === Einheitlicher Dark-Ton für Top + Bottom === */ /* Farbton wie im Screenshot: sehr dunkles Blau-Grau */ :root{ --darkbar-bg: #121821; /* Hintergrund */ --darkbar-bd: #2b3545; /* feine Linie (Top/Bottom) */ --darkbar-fg: #eaf1f7; /* Textfarbe */ } /* TOP-BLOCK (Header) – Farbe vereinheitlichen */ .app-header{ background: var(--darkbar-bg) !important; color: var(--darkbar-fg) !important; border-bottom: 1px solid var(--darkbar-bd) !important; } .app-header .inner{ max-width:1100px; margin:0 auto; padding:4px 16px; } /* BOTTOM-BLOCK (Footer) – gleiches Farbschema, KEINE runden Ecken */ .app-footer{ background: var(--darkbar-bg) !important; color: var(--darkbar-fg) !important; border-top: 1px solid var(--darkbar-bd) !important; border-radius: 0 !important; /* eckig */ margin-top: 24px; /* Abstand zum Inhalt oben */ padding: 0; /* wir paddden die .wrap innen */ } .app-footer .wrap{ max-width: 1100px; /* wie im Header */ margin: 0 auto; padding: 14px 16px; } .app-footer p{ margin: 0; } .app-footer a{ color: #dbe6f0; text-decoration: none; } .app-footer a:hover{ text-decoration: underline; } /* === Darkbar in etwas hellerem Dunkelblau === */ :root{ /* helleres Dunkelblau */ --darkbar-bg: #1b2a44; /* Hintergrund */ --darkbar-bd: #2e4162; /* feine Linie */ --darkbar-fg: #eef3ff; /* Textfarbe */ } /* Header + Footer übernehmen automatisch die neuen Variablen */ .app-header{ background: var(--darkbar-bg) !important; color: var(--darkbar-fg) !important; border-bottom: 1px solid var(--darkbar-bd) !important; } .app-footer{ background: var(--darkbar-bg) !important; color: var(--darkbar-fg) !important; border-top: 1px solid var(--darkbar-bd) !important; border-radius: 0 !important; /* eckig lassen */ } /* Farbe der Balken einstellen */ :root{--darkbar-bg:#49505e;--darkbar-bd:#49505e;--darkbar-fg:#eef3ff} /* Sticky Footer Layout */ html, body { height: 100%; } body { min-height: 100vh; display: flex; flex-direction: column; } /* Dein Inhaltscontainer soll den verfügbaren Platz einnehmen */ .wrap { flex: 1 0 auto; } /* Footer rutscht damit automatisch an den unteren Rand */ .app-footer { margin-top: auto; } /* === Master-Spacing für Karten (zwischen den Sektionen) === */ :root{ --card-gap: 1px; /* << HIER drehst du den Abstand zwischen den Karten */ --footer-gap: 24px; /* << Abstand zwischen letzter Karte und dunklem Footer */ } /* Nur direkt aufeinanderfolgende Karten in der Hauptspalte */ .wrap > .card + .card{ margin-top: var(--card-gap) !important; } /* Abstand vor dem Footer, auch wenn Sticky-Footer aktiv ist */ .wrap{ padding-bottom: var(--footer-gap) !important; } /* === SINGLE SOURCE OF TRUTH: Kartenabstand & Footer-Gap === */ :root{ --card-gap: 10px; /* << HIER drehst du den Abstand zwischen den Karten */ --footer-gap: 28px; /* << Abstand zwischen letzter Karte und dem dunklen Footer */ } /* 0) Vorherige Top/Bottom-Margins der Karten vollständig neutralisieren */ .card{ margin-top:0 !important; margin-bottom:0 !important; } /* 1) Abstand nur zwischen direkt aufeinanderfolgenden Karten */ .wrap > :is(section.card, .card) + :is(section.card, .card){ margin-top: var(--card-gap) !important; } /* 2) Falls eine .card--tight davor steht, trotzdem unseren Wert nehmen */ .card--tight + .card{ margin-top: var(--card-gap) !important; } /* 3) Sicherer Abstand vor dem Footer – egal ob Sticky-Footer aktiv ist */ .wrap > :is(section.card, .card):last-of-type{ margin-bottom: var(--footer-gap) !important; } /* === Einheitliche Ausrichtung: Header, Karten, Footer ================== */ /* Ein Regler für die Innenbreite + Seitenabstand (Gutter) */ :root{ --container: 980px; /* << HIER stellst du die Breite der Inhaltsspalte ein */ --gutter: 16px; /* << linker/rechter Innenabstand */ } /* Karten-Container (hast du schon, hier nur auf Variablen gebracht) */ .wrap{ max-width: var(--container) !important; margin: 0 auto; padding: 0 var(--gutter) !important; } /* Header-Inhalt exakt wie .wrap zentrieren + gleicher Gutter */ .app-header .inner{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* Footer-Inhalt exakt wie .wrap zentrieren + gleicher Gutter */ .app-footer .wrap{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } :root{ --header-gap: 10px; } /* << Abstand zwischen dunklem Balken und erster Karte */ .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* === Einheitliche Breite & Fluchten (Header/Karten/Footer) === */ :root{ --container: 980px; /* Hauptspaltenbreite (beide Seiten) */ --gutter: 16px; /* linker/rechter Innenabstand */ --header-gap: 14px; /* Abstand Header → erste Karte */ } .wrap{ max-width: var(--container) !important; margin: 0 auto; padding: 0 var(--gutter) !important; } .app-header .inner{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } .app-footer .wrap{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* === Einheitliche Typo-Skalierung (gleiche „Größe“ wie Portfolio) === */ :root{ --h1-size: clamp(22px, 2.6vw, 26px); --h2-size: clamp(20px, 2.2vw, 22px); --h3-size: clamp(18px, 2.0vw, 20px); --text-size: 1rem; } .card > h1{ font-size: var(--h1-size) !important; line-height:1.2; } .card > h2{ font-size: var(--h2-size) !important; line-height:1.2; } .card > h3{ font-size: var(--h3-size) !important; line-height:1.2; } .card > p, input, select, textarea, .btn{ font-size: var(--text-size); } /* === Kartenabstand (eine Quelle) + Footer-Gap beibehalten === */ :root{ --card-gap: 10px; /* Abstand zwischen Karten */ --footer-gap: 28px; /* Abstand letzte Karte → Footer */ } .card{ margin-top:0 !important; margin-bottom:0 !important; } .wrap > :is(section.card, .card) + :is(section.card, .card){ margin-top: var(--card-gap) !important; } .card--tight + .card{ margin-top: var(--card-gap) !important; } .wrap > :is(section.card, .card):last-of-type{ margin-bottom: var(--footer-gap) !important; } /* === Rails + Spacing: final authority ============================== */ :root{ --container: 980px; /* Hauptspaltenbreite beider Seiten */ --gutter: 16px; /* linker/rechter Innenabstand */ --header-gap: 14px; /* Abstand Header → erste Karte */ } /* 1) Gleiche Innenbreite & Fluchten für Header, Inhalt, Footer */ .wrap, .app-header .inner, .app-footer .wrap{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* 2) Abstand unter dem Balken (Header) zurückholen */ .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* 3) Buttons im Header sollen nicht „überstehen“ (optisch exakt am Rail enden) */ .app-header .inner{ overflow: clip; } /* schneidet Glow/Shadow am rechten Rail ab */ @supports not (overflow: clip){ .app-header .inner{ overflow: hidden; } /* Fallback */ } .app-actions, .app-actions .btn{ margin-right: 0 !important; } /* 4) Kartenabstand: nur eine Quelle (falls weiter oben noch was steht) */ :root{ --card-gap: 10px; --footer-gap: 28px; } .card{ margin-top:0 !important; margin-bottom:0 !important; } .wrap > :is(section.card, .card) + :is(section.card, .card){ margin-top: var(--card-gap) !important; } .wrap > :is(section.card, .card):last-of-type{ margin-bottom: var(--footer-gap) !important; } /* ==== Fluchten exakt auf Karten-INHALT ausrichten ==== */ :root{ --container: 980px; /* Hauptspaltenbreite */ --gutter: 16px; /* linker/rechter Außenabstand der Spalte */ --card-pad-x: 14px; /* horizontales Innenpadding der .card (muss zum .card padding passen) */ --header-gap: 14px; /* Abstand Header → erste Karte */ } /* Header & Footer am Karten-INHALT ausrichten */ .app-header .inner, .app-footer .wrap{ max-width: var(--container) !important; margin: 0 auto !important; padding-left: calc(var(--gutter) + var(--card-pad-x)) !important; padding-right: calc(var(--gutter) + var(--card-pad-x)) !important; } /* Abstand unter dem Header (bleibt erhalten) */ .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* === Rails auf Karten-AUSSENkante – FINAL ========================== */ :root{ --container: 980px; /* Spaltenbreite */ --gutter: 16px; /* linker/rechter Rand (wie .wrap) */ --header-gap: 14px; /* Abstand Header → erste Karte */ } /* 1) Header, Inhalt, Footer: gleiche Rail (keine Card-Padding-Zugabe) */ .wrap, .app-header .inner, .app-footer .wrap{ max-width: var(--container) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* 2) Karten dürfen die Rail nicht übertreten */ .card{ margin-left: 0 !important; margin-right: 0 !important; } /* 3) Abstand unter dem Balken */ .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* 4) Optional: Button-Glow im Header nicht über die Rail ragen lassen */ .app-header .inner{ overflow: clip; } @supports not (overflow: clip){ .app-header .inner{ overflow: hidden; } } /* ==== FINAL RAILS (gleiche Breite + KARTEN-AUSSENKANTE) ================= */ :root{ --container: 980px; /* EINHEITLICHE Spaltenbreite für ALLE Seiten */ --gutter: 16px; /* linker/rechter Innenabstand (Rail) */ --header-gap: 14px; /* Abstand unter dem Header-Balken zur ersten Karte */ } /* 1) Header, Inhalt (.wrap) und Footer nutzen dieselben Rails */ .app-header > .inner, .wrap, .app-footer > .wrap{ max-width: var(--container) !important; width: 100% !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* 2) Header-Abstand zur ersten Karte */ .app-header + .wrap{ padding-top: var(--header-gap) !important; } /* 3) Karten dürfen die Rails nicht übertreten */ .wrap > .card{ margin-left: 0 !important; margin-right: 0 !important; } /* 4) Alles, was auf Karten-INNENkante fluchten wollte, neutralisieren */ .app-header .inner, .app-footer .wrap{ /* falls oben im File noch calc(var(--gutter)+var(--card-pad-x)) steht */ padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; } /* 5) Optional: Header-Button-Glow nicht über die rechte Rail hinaus */ .app-header .inner{ overflow: clip; } @supports not (overflow: clip){ .app-header .inner{ overflow: hidden; } } /* Höhe für den Portfolio-Chart (ein Regler) */ /* Höhe steuern */ :root{ --chart-height: 380px; } @media (min-width: 1100px){ :root{ --chart-height: 440px; } } /* Der Gesamt-Wrapper soll automatisch so hoch sein, wie Inhalt (Buttons, Legende + Chart) */ .chart-wrap{ display: flex; flex-direction: column; gap: 8px; /* Abstand zwischen Modus, Chips, Legende, Chart */ /* KEINE feste Höhe, KEIN overflow hier! */ } /* Nur der Canvas-Bereich bekommt die feste Höhe */ .chart-canvas{ height: var(--chart-height); /* Optional etwas Luft unten für X-Labels */ padding-bottom: 6px; /* overflow hidden hier ist ok, falls Achsenlinien minimal überragen */ overflow: hidden; } /* Canvas füllt den Canvas-Bereich */ #portfolioChart{ width: 100% !important; height: 100% !important; display: block; } /* Scrollbare HTML-Legende in EINER Zeile */ .legend-scroll { overflow-x:auto; white-space:nowrap; } .legend-scroll ul{ display:flex; flex-wrap:nowrap; gap:.75rem; margin:0; padding:0; list-style:none; } .legend-scroll li{ white-space:nowrap; } /* Abstände/Anordnung Buttons */ .scale-toggle{ display:flex; gap:8px; } .chip-toolbar{ display:flex; gap:8px; align-items:center; justify-content:flex-start; } .hidden{display:none} form{margin:12px 0} input{margin-right:8px} .hint{font-size:.9em;opacity:.8} .error{color:#b00020} .ok{color:#2e7d32} /* Basis-Styling für Status-Meldungen */ #msg.msg { display: block; /* immer Platz reservieren */ margin-top: 12px; padding: 8px 12px; border-radius: var(--radius); font-weight: 600; } /* ===== Auth-Status: sichtbar wenn Inhalt vorhanden ===== */ #msg { display: block !important; } /* überschreibt das frühere display:none */ #msg:empty { display: none !important; } /* wenn leer, unsichtbar (schönes Layout) */ /* Basis-Look + Zustände (falls nicht schon vorhanden) */ #msg.msg { margin-top: 12px; padding: 8px 12px; border-radius: var(--radius); font-weight: 600; } #msg.muted { background:linear-gradient(#fff,#faf7ea); border:1px solid var(--silver-400); color:var(--muted); box-shadow:var(--shadow-1); } #msg.ok { background:linear-gradient(#ecfff6,#eafff2); border:1px solid rgba(23,166,115,.35); color:#0b5b43; box-shadow:var(--shadow-1); } #msg.danger { background:#fff4f4; border:1px solid rgba(229,72,77,.35); color:#7b1116; box-shadow:var(--shadow-1); } /* ===== Sichtbarkeit der Statusleiste nur auf der Auth-Seite ===== */ body.auth-page #msg { display: block !important; /* auf Auth-Seite sichtbar */ } body.auth-page #msg:empty { display: none !important; /* wenn leer, ausblenden */ } /* Mehr Abstand unter den Eingaben auf der Auth-Seite */ body.auth-page #msg.msg { margin-top: 18px !important; /* z.B. 18px statt 12px */ } /* ===== Scope #msg NUR auf der Auth-Seite ===== */ /* Standard: überall versteckt (überstimmt alle früheren Regeln) */ #msg{ display:none !important; } /* Auf der Auth-Seite: nur zeigen, wenn Text drin ist */ body.auth-page #msg:not(:empty){ display:block !important; } /* Mehr Abstand unter den Eingaben auf der Auth-Seite */ body.auth-page #msg{ margin-top: 18px !important; /*gewünschter Abstand */ } /* === FIX: 6 Spalten + Marktwert korrekt ausblenden im Edit-Modus === */ /* 6 Spalten: 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ :root { --coins-col: 0.7fr; } /* Breite der Münz-Spalte nach Bedarf */ .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col) 1fr 1fr minmax(210px,1.15fr) !important; gap: 12px !important; align-items: center !important; } /* Im Edit-Modus nur die Marktwert-Spalte (5) ausblenden */ details.group.editing .grid-6{ grid-template-columns: 1fr 0.9fr var(--coins-col) 1fr 0fr minmax(210px,1.15fr) !important; } /* Header- und Zeilen-Zelle der 5. Spalte (Marktwert) ausblenden */ details.group.editing .grid-cols > :nth-child(5), details.group.editing .rowline > :nth-child(5){ display: none !important; } /* Falls frühere Regeln versehentlich die 4. Spalte verstecken: rückgängig machen */ .rowline > :nth-child(4){ display:block !important; visibility:visible !important; } /* ===== FIX: Beim Bearbeiten NUR "Veränderung %" (6. Spalte) ausblenden ===== */ /* Spaltenordnung (6 Spalten): 1=Kaufdatum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ :root{ --coins-col: 0.7fr; } /* Breite Münz-Spalte nach Bedarf */ .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col) 1fr 1fr minmax(210px,1.15fr) !important; gap: 12px !important; align-items: center !important; } /* Vorherige (falsche) Regeln neutralisieren, die 4. oder 5. Spalte verstecken */ details.group.editing .grid-cols > :nth-child(4), details.group.editing .rowline > :nth-child(4), details.group.editing .grid-cols > :nth-child(5), details.group.editing .rowline > :nth-child(5){ display: block !important; visibility: visible !important; } /* NEU: Wenn eine Zeile editiert wird, 6. Spalte komplett ausblenden */ details.group.has-row-editing .grid-cols > :nth-child(6), details.group.has-row-editing .rowline > :nth-child(6){ display: none !important; } /* In derselben Phase: anstelle der Prozentanzeige die Buttons zeigen (rechte Spalte) */ details.group.has-row-editing .col-change .val-change{ display:none !important; } details.group.has-row-editing .col-change .row-actions{ display:flex !important; } /* === FINAL OVERRIDES: Bearbeiten-Ansicht ============================= */ /* 6 Spalten (nur zur Sicherheit unverändert lassen) 1=Kaufdatum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ .grid-6{ grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(210px,1.15fr) !important; } /* A) Im Bearbeiten-Modus die zweite Kopfzeile für Spalte 5+6 ausblenden */ details.group.editing .grid-cols > :nth-child(5), details.group.editing .grid-cols > :nth-child(6){ display: none !important; } /* B) In den Zeilen: Spalte 5 (Marktwert) komplett ausblenden */ details.group.editing .rowline > :nth-child(5){ display: none !important; } /* C) In Spalte 6 NUR die Prozent-Werte verstecken, Buttons anzeigen */ details.group.editing .col-change .val-change{ display: none !important; } details.group.editing .col-change .row-actions{ display: flex !important; gap: 6px; justify-content: flex-end; } /* D) Falls irgendwo vorher die 6. Spalte komplett versteckt wurde → rückgängig */ details.group.has-row-editing .grid-cols > :nth-child(6), details.group.has-row-editing .rowline > :nth-child(6){ display: block !important; visibility: visible !important; } /* E) Buttons innerhalb der aktiven Zeile sicher togglen */ .row-actions .row-save, .row-actions .row-cancel{ display:none !important; } .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none !important; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-block !important; } /* === Bearbeiten-Ansicht, wenn irgendeine Zeile editiert wird ============== */ /* Spalten: 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(220px,1.2fr) !important; gap: 12px !important; align-items: center !important; } /* A) Headerzeile (die zweite) – Spalten 5+6 ausblenden, wenn eine Zeile editiert wird */ details.group.has-row-editing .grid-cols > :nth-child(5), details.group.has-row-editing .grid-cols > :nth-child(6){ display: none !important; } /* B) In den Datenzeilen – Spalte 5 (Marktwert) komplett ausblenden */ details.group.has-row-editing .rowline > :nth-child(5){ display: none !important; } /* C) Spalte 6 (Veränderung): Werte ausblenden, Buttons zeigen und ganz nach rechts */ .rowline > :nth-child(6){ justify-self: end; } /* rechte Flanke der Grid-Spalte */ .col-change{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .col-change .val-change{ display: inline; } details.group.has-row-editing .col-change .val-change{ display: none !important; } .col-change .row-actions{ display: none; gap: 8px; } details.group.has-row-editing .col-change .row-actions{ display: flex !important; } /* D) Buttons logisch togglen je Zeile */ .row-actions .row-save, .row-actions .row-cancel{ display:none !important; } .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none !important; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-flex !important; } /* === Edit-Modus: Buttons ganz rechts, Marktwert-Spalte einklappen ========== */ /* Spalten: 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung/Buttons */ /* Basis-Grid (falls nicht schon vorhanden) */ .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(220px, max-content) !important; column-gap: 12px !important; align-items: center !important; } /* 1) Wenn irgendeine Zeile editiert wird, Spur 5 (Marktwert) auf 0 klappen -> dadurch rückt Spur 6 ganz nach rechts */ details.group.has-row-editing .grid-6{ grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 0 minmax(220px, max-content) !important; /* zwei Gaps bleiben (vor & nach Spur 5); halbieren wir, damit’s optisch wie ein Gap wirkt */ column-gap: 6px !important; } /* 2) Kopfzeile (zweite Zeile) – Überschriften Marktwert & Veränderung ausblenden */ details.group.has-row-editing .grid-cols > :nth-child(5), details.group.has-row-editing .grid-cols > :nth-child(6){ display: none !important; } /* 3) Datenzeilen – Zellen der 5. Spalte komplett verstecken */ details.group.has-row-editing .rowline > :nth-child(5){ display: none !important; } /* 4) 6. Spalte: Werte (Prozent) im Edit-Modus verstecken, Buttons zeigen & rechtsbündig */ .rowline > :nth-child(6){ justify-self: end; } /* Zelle ganz rechts ausrichten */ .col-change{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; } .col-change .val-change{ display: inline; } details.group.has-row-editing .col-change .val-change{ display: none !important; } .col-change .row-actions{ display: none; gap: 8px; } details.group.has-row-editing .col-change .row-actions{ display: flex !important; } /* 5) Button-Toggling pro Zeile (nur Save/Cancel im Edit-Zustand) */ .row-actions .row-save, .row-actions .row-cancel{ display:none !important; } .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none !important; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-flex !important; } /* optional: Buttons noch etwas „an die Wand“ */ details.group.has-row-editing .col-change{ padding-right: 2px; } /* ===== Fix: Beim Bearbeiten Layout NICHT verschieben ===================== */ /* Spalten: 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung/Buttons */ /* Basis-Grid beibehalten – auch im Edit-Modus */ .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(220px,1.2fr) !important; column-gap: 12px !important; align-items: center !important; } /* WICHTIG: Im Edit-Modus KEIN anderes grid-template-columns mehr! */ details.group.has-row-editing .grid-6{ grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(220px,1.2fr) !important; column-gap: 12px !important; } /* Header (die zweite Kopfzeile): Text von Spalte 5+6 ausblenden, aber Platz behalten -> visibility statt display */ details.group.has-row-editing .grid-cols > :nth-child(5), details.group.has-row-editing .grid-cols > :nth-child(6){ visibility: hidden !important; } /* Datenzeilen: Spalte 5 (Marktwert) unsichtbar machen, aber Platz behalten */ details.group.has-row-editing .rowline > :nth-child(5){ visibility: hidden !important; } /* Spalte 6: Buttons sichtbar, Werte (Prozent) verstecken und alles ganz rechts ausrichten */ .rowline > :nth-child(6){ justify-self: end; } /* Zelle rechts */ .col-change{ display: flex; justify-content: flex-end; align-items: center; gap: 8px; } details.group.has-row-editing .col-change .val-change{ display: none !important; } details.group.has-row-editing .col-change .row-actions{ display: flex !important; } /* Falls frühere Regeln die ganze 6. Spalte ausgeblendet hatten: wieder einblenden */ details.group.has-row-editing .rowline > :nth-child(6){ display: block !important; /* Container sichtbar (Buttons drin) */ } /* === Portfolio-Tabelle: letzte 2 Spalten angleichen + mittig ausrichten === */ /* 1) Spaltenbreiten: 5 (=Marktwert) und 6 (=Veränderung/Aktionen) gleich breit */ :root{ --coins-col: 0.7fr; } /* falls noch nicht gesetzt */ .grid-6{ /* 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung/Aktionen */ grid-template-columns: 1fr 0.9fr var(--coins-col) 1fr 1fr minmax(180px,1fr) !important; } /* 2) Kopfzeile (die zweite, mit "Kaufdatum … Veränderung %"): 5+6 zentrieren */ .grid-6.grid-cols.head > :nth-child(5), .grid-6.grid-cols.head > :nth-child(6){ text-align: center !important; } /* 3) Zeilenwerte: 5 (=Marktwert) zentrieren */ .rowline.grid-6 > :nth-child(5){ text-align: center !important; } /* 4) Zeilenwerte/Aktionen in Spalte 6: - normal: Wert zentriert - im Bearbeitenmodus (Gruppe ODER einzelne Zeile): Buttons rechtsbündig */ .rowline.grid-6 > :nth-child(6){ display: flex; /* der Zellen-Wrapper wird Flex-Container */ justify-content: center; /* normal: mittig */ } .rowline.grid-6 > :nth-child(6) .col-change{ width:100%; display:flex; justify-content:center; } /* Gruppe im Bearbeitenmodus → Buttons nach rechts */ details.group.editing .rowline.grid-6 > :nth-child(6), .rowline.editing > :nth-child(6){ justify-content: flex-end !important; } /* Buttons innen säuberlich rechts stapeln */ .col-change .row-actions{ display: none; /* normal ausgeblendet – nur Prozentwert sichtbar */ } details.group.editing .col-change .val-change{ display:none !important; } details.group.editing .col-change .row-actions{ display:flex !important; flex-direction: column; gap: 6px; align-items: flex-end; /* rechtsbündig */ } /* Wenn eine einzelne Zeile editiert wird: ebenfalls rechtsbündig + Save/Cancel sichtbar */ .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none !important; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-block !important; } /* === Row-Action-Buttons wirklich ganz rechts + fein justierbar === */ :root{ /* +X schiebt die Buttons nach rechts (0px = bündig mit Tabellenrand) */ --row-actions-nudge: 0px; /* z.B. 18px oder 24px probieren */ --actions-col-min: 220px; /* Mindestbreite der Button-Spalte */ --coins-col: 0.7fr; /* nur falls noch nicht gesetzt */ } /* 1) Grid-Layout hart fixieren – immer 6 Spalten */ details.group .grid-6{ display:grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 1fr minmax(var(--actions-col-min),1.2fr) !important; column-gap:12px !important; align-items:center !important; } /* 2) Im Edit-Modus: Spalte 5 „einklappen“, Spalte 6 bleibt bestehen */ details.group.editing .grid-6{ grid-template-columns: 1fr 0.9fr var(--coins-col,0.7fr) 1fr 0fr minmax(var(--actions-col-min),1.2fr) !important; } /* 3) Spalte 6 (Buttons) bis an den rechten Rand + fein justieren */ details.group .rowline > :nth-child(6){ justify-self:end !important; /* Zelle an die rechte Tabellenkante */ } details.group .rowline > :nth-child(6) .col-change{ display:flex !important; justify-content:flex-end !important; align-items:center; } details.group .rowline > :nth-child(6) .col-change-inner{ display:flex !important; gap:8px; transform: translateX(var(--row-actions-nudge)); /* << Einstell-Parameter */ } /* 4) Im Gruppen-Edit: Prozentwert ausblenden, Buttons zeigen */ details.group.editing .col-change .val-change{ display:none !important; } details.group.editing .col-change .row-actions{ display:flex !important; } /* 5) In der aktiv editierten Zeile „Speichern/Abbrechen“ zeigen */ .row-actions .row-save, .row-actions .row-cancel{ display:none; } .rowline.editing .row-actions .row-edit, .rowline.editing .row-actions .row-delete{ display:none !important; } .rowline.editing .row-actions .row-save, .rowline.editing .row-actions .row-cancel{ display:inline-flex !important; } :root{ --row-actions-nudge: 60px; } /* === Portfolio-Tabelle: saubere 6 Spalten + Buttons rechts =============== */ :root{ --coins-col: 0.7fr; /* Breite der Münz-Spalte */ --last-col-min: 220px; /* Mindestbreite für Spalte 5+6 */ --row-actions-nudge: 0px; /* Feineinstellung: +X px schiebt Buttons nach rechts */ } /* 1) Immer 6 Spalten – Spalte 5 (Marktwert) und 6 (Veränderung/Aktionen) gleich breit */ #groups details.group .grid-6{ display: grid !important; grid-template-columns: 1fr 0.9fr var(--coins-col) 1fr minmax(var(--last-col-min), 1fr) minmax(var(--last-col-min), 1fr) !important; column-gap: 12px !important; align-items: center !important; } /* 2) Kopfzeilen und Werte in 5+6 mittig */ #groups details.group .grid-6.grid-headline > :nth-child(5), #groups details.group .grid-6.grid-headline > :nth-child(6), #groups details.group .grid-6.grid-cols.head > :nth-child(5), #groups details.group .grid-6.grid-cols.head > :nth-child(6){ text-align: center !important; } #groups details.group .rowline.grid-6 > :nth-child(5){ text-align: center !important; } /* 3) Spalte 6: standardmäßig (Anzeige) mittig, im Edit-Modus ganz rechts */ #groups details.group .rowline.grid-6 > :nth-child(6){ justify-self: end !important; } #groups details.group .rowline.grid-6 > :nth-child(6) .col-change{ display:flex; justify-content:center; align-items:center; width:100%; } #groups details.group.editing .rowline.grid-6 > :nth-child(6) .col-change{ justify-content:flex-end; transform: translateX(var(--row-actions-nudge)); } /* 4) In der „Änderung“-Spalte: Prozentwert vs. Buttons toggeln */ #groups details.group .col-change .row-actions{ display:none; gap:8px; } #groups details.group.editing .col-change .val-change{ display:none !important; } #groups details.group.editing .col-change .row-actions{ display:flex !important; } /* 5) In der aktiv editierten Zeile: nur Speichern/Abbrechen zeigen */ #groups details.group .row-actions .row-save, #groups details.group .row-actions .row-cancel{ display:none; } #groups details.group .rowline.editing .row-actions .row-edit, #groups details.group .rowline.editing .row-actions .row-delete{ display:none !important; } #groups details.group .rowline.editing .row-actions .row-save, #groups details.group .rowline.editing .row-actions .row-cancel{ display:inline-flex !important; } /* 6) Frühere widersprüchliche Hide-Regeln neutralisieren (Spalte 5/6 sichtbar lassen) */ #groups details.group .grid-6.grid-cols > :nth-child(5), #groups details.group .grid-6.grid-cols > :nth-child(6), #groups details.group .rowline > :nth-child(5), #groups details.group .rowline > :nth-child(6){ display:block !important; visibility:visible !important; } /* ====== Saubere Spaltenaufteilung + Edit-Verhalten ===================== */ /* Spalten: 1=Kaufdatum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ :root{ --coins-col: 0.7fr; /* Breite Spalte "Münzen" */ --actions-col-min: 220px; /* Mindestbreite in den DATENZEILEN (Buttons passen) */ --actions-col-min-head: 150px;/* schmalere Mindestbreite nur in den ÜBERSCHRIFTEN */ } /* Basis für DATENZEILEN: 6 gleichmäßige Spalten, letzte Spalte breit genug für Buttons */ #groups details.group .rowline.grid-6{ display:grid !important; grid-template-columns: 1fr 1fr var(--coins-col) 1fr 1fr minmax(var(--actions-col-min), 1fr) !important; column-gap:12px !important; align-items:center !important; } /* 1) Erste Kopfzeile (Summe je Gruppe) – gleichmäßiger & letzte Spalte nicht überbreit */ #groups details.group .grid-6.grid-headline{ display:grid !important; grid-template-columns: 1fr 1fr var(--coins-col) 1fr 1fr minmax(var(--actions-col-min-head), 1fr) !important; column-gap:12px !important; align-items:center !important; } /* 2) Zweite Kopfzeile (Spaltenüberschriften) – gleichmäßige Verteilung wie oben */ #groups details.group .grid-6.grid-cols.head{ display:grid !important; grid-template-columns: 1fr 1fr var(--coins-col) 1fr 1fr minmax(var(--actions-col-min-head), 1fr) !important; column-gap:12px !important; align-items:center !important; } /* 3) „Veränderung %“ rechtsbündig (fluchtet mit Prozentwerten in den Zeilen) */ #groups details.group .grid-6.grid-cols.head > :nth-child(6){ text-align:right !important; } /* ===== Edit-Modus ====================================================== */ /* Marktwert-Werte niemals editierbar anzeigen (Input ist im HTML vorhanden, aber disabled) */ #groups .rowline .input-mv{ display:none !important; } /* Vorsichtshalber ganz ausblenden. */ /* 4a) Im Bearbeitungsmodus: zweite Kopfzeile – Spalten 5 (Marktwert) + 6 (Veränderung) ausblenden */ #groups details.group.editing .grid-6.grid-cols.head > :nth-child(5), #groups details.group.editing .grid-6.grid-cols.head > :nth-child(6), #groups details.group.has-row-editing .grid-6.grid-cols.head > :nth-child(5), #groups details.group.has-row-editing .grid-6.grid-cols.head > :nth-child(6){ display:none !important; } /* 4b) Im Bearbeitungsmodus: in den Datenzeilen die Marktwert-Spalte (5) ausblenden */ #groups details.group.editing .rowline.grid-6 > :nth-child(5), #groups details.group.has-row-editing .rowline.grid-6 > :nth-child(5){ display:none !important; } /* 4c) Die „Veränderung“-Spalte bleibt, Buttons bleiben rechts */ #groups details.group .rowline.grid-6 > :nth-child(6){ justify-self:end; } #groups details.group .rowline.grid-6 > :nth-child(6) .col-change{ display:flex; justify-content:flex-end; align-items:center; gap:8px; } /* === 1) Zweite Überschriftenzeile komplett ausblenden ================== */ #groups details.group .grid-6.grid-cols.head{ display:none !important; } /* Variablen zum Feintuning */ :root{ --coins-col: 0.7fr; /* Breite der Münz-Spalte */ --actions-col-min: 220px; /* Mindestbreite für Buttons im Edit-Modus */ } /* === 2) Einheitliches Grid für Hauptzeile + Datenzeilen ================= */ /* Spalten: 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Veränderung */ #groups details.group .grid-6.grid-headline, #groups details.group .rowline.grid-6{ display:grid !important; grid-template-columns: 1fr 1fr var(--coins-col) 1fr 1fr 1fr !important; column-gap:12px !important; align-items:center !important; } /* === 3) Zentrierung: Spalten 2–6 (Header + Werte) ====================== */ #groups details.group .grid-6.grid-headline > :nth-child(n+2), #groups details.group .rowline.grid-6 > :nth-child(n+2){ text-align:center !important; } /* Ausnahme: Datum (Spalte 1) bleibt links angenehm lesbar */ #groups details.group .grid-6.grid-headline > :first-child, #groups details.group .rowline.grid-6 > :first-child{ text-align:left !important; } /* === 4) Verhalten im Bearbeitungsmodus ================================= */ /* a) Marktwert-Spalte (5) in den Datenzeilen ausblenden und Spur einklappen */ #groups details.group.editing .rowline.grid-6{ grid-template-columns: 1fr 1fr var(--coins-col) 1fr 0fr minmax(var(--actions-col-min),1.2fr) !important; } #groups details.group.editing .rowline.grid-6 > :nth-child(5){ display:none !important; } /* b) Buttons in Spalte 6 im Edit-Modus an den rechten Rand */ #groups details.group .rowline.grid-6 > :nth-child(6){ justify-self:center; } /* normal: zentriert */ #groups details.group .rowline.grid-6 > :nth-child(6) .col-change{ display:flex; justify-content:center; align-items:center; gap:8px; } #groups details.group.editing .rowline.grid-6 > :nth-child(6){ justify-self:end; } #groups details.group.editing .rowline.grid-6 > :nth-child(6) .col-change{ justify-content:flex-end; } /* c) Prozentwert vs. Buttons umschalten wie gehabt */ #groups details.group .col-change .row-actions{ display:none; } #groups details.group.editing .col-change .val-change{ display:none !important; } #groups details.group.editing .col-change .row-actions{ display:flex !important; } /* ===== Einheitliches Tabellengrid + perfekte Flucht ===================== */ /* Spalten (6): 1=Datum, 2=Gewicht, 3=Münzen, 4=Kaufpreis, 5=Marktwert, 6=Änderung/Buttons */ :root{ --col-date: 1.05fr; --col-weight: 1fr; --col-coins: 0.8fr; /* <- bei Bedarf feinjustieren */ --col-price: 1fr; --col-market: 1fr; --col-actions-min: 220px; /* Buttons passen sicher hinein */ } /* 2.1) Ein einziges, verbindliches Grid für Kopf- und Datenzeilen */ #groups details.group .grid-6{ display:grid !important; grid-template-columns: var(--col-date) var(--col-weight) var(--col-coins) var(--col-price) var(--col-market) minmax(var(--col-actions-min),1fr) !important; column-gap:12px !important; align-items:center !important; } #groups details.group .rowline.grid-6{ grid-template-columns: inherit !important; } /* 2.2) Kopfzellen: Label über Zahl, Zahl mittig (damit die Werte exakt darunter stehen) */ #groups .grid-headline .th{ display:flex; flex-direction:column; align-items:center; gap:2px; } #groups .grid-headline .th-label{ font-weight:500; color:var(--muted); } #groups .grid-headline .th-value{ text-align:center; } /* 2.3) Ausrichtung in den Datenzeilen: - Spalte 1 (Datum) links, Spalten 2–5 mittig, Spalte 6 rechts */ #groups details.group .rowline > :nth-child(1){ text-align:left !important; } #groups details.group .rowline > :nth-child(2), #groups details.group .rowline > :nth-child(3), #groups details.group .rowline > :nth-child(4), #groups details.group .rowline > :nth-child(5){ text-align:center !important; } #groups details.group .rowline > :nth-child(6){ justify-self:end !important; } /* 2.4) Rechte Spalte: Prozentwert normal zentriert anzeigen, im Edit-Modus Buttons an die rechte Kante */ #groups .col-change{ display:flex; justify-content:center; align-items:center; gap:8px; } #groups details.group.editing .rowline > :nth-child(6){ justify-self:end !important; } #groups details.group.editing .col-change{ justify-content:flex-end; } /* Buttons zeigen/verstecken wie gehabt */ #groups .col-change .row-actions{ display:none; gap:8px; align-items:flex-end; } #groups .col-change .val-change{ display:inline; } #groups details.group.editing .col-change .val-change{ display:none !important; } #groups details.group.editing .col-change .row-actions{ display:flex !important; flex-direction:column; } /* 2.5) WICHTIG: Im Edit-Modus NICHTS an den Spaltenbreiten ändern → keine horizontale Verschiebung */ #groups details.group.editing .grid-6{ grid-template-columns: var(--col-date) var(--col-weight) var(--col-coins) var(--col-price) var(--col-market) minmax(var(--col-actions-min),1fr) !important; } /* 2.6) Marktwert-Werte (Spalte 5) im Edit-Modus ausblenden, aber Platz behalten → keine Verschiebung */ #groups details.group.editing .rowline > :nth-child(5){ visibility:hidden !important; } /* 2.7) Gruppen-Footer rechts ausrichten (Referenzkante für die Button-Spalte) */ #groups .group-footer{ display:flex; justify-content:flex-end; } /* ===== FINAL: 6-Spalten-Grid stabil + Buttons ganz rechts ============== */ :root{ --col-date: 1.05fr; --col-weight: 1fr; --col-coins: 0.8fr; /* bei Bedarf anpassen */ --col-price: 1fr; --col-market: 1fr; --col-actions-min: 220px; /* genug Platz für die beiden Buttons */ --actions-nudge: 0px; /* optional: +X px schiebt Buttons noch weiter nach rechts */ } /* 1) Ein gemeinsames Grid für Kopfzeile und alle Datenzeilen */ #groups details.group .grid-6.grid-headline, #groups details.group .rowline.grid-6{ display:grid !important; grid-template-columns: var(--col-date) var(--col-weight) var(--col-coins) var(--col-price) var(--col-market) minmax(var(--col-actions-min),1fr) !important; column-gap:12px !important; align-items:center !important; } /* 2) Kopfzeile: Label über Zahl, Zahl mittig → Werte stehen exakt darunter */ #groups .grid-headline .th{ display:flex; flex-direction:column; align-items:center; gap:2px; } #groups .grid-headline .th-value{ text-align:center; } /* 3) Ausrichtung in den Datenzeilen */ #groups details.group .rowline.grid-6 > :nth-child(1){ text-align:left !important; } /* Datum */ #groups details.group .rowline.grid-6 > :nth-child(2), #groups details.group .rowline.grid-6 > :nth-child(3), #groups details.group .rowline.grid-6 > :nth-child(4), #groups details.group .rowline.grid-6 > :nth-child(5){ text-align:center !important; } /* Gewicht/Münzen/Kaufpreis/Marktwert */ #groups details.group .rowline.grid-6 > :nth-child(6){ justify-self:end !important; } /* Änderung/Buttons ganz rechts */ /* 4) Inhalt der rechten Spalte */ #groups .col-change{ display:flex; justify-content:center; align-items:center; gap:8px; width:100%; } #groups .col-change .row-actions{ display:none; gap:8px; } #groups .col-change .val-change{ display:inline; } /* 5) Edit-Modus: gleiche Spaltenbreite (keine horizontale Verschiebung!) */ #groups details.group.editing .rowline.grid-6{ grid-template-columns: var(--col-date) var(--col-weight) var(--col-coins) var(--col-price) var(--col-market) minmax(var(--col-actions-min),1fr) !important; } /* Marktwert in den Zeilen ausblenden, aber Platz behalten → nichts rutscht */ #groups details.group.editing .rowline.grid-6 > :nth-child(5){ visibility:hidden !important; } /* Buttons im Edit-Modus nach ganz rechts (gleich Linie wie „Bearbeiten beenden“) */ #groups details.group.editing .rowline.grid-6 > :nth-child(6){ justify-self:end !important; } #groups details.group.editing .col-change{ justify-content:flex-end; transform: translateX(var(--actions-nudge)); } #groups details.group.editing .col-change .val-change{ display:none !important; } #groups details.group.editing .col-change .row-actions{ display:flex !important; flex-direction:column; align-items:flex-end; } /* 6) Falls irgendwo noch eine alte Regel zentriert: überschreiben */ #groups details.group .rowline.grid-6 > :nth-child(6){ text-align:unset !important; } /* Änderung (%) wirklich mittig unter der Überschrift */ #groups details.group:not(.editing) .rowline.grid-6 > :nth-child(6){ justify-self: center !important; /* Zelle mittig ins Grid-Track */ text-align: center !important; /* Text/Prozent mittig */ } #groups details.group:not(.editing) .rowline.grid-6 > :nth-child(6) .col-change{ display:flex; justify-content:center !important; width:100%; } /* Im Bearbeitungsmodus weiterhin ganz rechts für die Buttons */ #groups details.group.editing .rowline.grid-6 > :nth-child(6){ justify-self: end !important; } #groups details.group.editing .rowline.grid-6 > :nth-child(6) .col-change{ justify-content: flex-end !important; } /* === Investments-Tabelle: kompaktere Inputs/Selects ==================== */ #portfolioTable input, #portfolioTable select{ font-size: .95rem; /* etwas kleiner */ padding: 6px 10px; /* weniger Innenabstand → geringere Höhe */ height: 36px; /* fixe, kompakte Höhe */ line-height: 1.2; border-radius: 10px; } /* Nummernfelder rechtsbündig & ohne überhohe Spinner-Margins */ #portfolioTable input[type="number"]{ text-align:right; } #portfolioTable input[type="number"]::-webkit-outer-spin-button, #portfolioTable input[type="number"]::-webkit-inner-spin-button{ margin:0; } /* Breiten feinjustieren (damit sie nicht „zu mächtig“ wirken) */ #portfolioTable td:first-child input[type="text"]{ width: 130px; } /* Kaufdatum */ #portfolioTable .inp-weight{ width: 130px; } /* Gewicht (g) */ #portfolioTable .inp-coins { width: 100px; } /* Münzen */ #portfolioTable .inp-price { width: 150px; } /* Preis (EUR) */ /* Tabellenzellen etwas dichter */ #portfolioTable th, #portfolioTable td{ padding: 6px 8px; } /* noch kompakter auf sehr kleinen Screens */ @media (max-width: 600px){ #portfolioTable input, #portfolioTable select{ height: 34px; padding: 5px 8px; } } /* in /css/theme-metals.css hinzufügen */ .app-brand .brand-img{ height: 64px; /* sichtbare Höhe im Header */ width: auto; display: block; } /* optional: auf größeren Screens etwas größer */ @media (min-width: 1024px){ .app-brand .brand-img{ height: 80px; } } .brand-hero{ background:#3b4356; } /* dein dunkles Blau */ .brand-hero__img{ display:block; width:min(100vw, 1600px); /* füllt die Breite bis max. Original */ height:auto; margin:0 auto; /* zentriert */ } /* kompakter Banner */ .brand-hero { background:#3b4356; padding:8px 0; } /* weniger Vertikalraum */ .brand-hero__img{ height: 96px; /* <<< gewünschte sichtbare Höhe */ width: auto; /* Seitenverhältnis bleibt korrekt */ display: block; margin: 0 auto; /* zentriert */ } /* auf großen Screens minimal größer */ @media (min-width: 1024px){ .brand-hero__img{ height: 120px; } } /* --- Header sichtbar halten --- */ .app-header{ position: sticky; /* bleibt oben beim Scrollen – passt auch mit static */ top: 0; z-index: 1000; /* über dem Banner */ background: #3b4356; /* dunkles Blau wie dein Banner */ } .app-header .inner{ display: flex; justify-content: space-between; align-items: center; min-height: 56px; padding: 8px 16px; } /* --- Banner darunter und kleiner --- */ .brand-hero{ position: relative; z-index: 1; /* unter dem Header */ background:#3b4356; padding: 6px 0; /* schmaler */ } .brand-hero__img{ display:block; height: 96px; /* hier stellst du die sichtbare Größe ein */ width: auto; margin: 0 auto; } @media (min-width: 1024px){ .brand-hero__img{ height: 120px; } } /* EIN Balken: Header hat die Hintergrundfarbe, kein extra Banner */ .app-header{ background:#3b4356; /* dein dunkles Blau */ position:sticky; top:0; z-index:1000; } /* Layout im Header: Bild links, Buttons rechts */ .app-header .inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:8px 16px; } /* Logo-Größe steuern – hier kleiner stellen */ .brand-logo{ display:block; width:auto; /* Breite ergibt sich automatisch */ max-width:100%; } /* Buttons in einer Zeile halten */ .app-actions{ display:flex; gap:10px; white-space:nowrap; /* nichts umbrechen */ } /* Responsiv: auf sehr kleinen Screens Logo noch kleiner */ @media (max-width: 640px){ .brand-logo{ height:48px; } } @media (min-width: 1200px){ .brand-logo{ height:90px; } } /* Falls es die brand-hero-Klasse noch gibt: ausblenden */ .brand-hero{ display:none; } /* Header: ein Balken, kompakt */ .app-header{ background:#3b4356; position:sticky; top:0; z-index:1000; } .app-header .inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:6px 14px; /* kleinerer vertikaler Abstand */ } /* Buttons rechts in einer Zeile */ .app-actions{ display:flex; gap:10px; white-space:nowrap; } /* Falls brand-hero im Markup geblieben ist: sicherheitshalber ausblenden */ .brand-hero{ display:none !important; } /* Weniger Glow für den goldenen Button */ .btn--gold{ box-shadow: 0 2px 6px rgba(0,0,0,.25) !important; /* kleinerer Schatten */ text-shadow: none !important; /* Schrift-Glow aus */ } /* Hover/Active dezent */ .btn--gold:hover{ box-shadow: 0 3px 10px rgba(0,0,0,.25) !important; } .btn--gold:active{ box-shadow: 0 1px 4px rgba(0,0,0,.3) inset !important; } /* Header-Layout: Mitte ausrichten */ .app-header .inner{ display: flex; align-items: center; /* vertikal zentriert */ justify-content: space-between; gap: 16px; padding: 6px 14px; } /* Buttons vertikal mittig halten */ .app-actions{ display:flex; align-items:center; gap:10px; white-space:nowrap; } /* --- Gemeinsamer Header-Style (Portfolio + Auth) --- */ .app-header{ background:#3b4356; /* ein Balken */ color:#fff; border-bottom:1px solid #2b3545; box-shadow:0 8px 24px rgba(0,0,0,.18); } .app-header .inner{ display:flex; align-items:center; /* vertikal mittig: Logo/Buttons fluchten */ justify-content:space-between; gap:16px; padding:6px 14px; } /* Buttons in einer Reihe */ .app-actions{ display:flex; gap:10px; white-space:nowrap; } /* Optional: weniger „Scheinen“ beim Gold-Button (wie besprochen) */ .btn--gold{ box-shadow:0 2px 6px rgba(0,0,0,.25) !important; text-shadow:none !important; } .btn--gold:hover{ box-shadow:0 3px 10px rgba(0,0,0,.25) !important; } .btn--gold:active{ box-shadow:0 1px 4px rgba(0,0,0,.3) inset !important; } /* Ein Balken, gleiche Optik wie auf den anderen Seiten */ .app-header{ background:#3b4356; color:#fff; border-bottom:1px solid #2b3545; box-shadow:0 8px 24px rgba(0,0,0,.18); position:sticky; top:0; z-index:1000; } /* Logo links, Buttons rechts – vertikal mittig */ .app-header .inner{ display:flex; align-items:center; /* zentriert Logo & Buttons vertikal */ justify-content:space-between; gap:16px; padding:6px 14px; } /* Buttons nebeneinander */ .app-actions{ display:flex; gap:10px; white-space:nowrap; } /* Optional: weniger Glow beim goldenen Button */ .btn--gold{ box-shadow:0 2px 6px rgba(0,0,0,.25) !important; text-shadow:none !important; } .btn--gold:hover{ box-shadow:0 3px 10px rgba(0,0,0,.25) !important; } .btn--gold:active{ box-shadow:0 1px 4px rgba(0,0,0,.30) inset !important; } .scale-toggle button { padding:.3rem .6rem; border-radius:8px; } .scale-toggle .active { font-weight:600; } .legend-toolbar { display: flex; gap: .5rem; align-items: center; padding: .25rem .5rem; overflow-x: auto; } .legend-toolbar button { padding: .25rem .6rem; border-radius: 10px; border: 1px solid #ddd; background: #f8f8f8; cursor: pointer; } .legend-toolbar button:hover { background: #eee; } .legend-toolbar input { margin-left: auto; min-width: 180px; padding: .25rem .5rem; border-radius: 8px; border: 1px solid #ddd; } .chart-legend-scroll-wrapper { position: relative; } /* Chart.js legt seine Legende in ein