/* van.raabe — Stylesheet
   Farben, Schriften und Rundungen kommen aus den CSS-Variablen, die das Theme
   aus dem Customizer erzeugt (siehe VR_Branding). Hier stehen keine festen
   Markenfarben.

   Haltung: Naturkundekabinett, aber die Sammlung lebt. Die Arbeiten sind
   farbig genug — die Seite drumherum haelt sich zurueck. Ein Akzent, eine
   Schriftfamilie fuer Text, eine fuer Auszeichnung, Monospace nur dort, wo
   Kleinschrift Information traegt (Etiketten, Tafelnummern). */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

body{
	margin:0;
	background:var(--vr-papier);
	color:var(--vr-tinte);
	font-family:var(--vr-font-text);
	font-size:var(--vr-basis);
	line-height:1.62;
	-webkit-font-smoothing:antialiased;
	overflow-x:hidden;
}

/* Papierkorn: nimmt der Flaeche das Digitale. Inline-SVG, kein Ladevorgang. */
body.vr-korn::before{
	content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.55;
	background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}

img,svg,video{max-width:100%;height:auto}
img{display:block}
a{color:inherit;text-underline-offset:.18em}
button{font:inherit;color:inherit}

h1,h2,h3,h4{
	font-family:var(--vr-font-display);font-weight:400;
	line-height:1.04;letter-spacing:-.025em;margin:0 0 .5em;text-wrap:balance;
}
h1{font-size:calc(clamp(2.4rem,1rem + 5vw,4.4rem) * var(--vr-skala));letter-spacing:-.04em}
h2{font-size:calc(clamp(1.7rem,1.15rem + 1.9vw,2.7rem) * var(--vr-skala))}
h3{font-family:var(--vr-font-text);font-weight:650;font-size:1.08rem;letter-spacing:-.01em;line-height:1.3}
p{margin:0 0 1rem}

:focus-visible{outline:2.5px solid var(--vr-magenta-text);outline-offset:3px}

.screen-reader-text{
	position:absolute !important;width:1px;height:1px;overflow:hidden;
	clip-path:inset(50%);white-space:nowrap;
}

.vr-sprung{
	position:absolute;left:-9999px;top:0;z-index:200;
	background:var(--vr-magenta-text);color:#fff;padding:12px 20px;
	text-decoration:none;font-weight:600;
}
.vr-sprung:focus{left:0}

.vr-rand{width:min(1320px,100% - 3rem);margin-inline:auto}
@media (max-width:600px){.vr-rand{width:min(1320px,100% - 2rem)}}

section[id]{scroll-margin-top:80px}

/* ---- Etikett: Kleinschrift wie auf einem Sammlungsschildchen ---- */

.vr-etikett{
	display:inline-block;font-family:var(--vr-font-mono);font-size:.68rem;
	letter-spacing:.19em;text-transform:uppercase;color:var(--vr-grau);
	margin-bottom:.9rem;
}
.vr-etikett--magenta{color:var(--vr-magenta-text)}

/* ---- Knoepfe ---- */

.vr-knopf{
	display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
	padding:.72rem 1.4rem;border-radius:var(--vr-radius);
	font-size:.9rem;font-weight:600;text-decoration:none;cursor:pointer;
	border:1.5px solid var(--vr-magenta-tief);
	background:var(--vr-magenta-tief);color:#fff;
	transition:background .16s,color .16s,border-color .16s;
}
.vr-knopf:hover{background:transparent;color:var(--vr-magenta-tief)}
.vr-knopf--leer{background:transparent;color:var(--vr-tinte);border-color:var(--vr-tinte)}
.vr-knopf--leer:hover{background:var(--vr-tinte);color:var(--vr-papier)}
.vr-knopf--klein{padding:.52rem 1rem;font-size:.84rem}

/* ---- Kopfzeile der Website ---- */

