/* Lernraum Berlin, static website. No dependencies, no build step.
   Implements the Pencil draft (design/lernraum-website.pen), which closely
   follows the previous TYPO3 website: mint header bar with drop shadow,
   hero photo with floating card, tiles styled like the old news cards,
   original shadow set and color values taken from the old CSS. */

:root {
  --mint: #d7eca1;          /* header bar, like the old navbar and the Moodle theme */
  --mint-hell: #eeffc5;     /* floating card, original value of the old site */
  --blau: #4286bc;          /* headings and accents, original */
  --teal: #1c8ab6;          /* hover, original */
  --petrol: #184e55;        /* body text on cards and h2, original */
  --petrol-dunkel: #14607f; /* links and buttons on light surfaces, passes AA */
  --aktion-blau: #197ea7;   /* filled blue surfaces; both old blues fail AA against white */
  --rot: #e40422;           /* Berlin red for login actions */
  --schulportal-gruen: #357a5d; /* Berliner Schulportal brand color, taken from the SSZB tile
                                   on schulportal.berlin.de; white on it is 5.1:1 (AA) */
  --text: #333333;
  --seite: #f5f6f1;         /* page background, original */

  /* original shadows of the old website */
  --schatten-karte: 0px 6px 17px 0px rgba(22, 24, 17, 0.14),
                    0px 10px 20px 0px rgba(44, 48, 33, 0.06),
                    inset 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
  --schatten-karte-hover: 0px 12px 26px 0px rgba(22, 24, 17, 0.28),
                          0px 16px 30px 0px rgba(44, 48, 33, 0.10),
                          inset 0px 1px 3px 0px rgba(100, 100, 100, 0.5);
  --schatten-kopf: 0px 1px 0px 0px #deff8b, 0px 7px 9px 0px rgba(0, 0, 0, 0.15);
  --schatten-menue: 3px 2px 4px rgba(148, 148, 148, 0.68);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  color: var(--text);
  background: var(--seite);
  line-height: 1.6;
  /* pin the footer to the bottom on viewports taller than the content */
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* visible focus on all interactive elements */
a:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--petrol-dunkel);
  outline-offset: 2px;
}
.site-footer a:focus-visible { outline-color: var(--petrol); }
.hero a:focus-visible { outline-color: #ffffff; }

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

.skip-link {
  position: absolute;
  top: -100px;
  left: 0.5rem;
  background: var(--petrol);
  color: #ffffff;
  padding: 0.6rem 1.2rem;
  z-index: 20;
}
.skip-link:focus { top: 0.5rem; }

/* ---------- Header: mint bar with drop shadow like the old navbar ---------- */

.site-header-leiste {
  background: var(--mint);
  box-shadow: var(--schatten-kopf);
  position: sticky;
  top: 0;
  z-index: 100;
}

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  flex-wrap: wrap;
  max-width: 72rem;
  margin: 0 auto;
  padding: 0.9rem 1.5rem;
}

.logo-link { display: inline-block; }
.logo-link img { display: block; height: 2.9rem; width: auto; }

.header-tools {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem 1.6rem;
}

.login-button {
  background: var(--rot);
  color: #ffffff;
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.65rem 1.6rem;
  border-radius: 3px;
  box-shadow: var(--schatten-menue);
}
.login-button:hover { background: #b8031c; }

/* Collapsible menu, native details/summary; js/menu.js additionally
   closes it on outside click, Escape and link click */
.menu { position: relative; }

.menu summary {
  cursor: pointer;
  list-style: none;
  padding: 0.6rem 1rem;
  font-size: 0.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--petrol);
  border-radius: 3px;
}
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before {
  content: "\2630\00a0\00a0"; /* ☰ */
  content: "\2630\00a0\00a0" / ""; /* empty alt text: screen readers do not announce the symbol */
}
.menu summary:hover,
.menu[open] summary { background: var(--teal); color: #ffffff; }

.menu nav {
  position: absolute;
  right: 0;
  top: calc(100% + 0.4rem);
  min-width: min(21rem, calc(100vw - 3rem)); /* fits 320px devices too */
  background: #ffffff;
  border: 1px solid #e2e2e2;
  box-shadow: var(--schatten-menue);
  z-index: 15;
}
.menu nav a {
  display: block;
  padding: 0.8rem 1.2rem;
  color: var(--petrol);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid #eef1ea;
}
.menu nav a:last-child { border-bottom: none; }
.menu nav a:hover { background: var(--teal); color: #ffffff; }
.menu nav a[aria-current="page"] { background: var(--mint-hell); } /* current page, set by js/menu.js */

/* ---------- Hero: photo with title (banner style) ---------- */

/* The photo keeps a fixed on-screen size; wider viewports are filled with the
   photo's own edge colour (#c1cea3, the out-of-focus wall) so it looks like the
   image simply continues to the left and right instead of being scaled. */
.hero { position: relative; overflow: hidden; background: #c1cea3; }
/* Darkening gradient for the white title. Constrained to the image band (same
   width/centring as the photo) so the extended edge colour stays untouched.
   Title sits at the bottom, so the gradient darkens the lower edge to keep the
   white title at >= 3:1 contrast (WCAG 1.4.3 large text). */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 1410px;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0) 75%);
  pointer-events: none;
}

