@font-face{
  font-family: OpenSansLight;
  src: url("OpenSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: OpenSansRegular;
  src: url("OpenSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: OpenSansSemiBold;
  src: url("OpenSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: OpenSansBold;
  src: url("OpenSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face{
  font-family: OpenSansExtraBold;
  src: url("OpenSans-ExtraBold.ttf") format("truetype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}


/* ---- Design tokens ---- */
/* ---- Design tokens (brand palette only) ---- */
:root{

   --lt-color-gray-100: #f8f9fc;
  --lt-color-gray-200: #f1f3f9;
  --lt-color-gray-300: #dee3ed;
  --lt-color-gray-400: #c2c9d6;
  --lt-color-gray-500: #8f96a3;
  --lt-color-gray-600: #5e636e;
  --lt-color-gray-700: #2f3237;
  --lt-color-gray-800: #1d1e20;
  --lt-color-gray-900: #111213;
  --lt-color-footer-bg: #F3F3F3;


--lt-color-white: #fff;
--lt-color-black: #111213;

  --lt-color-transparent: rgba(255, 255, 255, 0);

  --lt-color-background-light: var(--lt-color-gray-100);
  --lt-color-background-default: var(--lt-color-gray-200);
  --lt-color-background-dark: var(--lt-color-gray-300);

  --lt-color-border-light: var(--lt-color-gray-200);
  --lt-color-border-default: var(--lt-color-gray-300);
  --lt-color-border-dark: var(--lt-color-gray-400);

  --lt-color-text-very-light: var(--lt-color-gray-500);
  --lt-color-text-light: var(--lt-color-gray-600);
  --lt-color-text-default: var(--lt-color-gray-700);
  --lt-color-text-dark: var(--lt-color-gray-800);

  --lt-color-overlay-default: var(--lt-color-white);
  --lt-color-overlay-dark: var(--lt-color-white);
  --lt-color-overlay-transparent: rgba(0, 0, 0, 0.1);

  --lt-shadow-website-overlay: 0 0 7px 0 rgba(0, 0, 0, 0.3);
  --lt-shadowDefault: 0 2px 6px -1px rgba(0, 0, 0, 0.16), 0 1px 4px -1px rgba(0, 0, 0, 0.04);
  --lt-shadowActive: 0 0 8px -2px rgba(0, 0, 0, 0.1), 0 6px 20px -3px rgba(0, 0, 0, 0.2);
  /* Brand colors from your styleguide */
  --color-blue:      #006EA0;  /* Blau – Pantone 308, RGB 0/110/160 */
  --color-logo-blue: #274C63;  /* Logoblau – Pantone 534, RGB 39/76/99 */
  --color-orange:    #EE7F00;  /* Orange – Pantone 1505, RGB 238/127/0 */
  --color-gray:      #6E6E6E;  /* Grau – Pantone 7540, RGB 110/110/110 */

  /* Grau-Abstufungen (can be tweaked if you get exact values) */
  --gray-90: #4D4D4D;
  --gray-80: #5A5A5A;
  --gray-70: #676767;
  --gray-60: #757575;
  --gray-50: #828282;
  --gray-40: #9B9B9B;
  --gray-30: #B5B5B5;
  --gray-20: #D0D0D0;
  --gray-10: #EBEBEB;

  /* semantic tokens used in the rest of the CSS */
  --brand-blue:      var(--color-blue);
  --brand-blue-700:  var(--color-logo-blue);
  --brand-orange:    var(--color-orange);
  --brand-orange-700:var(--color-orange); /* same tone – no extra color */

  --text:   var(--lt-color-text-dark);          /* main text */
  --muted:  var(--lt-color-background-light); /* page bg !!!!!*/
  --border: var(--lt-color-border-default);
  --shadow-1: var(--lt-shadowDefault);

  --container:1494px;

 --rainbow-h: 4px;      /* your color strip height */
--control-h: 44px;     /* button/select height */

--header-pad-top: calc(11px + var(--rainbow-h)); /* 12px below strip */
--header-pad-bottom: 12px;

--header-h: calc(var(--control-h) + var(--header-pad-top) + var(--header-pad-bottom));

  --logo-w:160px;
  --right-w:520px;
  --nav-gap:0px;
  --nav-offset-y:20px;
  --logo-scale:1.15;

  --hero-h:clamp(340px,32vw,440px);
  --hero-band-h:180px;
  --hero-band-color:var(--color-logo-blue); /* blue strip under hero */
  --hero-badge-bg:var(--color-blue);        /* “Willkommen” badge */
  
 /* NEW: tune these instead of editing calc() */
  --hero-band-overlap: 26px;        /* how much the blue band overlaps the image */
  --hero-band-extra: 100px;          /* extra blue height below the default band */
   --hero-footer-pad: calc(var(--hero-band-total-h) - var(--hero-band-overlap));
  --hero-band-total-h: calc(var(--hero-band-h) + var(--hero-band-extra)); /* total blue band height */
  --hero-text-offset: -48px;         /* moves the Willkommen badge up/down */
  
}


/* ---- Base ---- */
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
html,body{
  font-family:"OpenSansRegular",sans-serif;
  
  color:var(--text);
  background:var(--lt-color-white);
}
img{max-width:100%;display:block}
a{color:var(--brand-blue);text-decoration:none}
a:hover{color:var(--brand-blue-700);text-decoration:underline}
a,button,input,select,textarea{
  transition:background-color .3s,border .3s,color .3s;
}
.container{max-width:var(--container);margin:0 auto;padding:0}

html{ position: relative; }

html::before{
  content:"";
  position:absolute;     /* scrolls away */
  top:0; left:0; right:0;
  height: var(--rainbow-h);
  z-index:3000;
  pointer-events:none;

  background: linear-gradient(90deg,
    #004e76 0%,
    #004e76 10.94%,

    #4d6e81 10.94%,
    #4d6e81 22.19%,

    #427f74 22.19%,
    #427f74 33.39%,

    #69a352 33.39%,
    #69a352 44.58%,

    #7ba040 44.58%,
    #7ba040 55.84%,

    #969a37 55.84%,
    #969a37 67.03%,

    #a1972b 67.03%,
    #a1972b 78.23%,

    #b28d1f 78.23%,
    #b28d1f 89.48%,

    #c98526 89.48%,
    #c98526 100%
  );
}




/* ---- Type ---- */
p,
label,
.col-form-label,
table td,
.table td,
.form-control,
select.form-control,
input.form-control,
.selectize-input,
.selectize-dropdown,
.selectize-dropdown .option{
  font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 400;
}

h1,h2,h3{
  color:var(--brand-blue-700);
  letter-spacing:-.005em;
  font-weight:800;
  margin:0;
}
h1{font-size:2.5em;line-height:1.2}
h2{
  
  font-size: 2.3125rem;
  line-height: 3.375rem;
  font-weight:700;
}
h3{font-size:1.75em;line-height:1.5}
h4{font-size:1.25em;line-height:1.7;font-weight:600;color:var(--text)}
ul.list{
  list-style:disc outside;
  padding-left:1.25rem;
  margin:1em 0 1.875em;
}
ul.list li{
   font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 400;
}
ul.list ul{
  list-style:circle outside;
  margin:.3em 0 .3em 1.25rem;
}
.required:after{content:" *";color:red}
a.anchor{display:block;position:relative;top:-150px;visibility:hidden}

/* font smoothing */
html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- Header & Navbar ---- */
header{
  position:relative;
  border:1px solid var(--lt-color-border-default);
  
}
header .container{
  display:flex;
  align-items:center;
  justify-content:space-between;

  height: var(--header-h);     /* ✅ fixed total header height */
  min-height: 0;               /* ✅ stop min-height from inflating it */

  padding-top: var(--header-pad-top);
  padding-bottom: var(--header-pad-bottom);
  padding-right: 5px;          /* keep your right spacing */
}


/* Logo */
.navbar-brand{
  width:var(--logo-w);
  flex:0 0 var(--logo-w);
  display:flex;
  align-items:center;
  margin:0;
  padding-left:0;
  margin-left: 0;
  height:var(--header-h);
  overflow:visible;
}
.navbar-brand img{
  height:calc(var(--header-h) - 12px) !important;
  width:auto;
  transform:scale(var(--logo-scale));
  transform-origin:left center;
}

/* Right header block (BP select + Abmelden) */
.nav-right{
  width:var(--right-w);
  flex:0 0 var(--right-w);
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:16px;
  margin-left:auto;
  margin-right:3px; /* !!!*/
}
.nav-right .navbar-nav{
  display:flex;
  flex-direction:row !important;
  align-items:center;
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.nav-right .nav-item{display:flex;align-items:center}

/* Business partner select */
.nav-right .selectize-control{
  border:none !important;
  margin:0 !important;
  position:relative;
  z-index:12;
}
.nav-right .selectize-input{
  display:flex !important;
  align-items:center !important;
  height:42px !important;
  min-height:auto !important;
  padding:0 38px 0 14px !important;
  border:1px solid var(--lt-color-border-default) !important;
  border-radius:0 !important;
  background:var(--lt-color-white) !important;
  color:#0f3a4a !important;
  font-weight:700;
  line-height:1 !important;
  box-shadow:none !important;
  height: var(--control-h) !important;
}
.nav-right .selectize-control.single .selectize-input:after{
  border-top-color:#0f3a4a !important;
  right:12px;
}
.nav-right .selectize-dropdown{
  border:2px solid var(--border) !important;
  border-radius:0 !important;
  box-shadow:var(--shadow-1);
}

/* Abmelden button (Login-style, with person icon) */
.nav-right .logoff-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height: var(--control-h); 
  min-width:136px;
  padding:0 18px 0 44px;
  border:none;
  border-radius:0 !important;
  background:#214b5a;
  color:var(--lt-color-white) !important;
  font-weight:700;
  line-height:1;
  box-shadow:none;
  text-decoration:none;
  position:relative;
  isolation:isolate;
  transition:background .2s,transform .02s;
  z-index:12;
    font-size: 0.87rem; /* !!! */
}
.nav-right .logoff-link:hover,
.nav-right .logoff-link:focus{
  background:#1b3e4a;
  text-decoration:none;
}
.nav-right .logoff-link:active{transform:translateY(1px);}
.nav-right .logoff-link:focus-visible{
  outline:3px solid rgba(33,75,90,.35);
  outline-offset:2px;
}
.nav-right .logoff-link::before{
  content:"";
  position:absolute;
  left:16px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  background:currentColor;
  -webkit-mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyIDEyYTQgNCAwIDEgMC00LTRhNCA0IDAgMCAwIDQgNFptMCAyYy00LjIgMC04IDIuMS04IDV2MWgxNnYtMWMwLTIuOS0zLjgtNS04LTV6Ii8+PC9zdmc+');
  mask-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0iI2ZmZiIgZD0iTTEyIDEyYTQgNCAwIDEgMC00LTRhNCA0IDAgMCAwIDQgNFptMCAyYy00LjIgMC04IDIuMS04IDV2MWgxNnYtMWMwLTIuOS0zLjgtNS04LTV6Ii8+PC9zdmc+');
  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
  -webkit-mask-position:center;
  mask-position:center;
  -webkit-mask-size:contain;
  mask-size:contain;
  pointer-events:none;
}

/* Navbar overlay sitting in header lane */
#navbar{
  top:0;
  left:0;
  right:0;
  height:var(--header-h);
  background:transparent !important;
  box-shadow:none !important;
  border:0;
  z-index:11;
  height: var(--header-h);
}

#navbar .container{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  height:100%;
  padding-left:var(--logo-w);
  padding-right:var(--right-w);
}

/* collapse wrapper */
#navbarSupportedContent{
  display:flex !important;
  align-items:center;
  height:100%;
}

/* main nav list */
#navbar .main-nav{
  position:static;
  transform:none;
  display:flex;
  flex-direction:row;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
  max-width:calc(100% - var(--logo-w) - var(--right-w));
  flex-wrap:nowrap;
}

/* keep nav clickable despite parent pointer-events:none */
#navbar .container,
#navbarSupportedContent,
#navbar .main-nav,
#navbar .main-nav>li,


#navbar .main-nav>li{
  display:flex;
  align-items:center;
}

/* final nav-link appearance */
#navbar .main-nav > li > a{
  display:flex;
  align-items:center;
  justify-content:center;
  height:var(--header-h);
  padding:0 10px;
  white-space:nowrap;
  color:var(--lt-color-black);
  background:transparent;
  border:0;
  text-decoration:none;
  font:inherit;
  letter-spacing:normal;
  line-height:inherit;
  position:relative;             /* ⟵ needed for the bottom bar */
  font-size: 1.125rem;
  padding-top: 5px;  
}


