/*
==================================================================
Mobilmenue – altes Erscheinungsbild auf neuem Markup
==================================================================

Unter Joomla 3 kam das Mobilmenue vom Plugin "Maximenu CK Mobile". Dessen
Aussehen steckte in einer aus den Plugin-Optionen generierten Datei
(plugins/system/maximenuckmobile/themes/custom/maximenuckmobile.css).
Das Plugin ist eingestellt; der Nachfolger "Mobile Menu CK" bringt ein
eigenes Theme mit (dunkelgrau/tuerkis) und benennt saemtliche Klassen um.

Diese Datei stellt das alte Erscheinungsbild wieder her. ALLE FARB-, MASS-
UND SCHRIFTWERTE SIND UNVERAENDERT AUS DER ALTEN PLUGIN-DATEI UEBERNOMMEN,
nachgeschlagen an der eingefrorenen J3-Referenz www.skigiesing.de.

Klassenzuordnung alt -> neu
---------------------------
.mobilebarmaximenuck            -> .mobilemenuck-bar
  .mobilebarmenutitleck         ->   .mobilemenuck-bar-title
  .mobilebuttonmaximenuck       ->   .mobilemenuck-bar-button
.mobilemaximenuck               -> .mobilemenuck
  .mobilemaximenucktopbar       ->   .mobilemenuck-topbar
  .mobilemaximenucktitle        ->   .mobilemenuck-title
  .mobilemaximenuckclose        ->   .mobilemenuck-button
  .mobilemaximenuckitem         ->   .mobilemenuck-item
  .mobilemaximenucksubmenu      ->   .mobilemenuck-submenu
  span.mobiletextck             ->   span.mobilemenuck-item-text > span.titreck
Die Klassen level1/level2/maximenuck an den Zeilen-DIVs sind unveraendert.

Struktureller Unterschied, der die Selektoren erklaert
-----------------------------------------------------
Das alte Plugin hat Hintergrund, Rahmen und Innenabstand einer Menuezeile auf
das <a> gelegt. Das neue legt sie auf das umschliessende <div class="levelN">.
Diese Datei folgt dem neuen Aufbau – das ist nicht nur weniger Gegenwehr,
sondern noetig: Trenner sind im neuen Markup <span class="separator"> statt
<a class="separator"> und wuerden ueber das <a> nie erfasst.

Warum "body" vor jedem Selektor
-------------------------------
Joomla gibt Stylesheets als <link> aus, danach die Style-Deklarationen der
Erweiterungen. Das Theme von Mobile Menu CK ist eine solche Deklaration und
steht damit IMMER hinter dieser Datei. Bei gleicher Spezifitaet gewinnt es.
Das vorangestellte "body" hebt jede Regel hier um ein Element an und dreht das
um – ohne !important und ohne die Modul-ID fest zu verdrahten (das Theme des
Plugins nutzt [data-id="maximenuck97"], was bei einer neuen Modulinstanz
stillschweigend ins Leere liefe).

WARUM DIESE DATEI NICHT mobilemenuck.css HEISSEN DARF
-----------------------------------------------------
Sie hiess in Version 6.0.6 so – und hat damit die Basis-Theme-Datei des Plugins
verdraengt. Mobile Menu CK baut seinen <style>-Block aus zwei Teilen: der
Basisdatei themes/<theme>/mobilemenuck.css und den aus den Optionen erzeugten
[data-id="..."]-Regeln. Die Basisdatei sucht es ueber Joomlas Override-Kette,
und die schaut zuerst in media/templates/site/<template>/css/. Lag dort eine
Datei gleichen Namens, wurde deren Inhalt anstelle der Basis eingesetzt –
nachweisbar daran, dass die Kommentare dieser Datei woertlich im <style>-Block
der Seite standen.

Verloren ging dabei unter anderem
    .mobilemenuck-bar { position: relative; left: 0; top: 0; right: 0; z-index: 100; }
Ohne left/right schrumpft die eingeklappte Leiste auf die Breite ihres Inhalts
(76px statt 375px), ohne top rutscht sie um die 40px body-padding nach unten,
und der z-index faellt auf auto.

Merksatz fuer alle weiteren Extensions: eine Datei im Template-Ordner, die
genauso heisst wie eine Datei der Erweiterung, ersetzt diese still. Neue
Template-Stylesheets deshalb eindeutig benennen.

Zwei bewusste Abweichungen im Wortlaut (nicht in der Wirkung)
-------------------------------------------------------------
1. Verlaeufe. Die alte Datei zaehlte fuenf Herstellerpraefixe auf und schloss
   mit dem unpraefixierten "linear-gradient(top, ...)" – das ist nach heutiger
   Syntax ungueltig, weshalb Browser tatsaechlich die -webkit-Variante nahmen.
   Hier steht die gueltige Schreibweise "linear-gradient(to bottom, ...)".
   Gemessen identisch: rgb(253,253,253) -> rgb(238,238,238).
2. Schriftfamilie. Im Bestand stand "Helvetica" ohne Rueckfallebene. Hier
   "Helvetica, Arial, sans-serif" – Helvetica gibt es unter Windows und Android
   nicht, ohne Rueckfall entscheidet die Browservorgabe (teils eine Serifen-
   schrift). Der Zusatz stellt die Darstellung ueber die Plattformen gleich.

ACHTUNG
-------
Aendert jemand im Backend die Theme-Optionen des Plugins, bleibt das wirkungslos –
diese Datei ueberschreibt sie. Das Aussehen wird hier gepflegt, nicht dort.
Nicht per CSS loesbar und deshalb Backend-Sache: Titeltext der Leiste
("Ski & Board Giesing"), Panelbreite (300px) und der Breakpoint (1000px).
*/


