/* ==========================================================================
   TIEFE UND EFFEKTE (14.10.2026, von Carsten nach Vorschau freigegeben) - Aufbau, Texte und Farben bleiben.
   Carsten: "alles sehr flach ... mehr Effekte in den Bildern und Schatten rein".
   ========================================================================== */
:root{
  --tiefe-1:0 1px 2px rgba(0,0,0,.10),0 3px 8px rgba(0,0,0,.10);
  --tiefe-2:0 2px 4px rgba(0,0,0,.08),0 10px 22px rgba(0,0,0,.14),0 28px 48px -16px rgba(0,0,0,.28);
  --tiefe-3:0 4px 8px rgba(0,0,0,.10),0 22px 40px rgba(0,0,0,.20),0 46px 80px -22px rgba(0,0,0,.40);
  --glanz:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.55) 47%,rgba(255,255,255,.18) 53%,transparent 70%);
}

/* ---------- Folien-Glanz: Lichtstreifen faehrt beim Ueberfahren ueber das Bild ---------- */
.glanz{position:relative;overflow:hidden}
span.glanz,div.glanz{display:block}   /* Knoepfe behalten ihre eigene Anordnung */
.glanz::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:var(--glanz);
  transform:translateX(-130%);transition:transform 1s var(--ease)}
.glanz:hover::before,.karte:hover .glanz::before{transform:translateX(130%)}

/* ---------- Seitenkopf: Bild zoomt langsam, Verlauf, Titel mit Tiefe und orangem Strich ---------- */
.kopfband{box-shadow:0 16px 34px -14px rgba(0,0,0,.55);z-index:2}
.kopfband img{animation:vb-zoom 20s ease-in-out infinite alternate;transform-origin:50% 40%}
.kopfband::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,0) 38%,rgba(0,0,0,.42))}
.kopfband h1{text-shadow:0 2px 0 rgba(0,0,0,.28),0 10px 28px rgba(0,0,0,.65),0 1px 3px rgba(0,0,0,.5)}
.kopfband h1::after{content:"";display:block;width:0;height:4px;margin:.28em auto 0;border-radius:2px;
  background:var(--orange);box-shadow:0 0 16px rgba(255,75,0,.85);animation:vb-strich 1.1s .35s var(--ease) forwards}
@keyframes vb-zoom{from{transform:scale(1)}to{transform:scale(1.09) translate(-1%,-1.2%)}}
@keyframes vb-strich{to{width:min(110px,18vw)}}

/* ---------- Diashow: Bild zoomt, Titel schwebt ein, Rand leicht abgedunkelt ---------- */
.diashow::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 45%,transparent 55%,rgba(0,0,0,.38))}
.folie.aktiv img{animation:vb-zoom 9s ease-out forwards}
.folie.aktiv .folie__titel{animation:vb-hoch .9s .25s var(--ease) both}
.folie.aktiv .folie__unter{animation:vb-hoch .9s .55s var(--ease) both}
@keyframes vb-hoch{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

/* ---------- Helle Karten (Ueber uns): Schatten in Lagen, Lichtpunkt folgt der Maus ---------- */
.karte{box-shadow:var(--tiefe-2);border-radius:6px;overflow:hidden;position:relative}
.karte:hover,.js .karte.zeig.da:hover{box-shadow:var(--tiefe-3)}
.karte--motto::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:2;
  background:linear-gradient(90deg,transparent,var(--orange),transparent);opacity:0;transition:opacity .4s var(--ease)}
.karte--motto:hover::before{opacity:1}
.karte--motto::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s;
  background:radial-gradient(circle at var(--lx,50%) var(--ly,0%),rgba(255,255,255,.55),transparent 42%)}
