/* KEM Elektrotechnik — gemeinsames Stylesheet
   Farben, Schriften und Bausteine für alle Seiten. */

:root{
  --blau:#2f6fb8;      /* HTL */
  --blau-hell:#eef5fb;
  --rot:#c22a3f;       /* BFI Werkmeisterschule */
  --rot-hell:#fdf1f2;
  --violett:#7b4fa3;   /* Informationen */
  --violett-hell:#f7f3fa;
  --dunkel:#16213e;
  --text:#3c4657;
  --grau:#5b6472;
  --panel:#ffffffb3;
  --schrift:'Helvetica Neue',Helvetica,Arial,sans-serif;
  --mono:'SFMono-Regular',Menlo,Consolas,monospace;
  --raster:31.177px 54px;   /* Größe der Punktraster-Kachel */
  --breite:1180px;

  /* Fachfarben (Farbschema v3) — nur auf Fach-Unterseiten aktiv */
  --c-es-primary:#1f5fbf;   --c-es-border:#c3d6f5;
  --c-aut-primary:#0e7fa8;  --c-aut-border:#b5e0ef;
  --c-ie-primary:#ac3d82;   --c-ie-border:#f0cbe1;
  --c-cpe-primary:#0e8a5f;  --c-cpe-border:#b3e5d2;
  --c-lab-primary:#dda033;  --c-lab-border:#f2ddb2;  --c-lab-text:#8a5b12;
  --c-sopk-primary:#c22b3c; --c-sopk-border:#fecdd3;
  --c-ant-primary:#5b4bc4;  --c-ant-border:#d0caf3;
}