/*
==================================
Eingeklappte Leiste am oberen Rand
==================================
Nur Farben und Masse. display und position gehoeren zur Breakpoint-Logik des
Plugins und werden hier bewusst nicht angefasst.
*/

body .mobilemenuck-bar .mobilemenuck-bar-title {
	display: block;
	background: #7FA8D6;
	background: linear-gradient(to bottom, #7FA8D6 0%, #5E88AE 100%);
	font-size: 20px;
	color: #FFFFFF;
	font-weight: bold;
	text-indent: 20px;
	line-height: 43px;
	height: 43px;
	font-family: Helvetica, Arial, sans-serif;
}

body .mobilemenuck-bar .mobilemenuck-bar-button {
	cursor: pointer;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	/* Kein eigener Hintergrund – der Verlauf der Leiste soll durchscheinen.
	   Das neue Theme setzt hier #333333. */
	background: none;
	text-align: center;
	padding-top: 3px;
	font-size: 1.8em;
	color: #FFFFFF;
	line-height: 1.3em;
	height: 35px;
	width: 35px;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

body .mobilemenuck-bar .mobilemenuck-bar-button a {
	color: #FFFFFF;
	font-size: 1.8em;
}


/*
==================================
Ausgeklapptes Panel
==================================
*/

/*
Die Klasse steht hier doppelt. Das ist kein Versehen: das Theme des Plugins
adressiert das Panel mit [data-id="maximenuck97"].mobilemenuck – ein
Attributselektor zaehlt wie eine Klasse, macht also (0,2,0). "body .mobilemenuck"
waere nur (0,1,1) und wuerde verlieren. Die Wiederholung hebt auf (0,2,1).
Betrifft nur die Regeln, die direkt am Panel oder am <a> ansetzen; bei den
Zeilen reicht das vorangestellte body.
*/
body .mobilemenuck.mobilemenuck {
	box-sizing: border-box;
	width: 100%;
	font-size: 1.2em;
	color: #2B3942;
	font-weight: bold;
	font-family: Helvetica, Arial, sans-serif;
	/* Das alte Plugin gab dem Panel weder Hintergrund noch Innenabstand. */
	background: none;
	padding-bottom: 0;
}

body .mobilemenuck .mobilemenuck-topbar {
	position: relative;
}

body .mobilemenuck .mobilemenuck-title {
	display: block;
	background: #7FA8D6;
	background: linear-gradient(to bottom, #7FA8D6 0%, #5E88AE 100%);
	font-size: 20px;
	color: #FFFFFF;
	text-indent: 20px;
	line-height: 43px;
	height: 43px;
}

body .mobilemenuck .mobilemenuck-button {
	cursor: pointer;
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	background: none;
	text-align: center;
	font-size: 1.8em;
	color: #FFFFFF;
	line-height: 35px;
	min-height: 35px;
	height: 35px;
	width: 35px;
	font-family: "Segoe UI", Helvetica, Arial, sans-serif;
}

/*
font-size: inherit ist wichtig. Das Theme des Plugins setzt 1.2em sowohl am
Panel als auch noch einmal am <a>, was sich multipliziert (16,8px -> 20,2px).
Im Bestand stand die Angabe nur am Panel, das <a> hat geerbt.

Zur Farbe siehe den Abschnitt "Zwei Linkfarben" weiter unten – #00499f ist der
Normalfall, #2B3942 die Ausnahme fuer Ebene 1 und Trenner.
*/
body .mobilemenuck.mobilemenuck a {
	display: block;
	color: #00499f;
	font-size: inherit;
	font-weight: bold;
	text-decoration: none;
}

body .mobilemenuck.mobilemenuck span.separator {
	display: block;
	color: #2B3942;
	font-size: inherit;
	font-weight: bold;
	text-decoration: none;
}

body .mobilemenuck a:hover {
	text-decoration: none;
}

body .mobilemenuck .mobilemenuck-item > div {
	position: relative;
}


/*
==================================
Menuezeilen
==================================
Der Verlauf #FDFDFD -> #EEEEEE mit 1px Trennlinie #CACACA ist auf allen Ebenen
gleich; unterschieden wird nur ueber den linken Einzug und das Praefix.

Das neue Theme setzt zusaetzlich border-radius und margin an jede Zeile – beides
wird hier zurueckgenommen, sonst stehen die Zeilen als abgerundete Kacheln
untereinander statt als durchgehende Liste.
*/

body .mobilemenuck .mobilemenuck-item > div.level1,
body .mobilemenuck .mobilemenuck-item > div.level2,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) {
	background: #FDFDFD;
	background: linear-gradient(to bottom, #FDFDFD 0%, #EEEEEE 100%);
	border-bottom: #CACACA 1px solid;
	border-radius: 0;
	margin: 0;
	padding: 3px 3px 3px 15px;
	line-height: 35px;
	color: #2B3942;
}

/* Kein Hover-Wechsel im Bestand – die Zeilen bleiben unveraendert. */
body .mobilemenuck .mobilemenuck-item > div.level1:hover,
body .mobilemenuck .mobilemenuck-item > div.level1.open,
body .mobilemenuck .mobilemenuck-item > div.level2:hover,
body .mobilemenuck .mobilemenuck-item > div.level2.open,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu):hover,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu).open {
	background: #FDFDFD;
	background: linear-gradient(to bottom, #FDFDFD 0%, #EEEEEE 100%);
}

body .mobilemenuck .mobilemenuck-item > div.level1 a,
body .mobilemenuck .mobilemenuck-item > div.level2 a,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) a,
body .mobilemenuck .mobilemenuck-item > div span.separator {
	line-height: 35px;
}

/*
==================================
Zwei Linkfarben
==================================
Im Bestand sind die Eintraege NICHT einfarbig, auch wenn es auf den ersten Blick
so aussieht. Gemessen an www.skigiesing.de:

    Ebene 1 ("Home", "Ueber uns", …)     rgb(43,57,66)   #2B3942
    Ebene 2 ("Newsletter", "Team", …)    rgb(0,73,159)   #00499f   <- Blau
    Trenner ("Skikurse", …)              rgb(43,57,66)   #2B3942

Das war halb Absicht, halb Zufall der Ladereihenfolge: Das alte Plugin setzte
color:#2B3942 nur in der level1-Regel und in .mobilemaximenuck a. Letztere hat
dieselbe Spezifitaet wie a,a:link,… {color:#00499f} aus template.css:318 – und
weil template.css in Joomla 3 als letztes Stylesheet stand, gewann bei diesem
Gleichstand das Blau. Auf Ebene 1 blieb es beim Grau, weil die level1-Regel
spezifischer ist.

Dieser Gleichstand laesst sich nicht nachbauen: das neue Theme adressiert mit
[data-id="…"] und ist damit spezifischer als template.css. Die Werte stehen
deshalb ausdruecklich hier. Aendert sich die Linkfarbe in template.css, muss
sie hier nachgezogen werden.
*/

/* Ebene 1 und Trenner: Grau. */
body .mobilemenuck .mobilemenuck-item > div.level1,
body .mobilemenuck .mobilemenuck-item > div.level1 a,
body .mobilemenuck .mobilemenuck-item > div span.separator {
	color: #2B3942;
}

/* Ebene 2 und tiefer: das Blau der Website. */
body .mobilemenuck .mobilemenuck-item > div.level2 a,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) a {
	color: #00499f;
}

