/* STYLES: modell.html — Datenmodell-Konfigurator */

html{ scroll-behavior:smooth; }
body{ background:var(--bg); color:var(--text); font-family:'Inter', sans-serif; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3{ font-family:'Space Grotesk', sans-serif; font-weight:600; letter-spacing:-0.01em; }

/* NAV */
nav{
  position:sticky; top:0; z-index:100; display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px, 5vw, 64px); background:rgba(10,20,32,0.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border);
}
.nav-mark{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--text); }
.nav-mark img{ height:32px; width:32px; display:block; }
.nav-mark span{ font-family:'Space Grotesk',sans-serif; font-weight:500; font-size:17px; letter-spacing:-0.015em; }
.nav-mark em{ font-style:normal; font-weight:600; color:var(--accent); }
.nav-link{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text-muted); text-decoration:none; }
.nav-link:hover, .nav-link.active{ color:var(--accent); }
.nav-cta{
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--text);
  border:1px solid var(--border); padding:9px 18px; border-radius:2px; text-decoration:none;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.nav-cta:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* HERO */
.hero{
  padding:88px 24px 52px;
  background:
    linear-gradient(var(--line) 1px, transparent 1px) 0 0/90px 90px,
    linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0/90px 90px,
    radial-gradient(ellipse at 50% 0%, rgba(94,234,212,0.08), transparent 60%),
    var(--bg);
  border-bottom:1px solid var(--border);
}
.hero-inner{ max-width:820px; margin:0 auto; }
.eyebrow{ font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--accent-2); letter-spacing:0.18em; text-transform:uppercase; display:block; }
.hero h1{ margin-top:16px; font-size:clamp(30px,4.8vw,48px); line-height:1.12; }
.hero p{ margin-top:18px; font-size:16px; line-height:1.7; color:var(--text-muted); }

main{ max-width:1180px; margin:0 auto; padding:48px 24px 80px; }
main a{ color:var(--accent); }
main h2{ margin-top:14px; font-size:clamp(22px,3.2vw,30px); line-height:1.3; }
.lead{ margin-top:16px; font-size:15px; line-height:1.75; color:var(--text-muted); max-width:760px; }

/* Entwurf-Hinweis */
.entwurf-hinweis{
  display:flex; align-items:center; justify-content:space-between; gap:22px; flex-wrap:wrap;
  border:1px solid rgba(255,180,84,0.4); background:rgba(255,180,84,0.06);
  padding:18px 22px; margin-bottom:32px;
}
.entwurf-hinweis strong{ font-family:'Space Grotesk',sans-serif; font-size:15px; color:var(--text); }
.entwurf-hinweis p{ margin-top:5px; font-size:13px; color:var(--text-muted); }
.eh-knoepfe{ display:flex; gap:10px; }

/* Vorlagen */
.vorlagen{ margin-top:30px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:1px; background:var(--border); border:1px solid var(--border); }
.vorlage{
  background:var(--card-bg); border:none; cursor:pointer; text-align:left;
  padding:26px 24px; display:flex; flex-direction:column; gap:8px; font-family:inherit;
  transition:background 0.2s ease;
}
.vorlage:hover{ background:var(--bg-2); }
.vorlage strong{ font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:var(--text); }
.vorlage span{ font-size:13px; line-height:1.6; color:var(--text-muted); }
.vorlage .v-anzahl{
  margin-top:6px; font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--accent);
}
.vorlage.leer strong{ color:var(--text-muted); }
.vorlage:hover strong{ color:var(--accent); }

/* Bauen */
.bauen-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.bauen-grid{ margin-top:32px; display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:start; }
@media (max-width:940px){ .bauen-grid{ grid-template-columns:1fr; } }

.block-kopf h3{ font-size:18px; }
.block-kopf p{ margin-top:8px; font-size:13px; line-height:1.6; color:var(--text-muted); }
.vkn-kopf{ margin-top:40px; padding-top:32px; border-top:1px solid var(--border); }

