@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff2') format('woff2'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-regular.woff') format('woff'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-regular.ttf') format('truetype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-regular.eot') format('embedded-opentype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-regular.svg') format('svg#PTSans');
}

@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700.woff2') format('woff2'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700.woff') format('woff'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700.ttf') format('truetype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700.eot') format('embedded-opentype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700.svg') format('svg#PTSans');
}

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700italic.woff2') format('woff2'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700italic.woff') format('woff'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700italic.ttf') format('truetype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700italic.eot') format('embedded-opentype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-700italic.svg') format('svg#PTSans');
}

@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-italic.woff2') format('woff2'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-italic.woff') format('woff'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-italic.ttf') format('truetype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-italic.eot') format('embedded-opentype'),
       url('../fonts/pt-sans-v17-latin-ext_latin_cyrillic-ext_cyrillic-italic.svg') format('svg#PTSans');
}

* {box-sizing:border-box;}

body {padding:0;
    margin:0;
    font-family: 'PT Sans', sans-serif;
    padding:80px 50px 50px;
    background:#efefef
}

header {background:rgb(15, 28, 69);
  position:fixed;
  z-index:100;
  top:0;
  left:0;
  width:100%;
    display:flex;
    justify-content: space-between;
    align-items:center;
    padding:10px 50px;}

header img {height:60px;
width:auto;
display:block;}

main {padding:40px;
  background:#fff;
  border-radius:5px;
  margin:50px 0 25px;}

h1 {font-weight:400;
  color:rgb(15, 28, 69);
  font-size:30px;
    margin:0;}

h2 {font-weight:400;
  color:rgb(15, 28, 69);
    font-size:22px;
    margin:0;}

#navsearch {display:flex;
    justify-content: space-between;
    gap:30px;
    align-items:center;}

#search {display:flex;
    position: relative;
    width:450px;
    gap:10px;
    align-items:center;}

#search input {padding:10px 10px 10px 50px;
    border:1px solid #ccc;
    border-radius:5px;
    width:100%;}

#search button {position:absolute;
  top:10px;
  background:none;
  border:none;
  left:10px;}

.btn {padding:10px 20px;
    min-width:max-content;
    cursor: pointer;
    border:none;
    display:flex;
    gap:7px;
    align-items: center;
    border-radius:5px;}

.btn-primary {color:#fff;
    background:rgb(15, 28, 69);}

.btn-secondary {background:#fff;
    color:rgb(15, 28, 69);}

.btn-danger {color:#fff;
    background:#dc3545;}

.btn-success {color:#fff;
    background:#009D86;}

#tree-container {margin-top:20px;}

.level-1 {margin-left:30px;}
.level-2 {margin-left:60px;}
.level-3 {margin-left:90px;}
.level-4 {margin-left:120px;}
.level-5 {margin-left:150px;}
.level-6 {margin-left:180px;}
.level-7 {margin-left:210px;}
.level-8 {margin-left:240px}
.level-9 {margin-left:270px;}
.level-10 {margin-left:300px;}
.level-11 {margin-left:330px;}
.level-12{margin-left:360px;}
.level-13 {margin-left:390px;}
.level-14 {margin-left:420px;}
.level-15 {margin-left:450px;}

.node {
  display: none;
  padding: 20px 20px 20px 50px;
  background: #f4f4f4;
  border-radius: 5px;
  margin-top:35px;
  position: relative;
  cursor: pointer;
}

.node::before {
  content: "▶";
  position: absolute;
  left: 20px;
  transition: transform 0.2s ease;
}

.node::after {
  content: attr(data-header);
  display:block;
  position: absolute;
  top:-20px;
  left: 0;
  font-size:12px;
}


.node.open::before {
  content: "▼";
}

/* Kein Pfeil bei Blättern */
.node.leaf::before {
  content: "";
}

.level-0 {
  display: block;
  cursor: pointer;
}

.node.match {
  background-color: rgb(15, 28, 69);
  color:#fff;
}


#emailSetting {display:flex;
  gap:40px;}

label {font-size:12px;
  margin-bottom:5px;
display:block;}

select, input, textarea {padding:20px;
    border:1px solid #ccc;
    border-radius:5px;
    width:100%;
}

input[type="checkbox"] {
  width:unset;
}

textarea {min-height:150px;
  margin-bottom:20px;}

#emailSetting > div {width:100%;
  max-width:650px;}

#flexform {display:flex;
  flex-direction: column;
  gap:30px;}

#flexform section {
  border-bottom: 1px solid rgba(0,0,0,0.05);
  padding-bottom:30px;
}

