@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body{	min-height: 100vh;
		background: linear-gradient(120deg, rgba(45, 100, 102, 1) 0%, rgba(112, 190, 191, 1) 51%, rgba(255, 107, 107, 1) 100%);
		background-size: cover;
		background-attachment: fixed;
		background-position: center;
		font-family: 'Poppins', sans-serif;
		font-size:16px;
		font-weight:normal;
		margin:0;
		}
      

		.center-container {
		  min-height: 100vh;      /* full viewport height */
		  display: flex;
		  justify-content: center; /* center horizontally */
		  align-items: center;     /* center vertically */
		}

	  .loginbox{
            max-width:400px;
			background:#fff;
            border-radius:20px;
            padding:25px;
            box-shadow:0 2px 24px #e0f3fa;
            text-align:center;
        }
		.logotext-logo{
            background:url("../images/planaya_logo.svg") ;
			width:100%;
			height:120px;
			background-position: center;
			background-repeat: no-repeat;
			background-size: 220px auto;
			margin-bottom:20px;
			
        }
		
        .logotext{
			background:url("../images/planaya_logo.svg") ;
			width:100%;
			height:120px;
			background-position: left 20px;
			background-repeat: no-repeat;
			background-size: 250px auto;
			margin-bottom:50px;
			 filter: brightness(0) invert(1);
			}
        .logosub{color:#15657a;font-size:1.14em;margin-bottom:16px;}
        .loginform-group {
            position:relative;margin-bottom:19px;text-align:left;
        }
        .loginform input{
            width:calc(100% - 80px);padding:13px 44px 13px 38px;font-size:1.11em;border-radius:9px;
            border:1.7px solid #b2dbf7;outline:none;transition:.13s;background:#f8fdff;box-sizing: content-box;
        }
        .loginform input:focus{border-color:#219ebc;background:#f4fbfe;}
        
		.inputicon{
            position:absolute;left:11px;top:50%;transform:translateY(-50%);color:#90b4ce;font-size:1.17em;pointer-events:none;
        }
        .pw-toggle {
            position: absolute; top: 50%; right: 12px; transform:translateY(-50%);
            background: none; border: none; cursor: pointer; color: #90b4ce; font-size: 1.09em; padding:2px 5px;
        }
        .loginform button[type="submit"]{
            background:#219ebc;
			color:#fff;
            border:none;
			-border-radius:11px;
            padding:14px 0;
			width:100%;
            font-size:1.16em;
			font-weight:700;
            margin-top:6px;
            box-shadow:0 2px 12px #eaf6fb;
            cursor:pointer;
			transition:.13s;
        }
        .loginform button[type="submit"]:hover{background:#15657a;}
        
		.loginerror{color:#ef476f;background:#fbeaea;padding:9px 0 9px 0;margin-bottom:13px;border-radius:10px;font-size:1.1em;}
        
		.pwforgot{display:block;margin-top:18px;font-size:1em;color:#15657a;text-decoration:underline;}
        
		
		
		nav {
			position:absolute;
			top:60px;
			right:0;
			
			}
		
		
		nav ul {
		  list-style: none;      /* entfernt die Aufzählungszeichen */
		  padding: 0;
		  margin: 0;
		  display: flex;         /* ordnet die Listenelemente horizontal an */
		}

		nav ul li {
		  margin-right: 20px;    /* Abstand zwischen den Menüpunkten */
		}

		nav ul li:last-child {
		  margin-right: 0;       /* kein Abstand beim letzten Element */
		}
		nav ul li a {
		  width: 50px;
		  height: 50px;
		  border-radius: 50%; /* rund */
		  background-color: rgba(255, 255, 255, 0.25); /* Glasfläche */
		  backdrop-filter: blur(10px);
		  -webkit-backdrop-filter: blur(10px);
		  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
		  display: flex;
		  align-items: center;
		  justify-content: center;
		  transition: all 0.3s ease;
		  -text-indent: -9999px; /* Text verstecken */
		  background-repeat: no-repeat;
		  background-position: center;
		  background-size: 50% auto; /* Icon skaliert ins Zentrum */
		 
		}

		
		
		.icon-nav{
			width:50px;
			height:50px;
			background-repeat: no-repeat; 
			background-size:25px 25px; 
			background-position: center;
			-filter: invert(100%);
			}
		.icon-color {color: #7c3aed;}
		
		nav ul li a.cart-icon {
			background-image: url('/images/icon/cart-shopping-solid.svg'); 
			}
		nav ul li a.logout {
			background-image: url('/images/icon/logout.svg') ; 
			
			}
		nav ul li a.user {
			background-image: url('/images/icon/user-solid.svg') ; 
			
			}
		nav ul li a.party {
			background-image: url('/images/icon/party-solid.svg') ; 
			
			}
		nav ul li a.home {
			background-image: url('/images/icon/home-solid.svg') ; 
			
			}
		
		
		.kidnav{width:30px;height:30px;padding:10px 10px 10px 0;}
		.kiddel{position:absolute; right:10px;top:10px; width:25px;height:25px;padding:10px 10px 10px 0;}
		.kid-edit{background:#fff; color:#000; padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:400; border:none; cursor:pointer;}
		
		
		
		.header {  position:relative; max-width: 1200px;text-align:center; margin:0 auto; padding:0 32px;}
        .header h1 { margin:0; font-size:2.1em; font-weight:700;}
        .header .logout-btn { float:right; margin-right:24px; margin-top:6px; padding:9px 18px; border-radius:10px; background:#219ebc; color:#fff; border:none; font-size:1em; font-weight:600; cursor:pointer; }
        
		#footer {
			position: relative;
			max-width: 1200px;
			text-align: center;
			margin: 0 auto;
			padding: 0 0 50px 0;
			text-align:center; 
			font-size:14px; 
			color:#555; }
			
		#footer a {color:#fff; text-decoration:none;}
		
		.content, .container { 
			max-width: 1200px; 
			margin:36px auto 18px auto; 
			padding:16px;
			background: rgba(255, 255, 255, 0.25);
			border-radius: 20px;
			backdrop-filter: blur(12px);
			-webkit-backdrop-filter: blur(12px);
			box-shadow: 0 8px 24px rgba(0,0,0,0.1);
			border: 1px solid rgba(255,255,255,0.3);
			}
        .welcome { font-size:1.18em; margin-bottom:24px; color:#fff;}
        .section-title { color:#fff; font-size:1.35em; margin:38px 0 18px 0; }
        
		
		.list-cards { display:flex; flex-wrap:wrap; gap:24px; justify-content: flex-start;}
        .card {
            background: rgba(255, 255, 255, 0.25); /* Glasfläche */ 
			border-radius: 20px; 
			padding: 24px;
            flex:1 1 auto; 
			box-shadow: 0 8px 24px rgba(0,0,0,0.15);
			border: 1px solid rgba(255,255,255,0.3);
			transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .card h3 { margin: 0 0 10px 0; color:#023047; font-size:1.18em;}
        .card .small { color:#fff; -font-size:0.98em;}
        .card ul { padding:0 0 0 18px; margin:0;}
        
		.cart-icon { float:right;margin-right:20px;text-decoration:none;position:relative;}
        .cart-badge { position:absolute;top:-6px;right:-8px;background:#FFCC01;color:#000;font-size:0.93em; width:20px; height:20px; padding:4px;border-radius:50%;}
		
		
		.btn-main { display:inline-block; margin-top:13px; background: #FF6665; /* Glasfläche */ color:#fff; border:none; padding:10px 26px; border-radius:15px; font-weight:700; font-size:1em; cursor:pointer; transition:background 0.17s;}
        .btn-main:hover { background:#FF6665; color:#023047;}
        
		h3{margin:0;}
        
		
		
		.glasmain {
			background: rgba(255, 255, 255, 0.25); /* Glasfläche */
			border-radius: 20px;
			padding: 16px;
			box-shadow: 0 8px 24px rgba(0,0,0,0.15);
			border: 1px solid rgba(255,255,255,0.3);
		}
		
		
		.invitation-box{
			transition: transform 0.3s ease, box-shadow 0.3s ease;
			color: #fff;
			}
		
		.birthday-box {
			display:flex;
			align-items:center;
			gap:26px;
			margin-bottom:32px;			
			}
			
        .birthday-box img {
			width:90px;
			height:90px;
			border-radius:50%;
			object-fit:cover; 
			box-shadow: 0 4px 12px rgba(255,255,255,0.15);
			border: 1px solid rgba(255,255,255,0.3);
			}
			
		:root{
			  --ok:#27c97f; --ok-b:#1b7a4c;
			  --warn:#ffd23f; --warn-b:#bfa900;
			  --past:#ef476f; --past-b:#8a2031;
			  --chip:#f4f4f5; --muted:#677185;
			}
			.section-title{margin:10px 0 8px; font-weight:600; }
			.inv-list{
				display:grid; 
				gap:12px;
				}
			.inv-card{
			   
			}
			.inv-head{
				display: grid;
				grid-template-columns: 1fr 1fr; /* 50/50 */
				gap: 1rem;
				align-items: start;
				}
			
			.inv-title{font-weight:700; font-size:1.02rem; line-height:1.35;}
			
			.status-chip{ display:inline-flex; align-items:center; gap:8px; padding:5px 10px;
			  background:var(--chip); border-radius:10px; font-weight:400; font-size:.9rem;}
			
			.dot{width:12px; height:12px; border-radius:50%;}
			.dot.ok{background:var(--ok); border:2px solid var(--ok-b);}
			.dot.warn{background:var(--warn); border:2px solid var(--warn-b);}
			.dot.past{background:var(--past); border:2px solid var(--past-b);}

			.meta{display:grid; grid-template-columns:1fr 1fr; gap:6px 12px; margin-top:8px; font-size:.95rem;}
			.meta .lbl{display:block; font-size:.82rem; color:var(--muted);}

			.actions{width:100%;}
			.c50-50{width:50%; float:left; }
			.c100{width:100%; float:left;}
			
			
			.btn {padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:400; border:none; cursor:pointer; width: 100%; }
			.btn2 {padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:400; border:none; cursor:pointer; width: calc(100% - 26px); float:left;}
			.btn-s{padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:400; border:none; cursor:pointer; width: calc(100% - 26px); float:left;}
			.btn-s:nth-child(2){padding:8px 10px; border-radius:10px; text-decoration:none; font-weight:400; border:none; cursor:pointer; width: calc(100% - 26px); float:right;}
			.btn-primary{background:#219ebc; color:#fff;}
			.btn-edit{background:#e07a5f; color:#fff;}
			.btn-warn{background:#ffd23f; color:#333;}
			.btn-ghost{background:#f1f5f9; color:#111;}
			.badge-lock{color:#ef476f; font-weight:700; font-size:.9rem;}
			
			.btn-erase{ background:#000; color:#fff;}

			button {padding:0;font-size:16px;}

			details.inv-details{margin-top:10px; background:#f9fbe7; border:1px solid #e6efb7; border-radius:10px; padding:8px;}
			details.inv-details>summary{cursor:pointer; font-weight:600; list-style:none; outline:none;}
			details.inv-details[open]{padding-bottom:12px;}

			.link-input{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px;}
			.link-input input{flex:1 1 220px; min-width:220px; max-width:100%; padding:8px; border:1px solid #cbd5e1; border-radius:8px;}
			.qr{margin-top:8px; width:140px; height:auto; border:1.3px solid #b9d6e7; border-radius:6px;}
			
			.modal, .overlay {display:none;}
			.modal {position:fixed; width:calc(90% - 48px);top:25%;left:50%;transform:translateX(-50%);background:#fff;z-index:99;box-shadow:0 2px 30px #bbb5;padding:24px;border-radius:18px;}
			.modal label {margin-top:8px; color:#000;}
			.modal input {width:96%;}
			.overlay {position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0008;z-index:98;}


			.glass-table {
			  display: grid;
			  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			  grid-template-columns: 1fr 1fr 2fr; /* Erste zwei gleich klein, dritte doppelt so breit */
			  width: 100%;          /* volle Breite */
			  max-width: 100%;      /* nicht begrenzen */
			  box-sizing: border-box;
			  padding: 0px;        /* optional: Abstand innen */
			  background: rgba(255, 255, 255, 0.15);
			  border-bottom: 1px solid rgba(255,255,255,0.3);
			}

			.glass-table.first {
			  display: grid;
			  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
			  grid-template-columns: 1fr 1fr 2fr; /* Erste zwei gleich klein, dritte doppelt so breit */
			  width: 100%;          /* volle Breite */
			  max-width: 100%;      /* nicht begrenzen */
			  box-sizing: border-box;
			  padding: 0px;        /* optional: Abstand innen */
			  background: rgba(255, 255, 255, 0.35);
			  border-radius: 20px 20px 0 0;
			  
			}

			/* Letzte gefundene glass-grid */
			.glass-table:nth-last-of-type(1) {
			  border-bottom-left-radius: 20px;
			  border-bottom-right-radius: 20px;
			}
			
			.glass {
			 
			  text-align:left;
			  padding: 10px 20px;
			  flex: 1; /* Standard = gleich groß */
				}
			.glass-row .glass:nth-child(3) {
				  flex: 2; /* Dritte Box doppelt so breit */
				}


			/* invitation */
			
			
			.box {
			 margin-bottom:30px;
			 padding-bottom:25x;
			}
			
			.guests-list input { width:90%; margin-bottom:5px;}
		
			.fehler { color:#c52d2d; font-weight:700; margin-bottom:12px;}
			
			.add-btn { 
				background: linear-gradient(0deg, #cccccc, #ffffff); 
				color:#000; 
				border:none; 
				font-size: 1.2em; 
				cursor:pointer;
				border-radius:3px;
				width:20px;
			}
				
/* user data */
			
		.centerbox{max-width:540px;margin:4vw auto 0 auto;background:#fff;border-radius:18px;box-shadow:0 3px 18px #eaf6fb;padding:28px;}
       
        .feedback{margin:13px 0;color:#219ebc;background:#eaf6fb;padding:9px 0 10px 0;border-radius:10px;}
        .error{color:#ef476f;background:#fbeaea;}
        
		label{display:block;margin-top:10px;margin-bottom:4px;color:#fff;font-weight:400;}
        
		input, select{
			width:100%;
			padding:0.4em;
			border-radius:8px;
			border:1.5px solid #b2dbf7;
			font-size: clamp(1rem, 2.0vw, 1.2rem); /* flexibel */
			box-sizing: border-box;
			margin-bottom:5px;
			}
		
		       
		input:focus{border-color:#219ebc;background:#f4fbfe;}
        
		
		.form-grid {
			display: grid;
			grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: 1rem;
		  }
		  .pair {
			display: flex;
			flex-direction: column;   /* <- sorgt für Label über Input */
			gap: .375rem;   /* Abstand Label ↔ Input */
		  }
		
		/* Optional: bessere Optik & Fokuszustand */
		  .pair > label { font-size: .875rem; }
		  .pair > input, .pair > select, .pair > textarea {
			padding: .4rem .4rem;
			border: 1px solid #ccc;
			border-radius: .5rem;
			outline: none;
		  }
		  .pair > input:focus-visible,
		  .pair > select:focus-visible,
		  .pair > textarea:focus-visible {
			border-color: #666;
			box-shadow: 0 0 0 3px rgba(0,0,0,.08);
		  }

		  /* Mobil: einspaltig */
		  @media (max-width: 600px) {
			.form-grid { -grid-template-columns: 1fr; }
			}
		
		
        .section{margin-top:0px;}
        .abmelden{display:block;margin:38px auto 0 auto;text-align:center;text-decoration:underline;color:#bbb;}
        .invoice-table{width:100%;margin-top:8px;border-collapse:collapse;}
        .invoice-table th, .invoice-table td{border-bottom:1px solid #eee;padding:8px 4px;text-align:left;}
        .invoice-table th{background:#f8fdff;font-size:0.97em;color:#888;}
        .invoice-table td{font-size:1.03em;}
        .inv-done{color:#218c5b;font-weight:600;}
        .inv-pending{color:#ef476f;font-weight:600;}
        
/* cart */	
	
		
       
        table {width:100%;margin-bottom:14px;border-collapse:collapse;}
        th, td {padding:8px 7px;}
        th {background:#eaf6fb;}
        tr {border-bottom:1px solid #eaeaea;}
        .right {text-align:right;}
       


@media (min-width:780px){
  .inv-card{padding:16px 18px;}
  .meta{grid-template-columns:repeat(4,minmax(0,1fr));}
	
			
			
			
        
		
		
       

	   table {border-collapse:collapse;width:100%;margin-top:28px;}
        th,td {padding:10px 8px;}
        th {text-align:left; }
        tr .first{
			background: rgba(255, 255, 255, 0.25); /* Glasfläche */
			border: 1px solid rgba(255,255,255,0.3);
			border-radius: 20px 0;}
		
		tr {border-bottom:1px solid #ececec;}
}		
		
		@media(max-width:600px){
           
		   body{
			-background-attachment: scroll;        /* statt fixed */
			backdrop-filter: none;                 /* Bug-Quelle #2 neutralisieren */
			-webkit-backdrop-filter: none;
			-min-height: 100svh;                    /* statt 100vh */
		  }
		   
		      .logotext{
				width:70px;
				height:80px;
				background-size: 130px auto;
				margin-bottom:30px;
				background-position: 25px 10px;
			}
			
			.content{padding:5px;margin-top:0px;border-radius: 0px;} 
			.list-cards{flex-direction:column; gap:12px;}
            .birthday-box{-flex-direction:column;align-items:flex-start;}
       
			.header {
				position: fixed !important;
				border-radius: 20px 20px 0 0;
				bottom: 0;
				left: 0;
				right: 0;          /* statt width:100vw */
				width: 100%;
				height: 80px;
				z-index: 1000;
				background:rgba(255,102,101,.9);
				padding: 0;
				box-sizing: border-box;	  
				padding-top: env(safe-area-inset-top, 0);
				backdrop-filter: blur(12px);
				-webkit-backdrop-filter: blur(12px);
			}
			
			nav {position: absolute;width:100%; top:10px; }
			nav ul{justify-content: right;}
			
			.centerbox{padding:12px 3vw;}
			
			
			.glasmain {		}
			
			.icon-nav  {  background-size: 20px 20px; }
			ul {padding: 0px;}
			
			

	   }