/* ETH-Design-Tokens für it.arch.ethz.ch
   Werte aus dem zentralen ETH-Webdesign (css.css von arch.ethz.ch), Farbwelt des D-ARCH (Klasse «eth-red»).
   Breakpoints wie ETH: 480, 768, 1024, 1280, 1440 px. */
:root {
  /* Themenfarbe D-ARCH (Rot) mit ETH-Abstufungen */
  --theme:      #b7352d;
  --theme-120:  #96272d;
  --theme-80:   #c55d57;
  --theme-60:   #d48681;
  --theme-40:   #e2aeab;
  --theme-20:   #f1d7d5;
  --theme-10:   #f8ebea;

  /* ETH-Grautöne und Dunkel */
  --dark:       #222222;
  --grey:       #6f6f6f;
  --grey-120:   #575757;
  --grey-40:    #c5c5c5;
  --grey-20:    #e2e2e2;
  --grey-10:    #f1f1f1;
  --grey-5:     #f6f6f6;

  /* Weitere ETH-Farben für Zustände */
  --eth-blue:   #215caf;
  --eth-green:  #627313;
  --eth-green-10: #eff1e7;
  --eth-bronze: #8e6713;
  --eth-bronze-10: #f4f0e7;

  /* Semantische Rollen */
  --color-text:        var(--dark);
  --color-text-muted:  var(--grey);
  --color-bg:          #ffffff;
  --color-bg-subtle:   var(--grey-10);
  --color-border:      var(--grey-20);
  --color-link:        var(--theme);
  --color-link-hover:  var(--theme-120);
  --color-focus:       var(--dark); /* Fokusring schwarz wie bei ETH (.SearchBarInput:focus-within), nicht rot */

  /* Typografie: DINPro, Überschriften im Normalschnitt; Fliesstext 18/20 px wie «p» auf ethz.ch */
  --font-sans: "DINPro", Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-base: 1.125rem;
  --leading-base: 1.5;
  --text-h1: 2rem;
  --text-h2: 1.5rem;
  --text-h3: 1.25rem;
  --text-lead: 1.125rem;
  --text-small: 0.875rem;
  --text-tiny: 0.75rem;
  --p-margin: 1rem;
  --h-margin: 1.25rem;
  --h3-margin: 0.75rem;

  /* Raster: header__container / site-content auf ethz.ch */
  --container-max: 87.25rem;
  --container-pad: 1.5rem;
  --text-max: 48.75rem;
  --radius: 0.125rem;

  /* Kopf: Logo-Zeile (Höhe, Ränder) und Abstand des Bereichstitels */
  --logo-height: 34px;
  --logo-top: 1.25rem;
  --logo-bottom: 1.25rem;
  --headline-left: 1.5rem;
  --headline-bottom: 5px;
  --headline-size: 0.6875rem;
  --nav-size: 1.125rem;
  --topbar-size: 0.75rem;
  --content-top: 2rem;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 1.5rem;
  --space-5: 2rem;
  --space-6: 3rem;
  --space-7: 4rem;
}
@media (min-width: 30rem)  { :root { --logo-height: 35px; --headline-size: 0.75rem; --headline-left: 52px; } }
@media (min-width: 48rem)  { :root { --text-base: 1.25rem; --text-h1: 2.5rem; --text-h2: 2rem; --text-h3: 1.5rem; --text-lead: 1.25rem; --text-small: 1rem; --text-tiny: 0.875rem; --p-margin: 1.5rem; --h-margin: 1.5rem; --h3-margin: 1.25rem; --logo-height: 44px; --headline-size: 0.875rem; --headline-left: 68px; --headline-bottom: 7px; --nav-size: 1.25rem; } }
@media (min-width: 64rem)  { :root { --container-max: 89.25rem; --container-pad: 2.5rem; --logo-height: 60px; --logo-top: 2rem; --logo-bottom: 0.75rem; --headline-size: 1.125rem; --headline-left: 90px; --headline-bottom: 10px; --nav-size: 1rem; --content-top: 3.75rem; } }
@media (min-width: 80rem)  { :root { --container-max: 96.25rem; --container-pad: 6rem; --logo-height: 64px; --logo-top: 2.5rem; --logo-bottom: 1.25rem; --headline-size: 1.25rem; --headline-left: 96px; --nav-size: 1.125rem; --topbar-size: 0.875rem; --content-top: 2.75rem; } }
@media (min-width: 90rem)  { :root { --logo-height: 72px; --logo-top: 3rem; --logo-bottom: 1.75rem; --headline-left: 108px; --nav-size: 1.25rem; } }

@font-face { font-family: "DINPro"; font-weight: 400; font-style: normal; font-display: swap; src: url("../fonts/regular.woff2") format("woff2"); }
@font-face { font-family: "DINPro"; font-weight: 400; font-style: italic; font-display: swap; src: url("../fonts/regularItalic.woff2") format("woff2"); }
@font-face { font-family: "DINPro"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/medium.woff2") format("woff2"); }
@font-face { font-family: "DINPro"; font-weight: 500; font-style: italic; font-display: swap; src: url("../fonts/mediumItalic.woff2") format("woff2"); }
@font-face { font-family: "DINPro"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/bold.woff2") format("woff2"); }
@font-face { font-family: "DINPro"; font-weight: 700; font-style: italic; font-display: swap; src: url("../fonts/boldItalic.woff2") format("woff2"); }