body {
	margin: 0;
	padding: 0;
	background-color: #195aaf;
	color: white;
	font-family: Arial, Helvetica, sans-serif;
	display: flex;
	justify-content: center;
	min-height: 100vh; /* statt height */
	text-align: center;
}


table,
div,
span {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	color: white;
	padding: 5px;
}

td {
	font-size: 12px;
	color: white;
}

p {
	padding:10px;
}
/* Zentrales Layout-Container */

.container {
	width: 100%;
	max-width: 100%;   /* gut für Smartphones */
	padding: 10px;
	box-sizing: border-box;
}

.upload-btn {
  padding: 8px 12px;
  background: #2c7be5;
  border: 1px solid grey;
  color: white;
  cursor: pointer;
  border-radius: 4px;
}

h1 {
	font-size: 28px;    /* kleiner auf Mobile */
	padding: 10px;
	margin: 0 0 10px 0;
}

img {
	padding: 10px 0;
	max-width:360px;
}

form {
	padding: 10px 0;
}

label {
	display: block;
	text-align: left;
	margin-top: 15px;
	font-size: 14px;
}

input[type="text"], 
input[type="email"], 
input[type="date"], 
input[type="numeric"] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 5px;
	margin-top: 3px;
    width: 100%;        /* flexibel */	
	box-sizing: border-box;
	height:24px;
}

input[type="file"] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 5px;
	margin-top: 3px;
    width: 100%;        /* flexibel */	
	box-sizing: border-box;
	height:24px;
}

select {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 10px;
	margin-top: 2px;
    width: 100%;        /* flexibel */	
	box-sizing: border-box;
	height:24px;
}

input[type="checkbox"] {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	padding: 10px;
	margin-top: 5px;
	box-sizing: border-box;
	width:25px;
	height:25px;
}
input[type="submit"] {
	margin-top: 30px;
	padding: 5px;
	width: 100%;
	cursor: pointer;
}

.btn {
  display: flex;
  align-items: center;
  padding: 5px;
  gap: 15px;
  font-size: 14px;
  background-color:#ccc;
  border-radius:8px;
}
.btn img {
  padding:5px 5px 5px 10px;
  width: 30px;
  height: 30px;
}

/* Kleine Optimierung für sehr kleine Displays */
@media (max-width: 576px) {
	h1 { font-size: 24px; }
	h2 { font-size: 20px; }
}



