:root {

  --margin-bottom-block-rem: 3rem;
  --weiss-fff: 255, 255, 255;
  --fast-weiss-f9fcef: 249, 252, 239;
  --highlight-blau-1d84c3: 29, 132, 192;
  --hightlight-color-10-prozent-auf-eee: 217, 227, 234; /* #1d84c3 (rgb 29,132,195)x0,1 + #eee für Hintergrund = D9E3EA */
  --tab-button-blau-3d7489: 61, 116, 137;
  --dunkelblau-00001e: 0, 0, 30;
  --mittelblau-3f576f: 63, 87, 111;
  --dunkelgrau-292929: 41, 41, 41;
  --grau-888: 136, 136, 136;
  --grau-666: 102, 102, 102;
  --grau-555: 85, 85, 85;
  --hellgrau-eee: 238, 238, 238;
  --hellgrau-ccc: 204, 204, 204;

/*
  --blue: #007bff;
  --indigo: #6610f2;
  --purple: #6f42c1;
  --pink: #e83e8c;
  --red: #dc3545;
  --orange: #fd7e14;
  --yellow: #ffc107;
  --green: #28a745;
  --teal: #20c997;
  --cyan: #17a2b8;
  --white: #ffffff;
  --gray: #707070;

  --primary: #abc83a;
  --secondary: #d8dbdd;

  --success: #1c871e;
  --info: #525252;
  --warning: #f39932;
  --danger: #b90000;

  --light: #f6f6f6;
  --dark: #525252;
  --gray: #707070;
  --gray-light: #f6f6f6;
  --gray-medium: #e5e5e5;
  --gray-dark: #9b9b9b;
  --gray-darker: #525252;
*/
/*
--breakpoint-xs: 0;
--breakpoint-sm: 576px;
--breakpoint-md: 768px;
--breakpoint-lg: 992px;
--breakpoint-xl: 1300px;

--breakpoint-xs: 0;
--breakpoint-sm: 40rem;
--breakpoint-md: 60rem;
--breakpoint-lg: 90rem;
--breakpoint-xl: 120rem;
*/

  --body-background-color: rgb(var(--hellgrau-eee));

  --border-width: 1px;

  --text-font-family-normal: 'Arial Narrow';
  --text-font-family-normal: 'Open Sans Condensed';
/*
  --text-font-family-normal: 'Arial Narrow';
*/
  --text-font-family-header: 'Playfair Display';
  --text-font-family-header: 'Inspiration';
  --text-font-family-header: 'Kite One';
  --text-font-family-header: 'Open Sans Condensed';
  --text-font-family-header: var(--text-font-family-normal);
/*  --text-font-family-h1: 'Kite One';*/
  --text-font-family-h1: 'Inspiration';
  --text-font-family-h1: 'Dancing Script';
  --text-font-family-h1: var(--text-font-family-header);
  --text-font-family-bildbeschriftung: 'Kite One';
  --text-font-family-handschrift: Calligraffiti;
  --text-font-family-handschrift: 'Dancing Script';
  --text-font-family-handschrift: 'Kite One';
  /* --text-font-size-normal: 1.2rem/100%;/* NICHT! Browser macht daraus 120% von irgendwas, was viel zu klein ist */
  --text-font-size-normal: 1.1rem;
  --text-font-size-h1: 150%;
  --text-font-size-normal-print: 1rem;
  --text-font-size-h1-print: 1.5rem;
  --line-height-normal:130%;
  --line-height-h1:130%;
  --text-color: rgb(var(--grau-555));
  --highlight-color: rgb(var(--highlight-blau-1d84c3));
  --tab-button-color: rgb(var(--grau-666));
  /*--tab-button-color-fokus: rgb(var(--dunkelblau-00001e));*/ /* zu dunkel */
  /* zu grell? --tab-button-color-fokus: rgb(var(--mittelblau-3f576f)); */
  /* gut: --tab-button-color-fokus: rgb(var(--tab-button-blau-3d7489));*/
  --tab-button-color-fokus: rgb(var(--tab-button-blau-3d7489));
  --tab-button-background-color-fokus: rgb(var(--hightlight-color-10-prozent-auf-eee));  
}

