/* ──────────────────────────────────────────────────
   1) FONTS & ROOT-VALUES
────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500,700|Montserrat:300,400,500,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&display=swap');

:root {
  /* Dark-UI Farben */
  --primary: #E1B79F;
  --primary-light: #F5D6BE;
  --secondary: #C49E8E;
  --dark: #1C1A19;
  --darker: #181617;
  --bg: #232022;
  --sidebar-bg: #181617;
  --border: #4A413C;
  --text: #F4EFEA;
  --text-light: #fff6ef;
  --inactive: #C49E8E55;
  --error: #E28484;
  --shadow: 0 2px 20px #0007;
}

/* ──────────────────────────────────────────────────
   2) RESET & GLOBAL DARK THEME
────────────────────────────────────────────────── */
* { box-sizing:border-box; margin:0; padding:0; }
body, html {
    font-family: 'Inter', 'Montserrat', Arial, sans-serif;
    background: var(--bg);
    color: #ffe8d4;
    min-height: 100vh;
    margin: 0;
    padding: 0;
}
#main {
    margin: 0 auto;
}
a { color: var(--primary); text-decoration:none; transition:color .14s; }
a:hover { color: var(--primary-light); text-decoration:underline; }

/* Buttons */
.btn, button.btn, a.btn {
  display:inline-block;
  padding:.8rem 2rem;
  border-radius:999px;
  font:1.09rem inherit;
  cursor:pointer;
  margin:.6rem .3rem;
  background:none; border:none;
  color:var(--primary); font-weight:600;
  transition:background .13s,color .13s;
}
.btn.primary, .btn-primary {
  background:linear-gradient(90deg,var(--primary) 0%,var(--secondary)100%);
  color:var(--darker); box-shadow:0 2px 10px #e1b79f44;
}
.btn.primary:hover, .btn-primary:hover {
  background:linear-gradient(90deg,var(--primary-light)0%,var(--primary)100%);
}
.btn.outline, .main-btn.outline, .sec-btn {
  background:none; border:2px solid var(--primary); color:var(--primary);
}
.btn.outline:hover, .main-btn.outline:hover, .sec-btn:hover {
  background:#2C2926; color:var(--primary-light);
}
.btn-danger {
  background:#ca2424; color:#fff; border:none;
  padding:.7rem 0; border-radius:999px; font:1.01rem inherit;
}