#navbar .main-nav>li:first-child>a{padding-left:0;}

/* blue bar at the very bottom of the header */
#navbar .main-nav > li > a::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;                 /* ⟵ sits at bottom of nav/header */
  height:3px;
    background: var(--brand-blue-700);
  transform:scaleX(0);
  transform-origin:center;
}

#navbar .main-nav > li > a:hover,
#navbar .main-nav > li > a:focus,
#navbar .main-nav > li > a.active{
  color:#000;
}

#navbar .main-nav > li > a:hover::after,
#navbar .main-nav > li > a:focus::after,
#navbar .main-nav > li > a.active::after{
  transform:scaleX(1);      /* show full-width bar on active/hover */
}

/* neutralize legacy bootstrap navbar box-shadow */
.navbar{
  padding:0;
  box-shadow:none !important;
}

/* sticky behavior (used by JS) */
/* keep the color strip fixed */
html::before{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--rainbow-h);
  z-index: 4000;
}

/* header sits under the strip */
header{
  position: sticky;
  top: var(--rainbow-h);
  z-index: 3000;
}

/* whatever element JS marks as .sticky should stick too */
.sticky{
  position: sticky;
  top: var(--rainbow-h);
  z-index: 3100;
}


/* area below the image/blue strip */
.content{
   min-height: unset !important;
  background:var(--lt-color-background-default);      
  padding-top:0 !important;   /* remove space above first section */
  padding-bottom:0 !important;
}


