:root { 

    /* Größen Grundgerüst DESKTOP */
    --logo-gross: 150px;
    --logo-klein: 80px;
    --navigation-hoehe: 50px; /* Desktop-Navigation */
    --foot-hoehe: 10em; /* Als min-height genutzt */
    --desktop-breite-content: 1300px; /* als max-width */
    --anzahl-menupunkte: 5;
     --fussbox-schriftgroesse: 1em;
    
     --schnell-breite: 2.5em;
  


    /* Grundsätzliche Layoutfabren */
--michael-brom1: #b00058; 
--michael-brom2: #c74c85;
--michael-brom3: #ea85b4;
--michael-hbrom: #fdf6fa; 
--michael-dgrau: #515151;
--michael-hgrau: #cfcfcf;
--michael-hhgrau: #f9f9f9;
--michael-hhbrom: #fee3ea;
--michael-schrift: #383838; 
 



    --hervorhebung-h1: var(--michael-dgrau);
    --hervorhebung-h2: var(--michael-brom1);
    --hervorhebung-h3: var(--michael-brom1);
    
    
    --content-bgcolor: var(--michael-hbrom);
    --header-bgcolor:  #FFFFFF; 
    --foot-bgcolor:   var(--michael-brom1); 
    --link-farbe: var(--michael-brom1);
    --schnellzugriff-bgfarbe: none;
   
    --fussbox-bogcolor: none;
    --fussbox-schriftfarbe: #ffffff;
    --body-bgcolor: #ffffff; /* Wird z.B. beim iPhone oben in der Notch und ganz unten angezeigt.  */
    --main-bgcolor: var(--michael-dgrau); 
    --innercont-bgcolor: var(--michael-hbrom);

    

        

  /* Schriftfarben und -art */
    --schriftfarbe-main: var(--michael-schrift);

    --schriftfarbe-foot: #ffffff; /* Redundant! */
 
    --schriftart-main-gewicht: 100;
    --schriftart-main: 'Roboto', 'Arial', sans-serif; 

    --titel-groesse: 3em;
    --titel-farbe: #ffffff;

 
    /* Desktop Navigation */
--desktopnavi-wrapper-bg: #ffffff;  
--desktopnavi-schatten: 0 2px 2px rgba(0, 0, 0, 0.2); 
--desktopnavi-bgcolor: #ffffff;
--desktopnavi-breite-einzeln: calc((var(--desktop-breite-content) / var(--anzahl-menupunkte)) - 0.5px);
--desktopnavi-breite-einzeln-schalter:  calc((1024px / var(--anzahl-menupunkte)));

--desktopnavi-bgcolor-hover: var(--michael-hgrau); 
--desktopnavi-schriftfarbe: var(--michael-schrift); 

--desktopnavi-sub-bgcolor: #FFFFFF;
--desktopnavi-sub-bgcolor-hover: var(--michael-hgrau); 
--desktopnavi-sub-schriftfarbe: var(--michael-schrift);
--desktopnavi-sub-schriftfarbe-hover: var(--michael-schrift);

--desktopnavi-schriftart: 'Roboto', Arial, sans-serif;

--schriftgroesse-content: 1.1em;



    /* Mobile Navigation */
    --skalierung-hamburger: 0.5; /* Dezimalzahl, mit der alle Maße multipliziert werden */

    --mobinavi-striche: var(--michael-brom1); 
    --mobinavi-rand-unten: 0.5px solid var(--michael-hgrau);
    --mobinavi-bgcolor: rgba(255, 255, 255, 0.8);
    --mobinavi-bgcolor-a: #ffffff;
    --mobinavi-schriftfarbe: var(--michael-schrift); 
    --mobinavi-schriftart: 'Roboto', Arial, sans-serif;
    --mobinavi-sub-schriftgroesse: 1.1em;
    --mobinavi-schriftgroesse: 1.1em;

    --mobinavi-sub-rand-unten: 0px;
    --mobinavi-sub-bgcolor: var(--michael-hgrau);
    --mobinavi-sub-border: 0.5px solid var(--michael-hgrau);
    --mobinavi-sub-bgcolor-a: var(--michael-hhbrom);

    --mobinavi-sub-bgcolor-aktiv: var(--michael-brom1); 

    --mobinavi-sub-color: var(--michael-schrift); /* Schriftfarbe Menüpunkte im Sub */

     --mobinavi-sub-schrift-aktiv: #ffffff; /* Farbe der Sub-Überschrift, wenn aktiv */

    --submenu-klappsymbol-farbe: var(--michael-brom1); 
    --submenu-klappsymbol-farbe-aktiv: #ffffff; 
    --submenu-klappsymbol-zu: '▸';
    --submenu-klappsymbol-auf: '▾';

  }