/*
Theme Name: Website Onepager
Theme URI: https://example.com
Author: Ihr Name / Agentur
Author URI: https://example.com
Description: Eigenständiges One-Page-Theme für den SaaS/KI-Service-Onepager. 1:1-Umsetzung des HTML-Entwurfs "index-V1.html" als WordPress-Theme mit editierbarem Content-Array, Customizer-Anbindung fürs Menü und nativer Lead-Formular-Verarbeitung.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: website-onepager
*/

/* Dieses Stylesheet wird 1:1 aus index-V1.html übernommen (nur die Selektor-Basis,
   keine inhaltlichen Änderungen). Es wird in functions.php über wp_enqueue_style()
   eingebunden. Der Theme-Header oben ist für WordPress Pflicht (steht im Backend
   unter Design > Themes). */

:root{
  --navy: #000080;
  --navy-deep: #05052e;
  --navy-mid: #12124d;
  --red: #ff1f2e;
  --white: #ffffff;
  --paper: #f4f4fb;
  --ink: #0b0b2e;
  --muted: #7a7aa3;
  --line: rgba(255,255,255,0.12);
  --line-dark: rgba(11,11,46,0.1);
  --mono: 'JetBrains Mono', monospace;
  --disp: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}
a{color:inherit;text-decoration:none;}
img,svg{display:block;max-width:100%;}
.wrap{max-width:1180px;margin:0 auto;padding:0 32px;}

