/**
 * Der Partnerbereich im Kundenkonto.
 *
 * GEMELDET: Die Seite wirkte gestaucht - Ueberschriften, Tabellen und
 * Formularfelder standen ohne Rhythmus untereinander, alles gleich wichtig,
 * nichts gruppiert. Die Ursache war nicht ein einzelner Abstand, sondern das
 * Fehlen von Bloecken: Ohne Kaesten liest man eine lange Liste statt vier
 * Bereiche.
 *
 * Deshalb hier: jeder Abschnitt ein Kasten, ein Rhythmus fuer Abstaende, und
 * die wichtigen Zahlen gross genug, um sie zu erfassen, ohne zu suchen.
 */
.tpk{--tpk-navy:#101827;--tpk-blau:#0b6bcb;--tpk-rand:#dbe6f6;--tpk-grau:#5e6c84}
.tpk *{box-sizing:border-box}

.tpk h2{font-size:26px;font-weight:800;color:var(--tpk-navy);margin:0 0 6px}
.tpk__lead{color:var(--tpk-grau);margin:0 0 22px;max-width:640px}

/* Die Register.
   Kein JavaScript: Jedes Register ist ein Verweis mit eigener Adresse - so
   laesst es sich verlinken, und der Zurueck-Knopf tut, was er soll. */
.tpk__reiter{display:flex;gap:4px;border-bottom:1px solid var(--tpk-rand);margin:0 0 22px}
.tpk__reiter a{padding:10px 18px;text-decoration:none;color:var(--tpk-grau);font-weight:600;
	border-bottom:3px solid transparent;margin-bottom:-1px}
.tpk__reiter a:hover{color:var(--tpk-navy)}
.tpk__reiter a.an{color:var(--tpk-navy);border-bottom-color:var(--tpk-blau)}

/* Ein Kasten je Abschnitt - das ist der eigentliche Unterschied. */
.tpk__block{border:1px solid var(--tpk-rand);border-radius:14px;padding:22px 24px;
	margin:0 0 20px;background:#fff}
.tpk__block h3{font-size:18px;font-weight:800;color:var(--tpk-navy);margin:0 0 4px}
.tpk__block .description{color:var(--tpk-grau);font-size:14px;margin:0 0 16px}

/* Kennzahlen nebeneinander statt als Tabellenzeilen untereinander. */
.tpk__zahlen{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 4px}
@media(max-width:700px){.tpk__zahlen{grid-template-columns:1fr}}
.tpk__zahl{background:#f7fafd;border:1px solid var(--tpk-rand);border-radius:10px;padding:14px 16px}
.tpk__zahl span{display:block;color:var(--tpk-grau);font-size:13px;margin:0 0 4px}
.tpk__zahl strong{font-size:22px;font-weight:800;color:var(--tpk-navy);line-height:1.1}
.tpk__zahl em{display:block;font-style:normal;color:var(--tpk-grau);font-size:12.5px;margin-top:4px}

/* Der Werbelink: breit, zum Anklicken, nicht als Fliesstext. */
.tpk__link input{width:100%;padding:11px 13px;border:1px solid var(--tpk-rand);border-radius:9px;
	font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:14px;background:#f7fafd}

.tpk__mittel{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.tpk__mittel figure{margin:0;border:1px solid var(--tpk-rand);border-radius:10px;padding:14px;background:#fff}
.tpk__mittel img{max-width:100%;height:auto;display:block;margin:0 0 10px}
.tpk__mittel figcaption{font-size:13px;color:var(--tpk-grau);margin:0 0 8px}
.tpk__mittel textarea{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
	font-size:11.5px;border:1px solid var(--tpk-rand);border-radius:8px;padding:8px;background:#f7fafd}

.tpk table.shop_table{width:100%;border-collapse:collapse;margin:0 0 6px}
.tpk table.shop_table th,.tpk table.shop_table td{text-align:left;padding:10px 12px;
	border-bottom:1px solid #eef2f7;font-size:14.5px}
.tpk table.shop_table th{color:var(--tpk-grau);font-weight:600;font-size:13px}

.tpk__feld{margin:0 0 14px;max-width:420px}
.tpk__feld label{display:block;font-weight:600;color:var(--tpk-navy);margin:0 0 5px;font-size:14px}
.tpk__feld input,.tpk__feld select{width:100%;padding:10px 12px;border:1px solid var(--tpk-rand);
	border-radius:8px;font-size:15px}
.tpk .button,.tpk button[type=submit]{background:var(--tpk-blau);color:#fff;border:0;font-weight:700;
	padding:11px 20px;border-radius:9px;font-size:15px;cursor:pointer}

.tpk__liste{list-style:none;margin:0;padding:0}
.tpk__liste li{padding:9px 0;border-bottom:1px solid #eef2f7;font-size:14.5px}
.tpk__liste li:last-child{border-bottom:0}