/* ==========================================================================
   IGS Aurich – user.css 
    ========================================================================== */


/* ==========================================================================
   1) Grund-Variablen / Farbschema
   --------------------------------------------------------------------------
   Cassiopeia arbeitet intern mit Variablen wie --cassiopeia-color-primary.
   Hier definieren wir ein eigenständiges, vollständiges Farbsystem mit
   verlaufsfähigen Variablen, um unabhängig vom Template zu bleiben.
   ========================================================================== */

:root {
  /* --- Basis-Farben --- */
  --igs-blue-light: #4ca1da;  /* helles Blau – „Primärfarbe“ */
  --igs-blue-dark:  #3a4e89;  /* dunkles Blau – Akzentfarbe */

  /* --- Verlaufsdefinitionen --- */
  /* Standard: hell → dunkel (z. B. Header, Menü) */
  --igs-gradient: linear-gradient(90deg, var(--igs-blue-light) 0%, var(--igs-blue-dark) 100%);

  /* Umgekehrt: dunkel → hell (z. B. Kontakt-Pills) */
  --igs-gradient-inverse: linear-gradient(90deg, var(--igs-blue-dark) 0%, var(--igs-blue-light) 100%);
}

/* Karten-Variable: „kein sichtbarer Rahmen“ */
.card {
  --card-border-color: transparent;
}

/* Nur-Desktop / Nur-Mobil Helferklassen */
.onlydesktop { display: none; }
.only-desktop { display: none !important; } 

/* nur mobil/tablet ausblenden */
@media (max-width: 767px){
  .only-desktop{ display: none !important; }
}

/* ab 768px sichtbar */
@media (min-width: 768px){
  .only-desktop{ display: block !important; }
}



/* ==========================================================================
   2) Card-Header (Bootstrap/Cassiopeia-Karten)
   ========================================================================== */
.card-header {
  padding: var(--card-cap-padding-y) var(--card-cap-padding-x);
  color: var(--card-cap-color);
  background-color: var(--card-cap-bg, #fff);
  border-bottom: var(--card-border-width) solid var(--card-border-color);
  margin-bottom: 0;
}


/* ==========================================================================
   3) Artikelansicht (.com-content-article__body)
   ========================================================================== */
.com-content-article__body {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 3rem auto;
  padding: 2rem 1.5rem;
  column-count: 1;
  column-gap: 3rem;
  line-height: 1.65;
  font-size: 1.05rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}

/* Zweispaltige Bereiche */
@media (min-width: 1000px) {
  .com-content-article__body .zweispaltig {
    column-count: 2;
    column-gap: 3rem;
  }
}

/* Seitenüberschrift als Card */
.com-content-article .page-header {
  background: #fff;
  padding: 2rem;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  margin-bottom: 2rem;
  max-width: 1000px;
  margin-inline: auto;
}

/* Kategorie-Blog-Container */
.com-content-category-blog {
  max-width: 1000px;
  width: 100%;
  margin: 0 auto 3rem auto;
  padding: 2rem 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}

/* Medien */
.com-content-article__body img,
.com-content-article__body table,
.com-content-article__body blockquote {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  border-radius: 8px;
}

/* Mobil: flächiger Stil */
@media (max-width: 992px) {
  .com-content-article__body {
    column-count: 1;
    max-width: 100%;
    box-shadow: none;
    border-radius: 0;
    padding: 0rem;
    margin-top: 1rem;
  }
}

/* Überschriften im Artikel */
.com-content-article__body h1,
.com-content-article__body h2,
.com-content-article__body h3 {
  line-height: 1.25;
  margin-top: 1.8em;
  margin-bottom: 0.6em;
  font-weight: 600;
  color: #111;
}
.com-content-article__body h1 { font-size: 1.8rem; }
.com-content-article__body h2 { font-size: 1.5rem; }
.com-content-article__body h3 { font-size: 1.25rem; }


/* ==========================================================================
   4) Topbar & Kontakt-Pills
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 20px;
  width: 100%;
  box-sizing: border-box;
  background: var(--igs-gradient);
}

.topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-left img {
  height: 50px;
  width: auto;
}

.topbar-buttons {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
}

/* Kontakt-Button (Pill) mit umgekehrtem Verlauf */
.contact-pill {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: var(--igs-gradient-inverse);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border: none;
  box-shadow: 0 6px 18px rgba(26, 39, 78, 0.25);
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease, filter 0.14s ease;
}
.contact-pill:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(26, 39, 78, 0.32);
  filter: brightness(1.15);
  color: #fefefe;
}
.contact-pill:active { transform: translateY(-1px); }
.contact-pill:focus {
  outline: 3px solid rgba(255,255,255,0.18);
  outline-offset: 3px;
}