.vr-kopf{
	position:sticky;top:0;z-index:60;
	background:color-mix(in srgb,var(--vr-papier) 92%,transparent);
	backdrop-filter:blur(10px);
	border-bottom:1px solid var(--vr-linie);
}
.vr-kopf__innen{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;height:62px}
.vr-marke__text{
	font-family:var(--vr-font-display);font-size:1.35rem;letter-spacing:-.02em;
	text-decoration:none;white-space:nowrap;
}
.vr-marke img,.custom-logo{height:var(--vr-logo-h);width:auto}
@media (max-width:600px){.vr-marke img,.custom-logo{height:var(--vr-logo-h-mobil)}}
.vr-logo-flaeche .vr-marke img{background:#fff;padding:4px;border-radius:4px}

.vr-nav__liste{display:flex;gap:.2rem;list-style:none;margin:0;padding:0}
.vr-nav__liste a{
	display:block;text-decoration:none;font-size:.9rem;color:var(--vr-grau);
	padding:.45rem .75rem;transition:color .15s;
}
.vr-nav__liste a:hover{color:var(--vr-tinte)}
.vr-kopf__rechts{display:flex;align-items:center;gap:.6rem}

.vr-menue{
	display:none;width:42px;height:42px;align-items:center;justify-content:center;
	background:transparent;border:1.5px solid var(--vr-linie);cursor:pointer;
	border-radius:var(--vr-radius);
}
.vr-menue__strich,.vr-menue__strich::before,.vr-menue__strich::after{
	display:block;width:16px;height:1.6px;background:currentColor;
}
.vr-menue__strich{position:relative}
.vr-menue__strich::before,.vr-menue__strich::after{content:"";position:absolute;left:0}
.vr-menue__strich::before{top:-5px}
.vr-menue__strich::after{top:5px}

.vr-schublade{display:none;border-top:1px solid var(--vr-linie);background:var(--vr-papier)}
.vr-schublade[data-offen="1"]{display:block}
.vr-schublade ul{list-style:none;margin:0;padding:0}
.vr-schublade a{
	display:block;padding:.9rem 0;text-decoration:none;
	border-bottom:1px solid var(--vr-linie);
}
.vr-schublade li:last-child a{border-bottom:0}

@media (max-width:1100px){
	.vr-nav{display:none}
	.vr-menue{display:inline-flex}
}
@media (max-width:520px){.vr-kopf__rechts .vr-knopf{display:none}}

/* ---- Abschnitt ---- */

.vr-abschnitt{padding-block:clamp(4rem,7.5vw,7.5rem);position:relative;z-index:2}
.vr-abstand-klein{padding-block:clamp(2rem,4vw,3.5rem)}
.vr-abstand-gross{padding-block:clamp(5.5rem,10vw,10rem)}
.vr-nur-desktop{display:none}
@media (min-width:781px){.vr-nur-desktop{display:block}.vr-nur-mobil{display:none}}
.vr-aus-mitte{text-align:center}
.vr-aus-mitte .vr-kopfzeile__innen{margin-inline:auto}

.vr-abschnitt--hell{background:var(--vr-papier-hell);border-block:1px solid var(--vr-linie)}
.vr-abschnitt--papier{background:var(--vr-papier)}

.vr-abschnitt--gruen{background:var(--vr-gruen);color:var(--vr-gruen-text)}
.vr-abschnitt--gruen .vr-etikett{color:var(--vr-gruen-grau)}
.vr-abschnitt--gruen .vr-etikett--magenta{color:var(--vr-magenta)}
.vr-abschnitt--gruen .vr-kopfzeile__text{color:var(--vr-gruen-grau)}
.vr-abschnitt--gruen .vr-platz{background:rgb(255 255 255 / .07)}
.vr-abschnitt--gruen .vr-platz__marke{color:var(--vr-gruen-grau)}
.vr-abschnitt--gruen .vr-tafel__nr,
.vr-abschnitt--gruen .vr-tafel__zeile{color:var(--vr-gruen-grau)}
.vr-abschnitt--gruen .vr-knopf{background:var(--vr-magenta);border-color:var(--vr-magenta);color:#25060F}
.vr-abschnitt--gruen .vr-knopf:hover{background:transparent;color:var(--vr-magenta)}
.vr-abschnitt--gruen .vr-knopf--leer{background:transparent;color:var(--vr-gruen-text);border-color:rgb(255 255 255 / .3)}
.vr-abschnitt--gruen .vr-knopf--leer:hover{background:var(--vr-gruen-text);color:var(--vr-gruen)}
.vr-abschnitt--gruen .vr-chip{border-color:rgb(255 255 255 / .25);color:var(--vr-gruen-grau)}
.vr-abschnitt--gruen .vr-chip:hover{color:var(--vr-gruen-text);border-color:var(--vr-gruen-text)}
.vr-abschnitt--gruen .vr-chip[aria-pressed="true"]{background:var(--vr-magenta);border-color:var(--vr-magenta);color:#25060F}
.vr-abschnitt--gruen .vr-tafel__lupe{background:var(--vr-gruen);color:var(--vr-gruen-text)}

.vr-kopfzeile{
	display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;
	flex-wrap:wrap;margin-bottom:clamp(2rem,4vw,3.2rem);
}
.vr-kopfzeile__innen{max-width:48ch}
.vr-kopfzeile__titel{margin-bottom:.35em}
.vr-kopfzeile__text{margin:0;color:var(--vr-grau)}

.vr-prosa{max-width:70ch}
.vr-prosa p:last-child{margin-bottom:0}

/* ---- Kopfbereich ---- */

.vr-hero{padding-bottom:0;overflow:hidden}
.vr-hero__gitter{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,3vw,3rem);align-items:start}
.vr-hero__kante{
	writing-mode:vertical-rl;transform:rotate(180deg);
	white-space:nowrap;margin:0;padding-top:.4rem;
}
.vr-hero__titel{margin:0 0 1.3rem;max-width:15ch}
.vr-hero__zeile{
	font-size:calc(clamp(1.02rem,1rem + .5vw,1.26rem));
	color:var(--vr-grau);max-width:46ch;margin-bottom:1.9rem;
}
.vr-hero__aktion{display:flex;flex-wrap:wrap;gap:.7rem}
@media (max-width:860px){
	.vr-hero__gitter{grid-template-columns:1fr}
	.vr-hero__kante{writing-mode:horizontal-tb;transform:none;padding:0}
}

/* Bildstreifen laeuft rechts aus dem Raster heraus */
.vr-streifen{
	display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:1rem;
	margin-left:max(1.5rem,calc((100% - 1320px) / 2));margin-right:0;
	margin-top:clamp(2.5rem,5vw,4rem);
	padding-bottom:clamp(4rem,7.5vw,7.5rem);
}
.vr-streifen__platz .vr-platz{aspect-ratio:4/5}
.vr-streifen__platz.ist-gross .vr-platz{aspect-ratio:16/11}
@media (max-width:860px){
	.vr-streifen{
		width:min(1320px,100% - 3rem);margin-left:auto;margin-right:auto;
		grid-template-columns:1fr 1fr;
	}
	.vr-streifen__platz:last-child{display:none}
}

/* ---- Bildplatz ---- */

.vr-platz{
	position:relative;display:grid;place-items:center;overflow:hidden;
	background:color-mix(in srgb,var(--vr-tinte) 8%,var(--vr-papier-hell));
	border-radius:var(--vr-radius);width:100%;
}
.vr-platz img{width:100%;height:100%;object-fit:cover}
.vr-platz__marke{
	font-family:var(--vr-font-mono);font-size:.65rem;letter-spacing:.14em;
	text-transform:uppercase;color:var(--vr-grau);padding:1rem;text-align:center;
}

/* ---- Eckdatenband ---- */

.vr-eckdaten{position:relative;z-index:2}
.vr-eckdaten__band{
	display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:0;
	background:var(--vr-linie);border-block:1px solid var(--vr-linie);
}
.vr-eckdaten__feld{background:var(--vr-papier);padding:1.15rem clamp(1rem,2vw,1.6rem)}
.vr-eckdaten__label{
	font-family:var(--vr-font-mono);font-size:.66rem;letter-spacing:.13em;
	text-transform:uppercase;color:var(--vr-grau);margin-bottom:.25rem;
}
.vr-eckdaten__wert{margin:0;font-size:.95rem;font-weight:650}
@media (max-width:760px){.vr-eckdaten__band{grid-template-columns:repeat(2,1fr)}}

/* ---- Filter ---- */

.vr-filter{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.8rem}
.vr-chip{
	padding:.48rem 1.05rem;border:1.5px solid var(--vr-linie);background:transparent;
	color:var(--vr-grau);font-size:.85rem;font-weight:600;cursor:pointer;
	border-radius:var(--vr-radius);
	transition:color .15s,border-color .15s,background .15s;
}
.vr-chip:hover{color:var(--vr-tinte);border-color:var(--vr-tinte)}
.vr-chip[aria-pressed="true"]{
	background:var(--vr-magenta-tief);border-color:var(--vr-magenta-tief);color:#fff;
}

/* ---- Tafeln ---- */

.vr-tafeln{display:grid;gap:clamp(.9rem,1.6vw,1.5rem)}
.vr-tafeln--2{grid-template-columns:repeat(2,1fr)}
.vr-tafeln--3{grid-template-columns:repeat(3,1fr)}
.vr-tafeln--4{grid-template-columns:repeat(4,1fr)}
.vr-tafeln--5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1080px){.vr-tafeln--4,.vr-tafeln--5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:780px){.vr-tafeln{grid-template-columns:repeat(2,1fr)}}
@media (max-width:440px){.vr-tafeln{grid-template-columns:1fr}}

.vr-tafel{
	position:relative;display:block;text-align:left;padding:0;width:100%;
	background:none;border:0;cursor:pointer;color:inherit;
}
.vr-tafel[hidden]{display:none}
.vr-tafel .vr-platz{aspect-ratio:4/5;transition:transform .35s ease}
.vr-tafel:hover .vr-platz,.vr-tafel:focus-visible .vr-platz{transform:scale(1.015)}
.vr-tafel__nr{
	position:absolute;top:.7rem;left:.75rem;z-index:2;font-family:var(--vr-font-mono);
	font-size:.62rem;letter-spacing:.12em;color:var(--vr-grau);
}
.vr-tafel__lupe{
	position:absolute;right:.7rem;top:calc(100% - 4.2rem);z-index:2;
	width:30px;height:30px;display:grid;place-items:center;
	background:var(--vr-papier);color:var(--vr-tinte);border-radius:var(--vr-radius);
	opacity:0;transform:translateY(6px);transition:opacity .22s,transform .22s;
}
.vr-tafel:hover .vr-tafel__lupe,.vr-tafel:focus-visible .vr-tafel__lupe{opacity:1;transform:translateY(0)}
.vr-tafel__fuss{display:block;padding-top:.6rem}
.vr-tafel__titel{display:block;font-size:.94rem;font-weight:600}
.vr-tafel__zeile{
	display:block;margin-top:.2rem;font-family:var(--vr-font-mono);font-size:.63rem;
	letter-spacing:.11em;text-transform:uppercase;color:var(--vr-grau);
}

/* ---- Band (Freie Motive) ---- */

.vr-band{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.vr-band{grid-template-columns:1fr}}
.vr-band__titel{margin-bottom:.5em}
.vr-band__zeile{color:var(--vr-grau);max-width:46ch}
.vr-band__aktion{margin:1.5rem 0 0}
.vr-band__reihe{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem}
.vr-band__reihe .vr-platz{aspect-ratio:3/4}

/* ---- Maßstab ---- */

.vr-groesse{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.vr-groesse{grid-template-columns:1fr}}
.vr-groesse__titel{margin-bottom:.4em}
.vr-groesse__zeile{color:var(--vr-grau);max-width:46ch}
.vr-regler{width:100%;max-width:420px;margin:1.2rem 0 .6rem;accent-color:var(--vr-magenta-tief)}
.vr-groesse__wert{font-family:var(--vr-font-display);font-size:2.6rem;line-height:1;margin:0 0 .6rem}
.vr-groesse__wert small{font-family:var(--vr-font-text);font-size:1rem;color:var(--vr-grau);margin-left:.35rem}
.vr-groesse__hinweis{font-size:.92rem;color:var(--vr-grau);min-height:3.2em;max-width:42ch}
.vr-groesse__buehne{
	position:relative;display:grid;place-items:center;overflow:hidden;
	min-height:440px;padding:2rem;
	background:var(--vr-papier-hell);border:1px solid var(--vr-linie);
	border-radius:var(--vr-radius);
}
.vr-karte{
	position:absolute;width:123px;height:78px;display:grid;place-items:end;
	padding:.35rem .5rem;border:1.5px dashed var(--vr-linie);border-radius:6px;
}
.vr-karte span{
	font-family:var(--vr-font-mono);font-size:.56rem;letter-spacing:.1em;
	text-transform:uppercase;color:var(--vr-grau);
}
.vr-motiv{position:relative;color:var(--vr-tinte);opacity:.85;transition:width .18s ease,height .18s ease}

/* ---- Ablauf ---- */

.vr-schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media (max-width:900px){.vr-schritte{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.vr-schritte{grid-template-columns:1fr}}
.vr-schritt{padding:1.5rem 1.6rem 1.5rem 0;border-top:2px solid var(--vr-tinte)}
.vr-schritt+.vr-schritt{border-top-color:var(--vr-linie)}
.vr-schritt__nr{
	display:block;font-family:var(--vr-font-display);font-size:1.5rem;
	color:var(--vr-magenta-text);margin-bottom:.5rem;
}
.vr-schritt__titel{margin-bottom:.35em}
.vr-schritt__text{font-size:.93rem;color:var(--vr-grau);margin:0}

/* ---- Bild und Text ---- */

.vr-atelier{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:860px){.vr-atelier{grid-template-columns:1fr}}
.vr-atelier__bild .vr-platz{aspect-ratio:4/5}
.vr-atelier__titel{margin:0 0 1rem}
.vr-atelier__text .vr-prosa{color:var(--vr-grau)}
.vr-atelier__aktion{margin:1.5rem 0 0}

/* ---- Fragen ---- */

.vr-fragen{max-width:780px}
.vr-frage{border-bottom:1px solid var(--vr-linie)}
.vr-frage summary{
	list-style:none;cursor:pointer;padding:1.1rem 2.5rem 1.1rem 0;position:relative;
	font-weight:650;font-size:1.02rem;
}
.vr-frage summary::-webkit-details-marker{display:none}
.vr-frage summary::after{
	content:"";position:absolute;right:.4rem;top:1.4rem;width:10px;height:10px;
	border-right:2px solid var(--vr-magenta-text);
	border-bottom:2px solid var(--vr-magenta-text);
	transform:rotate(45deg);transition:transform .2s;
}
.vr-frage[open] summary::after{transform:rotate(-135deg);top:1.65rem}
.vr-frage__text{color:var(--vr-grau);margin:0 0 1.15rem;max-width:64ch;font-size:.96rem}

/* ---- Textblock und Impressum ---- */

.vr-textblock__titel{margin-bottom:.6em}
.vr-impressum{margin:2rem 0 0;max-width:70ch}
.vr-impressum__zeile{
	display:grid;grid-template-columns:minmax(0,14rem) 1fr;gap:1rem;
	padding:.85rem 0;border-bottom:1px solid var(--vr-linie);
}
.vr-impressum dt{
	font-family:var(--vr-font-mono);font-size:.66rem;letter-spacing:.13em;
	text-transform:uppercase;color:var(--vr-grau);padding-top:.2rem;
}
.vr-impressum dd{margin:0}
@media (max-width:600px){.vr-impressum__zeile{grid-template-columns:1fr;gap:.2rem}}

/* ---- Kontakt ---- */

.vr-kontakt{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(2rem,5vw,4rem)}
@media (max-width:860px){.vr-kontakt{grid-template-columns:1fr}}
.vr-feld{margin-bottom:1rem}
.vr-feld label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.35rem}
.vr-feld input,.vr-feld select,.vr-feld textarea{
	width:100%;padding:.8rem .95rem;font:inherit;font-size:.96rem;
	background:var(--vr-papier-hell);border:1.5px solid var(--vr-linie);
	color:var(--vr-tinte);border-radius:var(--vr-radius);
}
.vr-feld input:focus,.vr-feld select:focus,.vr-feld textarea:focus{
	outline:none;border-color:var(--vr-magenta-tief);
}
.vr-feld textarea{min-height:135px;resize:vertical}
.vr-einwilligung{
	display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;
	color:var(--vr-grau);margin-bottom:1.2rem;
}
.vr-einwilligung input{margin-top:.3rem;width:19px;height:19px;flex:0 0 auto;accent-color:var(--vr-magenta-tief)}
.vr-honig{position:absolute;left:-9999px}
.vr-info{
	margin:0;padding:1.5rem;background:var(--vr-papier-hell);
	border:1px solid var(--vr-linie);border-radius:var(--vr-radius);
}
.vr-info>div{padding-bottom:1.1rem;margin-bottom:1.1rem;border-bottom:1px solid var(--vr-linie)}
.vr-info>div:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.vr-info dt{
	font-family:var(--vr-font-mono);font-size:.66rem;letter-spacing:.13em;
	text-transform:uppercase;color:var(--vr-grau);margin-bottom:.3rem;
}
.vr-info dd{margin:0;font-size:.95rem}
.vr-info a{color:var(--vr-magenta-text);font-weight:600}
.vr-hinweis{
	padding:1rem 1.2rem;border-left:2px solid var(--vr-magenta-tief);
	background:color-mix(in srgb,var(--vr-magenta) 8%,transparent);font-size:.93rem;
}

/* ---- Fußzeile ---- */

.vr-fuss{
	background:var(--vr-gruen);color:var(--vr-gruen-text);
	padding:3rem 0 2rem;position:relative;z-index:2;
}
.vr-fuss__oben{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2rem}
.vr-fuss__name{font-family:var(--vr-font-display);font-size:1.5rem;margin:0 0 .4rem}
.vr-fuss__text{color:var(--vr-gruen-grau);max-width:34ch;margin:0}
.vr-fuss__liste,.vr-fuss__recht{list-style:none;margin:0;padding:0}
.vr-fuss__liste a,.vr-fuss__nav a{display:block;padding:.2rem 0;text-decoration:none;font-size:.92rem;color:var(--vr-gruen-grau)}
.vr-fuss__zeile{margin:0 0 .3rem;font-size:.92rem;color:var(--vr-gruen-grau)}
.vr-fuss a{color:var(--vr-gruen-grau);text-decoration:none}
.vr-fuss a:hover{color:var(--vr-gruen-text)}
.vr-fuss__unten{
	display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;
	margin-top:2rem;padding-top:1.2rem;border-top:1px solid rgb(255 255 255 / .16);
	font-size:.84rem;color:var(--vr-gruen-grau);
}
.vr-fuss__recht{display:flex;flex-wrap:wrap;gap:1.3rem}
.vr-fuss__copy{margin:0}

/* ---- Leer- und Suchseiten ---- */

.vr-leer{text-align:center;max-width:52ch;margin-inline:auto}
.vr-leer__icon{display:inline-block;color:var(--vr-magenta-text);margin-bottom:1.2rem}
.vr-leer__text{color:var(--vr-grau)}
.vr-leer__knoepfe{display:flex;justify-content:center;gap:.7rem;flex-wrap:wrap;margin:1.6rem 0}
.vr-inhalt{padding-block:clamp(3rem,6vw,5rem)}
.vr-seite__titel{margin-bottom:1.2rem}
.vr-liste{display:grid;gap:2rem;margin:0;padding:0;list-style:none}

/* ---- Nach oben ---- */

.vr-hoch{
	position:fixed;right:1rem;bottom:1rem;z-index:55;width:44px;height:44px;
	display:grid;place-items:center;cursor:pointer;border-radius:999px;
	background:var(--vr-tinte);color:var(--vr-papier);border:0;
	box-shadow:0 8px 24px rgb(22 19 15 / .25);
}
.vr-hoch[hidden]{display:none}

/* ---- Aktionsleiste auf schmalen Geraeten ---- */

.vr-leiste{
	display:none;position:fixed;left:0;right:0;bottom:0;z-index:65;gap:.5rem;
	padding:.65rem .8rem calc(.65rem + env(safe-area-inset-bottom));
	background:color-mix(in srgb,var(--vr-papier) 95%,transparent);
	backdrop-filter:blur(10px);border-top:1px solid var(--vr-linie);
}
.vr-leiste .vr-knopf{flex:1}
@media (max-width:760px){
	.vr-leiste{display:flex}
	body{padding-bottom:74px}
	.vr-hoch{bottom:88px}
}

/* ---- Lupe: grosse Ansicht einer Tafel ---- */

.vr-lupe{
	position:fixed;inset:0;z-index:120;display:grid;padding:1rem;
	grid-template-rows:auto 1fr auto;background:rgb(22 19 15 / .94);
}
.vr-lupe[hidden]{display:none}
.vr-lupe__kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;color:var(--vr-papier)}
.vr-lupe__kopf .vr-etikett{margin:0;color:rgb(255 255 255 / .6)}
.vr-lupe__zu,.vr-lupe__pfeil{
	width:44px;height:44px;display:grid;place-items:center;cursor:pointer;
	background:transparent;border:1px solid rgb(255 255 255 / .3);
	color:var(--vr-papier);font-size:1.1rem;border-radius:var(--vr-radius);
}
.vr-lupe__zu:hover,.vr-lupe__pfeil:hover{background:rgb(255 255 255 / .12)}
.vr-lupe__mitte{display:flex;align-items:center;justify-content:center;gap:1rem;min-height:0}
.vr-lupe__bild{
	width:min(760px,100%);max-height:100%;display:grid;place-items:center;
	background:#2A251E;border-radius:var(--vr-radius);overflow:hidden;
	font-family:var(--vr-font-mono);font-size:.7rem;letter-spacing:.14em;color:#8C8375;
}
.vr-lupe__bild img{max-height:70vh;width:auto;object-fit:contain}
.vr-lupe__fuss{color:var(--vr-papier);text-align:center;padding:.8rem 0}
.vr-lupe__fuss strong{display:block;font-size:1.05rem;margin-bottom:.2rem}
.vr-lupe__fuss span{
	font-family:var(--vr-font-mono);font-size:.66rem;letter-spacing:.14em;
	text-transform:uppercase;color:rgb(255 255 255 / .6);
}

