@font-face {
    font-family: 'Roboto-Regular';
    src: local('KhmerOsSystem'), local('Roboto-Regular'), local('Verdana'), local('Arial'), local('sans-serif'), url('Dateien/fonts/Roboto-Regular.ttf') format('opentype');
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: Roboto-Regular; KhmerOsSystem; Verdana; Arial; sans-serif;
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  width: 100%
}

/* Menüleiste */
nav {
  position: fixed;
  top: 0;
  right: 0;
  width: 38em;
  background-color: #F5EFE6; /* Hintergrund der Menüleiste */
  color: black;
  padding: 10px 20px;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  opacity: 0.92;
  border-bottom-left-radius: 3em;
}

.menu {
  display: flex;
  gap: 28px;
}

nav a {
  color: black;
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
  color: blue;
}


header {
  background-color: #e0e0e0;
  color: white;
  text-align: center;
  padding-top: 0px;
  padding-bottom: 20px;
}

/*---- Headerbild ----------------------*/
.wrapper {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
}

.container {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
    position: relative;
    top: 2.5em;
}


.header-box {
    flex: 1
}

.bord {
    padding: 0;
    margin: 0;
    -webkit-box-sizing: border-box;
}

.crossfd {
    background: url("Dateien/img/Mercedes_D0448_118_1024x400.png");
    display: inline-block;
    background-size: cover;
    width: 60%;
}

.crossfd img {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    transition: all 2s ease-in-out;
}

.crossfd img:hover {
    transform: scaleX(1.48); /* horizontal um 48% vergrößern */
    opacity: 0.2;
  }

@media (pointer: coarse) {
.crossfd img {
    opacity: 0.2;
    }
}

#logobox {
    display: inline;
    background: url("Dateien/img/aussemsps_2.png");
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    width: 9em; 
    max-width: 40%;
    height: 3em;
    z-index: 40;
}

.rtl {
    unicode-bidi: bidi-override;
    direction: rtl;
    text-align: left;
    font-weight: normal; 
} 

.contentbox {
    width: 100%;
}

zeile {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}

spalte {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: center;
    width: 42em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
/*    max-height: 50em; */
}

spalterechts {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: left;
    width: 42em;
    margin-top: 2em; 
    margin-left: 2em;
}

spaltelinks {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    justify-content: right;
    width: 40em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
}


spalteschmal {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex; 
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -webkit-align-items: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
    width: 30em;
    margin-top: 2em; 
    margin-right: 2em; 
    margin-bottom: 2em;
    margin-left: 2em;
}

aside {
	flex: 1 1 0%;
    -webkit-flex: initial;
            flex: initial;
}

aside img {
    width: 100%; /* Größe des Bildes in der Box */
/*    height: 100%; /* keine Verzerrung */
}

aside img a {
    border: none; 
    border-color: rgba(255,255,255,0) !important; 
    text-decoration: none !important;
}

aside img:visited {
/*    border: none; 
    border-color: rgba(255,255,255,0) !important; 
    text-decoration: inherit;
    text-decoration-line: none; */
    background-color:#ff0000; 
}

p { 
-moz-hyphens: auto;
-webkit-hyphens: auto;
-ms-hyphens: auto;
-o-hyphens: auto;
hyphens: auto; 
}

article { /* wird nur noch im Impressum verwendet */
	flex: 1 1 0%;
    display: block;
    flex-direction:column;
    width: 30em;
    min-width: 20em;
    max-width: 20em;
	margin: 1em 0em 1em 1em;
    word-wrap: break-word;
/*	background-color:#aaeeff; */
}


/* Separator Linie */
.separator {
  width: 80%;
  height: 1px;
  background-color: orange;
  margin-top: 1em;
  margin-right: auto;
  margin-bottom: 2em;
  margin-left: auto;
}

.linie {
    display: flex;
    flex: 1 100%;
    height: 2px;
    width: 90%;
	border: 1px solid;
    border-top-color: white;
    border-left-color: white;
    border-right-color: white;
    border-bottom-color: orange; /* Linienfarbe */
	background-color: #efefef;
	padding: 0px;
	margin-left: 5%;
}

