/* =========================================================
   01 — GLOBAL: Variablen, Reset, Grundlayout
   ========================================================= */

:root {
	--bg: #050505;
	--panel: #10100f;
	--metal: #a8a099;
	--muted: #b7a686;
	--orange: #c77722;
	--orange2: #ff9b2f;
	--line: rgba(255, 155, 47, .28);
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	scrollbar-width: none;       /* Firefox */
	-ms-overflow-style: none;    /* IE & Edge */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
	display: none;               /* Chrome, Safari, Opera */
}

body {
	margin: 0;
	background: var(--bg);
	color: #e8e0d4;
	font-family: Rajdhani, Arial, sans-serif;
	font-size: 18px;
	line-height: 1.55;
	overflow-x: hidden;
	scrollbar-width: none;
	-ms-overflow-style: none;
}

body::before {
	content: "";
	position: fixed;
	inset: 0;
	background:
		radial-gradient(circle at 20% 20%, rgba(199, 119, 34, .14), transparent 35%),
		radial-gradient(circle at 80% 0, rgba(255, 255, 255, .08), transparent 28%),
		linear-gradient(120deg, #060606, #11100d 55%, #050505);
	z-index: -3;
}

.scanlines {
	position: fixed;
	inset: 0;
	pointer-events: none;
	background: repeating-linear-gradient(
		0deg,
		rgba(255, 255, 255, .025) 0 1px,
		transparent 1px 5px
	);
	mix-blend-mode: overlay;
	z-index: 10;
}


/* =========================================================
   02 — HEADER & NAVIGATION
   ========================================================= */
.site-header .brand span:last-child{

    position:relative;

    transition:
        color .28s ease,
        text-shadow .28s ease,
        letter-spacing .28s ease,
        transform .28s ease;

    z-index:2;
}

/* Hover Effekt */
.site-header .brand:hover span:last-child{

    color:#ffffff;

    letter-spacing:2.5px;

    transform:translateX(2px);

    text-shadow:
        0 0 6px rgba(255,155,47,.28),
        0 0 14px rgba(255,140,0,.18),
        0 0 24px rgba(255,140,0,.12);
}

/* Dezente Unterlinie */
.site-header .brand span:last-child::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-4px;

    width:100%;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,155,47,.75),
        transparent
    );

    opacity:0;

    transform:scaleX(.5);

    transition:
        opacity .28s ease,
        transform .28s ease;
}

/* Aktiv */
.site-header .brand:hover span:last-child::after{

    opacity:1;

    transform:scaleX(1);
}


/* Puls durch die gesamte Navigationsleiste */
.site-header::after{
    content:"";
    position:absolute;
    inset:0;

    background:linear-gradient(
        90deg,
        transparent 0%,
        rgba(255,155,47,.06) 35%,
        rgba(255,155,47,.18) 50%,
        rgba(255,155,47,.06) 65%,
        transparent 100%
    );

    transform:translateX(-120%);
    opacity:0;

    pointer-events:none;
    z-index:-1;
}

/* Animation startet nur beim Hover auf Logo/Brand */
.site-header:has(.brand:hover)::after{
    opacity:1;
    animation:navPulseSweep 1.2s ease forwards;
}

@keyframes navPulseSweep{
    from{
        transform:translateX(-120%);
    }
    to{
        transform:translateX(120%);
    }
}

/* Logo stärker hervorheben */
.site-header .brand-logo{
    position:relative;
    isolation:isolate;

    transition:
        transform .3s ease,
        filter .3s ease;
}

.site-header .brand:hover .brand-logo{
    transform:translateY(-1px) scale(1.04);

    filter:
        drop-shadow(0 0 8px rgba(255,155,47,.35))
        drop-shadow(0 0 18px rgba(255,140,0,.22));
}

/* Logo Glow Layer */
.site-header .brand:hover .logo-static{
    filter:
        brightness(1.12)
        drop-shadow(0 0 10px rgba(255,155,47,.35));
}

.site-header .brand:hover .logo-animated{
    opacity:.45;

    filter:
        brightness(1.2)
        drop-shadow(0 0 18px rgba(255,155,47,.38));
}

/* dezente Unterkante am Logo */
.site-header .brand-logo::after{
    content:"";
    position:absolute;
    left:10%;
    right:10%;
    bottom:-3px;
    height:1px;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,155,47,.75),
        transparent
    );

    opacity:0;
    transform:scaleX(.5);

    transition:
        opacity .3s ease,
        transform .3s ease;
}

.site-header .brand:hover .brand-logo::after{
    opacity:1;
    transform:scaleX(1);
}

.nav .external-link{
    position:relative;

    isolation:isolate;
    overflow:hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease,
        color .28s ease;
}

/* Glow Sweep */
.nav .external-link::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,155,47,.16) 50%,
        transparent 100%
    );

    transform:translateX(-130%);
    transition:transform .7s ease;

    z-index:-1;
}

/* Hover */
.nav .external-link:hover{

    transform:
        translateY(-3px)
        scale(1.02);

    border-color:#ffb347;

    background:
        linear-gradient(
            135deg,
            rgba(255,155,47,.18),
            rgba(0,0,0,.35)
        );

    color:#fff !important;

    box-shadow:
        0 0 24px rgba(255,140,0,.28),
        0 0 50px rgba(255,140,0,.1);
}

/* Sweep Animation */
.nav .external-link:hover::before{
    transform:translateX(130%);
}

/* Klick Effekt */
.nav .external-link:active{
    transform:scale(.97);
}
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: -4px -1vw;
	padding: 1px 1.4vw;
	background: rgba(5, 5, 5, .78);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid var(--line);
	overflow:hidden;
	isolation:isolate;
}

.brand {
	display: flex;
	gap: 14px;
	align-items: center;
	color: #fff;
	text-decoration: none;
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
}

.brand img {
	height: 42px;
}

.brand-logo {
	position: relative;
	display: inline-block;
	width: 200px;
	height: 90px;
	flex: 0 0 auto;
}

.brand-logo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity .22s ease, filter .22s ease;
}

.logo-animated {
	opacity: 0;
}

.brand:hover .logo-static,
.footer-logo:hover .logo-static {
	opacity: 0;
}

.brand:hover .logo-animated,
.footer-logo:hover .logo-animated {
	opacity: 1;
	filter: drop-shadow(0 0 14px rgba(255, 155, 47, .45));
}

