/* ================= OPEN SANS GLOBAL ================= */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');

* {
  font-family: "Open Sans", Arial, Helvetica, sans-serif !important;
}

/* ==================================================== */

body {
	background-color: #e62d36;
}

table {
  width: 100%;
  overflow-y: auto;
  border-collapse: collapse;
}
table td, table th {
  padding: 1px 5px;
  border: 0px solid #fff;
  text-align: left;
}
table th {
  background-color: #ab1c1c;
  color: #fff;
}
table tr:nth-child(4n+0),
table tr:nth-child(4n+1) {
  background-color: #a3c8fc;
  color: #000;
}
table tr:nth-child(4n+2),
table tr:nth-child(4n+3) {
  background-color: #a3fcde;
  color: #000;
}
table tr:hover {
  background-color: #341cab;
  color: #fff;
}

/* ================= BASICS ================= */

.container { width:100%; max-width:900px; position:relative; }
.image { width:100%; height:auto; }

.overlay,
.overlaytesla {
  position:absolute;
  bottom:0;
  width:50%;
  letter-spacing:26.5px;
  font-size:50px;
  padding-bottom:195px;
  padding-left:140px;
  text-align:center;
  text-shadow:#000 1px 1px 1px;
  color:white;
}
.overlay { opacity:.9; }
.overlaytesla { opacity:.5; }

