/* aradads.com - Ergaenzung zu /style_rtl.css (03.10.2026): die Klassen der neuen Seiten im alten aradads-Aussehen.
   Farben/Schrift wie frueher: yekaan, Blau #004B6E/#005881/#3D87AA, Links #1E4BB5, orange/blaue Verlaufsknoepfe, ekhtar-Hinweise. */

/* ---------- Rahmen */
#logo a{display:block;width:100%;height:100%}
#upanel{width:auto;margin-left:9%}
#upanel .gruss{display:inline-block;margin:7px 0 0 10px;font-size:13px;vertical-align:top}
#upanel button{margin-top:13px}
#hbt-ohne{height:105px}
#page{width:1024px}
#page.mitrand{border:1px solid #CCC;border-top:0}
#rightb{padding:20px 0 30px;font-size:13px;line-height:24px}
#left{margin:0 0 0 20px;min-height:600px}
#left a{display:block}
#left .ldWrapperm{color:#333}
#left .ldWrapperm:hover{color:#FFF}
#right{width:784px;padding:15px 0 30px;font-size:13px;line-height:22px}
.clear{clear:both}
#credits{margin-top:0}
#credits .right{float:right;width:220px}

/* ---------- Startseite (wie _alt/index.php) */
.startseite{font-size:15px;line-height:24px;overflow:hidden}
.startseite h2{height:auto;font-size:20px;color:#333}
.startseite .blk{padding:0 120px 0 0}
.startseite .blk a.mbutl{text-decoration:none}

/* ---------- Ueberschriften wie h2.title-menu */
#page h1{font-family:yekaan,Arial,sans-serif;font-size:20px;font-weight:normal;color:#333;margin:10px 4px 15px 0;padding:0 0 10px;border-bottom:1px solid #CCC}
#page h2{font-family:yekaan,Arial,sans-serif;height:auto;font-size:17px;color:#005881;margin:18px 0 10px}
#page h2 a,#page h2 a:visited{color:#1E4BB5}
#page h3{font-family:yekaan,Arial,sans-serif;font-size:15px;color:#333}
p{margin:0 0 10px}
ul,ol{margin:5px 25px 10px 0;padding:0}

/* ---------- Knoepfe: orange wie .mbutl, zweit blau wie .mbut */
.knopf,#page button,#page input[type=submit]{display:inline-block;font-family:yekaan,Tahoma,Arial;font-size:15px;line-height:16px;color:#FFF!important;border:0;border-radius:2px;
  padding:6px 12px 10px;cursor:pointer;text-decoration:none;white-space:nowrap;vertical-align:middle;margin:0 0 0 6px!important;
  background:#E66A39;background:linear-gradient(#DBC37B,#E66A39)}
.knopf.zweit,#page button.zweit{background:#62A0EA;background:linear-gradient(#62A0EA,#1E4BB5)}
.knopf:hover,#page button:hover,#page input[type=submit]:hover{background:#5999E6;background:linear-gradient(#5999E6,#143FA7);color:#FFF;text-decoration:none}
.knopf.rot,#page button.rot{background:#C9302C;background:linear-gradient(#E8726F,#B52B27)}
.knopf.gruen,#page button.gruen{background:#2E8B3E;background:linear-gradient(#6FC27C,#2A7D37)}
.knopf.klein,#page button.klein{font-size:12px;padding:3px 9px 6px}
.blk .knopf{margin-right:20px}

/* ---------- Kaesten wie .ldWrapperlb / .rightwin */
.karte{border:1px solid #DDD;border-radius:3px;background:#FFF;padding:8px 14px 12px;margin:0 0 15px}
.raster{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 15px}
.raster>*{flex:1 1 220px;margin:0}
.zahl{border:1px solid #CCC;border-radius:3px;background:#F9F9F9;padding:8px 12px;border-right:4px solid #005881}
.zahl b{display:block;font-size:19px;line-height:28px;color:#004B6E}
.zahl span{font-size:12px;color:#777}
.kontostand{background:#F2F9FF;border:1px solid #C6DBEA;border-radius:3px;padding:6px 12px;margin:0 0 15px}
.kontostand span{display:inline-block;margin-left:25px}
.kontostand b{color:#004B6E}
.klein{font-size:11px;color:#777}

/* ---------- Formulare wie .form_row / .form_lable_me */
form.feld label{display:block;margin:8px 0 3px;font-weight:bold;color:#333}
#page input[type=text],#page input[type=email],#page input[type=password],#page input[type=number],#page input[type=url],#page input[type=date],#page input:not([type]),#page select,#page textarea{
  width:100%;max-width:420px;box-sizing:border-box;border:1px solid #CCC;border-radius:0;padding:4px;font-family:yekaan,Tahoma,sans-serif;font-size:13px;background:#FFF;margin:0 0 6px 0!important}
#page select{height:auto}
#page textarea{min-height:110px}
#page input:focus,#page select:focus,#page textarea:focus{border-color:#3D87AA;outline:0}
.ltr{direction:ltr;text-align:left}

/* ---------- Hinweise wie .ekhtar_s / .ekhtar */
.hinweis{padding:4px 8px;margin:3px 0 12px}
.hinweis.ok{border:1px solid #093;background:#ECFFEC;color:#093}
.hinweis.fehler{border:1px solid #F00;background:#FFF2F2;color:#F00}

/* ---------- Tabellen (alte Tabellenfarbe #F2F9FF) */
.tabelle{overflow-x:auto;margin:0 0 15px}
table.liste{width:100%;border-collapse:collapse;background:#F2F9FF;font-size:12px;margin:0}
table.liste th{background:#005881;color:#FFF;font-weight:normal;padding:5px 8px;border:1px solid #FFF;text-align:right}
table.liste td{padding:5px 8px;border:1px solid #FFF;text-align:right;vertical-align:top}
table.liste tr:nth-child(even) td{background:#E6F1FA}
table.liste tr:hover td{background:#FFF1E8}

/* ---------- Status wie .or1 ... */
.status{display:inline-block;padding:0 7px;font-size:11px;font-weight:bold;border:1px solid #CCC;background:#F4F4F4;color:#666}
.status.active,.status.paid,.status.answered{border-color:#060;background:#D7FDE0;color:#060}
.status.pending,.status.open{border-color:#FC0;background:#FEF7C5;color:#8A6D00}
.status.rejected,.status.blocked,.status.failed{border-color:#F00;background:#FFF2F2;color:#D00}
.status.paused,.status.ended,.status.closed{border-color:#BBB;background:#EEE;color:#555}

/* ---------- Sonstiges */
.seiten{margin:12px 0}
.seiten a,.seiten b{display:inline-block;padding:1px 8px;margin:1px;border:1px solid #CCC;background:#FFF}
.seiten b{background:#005881;border-color:#005881;color:#FFF}
pre.code{direction:ltr;text-align:left;background:#F4F4F4;border:1px solid #D2D2D2;color:#333;padding:10px;overflow-x:auto;font-size:12px;white-space:pre-wrap;word-break:break-all}
svg.balken{width:100%;height:120px;background:#F9F9F9;border:1px solid #DDD;margin:0 0 15px} svg.balken rect{fill:#3D87AA} svg.balken rect:hover{fill:#E66A39}
details.frage{border:1px solid #DDD;border-radius:3px;background:#FFF;padding:6px 12px;margin:0 0 6px}
details.frage summary{cursor:pointer;font-weight:bold;color:#005881}
details.frage[open]{background:#F9F9F9}
.vorschau{border:1px dashed #AAA;display:inline-block;background:#FFF;padding:4px}
.textanzeige{font-size:13px;line-height:1.6} .textanzeige b{color:#1E4BB5} .textanzeige .url{color:#093;direction:ltr;display:block;font-size:11px}
.schritte li{margin:4px 0}

/* ---------- Zaehler im Menue (offene Arbeit / neue Antworten) */
.zaehler{display:inline-block;min-width:18px;padding:0 5px;margin-right:4px;border-radius:9px;background:#E66A39;color:#FFF;font-size:11px;line-height:18px;text-align:center}

/* ---------- Ticket-Verlauf (lib/tickets.php) */
.tverlauf{margin:0 0 15px}
.tmsg{border:1px solid #DDD;border-radius:3px;background:#FFF;padding:8px 12px;margin:0 0 8px;max-width:88%}
.tmsg.user{margin-left:auto;border-right:4px solid #005881;background:#F2F9FF}
.tmsg.admin{margin-right:auto;border-left:4px solid #E66A39;background:#FFF8F3}
.tmsg.note{margin-right:auto;border:1px dashed #FC0;background:#FFFCE3}
.tmsg.system{max-width:none;border:0;background:none;padding:2px 0;color:#777;font-size:11px;text-align:center}
.tmsg .tkopf{margin:0 0 4px;color:#333}
.tmsg.system .tkopf{display:none}
.tmsg .ttext{line-height:22px;word-wrap:break-word}
.tmsg .tdatei{margin-top:6px;font-size:12px}

/* ==========================================================================
   Responsiv (03.10.2026): Desktop (> 1060 px) bleibt das alte aradads-Layout;
   Tablet (761-1060 px) volle Breite; Handy (<= 760 px) kompakter Kopf, Menue zum Aufklappen.
   ========================================================================== */
.menu-schalter,.menu-knopf{display:none}
img{max-width:100%;height:auto}

@media (max-width:1060px){
  #ppp,#page{width:auto;max-width:100%}
  #page{display:block}
  #nav{width:auto;max-width:100%;display:flex;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch}
  #nav li{float:none;flex:0 0 auto}
  #logo{margin-right:2%}
  #upanel{margin-left:2%}
  .credits-c{width:auto;padding:0 12px}
  .credit-sp{margin:0 30px 10px 0}
  #rightb{padding:15px 14px 30px;box-sizing:border-box}
  #left{margin:0 0 0 14px}
  #right{float:none;width:auto;overflow:hidden;padding:15px 10px 30px 12px}
  .startseite .blk{padding:0}
  .startseite .rightm,.startseite .leftm{width:44%}
}

@media (max-width:760px){
  body{font-size:13px}
  /* Kopf: nicht mehr fest, Logo und Knoepfe in einer Zeile, Menue waagrecht scrollbar */
  #bghin{position:relative;height:auto;box-shadow:0 2px 4px -2px #999}
  #header{margin:0}
  #meb{margin:0;height:auto;background:#FFF;display:flex;align-items:center;justify-content:space-between;padding:6px 10px;box-sizing:border-box}
  #logo{float:none;margin:0;width:120px;height:44px;background-size:contain;background-position:right center;flex:0 0 auto}
  #upanel{float:none;margin:0;width:auto;text-align:left;white-space:nowrap}
  #upanel .gruss{display:none}
  #upanel button,#upanel button.mbutl,#upanel button.mbut{margin:0 0 0 5px!important;font-size:13px;padding:5px 9px 7px}
  #nav{margin:0;width:100%;background:#004B6E;padding:0}
  #nav li a,#nav .page_item a,#nav .page_item_r a,#nav .page_item_l a,#nav .current_page_item a,#nav .current_page_item_r a,#nav .current_page_item_l a{
    float:none;display:block;margin:0;padding:8px 11px;font-size:13px;border-left:0}
  #hbt{margin:0;height:150px;background-size:cover;background-position:center}
  #hbt-bg{height:150px}
  .transbox{width:auto;max-width:85%;top:38px;padding:12px 14px}
  #mto{font-size:19px;line-height:28px}
  #hbt-ohne{height:0}
  /* Panel/Verwaltung: Seitenleiste wird zum aufklappbaren Menue */
  #page.mitrand{border:0}
  .menu-knopf{display:block;margin:10px 10px 0;padding:9px 12px;background:#005881;color:#FFF;font-size:14px;border-radius:3px;cursor:pointer}
  #left{display:none;float:none;width:auto;margin:6px 10px 0;min-height:0;border:1px solid #CCC}
  .menu-schalter:checked~#left{display:block}
  #left .ldWrapperm,#left .ldWrappermselected,#left .ldWrapperm:hover{width:auto}
  #left .ldWrappermsel{width:auto;padding:9px 26px}
  #left .arr{display:none}
  #right{overflow:visible;padding:10px 10px 25px}
  /* Inhalt */
  #page h1{font-size:17px;margin:6px 0 12px}
  #page h2{font-size:15px}
  #rightb{padding:12px 10px 25px}
  .startseite{font-size:14px}
  .startseite p.bhdright,.startseite .namadt,.startseite .rightm,.startseite .leftm{width:auto;float:none;display:block;margin:0 0 18px;padding:0;border:0}
  .startseite .enamad{float:none}
  .startseite .blk{margin:12px 0 0}
  .karte{padding:8px 10px 10px}
  .raster>*{flex:1 1 100%}
  .kontostand span{display:block;margin:0}
  /* Tabellen als Karten (Spaltenueberschrift ueber jedem Feld, per Skript in lib/layout.php gesetzt) */
  table.liste.karten,table.liste.karten tbody,table.liste.karten tr,table.liste.karten td{display:block;width:auto!important;max-width:none!important}
  table.liste.karten{background:none;font-size:12px}
  table.liste.karten tr.kopfzeile{display:none}
  table.liste.karten tr{border:1px solid #CCC;border-right:4px solid #005881;border-radius:3px;margin:0 0 10px;background:#FFF}
  table.liste.karten td,table.liste.karten tr:nth-child(even) td,table.liste.karten tr:hover td{border:0;border-bottom:1px solid #EEE;padding:6px 9px;background:#FFF;text-align:right}
  table.liste.karten td:last-child{border-bottom:0}
  table.liste.karten td:empty{display:none}
  table.liste.karten td[data-label]::before{content:attr(data-label);display:block;font-size:10px;line-height:16px;color:#005881;font-weight:bold}
  table.liste.karten img.vorschau{max-width:100%!important}
  .startseite .enamad{display:none}
  .tabelle{-webkit-overflow-scrolling:touch}
  #page input[type=text],#page input[type=email],#page input[type=password],#page input[type=number],#page input[type=url],#page input:not([type]),#page select,#page textarea{max-width:100%!important}
  .tmsg{max-width:100%}
  pre.code{font-size:11px}
  /* Fuss */
  #credits{padding:10px}
  #credits .right,.leftcp{float:none;width:auto;margin:0 0 8px}
  .credit-sp{display:block;width:auto;margin:0 0 8px}
}