/* basis.css */ 
/** 
  * 1. Globale Einstellungen für die gesamte Website 
  */ 






/* Farben mit nenutzerdefinierten Eigenschaften (aka CSS-Variablen) */
html {
    --basisfarbe: rgb(244, 244, 244); 
    --kontrastfarbe: rgb(13, 13, 13); 
    /* --akzentfarbe: #8d191d;  */
    --akzentfarbe: #c6063a;
    --schattenfarbe: rgb(51,51,51,0.3); 
  
    --grau-dunkel: #333; 
    --grau-mittel: rgba(145, 118, 125, 0.5);
    --grau-hell: rgba(145, 118, 125, 0.2); 
    --grau-sehr-hell: whitesmoke; 
  
    --linkfarbe: #c6063a;
    --linkfarbe-visited: #c6063a;
    --linkfarbe-hover-focus: rgb(198,6,58, 0.6);
    --linkfarbe-active: rgb(198,6,58, 0.6);
 
  }
  
/* border-box aktivieren */
*, *::before, *::after { box-sizing: border-box; }
  
/* Sanftes Scrollen aktivieren */ 
html { scroll-behavior: smooth; 
color: var(--kontrastfarbe);} 

/* Flexible Bilder und Videos */ 
img, video { 
    max-width: 100%; 
    height: auto; 
}

/* Grundlegende Gestaltung von figure und blockquote */ 
figure, blockquote { 
  margin-right: 0; 
  margin-left: 0;
}

/* CSS-Regel zur Vermeidung von Collapsing Margins */ 
h1, h2, h3, h4, h5, h6,
p, ul, ol, blockquote, figure {
  margin-top: 0; 
}


/** 
  * 2. Grundlegende Gestaltung von Schrift und Text 
  */ 
  
body {
  font-family: Calibri, sans-serif;
  /* font-family: system-ui, "Segoe UI", Roboto, 
                 "Helvetica Neue", Arial, sans-serif; */
  font-size: 1rem;                
}

/* Gestaltung der Überschriften */
h1 { font-size: 2rem; 
  font-weight: 800;} 
h2 { font-size: 1.5rem; } 
h3 { font-size: 1.25rem; } 
h4 { font-size: 1rem; }
h5 { font-size: 0.75rem; }
h6 { font-size: 0.75rem; } 

h2, h3, h4 { font-weight: 800; } 

strong {
  font-weight:600;
}



/* keine Unterstreichung für Hyperlinks */ 
a { 
  text-decoration: none;
  
}




/* Schrift nicht kursiv */
address { font-style: normal; }

/* HI Text ausrichten */
.align_center {
	text-align: center;
}
.align_right {
  text-align: right;
}

blockquote {
    font-style: italic;
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: justify;
  }




  /* 3. Nützliche, allgemeine Klassen 
  */ 

/* Boxen am Bildschirm ausblenden */
.visually-hidden { 
  position: absolute;
  clip: rect(0, 0, 0, 0); 
  clip-path: inset(50%); 
  overflow: hidden;
  white-space: nowrap;
  width: 1px; 
  height: 1px; 
  padding: 0; 
  border: 0; 
  margin: -1px;
} 

/* Skip-Links sichtbar machen wenn Fokus und aktiviert */
a.skip-link:focus { 
  outline: 2px solid var(--akzentfarbe);
  background: var(--basisfarbe);
  display: block;
  position: static; 
  clip: auto; 
  clip-path: none;
  overflow: visible; 
  white-space: inherit;
  width: auto; 
  height: auto; 
  padding: 0.5rem; 
  border: none;
  margin: 0; 
} 





/* Klassen zum Floaten */
.float-rechts { 
  float: right; margin: 0 0 0 1rem; 
}

.float-links  { 
  float: left;  margin: 0 1rem 0 0; 
}

.float-stoppen { 
  clear: both; 
}

figure[class~="float-rechts"], 
figure[class~="float-links"] { 
  text-align: center; 
}

/* Floats umschließen für alte und neue Browser */
.float-umschliessen { 
  overflow: hidden; 
} 

@supports (display: flow-root) { 
  .float-umschliessen {
    display: flow-root; 
    overflow: initial; 
  } /* Ende .float-umschliessen */ 
} /* Ende @supports */