/* Startseite — Layout, Karten, Semester-Tabs, News. Schrift: Inter lokal. */
@import url('fonts/inter.css');

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

:root {
  --background:        #ffffff;
  --foreground:        #0a0a0a;
  --card:              #ffffff;
  --border:            #e2e8f0;
  --secondary:         #f1f5f9;
  --muted-foreground:  #64748b;
  --primary:           #2563eb;
  --primary-hover:     #1d4ed8;
  --primary-light:     #eff6ff;
  --radius:            0.625rem;
  --shadow-sm:         0 1px 2px rgba(0,0,0,0.05);
  --shadow:            0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:         0 4px 6px rgba(0,0,0,0.05), 0 2px 4px rgba(0,0,0,0.04);
  --shadow-lg:         0 10px 15px rgba(0,0,0,0.07), 0 4px 6px rgba(0,0,0,0.04);
}

html { scroll-behavior: smooth; }

body {
  background: var(--background);
  color: var(--foreground);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 14px;
  line-height: 1.5;
}


.page { max-width: 860px; margin: 0 auto; width: 100%; padding: 0 1.5rem; flex: 1; }

.hero-logo { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; }
.hero-text h1 { font-size: 1.375rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.3; }
.hero-text p { color: var(--muted-foreground); font-size: 0.8125rem; margin-top: 0.2rem; }

section { padding: 2rem 0; border-bottom: 1px solid var(--border); }
section:last-of-type { border-bottom: none; }
.section-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }

.section-title { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground); }
.badge { font-size: 0.625rem; font-weight: 500; padding: 0.125rem 0.4375rem; border-radius: 99px; border: 1px solid var(--border); background: var(--secondary); color: var(--muted-foreground); }

