/* ============================================================
   CStV Uttenruthia Erlangen — shared styles
   Minimal, serif, white. Edit colours and fonts in :root below.
   ============================================================ */

:root{
  /* --- colours --- */
  --bg:        #ffffff;   /* page background           */
  --ink:       #000000;   /* main text                 */
  --muted:     #5b5750;   /* secondary text            */
  --line:      #e7e3da;   /* hairlines / borders       */
  --gold:      #b58a2b;   /* accent, from the Wappen   */
  --hover-bg:  #f7f5f0;   /* subtle hover background   */

  /* --- type --- */
  --display: "Playfair Display", Georgia, "Times New Roman", serif;
  --body:    "EB Garamond", Georgia, "Times New Roman", serif;

  /* --- layout --- */
  --maxw:  1180px;   /* header / wide content width */
  --prose: 760px;    /* readable text column        */
  --pad:   clamp(1.2rem, 4vw, 2.5rem);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--body);
  font-size:1.15rem;
  line-height:1.65;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
img{max-width:100%;display:block}
a{color:inherit}
a:hover{color:var(--gold)}
h1,h2,h3,h4{font-family:var(--display);font-weight:700;line-height:1.15}

.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad)}

/* ============================================================
   HEADER  (keep identical across all pages)
   ============================================================ */
.site-header{border-bottom:1px solid var(--line);background:var(--bg)}
.site-header .bar{
  display:flex;
  align-items:center;
  gap:1.2rem;
  padding-block:1.1rem;
}
.logo{display:inline-flex;align-items:center;flex:none}
.logo img{height:54px;width:auto}

.main-nav{flex:1 1 auto}
.main-nav ul{
  list-style:none;display:flex;align-items:center;justify-content:center;
  gap:clamp(1.1rem, 2.8vw, 2.6rem);
}
.main-nav a{
  text-decoration:none;
  font-size:1.18rem;
  letter-spacing:.01em;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:border-color .2s ease, color .2s ease;
  white-space:nowrap;
}
.main-nav a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.main-nav a.active{border-bottom-color:var(--gold)}

.social{flex:none;display:inline-flex;align-items:center}
.social a{display:inline-flex;color:var(--ink);transition:color .2s ease}
.social a:hover{color:var(--gold)}
.social svg{width:26px;height:26px}

/* hamburger (mobile only) */
.nav-toggle{
  display:none;flex:none;
  background:none;border:1px solid var(--line);border-radius:4px;
  width:46px;height:42px;cursor:pointer;align-items:center;justify-content:center;
}
.nav-toggle span,
.nav-toggle span::before,
.nav-toggle span::after{
  content:"";display:block;width:22px;height:2px;background:var(--ink);transition:.25s;
}
.nav-toggle span::before{transform:translateY(-7px)}
.nav-toggle span::after{transform:translateY(5px)}
.nav-toggle[aria-expanded="true"] span{background:transparent}
.nav-toggle[aria-expanded="true"] span::before{transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] span::after{transform:rotate(-45deg)}

/* ============================================================
   MAIN / PAGE STRUCTURE
   ============================================================ */
main{flex:1 0 auto;width:100%}

/* --- home / hero --- */
.hero{text-align:center;padding-block:clamp(2.5rem,6vw,4.5rem) clamp(3rem,7vw,5rem)}
.hero h1{
  font-size:clamp(1.9rem,4.4vw,2.9rem);
  margin-bottom:.55rem;
}
.hero .subtitle{
  font-family:var(--body);
  font-size:clamp(1.2rem,2.6vw,1.65rem);
  color:#2c2a26;
  font-weight:500;
  margin-bottom:clamp(2rem,5vw,3.2rem);
}
.hero .crest{max-width:min(520px,80vw);margin-inline:auto}

