/* Thema "htl": in Anlehnung an https://htl-braunau.at (FF.004).
   Schriften Barlow (Text) und Barlow Semi Condensed (Überschriften), lokal aus npm (@fontsource), keine Abrufe bei Google.
   Farben: Dunkelblau #253B55 (Schrift, Titel), Blau #3773BB (Kopf, Fuß), Gelb-Orange #F5A623 (Akzent, passt zum Blau; das kräftige #EF7D00 wirkte daneben zu hart), helles Grau #F4F5F6; Kacheln mit 10 px runden Ecken, sonst eckig wie die Schulseite. */
@import url("../../vendor/fonts/barlow/400.css");
@import url("../../vendor/fonts/barlow/500.css");
@import url("../../vendor/fonts/barlow-semi-condensed/500.css");
@import url("../../vendor/fonts/barlow-semi-condensed/600.css");

:root {
  /* Schrift */
  --sc-font: "Barlow", system-ui, sans-serif;
  --sc-font-size: 1rem;
  --sc-heading-font: "Barlow Semi Condensed", "Barlow", system-ui, sans-serif;
  --sc-heading-weight: 600;
  --sc-heading-transform: none;

  /* Grundfarben */
  --sc-bg: #f4f5f6;
  --sc-text: #2b2b2b;
  --sc-heading: #253b55;
  --sc-primary: #253b55;
  --sc-on-primary: #ffffff;
  --sc-border: #e5ecf3;

  /* Kopfleiste: dunkelblauer Balken mit oranger Linie, nur so breit wie der Inhalt (nicht über die volle Breite) */
  --sc-header-bg: transparent;
  --sc-header-border: 0 solid transparent;
  --sc-header-inner-bg: #3773bb;     /* mittleres Blau der Schulseite (Icons der Schnelllinks), weniger wuchtig als #253B55 */
  --sc-header-inner-border: 4px solid #f5a623;
  --sc-brand-bg: transparent;
  --sc-brand-text: #ffffff;
  --sc-brand-size: 1.6rem;
  --sc-brand-padding: 1rem 1.25rem;
  --sc-brand-prefix-display: none;    /* links "Services", rechts "HTL-Braunau" */
  --sc-header-aside-display: block;
  --sc-header-aside-size: 1.15rem;
  --sc-header-inner-width: calc(100% - 1.5rem);   /* Kopf bündig mit den Kacheln: Containerbreite minus Rand (unten je Bildschirmgröße) */

  /* Kacheln: weiß, Ecken 10 px rund, grauer Rahmen, blauer Balken oben (Hover: orange), Bildbereich weiß mit Trennlinie,
     Titel unter dem Bild mit Pfeil; Hover hebt an, Bild zoomt leicht, Pfeil rutscht nach rechts */
  --sc-tile-bg: #ffffff;
  --sc-tile-border: 1px solid #c9d0d8;
  --sc-tile-top-border: 4px solid #3773bb;
  --sc-tile-top-color-hover: #f5a623;
  --sc-tile-shadow: 0 1px 2px rgba(37, 59, 85, 0.08), 0 4px 12px rgba(37, 59, 85, 0.06);
  --sc-tile-shadow-hover: 0 6px 12px rgba(37, 59, 85, 0.12), 0 16px 32px rgba(37, 59, 85, 0.14);
  --sc-tile-lift: -4px;
  --sc-tile-radius: 10px;
  --sc-tile-title-order: 1;
  --sc-tile-title-align: center;
  --sc-tile-title-size: 1.15rem;
  --sc-tile-title-color: #253b55;
  --sc-tile-title-border: 0 solid transparent;
  --sc-tile-accent-hover: transparent;   /* Hover-Akzent sitzt im oberen Balken */
  --sc-tile-image-area: 160px;
  --sc-tile-image-bg: #ffffff;           /* rein weiß: viele Logos haben einen weißen Hintergrund, auf einem Verlauf wären sie Kästen */
  --sc-tile-image-border: 1px solid #e5ecf3;
  --sc-tile-image-zoom: 1.06;
  --sc-tile-arrow-display: inline-block;
  --sc-tile-arrow-color: #3773bb;
  --sc-tile-arrow-color-hover: #f5a623;

  /* Badge "HTL ext. Tool": orange wie die Akzent-Knöpfe der Schulseite, als Schrägband links oben in der Ecke */
  --sc-badge-bg: #f5a623;
  --sc-badge-text: #000000;
  --sc-badge-size: 0.7rem;
  --sc-badge-padding: 0.3rem 0;
  --sc-badge-radius: 0;
  --sc-badge-position: absolute;
  --sc-badge-top: 0.8rem;
  --sc-badge-left: -2.1rem;
  --sc-badge-width: 7rem;
  --sc-badge-transform: rotate(-45deg);
  --sc-badge-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  --sc-badge-long-display: none;      /* kurzer Text "ext. App", damit das Band weit in der Ecke sitzt */
  --sc-badge-short-display: inline;

  /* Footer: gleiches Blau wie der Kopf */
  --sc-surface: #ffffff;
  --sc-footer-bg: #3773bb;
  --sc-footer-text: #ffffff;
  --sc-footer-border: 0 solid transparent;
  --sc-radius: 0;
  --sc-shadow: none;
}

/* Kopfbreite = Bootstrap-Containerbreite je Bildschirmgröße (Handy, Tablet, PC), damit Schriftzug und Kacheln bündig sind */
/* Containerbreite minus 2 × 12 px Rand (Bootstrap-Gutter), also genau die Außenkante der Kacheln */
@media (min-width: 576px)  { :root { --sc-header-inner-width: 516px; } }
@media (min-width: 768px)  { :root { --sc-header-inner-width: 696px; } }
@media (min-width: 992px)  { :root { --sc-header-inner-width: 936px; } }
@media (min-width: 1200px) { :root { --sc-header-inner-width: 1116px; } }
@media (min-width: 1400px) { :root { --sc-header-inner-width: 1296px; } }