html {
    scroll-behavior: smooth;
}
body{
    font-family: "Source Sans 3", sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    min-width: 378px;
}
a:link, a:visited{
    color: white;
    text-decoration:none;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'DM Sans';
    src: url('/fonts/dm-sans-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Source Sans 3';
    src: url('/fonts/source-sans-3-latin-700-normal.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}
.SourceSans-regular {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}
.SourceSans-bold {
    font-family: "Source Sans 3", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
.dm-sans-medium {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}
.dm-sans-bold {
    font-family: "DM Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}
#all{
    max-width: 1920px;
    width: 100%;
}
.btn{
    height: 60px;
    background-color: #FDC921;
    border-radius: 30px;
    padding: 0 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.btn a{
    color: #0C0C0C;
    font-size: 22px;
}
main{
    width: 100%;
}
header{
    width: 100%;
}
footer{
    width: 100%;
}
.title-size{
    font-size: 56px;
}
.text-size{
    font-size: 20px;
}
.minitext-size{
    font-size: 16px;
}
.text-black{
    color: black !important;
}
.flex-c{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-c-b{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: first baseline;
    gap: 16px;
}
#navbar{
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 80px;
    background-color: #1D1B20;
    color: white;
    font-size: 22px;
    position: relative;
}
#logo{
    display: flex;
    justify-content: center;
    align-items: center;
}
#logo_icon{
    height: 40px;
    width: 229.6px;
    margin-left: 80px;
    margin-right: 32px;
}
.nav_font{
    font-size: 24px;
}
#menu{
    color: white;
    display: flex;
    justify-content: center;
    gap: 32px
}
#hamburger{
    width: 40px;
    height: 40px;
}
#hamburger-div{
    display: none;
}
#nav_call{
    margin-left: auto;
    margin-right: 80px;
    display: flex;
    justify-content: center;
    align-items: center; 
    gap: 10px;
}
#call_icon{
    height: 21.16px;
    width: 21.3px;
}
#slide{
    display: flex;
    flex-direction: row;
}
.slide-item{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}
#slide-left{
    margin: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: first baseline;
    gap: 50px;
}
#slide-text{
    max-width: 840px;
}
#slide-img{
    min-width: 920px;
    height: 667px;
}
#slide-img img{
    min-width: 920px;
    height: 667px;
}
#services{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-items: center;
    gap: 24px
}
#services-title{
    margin: 120px 80px 0 80px;
}
#servics-content{
    margin: 32px 80px 120px 80px;
    display: flex;
    flex-direction: row;
    gap: 64px;
}
.services-items{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 32px;
}
.service_icon{
    width: 88px;
    height: 88px;
}
.services-check{
    display: flex;
    flex-direction: column;
    align-items: first baseline;
    gap: 8px;
    width: 100%;
}
#extra{
    background-color: #F3EDE1;
    display: flex;
    flex-direction: row;
    align-items: center;
}
#extra-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: baseline;
    max-width: 1000px;
    margin: 120px 80px 120px 80px;
    gap: 32px;
}
#extra-textbox{
    display: flex;
    flex-direction: column;
    gap: 24px;
}
#extra-textbox-mini{
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.check-text{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
}
.check_icon{
    width: 21.5px;
    height: 21.5px;
    flex-shrink: 0;
}
#extra-img{
    margin-right: 80px;
}
#tariffs{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    margin: 120px;
    gap: 32px;
}
table, tr, td{
    border-collapse: separate;
    border-spacing: 0;
}
table tr td{
    border-right: 1px solid #9FA6AD;
    border-bottom: 1px solid #9FA6AD;
    border-collapse: separate;
}
td{
    width: 300px;
}
table tr td:first-child {
    border-left: 1px solid #bbb;
}
table tr:first-child td:first-child {
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    border-top: 1px solid #9FA6AD;
}