/* 1st row = “…im Kundenportal der Stadtwerke Meerane GmbH” */
.content .container > .row:first-of-type{
  background:var(--lt-color-white);                 /* the white strip itself */
  padding:3rem 3.9rem 3rem;          /* inner spacing for the text */
  margin:0;                        /* no extra space between sections */
}

/* inner content – no extra frame, just inherit the row’s white background */
.content .container > .row:first-of-type > .col-md-12{
  background:transparent;
  border:none;
  box-shadow:none;
  padding:0;
}




/* 2nd row in main container = "Sie haben Fragen zum Kundenportal?" card */
.content .container > .row:nth-of-type(2){
  background:#E5EAE4; /* #F1F4F6 – visibly grey */
  padding:2.5rem 2rem;      /* more space above/below the card */
}

/* card itself stays white on the grey band */
.content .container > .row:nth-of-type(2) .card{
  background:var(--lt-color-white);
}

/* 3rd row = Strom-/Gaspreisrechner + Glasfaser-Verfügbarkeit prüfen */
.content .container > .row:nth-of-type(3){
  background:var(--lt-color-white);
  padding:3rem 2rem 4rem;  /* add side padding so white panel is visible */
}

/* Make all main content rows line up with the hero/container width */
.content .container > .row{
  margin-left: 0;
  margin-right: 0;
}

.content .container > .row:first-of-type,
.content .container > .row:nth-of-type(2){
  margin-left: 0;
  margin-right: 0;
}

/* put this near your layout / content rules */
.content-frame{
  background:var(--lt-color-background-default);          /* same as .content */
}

/* optional: if you want to be explicit */
.header{
  background:var(--lt-color-background-default);
}






/* ---- Hero image + blue band + Willkommen ribbon ---- */
.header{
  position:relative;
  padding-bottom: var(--hero-footer-pad);
}

/* image frame same width as visible strip underneath */
.header-image figure{
  position:relative;
  width:100%;
  max-width:var(--container);    /* same width as the page content */
  height:var(--hero-h);
  margin:0 auto;
  overflow:visible;              /* keep the blue band visible below */
}

/* photo */
.header-image figure img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;        /* ✅ show whole image */
  object-position:center;    /* ✅ no offset cropping */
  z-index:1;
  top:-9px; /*!!!!*/
}


/* dark gradient over photo */
.header-image figure::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 64.44%,rgba(0,0,0,.7) 100%);
  z-index:2;
}

/* blue strip under the picture */
.header-image figure::after{
  content:"";
  position:absolute;
  left:0;
  right:0;

  top: calc(100% - var(--hero-band-overlap));
  height: var(--hero-band-total-h);

  background:var(--hero-band-color);
  z-index:0;
}


