/* RAUMRISS · FX so, wie das echte System aussieht (SITE EFFECT · Operating System).
   Hell, eckig, Linie statt Schatten, Lime als Akzent. Nachgebaut aus dem Quellcode, nur Beispieldaten.
   Genutzt auf der Startseite (iPad, iPhone, Mac-Fenster) und auf der Apps-Seite. */
.se-app{display:grid;grid-template-columns:24% 1fr;height:93%;font-family:Archivo,system-ui,sans-serif;color:#0a0a0a;font-size:clamp(5.5px,.78vw,10px);letter-spacing:0;background:#f5f5f5}
.se-seite{background:#f5f5f5;border-right:1px solid rgba(10,10,10,.12);padding:6% 5%;display:flex;flex-direction:column;gap:.2em;overflow:hidden}
.se-marke{font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:2.4em;line-height:1;text-transform:uppercase;margin-bottom:.8em}
.se-marke em{display:block;font-family:Archivo,sans-serif;font-stretch:100%;font-style:normal;font-weight:400;font-size:.42em;color:#6b6b6b;text-transform:none;margin-top:.2em}
.se-seite small{font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:66%;font-weight:700;font-size:1em;letter-spacing:.08em;color:#6b6b6b;margin:.9em 0 .2em}
.se-seite span{display:flex;gap:.6em;align-items:center;padding:.35em .5em;color:#3d3d3d;font-weight:500;white-space:nowrap}
.se-seite span i{font-style:normal;width:1.4em;text-align:center}
.se-seite span.an{background:#0a0a0a;color:#e9f5a0}
.se-haupt{padding:3% 3.5%;display:flex;flex-direction:column;gap:.8em;min-width:0;background:#f5f5f5}
.se-oben{display:flex;gap:.6em;justify-content:flex-end}
.se-chip{border:1px solid rgba(10,10,10,.12);background:#fff;padding:.25em .7em}
.se-rolle{background:#e9f5a0;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:66%;font-weight:800;padding:.25em .7em}
.se-kopf{display:grid;grid-template-columns:1fr 1.15fr;gap:1.2em;align-items:start}
.se-kopf small{color:#6b6b6b;font-size:.95em}
.se-kopf h6{margin:.2em 0 0;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:3.6em;line-height:.95;text-transform:uppercase;letter-spacing:0}
.se-kopf p{margin:.4em 0 0;color:#6b6b6b}
.se-kpi{display:grid;grid-template-columns:repeat(3,1fr);gap:.4em}
.se-kpi div{background:#fff;border:1px solid rgba(10,10,10,.12);padding:.5em .6em}
.se-kpi b{display:block;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:2.6em;line-height:1}
.se-kpi span{display:block;font-size:.85em;text-transform:uppercase;color:#3d3d3d;line-height:1.2}
.se-kpi .rot{background:#ff8a7a}.se-kpi .lime{background:#e9f5a0}
.fx-szene{width:100%;height:auto;flex:1;min-height:0}
.se-legende{display:flex;flex-wrap:wrap;gap:.4em 1.2em;color:#6b6b6b;font-size:.9em}
.se-legende i{display:inline-block;width:.9em;height:.9em;border:1px solid #0a0a0a;margin-right:.4em;vertical-align:-.1em}
.se-handy{position:absolute;inset:0;padding:20% 7% 6%;font-family:Archivo,system-ui,sans-serif;color:#0a0a0a;font-size:clamp(6px,.85vw,11px);display:flex;flex-direction:column;gap:.55em}
.se-handy small{color:#6b6b6b}
.se-handy h6{margin:0;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:3em;line-height:.95;text-transform:uppercase}
.se-handy p{margin:0;color:#6b6b6b}
.se-umschalter{display:flex;border:1px solid rgba(10,10,10,.22);background:#fff}
.se-umschalter span{flex:1;text-align:center;padding:.4em 0}
.se-umschalter .an{background:#0a0a0a;color:#e9f5a0}
.se-abschnitt{margin-top:.5em;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:66%;font-weight:800;text-transform:uppercase;letter-spacing:.04em;border-left:3px solid #0a0a0a;padding-left:.5em}
.se-zeile{display:flex;justify-content:space-between;align-items:center;gap:.6em;background:#fff;border:1px solid rgba(10,10,10,.12);padding:.6em .7em;line-height:1.25}
.se-zeile em{font-style:normal;color:#6b6b6b}
.se-zeile i{font-style:normal;font-size:.9em;border:1px solid rgba(10,10,10,.22);padding:.1em .5em;white-space:nowrap}
.se-zeile i.heiss,.se-zeile i.rot{background:#ff8a7a;border-color:#0a0a0a}
.se-zeile i.lime{background:#e9f5a0;border-color:#0a0a0a}
/* In einem Mac-Fenster: feste Schriftgröße statt Bildschirmbreite */
.se-app.fest{height:auto;font-size:9.5px;grid-template-columns:150px 1fr}
.se-app.fest .se-seite{padding:12px 10px}
.se-app.fest .se-haupt{padding:12px 14px 14px}
.se-app.fest .se-kopf{grid-template-columns:1fr;gap:.8em}
.se-app.fest .se-kopf h6{font-size:3.2em}
.se-app.fest .se-kpi{grid-template-columns:repeat(6,1fr)}
.se-app.fest .fx-szene{max-height:240px}

/* Akquise und Leads, wie /site-effect/akquise */
.se-tool small.se-kicker{font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:66%;font-weight:700;letter-spacing:.06em;color:#6b6b6b;text-transform:uppercase;font-size:1.05em}
.se-tool h6{margin:.15em 0 0;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:3.4em;line-height:1;text-transform:uppercase}
.se-tool p{margin:.3em 0 0;color:#6b6b6b}
.ak-leiste{display:flex;gap:.5em;align-items:center}
.ak-leiste span{border:1px solid rgba(10,10,10,.12);background:#fff;padding:.45em .7em;white-space:nowrap;color:#3d3d3d}
.ak-leiste .suche{flex:1;color:#949494;overflow:hidden;text-overflow:ellipsis}
.ak-leiste .los{background:#0a0a0a;border-color:#0a0a0a;color:#f5f5f5;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:66%;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.ak-kacheln{display:grid;grid-template-columns:repeat(5,1fr);gap:.5em}
.ak-kacheln div{background:#fff;border:1px solid rgba(10,10,10,.12);padding:.6em .7em}
.ak-kacheln b{display:block;font-family:"Archivo Plakat",Archivo,sans-serif;font-stretch:62%;font-weight:800;font-size:2.4em;line-height:1}
.ak-kacheln span{color:#6b6b6b}
.ak-kacheln .an{border-color:#0a0a0a;box-shadow:inset 0 0 0 1px #0a0a0a;background:#e9f5a0}
.ak-karte{background:#fff;border:1px solid rgba(10,10,10,.12);padding:.7em .9em}
.ak-karte > b{display:block;font-size:1.25em;margin-bottom:.4em}
.ak-kopf,.ak-zeile{display:grid;grid-template-columns:1.5fr .62fr .7fr 1.25fr 1.2fr;gap:.8em;align-items:start}
.ak-kopf{padding:.2em .3em .5em;border-bottom:1px solid rgba(10,10,10,.12);font-family:ui-monospace,Menlo,monospace;font-size:.74em;letter-spacing:.05em;text-transform:uppercase;color:#6b6b6b;font-weight:600}
.ak-zeile{padding:.7em .3em;border-top:1px solid rgba(10,10,10,.12);color:#3d3d3d;line-height:1.3}
.ak-kopf + .ak-zeile{border-top:0}
.ak-zeile b{color:#0a0a0a;font-size:1.1em}
.ak-zeile small{display:block;color:#6b6b6b;font-size:.9em}
.ak-pille{display:inline-block;font-size:.9em;font-weight:600;padding:.15em .6em;white-space:nowrap}
.ak-pille.kalt{background:rgba(28,85,246,.08);color:#1c55f6}
.ak-pille.warm{background:rgba(237,161,0,.14);color:#a86b00}
.ak-pille.heiss,.ak-pille.faellig{background:rgba(214,40,57,.1);color:#c0303f}
.ak-pille.kunde{background:rgba(40,160,90,.12);color:#1f8a4c}
.ak-wer{display:flex;align-items:center;gap:.4em}
.ak-wer i{width:1.7em;height:1.7em;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:.85em;color:#0a0a0a;background:#e9f5a0;border:1px solid #0a0a0a}
.ak-wer i.b{background:#0a0a0a;color:#e9f5a0}
.ak-wer i.c{background:#fff}
.se-beispiel{align-self:flex-end;color:#949494;font-size:.9em}

@media (max-width:640px){
  .se-app.fest .se-kpi{grid-template-columns:repeat(3,1fr)}
  .se-app.fest{grid-template-columns:1fr}
  .se-app.fest .se-seite{display:none}
  .ak-kacheln{grid-template-columns:repeat(3,1fr)}
  .ak-kacheln div:nth-child(n+4){display:none}
  .ak-kopf{display:none}
  .ak-zeile{grid-template-columns:1fr auto;gap:.3em .8em}
  .ak-zeile > :nth-child(3),.ak-zeile > :nth-child(4){display:none}
  .ak-zeile > :nth-child(5){grid-column:1/-1}
  .ak-leiste span:not(.suche):not(.los){display:none}
}

/* Das echte 3D-Lagezentrum (fx/lagezentrum.html) im FX-Fenster und auf dem iPad */
.se-haupt[hidden]{display:none!important}
.se-seite [data-fx-seite]{cursor:pointer}
.se-seite [data-fx-seite]:not(.an):hover{background:#ececec;color:#0a0a0a}
.se-drei{position:relative;padding:0!important;background:#4fb3ff!important;overflow:hidden}
.se-drei iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.se-app.fest .se-drei{height:440px}
.win .se-app.fest .se-drei{height:380px}
@media (max-width:640px){ .se-app.fest .se-drei{height:360px} }