table tr:last-child td:first-child {
    border-bottom-left-radius: 6px;
}
table tr:last-child td:last-child {
    border-bottom-right-radius: 6px;
}
.table-tile{
    padding: 12px;
    background-color: #FEF3CE;
}
.table-content td{
    padding: 12px;
}
#order{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background-color: #F3EDE1;
}
#order-contact{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    gap: 24px;
    max-width: 728px;
    width: 100%;
    margin: 120px 80px 120px 80px;
}
#order-contact span{
    color: #0C0C0C;
}
.order_icon{
    width: 20px;
    height: 24px;
}
.order-link{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
#order-contact span a{
    color: #0C0C0C;
    text-decoration:none;
}
#order-frame{
    width: 100%;
    margin: 120px 80px 120px 80px;
    background-color: white;
    border-radius: 20px;
}
#order-table{
    margin: 50px;
}
label {
    font-weight: bold;
    display: block;
    margin-top: 10px;
}
input, textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.row {
    display: flex;
    gap: 20px;
}
.row div {
    flex: 1;
}
#footer{
    display: flex;
    flex-direction: column;
    gap: 88px;
    background-color: #1D1B20;
}
#footer-content{
    margin: 80px 180px 0 180px;
    display: flex;
    flex-direction: row; 
    justify-content: space-between;
}
#footer a{
    color: #FFFFFF;
    font-size: 18px;
}
#footer-logo{
    height: 40px;
    width: 229.6px;
}
#footer-left{
    display: flex;
    flex-direction: column;
    align-items: baseline;
    justify-content: space-between;
}
#footer-right{
    display: flex;
    flex-direction: column;
    gap: 26px;
}
#footer-address{
    display: flex;
    flex-direction: row;
    gap: 10px;
}
.footer-icon{
    width: 24px;
    height: 26px;
}
#footer-address-text{
    display: flex;
    flex-direction: column;
    gap: 5px
}
#legal-link{
    display: flex;
    flex-direction: row;
    gap: 88px;
}
#footer-contact{
    display: flex;
    flex-direction: row;
    gap: 80px;
}
.footer-link{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
}
#seperator{
    height: 1px;
    margin: 0 180px 131px 180px;
    background-color: #FFFFFF;
}

#impressum{
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin: 120px 80px;
}
#datenschutz{
    margin:20px 40px;
}
#datenschutz a{
    color: black;
}
#disclaimer{
    color: #0C0C0C;
}
#jobs{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    background-color: #F3EDE1;
}
#business{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    margin: 100px 0;
}
.business-content{
  margin: 32px 80px 0 80px;
  display: flex;
  flex-direction: row;
  gap: 64px;
  justify-content: center;
  width: 90%;
}
.business-items{
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
    gap: 32px;
    width: 30%;
    max-width: 550px;
    padding: 20px;
}
.business-icon {
  background-color: rgb(254, 243, 206);
  padding: 20px;
  border-radius: 20px;
}
.bseperator {
  background-color: black;
  width: 20px;
}
#company{
    display: flex;
    flex-direction: row;
    align-items: center;
    background-color: #F3EDE1;
}
#company-img{
    margin-left: 80px;
}
.addressv{
    font-size: 14px;
}
.price{
    margin: 10px 0;
}

