/* Tamsonne – en dagbok från en kolonilott. Stilmall. */

@font-face {
  font-family: "Bookman Tamsonne";
  src: url("/typsnitt/bookman-light.woff2") format("woff2");
  font-weight: 300 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bookman Tamsonne";
  src: url("/typsnitt/bookman-light-kursiv.woff2") format("woff2");
  font-weight: 300 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Bookman Tamsonne";
  src: url("/typsnitt/bookman-demi.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --papper: #E6ECDD;      /* fröpåsens papper */
  --vitt: #F7F8F1;        /* vit emalj */
  --black: #1B3A2B;       /* bläckgrönt */
  --dov: #44584B;         /* blekt bläck, för småtext */
  --blad: #5C8A45;        /* bladgrönt */
  --emalj: #27598A;       /* emaljblått */
  --tagetes: #E9A417;
  --ljusgul: #F0CB62;
  --vinbar: #A3263A;
  --mull: #5B4433;
  --tra: #C9A46C;
  --frost: #D3E1EA;
  --linje: rgba(27, 58, 43, 0.16);

  --bookman: "Bookman Tamsonne", "Bookman Old Style", Bookman, Georgia, serif;
  --grotesk: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --sidbredd: 74rem;
  --kant: clamp(1rem, 4vw, 3rem);
  --etikett: 0px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--papper);
  color: var(--black);
  font-family: var(--bookman);
  font-weight: 300;
  font-size: 1.0625rem;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }

a {
  color: var(--emalj);
  text-decoration-thickness: 0.07em;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--black); text-decoration-thickness: 0.14em; }

:focus-visible {
  outline: 3px solid var(--emalj);
  outline-offset: 3px;
  border-radius: 2px;
}

h1, h2, h3 {
  font-weight: 600;
  line-height: 1.12;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.3rem + 3vw, 2.9rem); letter-spacing: -0.012em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.2rem; line-height: 1.2; }

p { margin: 0 0 1em; text-wrap: pretty; }
strong { font-weight: 600; }

.dold {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.hoppa {
  position: absolute;
  left: var(--kant);
  top: -4rem;
  z-index: 10;
  padding: 0.4rem 0.8rem;
  background: var(--vitt);
  color: var(--black);
  font-family: var(--grotesk);
  font-size: 0.9rem;
}
.hoppa:focus { top: 0.5rem; }

/* ---------- sidhuvud: brädan över dörren ---------- */

.sidhuvud {
  width: 100%;
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 1.4rem var(--kant) 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2rem;
}

.skylt {
  display: inline-block;
  padding: 0.28em 1.3em 0.32em;
  background-color: var(--tra);
  background-image:
    radial-gradient(circle at 0.62em 50%, #3A2415 0 0.11em, transparent 0.13em),
    radial-gradient(circle at calc(100% - 0.62em) 50%, #3A2415 0 0.11em, transparent 0.13em);
  border: 2px solid var(--black);
  border-radius: 4px;
  color: #3A2415;
  font-weight: 600;
  font-size: 1.45rem;
  line-height: 1.2;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.skylt:hover { color: #3A2415; background-color: #D4B27E; }

.meny ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1.7rem;
}
.meny a {
  color: var(--black);
  text-decoration: none;
  padding: 0.25rem 0;
  border-bottom: 3px solid transparent;
}
.meny a:hover { border-bottom-color: var(--tagetes); }
.meny a[aria-current] { border-bottom-color: var(--black); }

/* ---------- sidans stomme ---------- */

main {
  display: block;
  flex: 1 0 auto;
  width: 100%;
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: clamp(1.8rem, 4vw, 3.2rem) var(--kant) 0;
}

.liten,
.datum,
figcaption,
.forklaring,
.siffror dt,
table,
.sidfot,
.grannar,
.manader,
.etikett {
  font-family: var(--grotesk);
  font-weight: 400;
}

.liten { font-size: 0.86rem; line-height: 1.5; color: var(--dov); }

.ingress {
  font-style: italic;
  font-size: 1.22rem;
  line-height: 1.5;
  max-width: 31em;
}

.datum {
  margin: 0 0 0.5rem;
  font-size: 0.9rem;
  color: var(--dov);
}

figure { margin: 0; }
figcaption {
  margin-top: 0.6rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--dov);
  max-width: 44em;
}

/* ---------- förstasidan ---------- */

.inledning {
  display: grid;
  gap: 1.6rem 3rem;
  align-items: center;
}
.halsning h1 { margin-bottom: 1.1rem; max-width: 12em; }
.halsning .ingress { margin-bottom: 1rem; }
.lotten img { width: 100%; }

.aret-hemma,
.senaste { margin-top: clamp(2.6rem, 6vw, 4.5rem); }
.aret-hemma > h2,
.senaste > h2 { margin-bottom: 0.5rem; }
.aret-hemma > p,
.senaste > p { max-width: 40em; }

/* ---------- odlingsåret: kalendern ---------- */

.odlingsar { margin: 2.4rem 0 1.2rem; }

.aret {
  position: relative;
  isolation: isolate;
}
/* själva bädden: vit emalj, blå frostfält i kanterna, månadsstreck */
.aret::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0 0 0 var(--etikett);
  border-radius: 10px;
  box-shadow: 0 0 0 2px var(--black);
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), var(--linje) calc(100% / 12 - 1px), var(--linje) calc(100% / 12)),
    linear-gradient(90deg, var(--frost) 0, var(--frost) 37.4%, var(--vitt) 37.4%, var(--vitt) 77.7%, var(--frost) 77.7%);
}

