/* Seiten-CSS für it.arch.ethz.ch im ETH-Webdesign (Vorbild arch.ethz.ch). Gerüst siehe docs/html-vertrag.md. */
/* tokens.css wird im Layout separat eingebunden (Cache-Buster) */

*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-padding-top: var(--space-4); }
html, body { overflow-x: clip; } /* wie ETH: Bänder über die ganze Fensterbreite (.highlight) dürfen keinen Querscroller erzeugen */
body { margin: 0; background: var(--color-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); font-feature-settings: "liga" 0; min-height: 100vh; display: flex; flex-direction: column; }
.site-content { flex: 1 0 auto; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
h1, h2, h3, h4 { font-weight: 400; margin: 0 0 var(--h-margin); color: var(--color-text); }
h1 { font-size: var(--text-h1); line-height: 1.2; }
h2 { font-size: var(--text-h2); line-height: 1.2; padding-top: var(--space-4); }
h3 { font-size: var(--text-h3); line-height: 1.3; margin-bottom: var(--h3-margin); padding-top: var(--space-4); }
h1 + h2, h2 + h3, .article__meta + h2, .tabs__panel > h2:first-child, .tabs__panel > h3:first-child { padding-top: 0; }
p, ul, ol { margin: 0 0 var(--p-margin); }
li { margin-bottom: var(--space-1); }
/* Inhaltslisten wie ETH (.text-image ul/ol): erste Ebene ohne Einzug, Gedankenstrich statt Punkt, Zähler mit Punkt;
   Komponentenlisten (mit Klasse) sind ausgenommen */
ul:not([class]), ol:not([class]) { list-style: none; padding: 0; }
ul:not([class]) > li, ol:not([class]) > li { position: relative; padding-left: 1.5rem; margin-bottom: var(--space-2); }
ul:not([class]) > li::before { content: "–"; position: absolute; left: 0; top: 0; }
ol:not([class]) { counter-reset: item; }
ol:not([class]) > li { counter-increment: item; }
ol:not([class]) > li::before { content: counter(item) "."; position: absolute; left: 0; top: 0; }
ol ol:not([class]) > li::before { content: counter(item, lower-alpha) "."; }
li > ul:not([class]), li > ol:not([class]) { margin: var(--space-1) 0 0; }
li > ul:not([class]) > li:last-child, li > ol:not([class]) > li:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
figure { margin: 0 0 var(--p-margin); } /* kein Browser-Standardrand (1em 40px): Bilder bündig mit dem Text */
strong, b { font-weight: 700; }
code, kbd { font-family: var(--font-mono); font-size: 0.9em; background: var(--grey-10); padding: 0.1em 0.35em; border-radius: var(--radius); }
pre { background: var(--grey-10); padding: var(--space-3); overflow: auto; margin: 0 0 var(--space-4); font-size: var(--text-small); }
pre code { background: none; padding: 0; }
table { border-collapse: collapse; width: 100%; margin: 0 0 var(--space-4); font-size: var(--text-small); }
th, td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
tbody td { box-sizing: border-box; height: calc(2 * var(--leading-base) * 1em + 2 * var(--space-2) + 1px); vertical-align: middle; } /* Zeilen mindestens zwei Zeilen hoch, fürs Auge gleichmässig */
.table-wrap { overflow-x: auto; margin: 0 0 var(--space-4); } /* breite Tabellen scrollen auf dem Handy in sich (Isg\Html::wrapTables) */
.table-wrap > table { margin-bottom: 0; }
/* Tabellen bündig mit dem Text: erste Spalte ohne linken, letzte ohne rechten Innenabstand */
tr > :first-child { padding-left: 0; }
tr > :last-child { padding-right: 0; }
th { font-weight: 700; }
hr { border: 0; height: 0; margin: var(--space-6) 0; } /* keine Trennlinien im Inhalt (ETH-Design), nur Abstand */
::selection { background: var(--theme-20); }

/* Textlinks wie .eth-link: Farbe erben, feine Unterstreichung */
.article p a, .article li a, .article td a, .callout a, .restricted a, .ticket a, .login-form a { border-bottom: 1px solid rgba(0,0,0,.6); transition: color 80ms, border-color 80ms; }
.article p, .article li, .article h1, .article h2, .article h3, .download { overflow-wrap: anywhere; } /* lange URLs und Wörter brechen um, statt die Seite auf dem Handy zu verbreitern; Tabellen nicht: sie scrollen in .table-wrap, E-Mail-Adressen bleiben ganz */
.article p a:hover, .article li a:hover, .article td a:hover, .callout a:hover, .restricted a:hover, .ticket a:hover, .login-form a:hover { color: var(--theme); border-bottom-color: var(--theme); }
.article .breadcrumb a, .article .linklist a, .article .howto-list a, .article .topic a, .nav-primary a, .topbar a { border-bottom: 0; }
.article .platform-list a { border-bottom: 1px solid var(--grey-20); }
.article .platform-list a:hover { border-bottom-color: var(--theme); }

/* Container: wie header__container / footer__container auf ethz.ch */
.container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-pad); padding-right: var(--container-pad); }

