/*
 * Copyright (c) 2026 TNSystem. Alle Rechte vorbehalten.
 * Datei: public/assets/public-auth-layout-v1.css
 * Zweck: Gestaltet die Benutzeroberfläche „public auth layout v1“ des TNSystem Faktura-Portals.
 */
/*
 * Isoliertes Layout fuer Anmeldung und Registrierung.
 * Absichtlich zuletzt geladen: Die produktiven Altregeln bleiben erhalten,
 * koennen diese beiden Seiten aber nicht mehr unbeabsichtigt vergroessern.
 */

.public-main > .portal-auth-register,
.public-main > .portal-auth-premium {
  align-self: center;
  max-width: calc(100vw - 56px);
}

/* Anmeldung: feste, ruhige Proportionen auf grossen Bildschirmen. */
.portal-auth-premium {
  width: min(1780px, 100%);
  grid-template-columns: minmax(0, 1fr) 430px;
  min-height: min(820px, calc(100vh - 80px));
  overflow:visible;
}

.portal-auth-premium .portal-story{
  gap:30px;
  justify-content:flex-start;
  padding:48px 56px;
}

.portal-auth-premium .portal-story>.portal-wordmark{
  display:none;
}

.portal-auth-premium .portal-hero-copy{
  max-width:1080px;
  margin:20px 0 0;
}

.portal-business-details{
  display:grid;
  grid-template-columns:minmax(260px,.72fr) minmax(0,1.28fr);
  gap:24px;
  max-width:1120px;
  padding:24px;
  border:1px solid rgba(255,255,255,.14);
  border-radius:17px;
  background:rgba(4,24,44,.48);
}

