Expand homepage positioning and SEO basics
This commit is contained in:
1 parent
39407585f2
commit
574e638ed0
5 files changed
+604
-11
No files matched your search
+195
-7
@@ -5,8 +5,36 @@
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<title>ToolCTRL — Die Software, die eure Branche längst verdient hat</title>
|
||||
<meta name="description" content="ToolCTRL baut moderne, durchdachte All-in-One-Software für Branchen, die zu lange mit veralteten Insellösungen auskommen mussten. Mit Fokus auf Bedienung und Gestaltung." />
|
||||
<link rel="canonical" href="https://tool-ctrl.de/" />
|
||||
<meta property="og:type" content="website" />
|
||||
<meta property="og:locale" content="de_DE" />
|
||||
<meta property="og:site_name" content="ToolCTRL" />
|
||||
<meta property="og:title" content="ToolCTRL — All-in-One-Software für übersehene Branchen" />
|
||||
<meta property="og:description" content="Wir ersetzen Excel, WhatsApp-Chaos und Insellösungen durch Software, die Mitarbeiter wirklich benutzen." />
|
||||
<meta property="og:url" content="https://tool-ctrl.de/" />
|
||||
<meta property="og:image" content="https://tool-ctrl.de/assets/logo-a.png" />
|
||||
<meta name="twitter:card" content="summary_large_image" />
|
||||
<meta name="theme-color" content="#0A0A0A" />
|
||||
<link rel="icon" type="image/png" href="/assets/favicon.png" />
|
||||
<link rel="stylesheet" href="/styles.css?v=20260523" />
|
||||
<link rel="stylesheet" href="/styles.css?v=20260524" />
|
||||
<script type="application/ld+json">
|
||||
{
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Organization",
|
||||
"name": "ToolCTRL",
|
||||
"legalName": "R&D² UG (haftungsbeschränkt)",
|
||||
"url": "https://tool-ctrl.de/",
|
||||
"email": "info@tool-ctrl.de",
|
||||
"address": {
|
||||
"@type": "PostalAddress",
|
||||
"streetAddress": "Orbinstr. 1",
|
||||
"postalCode": "76646",
|
||||
"addressLocality": "Bruchsal",
|
||||
"addressCountry": "DE"
|
||||
},
|
||||
"sameAs": ["https://www.linkedin.com/company/toolctrl/"]
|
||||
}
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
@@ -18,10 +46,11 @@
|
||||
</a>
|
||||
<nav class="nav" aria-label="Hauptnavigation">
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#branchen">Branchen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="#events">Events</a>
|
||||
<a href="/techday">TechDay</a>
|
||||
<a href="/gamejam">GameJam</a>
|
||||
<a class="btn btn-solid btn-sm" href="#kontakt">Kontakt aufnehmen</a>
|
||||
</nav>
|
||||
<button class="nav-toggle" aria-label="Menü" aria-expanded="false">
|
||||
@@ -30,10 +59,11 @@
|
||||
</div>
|
||||
<div class="mobile-nav" hidden>
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#branchen">Branchen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="#events">Events</a>
|
||||
<a href="/techday">TechDay</a>
|
||||
<a href="/gamejam">GameJam</a>
|
||||
<a class="btn btn-solid" href="#kontakt">Kontakt aufnehmen</a>
|
||||
</div>
|
||||
</header>
|
||||
@@ -58,6 +88,11 @@
|
||||
<a class="btn btn-solid" href="#kontakt">Projekt besprechen</a>
|
||||
<a class="btn btn-ghost" href="#leistungen">Leistungen ansehen</a>
|
||||
</div>
|
||||
<div class="trust-strip" aria-label="ToolCTRL Vertrauenssignale">
|
||||
<span>Eigene Server</span>
|
||||
<span>DSGVO-orientiert</span>
|
||||
<span>Direkter Ansprechpartner</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Automatisierung trifft Kontrolle — generisch, kein reales Produkt -->
|
||||
@@ -120,7 +155,7 @@
|
||||
<text x="470" y="297" text-anchor="middle">Report</text>
|
||||
</g>
|
||||
|
||||
<!-- TEST: echtes Logo (Emblem) in der Mitte -->
|
||||
<!-- ToolCTRL-Emblem in der Mitte -->
|
||||
<image class="graph-emblem" href="/assets/emblem-black.svg" x="190" y="128"
|
||||
width="160" height="152" />
|
||||
<g class="flow-ports flow-ports-center" fill="#000000">
|
||||
@@ -139,6 +174,70 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ PRODUKTWIRKUNG ============ -->
|
||||
<section class="section product-section" id="produkt">
|
||||
<div class="wrap product-grid">
|
||||
<div class="product-copy">
|
||||
<span class="eyebrow">Produktwirkung</span>
|
||||
<h2 class="section-title">Nicht noch ein Tool. Ein Betriebssystem für Ihren Ablauf.</h2>
|
||||
<p class="section-intro">
|
||||
Wir übersetzen gewachsene Prozesse in eine Oberfläche, die Teams
|
||||
sofort verstehen: klare Zustände, weniger Rückfragen, automatische
|
||||
Übergaben und ein Ort, an dem Arbeit sichtbar wird.
|
||||
</p>
|
||||
<div class="proof-points" aria-label="Typische Ergebnisse">
|
||||
<div>
|
||||
<strong>1 Oberfläche</strong>
|
||||
<span>statt verstreuter Tabellen, Chats und Ordner</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>0 Medienbrüche</strong>
|
||||
<span>zwischen Anfrage, Bearbeitung und Auswertung</span>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Live-Status</strong>
|
||||
<span>für Teams, Leitung und Kundenkommunikation</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="product-ui" aria-label="Beispielhafte ToolCTRL Oberfläche">
|
||||
<div class="ui-top">
|
||||
<span class="ui-mark">toolctrl</span>
|
||||
<span class="ui-status"><i></i> Live-System</span>
|
||||
</div>
|
||||
<div class="ui-layout">
|
||||
<aside class="ui-sidebar">
|
||||
<span class="ui-nav active">Aufträge</span>
|
||||
<span class="ui-nav">Team</span>
|
||||
<span class="ui-nav">Automationen</span>
|
||||
<span class="ui-nav">Reports</span>
|
||||
</aside>
|
||||
<div class="ui-main">
|
||||
<div class="ui-main-head">
|
||||
<div>
|
||||
<span class="ui-kicker">Heute</span>
|
||||
<strong>Operations Board</strong>
|
||||
</div>
|
||||
<span class="ui-pill">12 offen</span>
|
||||
</div>
|
||||
<div class="ui-metrics">
|
||||
<div><span>Antwortzeit</span><strong>18 min</strong></div>
|
||||
<div><span>Automatisiert</span><strong>74%</strong></div>
|
||||
<div><span>Blocker</span><strong>03</strong></div>
|
||||
</div>
|
||||
<div class="ui-table">
|
||||
<div class="ui-row is-hot"><span>Anfrage qualifizieren</span><b>Jetzt</b></div>
|
||||
<div class="ui-row"><span>Dokumente prüfen</span><b>09:40</b></div>
|
||||
<div class="ui-row"><span>Freigabe einholen</span><b>11:15</b></div>
|
||||
<div class="ui-row is-done"><span>Report versendet</span><b>Erledigt</b></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ LEISTUNGEN ============ -->
|
||||
<section class="section" id="leistungen">
|
||||
<div class="wrap">
|
||||
@@ -195,8 +294,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ BRANCHEN ============ -->
|
||||
<section class="section section-alt" id="branchen">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Branchen</span>
|
||||
<h2 class="section-title">Für Teams, bei denen Standardsoftware nie ganz passt.</h2>
|
||||
<p class="section-intro">
|
||||
ToolCTRL ist interessant, wenn Ihr Ablauf speziell genug ist, dass
|
||||
Baukastenlösungen ständig Workarounds erzwingen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="industry-grid">
|
||||
<article class="industry-card">
|
||||
<span>01</span>
|
||||
<h3>Handwerk & Service</h3>
|
||||
<p>Von Anfrage bis Einsatzplanung: weniger Telefonketten, klare Zuständigkeiten, mobile Rückmeldungen.</p>
|
||||
</article>
|
||||
<article class="industry-card">
|
||||
<span>02</span>
|
||||
<h3>Events & Organisation</h3>
|
||||
<p>Anmeldungen, Teilnehmer, Programm und Kommunikation laufen in einem kontrollierten Ablauf zusammen.</p>
|
||||
</article>
|
||||
<article class="industry-card">
|
||||
<span>03</span>
|
||||
<h3>Vereine & Verbände</h3>
|
||||
<p>Mitglieder, Rollen, Beiträge und Projekte werden verwaltbar, ohne dass Ehrenamt im Tool-Chaos endet.</p>
|
||||
</article>
|
||||
<article class="industry-card">
|
||||
<span>04</span>
|
||||
<h3>Lokale Dienstleister</h3>
|
||||
<p>Leads, Termine, Angebote und Kundenstatus werden sichtbar, statt in Postfächern zu verschwinden.</p>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ VORGEHEN ============ -->
|
||||
<section class="section section-alt" id="vorgehen">
|
||||
<section class="section" id="vorgehen">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Vorgehen</span>
|
||||
@@ -283,6 +419,45 @@
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ EVENTS / COMMUNITY ============ -->
|
||||
<section class="section event-section" id="events">
|
||||
<div class="wrap">
|
||||
<div class="section-head">
|
||||
<span class="eyebrow">Events</span>
|
||||
<h2 class="section-title">Wir bauen nicht im stillen Kämmerlein.</h2>
|
||||
<p class="section-intro">
|
||||
TechDay und GameJam zeigen, wie wir arbeiten: nah an echten
|
||||
Anwendern, lokal verankert und mit sichtbaren Ergebnissen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="event-grid">
|
||||
<article class="event-card event-card-media">
|
||||
<img src="/assets/techday-event.png" alt="TechDay Bruchsal 2026 Motiv" loading="lazy" />
|
||||
<div>
|
||||
<span class="event-label">27. Mai 2026</span>
|
||||
<h3>TechDay Bruchsal</h3>
|
||||
<p>Talks, Workshops und Austausch rund um Technologie in Bruchsal.</p>
|
||||
<a href="/techday">TechDay ansehen</a>
|
||||
</div>
|
||||
</article>
|
||||
<article class="event-card event-card-code">
|
||||
<div class="mini-terminal" aria-hidden="true">
|
||||
<span>AI_GAMEJAM</span>
|
||||
<strong>Human in the Loop</strong>
|
||||
<em>2 Stunden · KI · Spielbar</em>
|
||||
</div>
|
||||
<div>
|
||||
<span class="event-label">TechDay Format</span>
|
||||
<h3>AI GameJam</h3>
|
||||
<p>Ein kompaktes Format, bei dem aus Idee, KI-Unterstützung und menschlicher Steuerung ein spielbares Ergebnis wird.</p>
|
||||
<a href="/gamejam">GameJam ansehen</a>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- ============ KONTAKT ============ -->
|
||||
<section class="section section-dark" id="kontakt">
|
||||
<div class="wrap kontakt-grid">
|
||||
@@ -293,6 +468,11 @@
|
||||
Beschreiben Sie kurz, woran es hakt. Wir melden uns mit einer
|
||||
ehrlichen Einschätzung. Unverbindlich und ohne Verkaufsdruck.
|
||||
</p>
|
||||
<ul class="contact-promises">
|
||||
<li>Antwort in der Regel innerhalb von 24 Stunden</li>
|
||||
<li>Erstgespräch ohne Kosten und ohne Pitch-Deck</li>
|
||||
<li>Klare Einschätzung, auch wenn wir nicht die Richtigen sind</li>
|
||||
</ul>
|
||||
<dl class="contact-list">
|
||||
<div>
|
||||
<dt>E-Mail</dt>
|
||||
@@ -352,14 +532,16 @@
|
||||
<div class="wrap footer-inner">
|
||||
<div class="footer-brand">
|
||||
<img src="/assets/logo-white.svg" alt="ToolCTRL" class="footer-logo" />
|
||||
<p>Die Software, die eure Branche längst verdient hat.</p>
|
||||
<p>Moderne Software, Automatisierung und interne Tools aus Bruchsal.</p>
|
||||
</div>
|
||||
<div class="footer-cols">
|
||||
<div class="footer-col">
|
||||
<span class="footer-h">Navigation</span>
|
||||
<a href="#leistungen">Leistungen</a>
|
||||
<a href="#branchen">Branchen</a>
|
||||
<a href="#vorgehen">Vorgehen</a>
|
||||
<a href="#arbeit">Organisation</a>
|
||||
<a href="#events">Events</a>
|
||||
<a href="/techday">TechDay</a>
|
||||
<a href="/gamejam">GameJam</a>
|
||||
<a href="#kontakt">Kontakt</a>
|
||||
@@ -367,9 +549,15 @@
|
||||
<div class="footer-col">
|
||||
<span class="footer-h">Kontakt</span>
|
||||
<a href="mailto:info@tool-ctrl.de">info@tool-ctrl.de</a>
|
||||
<a href="https://tool-ctrl.de">tool-ctrl.de</a>
|
||||
<span>Orbinstr. 1 · 76646 Bruchsal</span>
|
||||
<a href="https://www.linkedin.com/company/toolctrl/" target="_blank" rel="noopener">LinkedIn</a>
|
||||
</div>
|
||||
<div class="footer-col">
|
||||
<span class="footer-h">Vertrauen</span>
|
||||
<span>Eigene Services</span>
|
||||
<span>SSL-Hosting</span>
|
||||
<span>Verantwortlich: Raffael Sheikh</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrap footer-base">
|
||||
|
||||
@@ -0,0 +1,4 @@
|
||||
User-agent: *
|
||||
Allow: /
|
||||
|
||||
Sitemap: https://tool-ctrl.de/sitemap.xml
|
||||
@@ -42,12 +42,18 @@
|
||||
var revealEls = Array.prototype.slice.call(document.querySelectorAll([
|
||||
".hero-copy > *",
|
||||
".hero-visual",
|
||||
".trust-strip span",
|
||||
".product-copy > *",
|
||||
".product-ui",
|
||||
".section-head",
|
||||
".card",
|
||||
".industry-card",
|
||||
".step",
|
||||
".arbeit-copy > *",
|
||||
".kanban-wrap",
|
||||
".event-card",
|
||||
".kontakt-copy > *",
|
||||
".contact-promises li",
|
||||
".lead-form",
|
||||
".td-hero .wrap > *",
|
||||
".td-feature > *",
|
||||
|
||||
@@ -0,0 +1,18 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
|
||||
<url>
|
||||
<loc>https://tool-ctrl.de/</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://tool-ctrl.de/techday</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://tool-ctrl.de/gamejam</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://tool-ctrl.de/impressum</loc>
|
||||
</url>
|
||||
<url>
|
||||
<loc>https://tool-ctrl.de/datenschutz</loc>
|
||||
</url>
|
||||
</urlset>
|
||||
+381
-4
@@ -26,7 +26,7 @@
|
||||
U+A720-A7FF;
|
||||
}
|
||||
|
||||
/* ---------- TEST: Space Grotesk (Schrift der GameJam-Seite) ---------- */
|
||||
/* ---------- Space Grotesk (Schrift der GameJam-Seite) ---------- */
|
||||
@font-face {
|
||||
font-family: "Space Grotesk";
|
||||
font-style: normal;
|
||||
@@ -79,6 +79,9 @@ img { display: block; max-width: 100%; }
|
||||
|
||||
a { color: inherit; text-decoration: none; }
|
||||
|
||||
h1, h2, h3 { text-wrap: balance; }
|
||||
p, li { text-wrap: pretty; }
|
||||
|
||||
.wrap {
|
||||
width: 100%;
|
||||
max-width: var(--wrap);
|
||||
@@ -163,7 +166,7 @@ a { color: inherit; text-decoration: none; }
|
||||
inset 0 -8px 11px -11px rgba(0,0,0,.9);
|
||||
}
|
||||
|
||||
/* weiße Tastenkappe — TEST: graue Tiefe statt schwarz */
|
||||
/* weiße Tastenkappe — graue Tiefe statt schwarz */
|
||||
.btn-ghost {
|
||||
background: linear-gradient(180deg, #FFFFFF 0%, #F1F1EF 58%, #E5E5E2 100%);
|
||||
color: var(--black);
|
||||
@@ -251,7 +254,7 @@ a { color: inherit; text-decoration: none; }
|
||||
.nav {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 34px;
|
||||
gap: 26px;
|
||||
}
|
||||
.nav > a:not(.btn) {
|
||||
font-size: 14px;
|
||||
@@ -335,6 +338,22 @@ a { color: inherit; text-decoration: none; }
|
||||
gap: 14px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.trust-strip {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 34px;
|
||||
}
|
||||
.trust-strip span {
|
||||
font-size: 11px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
color: var(--gray-1);
|
||||
border: 1px solid var(--line);
|
||||
padding: 7px 10px;
|
||||
background: var(--paper);
|
||||
}
|
||||
.hero-tag {
|
||||
margin-top: 34px;
|
||||
padding-top: 22px;
|
||||
@@ -440,10 +459,201 @@ a { color: inherit; text-decoration: none; }
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
PRODUKTWIRKUNG
|
||||
============================================================ */
|
||||
.product-section {
|
||||
background:
|
||||
linear-gradient(90deg, rgba(10,10,10,.035) 1px, transparent 1px),
|
||||
linear-gradient(rgba(10,10,10,.035) 1px, transparent 1px),
|
||||
var(--paper-2);
|
||||
background-size: 32px 32px;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.product-grid {
|
||||
display: grid;
|
||||
grid-template-columns: .86fr 1.14fr;
|
||||
gap: 64px;
|
||||
align-items: center;
|
||||
}
|
||||
.proof-points {
|
||||
display: grid;
|
||||
gap: 12px;
|
||||
margin-top: 34px;
|
||||
border-top: 1px solid var(--line-strong);
|
||||
}
|
||||
.proof-points div {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
gap: 18px;
|
||||
padding: 16px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.proof-points strong {
|
||||
font-size: 14px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.proof-points span {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1);
|
||||
}
|
||||
.product-ui {
|
||||
border: 1.5px solid var(--black);
|
||||
background: var(--paper);
|
||||
box-shadow: 18px 18px 0 rgba(10,10,10,.08);
|
||||
overflow: hidden;
|
||||
}
|
||||
.ui-top {
|
||||
min-height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
padding: 0 18px;
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
}
|
||||
.ui-mark {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
.ui-status {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 11px;
|
||||
letter-spacing: .1em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-1);
|
||||
font-weight: 700;
|
||||
}
|
||||
.ui-status i {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: var(--black);
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0 0 5px rgba(10,10,10,.08);
|
||||
}
|
||||
.ui-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 150px 1fr;
|
||||
min-height: 420px;
|
||||
}
|
||||
.ui-sidebar {
|
||||
padding: 18px;
|
||||
border-right: 1px solid var(--line);
|
||||
background: #FBFBFA;
|
||||
}
|
||||
.ui-nav {
|
||||
display: block;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
color: var(--gray-1);
|
||||
padding: 11px 10px;
|
||||
border: 1px solid transparent;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.ui-nav.active {
|
||||
color: var(--black);
|
||||
background: var(--paper);
|
||||
border-color: var(--black);
|
||||
box-shadow: 0 3px 0 #D1D1CF;
|
||||
}
|
||||
.ui-main {
|
||||
padding: 24px;
|
||||
}
|
||||
.ui-main-head {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.ui-main-head strong {
|
||||
display: block;
|
||||
font-size: clamp(26px, 3vw, 38px);
|
||||
line-height: 1.04;
|
||||
letter-spacing: -.03em;
|
||||
}
|
||||
.ui-kicker,
|
||||
.event-label {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: .14em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-2);
|
||||
font-weight: 700;
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ui-pill {
|
||||
flex: none;
|
||||
border: 1px solid var(--black);
|
||||
padding: 7px 10px;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
}
|
||||
.ui-metrics {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
border-top: 1px solid var(--line-strong);
|
||||
border-left: 1px solid var(--line-strong);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.ui-metrics div {
|
||||
padding: 16px 14px;
|
||||
border-right: 1px solid var(--line-strong);
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
}
|
||||
.ui-metrics span {
|
||||
display: block;
|
||||
font-size: 11px;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-2);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ui-metrics strong {
|
||||
display: block;
|
||||
font-size: 25px;
|
||||
line-height: 1;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ui-table {
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.ui-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
padding: 14px 0;
|
||||
border-bottom: 1px solid var(--line);
|
||||
font-size: 14px;
|
||||
}
|
||||
.ui-row b {
|
||||
font-size: 12px;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ui-row.is-hot {
|
||||
color: var(--black);
|
||||
font-weight: 700;
|
||||
}
|
||||
.ui-row.is-hot b {
|
||||
color: var(--paper);
|
||||
background: var(--black);
|
||||
padding: 5px 7px;
|
||||
}
|
||||
.ui-row.is-done {
|
||||
color: var(--gray-2);
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
SECTIONS (generic)
|
||||
============================================================ */
|
||||
.section { padding: 100px 0; }
|
||||
section[id] { scroll-margin-top: 92px; }
|
||||
.section-alt { background: var(--paper-2); }
|
||||
.section-head { max-width: 620px; margin-bottom: 56px; }
|
||||
.section-title {
|
||||
@@ -547,6 +757,44 @@ a { color: inherit; text-decoration: none; }
|
||||
color: var(--gray-1);
|
||||
}
|
||||
|
||||
/* ---------- Industries ---------- */
|
||||
.industry-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
border-top: 1px solid var(--line-strong);
|
||||
border-left: 1px solid var(--line-strong);
|
||||
}
|
||||
.industry-card {
|
||||
background: var(--paper);
|
||||
padding: 30px 24px 32px;
|
||||
border-right: 1px solid var(--line-strong);
|
||||
border-bottom: 1px solid var(--line-strong);
|
||||
position: relative;
|
||||
min-height: 260px;
|
||||
transition: background .15s ease, transform .15s cubic-bezier(.2, 0, 0, 1);
|
||||
}
|
||||
.industry-card:hover {
|
||||
background: #FBFBFA;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
.industry-card span {
|
||||
display: inline-block;
|
||||
font-size: 12px;
|
||||
letter-spacing: .12em;
|
||||
font-weight: 800;
|
||||
color: var(--gray-2);
|
||||
margin-bottom: 54px;
|
||||
}
|
||||
.industry-card h3 {
|
||||
font-size: 20px;
|
||||
line-height: 1.15;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.industry-card p {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1);
|
||||
}
|
||||
|
||||
/* ---------- Steps ---------- */
|
||||
.steps {
|
||||
display: grid;
|
||||
@@ -668,6 +916,88 @@ a { color: inherit; text-decoration: none; }
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
EVENTS
|
||||
============================================================ */
|
||||
.event-section {
|
||||
background: var(--paper-2);
|
||||
border-top: 1px solid var(--line);
|
||||
}
|
||||
.event-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 22px;
|
||||
}
|
||||
.event-card {
|
||||
display: grid;
|
||||
grid-template-columns: 210px 1fr;
|
||||
gap: 24px;
|
||||
align-items: center;
|
||||
background: var(--paper);
|
||||
border: 1.5px solid var(--black);
|
||||
padding: 22px;
|
||||
min-height: 250px;
|
||||
transition: transform .15s cubic-bezier(.2, 0, 0, 1), box-shadow .15s ease;
|
||||
}
|
||||
.event-card:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 14px 24px -22px rgba(0,0,0,.55);
|
||||
}
|
||||
.event-card img {
|
||||
width: 100%;
|
||||
aspect-ratio: 1 / 1;
|
||||
object-fit: contain;
|
||||
background: var(--paper);
|
||||
border: 1px solid rgba(10,10,10,.16);
|
||||
}
|
||||
.event-card h3 {
|
||||
font-size: 24px;
|
||||
line-height: 1.12;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.event-card p {
|
||||
font-size: 14px;
|
||||
color: var(--gray-1);
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
.event-card a {
|
||||
font-size: 13px;
|
||||
font-weight: 800;
|
||||
letter-spacing: .08em;
|
||||
text-transform: uppercase;
|
||||
border-bottom: 1.5px solid var(--black);
|
||||
}
|
||||
.mini-terminal {
|
||||
aspect-ratio: 1 / 1;
|
||||
border: 1.5px solid var(--black);
|
||||
background:
|
||||
linear-gradient(90deg, rgba(10,10,10,.06) 1px, transparent 1px),
|
||||
linear-gradient(rgba(10,10,10,.06) 1px, transparent 1px),
|
||||
var(--paper);
|
||||
background-size: 22px 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.mini-terminal span,
|
||||
.mini-terminal em {
|
||||
font-style: normal;
|
||||
font-size: 10px;
|
||||
letter-spacing: .16em;
|
||||
text-transform: uppercase;
|
||||
color: var(--gray-2);
|
||||
font-weight: 800;
|
||||
}
|
||||
.mini-terminal strong {
|
||||
display: block;
|
||||
font-size: 24px;
|
||||
line-height: .98;
|
||||
letter-spacing: -.03em;
|
||||
text-transform: uppercase;
|
||||
margin: 14px 0;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
KONTAKT
|
||||
============================================================ */
|
||||
@@ -682,6 +1012,27 @@ a { color: inherit; text-decoration: none; }
|
||||
align-items: start;
|
||||
}
|
||||
.section-dark .section-intro { color: #A6A6A6; }
|
||||
.contact-promises {
|
||||
list-style: none;
|
||||
margin-top: 30px;
|
||||
border-top: 1px solid #2B2B2B;
|
||||
}
|
||||
.contact-promises li {
|
||||
position: relative;
|
||||
padding: 13px 0 13px 26px;
|
||||
border-bottom: 1px solid #2B2B2B;
|
||||
font-size: 14px;
|
||||
color: #DADADA;
|
||||
}
|
||||
.contact-promises li::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 22px;
|
||||
width: 12px;
|
||||
height: 1.5px;
|
||||
background: var(--paper);
|
||||
}
|
||||
.contact-list {
|
||||
margin-top: 34px;
|
||||
border-top: 1px solid #2B2B2B;
|
||||
@@ -804,7 +1155,7 @@ a { color: inherit; text-decoration: none; }
|
||||
}
|
||||
.footer-cols {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
gap: 32px;
|
||||
}
|
||||
.footer-col { display: flex; flex-direction: column; gap: 12px; }
|
||||
@@ -820,6 +1171,10 @@ a { color: inherit; text-decoration: none; }
|
||||
font-size: 14px;
|
||||
color: #D4D4D4;
|
||||
}
|
||||
.footer-col span:not(.footer-h) {
|
||||
font-size: 14px;
|
||||
color: #D4D4D4;
|
||||
}
|
||||
.footer-col a:hover { color: var(--paper); }
|
||||
.footer-base {
|
||||
display: flex;
|
||||
@@ -844,11 +1199,14 @@ a { color: inherit; text-decoration: none; }
|
||||
animation: mobileMenuIn .18s cubic-bezier(.2, 0, 0, 1);
|
||||
}
|
||||
.hero-grid { grid-template-columns: 1fr; gap: 48px; padding: 140px 32px 72px; }
|
||||
.product-grid { grid-template-columns: 1fr; gap: 44px; }
|
||||
.cards { grid-template-columns: 1fr 1fr; }
|
||||
.industry-grid { grid-template-columns: 1fr 1fr; }
|
||||
.steps { grid-template-columns: 1fr 1fr; }
|
||||
.step:nth-child(2) { border-right: none; }
|
||||
.step:nth-child(1), .step:nth-child(2) { border-bottom: 1px solid var(--line); }
|
||||
.arbeit-grid { grid-template-columns: 1fr; gap: 44px; }
|
||||
.event-grid { grid-template-columns: 1fr; }
|
||||
.kontakt-grid { grid-template-columns: 1fr; gap: 44px; }
|
||||
.footer-inner { grid-template-columns: 1fr; gap: 36px; }
|
||||
}
|
||||
@@ -859,8 +1217,24 @@ a { color: inherit; text-decoration: none; }
|
||||
.section { padding: 64px 0; }
|
||||
.section-head { margin-bottom: 36px; }
|
||||
.hero-actions .btn { flex: 1 1 auto; }
|
||||
.trust-strip span { flex: 1 1 100%; }
|
||||
.proof-points div { grid-template-columns: 1fr; gap: 4px; }
|
||||
.product-ui { box-shadow: 10px 10px 0 rgba(10,10,10,.08); }
|
||||
.ui-layout { grid-template-columns: 1fr; min-height: 0; }
|
||||
.ui-sidebar {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 8px;
|
||||
border-right: none;
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
.ui-nav { margin-bottom: 0; }
|
||||
.ui-metrics { grid-template-columns: 1fr; }
|
||||
.cards { grid-template-columns: 1fr; }
|
||||
.card { border-right: 1px solid var(--line-strong); }
|
||||
.industry-grid { grid-template-columns: 1fr; }
|
||||
.industry-card { min-height: auto; }
|
||||
.industry-card span { margin-bottom: 34px; }
|
||||
.steps { grid-template-columns: 1fr; }
|
||||
.step { border-right: none; border-bottom: 1px solid var(--line); }
|
||||
.step:last-child { border-bottom: none; }
|
||||
@@ -868,6 +1242,9 @@ a { color: inherit; text-decoration: none; }
|
||||
.form-foot { flex-direction: column; align-items: stretch; gap: 14px; }
|
||||
.form-foot .btn { width: 100%; }
|
||||
.lead-form { padding: 26px 22px; }
|
||||
.event-card { grid-template-columns: 1fr; }
|
||||
.event-card img,
|
||||
.mini-terminal { aspect-ratio: 16 / 10; }
|
||||
.footer-cols { grid-template-columns: 1fr; }
|
||||
.footer-base { flex-direction: column; gap: 8px; }
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user