/* ==========================================================================
   Die Streibls GmbH · Digitales Designsystem (Palette B, Logo NT · dezent)
   Farben, Typografie und Buttons wie im Designsystem definiert.
   Die Werte entsprechen den Bootstrap-5.3-Variablen in _streibls-variables.scss.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1 · Schriften
   Neue Kabel ExtraBold (Überschriften), Agenda One Medium und Bold (Text).
   Die Schriften liegen als .otf im Ordner fonts/ und werden vom eigenen
   Server ausgeliefert, ohne externe Dienste. Fehlen die Dateien, greifen
   die Ersatzschriften.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Neue Kabel";
  src: local("Neue Kabel ExtraBold"), local("NeueKabel-ExtraBold"),
       url("../fonts/NeueKabel-ExtraBold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agenda One";
  src: local("Agenda One Medium"), local("AgendaOne-Medium"),
       url("../fonts/AgendaOne-Medium.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Agenda One";
  src: local("Agenda One Bold"), local("AgendaOne-Bold"),
       url("../fonts/AgendaOne-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2 · Design-Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette B */
  --st-tiefsee: #0A1E3C;      /* $dark, $body-color */
  --st-ozean: #00508F;        /* $primary */
  --st-azur: #3D8FD1;         /* $secondary */
  --st-nebel: #E9F1F8;        /* helle Bänder */
  --st-signaltuerkis: #00E5A0;/* $accent, nie als Textfarbe auf Weiß */
  --st-light: #F2F7FB;        /* $light, Flächen und Sektionen */
  --st-white: #FFFFFF;        /* $body-bg */

  /* Abgeleitete Töne */
  --st-text-muted: #3E4C5E;   /* Fließtext gedämpft, 9,6 : 1 auf Weiß */
  --st-line: #E6EEF7;         /* Trennlinien */
  --st-ozean-hover: #00447A;  /* Primary 15 % abgedunkelt */
  --st-tiefsee-hover: #081A33;/* Dark 15 % abgedunkelt */
  --st-tuerkis-hover: #26E9AE;/* Accent 15 % aufgehellt */

  /* Bootstrap-Namen */
  --bs-primary: var(--st-ozean);
  --bs-secondary: var(--st-azur);
  --bs-dark: var(--st-tiefsee);
  --bs-light: var(--st-light);
  --bs-body-color: var(--st-tiefsee);
  --bs-body-bg: var(--st-white);

  /* Schrift */
  --st-font-head: "Neue Kabel", Futura, "Century Gothic", system-ui, -apple-system, "Segoe UI", sans-serif;
  --st-font-body: "Agenda One", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Layout */
  --st-container: 1320px;
  --st-gutter: clamp(20px, 5vw, 60px);
}

/* --------------------------------------------------------------------------
   3 · Basis und Typo-Skala (Bootstrap 5, ab 1200 px)
   h1 2.5rem · h2 2rem · h3 1.75rem: Neue Kabel ExtraBold
   h4 1.5rem · h5 1.25rem · h6 1rem: Agenda One Bold, h6 versal in Ozean
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--st-font-body);
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--st-tiefsee);
  background: var(--st-white);
}

h1, h2, h3, h4, h5, h6 { margin: 0 0 .5rem; line-height: 1.2; color: var(--st-tiefsee); }
h1, h2, h3 { font-family: var(--st-font-head); font-weight: 800; letter-spacing: -0.01em; }
h4, h5, h6 { font-family: var(--st-font-body); font-weight: 700; }
h1 { font-size: calc(1.375rem + 1.5vw); }
h2 { font-size: calc(1.325rem + .9vw); }
h3 { font-size: calc(1.3rem + .6vw); }
h4 { font-size: calc(1.275rem + .3vw); }
h5 { font-size: 1.25rem; }
h6 { font-size: 1rem; text-transform: uppercase; letter-spacing: .06em; color: var(--st-ozean); }
@media (min-width: 1200px) {
  h1 { font-size: 2.5rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.75rem; }
  h4 { font-size: 1.5rem; }
}

p { margin: 0 0 1rem; }
.lead { font-size: 1.25rem; }
small, .small { font-size: .875rem; color: var(--st-text-muted); }
strong, b { font-weight: 700; }
.text-primary { color: var(--st-ozean); }
mark, .mark {
  font-weight: 700;
  color: var(--st-tiefsee);
  padding: 0 .15em;
  background: linear-gradient(transparent 38%, var(--st-signaltuerkis) 38%);
}

a { color: var(--st-ozean); }
a:hover { color: var(--st-tiefsee); }
:focus-visible { outline: 3px solid var(--st-signaltuerkis); outline-offset: 3px; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Marken-Elemente */
.st-eyebrow {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--st-ozean);
}
.st-bar { width: 96px; height: 8px; background: var(--st-signaltuerkis); }