.portal-section-heading h2,
.portal-confidence-grid h2{margin:7px 0 10px;color:#fff;font-size:clamp(22px,1.8vw,30px);line-height:1.18}
.portal-section-heading>p:last-child,
.portal-confidence-grid article p,
.portal-contact-cta p{margin:0;color:#c3d5e5;font-size:14px;line-height:1.65}
.portal-use-cases{display:grid;gap:10px}
.portal-use-cases article{display:grid;grid-template-columns:38px minmax(0,1fr);gap:12px;padding:14px;border:1px solid rgba(255,255,255,.11);border-radius:12px;background:rgba(255,255,255,.055)}
.portal-use-cases article>span,.portal-card-icon{display:grid;place-items:center;width:36px;height:36px;border-radius:9px;background:#dff7f4;color:#0a5b67;font-size:12px;font-weight:900}
.portal-use-cases strong{display:block;color:#fff;font-size:14px}
.portal-use-cases p{margin:5px 0 0;color:#bdd0e0;font-size:12.5px;line-height:1.58}
.portal-confidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:1120px}
.portal-confidence-grid article{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:22px;border:1px solid rgba(255,255,255,.14);border-radius:15px;background:linear-gradient(145deg,rgba(255,255,255,.09),rgba(255,255,255,.035))}
.portal-confidence-grid h2{font-size:21px}
.portal-confidence-grid a{display:inline-flex;margin-top:12px;color:#8ce6dc;font-size:13px;font-weight:800;text-decoration:none}
.portal-confidence-grid a:hover,.portal-confidence-grid a:focus-visible{text-decoration:underline;outline:0}
.portal-contact-cta{display:flex;align-items:center;justify-content:space-between;gap:24px;max-width:1120px;padding:19px 22px;border-left:4px solid #74e2d4;border-radius:4px 13px 13px 4px;background:rgba(2,18,34,.62)}
.portal-contact-cta strong{display:block;color:#fff;font-size:16px}.portal-contact-cta p{margin-top:4px;font-size:13px}
.portal-contact-cta a{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border-radius:9px;background:#fff;color:#104a78;text-decoration:none;font-size:13px;font-weight:850}
.portal-auth-premium .portal-trust{margin-top:auto}

.portal-auth-premium .portal-form-column {
  width: 100%;
  padding: 112px 30px 40px;
  place-content: start center;
  justify-items: center;
  background:
    radial-gradient(circle at 80% 12%,rgba(49,137,180,.18),transparent 32%),
    linear-gradient(180deg,#0a2138 0%,#10344f 54%,#091f35 100%);
  border-left:1px solid rgba(151,197,225,.2);
}

.portal-auth-premium .portal-form-column:before{
  background-image:
    linear-gradient(rgba(155,199,226,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(155,199,226,.045) 1px,transparent 1px);
  background-size:38px 38px;
  mask-image:linear-gradient(to bottom,black,transparent 92%);
}

.portal-auth-premium .portal-form-card,
.portal-auth-premium .login-announcement,
.portal-auth-premium .automation-proof,
.portal-auth-premium .portal-security-note {
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
}

.portal-auth-premium .portal-form-card {
  padding: 18px 24px;
  border-color:rgba(198,219,234,.9);
  background:linear-gradient(180deg,rgba(251,253,255,.98),rgba(241,247,251,.98));
  box-shadow:0 26px 70px rgba(0,12,27,.34);
}
.portal-auth-premium .portal-form-card .form-card-head{gap:10px}
.portal-auth-premium .portal-form-card .login-symbol{width:38px;height:38px;border-radius:11px;font-size:19px}
.portal-auth-premium .portal-form-card h2{font-size:23px}
.portal-auth-premium .portal-form-card .form-intro{margin:7px 0 10px;font-size:12px;line-height:1.4}
.portal-auth-premium .portal-form-card label{margin:7px 0}
.portal-auth-premium .portal-form-card input{min-height:40px;padding:9px 11px}
.portal-auth-premium .portal-form-card .remember-login{margin:8px 0 1px!important;padding:8px 10px}
.portal-auth-premium .portal-form-card .remember-login small{line-height:1.3}
.portal-auth-premium .portal-form-card .primary{min-height:42px;margin-top:8px}
.portal-auth-premium .portal-form-card .portal-form-links{margin-top:10px}
.portal-auth-premium .portal-form-card .portal-register-cta{gap:4px;margin-top:10px;padding-top:10px}
.portal-auth-premium .portal-form-card .portal-register-button{min-height:40px}

/* Registrierung: zwei Formularbereiche nebeneinander statt einer langen Spalte. */
.portal-auth-register {
  width: min(1540px, 100%);
  grid-template-columns: minmax(390px, .72fr) minmax(720px, 1.28fr);
  min-height: 680px;
  overflow: hidden;
}

.portal-auth-register .portal-story {
  min-height: 680px;
  padding: 32px 36px;
}

.portal-auth-register .portal-hero-copy {
  margin: 24px 0 18px;
}

.portal-auth-register .portal-benefits {
  grid-template-columns: 1fr;
  gap: 10px;
}

.portal-auth-register .portal-benefits article {
  min-height: 0;
  padding: 12px 14px;
}

.portal-auth-register .portal-form-column {
  width: 100%;
  padding: 18px 24px;
  place-content: center;
}

.portal-auth-register .portal-form-card {
  width: 100%;
  max-width: 860px;
  padding: 21px 24px;
  box-sizing: border-box;
}

.portal-auth-register .portal-form-card > h2 {
  margin-bottom: 5px;
}

.portal-auth-register .form-intro {
  margin-bottom: 11px;
}

.portal-auth-register .registration-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
  align-items: start;
}

.portal-auth-register .registration-form fieldset {
  height: 100%;
  margin: 0;
  padding: 10px 12px;
  box-sizing: border-box;
}

.portal-auth-register .registration-plan-summary {
  display:grid;
  grid-template-columns:minmax(220px,1fr) minmax(230px,auto);
  align-items:center;
  gap:12px;
  margin-bottom:11px;
  padding:11px 13px;
  overflow:hidden;
}

.portal-auth-register .registration-plan-summary > div{min-width:0}
.portal-auth-register .registration-plan-summary > div strong{display:block;font-size:18px;overflow-wrap:anywhere}
.portal-auth-register .registration-plan-summary > div small{display:none}
.portal-auth-register .registration-plan-summary dl{display:grid;grid-template-columns:repeat(2,minmax(105px,1fr));gap:7px;margin:0}
.portal-auth-register .registration-plan-summary dl div{min-width:0;padding:7px 9px}
.portal-auth-register .registration-plan-summary dt,.portal-auth-register .registration-plan-summary dd{overflow-wrap:anywhere}
.portal-auth-register .registration-plan-summary > p{grid-column:1/-1;margin:0;max-width:none}
.portal-auth-register .registration-plan-summary > a{grid-column:1/-1;justify-self:start;white-space:nowrap}
.portal-auth-register .registration-security{grid-column:1/-1}
.portal-auth-register .registration-security .registration-grid{grid-template-columns:1fr 1fr 1.2fr;align-items:start}
.portal-auth-register .registration-security .registration-password-check{grid-column:3;margin:0}
.portal-auth-register .registration-security .password-check ul{grid-template-columns:1fr}

.portal-auth-register .registration-form > .portal-consents,
.portal-auth-register .registration-form > .primary {
  grid-column: 1 / -1;
}

.portal-auth-register .portal-consents {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px 13px;
}

.portal-auth-register .portal-consents .check {
  margin: 0;
}

.portal-auth-register .portal-switch {
  margin: 9px 0 0;
  text-align: center;
}

/* Kleinere Desktop- und Tabletbreiten: Formular bleibt kompakt, Story schrumpft. */
@media (max-width: 1180px) {
  .public-main > .portal-auth-register,
  .public-main > .portal-auth-premium {
    max-width: calc(100vw - 32px);
  }

  .portal-auth-register {
    grid-template-columns: minmax(300px, .55fr) minmax(650px, 1.45fr);
  }

  .portal-auth-register .portal-story {
    padding: 30px;
  }

  .portal-auth-register .registration-plan-summary{grid-template-columns:minmax(0,1fr) minmax(190px,auto)}
  .portal-auth-register .registration-plan-summary dl{display:none}
  .portal-auth-register .registration-security .registration-grid{grid-template-columns:1fr 1fr}
  .portal-auth-register .registration-security .registration-password-check{grid-column:1/-1}

  .portal-auth-register .portal-benefits article:nth-child(n + 3) {
    display: none;
  }

  .portal-auth-premium {
    grid-template-columns: minmax(0, 1fr) 410px;
  }
  .portal-business-details{grid-template-columns:1fr}
}

@media (max-width: 980px) {
  .portal-auth-register {
    display: block;
    width: min(820px, 100%);
    min-height: 0;
    overflow: visible;
  }

  .portal-auth-register .portal-story {
    min-height: 310px;
    padding: 28px 32px;
  }

  .portal-auth-register .portal-hero-copy {
    margin: 26px 0 0;
  }

  .portal-auth-register .portal-benefits,
  .portal-auth-register .portal-trust {
    display: none;
  }

  .portal-auth-register .portal-form-column {
    padding: 24px;
  }

  .portal-auth-premium {
    grid-template-columns: minmax(0, 1fr) 390px;
  }
  .portal-auth-premium .portal-story{padding:34px}
  .portal-auth-premium .portal-form-column{padding-top:105px}
  .portal-confidence-grid{grid-template-columns:1fr}
}

/* Handy: eine Spalte, keine erzwungene Desktopbreite und kein Horizontal-Scroll. */
@media (max-width: 760px) {
  .public-main > .portal-auth-register,
  .public-main > .portal-auth-premium {
    width: 100%;
    max-width: 100%;
  }

  .portal-auth-premium,
  .portal-auth-register {
    display: block;
    min-height: 100vh;
    border: 0;
    border-radius: 0;
    overflow: visible;
  }

  .portal-auth-premium .portal-story,
  .portal-auth-register .portal-story {
    min-height: 270px;
    padding: 26px 21px 30px;
  }

  .portal-auth-premium .portal-hero-copy,
  .portal-auth-register .portal-hero-copy {
    margin: 28px 0 0;
  }

  .portal-auth-premium .portal-benefits,
  .portal-auth-premium .automation-flow,
  .portal-auth-premium .portal-special,
  .portal-auth-register .portal-benefits,
  .portal-auth-register .portal-trust {
    display: none;
  }

  .portal-auth-premium .portal-business-details,
  .portal-auth-premium .portal-confidence-grid,
  .portal-auth-premium .portal-contact-cta{
    display:none;
  }

  .portal-auth-premium .portal-form-column,
  .portal-auth-register .portal-form-column {
    padding: 22px 16px 34px;
    place-content:center;
  }

  .portal-auth-premium .portal-form-card,
  .portal-auth-register .portal-form-card {
    max-width: 520px;
    padding: 22px 20px;
  }

  .portal-auth-register .registration-form,
  .portal-auth-register .registration-grid,
  .portal-auth-register .portal-consents {
    grid-template-columns: 1fr;
  }

  .portal-auth-register .registration-plan-summary{display:block}
  .portal-auth-register .registration-plan-summary > a{display:inline-block;margin-top:8px}

  .portal-auth-register .registration-form > *,
  .portal-auth-register .registration-grid > *,
  .portal-auth-register .portal-consents > * {
    grid-column: 1;
  }
}

@media (max-width: 420px) {
  .portal-auth-premium .portal-form-column,
  .portal-auth-register .portal-form-column {
    padding-left: 11px;
    padding-right: 11px;
  }

  .portal-auth-premium .portal-form-card,
  .portal-auth-register .portal-form-card {
    padding: 19px 16px;
  }
}

.portal-tools-teaser{display:flex;align-items:center;justify-content:space-between;gap:22px;margin-top:20px;padding:20px 22px;border:1px solid rgba(150,218,222,.34);border-radius:17px;background:linear-gradient(120deg,rgba(8,34,58,.84),rgba(14,77,84,.72));box-shadow:0 16px 36px rgba(0,0,0,.18)}
.portal-tools-teaser .eyebrow{margin:0 0 5px;color:#7ce1da;font-size:10px;letter-spacing:.13em}
.portal-tools-teaser strong{display:block;color:#fff;font-size:18px}
.portal-tools-teaser span{display:block;max-width:650px;margin-top:6px;color:#c8dae6;font-size:13px;line-height:1.55}
.portal-tools-teaser ul{display:flex;gap:15px;flex-wrap:wrap;margin:11px 0 0;padding:0;list-style:none;color:#bce5e2;font-size:11px}
.portal-tools-teaser li:before{content:"✓";margin-right:5px;color:#69d6cc}
.portal-tools-teaser>a{flex:0 0 auto;padding:11px 15px;border:1px solid rgba(255,255,255,.4);border-radius:10px;color:#fff;text-decoration:none;font-weight:800;font-size:13px}
.portal-tools-teaser>a:hover,.portal-tools-teaser>a:focus-visible{background:#fff;color:#123451}
@media(max-width:980px){.portal-tools-teaser{align-items:flex-start;flex-direction:column}}
@media(max-width:760px){.portal-auth-premium .portal-tools-teaser{display:none}}

/* Release 05.08.2026: kompakter Kopf- und Loginbereich der Hauptseite. */
.portal-auth-premium{min-height:0}
.portal-auth-premium .portal-story{
  min-height:760px;
  padding:42px 50px 38px;
  justify-content:space-between;
}
.portal-auth-premium .portal-hero-copy{
  width:100%;
  max-width:920px;
  margin:0;
}
.portal-auth-premium .portal-hero-copy h1{
  max-width:none;
  font-size:clamp(42px,3.8vw,56px);
  line-height:1.08;
  letter-spacing:-2px;
  white-space:nowrap;
}
.portal-auth-premium .portal-form-column{align-self:stretch}
.portal-auth-premium .portal-form-column{
  min-height:760px;
  padding:32px 30px 24px;
  place-content:center;
}
.portal-auth-premium .portal-trust{margin-top:24px}

@media(max-width:1180px){
  .portal-auth-premium .portal-story,
  .portal-auth-premium .portal-form-column{min-height:720px}
  .portal-auth-premium .portal-story{padding:36px}
  .portal-auth-premium .portal-form-column{padding:38px 28px}
  .portal-auth-premium .portal-hero-copy h1{font-size:clamp(40px,4.3vw,48px);white-space:normal}
}
@media(max-width:760px){
  .portal-auth-premium .portal-story{min-height:0;padding:34px 21px 30px}
  .portal-auth-premium .portal-form-column{min-height:0;padding:28px 16px 32px}
  .portal-auth-premium .portal-hero-copy{margin:0}
  .portal-auth-premium .portal-hero-copy h1{font-size:clamp(35px,10.5vw,45px);line-height:1.04;white-space:normal}
  .portal-auth-premium .portal-trust{display:flex;margin-top:22px}
}
@media(max-width:420px){
  .portal-auth-premium .portal-story{padding:29px 17px 26px}
  .portal-auth-premium .portal-form-column{padding:24px 11px 28px}
}
body.public main .invite-acceptance{position:relative;z-index:2;display:grid;place-items:center;width:100%;min-height:calc(100vh - 180px);padding:55px 20px}
body.public main .invite-acceptance-card{width:min(100%,580px);max-width:580px;padding:34px;border:1px solid rgba(203,215,227,.8);border-radius:16px;background:rgba(255,255,255,.98);color:#172033;box-shadow:0 24px 70px rgba(0,12,32,.34)}
body.public main .invite-wordmark{position:static;margin-bottom:28px;color:#172033;text-decoration:none}
body.public main .invite-wordmark small{display:block;color:#68758a}
body.public main .invite-acceptance h1{margin:4px 0 12px;color:#172033;font-size:30px}
body.public main .invite-summary{color:#536277;line-height:1.6}
body.public main .invite-acceptance-form{display:grid;gap:15px;margin-top:22px}
body.public main .invite-acceptance-form label{display:grid;gap:7px;color:#263a50;font-weight:750}
body.public main .invite-acceptance-form input{width:100%;min-height:46px;padding:11px 13px;border:1px solid #cbd7e3;border-radius:8px;background:#fff;color:#172033;font:inherit}
body.public main .invite-acceptance-form input[readonly]{background:#f2f5f8;color:#526478}
body.public main .invite-acceptance-form button{min-height:48px;margin-top:5px}
body.public main .invite-acceptance-form small{color:#68758a}