/* Willkommen ribbon sitting on the seam */
.header-text{
  position:absolute;
  left:0;
  right:0;
   bottom: calc(var(--hero-band-h) - var(--hero-text-offset));
  display:flex;
  align-items:flex-end;
  justify-content:flex-start;
  max-width:var(--container);
  margin:0 auto;
  z-index:3;
}
.header-text>div{
  background:var(--hero-badge-bg);
 padding:1.1em 1.2em;  
  margin-left:32px;  
}
.header-text h1{
  color:var(--lt-color-white);
  margin:0;
  font-weight:700 !important;
  text-transform:uppercase;
  letter-spacing:.5px;
  line-height:1.1;
  font-size: 3rem !important;
}

/* ---- Buttons ---- */
.btn{
  border-radius:0 !important;
  font-weight:800;
  box-shadow:none;
}
.btn-primary{
  background:var(--brand-orange) !important;
  border:none !important;
  color:var(--lt-color-white) !important;
   font-family: "OpenSansBold", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2rem;
}

header .btn-primary,
header a.btn-primary{
  font-size: 0.87rem;      /* your header button size */
  line-height: 44px;       /* matches your --control-h */
  min-height: 46px !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background:var(--brand-orange-700) !important;
}
.btn-secondary{
  background:var(--brand-blue-700) !important;
  border:none !important;
  color:var(--lt-color-white) !important;
}
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active{
  background:var(--brand-blue) !important;
}
.btn-link{
  font-weight:400;
  color:#e30513;
  text-decoration:none;
}
.btn-link:hover{
  color:#bf0410;
  text-decoration:underline;
}

/* ---- Cards & Forms ---- */
.card{
  border:1px solid var(--border);
  border-radius:0;
  box-shadow:var(--shadow-1);
  background:var(--lt-color-white);
}
.card-header{
  background:var(--lt-color-white);
  border:none;
  font-weight:800;
  color:var(--brand-blue-700);
}
.card-body-2{
  min-height:1px;
  padding:1.25rem;
  width:100%;
}
input,textarea,.selectize-input{
  background:var(--lt-color-white) !important;
  border:1px solid var(--border) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
input:focus,textarea:focus,.selectize-input.focus{
  border-color:var(--brand-blue) !important;
  box-shadow:0 0 0 3px rgba(0,110,160,.16) !important;
}

/* ---- Footer ---- */
/* ---- Footer ---- */
footer.page-footer,
footer{
  /* light grey like the main content */
  background:var(--muted);;
  color:var(--lt-color-black) !important;
  border-top:none !important;

  /* kill the white gap above and extra space below */
  margin-top:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
   padding: 0;    
   
}

/* inner footer box – same width as content, less vertical padding */
footer .container{
  
  max-width:var(--container);
  margin:0 auto;
  background:var(--lt-color-footer-bg);                 /* inner panel !!!*/
  padding:1.5rem 2.8em 1rem;           /* was 2.5rem 2rem 1.5rem */
  border-top:1px solid black;
  padding-top: 2.3rem !important;
  padding-bottom: 1.95rem !important;

}

footer p{
  font-size:1em;
  line-height:1.7;
  font-weight:400;
}
footer h5{
  font-size:1.125em;
  font-weight:600;
  color:var(--lt-color-black) !important;
}
footer a{
  color:var(--lt-color-black) !important;
  text-decoration:underline;
}
footer a:hover{
  color:#000 !important;
  text-decoration:none;
}
footer .footer-phone{color:var(--lt-color-black) !important}

/* less space before the copyright line */
footer .footer-copyright{
  color:var(--lt-color-black) !important;
  text-align:left !important;
  border-top:1px solid var(--lt-color-border-default) !important;
  margin-top:1rem;            /* was 1.5rem */
  padding-top:.75rem;         /* was 1rem */
}



/* ---- Cookie Banner ---- */
#gdpr-cookie-message{
  position:fixed;
  right:30px;
  bottom:30px;
  max-width:375px;
  padding:20px;
  border-radius:5px;
  margin-left:30px;
  z-index:9999;
  box-shadow:0 6px 6px rgba(0,0,0,.25);
  background:var(--brand-blue) !important;
  font-family:Arial,sans-serif !important;
}
#gdpr-cookie-message h4,
#gdpr-cookie-message h5{
  color:var(--lt-color-white);
  font-weight:500;
  margin-bottom:10px;
}
#gdpr-cookie-message h4{font-size:18px}
#gdpr-cookie-message h5{font-size:15px}
#gdpr-cookie-message p,
#gdpr-cookie-message ul{
  color:var(--lt-color-white);
  font-size:13px;
  line-height:1.5;
}
#gdpr-cookie-message p:last-child{
  text-align:right;
  margin-bottom:0;
}
#gdpr-cookie-message li{
  width:49%;
  display:inline-block;
}
#gdpr-cookie-message a{
  color:var(--lt-color-white);
  text-decoration:none;
  font-size:13px;
  padding-bottom:2px;
  border-bottom:1px dotted rgba(255,255,255,.5);
}
#gdpr-cookie-message a:hover{
  color:var(--lt-color-white);
  border-bottom-color:#EE7F00;
}
#gdpr-cookie-message button,
button#ihavecookiesBtn{
  border:none;
  background:var(--brand-orange) !important;
  color:var(--lt-color-white);
  font-size:15px;
  padding:7px;
  border-radius:3px;
  margin-left:15px;
  cursor:pointer;
  transition:.3s;
}
#gdpr-cookie-message button:hover{
  background:var(--lt-color-white) !important;
  color:var(--brand-orange) !important;
}
button#gdpr-cookie-accept{
  background:var(--lt-color-white) !important;
  color:var(--brand-orange) !important;
}
#gdpr-cookie-message button:disabled{opacity:.3}
#gdpr-cookie-message input[type="checkbox"]{
  float:none;
  margin:0 5px 0 0;
}