@media (prefers-reduced-motion: reduce){
  *{animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important;}
}
.tucan-icon { --tucan-primary: #222; --tucan-chest: #0a7; width: 48px; }
/* ---------- NAV ---------- */
nav{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background: rgba(5,5,46,0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
nav .wrap{display:flex; align-items:center; justify-content:space-between; height:72px;}
.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #fff;
  text-decoration: none;
}
.nav-logo svg {
  width: 40px;
  height: 40px;
  display: block;
}
.logo-text {
  font-size: 32px;
  line-height: 1;
  color: beige;
  font-weight: 700;
  font-family: var(--disp);
  letter-spacing: 0.02em;
}
.nav-links{display:flex; gap:36px; align-items:center;}
.nav-links a{
  color: rgba(255,255,255,0.75);
  font-size: 14px;
  font-weight: 500;
  transition: color .2s ease;
}
.nav-links a:hover{color:#fff;}
.nav-cta{
  background: var(--red);
  color:#fff;
  padding:9px 20px;
  border-radius:6px;
  font-size:14px;
  font-weight:600;
  font-family: var(--disp);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-cta:hover{transform: translateY(-1px); box-shadow: 0 8px 20px -6px rgba(255,31,46,0.6);}
.nav-links a:focus-visible, .nav-cta:focus-visible, a:focus-visible, button:focus-visible{
  outline: 2px solid var(--red); outline-offset: 3px;
}

/* ---------- HERO ---------- */
header.hero{
  background:
    radial-gradient(1100px 500px at 82% -10%, rgba(255,31,46,0.16), transparent 60%),
    radial-gradient(800px 400px at 10% 0%, rgba(255,255,255,0.06), transparent 55%),
    linear-gradient(180deg, var(--navy-deep) 0%, #08083c 60%, #0a0a44 100%);
  padding: 168px 0 110px;
  position: relative;
  overflow: hidden;
  color: #fff;
}
header.hero::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(700px 500px at 75% 20%, black, transparent 75%);
  pointer-events:none;
}
.hero-grid{
  display:grid !important;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items:center;
  position:relative;
}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: #ffb3b8;
  background: rgba(255,31,46,0.1);
  border: 1px solid rgba(255,31,46,0.35);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 26px;
}
.eyebrow .dot{
  width:6px; height:6px; border-radius:50%;
  background: var(--red);
  animation: pulse 1.8s ease-in-out infinite;
}
@keyframes pulse{
  0%,100%{opacity:1; box-shadow:0 0 0 0 rgba(255,31,46,0.6);}
  50%{opacity:.55; box-shadow:0 0 0 6px rgba(255,31,46,0);}
}
h1{
  font-family: var(--disp);
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
h1 .accent{color: var(--red);}
.hero-sub{
  font-size: 17px;
  line-height: 1.65;
  color: rgba(255,255,255,0.68);
  max-width: 480px;
  margin-bottom: 36px;
}
.hero-actions{display:flex; gap:14px; flex-wrap:wrap; margin-bottom:46px;}
.btn-primary{
  background: var(--red);
  color:#fff;
  padding: 14px 26px;
  border-radius: 8px;
  font-family: var(--disp);
  font-weight:600;
  font-size:15px;
  border:none;
  cursor:pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn-primary:hover{transform: translateY(-2px); box-shadow: 0 12px 26px -8px rgba(255,31,46,0.55);}
.btn-ghost{
  background: transparent;
  color: #fff;
  padding: 14px 24px;
  border-radius: 8px;
  font-family: var(--disp);
  font-weight:600;
  font-size:15px;
  border: 1px solid rgba(255,255,255,0.25);
  cursor:pointer;
  transition: background .15s ease, border-color .15s ease;
}
.btn-ghost:hover{background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.5);}
.badge-offline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  background: rgba(255, 31, 46, 0.15);
  border: 1px solid rgba(255, 31, 46, 0.35);
  white-space: nowrap;
}
.hero-meta{
  display:flex; gap:32px; font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,0.45);
}
.hero-meta strong{color: rgba(255,255,255,0.85); font-weight:600;}

/* ---------- SIGNATURE: terminal ---------- */
.terminal{
  background: #08081f;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 40px 90px -30px rgba(0,0,0,0.7), 0 0 0 1px rgba(255,255,255,0.02);
  overflow:hidden;
}
.terminal-img {
    display: block;
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(5, 5, 46, 0.6);
    grid-column: 2;
  }
.terminal-bar{
  display:flex; align-items:center; gap:8px;
  padding: 13px 16px;
  background: #0d0d29;
  border-bottom: 1px solid rgba(255,255,255,0.07);
}
.terminal-bar .tdot{width:10px; height:10px; border-radius:50%;}
.tdot.r{background:#ff5f57;} .tdot.y{background:#febc2e;} .tdot.g{background:#28c840;}
.terminal-title{
  margin-left:8px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(255,255,255,0.4);
}
.terminal-body{
  padding: 22px 22px 26px;
  font-family: var(--mono);
  font-size: 13px;
  line-height: 1.85;
  min-height: 300px;
}
.terminal-body .ln{color: rgba(255,255,255,0.28); display:inline-block; width:22px; user-select:none;}
.terminal-body .kw{color:#ff8a92;}
.terminal-body .fn{color:#7ec8ff;}
.terminal-body .str{color:#a8e6a0;}
.terminal-body .com{color: rgba(255,255,255,0.32);}
.terminal-body .var{color:#ffd48a;}
.type-line{white-space:pre; opacity:0; animation: reveal 0s forwards;}
.cursor{
  display:inline-block; width:7px; height:14px; background: var(--red);
  vertical-align: -2px; margin-left:2px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink{0%,49%{opacity:1;}50%,100%{opacity:0;}}
@keyframes reveal{to{opacity:1;}}
.terminal-body .type-line:nth-child(1){animation-delay:.1s;}
.terminal-body .type-line:nth-child(2){animation-delay:.3s;}
.terminal-body .type-line:nth-child(3){animation-delay:.5s;}
.terminal-body .type-line:nth-child(4){animation-delay:.7s;}
.terminal-body .type-line:nth-child(5){animation-delay:.9s;}
.terminal-body .type-line:nth-child(6){animation-delay:1.1s;}
.terminal-body .type-line:nth-child(7){animation-delay:1.3s;}
.terminal-body .type-line:nth-child(8){animation-delay:1.5s;}
.terminal-body .type-line:nth-child(9){animation-delay:1.7s;}
.terminal-body .type-line:nth-child(10){animation-delay:1.9s;}
.terminal-body .type-line:nth-child(11){animation-delay:2.1s;}
.terminal-footer{
  display:flex; justify-content:space-between; align-items:center;
  padding: 12px 22px;
  border-top: 1px solid rgba(255,255,255,0.07);
  background: #0d0d29;
}
.status-chip{
  display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:11.5px; color:#8fe39a;
}
.status-chip .sdot{width:6px;height:6px;border-radius:50%;background:#3ee06a;}
.terminal-footer .tests{font-family:var(--mono); font-size:11.5px; color: rgba(255,255,255,0.35);}

/* ---------- SECTION SHARED ---------- */
section{padding: 104px 0;}
.section-head{max-width:620px; margin-bottom:64px;}
.kicker{
  font-family: var(--mono);
  font-size:12px; letter-spacing:.08em;
  color: var(--red);
  text-transform: uppercase;
  margin-bottom:14px;
  display:block;
}
h2{
  font-family: var(--disp);
  font-size: clamp(26px, 3vw, 36px);
  font-weight:700;
  letter-spacing:-0.01em;
  line-height:1.2;
  margin-bottom:16px;
  color: var(--navy);
}
.section-head p{
  font-size:16px; color: var(--muted); line-height:1.65;
}

/* ---------- FEATURES ---------- */
.features{background:#fff;}
.feature-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius:14px;
  overflow:hidden;
}
.feature-card{
  background:#fff;
  padding: 34px 30px;
  transition: background .2s ease;
}
.feature-card:hover{background: var(--paper);}
.feature-icon{
  width:38px; height:38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:9px;
  background: var(--navy);
  margin-bottom:22px;
}
.feature-icon svg{width:18px; height:18px; stroke: var(--red);}
.feature-card h3{
  font-family: var(--disp);
  font-size:18px; font-weight:600;
  margin-bottom:10px;
  color: var(--ink);
}
.feature-card p{font-size:14.5px; color:var(--muted); line-height:1.6;}

/* ---------- PROCESS ---------- */
.process{background: var(--paper);}
.process-list{display:flex; flex-direction:column;}
.process-row{
  display:grid;
  grid-template-columns: 90px 1fr 1fr;
  gap:32px;
  padding: 32px 0;
  border-top: 1px solid var(--line-dark);
  align-items:start;
}
.process-row:last-child{border-bottom:1px solid var(--line-dark);}
.process-num{
  font-family: var(--mono);
  font-size:13px;
  color: var(--red);
  padding-top:3px;
}
.process-row h3{
  font-family: var(--disp);
  font-size:19px; font-weight:600;
  color: var(--navy);
}
.process-row p{font-size:14.5px; color: var(--muted); line-height:1.65;}

/* ---------- CODE DIFF ---------- */
.diff-section{background: var(--navy-deep); color:#fff;}
.diff-section .section-head p{color: rgba(255,255,255,0.55);}
.diff-section h2{color:#fff;}
.diff-grid{display:grid; grid-template-columns:1fr 1fr; gap:20px;}
.diff-panel{
  background:#08081f;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  overflow:hidden;
}
.diff-head{
  padding:12px 18px;
  font-family:var(--mono); font-size:12px;
  border-bottom:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; gap:8px;
}
.diff-head.before{color:#ff9d9d;}
.diff-head.after{color:#8fe3a0;}
.diff-body{
  padding:18px; font-family:var(--mono); font-size:12.5px; line-height:1.9; color: rgba(255,255,255,0.75);
}
.diff-body .g{color: rgba(255,255,255,0.3);}
.diff-body .rm{color:#ff8b8b;}
.diff-body .add{color:#9be8a4;}

/* ---------- PRICING ---------- */
.pricing{background:#fff;}
.pricing-grid{
  display:grid; grid-template-columns: repeat(3,1fr); gap:22px;
}
.price-card{
  border:1px solid var(--line-dark);
  border-radius:14px;
  padding:32px 28px;
  display:flex; flex-direction:column;
}
.price-card.featured{
  background: var(--navy);
  color:#fff;
  border-color: var(--navy);
  position:relative;
  transform: translateY(-10px);
  box-shadow: 0 30px 60px -20px rgba(0,0,128,0.35);
}
.price-card.featured .tier-badge{
  position:absolute; top:-12px; right:28px;
  background: var(--red); color:#fff;
  font-family:var(--mono); font-size:11px; font-weight:600;
  padding:5px 12px; border-radius:100px;
  letter-spacing:.03em;
}
.tier-name{font-family:var(--disp); font-size:15px; font-weight:600; color: var(--red); margin-bottom:14px;}
.price-card.featured .tier-name{color:#ff8b93;}
.tier-price{font-family:var(--disp); font-size:38px; font-weight:700; margin-bottom:4px;}
.tier-unit{font-size:13px; color: var(--muted); margin-bottom:24px;}
.price-card.featured .tier-unit{color: rgba(255,255,255,0.55);}
.tier-list{list-style:none; margin-bottom:28px; flex:1;}
.tier-list li{
  font-size:13.5px; padding:9px 0; border-top:1px solid var(--line-dark);
  display:flex; gap:10px; color: var(--ink);
}
.price-card.featured .tier-list li{border-color: rgba(255,255,255,0.14); color: rgba(255,255,255,0.85);}
.tier-list li:first-child{border-top:none;}
.tier-list li::before{content:"→"; color:var(--red); font-family:var(--mono); flex-shrink:0;}
.tier-btn{
  text-align:center;
  padding:12px; border-radius:8px;
  font-family:var(--disp); font-weight:600; font-size:14px;
  border:1px solid var(--navy); color:var(--navy);
  transition: background .15s ease, color .15s ease;
}
.tier-btn:hover{background:var(--navy); color:#fff;}
.price-card.featured .tier-btn{
  background: var(--red); border-color:var(--red); color:#fff;
}
.price-card.featured .tier-btn:hover{background:#e60013;}

/* ---------- CTA ---------- */
.cta{
  background: linear-gradient(135deg, var(--navy) 0%, #1a1a6e 100%);
  color:#fff;
  text-align:center;
  padding: 100px 0;
}
.cta h2{color:#fff; margin-bottom:14px;}
.cta p{color: rgba(255,255,255,0.65); max-width:480px; margin:0 auto 34px; font-size:16px;}
.cta-form{
  display:flex; flex-direction:column; gap:10px; max-width:440px; margin:0 auto;
}
.cta-form-row{display:flex; gap:10px; flex-wrap:wrap;}
.cta-form input,
.cta-form textarea{
  flex:1; min-width:200px;
  padding:14px 16px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
  color:#fff;
  font-family: var(--body);
  font-size:14px;
}
.cta-form textarea{width:100%; resize:vertical; min-height:96px;}
.cta-form input::placeholder,
.cta-form textarea::placeholder{color: rgba(255,255,255,0.4);}
.cta-form input:focus-visible,
.cta-form textarea:focus-visible{outline:2px solid var(--red); outline-offset:2px;}
.cta-form button{margin-top:4px;}
/* Honeypot-Feld: für Menschen unsichtbar, aber nicht per display:none (das
   überspringen manche Spam-Bots gezielt), sondern per Position außerhalb
   des sichtbaren Bereichs. */
.cta-form-hp{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.cta-success{
  font-family: var(--mono); font-size:14px; color:#9be8a4;
  background: rgba(155,232,164,0.1); border:1px solid rgba(155,232,164,0.35);
  border-radius:8px; padding:14px 18px; max-width:440px; margin:0 auto;
}

/* ---------- FOOTER ---------- */
footer{
  background: var(--navy-deep);
  color: rgba(255,255,255,0.5);
  padding: 48px 0 36px;
}
.footer-row{
  display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
  padding-bottom:28px; margin-bottom:24px;
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.footer-logo {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  color: #fff;
  text-decoration: none;
}
.footer-logo svg {
  height: 32px;
  width: auto;
  display: block;
  margin-right: -2px;
}
.footer-logo-text {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--disp);
  color: beige;
  line-height: 1;
  margin-left: -60px;
  letter-spacing: 0.02em;
}
.footer-links{display:flex; gap:26px; flex-wrap:wrap;}
.footer-links a{font-size:13px; color: rgba(255,255,255,0.55); transition:color .2s ease;}
.footer-links a:hover{color:#fff;}
.footer-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px;
  font-size:12.5px; font-family: var(--mono); color: rgba(255,255,255,0.3);
}

/* ---------- RECHTLICHE SEITEN (Datenschutz / Impressum) ---------- */
.legal-page{
  background: var(--paper);
  min-height: 60vh;
  padding: 168px 0 110px;
}
.legal-page-inner{max-width: 760px;}
.legal-back{
  display:inline-flex; align-items:center; gap:6px;
  font-family: var(--mono); font-size:13px;
  color: var(--muted);
  margin-bottom: 34px;
  transition: color .2s ease;
}
.legal-back:hover{color: var(--red);}
.legal-page-head{margin-bottom:38px;}
.legal-page-head h1{
  font-family: var(--disp);
  font-size: clamp(28px, 3.6vw, 40px);
  font-weight:700;
  letter-spacing:-0.01em;
  color: var(--navy);
}
.legal-content{
  color: var(--ink);
  font-size:15.5px;
  line-height:1.75;
}
.legal-content h2{
  font-family: var(--disp);
  font-size:21px; font-weight:600;
  color: var(--navy);
  margin: 40px 0 14px;
}
.legal-content h2:first-child{margin-top:0;}
.legal-content h3{
  font-family: var(--disp);
  font-size:16.5px; font-weight:600;
  color: var(--ink);
  margin: 26px 0 10px;
}
.legal-content p{margin-bottom:16px;}
.legal-content ul,
.legal-content ol{margin: 0 0 16px 22px;}
.legal-content li{margin-bottom:6px;}
.legal-content a{color: var(--red); text-decoration: underline; text-underline-offset: 2px;}
.legal-content strong{color: var(--navy);}
.legal-content table{
  width:100%; border-collapse:collapse; margin-bottom:20px; font-size:14px;
}
.legal-content table th,
.legal-content table td{
  border:1px solid var(--line-dark); padding:10px 12px; text-align:left; vertical-align:top;
}
.legal-content table th{background:#fff; font-family:var(--disp); font-weight:600;}
.legal-content blockquote{
  border-left:3px solid var(--red);
  padding-left:16px; margin: 0 0 16px; color: var(--muted); font-style:italic;
}
.legal-edit-link{margin-top:40px;}
.legal-edit-link a{
  font-family: var(--mono); font-size:12.5px; color: var(--muted);
  border:1px solid var(--line-dark); border-radius:100px; padding:6px 14px;
}
.legal-edit-link a:hover{color: var(--red); border-color: var(--red);}

/* ---------- WORDPRESS-SPEZIFISCH ---------- */
/* Admin-Bar-Offset, damit die fixe Navigation bei eingeloggten Redakteuren nicht
   unter der WP-Admin-Leiste verschwindet. */
body.admin-bar nav{ top: 32px; }
@media screen and (max-width: 782px){
  body.admin-bar nav{ top: 46px; }
}
/* Sichtbarer Fokus-Rahmen für das native WP-Suchformular/Skip-Link, falls genutzt */
.skip-link{
  position:absolute; left:-9999px; top:auto;
  background:#fff; color:#000; padding:12px 18px; z-index:999;
}
.skip-link:focus{ left:12px; top:12px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 880px){
  .hero-grid{grid-template-columns:1fr;}
  .terminal{order:-1;}
  .feature-grid{grid-template-columns:1fr;}
  .process-row{grid-template-columns: 50px 1fr; }
  .process-row > p{grid-column: 2 / 3;}
  .diff-grid{grid-template-columns:1fr;}
  .pricing-grid{grid-template-columns:1fr;}
  .price-card.featured{transform:none;}
  .nav-links{display:none;}
  .wrap{padding:0 20px;}
}