*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    min-height:100%;
    background:#020617;
}

html,body{
    font-family:Arial,sans-serif;
    background:transparent;
    color:white;
}

body{
    min-height:100vh;
    position:relative;
    overflow-x:hidden;
}

body.drawer-open,
body.ziel-modal-open{
    overflow:hidden;
}


.main-img-1{
    position:fixed !important;
    display:block;
    overflow:hidden;
    top:0;
    left:0;
    right:0;
    bottom:0;
    width:100vw;
    height:100vh;
    background-image:url("/imgs/sheshagirikm-sun-365983?v=1f");
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    transition:
        background-position 1s ease-in-out,
        opacity 1s ease-in-out;
    z-index:-1;
    pointer-events:none;
}

.main-img-1:before{
    content:"";
    position:absolute;
    inset:0;
    display:block;
    background-color:rgb(0 0 0 / 15%);
    pointer-events:none;
}
.logo{
  display:flex;
  background:transparent;
  flex-direction:row;
  padding:1vw;
  margin-top:0vh;
}
.logoimg{
  height:10.7vw;
  width:10.7vw;
  background:transparent;
  border-radius:50%;
  overflow:clip;
}
.logoimg img{
  object-fit:cover;
  height:100%;
  width:100%;
}
.logoname{
  display:flex;
  flex-direction:column;
  height:100%;
  margin-top:1vw;
  background:transparent;
  padding-left:2.2vw;
}
.logoname p:first-child{
  font-weight:500;
}
.logoname p{
  font-size:3.7vw;
  margin:0;
  color:#f4f4f4;
  line-height:1.35;
  font-weight:400;
}
.fontm{
    font-family:"Figtree";
    font-weight:500;
    font-style:normal;
}


header{
    position:relative;
    display:flex;
    top:0;
    z-index:100;
    width: 100vw;
    padding:10px;
    background: transparent;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
     border-bottom:1px solid rgb(255 255 255 / 38%);
}
.lines{
        display:none;
        position:relative;
        height:17vw;
        width:6.5vw;
        left:90%;
        top:0vh;
        background-color:transparent;
        z-index:4;
        flex-direction:column;
    }
.line{
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  background-color:transparent;
  border-radius:60px;
  z-index:-2;
}
.line::before{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:-50%;
  background-color:#e4e4e4;
  border-radius:60px;
  z-index:2
}
.line::after{
  content:"";
  position:absolute;
  display:flex;
  height:100%;
  width:100%;
  top:300%;
  background-color:#e4e4e4;
  border-radius:60px;
}
.linefunc{
}
.linefunc::before{
  top:-50%;
  animation:linefuncbe 0.3s;
  animation-fill-mode:forwards;
}
.linefunc::after{
  top:300%;
  animation:linefuncaf 0.3s;
  animation-fill-mode:forwards;
}
@keyframes linefuncbe{
  0%{
    display:flex;
    top:-50%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:-50%;
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transform:rotate(0deg);
  }
}
@keyframes linefuncaf{
  0%{
    top:300%;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    transform:rotate(0deg);
  }
  100%{
    top:300%;
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
    transform:rotate(0deg);
  }
}
  .menu{
          display: flex;
          position: fixed;
          height: 100%;
          width: 100%;
          left: 0%;
          top: 0%;
          background-color: rgba(0, 0, 0, 0.5);
          backdrop-filter:blur(10px);
	      -webkit-backdrop-filter:blur(10px);
          flex-direction: column;
          overflow:hidden;
          clip-path: circle(0vh at 90% -20%);
          transition: all 0.4s ease-out;
          pointer-events: none;
          z-index:4;
          animation: menuactivere 0.4s;
          animation-fill-mode: forwards;
      }
.menuactive{
      animation: menuactive 0.4s;
      animation-fill-mode: forwards;
      animation-delay:0.1s;
      clip-path: circle(0vh at 90% -20%);
      pointer-events: all;
      z-index:4;
      
}
@keyframes menuactive{
  0%{
  }
  100%{
    clip-path: circle(120vh at 90% -10%);
  }
}
@keyframes menuactivere{
  0%{
    clip-path: circle(120vh at 90% -10%);
  }
  100%{
    clip-path: circle(0vh at 90% -20%);
  }
}
.menucross{
        display:flex;
        position:fixed;
        height:17vw;
        width:7vw;
        left:90%;
        top:6vh;
        background-color:transparent;
        z-index:123;
        flex-direction:column;
}
.menucross::before{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#e4e4e4;
  border-radius:60px;
  transform:rotate(-45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucross::after{
  content:"";
  position:absolute;
  display:flex;
  height:4.5%;
  width:100%;
  top:10%;
  background-color:#e4e4e4;
  border-radius:60px;
  transform:rotate(45deg);
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  animation:menucross 0.5s;
  animation-fill-mode:forwards;
}
.menucrossactive{
}
.menucrossactive::before{
  transform:rotate(-45deg);
  animation:menucrossacbe 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
.menucrossactive::after{
  transform:rotate(45deg);
  animation:menucrossacaf 0.5s;
  animation-fill-mode:forwards;
  animation-delay:0.4s;
}
@keyframes menucrossacbe{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
@keyframes menucrossacaf{
  0%{
  }
  100%{
    clip-path: polygon(100% 0, 0 0, 0 100%, 100% 100%);
  }
}
.menuitems{
    position:fixed;
    display:flex;
    flex-direction:column;
  background-color:transparent;
  margin-top:13svh;
  width:93%;
}
.menuitems a{
            text-decoration:none;
            transition:1s;
            color: #e4e4e6;
            visibility: visible;  
            font-weight:700;
            font-size: 8vw;
            margin-left:0.5%;
            width:100%;
  padding-left:0.3em;
  padding-top:8vw;
}
.menuitems a::before{
  content:"+";
  font-weight:400;
  font-size:4.5vw;;
  padding-right:0.1em;
}
.menuitems a::after{
  content:"";
  display:flex;
  position:absolute;
  height:0.3vw;
  width:100%;
  background-color:#e4e4e6;
  margin-top:0.1em;
}
h1{
    font-size:28px;
}

.library-books-section{
    display:block;
    margin-top:18px;
}

.library-books-shell{
    width:100%;
}

.library-control-panel{
    display:grid;
    grid-template-columns:minmax(190px, 0.34fr) minmax(0, 1.66fr);
    gap:12px;
    align-items:stretch;
    padding:12px;
    border:1px solid rgb(255 255 255 / 12%);
    background:#00000030;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.library-control-heading{
    min-height:112px;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:12px 14px;
    border-right:1px solid rgba(255,255,255,0.14);
}

.library-eyebrow{
    width:max-content;
    margin-bottom:8px;
    padding:6px 9px;
    border-radius:999px;
    background:rgb(255 255 255 / 10%);
    border:1px solid rgb(255 255 255 / 15%);
    color:rgb(255 255 255 / 76%);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

.library-control-heading h1{
    margin:0;
    color:rgb(255 255 255 / 96%);
    font-size:clamp(34px, 4.2vw, 58px);
    line-height:0.92;
    font-weight:950;
    letter-spacing:-0.075em;
}

.library-control-heading p{
    max-width:300px;
    margin:8px 0 0;
    color:rgb(255 255 255 / 66%);
    font-size:12px;
    line-height:1.3;
    font-weight:700;
    letter-spacing:-0.02em;
}

.library-control-tools{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:9px;
    min-width:0;
    padding:10px 12px;
}

.filter-box{
    display:flex;
    align-items:flex-end;
    gap:9px;
    flex-wrap:wrap;
}

.library-filter-box{
    display:grid;
    grid-template-columns:repeat(12, minmax(0, 1fr));
    align-items:end;
    gap:8px;
    width:100%;
}

.filter-field{
    min-width:0;
    display:grid;
    gap:5px;
    grid-column:span 3;
}

.filter-field-search{
    grid-column:1 / -1;
}

.filter-field-author{
    grid-column:span 5;
}

.filter-field-small{
    grid-column:span 2;
}

.filter-field label{
    color:rgb(255 255 255 / 64%);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.filter-box input[type="search"],
select{
    width:100%;
    height:38px;
    background:rgba(17,24,39,0.82);
    color:white;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:12px;
    padding:0 12px;
    outline:none;
    font-size:13px;
    font-weight:750;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.filter-box input[type="search"]{
    height:42px;
    font-size:15px;
    padding:0 14px;
}

.filter-box input[type="search"]:focus,
select:focus{
    border-color:rgba(85,197,238,0.85);
    box-shadow:0 0 0 3px rgba(0,143,207,0.18);
}

.filter-box input[type="search"]::placeholder{
    color:rgba(255,255,255,0.48);
}

.filter-box select{
    cursor:pointer;
}

.filter-submit,
.filter-reset{
    grid-column:span 1;
    min-width:0;
    height:38px;
    border-radius:12px;
    padding:0 13px;
    cursor:pointer;
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.02em;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.filter-submit{
    background:#008FCF;
    color:white;
    border:0;
    box-shadow:0 14px 30px rgba(0,143,207,0.22);
}

.filter-reset{
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.82);
    border:1px solid rgba(255,255,255,0.16);
    box-shadow:none;
}

.filter-submit:hover{
    background:#0a9cdc;
    transform:translateY(-1px);
}

.filter-reset:hover{
    background:rgba(255,255,255,0.14);
    border-color:rgba(255,255,255,0.28);
    transform:translateY(-1px);
}

.library-page-info{
    display:flex;
    gap:7px;
    flex-wrap:wrap;
    align-items:center;
    color:rgba(255,255,255,0.72);
}

.library-result-pill{
    display:inline-flex;
    align-items:center;
    min-height:30px;
    padding:7px 10px;
    border-radius:999px;
    background:rgb(255 255 255 / 10%);
    border:1px solid rgb(255 255 255 / 13%);
    color:rgb(255 255 255 / 72%);
    font-size:11px;
    line-height:1.15;
    font-weight:800;
}

.library-result-pill strong{
    color:white;
    font-weight:950;
}

.books-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
    gap:24px;
    padding:28px 0 30px;
}

.book-card{
    background:#00000030;
    border-radius:0px;
    overflow:hidden;
    transition:0.25s;
    border:1px solid rgb(255 255 255 / 12%);
    display:flex;
    flex-direction:column;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}


.book-cover{
    position:relative;
    min-height:232px;
    display:flex;
    padding:32px 30px 30px 40px;
    background:linear-gradient(70deg, #062441, #0d4370);
    align-items:start;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
}

.book-cover:before{
    content:"";
    position:absolute;
    inset:0;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.14), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,0.10), transparent 44%);
    pointer-events:none;
}

.book-cover-number{
    position:absolute;
    top:18px;
    right:18px;
    z-index:2;
    min-width:48px;
    padding: 10px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:0px;
    background:#FAF7F5;
}

.book-cover-number strong{
    color:#546132;
    font-size:25px;
    line-height:1;
    font-weight:950;
    letter-spacing:-0.06em;
}

.book-cover-title{
    position:relative;
    z-index:1;
    margin-top:56px;
    padding-right:52px;
}

.book-cover h3{
    letter-spacing:-0.02em;
    font-size:30px;
    font-weight:900;
}

.book-cover-author{
    position:relative;
    z-index:1;
    margin-top:10px;
    background:#46808850;
    border-radius:999px;
    padding:6px 10px;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    font-size:14px;
    color:rgb(255 255 255);
}

.book-content{
    padding:25px;
    display:flex;
    flex-direction:column;
    gap:15px;
    flex:1;
    padding-left:40px;
}

.book-desc{
    color:#ffffff;
    max-height:90px;
    overflow:hidden;
}

.book-desc p{
    font-size:16px;
    line-height:1.4;
}

.tags{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
}

.tag{
    background:#46808850;
    border-radius:999px;
    padding:6px 10px;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
}

.tag p{
    font-size:14px;
    font-weight:500;
}

.actions{
    display:flex;
    gap:15px;
    margin-top:0px;
}

.show-btn,
.read-btn{
    flex:1;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    text-decoration:none;
    border:none;
    border-radius:0px;
    padding:14px;
    font-size:16px;
    font-weight:bold;
    cursor:pointer;
}

.read-btn{
    background:#008FCF;
    color:white;
}

.empty{
    text-align:center;
    padding:80px 20px;
    color:#94a3b8;
}

.book-meta{
    color:#94a3b8;
    font-size:14px;
}

.beschreibung-section{
    padding-bottom:10vh;
}

.book-small-meta{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
    margin-bottom:12px;
}

.book-small-meta span{
    display:inline-flex;
    align-items:center;
    border-radius:999px;
    padding:6px 10px;
    font-size:13px;
    background:rgba(255,255,255,0.65);
    color:rgba(0,0,0,0.68);
    border:1px solid rgba(0,0,0,0.07);
}

.open-drawer-btn{
    border:0;
    cursor:pointer;
}

.books-grid.books-disappear{
    pointer-events:none;
}

.books-grid.books-disappear .book-card{
    animation:bookCardDisappear 330ms cubic-bezier(0.63, -0.16, 0.26, 0.96) forwards;
}

.books-grid.books-return .book-card{
    animation:bookCardReturn 330ms cubic-bezier(0.63, -0.16, 0.26, 0.96) forwards;
}

@keyframes bookCardDisappear{
    from{opacity:1;}
    to{opacity:0;}
}

@keyframes bookCardReturn{
    from{opacity:0;}
    to{opacity:1;}
}

.pagination-wrap{
    width:min(1180px, calc(100% - 32px));
    margin:20px auto 60px;
    display:flex;
    justify-content:center;
}

.pagination{
    display:flex;
    gap:8px;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
}

.pagination a,
.pagination span{
    min-width:42px;
    height:42px;
    padding:0 14px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    text-decoration:none;
    border:1px solid rgba(255,255,255,0.45);
    background:rgba(255,255,255,0.45);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    color:rgba(0,0,0,0.8);
}

.pagination .active{
    background:rgba(0,0,0,0.85);
    color:#fff;
}

.pagination .dots{
    border-color:transparent;
    background:transparent;
}

/* Main Ziele hero */

.main-ziel-hero{
    width: 95%;
    margin: auto;
    border-bottom:1px solid rgba(255,255,255,0.16);
    overflow:hidden;
}

.main-ziel-hero-shell{
    width:min(1500px, 100%);
    margin:0 auto;
}

.main-ziel-hero-heading{
    min-height:165px;
    padding: 25px 25px 18px;
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(300px, 0.75fr);
    gap:26px;
    align-items:end;
    border-bottom:1px solid rgba(255,255,255,0.15);
}

.main-ziel-brand{
    display:inline-flex;
    margin-bottom:14px;
    color:rgb(255 255 255 / 78%);
    font-size:15px;
    line-height:1;
    font-weight:850;
    letter-spacing:-0.02em;
}

.main-ziel-hero-heading h2{
    margin:0;
    color:rgb(255 255 255 / 95%);
        font-size: clamp(34px, 4.2vw, 58px);
    line-height:0.92;
    font-weight:950;
    letter-spacing:-0.075em;
}

.main-ziel-hero-heading p{
    max-width:500px;
    margin:0 0 8px;
    color:rgb(255 255 255 / 80%);
    font-size:clamp(14px, 1.2vw, 17px);
    line-height:1.35;
    font-weight:700;
    letter-spacing:-0.035em;
}

.main-ziel-swiss-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    min-height:250px;
}

.main-ziel-left-panel,
.main-ziel-right-panel{
    position:relative;
    padding:20px 28px 26px;
}

.main-ziel-left-panel{
    border-right:1px solid rgba(255,255,255,0.16);
}

.main-ziel-section-label{
    display:block;
    margin-bottom:14px;
    color:rgb(255 255 255 / 70%);
    font-size:15px;
    line-height:1;
    font-weight:850;
    letter-spacing:-0.03em;
}

.main-ziel-slider{
    width:100%;
    max-width:600px;
    display:grid;
    align-items:start;
}

.main-ziel-slide{
    grid-area:1 / 1;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:0;
    animation:none !important;
    transition:none !important;
    transform:none !important;
    will-change:auto;
}

.main-ziel-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

.main-ziel-feature-card{
    display:grid;
    grid-template-columns:126px minmax(0,1fr);
    gap:14px;
    align-items:start;
    min-height:150px;
    padding:14px;
    border-radius:26px;
    background:#00000030;
    border:1px solid rgb(255 255 255 / 12%);
    box-shadow:0 18px 48px rgba(0,0,0,0.18);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.main-ziel-percent-box{
    width:126px;
    height:126px;
    border-radius:26px;
    background:linear-gradient(135deg, #0f766e, #14b8a6) !important;
    display:flex;
    align-items:center;
    justify-content:center;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.18);
}

.main-ziel-percent-box strong{
    color:white;
    font-size:36px;
    line-height:1;
    font-weight:950;
    letter-spacing:-0.075em;
}

.main-ziel-feature-content{
    min-width:0;
    display:flex;
    flex-direction:column;
    min-height:126px;
    margin-top:3px;
}

.main-ziel-card-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:12px;
    margin-bottom:6px;
}

.main-ziel-card-kicker{
    display:inline-flex;
    width:max-content;
    max-width:100%;
    padding:6px 9px;
    border-radius:999px;
    background:rgb(255 255 255 / 10%);
    border:1px solid rgb(255 255 255 / 15%);
    color:rgb(255 255 255 / 82%);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.main-ziel-card-count{
    flex:0 0 auto;
    color:rgb(255 255 255 / 56%);
    font-size:17px;
    line-height:1;
    font-weight:950;
    letter-spacing:-0.04em;
}

.main-ziel-feature-content h3{
    margin:0;
    color:rgb(255 255 255 / 95%);
    font-size:clamp(20px, 2vw, 26px);
    line-height:1.05;
    font-weight:950;
    letter-spacing:-0.055em;
    overflow-wrap:anywhere;
}

.main-ziel-author{
    margin:6px 0 0;
    color:rgb(255 255 255 / 62%);
    font-size:11.5px;
    line-height:1.35;
}

.main-ziel-progress-copy{
    display:grid;
    gap:3px;
    margin-top:auto;
    padding-top:10px;
    margin-bottom:8px;
}

.main-ziel-progress-copy strong{
    color:rgb(255 255 255 / 82%);
    font-size:11.5px;
    line-height:1.2;
    font-weight:950;
}

.main-ziel-progress-copy span{
    color:rgb(255 255 255 / 62%);
    font-size:10.5px;
    line-height:1.35;
}

.main-ziel-progress-track{
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,0.14);
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.10);
}

.main-ziel-progress-fill{
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #3ecf8e, #b9ffd9);
}

.main-ziel-feature-actions{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:11px;
}

.main-ziel-order-btn,
.main-ziel-edit-btn{
    min-height:32px;
    padding:0 13px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    cursor:pointer;
    font-size:11px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:-0.02em;
    transition:
        transform 180ms ease,
        background 180ms ease,
        border-color 180ms ease;
}

.main-ziel-order-btn{
    width:100%;
    color:#000000;
    background:rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 74%);
}

.main-ziel-edit-btn{
    width:100%;
    color:rgb(255 255 255 / 80%);
    background:rgba(255,255,255,0.08);
    border:1px solid rgb(255 255 255 / 18%);
}

.main-ziel-order-btn:hover,
.main-ziel-edit-btn:hover{
    transform:translateY(-1px);
    background:rgba(255,255,255,0.12);
}

.main-ziel-carousel-nav{
    width:100%;
    max-width:600px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    margin-top:16px;
}

.main-ziel-arrow{
    width:44px;
    height:44px;
    border-radius:999px;
    border:0;
    background:rgb(255 255 255 / 95%);
    color:#20150f;
    cursor:pointer;
    font-size:23px;
    line-height:1;
    font-weight:950;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-shadow:0 12px 26px rgba(0,0,0,0.16);
    transition:transform 180ms ease, background 180ms ease;
}


.main-ziel-dots{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
}

.main-ziel-dot{
    width:8px;
    height:7px;
    border-radius:999px;
    border:0;
    background:rgba(255,255,255,0.42);
    cursor:pointer;
    transition:width 180ms ease, background 180ms ease;
}

.main-ziel-dot.is-active{
    width:22px;
    background:#b9ffd9;
}

.main-ziel-intro-card{
    min-height:160px;
    max-width:560px;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:24px;
    padding-top:30px;
}

.main-ziel-intro-card p{
    margin:0;
    color:rgb(255 255 255 / 92%);
    font-size:clamp(20px, 2.45vw, 30px);
    line-height:1.08;
    font-weight:850;
    letter-spacing:-0.055em;
}

.main-ziel-down-arrow{
    flex:0 0 auto;
    color:rgb(255 255 255 / 92%);
    font-size:31px;
    line-height:1;
    font-weight:300;
}


/* Bundesbibliothek Empfehlungen */

.bundesbibliothek-hero{
    min-height:100svh;
    margin-top:0;
    display:flex;
    align-items:stretch;
}

.bundesbibliothek-shell{
    min-height:100svh;
    display:flex;
    flex-direction:column;
}

.bundesbibliothek-heading{
    background:transparent;
}

.bundesbibliothek-heading p{
    max-width:440px;
    justify-self:end;
}

.bundesbibliothek-grid{
    flex:1;
}

.bundesbibliothek-feature-card{
    grid-template-columns:126px minmax(0,1fr);
}

.bundesbibliothek-info-badge{
    position:relative;
    width:max-content;
    height:100%;
    overflow:hidden;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
    padding:15px;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.30), transparent 28%),
        linear-gradient(135deg, rgba(255,247,223,0.96), rgba(20,184,166,0.54));
}

.bundesbibliothek-info-badge:before{
    content:"";
    position:absolute;
    inset:auto -18px -38px 30px;
    height:96px;
    border-radius:999px 999px 0 0;
    background:rgba(32,21,15,0.12);
    transform:rotate(-12deg);
}

.bundesbibliothek-info-badge span{
    position:relative;
    z-index:1;
    color:#ffffff;
    font-size:clamp(17px, 1.6vw, 24px);
    line-height:0.98;
    font-weight:950;
    letter-spacing:-0.06em;
    overflow-wrap:anywhere;
}

.bundesbibliothek-feature-content{
    min-height:126px;
}

.bundesbibliothek-language-pills{
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    margin-top:10px;
}

.bundesbibliothek-language-pill{
    display:inline-flex;
    align-items:center;
    min-height:24px;
    padding:5px 8px;
    border-radius:999px;
    background:rgb(255 255 255 / 10%);
    border:1px solid rgb(255 255 255 / 14%);
    color:rgb(255 255 255 / 72%);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.06em;
}

.bundesbibliothek-language-pill.is-primary{
    background:rgb(255 247 223 / 92%);
    border-color:rgb(255 247 223 / 76%);
    color:#20150f;
}

.bundesbibliothek-feature-actions{
    margin-top:auto;
    padding-top:12px;
}

.bundesbibliothek-excerpt-slider{
    width:100%;
    max-width:620px;
    display:grid;
    align-items:start;
}

.bundesbibliothek-excerpt-slide{
    grid-area:1 / 1;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:0;
    animation:none !important;
    transition:none !important;
    transform:none !important;
    will-change:auto;
}

.bundesbibliothek-excerpt-slide.is-active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    z-index:2;
}

.bundesbibliothek-excerpt-card{
    min-height:190px;
    display:flex;
    align-items:flex-start;
    justify-content:flex-start;
    gap:24px;
    padding:26px;
    padding-left:0;
    border-radius:26px;
    background:transparent;
    backdrop-filter:blur(0px);
    -webkit-backdrop-filter:blur(0px);
}


/* Shared glass cards: keep the blur stable while slides switch. */
.main-ziel-feature-card,
.bundesbibliothek-excerpt-card{
    background-clip:padding-box;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .main-ziel-feature-card,
    .bundesbibliothek-excerpt-card{
        background:rgb(0 0 0 / 42%);
    }
}

.bundesbibliothek-excerpt-text{
    text-align:start;
    width:100%;
    padding: 30px 30px 15px 20px;
    background:rgb(255 255 255);
    font-style:italic;
    margin:0;
    color:rgb(0 0 0 / 95%);
    font-size:clamp(20px, 2.2vw, 29px);
    line-height:1.13;
    font-weight:850;
    letter-spacing:-0.055em;
}

.bundesbibliothek-carousel-nav{
    justify-content:center;
}

/* Drawer */