.arshuvud { margin-left: var(--etikett); }

.ljus {
  position: relative;
  height: 3.1rem;
  border-radius: 10px 10px 0 0;
  background: var(--black) url("/img/ljus.svg") 0 0 / 100% 100% no-repeat;
  font-family: var(--grotesk);
  font-size: 0.74rem;
  line-height: 1.2;
}
/* texterna ligger över idag-strecket, så att strecket bryts bakom dem i stället för att gå genom bokstäverna */
.ljus span { position: absolute; z-index: 2; display: none; padding: 0.1rem 0.35rem; border-radius: 2px; }
.ljus .varfrost { left: 0.4rem; top: 0.35rem; color: var(--vitt); background: var(--black); }
.ljus .hostfrost { right: 0.4rem; top: 0.35rem; color: var(--vitt); background: var(--black); text-align: right; }
.ljus .mids { left: 46.9%; bottom: 0.25rem; transform: translateX(-50%); color: var(--black); background: var(--ljusgul); font-weight: 600; }

.manader {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  font-size: 0.72rem;
  line-height: 1;
  color: var(--black);
  border-bottom: 2px solid var(--black);
}
.manader li { padding: 0.45rem 0 0.4rem; text-align: center; }

.grodor { list-style: none; margin: 0; padding: 0; }

.gronsak,
.dagboksrad { border-bottom: 1px solid var(--linje); }
.dagboksrad { border-bottom: 0; }
.grodor + .dagboksrad { border-top: 1px solid var(--black); }

.etikett {
  display: block;
  padding: 0.35rem 0.55rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1.2;
}

.rad {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  grid-template-rows: 9px 9px;
  row-gap: 3px;
  padding: 4px 0 7px;
}

.marke { grid-row: 1; margin: 0 1px; min-width: 0; }
.skord { grid-row: 2; }

.forsadd {
  background: radial-gradient(circle closest-side, transparent 0, transparent 34%, var(--mull) 42%, var(--mull) 88%, transparent 96%) 0 50% / 8px 8px space no-repeat;
}
.sadd {
  background: radial-gradient(circle closest-side, var(--mull) 0, var(--mull) 80%, transparent 90%) 0 50% / 8px 8px space no-repeat;
}
.utplant,
.skord {
  border: 1.5px solid var(--black);
  border-radius: 5px;
}
.utplant { background: var(--blad); }
.skord { background: var(--tagetes); }