/* --- inner page heading --- */
.page{padding-block:clamp(2.4rem,6vw,4rem)}
.page-head{max-width:var(--prose);margin:0 auto clamp(1.6rem,4vw,2.4rem)}
.page-head h1{
  font-size:clamp(2rem,5vw,3rem);
  text-align:center;
  margin-bottom:.4rem;
}
.page-head .lead{
  text-align:center;color:var(--muted);font-size:1.25rem;
}

/* --- prose --- */
.prose{max-width:var(--prose);margin-inline:auto}
.prose h2{font-size:1.7rem;margin:2.2rem 0 .8rem}
.prose h3{font-size:1.35rem;margin:1.8rem 0 .6rem}
.prose p{margin-bottom:1.1rem}
.prose p:last-child{margin-bottom:0}
.prose strong{font-weight:600}
.prose a{color:var(--gold)}

/* floated figure (e.g. the Uhu) */
.figure-float{
  float:left;width:min(240px,42%);margin:.4rem 1.6rem 1rem 0;
}
.figure-float figcaption{font-size:.95rem;color:var(--muted);text-align:center;margin-top:.4rem;font-style:italic}

/* generic image placeholder (swap for <img>) */
.placeholder{
  border:1px solid var(--line);background:var(--hover-bg);
  display:flex;align-items:center;justify-content:center;
  color:var(--muted);font-style:italic;text-align:center;padding:1rem;
  aspect-ratio:4/3;
}

/* ============================================================
   CALENDAR  (Semesterprogramm — FullCalendar theme)
   ============================================================ */
.cal{max-width:980px;margin-inline:auto}

.fc{
  font-family:var(--body);
  --fc-border-color:              var(--line);
  --fc-page-bg-color:             var(--bg);
  --fc-neutral-bg-color:          var(--hover-bg);
  --fc-today-bg-color:            rgba(181,138,43,.15);
  --fc-event-bg-color:            var(--gold);
  --fc-event-border-color:        var(--gold);
  --fc-event-text-color:          #fff;
  --fc-button-bg-color:           var(--ink);
  --fc-button-border-color:       var(--ink);
  --fc-button-hover-bg-color:     var(--gold);
  --fc-button-hover-border-color: var(--gold);
  --fc-button-active-bg-color:    var(--gold);
  --fc-button-active-border-color:var(--gold);
  --fc-list-event-hover-bg-color: var(--hover-bg);
}
.fc .fc-toolbar-title{font-family:var(--display);font-size:1.8rem;color:var(--gold)}
.fc .fc-col-header-cell-cushion{font-family:var(--display);font-size:.95rem;font-weight:700;text-decoration:none;color:var(--gold)}
.fc .fc-daygrid-day-number{text-decoration:none;color:var(--ink)}
.fc-day-today .fc-daygrid-day-number{color:var(--gold);font-weight:700}
.fc .fc-button{font-family:var(--body);font-size:1rem;border-radius:4px;padding:.4rem .85rem;box-shadow:none!important}
.fc .fc-button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.fc .fc-list-event-title a{color:var(--ink);text-decoration:none}
.fc .fc-list-event-time{color:var(--muted)}
.fc .fc-list-day-text,.fc .fc-list-day-side-text{color:var(--gold)}
.fc .fc-list-event:hover td{background:var(--hover-bg)}
.fc .fc-event{cursor:pointer}
.fc .fc-daygrid-event .fc-event-title,
.fc .fc-daygrid-event .fc-event-time{white-space:normal;overflow:visible}