.nav {
	display: flex;
	gap: 26px;
	align-items: center;
	
}

.nav a {
	color: #d9d0c4;
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: 1px;
	position: relative;
}

.nav a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -6px;
	width: 0;
	height: 2px;
	background: var(--orange2);
	transition: .25s;
}

.nav a:hover::after {
	width: 100%;
}

.external-link {
	border: 1px solid var(--orange);
	padding: 8px 12px;
	clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
	color: #ffd19a !important;
	background: rgba(199, 119, 34, .12);
}

.menu-toggle {
	display: none;
	background: none;
	border: 1px solid var(--line);
	color: #fff;
	font-size: 24px;
}


/* =========================================================
   03 — HERO / STARTSEITE
   ========================================================= */

/* =========================================
   HERO BUTTON HOVER EFFECT
   Nur Startseiten-Buttons
========================================= */

.hero-actions a.btn{
    position:relative;
    isolation:isolate;
    overflow:hidden;
}

.hero-actions a.btn::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,155,47,.18) 50%,
        transparent 100%
    );
    transform:translateX(-130%);
    transition:transform .7s ease;
    z-index:-1;
}

.hero-actions a.btn:hover{
    transform:translateY(-4px) scale(1.03);
    border-color:#ffb347;
    color:#fff;
    box-shadow:
        0 0 28px rgba(255,140,0,.32),
        0 0 60px rgba(255,140,0,.12);
}

.hero-actions a.btn:hover::before{
    transform:translateX(130%);
}

.hero-actions a.btn:active{
    transform:scale(.97);
}

.hero {
	min-height: 100vh;
	display: grid;
	align-items: center;
	padding: 80px 3vw 40px;
	position: relative;
	background: url('../assets/hero-ship.png') center/cover no-repeat;
}

.hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .9), rgba(0, 0, 0, .35), rgba(0, 0, 0, .72));
}

.hero-content,
.status-panel {
	position: relative;
	z-index: 1;
}

.eyebrow {
	color: var(--orange2);
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: .8rem;
	font-weight: 800;
}

.hero h1,
.section h2,
.banner h2 {
	font-family: Orbitron, sans-serif;
	font-size: clamp(2.4rem, 6vw, 6rem);
	line-height: .95;
	margin: 10px 0;
	text-transform: uppercase;
	text-shadow: 0 0 30px rgba(255, 155, 47, .25);
}

.hero h1 span {
	color: var(--orange2);
}

.lead {
	max-width: 650px;
	font-size: 1.25rem;
	color: #ded4c4;
}

.btn {
	position: relative;
	display: inline-block;
	margin: 12px 12px 0 0;
	padding: 13px 22px;
	border: 1px solid var(--orange);
	text-decoration: none;
	text-transform: uppercase;
	font-weight: 800;
	letter-spacing: 1px;
	clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
	overflow: hidden;
	isolation: isolate;
	transition:
		transform .28s ease,
		box-shadow .28s ease,
		border-color .28s ease,
		background .28s ease,
		color .28s ease;
}

.primary {
	background: linear-gradient(135deg, var(--orange), #60350f);
	color: #fff;
}

.ghost {
	color: #f4d4a7;
	background: rgba(0, 0, 0, .35);
}

/* Basis: Button-Pseudo-Elemente standardmäßig deaktiviert.
   Einzelne Bereiche aktivieren ihre eigenen Hover-Effekte gezielt. */
.btn::before,
.btn::after {
	content: none;
}


.status-panel {
	position: absolute;
	right: 5vw;
	bottom: 8vh;
	width: min(390px, 90vw);
	padding: 20px;
	background: rgba(13, 13, 12, .78);
	border: 1px solid var(--line);
	box-shadow: 0 0 30px rgba(199, 119, 34, .15);
}

.status-panel span,
.status-panel small {
	display: block;
	color: var(--muted);
	letter-spacing: 2px;
}

.status-panel strong {
	display: block;
	color: #fff;
	font-family: Orbitron, sans-serif;
	margin: 8px 0;
}


/* =========================================================
   04 — ALLGEMEINE SECTION-LAYOUTS
   ========================================================= */

.section {
	padding: 50px 5vw;
}

.section-title {
	text-align: center;
	max-width: 900px;
	margin: 0 auto 42px;
}

.section-title h2,
.grid-2 h2,
.impressum h2 {
	font-size: clamp(2rem, 4vw, 4rem);
}

.grid-2 {
	display: grid;
	grid-template-columns: 1fr 1.1fr;
	gap: 48px;
	align-items: center;
}

.image-frame,
.card,
.fleet-card,
.accordion,
.impressum > div {
	border: 1px solid var(--line);
	background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	box-shadow: 0 0 35px rgba(0, 0, 0, .5);
}

.image-frame {
	padding: 10px;
}

.image-frame img,
.banner img,
.fleet-card img {
	width: 100%;
	display: block;
	object-fit: cover;
}


/* =========================================================
   05 — ÜBER UNS: Aufklappbereiche Historie / Manifesto
   ========================================================= */

.chrono-details {
	max-width: 980px;
	margin: 28px auto 0;
	border: 1px solid var(--line);
	background: linear-gradient(145deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .015));
	box-shadow: 0 0 35px rgba(0, 0, 0, .5);
	overflow: hidden;
}

.chrono-details summary {
	cursor: pointer;
	list-style: none;
	padding: 20px 24px;
	color: #fff;
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	border-left: 4px solid var(--orange2);
	background: linear-gradient(90deg, rgba(255, 155, 47, .18), rgba(255, 155, 47, .03));
}

.chrono-details summary::-webkit-details-marker {
	display: none;
}

.chrono-details summary::after {
	content: "+";
	float: right;
	color: var(--orange2);
	font-size: 1.4rem;
	line-height: 1;
}

.chrono-details[open] summary::after {
	content: "–";
}

.chrono-details .details-content {
	padding: 26px;
	color: #d7c8b7;
}

.chrono-details h3 {
	color: #fff;
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	margin-top: 24px;
}

.chrono-details h3:first-child {
	margin-top: 0;
}

.chrono-details ul {
	margin-top: 8px;
	padding-left: 22px;
}

.chrono-details li {
	margin-bottom: 8px;
}

