/*
Theme Name:   Picha Elektrotechnik
Theme URI:    https://picha-elektrotechnik.at
Description:  Eigenständiges Theme für Picha Elektrotechnik. Farbwelt, Blitz und Heissfolien-Effekt sind von der Visitenkarte abgeleitet. Kein Eltern-Theme, kein Seitenbaukasten-Plugin: Inhalte werden mit den normalen WordPress-Blöcken gepflegt.
Author:       für Kevin Picha
Version:      3.6.0
Requires at least: 6.4
Tested up to: 7.1
Requires PHP: 8.0
Text Domain:  picha
License:      GNU General Public License v2 or later
License URI:  https://www.gnu.org/licenses/gpl-2.0.html
Tags:         one-column, custom-menu, block-styles, accessibility-ready
*/

/* ==========================================================================
   1  Tokens
   2  Grundlagen
   3  Foil & Marke
   4  Kopfzeile, Menü, Anruf
   5  Abschnitte
   6  Hero
   7  Leistungen
   8  Projekte
   9  Betrieb
   10 Notdienst
   11 Kontakt
   12 Fusszeile
   13 Textseiten (Impressum, Datenschutz, Barrierefreiheit)
   14 Hinweis zu Cookies
   15 Anrufleiste (Handy)
   ========================================================================== */


/* == 1  TOKENS ============================================================ */

:root{
  --ink:      #17171A;
  --ink-2:    #1E1E22;
  --ink-3:    #26262B;
  --line:     #32323A;

  --foil:     #C79A3C;
  --foil-hi:  #F6E4A8;

  --paper:    #EDEAE3;
  --dim:      #A5A29A;
  --fade:     #8A8781;

  /* Waechst mit. Deckel bei 1600, sonst werden Textzeilen zu lang. */
  --shell:    min(1600px, 92vw);
  --gut:      clamp(20px, 5vw, 48px);
  --head:     72px;

  --display:  "Anton", "Haettenschweiler", "Arial Narrow", sans-serif;
  --util:     "Oswald", "Arial Narrow", sans-serif;
  --body:     "Barlow", "Helvetica Neue", Arial, sans-serif;

  /* Der Blitz als Bild, Goldverlauf eingebacken. Kein SVG im Markup -
     WordPress filtert das aus Seiteninhalten heraus. */
  /* Sein Blitz, aus dem Foto der Visitenkarte freigestellt. Als Maske,
     damit er das Gold der Seite bekommt statt des Kartenschwarz. */
  --blitz:url("assets/blitz.png");
  --logo:url("assets/logo.png");   /* PE-Monogramm, sein Logo */

  color-scheme: dark;
}

*,*::before,*::after{ box-sizing:border-box; }


/* == 2  GRUNDLAGEN ======================================================== */

html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--head) + 20px); }