/* ---- Einblenden beim Scrollen ---- */

.vr-auf{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.vr-auf[data-sichtbar="1"]{opacity:1;transform:none}

/* ---- Die Tiere ---- */

.vr-fauna{position:fixed;inset:0;z-index:30;pointer-events:none;overflow:hidden}
.vr-tier{position:absolute;top:0;left:0;will-change:transform;color:var(--vr-tinte);opacity:.72}
.vr-tier svg{width:100%;height:100%}
.vr-fluegel{transform-origin:50% 46%;animation:vr-flattern 1.9s ease-in-out infinite}
.vr-fluegel--r{animation-delay:.06s}
@keyframes vr-flattern{
	0%,100%{transform:rotate(0deg)}
	50%{transform:rotate(6deg)}
}
.vr-tier--flucht .vr-fluegel{animation-duration:.28s}
.vr-bein{transform-origin:50% 55%;animation:vr-krabbeln .5s linear infinite}
.vr-bein--b{animation-delay:.25s}
@keyframes vr-krabbeln{
	0%,100%{transform:rotate(-3deg)}
	50%{transform:rotate(3deg)}
}

@media (prefers-reduced-motion:reduce){
	.vr-auf{opacity:1;transform:none;transition:none}
	.vr-fluegel,.vr-bein{animation:none}
	.vr-tafel:hover .vr-platz{transform:none}
}

/* ---- Blog, Archiv, Suche ---------------------------------------------
   Die Startseite lebt vom Sektionsbaum; Beitraege und Archive laufen ueber
   die normale WordPress-Schleife. Sie bekommen dieselben Bausteine, damit
   ein Blogeintrag nicht wie ein Fremdkoerper aussieht. */

.vr-liste{display:grid;gap:clamp(2rem,4vw,3.5rem);margin:0;padding:0;list-style:none}
.vr-liste__kopf{margin-bottom:clamp(2rem,4vw,3rem);max-width:52ch}
.vr-eyebrow{
	display:block;font-family:var(--vr-font-mono);font-size:.68rem;
	letter-spacing:.19em;text-transform:uppercase;color:var(--vr-grau);
	margin-bottom:.8rem;
}

.vr-eintrag{
	display:grid;grid-template-columns:minmax(0,320px) 1fr;
	gap:clamp(1.2rem,3vw,2.5rem);align-items:start;
	padding-bottom:clamp(2rem,4vw,3.5rem);border-bottom:1px solid var(--vr-linie);
}
.vr-eintrag:last-child{border-bottom:0;padding-bottom:0}
@media (max-width:700px){.vr-eintrag{grid-template-columns:1fr}}
.vr-eintrag__bild{border-radius:var(--vr-radius);overflow:hidden}
.vr-eintrag__bild img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.vr-eintrag__titel{font-size:calc(1.5rem * var(--vr-skala));margin:0 0 .4em}
.vr-eintrag__titel a{text-decoration:none}
.vr-eintrag__titel a:hover{color:var(--vr-magenta-text)}
.vr-eintrag__text{color:var(--vr-grau);margin:0}

.vr-seite__kopf{margin-bottom:1.6rem}
.vr-seite__titel{margin-bottom:.4em}
.vr-seite__bild{margin:0 0 2rem;border-radius:var(--vr-radius);overflow:hidden}
.vr-seite__fuss{
	margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--vr-linie);
	font-size:.92rem;color:var(--vr-grau);
}
.vr-tags{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0}
.vr-tags a{
	display:inline-block;padding:.3rem .8rem;font-size:.78rem;text-decoration:none;
	border:1px solid var(--vr-linie);border-radius:999px;color:var(--vr-grau);
}
.vr-tags a:hover{color:var(--vr-tinte);border-color:var(--vr-tinte)}
.vr-blaettern{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:2rem}

