/* =========================
   formate.css (modernisiert)
   - kompatibel zu alten IDs/Klassen
   - responsive
   - zentriert
   ========================= */

:root{
  --blue:#2a64b8;
  --blue-d:#0f4aa3;
  --gold:#cfae62;
  --text:#1e293b;
  --muted:#64748b;
  --line:#dbe7ff;
  --card:#ffffff;
}

*{ box-sizing:border-box; }

html, body{
  margin:0;
  padding:0;
}

body{
  font-family: system-ui,"Segoe UI","Helvetica Neue",Roboto,Arial,"Noto Sans";
  color: var(--text);
  background: transparent; /* iframe liegt ja im weißen Container */
  font-weight: 600; /* alt war bold – hier etwas “modern bold” */
  line-height: 1.6;

}

 /* Ein “Container” für den alten Tabellenaufbau */
body > *{
  max-width: 900px;
  width: min(900px, 100%);
}

/* Damit Tabellen nicht fix 500px bleiben */

/* Zellen angenehmer */
td{
  padding: 6px 8px;
  vertical-align: top;
}

/* Bilder responsiv */
img{
  max-width: 100%;
  height: auto;
  display: block;
}

/* Viele Seiten nutzen <p align="center"> – bleibt ok */
p{ margin: 10px 0; }

/* Links moderner */
a:link, a:visited{
  text-decoration:none;
  color: var(--blue-d);
}
a:hover{
  color: #d11420;
}

/* Alte "blue" Klasse */
.blue{
  background-color: var(--blue-d);
  background: var(--blue-d);
}

/* ====== Alte Text-IDs (optisch an dein neues Theme angepasst) ====== */
#text7{   font-family: inherit; color: var(--blue-d); font-size: 12px; font-weight: 700; }
#text7w{  font-family: inherit; color: #fff; font-size: 12px; font-weight: 700; }

#text8bl{ font-family: inherit; color: var(--text); font-size: 14px; font-weight: 650; }
#text8{   font-family: inherit; color: var(--blue-d); font-size: 14px; font-weight: 650; }
#text8u{  font-family: inherit; color: var(--blue-d); font-size: 14px; font-weight: 650; font-style: normal; }
#text8w{  font-family: inherit; color: #fff; font-size: 14px; font-weight: 650; }

#text9{   font-family: inherit; color: #fff; font-size: 15px; font-weight: 750; }
#text9s{  font-family: inherit; color: var(--text); font-size: 15px; font-weight: 650; }
#text9b{  font-family: inherit; color: var(--blue-d); font-size: 16px; font-weight: 850; }
#text9bs{ font-family: inherit; color: var(--text); font-size: 16px; font-weight: 850; }

#text10b{  font-family: inherit; color: var(--blue-d); font-size: 17px; font-weight: 900; }
#text10n{  font-family: inherit; color: #0c2a66; font-size: 17px; font-weight: 900; }
#text10bb{ font-family: inherit; color: var(--text); font-size: 20px; font-weight: 900; }

#text12{   font-family: inherit; color: #fff; font-size: 18px; font-weight: 900; }
#text12b{  font-family: inherit; color: var(--blue-d); font-size: 18px; font-weight: 900; }
#text12bs{ font-family: inherit; color: var(--blue-d); font-size: 18px; font-weight: 950; }

#text14bb{ font-family: inherit; color: var(--blue-d); font-size: 22px; font-weight: 950; }

.text8{
  font-family: inherit;
  font-size: 15px;
  color: var(--blue-d);
  font-weight: 850;
}
.text8 p{
  font-size: 15px;
  font-style: normal;
  font-weight: 650;
}

/* Zitatkasten / Rahmen: moderner */
table[border="3"]{
  border: 1px solid var(--line) !important;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#ffffff,#f6faff);
  box-shadow: 0 8px 20px rgba(15,74,163,.10);
}

/* Hilfsklassen aus deinem Altbestand */
.A{ color:#d11420; text-align:center; }
.kursiv{
  font-family: inherit;
  font-size: 14px;
  color: var(--blue-d);
  text-align:center;
  font-style: italic;
  font-weight: 650;
}

/* =========================
   MOBILE: alles größer & luftiger
   ========================= */
@media (max-width: 720px){
  body{ padding: 10px; }

  td{ padding: 8px 10px; }

  #text8, #text8u, #text8bl, .text8{ font-size: 16px; }
  #text9b{ font-size: 18px; }
  #text10b{ font-size: 18px; }

  /* Tabellen nebeneinander (z.B. 2 Bilder) untereinander stapeln */
  table tr{ display:block; }
  table td{ display:block; width:100% !important; }

  img{ margin: 0 auto; }
}