body{
  margin:0;
  background:var(--ink);
  color:var(--paper);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Feine Körnung - die Visitenkarte ist mattkaschiert, nicht glatt */
body::after{
  content:"";
  position:fixed; inset:0;
  pointer-events:none; z-index:9998; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

img{ max-width:100%; height:auto; }

a{ color:var(--foil); }

:focus-visible{ outline:2px solid var(--foil-hi); outline-offset:3px; }

.screen-reader-text{
  position:absolute; width:1px; height:1px;
  margin:-1px; padding:0; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip-link:focus{
  position:fixed; top:12px; left:12px; z-index:10000;
  width:auto; height:auto; clip-path:none; margin:0;
  padding:12px 18px; background:var(--foil); color:var(--ink);
  font-family:var(--util); letter-spacing:.12em; text-transform:uppercase;
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Kein eigenes Polster, damit Kopf, Fuss und Abschnitte auf einer Kante
   liegen: das Polster gibt der umgebende Bereich. */
.shell{ width:100%; max-width:var(--shell); margin-inline:auto; }


/* == 3  FOIL & MARKE ======================================================
   Foil nur auf Wortmarke und Aufmacher, wie die Praegung auf der Karte. */

.foil{
  background-image:linear-gradient(100deg,
    #A97C2A 0%,  #D8B155 12%, #F3E2AF 26%, #FFF8E2 36%,
    #E0BC63 47%, #B98D33 60%, #E6CE8A 74%, #FBF0CD 86%, #C79A3C 100%);
  background-size:260% 100%;
  background-position:calc(50% + var(--tilt, 0%)) 0;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
}
@media (prefers-reduced-motion: reduce){ .foil{ background-position:38% 0; } }

.bolt{
  display:inline-block;
  height:1em; aspect-ratio:767/1078; flex:none;
  background:linear-gradient(150deg,#A97C2A,#F7E9BE 34%,#C79A3C 62%,#996F22);
  -webkit-mask:var(--blitz) no-repeat center/contain;
  mask:var(--blitz) no-repeat center/contain;
  vertical-align:middle;
}

/* Trenner mit Blitz in der Mitte - wie auf der Karte, wo er zwischen
   Name und Kontaktdaten sitzt. */
.divider{
  display:flex !important; align-items:center; gap:22px;
  max-width:calc(var(--shell) + 2 * var(--gut));
  margin-inline:auto !important;
  padding-inline:var(--gut);
}
.divider::before,.divider::after{ content:""; height:1px; flex:1; }
.divider::before{ background:linear-gradient(90deg,transparent,rgba(199,154,60,.55)); }
.divider::after { background:linear-gradient(90deg,rgba(199,154,60,.55),transparent); }
.divider .bolt{ height:30px; opacity:.9; }

/* Schaltflächen */
.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--util); font-weight:400;
  font-size:14px; letter-spacing:.15em; text-transform:uppercase;
  text-decoration:none; padding:15px 26px; border:0; border-radius:0;
  cursor:pointer;
  transition:filter .25s, background-color .25s, color .25s, border-color .25s;
}
.btn-foil{ color:var(--ink); background:linear-gradient(100deg,#B98D33,#EBD289 46%,#B98D33); }
.btn-foil:hover,.btn-foil:focus-visible{ filter:brightness(1.12); }
/* Auf goldenem Grund traegt das goldene Monogramm nicht. Knoepfe
   bleiben deshalb reiner Text. */
.btn-foil .bolt{ display:none; }
.btn-ghost{ color:var(--paper); border:1px solid var(--line); background:transparent; }
.btn-ghost:hover,.btn-ghost:focus-visible{ border-color:var(--foil); color:var(--foil); }

/* Dasselbe für Button-Blöcke aus dem Editor */
.wp-block-button.is-gold .wp-block-button__link{
  color:var(--ink) !important;
  background:linear-gradient(100deg,#B98D33,#EBD289 46%,#B98D33) !important;
  border-radius:0 !important; padding:15px 26px;
  font-family:var(--util); font-size:14px; letter-spacing:.15em; text-transform:uppercase;
}
.wp-block-button.is-style-outline .wp-block-button__link{
  color:var(--paper) !important; background:transparent !important;
  border:1px solid var(--line) !important; border-radius:0 !important;
  padding:15px 26px;
  font-family:var(--util); font-size:14px; letter-spacing:.15em; text-transform:uppercase;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover{
  border-color:var(--foil) !important; color:var(--foil) !important;
}


/* == 4  KOPFZEILE ========================================================= */

.site-head{
  position:fixed; inset:0 0 auto; z-index:100;
  padding-inline:var(--gut);
  background:rgba(23,23,26,.86);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(199,154,60,.18);
}
.site-head .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; height:var(--head);
}

.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; line-height:1; }
.brand .bolt{
  height:46px; aspect-ratio:602/917;
  -webkit-mask-image:var(--logo);
  mask-image:var(--logo);
}
.brand-name{
  font-family:var(--display); font-weight:400;
  font-size:clamp(17px,2.4vw,22px);
  letter-spacing:.045em; text-transform:uppercase;
  white-space:nowrap;
}
@media (max-width:420px){
  .brand-name{ font-size:15px; letter-spacing:.03em; }
  .brand .bolt{ height:34px; }
}

.site-nav{ display:flex; align-items:center; gap:clamp(16px,2.2vw,30px); }
.site-nav ul{ display:flex; gap:clamp(16px,2.2vw,30px); list-style:none; margin:0; padding:0; }
/* Nur Menülinks. NICHT .site-nav a: das trifft auch den Anrufknopf. */
.site-nav ul a{
  font-family:var(--util); font-weight:300;
  font-size:13px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--paper); text-decoration:none;
  padding-block:8px; border-bottom:1px solid transparent;
  transition:color .25s, border-color .25s;
}
.site-nav ul a:hover,.site-nav ul a:focus-visible{ color:var(--foil); border-bottom-color:rgba(199,154,60,.6); }

/* Anrufen im Kopf: zweizeilig, damit die Erreichbarkeit mitspricht.
   Das ist bei einem 24-Stunden-Notdienst die wichtigste Schaltfläche
   der ganzen Seite - deshalb ausgefüllt und nicht nur umrandet. */
.head-call{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; white-space:nowrap;
  padding:9px 18px 10px;
  background:linear-gradient(100deg,#B98D33,#EBD289 46%,#B98D33);
  color:var(--ink);
  transition:filter .25s;
}
.head-call:hover,.head-call:focus-visible{ filter:brightness(1.12); }
.head-call .bolt{ display:none; }
/* Beschriftung und Nummer mittig zueinander, sonst sitzt die kurze
   Zeile darueber sichtbar zu weit links. */
.head-call span{ display:block; text-align:center; }
.head-call .cl{
  font-family:var(--util); font-weight:500;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:#3B2E10;                 /* dunkles Braun statt blasses Schwarz */
  margin-bottom:2px;
}
.head-call .cn{
  font-family:var(--util); font-weight:500;
  font-size:16px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}

/* Menü am Handy */
.nav-toggle{
  display:none;
  width:44px; height:44px; padding:0;
  background:transparent; border:1px solid var(--line); color:var(--paper);
  cursor:pointer;
}
.nav-toggle span{
  display:block; width:18px; height:1px; margin:4px auto;
  background:currentColor; transition:transform .3s, opacity .3s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-5px) rotate(-45deg); }

@media (max-width:920px){
  .nav-toggle{ display:block; }
  .site-nav ul{
    position:fixed; inset:var(--head) 0 auto;
    flex-direction:column; gap:0;
    background:rgba(23,23,26,.98);
    border-bottom:1px solid var(--line);
    padding:8px 0 16px;
    transform:translateY(-8px); opacity:0; visibility:hidden;
    transition:opacity .25s, transform .25s, visibility .25s;
  }
  .site-nav ul.is-open{ transform:none; opacity:1; visibility:visible; }
  .site-nav li{ border-top:1px solid var(--line); }
  .site-nav ul a{ display:block; padding:16px var(--gut); border:0; font-size:15px; }
  .head-call .cl{ display:none; }
  .head-call{ padding:10px 14px; }
}
/* Sobald unten die Anrufleiste steht, ist der Knopf im Kopf doppelt -
   und er lief auf schmalen Geräten rechts aus dem Bild. Weg damit;
   das Menü rückt dadurch an den rechten Rand. */
@media (max-width:760px){
  .head-call{ display:none; }
  .site-nav{ margin-left:auto; }
  .nav-toggle{ margin-left:0; }
}


/* == 5  ABSCHNITTE ======================================================== */

.sec{ padding-block:clamp(72px,10vw,124px); padding-inline:var(--gut); }
.sec.sec{ padding-inline:var(--gut); }
.sec-tint{ background:var(--ink-2); }

/* Beim Klick auf "Projekte" sollen Ueberschrift UND Bild zusammen
   sichtbar sein. Deshalb hier oben weniger Abstand als sonst. */
.projects.projects{ padding-block:clamp(52px,5.5vw,80px) clamp(64px,8vw,104px); }
.sec > .wp-block-group__inner-container{ max-width:var(--shell); margin-inline:auto; }

.eyebrow{
  font-family:var(--util); font-weight:400;
  font-size:12px; letter-spacing:.34em; text-transform:uppercase;
  color:var(--foil) !important;
  margin:0 0 14px !important;
}
.title{
  position:relative;
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,5.4vw,60px); line-height:.98;
  letter-spacing:.005em; text-transform:uppercase;
  text-wrap:balance;
  color:var(--paper);
  margin:0 !important;
}
.lede{
  max-width:60ch; color:var(--dim) !important;
  font-size:clamp(16px,1.6vw,18px);
  margin:18px 0 0 !important;
}

/* WordPress zentriert jedes Kind eines Abschnitts mit margin:auto
   (!important). Alles mit begrenzter Breite rutscht dadurch in die
   Mitte. Zwei Klassen schlagen die eine von WordPress. */
.hero h1,
.hero .hero-claim,
.sec .lede,
.sec .title{
  /* Nicht margin-left:0: sonst stehen sie am Abschnittsrand statt an
     der Spaltenkante. */
  margin-left:max(0px, (100% - var(--shell)) / 2) !important;
  margin-right:auto !important;
}


/* == 6  HERO ============================================================== */

.hero{
  position:relative;
  padding-top:calc(var(--head) + clamp(48px,8vh,86px));
  padding-bottom:clamp(56px,8vw,92px);
  padding-inline:var(--gut);
  overflow:hidden;
}
.hero::before{
  content:""; position:absolute; z-index:0; pointer-events:none;
  inset:-30% -10% auto -10%; height:150%;
  background:
    radial-gradient(58% 46% at 20% 28%, rgba(199,154,60,.16), transparent 70%),
    radial-gradient(40% 40% at 88% 6%,  rgba(246,228,168,.07), transparent 70%);
}
/* Alles im Hero über die beiden Hintergrundebenen heben. */
.hero > *{ position:relative; z-index:1; }

.hero-kicker{
  display:flex; align-items:center; gap:13px;
  font-family:var(--util); font-weight:300;
  font-size:12px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--dim); margin:0;
}
.hero-kicker::before{
  content:""; width:7px; height:7px; flex:none; border-radius:50%;
  background:var(--foil-hi);
  box-shadow:0 0 0 0 rgba(246,228,168,.55);
  animation:pulse 2.6s ease-out infinite;
}
@keyframes pulse{
  70%{ box-shadow:0 0 0 10px rgba(246,228,168,0); }
  100%{ box-shadow:0 0 0 0 rgba(246,228,168,0); }
}

.hero h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(46px,10.5vw,132px);
  line-height:.88; letter-spacing:.005em; text-transform:uppercase;
  margin:22px 0 0; max-width:14ch;
}
.hero-sub{
  font-family:var(--util); font-weight:300;
  font-size:clamp(14px,2.1vw,21px);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--paper);
  margin:clamp(14px,2vw,22px) 0 0;
}
.hero-claim{
  max-width:52ch; color:var(--dim);
  font-size:clamp(16px,1.7vw,18px);
  margin:clamp(20px,3vw,28px) 0 0;
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }

.hero-split{
  margin-top:0 !important;
  gap:clamp(30px,4vw,64px) !important;
  /* Das Foto nimmt genau die Hoehe der Textspalte an, statt sie ueber
     ein festes Seitenverhaeltnis zu ueberragen. */
  align-items:stretch !important;
}
/* WordPress setzt align-self am Block selbst, das schlaegt align-items
   der Zeile. Deshalb hier ausdruecklich strecken. */
.hero-split > .wp-block-column{ align-self:stretch !important; }
.hero-foto{
  display:flex; flex-direction:column;
  /* Breite gedeckelt, sonst wird das Foto auf breiten Schirmen fast
     quadratisch. Es steht an der rechten Kante des Inhaltsbereichs. */
  align-items:flex-end;
}
.hero-foto img,
.hero-foto:not(:has(img))::before{ width:min(100%, 530px); }

/* Hochkant. Es ist ein Foto von einer Person, kein Landschaftsbild.
   Die Hoehe kommt aus der Spalte, das Bild wird darin beschnitten. */
.hero-foto img{
  display:block; flex:1 1 auto;
  width:100%; height:100%; min-height:0;
  object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
/* Solange kein Foto drin ist, steht hier ein sichtbarer Platz statt
   einer leeren Flaeche. Die Regel haengt an der SPALTE, nicht am Bild:
   einen Bild-Block ohne Bild gibt WordPress gar nicht aus. */
.hero-foto:not(:has(img))::before{
  content:"Foto von Kevin";
  display:grid; place-items:center;
  flex:1 1 auto; min-height:320px;
  border:2px dashed rgba(199,154,60,.35);
  background:repeating-linear-gradient(135deg,
    rgba(199,154,60,.04) 0 2px, transparent 2px 11px);
  font-family:var(--util); font-weight:300;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fade);
}
/* Am Handy steht das Foto unter dem Text und wird flacher, sonst
   fuellt ein hochkantes Bild den halben Bildschirm. */
@media (max-width:781px){
  .hero-split{ gap:28px !important; }
  /* Gestapelt gibt es keine Nachbarspalte, deren Hoehe man uebernehmen
     koennte. Also wieder ein festes Verhaeltnis, flacher als hochkant. */
  .hero-foto img,
  .hero-foto:not(:has(img))::before{
    flex:none; height:auto; aspect-ratio:4/3; min-height:0;
  }
  .hero-foto:not(:has(img))::before{ font-size:11px; }
}

/* Drei Aussagen über den Betrieb - keine technischen Kennwerte.
   Was hier steht, muss Kevin bestätigen können. */
.facts{
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
  margin-top:clamp(30px,3.5vw,44px) !important;
}
@media (max-width:640px){ .facts{ grid-template-columns:1fr; } }
.facts > .wp-block-column{ background:var(--ink); padding:18px 20px; margin:0 !important; }
.facts .fact-k{
  font-family:var(--util); font-weight:300;
  font-size:10.5px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fade) !important; margin:0 0 5px !important;
}
.facts .fact-v{
  margin:0 !important; color:var(--paper) !important;
  font-family:var(--util); font-weight:400;
  font-size:clamp(17px,2vw,21px); letter-spacing:.02em;
}


