:root {
  --tilda-purple: #7337c8;
  --tilda-purple-dark: #4e238f;
  --tilda-purple-soft: #efe6fb;
  --tilda-green: #74c947;
  --tilda-green-dark: #438525;
  --tilda-green-soft: #edf8e7;
  --page-ink: #251c31;
  --page-muted: #6f6678;
  --page-surface: #ffffff;
  --page-line: #ded6e5;
  --page-shadow: 0 18px 55px rgba(73, 40, 105, .13);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--page-ink);
  background:
    radial-gradient(circle at 8% 6%, rgba(116,201,71,.18), transparent 27rem),
    radial-gradient(circle at 90% 2%, rgba(115,55,200,.15), transparent 32rem),
    #f8f6fb;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: var(--tilda-purple-dark); }
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(115,55,200,.12);
}
.site-nav {
  max-width: 1500px; margin: 0 auto; padding: .7rem 1.25rem;
  display: flex; align-items: center; gap: 1rem;
}
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--page-ink); font-weight:800; letter-spacing:-.02em; }
.brand img { width: 50px; height: 50px; object-fit: contain; }
.brand span { font-size: 1.18rem; }
.main-menu { display:flex; gap:.45rem; margin-left:auto; flex-wrap:wrap; }
.main-menu a {
  text-decoration:none; font-weight:750; padding:.65rem 1rem; border-radius:999px; color:var(--tilda-purple-dark);
}
.main-menu a:hover, .main-menu a[aria-current="page"] { background:var(--tilda-purple-soft); color:var(--tilda-purple-dark); }
.main-menu a[aria-current="page"] { box-shadow: inset 0 0 0 1px rgba(115,55,200,.18); }
.hero {
  max-width: 1500px; margin: 0 auto; padding: 2.5rem 1.25rem 1.25rem;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,360px); align-items:center; gap:2rem;
}
.hero-copy { padding: 1.2rem 0; }
.eyebrow { margin:0 0 .65rem; color:var(--tilda-green-dark); font-weight:850; text-transform:uppercase; letter-spacing:.08em; font-size:.83rem; }
.hero h1 { margin:.05rem 0 .8rem; font-size:clamp(2.35rem,5vw,5rem); line-height:.95; letter-spacing:-.055em; color:var(--tilda-purple-dark); }
.hero h1 em { color:var(--tilda-green-dark); font-style:normal; }
.hero p { max-width: 58rem; font-size:clamp(1.05rem,2vw,1.28rem); line-height:1.55; color:var(--page-muted); margin:0; }
.hero-art { min-height:250px; display:flex; align-items:center; justify-content:center; position:relative; }
.hero-art::before { content:""; position:absolute; width:78%; aspect-ratio:1; border-radius:50%; background:linear-gradient(135deg,var(--tilda-green-soft),var(--tilda-purple-soft)); filter:blur(.2px); }
.hero-art img { position:relative; width:min(310px,85%); max-height:320px; object-fit:contain; filter:drop-shadow(0 15px 20px rgba(61,42,83,.16)); }
.app-shell { width:100%; max-width:none; margin:0; padding:0 clamp(.5rem,1.2vw,1.25rem) 3.5rem; }
.app-card { background:var(--page-surface); border:1px solid rgba(115,55,200,.13); border-radius:26px; box-shadow:var(--page-shadow); padding:1rem; overflow:hidden; }
.app-card .tilda-turtle { margin:0; max-width:none; }
.site-footer { margin-top:2rem; border-top:1px solid rgba(115,55,200,.15); background:#fff; }
.footer-inner { max-width:1500px; margin:0 auto; padding:1.4rem 1.25rem; display:flex; gap:1rem; justify-content:space-between; align-items:center; flex-wrap:wrap; color:var(--page-muted); }
.footer-links { display:flex; gap:1rem; flex-wrap:wrap; }
.footer-links a { font-weight:700; text-decoration:none; }
.legal { max-width:900px; margin:0 auto; padding:3rem 1.25rem 5rem; }
.legal-card { background:#fff; border-radius:24px; padding:clamp(1.3rem,4vw,3rem); box-shadow:var(--page-shadow); border:1px solid rgba(115,55,200,.12); }
.legal h1 { color:var(--tilda-purple-dark); }
.legal .placeholder { border-left:5px solid var(--tilda-green); background:var(--tilda-green-soft); padding:1rem 1.1rem; border-radius:10px; }
.standalone-loading, .standalone-error { padding:3rem; text-align:center; border-radius:20px; background:#fff; }
.standalone-error { border:2px solid #b33; }
/* Standalone: Die Programmierumgebung nutzt die verfügbare Browserfläche wirklich aus.
   Keine feste WordPress-Maximalbreite und keine starren Desktop-Höhen. */
.app-card .tilda-turtle {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
}
.app-card .tilda-turtle__workspace {
  width: 100%;
  height: clamp(560px, 72dvh, 900px);
  min-height: 0;
  max-height: none;
}
.app-card .tilda-turtle__pane--editor,
.app-card .tilda-turtle__pane--canvas {
  min-width: 0;
  min-height: 0;
}
.app-card .tilda-turtle__canvas-wrap {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  flex: 1 1 auto;
}
.app-card .tilda-turtle__canvas {
  width: 100%;
  height: 100%;
}

@media (min-width: 1500px) {
  .app-card .tilda-turtle__workspace {
    height: clamp(620px, 76dvh, 980px);
  }
}

@media (max-height: 760px) and (min-width: 901px) {
  .app-card .tilda-turtle__workspace {
    height: max(500px, 66dvh);
  }
}
@media (max-width: 800px) {
  .site-nav { align-items:flex-start; }
  .brand span { display:none; }
  .hero { grid-template-columns:1fr; padding-top:1.5rem; }
  .hero-art { min-height:180px; order:-1; }
  .hero-art img { max-height:190px; }
  .app-shell { padding-left:.65rem; padding-right:.65rem; }
  .app-card { border-radius:18px; padding:.4rem; }
  .app-card .tilda-turtle__workspace {
    height: auto;
    min-height: 0;
  }
  .app-card .tilda-turtle__canvas-wrap {
    height: clamp(420px, 68dvh, 680px);
    min-height: 420px;
  }
}

/* Statischer, suchmaschinenlesbarer Einführungsbereich. */
.seo-intro { max-width: 1100px; margin: 0 auto 2rem; padding: 0 1.25rem; }
.seo-intro h2 { margin: 0 0 .7rem; color: var(--tilda-purple-dark); font-size: clamp(1.45rem, 2.5vw, 2.1rem); }
.seo-intro p { margin: .55rem 0; color: var(--page-muted); line-height: 1.7; font-size: 1.03rem; }

.legal-card h2 { margin-top: 2rem; color: var(--tilda-purple-dark); }
.legal-card p, .legal-card li { line-height: 1.7; }
.legal-card address { font-style: normal; line-height: 1.75; }
.legal-card .contact-box { margin: 1.5rem 0; padding: 1rem 1.15rem; border-left: 5px solid var(--tilda-green); background: var(--tilda-green-soft); border-radius: 10px; }
.footer-contact { font-weight: 700; }