/* raini.css
	Inhalt:
		1. basic
		2. layout Bereiche
		3. eigene Klassen
*/

/* ############################## 1. basic: ############################## */  
/* margin: oben, rechts, unten, links */

/* Farben als CSS-Variablen: */
html {
    --akzentfarbe: whitesmoke; 			/* fokusfarbe in der Navi-box */	
    --schattenfarbe: #3d3b39; 			/* fast schwarz */
	--braun-hell: #DFD5C9;
	--braun-mittel: #C3BCB4;
    --grau-hell: #eee;
    --grau-mittel: #999; 
 	--grau-dunkel: #333; 
	--weinrot: #772200;
	--sand-hell: #EEDAC4;
	--sand-dunkel: #D8C1A7;
	--weiß: #FFF;
	--schwarz: #000;
	--rot: #EB3324;
	--blau: #3282F6;
	--grün: #75F94D;	
    --linkfarbe: #05a; 					/*dunkelblau*/
    --linkfarbe-visited: #50a; 			/* schwarz */
    --linkfarbe-hover-focus: #a05; 	
    --linkfarbe-active: #a50;   }
  
/* border-box aktivieren: */
*, *::before, *::after { box-sizing: border-box; }
  
/* Sanftes Scrollen aktivieren: */ 
html { scroll-behavior: smooth; } 

/* Klassisches Seitenlayout (Hintergrund, begrenzte Breite, zentriert): */ 
html { background-color: var(--braun-mittel); }

/* Schriftart: */	
body {
  font-family: PilcrowRounded_med, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.9rem;
  text-align:center;
  min-width: 320px; }

/* body als Flex-Container: */
body {
  display: flex;
  flex-flow: column;
  min-height: 100vh; 
  max-width: none; 
  padding: 0; 
  margin: 0; }

/* 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 { margin-top: 0;}

/* ------- font-face: ------- */
@font-face {
    font-family: 'PilcrowRounded_med';		/* ab 2026 meine Standard-Schriftart */
    src: url('../fonts/other/PilcrowRounded/PilcrowRounded-Medium.woff2') format('woff2'),
		 url('../fonts/other/PilcrowRounded/PilcrowRounded-Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal; }

/* ------- Überschriften: ------- */
/* text-shadow: offset-x offset-y blur-radius farbwert */
h1 { font-size: 1.7rem; color: var(--schwarz); text-shadow: 4px 4px 4px var(--weiß);}	/* meine standard-Überschrift mit text-shadow */
h2 { font-size: 1.2rem; } 										/* ausstellungen.htm */
h3 { font-size: 0.9rem; margin-bottom:0.7em; } 										/* index.htm */
h4 { font-size: 0.7rem; margin-bottom:0.7em; } 										/* index.htm */
h5 { font-size: 1.5rem; text-shadow: 4px 4px 4px var(--weiß);} 	/* für Überschriften in gal*.htm (z.B. gal_2625.htm) */
h6 { font-size: 0.8rem; color: var(--weinrot);} 										/* derzeit nicht verwendet: */

/* margin und padding für Überschriften: (oben, rechts, unten, links) */
h1, h2, h3, h4, h5, h6 {
	font-weight: 500; } 	

/* links: */ 
a { 
  text-underline-offset: 0.15em; }

/* 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(--weinrot);
  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; } } 

/* ############################## 2. layout Bereiche: ############################## */

/* ------- padding für header, nav und content: ------- */

.site-header, 
.site-nav, 
.site-content, 
 { 
  padding-right: 0; 
  padding-left: 0; }

/* ------- header: ------- */

.site-header { 
  padding: 0 0 0 0; 
  margin-top: .2em;
  margin-bottom: .3em; } 

.site-header h1 { margin-bottom: 0; }
.site-header h1 + p { margin-top: 0; }

/* ------- nav: ------- */

.site-nav { 
  position: sticky;
  top: 0; 
  box-shadow: 0 2px 8px var(--schattenfarbe);    
  background-color: var(--braun-hell);				/* Hintergrundfarbe der oberen Nav-bar */
  color: var(--weinrot); 
  padding-top: 0;
  padding-bottom: 0;
  margin: 0 0 1.5rem 0; }

.site-nav ul { 								/* unsorted list */
  list-style: none; 
  display: flex; 
  padding: 0; 
  margin: 0; 
  justify-content: center; }					/* Überschriften in Nav-bar zentriert */

.site-nav ul ul {							/* hide vertikal nav */
    display: none; }

.site-nav li {								/* list item */
  flex: 1; 
  max-width: 17rem;							/* max. Breite der list items in Nav-bar (z.B. "Ausstellungen") */
  border-right: 1px solid var(--weinrot); }
  
.site-nav li:first-child {
  border-left: 1px solid var(--weinrot); }

.site-nav a {								/* links in Nav-bar */
color: var(--weinrot); 
text-align: center;
text-decoration: none; 						/* links ohne underline */
display: block;
padding: 0.3rem 1rem; }						/* höhe nav-bar: 1.Wert: oben+unten, 2.Wert: links+rechts */

.site-nav li[aria-current] a, 				/* highlight selected item in Nav-bar */
    .site-nav a:hover, 
    .site-nav a:focus { 
        background: var(--akzentfarbe); 
        color: var(--weinrot); 
        text-decoration: none;
        text-underline-offset: 0.15em;
        text-decoration-thickness: 1px; }

/* ------- settings für nav vertikal: ------- */

@media (min-width: 100px) {
    .menu {
      flex-direction:row;} }

@media (min-width: 100px) {
  nav ul ul {
    display: none;
    position: absolute;} }

nav ul li:hover > ul {
  display: block;
  color: var(--weinrot);
  padding-left: 2rem; }

@media (min-width: 100px) {
  nav ul li:hover > ul {
    padding-left: 0;
	background: var(--braun-hell); } }
  
nav ul li:hover > ul a {
    color: var(--weinrot); }
  
.sub-menu{							/* vertikal nav */
    li{
      padding-left: 0.7em;
	  padding-right: 0.7em; }
    
    li:hover, li a:hover{
      background: whitesmoke;
      color: var(--weinrot); } }
  
/* ------- main: ------- */

.site-content { 
  line-height: 1.5;
  margin-bottom: 1rem; }

.site-content a:link { color: var(--linkfarbe); } 				/* content links */
.site-content a:visited { color: var(--linkfarbe-visited); } 

.site-content a:hover, .site-content a:focus { color: var(--linkfarbe-hover-focus); } 
.site-content a:active { color: var(--linkfarbe-active); } 

/* .site-content a[target="_blank"]::after {content: " (in neuem Tab oder Fenster)";} */
.site-content a[target="_blank"]::after {
  content: "\00A0\2197"; 
}

/* footer nach unten drücken */
.site-content { 
  flex: 1; }

.infoboxen {								/* äussere box: */
  background-color: var(--braun-mittel); 
  padding-right: 0; 
  padding-left: 0; 
  margin-bottom: 1rem; }

.infobox {									/* innere box: */
  max-width: auto;
  text-align: center; 
  background-color: var(--grau-hell); 
  color: var(--weinrot);
  padding: 1rem;							/* für o, r, u, l */
  margin-right: 3rem; 						/* rechter Abstand von Text zu box-Rand (definiert box-Breite!) */
  margin-left: 3rem; }						/* linker Abstand von Text zu box-Rand (definiert box-Breite!) */

.inside {									/* innere box */
  padding: 0 0;								/* padding (auch) für Nav-elemente */
  margin-right: auto; 
  margin-left: auto; }

/* siehe ishadeed.com/article/grid-layout-flexbox-components/ */
@supports (grid-area:auto) { 
  .inside { 
    max-width: 960px; } }

/* ------- footer: ------- */

.site-footer {								/* footer-Nav-box */
  font-size: 0.75rem; 
  background-color: var(--braun-hell);		
  padding-top: 0.5em;						/* padding footer Nav-box */
  padding-bottom: 0.5em; }

.site-footer ul {
  list-style-type: none;
  display: flex; 
  gap: 1rem;
  padding: 0;
  margin: 0; }

.site-footer li:last-child {
  margin-left: auto; } 

.site-footer a {
  color: var(--weinrot); 
  text-decoration: none; }

/* ############################## 3. eigene Klassen: ############################## */

/* tabelle mit class "table_2cells" (d.h. das gilt NUR für bestimmte tabellen (z.b. in "ausstellungen.htm" und "aboutme.htm" */  

.table_2cells {
	th, td {								/* th=table heading (Überschrift), td=table data */
		padding: 1rem 3rem;
		text-align: center;
		vertical-align: top; } }

#schatten {
	box-shadow: 10px 10px 30px 15px var(--grau-hell);	/*horizontaler Versatz, vertikaler Versatz, Unschärferadius, spread, Farbe */
	border-radius: 3px; }


		


/* Ende raini.css */