/* == 7  LEISTUNGEN als Verteiler ========================================= */

.board{ margin-top:clamp(40px,5vw,64px); }

.board .wp-block-columns{
  position:relative;
  gap:clamp(18px,2.4vw,34px) !important;
  margin:0 0 clamp(34px,4.5vw,58px) !important;
  padding-top:38px;
  flex-wrap:wrap !important;
}
.board .wp-block-columns:last-child{ margin-bottom:0 !important; }

/* Sammelschiene */
.board .wp-block-columns::before{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:linear-gradient(90deg,
    var(--foil) 0%, var(--foil-hi) 12%, var(--foil) 34%, rgba(199,154,60,.28) 100%);
}

.board .wp-block-column{
  position:relative;
  margin:0 !important;
  padding:0;
}
/* Abgang von der Schiene zum Stromkreis */
.board .wp-block-column::before{
  content:""; position:absolute; left:0; top:-38px;
  width:1px; height:38px;
  background:linear-gradient(180deg, rgba(199,154,60,.75), rgba(199,154,60,.2));
}
/* Klemmpunkt auf der Schiene */
.board .wp-block-column::after{
  content:""; position:absolute; left:-3px; top:-41px;
  width:7px; height:7px; border-radius:50%;
  background:var(--foil);
  box-shadow:0 0 0 3px rgba(23,23,26,1);
}