/* Bereichskarten */
.bereich{ margin-top:18px; border:1px solid var(--border); background:var(--card-bg); padding:18px 20px; }
.bereich-kopf{ display:flex; align-items:center; gap:12px; }
.bereich-name{
  flex:1; min-width:0; background:transparent; border:none; border-bottom:1px solid var(--border);
  font-family:'Space Grotesk',sans-serif; font-size:17px; font-weight:600; color:var(--accent);
  padding:5px 2px; outline:none; transition:border-color 0.2s ease;
}
.bereich-name:focus{ border-bottom-color:var(--accent); }
.bereich-weg{
  flex:0 0 auto; background:transparent; border:none; cursor:pointer;
  font-family:'JetBrains Mono',monospace; font-size:11px; color:var(--text-muted);
  transition:color 0.2s ease;
}
.bereich-weg:hover{ color:#FF7B72; }

.felder{ margin-top:14px; display:flex; flex-direction:column; gap:7px; }
.feld{ display:flex; align-items:center; gap:8px; }
.feld input{
  flex:1; min-width:0; background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:8px 10px; font-family:'Inter',sans-serif; font-size:13px; color:var(--text); outline:none;
  transition:border-color 0.2s ease;
}
.feld input:focus{ border-color:var(--accent); }
.feld select{
  flex:0 0 auto; width:96px; background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:8px 6px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); outline:none;
}
.feld select:focus{ border-color:var(--accent); }
.feld-weg{
  flex:0 0 auto; width:26px; height:26px; background:transparent; border:1px solid var(--border);
  border-radius:2px; cursor:pointer; color:var(--text-muted); font-size:15px; line-height:1;
  transition:border-color 0.2s ease, color 0.2s ease;
}
.feld-weg:hover{ border-color:#FF7B72; color:#FF7B72; }

.vorschlaege{ margin-top:14px; display:flex; flex-wrap:wrap; gap:7px; }
.chip{
  background:transparent; border:1px solid var(--border); border-radius:2px; cursor:pointer;
  padding:5px 10px; font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted);
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.chip:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }
.chip-frei{ color:var(--accent); border-style:dashed; }

