927 lines
53 KiB
PHP
927 lines
53 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>CluPilot Cloud — Ihre firmeneigene Cloud, betrieben und belegbar</title>
|
|
<meta name="description" content="Eigene isolierte Cloud-Instanz für Kanzleien, Praxen und KMU. Serverstandort EU, tägliche verschlüsselte Sicherung mit monatlichem Wiederherstellungstest, AV-Vertrag inklusive, Betreuung auf Deutsch.">
|
|
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
|
|
<link rel="apple-touch-icon" href="/favicon.svg">
|
|
|
|
{{-- Self-hosted (R14). Served from our own origin as static files, so the
|
|
public page renders correctly even when the Vite build is unavailable. --}}
|
|
<link rel="preload" as="font" type="font/woff2" href="/fonts/ibm-plex-serif-latin-600-normal.woff2" crossorigin>
|
|
<link rel="preload" as="font" type="font/woff2" href="/fonts/ibm-plex-sans-latin-400-normal.woff2" crossorigin>
|
|
|
|
@verbatim
|
|
<style>
|
|
@font-face{font-family:"Plex Serif";src:url("/fonts/ibm-plex-serif-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Serif";src:url("/fonts/ibm-plex-serif-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Sans";src:url("/fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
|
|
@font-face{font-family:"Plex Mono";src:url("/fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
|
|
|
|
:root{
|
|
/* Warm paper rather than screen-white: the page is a document. */
|
|
--paper:#f7f5f1; --paper-2:#efebe3; --card:#fffefb;
|
|
--ink:#17140f; --ink-soft:#413a31; --muted:#7b7367; --faint:#a39a8c;
|
|
--rule:#e3ded3; --rule-mid:#cbc3b4;
|
|
/* Brand orange, same tones as the console. Fills use --accent, text uses
|
|
--accent-text (the bright orange is only ~2.9:1 on paper). */
|
|
--accent:#f97316; --accent-text:#b8500a; --accent-deep:#8f3f08; --accent-wash:#fdf0e4;
|
|
--ok:#2f7d4f;
|
|
/* The dark plate — warm, not blue-black, so it reads as ink not as chrome. */
|
|
--plate:#17140f; --plate-2:#211d16; --plate-rule:#39332a;
|
|
--plate-text:#ded7c9; --plate-muted:#93897a;
|
|
--serif:"Plex Serif",Georgia,"Times New Roman",serif;
|
|
--sans:"Plex Sans",-apple-system,BlinkMacSystemFont,sans-serif;
|
|
--mono:"Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;
|
|
--r:3px;
|
|
--pad:clamp(20px,5vw,48px);
|
|
--ease:cubic-bezier(.2,.7,.2,1);
|
|
}
|
|
|
|
*{margin:0;padding:0;box-sizing:border-box}
|
|
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
|
body{
|
|
font-family:var(--sans);font-size:16px;line-height:1.6;
|
|
color:var(--ink-soft);background:var(--paper);
|
|
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
|
|
overflow-x:hidden;
|
|
}
|
|
a{color:inherit;text-decoration:none}
|
|
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
|
|
::selection{background:var(--accent);color:#fff}
|
|
:focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
|
|
|
|
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--pad)}
|
|
.mono{font-family:var(--mono)}
|
|
.num{font-variant-numeric:tabular-nums}
|
|
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
|
|
|
|
/* ── Document furniture ────────────────────────────────────────────── */
|
|
#prog{position:fixed;top:0;left:0;height:2px;width:0;background:var(--accent);z-index:120}
|
|
|
|
.topline{
|
|
position:fixed;top:0;left:0;right:0;z-index:110;background:rgba(247,245,241,.88);
|
|
backdrop-filter:blur(14px) saturate(1.6);-webkit-backdrop-filter:blur(14px) saturate(1.6);
|
|
border-bottom:1px solid var(--rule);transition:border-color .3s,background .3s;
|
|
}
|
|
.topline.sc{border-bottom-color:var(--rule-mid);background:rgba(247,245,241,.96)}
|
|
.tl{display:flex;align-items:center;gap:34px;height:58px;font-size:.86rem}
|
|
.mark{font-family:var(--serif);font-weight:600;font-size:1.12rem;letter-spacing:-.02em;color:var(--ink)}
|
|
.mark i{font-style:normal;color:var(--accent-text)}
|
|
.tnav{display:flex;gap:26px;margin-left:auto;color:var(--muted)}
|
|
.tnav a{position:relative;padding:2px 0;transition:color .18s}
|
|
.tnav a::after{content:"";position:absolute;left:0;right:100%;bottom:-1px;height:1px;background:var(--accent);transition:right .28s var(--ease)}
|
|
.tnav a:hover{color:var(--ink)}
|
|
.tnav a:hover::after{right:0}
|
|
.tacts{display:flex;align-items:center;gap:18px}
|
|
.tsign{font-size:.86rem;color:var(--muted);transition:color .18s}
|
|
.tsign:hover{color:var(--ink)}
|
|
.btn{
|
|
display:inline-flex;align-items:center;gap:9px;border-radius:var(--r);
|
|
font-size:.88rem;font-weight:500;letter-spacing:.005em;
|
|
padding:10px 18px;transition:background .18s,color .18s,border-color .18s,transform .18s;
|
|
}
|
|
.btn-ink{background:var(--ink);color:var(--paper)}
|
|
.btn-ink:hover{background:var(--accent-deep)}
|
|
.btn-line{border:1px solid var(--rule-mid);color:var(--ink)}
|
|
.btn-line:hover{border-color:var(--ink);background:var(--card)}
|
|
.btn-sm{padding:8px 15px;font-size:.82rem}
|
|
.btn-lg{padding:13px 24px;font-size:.94rem}
|
|
.btn-plate{background:var(--paper);color:var(--ink)}
|
|
.btn-plate:hover{background:var(--accent);color:#fff}
|
|
|
|
@media(max-width:900px){.tnav{display:none}.tl{gap:16px}}
|
|
@media(max-width:520px){
|
|
.tacts{margin-left:auto}
|
|
.tsign{display:none}
|
|
.tl .btn-sm{padding:7px 13px;font-size:.78rem}
|
|
}
|
|
|
|
/* ── Section scaffolding ───────────────────────────────────────────── */
|
|
section{padding:clamp(72px,9vw,130px) 0;position:relative}
|
|
.sechead{display:flex;align-items:baseline;gap:16px;margin-bottom:26px}
|
|
.sn{font-family:var(--mono);font-size:.72rem;color:var(--accent-text);letter-spacing:.1em}
|
|
.sk{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.17em;color:var(--muted)}
|
|
.sechead .fill{flex:1;height:1px;background:var(--rule);transform-origin:left;transform:scaleX(0);transition:transform 1s var(--ease)}
|
|
.in .fill,.sechead.in .fill{transform:scaleX(1)}
|
|
h1,h2,h3{font-family:var(--serif);color:var(--ink);font-weight:600;letter-spacing:-.022em;line-height:1.08}
|
|
h1{font-size:clamp(2.4rem,4.7vw,3.85rem);line-height:1.04;letter-spacing:-.03em}
|
|
h2{font-size:clamp(1.85rem,3.5vw,2.85rem)}
|
|
h3{font-size:1.02rem;line-height:1.35;letter-spacing:-.012em}
|
|
.lead{font-size:clamp(1.02rem,1.45vw,1.16rem);color:var(--ink-soft);max-width:60ch;margin-top:20px;line-height:1.62}
|
|
|
|
/* ── Hero ──────────────────────────────────────────────────────────── */
|
|
.hero{padding-top:clamp(104px,12vw,152px);padding-bottom:clamp(52px,6vw,84px);position:relative}
|
|
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--rule)}
|
|
.heroGrid{display:grid;grid-template-columns:1.38fr .92fr;gap:clamp(34px,5vw,64px);align-items:start}
|
|
.eyebrow{
|
|
font-family:var(--mono);font-size:.71rem;text-transform:uppercase;letter-spacing:.16em;
|
|
color:var(--muted);display:flex;align-items:center;gap:11px;margin-bottom:24px;
|
|
}
|
|
.eyebrow::before{content:"";width:26px;height:1px;background:var(--accent)}
|
|
h1 .hl{color:var(--accent-text)}
|
|
.heroActs{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
|
|
.heroMeta{
|
|
display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:32px;padding-top:22px;border-top:1px solid var(--rule);
|
|
font-family:var(--mono);font-size:.74rem;color:var(--muted);
|
|
}
|
|
.heroMeta b{color:var(--ink);font-weight:500}
|
|
|
|
/* The specification plate — a data sheet where a hero image would be. */
|
|
.plate{background:var(--card);border:1px solid var(--rule-mid);border-radius:var(--r);position:relative}
|
|
.plate::before,.plate::after{
|
|
content:"+";position:absolute;font-family:var(--mono);font-size:.8rem;color:var(--rule-mid);line-height:1;
|
|
}
|
|
.plate::before{top:-6px;left:-6px}
|
|
.plate::after{bottom:-6px;right:-6px}
|
|
.plateHead{
|
|
display:flex;justify-content:space-between;align-items:center;gap:12px;
|
|
padding:13px 18px;border-bottom:1px solid var(--rule);background:var(--paper-2);
|
|
font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
|
|
border-radius:var(--r) var(--r) 0 0;
|
|
}
|
|
.plateHead b{color:var(--ink);font-weight:500}
|
|
.plate dl{padding:4px 18px 8px}
|
|
.plate .row{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:11px 0;border-bottom:1px solid var(--rule)}
|
|
.plate .row:last-child{border-bottom:0}
|
|
.plate dt{font-size:.82rem;color:var(--muted);flex:none}
|
|
.plate dd{font-size:.86rem;color:var(--ink);text-align:right;font-weight:500}
|
|
.plate dd.ok::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--ok);margin-right:8px;vertical-align:middle}
|
|
|
|
@media(max-width:940px){.heroGrid{grid-template-columns:1fr;gap:44px}}
|
|
|
|
/* ── Trust rule ────────────────────────────────────────────────────── */
|
|
.trust{padding:0;border-bottom:1px solid var(--rule);background:var(--card)}
|
|
.trustGrid{display:grid;grid-template-columns:repeat(4,1fr)}
|
|
/* min-width:0 or a long German compound ("Wiederherstellungstests") sets the
|
|
column's min-content width and pushes the whole grid past the viewport. */
|
|
.trustGrid div{padding:22px 24px;border-left:1px solid var(--rule);display:flex;flex-direction:column;gap:4px;min-width:0}
|
|
.trustGrid span{hyphens:auto;overflow-wrap:break-word}
|
|
/* The edge cells drop their outer padding so the figures sit on the same
|
|
left margin as every heading on the page. */
|
|
.trustGrid div:first-child{border-left:0;padding-left:0}
|
|
.trustGrid div:last-child{padding-right:0}
|
|
.trustGrid b{font-family:var(--serif);font-size:1.5rem;color:var(--ink);font-weight:600;letter-spacing:-.02em}
|
|
.trustGrid span{font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted)}
|
|
@media(max-width:760px){.trustGrid{grid-template-columns:repeat(2,1fr)}.trustGrid div:nth-child(3){border-left:0}.trustGrid div:nth-child(n+3){border-top:1px solid var(--rule)}}
|
|
|
|
/* ── Register (industries) ─────────────────────────────────────────── */
|
|
.regGrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--rule);margin-top:40px}
|
|
.reg{padding:24px 26px 26px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);transition:background .25s}
|
|
.reg:nth-child(3n){border-right:0}
|
|
.reg:hover{background:var(--card)}
|
|
.reg .rn{font-family:var(--mono);font-size:.68rem;color:var(--faint);letter-spacing:.1em}
|
|
.reg h3{margin:9px 0 8px}
|
|
.reg p{font-size:.86rem;color:var(--muted);line-height:1.55}
|
|
.reg .tpl{font-family:var(--mono);font-size:.72rem;color:var(--accent-text);margin-top:11px;line-height:1.6}
|
|
@media(max-width:900px){.regGrid{grid-template-columns:repeat(2,1fr)}.reg:nth-child(3n){border-right:1px solid var(--rule)}.reg:nth-child(2n){border-right:0}}
|
|
@media(max-width:560px){.regGrid{grid-template-columns:1fr}.reg{border-right:0!important}}
|
|
|
|
/* ── Product panel ─────────────────────────────────────────────────── */
|
|
.panel{margin-top:46px;border:1px solid var(--rule-mid);border-radius:var(--r);background:var(--card);overflow:hidden}
|
|
.pbar{display:flex;align-items:center;gap:9px;padding:11px 16px;border-bottom:1px solid var(--rule);background:var(--paper-2)}
|
|
.pdot{width:8px;height:8px;border-radius:50%;background:var(--rule-mid)}
|
|
.purl{
|
|
margin-left:12px;font-family:var(--mono);font-size:.74rem;color:var(--muted);
|
|
background:var(--card);border:1px solid var(--rule);border-radius:var(--r);padding:4px 12px;
|
|
}
|
|
.pbody{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule)}
|
|
.pcell{background:var(--card);padding:24px}
|
|
.pcell .ct{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);margin-bottom:16px}
|
|
.idRow{display:flex;align-items:center;gap:13px}
|
|
.idLogo{
|
|
width:42px;height:42px;border-radius:var(--r);background:var(--ink);color:var(--paper);
|
|
display:grid;place-items:center;font-family:var(--serif);font-size:1.18rem;font-weight:600;flex:none;
|
|
}
|
|
.idRow b{display:block;font-size:.94rem;color:var(--ink);font-weight:600}
|
|
.idRow small{display:block;font-size:.76rem;color:var(--muted);margin-top:2px}
|
|
.meter{height:5px;background:var(--paper-2);border-radius:99px;margin-top:20px;overflow:hidden}
|
|
.meter i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width 1.5s var(--ease)}
|
|
.in .meter i{width:47%}
|
|
.mrow{display:flex;justify-content:space-between;font-family:var(--mono);font-size:.73rem;color:var(--muted);margin-top:8px}
|
|
.chk{display:flex;flex-direction:column;gap:11px}
|
|
.chk div{display:flex;align-items:center;gap:11px;font-size:.85rem;color:var(--ink-soft)}
|
|
.chk svg{width:15px;height:15px;color:var(--ok);flex:none}
|
|
.chk time{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--faint)}
|
|
@media(max-width:760px){.pbody{grid-template-columns:1fr}}
|
|
|
|
.fnGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:34px;border-radius:var(--r);overflow:hidden}
|
|
.fn{background:var(--paper);padding:17px 20px;font-size:.87rem;color:var(--ink-soft);display:flex;align-items:center;gap:11px}
|
|
.fn::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--accent);flex:none}
|
|
@media(max-width:800px){.fnGrid{grid-template-columns:repeat(2,1fr)}}
|
|
@media(max-width:520px){.fnGrid{grid-template-columns:1fr}}
|
|
.addons{margin-top:26px;font-size:.86rem;color:var(--muted);line-height:1.7}
|
|
.addons b{color:var(--ink);font-weight:500}
|
|
|
|
/* ── Procedure ─────────────────────────────────────────────────────── */
|
|
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin-top:44px}
|
|
.step{background:var(--paper);padding:28px 26px 30px}
|
|
.step .sno{
|
|
font-family:var(--mono);font-size:.72rem;color:var(--accent-text);letter-spacing:.12em;
|
|
padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--rule);display:block;
|
|
}
|
|
.step h3{margin-bottom:9px}
|
|
.step p{font-size:.87rem;color:var(--muted);line-height:1.6}
|
|
@media(max-width:820px){.steps{grid-template-columns:1fr}}
|
|
|
|
/* The provisioning log — the page's one moment of motion with a purpose. */
|
|
.log{margin-top:44px;border:1px solid var(--rule-mid);border-radius:var(--r);background:var(--card)}
|
|
.logHead{
|
|
display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 18px;
|
|
border-bottom:1px solid var(--rule);background:var(--paper-2);
|
|
font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.15em;color:var(--muted);
|
|
border-radius:var(--r) var(--r) 0 0;
|
|
}
|
|
.logHead b{color:var(--ink);font-weight:500}
|
|
.logBody{padding:8px 18px 16px;font-family:var(--mono);font-size:.79rem}
|
|
.ll{display:flex;align-items:center;gap:13px;padding:9px 0;border-bottom:1px solid var(--rule);opacity:0;transform:translateY(4px);transition:opacity .45s,transform .45s}
|
|
.ll:last-of-type{border-bottom:0}
|
|
.ll.on{opacity:1;transform:none}
|
|
.ll time{color:var(--faint);flex:none;width:56px}
|
|
.ll span{color:var(--ink-soft);flex:1}
|
|
.ll em{font-style:normal;color:var(--ok);flex:none}
|
|
.logDone{
|
|
margin-top:12px;padding:12px 15px;border-radius:var(--r);background:var(--accent-wash);
|
|
border:1px solid #f6d5b6;color:var(--accent-deep);font-size:.79rem;font-family:var(--mono);
|
|
opacity:0;transform:translateY(4px);transition:opacity .5s,transform .5s;
|
|
}
|
|
.logDone.on{opacity:1;transform:none}
|
|
@media(max-width:560px){.ll{flex-wrap:wrap;gap:6px 13px}.ll span{flex:1 1 100%;order:3}}
|
|
|
|
/* ── Dark plate: security ──────────────────────────────────────────── */
|
|
.dark{background:var(--plate);color:var(--plate-text)}
|
|
.dark::before{
|
|
content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
|
|
background-image:linear-gradient(var(--plate-rule) 1px,transparent 1px),linear-gradient(90deg,var(--plate-rule) 1px,transparent 1px);
|
|
background-size:88px 88px;
|
|
mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 75%);
|
|
-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0%,#000 0%,transparent 75%);
|
|
}
|
|
.dark .wrap{position:relative}
|
|
.dark h2,.dark h3{color:#fff}
|
|
.dark .sk{color:var(--plate-muted)}
|
|
.dark .sn{color:var(--accent)}
|
|
.dark .sechead .fill{background:var(--plate-rule)}
|
|
.dark .lead{color:var(--plate-text)}
|
|
|
|
.audit{width:100%;border-collapse:collapse;margin-top:44px;font-size:.88rem}
|
|
.audit th{
|
|
text-align:left;font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;
|
|
color:var(--plate-muted);font-weight:400;padding:0 16px 13px 0;border-bottom:1px solid var(--plate-rule);
|
|
}
|
|
.audit td{padding:17px 16px 17px 0;border-bottom:1px solid var(--plate-rule);vertical-align:top;color:var(--plate-text)}
|
|
.audit tr:last-child td{border-bottom:0}
|
|
.audit td:first-child{color:#fff;font-weight:500;width:38%;padding-right:40px}
|
|
.audit td small{display:block;color:var(--plate-muted);font-size:.8rem;margin-top:4px;line-height:1.5;font-weight:400}
|
|
.audit .freq{font-family:var(--mono);font-size:.76rem;color:var(--plate-text);width:20%;white-space:nowrap}
|
|
.audit .proof{color:var(--plate-muted);font-size:.83rem}
|
|
.audit tr{transition:background .2s}
|
|
.audit tbody tr:hover{background:var(--plate-2)}
|
|
@media(max-width:760px){
|
|
.audit,.audit tbody,.audit tr,.audit td{display:block;width:auto}
|
|
.audit thead{display:none}
|
|
.audit tr{padding:16px 0;border-bottom:1px solid var(--plate-rule)}
|
|
.audit td{border:0;padding:2px 0}
|
|
.audit td:first-child{width:auto;margin-bottom:5px}
|
|
.audit .freq{color:var(--accent);width:auto}
|
|
}
|
|
|
|
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--plate-rule);margin-top:56px;border:1px solid var(--plate-rule);border-radius:var(--r);overflow:hidden}
|
|
.stat{background:var(--plate);padding:26px 24px}
|
|
.stat b{display:block;font-family:var(--serif);font-size:clamp(2rem,3.6vw,2.9rem);color:#fff;font-weight:600;letter-spacing:-.03em;line-height:1}
|
|
.stat small{display:block;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--plate-muted);margin-top:11px;line-height:1.5}
|
|
@media(max-width:700px){.stats{grid-template-columns:1fr}}
|
|
|
|
/* ── Comparison ────────────────────────────────────────────────────── */
|
|
.cmp{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--rule);border:1px solid var(--rule);border-radius:var(--r);margin-top:44px;overflow:hidden}
|
|
.cx{background:var(--paper);padding:26px 24px 28px;transition:background .25s}
|
|
.cx.win{background:var(--card)}
|
|
.cx h3{margin-bottom:5px}
|
|
.cx .cs{font-family:var(--mono);font-size:.71rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-bottom:20px;display:block}
|
|
.cx.win .cs{color:var(--accent-text)}
|
|
.cx ul{list-style:none;display:flex;flex-direction:column;gap:13px}
|
|
.cx li{display:flex;gap:11px;font-size:.86rem;line-height:1.5;align-items:flex-start;color:var(--ink-soft)}
|
|
.cx li svg{width:14px;height:14px;flex:none;margin-top:4px}
|
|
.cx li.no svg{color:#b4402e}
|
|
.cx li.yes svg{color:var(--ok)}
|
|
@media(max-width:900px){.cmp{grid-template-columns:1fr}}
|
|
|
|
/* ── Price sheet ───────────────────────────────────────────────────── */
|
|
/* The marks belong to the frame, the scrolling to an inner element: on the
|
|
scroller they would be clipped away and would widen its scroll area. */
|
|
.sheet{margin-top:44px;border:1px solid var(--rule-mid);border-radius:var(--r);background:var(--card);position:relative}
|
|
.sheet::before,.sheet::after{content:"+";position:absolute;font-family:var(--mono);font-size:.8rem;color:var(--rule-mid);line-height:1;z-index:1}
|
|
.sheet::before{top:-6px;left:-6px}
|
|
.sheet::after{bottom:-6px;right:-6px}
|
|
.sheetScroll{overflow-x:auto;border-radius:var(--r)}
|
|
.swipe{display:none;font-family:var(--mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.13em;color:var(--muted);margin-top:12px}
|
|
@media(max-width:800px){.swipe{display:block}}
|
|
table.ps{width:100%;border-collapse:collapse;min-width:760px}
|
|
table.ps th,table.ps td{text-align:left;padding:14px 20px;border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);vertical-align:top}
|
|
table.ps th:last-child,table.ps td:last-child{border-right:0}
|
|
table.ps tr:last-child th,table.ps tr:last-child td{border-bottom:0}
|
|
table.ps thead th{background:var(--paper-2);vertical-align:bottom;padding-top:18px;padding-bottom:16px}
|
|
table.ps .rh{
|
|
font-family:var(--mono);font-size:.71rem;text-transform:uppercase;letter-spacing:.13em;
|
|
color:var(--muted);font-weight:400;width:20%;background:var(--paper);
|
|
}
|
|
.pName{font-family:var(--serif);font-size:1.32rem;color:var(--ink);font-weight:600;letter-spacing:-.02em;display:block}
|
|
.pAud{font-size:.79rem;color:var(--muted);margin-top:3px;display:block;font-weight:400;line-height:1.4}
|
|
.pTag{
|
|
display:inline-block;font-family:var(--mono);font-size:.63rem;text-transform:uppercase;letter-spacing:.14em;
|
|
color:#fff;background:var(--accent-deep);padding:3px 8px;border-radius:99px;margin-bottom:9px;
|
|
}
|
|
.pPrice{font-family:var(--serif);font-size:1.7rem;color:var(--ink);font-weight:600;letter-spacing:-.028em;font-variant-numeric:tabular-nums}
|
|
.pPrice small{font-family:var(--sans);font-size:.78rem;color:var(--muted);font-weight:400;letter-spacing:0;margin-left:5px}
|
|
.pSet{font-size:.76rem;color:var(--muted);margin-top:5px;line-height:1.45}
|
|
.pSpec{font-size:.95rem;color:var(--ink);font-variant-numeric:tabular-nums}
|
|
.perMonth{font-size:.76rem;color:var(--muted);margin-left:4px}
|
|
table.ps td.hasF,table.ps td.noF{text-align:center;padding-top:15px;padding-bottom:15px}
|
|
table.ps td.hasF svg{width:15px;height:15px;color:var(--ok)}
|
|
table.ps td.noF{color:var(--faint);font-family:var(--mono);font-size:.85rem}
|
|
/* The recommended column is tinted throughout, but the accent rule belongs to
|
|
its head alone — on every cell it reads as a striped table, not a column. */
|
|
.colWin{background:var(--accent-wash)!important}
|
|
thead .colWin{box-shadow:inset 0 3px 0 var(--accent)}
|
|
.allin{margin-top:24px;font-size:.84rem;color:var(--muted);line-height:1.7}
|
|
.allin b{color:var(--ink);font-weight:500}
|
|
.noprice{margin-top:44px;border:1px solid var(--rule-mid);border-radius:var(--r);background:var(--card);padding:36px 30px;text-align:center}
|
|
.noprice h3{margin-bottom:8px}
|
|
.noprice p{font-size:.9rem;color:var(--muted);max-width:46ch;margin:0 auto 20px}
|
|
|
|
/* ── FAQ ───────────────────────────────────────────────────────────── */
|
|
.faqList{margin-top:40px;border-top:1px solid var(--rule)}
|
|
details{border-bottom:1px solid var(--rule)}
|
|
summary{
|
|
list-style:none;cursor:pointer;padding:21px 44px 21px 0;position:relative;
|
|
font-family:var(--serif);font-size:1.06rem;color:var(--ink);font-weight:600;letter-spacing:-.014em;
|
|
transition:color .18s;
|
|
}
|
|
summary::-webkit-details-marker{display:none}
|
|
summary:hover{color:var(--accent-text)}
|
|
summary::after{
|
|
content:"";position:absolute;right:6px;top:50%;width:9px;height:9px;
|
|
border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);
|
|
transform:translateY(-70%) rotate(45deg);transition:transform .28s var(--ease),border-color .18s;
|
|
}
|
|
details[open] summary::after{transform:translateY(-25%) rotate(-135deg);border-color:var(--accent-text)}
|
|
details p{padding:0 clamp(0px,6vw,80px) 24px 0;font-size:.92rem;color:var(--muted);line-height:1.65;max-width:74ch}
|
|
|
|
/* ── Closing ───────────────────────────────────────────────────────── */
|
|
.close{background:var(--plate);color:var(--plate-text);text-align:left}
|
|
.close h2{color:#fff;max-width:19ch}
|
|
.close .lead{color:var(--plate-text)}
|
|
.closeGrid{display:grid;grid-template-columns:1.25fr .85fr;gap:clamp(30px,5vw,64px);align-items:end}
|
|
.closeActs{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px}
|
|
.closeCard{border:1px solid var(--plate-rule);border-radius:var(--r);padding:22px 24px;background:var(--plate-2)}
|
|
.closeCard .ct{font-family:var(--mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.15em;color:var(--plate-muted);margin-bottom:15px}
|
|
.closeCard .cl{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--plate-rule);font-size:.86rem}
|
|
.closeCard .cl:last-child{border-bottom:0}
|
|
.closeCard .cl span{color:var(--plate-muted)}
|
|
.closeCard .cl b{color:#fff;font-weight:500}
|
|
.closeCard a.cl b{color:var(--accent);transition:color .18s}
|
|
.closeCard a.cl:hover b{color:#fff}
|
|
@media(max-width:900px){.closeGrid{grid-template-columns:1fr}}
|
|
|
|
footer{background:var(--plate);border-top:1px solid var(--plate-rule);padding:26px 0}
|
|
.fo{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;font-family:var(--mono);font-size:.73rem;color:var(--plate-muted)}
|
|
.fo .fm{font-family:var(--serif);font-size:1rem;color:#fff;font-weight:600;letter-spacing:-.02em}
|
|
.fo .fm i{font-style:normal;color:var(--accent)}
|
|
.fo .right{margin-left:auto;display:flex;flex-wrap:wrap;gap:20px}
|
|
.fo .right a{transition:color .18s}
|
|
.fo .right a:hover{color:#fff}
|
|
|
|
/* ── Reveal ────────────────────────────────────────────────────────── */
|
|
.rv{opacity:0;transform:translateY(14px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
|
|
.rv.in{opacity:1;transform:none}
|
|
.d1{transition-delay:.08s}.d2{transition-delay:.16s}.d3{transition-delay:.24s}
|
|
|
|
/* Hero enters on load rather than on scroll — it is already in view. */
|
|
.hv{opacity:0;transform:translateY(16px);animation:rise .85s var(--ease) forwards}
|
|
@keyframes rise{to{opacity:1;transform:none}}
|
|
|
|
@media(prefers-reduced-motion:reduce){
|
|
html{scroll-behavior:auto}
|
|
*,*::before,*::after{animation:none!important;transition:none!important}
|
|
.rv,.hv{opacity:1!important;transform:none!important}
|
|
.ll,.logDone{opacity:1!important;transform:none!important}
|
|
.sechead .fill{transform:scaleX(1)!important}
|
|
.meter i{width:47%!important}
|
|
}
|
|
</style>
|
|
@endverbatim
|
|
{{-- Without JS nothing would ever be revealed — show it all. --}}
|
|
<noscript><style>.rv,.hv,.ll,.logDone{opacity:1!important;transform:none!important}.sechead .fill{transform:scaleX(1)!important}.meter i{width:47%!important}</style></noscript>
|
|
</head>
|
|
<body>
|
|
<div id="prog" aria-hidden="true"></div>
|
|
|
|
<header class="topline" id="topline">
|
|
<div class="wrap tl">
|
|
<a class="mark" href="#top">Clu<i>Pilot</i></a>
|
|
<nav class="tnav">
|
|
<a href="#produkt">Produkt</a>
|
|
<a href="#ablauf">Ablauf</a>
|
|
<a href="#sicherheit">Sicherheit</a>
|
|
<a href="#pakete">Pakete</a>
|
|
<a href="#faq">Fragen</a>
|
|
</nav>
|
|
<div class="tacts">
|
|
<a class="tsign" href="{{ route('login') }}">Anmelden</a>
|
|
<a class="btn btn-ink btn-sm" href="#pakete">Pakete ansehen</a>
|
|
</div>
|
|
</div>
|
|
</header>
|
|
|
|
<section class="hero" id="top">
|
|
<div class="wrap heroGrid">
|
|
<div class="heroMain">
|
|
<p class="eyebrow hv" style="animation-delay:.05s">Betriebene Private Cloud · Österreich</p>
|
|
<h1 class="hv" style="animation-delay:.14s">Ihre firmeneigene Cloud.<br><span class="hl">Betrieben, gesichert, belegbar.</span></h1>
|
|
<p class="lead hv" style="animation-delay:.24s">
|
|
Eine eigene, isolierte Instanz für Ihr Unternehmen — eingerichtet, täglich gesichert und
|
|
laufend überwacht. Was wir tun, können Sie nachweisen: mit Protokoll, Prüfbericht und AV-Vertrag.
|
|
</p>
|
|
<div class="heroActs hv" style="animation-delay:.32s">
|
|
<a class="btn btn-ink btn-lg" href="#pakete">Pakete & Preise</a>
|
|
<a class="btn btn-line btn-lg" href="#kontakt">Erstgespräch vereinbaren</a>
|
|
</div>
|
|
<div class="heroMeta hv" style="animation-delay:.4s">
|
|
<span>Serverstandort <b>EU</b></span>
|
|
<span>Bereitstellung <b>< 20 Min.</b></span>
|
|
<span>Support <b>Deutsch</b></span>
|
|
<span>Preis <b>pro Firma</b></span>
|
|
</div>
|
|
</div>
|
|
|
|
<aside class="plate hv" style="animation-delay:.3s" aria-label="Stammblatt">
|
|
<div class="plateHead"><span>Stammblatt</span><b>Ausgabe 2026</b></div>
|
|
<dl>
|
|
<div class="row"><dt>Betriebsform</dt><dd>Eigene isolierte Instanz</dd></div>
|
|
<div class="row"><dt>Serverstandort</dt><dd>EU</dd></div>
|
|
<div class="row"><dt>Sicherung</dt><dd class="ok">Täglich, verschlüsselt</dd></div>
|
|
<div class="row"><dt>Wiederherstellung</dt><dd class="ok">Monatlich getestet</dd></div>
|
|
<div class="row"><dt>Updates & Wartung</dt><dd class="ok">Im Betrieb enthalten</dd></div>
|
|
<div class="row"><dt>AV-Vertrag & TOMs</dt><dd>Inklusive</dd></div>
|
|
<div class="row"><dt>Datenexport</dt><dd>Jederzeit, offene Formate</dd></div>
|
|
<div class="row"><dt>Ansprechpartner</dt><dd>Persönlich, auf Deutsch</dd></div>
|
|
</dl>
|
|
</aside>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="trust">
|
|
<div class="wrap">
|
|
<div class="trustGrid">
|
|
<div><b class="num" data-c="99.95" data-d="2">99,95</b><span>% Verfügbarkeit / 12 Mon.</span></div>
|
|
<div><b class="num" data-c="365">365</b><span>Sicherungen pro Jahr</span></div>
|
|
<div><b class="num" data-c="12">12</b><span>Wiederherstellungstests</span></div>
|
|
<div><b class="num" data-c="20">20</b><span>Minuten bis zum Betrieb</span></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<section id="branchen">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 01</span><span class="sk">Für wen</span><span class="fill"></span></div>
|
|
<h2 class="rv">Gebaut für Betriebe, die<br>Unterlagen aufbewahren müssen.</h2>
|
|
<p class="lead rv d1">
|
|
Wir liefern nicht einen leeren Baukasten, sondern eine Ablage, die zu Ihrem Fach passt —
|
|
Ordnerstruktur, Zugriffsrechte und Aufbewahrung nach Branchenvorlage, ab dem ersten Tag.
|
|
</p>
|
|
|
|
<div class="regGrid">
|
|
<div class="reg rv"><span class="rn">01</span><h3>Steuerberatung</h3><p>Mandantentrennung mit sauberen Rechten, Jahresordner, Belegeingang.</p><p class="tpl">Mandanten / Jahresabschluss / Belege</p></div>
|
|
<div class="reg rv d1"><span class="rn">02</span><h3>Rechtsanwälte</h3><p>Akten pro Verfahren, strikte Vertraulichkeit, nachvollziehbare Zugriffe.</p><p class="tpl">Akten / Schriftsätze / Fristen</p></div>
|
|
<div class="reg rv d2"><span class="rn">03</span><h3>Ärzte & Therapeuten</h3><p>Getrennte Ablage für Verwaltung und Befunde, klar geregelte Rechte.</p><p class="tpl">Verwaltung / Befunde / Abrechnung</p></div>
|
|
<div class="reg rv"><span class="rn">04</span><h3>Architektur & Planung</h3><p>Projektordner mit Plandateien, Versionen und Freigaben an Externe.</p><p class="tpl">Projekte / Pläne / Freigaben</p></div>
|
|
<div class="reg rv d1"><span class="rn">05</span><h3>Handwerk & Bau</h3><p>Baustellen mit Fotos vom Handy, Aufmaß und Abnahmeprotokollen.</p><p class="tpl">Baustellen / Aufmaß / Abnahme</p></div>
|
|
<div class="reg rv d2"><span class="rn">06</span><h3>Immobilien & Verwaltung</h3><p>Objekte und Einheiten, Verträge, Abrechnungen, Freigaben an Eigentümer.</p><p class="tpl">Objekte / Verträge / Abrechnung</p></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="produkt" style="background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 02</span><span class="sk">Das Produkt</span><span class="fill"></span></div>
|
|
<h2 class="rv">Ihre Adresse, Ihr Logo,<br>Ihre Ordnerstruktur.</h2>
|
|
<p class="lead rv d1">
|
|
Für Ihr Team sieht es aus wie firmeneigene Software — weil es das ist. Wir betreiben sie nur.
|
|
</p>
|
|
|
|
<div class="panel rv d1">
|
|
<div class="pbar">
|
|
<span class="pdot"></span><span class="pdot"></span><span class="pdot"></span>
|
|
<span class="purl">cloud.kanzlei-berger.at</span>
|
|
</div>
|
|
<div class="pbody">
|
|
<div class="pcell">
|
|
<div class="ct">Instanz</div>
|
|
<div class="idRow">
|
|
<div class="idLogo">B</div>
|
|
<div><b>Cloud der Kanzlei Berger</b><small>EU-Rechenzentrum · alle Dienste aktiv</small></div>
|
|
</div>
|
|
<div class="meter"><i></i></div>
|
|
<div class="mrow"><span>Speicher</span><span class="num">235 / 500 GB</span></div>
|
|
</div>
|
|
<div class="pcell">
|
|
<div class="ct">Heute erledigt</div>
|
|
<div class="chk">
|
|
<div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg>Sicherung verschlüsselt & geprüft<time>03:12</time></div>
|
|
<div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg>Sicherheitsupdates eingespielt<time>04:05</time></div>
|
|
<div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg>8 Benutzer synchronisiert<time>07:30</time></div>
|
|
<div><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg>Verfügbarkeit 99,98 %<time>laufend</time></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="fnGrid rv d2" aria-label="Enthaltene Funktionen">
|
|
<div class="fn">Dateien & Synchronisation auf allen Geräten</div>
|
|
<div class="fn">Office im Browser, gemeinsam bearbeiten</div>
|
|
<div class="fn">Kalender, Kontakte & Aufgaben</div>
|
|
<div class="fn">Videokonferenz & Chat</div>
|
|
<div class="fn">Freigabelinks mit Ablauf & Passwort</div>
|
|
<div class="fn">Versionierung & Papierkorb</div>
|
|
</div>
|
|
<p class="addons rv d2">
|
|
Zubuchbare Module: <b>Vaultwarden</b> — Team-Passwörter · <b>Paperless-ngx</b> — digitales Dokumentenarchiv ·
|
|
<b>digitale Signatur</b> (in Vorbereitung). Preise auf Anfrage oder im Kundenbereich.
|
|
</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="ablauf">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 03</span><span class="sk">Ablauf</span><span class="fill"></span></div>
|
|
<h2 class="rv">Von der Bestellung zum Betrieb.<br>Nur der erste Schritt ist Ihrer.</h2>
|
|
|
|
<div class="steps rv d1">
|
|
<div class="step">
|
|
<span class="sno">Schritt 1 — Sie</span>
|
|
<h3>Paket wählen</h3>
|
|
<p>Zwei Minuten online. Ihre Instanz wird unmittelbar danach automatisch erstellt und ist wenige Minuten später erreichbar.</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="sno">Schritt 2 — Wir</span>
|
|
<h3>Einrichtung</h3>
|
|
<p>Benutzer und Rechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo und Ihre Domain. Auf Wunsch übernehmen wir Bestandsdaten aus Dropbox, OneDrive oder vom alten Server — mit schriftlichem Übernahmeprotokoll.</p>
|
|
</div>
|
|
<div class="step">
|
|
<span class="sno">Schritt 3 — Gemeinsam</span>
|
|
<h3>Einschulung</h3>
|
|
<p>45 Minuten für Ihr Team per Videokonferenz, Kurzanleitung als PDF mit Ihren eigenen Screenshots. Danach läuft es — bei Fragen rufen Sie an.</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="log rv d2" id="log">
|
|
<div class="logHead"><span>Bereitstellungsprotokoll</span><b>Beispiel</b></div>
|
|
<div class="logBody">
|
|
<div class="ll"><time>0:40</time><span>Instanz erstellt und gestartet</span><em>OK</em></div>
|
|
<div class="ll"><time>1:10</time><span>Verschlüsselung und Firewall aktiv</span><em>OK</em></div>
|
|
<div class="ll"><time>2:30</time><span>Domain verbunden, Zertifikat ausgestellt</span><em>OK</em></div>
|
|
<div class="ll"><time>4:15</time><span>Erste Sicherung angelegt und geprüft</span><em>OK</em></div>
|
|
<div class="ll"><time>5:00</time><span>Logo und Farben hinterlegt</span><em>OK</em></div>
|
|
<div class="logDone" id="logDone">Abgeschlossen — Instanz betriebsbereit in unter 20 Minuten.</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="dark" id="sicherheit">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 04</span><span class="sk">Sicherheit & Nachweis</span><span class="fill"></span></div>
|
|
<h2 class="rv">Sicherheit, die Sie<br>vorlegen können.</h2>
|
|
<p class="lead rv d1">
|
|
Jede Maßnahme hat einen Rhythmus und einen Nachweis. Beides bekommen Sie schriftlich —
|
|
für Ihre eigene Dokumentation, Ihre Prüfung, Ihre Versicherung.
|
|
</p>
|
|
|
|
<table class="audit rv d1">
|
|
<thead>
|
|
<tr><th>Maßnahme</th><th>Rhythmus</th><th>Nachweis</th></tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Eigene isolierte Instanz<small>Eine virtuelle Maschine je Kunde, strikt getrennt von allen anderen.</small></td>
|
|
<td class="freq">dauerhaft</td>
|
|
<td class="proof">Instanzkennung im Kundenbereich</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Verschlüsselte Sicherung<small>Clientseitig verschlüsselt, getrennt vom Produktivsystem gelagert.</small></td>
|
|
<td class="freq">täglich</td>
|
|
<td class="proof">Sicherungsprotokoll mit Zeitstempel</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Wiederherstellungstest<small>Eine Sicherung wird tatsächlich zurückgespielt — nicht nur geprüft.</small></td>
|
|
<td class="freq">monatlich</td>
|
|
<td class="proof">Testbericht mit Ergebnis</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Sicherheitsupdates<small>Betriebssystem und Anwendung, eingespielt außerhalb Ihrer Arbeitszeit.</small></td>
|
|
<td class="freq">laufend</td>
|
|
<td class="proof">Wartungsprotokoll</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Überwachung<small>Erreichbarkeit, Speicher und Dienste — Alarm, bevor Sie es merken.</small></td>
|
|
<td class="freq">rund um die Uhr</td>
|
|
<td class="proof">Verfügbarkeitsbericht</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Serverstandort EU<small>Kein Transfer in Drittländer, keine Abhängigkeit von US-Anbietern.</small></td>
|
|
<td class="freq">vertraglich</td>
|
|
<td class="proof">AV-Vertrag & TOM-Dokumentation</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
|
|
<div class="stats">
|
|
<div class="stat rv"><b class="num" data-c="99.95" data-d="2">99,95</b><small>% Verfügbarkeit, letzte 12 Monate</small></div>
|
|
<div class="stat rv d1"><b class="num" data-c="30">30</b><small>Tage Aufbewahrung der Sicherungen</small></div>
|
|
<div class="stat rv d2"><b class="num" data-c="0">0</b><small>Datenverluste seit Betriebsaufnahme</small></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="vergleich">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 05</span><span class="sk">Der ehrliche Vergleich</span><span class="fill"></span></div>
|
|
<h2 class="rv">Warum nicht einfach …?</h2>
|
|
<p class="lead rv d1">Berechtigte Frage. Hier die Antwort ohne Marketing-Nebel — samt der Punkte, die gegen uns sprechen.</p>
|
|
|
|
@php
|
|
$no = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M18 6 6 18M6 6l12 12"/></svg>';
|
|
$yes = '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6"><path d="M20 6 9 17l-5-5"/></svg>';
|
|
@endphp
|
|
|
|
<div class="cmp rv d1">
|
|
<div class="cx">
|
|
<h3>… bei der US-Cloud bleiben?</h3>
|
|
<span class="cs">Dropbox, OneDrive & Co.</span>
|
|
<ul>
|
|
<li class="yes">{!! $yes !!}Bequem und sofort verfügbar</li>
|
|
<li class="no">{!! $no !!}Daten bei US-Konzernen — Drittlandtransfer als Dauerthema Ihrer Dokumentation</li>
|
|
<li class="no">{!! $no !!}Preis pro Kopf: Jeder neue Mitarbeiter erhöht die Rechnung</li>
|
|
<li class="no">{!! $no !!}Support über ein Ticketsystem in Übersee</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cx">
|
|
<h3>… einen eigenen Server?</h3>
|
|
<span class="cs">Selbst betreiben</span>
|
|
<ul>
|
|
<li class="yes">{!! $yes !!}Volle Kontrolle über alles</li>
|
|
<li class="no">{!! $no !!}Updates, Sicherung und Ausfälle sind Ihr Problem — auch am Wochenende</li>
|
|
<li class="no">{!! $no !!}Braucht dauerhaft echtes IT-Wissen im Haus</li>
|
|
<li class="no">{!! $no !!}Ein vergessenes Update kann sehr teuer werden</li>
|
|
</ul>
|
|
</div>
|
|
<div class="cx win">
|
|
<h3>CluPilot Cloud</h3>
|
|
<span class="cs">Ihre Cloud, von uns betrieben</span>
|
|
<ul>
|
|
<li class="yes">{!! $yes !!}Eigene isolierte Instanz, Standort EU, AV-Vertrag inklusive</li>
|
|
<li class="yes">{!! $yes !!}Fixer Firmenpreis, unabhängig von der Kopfzahl</li>
|
|
<li class="yes">{!! $yes !!}Betrieb, Sicherung und Überwachung nachweislich durch uns</li>
|
|
<li class="no">{!! $no !!}Einrichtung kostet einmalig — wir richten wirklich ein, statt nur freizuschalten</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="pakete" style="background:var(--paper-2);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 06</span><span class="sk">Pakete & Preise</span><span class="fill"></span></div>
|
|
<h2 class="rv">Ein fixer Preis pro Firma.<br>Nicht pro Kopf.</h2>
|
|
<p class="lead rv d1">Alle Preise netto pro Monat. Keine Staffelung nach Benutzern, keine Nachverrechnung bei Zuwachs.</p>
|
|
|
|
@if (empty($plans))
|
|
{{-- The catalogue could not be read. Showing a number we might not honour
|
|
would be worse than showing none. --}}
|
|
<div class="noprice rv d1">
|
|
<h3>Preise derzeit auf Anfrage</h3>
|
|
<p>Die Paketübersicht steht gerade nicht zur Verfügung. Wir nennen Ihnen die aktuellen Konditionen gerne direkt.</p>
|
|
<a class="btn btn-ink btn-lg" href="#kontakt">Preise anfragen</a>
|
|
</div>
|
|
@else
|
|
<div class="sheet rv d1">
|
|
<div class="sheetScroll">
|
|
<table class="ps">
|
|
<caption class="sr-only">Pakete und Preise im Vergleich</caption>
|
|
<thead>
|
|
<tr>
|
|
<th class="rh" scope="col"><span class="sr-only">Merkmal</span></th>
|
|
@foreach ($plans as $plan)
|
|
<th scope="col" class="{{ $plan['recommended'] ? 'colWin' : '' }}">
|
|
@if ($plan['recommended'])<span class="pTag">Empfohlen</span>@endif
|
|
<span class="pName">{{ $plan['name'] }}</span>
|
|
<span class="pAud">{{ $plan['audience'] }}</span>
|
|
</th>
|
|
@endforeach
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<th class="rh" scope="row">Preis</th>
|
|
@foreach ($plans as $plan)
|
|
<td class="{{ $plan['recommended'] ? 'colWin' : '' }}">
|
|
<span class="pPrice">{{ $plan['price'] }}<small>/Monat</small></span>
|
|
<div class="pSet">zzgl. einmaliger Einrichtung</div>
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
<tr>
|
|
<th class="rh" scope="row">Speicher</th>
|
|
@foreach ($plans as $plan)
|
|
<td class="pSpec {{ $plan['recommended'] ? 'colWin' : '' }}">{{ $plan['storage'] }}</td>
|
|
@endforeach
|
|
</tr>
|
|
<tr>
|
|
<th class="rh" scope="row">Datenvolumen</th>
|
|
@foreach ($plans as $plan)
|
|
<td class="pSpec {{ $plan['recommended'] ? 'colWin' : '' }}">{{ $plan['traffic'] }}<span class="perMonth">/Monat</span></td>
|
|
@endforeach
|
|
</tr>
|
|
<tr>
|
|
<th class="rh" scope="row">Benutzer</th>
|
|
@foreach ($plans as $plan)
|
|
<td class="pSpec {{ $plan['recommended'] ? 'colWin' : '' }}">bis {{ $plan['seats'] }}</td>
|
|
@endforeach
|
|
</tr>
|
|
@foreach ($featureRows as $feature)
|
|
<tr>
|
|
<th class="rh" scope="row">{{ $feature }}</th>
|
|
@foreach ($plans as $plan)
|
|
@php $has = in_array($feature, $plan['features'], true); @endphp
|
|
<td class="{{ $has ? 'hasF' : 'noF' }} {{ $plan['recommended'] ? 'colWin' : '' }}">
|
|
@if ($has)
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" aria-label="enthalten"><path d="M20 6 9 17l-5-5"/></svg>
|
|
@else
|
|
<span aria-label="nicht enthalten">—</span>
|
|
@endif
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
@endforeach
|
|
<tr>
|
|
<th class="rh" scope="row"></th>
|
|
@foreach ($plans as $plan)
|
|
<td class="{{ $plan['recommended'] ? 'colWin' : '' }}">
|
|
<a class="btn {{ $plan['recommended'] ? 'btn-ink' : 'btn-line' }} btn-sm" href="#kontakt">{{ $plan['name'] }} anfragen</a>
|
|
</td>
|
|
@endforeach
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<p class="swipe">→ Tabelle seitlich scrollen</p>
|
|
|
|
<p class="allin rv d2">
|
|
<b>In jedem Paket enthalten:</b> tägliche verschlüsselte Sicherung mit monatlichem Wiederherstellungstest ·
|
|
Updates, Wartung und Überwachung · AV-Vertrag und TOM-Dokumentation · persönlicher Support auf Deutsch am selben Werktag.<br>
|
|
Zusatzspeicher und Module sind jederzeit zubuchbar. Die einmalige Einrichtung richtet sich nach Umfang und Datenübernahme.
|
|
</p>
|
|
@endif
|
|
</div>
|
|
</section>
|
|
|
|
<section id="faq">
|
|
<div class="wrap">
|
|
<div class="sechead rv"><span class="sn">§ 07</span><span class="sk">Häufige Fragen</span><span class="fill"></span></div>
|
|
<h2 class="rv">Klare Antworten,<br>bevor Sie fragen müssen.</h2>
|
|
|
|
<div class="faqList rv d1">
|
|
<details>
|
|
<summary>Was passiert mit unseren Daten, wenn wir kündigen?</summary>
|
|
<p>Sie erhalten vor Vertragsende einen vollständigen Export in offenen Standardformaten. Ihre Cloud basiert auf Open-Source-Software — Sie sind nie eingesperrt. Nach der Übergabe löschen wir Instanz und Sicherungen und bestätigen das schriftlich.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Ersetzt das Microsoft 365?</summary>
|
|
<p>Es ersetzt den Dateiteil. Viele Kunden behalten Microsoft für E-Mail und nutzen die Cloud als zentrale, sichere Ablage statt OneDrive oder Dropbox — zum fixen Firmenpreis statt pro Benutzer.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Wie lange dauert die Einrichtung?</summary>
|
|
<p>Die Instanz läuft wenige Minuten nach der Bestellung. Die vollständige Einrichtung — Benutzer und Rechte, Ordnerstruktur nach Branchenvorlage, Ihr Logo, Ihre Domain und die Einschulung — ist in drei bis sieben Werktagen abgeschlossen. Die Übernahme Ihrer Bestandsdaten aus Dropbox, OneDrive oder vom alten Server bieten wir gesondert an, inklusive schriftlichem Übernahmeprotokoll.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Was, wenn jemand versehentlich Dateien löscht?</summary>
|
|
<p>Papierkorb und Versionierung fangen den Alltag ab. Darüber hinaus gibt es tägliche Sicherungen mit 30 Tagen Aufbewahrung: Ein Anruf genügt, wir stellen den gewünschten Stand wieder her.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Brauchen wir eigene IT-Kenntnisse?</summary>
|
|
<p>Nein. Bedienen kann es jeder, der mit Ordnern und Dateien umgeht — dafür gibt es die Einschulung. Alles Technische übernehmen wir dauerhaft.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Mit wem spreche ich bei Fragen?</summary>
|
|
<p>Direkt mit uns, per E-Mail oder Telefon, auf Deutsch, mit Antwort am selben Werktag. Kein Callcenter, keine Warteschleife.</p>
|
|
</details>
|
|
<details>
|
|
<summary>Wo genau stehen die Server?</summary>
|
|
<p>In Rechenzentren innerhalb der EU, in Österreich und Deutschland. Es findet kein Transfer in Drittländer statt. Den konkreten Standort Ihrer Instanz nennen wir Ihnen vor Vertragsabschluss und halten ihn im AV-Vertrag fest.</p>
|
|
</details>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="close" id="kontakt">
|
|
<div class="wrap closeGrid">
|
|
<div>
|
|
<div class="sechead rv"><span class="sn">§ 08</span><span class="sk">Kontakt</span><span class="fill"></span></div>
|
|
<h2 class="rv">Wen rufen Sie an, wenn Montagfrüh ein Ordner fehlt?</h2>
|
|
<p class="lead rv d1">
|
|
Genau dafür gibt es uns. Ein unverbindliches Erstgespräch dauert 20 Minuten —
|
|
danach wissen Sie, welches Paket passt und wie Ihre Daten sicher umziehen.
|
|
</p>
|
|
<div class="closeActs rv d1">
|
|
<a class="btn btn-plate btn-lg" href="mailto:office@clupilot.com">Erstgespräch anfragen</a>
|
|
<a class="btn btn-lg" style="border:1px solid var(--plate-rule);color:var(--plate-text)" href="#pakete">Pakete vergleichen</a>
|
|
</div>
|
|
</div>
|
|
<div class="closeCard rv d2">
|
|
<div class="ct">Erreichbarkeit</div>
|
|
<a class="cl" href="mailto:office@clupilot.com"><span>E-Mail</span><b>office@clupilot.com</b></a>
|
|
<div class="cl"><span>Antwortzeit</span><b>selber Werktag</b></div>
|
|
<div class="cl"><span>Sprache</span><b>Deutsch</b></div>
|
|
<div class="cl"><span>Sitz</span><b>Österreich</b></div>
|
|
<div class="cl"><span>Erstgespräch</span><b>unverbindlich</b></div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<footer>
|
|
<div class="wrap fo">
|
|
<span class="fm">Clu<i>Pilot</i> Cloud</span>
|
|
<span>© {{ date('Y') }} · Österreich</span>
|
|
<span>Ausgabe {{ date('Y-m') }}</span>
|
|
<div class="right">
|
|
<a href="{{ route('legal.impressum') }}">Impressum</a>
|
|
<a href="{{ route('legal.datenschutz') }}">Datenschutz</a>
|
|
<a href="{{ route('legal.agb') }}">AGB</a>
|
|
<a href="{{ route('status') }}">Status</a>
|
|
<a href="{{ route('login') }}">Anmelden</a>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
|
|
@verbatim
|
|
<script>
|
|
const reduce = matchMedia('(prefers-reduced-motion:reduce)').matches;
|
|
const topline = document.getElementById('topline');
|
|
const prog = document.getElementById('prog');
|
|
|
|
addEventListener('scroll', () => {
|
|
topline.classList.toggle('sc', scrollY > 8);
|
|
const h = document.documentElement;
|
|
const max = h.scrollHeight - h.clientHeight;
|
|
prog.style.width = (max > 0 ? (scrollY / max) * 100 : 0) + '%';
|
|
}, { passive: true });
|
|
|
|
// Reveal on entry. Section rules draw themselves in with their heading.
|
|
const io = new IntersectionObserver(es => es.forEach(e => {
|
|
if (!e.isIntersecting) return;
|
|
e.target.classList.add('in');
|
|
io.unobserve(e.target);
|
|
}), { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
|
|
document.querySelectorAll('.rv, .panel, .sechead').forEach(el => io.observe(el));
|
|
|
|
// Counters. Tabular figures are set in CSS, so counting never shifts layout.
|
|
const cio = new IntersectionObserver(es => es.forEach(e => {
|
|
if (!e.isIntersecting) return;
|
|
cio.unobserve(e.target);
|
|
const el = e.target;
|
|
const target = parseFloat(el.dataset.c);
|
|
const decimals = parseInt(el.dataset.d || 0, 10);
|
|
const fmt = v => v.toFixed(decimals).replace('.', ',');
|
|
if (reduce) { el.textContent = fmt(target); return; }
|
|
const t0 = performance.now();
|
|
(function tick(ts) {
|
|
const p = Math.min((ts - t0) / 1200, 1);
|
|
el.textContent = fmt(target * (1 - Math.pow(1 - p, 3)));
|
|
if (p < 1) requestAnimationFrame(tick);
|
|
})(t0);
|
|
}), { threshold: 0.6 });
|
|
document.querySelectorAll('[data-c]').forEach(el => cio.observe(el));
|
|
|
|
// The provisioning log writes itself out, line by line.
|
|
const log = document.getElementById('log');
|
|
if (log) {
|
|
const lio = new IntersectionObserver(es => es.forEach(e => {
|
|
if (!e.isIntersecting) return;
|
|
lio.unobserve(log);
|
|
const lines = log.querySelectorAll('.ll');
|
|
lines.forEach((line, i) => setTimeout(() => line.classList.add('on'), reduce ? 0 : 260 + i * 420));
|
|
setTimeout(() => document.getElementById('logDone').classList.add('on'), reduce ? 0 : 260 + lines.length * 420 + 220);
|
|
}), { threshold: 0.35 });
|
|
lio.observe(log);
|
|
}
|
|
</script>
|
|
@endverbatim
|
|
</body>
|
|
</html>
|