/* Die Kreisnummer, wie sie am Automaten steht */
.fuse{
  display:inline-block;
  font-family:var(--util); font-weight:400;
  font-size:11px; letter-spacing:.2em;
  color:var(--foil);
  border:1px solid rgba(199,154,60,.45);
  padding:3px 9px 2px;
  margin-bottom:16px;
  font-variant-numeric:tabular-nums;
}

.board h3{
  font-family:var(--util); font-weight:400;
  font-size:clamp(17px,1.9vw,21px); letter-spacing:.05em; text-transform:uppercase;
  color:var(--paper);
  margin:0 0 10px;
}
.board p{
  color:var(--dim) !important;
  font-size:15.5px; line-height:1.62;
  margin:0; max-width:42ch;
}

/* Am Handy stehen die Stromkreise untereinander. Dann muss auch die
   Sammelschiene senkrecht laufen, sonst zeigen die Abgaenge ins Leere. */
@media (max-width:781px){
  .board{ margin-top:clamp(30px,6vw,44px); }
  .board .wp-block-columns{
    padding-top:0; padding-left:28px;
    gap:clamp(26px,6vw,34px) !important;
    margin-bottom:clamp(26px,6vw,34px) !important;
  }
  .board .wp-block-columns::before{
    left:0; right:auto; top:8px; bottom:8px;
    width:2px; height:auto;
    background:linear-gradient(180deg,
      var(--foil) 0%, var(--foil-hi) 10%, var(--foil) 34%, rgba(199,154,60,.28) 100%);
  }
  .board .wp-block-column{ flex-basis:100% !important; padding:0; }
  .board .wp-block-column::before{
    left:-28px; top:13px; width:28px; height:1px;
    background:linear-gradient(90deg, rgba(199,154,60,.75), rgba(199,154,60,.2));
  }
  .board .wp-block-column::after{ left:-31px; top:10px; }
  .board p{ max-width:none; }
}


/* == 8  PROJEKTE ========================================================== */

