Expand homepage positioning and SEO basics

This commit is contained in:
Raffael Sheikh committed 2026-05-24 00:15:35 +02:00
1 parent 39407585f2
commit 574e638ed0
5 files changed
+604 -11

No files matched your search

+195 -7
View File
@@ -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 &amp; 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 &amp; 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 &amp; 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">
+4
View File
@@ -0,0 +1,4 @@
User-agent: *
Allow: /
Sitemap: https://tool-ctrl.de/sitemap.xml
+6
View File
@@ -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 > *",
+18
View File
@@ -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
View File
@@ -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; }
}