.chrono-details hr {
	border: 0;
	border-top: 1px solid var(--line);
	margin: 28px 0;
}


/* =========================================================
   06 — MANIFESTO: Vier Divisionen
   ========================================================= */

.cards,
.fleet-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}

.card {
	padding: 28px;
	min-height: 280px;
	position: relative;
	overflow: hidden;
}

.card span {
	font-family: Orbitron, sans-serif;
	color: rgba(255, 155, 47, .35);
	font-size: 3rem;
}

.card h3,
.fleet-card h3 {
	font-family: Orbitron, sans-serif;
	color: #fff;
	text-transform: uppercase;
}

.manifesto-card {
	cursor: pointer;
}

.manifesto-card summary {
	list-style: none;
}

.manifesto-card summary::-webkit-details-marker {
	display: none;
}

.manifesto-card summary::after {
	content: "Details öffnen +";
	display: inline-block;
	margin-top: 16px;
	color: var(--orange2);
	font-weight: 800;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.manifesto-card[open] summary::after {
	content: "Details schließen –";
}

.manifesto-card .card-details {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	color: #d7c8b7;
}

.manifesto-card h4 {
	color: #fff;
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	margin: 0 0 12px;
}

.manifesto-card ul {
	padding-left: 20px;
	margin-bottom: 0;
}

.manifesto-card li {
	margin-bottom: 8px;
}


/* =========================================================
   07 — BANNER / CHARTA-HINWEIS
   ========================================================= */

.banner {
	position: relative;
	min-height: 560px;
	display: grid;
	align-items: center;
	overflow: hidden;
}

.banner img {
	position: absolute;
	inset: 0;
	height: 100%;
	filter: brightness(.55);
}

.banner::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(0, 0, 0, .88), transparent 70%);
}

.banner-text {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-left: 5vw;
}


/* =========================================================
   08 — VIDEOS / ORGA VIDEOS
   ========================================================= */

.intro-section {
	background: linear-gradient(180deg, rgba(0, 0, 0, .2), rgba(199, 119, 34, .07), rgba(0, 0, 0, .2));
}

.video-frame {
	max-width: 980px;
	margin: 0 auto;
	padding: 12px;
	border: 1px solid var(--line);
	background: linear-gradient(145deg, rgba(255, 255, 255, .07), rgba(0, 0, 0, .6));
	box-shadow:
		0 0 45px rgba(0, 0, 0, .7),
		inset 0 0 35px rgba(255, 155, 47, .06);
	clip-path: polygon(18px 0, 100% 0, 100% calc(100% - 18px), calc(100% - 18px) 100%, 0 100%, 0 18px);
}

.video-frame video {
	display: block;
	width: 100%;
	max-height: 560px;
	background: #000;
	object-fit: contain;
	border: 1px solid rgba(255, 155, 47, .16);
}


/* =========================================================
   09 — FLOTTE: Zusammenfassung, Divisionen, Karten
   ========================================================= */

.fleet-summary {
	display: flex;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 18px;
}

.fleet-summary span,
.fleet-category small {
	display: inline-block;
	padding: 7px 12px;
	border: 1px solid var(--line);
	background: rgba(255, 155, 47, .08);
	color: var(--orange2);
	font-family: Orbitron, sans-serif;
	font-size: .8rem;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.fleet-division {
	margin: 32px 0;
	border: 1px solid rgba(255, 140, 0, .25);
	background: linear-gradient(145deg, rgba(255, 140, 0, .06), rgba(10, 10, 10, .95));
	box-shadow:
		0 0 25px rgba(255, 140, 0, .08),
		inset 0 0 20px rgba(255, 140, 0, .04);
}

.fleet-division summary {
	list-style: none;
	cursor: pointer;
}

.fleet-division summary::-webkit-details-marker {
	display: none;
}

.fleet-category {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	margin: 46px 0 18px;
	padding: 12px 16px;
	border-left: 4px solid var(--orange2);
	background: linear-gradient(90deg, rgba(255, 155, 47, .16), transparent);
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
}

.fleet-division .fleet-category {
	margin: 0;
	padding: 22px 26px;
	border-left: 4px solid #ff9d00;
	background: linear-gradient(90deg, rgba(255, 140, 0, .18), rgba(0, 0, 0, .15));
}

.fleet-division .fleet-category::after {
	content: "+";
	color: #ff9d00;
	font-size: 1.8rem;
	font-weight: 700;
	margin-left: 12px;
}

.fleet-division[open] .fleet-category::after {
	content: "–";
}

.fleet-category-info {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

.fleet-category-title {
	font-family: Orbitron, sans-serif;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: #fff;
}

.fleet-category-text {
	margin: 0;
	max-width: 850px;
	color: #d7c8b7;
	font-family: Rajdhani, Arial, sans-serif;
	font-size: 1rem;
	line-height: 1.45;
	letter-spacing: .5px;
	text-transform: none;
}

.fleet-category-count {
	margin-left: auto;
	white-space: nowrap;
	color: #ff9d00;
	border: 1px solid rgba(255, 140, 0, .35);
	padding: 8px 12px;
	background: rgba(255, 140, 0, .08);
}

.fleet-grid {
	grid-template-columns: repeat(3, 1fr);
	margin-bottom: 28px;
}

.fleet-division .fleet-grid {
	padding: 26px;
	animation: fleetOpen .35s ease;
}

@keyframes fleetOpen {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.fleet-card {
	overflow: hidden;
	position: relative;
	transition: transform .25s ease, box-shadow .25s ease;
}

.fleet-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 45px rgba(255, 155, 47, .18);
}

.fleet-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid rgba(255, 155, 47, .18);
	pointer-events: none;
	z-index: 2;
}

.fleet-card img {
	height: 210px;
	background: #090909;
}

.fleet-card div {
	padding: 24px;
}

.fleet-meta {
	display: inline-block;
	margin-bottom: 10px;
	color: var(--orange2);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-size: .82rem;
}

.fleet-card p {
	color: #d6c9b8;
	margin-bottom: 0;
}

.fleet-image-link {
	display: block;
	position: relative;
	overflow: hidden;
	color: inherit;
	text-decoration: none;
}

.fleet-image-link img {
	transition: transform .35s ease, filter .35s ease;
}

.fleet-image-link:hover img {
	transform: scale(1.05);
	filter: brightness(1.12) contrast(1.05);
}

.shop-badge {
	position: absolute;
	right: 12px;
	bottom: 12px;
	padding: 6px 10px;
	background: rgba(0, 0, 0, .72);
	border: 1px solid var(--orange2);
	color: var(--orange2);
	font-size: .75rem;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 1px;
}

.fleet-count {
	color: #fff;
	margin: 10px 0;
}

.fleet-count strong {
	color: var(--orange2);
	font-family: Orbitron, sans-serif;
}

.fleet-overview-card{
    margin:40px 0 34px;
    padding:30px;

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:32px;

    border:1px solid var(--line);

    background:linear-gradient(
        145deg,
        rgba(255,255,255,.06),
        rgba(255,155,47,.04),
        rgba(0,0,0,.55)
    );

    box-shadow:
        0 0 35px rgba(0,0,0,.5),
        inset 0 0 28px rgba(255,155,47,.05);

    overflow:hidden;
    position:relative;
}

.fleet-overview-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:4px;
    background:var(--orange2);
}

