/* ============================================================================
   Brücke zwischen der Ausgabe von TYPO3 und dem Gestaltungssystem «Haus & Halle».

   Das System (hausundhalle.css) beschreibt die Seite in eigenen Bausteinen —
   .wrap .stage .bill .window .foot. TYPO3 liefert daneben Ausgabe, die wir nicht
   selbst schreiben: Rahmen von fluid_styled_content, Redaktionstext aus dem RTE,
   powermail-Formulare, News und die Bildergalerie. Diese Datei passt sie ein,
   ohne dass die Redaktion etwas anders machen muss.
   ============================================================================ */

/* ---------------------------------------------------------------- Rahmen */
/* fluid_styled_content verschachtelt jedes Element fünffach. Die Hüllen sind
   reine Struktur — sie sollen weder Abstand noch Fläche mitbringen. */
.frame,.frame-group-container,.frame-group-inner,.frame-container,.frame-inner{
  margin:0;padding:0;background:none;border:0}
.frame + .frame{margin-top:2.2rem}

/* Kopfzeile eines Inhaltselements = Abschnittstitel des Systems */
.frame-header{margin:0 0 1.1rem}
.frame-header .element-header{
  font-family:Fraunces,Georgia,serif;font-weight:600;line-height:1.02;
  letter-spacing:-.015em;font-variation-settings:"SOFT" 30,"WONK" 1;
  font-size:var(--fs-d2);color:var(--paper);margin:0;text-align:left}
:is(.paper,.frame-paper) .frame-header .element-header{color:#15181C}
.frame-header .element-header::before{display:none}
.frame-type-header .frame-header .element-header{font-size:var(--fs-d3)}
/* Im Fuss sind die Kopfzeilen Spaltentitel: klein, gesperrt, in Kapitälchen */
.foot .frame-header{margin:0 0 .6rem}
.foot .frame-header .element-header{font-family:Karla,system-ui,sans-serif;font-size:var(--fs-label);
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--paper);
  font-variation-settings:normal}
.foot__grid > div > .meta{font-size:var(--fs-label);font-weight:800;letter-spacing:.14em;color:var(--paper)}
.foot .frame-type-text p{color:var(--stone);margin:0;line-height:1.5}
.foot .frame-type-text{max-width:none}
.foot__tag{margin:1rem 0 0;font-size:var(--fs-small);color:var(--stone)}

/* ---------------------------------------------------------------- Redaktionstext */
.frame-type-text,.frame-type-textpic,.frame-type-html,.vtfm-rte{max-width:62rem}
.frame-type-text p,.frame-type-html p,.vtfm-rte p{margin:0 0 1rem;color:var(--stone)}
:is(.paper,.frame-paper) .frame-type-text p,:is(.paper,.frame-paper) .frame-type-html p,:is(.paper,.frame-paper) .vtfm-rte p{color:var(--slate)}
.frame-type-text h1,.frame-type-text h2,.frame-type-text h3,.frame-type-text h4,
.vtfm-rte h1,.vtfm-rte h2,.vtfm-rte h3,.vtfm-rte h4{
  font-family:Fraunces,Georgia,serif;font-weight:600;color:var(--paper);
  margin:2rem 0 .6rem;line-height:1.15}
:is(.paper,.frame-paper) .frame-type-text :is(h1,h2,h3,h4),:is(.paper,.frame-paper) .vtfm-rte :is(h1,h2,h3,h4){color:#15181C}
.frame-type-text h3,.vtfm-rte h3{font-size:var(--fs-lg)}
.frame-type-text h4,.vtfm-rte h4{font-size:var(--fs-md)}
.frame-type-text ul,.frame-type-html ul,.vtfm-rte ul{list-style:disc;
  margin:.4rem 0 1.2rem;padding-left:1.1rem;color:var(--stone)}
.frame-type-text ol,.frame-type-html ol,.vtfm-rte ol{list-style:decimal;margin:.4rem 0 1.2rem;padding-left:1.3rem}
:is(.paper,.frame-paper) .frame-type-text ul,:is(.paper,.frame-paper) .vtfm-rte ul{color:var(--slate)}
.frame-type-text li,.vtfm-rte li{margin-bottom:.35rem}
.frame-type-text a,.frame-type-html a,.vtfm-rte a{color:var(--red-lite);text-decoration:none;
  border-bottom:1px solid transparent}
.frame-type-text a:hover,.vtfm-rte a:hover{border-bottom-color:currentColor}
:is(.paper,.frame-paper) .frame-type-text a,:is(.paper,.frame-paper) .frame-type-html a,:is(.paper,.frame-paper) .vtfm-rte a{color:var(--red)}
.frame-type-text strong,.vtfm-rte strong{color:var(--paper);font-weight:700}
:is(.paper,.frame-paper) .frame-type-text strong,:is(.paper,.frame-paper) .vtfm-rte strong{color:#15181C}

/* Knöpfe aus dem Redaktionstext (Tailwind-Klassen in altem HTML) */
[class~="bg-red-600"],[class~="hover:bg-red-600"]:hover{background-color:var(--red) !important;color:#fff !important}
[class~="bg-red-700"],[class~="hover:bg-red-700"]:hover{background-color:var(--red-deep) !important;color:#fff !important}
[class*="text-red-600"]{color:var(--red-lite) !important}
:is(.paper,.frame-paper) [class*="text-red-600"]{color:var(--red) !important}
[class~="bg-red-600"][class*="text-red-600"]{color:#fff !important}

/* Legacy-Tailwind-Flächen sollen den dunklen Saal nicht aufreissen */
main [class~="bg-white"]:not(section),main [class~="bg-gray-50"]:not(section),
main [class~="bg-gray-100"]:not(section){background-color:transparent !important}
[class~="text-gray-600"],[class~="text-gray-700"],[class~="text-gray-800"],
[class~="text-gray-900"]{color:var(--stone) !important}
:is(.paper,.frame-paper) [class~="text-gray-600"],:is(.paper,.frame-paper) [class~="text-gray-700"],
:is(.paper,.frame-paper) [class~="text-gray-800"],:is(.paper,.frame-paper) [class~="text-gray-900"]{color:var(--slate) !important}
[class~="shadow-md"],[class~="shadow-lg"],[class~="shadow-sm"]{box-shadow:none !important}

/* ---------------------------------------------------------------- Bilder */
.frame-type-image figure,.frame-type-textpic figure{margin:0}
.frame-type-image img,.frame-type-textpic img{width:100%;height:auto}
.frame-type-image figcaption,.frame-type-textpic figcaption,.caption{
  font-size:var(--fs-small);color:var(--stone);margin-top:.5rem}
:is(.paper,.frame-paper) .frame-type-image figcaption,:is(.paper,.frame-paper) .caption{color:var(--slate)}
.gallery-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));gap:2px}
.gallery-item{margin:0}

/* ---------------------------------------------------------------- Formulare */
.powermail_fieldwrap{margin-bottom:1.2rem}
.powermail_label{display:block;font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--slate);margin-bottom:.4rem}
.powermail_input,.powermail_textarea,.powermail_select,
input[type=text],input[type=email],input[type=tel],textarea,select{
  width:100%;padding:.8rem .9rem;border:1px solid #CFC8C0;background:#fff;color:#15181C;
  font:inherit;font-size:var(--fs-body);border-radius:2px}
.powermail_input:focus,.powermail_textarea:focus,textarea:focus,input:focus{
  outline:2px solid var(--red);outline-offset:1px;border-color:var(--red)}
.powermail_fieldset{border:0;padding:0;margin:2.4rem 0 0}
.powermail_legend{font-family:Fraunces,Georgia,serif;font-size:var(--fs-lg);font-weight:600;
  padding:0;margin-bottom:1.2rem;color:inherit}
.powermail_submit,button[type=submit],input[type=submit]{
  display:inline-block;font-weight:700;font-size:var(--fs-body);letter-spacing:.02em;
  padding:.95rem 1.6rem;border-radius:2px;border:0;background:var(--red);color:#fff;cursor:pointer}
.powermail_submit:hover{background:var(--red-deep)}
.powermail_field_error_container{color:var(--red-lite);font-size:var(--fs-small);margin-top:.3rem}
/* powermail zeichnet Ankreuzfelder selbst nach (appearance:none, Grösse via
   inline-size) — und zwar in @layer. Eine ungeschichtete Regel sticht jede
   Schicht, «width:auto» liess die Knöpfe darum auf 8 px zusammenfallen: man sah
   nicht mehr, was angekreuzt war. Also das native Bedienelement zurückholen und
   die Grösse selbst setzen. */
input[type=checkbox],input[type=radio]{appearance:auto;-webkit-appearance:auto;
  width:1.15rem;height:1.15rem;min-width:1.15rem;margin:0 .55rem 0 0;
  accent-color:var(--red);vertical-align:-.16em}
.powermail_form .radio,.powermail_form .checkbox{display:flex;align-items:baseline;
  gap:.1rem;margin:0 0 .45rem}
.powermail_form .radio label,.powermail_form .checkbox label{margin:0}

/* ---------------------------------------------------------------- News */
.news-list-view .article{border-top:1px solid var(--line);padding:1.6rem 0}
.news-list-view .article .element-header{font-size:var(--fs-lg)}
.news-single .news-img-wrap img{width:100%;height:auto}

/* ---------------------------------------------------------------- Band */
/* Das zeitgesteuerte Save-the-Date-Band sitzt unter der Navigation. */
.vtfm-banner{position:static !important;background:var(--red);color:#fff;
  text-align:center;padding:.6rem 1rem;font-size:var(--fs-body);font-weight:700;letter-spacing:.02em}
.vtfm-banner a{color:#fff}

/* ---------------------------------------------------------------- Karte */
iframe{max-width:100%;border:0}

/* ============================================================================
   Ergänzungen zum System, die im Entwurf nicht vorkamen, aber auf der echten
   Website gebraucht werden.
   ============================================================================ */

/* Bühne: Bilderwechsel und Titel unter der Plakatzeile */
.stage__bg{position:absolute;inset:0}
.stage img.bg{opacity:0;transition:opacity 1.4s ease-in-out}
.stage img.bg.is-in{opacity:1}
.stage__title{font-size:var(--fs-d3);margin:.2rem 0 .6rem}
.stage h1.display{margin:.2rem 0 .8rem}

/* Navigation: Aufklappmenü und Hamburger */
.nav__item{position:relative}
.nav__drop{position:absolute;top:100%;left:0;min-width:14rem;background:var(--ink-2);
  border:1px solid var(--line);padding:.4rem 0;display:none;z-index:70}
.nav__item:hover .nav__drop,.nav__drop:not(.hidden){display:block}
.nav__item:last-child .nav__drop{left:auto;right:0}  /* letztes Menü (Medien) klappt nach links auf, sonst am Fensterrand abgeschnitten */
.nav__drop a{display:block;padding:.55rem 1.1rem;font-size:var(--fs-body);text-decoration:none;border:0}
.nav__drop a:hover{background:rgba(255,255,255,.06)}
.nav__burger{display:none;margin-left:auto;background:none;border:0;cursor:pointer;padding:.6rem}
.nav__burger span{display:block;width:1.6rem;height:2px;background:var(--paper);margin:.28rem 0}
@media (max-width:800px){
  .nav__burger{display:block}
  .nav__logo{height:78px}
  .nav__links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--ink-2);
    border-bottom:1px solid var(--line);flex-direction:column;gap:0;padding:.5rem 0;margin-left:0}
  .nav__links.is-open{display:flex}
  .nav__links > a,.nav__item > a{display:block;padding:.75rem clamp(1.25rem,4vw,3rem)}
  .nav__drop{position:static;border:0;background:transparent;padding:0 0 .4rem 1.5rem}
  .nav__in{position:relative;gap:1rem}
}

/* Theaterzettel: Beschreibung, Verweise, Bildnachweis, Kursleitung */
.bill__desc{margin-top:.9rem;font-size:var(--fs-body)}
.bill__desc p{margin:0 0 .6rem}
.bill__links{margin:.8rem 0 0;display:flex;gap:1.2rem;flex-wrap:wrap;font-size:var(--fs-small)}
.bill__links a{color:var(--red-lite);text-decoration:none}
:is(.paper,.frame-paper) .bill__links a{color:var(--red)}
.bill__credit{font-size:var(--fs-small);color:var(--stone);margin:.4rem 0 0}
.bill__still{position:relative}
.bill__still .programm-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease-in-out}
.bill__still .programm-slide:first-child{opacity:1}
.bill__leaders{display:flex;gap:.6rem;margin-top:.8rem}
.bill__leaders img{width:3.4rem;height:3.4rem;border-radius:50%;object-fit:cover}
.bill__row.hidden,.bill__day.hidden{display:none}

