#flashnet-adress-output .editable-field{
	background-color: #fff;
	color: #000;
}
#flashnet-adress-output .success{
	background-color: #d3d3d3;
    color: #8b8b8b;
}

/* VERFÜGBARKEITSABFRAGE */

/* === Formular und Eingaben === */
#flashnet-search-container {
  width: 100%;
  box-sizing: border-box;
  margin-bottom: 3em;
}

.flashnet-input-full input[type="text"],
.flashnet-flex-row input[type="text"] {
  width: 100%;
  padding: 20px;
  border: none;
  border-radius: 30px;
  background: #fff;
  font-size: 1.2rem;
  box-sizing: border-box;
}

.flashnet-input-full input[type="text"] {
  color: #000;
  margin-bottom: 20px;
}

#flashnet-address::placeholder {
  color: #000;
  opacity: 1;
}

.flashnet-flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 20px;
}

.flashnet-flex-row input[type="text"] {
  background-color: rgba(255, 0, 0, 0);
  padding: 10px;
  flex: 1 1 calc(25% - 15px);
}

/* === Responsive Eingabefelder === */
@media (max-width: 1024px) {
  .flashnet-flex-row input[type="text"] {
    flex: 1 1 calc(50% - 15px);
    font-size: 1em;
    padding: 15px;
  }
	
  .flashnet-input-full input[type="text"] {
    font-size: 1em;
    padding: 15px;
  }
}

@media (max-width: 768px) {
  .flashnet-flex-row input[type="text"] {
    flex: 1 1 100%;
    font-size: 1em;
    padding: 15px;
  }

  .flashnet-input-full input[type="text"] {
    font-size: 1em;
    padding: 15px;
  }
}

/* === Adress-Container Styles === */
.flashnet-adress-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  padding: 2em;
  border: 1px solid #000;
  border-radius: 20px;
  margin-bottom: 2em;
}

.flashnet-adress-item {
  white-space: nowrap;
}

@media (max-width: 768px) {
  .flashnet-adress-container {
    flex-direction: column;
    gap: 0.5em;
  }
  
  .flashnet-adress-item {
    white-space: normal;
  }
}

/* === Adresszeile (Legacy Support) === */
.flashnet-produkt-adresszeile {
  display: flex;
  flex-wrap: nowrap;
  gap: 1.5em;
  margin-bottom: 2em;
  font-size: 1rem;
  color: #fff;
  white-space: nowrap;
}

.flashnet-produkt-adresszeile span {
  white-space: nowrap;
}

/* === Responsive Adresszeile: Bei mobilen Ansichten Umbrechen & untereinander === */
@media (max-width: 768px) {
  .flashnet-produkt-adresszeile {
    flex-direction: column;
    white-space: normal;
  }
}

/* PRODUKTE UND ANBIETER */

/* === Produkt-Wrapper === */
.flashnet-produkt-wrapper,
.flashnet-provider-products-wrapper.is-open {
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
  margin-top: 2em;
}

/* === Produktboxen: Desktop 30%, Tablet 48%, Smartphone 100% === */
.flashnet-produkt-container-produkt {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2em;
  background: #fff;
  color: #000;
  flex: 0 0 31%;
  max-width: 31%;
  box-sizing: border-box;
  position: relative;
}
.flashnet-produkt-container-produkt .flashnet-produkt-logo{
	max-height: 70px;
    border: 1px solid #000;
    position: absolute;
    right: -20px;
    top: -15px;
    background: #fff;

}
.flashnet-produkt-container-produkt.flashnet-produkt-container-recommended .flashnet-produkt-logo{
	border: 4px solid #da0d21;
}
.flashnet-produkt-logo-more{
	max-height: 70px;
}

