/* =========================================================
   EchoVault Styles — vollständig kompatibel und themable
   ========================================================= */

/* ---------------------------
   Farbvariablen (Theme)
   --------------------------- */
:root {
	--hero-from: #0d6efd;
	--hero-to: #4ba3ff;
	--body-bg: lightcyan;
	--body-fg: #000;

	/* Navbar/Hero Effekte */
	--nav-radius: 0.75rem; /* nur unten rund */
	--melt-height: 32px; /* Schmelz-Zone im Hero */
	--melt-tint: rgba(0, 0, 0, 0.08); /* leichte Abdunklung */
}

[data-bs-theme="dark"] {
	--hero-from: #0b3a77;
	--hero-to: #1a5fd1;
	--body-bg: #0f1216;
	--body-fg: #e7eaf0;

	--melt-tint: rgba(255, 255, 255, 0.06); /* zarter Aufheller im Dark-Theme */
}

/* ---------------------------
   Grundlayout
   --------------------------- */
html {
	/* iOS/ältere WebKit + aktuelle UAs */
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--body-bg);
	color: var(--body-fg);
	font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

main {
	padding: 2rem;
	text-align: left;
}

/* ---------------------------
   Navbar: unten rund + schwebend
   --------------------------- */
.navbar {
	position: sticky;
	top: 0;
	z-index: 10;
	border-radius: 0 0 var(--nav-radius) var(--nav-radius);
	background-clip: padding-box;
	backdrop-filter: saturate(120%) blur(8px);
	-webkit-backdrop-filter: saturate(120%) blur(8px);
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
}

/* ---------------------------
   Hero-Bereich
   --------------------------- */
.hero-gradient {
	position: relative;
	/* Hero hinter die Navbar ziehen (Wert ≈ Navbar-Höhe) */
	margin-top: -177px;
	/* Inhalt nicht verdecken: Überlappung kompensieren */
	padding-top: calc(4rem + 177px);
	padding-bottom: 4rem;
	padding-left: 2rem;

	background-image: linear-gradient(90deg, var(--hero-from), var(--hero-to));
	color: #fff;
	text-align: left;
}

/* zarter „Schmelz“-Overlay direkt unter der Navbar-Kante */
.hero-gradient::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: var(--melt-height);
	background: linear-gradient(to bottom, var(--melt-tint), transparent);
	pointer-events: none;
}

/* ------------------------------
   Padding / Margin für Hauptthings
   ------------------------------- */
.ev-container {
	max-width: 960px;
	margin-inline: auto;
	padding: 2rem 1.25rem;
}

.ev-header {
	position: sticky;
	top: 0;
	z-index: 10;
	border-radius: 0 0 0.75rem 0.75rem;
	background: transparent; /* Navbar behält bg-dark */
}

.visually-hidden-focusable {
	position: absolute;
	left: -9999px;
	top: auto;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.visually-hidden-focusable:focus {
	position: static;
	width: auto;
	height: auto;
	padding: 0.5rem;
	background: #ffc;
}

/* ---------------------------
   Abgerundete Komponenten
   --------------------------- */
.card,
.btn,
.form-control,
.navbar {
	border-radius: 0.66rem;
}

/* ---------------------------
   Custom Hamburger
   --------------------------- */
.custom-toggler {
	border: none;
	background: transparent;
	width: 32px;
	height: 24px;
	position: relative;
	padding: 0;
}
.custom-toggler:focus {
	outline: 2px solid rgba(255, 255, 255, 0.5);
	outline-offset: 2px;
}
.custom-toggler .line {
	position: absolute;
	left: 0;
	width: 100%;
	height: 3px;
	background: #fff;
	transition: 0.3s;
}
.custom-toggler .line:nth-child(1) {
	top: 0;
}
.custom-toggler .line:nth-child(2) {
	top: 10px;
}
.custom-toggler .line:nth-child(3) {
	top: 20px;
}
.custom-toggler:not(.collapsed) .line:nth-child(1) {
	top: 10px;
	transform: rotate(45deg);
}
.custom-toggler:not(.collapsed) .line:nth-child(2) {
	opacity: 0;
}
.custom-toggler:not(.collapsed) .line:nth-child(3) {
	top: 10px;
	transform: rotate(-45deg);
}

/* ---------------------------
   Theme-Toggler Button
   --------------------------- */
#toggler.btn {
	padding: 0.25rem 0.5rem;
	line-height: 1.2;
}
#toggler {
	line-height: 1;
}
#toggler svg,
#toggler span {
	display: block;
}

/* ---------------------------
   Kompatibilitäts-Fix text-align
   --------------------------- */