/* Mobil: Buttons umbrechen */
@media (max-width: 600px) {
  .topbar { flex-wrap: nowrap; }
  .topbar-left { flex: 1; }
  .topbar-buttons {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .topbar-buttons .contact-pill:first-child { order: 1; }
  .topbar-buttons .contact-pill:last-child { order: 2; }
}


/* ==========================================================================
   5) Navigation (MetisMenu)
   ========================================================================== */
.metismenu .mm-toggler[aria-expanded="true"]::after {
  transform: rotate(180deg);
}
.metismenu > li > a {
  color: #fff !important;
  background: transparent;
}
.metismenu ul a,
.metismenu ul .mm-toggler {
  color: #3A4E89 !important;
  background: transparent;
}
.metismenu ul a:hover,
.metismenu ul .mm-toggler:hover {
  color: #2F3E70 !important;
  background-color: rgba(58, 78, 137, 0.08);
  border-radius: 0.4em;
  transition: all 0.2s ease-in-out;
}
.metismenu ul .mm-toggler::after { color: #3A4E89; }


/* ==========================================================================
   6) Banner (responsive)
   ========================================================================== */
.kooperationsbanner {
  position: relative;
  text-align: center;
  max-width: 100%;
  margin: 0 auto;
}
.kooperationsbanner img.responsive-map {
  width: 100%;
  height: auto;
  display: block;
}


/* ==========================================================================
   7) Globale Links & Inline-Buttons
   ========================================================================== */
a {
  color: #004080;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.2s ease;
}
a:hover,
a:focus {
  color: #0066cc;
  text-decoration: underline;
}

/* Schlichter Inline-Button */
a.button-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: 4px 10px;
  margin: 4px 0;
  background: #f0f6ff;
  border: 1px solid #cce0ff;
  border-radius: 8px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
a.button-link:hover {
  background: #e0f0ff;
  border-color: #99ccff;
  color: #3a4e89;
  text-decoration: none;
}

/* Verlauf-Button (z. B. für prominente Links) */
a.button-link2 {
  display: inline-block;
  padding: 4px 10px;
  margin: 5px 0;
  background: var(--igs-gradient-inverse);
  border: 1px solid #cce0ff;
  border-radius: 8px;
  font-weight: 500;
  color: #fff;
  text-decoration: none;
}
a.button-link2:hover {
  background: #e0f0ff;
  border-color: #99ccff;
  color: #111;
  text-decoration: none;
}

.mail-icon, .phone-icon, .teacherroom-icon {
  font-size: 1.2em;
  margin-right: 0.3em;
  vertical-align: middle;
}


/* ==========================================================================
   8) „Neuste Beiträge“ (Startseite)
   ========================================================================== */
.bottom-a.card {
  border: none;
  background: none;
  margin-top: 3rem;
}
.bottom-a.card .card-header {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--igs-blue-dark);
  background: transparent;
  border-bottom: none;
  margin-bottom: 0rem;
}

/* Grid der Artikel */
.mod-articles-items.mod-articles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Einzelkarte */
.mod-articles-item {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.mod-articles-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.mod-articles-item img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
  margin-bottom: 10px;
}
.mod-articles-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0.8rem 1rem 0.4rem;
}
.mod-articles-title a {
  color: var(--igs-blue-dark);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mod-articles-title a:hover { color: var(--igs-blue-light); }
.mod-articles-item-content p {
  color: #333;
  line-height: 1.5;
  margin: 0 1rem 0.8rem;
}
.mod-articles-item .readmore {
  margin-top: auto;
  padding: 0 1rem 1rem;
}
.mod-articles-item .readmore a {
  display: inline-block;
  background: var(--igs-gradient); /* hell → dunkel */
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}
.mod-articles-item .readmore a:hover {
  background: var(--igs-gradient-inverse); /* dunkel → hell */
}
@media (max-width: 768px) {
  .mod-articles-items.mod-articles-grid { gap: 1rem; }
  .mod-articles-title { font-size: 1rem; }
  .mod-articles-item .readmore a { font-size: 0.85rem; }
}


/* ==========================================================================
   9) Kategorie-Blog (z. B. „Aktuelles aus dem Schulleben“)
   ========================================================================== */
.com-content-category-blog__items.blog-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: stretch;
}

.com-content-category-blog__item.blog-item {
  display: flex;
  flex-direction: column;
  flex: 1 0 calc(50% - 1rem);
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
  min-height: 600px;
}
.blog-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

/* Bilder vollständig anzeigen */
.blog-item .item-image {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  overflow: hidden;
  background: #fafafa;
  padding: 0;
}
.blog-item .item-image img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
}

/* Textbereich */
.blog-item .item-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1rem;
}
.blog-item h2 {
  font-size: 1.25rem;
  margin-bottom: 0.5rem;
  min-height: 3rem;
}
.blog-item p {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 1rem;
}
.blog-item .readmore { margin-top: auto; }

/* Mobil */
@media (max-width: 768px) {
  .com-content-category-blog__item.blog-item {
    width: 100%;
    flex: 1 0 100%;
    margin-bottom: 25px;
  }
}

/* ==========================================================================
   Kategorie-Blog – „Weiterlesen“-Button (Angleichen an Modul-Stil)
   --------------------------------------------------------------------------
   Standardmäßig nutzt Joomla hier den Bootstrap-Button .btn.btn-secondary.
   Dieser erscheint sonst grau. Mit dieser Regel übernehmen wir das
   Farbkonzept der „Neusten Beiträge“-Karten:
   - hellblau als Grundfarbe
   - dunkelblauer Hover-Effekt
   - runde Ecken & dezenter Übergang
   ========================================================================== */

