/* Oberflaeche fuer Partnerbereich und Backend.
   Eigenstaendig, damit die Seiten unabhaengig von der Startseite laden. */

:root {
  --cream: #FAF7F4;
  --weiss: #FFFFFF;
  --linie: #E8E0D8;
  --linie-hell: #F2EDE8;
  --gold: #C9A96E;
  --gold-dunkel: #A8863A;
  --anthrazit: #2C2C2C;
  --text: #4A4340;
  --text-hell: #8A7F78;
  --gruen: #3F5F45;
  --gruen-hell: #EDF3EE;
  --rot: #8A2E2E;
  --rot-hell: #FBEAEA;
  --blau-hell: #EBF1F6;
  --radius: 10px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
body {
  margin: 0; background: var(--cream); color: var(--text);
  font: 15px/1.6 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
h1, h2, h3 { color: var(--anthrazit); font-weight: 600; line-height: 1.3; }
h1 { font-size: 1.6rem; margin: 0 0 .25rem; }
h2 { font-size: 1.15rem; margin: 0 0 1rem; }
h3 { font-size: .95rem; margin: 1.5rem 0 .5rem; }
h3:first-child { margin-top: 0; }
a { color: var(--gold-dunkel); }

.huelle { max-width: 1180px; margin: 0 auto; padding: 1.5rem; }

/* ── Kopfzeile ── */
.kopf {
  background: var(--weiss); border-bottom: 1px solid var(--linie);
  position: sticky; top: 0; z-index: 10;
}
.kopf-inner {
  max-width: 1180px; margin: 0 auto; padding: .85rem 1.5rem;
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
}
.kopf-titel { font-weight: 600; color: var(--anthrazit); margin-right: auto; }
.kopf-titel span { color: var(--text-hell); font-weight: 400; }

/* ── Reiter ── */
.reiter { display: flex; gap: .25rem; border-bottom: 1px solid var(--linie); margin-bottom: 1.5rem; }
.reiter button {
  background: none; border: 0; border-bottom: 2px solid transparent;
  padding: .7rem 1rem; font: inherit; color: var(--text-hell); cursor: pointer;
}
.reiter button[aria-selected="true"] { color: var(--anthrazit); border-bottom-color: var(--gold); font-weight: 600; }

/* ── Karten ── */
.karte {
  background: var(--weiss); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.25rem;
}
.kacheln { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: 1.25rem; }
.kachel { background: var(--weiss); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1rem 1.15rem; }
.kachel .wert { font-size: 1.6rem; font-weight: 600; color: var(--anthrazit); line-height: 1.2; }
.kachel .bez { font-size: .8rem; color: var(--text-hell); margin-top: .2rem; }

/* ── Formulare ── */
label { display: block; font-size: .82rem; color: var(--text-hell); margin-bottom: .25rem; }
input, select, textarea {
  width: 100%; padding: .55rem .7rem; font: inherit; color: var(--text);
  background: var(--weiss); border: 1px solid var(--linie); border-radius: 6px;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--gold); outline-offset: -1px; border-color: var(--gold); }
.feldreihe { display: grid; gap: .85rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: .85rem; }

.knopf {
  display: inline-flex; align-items: center; gap: .4rem; padding: .55rem 1.1rem;
  font: inherit; font-weight: 600; border-radius: 6px; border: 1px solid var(--gold);
  background: var(--gold); color: #fff; cursor: pointer; text-decoration: none;
}
.knopf:hover { background: var(--gold-dunkel); border-color: var(--gold-dunkel); }
.knopf[disabled] { opacity: .55; cursor: default; }
.knopf.still { background: var(--weiss); color: var(--text); border-color: var(--linie); }
.knopf.still:hover { background: var(--linie-hell); }
.knopf.klein { padding: .35rem .7rem; font-size: .85rem; font-weight: 500; }

/* ── Tabellen ── */
.tabellenrahmen { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th {
  text-align: left; font-weight: 600; color: var(--text-hell); font-size: .78rem;
  text-transform: uppercase; letter-spacing: .04em;
  padding: .5rem .7rem; border-bottom: 1px solid var(--linie); white-space: nowrap;
}
td { padding: .65rem .7rem; border-bottom: 1px solid var(--linie-hell); vertical-align: top; }
tbody tr:hover { background: var(--cream); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ── Marken ── */
.marke {
  display: inline-block; padding: .15rem .55rem; border-radius: 20px;
  font-size: .76rem; font-weight: 600; white-space: nowrap;
  background: var(--linie-hell); color: var(--text);
}
.marke.neu       { background: var(--blau-hell); color: #2C4A63; }
.marke.aktiv,
.marke.gewonnen  { background: var(--gruen-hell); color: var(--gruen); }
.marke.verloren,
.marke.abgelehnt { background: var(--rot-hell); color: var(--rot); }
.marke.pausiert,
.marke.in_arbeit,
.marke.angebot   { background: #FFF3CD; color: #6B5312; }

.meldung { padding: .8rem 1rem; border-radius: 8px; margin-bottom: 1rem; font-size: .9rem; }
.meldung.ok     { background: var(--gruen-hell); color: var(--gruen); }
.meldung.fehler { background: var(--rot-hell); color: var(--rot); }
.leer { padding: 2.5rem 1rem; text-align: center; color: var(--text-hell); }
.hinweis { font-size: .84rem; color: var(--text-hell); margin: .35rem 0 0; }
.trenner { height: 1px; background: var(--linie); margin: 1.5rem 0; border: 0; }

/* ── Anmeldung ── */
.anmeldung { max-width: 380px; margin: 8vh auto; padding: 0 1.5rem; }
.anmeldung .karte { padding: 1.75rem; }

code, .code {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: .88em;
  background: var(--linie-hell); padding: .1rem .35rem; border-radius: 4px;
}

/* Partneranmeldung im Erscheinungsbild der Bye-Buddy Website */
@font-face { font-family: 'Playfair Display'; src: url('../fonts/playfair-display-latin-500-normal.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-latin-400-normal.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lato'; src: url('../fonts/lato-latin-700-normal.woff2') format('woff2'); font-weight: 700; font-display: swap; }
.partner-login { display: grid; grid-template-columns: minmax(0,44%) minmax(0,56%); max-width: none; min-height: 100vh; margin: 0; padding: 0; background: #fff; font-family: 'Lato',Arial,sans-serif; }
.partner-login-image { position: relative; display: flex; flex-direction: column; justify-content: space-between; min-height: 100vh; padding: 38px clamp(30px,5vw,70px) 68px; color: #fff; background: linear-gradient(180deg,#211e1b77,#211e1b66 35%,#211e1be0),url('../images/hero-bg-hand-paw.webp') 56% center / cover no-repeat; }
.partner-login-logo { display: block; width: 168px; }
.partner-login-logo img { width: 100%; height: auto; }
.partner-login-image > div { max-width: 485px; }
.partner-login-image > div span, .partner-login-eyebrow { display: block; margin-bottom: 12px; color: #dfbf82; font-size: .72rem; font-weight: 700; letter-spacing: .17em; }
.partner-login-image h2 { margin: 0 0 16px; color: #fff; font: 500 clamp(2.2rem,3.5vw,3.5rem)/1.18 'Playfair Display',Georgia,serif; }
.partner-login-image p { max-width: 400px; margin: 0; color: #f3ede7; font-size: 1rem; }
.partner-login-content { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 50px clamp(24px,6vw,90px) 25px; }
.partner-login-back { align-self: flex-end; margin-bottom: auto; color: #806425; font-size: .87rem; font-weight: 700; text-decoration: none; }
.partner-login-back:hover, .partner-login-join a:hover { text-decoration: underline; }
.partner-login .karte { width: min(100%,430px); margin: auto 0; padding: 20px 0 28px; border: 0; border-radius: 0; }
.partner-login h1 { margin: 0 0 9px; font: 500 clamp(2.15rem,3vw,3rem)/1.18 'Playfair Display',Georgia,serif; }
.partner-login-lead { margin: 0 0 30px; color: var(--text-hell); }
.partner-login-field { margin-bottom: 20px; }
.partner-login label { margin-bottom: 7px; color: var(--anthrazit); font-size: .85rem; font-weight: 700; }
.partner-login input { height: 50px; padding: 10px 14px; border: 1px solid #d8d0c7; font: 400 .95rem 'Lato',Arial,sans-serif; }
.partner-login input:focus-visible { outline: 2px solid #806425; outline-offset: 1px; border-color: #806425; }
.partner-login #form-anmeldung .knopf { justify-content: center; width: 100%; min-height: 51px; margin-top: 5px; border-color: var(--gold); border-radius: 8px; color: var(--anthrazit); font: 700 .95rem 'Lato',Arial,sans-serif; }
.partner-login #form-anmeldung .knopf:hover { color: #fff; }
.partner-login-join { margin: 26px 0 0; padding-top: 24px; border-top: 1px solid var(--linie); font-size: .88rem; }
.partner-login-join a { color: #806425; font-weight: 700; }
.partner-login-legal { display: flex; flex-wrap: wrap; align-self: stretch; justify-content: center; gap: 8px 20px; margin-top: auto; color: var(--text-hell); font-size: .76rem; }
.partner-login-legal a { color: #806425; }
.partner-login-mobile-logo { display: none; }
.kopf-marke { display: flex; align-items: center; gap: 14px; margin-right: auto; }
.kopf-marke img { display: block; width: 82px; height: auto; filter: brightness(0) invert(.2); }
.kopf-marke .kopf-titel { margin: 0; }
@media (max-width: 800px) {
  .partner-login { display: block; min-height: 100vh; background: var(--cream); }
  .partner-login-image { display: none; }
  .partner-login-content { min-height: 100vh; padding: 22px 22px 26px; }
  .partner-login-mobile-logo { display: block; align-self: flex-start; width: 135px; margin-bottom: 10px; }
  .partner-login-mobile-logo img { width: 100%; height: auto; filter: brightness(0) invert(.2); }
  .partner-login-back { margin: 0 0 16px; }
  .partner-login .karte { width: min(100%,480px); margin: auto 0; padding: 28px 23px; border: 1px solid var(--linie); border-radius: 11px; box-shadow: 0 12px 35px #45382c0c; }
  .partner-login-legal { margin-top: 24px; }
}