erster brauchbarer stand.
This commit is contained in:
maik
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
@@ -0,0 +1,928 @@
|
||||
<!doctype html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>Dokumentationszentrum – Startseite (Prototyp)</title>
|
||||
|
||||
<!--
|
||||
Startseiten-Prototyp „Dokumentationszentrum" im Stil einer YOOtheme-Pro-Website.
|
||||
Alle Inhalte sind Platzhalter.
|
||||
|
||||
HINWEIS ASSETS: Die hier eingebundenen CDN-Ressourcen (UIkit) dienen NUR der
|
||||
Vorschau. Produktiv die Assets lokal hosten (DSGVO – keine Third-Party-Requests
|
||||
an jsDelivr) und die Version pinnen (kein „latest"). Gleiches gilt für Fonts.
|
||||
-->
|
||||
|
||||
<!-- UIkit 3 – CDN nur für Vorschau; produktiv lokal hosten und Version pinnen -->
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.21.13/dist/css/uikit.min.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/uikit@3.21.13/dist/js/uikit.min.js"></script>
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/uikit@3.21.13/dist/js/uikit-icons.min.js"></script>
|
||||
|
||||
<style>
|
||||
/* =========================================================================
|
||||
1. DESIGN-TOKENS (CSS Custom Properties)
|
||||
========================================================================= */
|
||||
:root {
|
||||
--op-blau: #1f2a63; /* Primär. TODO: gegen Logo-SVG verifizieren */
|
||||
--op-blau-dunkel: #141b45; /* Hover */
|
||||
--op-gelb: #edf489; /* Sekundär / Signalfarbe */
|
||||
--op-gelb-hell: #f7fbc9;
|
||||
--op-papier: #f6f6f1; /* muted Hintergrund */
|
||||
--op-linie: #d9dbcf; /* Rahmen */
|
||||
--op-text: #23242a; /* Fließtext */
|
||||
|
||||
--op-font: "ABC Favorit", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
2. WEBFONTS (produktiv aktivieren – WOFF2 lokal unter /fonts/ ablegen)
|
||||
========================================================================= */
|
||||
/*
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("/fonts/abc-favorit-regular.woff2") format("woff2");
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
@font-face {
|
||||
font-family: "ABC Favorit";
|
||||
src: url("/fonts/abc-favorit-bold.woff2") format("woff2");
|
||||
font-weight: 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
*/
|
||||
|
||||
/* =========================================================================
|
||||
3. BASIS / RESET-ERGÄNZUNGEN
|
||||
========================================================================= */
|
||||
html { scroll-behavior: smooth; }
|
||||
|
||||
body {
|
||||
font-family: var(--op-font);
|
||||
color: var(--op-text);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Kantige Anmutung: border-radius überall aus */
|
||||
*,
|
||||
*::before,
|
||||
*::after { border-radius: 0 !important; }
|
||||
|
||||
/* Textauswahl: gelb mit blauem Text */
|
||||
::selection { background: var(--op-gelb); color: var(--op-blau); }
|
||||
|
||||
/* Sichtbarer Tastaturfokus */
|
||||
:focus-visible {
|
||||
outline: 3px solid var(--op-blau);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
||||
/* Utility: gelber Textmarker */
|
||||
.op-marker {
|
||||
background-image: linear-gradient(var(--op-gelb), var(--op-gelb));
|
||||
background-repeat: no-repeat;
|
||||
background-position: 0 0.15em;
|
||||
background-size: 100% 0.85em;
|
||||
-webkit-box-decoration-break: clone;
|
||||
box-decoration-break: clone;
|
||||
padding: 0 0.05em;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
4. TYPOGRAFIE (UIkit-Overrides)
|
||||
========================================================================= */
|
||||
h1, h2, h3, h4, h5, h6,
|
||||
.uk-h1, .uk-h2, .uk-h3, .uk-h4 {
|
||||
color: var(--op-blau);
|
||||
font-weight: 700;
|
||||
letter-spacing: -0.01em;
|
||||
}
|
||||
h1, .uk-h1 {
|
||||
font-size: clamp(2.4rem, 6vw, 4.2rem);
|
||||
line-height: 1.05;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--op-blau);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 3px;
|
||||
}
|
||||
a:hover { color: var(--op-blau-dunkel); }
|
||||
|
||||
/* =========================================================================
|
||||
5. BUTTONS
|
||||
========================================================================= */
|
||||
.uk-button {
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.01em;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
transition: background-color .15s ease, color .15s ease, border-color .15s ease;
|
||||
}
|
||||
|
||||
/* primary = blaue Fläche / weißer Text */
|
||||
.uk-button-primary {
|
||||
background: var(--op-blau);
|
||||
color: #fff;
|
||||
border: 2px solid var(--op-blau);
|
||||
}
|
||||
.uk-button-primary:hover,
|
||||
.uk-button-primary:focus {
|
||||
background: var(--op-blau-dunkel);
|
||||
border-color: var(--op-blau-dunkel);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* secondary = gelbe Fläche / blauer Text */
|
||||
.uk-button-secondary {
|
||||
background: var(--op-gelb);
|
||||
color: var(--op-blau);
|
||||
border: 2px solid var(--op-blau);
|
||||
}
|
||||
.uk-button-secondary:hover,
|
||||
.uk-button-secondary:focus {
|
||||
background: var(--op-gelb-hell);
|
||||
color: var(--op-blau-dunkel);
|
||||
border-color: var(--op-blau-dunkel);
|
||||
}
|
||||
|
||||
/* default = blaue Outline, bei Hover gefüllt */
|
||||
.uk-button-default {
|
||||
background: transparent;
|
||||
color: var(--op-blau);
|
||||
border: 2px solid var(--op-blau);
|
||||
}
|
||||
.uk-button-default:hover,
|
||||
.uk-button-default:focus {
|
||||
background: var(--op-blau);
|
||||
color: #fff;
|
||||
border-color: var(--op-blau);
|
||||
}
|
||||
|
||||
/* uk-button-text mit gelber Unterstreichung */
|
||||
.uk-button-text {
|
||||
color: var(--op-blau);
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.uk-button-text::before {
|
||||
border-bottom: 3px solid var(--op-gelb);
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
6. NAVBAR
|
||||
========================================================================= */
|
||||
.op-navbar {
|
||||
background: #fff;
|
||||
border-bottom: 3px solid var(--op-blau);
|
||||
}
|
||||
.op-navbar .uk-navbar-nav > li > a {
|
||||
color: var(--op-blau);
|
||||
font-weight: 700;
|
||||
text-transform: none;
|
||||
text-decoration: none;
|
||||
min-height: 72px;
|
||||
}
|
||||
.op-navbar .uk-navbar-nav > li:hover > a,
|
||||
.op-navbar .uk-navbar-nav > li > a:focus,
|
||||
.op-navbar .uk-navbar-nav > li.uk-active > a,
|
||||
.op-navbar .uk-navbar-nav > li > a[aria-current="page"] {
|
||||
color: var(--op-blau-dunkel);
|
||||
box-shadow: inset 0 -6px 0 var(--op-gelb);
|
||||
}
|
||||
.op-navbar .uk-navbar-toggle { color: var(--op-blau); }
|
||||
|
||||
.uk-navbar-dropdown { background: #fff; border: 1px solid var(--op-linie); }
|
||||
.uk-navbar-dropdown-nav > li > a {
|
||||
color: var(--op-blau);
|
||||
text-decoration: none;
|
||||
}
|
||||
.uk-navbar-dropdown-nav > li > a:hover {
|
||||
color: var(--op-blau-dunkel);
|
||||
background: var(--op-gelb-hell);
|
||||
}
|
||||
|
||||
/* Logo-Platzhalter */
|
||||
.op-logo {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: .6rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
.op-logo__mark {
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
background: var(--op-blau);
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: .7rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
.op-logo__mark--invert { background: var(--op-gelb); color: var(--op-blau); }
|
||||
.op-logo__word {
|
||||
color: var(--op-blau);
|
||||
font-weight: 700;
|
||||
line-height: 1.05;
|
||||
font-size: .95rem;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
.op-logo__word span { display: block; }
|
||||
|
||||
/* =========================================================================
|
||||
7. TOPBAR
|
||||
========================================================================= */
|
||||
.op-topbar {
|
||||
background: var(--op-papier);
|
||||
border-bottom: 1px solid var(--op-linie);
|
||||
font-size: .85rem;
|
||||
}
|
||||
.op-topbar a { text-decoration: none; color: var(--op-blau); }
|
||||
.op-topbar .uk-subnav > li > a {
|
||||
color: var(--op-blau);
|
||||
text-transform: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
.op-topbar .uk-subnav > li.uk-active > a { color: var(--op-blau); }
|
||||
.op-topbar .uk-subnav > li.uk-active > a::after {
|
||||
content: "";
|
||||
display: block;
|
||||
height: 3px;
|
||||
background: var(--op-gelb);
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
8. CARDS
|
||||
========================================================================= */
|
||||
.uk-card-default {
|
||||
background: #fff;
|
||||
border: 1px solid var(--op-linie);
|
||||
box-shadow: none !important;
|
||||
transition: border-color .15s ease;
|
||||
}
|
||||
.uk-card-default:hover { border-color: var(--op-blau); }
|
||||
|
||||
.op-card-datum {
|
||||
color: var(--op-blau);
|
||||
font-weight: 700;
|
||||
letter-spacing: .01em;
|
||||
}
|
||||
.op-card-titel a { text-decoration: none; }
|
||||
.op-card-titel a:hover { text-decoration: underline; }
|
||||
|
||||
/* Kategorie-Label */
|
||||
.op-kategorie {
|
||||
display: inline-block;
|
||||
background: var(--op-gelb);
|
||||
color: var(--op-blau);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
font-size: .72rem;
|
||||
font-weight: 700;
|
||||
padding: .25em .6em;
|
||||
}
|
||||
|
||||
.op-meta { color: #555; font-size: .82rem; }
|
||||
|
||||
/* =========================================================================
|
||||
9. FORMULARE
|
||||
========================================================================= */
|
||||
.uk-input,
|
||||
.uk-textarea,
|
||||
.uk-select {
|
||||
border: 2px solid var(--op-blau);
|
||||
background: #fff;
|
||||
color: var(--op-text);
|
||||
}
|
||||
.uk-input:focus,
|
||||
.uk-textarea:focus,
|
||||
.uk-select:focus {
|
||||
border-color: var(--op-blau);
|
||||
background: var(--op-gelb-hell);
|
||||
}
|
||||
.uk-checkbox {
|
||||
border: 2px solid var(--op-blau);
|
||||
background: #fff;
|
||||
}
|
||||
.uk-checkbox:checked,
|
||||
.uk-checkbox:indeterminate {
|
||||
background-color: var(--op-blau);
|
||||
border-color: var(--op-blau);
|
||||
}
|
||||
.uk-form-label { font-weight: 700; color: var(--op-blau); }
|
||||
|
||||
/* =========================================================================
|
||||
10. BILD-PLATZHALTER
|
||||
========================================================================= */
|
||||
.op-bild {
|
||||
position: relative;
|
||||
border: 1px solid var(--op-linie);
|
||||
background-color: var(--op-papier);
|
||||
background-image: repeating-linear-gradient(
|
||||
45deg,
|
||||
var(--op-papier) 0,
|
||||
var(--op-papier) 10px,
|
||||
var(--op-gelb-hell) 10px,
|
||||
var(--op-gelb-hell) 20px
|
||||
);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.op-bild__label {
|
||||
background: #fff;
|
||||
border: 1px solid var(--op-linie);
|
||||
color: var(--op-blau);
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
padding: .2em .6em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .05em;
|
||||
}
|
||||
.op-bild--16-9 { aspect-ratio: 16 / 9; }
|
||||
.op-bild--4-3 { aspect-ratio: 4 / 3; }
|
||||
.op-bild--1-1 { aspect-ratio: 1 / 1; }
|
||||
|
||||
/* =========================================================================
|
||||
11. SEKTIONS-FARBEN & DIVIDER
|
||||
========================================================================= */
|
||||
.op-section-gelb { background: var(--op-gelb); }
|
||||
.op-section-muted { background: var(--op-papier); }
|
||||
.op-section-blau { background: var(--op-blau); color: #fff; }
|
||||
|
||||
.op-oeffnungsbox {
|
||||
background: #fff;
|
||||
border: 2px solid var(--op-blau);
|
||||
padding: 1.75rem;
|
||||
}
|
||||
.op-divider { display: block; width: 100%; height: 46px; }
|
||||
|
||||
/* =========================================================================
|
||||
12. SLIDER / DOTNAV
|
||||
========================================================================= */
|
||||
.uk-dotnav > * > * {
|
||||
border: 1px solid var(--op-blau);
|
||||
background: transparent;
|
||||
}
|
||||
.uk-dotnav > .uk-active > * { background: var(--op-blau); }
|
||||
.op-slidenav { color: var(--op-blau); }
|
||||
|
||||
/* =========================================================================
|
||||
13. FOOTER
|
||||
========================================================================= */
|
||||
.op-footer a { color: #fff; text-decoration: none; }
|
||||
.op-footer a:hover { color: var(--op-gelb); }
|
||||
.op-footer .op-footer-head {
|
||||
color: var(--op-gelb);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .08em;
|
||||
font-size: .8rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
.op-footer hr { border-top: 1px solid rgba(255,255,255,.25); }
|
||||
.op-footer .uk-subnav > li > a { color: #fff; text-transform: none; }
|
||||
.op-footer .uk-subnav > li > a:hover { color: var(--op-gelb); }
|
||||
.op-foerder {
|
||||
border: 2px dashed rgba(255,255,255,.5);
|
||||
color: rgba(255,255,255,.85);
|
||||
padding: 2rem 1rem;
|
||||
text-align: center;
|
||||
font-size: .85rem;
|
||||
}
|
||||
|
||||
/* =========================================================================
|
||||
14. SKIP-LINK
|
||||
========================================================================= */
|
||||
.op-skip-link {
|
||||
position: absolute;
|
||||
left: 1rem;
|
||||
top: -60px;
|
||||
z-index: 2000;
|
||||
background: var(--op-gelb);
|
||||
color: var(--op-blau);
|
||||
font-weight: 700;
|
||||
padding: .6rem 1rem;
|
||||
text-decoration: none;
|
||||
transition: top .15s ease;
|
||||
}
|
||||
.op-skip-link:focus { top: 1rem; }
|
||||
|
||||
/* =========================================================================
|
||||
15. SUCH-ICON
|
||||
========================================================================= */
|
||||
.op-such-icon { color: var(--op-blau); }
|
||||
|
||||
/* =========================================================================
|
||||
16. REDUCED MOTION
|
||||
========================================================================= */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
html { scroll-behavior: auto; }
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.001ms !important;
|
||||
animation-iteration-count: 1 !important;
|
||||
transition-duration: 0.001ms !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- 1. SKIP-LINK -->
|
||||
<a class="op-skip-link" href="#hauptinhalt">Zum Hauptinhalt springen</a>
|
||||
|
||||
<!-- 2. TOPBAR (nur ab @m) -->
|
||||
<div class="op-topbar uk-visible@m">
|
||||
<div class="uk-container uk-container-expand">
|
||||
<div class="uk-flex uk-flex-between uk-flex-middle" style="min-height:44px;">
|
||||
<div>
|
||||
<a href="#">Leichte Sprache</a>
|
||||
</div>
|
||||
<div class="uk-flex uk-flex-middle">
|
||||
<nav aria-label="Sprachauswahl">
|
||||
<ul class="uk-subnav uk-margin-remove">
|
||||
<li class="uk-active"><a href="#" aria-current="true" lang="de">Deutsch</a></li>
|
||||
<li><a href="#" lang="en">English</a></li>
|
||||
<li><a href="#" lang="ar">العربية</a></li>
|
||||
<li><a href="#" lang="el">ελληνικά</a></li>
|
||||
<li><a href="#" lang="tr">Türkçe</a></li>
|
||||
<li><a href="#" lang="uk">українська</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
<a class="op-such-icon uk-margin-small-left" href="#op-suche"
|
||||
uk-toggle="target: #op-suche" aria-label="Suche öffnen"
|
||||
uk-icon="icon: search"></a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- SUCH-MODAL (vollflächig) -->
|
||||
<div id="op-suche" class="uk-modal-full" uk-modal>
|
||||
<div class="uk-modal-dialog uk-flex uk-flex-center uk-flex-middle" style="min-height:100vh;" uk-height-viewport>
|
||||
<button class="uk-modal-close-full uk-close-large" type="button" uk-close aria-label="Suche schließen"></button>
|
||||
<div class="uk-width-2-3@m uk-text-center">
|
||||
<form action="#" role="search" aria-label="Website durchsuchen">
|
||||
<label class="uk-form-label uk-margin-small-bottom uk-display-block" for="op-suchfeld">Suche</label>
|
||||
<div class="uk-search uk-search-large uk-width-1-1">
|
||||
<span uk-search-icon></span>
|
||||
<input id="op-suchfeld" class="uk-search-input" type="search" placeholder="Suchbegriff eingeben …" aria-label="Suchbegriff">
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 3. STICKY NAVBAR -->
|
||||
<header>
|
||||
<div uk-sticky="animation: uk-animation-slide-top; sel-target: .op-navbar; cls-active: uk-navbar-sticky">
|
||||
<nav class="op-navbar uk-navbar-container" aria-label="Hauptnavigation" uk-navbar>
|
||||
<div class="uk-container uk-container-expand">
|
||||
<div uk-navbar>
|
||||
|
||||
<!-- Logo -->
|
||||
<div class="uk-navbar-left">
|
||||
<a class="op-logo uk-navbar-item uk-logo" href="#" aria-label="Dokumentationszentrum – Startseite">
|
||||
<span class="op-logo__mark" aria-hidden="true">SVG</span>
|
||||
<span class="op-logo__word"><span>Dokumentations­</span><span>zentrum</span></span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Desktop-Navigation -->
|
||||
<div class="uk-navbar-right uk-visible@l">
|
||||
<ul class="uk-navbar-nav">
|
||||
<li class="uk-active"><a href="#" aria-current="page">Aktuelles</a></li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-haspopup="true">Besuch <span uk-navbar-parent-icon></span></a>
|
||||
<div class="uk-navbar-dropdown">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<li><a href="#">Öffnungszeiten & Anfahrt</a></li>
|
||||
<li><a href="#">Barrierefreiheit</a></li>
|
||||
<li><a href="#">Führungen buchen</a></li>
|
||||
<li><a href="#">Häufige Fragen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-haspopup="true">Programm <span uk-navbar-parent-icon></span></a>
|
||||
<div class="uk-navbar-dropdown">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<li><a href="#">Veranstaltungen</a></li>
|
||||
<li><a href="#">Ausstellungen</a></li>
|
||||
<li><a href="#">Kooperationen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-haspopup="true">Lernen <span uk-navbar-parent-icon></span></a>
|
||||
<div class="uk-navbar-dropdown">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<li><a href="#">Angebote für Schulen</a></li>
|
||||
<li><a href="#">Workshops</a></li>
|
||||
<li><a href="#">Materialien</a></li>
|
||||
<li><a href="#">Fortbildungen</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li>
|
||||
<a href="#" aria-haspopup="true">Recherche <span uk-navbar-parent-icon></span></a>
|
||||
<div class="uk-navbar-dropdown">
|
||||
<ul class="uk-nav uk-navbar-dropdown-nav">
|
||||
<li><a href="#">Archiv & Bestände</a></li>
|
||||
<li><a href="#">Bibliothek</a></li>
|
||||
<li><a href="#">Digitale Sammlung</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Mobile-Toggle -->
|
||||
<div class="uk-navbar-right uk-hidden@l">
|
||||
<a class="uk-navbar-toggle" href="#op-offcanvas" uk-toggle
|
||||
uk-navbar-toggle-icon aria-label="Menü öffnen"></a>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- OFFCANVAS (mobil) -->
|
||||
<div id="op-offcanvas" uk-offcanvas="overlay: true; flip: true">
|
||||
<div class="uk-offcanvas-bar">
|
||||
<button class="uk-offcanvas-close" type="button" uk-close aria-label="Menü schließen"></button>
|
||||
<nav aria-label="Mobile Navigation">
|
||||
<ul class="uk-nav uk-nav-primary uk-nav-parent-icon" uk-nav>
|
||||
<li class="uk-active"><a href="#" aria-current="page">Aktuelles</a></li>
|
||||
|
||||
<li class="uk-parent">
|
||||
<a href="#">Besuch</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<li><a href="#">Öffnungszeiten & Anfahrt</a></li>
|
||||
<li><a href="#">Barrierefreiheit</a></li>
|
||||
<li><a href="#">Führungen buchen</a></li>
|
||||
<li><a href="#">Häufige Fragen</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="uk-parent">
|
||||
<a href="#">Programm</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<li><a href="#">Veranstaltungen</a></li>
|
||||
<li><a href="#">Ausstellungen</a></li>
|
||||
<li><a href="#">Kooperationen</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="uk-parent">
|
||||
<a href="#">Lernen</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<li><a href="#">Angebote für Schulen</a></li>
|
||||
<li><a href="#">Workshops</a></li>
|
||||
<li><a href="#">Materialien</a></li>
|
||||
<li><a href="#">Fortbildungen</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
|
||||
<li class="uk-parent">
|
||||
<a href="#">Recherche</a>
|
||||
<ul class="uk-nav-sub">
|
||||
<li><a href="#">Archiv & Bestände</a></li>
|
||||
<li><a href="#">Bibliothek</a></li>
|
||||
<li><a href="#">Digitale Sammlung</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- HAUPTINHALT -->
|
||||
<main id="hauptinhalt">
|
||||
|
||||
<!-- 4. HERO -->
|
||||
<section class="op-section-gelb uk-section uk-section-large">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid-large uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-2-3@m">
|
||||
<h1>Wie erinnern wir <span class="op-marker">gemeinsam</span> an das, was nicht vergessen werden darf?</h1>
|
||||
</div>
|
||||
<div class="uk-width-1-3@m">
|
||||
<div class="op-oeffnungsbox">
|
||||
<h2 class="uk-h4 uk-margin-small-bottom">Öffnungszeiten</h2>
|
||||
<ul class="uk-list uk-margin-small">
|
||||
<li><strong>Di – Fr</strong> · 10 – 18 Uhr</li>
|
||||
<li><strong>Sa – So</strong> · 11 – 17 Uhr</li>
|
||||
<li><strong>Mo</strong> · geschlossen</li>
|
||||
</ul>
|
||||
<p class="op-meta uk-margin-small">Der Eintritt ist frei. Platzhaltertext zu Feiertagsregelungen.</p>
|
||||
<a class="uk-button uk-button-primary" href="#">Anfahrt</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Vollbreiter Wellen-Divider („Vorhang"-Motiv) -->
|
||||
<svg class="op-divider uk-margin-large-top" viewBox="0 0 1200 46" preserveAspectRatio="none" aria-hidden="true" focusable="false">
|
||||
<path d="M0,46 L0,20 C60,4 120,4 180,20 C240,36 300,36 360,20 C420,4 480,4 540,20 C600,36 660,36 720,20 C780,4 840,4 900,20 C960,36 1020,36 1080,20 C1140,4 1170,4 1200,20 L1200,46 Z" fill="#edf489"/>
|
||||
</svg>
|
||||
</section>
|
||||
|
||||
<!-- 5. VERANSTALTUNGEN -->
|
||||
<section class="uk-section">
|
||||
<div class="uk-container">
|
||||
<h2>Veranstaltungen</h2>
|
||||
<div class="uk-child-width-1-2@s uk-child-width-1-4@l uk-grid-match uk-margin-medium-top" uk-grid>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<span class="op-kategorie">Vortrag</span>
|
||||
<p class="op-card-datum uk-margin-small-top uk-margin-remove-bottom">Do, 21. Aug · 19 Uhr</p>
|
||||
<h3 class="uk-h5 op-card-titel uk-margin-small"><a href="#">Platzhaltertitel einer Abendveranstaltung</a></h3>
|
||||
<p class="op-meta uk-margin-remove">Kurzer Teaser-Platzhalter in zwei bis drei Zeilen, der neugierig auf den Inhalt macht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<span class="op-kategorie">Führung</span>
|
||||
<p class="op-card-datum uk-margin-small-top uk-margin-remove-bottom">Sa, 23. Aug · 14 Uhr</p>
|
||||
<h3 class="uk-h5 op-card-titel uk-margin-small"><a href="#">Platzhaltertitel einer Führung durch das Haus</a></h3>
|
||||
<p class="op-meta uk-margin-remove">Kurzer Teaser-Platzhalter in zwei bis drei Zeilen mit Blindtext für die Vorschau.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<span class="op-kategorie">Workshop</span>
|
||||
<p class="op-card-datum uk-margin-small-top uk-margin-remove-bottom">Mi, 27. Aug · 16 Uhr</p>
|
||||
<h3 class="uk-h5 op-card-titel uk-margin-small"><a href="#">Platzhaltertitel eines Workshops für Jugendliche</a></h3>
|
||||
<p class="op-meta uk-margin-remove">Kurzer Teaser-Platzhalter in zwei bis drei Zeilen zur inhaltlichen Einordnung.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default uk-card-body">
|
||||
<span class="op-kategorie">Gespräch</span>
|
||||
<p class="op-card-datum uk-margin-small-top uk-margin-remove-bottom">Fr, 29. Aug · 18 Uhr</p>
|
||||
<h3 class="uk-h5 op-card-titel uk-margin-small"><a href="#">Platzhaltertitel eines Podiumsgesprächs</a></h3>
|
||||
<p class="op-meta uk-margin-remove">Kurzer Teaser-Platzhalter in zwei bis drei Zeilen für die Übersicht.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<a class="uk-button uk-button-default" href="#">Alle Veranstaltungen</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 6. LEITBILD -->
|
||||
<section class="op-section-muted uk-section">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid-large uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-3-5@m">
|
||||
<h2>Unser Leitbild</h2>
|
||||
<p class="uk-text-lead">Ein Platzhalter-Leitsatz, der in einem Satz beschreibt, wofür das Dokumentationszentrum steht und arbeitet.</p>
|
||||
<p>Fließtext-Platzhalter: Lorem-ipsum-artiger Blindtext, der den Umfang eines einleitenden Absatzes andeutet und die Typografie im Fließtext demonstriert. Der Text dient ausschließlich der Vorschau und wird produktiv ersetzt.</p>
|
||||
<p>Ein zweiter Absatz mit weiterem Platzhaltertext, der zeigt, wie mehrere Absätze im Layout wirken und wie viel Raum das Leitbild einnimmt.</p>
|
||||
<a class="uk-button uk-button-text" href="#">Mehr erfahren</a>
|
||||
</div>
|
||||
<div class="uk-width-2-5@m">
|
||||
<!-- Vorhang-Illustration: geschwungene vertikale Linien, abwechselnd blau/gelb -->
|
||||
<svg viewBox="0 0 400 300" width="100%" role="img" aria-label="Illustration: geschwungene Vorhangbahnen">
|
||||
<rect x="0" y="0" width="400" height="300" fill="#ffffff"/>
|
||||
<path d="M40,0 C20,75 60,150 40,225 C20,285 40,300 40,300" fill="none" stroke="#1f2a63" stroke-width="8"/>
|
||||
<path d="M100,0 C80,75 120,150 100,225 C80,285 100,300 100,300" fill="none" stroke="#edf489" stroke-width="8"/>
|
||||
<path d="M160,0 C140,75 180,150 160,225 C140,285 160,300 160,300" fill="none" stroke="#1f2a63" stroke-width="8"/>
|
||||
<path d="M220,0 C200,75 240,150 220,225 C200,285 220,300 220,300" fill="none" stroke="#edf489" stroke-width="8"/>
|
||||
<path d="M280,0 C260,75 300,150 280,225 C260,285 280,300 280,300" fill="none" stroke="#1f2a63" stroke-width="8"/>
|
||||
<path d="M340,0 C320,75 360,150 340,225 C320,285 340,300 340,300" fill="none" stroke="#edf489" stroke-width="8"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 7. NEUIGKEITEN -->
|
||||
<section class="uk-section">
|
||||
<div class="uk-container">
|
||||
<h2>Neuigkeiten</h2>
|
||||
<div class="uk-child-width-1-3@m uk-grid-match uk-margin-medium-top" uk-grid>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top">
|
||||
<div class="op-bild op-bild--16-9"><span class="op-bild__label">Bild 16:9</span></div>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-h5 op-card-titel"><a href="#">Platzhaltertitel eines Beitrags aus dem Haus</a></h3>
|
||||
<p class="op-meta uk-margin-small">von Vorname Nachname · 12. Aug 2026</p>
|
||||
<p class="uk-margin-remove">Anriss-Platzhalter: kurzer Textausschnitt, der den Beitrag anteasert und zum Weiterlesen einlädt.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top">
|
||||
<div class="op-bild op-bild--16-9"><span class="op-bild__label">Bild 16:9</span></div>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-h5 op-card-titel"><a href="#">Platzhaltertitel eines Berichts zur Recherche</a></h3>
|
||||
<p class="op-meta uk-margin-small">von Vorname Nachname · 8. Aug 2026</p>
|
||||
<p class="uk-margin-remove">Anriss-Platzhalter: kurzer Textausschnitt mit Blindtext für die Vorschau der Kachel.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="uk-card uk-card-default">
|
||||
<div class="uk-card-media-top">
|
||||
<div class="op-bild op-bild--16-9"><span class="op-bild__label">Bild 16:9</span></div>
|
||||
</div>
|
||||
<div class="uk-card-body">
|
||||
<h3 class="uk-h5 op-card-titel"><a href="#">Platzhaltertitel einer Ankündigung</a></h3>
|
||||
<p class="op-meta uk-margin-small">von Vorname Nachname · 3. Aug 2026</p>
|
||||
<p class="uk-margin-remove">Anriss-Platzhalter: kurzer Textausschnitt, der die Neuigkeit knapp zusammenfasst.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="uk-margin-medium-top">
|
||||
<a class="uk-button uk-button-default" href="#">Alle Neuigkeiten</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 8. BILDERGALERIE -->
|
||||
<section class="op-section-muted uk-section">
|
||||
<div class="uk-container">
|
||||
<h2>Aus der Bildergalerie</h2>
|
||||
</div>
|
||||
<div class="uk-margin-medium-top uk-container uk-container-expand">
|
||||
<div uk-slider="container-expand: true">
|
||||
<div class="uk-position-relative">
|
||||
|
||||
<ul class="uk-slider-items uk-child-width-1-2 uk-child-width-1-3@m uk-grid">
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 1</span></div></li>
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 2</span></div></li>
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 3</span></div></li>
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 4</span></div></li>
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 5</span></div></li>
|
||||
<li><div class="op-bild op-bild--4-3"><span class="op-bild__label">Galerie 6</span></div></li>
|
||||
</ul>
|
||||
|
||||
<a class="uk-position-center-left uk-position-small op-slidenav" href="#" uk-slidenav-previous uk-slider-item="previous" aria-label="Vorheriges Bild"></a>
|
||||
<a class="uk-position-center-right uk-position-small op-slidenav" href="#" uk-slidenav-next uk-slider-item="next" aria-label="Nächstes Bild"></a>
|
||||
</div>
|
||||
|
||||
<ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin-medium-top"></ul>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<!-- 9. NEWSLETTER -->
|
||||
<section class="op-section-gelb uk-section">
|
||||
<div class="uk-container">
|
||||
<div class="uk-grid-large uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-1-2@m">
|
||||
<h2>Newsletter</h2>
|
||||
<p class="uk-text-lead">Platzhaltersatz: Bleiben Sie über Veranstaltungen und Neuigkeiten auf dem Laufenden.</p>
|
||||
</div>
|
||||
<div class="uk-width-1-2@m">
|
||||
<form action="#" method="post" novalidate>
|
||||
<div class="uk-margin">
|
||||
<label class="uk-form-label" for="op-newsletter-mail">E-Mail-Adresse</label>
|
||||
<div class="uk-form-controls">
|
||||
<input class="uk-input" id="op-newsletter-mail" type="email" name="email"
|
||||
autocomplete="email" placeholder="name@beispiel.de" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<label>
|
||||
<input class="uk-checkbox" type="checkbox" name="datenschutz" required>
|
||||
Ich habe die <a href="#">Datenschutzerklärung</a> zur Kenntnis genommen und stimme der Verarbeitung meiner Daten zu.
|
||||
</label>
|
||||
</div>
|
||||
<div class="uk-margin">
|
||||
<button class="uk-button uk-button-primary" type="submit">Anmelden</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<!-- 10. FOOTER -->
|
||||
<footer class="op-footer op-section-blau uk-section">
|
||||
<div class="uk-container">
|
||||
|
||||
<div class="uk-child-width-1-2@s uk-child-width-1-4@m uk-grid-large" uk-grid>
|
||||
<div>
|
||||
<nav aria-label="Footer: Besuch">
|
||||
<p class="op-footer-head">Besuch</p>
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li><a href="#">Öffnungszeiten & Anfahrt</a></li>
|
||||
<li><a href="#">Barrierefreiheit</a></li>
|
||||
<li><a href="#">Führungen buchen</a></li>
|
||||
<li><a href="#">Häufige Fragen</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<nav aria-label="Footer: Programm">
|
||||
<p class="op-footer-head">Programm</p>
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li><a href="#">Veranstaltungen</a></li>
|
||||
<li><a href="#">Ausstellungen</a></li>
|
||||
<li><a href="#">Kooperationen</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<nav aria-label="Footer: Lernen">
|
||||
<p class="op-footer-head">Lernen</p>
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li><a href="#">Angebote für Schulen</a></li>
|
||||
<li><a href="#">Workshops</a></li>
|
||||
<li><a href="#">Materialien</a></li>
|
||||
<li><a href="#">Fortbildungen</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div>
|
||||
<nav aria-label="Footer: Recherche">
|
||||
<p class="op-footer-head">Recherche</p>
|
||||
<ul class="uk-nav uk-nav-default">
|
||||
<li><a href="#">Archiv & Bestände</a></li>
|
||||
<li><a href="#">Bibliothek</a></li>
|
||||
<li><a href="#">Digitale Sammlung</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr class="uk-margin-large">
|
||||
|
||||
<div class="uk-grid-large uk-flex-middle" uk-grid>
|
||||
<div class="uk-width-auto">
|
||||
<a class="op-logo" href="#" aria-label="Dokumentationszentrum – Startseite">
|
||||
<span class="op-logo__mark op-logo__mark--invert" aria-hidden="true">SVG</span>
|
||||
<span class="op-logo__word" style="color:#fff;"><span>Dokumentations­</span><span>zentrum</span></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="uk-width-expand@s">
|
||||
<address style="font-style:normal;">
|
||||
Musterstraße 1<br>
|
||||
12345 Musterstadt<br>
|
||||
<a href="#">post@beispiel.de</a> · +49 (0)000 000000
|
||||
</address>
|
||||
</div>
|
||||
<div class="uk-width-auto">
|
||||
<a href="#" aria-label="Instagram" uk-icon="icon: instagram; ratio: 1.3"></a>
|
||||
</div>
|
||||
<div class="uk-width-auto">
|
||||
<nav aria-label="Weitere Links">
|
||||
<ul class="uk-subnav uk-margin-remove">
|
||||
<li><a href="#">Presse</a></li>
|
||||
<li><a href="#">Ausschreibungen</a></li>
|
||||
<li><a href="#">Jobs</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="op-foerder uk-margin-large-top">
|
||||
Platzhalterfläche für Förderlogos
|
||||
</div>
|
||||
|
||||
<hr class="uk-margin-large">
|
||||
|
||||
<div class="uk-flex uk-flex-between uk-flex-wrap uk-text-small">
|
||||
<span>© 2026 Dokumentationszentrum</span>
|
||||
<nav aria-label="Rechtliches">
|
||||
<a href="#">Impressum</a> · <a href="#">Datenschutzinformation</a>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Reference in New Issue
Block a user