/* === Diagramm-Fonts einbinden (GANZ OBEN EINSETZEN) === */
@font-face {
  font-family: "Diagramm";
  src: url("/fonts/Diagramm-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Diagramm";
  src: url("/fonts/Diagramm-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* === Rest deines bisherigen CSS === */
body { font-size: 0.95rem; }
.max-h-240 { max-height: 240px; }
.overflow-auto { overflow: auto; }
button { color: #FC6737; }


/* 2) Basis-Zuordnung & Styles */
:root {
  /* Inter bleibt Fallback, Diagramm ist jetzt die Hauptschrift */
  --font-sans: "Diagramm", "Inter", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji";
  --color-primary: #FC6737;
}

html, body { background: #fff; }

body {
  font-family: var(--font-sans);
  font-size: 11pt;
  color: #000;
}

/* Headings: Diagramm Bold */
h1, h2, h3, h4, h5, h6 {
  font-family: "Diagramm", var(--font-sans);
  font-weight: 700;
  color: #000;
}

/* Untertitel */
.subtitle {
  font-family: "Diagramm", var(--font-sans);
  font-weight: 700;
  color: #FC6737;
}

/* Buttons (breit gefasst, damit es greift) */
button,
.button,
.btn,
[type="button"],
[type="submit"],
[role="button"] {
  background-color: #FC6737;
  border-color: #FC6737;
  color: #fff;
}

/* === Header / Topbar vollflächig einfärben === */
header,
.header,
.topbar,
.navbar,
.navbar-dark,
.navbar.bg-dark,
.navbar-inverse,
.navbar-fixed-top {
  background: #FC6737 !important;    
  background-image: none !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Header an Container (72rem) ausrichten */
:root { 
  --header-align-max: 82rem;   /* gleiche Breite wie dein .container */
  --header-side-gap: 1rem;     /* Mindestabstand am Rand auf kleinen Screens */
}
header, .header, .topbar, .navbar {
  padding-left:  max(var(--header-side-gap), calc((100vw - var(--header-align-max)) / 2)) !important;
  padding-right: max(var(--header-side-gap), calc((100vw - var(--header-align-max)) / 2)) !important;
}

#r4ylogo {
  height: 40px;
  width: auto;
  display: block;
}