/* ═══════════════════════════════════════════════════════════════════════
   WAPPEN-DESIGN fuer alle Seiten                                     29.09.2026
   Ivo 28.09.2026 nach der Vorschau: „Ja, gefällt mir alles. Bitte mach das so.“
   Vorlage: unternehmen/index.html und planet-points/index.html (Kupferrahmen-Block,
   dort ab „Kupferrahmen: ein feiner Verlauf als Rand“). EINE Datei fuer alle Seiten -
   geaendert wird hier, nicht sechsmal.
   Das Hintergrundbild (partner/assets/unternehmen-hintergrund.webp) steht in jeder Seite
   selbst, weil jede ihren Grund anders baut (#grund, #gate, body).
   Alte Fassung zurueck: diese Datei aus der Seite nehmen + Bildzeilen (als Kommentar
   „alt:“ daneben) zurueckstellen; Git-Stand design-vor-wappen.
   Nur im Dunkelmodus (body:not(.lightmode)) - der Hellmodus bleibt unberuehrt.
   Variablen mit Rueckfallwert: die Rechnerseiten kennen --panel/--verlauf nicht.
   ═══════════════════════════════════════════════════════════════════════ */
/* Kupferrahmen: ein feiner Verlauf als Rand - oben heller, unten tiefer. */
:root{ --kupfer-rand:linear-gradient(160deg, rgba(247,210,176,.95), rgba(214,140,88,.55) 38%, rgba(198,117,61,.45) 62%, rgba(247,210,176,.80));
       --kupfer-innen:rgba(232,184,144,.42); }
