/* ==========================================================================
   Fake-Mail-Darstellung der Phishing-Quizze (Light + Premium)
   --------------------------------------------------------------------------
   Ausgelagert am 29.08.2026. Vorher stand dieser Block als <style> in beiden
   Quiz-Templates und war dort zweimal gepflegt: 42 der 43 Regeln waren
   zeichengleich, eine war auseinandergelaufen (.email-preview-container hatte
   nur im Light-Quiz margin-top:20px). Damit das nicht erneut passiert, liegen
   die gemeinsamen Mail-Regeln jetzt nur noch hier.

   NICHT hierher gehoeren die quiz-eigenen Regeln (.quiz-wrapper,
   .quiz-container, .quiz-question-wrapper, .question-title, .question-image) -
   die stehen weiter im jeweiligen Template, weil sich die beiden Quizze dort
   bewusst unterscheiden.

   Kaskade: eingebunden wird die Datei per <link> am Anfang des content-Blocks,
   also im <body> und nach base.html. Das ist wichtig, weil base.html die Seite
   in <div class="container-box text-center"> haengt; erst dadurch schlaegt
   .email-container{text-align:left} das geerbte text-align:center.
   ========================================================================== */

/* --- Bestand (unveraendert aus phishing_premium.html uebernommen) --------- */
.email-preview-container{display:flex;justify-content:center;align-items:center;padding:20px;font-family:Segoe UI,Calibri,Helvetica Neue,sans-serif;color:#1f1f1f;background-color:#f5f5f5;border-radius:8px;}
.button{display:inline-block;padding:10px 18px;margin:15px 0;background-color:#0078d4;color:#ffffff!important;text-decoration:none;border-radius:3px;font-weight:600;text-align:center;border:1px solid #0078d4;}
.attachment-area{margin-top:25px;padding-top:20px;border-top:1px solid #e1e1e1;}
.attachment-item{display:inline-flex;align-items:center;gap:12px;padding:10px;border:1px solid #dcdcdc;border-radius:3px;background-color:#f8f8f8;max-width:90%;}
.attachment-icon{width:32px;height:32px;flex-shrink:0;background-size:contain;background-repeat:no-repeat;background-position:center;}

/* V10 Anhang-Icons neu gebaut (29.08.2026). Die drei alten Base64-SVGs waren
   fehlerhaft: alle drei enthielten fill:#wfff (keine gueltige Farbe) und
   font-tans: statt font-family:. Beim PDF-Icon schloss zusaetzlich ein " das
   style-Attribut vorzeitig (fill:#wfff";text-anchor:middle) - das SVG war damit
   ungueltig und wurde in 10 Fragen gar nicht gerendert. Das ZIP-Icon war mit
   ZIS statt ZIP beschriftet. Die Neubauten kommen ohne style-Attribut aus
   (Praesentationsattribute statt CSS im SVG), damit dieselbe Anfuehrungszeichen-
   Falle nicht wieder zuschnappen kann. Farben wie gehabt: PDF #B30B00,
   XLS #1D6C41, ZIP #787878, Beschriftung weiss. */
.attachment-icon.pdf{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iOCIgZmlsbD0iI0IzMEIwMCIvPjx0ZXh0IHg9IjMyIiB5PSIzOSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmZmZmYiPlBERjwvdGV4dD48L3N2Zz4=');}
.attachment-icon.excel{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iOCIgZmlsbD0iIzFENkM0MSIvPjx0ZXh0IHg9IjMyIiB5PSIzOSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmZmZmYiPlhMUzwvdGV4dD48L3N2Zz4=');}
.attachment-icon.zip{background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2NCA2NCI+PHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiByeD0iOCIgZmlsbD0iIzc4Nzg3OCIvPjx0ZXh0IHg9IjMyIiB5PSIzOSIgdGV4dC1hbmNob3I9Im1pZGRsZSIgZm9udC1mYW1pbHk9IkFyaWFsLCBIZWx2ZXRpY2EsIHNhbnMtc2VyaWYiIGZvbnQtc2l6ZT0iMjAiIGZvbnQtd2VpZ2h0PSI3MDAiIGZpbGw9IiNmZmZmZmYiPlpJUDwvdGV4dD48L3N2Zz4=');}

.attachment-details{display:flex;flex-direction:column;overflow:hidden;}
.attachment-name{font-weight:600;font-size:14px;color:#252423;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.attachment-size{font-size:12px;color:#605e5c;}
.email-container{background-color:#ffffff;border:3px solid #dcdcdc;width:100%;max-width:900px;padding:25px 30px;}
.email-subject{font-size:22px;font-weight:600;margin-bottom:25px;color:#252423;line-height:1.2;text-align:left;overflow-wrap:break-word;}
.email-header-main{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;padding-bottom:20px;border-bottom:1px solid #e1e1e1;}
.sender-block{display:flex;align-items:center;gap:15px;}
.sender-avatar{width:48px;height:48px;border-radius:50%;background-color:#0078d4;color:white;display:grid;place-items:center;font-size:20px;font-weight:600;flex-shrink:0;}
.sender-details p{margin:0;padding:2px 0;font-size:14px;overflow-wrap:break-word;}
.sender-details .label{color:#605e5c;}
.sender-details .value{color:#252423;font-weight:600;}
.actions-block{display:flex;flex-direction:column;align-items:flex-end;}
.action-buttons{display:flex;border:1px solid #c6c6c6;border-radius:3px;overflow:hidden;}
.action-btn{display:flex;align-items:center;gap:8px;padding:6px 12px;background:transparent;border:none;border-right:1px solid #c6c6c6;font-size:14px;color:#3b5998;}
.action-btn:last-child{border-right:none;}
.email-date{margin-top:8px;font-size:13px;color:#605e5c;}
.email-body{padding-top:20px;font-size:16px;line-height:1.7;overflow-wrap:break-word;}

/* Der frueher hier stehende Block @media(max-width:600px){...} ist am
   29.08.2026 entfallen: V3 weiter unten deckt denselben Bereich ab
   (max-width:767.98px) und setzt jede seiner Deklarationen neu. */
@media(max-width:400px){.email-container{padding:15px 12px;}}

/* Mobil (todo #460, 24.08.2026): Bei 320px war die Fake-Mail-Ansicht breiter
   als ihr Elternelement (gemessen 239px in 196px bzw. 204px in 196px) und wurde
   abgeschnitten. Ursachen: die Aktions-Buttonleiste und der Kopfbereich konnten
   nicht umbrechen, und die Flex-Kinder hatten kein min-width:0, konnten also
   nicht unter ihre Min-Content-Breite schrumpfen.
   29.08.2026: die Deklarationen zu .action-buttons/.action-btn sind hier
   entfallen, weil V4 sie vollstaendig ersetzt (Grid statt Flex-Umbruch). */
@media(max-width:575.98px){
  .email-preview-container{padding:8px;}
  .email-container{padding:12px 10px;border-width:2px;}
  .email-header-main,.sender-block,.attachment-item{flex-wrap:wrap;min-width:0;}
  .sender-block{gap:10px;}
  .sender-details,.attachment-details{min-width:0;flex:1 1 auto;}
  .sender-details p{font-size:13px;}
  .attachment-item{max-width:100%;}
  .attachment-name{white-space:normal;overflow-wrap:anywhere;}
  .email-subject{font-size:18px;margin-bottom:16px;}
  .email-body{font-size:15px;}
}

/* ==========================================================================
   Normalisierung Fake-Mail-Darstellung (29.08.2026, Analyse vom selben Tag).
   Steht bewusst am Ende: die Regeln sollen den Bestand oben ueberschreiben.
   Jede Regel mit Ursache und gemessener Wirkung; Messgrundlage sind 180
   Premium-Templates ueber 320/360/390/414/768/1024/1280.
   ========================================================================== */

/* V1  Textausrichtung im Mail-Rahmen festnageln.
   Ursache: base.html <div class="container-box text-center"> vererbt
   text-align:center bis in .email-body. Premium entkam dem nur zufaellig ueber
   .quiz-question-wrapper{text-align:left} (eine Premium-only-Regel), das
   Light-Quiz nicht - dort war der komplette Mailtext zentriert.
   Wirkung: .email-body computed text-align left in 10/10 Fragen (vorher
   center in 10/10), 61/61 Handlungs-Buttons linksbuendig. */
.email-container{text-align:left;}

/* V2  Kopfbereich ab 768px: Toolbar bleibt oben rechts, der Absender schrumpft.
   Ursache des Umbruchs: .email-header-main hat flex-wrap:wrap und
   .sender-details kein min-width:0 -> der Absenderblock kann nicht unter seine
   Min-Content-Breite und schiebt die Toolbar in die naechste Zeile, wo sie
   dann linksbuendig steht. Wirkung 1280px: Umbrueche 55 -> 0, rechtsbuendig
   125 -> 180 von 180; 1024px: 55/63 -> 0. */
@media(min-width:768px){
  .email-header-main{flex-wrap:nowrap;gap:16px;}
  .sender-block{flex:1 1 auto;min-width:0;}
  .sender-details{min-width:0;}
  .actions-block{flex:0 0 auto;}
}

/* V3  Unterhalb 768px konsequent gestapelt (bisher erst ab 600px).
   Zwischen 600 und 767px blieb nach Avatar (48px) und Abstaenden zu wenig
   Platz fuer den Absender neben der 309px breiten Toolbar - 172/180 Mails
   brachen dort ohnehin um, nur unkontrolliert und linksbuendig.
   Wirkung 768px: Umbrueche 172 -> 0, rechtsbuendig 8 -> 180. */
@media(max-width:767.98px){
  .email-header-main{flex-direction:column;}
  .actions-block{width:100%;align-items:stretch;margin-top:16px;}
  .action-buttons{width:100%;justify-content:flex-start;}
  .action-btn{flex:1 1 0;min-width:0;}
  .email-date{align-self:flex-start;margin-top:12px;}
}

/* V4  Buttonleiste bei 320-575px als gleich breite Zellen statt Flex-Umbruch
   mit gedehnter zweiter Zeile. Vorher entstand bei 320px in 152/180 Mails eine
   zweite Zeile, deren einzelner Button auf volle Breite gedehnt wurde.
   grid-auto-flow:column statt des vorgeschlagenen repeat(3,1fr): die Toolbar
   hat nach der Datenbereinigung zwar meist drei Eintraege, die zwei
   Termin-Einladungen behalten aber ihre eigene Leiste (2 bzw. 3 Eintraege) -
   auto-flow verteilt jede Anzahl auf genau eine Zeile ohne Leerzelle.
   minmax(0,1fr) statt 1fr, damit ein langes Wort ("Allen antworten") die
   Spalte nicht ueber ihren Anteil hinaus aufziehen kann.
   Wirkung 320px: Buttonzeilen 2 -> 1 bei allen 180. */
@media(max-width:575.98px){
  .action-buttons{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);flex-wrap:nowrap;}
  .action-btn{flex:none;border-right:1px solid #c6c6c6;padding:8px 4px;
              font-size:12px;line-height:1.25;overflow-wrap:anywhere;}
  .action-btn:last-child{border-right:none;}
}

/* V5  Die Toolbar ist Dekoration, kein Bedienelement. pointer-events allein
   reicht dafuer nicht: es nimmt die Elemente nur der Maus, per Tastatur blieben
   sie fokussierbar (~32 tote Tab-Stopps pro Quizseite). Deshalb stellt die
   Datenseite die Leiste parallel von <button> auf
   <span class='action-btn' aria-hidden='true'> um; das hier ist der Rest
   (Mausverhalten) und die Absicherung fuer den Fall, dass irgendwo noch ein
   <button> steckt. */
.action-btn{pointer-events:none;cursor:default;}

/* V5b <span> statt <button>: ein <span> ist inline und erbt Schrift und
   Textausrichtung, ein <button> ist keins von beidem und bringt eigene
   UA-Vorgaben mit (eigene Schriftfamilie, text-align:center, margin, eigene
   Zeilenhoehe, appearance). Ohne diese Regel saesse dieselbe Leiste je nach
   Markup unterschiedlich. Alle Werte werden deshalb ausgeschrieben statt der
   UA ueberlassen - danach sehen <span>- und <button>-Fassung identisch aus
   (an der Testseite mit beiden Markup-Varianten gegengemessen).
   user-select:none, weil die Leiste bisher als <button> nicht markierbar war. */
.action-btn{box-sizing:border-box;margin:0;font-family:inherit;font-weight:400;
            line-height:1.25;text-align:center;justify-content:center;
            white-space:normal;appearance:none;-webkit-appearance:none;
            user-select:none;-webkit-user-select:none;}

/* V6  Touch-Ziele der Toolbar: gemessen 32-33px hoch bei allen 513 Buttons,
   auf Touch-Viewports unter der 44px-Schwelle.
   Wirkung <=414px: 0 Buttons unter 44px (vorher alle 513).

   V6b (Abnahme 29.08.2026): Die Mindesthoehe endete bei 767.98px, das
   Desktop-Layout aus V2 beginnt aber schon bei 768px. Genau bei 768px
   Viewportbreite fiel die Toolbar deshalb auf 36px zurueck - gemessen an
   allen 180 Mails. 768px ist die Breite eines iPad hochkant, also ein
   Touch-Geraet, und 36px liegen unter der 44px-Schwelle aus WCAG 2.5.5.
   Die Grenze der Mindesthoehe geht deshalb auf max-width:768px, also
   einschliesslich 768px. Bewusst nur diese eine Deklaration: die
   Layout-Grenzen von V2 (Toolbar rechts ab 768px) und V3/V4 (gestapelt bzw.
   Rasterleiste unterhalb) bleiben unveraendert, damit bei 768px weiterhin
   das Desktop-Layout greift - nur eben mit 44px hohen Zellen.
   Wirkung: 768px 36px -> 44px, 1024/1280px unveraendert 36px. */
.action-btn{min-height:36px;}
@media(max-width:768px){.action-btn{min-height:44px;}}

/* V7  Textlinks im Mailtext waren ungestylt und fielen auf Bootstrap-Blau
   (#0d6efd) zurueck - .email-link (questions_premium.json#28) ist in keinem
   der beiden Style-Bloecke definiert gewesen. */
.email-body a:not(.button){color:#0f6cbd;text-decoration:underline;
                           overflow-wrap:anywhere;}

/* V8  Ueberschriften im Mailtext: Bootstrap-h3 ist mit 28px groesser als der
   Betreff (22px). Betrifft questions_premium.json #15, #16, #19, #23. */
.email-body h3{font-size:18px;font-weight:600;line-height:1.3;margin:0 0 10px;}

/* V9  Handlungs-Button: eigene Ausrichtung statt Vererbung. Vorher zentriert
   im Light-Quiz, links im Premium-Quiz - siehe V1. */
.email-body .button{display:inline-block;margin:15px 0;max-width:100%;}

/* V11 (Abnahme 29.08.2026) Klick im Mailtext springt nicht mehr an den
   Seitenanfang. Alle 61 Handlungs-Buttons und der eine .email-link
   (questions_premium.json#28) sind <a href='#'>. Im Browser nachgemessen: ein
   Klick auf den Handlungs-Button setzte die Scrollposition von 3152px auf
   165px (Textlink: 3022px -> 184px) und haengte ein # an die URL - beim
   Durchklicken eines Quiz landet man also mitten in der Frage wieder oben.
   Die Links sind Simulation und sollen nichts ausloesen, deshalb dieselbe
   Loesung wie bei der Deko-Toolbar (V5): pointer-events:none.
   Anders als dort bleibt es hier bei der Maus - kein aria-hidden, kein
   tabindex=-1: Handlungs-Button und Textlink sind Inhalt der Fake-Mail und
   gerade das, was der Teilnehmer pruefen soll (Linkziel, Beschriftung); sie
   muessen fuer Screenreader und Tastatur erreichbar bleiben.
   cursor:default, damit die Zeigerhand nicht eine Aktion verspricht, die
   nicht kommt. */
.email-body a{pointer-events:none;cursor:default;}