.flashnet-contract-row{
	display: flex;
  flex-wrap: wrap;
  gap: 2em;
  margin-top: 2em;
}
.flashnet-contract-row h2{
	color: #da0d21;
}
.flashnet-contract-section-table {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2em;
  background: #fff;
  color: #000;
  box-sizing: border-box;
  flex: 0 0 48%;
  max-width: 48%;
}

.flashnet-contract-table thead tr th{
	background: #da0d21;
    color: #fff;
	border-color: #da0d21;
	padding: 8px 10px;
}

/* === Produktboxen: Desktop 30%, Tablet 48%, Smartphone 100% === */
.flashnet-contract-section {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2em;
  background: #fff;
  color: #000;
  flex: 0 0 23%;
  max-width: 23%;
  box-sizing: border-box;
}

/* === Responsive Contract Sections === */
@media (max-width: 1024px) {
  .flashnet-contract-section {
    flex: 0 0 48%;
    max-width: 48%;
  }
  
  .flashnet-contract-section-table {
    flex: 0 0 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

@media (max-width: 768px) {
  .flashnet-contract-section {
    flex: 0 0 100%;
    max-width: 100%;
  }
  
  .flashnet-contract-section-table {
    flex: 0 0 100%;
    max-width: 100%;
    overflow-x: auto;
  }
}

.flashnet-produkt-container-produkt button, .flashnet-produkt-container-produkt .btn-button{
  margin-top: 2em;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #C00000;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
  width: 100%
}
.flashnet-produkt-container-produkt .btn-button,.flashnet-produkt-container-produkt .btn-button:hover{
	line-height: 50px;
}


.flashnet-contract-section h2{
	font-size: 25px;
}

.flashnet-produkt-container-produkt button:hover,.flashnet-produkt-container-produkt .btn-button:hover {
  background-color: #000;
	color: #fff;
}

/* === Highlight für empfohlene Produkte === */

.flashnet-produkt-container-produkt.flashnet-produkt-container-recommended {
  border: 4px solid #DA0D21;
  border-radius: 20px;
  padding: 2em;
  background-color: #ffe9e9;
  color: #000;
  flex: 0 0 31%;
  max-width: 31%;
  box-sizing: border-box;
  background-blend-mode: darken;
}

#flashnet-produkt-container-produkt.flashnet-produkt-container-recommended {
  border: 4px solid #DA0D21;
  border-radius: 20px;
  padding: 2em;
  color: #000;
  flex: 0 0 31%;
  max-width: 31%;
  box-sizing: border-box;
}

/* === Preis unter Produktname, rot & gleich groß === */
.flashnet-produkt-preis {
  color: #c00000;
  font-size: 1.8em;
  font-weight: bold;
  margin-top: 1em;
  margin-bottom: 1em;
}

/* === Aktionen / Promos === */
.flashnet-produkt-container-produkt-promotions {
  border: 1px dashed #000;
  padding: 1em;
  margin: 1em 0;
  border-radius: 10px;
  background-color: #f9f9f9;
	position: relative
}
.flashnet-produkt-container-produkt-promotions .promotions-lable{
	position: absolute;
    right: 15px;
    top: -14px;
    background: #da0d21;
    color: #fff;
    padding: 1px 10px;
    border-radius: 10px;
    border: 1px solid #c00000;
    font-size: 12px;
    font-weight: 800;
}
/* === Produktzeile – Anbieter === */
.flashnet-produkt-container-line {
  margin-bottom: 1rem;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 1rem;
  background-color: #fff;
  color: #000;
  width: 100%;
  box-sizing: border-box;
}

.flashnet-produkt-container-line h3 {
  margin: 0;
  color: #000;
}

/* === Container für Produktzeile Header === */
.flashnet-produkt-container-header {
  margin-bottom: 1rem;
}

.flashnet-produkt-container-produkt-name {
  margin: 0;
  text-align: left;
  font-size: 1.2em;
  font-weight: bold;
}

/* === Container für Produktzeile Inhalt === */
.flashnet-produkt-container-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}