.leaf {padding:20px!important;}

.leaf > div {
    display: flex !important;
    justify-content: space-between;
    width:100%;
  }

  .node.leaf.selected {
  background-color: #f0f7fb; 
}

/* Stil für das Popup */
.popup-message {
    display: none;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    background-color: #4CAF50; /* Grün für Erfolg */
    color: white;
    padding: 15px;
    border-radius: 5px;
    z-index: 1000;
    font-size: 16px;
    text-align: center;
}

/* Stil für eine Fehlermeldung */
.popup-error {
    background-color: #f44336; /* Rot für Fehler */
}

.headerflex {display:flex;
  justify-content: space-between;
  margin-bottom:20px;
  align-items: center;}

#mainContent > div {display:flex;
  gap:60px;}

#mainContent > div > div {width:100%;}

#zahnmodell {max-width:400px;
  padding:40px;}


.Zahn { cursor: pointer; transition: fill 0.2s; fill:#bbb;}
.Zahn:hover { fill: #999; }
#selected-teeth { margin-top: 1em; font-weight: bold; }

.Zahn.marked { fill: #009c86 !important; }

.Zahn { cursor: pointer; transition: fill 0.2s; }
.Zahn:hover { fill: #ccc; }
.selected, .selected.Zahn.marked { fill: rgb(15, 28, 69) !important; }

.zahnfleisch{fill:#eee;
    pointer-events: none;}

	.st2{fill:none;}
	.st3{font-family: 'PT Sans', sans-serif;}
	.st4{font-size:12px;}


  footer {
    display:flex;
    justify-content: space-between;
    background:#efefef;
  }

  footer p {margin:0;
  padding:0;}

  footer ul {list-style: none;
    display:flex;
    gap:20px;
    padding:0;
    margin:0;}

  footer ul a {color:#333;
    text-decoration: none;}

    div#zahnmodell > svg {
    position: sticky;
    top: 120px;
}










.modal{position:fixed;inset:0;display:none;z-index:1000;}
.modal.open {
    display: flex;
    justify-content: center;
    align-items: center;
}
.modal-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.modal-dialog{position:relative;max-width:840px;width: 100%;background:#fff;color:#222;border-radius:12px;padding:30px;box-shadow:0 10px 30px rgba(0,0,0,.3);}
.modal-actions{display:flex;gap:12px;justify-content:flex-end;margin-top:30px;}
#summaryContent .summary-section{margin:0 0 20px 0;}
#summaryList{max-height:260px;overflow:auto;margin:8px 0 0;padding-left:20px;}
.btn-secondary{background:#e6e6e6;border:1px solid #d0d0d0;color:#222;padding:.6rem 1rem;border-radius:8px;cursor:pointer;}
.btn-secondary:hover{background:#dedede;}

div#summaryContent {
    background: rgba(0, 0, 0, 0.03);
    padding: 20px 20px;
    border-radius: 5px;
}

h3#confirmTitle {color:rgb(15, 28, 69);
  margin-top:0;
  font-size: 25px;
    font-weight: 400;}

.summary-section strong {
    display: block;
}

/*
.node[data-header="Analog Referenznummer"] {
    border-left: 10px solid rgb(15, 28, 69);
}

.node[data-header="Referenznummer"] {
    border-left: 10px solid #0071B9;
}
*/

@media all and (max-width:900px) {
body {padding:110px 20px 20px;}

    #navsearch {flex-direction: row;}

    #search {margin-bottom:20px;}

    #toggle-all {width:100%;
    text-align: center;}


    header {
      flex-direction: column;
      padding:10px 15px;}

    main {padding:30px;}

    #search, #navsearch {
        width: 100%;
    }

    #emailSetting > div {
    width: 100%;
}

#emailSetting,
#mainContent > div,
.headerflex {flex-direction: column;
  gap:20px;}

  #zahnmodell {margin:auto;}

  .level-1 {margin-left:3%;}
.level-2 {margin-left:6%;}
.level-3 {margin-left:9%;}
.level-4 {margin-left:12%;}
.level-5 {margin-left:15%;}
.level-6 {margin-left:18%;}
.level-7 {margin-left:21%;}
.level-8 {margin-left:24%;}
.level-9 {margin-left:27%;}
.level-10 {margin-left:30%;}
.level-11 {margin-left:33%;}
.level-12{margin-left:36%;}
.level-13 {margin-left:39%;}
.level-14 {margin-left:42%;}
.level-15 {margin-left:45%;}

footer {flex-direction: column;
  text-align: center;
  gap:10px;}

footer ul {flex-direction: column;
  gap:10px;}
}