.dagboksrad .rad { grid-template-rows: 20px; padding: 6px 0 8px; }
.punkt {
  grid-row: 1;
  justify-self: center;
  align-self: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--vinbar);
  border: 1.5px solid var(--black);
}
.punkt { position: relative; }
.punkt::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }
.punkt:hover,
.punkt[aria-current] { background: var(--tagetes); }
.punkt[aria-current] { width: 20px; height: 20px; }

/* strecket för idag (kräver skript) och för anteckningens datum */
.idag,
.har {
  position: absolute;
  inset: 0 0 0 var(--etikett);
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  pointer-events: none;
}
.idag[hidden] { display: none; }
.strack {
  justify-self: center;
  width: 0;
  border-left: 2px solid var(--vinbar);
  position: relative;
}
.strack b {
  position: absolute;
  top: -1.55rem;
  left: -1px;
  transform: translateX(-50%);
  padding: 0.12rem 0.4rem 0.16rem;
  border-radius: 3px;
  background: var(--vinbar);
  color: var(--vitt);
  font-family: var(--grotesk);
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}
.strack.vanster b { left: -2px; transform: none; border-radius: 0 3px 3px 0; }
.strack.hoger b { left: auto; right: 0; transform: none; border-radius: 3px 0 0 3px; }

.forklaring {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--black);
  max-width: none;
}
.forklaring ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.5rem;
}
.forklaring li { display: flex; align-items: center; gap: 0.45rem; }
.forklaring .marke { display: inline-block; width: 34px; height: 10px; margin: 0; flex: none; }
.forklaring .ruta {
  display: inline-block;
  width: 34px;
  height: 14px;
  flex: none;
  border-radius: 3px;
  box-shadow: 0 0 0 1.5px var(--black);
}
.forklaring .ruta.kyla { background: var(--frost); }
.forklaring .ruta.dag { background: linear-gradient(var(--black) 0 45%, var(--ljusgul) 45%); }
.forklaring .punkt { display: inline-block; flex: none; }
.forklaring p { margin: 0.6rem 0 0; color: var(--dov); max-width: 52em; }

/* den smala remsan i en anteckning */
.arsremsa { margin: 3rem 0 2.6rem; }
.arsremsa .ljus { height: 2.9rem; }

/* den pyttelilla remsan i listor */
.arsprick {
  display: grid;
  grid-template-columns: repeat(36, minmax(0, 1fr));
  align-items: center;
  width: 100%;
  max-width: 13rem;
  height: 12px;
  margin-top: 0.5rem;
  border-radius: 6px;
  box-shadow: 0 0 0 1.5px var(--black);
  background:
    repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / 12 - 1px), var(--linje) calc(100% / 12 - 1px), var(--linje) calc(100% / 12)),
    linear-gradient(90deg, var(--frost) 0, var(--frost) 37.4%, var(--vitt) 37.4%, var(--vitt) 77.7%, var(--frost) 77.7%);
}
.arsprick .prick {
  justify-self: center;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--vinbar);
  box-shadow: 0 0 0 1.5px var(--black);
}

/* ---------- förteckningar över anteckningar ---------- */

.forteckning {
  list-style: none;
  margin: 1.6rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 2rem;
}
.notis { display: grid; gap: 0.5rem 2.5rem; }
.nar { font-family: var(--grotesk); font-size: 0.88rem; color: var(--dov); }
.vad h2,
.vad h3 { font-size: 1.4rem; margin-bottom: 0.35rem; }
.vad h2 a,
.vad h3 a { color: var(--black); text-decoration-thickness: 1.5px; text-underline-offset: 0.22em; }
.vad h2 a:hover,
.vad h3 a:hover { color: var(--emalj); }
.vad p { margin: 0; max-width: 34em; }

/* ---------- en anteckning ---------- */

.rubrik h1 { max-width: 17em; margin-bottom: 1rem; }
.rubrik .ingress { margin-bottom: 0; }

.spalter { display: grid; gap: 1.5rem 4rem; }

.marginal { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1.2rem; align-items: start; }
.marginal.utan { display: block; }
.teckning { width: 100%; max-width: 13rem; }