.bereich-neu{
  margin-top:18px; width:100%; background:transparent; border:1px dashed var(--line-bright);
  border-radius:2px; cursor:pointer; padding:14px; color:var(--text-muted);
  font-family:'JetBrains Mono',monospace; font-size:13px;
  transition:border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.bereich-neu:hover{ border-color:var(--accent); color:var(--accent); background:var(--accent-soft); }

/* Verknüpfungen */
.vkn-bau{
  margin-top:18px; display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  border:1px solid var(--border); background:var(--card-bg); padding:16px 18px;
  font-size:13px; color:var(--text-muted);
}
.vkn-bau select{
  background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:8px 10px; font-family:'Inter',sans-serif; font-size:13px; color:var(--text);
  outline:none; max-width:190px;
}
.vkn-bau select:focus{ border-color:var(--accent); }
.vkn{
  margin-top:9px; display:flex; align-items:center; justify-content:space-between; gap:12px;
  border-left:2px solid var(--accent); background:var(--bg-2); padding:11px 14px;
  font-size:13px; color:var(--text-muted);
}
.vkn strong{ color:var(--text); font-weight:600; }
.vkn-leer{ margin-top:14px; font-size:13px; line-height:1.6; color:var(--text-muted); opacity:0.8; }

/* Diagramm */
.bauen-rechts{ position:sticky; top:92px; }
@media (max-width:940px){ .bauen-rechts{ position:static; } }
.diagramm-box{ border:1px solid rgba(94,234,212,0.35); background:var(--card-bg); }
.diagramm-kopf{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:16px 18px; border-bottom:1px solid var(--border);
}
.diagramm-zahlen{ font-family:'JetBrains Mono',monospace; font-size:11.5px; color:var(--text-muted); }
.diagramm{ padding:14px; overflow:auto; max-height:60vh; }
.diagramm svg{ width:100%; height:auto; display:block; }
.diagramm-dl{ display:block; width:calc(100% - 36px); margin:0 18px 18px; }

/* Senden */
.senden-block{
  margin-top:56px; padding-top:48px; border-top:1px solid var(--border);
  display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:start;
}
@media (max-width:860px){ .senden-block{ grid-template-columns:1fr; } }
.senden-text h3{ margin-top:12px; font-size:22px; }
.senden-text p{ margin-top:14px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.senden-hinweis{ font-size:13px !important; opacity:0.85; }
.senden-form{ border:1px solid var(--border); background:var(--card-bg); padding:26px 26px 24px; }
.sf-zeile{ display:flex; flex-direction:column; margin-bottom:14px; }
.sf-zeile label{
  font-family:'JetBrains Mono',monospace; font-size:10.5px; letter-spacing:0.12em;
  text-transform:uppercase; color:var(--text-muted);
}
.req{ color:var(--accent); margin-left:3px; }
.sf-zeile input, .sf-zeile textarea{
  margin-top:8px; background:var(--bg); border:1px solid var(--border); border-radius:2px;
  padding:11px 13px; font-family:'Inter',sans-serif; font-size:14px; color:var(--text);
  outline:none; resize:vertical; transition:border-color 0.2s ease;
}
.sf-zeile input:focus, .sf-zeile textarea:focus{ border-color:var(--accent); }
.field-msg{
  margin:0 0 12px; font-family:'JetBrains Mono',monospace; font-size:11.5px;
  line-height:1.5; color:#FF7B72;
}
/* Meldung innerhalb einer Zeile sitzt direkt unter dem Feld */
.sf-zeile .field-msg{ margin:8px 0 0; }
/* Pflichtfeld nicht ausgefuellt */
.sf-zeile.invalid input, .sf-zeile.invalid textarea{ border-color:#FF7B72; }
.sf-zeile.invalid label{ color:#FF7B72; }
.sf-note{ margin-top:14px; font-size:12px; line-height:1.6; color:var(--text-muted); }
.hp-field{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; }

/* Erfolg */
.erfolg-box{ border:1px solid rgba(94,234,212,0.4); background:var(--card-bg); padding:40px 42px; max-width:760px; }
.erfolg-box h2{ margin-top:14px; }
.erfolg-box p{ margin-top:14px; font-size:15px; line-height:1.75; color:var(--text-muted); }
.erfolg-knoepfe{ margin-top:30px; display:flex; gap:14px; flex-wrap:wrap; }

/* Knöpfe */
.cta-link{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:14px;
  color:var(--bg); background:var(--accent); border:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; line-height:1.3;
  padding:14px 28px; border-radius:2px; text-decoration:none; text-align:center;
  transition:transform 0.25s ease, box-shadow 0.25s ease, opacity 0.2s ease;
}
.cta-link:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(94,234,212,0.25); }
.cta-link:disabled{ opacity:0.6; cursor:default; transform:none; box-shadow:none; }
.ghost-link{
  display:inline-block; font-family:'JetBrains Mono',monospace; font-size:13px;
  color:var(--text); border:1px solid var(--border); background:transparent; cursor:pointer;
  appearance:none; -webkit-appearance:none; line-height:1.3;
  padding:14px 28px; border-radius:2px; text-decoration:none; text-align:center;
  transition:border-color 0.25s ease, background 0.25s ease;
}
.ghost-link:hover{ border-color:var(--accent); background:var(--accent-soft); }

/* FOOTER */
footer{
  background:var(--bg); padding:36px 24px; text-align:center;
  font-family:'JetBrains Mono', monospace; font-size:12px; color:var(--text-muted);
  border-top:1px solid var(--border);
}
footer a{ color:var(--text-muted); } footer a:hover{ color:var(--accent); }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  .cta-link, .ghost-link, .chip, .vorlage{ transition:none; }
}

/* Übernahme aus der Tabellen-Diagnose */
.uebernahme{
  display:grid; grid-template-columns:1.5fr 1fr; gap:32px; align-items:start;
  border:1px solid rgba(94,234,212,0.45); background:var(--accent-soft);
  padding:32px 34px; margin-bottom:36px;
}
.ue-text h2{ margin-top:12px; font-size:clamp(20px,2.8vw,26px); line-height:1.3; }
.ue-text p{ margin-top:12px; font-size:14px; line-height:1.7; color:var(--text-muted); }
.ue-liste{ margin-top:16px; list-style:none; padding:0; display:flex; flex-direction:column; gap:9px; }
.ue-liste li{ position:relative; padding-left:18px; font-size:13px; line-height:1.6; color:var(--text-muted); }
.ue-liste li::before{ content:''; position:absolute; left:0; top:7px; width:7px; height:7px; background:var(--accent); }
.ue-aktion{ display:flex; flex-direction:column; gap:12px; }
.ue-zahlen{
  font-family:'JetBrains Mono',monospace; font-size:11.5px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--accent);
}
@media (max-width:760px){ .uebernahme{ grid-template-columns:1fr; padding:26px 24px; } }