/* Inputs */
input, select, textarea {
  font:1rem inherit; border-radius:999px;
  border:1.7px solid #e5cfc2; background:#f8f6f2; color:#232022;
  padding:.82rem 1.18rem; transition:border .18s;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--primary); background:#fff;
}
::placeholder { color:#b9a394; }

/* App Layout */
#app { display:flex; min-height:100vh; background:radial-gradient(ellipse at top right,#27231F 60%,#181617 100%); }


/* Tables, Messages */
h2, .login-container h2, .profile-container h2 {
  color:var(--primary); font-size:2.1rem; font-weight:700; letter-spacing:.03em;
  margin-bottom:1.5rem;
}
h3 { color:var(--secondary); margin:2.2rem 0 .7rem; }
.msg-success { background:#162613; color:#2ee12e; padding:.6em;text-align:center;border-radius:999px; margin-bottom:1rem; }
.msg-error  { background:#320f10; color:#E28484; padding:.6em;text-align:center;border-radius:999px; margin-bottom:1rem; }

table {
  width:100%; border-collapse:collapse; margin-bottom:2rem;
  background:#231f1b; color:var(--text-light);
  box-shadow:0 0 16px #0005; border-radius:18px; overflow:hidden;
}
th,td {
  padding:14px 10px; border:1.2px solid #31251d; font-size:1.08rem;
}
th { background:#2c2926; color:var(--primary); }
tr:nth-child(even){ background:#232022; }
tr:nth-child(odd) { background:#231f1b; }
form.inline{ display:inline; }

/* Login/Profile Containers */
.login-container, .profile-container {
  background:#232022; color:var(--text-light);
  max-width:420px; margin:3rem auto 1rem;
  padding:2.5rem; border-radius:2rem;
  box-shadow:0 8px 32px #000a,0 2px 8px #0004;
  display:flex;flex-direction:column;align-items:center;
  border:1.5px solid #372c27;
}
.login-container img.logo {
  width:120px; margin-bottom:.3rem;
}
.login-form, .profile-form, .password-form {
  width:100%; display:flex; flex-direction:column; gap:1.08rem;
}
.login-form input, .profile-form input, .password-form input {
  padding:.8rem 1.2rem; border-radius:999px; border:1.7px solid #e5cfc2;
  background:#292522; color:var(--text-light); transition:border .18s;
}
.login-form input:focus, .profile-form input:focus, .password-form input:focus {
  border-color:var(--primary); background:#fff; color:#222;
}

.login-error, .profile-msg.error {
  background:#3a1616; color:#ca2424;
  padding:.7em;text-align:center;border-radius:999px;
  margin:.2em 0;
}
.login-hint, .profile-hint {
  color:#bbb; font-size:.94rem; text-align:center; margin:.2em 0 -.7em;
}
.profile-msg.info {
  background:#162613; color:#2ee12e;
}

/* Footer Dark (app) */
.footer {
  width:100vw; background:linear-gradient(135deg,#222019,#18161770%);
  padding:2.5em 0;
}
.footer .container {
  max-width:1100px; margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  color:#b9a78c; font-size:.99em; flex-wrap:wrap; gap:1em;
  padding:0 1.4em;
}
.footer .links a {
  margin-left:1.3em; color:var(--primary); font-weight:500;
}
.footer .links a:hover {
  text-decoration:underline; color:var(--primary-light);
}

/* Modals Dark */
.modal-footer {
  position:fixed; inset:0; background:rgba(30,15,5,0.6);
  display:none; align-items:center;justify-content:center; z-index:1000;
}
.modal-content-footer {
  background:#292522; color:var(--text-light);
  max-width:600px; width:95vw; max-height:83vh; overflow-y:auto;
  padding:1.7rem; border-radius:17px; box-shadow:0 4px 48px #000b;
  position:relative; line-height:1.54;
}
.modal-content-footer h1 {
  color:var(--primary); font-size:2.1rem; margin-bottom:.6rem;
}
.modal-close-footer {
  position:absolute; top:1.3rem; right:1.1rem;
  background:none; border:none; color:var(--primary); font-size:2.2rem; cursor:pointer;
}

/* Responsive (shared) */
@media (max-width:950px) {
  #sidebar { width:100vw; position:static; }
  .login-container, .profile-container, .step {
    border-radius:0; box-shadow:none; padding:1.5rem .7rem;
  }
  #main { padding:1.2rem .5rem; }
}
@media (max-width:650px) {
  #sidebar { width:100vw; }
}
@media (max-width:520px) {
  .login-container, .profile-container {
    padding:1.1em .6em 1.5em .6em;
  }
  .modal-content-footer { padding:1em; }
}

/* ──────────────────────────────────────────────────
   3) LANDINGPAGE OVERRIDES (html#top = deine index.html)
────────────────────────────────────────────────── */
html#top body,
html#top html {
  background: #FCFAF8; color: #1E1E1E;
}
html#top h1,h2,h3,h4,
html#top .hero-content h1,
html#top .parallax-overlay h2 {
  font-family:'Cormorant Garamond',serif; font-weight:600;
}
html#top .container {
  max-width:1000px; margin:0 auto; padding:0 1.5rem;
}
@media (min-width:1200px) {
  html#top .container { max-width:1140px; }
}

html#top .nav {
  position:absolute; inset:0 auto auto 0; background:transparent;
  display:flex;align-items:center;justify-content:space-between;
  padding:1em 40px; z-index:20;
}
html#top .nav .logo img { height:80px; }
html#top .nav ul {
  list-style:none; display:flex; gap:2em;
}
html#top .nav a {
  position:relative; font-weight:600; color:#1E1E1E;
  padding:.5em 0; transition:color .3s;
}
html#top .nav a::after {
  content:""; position:absolute;left:0;bottom:-4px;
  width:0; height:2px; background:#D8B4E2; transition:width .3s;
}
html#top .nav a:hover { color:#D8B4E2; }
html#top .nav a:hover::after { width:100%; }

html#top .hero {
  position:relative;
  background:url("../img/hero-extensee.png") center/cover no-repeat;
  min-height:100vh; display:flex; align-items:center;
}
html#top .hero::before {
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,
    rgba(252,250,248,0.05) 0%,
    rgba(252,250,248,0.1) 25%,
    rgba(252,250,248,0.6) 50%,
    rgba(252,250,248,0) 75%);
}
html#top .hero-content {
  position:relative; z-index:1;
  padding:4em 1.5rem; max-width:480px; margin-left:0;
  text-align:left;
}
html#top .hero-content h1 {
  font-size:2.8rem; line-height:1.15; color:#1E1E1E;
}
html#top .hero-content p {
  color:#4A4A4A; max-width:550px; margin-bottom:1.5em;
}