.siffror { margin: 0; }
.siffror div { padding: 0.5rem 0; border-top: 1px solid var(--linje); }
.siffror div:first-child { border-top: 0; padding-top: 0; }
.siffror dt { font-size: 0.78rem; color: var(--dov); }
.siffror dd { margin: 0; line-height: 1.35; }

.brodtext { max-width: 34em; min-width: 0; hyphens: auto; }
.brodtext h2 { margin: 2.1em 0 0.6em; }
.brodtext > :first-child { margin-top: 0; }
.brodtext ul,
.brodtext ol { margin: 0 0 1.2em; padding-left: 1.3em; }
.brodtext li { margin-bottom: 0.55em; }
.brodtext ul li::marker { color: var(--blad); }
.brodtext ol li::marker { font-weight: 600; }

table {
  width: 100%;
  margin: 1.5em 0 1.6em;
  border-collapse: collapse;
  font-size: 0.9rem;
  line-height: 1.4;
}
caption {
  caption-side: top;
  text-align: left;
  padding-bottom: 0.5rem;
  font-weight: 600;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 0.38rem 0.9rem 0.38rem 0;
  border-bottom: 1px solid var(--linje);
}
thead th { border-bottom: 2px solid var(--black); font-weight: 600; }
tfoot th, tfoot td { border-top: 2px solid var(--black); border-bottom: 0; font-weight: 600; }

.grannar {
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 2px solid var(--black);
  display: grid;
  gap: 0.8rem 2rem;
  font-size: 0.92rem;
  max-width: 53em;
}
.grannar span { display: block; color: var(--dov); font-size: 0.8rem; }
.grannar a { font-family: var(--bookman); font-weight: 600; font-size: 1.08rem; }

/* ---------- såkalendern ---------- */

.hallpunkter {
  margin: 1.6rem 0 0;
  display: grid;
  gap: 0.9rem 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.hallpunkter div { border-top: 2px solid var(--black); padding-top: 0.5rem; }
.hallpunkter dt { font-family: var(--grotesk); font-size: 0.8rem; color: var(--dov); }
.hallpunkter dd { margin: 0; line-height: 1.35; }

.grodnoter {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  display: grid;
  gap: 2rem 3.5rem;
}
.grodnot h3 { margin-bottom: 0.3rem; }
.grodnot p { margin: 0; }
.grodnot .tider { margin-top: 0.4rem; font-family: var(--grotesk); font-size: 0.8rem; line-height: 1.45; color: var(--dov); }
.grodnot img { float: right; width: 4.4rem; margin: 0 0 0.4rem 0.9rem; }

/* ---------- textsidor ---------- */

.textsida { display: grid; gap: 1.5rem 4rem; }
.textsida h1 { margin-bottom: 1.2rem; }

/* ---------- sidfot: gräskant och jord ---------- */

.sidfot {
  margin-top: clamp(4rem, 9vw, 7rem);
  border-top: 9px solid var(--blad);
  background: var(--mull);
  color: var(--vitt);
  font-size: 0.86rem;
  line-height: 1.5;
}
.sidfot .inre {
  max-width: var(--sidbredd);
  margin: 0 auto;
  padding: 1.6rem var(--kant) 2.2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.8rem 3rem;
}
.sidfot p { margin: 0; max-width: 34em; }
.sidfot ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.6rem; }
.sidfot a { color: var(--vitt); }
.sidfot a:hover { color: var(--ljusgul); }
.sidfot :focus-visible { outline-color: var(--ljusgul); }

/* ---------- sidan som inte finns ---------- */

.borta { display: grid; gap: 1.5rem 4rem; align-items: center; }
.borta img { width: 100%; max-width: 20rem; }
.borta h1 { margin-bottom: 1rem; }
.borta ul { padding-left: 1.2em; }

/* ---------- bredare skärmar ---------- */