.stage{
  position:relative;
  /* Hoehe direkt, nicht aspect-ratio + max-height: sonst rechnet der
     Browser die Breite aus der Hoehe zurueck. */
  /* Hoehe so, dass eine 16:9-Kachel bequem hineinpasst und links wie
     rechts noch etwas vom Nachbarn zu sehen ist. */
  height:min(46vw, 58vh, 620px);
  min-height:200px;
  margin-top:clamp(30px,4vw,44px);
  background:var(--ink);
  overflow:hidden;
  border-block:1px solid rgba(199,154,60,.2);
  touch-action:pan-y;
}
@media (max-width:700px){
  /* Am Handy fuellt die Kachel fast die Breite, der Nachbar lugt hervor. */
  .stage{ height:calc(88vw * 9 / 16); min-height:0; }
}

/* Bis an beide Bildschirmraender. max-width:none hebt WordPress' Deckel
   auf, danach fehlt nur noch das Seitenpolster des Abschnitts.
   !important, weil WordPress margin:auto ebenfalls so setzt. */
.projects .stage{
  max-width:none !important;
  width:auto !important;
  margin-inline:calc(-1 * var(--gut)) !important;
}

/* Laufender Streifen statt Einzelbild: das aktive Foto steht in der
   Mitte, links und rechts sind die Nachbarn angeschnitten. Dadurch
   wirkt es durchgezogen, und es entstehen keine Balken. */
.track{
  display:flex; align-items:stretch;
  gap:clamp(10px,1.4vw,18px);
  height:100%;
  transition:transform .65s cubic-bezier(.22,.68,.24,1);
  will-change:transform;
}
.shot{
  position:relative; flex:0 0 auto;
  height:100%; aspect-ratio:16/9;   /* Querformat vom Handy passt genau */
  overflow:hidden;
  /* Nachbarn unscharf und zurueckgenommen, damit klar ist, was gerade
     dran ist, und der Streifen trotzdem durchlaeuft. */
  opacity:.6; filter:blur(3px) saturate(.75) brightness(.8);
  transition:opacity .55s ease, filter .55s ease;
}
.shot.is-on{ opacity:1; filter:none; }
.shot img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover;
  margin:0; max-width:none; border-radius:0;
}

/* Goldener Lichtstreifen beim Wechsel */
.sweep{ position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; }
.sweep.run{ animation:sweep .85s cubic-bezier(.4,0,.2,1); }
@keyframes sweep{
  0%  { opacity:0; transform:translateX(-105%) skewX(-14deg); }
  22% { opacity:1; }
  100%{ opacity:0; transform:translateX(105%) skewX(-14deg); }
}
.sweep::before{
  content:""; position:absolute; top:-10%; bottom:-10%; left:0; width:42%;
  background:linear-gradient(100deg,
    transparent, rgba(199,154,60,.14) 32%, rgba(246,228,168,.36) 50%,
    rgba(199,154,60,.14) 68%, transparent);
}