.karte--motto:hover::after{opacity:1}
.karte--motto .kopf img{transition:transform .5s var(--ease);filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.karte--motto:hover .kopf img{transform:rotate(-12deg) scale(1.15)}
.kippt:hover{transition:transform .12s linear,box-shadow .3s var(--ease)!important;transition-delay:0s!important}

/* ---------- Drei Marken-Logos: schweben mit Schatten, heben sich beim Ueberfahren ---------- */
.marken img{filter:drop-shadow(0 10px 12px rgba(0,0,0,.28));transition:transform .5s var(--ease),filter .5s var(--ease)}
.marken>div:hover img{transform:translateY(-10px) rotate(-5deg) scale(1.06);filter:drop-shadow(0 24px 20px rgba(0,0,0,.32))}

/* ---------- Dunkle Dienstleistungen: Lichtkante und oranger Schein ---------- */
.inhalt-dunkel{background:radial-gradient(1300px 620px at 50% 0,#1c1c1c,#000 72%)}
.inhalt-dunkel .karte{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 26px 54px -12px rgba(0,0,0,.95)}
.inhalt-dunkel .karte:hover,.js .inhalt-dunkel .karte.zeig.da:hover{
  box-shadow:0 0 0 1px rgba(255,75,0,.6),0 0 38px rgba(255,75,0,.30),0 34px 64px -14px rgba(0,0,0,.95)}
.karte__balken{background:linear-gradient(180deg,#2c2c2c,#151515);box-shadow:0 12px 20px -8px rgba(0,0,0,.65)}
.karte__balken h3{text-shadow:0 2px 6px rgba(0,0,0,.6)}
.karte--bild .karte__balken img{transition:transform .5s var(--ease)}
.karte--bild:hover .karte__balken img{transform:rotate(-12deg) scale(1.15)}
.karte--bild .karte__bild img{transition:transform 1.2s var(--ease)}
.karte--bild:hover .karte__bild img{transform:scale(1.08)}

/* ---------- Kontaktaufruf: Roboter schwebt, Knopf mit Tiefe und Glanz ---------- */
.aufruf__roboter{animation:vb-schweben 5s ease-in-out infinite;filter:drop-shadow(0 20px 16px rgba(0,0,0,.30))}
@keyframes vb-schweben{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-12px) rotate(2deg)}}
.aufruf h2{text-shadow:0 3px 14px rgba(0,0,0,.12)}
.aufruf-knopf,.knopf{position:relative;overflow:hidden;border-radius:4px;box-shadow:var(--tiefe-2);
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)}
.aufruf-knopf:hover,.knopf:hover{transform:translateY(-3px);box-shadow:0 14px 30px -6px rgba(255,75,0,.55)}

/* ---------- Kontakt: Formular als Karte, Felder mit Tiefe und orangem Leuchten ---------- */
.formular{background:#fff;padding:clamp(18px,2.4vw,32px);border-radius:8px;box-shadow:var(--tiefe-2)}
.formular input,.formular textarea{box-shadow:inset 0 2px 4px rgba(0,0,0,.08);transition:box-shadow .25s,border-color .25s,background .25s}
.formular input:focus,.formular textarea:focus{box-shadow:0 0 0 4px rgba(255,75,0,.16),inset 0 1px 2px rgba(0,0,0,.05)}
.karte-osm{border-radius:8px;box-shadow:var(--tiefe-2);overflow:hidden}

/* ---------- Impressum: Inhalt als Karte ---------- */
.inhalt-weiss .schmal.mitte{background:#fff;border-radius:8px;box-shadow:var(--tiefe-2);padding:clamp(22px,3vw,44px)}

/* ---------- Textilveredelung ---------- */
.textil__text h1{text-shadow:0 4px 18px rgba(0,0,0,.65)}
.textil__mann{filter:drop-shadow(0 34px 40px rgba(0,0,0,.6))}
.textil__bilder>*{border-radius:6px;box-shadow:0 22px 44px -8px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.textil__geschenk{animation:vb-schweben 6s ease-in-out infinite;filter:drop-shadow(0 22px 18px rgba(0,0,0,.5))}
.textil__shop>img:last-child{animation-delay:-3s}
.textil__knopf{animation:vb-puls 2.8s ease-in-out infinite}
@keyframes vb-puls{0%,100%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 0 rgba(255,75,0,.55)}50%{box-shadow:0 8px 22px rgba(0,0,0,.5),0 0 0 14px rgba(255,75,0,0)}}

@media (prefers-reduced-motion:reduce){
  .kopfband img,.folie.aktiv img,.aufruf__roboter,.textil__geschenk,.textil__knopf{animation:none}
  .kopfband h1::after{animation:none;width:min(110px,18vw)}
}