/* Opern- und Konzertagentur Therese Renick
   Statischer Nachbau des bisherigen Auftritts (Design 1:1). */

/* ---------- Schriften (self-hosted) ---------- */
@font-face{font-family:lato;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/Lato-Regular.woff2) format("woff2")}
@font-face{font-family:lato;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/Lato-Bold.woff2) format("woff2")}
@font-face{font-family:lato;font-style:normal;font-weight:900;font-display:swap;src:url(/assets/fonts/Lato-Black.woff2) format("woff2")}
@font-face{font-family:lato;font-style:normal;font-weight:200;font-display:swap;src:url(/assets/fonts/Lato-Light.woff2) format("woff2")}
@font-face{font-family:pt_sans;font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/pt_sans-web-regular-webfont.woff2) format("woff2")}
@font-face{font-family:pt_sans;font-style:normal;font-weight:700;font-display:swap;src:url(/assets/fonts/pt_sans-web-bold-webfont.woff2) format("woff2")}

/* ---------- Grundgerüst ---------- */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;font-size:16px;-webkit-text-size-adjust:100%}
body{margin:0;background:#fff;color:#5c5c5c;
  font:400 1rem/1.5 lato,Helvetica,Tahoma,Geneva,Arial,sans-serif}
img{height:auto;max-width:100%;display:inline-block;vertical-align:middle;border:0}
a{color:#5c5c5c;text-decoration:none;transition:color .25s}
a:hover,a:focus{color:#424242}
p{margin:0 0 1.3rem}
strong,b{font-weight:700}
table{border-collapse:collapse}

/* Sprungmarke für Tastaturnutzung */
.skip{position:absolute;left:-9999px;top:0;z-index:100002;background:#424242;color:#fff;padding:.6rem 1rem}
.skip:focus{left:0;color:#fff}

/* ---------- Seitenrahmen + diagonale Flächen ---------- */
#page{position:relative;overflow:hidden;background:#fff;min-height:100vh}
#page::before{content:'';position:absolute;top:0;left:0;width:0;height:0;z-index:20;pointer-events:none;
  border-style:solid;border-width:1520px 1220px 0 0;
  border-color:rgba(0,0,0,.03) transparent transparent transparent}
#page::after{content:'';position:absolute;top:0;right:0;width:0;height:0;z-index:20;pointer-events:none;
  border-style:solid;border-width:1360px 0 0 1360px;
  border-color:rgba(0,0,0,.03) transparent transparent transparent}

/* ---------- Raster ---------- */
.container{width:75rem;margin:0 auto;padding:0;position:relative}
.flushed .container{width:100%}
.grid{display:flex;flex-wrap:wrap;margin:0;padding:0}
.block{padding:0;min-width:0}
.size-100{width:100%}.size-72{width:72%}.size-64{width:64%}
.size-50{width:50%}.size-36{width:36%}.size-28{width:28%}
.equal{display:flex;flex-direction:column}
.box{width:auto;margin:10px;padding:15.008px}
main.bar>.grid>.block>.box,aside.bar>.grid>.block>.box{width:100%}
.nomargin .box{margin:0}
.align-right{text-align:right}
.center{text-align:center}
.shadow2>.box{box-shadow:0 0 4px rgba(0,0,0,.15)}
main.bar,aside.bar{background:#fff;flex:1 1 auto;display:block}

/* ---------- Kopf ---------- */
#top{background:#fff;color:#949494}
#top .flags img{margin:0}
.logo{display:inline}
.logo img{padding-right:1rem;max-width:100%}

/* Off-Canvas-Schalter (nur mobil) */
.oc-toggle{display:none;position:absolute;top:.7rem;left:1.5rem;margin-left:-15px;padding:0 0 0 1px;
  width:24px;height:24px;line-height:24px;text-align:center;font-size:1.7rem;color:#fff;
  background:transparent;border:0;cursor:pointer;z-index:100001}
.oc-toggle span{display:block;height:2px;background:currentColor;margin:5px 0;border-radius:1px}

/* ---------- Hauptnavigation ---------- */
#nav{background:#424242;color:#fff}
#nav .box{margin:10px 25.008px;padding:8px 0;width:auto;text-align:center}
#nav ul{margin:0;padding:0;list-style:none;font-weight:700;line-height:1.5}
#nav li{display:inline-block;margin:0 .7rem;position:relative}
#nav a{display:block;font-size:1rem;font-weight:700;line-height:1;letter-spacing:1px;
  text-transform:uppercase;padding:0;color:#5c5c5c;transition:color .35s ease}
#nav a .t{color:#fff;line-height:normal;transition:color .35s ease}
#nav li:hover>a .t,#nav li:focus-within>a .t{color:#e0e0e0}

/* ---------- Inhalt ---------- */
#content{position:relative}
#content .g-title{display:inline-block;font-family:pt_sans,Helvetica,Tahoma,Geneva,Arial,sans-serif;
  font-size:2.2rem;font-weight:900;line-height:.5;text-transform:uppercase;text-align:center;
  color:#971824;margin:.775rem 0;padding:0 0 .938rem;border:0}
#content h5{font-size:1.7rem;font-weight:700;line-height:1.5;margin:1.5rem 0 .75rem}
#content h1{font-size:2.2rem;font-weight:700;line-height:1.2;margin:0 0 1rem}
#content h2{font-size:1.7rem;font-weight:700;line-height:1.3;margin:1.5rem 0 .75rem}
#content h3{font-size:1.3rem;font-weight:700;line-height:1.35;margin:1.25rem 0 .6rem}
#content h4{font-size:1.1rem;font-weight:700;margin:1rem 0 .5rem}
#content ul,#content ol{margin:0 0 1.3rem;padding-left:1.5rem}
#content td{border:1px solid #dedede;padding:8px;vertical-align:middle}
#content table{border:1px solid #dedede;width:100%}

/* ---------- Fußbereich ---------- */
#copyright{background:#e6e6e6;color:#333}
#copyright::before{content:'';position:absolute;bottom:0;left:0;width:0;height:0;pointer-events:none;
  border-style:solid;border-width:1200px 0 0 1000px;
  border-color:transparent transparent transparent rgba(0,0,0,.05)}
#copyright::after{content:'';position:absolute;bottom:0;right:0;width:0;height:0;pointer-events:none;
  border-style:solid;border-width:0 0 1200px 1000px;
  border-color:transparent transparent rgba(0,0,0,.05) transparent}
#copyright .container::before{content:"";display:block;margin:0 1.563rem;
  border-top:1px solid rgba(0,0,0,.1)}

