/*
Theme Name: Rebe Genusswelt
Author: Rebe Genusswelt
Description: Modernes, warmes WordPress-Theme für Event-Catering, Feiern und Genuss in der Steiermark.
Version: 1.0.22
Requires at least: 6.2
Requires PHP: 7.4
Text Domain: rebe-genusswelt
*/
:root{--ink:#17382f;--ink-2:#254b40;--wine:#7f2d38;--cream:#f7f2e9;--paper:#fffdf8;--sand:#dfcdb5;--gold:#c49a5a;--muted:#665f55;--line:rgba(23,56,47,.16);--serif:'Playfair Display',Georgia,serif;--sans:'Inter',Arial,sans-serif;--shell:min(1180px,calc(100vw - 48px));--radius:3px}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.7}body.menu-open{overflow:hidden}img{display:block;max-width:100%;height:auto}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}.shell{width:var(--shell);margin-inline:auto}.skip-link{position:fixed;left:16px;top:-100px;z-index:999;background:#fff;padding:12px}.skip-link:focus{top:16px}.screen-reader-text{position:absolute;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden}
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,253,248,.92);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.header-inner{min-height:104px;display:flex;align-items:center;gap:36px}.brand{width:152px;display:grid;grid-template-columns:auto 1fr;align-items:end;line-height:1}.brand-script{grid-row:1/3;font:italic 42px/.8 var(--serif);color:var(--wine);margin-right:7px}.brand-main{text-transform:uppercase;font-weight:600;letter-spacing:.11em;font-size:14px}.brand-sub{text-transform:uppercase;font-size:8px;letter-spacing:.23em;margin-top:4px}.site-nav{margin-left:auto}.menu{display:flex;align-items:center;gap:27px;list-style:none;margin:0;padding:0}.menu a{font-size:13px;font-weight:600;letter-spacing:.04em}.menu a:hover,.menu .current-menu-item>a{color:var(--wine)}.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;border:0;background:var(--wine);color:#fff;padding:16px 22px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:.25s}.button:hover{background:var(--ink);transform:translateY(-2px)}.button-small{padding:12px 16px}.nav-toggle{display:none;background:none;border:0;padding:8px}.nav-toggle span:not(.screen-reader-text){display:block;width:25px;height:2px;background:var(--ink);margin:5px}
.hero{overflow:hidden;background:linear-gradient(110deg,var(--cream) 0 64%,#e6d6c1 64%)}.hero-grid{min-height:720px;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:76px;padding-block:72px}.eyebrow{text-transform:uppercase;color:var(--wine);letter-spacing:.22em;font-weight:700;font-size:12px;margin:0 0 20px}.eyebrow.light{color:#e7c99f}.hero h1,.page-hero h1,.cta h2{font:600 clamp(54px,7vw,92px)/.98 var(--serif);letter-spacing:-.04em;margin:0}.hero h1 em,.cta h2 em,.story h2 em{font-weight:400;color:var(--wine)}.intro{max-width:620px;font-size:19px;color:var(--muted);margin:28px 0 34px}.actions{display:flex;align-items:center;gap:28px}.text-link{font-weight:700;font-size:14px;border-bottom:1px solid;padding-bottom:3px}.hero-facts{list-style:none;padding:34px 0 0;margin:45px 0 0;border-top:1px solid var(--line);display:flex;gap:36px}.hero-facts li{display:grid}.hero-facts strong{font-family:var(--serif);font-size:20px}.hero-facts span{font-size:11px;color:var(--muted)}.hero-visual{position:relative}.hero-visual:before{content:'';position:absolute;inset:-20px 25px 35px -20px;border:1px solid rgba(127,45,56,.35)}.hero-visual img{position:relative;width:100%;height:570px;object-fit:cover}.floating-note{position:absolute;right:-34px;bottom:35px;background:var(--ink);color:#fff;padding:20px 26px;display:grid}.floating-note span{font:italic 17px var(--serif);color:#e7c99f}.floating-note strong{text-transform:uppercase;font-size:11px;letter-spacing:.15em}.marquee{overflow:hidden;background:var(--ink);color:#f5eadb;padding:16px 0;white-space:nowrap;text-transform:uppercase;letter-spacing:.16em;font-size:12px}.marquee div{width:max-content;animation:drift 24s linear infinite}.marquee i{color:var(--gold);padding:0 40px}@keyframes drift{to{transform:translateX(-25%)}}
.section{padding:120px 0}.section-heading{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;margin-bottom:55px}.section-heading h2,.story h2,.location h2,.contact-aside h2{font:600 clamp(42px,5vw,68px)/1.05 var(--serif);letter-spacing:-.03em;margin:0}.section-heading>p{color:var(--muted);font-size:18px;max-width:470px}.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;align-items:start}.service-card{position:relative;background:var(--cream);padding:16px 16px 28px;transition:.3s}.service-card:hover{transform:translateY(-8px);box-shadow:0 22px 45px rgba(23,56,47,.12)}.service-card.featured{margin-top:-22px;background:var(--ink);color:#fff}.service-card>span{position:absolute;z-index:2;right:27px;top:28px;background:rgba(255,253,248,.92);color:var(--wine);width:36px;height:36px;display:grid;place-items:center;font:600 14px var(--serif)}.service-card img{width:100%;aspect-ratio:4/3;object-fit:cover}.service-card h3{font:600 29px/1.1 var(--serif);margin:25px 8px 10px}.service-card p{margin:0 8px 18px;color:var(--muted)}.service-card.featured p{color:#d9d4c9}.service-card b{margin:0 8px;font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--wine)}.featured b{color:#e7c99f}
.story{background:var(--ink);color:#fff}.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:9vw;align-items:center}.story-image{position:relative}.story-image img{width:100%;height:620px;object-fit:cover;filter:saturate(.8)}.story-image span{position:absolute;left:-35px;bottom:35px;background:var(--wine);padding:19px 24px;font:italic 21px/1.2 var(--serif)}.story-copy p{color:#d6d5ce;font-size:18px}.story-copy blockquote{margin:36px 0;padding:24px 0;border-block:1px solid rgba(255,255,255,.2);font:italic 22px/1.5 var(--serif);color:#fff}.button-light{background:#f4e8d8;color:var(--ink)}.location-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:9vw;align-items:center}.location-grid>div>p:not(.eyebrow){font-size:18px;color:var(--muted);margin:25px 0}.location-grid img{width:100%;object-fit:cover}.cta{background:var(--wine);color:#fff;text-align:center;padding:110px 0}.cta .eyebrow{color:#f0d7b5}.cta .button{margin-top:40px}.cta h2 em{color:#f0d7b5}
.page-hero{background:var(--cream);padding:110px 0 80px}.page-hero h1{max-width:900px}.page-content{padding-block:85px 120px}.prose{max-width:900px}.prose h2{font:600 40px/1.2 var(--serif);margin:60px 0 16px}.prose h2:first-child{margin-top:0}.prose h3{font:600 25px var(--serif)}.prose p{color:var(--muted);font-size:18px}.editor-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}.editor-grid>div{background:var(--cream);padding:26px}.editor-fig{margin:0 0 16px}.editor-fig img{display:block;width:100%;height:150px;object-fit:cover;border-radius:var(--radius)}.prose-fig{margin:26px 0 34px;max-width:660px}.prose-fig img{display:block;width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;border-radius:var(--radius)}.notice{background:#fff1ca;border-left:4px solid #b46f12;padding:18px 20px;margin-bottom:40px;color:#5a3a0b}.contact-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:80px}.contact-form{display:grid;gap:22px}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.contact-form label{display:grid;gap:8px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;font-weight:700}.contact-form input,.contact-form textarea{width:100%;border:1px solid var(--line);background:var(--cream);padding:15px;color:var(--ink);outline:none}.contact-form input:focus,.contact-form textarea:focus{border-color:var(--wine);box-shadow:0 0 0 3px rgba(127,45,56,.1)}.contact-form .button{justify-self:start}.form-note{font-size:12px;color:var(--muted)}.form-message{padding:15px;background:#fde3df;color:#681d1d}.form-message.success{background:#e0efe4;color:#174c2a}.honeypot{position:absolute;left:-10000px}.contact-aside{background:var(--ink);color:#fff;padding:40px;align-self:start}.contact-aside h2{font-size:40px}.contact-aside>a{display:block;color:#e7c99f;margin-top:12px}.contact-aside hr{border:0;border-top:1px solid rgba(255,255,255,.18);margin:34px 0}.not-found{padding:130px 0;min-height:65vh}.not-found h1{font:600 clamp(50px,8vw,96px)/1 var(--serif)}.not-found p{font-size:18px;color:var(--muted);margin-bottom:32px}
.site-footer{background:#112b24;color:#f5eadb;padding:75px 0 20px}.footer-grid{display:grid;grid-template-columns:1.5fr repeat(3,1fr);gap:55px}.brand-footer{margin-bottom:25px;color:#fff}.footer-grid p{color:#c5c4bb;max-width:320px}.footer-grid h2{font:600 17px var(--serif);color:#e7c99f}.footer-grid>div>a:not(.brand){display:block;margin:8px 0;color:#d8d7cf;font-size:14px}.footer-bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:55px;padding-top:18px;display:flex;justify-content:space-between;font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#aaa}.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}.reveal.is-visible{opacity:1;transform:none}
@media(max-width:980px){:root{--shell:min(100% - 32px,760px)}.header-cta{display:none}.nav-toggle{display:block;margin-left:auto}.site-nav{display:none;position:fixed;inset:104px 0 0;height:calc(100vh - 104px);height:calc(100dvh - 104px);max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);padding:40px;z-index:60}.site-nav.is-open{display:block}.menu{display:grid;gap:0}.menu a{display:block;padding:17px 0;border-bottom:1px solid var(--line);font:600 25px var(--serif)}.hero{background:var(--cream)}.hero-grid,.story-grid,.location-grid,.contact-grid{grid-template-columns:1fr}.hero-grid{padding-top:55px}.hero-visual img{height:520px}.cards{grid-template-columns:1fr}.service-card.featured{margin-top:0}.section-heading{grid-template-columns:1fr}.story-grid,.location-grid{gap:55px}.footer-grid{grid-template-columns:1fr 1fr}.field-row{grid-template-columns:1fr}}
@media(max-width:600px){:root{--shell:calc(100% - 30px)}.editor-fig img{height:170px}.prose-fig img{aspect-ratio:4/3}.header-inner{min-height:92px}.brand{width:138px}.brand-script{font-size:36px}.site-nav{inset:92px 0 0;height:calc(100vh - 92px);height:calc(100dvh - 92px);max-height:calc(100vh - 92px)}.hero-grid{min-height:auto;gap:45px;padding-block:45px 65px}.hero h1,.page-hero h1,.cta h2{font-size:48px}.hero-facts{gap:18px;display:grid;grid-template-columns:1fr 1fr}.hero-visual img{height:430px}.floating-note{right:-5px}.section{padding:80px 0}.section-heading h2,.story h2,.location h2{font-size:44px}.story-image img,.location-grid img{height:auto}.story-image span{left:-5px}.editor-grid{grid-template-columns:1fr}.footer-grid{grid-template-columns:1fr}.footer-bottom{display:grid;gap:7px}.actions{align-items:flex-start;flex-direction:column}.page-hero{padding:75px 0 55px}.page-content{padding-block:60px 85px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}.reveal{opacity:1;transform:none}}

/* ============================================================
   Original-Logo (aus Kundenmaterial freigestellt, Bild_07)
   Ersetzt den früheren Text-Schriftzug im Header und Footer.
   ============================================================ */
.brand{display:block;width:148px;line-height:0}
.brand img{display:block;width:100%;height:auto}
.brand-footer{width:150px;margin-bottom:22px}
.brand-footer img{width:100%;height:auto}
@media(max-width:980px){.brand{width:124px}.brand-footer{width:132px}}
@media(max-width:600px){.brand{width:116px}.brand-footer{width:120px}}

/* ============================================================
   Key Visual: Weinberge mit Logo (Kundenmaterial)
   Vollbreites Band zwischen Location-Sektion und CTA.
   object-position hält den zentrierten Logo-Schriftzug im Bild.
   ============================================================ */
.keyvisual{position:relative;overflow:hidden;background:var(--ink);line-height:0}
.keyvisual img{display:block;width:100%;height:clamp(260px,38vw,500px);object-fit:cover;object-position:center 45%}
.keyvisual::after{content:'';position:absolute;inset:auto 0 0 0;height:34%;
  background:linear-gradient(to bottom,rgba(17,43,36,0),rgba(17,43,36,.22));pointer-events:none}
@media(max-width:600px){.keyvisual img{height:clamp(200px,58vw,300px)}}


/* ============================================================
   1.0.5 — Optische und technische Korrekturen
   ------------------------------------------------------------
   1) Ohne JavaScript sichtbar: .reveal wird nur noch mit gesetzter
      .js-Klasse am <html> ausgeblendet (header.php ergaenzt sie inline).
   2) Mobil steht das Hero-Bild vor dem Text.
   3) <picture> nimmt am Layout des Elternelements teil (display:contents),
      damit die bestehenden img-Regeln unveraendert greifen.
   4) Laufband ohne Luecke: zwei identische Gruppen, Animation auf -50%.
   5) Schwebendes Textfeld liegt im Bild statt darueber hinauszuragen.
   6) Sichtbarer Tastatur-Fokus auf allen bedienbaren Elementen.
   7) Kleinste Labels angehoben (11px -> 12,5px).
   ============================================================ */

/* 3) <picture> aus dem Layout herausnehmen, img bleibt direktes Kind des Grids */
picture{display:contents}

/* 1) Einblenden nur, wenn JavaScript laeuft */
html:not(.js) .reveal{opacity:1;transform:none}

/* 1b) Ohne JavaScript muss das Mobilmenue statisch sichtbar sein */
@media(max-width:980px){
  html:not(.js) .nav-toggle{display:none}
  html:not(.js) .site-nav{display:block;position:static;inset:auto;padding:0;margin-left:auto}
  html:not(.js) .menu{display:flex;flex-wrap:wrap;gap:16px}
  html:not(.js) .menu a{padding:6px 0;border:0;font:600 14px/1.2 var(--sans)}
}

/* 2) Mobil zuerst das Bild, dann der Text */
@media(max-width:980px){
  .hero-visual{order:-1}
  .hero-visual:before{inset:-12px 16px 24px -12px}
  .floating-note{right:14px;bottom:20px;padding:16px 20px}
}
@media(max-width:600px){
  .hero-visual img{height:330px}
  .floating-note{right:12px;bottom:14px;padding:12px 16px}
  .floating-note span{font-size:15px}
  .floating-note strong{font-size:10px}
}

/* 4) Laufband: zwei Gruppen, halbe Strecke, dadurch keine Luecke */
.marquee{display:flex}
.marquee > .marquee-track{display:flex;width:max-content;animation:drift 34s linear infinite}
.marquee .marquee-group{display:flex;align-items:center;width:max-content;white-space:nowrap;animation:none}
.marquee .marquee-group i{padding:0 34px}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(-25%)}}
@media(prefers-reduced-motion:reduce){
  .marquee > .marquee-track{animation:none}
  .marquee{overflow-x:auto}
}

/* 5) Schwebendes Textfeld innerhalb des Bildes */
.floating-note{right:18px}

/* 6) Sichtbarer Tastatur-Fokus (nur bei Tastaturbedienung) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible{outline:3px solid var(--wine);outline-offset:3px}
.story a:focus-visible,
.story button:focus-visible,
.cta a:focus-visible,
.cta button:focus-visible,
.site-footer a:focus-visible,
.contact-aside a:focus-visible,
.site-footer input:focus-visible{outline-color:#f2e6d0}
.nav-toggle:focus-visible{outline:3px solid var(--wine);outline-offset:2px}

/* 7) Kleinste Beschriftungen lesbarer */
.hero-facts span{font-size:12.5px;line-height:1.45}
.footer-bottom{font-size:12px}
.service-card b{font-size:12.5px}
.marquee{font-size:12.5px}

/* Sekundaerlink deutlicher als Aktion erkennbar */
.text-link{border-bottom-width:2px;transition:color .2s,border-color .2s}
.text-link:hover,.text-link:focus-visible{color:var(--wine);border-color:var(--wine)}


/* ============================================================
   1.0.7 — Startseite pflegbar + neue Fotos
   ------------------------------------------------------------
   1) .keyvisual zeigt ein reines Landschaftsbild (Weinberg).
      Das vorherige Bild hatte ein Rebe-Logo eingebrannt; das ist
      entfallen. Bild per Customizer austauschbar.
   2) .home-frei: optionaler Block-Bereich unter dem Abschluss.
   3) .foto-nachweis: kleine Lizenzzeile im Footer (CC BY verlangt
      Namensnennung der Fotografen).
   ============================================================ */

/* 1) Band am Seitenende: Bild ohne Logo, Bildmitte etwas tiefer
      (mehr Reben, weniger Himmel) */
.keyvisual{background:var(--ink)}
.keyvisual img,
.keyvisual picture img{
  display:block;width:100%;
  height:clamp(240px,34vw,460px);
  object-fit:cover;
  object-position:center 58%;
}
.keyvisual::after{
  content:'';position:absolute;inset:auto 0 0 0;height:30%;
  background:linear-gradient(to bottom,rgba(17,43,36,0),rgba(17,43,36,.20));
  pointer-events:none;
}
@media(max-width:600px){
  .keyvisual img,.keyvisual picture img{height:clamp(180px,52vw,280px)}
}

/* 2) Optionaler freier Bereich (Seiteninhalt der Startseite) */
.home-frei{background:var(--paper)}
.home-frei .prose{max-width:900px}

/* 3) Lizenzhinweis für die verwendeten Fotos */
.foto-nachweis{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:14px;margin-top:10px;
  font-size:10.5px;line-height:1.6;
  color:#8d8d84;letter-spacing:.02em;
}
.foto-nachweis a{color:#a9a89f;text-decoration:underline}
.foto-nachweis a:hover{color:#e7c99f}
.contact-sketch{margin:26px 0 0;padding:0}.contact-sketch img{display:block;width:100%;height:auto;max-width:180px;opacity:.72}
.route-section{padding-top:0}.route-head{display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:end;margin-bottom:42px}.route-head h2{font:600 clamp(38px,4.4vw,58px)/1.05 var(--serif);letter-spacing:-.03em;margin:0}.route-head>p{color:var(--muted);font-size:17px;max-width:440px;margin:0}.route-map{margin:0;padding:0;text-align:center}.route-map img{display:block;width:100%;height:auto;max-width:780px;margin:0 auto;color:var(--ink);opacity:.88}@media(max-width:980px){.route-head{grid-template-columns:1fr;gap:22px}.route-head h2 br{display:none}}

/* Location-Bild: kleiner, nach rechts und oben versetzt.
   88 % Breite + margin-left:auto schiebt es an den rechten Rand,
   translateY hebt es an. aspect-ratio erhaelt den Bildausschnitt. */
.location-grid picture{display:block;width:88%;margin-left:auto;transform:translateY(-30px)}
.location-grid img{aspect-ratio:63/51}
@media(max-width:980px){.location-grid picture{width:100%;margin-left:0;transform:none}}

/* ============================================================
   Hero-Bildfolge — reiner Bildwechsel, KEINE Bewegung im Bild
   Vier Motive, Standzeit 20 s je Motiv (Zyklus 80 s),
   1,5 s weiche Überblendung. Rein CSS, kein JavaScript.

   Bewusst OHNE Ken-Burns-Zoom: die Fotos sind Standbilder und
   sollen auch so wirken. Ein Zoom im Bild wurde als „zittert,
   schaut nicht gut aus" wahrgenommen. Ohne transform gibt es
   nichts, was flimmern kann — und keinen Subpixel-Versatz.

   Die animation-delay ist -(20 s * (n-1)) - 0.75 s: dadurch steht
   beim Laden sofort Motiv 1 fertig da, statt aus dem Nichts
   einzublenden. Ohne Verzögerung wäre der Hero beim ersten
   Aufbau für 0,75 s leer.
   ============================================================ */
.hero-slides{position:relative;height:570px;overflow:hidden;background:var(--cream)}
.hero-slide{position:absolute;inset:0;margin:0;opacity:0;
  animation:heroFade 80s linear infinite}
.hero-slide picture{display:block;height:100%}
.hero-slide:nth-child(1){animation-delay:-.75s}
.hero-slide:nth-child(2){animation-delay:-60.75s}
.hero-slide:nth-child(3){animation-delay:-40.75s}
.hero-slide:nth-child(4){animation-delay:-20.75s}

/* Kein transform, kein will-change: das Bild steht still. */
.hero-visual .hero-slide img{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;transform:none}

/* 0–25 % sichtbar (20 s von 80 s), 1,5 s Überblendung an beiden
   Kanten (1,5 s / 80 s = 1,875 %) */
@keyframes heroFade{
  0%{opacity:0} 1.875%{opacity:1} 23.125%{opacity:1} 25%{opacity:0} 100%{opacity:0}}

@media(max-width:980px){.hero-slides{height:520px}}
@media(max-width:600px){.hero-slides{height:330px}}

/* Wer Bewegung reduziert haben will, bekommt ein ruhiges Standbild.
   Muss NACH der allgemeinen Reduce-Regel stehen, sonst bleibt der
   Hero unsichtbar (animation:none!important friert opacity:0 ein). */
@media(prefers-reduced-motion:reduce){
  .hero-slide{animation:none;opacity:0}
  .hero-slide:first-child{opacity:1}
}