@media (min-width: 44em) {
  .brodtext { hyphens: manual; }
  .ljus span { display: block; }
  .ljus { height: 4.2rem; }
  .arsremsa .ljus { height: 3.4rem; }
  .manader { font-size: 0.78rem; }
  .notis { grid-template-columns: 11rem minmax(0, 1fr); }
  .grannar { grid-template-columns: 1fr 1fr; }
  .grannar .nasta { text-align: right; }
  .grodnoter { grid-template-columns: 1fr 1fr; }
  .grodnot { display: grid; grid-template-columns: 5.2rem minmax(0, 1fr); gap: 0 1.1rem; align-items: start; }
  .grodnot > div { grid-column: 2; }
  .grodnot img { float: none; grid-column: 1; width: 5.2rem; margin: 0; }
  .borta { grid-template-columns: 20rem minmax(0, 32em); }
}

@media (min-width: 60em) {
  body { font-size: 1.1875rem; }
  h2 { font-size: 1.6rem; }

  .inledning { grid-template-columns: minmax(0, 4fr) minmax(0, 9fr); }
  .hallpunkter { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  .odlingsar { --etikett: 10.5rem; }
  .gronsak,
  .dagboksrad {
    display: grid;
    grid-template-columns: var(--etikett) minmax(0, 1fr);
    align-items: center;
    border-bottom: 0;
  }
  .gronsak .rad,
  .dagboksrad .rad { grid-column: 2; border-bottom: 1px solid var(--linje); }
  .dagboksrad .rad { border-bottom: 0; }
  .grodor + .dagboksrad { border-top: 0; }
  .grodor + .dagboksrad .rad { border-top: 2px solid var(--black); }

  /* sticketiketten: vit plastetikett med spetsen in mot bädden */
  .etikett {
    position: relative;
    height: 26px;
    margin-right: 25px;
    padding: 0 0.3rem 0 0.6rem;
    background: var(--vitt);
    border: 1.5px solid var(--black);
    border-right: 0;
    border-radius: 3px 0 0 3px;
    font-size: 0.82rem;
    line-height: 23px;
    white-space: nowrap;
  }
  .etikett::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    width: 18.38px;
    height: 18.38px;
    transform: translate(50%, -50%) rotate(45deg);
    background: var(--vitt);
    border-top: 1.5px solid var(--black);
    border-right: 1.5px solid var(--black);
  }
  .etikett.slat { background: transparent; border-color: transparent; font-weight: 400; color: var(--dov); }
  .etikett.slat::after { display: none; }

  .rad { grid-template-rows: 11px 11px; row-gap: 4px; padding: 7px 0 8px; }
  .forsadd, .sadd { background-size: 11px 11px; }
  .forklaring .marke { height: 11px; }

  .spalter { grid-template-columns: 14rem minmax(0, 34em); }
  .marginal { display: block; position: sticky; top: 1.5rem; align-self: start; }
  .teckning { margin: 0 0 1.4rem -0.4rem; }

  .grannar { margin-left: 18rem; max-width: 34em; }

  .textsida { grid-template-columns: 14rem minmax(0, 34em); }
  .textsida .marginal { position: static; }
}

@media (min-width: 80em) {
  .lotten { margin-right: -4rem; }
}

@media (max-width: 59.99em) {
  .etikett.slat { color: var(--dov); font-weight: 400; }
}

@media (max-width: 23em) {
  .manader { font-size: 0.64rem; }
  .skylt { font-size: 1.3rem; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; transition: none; animation: none; }
}