.drawer-overlay{
    position:fixed;
    inset:0;
    z-index:4000;
    opacity:0;
    pointer-events:none;
    background:#00000040;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:
        opacity 330ms cubic-bezier(0.63, -0.16, 0.26, 0.96),
        backdrop-filter 330ms cubic-bezier(0.63, -0.16, 0.26, 0.96),
        -webkit-backdrop-filter 330ms cubic-bezier(0.63, -0.16, 0.26, 0.96);
}

.drawer-overlay.is-open{
    opacity:1;
    pointer-events:auto;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    background:#00000040;
}

.book-drawer{
    position:fixed;
    top:0;
    right:0;
    z-index:4100;
    width:min(590px, 100%);
    height:100vh;
    transform:translateX(110%);
    transition:transform 430ms cubic-bezier(0.63, -0.16, 0.26, 0.96);
    border-left:1px solid rgba(255,255,255,0.55);
    box-shadow:-30px 0 90px rgba(0,0,0,0.22);
    display:flex;
    flex-direction:column;
    overflow:hidden;
}

.book-drawer.is-open{
    transform:translateX(0);
}

.drawer-header{
    display:flex;
    justify-content:space-between;
    gap:18px;
    padding:28px 28px 20px;
    border-bottom:1px solid rgba(255,255,255,0.45);
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
}

.drawer-title{
    font-weight:900;
    margin:0;
    font-size:clamp(26px, 4vw, 40px);
    line-height:1.08;
    letter-spacing:-0.02em;
    color:rgb(255 255 255 / 95%);
}

.drawer-author{
    margin:10px 0 0;
    color:rgb(255 255 255 / 88%);
}

.drawer-close{
    width:44px;
    height:44px;
    flex:0 0 auto;
    border:1px solid rgba(255,255,255,0.58);
    background:rgba(255,255,255,0.42);
    border-radius:999px;
    font-size:26px;
    line-height:1;
    cursor:pointer;
    color:rgba(0,0,0,0.74);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.drawer-body{
    padding:26px 28px 36px;
    overflow:auto;
}

.drawer-section{
    margin-bottom:35px;
}

.drawer-section h4{
    text-transform:uppercase;
    margin:0 0 12px;
    font-size:14px;
    background:#46808850;
    border-radius:999px;
    padding:6px 10px;
    width:max-content;
    backdrop-filter:blur(30px);
    -webkit-backdrop-filter:blur(30px);
    color:rgb(255 255 255 / 88%);
}

.drawer-language-buttons{
    display:grid;
    gap:10px;
}

.drawer-language-btn{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:14px;
    font-weight:700;
    padding:15px 17px;
    border-radius:0px;
    text-decoration:none;
    color:rgb(255 255 255 / 88%);
    background:#008FCF;
    border:1px solid rgba(255,255,255,0.55);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:
        transform 180ms cubic-bezier(0.63, -0.16, 0.26, 0.96),
        background 180ms cubic-bezier(0.63, -0.16, 0.26, 0.96);
}

.drawer-language-btn:hover{
    transform:translateY(-1px);
    background:rgb(255 255 255 / 0%);
}

.drawer-language-btn small{
    color:rgb(255 255 255 / 70%);
}

.drawer-language-btn-weiterlesen{
    background:linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border-color:rgba(255,255,255,0.6);
}

.drawer-language-btn-weiterlesen:hover{
    background:linear-gradient(135deg, #0d9488, #2dd4bf) !important;
}

.drawer-language-btn-weiterlesen small{
    color:rgba(255,255,255,0.86) !important;
}

.drawer-description{
    white-space:pre-line;
    line-height:1.7;
    color:rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 12%);
    backdrop-filter:blur(50px);
    -webkit-backdrop-filter:blur(50px);
    border-radius:24px;
    padding:18px;
    background:linear-gradient(135deg,rgb(0 0 0 / 25%),rgb(0 0 0 / 18%)) !important;
}

/* Drawer login */

.drawer-login-section{
    margin-top:4px;
}

.drawer-login-section h4{
    display:flex;
    align-items:center;
    gap:10px;
    width:auto;
    margin:0 0 20px;
    padding:0;
    background:transparent;
    border-radius:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    color:rgb(255 255 255 / 96%);
    font-size:18px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-0.02em;
    text-transform:uppercase;
}

.drawer-login-form{
    display:grid;
    gap:14px;
}

.drawer-login-label{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    overflow:hidden;
    clip:rect(0, 0, 0, 0);
    white-space:nowrap;
    border:0;
}

.drawer-login-form input{
    width:100%;
    height:58px;
    border:1px solid rgba(255,255,255,0.38);
    border-radius:18px;
    outline:none;
    padding:0 18px;
    background:#edf5ff;
    color:rgba(0,0,0,0.88);
    font-size:16px;
    font-weight:700;
    letter-spacing:-0.01em;
}

.drawer-login-form input::placeholder{
    color:rgba(0,0,0,0.42);
}

.drawer-login-submit{
    width:100%;
    height:60px;
    border:0;
    border-radius:18px;
    background:#1E416D;
    color:white;
    cursor:pointer;
    font-size:16px;
    font-weight:900;
    letter-spacing:-0.01em;
    text-transform:uppercase;
}

.drawer-login-submit:disabled{
    opacity:0.68;
    cursor:not-allowed;
}

.drawer-login-error{
    border:1px solid rgba(255,255,255,0.32);
    background:rgba(180,35,24,0.82);
    color:white;
    padding:13px 15px;
    border-radius:16px;
    font-size:15px;
    line-height:1.4;
}

.drawer-login-form.is-loading{
    opacity:0.82;
}

.drawer-login-form input:disabled{
    opacity:0.72;
    cursor:wait;
}

.drawer-login-hint{
    margin:-4px 2px 0;
    color:rgb(255 255 255 / 72%);
    font-size:14px;
    line-height:1.4;
}

/* Ziel drawer */

.ziel-drawer-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    margin-top:16px;
    padding:18px;
    border-radius:34px;
    background:linear-gradient(135deg, #55c5ee, #2fa6dc);
    border:1px solid rgba(255,255,255,0.58);
    box-shadow:0 18px 45px rgba(0,143,207,0.22);
}

.ziel-drawer-copy{
    display:grid;
    gap:4px;
    min-width:0;
}

.ziel-drawer-eyebrow{
    width:max-content;
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
    padding:7px 10px;
    border-radius:999px;
    color:rgba(255,255,255,0.92);
    background:rgba(0,43,78,0.24);
}

.ziel-drawer-copy strong{
    color:white;
    font-size:clamp(22px, 5vw, 34px);
    line-height:1;
    font-weight:950;
    letter-spacing:-0.04em;
    text-transform:uppercase;
}

.ziel-drawer-copy small{
    color:rgba(255,255,255,0.84);
    font-size:14px;
    line-height:1.35;
}

.ziel-add-button{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-height:54px;
    padding:0 20px;
    border:0;
    border-radius:999px;
    background:#fff;
    color:#04182b;
    cursor:pointer;
    font-size:17px;
    font-weight:950;
    letter-spacing:-0.02em;
    box-shadow:0 14px 30px rgba(0,0,0,0.12);
}

.ziel-add-button span{
    font-size:26px;
    line-height:1;
    transform:translateY(-1px);
}

.ziel-active-panel{
    margin-top:16px;
    padding:18px;
    border-radius:28px;
    border:1px solid rgba(185,255,217,0.22);
    background:
        radial-gradient(circle at top left, rgba(62,207,142,0.20), transparent 42%),
        rgba(0,0,0,0.25);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    color:white;
}

.ziel-active-top{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}

.ziel-active-kicker{
    display:block;
    width:max-content;
    margin-bottom:8px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(62,207,142,0.18);
    border:1px solid rgba(185,255,217,0.22);
    color:#b9ffd9;
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.ziel-active-top h5{
    margin:0;
    color:white;
    font-size:clamp(22px, 5vw, 32px);
    line-height:1.05;
    font-weight:950;
    letter-spacing:-0.04em;
}

.ziel-active-meta{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
    margin:16px 0;
}

.ziel-active-meta div{
    padding:13px;
    border-radius:20px;
    background:rgba(255,255,255,0.09);
    border:1px solid rgba(255,255,255,0.12);
}

.ziel-active-meta span{
    display:block;
    margin-bottom:6px;
    color:rgba(255,255,255,0.58);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.07em;
}

.ziel-active-meta strong{
    color:white;
    font-size:15px;
    font-weight:900;
}

.ziel-progress-block{
    margin-top:14px;
}

.ziel-progress-text{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.ziel-progress-text span{
    color:rgba(255,255,255,0.82);
    font-size:14px;
}

.ziel-progress-text strong{
    color:white;
    font-size:15px;
    font-weight:950;
}

.ziel-progress-track{
    height:14px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,0.13);
    border:1px solid rgba(255,255,255,0.13);
}

.ziel-progress-fill{
    width:0%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, #3ecf8e, #b9ffd9);
    transition:width 320ms ease;
}

.ziel-progress-block small,
#zielProgressCycle{
    display:block;
    margin-top:9px;
    color:rgba(255,255,255,0.62);
    line-height:1.4;
}

.ziel-unavailable-card{
    margin-top:16px;
    padding:17px;
    border-radius:26px;
    background:rgba(0,0,0,0.24);
    border:1px solid rgba(255,255,255,0.16);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
}

.ziel-unavailable-kicker{
    display:inline-flex;
    margin-bottom:9px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.72);
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.ziel-unavailable-card strong{
    display:block;
    margin-bottom:6px;
    color:white;
    font-size:18px;
    font-weight:950;
    letter-spacing:-0.02em;
}

.ziel-unavailable-card p{
    margin:0;
    color:rgba(255,255,255,0.72);
    line-height:1.5;
}

/* Modal */

.ziel-modal-overlay{
    position:fixed;
    inset:0;
    z-index:5000;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    transition:
        opacity 260ms ease,
        visibility 260ms ease;
}

.ziel-modal-overlay.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.ziel-modal{
    position:relative;
    width:min(620px, 100%);
    max-height:calc(100vh - 44px);
    overflow:auto;
    border-radius:34px;
    border:1px solid rgba(255,255,255,0.18);
    box-shadow:0 32px 90px rgba(0,0,0,0.45);
    transform:translateY(16px) scale(0.97);
    opacity:0;
    visibility:hidden;
    transition:
        transform 260ms ease,
        opacity 260ms ease,
        visibility 260ms ease;
}

.ziel-modal-overlay.is-open .ziel-modal,
.ziel-modal.is-open{
    transform:translateY(0) scale(1);
    opacity:1;
    visibility:visible;
}

.ziel-modal-close{
    position:absolute;
    top:18px;
    right:18px;
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,0.26);
    border-radius:999px;
    background:rgba(255,255,255,0.12);
    color:white;
    font-size:28px;
    line-height:1;
    cursor:pointer;
    z-index:2;
}

.ziel-modal-close:hover{
    background:rgba(255,255,255,0.20);
}

.ziel-modal-hero{
    padding:34px 34px 22px;
    background:radial-gradient(circle at top left, rgba(85,197,238,0.42), transparent 42%);
}

.ziel-modal-badge{
    display:inline-flex;
    padding:8px 12px;
    border-radius:999px;
    background:rgba(85,197,238,0.18);
    color:#bdefff;
    border:1px solid rgba(189,239,255,0.22);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
    margin-bottom:14px;
}

.ziel-modal-hero h3{
    margin:0;
    color:white;
    font-size:clamp(30px, 8vw, 48px);
    line-height:0.98;
    font-weight:950;
    letter-spacing:-0.05em;
    text-transform:uppercase;
}

.ziel-modal-hero p{
    max-width:460px;
    margin:12px 0 0;
    color:rgba(255,255,255,0.76);
    line-height:1.55;
}

.ziel-form{
    display:grid;
    gap:18px;
    padding:0 34px 34px;
}

.ziel-form.is-loading{
    opacity:0.82;
}

.ziel-book-context{
    display:grid;
    gap:5px;
    padding:16px;
    border-radius:24px;
    background:rgba(85,197,238,0.12);
    border:1px solid rgba(189,239,255,0.24);
}

.ziel-book-context span{
    color:rgba(255,255,255,0.58);
    font-size:12px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.ziel-book-context strong{
    color:white;
    font-size:clamp(20px, 5vw, 30px);
    line-height:1.08;
    font-weight:950;
    letter-spacing:-0.03em;
}

.ziel-book-context small{
    color:rgba(255,255,255,0.66);
    line-height:1.35;
}

.ziel-field{
    display:grid;
    gap:10px;
}

.ziel-label{
    color:rgba(255,255,255,0.88);
    font-weight:900;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

.ziel-input-wrap,
.ziel-select-wrap{
    display:flex;
    align-items:center;
    min-height:58px;
    overflow:hidden;
    border-radius:18px;
    background:#edf5ff;
    border:1px solid rgba(255,255,255,0.34);
}

.ziel-input-wrap input,
.ziel-select-wrap select{
    width:100%;
    min-width:0;
    height:58px;
    border:0;
    outline:none;
    padding:0 18px;
    background:transparent;
    color:rgba(0,0,0,0.88);
    font-size:17px;
    font-weight:900;
}

.ziel-select-wrap{
    position:relative;
}

.ziel-select-wrap select{
    appearance:none;
    -webkit-appearance:none;
    cursor:pointer;
    padding-right:50px;
}

.ziel-select-wrap::after{
    content:"⌄";
    position:absolute;
    right:18px;
    top:50%;
    transform:translateY(-54%);
    color:rgba(0,0,0,0.48);
    font-size:22px;
    line-height:1;
    pointer-events:none;
}

.ziel-input-wrap span{
    flex:0 0 auto;
    padding:0 18px;
    color:rgba(0,0,0,0.48);
    font-size:14px;
    font-weight:900;
}

.ziel-duration-grid{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, 1fr));
    gap:10px;
}

.ziel-duration-option{
    cursor:pointer;
}

.ziel-duration-option input{
    position:absolute;
    opacity:0;
    pointer-events:none;
}

.ziel-duration-option > span{
    display:grid;
    gap:4px;
    min-height:86px;
    padding:15px;
    border-radius:20px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.14);
    transition:transform 180ms ease, border-color 180ms ease, background 180ms ease;
}

.ziel-duration-option strong{
    color:white;
    font-size:15px;
    font-weight:950;
}

.ziel-duration-option small{
    color:rgba(255,255,255,0.56);
    font-size:12px;
    font-weight:700;
}

.ziel-duration-option input:checked + span{
    background:rgba(85,197,238,0.20);
    border-color:rgba(189,239,255,0.72);
    box-shadow:0 14px 34px rgba(0,143,207,0.18);
}

.ziel-duration-option:hover > span{
    transform:translateY(-1px);
}

.ziel-form-message{
    padding:13px 15px;
    border-radius:16px;
    font-size:15px;
    line-height:1.4;
    border:1px solid rgba(255,255,255,0.20);
    background:rgba(180,35,24,0.86);
    color:white;
}

.ziel-form-message.is-success{
    background:rgba(20,132,84,0.88);
    color:white;
}

.ziel-form-message.is-error{
    background:rgba(180,35,24,0.86);
    color:white;
}

.ziel-submit-button,
.ziel-disable-button{
    width:100%;
    min-height:62px;
    border-radius:20px;
    cursor:pointer;
    font-size:16px;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:-0.01em;
    transition:transform 180ms ease, opacity 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ziel-submit-button{
    border:0;
    background:linear-gradient(135deg, #55c5ee, #008FCF);
    color:white;
    box-shadow:0 18px 42px rgba(0,143,207,0.24);
}

.ziel-disable-button{
    border:1px solid rgba(255,255,255,0.18);
    background:rgba(180,35,24,0.30);
    color:white;
}

.ziel-submit-button:hover,
.ziel-disable-button:hover{
    transform:translateY(-1px);
}

.ziel-submit-button:hover{
    box-shadow:0 22px 50px rgba(0,143,207,0.30);
}

.ziel-submit-button:disabled,
.ziel-disable-button:disabled{
    opacity:0.68;
    cursor:not-allowed;
    transform:none;
}

.ziel-form-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}

/* Utility */

[hidden]{
    display:none !important;
}


[data-main-ziel-slide][hidden],
[data-empfohlen-buch-slide][hidden]{
    display:block !important;
}

.urdu-text{
    direction:rtl;
    text-align:right;
}

/* Responsive */

@media(max-width:1250px){
    .library-control-panel{
        grid-template-columns:minmax(170px, 0.42fr) minmax(0, 1.58fr);
    }

    .filter-field{
        grid-column:span 4;
    }

    .filter-field-search{
        grid-column:1 / -1;
    }

    .filter-field-author{
        grid-column:span 4;
    }

    .filter-field-small,
    .filter-submit,
    .filter-reset{
        grid-column:span 2;
    }
}

@media(max-width:1100px){
    .library-control-panel{
        grid-template-columns:1fr;
    }

    .library-control-heading{
        min-height:0;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,0.14);
    }

    .library-control-heading p{
        max-width:680px;
    }

    .main-ziel-hero-heading{
        min-height:150px;
        grid-template-columns:1fr;
        align-items:start;
    }

    .main-ziel-hero-heading p{
        max-width:760px;
    }

    .main-ziel-swiss-grid{
        grid-template-columns:1fr;
    }

    .main-ziel-left-panel{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,0.16);
    }

    .main-ziel-right-panel{
        display:none;
    }

    .bundesbibliothek-right-panel{
        display:block;
        border-top:0;
    }

    .main-ziel-slider,
    .main-ziel-carousel-nav{
        max-width:100%;
    }
}

@media(max-width:900px){
    .main-ziel-feature-card{
        max-width:100%;
        grid-template-columns:126px minmax(0,1fr);
    }
}

@media(max-width:768px){
    .topbar{
        align-items:flex-start;
    }

    .library-books-section{
        margin-top:18px;
    }

    .library-control-panel{
        grid-template-columns:1fr;
        padding:10px;
        gap:10px;
    }

    .library-control-heading{
        min-height:0;
        padding:12px;
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,0.14);
    }

    .library-control-tools{
        padding:12px;
    }

    .library-filter-box{
        grid-template-columns:1fr 1fr;
    }

    .filter-field,
    .filter-field-author,
    .filter-field-small,
    .filter-submit,
    .filter-reset{
        grid-column:span 1;
    }

    .filter-field-search{
        grid-column:1 / -1;
    }

    select,
    .filter-box input[type="search"],
    .filter-submit,
    .filter-reset{
        width:100%;
    }

    .filter-submit,
    .filter-reset{
        min-width:0;
    }

    .actions{
        flex-direction:column;
    }

    .main-ziel-hero{
        margin-top:14px;
    }

    .main-ziel-hero-heading{
        min-height:0;
        padding: 25px 25px 70px;
        gap:15px;
    }
  .main-ziel-hero-heading-az{
    padding-bottom: 25px;
}
    .main-ziel-brand{
        margin-bottom:12px;
        font-size:15px;
    }

    .main-ziel-hero-heading h2{
            font-size: clamp(34px, 4.2vw, 58px);
        line-height:0.94;
    }

    .main-ziel-hero-heading p{
        font-size:15px;
        line-height:1.35;
    }

    .main-ziel-left-panel{
        padding: 20px 20px 24px;
    }

    .main-ziel-feature-card{
        grid-template-columns:126px minmax(0,1fr);
        gap:14px;
        padding:14px;
        border-radius:26px;
        min-height:150px;
    }

    .main-ziel-percent-box{
        width:126px;
        height:126px;
        border-radius:26px;
    }

    .main-ziel-percent-box strong{
        font-size:36px;
    }

    .main-ziel-feature-content{
        min-height:126px;
    }

    .main-ziel-feature-content h3{
        font-size:22px;
    }

    .main-ziel-card-kicker{
        font-size:9px;
    }

    .main-ziel-card-count{
        font-size:16px;
    }

    .main-ziel-progress-copy strong{
        font-size:11.5px;
    }

    .main-ziel-progress-copy span{
        font-size:10.5px;
    }

    .main-ziel-feature-actions{
        flex-direction:column;
        align-items:stretch;
        gap:7px;
    }

    .main-ziel-order-btn,
    .main-ziel-edit-btn{
        width:100%;
    }
}

@media(max-width:700px){
    .drawer-header,
    .drawer-body{
        padding-left:20px;
        padding-right:20px;
    }

    .drawer-login-form input,
    .drawer-login-submit{
        height:56px;
        border-radius:16px;
        font-size:16px;
    }

    .drawer-login-section h4{
        font-size:17px;
    }

    .ziel-drawer-card{
        align-items:stretch;
        flex-direction:column;
        border-radius:28px;
    }

    .ziel-add-button{
        width:100%;
    }

    .ziel-active-top{
        flex-direction:column;
    }

    .ziel-active-meta{
        grid-template-columns:1fr;
    }

    .ziel-modal-overlay{
        align-items:flex-end;
        padding:12px;
    }

    .ziel-modal{
        border-radius:28px;
        max-height:calc(100vh - 24px);
    }

    .ziel-modal-hero,
    .ziel-form{
        padding-left:20px;
        padding-right:20px;
    }

    .ziel-duration-grid,
    .ziel-form-actions{
        grid-template-columns:1fr;
    }
}

@media(max-width:560px){
    .main-ziel-section-label{
        font-size:14px;
    }

    .main-ziel-feature-card{
        grid-template-columns:104px minmax(0,1fr);
        gap:11px;
        padding:15px;
        border-radius:23px;
        min-height:130px;
    }

    .main-ziel-percent-box{
        width:104px;
        height:104px;
        border-radius:22px;
    }

    .main-ziel-percent-box strong{
        font-size:30px;
    }

    .main-ziel-feature-content{
        min-height:104px;
    }

    .main-ziel-card-count{
        font-size:15px;
    }
    .main-ziel-feature-content h3{
        font-size:20px;
        line-height:1.05;
    }

    .main-ziel-author{
        font-size:10.5px;
        margin-top:4px;
    }

    .main-ziel-progress-copy{
        padding-top:8px;
        margin-bottom:6px;
    }

    .main-ziel-progress-copy strong{
        font-size:10.5px;
    }

    .main-ziel-progress-copy span{
        font-size:9.6px;
    }

    .main-ziel-progress-track{
        height:7px;
    }

    .main-ziel-feature-actions{
        gap:6px;
        margin-top:8px;
    }

    .main-ziel-order-btn,
    .main-ziel-edit-btn{
        min-height:30px;
        font-size:12px;
        border-radius:8px;
        padding:0 8px;
    }

    .main-ziel-carousel-nav{
        gap:16px;
        margin-top:14px;
    }

    .main-ziel-arrow{
        width:42px;
        height:42px;
        font-size:22px;
    }

    .main-ziel-dot{
        width:7px;
        height:7px;
    }

    .main-ziel-dot.is-active{
        width:18px;
    }
}

@media(max-width:520px){
    .container{
        width:calc(100% - 20px);
    }

    .books-grid{
        grid-template-columns:1fr;
        gap:18px;
        padding:22px 0;
    }

    .book-cover{
        min-height:210px;
        padding:24px;
    }

    .book-cover-title{
        margin-top:54px;
        padding-right:38px;
    }


    .book-cover-number strong{
        font-size: 18px;
    }

    .book-content{
        padding:22px;
    }
}

@media(max-width:420px){
    .library-filter-box{
        grid-template-columns:1fr;
    }

    .filter-field,
    .filter-field-author,
    .filter-field-small,
    .filter-field-search,
    .filter-submit,
    .filter-reset{
        grid-column:1 / -1;
    }

    .main-ziel-hero-heading{
        padding-left:16px;
        padding-right:16px;
    }

    .main-ziel-left-panel{
        padding-left:16px;
        padding-right:16px;
    }

    .main-ziel-feature-card{
        grid-template-columns:92px minmax(0,1fr);
        gap:9px;
        padding:10px;
        border-radius:21px;
    }

    .main-ziel-percent-box{
        width:92px;
        height:92px;
        border-radius:20px;
    }

    .main-ziel-percent-box strong{
        font-size:26px;
    }

    .main-ziel-feature-content{
        min-height:92px;
    }

    .main-ziel-feature-content h3{
        font-size:17px;
    }

    .main-ziel-progress-copy strong{
        font-size:10px;
    }

    .main-ziel-progress-copy span{
        font-size:9.2px;
    }
}

@media(max-width:1100px){
    .bundesbibliothek-heading p{
        justify-self:start;
    }

    .bundesbibliothek-grid{
        grid-template-columns:1fr;
    }

    .bundesbibliothek-left-panel{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,0.16);
    }

    .bundesbibliothek-right-panel{
        display:block;
        padding:20px 28px 28px;
    }

    .bundesbibliothek-excerpt-slider{
        max-width:100%;
    }
}