/* auch @media print */
body {
/* in html nur rm, deshalb hier Breite Body! */

  --breite-body-px:calc(100vw - 0 * 1px);
  --breite-body-rem:calc(100vw - 0 * 0.1em);
  --breite-body-cm:calc(100vw - 0 * 0.1cm);
  --pixel-pro-rem:16;
  /* geht das überhaupt, Berechnungen mit rem und px? */
  --pixel-pro-rem:cal(var(--breite-body-px) / var(--breite-body-rem));
  --cm-pro-rem:cal(var(--breite-body-cm) / var(--breite-body-rem));

  --blockversatz-rem:0rem;

  --margin-ganz-links-rem: 0rem;

  --breite-linke-spalte-rem: var(--breite-body-rem);
  --breite-rechte-spalte-rem: 0rem;
  --padding-mittlere-spalte-links-oE:calc(2 / 100);
  --padding-mittlere-spalte-rechts-oE:calc(2 / 100);

  --hr-color:rgb(var(--hellgrau-ccc));
  --box-border-color: rgb(var(--dunkelblau-00001e));
  --box-border-style: solid;
  --box-border-width: 1px;
  --box-shadow-x: 1px;
  --box-shadow-y: 1px;
  --box-shadow-blur: 3px;
  --box-shadow-color: rgb(var(--dunkelblau-00001e));


  --input-border-color: rgb(var(--fast-weiss-f9fcef));
  --input-text-shadow-x: 1px;
  --input-text-shadow-y: 1px;
  --input-text-shadow-blur: 1px;
  --input-text-shadow-color: rgba(var(--weiss-fff), 0.8);

}

@media screen and (min-width:40rem) {
  body {
    --blockversatz-rem:1.5rem;

    --margin-ganz-links-rem: 0rem;
    --breite-linke-spalte-rem:18rem;
    --breite-rechte-spalte-rem:0rem;

    --padding-mittlere-spalte-links-oE:calc(2 / 100);
    --padding-mittlere-spalte-rechts-oE:calc(2 / 100);
  }
}
@media screen and (min-width:60rem) {

  body {
    --blockversatz-rem:1.5rem;

    --margin-ganz-links-rem:var(--blockversatz-rem);
    --breite-linke-spalte-rem:18rem;
    --breite-rechte-spalte-rem:0rem;

    --padding-mittlere-spalte-links-oE:calc(3 / 100);
    --padding-mittlere-spalte-rechts-oE:calc(3 / 100);
  }
}
@media screen and (min-width:90rem) {

  body {
    --blockversatz-rem:1.5rem;
    --breite-linke-spalte-rem:18rem;
    --breite-rechte-spalte-rem:0rem;

    --margin-ganz-links-rem:calc(2 * var(--blockversatz-rem));

    --padding-mittlere-spalte-links-oE:calc(5 / 100);
    --padding-mittlere-spalte-rechts-oE:calc(5 / 100);
  }

  body.user-logged-in {
    --padding-mittlere-spalte-links-oE:calc(3 / 100);
    --padding-mittlere-spalte-rechts-oE:calc(3 / 100);
    --breite-rechte-spalte-rem:18rem;
  }
}


/* auch @media print */
body {
    --margin-links-zur-mittleren-spalte-hin-rem: calc(2 * var(--blockversatz-rem));

    --breite-mittlere-spalte-rem:calc(var(--breite-body-rem) - var(--margin-ganz-links-rem) - var(--breite-linke-spalte-rem) - var(--margin-links-zur-mittleren-spalte-hin-rem) - var(--breite-rechte-spalte-rem));
    --breite-mittlere-spalte-px: calc(var(--breite-mittlere-spalte-rem) * var(--pixel-pro-rem));
    --breite-mittlere-spalte-px: calc(var(--breite-mittlere-spalte-rem) * var(--cm-pro-rem));

    --padding-mittlere-spalte-links-prozent:calc(var(--padding-mittlere-spalte-links-oE) * 100%);
    --padding-mittlere-spalte-rechts-prozent:calc(var(--padding-mittlere-spalte-rechts-oE) * 100%);
    --padding-mittlere-spalte-links-rem:calc(var(--padding-mittlere-spalte-rechts-oE) * var(--breite-mittlere-spalte-rem));
    --padding-mittlere-spalte-rechts-rem:calc(var(--padding-mittlere-spalte-rechts-oE) * var(--breite-mittlere-spalte-rem));

    --breite-mittlere-spalte-rem-mit-padding:var(--breite-mittlere-spalte-rem);
    --breite-mittlere-spalte-rem-ohne-padding:calc(var(--breite-mittlere-spalte-rem) - var(--padding-mittlere-spalte-links-rem) - var(--padding-mittlere-spalte-rechts-rem));
  }

.user-logged-in {
  --tab-admin-button-breite:8rem;
  --padding-adminblock-links-rem:0.5rem;
  --padding-adminblock-rechts-rem:0.5rem;
}