/* CSS Document */
/* definiert die Variablen für css */
:root {
  --pb-color-complement-1: #999A9A;        
  --pb-color-secondary-1-1: #918CA2;
  --pb-primary-color: #3498db;
  --pb-font-family-serif:       Georgia, "Times New Roman", Times, serif;
  --pb-font-family-sans-serif:  "Arial, Microsoft YaHei","Helvetica Neue", Helvetica,  sans-serif;
  --pb-font-family-monospace:   Menlo, Monaco, Consolas, "Courier New", monospace;
  --pb-font-family-base:        var(--pb-font-family-sans-serif);
  --pb-font-size-base:          14px;
  /* Schriftgrößen */
  --pb-font-size-xs: 0.75rem;  /* 12px */
  --pb-font-size-small:         var(--pb-font-size-xs);
  --pb-font-size-sm: 0.875rem; /* 14px */
  --pb-font-size-md: 1rem;     /* 16px (Standard) */
  --pb-font-size-lg: 1.25rem;  /* 20px */
  --pb-font-size-large:         var(--pb-font-size-lg);
  --pb-font-size-xl: 1.5rem;   /* 24px */
  --pb-font-size-xxl: 2rem;    /* 32px */
  --pb-font-size-h1: calc(var(--pb-font-size-base) * 2.5);
  --pb-font-size-h2: calc(var(--pb-font-size-base) * 2);
  --pb-font-size-h3: calc(var(--pb-font-size-base) * 1.75);
  --pb-font-size-h4: calc(var(--pb-font-size-base) * 1.5);
  --pb-font-size-h5: calc(var(--pb-font-size-base) * 1.25);
  --pb-font-size-h6: calc(var(--pb-font-size-base) * 1);
  --pb-font-size-large:         var(--pb-font-size-lg);
  --pb-headings-line-height:    1.1;
/* Schriftarten */
  --pb-font-heading: 'Roboto Slab', serif;
  --pb-font-monospace: 'Courier New', monospace;

  --pb-display-breite: 80%;              

  --pb-body-bg: #9BBDAD;              /* alte Werte */
  --pb-wrapper-bg: #FFCC33;
  --pb-container-bg: #BCD3CA;

  --pb-body-bg: var(--hb-pink);
  --pb-wrapper-bg: var(--hb-pink);
  --pb-container-bg: #FDFCF8;   /* 253 252 248 hellgelb heike*/
  /* von mir #fef6d6  254 246 214 */
  /* --pb-container-bg: #fef6d6;   253 252 248 gelb von mir */

  --pb-spacing: 1rem;
  --pb-main-bg: lightgray;
  --pb-text-color:             #494949;
  --pb-link-color: var(--pb-text-color);
  --pb-link-color-bg:         var(--pb-container-bg);
  --pb-border-color:             var(--pb-body-bg);
/* Link hover color set function. Diese Funktion erzeugt eine neue Farbe, die zu 85 % aus deiner Basisfarbe --pb-text-color und zu 85 % aus Schwarz besteht. */
  --pb-link-hover-color: color-mix(in srgb, var(--pb-text-color) 85%, black);
  --pb-link-hover-color-bg:      var(--pb-color-complement-1);
/* Navi-link */
  --pb-link-color-navigation-bg:         var(--pb-container-bg);
  --pb-link-color-navigation: gray;
  --pb-component-active-bg: var(--pb-color-complement-1);

/* Link hover color set via `darken()` function. */
  --pb-link-hover-color-navigation:      var(--pb-var(--pb-component-active-color));
  --pb-link-hover-color-navigation-bg:   var(--pb-color-complement-1);
    /* Global color for active items (e.g., navs or dropdowns). */
  --pb-component-active-color:    var(--pb-text-color);
  --pb-table-bg-accent:               #f9f9f9;
/* Link hover color set function. Diese Funktion erzeugt eine neue Farbe, die zu 10 % aus deiner Basisfarbe --pb-container-bg und zu 10 % aus Schwarz besteht. */

  --pb-header-navi-bg:      color-mix(in srgb, var(--pb-container-bg) 10%, black);
  --pb-header-navi-item-bg:      var(--pb-body-bg);

/* von mir #fce4f1 252 228 241 */
  --hb-pink: #fdd3ea;   /* 253 211 234 */
  --hb-pink: #fce4f1;   /* 253 211 234 */
  --hb-pink: #E5C7D0;   /* 253 211 234 */
  --hb-arikel-img-border: #fdd3ea;
  --hb-arikel-img-border-outline: #fff;
  --hb-arikel-img-border: var(--bs-gray-600);
}