html#top .btn {
  background:#D8B4E2 !important; color:#1E1E1E !important;
  padding:.8em 1.6em; border-radius:9999px; font-weight:600; transition:background .3s;
}
html#top .btn:hover {
  background:#F2D5DB !important;
}

html#top .enterprise-cards {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:3rem; padding:5rem 0;
}
html#top .enterprise-cards .card {
  background:radial-gradient(circle at 50% 0%,#fff 0%,#FCFAF8 70%);
  border:1px solid rgba(0,0,0,.06);
  border-radius:12px;
  padding:2em; text-align:center;
  box-shadow:0 20px 40px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.05);
  transition:transform .35s cubic-bezier(.2,.75,.3,1),box-shadow .35s;
}
html#top .enterprise-cards .card:hover {
  transform:translateY(-12px) scale(1.03);
}
html#top .enterprise-cards .card img {
  width:90px; height:90px; margin-bottom:1rem;
  filter:drop-shadow(0 4px 6px rgba(0,0,0,.1));
}
html#top .enterprise-cards .card h3 { font-size:1.5rem; margin-bottom:.5em; }
html#top .enterprise-cards .card p  { color:#555; }

html#top .parallax {
  position:relative; min-height:420px;
  background-size:cover; background-position:center;
  background-attachment:fixed;
  display:flex;align-items:center;justify-content:center;
  isolation:isolate;
}
html#top .parallax::before {
  content:""; position:absolute; inset:0;
  background:rgba(0,0,0,.35);
  backdrop-filter:blur(2px); z-index:-1;
}
html#top .parallax-1 { background-image:url("../img/parallax1.png"); }
html#top .parallax-2 { background-image:url("../img/parallax2.png"); }
html#top .parallax-overlay {
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.25);
  backdrop-filter:blur(6px);
  box-shadow:0 8px 32px rgba(0,0,0,.12);
  border-radius:12px; padding:3rem 4rem; text-align:center; color:#fff;
}
html#top .parallax-overlay h2 { font-size:2.25rem; margin-bottom:.5em; }
html#top .parallax-overlay p  { font-size:1.1rem; }

html#top .enterprise-integration {
  text-align:center; padding:4em 0;
}
html#top .enterprise-integration h2 { margin-bottom:2em; }
html#top .enterprise-integration .steps {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:2em;
}
html#top .enterprise-integration .step-card {
  background:#fff; border-radius:16px; padding:2.2rem 1.8rem;
  text-align:center; box-shadow:0 12px 28px rgba(0,0,0,.08),0 2px 6px rgba(0,0,0,.04);
  transition:transform .35s;
}
html#top .enterprise-integration .step-card:hover {
  transform:translateY(-8px);
}
html#top .enterprise-integration .step-card img { width:72px; height:72px; margin-bottom:1rem; }
html#top .enterprise-integration .step-card h4 { font-size:1.35rem; margin-bottom:.6em; }
html#top .enterprise-integration .step-card p  { color:#555; }

html#top .contact {
  background:#F4EFEA; padding:4em 0;
}
html#top .contact h2 { text-align:center; margin-bottom:1.5em; }
html#top #register-form, html#top #contact-form {
  max-width:480px; margin:0 auto; display:grid; gap:1em;
}
html#top .field label { display:block; margin-bottom:.3em; font-weight:500; }
html#top .field input, html#top .field textarea {
  width:100%; padding:.8em; border:1px solid #ccc; border-radius:8px; font-size:1em;
}
html#top #register-form button.btn { width:auto; }

html#top .small {
  display:block; text-align:center; font-size:.93rem; color:#888; margin-top:.5em;
}

html#top .footer {
  background:linear-gradient(135deg,#F4EFEA,#DED4C2); padding:1.5em 0;
}
html#top .footer .container {
  display:flex;align-items:center;justify-content:space-between;
  flex-wrap:wrap; font-size:.9em; color:#555; max-width:1000px; margin:0 auto; padding:0 1.5rem;
}
html#top .footer .links a { margin-left:1em; color:#555; text-decoration:none; }
html#top .footer .links a:hover { text-decoration:underline; }