main {
 display:flex; 
 flex-direction:column; 
}

/* Boxen Container */
.box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
}

.row {
 display:flex; 
 flex-wrap:wrap; 
 min-height:400px; }
 
.left, .right {
 flex:1; 
 padding:1em; 
 box-sizing:border-box; 
 display:flex; 
 justify-content:center; 
 align-items:center; 
}

.left {
 text-align:left; 
}

.right {
 background:#fff; 
 padding:0em; 
}

/* Allgemeine Boxen */
.box {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: left;
  position: relative;
  font-size: 1.2em;
/*  font-weight: bold; /* Schriftstärke im SVG */
  transition: background-color 0.3s ease;
  height: auto; /* flexible Höhe */
  min-height: 150px; /* optional: Mindesthöhe */
}

/* Box Nummerierung oben links */
.box::before {
/*  content: attr(data-number); /* Box-Nummerierung in der linken oberen Ecke */
  position: absolute;
  top: 10px;
  left: 10px;
  font-size: 2em; /* Schrifthöhe im SVG */
  color: rgba(0,0,0,0.2);
  font-weight: bold; /* Schriftstärke der Box-Nummerierung */
}

/* Farbe der Box 1 oben links */
.box-container.main .box:first-child {
  background-color: #45F3F0; /* hellblau #d9f0ff */
}

/* Farbe der Box 2 oben rechts */
.box-container.main .box:last-child {
  background-color: white; /* helles blau #9bdaff */
  border: 1px solid gray;
}

/* Farbe der Box 3 unten links */
.box-container.bottom .box:first-child {
  background-color: white; /* gelb #FFD90B */
  border: 1px solid gray;
}

/* Farbe der Box 4 unten rechts */
.box-container.bottom .box:last-child {
  background-color: #FFA42B; /* hellorange #ffe6cc */
}

/* Hover Effekt */
.box:hover {
  filter: brightness(1.05); /* verändert die helligkeit beim hoovern der box */
  transform: translateY(-5px); /* verändert die Position beim hoovern der box */
}

/* Linke Boxen (1 & 3) Text-Content */
.box .content {
/*  text-align: justify; */
}

/* Linke Boxen Margin für Text */
.box-container.main .box:first-child .content,
.box-container.bottom .box:first-child .content {
  padding-left: 10em;
  padding-right: 4em;
}

/* Box 2 Bild */
#box2 {
  display: flex;
  justify-content: center;
  align-items: center;
}

#box2 img {
  max-height: 16em; /* Bild maximal 16em hoch */
  width: auto;
  object-fit: cover;
  padding-right: 10em;
}

  svg {
/*    width: 98%; 
/*    height: 28em; /* scaliert das svg */
/*    max-width: 85em; /* Maximale Breite des SVG */
  }

  circle.point {
    fill: black; /* Farbe der Punkte auf dem Kreis */
  }

  line.sehne {
    stroke-width: 1.0;          /* Dicke der Sehnenlinie */
    stroke: rgba(0,0,255,0.8);  /* Farbe der Sehnenlinie, Durchsichtbarkeit */ 
  }
  text {
    font-family: sans-serif;
    font-size: 1.0em; /* Textgröße in der svg-Grafik */
    text-anchor: middle;
    dominant-baseline: middle;
  }
  .fallback-image {
    display: block;
  }

/* Link ohne Unterstreichung und mit Stil */
.link-area {
    display: block; /* Macht den Link zu einem Blockelement */
    text-decoration: none; /* Entfernt die Unterstreichung */
    color: black; /* Textfarbe nach Wunsch */
    width: 100%;
    height: 100%;
}

