/* =====================================================================
WIESENORCHESTER – STYLESHEET
===================================================================== */
/* ---------- Schriften (lokal, keine Verbindung zu Google) ---------- */
@font-face {
font-family: "Fraunces";
src: url("../schriften/fraunces-latin-full-normal.woff2") format("woff2");
font-weight: 100 900;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Fraunces";
src: url("../schriften/fraunces-latin-full-italic.woff2") format("woff2");
font-weight: 100 900;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Figtree";
src: url("../schriften/figtree-latin-wght-normal.woff2") format("woff2");
font-weight: 300 900;
font-style: normal;
font-display: swap;
}
/* ---------- Farben & Maße ---------- */
:root {
--papier: #fffdf9;
--sand: #f3ebe0;
--beige: #dccdb8;
--beige-tief: #c7b294;
--milchkaffee: #a98468;
--kakao: #5a3f2c;
--kakao-tief: #3d2a1d;
--text: #4a3526;
--text-leise: #7a6352;
--schrift-titel: "Fraunces", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
--schrift-text: "Figtree", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
--fs-klein: 0.875rem;
--fs-basis: 1.0625rem;
--fs-mittel: 1.3rem;
--fs-gross: clamp(1.85rem, 1.2rem + 2.4vw, 2.75rem);
--fs-riesig: clamp(3rem, 1.4rem + 7vw, 7rem);
--breite: 1180px;
--rand: clamp(1.25rem, 4vw, 3rem);
--kopf-hoehe: 76px;
--weich: cubic-bezier(0.22, 0.8, 0.26, 1);
}
/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-hoehe) + 12px); }
body {
margin: 0;
background: var(--papier);
color: var(--text);
font-family: var(--schrift-text);
font-size: var(--fs-basis);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: var(--kakao); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--milchkaffee); }
:focus-visible { outline: 2px solid var(--milchkaffee); outline-offset: 3px; border-radius: 4px; }
h1, h2, h3 {
font-family: var(--schrift-titel);
font-variation-settings: "SOFT" 100, "WONK" 0;
font-weight: 420;
color: var(--kakao);
line-height: 1.12;
margin: 0 0 0.5em;
letter-spacing: -0.01em;
}
h2 { font-size: var(--fs-gross); }
h3 { font-size: var(--fs-mittel); font-weight: 480; }
p { margin: 0 0 1em; max-width: 65ch; }
.innen { width: min(100% - 2 * var(--rand), var(--breite)); margin-inline: auto; }
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
position: absolute; left: 1rem; top: -3rem; z-index: 100;
background: var(--kakao); color: var(--papier); padding: 0.5rem 1rem; border-radius: 6px;
}
.sprung:focus { top: 1rem; color: var(--papier); }
/* ---------- Buttons ---------- */
.knopf {
display: inline-flex; align-items: center; gap: 0.55rem;
font: 600 0.98rem/1 var(--schrift-text);
padding: 0.95rem 1.5rem;
border-radius: 999px;
border: 1.5px solid var(--kakao);
background: var(--kakao); color: var(--papier);
text-decoration: none; cursor: pointer;
transition: background 0.3s var(--weich), color 0.3s var(--weich), transform 0.3s var(--weich);
}
.knopf:hover { background: var(--kakao-tief); color: var(--papier); transform: translateY(-2px); }
.knopf--leise { background: transparent; color: var(--kakao); }
.knopf--leise:hover { background: var(--kakao); color: var(--papier); }
.knopf svg { width: 1.1em; height: 1.1em; }
/* ---------- Kopfzeile ---------- */
.kopf {
position: fixed; inset: 0 0 auto 0; z-index: 50;
height: var(--kopf-hoehe);
transition: background 0.4s var(--weich), box-shadow 0.4s var(--weich);
}
.kopf.ist-gescrollt, .kopf.ist-offen {
background: rgba(255, 253, 249, 0.9);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
box-shadow: 0 1px 0 rgba(90, 63, 44, 0.08);
}
.kopf .innen { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.marke { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--kakao); }
.marke img { width: 46px; height: 46px; transition: transform 0.6s var(--weich); }
.marke:hover img { transform: rotate(-12deg); }
.marke span { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: 1.3rem; font-weight: 450; }
.navi ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(0.9rem, 2vw, 2rem); }
.navi a {
position: relative; text-decoration: none; color: var(--text); font-weight: 500; font-size: 0.98rem; padding: 0.3rem 0;
}
.navi a::after {
content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px;
background: var(--milchkaffee); transform: scaleX(0); transform-origin: left;
transition: transform 0.35s var(--weich);
}
.navi a:hover::after, .navi a[aria-current="page"]::after { transform: scaleX(1); }
.navi-knopf { display: none; }
@media (max-width: 820px) {
.navi-knopf {
display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%;
border: 1.5px solid var(--beige-tief); background: var(--papier); cursor: pointer; color: var(--kakao);
}
.navi-knopf span, .navi-knopf span::before, .navi-knopf span::after {
display: block; width: 18px; height: 1.5px; background: currentColor; position: relative;
transition: transform 0.3s var(--weich), background 0.3s;
}
.navi-knopf span::before, .navi-knopf span::after { content: ""; position: absolute; left: 0; }
.navi-knopf span::before { top: -6px; }
.navi-knopf span::after { top: 6px; }
.navi-knopf[aria-expanded="true"] span { background: transparent; }
.navi-knopf[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.navi-knopf[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
.navi {
position: fixed; inset: var(--kopf-hoehe) 0 auto 0;
background: var(--papier); box-shadow: 0 18px 30px -20px rgba(61, 42, 29, 0.35);
clip-path: inset(0 0 100% 0); visibility: hidden;
transition: clip-path 0.45s var(--weich), visibility 0s 0.45s;
}
.navi.ist-offen { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path 0.45s var(--weich); }
.navi ul { flex-direction: column; gap: 0; padding: 0.5rem var(--rand) 1.5rem; }
.navi a { display: block; padding: 0.9rem 0; font-family: var(--schrift-titel); font-size: 1.35rem; font-variation-settings: "SOFT" 100; }
.navi a::after { display: none; }
}
/* ---------- Hero ---------- */
.hero {
position: relative; min-height: min(100svh, 900px);
background: linear-gradient(180deg, var(--papier) 0%, var(--sand) 72%);
display: flex; align-items: center;
padding: calc(var(--kopf-hoehe) + 2rem) 0 clamp(10rem, 24vw, 17rem);
overflow: hidden;
}
.hero .innen { position: relative; z-index: 2; display: grid; grid-template-columns: 1.25fr 0.75fr; align-items: center; gap: 2rem; }
.hero h1 {
font-size: var(--fs-riesig); font-weight: 380; letter-spacing: -0.025em; line-height: 0.95; margin-bottom: 0.4em;
}
.hero h1 .zeile { display: block; overflow: hidden; padding-bottom: 0.1em; }
.hero h1 .zeile > span { display: inline-block; }
.hero h1 .zeile:nth-child(2) { font-style: italic; font-weight: 340; padding-left: 0.6em; color: var(--milchkaffee); }
.hero-text { font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.25rem); color: var(--text-leise); max-width: 36ch; margin-bottom: 2rem; }
.hero-aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-signet { justify-self: center; width: min(100%, 360px); aspect-ratio: 1; position: relative; }
.hero-signet img { width: 100%; height: 100%; object-fit: contain; }
.hero-signet::before {
content: ""; position: absolute; inset: 6%; border-radius: 50%;
background: radial-gradient(circle at 40% 35%, rgba(220, 205, 184, 0.75), transparent 70%);
z-index: -1;
}
.wiese { position: absolute; left: 0; bottom: 0; width: 100%; height: clamp(220px, 30vw, 400px); z-index: 1; pointer-events: none; }
.wiese .notenlinie { fill: none; stroke: var(--beige-tief); stroke-width: 1.3; }
.wiese .halm { stroke: var(--milchkaffee); stroke-width: 1.3; fill: none; stroke-linecap: round; opacity: 0.5; }
.wiese .stiel { stroke: var(--kakao); stroke-width: 1.5; fill: none; stroke-linecap: round; }
.wiese .blatt { fill: var(--milchkaffee); opacity: 0.85; }
/* Einstiegsanimation */
.js .hero h1 .zeile > span { transform: translateY(110%); animation: hochgleiten 1.1s var(--weich) forwards; }
.js .hero h1 .zeile:nth-child(2) > span { animation-delay: 0.15s; }
.js .hero-text, .js .hero-aktionen { opacity: 0; animation: einblenden 1s var(--weich) forwards; }
.js .hero-text { animation-delay: 0.45s; }
.js .hero-aktionen { animation-delay: 0.6s; }
.js .hero-signet img { opacity: 0; transform: rotate(-25deg) scale(0.85); animation: signet 1.6s var(--weich) 0.3s forwards; }
.wiese .notenlinie { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2.2s var(--weich) forwards; }
.wiese .wachsen { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(0); animation: wachsen 1.1s var(--weich) forwards; }
.wiese .kopfbluete { transform-box: fill-box; transform-origin: center; transform: scale(0); animation: bluehen 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
.wiese .wiegen { transform-box: fill-box; transform-origin: 50% 100%; animation: wiegen 5s ease-in-out infinite alternate; }
@keyframes hochgleiten { to { transform: translateY(0); } }
@keyframes einblenden { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes signet { to { opacity: 1; transform: none; } }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
@keyframes wachsen { to { transform: scaleY(1); } }
@keyframes bluehen { to { transform: scale(1); } }
@keyframes wiegen { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes schweben { 50% { transform: translateY(-8px) rotate(6deg); } }
@media (max-width: 820px) {
.hero { align-items: flex-start; }
.hero .innen { grid-template-columns: 1fr; gap: 1rem; }
.hero-signet { grid-row: 1; width: 120px; justify-self: start; }
}
/* ---------- Abschnitte ---------- */
.abschnitt { padding: clamp(4.5rem, 10vw, 8rem) 0; position: relative; }
.abschnitt--sand { background: var(--sand); }
.einleitung { max-width: 58ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.einleitung p { color: var(--text-leise); font-size: 1.1rem; }
.welle { display: block; width: 100%; height: clamp(40px, 6vw, 90px); }
.welle path { fill: var(--sand); }
.welle--unten { transform: scaleY(-1); margin-top: -1px; }
.welle--oben { margin-bottom: -1px; }
/* Dunkles Band (z. B. Orientierungsjahr auf der Startseite) */
.abschnitt--dunkel { background: var(--kakao-tief); color: #e9dccb; }
.abschnitt--dunkel h2, .abschnitt--dunkel h3 { color: var(--papier); }
.abschnitt--dunkel p, .abschnitt--dunkel .einleitung p { color: var(--beige-tief); }
.abschnitt--dunkel a:not(.knopf) { color: var(--beige); }
.abschnitt--dunkel .knopf { background: var(--sand); border-color: var(--sand); color: var(--kakao-tief); }
.abschnitt--dunkel .knopf:hover { background: var(--papier); border-color: var(--papier); color: var(--kakao-tief); }
.abschnitt--dunkel .bildwechsel-buehne { box-shadow: 0 28px 50px -24px rgba(0, 0, 0, 0.6); }
.welle--dunkel path { fill: var(--kakao-tief); }
/* Einblenden beim Scrollen */
.js .auftauchen { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--weich), transform 0.9s var(--weich); }
.js .auftauchen.ist-sichtbar { opacity: 1; transform: none; }
/* ---------- Über uns ---------- */
.ueber { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.ueber-text .auftakt { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem); line-height: 1.45; color: var(--kakao); font-weight: 380; }
.ueber-bild { position: relative; isolation: isolate; }
.ueber-bild { justify-self: center; width: 100%; max-width: 380px; }
.ueber-bild img {
width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 85%;
border-radius: 58% 42% 52% 48% / 44% 52% 48% 56%;
animation: formen 16s ease-in-out infinite alternate;
}
.ueber-bild::after {
content: ""; position: absolute; inset: -18px -18px 18px 18px; z-index: -1;
border: 1.5px solid var(--beige-tief);
border-radius: 46% 54% 44% 56% / 55% 45% 55% 45%;
animation: formen 20s ease-in-out infinite alternate-reverse;
}
@keyframes formen {
50% { border-radius: 45% 55% 60% 40% / 52% 42% 58% 48%; }
100% { border-radius: 52% 48% 42% 58% / 40% 60% 42% 60%; }
}
.eckdaten { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1.5rem 2rem; margin: 2.2rem 0 0; }
.eckdaten div { padding-left: 1rem; border-left: 2px solid var(--beige); }
.eckdaten dt { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: 1.15rem; color: var(--kakao); font-weight: 500; }
.eckdaten dd { margin: 0.15rem 0 0; color: var(--text-leise); font-size: 0.95rem; }
@media (max-width: 820px) {
.ueber { grid-template-columns: 1fr; }
.ueber-bild { max-width: 340px; margin-inline: auto; }
}
/* ---------- Regelmäßige Angebote ---------- */
.angebote { list-style: none; margin: 0; padding: 0; }
.angebot {
--wellenlinie: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='8' viewBox='0 0 60 8'%3E%3Cpath d='M0 4 Q15 0 30 4 T60 4' fill='none' stroke='%23c7b294' stroke-width='1.2'/%3E%3C/svg%3E");
display: grid; grid-template-columns: 13rem 1fr 10rem; gap: 1.5rem 2.5rem; align-items: center;
padding: 2.2rem 0;
background: var(--wellenlinie) repeat-x left bottom;
}
.angebot:first-child { background: var(--wellenlinie) repeat-x left top, var(--wellenlinie) repeat-x left bottom; }
.angebot-wann { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; color: var(--milchkaffee); line-height: 1.15; }
.angebot-wann strong { display: block; font-size: 1.9rem; font-weight: 400; color: var(--kakao); }
.angebot-wann span { font-size: 1rem; font-style: italic; }
.angebot h3 { margin-bottom: 0.3rem; }
.angebot p { margin: 0; color: var(--text-leise); }
.angebot .angebot-ort { margin-top: 0.6rem; font-size: var(--fs-klein); display: flex; gap: 0.4rem; align-items: center; }
.angebot .angebot-ort svg { width: 1em; height: 1em; flex: none; }
.angebot .angebot-ort a { font-weight: 600; }
.angebot-flyer { justify-self: end; width: 140px; transform: rotate(var(--dreh, 3deg)); transition: transform 0.6s var(--weich); cursor: zoom-in; background: none; border: 0; padding: 0; }
.angebot-flyer img { border-radius: 4px; box-shadow: 0 14px 28px -14px rgba(61, 42, 29, 0.45); }
.angebot:nth-child(even) .angebot-flyer { --dreh: -3deg; }
.angebot:hover .angebot-flyer, .angebot-flyer:focus-visible { transform: rotate(0) scale(1.06); }
@media (max-width: 820px) {
.angebot { grid-template-columns: 1fr 88px; gap: 0.6rem 1.2rem; }
.angebot-wann { grid-column: 1 / -1; }
.angebot-wann strong { display: inline; font-size: 1.4rem; margin-right: 0.4rem; }
.angebot-flyer { width: 88px; grid-column: 2; grid-row: 2; align-self: start; }
}
/* ---------- Projekte ---------- */
.hauptprojekt { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center; margin-bottom: clamp(4rem, 8vw, 6.5rem); }
.hauptprojekt-bild { position: relative; justify-self: center; width: 100%; max-width: 330px; transform: rotate(-2.5deg); background: none; border: 0; padding: 0; cursor: zoom-in; transition: transform 0.6s var(--weich); }
.hauptprojekt-bild:hover { transform: rotate(0); }
.hauptprojekt-bild img { width: 100%; }
.hauptprojekt-bild img { border-radius: 6px; box-shadow: 0 28px 50px -28px rgba(61, 42, 29, 0.55); }
.stempel {
position: absolute; right: -1.4rem; top: -1.6rem; width: 6.4rem; aspect-ratio: 1; border-radius: 50%;
display: grid; place-content: center; text-align: center;
background: var(--kakao); color: var(--papier);
font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: 1rem; line-height: 1.05;
transform: rotate(10deg); animation: schweben 5s ease-in-out infinite;
}
.stempel b { display: block; font-size: 1.9rem; font-weight: 450; }
.hauptprojekt h3 { font-size: var(--fs-gross); font-weight: 400; }
.hauptprojekt .knopf { margin-top: 0.8rem; }
@media (max-width: 820px) {
.hauptprojekt { grid-template-columns: 1fr; }
.hauptprojekt-bild { max-width: 280px; justify-self: start; margin-left: 0.5rem; }
}
.pinnwand-kopf { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1rem; }
.pinnwand-kopf h3 { margin: 0; }
.pinnwand-pfeile { display: flex; gap: 0.5rem; }
.pfeil {
width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid var(--beige-tief);
background: transparent; color: var(--kakao); cursor: pointer; display: grid; place-items: center;
transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.pfeil:hover { background: var(--kakao); color: var(--papier); border-color: var(--kakao); }
.pfeil:disabled { opacity: 0.35; cursor: default; background: transparent; color: var(--kakao); border-color: var(--beige-tief); }
.pfeil svg { width: 18px; height: 18px; }
.pinnwand {
display: flex; gap: clamp(1.5rem, 3vw, 2.8rem); overflow-x: auto; scroll-snap-type: x mandatory;
padding: 1.8rem 0.6rem 2rem; margin: 0 -0.6rem; list-style: none;
scrollbar-width: thin; scrollbar-color: var(--beige-tief) transparent;
}
.pinnwand li { flex: 0 0 clamp(210px, 24vw, 260px); scroll-snap-align: start; }
.pinnwand button {
display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; color: inherit; font: inherit;
}
.pinnwand .flyer { position: relative; transform: rotate(var(--dreh, -2deg)); transition: transform 0.6s var(--weich); }
.pinnwand li:nth-child(even) .flyer { --dreh: 2.2deg; }
.pinnwand li:nth-child(3n) .flyer { --dreh: -1deg; }
.pinnwand .flyer img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: top; border-radius: 4px; box-shadow: 0 18px 32px -18px rgba(61, 42, 29, 0.5); }
.pinnwand .flyer::before {
content: ""; position: absolute; top: -10px; left: 50%; width: 66px; height: 22px; z-index: 1;
transform: translateX(-50%) rotate(-3deg); background: rgba(220, 205, 184, 0.8);
}
.pinnwand button:hover .flyer, .pinnwand button:focus-visible .flyer { transform: rotate(0) translateY(-6px); }
.pinnwand .unterschrift { margin-top: 1.1rem; }
.pinnwand .unterschrift strong { display: block; font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-weight: 480; font-size: 1.15rem; color: var(--kakao); }
.pinnwand .unterschrift span { font-size: var(--fs-klein); color: var(--text-leise); }
/* ---------- Bildwechsel ---------- */
.bildwechsel { width: 100%; }
.bildwechsel-buehne {
display: grid; aspect-ratio: 1600 / 807; background: #000; border-radius: 6px; overflow: hidden; cursor: pointer;
box-shadow: 0 28px 50px -28px rgba(61, 42, 29, 0.55);
}
.bildwechsel-buehne img { grid-area: 1 / 1; width: 100%; height: 100%; object-fit: contain; opacity: 0; transition: opacity 0.9s var(--weich); }
.bildwechsel-buehne img.ist-aktiv { opacity: 1; }
.bildwechsel-punkte { display: flex; justify-content: center; gap: 0.2rem; margin-top: 0.8rem; }
.bildwechsel-punkte button { width: 26px; height: 26px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.bildwechsel-punkte button::before {
content: ""; width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--milchkaffee);
transition: background 0.3s var(--weich), transform 0.3s var(--weich);
}
.bildwechsel-punkte button[aria-current="true"]::before { background: var(--milchkaffee); transform: scale(1.25); }
/* Variante: Bilder fliegen von rechts herein und links hinaus */
.bildwechsel--fliegen .bildwechsel-buehne img { opacity: 1; transform: translateX(110%) rotate(4deg) scale(0.92); transition: none; }
.bildwechsel--fliegen .bildwechsel-buehne img.ist-aktiv { transform: none; transition: transform 1s var(--weich); }
.bildwechsel--fliegen .bildwechsel-buehne img.ist-vorher { transform: translateX(-110%) rotate(-4deg) scale(0.92); transition: transform 1s var(--weich); }
.hauptprojekt--breit { grid-template-columns: 1.15fr 0.85fr; }
@media (max-width: 820px) { .hauptprojekt--breit { grid-template-columns: 1fr; } }
/* ---------- Tonstudio ---------- */
:root { --ton: #c0805f; --ton-tief: #8f5238; }
.tonstudio {
position: relative; overflow: hidden;
display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(2rem, 5vw, 4.5rem); align-items: center;
padding: clamp(2rem, 5vw, 4rem);
background: var(--sand);
border-radius: 42px 64px 38px 72px / 60px 40px 70px 44px;
}
.tonstudio::before {
content: ""; position: absolute; right: -6rem; bottom: -7rem; width: 22rem; aspect-ratio: 1; border-radius: 50%;
background: repeating-radial-gradient(circle, transparent 0 9px, rgba(192, 128, 95, 0.14) 9px 10px);
pointer-events: none;
}
.tonstudio > * { position: relative; }
.tonstudio h2 { margin-bottom: 0.3em; }
.tonstudio h2 em { font-style: italic; font-weight: 340; color: var(--ton-tief); }
.tonstudio .auftakt { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.45rem); line-height: 1.45; color: var(--kakao); font-weight: 380; }
.tonstudio p { color: var(--text-leise); }
.tonstudio .knopf { margin-top: 0.4rem; }
/* Flyer mit drehender Töpferscheibe dahinter */
.platte { position: relative; justify-self: center; width: min(100%, 380px); aspect-ratio: 1; }
.platte-schlitten {
position: absolute; top: 9%; left: 28%; width: 72%; aspect-ratio: 1;
transition: transform 0.9s var(--weich);
}
.platte:hover .platte-schlitten, .platte:focus-within .platte-schlitten { transform: translateX(10%); }
.platte-scheibe {
width: 100%; height: 100%; border-radius: 50%;
background:
radial-gradient(circle, var(--ton-tief) 0 4%, var(--ton) 4.5% 24%, #a9694c 24.5% 27%, transparent 27.5%),
repeating-radial-gradient(circle, #d8c3a8 0 7px, #c9b08f 7px 8.5px);
box-shadow: 0 24px 40px -22px rgba(61, 42, 29, 0.7);
animation: drehen 7s linear infinite;
}
.platte-scheibe::after {
content: ""; position: absolute; inset: 0; border-radius: 50%;
background: conic-gradient(from 30deg, transparent 0 20%, rgba(255, 253, 249, 0.12) 25%, transparent 32% 70%, rgba(255, 253, 249, 0.08) 76%, transparent 82%);
}
.platte-huelle {
position: absolute; left: 0; top: 4%; width: 64%; padding: 0; border: 0; background: none; cursor: zoom-in;
transform: rotate(-4deg); transition: transform 0.6s var(--weich);
}
.platte-huelle:hover, .platte-huelle:focus-visible { transform: rotate(0); }
.platte-huelle img { width: 100%; border-radius: 6px; box-shadow: 0 28px 50px -24px rgba(61, 42, 29, 0.6); }
@keyframes drehen { to { transform: rotate(360deg); } }
.ton-stichworte { list-style: none; margin: 1.2rem 0 1.6rem; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ton-stichworte li { font-size: 0.92rem; padding: 0.4rem 0.95rem; border-radius: 999px; background: var(--papier); color: var(--kakao); border: 1.5px solid rgba(192, 128, 95, 0.45); }
.ton-aktionen { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; }
.knopf--ton { background: var(--ton-tief); border-color: var(--ton-tief); }
.knopf--ton:hover { background: var(--kakao-tief); border-color: var(--kakao-tief); }
@media (max-width: 820px) {
.tonstudio { grid-template-columns: 1fr; }
.platte { width: min(100%, 300px); aspect-ratio: auto; height: 460px; }
}
/* ---------- Fotos im Hintergrund ----------
Im Abschnitt steht als erstes 
.
Darüber liegt eine Abdeckung in der Farbe --deck (RGB); am unteren Rand
geht das Foto in --unten über. */
.seitenkopf--foto, .abschnitt--foto { --deck: 255, 253, 249; position: relative; isolation: isolate; }
.abschnitt--sand.abschnitt--foto { --deck: 243, 235, 224; }
.hintergrund { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none; }
.seitenkopf--foto::before, .abschnitt--foto::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.seitenkopf--foto::before {
background:
linear-gradient(180deg, rgba(var(--unten, var(--deck)), 0) 55%, rgb(var(--unten, var(--deck))) 100%),
linear-gradient(90deg, rgba(var(--deck), 0.97) 0%, rgba(var(--deck), 0.9) 38%, rgba(var(--deck), 0.5) 70%, rgba(var(--deck), 0.3) 100%);
}
.abschnitt--foto::before {
background: linear-gradient(180deg, rgb(var(--deck)) 0%, rgba(var(--deck), var(--deckkraft, 0.86)) 16%, rgba(var(--deck), var(--deckkraft, 0.86)) 84%, rgb(var(--deck)) 100%);
}
/* Variante: Foto deutlicher sichtbar */
.seitenkopf--foto.foto--deutlich::before {
background:
linear-gradient(180deg, rgba(var(--unten, var(--deck)), 0) 65%, rgb(var(--unten, var(--deck))) 100%),
linear-gradient(90deg, rgba(var(--deck), 0.9) 0%, rgba(var(--deck), 0.72) 35%, rgba(var(--deck), 0.2) 68%, rgba(var(--deck), 0.05) 100%);
}
.abschnitt--foto.foto--deutlich { --deckkraft: 0.66; }
@media (max-width: 820px) {
.seitenkopf--foto::before {
background:
linear-gradient(180deg, rgba(var(--unten, var(--deck)), 0) 55%, rgb(var(--unten, var(--deck))) 100%),
linear-gradient(rgba(var(--deck), 0.88), rgba(var(--deck), 0.88));
}
.seitenkopf--foto.foto--deutlich::before {
background:
linear-gradient(180deg, rgba(var(--unten, var(--deck)), 0) 60%, rgb(var(--unten, var(--deck))) 100%),
linear-gradient(rgba(var(--deck), 0.74), rgba(var(--deck), 0.74));
}
}
/* Unterseite Tonstudio */
.ton-karten { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.2rem, 3vw, 2rem); }
.ton-karte {
background: var(--papier); padding: 2rem 1.8rem;
border-radius: 34px 52px 30px 58px / 48px 32px 56px 36px;
transition: transform 0.5s var(--weich), box-shadow 0.5s var(--weich);
}
.ton-karte:nth-child(2) { border-radius: 52px 30px 58px 34px / 34px 54px 30px 50px; }
.ton-karte:nth-child(3) { border-radius: 30px 58px 40px 46px / 56px 38px 48px 30px; }
.ton-karte:hover { transform: translateY(-6px); box-shadow: 0 26px 40px -30px rgba(61, 42, 29, 0.55); }
.ton-symbol { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; background: var(--ton); color: var(--papier); margin-bottom: 1.2rem; }
.ton-symbol svg { width: 26px; height: 26px; }
.ton-karte h3 { margin-bottom: 0.4rem; }
.ton-karte p { margin: 0; color: var(--text-leise); }
.ton-wege { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 4vw, 3rem); }
.ton-weg { padding: 0 0 0 1.4rem; border-left: 2px solid var(--ton); }
.ton-weg span { display: block; font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-style: italic; color: var(--ton-tief); margin-bottom: 0.2rem; }
.ton-weg h3 { font-size: 1.6rem; font-weight: 420; }
.ton-weg p { color: var(--text-leise); }
@media (max-width: 820px) { .ton-karten, .ton-wege { grid-template-columns: 1fr; } }
/* ---------- Termine (Vorschau) ---------- */
.termine-vorschau { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: clamp(2rem, 6vw, 6rem); align-items: start; }
.termin-liste { list-style: none; margin: 0; padding: 0; }
.termin-liste li {
display: grid; grid-template-columns: 4.6rem 1fr; gap: 1.2rem; align-items: start;
padding: 1.25rem 0; border-bottom: 1px dashed var(--beige-tief);
}
.termin-liste li:first-child { padding-top: 0; }
.termin-datum { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; text-align: center; line-height: 1; color: var(--kakao); }
.termin-datum b { display: block; font-size: 2.3rem; font-weight: 400; }
.termin-datum span { font-size: 0.9rem; color: var(--milchkaffee); }
.termin-titel { font-weight: 600; color: var(--kakao); font-size: 1.05rem; margin: 0.15rem 0 0.2rem; }
.termin-info { font-size: var(--fs-klein); color: var(--text-leise); margin: 0; }
.termin-punkt { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; margin-right: 0.45rem; vertical-align: 0.08em; flex: none; }
.leer { color: var(--text-leise); font-style: italic; }
@media (max-width: 820px) { .termine-vorschau { grid-template-columns: 1fr; } }
/* ---------- Orte ---------- */
.orte { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.orte-karte { width: 100%; height: auto; }
.orte-karte .weg { fill: none; stroke: var(--milchkaffee); stroke-width: 2.2; stroke-dasharray: 1 10; stroke-linecap: round; }
.orte-karte .ort-kreis { fill: var(--kakao); }
.orte-karte .ort-ring { fill: none; stroke: var(--milchkaffee); stroke-width: 1.2; transform-box: fill-box; transform-origin: center; animation: pulsieren 3s ease-out infinite; }
.orte-karte .ort-ring.spaet { animation-delay: 1.5s; }
.orte-karte text { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; fill: var(--kakao); font-size: 22px; }
.orte-karte .klein { font-family: var(--schrift-text); fill: var(--text-leise); font-size: 14px; }
.orte-karte .huegel { fill: var(--beige); opacity: 0.45; }
@keyframes pulsieren { from { transform: scale(0.6); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }
.ort { padding: 1.4rem 0; }
.ort + .ort { border-top: 1px dashed var(--beige-tief); }
.ort h3 { margin-bottom: 0.2rem; }
.ort p { margin: 0 0 0.5rem; color: var(--text-leise); }
.ort a { font-weight: 600; font-size: 0.95rem; }
@media (max-width: 820px) { .orte { grid-template-columns: 1fr; } .orte-karte { max-width: 460px; } }
/* ---------- Links ---------- */
.link-liste { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(2rem, 5vw, 4.5rem); }
.link-liste a, .link-liste .bald {
display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; gap: 1.1rem; align-items: center;
padding: 1.3rem 0; text-decoration: none; color: inherit;
border-bottom: 1px solid rgba(199, 178, 148, 0.6);
}
.link-symbol {
width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
background: var(--papier); color: var(--kakao);
transition: background 0.4s var(--weich), color 0.4s var(--weich), transform 0.5s var(--weich);
}
.link-symbol svg { width: 22px; height: 22px; }
.link-liste strong { display: block; font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-weight: 480; font-size: 1.2rem; color: var(--kakao); line-height: 1.25; }
.link-liste small { color: var(--text-leise); font-size: 0.92rem; }
.link-pfeil { width: 20px; height: 20px; color: var(--milchkaffee); transition: transform 0.4s var(--weich); }
.link-liste a:hover .link-symbol { background: var(--kakao); color: var(--papier); transform: rotate(-8deg); }
.link-liste a:hover .link-pfeil { transform: translateX(6px); }
.link-liste .bald { opacity: 0.6; }
.link-liste .bald-hinweis { font-size: 0.8rem; font-style: italic; color: var(--text-leise); white-space: nowrap; }
@media (max-width: 820px) { .link-liste { grid-template-columns: minmax(0, 1fr); } .link-liste .bald-hinweis { white-space: normal; max-width: 5.5rem; text-align: right; } }
/* ---------- Fußzeile ---------- */
.fuss { background: var(--kakao-tief); color: #e9dccb; padding: clamp(3.5rem, 7vw, 5rem) 0 2rem; }
.fuss a { color: #f3e8d9; }
.fuss a:hover { color: var(--beige); }
.fuss-raster { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.fuss-marke { display: flex; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.fuss-marke img { width: 64px; height: 64px; }
.fuss-marke span { font-family: var(--schrift-titel); font-variation-settings: "SOFT" 100; font-size: 1.6rem; color: var(--papier); }
.fuss h2 { font-size: 1.1rem; color: var(--papier); font-weight: 500; margin-bottom: 0.8rem; }
.fuss p, .fuss li { font-size: 0.95rem; color: #d8c8b4; }
.fuss ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.fuss-unten { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid rgba(233, 220, 203, 0.15); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; font-size: 0.88rem; color: #bfae98; }
.fuss-unten nav { display: flex; gap: 1.4rem; }
@media (max-width: 820px) { .fuss-raster { grid-template-columns: 1fr; } }
/* ---------- Lightbox ---------- */
.lichtbox { border: 0; padding: 0; background: transparent; max-width: min(92vw, 980px); max-height: 92vh; overflow: visible; }
.lichtbox::backdrop { background: rgba(61, 42, 29, 0.72); backdrop-filter: blur(4px); }
.lichtbox[open] { animation: lichtbox-auf 0.45s var(--weich); }
@keyframes lichtbox-auf { from { opacity: 0; transform: translateY(20px) scale(0.97); } }
.lichtbox-inhalt { display: grid; grid-template-columns: auto minmax(220px, 320px); background: var(--papier); border-radius: 10px; overflow: hidden; }
.lichtbox img { max-height: 86vh; width: auto; max-width: min(60vw, calc(min(92vw, 980px) - 320px)); object-fit: contain; background: var(--sand); } /* Platz für die Textspalte lassen (Querformat) */
.lichtbox-text { padding: 2rem 1.8rem; overflow-y: auto; max-height: 86vh; }
.lichtbox-text h3 { font-size: 1.6rem; }
.lichtbox-text p { color: var(--text-leise); }
.lichtbox-zu {
position: absolute; top: -18px; right: -18px; width: 44px; height: 44px; border-radius: 50%; border: 0;
background: var(--papier); color: var(--kakao); cursor: pointer; display: grid; place-items: center;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
}
.lichtbox-zu svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
.lichtbox-inhalt { grid-template-columns: 1fr; max-height: 88vh; overflow-y: auto; }
.lichtbox img { max-width: 100%; max-height: 60vh; margin-inline: auto; }
.lichtbox-text { max-height: none; }
.lichtbox-zu { top: 8px; right: 8px; }
}
/* ---------- Unterseiten-Kopf ---------- */
.seitenkopf {
position: relative; padding: calc(var(--kopf-hoehe) + clamp(3rem, 7vw, 5rem)) 0 clamp(3rem, 6vw, 4.5rem);
background: linear-gradient(180deg, var(--papier), var(--sand)); overflow: hidden;
}
.seitenkopf h1 { font-size: clamp(2.6rem, 1.5rem + 5vw, 5rem); font-weight: 380; margin-bottom: 0.3em; }
.seitenkopf p { color: var(--text-leise); font-size: 1.12rem; }
.seitenkopf .linien { position: absolute; right: -4%; bottom: 8%; width: min(58%, 720px); pointer-events: none; }
.seitenkopf .linien path { fill: none; stroke: var(--beige-tief); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2.4s var(--weich) forwards; }
.seitenkopf .innen { position: relative; z-index: 1; }
/* Blumen auf den Notenlinien (nur bei