/* ---- Tooltips ---- */
.tooltip2,.hint{
  position:relative;
  display:inline-block;
  width:16px;
  height:1em;
}
.tooltip2{
  background:url('../../../img/swmn/tooltip.png') no-repeat left 4px transparent;
  height:16px;
}
.tooltip2 .tooltiptext,
.hint .hinttext{
  visibility:hidden;
  position:absolute;
  z-index:1;
  padding:5px;
  border-radius:6px;
  background:#000;
  color:var(--lt-color-white);
  opacity:.8;
}
.tooltip2 .tooltiptext{
  width:160px;
  bottom:100%;
  left:50%;
  margin-left:-82px;
  margin-bottom:5px;
  text-align:center;
}
.tooltip2:hover .tooltiptext{visibility:visible}
.tooltip2 .tooltiptext::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:#000;
}
.hint{
  background:url('../../../img/info.svg') no-repeat left 0 transparent;
}
.hint .hinttext{
  width:260px;
  bottom:100%;
  left:50%;
  margin-left:-132px;
  margin-bottom:5px;
  text-align:center;
}
.hint:hover .hinttext{visibility:visible}
.hint .hinttext::after{
  content:"";
  position:absolute;
  top:100%;
  left:50%;
  margin-left:-5px;
  border:5px solid transparent;
  border-top-color:#000;
}

/* ---- Sliders ---- */
.econsumption-slider-frame,
.gasconsumption-slider-frame{
  margin:0 0 25px 15px;
  width:410px;
  height:30px;
  background:transparent no-repeat left top;
}
.econsumption-slider-frame{
  background-image:url(../../img/swmn/slider-strom-bg.png);
}
.gasconsumption-slider-frame{
  background-image:url(../../img/swmn/slider-gas-bg.png);
}
.econsumption-slider-frame .ui-slider-horizontal,
.gasconsumption-slider-frame .ui-slider-horizontal{
  width:410px;
  height:30px;
  background:transparent;
  border:none;
  border-radius:0;
}
.econsumption-slider-frame .ui-slider-range,
.gasconsumption-slider-frame .ui-slider-range{
  width:410px;
  height:30px;
  background:transparent no-repeat left top;
  border-radius:0;
}
.econsumption-slider-frame .ui-slider-range{
  background-image:url(../../img/swmn/slider-strom-aktiv.png);
  padding-right:10px;
}
.gasconsumption-slider-frame .ui-slider-range{
  background-image:url(../../img/swmn/slider-gas-aktiv.png);
}
.econsumption-slider-frame .ui-slider-handle,
.gasconsumption-slider-frame .ui-slider-handle{
  display:none;
}

@media screen and (max-width:1000px){
  .econsumption-slider-frame,
  .gasconsumption-slider-frame{width:256px}
  .econsumption-slider-frame{
    background-image:url(../../img/swmn/slider-strom-kl.png);
  }
  .gasconsumption-slider-frame{
    background-image:url(../../img/swmn/slider-gas-kl.png);
  }
  .econsumption-slider-frame .ui-slider-horizontal,
  .gasconsumption-slider-frame .ui-slider-horizontal{width:256px}
  .econsumption-slider-frame .ui-slider-range{
    width:256px;
    background-image:url(../../img/swmn/slider-strom-kl-aktiv.png);
  }
  .gasconsumption-slider-frame .ui-slider-range{
    width:256px;
    background-image:url(../../img/swmn/slider-gas-kl-aktiv.png);
  }
}

/* ---- Offers ---- */
.offer-recommendation{
  position:absolute;
  top:-25px;
  right:15px;
  transform:rotate(-5deg);
  box-shadow:0 0 0 4px var(--lt-color-white);
  border:1px solid #000;
  border-radius:12px;
  background:#000;
  color:var(--lt-color-white);
  padding:1em !important;
  font-size:.875em;
  font-weight:700;
}
.offer-recommendation p{margin:0 !important}
.offer-header{
  background:#e30613;
  padding:3em 1.5em 1.5em;
}
.offer-header h3{
  color:var(--lt-color-white);
  font-size:1.75em;
  line-height:1.5;
  letter-spacing:-.005em;
  font-weight:600;
}
.offer-header p{
  color:var(--lt-color-white);
  font-size:1.125em;
  line-height:1.5;
  margin:0 !important;
}
.offer-inner-detail h3{
  color:#000;
  font-size:1.75em;
  line-height:1.5;
  letter-spacing:-.005em;
  font-weight:800;
}
.offer-inner-detail p{margin:0 !important}
.offer-inner-detail{box-shadow:none !important}

/* ---- Utilities ---- */
.light-gray{background:var(--muted) !important}
.bg-success{background:var(--brand-blue) !important}
.border-success{border-color:var(--brand-blue) !important}
.highlight-red{color:#e30513}
.highlight-bold{font-weight:700}
.order-group{
  padding:1rem !important;
  margin-bottom:.5rem !important;
  box-shadow:0 .125rem .25rem rgba(0,0,0,.075) !important;
  border-radius:.25rem !important;
  background:var(--lt-color-white) !important;
}
.spacer-opening{display:inline-block;width:96px}


@media (max-width:980px){
  :root{--header-h:72px}
  #navbar{
    position:static;
    height:auto;
  }
  #navbar .container{
    padding:0;
    max-width:var(--container);
  }
  #navbarSupportedContent{
    display:block !important;
    height:auto;
  }
  #navbar .main-nav{
    gap:20px;
    flex-wrap:wrap;
    max-width:none;
  }
  #navbar .main-nav>li>a{
    height:56px;
    padding:0 14px;
    white-space:normal;
  }
  .header-image figure{
    width:100%;
    height:56vw;
  }
  :root{
    --hero-gutter:20px;
    --hero-band-h:140px;
  }
}

