@charset "UTF-8";
/*//////////////////////////////////////////////=============================
         FOOTBALLEREI  //////////   © 2025 seltsam., Tim Gloystein
=============================//////////////////////////////////////////////*/

/*//////////////////////////////////////////////=============================
     FONTS
=============================//////////////////////////////////////////////*/
@font-face {
 font-family: 'MetronicSlabProSemiBold';
 src: url('../fonts/footballerei/MetronicSlabPro-SemiBold.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'MetronicSlbNarowBold';
 src: url('../fonts/footballerei/MetronicSlbNarow-Bold.otf') format('opentype');
 font-weight: normal;
 font-style: normal;
}
@font-face {
 font-family: 'Nove';
 src: url('../fonts/nove/nove-webfont.woff') format('woff');
 font-weight: normal;
 font-style: normal;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     BASICS
=============================//////////////////////////////////////////////*/
:root {
 --eggwhite: #ffffff;
 --inkblack: #060606;
/* color: var(--orange);*/
}
body {
 font-family: "MetronicSlabProSemiBold", Helvetica, Arial, sans-serif;
 color: var(--eggwhite);
 position: relative;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     STYLING
=============================//////////////////////////////////////////////*/
h1 {
 font-family: 'MetronicSlbNarowBold', sans-serif;
 text-transform: none;
 font-size: 3rem;
 line-height: 3.4rem;
 color: var(--eggwhite);
}
h2 {
 font-family: 'MetronicSlbNarowBold', sans-serif;
 font-size: 3.4rem;
 line-height: 3.6rem;
 margin-bottom: 2rem;
 color: var(--eggwhite);
}
h3 {
 font-family: 'MetronicSlbNarowBold', sans-serif;
 font-size: 2.4rem;
 text-transform: none;
}
p {
 font-size: 2.0rem;
 line-height: 2.4rem;
 margin-bottom: 1.6rem;
}
p.small {
 font-size: 1.3rem;
 line-height: 1.5rem;
 text-align: left;
}
p.msg {
 font-family: 'MetronicSlabProSemiBold', sans-serif;
}
ol {
 padding-left: 3rem;
}
ol.small {
 font-size: 1.5rem;
 font-weight: 500;
}
.btn-danger {
 color: var(--fontyellow);
 font-size: 1rem;
 width: 509px;
 height: 128px;
}
.btn-light {
 background: var(--white);
 color: var(--jangpink);
}
.btn-footballerei {
 background-color: #EA0029;
 color: white;
 font-weight: 600;
 font-size: 2.125rem; /* 18px */
 padding: 0.875rem 2rem; /* 14px 32px */
 border-radius: 1rem; /* 6px */
 border: 2px solid white;
 text-transform: none;
 letter-spacing: 0.01em;
 transition: background-color 0.2s ease;
}

.btn-footballerei:hover {
 background-color: #C4001F;
 color: white;
 border-color: white;
}

.btn-footballerei:active,
.btn-footballerei:focus {
 background-color: #A40019;
 color: white;
 border-color: white;
 box-shadow: 0 0 0 0.2rem rgba(234, 0, 41, 0.25);
}
ol.upper-roman {
 list-style-type: upper-roman;
} 
ol.lower-alpha {
 list-style-type: lower-alpha;
} 
table {
 color: var(--eggwhite) !important;
 border-color: var(--eggwhite) !important;
 width: auto !important;
 font-size: 1.2rem !important;
 font-family: "MetronicSlabProSemiBold", Helvetica, Arial, sans-serif;
}
.table-hover>tbody>tr:hover>* {
 color: #ea0029;
}
.anker {
 margin-bottom: 0;
}
label {
 font-family: "MetronicSlabProSemiBold", Helvetica, Arial, sans-serif;
}
.pizzatainmentLogo {
 font-family: 'Nove', sans-serif;
}
.touchdown {
 padding: 2.5rem;
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     LAYOUT
=============================//////////////////////////////////////////////*/
.footballerei header #logo {
 position: relative;
 z-index: 1000;
 width: 200px;
 margin: 0 auto;
}
.footballerei header #logo img {
 display: block;
 margin-top: 0px;
 transition: all 0.4s;
 width: 120px;
}
.footballerei .page {
 position: relative;
 margin-top: 20px;
 padding-top: 60px;
 max-width: 90%;
}
/*==========================/////////////////////==========================*/


/* ====================================
   FOOTBALLEREI - PIZZA SELECTION CARDS
   ==================================== */

.pizza-selection {
 margin: 3rem 0;
}

.pizza-card {
 background: rgba(255, 255, 255, 0.1);
 border: 3px solid transparent;
 border-radius: 15px;
 padding: 1.5rem;
 cursor: pointer;
 transition: all 0.3s ease;
 position: relative;
 margin-bottom: 2rem;
 display: block;
}

.pizza-card:hover {
 border-color: rgba(255, 255, 255, 0.3);
 transform: translateY(-5px);
 box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.pizza-card.active {
 border-color: #ea0029;
 background: rgba(234, 0, 41, 0.15);
 box-shadow: 0 0 20px rgba(234, 0, 41, 0.5);
}

/* Radio Button verstecken */
.pizza-card input[type="radio"] {
 position: absolute;
 opacity: 0;
 pointer-events: none;
}

/* Produktbild (Packung) */
.pizza-card .product-image {
 width: 100%;
 height: auto;
 margin-bottom: 1rem;
 display: block;
}

/* Pizza-Foto */
.pizza-card .pizza-image {
 width: 100%;
 height: auto;
 margin: 1rem 0;
 display: block;
}

/* Pizza-Name unten */
.pizza-card .pizza-name {
 font-size: 1.1rem;
 font-weight: bold;
 color: #fff;
 text-align: center;
 margin-top: 1rem;
}

/* Checkbox-Indikator unten links */
.pizza-card .checkbox-indicator {
 position: absolute;
 bottom: 15px;
 left: 15px;
 width: 30px;
 height: 30px;
 border: 3px solid #fff;
 border-radius: 5px;
 background: transparent;
 transition: all 0.3s ease;
 z-index: 10;
}

.pizza-card.active .checkbox-indicator {
 background: #ea0029;
 border-color: #ea0029;
}

/* Häkchen bei aktiver Auswahl */
.pizza-card.active .checkbox-indicator:after {
 content: '✓';
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%);
 color: #fff;
 font-size: 20px;
 font-weight: bold;
}

/* Responsive: Mobile */
@media (max-width: 768px) {
 .pizza-card {
  margin-bottom: 2rem;
 }
}



/*//////////////////////////////////////////////=============================
     BREAKPOINTS BOOTSTRAP v5.2
=============================//////////////////////////////////////////////*/
/*// Small devices (landscape phones, 576px and up) //*/
@media (min-width: 576px) {
 .container {
  max-width: none;
 }
}
/*// Medium devices (tablets, 768px and up) //*/
@media (min-width: 768px) {
 h1 {
 font-size: 4rem;
 line-height: 4.4rem;
 }
}
/*// Large devices (desktops, 992px and up) //*/
@media (min-width: 992px) {
 .footballerei .page {
  margin-top:20px;
 }
 h1 {
  font-size: 6rem;
  line-height: 6.4rem;
 }
 h2 {
  font-size: 5.5rem;
  line-height: 4.8rem;
 }
 p {
 font-size: 2.8rem;
 line-height: 3.2rem;
 margin-bottom: 1.6rem;
}
 p.small {
  font-size:1.5rem;
  line-height: 1.8rem;
 }
 ul {
  /*font-size: 1.4rem;
  line-height: 2.4rem;*/
 }
 table {
  font-size: 1.5rem !important;
 }
}
/*// X-Large devices (large desktops, 1200px and up) //*/
@media (min-width: 1200px) {
 .footballerei header #logo img {
  width: 200px;
  margin-top: 0px;
 }
 h1 {

 }
 h2 {
  font-size: 5.5rem;
 }
  p {
  font-size: 2.5rem;
  line-height: 3.8rem;
  margin-bottom: 1.6rem;
 }
 ol {
  font-size: 2.5rem;
  line-height: 3.8rem;
  margin-bottom: 1.6rem;
 }
 .footballerei .page {
  margin-top:20px;
 }
}
/*// XX-Large devices (larger desktops, 1400px and up) //*/
@media (min-width: 1400px) {
 .footballerei .page {
  margin-top:20px;
  max-width: 1320px;
 }
}
@media (min-width: 1780px) {
}
/*==========================/////////////////////==========================*/


/*//////////////////////////////////////////////=============================
     PRINT
=============================//////////////////////////////////////////////*/
@media print {
 * {
  background: transparent !important;
  color: #000 !important;
  box-shadow: none !important;
  text-shadow: none !important;
 }
 a, a:visited {
  text-decoration: underline !important;
  border: none !important;
 }
 a[href]:after {
  content: " ("attr(href) ")";
 }
 abbr[title]:after {
  content: " ("attr(title) ")";
 }
 .ir a:after, a[href^="javascript:"]:after, a[href^="#"]:after {
  content: "";
 }
 pre, blockquote {
  border: 1px solid #999;
  page-break-inside: avoid;
 }
 thead {
  display: table-header-group;
 }
 tr, img {
  page-break-inside: avoid;
 }
 img {
  max-width: 100% !important;
 }
 @page {
  margin: 0.5cm;
 }
 p, h2, h3 {
  orphans: 3;
  widows: 3;
 }
 h2, h3 {
  page-break-after: avoid;
 }
}