.fleet-overview-content{
    max-width:760px;
    position:relative;
    z-index:1;
}

.fleet-overview-content h3{
    margin:8px 0 12px;

    color:#fff;

    font-family:Orbitron, sans-serif;
    font-size:clamp(1.8rem, 3vw, 3rem);
    text-transform:uppercase;
    letter-spacing:2px;

    text-shadow:0 0 22px rgba(255,155,47,.25);
}

.fleet-overview-content p{
    margin:0;
    color:#d7c8b7;
}

.fleet-overview-stats{
    display:flex;
    gap:14px;
    flex-wrap:wrap;
    justify-content:flex-end;

    position:relative;
    z-index:1;
}

.fleet-overview-stats span{
    min-width:170px;

    padding:16px 18px;

    border:1px solid rgba(255,155,47,.35);

    background:rgba(255,155,47,.08);

    color:var(--orange2);

    font-family:Orbitron, sans-serif;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:1px;
    font-size:.8rem;
}

.fleet-overview-stats strong{
    display:block;

    color:#fff;

    font-size:2rem;
    line-height:1.1;

    margin-bottom:6px;
}

@media(max-width:900px){
    .fleet-overview-card{
        flex-direction:column;
        align-items:flex-start;
    }

    .fleet-overview-stats{
        justify-content:flex-start;
        width:100%;
    }
}
/* =========================================================
   10 — GRUNDSÄTZE / UNSERE CHARTA
   ========================================================= */

.charta-intro {
	margin-bottom: 28px;
}

.accordion {
	max-width: 950px;
	margin: auto;
}

.accordion > button {
	width: 100%;
	padding: 20px;
	background: #11100e;
	color: #fff;
	border: 0;
	border-bottom: 1px solid var(--line);
	text-align: left;
	font: 700 1.1rem Orbitron, sans-serif;
	cursor: pointer;
}

.accordion div {
	display: none;
	padding: 18px 22px;
	color: #d7c8b7;
}

.accordion > button.active + div {
	display: block;
}

/* =========================================
   CHRONOS ACCORDION HOVER EFFECT
========================================= */

.accordion > button{
    position:relative;

    overflow:hidden;

    transition:
        background .28s ease,
        border-color .28s ease,
        color .28s ease,
        transform .22s ease,
        box-shadow .28s ease;

    box-shadow:
        inset 0 0 0 rgba(255,140,0,0),
        0 0 0 rgba(255,140,0,0);

    z-index:1;
}

/* Orange Glow Sweep */
.accordion > button::before{
    content:"";

    position:absolute;
    inset:0;

    background:linear-gradient(
        120deg,
        transparent 0%,
        rgba(255,155,47,.14) 50%,
        transparent 100%
    );

    transform:translateX(-130%);
    transition:transform .7s ease;

    z-index:-1;
}

/* Linke Industrial Glow Line */
.accordion > button::after{
    content:"";

    position:absolute;
    left:0;
    top:0;
    bottom:0;

    width:0;

    background:var(--orange2);

    transition:width .28s ease;
}

/* Hover Effekt */
.accordion > button:hover{

    background:
        linear-gradient(
            90deg,
            rgba(255,155,47,.12),
            rgba(0,0,0,.25)
        );

    color:#fff;

    transform:translateX(4px);

    border-color:rgba(255,155,47,.45);

    box-shadow:
        inset 0 0 20px rgba(255,140,0,.04),
        0 0 22px rgba(255,140,0,.12);
}

/* Glow Animation */
.accordion > button:hover::before{
    transform:translateX(130%);
}

/* Linke Linie */
.accordion > button:hover::after{
    width:4px;
}

/* Geöffneter Zustand */
.accordion > button.active{

    background:
        linear-gradient(
            90deg,
            rgba(255,155,47,.18),
            rgba(0,0,0,.3)
        );

    color:#fff;

    border-color:rgba(255,155,47,.55);

    box-shadow:
        inset 0 0 28px rgba(255,140,0,.05),
        0 0 28px rgba(255,140,0,.14);
}

.accordion > button.active::after{
    width:4px;
}


/* =========================================================
   11 — BEWERBUNG & LINKS
   ========================================================= */

.application .section-title a,
.impressum a,
.useful-links a {
	color: var(--orange2);
}

.link-cards .card {
	min-height: 330px;
}

.link-cards .btn {
	margin-top: 18px;
}

/* =========================================================
   SC NEWS PAGE
   Eigene News-Seite, ohne andere Hovereffekte zu überschreiben
   ========================================================= */

.news-page{
    min-height:100vh;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.82),
            rgba(0,0,0,.68),
            rgba(0,0,0,.9)
        ),
        url('../assets/orion-chronos.png') center/cover fixed no-repeat;

    padding-top:140px;
}

.news-grid{
    max-width:1100px;
    margin:0 auto;

    display:grid;
    grid-template-columns:1fr;
    gap:24px;
}

.news-card{
    border:1px solid var(--line);

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.06),
            rgba(255,155,47,.035),
            rgba(0,0,0,.72)
        );

    box-shadow:
        0 0 35px rgba(0,0,0,.55),
        inset 0 0 28px rgba(255,155,47,.04);

    overflow:hidden;
    isolation:isolate;

    transition:
        transform .28s ease,
        border-color .28s ease,
        box-shadow .28s ease;
}