.selector {
	text-align: -webkit-match-parent; /* älteres WebKit */
	text-align: match-parent; /* Standard (Safari 15.4+) */
	text-align: inherit; /* optional, zuletzt */
}

/* ---------------------------
   Accordion (scoped, altes Design)
   --------------------------- */
.ev-scope {
	--ev-card: #ffffff;
	--ev-text: #0d1b2a;
	--ev-muted: #5b6b86;
	--ev-primary: #4aa3ff;
	--ev-primary-2: #3d7dff;
	--ev-border: rgba(90, 110, 150, 0.25);
	--ev-focus-ring: 0 0 0 0.2rem rgba(61, 125, 255, 0.25);
	--ev-radius: 14px;
	--ev-shadow: 0 4px 18px rgba(10, 20, 40, 0.12);
	--ev-active-bg-solid: #3d7dff;
}

[data-bs-theme="dark"] .ev-scope {
	--ev-card: #0f1730;
	--ev-text: #dfe7ff;
	--ev-muted: #a9b6d3;
	--ev-border: rgba(140, 160, 200, 0.28);
	--ev-focus-ring: 0 0 0 0.2rem rgba(74, 163, 255, 0.35);
	--ev-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
	--ev-active-bg-solid: #3d7dff;
}

.ev-scope .accordion.ev-accordion {
	--bs-accordion-bg: var(--ev-card);
	--bs-accordion-color: var(--ev-text);
	--bs-accordion-border-color: var(--ev-border);
	--bs-accordion-border-radius: var(--ev-radius);
	--bs-accordion-inner-border-radius: var(--ev-radius);
	--bs-accordion-btn-color: var(--ev-text);
	--bs-accordion-active-color: #fff;
	--bs-accordion-active-bg: var(--ev-active-bg-solid);
	--bs-accordion-btn-focus-box-shadow: none;

	border-radius: calc(var(--ev-radius) + 2px);
	gap: 10px;
}

.ev-scope .ev-accordion .accordion-item {
	background: var(--ev-card);
	border: 1px solid var(--bs-accordion-border-color);
	border-radius: var(--ev-radius);
	overflow: hidden;
	box-shadow: var(--ev-shadow);
}
.ev-scope .ev-accordion .accordion-item + .accordion-item {
	margin-top: 10px;
}

.ev-scope .ev-accordion .accordion-button {
	padding: 1rem 1.125rem;
	font-weight: 600;
	letter-spacing: 0.2px;
	background: linear-gradient(
		180deg,
		rgba(90, 110, 150, 0.08),
		rgba(20, 30, 60, 0.06)
	);
	transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease,
		color 0.2s ease;
	display: flex;
	align-items: center;
}
.ev-scope .ev-accordion .accordion-button:hover,
.ev-scope .ev-accordion .accordion-button:focus {
	background: linear-gradient(
		180deg,
		rgba(74, 163, 255, 0.14),
		rgba(61, 125, 255, 0.1)
	);
	box-shadow: var(--ev-focus-ring);
}
.ev-scope .ev-accordion .accordion-button:not(.collapsed) {
	color: #fff;
	background-color: var(--ev-active-bg-solid);
	background: linear-gradient(180deg, var(--ev-primary), var(--ev-primary-2));
	transform: translateY(-1px);
}

.ev-scope .ev-accordion .accordion-button::after {
	flex-shrink: 0;
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12.146 6.146a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.147z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000' d='M12.146 6.146a.5.5 0 0 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L8 9.293l3.646-3.147z'/%3E%3C/svg%3E")
		center / contain no-repeat;
	transform: rotate(0deg);
	transition: transform 0.18s ease, opacity 0.18s ease;
	opacity: 0.9;
}
.ev-scope .ev-accordion .accordion-button:not(.collapsed)::after {
	transform: rotate(180deg);
}

.ev-scope .ev-accordion .accordion-body {
	color: var(--ev-muted);
	padding: 0.9rem 1.125rem 1.15rem;
	line-height: 1.55;
	background: radial-gradient(
			900px 160px at 0% 0%,
			rgba(74, 163, 255, 0.08),
			transparent 60%
		),
		linear-gradient(180deg, rgba(46, 67, 117, 0.035), rgba(12, 20, 40, 0));
}

/* sanfter Card-Look */
.bg-body.rounded-4.shadow-sm {
	box-shadow: 0 0.25rem 3rem rgba(39, 53, 255, 0.3) !important;
}

/* Feedback für Webseite */
.ev-feedback-btn{
  position:fixed; right:1rem; bottom:1rem;
  width:3rem; height:3rem; line-height:3rem; text-align:center;
  border-radius:50%; background:#0d6efd; color:#fff; text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,.2); z-index:1040;
}

.ev-feedback-btn{ z-index:1060; } /* über Navbar/Offcanvas */

