/*
 * Entwicklerportal im ClubCoPilot-Design (docs/styleguide.md): gleiche Farb- und Formtokens wie Verwaltung und
 * Marketingseite, Plus Jakarta Sans selbst gehostet, Petrol als Markenfarbe, Amber nur im Logo-Punkt.
 * Nur hell (kein Dunkelmodus), WCAG 2.2 AA: Kontrast, Fokus, Klickziele, prefers-reduced-motion.
 */
:root {
  --ccp-bg: #f6f7f8;
  --ccp-surface: #ffffff;
  --ccp-surface-2: #f1f3f4;
  --ccp-line: #e3e6e8;
  --ccp-text: #1d2327;
  --ccp-muted: #5b6670;
  --ccp-accent: #0f766e;
  --ccp-accent-hover: #115e59;
  --ccp-accent-soft: #eaf4f2;
  --ccp-accent-light: #5eead4;
  --ccp-amber: #f59e0b;
  --ccp-sb: #1f2629;
  --ccp-sb-text: #c8d0d4;
  --ccp-radius-sm: 7px;
  --ccp-radius: 9px;
  --ccp-radius-lg: 12px;
  --ccp-shadow: 0 1px 2px rgba(16, 24, 40, .05);
  --ccp-shadow-hover: 0 4px 14px -4px rgba(16, 24, 40, .14);
  --ccp-font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --ccp-dur: .15s;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--ccp-bg);
  color: var(--ccp-text);
  font: 15px/1.5 var(--ccp-font);
}

a { color: var(--ccp-accent); text-underline-offset: 2px; }
a:hover { color: var(--ccp-accent-hover); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--ccp-accent-light);
  outline-offset: 2px;
  border-radius: var(--ccp-radius-sm);
}

.rahmen { max-width: 1000px; margin: 0 auto; padding: 0 16px; }

/* Kopf: dunkel wie die Sidebar, Logo mit Amber-Punkt, Hauptknopf in Petrol */
.kopf { background: var(--ccp-sb); border-bottom: 1px solid rgba(255, 255, 255, .08); }
.kopf .rahmen { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
.marke { display: inline-flex; align-items: center; gap: 9px; font-weight: 800; letter-spacing: -.02em; text-decoration: none; color: #fff; }
.marke::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--ccp-amber); flex: none; }
.marke span { color: var(--ccp-sb-text); font-weight: 500; letter-spacing: 0; }
.kopf a { color: var(--ccp-sb-text); }
.kopf a:hover { color: #fff; }
nav { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; }
nav a { text-decoration: none; min-height: 24px; padding: 4px 0; }
.knopf, .kopf a.knopf {
  background: var(--ccp-accent);
  color: #fff;
  padding: 8px 16px;
  border-radius: var(--ccp-radius-sm);
  font-weight: 600;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background var(--ccp-dur);
}
.knopf:hover, .kopf a.knopf:hover { background: var(--ccp-accent-hover); color: #fff; }

main section { padding: 28px 0; border-bottom: 1px solid var(--ccp-line); }
main section:last-child { border-bottom: 0; }
h1 { font-size: 1.9rem; line-height: 1.2; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
h2 { font-size: 1.25rem; font-weight: 800; letter-spacing: -.02em; margin: 0 0 12px; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 6px; }

pre {
  background: var(--ccp-sb);
  color: #e6ecee;
  border-radius: var(--ccp-radius);
  padding: 14px 16px;
  overflow-x: auto;
}
code { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: .92em; }
:not(pre) > code { background: var(--ccp-surface-2); border: 1px solid var(--ccp-line); border-radius: 5px; padding: 1px 5px; }
pre em { color: var(--ccp-accent-light); font-style: normal; }

.karten { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.karte {
  background: var(--ccp-surface);
  border: 1px solid var(--ccp-line);
  border-radius: var(--ccp-radius-lg);
  box-shadow: var(--ccp-shadow);
  padding: 16px;
  height: 100%;
  transition: box-shadow var(--ccp-dur);
}
.karte:hover { box-shadow: var(--ccp-shadow-hover); }
.pfad { color: var(--ccp-muted); margin-bottom: 0; }

table { width: 100%; border-collapse: collapse; background: var(--ccp-surface); border-radius: var(--ccp-radius); overflow: hidden; }
caption { text-align: left; color: var(--ccp-muted); padding-bottom: 6px; }
th { font-size: .8125rem; font-weight: 600; background: var(--ccp-surface-2); }
th, td { text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--ccp-line); vertical-align: top; }
td { font-variant-numeric: tabular-nums; }

.fuss { padding: 24px 0; color: var(--ccp-muted); font-size: .8125rem; }

/* Swagger UI (API-Referenz): Schrift, Farben und Knöpfe an das Design angleichen */
#referenz { max-width: 1100px; margin: 0 auto; padding: 8px 16px 40px; }
.swagger-ui, .swagger-ui .info .title, .swagger-ui .opblock-tag, .swagger-ui .opblock .opblock-summary-path,
.swagger-ui .btn, .swagger-ui table thead tr th, .swagger-ui .parameter__name, .swagger-ui .tab li {
  font-family: var(--ccp-font);
}
.swagger-ui .info .title { font-weight: 800; letter-spacing: -.02em; color: var(--ccp-text); }
.swagger-ui .info a, .swagger-ui a.nostyle { color: var(--ccp-accent); }
.swagger-ui .opblock-tag { border-bottom: 1px solid var(--ccp-line); color: var(--ccp-text); }
.swagger-ui .btn { border-radius: var(--ccp-radius-sm); }
.swagger-ui .btn.authorize { color: var(--ccp-accent); border-color: var(--ccp-accent); background: transparent; }
.swagger-ui .btn.authorize svg { fill: var(--ccp-accent); }
.swagger-ui .btn.execute { background: var(--ccp-accent); border-color: var(--ccp-accent); color: #fff; }
.swagger-ui .btn.execute:hover { background: var(--ccp-accent-hover); }
.swagger-ui .opblock { border-radius: var(--ccp-radius); box-shadow: var(--ccp-shadow); }
.swagger-ui .opblock.opblock-get { background: var(--ccp-accent-soft); border-color: var(--ccp-accent); }
.swagger-ui .opblock.opblock-get .opblock-summary-method { background: var(--ccp-accent); }
.swagger-ui .opblock.opblock-get .opblock-summary { border-color: var(--ccp-accent); }
.swagger-ui .scheme-container { box-shadow: none; border-bottom: 1px solid var(--ccp-line); background: var(--ccp-bg); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}