@charset "UTF-8";
/* mobile Ansicht */
@media screen and (max-width: 480px) {
.container2 { height:100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; align-items:flex-start; }
}
/* mobile Ansicht */



/* Standard */
@media screen {
body{ font-size: 1.2rem; color: #333; background-color:#F5F5F5; font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; margin: 0; padding: 0;}

/* min-height statt height, damit lange Inhalte nicht aus dem Grid brechen */
.container2 { min-height:100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 10% 80% 10%; grid-gap: 0; }

header.site-header { grid-row: 1 / 2; grid-column: 1 / 4; margin: 0; padding: 1rem 0; background: transparent; box-shadow: none; }

aside { grid-row:1 / 2; grid-column:1; text-align:left; padding:0 1em; }

/* HIER IST DIE MAGIE: Artikel geht von Spalte 1 bis 4 (volle Breite) und wird transparent */
article { background:transparent; grid-row:2 / 3; grid-column: 1 / 4; padding:0; border-radius:0; }

/* Footer ebenfalls auf volle Breite setzen */
footer { background:#2A2A2A; grid-row:3 / 4; grid-column: 1 / 4; text-align:center; padding:3em 0; border-radius:0; color:#fff; }

h1 {font-size: 170%; margin: 0 0 0.5em 0; }
h2 {font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0 0 0.5em 0; }
h3 {font-size: clamp(1.45rem, 2.6vw, 1.8rem); margin: 0 0 0.5em 0; }
h4 {font-size: clamp(1.40rem, 2.6vw, 1.75rem); margin: 0 0 0.5em 0; }
h5 {font-size: 125%; margin: 0 0 0.5em 0; }
h6 {font-size: 120%; margin: 0 0 0.5em 0; }
p { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0; }
p { -moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto; }
.gross1 { font-size: clamp(1.45rem, 2.6vw, 1.8rem); font-weight:400;  }
.fett { font-weight:700 !important;  }
.gross2 { font-size: clamp(1.35rem, 2.6vw, 1.6rem); font-weight:400; margin-bottom:0;  }
.mittel1 { font-size: clamp(1.2rem, 2.6vw, 1.5rem); font-weight:400;  }
.NavStriche { font-size: 150%;font-weight:700;  }

hr { border: 0.7rem solid grey;background-color: grey; border-radius: 0.3rem; margin: 2em 0 }
.hrduenn { border: 0.1rem solid grey; background-color: grey; border-radius: 0.1rem; margin: 2.5em 0 }
ul, ol, dl { font-size: 100%; line-height: 1.5; margin: 0 0 1.5em 0; padding: 0;   }
ul { list-style-type: disc; list-style-position:inside; }
ol { list-style-type: decimal; }
li { font-size: 100%; line-height: 1.5;  margin:0; padding:0;   }

a.nohover{background-color:transparent;text-decoration: none;color:#000;outline:0;}
.flexible{margin-bottom: 0em; max-width: 100%; height: auto; }

header .logo { display: block; }
.logo_head { background:url(/images/csvberlin.svg) left center no-repeat !important; }


/* ===============================
   Neuer Header & Navigation (Sticky & Schmal)
   =============================== */
.site-header {
  background-color: rgba(245, 245, 245, 0.85); /* Leicht transparentes Grau/Weiß */
  backdrop-filter: blur(10px); /* Erzeugt den modernen Milchglas-Effekt beim Scrollen */
  -webkit-backdrop-filter: blur(10px); /* Für Safari-Unterstützung */
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 1000;
  padding: 0.2rem; /* Von 0.5rem auf 0.2rem reduziert -> schmaler */
  box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.logo_head {
  width: 200px; /* Etwas kompakter, damit der Header nicht so hoch wird */
  height: 48px; /* Vorher 60px */
  background-size: contain !important;
}

/* --- Hauptnavigation (Desktop) --- */
.main-nav {
  display: flex;
}

.nav-list {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 1.5rem;
}

.nav-item > a {
  text-decoration: none;
  color: #333;
  font-weight: 600;
  padding: 0.5rem 0;
  display: block;
  transition: color 0.2s;
}

.nav-item > a:hover {
  color: #FF530E; /* Euer Orange */
}

/* Dropdown Logik */
.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  min-width: 220px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  list-style: none;
  padding: 0.5rem 0;
  margin: 0;
  border-radius: 4px;
}

.dropdown:hover .dropdown-menu {
  display: block; /* Zeigt das Menü beim Hover an */
}

.dropdown-menu li a {
  display: block;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: #444;
  font-size: 0.95rem;
}

.dropdown-menu li a:hover {
  background: #f8f9fa;
  color: #FF530E;
}

/* --- Rechte Seite (Neuer Kontakt-Button) --- */
.header-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.header-btn-kontakt {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background-color: #0382c2; /* Euer CSV Orange */
  color: #ffffff !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 0.6rem 1.2rem;
  border-radius: 50px; /* Macht den Button schön rund (Pillenform) */
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(255, 83, 14, 0.2);
}

.header-btn-kontakt:hover {
  background-color: #d14008;
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(255, 83, 14, 0.3);
}

.burger-toggle {
  display: none;
  background: none;
  border: none;
  font-size: 2rem;
  color: #FF530E;
  cursor: pointer;
  padding: 0;
}




.orange { background:#FF530E; }
.menu { line-height:1.4em; }
label{display:inline-block;width:10em;padding-right:1em;}
legend{background:#fff;padding:.6em;border:1px solid lightgray;box-shadow:inset 2px 2px 3px rgba(0,0,0,0.1);border-radius:3px;font-weight:700}
input,select,textarea{border:1px solid lightgray;box-shadow:inset 1px 1px 3px rgba(0,0,0,0.1);border-radius:5px}
input:hover,select:hover,textarea:hover{background:#ffc;border:1px solid #555;box-shadow:0 0 10px rgba(0,0,0,0.2)}
input:focus,select:focus,textarea:focus{border:1px solid lightgray;box-shadow:0 0 10px rgba(32,204,255,0.7);outline:none}
input[type="submit"],input[type="reset"]{width:10em;margin:.8em 0 .4em;padding:.6em;background:#fafafa;border:1px solid #aaa;border-radius:20px;background:linear-gradient(to top,#fafafa 10%,#ccc 100%);box-shadow:0 0 5px rgba(255,255,255,0.8);text-shadow:1px 1px 1px rgba(255,255,255,0.8)}
input[type="submit"]{margin-right:.2em;font-weight:700}
input[type="submit"]:hover,input[type="submit"]:focus{border-color:#3a3;color:#3a3}
input[type="reset"]:hover,input[type="reset"]:focus{border-color:#f55;color:#f55}
input[type="submit"]:active,input[type="reset"]:active{background-image:linear-gradient(to bottom,#fafafa 10%,#ccc 100%)}

input.kill  { border: #BF0000 2px solid !important; }
input.kill:hover,input.kill:focus{border-color:#f55 !important;color:#f55 !important}
input.kill:active{background-image:linear-gradient(to bottom,#fafafa 10%,#ccc 100%) !important;}

input {margin-bottom:1em; }
input[type="text"] {width:15em;line-height:2em; margin: 0 2em 0 0; padding-left:.7em}
input[type="number"] {width:15em;line-height:2em; margin: 0 2em 0 0; padding-left:.7em}
input[type="date"] {width:15em;line-height:2em; margin: 0 2em 0 0; padding-left:.7em}
input[type="tel"] {line-height:1.5em;}
input[type="checkbox"],input[type="radio"]{width:1.4em;height:1.4em;margin-right:.7em;}
input:valid { border: green 2px solid; }
input:invalid  { border: #BF0000 2px solid; }
select:valid { border: green 2px solid; }
select:invalid  { border: #BF0000 2px solid; }
textarea:valid { border: green 2px solid; }
textarea:invalid  { border: #BF0000 2px solid; }

.suche { margin: 0 0 1em 0; }
.suche select {width:15em;height:2.2em;}

.gateway input#mobilnummer {width:20em;line-height:2em;}
.gateway input#mobilnummer2 {width:10em;line-height:2em;}
.gateway input#kundennummer {width:10em;line-height:2em;}
.gateway input#anrede {width:17em;line-height:2em;}
.gateway input#nachricht {width:35em;line-height:2em;}
.gateway textarea#text {width:35em; max-width:35em; line-height:1.5em;}

.box{border-radius:.3em;border-width:1px;border-style:solid;border-color:#888;border-color:rgba(0,0,0,0.3);box-shadow:inset 1px 1px 3px rgba(0,0,0,0.2);color:#444;color:rgba(0,0,0,0.8);padding:1em;margin:0 0 1em}
.box > :last-child{margin-bottom:0}
.boxueberschrift { border-radius:.3em; padding:0.2rem 0.5rem; display:inline-block;  }


.box1{ border-radius:.7rem; padding:1rem; margin: 0 0 1rem 0; }
.box1 > :last-child{ margin-bottom:0; }
.box1:hover{ background:Gold; color: #000; }


/* Farben */
.success{background:#067D0A;color:#FFF}
.info{background:NavajoWhite;color:black}
.warning{background:#FCD516}
.error{background:#c88}

.gruen{ background:LimeGreen;  }
.grau{ background:Silver;  }
.rot{ background:FireBrick;  }

.schriftweiss{color:White;}
/* Farben */



.scrollicon{text-align:center;text-decoration:none;cursor:pointer;width:50px;height:50px;border-radius:50%;background:#ccc;opacity:.7;position:fixed;bottom:180px;right:17px;display:none;border:1px solid #FFF;z-index:9999}
.scrollicon div{font-weight:700;font-size:28px;color:#000;padding-top:12px}

.keinabsatz { margin-bottom:0; }

.margintop1em { margin-top:1em; }
.margintop15em { margin-top:1.5em; }
.margintop2em { margin-top:2em; }
.margintop3em { margin-top:3em; }
.margintop4em { margin-top:4em; }
.marginbott1em { margin-bottom:1em; }
.marginbott15em { margin-bottom:1.5em; }
.marginbott2em { margin-bottom:2em; }
.marginbott3em { margin-bottom:3em; }
.marginbott4em { margin-bottom:4em; }

.margin1rem{ margin:1rem;  }
.marginTop1rem{ margin-top:1rem;  }
.marginBottom1rem{ margin-bottom:1rem;  }
.marginLeft1rem{ margin-left:1rem;  }
.marginRight1rem{ margin-right:1rem;  }



.textgross{ font-size:2rem;font-weight:700; }
.textklein{ font-size:.7rem; }
.textrechts{ text-align: right; }

.preis{ font-size:3.5rem; color:#FF530E; font-weight:500; }

a.nohover  { background-color: transparent; text-decoration: none; color: #000; outline: 0; }

.servicepreislisteoben {font-weight:700;background:#ececec;margin-bottom: .5em; padding:.7em .1em .7em .1em;}
.servicepreisliste {border-bottom:solid 2px #ececec;margin-bottom: .5em; padding-bottom:.2em;}
.servicepreisliste2 {border-bottom:solid 5px #ececec;margin-bottom:2em; padding-bottom:2em;}
.servicepreislast {margin-bottom: 1em; padding-bottom:.2em;}
.servicepla{float:left;overflow:hidden;position:relative;width:17em;font-weight:bold;margin-right:1em;}
.servicepla > *:last-child { margin-bottom: 0; }
.serviceplb{float:left;overflow:hidden;position:relative;width:30em;}
.serviceplb > *:last-child { margin-bottom: 0; }
.serviceplc{float:left;overflow:hidden;position:relative;width:5em;text-align:right;}
.serviceplc > *:last-child { margin-bottom: 0; }
.servicepl1{float:left;overflow:hidden;position:relative;width:25em;margin-right:1em;}
.servicepl1 > *:last-child { margin-bottom: 0; }
.servicepl2{float:right;overflow:hidden;position:relative;width:5em;text-align:right;}
.servicepl2 > *:last-child { margin-bottom: 0; }
.servicepl3{float:right;overflow:hidden;position:relative;width:5em;}
.servicepl3 > *:last-child { margin-bottom: 0; }
.servicepl4{float:right;overflow:hidden;position:relative;width:5em;}
.servicepl4 > *:last-child { margin-bottom: 0; }
.servicepfeile{list-style-type: '➧ '; padding:0; }
.servicepfeile li{line-height:1.8}
.ulnichteingerueckt{margin:0; padding:0; }
.ulnichteingerueckt li{line-height:1.8}
.grossuberschrift{font-size:130%;margin-bottom:1em;}
.ym-clearfix:before{content: ""; display: table;}
.ym-clearfix:after{clear:both; content: "."; display: block; font-size: 0; height: 0; visibility: hidden;  }

.floatrightresp{float:right;padding:0em 0 1.5em 0;}
.floatrightresp img { padding: 0 0 0 2em; }
.floatrighttop{float:right; margin:1em 0 0 2em;  }
.floatrighttop img {width:27px;height:27px;margin-top:.3em;}
.floatrighttop span {font-size: 135%; color:#FF530E;  }
.floatright2{float:none;overflow:hidden;position:relative;padding:0 0 .5em 0;}
.floatleft2{float:none;overflow:hidden;position:relative;padding:0 0 .5em 0;}

.flex-container {padding: 0; list-style: none; line-height: 1.2em; display: flex;-webkit-flex-flow: row wrap; justify-content: flex-start; flex-wrap: wrap; }
.flex-item { flex: 1 1 50%; }
.flex-item2 { flex: 1 1 50%; }
.flex-item3 { width: auto;  }

.flex-containerB { display: flex; flex-direction: row; padding:0; margin: 0 0 1em 0; list-style: none; line-height: 1em;   }
.flex-itemB { flex: 0 1 auto; margin: 1em 2em 1em 0; padding:0;  }
.flex-itemB:last-child { margin-right: 0 !important;  }
.flex-itemB2 { flex: 0 1 auto; margin: 1em 2em 1em 0; padding:0; }
.flex-item-1 { order: 2; background:white;  }
.flex-item-2 { order: 1;  }

.flex-justifycontent-flex-start { justify-content: flex-start !important;  }
.flex-justifycontent-center { justify-content: center !important;  }
.flex-justifycontent-space-between { justify-content: space-between !important;  }

.flex-align-items-center { align-items: center; }
.flex-align-items-strech { align-items: strech; }

.flex-wrap-nowrap { flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; }



.starthead { position: absolute; margin: 1.5rem 0 0 1.5rem; color:#FF520D; font-size: clamp(1.5rem, 2.6vw, 5rem); text-shadow: 0.1rem 0.1rem 0.3rem black; }
.startbildbox { max-height:35rem; background: white; overflow:hidden;  }
.startbild { width:100%; margin: .6rem 0 1.5rem 0;  }
.itsicherheitkreis { float:right;overflow:hidden; width:300px; max-width:50%; height:auto;    }

/* alles nebeneinander und auf gleicher H�he  */
.flex-containerC {padding:0; margin:0; list-style: none; display: flex;-webkit-flex-flow: row nowrap; justify-content: flex-start; align-items:center;  }
.flex-itemC { margin: 0 0 0 1rem; padding:0em;  }

.flex-containerBottom {padding:0; margin: 0 0 0em 0; list-style: none; line-height: 1em; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex;-webkit-flex-flow: row wrap; justify-content: flex-start; flex-wrap: wrap; align-items:stretch;  }
.flex-itemBottom { flex: 1 1; margin: 1em 2em 1em 0; padding:0;  }
.flex-itemBottom p { padding:0; margin: 0; }

/* flex-boxen */
.flex-auto { display: flex; justify-content: space-between; align-items: center; }
.flex-auto-item { flex: 0 1 auto; }

.flex50 { display: flex; justify-content: space-between; align-items: center; }
.flex50-item { flex: 0 1 auto; }

.flex-order1 { order: 1; }
.flex-order2 { order: 2; }
.flex-order3 { order: 3; }
.flex-order4 { order: 4; }


.flex-container { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;   }
.flex-container-res-column { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;   }
.flex-container-720-column { display: flex; flex-direction: row; padding:0; margin: 0; list-style: none; line-height: 1em;   }
.flex-container-column { display: flex; flex-direction: column; padding:0; margin: 0; list-style: none; line-height: 1em;  }
.flex-container-column-start { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-start;  }
.flex-container-column-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end; align-content: flex-end; text-align: right;  }
.flex-container-column-res-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-column-720-end { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-cartsumme { display: flex; flex-direction: column; padding:0; margin: 0; justify-content: flex-end;  }
.flex-container-formular { display: flex; flex-direction: column;   }
.flex-container-zb { display: flex; flex-direction: column; gap: 1rem 0rem; justify-content: space-around;  }

.flex-item { flex: 0 1 auto; margin: 0; padding:0;  }
.flex-item:last-child { margin-right: 0 !important;  }
.flex-item2 { flex-grow: 1; flex-shrink: 1; margin: 0; padding:0;  }
.flex-item2:last-child { margin-right: 0 !important;  }
.flex-item-20-ngrow { flex-basis: 20%; flex-grow: 0; flex-shrink: 1;  }
.flex-item-25-ngrow { flex-basis: 25%; flex-grow: 0; flex-shrink: 1;  }
.flex-item-30-ngrow { flex-basis: 30%; flex-grow: 0; flex-shrink: 1; }
.flex-item-40-ngrow { flex-basis: 40%; flex-grow: 0; flex-shrink: 1; }
.flex-item-50-ngrow { flex-basis: 50%; flex-grow: 0; flex-shrink: 1; }

.flex-item-10 { flex-basis: 10%; flex-grow: 1; flex-shrink: 1; }
.flex-item-15 { flex-basis: 15%; flex-grow: 1; flex-shrink: 1; }
.flex-item-20 { flex-basis: 20%; flex-grow: 1; flex-shrink: 1; }
.flex-item-25 { flex-basis: 25%; flex-grow: 1; flex-shrink: 1; }
.flex-item-30 { flex-basis: 32%; min-width:10rem; flex-grow: 1; flex-shrink: 1; }
.flex-item-30:first-child { flex-basis: 32%; min-width:10rem; flex-grow: 0;  }
.flex-item-30:last-child { flex-basis: 32%; min-width:10rem; flex-grow: 0;  }
.flex-item-35 { flex-basis: 35%; flex-grow: 1; flex-shrink: 1; }
.flex-item-40 { flex-basis: 40%; flex-grow: 1; flex-shrink: 1;}
.flex-item-40:last-child { margin-right: 0 !important;  }
.flex-item-45 { flex-basis: 45%; flex-grow: 1; flex-shrink: 1; }
.flex-item-45:last-child { margin-right: 0 !important;  }
.flex-item-50 { flex-basis: 50%; flex-grow: 1; flex-shrink: 1; }
.flex-item-50:last-child { margin-right: 0 !important;  }
.flex-item-60 { flex-basis: 60%; flex-grow: 1; flex-shrink: 1; }
.flex-item-60:last-child { margin-right: 0 !important;  }
.flex-item-70 { flex-basis: 70%; flex-grow: 1; flex-shrink: 1; }
.flex-item-70:last-child { margin-right: 0 !important;  }
.flex-item-80 { flex-basis: 70%; flex-grow: 1; flex-shrink: 1; }
.flex-item-80:last-child { margin-right: 0 !important;  }
.break { height: 0; width: 100%; }

.flex-justifycontent-flex-start { justify-content: flex-start !important;  }
.flex-justifycontent-flex-end { justify-content: flex-end !important;  }
.flex-justifycontent-center {  justify-content: center !important; }
.flex-justifycontent-space-between { justify-content: space-between !important;  }
.flex-justifycontent-space-around { justify-content: space-around !important;  }
.flex-justifycontent-space-evenly { justify-content: space-evenly !important; }
.flex-justifycontent-artsearch { justify-content: flex-start !important; }

.flex-shrink0 { flex-shrink:0; }  /* Items dürfen nicht kleiner werden als festgelegt */
.flex-shrink1 { flex-shrink:1; }  /* Items dürfen kleiner werden als festgelegt */
.flex-shrink2 { flex-shrink:2; }
.flex-shrink3 { flex-shrink:3; }

.flex-grow0 { flex-grow:0; }   /* Items dürfen nicht größer werden als festgelegt */
.flex-grow1 { flex-grow:1; }    /* Items dürfen größer werden als festgelegt */
.flex-grow2 { flex-grow:2; }    /* Items dürfen größer werden als festgelegt */

.flex-align-content-flex-start { align-content: flex-start; }
.flex-align-content-flex-end { align-content: flex-end; }
.flex-align-content-center { align-content: flex-center; }
.flex-align-content-space-between { align-content: space-between !important; }
.flex-align-content-space-around { align-content: space-around; }
.flex-align-content-space-evenly { align-content: space-evenly; }
.flex-align-content-stretch { align-content: stretch; }
.flex-align-content-start { align-content: start; }
.flex-align-content-end { align-content: end; }
.flex-align-content-baseline { align-content: baseline; }
.flex-align-content-first-baseline { align-content: first baseline; }
.flex-align-content-last-baseline { align-content: last baseline; }


.flex-align-items-center { align-items: center; }
.flex-align-items-strech { align-items: strech; }
.flex-align-items-space-between { align-items: space-between; }
.flex-align-items-flex-start  { align-items: flex-start; }
.flex-align-items-flex-end { align-items: flex-end; }
.flex-align-items-baseline { align-items: baseline; }

.flex-wrap-nowrap { flex-wrap: nowrap; }
.flex-wrap-wrap { flex-wrap: wrap; }

.flex-gap02 { gap: .2rem .2rem;  }
.flex-gap03 { gap: .3rem .3rem;  }
.flex-gap05 { gap: .5rem .5rem;  }
.flex-gap07 { gap: .7rem .7rem;  }
.flex-gap1 { gap: 1rem 1rem;  }
.flex-gap15 { gap: 1.5rem 1.5rem;  }
.flex-gap2 { gap: 2rem 2rem;  }


.flex-item-align-self-auto  { align-self: auto; }
.flex-item-align-self-flex-start  { align-self: flex-start; }
.flex-item-align-self-flex-end  { align-self: flex-end; }
.flex-item-align-self-center { align-self: center; }
.flex-item-align-self-baseline { align-self: baseline; }
.flex-item-align-self-stretch { align-self: stretch; }

/* flex-boxen */



/* Layouts */
.displaynone { display:none; visibility:hidden; }
.rechts { text-align: right; }
.center { text-align: center; }
.links { text-align: links; }
/* Layouts */


/* Linitenhöhe */
.lineheight1p5rem { line-height:1.5rem; }
.lineheight2rem { line-height:2rem; }
.lineheight25rem { line-height:2.5rem; }
.lineheight3rem { line-height:3rem; }
/* Linitenhöhe */



/* rest Schrift */
.fett700 { font-weight: 700; }
.fett600 { font-weight: 600; }
.fett500 { font-weight: 500; }
.fett400 { font-weight: 400; }


.wordwrap-breakword { word-wrap: break-word; }
.wordwrap-breakall { word-break: break-all; }
/* rest Schrift */


/* Breiten */
.width99 { width:99%; }
.width50 { width:50%; }
.width45 { width:45%; }
.width40 { width:40%; }
.width30 { width:30%; }
.width20 { width:20%; }


.widthres50 { width:50%; }
.widthres45 { width:45%; }
.widthres40 { width:40%; }
.widthres33 { width:33%; }
.widthres25 { width:25%; }


.width10rem { width:10rem; }
.width12rem { width:12rem; }
.width15rem { width:15rem; }
.width18rem { width:18rem; }
.width20rem { width:20rem; }
.width25rem { width:25rem; }
.width30rem { width:30rem; }

.widthmax10rem { max-width:10rem; }
.widthmax12rem { max-width:12rem; }
.widthmax15rem { max-width:15rem; }
.widthmax18rem { max-width:18rem; }
.widthmax20rem { max-width:20rem; }
.widthmax25rem { max-width:25rem; }
.widthmax30rem { max-width:30rem; }


.widthcalc50-res { max-width: calc(100vw - 50%); }
.widthcalc60-res { max-width: calc(100vw - 60%); }
.widthcalc70-res { max-width: calc(100vw - 70%); }

.widthmin10rem { min-width:10rem; }
.widthmin11rem { min-width:11rem; }
.widthmin12rem { min-width:12rem; }
.widthmin15rem { min-width:15rem; }
.widthmin18rem { min-width:18rem; }
.widthmin20rem { min-width:20rem; }
.widthmin25rem { min-width:25rem; }
.widthmin30rem { min-width:30rem; }

/* Breiten */


/* Höhe */
.height100p { height:100%; }
.height1p5rem { height:1.5rem; }
.height2rem { height:2rem; }
.height3rem { height:3rem; }
.height10rem { height:10rem; }
.height11rem { height:11rem; }
.height12rem { height:12rem; }
.height13rem { height:13rem; }
.height15rem { height:15rem; }
.height16rem { height:16rem; }
.height17rem { height:17rem; }
.height18rem { height:18rem; }
.height20rem { height:20rem; }
.height23rem { height:23rem; }
.height30rem { height:30rem; }
.height35rem { height:35rem; }
/* Höhe */


/* runde Ecken */
.rundeecke0p3 { border-radius:.3rem; }
.rundeecke0p4 { border-radius:.4rem; }
.rundeecke0p5 { border-radius:.5rem; }
.rundeecke0p7 { border-radius:.7rem; }
.rundeecke0p8 { border-radius:.8rem; }
.rundeecke10 { border-radius: 1rem; }
/* runde Ecken */



/* Außenabstände MARGINS */
.keinabsatz { margin-bottom:0; }

.margintop03em { margin-top:0.3em; }
.margintop05em { margin-top:0.5em; }
.margintop1em { margin-top:1em; }
.margintop15em { margin-top:1.5em; }
.margintop2em { margin-top:2em; }
.margintop3em { margin-top:3em; }
.margintop4em { margin-top:4em; }

.marginbott03em { margin-bottom:0.3em; }
.marginbott05em { margin-bottom:0.5em; }
.marginbott07em { margin-bottom:0.7em; }
.marginbott08em { margin-bottom:0.8em; }
.marginbott1em { margin-bottom:1em; }
.marginbott15em { margin-bottom:1.5em; }
.marginbott2em { margin-bottom:2em; }
.marginbott3em { margin-bottom:3em; }
.marginbott4em { margin-bottom:4em; }

.marginleft1em { margin-left:1em; }
.marginleft15em { margin-left:1.5em; }
.marginleft2em { margin-left:2em; }
.marginleft3em { margin-left:3em; }
.marginleft4em { margin-left:4em; }

.marginright05em { margin-right:.5em; }
.marginright1em { margin-right:1em; }
.marginright15em { margin-right:1.5em; }
.marginright2em { margin-right:2em; }
.marginright3em { margin-right:3em; }
.marginright4em { margin-right:4em; }


.margin1rem{ margin:1rem;  }
.marginTop1rem{ margin-top:1rem;  }
.marginBottom1rem{ margin-bottom:1rem;  }
.marginLeft1rem{ margin-left:1rem;  }
.marginRight1rem{ margin-right:1rem;  }

/* Außenabstände MARGINS */





/* Innenabstände PADDING */
.padding02rem{ padding:0.2rem;  }
.padding04rem{ padding:0.4rem;  }
.padding05rem{ padding:0.5rem;  }
.padding07rem{ padding:0.7rem;  }
.padding08rem{ padding:0.8rem;  }
.padding09rem{ padding:0.9rem;  }
.padding1rem{ padding:1rem;  }
.padding13rem{ padding:1.3rem;  }
/* Innenabstände PADDING */



.grauebox{background:#ccc; height:100%;  border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px; }
.grauebox .gross1{ padding: 1em 1em 0em 1em; }
.grauebox .innertext{ padding: 0em 1em 1em 1em; }
.graueboxunten{background:#8F0003;padding:.7em;text-align:right;color:#FFF;bottom:0;  border-radius:0 0 6px 6px;-moz-border-radius:0 0 6px 6px;-webkit-border-radius:0 0 6px 6px;}
.graueboxunten a {color:#FFF;background:transparent;text-decoration:none;}
.graueboxunten a:hover {color:#FFF;background:transparent;text-decoration:none;}





.prxis thead {background-color: #bcd0c7;font-weight:700;}
.prxis thead td:nth-of-type(1){padding-bottom:.5em;text-align:left}
.prxis thead td:nth-of-type(2){padding-bottom:.5em;text-align:right}
.prxis tbody td:nth-of-type(1){padding-bottom:.3em;text-align:left;width:75%;}
.prxis tbody td:nth-of-type(2){padding-bottom:.3em;text-align:right;width:25%;}
.prxis tbody:nth-child(odd) {background-color:#DEDEDE; }

.table-csvberlin {
    --bs-table-bg:#FE6930;
    --bs-table-striped-bg:#c7dbd2;
    --bs-table-striped-color:#000;
    --bs-table-active-bg:#bcd0c7;
    --bs-table-active-color:#000;
    --bs-table-hover-bg:#c1d6cc;
    --bs-table-hover-color:#000;
    color:#000;
    border-color:#bcd0c7;
}

.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0;overflow: hidden; margin: 0 0 1em 0; max-width: 1000px; width: 100%; }
video { max-width: 100%; height: auto; }
.responsive-video {
  width: 100%;
  height: auto;
  max-width: 800px; /* Optional: Verhindert, dass das Video auf großen Monitoren zu groß wird */
  display: block;   /* Verhindert kleine unerwünschte Abstände unter dem Video */
}




/* ===============================
   Landingpage-Struktur
   =============================== */
.content-block, .content-card, .grid-columns-3, .grid-columns-2 {
  box-sizing: border-box;
}

/* Der Container für durchgehende farbige Bänder */
.section-fullwidth {
  width: 100%; /* Hack entfernt, da das Article nun 100% ist */
  padding: 5rem 0;
  margin-bottom: 0;
}

/* Begrenzt den Text wieder auf die Mitte */
.container-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Sektions-Hintergründe */
.bg-white {
  background-color: #ffffff;
}

.bg-soft-gray {
  background: linear-gradient(135deg, #f6f8f9 0%, #e5ebee 100%);
}

.bg-soft-blue {
  /* Ein dezenter blauer Verlauf, ähnlich dem Vorbild */
  background: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
}


/* ===============================
   Karten-Icons
   =============================== */
.card-icon {
  width: 50px;
  height: 50px;
  background-color: #fff0ea; /* Sehr zartes Orange als Hintergrund-Box */
  color: #FF530E; /* Euer CSV-Orange für das Icon */
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.card-icon svg {
  width: 26px;
  height: 26px;
  fill: currentColor; /* Übernimmt das Orange von oben */
}


/* ===============================
   Typografie
   =============================== */
.block-title {
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 700;
  margin-bottom: 1.2rem;
  line-height: 1.2;
}

.block-subtitle {
  font-size: 1.2rem;
  color: #555;
  margin-bottom: 3rem;
  line-height: 1.6;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

/* ===============================
   Karten
   =============================== */
.grid-columns-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2.5rem; /* Mehr Platz zwischen den Karten */
}

.grid-columns-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 3rem;
  align-items: center;
}

.content-card {
  background: #ffffff;
  padding: 2.5rem 2rem;
  border-radius: 16px; /* Deutlich runder */
  border: none; /* Harte Rahmen entfernt */
  box-shadow: 0 12px 35px rgba(0,0,0,0.08); /* Großer, sehr weicher Schatten */
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform 0.3s ease;
}

.content-card:hover {
  transform: translateY(-5px); /* Karte hebt sich beim Drüberfahren leicht an */
}

.content-card h3 {
  font-size: 1.3rem;
  margin-top: 0;
  margin-bottom: 1rem;
  color: #111;
}

/* ===============================
   Buttons
   =============================== */
.btn-primary {
  display: inline-block;
  background-color: #0382c2;
  color: #fff !important;
  padding: 1rem 2rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 4px 15px rgba(3, 130, 194, 0.3); /* Schatten in passendem Blau */
}

.btn-primary:hover {
  background-color: #02699c; /* Etwas dunkler beim Hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(3, 130, 194, 0.4);
}








}
/* Standard */






@media screen and (max-width: 480px) {

.grauebox{margin-bottom:2em}
.flex-itemB { margin:1em 0;  }
.flex-itemB2 { flex: 1 1 100%; margin:0; }
.flex-containerBottom { display: flex; flex: 100%; display: block; justify-content: center; }
.flex-itemBottom { margin: 1em 0 0 0 !important; padding: 0 0 1em 0;   }
.flex-itemBottom:not(:last-child) { border-bottom:solid 1px grey;  }
.flex-item2 { flex-grow: 0; flex-shrink: 1; }

header .logo { padding:0 0 0 0; margin: .3em 0 0 0; width:90%;float:left;overflow:hidden;position:relative; }

.floatrightresp img { padding: 0; }
.navmenu {font-size:30px !important;  }
.flexible{width:100%;height:auto}

.boxueberschrift { display:block ;  }

.flex-container-column { justify-content: center !important; align-items: center;  }
.flex-container-column-res-end { justify-content: center !important; align-items: center !important;  }
.flex-container-res-column { flex-direction: column; justify-content: center !important; align-items: center; }
.flex-container-cartsumme { flex-direction: row; align-items: center; }

.widthcalc50-res { max-width: 99%; }
.widthcalc60-res { max-width: 99%; }
.widthcalc70-res { max-width: 99%; }
}



@media screen and (max-width: 720px) {
.flex-container-warenkorb { flex-direction: column; justify-content: center !important; align-items: center; }
.flex-container-720-column { flex-direction: column; justify-content: center !important; align-items: center; }
.flex-container-column-720-end { justify-content: center !important; align-items: center !important;  }
.flex-justifycontent-artsearch { justify-content: center !important; }
}





@media screen and (max-width: 1024px) {
.container2 { min-height:100vh; display: grid; grid-template-rows: auto 1fr auto; grid-template-columns: 100%; grid-gap: 0; }
header.site-header { grid-row: 1; grid-column: 1; padding: 0; }
aside { grid-row: 3; grid-column: 1; text-align:center; padding:1em; display: none; /* Sidebar auf Mobile oft unnötig, wenn leer */ }
article { background: transparent; grid-row: 2; grid-column: 1; padding: 0; margin: 0; } /* Korrektur: Volle Breite auch auf Tablet/Mobile */
footer { background:#2A2A2A; grid-row:4; grid-column:1; text-align:center; padding: 3em 1em; }

.logo_head { background:url(/images/csvberlin_quadrat.svg) left center no-repeat !important; background-size: contain !important; width: 60px; height: 60px; }

.starthead { position: static; margin: 0 0 0 0; z-index:99; color:black; text-shadow: none; }

/* Mobile Menu Anpassungen (die vorher gefehlt haben) */
.hide-mobile { display: none !important; }
.burger-toggle { display: block; }
.main-nav { display: none; position: absolute; top: 100%; left: 0; width: 100%; background: #ffffff; box-shadow: 0 4px 10px rgba(0,0,0,0.1); padding: 1rem 0; z-index: 1001; }
.main-nav.nav-active { display: block; }
.nav-list { flex-direction: column; gap: 0; }
.nav-item { border-bottom: 1px solid #eee; }
.nav-item > a { padding: 1rem 1.5rem; }
.dropdown-menu { position: static; box-shadow: none; background: #f9f9f9; padding: 0; display: block; }
.dropdown-menu li a { padding: 0.8rem 1.5rem 0.8rem 2.5rem; }
}
/* ENDE danach ist nichts mehr */