.card-icon {
  width: 34px; height: 34px; background: var(--secondary); border: 1px solid var(--border);
  border-radius: calc(var(--radius) - 1px); display: flex; align-items: center; justify-content: center; font-size: 0.9375rem;
}
.card-icon-sm { width: 28px; height: 28px; font-size: 0.8125rem; }
.card-arrow { color: #cbd5e1; font-size: 0.875rem; transition: color 0.15s, transform 0.15s; }
.card-title { font-size: 0.875rem; font-weight: 600; letter-spacing: -0.01em; }
.card-desc { font-size: 0.75rem; color: var(--muted-foreground); line-height: 1.5; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.125rem; }
.tag { font-size: 0.625rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.125rem 0.375rem; border-radius: 99px; background: var(--secondary); color: var(--muted-foreground); border: 1px solid var(--border); }

.section-intro { text-align: center; padding: 0.25rem 0 0.5rem; }
.section-intro strong { display: block; font-size: 0.875rem; font-weight: 500; color: var(--muted-foreground); margin-bottom: 0.2rem; }
.section-intro p { font-size: 0.8125rem; color: var(--muted-foreground); line-height: 1.6; }

/* ── Kopfzeile: PC volle Breite, Handy mittig ── */
.site-header { background: var(--background); position: relative; }
.site-header-inner { padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 0.75rem; }
.site-header-inner .hero-logo { width: 36px; height: 36px; }
.site-header-inner .hero-text h1 { font-size: 1.0625rem; line-height: 1.25; }
.site-header-inner .hero-text p { font-size: 0.75rem; margin-top: 0.05rem; line-height: 1.4; }
.site-header-inner .ph-logo { height: 40px; width: auto; object-fit: contain; flex-shrink: 0; margin-left: auto; }
@media (max-width: 520px) {
  .site-header-inner { justify-content: center; padding: 0.75rem 1rem; }
  .site-header-inner .hero-text p { font-size: 0.6875rem; }
  .site-header-inner .ph-logo { display: none; }
}
/* ── App-Karten (wie Kurskarten, aber direkter Link) ── */
a.app-card { display: block; text-decoration: none; color: inherit; }
a.app-card .card-arrow { flex-shrink: 0; }
a.app-card:hover .card-arrow { color: var(--primary); }
/* ── Kopfzeile: Kurzfassung auf dem Handy ── */
.txt-kurz { display: none; }
@media (max-width: 760px) { .txt-lang { display: none; } .txt-kurz { display: inline; } }
/* ── News (kompakt, eine Zeile pro Eintrag) ── */
.news-list { list-style: none; margin: 0 -0.5rem; }
.news-list li + li { border-top: 1px solid var(--border); }
.news-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: calc(var(--radius) - 2px); color: var(--foreground); text-decoration: none; font-size: 0.8125rem; white-space: nowrap; transition: background 0.15s; }
.news-item:hover { background: var(--secondary); }
.news-date { font-size: 0.6875rem; color: var(--muted-foreground); font-variant-numeric: tabular-nums; flex-shrink: 0; }
.news-title { font-weight: 600; flex-shrink: 0; }
.news-desc { color: var(--muted-foreground); overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 1; }
.news-tags { display: flex; gap: 0.25rem; flex-shrink: 0; }
.news-arrow { color: var(--muted-foreground); flex-shrink: 0; transition: color 0.15s; }
.news-item:hover .news-arrow { color: var(--primary); }
.news-pager { display: flex; justify-content: flex-end; align-items: center; gap: 0.5rem; margin-top: 0.5rem; font-size: 0.6875rem; color: var(--muted-foreground); }
.news-pager[hidden] { display: none; }
.news-pager button { border: 1px solid var(--border); background: var(--card); color: var(--muted-foreground); border-radius: 99px; width: 1.5rem; height: 1.5rem; cursor: pointer; line-height: 1; }
.news-pager button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 640px) {
  .news-desc { display: none; }
  .news-tags { flex: 1; }
  .news-tags .tag:nth-child(n+3) { display: none; }
}
/* ── Partner & Projekte: wie News, Namen bündig ── */
.link-list .news-title { width: 8.5rem; }
.link-group { font-size: 0.75rem; font-weight: 600; color: var(--foreground); margin: 0 0 0.25rem; }
.link-list + .link-group { margin-top: 1.25rem; }
@media (max-width: 640px) { .link-list .news-title { width: auto; } }
/* ── Semester Tabs ── */
.semester-tabs { display: flex; gap: 0.25rem; margin-bottom: 1rem; background: var(--secondary); border-radius: var(--radius); padding: 0.1875rem; width: fit-content; }
.semester-tab { padding: 0.375rem 0.875rem; font-size: 0.75rem; font-weight: 500; border: none; background: transparent; color: var(--muted-foreground); border-radius: calc(var(--radius) - 2px); cursor: pointer; transition: all 0.15s; }
.semester-tab:hover { color: var(--foreground); }
.semester-tab.active { background: var(--card); color: var(--foreground); box-shadow: var(--shadow-sm); }
.semester-panel { display: none; }
.semester-panel.active { display: block; }

/* ── Course Cards Grid ── */
.courses-grid { display: grid; grid-template-columns: repeat(2, 1fr); row-gap: 0.75rem; column-gap: 0.75rem; }