body:not(.lightmode) .panel,body:not(.lightmode) .kpi,body:not(.lightmode) .card,body:not(.lightmode) .vertrag,body:not(.lightmode) .ov-box{
  border:2px solid transparent!important;
  background:linear-gradient(var(--panel, rgba(10,18,28,.72)),var(--panel, rgba(10,18,28,.72))) padding-box, var(--kupfer-rand) border-box!important;
  box-shadow:0 14px 38px rgba(0,0,0,.45), inset 0 1px 0 rgba(247,210,176,.07);
}
body:not(.lightmode) .kpi{background:linear-gradient(180deg,rgba(20,30,44,.72),rgba(6,13,22,.66)) padding-box, var(--kupfer-rand) border-box!important;}
body:not(.lightmode) .card{background:linear-gradient(160deg,rgba(16,26,38,.96),rgba(6,11,18,.97) 75%) padding-box, var(--kupfer-rand) border-box!important;}
body:not(.lightmode) .ov-box{background:linear-gradient(var(--bg, #060d16),var(--bg, #060d16)) padding-box, var(--kupfer-rand) border-box!important;}
body:not(.lightmode) .vertrag{background:linear-gradient(rgba(6,13,22,.6),rgba(6,13,22,.6)) padding-box, var(--kupfer-rand) border-box!important;}
body:not(.lightmode) .panel{border-radius:14px;padding:22px 24px;}
/* Zierlinie unter jeder Feldueberschrift */
body:not(.lightmode) .panel h2{position:relative;padding-bottom:10px;}
body:not(.lightmode) .panel h2::after{content:"";position:absolute;left:0;bottom:0;width:64px;height:2px;border-radius:2px;
  background:linear-gradient(90deg,#f7d2b0,#c6753d 70%,rgba(198,117,61,0));}
body:not(.lightmode) .kpi .val{background:var(--verlauf, linear-gradient(180deg,#f7d2b0,#e3ab85 55%,#c6753d));-webkit-background-clip:text;background-clip:text;color:transparent;}
body:not(.lightmode) header.top{border-bottom:1px solid transparent;border-image:linear-gradient(90deg,rgba(198,117,61,0),rgba(247,210,176,.55),rgba(198,117,61,0)) 1;}
body:not(.lightmode) td{border-bottom:1px solid rgba(232,184,144,.12);}
body:not(.lightmode) .pill{border-color:rgba(232,184,144,.45);background:rgba(198,117,61,.10);}

/* Knoepfe: Kupferverlauf mit Glanzkante, Schatten und sanftem Anheben */
body:not(.lightmode) .btn{font-weight:600;letter-spacing:1.4px;border-radius:9px;padding:12px 22px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(90,45,15,.35), 0 6px 16px rgba(198,117,61,.28);
  transition:transform .15s ease, box-shadow .15s ease, filter .15s ease;}
body:not(.lightmode) .btn:hover{filter:brightness(1.07);transform:translateY(-1px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6), inset 0 -1px 0 rgba(90,45,15,.35), 0 10px 22px rgba(198,117,61,.38);}
body:not(.lightmode) .btn:disabled{transform:none;}
body:not(.lightmode) .btn.ghost{color:var(--gold2, #f7d2b0);border:1px solid transparent;
  background:linear-gradient(rgba(10,18,28,.78),rgba(10,18,28,.78)) padding-box, var(--kupfer-rand) border-box;
  box-shadow:0 4px 12px rgba(0,0,0,.35);}
body:not(.lightmode) .btn.ghost:hover{background:linear-gradient(rgba(198,117,61,.20),rgba(198,117,61,.12)) padding-box, var(--kupfer-rand) border-box;}
body:not(.lightmode) input:focus,body:not(.lightmode) select:focus,body:not(.lightmode) textarea:focus{border-color:var(--gold, #e8b890);box-shadow:0 0 0 3px rgba(232,184,144,.14);}
/* Innen ein leichter Kupferrahmen (Ivo, 23.09.): Eingabefelder und die
   Kacheln mit den Zahlen. Die Kacheln bleiben feiner (1 px) als die
   aeusseren Felder (2 px), damit die Rangfolge sichtbar bleibt. */
body:not(.lightmode) .kpi{border-width:1px!important;background:linear-gradient(180deg,rgba(20,30,44,.78),rgba(6,13,22,.72)) padding-box, linear-gradient(160deg, rgba(247,210,176,.70), rgba(198,117,61,.40)) border-box!important;}
body:not(.lightmode) input,body:not(.lightmode) select,body:not(.lightmode) textarea{border:1px solid var(--kupfer-innen)!important;}
body:not(.lightmode) input:focus,body:not(.lightmode) select:focus,body:not(.lightmode) textarea:focus{border-color:var(--gold2, #f7d2b0)!important;}
body:not(.lightmode) #sigPad{border:1px solid var(--kupfer-innen)!important;}
/* Die Windows-Knoepfe "Datei auswaehlen" ebenfalls in Kupfer */
body:not(.lightmode) input[type=file]{padding:8px 10px;color:var(--text2, #9fb0c2);}
body:not(.lightmode) input[type=file]::file-selector-button{font-family:'EB Garamond',serif;font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  color:#3a2415;background:linear-gradient(180deg,#f7d2b0,#e3ab85 55%,#c6753d);border:none;border-radius:7px;padding:8px 14px;margin-right:12px;cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 3px 10px rgba(198,117,61,.25);}

/* Zusaetzlich aus der abgenommenen Vorschau: Fenster (.modal) und die Anmeldekarte */
body:not(.lightmode) .modal,body:not(.lightmode) #gate .card{border:2px solid transparent!important;background:linear-gradient(rgba(10,18,28,.82),rgba(10,18,28,.82)) padding-box, var(--kupfer-rand) border-box!important;box-shadow:0 14px 38px rgba(0,0,0,.45);}
body:not(.lightmode) .chip{border-color:rgba(232,184,144,.45)!important;}

/* ── Das Wappen oben in JEDER Kopfzeile gut sichtbar (Ivo 29.09.2026: „das Wappen … oben auch in
   jedem Menü schön sichtbar“). Vorher 42–50 px. Gilt in beiden Modi - das Wappen ist kein Farbthema. ── */
.pp-mm-kopf img[src*="logo"], header img[src*="logo"], header.top img[src*="profit-planet-logo"]{
  width:76px!important;height:76px!important;max-width:none!important;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 3px 10px rgba(198,117,61,.35));}
@media (max-width:760px){
  .pp-mm-kopf img[src*="logo"], header img[src*="logo"], header.top img[src*="profit-planet-logo"]{width:56px!important;height:56px!important;}
}

/* ═══ 03.10.2026, Ivo: auf dem Handy darf NICHTS über den Bildschirmrand ragen ═══
   Gemessen: in Planet Points schob die Tabelle "Firma | Ort | Planet Points |
   Beleg einreichen" (mind. 344 px) das ganze Fenster über den Rand, sobald das
   Handy schmaler als 390 px ist. Diese Regeln gelten auf allen Seiten, die diese
   Datei laden (Startseite, Portal, Planet Points, Unternehmen, Shop, Webinar,
   beide Rechner) - auch für Tabellen, die später dazukommen:
   - Fenster/Karten/Kacheln werden nie breiter als ihr Platz
   - eine breite Tabelle scrollt INNERHALB ihres Fensters statt es zu verschieben
   - Knöpfe in Tabellen dürfen umbrechen
   - etwas schmalerer Innenrand der Fenster
   Prüfung: test/handy-ueberstand.test.js */
@media (max-width:640px){
  html body .panel, html body .card, html body .kpi, html body .pp-lux-card, html body .ov-box{
    min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:break-word;}
  html body .panel{padding-left:16px!important;padding-right:16px!important;}
  html body .panel table, html body .card table, html body .pp-lux-card table, html body .ov-box table{
    display:block;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
  html body td .btn, html body td button{white-space:normal;}
  html body img, html body video{max-width:100%;}
  html body input, html body select, html body textarea{max-width:100%;}
}

/* 04.10.2026 – Meine Abos auf dem Handy (Ivo, Option B): jede Zeile eine Kachel, sichtbar nur die
   erste; der Rest hinter dem Knopf "Alle Abos anzeigen". Gilt NUR für table.pp-abo-karten
   (partner/src/10-unterschrift-news-dashboard.js). Am Computer bleibt die Tabelle, der Knopf ist aus.
   Prüfung: test/abo-karten.test.js */
.pp-abo-alle{display:none;}
@media (max-width:640px){
  html body .panel table.pp-abo-karten{display:block;overflow:visible;border:0;}
  html body table.pp-abo-karten thead{display:none;}
  html body table.pp-abo-karten tbody{display:grid;gap:10px;}
  html body table.pp-abo-karten tr{display:block;border:1px solid rgba(232,184,144,.35);border-radius:12px;padding:12px 14px;
    background:linear-gradient(180deg,rgba(232,184,144,.08),rgba(232,184,144,.02));box-shadow:0 6px 18px rgba(0,0,0,.35);}
  html body table.pp-abo-karten tr.pp-abo-mehr{display:none;}
  html body table.pp-abo-karten.pp-abo-offen tr.pp-abo-mehr{display:block;}
  html body table.pp-abo-karten td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;
    border:0;border-bottom:1px solid rgba(232,184,144,.12);text-align:right;white-space:normal;}
  html body table.pp-abo-karten td:last-child{border-bottom:0;}
  html body table.pp-abo-karten td::before{content:attr(data-label);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
    color:var(--text2);text-align:left;flex:0 0 auto;}
  html body table.pp-abo-karten td:first-child{font-weight:600;color:var(--gold);}
  html body table.pp-abo-karten td.pp-abo-aktion{display:block;text-align:left;}
  html body table.pp-abo-karten td.pp-abo-aktion::before{display:block;margin-bottom:8px;}
  html body table.pp-abo-karten td.pp-abo-aktion > .row{display:grid;grid-template-columns:1fr;gap:8px;width:100%;}
  html body table.pp-abo-karten td.pp-abo-aktion .btn{width:100%;margin:0;padding:11px 8px!important;font-size:11.5px!important;letter-spacing:2px;}
  html body .pp-abo-alle{display:block;width:100%;margin-top:10px;padding:12px;border-radius:10px;border:1px dashed rgba(232,184,144,.55);
    background:transparent;color:var(--gold);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:inherit;}
}

/* 04.10.2026 – Meine Rechnungen auf dem Handy (Ivo: Vorschlag B, Design 4 "voll Kupfer", Schrift
   kräftiger): die 4 neuesten als Kupferzeilen (Nr./Datum links, Betrag/Status rechts), Antippen klappt
   eine Zeile zur vollen Rechnung auf (.pp-re-auf), der Rest hinter "Alle Rechnungen anzeigen".
   Gilt NUR für table.pp-re-karten. Am Computer bleibt die Tabelle. Prüfung: test/rechnungen-karten.test.js */
.pp-re-alle{display:none;}
@media (max-width:640px){
  html body .panel table.pp-re-karten{display:block;overflow:visible;border:0;}
  html body table.pp-re-karten thead{display:none;}
  html body table.pp-re-karten tbody{display:grid;gap:10px;}
  html body table.pp-re-karten tr{display:grid;grid-template-columns:1fr auto;grid-template-areas:'nr be' 'da st';
    row-gap:3px;column-gap:10px;padding:11px 14px;border-radius:12px;cursor:pointer;
    border:1px solid #c6753d;background:linear-gradient(180deg,#f7d2b0,#c6753d);box-shadow:0 6px 16px rgba(0,0,0,.4);}
  html body table.pp-re-karten tr.pp-re-mehr{display:none;}
  html body table.pp-re-karten.pp-re-offen tr.pp-re-mehr{display:grid;}
  html body table.pp-re-karten td{display:none;border:0;padding:0;white-space:normal;}
  html body table.pp-re-karten td.re-nr{display:block;grid-area:nr;text-align:left;font-size:15px;font-weight:700;color:#1a0f07;letter-spacing:.3px;}
  html body table.pp-re-karten td.re-da{display:block;grid-area:da;text-align:left;font-size:12.5px;font-weight:600;color:#2e1c10!important;}
  html body table.pp-re-karten td.re-be{display:block;grid-area:be;text-align:right;font-size:16px;font-weight:700;color:#1a0f07!important;}
  html body table.pp-re-karten td.re-st{display:block;grid-area:st;text-align:right;}
  html body table.pp-re-karten td.re-st .pill{background:#1a0f07!important;color:#f7d2b0!important;border-color:#1a0f07!important;font-weight:600;}
  /* aufgeklappt: alle Angaben untereinander, Knopf "Rechnung" dunkel */
  html body table.pp-re-karten tr.pp-re-auf{display:block;}
  html body table.pp-re-karten.pp-re-offen tr.pp-re-mehr.pp-re-auf{display:block;}
  html body table.pp-re-karten tr.pp-re-auf td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:6px 0;
    border-bottom:1px solid rgba(58,36,21,.22);text-align:right;color:#1a0f07;font-weight:600;}
  html body table.pp-re-karten tr.pp-re-auf td::before{content:attr(data-label);font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;
    color:#3a2415;font-weight:700;text-align:left;flex:0 0 auto;}
  html body table.pp-re-karten tr.pp-re-auf td:last-child{display:block;border-bottom:0;padding-top:10px;}
  html body table.pp-re-karten tr.pp-re-auf td:last-child::before{display:none;}
  html body table.pp-re-karten tr.pp-re-auf td a{color:#1a0f07;font-weight:700;}
  html body table.pp-re-karten tr.pp-re-auf td .btn{width:100%;margin:0;padding:11px 8px!important;font-size:11.5px!important;letter-spacing:2px;
    background:#1a0f07!important;color:#f7d2b0!important;border-color:#1a0f07!important;}
  html body .pp-re-alle{display:block;width:100%;margin-top:10px;padding:12px;border-radius:10px;border:1px dashed rgba(232,184,144,.55);
    background:transparent;color:var(--gold);font-size:11.5px;letter-spacing:2px;text-transform:uppercase;cursor:pointer;font-family:inherit;}
}

/* 04.10.2026 – Meine Downline auf dem Handy (Ivo: Variante C): Knöpfe je Ebene, darunter nur die Partner
   dieser Ebene als Kupferzeilen (Vorname, Nr. + Mail, Schild "Ebene n", "Direkte Partner: n").
   Gilt NUR für table.pp-dl-karten und .pp-dl-ebenen. Am Computer bleibt die Tabelle.
   Prüfung: test/downline-karten.test.js */
.pp-nur-handy{display:none;}
.pp-dl-ebenen{display:none;}
@media (max-width:640px){
  html body .pp-nur-handy{display:inline;}
  html body table.pp-dl-karten .pp-nur-pc{display:none;}
  html body .pp-dl-ebenen{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px;}
  html body .pp-dl-eb{border:1px solid rgba(232,184,144,.45);border-radius:999px;padding:7px 13px;font-size:11px;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--gold);background:transparent;cursor:pointer;font-family:inherit;}
  html body .pp-dl-eb.an{background:linear-gradient(180deg,#f7d2b0,#c6753d);color:#3a2415;border-color:#c6753d;}
  html body .panel table.pp-dl-karten{display:block;overflow:visible;border:0;}
  html body table.pp-dl-karten thead{display:none;}
  html body table.pp-dl-karten tbody{display:grid;gap:10px;}
  html body table.pp-dl-karten tr{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:'na na eb' 'nr ma di';
    row-gap:3px;column-gap:6px;padding:11px 14px;border-radius:12px;border:1px solid #c6753d;
    background:linear-gradient(180deg,#f7d2b0,#c6753d);box-shadow:0 6px 16px rgba(0,0,0,.4);}
  html body table.pp-dl-karten tr.pp-dl-weg{display:none;}
  html body table.pp-dl-karten td{border:0;padding:0;white-space:normal;}
  html body table.pp-dl-karten td.dl-na{grid-area:na;text-align:left;font-size:15px;font-weight:700;color:#1a0f07!important;}
  html body table.pp-dl-karten td.dl-nr{grid-area:nr;font-size:12.5px;font-weight:600;color:#2e1c10!important;}
  html body table.pp-dl-karten td.dl-nr::before{content:'#';}
  html body table.pp-dl-karten td.dl-nr::after{content:' ·';}
  html body table.pp-dl-karten td.dl-ma{grid-area:ma;font-size:12.5px;font-weight:600;color:#2e1c10!important;overflow-wrap:anywhere;}
  html body table.pp-dl-karten td.dl-eb{grid-area:eb;text-align:right;}
  html body table.pp-dl-karten td.dl-eb .pp-nur-handy{display:inline-block;background:#1a0f07;color:#f7d2b0;border-radius:999px;padding:3px 9px;
    font-size:11px;font-weight:600;letter-spacing:.5px;}
  html body table.pp-dl-karten td.dl-di{grid-area:di;text-align:right;font-size:12.5px;font-weight:600;color:#2e1c10!important;}
}

/* 04.10.2026 – Bonus-Pools (Ivo: Variante D, ohne Zeichen, Infotext offen in Blau Nr. 2):
   Infotext überall im hellen Blau; auf dem Handy statt der Tabelle eine Summenkachel und die Pools
   als 2x2-Kacheln. Am Computer bleibt die Tabelle. Prüfung: test/pools-kacheln.test.js */
.pp-pool-info{color:#b9d0e6;}
body.lightmode .pp-pool-info{color:var(--text2);}
.pp-pool-kacheln{display:none;}
@media (max-width:640px){
  html body .panel table.pp-pool-tab{display:none;}
  html body .pp-pool-kacheln{display:grid;gap:10px;}
  html body .pp-pool-summe{border-radius:14px;padding:16px;text-align:center;background:linear-gradient(180deg,#f7d2b0,#c6753d);
    color:#1a0f07;border:1px solid #c6753d;box-shadow:0 8px 20px rgba(0,0,0,.45);}
  html body .pp-pool-summe span{display:block;font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;font-weight:700;color:#3a2415;}
  html body .pp-pool-summe b{font-size:30px;color:#1a0f07;}
  html body .pp-pool-raster{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
  html body .pp-pool-kachel{border-radius:14px;padding:12px;border:1px solid rgba(232,184,144,.35);background:rgba(6,13,22,.55);min-width:0;}
  html body .pp-pool-kachel span{display:block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--text2);overflow-wrap:anywhere;}
  html body .pp-pool-kachel b{color:#f7d2b0;font-size:18px;}
}