/* ========================================================================
   MailCheck FCP — Responsive Layer
   Version: 1.3 "Lean Edition"  |  Stand: 20.05.2026
   PHILOSOPHIE: Die admin.php (und andere Seiten) haben ihr eigenes Design.
   Diese Datei beruehrt das Design NICHT. Sie kuemmert sich nur um:
   - iOS-Tweaks
   - Mobile-Logo-Skalierung
   - iFrame-Modus fuer Just Social
   - Ein paar gemeinsame Utility-Klassen
   ======================================================================== */

/* --- 1. Variablen (fuer Wiederverwendung) ------------------------------ */
:root {
  --c-navy:        #1a1a2e;
  --c-blue:        #185fa5;
  --c-green:       #3b6d11;
  --c-yellow:      #854f0b;
  --c-orange:      #993c1d;
  --c-red:         #a32d2d;
  --c-border:      #e3e5eb;
  --tap-min:       44px;
  --radius:        10px;
}

/* --- 2. iOS-Tweaks (universell harmlos) ------------------------------ */
html { -webkit-text-size-adjust: 100%; }
img  { max-width: 100%; height: auto; }

/* --- 3. Logo-Klassen (opt-in, schaden nichts) ------------------------ */
.login-logo {
  width: 340px;
  max-width: 80vw;
  height: auto;
  margin: 0 auto 1.5rem;
  display: block;
}
.nav-logo-img {
  height: 40px;
  width: auto;
  max-width: 60vw;
}

/* --- 4. iFrame-Modus (Just Social) ----------------------------------- */
body.in-iframe footer,
body.in-iframe .no-iframe { display: none !important; }
body.in-iframe { background: transparent !important; }

/* --- 5. Mobile-Anpassungen (NUR unter 768px) ------------------------- */
@media (max-width: 768px) {
  /* iOS-Zoom verhindern bei Form-Inputs */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="url"], input[type="date"], select, textarea {
    font-size: 16px !important;
  }

  /* Inline-Logo (style="width:340px") auf Mobile schrumpfen */
  img[style*="340px"] {
    width: 220px !important;
    max-width: 80vw !important;
  }

  /* Modals/Dialoge passen auf den Screen */
  .modal, .dialog, [role="dialog"] {
    width: 95vw !important;
    max-width: 95vw !important;
    max-height: 90vh !important;
    overflow-y: auto;
  }
}

