/* ============================================================
MÄRCHEN-ERLEBNIS
Modernes, märchenhaftes Webdesign
Ohne externe Fonts / ohne Google Fonts
============================================================ */
/* ------------------------------------------------------------
GRUNDLAGEN
------------------------------------------------------------ */
html {
box-sizing: border-box;
scroll-behavior: smooth;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
/* ------------------------------------------------------------
FARBEN
------------------------------------------------------------ */
:root {
```
/* Wald */
--forest: #23483c;
--forest-dark: #17352c;
--forest-light: #477461;
/* Papier / Creme */
--cream: #fbf7ed;
--cream-dark: #f0e5cf;
/* Gold */
--gold: #c4a15a;
--gold-light: #dfca98;
/* Beerenton */
--berry: #7b4652;
/* Text */
--text: #35423d;
--text-light: #66736d;
/* Weiss */
--white: #ffffff;
/* Schatten */
--shadow:
0 10px 35px rgba(23, 53, 44, 0.12);
--shadow-hover:
0 16px 45px rgba(23, 53, 44, 0.18);
/* Ecken */
--radius: 18px;
```
}
/* ------------------------------------------------------------
BODY
------------------------------------------------------------ */
body {
```
margin: 0 auto;
max-width: 72em;
padding: 1.5rem;
font-family:
"Trebuchet MS",
"Segoe UI",
Arial,
sans-serif;
font-size: 1rem;
line-height: 1.7;
color: var(--text);
background:
radial-gradient(
circle at 10% 10%,
rgba(196, 161, 90, 0.10),
transparent 30%
),
linear-gradient(
135deg,
#e9eee7 0%,
#f5f0e5 45%,
#e8eee8 100%
);
min-height: 100vh;
```
}
/* ------------------------------------------------------------
ÜBERSCHRIFTEN
------------------------------------------------------------ */
h1,
h2,
h3,
h4 {
```
font-family:
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif;
color: var(--forest-dark);
line-height: 1.2;
margin-top: 0;
margin-bottom: 1rem;
font-weight: 600;
letter-spacing: 0.01em;
```
}
h1 {
```
font-size: clamp(
2.4rem,
6vw,
4rem
);
letter-spacing: 0.02em;
```
}
h2 {
```
font-size: clamp(
1.9rem,
4vw,
2.8rem
);
```
}
h3 {
```
font-size: 1.7rem;
```
}
h4 {
```
font-size: 1.4rem;
```
}
/* ------------------------------------------------------------
TEXT
------------------------------------------------------------ */
p {
```
margin-top: 0;
margin-bottom: 1rem;
```
}
a {
```
color: var(--berry);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition:
color 0.2s ease;
```
}
a:hover,
a:focus {
```
color: var(--forest);
```
}
/* ------------------------------------------------------------
HEADER
------------------------------------------------------------ */
header {
position: relative;
display: flex;
align-items: center;
min-height: 150px;
margin: 0 0 1rem 0;
padding: 2rem 2.5rem;
background:
linear-gradient(
135deg,
var(--forest-dark),
var(--forest)
);
color: var(--white);
border-radius: 24px;
box-shadow: var(--shadow);
overflow: hidden;
}
/* Logo */
header img {
flex: 0 0 auto;
width: 110px;
height: auto;
margin: 0 2rem 0 0;
border-radius: 14px;
box-shadow:
0 5px 18px rgba(0, 0, 0, 0.18);
}
/* Seitentitel */
header h1 {
margin: 0;
color: var(--cream);
font-family:
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif;
font-size: clamp(
2.2rem,
5vw,
3.5rem
);
font-weight: 600;
line-height: 1.1;
letter-spacing: 0.02em;
}
/* kleines märchenhaftes Funkeln */
header::before {
content: "✦";
position: absolute;
right: 2rem;
top: 1.2rem;
color: var(--gold-light);
font-size: 2rem;
opacity: 0.7;
}
header::after {
content: "✧";
position: absolute;
right: 5rem;
bottom: 1rem;
color: var(--gold-light);
font-size: 1.2rem;
opacity: 0.5;
}
/* ------------------------------------------------------------
HEADER AUF SMARTPHONES
------------------------------------------------------------ */
@media (max-width: 31.99em) {
header {
min-height: 120px;
padding: 1.3rem;
border-radius: 18px;
}
header img {
width: 75px;
margin-right: 1rem;
border-radius: 10px;
}
header h1 {
font-size: 2rem;
}
header::before {
right: 1rem;
top: 0.7rem;
font-size: 1.4rem;
}
header::after {
right: 3rem;
bottom: 0.7rem;
}
}
/* ------------------------------------------------------------
NAVIGATION
------------------------------------------------------------ */
nav {
margin: 0 0 1rem 0;
padding: 0;
background: rgba(255, 255, 255, 0.94);
border: 1px solid rgba(35, 72, 60, 0.10);
border-radius: var(--radius);
box-shadow:
0 6px 20px rgba(23, 53, 44, 0.08);
overflow: hidden;
}
/* Liste */
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
/* einzelne Menüpunkte */
nav li {
margin: 0;
padding: 0;
border-bottom: 1px solid rgba(35, 72, 60, 0.08);
}
nav li:last-child {
border-bottom: 0;
}
/* Links */
nav a {
position: relative;
display: block;
margin: 0;
padding: 0.85rem 1rem 0.85rem 1.15rem;
color: var(--forest);
background: transparent;
font-family:
"Trebuchet MS",
"Segoe UI",
Arial,
sans-serif;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.08em;
text-decoration: none;
transition:
color 0.25s ease,
background-color 0.25s ease,
padding-left 0.25s ease;
}
/* kleiner goldener Akzent */
nav a::before {
content: "✦";
display: inline-block;
margin-right: 0.55rem;
color: var(--gold);
font-size: 0.65rem;
opacity: 0.7;
transition:
transform 0.25s ease,
opacity 0.25s ease;
}
/* Hover */
nav a:hover,
nav a:focus {
color: var(--white);
background:
linear-gradient(
90deg,
var(--forest),
var(--forest-light)
);
padding-left: 1.4rem;
outline: none;
}
nav a:hover::before,
nav a:focus::before {
color: var(--gold-light);
opacity: 1;
transform: rotate(45deg);
}
/* Aktiver Menüpunkt
------------------------------------------------------------
Falls du später dem aktuellen die Klasse "active"
gibst, wird dieser automatisch hervorgehoben.
Beispiel:
AGENDA
*/
nav li.active a {
color: var(--white);
background:
linear-gradient(
90deg,
var(--forest-dark),
var(--forest)
);
}
nav li.active a::before {
color: var(--gold-light);
opacity: 1;
}
/* ------------------------------------------------------------
MAIN
------------------------------------------------------------ */
main {
```
display: block;
min-width: 16em;
margin:
0 0 1rem 0;
padding: 2rem;
background:
rgba(
255,
255,
255,
0.92
);
border:
1px solid rgba(
35,
72,
60,
0.08
);
border-radius: 22px;
box-shadow: var(--shadow);
```
}
/* ------------------------------------------------------------
ARTICLE / SECTION / ASIDE
------------------------------------------------------------ */
article,
section {
```
margin:
0 0 1.5rem 0;
padding: 0;
```
}
aside {
```
margin:
0 0 1.5rem 0;
padding: 1.5rem;
background:
linear-gradient(
135deg,
#f7f3e7,
#edf2e8
);
border:
1px solid rgba(
71,
116,
97,
0.18
);
border-radius: var(--radius);
box-shadow:
0 7px 22px
rgba(
23,
53,
44,
0.08
);
```
}
/* ------------------------------------------------------------
MÄRCHENHAFTE TRENNLINIE
------------------------------------------------------------ */
hr {
```
border: 0;
height: 1px;
margin: 2rem 0;
background:
linear-gradient(
to right,
transparent,
var(--gold-light),
transparent
);
```
}
/* ------------------------------------------------------------
INHALTSBEREICHE
------------------------------------------------------------ */
div.table {
```
display: table;
width: 100%;
border-collapse: separate;
border-spacing: 0;
```
}
div.tr {
```
display: table-row;
```
}
div.td {
```
display: table-cell;
vertical-align: top;
padding: 1rem;
```
}
/* ------------------------------------------------------------
DEIN MÄRCHEN-ANGEBOT
------------------------------------------------------------ */
/* Erste Spalte = Text */
div.table .td:first-child {
```
width: 62%;
```
}
/* Zweite Spalte = Bild */
div.table .td:last-child {
```
width: 38%;
```
}
/* Kinder / Erwachsene / Betagte */
div.td p {
```
margin-bottom: 0.5rem;
```
}
/*
Die Abschnittsbezeichnungen wie
"...Kinder:" und "...Erwachsene:"
werden etwas märchenhafter dargestellt.
*/
div.td p:not(:last-child) {
```
color: var(--forest);
font-family:
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif;
font-size: 1.35rem;
font-weight: 600;
```
}
/* ------------------------------------------------------------
LISTEN
------------------------------------------------------------ */
div.td ul {
```
margin-top: 0.2rem;
margin-bottom: 1.4rem;
padding-left: 0;
list-style: none;
```
}
div.td li {
```
position: relative;
padding:
0.3rem
0
0.3rem
1.5rem;
```
}
div.td li::before {
```
content: "✦";
position: absolute;
left: 0;
top: 0.35rem;
color: var(--gold);
font-size: 0.75rem;
```
}
/* ------------------------------------------------------------
ABSCHLUSS / SIGNATUR
------------------------------------------------------------ */
div.td p:last-child {
```
margin-top: 1.5rem;
padding-top: 1.2rem;
border-top:
1px solid
var(--gold-light);
color: var(--forest);
font-family:
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif;
font-size: 1.25rem;
font-style: italic;
```
}
/* ------------------------------------------------------------
BILDER
------------------------------------------------------------ */
img {
```
max-width: 100%;
height: auto;
```
}
main img {
```
display: block;
width: 100%;
border-radius: 16px;
box-shadow:
0 10px 30px
rgba(
23,
53,
44,
0.15
);
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
```
}
main img:hover {
```
transform:
translateY(-3px);
box-shadow:
0 15px 38px
rgba(
23,
53,
44,
0.20
);
```
}
/* ------------------------------------------------------------
AGENDA
------------------------------------------------------------ */
table.agenda {
```
width: 100%;
display: table;
margin: 1rem 0;
padding: 0;
background:
var(--white);
border:
1px solid
rgba(
35,
72,
60,
0.10
);
border-radius: var(--radius);
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
box-shadow:
0 7px 22px
rgba(
23,
53,
44,
0.08
);
```
}
table.agenda tr {
```
background: transparent;
```
}
table.agenda td {
```
padding:
0.8rem
1rem;
border-bottom:
1px solid
var(--cream-dark);
```
}
table.agenda tr:last-child td {
```
border-bottom: 0;
```
}
td.Title {
```
padding: 1rem;
color: var(--forest);
background:
var(--cream);
font-family:
"Palatino Linotype",
Palatino,
Georgia,
"Times New Roman",
serif;
font-size: 1.3rem;
font-weight: 600;
```
}
/* ------------------------------------------------------------
FOOTER
------------------------------------------------------------ */
footer {
```
position: relative;
margin:
1rem 0 0 0;
padding:
1.5rem 2rem;
color:
rgba(
255,
255,
255,
0.90
);
background:
linear-gradient(
135deg,
var(--forest-dark),
var(--forest)
);
border-radius: 20px;
box-shadow: var(--shadow);
overflow: hidden;
```
}
footer::after {
```
content: "✧ ✦ ✧";
position: absolute;
right: 1.5rem;
top: 50%;
transform:
translateY(-50%);
color:
var(--gold-light);
opacity: 0.45;
letter-spacing: 0.5rem;
```
}
footer a {
```
color:
var(--gold-light);
```
}
footer p {
```
margin: 0;
```
}
/* ------------------------------------------------------------
DESKTOP
------------------------------------------------------------ */
@media (min-width: 32em) {
```
nav {
float: left;
width: 12.5rem;
margin-right: 1rem;
}
main {
margin-left: 13.5rem;
}
```
}
/* ------------------------------------------------------------
TABLET
------------------------------------------------------------ */
@media (max-width: 48em) {
```
body {
padding: 1rem;
}
header {
padding: 1.5rem;
}
main {
padding: 1.5rem;
}
div.table .td:first-child,
div.table .td:last-child {
width: auto;
}
```
}
/* ------------------------------------------------------------
SMARTPHONE
------------------------------------------------------------ */
@media (max-width: 31.99em) {
```
body {
padding: 0.6rem;
}
header {
min-height: 110px;
padding: 1.2rem;
border-radius: 18px;
}
header img {
width: 5.5em;
margin-right: 1rem;
}
nav {
margin-bottom: 1rem;
}
nav a {
padding:
0.8rem
1rem;
}
main {
margin: 0;
padding: 1.2rem;
border-radius: 18px;
}
/*
Das bisherige Tabellenlayout
wird auf Smartphones zu einem
normalen untereinander angeordneten
Layout.
*/
div.table,
div.tr,
div.td {
display: block;
}
div.td {
padding:
0.5rem 0;
}
div.table .td:first-child,
div.table .td:last-child {
width: 100%;
}
div.table .td:last-child {
margin-top: 1rem;
}
/*
Bild auf kleinen Bildschirmen
*/
div.table .td:last-child img {
width: 100%;
max-height: 350px;
object-fit: cover;
}
footer {
padding: 1.3rem;
border-radius: 18px;
}
footer::after {
display: none;
}
```
}
/* ------------------------------------------------------------
ZUGÄNGLICHKEIT
------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
```
html {
scroll-behavior: auto;
}
*,
*::before,
*::after {
transition: none !important;
animation: none !important;
}
```
}