.flashnet-produkt-container-line-details {
  display: contents;
  gap: 2rem;
  flex: 1;
}

.flashnet-produkt-container-line-speed-down,
.flashnet-produkt-container-line-price,
.flashnet-produkt-container-line-technology {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.flashnet-point-title {
  font-size: 0.9em;
  color: #666;
  margin-bottom: 0.25rem;
}

.flashnet-point-speed,
.flashnet-point-price {
  font-weight: bold;
  font-size: 1em;
}

.flashnet-produkt-container-line-button {
  flex-shrink: 0;
}

.flashnet-produkt-container-line-button button {
  background-color: #C00000;
  color: white;
  border: none;
  padding: 0.75rem 1.5rem;
  border-radius: 45px;
  cursor: pointer;
  font-size: 1em;
  transition: background-color 0.3s ease;
}

.flashnet-produkt-container-line-button button:hover {
  background-color: #000;
  color: white;
  border-radius: 45px;
}

/* === Überschrift für weitere Anbieter === */
.flashnet-weitere-anbieter-heading {
  margin-top: 2em;
}

/* === Versteckte Produktboxen unter "Weitere Anbieter" === */
.flashnet-provider-products-wrapper {
  display: none;
}

.flashnet-provider-products-wrapper.is-open {
  display: flex;
  flex-wrap: wrap;
  gap: 3em;
  margin-top: 2em;
}

/* === Weitere Anbieter Produktboxen: identisch mit Hauptprodukten === */
.flashnet-provider-products-wrapper .flashnet-produkt-container-produkt {
  flex: 0 0 31%;
  max-width: 31%;
  box-sizing: border-box;
}

/* === Responsive Produktboxen === */
@media (max-width: 1024px) {
  .flashnet-produkt-container-produkt,
  .flashnet-provider-products-wrapper .flashnet-produkt-container-produkt, 
  .flashnet-produkt-container-produkt.flashnet-produkt-container-recommended, 
  #flashnet-produkt-container-produkt.flashnet-produkt-container-recommended,{
    flex: 0 0 48%;
    max-width: 48%;
  }
}

@media (max-width: 768px) {
  .flashnet-produkt-container-produkt,
  .flashnet-provider-products-wrapper .flashnet-produkt-container-produkt,
  .flashnet-produkt-container-produkt.flashnet-produkt-container-recommended, 
  #flashnet-produkt-container-produkt.flashnet-produkt-container-recommended{
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Mobile Responsive Design für Produktzeile */
  .flashnet-produkt-container-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }

  .flashnet-produkt-container-line-details {
    flex-direction: column;
    gap: 1rem;
  }

  .flashnet-produkt-container-line-speed-down,
  .flashnet-produkt-container-line-price,
  .flashnet-produkt-container-line-technology {
    align-items: center;
    text-align: center;
  }

  .flashnet-produkt-container-line-button {
    text-align: center;
  }

  .flashnet-produkt-container-line-button button {
    width: 100%;
    max-width: 200px;
  }
}

@media (max-width: 480px) {
  .flashnet-produkt-container-line-details {
    gap: 0.5rem;
  }

  .flashnet-point-title {
    font-size: 0.8em;
  }

  .flashnet-point-speed,
  .flashnet-point-price {
    font-size: 0.9em;
  }
}

/* PRODUKT BESTELLUNG */

#flashnet-produkt-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  align-items: flex-start;
}

#flashnet-produkt-container-order select {
  border-radius: 45px;
  padding: 1em;
}

.flashnet-produkt-container-form-description {
  margin-bottom: 1em;
}

#flashnet-produkt-container-produkt {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2em;
  color: #000;
  flex: 0 0 31%;
  max-width: 30%;
  box-sizing: border-box;
}

/* === Identische Formatierung für beide Produktboxen === */
#flashnet-produkt-container-produkt button {
  margin-top: 2em;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #C00000;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#flashnet-produkt-container-produkt button:hover {
  background-color: #000;
}