@media print {
  .sidhuvud .meny, .sidfot, .grannar, .hoppa { display: none; }
  body { background: #fff; }
}

/* ---------- lägen i året: trettiosex tredjedels månader ---------- */
.fr-1 { grid-column-start: 1; } .ti-1 { grid-column-end: 2; } .lage-1 { grid-column: 1; }
.fr-2 { grid-column-start: 2; } .ti-2 { grid-column-end: 3; } .lage-2 { grid-column: 2; }
.fr-3 { grid-column-start: 3; } .ti-3 { grid-column-end: 4; } .lage-3 { grid-column: 3; }
.fr-4 { grid-column-start: 4; } .ti-4 { grid-column-end: 5; } .lage-4 { grid-column: 4; }
.fr-5 { grid-column-start: 5; } .ti-5 { grid-column-end: 6; } .lage-5 { grid-column: 5; }
.fr-6 { grid-column-start: 6; } .ti-6 { grid-column-end: 7; } .lage-6 { grid-column: 6; }
.fr-7 { grid-column-start: 7; } .ti-7 { grid-column-end: 8; } .lage-7 { grid-column: 7; }
.fr-8 { grid-column-start: 8; } .ti-8 { grid-column-end: 9; } .lage-8 { grid-column: 8; }
.fr-9 { grid-column-start: 9; } .ti-9 { grid-column-end: 10; } .lage-9 { grid-column: 9; }
.fr-10 { grid-column-start: 10; } .ti-10 { grid-column-end: 11; } .lage-10 { grid-column: 10; }
.fr-11 { grid-column-start: 11; } .ti-11 { grid-column-end: 12; } .lage-11 { grid-column: 11; }
.fr-12 { grid-column-start: 12; } .ti-12 { grid-column-end: 13; } .lage-12 { grid-column: 12; }
.fr-13 { grid-column-start: 13; } .ti-13 { grid-column-end: 14; } .lage-13 { grid-column: 13; }
.fr-14 { grid-column-start: 14; } .ti-14 { grid-column-end: 15; } .lage-14 { grid-column: 14; }
.fr-15 { grid-column-start: 15; } .ti-15 { grid-column-end: 16; } .lage-15 { grid-column: 15; }
.fr-16 { grid-column-start: 16; } .ti-16 { grid-column-end: 17; } .lage-16 { grid-column: 16; }
.fr-17 { grid-column-start: 17; } .ti-17 { grid-column-end: 18; } .lage-17 { grid-column: 17; }
.fr-18 { grid-column-start: 18; } .ti-18 { grid-column-end: 19; } .lage-18 { grid-column: 18; }
.fr-19 { grid-column-start: 19; } .ti-19 { grid-column-end: 20; } .lage-19 { grid-column: 19; }
.fr-20 { grid-column-start: 20; } .ti-20 { grid-column-end: 21; } .lage-20 { grid-column: 20; }
.fr-21 { grid-column-start: 21; } .ti-21 { grid-column-end: 22; } .lage-21 { grid-column: 21; }
.fr-22 { grid-column-start: 22; } .ti-22 { grid-column-end: 23; } .lage-22 { grid-column: 22; }
.fr-23 { grid-column-start: 23; } .ti-23 { grid-column-end: 24; } .lage-23 { grid-column: 23; }
.fr-24 { grid-column-start: 24; } .ti-24 { grid-column-end: 25; } .lage-24 { grid-column: 24; }
.fr-25 { grid-column-start: 25; } .ti-25 { grid-column-end: 26; } .lage-25 { grid-column: 25; }
.fr-26 { grid-column-start: 26; } .ti-26 { grid-column-end: 27; } .lage-26 { grid-column: 26; }
.fr-27 { grid-column-start: 27; } .ti-27 { grid-column-end: 28; } .lage-27 { grid-column: 27; }
.fr-28 { grid-column-start: 28; } .ti-28 { grid-column-end: 29; } .lage-28 { grid-column: 28; }
.fr-29 { grid-column-start: 29; } .ti-29 { grid-column-end: 30; } .lage-29 { grid-column: 29; }
.fr-30 { grid-column-start: 30; } .ti-30 { grid-column-end: 31; } .lage-30 { grid-column: 30; }
.fr-31 { grid-column-start: 31; } .ti-31 { grid-column-end: 32; } .lage-31 { grid-column: 31; }
.fr-32 { grid-column-start: 32; } .ti-32 { grid-column-end: 33; } .lage-32 { grid-column: 32; }
.fr-33 { grid-column-start: 33; } .ti-33 { grid-column-end: 34; } .lage-33 { grid-column: 33; }
.fr-34 { grid-column-start: 34; } .ti-34 { grid-column-end: 35; } .lage-34 { grid-column: 34; }
.fr-35 { grid-column-start: 35; } .ti-35 { grid-column-end: 36; } .lage-35 { grid-column: 35; }
.fr-36 { grid-column-start: 36; } .ti-36 { grid-column-end: 37; } .lage-36 { grid-column: 36; }