Invario/Key-service-Server
3
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Further Design changes

Browse Source
This commit is contained in:
AIIrondev
2026-11-05 22:52:31 +01:00
parent 4b26f1dbf5
commit 46895979f6
3 changed files with 77 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Website/templates/audience.html
+11
View File
@@ -26,6 +26,17 @@
.audience-button { display: inline-flex; padding: .7rem 1rem; border-radius: 999px; background: #1d6970; color: #fff; font-weight: 800; }
.business .audience-button { background: #d9f29a; color: #183d3a; }
@media (max-width: 700px) { .audience-grid { grid-template-columns: 1fr; } }
/* Neutral, editorial selection instead of two competing brand treatments. */
.audience-page { padding: clamp(1.5rem, 5vw, 4.5rem) 0 2rem; }
.audience-intro { max-width: 760px; margin: 0 auto 2.4rem; }
.audience-intro .eyebrow { color: #6d776f; letter-spacing: .12em; font-size: .78rem; }
.audience-intro h1 { color: #263d3d; font-family: Georgia, "Times New Roman", serif; font-weight: 500; }
.audience-grid { max-width: 980px; margin: 0 auto; gap: 1.25rem; }
.audience-card, .audience-card.business { border-radius: 8px; background: #fffdf8; color: inherit; border-color: #d5dbd3; box-shadow: 0 12px 25px rgba(45, 54, 46, .06); }
.audience-card p { color: #596966; }
.audience-icon, .business .audience-icon { border-radius: 50%; background: #e7eee8; color: #1b6164; }
.business .audience-list li::before { color: #2b8876; }
.audience-button, .business .audience-button { border: 1px solid #1d6970; border-radius: 4px; background: #1d6970; color: #fff; cursor: pointer; }
</style>
{% endblock %}
Website/templates/business.html
+18 -5
View File
@@ -8,8 +8,8 @@
{% block head %}
{{ super() }}
<style>
.business-home { --ink:#102f35; --muted:#557074; --lime:#d9f29a; --teal:#1f696c; }
.business-hero { margin-top:1rem; padding:clamp(1.7rem,5vw,4.6rem); border-radius:28px; color:#fff; background: radial-gradient(circle at 90% 15%, rgba(217,242,154,.25), transparent 28%), linear-gradient(125deg,#0d2930,#1d5e62 68%,#286b67); overflow:hidden; }
.business-home { --ink:#263d3d; --muted:#557074; --lime:#d9e7b0; --teal:#1f696c; }
.business-hero { margin-top:1rem; padding:clamp(1.7rem,5vw,4.6rem); border-radius:10px; color:#fff; background: linear-gradient(125deg,#173b40,#2b6968); overflow:hidden; }
.business-hero .eyebrow { color:var(--lime); font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.business-hero h1 { max-width: 760px; margin:.8rem 0 1rem; font-size:clamp(2.2rem,6vw,5rem); line-height:1.02; letter-spacing:-.04em; }
.business-hero p { max-width:650px; color:#d5e9e6; font-size:clamp(1.05rem,1.5vw,1.25rem); }
@@ -19,15 +19,20 @@
.business-section { margin-top:1.1rem; padding:clamp(1.3rem,3vw,2.2rem); border:1px solid #d5e0dc; border-radius:22px; background:#fff; }
.business-section h2 { color:var(--ink); margin-bottom:.45rem; }
.business-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.8rem; margin-top:1.2rem; }
.business-card { padding:1.1rem; border-radius:15px; background:#f2f7f2; border:1px solid #dbe7dc; }
.business-card { padding:1.1rem; border-radius:8px; background:#f5f7f1; border:1px solid #dbe7dc; }
.business-card strong { display:block; color:var(--teal); margin-bottom:.35rem; font-size:1.08rem; }
.business-proof { display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:stretch; }
.business-proof .highlight { padding:1.5rem; border-radius:18px; color:#fff; background:var(--ink); }
.business-proof .highlight { padding:1.5rem; border-radius:8px; color:#fff; background:var(--ink); }
.business-proof .highlight p { color:#cfe1dd; }
.business-proof ul { margin:1rem 0 0; padding:0; list-style:none; display:grid; gap:.5rem; }
.business-proof li::before { content:"✓"; color:var(--lime); font-weight:800; margin-right:.5rem; }
.business-cta { display:flex; justify-content:space-between; align-items:center; gap:1rem; background:#e9f1e7; }
@media (max-width:780px) { .business-grid,.business-proof { grid-template-columns:1fr; } .business-cta { align-items:flex-start; flex-direction:column; } }
.business-founders { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; align-items:center; }
.business-founder-list { display:flex; gap:1rem; justify-content:flex-end; }
.business-founder { width:150px; padding:.7rem; border:1px solid #d5ddd4; border-radius:8px; background:#fffdf8; text-align:center; }
.business-founder img { width:100%; height:145px; object-fit:contain; object-position:center bottom; border-radius:6px; background:#edf1eb; }
.business-founder p { margin-top:.4rem; font-size:.84rem; color:#2a4d53; }
@media (max-width:780px) { .business-grid,.business-proof,.business-founders { grid-template-columns:1fr; } .business-cta { align-items:flex-start; flex-direction:column; } .business-founder-list { justify-content:flex-start; } }
</style>
{% endblock %}
@@ -66,6 +71,14 @@
<aside class="highlight"><h3>Einfach starten</h3><p>Bestand aufnehmen, QR- oder Barcodes vergeben, Team einladen – und sofort den ersten Auftrag digital vorbereiten.</p></aside>
</section>
<section class="business-section business-founders">
<div><h2>Persönlich entwickelt, direkt begleitet</h2><p>Invario entsteht nicht am Reißbrett. Simon Brieger und Maximilian Gründinger entwickeln die Lösung gemeinsam mit den Menschen, die sie täglich nutzen.</p></div>
<div class="business-founder-list" aria-label="Die Gründer von Invario">
<div class="business-founder"><img src="{{ url_for('static', filename='images/1778441641958.png') }}" alt="Simon Brieger"><p><strong>Simon Brieger</strong><br>Gründer &amp; Geschäftsführer</p></div>
<div class="business-founder"><img src="{{ url_for('static', filename='images/1778441641957.png') }}" alt="Maximilian Gründinger"><p><strong>Maximilian Gründinger</strong><br>Gründer</p></div>
</div>
</section>
<section class="business-section business-cta">
<div><h2>Sehen Sie, was in Ihrem Betrieb möglich ist.</h2><p>Ein kurzes Gespräch genügt für eine konkrete Einschätzung.</p></div>
<a class="business-btn" href="{{ url_for('kontakt') }}">Gespräch vereinbaren</a>
Website/templates/main.html
+48 -8
View File
@@ -354,21 +354,29 @@
.pictures {
margin-top: 1rem;
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 1rem;
grid-template-columns: repeat(2, minmax(0, 260px));
justify-content: center;
gap: 1.5rem;
align-items: stretch;
}
.picture {
text-align: center;
max-width: none;
max-width: 260px;
padding: 1rem;
border: 1px solid #d5ddd4;
border-radius: 12px;
background: #fffdf8;
box-shadow: 0 10px 24px rgba(28, 45, 41, 0.07);
}
.picture img {
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
height: 250px;
object-fit: contain;
object-position: center bottom;
border-radius: 12px;
background: #edf1eb;
display: block;
}
@@ -378,6 +386,38 @@
color: #2a4d53;
}
#gruender {
background: linear-gradient(135deg, #f8f6ee 0%, #edf2eb 100%);
border-color: #cbd6cc;
}
#gruender h2 {
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.hero,
.section,
.testimonials,
.primary-focus,
.contact {
border-radius: 10px;
}
.hero h1,
.section h2,
.testimonials h2,
.contact h2 {
font-family: Georgia, "Times New Roman", serif;
font-weight: 500;
}
.card,
.testimonial-card,
.step {
border-radius: 8px;
}
.testimonials {
margin-top: 2rem;
@@ -925,8 +965,8 @@
</div>
</section>
<section class="section reveal-on-scroll" id="ablauf">
<h2>Unser Team</h2>
<section class="section reveal-on-scroll" id="gruender">
<h2>Die Menschen hinter Invario</h2>
<p>Wir sind zwei ehemalige Schüler, die sich durch ihre Erfahrungen in verschiedenen Schulen mit deren Bedürfnisse vertraut machen konnten. Diese Erfahrungen haben uns dermaßen motiviert – eine einfache Lösung für den Schulalltag zu entwickeln.</p>
<div class="pictures">
<div class="picture">
@@ -941,7 +981,7 @@
</div>
</section>
<section class="section reveal-on-scroll" id="ablauf">
<section class="section reveal-on-scroll" id="zusammenarbeit">
<h2>So verläuft die Zusammenarbeit</h2>
<p>Ein klarer Prozess sorgt für Sicherheit, besonders bei begrenzten Zeitfenstern im Schulbetrieb.</p>
<div class="process" aria-label="Ablauf in fünf Schritten">