/* Fenster */
.window__text{color:var(--stone);font-size:var(--fs-body);margin:0}

/* Personen */
.person .meta{margin:.15rem 0 0}
.person__bio{font-size:var(--fs-small);color:var(--stone);margin-top:.5rem}
.person__contact{font-size:var(--fs-small);margin:.3rem 0 0}
.person__contact a{color:var(--red-lite);text-decoration:none}
:is(.paper,.frame-paper) .person__contact a{color:var(--red)}

/* Sponsorenband: Gönner ohne Logo */
.band__name{font-size:var(--fs-md);color:var(--stone);text-decoration:none}
:is(.paper,.frame-paper) .band__name{color:var(--slate)}

/* Zeitachse (Geschichte): jedes Inhaltselement ein Kapitel am Jahresstrang */
.timeline{max-width:56rem}
.timeline .frame{position:relative;padding:0 0 2.8rem 2.4rem;border-left:1px solid var(--ink-3);margin:0}
.timeline .frame::before{content:"";position:absolute;left:-9.5px;top:.55rem;width:18px;height:18px;
  border-radius:50%;background:var(--red)}
.timeline .frame:first-child{border-left-color:transparent;padding-left:0}
.timeline .frame:first-child::before{display:none}
.timeline .frame:last-child{border-left-color:transparent}
.timeline .frame-header .element-header{font-size:var(--fs-d3);margin:0 0 .9rem}
.timeline ul{list-style:none;padding-left:0}
/* Preislisten in der Geschichte: eine stilisierte Goldene Meringue statt Punkt (Sandro 2.9.2026) */
ul.awards{list-style:none!important;padding-left:0!important}
ul.awards li{position:relative;padding-left:1.6em}
ul.awards li::before{content:"";position:absolute;left:.1em;top:-.2em;width:1.05em;height:1.75em;
  background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23FBE7A3%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23E4AE3C%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23B27516%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22r%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%234A2A17%22/%3E%3Cstop%20offset=%22.3%22%20stop-color=%22%239D5F35%22/%3E%3Cstop%20offset=%22.65%22%20stop-color=%22%237A4527%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%233F2313%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x=%226.5%22%20y=%2237.5%22%20width=%2211%22%20height=%222.25%22%20rx=%22.3%22%20fill=%22%233F2313%22/%3E%3Crect%20x=%2210%22%20y=%2219.4%22%20width=%224%22%20height=%2218.2%22%20fill=%22url%28%23r%29%22/%3E%3Crect%20x=%2210%22%20y=%2219.4%22%20width=%22.8%22%20height=%2218.2%22%20fill=%22%23C98A55%22%20fill-opacity=%22.4%22/%3E%3Crect%20x=%2211.7%22%20y=%2217%22%20width=%22.6%22%20height=%222.5%22%20fill=%22%232E1A0E%22/%3E%3Cpath%20fill=%22url%28%23g%29%22%20d=%22M3.4%2017.2C2.6%2014.8%203.2%2012.4%205.4%2011.6%205.3%209.4%207%207.6%209.2%208.2%209.7%205.6%2012.4%204.4%2014.4%205.8%2016.3%204.9%2018.5%206.4%2018.4%208.6%2020.4%209.1%2021.5%2011.2%2020.7%2013.3%2021.7%2014.8%2021.4%2016.4%2020.6%2017.2H3.4z%22/%3E%3Cpath%20fill=%22none%22%20stroke=%22%238A560C%22%20stroke-opacity=%22.5%22%20stroke-width=%22.7%22%20stroke-linecap=%22round%22%20d=%22M6%2016.2c.2-2.4%201-4.3%202.4-5.6M9.6%2016.4c-.1-3%20.6-5.4%202-7.2M13.6%2016.4c.2-3.2-.2-5.8-1-7.9M17.4%2016.2c.3-2.6-.2-4.8-1.4-6.4%22/%3E%3Cpath%20fill=%22%23fff%22%20fill-opacity=%22.4%22%20d=%22M10.6%209.2c.5-1.7%201.8-2.8%203.4-3-.7%201-1.1%202.3-1.2%203.8-.7-.4-1.5-.7-2.2-.8z%22/%3E%3C/svg%3E") no-repeat center/contain}
/* Wanderpreis (Hauptpreis) zuoberst in jeder Preisliste: gold hinterlegt, mit Etikett (Sandro 4.9.2026) */
ul.awards li.award--main{margin:0 0 .5em;padding:.4em .7em .4em 1.9em;border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(224,169,62,.16),rgba(224,169,62,0) 75%)}
ul.awards li.award--main::before{left:.45em;top:.25em}
.award__tag{display:inline-block;margin-left:.45em;padding:.05em .5em .1em;border:1px solid var(--gold);border-radius:2px;
  color:var(--gold-ink);background:#FBF3DF;font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  vertical-align:.12em;white-space:nowrap}
/* Hauptpreis auf den Prämierungen: Kasten wie die Wanderpreis-Zeile in der Geschichte (Sandro 4.9.2026) */
.award-main{position:relative;margin:0 0 1.6rem;padding:.9rem 1.2rem .9rem 3.1rem;border-left:3px solid var(--gold);
  background:linear-gradient(90deg,rgba(224,169,62,.16),rgba(224,169,62,0) 80%)}
.award-main::before{content:"";position:absolute;left:1.05rem;top:1rem;width:1.3em;height:2.2em;background:url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2040%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22g%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23FBE7A3%22/%3E%3Cstop%20offset=%22.45%22%20stop-color=%22%23E4AE3C%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23B27516%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22r%22%20x1=%220%22%20y1=%220%22%20x2=%221%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%234A2A17%22/%3E%3Cstop%20offset=%22.3%22%20stop-color=%22%239D5F35%22/%3E%3Cstop%20offset=%22.65%22%20stop-color=%22%237A4527%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%233F2313%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20x=%226.5%22%20y=%2237.5%22%20width=%2211%22%20height=%222.25%22%20rx=%22.3%22%20fill=%22%233F2313%22/%3E%3Crect%20x=%2210%22%20y=%2219.4%22%20width=%224%22%20height=%2218.2%22%20fill=%22url%28%23r%29%22/%3E%3Crect%20x=%2210%22%20y=%2219.4%22%20width=%22.8%22%20height=%2218.2%22%20fill=%22%23C98A55%22%20fill-opacity=%22.4%22/%3E%3Crect%20x=%2211.7%22%20y=%2217%22%20width=%22.6%22%20height=%222.5%22%20fill=%22%232E1A0E%22/%3E%3Cpath%20fill=%22url%28%23g%29%22%20d=%22M3.4%2017.2C2.6%2014.8%203.2%2012.4%205.4%2011.6%205.3%209.4%207%207.6%209.2%208.2%209.7%205.6%2012.4%204.4%2014.4%205.8%2016.3%204.9%2018.5%206.4%2018.4%208.6%2020.4%209.1%2021.5%2011.2%2020.7%2013.3%2021.7%2014.8%2021.4%2016.4%2020.6%2017.2H3.4z%22/%3E%3Cpath%20fill=%22none%22%20stroke=%22%238A560C%22%20stroke-opacity=%22.5%22%20stroke-width=%22.7%22%20stroke-linecap=%22round%22%20d=%22M6%2016.2c.2-2.4%201-4.3%202.4-5.6M9.6%2016.4c-.1-3%20.6-5.4%202-7.2M13.6%2016.4c.2-3.2-.2-5.8-1-7.9M17.4%2016.2c.3-2.6-.2-4.8-1.4-6.4%22/%3E%3Cpath%20fill=%22%23fff%22%20fill-opacity=%22.4%22%20d=%22M10.6%209.2c.5-1.7%201.8-2.8%203.4-3-.7%201-1.1%202.3-1.2%203.8-.7-.4-1.5-.7-2.2-.8z%22/%3E%3C/svg%3E") no-repeat center/contain}
.award-main p{margin:0}
.award-main__lead{font-size:var(--fs-small);color:var(--slate);margin:0 0 .25rem!important}
.award-main__who{font-size:var(--fs-md);line-height:1.35}
.award-main__who strong{color:#15181C}
.frame-type-html .award-main p{color:inherit}
/* «Das Festival in Zahlen» steht oben, ohne Punkt und Linie der Zeitachse (Sandro 4.9.2026) */
.timeline .frame-type-html{border-left-color:transparent;padding-left:0}
.timeline .frame-type-html::before{display:none}
.timeline li{position:relative;padding-left:1.4rem}
.timeline li::before{content:"";position:absolute;left:0;top:.55em;width:.55em;height:.55em;
  border-radius:52% 48% 60% 40%/60% 55% 45% 40%;background:var(--gold)}

/* Register (Über uns): die Felder unter der Leiste */
.vtfm-tabpanel{padding-top:1.8rem}
.tab-content.hidden{display:none}

/* Raster für Personen im Register */
.people .frame{margin:0}

/* Onepager-Abschnitte: der Sprungabstand unter dem festen Kopf */
section[id]{scroll-margin-top:6rem}

/* Lange Wörter dürfen keine Spalte sprengen (z.B. «Vereinsadministration») */
h1,h2,h3,h4,.display,.element-header{overflow-wrap:break-word}
/* Anschriften nebeneinander: die Spaltentitel sind klein */
.contact .frame-header .element-header{font-family:Karla,system-ui,sans-serif;font-size:var(--fs-label);
  font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--stone);
  font-variation-settings:normal}
:is(.paper,.frame-paper) .contact .frame-header .element-header{color:var(--slate)}
.contact .frame-type-text{max-width:none}
.contact .frame-type-text p{margin:0;line-height:1.55}
.contact .frame{margin:0}
/* Personenraster: der Name steht im Element, die Kopfzeile bleibt klein */
.people .frame-header .element-header{font-size:var(--fs-md)}

/* Inhaltselemente von TYPO3 bringen die Seitenbreite über diese Regel mit —
   eigene Elemente (Bühne, Fenster, Mosaik) bleiben randlos. */
main > .frame,main > section > .frame{
  max-width:var(--maxw);margin-left:auto;margin-right:auto;
  padding-left:clamp(1.25rem,4vw,3rem);padding-right:clamp(1.25rem,4vw,3rem)}
main > .frame + .frame,main > section > .frame + .frame{margin-top:2.6rem}
/* Der Auszug auf der Startseite zeigt die Zeile, nicht den ganzen Text */
.bill--excerpt .bill__desc,.bill--excerpt .bill__links,.bill--excerpt .bill__credits{display:none}

/* «Spielt in Meiringen»: die Gruppen des Jahrgangs, zweispaltig ab Tablet */
.groups{list-style:none;margin:0;padding:0;
  display:grid;gap:0 3rem;grid-template-columns:repeat(auto-fit,minmax(20rem,1fr))}
.group{display:flex;flex-wrap:wrap;gap:.2rem .9rem;align-items:baseline;
  padding:.9rem 0;border-top:1px solid var(--line)}
:is(.paper,.frame-paper) .group{border-top-color:#DED8D0}
.group__name{font-size:var(--fs-md);font-weight:600}
.group__play{font-size:var(--fs-small);color:var(--stone)}
:is(.paper,.frame-paper) .group__play{color:var(--slate)}

/* Lange E-Mail-Adressen dürfen die Kachel nicht sprengen */
.person__contact,.person__contact a{overflow-wrap:anywhere}
/* Registerfelder: Abstand unter der Leiste */
[data-vtfm-tabs]{padding-top:.4rem}

/* Der Verweis im Fenster steht auf dunklem Grund — dort trägt Rot den
   helleren Ton (5.2:1 statt 3.3:1). */
.window .more{color:var(--red-lite)}

/* ---------------------------------------------------------------- Helle Bänder */
/* Der Entwurf wechselt zwischen dunklem Saal und hellem Papier. Welche
   Abschnitte hell sind, entscheidet die Redaktion je Inhaltselement über das
   Feld «Rahmen» (Erscheinungsbild → Rahmen: «Heller Grund»).
   Ein helles Band läuft über die volle Breite, sein Inhalt bleibt in der Spalte. */
.frame-paper{
  max-width:none !important;background:var(--paper);color:#15181C;
  padding-top:clamp(3.5rem,7vw,6rem) !important;
  padding-bottom:clamp(3.5rem,7vw,6rem) !important;
  padding-left:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  padding-right:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  margin:0 !important}
.frame-paper + .frame-paper{padding-top:0 !important}
/* Ein eigenes Element (Content Block) bringt seine Spalte selbst mit — im hellen
   Band darf sie nicht ein zweites Mal eingezogen werden. */
.frame-paper > .wrap{max-width:none;padding-left:0;padding-right:0}
.frame-paper .sechead a{color:var(--red)}

/* ============================================================================
   Papier ist der Grund, der Saal die Ausnahme.
   Der Seiteninhalt steht auf Papier (main.paper). Ein Abschnitt kann dunkel
   werden — Erscheinungsbild → Rahmen → «Dunkler Grund (Saal)». Die doppelte
   Klasse verschafft dem Saal Vorrang vor den Papierregeln.
   ============================================================================ */
.frame-ink{
  max-width:none !important;background:var(--ink);color:var(--paper);
  padding-top:clamp(3.5rem,7vw,6rem) !important;
  padding-bottom:clamp(3.5rem,7vw,6rem) !important;
  padding-left:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  padding-right:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  margin:0 !important}
.frame-ink + .frame-ink{padding-top:0 !important}
.frame-ink > .wrap{max-width:none;padding-left:0;padding-right:0}

.frame-ink.frame-ink .meta{color:var(--stone)}
.frame-ink.frame-ink .meta--red{color:var(--red-lite)}
.frame-ink.frame-ink .sechead{border-bottom-color:var(--line)}
.frame-ink.frame-ink .sechead a{color:var(--red-lite)}
.frame-ink.frame-ink .lead{color:var(--stone)}
.frame-ink.frame-ink .bill,.frame-ink.frame-ink .bill__row,
.frame-ink.frame-ink .group,.frame-ink.frame-ink .press,
.frame-ink.frame-ink .press__row,.frame-ink.frame-ink .band{border-color:var(--line)}
.frame-ink.frame-ink .bill__row:hover{background:rgba(255,255,255,.03)}
.frame-ink.frame-ink .bill__group,.frame-ink.frame-ink .bill__credits span,
.frame-ink.frame-ink .group__play{color:var(--stone)}
.frame-ink.frame-ink .bill__credits b{color:var(--paper)}
.frame-ink.frame-ink .tag{border-color:var(--line)}
.frame-ink.frame-ink .tag--gold{border-color:var(--gold);color:var(--gold);background:none}
.frame-ink.frame-ink .subnav{border-bottom-color:var(--line)}
.frame-ink.frame-ink .subnav a,.frame-ink.frame-ink .subnav button{border-color:var(--line)}
.frame-ink.frame-ink .frame-header .element-header,
.frame-ink.frame-ink .frame-type-text :is(h1,h2,h3,h4),
.frame-ink.frame-ink .frame-type-text strong{color:var(--paper)}
.frame-ink.frame-ink .frame-type-text p,.frame-ink.frame-ink .frame-type-text ul,
.frame-ink.frame-ink .caption{color:var(--stone)}
.frame-ink.frame-ink .frame-type-text a,.frame-ink.frame-ink .vtfm-rte a,
.frame-ink.frame-ink [class*="text-red-600"]{color:var(--red-lite) !important}
.frame-ink.frame-ink .contact{background:var(--line)}
.frame-ink.frame-ink .contact > div{background:var(--ink)}
.frame-ink.frame-ink .band__name{color:var(--stone)}

/* Die Fenster bleiben dunkle Kacheln — sie sind der Kontrapunkt auf dem Papier */
.windows{background:var(--ink-3)}

/* Fuss: alle vier Spalten beginnen auf derselben Linie. Die Inhaltsspalten
   bringen den Rahmen von fluid_styled_content mit, die Kanäle nicht — darum
   werden die Abstände hier gleichgezogen. */
.foot__grid > *{margin:0}
.foot__grid > * > :first-child,
.foot__grid .frame-header{margin-top:0}
.foot .frame,.foot .frame-container,.foot .frame-inner{margin:0;padding:0}
.foot .frame + .frame{margin-top:0}
.foot__grid .meta{margin:0 0 .6rem;line-height:1.3;min-height:1.3em}
.foot .social{margin-top:0}

/* Der Grund ist Papier — die dunklen Teile der Seite müssen ihre helle Schrift
   darum ausdrücklich setzen; geerbt wird sie nicht mehr. */
.nav{color:var(--paper)}
.nav__lang a{color:var(--stone)}
.stage,.stage h1,.stage h2,.stage .display,.stage .dates{color:var(--paper)}
.stage .lead{color:#EDE6DF}
.foot{color:var(--stone)}
/* Die Spaltentitel im Fuss stehen auf derselben Stufe wie «Folgen» — sie sind
   Überschriften, nicht Nebentext, und tragen darum Papierweiss. */
.foot .meta{color:var(--stone)}
.foot .frame-header .element-header,.foot__social .meta{color:var(--paper)}
.foot .adr span,.foot .frame-type-text p{color:var(--stone)}
.foot strong,.foot b{color:var(--paper)}
.windows,.window{color:var(--paper)}
.window__body .meta{color:var(--stone)}
/* Fünf Spalten im Fuss (vier Inhaltsspalten plus die Kanäle) sollen in eine Zeile */
.foot__grid{grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));gap:2rem}

/* Navigation: lesbarere Grössen. Die Klappmenüs waren deutlich kleiner als die
   Hauptzeile, die Sprachwahl kaum lesbar. */
.nav__drop a{font-size:var(--fs-body);padding:.62rem 1.2rem}
.nav__lang{font-size:var(--fs-small);letter-spacing:.1em;gap:1.1rem}
.nav__lang a,.nav__lang .on{padding:.35rem .1rem;min-height:2.2rem;display:inline-flex;align-items:center}
.nav__links > a,.nav__item > a{min-height:2.6rem}
/* Hauptnavigation ab 1024px: mind. 1.2rem (Sandro 2026-09-02); 1.25rem wickelt bei 1024 um, daher erst ab 1280 */
.nav__links{font-size:1rem}                                   /* Desktop-Leiste 801–1023: 17px, sonst Umbruch */
@media (min-width:801px) and (max-width:949px){.nav__links{gap:.9rem}.nav__logo{height:118px;margin:-18px 0}.nav__in{gap:1.4rem}}
@media (max-width:800px){.nav__links{font-size:var(--fs-body)}}  /* Klappmenü: Fliesstextgrösse */
@media (min-width:1024px){.nav__links{font-size:1.2rem;gap:1.6rem}}
@media (min-width:1280px){.nav__links{font-size:1.25rem}}
/* Das Save-the-Date-Band ist eine Ansage, keine Fussnote */
.vtfm-banner{font-size:var(--fs-body);padding:.75rem 1rem;letter-spacing:.01em}

/* ---------------------------------------------------------------- Spieltag */
/* Ein rotes Band: beim Scrollen sieht man sofort, wo ein neuer Tag beginnt. */
.bill__day{display:block;background:var(--red);color:#fff;margin:0;
  padding:.7rem clamp(1rem,2vw,1.4rem);border:0}
/* Luft NUR zwischen zwei Tagen — der erste SICHTBARE Balken steht buendig auf der
   Oberkante von .bill, sonst haengt deren 1px-Linie frei in der Luft.
   Nicht ueber :first-child loesen: die Filterleiste blendet die Balken davor mit
   display:none aus. Das nimmt sie aus dem Layout, aber NICHT aus der
   Geschwisterfolge — :first-child bliebe der ausgeblendete Balken. Der
   Geschwister-Selektor fragt genau das Richtige: steht vor mir ein sichtbarer
   Tagesbalken? (Befund «Kurse» vom 2026-09-01: dort beginnt der erste Kurs am
   zweiten Tag, darum war nur dieser Filter betroffen.) */
.bill__day:not(.hidden) ~ .bill__day{margin-top:2.4rem}
.bill__day .d{font-family:Fraunces,Georgia,serif;font-size:var(--fs-lg);font-weight:600;
  letter-spacing:.01em;color:#fff}
.bill__day .meta{color:rgba(255,255,255,.82)}

/* ---------------------------------------------------------------- Angaben */
/* Beschriftung und Wert als Paare statt einer Kette aus Wörtern. */
.credits{display:grid;grid-template-columns:7.5rem 1fr;gap:.3rem 1.2rem;margin:.9rem 0 0}
.credits dt{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);align-self:baseline}
.credits dd{margin:0;font-size:var(--fs-body)}
.frame-ink.frame-ink .credits dt{color:var(--stone)}
@media (max-width:600px){.credits{grid-template-columns:1fr;gap:0}
  .credits dd{margin-bottom:.5rem}}

/* ---------------------------------------------------------------- Kursleitung */
.bill__leaders{aspect-ratio:auto;background:none;display:flex;flex-wrap:wrap;gap:1rem;
  align-content:flex-start}
.bill__leaders figure{margin:0;text-align:center;width:6.5rem}
.bill__leaders img{width:6.5rem;height:6.5rem;border-radius:50%;object-fit:cover}
.bill__leaders figcaption{font-size:var(--fs-small);color:var(--slate);margin-top:.4rem;line-height:1.3}
.frame-ink.frame-ink .bill__leaders figcaption{color:var(--stone)}

/* ---------------------------------------------------------------- Filterknopf */
/* Ausgewählt und darübergefahren: weiss auf Rot, nicht rot auf rot. */
.subnav .on:hover,
:is(.paper,.frame-paper) .subnav .on:hover,
:is(.paper,.frame-paper) .subnav button.on:hover{color:#fff}

/* ---------------------------------------------------------------- Sponsoren */
/* Die Logos sind die Botschaft — sie bekommen Platz und Grösse. */
.band{padding:2.6rem 0}
.band__logos{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));gap:2.6rem 3rem}
.band__logos img{max-height:96px;max-width:100%;object-fit:contain}
.band--small .band__logos{grid-template-columns:repeat(auto-fit,minmax(10rem,1fr))}
.band--small .band__logos img{max-height:64px}
.logos{grid-template-columns:repeat(4,1fr);gap:3rem}
.logos img{max-height:96px}
@media (max-width:800px){.logos{grid-template-columns:repeat(2,1fr)}}

/* Die Kanäle stehen unter der Vereinsadresse, nicht als fünfte Spalte */
.foot__grid{grid-template-columns:repeat(auto-fit,minmax(13rem,1fr))}
.foot__social{grid-column:1;grid-row:2;margin-top:1.6rem}
@media (max-width:900px){.foot__social{grid-column:auto;grid-row:auto;margin-top:0}}
.foot .maplink{margin-top:.5rem}
.foot .maplink a{border-bottom:1px solid rgba(255,255,255,.25)}

/* Ein rotes Band — für Abschnitte, die auffallen sollen (Gönner) */
.frame-red{
  max-width:none !important;background:var(--red);color:#fff;
  padding-top:clamp(3rem,6vw,4.5rem) !important;padding-bottom:clamp(3rem,6vw,4.5rem) !important;
  padding-left:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  padding-right:max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) !important;
  margin:0 !important}