.com-content-category-blog__item .readmore a.btn.btn-secondary {
  display: inline-block;
  background: var(--igs-gradient); /* hell→dunkel */
  color: #fff;
  border: none;
  border-radius: 2rem;
  padding: 0.35rem 1rem;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.25s ease;
}

.com-content-category-blog__item .readmore a.btn.btn-secondary:hover {
  background: var(--igs-gradient-inverse); /* dunkel→hell */
  color: #fff;
  text-decoration: none;
}




/* ==========================================================================
   10) Sonstige Module & Utilities
   ========================================================================== */

/* Klassenliste (Reserve) */
.klassenliste {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 2rem;
}
@media (min-width: 768px) {
  .klassenliste {
    grid-template-columns: repeat(4, 1fr);
    gap: 5rem;
  }
}

/* Externe Links markieren (Text) */
a[href^="http"]:not([href*="igsaurich.de"])::after {
  content: " (extern)";
  font-size: 0.9em;
  margin-left: 2px;
  color: #666;
}

/* Veranstaltungen */
.mod_events_latest_content a { text-decoration: none !important; }
.mod_events_latest_content a:hover { text-decoration: underline; }

/* Abstände anpassen */
.container-banner { margin-bottom: 0 !important; }
.bottom-a.card { margin-top: 0 !important; }
.com-content-article__body { margin-bottom: 0 !important; }

/* Kontaktkarten (z. B. Lehrkräfte-Seite) */
.kontakt-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-top: 0.5rem;
}
@media (max-width: 768px) {
  .kontakt-grid { grid-template-columns: 1fr; }
}
.kontakt-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.kontakt-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.16);
}
@media (max-width: 768px) {
  .kontakt-card {
    flex-direction: column;      /* statt nebeneinander: untereinander */
    align-items: flex-start;     /* Text beginnt links */
  }

  .kontakt-bild {
    width: 140px;                /* etwas größer auf dem Handy */
    margin-bottom: 0.75rem;      /* Abstand zum Text */
  }
}


.kontakt-bild {
  width: 110px;
  height: auto;
  border-radius: 12px;
  object-fit: contain;
}
.kontakt-info { flex: 1; text-align: left; }
.kontakt-position {
  font-weight: bold;
  font-size: 1.1rem;
  margin: 0 0 0.2rem 0;
  color: #3a4e89;
}
.kontakt-name { font-size: 1.1rem; margin: 0 0 1rem 0; }

/* ======================================================
   Header + Footer Verlaufshintergrund erzwingen
   ====================================================== */
.container-header,
.footer {
  background: var(--igs-gradient) !important;
  background-color: transparent !important; /* Sicherheit */
}

/* ==============================================
   🔹 TOPBAR – LOGO + SCHRIFTZUG RESPONSIVE
   ============================================== */

/* Logo und Text nebeneinander, Text darf umbrechen */
.topbar-left {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: nowrap;          /* Logo & Text bleiben in einer Zeile */
  text-align: left;
  max-width: 100%;
}

/* Logo nie verzerren, sondern proportional skalieren */
.logo-igs {
  height: 50px;               /* feste Höhe */
  width: auto;                /* automatische Breite */
  object-fit: contain;
  flex-shrink: 0;             /* verhindert Schrumpfen bei Platzmangel */
}

/* Schriftzug darf umbrechen */
.topbar-left strong {
  display: inline-block;
  line-height: 1.2;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  white-space: normal;        /* erlaubt Umbruch */
  word-break: break-word;     /* falls nötig, bricht mitten im Wort */
}

/* Mobile Anpassung: kleiner, enger */
@media (max-width: 600px) {
  .logo-igs {
    height: 42px;
  }
  .topbar-left {
    gap: 0.5rem;
  }
  .topbar-left strong {
    font-size: 0.95rem;
  }
}

/* Sehr schmale Bildschirme: Logo über Text */
@media (max-width: 400px) {
  .topbar-left {
    flex-direction: column;   /* Logo oben, Text darunter */
    align-items: flex-start;  /* bündig links */
  }
  .topbar-left strong {
    text-align: left;
  }
}

/* für Lehrerliste */
.kontakt-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.kontakt-card{
  box-sizing:border-box;
  flex: 1 1 350px;     /* wächst, schrumpft, Mindest-“Zielbreite” */
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px;
  /* optional: background/border/radius */
}

.kontakt-text{
  flex: 1 1 auto;
  text-align:center;
  min-width:0;         /* wichtig gegen “Überlaufen” */
}

.kontakt-name{
  font-weight:700;
  font-size:1.3rem;
  margin:0 0 .25rem 0;
}

.kontakt-img{
  flex: 0 0 90px;      /* feste Bildspalte */
  display:flex;
  justify-content:center;
}

.kontakt-img img{
  max-width:100%;
  height:auto;
  display:block;
}

@media (max-width: 700px){
  .kontakt-card{
    flex-basis:100%;   /* auf Mobile volle Breite */
  }
}