/* Skip-Link */
.skip-link { position: absolute; left: -999px; top: 0; background: var(--dark); color: #fff; padding: var(--space-2) var(--space-3); z-index: 100; }
.skip-link:focus { left: var(--space-3); }

/* Oberste Leiste (header__nav-meta auf ethz.ch): Departements-Pfad links, Sprache und Konto rechts; ab 1024 px */
.topbar { display: none; background: var(--dark); color: #fff; font-size: var(--topbar-size); line-height: 1.5; }
@media (min-width: 64rem) { .topbar { display: block; } }
.topbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.topbar ol, .topbar ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; white-space: nowrap; }
.topbar li { margin: 0; display: flex; align-items: center; }
.topbar a { color: #fff; display: block; padding: .375rem .75rem; }
.topbar__path li:first-child a { padding-left: 0; }
.topbar__meta li:last-child a:last-child { padding-right: 0; }
.topbar a:hover { color: rgba(255,255,255,.75); }
.topbar__path li + li::before { content: ""; display: inline-block; width: .3em; height: .3em; border: solid #fff; border-width: 1px 1px 0 0; transform: rotate(45deg); margin-right: .1em; }
.topbar__meta .topbar__user { color: rgba(255,255,255,.75); }
.topbar__user-name { padding: .375rem 0 .375rem .75rem; }

/* Kopf (header__logos): Logo und Bereichstitel auf einer Grundlinie, Masse wie ethz.ch je Breakpoint */
.site-header { background: #fff; }
.header__logos { display: flex; align-items: flex-end; height: var(--logo-height); margin: var(--logo-top) 0 var(--logo-bottom); font-size: var(--headline-size); line-height: 1.2; }
.header__logo { height: 100%; display: flex; align-items: flex-end; flex: 0 0 auto; }
.header__logo img { height: 60%; width: auto; display: block; } /* ETH-Logo-Datei enthält Weissraum: Buchstaben = halbe Zeilenhöhe */
.header__headline { margin-left: var(--headline-left); margin-bottom: 0; line-height: 1.2; flex: 1 1 auto; min-width: 0; }
@media (min-width: 90rem) { .header__headline { font-size: 1.375rem; } }

/* Hauptnavigation (header__nav-primary): Themen in einer Zeile ohne Linie, aktives Thema unterstrichen;
   unter 1024 px dunkle Leiste (header__navbar, 50 px) mit «Menü» und Lupe, Liste weiss darunter */
.nav-primary { position: relative; }
@media (min-width: 64rem) { .nav-primary { margin-top: .5rem; } }
.nav-primary__toggle { display: none; }
.nav-primary__list { list-style: none; margin: 0; padding: 0 3rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 2rem; }
.nav-primary__list > li { margin: 0; }
.nav-primary__link { display: block; padding: .75rem 0; font-size: var(--nav-size); line-height: 1.3; white-space: nowrap; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-primary__link:hover { color: var(--theme); }
.nav-primary__link[aria-current] { text-decoration: underline; }
.nav-primary__meta { display: none; }
.nav-primary__search { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; align-items: center; }
.nav-primary__search a { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--dark); }
.nav-primary__search a:hover { color: var(--theme); }
.nav-primary__search svg { width: 1.5rem; height: 1.5rem; }
.nav-primary__search-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 63.9375rem) {
  .nav-primary { margin: 0 calc(-1 * var(--container-pad)); }
  .nav-primary__toggle { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: .3rem; width: 100%; height: 50px; padding: 0 var(--container-pad); background: var(--dark); color: #fff; border: 0; font: inherit; font-size: .6875rem; line-height: 1; text-align: left; cursor: pointer; }
  .nav-primary__toggle .burger { display: inline-block; width: 1.5rem; height: 1rem; position: relative; }
  .nav-primary__toggle .burger::before, .nav-primary__toggle .burger::after, .nav-primary__toggle .burger span { content: ""; position: absolute; left: 0; width: 100%; height: 2px; background: #fff; transition: transform .15s; }
  .nav-primary__toggle .burger::before { top: 0; } .nav-primary__toggle .burger span { top: 7px; } .nav-primary__toggle .burger::after { bottom: 0; }
  .nav-primary__toggle[aria-expanded="true"] .burger::before { transform: translateY(7px) rotate(45deg); }
  .nav-primary__toggle[aria-expanded="true"] .burger::after { transform: translateY(-7px) rotate(-45deg); }
  .nav-primary__toggle[aria-expanded="true"] .burger span { opacity: 0; }
  .nav-primary__list { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: var(--space-2) var(--container-pad) var(--space-4); border-bottom: 1px solid var(--color-border); }
  .nav-primary__list.is-open, .no-js .nav-primary__list { display: flex; }
  .nav-primary__link { padding: var(--space-2) 0; border-bottom: 1px solid var(--color-border); font-size: 1.125rem; text-decoration: none; white-space: normal; }
  .nav-primary__link[aria-current] { color: var(--theme); text-decoration: none; }
  .nav-primary__meta { display: block; margin-top: var(--space-3); font-size: 1rem; }
  .nav-primary__meta a { color: var(--grey-120); }
  .nav-primary__search { right: var(--container-pad); top: 25px; height: 2.5rem; }
  .nav-primary__search a { color: #fff; }
}

/* Inhaltsbereich (site-content): Textspalte 48.75rem zentriert (ab 1024 px), breite Seiten mit --wide */
.site-content { padding: var(--content-top) 0 var(--space-7); }
.site-content__inner { display: grid; grid-template-columns: minmax(0, 1fr); }
.article { max-width: var(--text-max); min-width: 0; }
.article--wide { max-width: none; }
.article--narrow { max-width: 30rem; }
@media (min-width: 64rem) {
  .site-content__inner { grid-template-columns: minmax(0, 1fr) minmax(0, var(--text-max)) minmax(0, 1fr); }
  .site-content__inner > .article { grid-column: 2; }
  .site-content__inner--wide { grid-template-columns: minmax(0, 1fr); }
  .site-content__inner--wide > .article { grid-column: 1; }
}

/* Pfad (breadcrumb--text-width): nur ab 1024 px, in der Textspalte */
.breadcrumb { display: none; font-size: var(--text-tiny); color: var(--color-text-muted); margin: 0 0 var(--space-5); }
@media (min-width: 64rem) { .breadcrumb { display: block; } }
@media (min-width: 90rem) { .breadcrumb { margin-top: var(--space-4); } }
.breadcrumb__list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; padding: 0; }
.breadcrumb li { margin: 0; padding: 0; }
.breadcrumb li + li::before { content: ""; display: inline-block; width: .35em; height: .35em; border: solid var(--grey); border-width: 1px 1px 0 0; transform: rotate(45deg); margin: 0 var(--space-2) .1em 0; }
.breadcrumb a:hover { color: var(--theme); }
.breadcrumb [aria-current] { color: var(--color-text); }

/* Artikelkopf */
.article__summary { font-size: var(--text-lead); line-height: 1.5; margin: 0 0 var(--space-4); max-width: var(--text-max); }
.article__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: var(--space-5); }
.platform-list { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); list-style: none; margin: 0; padding: 0; }
.platform-list li { margin: 0; font-size: var(--text-tiny); line-height: 1.5rem; }
.platform-list a { display: block; border: 1px solid var(--grey-20); color: var(--grey-120); padding: 0 var(--space-2); border-radius: var(--radius); background: #fff; transition: color 80ms, border-color 80ms; }
.platform-list a:hover, .platform-list a:focus-visible { color: var(--theme); border-color: var(--theme); }
.article__audience { color: var(--theme-120); font-weight: 500; }
/* Redaktionsleiste am Artikelende (nur angemeldete Redaktion): Bearbeiten im Panel, Markdown-Ansicht */
.article__tools { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-6); padding-top: var(--space-3); border-top: 1px solid var(--grey-20); font-size: var(--text-tiny); }
.article__tools-label { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-right: var(--space-1); }
.article__tool { display: inline-flex; align-items: center; gap: .35em; border: 1px solid var(--grey-40); border-radius: var(--radius); background: #fff; color: var(--grey-120); padding: .15rem var(--space-2); line-height: 1.5; transition: color 80ms, border-color 80ms, background 80ms; }
.article__tool:hover, .article__tool:focus-visible { color: var(--theme); border-color: var(--theme); }
.article__tool--edit { color: var(--theme); border-color: var(--theme); }
.article__tool--edit:hover, .article__tool--edit:focus-visible { background: var(--theme); border-color: var(--theme); color: #fff; }

/* Linklisten wie auf ethz.ch (.linklist__wrapper): rote Links mit Chevron, ohne Trennlinien, .75rem Abstand */
.linklist { list-style: none; margin: 0 0 var(--space-5); padding: 0; }
.linklist li { margin: 0 0 .75rem; }
.linklist li:last-child { margin-bottom: 0; }
/* wie ETH .linklist__wrapper .eth-link: inline-flex, Icon oben rechts neben dem Textblock */
.linklist a, .linklist__link { display: inline-flex; align-items: flex-start; gap: var(--space-2); color: var(--theme); font-size: 1.125rem; line-height: 1.3; }
.linklist a::after, .linklist__link::after { content: ""; flex: none; margin-top: .45em; width: .5em; height: .5em; border: solid var(--theme); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.linklist a:hover, .linklist__link:hover { color: var(--theme-120); }
.linklist--columns { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: .75rem var(--space-5); }
.linklist--columns li { margin: 0; }

/* Artikelliste (Thema, Suche): Titel als roter Link, Zusammenfassung und Plattformen darunter, Abstand statt Linien */
.howto-list { list-style: none; margin: var(--space-5) 0 var(--space-6); padding: 0; }
.howto-list > li { margin: 0 0 var(--space-5); padding: 0; }
.howto-list > li:last-child { margin-bottom: 0; }
.howto-list__title { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-lead); color: var(--theme); }
.howto-list__title::after { content: ""; flex: none; margin-top: .5em; width: .45em; height: .45em; border: solid var(--theme); border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); }
.howto-list__title:hover { color: var(--theme-120); }
.howto-list__summary { margin: var(--space-1) 0 0; color: var(--color-text); font-size: var(--text-small); max-width: var(--text-max); }
.howto-list .platform-list { margin-top: var(--space-2); }
.lock { font-size: .85em; color: var(--color-text-muted); margin-left: var(--space-1); }

/* Startseite: Suche, Aufgaben, Themen in Spalten */
/* Bühne der Startseite (stage, Vorbild arch.ethz.ch): Bild rechts über 10/12 der Breite, roter Kasten links unten darüber */
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 0 var(--space-6); }
.stage__image { grid-column: 1 / -1; margin: 0; }
.stage__image img { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; object-fit: cover; }
.stage__box { grid-column: 1 / -1; background: var(--theme); color: #fff; padding: var(--space-4) var(--space-4) var(--space-5); }
.stage__box h1 { color: #fff; margin: 0 0 var(--space-3); font-size: var(--text-h2); line-height: 1.2; }
.stage__box p { margin: 0; font-size: var(--text-base); line-height: 1.5; }
.stage__box a { color: #fff; }
@media (min-width: 48rem) {
  .stage__image { grid-column: 3 / -1; }
  .stage__box { grid-column: 1 / 9; margin-top: calc(-1 * var(--space-7)); position: relative; padding: var(--space-5) var(--space-5) var(--space-6); }
  .stage__box h1 { font-size: var(--text-h1); }
}
@media (min-width: 80rem) {
  .stage__box { grid-column: 1 / 8; margin-top: -5.5rem; padding: 2rem 2.5rem 3.5rem 1.75rem; }
  .stage__box h1 { font-size: 2.25rem; margin-bottom: 1.25rem; }
  .stage__box p { font-size: var(--text-lead); }
}
.home__sitemap { max-width: var(--text-max); }
.article figure.portrait { margin: var(--space-5) 0 var(--space-2); }
.article figure.portrait img { width: 8rem; height: auto; display: block; }
/* Hervorgehobener Abschnitt wie «D-ARCH in den Medien» auf arch.ethz.ch (.newsfeedhomepage__wrapper--highlight): Der
   Container behält die Seitenpolsterung, die farbige Box (Themenfarbe 10) ragt um --highlight-pad darüber hinaus und
   polstert innen gleich weit, so bleibt der Text im Raster der Seite. Bei der ETH ist das 1.5 / 2.5 / 3 rem, also bis
   1280 px randbündig, darüber eine Box mit 3 rem Abstand zum Fensterrand. Titel oben 1.5 rem, unten 3 rem Luft.
   Ein Link, der allein in einem Absatz steht, wird zur Schaltfläche wie «Weitere News». */
.highlight { --highlight-pad: 1.5rem; position: relative; left: 50%; right: 50%; width: 100vw; margin: var(--space-7) -50vw 0; }
.highlight__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); }
.highlight__box { background: var(--theme-10); margin: 0 calc(-1 * var(--highlight-pad)); padding: 0 var(--highlight-pad) var(--space-6); }
.highlight__box h2 { margin: 0 0 var(--space-5); }
@media (min-width: 64rem) { .highlight { --highlight-pad: 2.5rem; } }
@media (min-width: 80rem) { .highlight { --highlight-pad: 3rem; } }
.highlight__content { max-width: var(--text-max); }
.highlight__content p > a:only-child { display: inline-block; margin-top: var(--space-3); padding: .6875rem 2rem .625rem; background: var(--color-bg); border: 1px solid var(--grey-40); color: var(--color-text); font-weight: 700; text-decoration: none; }
.highlight__content p > a:only-child:hover { border-color: var(--dark); }
/* Suchfeld (Startseite und Suchseite): eine Komponente .site-search, Linie unten, Fokus wie ETH .SearchBarInput:focus-within */
.site-search { display: flex; max-width: var(--text-max); margin: 0 0 var(--space-5); border-bottom: 2px solid var(--dark); }
.site-search--home { margin-bottom: var(--space-6); }
.site-search input { flex: 1; min-width: 0; font: inherit; font-size: var(--text-lead); padding: var(--space-2) 0; border: 0; background: transparent; color: var(--color-text); outline: none; }
.site-search input::placeholder { color: var(--grey); }
.site-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; } /* kein blaues Browser-Kreuz */
.site-search:focus-within { border-bottom-color: #000; box-shadow: 0 1px 0 #000; }
.site-search button { font: inherit; background: none; border: 0; padding: 0 var(--space-2); cursor: pointer; color: var(--dark); display: inline-flex; align-items: center; font-weight: 500; }
.site-search button:hover { color: var(--theme); }
.site-search svg { width: 1.5rem; height: 1.5rem; }
/* Inhaltsverzeichnis: jedes Thema auf einer hellgrauen Fläche wie ETH .content-nav--related (#f6f6f6, 48px 24px), Titel eine
   Stufe grösser als die Links, Beschreibung und Liste mit Luft; unter dem Seitentitel ein grosser Abstand statt gedrängt */
.topics { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: var(--space-4); margin: var(--space-5) 0 var(--space-7); }
@media (min-width: 64rem) { .topics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); } .linklist--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.topic { background: var(--grey-5); padding: var(--space-4); }
@media (min-width: 48rem) { .topic { padding: var(--space-5); } }
.topics h2, .topic__title { font-size: var(--text-h2); margin: 0 0 var(--space-3); padding-top: 0; }
.topic__summary { font-size: var(--text-small); color: var(--color-text-muted); margin: 0 0 var(--space-4); }
.topic .linklist { margin-bottom: 0; }
.topic .linklist a { font-size: var(--text-base); }

/* Suche */

/* Schaltflächen wie .button auf ethz.ch */
.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); background: var(--dark); color: #fff; border: 1px solid var(--dark); border-radius: var(--radius); font: inherit; font-size: var(--text-base); font-weight: 500; padding: var(--space-2) var(--space-4); cursor: pointer; line-height: 1.5; }
.button:hover { background: #000; border-color: #000; color: #fff; }

/* Blocktypen */
.callout { background: var(--grey-10); border-left: 4px solid var(--dark); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.callout__title { font-weight: 700; display: block; margin-bottom: var(--space-1); }
.callout > :last-child { margin-bottom: 0; }
.callout--warning { border-color: var(--theme); background: var(--theme-10); }
.callout--tip { border-color: var(--eth-green); background: var(--eth-green-10); }

.steps { counter-reset: step; list-style: none; margin: var(--space-4) 0; padding: 0; }
.steps > li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: var(--space-4); min-height: 2rem; }
.steps > li::before { content: counter(step); position: absolute; left: 0; top: 0; width: 2rem; height: 2rem; background: var(--theme); color: #fff; font-weight: 700; display: grid; place-items: center; border-radius: var(--radius); line-height: 1; }
.steps > li > p:last-child { margin-bottom: 0; }
.steps img { margin-top: var(--space-3); border: 1px solid var(--color-border); }
.steps > li > img:last-child { margin-bottom: 0; }
/* Zwischentext zwischen zwei Schrittlisten (Segments::render): gehört zum vorigen Schritt, steht in der Schrittspalte
   (gleicher Einzug wie li), Bilder mit dem Rahmen der Schrittbilder */
.steps__between { padding-left: 3rem; margin: calc(-1 * var(--space-2)) 0 var(--space-4); }
.steps__between > :last-child { margin-bottom: 0; }
.steps__between img { border: 1px solid var(--color-border); }

.tabs { margin: 0 0 var(--space-5); }
.tabs__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); border-bottom: 1px solid var(--color-border); margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.tabs__tab { font: inherit; font-size: var(--text-small); font-weight: 700; background: none; border: 0; border-bottom: 3px solid transparent; margin-bottom: -1px; padding: var(--space-2) 0 calc(var(--space-2) - 2px); cursor: pointer; color: var(--color-text); line-height: 1.5; }
.tabs__tab:hover { color: var(--theme); }
.tabs__tab[aria-selected="true"] { color: var(--theme); border-bottom-color: var(--theme); }
.tabs__panel[hidden] { display: none; }

.restricted { background: var(--grey-5); border: 1px solid var(--color-border); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.restricted--locked { color: var(--color-text-muted); }
.restricted--locked .restricted__hint { margin: 0; }
.restricted__label { font-size: var(--text-tiny); color: var(--theme-120); font-weight: 700; display: block; margin-bottom: var(--space-1); }
.restricted > :last-child { margin-bottom: 0; }

.download { display: inline-block; position: relative; padding-left: 1.4em; max-width: 100%; color: var(--theme); font-weight: 500; margin: 0 0 var(--space-3); border-bottom: 1px solid transparent; } /* Icon hängt links am Text und bleibt bei Umbruch auf der ersten Zeile */
.download::before { content: ""; position: absolute; left: 0; top: .4em; width: .9em; height: .9em; background: currentColor; -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20h14v-2H5v2zm7-18v11.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L12 13.17V2h0z'/></svg>") center/contain no-repeat; mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M5 20h14v-2H5v2zm7-18v11.17l3.59-3.58L17 11l-5 5-5-5 1.41-1.41L12 13.17V2h0z'/></svg>") center/contain no-repeat; }
.download:hover { color: var(--theme-120); }
.download small { color: var(--color-text-muted); font-weight: 400; margin-left: .25em; }

/* PDF-Overlay (site.js): Dialog über der Seite mit dunkler Leiste wie der Seitenkopf, darunter der PDF.js-Viewer im iframe;
   auf dem Handy bildschirmfüllend. Nur die Leiste ist eigenes Design, der Viewer selbst ist in assets/pdfjs/web/eth.css gestaltet. */
.pdf-lightbox { display: flex; flex-direction: column; width: min(100vw - 3rem, 75rem); height: calc(100vh - 3rem); max-width: none; max-height: none; padding: 0; border: 0; background: var(--color-bg); color: var(--color-text); }
.pdf-lightbox:not([open]) { display: none; }
.pdf-lightbox::backdrop { background: rgba(34, 34, 34, .75); }
.pdf-lightbox__bar { display: flex; align-items: center; gap: 1rem; flex: none; min-height: 3rem; padding: 0 .5rem 0 1rem; background: var(--dark); color: #fff; }
.pdf-lightbox__title { flex: 1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: var(--text-base); }
.pdf-lightbox__close { flex: none; width: 2.5rem; height: 2.5rem; border: 0; background: none; color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.pdf-lightbox__close:hover { color: var(--grey-40); }
.pdf-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.pdf-lightbox__frame { flex: 1; width: 100%; border: 0; display: block; }
@media (max-width: 767px) { .pdf-lightbox { width: 100vw; height: 100vh; height: 100dvh; } }

/* Bild-Lightbox (site.js): Original bildschirmfüllend über dunklem Hintergrund, Unterschrift darunter */
.zoom { display: inline-block; cursor: zoom-in; border-bottom: 0; }
.zoom img { display: block; }
.img-lightbox { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: #fff; cursor: zoom-out; }
.img-lightbox:not([open]) { display: none; }
.img-lightbox::backdrop { background: rgba(34, 34, 34, .9); }
.img-lightbox__figure { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-3); width: 100%; height: 100%; margin: 0; padding: 3rem 1.5rem 1.5rem; box-sizing: border-box; }
.img-lightbox__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; background: #fff; box-shadow: 0 0 0 1px rgba(255, 255, 255, .15); cursor: default; }
.img-lightbox__caption { flex: none; max-width: 48rem; text-align: center; font-size: var(--text-small); color: var(--grey-40); }
.img-lightbox__caption[hidden] { display: none; }
.img-lightbox__close { position: absolute; top: .25rem; right: .5rem; width: 2.5rem; height: 2.5rem; border: 0; background: none; color: #fff; font-size: 1.75rem; line-height: 1; cursor: pointer; }
.img-lightbox__close:hover { color: var(--grey-40); }
.img-lightbox__close:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.platform-marker { border: 0; height: 0; margin: var(--space-5) 0; }

/* Ticket («Nicht gelöst?»): helle Graubox wie ETH .text-box (#f1f1f1, 1.5/2rem Innenabstand), keine Fehlerfarbe */
.ticket { margin-top: var(--space-7); padding: var(--space-4); background: var(--grey-10); color: var(--color-text); font-size: var(--text-base); }
@media (min-width: 48rem) { .ticket { padding: var(--space-5); } }
.ticket a { border-bottom: 1px solid rgba(0,0,0,.6); }
.ticket__lead { display: block; margin-bottom: var(--space-2); }
.ticket > :last-child, .ticket__form > :last-child { margin-bottom: 0; }
.ticket__login, .ticket__ok, .ticket__hint { margin: 0; }
.ticket__ok { padding: var(--space-2) var(--space-3); border-left: 4px solid var(--eth-green); background: var(--eth-green-10); color: var(--color-text); }
.ticket__details > summary { cursor: pointer; color: var(--color-text); font-weight: 700; font-size: var(--text-base); list-style: none; display: inline-flex; align-items: center; gap: var(--space-2); }
.ticket__details > summary::-webkit-details-marker { display: none; }
.ticket__details > summary::after { content: ""; width: .45em; height: .45em; border: solid currentColor; border-width: 1.5px 1.5px 0 0; transform: rotate(45deg); transition: transform .15s; }
.ticket__details[open] > summary::after { transform: rotate(135deg); }
.ticket__details > summary:hover { color: var(--theme); }
.ticket__form { display: grid; gap: var(--space-3); margin-top: var(--space-4); max-width: 40rem; color: var(--color-text); }
.ticket__field { display: grid; gap: var(--space-1); }
.ticket__field--inline { grid-template-columns: auto 1fr; align-items: center; gap: var(--space-3); }
.ticket__field textarea, .ticket__field select { font: inherit; padding: var(--space-2); border: 1px solid var(--grey-40); border-radius: var(--radius); color: var(--color-text); background: #fff; }
.ticket__hint { font-size: var(--text-small); color: var(--color-text-muted); }
.ticket__field textarea { resize: vertical; }
.ticket__message { margin: 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--theme); background: var(--theme-10); color: var(--color-text); }
.ticket__honeypot { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.ticket__form .button { justify-self: start; }

/* Login (Frontend), angelehnt an die ETH-Anmeldeseite */
.login-form { display: grid; gap: var(--space-3); background: var(--grey-10); padding: var(--space-4); } /* gleiches Grau wie die Ticket-Box */
.login-form__field { display: grid; gap: var(--space-1); font-size: var(--text-small); font-weight: 700; color: var(--grey-120); }
.login-form__field input { font: inherit; font-size: var(--text-base); font-weight: 400; color: var(--color-text); padding: var(--space-2); border: 1px solid var(--grey-40); background: #fff; }
.login-form__hint { color: var(--color-text-muted); font-size: var(--text-small); margin: 0; }
.login-form__message { margin: 0; padding: var(--space-2) var(--space-3); border-left: 4px solid var(--theme); background: var(--theme-10); }
.login-form__message--warning { border-color: var(--eth-bronze); background: var(--eth-bronze-10); }
.login-form .button { justify-self: start; }
.login-oidc { display: grid; gap: var(--space-3); justify-items: start; margin-bottom: var(--space-5); }
.login-fallback summary { cursor: pointer; font-size: var(--text-small); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.login-fallback summary:hover { color: var(--theme); }
.login-form__message { margin-bottom: var(--space-4); }

/* Statuslisten (Computerräume, Remote-Rechner) */
.status { margin: 0 0 var(--space-4); }
.status__table { width: 100%; border-collapse: collapse; font-size: var(--text-small); }
.status__table th, .status__table td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--color-border); }
.status__table tr > :first-child { padding-left: 0; }
.status__table tr > :last-child { padding-right: 0; }
.status__table th { font-weight: 700; color: var(--color-text-muted); }
.status__state::before { content: ""; display: inline-block; width: .6em; height: .6em; border-radius: 50%; margin-right: .4em; background: var(--grey-40); vertical-align: middle; }
.status__state--free::before { background: var(--eth-green); }
.status__state--used::before { background: var(--theme); }
.status__updated, .status__empty { font-size: var(--text-small); color: var(--color-text-muted); margin: var(--space-1) 0 0; }

/* Fuss (site-footer auf ethz.ch): dunkel, Zeile mit Textseiten-Links, Trennlinie, Copyright klein */
.site-footer { background: var(--dark); color: #fff; font-size: 1rem; line-height: 1.5; }
.site-footer__main { padding: var(--space-5) 0; border-bottom: 1px solid var(--grey); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-5); }
.site-footer__feed { margin-left: auto; white-space: nowrap; }
.site-footer__feed svg { width: 1em; height: 1em; vertical-align: -.125em; margin-right: .375rem; }
.site-footer__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); }
.site-footer li { margin: 0; }
.site-footer a { color: #fff; transition: color 80ms; }
.site-footer a:hover { color: rgba(255,255,255,.8); }
.site-footer__copyright { font-size: .875rem; line-height: 1.3125rem; padding: var(--space-4) 0 var(--space-6); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
@media print { .topbar, .nav-primary, .ticket, .site-footer, .skip-link { display: none !important; } .site-content__inner { grid-template-columns: minmax(0, 1fr); } }