.zeile0 td{ background:#85b8d2; }
.zeile1 td{ background:#b4cdde; }
.zeileweiss tr{ background:#fff; }

.zeilex td,
.zeiley td {
	background:darkred;
	text-align:center;
	font-weight:700;
	color:white;
	width:33%;
	padding:5px;
	border-right:3px solid #ffcccc;
	border-left:3px solid #ffcccc;
}
.zeiley td { border-bottom:2px solid #ffcccc; }

.zeiles td {
	background:#ffcccc;
	text-align:center;
	font-weight:700;
	color:black;
	width:33%;
	border-right:3px solid #ffcccc;
	border-left:3px solid #ffcccc;
}

/* =========================================================
   MODERNE BUTTONS – kantiger & kompakt + neuer Abstand
   ========================================================= */

.btnylw,
.btngreen,
.btngreen_xs,
.btnblue,
.btnlang,
.btnblue_f,
.btnred,
.btnred_xs,
.btnred_f,
.btnred_c,
.wmfg_layout_0 .wmfg_btn {
  appearance:none;
  border:none;
  border-radius:6px;
  padding:6px 10px;
  margin-top:5px;              /* <<< neu: Abstand OBEN */
  margin-bottom:5px;           /* <<< unten jetzt nur noch die Hälfte */
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  box-shadow:0 4px 10px rgba(0,0,0,.15);
  transition:background .15s, box-shadow .15s, transform .1s;
}

.btnylw:hover,
.btngreen:hover,
.btngreen_xs:hover,
.btnblue:hover,
.btnlang:hover,
.btnblue_f:hover,
.btnred:hover,
.btnred_xs:hover,
.btnred_f:hover,
.btnred_c:hover,
.wmfg_layout_0 .wmfg_btn:hover {
  box-shadow:0 6px 14px rgba(0,0,0,.2);
}

.btnylw:active,
.btngreen:active,
.btngreen_xs:active,
.btnblue:active,
.btnlang:active,
.btnblue_f:active,
.btnred:active,
.btnred_xs:active,
.btnred_f:active,
.btnred_c:active,
.wmfg_layout_0 .wmfg_btn:active {
  transform:translateY(1px) scale(.98);
}

/* Farben */
.btnylw{ background:#facc15; color:#111; }
.btnylw:hover{ background:#eab308; }

.btngreen,
.btngreen_xs{ background:#22c55e; color:#fff; }
.btngreen:hover,
.btngreen_xs:hover{ background:#16a34a; }

.btnblue,
.btnblue_f,
.btnlang,
.wmfg_layout_0 .wmfg_btn{ background:#3b82f6; color:#fff; }
.btnblue:hover,
.btnblue_f:hover,
.btnlang:hover,
.wmfg_layout_0 .wmfg_btn:hover{ background:#2563eb; }

.btnred,
.btnred_xs,
.btnred_f,
.btnred_c{ background:#ef4444; color:#fff; }
.btnred:hover,
.btnred_xs:hover,
.btnred_f:hover,
.btnred_c:hover{ background:#dc2626; }

/* Minimalgrößen */
.btnblue,
.btnred,
.btngreen{ min-width:130px; }

.btnblue_f,
.btnred_f{ min-width:70px; }

.btnlang{ min-width:200px; }

.btngreen_xs,
.btnred_xs{ min-width:50px; }

.btnred_c{ min-width:100px; }

/* ICON Buttons */
.button_red,
.button_green,
.button_blank{
  width:51px;
  height:51px;
  background-size:cover;
  background-position:center;
  border-radius:8px;
  border:none;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px rgba(0,0,0,.25);
  transition:.1s;
  margin-top:5px;
  margin-bottom:5px;
}
.button_red{ background-image:url('red.png'); }
.button_blank{ background-image:url('blank.png'); }
.button_green{ background-image:url('green.png'); }

/* ========================================================= */

.infobox{
	background:white;
	margin:10px 15px;
	padding:10px;
	text-align:center;
	border-radius:10px;
	box-shadow:#000 5px 5px 10px;
	width:730px;
	font-size:16px;
}
.inventar{
	background:white;
	margin:10px 15px;
	padding:10px;
	text-align:center;
	border-radius:10px;
	box-shadow:#000 5px 5px 10px;
	width:400px;
	font-size:16px;
}
.achtung{
	background:white;
	margin:15px;
	padding:20px;
	text-align:center;
	border-radius:10px;
	border:10px solid #e62d36;
	box-shadow:#e62d36 5px 5px 10px;
	width:800px;
	font-size:40px;
}
.iframe{
	background:#cfcfcf;
	margin:15px;
	padding:20px;
	border-radius:10px;
	box-shadow:#000 5px 5px 10px;
	width:1230px;
	height:400px;
	font-size:16px;
}

.klein{ font-size:20px; }

.cotainer .spalte {
	width:200px;
	float:left;
	text-align:center;
	margin:0 15px;
	padding:0 15px;
	background:#d6d6d6;
	border-radius:10px;
	box-shadow:#000 5px 5px 10px;
	height:450px;
	font-size:10px;
	color:gray;
}
.cotainer{
	width:800px;
	margin:auto;
	text-align:center;
}

form[id^="form_"]{ display:contents; }

/* ===================== MODERNERE PULLDOWN FELDER ===================== */

/* globale Select-Felder */
select,
.wmfg_layout_0 .wmfg_select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  width: 100%;
  min-height: 38px;          /* <<< größer */
  padding: 8px 12px;         /* <<< mehr Innenabstand */
  font-size: 14px;
  font-weight: 600;

  background: #ffffff;
  border: 1px solid #cccccc;
  border-radius: 8px;        /* <<< abgerundet */

  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
  transition: border .2s, box-shadow .2s;
}

/* Hover Effekt */
select:hover,
.wmfg_layout_0 .wmfg_select:hover {
  border-color: #888;
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}

/* Focus für Tastatur-Nutzer */
select:focus,
.wmfg_layout_0 .wmfg_select:focus {
  outline: none;
  border-color: #2563eb; /* blau passend zu Buttons */
  box-shadow:
    0 0 0 2px rgba(255,255,255,.7),
    0 0 0 4px rgba(37,99,235,.4);
}

fieldset{
  border: 1px solid #555;
  border-radius: 8px;   /* Rundung */
  
}

table {
  border: 0px solid #aaa;
  border-radius: 8px;
  border-collapse: separate;
  border-spacing: 0;
}

/* Ecken optisch richtig machen */
table tr:first-child th:first-child,
table tr:first-child td:first-child {
  border-top-left-radius: 8px;
}

table tr:first-child th:last-child,
table tr:first-child td:last-child {
  border-top-right-radius: 8px;
}

table tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}

table tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

/* Optional: Zellen-Styling */
table th,
table td {
  padding: 8px 12px;
  border: 0px solid #ccc;
}