.hero-bild {
  display: block;
  /* fixed native width: the shown section no longer changes with the viewport;
     narrower screens clip the sides, wider ones show the edge colour around it */
  width: 1410px;
  max-width: none;
  height: 16rem;
  object-fit: cover;
  /* bias towards the upper part so the faces are not cut off at the top */
  object-position: center 28%;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.hero-inhalt {
  max-width: 72rem;
  margin: -16rem auto 0;
  padding: 0 1.5rem 1.25rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 16rem;
}

.hero-titel {
  color: #ffffff;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1.2;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.45);
}

/* ---------- Intro section: between hero and tiles ---------- */

.intro {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3rem 1.5rem 0.5rem;
  display: grid;
  /* same column split and gap as .kacheln, so the list lines up with the right tiles */
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  align-items: center;
  background: var(--seite);
  color: var(--petrol);
}

.intro p {
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.45;
  text-wrap: balance;
}

/* own square markers instead of ::marker, so their left edge sits exactly on
   the column edge (flush with the tiles below) with a hanging indent */
.intro ul {
  list-style: none;
  margin: 0;
}

.intro ul li {
  margin-bottom: 0.55rem;
  position: relative;
  padding-left: 1.05em;
}

.intro ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 0.38em;
  height: 0.38em;
  background: var(--blau);
}

/* ---------- Tiles: 2x2, styled like the old news cards ---------- */

main {
  max-width: 72rem;
  margin: 0 auto;
  padding: 3.5rem 1.5rem;
}