.news-card:hover{
    transform:translateY(-4px);

    border-color:rgba(255,155,47,.45);

    box-shadow:
        0 0 44px rgba(255,155,47,.16),
        0 0 35px rgba(0,0,0,.65),
        inset 0 0 28px rgba(255,155,47,.06);
}

.news-card summary{
    list-style:none;
    cursor:pointer;

    position:relative;

    padding:26px 30px;

    border-left:4px solid var(--orange2);

    overflow:hidden;
}

.news-card summary::-webkit-details-marker{
    display:none;
}

/* News Hover Sweep */
.news-card summary::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,155,47,.13) 50%,
            transparent 100%
        );

    transform:translateX(-130%);
    transition:transform .75s ease;

    pointer-events:none;
    z-index:0;
}

.news-card:hover summary::before{
    transform:translateX(130%);
}

/* Plus / Minus */
.news-card summary::after{
    content:"+";

    position:absolute;
    right:28px;
    top:26px;

    color:var(--orange2);

    font-family:Orbitron, sans-serif;
    font-size:1.8rem;
    font-weight:700;

    z-index:2;
}

.news-card[open] summary::after{
    content:"–";
}

.news-card-header{
    position:relative;
    z-index:1;

    padding-right:52px;
}

.news-date{
    display:inline-block;

    margin-bottom:10px;
    padding:6px 10px;

    border:1px solid rgba(255,155,47,.3);

    background:rgba(255,155,47,.08);

    color:var(--orange2);

    font-family:Orbitron, sans-serif;
    font-size:.78rem;
    text-transform:uppercase;
    letter-spacing:1px;
}

.news-card h3{
    margin:0 0 10px;

    color:#fff;

    font-family:Orbitron, sans-serif;
    text-transform:uppercase;
    letter-spacing:1.5px;

    text-shadow:
        0 0 18px rgba(255,155,47,.18);
}

.news-card-header p{
    margin:0;

    color:#d7c8b7;
}

.news-card-content{
    padding:0 30px 30px 30px;

    color:#d7c8b7;

    border-top:1px solid rgba(255,155,47,.18);

    animation:newsOpen .35s ease;
}

.news-card-content p{
    margin:24px 0;
}

@keyframes newsOpen{
    from{
        opacity:0;
        transform:translateY(-8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* News Button nur in News-Karten */
.news-card .news-btn{
    position:relative;

    isolation:isolate;
    overflow:hidden;

    transition:
        transform .28s ease,
        box-shadow .28s ease,
        border-color .28s ease,
        background .28s ease,
        color .28s ease;
}

.news-card .news-btn::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,155,47,.16) 50%,
            transparent 100%
        );

    transform:translateX(-130%);
    transition:transform .7s ease;

    z-index:-1;
}

.news-card .news-btn:hover{
    transform:translateY(-4px) scale(1.03);

    border-color:#ffb347;

    background:
        linear-gradient(
            135deg,
            rgba(255,155,47,.18),
            rgba(0,0,0,.3)
        );

    color:#fff;

    box-shadow:
        0 0 28px rgba(255,140,0,.3),
        0 0 60px rgba(255,140,0,.1);
}

.news-card .news-btn:hover::before{
    transform:translateX(130%);
}

@media(max-width:700px){
    .news-page{
        padding-top:110px;
    }

    .news-card summary{
        padding:22px;
    }

    .news-card summary::after{
        right:22px;
        top:22px;
    }

    .news-card-content{
        padding:0 22px 24px;
    }
}

/* =========================================
   LINK CARD BUTTON HOVER EFFECT
   Nur Buttons innerhalb .link-cards
========================================= */

.link-cards a.btn.ghost {
	box-shadow: 0 0 18px rgba(255, 140, 0, .08);
}

.link-cards a.btn.ghost::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 155, 47, .16) 50%,
		transparent 100%
	);
	transform: translateX(-130%);
	transition: transform .7s ease;
	z-index: -1;
}

.link-cards a.btn.ghost:hover {
	transform: translateY(-4px) scale(1.03);
	background: linear-gradient(135deg, rgba(255, 155, 47, .18), rgba(0, 0, 0, .3));
	border-color: #ffb347;
	color: #fff;
	box-shadow:
		0 0 28px rgba(255, 140, 0, .3),
		0 0 60px rgba(255, 140, 0, .1);
}

.link-cards a.btn.ghost:hover::before {
	transform: translateX(130%);
}

.link-cards a.btn.ghost:active {
	transform: scale(.97);
}

/* =========================================
   11.1 — BEWERBUNG BUTTON HOVER EFFECT
   Nur Buttons innerhalb .application
========================================= */

.application a.btn.primary {
	box-shadow: 0 0 18px rgba(255, 140, 0, .12);
}

.application a.btn.primary::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		120deg,
		transparent 0%,
		rgba(255, 155, 47, .18) 50%,
		transparent 100%
	);
	transform: translateX(-130%);
	transition: transform .65s ease;
	z-index: -1;
}

.application a.btn.primary:hover {
	transform: translateY(-4px) scale(1.02);
	border-color: #ffb347;
	color: #fff;
	box-shadow:
		0 0 26px rgba(255, 140, 0, .35),
		0 0 60px rgba(255, 140, 0, .12);
	animation: chronosPulse 1.8s infinite;
}

.application a.btn.primary:hover::before {
	transform: translateX(130%);
}

.application a.btn.primary:active {
	transform: scale(.98);
}

@keyframes chronosPulse {
	0% {
		box-shadow: 0 0 20px rgba(255, 140, 0, .18);
	}
	50% {
		box-shadow:
			0 0 34px rgba(255, 140, 0, .4),
			0 0 70px rgba(255, 140, 0, .12);
	}
	100% {
		box-shadow: 0 0 20px rgba(255, 140, 0, .18);
	}
}

/* =========================================
11.2   BEWERBUNG BUTTONS GLEICHE GRÖSSE
========================================= */

.application .section-title p:has(a.btn){
    display:flex;
    justify-content:center;
}

.application a.btn.primary{
    width:320px;
    min-height:64px;

    display:flex;
    align-items:center;
    justify-content:center;

    text-align:center;

    padding:16px 22px;

    font-family:Orbitron, sans-serif;
    font-size:1rem;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
}

/* =========================================================
   12 — IMPRESSUM
   ========================================================= */