#flashnet-produkt-container-order {
  width: 70%;
  border: none;
  border-radius: 20px;
  background-color: #fff;
  color: #000;
  box-sizing: border-box;
  flex: 1 1 48%;
  display: flex;
  flex-direction: column;
}

#flashnet-adressanzeige {
  display: none;
}

.accordion {
  border: 1px solid #000;
  border-radius: 20px;
  padding: 2em;
  background-color: #fff;
  box-sizing: border-box;
  margin-bottom: 2em;
  display: none;
	
	
}

.accordion.active {
  display: block;
}

.flashnet-produkt-container-produkt, 
.flashnet-produkt-accordion-services, 
#flashnet-produkt-container-order .accordion,
.flashnet-adress-container
{

	background-image: url(https://oan.flashnet.at/wp-content/uploads/2025/05/WELLE.svg);
    background-position: center;
	background-color: #f5f5f5;
	background-size: 300%;
    background-blend-mode: color-dodge;
}


#customer_code-input-containe label {
  flex: 1 1 100%;
}

button,
input[type="submit"] {
  padding: 10px 30px;
  border-radius: 20px;
  border: none;
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

/* === OPTIMIERTE OPTION BOX STYLES === */
/* Auswahlelemente - Optimiert für responsive Grid Layout */
.router-selection,
.service-selection,
.additional-hardware-selection {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2em;
  width: 100%;
}

/* Desktop: Maximal 3 Boxen pro Reihe */
@media (min-width: 1025px) {
  .router-selection,
  .service-selection,
  .additional-hardware-selection {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Tablet: Maximal 2 Boxen pro Reihe */
@media (max-width: 1024px) and (min-width: 769px) {
  .router-selection,
  .service-selection,
  .additional-hardware-selection {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Mobile: Eine Box pro Reihe */
@media (max-width: 768px) {
  .router-selection,
  .service-selection,
  .additional-hardware-selection {
    grid-template-columns: 1fr;
  }
}


/* Alle Breakpoints in einer Regel zusammengefasst */
@media (max-width: 1024px) {
  .flashnet-produkt-container-produkt,
  #flashnet-produkt-container-produkt {
    width: 100% !important;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1em;
  }
}

/* Für kleinere Bildschirme nötig sind */
@media (max-width: 480px) {
  .flashnet-produkt-container-produkt,
  #flashnet-produkt-container-produkt {
    margin: 0;
    padding: 2em;
  }
}



.flashnet-option-box {
  background: #ffffff;
  padding: 2em;
  border: 1px solid #000;
  border-radius: 20px;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  height: auto;
  align-self: flex-start;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flashnet-option-box img {
  width: 50%;
  margin: 1em auto;
  display: block;
}

.flashnet-option-box > * {
  margin: 0;
}

.flashnet-option-box > * + * {
  margin-top: 1em;
}

.adress-fields,
.sepa-fields,
.uid-field{
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}
.uid-field{
	width: 100%
}

.adress-fields input,
.sepa-fields input ,
.uid-field input ,
#flashnet_openaccessid_div input ,
#flashnet-produkt-container-order select{
  flex: 1 1 48%;
  padding: 1em;
  border: 1px solid #ccc;
  border-radius: 45px;
  color: #333;
  box-sizing: border-box;
  font-size: 1em;
}
.company-checkbox{
	width: 100%;
}

.telephony-options {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

.buttons {
  margin-top: 2em;
}
.flashnet-flex{
	display: flex;
}
.flashnet-flex label{
	flex: 1;
}
.flashnet-option-box-title{
	float: left;
}
#flashnet_telephony, #flashnet_tv_box,#flashnet_fixed_ip{
	float: right;
	width: 50px;
	height: 50px;
}


#flashnet-loading-container{
	color: #fff;
    font-size: 20px;
    text-align: center;
}
.flashnet-option-box{
	cursor: pointer;
}
.flashnet-option-box:hover{
	border: 1px solid #DA0D21;
}
.flashnet-option-box.selected{
	border: 4px solid #DA0D21;
	padding: calc(2em - 3px);
	
}
.router-selection .flashnet-option-box input[type='radio']{
	opacity: 0;
}

#flashnet-search-container .flashnet-flex-row label select{
	width: 100%;
    padding: 20px;
    border: none;
    border-radius: 30px;
    background: #fff;
    font-size: 1.2rem;
    box-sizing: border-box;
	    padding: 14px;
}
#flashnet-search-container .flashnet-flex-row label span{
    color: #fff;
    font-size: 20px;
    padding-bottom: 10px;
    /* margin-bottom: 10px; */
    display: block;
}