/* --------------------------------------------------------------------------
   4 · Buttons: ausgestanztes Eck (Winkel der Bildmarke N)
   Einsatz: class="btn btn-primary btn-cut" usw. Hover dunkle Buttons
   15 % dunkler, Accent 15 % heller, Outline wird gefüllt, deaktiviert 65 %.
   -------------------------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--st-font-body);
  font-weight: 700;
  font-size: .9375rem;
  line-height: 1.4;
  padding: .625rem 1.25rem;
  text-decoration: none;
  border: 0;
  cursor: pointer;
}
.btn-cut {
  border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), calc(100% - 14px) 100%, 0 100%);
}
.btn-sm.btn-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 6px), calc(100% - 10px) 100%, 0 100%); }
.btn-lg.btn-cut { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), calc(100% - 17px) 100%, 0 100%); }
.btn-sm { font-size: .8125rem; padding: .375rem .625rem; }
.btn-lg { font-size: 1.125rem; padding: .8125rem 1.125rem; }

.btn-primary { background: var(--st-ozean); color: var(--st-white); }
.btn-primary:hover { background: var(--st-ozean-hover); color: var(--st-white); }
.btn-dark { background: var(--st-tiefsee); color: var(--st-white); }
.btn-dark:hover { background: var(--st-tiefsee-hover); color: var(--st-white); }
.btn-accent { background: var(--st-signaltuerkis); color: var(--st-tiefsee); }
.btn-accent:hover { background: var(--st-tuerkis-hover); color: var(--st-tiefsee); }
.btn-outline-primary { background: transparent; color: var(--st-ozean); box-shadow: inset 0 0 0 1.5px var(--st-ozean); }
.btn-outline-primary:hover { background: var(--st-ozean); color: var(--st-white); }
.btn-link { background: none; color: var(--st-ozean); text-decoration: underline; text-decoration-color: var(--st-signaltuerkis); text-underline-offset: 4px; }
.btn-link:hover { color: var(--st-tiefsee); }
.btn:disabled, .btn.disabled { opacity: .65; pointer-events: none; }

/* --------------------------------------------------------------------------
   5 · Seitenaufbau: Header, Inhalt, Footer
   -------------------------------------------------------------------------- */
.st-page { min-height: 100vh; display: flex; flex-direction: column; }

.st-container {
  width: 100%;
  max-width: calc(var(--st-container) + 2 * var(--st-gutter));
  margin: 0 auto;
  padding-inline: var(--st-gutter);
}

.st-header { border-bottom: 1px solid var(--st-line); background: var(--st-white); }
.st-header .st-container {
  min-height: 88px;
  padding-block: 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  flex-wrap: wrap;
}
.st-logo { display: block; line-height: 0; }
.st-logo img { height: 44px; width: auto; }
.st-header a:not(.st-logo) { text-decoration: none; font-size: 1rem; }

.st-main { flex: 1; }

.st-footer { background: var(--st-tiefsee); color: var(--st-white); }
.st-footer .st-container {
  min-height: 140px;
  padding-block: 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
  flex-wrap: wrap;
}
.st-footer img { height: 38px; width: auto; display: block; }
.st-footer-meta { display: flex; align-items: center; gap: 16px 40px; flex-wrap: wrap; font-size: .9375rem; }
.st-footer-meta .st-copy { color: var(--st-azur); }
.st-footer a { color: var(--st-white); text-decoration: none; font-size: 1rem; }
.st-footer a:hover, .st-footer a[aria-current="page"] { color: var(--st-signaltuerkis); }

/* Hero der Aufbau-Seite mit angeschnittenem Signet */
.st-hero { position: relative; overflow: hidden; display: flex; align-items: center; min-height: 600px; }
.st-hero .st-container { position: relative; z-index: 1; padding-block: 96px; }
.st-hero-text { max-width: 720px; display: flex; flex-direction: column; gap: 28px; }
.st-hero h1 { margin: 0; font-size: clamp(2.5rem, 1.2rem + 4vw, 4.5rem); line-height: 1.08; }
.st-hero p { margin: 0; font-size: 1.25rem; line-height: 1.6; color: var(--st-text-muted); }
.st-hero-signet {
  position: absolute;
  right: -40px;
  top: 50%;
  transform: translateY(-50%);
  height: min(560px, 90%);
  width: auto;
  pointer-events: none;
}

/* Inhaltsseiten wie das Impressum */
.st-content { padding-block: 64px 96px; }
.st-content h1 { font-size: clamp(2.25rem, 1.4rem + 2.5vw, 3.5rem); line-height: 1.1; margin-bottom: 20px; }
.st-content .st-bar { margin-bottom: 40px; }
.st-columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; font-size: 1.0625rem; line-height: 1.6; color: var(--st-text-muted); }
.st-columns section { display: flex; flex-direction: column; gap: 10px; }
.st-columns h2 { font-family: var(--st-font-body); font-size: .8125rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--st-ozean); margin: 0; }
.st-columns h2 + p { margin-top: 0; }
.st-columns p { margin: 0; }
.st-columns p + h2 { margin-top: 14px; }

/* Längere Fließtexte wie die Datenschutzerklärung */
.st-prose { max-width: 760px; display: flex; flex-direction: column; gap: 40px; font-size: 1.0625rem; line-height: 1.6; color: var(--st-text-muted); }
.st-prose section { display: flex; flex-direction: column; gap: 12px; }
.st-prose h2 { font-size: 1.5rem; margin: 0; }
.st-prose p, .st-prose ul { margin: 0; }
.st-prose ul { padding-left: 1.25em; }
.st-prose strong { color: var(--st-tiefsee); }
.st-prose-meta { font-size: .9375rem; }

/* Tablet und Smartphone */
@media (max-width: 991.98px) {
  .st-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-hero-signet { right: -120px; }
}
@media (max-width: 767.98px) {
  .st-columns { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .st-hero { min-height: 0; flex-direction: column; align-items: stretch; }
  .st-hero .st-container { padding-block: 48px 0; }
  .st-hero-signet { position: static; transform: none; height: 220px; align-self: flex-end; margin: 24px -24px 0 0; }
  .st-logo img { height: 36px; }
  .st-footer .st-container { flex-direction: column; align-items: flex-start; }
}