/* START - FONTS EINBINDEN - "Inter" und "Rotis" +++++++++++++++++++++++++++++++++++++ */
@font-face {
  font-family: "Inter";
  src: url("../_fnt/inter-regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("../_fnt/inter-italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
} /* Zugriff mit font-style: italic */

@font-face {
  font-family: "Inter";
  src: url("../_fnt/inter-semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
} /* Zugriff mit font-weigth: 500 (sic!) */

@font-face {
  font-family: "Inter";
  src: url("../_fnt/inter-bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
} /* Zugriff mit font-weigth: 700 */

@font-face {
  font-family: "Inter";
  src: url("../_fnt/inter-extralight.woff2") format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
} /* Zugriff mit font-weigth: 200 */

@font-face {
  font-family: "Rotis";
  src: url("../_fnt/rotis-serif.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
} /* Zugriff mit font-family: Rotis */
/* ENDE - FONTS EINBINDEN - "Inter" und "Rotis" ++++++++++++++++++++++++++++++++++++++ */


/* START - GRUNDLAYOUT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
:root {
  /* vertical rhythm unit */
  --vr: 8px;
  
  /* Definitionen nur für <h1> */
  --h1-base-gap: 0.25em; /* grundsätzlicher Abstand zur Schrift darüber */
  --h1-text-area: 1em; /* grundsätzliche Höhe des ganzen Bereichs */
  --h1-line-height: 2px; /* Dicke der Linie (falls Linie) */
  
  /* Feinjustierung für <h1> */
  --h1-line-shift: 0.15em; /* Linie etwas nach oben */
  --h1-text-shift:  -0.25em; /* Text etwas nach unten */
}

html {
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 400;
  background: #ededed;
}
/* ENDE - GRUNDLAYOUT ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* START - HEADER mit Dropdown-Navigation ++++++++++++++++++++++++++++++++++++++++++++ */
header {
  position: sticky;
  top: 0;
  width: 100%;
  min-width: 360px;
  height: 3.2rem;
  background: #b8b8b8;
  z-index: 1000;
  box-shadow: none;
  transition: box-shadow 0.3s ease;
}

/* zur Zeit inaktiv
header.scrolled {
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
zugehöriges Java-Script könnte dann weg */

/* Nav-Container */
.nav-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0px 0px;
  display: flex;
  align-items: stretch; /* wichtig für volle Höhe */
  height: 100%;
}

/* Logo im Nav-Container */
.nav-logo {
  display: flex;
  align-items: center;
  height: 100%;
  margin-left: 12px;
  margin-right: 24px; /* Abstand vom Logo zu den Hauptlinks */
  overflow: hidden;
}

.nav-logo img {
  height: 100%;
  width: auto;
  display: block;
}

/* Hauptlinks im Nav-Container */
.nav-links {
  list-style: none;
  margin: 0;
  padding: 6px 0; 
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  align-items: center;
}

.nav-label {
  all: unset;
  color: #750037;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
  cursor: pointer;
  display: inline-block;
  padding: 6px 0;
  user-select: none;
  position: relative;
  text-decoration: none;
}

.nav-label.active {
  color: #750037;
}

.nav-label:hover {
  color: #ffffff;
  transition: color 0.3s ease;
}

.nav-label:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

.nav-label[aria-expanded="true"] + .dropdown-content {
  display: block;
}

/* Dropdown-Definitionen im Nav-Container */
.dropdown {
  position: relative;
}

/* Dropdown: Inhalt */
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #606060;
  margin: 0px 0 0 0; /* !!! */
  padding: 6px 0;
  list-style: none;
  border-radius: 0px;
              /* rechts/links oben/unten Unschärfe Ausdehnung rgba(0,0,0,Intensität) */
  box-shadow: 0 6px 18px 0px rgba(0,0,0,0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
  transform-origin: top;
  width: max-content;
  max-width: 90vw;
  white-space: nowrap;
  z-index: 2000;
}

/* Dropdown: Unterlinks */
.dropdown-content li a {
  display: block;
  padding: 8px 16px;
  color: #ffffff;
  text-decoration: none;
}

.dropdown-content li a:hover {
  background: #750037;
}

/* Hover-Effekt nur für Desktop */
@media (hover: hover) {
  .dropdown:hover > .dropdown-content {display: block;}
}

/* Dropdown: JavaScript-Ergänzungen */
.dropdown-content.show {
  display: block;
  opacity: 1;
  transform: scaleY(1);
}

/* Smartphone-Anpassung für den Header */
@media (max-width: 575px){
  header {height: 2.8rem;}
  .nav-links {gap: 10px;}
  .nav-label {
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.01rem;}
  .nav-logo {margin-right: 10px;}
  .nav-logo img {height: 2.8rem;}
  .bild.rechts {width: 30%;}
}
/* ENDE - HEADER mit Dropdown-Navigation +++++++++++++++++++++++++++++++++++++++++++++ */


/* START - CONTENT - Grundeinstellungen ++++++++++++++++++++++++++++++++++++++++++++++ */
/* Content */
.content {
  max-width: 900px;
  margin: 0px auto;
  background: #ffffff;
  padding: 12px;
  box-sizing: border-box;
}

/* grundlegende Absatz- und Listeneinstellungen */
p, ul, ol {
  margin-top: 0;
  margin-bottom: calc(var(--vr) * 1.5);
  overflow-wrap: anywhere;
  word-break: normal;
} /* vermeidet hässliche Trennungen, wenn Silbentrennung nicht funktioniert */

p.small {
  margin-bottom: calc(var(--vr) * 0.75);
} /* kleinerer Absatzabstand bei Untergruppen */

p.green {
  color: #2b8000;
  font-size: 1.05em;
  font-style: italic;
  font-weight: 600;
  hyphens: manual;
} /* einen Hauch größere, kursive grüne Überschrift innerhalb einer Box */

p.bordeaux {
  color: #750037;
  font-size: 1.05em;
  font-style: italic;
  font-weight: 600;
  hyphens: manual;
} /* einen Hauch größere, kursive Bordeaux-Überschrift innerhalb einer pink/bordeaux Box */

p.comment {
  font-style: italic;
  font-size: 0.9em;
  line-height: 1.2em;
  color: rgba(0,0,0,0.6);
  hyphens: manual;
} /* Absatz mit einem gezielt gesetzten Kommentar: kleiner, grau, kursiv */

p.nospace {
  margin-bottom: 0;
} /* ergänzend zu allen Absatzformaten, wenn sie ohne Absatzabstand sein sollen */

p.moretop {
  margin-top: calc(var(--vr) * 3);
} /* ergänzend zu allen Absatzformaten, wenn vorausgehend etwas mehr sein soll */

li {
  margin-bottom: calc(var(--vr) * 1);
}

/* Absatztypen */
h1 {
  font-family: Rotis;
  font-size: 1.9rem;
  letter-spacing: 0.03em;
  hyphens: manual;
  color: #909090;
  margin-top: calc(var(--vr) * 2.5);
  margin-bottom: calc(var(--vr) * 4);
  padding: 0 calc(var(--vr) * 2);
} /* Rotis serif in grau für "Sophienschule */

/* START - Zusatzdefinitionen für <h1> (Unterzeile/-strich) -------------------------- */
.h1-decorated {
  position: relative;
  display: inline-block;
}

.underline-short::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--h1-base-gap) + var(--h1-line-shift));
  width: 70%;
  height: var(--h1-line-height);
  background-color: #750037;
  transform: translateX(-50%);
}