@media only screen and (max-width: 900px){
    #logo_icon{
        height: 40px;
        width: 229.6px;
        margin-right: 0;
    }
    #menu{
        display: none;
        position: absolute;
        height: auto;
        flex-direction: column;
        top: 80px;
        width: 100%;
        align-items: baseline;
        background-color: #1D1B20;
        gap: 0;
    }
    #menu a{
        padding: 10px 20px;
        border: 1px solid white;
        width: 100%;
    }
    #hamburger-div{
        margin-left: auto;
        margin-right: 10px;
        display: flex;
    }
    #navbar{
        flex-wrap: wrap;
    }
    #nav_call{
        margin-right: 0;
        gap: 5px;
        order: -1;
        width: 100%;
    }
        .title-size {
        font-size: 40px;
    }
    #slide-img{
        display: none;
    }
    .slide-item{
        background-image: url("img/taxi_light_m.webp");
        background-size: cover;
        background-position: inherit;
     }
     #slide-text{
        background-color: rgba(255, 255, 255, 0.8);
        padding: 10px;
        border-radius: 20px;
     }
     #services-title{
        margin: 20px;
     }
     #servics-content{
        flex-direction: column;
        margin: 20px;
     }
     #extra-img{
        display: none;
     }
     #order{
        flex-direction: column;
     }
     #order-contact{
        margin: 20px;
        width: auto;
     }
     #order-frame{
        margin: 20px;
     }
     #order-table {
        margin: 20px;
      }
     #extra-text{
        margin: 20px
     }
     #tariffs{
        margin: 20px;
     }
     #footer{
        gap: 0;
     }
     #footer-content{
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap:32px;
        margin:20px
     }
     #footer-left{
        gap:32px
     }
     #footer-contact{
        flex-direction: column;
        gap:20px
     }
     #seperator{
        margin: 20px
     }
     #datenschutz{
        margin: 0px;
     }
     #jobs{
        flex-direction: column;
     }
     #jobs-left{
        margin: 20px;
     }
     #company{
        flex-direction: column-reverse;
     }
     #company-img {
        margin: 10px;
    }
    #company-image{
        width: 100%;
    }
    .business-content {
        margin: 0;
        flex-direction: column;
        width: 100%;
        align-items: center;
    }
    .business-items{
        align-items: center;
        width: 100%;
    }
    .bseperator {
        background-color: black;
        width: 100%;
        height: 5px;
    }
}

