/* ==================================================
   Energielabel (EU) – Nested Display
   VO (EU) 2017/1369 + delegierte VO der Produktgruppe
   Pfeile, Labels, Datenblaetter: offizielle EPREL-Dateien
   Alt-Text in Preisgröße und Ersatzdarstellung ohne Pfeil ergänzt am 23.09.2026
   (Blöcke am Ende der Datei)
   ================================================== */

/* ---------- Pfeilgroesse = rechtliche Untergrenze ----------
   Vorgabe (z. B. VO 2019/2017 Anh. VIII Nr. 3 b, gleichlautend in den anderen Gruppen):
   Klassenbuchstabe im Pfeil "in einer Schriftgroesse, die der des Preises entspricht".
   Gemessen: Buchstabe = 48,5 % der Pfeilhoehe (alle EPREL-Pfeile, A-G und A+++-D).
             Preis .price = PT Sans bold 30px -> Ziffern-/Versalhoehe 21px.
   => Mindesthoehe Pfeil = 21 / 0,485 = 43,3px -> 44px.
   NICHT kleiner machen, solange .price 30px hat. Wird der Preis kleiner,
   darf der Pfeil proportional mit (Faustregel: Pfeilhoehe = 1,45 x Preis-font-size). */
:root{--energielabel-hoehe:44px;}

/* ---------- Pfeil (gemeinsam) ---------- */
.energielabel-pfeil{display:inline-block;flex-shrink:0;line-height:0;cursor:zoom-in;border-radius:3px;transition:transform 200ms, filter 200ms;}
.energielabel-pfeil img{display:block;height:var(--energielabel-hoehe);width:auto;}
.energielabel-pfeil:hover{transform:scale(1.05);filter:drop-shadow(0 3px 6px rgba(28,28,28,0.2));}
.energielabel-pfeil:focus-visible{outline:2px solid #F07D00;outline-offset:4px;}

/* ---------- Links (gemeinsam) ---------- */
.energielabel-link{display:inline-flex;margin:0;padding:0;border:0;background:none;cursor:pointer;font-family:inherit;align-items:center;gap:6px;color:#666666;text-decoration:none;font-size:15px;line-height:1.3;transition:color 200ms;}
.energielabel-link svg{flex-shrink:0;width:16px;height:16px;color:#F07D00;}
.energielabel-link span{border-bottom:1px solid rgba(102,102,102,0.35);transition:border-color 200ms;}
.energielabel-link:hover{color:#1c1c1c;}
.energielabel-link:hover span{border-color:#F07D00;}
.energielabel-link:focus-visible{outline:2px solid #F07D00;outline-offset:3px;border-radius:2px;}

/* ---------- Variante: Detailseite (im Preiskasten) ---------- */
/* Text + Links links, Pfeil rechts */
.energielabel--detail{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:25px;padding-top:25px;border-top:1px dashed #d6d6d6;}
.energielabel--detail .energielabel-pfeil{order:2;}
.energielabel--detail .energielabel-text{display:flex;flex-direction:column;gap:6px;}
.energielabel--detail .energielabel-klasse{margin:0;font-size:16px;color:#1c1c1c;}
.energielabel--detail .energielabel-links{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0;}

/* ---------- Variante: Produktkarten (/angebote + Startseite) ---------- */
/* Eigene Zeile zwischen Trennstrich und Preis-Zeile:
   Datenblatt-Link links, Pfeil rechts (buendig mit dem Reservieren-Button).
   z-index 2: liegt ueber dem Karten-Link a.ovrly (z-index 1), wie der Reservieren-Button (.z2) */
.energielabel--zeile{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-bottom:20px;position:relative;z-index:2;}
.energielabel--zeile .energielabel-pfeil{order:2;}
.energielabel--zeile .energielabel-link{font-size:14px;}
.energielabel--zeile .energielabel-link svg{width:14px;height:14px;}

/* ---------- Grosses Label in der Fancybox ---------- */
.fancybox-caption .energielabel-caption a{color:#fff;text-decoration:underline;}

/* ---------- Handy ---------- */
@media all and (max-width:575px){
	.energielabel--detail{gap:15px;}
	.energielabel--detail .energielabel-links{flex-direction:column;}

	/* Detailseite: Pfeil direkt unter den Preis ziehen (Pflicht: "in der Naehe des Preises") */
	.preisbox > *{order:2;}
	.preisbox > :first-child{order:0;}
	.preisbox > .energielabel{order:1;margin-top:5px;margin-bottom:20px;padding-top:0;border-top:0;}
}

/* ---------- Alt-Text in Preisgröße (ergänzt am 23.09.2026) ----------
   Pflicht: Wird der Pfeil nicht angezeigt, muss der Alt-Text die Klasse in der Schriftgröße
   des Preises zeigen (VO 2019/2017 Anh. VIII Nr. 3 g, VO 65/2014 Anh. VII Nr. 4 g,
   gleichlautend in den anderen Gruppen).
   Preis .price = PT Sans bold 30px (style.css, ohne Media-Query, also auf allen Breiten gleich)
   -> Alt-Text ebenso 30px bold. line-height hebt das line-height:0 des Links für den Text auf.
   Wirkt nur auf den Ersatztext: Das geladene Bild bleibt unverändert (display:block,
   Höhe --energielabel-hoehe = 44px). Ändert sich .price, diesen Wert mitziehen. */
.energielabel-pfeil img{font-size:30px;line-height:1.2;font-weight:700;color:#1c1c1c;}

/* ---------- Ohne Pfeil: Bild lädt nicht (ergänzt am 23.09.2026) ----------
   Das Partial setzt dann per onerror am <img> die Klasse energielabel--ohne-pfeil an .energielabel.
   Der Alt-Text (Klasse in Preisgröße, Block oben) bekommt eine eigene Zeile über die volle Breite und
   bricht um. Ohne diese Regeln wäre er ein rund 640 px breiter Kasten: in den Karten über der
   Nachbarkarte (fängt dort die Klicks ab), auf dem Handy mit waagerechtem Überlauf der Seite.
   Karte: unter dem Datenblatt-Link, direkt über dem Preis. Detailseite: über dem Text, nah am Preis.
   Das geladene Bild ist nicht betroffen (44 px, siehe oben). */
.energielabel--ohne-pfeil{flex-wrap:wrap;}
.energielabel--ohne-pfeil .energielabel-pfeil{flex:1 1 100%;min-width:0;max-width:100%;}
.energielabel--ohne-pfeil .energielabel-pfeil:hover{transform:none;}
.energielabel--ohne-pfeil .energielabel-pfeil img{height:auto;max-width:100%;overflow-wrap:anywhere;hyphens:auto;}
.energielabel--detail.energielabel--ohne-pfeil .energielabel-pfeil{order:0;}