/* Einzug je Ebene */
body .mobilemenuck .mobilemenuck-item > div.level2 {
	padding-left: 25px;
}

body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div:not(.mobilemenuck-submenu) {
	padding-left: 35px;
}

body .mobilemenuck .mobilemenuck-item > div.level4 {
	background: #e3e3e3;
	padding-left: 45px;
}

/*
Praefixe der Unterebenen. Im Bestand lagen sie auf dem <a>; hier zusaetzlich auf
span.separator, weil Trenner im neuen Markup keine <a> mehr sind (z.B.
"Skikurse" und "Snowboardkurse" unter "Kurse & Preise").
*/
body .mobilemenuck .mobilemenuck-item > div.level2 > a::before,
body .mobilemenuck .mobilemenuck-item > div.level2 > span.separator::before {
	display: block;
	float: left;
	height: 100%;
	content: "- ";
	margin-right: 3px;
}

/*
Ebene 3. Im Bestand stand hier content: "-— " – in der Plugin-Datei allerdings
doppelt UTF-8-kodiert (Bytes C3 A2 C2 80 C2 94), sichtbar also als Zeichensalat.
Hier die offensichtlich gemeinte Fassung. Faellt nicht auf: das Menue hat nur
zwei Ebenen.
*/
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div > a::before,
body .mobilemenuck div.level2 + .mobilemenuck-submenu .mobilemenuck-item > div > span.separator::before {
	display: block;
	float: left;
	height: 100%;
	content: "-\2014 ";
	margin-right: 3px;
}