/* ===== Typografie-Optimierung 2026-10 (Desktop, Tablet, Handy) ===== */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;}
body{min-width:320px;color:#1D1B20;font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-kerning:normal;}
.title-size{font-family:"DM Sans",sans-serif;font-weight:700 !important;font-size:clamp(30px, 2.2rem + 1.6vw, 54px);line-height:1.12;letter-spacing:-0.02em;text-wrap:balance;}
.text-size{font-size:clamp(17px, 1rem + 0.35vw, 20px);line-height:1.6;}
.minitext-size,.check-text{font-size:clamp(16px, 0.95rem + 0.15vw, 17px);line-height:1.55;}
.dm-sans-medium.text-size,.dm-sans-bold{letter-spacing:-0.005em;line-height:1.35;}
.SourceSans-regular{text-wrap:pretty;}
.btn a,.btn{font-family:"DM Sans",sans-serif;font-weight:700;letter-spacing:0.01em;}
.btn a{font-size:clamp(17px, 1rem + 0.4vw, 21px);}
#navbar,.nav_font{font-family:"DM Sans",sans-serif;font-weight:500;font-size:clamp(17px, 0.9rem + 0.5vw, 20px);}
td,th{font-size:clamp(15px, 0.9rem + 0.15vw, 16px);line-height:1.45;}
label{font-family:"DM Sans",sans-serif;font-weight:700;font-size:15px;}
input,textarea,select{font-family:"Source Sans 3",sans-serif;font-size:16px;line-height:1.4;}
#footer a,#footer span{font-size:clamp(16px, 0.95rem + 0.2vw, 18px);line-height:1.6;}
.addressv{font-size:15px;}
#order-contact span:not(.title-size),#order-contact a{font-size:clamp(16px, 0.95rem + 0.2vw, 18px);}
@media only screen and (max-width:900px){
  .title-size{font-size:clamp(26px, 1rem + 4vw, 36px);}
}
@media only screen and (max-width:480px){
  body{font-size:17px;}
  .btn{height:auto;min-height:52px;padding:12px 24px;}
}

/* ===== Inhalte & Conversion 2026-10 ===== */
h1,h2,h3{margin:0;}
h1.title-size,h2.title-size{color:#1D1B20;}
.hero-kicker{display:block;font-family:"DM Sans",sans-serif;font-weight:700;font-size:clamp(14px, 0.8rem + 0.2vw, 16px);letter-spacing:0.08em;text-transform:uppercase;color:#6B5A1E;margin-bottom:14px;}
.eyebrow{font-size:clamp(14px, 0.8rem + 0.2vw, 16px);letter-spacing:0.08em;color:#6B5A1E;}
.service-title{font-family:"DM Sans",sans-serif;font-weight:700;font-size:clamp(18px, 1rem + 0.3vw, 20px);line-height:1.3;text-align:center;}
#servics-content{align-items:flex-start;}
.services-items{justify-content:flex-start;flex:1 1 0;}
.service_icon{flex-shrink:0;}
.hero-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:8px;}
.cta{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 28px;border-radius:30px;font-family:"DM Sans",sans-serif;font-weight:700;font-size:clamp(17px, 1rem + 0.3vw, 20px);text-decoration:none;transition:transform .15s ease, box-shadow .15s ease;}
a.cta:link,a.cta:visited{color:#0C0C0C;}
.cta-primary{background:#FDC921;box-shadow:0 4px 14px rgba(253,201,33,.45);}
.cta-secondary{background:transparent;border:2px solid #1D1B20;}
.cta:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(0,0,0,.12);}
.cta-icon{width:22px;height:22px;flex-shrink:0;}
#usp{list-style:none;margin:0;padding:22px 80px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 26px;background:#1D1B20;color:#fff;font-family:"Source Sans 3",sans-serif;font-size:clamp(15px, 0.9rem + 0.2vw, 17px);}
#usp li{display:flex;align-items:center;gap:8px;}
#usp li::before{content:"";width:8px;height:8px;border-radius:50%;background:#FDC921;flex-shrink:0;}
#usp strong{font-family:"DM Sans",sans-serif;font-weight:700;color:#FDC921;}
#ber{max-width:1000px;margin:0 auto;padding:110px 80px;display:flex;flex-direction:column;gap:22px;}
#ber p{margin:0;}
.ber-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px;}
.ber-list li{position:relative;padding-left:32px;}
.ber-list li::before{content:"";position:absolute;left:0;top:.35em;width:20px;height:20px;border-radius:50%;background:#FDC921 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat;}
#faq{max-width:1000px;margin:0 auto;padding:40px 80px 110px;display:flex;flex-direction:column;gap:28px;}
.faq-list{display:flex;flex-direction:column;border-top:1px solid #E3DCCB;}
.faq-list details{border-bottom:1px solid #E3DCCB;padding:18px 4px;}
.faq-list summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px;font-size:clamp(17px, 1rem + 0.25vw, 19px);line-height:1.35;}
.faq-list summary::-webkit-details-marker{display:none;}
.faq-list summary::after{content:"+";font-size:26px;line-height:1;color:#1D1B20;transition:transform .2s;}
.faq-list details[open] summary::after{transform:rotate(45deg);}
.faq-list p{margin:12px 0 0;font-size:clamp(16px, 0.95rem + 0.2vw, 18px);line-height:1.6;color:#3A3740;}
#footer-contact{display:flex;flex-direction:column;align-items:flex-start;gap:10px;}
#footer-contact .footer-link{display:flex;align-items:center;gap:8px;white-space:nowrap;}
.footer-247{color:#FDC921;font-family:"DM Sans",sans-serif;font-weight:700;}
#call-sticky{display:none;}
@media only screen and (max-width:900px){
  #usp{padding:18px 20px;gap:10px 20px;justify-content:flex-start;}
  #ber{padding:70px 24px;}
  #faq{padding:30px 24px 70px;}
  .hero-ctas{width:100%;}
  .hero-ctas .cta{flex:1 1 220px;}
  #call-sticky{display:flex;position:fixed;left:12px;right:12px;bottom:12px;z-index:999;align-items:center;justify-content:center;gap:10px;min-height:56px;border-radius:30px;background:#FDC921;font-family:"DM Sans",sans-serif;font-weight:700;font-size:18px;box-shadow:0 6px 20px rgba(0,0,0,.25);padding-bottom:env(safe-area-inset-bottom);transform:translateY(160%);transition:transform .25s ease;}
  #call-sticky.show{transform:none;}
  a#call-sticky:link,a#call-sticky:visited{color:#0C0C0C;}
  body{padding-bottom:84px;}
}

/* ===== Layout-Fixes 2026-10: kein seitliches Verrutschen ===== */
html,body{max-width:100%;overflow-x:clip;}
@media only screen and (min-width:901px){
  #slide-img{min-width:0;height:min(667px, 52vw);flex:1 1 55%;}
  #slide-img img{min-width:0;width:100%;height:100%;object-fit:cover;display:block;}
  #extra-text{flex:1 1 0;min-width:0;margin:120px 48px 120px 80px;}
  #extra-img{flex:0 1 45%;min-width:0;}
  #company-img{flex:0 1 45%;min-width:0;}
  #company-image{width:100%;height:auto;display:block;}
  #extra-img img{width:100%;height:auto;display:block;}
}
.business-content{width:100%;max-width:1500px;margin:32px auto 0;padding:0 40px;box-sizing:border-box;}
.business-content{flex-wrap:wrap;gap:32px;}
.business-items{box-sizing:border-box;min-width:0;flex:1 1 280px;width:auto;}
@media only screen and (max-width:900px){
  .business-content{padding:0 16px;}
  .business-items{width:100%;max-width:none;flex:none;}
}
@media only screen and (min-width:901px) and (max-width:1180px){
  #menu{gap:18px !important;}
  #navbar,.nav_font,#menu a{font-size:16px !important;}
  #logo_icon{margin-right:20px !important;}
  #extra-text{margin:80px 32px 80px 40px;}
  #company-img{margin-left:32px;}
}

/* Google-Maps-Einwilligung im Anfrageformular */
.maps-consent{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;margin-top:10px;padding:12px 14px;background:#FFF8E1;border:1px solid #F3DE9A;border-radius:10px;font-size:15px;line-height:1.45;color:#3A3740;}
.maps-consent a:link,.maps-consent a:visited{color:#1D1B20;text-decoration:underline;}
.maps-consent button{font-family:"DM Sans",sans-serif;font-weight:700;font-size:15px;background:#FDC921;border:0;border-radius:20px;padding:8px 16px;cursor:pointer;color:#0C0C0C;}

/* ===== Hallo Taxi Berlin 2026-10-18: Logo mit Zusatz BERLIN (Seitenverhaeltnis 454.1 x 59.2) ===== */
#logo_icon,#footer-logo{width:306.8px;height:40px;}
@media only screen and (max-width:900px){
  #logo_icon{margin-left:16px;width:306.8px;height:40px;}
}
@media only screen and (max-width:420px){
  #logo_icon{width:245.4px;height:32px;}
}
/* ===== Hallo Taxi Berlin 2026-10-18 (2): Bild-Balken statt Potsdam-Fotos, zweite Tariftabelle ===== */
.img-bar{position:relative;width:100%;aspect-ratio:728/515;border-radius:20px;overflow:hidden;background:#1D1B20;}
.img-bar::before,.img-bar::after{content:"";position:absolute;left:0;right:0;height:48px;
  background:conic-gradient(#FDC921 25%,#1D1B20 0 50%,#FDC921 0 75%,#1D1B20 0) 0 0/48px 48px;}
.img-bar::before{top:15%;}
.img-bar::after{bottom:15%;}
#extra-img .img-bar{min-width:320px;}
@media only screen and (max-width:900px){#company-img{width:calc(100% - 20px);} .img-bar{aspect-ratio:auto;height:144px;}}
#table-berlin{margin-bottom:0;}
.tariff-sub{margin:8px 0 0;text-align:center;}
.tariff-note{color:#3A3740;text-align:center;}
