/*
Theme Name: Dachzelt2go
Theme URI: https://dachzelt2go.de/
Description: Website-Theme für die Dachzeltvermietung. Bringt Kopf- und Fußbereich, das Menü und das komplette Design mit. Zusammen mit dem Buchungs-Plugin ergibt es die vollständige Seite.
Author: Dachzelt2go
Version: 1.0.0
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 8.0
License: GPL-2.0-or-later
Text Domain: dz2g
*/
/*
* Aufbau dieser Datei
*
* 1. Das Design, wie entworfen: Farben, Typografie, Bausteine
* 2. Ergänzungen des Themes: Kopfzeile, Fußzeile, Menü
* 3. Verfeinerungen an der Bewegung und der Bedienbarkeit
*
* Die Schriften werden in assets/fonts.css eingebunden, nicht hier.
*/
:root{
--bg:#FEFCF7;
--donut:#FD9584;
--daddy:#A66D45;
--ink:#16110A;
--border:rgba(22,17,10,0.14);
--text-2:rgba(22,17,10,0.68);
--ease-out:cubic-bezier(0.16,1,0.3,1);
/* Eckenradius für Fotos und Karten. An einer Stelle ändern, wirkt überall. */
--r:22px;
/*
* Höhe der Kopfzeile. Steht hier, weil der Hero damit rechnen muss: er legt
* sich unter die Leiste und muss oben so viel Platz freihalten. Wird das
* Polster der Leiste geändert, gehört dieser Wert mit geändert.
*/
--nav-h:104px;
}
/* Auf dem Handy trägt die Leiste den Burger (40 px) statt der Menüzeile. */
@media(max-width:960px){:root{--nav-h:96px;}}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--bg);
color:var(--ink);
font-family:'Hind',system-ui,sans-serif;
font-size:18px;
line-height:1.6;
position:relative;
}
/* Technik-Ebene: dünne Haarlinien am Rand des Content-Grids — Präzisions-Signal, keine Bühne */
.ruler-line{position:fixed; top:0; bottom:0; width:1px; background:var(--border); z-index:1; pointer-events:none;}
.ruler-line.left{left:calc(50% - 640px);}
.ruler-line.right{right:calc(50% - 640px);}
@media(max-width:1360px){.ruler-line{display:none;}}
/*
* Die Haarlinien gehören auf hellen Grund, nicht über Fotos — dort wirken sie
* wie ein Kratzer im Bild. Sie liegen auf Ebene 1, jeder Bildrahmen legt sich
* deshalb auf Ebene 2 darüber. Die Kopfzeile liegt weit darüber und bleibt
* unberührt.
*/
.dz-frame,
.hero,
.cta-banner,
.photo-band,
.model-card,
.split .img-box,
.split-image-full{z-index:2;}
/* Supporting photography band for text-heavy functional pages */
.photo-band{border-radius:var(--r); overflow:hidden; aspect-ratio:21/8; margin:56px 0 0 0;}
@media(max-width:720px){.photo-band{aspect-ratio:4/3;}}
img{display:block;}
/*
* Bildrahmen.
*
* Der Rahmen gibt das Format vor, das Bild füllt ihn vollständig aus und wird
* dabei beschnitten statt verzerrt. Das Bild liegt absolut im Rahmen, damit
* spätere Regeln zur Bildhöhe es nicht wieder herausdrücken können.
*
* Welcher Ausschnitt beim Beschneiden erhalten bleibt, lässt sich pro Bild
* über --focus steuern — zum Beispiel style="--focus:50% 30%", wenn das Motiv
* im oberen Drittel sitzt. Ohne Angabe bleibt die Bildmitte stehen.
*
* Für neue Rahmen genügt die Klasse .dz-frame am umgebenden Element.
*/
.dz-frame,
.hero .bg,
.cta-banner .bg,
.photo-band,
.model-card,
.split .img-box,
.split-image-full{position:relative; overflow:hidden;}
.dz-frame > img,
.hero .bg > img,
.cta-banner .bg > img,
.photo-band > img,
.model-card > img,
.split .img-box > img,
.split-image-full > img{
position:absolute; inset:0;
width:100%; height:100%; max-width:none;
object-fit:cover;
object-position:var(--focus,50% 50%);
}
/*
* Bild waagerecht spiegeln.
*
* Für Fotos, deren Motiv auf der Seite sitzt, wo der Text steht. Klasse an das
* , nicht an den Rahmen. Nur einsetzen, wenn im Bild keine Schrift und
* kein Nummernschild zu sehen ist — gespiegelte Schrift fällt sofort auf.
*/
.dz-gespiegelt{transform:scaleX(-1);}
h1,h2,h3{font-family:'Montserrat',system-ui,sans-serif; font-weight:700; letter-spacing:-0.01em; line-height:1.1; color:var(--ink);}
h1,h2{letter-spacing:-0.03em;}
.wrap{max-width:1280px; margin:0 auto; padding:0 40px;}
@media(max-width:720px){.wrap{padding:0 20px;}}
.pill{
display:inline-flex; align-items:center; gap:8px; font-family:'Montserrat',sans-serif; font-weight:600;
font-size:15px; padding:14px 28px; border-radius:999px; text-decoration:none; white-space:nowrap;
transition:transform 160ms var(--ease-out), opacity 160ms var(--ease-out), background 160ms var(--ease-out);
}
.pill:hover{transform:translateY(-2px);}
.pill:active{transform:scale(0.97);}
.pill-primary{background:var(--donut); color:var(--ink);}
.pill-primary:hover{background:#fda995;}
.pill-ghost{background:rgba(255,255,255,0.12); color:#fff; border:1.5px solid rgba(255,255,255,0.75); backdrop-filter:blur(4px);}
.pill-ghost:hover{background:rgba(255,255,255,0.22);}
.pill-outline{background:transparent; color:var(--ink); border:1.5px solid var(--ink);}
.pill-outline:hover{background:var(--ink); color:#fff;}
/* Scroll reveal */
.reveal, .reveal-group > *{
opacity:0; transform:translateY(28px) scale(0.985);
transition:opacity 480ms var(--ease-out), transform 480ms var(--ease-out);
will-change:opacity, transform;
}
.reveal.is-visible, .reveal-group > *.is-visible{opacity:1; transform:translateY(0) scale(1);}
.reveal-group > *:nth-child(1){transition-delay:0ms;}
.reveal-group > *:nth-child(2){transition-delay:55ms;}
.reveal-group > *:nth-child(3){transition-delay:110ms;}
.reveal-group > *:nth-child(4){transition-delay:165ms;}
.reveal-group > *:nth-child(5){transition-delay:165ms;}
.reveal-group > *:nth-child(6){transition-delay:165ms;}
@media (prefers-reduced-motion: reduce){
.reveal, .reveal-group > *{transform:none !important; transition:opacity 300ms ease;}
}
/* NAV — default: overlay on photo hero, white text */
/* Nur die Kopfzeile, nicht jedes nav-Element der Seite. */
.site-nav{position:absolute; top:0; left:0; right:0; z-index:20; padding:32px 0;}
.site-nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:24px;}
.logo{font-family:'Montserrat',sans-serif; font-weight:700; font-size:21px; color:#fff; letter-spacing:-0.01em; text-decoration:none; flex-shrink:0;}
/*
* Stapelreihenfolge im Kopfbereich, von unten nach oben:
* 18 Abdunklung, 19 Logo, 20 Menütafel, 21 Burger.
* Das Logo braucht die 19 nur, damit es über der Abdunklung bleibt. Es darf
* nicht über der Menütafel liegen, sonst scheint es auf dem Telefon durch das
* geöffnete Menü. Die Angabe gehört deshalb an das Logo in der Kopfzeile und
* nicht an .logo, denn diese Klasse trägt auch das Logo in der Fußzeile.
*/
.site-nav .logo{position:relative; z-index:19;}
.logo .go{color:var(--donut);}
.nav-links{display:flex; align-items:center; gap:32px; list-style:none;}
.nav-links a{color:#fff; text-decoration:none; font-size:15px; font-weight:500; opacity:0.92; font-family:'Hind',sans-serif; padding-bottom:4px; border-bottom:2px solid transparent; transition:opacity 160ms ease-out, border-color 160ms ease-out;}
.nav-links a:hover{opacity:1;}
.nav-links a.active{opacity:1; border-bottom-color:var(--donut);}
.nav-links-cta{display:none;}
.nav-cta-desktop{flex-shrink:0;}
/* NAV — light variant for pages without a photo hero (static, in normal flow) */
.dz-light-nav .site-nav{position:static; background:var(--bg); border-bottom:1px solid var(--border); padding:24px 0;}
.dz-light-nav .logo{color:var(--ink);}
.dz-light-nav .nav-links a{color:var(--ink); opacity:0.75;}
.dz-light-nav .nav-links a:hover{opacity:1;}
.dz-light-nav .nav-links a.active{opacity:1;}
/* NAV — mobile burger + drawer (all pages, both nav variants) */
.nav-burger{display:none; flex-direction:column; justify-content:center; gap:5px; width:40px; height:40px; background:none; border:none; cursor:pointer; padding:8px; position:relative; z-index:21; flex-shrink:0;}
.nav-burger span{display:block; width:24px; height:2px; background:#fff; transition:transform 250ms var(--ease-out), opacity 200ms var(--ease-out);}
.dz-light-nav .nav-burger span{background:var(--ink);}
.nav-burger.is-open span{background:#fff;}
.dz-light-nav .nav-burger.is-open span{background:#fff;}
.nav-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.nav-burger.is-open span:nth-child(2){opacity:0;}
.nav-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.nav-scrim{position:fixed; inset:0; background:rgba(15,10,4,0.55); opacity:0; pointer-events:none; transition:opacity 280ms var(--ease-out); z-index:18;}
.nav-scrim.is-open{opacity:1; pointer-events:auto;}
@media(max-width:960px){
.nav-burger{display:flex;}
.nav-cta-desktop{display:none;}
.nav-links{
position:fixed; top:0; right:0; bottom:0; width:min(320px,84vw);
background:var(--ink); flex-direction:column; align-items:flex-start; gap:0;
padding:104px 32px 32px; transform:translateX(100%); transition:transform 320ms var(--ease-out);
z-index:20; overflow-y:auto;
}
.nav-links.is-open{transform:translateX(0);}
.nav-links li{width:100%;}
.nav-links a{display:block; width:100%; color:#fff; opacity:0.82; padding:16px 0; border-bottom:1px solid rgba(255,255,255,0.14); font-size:17px;}
.dz-light-nav .nav-links a{color:#fff;}
.nav-links-cta{display:block; width:100%; margin-top:28px;}
.nav-links-cta .pill{width:100%; justify-content:center;}
}
@media(min-width:961px){.nav-scrim{display:none !important;}}
/* HERO — full photo, near-black gradient overlay */
/*
* Der Hero ist bildschirmhoch, aber nicht bildschirmhoch gedeckelt.
*
* Früher stand hier height:100vh mit max-height. Der Kasten war damit exakt so
* hoch wie das Fenster — und weil der Inhalt am unteren Rand ausgerichtet ist,
* lief er bei kurzen Fenstern oben heraus, unter die Kopfzeile, und wurde von
* overflow:hidden abgeschnitten. Ab etwa 790 px Fensterhöhe lag die
* Überschrift auf dem Menü, auf kleinen Telefonen war sie ganz weg.
*
* Jetzt gibt min-height die Wunschhöhe vor und height:auto erlaubt dem Kasten,
* darüber hinauszuwachsen, wenn der Text mehr Platz braucht. Auf hohen
* Fenstern ändert sich dadurch nichts.
*
* svh statt vh: vh meint auf dem Telefon die Höhe OHNE eingeblendete
* URL-Leiste. Mit ihr ist der sichtbare Bereich kleiner, als vh verspricht –
* genau dort trat der Fehler auf. svh rechnet mit der kleineren Höhe. Die
* Zeile darüber bleibt als Rückfall für Browser ohne svh stehen.
*/
.hero{
position:relative;
height:auto;
min-height:min(100vh,920px);
min-height:min(100svh,920px);
overflow:hidden;
}
.hero .bg{position:absolute; inset:0;}
/*
* Der Verlauf muss die Schrift auf jedem Foto tragen, auch auf hellem Himmel
* oder Schnee. Die frühere Fassung wurde in der Mitte fast durchsichtig, dort
* steht aber der Fließtext.
*/
.hero .overlay{
position:absolute; inset:0;
background:linear-gradient(180deg, rgba(15,10,4,0.60) 0%, rgba(15,10,4,0.26) 32%, rgba(15,10,4,0.52) 62%, rgba(15,10,4,0.94) 100%);
}
/*
* Der Innenabstand oben hält die Kopfzeile frei. Ohne ihn schiebt sich der
* Text unter das Menü, sobald das Fenster kurz ist — die Leiste liegt ja über
* dem Hero, nicht davor. min-height statt height, damit der Block mitwächst,
* wenn der Text nicht auf einen Bildschirm passt.
*/
.hero-content{
position:relative; z-index:2;
height:auto;
min-height:min(100vh,920px);
min-height:min(100svh,920px);
display:flex; flex-direction:column; justify-content:flex-end;
padding-top:calc(var(--nav-h) + 24px);
padding-bottom:96px;
}
@media(max-width:960px){.hero-content{padding-top:calc(var(--nav-h) + 16px);}}
/*
* Eyebrow als Chip.
*
* Sitzt in Flex-Spalten (Hero) und in normalen Blöcken (Abschnittskopf).
* align-self und width verhindern, dass der Chip sich im Flex-Container auf
* die volle Breite zieht.
*/
.eyebrow{
font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px;
letter-spacing:0.06em; text-transform:uppercase; color:#fff;
display:inline-flex; align-items:center; align-self:flex-start; width:fit-content;
gap:9px; padding:8px 16px 8px 13px; border-radius:999px; margin-bottom:24px;
background:rgba(255,255,255,0.14); border:1px solid rgba(255,255,255,0.30);
backdrop-filter:blur(6px);
}
.eyebrow::before{
content:""; display:block; width:6px; height:6px; border-radius:50%;
background:var(--daddy); flex-shrink:0;
}
/* Auf dem Handy soll der Chip nicht an beide Ränder stoßen. */
@media(max-width:560px){
.eyebrow{font-size:11px; padding:7px 13px 7px 11px; gap:8px; margin-bottom:20px;}
}
.hero h1{color:#fff; font-size:clamp(34px,6.2vw,84px); font-weight:800; max-width:16ch; margin-bottom:24px;}
.hero h1 .accent-dot{color:var(--donut);}
.hero p.lead{color:rgba(255,255,255,0.9); font-size:21px; max-width:52ch; margin-bottom:40px; font-family:'Hind',sans-serif;}
.hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
/* HERO — compact text-only variant for functional pages (Buchen, FAQ) */
.hero-compact{padding:72px 0 40px 0;}
.hero-compact h1{font-size:clamp(34px,4.8vw,64px); font-weight:800; max-width:20ch; margin-bottom:20px; text-wrap:balance;}
.hero-compact p.lead{color:var(--text-2); font-size:20px; max-width:640px; margin-bottom:32px; font-family:'Hind',sans-serif;}
.hero-compact .hero-ctas{display:flex; gap:16px; flex-wrap:wrap;}
/* SECTION HEAD */
/*
* Abstand zwischen den Blöcken.
*
* Zwei aufeinanderfolgende Abschnitte addieren ihren Abstand — aus 72 px
* werden zwischen zwei Textblöcken also 144 px. Deshalb ist der Wert hier
* kleiner, als er beim Lesen wirkt.
*/
section{padding:72px 0;}
@media(max-width:720px){section{padding:52px 0;}}
.section-head{margin-bottom:40px; max-width:760px;}
/* Vor einem Raster darf mehr Luft stehen als vor einem Absatz. */
.section-head + .models-grid,
.section-head + .steps-grid,
.section-head + .voucher-grid,
.section-head + .split{margin-top:24px;}
.section-head h2{font-size:clamp(30px,3.8vw,52px); font-weight:800; margin-bottom:12px;}
.section-head p{color:var(--text-2); font-size:18px; font-family:'Hind',sans-serif;}
.body-copy{max-width:68ch; color:var(--text-2); font-size:19px; font-family:'Hind',sans-serif;}
/* Chip auf hellem Grund — Hero-Fassung ist hell auf Foto, diese hier dunkel auf Papier. */
.section-head .eyebrow,
.hero-compact .eyebrow{
color:var(--ink); opacity:1;
background:rgba(22,17,10,0.045); border:1px solid var(--border); backdrop-filter:none;
}
.body-copy p{margin-bottom:20px;}
.body-copy a, .inline-link{color:var(--ink); text-decoration:underline; text-decoration-color:var(--donut); text-decoration-thickness:2px; text-underline-offset:3px; font-weight:600;}
/* STATS — Zellen mit haarfeinen Trennern statt einer losen Textreihe */
.stats{background:var(--bg); padding:0; border-bottom:1px solid var(--border);}
.stats .wrap{display:grid; grid-template-columns:repeat(3,1fr); gap:0;}
.stats .wrap > *{padding:44px 32px; border-left:1px solid var(--border);}
.stats .wrap > *:first-child{border-left:none; padding-left:0;}
/*
* Die Zahl darf nie umbrechen — „ab 35 €" auf zwei Zeilen liest sich falsch.
* Deshalb wächst sie mit der Fensterbreite mit, statt fest bei 52px zu stehen.
*/
.stat-num{font-family:'Montserrat',sans-serif; font-weight:800; font-size:clamp(32px,3.6vw,52px); white-space:nowrap; color:var(--ink); letter-spacing:-0.03em;}
.stat-label{font-size:14px; color:var(--text-2); margin-top:6px; max-width:22ch; font-family:'Hind',sans-serif; font-weight:500;}
@media(max-width:1024px){.stats .wrap > *{padding:36px 22px;}}
@media(max-width:720px){
.stats .wrap{grid-template-columns:1fr;}
.stats .wrap > *{padding:28px 0; border-left:none; border-top:1px solid var(--border);}
.stats .wrap > *:first-child{border-top:none;}
.stat-num{font-size:40px; white-space:normal;}
}
/* STEPS */
.steps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:32px;}
@media(max-width:860px){.steps-grid{grid-template-columns:1fr;}}
/* Auf dem Handy wie die Modelle: nebeneinander und zum Wischen. */
@media(max-width:720px){
.steps-grid{
grid-template-columns:none; grid-auto-flow:column;
grid-auto-columns:78%; gap:16px; align-items:start;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline:20px;
margin-inline:-20px; padding:0 20px 6px 20px;
scrollbar-width:none;
}
.steps-grid::-webkit-scrollbar{display:none;}
.step{scroll-snap-align:start;}
}
/* Ablauf als Reihe: Zahl, Linie, Text — ohne Kasten. */
.step{background:none; border:none; border-top:1px solid var(--ink); border-radius:0; padding:28px 0 0 0;}
.step-num{
background:none; border-radius:0; color:var(--text-2);
font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px;
letter-spacing:0.1em; margin-bottom:20px;
}
.step h3{font-size:23px; margin-bottom:10px; color:var(--ink);}
.step p{color:var(--text-2); font-size:16px; font-family:'Hind',sans-serif;}
.step .step-link{display:inline-block; margin-top:12px; font-size:15px;}
/*
* Textblock mit Video daneben.
*
* Das Video ist auf weißem Grund aufgenommen. Der Kasten bekommt deshalb Weiß
* statt der Papierfarbe — sonst zeichnet sich das Video als hellerer Block
* darin ab.
*/
.text-video{display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center;}
@media(max-width:860px){.text-video{grid-template-columns:1fr; gap:32px;}}
/*
* Das Seitenverhältnis steht fest im Stylesheet, nicht erst wenn das Video
* geladen ist. Sonst ist der Kasten anfangs 150 px hoch — die Standardhöhe
* eines Videos ohne Maße — und springt beim Start auf seine volle Höhe.
*/
.video-box{border-radius:var(--r); overflow:hidden; background:#fff; border:1px solid var(--border); position:relative; z-index:2; aspect-ratio:16/9;}
.video-box video{
position:absolute; inset:0;
display:block; width:100%; height:100%; max-width:none;
object-fit:cover;
}
/*
* Standbild als eigenes Bild statt über das poster-Attribut.
*
* Das Attribut ist unzuverlässig: Sobald der Browser Videobilder vorliegen
* hat, zeigt er statt des Standbilds das erste Bild des Videos — und das ist
* hier fast leer. Als eigenes Element liegt das Standbild verlässlich oben,
* bis das Skript beim Anlaufen `laeuft` setzt.
*
* Absolut positioniert, damit die spätere Regel `video,img{height:auto}` es
* nicht wieder aus dem Kasten drückt — dieselbe Falle wie bei den Bildrahmen.
*/
.video-standbild{
position:absolute; inset:0;
width:100%; height:100%; max-width:none;
object-fit:cover;
transition:opacity 320ms var(--ease-out);
}
.video-box.laeuft .video-standbild{opacity:0; pointer-events:none;}
/* Die Vorzüge in einer Reihe, in derselben Sprache wie die Ablaufschritte. */
.usp-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:32px; margin-top:64px;}
.usp-grid > *{border-top:1px solid var(--ink); padding-top:20px;}
.usp-grid h3{font-size:17px; margin-bottom:10px; color:var(--ink);}
.usp-grid p{color:var(--text-2); font-size:15px; line-height:1.55; font-family:'Hind',sans-serif;}
@media(max-width:960px){.usp-grid{grid-template-columns:repeat(2,1fr); gap:28px 32px;}}
/* Auf dem Handy nebeneinander zum Wischen, wie Modelle und Ablaufschritte. */
@media(max-width:720px){
.usp-grid{
grid-template-columns:none; grid-auto-flow:column;
grid-auto-columns:78%; gap:16px; align-items:start; margin-top:44px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline:20px;
margin-inline:-20px; padding:0 20px 6px 20px;
scrollbar-width:none;
}
.usp-grid::-webkit-scrollbar{display:none;}
.usp-grid > *{scroll-snap-align:start;}
}
/*
* Die Startseite trägt im Hero keinen Chip mehr. Ohne ihn rutscht der Titel
* nach unten, weil der Inhalt am unteren Rand ausgerichtet ist — hier wieder
* angehoben. Nur die Startseite, die übrigen Heros haben ihren Chip behalten.
*/
.home .hero-content{padding-bottom:124px;}
@media(max-width:720px){.home .hero-content{padding-bottom:72px;}}
/*
* MODELS GRID — Bento.
*
* Das erste Modell bekommt die doppelte Fläche, das zweite die doppelte
* Breite, Zubehör bleibt klein. Die Reihenfolge im Raster ergibt sich aus der
* Reihenfolge im Inhalt, es braucht also keine Klassen in der Seite.
*
* Die Karten setzen ihre Höhe über grid-auto-rows, nicht über aspect-ratio —
* sonst könnten die verschieden großen Kacheln nicht bündig abschließen.
*/
/*
* Das Raster traegt sechs Kacheln und macht dabei die Hierarchie sichtbar:
*
* Reihe 1+2 [ Roof Space 2 ][ Roof Space 4 ]
* Reihe 3 [ Vorzelt ][ Markise ][ Thermo ][ Matratze ]
*
* Gewaehlt wird zuerst ein Zelt, danach das Zubehoer. Deshalb sind die beiden
* Zelte gleich gross und doppelt so hoch wie die vier Zubehoerkacheln. Vorher
* war nur das Roof Space 2 gross, dadurch sah das Roof Space 4 aus wie
* Zubehoer.
*/
.models-grid{display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:240px; gap:18px;}
.model-card:nth-child(1),
.model-card:nth-child(2){grid-column:span 2; grid-row:span 2;}
@media(max-width:960px){
/*
* Zwei Spalten: die Zelte nehmen je die volle Breite, das Zubehoer steht
* zu zweit nebeneinander. Sechs Kacheln, vier volle Reihen, keine Luecke.
*/
.models-grid{grid-template-columns:repeat(2,1fr); grid-auto-rows:250px;}
.model-card:nth-child(1),
.model-card:nth-child(2){grid-column:span 2; grid-row:span 1;}
}
/*
* Auf dem Handy stehen die vier Modelle nebeneinander und werden gewischt.
* Untereinander wären es vier Bildschirmhöhen, bevor der Ablauf beginnt.
*
* Die Kachel ist absichtlich schmaler als der Bildschirm: die angeschnittene
* nächste Kachel am Rand ist der Hinweis, dass sich hier etwas wischen lässt.
* Der negative Außenabstand hebt den Rand der Seite auf, damit bis an die
* Bildschirmkante gewischt werden kann.
*/
@media(max-width:720px){
.models-grid{
grid-template-columns:none; grid-auto-flow:column;
grid-auto-columns:76%; grid-auto-rows:300px; gap:12px;
overflow-x:auto; overscroll-behavior-x:contain;
scroll-snap-type:x mandatory; scroll-padding-inline:20px;
margin-inline:-20px; padding:0 20px 6px 20px;
scrollbar-width:none;
}
.models-grid::-webkit-scrollbar{display:none;}
.model-card{
grid-column:auto !important; grid-row:auto !important;
scroll-snap-align:start;
}
}
.model-card{position:relative; border-radius:var(--r); overflow:hidden; background:var(--bg);}
.model-card img{transition:transform 400ms var(--ease-out);}
.model-card:hover img{transform:scale(1.05);}
.model-card .tag{
position:absolute; top:16px; left:16px; color:#fff;
background:rgba(15,10,4,0.55); border:1px solid rgba(255,255,255,0.35); backdrop-filter:blur(6px);
font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; padding:6px 14px; border-radius:999px;
}
.model-card .info{position:absolute; left:0; right:0; bottom:0; padding:26px; background:linear-gradient(180deg, rgba(15,10,4,0) 0%, rgba(15,10,4,0.55) 45%, rgba(15,10,4,0.92) 100%);}
.model-card .info h3{color:#fff; font-size:19px; font-weight:700; margin-bottom:4px;}
.model-card:nth-child(1) .info h3{font-size:28px;}
.model-card .info .specs{color:rgba(255,255,255,0.75); font-size:13px; margin-bottom:8px; font-family:'Hind',sans-serif;}
.model-card .info .price{display:inline-block; color:var(--ink); font-size:13px; font-weight:600; font-family:'Montserrat',sans-serif; background:var(--donut); padding:4px 10px; border-radius:6px;}
.model-card .info .price-note{display:block; color:rgba(255,255,255,0.7); font-size:11px; margin-top:6px; font-family:'Hind',sans-serif;}
.models-note{margin-top:24px; color:var(--text-2); font-size:15px;}
/* SPLIT (image + text) */
.split{display:grid; grid-template-columns:1fr 1fr; gap:64px; align-items:center;}
@media(max-width:860px){.split{grid-template-columns:1fr; gap:32px;}}
.split .img-box{border-radius:var(--r); overflow:hidden; aspect-ratio:4/3;}
/* Breites Einzelbild über die volle Textbreite, z. B. auf „Über uns". */
.split-image-full{border-radius:var(--r); overflow:hidden; aspect-ratio:16/7;}
@media(max-width:720px){.split-image-full{aspect-ratio:4/3;}}
.split h2{font-size:clamp(26px,3vw,38px); margin-bottom:20px; color:var(--ink);}
.split p{color:var(--text-2); font-size:18px; margin-bottom:16px; font-family:'Hind',sans-serif;}
.split ul{list-style:none; margin-top:24px;}
.split li{padding:14px 0; border-top:1px solid var(--border); font-size:16px; display:flex; gap:12px; align-items:baseline; font-family:'Hind',sans-serif; font-weight:500; color:var(--ink);}
.split li:first-child{border-top:none;}
.split li::before{content:"—"; color:var(--daddy); font-weight:700;}
/* Advantage list (Kaufen page) */
.advantage-list{list-style:none; max-width:560px; margin:32px 0 0 0;}
.advantage-list li{display:flex; justify-content:space-between; gap:24px; padding:16px 0; border-top:1px solid var(--border); font-family:'Hind',sans-serif; font-size:17px;}
.advantage-list li:first-child{border-top:none;}
.advantage-list li .val{font-family:'Montserrat',sans-serif; font-weight:700; color:var(--ink); white-space:nowrap;}
.advantage-total{max-width:560px; margin-top:8px; padding-top:20px; border-top:1px solid var(--ink); display:flex; justify-content:space-between; align-items:baseline; font-family:'Montserrat',sans-serif; font-weight:700; font-size:22px;}
.advantage-total .val{color:var(--ink); background:var(--donut); padding:4px 14px; border-radius:8px; font-size:20px; white-space:nowrap;}
/* Voucher cards (Gutschein page) */
.voucher-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:24px;}
@media(max-width:720px){.voucher-grid{grid-template-columns:1fr;}}
.voucher-card{background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:32px; transition:transform 250ms var(--ease-out);}
.voucher-card:hover{transform:translateY(-4px);}
.voucher-card h3{font-size:20px; margin-bottom:20px;}
.voucher-card .price-row{display:flex; justify-content:space-between; align-items:baseline; padding:12px 0; border-top:1px solid var(--border); font-family:'Hind',sans-serif;}
.voucher-card .price-row:first-of-type{border-top:none;}
.voucher-card .price-row .dur{color:var(--text-2); font-size:15px;}
.voucher-card .price-row .amt{font-family:'Montserrat',sans-serif; font-weight:700; color:var(--ink); font-size:20px;}
/* FAQ accordion */
.faq-category{margin-bottom:56px;}
.faq-category h2{font-size:24px; margin-bottom:8px;}
.faq-item{border-top:1px solid var(--border); padding:20px 0;}
.faq-category .faq-item:last-child{border-bottom:1px solid var(--border);}
.faq-item summary{cursor:pointer; font-family:'Montserrat',sans-serif; font-weight:600; font-size:17px; color:var(--ink); list-style:none; display:flex; justify-content:space-between; align-items:center; gap:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary{transition:opacity 160ms ease-out;}
.faq-item summary:hover{opacity:0.7;}
.faq-item summary::after{content:"+"; font-size:22px; color:var(--daddy); flex-shrink:0; transition:transform 200ms var(--ease-out); line-height:1;}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item p{margin-top:14px; color:var(--text-2); font-size:16px; line-height:1.6; max-width:720px; font-family:'Hind',sans-serif;}
/* CLOSING CTA */
.cta-banner{position:relative; padding:0; height:480px; overflow:hidden;}
.cta-banner .bg{position:absolute; inset:0;}
.cta-banner .bg > img{--focus:50% 58%;}
.cta-banner .overlay{position:absolute; inset:0; background:linear-gradient(180deg, rgba(15,10,4,0.44) 0%, rgba(15,10,4,0.80) 100%);}
/* Seitenrand wie im Rest der Seite (.wrap), nicht 4 px daneben. */
.cta-banner .content{position:relative; z-index:2; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:0 20px; gap:12px;}
.cta-banner h2{color:#fff; font-size:clamp(26px,4vw,46px); max-width:760px; margin-bottom:20px;}
.cta-banner .cta-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
/* Simple CTA block (no photo) — used e.g. on Buchen page */
.cta-block{background:var(--bg); border:1px solid var(--border); border-radius:var(--r); padding:56px; text-align:center;}
.cta-block h2{margin-bottom:12px;}
.cta-block p{color:var(--text-2); max-width:560px; margin:0 auto 28px auto; font-family:'Hind',sans-serif;}
.cta-block .cta-row{display:flex; gap:16px; flex-wrap:wrap; justify-content:center;}
footer{background:var(--bg); color:var(--ink); padding:64px 0 40px 0; border-top:1px solid var(--border);}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:24px; align-items:flex-start;}
footer .logo{color:var(--ink);}
footer .logo .go{color:var(--ink);}
footer .foot-links{display:flex; gap:28px; list-style:none; flex-wrap:wrap;}
footer .foot-links a{color:var(--ink); text-decoration:none; font-size:14px; font-family:'Hind',sans-serif; font-weight:500; opacity:0.85; transition:opacity 160ms ease-out;}
footer .foot-links a:hover{opacity:1;}
footer .copyright{font-size:13px; margin-top:32px; color:var(--text-2); font-family:'Hind',sans-serif; font-weight:500;}
/* ==========================================================================
2. Ergänzungen des Themes
========================================================================== */
/* Sprungmarke für Tastaturnutzer: sichtbar, sobald sie den Fokus bekommt. */
.skip-link {
position: absolute;
left: -9999px;
top: 0;
z-index: 100;
padding: 12px 20px;
background: var(--ink);
color: #fff;
font-family: 'Montserrat', sans-serif;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 8px 0;
}
.skip-link:focus {
left: 0;
}
/* Kopfzeile. Auf der Startseite liegt sie über dem Titelbild, sonst auf hellem
Grund – gesteuert über die Body-Klasse. */
.site-nav {
position: absolute;
top: 0;
left: 0;
right: 0;
z-index: 20;
padding: 28px 0;
}
.dz-light-nav .site-nav {
position: static;
padding: 24px 0;
background: var(--bg);
border-bottom: 1px solid var(--border);
}
.site-nav .wrap {
display: flex;
align-items: center;
justify-content: space-between;
gap: 32px;
}
/*
* Wortmarke.
*
* Schnitt 700, nicht 800: ExtraBold macht die Buchstaben dicker und die
* Zwischenräume damit enger. Zusammen mit der negativen Laufweite, die vorher
* hier stand, wirkte der Schriftzug gedrängt. Negatives Tracking ist ein
* Mittel für große Grade wie die Überschrift im Titelbild – bei 22 px zieht
* es die Schrift nur zusammen. Die Markenrichtlinien sehen für Montserrat
* ohnehin 600 oder 700 vor.
*/
.logo {
font-family: 'Montserrat', sans-serif;
font-weight: 700;
font-size: 22px;
letter-spacing: 0.01em;
color: #fff;
text-decoration: none;
white-space: nowrap;
}
.logo span {
color: var(--donut);
}
.dz-light-nav .logo {
color: var(--ink);
}
/* Menü. Die Listenpunkte kommen aus WordPress, nicht aus dem Seiteninhalt.
Das umschließende nav-Element braucht eigenes Styling, sonst nimmt es die
volle Breite und schiebt sich über das Logo. */
.nav-menu {
display: flex;
align-items: center;
}
.site-footer__nav {
display: flex;
}
.site-footer__brand {
min-width: 0;
}
.nav-links {
display: flex;
align-items: center;
gap: 32px;
list-style: none;
margin: 0;
padding: 0;
}
/*
* Der Innenabstand oben setzt die Liste auf null, damit die Leiste auf dem
* Desktop bündig sitzt. Der Schieber auf dem Handy braucht ihn aber — sonst
* kleben die Einträge am oberen und linken Rand. Deshalb hier zurückgeholt,
* nach der Regel darüber und nicht davor.
*/
@media (max-width: 960px) {
.nav-links {
padding: 104px 32px 40px;
}
}
.nav-links a {
display: inline-block;
padding-bottom: 4px;
border-bottom: 2px solid transparent;
color: #fff;
opacity: 0.92;
font-family: 'Hind', sans-serif;
font-size: 15px;
font-weight: 500;
text-decoration: none;
transition: opacity 160ms var(--ease-out), border-color 160ms var(--ease-out);
}
.dz-light-nav .nav-links a {
color: var(--ink);
opacity: 0.75;
}
/* Die aktuelle Seite ist markiert – sonst weiß niemand, wo er ist. */
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
opacity: 1;
border-bottom-color: var(--donut);
}
/* Der Buchen-Knopf im Menü: Menüpunkt in WordPress die Klasse "cta" geben. */
.nav-links .nav-cta > a {
padding: 12px 24px;
border-radius: 999px;
border-bottom: 0;
background: var(--donut);
color: var(--ink);
font-family: 'Montserrat', sans-serif;
font-weight: 600;
opacity: 1;
transition: transform 160ms var(--ease-out), background 160ms var(--ease-out);
}
.nav-links .nav-cta > a:active {
transform: scale(0.97);
}
/* Fußzeile */
.site-footer {
padding: 64px 0 48px;
border-top: 1px solid var(--border);
background: var(--bg);
}
.site-footer .wrap {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 48px;
flex-wrap: wrap;
}
.logo--footer {
color: var(--ink);
font-size: 20px;
}
.site-footer p {
margin-top: 8px;
color: var(--text-2);
font-size: 15px;
}
.site-footer a {
color: inherit;
}
.footer-links {
display: flex;
flex-wrap: wrap;
gap: 12px 28px;
list-style: none;
margin: 0;
padding: 0;
}
.footer-links a {
color: var(--text-2);
font-size: 15px;
text-decoration: none;
transition: color 160ms var(--ease-out);
}
.wrap--narrow {
max-width: 760px;
padding-top: 64px;
padding-bottom: 64px;
}
/*
* KOPFZEILE UND FUSSZEILE AUF DEM HANDY.
*
* Warum dieser Block hier unten steht und nicht oben bei den übrigen
* Handy-Regeln: Die Kopfzeile ist in dieser Datei zweimal beschrieben – einmal
* im Design-Teil, einmal im Theme-Teil weiter oben. Beide benutzen dieselben
* Selektoren mit derselben Spezifität, also gewinnt der spätere. Eine
* @media-Abfrage ändert daran nichts, sie erhöht die Spezifität nicht. Die
* Regeln für den Schieber aus dem Design-Teil wurden dadurch stillschweigend
* wieder überschrieben: die Einträge standen in 15 statt 17 px, ohne
* Trennlinien, mit 32 px Abstand – und auf allen Seiten außer der Startseite
* in Tintenschwarz auf schwarzem Grund, also unlesbar.
*
* Sauber wäre, die Kopfzeile nur noch an einer Stelle zu beschreiben. Bis
* dahin steht die Handy-Fassung zuletzt und behält damit das letzte Wort.
*/
@media (max-width: 960px) {
/*
* Der Burger gehört an den rechten Rand. Das nav-Element bleibt als
* 0 px breites Flex-Element in der Reihe stehen – bei space-between
* beansprucht es trotzdem seinen Anteil am freien Platz und schob den
* Burger in die Bildschirmmitte. Das automatische Außenmaß links zieht
* ihn nach rechts, der aufgehobene Abstand nimmt ihm die letzten 32 px.
*/
.site-nav .wrap {
gap: 0;
}
.nav-burger {
margin-left: auto;
}
/* Der Schieber: Liste bündig links, Einträge als Zeilen mit Trennlinie. */
.nav-links {
align-items: flex-start;
gap: 0;
}
.nav-links a {
display: block;
width: 100%;
padding: 16px 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
color: #fff;
opacity: 0.82;
font-size: 17px;
}
/* Der Schieber steht immer auf dunklem Grund, auch auf hellen Seiten. */
.dz-light-nav .nav-links a {
color: #fff;
opacity: 0.82;
}
/*
* Die aktuelle Seite wird hier über die Schriftfarbe markiert, nicht über
* die Unterkante – die ist im Schieber die Trennlinie zum nächsten
* Eintrag und würde als einzelner farbiger Strich aussehen wie ein Fehler.
*/
.nav-links .current-menu-item > a,
.nav-links .current_page_item > a {
border-bottom-color: rgba(255, 255, 255, 0.14);
color: var(--donut);
opacity: 1;
}
.nav-links .nav-cta > a {
margin-top: 24px;
border-bottom: 0;
text-align: center;
}
}
/*
* Fußzeile: Links und der Cookie-Block dürfen umbrechen.
*
* Ohne flex-wrap wurde der Cookie-Block auf dem Telefon in eine 82 px schmale
* Spalte neben der Linkliste gequetscht und lief dort 280 px in die Höhe.
*/
.site-footer__nav {
flex-wrap: wrap;
gap: 16px 28px;
align-items: baseline;
}
@media (max-width: 720px) {
.site-footer__nav {
flex-direction: column;
align-items: flex-start;
gap: 20px;
}
}
/* Fußzeilen-Links waren 24 px hoch und damit als Ziel für den Daumen zu klein. */
.footer-links a {
display: inline-block;
padding: 6px 0;
}
/* ==========================================================================
3. Verfeinerungen an Bewegung und Bedienbarkeit
========================================================================== */
/*
* Schwebezustände nur auf Geräten mit Zeiger.
*
* Auf einem Telefon löst die Berührung den Hover-Zustand aus und lässt ihn
* hängen, bis woanders getippt wird. Ein Knopf bleibt dann angehoben stehen.
*/
@media (hover: hover) and (pointer: fine) {
.nav-links a:hover {
opacity: 1;
}
.nav-links .nav-cta > a:hover {
background: #fda995;
transform: translateY(-2px);
}
.footer-links a:hover {
color: var(--ink);
}
}
/*
* Sichtbarer Fokus auf allem Bedienbaren.
*
* Ohne diese Regel sieht man beim Bedienen mit der Tastatur nicht, wo man ist.
* Der Ring liegt außerhalb des Elements, damit er nichts überdeckt.
*/
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
outline: 2px solid var(--daddy);
outline-offset: 3px;
border-radius: 4px;
}
/* Alles Drückbare gibt eine Rückmeldung. */
button:active,
.pill:active,
.nav-burger:active {
transform: scale(0.97);
}
/*
* Wenn Bewegung unerwünscht ist, wird nichts versteckt.
*
* Die ursprüngliche Regel setzte nur die Verschiebung zurück und ließ die
* Deckkraft bei null. Wer Animationen abgeschaltet hat, sah damit eine leere
* Seite und musste darauf hoffen, dass ein Skript sie wieder einblendet.
*/
@media (prefers-reduced-motion: reduce) {
.reveal,
.reveal-group > * {
opacity: 1 !important;
transform: none !important;
transition: none !important;
transition-delay: 0ms !important;
}
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/*
* Ohne JavaScript bleibt die Seite lesbar.
*
* Das Einblenden beim Scrollen setzt Inhalte zunächst auf unsichtbar. Läuft
* das Skript nicht, wäre die Seite leer. Diese Klasse nimmt das Theme im
* Kopfbereich weg, sobald das Skript übernimmt.
*/
.dz2g-no-js .reveal,
.dz2g-no-js .reveal-group > * {
opacity: 1;
transform: none;
}
/* Zahlen in Preisen und Daten laufen auf gleicher Breite. */
.price,
.stat-value,
time {
font-variant-numeric: tabular-nums;
}
/*
* Bilder brechen nie aus ihrem Container aus.
*
* Gilt für Bilder im Fließtext, die der Editor einfügt. Bilder in einem
* Bildrahmen sind davon ausgenommen — sie sollen den Rahmen ja gerade füllen.
*/
img,
svg,
video {
max-width: 100%;
height: auto;
}
/* Newsletter in der Fußzeile: klein, ein Feld, ein Haken. */
.site-footer__newsletter {
flex: 0 1 340px;
min-width: 260px;
}
.footer-nl__title {
margin: 0;
font-family: 'Montserrat', system-ui, sans-serif;
font-weight: 700;
font-size: 15px;
color: var(--ink);
}
.site-footer .footer-nl__lead {
margin-top: 4px;
font-size: 14px;
}
.footer-nl__hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.footer-nl__row {
display: flex;
gap: 8px;
margin-top: 12px;
}
.footer-nl__row input[type="email"] {
flex: 1 1 auto;
min-width: 0;
padding: 10px 14px;
border: 1.5px solid var(--border);
border-radius: 999px;
background: #fff;
font: inherit;
font-size: 15px;
color: var(--ink);
}
.footer-nl__row input[type="email"]:focus {
outline: none;
border-color: var(--ink);
}
.footer-nl__btn {
padding: 10px 18px;
font-size: 14px;
white-space: nowrap;
}
.footer-nl__consent {
display: flex;
gap: 8px;
align-items: flex-start;
margin-top: 10px;
font-size: 12.5px;
line-height: 1.4;
color: var(--text-2);
cursor: pointer;
}
.footer-nl__consent input {
margin: 3px 0 0;
flex: 0 0 auto;
}
.footer-nl__consent a {
text-decoration: underline;
}
@media (max-width: 960px) {
.site-footer .wrap {
flex-direction: column;
gap: 32px;
}
}
/*
* PRODUKTANSICHT — „Mehr erfahren" an den Modellkacheln.
*
* Als