/* il teatrino, statischer Nachbau der Divi-Seite.
   Alle Werte sind am 18.08.2026 an der Live-Seite www.il-teatrino.de gemessen,
   nicht aus dem Divi-CSS abgeleitet. Siehe ../README.md */

/* --- Schriften, lokal statt Google Fonts --- */
@font-face{font-family:'ABeeZee';src:url(schriften/ABeeZee-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(schriften/OpenSans-400.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(schriften/OpenSans-500.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(schriften/OpenSans-600.woff2) format('woff2');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Open Sans';src:url(schriften/OpenSans-700.woff2) format('woff2');font-weight:700;font-style:normal;font-display:swap}

/* --- Grundwerte --- */
:root{
  --rot:#76242b;          /* Akzentfarbe der Seite */
  --text:#292827;
  --grau:#666666;
  --footer-bg:#222222;
  --footer-link:#bbbbbb;
}
*{margin:0;padding:0;border:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Open Sans',Arial,sans-serif;
  font-size:14px;font-weight:500;line-height:1.7em;
  color:var(--text);background:#fff;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--rot);text-decoration:none}
strong{font-weight:700}
h1,h2,h3,h4,h5,h6{font-family:'ABeeZee',sans-serif;font-weight:500;color:var(--text);line-height:1em;padding-bottom:10px}
p{padding-bottom:1em}
p:last-of-type{padding-bottom:0}
ul{list-style:none}

/* --- Boxed Layout, wie et_boxed_layout --- */
.seite{width:90%;max-width:1200px;margin:0 auto;background:#fff;position:relative}
.reihe{width:90%;max-width:1200px;margin:0 auto;padding:1% 0}
.abschnitt{padding:2% 0}
.abschnitt--voll{padding:0}

/* --- Kopf, fest; ganz oben durchsichtig, beim Scrollen grauer Balken wie auf der Live-Seite --- */
.kopf{
  position:fixed;top:0;z-index:99999;
  width:90%;max-width:1200px;
  background:rgba(228,228,230,0);
  transition:background-color .4s ease-in-out,box-shadow .4s ease-in-out;
}
.kopf__innen{width:90%;max-width:1200px;margin:0 auto;display:flex;align-items:flex-start;justify-content:space-between}
.logo-behaelter{height:124px;display:flex;align-items:center}
.logo-behaelter a{display:block}
.logo-behaelter img{height:111.6px;width:auto;margin-left:4px}
.hauptnavi{padding:55px 0 0 30px}
.hauptnavi ul{display:flex}
.hauptnavi li{padding-right:22px}
.hauptnavi li:last-child{padding-right:0}
.hauptnavi a{
  font-family:'Open Sans',Arial,sans-serif;font-size:16px;font-weight:600;
  line-height:14px;color:var(--rot);display:block;padding-bottom:55px;
}
.hauptnavi a{color:rgba(0,0,0,.6)}
.hauptnavi a.aktuell{color:var(--rot)}
.hauptnavi a:hover{opacity:.7}

@media only screen and (min-width:981px){
  .kopf--fest{background:rgb(228,228,230);box-shadow:0 0 7px rgba(0,0,0,.1)}
  .logo-behaelter,.logo-behaelter img,.hauptnavi,.hauptnavi a{transition:all .4s ease-in-out}
  .kopf--fest .logo-behaelter{height:64px}
  .kopf--fest .logo-behaelter img{height:57.6px}
  .kopf--fest .hauptnavi{padding-top:25px}
  .kopf--fest .hauptnavi a{padding-bottom:25px}
}

/* Mobilmenue */
.mobilnavi{display:none}
.mobilnavi__schalter{
  display:flex;align-items:center;gap:10px;padding:24px 0;
  font-size:14px;font-weight:600;color:var(--rot);background:none;cursor:pointer;
  font-family:'Open Sans',Arial,sans-serif;
}
.mobilnavi__balken{display:inline-block;width:20px;height:2px;background:var(--rot);position:relative}
.mobilnavi__balken:before,.mobilnavi__balken:after{content:"";position:absolute;left:0;width:20px;height:2px;background:var(--rot)}
.mobilnavi__balken:before{top:-6px}
.mobilnavi__balken:after{top:6px}
.mobilnavi__liste{
  position:absolute;top:100%;left:0;width:100%;padding:5%;display:none;z-index:9999;
  background:rgba(254,254,254,.94);border-top:2px solid var(--rot);
  box-shadow:0 2px 5px rgba(0,0,0,.1);
}
.mobilnavi__liste.offen{display:block}
.mobilnavi__liste a{display:block;padding:10px 5%;font-weight:500;color:var(--rot);border-bottom:1px solid rgba(118,36,43,.2)}
.mobilnavi__liste li:last-child a{border-bottom:0}

/* --- Bildwechsler im Kopfbereich --- */
/* Hoehe des Bildwechslers: Divi rechnet sie aus der Breite aus.
   Nachgemessen 445px bei 1280px Fenster und 174px bei 375px, daraus die Formel. */
.wechsler{position:relative;overflow:hidden;height:0;padding-bottom:calc(33.81% + 60px);background:#fff}
.wechsler__bild{
  position:absolute;inset:0;background-size:cover;background-position:50% 50%;
  background-repeat:no-repeat;opacity:0;transition:opacity .8s ease-in-out;
}
.wechsler__bild.aktiv{opacity:1}

/* --- Punktnavigation rechts, ein Punkt je Abschnitt --- */
.punktnavi{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:99999;background:rgba(0,0,0,.4);padding:10px}
.punktnavi li{margin-bottom:14px}
.punktnavi li:last-child{margin-bottom:0}
.punktnavi a{display:block;width:7px;height:7px;border-radius:7px;background:rgba(255,255,255,.5);margin-right:10px;text-indent:-9999px;overflow:hidden}
.punktnavi a.aktiv{background:#fff}

/* --- Spalten, Divi-Raster mit Gutter 2 --- */
.spalten{display:flex;flex-wrap:wrap}
.spalte{margin-right:3%}
.spalte:last-child{margin-right:0}
.spalte--2-3{width:65.667%}
.spalte--1-3{width:31.3333%}
.spalte--1-1{width:100%}
.modul{margin-bottom:0}
.spalte--2-3 .modul{margin-bottom:2.284%}
.spalte--1-3 .modul{margin-bottom:4.787%}
.spalte--1-1 .modul{margin-bottom:1.5%}
.spalte>.modul:last-child{margin-bottom:0}

/* --- Kasten Bestellservice (et_pb_blurb_0) --- */
.hinweis{
  background:rgba(0,0,0,.08);border:1px solid var(--rot);border-radius:10px;
  padding:15px 8px;overflow:hidden;line-height:1.4em;
  box-shadow:0 6px 18px -6px rgba(0,0,0,.3);
}
.hinweis__innen{max-width:650px}
.hinweis h4{font-size:27px;line-height:27px}
.hinweis h4 a{color:var(--text)}
.hinweis h4 a:hover{color:var(--rot)}
.hinweis p,.hinweis__unter{font-family:'ABeeZee',sans-serif;font-size:18px;line-height:18px;padding-bottom:10px}

/* --- Textmodule --- */
.text h1{font-size:30px;line-height:30px}
.text h2{font-size:26px;line-height:26px}
.text h3{font-size:22px;line-height:22px}
.spalte--1-3 .text h2{font-size:23px;line-height:23px}
.spalte--1-3 .text h3{font-size:20px;line-height:20px}
.spalte--1-3 .text h6{font-size:15px;line-height:15px}
.spalte--1-3 .text h1{font-size:26px;line-height:26px}
.rot{color:var(--rot)}
.grau{color:var(--grau)}

/* Kartenlinks, auf der Live-Seite 24px gross */
.kartenlink{font-size:24px;line-height:23.8px}
.kartenlink a{color:var(--rot)}
.kartenlink a:hover{text-decoration:underline}

/* Gutschein-Schaltflaeche (Yovite-Baustein, Farben und Masse wie im Original) */
.gutschein{text-align:center}
.gutschein a{
  display:inline-block;background-color:var(--rot);border:1px solid #ccc;border-radius:5px;
  box-shadow:0 0 3px #ccc;padding:15px 180px 10px 25px;
  background-image:url(bilder/yovite.png);background-repeat:no-repeat;background-position:91% 50%;
}
.gutschein p{
  margin:0;padding:5px 25px 5px 10px;font:normal normal normal 16px/18px Arial,sans-serif;
  color:#fff;text-align:center;text-transform:uppercase;letter-spacing:.09em;border-right:1px solid #fff;
}

/* --- Formular Kontaktseite ---
   Divi ruckt das Formular um einen Gutter nach links und gibt jedem Feld
   die gleiche Einrueckung, damit die Haelften buendig sitzen. */
.formular{margin-left:-3%;width:103%}
.formular p{padding-bottom:0}
.feld{width:100%;padding-left:3%;margin-bottom:3%;float:none}
.feld--halb{width:50%;float:left}
.feld--letzte{margin-right:0}
.formular label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.formular input.eingabe,.formular textarea{
  width:100%;padding:16px;background-color:#eee;font-size:14px;color:#999;
  font-family:'Open Sans',Arial,sans-serif;border:0;border-radius:0;
}
.formular textarea{height:150px;resize:vertical}
.formular__unten{clear:both;padding-left:3%;display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:18px}
.rechenaufgabe{display:flex;align-items:center;gap:8px}
.rechenaufgabe input{width:50px;height:51px;padding:16px;background:#eee;border:0;font-size:14px;color:var(--text);font-family:'Open Sans',Arial,sans-serif}
.knopf{
  font-family:'Open Sans',Arial,sans-serif;font-size:15px;letter-spacing:1px;
  background-color:var(--rot);color:#fff;border-radius:6px;padding:4.5px 15px;
  line-height:1.7em;height:51px;cursor:pointer;
}
.knopf:hover{background-color:rgba(118,36,43,.69)}
.formular__hinweis{clear:both;padding-top:20px;padding-left:3%;font-size:13px;color:var(--grau)}

/* --- Rechtstexte --- */
.rechtstext h1{font-size:30px;line-height:30px}
.rechtstext h2{font-size:26px;line-height:26px}
.rechtstext h3{font-size:22px;line-height:22px}
.rechtstext h4{font-size:18px;line-height:18px}
.rechtstext p:last-of-type{padding-bottom:0}
.rechtstext ul{list-style:disc;padding:0 0 1em 20px}
.rechtstext li{padding-bottom:.4em}

/* --- Fuss --- */
.fuss{background:var(--footer-bg)}
.fuss__navi{background:rgba(255,255,255,.05)}
.fuss__navi ul{width:90%;max-width:1200px;margin:0 auto;padding:15px 0}
.fuss__navi li{display:inline-block;padding-right:22px}
.fuss__navi a{font-size:14px;font-weight:600;line-height:23.8px;color:var(--footer-link)}
.fuss__navi a:hover{color:#fff}
.fuss__unten{background:rgba(0,0,0,.32);padding:15px 0 5px}
.fuss__unten .innen{width:90%;max-width:1200px;margin:0 auto}
.fuss__sozial{text-align:right;line-height:29px}
.fuss__sozial li{display:inline-block;margin-left:20px}
.fuss__sozial a{display:inline-block;width:24px;height:24px;color:#666;vertical-align:middle}
.fuss__sozial a:hover{color:var(--rot)}
.fuss__sozial svg{width:24px;height:24px;fill:currentColor}
.fuss__sozial span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* --- Grosse Bildschirme, wie Divi ab 1350px --- */
@media only screen and (min-width:1350px){
  .abschnitt{padding:27px 0}
  .abschnitt--voll{padding:0}
  .reihe{padding:13px 0}
}

/* --- Tablet und Telefon --- */
@media only screen and (max-width:980px){
  .kopf__innen{width:90%;align-items:center}
  .logo-behaelter{height:80px}
  .logo-behaelter img{height:43px;margin-left:0}
  .hauptnavi{display:none}
  .mobilnavi{display:block;position:static}
  .kopf__innen{position:relative}
  .spalten{display:block}
  .spalte,.spalte--2-3,.spalte--1-3{width:100%;margin-right:0;margin-bottom:30px}
  .spalte:last-child{margin-bottom:0}
  .bild-mitte img{margin:0 auto}
  .feld--halb{width:100%;margin-right:0}
  .gutschein a{padding:15px 120px 10px 20px;background-size:auto 20px}
}
@media only screen and (max-width:767px){
  .hinweis h4{font-size:22px;line-height:24px}
  .gutschein a{padding:15px 90px 10px 15px}
}

/* Hauptüberschrift für Suchmaschinen und Screenreader, optisch unsichtbar */
.nur-lesen{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}