.underline-text::after {
  content: "Gymnasium in Hannover"; /* Textinhalt der Unterzeile */
  position: absolute;
  left: 50%;
  bottom: calc(-1 * var(--h1-base-gap) + var(--h1-text-shift));
  width: 70%;
  height: var(--h1-text-area);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Textdefinitionen für die Unterzeile (müssen teilweise "zurückgesetzt" werden */
  font-family: Inter;
  font-weight: 400;
  font-style: italic;
  font-size: 0.9rem;
  letter-spacing: 0em;
  color: #750037;
  white-space: nowrap;
  transform: translateX(-50%);
}
/* ENDE - Zusatzdefinitionen für <h1> (Unterzeile/-strich) --------------------------- */

h2 {
  margin: calc(var(--vr) * 4) 0 calc(var(--vr) * 4);
  padding: 0 calc(var(--vr) * 2);
  hyphens: manual;
  font-family: Inter;
  font-style: italic;
  font-size: 1.4rem;
  color: #2b8000;
} /* Inter kursiv in grün als Überschrift */

h3 {	
  margin: calc(var(--vr) * 5) 0 calc(var(--vr) * 2);
  padding: calc(var(--vr) * 0.5) calc(var(--vr) * 2);
  border: 1px solid rgba(0,0,0,0.20);
  background-color: rgba(100,100,100,0.1);
  hyphens: manual;
  font-family: Inter;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #555555;
} /* gliedernde Überschrift in hellgrauem Kasten mit Rand: gesperrte Versalien dunkelgrau */

h4 {	
  margin: calc(var(--vr) * 5) 0 calc(var(--vr) * 1);
  padding: calc(var(--vr) * 0.5) calc(var(--vr) * 2);
  hyphens: manual;
  font-family: Inter;
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #555555;
} /* gliedernde Überschrift freischwebend: gesperrte Versalien dunkelgrau */

/* Links */
a {
  font-weight: 600;
  color: #750037;
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: #bf2f7f;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}
a:visited {color: #750037;}
a:hover {color: #bf2f7f;}
a:active {color: #bf2f7f;}

/* mailto nur kursiv und ohne Silbentrennung, mit manuell zusätzlichem <wbr> */
a.mail {
  hyphens: manual;
  font-weight: 400;
  font-style: italic;
}

/* extra große Links, z. B. in eigener Zeile */
a.biglink {
  font-size: 1.20rem;
  text-underline-offset: 0.2em;
}
a.biglink:visited {color: #750037;}
a.biglink:hover {color: #bf2f7f;}
a.biglink:active {color: #bf2f7f;}

/* Button-Links */
a.buttonlink {
  hyphens: manual;
  display: inline-block;
  margin-top: calc(var(--vr) * 0.5);
  padding: 7px 0.9em;
  background-color: #750037;
  color: #ffffff;
  text-decoration: none;
  border-radius: 0px;
  font-weight: 600;
  transition: all 0.2s ease;
}

a.buttonlink:hover {
  background-color: #eacada;
  color: #750037;
}

a.buttonlink:active {
  background-color: #eacada;
  color: #750037;
}

/* Pfeil als Download-Symbol an einen Link anhängen */
.arrow-down {
  margin-left: 0.1em;
  margin-right: 0.025em;
  vertical-align: middle;
}

/* Telefonnummernlink mit Telefonhörersymbol */
.phone {
  font-weight: 400;
}

.phone::before {
  content: "";
  display: inline-block;
  width: 0.9em;
  height: 0.9em;
  margin-right: 0.4em;
  vertical-align: -0.1em;
  background: url("../_gfx/icon-phone.svg") no-repeat center;
  background-size: contain;
}
/* ENDE - CONTENT - Grundeinstellungen +++++++++++++++++++++++++++++++++++++++++++++++ */


/* START - GRID IM CONTENT +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Grundlayout der Box-Reihen */
.box-row {
  display: grid;
  gap: calc(var(--vr) * 2);
  margin-bottom: calc(var(--vr) * 2);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
} /* grid-template-columns: bei wenig Platz untereinander stapeln */

/* GRID - Spaltenvarianten */
.box-row.two-third {grid-template-columns: 2fr 1fr;}

.box-row.third-two {grid-template-columns: 1fr 2fr;}

.box-row.sixty-fourty {grid-template-columns: 3fr 2fr;}

.box-row.half-half {grid-template-columns: 1fr 1fr;}

.box-row.three-thirds {grid-template-columns: 1fr 1fr 1fr;}

.box-row.complete {grid-template-columns: 1fr;}

/* GRID - Gestaltung der Kästen */
.box {
  border: 1px solid rgba(0,0,0,0.20);
  padding: calc(var(--vr) * 1.5) calc(var(--vr) * 2);
  background: #ffffff;
  box-sizing: border-box;
  overflow: hidden; /* nur Schutzmaßnahme: falls was überläuft, ist es nicht sichtbar */
}

.box > :first-child {margin-top: 0;}
/* erstes ELEMENT immer ohne Abstand oben, egal wie es definiert ist */

.box > p:first-of-type {margin-top: 0;}
/* erster ABSATZ (Text!) immer ohne Abstand oben, egal wie er definiert ist */

.box > :last-child {margin-bottom: 0;}
/* letztes ELEMENT immer ohne Abstand unten, egal wie es definiert ist */

.box > p:last-of-type {margin-bottom: 0;}
/* letzter ABSATZ (Text!) immer ohne Abstand unten, egal wie er definiert ist */

/* verschiedene Farben der Kästen */
.box.lightgrey { background: rgba(100,100,100,0.1); }
.box.sophiegreen { background: rgba(210, 240, 190, 0.3); }
.box.sophiebordeaux { background: rgba(225, 190, 205, 0.2); }
.box.sophiepink { background: rgba(230, 00, 90, 0.15); }

/* GRID - vollflächige Grafiken im Kasten */
.image-box {
  padding: 0; /* Bild soll bis an den Rand gehen */
  overflow: hidden;
}

.image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* GRID - Grafik bleibt in voller Größe, Box passt sich an */
.image-fitbox {
  padding: 0;
  overflow: hidden; /* optional, eher kosmetisch */
}

.image-fitbox img {
  width: 100%;
  height: auto;     /* !!! */
  display: block;   /* entfernt Inline-Abstände */
}

/* GRID - Box mit DREI Icons nebeneinander */
.box.three-icons {
  display: flex;
  gap: 1.3rem;		/* Abstand zwischen den Icons */
}

.box.three-icons > figure {
  flex: 0 1 50px;	/* alle gleich breit */
  margin: 0;		/* figure hätte sonst standardmäßig margin */
}

.box.three-icons img {
  max-width: 100%;
  height: auto;
}

/* GRID - horizontal zentrierte Grafiken in einer Box */
.center-img {
    display: block; /* Wandelt das Bild in ein Block-Element um */
    margin-left: auto; /* Setzt den linken Rand auf automatisch */
    margin-right: auto; /* Setzt den rechten Rand auf automatisch */
    max-width: 100%; /* Stellt sicher, dass das Bild responsiv bleibt */
}

/* GRID - Smartphone-Anpassungen */
@media (max-width: 675px) {
  .box-row {
    grid-template-columns: 1fr !important;
  } /* untereinander stapeln IMMER wenn kleiner 675px */
  .desktop-only {
    display: none !important;
  } /* class="box desktop-only" > GANZE Box wird bei kleiner als 675px NICHT angezeigt */
}

@media (min-width: 675px) {
  .smartphone-only {
    display: none !important;
  } /* class="box smartphone-only" > GANZE Box wird bei größer als 676px NICHT angezeigt */
}



/* ENDE - GRID IM CONTENT ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


/* START - GRAFIKEN mit figure innerhalb einer Box +++++++++++++++++++++++++++++++++++ */
.box figure.box-figure {
  width: 45%; /* Anteil der Boxbreite, den die Grafik einnimmt */
  max-width: 100%;
  margin: 0;
  box-sizing: border-box;
}

/* Bildgröße innerhalb der Box halten */
.box figure.box-figure img {
  width: 100%;
  height: auto;
  display: block;
}

/* rechts oder links platziert */
.box figure.box-figure.left {
  float: left;
  margin: 0 1em 0.25em 0;
}

.box figure.box-figure.right {
  float: right;
  margin: 0 0 0.25em 1em;
}

/* grundsätzliche Gestaltung der Bildunterschrift */
.box figure.box-figure figcaption {
  font-style: italic;
  font-size: 0.7em;
  line-height: 1.2;
  color: rgba(0,0,0,0.6);
}

/* START - Platzierung der Bildunterschrift ------------------------------------------ */
/* unterhalb (bottom) */
.box figure.caption-bottom figcaption {margin-top: 0.3em;}
/* oberhalb (top) */
.box figure.caption-top {display: flex; flex-direction: column-reverse;}
.box figure.caption-top figcaption {margin-bottom: 0.3em;}
/* darauf (overlay) */
.box figure.caption-overlay {position: relative;}
.box figure.caption-overlay figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.4em 0.6em;
  background: rgba(0,0,0,0.6);
  color: #fff;
  font-size: 0.7em;
}
/* ENDE - Platzierung der Bildunterschrift ------------------------------------------- */

/* Float-Absicherung der Box */
.box::after {
  content: "";
  display: block;
  clear: both;
}

/* Spezialfall: Element wird UNTER 675px Breite KOMPLETT ausgeblendet! */
@media (max-width: 675px) {
.off675 {
  display: none;
}
}
/* Spezialfall: Element wird ÜBER 675px Breite KOMPLETT ausgeblendet! */
@media (min-width: 675px) {
.on675 {
  display: none;
}
}


/* GRAFIKEN mit figure - Smartphone-Anpassungen
@media (max-width: 600px) {
  .box figure.box-figure {
    float: none !important;
    max-width: 100%;
    margin: 0 0 0.25em 0;
  }
  .box figure.caption-overlay figcaption {
    position: static;
    background: none;
    color: inherit;
    padding: 0.4em 0 0;
  }
}
*/
/* ENDE - GRAFIKEN mit figure innerhalb einer Box ++++++++++++++++++++++++++++++++++++ */


/* LISTEN */
ul {
  list-style-type: disc;
  padding-left: 0;
  margin: calc(var(--vr) * 2.0);

}



/* START - FOOTER - Einstellungen ++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* Footer */
.footer {
  max-width: 900px;
  margin: 0 auto;
  height: 3.2rem;
  background: #b8b8b8;
  padding: 0.9rem 12px 1rem 12px;
  box-sizing: border-box;
}

/* Absatz im Footer */
.footer p {
  text-align: right;
  margin-top: 0;
  margin-bottom: 0;
  margin-right: 2px; /* minimal mehr Abstand rechts, vermeidet "Scrollbar-Kollision" */
  overflow-wrap: break-word;
  word-break: normal;
} /* vermeidet hässliche Trennungen, wenn Silbentrennung nicht funktioniert */

/* Links */
.footer a {
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01rem;
  color: #750037;
  text-decoration: none;
}
.footer a:visited {color: #750037;}
.footer a:hover {color: #ffffff;}
.footer a:active {color: #ffffff;}

/* Abstand zwischen Elementen (Links) */
.spacer {
  display: inline-block;
  width: 16px;
}

/* Smartphone-Anpassung für den Footer */
@media (max-width: 675px){
  .footer {
   height: 2.8rem;
   padding: 0.7rem 12px 0.8rem 12px;}
  .footer a {
   font-size: 1rem;
   font-weight: 600;
   letter-spacing: -0.01rem;}
  .spacer {
   width: 4px;}
}
/* ENDE - FOOTER - Einstellungen +++++++++++++++++++++++++++++++++++++++++++++++++++++ */