h1,h2,h3,h4,
.card-header,
.btn,
.nav-right .logoff-link{
  font-family:"OpenSansBold",sans-serif;
}

/* 1. The gradient bar at the very top should NOT catch clicks */
body::before{
  pointer-events: none;           /* let clicks pass through */
}

/* 2. The navbar overlay (the one with Meine Daten / Meine Verträge / Postfach)
      is already positioned over the header, so keep it click-through */

#navbar,
#navbar .container,
#navbarSupportedContent{
  pointer-events: none;
}


#navbar a,
#navbar button,
#navbar .main-nav,
#navbar .main-nav *{
  pointer-events: auto;
}


/* 3. Ensure the logo itself is on top and clickable */
header .navbar-brand{
  position: relative;
  z-index: 20;
}

.content,
.content-frame,
.header{
  background:var(--muted);
}

header{
  border:1px solid var(--border);
}

.card{
  border:1px solid var(--border);
}

/* Links and accents */
a{color:var(--brand-blue);}
a:hover{color:var(--brand-blue-700);}

.btn-primary{
  background:var(--brand-orange) !important;
  border: 1px solid !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active{
  background: var(--lt-color-white) !important;
  color: var(--brand-orange) !important;
  border: 1px solid var(--brand-orange) !important;
}

/* replace old red “highlight” with orange */
.btn-link,
.highlight-red{
  color:var(--brand-orange);
}
.btn-link:hover{
  color:var(--brand-orange);
}

/* dark blue buttons/areas -> Logoblau */
.nav-right .logoff-link,
.btn-secondary{
  background:var(--brand-blue-700) !important;
}
.nav-right .logoff-link:hover,
.nav-right .logoff-link:focus,
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active{
  background:var(--lt-color-white) !important;
  color:#004e76 !important;
   border: 1px solid;
}

/* success helpers */
.bg-success{background:var(--brand-blue) !important;}
.border-success{border-color:var(--brand-blue) !important;}

/* --- Footer tweaks: bigger text + more spacing --- */

/* make footer text larger */
footer a{
	font-size: 1.25rem;
	line-height: 2rem;
  padding-left: 25px;
}

footer h5{
  font-size: 1.25em;    /* was 1.125em */
}

/* more space between footer items (columns / lists) */
footer .row > [class*="col-"]{
  margin-bottom: 0.75rem;
}

footer ul{
  margin: 0;
  padding: 0;
  list-style: none;
}

footer ul li{
  margin: 0 0 1.25rem 0;    
}

.small{
  font-size: 1.25rem;
	line-height: 2.25rem;
  padding-left: 24px;
}

/* If there is only one content row on the page,
   make it a full-height white panel down to the footer */
.content .container > .row:only-of-type{
  background:var(--lt-color-white);
  padding:3rem 2rem 3rem;  /* adjust as you like */
  margin:0;
  min-height:calc(100vh - var(--header-h) - 3px); /* 3px = top gradient */
}

/* optional: let the grey background only show outside the container */
.content{
  background:var(--muted);          /* your grey */
}


header{
  position: sticky;
  top: 0;
  z-index: 2000;   /* above the page content */
  background: var(--lt-color-white); /* so content doesn’t show through!!! */
   box-shadow: 0 2px 18px rgba(0,0,0,.15);
     border-bottom: 0; 
}

/* Same height for Anmelden / Registrieren / Abmelden */
.nav-right .logoff-link,
header .btn,
header a.btn{
  height: 44px;
  min-height: 44px;
  line-height: 44px;     /* centers single-line text */
  padding-top: 0;
  padding-bottom: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* force header controls to 44px */
.nav-right .selectize-input{
  height: var(--control-h) !important;   /* needed because you already set 42px !important */
}

.nav-right .logoff-link,
header .btn,
header a.btn{
  height: var(--control-h);
  min-height: var(--control-h);
  line-height: var(--control-h);
}

/* Remove the dark gradient overlay on the hero image */
.header-image figure::before{
  background: none !important;
}

/* If any filter was applied anywhere, force it off */
.header-image figure img{
  filter: none !important;
}


#navbar{
  z-index: 2100;
}
/* keep the rainbow strip scrolling away (don’t fix it) */
html::before{
  position: absolute;
}

/* header sticks */
header{
  position: sticky;
  top: 0;
  z-index: 2000;
  background: var(--lt-color-white);
}

/* NAV: always sits in the header lane, from page load */
#navbar{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--header-h);
  z-index: 2100;           /* above header */
  background: transparent;
}

/* keep nav aligned between logo and right controls */
#navbar .container{
  height: 100%;
  padding-left: var(--logo-w);
  padding-right: var(--right-w);
}

/* if JS adds .sticky, don’t let it change the behavior */
#navbar.sticky{
  position: fixed;
  top: 0;
}

/* mobile: let it behave normally */
@media (max-width:980px){
  #navbar{
    position: static;
    height: auto;
  }
}

.header-text > div{
  padding: 1.12em 1.5em;   /* ↓ smaller height  |  ↑ bigger height !!!!*/
}

