Files
2026-04-25 20:25:00 +02:00

885 lines
29 KiB
HTML

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Impressum — DocuMentor</title>
<link rel="stylesheet" href="fonts/fonts.css">
<style>
/* ============================================================
RESET & BASE
============================================================ */
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
:root {
--concrete-dark: #1a1a1a;
--concrete-mid: #2a2a2a;
--concrete-light: #3a3a3a;
--concrete-surface: #444444;
--warning-yellow: #f0c030;
--warning-yellow-dim: #e8b800;
--safety-orange: #e05020;
--steel-text: #b0b0b0;
--steel-bright: #d0d0d0;
--white: #f0efe8;
--grid-line: rgba(240, 192, 48, 0.07);
--grid-dot: rgba(240, 192, 48, 0.12);
--blueprint-line: rgba(240, 192, 48, 0.15);
--led-green: #30e060;
--led-red: #e03030;
}
html {
scroll-behavior: smooth;
font-size: 16px;
}
body {
font-family: 'Barlow', sans-serif;
background-color: var(--concrete-dark);
color: var(--steel-text);
line-height: 1.6;
overflow-x: hidden;
background-image:
repeating-linear-gradient(
0deg,
transparent,
transparent 2px,
rgba(255,255,255,0.008) 2px,
rgba(255,255,255,0.008) 4px
),
repeating-linear-gradient(
90deg,
transparent,
transparent 2px,
rgba(255,255,255,0.005) 2px,
rgba(255,255,255,0.005) 4px
);
}
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
background-image:
radial-gradient(circle, var(--grid-dot) 1px, transparent 1px);
background-size: 40px 40px;
opacity: 0.5;
}
/* ============================================================
UTILITY
============================================================ */
.container {
max-width: 1200px;
margin: 0 auto;
padding: 0 2rem;
position: relative;
z-index: 1;
}
section {
position: relative;
z-index: 1;
}
/* ============================================================
STENCIL SECTION LABELS
============================================================ */
.section-label {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: var(--warning-yellow-dim);
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 0.75rem;
}
.section-label::before {
content: attr(data-num);
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
color: var(--concrete-surface);
border: 1px dashed var(--concrete-surface);
padding: 0.15rem 0.4rem;
letter-spacing: 0.1em;
}
.section-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 2.5rem;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.05em;
line-height: 1.1;
margin-bottom: 1rem;
}
/* ============================================================
HAZARD STRIPE
============================================================ */
.hazard-stripe {
height: 6px;
background: repeating-linear-gradient(
-45deg,
var(--warning-yellow),
var(--warning-yellow) 8px,
var(--concrete-dark) 8px,
var(--concrete-dark) 16px
);
width: 100%;
}
.hazard-stripe-thin {
height: 3px;
background: repeating-linear-gradient(
-45deg,
var(--warning-yellow-dim),
var(--warning-yellow-dim) 5px,
var(--concrete-mid) 5px,
var(--concrete-mid) 10px
);
opacity: 0.5;
}
/* ============================================================
CORNER BRACKETS
============================================================ */
.corner-brackets {
position: relative;
}
.corner-brackets::before,
.corner-brackets::after {
content: '';
position: absolute;
width: 16px;
height: 16px;
pointer-events: none;
}
.corner-brackets::before {
top: -1px;
left: -1px;
border-top: 2px solid var(--warning-yellow-dim);
border-left: 2px solid var(--warning-yellow-dim);
}
.corner-brackets::after {
bottom: -1px;
right: -1px;
border-bottom: 2px solid var(--warning-yellow-dim);
border-right: 2px solid var(--warning-yellow-dim);
}
/* ============================================================
RIVET DECORATIONS
============================================================ */
.riveted {
position: relative;
}
.riveted .rivet {
position: absolute;
width: 8px;
height: 8px;
border-radius: 50%;
background: radial-gradient(circle at 35% 35%, #555, #2a2a2a 60%, #1a1a1a);
box-shadow: inset 0 1px 1px rgba(255,255,255,0.15), 0 1px 2px rgba(0,0,0,0.5);
}
.riveted .rivet-tl { top: 10px; left: 10px; }
.riveted .rivet-tr { top: 10px; right: 10px; }
.riveted .rivet-bl { bottom: 10px; left: 10px; }
.riveted .rivet-br { bottom: 10px; right: 10px; }
/* ============================================================
LED INDICATOR
============================================================ */
.led {
display: inline-block;
width: 8px;
height: 8px;
border-radius: 50%;
margin-right: 6px;
vertical-align: middle;
box-shadow: 0 0 4px currentColor;
}
.led-green {
background-color: var(--led-green);
color: var(--led-green);
}
.led-yellow {
background-color: var(--warning-yellow);
color: var(--warning-yellow);
}
/* ============================================================
SCROLL REVEAL
============================================================ */
.reveal {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.6s linear, transform 0.6s linear;
}
.reveal.visible {
opacity: 1;
transform: translate(0, 0);
}
/* ============================================================
NAVBAR
============================================================ */
.navbar {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1000;
background: rgba(26, 26, 26, 0.92);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(240, 192, 48, 0.12);
}
.navbar-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 2rem;
height: 56px;
max-width: 1200px;
margin: 0 auto;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.navbar-brand-icon {
width: 28px;
height: 28px;
border: 2px solid var(--warning-yellow);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 0.85rem;
color: var(--warning-yellow);
}
.navbar-brand-text {
font-family: 'Oswald', sans-serif;
font-weight: 600;
font-size: 1.1rem;
color: var(--white);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.navbar-links {
display: flex;
gap: 2rem;
list-style: none;
}
.navbar-links a {
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem;
color: var(--steel-text);
text-decoration: none;
text-transform: uppercase;
letter-spacing: 0.15em;
padding: 0.25rem 0;
border-bottom: 1px solid transparent;
transition: color 0.2s linear, border-color 0.2s linear;
}
.navbar-links a:hover,
.navbar-links a.active {
color: var(--warning-yellow);
border-bottom-color: var(--warning-yellow);
}
.navbar-mobile-toggle {
display: none;
background: none;
border: 1px solid var(--concrete-surface);
color: var(--steel-text);
padding: 0.4rem 0.6rem;
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem;
cursor: pointer;
text-transform: uppercase;
letter-spacing: 0.1em;
}
/* ============================================================
PAGE HEADER
============================================================ */
.page-header {
padding-top: 56px;
background: linear-gradient(135deg, var(--concrete-dark) 0%, var(--concrete-mid) 50%, var(--concrete-dark) 100%);
position: relative;
overflow: hidden;
}
.page-header::before {
content: '';
position: absolute;
inset: 0;
background-image:
linear-gradient(var(--grid-line) 1px, transparent 1px),
linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
background-size: 80px 80px;
opacity: 0.8;
}
.page-header-inner {
padding: 3rem 0 2.5rem;
position: relative;
z-index: 2;
}
.page-header-tag {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
color: var(--concrete-surface);
letter-spacing: 0.2em;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.page-header-title {
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 3rem;
color: var(--white);
text-transform: uppercase;
letter-spacing: 0.08em;
line-height: 1;
}
.page-header-title span {
color: var(--warning-yellow);
}
.page-header-sub {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 400;
font-size: 1.1rem;
color: var(--steel-text);
margin-top: 0.5rem;
letter-spacing: 0.04em;
}
/* ============================================================
LEGAL CONTENT
============================================================ */
.legal-section {
padding: 5rem 0;
background: var(--concrete-dark);
}
.legal-panel {
background: var(--concrete-mid);
border: 1px solid rgba(240, 192, 48, 0.12);
padding: 3rem;
max-width: 860px;
margin: 0 auto;
position: relative;
}
.legal-block {
margin-bottom: 2.5rem;
}
.legal-block:last-child {
margin-bottom: 0;
}
.legal-block-label {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
color: var(--concrete-surface);
text-transform: uppercase;
letter-spacing: 0.2em;
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.legal-block-label::before {
content: '';
display: inline-block;
width: 20px;
height: 1px;
background: var(--concrete-surface);
}
.legal-block h2 {
font-family: 'Barlow Condensed', sans-serif;
font-weight: 600;
font-size: 1.3rem;
color: var(--steel-bright);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 0.75rem;
}
.legal-block p {
font-family: 'Barlow', sans-serif;
font-weight: 300;
font-size: 0.95rem;
color: var(--steel-text);
line-height: 1.7;
margin-bottom: 0.5rem;
}
.legal-block p:last-child {
margin-bottom: 0;
}
.legal-block a {
color: var(--warning-yellow-dim);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: border-color 0.2s linear;
}
.legal-block a:hover {
border-bottom-color: var(--warning-yellow-dim);
}
.legal-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(240, 192, 48, 0.15) 20%,
rgba(240, 192, 48, 0.15) 80%,
transparent 100%
);
margin: 2.5rem 0;
}
.legal-address {
font-family: 'Share Tech Mono', monospace;
font-size: 0.85rem;
color: var(--steel-text);
line-height: 2;
padding: 1rem 1.25rem;
background: rgba(26, 26, 26, 0.6);
border: 1px dashed rgba(240, 192, 48, 0.1);
display: inline-block;
}
.legal-address strong {
color: var(--steel-bright);
font-weight: 400;
}
.legal-note {
margin-top: 1.5rem;
padding: 1rem 1.25rem;
border-left: 3px solid var(--safety-orange);
background: rgba(224, 80, 32, 0.05);
font-family: 'Share Tech Mono', monospace;
font-size: 0.75rem;
color: var(--steel-text);
line-height: 1.6;
}
.legal-note strong {
color: var(--safety-orange);
font-weight: 400;
}
/* ============================================================
SECTION DIVIDER
============================================================ */
.section-divider {
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(240, 192, 48, 0.2) 20%,
rgba(240, 192, 48, 0.2) 80%,
transparent 100%
);
}
/* ============================================================
FOOTER
============================================================ */
.footer {
padding: 3rem 0 2rem;
background: var(--concrete-dark);
border-top: 1px solid rgba(240, 192, 48, 0.08);
position: relative;
z-index: 1;
}
.footer-inner {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 1rem;
}
.footer-brand {
display: flex;
align-items: center;
gap: 0.5rem;
}
.footer-brand-icon {
width: 22px;
height: 22px;
border: 1.5px solid var(--warning-yellow-dim);
display: flex;
align-items: center;
justify-content: center;
font-family: 'Oswald', sans-serif;
font-weight: 700;
font-size: 0.7rem;
color: var(--warning-yellow-dim);
}
.footer-brand-text {
font-family: 'Oswald', sans-serif;
font-weight: 500;
font-size: 0.85rem;
color: var(--steel-text);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.footer-meta {
font-family: 'Share Tech Mono', monospace;
font-size: 0.65rem;
color: var(--concrete-surface);
letter-spacing: 0.1em;
text-align: right;
}
.footer-links {
display: flex;
gap: 1.5rem;
list-style: none;
}
.footer-links a {
font-family: 'Share Tech Mono', monospace;
font-size: 0.7rem;
color: var(--steel-text);
text-decoration: none;
letter-spacing: 0.1em;
transition: color 0.2s linear;
}
.footer-links a:hover,
.footer-links a.active {
color: var(--warning-yellow);
}
/* ============================================================
RESPONSIVE
============================================================ */
@media (max-width: 768px) {
.navbar-links {
display: none;
position: absolute;
top: 56px;
left: 0;
width: 100%;
background: rgba(26, 26, 26, 0.97);
flex-direction: column;
padding: 1rem 2rem;
gap: 0.75rem;
border-bottom: 1px solid rgba(240, 192, 48, 0.12);
}
.navbar-links.open {
display: flex;
}
.navbar-mobile-toggle {
display: block;
}
.page-header-title {
font-size: 2.2rem;
}
.legal-panel {
padding: 2rem 1.5rem;
}
.footer-inner {
flex-direction: column;
text-align: center;
}
.footer-links {
flex-wrap: wrap;
justify-content: center;
}
.footer-meta {
text-align: center;
}
}
@media (max-width: 480px) {
.container {
padding: 0 1rem;
}
.page-header-title {
font-size: 1.8rem;
}
.legal-panel {
padding: 1.5rem 1rem;
}
.navbar-inner {
padding: 0 1rem;
}
}
</style>
</head>
<body>
<!-- ============================================================
NAVBAR
============================================================ -->
<nav class="navbar">
<div class="navbar-inner">
<a href="index.html" class="navbar-brand">
<div class="navbar-brand-icon">D</div>
<span class="navbar-brand-text">DocuMentor</span>
</a>
<button class="navbar-mobile-toggle" id="navToggle">MENU</button>
<ul class="navbar-links" id="navLinks">
<li><a href="index.html#features">Features</a></li>
<li><a href="index.html#workflow">Workflow</a></li>
<li><a href="index.html#techstack">Technik</a></li>
<li><a href="index.html#download">Download</a></li>
<li><a href="impressum.html" class="active">Impressum</a></li>
</ul>
</div>
</nav>
<!-- ============================================================
PAGE HEADER
============================================================ -->
<div class="page-header">
<div class="hazard-stripe"></div>
<div class="container">
<div class="page-header-inner">
<div class="page-header-tag">
<span class="led led-green"></span>
SYSTEM AKTIV &mdash; RECHTSHINWEISE
</div>
<h1 class="page-header-title">Im<span>pressum</span></h1>
<p class="page-header-sub">Angaben gemäß § 5 DDG</p>
</div>
</div>
<div class="hazard-stripe-thin"></div>
</div>
<!-- ============================================================
LEGAL CONTENT
============================================================ -->
<section class="legal-section">
<div class="container">
<div class="section-label reveal" data-num="IMP-01">Anbieterkennzeichnung</div>
<h2 class="section-title reveal" style="margin-bottom: 2rem;">Impressum</h2>
<div class="legal-panel corner-brackets riveted reveal">
<span class="rivet rivet-tl"></span>
<span class="rivet rivet-tr"></span>
<span class="rivet rivet-bl"></span>
<span class="rivet rivet-br"></span>
<!-- Verantwortlicher -->
<div class="legal-block">
<div class="legal-block-label">§ 5 DDG — ANBIETER</div>
<h2>Verantwortlicher</h2>
<div class="legal-address">
<strong>Vitali Graf</strong><br>
Kulenkampffallee 65b<br>
28213 Bremen<br>
Deutschland
</div>
<!-- <div class="legal-note" style="margin-top: 1rem;">
<strong>HINWEIS:</strong> Bitte Adresse vor Veröffentlichung ergänzen.
</div> -->
</div>
<div class="legal-divider"></div>
<!-- Kontakt -->
<div class="legal-block">
<div class="legal-block-label">KONTAKT</div>
<h2>Kontakt</h2>
<p>
E-Mail: <a href="mailto:info@vitaligraf.de">info@vitaligraf.de</a>
</p>
</div>
<div class="legal-divider"></div>
<!-- Projekthinweis -->
<div class="legal-block">
<div class="legal-block-label">PROJEKT</div>
<h2>Hinweis zum Projekt</h2>
<p>
DocuMentor ist ein Open-Source-Softwareprojekt zur Verwaltung und Validierung von
XSL-Transformationen. Die Software wird ohne Gewähr bereitgestellt.
</p>
<p>
Der Quellcode steht unter einer Open-Source-Lizenz. Einzelheiten entnehmen Sie
bitte der beiliegenden Lizenzdatei im Repository.
</p>
</div>
<div class="legal-divider"></div>
<!-- Haftungsausschluss -->
<div class="legal-block">
<div class="legal-block-label">HAFTUNG</div>
<h2>Haftungsausschluss</h2>
<p>
Die Inhalte dieser Website wurden mit größtmöglicher Sorgfalt erstellt.
Für die Richtigkeit, Vollständigkeit und Aktualität der Inhalte übernehme
ich jedoch keine Gewähr. Als Diensteanbieter bin ich gemäß § 7 DDG
für eigene Inhalte auf diesen Seiten nach den allgemeinen Gesetzen
verantwortlich.
</p>
<p>
Nach §§ 11 bis 13 DDG bin ich als Diensteanbieter nicht verpflichtet,
übermittelte oder gespeicherte fremde Informationen zu überwachen oder
nach Umständen zu forschen, die auf eine rechtswidrige Tätigkeit hinweisen.
</p>
</div>
<div class="legal-divider"></div>
<!-- Urheberrecht -->
<div class="legal-block">
<div class="legal-block-label">URHEBERRECHT</div>
<h2>Urheberrecht</h2>
<p>
Die durch den Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten
unterliegen dem deutschen Urheberrecht. Die Vervielfältigung, Bearbeitung,
Verbreitung und jede Art der Verwertung außerhalb der Grenzen des
Urheberrechtes bedürfen der schriftlichen Zustimmung des jeweiligen Autors
bzw. Erstellers.
</p>
<p>
Der Quellcode von DocuMentor ist unter den Bedingungen der zugehörigen
Open-Source-Lizenz frei verwendbar. Detailangaben hierzu finden Sie im
Repository.
</p>
</div>
</div>
</div>
</section>
<div class="hazard-stripe-thin"></div>
<!-- ============================================================
FOOTER
============================================================ -->
<footer class="footer">
<div class="container">
<div class="footer-inner">
<div class="footer-brand">
<div class="footer-brand-icon">D</div>
<span class="footer-brand-text">DocuMentor</span>
</div>
<ul class="footer-links">
<li><a href="index.html#features">Features</a></li>
<li><a href="index.html#workflow">Workflow</a></li>
<li><a href="index.html#techstack">Technik</a></li>
<li><a href="index.html#download">Download</a></li>
<li><a href="impressum.html" class="active">Impressum</a></li>
<li><a href="datenschutz.html">Datenschutz</a></li>
</ul>
<div class="footer-meta">
SYSTEM // DOCUMENTOR // BUILD 2026.02<br>
PySide6 Desktop-Anwendung // Open Source
</div>
</div>
</div>
</footer>
<script>
(function() {
const toggle = document.getElementById('navToggle');
const links = document.getElementById('navLinks');
if (toggle && links) {
toggle.addEventListener('click', function() {
links.classList.toggle('open');
toggle.textContent = links.classList.contains('open') ? 'CLOSE' : 'MENU';
});
}
})();
(function() {
const reveals = document.querySelectorAll('.reveal');
const observer = new IntersectionObserver(function(entries) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
entry.target.classList.add('visible');
observer.unobserve(entry.target);
}
});
}, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' });
reveals.forEach(function(el) { observer.observe(el); });
})();
(function() {
const navbar = document.querySelector('.navbar');
let ticking = false;
window.addEventListener('scroll', function() {
if (!ticking) {
requestAnimationFrame(function() {
navbar.style.borderBottomColor = window.scrollY > 80
? 'rgba(240, 192, 48, 0.25)'
: 'rgba(240, 192, 48, 0.12)';
ticking = false;
});
ticking = true;
}
});
})();
</script>
</body>
</html>