/* Klickflächen */
.zone{
  position:absolute; top:0; bottom:0; z-index:5;
  width:50%; border:0; padding:0; background:transparent;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.zone-prev{ left:0; } .zone-next{ right:0; }
.zone::after{
  content:""; position:absolute; top:50%; width:38px; height:38px; margin-top:-19px;
  background:rgba(23,23,26,.5) no-repeat center/15px 15px;
  border:1px solid rgba(199,154,60,.35);
}
.zone-prev::after{ left:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEAE3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4 7 12l8 8'/%3E%3C/svg%3E"); }
.zone-next::after{ right:14px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EDEAE3' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4l8 8-8 8'/%3E%3C/svg%3E"); }
@media (hover:hover) and (pointer:fine){
  .zone{ cursor:none; }
  .zone::after{ display:none; }
}

/* Der Zeiger wird über der Bühne zum Pfeil. Bewusst zurückhaltend:
   heller Rand statt kräftigem Gold, sonst überstrahlt er das Foto. */
.cursor{
  position:absolute; z-index:6; top:0; left:0;
  width:64px; height:64px; margin:-32px 0 0 -32px;
  border:1px solid rgba(237,234,227,.45);
  border-radius:50%;
  background:rgba(23,23,26,.28);
  backdrop-filter:blur(4px);
  display:grid; place-items:center;
  pointer-events:none; opacity:0;
  transition:opacity .25s;
}
.stage.has-cursor .cursor{ opacity:1; }
.cursor svg{
  width:18px; height:18px;
  stroke:rgba(237,234,227,.85); fill:none; stroke-width:1.5;
  transition:transform .2s;
}
.cursor.at-prev svg{ transform:scaleX(-1); }

/* Fusszeile: nur der Titel, keine zweite Zeile mehr */
.stage-foot{
  /* Muss über den Klickflächen (5) liegen, sonst ist die Pausetaste
     nicht erreichbar. pointer-events:none lässt Klicks durch. */
  position:absolute; z-index:9; left:0; right:0; bottom:0;
  padding:clamp(18px,3vw,30px) clamp(20px,4vw,40px) clamp(24px,3.4vw,36px);
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:24px; pointer-events:none;
}
.cap{
  font-family:var(--util); font-weight:400;
  font-size:clamp(17px,2.4vw,25px); letter-spacing:.05em; text-transform:uppercase;
  margin:0; color:var(--paper); max-width:40ch;
  text-shadow:0 2px 18px rgba(0,0,0,.8);
}
.cap.turn{ animation:capin .55s cubic-bezier(.16,.72,.24,1); }
@keyframes capin{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }

.count{
  font-family:var(--util); font-weight:300;
  font-size:13px; letter-spacing:.18em; font-variant-numeric:tabular-nums;
  color:var(--dim); white-space:nowrap; margin:0;
  text-shadow:0 2px 14px rgba(0,0,0,.85);
}
.count b{ font-weight:400; color:var(--foil-hi); }

/* Fortschritt. Der aktive Strich läuft in 5 s durch - so sieht man,
   dass gleich gewechselt wird, statt überrascht zu werden. */
.ticks{
  position:absolute; z-index:4; left:0; right:0; bottom:0;
  display:flex; gap:3px; padding:0 2px 2px;
}
.ticks i{ position:relative; flex:1; height:2px; background:rgba(237,234,227,.16); overflow:hidden; }
.ticks i::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg,var(--foil),var(--foil-hi));
  transform:scaleX(0); transform-origin:left;
}
.ticks i.is-on::after{ transform:scaleX(1); transition:transform .35s ease; }
.stage.is-playing .ticks i.is-on::after{
  animation:tickrun var(--dwell,5s) linear forwards;
}
@keyframes tickrun{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
@media (prefers-reduced-motion: reduce){
  .stage.is-playing .ticks i.is-on::after{ animation:none; transform:scaleX(1); }
}

/* Zaehler und Pausetaste (WCAG 2.2.2: bewegte Inhalte anhaltbar). */
.stage-meta{
  position:relative; z-index:7;
  display:flex; align-items:center; gap:14px;
  pointer-events:auto;
}
.playpause{
  width:34px; height:34px; padding:0; border-radius:50%;
  border:1px solid rgba(237,234,227,.3);
  background:rgba(23,23,26,.45);
  color:rgba(237,234,227,.85);
  display:grid; place-items:center; cursor:pointer;
  transition:border-color .25s, color .25s;
}
.playpause:hover{ border-color:var(--foil); color:var(--foil-hi); }
.playpause svg{ width:13px; height:13px; fill:currentColor; }
.playpause .pl{ display:none; }
.stage.is-paused .playpause .p1,
.stage.is-paused .playpause .p2{ display:none; }
.stage.is-paused .playpause .pl{ display:block; }

.stage-hint{
  margin:14px 0 0 !important;
  font-family:var(--util); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fade) !important;
}

/* Ohne JavaScript bleibt die Galerie stehen; nach dem Umbau weg. */
.gallery-source[hidden]{ display:none !important; }


/* == 9  BETRIEB =========================================================== */

.portrait img{
  display:block; width:100%; height:auto;
  aspect-ratio:4/5; object-fit:cover;
  border:1px solid var(--line);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.9);
}
/* Wie im Aufmacher: solange kein Bild drin ist, ein sichtbarer Platz. */
.portrait:not(:has(img))::before{
  content:"Foto vom Betrieb";
  display:grid; place-items:center;
  aspect-ratio:4/5; max-height:520px;
  border:2px dashed rgba(199,154,60,.35);
  background:repeating-linear-gradient(135deg,
    rgba(199,154,60,.04) 0 2px, transparent 2px 11px);
  font-family:var(--util); font-weight:300;
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--fade);
}

/* Hinweis, wo noch Inhalt fehlt. Verschwindet, sobald Kevin ihn löscht. */
.noch-leer{
  margin-top:clamp(30px,4vw,44px) !important;
  padding:clamp(28px,5vw,54px);
  border:2px dashed rgba(199,154,60,.35);
  background:repeating-linear-gradient(135deg,
    rgba(199,154,60,.04) 0 2px, transparent 2px 11px);
  text-align:center;
  font-family:var(--util); font-weight:300;
  font-size:13px; letter-spacing:.14em;
  color:var(--fade) !important;
}

/* Platzhaltertext deutlich als solcher kennzeichnen */
.placeholder{
  border-left:2px solid rgba(199,154,60,.5);
  padding-left:18px;
  color:var(--fade) !important;
  font-style:italic;
}


/* == 10  NOTDIENST ======================================================== */

.emergency{
  border-block:1px solid rgba(199,154,60,.28);
  background:
    radial-gradient(70% 160% at 12% 50%, rgba(199,154,60,.13), transparent 72%),
    var(--ink);
  padding-block:clamp(46px,6vw,68px) !important;
}
.emergency-row{
  display:flex; align-items:center; justify-content:space-between;
  gap:28px; flex-wrap:wrap;
}
.emergency h2{
  font-family:var(--display); font-weight:400;
  font-size:clamp(30px,4.6vw,50px); line-height:1; text-transform:uppercase;
  margin:0;
}
.emergency p{ margin:8px 0 0; max-width:44ch; color:var(--dim) !important; }
.emergency-head{ display:flex !important; align-items:center; gap:22px; }
.emergency-head .bolt{ height:clamp(48px,6vw,70px); }


/* == 11  KONTAKT ========================================================== */

.contact-grid{
  display:grid; gap:clamp(36px,5vw,72px);
  grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);
  margin-top:clamp(34px,4vw,48px);
}
@media (max-width:900px){ .contact-grid{ grid-template-columns:1fr; } }

.data{ list-style:none !important; margin:0 !important; padding:0 !important; border-top:1px solid var(--line); }
.data li{ padding:18px 0; border-bottom:1px solid var(--line); font-size:17px; }
.data li strong{
  display:block;
  font-family:var(--util); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fade); margin-bottom:6px;
}
.data a{ color:var(--paper) !important; text-decoration:none; border-bottom:1px solid rgba(199,154,60,.45); }
.data a:hover{ color:var(--foil) !important; border-color:var(--foil); }

