.warenkorb-buttons img {
    vertical-align: middle; /* Zentriert das Bild vertikal */
}

.termin-font {
    color: rgba(0, 87, 140, 1);
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 5px;
    display: block; /* Für bessere Abstände */
}

.nav-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000;
}

.nav-menu {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 50px;
    right: 0;
    width: 250px;
    background-color: #f5f5f5;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transition: all 0.3s ease;
}

.nav-menu.active {
    display: flex;
}

.nav-menu .nav-item {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    justify-content: center;
    padding: 10px 0;
    margin: 5px 0;
    color: #fff;
    transition: color 0.3s ease;
}

.nav-menu img {
    margin-right: 8px;
}



/* Standard-Style für btn-primary */
.btn.btn-primary {
    background: rgba(0,116,187,1);
    border: 0.05rem solid rgba(0,116,187,1);
    color: #fff; /* SVG und Text sind weiß */
    border-radius: 9px;
    padding: 0.3rem 0.9rem 0.2rem;
}

/* Hover-Style für btn-primary */
.btn.btn-primary:hover,
.btn.btn-primary:focus {
    background: #fff;
    color: rgba(0,116,187,1); /* SVG und Text werden blau */
    border: 0.05rem solid rgba(0,116,187,1);
}


/* Standard-Style für btn-secondary */
.btn.btn-secondary {
    background: rgba(0, 150, 240, 1); /* Hellere Blaue Nuance */
    border: 0.05rem solid rgba(0, 150, 240, 1);
    color: #fff;
    border-radius: 9px;
    padding: 0.3rem 0.9rem 0.2rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Hover-Style für btn-secondary */
.btn.btn-secondary:hover,
.btn.btn-secondary:focus {
    background: #fff;
    color: rgba(0, 150, 240, 1);
    border: 0.05rem solid rgba(0, 150, 240, 1);
}


/* Standard-Style für btn-error */
.btn.btn-error {
    background: #e85600;
    border: 0.05rem solid #d95000; /* Angepasst an Spectre */
    color: #fff;
    border-radius: 9px; 
}

/* Hover-Style für btn-error */
.btn.btn-error:focus,
.btn.btn-error:hover {
    background: #de5200;
    border-color: #cf4d00;
    color: #fff;
    border-radius: 9px; /* Optional, für Konsistenz */
}

/* active-Style für btn-error */
.btn.btn-error:active,
.btn.btn-error.active {
    background: #c44900;
    border-color: #b54300;
    color: #fff;
    border-radius: 9px; /* Optional, für Konsistenz */
}


.user-info {
    padding: 10px 0;
    text-align: center;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.user-info strong {
    color: rgba(0,116,187,1);
}







@import url("https://hello.myfonts.net/count/39c0b3");
@font-face {
	font-family:'Uni65';
	font-style:normal;
	font-weight:normal;
	src:url('../fonts/39C0B3_0_0.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/39C0B3_0_0.woff2') format('woff2'),
		 url('../fonts/39C0B3_0_0.woff') format('woff'),
		 url('../fonts/39C0B3_0_0.ttf') format('truetype');
}

@font-face {
	font-family:'Uni65';
	font-style:italic;
	font-weight:normal;
	src:url('../fonts/39C0B3_1_0.eot?#iefix') format('embedded-opentype'),
		 url('../fonts/39C0B3_1_0.woff2') format('woff2'),
		 url('../fonts/39C0B3_1_0.woff') format('woff'),
		 url('../fonts/39C0B3_1_0.ttf') format('truetype');
}

body            { margin:0; font-family:Uni65, Arial, sans-serif; font-size:.8rem; 
				          letter-spacing:.0125rem; color:rgba(0,116,187,1);
				          -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; }
header          { position:fixed; z-index:100; width:100%; height:3rem; 
                  -webkit-box-shadow:0 5px 5px 0 rgba(0,0,0,0.25);
                  -moz-box-shadow:0 5px 5px 0 rgba(0,0,0,0.25);
                  box-shadow:0 5px 5px 0 rgba(0,0,0,0.25); }
header.open     { height:auto; padding-bottom:2rem; }
main            { padding-top:3rem; }
.container 		  { padding:0 1rem; }
p  	            { font-size:1rem; line-height:1.25; }
li              { font-size:.9rem; line-height:1.25; }
ol, ul	        { list-style-position:outside; display:block; padding-left:1.5rem; margin:0 1rem 1.2rem 0; }
ol li:first-of-type, ul li:first-of-type 
                { margin-top:0; }
h1, h2, h3, legend { color:rgba(0,116,187,1); }
.blue h1, .blue h2, .blue h3, .blue legend 
				        { color:#fff; }
h1				      { font-size:1.6rem; }
h2, legend	    { font-size:1.35rem; border-top:2px solid #fff;
                  padding-top:.375rem; margin-bottom:.5em; line-height: 1.2;}
small, .small   { display:inline-block; line-height:1.5; }
p.small         { font-size:80%; font-weight:400; display:block; }
a, a:hover, a:active, 
a:visited    	  { text-decoration:none !important; color:#fff; }
#logogramm      { float:left; margin-top:.35rem; margin-left:-.5rem;}
#typogramm      { float:left; margin:.875rem 0 0 1.5rem; width:15rem; height:auto; }
.red            { background-color:rgba(226,0,37,1); color:#fff; }
.blue           { background-color: rgba(0,116,187,1); color:#fff; }
p.red           { padding:.35rem .35rem .25rem; border-radius:.1rem; }
footer			    { background-color:#fff; padding:.5rem 0; margin-top:.5rem; }
.ele, a.ele, a.blaubart, #footernav a 
                { color:rgba(0,116,187,1); }
.ele, a.ele, #footernav a 
                { margin-right:1rem; }
a.ele:hover, #footernav a:hover		
                { border-bottom:2px solid rgba(0,116,187,1); }
a.blaubart		  { border-bottom:1px solid rgba(0,116,187,1); }
a.blaubart:hover
                { border-bottom:2px solid rgba(0,116,187,1); }
.mt-6           { margin-top:.6rem; }
.mt-12          { margin-top:1.2rem; }
.mt-16          { margin-top:1.6rem; }
.mt-24          { margin-top:2.4rem; }

.form-label       { padding-bottom:0; }
.form-input       { background-color:#f9f9f9; padding:.25rem .4rem .1rem; line-height:1; }
.form-input.is-error, 
.has-error .form-input
									{ background-color:#f9f9f9; border: .05rem solid #bcc3ce; }
.form-label.is-error
									{ color:rgba(226,0,37,1); }
.form-input:focus, .form-input.is-error:focus, 
.has-error .form-input:focus
                	{ border-color: #dedede; box-shadow: 0 0 0 0.1rem rgba(222,222,222,.2);
										background-color:#fff; }
.form-switch .form-icon 
                  { background-color: #dedede; }
.form-checkbox input:checked+.form-icon, .form-radio input:checked+.form-icon, 
.form-switch input:checked+.form-icon 
								  { background: #67bf54; border-color:#bcc3ce; }
.form-checkbox input:focus+.form-icon, .form-radio input:focus+.form-icon, 
.form-switch input:focus+.form-icon 
								  { border-color:#bcc3ce; box-shadow:none; }
textarea.form-input#bemerkungen   { height:5.5rem; }
.form-group       { clear:both; overflow:hidden; }
.form-input.plz   { float:left; width:24%; display:inline-block; }
.form-input.ort   { width:74.5%; float:right; display:inline-block; }
.btn.btn-primary  { background:rgba(0,116,187,1); border:.05rem solid rgba(0,116,187,1);
                    color:#fff; border-radius:9px; padding:.3rem .9rem .2rem; }
.btn.btn-primary:hover, .btn.btn-primary:focus
									{ background:#fff; color:rgba(0,116,187,1); border:.05rem solid rgba(0,116,187,1); }

#lieferadresse, #postadresse { display:none; }

p.danke           { color:green; margin:20px 0 80px;}

@media (max-width:479px) {
	#typogramm  { display:none; } 
}

@media (min-width:480px) and (max-width:639px) {
	#typogramm  { width:12rem; 	margin:1.125rem 0 0 .875rem; }
}

@media (min-width:640px) and (max-width:767px) {
	#typogramm  { width:18rem; }
}

@media (min-width:768px) {
	#logogramm             { margin-left:0;}
	#typogramm             { width:19rem; }
	h1				             { font-size:2rem; }
}





/* Hamburger-Menü Styling */
.nav-container {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2000;
}

/* Hamburger-Button Styling */
.hamburger {
    padding: 10px;
    cursor: pointer;
    background-color: rgba(0,116,187,1);
    border: none;
}

.hamburger-icon {
    display: block;
    width: 35px;
    height: 4px; /* Dicker: von 3px auf 4px erhöht */
    background-color: #fff;
    position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
    content: '';
    position: absolute;
    width: 35px;
    height: 4px; /* Dicker: von 3px auf 4px erhöht */
    background-color: #fff;
    transition: all 0.3s ease;
    left: 0;
}

.hamburger-icon::before {
    top: -10px; /* Weiter auseinander: von -8px auf -10px erhöht */
}

.hamburger-icon::after {
    bottom: -10px; /* Weiter auseinander: von -8px auf -10px erhöht */
}



/* Styling für Benutzerinfo */
.user-info {
    padding: 10px 0;
    text-align: center;
    color: #333;
    font-size: 16px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 10px;
}

.user-info strong {
    color: rgba(0,116,187,1);
}


/* aus dem Skript "Administratiron" */
.admin-menu {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: flex-start;
    margin-top: 20px;
}

.admin-item {
    flex: 1 1 calc(33.333% - 20px);
    min-width: 200px;
    max-width: 300px;
}

.btn-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 15px;
    height: 150px;
    text-align: center;
    font-size: 1rem;
    border-radius: 8px;
    transition: transform 0.2s;
}

.btn-block:hover {
    transform: scale(1.05);
}

.btn-block img {
    margin-bottom: 10px;
}

.btn-block span {
    display: block;
}

.button-container {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.table th, .table td {
    padding: 10px;
    text-align: left;
}

.table tr:nth-child(even) {
    background-color: #f2f2f2;
}

.alert {
    padding: 15px;
    margin-bottom: 20px;
    border-radius: 4px;
}

.alert-error {
    background-color: #f8d7da;
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.alert-success {
    background-color: #d4edda;
    color: #155724;
    border: 1px solid #c3e6cb;
}

.error-message {
    color: #FF0000;
    font-weight: bold;
}

.success-message {
    color: #00cd00;
    font-weight: bold;
}

.text-error {
    color: #FF0000;
    font-size: 0.9rem;
}

@media (max-width: 840px) {
    .admin-item {
        flex: 1 1 calc(50% - 20px);
    }
}

@media (max-width: 480px) {
    .admin-item {
        flex: 1 1 100%;
    }
}


/* Styling für inaktive Buttons */
.btn-inactive {
    opacity: 0.5; /* Transparenz für inaktive Buttons */
    pointer-events: none; /* Verhindert Klicks auf inaktive Buttons */
    cursor: not-allowed; /* Zeigt einen "verbotenen" Cursor */
}

/* Sicherstellen, dass Bilder und Text in inaktiven Buttons ebenfalls transparent sind */
.btn-inactive img,
.btn-inactive span {
    opacity: 0.5;
}

/* Hover-Effekt für inaktive Buttons deaktivieren */
.btn-inactive:hover,
.btn-inactive:focus {
    background: rgba(0,116,187,1); /* Beibehaltung der ursprünglichen Hintergrundfarbe */
    color: #fff; /* Beibehaltung der ursprünglichen Textfarbe */
    border: 0.05rem solid rgba(0,116,187,1); /* Beibehaltung des ursprünglichen Rahmens */
    transform: none; /* Kein Skalierungseffekt beim Hover */
}





/************** Wird vermutlich nicht mehr benötigt - war mal ein experiment mit mehreren Adrssen ****************/
/* ================================================= */
/*         Verbesserte Trennung der Adresskarten     */
/* ================================================= */

.addresses-cart {
    display: flex;
    flex-direction: column;
    gap: 32px;                  /* deutlich mehr Abstand zwischen den Karten */
}

.address-card {
    background: #ffffff;
    border: 1px solid #d0d8e0;  /* etwas sichtbarerer Rahmen */
    border-radius: 10px;
    padding: 28px 32px;         /* mehr Innenabstand → wirkt luftiger */
    box-shadow: 
        0 4px 12px rgba(0, 0, 0, 0.08), 
        0 1px 4px rgba(0, 0, 0, 0.04);  /* stärkerer, aber weicher Schatten */
    transition: all 0.18s ease;
}

.address-card:hover {
    box-shadow: 
        0 8px 24px rgba(0, 0, 0, 0.10),
        0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);    /* leichter Lift-Effekt beim Hover */
}

/* Absender-Karte optisch hervorheben */
.address-card.is-absender {
    border-color: #1e88e5;
    background: linear-gradient(to bottom, #f8fbff, #ffffff);
    box-shadow: 
        0 6px 16px rgba(30, 136, 229, 0.15),
        0 2px 6px rgba(0, 0, 0, 0.05);
}

/* Alternative: dünne Trennlinie zwischen Karten (falls du weniger Schatten magst) */

.address-card + .address-card {
    border-top: 1px solid #e0e8f0;
    padding-top: 32px;
    margin-top: -16px; /* kompensiert doppelten Abstand */
}
.address-card:nth-child(odd) {
    background: #fafcff;        /* ganz helles Blau-Grau */
}

.address-card:nth-child(even) {
    background: #ffffff;
}