@media(max-width:768px){
    .bundesbibliothek-hero,
    .bundesbibliothek-shell{
        min-height:100svh;
    }

    .bundesbibliothek-right-panel{
        display:block;
        padding:20px 20px 24px;
    }

    .bundesbibliothek-excerpt-card{
        min-height: 50px;
        padding:20px;
        padding-left:0;
    }

    .bundesbibliothek-excerpt-text{
        font-size: clamp(20px, 3vw, 24px);
    }
}

@media(max-width:560px){
    .bundesbibliothek-feature-card{
        grid-template-columns:88px minmax(0,1fr);
    }

    .bundesbibliothek-info-badge{
        min-height:88px;
    }

    .bundesbibliothek-info-badge span{
        font-size:clamp(14px, 3vw, 20px);
    }

    .bundesbibliothek-language-pill{
        font-size:9px;
        min-height:22px;
        padding:5px 7px;
    }
}

@media(max-width:420px){
    .bundesbibliothek-feature-card{
        grid-template-columns:74px minmax(0,1fr);
    }

    .bundesbibliothek-info-badge{
        width:74px;
        min-height:74px;
        border-radius:18px;
        padding:10px;
    }

    .bundesbibliothek-info-badge span{
        font-size:clamp(12px, 4vw, 17px);
    }

    .bundesbibliothek-excerpt-card{
        padding:16px;
        border-radius:22px;
    }
}

/* ========================================================================== 
   Responsive layout, navigation and section-alignment refinements
   ========================================================================== */

:root{
    --site-content-max:1500px;
    --site-page-space:clamp(28px, 6vw, 92px);
    --site-header-height: clamp(76px, 7vw, 104px);
    --site-panel-padding:clamp(18px, 2.4vw, 32px);
}

html{
    scroll-behavior:smooth;
    scroll-padding-top:calc(var(--site-header-height) + 18px);
}

body{
    padding-top:var(--site-header-height);
}

body.menu-open{
    overflow:hidden;
}

