/* ==========================================================================
   ahrens-marketing.de, globales CSS für Kadence
   Ziel: Design > Custom CSS, Plugin SiteOrigin CSS
   Erstellt: 23. August 2026

   Herkunft der Werte
   Farben und Schriften stammen aus den Designreferenzen
   "AI-Mentorix Design System (Standalone).html" und
   "AI-Mentorix Website (Standalone).html".

   Entscheidungen von Carel vom 23. August 2026
   1. Das blaue Mentorix-Farbsystem wird auf die Dachmarke übernommen.
      Die frühere Abgrenzungsentscheidung zugunsten von Papier und Rost
      ist damit aufgehoben.
   2. Inhaltsbreite 1290 Pixel durchgehend. Der Skill
      wordpress-webdesign-global nennt 1200 Pixel als Regelwert. Diese
      Abweichung ist eine ausdrückliche Entscheidung von Carel.

   Zwei Korrekturen gegenüber der Referenz, aus Kontrastgründen
   1. --muted #737b85 erreicht auf Papier nur 3,68 zu 1 und ist damit für
      Fließtext unzulässig. Korrigiert auf #656c75, gemessen 4,56 zu 1.
   2. --blue #3f7cc4 erreicht auf Papier nur 3,69 zu 1. Es wird deshalb
      ausschließlich als Fläche und Akzent verwendet, niemals als
      Textfarbe auf hellem Grund. Für Text und Links auf hell gilt
      #1d4585, gemessen 8,04 zu 1.

   Alle Kontraste sind gerechnet, nicht geschätzt. Die Werte stehen als
   Kommentar an der jeweiligen Regel.
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Farbpalette
   Kadence steuert das gesamte Theme über --global-palette1 bis 9. Diese
   Variablen zu überschreiben ist der native Weg. Dadurch übernehmen auch
   Blöcke, Header, Footer und Formulare die Farben automatisch.

   Kein Wert ist reines Weiß oder reines Schwarz.
   -------------------------------------------------------------------------- */

:root,
body {
  --global-palette1: #1d4585;  /* Blau tief. Primärfarbe, Links, Buttons     */
  --global-palette2: #3f7cc4;  /* Blau. Nur Fläche und Akzent, nie Text hell */
  --global-palette3: #23272d;  /* Anthrazit. Überschriften und dunkle Bänder */
  --global-palette4: #33383f;  /* Fließtext auf hellem Grund                 */
  --global-palette5: #656c75;  /* Sekundärtext, korrigiert auf 4,56 zu 1     */
  --global-palette6: #d3dbe8;  /* Linien und Rahmen                          */
  --global-palette7: #e9eef6;  /* Papier, helle Sektionsfläche               */
  --global-palette8: #f6f9fd;  /* Kartenfläche                               */
  --global-palette9: #fbfcfe;  /* Hellste Fläche, bewusst kein reines Weiß   */

  /* Ergänzende Markenwerte ohne eigenen Kadence-Slot */
  --am-blue-bright: #5a8fd0;   /* Nur Fläche und große Schrift               */
  --am-blue-ink:    #143160;   /* Hover für Blau tief                        */
  --am-blue-soft:   #e6effb;   /* Sehr helle Blaufläche                      */
  --am-dark-2:      #2c3138;   /* Abgesetzte Fläche im dunklen Band          */
  --am-dark-3:      #363c44;   /* Rahmen im dunklen Band                     */
  --am-link-on-dark: #7aa8dc;  /* Links im dunklen Band, 6,05 zu 1           */
  --am-line-2:      #c2ccdd;
  --am-radius:      8px;
}


/* --------------------------------------------------------------------------
   2. Inhaltsbreite und Innenabstand

   Außenflächen laufen über die volle Browserbreite. Der Inhalt ist
   zentriert und auf 1290 Pixel begrenzt. Das seitliche Padding wird über
   einen einzigen Wert gesteuert, nicht mehrfach verteilt.
   -------------------------------------------------------------------------- */