*{box-sizing:border-box}
body{margin:0;background:#e6e4e1;font-family:var(--schrift);color:var(--text)}
a{color:var(--blau);text-decoration:none}
a:hover{text-decoration:underline}
img{border:0}

.seite{position:relative;overflow:hidden;width:var(--breite);margin:0 auto;background:#fff}

/* Kopfleiste */
.kopf{position:relative;z-index:2;display:flex;align-items:stretch}
.kopf-ecke{position:absolute;left:0;top:0;width:320px;height:auto;pointer-events:none;z-index:1}
.kopf-logo{flex:none;width:300px;display:flex;align-items:center;padding:14px 0 14px 34px}
.kopf-logo img{width:104px;height:104px;display:block}
.kopf-titel{display:flex;flex-direction:column;justify-content:center;gap:9px;padding:14px 40px 14px 0;flex:1}
.kopf-titel strong{font:700 32px/1.15 var(--schrift);color:var(--dunkel);letter-spacing:-.015em}
.kopf-titel .zusatz{font:400 17px/24px var(--schrift);color:var(--grau);max-width:62ch}
.kopf-titel .zusatz b{font-weight:500;color:var(--dunkel)}
.kopf-jahr{flex:none;display:flex;align-items:center;padding:14px 40px 14px 24px;font:700 24px/1.2 var(--schrift);color:var(--dunkel);letter-spacing:-.01em;text-align:right;white-space:nowrap}

/* Inhaltsfläche mit Punktraster */
.flaeche{position:relative;overflow:hidden;background:#fff url(../assets/punktraster.svg) repeat left top;background-size:var(--raster)}
.flaeche-ecke{mix-blend-mode:multiply;position:absolute;right:0;bottom:0;width:520px;height:auto;pointer-events:none}
.inhalt{position:relative;padding:36px 40px 96px;display:flex;flex-direction:column;gap:20px}

.zurueck{font:500 15px/1.2 var(--schrift);color:var(--grau);margin:52px 0 4px}
.zurueck a{color:var(--blau)}

/* Blöcke */
.block{border:1px solid #2f6fb833;border-left:4px solid var(--blau);padding:34px 36px;background-color:var(--panel)}
.block.zweispaltig{display:grid;grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:36px}
.block.rot{border-color:#c22a3f33;border-left-color:var(--rot)}
.block.violett{border-color:#7b4fa333;border-left-color:var(--violett)}

.marke{display:block;font:700 17px/1 var(--mono);letter-spacing:.1em;color:var(--blau);margin:0 0 14px}
.rot .marke{color:var(--rot)}
.violett .marke{color:var(--violett)}
.block-kopf{display:flex;flex-direction:column}
.block-titel{display:block;font:700 25px/1.15 var(--schrift);letter-spacing:-.015em;color:var(--dunkel);margin:0 0 10px}
.block-titel.eng{margin-bottom:6px}
.block-lede{display:block;font:400 17px/23px var(--schrift);color:var(--grau);margin:0 0 18px}
.block-logo{margin-top:auto}
.block-logo img{width:150px;height:auto;display:block}

.merkmale{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 26px}
.merkmale span{font:500 13px/1.25 var(--schrift);color:var(--blau);border:1px solid #2f6fb880;padding:5px 8px;white-space:nowrap}
.rot .merkmale span{color:var(--rot);border-color:#c22a3f80}

.hinweis{display:block;font:700 12.5px/1 var(--mono);letter-spacing:.14em;color:var(--blau);margin:0 0 14px}
.text{font:400 16.5px/28px var(--schrift);color:var(--text);margin:0;text-wrap:pretty;text-align:justify;hyphens:auto}
.text + .text{margin-top:16px}

/* Kachelraster (Fächer, Informationen) */
.kacheln{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;align-content:start}
.kacheln.drei{grid-template-columns:repeat(3,minmax(0,1fr))}
.kachel{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
  background:var(--blau-hell);padding:16px 18px;min-height:74px;text-decoration:none}
.kachel:hover{background:#fff;outline:1px solid var(--blau);text-decoration:none}
.kachel-text{display:flex;flex-direction:column;gap:4px}
.kachel-code{font:700 17px/1 var(--mono);letter-spacing:.08em;color:var(--blau)}
.kachel-name{font:400 16px/22px var(--schrift);color:var(--dunkel)}
.kachel svg{display:block;flex:none}
.rot .kachel{background:var(--rot-hell)}
.rot .kachel:hover{outline-color:var(--rot)}
.rot .kachel-code{color:var(--rot)}
.violett .kachel{background:var(--violett-hell)}
.violett .kachel:hover{outline-color:var(--violett)}
.violett .kachel-code{color:var(--violett)}
.kachel-inaktiv{opacity:.55;cursor:default}
.kachel-inaktiv:hover{background:var(--rot-hell);outline:none}
.kachel-inaktiv .kachel-name::after{content:" (folgt)";font-size:13px;color:#00000080}



/* Jahrgangsraster auf den Fachseiten */
.jahrgaenge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.jahrgang{border:1px solid #2f6fb833;border-top:3px solid var(--blau);background:#ffffffdb;padding:20px 22px 22px}
.jahrgang-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 12px}
.jahrgang-kopf strong{font:700 16px/1.2 var(--schrift);color:var(--blau)}
.jahrgang-kopf span{font:400 13px/1.2 var(--schrift);color:var(--grau)}
.themen{display:flex;flex-direction:column;gap:8px}
.themen span{font:400 15px/22px var(--schrift);color:var(--text);padding-left:14px;border-left:2px solid #2f6fb866;hyphens:auto}
.rot .jahrgang{border-color:#c22a3f33;border-top-color:var(--rot)}
.rot .jahrgang-kopf strong{color:var(--rot)}
.rot .themen span{border-left-color:#c22a3f66}

.platzhalter{font:400 16.5px/28px var(--schrift);color:var(--grau);margin:0;text-align:justify;hyphens:auto}
.gesetz{display:flex;flex-direction:column;gap:14px}
.gesetz p{font:400 16px/27px var(--schrift);color:var(--text);margin:0;text-wrap:pretty;text-align:justify;hyphens:auto}
.gesetz p b{font:600 14px/1.2 var(--mono);color:var(--violett);letter-spacing:.04em;margin-right:6px}

/* Lehrstoff-Listen auf den Fachseiten */
.jahrgaenge.zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
.jahrgaenge.eins{grid-template-columns:minmax(0,1fr)}
.themen b{font-weight:600;color:var(--dunkel)}
.themen .unter{display:flex;flex-direction:column;gap:5px;margin:6px 0 0;padding:0 0 0 14px;list-style:none}
.themen .unter li{font:400 14px/21px var(--schrift);color:var(--grau);position:relative;hyphens:auto}
.themen .unter li::before{content:"";position:absolute;left:-10px;top:9px;width:4px;height:4px;background:currentColor;opacity:.6}
.notiz{font:400 15px/24px var(--schrift);color:var(--grau);margin:14px 0 0;padding:12px 16px;background:#00000008;border-left:3px solid currentColor;text-align:justify;hyphens:auto}
.notiz b{font-weight:600;color:var(--dunkel)}
.ziele{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.ziele li{font:400 16px/25px var(--schrift);color:var(--text);padding-left:16px;border-left:2px solid currentColor;hyphens:auto}
.violett .jahrgang{border-color:#7b4fa333;border-top-color:var(--violett)}
.violett .jahrgang-kopf strong{color:var(--violett)}
.violett .themen span{border-left-color:#7b4fa366}
.violett .ziele li,.violett .notiz{border-left-color:var(--violett)}
.violett .hinweis{color:var(--violett)}

/* Software-Karten */
.apps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.app{display:flex;flex-direction:column;border:1px solid #7b4fa333;border-top:3px solid var(--violett);background:#ffffffdb;padding:0 0 20px;text-decoration:none}
.app-bild{display:flex;align-items:center;justify-content:center;height:150px;margin:0;background:#7b4fa30f;border-bottom:1px solid #7b4fa326;overflow:hidden;transition:background .18s}
a.app-bild:hover{background:#7b4fa31f}
.app-bild img{width:100%;height:100%;object-fit:contain;display:block;padding:18px;box-sizing:border-box}
.app-bild span{font:400 13px/19px var(--schrift);color:var(--violett);text-align:center;padding:0 18px;opacity:.75}
.app-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:18px 22px 0}
.app-kopf strong{font:700 17px/1.2 var(--schrift);color:var(--violett)}
.app-titel{text-decoration:none;border-bottom:1px solid transparent}
.app-titel:hover{border-bottom-color:var(--violett)}
.app-kopf span{font:400 12.5px/1.2 var(--mono);color:var(--grau);white-space:nowrap}
.app p{font:400 15px/23px var(--schrift);color:var(--text);margin:10px 0 0;padding:0 22px;text-align:justify;hyphens:auto}
.app a{font:500 14.5px/1.2 var(--schrift);margin:14px 0 0;padding:0 22px;word-break:break-all}

/* Kompetenztabelle */
.tabelle{width:100%;border-collapse:collapse;margin:0}
.tabelle th,.tabelle td{text-align:left;vertical-align:top;padding:14px 18px;border-bottom:1px solid #7b4fa326}
.tabelle th{font:700 14px/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--violett);white-space:nowrap;width:230px}
.tabelle td{font:400 15px/24px var(--schrift);color:var(--text);text-align:justify;hyphens:auto}
.tabelle tr:last-child th,.tabelle tr:last-child td{border-bottom:none}

/* Farbleitsystem */
.farben{display:flex;flex-direction:column;gap:8px;margin:8px 0 0}
.farben div{display:flex;align-items:baseline;gap:10px;font:400 14px/21px var(--schrift);color:var(--grau);hyphens:auto}
.farben i{flex:none;width:11px;height:11px;border-radius:50%;margin-top:5px;align-self:flex-start}

/* Fachfarben je Themengebiet — Rahmen & Schrift auf Fach-Unterseiten */
.thema-es .block{border-color:var(--c-es-border);border-left-color:var(--c-es-primary)}
.thema-es .marke,.thema-es .hinweis,.thema-es .jahrgang-kopf strong{color:var(--c-es-primary)}
.thema-es .merkmale span{color:var(--c-es-primary);border-color:var(--c-es-border)}
.thema-es .jahrgang{border-color:var(--c-es-border);border-top-color:var(--c-es-primary)}
.thema-es .themen span{border-left-color:var(--c-es-border)}

.thema-aut .block{border-color:var(--c-aut-border);border-left-color:var(--c-aut-primary)}
.thema-aut .marke,.thema-aut .hinweis,.thema-aut .jahrgang-kopf strong{color:var(--c-aut-primary)}
.thema-aut .merkmale span{color:var(--c-aut-primary);border-color:var(--c-aut-border)}
.thema-aut .jahrgang{border-color:var(--c-aut-border);border-top-color:var(--c-aut-primary)}
.thema-aut .themen span{border-left-color:var(--c-aut-border)}

.thema-ie .block{border-color:var(--c-ie-border);border-left-color:var(--c-ie-primary)}
.thema-ie .marke,.thema-ie .hinweis,.thema-ie .jahrgang-kopf strong{color:var(--c-ie-primary)}
.thema-ie .merkmale span{color:var(--c-ie-primary);border-color:var(--c-ie-border)}
.thema-ie .jahrgang{border-color:var(--c-ie-border);border-top-color:var(--c-ie-primary)}
.thema-ie .themen span{border-left-color:var(--c-ie-border)}

.thema-cpe .block{border-color:var(--c-cpe-border);border-left-color:var(--c-cpe-primary)}
.thema-cpe .marke,.thema-cpe .hinweis,.thema-cpe .jahrgang-kopf strong{color:var(--c-cpe-primary)}
.thema-cpe .merkmale span{color:var(--c-cpe-primary);border-color:var(--c-cpe-border)}
.thema-cpe .jahrgang{border-color:var(--c-cpe-border);border-top-color:var(--c-cpe-primary)}
.thema-cpe .themen span{border-left-color:var(--c-cpe-border)}

.thema-lab .block{border-color:var(--c-lab-border);border-left-color:var(--c-lab-primary)}
.thema-lab .marke,.thema-lab .hinweis{color:var(--c-lab-text)}
.thema-lab .jahrgang-kopf strong{color:var(--c-lab-text)}
.thema-lab .merkmale span{color:var(--c-lab-text);border-color:var(--c-lab-border)}
.thema-lab .jahrgang{border-color:var(--c-lab-border);border-top-color:var(--c-lab-primary)}
.thema-lab .themen span{border-left-color:var(--c-lab-border)}

.thema-sopk .block{border-color:var(--c-sopk-border);border-left-color:var(--c-sopk-primary)}
.thema-sopk .marke,.thema-sopk .hinweis,.thema-sopk .jahrgang-kopf strong{color:var(--c-sopk-primary)}
.thema-sopk .merkmale span{color:var(--c-sopk-primary);border-color:var(--c-sopk-border)}
.thema-sopk .jahrgang{border-color:var(--c-sopk-border);border-top-color:var(--c-sopk-primary)}
.thema-sopk .themen span{border-left-color:var(--c-sopk-border)}

.thema-ant .block{border-color:var(--c-ant-border);border-left-color:var(--c-ant-primary)}
.thema-ant .marke,.thema-ant .hinweis,.thema-ant .jahrgang-kopf strong{color:var(--c-ant-primary)}
.thema-ant .merkmale span{color:var(--c-ant-primary);border-color:var(--c-ant-border)}
.thema-ant .jahrgang{border-color:var(--c-ant-border);border-top-color:var(--c-ant-primary)}
.thema-ant .themen span{border-left-color:var(--c-ant-border)}
.thema-es .ziele li,.thema-es .notiz{border-left-color:var(--c-es-primary)}
.thema-aut .ziele li,.thema-aut .notiz{border-left-color:var(--c-aut-primary)}
.thema-ant .ziele li,.thema-ant .notiz{border-left-color:var(--c-ant-primary)}

/* Fuß */
.fuss{position:relative;z-index:2;border-top:1px solid #16213e1a;padding:22px 40px 26px;background:#fff;
  display:flex;flex-wrap:wrap;gap:8px 28px;align-items:baseline}
.fuss p{font:400 13.5px/20px var(--schrift);color:var(--grau);margin:0}
.fuss nav{display:flex;gap:20px;margin-left:auto}
.fuss nav a{font:500 13.5px/20px var(--schrift);color:var(--grau)}
.fuss nav a:hover{color:var(--blau)}