/**
 *  @template       ISB template.css
 *  @version        see info.php of this template
 *  @author         Internet-Service Berlin
 *  @copyright      Internet-Service Berlin
 *  @license        All rights reserved
 *  @license terms  no use without written permission
 *  @platform       see info.php of this template
 */
@font-face {font-family: 'fira-sans-compressed-semibold';src: url('../fonts/FiraSansCompressed-SemiBold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'assistant-bold';src: url('../fonts/assistant-bold-webfont.woff2') format('woff2'),url('../fonts/assistant-bold-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'assistant-light';src: url('../fonts/assistant-light-webfont.woff2') format('woff2'),url('../fonts/assistant-light-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'assistant-regular';src: url('../fonts/assistant-regular-webfont.woff2') format('woff2'),url('../fonts/assistant-regular-webfont.woff') format('woff');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Font Awesome 6 Solid';font-style: normal;font-weight: 900;font-display: block;src:url("../fonts/fa-solid-900.woff2") format("woff2");}
html body {background:#fff;font-family:'assistant-light',sans-serif;color:#000;font-size:1.4rem;line-height: 1.4;overflow-x: hidden;height:100%;}
* {margin:0;padding:0;box-sizing:border-box;}
a, img {border:none;outline:none;}
strong, b {font-family:'assistant-bold',sans-serif;font-weight:normal !important;} /* semantic */
#menu, .slicknav_menu {display:none;}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Icons ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.fa,.fas {-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1;}
.fas {font-family: 'Font Awesome 6 Solid';font-weight: 900;}
.fa-envelope::before {content: "\f0e0";}
.fa-phone::before {content: "\f095";}
.fa-palette::before {content: "\f53f";}
.fa-laptop-code::before {content: "\f5fc";}
.fa-cart-shopping::before {content: "\f07a";}
.fa-rocket::before {content: "\f135";}
.fa-mobile-screen::before {content: "\f3cf";}
.fa-tools::before {content: "\f7d9";}
.fa-server::before {content: "\f233";}
.fa-money-bill-1-wave::before {content: "\f53b";}
.fa-globe::before {content: "\f0ac";}
.fa-mug-saucer::before {content: "\f0f4";}
.fa-section::before {content: "\e447";}
.fa-ruler-combined::before {content: "\f546";}
.fa-heart-pulse::before {content: "\f21e";}
.fa-icons::before {content: "\f86d";}
.fa-hand-sparkles::before {content: "\e05d";}
.fa-truck-fast::before {content: "\f48b";}
/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Transitions, Consent ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a, a:after, input, input::-webkit-file-upload-button, textarea, button, form, p, img, span, li, i, div, nav, header {transition: 0.4s;}
.cc-revoke, .cc-revoke > *, .cc-animate.cc-revoke.cc-bottom {display:none !important;}
.move-up {display:none;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Header ~~~~~~~~~~~~~~~~~~~~~~~  */
header {width:100%;padding:50px;}
#logo p {position:relative;width:160px;height:130px;}
#logo img {position:absolute;width:100px;height:auto;top:5px;left:50%;margin-left:-50px;opacity:1;}
#logo img:last-child {display:none;}
#title {width:350px;padding:50px 0 0 20px;font-family:'fira-sans-compressed-semibold',sans-serif;font-weight:normal;font-size:1.7rem;line-height:1.7rem;letter-spacing:0px;}
#title a:link, #title a:visited  {text-decoration:none;color:#2e303e;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Main Navigation ~~~~~~~~~~~~~~~~~~~~~~~ */
nav {display:none;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Hero Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.hero {padding:130px 10vw 2vw;}
@keyframes pulse {0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.1); opacity: 0.8;} }
.hero-image img {display:none;}
.hero-title, .hero-content h1 {font-family:'fira-sans-compressed-semibold',sans-serif;font-weight:normal;font-size:4rem;color:#357a9c;line-height: 1.1;margin-bottom: 1.5rem;}
.hero p {font-size: 1.5rem;line-height: 1.6;}
.hero-content p {margin-bottom: 2.5rem;}
.hero-buttons {display: flex;gap: 1.5rem;margin-bottom: 3rem;}
.primary-btn {background:linear-gradient(135deg, #430704/*15394b*/ 0%, #357a9c 100%);color: #fff;padding: 1.1rem 2.5rem;border-radius: 50px;text-decoration: none;font-size: 1.2rem;font-family:'assistant-bold',sans-serif;font-weight:normal;transition: all 0.3s ease;box-shadow: 0 10px 20px rgba(148, 189, 209, 0.4);}
.primary-btn:focus, .primary-btn:hover, .primary-btn:active {color:#fff;background:linear-gradient(135deg, #15394b 0%, #357a9c 100%);transform: translateY(-3px);box-shadow: 0 15px 30px rgba(148, 189, 209, 0.6);}
.secondary-btn {background:linear-gradient(135deg, #357a9c 0%, #430704/*15394b*/ 100%);color: #fff;padding: 1.1rem 2.5rem;border-radius: 50px;text-decoration: none;font-size: 1.2rem;font-family:'assistant-bold',sans-serif;font-weight:normal;transition: all 0.3s ease;box-shadow: 0 10px 20px rgba(148, 189, 209, 0.4);}
.secondary-btn:focus, .secondary-btn:hover, .secondary-btn:active {background:linear-gradient(135deg, #357a9c 0%, #15394b 100%);transform: translateY(-3px);box-shadow: 0 15px 30px rgba(148, 189, 209, 0.6);}
.trust-badges {display: flex;gap: 2rem;color:#1a1a1a;font-size: 1.1rem;}
.trust-badges div {display: flex;align-items: center;gap: 0.5rem;}
.trust-badges span {font-size: 1.2rem;color: #189b37;}
.hero-visual {position: relative;display: flex;justify-content: center;align-items: center;}
.mockup-container {position: relative;width: 100%;max-width: 500px;animation: float 6s ease-in-out infinite;}
@keyframes float {0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-20px); }
}
.mockup-screen {background: white;border-radius: 20px;padding: 1rem;box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);position: relative;}
.mockup-browser {background: #f5f5f5;border-radius: 10px 10px 0 0;padding: 0.5rem;display: flex;gap: 0.4rem;align-items: center;}
.browser-dot {width: 10px;height: 10px;border-radius: 50%;background: #ddd;}
.browser-dot:nth-child(1) { background: #ff5f56; }
.browser-dot:nth-child(2) { background: #ffbd2e; }
.browser-dot:nth-child(3) { background: #27c93f; }
.mockup-content {background: linear-gradient(180deg, #f8f9fa 0%, white 100%);padding: 2rem;border-radius: 0 0 10px 10px;min-height: 300px;}
.mockup-header {height: 40px;background: linear-gradient(135deg, #0A2463 0%, #00D9FF 100%);border-radius: 5px;margin-bottom: 1rem;}
.mockup-lines {display: flex;flex-direction: column;gap: 0.8rem;}
.mockup-line {height: 12px;background: #e0e0e0;border-radius: 5px;}
.mockup-line:nth-child(1) { width: 70%; }
.mockup-line:nth-child(2) { width: 90%; }
.mockup-line:nth-child(3) { width: 60%; }
.mockup-line:nth-child(4) { width: 80%; }
/* ~~~~~~~~~~~~~~~~~~~~~~~ Services Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.main-content h1 {font-family: 'fira-sans-compressed-semibold',sans-serif;;font-weight:normal;font-size:4rem;color:#357a9c;margin-bottom: 1rem;letter-spacing:1px;}
.main-content h2 {font-family: 'fira-sans-compressed-semibold',sans-serif;font-weight:normal;font-size: 1.8rem;color:#357a9c;margin-bottom:0.8rem;text-transform:uppercase;letter-spacing:1px;}
.main-content h3 {font-family:'assistant-bold',sans-serif;font-weight:normal;font-size: 1.4rem;color:#357a9c;}
.main-content p {margin-bottom: 2rem;}
.main-content a:link, .main-content a:visited {font-family:'assistant-bold',sans-serif;font-weight:normal;color:#871c35;text-decoration:none;}
.main-content a:focus, .main-content a:hover, .main-content a:active {color:#357a9c;}
.main-content ul {margin: 0 0 2rem 0.5rem;list-style:none;}
.main-content ul.check {margin: 0 0 0 0.5rem;}
.main-content ul li, .main-content ul.check li {padding:0 0 20px 25px;position:relative;}
.main-content ul li:before {content:'\2014';position:absolute;top:0;left:0;}
.main-content ul.check li:before {content:'✓';color: #189b37;position:absolute;top:0;left:0;}
.section_1 {width:1400px;margin:0 auto;padding:3.5rem 0;}
.section_2 {background:#fff;padding:3.5rem 0;}
.section_2 section {width:1400px;margin:0 auto;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Referenzen ~~~~~~~~~~~~~~~~~~~~~~~  */
.main-content ul.img_list {margin: 0 0 2rem 0;list-style:none;display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;}
.main-content ul.img_list li:before {content:'';}
.main-content ul.img_list li {width:calc(25% - 5px);padding:0;line-height:0;}
.main-content ul.img_list img {max-width:100%;width:auto;height:auto;}
.main-content ul.img_list img:focus, .main-content ul.img_list img:hover {opacity:0.7;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Service ~~~~~~~~~~~~~~~~~~~~~~~  */
.section-header {text-align: center;margin-bottom:2rem;}
.section-text {max-width:1100px;margin:0 auto;text-align:center;}
.section-subtitle {font-family:'assistant-bold',sans-serif;font-weight:normal;color:#066ea2;text-transform: uppercase;letter-spacing: 1px;font-size: 1rem;margin-bottom: 0.5rem;}
.section-title {font-family:'assistant-bold',sans-serif;font-weight:normal;font-size: 2.5rem;margin-bottom: 1rem;}
.services-container {max-width:1400px;margin: 0 auto;}
.services-grid, .category-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));gap: 2rem;}
.service-card {background: white;padding: 2.5rem;border-radius: 20px;transition: all 0.3s ease;border: 1px solid transparent;cursor: pointer;}
.service-card:focus, .service-card:hover {transform: translateY(-5px);box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);border-color:#871c35/*066ea2*/;}
.service-icon {width: 60px;height: 60px;background:#15394b/*linear-gradient(135deg, #357a9c 0%, #430704/*15394b 100%)*/;color:#fff;border-radius: 10px;display: flex;align-items: center;justify-content: center;padding:0 0 0 5px;font-size: 1.8rem;margin-bottom: 1.5rem;}
.category-icon {width: 100px;height: 100px;background: linear-gradient(135deg, #00D9FF 0%, #0A2463 100%);color:#fff;border-radius: 15px;display: flex;align-items: center;justify-content: center;padding:0 0 0 5px;font-size: 2.2rem;margin: 0 auto 1.5rem auto;}
.service-card h2 {font-family: 'fira-sans-compressed-semibold',sans-serif;font-weight:normal;font-size: 1.4rem;margin-bottom: 1rem;}
.category-grid .service-card h2 {font-family:'assistant-bold',sans-serif;font-weight:normal;font-size: 1.4rem;color: #1a1a1a;margin-bottom: 1rem;text-align:center;text-transform:uppercase;}
.service-card p {color: #666;line-height:1.3;margin-bottom: 1.5rem;}
.service-link {color:#357a9c;font-family:'assistant-bold',sans-serif;font-weight:normal;text-decoration: none;}
.service-link:hover {color:#44a5d5;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ CTA Section ~~~~~~~~~~~~~~~~~~~~~~~  */
.cta-section {padding:4rem 2rem;text-align: center;position: relative;overflow: hidden;}
.cta-content {max-width: 800px;margin: 0 auto;position: relative;z-index: 1;}
.cta-section h2 {font-family: 'fira-sans-compressed-semibold',sans-serif;font-weight:normal;font-size: 2.8rem;margin-bottom:0;color:#357a9c;letter-spacing:1px;}
.cta-section p {font-size: 1.4rem;margin-bottom: 2.5rem;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ CTA Button ~~~~~~~~~~~~~~~~~~~~~~~  */
.cta-buttons {display:flex;justify-content:center;}
.cta-button {background: linear-gradient(135deg, #066ea2 0%, #0A2463 100%);color: white;padding: 0.8rem 1.8rem;border-radius: 50px;text-decoration: none;font-size: 1.2rem;font-family:'assistant-bold',sans-serif;font-weight:normal;text-transform:uppercase;letter-spacing:1px;transition: transform 0.3s ease, box-shadow 0.3s ease;box-shadow: 0 4px 15px rgba(0, 217, 255, 0.3);}
.cta-button:hover {transform: translateY(-2px);box-shadow: 0 6px 25px rgba(0, 217, 255, 0.4);}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Preise ~~~~~~~~~~~~~~~~~~~~~~~  */
.pricing-container {max-width: 1400px;margin:0 auto;}
.pricing-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));gap: 2rem;margin-bottom: 4rem;}
.pricing-card {background: white;border-radius: 20px;padding: 3rem 2.5rem;position: relative;transition: all 0.3s ease;border: 2px solid transparent;}
.pricing-card:hover {transform: translateY(-10px);box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);}
.pricing-card.featured {border-color: #871c35;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);}
.pricing-card.featured:hover {transform:translateY(-10px);}
.popular-badge {position: absolute;top: -15px;right: 30px;background:#871c35;color: #fff;padding: 0.5rem 1.5rem;border-radius: 50px;box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);}
.main-content .pricing-card h2 {font-family:'assistant-bold',sans-serif;font-weight:normal;font-size: 1.6rem;color:#871c35;margin-bottom:0.8rem;text-transform:uppercase;}
.price {margin-bottom: 2rem;}
.price-amount {font-size: 2.2rem;line-height: 1;}
.price-note {color: #999;font-size: 1.2rem;margin-top: 0.5rem;}
.pricing-card:not(.featured) .pricing-cta {background: white;color: #1a1a1a;border: 2px solid #1a1a1a;}
.pricing-card:not(.featured) .pricing-cta:hover {background: #1a1a1a;color: white;}
.pricing-card.featured .pricing-cta {background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);color: #1a1a1a;box-shadow: 0 6px 20px rgba(255, 215, 0, 0.3);}
.pricing-card.featured .pricing-cta:hover {transform: translateY(-2px);box-shadow: 0 8px 25px rgba(255, 215, 0, 0.4);}
.main-content .price-btn a:link, .main-content .price-btn a:visited {display:block;margin:20px 0 0 0;text-align:center;background:linear-gradient(135deg, #430704 0%, #357a9c 100%);color: #fff;padding: 1.1rem 2.5rem;border-radius: 50px;text-decoration: none;font-size: 1.2rem;font-family:'assistant-bold',sans-serif;font-weight:normal;transition: all 0.3s ease;box-shadow: 0 10px 20px rgba(148, 189, 209, 0.4);}
.main-content .price-btn a:focus, .main-content .price-btn a:hover, .main-content .price-btn a:active {background:linear-gradient(135deg, #15394b 0%, #357a9c 100%);transform: translateY(-3px);box-shadow: 0 15px 30px rgba(148, 189, 209, 0.6);}.pricing-subtitle {color: #666;font-size: 0.95rem;margin-bottom: 2rem;}
/* ~~~~~~~~~~~~~~~~~~~~~~~ Footer ~~~~~~~~~~~~~~~~~~~~~~~  */
footer {background:#15394b;color:#eee;padding: 4rem 2rem 2rem;}
.footer-content {max-width:1400px;margin:0 auto;display:grid;grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));gap:3rem;margin-bottom:3rem;}
.footer-column h4 {font-family:'assistant-bold',sans-serif;font-weight:normal;color:white;font-size:1.1rem;margin-bottom:1.5rem;}
.footer-column ul {list-style:none;}
footer a:link, footer a:visited {color:#eee;text-decoration:none;}
footer a:focus, footer a:hover, footer a:active {color:#94bdd1;}
.footer-bottom {max-width: 1400px;margin: 0 auto;padding-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.1);display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;gap: 1rem;font-size:1rem;}
.footer-bottom ul {list-style: none;display:flex;justify-content:flex-end;}
.footer-bottom li {padding:0 0 0 10px;}
.footer-bottom li:before {content:'|';padding:0 10px 0 0;}
.footer-bottom li:first-child:before {content:'';padding:0;}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ SLICKNAV ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.slicknav_btn {display:none;}
.slicknav_menu {display:none;}
.slicknav_nav {display:none;}
.slicknav_menu {display:none;}
header {position:absolute;padding:0 20px;height:150px !important;background:rgb(252, 241, 211,1);justify-content:flex-start;flex-wrap:wrap;backdrop-filter:none;}
#logo {flex:1 1 auto;width:100%;height:100px;background:transparent;}
#logo p {width:100%;height:auto;}
#logo img {position:absolute;width:100px !important;height:auto;top:5px;left:50%;margin-left:-50px;opacity:1;}
#title {flex:1 1 auto;width:100%;padding:0;font-size:1.5rem;line-height:1.5rem;text-align:center;}
.hero {padding:180px 30px 50px;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 968px) {
.main-content ul.img_list li {width:calc(33.3% - 5px);max-width:calc(33.3% - 5px);}
.section_1, .section_2 section {padding:2rem 20px;}
.main-content p {margin-bottom:20px;}
.main-content ul {margin: 0 0 1rem 0.5rem;}
.main-content ul li, .main-content ul.check li {padding:0 0 10px 25px;position:relative;}

.nav-links {display: none;}
.hero-content {grid-template-columns: 1fr;	text-align: center;}
.hero-text h1 {font-size: 2.5rem;}
.hero-buttons {flex-direction: column;}
.mockup-container {max-width: 400px;}
.section-title {font-size: 2rem;}
.footer-bottom {flex-direction: column;	text-align: center;}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 640px) {
html body {font-size:1.2rem;line-height: 1.2;}
.trust-badges {flex-direction: column;	align-items: center;}
.main-content h1 {font-size:2rem;margin-bottom:0.8rem;-moz-hyphens:auto;-o-hyphens:auto;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto; }
.main-content h2, .main-content h3 {font-size: 1.2rem;margin-bottom:0.5rem;}
.section_2 {background:#fff;padding:0;}
.hero-title, .hero-content h1 {font-size:2rem;margin-bottom:0;}
.cta-section h2 {font-size: 1.8rem;margin-bottom:20px;}
.hero p, .cta-section p {font-size: 1.2rem;}
.main-content ul.img_list li {width:calc(50% - 2.5px);max-width:calc(50% - 2.5px);}
}
/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
@media (max-width: 480px) {
.main-content ul.img_list {gap:0;}
.main-content ul.img_list li {width:100%;max-width:100%;margin:0 0 10px 0;}
}