/* ---------- Bewerbungs-Hinweis (Popover) ---------- */
.tip-link{border-bottom:1px dashed #ccc;cursor:pointer;display:inline-block}
.tip{position:absolute;z-index:10000;display:none;width:max-content;max-width:400px;padding:0;
  text-align:left;white-space:normal;background:#fff;background-clip:padding-box;
  border:1px solid rgba(0,0,0,.2);border-radius:6px;box-shadow:0 5px 10px rgba(0,0,0,.2);
  margin-top:-6px;font-weight:400;color:#5c5c5c}
.tip.open{display:block}
.tip .arrow,.tip .arrow::after{position:absolute;display:block;width:0;height:0;
  border-color:transparent;border-style:solid}
.tip .arrow{border-width:11px;bottom:-11px;left:50%;margin-left:-11px;
  border-top-color:rgba(0,0,0,.25);border-bottom-width:0}
.tip .arrow::after{content:"";border-width:10px;bottom:1px;margin-left:-10px;
  border-top-color:#fff;border-bottom-width:0}
.tip-title{display:block;padding:8px 14px;margin:0;font-size:14px;font-weight:400;line-height:18px;
  background:#f7f7f7;border-bottom:1px solid #ebebeb;border-radius:5px 5px 0 0}
.tip-body{display:block;padding:9px 14px}
.tip-body .tp{display:block;margin:0 0 1rem}
.tip-body .tp:last-child{margin:0}

/* ---------- Off-Canvas-Menü (mobil) ---------- */
#offcanvas{position:fixed;top:0;left:0;bottom:0;width:10rem;background:#757575;color:#fff;
  z-index:100000;overflow-y:auto;transform:translateX(-100%);transition:transform .3s ease;
  visibility:hidden}
#offcanvas ul{margin:0;padding:0;list-style:none;background:#757575}
#offcanvas a{display:block;color:#fff;padding:.938rem;font-size:1rem}
#offcanvas li.active{background:#484848}
#offcanvas li:hover{background:#4f4f4f}
#offcanvas .oc-lang{padding:.938rem}
#offcanvas .oc-lang a{display:inline;padding:0}
.oc-backdrop{position:fixed;inset:0;background:transparent;visibility:hidden;z-index:99999}
body.oc-open #offcanvas{transform:translateX(0);visibility:visible}
body.oc-open .oc-backdrop{visibility:visible}
#page{transition:transform .3s ease}
body.oc-open #page{transform:translateX(10rem)}

/* ---------- Sichtbarkeit ---------- */
.visible-phone{display:none !important}

/* ---------- Haltepunkte (wie Gantry) ---------- */
@media only all and (min-width:60rem) and (max-width:74.99rem){.container{width:60rem}}
@media only all and (min-width:48rem) and (max-width:59.99rem){.container{width:48rem}}
@media only all and (min-width:30.01rem) and (max-width:47.99rem){.container{width:30rem}}
@media only all and (max-width:30rem){.container{width:100%}}

@media only all and (max-width:47.99rem){
  .hidden-phone{display:none !important}
  .visible-phone{display:block !important}
  .block[class*=size-]{width:100%}
  .oc-toggle{display:block}
  .logo{text-align:center;display:block}
  .logo img{padding:0 7rem}
  #nav{padding:0}
  #nav .box{display:none}
  #top{padding:0}
  #copyright .container{padding:.938rem 0}
  #copyright .box{padding:0 .938rem;margin:.3125rem .625rem;text-align:center !important}
  #copyright .align-right{text-align:center}
}
@media only all and (max-width:30rem){
  .logo img{padding:0 5rem}
}

@media print{
  #nav,.oc-toggle,#offcanvas,.oc-backdrop{display:none !important}
  #page::before,#page::after,#copyright::before,#copyright::after{display:none}
  body{color:#000}
}