/* ── Course Card (expandable) ── */
.course-card {
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); transition: box-shadow 0.15s, border-color 0.15s; overflow: hidden;
}
.course-card-header {
  padding: 0.75rem 1rem; cursor: pointer;
  display: flex; align-items: center; row-gap: 0.75rem; column-gap: 0.75rem;
  transition: background 0.15s;
}
.course-card-header:hover { background: var(--secondary); }
.course-card-header .card-icon { flex-shrink: 0; }
.course-card-header-text { flex: 1; min-width: 0; }
.course-card-header-text .card-title { font-size: 0.8125rem; }
.course-card-header-text .card-desc { font-size: 0.6875rem; margin-top: 0.125rem; }
.course-card-header-text .card-tags { margin-top: 0.25rem; }
.card-chevron { color: #cbd5e1; font-size: 0.625rem; transition: color 0.15s, transform 0.2s; flex-shrink: 0; }
.course-card.open .card-chevron { transform: rotate(180deg); color: var(--primary); }
.course-card.open { border-color: #cbd5e1; box-shadow: var(--shadow-md); }

/* ── Material Panel ── */
.course-materials { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.course-card.open .course-materials { max-height: 1200px; }
.materials-inner { padding: 0.5rem 1rem 1rem; border-top: 1px solid var(--border); display: flex; gap: 1.5rem; }
.material-group { flex: 1; min-width: 0; }
.material-group-title { font-size: 0.625rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground); margin-bottom: 0.25rem; padding-left: 0.375rem; }
.material-list { list-style: none; display: flex; flex-direction: column; gap: 0; }
.material-list li { display: flex; align-items: center; gap: 0; }
.material-list li > a:first-child {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 0.375rem;
  padding: 0.25rem 0.375rem; border-radius: calc(var(--radius) - 2px);
  text-decoration: none; color: var(--foreground); font-size: 0.75rem;
  transition: background 0.12s, color 0.12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.material-list li > a:first-child:hover { background: var(--primary-light); color: var(--primary); }
.material-list li.material-text { align-items: flex-start; gap: 0.375rem; padding: 0.25rem 0.375rem; font-size: 0.75rem; color: var(--foreground); line-height: 1.35; }
.material-list li.material-text .material-icon { line-height: 1.6; }
.material-list li.material-text .material-label-suffix { white-space: nowrap; }
.material-icon { font-size: 0.6875rem; width: 1rem; text-align: center; flex-shrink: 0; }
.material-label-suffix { font-size: 0.625rem; color: var(--muted-foreground); margin-left: 0.125rem; }
.en-badge {
  font-size: 0.5rem; font-weight: 600; text-decoration: none;
  color: var(--primary); background: var(--primary-light); border: 1px solid #bfdbfe;
  padding: 0.0625rem 0.25rem; border-radius: 99px; letter-spacing: 0.03em;
  transition: background 0.12s, color 0.12s; flex-shrink: 0; margin-left: 0.25rem;
}
.en-badge:hover { background: var(--primary); color: #fff; }


/* Session layout */
.sessions { display: flex; flex-direction: column; gap: 0; }
.session { display: flex; gap: 0; min-height: 2rem; }
.session-marker { display: flex; flex-direction: column; align-items: center; width: 1.5rem; flex-shrink: 0; }
.session-num { font-size: 0.5625rem; font-weight: 600; color: var(--muted-foreground); line-height: 1; padding-top: 0.125rem; }
.session-line { flex: 1; width: 1px; background: var(--border); margin-top: 0.25rem; }
.session:last-child .session-line { background: transparent; }
.session + .session { background: linear-gradient(var(--border), var(--border)) center 0 / 70% 1px no-repeat; padding-top: 0.5rem; margin-top: 0.15rem; }
.session-content { flex: 1; display: flex; gap: 1rem; padding-bottom: 0.375rem; min-width: 0; }
.session-content .material-group { flex: 1; min-width: 0; }
.session-content .material-group-title { font-size: 0; height: 0; overflow: hidden; margin: 0; padding: 0; }
.sessions-header { display: flex; gap: 1rem; padding-left: 1.5rem; margin-bottom: 0.25rem; }
.sessions-header .material-group-title { flex: 1; }
footer { border-top: 1px solid var(--border); padding: 1.125rem 1.5rem; text-align: center; font-size: 0.75rem; color: var(--muted-foreground); background: var(--secondary); }
footer a { color: var(--muted-foreground); text-decoration: none; cursor: pointer; }
footer a:hover { color: var(--primary); }

@media (max-width: 520px) {
  .materials-inner { flex-direction: column; row-gap: 0.75rem; column-gap: 0.75rem; }
  .courses-grid { grid-template-columns: 1fr; }
}

/* DE/EN-Umschalter im Kopf (lang-switch.js hängt ihn in #lang-slot ein) */
#lang-slot { margin-left: 1.5rem; }
@media (max-width: 520px) {
  .site-header-inner { padding-top: 2rem; }
  #lang-slot { position: absolute; top: 0.5rem; right: 1rem; margin: 0; }
}