/* Fixed responsive header and logo */
.site-header,
header.site-header{
    position:fixed;
    inset:0 0 auto 0;
    top:0;
    width:100%;
    height:var(--site-header-height);
    padding:0;
    z-index:3000;
    display:block;
    background:linear-gradient(180deg, rgba(3,9,16,0.82), rgba(3,9,16,0.40));
    border-bottom:1px solid rgba(255,255,255,0.12);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.site-header-inner{
    width:min(var(--site-content-max), calc(100% - var(--site-page-space)));
    height:100%;
    margin:0 auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
}

.logo{
    min-width:0;
    display:inline-flex;
    align-items:center;
    flex-direction:row;
    gap:clamp(10px, 1.2vw, 18px);
    margin:0;
    padding:0;
    color:#f4f4f4;
    text-decoration:none;
}

.logoimg{
    flex:0 0 auto;
    width:clamp(46px, 4.8vw, 70px);
    height:auto;
    aspect-ratio:1;
    border-radius:50%;
    overflow:hidden;
    background:rgba(255,255,255,0.08);
}

.logoimg img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.logoname{
    min-width:0;
    height:auto;
    margin:0;
    padding:0;
    display:flex;
    flex-direction:column;
    gap:2px;
}

.logoname span{
    display:block;
    margin:0;
    color:#f4f4f4;
    font-size:clamp(12px, 1.25vw, 17px);
    line-height:1.16;
    font-weight:500;
    letter-spacing:-0.02em;
    white-space:nowrap;
}

.logoname span:last-child{
    color:rgba(244,244,244,0.72);
    font-size:clamp(10px, 1vw, 14px);
    font-weight:400;
}

/* Animated two-line menu trigger */
.lines{
    position:relative;
    inset:auto;
    left:auto;
    top:auto;
    flex:0 0 auto;
    display:flex;
    width:clamp(42px, 4.6vw, 64px);
    height:clamp(42px, 4.6vw, 64px);
    padding:0;
    border:0;
    border-radius:50%;
    background:rgba(255,255,255,0.07);
    cursor:pointer;
    z-index:3100;
    align-items:center;
    justify-content:center;
    transition:background 180ms ease, transform 180ms ease;
}

.lines:hover,
.lines:focus-visible{
    background:rgba(255,255,255,0.14);
}

.lines:focus-visible{
    outline:2px solid rgba(255,255,255,0.92);
    outline-offset:3px;
}

.line{
    position:relative;
    inset:auto;
    display:block;
    width:48%;
    height:16px;
    border-radius:0;
    background:transparent;
    z-index:1;
}

.line::before,
.line::after{
    content:"";
    position:absolute;
    left:0;
    width:100%;
    height:2px;
    border-radius:999px;
    background:#e4e4e4;
    transform:none;
    animation:none !important;
    transition:clip-path 280ms ease, opacity 220ms ease;
}

.line::before{
    top:2px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.line::after{
    top:12px;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.menucross{
    position:absolute;
    inset:0;
    width:auto;
    height:auto;
    left:0;
    top:0;
    display:block;
    pointer-events:none;
    z-index:2;
}

.menucross::before,
.menucross::after{
    content:"";
    position:absolute;
    left:26%;
    top:50%;
    width:48%;
    height:2px;
    border-radius:999px;
    background:#e4e4e4;
    clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
    transition:clip-path 320ms ease 80ms;
}

.menucross::before{
    transform:rotate(-45deg);
}

.menucross::after{
    transform:rotate(45deg);
}

.lines.is-active .line::before{
    clip-path:polygon(0 0, 0 0, 0 100%, 0 100%);
}

.lines.is-active .line::after{
    clip-path:polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.lines.is-active .menucross::before,
.lines.is-active .menucross::after{
    clip-path:polygon(100% 0, 0 0, 0 100%, 100% 100%);
}

/* Full-screen fixed menu inspired by the supplied reference */
.menu{
    position:fixed;
    inset:0;
    width:100%;
    height:100dvh;
    min-height:100%;
    display:block;
    overflow:hidden auto;
    padding-top:var(--site-header-height);
    background:rgba(8,14,17,0.88);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    clip-path:circle(0 at calc(100% - max(24px, 5vw)) 0);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    z-index:2900;
    animation:none !important;
    transition:
        clip-path 430ms cubic-bezier(.22,.8,.24,1),
        opacity 260ms ease,
        visibility 430ms ease;
}

.menu.menuactive{
    clip-path:circle(150vmax at calc(100% - max(24px, 5vw)) 0);
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.menu-shell{
    width:min(var(--site-content-max), calc(100% - var(--site-page-space)));
    min-height:calc(100dvh - var(--site-header-height));
    margin:0 auto;
    padding:clamp(24px, 4vh, 52px) 0 clamp(22px, 4vh, 48px);
    display:flex;
    flex-direction:column;
}

.menu-label{
    margin:0 0 clamp(16px, 2vh, 28px);
    color:rgba(255,255,255,0.62);
    font-size:clamp(12px, 1.1vw, 16px);
    line-height:1;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:0.18em;
}

.menuitems{
    position:relative;
    inset:auto;
    width:100%;
    margin:0;
    display:flex;
    flex-direction:column;
    background:transparent;
}

.menuitems a{
    position:relative;
    width:100%;
    margin:0;
    padding:clamp(9px, 1.35vh, 18px) 0 clamp(10px, 1.5vh, 20px);
    display:flex;
    align-items:center;
    color:#f3f4f6;
    text-decoration:none;
    font-size:clamp(40px, 5.5vw, 82px);
    line-height:0.94;
    font-weight:500;
    letter-spacing:-0.055em;
    transition:color 180ms ease, padding-left 220ms ease;
}

.menuitems a::before{
    content:"+";
    flex:0 0 auto;
    margin-right:clamp(10px, 1.2vw, 18px);
    padding:0;
    color:rgba(255,255,255,0.46);
    font-size:0.42em;
    line-height:1;
    font-weight:400;
    transition:transform 220ms ease, color 180ms ease;
}

.menuitems a::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:1px;
    margin:0;
    background:rgba(255,255,255,0.28);
}

.menuitems a:hover,
.menuitems a:focus-visible{
    color:#ffffff;
    padding-left:clamp(6px, 0.7vw, 12px);
    outline:none;
}

.menuitems a:hover::before,
.menuitems a:focus-visible::before{
    color:#ffffff;
    transform:rotate(45deg);
}

.menu-bottom{
    margin-top:auto;
    padding-top:clamp(28px, 5vh, 64px);
    display:grid;
    grid-template-columns:minmax(0, 1fr) minmax(260px, 0.62fr);
    gap:clamp(18px, 4vw, 64px);
    align-items:end;
}

.menu-meta{
    display:grid;
    grid-template-columns:repeat(2, minmax(0, max-content));
    gap:10px clamp(24px, 5vw, 80px);
    color:rgba(255,255,255,0.56);
    font-size:clamp(13px, 1.35vw, 20px);
    line-height:1.25;
}

.menu-cta{
    min-height:clamp(58px, 6vw, 78px);
    padding:0 clamp(20px, 3vw, 38px);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:14px;
    background:rgba(0,0,0,0.48);
    border:1px solid rgba(255,255,255,0.08);
    color:#ffffff;
    text-decoration:none;
    font-size:clamp(12px, 1.05vw, 16px);
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.18em;
    transition:background 180ms ease, transform 180ms ease;
}

.menu-cta span{
    font-size:1.8em;
    font-weight:300;
}

.menu-cta:hover,
.menu-cta:focus-visible{
    background:rgba(0,0,0,0.72);
    transform:translateY(-1px);
    outline:none;
}

/* Shared content width and alignment */
.main-ziel-hero,
.container,
.library-books-section{
    width:min(var(--site-content-max), calc(100% - var(--site-page-space)));
    margin-left:auto;
    margin-right:auto;
}

#empfohlene-buecher,
#aktive-ziele,
#buecher{
    scroll-margin-top:calc(var(--site-header-height) + 16px);
}

.main-ziel-hero{
    margin-top:clamp(12px, 1.8vw, 28px);
    border-bottom:0;
    overflow:visible;
}

.main-ziel-hero-shell{
    width:100%;
    margin:0;
}

.main-ziel-hero-heading{
    min-height:0;
    padding:clamp(22px, 3vw, 40px) var(--site-panel-padding) clamp(14px, 1.8vw, 24px);
    border-bottom:0;
}

.main-ziel-swiss-grid{
    min-height:0;
    align-items:stretch;
}

.main-ziel-left-panel,
.main-ziel-right-panel,
.bundesbibliothek-left-panel,
.bundesbibliothek-right-panel,
.active-goals-hero .main-ziel-left-panel,
.active-goals-hero .main-ziel-right-panel{
    padding:clamp(14px, 2vw, 26px) var(--site-panel-padding) clamp(20px, 2.6vw, 34px);
    border:0 !important;
}

/* Recommended books: remove forced viewport height and internal divider */
.bundesbibliothek-hero,
.bundesbibliothek-shell{
    min-height:0;
}

.bundesbibliothek-hero{
    margin-top:clamp(14px, 2vw, 30px);
    margin-bottom:0;
    display:block;
}

.bundesbibliothek-shell{
    display:block;
}

.bundesbibliothek-grid{
    min-height:0;
    grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);
    align-items:start;
}

.bundesbibliothek-left-panel{
    padding-bottom:clamp(12px, 1.8vw, 24px);
}

.bundesbibliothek-right-panel{
    padding-top:clamp(14px, 1.8vw, 24px);
}

.bundesbibliothek-excerpt-slider{
    max-width:none;
}

.bundesbibliothek-excerpt-card{
    min-height:0;
    padding:0;
    border-radius:0;
}

.bundesbibliothek-excerpt-text{
    padding:clamp(20px, 2.5vw, 34px);
    font-size:clamp(18px, 2.05vw, 29px);
}

/* Matching recommendation and percentage tiles */
.main-ziel-feature-card,
.bundesbibliothek-feature-card{
    grid-template-columns:clamp(116px, 10vw, 142px) minmax(0, 1fr);
    align-items:stretch;
    min-height:178px;
    gap:clamp(12px, 1.4vw, 18px);
    padding:12px;
    border-radius:24px;
}

.main-ziel-percent-box,
.bundesbibliothek-info-badge{
    position:relative;
    width:100%;
    height:100%;
    min-height:154px;
    border-radius:18px;
    overflow:hidden;
}

.main-ziel-percent-box{
    padding:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    background:
        radial-gradient(circle at 18% 18%, rgba(255,255,255,0.30), transparent 30%),
        linear-gradient(145deg, #2563eb, #06b6d4) !important;
}

.main-ziel-percent-box::before{
    content:"";
    position:absolute;
    inset:auto -24px -42px 22px;
    height:108px;
    border-radius:999px 999px 0 0;
    background:rgba(2,6,23,0.14);
    transform:rotate(-12deg);
}

.main-ziel-percent-box strong{
    position:relative;
    z-index:1;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#ffffff;
    font-size:clamp(31px, 3vw, 44px);
    line-height:1;
    text-align:center;
}

.bundesbibliothek-info-badge{
    align-items:flex-end;
    justify-content:flex-start;
    padding:clamp(12px, 1.4vw, 18px);
    background:
        radial-gradient(circle at 16% 14%, rgba(255,255,255,0.34), transparent 29%),
        radial-gradient(circle at 92% 92%, var(--badge-glow, rgba(255,255,255,0.18)), transparent 42%),
        linear-gradient(145deg, var(--badge-start, #f59e0b), var(--badge-end, #ef4444));
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.16),
        inset 0 -28px 50px rgba(0,0,0,0.10),
        0 16px 34px rgba(0,0,0,0.16);
}

/* 1: prosperity, 2: vitality/success, 3: calm confidence */
.empfehlung-color-1{--badge-start:#063f33;--badge-end:#c89b3c;--badge-glow:rgba(229,190,84,0.46);}
.empfehlung-color-2{--badge-start:#0b5f46;--badge-end:#58c77a;--badge-glow:rgba(113,232,151,0.38);}
.empfehlung-color-3{--badge-start:#1f376f;--badge-end:#68bdd1;--badge-glow:rgba(131,211,229,0.38);}
/* 4: wisdom, 5: compassion, 6: optimism, 7: clarity, 8: creativity, 9: courage, 10: balance */
.empfehlung-color-4{--badge-start:#3b2d67;--badge-end:#8b6fb3;--badge-glow:rgba(178,151,222,0.34);}
.empfehlung-color-5{--badge-start:#8f2f55;--badge-end:#e4869e;--badge-glow:rgba(244,166,186,0.34);}
.empfehlung-color-6{--badge-start:#a05a12;--badge-end:#e9b949;--badge-glow:rgba(255,213,105,0.38);}
.empfehlung-color-7{--badge-start:#0d5f6f;--badge-end:#41b8ae;--badge-glow:rgba(91,218,204,0.35);}
.empfehlung-color-8{--badge-start:#49368c;--badge-end:#a06ad4;--badge-glow:rgba(189,130,235,0.34);}
.empfehlung-color-9{--badge-start:#8d3027;--badge-end:#e27648;--badge-glow:rgba(244,143,98,0.34);}
.empfehlung-color-10{--badge-start:#3e5f2a;--badge-end:#7da95b;--badge-glow:rgba(157,201,116,0.34);}

.bundesbibliothek-feature-content,
.main-ziel-feature-content{
    min-height:154px;
}

/* Active goals: tighter section spacing and no divider before overview */
.active-goals-hero{
    margin-top:clamp(8px, 1.2vw, 18px);
}

.active-goals-hero .main-ziel-hero-heading{
    padding-bottom:clamp(10px, 1.2vw, 18px);
}

.active-goals-hero .main-ziel-intro-card{
    min-height:0;
    max-width:none;
    padding-top:clamp(6px, 1vw, 14px);
}

/* Books and filters use the same page and panel padding as the sections above */
.library-books-section{
    display:block;
    margin-top:clamp(16px, 2.2vw, 34px);
}

.library-control-panel{
    grid-template-columns:minmax(210px, 0.36fr) minmax(0, 1.64fr);
    gap:0;
    padding:0;
    overflow:hidden;
}

.library-control-heading{
    min-height:100%;
    padding:var(--site-panel-padding);
}

.library-control-tools{
    padding:var(--site-panel-padding);
}

.books-grid{
    padding:clamp(20px, 2.6vw, 36px) 0 30px;
}

/* Goal create/edit card: viewport-safe on phones, tablets and laptops */
.ziel-modal-overlay{
    overflow-y:auto;
    overscroll-behavior:contain;
    padding:
        max(12px, env(safe-area-inset-top))
        max(12px, env(safe-area-inset-right))
        max(12px, env(safe-area-inset-bottom))
        max(12px, env(safe-area-inset-left));
}

.ziel-modal{
    width:min(700px, 100%);
    max-height:min(900px, calc(100dvh - 32px));
    border-radius:clamp(22px, 3vw, 34px);
    scrollbar-gutter:stable;
    overscroll-behavior:contain;
}

.ziel-modal-hero{
    padding:clamp(26px, 4vw, 40px) clamp(20px, 4vw, 40px) clamp(18px, 2.8vw, 28px);
}

.ziel-modal-hero h3{
    padding-right:46px;
    font-size:clamp(28px, 5.4vw, 48px);
    overflow-wrap:anywhere;
}

.ziel-form{
    gap:clamp(14px, 2vw, 20px);
    padding:0 clamp(20px, 4vw, 40px) clamp(22px, 4vw, 40px);
}

.ziel-duration-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
}

.ziel-duration-option > span{
    height:100%;
}

.ziel-form-actions{
    align-items:stretch;
}

@media(max-width:1100px){
    .main-ziel-swiss-grid,
    .bundesbibliothek-grid{
        grid-template-columns:1fr;
    }

    .main-ziel-right-panel,
    .active-goals-hero .main-ziel-right-panel,
    .bundesbibliothek-right-panel{
        display:block;
    }

    .bundesbibliothek-left-panel{
        padding-bottom:10px;
    }

    .bundesbibliothek-right-panel{
        padding-top:10px;
    }

    .active-goals-hero .main-ziel-right-panel{
        padding-top:0;
    }

    .library-control-panel{
        grid-template-columns:1fr;
    }

    .library-control-heading{
        min-height:0;
    }
}

@media(max-width:768px){
    :root{
        --site-page-space:clamp(24px, 5vw, 40px);
        --site-header-height:76px;
        --site-panel-padding:clamp(16px, 4vw, 22px);
    }

    .logoname span{
        font-size:clamp(11px, 3.2vw, 14px);
    }

    .logoname span:last-child{
        font-size:clamp(9px, 2.7vw, 12px);
    }

    .menu-shell{
        padding-top:22px;
    }

    .menuitems a{
        font-size:clamp(35px, 10vw, 60px);
    }

    .menu-bottom{
        grid-template-columns:1fr;
        gap:22px;
    }

    .menu-meta{
        grid-template-columns:1fr;
        gap:7px;
    }

    .main-ziel-hero-heading{
        padding: 22px var(--site-panel-padding) 10vh;
    }

    .main-ziel-left-panel,
    .main-ziel-right-panel,
    .bundesbibliothek-left-panel,
    .bundesbibliothek-right-panel,
    .active-goals-hero .main-ziel-left-panel,
    .active-goals-hero .main-ziel-right-panel{
        padding-left:var(--site-panel-padding);
        padding-right:var(--site-panel-padding);
    }

    .main-ziel-feature-card,
    .bundesbibliothek-feature-card{
        grid-template-columns:112px minmax(0, 1fr);
        min-height:166px;
    }

    .main-ziel-percent-box,
    .bundesbibliothek-info-badge{
        min-height:142px;
    }

    .main-ziel-feature-content,
    .bundesbibliothek-feature-content{
        min-height:142px;
    }

    .library-control-panel{
        padding:0;
    }

    .library-control-heading,
    .library-control-tools{
        padding:var(--site-panel-padding);
    }

    .ziel-modal-overlay{
        align-items:flex-end;
        padding:8px max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    }

    .ziel-modal{
        width:100%;
        max-height:calc(100dvh - 8px);
        border-radius:26px 26px 12px 12px;
    }

    .ziel-modal-close{
        top:14px;
        right:14px;
    }
}

@media(max-width:560px){
    .site-header-inner{
        gap:12px;
    }

    .logoimg{
        width:46px;
    }

    .lines{
        width:44px;
        height:44px;
    }

    .menuitems a{
        font-size:clamp(32px, 10.8vw, 48px);
        line-height:0.98;
    }

    .menu-cta{
        width:100%;
    }

    .main-ziel-feature-card,
    .bundesbibliothek-feature-card{
        grid-template-columns:96px minmax(0, 1fr);
        gap:10px;
        padding:10px;
        min-height:148px;
        border-radius:21px;
    }

    .main-ziel-percent-box,
    .bundesbibliothek-info-badge{
        min-height:128px;
        border-radius:16px;
    }

    .main-ziel-feature-content,
    .bundesbibliothek-feature-content{
        min-height:128px;
    }

    .main-ziel-percent-box strong{
        font-size:clamp(27px, 8vw, 34px);
    }

    .bundesbibliothek-info-badge span{
        font-size: clamp(13px, 3.5vw, 18px);
    }

    .bundesbibliothek-excerpt-text{
        padding:20px;
        font-size:clamp(18px, 5.4vw, 23px);
    }

    .ziel-duration-grid,
    .ziel-form-actions{
        grid-template-columns:1fr;
    }

    .ziel-input-wrap,
    .ziel-select-wrap,
    .ziel-input-wrap input,
    .ziel-select-wrap select{
        min-height:54px;
        height:54px;
    }
}

@media(max-width:390px){
    :root{
        --site-page-space:20px;
    }

    .logoname span:first-child{
        max-width:190px;
        white-space:normal;
        line-height:1.05;
    }

    .logoname span:last-child{
        display:none;
    }

    .menuitems a{
        font-size:clamp(29px, 10.5vw, 40px);
    }

    .main-ziel-feature-card,
    .bundesbibliothek-feature-card{
        grid-template-columns:1fr;
    }

    .main-ziel-percent-box,
    .bundesbibliothek-info-badge{
        min-height:88px;
    }

    .bundesbibliothek-info-badge{
        align-items:center;
        justify-content:center;
        text-align:center;
    }

    .main-ziel-feature-content,
    .bundesbibliothek-feature-content{
        min-height:0;
    }

    .ziel-modal-hero{
        padding-left:18px;
        padding-right:18px;
    }

    .ziel-form{
        padding-left:18px;
        padding-right:18px;
    }
}

@media(prefers-reduced-motion:reduce){
    html{
        scroll-behavior:auto;
    }

    .menu,
    .line::before,
    .line::after,
    .menucross::before,
    .menucross::after,
    .menuitems a,
    .menuitems a::before{
        transition:none !important;
        animation:none !important;
    }
}

/* ========================================================================== 
   UX refinement v2: popup layering, clearer search, premium book index
   ========================================================================== */

/* Drawers and goal dialogs always sit above the fixed header and full-screen menu. */
body.drawer-open .menu,
body.ziel-modal-open .menu{
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    clip-path:circle(0 at calc(100% - max(24px, 5vw)) 0) !important;
}

body.drawer-open .lines,
body.ziel-modal-open .lines{
    pointer-events:none;
}

/* Clear, task-oriented search layout */
.library-control-tools{
    gap:clamp(16px, 2vw, 24px);
}

.library-search-intro{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:24px;
}

.library-search-copy{
    min-width:0;
    display:grid;
    gap:8px;
}

.library-search-kicker{
    width:max-content;
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:7px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.09);
    border:1px solid rgba(255,255,255,0.13);
    color:rgba(255,255,255,0.78);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.12em;
}

.library-search-copy p{
    max-width:680px;
    margin:0;
    color:rgba(255,255,255,0.68);
    font-size:clamp(12px, 1.1vw, 15px);
    line-height:1.45;
    font-weight:650;
}

.library-search-result{
    flex:0 0 auto;
    min-width:100px;
    min-height:74px;
    padding:12px 16px;
    border-radius:20px;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    justify-content:center;
    background:linear-gradient(145deg, rgba(255,255,255,0.13), rgba(255,255,255,0.06));
    border:1px solid rgba(255,255,255,0.15);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.12);
}

.library-search-result strong{
    color:#fff;
    font-size:clamp(25px, 2.4vw, 36px);
    line-height:0.9;
    font-weight:950;
    letter-spacing:-0.06em;
    font-variant-numeric:tabular-nums;
}

.library-search-result span{
    margin-top:7px;
    color:rgba(255,255,255,0.58);
    font-size:10px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.11em;
}

.library-filter-box{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:12px;
}

.filter-field-search{
    grid-column:1 / -1;
}

.filter-field-language{
    grid-column:span 3;
}

.filter-field-author{
    grid-column:span 4;
}

.filter-field-small{
    grid-column:span 2;
}

.library-filter-actions{
    grid-column:span 3;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0, 1.25fr) minmax(0, 0.95fr);
    gap:8px;
}

.library-search-input-wrap{
    position:relative;
    display:flex;
    align-items:center;
    min-width:0;
}

.library-search-icon{
    position:absolute;
    left:16px;
    top:50%;
    width:22px;
    height:22px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    color:rgba(255,255,255,0.55);
    pointer-events:none;
    z-index:2;
}

.library-search-icon svg{
    display:block;
    width:100%;
    height:100%;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
}

.filter-box .library-search-input-wrap input[type="search"]{
    height:58px;
    padding:0 56px 0 50px;
    border-radius:18px;
    background:linear-gradient(145deg, rgba(12,22,35,0.94), rgba(17,29,45,0.86));
    border:1px solid rgba(255,255,255,0.17);
    color:#fff;
    font-size:clamp(14px, 1.25vw, 17px);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.05);
}

.filter-box .library-search-input-wrap input[type="search"]:focus{
    border-color:rgba(97,207,242,0.88);
    box-shadow:0 0 0 4px rgba(0,143,207,0.17), inset 0 1px 0 rgba(255,255,255,0.07);
}

.library-search-clear{
    position:absolute;
    right:10px;
    top:50%;
    width:38px;
    height:38px;
    transform:translateY(-50%);
    display:grid;
    place-items:center;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:50%;
    background:rgba(255,255,255,0.08);
    color:rgba(255,255,255,0.86);
    cursor:pointer;
    font-size:22px;
    line-height:1;
    transition:background 160ms ease, transform 160ms ease;
}

.library-search-clear:hover,
.library-search-clear:focus-visible{
    background:rgba(255,255,255,0.16);
    transform:translateY(-50%) scale(1.04);
    outline:none;
}

.library-filter-box select,
.library-filter-actions .filter-submit,
.library-filter-actions .filter-reset{
    height:48px;
    min-height:48px;
    border-radius:14px;
}

.library-filter-actions .filter-submit,
.library-filter-actions .filter-reset{
    width:100%;
    padding:0 12px;
    white-space:normal;
    line-height:1.1;
}

.filter-reset:disabled{
    opacity:0.42;
    cursor:not-allowed;
    transform:none !important;
}

.library-filter-box.is-submitting{
    opacity:0.74;
    pointer-events:none;
}

.library-filter-status{
    display:grid;
    gap:12px;
    padding-top:16px;
    border-top:1px solid rgba(255,255,255,0.11);
}

.library-filter-status-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:14px;
}

.library-filter-status-heading > div{
    display:grid;
    gap:4px;
}

.library-filter-status-heading span{
    color:rgba(255,255,255,0.88);
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.library-filter-status-heading small{
    color:rgba(255,255,255,0.52);
    font-size:11px;
    line-height:1.3;
    font-weight:650;
}

.library-filter-reset-form button{
    padding:0;
    border:0;
    border-bottom:1px solid rgba(255,255,255,0.38);
    background:transparent;
    color:rgba(255,255,255,0.70);
    cursor:pointer;
    font-size:11px;
    line-height:1.3;
    font-weight:800;
}

.library-active-filter-list{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
}

.library-filter-remove-form,
.library-filter-reset-form{
    margin:0;
}

.library-active-filter-chip{
    min-height:38px;
    max-width:min(100%, 430px);
    padding:7px 9px 7px 12px;
    display:flex;
    align-items:center;
    gap:8px;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:999px;
    background:rgba(255,255,255,0.09);
    color:#fff;
    cursor:pointer;
    transition:background 160ms ease, border-color 160ms ease, transform 160ms ease;
}

.library-active-filter-chip span{
    flex:0 0 auto;
    color:rgba(255,255,255,0.52);
    font-size:9px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.library-active-filter-chip strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    color:rgba(255,255,255,0.92);
    font-size:11px;
    line-height:1.2;
    font-weight:850;
}

.library-active-filter-chip b{
    flex:0 0 auto;
    width:24px;
    height:24px;
    display:grid;
    place-items:center;
    border-radius:50%;
    background:rgba(255,255,255,0.10);
    color:#fff;
    font-size:17px;
    line-height:1;
    font-weight:400;
}

.library-active-filter-chip:hover,
.library-active-filter-chip:focus-visible{
    background:rgba(255,255,255,0.15);
    border-color:rgba(255,255,255,0.28);
    transform:translateY(-1px);
    outline:none;
}

.library-filter-remove-form.is-submitting,
.library-filter-reset-form.is-submitting{
    opacity:0.55;
    pointer-events:none;
}

.library-no-active-filter{
    color:rgba(255,255,255,0.48);
    font-size:12px;
    line-height:1.4;
}

/* Premium, tactile book index seal */
.book-cover-number{
    top:18px;
    right:18px;
    width:74px;
    min-width:74px;
    height:74px;
    padding:8px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:24px 24px 24px 8px;
    background:
        radial-gradient(circle at 28% 18%, rgba(255,255,255,0.98), transparent 34%),
        linear-gradient(145deg, #fffdf4, #e7d6a7);
    border:1px solid rgba(255,255,255,0.72);
    box-shadow:
        inset 0 0 0 1px rgba(102,79,28,0.10),
        inset 0 -12px 26px rgba(119,84,19,0.08),
        0 14px 28px rgba(0,0,0,0.18);
    overflow:hidden;
    transform:rotate(1.5deg);
    transition:transform 220ms ease, box-shadow 220ms ease;
}

.book-cover-number::before{
    content:"";
    position:absolute;
    inset:6px;
    border:1px solid rgba(119,89,31,0.18);
    border-radius:18px 18px 18px 5px;
    pointer-events:none;
}

.book-cover-number::after{
    content:"";
    position:absolute;
    width:28px;
    height:28px;
    right:-8px;
    bottom:-8px;
    border-radius:50%;
    background:rgba(171,125,36,0.16);
    pointer-events:none;
}

.book-cover-number-label{
    position:relative;
    z-index:1;
    color:rgba(72,62,35,0.62);
    font-size:9px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:0.14em;
}

.book-cover-number strong{
    position:relative;
    z-index:1;
    color:#314b3c;
    font-size:clamp(24px, 2.2vw, 31px);
    line-height:0.96;
    font-weight:950;
    letter-spacing:-0.07em;
    font-variant-numeric:tabular-nums;
}


.main-ziel-card-count{
    /* display:none; */
    font-variant-numeric:tabular-nums;
}

@media(max-width:1050px){
    .filter-field-language{
        grid-column:span 4;
    }

    .filter-field-author{
        grid-column:span 8;
    }

    .filter-field-small{
        grid-column:span 4;
    }

    .library-filter-actions{
        grid-column:span 8;
    }
}

@media(max-width:680px){
    .library-search-intro{
        align-items:center;
    }

    .library-search-result{
        min-width:82px;
        min-height:66px;
        padding:10px 13px;
        border-radius:17px;
    }

    .filter-field-language,
    .filter-field-author,
    .filter-field-small,
    .library-filter-actions{
        grid-column:1 / -1;
    }

    .library-filter-actions{
        grid-template-columns:1fr 1fr;
    }

    .library-filter-status-heading{
        align-items:flex-start;
    }

    .library-active-filter-chip{
        max-width:100%;
    }
}

@media(max-width:440px){
    .library-search-intro{
        align-items:flex-start;
    }

    .library-search-copy p{
        font-size:12px;
    }

    .library-search-result{
        min-width:70px;
        min-height:60px;
        padding:9px 11px;
    }

    .filter-box .library-search-input-wrap input[type="search"]{
        height:54px;
        padding-left:46px;
        font-size:14px;
    }

    .library-search-icon{
        left:14px;
        width:20px;
        height:20px;
    }

    .library-filter-actions{
        grid-template-columns:1fr;
    }

    .library-filter-status-heading{
        display:grid;
        gap:8px;
    }

    .library-active-filter-list{
        display:grid;
        grid-template-columns:1fr;
    }

    .library-active-filter-chip{
        width:100%;
    }

    .book-cover-number{
        width:64px;
        min-width:64px;
        height:64px;
        border-radius:20px 20px 20px 7px;
    }

    .book-cover-number::before{
        border-radius:15px 15px 15px 4px;
    }
}


/* ========================================================================== 
   UX refinement v3: in-place login, minimal library controls, modern tags
   ========================================================================== */

/* Restore the original recommendation palette. */
.empfehlung-color-1{--badge-start:#fff7df;--badge-end:#14b8a6;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-2{--badge-start:#7c3aed;--badge-end:#c026d3;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-3{--badge-start:#0b5f46;--badge-end:#58c77a;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-4{--badge-start:#059669;--badge-end:#65a30d;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-5{--badge-start:#db2777;--badge-end:#fb7185;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-6{--badge-start:#d97706;--badge-end:#facc15;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-7{--badge-start:#0891b2;--badge-end:#2dd4bf;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-8{--badge-start:#4338ca;--badge-end:#818cf8;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-9{--badge-start:#dc2626;--badge-end:#f97316;--badge-glow:rgba(255,255,255,0.38);}
.empfehlung-color-10{--badge-start:#4d7c0f;--badge-end:#14b8a6;--badge-glow:rgba(255,255,255,0.38);}

/* The library controls never create a nested scroll area or horizontal rail. */
.library-books-section,
.library-books-shell,
.library-control-panel,
.library-control-tools,
.library-filter-box{
    min-width:0;
    max-width: 100%;
    overflow:visible;
}

.library-control-panel{
    grid-template-columns:minmax(150px, 0.24fr) minmax(0, 1.76fr);
    gap:0;
    padding:0;
    background:rgba(0,0,0,0.20);
    padding: clamp(20px, 2.6vw, 36px) var(--site-panel-padding) 30px;
}

.library-control-heading{
    min-height:0;
    padding:22px;
    justify-content:center;
    border-right:1px solid rgba(255,255,255,0.12);
}

.library-heading-row{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.library-result-inline{
    display:inline-flex;
    align-items:center;
    min-height:28px;
    padding:6px 10px;
    border-radius:999px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.12);
    color:rgba(255,255,255,0.68);
    font-size:11px;
    line-height:1;
    font-weight:800;
    white-space:nowrap;
}

.library-control-tools{
    gap:10px;
    padding:18px;
}

.library-search-intro,
.library-filter-status{
    display:none !important;
}

.library-filter-box{
    display:grid;
    grid-template-columns:minmax(260px, 2fr) minmax(150px, 0.72fr) minmax(190px, 1fr) auto;
    align-items:end;
    gap:10px;
    width:100%;
}

.filter-field-search,
.filter-field-language,
.filter-field-author,
.library-filter-actions{
    grid-column:auto;
}

.filter-field{
    gap:6px;
}

.filter-field label{
    color:rgba(255,255,255,0.56);
    font-size:9px;
    letter-spacing:0.1em;
}

.filter-box .library-search-input-wrap input[type="search"],
.library-filter-box select{
    height:46px;
    min-height:46px;
    border-radius:12px;
    background:rgba(12,22,35,0.86);
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:none;
}

.filter-box .library-search-input-wrap input[type="search"]{
    padding:0 48px 0 43px;
    font-size:14px;
}

.library-search-icon{
    left:14px;
    width:19px;
    height:19px;
}

.library-search-clear{
    right:7px;
    width:32px;
    height:32px;
    border-radius:9px;
    font-size:18px;
}

.library-filter-actions{
    min-width:180px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
}

.library-filter-actions .filter-submit,
.library-filter-actions .filter-reset{
    min-height:46px;
    height:46px;
    padding:0 14px;
    border-radius:12px;
    white-space:nowrap;
    font-size:11px;
}

.library-active-filter-list{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
    padding-top:2px;
}

.library-active-filter-chip{
    min-height:32px;
    max-width:min(100%, 360px);
    padding:5px 6px 5px 10px;
    gap:7px;
    background:rgba(255,255,255,0.07);
}

.library-active-filter-chip strong{
    font-size:10.5px;
}

.library-active-filter-chip b{
    width:21px;
    height:21px;
    font-size:15px;
}

/* Compact modern catalogue tag. */
.book-cover-number{
    position:absolute;
    top:18px;
    right:18px;
    width:auto;
    min-width:48px;
    height:32px;
    padding:0 11px;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:2px;
    border-radius:999px;
    background:rgba(7,17,29,0.74);
    border:1px solid rgba(255,255,255,0.22);
    box-shadow:0 8px 20px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.08);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    overflow:visible;
    transform:none;
    transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.book-cover-number::before,
.book-cover-number::after{
    content:none;
    display:none;
}

.book-cover-number > span{
    color:rgba(255,255,255,0.48);
    font-size:12px;
    line-height:1;
    font-weight:800;
}

.book-cover-number strong{
    color:#ffffff;
    font-size:13px;
    line-height:1;
    font-weight:900;
    letter-spacing:0;
    font-variant-numeric:tabular-nums;
}

/* Login content swaps inside the open drawer; no drawer close/reopen animation. */
.drawer-login-section,
.drawer-read-section{
    transition:opacity 160ms ease;
}

@media(max-width:1100px){
    .library-filter-box{
        grid-template-columns:minmax(240px, 1.4fr) minmax(150px, 0.7fr) minmax(190px, 1fr);
    }

    .library-filter-actions{
        grid-column:1 / -1;
        width:min(100%, 360px);
        min-width:0;
    }
}

@media(max-width:760px){
    .library-control-panel{
        grid-template-columns:1fr;
    }

    .library-control-heading{
        padding:17px 16px 10px;
        border-right:0;
    }

    .library-heading-row{
        width:100%;
        flex-direction:row;
        align-items:center;
        justify-content:space-between;
        gap:14px;
    }

    .library-control-tools{
        padding:10px 16px 17px;
    }

    .library-filter-box{
        grid-template-columns:1fr 1fr;
    }

    .filter-field-search{
        grid-column:1 / -1;
    }

    .filter-field-language,
    .filter-field-author{
        grid-column:auto;
    }

    .library-filter-actions{
        grid-column:1 / -1;
        width:100%;
    }
}

@media(max-width:520px){
    .library-control-heading h1{
        font-size:clamp(31px, 10vw, 42px);
    }

    .library-filter-box{
        grid-template-columns:1fr;
        gap:9px;
    }

    .filter-field-search,
    .filter-field-language,
    .filter-field-author,
    .library-filter-actions{
        grid-column:1 / -1;
    }

    .library-filter-actions{
        grid-template-columns:1fr 1fr;
    }

    .library-active-filter-list{
        display:grid;
        grid-template-columns:1fr;
    }

    .library-active-filter-chip{
        width:100%;
        max-width:100%;
        justify-content:space-between;
    }

    .book-cover-number{
        top:15px;
        right:15px;
        min-width:44px;
        height:30px;
        padding:0 10px;
    }
}

/* ========================================================================== 
   Refinement v5: restored catalogue layout with refined details
   ========================================================================== */

/* The overview is supporting desktop content and stays hidden on phones. */
@media(max-width:768px){
    .active-goals-hero .main-ziel-right-panel{
        display:none !important;
    }

    .active-goals-hero .main-ziel-left-panel{
        padding-bottom:clamp(18px, 5vw, 26px);
    }
}

/* Do not show a total count next to the catalogue heading. */
.library-result-inline{
    display:none !important;
}

.library-heading-row{
    width:100%;
    display:flex;
    align-items:flex-end;
    justify-content:flex-start;
}

/*
 * Restore the earlier square catalogue-card layout. The newer cover palette,
 * author treatment, language tags and compact number tag are retained.
 */
.books-grid{
    grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
    gap:24px;
    align-items:stretch;
    padding:
        clamp(20px, 2.6vw, 36px)
        var(--site-panel-padding)
        30px;
}

.book-card{
    --book-cover-start:#0a2540;
    --book-cover-end:#124e66;
    --book-accent:#7dd3fc;
    position:relative;
    min-width:0;
    min-height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:0;
    background:#00000030;
    box-shadow:none;
    isolation:isolate;
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
    transition:
        transform 200ms ease,
        border-color 200ms ease,
        box-shadow 200ms ease;
}

.book-card:nth-child(4n + 2){
    --book-cover-start:#12273f;
    --book-cover-end:#31506b;
    --book-accent:#bfdbfe;
}

.book-card:nth-child(4n + 3){
    --book-cover-start:#102f32;
    --book-cover-end:#27605d;
    --book-accent:#99f6e4;
}

.book-card:nth-child(4n + 4){
    --book-cover-start:#242542;
    --book-cover-end:#51466f;
    --book-accent:#ddd6fe;
}

.book-card:focus-within{
    border-color:rgba(125,211,252,0.55);
    box-shadow:0 0 0 3px rgba(56,189,248,0.14), 0 24px 55px rgba(0,0,0,0.18);
}

.book-cover{
    position:relative;
    min-height:232px;
    padding:32px 30px 30px 40px;
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    justify-content:flex-end;
    overflow:hidden;
    background:
        radial-gradient(circle at 12% 18%, rgba(255,255,255,0.14), transparent 26%),
        linear-gradient(145deg, var(--book-cover-start), var(--book-cover-end));
}

.book-cover::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.10), transparent 44%);
    pointer-events:none;
}

.book-cover::after{
    content:none;
    display:none;
}

.book-cover-title{
    position:relative;
    z-index:2;
    min-width:0;
    width:100%;
    margin-top:56px;
    padding: 0 0px 0 0;
}

.book-cover h3{
    margin:0;
    max-width:100%;
    color:#ffffff;
    font-size:30px;
    line-height:1.06;
    font-weight:900;
    letter-spacing:-0.02em;
    overflow-wrap:anywhere;
}

/* Keep the cleaner author presentation from the newer card version. */
.book-cover-author{
    position:relative;
    z-index:2;
    display:block;
    width:auto;
    margin:11px 0 0;
    padding:0;
    border:0;
    border-radius:0;
    background:transparent;
    color:rgba(255,255,255,0.72);
    font-size:12px;
    line-height:1.4;
    font-weight:700;
    letter-spacing:0;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    white-space:normal;
    overflow-wrap:anywhere;
}

/* Compact modern catalogue-number tag. */
.book-cover-number{
    position:absolute;
    top:18px;
    right:18px;
    z-index:3;
    width:auto;
    min-width:62px;
    height:34px;
    padding:0 11px;
    display:inline-flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    gap:6px;
    border:1px solid rgba(255,255,255,0.24);
    background:rgba(4,12,22,0.55);

    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transform:none;
    overflow:hidden;
    transition:background 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.book-cover-number::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    bottom:0;
    width:3px;
    border:0;
    border-radius:0;
    background:var(--book-accent);
    opacity:0.9;
}

.book-cover-number::after{
    content:none;
    display:none;
}

.book-cover-number-label{
    position:relative;
    z-index:1;
    color:rgba(255,255,255,0.57);
    font-size:9px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.10em;
}

.book-cover-number strong{
    position:relative;
    z-index:1;
    color:#ffffff;
    font-size:14px;
    line-height:1;
    font-weight:900;
    letter-spacing:-0.02em;
    font-variant-numeric:tabular-nums;
}


.book-content{
    min-width:0;
    padding:25px 25px 25px 40px;
    display:flex;
    flex:1;
    flex-direction:column;
    gap:15px;
    background:transparent;
}

.book-desc{
    max-height:90px;
    min-height:0;
    overflow:hidden;
    color:#ffffff;
}

.book-desc p{
    margin:0;
    font-size:16px;
    line-height:1.4;
    font-weight:500;
    display:block;
    overflow:visible;
}

.book-card-footer{
    min-width:0;
    margin-top:auto;
    display:flex;
    flex-direction:column;
    gap:15px;
}

/* Keep the refined compact language-tag design from the newer version. */
.tags{
    min-width:0;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:7px;
}

.tag{
    min-height:27px;
    max-width:100%;
    padding:5px 9px;
    display:inline-flex;
    align-items:center;
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    background:rgba(255,255,255,0.065);
    color:rgba(255,255,255,0.78);
    font-size:10px;
    line-height:1.15;
    font-weight:800;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

.tag-more{
    flex:0 0 auto;
    color:#ffffff;
    background:rgba(255,255,255,0.11);
}

.actions{
    width:100%;
    margin:0;
    display:flex;
}

/* The label and arrow are centred as one clear action. */
.read-btn{
    width:100%;
    min-height:48px;
    padding:0 16px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    border:1px solid rgba(255,255,255,0.82);
    border-radius:0;
    background:rgba(255,255,255,0.96);
    color:#07111e;
    box-shadow:none;
    cursor:pointer;
    font-size:12px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    transition:transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.read-btn span{
    display:inline-flex;
    align-items:center;
    justify-content:center;
}

.read-btn svg{
    width:17px;
    height:17px;
    flex:0 0 auto;
    fill:none;
    stroke:currentColor;
    stroke-width:1.8;
    stroke-linecap:round;
    stroke-linejoin:round;
    transition:transform 180ms ease;
}

.read-btn:hover svg{
    transform:translateX(2px);
}

.read-btn:focus-visible{
    outline:3px solid rgba(125,211,252,0.32);
    outline-offset:3px;
}

/* Empty states and pagination follow the same inner alignment as the cards. */
.library-books-shell > .empty{
    margin-left:var(--site-panel-padding);
    margin-right:var(--site-panel-padding);
}

.pagination-wrap{
    width:min(
        calc(var(--site-content-max) - (var(--site-panel-padding) * 2)),
        calc(100% - var(--site-page-space) - (var(--site-panel-padding) * 2))
    );
}

@media(max-width:700px){
    .books-grid{
        grid-template-columns:1fr;
        gap:15px;
    }

    .book-cover{
        min-height:208px;
        padding:24px 22px 22px 28px;
    }

    .book-cover-title{
        margin-top:48px;
        padding-right: 0px;
    }

    .book-cover h3{
        font-size:clamp(24px, 7.3vw, 31px);
    }

    .book-cover-number{
        top:16px;
        right:16px;
        min-width:58px;
        height:32px;
    }

    .book-content{
        padding:20px 20px 20px 28px;
        gap:14px;
    }

    .book-desc p{
        font-size:14px;
        line-height:1.45;
    }
}

@media(max-width:390px){
    .books-grid{
        padding-left:clamp(12px, 4vw, var(--site-panel-padding));
        padding-right:clamp(12px, 4vw, var(--site-panel-padding));
    }

    .book-cover{
        min-height:196px;
        padding:22px 18px 20px 24px;
    }

    .book-cover-title{
        margin-top:44px;
        padding-right:68px;
    }

    .book-cover-number{
        top:14px;
        right:14px;
    }

    .book-content{
        padding:18px 18px 18px 24px;
    }

    .tag{
        max-width:150px;
    }
}

@media(prefers-reduced-motion:reduce){
    .book-card,
    .book-cover-number,
    .read-btn,
    .read-btn svg{
        transition:none !important;
    }
}


/* ========================================================================== 
   Final responsive stabilization: mobile excerpts, search UX and fluid scaling
   ========================================================================== */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    width:100%;
    min-width:0;
}

button,
input,
select,
a{
    -webkit-tap-highlight-color:transparent;
}

/* Only the supporting overview in Active Ziele is hidden on phones. */
@media(max-width:768px){
    .main-ziel-hero-heading{
        padding-top:clamp(20px, 6vw, 28px);
        padding-bottom: clamp(28px, 15vh, 90px);
    }

    .active-goals-hero .main-ziel-hero-heading{
        padding-bottom:clamp(14px, 4.5vw, 22px);
    }

    .active-goals-hero .main-ziel-right-panel{
        display:none !important;
    }

    .bundesbibliothek-hero .bundesbibliothek-right-panel{
        display:block !important;
        padding:
            clamp(8px, 2.8vw, 14px)
            var(--site-panel-padding)
            clamp(22px, 6vw, 32px);
    }

    .bundesbibliothek-excerpt-slider,
    .bundesbibliothek-excerpt-slide,
    .bundesbibliothek-excerpt-card{
        width:100%;
        max-width:none;
        min-width:0;
        max-height:30vh;
        overflow-y: scroll;
    }

    .bundesbibliothek-excerpt-text{
        width:100%;
        margin:0;
        padding:clamp(18px, 5vw, 24px);
        font-size:clamp(17px, 5.2vw, 23px);
        line-height:1.18;
        overflow-wrap:anywhere;
        hyphens:auto;
    }
}

/* Search: one strong primary row, then aligned filters and actions. */
.library-control-panel{
    grid-template-columns:minmax(220px, 0.30fr) minmax(0, 1.70fr);
    padding:0;
    max-width:95%;
        margin:auto;
}

.library-control-heading,
.library-control-tools{
    padding-left:var(--site-panel-padding);
    padding-right:var(--site-panel-padding);
}

.library-heading-row{
    align-items:flex-start;
    justify-content:flex-start;
}

.library-control-heading{
    padding-top:clamp(20px, 2.4vw, 30px);
    padding-bottom:clamp(20px, 2.4vw, 30px);
}

.library-control-tools{
    padding-top:clamp(18px, 2.2vw, 28px);
    padding-bottom:clamp(18px, 2.2vw, 28px);
    gap:clamp(10px, 1.3vw, 16px);
}

.library-filter-box{
    grid-template-columns:repeat(12, minmax(0, 1fr));
    gap:clamp(9px, 1vw, 13px);
}

.filter-field-search{
    grid-column:1 / -1;
}

.filter-field-language{
    grid-column:span 3;
}

.filter-field-author{
    grid-column:span 5;
}

.library-filter-actions{
    grid-column:span 4;
    width:100%;
    min-width:0;
}

.filter-box .library-search-input-wrap input[type="search"]{
    height:clamp(50px, 4.2vw, 58px);
    min-height:50px;
    padding-left:clamp(42px, 4vw, 50px);
    padding-right:clamp(46px, 4.4vw, 56px);
    border-radius:clamp(13px, 1.4vw, 18px);
    font-size:clamp(15px, 1.15vw, 17px);
}

.library-search-hint{
    margin:1px 2px 0;
    color:rgba(255,255,255,0.50);
    font-size:clamp(10px, 0.85vw, 12px);
    line-height:1.4;
    font-weight:650;
}

.library-results-summary{
    margin:0;
    color:rgba(255,255,255,0.58);
    font-size:11px;
    line-height:1.35;
    font-weight:750;
}

.library-filter-actions .filter-submit,
.library-filter-actions .filter-reset,
.library-filter-box select{
    min-height:46px;
}

@media(max-width:1050px){
    .filter-field-language{
        grid-column:span 4;
    }

    .filter-field-author{
        grid-column:span 8;
    }

    .library-filter-actions{
        grid-column:1 / -1;
        width:min(100%, 420px);
    }
}

@media(max-width:900px){
    .library-control-panel{
        grid-template-columns:1fr;
    }

    .library-control-heading{
        border-right:0;
        border-bottom:1px solid rgba(255,255,255,0.12);
    }

    .library-heading-row{
        width:100%;
    }
}

@media(max-width:760px){
    .library-control-heading,
    .library-control-tools{
        padding-left:var(--site-panel-padding);
        padding-right:var(--site-panel-padding);
    }

    .library-control-heading{
        padding-top:clamp(16px, 4.5vw, 22px);
        padding-bottom:clamp(10px, 3vw, 16px);
    }

    .library-control-tools{
        padding-top:clamp(10px, 3vw, 16px);
        padding-bottom:clamp(16px, 4.5vw, 22px);
    }

    .library-filter-box{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .filter-field-search,
    .library-filter-actions{
        grid-column:1 / -1;
    }

    .filter-field-language,
    .filter-field-author{
        grid-column:span 1;
    }

    .filter-box .library-search-input-wrap input[type="search"],
    .library-filter-box select{
        font-size:16px;
    }
}

@media(max-width:520px){
    .library-filter-box{
        grid-template-columns:1fr;
    }

    .filter-field-search,
    .filter-field-language,
    .filter-field-author,
    .library-filter-actions{
        grid-column:1 / -1;
    }

    .library-filter-actions{
        grid-template-columns:repeat(2, minmax(0, 1fr));
        width:100%;
    }

    .library-active-filter-list{
        display:flex;
        flex-direction:column;
        align-items:stretch;
    }

    .library-active-filter-chip{
        width:100%;
        max-width:none;
        justify-content:space-between;
    }
}

/* Keep the feature cards proportional below 391px instead of stacking them. */
@media(max-width:390px){
    :root{
        --site-page-space:clamp(16px, 5vw, 20px);
        --site-panel-padding:clamp(13px, 4.2vw, 17px);
        --site-header-height:clamp(68px, 21vw, 76px);
    }

    .site-header-inner{
        gap:clamp(8px, 2.5vw, 12px);
    }

    .logo{
        gap:clamp(8px, 2.6vw, 10px);
    }

    .logoimg{
        width:clamp(40px, 12vw, 46px);
    }

    .logoname span:first-child{
        max-width:clamp(145px, 48vw, 184px);
        white-space:normal;
        font-size:clamp(9.5px, 3.05vw, 12px);
        line-height:1.08;
    }

    .logoname span:last-child{
        display:block;
        font-size:clamp(7.5px, 2.35vw, 9.5px);
        line-height:1.08;
    }

    .lines{
        width:clamp(38px, 12vw, 44px);
        height:clamp(38px, 12vw, 44px);
    }

    .main-ziel-hero-heading{
        padding-left:var(--site-panel-padding);
        padding-right:var(--site-panel-padding);
    }

    .main-ziel-feature-card,
    .bundesbibliothek-feature-card{
        grid-template-columns:clamp(78px, 25vw, 94px) minmax(0, 1fr);
        gap:clamp(8px, 2.6vw, 10px);
        min-height:0;
        padding:clamp(8px, 2.6vw, 10px);
        border-radius:clamp(18px, 6vw, 21px);
    }

    .main-ziel-percent-box,
    .bundesbibliothek-info-badge{
        width:100%;
        height:100%;
        min-height:clamp(100px, 32vw, 122px);
        border-radius:clamp(14px, 4.8vw, 17px);
    }

    .main-ziel-feature-content,
    .bundesbibliothek-feature-content{
        min-height:clamp(100px, 32vw, 122px);
    }

    .main-ziel-percent-box strong{
        font-size:clamp(24px, 8.4vw, 31px);
    }

    .bundesbibliothek-info-badge{
        align-items:flex-end;
        justify-content:flex-start;
        text-align:left;
        padding:clamp(9px, 3vw, 12px);
    }

    .bundesbibliothek-info-badge span{
        font-size:clamp(11px, 3.7vw, 14px);
    }

    .main-ziel-feature-content h3{
        font-size:clamp(15px, 4.9vw, 19px);
        line-height:1.07;
    }

    .main-ziel-card-kicker{
        max-width:72%;
        padding:5px 7px;
        font-size:clamp(7.5px, 2.35vw, 9px);
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap;
    }

    .main-ziel-card-count{
        font-size:clamp(12px, 4vw, 15px);
    }

    .main-ziel-progress-copy{
        padding-top:clamp(5px, 1.8vw, 8px);
        margin-bottom:clamp(4px, 1.4vw, 6px);
    }

    .main-ziel-progress-copy strong{
        font-size:clamp(9px, 2.9vw, 10.5px);
    }

    .main-ziel-progress-copy span{
        font-size:clamp(8px, 2.55vw, 9.4px);
    }

    .main-ziel-feature-actions{
        margin-top:clamp(6px, 2vw, 8px);
        gap:6px;
    }

    .main-ziel-order-btn,
    .main-ziel-edit-btn{
        min-height:clamp(30px, 9vw, 34px);
        padding:0 clamp(7px, 2.4vw, 10px);
        font-size:clamp(9px, 2.8vw, 11px);
    }

    .bundesbibliothek-language-pills{
        gap:4px;
        margin-top:7px;
    }

    .bundesbibliothek-language-pill{
        min-height:20px;
        padding:4px 6px;
        font-size:clamp(7.5px, 2.25vw, 8.5px);
    }

    .library-filter-actions{
        grid-template-columns:repeat(2, minmax(0, 1fr));
    }

    .books-grid{
        padding-left:var(--site-panel-padding);
        padding-right:var(--site-panel-padding);
    }

    .book-cover{
        min-height:clamp(188px, 58vw, 205px);
        padding:clamp(19px, 6vw, 23px) clamp(16px, 5vw, 20px) clamp(18px, 5.5vw, 21px) clamp(21px, 6.5vw, 25px);
    }

    .book-cover-title{
        margin-top:clamp(40px, 13vw, 46px);
        padding-right:clamp(56px, 18vw, 68px);
    }

    .book-cover h3{
        font-size:clamp(22px, 7.4vw, 28px);
    }

    .book-content{
        padding:clamp(17px, 5.2vw, 20px) clamp(16px, 5vw, 19px) clamp(17px, 5.2vw, 20px) clamp(21px, 6.5vw, 25px);
    }
}

@media(max-width:340px){
    .logoname span:first-child{
        max-width:132px;
    }

    .main-ziel-feature-card,
    .bundesbibliothek-feature-card{
        grid-template-columns:74px minmax(0, 1fr);
    }

    .main-ziel-percent-box,
    .bundesbibliothek-info-badge,
    .main-ziel-feature-content,
    .bundesbibliothek-feature-content{
        min-height:96px;
    }

    .library-filter-actions{
        grid-template-columns:1fr;
    }
}


/* ==========================================================================
   2026 UX refinement: goals, responsive modal, footer and excerpt sizing
   ========================================================================== */

:root{
    --goal-ink:#07111d;
    --goal-ink-soft:#132238;
    --goal-panel:#f8fafc;
    --goal-line:rgba(15,23,42,0.12);
    --goal-accent:#20c997;
    --goal-accent-strong:#0d9f79;
    --goal-accent-pale:#d9fff2;
    --goal-warm:#ffd166;
    --goal-danger:#d9465f;
    --goal-shadow:0 30px 100px rgba(0,0,0,0.38);
}

/* The excerpt height now follows only the active excerpt. */
.bundesbibliothek-excerpt-slider{
    position:relative !important;
    display:block !important;
    width:100%;
    min-height:0 !important;
    overflow:hidden;
    transition:height 340ms cubic-bezier(.2,.8,.2,1);
    will-change:height;
}

.bundesbibliothek-excerpt-slider:not(.is-resizing){
    transition-duration:220ms;
}

.bundesbibliothek-excerpt-slide{
    position:absolute !important;
    inset:0 0 auto 0;
    width:100%;
    grid-area:auto !important;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}

.bundesbibliothek-excerpt-slide.is-active{
    position:relative !important;
    inset:auto;
    opacity:1;
    visibility:visible;
    pointer-events:auto;
}

.bundesbibliothek-excerpt-card{
    min-height:0 !important;
    height:auto !important;
}

.bundesbibliothek-excerpt-text{
    min-height:0 !important;
    height:auto !important;
}

/* More inviting goal entry point inside the drawer. */
.ziel-drawer-card{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:18px;
    align-items:center;
    padding:22px;
    border:1px solid rgba(32,201,151,0.28);
    border-radius:24px;
    background:
        radial-gradient(circle at 90% 10%, rgba(32,201,151,0.28), transparent 30%),
        linear-gradient(135deg, rgba(6,36,65,0.97), rgba(7,17,29,0.97));
    box-shadow:0 18px 48px rgba(2,6,23,0.28);
}

.ziel-drawer-eyebrow{
    color:#9ff4d6 !important;
    background:rgba(32,201,151,0.12) !important;
    border-color:rgba(32,201,151,0.24) !important;
}

.ziel-drawer-copy strong{
    font-size:clamp(20px,2vw,27px) !important;
    letter-spacing:-0.045em;
}

.ziel-drawer-copy small{
    max-width:380px;
    margin-top:5px;
    color:rgba(255,255,255,0.68) !important;
    line-height:1.45;
}

.ziel-add-button{
    min-width:132px;
    min-height:52px;
    border-radius:16px !important;
    border:1px solid rgba(255,255,255,0.18) !important;
    background:linear-gradient(135deg,#20c997,#79f2c0) !important;
    color:#052419 !important;
    box-shadow:0 14px 34px rgba(32,201,151,0.28);
    transition:transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.ziel-add-button:hover{
    transform:translateY(-2px) scale(1.01);
    box-shadow:0 18px 42px rgba(32,201,151,0.36);
    filter:saturate(1.08);
}

.ziel-add-button span{
    display:inline-grid;
    place-items:center;
    width:24px;
    height:24px;
    margin-right:8px;
    border-radius:50%;
    background:rgba(5,36,25,0.12);
    font-size:18px;
}

/* Goal modal shell. */
.ziel-modal-overlay{
    z-index:12000 !important;
    padding:clamp(12px,2vw,28px) !important;
    backdrop-filter:blur(18px) saturate(1.1) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.1) !important;
}

.ziel-modal{
    position:relative;
    width:min(1160px,100%) !important;
    max-width:1160px !important;
    max-height:min(900px,calc(100dvh - 32px)) !important;
    padding:0 !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,0.16) !important;
    border-radius:32px !important;
    color:var(--goal-ink) !important;
    box-shadow:var(--goal-shadow) !important;
    transform:translateY(20px) scale(.975) !important;
    opacity:0;
}

.ziel-modal-overlay.is-open .ziel-modal,
.ziel-modal.is-open{
    transform:translateY(0) scale(1) !important;
    opacity:1;
}

.ziel-modal-layout{
    display:grid;
    grid-template-columns:minmax(320px,.78fr) minmax(0,1.22fr);
    min-height:min(760px,calc(100dvh - 32px));
    max-height:min(900px,calc(100dvh - 32px));
}

.ziel-modal-close{
    z-index:8;
    top:18px !important;
    right:18px !important;
    width:42px !important;
    height:42px !important;
    border-radius:14px !important;
    border:1px solid rgba(255,255,255,0.16) !important;
    background:rgba(7,17,29,0.78) !important;
    color:#fff !important;
    font-size:25px !important;
    box-shadow:0 12px 28px rgba(0,0,0,0.22);
    transition:transform 180ms ease, background 180ms ease;
}

.ziel-modal-close:hover{
    transform:rotate(6deg) scale(1.04);
    background:#12243a !important;
}

.ziel-modal-visual{
    position:relative;
    isolation:isolate;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    gap:24px;
    padding:clamp(34px,4vw,58px);
    color:#fff;
    background:
        radial-gradient(circle at 15% 10%, rgba(121,242,192,0.25), transparent 26%),
        radial-gradient(circle at 100% 80%, rgba(0,143,207,0.30), transparent 34%),
        linear-gradient(155deg,#07111d 0%,#0b2432 55%,#073f3a 100%);
}

.ziel-modal-visual::before,
.ziel-modal-visual::after{
    content:"";
    position:absolute;
    z-index:-1;
    border:1px solid rgba(255,255,255,0.08);
    border-radius:50%;
}

.ziel-modal-visual::before{
    width:360px;
    height:360px;
    right:-170px;
    top:70px;
}

.ziel-modal-visual::after{
    width:220px;
    height:220px;
    right:-96px;
    top:140px;
}

.ziel-modal-visual--edit{
    background:
        radial-gradient(circle at 15% 10%, rgba(255,209,102,0.19), transparent 28%),
        radial-gradient(circle at 100% 84%, rgba(217,70,95,0.18), transparent 36%),
        linear-gradient(155deg,#111827 0%,#1f2937 52%,#3b2630 100%);
}

.ziel-modal-visual-copy{
    display:grid;
    gap:14px;
}

.ziel-modal-badge{
    width:max-content;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    padding:0 11px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.09);
    color:#b9ffe5 !important;
    font-size:10px !important;
    font-weight:900 !important;
    letter-spacing:.11em !important;
    text-transform:uppercase;
}

.ziel-modal--edit .ziel-modal-badge{
    color:#ffe4a7 !important;
}

.ziel-modal-visual h3{
    max-width:470px;
    margin:0;
    color:#fff !important;
    font-size:clamp(34px,4vw,58px) !important;
    line-height:.96 !important;
    font-weight:950 !important;
    letter-spacing:-.07em !important;
}

.ziel-modal-visual-copy > p{
    max-width:470px;
    margin:0;
    color:rgba(255,255,255,0.68) !important;
    font-size:14px !important;
    line-height:1.55 !important;
}

.ziel-preview-card{
    position:relative;
    display:grid;
    gap:18px;
    margin-top:auto;
    padding:22px;
    border:1px solid rgba(255,255,255,0.14);
    border-radius:24px;
    background:rgba(255,255,255,0.09);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 24px 50px rgba(0,0,0,0.22);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
}

.ziel-preview-orbit{
    position:absolute;
    top:18px;
    right:18px;
    width:50px;
    height:50px;
    display:grid;
    place-items:center;
    border-radius:50%;
    border:1px solid rgba(121,242,192,0.30);
    background:rgba(32,201,151,0.13);
}

.ziel-preview-target{
    color:#8ff5d0;
    font-size:27px;
    line-height:1;
}

.ziel-preview-card--edit .ziel-preview-orbit{
    border-color:rgba(255,209,102,0.32);
    background:rgba(255,209,102,0.11);
}

.ziel-preview-card--edit .ziel-preview-target{
    color:#ffd166;
}

.ziel-preview-head{
    display:grid;
    gap:4px;
    padding-right:60px;
}

.ziel-preview-head span{
    color:rgba(255,255,255,0.52);
    font-size:10px;
    font-weight:900;
    letter-spacing:.1em;
    text-transform:uppercase;
}

.ziel-preview-head strong{
    color:#a5f3d6;
    font-size:12px;
}

.ziel-preview-card h4{
    max-width:88%;
    margin:0;
    color:#fff;
    font-size:clamp(20px,2vw,28px);
    line-height:1.08;
    letter-spacing:-.05em;
    overflow-wrap:anywhere;
}

.ziel-preview-stats{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:8px;
}

.ziel-preview-stats > div{
    min-width:0;
    display:grid;
    gap:5px;
    padding:11px;
    border:1px solid rgba(255,255,255,0.10);
    border-radius:14px;
    background:rgba(0,0,0,0.12);
}

.ziel-preview-stats span{
    color:rgba(255,255,255,0.48);
    font-size:9px;
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:.06em;
}

.ziel-preview-stats strong{
    min-width:0;
    color:#fff;
    font-size:11px;
    line-height:1.25;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

.ziel-preview-readiness{
    height:6px;
    overflow:hidden;
    border-radius:999px;
    background:rgba(255,255,255,0.12);
}

.ziel-preview-readiness span{
    display:block;
    width:33%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,#20c997,#a7f3d0);
    transition:width 260ms cubic-bezier(.2,.8,.2,1);
}

.ziel-preview-card > small{
    color:rgba(255,255,255,0.56);
    font-size:10px;
    line-height:1.4;
}

.ziel-modal-tip{
    display:flex;
    gap:12px;
    align-items:flex-start;
    color:rgba(255,255,255,0.62);
    font-size:11px;
    line-height:1.5;
}

.ziel-modal-tip > span{
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:grid;
    place-items:center;
    border-radius:10px;
    background:rgba(255,255,255,0.09);
    color:#a5f3d6;
}

.ziel-modal-tip p,
.ziel-modal-tip strong{
    margin:0;
}

.ziel-modal-tip strong{
    color:#fff;
}

.ziel-modal-form-panel{
    overflow:auto;
    overscroll-behavior:contain;
    background:
        linear-gradient(rgba(255,255,255,0.92),rgba(255,255,255,0.92)),
        radial-gradient(circle at 100% 0,rgba(32,201,151,0.16),transparent 26%);
}

.ziel-modal-mobile-heading{
    display:none;
}

.ziel-form{
    display:grid !important;
    gap:18px !important;
    padding:clamp(30px,4vw,54px) !important;
    color:var(--goal-ink) !important;
}

.ziel-form-message{
    position:sticky;
    top:0;
    z-index:4;
    margin:0 !important;
    border-radius:14px !important;
    box-shadow:0 10px 26px rgba(15,23,42,0.10);
}

.ziel-book-context{
    position:relative;
    overflow:hidden;
    display:grid;
    gap:4px;
    padding:18px 20px !important;
    border:1px solid rgba(13,159,121,0.18) !important;
    border-radius:18px !important;
    background:linear-gradient(135deg,#ecfff8,#f7fffc) !important;
}

.ziel-book-context::after{
    content:"B";
    position:absolute;
    right:12px;
    bottom:-24px;
    color:rgba(13,159,121,0.08);
    font-size:90px;
    font-weight:950;
    line-height:1;
}

.ziel-book-context span{
    color:#0d9f79 !important;
    font-size:9px !important;
    letter-spacing:.1em !important;
}

.ziel-book-context strong{
    position:relative;
    z-index:1;
    color:var(--goal-ink) !important;
    font-size:clamp(18px,2vw,24px) !important;
    line-height:1.12 !important;
    letter-spacing:-.045em !important;
}

.ziel-book-context small{
    position:relative;
    z-index:1;
    color:#64748b !important;
}

.ziel-form-section{
    display:grid;
    gap:14px;
    padding-top:4px;
}

.ziel-form-section + .ziel-form-section{
    padding-top:20px;
    border-top:1px solid var(--goal-line);
}

.ziel-form-section-heading{
    display:flex;
    gap:12px;
    align-items:flex-start;
}

.ziel-step-number{
    flex:0 0 auto;
    width:34px;
    height:34px;
    display:grid;
    place-items:center;
    border-radius:11px;
    background:var(--goal-ink);
    color:#fff;
    font-size:10px;
    font-weight:950;
    letter-spacing:.04em;
}

.ziel-form-section-heading > div{
    display:grid;
    gap:3px;
}

.ziel-form-section-heading strong{
    color:var(--goal-ink);
    font-size:15px;
    letter-spacing:-.025em;
}

.ziel-form-section-heading small{
    color:#64748b;
    font-size:11px;
    line-height:1.45;
}

.ziel-field{
    gap:8px !important;
}

.ziel-label{
    color:#475569 !important;
    font-size:9px !important;
    letter-spacing:.09em !important;
}

.ziel-input-wrap,
.ziel-select-wrap{
    min-height:54px !important;
    border:1px solid rgba(15,23,42,0.12) !important;
    border-radius:16px !important;
    background:#fff !important;
    box-shadow:0 8px 24px rgba(15,23,42,0.05);
    transition:border-color 180ms ease,box-shadow 180ms ease,transform 180ms ease;
}


.ziel-input-wrap input,
.ziel-select-wrap select{
    min-height:52px !important;
    color:var(--goal-ink) !important;
    background:transparent !important;
    font-size:14px !important;
    font-weight:800 !important;
}

.ziel-input-wrap > span{
    color:#64748b !important;
    font-size:11px !important;
}

.ziel-page-suggestions{
    display:flex;
    flex-wrap:wrap;
    gap:7px;
}

.ziel-page-suggestions button{
    min-width:48px;
    height:32px;
    border:1px solid rgba(15,23,42,0.10);
    border-radius:10px;
    background:#f1f5f9;
    color:#334155;
    cursor:pointer;
    font-size:11px;
    font-weight:900;
    transition:transform 160ms ease,background 160ms ease,border-color 160ms ease;
}

.ziel-page-suggestions button:hover{
    transform:translateY(-1px);
    border-color:rgba(13,159,121,0.30);
    background:#e4fff5;
    color:#087b5e;
}

.ziel-duration-grid{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:8px !important;
}

.ziel-duration-option > span{
    position:relative;
    min-height:118px !important;
    display:flex !important;
    flex-direction:column;
    align-items:flex-start !important;
    justify-content:flex-end;
    gap:4px;
    padding:14px !important;
    overflow:hidden;
    border:1px solid rgba(15,23,42,0.10) !important;
    border-radius:16px !important;
    background:#fff !important;
    color:var(--goal-ink) !important;
    box-shadow:0 8px 24px rgba(15,23,42,0.04);
    transition:transform 180ms ease,border-color 180ms ease,box-shadow 180ms ease,background 180ms ease;
}

.ziel-duration-option > span::after{
    content:"";
    position:absolute;
    width:70px;
    height:70px;
    right:-30px;
    top:-30px;
    border-radius:50%;
    background:rgba(32,201,151,0.07);
}

.ziel-duration-icon{
    margin-bottom:auto;
    color:#94a3b8;
    font-size:20px;
    line-height:1;
    letter-spacing:-.06em;
}

.ziel-duration-option strong{
    color:inherit !important;
    font-size:12px !important;
}

.ziel-duration-option small{
    color:#64748b !important;
    font-size:9px !important;
}

.ziel-duration-option input:checked + span{
    border-color:rgba(13,159,121,0.52) !important;
    background:linear-gradient(145deg,#effff9,#dffbef) !important;
    color:#086f56 !important;
    box-shadow:0 0 0 3px rgba(32,201,151,0.11),0 15px 30px rgba(13,159,121,0.12);
    transform:translateY(-2px);
}

.ziel-duration-option input:checked + span .ziel-duration-icon{
    color:#0d9f79;
}

.ziel-duration-option:hover > span{
    transform:translateY(-2px);
    border-color:rgba(13,159,121,0.28) !important;
}

.ziel-form-footer{
    position:sticky;
    bottom:0;
    z-index:3;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    gap:16px;
    align-items:center;
    margin:8px -8px -10px;
    padding:16px;
    border:1px solid rgba(15,23,42,0.08);
    border-radius:20px;
    background:rgba(255,255,255,0.92);
    box-shadow:0 -10px 30px rgba(15,23,42,0.06),0 16px 35px rgba(15,23,42,0.08);
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.ziel-form-footer > p{
    margin:0;
    color:#64748b;
    font-size:10px;
    line-height:1.4;
}

.ziel-submit-button,
.ziel-disable-button{
    min-height:50px !important;
    display:inline-flex !important;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:0 18px !important;
    border-radius:15px !important;
    font-size:11px !important;
    font-weight:950 !important;
    letter-spacing:-.015em;
}

.ziel-submit-button{
    min-width:190px;
    border:1px solid #07111d !important;
    background:linear-gradient(135deg,#07111d,#15304c) !important;
    color:#fff !important;
    box-shadow:0 14px 30px rgba(7,17,29,0.20);
}

.ziel-modal.is-goal-ready .ziel-submit-button:not(:disabled){
    border-color:#0d9f79 !important;
    background:linear-gradient(135deg,#0d9f79,#20c997) !important;
    color:#041b13 !important;
    box-shadow:0 16px 34px rgba(13,159,121,0.23);
}

.ziel-submit-button:hover:not(:disabled){
    transform:translateY(-2px) !important;
}

.ziel-form-footer--edit{
    grid-template-columns:1fr;
}

.ziel-form-footer--edit .ziel-form-actions{
    display:grid !important;
    grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) !important;
    gap:9px !important;
}

.ziel-form-footer--edit .ziel-submit-button{
    min-width:0;
}

.ziel-disable-button{
    border:1px solid rgba(217,70,95,0.18) !important;
    background:#fff0f3 !important;
    color:#b72842 !important;
}

.ziel-disable-button.is-confirming{
    border-color:#d9465f !important;
    background:#d9465f !important;
    color:#fff !important;
    animation:goalDangerPulse 900ms ease-in-out infinite alternate;
}

@keyframes goalDangerPulse{
    from{box-shadow:0 0 0 0 rgba(217,70,95,0.12)}
    to{box-shadow:0 0 0 7px rgba(217,70,95,0.10)}
}

/* Footer reworked for the reference orientation: large background word and legal links at the bottom. */
.site-footer{
    width:100%;
    position:relative;
    padding:clamp(48px,7vw,92px) var(--site-panel-padding,clamp(16px,4vw,54px)) clamp(22px,4vw,34px);
    overflow:hidden;
    isolation:isolate;
}

.site-footer:before{
    content:"";
    position:absolute;
    inset:0;
    z-index:-3;
    background:
        linear-gradient(180deg,rgba(2,6,23,0),rgba(2,6,23,0.76) 38%,rgba(2,6,23,0.95)),
        radial-gradient(circle at 16% 20%,rgba(255,255,255,0.10),transparent 18%),
        radial-gradient(circle at 86% 18%,rgba(116,255,212,0.12),transparent 22%);
    pointer-events:none;
}

.site-footer:after{
    content:"";
    position:absolute;
    inset:auto var(--site-panel-padding,clamp(16px,4vw,54px)) 0;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,0.26),transparent);
    pointer-events:none;
}

.site-footer-shell{
    width:min(1500px,100%);
    min-height:clamp(360px,48vw,620px);
    margin:0 auto;
    position:relative;
    display:grid;
    align-content:end;
    gap:clamp(26px,4vw,44px);
}

.site-footer-watermark{
    position:absolute;
    left:0;
    right:0;
    bottom:22px;
    z-index:-1;
    color:rgba(255,255,255,0.10);
    font-size:clamp(96px,25vw,380px);
    line-height:0.78;
    font-weight:500;
    letter-spacing:-0.095em;
    white-space:nowrap;
    pointer-events:none;
    user-select:none;
}

.site-footer-hero{
    position:relative;
    width:min(720px,100%);
    padding:clamp(24px,4vw,42px) 0 0;
}

.site-footer-hero-copy{
    display:grid;
    gap:16px;
}

.site-footer-eyebrow{
    width:max-content;
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.16);
    background:rgba(255,255,255,0.06);
    color:rgba(255,255,255,0.74);
    font-size:11px;
    line-height:1;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:0.12em;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.site-footer-title{
    max-width:620px;
    margin:0;
    color:rgba(255,255,255,0.96);
    font-size:clamp(42px,8vw,108px);
    line-height:0.88;
    font-weight:950;
    letter-spacing:-0.09em;
    text-wrap:balance;
}

.site-footer-text{
    max-width:460px;
    margin:0;
    color:rgba(255,255,255,0.70);
    font-size:clamp(14px,1.2vw,18px);
    line-height:1.4;
    font-weight:700;
    letter-spacing:-0.02em;
}

.site-footer-bottom{
    position:relative;
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    align-items:end;
    gap: 20px;
    padding-top: clamp(46px,3vw,38px);
}

.site-footer-meta{
    display:flex;
    flex-wrap:wrap;
    gap:10px 22px;
    align-items:center;
    color:rgba(255,255,255,0.62);
    font-size:clamp(11px,0.95vw,14px);
    line-height:1.2;
    font-weight:700;
}

.site-footer-links{
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-end;
    gap:12px 22px;
}

.site-footer-links a{
    color:rgba(255,255,255,0.72);
    text-decoration:none;
    font-size:clamp(11px,0.95vw,14px);
    line-height:1.2;
    font-weight:700;
    transition:color 160ms ease, opacity 160ms ease;
}

.site-footer-links a:hover{
    color:#ffffff;
}

.site-footer-top-link{
    color:rgba(194,255,228,0.92) !important;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .site-footer-eyebrow{
        background:rgba(2,6,23,0.82);
    }
}

@media(max-width:900px){
    .site-footer-shell{
        min-height:420px;
    }

    .site-footer-watermark{
        bottom:56px;
        font-size:clamp(92px,28vw,230px);
    }

    .site-footer-bottom{
        grid-template-columns:1fr;
        align-items:start;
    }

    .site-footer-links{
        justify-content:flex-start;
    }
}

@media(max-width:560px){
    .site-footer{
        padding: 36px 30px 50px;
    }

    .site-footer-shell{
        min-height:360px;
    }

    .site-footer-watermark{
        bottom:72px;
        font-size: clamp(84px,23vw,148px);
        letter-spacing:-0.08em;
    }

    .site-footer-title{
        font-size:clamp(38px,14vw,58px);
        line-height:0.92;
    }

    .site-footer-text,
    .site-footer-meta,
    .site-footer-links a{
        font-size:12px;
    }

    .site-footer-links{
        gap:10px 16px;
    }
}

@media(max-width:980px){
    .ziel-modal{
        max-height:calc(100dvh - 20px) !important;
        border-radius:24px !important;
    }

    .ziel-modal-layout{
        grid-template-columns:minmax(270px,.72fr) minmax(0,1.28fr);
        min-height:calc(100dvh - 20px);
        max-height:calc(100dvh - 20px);
    }

    .ziel-modal-visual{
        padding:34px 26px;
    }

    .ziel-modal-visual h3{
        font-size:clamp(30px,4.5vw,44px) !important;
    }

    .ziel-preview-stats{
        grid-template-columns:1fr;
    }

    .ziel-preview-stats > div{
        grid-template-columns:82px minmax(0,1fr);
        align-items:center;
    }

    .ziel-duration-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }
}

@media(max-width:720px){
    .ziel-drawer-card{
        grid-template-columns:1fr;
    }

    .ziel-add-button{
        width:100%;
    }

    .ziel-modal-overlay{
        align-items:flex-end !important;
        padding:0 !important;
    }

    .ziel-modal{
        width:100% !important;
        max-width:none !important;
        max-height:94dvh !important;
        border-radius:26px 26px 0 0 !important;
        transform:translateY(34px) scale(1) !important;
    }

    .ziel-modal-overlay.is-open .ziel-modal,
    .ziel-modal.is-open{
        transform:translateY(0) scale(1) !important;
    }

    .ziel-modal-layout{
        display:block;
        min-height:0;
        max-height:94dvh;
        overflow:auto;
    }

    .ziel-modal-visual{
        display:none;
    }

    .ziel-modal-form-panel{
        overflow:visible;
    }

    .ziel-modal-mobile-heading{
        display:grid;
        gap:8px;
        padding:24px 64px 16px 20px;
        border-bottom:1px solid rgba(15,23,42,0.08);
        background:linear-gradient(135deg,#07111d,#0b3a37);
    }

    .ziel-modal-mobile-heading strong{
        color:#fff;
        font-size:24px;
        line-height:1;
        letter-spacing:-.05em;
    }

    .ziel-modal--edit .ziel-modal-mobile-heading{
        background:linear-gradient(135deg,#111827,#432b35);
    }

    .ziel-modal-close{
        top:15px !important;
        right:15px !important;
    }

    .ziel-form{
        padding:18px 16px 22px !important;
    }

    .ziel-form-footer{
        margin:6px 0 0;
        grid-template-columns:1fr;
    }

    .ziel-submit-button{
        width:100%;
        min-width:0;
    }

}

@media(max-width:480px){
    .ziel-duration-grid{
        grid-template-columns:1fr 1fr !important;
    }

    .ziel-duration-option > span{
        min-height:104px !important;
        padding:12px !important;
    }

    .ziel-form-footer--edit .ziel-form-actions{
        grid-template-columns:1fr !important;
    }

    .ziel-form-section-heading small{
        font-size:10px;
    }

}

@media(prefers-reduced-motion:reduce){
    .bundesbibliothek-excerpt-slider,
    .ziel-modal,
    .ziel-add-button,
    .ziel-submit-button,
    .ziel-disable-button,
    .ziel-duration-option span,
    .ziel-preview-readiness span{
        transition:none !important;
        animation:none !important;
    }
}

/* ==========================================================================
   Goal dialog — visual alignment with the Bundesbibliothek page
   ========================================================================== */

:root{
    --goal-page-blue:#008FCF;
    --goal-page-blue-light:#55C5EE;
    --goal-page-navy: #062441;
    --goal-page-navy-deep:#020617;
    --goal-page-glass:rgba(0,0,0,0.30);
    --goal-page-glass-strong:rgba(3,18,34,0.84);
    --goal-page-line:rgba(255,255,255,0.14);
    --goal-page-text:rgba(255,255,255,0.96);
    --goal-page-muted:rgba(255,255,255,0.62);
}

/* Keep the page visible through the dialog, just like the header and cards. */
.ziel-modal-overlay{
    backdrop-filter:blur(15px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(15px) saturate(1.08) !important;
}

.ziel-modal{
    border:1px solid rgba(255,255,255,0.20) !important;
    border-radius:0 !important;
    color:var(--goal-page-text) !important;
    box-shadow:0 34px 100px rgba(0,0,0,0.52) !important;
}

.ziel-modal::before{
    content:"";
    position:absolute;
    z-index:7;
    top:0;
    left:0;
    width:clamp(92px,12vw,180px);
    height:3px;
    background:linear-gradient(90deg,var(--goal-page-blue-light),var(--goal-page-blue));
    pointer-events:none;
}

.ziel-modal-layout{
    background:transparent;
}

/* Left editorial panel follows the blue book-cover language. */
.ziel-modal-visual,
.ziel-modal-visual--edit{
    color:#fff;
    border-right:1px solid var(--goal-page-line);
    background:
        radial-gradient(circle at 14% 16%,rgba(85,197,238,0.24),transparent 29%),
        radial-gradient(circle at 90% 82%,rgba(0,143,207,0.20),transparent 32%),
        linear-gradient(145deg,rgba(6,36,65,0.94),rgba(2,20,38,0.92)) !important;
}

.ziel-modal-visual::before,
.ziel-modal-visual::after{
    border-color:rgba(255,255,255,0.09) !important;
}

.ziel-modal-badge,
.ziel-modal--edit .ziel-modal-badge{
    min-height:28px;
    margin:0 !important;
    padding:0 10px !important;
    border:1px solid rgba(85,197,238,0.30) !important;
    border-radius:999px !important;
    background:rgba(0,143,207,0.14) !important;
    color:#bdefff !important;
}

.ziel-modal-visual h3{
    color:#fff !important;
    text-transform:none;
}

.ziel-modal-visual-copy > p{
    color:rgba(255,255,255,0.70) !important;
}

/* Close button mirrors the white circular slider arrows. */
.ziel-modal-close{
    top:16px !important;
    right:16px !important;
    width:44px !important;
    height:44px !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.95) !important;
    color:#20150f !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.22) !important;
}

.ziel-modal-close span{
    display:block;
    transform:translateY(-1px);
}

.ziel-modal-close:hover{
    transform:translateY(-1px) scale(1.04) !important;
    background:#fff !important;
}

.ziel-modal-close:focus-visible{
    outline:3px solid rgba(85,197,238,0.34);
    outline-offset:3px;
}

/* Preview card uses the same restrained glass treatment as page cards. */
.ziel-preview-card{
    gap:16px;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:0 !important;
    background:rgba(0,0,0,0.24) !important;
    box-shadow:0 18px 48px rgba(0,0,0,0.18) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
}

.ziel-preview-orbit,
.ziel-preview-card--edit .ziel-preview-orbit{
    width:44px;
    height:44px;
    border:0 !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.95) !important;
    color:#20150f !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.16);
}

.ziel-preview-target,
.ziel-preview-card--edit .ziel-preview-target{
    color:#20150f !important;
    font-size:23px !important;
    font-weight:950;
}

.ziel-preview-head span{
    color:rgba(255,255,255,0.50);
}

.ziel-preview-head strong,
.ziel-preview-card--edit .ziel-preview-head strong{
    color:#8edfff !important;
}

.ziel-preview-stats > div{
    border:1px solid rgba(255,255,255,0.11) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,0.07) !important;
}

.ziel-preview-readiness{
    height:7px;
    border-radius:999px;
    background:rgba(255,255,255,0.14) !important;
}

.ziel-preview-readiness span{
    background:linear-gradient(90deg,var(--goal-page-blue),var(--goal-page-blue-light)) !important;
}

.ziel-modal-tip > span{
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px !important;
    background:rgba(255,255,255,0.08) !important;
    color:#bdefff !important;
}

/* The form side is dark glass instead of a detached white application panel. */
.ziel-modal-form-panel{
    color:var(--goal-page-text) !important;
    background:
        radial-gradient(circle at 100% 0,rgba(0,143,207,0.16),transparent 28%),
        rgba(0,0,0,0.22) !important;
    backdrop-filter:blur(18px) !important;
    -webkit-backdrop-filter:blur(18px) !important;
    scrollbar-color:rgba(85,197,238,0.52) rgba(255,255,255,0.05);
}

.ziel-form{
    color:var(--goal-page-text) !important;
}

.ziel-form-section + .ziel-form-section{
    border-top-color:rgba(255,255,255,0.12) !important;
}

.ziel-book-context{
    padding:18px 20px !important;
    border:1px solid rgba(85,197,238,0.24) !important;
    border-radius:0 !important;
    background:rgba(0,143,207,0.10) !important;
    box-shadow:none !important;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
}

.ziel-book-context::after{
    color:rgba(85,197,238,0.08) !important;
}

.ziel-book-context span{
    color:#8edfff !important;
}

.ziel-book-context strong{
    color:#fff !important;
}

.ziel-book-context small{
    color:rgba(255,255,255,0.58) !important;
}

.ziel-step-number{
    width:42px;
    height:42px;
    border:1px solid rgba(255,255,255,0.22);
    border-radius:0 !important;
    background:rgba(255,255,255,0.95) !important;
    color:#546132 !important;
    font-size:11px;
    box-shadow:none;
}

.ziel-form-section-heading strong{
    color:#fff !important;
}

.ziel-form-section-heading small{
    color:rgba(255,255,255,0.56) !important;
}

.ziel-label{
    color:rgba(255,255,255,0.64) !important;
}

.ziel-input-wrap,
.ziel-select-wrap{
    min-height:52px !important;
    overflow:hidden;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:12px !important;
    background:rgba(17,24,39,0.82) !important;
    box-shadow:none !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}


.ziel-input-wrap input,
.ziel-select-wrap select{
    min-height:50px !important;
    color:#fff !important;
    caret-color:#fff;
    color-scheme:dark;
}

.ziel-input-wrap input::placeholder{
    color:rgba(255,255,255,0.42);
}

.ziel-select-wrap select option{
    background:#0b1726;
    color:#fff;
}

.ziel-select-wrap::after{
    color:rgba(255,255,255,0.64) !important;
}

.ziel-input-wrap > span{
    color:rgba(255,255,255,0.54) !important;
}

.ziel-page-suggestions button{
    min-width:50px;
    height:34px;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,0.08) !important;
    color:rgba(255,255,255,0.78) !important;
    box-shadow:none;
}

.ziel-page-suggestions button:hover,
.ziel-page-suggestions button.is-active{
    border-color:rgba(85,197,238,0.56) !important;
    background:rgba(0,143,207,0.20) !important;
    color:#fff !important;
}

/* Rhythm cards now look like compact page controls rather than white app tiles. */
.ziel-duration-option > span{
    min-height:108px !important;
    border:1px solid rgba(255,255,255,0.13) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,0.07) !important;
    color:#fff !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
}

.ziel-duration-option > span::after{
    width:64px;
    height:64px;
    border-radius:0 !important;
    background:rgba(85,197,238,0.06) !important;
    transform:rotate(35deg);
}

.ziel-duration-icon{
    color:rgba(255,255,255,0.45) !important;
}

.ziel-duration-option strong{
    color:#fff !important;
}

.ziel-duration-option small{
    color:rgba(255,255,255,0.52) !important;
}


.ziel-duration-option input:checked + span{
    border-color:rgba(85,197,238,0.86) !important;
    background:linear-gradient(135deg,rgba(0,143,207,0.30),rgba(6,36,65,0.68)) !important;
    color:#fff !important;
    box-shadow:inset 0 0 0 1px rgba(189,239,255,0.18),0 14px 30px rgba(0,143,207,0.18) !important;
}

.ziel-duration-option input:checked + span .ziel-duration-icon{
    color:#bdefff !important;
}

.ziel-duration-option input:focus-visible + span{
    outline:3px solid rgba(85,197,238,0.30);
    outline-offset:2px;
}

/* Sticky action area reads like the page control panel. */
.ziel-form-footer{
    border:1px solid rgba(255,255,255,0.13) !important;
    border-radius:0 !important;
    background:rgba(2,18,34,0.88) !important;
    box-shadow:0 -12px 32px rgba(0,0,0,0.18),0 18px 40px rgba(0,0,0,0.20) !important;
    backdrop-filter:blur(20px) !important;
    -webkit-backdrop-filter:blur(20px) !important;
}

.ziel-form-footer > p{
    color:rgba(255,255,255,0.56) !important;
}

.ziel-submit-button,
.ziel-disable-button{
    min-height:50px !important;
    border-radius:0 !important;
    text-transform:uppercase;
    box-shadow:none !important;
}

.ziel-submit-button{
    border:1px solid rgba(85,197,238,0.70) !important;
    background:#008FCF !important;
    color:#fff !important;
}

.ziel-modal.is-goal-ready .ziel-submit-button:not(:disabled){
    border-color:rgba(85,197,238,0.88) !important;
    background:#008FCF !important;
    color:#fff !important;
    box-shadow:0 14px 30px rgba(0,143,207,0.22) !important;
}

.ziel-submit-button:hover:not(:disabled){
    background:#0a9cdc !important;
    transform:translateY(-1px) !important;
}

.ziel-submit-button:disabled{
    border-color:rgba(255,255,255,0.10) !important;
    background:rgba(255,255,255,0.08) !important;
    color:rgba(255,255,255,0.45) !important;
}

/* Give action glyphs the same circular-arrow language as the carousel. */
.ziel-submit-button > span:last-child,
.ziel-disable-button > span:last-child{
    flex:0 0 auto;
    width:31px;
    height:31px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:999px;
    font-size:20px;
    line-height:1;
}

.ziel-submit-button > span:last-child{
    background:rgba(255,255,255,0.95);
    color:#20150f;
}

.ziel-submit-button:disabled > span:last-child{
    background:rgba(255,255,255,0.10);
    color:rgba(255,255,255,0.42);
}

.ziel-disable-button{
    border:1px solid rgba(255,255,255,0.16) !important;
    background:rgba(255,255,255,0.07) !important;
    color:rgba(255,255,255,0.74) !important;
}

.ziel-disable-button > span:last-child{
    background:rgba(255,255,255,0.10);
    color:#fff;
}

.ziel-disable-button:hover{
    border-color:rgba(255,255,255,0.28) !important;
    background:rgba(255,255,255,0.12) !important;
}

.ziel-disable-button.is-confirming{
    border-color:rgba(239,68,68,0.70) !important;
    background:rgba(180,35,24,0.82) !important;
    color:#fff !important;
}

.ziel-form-message{
    border:1px solid rgba(255,255,255,0.16) !important;
    border-radius:0 !important;
    background:rgba(180,35,24,0.84) !important;
    color:#fff !important;
}

.ziel-form-message.is-success{
    background:rgba(0,143,207,0.78) !important;
}

/* The drawer entry now uses the same blue call-to-action as the popup. */
.ziel-drawer-card{
    border-color:rgba(85,197,238,0.24) !important;
    background:
        radial-gradient(circle at 90% 10%,rgba(85,197,238,0.22),transparent 30%),
        linear-gradient(135deg,rgba(6,36,65,0.95),rgba(2,17,31,0.95)) !important;
}

.ziel-drawer-eyebrow{
    color:#bdefff !important;
    background:rgba(0,143,207,0.14) !important;
    border-color:rgba(85,197,238,0.24) !important;
}

.ziel-add-button{
    text-transform:uppercase;
    border:1px solid rgba(85,197,238,0.70) !important;
    border-radius:0 !important;
    background:rgb(255 255 255 / 95%) !important;
    color:#000000 !important;
    box-shadow:0 14px 30px rgba(0,143,207,0.22) !important;
}

.ziel-add-button span{
    border-radius:999px !important;
    background:rgb(0 0 0 / 95%) !important;
    color:rgb(255 255 255 / 95%) !important;
}

.ziel-add-button:hover{
    box-shadow:0 18px 38px rgba(0,143,207,0.28) !important;
}

@media(max-width:720px){
    .ziel-modal{
        border-radius:22px 22px 0 0 !important;
        border-bottom:0 !important;
    }

    .ziel-modal::before{
        left:22px;
        width:86px;
    }

    .ziel-modal-mobile-heading{
        border-bottom:1px solid rgba(255,255,255,0.14) !important;
        background:
            radial-gradient(circle at 85% 10%,rgba(85,197,238,0.22),transparent 35%),
            linear-gradient(135deg,rgba(6,36,65,0.98),rgba(2,20,38,0.98)) !important;
    }

    .ziel-modal--edit .ziel-modal-mobile-heading{
        background:
            radial-gradient(circle at 85% 10%,rgba(85,197,238,0.22),transparent 35%),
            linear-gradient(135deg,rgba(6,36,65,0.98),rgba(2,20,38,0.98)) !important;
    }

    .ziel-modal-form-panel{
        background:rgba(2,18,34,0.70) !important;
    }

    .ziel-form-footer{
        margin:8px -2px 0 !important;
    }
}

@media(max-width:480px){
    .ziel-step-number{
        width:38px;
        height:38px;
    }

    .ziel-duration-option > span{
        min-height:100px !important;
    }

    .ziel-submit-button,
    .ziel-disable-button{
        padding:0 12px !important;
    }
}

/* ========================================================================== 
   Minimal Swiss-grid goal dialog — final override
   ========================================================================== */

.ziel-modal-overlay{
    padding:22px !important;
    backdrop-filter:blur(14px) !important;
    -webkit-backdrop-filter:blur(14px) !important;
}

.ziel-modal{
    position:relative !important;
    width:min(760px,100%) !important;
    max-height:calc(100svh - 44px) !important;
    overflow:auto !important;
    border:1px solid rgba(255,255,255,0.18) !important;
    border-radius:0 !important;
    color:white !important;
}

.ziel-modal::before,
.ziel-modal::after{
    display:none !important;
}

.ziel-modal-hero{
    display:grid !important;
    grid-template-columns:minmax(0,1fr) auto !important;
    gap:22px !important;
    align-items:start !important;
    padding:26px !important;
    border-bottom:1px solid rgba(255,255,255,0.16) !important;
    background:
        radial-gradient(circle at 0 0,rgba(85,197,238,0.20),transparent 34%),
        transparent !important;
}

.ziel-modal-badge,
.ziel-modal--edit .ziel-modal-badge{
    display:inline-flex !important;
    width:max-content !important;
    margin:0 0 14px !important;
    padding:8px 12px !important;
    border:1px solid rgba(255,255,255,0.15) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.10) !important;
    color:rgba(255,255,255,0.76) !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:0.08em !important;
}

.ziel-modal-hero h3{
    margin:0 !important;
    color:white !important;
    font-size:clamp(30px,6vw,48px) !important;
    line-height:0.98 !important;
    font-weight:950 !important;
    letter-spacing:-0.05em !important;
    text-transform:uppercase !important;
}

.ziel-modal-close{
    position:static !important;
    width:44px !important;
    height:44px !important;
    min-width:44px !important;
    padding:0 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:0 !important;
    border-radius:999px !important;
    background:rgb(255 255 255 / 95%) !important;
    color:#20150f !important;
    box-shadow:0 12px 26px rgba(0,0,0,0.16) !important;
    font-size:27px !important;
    line-height:1 !important;
    font-weight:400 !important;
    cursor:pointer !important;
    transition:transform 180ms ease,background 180ms ease !important;
}

.ziel-modal-close:hover{
    transform:translateY(-1px) !important;
    background:white !important;
}

.ziel-modal-close:focus-visible{
    outline:3px solid rgba(85,197,238,0.34) !important;
    outline-offset:3px !important;
}

.ziel-form{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:0 !important;
    padding:0 !important;
    color:white !important;
}

.ziel-form.is-loading{
    opacity:0.82 !important;
}

.ziel-form-message{
    grid-column:1 / -1 !important;
    margin:18px 26px 0 !important;
    padding:13px 15px !important;
    border:1px solid rgba(255,255,255,0.20) !important;
    border-radius:9px !important;
    background:rgba(180,35,24,0.86) !important;
    color:white !important;
    font-size:15px !important;
    line-height:1.4 !important;
}

.ziel-form-message.is-success{
    background:rgba(0,143,207,0.82) !important;
}

.ziel-book-context{
    grid-column:1 / -1 !important;
    display:grid !important;
    gap:5px !important;
    margin:0 !important;
    padding:20px 26px !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,255,255,0.16) !important;
    border-radius:0 !important;
    background:rgba(255,255,255,0.045) !important;
    box-shadow:none !important;
}

.ziel-book-context::before,
.ziel-book-context::after{
    display:none !important;
}

.ziel-book-context span{
    color:rgba(255,255,255,0.58) !important;
    font-size:12px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:0.08em !important;
}

.ziel-book-context strong{
    color:white !important;
    font-size:clamp(20px,5vw,30px) !important;
    line-height:1.08 !important;
    font-weight:950 !important;
    letter-spacing:-0.03em !important;
}

.ziel-book-context small{
    color:rgba(255,255,255,0.66) !important;
    font-size:13px !important;
    line-height:1.35 !important;
}

.ziel-field{
    display:grid !important;
    align-content:start !important;
    gap:10px !important;
    margin:0 !important;
    padding:22px 26px !important;
    border:0 !important;
    background:transparent !important;
}

.ziel-field-language{
    border-right:1px solid rgba(255,255,255,0.16) !important;
}

.ziel-field-duration{
    grid-column:1 / -1 !important;
    border-top:1px solid rgba(255,255,255,0.16) !important;
}

.ziel-label{
    color:rgba(255,255,255,0.88) !important;
    font-size:14px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:0.05em !important;
}

.ziel-input-wrap,
.ziel-select-wrap{
    display:flex !important;
    align-items:center !important;
    min-height:58px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:9px !important;
    background: rgb(17 24 39 / 70%) !important;
    box-shadow:none !important;
    backdrop-filter: blur(30px) !important;
    -webkit-backdrop-filter: blur(30px) !important;
    transition:border-color 180ms ease,box-shadow 180ms ease !important;
}
.ziel-input-wrap input,
.ziel-select-wrap select{
    width:100% !important;
    min-width:0 !important;
    height:58px !important;
    min-height:58px !important;
    border:0 !important;
    outline:0 !important;
    padding:0 18px !important;
    background:transparent !important;
    color:white !important;
    font-size:17px !important;
    font-weight:900 !important;
    color-scheme:dark !important;
}

.ziel-input-wrap input::placeholder{
    color:rgba(255,255,255,0.42) !important;
}

.ziel-select-wrap{
    position:relative !important;
}

.ziel-select-wrap select{
    appearance:none !important;
    -webkit-appearance:none !important;
    padding-right:50px !important;
    cursor:pointer !important;
}

.ziel-select-wrap select option{
    background:#0b1726 !important;
    color:white !important;
}

.ziel-select-wrap::after{
    content:"⌄" !important;
    position:absolute !important;
    right:18px !important;
    top:50% !important;
    transform:translateY(-54%) !important;
    color:rgba(255,255,255,0.62) !important;
    font-size:22px !important;
    line-height:1 !important;
    pointer-events:none !important;
}

.ziel-input-wrap > span{
    flex:0 0 auto !important;
    padding:0 18px !important;
    color:rgba(255,255,255,0.54) !important;
    font-size:14px !important;
    font-weight:900 !important;
}

.ziel-duration-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
}

.ziel-duration-option{
    cursor:pointer !important;
}

.ziel-duration-option input{
    position:absolute !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.ziel-duration-option > span{
    position:relative !important;
    min-height:86px !important;
    display:grid !important;
    align-content:center !important;
    gap:4px !important;
    padding:15px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:9px !important;
    background:rgba(255,255,255,0.08) !important;
    color:white !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    transition:transform 180ms ease,border-color 180ms ease,background 180ms ease !important;
}

.ziel-duration-option > span::before,
.ziel-duration-option > span::after{
    display:none !important;
}

.ziel-duration-option strong{
    color:white !important;
    font-size:15px !important;
    line-height:1.1 !important;
    font-weight:950 !important;
}

.ziel-duration-option small{
    color:rgba(255,255,255,0.56) !important;
    font-size:12px !important;
    line-height:1.2 !important;
    font-weight:700 !important;
}



.ziel-duration-option input:checked + span small{
    color:rgba(32,21,15,0.62) !important;
}

.ziel-duration-option input:focus-visible + span{
    outline:3px solid rgba(85,197,238,0.34) !important;
    outline-offset:2px !important;
}

.ziel-form-actions{
    grid-column:1 / -1 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:10px !important;
    margin:0 !important;
    padding:20px 26px 26px !important;
    border-top:1px solid rgba(255,255,255,0.16) !important;
    background:rgba(0,0,0,0.08) !important;
}

.ziel-form-actions--single{
    grid-template-columns:1fr !important;
}

.ziel-submit-button,
.ziel-disable-button{
    align-items:center;
    place-content:center;
    width:100% !important;
    min-height:48px !important;
    padding:0 16px !important;
    border-radius:14px !important;
    box-shadow:none !important;
    cursor:pointer !important;
    font-size:16px !important;
    line-height:1 !important;
    font-weight:950 !important;
    text-transform:uppercase !important;
    letter-spacing:-0.01em !important;
    transition:transform 180ms ease,background 180ms ease,border-color 180ms ease,opacity 180ms ease !important;
}

.ziel-submit-button,
.ziel-modal.is-goal-ready .ziel-submit-button:not(:disabled){
    border:1px solid rgb(255 255 255 / 74%) !important;
    background:rgb(255 255 255 / 95%) !important;
    color:#20150f !important;
}

.ziel-submit-button:hover:not(:disabled){
    transform:translateY(-1px) !important;
    background:white !important;
}

.ziel-disable-button{
    border:1px solid rgb(255 255 255 / 18%) !important;
    background:rgba(255,255,255,0.08) !important;
    color:rgb(255 255 255 / 80%) !important;
}

.ziel-disable-button:hover:not(:disabled){
    transform:translateY(-1px) !important;
    border-color:rgba(255,255,255,0.28) !important;
    background:rgba(255,255,255,0.12) !important;
}

.ziel-disable-button.is-confirming{
    border-color:rgba(239,68,68,0.70) !important;
    background:rgba(180,35,24,0.82) !important;
    color:white !important;
}

.ziel-submit-button:disabled,
.ziel-disable-button:disabled{
    border-color:rgba(255,255,255,0.10) !important;
    background:rgba(255,255,255,0.08) !important;
    color:rgba(255,255,255,0.42) !important;
    opacity:1 !important;
    cursor:not-allowed !important;
    transform:none !important;
}

@media(max-width:720px){
    .ziel-modal-overlay{
        align-items:flex-end !important;
        padding:12px 12px 0 !important;
    }

    .ziel-modal{
        width:100% !important;
        max-height:calc(100svh - 12px) !important;
        border-bottom:0 !important;
        border-radius:18px 18px 0 0 !important;
    }

    .ziel-modal-hero{
        padding:22px 20px !important;
    }

    .ziel-modal-hero h3{
        font-size:clamp(30px,10vw,42px) !important;
    }

    .ziel-book-context,
    .ziel-field{
        padding-left:20px !important;
        padding-right:20px !important;
    }

    .ziel-field-language,
    .ziel-field-pages{
        grid-column:1 / -1 !important;
    }

    .ziel-field-language{
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,0.16) !important;
    }

    .ziel-duration-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .ziel-form-actions{
        padding:18px 20px 22px !important;
    }
}

@media(max-width:480px){
    .ziel-modal-overlay{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .ziel-modal{
        border-left:0 !important;
        border-right:0 !important;
        border-radius:18px 18px 0 0 !important;
    }

    .ziel-modal-hero{
        gap:12px !important;
        padding:20px 16px !important;
    }

    .ziel-modal-close{
        width:40px !important;
        height:40px !important;
        min-width:40px !important;
    }

    .ziel-book-context,
    .ziel-field{
        padding:18px 16px !important;
    }

    .ziel-duration-option > span{
        min-height:82px !important;
        padding:13px !important;
    }

    .ziel-form-actions{
        grid-template-columns:1fr !important;
        padding:16px !important;
    }
}

/* ========================================================================== 
   Goal duration cards + fixed action rail — final responsive override
   ========================================================================== */

/* Keep the dialog shell still; only the form body scrolls. */
.ziel-modal{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
    overscroll-behavior:contain !important;
}

.ziel-form{
    min-height:0 !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
    -webkit-overflow-scrolling:touch !important;
}

/* A quiet Swiss-grid field with the duration cards as the visual focus. */
.ziel-field-duration{
    padding-top:20px !important;
    padding-bottom:22px !important;
}

.ziel-duration-grid{
    display:grid !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:10px !important;
}

.ziel-duration-option{
    position:relative !important;
    min-width:0 !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
}

.ziel-duration-option--two-days{
    --ziel-duration-accent:#3b82f6;
    --ziel-duration-accent-rgb:59,130,246;
}

.ziel-duration-option--weekly{
    --ziel-duration-accent:#8b5cf6;
    --ziel-duration-accent-rgb:139,92,246;
}

.ziel-duration-option--monthly{
    --ziel-duration-accent:#f59e0b;
    --ziel-duration-accent-rgb:245,158,11;
}

.ziel-duration-option input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.ziel-duration-option > .ziel-duration-card{
    position:relative !important;
    min-height:126px !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:16px !important;
    padding:14px !important;
    overflow:hidden !important;
    border:1px solid rgba(255,255,255,0.14) !important;
    border-radius:12px !important;
    background:rgba(255,255,255,0.065) !important;
    color:white !important;
    box-shadow:none !important;
    backdrop-filter:blur(12px) !important;
    -webkit-backdrop-filter:blur(12px) !important;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        box-shadow 180ms ease !important;
}

.ziel-duration-option > .ziel-duration-card::before{
    content:"" !important;
    position:absolute !important;
    inset:0 auto 0 0 !important;
    display:block !important;
    width:3px !important;
    background:var(--ziel-duration-accent) !important;
    opacity:0.68 !important;
    transition:width 180ms ease,opacity 180ms ease !important;
}

.ziel-duration-option > .ziel-duration-card::after{
    display:none !important;
}

.ziel-duration-card-top{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
}

.ziel-duration-value{
    min-width:54px !important;
    min-height:48px !important;
    display:flex !important;
    align-items:flex-end !important;
    gap:5px !important;
    padding:8px 9px !important;
    border:1px solid rgba(var(--ziel-duration-accent-rgb),0.42) !important;
    border-radius:9px !important;
    background:rgba(var(--ziel-duration-accent-rgb),0.13) !important;
    color:var(--ziel-duration-accent) !important;
}

.ziel-duration-value > strong{
    color:inherit !important;
    font-size:25px !important;
    line-height:0.9 !important;
    font-weight:950 !important;
    letter-spacing:-0.07em !important;
    font-variant-numeric:tabular-nums !important;
}

.ziel-duration-value > small{
    padding-bottom:1px !important;
    color:inherit !important;
    font-size:9px !important;
    line-height:1 !important;
    font-weight:900 !important;
    text-transform:uppercase !important;
    letter-spacing:0.06em !important;
    opacity:0.92 !important;
}

.ziel-duration-check{
    width:25px !important;
    height:25px !important;
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    border:1px solid rgba(255,255,255,0.20) !important;
    border-radius:999px !important;
    background:rgba(0,0,0,0.12) !important;
    color:transparent !important;
    font-size:13px !important;
    line-height:1 !important;
    font-weight:950 !important;
    transition:
        color 180ms ease,
        border-color 180ms ease,
        background 180ms ease,
        transform 180ms ease !important;
}

.ziel-duration-copy{
    position:relative !important;
    z-index:1 !important;
    min-width:0 !important;
    display:grid !important;
    gap:4px !important;
}

.ziel-duration-copy > strong{
    color:white !important;
    font-size:15px !important;
    line-height:1.12 !important;
    font-weight:950 !important;
    letter-spacing:-0.025em !important;
    overflow-wrap:anywhere !important;
}

.ziel-duration-copy > small{
    color:rgba(255,255,255,0.56) !important;
    font-size:12px !important;
    line-height:1.25 !important;
    font-weight:700 !important;
}


.ziel-duration-option input:checked + .ziel-duration-card{
    border-color:rgba(var(--ziel-duration-accent-rgb),0.84) !important;
    background:
        linear-gradient(145deg,rgba(var(--ziel-duration-accent-rgb),0.22),rgba(var(--ziel-duration-accent-rgb),0.08)),
        rgba(255,255,255,0.075) !important;
    color:white !important;
    box-shadow:
        inset 0 0 0 1px rgba(var(--ziel-duration-accent-rgb),0.12),
        0 14px 32px rgba(0,0,0,0.16) !important;
}

.ziel-duration-option input:checked + .ziel-duration-card::before{
    width:5px !important;
    opacity:1 !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check{
    border-color:var(--ziel-duration-accent) !important;
    background:var(--ziel-duration-accent) !important;
    color:#06111e !important;
    transform:scale(1.04) !important;
}



.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-copy > strong{
    color:white !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-copy > small{
    color:rgba(255,255,255,0.72) !important;
}

.ziel-duration-option:active > .ziel-duration-card{
    transform:scale(0.985) !important;
}

/* Keep the primary actions visible while the fields scroll underneath. */
.ziel-form-actions{
    position:sticky !important;
    bottom:0 !important;
    z-index:20 !important;
    padding-bottom:max(22px,env(safe-area-inset-bottom)) !important;
    border-top:1px solid rgba(255,255,255,0.18) !important;
    background:rgba(2,18,34,0.90) !important;
    box-shadow:0 -18px 34px rgba(2,6,23,0.24) !important;
    backdrop-filter:blur(24px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(24px) saturate(1.08) !important;
}

.ziel-submit-button,
.ziel-disable-button{
    touch-action:manipulation !important;
}

/* Tablet: two generous columns are faster to scan and easier to tap. */
@media(max-width:820px){
    .ziel-duration-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        min-height:116px !important;
    }
}

/* Phone sheet: fixed header/action rail and a compact, scrollable centre. */
@media(max-width:720px){
    .ziel-modal-overlay{
        padding-bottom:0 !important;
    }

    .ziel-modal{
        height:min(760px,calc(100dvh - 12px)) !important;
        max-height:calc(100dvh - 12px) !important;
    }

    .ziel-modal-hero{
        position:relative !important;
        z-index:30 !important;
        backdrop-filter:blur(22px) !important;
        -webkit-backdrop-filter:blur(22px) !important;
    }

    .ziel-form{
        scrollbar-gutter:auto !important;
    }

    .ziel-field-duration{
        padding-top:18px !important;
        padding-bottom:20px !important;
    }

    .ziel-form-actions{
        padding-top:14px !important;
        padding-bottom:max(16px,env(safe-area-inset-bottom)) !important;
    }
}

@media(max-width:480px){
    .ziel-duration-grid{
        gap:8px !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        min-height:108px !important;
        gap:12px !important;
        padding:12px !important;
        border-radius:10px !important;
    }

    .ziel-duration-value{
        min-width:49px !important;
        min-height:44px !important;
        padding:7px 8px !important;
    }

    .ziel-duration-value > strong{
        font-size:22px !important;
    }

    .ziel-duration-check{
        width:23px !important;
        height:23px !important;
        font-size:12px !important;
    }

    .ziel-duration-copy > strong{
        font-size:14px !important;
    }

    .ziel-duration-copy > small{
        font-size:11px !important;
    }

    .ziel-form-actions{
        gap:8px !important;
    }
}

/* Very narrow screens preserve the original type size by stacking actions. */
@media(max-width:370px){
    .ziel-duration-grid{
        grid-template-columns:1fr !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        min-height:92px !important;
        display:grid !important;
        grid-template-columns:auto minmax(0,1fr) !important;
        align-items:center !important;
        gap:12px !important;
    }

    .ziel-duration-card-top{
        align-items:center !important;
    }

    .ziel-duration-check{
        position:absolute !important;
        top:10px !important;
        right:10px !important;
    }

    .ziel-form-actions{
        grid-template-columns:1fr !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .ziel-duration-option > .ziel-duration-card,
    .ziel-duration-check{
        transition:none !important;
    }
}

/* ========================================================================== 
   Compact prosperity duration selector
   Calm white space, ballot-style cross, fixed actions on every device
   ========================================================================== */

.ziel-modal{
    width:min(780px,100%) !important;
    max-height:min(860px,calc(100dvh - 40px)) !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
}

.ziel-form{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    overflow:hidden !important;
}

.ziel-form-scroll{
    min-height:0 !important;
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-content:start !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    overscroll-behavior:contain !important;
    scrollbar-gutter:stable !important;
    -webkit-overflow-scrolling:touch !important;
}

.ziel-form-scroll > .ziel-form-message,
.ziel-form-scroll > .ziel-book-context,
.ziel-form-scroll > .ziel-field-duration{
    grid-column:1 / -1 !important;
}

.ziel-field-duration{
    padding:20px 26px 24px !important;
    background:rgba(255,255,255,0.018) !important;
}

.ziel-field-duration > .ziel-label{
    margin-bottom:12px !important;
}

.ziel-duration-grid{
    display:grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap:10px !important;
    margin-top:0 !important;
}

.ziel-duration-option{
    --ziel-card-bg:#f8f7f3;
    --ziel-card-bg-selected:#f4f7f2;
    --ziel-card-ink:#152019;
    --ziel-card-muted:#667068;
    --ziel-card-prosperity:#315a3b;
    position:relative !important;
    min-width:0 !important;
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    backdrop-filter:blur(30px);
}

/* All rhythms deliberately share one restrained palette. */
.ziel-duration-option--daily,
.ziel-duration-option--two-days,
.ziel-duration-option--weekly,
.ziel-duration-option--monthly{
    --ziel-card-bg:rgb(0 0 0 / 30%) !important;
    --ziel-card-bg-selected:rgb(255 255 255 / 95%) !important;
    --ziel-card-ink:rgb(255 255 255 / 95%) !important;
    --ziel-card-muted:rgb(255 255 255 / 74%) !important;
    --ziel-card-prosperity:rgb(255 255 255) !important;
    --ziel-duration-accent: rgb(0 0 0);
    --ziel-duration-accent-rgb: rgb(255 255 255 / 95%);
}

.ziel-duration-option input{
    position:absolute !important;
    width:1px !important;
    height:1px !important;
    margin:-1px !important;
    overflow:hidden !important;
    clip:rect(0 0 0 0) !important;
    clip-path:inset(50%) !important;
    white-space:nowrap !important;
    opacity:0 !important;
    pointer-events:none !important;
}

.ziel-duration-option > .ziel-duration-card{
    position:relative !important;
    min-height:124px !important;
    height:100% !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:space-between !important;
    gap:17px !important;
    padding: 24px !important;
    overflow:hidden !important;
    border:1px solid rgb(255 255 255 / 74%) !important;
    background:
        radial-gradient(circle at 86% 10%,rgba(255,255,255,0.30),transparent 33%),
        linear-gradient(145deg, #1b1b1b66,#075985a3) !important;
    border-radius:8px !important;
    color:white !important;
    box-shadow:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
    transition:
        border-color 160ms ease,
        background 160ms ease,
        box-shadow 160ms ease !important;
}

/* Remove the former architectural door/line decoration completely. */
.ziel-duration-option > .ziel-duration-card::before,
.ziel-duration-option > .ziel-duration-card::after{
    content:none !important;
    display:none !important;
}

.ziel-duration-card-top{
    position:relative !important;
    z-index:1 !important;
    display:flex !important;
    width:100% !important;
    align-items:flex-start !important;
    justify-content:space-between !important;
    gap:10px !important;
}

.ziel-duration-value{
    min-width:0 !important;
    min-height:0 !important;
    display:flex !important;
    align-items:flex-end !important;
    gap:6px !important;
    padding:0 !important;
    border:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:var(--ziel-card-ink) !important;
}

.ziel-duration-value > strong{
    color:inherit !important;
    font-size: clamp(30px,2.5vw,48px) !important;
    line-height:0.82 !important;
    font-weight:500 !important;
    letter-spacing:-0.07em !important;
    font-variant-numeric:tabular-nums !important;
}

.ziel-duration-value > small{
    padding-bottom:2px !important;
    color:var(--ziel-card-muted) !important;
    font-size:10px !important;
    line-height:1 !important;
    font-weight:750 !important;
    text-transform:none !important;
    letter-spacing:-0.01em !important;
}

/* Empty ballot square. The selected state draws a hand-marked cross. */
.ziel-duration-check{
    position:relative !important;
    width:24px !important;
    height:24px !important;
    flex:0 0 24px !important;
    display:none !important;
    border:1.5px solid rgba(21,32,25,0.36) !important;
    border-radius:2px !important;
    background:rgba(255,255,255,0.64) !important;
    color:transparent !important;
    font-size:0 !important;
    box-shadow:none !important;
    transform:none !important;
}

.ziel-duration-check::before,
.ziel-duration-check::after{
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    left:50% !important;
    width:15px !important;
    height:2px !important;
    border-radius:999px !important;
    background:var(--ziel-card-prosperity) !important;
    opacity:0 !important;
    transform-origin:center !important;
    transition:opacity 120ms ease !important;
}

.ziel-duration-check::before{
    transform:translate(-50%,-50%) rotate(43deg) !important;
}

.ziel-duration-check::after{
    width:14px !important;
    transform:translate(-50%,-50%) rotate(-47deg) !important;
}

.ziel-duration-copy{
    position:relative !important;
    z-index:1 !important;
    min-width:0 !important;
    display:grid !important;
    gap:4px !important;
}

.ziel-duration-copy > strong{
    color:var(--ziel-card-ink) !important;
    font-size:15px !important;
    line-height:1.08 !important;
    font-weight:850 !important;
    letter-spacing:-0.025em !important;
    overflow-wrap:anywhere !important;
}

.ziel-duration-copy > small{
    max-width:18ch !important;
    color:var(--ziel-card-muted) !important;
    font-size:10.5px !important;
    line-height:1.28 !important;
    font-weight:650 !important;
}

@media(hover:hover){

.ziel-duration-option input:checked + .ziel-duration-card{
    border: 1px solid rgb(255 255 255 / 18%);
    background:var(--ziel-card-bg-selected) !important;
    color:var(--ziel-card-ink) !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check{
    border-color:var(--ziel-card-prosperity) !important;
    background:transparent !important;
    color:transparent !important;
    transform:none !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check::before,
.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check::after{
    opacity:1 !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-copy > strong{
    color:var(--ziel-card-prosperity) !important;
}

.ziel-duration-option:active > .ziel-duration-card{
    transform:none !important;
}

}

/* The actions remain a fixed row inside the dialog while the centre scrolls. */
.ziel-form-actions{
    position:relative !important;
    bottom:auto !important;
    z-index:40 !important;
    grid-column:auto !important;
    flex:0 0 auto !important;
    padding:16px 26px max(18px,env(safe-area-inset-bottom)) !important;
    border-top:1px solid rgba(255,255,255,0.18) !important;
    background: rgb(0 0 0 / 0%) !important;
    box-shadow:0 -18px 36px rgba(2,6,23,0.26) !important;
    backdrop-filter:blur(26px) saturate(1.08) !important;
    -webkit-backdrop-filter:blur(26px) saturate(1.08) !important;
}

.ziel-submit-button,
.ziel-disable-button{
    min-height:50px !important;
    touch-action:manipulation !important;
}

.ziel-form-message{
    grid-column:1 / -1 !important;
}

@media(max-width:860px){
    .ziel-modal{
        width:min(700px,100%) !important;
    }

    .ziel-duration-grid{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        min-height:112px !important;
    }
}

@media(max-width:720px){
    .ziel-modal-overlay{
        align-items:flex-end !important;
        padding:10px 10px 0 !important;
    }

    .ziel-modal{
        width:100% !important;
        height:min(800px,calc(100dvh - 10px)) !important;
        max-height:calc(100dvh - 10px) !important;
        border-bottom:0 !important;
        border-radius:18px 18px 0 0 !important;
    }

    .ziel-modal-hero{
        padding:19px 18px !important;
    }

    .ziel-modal-hero h3{
        font-size:clamp(29px,9vw,40px) !important;
    }

    .ziel-modal-badge,
    .ziel-modal--edit .ziel-modal-badge{
        margin-bottom:10px !important;
        padding:6px 9px !important;
        font-size:10px !important;
    }

    .ziel-form-scroll{
        grid-template-columns:1fr !important;
        scrollbar-gutter:auto !important;
    }

    .ziel-form-scroll > .ziel-field-language,
    .ziel-form-scroll > .ziel-field-pages{
        grid-column:1 / -1 !important;
    }

    .ziel-field-language{
        border-right:0 !important;
        border-bottom:1px solid rgba(255,255,255,0.16) !important;
    }

    .ziel-book-context,
    .ziel-field{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .ziel-field-duration{
        padding-top:18px !important;
        padding-bottom:20px !important;
    }

    .ziel-form-actions{
        padding-left:18px !important;
        padding-right:18px !important;
    }
}

@media(max-width:480px){
    .ziel-modal-overlay{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .ziel-modal{
        height:100dvh !important;
        max-height:100dvh !important;
        border-left:0 !important;
        border-right:0 !important;
        border-radius:0 !important;
    }

    .ziel-modal-hero{
        padding:16px !important;
    }

    .ziel-modal-close{
        width:42px !important;
        height:42px !important;
        min-width:42px !important;
    }

    .ziel-book-context,
    .ziel-field{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .ziel-duration-grid{
        gap:8px !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        min-height:104px !important;
        gap:13px !important;
        padding:25px !important;
        border-radius:8px !important;
    }

    .ziel-duration-value > strong{
        font-size: 25px !important;
    }

    .ziel-duration-value > small{
        font-size:9px !important;
    }

    .ziel-duration-check{
        width:22px !important;
        height:22px !important;
        flex-basis:22px !important;
    }

    .ziel-duration-check::before,
    .ziel-duration-check::after{
        width:13px !important;
    }

    .ziel-duration-copy > strong{
        font-size:14px !important;
    }

    .ziel-duration-copy > small{
        max-width:16ch !important;
        font-size:9.5px !important;
    }

    .ziel-form-actions{
        grid-template-columns:1fr 1fr !important;
        gap:8px !important;
        padding:12px 16px max(14px,env(safe-area-inset-bottom)) !important;
    }

    .ziel-form-actions--single{
        grid-template-columns:1fr !important;
    }

    .ziel-submit-button,
    .ziel-disable-button{
        min-height:48px !important;
        padding:0 12px !important;
        font-size:13px !important;
    }
}

@media(max-width:360px){
    .ziel-duration-option > .ziel-duration-card{
        min-height:100px !important;
        padding:10px !important;
    }

    .ziel-duration-value > strong{
        font-size:32px !important;
    }

    .ziel-duration-copy > strong{
        font-size:13px !important;
    }

    .ziel-duration-copy > small{
        max-width:14ch !important;
        font-size:9px !important;
    }

    .ziel-form-actions{
        grid-template-columns:1fr !important;
    }
}

@media(prefers-reduced-motion:reduce){
    .ziel-duration-option > .ziel-duration-card,
    .ziel-duration-check::before,
    .ziel-duration-check::after{
        transition:none !important;
    }
}

/* ========================================================================== 
   Ziel popup + drawer prosperity refresh — final override
   Fixes the book section visibility and gives selections/buttons a warmer
   wealth, vitality, success and prosperity palette.
   ========================================================================== */

:root{
    --prosperity-deep:#063f33;
    --prosperity-green:#0f8f5f;
    --prosperity-vital:#22c55e;
    --prosperity-mint:#b9f6d3;
    --prosperity-gold:#f6c453;
    --prosperity-gold-soft:#ffefb0;
    --prosperity-teal:#14b8a6;
    --prosperity-sky:#38bdf8;
    --prosperity-ink:#06130d;
    --prosperity-glass:rgba(6,63,51,0.62);
}

/* Dialog shell: keep the modal stable while only the form body scrolls. */
.ziel-modal-overlay{
    backdrop-filter:blur(25px) saturate(1.5) !important;
    -webkit-backdrop-filter:blur(25px) saturate(1.5) !important;
}

.ziel-modal{
    border:1px solid rgba(255,239,176,0.26) !important;
}

.ziel-modal-hero{
}

.ziel-modal-badge,
.ziel-modal--edit .ziel-modal-badge{
    border-color:rgba(246,196,83,0.45) !important;
    color:var(--prosperity-gold-soft) !important;
}

.ziel-modal-close{
}

/* Form grid: the Buch block spans the full width and can never be squeezed by the two-column fields. */
.ziel-form{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    overflow:hidden !important;
}

.ziel-form-scroll{
    display:grid !important;
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    align-content:start !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-color:rgba(246,196,83,0.72) rgba(255,255,255,0.08) !important;
}

.ziel-form-scroll > .ziel-form-message,
.ziel-form-scroll > .ziel-book-context,
.ziel-form-scroll > .ziel-field-duration{
    grid-column:1 / -1 !important;
}

/* Fixed Buch / Aktives Ziel section. */
.ziel-book-context,
.ziel-book-context--create,
.ziel-book-context--edit{
    position:relative !important;
    z-index:2 !important;
    display:grid !important;
    display:none !important;
    grid-template-columns:minmax(0,1fr) !important;
    gap:7px !important;
    min-height:unset !important;
    margin:0 !important;
    padding:22px 28px 24px !important;
    overflow:hidden !important;
    border:0 !important;
    border-bottom:1px solid rgba(255,239,176,0.20) !important;
    border-radius:0 !important;
    background:
        radial-gradient(circle at 96% 12%,rgba(246,196,83,0.22),transparent 31%),
        radial-gradient(circle at 10% 100%,rgba(34,197,94,0.18),transparent 36%),
        linear-gradient(135deg,rgba(6,63,51,0.74),rgba(6,28,39,0.54)) !important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.06) !important;
    backdrop-filter:blur(18px) saturate(1.12) !important;
    -webkit-backdrop-filter:blur(18px) saturate(1.12) !important;
}

.ziel-book-context::before{
    content:"" !important;
    position:absolute !important;
    top:0 !important;
    left:0 !important;
    width:5px !important;
    height:100% !important;
    display:block !important;
    background:linear-gradient(180deg,var(--prosperity-gold),var(--prosperity-vital)) !important;
    opacity:1 !important;
}

.ziel-book-context::after{
    content:"Buch" !important;
    position:absolute !important;
    right:22px !important;
    bottom:-8px !important;
    display:block !important;
    color:rgba(255,239,176,0.055) !important;
    font-size:72px !important;
    line-height:1 !important;
    font-weight:950 !important;
    letter-spacing:-0.08em !important;
    pointer-events:none !important;
}

.ziel-book-context--edit::after{
    content:"Ziel" !important;
}

.ziel-book-context span{
    width:max-content !important;
    max-width:100% !important;
    padding:7px 10px !important;
    border:1px solid rgba(246,196,83,0.32) !important;
    border-radius:999px !important;
    background:rgba(246,196,83,0.14) !important;
    color:var(--prosperity-gold-soft) !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:950 !important;
    text-transform:uppercase !important;
    letter-spacing:0.08em !important;
}

.ziel-book-context strong{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    max-width:100% !important;
    color:#ffffff !important;
    font-size:clamp(22px,4.2vw,34px) !important;
    line-height:1.08 !important;
    font-weight:950 !important;
    letter-spacing:-0.035em !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}

.ziel-book-context small{
    position:relative !important;
    z-index:1 !important;
    display:block !important;
    color:rgba(255,255,255,0.76) !important;
    font-size:13px !important;
    line-height:1.35 !important;
    overflow-wrap:anywhere !important;
}

.ziel-field-language{
    border-right:1px solid rgba(255,239,176,0.16) !important;
}

.ziel-field-duration{
    background:
        radial-gradient(circle at 0% 0%,rgba(34,197,94,0.10),transparent 34%),
        rgba(255,255,255,0.022) !important;
    border-top:1px solid rgba(255,239,176,0.16) !important;
}

.ziel-label{
    color:rgb(255 255 255 / 88%) !important;
}

/* Inputs/selects: stronger prosperity focus and better visible selection. */
.ziel-input-wrap,
.ziel-select-wrap{
    min-height:58px !important;
    border:1px solid rgba(185,246,211,0.22) !important;
    border-radius:14px !important;
}


.ziel-input-wrap input,
.ziel-select-wrap select{
    color:#ffffff !important;
    font-weight:950 !important;
}

.ziel-select-wrap select option{
    background:#063f33 !important;
    color:#fffbe8 !important;
}

.ziel-select-wrap::after{
    color:var(--prosperity-gold-soft) !important;
}

.ziel-input-wrap > span{
    color:rgb(255 255 255 / 95%) !important;
}

/* Duration cards: four vivid success/prosperity options. */
.ziel-duration-option--daily{
    --ziel-card-start:#064e3b;
    --ziel-card-end:#16a34a;
    --ziel-card-accent:#f6c453;
    --ziel-card-glow:rgba(246,196,83,0.36);
}

.ziel-duration-option--two-days{
    --ziel-card-start:#075985;
    --ziel-card-end:#14b8a6;
    --ziel-card-accent:#b9f6d3;
    --ziel-card-glow:rgba(20,184,166,0.34);
}

.ziel-duration-option--weekly{
    --ziel-card-start:#365314;
    --ziel-card-end:#84cc16;
    --ziel-card-accent:#ffefb0;
    --ziel-card-glow:rgba(132,204,22,0.32);
}

.ziel-duration-option--monthly{
    --ziel-card-start:#78350f;
    --ziel-card-end:#f59e0b;
    --ziel-card-accent:#fff7cc;
    --ziel-card-glow:rgba(245,158,11,0.35);
}



.ziel-duration-value,
.ziel-duration-value > strong,
.ziel-duration-value > small,
.ziel-duration-copy > strong,
.ziel-duration-copy > small{
    color:#ffffff !important;
}

.ziel-duration-value > strong{
    font-weight:950 !important;
}

.ziel-duration-copy > small,
.ziel-duration-value > small{
    color:rgba(255,255,255,0.78) !important;
}

.ziel-duration-check{
    display:inline-flex !important;
    border:1px solid rgba(255,255,255,0.54) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.14) !important;
}


.ziel-duration-option input:checked + .ziel-duration-card{
    background:
        radial-gradient(circle at 86% 10%,rgba(255,255,255,0.30),transparent 33%),
        linear-gradient(145deg, #14b8a6,#075985) !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check{
    border-color:rgba(255,255,255,0.92) !important;
    background:linear-gradient(135deg,#fff8d9,#b9f6d3) !important;
}

.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check::before,
.ziel-duration-option input:checked + .ziel-duration-card .ziel-duration-check::after{
    background:var(--prosperity-deep) !important;
    opacity:1 !important;
}



.ziel-submit-button,
.ziel-modal.is-goal-ready .ziel-submit-button:not(:disabled){
    border:1px solid rgba(255,239,176,0.86) !important;
    color:var(--prosperity-ink) !important;
    box-shadow:0 16px 34px rgba(34,197,94,0.22) !important;
}


.ziel-disable-button{
    border:1px solid rgba(185,246,211,0.26) !important;
    background: #5b5b5b !important;
    color:#eafff2 !important;
}

.ziel-disable-button:hover:not(:disabled){
    border-color:rgba(255,239,176,0.48) !important;
    background:linear-gradient(135deg,rgba(6,95,70,0.86),rgba(20,184,166,0.42)) !important;
    transform:translateY(-2px) !important;
}

.ziel-disable-button.is-confirming{
    border-color:rgba(255,210,122,0.82) !important;
    background:linear-gradient(135deg,#7f1d1d,#f59e0b) !important;
    color:white !important;
}

.ziel-submit-button:disabled,
.ziel-disable-button:disabled{
    border-color:rgba(255,255,255,0.11) !important;
    background:rgba(255,255,255,0.08) !important;
    color:rgba(255,255,255,0.42) !important;
    box-shadow:none !important;
}

/* Drawer: attractive Verfügbare Sprachen buttons. */
.drawer-section h4{
    /* background:linear-gradient(135deg,rgb(0 0 0 / 20%),rgb(0 0 0 / 14%)) !important; */
    /* border:1px solid rgb(255 255 255 / 24%) !important; */
    color:rgb(255 255 255 / 95%) !important;
}

.drawer-language-buttons{
    gap:12px !important;
}

.drawer-language-btn{
    --drawer-lang-start:#064e3b;
    --drawer-lang-end:#16a34a;
    --drawer-lang-glow:rgba(246,196,83,0.24);
    position:relative !important;
    isolation:isolate !important;
    overflow:hidden !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap: 10px !important;
    padding:15px 20px !important;
    border:1px solid rgba(255,255,255,0.55) !important;
    border-radius:30px !important;
    background:linear-gradient(135deg, #063f33, #063f33) !important;
    color:#eee8dc !important;
    box-shadow:0 14px 32px rgba(0,0,0,0.18) !important;
    transition:
        transform 180ms ease,
        border-color 180ms ease,
        box-shadow 180ms ease,
        filter 180ms ease !important;
}
.drawer-language-btn-finished {
    background: #0E231B !important;
}
.drawer-language-btn span{
    flex:1 1 auto !important;
    min-width:0 !important;

    display:flex !important;
    align-items:center !important;

    font-size:16px !important;
    line-height:1.15 !important;
    font-weight:950 !important;
    overflow-wrap:anywhere !important;
}

.drawer-language-btn small{
    flex:0 0 auto !important;

    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;

    padding:7px 10px !important;
    border:1px solid rgba(255,255,255,0.22) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.14) !important;
    color:rgba(255,255,255,0.90) !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    white-space:nowrap !important;
}
small.drawer-language-finished-tag{
        background:rgb(237 232 220) !important;
    color:#000000 !important;
    border-color:rgba(255,248,217,0.92) !important;
}

.drawer-language-btn:focus-visible{
    outline:3px solid rgba(246,196,83,0.46) !important;
    outline-offset:3px !important;
}

.drawer-language-btn-color-1,
.drawer-language-btn:nth-child(4n + 1){
    --drawer-lang-start:#064e3b;
    --drawer-lang-end:#16a34a;
    --drawer-lang-glow:rgba(246,196,83,0.30);
}

.drawer-language-btn-color-2,
.drawer-language-btn:nth-child(4n + 2){
    --drawer-lang-start:#075985;
    --drawer-lang-end:#14b8a6;
    --drawer-lang-glow:rgba(185,246,211,0.26);
}

.drawer-language-btn-color-3,
.drawer-language-btn:nth-child(4n + 3){
    --drawer-lang-start:#365314;
    --drawer-lang-end:#84cc16;
    --drawer-lang-glow:rgba(255,239,176,0.28);
}

.drawer-language-btn-color-4,
.drawer-language-btn:nth-child(4n + 4){
    --drawer-lang-start:#78350f;
    --drawer-lang-end:#f59e0b;
    --drawer-lang-glow:rgba(255,247,204,0.28);
}

.drawer-language-btn-weiterlesen{
    background:linear-gradient(135deg, #0f766e, #14b8a6) !important;
    border-color:rgba(255,255,255,0.6);
}

.drawer-language-btn-weiterlesen:hover{
    background:linear-gradient(135deg, #0d9488, #2dd4bf) !important;
}


.drawer-language-btn-weiterlesen small{
    background:rgb(237 232 220) !important;
    color:#000000 !important;
    border-color:rgba(255,248,217,0.92) !important;
}

.ziel-add-button{
    border:1px solid rgba(255,239,176,0.82) !important;
    border-radius:999px !important;
    background: rgb(255 255 255) !important;
    color:var(--prosperity-ink) !important;
    box-shadow:0 16px 34px rgba(34,197,94,0.24) !important;
}

.ziel-add-button span{
    background:rgba(6,19,13,0.92) !important;
    color:#fff8d9 !important;
}

.ziel-add-button:hover{
    transform:translateY(-2px) !important;
    box-shadow:0 20px 44px rgba(34,197,94,0.30) !important;
}

@media(max-width:720px){
    .ziel-form-scroll{
        grid-template-columns:1fr !important;
    }

    .ziel-field-language{
        border-right:0 !important;
        border-bottom:1px solid rgba(255,239,176,0.16) !important;
    }

    .ziel-book-context,
    .ziel-book-context--create,
    .ziel-book-context--edit{
        padding:20px 18px 22px !important;
    }

    .ziel-book-context::after{
        right:14px !important;
        font-size:56px !important;
    }

    .drawer-language-btn{
        gap:10px !important;
    }
}

@media(max-width:480px){
    .ziel-book-context strong{
        font-size:clamp(20px,7.5vw,28px) !important;
    }

    .ziel-duration-option > .ziel-duration-card{
        padding:16px !important;
    }
}


/* ========================================================================== 
   Drawer language page-count badge
   Uses the same visual language as the Lesen pill and sits directly before it.
   ========================================================================== */
.drawer-language-btn .drawer-language-copy{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:flex !important;
    align-items:center !important;
    gap:10px !important;
}

.drawer-language-btn .drawer-language-name{
    flex:1 1 auto !important;
    min-width:0 !important;
    display:block !important;
    color:inherit !important;
    font-size:16px !important;
    line-height:1.12 !important;
    font-weight:950 !important;
    letter-spacing:-0.02em !important;
    overflow-wrap:anywhere !important;
}

.drawer-language-btn .drawer-language-pages{
    flex:0 0 auto !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-height:30px !important;
    margin-left:auto !important;
    padding:7px 10px !important;
    border:1px solid rgba(255,255,255,0.22) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,0.14) !important;
    color:rgba(255,255,255,0.90) !important;
    box-shadow:none !important;
    font-style:normal !important;
    font-size:11px !important;
    line-height:1 !important;
    font-weight:900 !important;
    letter-spacing:0 !important;
    white-space:nowrap !important;
    font-variant-numeric:tabular-nums !important;
}

.drawer-language-btn .drawer-language-pages::before{
    content:none !important;
    display:none !important;
}

.drawer-language-btn-weiterlesen .drawer-language-pages{
    background:rgb(237 232 220) !important;
    color:#000000 !important;
    border-color:rgba(255,248,217,0.92) !important;
}

@media(max-width:720px){
    .drawer-language-btn{
        gap:8px !important;
    }

    .drawer-language-btn .drawer-language-copy{
        gap:8px !important;
    }

    .drawer-language-btn .drawer-language-pages{
        width:max-content !important;
        max-width:100% !important;
    }
}

@media(max-width:420px){
    .drawer-language-btn{
        align-items:center !important;
    }
}

/* ========================================================================== 
   Voll gelesen – 70%-Freigabe, Cover-Menü und Aktive-Ziele-Aktion
   ========================================================================== */

.book-card.is-finished{
    box-shadow:0 18px 50px rgba(16,185,129,0.12);
}

.book-card.is-finished .book-cover:after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    background:linear-gradient(135deg, rgba(34,197,94,0.16), transparent 46%);
    z-index:1;
}

.book-cover-finished-badge{
    position:absolute;
    top:60px;
    right:18px;
    z-index:4;
    min-height:30px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 11px;
    border:1px solid rgba(185,255,217,0.46);
    background: #0E231B;
    color:#d9fff2;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    font-size:10px;
    border-radius:999px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:0.08em;
}

.tag-finished{
    background: #0E231B !important;
    border:1px solid rgba(185,255,217,0.38) !important;
    color:#d9fff2 !important;
    font-weight:900 !important;
}

.book-cover-more-wrap{
    position:absolute;
    top:60px;
    right:18px;
    z-index:7;
}

.book-cover-more-btn{
    width:34px;
    height: 34px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:1px solid rgba(255,255,255,0.24);
    background:rgba(4,12,22,0.58);
    color:#fff;
    cursor:pointer;
    font-size:22px;
    line-height:1;
    font-weight:950;
    border-radius:999px;
    backdrop-filter:blur(14px);
    -webkit-backdrop-filter:blur(14px);
    transition:transform 180ms ease, background 180ms ease, border-color 180ms ease;
}

.book-cover-more-btn:hover,
.book-cover-more-btn:focus-visible{
    transform:translateY(-1px);
    background:rgb(255 255 255 / 95%);
    outline:none;
    color:black;
}

.book-cover-more-menu{
    position:absolute;
    top:40px;
    right:0;
    width:min(250px, calc(100vw - 40px));
    display:grid;
    gap:8px;
    padding:10px;
    border:1px solid rgba(185,255,217,0.32);
    background:rgba(2,6,23,0.92);
    color:#fff;
    box-shadow:0 20px 60px rgba(0,0,0,0.38);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
}

.book-cover-more-menu[hidden]{
    display:none !important;
}

.book-cover-more-menu .mark-finished-btn{
    width:100%;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border:0;
    background: rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 74%);
    color:#052e22;
    cursor:pointer;
    padding:0 12px;
    font-size:12px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:-0.02em;
}

.book-cover-more-menu .mark-finished-btn:hover,
.book-cover-more-menu .mark-finished-btn:focus-visible{
    background:#d9fff2;
    outline:none;
}

.book-cover-more-menu small{
    color:rgba(255,255,255,0.68);
    font-size:10.5px;
    line-height:1.35;
}

.main-ziel-finished-badge{
    min-height:32px;
    padding:0 13px;
    border-radius:9px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:#000000;
    background:rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 74%);
    font-size:11px;
    line-height:1;
    font-weight:950;
    text-transform:uppercase;
    letter-spacing:-0.02em;
}

.main-ziel-feature-actions .mark-finished-btn{
    color:#052e22;
    background:rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 74%);
}

.main-ziel-feature-actions .mark-finished-btn:hover,
.main-ziel-feature-actions .mark-finished-btn:focus-visible{
    background:rgb(255 255 255 / 95%);
    border:1px solid rgb(255 255 255 / 74%);
    outline:none;
}

.mark-finished-btn[disabled],
.book-cover-more-btn[disabled]{
    cursor:progress;
    opacity:0.72;
}

@media(max-width:520px){
    .book-cover-finished-badge,
    .book-cover-more-wrap{
        top:54px;
        right:15px;
    }

    .book-cover-more-menu{
        right:-2px;
        width:min(230px, calc(100vw - 34px));
    }

    .main-ziel-feature-actions{
        flex-wrap:wrap;
    }
}