/* ============================================================
   Anfrage.de — Coming Soon Page
   ============================================================ */

:root {
  /* Farben */
  --color-primary:    #0E4F5C;
  --color-accent:     #E91E63;
  --color-accent-2:   #FF7A1A;
  --color-text:       #2A2A2A;
  --color-text-soft:  #555;
  --color-bg:         #ffffff;
  --color-bg-card:    #FFFFFF;
  --color-border:     #E5E5E0;

  /* Typografie */
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;

  /* Spacing */
  --container: 960px;
  --radius:    16px;
}

/* ============================================================
   Reset & Basis
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  min-height: 100vh;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; display: block; }

/* ============================================================
   Layout
   ============================================================ */
.page {
  max-width: var(--container);
  margin: 0 auto;
  padding: 40px 24px 24px;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.hero { flex: 1; }

/* ============================================================
   Logo
   ============================================================ */
.logo-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 32px;
}
.logo {
  width: 100%;
  max-width: 5000px;
  height: auto;
}

/* ============================================================
   Badge
   ============================================================ */
.badge {
  display: inline-block;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  color: white;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 auto 24px;
  display: block;
  width: fit-content;
}

/* ============================================================
   Headline
   ============================================================ */
.headline {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 900;
  line-height: 1.15;
  text-align: center;
  margin: 0 0 24px;
  letter-spacing: -0.5px;
}
.accent {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  text-align: center;
  font-size: clamp(16px, 2vw, 19px);
  color: var(--color-text-soft);
  max-width: 800px;
  margin: 0 auto 56px;
}

/* ============================================================
   Features
   ============================================================ */
.features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 20px;
  margin: 0 auto 64px;
  max-width: 860px;
}
.feature {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  
  padding: 24px;
  text-align: center;
}
.feature:hover {
  /* box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06); */
}
.feature-icon {
  font-size: 32px;
  margin-bottom: 12px;
}
.feature h3 {
  font-size: 18px;
  margin: 0 0 8px;
  font-weight: 700;
}
.feature p {
  font-size: 15px;
  color: var(--color-text-soft);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   Signup-Form
   ============================================================ */
.signup {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  
  padding: 40px 32px;
  max-width: 600px;
  margin: 0 auto 56px;
  text-align: center;
  box-shadow: 0 8px 32px rgba(14, 79, 92, 0.05);
}
.signup h2 {
  font-size: 24px;
  margin: 0 0 8px;
  font-weight: 800;
}
.signup-sub {
  margin: 0 0 24px;
  color: var(--color-text-soft);
  font-size: 15px;
}

.signup-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.signup-form input[type="email"] {
  flex: 1 1 240px;
  padding: 14px 16px;
  border: 2px solid var(--color-border);
  
  font-size: 16px;
  font-family: inherit;
  outline: none;
}
.signup-form input[type="email"]:focus {
  border-color: var(--color-primary);
}
.signup-form input[type="email"].invalid {
  border-color: var(--color-accent);
}
.signup-form button {
  padding: 14px 24px;
  background: var(--color-primary);
  color: white;
  border: none;
  font-size: 16px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}

.form-msg {
  margin-top: 16px;
  min-height: 24px;
  font-size: 15px;
  font-weight: 500;
}
.form-msg.success { color: #2E7D32; }
.form-msg.error   { color: var(--color-accent); }

/* ============================================================
   Footer
   ============================================================ */
.site-footer {
  text-align: center;
  padding-top: 32px;
  border-top: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-soft);
}
.footer-net { margin: 0 0 8px; }
.footer-net a { font-weight: 600; }
.footer-meta { margin: 0; }

/* ============================================================
   Mobile Anpassungen
   ============================================================ */
@media (max-width: 600px) {
  .page { padding: 24px 16px 16px; }
  .logo { max-width: 280px; }
  .signup { padding: 28px 20px; }
  .signup h2 { font-size: 20px; }
  .signup-form { flex-direction: column; }
  .signup-form button { width: 100%; }
}









.imp-overlay{
  position:fixed;
  inset:0;
  background: rgba(26,47,56,0.7);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:1000;
  padding:20px;
}
.imp-overlay.is-open{
  display:flex;
}
.imp-card {
  background: #ffffff;
  color: #2A2A2A;
  width: 500px;
  max-width: 500px;
  padding: 40px 44px;
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
  position: relative;
  overflow-y: auto;
  max-height: calc(90vh - 40px);
}
.imp-close{
  position:absolute;
  top:14px;
  right:14px;
  width:36px;
  height:36px;
  border-radius:50%;
  background: var(--paper-deep);
  border:none;
  font-size:1.6rem;
  line-height:1;
  cursor:pointer;
  color: var(--ink);
}
.imp-close:hover{
  background: var(--coral);
  color:#fff;
}
.imp-title{
  font-family: var(--serif);
  font-size:1.8rem;
  font-weight:800;
  letter-spacing:-0.025em;
  margin-bottom:24px;
  color: var(--ink);
}
.imp-body p{
  margin-bottom:14px;
  font-size:0.95rem;
  color: var(--ink-soft);
  line-height:1.6;
}
.imp-body strong{
  color: var(--ink);
  font-weight:600;
  display:block;
  margin-top:6px;
}
.imp-body a{
  color: var(--coral);
  font-weight:500;
}
@media (max-width:640px){
  .imp-card{
    padding:28px 24px;
  }
  .imp-title{
    font-size:1.5rem;
  }
}