.impressum {
	background: url('./manufacturing.png') center/cover fixed;
}

.impressum > div {
	max-width: 850px;
	padding: 34px;
	background: rgba(5, 5, 5, .82);
}


/* =========================================================
   13 — FOOTER & DISCORD-BANNER
   ========================================================= */

footer {
	padding: 0;
	text-align: center;
	border-top: 1px solid var(--line);
	background: #050505;
}

footer > img {
	height: 54px;
}

footer a {
	color: var(--orange2);
}

.footer-logo {
	display: inline-block;
	width: 260px;
	height: 88px;
	position: relative;
	margin-bottom: 10px;
}

.footer-logo .brand-logo {
	width: 100%;
	height: 100%;
}

.discord-footer-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 40px 20px;
	background: linear-gradient(180deg, rgba(8, 8, 8, .9) 0%, rgba(15, 15, 15, 1) 100%);
	border-top: 1px solid rgba(255, 140, 0, .2);
	margin-top: 0;
}

.discord-footer-link {
	width: 80%;
	max-width: 2200px;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(255, 140, 0, .35);
	background: #111;
	box-shadow:
		0 0 25px rgba(255, 140, 0, .15),
		inset 0 0 30px rgba(255, 140, 0, .05);
	transition: all .35s ease;
}

.discord-footer-link:hover {
	transform: translateY(-4px);
	border-color: #ff9d00;
	box-shadow:
		0 0 35px rgba(255, 140, 0, .35),
		inset 0 0 40px rgba(255, 140, 0, .08);
}

.discord-footer-banner {
	width: 35%;
	height: auto;
	display: block;
	object-fit: contain;
	transition: transform .4s ease;
}

.discord-footer-link:hover .discord-footer-banner {
	transform: scale(1.01);
}

.discord-footer-link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, transparent 0%, rgba(255, 140, 0, .12) 50%, transparent 100%);
	transform: translateX(-120%);
	transition: transform .8s ease;
	pointer-events: none;
}

.discord-footer-link:hover::before {
	transform: translateX(120%);
}


/* =========================================================
   14 — RESPONSIVE DESIGN
   ========================================================= */

@media (max-width: 1100px) {
	.cards,
	.fleet-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 980px) {
	.grid-2 {
		grid-template-columns: 1fr;
	}

	.status-panel {
		position: relative;
		right: auto;
		bottom: auto;
		margin-top: 40px;
	}

	.hero {
		display: block;
	}

	.nav {
		display: none;
		position: absolute;
		top: 70px;
		left: 0;
		right: 0;
		background: #070707;
		flex-direction: column;
		padding: 24px 5vw;
	}

	.nav.open {
		display: flex;
	}

	.menu-toggle {
		display: block;
	}

	.brand-logo {
		width: 116px;
		height: 38px;
	}

	.nav .external-link {
		width: max-content;
	}

	.footer-logo {
		width: 210px;
		height: 72px;
	}
}

@media (max-width: 700px) {
	.fleet-division .fleet-category {
		flex-direction: column;
		align-items: flex-start;
		position: relative;
	}

	.fleet-division .fleet-category::after {
		position: absolute;
		right: 24px;
		top: 20px;
	}

	.fleet-category-count {
		margin-left: 0;
	}
}

@media (max-width: 680px) {
	body {
		font-size: 16px;
	}

	.cards,
	.fleet-grid {
		grid-template-columns: 1fr;
	}

	.site-header:not(.news-header) .brand > span:last-child {
		display:inline-block !important;
		font-size:.78rem;
		letter-spacing:1px;
		white-space:nowrap;
	}

	.section {
		padding: 70px 5vw;
	}

	.hero-actions .btn {
		width: 100%;
		text-align: center;
	}

	.banner {
		min-height: 680px;
	}

	.fleet-card img {
		height: 230px;
	}

	.brand-logo {
		width: 100px;
		height: 34px;
	}

	.footer-logo {
		width: 190px;
		height: 64px;
	}

	.discord-footer-link {
		width: 100%;
	}

	.discord-footer-banner {
		width: 100%;
		max-width: 520px;
	}
}


/* =========================================================
   15 — HOVER-FIX: Effekte sauber voneinander trennen
   ========================================================= */

/* Basis-Isolation:
   Verhindert, dass Glow-/Sweep-Effekte aus verschachtelten Kacheln,
   Buttons oder Summary-Elementen optisch in andere Komponenten laufen. */
.card,
.fleet-card,
.fleet-division,
.chrono-details,
.accordion button,
.link-cards a.btn.ghost,
.application a.btn.primary,
.discord-footer-link {
	isolation: isolate;
}

/* Details/Summary Reset:
   Browser-Defaults und generische Details-Kacheln dürfen keine fremden
   Hover-/Pseudo-Effekte von Card- oder Button-Elementen übernehmen. */
details.card,
details.manifesto-card,
details.fleet-division,
details.chrono-details {
	position: relative;
}

details.card summary,
details.manifesto-card summary,
details.fleet-division summary,
details.chrono-details summary {
	position: relative;
	z-index: 1;
}

/* Manifesto-Karten:
   Eigener Hover nur für Manifesto-Kacheln.
   Überschreibt keine Fleet- oder Link-Karten. */
.manifesto-card {
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease,
		background .25s ease;
}

.manifesto-card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 155, 47, .45);
	box-shadow:
		0 0 42px rgba(255, 155, 47, .16),
		0 0 35px rgba(0, 0, 0, .55);
}

.manifesto-card[open] {
	border-color: rgba(255, 155, 47, .55);
	box-shadow:
		0 0 48px rgba(255, 155, 47, .18),
		0 0 35px rgba(0, 0, 0, .55);
}

/* Manifesto Summary Marker bleibt nur Text,
   keine absolute Overlay-Fläche wie bei Buttons. */
.manifesto-card summary::before {
	content: none;
}

/* Chrono Details:
   Eigener Hover für Historie/Charta-Aufklapper,
   unabhängig von Fleet-Division und Accordion. */
.chrono-details summary {
	transition:
		background .28s ease,
		color .28s ease,
		box-shadow .28s ease,
		border-color .28s ease;
}

.chrono-details summary:hover {
	background:
		linear-gradient(
			90deg,
			rgba(255, 155, 47, .22),
			rgba(255, 155, 47, .05)
		);
	color: #fff;
	box-shadow:
		inset 0 0 24px rgba(255, 155, 47, .06),
		0 0 24px rgba(255, 155, 47, .10);
}

