/* serviceCore: eigene Styles. Nur Variablen aus themes/<name>/theme.css verwenden, keine festen Farben (Konzept 2.5). */
body {
  background: var(--sc-bg);
  color: var(--sc-text);
  font-family: var(--sc-font);
  font-size: var(--sc-font-size);
}
h1, h2, h3, .sc-brand {
  font-family: var(--sc-heading-font);
}

/* ---------- Kopfleiste ---------- */
.sc-header {
  background: var(--sc-header-bg);
  border-bottom: var(--sc-header-border);
}
.sc-header-inner {
  max-width: var(--sc-header-inner-width);
  margin: 0 auto;
  background: var(--sc-header-inner-bg);
  border-bottom: var(--sc-header-inner-border);
  padding: 0 calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
/* Schriftzug: "HTL " davor (standard) oder "Services" links und "HTL-Braunau" rechts (htl) */
.sc-brand-prefix {
  display: var(--sc-brand-prefix-display);
}
.sc-header-aside {
  display: var(--sc-header-aside-display);
  color: var(--sc-brand-text);
  font-family: var(--sc-heading-font);
  font-weight: var(--sc-heading-weight);
  font-size: var(--sc-header-aside-size);
  padding: var(--sc-brand-padding);
  white-space: nowrap;
}
.sc-brand {
  display: inline-block;
  background: var(--sc-brand-bg);
  color: var(--sc-brand-text);
  font-weight: var(--sc-heading-weight);
  font-size: var(--sc-brand-size);
  text-transform: var(--sc-heading-transform);
  padding: var(--sc-brand-padding);
  text-decoration: none;
}
.sc-brand:hover,
.sc-brand:focus {
  color: var(--sc-brand-text);
}

/* ---------- Kacheln ---------- */
.sc-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--sc-tile-bg);
  border: var(--sc-tile-border);
  border-top: var(--sc-tile-top-border);
  border-radius: var(--sc-tile-radius);
  box-shadow: var(--sc-tile-shadow);
  position: relative;               /* Bezug für ein Schrägband (Badge) in der Ecke */
  overflow: hidden;
  color: inherit;
  text-decoration: none;
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
/* Hover nur mit Maus (auf Touch-Geräten "kleben" Hover-Effekte nach dem Antippen); Tastatur-Fokus immer */
@media (hover: hover) {
  .sc-tile:hover {
    box-shadow: var(--sc-tile-shadow-hover);
    transform: translateY(var(--sc-tile-lift));
    color: inherit;
  }
  .sc-tile:hover .sc-tile-title {
    box-shadow: inset 0 -3px 0 var(--sc-tile-accent-hover);
  }
  .sc-tile:hover {
    border-top-color: var(--sc-tile-top-color-hover);
  }
  .sc-tile:hover .sc-tile-image img {
    transform: scale(var(--sc-tile-image-zoom));
  }
  .sc-tile:hover .sc-tile-arrow {
    transform: translateX(3px);
    color: var(--sc-tile-arrow-color-hover);
  }
}
.sc-tile:focus-visible {
  box-shadow: var(--sc-tile-shadow-hover);
  color: inherit;
}
/* Touch: kurze Rückmeldung beim Antippen */
.sc-tile:active {
  box-shadow: var(--sc-tile-shadow-hover);
  border-top-color: var(--sc-tile-top-color-hover);
}
.sc-tile:focus-visible {
  outline: 2px solid var(--sc-primary);
  outline-offset: 2px;
}
.sc-tile-title {
  order: var(--sc-tile-title-order);
  display: flex;
  align-items: center;
  justify-content: var(--sc-tile-title-align);
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  min-height: 48px;
  padding: 0.9rem 1rem 0.4rem;
  border-bottom: var(--sc-tile-title-border);
  box-shadow: inset 0 -3px 0 transparent;
  transition: box-shadow 0.15s ease;
}
.sc-tile:focus-visible .sc-tile-title,
.sc-tile:active .sc-tile-title {
  box-shadow: inset 0 -3px 0 var(--sc-tile-accent-hover);
}
.sc-tile-title h2 {
  margin: 0;
  font-size: var(--sc-tile-title-size);
  font-weight: var(--sc-heading-weight);
  text-transform: var(--sc-heading-transform);
  color: var(--sc-tile-title-color);
}
/* Pfeil neben dem Titel: → gleicher Tab, ↗ neuer Tab (nur wenn das Thema ihn einblendet) */
.sc-tile-arrow {
  display: var(--sc-tile-arrow-display);
  color: var(--sc-tile-arrow-color);
  font-size: 0.9em;
  transition: transform 0.2s ease, color 0.2s ease;
}
.sc-badge-external {
  flex: 0 0 auto;
  background: var(--sc-badge-bg);
  color: var(--sc-badge-text);
  font-size: var(--sc-badge-size);
  font-weight: 600;
  padding: var(--sc-badge-padding);
  border-radius: var(--sc-badge-radius);
  white-space: nowrap;
  /* im Titel (standard) oder als Schrägband links oben in der Ecke (htl) */
  position: var(--sc-badge-position);
  top: var(--sc-badge-top);
  left: var(--sc-badge-left);
  width: var(--sc-badge-width);
  text-align: center;
  transform: var(--sc-badge-transform);
  box-shadow: var(--sc-badge-shadow);
  z-index: 1;
}
/* langer Text im Titel (standard), kurzer im Schrägband (htl) */
.sc-badge-long {
  display: var(--sc-badge-long-display);
}
.sc-badge-short {
  display: var(--sc-badge-short-display);
}
.sc-tile-image {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--sc-tile-image-area);
  padding: 1rem;
  background: var(--sc-tile-image-bg);
  border-bottom: var(--sc-tile-image-border);
}
.sc-tile-image img {
  max-width: 100%;
  max-height: 100%;
  height: auto;
  object-fit: contain;
  transition: transform 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .sc-tile,
  .sc-tile-title,
  .sc-tile-image img,
  .sc-tile-arrow {
    transition: none;
  }
}

