444 lines
15 KiB
PHP
444 lines
15 KiB
PHP
<?php
|
||
/**
|
||
* @file impressum.php
|
||
* @brief Darstellung der Impressum-Seite für das Geizkragen-Projekt.
|
||
*
|
||
* @details Diese Datei generiert das Impressum, welches rechtliche Vorgaben gemäß § 5 TMG
|
||
* und § 25 MedienG erfüllt. Hier werden die Website-Inhaber, der Server-Betreiber sowie
|
||
* Informationen zu Haftungsausschluss, Urheberrecht und Datenschutz dargestellt.
|
||
* Die Anzeige erfolgt in einem responsiven CSS-Grid-Layout.
|
||
*
|
||
* @author Fabian Schieder, Paul Eisenbock
|
||
* @version 1.0
|
||
* @date 2026
|
||
*/
|
||
include 'header.php'; ?>
|
||
|
||
<style>
|
||
/**
|
||
* @brief Hauptcontainer für das Impressum.
|
||
* @details Setzt Abstände, zentriert den Inhalt und fügt eine Einblend-Animation (fadeInUp) hinzu.
|
||
*/
|
||
.impressum {
|
||
padding: 3rem 1.5rem 4rem;
|
||
max-width: 900px;
|
||
margin: 0 auto;
|
||
animation: fadeInUp 0.6s ease both;
|
||
}
|
||
|
||
.impressum__hero {
|
||
text-align: center;
|
||
margin-bottom: 3rem;
|
||
}
|
||
|
||
/**
|
||
* @brief Styling für das Helden-Icon.
|
||
* @details Definiert Größe, Form, Hintergrundverlauf und Animation des Icons.
|
||
*/
|
||
.impressum__hero-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 72px;
|
||
height: 72px;
|
||
border-radius: var(--radius-xl);
|
||
background: linear-gradient(135deg, var(--color-primary-soft), rgba(16, 185, 129, 0.08));
|
||
border: 1px solid var(--border-default);
|
||
margin-bottom: 1.25rem;
|
||
font-size: 2rem;
|
||
animation: float 6s ease-in-out infinite;
|
||
}
|
||
|
||
.impressum__hero h1 {
|
||
font-size: 2.2rem;
|
||
font-weight: 800;
|
||
background: linear-gradient(135deg, var(--text-primary), var(--color-primary));
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
margin-bottom: 0.5rem;
|
||
}
|
||
|
||
.impressum__hero p {
|
||
color: var(--text-secondary);
|
||
font-size: 1rem;
|
||
max-width: 520px;
|
||
margin: 0 auto;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/**
|
||
* @brief Grid-Layout für die Impressum-Karten.
|
||
* @details Definiert ein zweispaltiges Layout mit Abstand zwischen den Karten.
|
||
*/
|
||
.impressum__grid {
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr;
|
||
gap: 1.5rem;
|
||
margin-bottom: 1.5rem;
|
||
}
|
||
|
||
/**
|
||
* @brief Styling für die Impressum-Karten.
|
||
* @details Beinhaltet Hintergrund, Rahmen, Schatten und Animationseffekte beim Hover.
|
||
*/
|
||
.impressum__card {
|
||
background: var(--bg-card);
|
||
border: 1px solid var(--border-default);
|
||
border-radius: var(--radius-lg);
|
||
padding: 2rem;
|
||
transition: border-color var(--transition-normal), box-shadow var(--transition-normal), transform var(--transition-smooth);
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.impressum__card::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 3px;
|
||
background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
|
||
opacity: 0;
|
||
transition: opacity var(--transition-normal);
|
||
}
|
||
|
||
.impressum__card:hover {
|
||
border-color: var(--border-glow);
|
||
box-shadow: var(--shadow-glow-blue);
|
||
transform: translateY(-3px);
|
||
}
|
||
|
||
.impressum__card:hover::before {
|
||
opacity: 1;
|
||
}
|
||
|
||
.impressum__card--full {
|
||
grid-column: 1 / -1;
|
||
}
|
||
|
||
/**
|
||
* @brief Styling für Icons innerhalb der Impressum-Karten.
|
||
* @details Definiert Größe, Ausrichtung und Basis-Design der runden Icons.
|
||
*/
|
||
.impressum__card-icon {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 44px;
|
||
height: 44px;
|
||
border-radius: var(--radius-md);
|
||
margin-bottom: 1rem;
|
||
font-size: 1.25rem;
|
||
}
|
||
|
||
/** @brief Modifikator für blaue Icons (Server-Betreiber, Datenschutz) */
|
||
.impressum__card-icon--blue {
|
||
background: var(--color-primary-soft);
|
||
border: 1px solid rgba(59, 130, 246, 0.15);
|
||
}
|
||
|
||
/** @brief Modifikator für grüne Icons (Website-Inhaber) */
|
||
.impressum__card-icon--green {
|
||
background: var(--color-accent-soft);
|
||
border: 1px solid rgba(16, 185, 129, 0.15);
|
||
}
|
||
|
||
/** @brief Modifikator für orange Icons (Haftungsausschluss) */
|
||
.impressum__card-icon--orange {
|
||
background: rgba(245, 158, 11, 0.1);
|
||
border: 1px solid rgba(245, 158, 11, 0.15);
|
||
}
|
||
|
||
/** @brief Modifikator für lila Icons (Projektinfo) */
|
||
.impressum__card-icon--purple {
|
||
background: rgba(139, 92, 246, 0.1);
|
||
border: 1px solid rgba(139, 92, 246, 0.15);
|
||
}
|
||
|
||
/** @brief Modifikator für rote Icons (Urheberrecht) */
|
||
.impressum__card-icon--red {
|
||
background: var(--color-danger-soft);
|
||
border: 1px solid rgba(239, 68, 68, 0.15);
|
||
}
|
||
|
||
.impressum__card h2 {
|
||
font-size: 1.15rem;
|
||
font-weight: 700;
|
||
color: var(--text-primary);
|
||
margin-bottom: 0.85rem;
|
||
}
|
||
|
||
.impressum__card p,
|
||
.impressum__card li {
|
||
color: var(--text-secondary);
|
||
font-size: 0.92rem;
|
||
line-height: 1.75;
|
||
}
|
||
|
||
.impressum__card ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
}
|
||
|
||
.impressum__card ul li {
|
||
padding: 0.3rem 0;
|
||
padding-left: 1.2rem;
|
||
position: relative;
|
||
}
|
||
|
||
.impressum__card ul li::before {
|
||
content: "›";
|
||
position: absolute;
|
||
left: 0;
|
||
color: var(--color-primary);
|
||
font-weight: 700;
|
||
}
|
||
|
||
.impressum__label {
|
||
display: block;
|
||
font-size: 0.75rem;
|
||
font-weight: 600;
|
||
text-transform: uppercase;
|
||
letter-spacing: 0.08em;
|
||
color: var(--text-muted);
|
||
margin-bottom: 0.25rem;
|
||
}
|
||
|
||
.impressum__value {
|
||
color: var(--text-primary) !important;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.impressum__divider {
|
||
border: none;
|
||
height: 1px;
|
||
background: var(--border-default);
|
||
margin: 1rem 0;
|
||
}
|
||
|
||
.impressum__footer-note {
|
||
text-align: center;
|
||
margin-top: 2.5rem;
|
||
padding: 1.5rem;
|
||
border-radius: var(--radius-lg);
|
||
background: var(--bg-surface);
|
||
border: 1px solid var(--border-subtle);
|
||
}
|
||
|
||
.impressum__footer-note p {
|
||
color: var(--text-muted);
|
||
font-size: 0.82rem;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
/**
|
||
* @brief Media Query für mobile Endgeräte.
|
||
* @details Bricht das zwei-spaltige Layout bei Bildschirmen unter 700px in ein ein-spaltiges Layout um.
|
||
*/
|
||
@media (max-width: 700px) {
|
||
.impressum__grid {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.impressum__hero h1 {
|
||
font-size: 1.7rem;
|
||
}
|
||
|
||
.impressum {
|
||
padding: 2rem 1rem 3rem;
|
||
}
|
||
|
||
.impressum__card {
|
||
padding: 1.5rem;
|
||
}
|
||
|
||
.impressum__card--full div[style*="grid-template-columns"] {
|
||
grid-template-columns: 1fr !important;
|
||
}
|
||
}
|
||
</style>
|
||
|
||
<main class="impressum">
|
||
|
||
<!-- /**
|
||
* @section Hero-Bereich
|
||
* @brief Einleitende Sektion der Seite.
|
||
* @details Beinhaltet das animierte Waage-Icon, den Haupttitel und einen kurzen Erklärungstext
|
||
* zu den rechtlichen Grundlagen des Impressums.
|
||
*/ -->
|
||
<!-- ═══ Hero ═══ -->
|
||
<div class="impressum__hero">
|
||
<div class="impressum__hero-icon">⚖️</div>
|
||
<h1>Impressum</h1>
|
||
<p>Angaben gemäß § 5 TMG und § 25 MedienG – Informationen über die Betreiber dieser Website.</p>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @section Karten-Grid
|
||
* @brief Hauptbereich mit den rechtlichen Informationen aufgeteilt in Informationskarten.
|
||
* @details Verwendet ein zweispaltiges CSS-Grid zur Darstellung unterschiedlicher Bereiche
|
||
* wie Seitenbetreiber, Server und Haftungsausschluss.
|
||
*/ -->
|
||
<!-- ═══ Karten-Grid ═══ -->
|
||
<div class="impressum__grid">
|
||
|
||
<!-- /**
|
||
* @subsection Website-Inhaber
|
||
* @brief Karte mit den Kontaktinformationen der Inhaber.
|
||
* @details Nimmt die volle Breite ein und listet die Details der Projektgründer Fabian Schieder und Paul Eisenbock auf.
|
||
*/ -->
|
||
<!-- Karte 1 – Website-Inhaber (volle Breite) -->
|
||
<div class="impressum__card impressum__card--full">
|
||
<div class="impressum__card-icon impressum__card-icon--green">🌐</div>
|
||
<h2>Website-Inhaber</h2>
|
||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem;">
|
||
<ul>
|
||
<li>
|
||
<span class="impressum__label">Name</span>
|
||
<span class="impressum__value">Fabian Schieder</span>
|
||
</li>
|
||
<li>
|
||
<span class="impressum__label">Rolle</span>
|
||
Website-Inhaber & Server-Betreiber
|
||
</li>
|
||
<li>
|
||
<span class="impressum__label">Kontakt</span>
|
||
fabian@geizkragen.store
|
||
</li>
|
||
</ul>
|
||
<ul>
|
||
<li>
|
||
<span class="impressum__label">Name</span>
|
||
<span class="impressum__value">Paul Eisenbock</span>
|
||
</li>
|
||
<li>
|
||
<span class="impressum__label">Rolle</span>
|
||
Website-Inhaber
|
||
</li>
|
||
<li>
|
||
<span class="impressum__label">Kontakt</span>
|
||
paul@geizkragen.store
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @subsection Server-Betreiber
|
||
* @brief Information zum technischen Hosting der Plattform.
|
||
* @details Nennt den Verantwortlichen für die technische Bereitstellung, das Hosting und die Wartung des Servers.
|
||
*/ -->
|
||
<!-- Karte 2 – Server-Betreiber -->
|
||
<div class="impressum__card impressum__card--full">
|
||
<div class="impressum__card-icon impressum__card-icon--blue">🖥️</div>
|
||
<h2>Server-Betreiber</h2>
|
||
<ul>
|
||
<li>
|
||
<span class="impressum__label">Verantwortlich</span>
|
||
<span class="impressum__value">Fabian Schieder</span>
|
||
</li>
|
||
<li>
|
||
<span class="impressum__label">Aufgaben</span>
|
||
Technische Bereitstellung, Hosting, Serverbetrieb & Wartung
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @subsection Über das Projekt
|
||
* @brief Beschreibung des Projekts Geizkragen.
|
||
* @details Gibt Hintergrundinformationen, dass das Projekt als Schulprojekt zur Preisüberwachung entstanden ist.
|
||
*/ -->
|
||
<!-- Karte 3 – Projektinfo (volle Breite) -->
|
||
<div class="impressum__card impressum__card--full">
|
||
<div class="impressum__card-icon impressum__card-icon--purple">🚀</div>
|
||
<h2>Über das Projekt</h2>
|
||
<p>
|
||
<strong>Geizkragen</strong> ist eine Preisvergleichsplattform, die es Nutzern ermöglicht, die besten
|
||
Angebote verschiedener Online-Shops auf einen Blick zu vergleichen. Das Projekt wird als Schulprojekt
|
||
von Fabian Schieder und Paul Eisenbock entwickelt und betrieben.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @subsection Haftungsausschluss
|
||
* @brief Disclaimer bezüglich der angebotenen Inhalte.
|
||
* @details Schließt die Haftung für Richtigkeit, Vollständigkeit und Aktualität der Inhalte sowie für verlinkte externe Inhalte aus.
|
||
*/ -->
|
||
<!-- Karte 4 – Haftungsausschluss -->
|
||
<div class="impressum__card">
|
||
<div class="impressum__card-icon impressum__card-icon--orange">⚠️</div>
|
||
<h2>Haftungsausschluss</h2>
|
||
<p>
|
||
Die Inhalte dieser Website werden mit größtmöglicher Sorgfalt erstellt. Der Anbieter übernimmt jedoch
|
||
keine Gewähr für die Richtigkeit, Vollständigkeit und Aktualität der bereitgestellten Inhalte.
|
||
</p>
|
||
<hr class="impressum__divider">
|
||
<p>
|
||
Trotz sorgfältiger inhaltlicher Kontrolle übernehmen wir keine Haftung für die Inhalte externer Links.
|
||
Für den Inhalt verlinkter Seiten sind ausschließlich deren Betreiber verantwortlich.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @subsection Urheberrecht
|
||
* @brief Regelungen bezüglich der erstellten Werke.
|
||
* @details Weist auf das österreichische Urheberrecht hin und klärt, dass eine Nutzung der Inhalte durch Dritte schriftlich genehmigt werden muss.
|
||
*/ -->
|
||
<!-- Karte 5 – Urheberrecht -->
|
||
<div class="impressum__card">
|
||
<div class="impressum__card-icon impressum__card-icon--red">©</div>
|
||
<h2>Urheberrecht</h2>
|
||
<p>
|
||
Die durch die Seitenbetreiber erstellten Inhalte und Werke auf diesen Seiten unterliegen dem
|
||
österreichischen 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>
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @subsection Datenschutzhinweis
|
||
* @brief Basisinformationen zur Datenerhebung.
|
||
* @details Informiert Benutzer über den Umgang mit personenbezogenen Daten und die Freiwilligkeit bei der Datenangabe.
|
||
*/ -->
|
||
<!-- Karte 6 – Datenschutz (volle Breite) -->
|
||
<div class="impressum__card impressum__card--full">
|
||
<div class="impressum__card-icon impressum__card-icon--blue">🔒</div>
|
||
<h2>Datenschutzhinweis</h2>
|
||
<p>
|
||
Die Nutzung unserer Website ist in der Regel ohne Angabe personenbezogener Daten möglich. Soweit auf
|
||
unseren Seiten personenbezogene Daten (z. B. Name, E-Mail-Adresse) erhoben werden, erfolgt dies
|
||
stets auf freiwilliger Basis. Diese Daten werden ohne Ihre ausdrückliche Zustimmung nicht an Dritte
|
||
weitergegeben. Wir weisen darauf hin, dass die Datenübertragung im Internet (z. B. bei der
|
||
Kommunikation per E-Mail) Sicherheitslücken aufweisen kann.
|
||
</p>
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<!-- /**
|
||
* @section Footer-Hinweis
|
||
* @brief Abschließender Hinweis mit Information zum Erstellungszeitpunkt.
|
||
* @details Generiert dynamisch den aktuellen Monat und das Jahr der letzten Anpassung.
|
||
*/ -->
|
||
<!-- ═══ Footer-Note ═══ -->
|
||
<div class="impressum__footer-note">
|
||
<p>
|
||
Stand: <?= date('F Y') ?> · Dieses Impressum wurde nach bestem Wissen und Gewissen erstellt.<br>
|
||
Bei Fragen wenden Sie sich bitte an die oben genannten Ansprechpartner.
|
||
</p>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<?php
|
||
/**
|
||
* @brief Einbinden des globalen Footers.
|
||
* @details Lädt die Datei footer.php, welche den Abschluss des HTML-Dokuments und weitere globale Elemente enthält.
|
||
*/
|
||
include 'footer.php';
|
||
?>
|