.kacheln {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.kachel {
  display: flex;
  align-items: flex-start;
  gap: 1.4rem;
  min-width: 0; /* allow the grid column to shrink below the widest content */
  padding: 1.75rem 1.9rem;
  border-radius: 2px;
  box-shadow: var(--schatten-karte);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* The whole card lifts on hover, but only the button is a link */
.kachel:hover,
.kachel:focus-within {
  transform: translateY(-2px);
  box-shadow: var(--schatten-karte-hover);
}

.kachel-icon {
  flex-shrink: 0;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kachel-icon svg { width: 2rem; height: 2rem; fill: currentColor; }
.kachel-gruen .kachel-icon svg { width: 2.6rem; }

.kachel-inhalt {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  min-width: 0;
}

/* kicker line styled like the old h2 (AKTUELLES): uppercase, letter-spaced */
.kachel-ziel {
  font-size: 0.82rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.4px;
}
.kachel-titel {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.25;
  hyphens: auto; /* long words (Schulservicezentrum) on narrow phones */
  overflow-wrap: break-word;
}
.kachel-titel a { color: inherit; text-decoration: none; }
.kachel-titel a:hover { text-decoration: underline; }
.kachel-text { font-size: 0.95rem; line-height: 1.5; }

/* button styled like the old site's "Weiterlesen..." */
.kachel-knopf {
  color: inherit;
  text-decoration: none;
  margin-top: 0.5rem;
  padding: 0.5rem 1rem;
  border: 1px solid;
  border-radius: 3px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* the 404 page reuses that button outside the tile flex layout */
.fehler-knopf { display: inline-block; }

/* green marks destinations on the Berliner Schulportal (brand color plus support logo) */
.kachel-gruen { background: var(--schulportal-gruen); color: #ffffff; }
.kachel-gruen .kachel-icon { background: #ffffff; color: var(--schulportal-gruen); }

/* red marks Hilfe und Anleitungen (Berlin red) */
.kachel-rot { background: var(--rot); color: #ffffff; }
.kachel-rot .kachel-icon { background: #ffffff; color: var(--rot); }

.kachel-blau { background: var(--aktion-blau); color: #ffffff; }
.kachel-blau .kachel-icon { background: #ffffff; color: var(--aktion-blau); }

/* petrol from the site palette; the demo platform itself only knows blue and
   mint, so this is the closest in-brand accent that stays distinct (9.4:1) */
.kachel-petrol { background: var(--petrol); color: #ffffff; }
.kachel-petrol .kachel-icon { background: #ffffff; color: var(--petrol); }

.kachel-gruen a:focus-visible,
.kachel-rot a:focus-visible,
.kachel-blau a:focus-visible,
.kachel-petrol a:focus-visible { outline-color: #ffffff; }
.kachel-gruen .kachel-knopf:hover, .kachel-rot .kachel-knopf:hover, .kachel-blau .kachel-knopf:hover, .kachel-petrol .kachel-knopf:hover { background: rgba(255, 255, 255, 0.14); }

/* ---------- Subpages (imprint, privacy, accessibility) ---------- */

.inhalt {
  max-width: 52rem;
  background: #ffffff;
  box-shadow: var(--schatten-karte);
  border-radius: 2px;
  /* .inhalt beats the main selector, so it must bring its own vertical spacing */
  margin: 3.5rem auto;
  padding: 2.5rem 2.75rem 3rem;
}
.inhalt h1 { margin: 0 0 1.5rem; font-size: 1.9rem; line-height: 1.2; color: var(--blau); }
.inhalt h2 {
  margin: 2.5rem 0 1rem;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--petrol);
  border-bottom: 1px solid #e2e2e2;
  padding-bottom: 0.4rem;
}
/* 1.2rem bold counts as large text, so the blue passes the AA contrast requirement (3:1) */
.inhalt h3 { margin: 1.75rem 0 0.5rem; font-size: 1.2rem; color: var(--blau); }
.inhalt p, .inhalt ul, .inhalt ol { margin-bottom: 0.8rem; }
.inhalt ul, .inhalt ol { margin-left: 1.5rem; }
.inhalt ul { list-style: square; }
.inhalt ul li::marker { color: var(--blau); }
.inhalt a { color: var(--petrol-dunkel); font-weight: 600; word-break: break-word; }

/* ---------- Footer: mint background with dark text ---------- */

.site-footer {
  background: var(--mint);
  color: var(--petrol);
  padding: 2.5rem 1.5rem;
  margin-top: auto;
}

.footer-inhalt {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.footer-nav {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--petrol);
  text-decoration: underline;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0; /* larger tap target */
}
.footer-nav-icon {
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
}
.footer-nav a:hover,
.footer-nav a[aria-current="page"] { text-decoration: underline; }

.footer-angebot {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  max-width: 42rem;
}
.footer-angebot p { font-size: 0.92rem; }
.footer-angebot a { color: var(--petrol); text-decoration: underline; }

/* External-link indicator on text links that leave the site, mirroring the
   external-link icon in the Lernraum Moodle footer. Solid call-to-action
   buttons (.login-button, .kachel-knopf) and the SenBJF logo link are left
   out on purpose. The icon is decorative and inherits the link colour. */
.menu nav a[target="_blank"]::after,
.kachel-titel a[target="_blank"]::after,
.footer-angebot p a[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-left: 0.28em;
  vertical-align: baseline;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zM5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7zM5 5h5V3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2v-5h-2v5H5V5z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.sdw-logo-link { flex-shrink: 0; }
.sdw-logo-link img {
  display: block;
  width: 12rem;
  height: auto;
  background: #ffffff;
  border-radius: 2px;
}

/* ---------- Mobile ---------- */

@media (max-width: 48rem) {
  /* compact single-row header; wraps only below ~360px */
  .site-header { gap: 0.75rem; padding: 0.7rem 1rem; }
  .logo-link img { height: 2rem; }
  .header-tools { margin-left: auto; gap: 0.75rem; }
  .login-button { padding: 0.5rem 1rem; font-size: 0.82rem; }
  .menu summary { padding: 0.5rem 0.6rem; font-size: 0.82rem; }
  /* Anchor the dropdown to the header bar instead of the menu button,
     otherwise it overflows the viewport when the header wraps */
  .menu { position: static; }
  .menu nav { left: 0.75rem; right: 0.75rem; min-width: 0; }
  .hero-bild { height: 12rem; }
  .hero-inhalt { margin-top: -12rem; min-height: 12rem; }
  .hero-titel { font-size: 1.5rem; }
  .intro { grid-template-columns: 1fr; gap: 1rem; padding: 2rem 1.5rem 0; }
  .intro p { font-size: 1.15rem; }
  main { padding: 2.5rem 1.5rem; }
  .kacheln { grid-template-columns: 1fr; }
  .kachel { padding: 1.4rem 1.5rem; gap: 1.1rem; }
  .kachel-icon { width: 3rem; height: 3rem; }
  .inhalt { margin: 2.5rem auto; padding: 1.6rem 1.5rem 2rem; }
  .footer-inhalt, .footer-angebot { flex-direction: column; align-items: flex-start; }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kachel { transition: none; }
  .kachel:hover, .kachel:focus-within { transform: none; }
}

/* ---------- Print: mainly imprint/privacy and accessibility ---------- */

@media print {
  .skip-link, .menu, .login-button,
  .kachel-knopf { display: none; }
  body, .site-header-leiste { background: #ffffff; box-shadow: none; }
  .inhalt { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  .site-footer { background: none; color: var(--text); }
  .site-footer a, .footer-angebot a { color: var(--text); }
}