/* --- 6. Print ----------------------------------------------------------- */
@media print {
  nav, header, footer, .no-print { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
}

/* --- 7. Reduce-Motion ------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ====================================================================
 * MOBILE-HARDENING v2 — universell für alle MailCheck-Seiten
 * Verhindert: horizontales Scrollen, Zoom-Reflow-Bug, Overflow von 
 * Tabellen/Code/langen URLs, Nav-Überlappung
 * ==================================================================== */
html,body{overflow-x:hidden!important;width:100%;position:relative;-webkit-text-size-adjust:100%}
*{min-width:0}

/* Code, URLs, IPs — niemals den Container sprengen */
code,kbd,samp,pre{word-break:break-all;overflow-wrap:break-word;white-space:normal;max-width:100%}
pre{white-space:pre-wrap}

/* Tabellen: fixed Layout damit lange Strings umbrechen */
table{max-width:100%;word-break:break-word;overflow-wrap:break-word}

/* Bilder responsive */
img{max-width:100%;height:auto}

/* Flex-Container: alle Kinder dürfen schrumpfen */
.nav-links,.nav-brand,.hero,.hero .meta,.pipeline-step,.pipeline-content,
.stat,.tech-tile,.cost-row,.changelog-entry,.card,.main,.tabs,
.test-form,.request-actions,.catchall-form,.settings-grid,.budget-card{
  min-width:0
}

/* Nav: Brand fix, Links scrollbar wenn nötig */
.nav{flex-wrap:nowrap}
.nav-brand{flex-shrink:0;min-width:0}
.nav-logo{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.nav-links{flex-shrink:1;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.nav-links::-webkit-scrollbar{display:none}
.nav-link{flex-shrink:0;white-space:nowrap}

/* Hero-Meta-Pills nicht breiter als Container */
.hero{overflow:hidden;min-width:0}
.hero .meta span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Stat-Boxen */
.stat{overflow:hidden}
.stat-val{overflow:hidden;text-overflow:ellipsis}

/* Pipeline-Steps */
.pipeline-num{flex-shrink:0}
.pipeline-content{word-break:break-word;overflow-wrap:break-word}

/* Cost-Rows */
.cost-row{flex-wrap:wrap;gap:6px}
.cost-row .label,.cost-row .value{min-width:0;word-break:break-word}

/* Tablet: 3-Spalten Grid bei Stats */
@media (max-width:1024px){
  .stats-grid{grid-template-columns:repeat(3,1fr)}
}

/* Phone: 2-Spalten + kompakteres Layout */
@media (max-width:768px){
  .nav{padding:0 12px;height:52px}
  .nav-link{padding:0 8px;font-size:0.74rem}
  .nav-sep{display:none}
  .main{padding:0 0.75rem}
  .card{padding:1.1rem;border-radius:10px}
  .hero{padding:1.3rem;border-radius:10px}
  .hero::before{display:none}
  .hero h1{font-size:1.25rem;line-height:1.3;word-break:break-word}
  .hero .subtitle{font-size:0.85rem}
  .hero .meta{gap:6px;font-size:0.72rem}
  .hero .meta span{padding:3px 9px}
  .hero .print-btn{position:static;display:inline-flex;margin-top:0.75rem;font-size:0.78rem}
  .stats-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .stat{padding:0.8rem 0.5rem}
  .stat-val{font-size:1.25rem}
  .tech-tiles{grid-template-columns:repeat(2,1fr)}
  .pipeline-step{padding:12px 14px}
  .pipeline-num{width:28px;height:28px;font-size:0.85rem}
  .pipeline-title{font-size:0.9rem}
  .pipeline-desc{font-size:0.82rem}
  .cost-row{font-size:0.85rem}
  table.info-table,table.smtp-table{font-size:0.82rem}
  table.info-table td,table.info-table th,
  table.smtp-table td,table.smtp-table th{padding:8px 10px}
  .card h2{font-size:1rem}
  .card h3{font-size:0.9rem}
  .changelog-entry{padding-left:1rem}
  .changelog-entry ul li{font-size:0.82rem}
  .tabs{padding:3px;gap:1px}
  .tab{padding:6px 12px;font-size:0.78rem}
  /* Result-Grid in MasterCheck */
  .result-grid{grid-template-columns:1fr 1fr}
  /* Settings-Grid in MasterCheck */
  .settings-grid{grid-template-columns:1fr}
  /* Request-Details */
  .request-details{grid-template-columns:1fr}
}

/* Sehr schmale Phones (iPhone SE, kleine Androids) */
@media (max-width:430px){
  .nav-brand .nav-badge{display:none}
  .stats-grid{grid-template-columns:repeat(2,1fr)}
  .stat-val{font-size:1.1rem}
  .hero h1{font-size:1.1rem}
  .pipeline-step{gap:10px}
  .pipeline-num{width:26px;height:26px;font-size:0.8rem}
}
/* === END MOBILE-HARDENING v2 === */

/* === Passwort-Auge-Icon === */
.pw-wrap{position:relative;display:flex;align-items:center}
.pw-wrap input{width:100%;padding-right:42px}
.pw-eye{position:absolute;right:10px;top:50%;transform:translateY(-50%);
  background:none;border:none;cursor:pointer;padding:4px;color:#888;
  display:flex;align-items:center;justify-content:center;
  transition:color 0.15s;-webkit-tap-highlight-color:transparent}
.pw-eye:hover{color:#185fa5}
.pw-eye svg{width:20px;height:20px;pointer-events:none}