@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-book-basic.c62561d04e5eb023ca3e2fde512605c0.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-book-extended.b0f1fe099d20b0de899ed94f6292ba63.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-book-other.6c8ff800d4fec0ff804a756fc400d2b5.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-med-basic.4262342c15da29dbdffaff795d31ad13.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-med-extended.e84bf4c79c0055f692e535db121cff4a.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Franklin Gothic FS';
  src: url('https://assets.tagesspiegel.de/fonts/franklingothic-med-other.cf0c8764bdcabb0619e46b20c18d5147.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Regular-basic.c371b6fb87298eb4990a97124a47e7e4.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Regular-extended.413ee6f014cfa7c05f2979ccb6498cee.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Regular-other.61f64d4bd1292c6d4197f0e2b25dbd5c.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Italic-basic.6c5932e5019579d6c76d1822e5aacc4d.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Italic-extended.78a8e02738052517cef32ad41e080698.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Italic-other.6550b277e9b9798aaca8c9bd4a29370d.woff2') format('woff2');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Bold-basic.ed72f8ea0597f63d7cc1a47ae7bb3acd.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Bold-extended.7e1a83a609780222181670109982a7a2.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_Bold-other.63f970ecd2e74982468d1d71a0d57603.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_BoldItalic-basic.1cd71e407d313b5db30f65b5a9bc639f.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0020-0022,U+0024-003B,U+003F-005A,U+0061-007A,U+00A0,U+00AB,U+00AD,U+00BB,U+00C4,U+00D6,U+00DC,U+00DF,U+00E4,U+00E9,U+00F6,U+00FC,U+2013,U+2014,U+2018-201A,U+201C-201E,U+2026,U+20AC;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_BoldItalic-extended.b170c650a27d0d4e8388a0d71fedf766.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0023,U+003C-003E,U+005B-0060,U+007B-007E,U+00A1-00AA,U+00AC,U+00AE-00BA,U+00BC-00C3,U+00C5-00D5,U+00D7-00DE,U+00E0-00E3,U+00E5-00E8,U+00EA-00F5,U+00F7-00FB,U+00FD-017F,U+2000-2012,U+2015,U+2020-2025,U+2027-203A,U+2070-207B,U+2080-208B,U+2150-215F;
}

@font-face {
  font-family: 'Abril Text';
  src: url('https://assets.tagesspiegel.de/fonts/Abril_Text_BoldItalic-other.743b66d7be6806c719e244333d62bffd.woff2') format('woff2');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
  unicode-range: U+0180-1FFF,U+2016-2017,U+201B,U+201F,U+203B-206F,U+207C-207F,U+208C-20AB,U+20AD-214F,U+2160-27FF,U+2900-2BFF,U+2C60-2C7F,U+2E00-2E7F;
}

*, ::before, ::after {
  box-sizing: border-box;
  font-variant-numeric: lining-nums proportional-nums;
}

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

:root {
  --background-color: white;
  --color: #2a2a2a;
  --graytext: #767676;
  --max-width: 32em;
  background-color: var(--background-color);
  color: var(--color);
  font: 1em/1.4 'Abril Text', Georgia, serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background-color: #0d0d0d;
    --color: #cdcdcd;
    --graytext: #9b9b9b;
  }
}

body {
/*  max-width: var(--max-width);*/
  margin: 0;
  padding: 1em max((100vw - var(--max-width))/2, 1em);
  position: relative;
}

body > header {
  padding-block: 1em;
  border-bottom: thin solid var(--graytext);
}

body > header svg {
  display: block;
  margin: auto;
  width: min(16em, 100%);
  fill: currentColor;
}

h1 {
  margin-block: 2rem 0;
  font-size: 2em;
  font-weight: bold;
  line-height: 1.2;
}

h1::before {
  content: '';
  display: block;
  border: 0.15rem solid;
  width: 2rem;
  margin-block: 0.85rem;
}

.claim {
  margin-block: 0.5em 2em;
  font-family: Franklin Gothic FS, sans-serif;
  font-weight: bold;
  color: var(--graytext);
}

p {
  margin-block: 1.4em;
  margin-block: 1lh;
}

a {
  color: currentColor;
  text-underline-offset: 0.25em;
}

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

input {
  border: thin solid var(--graytext);
  border-radius: 0.25em;
  padding: 0.5em;
  font-family: Franklin Gothic FS, sans-serif;
  font-size: 1em;
  background-color: var(--background-color);
  color: var(--color);
}