/* Fleet Division:
   Summary-Hover nur innerhalb der Fleet-Division.
   Die Fleet-Kategorie außerhalb von Details bleibt unverändert. */
.fleet-division .fleet-category {
	position: relative;
	overflow: hidden;
	transition:
		background .28s ease,
		box-shadow .28s ease,
		border-color .28s ease;
}

/* Separater Glow-Sweep für Fleet-Summary.
   Wichtig: eigener ::before, damit ::after weiterhin + / – bleibt. */
.fleet-division .fleet-category::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			120deg,
			transparent 0%,
			rgba(255, 155, 47, .14) 50%,
			transparent 100%
		);
	transform: translateX(-130%);
	transition: transform .7s ease;
	pointer-events: none;
	z-index: 0;
}

.fleet-division .fleet-category > * {
	position: relative;
	z-index: 1;
}

.fleet-division .fleet-category:hover {
	background:
		linear-gradient(
			90deg,
			rgba(255, 140, 0, .24),
			rgba(0, 0, 0, .18)
		);
	border-left-color: var(--orange2);
	box-shadow:
		inset 0 0 26px rgba(255, 155, 47, .06),
		0 0 26px rgba(255, 155, 47, .12);
}

.fleet-division .fleet-category:hover::before {
	transform: translateX(130%);
}

/* Plus/Minus bleibt immer sichtbar über dem Sweep. */
.fleet-division .fleet-category::after {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
}

/* Fleet Card:
   Hover bleibt nur für Schiffskarten.
   Link-/Button-Hover innerhalb der Karte verändert nicht die ganze Card. */
.fleet-card {
	isolation: isolate;
}

.fleet-card:hover {
	transform: translateY(-6px);
	box-shadow:
		0 0 45px rgba(255, 155, 47, .18),
		0 0 35px rgba(0, 0, 0, .55);
}

.fleet-image-link {
	isolation: isolate;
}

/* Link Cards:
   Card-Hover separat von Button-Hover.
   Verhindert, dass Button-Sweep auf die gesamte Karte wirkt. */
.link-cards .card {
	transition:
		transform .25s ease,
		box-shadow .25s ease,
		border-color .25s ease;
}

.link-cards .card:hover {
	transform: translateY(-4px);
	border-color: rgba(255, 155, 47, .38);
	box-shadow:
		0 0 38px rgba(255, 155, 47, .14),
		0 0 35px rgba(0, 0, 0, .55);
}

/* Buttons:
   Pseudo-Elemente nur für exakt definierte Buttonbereiche aktivieren. */
.btn::before,
.btn::after {
	content: none;
}

.link-cards a.btn.ghost::before,
.application a.btn.primary::before {
	content: "";
}

/* Accordion:
   Hover nur auf echte Accordion-Buttons begrenzen.
   Details/Summary-Buttons/Kacheln werden nicht beeinflusst. */
.accordion > button {
	position: relative;
	isolation: isolate;
}

/* Footer:
   Discord-Hover wirkt nur auf den Discord-Link,
   nicht auf normale Footer-Links. */
footer a:not(.discord-footer-link):hover {
	color: #ffd19a;
	text-shadow: 0 0 10px rgba(255, 155, 47, .35);
}

/* Logo-Hover nur für Logo-Bereiche.
   Verhindert unerwartete Bild-Hover-Effekte bei anderen Images. */
.brand:hover .logo-static,
.footer-logo:hover .logo-static {
	opacity: 0;
}

.brand:hover .logo-animated,
.footer-logo:hover .logo-animated {
	opacity: 1;
	filter: drop-shadow(0 0 14px rgba(255, 155, 47, .45));
}

/* Mobile Korrektur:
   Fleet-Summary Plus/Minus bleibt rechts oben,
   Sweep bleibt hinter Text und Count. */
@media (max-width: 700px) {
	.fleet-division .fleet-category::after {
		position: absolute;
		right: 24px;
		top: 20px;
	}
}

/* =========================================
   MOBILE NAV FIX
   Verhindert, dass das Menü hinter/innerhalb
   der Header-Leiste abgeschnitten wird
========================================= */

@media (max-width: 980px){

    .site-header{
        overflow:visible;
    }

    .nav{
        z-index:9999;
        box-shadow:
            0 20px 40px rgba(0,0,0,.75),
            0 0 30px rgba(255,155,47,.12);
        border-bottom:1px solid var(--line);
    }

    .nav.open{
        display:flex;
    }
}

/* =========================================
   NEWS PAGE MOBILE NAV FIX
   Nur News-Seite, überschreibt nichts anderes
========================================= */

@media (max-width: 980px){

    .site-header.news-header{
        overflow:visible;
        min-height:74px;

        padding:10px 18px;

        background:
            linear-gradient(
                180deg,
                rgba(5,5,5,.96),
                rgba(12,12,12,.92)
            );

        border-bottom:1px solid rgba(255,155,47,.18);

        box-shadow:
            0 8px 30px rgba(0,0,0,.45),
            inset 0 -1px 0 rgba(255,155,47,.06);
    }

    /* Navigation sichtbar halten */
    .site-header.news-header .nav{
        display:flex !important;

        position:static;

        flex-direction:row;
        align-items:center;
        justify-content:flex-end;

        gap:12px;

        background:transparent;

        padding:0;

        border:0;
        box-shadow:none;

        z-index:30;
    }

    /* Zurück Button */
    .site-header.news-header .nav a{

        position:relative;

        display:flex;
        align-items:center;
        justify-content:center;

        padding:10px 18px;

        border:1px solid rgba(255,155,47,.22);

        background:
            linear-gradient(
                135deg,
                rgba(255,155,47,.12),
                rgba(0,0,0,.18)
            );

        color:#f4d4a7;

        font-family:Orbitron, sans-serif;
        font-size:.78rem;
        font-weight:700;

        letter-spacing:1px;
        text-transform:uppercase;

        text-decoration:none;

        overflow:hidden;
        isolation:isolate;

        transition:
            transform .28s ease,
            border-color .28s ease,
            box-shadow .28s ease,
            background .28s ease,
            color .28s ease;
    }

    /* Glow Sweep */
    .site-header.news-header .nav a::before{

        content:"";

        position:absolute;
        inset:0;

        background:
            linear-gradient(
                120deg,
                transparent 0%,
                rgba(255,155,47,.18) 50%,
                transparent 100%
            );

        transform:translateX(-130%);

        transition:transform .7s ease;

        z-index:-1;
    }

    /* Hover */
    .site-header.news-header .nav a:hover{

        transform:
            translateY(-2px)
            scale(1.02);

        border-color:#ffb347;

        background:
            linear-gradient(
                135deg,
                rgba(255,155,47,.2),
                rgba(0,0,0,.3)
            );

        color:#fff;

        box-shadow:
            0 0 24px rgba(255,140,0,.18),
            0 0 50px rgba(255,140,0,.08);
    }

    .site-header.news-header .nav a:hover::before{
        transform:translateX(130%);
    }

    /* Toggle ausblenden */
    .site-header.news-header .menu-toggle{
        display:none;
    }
}