/* event detail modal */
.event-modal{
  position:fixed;inset:0;background:rgba(20,18,15,.6);
  display:none;align-items:center;justify-content:center;z-index:200;padding:2rem;
}
.event-modal.open{display:flex}
.event-modal-card{
  background:var(--bg);max-width:480px;width:100%;
  padding:2.2rem 2.4rem;border:1px solid var(--line);border-left:3px solid var(--gold);
  position:relative;box-shadow:0 12px 48px -8px rgba(0,0,0,.2);
}
.event-modal-close{
  position:absolute;top:.9rem;right:1.2rem;
  background:none;border:none;font-size:2rem;cursor:pointer;
  color:var(--muted);line-height:1;padding:0;
}
.event-modal-close:hover{color:var(--ink)}
.event-modal-title{font-size:1.6rem;margin-bottom:.9rem;padding-right:2rem}
.event-modal-when{color:var(--muted);font-size:1.05rem;margin-bottom:.6rem}
.event-modal-location::before{content:"Ort: ";font-weight:600}
.event-modal-location{margin-bottom:.6rem}
.event-modal-desc{color:var(--muted);white-space:pre-line}

.cal-downloads{max-width:980px;margin:2.6rem auto 0;border-top:1px solid var(--line);padding-top:1.6rem}
.cal-downloads h2{font-size:1.4rem;margin-bottom:.9rem}
.cal-downloads .links{display:flex;flex-wrap:wrap;gap:.8rem}
.btn-line{
  text-decoration:none;border:1px solid var(--ink);border-radius:4px;
  padding:.55rem 1.1rem;font-size:1.05rem;color:var(--ink);transition:.2s;
}
.btn-line:hover{background:var(--ink);color:var(--bg)}

/* ============================================================
   GALLERY  (Veranstaltungen / Chronik)
   ============================================================ */
.semester-cover{margin-bottom:1.4rem}
.semester-cover .placeholder{aspect-ratio:16/7;width:100%}
.gallery-section{max-width:var(--maxw);margin:0 auto clamp(2.5rem,6vw,4rem)}
.gallery-section > h2{font-size:1.9rem;text-align:center;margin-bottom:.5rem}
.gallery-section > p.desc{text-align:center;color:var(--muted);max-width:var(--prose);margin:0 auto 1.6rem}
.gallery-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;
}
.gallery-grid figure{margin:0;cursor:pointer}
.gallery-grid .placeholder{aspect-ratio:3/2;transition:.2s}
.gallery-grid figure:hover .placeholder{border-color:var(--ink)}
.gallery-grid figcaption{font-size:.98rem;color:var(--muted);font-style:italic;text-align:center;margin-top:.45rem}

/* lightbox */
.lightbox{
  position:fixed;inset:0;background:rgba(20,18,15,.92);
  display:none;align-items:center;justify-content:center;z-index:100;padding:2rem;
}
.lightbox.open{display:flex}
.lightbox figure{margin:0;text-align:center;max-width:900px}
.lightbox .placeholder{aspect-ratio:3/2;width:min(80vw,720px);background:#2a2722;color:#cbc6bb;border-color:#3a352d}
.lightbox figcaption{color:#e6e1d6;margin-top:1rem;font-style:italic;font-size:1.1rem}
.lightbox .close{position:absolute;top:1.2rem;right:1.6rem;background:none;border:none;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1}

/* ============================================================
   ÜBER UNS  (redesigned scrolling sections)
   ============================================================ */
.about-hero{border-bottom:1px solid var(--line);overflow:hidden}
.about-hero .hero-img{width:100%;aspect-ratio:21/9;display:block;object-fit:cover}
.about-hero .placeholder.hero-img{aspect-ratio:21/9;border:none;border-radius:0}

.about-section{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem);align-items:center;padding:clamp(3.5rem,8vw,5.5rem) clamp(1.5rem,5vw,4rem);max-width:var(--maxw);margin-inline:auto;border-bottom:1px solid var(--line)}
.about-section h2{font-size:clamp(1.5rem,3.5vw,2.2rem);line-height:1.2;margin-bottom:1rem}
.about-section p{color:var(--muted);margin-bottom:.85rem;max-width:54ch}
.about-section p:last-child{margin-bottom:0}
.about-section p em{color:var(--ink);font-style:italic}
.about-section .section-img{aspect-ratio:4/3}

.about-dark{background:var(--ink);color:#e8e3d8;text-align:center;padding:clamp(4rem,10vw,6rem) 1.5rem}
.about-dark .motto{font-family:var(--display);font-size:clamp(1.8rem,5.5vw,3.8rem);font-weight:700;color:var(--gold);letter-spacing:.03em;margin-bottom:1.1rem}
.about-dark .motto-desc{font-size:clamp(1rem,2.5vw,1.2rem);color:rgba(232,227,216,.6);max-width:50ch;margin-inline:auto;line-height:1.7}

.value-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem;padding:clamp(3.5rem,8vw,5.5rem) clamp(1.5rem,5vw,4rem);max-width:var(--maxw);margin-inline:auto;border-bottom:1px solid var(--line)}
.value-card{text-align:center}
.value-icon{display:block;font-size:1.5rem;color:var(--gold);margin-bottom:.9rem;line-height:1}
.value-card h3{font-size:1.2rem;margin-bottom:.6rem}
.value-card p{color:var(--muted);font-size:.98rem;margin:0;max-width:28ch;margin-inline:auto}


.about-cta{text-align:center;padding:clamp(4rem,10vw,6rem) 1.5rem;background:var(--hover-bg)}
.about-cta h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.8rem}
.about-cta p{color:var(--muted);font-size:1.1rem;max-width:46ch;margin:0 auto 2rem}
.btn-primary{display:inline-block;background:var(--ink);color:var(--bg);text-decoration:none;padding:.75rem 2.2rem;font-family:var(--body);font-size:1.05rem;border-radius:4px;transition:background .2s}
.btn-primary:hover{background:var(--gold)}

