@font-face {
	  font-family: 'Roboto';
	  font-style: normal;
	  font-weight: 300;
	  src: url(Roboto/Roboto-Light.ttf);
}
@font-face {
	  font-family: 'Robotolight';
	  font-style: normal;
	  font-weight: 100;
	  src: url(Roboto/Roboto-Thin.ttf);
}
@font-face {
	  font-family: 'Robotobold';
	  font-style: normal;
	  font-weight: 400;
	  src: url(Roboto/Roboto-Medium.ttf);
}

body {
      font-family: 'Roboto';
      background: white;
      margin: 0;
      padding: 0;
	  padding-top: 80px;
}

.menu {
	  background-color: white;
	  color: black;
	  position: absolute;
	  max-height: 70px;
	  height: 12%;
	  min-height: 30px;
	  width: 90%;
	  padding: 0 5%;
	  left: 0;
	  top: 0;
	  z-index: 100;
	  transition: all 300ms ease-in-out;
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
}
.menu-title {
	  flex: 1;
	  text-align: center;
	  font-size: 30px;
}
.menulogo {
	  height: 25px;
	  width: auto;
	  background-repeat: no-repeat;
	  background-size: cover;
	  background-position: center center;
	  transition: all 300ms ease-in-out;
}

h2{ 
	font-size: 30px;
	font-weight: normal;
}

main {
    max-width: 1200px;
	margin: 0 auto;
	padding: 2rem;
	background: white;
}

table {
	  width: 100%;
	  margin: 2rem auto;
	  border-collapse: collapse;
	  background: white;
	  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
th, td {
      border: 1px solid #ccc;
      padding: 1rem;
      text-align: left;
}

.checkout-btn {
    background-color: #fe7316;
    color: white;
    font-size: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-inline: 30px;
    display: inline-flex;;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    margin-bottom: 10px;
    text-decoration: none;
    width: max-content;
	border-radius: 0px;
	border: none;
	cursor: pointer;
}
.back-link {
      display: inline-block;
      margin: 1rem 0;
      padding: 0.5rem 1rem;
      background: #555;
      color: white;
      text-decoration: none;
      border-radius: 4px;
}
.remove-btn {
    background-color: black;
    color: white;
    font-size: 16px;
    padding-top: 8px;
    padding-bottom: 10px;
    padding-inline: 30px;
    display: inline-flex;;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    text-decoration: none;
    width: max-content;
	border-radius: 0px;
	border: none;
	cursor: pointer;
}
.c5t2 {
      background-color: black;
	  color: white;
	  font-size: 16px;
	  padding: 10px 30px;
	  display: inline-flex;
	  align-items: center;
	  gap: 10px;
	  margin: 10px 0;
	  text-decoration: none;
	  width: max-content;
}
.myContainer {
	  width: 25px;
	  height: 20px;
	  display: flex;
	  align-items: center;
	  justify-content: center;
}
.RAR_arrow {
	  position: absolute;
	  width: 18px;
	  height: 13px;
}	
.myagb a {
	  text-decoration: none;
	  color: inherit;
	  font-weight: 300;
}
.myagb a:hover  {
    font-weight: 400;
    font-family: 'Robotobold';
}

form {
    background-color: rgb(236, 237, 231);
	padding: 1rem 4rem 1rem 4rem;
	border: 0px ;
	display: none;
	width: 100%;
	margin: 2rem auto;
	box-sizing: border-box;
}
form label {
    display: block;
	margin-bottom: 1rem;
	font-weight: bold;
}
form input {
      display: block;
	  width: 90%;
	  padding: 0.6rem;
	  font-size: 1rem;
	  margin-top: 0.25rem;
	  border: 1px solid #ccc;
	  border-radius: 0; 
	  box-sizing: border-box;
}
form button {
      margin-top: 1.5rem;
      background: green;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 4px;
      cursor: pointer;
}
#danke {
      display: none;
      margin-top: 2rem;
      padding: 1rem;
      background: #d4edda;
      color: #155724;
      border: 1px solid #c3e6cb;
}

@media (max-width: 768px) {

thead, tbody, th, td, tr {
		display: block;
		width: 100%;
	}
	
	table {
		display: block;
		width: 100%;
		margin-left: 0rem;
		margin-right: 0rem;
		box-shadow: none;
	}
	
	main {
		padding-left: 1rem;
		padding-right: 1rem;
	}

	thead {
		display: none;
	}

	tr {
		padding: 1rem;
		background: white;
		overflow: visible;
		border: 1px solid #ccc;
		box-shadow: 0 1px 5px rgba(0,0,0,0.1);
		margin: 0 1rem 1.5rem 0rem; /* Abstand links & rechts */
		width: 90%;
	}

	td {
		display: block;
		position: relative;
		text-align: left;
		border: none;
		border-bottom: 1px solid #eee;
		box-sizing: border-box;
		overflow: hidden;
		padding: 1rem 1rem 1rem 50%;
		width: 100%;
		max-width: 100%;
	}

	td:last-child {
		overflow: visible;
	}

	td::before {
		position: absolute;
		top: 1rem;
		left: 1rem;
		width: calc(50% - 2rem); /* etwas weniger als 50% für Abstand */
		padding-right: 1rem;
		white-space: nowrap;
		font-weight: bold;
		content: attr(data-label);
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.remove-btn {
		width: 100%;
		justify-content: center;
		display: flex;
		padding: 12px 16px;
		font-size: 1rem;
		box-sizing: border-box;
	}

	form {
		padding: 1rem;
	}

	form input {
		width: 100%;
	}
}