/* legal-page.css */

/* Der Hauptcontainer für den Text */
.legal-container {
	max-width: 900px;
	margin: 80px auto;
	padding: 40px;
	
	/* Glassmorphism: Dunkel und lesbar */
	background: rgba(9, 13, 21, 0.9); 
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	
	border: 1px solid rgba(96, 170, 255, 0.2);
	border-radius: 15px;
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
	
	position: relative;
	z-index: 1; /* Über dem Schnee (Z-Index 0) */
}

/* Typografie */
.legal-container h1 {
	font-family: 'ColdrockHeadline', sans-serif;
	color: #60AAFF;
	font-size: 2.5rem;
	text-align: center;
	margin-bottom: 30px;
}

.legal-container h2 {
	font-family: 'ColdrockHeadline', sans-serif;
	color: #60AAFF;
	font-size: 1.6rem;
	margin-top: 40px;
	margin-bottom: 15px;
	border-left: 4px solid var(--primary);
	padding-left: 15px;
}

.legal-container strong {
	color: var(--accent);
	font-weight: 700;
	/* Optional: Ein ganz dezenter Glow, damit es sich vom Fließtext abhebt */
	text-shadow: 0 0 5px rgba(96, 170, 255, 0.2);
}

.legal-container p, .legal-container li {
	font-family: 'ColdrockRegular', sans-serif;
	color: rgba(230, 231, 232, 0.95);
	line-height: 1.8;
	margin-bottom: 15px;

	/* --- BLOCK_SATZ MECHANICS --- */
	text-align: justify;         /* Der eigentliche Blocksatz */
	hyphens: auto;               /* Automatische Silbentrennung (wichtig!) */
	-webkit-hyphens: auto;       /* Support für Safari/Chrome */
	word-break: break-word;      /* Verhindert, dass extrem lange Wörter das Layout sprengen */
}

.legal-container a {
	color: #60AAFF;
	text-decoration: none;
	transition: color 0.2s;
}

.legal-container a:hover {
	color: var(--white);
	text-decoration: underline;
}

/* Scroll-Wrapper */
.legal-wrapper {
	width: 100%;
	min-height: 100vh;
	overflow-y: auto;
	position: relative;
}

.legal-container table {
	width: 100%;
	border-collapse: collapse;
	margin: 20px 0;
	table-layout: fixed; /* Ensures consistent column widths */
}

.legal-container td {
	padding: 10px 5px;
	vertical-align: top;
	border-bottom: 1px solid rgba(96, 170, 255, 0.1); /* Very subtle separator */
}

/* The Label Column */
.legal-container td:first-child {
	width: 35%;
	color: var(--secondary); /* More subtle than the accent gold */
	font-family: 'ColdrockHeadline', sans-serif;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* The Value Column */
.legal-container td:last-child {
	width: 65%;
	color: var(--text-light);
}

/* Remove border from last row */
.legal-container tr:last-child td {
	border-bottom: none;
}

/* --- STEP 5: MOBILE OPTIMIZATION --- */

@media (max-width: 768px) {
	/* 1. Reduce outer margins and padding for more screen estate */
	.legal-container {
		margin: 20px 10px;
		padding: 20px 15px;
		border-radius: 10px;
	}

	/* 2. Scale down the typography */
	.legal-container h1 {
		font-size: 1.8rem;
		margin-bottom: 20px;
	}

	.legal-container h2 {
		font-size: 1.3rem;
		margin-top: 25px;
	}

	.legal-container p, .legal-container li {
		font-size: 0.95rem;
		line-height: 1.6;
	}

	/* 3. The Table Fix (Critical!) */
	/* Tables usually break mobile layouts. We make them scrollable horizontally. */
	.legal-info-block {
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.legal-container table {
		min-width: 450px; /* Force minimum width to prevent squashing labels */
	}

	.legal-container td:first-child {
		width: 40%;
		font-size: 0.8rem;
	}
	
	/* 4. Optimize the background blur for performance on older mobile chips */
	.legal-container {
		backdrop-filter: blur(10px);
		background: rgba(9, 13, 21, 0.95); /* More opaque, less compute power needed */
	}
}

@media (max-width: 768px) {
    
    /* Force table elements to stack vertically */
    .legal-container table, 
    .legal-container thead, 
    .legal-container tbody, 
    .legal-container th, 
    .legal-container td, 
    .legal-container tr { 
        display: block; 
        width: 100% !important;
    }

    .legal-container tr {
        margin-bottom: 15px;
        border-bottom: 1px solid rgba(96, 170, 255, 0.2);
        padding-bottom: 10px;
    }

    .legal-container td {
        border: none;
        padding: 2px 0;
    }

    /* Style the label (first column) to look like a small header */
    .legal-container td:first-child {
        color: var(--accent); /* Back to accent for the small mobile label */
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: 2px;
    }

    /* The actual value (second column) */
    .legal-container td:last-child {
        font-size: 1rem;
        color: var(--text-light);
        padding-bottom: 5px;
    }

    /* Remove the scroll wrapper logic as it's no longer needed */
    .legal-info-block {
        overflow-x: visible;
    }
}
/* Extra small devices (Landscape phones) */
@media (max-width: 480px) {
	.legal-container h1 {
		font-size: 1.5rem;
	}
	
	.legal-container td:first-child {
		width: 45%;
	}
}

/* --- FIXED UI ELEMENTS (Logo & Language) --- */

/* Das Logo oben links */
.fixed-logo {
    position: fixed;
    top: 20px;
    left: 20px;
    height: 45px; /* Wir skalieren die Höhe, Breite passt sich an */
    width: auto;
    z-index: 1000; /* Immer ganz oben */
}

/* Der Sprachumschalter oben rechts */
.lang-switch {
    position: fixed;
    top: 25px;
    right: 25px;
    z-index: 1000;
    color: var(--accent);
    text-decoration: none;
    font-family: 'ColdrockHeadline', sans-serif;
    font-size: 0.85rem;
    padding: 8px 15px;
    background: rgba(9, 13, 21, 0.6);
    border: 1px solid rgba(163, 122, 41, 0.4);
    border-radius: 5px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.lang-switch:hover {
    background: var(--accent);
    color: var(--bg-gradient-start);
}

/* Mobile Fix: Auf kleinen Screens machen wir es etwas kleiner */
@media (max-width: 768px) {
    .fixed-logo { height: 30px; top: 10px; left: 10px; }
    .lang-switch { top: 10px; right: 10px; font-size: 0.7rem; padding: 5px 10px; }
}