@media(max-width:680px){
  .about-hero .placeholder.hero-img{aspect-ratio:4/3}
  .about-section,.history-grid{grid-template-columns:1fr}
  .history-grid > h2,.history-grid > p{grid-column:1}
  .value-grid{grid-template-columns:1fr;gap:2rem}
  .value-card p{max-width:none}
}

/* ============================================================
   FOOTER  (keep identical across all pages)
   ============================================================ */
.site-footer{
  flex-shrink:0;border-top:1px solid var(--line);
  text-align:center;color:var(--muted);font-size:1.05rem;
  padding-block:1.8rem;margin-top:3rem;
}
.site-footer a{color:var(--muted);text-decoration:none;border-bottom:1px solid var(--line)}
.site-footer a:hover{color:var(--gold);border-bottom-color:var(--gold)}
.site-footer .sep{margin-inline:1rem;color:var(--line)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .nav-toggle{display:inline-flex;margin-left:.4rem}
  .social{margin-left:auto}   /* push social + toggle to the right */

  .main-nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,320px);
    background:var(--bg);box-shadow:-18px 0 50px -24px rgba(0,0,0,.4);
    transform:translateX(100%);transition:transform .3s ease;
    padding:5rem 1.6rem 2rem;z-index:90;flex:none;
  }
  .main-nav.open{transform:none}
  .main-nav ul{flex-direction:column;align-items:flex-start;gap:0}
  .main-nav li{width:100%}
  .main-nav a{display:block;padding:.9rem 0;border-bottom:1px solid var(--line)}
  .main-nav a:hover{border-bottom-color:var(--line);color:var(--gold)}

  .nav-scrim{position:fixed;inset:0;background:rgba(20,18,15,.45);opacity:0;visibility:hidden;transition:.3s;z-index:80}
  .nav-scrim.open{opacity:1;visibility:visible}
}

@media (max-width:560px){
  body{font-size:1.08rem}
  .cal-cell{min-height:78px;padding:.3rem}
  .cal-cell .daynum{font-size:.9rem}
  .cal-event{font-size:.78rem}
  .figure-float{float:none;width:100%;margin:0 0 1.2rem}
}

@media (prefers-reduced-motion:reduce){
  *{scroll-behavior:auto!important;transition:none!important}
}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}