/*
  THE CREATOR AREA (www.pyron.app/partner, 02.10.2026) — the admin portal's night (portal.css brings
  tokens, fonts, buttons), for one person: a creator who wants to know in three seconds what his code
  brought and when money comes. Phone first: 16 px gutter, nothing wider than the screen, the main
  button full width. No inline style anywhere — the page's CSP allows only this file.
*/

body.partner { min-height: 100vh; }

/* ---------------------------------------------------------------- head -- */
.partner-kopf {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 24px;
  min-height: 60px; padding: 0 16px;
  background: rgba(17, 24, 36, 0.86);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--haar);
}
.partner-nav { display: flex; align-items: center; gap: 20px; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.partner-nav::-webkit-scrollbar { display: none; }
.partner-nav a { flex: none; padding: 8px 0; font: 700 14px/1 var(--text); color: var(--schrift-leise); text-decoration: none; white-space: nowrap; }
.partner-nav a:hover, .partner-nav a[aria-current='page'] { color: #FFFFFF; }
.partner-nav a[aria-current='page'] { box-shadow: inset 0 -3px 0 var(--feuer); }
.partner-nav form { margin: 0 0 0 auto; flex: none; }
.partner-nav button {
  padding: 8px 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--erhoben); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 800 12px/1 var(--text); color: var(--schrift-leise);
}
.partner-nav button:hover { color: #FFFFFF; }

/* --------------------------------------------------------------- login -- */
.anmelden {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px;
  max-width: 440px; margin: 0 auto; padding: 40px 16px 56px;
}
.anmelden h1 { font: 700 30px/1.08 var(--titel); letter-spacing: -0.3px; text-transform: uppercase; color: #FFFFFF; }
.anmelden-satz { margin: 0; font: 700 16px/1.45 var(--text); color: var(--schrift-leise); }
/* QR codes need a light background with a quiet zone; the svg brings its own white square. */
.qr {
  width: min(300px, 100%); padding: 14px; border-radius: 24px;
  background: #FFFFFF; box-shadow: 0 0 0 1px var(--haar-stark), 0 18px 60px rgba(244, 122, 32, 0.18);
}
.qr svg { display: block; width: 100%; height: auto; }
.am-handy { margin: 8px 0 0; font: 700 14px/1.4 var(--text); color: var(--schrift-still); }
/* Applying starts with the same sign-in (03.10.2026, Jonas: open applications). */
.anmelden-bewerben { margin: 24px 0 0; font: 700 14px/1.4 var(--text); color: var(--schrift-still); }
.knopf--breit { width: 100%; text-decoration: none; }

/* --------------------------------------------------------------- pages -- */
.blatt { max-width: 960px; margin: 0 auto; padding: 28px 16px 64px; display: flex; flex-direction: column; gap: 18px; }
.blatt-titel { font: 700 28px/1.08 var(--titel); letter-spacing: -0.3px; text-transform: uppercase; color: #FFFFFF; }
.blatt p { margin: 0; }
.leer, .einleitung { font: 700 15px/1.5 var(--text); color: var(--schrift-leise); }
.hinweis {
  padding: 14px 16px; border-radius: 16px; background: var(--buehne); border: 1px solid var(--haar);
  font: 700 14px/1.45 var(--text); color: var(--schrift);
}
.fehler {
  padding: 12px 16px; border-radius: 14px; background: rgba(255, 154, 135, 0.1); border: 1px solid rgba(255, 154, 135, 0.4);
  font: 700 14px/1.45 var(--text); color: var(--rot);
}

/* The code: the one thing a creator copies every day. */
.code-held { display: flex; flex-direction: column; gap: 6px; }
.hallo { font: 700 15px/1.3 var(--text); color: var(--schrift-leise); }
.code-wort { font: 800 12px/1 var(--text); letter-spacing: 1.2px; text-transform: uppercase; color: var(--schrift-still); }
.code-zeile { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.code { font: 700 clamp(30px, 9vw, 48px)/1.05 var(--titel); letter-spacing: 0.5px; color: #FFFFFF; overflow-wrap: anywhere; text-shadow: 0 0 28px rgba(244, 122, 32, 0.35); }
.code-zeile--klein .code { font-size: 22px; }
.kopieren {
  flex: none; height: 36px; padding: 0 14px; border: 0; border-radius: 999px; cursor: pointer;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 800 13px/1 var(--text); color: #FFFFFF;
}
.kopieren:hover { background: #313B4E; }
.kopieren .kopiert-wort { display: none; }
.kopieren.kopiert .kopieren-wort { display: none; }
.kopieren.kopiert .kopiert-wort { display: inline; color: var(--gruen); }

/* Six numbers: two columns on a phone, three on a wide screen. */
.kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.kennzahl {
  --z: #FFFFFF;
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  padding: 16px; border-radius: var(--rund-kachel); background: var(--buehne); border: 1px solid var(--haar);
}
.kennzahl--feuer { --z: var(--feuer); box-shadow: inset 0 2px 0 var(--feuer); }
.kennzahl-wert { font: 700 clamp(20px, 6vw, 28px)/1.05 var(--titel); color: var(--z); overflow-wrap: anywhere; }
.kennzahl-wort { font: 700 13px/1.35 var(--text); color: var(--schrift-leise); }
.kennzahl-dazu { font: 700 12px/1.35 var(--text); color: var(--schrift-still); }

.karte { padding: 18px 16px 12px; border-radius: var(--rund-karte); background: var(--buehne); border: 1px solid var(--haar); }
.karte-titel { margin: 0 0 10px; font: 700 13px/1 var(--titel); letter-spacing: 1.1px; text-transform: uppercase; color: #FFFFFF; }
.balken { display: flex; flex-direction: column; gap: 6px; }
.balken-spitze { align-self: flex-end; min-height: 16px; font: 700 12px/16px var(--text); color: var(--schrift-still); }
.balken-flaeche { display: block; width: 100%; height: 150px; }
.balken-saeule { fill: var(--feuer); }
.balken-leer { fill: var(--feld); }
.balken-monate { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.balken-monate span { text-align: center; font: 700 11px/1.2 var(--text); color: var(--schrift-still); overflow: hidden; text-overflow: clip; white-space: nowrap; }
@media (min-width: 700px) {
  .balken-flaeche { height: 200px; }
  .balken-monate span { font-size: 13px; }
}
.regeln { font: 600 14px/1.55 var(--text); color: var(--schrift-leise); }

/* Payouts and material: one row each. */
.abrechnungen, .dateien { display: grid; gap: 10px; }
.abrechnung, .datei {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 12px;
  padding: 14px 16px; border-radius: 16px; background: var(--buehne); border: 1px solid var(--haar);
}
/* Left what it is (month, number), right what it means (amount, state). */
.abrechnung { grid-template-areas: 'monat betrag' 'zeitraum stand' 'teile teile' 'links links'; }
.abrechnung-monat { grid-area: monat; }
.abrechnung-nummer { grid-area: nummer; }
.abrechnung-betrag { grid-area: betrag; }
.abrechnung-stand { grid-area: stand; }
.abrechnung-pdf { grid-area: pdf; }
.abrechnung-monat, .datei-name { font: 800 15px/1.3 var(--text); color: #FFFFFF; overflow-wrap: anywhere; }
.abrechnung-betrag { font: 700 18px/1 var(--titel); color: #FFFFFF; text-align: right; }
.abrechnung-nummer, .datei-groesse { font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.abrechnung-stand { font: 800 12px/1.3 var(--text); color: var(--gelb); text-align: right; }
.abrechnung-stand--da { color: var(--gruen); }
.abrechnung-pdf { font: 700 13px/1.3 var(--text); color: var(--akzent-schrift); }
/* Since 03.10.2026 (settlement): period, net and VAT, the downloads and „Beanstanden". */
.abrechnung-zeitraum { grid-area: zeitraum; font: 700 13px/1.3 var(--text); color: var(--schrift-leise); }
.abrechnung-teile { grid-area: teile; font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.abrechnung-links { grid-area: links; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.abrechnung-links:empty { display: none; }
.abrechnung-links .knopf { text-decoration: none; }
.abrechnung-beanstanden { margin-left: auto; font: 700 13px/1.3 var(--text); color: var(--schrift-leise); }
.abrechnung-bezug { font: 700 12px/1.3 var(--text); color: var(--schrift-still); }
.abrechnung-monat .abrechnung-nummer, .abrechnung-bezug { white-space: nowrap; }
.blatt-untertitel { margin: 14px 0 0; font: 700 18px/1.2 var(--titel); text-transform: uppercase; color: #FFFFFF; }
.hinweis ul { margin: 6px 0 0; padding-left: 18px; }
.hinweis a, .einleitung a { color: var(--akzent-schrift); }
.hinweis--gut { color: var(--gruen); }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 10px; }
.knopf-reihe form { margin: 0; }
fieldset.feld { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
fieldset.feld legend { margin-bottom: 6px; font: 700 13px/1.35 var(--text); color: var(--schrift-leise); }
/* A file: name and size on the left, the button on the right. */
.datei { grid-template-areas: 'name knopf' 'groesse knopf'; }
.datei-name { grid-area: name; }
.datei-groesse { grid-area: groesse; }
.datei .knopf { grid-area: knopf; text-decoration: none; }

/* Forms: one column on a phone, 16 px in every field (Safari would zoom below that). */
.formular-partner { display: flex; flex-direction: column; gap: 14px; }
.feld { display: flex; flex-direction: column; gap: 6px; min-width: 0; font: 700 13px/1.35 var(--text); color: var(--schrift-leise); }
.feld small { font: 700 12px/1.35 var(--text); color: var(--schrift-still); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 48px; padding: 12px 15px; border: 0; border-radius: 14px;
  background: var(--feld); box-shadow: inset 0 0 0 1px var(--haar-stark);
  font: 600 16px/1.35 var(--text); color: #FFFFFF;
}
.feld textarea { resize: vertical; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: 0; box-shadow: inset 0 0 0 1.5px var(--akzent), 0 0 20px rgba(240, 149, 107, 0.2); }
.feld-paar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
.wahlen { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; }
.wahlen legend { margin-bottom: 6px; font: 700 13px/1.35 var(--text); color: var(--schrift-leise); }
.wahl { display: flex; align-items: flex-start; gap: 10px; font: 700 15px/1.4 var(--text); color: var(--schrift); cursor: pointer; }
.wahl input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--feuer); }
.formular-partner .knopf { align-self: stretch; }
/* The account page (03.10.2026): sections that do not fit stay out, even where a class sets display. */
[hidden] { display: none !important; }
.feld-gruppe { display: flex; flex-direction: column; gap: 14px; }
.feld-paar--gleich { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.feld-paar--hausnummer { grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); }
.still { margin: 0; font: 700 13px/1.4 var(--text); color: var(--schrift-still); }
.einwilligungen { gap: 12px; }
.neu-anmelden { margin: 0 0 16px; }
.vertrag-zeile { font: 700 13px/1.45 var(--text); color: var(--schrift-still); }
.vertrag-zeile a { color: var(--akzent-schrift); }

/* The contract: readable text on a light card — it is a document, not a dashboard. */
.vertrag {
  padding: 22px 18px; border-radius: 20px; background: #F6F7F9; color: #1A212D;
  font: 600 15px/1.6 var(--text); overflow-wrap: anywhere;
}
.vertrag h1, .vertrag h2, .vertrag h3 { margin: 18px 0 8px; font-family: var(--titel); color: #111824; line-height: 1.2; }
.vertrag h1 { margin-top: 0; font-size: 22px; }
.vertrag h2 { font-size: 17px; }
.vertrag h3 { font-size: 15px; }
.vertrag p, .vertrag ul { margin: 0 0 10px; }
.vertrag ul { padding-left: 20px; list-style: disc; }
.vertrag table { width: 100%; border-collapse: collapse; margin: 0 0 12px; font-size: 14px; }
.vertrag th, .vertrag td { padding: 6px 8px; border: 1px solid #D5DAE1; text-align: left; vertical-align: top; }

@media (min-width: 700px) {
  .partner-kopf { padding: 0 32px; }
  .anmelden { padding-top: 64px; }
  .knopf--breit { width: auto; }
  .blatt { padding: 40px 32px 80px; gap: 22px; }
  .kennzahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .formular-partner { max-width: 560px; }
  .formular-partner .knopf { align-self: flex-start; }
  .vertrag { padding: 32px 36px; }
}