/* Infosidorna: Om oss, och efter hand Köptrygghet, Kontakt, Köpa biljetter, FAQ.
   Laddas bara av templates/infosida.jsp, via request-attributet needsInfosida i
   frametemplates/standard.jsp.

   Ett släkte, inte kloner: tokens och komponenter här är gemensamma, men varje
   sida väljer sina egna komponenter i elements/infosida-<sida>.jsp.

   Allt ligger under .event-template, elementets ram, så specificiteten är
   densamma som när stilen stod inline i Om oss-sidans xmlpage. */

.event-template .t2i{--t2i-bla:#003365;--t2i-orange:#ff5000;--t2i-text:#1f2a37;--t2i-text-svag:#3d4a5c;--t2i-yta:#f4f6f9;--t2i-ikonyta:#eef2f7;--t2i-linje:#e3e8ee;--t2i-typsnitt:Poppins,Arial,"Helvetica Neue",Helvetica,sans-serif}

.event-template .t2i{font-family:var(--t2i-typsnitt);color:var(--t2i-text);line-height:1.55}
.event-template .t2i h1,.event-template .t2i h2,.event-template .t2i h3{margin:0;font-family:var(--t2i-typsnitt);color:var(--t2i-bla);font-weight:700}
.event-template .t2i p{margin:0 0 14px;font-size:16px}
.event-template .t2i a{font-size:inherit;color:var(--t2i-bla)}
.event-template .t2i strong,.event-template .t2i b{font-size:inherit}
.event-template .t2i-hero{position:relative;height:130px;border-radius:6px;overflow:hidden;background:linear-gradient(120deg,#17508f 0%,#0d3566 55%,#082448 100%)}
.event-template .t2i-hero h1{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);text-align:center;color:#fff;font-size:32px;line-height:1.1;text-shadow:0 2px 14px rgba(0,0,0,.5)}
.event-template .t2i-nav{display:flex;flex-wrap:wrap;gap:6px 28px;padding:16px 4px;border-bottom:1px solid var(--t2i-linje)}
.event-template .t2i-nav a{font-size:13px;font-weight:600;text-decoration:none;text-transform:uppercase;letter-spacing:.04em}
.event-template .t2i-nav a:hover{color:var(--t2i-orange)}
.event-template .t2i-sek{padding:36px 4px 8px;scroll-margin-top:12px}
/* Under 768px är headern position: fixed, och --header-offset är dess uppmätta höjd (standard.jsp). */
@media (max-width:768px){.event-template .t2i-sek{scroll-margin-top:calc(var(--header-offset,170px) + 12px)}}
.event-template .t2i-sek h2{font-size:28px;line-height:1.2;padding-bottom:14px;margin-bottom:22px;position:relative}
.event-template .t2i-sek h2:after{content:"";position:absolute;left:0;bottom:0;width:48px;height:4px;background:var(--t2i-orange);border-radius:2px}
.event-template .t2i-vilka{display:flex;gap:40px;align-items:flex-start}
.event-template .t2i-text{flex:1 1 60%}
.event-template .t2i-foto{flex:0 0 300px;margin:0;padding-top:6px}
.event-template .t2i-foto img{width:100%;height:auto;display:block;border-radius:6px}
.event-template .t2i-sign{display:flex;align-items:center;gap:14px;margin-top:22px;padding-left:14px;border-left:3px solid var(--t2i-orange);font-size:14px;color:var(--t2i-text-svag);line-height:1.4}
.event-template .t2i-sign strong{color:var(--t2i-bla);font-size:15px}
.event-template .t2i-rutor{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 28px}
.event-template .t2i-ruta{text-align:center}
.event-template .t2i-ikon{display:flex;width:112px;height:112px;margin:0 auto 16px;border-radius:50%;background:var(--t2i-ikonyta);align-items:center;justify-content:center;color:var(--t2i-bla)}
.event-template .t2i-ikon svg{width:44px;height:44px}
.event-template .t2i-ruta h3{font-size:17px;margin-bottom:8px}
.event-template .t2i-ruta p{font-size:14px;color:var(--t2i-text-svag);margin:0}
.event-template .t2i-kunder{display:flex;align-items:center;gap:26px;padding:18px 22px;background:var(--t2i-yta);border-radius:8px}
.event-template .t2i-tplogo{display:flex;align-items:center;gap:8px;flex:none;font-weight:700;font-size:21px;color:#191919;letter-spacing:-.01em}
.event-template .t2i-tplogo svg{width:26px;height:26px}
.event-template .t2i-tpbox{flex:1 1 auto;min-width:0}
.event-template .t2i-tpbox .trustpilot-widget a{font-weight:600}
.event-template .t2i-tplank{flex:none;font-size:14px;font-weight:600;white-space:nowrap}
.event-template .t2i-kunder:has(.trustpilot-widget iframe) .t2i-tplogo{display:none}
.event-template .t2i-bolag p{font-size:14px;color:var(--t2i-text-svag)}
@media (max-width:900px){.event-template .t2i-rutor{grid-template-columns:repeat(2,1fr)}.event-template .t2i-hero{height:110px}.event-template .t2i-hero h1{font-size:28px}}
@media (max-width:600px){.event-template .t2i-hero{border-radius:4px;height:84px}.event-template .t2i-hero h1{font-size:24px}.event-template .t2i-kunder{flex-wrap:wrap;gap:14px 20px;padding:16px}.event-template .t2i-tpbox{flex-basis:100%}.event-template .t2i-nav{gap:0;padding:10px 2px 6px}.event-template .t2i-nav a{white-space:nowrap;font-size:12px;margin:0 20px 8px 0}.event-template .t2i-sek{padding:28px 2px 4px}.event-template .t2i-sek h2{font-size:23px;padding-bottom:12px;margin-bottom:16px}.event-template .t2i p{font-size:15px}.event-template .t2i-vilka{flex-wrap:wrap}.event-template .t2i-foto{flex:1 1 100%;max-width:420px;margin:8px auto 0;padding-top:0}.event-template .t2i-rutor{grid-template-columns:1fr;gap:20px}.event-template .t2i-ruta{display:flex;align-items:flex-start;gap:14px;text-align:left}.event-template .t2i-rutatext{flex:1 1 auto;min-width:0}.event-template .t2i-ikon{flex:none;width:56px;height:56px;margin:0}.event-template .t2i-ikon svg{width:24px;height:24px}.event-template .t2i-ruta h3{font-size:16px;margin:4px 0 4px}.event-template .t2i-ruta p{font-size:14px}}

/* Köptrygghet och Kontakt. Bara tillägg: inget ovanför ändras, så Om oss ser ut
   som förut. Samma tokens, samma ikonplattor och samma rubrikstreck; det nya är
   formerna sidorna behöver. */

/* Heron med ingress: samma gradient, men h1 i flödet så att en mening får plats
   under. Modifieraren vinner över höjderna i media-reglerna ovan. */
.event-template .t2i-hero.t2i-hero--ingress{height:auto;padding:30px 24px 32px;text-align:center}
.event-template .t2i-hero--ingress h1{position:static;transform:none}
.event-template .t2i .t2i-ingress{max-width:600px;text-wrap:balance;margin:10px auto 0;color:rgba(255,255,255,.9);font-size:16px;line-height:1.5;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.event-template .t2i .t2i-intro{max-width:680px;text-wrap:balance;margin:-6px 0 26px;color:var(--t2i-text-svag)}

/* Liten ikonplatta, för kort och adress. Den stora är .t2i-ikon ovan. */
.event-template .t2i-minikon{flex:none;display:flex;width:42px;height:42px;border-radius:50%;background:var(--t2i-ikonyta);align-items:center;justify-content:center;color:var(--t2i-bla)}
.event-template .t2i-minikon svg{width:18px;height:18px}

/* Tidslinjen: numrerade steg med en linje mellan, sista steget i orange. */
.event-template .t2i-steg{margin:0;padding:0;list-style:none;counter-reset:t2i-steg}
.event-template .t2i-steg li{position:relative;margin:0;padding:0 0 26px 70px;counter-increment:t2i-steg}
.event-template .t2i-steg li:before{content:counter(t2i-steg);position:absolute;left:0;top:0;display:flex;width:48px;height:48px;border-radius:50%;background:var(--t2i-ikonyta);color:var(--t2i-bla);font-size:19px;font-weight:700;align-items:center;justify-content:center}
.event-template .t2i-steg li:after{content:"";position:absolute;left:23px;top:56px;bottom:6px;width:2px;background:var(--t2i-linje)}
.event-template .t2i-steg li:last-child{padding-bottom:0}
.event-template .t2i-steg li:last-child:after{display:none}
.event-template .t2i-steg li.t2i-steg-mal:before{background:var(--t2i-orange);color:#fff}
.event-template .t2i-steg h3{margin:11px 0 6px;font-size:18px}
.event-template .t2i .t2i-steg p{max-width:640px;margin:0;color:var(--t2i-text-svag)}

/* Kort med ram: ikon till vänster, text till höger. */
.event-template .t2i-par{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.event-template .t2i-kort{display:flex;align-items:flex-start;gap:16px;padding:22px;border:1px solid var(--t2i-linje);border-radius:8px;background:#fff;transition:border-color .2s,box-shadow .2s}
.event-template .t2i-kort h3{margin:2px 0 6px;font-size:17px}
.event-template .t2i .t2i-kort p{margin:0;font-size:14px;color:var(--t2i-text-svag)}
.event-template .t2i .t2i-betalning p{font-size:15px}
.event-template .t2i-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.event-template .t2i-chips span{padding:5px 14px;border-radius:999px;background:var(--t2i-yta);font-size:13px;font-weight:600;color:var(--t2i-bla)}

/* Frågorna: <details>, öppnas med tangentbord och utan skript. */
.event-template .t2i-fragor{border-top:1px solid var(--t2i-linje)}
.event-template .t2i-fragor details{border-bottom:1px solid var(--t2i-linje)}
.event-template .t2i-fragor summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 4px;list-style:none;cursor:pointer;font-size:16px;font-weight:600;color:var(--t2i-bla)}
.event-template .t2i-fragor summary::-webkit-details-marker{display:none}
.event-template .t2i-fragor summary:after{content:"";flex:none;width:9px;height:9px;margin:-4px 4px 0 0;border-right:2px solid var(--t2i-orange);border-bottom:2px solid var(--t2i-orange);transform:rotate(45deg);transition:transform .2s,margin .2s}
.event-template .t2i-fragor details[open] summary:after{margin-top:4px;transform:rotate(225deg)}
.event-template .t2i-fragor summary:focus-visible{outline:2px solid var(--t2i-orange);outline-offset:2px}
.event-template .t2i-svar{padding:0 4px 18px}
.event-template .t2i .t2i-svar p{max-width:680px;margin:0;color:var(--t2i-text-svag)}

/* Knappar. Blå och inte orange: vit text på #ff5000 når inte 4,5:1. */
.event-template .t2i a.t2i-knapp{box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:11px 20px;border-radius:6px;background:var(--t2i-bla);color:#fff;font-size:15px;font-weight:600;line-height:1.2;text-decoration:none;border:0}
.event-template .t2i a.t2i-knapp:focus-visible{outline:2px solid var(--t2i-orange);outline-offset:2px}
.event-template .t2i a.t2i-knapp--ljus{background:#fff;color:var(--t2i-bla);box-shadow:inset 0 0 0 2px var(--t2i-bla)}
.event-template .t2i a.t2i-knapp--vit{flex:none;background:#fff;color:var(--t2i-bla)}

/* Avslutande band: heron i liten form, med en knapp vidare. */
.event-template .t2i-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:44px 0 8px;padding:26px 28px;border-radius:6px;background:linear-gradient(120deg,#17508f 0%,#0d3566 55%,#082448 100%)}
.event-template .t2i .t2i-cta p{margin:0;font-size:15px;color:rgba(255,255,255,.88)}
.event-template .t2i .t2i-cta p.t2i-cta-rubrik{margin-bottom:4px;font-size:20px;font-weight:700;color:#fff}

/* Kontaktvägarna: tre kort med stor ikonplatta, knappen längst ned. */
.event-template .t2i-kanaler{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.event-template .t2i-kanal{display:flex;flex-direction:column;align-items:center;padding:28px 20px 24px;border:1px solid var(--t2i-linje);border-radius:8px;background:#fff;text-align:center;transition:border-color .2s,box-shadow .2s}
.event-template .t2i-kanal .t2i-ikon{width:88px;height:88px;margin:0 auto 14px}
.event-template .t2i-kanal .t2i-ikon svg{width:34px;height:34px}
.event-template .t2i-kanal h3{margin:0 0 6px;font-size:17px}
.event-template .t2i .t2i-kanal p{margin:0 0 10px;font-size:14px;color:var(--t2i-text-svag)}
.event-template .t2i .t2i-kanal p.t2i-tid{display:flex;align-items:center;gap:6px;margin:auto 0 16px;padding-top:4px;font-size:13px;font-weight:600;color:var(--t2i-bla)}
.event-template .t2i-tid svg{width:14px;height:14px}
.event-template .t2i-kanal .t2i-knapp{width:100%}
.event-template .t2i .t2i-kanal p.t2i-chattinfo{margin:12px 0 0;font-size:13px}
.event-template .t2i .t2i-kanal p.t2i-chattinfo[hidden]{display:none}
.event-template .t2i .t2i-tips{margin:22px 0 0;padding:14px 18px;border-left:3px solid var(--t2i-orange);border-radius:0 8px 8px 0;background:var(--t2i-yta);font-size:14px;color:var(--t2i-text)}

/* Länkkort vidare till andra infosidor. */
.event-template .t2i-lankar{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.event-template .t2i a.t2i-lank{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border:1px solid var(--t2i-linje);border-radius:8px;text-decoration:none;color:var(--t2i-text)}
.event-template .t2i-lank strong{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:16px;color:var(--t2i-bla)}
.event-template .t2i-lank strong svg{flex:none;width:14px;height:14px;color:var(--t2i-orange);transition:transform .2s}
.event-template .t2i-lank span{font-size:14px;line-height:1.45;color:var(--t2i-text-svag)}
.event-template .t2i a.t2i-lank:focus-visible{outline:2px solid var(--t2i-orange);outline-offset:2px}

.event-template .t2i-adress{display:flex;align-items:flex-start;gap:14px}
.event-template .t2i .t2i-adress p{margin:0}

/* Lätt lyft vid hover, bara där det finns en mus. */
@media (hover:hover){.event-template .t2i-fragor summary:hover{color:var(--t2i-orange)}.event-template .t2i a.t2i-knapp:hover{background:#17508f;color:#fff}.event-template .t2i a.t2i-knapp--ljus:hover{background:var(--t2i-bla);color:#fff}.event-template .t2i a.t2i-knapp--vit:hover{background:var(--t2i-ikonyta);color:var(--t2i-bla)}.event-template .t2i-kort:hover,.event-template .t2i-kanal:hover,.event-template .t2i a.t2i-lank:hover{border-color:#cfd8e3;box-shadow:0 6px 20px rgba(0,51,101,.08)}.event-template .t2i a.t2i-lank:hover strong svg{transform:translateX(3px)}}
@media (max-width:900px){.event-template .t2i-kanaler,.event-template .t2i-lankar{grid-template-columns:1fr}.event-template .t2i-kanal{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;text-align:left}.event-template .t2i-kanal .t2i-ikon{grid-row:span 3;width:64px;height:64px;margin:0}.event-template .t2i-kanal .t2i-ikon svg{width:26px;height:26px}.event-template .t2i .t2i-kanal p.t2i-tid{margin:0 0 4px}.event-template .t2i-kanal .t2i-knapp{grid-column:1 / -1;margin-top:14px}.event-template .t2i .t2i-kanal p.t2i-chattinfo{grid-column:1 / -1}}
@media (max-width:600px){.event-template .t2i-hero.t2i-hero--ingress{padding:22px 16px 24px}.event-template .t2i .t2i-ingress{font-size:15px}.event-template .t2i-steg li{padding-left:56px}.event-template .t2i-steg li:before{width:40px;height:40px;font-size:17px}.event-template .t2i-steg li:after{left:19px;top:48px}.event-template .t2i-steg h3{margin-top:8px;font-size:16px}.event-template .t2i-par{grid-template-columns:1fr;gap:14px}.event-template .t2i-kort{padding:18px}.event-template .t2i-cta{flex-direction:column;align-items:stretch;padding:22px 18px}.event-template .t2i .t2i-cta p.t2i-cta-rubrik{font-size:18px}.event-template .t2i-kanal{padding:20px 18px}.event-template .t2i-kanal .t2i-ikon{width:56px;height:56px}.event-template .t2i-kanal .t2i-ikon svg{width:22px;height:22px}.event-template .t2i-fragor summary{font-size:15px;padding:16px 2px}}
/* Ett tidsintervall som 09-22 bryts aldrig vid bindestrecket. Elementen lägger
   spannet runt intervallen, se tider() i elements/infosida-koptrygghet.jsp. */
.event-template .t2i .t2i-nobr{white-space:nowrap;font:inherit;color:inherit}

/* Vanliga frågor och Så köper du biljetter. Också bara tillägg. */

/* Ämneskorten överst i FAQ:n, ankare till grupperna. */
.event-template .t2i-amnen{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:22px 0 0}
.event-template .t2i a.t2i-amne{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:16px;border:1px solid var(--t2i-linje);border-radius:8px;background:#fff;text-decoration:none;color:var(--t2i-text);transition:border-color .2s,box-shadow .2s}
.event-template .t2i-amnetext{display:flex;flex-direction:column;gap:3px}
.event-template .t2i-amnetext strong{font-size:15px;line-height:1.3;color:var(--t2i-bla)}
.event-template .t2i-amnetext span{font-size:13px;line-height:1.4;color:var(--t2i-text-svag)}
.event-template .t2i a.t2i-amne:focus-visible{outline:2px solid var(--t2i-orange);outline-offset:2px}

/* Köpet i fyra steg: stora ikonplattor som på Om oss, med en nummerbricka. */
.event-template .t2i-fyra{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin:0;padding:0;list-style:none}
.event-template .t2i-fyra li{margin:0;text-align:center}
.event-template .t2i-fyra .t2i-ikon{position:relative;width:96px;height:96px;margin:0 auto 14px}
.event-template .t2i-fyra .t2i-ikon svg{width:36px;height:36px}
.event-template .t2i-nr{position:absolute;top:0;right:0;display:flex;width:28px;height:28px;border:3px solid #fff;border-radius:50%;background:var(--t2i-orange);color:#fff;font-size:13px;font-weight:700;align-items:center;justify-content:center}
.event-template .t2i-fyra h3{margin:0 0 6px;font-size:17px}
.event-template .t2i .t2i-fyra p{margin:0;font-size:14px;color:var(--t2i-text-svag)}

/* Bocklistan: det som är bra att veta. */
.event-template .t2i-bocklista{margin:0;padding:0;list-style:none}
.event-template .t2i-bocklista li{display:flex;align-items:flex-start;gap:12px;margin:0 0 14px;font-size:16px;line-height:1.55;color:var(--t2i-text)}
.event-template .t2i-bock{flex:none;display:flex;width:24px;height:24px;margin-top:1px;border-radius:50%;background:#e7f6ef;color:#0f7a4f;align-items:center;justify-content:center}
.event-template .t2i-bock svg{width:12px;height:12px}
.event-template .t2i .t2i-bocklista li > span:last-child{font:inherit;color:inherit}

/* Ligakorten, en rad på desktop. */
.event-template .t2i-ligor{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.event-template .t2i-ligor a.t2i-lank{gap:8px;padding:16px}
.event-template .t2i-ligor .t2i-lank strong{font-size:15px}
.event-template .t2i-ligor .t2i-minikon{width:36px;height:36px}
.event-template .t2i-ligor .t2i-minikon svg{width:16px;height:16px}

@media (hover:hover){.event-template .t2i a.t2i-amne:hover{border-color:#cfd8e3;box-shadow:0 6px 20px rgba(0,51,101,.08)}}
@media (max-width:900px){.event-template .t2i-amnen{grid-template-columns:repeat(3,1fr)}.event-template .t2i-fyra{grid-template-columns:repeat(2,1fr);gap:28px 20px}.event-template .t2i-ligor{grid-template-columns:repeat(3,1fr)}}
@media (max-width:600px){.event-template .t2i-amnen{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.event-template .t2i a.t2i-amne{flex-direction:row;align-items:center;gap:8px;padding:6px 14px 6px 6px;border-radius:999px}.event-template .t2i-amnen .t2i-minikon{width:30px;height:30px}.event-template .t2i-amnen .t2i-minikon svg{width:14px;height:14px}.event-template .t2i-amnetext strong{font-size:14px}.event-template .t2i-amnetext span{display:none}.event-template .t2i-fyra{grid-template-columns:1fr;gap:18px}.event-template .t2i-fyra li{display:grid;grid-template-columns:auto 1fr;column-gap:16px;text-align:left}.event-template .t2i-fyra .t2i-ikon{grid-row:span 2;width:64px;height:64px;margin:0}.event-template .t2i-fyra .t2i-ikon svg{width:24px;height:24px}.event-template .t2i-nr{width:24px;height:24px;font-size:12px;top:-4px;right:-4px}.event-template .t2i-fyra h3{margin-top:6px}.event-template .t2i-ligor{grid-template-columns:1fr;gap:8px}.event-template .t2i-ligor a.t2i-lank{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:center;padding:12px 16px}.event-template .t2i-ligor .t2i-minikon{grid-row:span 2}.event-template .t2i-bocklista li{font-size:15px}}

/* ticketbrokerage.css sätter *{font-size:11px}, så varje element utan egen
   storlek blir 11 px i stället för att ärva. Uppmätt i webbläsaren 2026-10-13:
   tiden i kontaktkorten, signaturens rad och Trustpilot-länkarna. */
.event-template .t2i .t2i-tid span,.event-template .t2i .t2i-sign div{font:inherit;color:inherit}
.event-template .t2i a.t2i-tplank,.event-template .t2i .t2i-tpbox a{font-size:14px}