.form-card{ background:var(--ink-2); border:1px solid var(--line); padding:clamp(24px,3.5vw,40px); }
.form-card > p:first-child{ margin-top:0; }
.form-intro{ color:var(--dim) !important; margin:0 0 24px; font-size:16px; }

.wpcf7 form{ display:grid; gap:22px; }
.wpcf7 label{
  display:block;
  font-family:var(--body); font-weight:500;
  font-size:15.5px; letter-spacing:0; text-transform:none;
  color:var(--paper); margin:0;
}
.wpcf7 label .opt{ color:var(--fade); font-weight:400; }
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea{
  width:100%; margin-top:8px;
  background:var(--ink); border:1px solid var(--line); border-radius:0;
  color:var(--paper);
  font-family:var(--body); font-size:16px;
  padding:14px 16px;
  transition:border-color .25s, background-color .25s;
}
.wpcf7 input:focus,.wpcf7 select:focus,.wpcf7 textarea:focus{
  outline:none; border-color:var(--foil); background:var(--ink-3);
}
.wpcf7 textarea{ resize:vertical; min-height:130px; }
.wpcf7 select{ appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A5A29A' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center; background-size:18px;
  padding-right:44px;
}

.wpcf7 .consent{
  display:flex; gap:12px; align-items:flex-start;
  font-family:var(--body); font-size:14.5px; line-height:1.5;
  color:var(--dim); letter-spacing:0; text-transform:none;
}
.wpcf7 .consent .wpcf7-list-item{ margin:0; }
.wpcf7 .consent input[type="checkbox"]{ width:17px; height:17px; margin:3px 10px 0 0; accent-color:var(--foil); }

.wpcf7 input[type="submit"]{
  justify-self:start; border:0; border-radius:0; cursor:pointer;
  font-family:var(--util); font-weight:400;
  font-size:14px; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink);
  background:linear-gradient(100deg,#B98D33,#EBD289 46%,#B98D33);
  padding:16px 34px; transition:filter .25s;
}
.wpcf7 input[type="submit"]:hover{ filter:brightness(1.12); }
.wpcf7 .note{ font-size:14px; color:var(--fade); margin:0; letter-spacing:0; text-transform:none; font-family:var(--body); }
.wpcf7-not-valid-tip{ color:#E8A9A9; font-size:13.5px; margin-top:6px; }
.wpcf7 form .wpcf7-response-output{
  border:1px solid var(--line); color:var(--paper);
  margin:0; padding:14px 16px; font-size:15px;
}
.wpcf7 form.sent .wpcf7-response-output{ border-color:var(--foil); }


/* == 12  FUSSZEILE ======================================================== */

.site-foot{ border-top:1px solid var(--line); padding:34px var(--gut); background:var(--ink); }
.site-foot .shell{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; flex-wrap:wrap; font-size:14.5px; color:var(--fade);
}
.site-foot a{ color:var(--dim); text-decoration:none; }
.site-foot a:hover,.site-foot a:focus-visible{ color:var(--foil); }
.foot-links{ display:flex; gap:22px; flex-wrap:wrap; list-style:none; margin:0; padding:0; }
/* Sieht aus wie die uebrigen Fusszeilen-Links, ohne Unterstrich. */
.foot-consent{
  background:none; border:0; padding:0; cursor:pointer;
  font-family:var(--body); font-size:14.5px; color:var(--dim);
  text-decoration:none;
}
.foot-consent:hover{ color:var(--foil); }


/* == 13  TEXTSEITEN ======================================================= */

.page-head{ padding:calc(var(--head) + clamp(48px,7vw,84px)) var(--gut) 0; }
.page-head h1{
  font-family:var(--display); font-weight:400;
  font-size:clamp(34px,6vw,64px); line-height:.98; text-transform:uppercase;
  margin:12px 0 0;
}
.prose{ padding:clamp(34px,5vw,54px) var(--gut) clamp(72px,9vw,110px); }
.prose > .shell > *{ max-width:70ch; }
.prose h2{
  font-family:var(--util); font-weight:400;
  font-size:clamp(19px,2.4vw,24px); letter-spacing:.05em; text-transform:uppercase;
  margin:2.4em 0 .7em; color:var(--paper);
}
.prose h3{
  font-family:var(--util); font-weight:400; font-size:17px; letter-spacing:.04em;
  margin:1.8em 0 .5em; color:var(--paper);
}
.prose p, .prose li{ color:var(--dim); }
.prose ul, .prose ol{ padding-left:1.2em; }
.prose li{ margin-bottom:.5em; }
.prose a{ color:var(--foil); }
.prose dl{ display:grid; grid-template-columns:minmax(130px,26%) 1fr; gap:10px 20px; margin:1.4em 0; }
.prose dt{
  font-family:var(--util); font-weight:300;
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--fade); padding-top:4px;
}
.prose dd{ margin:0; color:var(--paper); }
@media (max-width:560px){ .prose dl{ grid-template-columns:1fr; gap:2px 0; } .prose dd{ margin-bottom:14px; } }


/* == 14  EINWILLIGUNG ===================================================== */

