Refactor website templates for improved clarity and user experience
- Updated titles and content in kontakt.html to better reflect services for schools. - Enhanced styling in main.html for a more modern look and feel. - Changed project descriptions in projekte.html to focus on practical examples from schools. - Revised team.html to emphasize the structured approach and values of the team.
This commit is contained in:
+73
-71
@@ -1,32 +1,32 @@
|
||||
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=yes">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
|
||||
<title>{% block title %}IT Lösungen{% endblock %}</title>
|
||||
<title>{% block title %}Digitale Schulverwaltung{% endblock %}</title>
|
||||
{% block head %}
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com">
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600&display=swap" rel="stylesheet">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Public+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
:root {
|
||||
--bg-main: #f5f8fa;
|
||||
--bg-soft: #e8eef2;
|
||||
--bg-main: #f3f1ea;
|
||||
--bg-soft: #e4e0d4;
|
||||
--surface: #ffffff;
|
||||
--text-main: #112332;
|
||||
--text-soft: #466176;
|
||||
--line: #d8e1e8;
|
||||
--brand: #0a4c74;
|
||||
--brand-strong: #073754;
|
||||
--accent: #f28c28;
|
||||
--text-main: #1f2e33;
|
||||
--text-soft: #495d63;
|
||||
--line: #d0d7d0;
|
||||
--brand: #1c5a63;
|
||||
--brand-strong: #143f46;
|
||||
--accent: #b3672e;
|
||||
--radius-md: 14px;
|
||||
--shadow-sm: 0 10px 30px rgba(17, 35, 50, 0.08);
|
||||
--shadow-sm: 0 10px 30px rgba(18, 40, 44, 0.08);
|
||||
--shell-gutter: clamp(12px, 2.2vw, 34px);
|
||||
--shell-max-width: 100vw;
|
||||
--shell-max-width: 1240px;
|
||||
}
|
||||
* { box-sizing: border-box; }
|
||||
|
||||
@@ -35,10 +35,10 @@
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
min-height: 100%;
|
||||
font-family: "Source Sans 3", system-ui, sans-serif;
|
||||
font-family: "Public Sans", system-ui, sans-serif;
|
||||
color: var(--text-main);
|
||||
background: radial-gradient(circle at 85% -10%, #c5d8e5 0%, transparent 35%),
|
||||
radial-gradient(circle at -10% 50%, #dce8ef 0%, transparent 42%),
|
||||
background: radial-gradient(circle at 88% -8%, #dbe4d9 0%, transparent 34%),
|
||||
radial-gradient(circle at -5% 58%, #ece4d2 0%, transparent 40%),
|
||||
var(--bg-main);
|
||||
}
|
||||
|
||||
@@ -50,37 +50,37 @@
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
line-height: 1.08;
|
||||
font-size: clamp(1.75rem, 4.5vw, 4.2rem);
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
line-height: 1.16;
|
||||
font-size: clamp(1.85rem, 4vw, 3.5rem);
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
line-height: 1.08;
|
||||
font-size: clamp(1.4rem, 3.2vw, 3rem);
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
line-height: 1.2;
|
||||
font-size: clamp(1.5rem, 3vw, 2.5rem);
|
||||
}
|
||||
|
||||
h3 {
|
||||
margin: 0;
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
line-height: 1.08;
|
||||
font-size: clamp(1.1rem, 2.5vw, 2rem);
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
line-height: 1.24;
|
||||
font-size: clamp(1.2rem, 2vw, 1.8rem);
|
||||
}
|
||||
|
||||
h4 {
|
||||
margin: 0;
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
line-height: 1.08;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
line-height: 1.24;
|
||||
font-size: clamp(1rem, 1.8vw, 1.5rem);
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.55;
|
||||
line-height: 1.6;
|
||||
color: var(--text-soft);
|
||||
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
|
||||
font-size: clamp(1rem, 1.15vw, 1.12rem);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -102,13 +102,13 @@
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
backdrop-filter: blur(10px);
|
||||
background: rgba(245, 248, 250, 0.86);
|
||||
backdrop-filter: blur(12px);
|
||||
background: rgba(245, 242, 234, 0.9);
|
||||
border-bottom: 1px solid var(--line);
|
||||
}
|
||||
|
||||
.site-nav-inner {
|
||||
min-height: 78px;
|
||||
min-height: 82px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -116,20 +116,20 @@
|
||||
}
|
||||
|
||||
.brand {
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Merriweather", Georgia, serif;
|
||||
font-size: 1.15rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.03em;
|
||||
color: var(--brand-strong);
|
||||
}
|
||||
|
||||
.nav-links {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
gap: 1.1rem;
|
||||
font-weight: 600;
|
||||
color: var(--text-soft);
|
||||
font-size: 0.98rem;
|
||||
}
|
||||
|
||||
.nav-links a:hover {
|
||||
@@ -139,7 +139,7 @@
|
||||
.nav-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.6rem;
|
||||
gap: 0.65rem;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
@@ -148,21 +148,22 @@
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #bcd0de;
|
||||
padding: 0.48rem 0.95rem;
|
||||
padding: 0.52rem 0.98rem;
|
||||
font-weight: 700;
|
||||
color: #0e425f;
|
||||
color: #1b4b52;
|
||||
background: #ffffff;
|
||||
transition: transform 0.15s ease;
|
||||
transition: transform 0.15s ease, box-shadow 0.15s ease;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 6px 16px rgba(20, 53, 58, 0.12);
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
color: #ffffff;
|
||||
border-color: #0a4c74;
|
||||
background: linear-gradient(120deg, #0b5b89 0%, #0b4262 100%);
|
||||
border-color: #184f57;
|
||||
background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
|
||||
}
|
||||
|
||||
.nav-dropdown {
|
||||
@@ -182,7 +183,7 @@
|
||||
content: "▾";
|
||||
margin-left: 0.45rem;
|
||||
font-size: 0.72rem;
|
||||
color: #57798f;
|
||||
color: #5f747a;
|
||||
}
|
||||
|
||||
.nav-dropdown[open] > summary::after {
|
||||
@@ -196,9 +197,9 @@
|
||||
min-width: 220px;
|
||||
padding: 0.5rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #ccdae5;
|
||||
border: 1px solid #ccd4cc;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 12px 24px rgba(16, 44, 62, 0.15);
|
||||
box-shadow: 0 12px 24px rgba(26, 45, 48, 0.14);
|
||||
display: grid;
|
||||
gap: 0.35rem;
|
||||
z-index: 40;
|
||||
@@ -208,16 +209,16 @@
|
||||
padding: 0.5rem 0.65rem;
|
||||
border-radius: 8px;
|
||||
font-weight: 600;
|
||||
color: #1a4865;
|
||||
color: #214f55;
|
||||
}
|
||||
|
||||
.dropdown-menu a:hover {
|
||||
background: #f3f8fc;
|
||||
background: #f2f6f3;
|
||||
}
|
||||
|
||||
.main-wrap {
|
||||
flex: 1 0 auto;
|
||||
padding: 2rem 0 3.4rem;
|
||||
padding: 2.2rem 0 3.5rem;
|
||||
}
|
||||
|
||||
.flashes {
|
||||
@@ -245,10 +246,10 @@
|
||||
bottom: 1rem;
|
||||
transform: translateX(-50%);
|
||||
width: min(900px, calc(100% - 1.5rem));
|
||||
border: 1px solid #c0d4e2;
|
||||
border: 1px solid #c6d0c7;
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
box-shadow: 0 16px 32px rgba(16, 44, 62, 0.2);
|
||||
box-shadow: 0 16px 32px rgba(26, 45, 48, 0.2);
|
||||
padding: 0.95rem;
|
||||
z-index: 70;
|
||||
display: flex;
|
||||
@@ -260,12 +261,12 @@
|
||||
|
||||
.cookie-banner p {
|
||||
margin: 0;
|
||||
color: #274f68;
|
||||
color: #315055;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.cookie-banner a {
|
||||
color: #0c537c;
|
||||
color: #1b5b62;
|
||||
text-decoration: underline;
|
||||
font-weight: 700;
|
||||
}
|
||||
@@ -278,9 +279,9 @@
|
||||
}
|
||||
|
||||
.cookie-btn {
|
||||
border: 1px solid #0a4c74;
|
||||
border: 1px solid #1c5a63;
|
||||
border-radius: 999px;
|
||||
background: linear-gradient(120deg, #0b5b89 0%, #0b4262 100%);
|
||||
background: linear-gradient(120deg, #286f78 0%, #194f56 100%);
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
padding: 0.45rem 0.85rem;
|
||||
@@ -288,9 +289,9 @@
|
||||
}
|
||||
|
||||
.cookie-btn.secondary {
|
||||
border-color: #c9d9e4;
|
||||
border-color: #ccd5cc;
|
||||
background: #ffffff;
|
||||
color: #2b536b;
|
||||
color: #315055;
|
||||
}
|
||||
|
||||
.cookie-banner.hidden {
|
||||
@@ -351,17 +352,17 @@
|
||||
<body>
|
||||
<nav class="site-nav">
|
||||
<div class="site-shell site-nav-inner">
|
||||
<a class="brand" href="{{ url_for('default') }}">Invario</a>
|
||||
<a class="brand" href="{{ url_for('default') }}">Invario Schule</a>
|
||||
<div class="nav-links" aria-label="Main Navigation">
|
||||
<a href="{{ url_for('dienstleistungen') }}">Dienstleistungen</a>
|
||||
<a href="{{ url_for('projekte') }}">Projekte</a>
|
||||
<a href="{{ url_for('team') }}">Team</a>
|
||||
<a href="{{ url_for('dienstleistungen') }}">Leistungen fuer Schulen</a>
|
||||
<a href="{{ url_for('projekte') }}">Praxisbeispiele</a>
|
||||
<a href="{{ url_for('team') }}">Unser Ansatz</a>
|
||||
<a href="{{ url_for('kontakt') }}">Kontakt</a>
|
||||
<a href="{{ url_for('inventarsystem') }}">Unser Produkt</a>
|
||||
<a href="{{ url_for('inventarsystem') }}">Inventarsystem</a>
|
||||
</div>
|
||||
<div class="nav-actions">
|
||||
{% if 'username' in session %}
|
||||
<a class="nav-btn" href="{{ url_for('appointments') }}">Termin anfragen</a>
|
||||
<a class="nav-btn" href="{{ url_for('appointments') }}">Beratungstermin</a>
|
||||
|
||||
<details class="nav-dropdown">
|
||||
<summary class="nav-btn">Nutzerbereich</summary>
|
||||
@@ -391,7 +392,7 @@
|
||||
|
||||
<a class="nav-btn" href="{{ url_for('logout') }}">Logout</a>
|
||||
{% else %}
|
||||
<a class="nav-btn" href="{{ url_for('blog') }}">Blog</a>
|
||||
<a class="nav-btn" href="{{ url_for('blog') }}">Neuigkeiten</a>
|
||||
<a class="nav-btn" href="{{ url_for('login') }}">Login</a>
|
||||
<a class="nav-btn primary" href="{{ url_for('register') }}">Registrieren</a>
|
||||
{% endif %}
|
||||
@@ -415,15 +416,16 @@
|
||||
<div class="footer-content">
|
||||
<div class="footer-section">
|
||||
<h4>Über uns</h4>
|
||||
<p>Wir bieten professionelle IT-Lösungen für Ihre Inventur.</p>
|
||||
<p>Digitale Verwaltungsablaeufe fuer Schulsekretariate und Schulleitungen in Deutschland.</p>
|
||||
</div>
|
||||
<div class="footer-section">
|
||||
<h4>Schnelllinks</h4>
|
||||
<ul class="footer-links">
|
||||
<li><a href="{{ url_for('default') }}">Startseite</a></li>
|
||||
<li><a href="{{ url_for('blog') }}">Blog</a></li>
|
||||
<li><a href="{{ url_for('default') }}">Start</a></li>
|
||||
<li><a href="{{ url_for('dienstleistungen') }}">Leistungsuebersicht</a></li>
|
||||
<li><a href="{{ url_for('blog') }}">Neuigkeiten</a></li>
|
||||
{% if 'username' in session %}
|
||||
<li><a href="{{ url_for('appointments') }}">Termine</a></li>
|
||||
<li><a href="{{ url_for('appointments') }}">Beratungstermine</a></li>
|
||||
{% endif %}
|
||||
</ul>
|
||||
</div>
|
||||
@@ -442,7 +444,7 @@
|
||||
</div>
|
||||
<style>
|
||||
.site-footer {
|
||||
background: linear-gradient(135deg, var(--brand-strong) 0%, #0a4c74 100%);
|
||||
background: linear-gradient(135deg, var(--brand-strong) 0%, #1c5a63 100%);
|
||||
color: #ffffff;
|
||||
margin-top: auto;
|
||||
padding: 3rem 0 1.5rem;
|
||||
@@ -523,9 +525,9 @@
|
||||
</style>
|
||||
</footer>
|
||||
<div class="cookie-banner hidden" id="cookieBanner" role="dialog" aria-live="polite" aria-label="Cookie Hinweis">
|
||||
<p>Wir verwenden Cookies, um die Website sicher und benutzerfreundlich zu betreiben. Mit "Accept Cookies" stimmen Sie der Nutzung zu. Details in <a href="{{ url_for('datenschutz') }}">Datenschutz</a>.</p>
|
||||
<p>Wir verwenden Cookies, um die Website sicher und benutzerfreundlich zu betreiben. Mit "Cookies akzeptieren" stimmen Sie der Nutzung zu. Details in <a href="{{ url_for('datenschutz') }}">Datenschutz</a>.</p>
|
||||
<div class="cookie-actions">
|
||||
<button type="button" class="cookie-btn" id="cookieAcceptBtn">Accept Cookies</button>
|
||||
<button type="button" class="cookie-btn" id="cookieAcceptBtn">Cookies akzeptieren</button>
|
||||
<button type="button" class="cookie-btn secondary" id="cookieDeclineBtn">Ablehnen und zu Ecosia</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -1,44 +1,51 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Dienstleistungen | Invario{% endblock %}
|
||||
{% block title %}Leistungen fuer Schulen | Invario{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Unsere Dienstleistungen</h1>
|
||||
<p>Praxisnahe IT-Lösungen für Schulen mit klaren Prozessen, direkter Betreuung und zuverlässiger Umsetzung.</p>
|
||||
<h1>Leistungen fuer Schulsekretariat und Schulleitung</h1>
|
||||
<p>Praxisnahe Module fuer Schulen in Deutschland: verstaendlich, sicher und ohne unnoetige Komplexitaet.</p>
|
||||
</section>
|
||||
|
||||
<section class="cards">
|
||||
<article class="card">
|
||||
<h2>Inventarsystem</h2>
|
||||
<p>Strukturierte Verwaltung von Geräten, Zubehör und Standorten mit nachvollziehbaren Zuständigkeiten und sauberer Historie.</p>
|
||||
<h2>Digitale Inventarverwaltung</h2>
|
||||
<p>Alle Geraete, Raeume und Zustaendigkeiten an einem Ort. So finden Sie Informationen schneller und reduzieren Rueckfragen.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Lizenzverwaltung</h2>
|
||||
<p>Zentrale Übersicht über aktive, pausierte und abgelaufene Lizenzen inklusive Laufzeiten, Zuständen und Übergaben.</p>
|
||||
<h2>Lizenz- und Fristenkontrolle</h2>
|
||||
<p>Lizenzlaufzeiten werden transparent angezeigt, inklusive Hinweise auf bald ablaufende Nutzungen.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>24/7 Support</h2>
|
||||
<p>Schnelle Reaktionszeiten bei Störungen, klare Eskalationspfade und direkte Hilfe bei betriebskritischen Themen.</p>
|
||||
<h2>Support mit klaren Prioritaeten</h2>
|
||||
<p>Stoerungen werden strukturiert aufgenommen, priorisiert und mit nachvollziehbarem Status bearbeitet.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Beratung</h2>
|
||||
<p>Strategische und technische Beratung für Schulträger und Schulleitungen von der Planung bis zum laufenden Betrieb.</p>
|
||||
<h2>DSGVO-konforme Dokumentation</h2>
|
||||
<p>Vorgaenge und Aenderungen bleiben nachvollziehbar dokumentiert, damit Pruefungen und Abstimmungen einfacher werden.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Sicherheitskonzepte</h2>
|
||||
<p>DSGVO-konforme Abläufe, Zugriffsrollen und dokumentierte Sicherheitsstandards für sensible Schuldaten.</p>
|
||||
<h2>Einrichtung und Schulung</h2>
|
||||
<p>Wir richten das System gemeinsam mit Ihrem Team ein und schulen in klaren, alltagsnahen Schritten.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h2>Einführung & Schulung</h2>
|
||||
<p>Geordnete Einführung im Team, kurze Lernkurve und praxisorientierte Schulung für Verwaltung und Kollegium.</p>
|
||||
<h2>Begleitung im laufenden Betrieb</h2>
|
||||
<p>Feste Ansprechpartner unterstuetzen Ihr Team bei Fragen, Erweiterungen und organisatorischen Anpassungen.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="highlight">
|
||||
<h2>Besonders geeignet fuer Teams mit wenig Zeit</h2>
|
||||
<p>Die Oberflaeche ist bewusst reduziert aufgebaut: grosse, klare Bedienelemente, eindeutige Bezeichnungen und kurze Klickwege fuer taegliche Verwaltungsaufgaben.</p>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
|
||||
.card { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
|
||||
.card h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
|
||||
.card { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 26px rgba(25, 45, 41, 0.04); }
|
||||
.card h2 { color: #24525a; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.highlight { margin-top: 1rem; background: linear-gradient(135deg, #f8f4eb 0%, #eef3eb 100%); border: 1px solid #d4dbd2; border-radius: 14px; padding: 1.1rem; }
|
||||
.highlight h2 { color: #2a4d53; margin-bottom: 0.4rem; font-size: clamp(1.1rem, 2.2vw, 1.55rem); }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,110 +1,80 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Inventarsystem | Funktionsübersicht & Module{% endblock %}
|
||||
{% block title %}Inventarsystem fuer Schulen | Uebersicht{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Funktionsmodule: Inventarsystem</h1>
|
||||
<p>Detaillierte Übersicht der technischen Kernkomponenten und der systemseitigen Datenverarbeitung.</p>
|
||||
<h1>Inventarsystem fuer Schulen</h1>
|
||||
<p>Alle wichtigen Funktionen fuer den Schulalltag in einer klaren Oberflaeche: von Inventar ueber Lizenzen bis zur nachvollziehbaren Historie.</p>
|
||||
</section>
|
||||
|
||||
<section class="split">
|
||||
<article class="panel">
|
||||
<h2>Digitale Objektverwaltung</h2>
|
||||
<div class="image-placeholder">
|
||||
<span>[Screenshot: Asset-Detailansicht mit technischen Spezifikationen und Dateianhängen]</span>
|
||||
</div>
|
||||
<p>Das Modul zur Verwaltung einzelner Assets bildet die Basis der Datenbank und erlaubt eine granulare Datenerfassung.</p>
|
||||
<h2>1. Bestand einfach pflegen</h2>
|
||||
<p>Jedes Geraet erhaelt eine eindeutige Akte mit Standort, Status, Kaufdaten und zustaendiger Person.</p>
|
||||
<ul>
|
||||
<li><strong>Datenfelder:</strong> Erfassung von Seriennummern, Modellbezeichnungen, Kaufdatum und Anschaffungswerten.</li>
|
||||
<li><strong>Dokumenten-Ablage:</strong> Direkte Verknüpfung von PDF-Rechnungen, Handbüchern oder Garantiescheinen mit dem Objekt.</li>
|
||||
<li><strong>Zustands-Tracking:</strong> Systemseitige Kategorisierung in Zustände wie "Einsatzbereit", "Defekt" oder "In Reparatur".</li>
|
||||
<li>Suche nach Seriennummer, Raum oder Geraetetyp</li>
|
||||
<li>Einheitliche Datenfelder fuer alle Standorte</li>
|
||||
<li>Schnelle Erfassung neuer Geraete</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="panel">
|
||||
<h2>Hierarchische Standort-Logik</h2>
|
||||
<div class="image-placeholder">
|
||||
<span>[Grafik: Strukturbaum der Standorte – Gebäude, Stockwerk, Raum]</span>
|
||||
</div>
|
||||
<p>Die Standortverwaltung ermöglicht eine präzise physische Verortung jedes Inventargegenstands im System.</p>
|
||||
<h2>2. Standorte nachvollziehbar verwalten</h2>
|
||||
<p>Raeume, Etagen und Gebaeude werden klar strukturiert, damit jederzeit ersichtlich ist, wo sich ein Geraet befindet.</p>
|
||||
<ul>
|
||||
<li><strong>Mehrstufige Baumstruktur:</strong> Definition von Hauptstandorten, Unterräumen und spezifischen Lagerplätzen (z.B. Schranknummer).</li>
|
||||
<li><strong>Massen-Transfer:</strong> Funktion zum gleichzeitigen Verschieben mehrerer Assets zwischen verschiedenen Standorten.</li>
|
||||
<li><strong>Raum-Inventur:</strong> Exportierbare Checklisten pro Raum für den schnellen Abgleich vor Ort.</li>
|
||||
<li>Uebersicht je Raum oder Fachbereich</li>
|
||||
<li>Sammelverschiebung mehrerer Geraete</li>
|
||||
<li>Einfacher Abgleich bei Inventurterminen</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="split" style="margin-top:0.9rem;">
|
||||
<article class="panel">
|
||||
<h2>QR-Code & Mobil-Schnittstelle</h2>
|
||||
<div class="image-placeholder">
|
||||
<span>[Screenshot: Mobile Ansicht des Scanners und generierte QR-Code Labels]</span>
|
||||
</div>
|
||||
<p>Das System integriert eine Schnittstelle für die physische Identifikation via Scan-Verfahren.</p>
|
||||
<h2>3. QR-Code Unterstuetzung</h2>
|
||||
<p>Mit QR-Codes lassen sich Geraete vor Ort direkt identifizieren und aktualisieren.</p>
|
||||
<ul>
|
||||
<li><strong>Automatisierte Label-Generierung:</strong> Erstellung von druckfertigen QR-Codes direkt aus der Datenbank.</li>
|
||||
<li><strong>Direkt-Aktionen:</strong> Beim Scannen öffnet das System sofort die Objektakte für Statusänderungen oder Wartungseinträge.</li>
|
||||
<li><strong>Hardware-Unabhängigkeit:</strong> Unterstützung gängiger USB-Handscanner sowie der Kamerafunktion von Mobilgeräten.</li>
|
||||
<li>Labels direkt aus dem System erzeugen</li>
|
||||
<li>Scannen und sofort zur richtigen Akte springen</li>
|
||||
<li>Nutzbar mit Handscanner oder Smartphone-Kamera</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="panel">
|
||||
<h2>Transaktions- & Leihhistorie</h2>
|
||||
<div class="image-placeholder">
|
||||
<span>[Grafik: Zeitstrahl eines Assets von Anschaffung bis Aussonderung]</span>
|
||||
</div>
|
||||
<p>Jede Änderung am Status oder Standort eines Objekts wird als unveränderbarer Datensatz gespeichert.</p>
|
||||
<h2>4. Historie und Verantwortung</h2>
|
||||
<p>Aenderungen bleiben dokumentiert, damit Entscheidungen und Vorgaenge transparent bleiben.</p>
|
||||
<ul>
|
||||
<li><strong>Leihvorgänge:</strong> Dokumentation von Ausgabe- und Rückgabedaten inklusive Zuweisung zu Personen-IDs.</li>
|
||||
<li><strong>Fristenverwaltung:</strong> Systemseitige Überwachung von Rückgabedaten mit automatischer Kennzeichnung überfälliger Assets.</li>
|
||||
<li><strong>Audit-Logging:</strong> Lückenloser Nachweis über alle Systemzugriffe und Datenänderungen (Wer hat was wann geändert?).</li>
|
||||
<li>Wer hat wann was geaendert</li>
|
||||
<li>Leihvorgaenge und Rueckgaben nachvollziehen</li>
|
||||
<li>Klare Nachweise fuer interne Abstimmungen</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="panel" style="margin-top:0.9rem;">
|
||||
<h2>Benutzerrollen & Datenschnittstellen</h2>
|
||||
<div class="image-placeholder" style="height: 120px;">
|
||||
<span>[Diagramm: Rollenbasiertes Zugriffskonzept (RBAC) und Export-Workflow]</span>
|
||||
</div>
|
||||
<p>Die Administration erfolgt über ein differenziertes Berechtigungssystem zur Steuerung der Datenintegrität.</p>
|
||||
<ul style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
|
||||
<li><strong>Rollenmanagement:</strong> Trennung zwischen Administratoren (Vollzugriff), Technikern (Wartungsrechte) und Lese-Accounts.</li>
|
||||
<li><strong>Export-Modul:</strong> Datenausgabe in Formaten wie CSV, JSON oder Excel für externe Revisionen.</li>
|
||||
<li><strong>Sicherheits-Protokolle:</strong> Verschlüsselte Speicherung und passwortgeschützte Zugriffsebenen.</li>
|
||||
<li><strong>API-Anbindung:</strong> Vorbereitete Endpunkte für die Synchronisation mit anderen Datenbank-Systemen.</li>
|
||||
<h2>5. Rollen, Rechte und Exporte</h2>
|
||||
<p>Das System unterscheidet klar zwischen Verwaltung, Schulleitung und technischen Rollen.</p>
|
||||
<ul class="wide-list">
|
||||
<li><strong>Rollenbasiert:</strong> Nur relevante Funktionen pro Nutzergruppe sichtbar.</li>
|
||||
<li><strong>Datenschutzgerecht:</strong> Zugriff und Aenderungen werden protokolliert.</li>
|
||||
<li><strong>Exportierbar:</strong> Berichte und Bestandslisten koennen fuer Termine und Pruefungen ausgegeben werden.</li>
|
||||
<li><strong>Erweiterbar:</strong> Das System waechst mit Ihren organisatorischen Anforderungen.</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
/* Konsistente Stile für die Funktionspräsentation */
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
|
||||
.panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1.2rem; }
|
||||
.panel h2 { color: #0f334b; margin-bottom: 0.6rem; font-size: 1.25rem; }
|
||||
.panel p { color: #466176; line-height: 1.5; margin-bottom: 1rem; font-size: 0.95rem; }
|
||||
.panel ul { margin: 0; padding-left: 1.2rem; color: #466176; display: grid; gap: 0.5rem; }
|
||||
.panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1.15rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
|
||||
.panel h2 { color: #265057; margin-bottom: 0.5rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.panel p { color: #496267; line-height: 1.55; margin-bottom: 0.8rem; font-size: 0.98rem; }
|
||||
.panel ul { margin: 0; padding-left: 1.15rem; color: #496267; display: grid; gap: 0.45rem; }
|
||||
.wide-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; }
|
||||
|
||||
.image-placeholder {
|
||||
background: #f8fafc;
|
||||
border: 2px dashed #cbd5e1;
|
||||
border-radius: 10px;
|
||||
height: 160px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: #94a3b8;
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
margin-bottom: 1rem;
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 900px) {
|
||||
.split { grid-template-columns: 1fr; }
|
||||
.panel ul { grid-template-columns: 1fr !important; }
|
||||
@media (max-width: 900px) {
|
||||
.split { grid-template-columns: 1fr; }
|
||||
.wide-list { grid-template-columns: 1fr; }
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,33 +1,35 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Kontakt | Invario{% endblock %}
|
||||
{% block title %}Kontakt fuer Schulen | Invario{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Kontakt</h1>
|
||||
<p>Sie erreichen uns schnell über E-Mail oder Telefon. Für eine strukturierte Anfrage empfehlen wir die Terminbuchung.</p>
|
||||
<p>Wir beantworten Anfragen aus Schulsekretariat und Schulleitung schnell und klar. Fuer neue Projekte empfehlen wir einen kurzen Beratungstermin.</p>
|
||||
</section>
|
||||
|
||||
<section class="contact-grid">
|
||||
<article class="contact-card">
|
||||
<h2>Info</h2>
|
||||
<p><strong>Info E-Mail:</strong> info@invario.de</p>
|
||||
<p><strong>Telefonnummer:</strong> +49 (0) 123 / 456789</p>
|
||||
<h2>Allgemeine Anfrage</h2>
|
||||
<p><strong>E-Mail:</strong> info@invario.de</p>
|
||||
<p><strong>Telefon:</strong> +49 (0) 123 / 456789</p>
|
||||
<p>Geeignet fuer organisatorische Fragen, Erstkontakt und allgemeine Informationen.</p>
|
||||
</article>
|
||||
|
||||
<article class="contact-card">
|
||||
<h2>Support</h2>
|
||||
<p><strong>Support E-Mail:</strong> support@invario.de</p>
|
||||
<p><strong>Support Telefonnummer:</strong> +49 (0) 123 / 456790</p>
|
||||
<p><strong>E-Mail:</strong> support@invario.de</p>
|
||||
<p><strong>Telefon:</strong> +49 (0) 123 / 456790</p>
|
||||
<p>Bei laufendem Betrieb, stoerenden Fehlern oder dringenden Rueckfragen im Schulalltag.</p>
|
||||
</article>
|
||||
|
||||
<article class="contact-card">
|
||||
<h2>Terminbuchung</h2>
|
||||
<p>Für Erstgespräche, Rückfragen und Projektanfragen buchen Sie direkt einen Termin.</p>
|
||||
<h2>Beratungstermin</h2>
|
||||
<p>In 30 Minuten besprechen wir Ihre aktuelle Situation und priorisieren sinnvolle erste Schritte fuer Ihre Schule.</p>
|
||||
{% if 'username' in session %}
|
||||
<a class="btn" href="{{ url_for('appointments') }}">Zur Terminbuchung</a>
|
||||
<a class="btn" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
|
||||
{% else %}
|
||||
<a class="btn" href="{{ url_for('login') }}">Login zur Terminbuchung</a>
|
||||
<a class="btn" href="{{ url_for('login') }}">Login fuer Terminbuchung</a>
|
||||
{% endif %}
|
||||
</article>
|
||||
</section>
|
||||
@@ -35,8 +37,8 @@
|
||||
<style>
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.contact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
|
||||
.contact-card { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
|
||||
.contact-card h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
|
||||
.btn { margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #0a4c74; background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%); color: #fff; padding: 0.52rem 0.92rem; font-weight: 700; }
|
||||
.contact-card { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
|
||||
.contact-card h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.btn { margin-top: 0.5rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; border: 1px solid #1d5a63; background: linear-gradient(120deg, #296f78 0%, #1a5057 100%); color: #fff; padding: 0.54rem 0.92rem; font-weight: 700; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
+154
-256
@@ -1,67 +1,68 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Inventarlösungen{% endblock %}
|
||||
{% block title %}Digitale Schulverwaltung fuer Sekretariat und Schulleitung{% endblock %}
|
||||
|
||||
{% block head %}
|
||||
{{ super() }}
|
||||
<style>
|
||||
.hero {
|
||||
margin-top: 1.2rem;
|
||||
padding: 3.8rem;
|
||||
border-radius: 24px;
|
||||
background: linear-gradient(135deg, #f8fcff 0%, #e1ecf3 70%, #d4e3ed 100%);
|
||||
border: 1px solid #cfdbe4;
|
||||
margin-top: 1rem;
|
||||
padding: 3.2rem;
|
||||
border-radius: 22px;
|
||||
background: linear-gradient(130deg, #f8f5ee 0%, #ece7d9 60%, #e0eadf 100%);
|
||||
border: 1px solid #cfd6cd;
|
||||
display: grid;
|
||||
grid-template-columns: 1.2fr 1fr;
|
||||
gap: 2rem;
|
||||
grid-template-columns: 1.15fr 0.85fr;
|
||||
gap: 1.6rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 25px 55px rgba(17, 35, 50, 0.1);
|
||||
box-shadow: 0 24px 46px rgba(28, 45, 41, 0.08);
|
||||
}
|
||||
|
||||
.hero::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: -80px;
|
||||
bottom: -90px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
right: -60px;
|
||||
bottom: -70px;
|
||||
width: 220px;
|
||||
height: 220px;
|
||||
border-radius: 999px;
|
||||
background: radial-gradient(circle at center, #0b5b89 0%, #0b5b89 40%, transparent 70%);
|
||||
background: radial-gradient(circle at center, #b3672e 0%, #b3672e 44%, transparent 72%);
|
||||
opacity: 0.12;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.eyebrow {
|
||||
display: inline-block;
|
||||
margin-bottom: 0.85rem;
|
||||
padding: 0.3rem 0.65rem;
|
||||
margin-bottom: 0.9rem;
|
||||
padding: 0.34rem 0.72rem;
|
||||
border-radius: 999px;
|
||||
font-size: clamp(0.7rem, 0.9vw, 0.85rem);
|
||||
font-size: clamp(0.76rem, 0.9vw, 0.88rem);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.08em;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
color: #0c4f78;
|
||||
background: #d9ebf6;
|
||||
color: #1f5158;
|
||||
background: #dbe8e5;
|
||||
}
|
||||
|
||||
.hero h1 {
|
||||
font-size: clamp(2rem, 5.5vw, 4rem);
|
||||
color: #06293e;
|
||||
font-size: clamp(2rem, 4.8vw, 3.6rem);
|
||||
color: #21363b;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
.hero p {
|
||||
max-width: 56ch;
|
||||
margin-top: 1.1rem;
|
||||
font-size: clamp(0.95rem, 1.4vw, 1.2rem);
|
||||
max-width: 60ch;
|
||||
margin-top: 1rem;
|
||||
font-size: clamp(1.03rem, 1.3vw, 1.18rem);
|
||||
color: #4f666c;
|
||||
}
|
||||
|
||||
.cta-row {
|
||||
margin-top: 1.8rem;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.75rem;
|
||||
gap: 0.72rem;
|
||||
}
|
||||
|
||||
.btn {
|
||||
@@ -70,8 +71,9 @@
|
||||
justify-content: center;
|
||||
border-radius: 999px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.68rem 1.15rem;
|
||||
padding: 0.7rem 1.2rem;
|
||||
font-weight: 700;
|
||||
font-size: 0.97rem;
|
||||
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
||||
}
|
||||
|
||||
@@ -81,179 +83,168 @@
|
||||
|
||||
.btn-primary {
|
||||
color: #ffffff;
|
||||
background: linear-gradient(120deg, #0c5a86 0%, #08486c 100%);
|
||||
box-shadow: 0 8px 20px rgba(11, 87, 128, 0.26);
|
||||
background: linear-gradient(120deg, #296f78 0%, #1a5057 100%);
|
||||
box-shadow: 0 8px 18px rgba(25, 71, 77, 0.24);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
color: #0d4567;
|
||||
color: #24525a;
|
||||
background: #ffffff;
|
||||
border-color: #b8cddc;
|
||||
border-color: #bcc9c0;
|
||||
}
|
||||
|
||||
.hero-card {
|
||||
align-self: end;
|
||||
background: #0e2f44;
|
||||
color: #dcf0ff;
|
||||
border-radius: 18px;
|
||||
background: #1f4e55;
|
||||
color: #e4f2f1;
|
||||
border-radius: 16px;
|
||||
padding: 1.2rem;
|
||||
border: 1px solid #194b68;
|
||||
border: 1px solid #3a6970;
|
||||
}
|
||||
|
||||
.hero-card h3 {
|
||||
font-size: clamp(1rem, 2vw, 1.4rem);
|
||||
margin-bottom: 0.6rem;
|
||||
font-size: clamp(1rem, 1.8vw, 1.35rem);
|
||||
margin-bottom: 0.55rem;
|
||||
}
|
||||
|
||||
.hero-card p {
|
||||
color: #b6d6ea;
|
||||
font-size: clamp(0.9rem, 1.1vw, 1.05rem);
|
||||
color: #c7dfde;
|
||||
font-size: clamp(0.92rem, 1.05vw, 1.03rem);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.stats {
|
||||
margin-top: 1rem;
|
||||
margin-top: 0.95rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.55rem;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.stats div {
|
||||
padding: 0.55rem 0.65rem;
|
||||
border-radius: 12px;
|
||||
background: #153a52;
|
||||
border: 1px solid #2a5673;
|
||||
padding: 0.55rem 0.62rem;
|
||||
border-radius: 10px;
|
||||
background: #285e66;
|
||||
border: 1px solid #4a7c82;
|
||||
}
|
||||
|
||||
.stats strong {
|
||||
display: block;
|
||||
font-family: "Space Grotesk", system-ui, sans-serif;
|
||||
color: #ffffff;
|
||||
font-size: 1.08rem;
|
||||
font-size: 1.06rem;
|
||||
}
|
||||
|
||||
.stats span {
|
||||
color: #9ec5dc;
|
||||
font-size: 0.8rem;
|
||||
color: #d1e8e6;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin-top: 2.2rem;
|
||||
padding: 2rem;
|
||||
margin-top: 2rem;
|
||||
padding: 1.9rem;
|
||||
border-radius: 18px;
|
||||
border: 1px solid #d4dde5;
|
||||
border: 1px solid #d0d7cf;
|
||||
background: #ffffff;
|
||||
box-shadow: 0 15px 35px rgba(20, 40, 55, 0.05);
|
||||
animation: rise 700ms ease both;
|
||||
box-shadow: 0 14px 30px rgba(28, 45, 41, 0.05);
|
||||
animation: rise 680ms ease both;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
font-size: clamp(1.5rem, 3.2vw, 2.8rem);
|
||||
margin-bottom: 0.5rem;
|
||||
color: #0f334b;
|
||||
font-size: clamp(1.45rem, 3vw, 2.3rem);
|
||||
margin-bottom: 0.4rem;
|
||||
color: #21393e;
|
||||
}
|
||||
|
||||
.section-grid {
|
||||
margin-top: 1.1rem;
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
gap: 0.9rem;
|
||||
gap: 0.8rem;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 1rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #d9e2ea;
|
||||
background: linear-gradient(160deg, #fbfdff 0%, #f4f8fb 100%);
|
||||
border: 1px solid #dae1d8;
|
||||
background: linear-gradient(165deg, #fcfcf8 0%, #f4f6ef 100%);
|
||||
}
|
||||
|
||||
.card h3 {
|
||||
font-size: clamp(1rem, 1.8vw, 1.3rem);
|
||||
color: #113c58;
|
||||
margin-bottom: 0.45rem;
|
||||
font-size: clamp(1.04rem, 1.5vw, 1.25rem);
|
||||
color: #275058;
|
||||
margin-bottom: 0.35rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
font-size: clamp(0.9rem, 1.1vw, 1rem);
|
||||
font-size: clamp(0.95rem, 1vw, 1.02rem);
|
||||
}
|
||||
|
||||
.project-list {
|
||||
margin-top: 1.1rem;
|
||||
.routine-list {
|
||||
margin-top: 1rem;
|
||||
display: grid;
|
||||
gap: 0.8rem;
|
||||
gap: 0.7rem;
|
||||
}
|
||||
|
||||
.project {
|
||||
padding: 0.95rem 1rem;
|
||||
border-radius: 14px;
|
||||
border: 1px solid #cfdae4;
|
||||
background: #f8fbfd;
|
||||
.routine {
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #d2d9d1;
|
||||
background: #f8f7f1;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.project b {
|
||||
.routine b {
|
||||
display: block;
|
||||
color: #0b3753;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: clamp(1rem, 1.5vw, 1.15rem);
|
||||
color: #2a4d53;
|
||||
margin-bottom: 0.18rem;
|
||||
font-size: clamp(1rem, 1.2vw, 1.1rem);
|
||||
}
|
||||
|
||||
.project span {
|
||||
font-size: clamp(0.8rem, 0.95vw, 0.95rem);
|
||||
color: #4a6579;
|
||||
border: 1px solid #bfd0dd;
|
||||
.routine span {
|
||||
font-size: 0.86rem;
|
||||
color: #5c716f;
|
||||
border: 1px solid #c5cec5;
|
||||
padding: 0.2rem 0.55rem;
|
||||
border-radius: 999px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.process {
|
||||
margin-top: 1.2rem;
|
||||
margin-top: 1.05rem;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, minmax(0, 1fr));
|
||||
grid-template-columns: repeat(5, minmax(0, 1fr));
|
||||
gap: 0.6rem;
|
||||
}
|
||||
|
||||
.step {
|
||||
padding: 0.8rem 0.65rem;
|
||||
padding: 0.78rem 0.65rem;
|
||||
text-align: center;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #ccdae5;
|
||||
background: #f7fafc;
|
||||
border: 1px solid #d0d8d0;
|
||||
background: #f4f6f2;
|
||||
}
|
||||
|
||||
.step strong {
|
||||
display: block;
|
||||
margin-bottom: 0.2rem;
|
||||
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
|
||||
color: #0f3650;
|
||||
font-size: clamp(0.9rem, 1.1vw, 1rem);
|
||||
color: #284a50;
|
||||
}
|
||||
|
||||
.step small {
|
||||
color: #5f7b8f;
|
||||
font-size: clamp(0.8rem, 0.9vw, 0.95rem);
|
||||
}
|
||||
|
||||
.team-note {
|
||||
margin-top: 0.85rem;
|
||||
padding: 0.9rem 1rem;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #f0c18b;
|
||||
background: linear-gradient(120deg, #fffaf3 0%, #ffeed8 100%);
|
||||
color: #7d4f14;
|
||||
font-weight: 600;
|
||||
color: #617572;
|
||||
font-size: clamp(0.8rem, 0.86vw, 0.9rem);
|
||||
}
|
||||
|
||||
.contact {
|
||||
margin-top: 2rem;
|
||||
border-radius: 20px;
|
||||
padding: 2.3rem;
|
||||
border: 1px solid #0f496f;
|
||||
background: linear-gradient(120deg, #114e75 0%, #0a3d5c 100%);
|
||||
color: #d2ebfa;
|
||||
padding: 2rem;
|
||||
border: 1px solid #2a636b;
|
||||
background: linear-gradient(120deg, #245a61 0%, #1b484f 100%);
|
||||
color: #d8ecea;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
@@ -262,93 +253,25 @@
|
||||
|
||||
.contact h2 {
|
||||
color: #ffffff;
|
||||
font-size: clamp(1.4rem, 3.2vw, 2.8rem);
|
||||
font-size: clamp(1.35rem, 3vw, 2.2rem);
|
||||
margin-bottom: 0.4rem;
|
||||
}
|
||||
|
||||
.contact p {
|
||||
color: #b9d8ec;
|
||||
font-size: clamp(0.95rem, 1.2vw, 1.1rem);
|
||||
color: #c7e0de;
|
||||
font-size: clamp(0.95rem, 1.05vw, 1.08rem);
|
||||
}
|
||||
|
||||
.contact .btn-secondary {
|
||||
border-color: rgba(255, 255, 255, 0.35);
|
||||
border-color: rgba(255, 255, 255, 0.45);
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
margin-top: 2rem;
|
||||
padding: 1rem 0 0.3rem;
|
||||
color: #6a8192;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
|
||||
.partnership {
|
||||
margin-top: 2.2rem;
|
||||
padding: 2.5rem;
|
||||
border-radius: 18px;
|
||||
background: linear-gradient(135deg, #f0f7fc 0%, #e6effa 100%);
|
||||
border: 2px solid var(--brand);
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1.2fr;
|
||||
gap: 2rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.partnership-icon {
|
||||
font-size: clamp(4rem, 8vw, 6rem);
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.partnership-content h3 {
|
||||
font-size: clamp(1.3rem, 2.5vw, 1.8rem);
|
||||
color: var(--brand);
|
||||
margin-bottom: 0.8rem;
|
||||
}
|
||||
|
||||
.partnership-content p {
|
||||
margin-bottom: 0.8rem;
|
||||
color: var(--text-soft);
|
||||
font-size: clamp(0.95rem, 1.1vw, 1.05rem);
|
||||
}
|
||||
|
||||
.partnership-badges {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.6rem;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
|
||||
.badge {
|
||||
display: inline-block;
|
||||
padding: 0.4rem 0.85rem;
|
||||
border-radius: 999px;
|
||||
background: var(--brand);
|
||||
color: #ffffff;
|
||||
font-size: clamp(0.8rem, 0.95vw, 0.95rem);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@media (max-width: 700px) {
|
||||
.partnership {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 1.8rem;
|
||||
}
|
||||
|
||||
.partnership-icon {
|
||||
font-size: clamp(3rem, 6vw, 4rem);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes rise {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(16px);
|
||||
transform: translateY(14px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
@@ -359,7 +282,7 @@
|
||||
@media (max-width: 980px) {
|
||||
.hero {
|
||||
grid-template-columns: 1fr;
|
||||
padding: 2rem;
|
||||
padding: 2.1rem;
|
||||
}
|
||||
|
||||
.section-grid {
|
||||
@@ -376,7 +299,7 @@
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.project {
|
||||
.routine {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
@@ -388,12 +311,7 @@
|
||||
.contact {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: 1.55rem;
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
flex-direction: column;
|
||||
padding-bottom: 1.2rem;
|
||||
padding: 1.5rem;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -402,120 +320,100 @@
|
||||
{% block content %}
|
||||
<section class="hero" id="top">
|
||||
<div>
|
||||
<span class="eyebrow">IT Lösungen mit Haltung</span>
|
||||
<h1>Zuhören. Verstehen. Planen. Realisieren.</h1>
|
||||
<span class="eyebrow">Fuer Schulsekretariat und Schulleitung</span>
|
||||
<h1>Mehr Ruhe im Schulalltag durch klare digitale Verwaltung.</h1>
|
||||
<p>
|
||||
Wir sind spezialisiert auf Schulen aller Art und machen Schulinventur endlich einfach: Unser DSGVO-konformes Inventarsystem sorgt für klare Ordnung, volle Transparenz und schnelle Abläufe im Schulalltag. Jede Lösung wird individuell für Ihre Einrichtung entwickelt, mit passgenauen Features und einer besonders schnellen, unkomplizierten Inbetriebnahme.
|
||||
Invario unterstützt Schulen in Deutschland dabei, Inventar, Lizenzen und Anfragen nachvollziehbar zu organisieren. Die Bedienung ist bewusst einfach gehalten, damit auch Teams ohne IT-Spezialisierung schnell und sicher arbeiten koennen.
|
||||
</p>
|
||||
<div class="cta-row">
|
||||
{% if 'username' in session %}
|
||||
<a class="btn btn-primary" href="{{ url_for('appointments') }}">Termin anfragen</a>
|
||||
<a class="btn btn-primary" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
|
||||
{% else %}
|
||||
<a class="btn btn-primary" href="{{ url_for('login') }}">Termin anfragen</a>
|
||||
<a class="btn btn-primary" href="{{ url_for('login') }}">Beratungstermin buchen</a>
|
||||
{% endif %}
|
||||
<a class="btn btn-primary" href="{{ url_for('kontakt') }}">Kontakt aufnehmen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Dienstleistungen ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('dienstleistungen') }}">Leistungen ansehen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('kontakt') }}">Direkt kontaktieren</a>
|
||||
</div>
|
||||
</div>
|
||||
<aside class="hero-card" aria-label="Kurzfakten">
|
||||
<h3>Inventur mit Verstand</h3>
|
||||
<p>
|
||||
Von Infrastruktur bis Governance: Wir verbinden konzeptionelle Tiefe mit
|
||||
pragmatischer Umsetzung im Tagesgeschäft.
|
||||
</p>
|
||||
<aside class="hero-card" aria-label="Kurzfakten fuer Schulen">
|
||||
<h3>Was Schulen besonders schaetzen</h3>
|
||||
<p>Klare Ablaeufe, feste Ansprechpartner und verstaendliche Oberflaechen fuer den taeglichen Einsatz.</p>
|
||||
<div class="stats">
|
||||
<div><strong>25+</strong><span>aktive Mandate</span></div>
|
||||
<div><strong>98%</strong><span>Zieltermine erreicht</span></div>
|
||||
<div><strong>24/7</strong><span>Servicebereit</span></div>
|
||||
<div><strong>5 Min</strong><span>Einstieg pro Aufgabe</span></div>
|
||||
<div><strong>1 Klick</strong><span>Status und Historie</span></div>
|
||||
<div><strong>DSGVO</strong><span>Konform dokumentiert</span></div>
|
||||
</div>
|
||||
</aside>
|
||||
</section>
|
||||
|
||||
<section class="partnership" id="entwicklung">
|
||||
<div class="partnership-icon">🤝</div>
|
||||
<div class="partnership-content">
|
||||
<h3>Entwickelt mit Schulen – für Schulen</h3>
|
||||
<p>
|
||||
Unser Inventarsystem wurde nicht theoretisch konzipiert, sondern in enger Zusammenarbeit mit einzelnen Schulen entwickelt. Wir verstehen die täglichen Herausforderungen im Schulbetrieb und entwickeln Lösungen, die wirklich einen Vorteil für den Schulalltag bringen.
|
||||
</p>
|
||||
<div class="partnership-badges">
|
||||
<span class="badge">✓ Schulgetestet</span>
|
||||
<span class="badge">✓ Praxisorientiert</span>
|
||||
<span class="badge">✓ DSGVO-konform</span>
|
||||
<span class="badge">✓ Einfach zu bedienen</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="leistungen" style="animation-delay: 100ms;">
|
||||
<h2>Leistungsbereiche</h2>
|
||||
<p>Klare Gliederung in Konnektivität, Inventarverwaltung und laufenden Betrieb.</p>
|
||||
<section class="section" id="nutzen" style="animation-delay: 100ms;">
|
||||
<h2>Was Ihr Sekretariat sofort entlastet</h2>
|
||||
<p>Alle Informationen sind gebuendelt, Vorgaenge sind standardisiert, und Rueckfragen lassen sich schneller beantworten.</p>
|
||||
<div class="section-grid">
|
||||
<article class="card">
|
||||
<h3>Konnektivität und Netzwerk</h3>
|
||||
<p>Stabile Anbindung Ihrer Schulstandorte, saubere Netzstruktur und sichere Erreichbarkeit aller relevanten Systeme.</p>
|
||||
<h3>Inventar auf einen Blick</h3>
|
||||
<p>Geraete, Standorte und Zustaendigkeiten sind zentral erfasst. Das reduziert Suchzeiten und doppelte Rueckfragen.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Inventar und Lizenzmanagement</h3>
|
||||
<p>Zentrale Verwaltung von Geräten und Lizenzen mit schneller Übersicht, nachvollziehbaren Prozessen und klaren Zuständigkeiten.</p>
|
||||
<h3>Lizenzfristen im Blick</h3>
|
||||
<p>Auslaufende Lizenzen werden rechtzeitig sichtbar, damit keine Unterrichtsausfaelle durch fehlende Software entstehen.</p>
|
||||
</article>
|
||||
<article class="card">
|
||||
<h3>Support, Updates und Beratung</h3>
|
||||
<p>Persönliche Ansprechpartner, kurze Reaktionszeiten und planbare Updates für einen zuverlässigen Betrieb im Schulalltag.</p>
|
||||
<h3>Verstaendliche Prozesse</h3>
|
||||
<p>Statt technischer Fachsprache sehen Sie klare Schritte und eindeutige Statusmeldungen fuer jede Aufgabe.</p>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="projekte" style="animation-delay: 180ms;">
|
||||
<h2>Sicherheit</h2>
|
||||
<p>Wir legen großen Wert auf die Sicherheit Ihrer Daten und Systeme. Die Daten liegen ausschließlich gesichert bei ihnen auf dem Server und wird in keinem Fall an dritte weitergegeben.</p>
|
||||
<div class="project-list">
|
||||
<div class="project">
|
||||
<section class="section" id="alltag" style="animation-delay: 180ms;">
|
||||
<h2>Typische Situationen aus dem Schulalltag</h2>
|
||||
<p>Die folgenden Beispiele zeigen, wie die Plattform bei wiederkehrenden Verwaltungsaufgaben hilft.</p>
|
||||
<div class="routine-list">
|
||||
<div class="routine">
|
||||
<div>
|
||||
<b>DSGVO</b>
|
||||
Alle Daten werden DSGVO-konform verarbeitet, mit klaren Einwilligungen, transparenter Dokumentation und sicheren Löschprozessen.
|
||||
<b>Neues Geraet kommt an</b>
|
||||
Seriennummer, Raum und Ansprechpartner werden in wenigen Schritten eingetragen und sind sofort nachvollziehbar.
|
||||
</div>
|
||||
<span>Netzwerk</span>
|
||||
<span>Inventar</span>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="routine">
|
||||
<div>
|
||||
<b>Sicherheitsprüfungen</b>
|
||||
Automatisierte Sicherheitsprüfungen und klare Compliance-Standards für den Einsatz im öffentlichen Bereich. Alle an uns herangetragene Fehler werden umgehend behoben und mit einem transparenten Prozess dokumentiert.
|
||||
<b>Rueckfrage der Schulleitung</b>
|
||||
Status zu Bestellung, Nutzung oder Defekt ist direkt sichtbar, ohne mehrere Listen durchsuchen zu muessen.
|
||||
</div>
|
||||
<span>Security</span>
|
||||
<span>Transparenz</span>
|
||||
</div>
|
||||
<div class="project">
|
||||
<div class="routine">
|
||||
<div>
|
||||
<b>Betrieb und Updates</b>
|
||||
Regelmäßige Updates, schnelle Störungsbehebung und laufende Optimierung sorgen für einen dauerhaft stabilen Schulbetrieb.
|
||||
<b>Supportfall im Unterricht</b>
|
||||
Tickets werden dokumentiert und priorisiert. Das Team sieht jederzeit, wer bereits daran arbeitet.
|
||||
</div>
|
||||
<span>Updates</span>
|
||||
<span>Support</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="section" id="team" style="animation-delay: 260ms;">
|
||||
<h2>Zusammenarbeit</h2>
|
||||
<p>Strukturiert, nachvollziehbar und mit festen Ansprechpartnern von der Analyse bis zum Betrieb.</p>
|
||||
<div class="process" aria-label="Prozessschritte">
|
||||
<div class="step"><strong>Zuhören</strong><small>Anforderungen erfassen</small></div>
|
||||
<div class="step"><strong>Verstehen</strong><small>Kontext analysieren</small></div>
|
||||
<div class="step"><strong>Besprechen</strong><small>Optionen priorisieren</small></div>
|
||||
<div class="step"><strong>Planen</strong><small>Roadmap festlegen</small></div>
|
||||
<div class="step"><strong>Realisieren</strong><small>Lösung liefern</small></div>
|
||||
<div class="step"><strong>Unterstützen</strong><small>Betrieb absichern</small></div>
|
||||
<section class="section" id="ablauf" style="animation-delay: 260ms;">
|
||||
<h2>So verlaeuft die Zusammenarbeit</h2>
|
||||
<p>Ein klarer Prozess sorgt fuer Sicherheit, besonders bei begrenzten Zeitfenstern im Schulbetrieb.</p>
|
||||
<div class="process" aria-label="Ablauf in fuenf Schritten">
|
||||
<div class="step"><strong>1. Kennenlernen</strong><small>Ziele klären</small></div>
|
||||
<div class="step"><strong>2. Struktur</strong><small>Bestehende Abläufe erfassen</small></div>
|
||||
<div class="step"><strong>3. Einrichtung</strong><small>System passgenau einstellen</small></div>
|
||||
<div class="step"><strong>4. Schulung</strong><small>Praxisnah einführen</small></div>
|
||||
<div class="step"><strong>5. Betrieb</strong><small>Persoenlich begleiten</small></div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="contact" id="kontakt">
|
||||
<div>
|
||||
<h2>Bereit für das nächste IT-Projekt?</h2>
|
||||
<p>In einem kurzen Erstgespräch klären wir gemeinsam Zielbild, Risiken und realistische Umsetzungsschritte. Erstellen Sie dafür einfach ein Konto über den Button oben rechts und buchen Sie anschließend über die Kalenderfunktion einen Termin mit Ihrem Schulnamen und dem Betreff „Erstgespräch“. Alternativ können Sie uns jederzeit per E-Mail kontaktieren oder unseren Website-Chat nutzen.</p>
|
||||
<h2>Sie moechten den Verwaltungsaufwand spuerbar reduzieren?</h2>
|
||||
<p>In einem kurzen Gespraech klaeren wir gemeinsam, welche Prozesse in Ihrem Sekretariat zuerst vereinfacht werden sollten. Auf Wunsch erhalten Sie danach einen konkreten Einfuehrungsplan fuer Ihre Schule.</p>
|
||||
</div>
|
||||
{% if 'username' in session %}
|
||||
<a class="btn btn-secondary" href="{{ url_for('appointments') }}">Termin anfragen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('appointments') }}">Beratungstermin buchen</a>
|
||||
{% else %}
|
||||
<a class="btn btn-secondary" href="{{ url_for('login') }}">Termin anfragen</a>
|
||||
<a class="btn btn-secondary" href="{{ url_for('login') }}">Beratungstermin buchen</a>
|
||||
{% endif %}
|
||||
</section>
|
||||
{% endblock %}
|
||||
|
||||
@@ -1,51 +1,50 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Projekte | Invario{% endblock %}
|
||||
{% block title %}Praxisbeispiele | Invario{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Projekte und Kunden</h1>
|
||||
<p>Einblick in aktuelle und vergangene Zusammenarbeit mit Schulen und Bildungsträgern.</p>
|
||||
<h1>Praxisbeispiele aus dem Schulalltag</h1>
|
||||
<p>So setzen Schulen unsere Loesung ein, um Verwaltungsaufwand zu reduzieren und Ablaeufe transparent zu machen.</p>
|
||||
</section>
|
||||
|
||||
<section class="split">
|
||||
<article class="panel">
|
||||
<h2>Aktuelle Projekte</h2>
|
||||
<h2>Beispiel 1: Gymnasium mit 1.100 Schuelern</h2>
|
||||
<ul>
|
||||
<li><strong>Schulverbund Nord:</strong> Rollout Inventarsystem für 12 Standorte, inklusive Gerätehistorie und Lizenzmonitoring.</li>
|
||||
<li><strong>Berufskolleg West:</strong> Einführung zentraler Termin- und Supportprozesse mit Admin-Dashboard.</li>
|
||||
<li><strong>Gymnasium am Park:</strong> Migration von Altbeständen und strukturierte Rechtevergabe für Fachbereiche.</li>
|
||||
<li><strong>Ausgangslage:</strong> Inventardaten lagen in mehreren Excel-Listen und Papierordnern.</li>
|
||||
<li><strong>Umsetzung:</strong> Zentralisierung von Geraeten, Raeumen und Verantwortlichkeiten in einer Plattform.</li>
|
||||
<li><strong>Ergebnis:</strong> Rueckfragen aus Schulleitung und Fachbereichen werden deutlich schneller beantwortet.</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="panel">
|
||||
<h2>Aktuelle Kunden</h2>
|
||||
<h2>Beispiel 2: Verbundschule mit mehreren Standorten</h2>
|
||||
<ul>
|
||||
<li>Städtischer Schulträger Musterstadt</li>
|
||||
<li>Campus Bildung Rhein-Main</li>
|
||||
<li>Verbundschule Süd</li>
|
||||
<li>Fachoberschule Technikzentrum</li>
|
||||
<li><strong>Ausgangslage:</strong> Unterschiedliche Ablaeufe je Standort, keine gemeinsame Fristenuebersicht.</li>
|
||||
<li><strong>Umsetzung:</strong> Einheitliche Prozesse fuer Inventar, Lizenzen und Supporttickets.</li>
|
||||
<li><strong>Ergebnis:</strong> Standortuebergreifende Transparenz und bessere Planbarkeit im Sekretariat.</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="split" style="margin-top:0.9rem;">
|
||||
<article class="panel">
|
||||
<h2>Vergangene Projekte</h2>
|
||||
<h2>Beispiel 3: Berufskolleg mit Fokus IT-Raeume</h2>
|
||||
<ul>
|
||||
<li><strong>Realschule Mitte:</strong> Digitalisierung der Inventurabläufe und Schulung des Verwaltungsteams.</li>
|
||||
<li><strong>Bildungswerk Ost:</strong> Aufbau eines Lizenz- und Rechnungsworkflows mit Dokumentenablage.</li>
|
||||
<li><strong>Campus Linden:</strong> Sicherheitsreview und Stabilisierung der laufenden IT-Prozesse.</li>
|
||||
<li><strong>Ausgangslage:</strong> Hohe Anzahl technischer Geraete mit haeufigen Aenderungen.</li>
|
||||
<li><strong>Umsetzung:</strong> QR-gestuetzte Bestandsfuehrung und klare Historie je Geraet.</li>
|
||||
<li><strong>Ergebnis:</strong> Schnellere Inventur und weniger Fehler bei Standort- oder Statusaenderungen.</li>
|
||||
</ul>
|
||||
</article>
|
||||
|
||||
<article class="panel">
|
||||
<h2>Vergangene Kunden</h2>
|
||||
<h2>Was diese Projekte gemeinsam haben</h2>
|
||||
<ul>
|
||||
<li>Privatschulzentrum Amberg</li>
|
||||
<li>Schulträger Kreis Süd</li>
|
||||
<li>Akademie für Gesundheit Nord</li>
|
||||
<li>Campus Schöneck</li>
|
||||
<li>Verstaendliche Bedienung ohne IT-Fachwissen</li>
|
||||
<li>Klare Rollen fuer Sekretariat, Schulleitung und Administration</li>
|
||||
<li>Nachvollziehbare Dokumentation fuer interne Abstimmungen</li>
|
||||
<li>Schrittweise Einfuehrung im laufenden Schulbetrieb</li>
|
||||
</ul>
|
||||
</article>
|
||||
</section>
|
||||
@@ -53,9 +52,9 @@
|
||||
<style>
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem; }
|
||||
.panel { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
|
||||
.panel h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
|
||||
.panel ul { margin: 0; padding-left: 1rem; color: #466176; display: grid; gap: 0.55rem; }
|
||||
.panel { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
|
||||
.panel h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.panel ul { margin: 0; padding-left: 1rem; color: #4a6267; display: grid; gap: 0.55rem; }
|
||||
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
+20
-20
@@ -1,47 +1,47 @@
|
||||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Team | Invario{% endblock %}
|
||||
{% block title %}Unser Ansatz | Invario{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<section class="page-hero">
|
||||
<h1>Unser Team</h1>
|
||||
<p>Wir verbinden technische Expertise, Projekterfahrung und starke Referenzen im Bildungsumfeld.</p>
|
||||
<h1>Unser Ansatz fuer Schulen</h1>
|
||||
<p>Wir arbeiten strukturiert, persoenlich und mit Fokus auf den praktischen Nutzen im Sekretariat und in der Schulleitung.</p>
|
||||
</section>
|
||||
|
||||
<section class="grid">
|
||||
<article class="member">
|
||||
<h2>Leitung & Strategie</h2>
|
||||
<p>Verantwortlich für Projektsteuerung, Qualitätsstandards und die Ausrichtung unserer Lösungen auf den Schulbetrieb.</p>
|
||||
<p><strong>Referenzen:</strong> Schulträgerprojekte mit mehr als 30 Standorten, Prozessstandardisierung im laufenden Betrieb.</p>
|
||||
<h2>Verstaendliche Beratung</h2>
|
||||
<p>Wir uebersetzen technische Moeglichkeiten in klare Entscheidungen: Was bringt im Schulalltag wirklich Entlastung und was nicht.</p>
|
||||
<p><strong>Ihr Vorteil:</strong> Keine unnoetigen Funktionen, sondern ein klarer Fahrplan mit nachvollziehbaren Prioritaeten.</p>
|
||||
</article>
|
||||
<article class="member">
|
||||
<h2>Entwicklung</h2>
|
||||
<p>Konzipiert und entwickelt unsere Plattform mit Fokus auf Zuverlässigkeit, Sicherheit und einfache Bedienung.</p>
|
||||
<p><strong>Referenzen:</strong> Einführung modularer Inventarsysteme, automatisierte Verwaltungsabläufe, DSGVO-konforme Datenhaltung.</p>
|
||||
<h2>Saubere Einfuehrung</h2>
|
||||
<p>Das System wird gemeinsam mit Ihrem Team eingerichtet, ohne den laufenden Betrieb zu ueberlasten.</p>
|
||||
<p><strong>Ihr Vorteil:</strong> Schrittweise Umstellung mit Schulung direkt an Ihren typischen Arbeitsablaeufen.</p>
|
||||
</article>
|
||||
<article class="member">
|
||||
<h2>Support & Betrieb</h2>
|
||||
<p>Sorgt für stabile Systeme, schnelle Unterstützung und nachvollziehbare Kommunikation mit Einrichtungen.</p>
|
||||
<p><strong>Referenzen:</strong> 24/7 Betreuung für Bildungseinrichtungen, SLA-basierte Reaktionszeiten und strukturierte Ticketprozesse.</p>
|
||||
<h2>Zuverlaessige Begleitung</h2>
|
||||
<p>Nach der Einfuehrung bleiben wir erreichbar und unterstuetzen bei Anpassungen, Fragen und neuen Anforderungen.</p>
|
||||
<p><strong>Ihr Vorteil:</strong> Feste Ansprechpartner und verlässliche Rueckmeldung statt wechselnder Kontaktwege.</p>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="references">
|
||||
<h2>Ausgewählte Referenzen</h2>
|
||||
<h2>Werte, nach denen wir arbeiten</h2>
|
||||
<ul>
|
||||
<li>Einführung zentraler Inventurprozesse in Schulverbünden</li>
|
||||
<li>Beratung zur IT-Governance für Schulleitungen und Träger</li>
|
||||
<li>Sicherheits- und Compliance-Begleitung bei Systemumstellungen</li>
|
||||
<li>Operative Stabilisierung von Support- und Terminprozessen</li>
|
||||
<li>Klarheit vor Komplexitaet</li>
|
||||
<li>Datenschutz als Standard, nicht als Zusatz</li>
|
||||
<li>Respekt fuer die Arbeitsrealitaet in Schulen</li>
|
||||
<li>Verbindliche Kommunikation und transparente Schritte</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<style>
|
||||
.page-hero { margin-bottom: 1.2rem; }
|
||||
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0.9rem; }
|
||||
.member, .references { background: #fff; border: 1px solid #d8e1e8; border-radius: 14px; padding: 1rem; }
|
||||
.member h2, .references h2 { color: #0f334b; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.4rem); }
|
||||
.member, .references { background: #fff; border: 1px solid #d8dfd7; border-radius: 14px; padding: 1rem; box-shadow: 0 10px 24px rgba(25, 45, 41, 0.04); }
|
||||
.member h2, .references h2 { color: #265057; margin-bottom: 0.45rem; font-size: clamp(1.05rem, 1.8vw, 1.35rem); }
|
||||
.references { margin-top: 0.9rem; }
|
||||
.references ul { margin: 0; padding-left: 1rem; color: #466176; display: grid; gap: 0.5rem; }
|
||||
.references ul { margin: 0; padding-left: 1rem; color: #4a6267; display: grid; gap: 0.5rem; }
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
Reference in New Issue
Block a user