.ro-detailgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  max-width: 1400px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.ro-listgrid {
  display: flex;
  flex-wrap: none;
  gap: 5px;
  padding: 2px;
  max-width: 1400px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

.item { flex: 0 0 auto; }

.item.w0  { width:   98%; }
.item.w1  { width:  50px; }
.item.w2  { width: 100px; }
.item.w3  { width: 150px; }
.item.w4  { width: 200px; }
.item.w5  { width: 250px; }
.item.w6  { width: 300px; }
.item.w7  { width: 350px; }
.item.w8  { width: 400px; }
.item.w9  { width: 450px; }
.item.w10 { width: 500px; }
.item.w15 { width:  75px; }
.item.w25 { width: 125px; }
.item.w35 { width: 175px; }
.item.w45 { width: 225px; }
.item.w55 { width: 275px; }
.item.w65 { width: 325px; }
.item.w75 { width: 375px; }
.item.w85 { width: 425px; }
.item.w95 { width: 475px; }
.item.xs  { width:  75px; }
.item.s   { width: 150px; }
.item.m   { width: 225px; }
.item.l   { width: 300px; }
.item.xl  { width: 375px; }
.item.xxl { width: 450px; }

.accordeon{ 
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #fff;
  border-radius: 8px;
  flex-basis: 100%;
  font-size: 28px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: #f6f7f9;
  background-color: #053a7f;
  padding: 0px 5px 5px;
  margin:  5px 0px 0px 0px;
}

.accordeon-title { 
  user-select: none;
  flex-wrap: wrap;
  flex-basis: 100%;
  border-radius: 8px;
  font-size: 24px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: #fff;
  vertical-align: middle;
  padding: 0px 5px 5px;
  margin: 0px 0px 0px 0px;
}

.accordeon-subtitle{ 
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  flex-basis: 100%;
  font-size: 16px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 400;
  color: #f6f7f9;
  padding: 0px 0px 0px 15px;
  margin:  5px 0px 0px 0px;
}

.accordeon-content{ 
  user-select: none;
  _display: flex;_
  flex-wrap: wrap;
  border: 1px solid #fff;
  border-radius: 8px;
  flex-basis: 100%;
  font-size: 14px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 300;
  color: #f6f7f9;
  background-color: #397aaf;

  padding: 0px 5px 5px;
  margin:  5px 0px 0px 0px;
}

.chevron {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: #fff;
  font-size: 16px;
  line-height: 1;
}

.flex-title { 
  user-select: none;
  flex-wrap: wrap;
  flex-basis: 100%;
  border-radius: 8px;
  font-size: 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: #fff;
  vertical-align: middle;
  padding: 0px 5px 5px;
  margin: 0px 0px 0px 0px;
}

.flex-block{ 
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #fff;
  border-radius: 8px;
  flex-basis: 100%;
  font-size: 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: #f6f7f9;
  background-color: #094a9f;
  padding: 0px 5px 5px;
  margin:  5px 0px 0px 0px;
}

.flex-block-half{ 
  user-select: none;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #fff;
  border-radius: 8px;
  flex-basis: 48%;
  font-size: 20px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  color: #f6f7f9;
  background-color: #094a9f;
  padding: 0px 5px 5px;
  margin:  5px 0px 0px 0px;
}


.flex-break { 
  user-select: none;
  flex-basis: 100%;
  font-size: 18px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 500;
  text-align:left;
  padding: 10px 5px 0px;
}

.ro-field {
  background-color: #eee;
  border: 1px solid #195aaf;
  border-radius: 6px;
  padding: 1px 5px 1px;
  margin: 5px 0px 0px 0px;
  height: 47px;
  text-align:left;
}

.ro-value {
  margin-top: 0px;
  font-size: 15px;
  font-weight: 500;
  color: #111;
  line-height: 1.2;
}

.ro-label {
  user-select: none;
  margin-top: 0px;
  font-size: 12px;
  color: #195aaf;
  padding: 2px;
}

.ro-gridheader {
  background-color: #d4d5d9;
  border: 1px solid #195aaf;
  border-radius: 5px;
  font-size: 15px;
  text-align: center;
  font-weight: 700;
  color: #195aaf;
  padding: 1px 2px 1px;
  margin: 5px 0px 0px 0px;
}

.ro-gridfield {
  background-color: #f6f7f9;
  border: 1px solid #195aaf;
  border-radius: 5px;
  padding: 1px 2px 1px;
  margin: 5px 0px 0px 0px;
}

.ro-gridvalue {
  margin-top: 0px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
  color: #1f2933;
  line-height: 1.0;
}

.ro-gridlabel {
  user-select: none;
  margin-top: 0px;
  font-size: 10px;
  color: #195aaf;
}

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width:100%;
  max-width: 1400px;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  align-items: flex-start;
  align-content: flex-start;
}

.fullgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width:100%;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  align-items: flex-start;
  align-content: flex-start;
}

.rw-field {
  background-color: #eee;
  border: 1px solid #195aaf;
  border-radius: 6px;
  padding: 1px 3px 0px;
  margin: 5px 0px 0px 0px;
  text-align:left;
}

.rw-value {
  margin-top: 0px;
  font-size: 14px;
  font-weight: 500;
  color: #111;
  line-height: 1.0;
  margin-top:3px;
  padding: 2px;
  border: 1px solid grey;
  border-radius: 4px;
}

.rw-label {
  user-select: none;
  margin-top: 2px;
  font-size: 12px;
  color: #195aaf;
  padding: 2px;
}

.rw-checkboxlabel {
  user-select: none;
  margin-top: 2px;
  font-size: 14px;
  color: #195aaf;
  padding: 2px;
}