.ev-feedback-btn:focus,.ev-feedback-btn:hover{ background:#0b5ed7; color:#fff; }
@media (prefers-reduced-motion:no-preference){
  .ev-feedback-btn{ transition:transform .15s ease, background-color .15s ease; }
  .ev-feedback-btn:hover{ transform:translateY(-2px); }
}

@supports (bottom: env(safe-area-inset-bottom)){
  .ev-feedback-btn{ bottom: calc(1rem + env(safe-area-inset-bottom)); }
}


/* ---------------------------
   Motion-Reduction
   --------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ev-scope .ev-accordion .accordion-button,
	.ev-scope .ev-accordion .accordion-button::after {
		transition: none;
	}
}

/* ---------------------------
   Desktop-Feinheiten
   --------------------------- */
@media (min-width: 768px) {
	.ev-scope .ev-accordion .accordion-button {
		padding: 1rem 1.25rem;
	}
	.ev-scope .ev-accordion .accordion-body {
		padding: 1rem 1.25rem 1.2rem;
	}
}

/* ---------------------------
   Druckfarben (Kompatibilität)
   --------------------------- */
@media print {
	.ev-scope {
		-webkit-print-color-adjust: exact;
		print-color-adjust: exact;
	}
}

/* -----------------------------------------
   EchoVault — animated download button
   ----------------------------------------- */

.ev-download-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;

    padding: 0.3rem 0.95rem;
    border-radius: 999px;

    border: 1px solid rgba(13, 110, 253, 0.7);
    background:
        radial-gradient(circle at 0% 0%, rgba(90, 180, 255, 0.25), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 225, 255, 0.18), transparent 60%),
        linear-gradient(135deg, #0b3a77, #1a5fd1);

    color: #ffffff;
    text-decoration: none;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 500;

    overflow: hidden;
    box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    isolation: isolate;

    cursor: pointer;

    transition:
        background 0.25s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease,
        transform 0.18s ease,
        opacity 0.18s ease;
}

.ev-download-btn .ev-download-text {
    position: relative;
    z-index: 2;
    white-space: nowrap;
}

/* show only default text by default */
.ev-download-text-progress,
.ev-download-text-done {
    display: none;
}

.ev-download-icon {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ev-download-svg {
    width: 0.85rem;
    height: 0.85rem;
    display: block;
    fill: #cce7ff;
    filter: drop-shadow(0 0 4px rgba(0, 193, 252, 0.8));
}

/* glow halo */
.ev-download-btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background:
        radial-gradient(circle at 10% 0%, rgba(0, 193, 252, 0.45), transparent 55%),
        radial-gradient(circle at 85% 100%, rgba(0, 255, 204, 0.25), transparent 50%);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
}

/* animated stripes layer for downloading state */
.ev-download-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background-image: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.16) 0,
        rgba(255, 255, 255, 0.02) 40%,
        rgba(0, 193, 252, 0.4) 50%,
        rgba(255, 255, 255, 0.02) 60%,
        rgba(255, 255, 255, 0.16) 100%
    );
    background-size: 220% 220%;
    opacity: 0;
    mix-blend-mode: screen;
    pointer-events: none;
}

/* hover state */
.ev-download-btn:hover,
.ev-download-btn:focus-visible {
    border-color: rgba(0, 193, 252, 0.9);
    box-shadow:
        0 0 10px rgba(0, 193, 252, 0.4),
        0 0 30px rgba(0, 0, 0, 0.45);
    transform: translateY(-1px);
}

.ev-download-btn:hover::before,
.ev-download-btn:focus-visible::before {
    opacity: 1;
}

/* click feedback */
.ev-download-btn:active {
    transform: translateY(0);
    box-shadow: 0 0 6px rgba(0, 193, 252, 0.35);
}

/* -------------------------
   DOWNLOADING STATE
   ------------------------- */

.ev-download-btn.is-downloading {
    border-color: rgba(0, 193, 252, 0.9);
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 193, 252, 0.35), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 255, 204, 0.28), transparent 60%),
        linear-gradient(135deg, #052338, #0b3a77);
    box-shadow:
        0 0 12px rgba(0, 193, 252, 0.6),
        0 0 32px rgba(0, 0, 0, 0.5);
    cursor: progress;
}

/* stripes animation visible only while downloading */
.ev-download-btn.is-downloading::after {
    opacity: 1;
    animation: ev-download-stripes 0.85s linear infinite;
}

/* spinner around icon while downloading */
.ev-download-btn.is-downloading .ev-download-icon {
    position: relative;
}

