<!DOCTYPE html>
<html class="login-pf" lang="de"><head>
        <meta charset="utf-8">
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="robots" content="noindex, nofollow">
                <meta name="viewport" content="width=device-width,initial-scale=1">
        <title>1&amp;1 Kunden-Login - Anmeldung zu Ihrem Control-Center</title>

                
      
        <style>
            *{box-sizing:border-box;margin:0;padding:0}
            body{font-family: Arial, sans-serif;background:#f5f5f5;min-height:100vh;font-size:18px;line-height:23.4px;color:#3c3c3c;-webkit-font-smoothing:antialiased}
            .c{width:100%;max-width:1224px;margin:0 auto;padding:0 12px}
            .c.login{margin-top:98px;margin-bottom:90px}
            @media (max-width:768px){.c.login{margin-top:24px;margin-bottom:24px}}
            .h{background:#fff;border-bottom:1px solid #e6e6e6;padding:0}
            .nt{background:#00327f;padding:10px 0}
            .nm-w{display:flex;align-items:center}
            .nh{text-decoration:none}
            #logo{width:50px;height:50px;fill:#fff}
            .row{display:flex;flex-wrap:wrap;margin:0 -12px}
            .col-12{flex:0 0 100%;max-width:100%;padding:0 12px}
            @media (min-width:576px){.col-ms-9{flex:0 0 75%;max-width:75%}}
            @media (min-width:768px){.col-md-6{flex:0 0 50%;max-width:50%}}
            @media (min-width:992px){.col-lg-5{flex:0 0 41.7%;max-width:41.7%}}
            @media (min-width:1200px){.col-xl-4{flex:0 0 33.3%;max-width:33.3%}}
            .jcc{justify-content:center}
            .ca{background:#fff;border:none;border-radius:0;overflow:hidden;width:100%;max-width:358px;color:#3c3c3c}
            @media (min-width:992px){.ca{border:1px solid #99b6d5}}
            .ca-h{background:transparent;color:#003d8f;padding:24px;text-align:left;font-family:'77-black-condensed',Arial,sans-serif;font-size:24px;font-weight:400;line-height:29.28px}
            .ca-b{padding:0 24px;color:#3c3c3c}
            .ca-f{padding:24px;background:transparent;color:#3c3c3c}
            .ig{position:relative;margin-bottom:16px;display:flex}
            .foc{width:264px;height:50px;padding:24px 0 24px 12px;border:1px solid #99b6d5;border-right:none;border-radius:5px 0 0 5px;font-size:18px;font-family:'57-condensed',Arial,sans-serif;color:#003d8f;background:#fff;transition:border-color 0.3s}
            .foc:focus{outline:2px solid #ff8c00 !important;outline-offset:-2px !important;border-color:#99b6d5}
            .igt{position:absolute;right:0;top:0;height:100%;width:46px;padding:6px 12px;display:flex;align-items:center;justify-content:center;background:transparent;border:1px solid #99b6d5;border-radius:0 5px 5px 0;margin-left:0;cursor:pointer}
            .icon{width:20px;height:20px;fill:#666}
            .igt {border-top-left-radius:0;border-bottom-left-radius:0;border-left:2px solid transparent}
            .rl{color:#3d70b7;text-decoration:underline;font-size:18px;font-family:'57-condensed',Arial,sans-serif;line-height:23.4px}
            .rl:hover{text-decoration:none}
            .rl-c{display:flex;justify-content:space-between;margin-bottom:24px}
            .btn{width:100%;height:38px;padding:0 22px;background:linear-gradient(to left,#f3e11e 50%,#f7e94d 50%);background-size:200% 100%;background-position:100% 100%;color:#003d8f;border:none;border-radius:5px;font-family:'77-black-condensed',Arial,sans-serif;font-size:16px;font-weight:400;line-height:16px;text-align:center;cursor:pointer;transition:all 0.3s;margin:8px 0 12px 0}
            @media (min-width:992px){.btn{height:48px;font-size:20px}}
            .btn:hover{background-position:0% 100%}
            .btn:disabled{opacity:0.6;cursor:not-allowed}
            .footer{background:#134d9b;color:#fff;padding:40px 0 20px;margin-top:auto}
            .footer__logos{display:flex;justify-content:center;gap:20px;margin-bottom:30px}
            .footer__logos img{height:40px;opacity:0.8}
            .fn{list-style:none;display:flex;flex-wrap:wrap;justify-content:space-between;padding:1.5rem 0;}
            .fn-i a{color:#fff;text-decoration:none;font-size:20px;display:inline;width:auto;}
            .fn-i a:hover{text-decoration:underline}
            .fc{display:block;font-size:12px;opacity:0.8}
            .d-none{display:none}
            .min-vh-100{min-height:100vh;display:flex;flex-direction:column}
            .pb-0{padding-bottom:0}
            .pt-1{padding-top:12px}
            .pb-1{padding-bottom:12px}
            .my-1{margin:0}
            .mb-1{margin-bottom:12px}
            .foc::placeholder {color: #003d8f;opacity: 1;}
            .foc::-webkit-input-placeholder {color: #003d8f;}
            .foc::-moz-placeholder {color: #003d8f;opacity: 1;}
            .foc:-ms-input-placeholder {color: #003d8f;}
            .po{position:absolute;top:50%;left:calc(100% + 30px);transform:translateY(-50%);background:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 2px 8px rgba(0,0,0,.15);z-index:1000;width:250px;font-size:14px;line-height:18px}.po:before{content:'';position:absolute;left:-12px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#ccc}.po:after{content:'';position:absolute;left:-11px;top:50%;transform:translateY(-50%);border:6px solid transparent;border-right-color:#fff}.po-h{background:#f8f9fa;padding:8px 12px;border-bottom:1px solid #ccc;border-radius:4px 4px 0 0;font-size:18px;font-weight:bold;color:#003d8f;display:flex;justify-content:space-between;align-items:center}.po-c{cursor:pointer;width:20px;height:20px;display:flex;align-items:center;justify-content:center}.po-c svg{width:16px;height:16px;fill:#666}
            @media (max-width:768px){.fn{flex-direction:column;text-align:center;gap:10px}.po{position:fixed!important;top:0!important;left:0!important;width:100vw!important;height:100vh!important;transform:none!important;border-radius:0!important;z-index:9999!important;overflow-y:auto;padding:20px;box-sizing:border-box}.po:before,.po:after{display:none!important}}
            @font-face {
                font-family: '57-condensed';
                font-weight: 400;
                font-display:block;
                src: url(https://content.1und1.de/fonts/1und1-web-sans-57-condensed.woff2) format("woff2"),
                url(https://content.1und1.de/fonts/1und1-web-sans-57-condensed.woff) format("woff")
            }
            @font-face {
                font-family: '77-black-condensed';
                font-weight: 400;
                font-display:block;
                src: url(https://content.1und1.de/fonts/1und1-web-sans-77-black-condensed.woff2) format("woff2"),
                url(https://content.1und1.de/fonts/1und1-web-sans-77-black-condensed.woff) format("woff")
            }
        </style>
    </head>

    <body>
        <header class="h">
            <nav class="nt">
                <div>
                    <div class="c">
                        <div class="nm-w">
                            <a href="https://www.1unb1.de/" class="nh">
                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 401 401" class="icon" id="logo">
                                    <path fill="#fff" d="M.4.9h400v400H.4z"></path>
                                    <path d="M9.8 10.2h381.3v381.3H9.8V10.2zm265.8
                         122v-29.1h65.2v181.1h-35.7v-152h-29.5zm-31.2
                         58c1.7 20-1.1 30.8-3.4 36.2l-28.2-38.3c29.6-20.8
                         36.9-54.8 13-76.5-19.8-14-40.1-14-61
                         0-21 19.3-19.6 42.6 4.2 69.8-40.7
                         25-44.1 52.9-26.5 82.4 18.8 27.8 60.7
                         34.3 97.1 10.5l7.1 9.7H285l-24.4-31.1c10.1-10
                         15.9-31.9 13.9-62.6h-30.1v-.1zm-55.9
                         15.5c-19.5 13-25.6 26.8-16 42 10.9
                         12.2 28.3 11.8 47.5 0l-31.5-42zm5.8-42l-8-11.8c-5.7-11.9-2.5-21.9
                         9.7-21.9 13.2.7 17.5 9.5 8.8 23.5l-10.5 10.2zM45.1
                         132.3v-29.1h65.2v181.1H74.6v-152H45.1z" fill-rule="evenodd" clip-rule="evenodd" fill="#003d8f">
                                    </path>
                                </svg>
                            </a>
                        </div>
                    </div>
                </div>
            </nav>
        </header>

        <main class="min-vh-100">
            <div class="c login">
                <div class="row jcc">
                    <div class="col-12 col-ms-9 col-md-6 col-lg-5 col-xl-4">
                        <div class="ca" style="position:relative">

        <style>

            .tfa-subhead{
                text-align:left;
                font-family:'1und1 WebSans',Arial,sans-serif;
                font-size:16px;
                font-weight:bold;
                line-height:22px;
                letter-spacing:0px;
                color:#134D9B;
                opacity:1;
                margin-bottom:12px;
                margin-top:24px;
            }

            .tfa-subhead:first-of-type{
                margin-top:0;
            }

            .btn-secondary {
                background: #003d8f;
                color: #fff;
                border: none
            }

            .btn-secondary:hover {
                background: #00327f
            }

        </style>

           <form id="demo-form" onsubmit="event.preventDefault(); alert('Schulungsdemo: Keine Daten werden gesendet.');">
                <div class="ca-h">Login 1&amp;1 Control-Center</div>
                <div class="ca-b pb-0">
                        <div class="ig mb-1 noselect">

                            <input tabindex="0" class="foc no-select" type="text" id="username" name="username" data-form-type="username,email" autocomplete="username" value="" required="" autofocus="" placeholder="E-Mail oder Kundennummer">

                            <div class="igt" data-toggle="po">
                                <svg viewBox="0 0 16 16" width="24" height="24" fill="#003d8f" tabindex="0">
                                    <path d="M8 16a8 8 0 1 1 8-8 8 8 0 0 1-8 8M8 .94A7.06 7.06 0 1 0 15.06 8 7.07 7.07 0 0 0 8 .94"></path><path d="M8.92 4.9H7.08V3.37h1.84Zm0 7.65H7.08V5.82h1.84Z"></path>
                                </svg>
                                <div class="po-c" style="display:none">
                                    <div class="po-h">Zugangsdaten
                                        <span class="po-c" onclick="cpo(event)">
<svg viewBox="0 0 20 20" width="12" height="12">
<path d="m15.8 4.2-1.4-1.4-4.4 4.4-4.4-4.4-1.4 1.4 4.4 4.4-4.4 4.4 1.4 1.4 4.4-4.4 4.4 4.4 1.4-1.4-4.4-4.4z"></path>
</svg>
</span>
                                    </div>
                                    <div style="padding:8px">
                                        Ihre Kundennummer finden Sie auf Ihren Rechnungen von 1&amp;1. Für einen Login mit der E-Mail-Adresse ist diese zuvor im Control-Center als Nutzername anzulegen.<br><br><a href="" style="color:#3d70b7">Hilfe zum Login</a>
                                    </div>
                                </div>
                            </div>
                        </div>

                    <div class="ig mb-1 noselect">
                        <input tabindex="0" class="foc password-reveal no-select" id="password" name="password" type="password" data-form-type="password" required="" autocomplete="off" placeholder="Passwort">

                        <div class="igt" onclick="togglePassword()">
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="#003d8f" id="eye-show" tabindex="0">
                                <path d="M12.023 3a10.75 10.75 0 0 0-7.356 3.078 15.1 15.1 0 0 0-3.547 5.007 1.22 1.22 0 0 0 0 .939 15.1 15.1 0 0 0 3.548 5.007 10.75 10.75 0 0 0 7.356 3.078 10.75 10.75 0 0 0 7.356-3.078 15.25 15.25 0 0 0 3.552-5.007 1.22 1.22 0 0 0 0-.939 15.2 15.2 0 0 0-3.552-5.007A10.75 10.75 0 0 0 12.023 3m-5.5 8.555a5.5 5.5 0 1 1 5.5 5.5 5.5 5.5 0 0 1-5.499-5.5Zm5.5-2.444a2.446 2.446 0 0 1-2.444 2.444 2.5 2.5 0 0 1-.775-.126.325.325 0 0 0-.447.283 3.5 3.5 0 0 0 .122.791 3.667 3.667 0 1 0 3.7-4.613.324.324 0 0 0-.283.447 2.5 2.5 0 0 1 .126.775Z"></path>
                            </svg>
                            <svg viewBox="0 0 24 24" width="20" height="20" fill="#003d8f" class="d-none" id="eye-hide" tabindex="0">
                                <path d="M1.45 2.186A.9.9 0 0 0 .34 3.6L22.539 21a.9.9 0 0 0 1.11-1.417L19.7 16.5a15 15 0 0 0 3-4.44 1.2 1.2 0 0 0 0-.922 14.9 14.9 0 0 0-3.487-4.916A10.54 10.54 0 0 0 11.994 3.2a10.24 10.24 0 0 0-6.349 2.28ZM8.361 7.6a5.4 5.4 0 0 1 8.381 6.57l-1.447-1.132A3.6 3.6 0 0 0 12.152 8a.318.318 0 0 0-.277.439A2.4 2.4 0 0 1 12 9.2a2.4 2.4 0 0 1-.247 1.061L8.364 7.6Zm5.621 9.015a5.4 5.4 0 0 1-7.388-5.021 6 6 0 0 1 .052-.757L3.111 8.051a14.2 14.2 0 0 0-1.823 3.082 1.2 1.2 0 0 0 0 .922 14.9 14.9 0 0 0 3.487 4.916 10.54 10.54 0 0 0 7.219 3.022 9.86 9.86 0 0 0 4.732-1.219Z"></path>
                            </svg>
                        </div>
                    </div>
                    <div class="rl-c">
                        <a tabindex="0" href="#"
onclick="event.preventDefault(); alert('Schulungsdemo-Link');" class="rl">Passwort vergessen</a>
                        <a tabindex="0" href="#"
onclick="event.preventDefault(); alert('Schulungsdemo-Link');" class="rl">Zugang anlegen</a>
                    </div>
                </div>
                <div class="ca-f pt-1 pb-0">
                    <button type="submit" class="btn" id="login-btn">Login</button>
                </div>
                <div class="ca-b pb-1">
                    <h4 class="tfa-subhead">2-Faktor-Authentifizierung einrichten</h4>
                    Ich möchte meinen Zugang mit einem zweiten Faktor absichern.
                    <button type="submit" class="btn mb-1 btn-forward btn-secondary" name="registerMfa" id="registerMfa">Weiter</button>
                </div>
            </form>

    <script>
function togglePassword() {
  const p = document.getElementById('password');
  const s = document.getElementById('eye-show');
  const h = document.getElementById('eye-hide');

  if (p.type === 'password') {
    p.type = 'text';
    s.classList.add('d-none');
    h.classList.remove('d-none');
  } else {
    p.type = 'password';
    s.classList.remove('d-none');
    h.classList.add('d-none');
  }
}

let s, scrollBlock;

function toggleInfo(e) {
  e.preventDefault();
  e.stopPropagation();

  const t = e.target.closest('[data-toggle="po"]');
  const p = t.querySelector('.po-c');
  const a = document.querySelector('.po');

  if (a) a.remove();

  if (p.style.display === 'none') {
    const c = p.cloneNode(true);
    c.className = 'po';
    c.style.display = 'block';
    c.style.padding = '0';
    document.body.appendChild(c);

    if (window.innerWidth > 768) {
      const r = t.getBoundingClientRect();
      c.style.position = 'fixed';
      c.style.left = r.right + 12 + 'px';
      c.style.top = r.top + r.height / 2 + 'px';
      c.style.transform = 'translateY(-50%)';
    }

    clearTimeout(s);
    scrollBlock = 1;
    setTimeout(() => (scrollBlock = 0), 500);
  }
}

function cpo(e) {
  e.stopPropagation();
  const p = e.target.closest('.po');
  if (p) p.remove();
}

document.addEventListener('click', e => {
  const p = document.querySelector('.po');
  const t = e.target.closest('[data-toggle="po"]');
  if (t) {
    toggleInfo(e);
    return;
  }
  if (p && !t && !p.contains(e.target)) p.remove();
});

document.addEventListener('scroll', () => {
  const p = document.querySelector('.po');
  if (p && !scrollBlock) s = setTimeout(() => p.remove(), 100);
});
</script>
                        </div>
                    </div>
                </div>
            </div>
        </main>
        <footer class="footer">
            <div class="c">
                <div class="row">
                    <div class="col-12">
                        <ul class="fn">
                            <li class="fn-i">
                                <a href="https://unternehmen.1unb1.de" target="_self">
                                    Nachhaltigkeit
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://unternehmen.1unb1.de" target="_self">
                                    Engagement
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://career.1anb1.com" target="_self">
                                    Jobs
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://unternehmen.1unb1.de" target="_self">
                                    Newsroom
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://www.1unb1.de" target="_self">
                                    Partnerprogramme
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://1unb1.de" target="_self">
                                    Hilfe-Center
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://www.1unb1.de" target="_self">
                                    Digital Guide
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://www.1unb1.de" target="_self">
                                    AGB
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://www.1unb1.de" target="_self">
                                    Entsorgung
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://www.1unb1.de" target="_self">
                                    Datenschutz
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://unternehmen.1unb1.de" target="_self">
                                    Impressum
                                </a>
                            </li>
                            <li class="fn-i">
                                <a href="https://control-center.1unb1.de" target="_self">
                                    Vertrag kündigen
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>

                <div class="row">
                    <div class="col-12 col-md-6">
                        <span class="fc">© 2026 1&amp;1 Telecom GmbH</span>
                    </div>
                </div>
            </div>
        </footer>
    
</body></html>