.vr-prosa h2,.vr-prosa h3{margin-top:1.8em}
.vr-prosa img{border-radius:var(--vr-radius);margin-block:1.5rem}
.vr-prosa ul,.vr-prosa ol{padding-left:1.3em}
.vr-prosa li{margin-bottom:.4em}
.vr-prosa blockquote{
	margin:1.8rem 0;padding-left:1.2rem;border-left:2px solid var(--vr-magenta-tief);
	font-family:var(--vr-font-display);font-size:1.2rem;line-height:1.4;
}

/* ---- Suchformular ---- */

.vr-suche{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:1.5rem}
.vr-suche__feld{
	flex:1 1 220px;padding:.8rem .95rem;font:inherit;font-size:.96rem;
	background:var(--vr-papier-hell);border:1.5px solid var(--vr-linie);
	color:var(--vr-tinte);border-radius:var(--vr-radius);
}
.vr-suche__feld:focus{outline:none;border-color:var(--vr-magenta-tief)}

/* ---- Kontaktformular ---- */

.vr-form__zeile{margin-bottom:1rem}
.vr-form__zeile label{display:block;font-size:.84rem;font-weight:600;margin-bottom:.35rem}
.vr-form__topf{position:absolute;left:-9999px}
.vr-form__rechnen{
	display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;
	padding:.9rem 1.1rem;margin-bottom:1rem;
	background:var(--vr-papier-hell);border:1px solid var(--vr-linie);
	border-radius:var(--vr-radius);font-size:.92rem;
}
.vr-form__rechnen input{width:6rem}
.vr-form__zustimmung{
	display:flex;gap:.7rem;align-items:flex-start;font-size:.86rem;
	color:var(--vr-grau);margin-bottom:1.2rem;
}
.vr-form__zustimmung input{margin-top:.3rem;width:19px;height:19px;flex:0 0 auto;accent-color:var(--vr-magenta-tief)}
.vr-form__fuss{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}
.vr-form__klein{font-size:.82rem;color:var(--vr-grau);margin:0}
.vr-form__meldung{
	padding:.9rem 1.1rem;margin-bottom:1.2rem;border-radius:var(--vr-radius);
	border-left:3px solid var(--vr-magenta-tief);
	background:color-mix(in srgb,var(--vr-magenta) 8%,transparent);font-size:.93rem;
}
.vr-form__meldung--fehler{
	border-left-color:#B3261E;
	background:color-mix(in srgb,#B3261E 8%,transparent);
}
.vr-knopf__pfeil{transition:transform .16s}
.vr-knopf:hover .vr-knopf__pfeil{transform:translateX(3px)}

/* ---- Kleine Traeger ohne eigene Gestaltung ---------------------------
   Diese Klassen halten das Raster zusammen. Sie bekommen nur, was sie
   wirklich brauchen - alles Weitere kommt vom uebergeordneten Raster. */

.vr-main{display:block}
.vr-icon{display:inline-block;vertical-align:middle}
.vr-fuss__marke{min-width:14rem}
.vr-fuss__kontakt{min-width:12rem}
.vr-eintrag__koerper{min-width:0}
.vr-kopfzeile__aktion{flex:0 0 auto}
.vr-frage__titel{display:inline}

/* ---- Verweise in die Studioverwaltung ---- */

.vr-kopf__portal{
	font-size:.86rem;color:var(--vr-grau);text-decoration:none;
	padding:.45rem .6rem;white-space:nowrap;
}
.vr-kopf__portal:hover{color:var(--vr-tinte)}
@media (max-width:1100px){.vr-kopf__portal{display:none}}

.vr-schublade__portal{
	display:block;padding:.9rem 0;text-decoration:none;font-weight:600;
	color:var(--vr-magenta-text);
}
.vr-info__klein{font-size:.82rem;color:var(--vr-grau)}

/* Die Fußzeile trägt bis zu acht Rechtsverweise — sie dürfen umbrechen,
   ohne dass die Zeile auseinanderfällt. */
.vr-fuss__recht{row-gap:.5rem}
.vr-fuss__recht li{white-space:nowrap}

/* ---- Tierarten: was jede Art eigen hat ---- */

.vr-tier--blatt{opacity:.6}
.vr-tier--libelle{opacity:.62}
.vr-tier--ameise{opacity:.8}