.ev-download-btn.is-downloading .ev-download-icon::before {
    content: "";
    position: absolute;
    inset: -0.25rem;
    border-radius: 999px;
    border: 2px solid rgba(0, 193, 252, 0.2);
    border-top-color: rgba(0, 255, 204, 0.9);
    border-right-color: rgba(0, 255, 204, 0.7);
    animation: ev-download-spinner 0.7s linear infinite;
}

/* text switching during download */
.ev-download-btn.is-downloading .ev-download-text-default {
    display: none;
}
.ev-download-btn.is-downloading .ev-download-text-progress {
    display: inline;
}

/* button disabled look while downloading but still readable */
.ev-download-btn.is-downloading,
.ev-download-btn.is-downloading:focus-visible,
.ev-download-btn.is-downloading:hover {
    opacity: 0.95;
}

/* -------------------------
   DONE STATE
   ------------------------- */

.ev-download-btn.is-done {
    border-color: rgba(0, 255, 204, 0.9);
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 255, 204, 0.35), transparent 55%),
        radial-gradient(circle at 95% 105%, rgba(74, 163, 255, 0.24), transparent 60%),
        linear-gradient(135deg, #026b4f, #00a97a);
    box-shadow:
        0 0 14px rgba(0, 255, 204, 0.6),
        0 0 36px rgba(0, 0, 0, 0.55);
}

/* subtle check mark glow */
.ev-download-btn.is-done .ev-download-svg {
    fill: #e9fff8;
    filter: drop-shadow(0 0 5px rgba(0, 255, 204, 0.9));
}

/* text switching in done state */
.ev-download-btn.is-done .ev-download-text-default,
.ev-download-btn.is-done .ev-download-text-progress {
    display: none;
}
.ev-download-btn.is-done .ev-download-text-done {
    display: inline;
}

/* Hero design-01 */

/* Hero full-width, obwohl er in einem zentrierten Container steckt */
.contain {
	position: relative;
	width: 100vw;              /* komplette Viewport-Breite */
	left: 50%;                 /* aus der Mitte des Containers heraus schieben */
	transform: translateX(-50%);
	
	height: 400px;
	overflow: hidden;
	border: 1px solid rgba(255, 255, 255, 0.2);
	margin-top: -2rem;         /* hebt den Hero optisch näher an die Navbar,
	                              Wert ggf. an dein <main>-Padding anpassen */
	margin-bottom: 2rem;       /* Abstand zum restlichen Inhalt */
}

/* Hintergrund-Layer bleiben wie gehabt */
.bg {
	position: absolute;
	top: 0;
	left: -50%;
	right: -50%;
	bottom: 0;

	animation: slide 5s ease-in-out infinite alternate;
	background-image: linear-gradient(
		-80deg,
		rgb(10, 30, 80) 0%,
		rgb(18, 80, 170) 40%,
		rgb(0, 180, 220) 100%
	);
	opacity: 0.5;
	z-index: 0;
}

.bg2 {
	animation-duration: 6s;
	animation-direction: alternate-reverse;
}

.bg3 {
	animation-duration: 7s;
}

.content {
	position: relative;
	z-index: 1;
	text-align: center;
	margin-top: 10%;
	color: white;
}


@keyframes slide {
	0% {
		transform: translateX(-35%);
	}
	100% {
		transform: translateX(35%);
	}
}

/* dark-mode tuning */
[data-bs-theme="dark"] .ev-download-btn {
    border-color: rgba(102, 178, 255, 0.85);
    background:
        radial-gradient(circle at 0% 0%, rgba(74, 163, 255, 0.32), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 255, 204, 0.24), transparent 60%),
        linear-gradient(135deg, #071427, #143570);
}

[data-bs-theme="dark"] .ev-download-btn.is-downloading {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 193, 252, 0.42), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(0, 255, 204, 0.32), transparent 60%),
        linear-gradient(135deg, #020c16, #06243d);
}

[data-bs-theme="dark"] .ev-download-btn.is-done {
    background:
        radial-gradient(circle at 0% 0%, rgba(0, 255, 204, 0.4), transparent 55%),
        radial-gradient(circle at 95% 105%, rgba(74, 163, 255, 0.26), transparent 60%),
        linear-gradient(135deg, #004633, #00976b);
}

[data-bs-theme="dark"] .ev-download-svg {
    fill: #e7f2ff;
}

/* motion reduction */
@media (prefers-reduced-motion: reduce) {
    .ev-download-btn {
        transition: none;
    }
    .ev-download-btn::after,
    .ev-download-btn.is-downloading .ev-download-icon::before {
        animation: none !important;
    }
}

/* stripes animation across the button */
@keyframes ev-download-stripes {
    0% {
        background-position: 0% 0%;
    }
    100% {
        background-position: 200% 200%;
    }
}

/* circular spinner */
@keyframes ev-download-spinner {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}