header a.btn-secondary{
  border: 1px solid var(--brand-blue-700) !important;
}

/* ============ GLOBAL TABLE LOOK (works even without <thead>) ============ */

/* ================== TABLES (Bootstrap .table) ================== */

/* frame */
table.table,
.table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  background:var(--lt-color-white);
  border:1px solid var(--brand-blue-700);
}

/* cells */
table.table th,
table.table td,
.table th,
.table td{
  border:0;
  padding:18px 22px;
  vertical-align:middle;
  text-align:left;
}

/* header row (your markup uses FIRST <tr> as header) */
table.table tr:first-child > th,
.table tr:first-child > th{
  background:var(--brand-blue-700);
  color:var(--lt-color-white);
  font-family:"OpenSansBold",sans-serif;
  font-weight:700;
  font-size:1.25rem;
  line-height:1.2;
  border-right:1px solid rgba(255,255,255,.55);
}
table.table tr:first-child > th:last-child,
.table tr:first-child > th:last-child{
  border-right:0;
}

/* don’t draw separator after the empty first header cell */
table.table tr:first-child > th:first-child,
.table tr:first-child > th:first-child{
  border-right:0;
}

/* row separators (between body rows) */
table.table tr + tr td,
.table tr + tr td{
   border-top: 0 !important;
}

/* ===== zebra striping: start WHITE then #F3F3F3 ===== */

/* for correct markup tables (with tbody) */
table.table tbody tr:nth-child(odd),
.table tbody tr:nth-child(odd){
  background:var(--lt-color-white);
}
table.table tbody tr:nth-child(even),
.table tbody tr:nth-child(even){
  background:var(--lt-color-footer-bg); /* #F3F3F3 */
}

/* fallback for your current markup tables (NO tbody: header is row 1) */
table.table tr:not(:first-child):nth-child(even),
.table tr:not(:first-child):nth-child(even){
  background:var(--lt-color-white);      /* first body row (row 2) */
}
table.table tr:not(:first-child):nth-child(odd),
.table tr:not(:first-child):nth-child(odd){
  background:var(--lt-color-footer-bg);  /* #F3F3F3 */
}

/* remove hover effect */
.table-hover tbody tr:hover,
table.table tbody tr:hover,
.table tbody tr:hover{
  background: inherit;
  filter: none;
}

/* kill scroll shadow artifacts from .table-responsive */
.table-responsive{
  box-shadow:none;
}
.table-responsive::before,
.table-responsive::after{
  content:none;
}

/* If you keep using table.table-responsive (non-bootstrap), make it behave */
table.table.table-responsive{
  display:table;
  width:100%;
}
/* Make the first column (icon/actions) as narrow as possible */
table.table tr > :first-child{
  width: 44px;            /* tweak: 32–56px */
  min-width: 44px;
  max-width: 44px;
  padding-left: 12px;     /* match your other columns */
  padding-right: 12px;
  white-space: nowrap;
}

/* Also ensure images/icons inside don’t force width */
table.table tr > :first-child img{
  display: inline-block;
  max-width: 20px;
  height: auto;
}

/* Hide the text caret in Selectize (keep dropdown working) */
.selectize-input input{
  caret-color: transparent;
}

/* optional: also remove the blue selection highlight inside selectize */
.selectize-input ::selection{
  background: transparent;
}

/* remove caret + selection highlight inside selectize */
.selectize-input input{
  caret-color: transparent;
}

.selectize-control .selectize-input ::selection,
.selectize-control .selectize-input input::selection{
  background: transparent;
  color: inherit;
}

/* remove the blue focus glow/outline */
.selectize-control .selectize-input:focus,
.selectize-control .selectize-input.focus{
  box-shadow: none !important;
  outline: none;
}

/* optional: prevent selecting text in the whole control */
.selectize-control .selectize-input{
  user-select: none;
  -webkit-user-select: none;
}

/* kill the internal selectize text input so no caret/selection can appear */
.selectize-control.single .selectize-input > input{
  width: 0 !important;
  min-width: 0 !important;
  max-width: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  position: absolute !important;
  left: -9999px !important;

  pointer-events: none !important;
  user-select: none !important;
  caret-color: transparent !important;
}

/* (optional) also ensure the visible value can’t be text-selected */
.selectize-control .selectize-input{
  user-select: none;
  -webkit-user-select: none;
}







/* keep Vertragdetails looking as-is */
table.table.table-responsive.table-hover a.text-muted{
  display: inline;
  text-decoration: none;
}

