/* Hero-Slider der Startseite, Ersatz fuer Slider Revolution.
   Maße, Zeiten und Schriftwerte stammen aus der Slider-Konfiguration der
   Datenbank: Modul 1240x700, Ueberschrift 50px/900, Unterzeile 25px/500,
   Stichpunkte 18px/300, Text weiss, 9000 ms je Slide, Pfeile ohne
   Punktnavigation, Fortschrittsbalken 5px oben.

   Die Slides liegen uebereinander in derselben Grid-Zelle statt absolut
   positioniert. Damit richtet sich die Hoehe des Sliders nach dem laengsten
   Slide, und auf schmalen Bildschirmen laeuft kein Text mehr oben heraus. */
.ew-slider{position:relative;overflow:hidden;background:#e8720c;
  display:grid;grid-template-areas:"slide";width:100%;box-sizing:border-box;
  align-self:stretch;flex:0 0 auto;min-height:700px}
.ew-slide{grid-area:slide;opacity:0;transition:opacity .6s ease;
  background-position:center;background-size:cover;background-repeat:no-repeat;
  pointer-events:none;min-width:0;position:relative}
.ew-slide.is-active{opacity:1;pointer-events:auto}
.ew-slide-inner{max-width:1120px;min-height:700px;margin:0 auto;
  padding:2.5em 20px;display:flex;align-items:center;gap:2em;
  box-sizing:border-box;position:relative;z-index:1}
.ew-slide-text{flex:1 1 52%;min-width:0;color:#fff}
.ew-slide-text h2{margin:0 0 .35em;font-size:50px;font-weight:900;line-height:1.1;
  color:#fff}
.ew-slide-sub{margin:0 0 1em;font-size:25px;font-weight:500;line-height:1.3}
.ew-slide-text ul{margin:0 0 1.4em;padding:0;list-style:none}
.ew-slide-text li{font-size:18px;font-weight:300;line-height:1.6;padding-left:1.1em;
  position:relative}
.ew-slide-text li::before{content:"";position:absolute;left:0;top:.62em;width:6px;
  height:6px;border-radius:50%;background:#fff}
.ew-more{display:inline-block;font-size:17px;font-weight:500;color:#fff;
  text-decoration:none;border-bottom:1px solid rgba(255,255,255,.6);padding-bottom:2px}
/* Das Seiten-Stylesheet setzt global a:hover{color:#ee8017}. Auf den orangen
   Slides waere der Text damit unsichtbar, deshalb hier ueberschrieben - die
   Rueckmeldung beschraenkt sich auf die Unterkante. */
.ew-more:hover,.ew-more:focus,.ew-more:active{color:#fff;border-bottom-color:#fff}
.ew-slide-figure{flex:1 1 44%;min-width:0}
.ew-slide-figure img{display:block;width:100%;height:auto}
.ew-nav{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;
  border:0;background:rgba(255,255,255,0);color:#fff;font-size:40px;line-height:1;
  cursor:pointer;z-index:3;padding:0}
.ew-nav:hover{background:rgba(255,255,255,.15)}
.ew-nav:focus-visible{outline:2px solid #fff;outline-offset:2px}
.ew-prev{left:8px}
.ew-next{right:8px}
.ew-progress{position:absolute;top:0;left:0;height:5px;width:100%;
  background:transparent;z-index:3}
.ew-progress>span{display:block;height:100%;width:0;
  background:rgba(255,255,255,.15)}
@media (max-width:1024px){
  .ew-slider{min-height:640px}
  .ew-slide-inner{min-height:640px}
  .ew-slide-text h2{font-size:40px}
  .ew-slide-sub{font-size:21px}
}
@media (max-width:778px){
  .ew-slider{min-height:0}
  /* Der Seitenkopf ueberlagert den Slider: #inner_content zieht den Inhalt um
     100px nach oben. Auf schmalen Bildschirmen steht der Text am Slide-Anfang
     und lag dadurch hinter der Kopfzeile. Der obere Innenabstand haelt ihn
     darunter. */
  .ew-slide-inner{min-height:0;flex-direction:column;align-items:stretch;
    gap:1.5em;padding:130px 20px 4.5em}
  .ew-slide-text,.ew-slide-figure{flex:0 0 auto;width:100%}
  .ew-slide-figure{max-width:420px;margin:0 auto}
  /* Der Bildhintergrund ist stellenweise sehr hell. Statt eines Kastens hinter
     dem Text wird das ganze Slide oben abgedunkelt und laeuft nach unten aus -
     so bleibt keine sichtbare Kante. */
  .ew-slide::after{content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(180deg, rgba(0,0,0,.58) 0%, rgba(0,0,0,.52) 55%,
      rgba(0,0,0,.36) 80%, rgba(0,0,0,.1) 100%)}
  .ew-slide-text{text-shadow:0 1px 2px rgba(0,0,0,.45)}
  .ew-nav{top:auto;bottom:10px;transform:none}
  .ew-prev{left:20px}
  .ew-next{right:20px}
}
@media (max-width:480px){
  .ew-slide-text h2{font-size:32px}
  .ew-slide-sub{font-size:18px}
  .ew-slide-text li{font-size:16px}
  .ew-nav{width:38px;height:38px;font-size:30px}
}
@media (prefers-reduced-motion:reduce){
  .ew-slide{transition:none}
}