/* Handy: zwei Kacheln je Reihe, kleinerer Bildbereich, kleinere Schrift */
@media (max-width: 575.98px) {
  .sc-tile-image {
    height: calc(var(--sc-tile-image-area) * 0.7);
    padding: 0.6rem;
  }
  .sc-tile-title {
    padding: 0.6rem 0.6rem 0.4rem;
  }
  .sc-tile-title h2 {
    font-size: calc(var(--sc-tile-title-size) * 0.9);
  }
  .sc-brand {
    font-size: calc(var(--sc-brand-size) * 0.85);
  }
  .sc-header-aside {
    font-size: calc(var(--sc-header-aside-size) * 0.85);
  }
}

/* ---------- Kurztext unter den Kacheln (SEO) ---------- */
.sc-about {
  margin-top: 2.5rem;
  color: var(--sc-text);
  opacity: 0.75;
  font-size: 0.875rem;
  max-width: 60rem;
}
.sc-about h2 {
  font-size: 1rem;
  font-weight: var(--sc-heading-weight);
  color: var(--sc-heading);
  margin-bottom: 0.35rem;
}
.sc-about a {
  color: inherit;
}

/* ---------- Footer, Fehlerseite ---------- */
.footer-card {
  background: var(--sc-footer-bg);
  color: var(--sc-footer-text);
  border: var(--sc-footer-border);
  border-radius: var(--sc-radius);
  box-shadow: var(--sc-shadow);
  padding: 1rem;
  margin-bottom: 2rem;
}
/* der Footer trägt selbst .text-muted (Bootstrap: grau mit !important), deshalb auch .footer-card.text-muted */
.footer-card.text-muted,
.footer-card .text-muted,
.footer-card a {
  color: var(--sc-footer-text) !important;
}
.error-icon {
  font-size: 4rem;
  color: var(--sc-primary);
}