@media (max-width:680px){

    /* Logo sichtbar lassen */
    .site-header .brand-logo{
        display:inline-block !important;
    }

    /* Chronos Corp Text sichtbar */
    .site-header.news-header .brand > span:last-child{

        display:inline-block !important;

        font-size:.78rem;

        letter-spacing:1px;

        white-space:nowrap;
    }

    .site-header.news-header .brand-logo{
        width:40px;
        height:34px;
    }

    /* Mobile Header kompakter */
    .site-header.news-header{

        padding:10px 14px;

        gap:10px;
    }

    /* Button kompakter */
    .site-header.news-header .nav a{

        padding:8px 14px;

        font-size:.7rem;

        letter-spacing:.8px;
    }
}
/* =========================================
   INDEX MOBILE NAVIGATION UPGRADE
   Nur Hauptseite, nicht News-Seite
========================================= */

@media (max-width:980px){

    .site-header:not(.news-header){
        overflow:visible;
        min-height:72px;
        padding:8px 18px;
        z-index:9999;
    }

    .site-header:not(.news-header) .menu-toggle{
        display:flex;
        align-items:center;
        justify-content:center;

        width:46px;
        height:42px;

        border:1px solid rgba(255,155,47,.35);
        background:linear-gradient(135deg, rgba(255,155,47,.12), rgba(0,0,0,.45));

        color:var(--orange2);
        font-size:1.4rem;

        cursor:pointer;
        isolation:isolate;

        box-shadow:
            0 0 18px rgba(255,140,0,.12),
            inset 0 0 18px rgba(255,140,0,.04);

        transition:
            transform .25s ease,
            border-color .25s ease,
            box-shadow .25s ease,
            background .25s ease;
    }

    .site-header:not(.news-header) .menu-toggle:hover{
        transform:translateY(-2px);
        border-color:#ffb347;
        background:linear-gradient(135deg, rgba(255,155,47,.2), rgba(0,0,0,.55));
        box-shadow:
            0 0 26px rgba(255,140,0,.25),
            inset 0 0 20px rgba(255,140,0,.08);
    }

    .site-header:not(.news-header) .nav{
        display:none;

        position:absolute;
        top:100%;
        left:14px;
        right:14px;

        flex-direction:column;
        align-items:stretch;
        gap:10px;

        padding:18px;

        background:
            linear-gradient(180deg, rgba(8,8,8,.98), rgba(15,15,15,.96));

        border:1px solid rgba(255,155,47,.25);

        box-shadow:
            0 22px 55px rgba(0,0,0,.82),
            0 0 35px rgba(255,155,47,.12),
            inset 0 0 28px rgba(255,155,47,.04);

        z-index:9998;
    }

    .site-header:not(.news-header) .nav.open{
        display:flex;
        animation:mobileNavOpen .28s ease forwards;
    }

    .site-header:not(.news-header) .nav a{
        display:flex;
        align-items:center;
        justify-content:space-between;

        padding:13px 16px;

        border:1px solid rgba(255,155,47,.18);
        background:linear-gradient(90deg, rgba(255,155,47,.08), rgba(0,0,0,.2));

        color:#d9d0c4;

        font-family:Orbitron, sans-serif;
        font-size:.82rem;
        letter-spacing:1px;

        text-decoration:none;

        overflow:hidden;
        isolation:isolate;

        transition:
            transform .24s ease,
            color .24s ease,
            border-color .24s ease,
            background .24s ease,
            box-shadow .24s ease;
    }

    .site-header:not(.news-header) .nav a:hover{
        transform:translateX(4px);
        color:#fff;
        border-color:rgba(255,155,47,.45);
        background:linear-gradient(90deg, rgba(255,155,47,.16), rgba(0,0,0,.32));
        box-shadow:
            0 0 22px rgba(255,140,0,.14),
            inset 0 0 18px rgba(255,140,0,.04);
    }

    .site-header:not(.news-header) .nav a::after{
        display:none;
    }

    .site-header:not(.news-header) .nav .external-link{
        width:100%;
        justify-content:center;

        margin-top:6px;

        border-color:rgba(255,155,47,.38);
        color:#ffd19a !important;
    }
}

@keyframes mobileNavOpen{
    from{
        opacity:0;
        transform:translateY(-10px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media (max-width:680px){

    .site-header:not(.news-header) .brand-logo{
        display:inline-block !important;
        width:88px;
        height:34px;
    }

    .site-header:not(.news-header) .brand > span:last-child{
        display:inline-block !important;
        font-size:.78rem;
        letter-spacing:1px;
        white-space:nowrap;
    }

    .site-header:not(.news-header){
        padding:8px 14px;
    }

    .site-header:not(.news-header) .nav{
        left:10px;
        right:10px;
        padding:14px;
    }
}

/* =========================================================
   19 — FINAL CONFLICT SAFETY OVERRIDES
   Begrenzt Sonderfälle, ohne die Optik zu ändern.
   ========================================================= */

/* Nur diese Buttons dürfen ihren Sweep behalten. */
.hero-actions a.btn::before,
.link-cards a.btn.ghost::before,
.application a.btn.primary::before,
.news-card .news-btn::before{
	content:"";
}

/* Logo-Text nur gezielt verstecken, niemals das Logo-Span selbst. */
@media (max-width:680px){
	.site-header:not(.news-header) .brand-logo,
	.site-header.news-header .brand-logo{
		display:inline-block !important;
	}
}