/* Postfach: style links like "Preisblatt" ONLY in the Vertrag column (3rd td) */
.inbox-table td:nth-child(3) a{
  color: var(--lt-color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* icon before the Vertrag link */
.inbox-table td:nth-child(3) a::before{
  content:"";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* ===== Meine Verträge: Preisblatt-style links, but NOT Vertragdetails ===== */
.contracts-table a:not(.text-muted){
  color: var(--lt-color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* icon for those links */
.contracts-table a:not(.text-muted)::before{
  content:"";
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* keep Vertragdetails untouched */
.contracts-table a.text-muted{
  display: inline;
  text-decoration: none;
}
.contracts-table a.text-muted::before{
  content: none;
}

/* Header "Test_firma" selectize: match nav items */
header .nav-right .selectize-control,
header .nav-right .selectize-input,
header .nav-right .selectize-input > *{
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.2;
  font-family: "OpenSansRegular", sans-serif;
}

/* dropdown options in header too */
header .nav-right .selectize-dropdown,
header .nav-right .selectize-dropdown .option{
  font-size: 1.125rem;
  font-weight: 400;
  font-family: "OpenSansRegular", sans-serif;
}
.card-header{
  font-family: "OpenSansBold", sans-serif;
  font-weight: 700;
  font-size: 2.3125rem;
  line-height: 3.375rem;
}

/* --- "Neuigkeiten" / MyData / Kontaktdaten label/value typography --- */

/* labels: look like p */
.card-body-with-hr .row.py-1 > span:first-child{
  font-family: "OpenSansRegular", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 2.25rem;
}

/* values (font-weight-bold): your bold spec */
.card-body-with-hr .row.py-1 .font-weight-bold{
  font-family: "OpenSansBold", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2.25rem;
}

/* "Sie haben ... Postfach" line: same as p */
.card-body-with-hr .row > .col{
  font-family: "OpenSansRegular", sans-serif;
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 2.25rem;
}

/* Postfach link in Neuigkeiten: like your main links */
.card-body-with-hr .row > .col a:not(.btn){
  color: var(--lt-color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}
/* Align the “footer” area (hr + buttons) between MyData and Kontaktdaten cards */
.card-body-with-hr.d-flex.flex-column > .row.flex-grow-0{
  margin-top: auto;
  min-height: 130px;          /* tweak until both match (e.g. 120–160px) */
}

/* keep buttons nicely spaced if they wrap */
.card-body-with-hr.d-flex.flex-column > .row.flex-grow-0 .btn{
  margin-right: 12px;
  margin-bottom: 12px;
}
/* Neuigkeiten: Postfach link gets the same "special link" icon */
.card-body-with-hr .row > .col a:not(.btn)::before{
  content:"";
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: -0.25em;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Make the whole section text look like p */
.content .card-body,
.content-frame .card-body{
  font-size: 1.25rem;
  line-height: 2.25rem;
  font-weight: 400;
  font-family: "OpenSansRegular", sans-serif;
}

/* Special-link icon + style for FAQ (and similar content links), excluding buttons */
.content .card-body a:not(.btn),
.content-frame .card-body a:not(.btn){
  color: var(--lt-color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

.content .card-body a:not(.btn)::before,
.content-frame .card-body a:not(.btn)::before{
  content:"";
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: -0.25em;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* Make primary + secondary buttons identical sizing */
.btn-primary,
.btn-secondary{
  font-family: "OpenSansBold", sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 2rem;

  padding: 0.75rem 1.25rem;
  min-height: 52px;          /* ensures same height even with different text */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* 1) Global “special link icon” should NOT apply to muted links (Vertragdetails uses .text-muted) */
.content .card-body a.text-muted::before,
.content-frame .card-body a.text-muted::before,
.card-body-with-hr a.text-muted::before{
  content: none;
}

/* also remove underline styling for muted links, if needed */
.content .card-body a.text-muted,
.content-frame .card-body a.text-muted,
.card-body-with-hr a.text-muted{
  text-decoration: none;
}

/* 2) But still apply icon to Upload-Bereich link explicitly */
.content a[href*="upload"]:not(.btn)::before{
  content:"";
  width: 24px;
  height: 24px;
  display: inline-block;
  margin-right: 10px;
  vertical-align: -0.25em;
  background: currentColor;

  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 19H5V5h7V3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7zM14 3v2h3.59L7.76 14.83l1.41 1.41L19 6.41V10h2V3h-7z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* Upload-Bereich: force same "special link" look (black + underline + icon + inline-flex) */
.content a[href*="upload"]:not(.btn),
.content-frame a[href*="upload"]:not(.btn){
  color: var(--lt-color-black);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;

  display: inline-flex;
  align-items: center;
  gap: 10px;
}
/* Inbox/Postfach table: DO NOT use "special link" styling in col 1 (icons) + col 2 (Betreff) */
.content .card-body .inbox-table td:nth-child(-n+2) a:not(.btn),
.content-frame .card-body .inbox-table td:nth-child(-n+2) a:not(.btn){
  color: var(--brand-blue);
  text-decoration: none;
  text-underline-offset: initial;
  text-decoration-thickness: initial;
  display: inline;
}

/* Kill the injected "special link" icon in these columns */
.content .card-body .inbox-table td:nth-child(-n+2) a:not(.btn)::before,
.content-frame .card-body .inbox-table td:nth-child(-n+2) a:not(.btn)::before{
  content: "" !important;
  display: none !important;
}

/* Keep hover behavior consistent with your base link styles */
.content .card-body .inbox-table td:nth-child(-n+2) a:not(.btn):hover,
.content-frame .card-body .inbox-table td:nth-child(-n+2) a:not(.btn):hover{
  color: var(--brand-blue-700);
  text-decoration: underline;
}
/* Header: make "Registrieren" look like "Anmelden" (same font/size/weight) */
header .btn-secondary,
header a.btn-secondary{
  font-family: "OpenSansBold", sans-serif;
  font-weight: 700;
  font-size: .875rem;
  line-height: 1.5rem;
}

/* Align the “footer” area (hr + buttons) between MyData and Kontaktdaten cards */
.card-body-with-hr.d-flex.flex-column > .row.flex-grow-0{
  margin-top: auto;        /* keep it pinned to the bottom */
  flex: 0 0 160px;         /* fixed height so the hr lines up in both cards */
}

/* make the hr spacing consistent inside that footer row */
.card-body-with-hr.d-flex.flex-column > .row.flex-grow-0 hr{
  margin: 0 0 1.5rem;      /* tweak if you want more/less gap */
}


/* MyData + Kontaktdaten: values should NOT be bold (override BS .font-weight-bold !important) */
.card-body-with-hr .row.py-1 .font-weight-bold{
  font-family: "OpenSansRegular", sans-serif;
  font-weight: 400 !important;
}