body .mobilemenuck div span.descck {
	padding-left: 10px;
	font-size: 12px;
}


/*
==================================
Hexenwald-Eintrag
==================================
Der Menuepunkt hat keine Beschriftung, sondern ein Bild. Das alte Plugin gab ihm
ein <img class="mobileiconck"> mit der eigens angelegten Mobilfassung
menu_hexenwald_mobile.png (153x24). Mobile Menu CK rendert dieses Bild nicht –
im neuen Markup steht dort ein leeres <span class="titreck">, die Zeile bliebe
also leer. Ersatz ueber den Hintergrund.

Zusaetzlich noetig: template.css:460 gibt a.menu_hexenwald 153x87px und das
Desktopbild. Im Mobilpanel muss beides zurueckgenommen werden, sonst ist die
Zeile 87px hoch. (Unter Joomla 3 gewann an dieser Stelle der Verlauf des
Plugins – dieselbe Wirkung, nur ueber die Spezifitaet erreicht.)
*/

body .mobilemenuck .mobilemenuck-item > div.level1 > a.menu_hexenwald,
body .mobilemenuck .mobilemenuck-item > div.level1 > a.menu_hexenwald:hover {
	width: auto;
	/* Feste Hoehe statt auto: der leere Beschriftungs-Span erzeugt sonst eine
	   eigene Zeilenbox und die Zeile wird hoeher als die uebrigen. */
	height: 35px;
	line-height: 35px;
	overflow: hidden;
	/*
	 * Das einzige !important in dieser Datei, und nur, weil template.css:1332
	 * selbst eines setzt: in der 929px-Query bekommt a.menu_hexenwald
	 * padding-top:14px !important. Gemeint war damit die Desktop-Menueleiste bei
	 * schmalem Fenster; im Mobilpanel macht es die Zeile 14px hoeher als alle
	 * anderen. Gegen !important hilft nur !important – template.css bleibt
	 * unveraendert das Joomla-3-Original.
	 */
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	background: url(../../../../../images/menu/menu_hexenwald_mobile.png) left center no-repeat;
	background-size: 153px 24px;
}