:root {
  --global-content-width: 1290px;
  --global-content-narrow-width: 842px;
  --global-content-edge-padding: 0px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (max-width: 1329.98px) {
  :root {
    --global-content-edge-padding: 20px;
  }
}


/* --------------------------------------------------------------------------
   3. Schriften und Größen

   Fließtext Barlow, Gewicht 300 bis 400.
   Überschriften Roboto Slab, Gewicht 500 bis 700, H1 in 700.

   Die Skala skaliert fließend über clamp und legt keine festen Stufen an
   mehreren Breakpoints an. Grundlage ist eine Wurzelgröße von 16 Pixeln,
   auf der Live-Seite gemessen.

   Voraussetzung: Barlow und Roboto Slab müssen tatsächlich geladen werden.
   Das ist zum Zeitpunkt der Erstellung nicht der Fall, siehe Hinweis am
   Ende dieser Datei.
   -------------------------------------------------------------------------- */

:root {
  --am-font-body: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  --am-font-head: "Roboto Slab", Georgia, "Times New Roman", serif;

  --am-text-body: clamp(1.125rem, 1.0714rem + 0.2381vw, 1.25rem);   /* 18 - 20 */
  --am-text-h1:   clamp(2.625rem, 1.8214rem + 3.5714vw, 4.5rem);    /* 42 - 72 */
  --am-text-h2:   clamp(2.125rem, 1.5357rem + 2.619vw,  3.5rem);    /* 34 - 56 */
  --am-text-h3:   clamp(1.75rem,  1.375rem  + 1.6667vw, 2.625rem);  /* 28 - 42 */
  --am-text-h4:   clamp(1.5rem,   1.2857rem + 0.9524vw, 2rem);      /* 24 - 32 */
  --am-text-h5:   clamp(1.3125rem,1.1786rem + 0.5952vw, 1.625rem);  /* 21 - 26 */
  --am-text-h6:   clamp(1.125rem, 1.0179rem + 0.4762vw, 1.375rem);  /* 18 - 22 */
  --am-text-klein: clamp(0.9375rem, 0.9063rem + 0.15vw, 1rem);      /* 15 - 16 */
}

body,
.entry-content,
.content-container {
  font-family: var(--am-font-body);
  font-size: var(--am-text-body);
  font-weight: 400;
  line-height: 1.6;
  color: var(--global-palette4);
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
  font-family: var(--am-font-head);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  color: var(--global-palette3);
}

h1 { font-size: var(--am-text-h1); font-weight: 700; line-height: 1.08; }
h2 { font-size: var(--am-text-h2); line-height: 1.12; }
h3 { font-size: var(--am-text-h3); line-height: 1.18; }
h4 { font-size: var(--am-text-h4); line-height: 1.25; }
h5 { font-size: var(--am-text-h5); font-weight: 500; line-height: 1.30; }
h6 { font-size: var(--am-text-h6); font-weight: 500; line-height: 1.40; }

/* Ruhiger Begleittext in großer Schrift.
   Gewicht 400 statt der vorgesehenen 300.
   Grund: Kadence liefert Barlow 300 auf dieser Seite nicht aus. Ein
   deklariertes 300 hätte der Browser ohnehin als 400 dargestellt.
   Nachrüstbar, sobald ein global aktives Kadence-Setting den Schnitt 300
   anfordert. Am 23. August 2026 im Frontend geprüft. */
.am-lead {
  font-size: clamp(1.25rem, 1.1438rem + 0.48vw, 1.5rem);  /* 20 - 24 */
  font-weight: 400;
  line-height: 1.5;
  max-width: 62ch;
}

/* Kicker über einer Überschrift */
.am-kicker {
  font-family: var(--am-font-body);
  font-size: var(--am-text-klein);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 1rem;
  color: var(--global-palette1);
}


/* --------------------------------------------------------------------------
   4. Sektionsflächen

   Die Textfarbe wird aus 90 Prozent Weiß beziehungsweise Schwarz und
   10 Prozent der tatsächlichen Hintergrundfarbe gemischt. Reines Weiß und
   reines Schwarz dienen ausschließlich als Mischquelle und werden nie
   direkt ausgegeben.
   -------------------------------------------------------------------------- */

.am-flaeche {
  width: 100%;
}

/* Papier, gemessen 15,26 zu 1 */
.am-flaeche--papier {
  --am-bg: var(--global-palette7);
  background-color: var(--am-bg);
  color: color-mix(in srgb, #000000 90%, var(--am-bg) 10%);
}

/* Karte, gemessen 16,65 zu 1 */
.am-flaeche--karte {
  --am-bg: var(--global-palette8);
  background-color: var(--am-bg);
  color: color-mix(in srgb, #000000 90%, var(--am-bg) 10%);
}

/* Anthrazit, gemessen 12,37 zu 1 */
.am-flaeche--dunkel {
  --am-bg: var(--global-palette3);
  background-color: var(--am-bg);
  color: color-mix(in srgb, #ffffff 90%, var(--am-bg) 10%);
}

/* Blau tief, gemessen 7,90 zu 1 */
.am-flaeche--blau {
  --am-bg: var(--global-palette1);
  background-color: var(--am-bg);
  color: color-mix(in srgb, #ffffff 90%, var(--am-bg) 10%);
}

/* Überschriften erben die getönte Sektionsfarbe, statt Anthrazit zu behalten */
.am-flaeche--dunkel :is(h1, h2, h3, h4, h5, h6),
.am-flaeche--blau   :is(h1, h2, h3, h4, h5, h6) {
  color: inherit;
}

.am-flaeche--dunkel .am-kicker,
.am-flaeche--blau .am-kicker {
  color: inherit;
  opacity: 0.78;
}

/* Vertikaler Innenabstand der Sektionen, fließend */
.am-flaeche > * {
  padding-block: clamp(3.5rem, 2.25rem + 5vw, 6.5rem);
}


/* --------------------------------------------------------------------------
   5. Links

   Auf hellem Grund gilt Blau tief mit 8,04 zu 1. Das mittlere Blau
   #3f7cc4 wird hier bewusst nicht verwendet, es erreicht nur 3,69 zu 1.
   -------------------------------------------------------------------------- */

.entry-content a:not(.kt-button):not(.wp-block-button__link) {
  color: var(--global-palette1);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
  transition: color 140ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.entry-content a:not(.kt-button):not(.wp-block-button__link):hover {
  color: var(--am-blue-ink);
}

/* Im dunklen und im blauen Band, gemessen 6,05 zu 1 auf Anthrazit */
.am-flaeche--dunkel a:not(.kt-button):not(.wp-block-button__link),
.am-flaeche--blau a:not(.kt-button):not(.wp-block-button__link) {
  color: var(--am-link-on-dark);
}

/* Sichtbarer Fokus, Anforderung der Barrierefreiheit */
a:focus-visible,
button:focus-visible,
.kt-button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 3px solid var(--global-palette1);
  outline-offset: 2px;
}

.am-flaeche--dunkel a:focus-visible,
.am-flaeche--blau a:focus-visible {
  outline-color: var(--am-blue-soft);
}


/* --------------------------------------------------------------------------
   6. Buttons
   -------------------------------------------------------------------------- */

.wp-block-button__link,
.kt-button.kt-btn-style-basic,
input[type="submit"],
button[type="submit"] {
  font-family: var(--am-font-body);
  font-weight: 600;
  font-size: var(--am-text-body);
  line-height: 1.2;
  min-height: 48px;              /* Mindestgröße für Berührungsziele */
  padding: 14px 26px;
  border-radius: var(--am-radius);
  background-color: var(--global-palette1);
  /* Auf Blau tief gemischt, gemessen 7,90 zu 1 */
  color: color-mix(in srgb, #ffffff 90%, var(--global-palette1) 10%);
  text-decoration: none;
  border: 0;
  transition: background-color 140ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.wp-block-button__link:hover,
.kt-button.kt-btn-style-basic:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
  background-color: var(--am-blue-ink);
  color: color-mix(in srgb, #ffffff 90%, var(--am-blue-ink) 10%);
}

/* Auf dunklem Grund kehrt sich der Button um */
.am-flaeche--dunkel .wp-block-button__link,
.am-flaeche--dunkel .kt-button.kt-btn-style-basic {
  background-color: var(--global-palette7);
  color: color-mix(in srgb, #000000 90%, var(--global-palette7) 10%);
}

.am-flaeche--dunkel .wp-block-button__link:hover,
.am-flaeche--dunkel .kt-button.kt-btn-style-basic:hover {
  background-color: var(--am-blue-soft);
}


/* --------------------------------------------------------------------------
   7. Flächen, Linien, Formulare
   -------------------------------------------------------------------------- */

hr,
.wp-block-separator {
  border: 0;
  border-top: 1px solid var(--global-palette6);
  opacity: 1;
}

.am-flaeche--dunkel hr,
.am-flaeche--dunkel .wp-block-separator {
  border-top-color: var(--am-dark-3);
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  font-family: var(--am-font-body);
  font-size: var(--am-text-body);
  color: var(--global-palette4);
  background-color: var(--global-palette9);
  border: 1px solid var(--global-palette6);
  border-radius: var(--am-radius);
  padding: 12px 14px;
  min-height: 48px;
  width: 100%;
}

input::placeholder,
textarea::placeholder {
  color: var(--global-palette5);   /* 4,56 zu 1, ausreichend lesbar */
  opacity: 1;
}


/* --------------------------------------------------------------------------
   8. Kleinigkeiten
   -------------------------------------------------------------------------- */

/* Kein horizontaler Überlauf durch zu breite Einzelteile */
img,
video,
iframe,
table {
  max-width: 100%;
}

/* Bewegungsempfindliche Besucher */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ==========================================================================
   OFFENER PUNKT, bitte vor der Freigabe klären

   Barlow und Roboto Slab werden auf ahrens-marketing.de derzeit nicht
   geladen. Am 23. August 2026 im Frontend gemessen: eingebunden sind nur
   Teko, Roboto, Open Sans und eine Schrift des Plugins Rate My Post.

   Ohne Einbindung greift für Überschriften der Georgia-Fallback und für
   Fließtext die Systemschrift. Auf Carels eigenem Rechner fällt das nicht
   auf, wenn die Schriften dort installiert sind.

   Empfohlener Weg, ohne Dateizugriff:
   Design > Customizer > Typografie. Dort Roboto Slab für Überschriften und
   Barlow für den Fließtext wählen und in den Kadence-Performance-
   Einstellungen das lokale Ausliefern der Schriften aktivieren. Damit
   entstehen keine Aufrufe an Google-Server.

   Benötigte Schnitte:
   Barlow 300 und 400, Roboto Slab 500, 600 und 700.
   ========================================================================== */