label {
  font-family: Franklin Gothic FS, sans-serif;
  font-weight: bold;
}

button {
  background: #CE0000;
  color: white;
  border-color: transparent;
  border-radius: 0.25em;
  padding: 0.5em;
  font-family: Franklin Gothic FS, sans-serif;
  font-size: 1em;
  font-weight: bold;
  cursor: pointer;
  transition:background-color 150ms ease-in-out 0s;
}

button:hover {background-color: #970303;
}

.checklist {
  list-style: none;
  padding: 0;
}

.checklist li {
  margin-block: 0.5em;
  padding-left: 2em;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Ccircle cx='11' cy='11' r='11' fill='%2325AE88' fill-rule='nonzero'/%3E%3Cpath stroke='%23FFF' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M16.72 6.6l-7.04 7.92L5.28 11'/%3E%3C/g%3E%3C/svg%3E")
    left/1.4em
    no-repeat
  ;
}

.gallery {
  overflow: hidden;
  position: relative;
}

.gallery ul {
  overflow-x: auto;
  scrollbar-width: none; /* Firefox */
}
/* Chromia, Safari; non-standard */
.gallery ul::-webkit-scrollbar {
  display: none;
}

.gallery button {
  position: absolute;
  top: 0;
  border: none;
  width: 3em;
  height: 100%;
  padding: 0;
  background: var(--background-color);
  background: linear-gradient(to var(--direction), transparent, var(--background-color) 70%);
  color: var(--color);
  text-align: var(--direction);
}

.gallery button svg {
  height: 1em;
}

.gallery__scroll-left {
  --direction: left;
  left: 0;
}

.gallery__scroll-right {
  --direction: right;
  right: 0;
}

.editorial-board ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 2em;
}

.editorial-board li {
  width: clamp(6em, 15% - 2em, 9em);
}

.editorial-board picture {
  display: flex;
  justify-content: center;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  margin-bottom: 0.5em;
}

.editorial-board img {
  width: auto;
  height: 100%;
  max-width: revert;
}

.editorial-board .name {
  display: block;
}

form[name="subscription"] {
  margin: 2em 0;
  display: grid;
  grid-template:
    "label"
    "input"
    "notice"
    "submit";
  gap: 0 1em;
}


@media (min-width: 24em) {
  form[name="subscription"] {
    grid-template:
      "label ."
      "input submit"
      "notice notice"
      /1fr auto;
  }
}

form[name="subscription"] label {
  grid-area: label;
}

form[name="subscription"] input {
  grid-area: input;
}

form[name="subscription"] button {
  grid-area: submit;
}

form[name="subscription"] p {
  grid-area: notice;
  font-family: Franklin Gothic FS, sans-serif;
  margin-block: 1em 0;
}

#subscription-copy1 {
  display: none;
}

body > footer {
  padding-top: 1.5em;
  border-top: thin solid var(--graytext);
  display: flex;
  flex-wrap: wrap;
  gap: 0.5em 2em;
  justify-content: center;
}

@media (min-width: 50em) {
  body {
    margin: auto;
    max-width: 64.5em;
    padding: 1em;
  }
  main {    
    display: grid;
    grid-template-columns:
      [full-start left-start] 1fr [left-end right-start] 1fr [right-end full-end];
  }

  main > * {
    grid-column: full;
  }

  main > :nth-child(1),
  main > :nth-child(2) {
    grid-row: 1;
  }

  main > :nth-child(3),
  main > :nth-child(4) {
    grid-row: 2;
  }

  .left {
    grid-column: left;
  }

  .right {
    grid-column: right;
  }

  .text.left {
    padding-right: 2em;
  }

  .text.right {
    padding-left: 2em;
  }

  .packshot {
    aspect-ratio: 1;
    overflow: hidden;
    width: 100%;
    height: 100%;
    padding: 10% 16%
  }

  form[name="subscription"] {
    margin-bottom: 1em;
    grid-column: left;
  }
}


  .frame-outer {
  border: 1px solid rgb(199, 199, 199);
  border-radius: 15px;
  display: inline-block;
  margin: 0px auto;
  /*width: 100%;*/
  background-color: #fff;
  }

  .frame-inner {
  margin: 7px;
  border-radius: 10px;
  padding: 1px 1px;
  display: flex;
  align-self: flex-start;
  overflow: hidden;
  width: 100%;
  /*box-shadow: rgb(0, 0, 0) 0px 2px 18px;*/
  }

  

  .iframe {
  border: none;
  }