.cookie{
  position:fixed; z-index:9000; left:var(--gut); right:var(--gut);
  bottom:calc(var(--gut) + var(--callbar, 0px));
  max-width:660px; margin-inline:auto;
  background:rgba(30,30,34,.98);
  backdrop-filter:blur(10px);
  border:1px solid var(--line);
  border-top:1px solid rgba(199,154,60,.5);
  padding:24px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.95);
  display:grid; gap:18px;
  transform:translateY(14px); opacity:0;
  transition:opacity .35s, transform .35s;
}
.cookie.is-in{ transform:none; opacity:1; }
.cookie[hidden]{ display:none !important; }

.cookie strong{
  display:block; color:var(--paper);
  font-family:var(--util); font-weight:400;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:8px;
}
.cookie p{ margin:0; font-size:14.5px; line-height:1.55; color:var(--dim); }

.cookie-acts{ display:flex; gap:12px; flex-wrap:wrap; }
/* Beide Knoepfe gleich gross und gleich auffaellig. Der eine golden
   umrandet, der andere neutral - aber keiner versteckt oder blass. */
.cookie-acts .btn{
  flex:1 1 200px; justify-content:center;
  padding:14px 20px; font-size:13px;
}
.cookie-acts .is-yes{ border-color:var(--foil); color:var(--foil); }
.cookie-acts .is-yes:hover{ background:var(--foil); color:var(--ink); }

.cookie-more{
  font-size:13px; color:var(--fade); text-decoration:none;
  border-bottom:1px solid rgba(138,135,129,.4);
  justify-self:start;
}
.cookie-more:hover{ color:var(--foil); border-color:var(--foil); }


/* == 14b  KARTE ===========================================================
   Platzhalter bis zur Zustimmung, das iframe entsteht erst danach. */

.map{
  position:relative;
  aspect-ratio:4/3;
  margin-top:26px;
  border:1px solid var(--line);
  background:
    repeating-linear-gradient(135deg, rgba(199,154,60,.05) 0 2px, transparent 2px 11px),
    var(--ink-2);
  overflow:hidden;
}
.map iframe{
  position:absolute; inset:0; width:100%; height:100%; border:0;
  filter:grayscale(.4) contrast(1.05) brightness(.92);
}
.map-ask{
  position:absolute; inset:0;
  display:flex; flex-direction:column; justify-content:flex-end; gap:14px;
  padding:clamp(18px,3vw,26px);
  background:linear-gradient(to top, rgba(23,23,26,.94) 30%, rgba(23,23,26,.45));
}
.map-ask strong{
  display:block; font-family:var(--util); font-weight:400;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--paper); margin-bottom:7px;
}
.map-ask p{ margin:0; font-size:14px; line-height:1.5; color:var(--dim); }
.map-ask .btn{ align-self:flex-start; padding:12px 22px; font-size:13px; }
.map-ask label{
  display:flex; gap:9px; align-items:center;
  font-size:13px; color:var(--fade); cursor:pointer;
}
.map-ask input{ accent-color:var(--foil); width:15px; height:15px; }


/* == 15  ANRUFLEISTE (HANDY) ==============================================
   Der Knopf sitzt mit Abstand in einem dunklen Balken. Randlos wirkte
   er wie ein Hinweisstreifen und niemand kam auf die Idee, darauf zu
   druecken. Dazu Hoerersymbol, Verb und Pfeil: die drei Merkmale, an
   denen man eine Schaltflaeche erkennt.                              */

.callbar{
  display:none;
  position:fixed; z-index:8000; inset:auto 0 0;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom, 0px));
  background:rgba(23,23,26,.94);
  backdrop-filter:blur(12px);
  border-top:1px solid rgba(199,154,60,.25);
}
.callbar-btn{
  display:flex; align-items:center; gap:14px;
  padding:12px 16px;
  background:linear-gradient(100deg,#B98D33,#EBD289 46%,#B98D33);
  color:var(--ink); text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  transition:filter .2s, transform .1s;
}
.callbar-btn:active{ filter:brightness(.93); transform:translateY(1px); }

.callbar-ic{
  width:26px; height:26px; flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%252317171A%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M21.5%2016.9v2.8a2%202%200%200%201-2.2%202%2019.6%2019.6%200%200%201-8.5-3%2019.3%2019.3%200%200%201-6-6%2019.6%2019.6%200%200%201-3-8.6A2%202%200%200%201%203.8%202h2.8a2%202%200%200%201%202%201.7c.1.9.3%201.8.6%202.6a2%202%200%200%201-.5%202.1L7.5%209.6a16%2016%200%200%200%206%206l1.2-1.2a2%202%200%200%201%202.1-.4c.8.3%201.7.5%202.6.6a2%202%200%200%201%201.7%202Z%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}
.callbar-txt{ flex:1; display:block; line-height:1.25; }
.callbar-txt strong{
  display:block;
  font-family:var(--util); font-weight:500;
  font-size:16px; letter-spacing:.1em; text-transform:uppercase;
}
.callbar-txt span{
  display:block;
  font-family:var(--body); font-size:12.5px;
  color:#3B2E10;
  font-variant-numeric:tabular-nums;
}
.callbar-pfeil{
  width:18px; height:18px; flex:none; opacity:.65;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%252317171A%27%20stroke-width%3D%271.9%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpath%20d%3D%27M9%205l7%207-7%207%27%2F%3E%3C%2Fsvg%3E") no-repeat center/contain;
}

@media (max-width:760px){
  .callbar{ display:block; }
  body{ padding-bottom:88px; }
  :root{ --callbar:88px; }
}