.frame-red > .wrap{max-width:none;padding-left:0;padding-right:0}
.frame-red.frame-red .band{border-top-color:rgba(255,255,255,.3)}
.frame-red.frame-red .band__head .t,.frame-red.frame-red .band__name,
.frame-red.frame-red .frame-header .element-header{color:#fff}
.frame-red.frame-red .band__name{opacity:.92}

/* Ansprechpersonen als Kasten, gleich oben auf der Medienseite */
.frame-box{border:1px solid #DED8D0;background:#fff;padding:1.9rem 1.9rem 1.7rem;max-width:var(--maxw);
  margin-left:auto;margin-right:auto}
/* Kontaktkarte: eine Rangfolge statt drei gleicher Zeilen. Titel gross, darunter
   die Person, darunter — durch eine Haarlinie abgesetzt — die Wege zu ihr, eng
   gesetzt. Vorher trugen Name, Telefon und Mail dieselbe Groesse und denselben
   Abstand; die Karte zerfiel in drei gleichwertige Zeilen (Befund Sandro,
   2026-09-01). */
.frame-box .frame-header{margin-bottom:1.15rem}
.frame-box .frame-header .element-header{font-family:Fraunces,Georgia,serif;
  font-size:var(--fs-xl);line-height:1.15;font-weight:600}
.frame-box .frame-inner > p{margin:0}
.frame-box .frame-inner > p ~ p{margin-top:.35rem;font-size:var(--fs-small)}
.frame-box .frame-inner p,.frame-box .frame-inner a{overflow-wrap:anywhere}  /* lange E-Mail-Adresse darf umbrechen, sonst läuft sie rechts aus der Karte (Befund Sandro 3.9.2026) */
.frame-box .frame-inner > p:first-of-type{font-size:var(--fs-md);font-weight:500;color:#15181C;
  margin-bottom:.7rem;padding-bottom:1rem;border-bottom:1px solid #EDE9E4}
.frame-box .frame-inner > p:first-of-type + p{margin-top:0}
@media (min-width:900px){.frame-box{max-width:calc(var(--maxw) * .46);margin-left:auto;margin-right:0}}

/* Powermail bringt Bootstrap-Klassen mit — sie werden hier eingepasst. */
.powermail_form .control-label,.powermail_form label.control-label{
  display:block;width:auto;float:none;text-align:left;padding:0;
  font-size:var(--fs-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--slate);margin-bottom:.4rem}
.powermail_form .col-sm-2,.powermail_form .col-sm-10,.powermail_form .col-sm-12{
  width:auto;float:none;padding:0}
.powermail_form .form-group,.powermail_form .powermail_fieldwrap{margin-bottom:1.3rem}
fieldset,.powermail_fieldset{min-width:0}
.powermail_form .form-control{width:100%;padding:.8rem .9rem;border:1px solid #CFC8C0;
  background:#fff;color:#15181C;font:inherit;font-size:var(--fs-body);border-radius:2px}
.powermail_form .btn,.powermail_form input[type=submit]{
  display:inline-block;font-weight:700;font-size:var(--fs-body);padding:.95rem 1.6rem;
  border:0;border-radius:2px;background:var(--red);color:#fff;cursor:pointer;
  max-width:100%;white-space:normal}
@media (max-width:480px){.powermail_form .btn,.powermail_form input[type=submit]{padding:.9rem 1.1rem}}
.powermail_form .btn:hover{background:var(--red-deep)}
.powermail_form fieldset{border:0;padding:0;margin:2.6rem 0 0}
.powermail_form legend{font-family:Fraunces,Georgia,serif;font-size:var(--fs-lg);font-weight:600;
  color:#15181C;padding:0;margin-bottom:1.2rem;width:auto}
/* Nur die Beschriftung NEBEN dem Ankreuzfeld ist Fliesstext — die Überschrift der
   Gruppe bleibt versal wie jede andere Feldbeschriftung. */
.powermail_form .powermail_fieldwrap_type_check .form-check-label,
.powermail_form .powermail_fieldwrap_type_radio .form-check-label{text-transform:none;letter-spacing:0;
  font-size:var(--fs-body);font-weight:400;color:inherit}

/* Zwei Spalten: Bilder und Text nebeneinander (Anmeldung, Prämierung, Festival) */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:3rem;align-items:center}
.duo--flip .duo__media{order:2}
.duo__media .vtfm-slideshow{position:relative;overflow:hidden;background:var(--paper-2)}
.duo__media .vtfm-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity 1s ease-in-out}
.duo__media .vtfm-slide:first-child{opacity:1}
.duo__head{max-width:66.666%;margin:0 0 1.4rem}   /* Titel über zwei Drittel der Breite, oberhalb des Bild-Text-Paars (Sandro 4.9.2026) */
.duo__head h2.display{margin:0 0 .3rem}   /* Originalgrösse: Titel läuft über zwei Drittel der Breite (Sandro 4.9.2026) */
.duo__head .meta{margin:0}
@media (max-width:800px){.duo__head{max-width:none}}
.wrap > .wrap{padding-left:0;padding-right:0}   /* doppelt gewickelt (Abschnitt + Element): kein zweiter Seitenrand, sonst rückt der erste Startseiten-Block ein */
.duo__text .vtfm-rte p{margin:0 0 .9rem}
.duo__download{margin:.6rem 0 0;font-size:var(--fs-small)}
.duo__download a{color:var(--red);text-decoration:none;border-bottom:1px solid currentColor}
.frame-ink.frame-ink .duo__download a{color:var(--red-lite)}
@media (max-width:800px){.duo{grid-template-columns:1fr;gap:1.6rem}.duo--flip .duo__media{order:0}}

/* ---------------------------------------------------------------- Mitgliedschaft */
.join{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:3rem;align-items:start;
  margin-top:2.4rem}
.join__reasons .meta{margin:0}
.join__reasons h2.display{margin:.3rem 0 1.6rem}
.benefits{display:grid;gap:0;border-top:1px solid #DED8D0}
.benefit{display:grid;grid-template-columns:2.6rem 1fr;gap:1rem;padding:1.05rem 0;
  border-bottom:1px solid #DED8D0;align-items:start}
.benefit .no{font-family:Fraunces,Georgia,serif;font-size:var(--fs-md);color:var(--gold-ink);
  font-variant-numeric:tabular-nums}
.benefit b{display:block;font-weight:700;margin-bottom:.15rem}
.benefit span{color:var(--slate);font-size:var(--fs-body)}
.joincard{border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(224,169,62,.12),rgba(224,169,62,.03));padding:2rem 1.9rem}
.joincard .meta{color:var(--gold-ink);margin:0}
.joincard .price{font-family:Fraunces,Georgia,serif;font-size:var(--fs-price);font-weight:700;line-height:1;
  margin:.35rem 0 .1rem}
.joincard__note{color:var(--slate);margin:.2rem 0 0;font-size:var(--fs-small)}
.joincard ul{margin:1.2rem 0 0;padding-left:1.1rem;color:var(--slate);font-size:var(--fs-body)}
.joincard li{margin-bottom:.35rem}
.joincard__fine{font-size:var(--fs-small);color:var(--slate);margin:1rem 0 0}
.joindocs{margin-top:1.5rem;border:1px solid #DED8D0;padding:1.4rem 1.5rem}
.joindocs .meta{margin:0 0 .5rem}
.joindocs p{margin:.35rem 0 0}
.joindocs a{color:var(--red);font-weight:700;text-decoration:none}
.joindocs a:hover{color:var(--red-deep)}
.frame-ink.frame-ink .benefits,.frame-ink.frame-ink .benefit{border-color:var(--line)}
.frame-ink.frame-ink .benefit span,.frame-ink.frame-ink .joincard__note{color:var(--stone)}
@media (max-width:820px){.join{grid-template-columns:1fr;gap:2.2rem}}

/* Beitragsstufen: in der rechten Spalte untereinander, neben den Gründen */
.join__side{display:grid;gap:1.2rem;align-content:start}
.option{border:1px solid var(--gold);
  background:linear-gradient(180deg,rgba(224,169,62,.12),rgba(224,169,62,.03));padding:1.8rem 1.7rem}
.option .meta{color:var(--gold-ink);margin:0}
.option .price{font-family:Fraunces,Georgia,serif;font-size:var(--fs-price);font-weight:700;line-height:1;
  margin:.35rem 0 .25rem}
.option__who{font-weight:700;margin:0}
.option__note{color:var(--slate);font-size:var(--fs-small);margin:.2rem 0 0}
.join__action{margin:.4rem 0 0}
.join__action .joincard__fine{margin:.7rem 0 0}
.option__link{margin:.7rem 0 0;font-size:var(--fs-body)}
.option__link a{color:var(--red);font-weight:700;text-decoration:none}
.option__link a:hover{color:var(--red-deep)}
.joindocs{margin-top:.4rem}
/* 2026-09-01: Das spaetere Nachjustieren der Spaltenverhaeltnisse stand HINTER der
   820px-Regel und hob deren einspaltigen Umbruch an jeder Breite wieder auf — auf dem
   Handy liefen die Beitragskarten deshalb aus dem Bild (451px bei 390px Fenster).
   Verhaeltnis und Abstand sind in die Grundregel gewandert; hier steht nichts mehr. */
.frame-ink.frame-ink .option__note{color:var(--stone)}

/* Die dritte Karte ist kein Beitrag, sondern ein Angebot: gleiche Bauform,
   ruhigerer Ton — Gold gehört den Mitgliedsstufen. */


/* --------------------------------------------------------------- Kopf dunkel */
/* Der Kopf steht wieder im dunklen Saalton. Auf Papier verschwand er: sobald das
   SAVE-THE-DATE-Band aus ist, sass helle Navigation direkt auf hellem Seiteninhalt
   und es gab keine Kante mehr (Befund Sandro, 2026-09-01). Dunkel trennt immer —
   ohne dass es dafür ein Band braucht.
   Zwei Toene, damit die schmale Sprachzeile als eigene Zeile lesbar bleibt:
   die Zeile oben tiefer als der Hauptbalken. Das Logo traegt dafür wieder seine
   weisse Variante (vtfm-logo-no-year.svg statt ...-hell.svg).
   Der Ton ist der des urspruenglichen Kopfs: Tailwind gray-800 #1F2937, die Zeile
   oben gray-900 #111827, die Ausklapper gray-700 #374151 — kuehle Graus mit
   deutlichem Blaustich, nicht das neutrale Anthrazit des Saals. */
.nav{background:rgba(31,41,55,.94);color:var(--paper);border-bottom:1px solid #374151}
.nav__top{background:#111827;color:var(--stone);border-bottom:0}
.nav__top .nav__lang a{color:var(--stone)}
.nav__top .nav__lang a:hover{color:var(--paper)}
.nav__top .nav__lang .on{color:var(--paper);border-bottom-color:var(--red)}
.nav__links > a,.nav__item > a{color:var(--paper)}
.nav__links > a:hover,.nav__item > a:hover{border-bottom-color:var(--red);color:var(--red-lite)}
.nav__links > a.on,.nav__item > a.on{border-bottom-color:var(--red)}
.nav__burger span{background:var(--paper)}
.nav__drop{background:#374151;border-color:#4B5563}
.nav__drop a{color:var(--paper)}
.nav__drop a:hover{background:rgba(255,255,255,.07);color:var(--red-lite)}
@media (max-width:800px){
  .nav__links{background:#374151;border-bottom-color:#4B5563}
  .nav__drop{background:transparent}
}

/* Gönnerband: Titel, Trennlinie, dann die Namen — gross genug zum Lesen.
   Wer kein Logo hat, ist deswegen nicht kleiner. */
.band__head{display:block;margin-bottom:0;padding-bottom:.9rem;
  border-bottom:1px solid rgba(255,255,255,.35)}
.frame-red.frame-red .band__head{border-bottom-color:rgba(255,255,255,.45)}
.band__head .t{font-size:var(--fs-xl)}
.band__logos{margin-top:1.8rem}
.band__name{font-size:var(--fs-md);line-height:1.35;display:block;text-align:center}
.frame-red.frame-red .band__name{color:#fff;opacity:1}
.frame-red.frame-red .band__logos{grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1.6rem 2.4rem}

/* Der Hinweis aufs Sponsoring steht unter allem und trägt kein Gold —
   er ist kein Beitrag, sondern ein Weg weiter. */
.option--banner{border-color:#DED8D0;background:#F6F3EF;margin-top:.6rem}
.option--banner .meta{color:var(--slate)}
.option--banner .price{font-size:var(--fs-d4)}
.option--wide{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1rem 2.5rem;align-items:center;margin:.5rem 0 2.5rem}
.option--wide .option__note{max-width:46rem}
@media (max-width:640px){.option--wide{grid-template-columns:1fr}}
/* Im roten Band trennt nur die Linie unter dem Titel — keine zweite darüber */
.frame-red.frame-red .band{border-top:0;padding-top:0}

/* Medienseite: der Kasten mit den Ansprechpersonen nimmt ein Viertel, die
   Einleitung fliesst auf den restlichen drei Vierteln daneben. */
@media (min-width:900px){
  /* Der Kasten schwimmt rechts in der Spalte — die Seitenränder der Spalte
     bringt er selbst mit, sonst stünde er am Fensterrand. */
  main > section > .frame-box{
    float:right;width:min(22rem,30%);max-width:none;
    margin:0 max(clamp(1.25rem,4vw,3rem),calc((100% - var(--maxw))/2 + clamp(1.25rem,4vw,3rem))) 1.6rem 2.5rem;
    padding-left:1.6rem;padding-right:1.6rem}
}
@media (max-width:899px){.frame-box{float:none;width:auto;margin:0 auto 1.6rem}}

/* Medienmitteilungen: Datum und Titel als Zeile, wie ein Verzeichnis */
.tab-content .frame-type-text p .dt{display:inline-block;min-width:6.5rem;
  font-variant-numeric:tabular-nums;color:var(--slate)}
.tab-content .frame-type-text p{margin:0;padding:.7rem 0;border-top:1px solid #DED8D0}
.tab-content .frame-type-text p:first-child{border-top:0}

/* Abschnitte innerhalb einer Sektion brauchen Luft: eigene Elemente bringen
   ihre Spalte als .wrap mit und standen bisher ohne Abstand aufeinander. */
main > section > .wrap{margin-top:clamp(3rem,5vw,4.5rem)}
main > section > .wrap:first-child,
main > section > .wrap:first-of-type{margin-top:0}
main > section > .frame + .wrap{margin-top:clamp(3rem,5vw,4.5rem)}

/* Dasselbe für die Startseite: dort hängen die Blöcke direkt unter <main>.
   Was zusammengehört (Titel und Fensterreihe, Band und sein Verweis) bleibt
   eng, zwischen den Abschnitten steht dieselbe Luft wie sonst. */
main > .wrap + .wrap,
main > .frame + .wrap,
main > .windows + .wrap,
main > .windows + .frame{margin-top:clamp(3rem,5vw,4.5rem)}
main > .wrap + .windows{margin-top:0}

/* ---------------------------------------------------------------------------
   Tailwind-Reste im HTML-Element «Die Prämierungen» (tt_content 262 + 4
   Übersetzungen, Seite Medien): text-3xl/2xl/xl brachten 30/24/20 px mit,
   quer zur Skala. Sie werden auf die nächstliegende Stufe gesetzt — etwas
   kleiner und wieder im Verhältnis zum Rest der Seite.
   --------------------------------------------------------------------------- */
main .text-3xl{font-size:var(--fs-xl)}
main .text-2xl{font-size:var(--fs-lg)}
main .text-xl{font-size:var(--fs-md)}


/* ------------------------------------------------------- Kopf des Registerwerks */
/* Seitentitel, Vorspann und Registerleiste bilden einen Block. Der h1 sass bisher
   ohne jeden Abstand unter dem SAVE-THE-DATE-Band, weil der Inhalt der Sammelseite
   als nackter .frame direkt in <main> lag — die grosszuegige section-Polsterung
   griff dort nicht (Befund Sandro, 2026-09-01). */
.hubhead{padding-bottom:0}
/* Die Leiste steht naeher am Vorspann als eine eigene Sektion. Beide Selektoren
   sind noetig: die Leiste folgt auf den Vorspann-.frame, und dafuer gibt es weiter
   oben die Regel `main > section > .frame + .wrap` mit Spezifitaet (0,2,2) — ein
   blosses `.hubhead > .wrap` (0,2,0) verliert dagegen. */
.hubhead > .wrap,
.hubhead > .frame + .wrap{margin-top:clamp(1.6rem,3vw,2.4rem)}
/* Und das gezeigte Register haengt an der Leiste, nicht einen ganzen Abschnitt tiefer. */
.hubhead + section{padding-top:clamp(1.8rem,3.5vw,2.8rem)}


/* ------------------------------------------------- Kopf: Vorspann 3/4, Karte 1/4 */
/* Die Kontaktkarte steht auf derselben Hoehe wie der Titelabsatz — dafuer liegt sie
   im Seiteninhalt VOR ihm (Sortierung), damit der Text um sie herum fliesst.
   Die Registerleiste raeumt den Umfluss ab und nimmt die volle Breite; ohne clear
   wurde sie vom Umfluss auf 629 statt 1216 px gedrueckt. */
.hubhead > .wrap{clear:both}
/* Die dritte Ebene (Jahre) haengt an ihrer Ueberschrift, nicht einen ganzen
   Abschnitt tiefer: 72 px waren zu viel. */
main > section > .wrap:has(> [data-vtfm-tabs]){margin-top:clamp(.8rem,1.6vw,1.2rem)}
/* ...und die Ueberschrift darueber haelt ihren Abstand kuerzer, wenn direkt eine
   Registerleiste folgt: 42 px Untermarge plus 27 px Obermarge waren zusammen zu viel. */
main > section:has(> .wrap > [data-vtfm-tabs]) .sechead{margin-bottom:1.1rem}

/* ------------------------------------------------------------ Sponsorenbaender */
/* Jedes Band bringt seine eigene Polsterung UND seine Haarlinie mit; die 72 px
   Marge zwischen den .wrap-Huellen kamen obendrauf. Zwischen zwei Baendern
   trennt die Linie, nicht der Leerraum (Befund Sandro, 2026-09-01). */
main > section > .wrap:has(> .band) + .wrap:has(> .band){margin-top:0}
main > section > .wrap:has(> .band) > .band{padding-top:1.9rem;padding-bottom:1.9rem}


/* Die Jahresleiste braucht keine eigene Unterkante: die Ueberschrift darueber hat
   schon eine, und die Liste darunter bringt ihre Zeilenlinien mit. Zwei Striche um
   vier Knoepfe herum waren einer zu viel (Befund Sandro, 2026-09-01). */
[data-vtfm-tabs] > .subnav{border-bottom:0}

/* Das Festival in Zahlen — Balkengrafiken (Geschichte) */
.vtfm-stats.is-rendered .vtfm-stats__fallback{display:none}
.vtfm-stats__grid{display:grid;grid-template-columns:1fr;gap:1.6rem;margin:1rem 0 .5rem}
@media (min-width:700px){.vtfm-stats__grid{grid-template-columns:1fr 1fr}.vtfm-stats__card:first-child{grid-column:1 / -1}}
.vtfm-stats__card{margin:0;background:#fff;border:1px solid #DED8D0;padding:1.2rem 1.2rem .9rem}
.vtfm-stats__svg{display:block;width:100%;height:auto;font-family:Karla,system-ui,sans-serif}
.vtfm-stats__bar rect{fill:var(--red);transition:fill .2s}
.vtfm-stats__bar.is-approx rect{fill:#E8556C}
.vtfm-stats__bar:hover rect,.vtfm-stats__bar:focus rect{fill:var(--red-deep)}
.vtfm-stats__bar:focus{outline:none}
.vtfm-stats__val{font-size:15px;font-weight:700;fill:#15181C}
.vtfm-stats__year{font-size:13px;fill:#5F656C;letter-spacing:.04em}
.vtfm-stats__year.is-empty{fill:#B8B2AA}
.vtfm-stats__none{fill:#C9C3BB}
.vtfm-stats__card figcaption{margin-top:.6rem;font-size:var(--fs-small);color:var(--slate);line-height:1.4}
.vtfm-stats__card figcaption strong{color:#15181C;font-size:var(--fs-md);font-family:Fraunces,Georgia,serif;font-weight:600;margin-right:.4rem}
.vtfm-stats__card figcaption small{display:block;font-size:var(--fs-small);margin-top:.25rem}

/* ---- Sponsorenband: Logo mit Untertitel, Tooltip vom Bildtitel (6.9.2026) ----
   Der Untertitel ist der Text des Sponsoren-Elements («Theateraufzeichnungen»,
   «Übernachtungs-Partner»); die Bänder der Sponsorenseite stehen alphabetisch,
   nur das Band der Startseite mischt. */
.band__logos{align-items:start}
.band__item{display:flex;flex-direction:column;align-items:center;gap:.9rem;text-align:center}
/* Der Logo-Kasten ist so hoch wie das grösste Logo (96/64 px, siehe oben) —
   der Untertitel steht darunter, nie auf dem Logo. Beim Berühren hebt sich
   nur das Logo leicht, nichts wird blass. */
.band__logo{display:flex;align-items:center;justify-content:center;height:96px;width:100%;transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.band--small .band__logo{height:64px}
.band__logo img{display:block}
a.band__logo:hover img,a.band__logo:focus-visible img{transform:translateY(-2px)}
.band__logo img{transition:transform .35s cubic-bezier(.2,.6,.2,1)}
.band__caption{font-size:var(--fs-label);color:var(--stone);line-height:1.3;max-width:14rem;padding-top:.1rem}
:is(.paper,.frame-paper) .band__caption{color:var(--slate)}
.band--small .band__caption,.band--large_sm .band__caption{font-size:var(--fs-micro)}
.band__caption a{color:var(--red);text-decoration:none}
.band__caption a:hover{text-decoration:underline}

/* ---- Personen ohne Porträt: der Vorhang bleibt zu (6.9.2026) ----
   Gleiche Fläche wie das Porträt (4:5), gleiche Graustufen, beim Berühren
   kommt wie beim Foto die Farbe — das Rot des Vorhangs. */
.person__curtain{width:100%;aspect-ratio:4/5;background:#15181C url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%20400%20500%22%3E%3Cdefs%3E%3ClinearGradient%20id=%22f%22%20x1=%220%22%20x2=%221%22%20y1=%220%22%20y2=%220%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%236E0B1B%22/%3E%3Cstop%20offset=%22.38%22%20stop-color=%22%23D42A45%22/%3E%3Cstop%20offset=%22.58%22%20stop-color=%22%23B6152F%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%235E0916%22/%3E%3C/linearGradient%3E%3Cpattern%20id=%22p%22%20width=%2244%22%20height=%22500%22%20patternUnits=%22userSpaceOnUse%22%3E%3Crect%20width=%2244%22%20height=%22500%22%20fill=%22url(%23f)%22/%3E%3C/pattern%3E%3ClinearGradient%20id=%22s%22%20x1=%220%22%20x2=%220%22%20y1=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23000%22%20stop-opacity=%22.4%22/%3E%3Cstop%20offset=%22.3%22%20stop-color=%22%23000%22%20stop-opacity=%220%22/%3E%3Cstop%20offset=%22.82%22%20stop-color=%22%23000%22%20stop-opacity=%220%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%23000%22%20stop-opacity=%22.5%22/%3E%3C/linearGradient%3E%3ClinearGradient%20id=%22v%22%20x1=%220%22%20x2=%220%22%20y1=%220%22%20y2=%221%22%3E%3Cstop%20offset=%220%22%20stop-color=%22%23A5122A%22/%3E%3Cstop%20offset=%221%22%20stop-color=%22%236E0B1B%22/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect%20width=%22400%22%20height=%22500%22%20fill=%22%2315181C%22/%3E%3Cpath%20d=%22M0%200H203V484Q160%20498%20112%20486Q56%20474%200%20490Z%22%20fill=%22url(%23p)%22/%3E%3Cpath%20d=%22M197%200H400V490Q344%20474%20288%20486Q240%20498%20197%20484Z%22%20fill=%22url(%23p)%22/%3E%3Crect%20width=%22400%22%20height=%22500%22%20fill=%22url(%23s)%22/%3E%3Crect%20x=%22195%22%20width=%2210%22%20height=%22500%22%20fill=%22%23000%22%20fill-opacity=%22.38%22/%3E%3Cpath%20d=%22M0%200H400V54%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200%20a25%2025%200%200%201%20-50%200Z%22%20fill=%22url(%23v)%22/%3E%3Cpath%20d=%22M0%2054%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%20a25%2025%200%200%200%2050%200%22%20fill=%22none%22%20stroke=%22%23E0A93E%22%20stroke-width=%223%22/%3E%3Crect%20width=%22400%22%20height=%228%22%20fill=%22%23E0A93E%22/%3E%3C/svg%3E") center/cover no-repeat;filter:grayscale(1) contrast(1.04);transition:filter .5s}
.person:hover .person__curtain{filter:grayscale(0)}

/* ---- PDF-Verweise tragen VORNE ein Dokument-mit-Pfeil-Zeichen (6.9.2026, Sandro) ----
   Kein Adobe-Symbol, kein Text; 1.5em, Maske in der Linkfarbe. Vorne als
   ::before-Kasten: der bricht nie allein um und bekommt keine Unterstreichung.
   PDF-Verweise sind NICHT unterstrichen, nur beim Berühren (auch der
   Download-Verweis der Startseite, der sonst eine Unterkante trägt).
   inline-flex: das Zeichen steht als eigene Spalte links, ein mehrzeiliger
   Text bricht daneben um und läuft nie unter das Zeichen. */
a[href$=".pdf" i],a[href*=".pdf?" i]{text-decoration:none;border-bottom:0;display:inline-flex;align-items:flex-start;gap:.45em;max-width:100%;vertical-align:top}
a[href$=".pdf" i]:hover,a[href$=".pdf" i]:focus-visible,a[href*=".pdf?" i]:hover,a[href*=".pdf?" i]:focus-visible{text-decoration:underline;text-underline-offset:.15em;border-bottom:0}
a[href$=".pdf" i]::before,a[href*=".pdf?" i]::before{content:"";display:inline-block;width:1.5em;height:1.5em;flex:none;margin-top:-.05em;background-color:currentColor;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M12 11v7%22/%3E%3Cpath d=%22M9.5 15.5 12 18l2.5-2.5%22/%3E%3C/svg%3E") no-repeat center/contain;mask:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z%22/%3E%3Cpath d=%22M14 3v5h5%22/%3E%3Cpath d=%22M12 11v7%22/%3E%3Cpath d=%22M9.5 15.5 12 18l2.5-2.5%22/%3E%3C/svg%3E") no-repeat center/contain}
a[href$=".pdf" i] .arrow,a[href*=".pdf?" i] .arrow{display:none}

/* ---- Verweise in den Fenstern: sichtbare Rückmeldung beim Berühren (6.9.2026, Sandro) ----
   Der rote Verweistext wird unterstrichen und rückt mit einem Pfeil nach; die
   Farbänderung allein war nicht wahrnehmbar. */
.window .more{text-decoration:none;text-underline-offset:.2em;transition:color .25s}
.window .more::after{content:"\2192";display:inline-block;margin-left:.35em;transition:transform .3s cubic-bezier(.2,.6,.2,1)}
.window:hover .more,.window:focus-visible .more{text-decoration:underline}
.window:hover .more::after,.window:focus-visible .more::after{transform:translateX(.25em)}

/* ---- Medienberichte: Tabelle ohne Rahmen (6.9.2026, Sandro) ----
   Datum | Titel | Medium | Abo/Archiv als Spalten — die Ziffern der Schrift sind
   nicht dicktengleich, in einer Liste standen die Daten ausgefranst. Die Zeile
   ist ein Raster (tr als grid), schmal rücken Medium und Kennzeichen unter den Titel. */
.presse{width:100%;border-collapse:collapse;margin:0 0 1.6rem;font-size:var(--fs-small)}
.presse tr{display:grid;grid-template-columns:6.4rem minmax(0,3fr) minmax(9rem,1.2fr) 5rem;column-gap:1.2rem;align-items:baseline;padding:.4rem 0;border:0;border-bottom:1px solid var(--line)}
.presse a{text-decoration:none}
.presse a:hover,.presse a:focus-visible{text-decoration:underline;text-underline-offset:.15em}
.presse tr:last-child{border-bottom:0}
.presse td{border:0;padding:0;background:none}
.presse__date{white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--slate)}
.presse__medium{color:var(--slate)}
.presse__tag{font-size:var(--fs-micro);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stone);white-space:nowrap}
.presse__tag:empty{display:none}
@media (max-width:700px){
  .presse tr{grid-template-columns:auto minmax(0,1fr);row-gap:.1rem}
  .presse__medium,.presse__tag{grid-column:2;white-space:normal}
}



/* ---- Einblenden beim ersten Sichtbarwerden (16.9.2026, Sandro: «etwas mehr Dynamik») ----
   Nur wenn JS die Klasse vtfm-js gesetzt hat; ohne JS und mit reduzierter
   Bewegung steht alles sofort da. Bilder kommen aus leichter Unschärfe. */
.vtfm-js .rv{opacity:0;transform:translateY(16px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.vtfm-js .rv.in{opacity:1;transform:none}
.vtfm-js .rv-img{opacity:0;transform:scale(1.04);filter:blur(8px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.2,.7,.2,1),filter .9s ease}
.vtfm-js .rv-img.in{opacity:1;transform:none;filter:none}
.vtfm-js .rv .rv-img{transition-delay:.1s}
/* Kopfbild: langsame Ken-Burns-Fahrt auf dem sichtbaren Bild (M11, freigegeben 1.9.2026) */
.stage{overflow:hidden}
@media (prefers-reduced-motion:no-preference){
  .stage img.bg.is-in{animation:vtfm-kb 16s linear forwards}
  @keyframes vtfm-kb{from{transform:scale(1)}to{transform:scale(1.08)}}
}
@media (prefers-reduced-motion:reduce){
  .vtfm-js .rv,.vtfm-js .rv-img{opacity:1;transform:none;filter:none;transition:none}
}
\n

/* ---- Prämierungen: Fotoreihe unter der Preisliste (16.9.2026) ---- */
.award-photos{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin:1.8rem 0 0}
.award-photos .award-photo{margin:0}
.award-photos img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.award-photos .caption{margin:.45rem 0 0;font-size:var(--fs-small);color:var(--slate);line-height:1.35}
@media (max-width:700px){.award-photos{grid-template-columns:1fr 1fr}}

/* ---- Kompakte Navigation nach dem Scrollen (16.9.2026, Sandro) ----
   Ab 1024 px: sobald die Seite 80 px gescrollt ist, wird die Leiste rund halb
   so hoch — Sprachzeile weg, Logo kleiner, weniger Innenabstand. Zurück am
   Seitenanfang wächst sie wieder. JS setzt .is-compact (vtfm.js). */
@media (min-width:1024px){
  .nav__in{transition:padding .3s ease}
  /* Das Logo springt ohne Übergang auf die kleine Grösse: ein SVG, das während
     einer Höhen-Animation skaliert, bleibt in Chrome unscharf gerastert. */
  .nav.is-compact .nav__top{display:none}
  .nav.is-compact .nav__in{padding-top:.4rem;padding-bottom:.4rem}
  .nav.is-compact .nav__logo{height:104px;margin:-20px 0}
}

/* ---- Impressionen: Friday-Snap-Einbettung ohne Tailwind-Klassen (16.9.2026) ---- */
.snaplink{display:inline-flex;align-items:center;gap:.3em;text-decoration:none}
.snaplink:hover{text-decoration:underline}
.snaplink__ico{width:1em;height:1em}
.snapframe iframe{width:100%;border:0;display:block}

/* ---- powermail: Absätze in Hinweistexten (Typ HTML) sichtbar trennen (16.9.2026) ---- */
.powermail_fieldwrap_type_html p+p{margin-top:.85em}


/* ---- Medienberichte: Querverweis-Zeile unter einer Jahresüberschrift (16.9.2026) ---- */
.presse__ref{font-size:var(--fs-small);color:var(--slate);margin:-.4rem 0 1rem}

/* ---- Medienberichte: Symbol für die Art des Mediums vor dem Namen (16.9.2026, Sandro) ----
   Zeitung/Magazin · Fernsehen · Radio · Online (Globus); Maske in der Textfarbe. */
.presse__medium::before{content:"";display:inline-block;width:1.05em;height:1.05em;margin-right:.4em;vertical-align:-.15em;background-color:currentColor;-webkit-mask:var(--ico) no-repeat center/contain;mask:var(--ico) no-repeat center/contain}
.presse__medium--print{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M4 4h13v14a2 2 0 0 0 2 2H6a2 2 0 0 1-2-2z%22/%3E%3Cpath d=%22M17 8h3v10a2 2 0 0 1-2 2%22/%3E%3Cpath d=%22M7 8h6M7 12h6M7 16h6%22/%3E%3C/svg%3E")}
.presse__medium--tv{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%226%22 width=%2218%22 height=%2212%22 rx=%222%22/%3E%3Cpath d=%22M8 21h8M12 18v3M8 3l4 3 4-3%22/%3E%3C/svg%3E")}
.presse__medium--radio{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%229%22 width=%2218%22 height=%2211%22 rx=%222%22/%3E%3Ccircle cx=%228%22 cy=%2214.5%22 r=%222.5%22/%3E%3Cpath d=%22M14 13h4M14 16h4M6 9l10-5%22/%3E%3C/svg%3E")}
.presse__medium--online{--ico:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%222%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18%22/%3E%3C/svg%3E")}