#flashnet-search-container #flashnet-next-button{
    background: #fff;
	color: #000;
}
#flashnet-floor,flashnet-stair,flashnet-block,flashnet-door{
	background-color: #d3d3d3;
    color: #8b8b8b;
}

.fixed-ip-description{
	background: #fff;
	grid-column: span 2; 
	border: 1px solid; 
	padding: calc(2em - 3px); 
	border-radius: 20px;
}

.fixed-ip-description .ip-explanation{
	display: flex
}
.fixed-ip-description .ip-explanation .explanation-card{
	flex: 10
}
.fixed-ip-description .ip-explanation .explanation-arrow{
	flex: 1
}
#flashnet-produkt-container-customer{
	width: 100%
}
                   


/* === Responsive Boxhöhenanpassung === */
@media (max-width: 1024px) {
  #flashnet-produkt-container-order,
  #flashnet-produkt-container-produkt {
    flex: 1 1 100%;
  }


}
/* Wackel-Animation */
@keyframes shake {
    0%, 100% { transform: rotate(0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(1deg); }
    20%, 40%, 60%, 80% { transform: rotate(-1deg); }
}



/* Klasse für das Wackeln */
.attention-shake {
    animation: shake 0.5s ease-in-out;
}

.flashnet-produkt-regular{
	color: #000;
    font-size: 50%;
    text-decoration: line-through;
    text-decoration-thickness: 2px;
    font-weight: 300;
}
.flashnet-point-regular{
    text-decoration: line-through;
    text-decoration-thickness: 2px;
}

.accordion-process{
	display: flex; 
	padding: 0;
	overflow: hidden;
	border: 3px solid #DA0D21;
  	border-radius: 20px;
	margin-bottom: 2em;
}
.accordion-process .step{
	flex: 1;
    text-align: center;
    position: relative;
    padding: 15px 0;
    color: #000;
    background: #f5f5f5;
    font-size: 12px;
    padding-left: 27px;
}
.accordion-process .step.fin{
	color: #fff;
	background: #DA0D21;
}
.accordion-process .step::before {
    border-style: solid;
    border-width: 30px 20px 30px 24px;
    top: -4px;
    bottom: -4px;
    content: "";
    left: 0px;
    position: absolute;
    z-index: 1;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #DA0D21;

}
#accordion-process-0::before {
	display: none
}
.accordion-process .step::after {
    border-style: solid;
    border-width: 26px 16px 26px 21px;
    top: 0px;
    bottom: 0px;
    content: "";
    right: -37px;
    position: absolute;
    z-index: 4;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #f5f5f5;
}
.accordion-process .step.fin::after {
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #DA0D21;
}
	.input-wrapper {
		flex: 1 1 48%;
		position: relative;
	}

	.input-wrapper label {
		position: absolute;
		top: 4px;
		right: 20px;
		padding: 0 5px;
		color: #999;
		font-size: 12px;
	}

/* Accordion-Prozess in mobiler Ansicht ausblenden */
@media screen and (max-width: 768px) {
    .accordion-process {
        display: none;
    }
}