p.formatted-text {
    white-space: pre-wrap;        /* Beibehaltung von Leerzeichen und Zeilenumbrüchen, aber Umbruch bei Bedarf */
    word-wrap: break-word;        /* Lange Wörter brechen, wenn sie zu lang sind */
    text-align: justify;          /* Blocksatz */
    width: 100%;                  /* Maximal 100% Breite des Containers 40em */
    box-sizing: border-box;       /* Sicherstellen, dass Padding und Border in der Breite enthalten sind */
    line-height: 1.5;             /* Zeilenhöhe für bessere Lesbarkeit */
    font-size: 1.0em;             /* Schriftgröße */
}

p2.formatted-text {
    white-space: pre-wrap;        /* Beibehaltung von Leerzeichen und Zeilenumbrüchen, aber Umbruch bei Bedarf */
    word-wrap: break-word;        /* Lange Wörter brechen, wenn sie zu lang sind */
    text-align: justify;          /* Blocksatz */
    width: 100%;                  /* Maximal 100% Breite des Containers 40em */
    box-sizing: border-box;       /* Sicherstellen, dass Padding und Border in der Breite enthalten sind */
    line-height: 1.8;             /* Zeilenhöhe für bessere Lesbarkeit */
    font-size: 1.0em;             /* Schriftgröße */
}

h3 {
    color: blue;
}

.mailbox {
    padding-top: 0.7em;
    padding-right: 1em;
    padding-bottom: 0.7em;
    padding-left: 1em;
    width: auto; 
    height: 3.2em; 
    float: center;
    text-align: center;
    outline:2px solid black;
    font-size: 1.3em;
    line-height: 1.8em;
    -moz-border-radius: 40px;
    -webkit-border-radius: 40px;
    border-radius: 40px;
    text-decoration: none;
}

.mailbox a:link {
color: black;
text-decoration: none;
}

.mailbox a:visited {
    color: blue;
/*    text-decoration: none;*/
}



/* Footer */
footer {
  background-color: #999999;
  color: white;
  text-align: center;
  padding: 15px;
}

/* ---- Kleine Bildschirme ---------------------------------------- */

@media screen and (max-width: 800px) {
spalteschmal:nth-child(1){order: 2;}
spalteschmal:nth-child(2){order: 1;}

spalterechts:nth-child(1){order: 2;}
spalterechts:nth-child(2){order: 1;}
}


@media (max-width: 800px) {
.container {
    display: flex;
    flex-wrap: wrap;
    width:100%; 
    position: relative;
    top: 6.9em; /* Position des Headerbilds für grosse Menüschrift */
    }

  nav {
    flex-direction: column;
    align-items: flex-start;
  }

/* Boxen Container */
.box-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 0;
  }

/* Allgemeine Boxen */
.box {
  flex: 1 1 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  font-size: 1.1rem;
  font-weight: bold;
  padding-top: 1em;
  padding-right: 1em;
  padding-bottom: 1em;
  padding-left: 1em;
  transition: background-color 0.3s ease;
  height: auto; /* flexible Höhe */
  min-height: 250px; /* optional: Mindesthöhe */
  }

  .box-container {
    flex-direction: column;
  }

  /* Linke Boxen Margin anpassen */
  .box-container.main .box:first-child .content,
  .box-container.bottom .box:first-child .content {
    margin-left: 2em;
    margin-right: 2em;
  }

  #box2 img {
    width: 100%;
    height: auto;
    padding-right: 0em;
    object-fit: contain;
  }
  #box4 img {
    width: 80%;
    height: auto;
    padding-right: 2em;
    object-fit: contain;
  }
}

/* Kleine Bildschirme --------------------------- */
@media (max-width: 700px) {
  nav {
    flex-direction: column;
    align-items: flex-start;
  }

  .menu {
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }

  .box-container {
    flex-direction: column;
  }

  /* Linke Boxen Margin anpassen */
  .box-container.main .box:first-child .content,
  .box-container.bottom .box:first-child .content {
    margin-left: 2em;
    margin-right: 2em;
  }

  #box2 img {
    width: 100%;
    height: auto;
    padding-right: 0em;
    object-fit: contain;
  }
}