/* ============ Global & Baseline ============ */
html {
  height: 100%;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  margin-bottom: 30px;
  background-color: #ffffff;
  color: #000000;
  font-family: Arial,'Verdana',Helvetica,"Times New Roman",serif;
  font-size: 12px;
  overflow-y: scroll;
}

/* Material Icons */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
}
.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 20px;
  color: #2E8BC9;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}
.material-icons:hover { color: #7C8890; }

/* Font Awesome helpers */
.fa {
  padding: 10px;
  font-size: 20px;
  width: 30px;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}
.fa:hover { opacity: 0.7; }
.fa-facebook { background: #3B5998; color: #fff; }

/* Links */
a { text-decoration: none; }
a.link { color: #2980b9; text-decoration: none; font-weight: bold; }
a:hover.link { color: #3291d1; text-decoration: underline; font-weight: bold; }

/* Forms & Elements */
form { margin: 0; padding: 0; }
img { border: 0; }
textarea, input { font-family: Arial,'Verdana',Helvetica,"Times New Roman",serif; font-size: 12px; }

/* ============ Message Bars ============ */
div#L_Error, div#F_Error, div#P_Error {
  position: absolute; z-index: 3; top: 51px; background-color: #feb5b5; width: 800px;
  transform: translateX(-50%); margin-left: 50%;
  border: 1px #000 solid; border-radius: 0 0 5px 5px;
  padding: 2px 0 2px 5px; color: #f00; font-size: 12px; font-weight: bold; text-align: left; margin-bottom: 5px;
}
div#L_Ok, div#P_Ok {
  position: absolute; z-index: 3; top: 51px; background-color: #cafbc6; width: 800px;
  transform: translateX(-50%); margin-left: 50%;
  border: 1px #000 solid; border-radius: 0 0 5px 5px;
  padding: 2px 0 2px 5px; color: #00df00; font-size: 12px; font-weight: bold; text-align: left; margin-bottom: 5px;
}
div#P_Info {
  position: absolute; z-index: 3; top: 51px; background-color: #fcff8c; width: 800px;
  transform: translateX(-50%); margin-left: 50%;
  border: 1px #000 solid; border-radius: 0 0 5px 5px;
  padding: 2px 0 2px 5px; color: #fcb421; font-size: 12px; font-weight: bold; text-align: left; margin-bottom: 5px;
}
div#P_Error, div#P_Ok, div#P_Info { top: 85px; }
div#Error {
  background-color: #feb5b5; border: 1px #000 solid; border-radius: 5px;
  padding: 2px 0 2px 5px; color: #f00; font-size: 12px; font-weight: bold; text-align: left; margin-bottom: 5px;
}
div#Ok {
  background-color: #cafbc6; border: 1px #000 solid; border-radius: 5px;
  padding: 2px 0 2px 5px; color: #00df00; font-size: 12px; font-weight: bold; text-align: left; margin-bottom: 5px;
}

/* ============ Top Navigation / Content ============ */
div#top_navi-table {
  display: table; width: 100%; background-color: #fff; border-bottom: 2px #6a7780 solid;
  box-shadow: 0 3px 2px #dfdfdf; padding: 0; margin: 0;
}
div#top_navi-tablecell {
  display: table-cell; margin: 0; padding: 0 10px 0 0; text-align: center; vertical-align: middle;
  font-size: 20px; font-weight: bold; color: #6a7780;
}
div#Content { padding: 10px; padding-top: 55px; }

/* ============ Alerts ============ */
.alert, .success, .info, .warning {
  padding: 10px; color: black; margin-bottom: 15px;
  border-left: 6px solid transparent; background-clip: padding-box;
}
.alert   { background-color: #ffdddd; border-left-color: #f44336; }
.success { background-color: #ddffdd; border-left-color: #4caf50; }
.info    { background-color: #e7f3fe; border-left-color: #2196f3; }
.warning { background-color: #ffffcc; border-left-color: #ffeb3b; }

.closebtn {
  margin-left: 15px; color: black; font-weight: bold; float: right; font-size: 20px;
  line-height: 15px; cursor: pointer; transition: 0.3s;
}
.closebtn:hover { color: #7C8890; }

/* ============ Card/Box Components ============ */
div#Box {
  display: table; margin-bottom: 20px; width: 100%;
  box-shadow: 0 0 10px #888; 
}
div#Box > div { display: table-row; }
div#Box-Header {
  display: table-cell; vertical-align: middle; height: 25px; background-color: #7c8890;
  font-weight: bold; color: #fff; text-align: center;
}
div#Box-Content {
  display: table-cell; background-color: #eee; padding: 10px;
}

div#Tile {
  display: table; width: 250px; height: 250px; float: left;
  margin-right: 15px; margin-bottom: 10px; box-shadow: 0 0 10px #888;
}
div#Tile > div { display: table-row; }
div#Tile-Header {
  display: table-cell; vertical-align: middle; height: 30px; background-color: #7c8890;
  font-size: 16px; font-weight: bold; color: #fff; text-align: left; padding: 0 10px;
}
div#Tile-Content { display: table-cell; background-color: #eee; padding: 10px; }
div#Tile-Content table#Tile-Table th { width: 50%; text-align: right; }
div#Tile-Content table#Tile-Table td { width: 50%; text-align: left; padding-left: 10px; }

div#Tile.size_1x1 { width: 250px; }
div#Tile.size_1x2 { width: 515px; }
div#Tile.size_1x3 { width: 780px; }

/* ============ Navigation Bar ============ */
nav { background-color: #fff; width: 100%; min-width: 1000px; }
nav ul { padding: 0; margin: 0; }
nav ul:after { clear: both; content: " "; display: block; font-size: 0; height: 0; visibility: hidden; }
nav ul,nav ul li { background-color: #fff; }
nav ul li { list-style: none; float: left; }
nav ul li a {
  text-decoration: none; display: block; color: #333; padding: 12px 30px;
  transition: background 0.3s ease-out; border-right: 1px solid #dfdfdf;
}
nav ul li.cat1:hover a, nav ul li.cat1:hover > ul li a, nav ul li.cat1:hover > ul,
nav ul li.cat1-active a, nav ul li.cat1-active ul li a, nav ul li.cat1-active ul { background-color: #F54646; }
nav ul li.cat2:hover a, nav ul li.cat2:hover > ul li a, nav ul li.cat2:hover > ul,
nav ul li.cat2-active a, nav ul li.cat2-active ul li a, nav ul li.cat2-active ul { background-color: #72B904; }
nav ul li.cat3:hover a, nav ul li.cat3:hover > ul li a, nav ul li.cat3:hover > ul,
nav ul li.cat3-active a, nav ul li.cat3-active ul li a, nav ul li.cat3-active ul { background-color: #EF8700; }
nav ul li.cat4:hover a, nav ul li.cat4:hover > ul li a, nav ul li.cat4:hover > ul,
nav ul li.cat4-active a, nav ul li.cat4-active ul li a, nav ul li.cat4-active ul { background-color: #007EB9; }
nav ul li.cat5:hover a, nav ul li.cat5:hover > ul li a, nav ul li.cat5:hover > ul,
nav ul li.cat5-active a, nav ul li.cat5-active ul li a, nav ul li.cat5-active ul { background-color: #FFD200; }
nav ul li.cat6:hover a, nav ul li.cat6:hover > ul li a, nav ul li.cat6:hover > ul,
nav ul li.cat6-active a, nav ul li.cat6-active ul li a, nav ul li.cat6-active ul { background-color: #CD7FB5; }
nav ul li.cat7:hover a, nav ul li.cat7:hover > ul li a, nav ul li.cat7:hover > ul,
nav ul li.cat7-active a, nav ul li.cat7-active ul li a, nav ul li.cat7-active ul { background-color: #B8DC81; }
nav ul li.cat8:hover a, nav ul li.cat8:hover > ul li a, nav ul li.cat8:hover > ul,
nav ul li.cat8-active a, nav ul li.cat8-active ul li a, nav ul li.cat8-active ul { background-color: #9B006B; }
nav ul li.cat9:hover a, nav ul li.cat9:hover > ul li a, nav ul li.cat9:hover > ul,
nav ul li.cat9-active a, nav ul li.cat9-active ul li a, nav ul li.cat9-active ul { background-color: #7FBEDC; }
nav ul li.cat10:hover a, nav ul li.cat10:hover > ul li a, nav ul li.cat10:hover > ul,
nav ul li.cat10-active a, nav ul li.cat10-active ul li a, nav ul li.cat10-active ul { background-color: #FFE87F; }

nav ul li:hover > ul { visibility: visible; }
nav ul li ul {
  display: inline; visibility: hidden; z-index: 5; position: absolute; padding: 0;
  border-bottom: 2px #000 solid; min-width: 250px;
}
nav ul li ul.active {
  visibility: visible; z-index: 4; left: 0; width: 100%;
  border-bottom: 2px #6a7780 solid; box-shadow: 0 3px 2px #CCC;
}
nav ul li ul li { float: none; }
nav ul li:hover > a { color: #FAFAFA; }
nav ul li ul li a { color: #FAFAFA; height: 25px; padding: 5px 30px; border-right: 0; }
nav ul li ul.active li { float: left; }
nav ul li ul li a:hover { color: #ddd; }
nav ul li ul li.navi_sub-active a { box-shadow: -1px 3px 0 -1px #dd4b39; }

/* ============ Icons/Buttons ============ */
button#Icon {
  background-color: transparent; background-size: 20px 20px; background-repeat: no-repeat;
  width: 20px; height: 20px; border: 0; cursor: pointer; padding: 0; margin-right: 3px;
}
img#Icon { width: 20px; height: 20px; border: 0; cursor: pointer; padding: 0; margin-right: 3px; }

button#Button {
  background: linear-gradient(to bottom, #3498db, #2980b9); border: 1px solid #1f84c2;
  border-radius: 5px; box-shadow: 0 0 3px #666; height: 30px; color: #fff;
  font-size: 14px; padding: 5px; text-decoration: none; cursor: pointer;
}
button#Button:hover { background: linear-gradient(to bottom, #0399f0, #3291d1); }

button#Button_Nav {
  background: #eee; color: black; height: 40px; width: 200px; border: none;
  font-size: 13px; padding: 4px 12px; text-align: left; font-weight: bold; cursor: pointer;
}
button#Button_Nav:hover { background: #555; color: white; }

button#Button_Action {
  background: linear-gradient(to bottom, #4ad934, #4e9443);
  border: 1px solid #4e9443; border-radius: 5px; box-shadow: 0 0 3px #666;
  height: 30px; color: #fff; font-size: 14px; padding: 5px; text-decoration: none; cursor: pointer;
}
button#Button_Action:hover { background: linear-gradient(to bottom, #9ceb90, #74b369); }

#Button-right {
  background: linear-gradient(to bottom, #3498db, #2980b9); border: 1px solid #1f84c2;
  border-radius: 0 5px 5px 0; box-shadow: 0 0 3px #666; height: 30px; color: #fff; font-size: 14px; text-decoration: none;
}
#Button-right:hover { background: linear-gradient(to bottom, #0399f0, #3291d1); }

#Button-green {
  box-shadow: 0 0 1px #000; height: 30px; color: #fff; font-size: 14px; padding: 5px;
  background: #32a340; border: 1px solid #1f8c1f; text-decoration: none;
}
#Button-green:hover { background: #54915b; }

button#State {
  width: 100%; height: 26px; cursor: pointer; padding: 0; margin: 0;
  color: #000; border: none; background-color: #EDEDED; text-decoration: underline;
}
button#State:hover { color: #fff; }

/* ============ Form Inputs Legacy IDs ============ */
#Formfield, #Formfield-left, #Formfield-middle, #Formfield-right {
  height: 30px; width: 250px; padding-left: 5px; border: 2px #777 solid;
}
#Formfield { border-radius: 5px; }
#Formfield-left { border-radius: 5px 0 0 5px; }
#Formfield-middle { border-radius: 0; }
#Formfield-right { border-radius: 0 5px 5px 0; }

#Formfield:hover, #Formfield-left:hover, #Formfield-middle:hover, #Formfield-right:hover { border-color: #444; }
#Formfield:focus, #Formfield-left:focus, #Formfield-middle:focus, #Formfield-right:focus { border-color: #2980b9; outline: none; }

input:required, input:invalid {
  -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none;
}

/* ============ Switch ============ */
.switch {
  position: relative; display: inline-block; width: 32px; height: 16px; cursor: pointer;
}
.switch input { display: none; }
.slider {
  position: absolute; inset: 0; background-color: #ccc; transition: .4s;
  border-radius: 20px;
}
.slider:before {
  position: absolute; content: ""; height: 12px; width: 12px; left: 2px; bottom: 2px;
  background-color: #fff; transition: .4s; border-radius: 50%;
}
input:checked + .slider { background-color: #2E8BC9; }
input:focus + .slider { box-shadow: 0 0 1px #2E8BC9; }
input:checked + .slider:before { transform: translateX(16px); }
.switch[disabled]{ cursor: auto; }

/* ============ Misc Layout ============ */
.valign, #valign { display: table-cell; vertical-align: middle; }

#footerbar {
  z-index: 2000; position: fixed; bottom: 0; left: 0; display: table; width: 100%; height: 40px; padding-left: 3px;
  background-color: #7C8890; border-top: 2px #6a7780 solid; box-shadow: 0 -3px 5px #CCC;
}

/* ============ Tile Table ============ */
table#tile {
  font-size: 12px; padding: 0; border-spacing: 1px;
}
table#tile th {
  font-weight: bold; text-align: left; padding-left: 5px; white-space: nowrap;
}
table#tile th.nav {
  background: #eee; color: black; height: 30px; width: 200px; border: none; font-size: 13px; padding: 8px 12px; text-align: left; font-weight: bold;
}
table#tile td {
  border-radius: 1px; border: 1px #C9C9C9 solid; background-color: #EDEDED; width: 10px; height: 28px;
  padding: 2px; empty-cells: show; white-space: nowrap;
}
table#tile td.input { padding: 0; background-color: #fff; }
table#tile td.nav {
  background: #eee; color: black; height: 20px; width: 200px; border: none; font-size: 13px; padding: 5px 20px; text-align: left;
}
table#tile td.input input,
table#tile td.input select,
table#tile td.input textarea,
table#tile td.input input:hover,
table#tile td.input select:hover,
table#tile td.input input:focus,
table#tile td.input select:focus {
  width: 100%; height: 26px; border: none; border-radius: 2px; padding: 2px; outline: none;
}
table#tile td input[type='checkbox'],
table#tile td input[type='radio'],
table#tile td input:hover[type='checkbox'],
table#tile td input:hover[type='radio'],
table#tile td input:focus[type='checkbox'],
table#tile td input:focus[type='radio'] {
  height: auto; width: auto;
}
table#tile td.group { background-color: #ccc; }
table#tile td.error, button#State.error { background-color: #FD482F; }
table#tile td.warning, button#State.warning { background-color: #FFD51D; }
table#tile td.ok, button#State.ok { background-color: #B8DC81; }

input[type='radio'], input[type='checkbox'] { margin: 0; height: initial; width: initial; }

table#tile input[disabled], table#tile td[disabled], table#tile select[disabled], table#tile textarea[disabled] {
  background-color: #ddd; color: #666;
}
table#tile input[notactive], table#tile td[notactive], table#tile select[notactive] { color: #999; }
table#tile tr[selected], table#tile td[selected], table#tile input[selected] { background-color: #fcff8c; }
table#tile tr[selected].group, table#tile td[selected].group { background-color: #e7ee00; }

table#tile td.reset, .reset {
  margin: 0; padding: 0; background: none; border: none; border-collapse: collapse; border-spacing: 0; background-image: none;
}

/* ============ Tooltip System ============ */
div[data-tooltip] { display: inline-block; }
[data-tooltip], .tooltip { position: relative; cursor: pointer; }
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after {
  position: absolute; visibility: hidden; opacity: 0; pointer-events: none;
}
[data-tooltip]:hover:before, [data-tooltip]:hover:after,
[data-tooltip]:focus:before, [data-tooltip]:focus:after,
.tooltip:hover:before, .tooltip:hover:after,
.tooltip:focus:before, .tooltip:focus:after {
  visibility: visible; opacity: 1;
}

/* Arrow */
.tooltip:before, [data-tooltip]:before {
  z-index: 1001; border: 6px solid transparent; background: transparent; content: "";
}
/* Bubble */
.tooltip:after, [data-tooltip]:after {
  z-index: 1000; padding: 8px; min-width: 160px; background-color: hsla(0,0%,20%,0.9);
  color: #fff; content: attr(data-tooltip); font-size: 14px; text-align: center; line-height: 1.2;
}

/* Top default */
[data-tooltip]:before, [data-tooltip]:after, .tooltip:before, .tooltip:after, .tooltip-top:before, .tooltip-top:after {
  bottom: 100%; left: 45%;
}
[data-tooltip]:before, .tooltip:before, .tooltip-top:before {
  margin-left: -6px; margin-bottom: -12px; border-top-color: hsla(0,0%,20%,0.9);
}
[data-tooltip]:after, .tooltip:after, .tooltip-top:after { margin-left: -88px; }
[data-tooltip]:hover:before, [data-tooltip]:hover:after,
[data-tooltip]:focus:before, [data-tooltip]:focus:after,
.tooltip:hover:before, .tooltip:hover:after,
.tooltip:focus:before, .tooltip:focus:after,
.tooltip-top:hover:before, .tooltip-top:hover:after,
.tooltip-top:focus:before, .tooltip-top:focus:after {
  transform: translateY(-12px);
  transition-delay: 1s;
}

/* Left */
.tooltip-left:before, .tooltip-left:after { right: 100%; bottom: 50%; left: auto; }
.tooltip-left:before {
  margin-right: -12px; border-left-color: hsla(0,0%,20%,0.9);
}
.tooltip-left:hover:before, .tooltip-left:hover:after, .tooltip-left:focus:before, .tooltip-left:focus:after {
  transform: translateX(-12px); transition-delay: 1s;
}

/* Bottom */
.tooltip-bottom:before, .tooltip-bottom:after { top: 100%; bottom: auto; left: 45%; }
.tooltip-bottom:before { margin-top: -12px; border-bottom-color: hsla(0,0%,20%,0.9); }
.tooltip-bottom:hover:before, .tooltip-bottom:hover:after,
.tooltip-bottom:focus:before, .tooltip-bottom:focus:after {
  transform: translateY(12px); transition-delay: 1s;
}

/* Right */
.tooltip-right:before, .tooltip-right:after { bottom: 50%; left: 100%; }
.tooltip-right:before { margin-left: -12px; border-right-color: hsla(0,0%,20%,0.9); }
.tooltip-right:hover:before, .tooltip-right:hover:after,
.tooltip-right:focus:before, .tooltip-right:focus:after {
  transform: translateX(12px); transition-delay: 1s;
}

/* Arrow tweaks */
.tooltip-left:before, .tooltip-right:before { top: 6px; }
.tooltip-left:after, .tooltip-right:after { margin-left: 0; margin-bottom: -16px; }

/* Own changes */
[data-tooltip]:after, .tooltip:after, .tooltip-top:after, .tooltip-bottom:after,
.tooltip-left:after, .tooltip-right:after, .tooltip-top-w300px:after { white-space: pre-wrap; }
.tooltip-top-w300px:after { width: 300px; text-align: left; margin-left: -158px; }
.tooltip-fast:hover:before, .tooltip-fast:hover:after { transition-delay: 0.4s; }
.tooltip-text-left:before, .tooltip-text-left:after { text-align: left; }
.tooltip-logout:before { top: 12px; }

/* ============ Process Bar ============ */
@keyframes ProcessBar { 0% { width: 1px; } 100% { width: 400px; } }
div#processbar {
  background-color: #eee; height: 25px; width: 400px; margin-top: 20px; box-shadow: 0 0 10px #888;
}
div#processbar div {
  animation: ProcessBar 20s linear 1; background: #B8DC81; height: 25px; width: 400px;
}

/* ============ Modern Form Card (layout2.php) ============ */
:root{
  --bg:#f6f7f9;
  --card:#fff;
  --text:#1f2937;
  --muted:#6b7280;
  --primary:#2563eb;
  --primary-600:#1d4ed8;
  --border:#e5e7eb;
  --input:#f9fafb;
  --chip:#f3f4f6;
  --chip-border:#e5e7eb;
  --chip-active:#e7efff;
  --chip-active-border:#93b0ff;
  --shadow:0 10px 25px rgba(0,0,0,.06);
}

.container.form-modern { max-width: 980px; margin: 32px auto; padding: 0 16px; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }

/* Header */
.form-card__header { background: linear-gradient(180deg, #eef2ff, #e0e7ff); padding: 16px 20px; border-bottom: 1px solid var(--border); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.header-side { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.header-center { flex: 1 1 auto; text-align: center; min-width: 0; }
.form-title { font-size: 24px; font-weight: 700; letter-spacing: .2px; margin: 0; }
.form-sub { margin-top: 6px; color: var(--muted); font-size: 13px; }
.header-logo { display: flex; align-items: center; justify-content: center; }
.header-logo img { height: 64px; width: auto; display: block; object-fit: contain; filter: drop-shadow(0 1px 2px rgba(0,0,0,.12)); }
.header-side.right .header-logo img { filter: drop-shadow(0 1px 2px rgba(0,0,0,.25)); }

@media (max-width: 900px){
  .header-inner{ flex-wrap: wrap; }
  .header-center{ order: -1; width: 100%; }
  .header-logo img{ height: 52px; }
}

/* Body, Grid */
.form-card__body { padding: 20px; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-6 { grid-column: span 6; }
.col-8 { grid-column: span 8; }
.col-12 { grid-column: span 12; }
@media (max-width: 900px){ .col-3,.col-4,.col-6,.col-8 { grid-column: span 12; } }

.form-group label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 6px; letter-spacing: .2px; }

/* Unified field base */
.input, .select, .textarea {
  width: 100%;
  background: var(--input);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
  transition: border-color .15s, box-shadow .15s, background .2s, color .2s;
  outline: none;
}

/* Focus */
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.15);
  background: #fff;
}

/* .select exakt wie .input + Chevron */
.select {
  padding: 10px 40px 10px 12px;             /* Platz rechts für Pfeil */
  appearance: none; -webkit-appearance: none; -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='20' height='20' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 18px;
}
.select:hover { border-color: #cfd4dc; background: #fff; }
.select:disabled { color: #9aa3af; background: #f3f4f6; cursor: not-allowed; }
.select::-ms-expand { display: none; }      /* IE/Edge Legacy */
.select::-moz-focus-inner { border: 0; }
.select:-moz-focusring { outline: none; }
@media (forced-colors: active){ .select { background-image: none; } }
@media (max-width: 400px){ .select { padding: 10px 36px 10px 12px; } }

/* Textarea */
.textarea { min-height: 42px; resize: vertical; }

/* Chips */
.chips { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.chip {
  position: relative; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none;
  border-radius: 999px; padding: 8px 12px; background: var(--chip); border: 1px solid var(--chip-border); color: #374151;
  transition: background .15s, border-color .15s, box-shadow .15s, color .15s;
}
.chip:focus-within{ box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
.chip input{ position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; pointer-events: none; }
.chip .dot{ width: 10px; height: 10px; border-radius: 50%; background: #cbd5e1; flex: 0 0 10px; transition: background .15s, transform .15s; }
.chip.active{ background: var(--chip-active); border-color: var(--chip-active-border); color: #1f2a44; }
.chip.active .dot{ background: #3b82f6; transform: scale(1.15); }

/* Actions */
.form-actions { display: flex; gap: 12px; padding: 16px 20px; border-top: 1px solid var(--border); background: #fafafa; }
.btn { appearance: none; border: 0; border-radius: 10px; padding: 10px 16px; font-weight: 600; cursor: pointer; transition: background .2s, color .2s, box-shadow .2s; }
.btn-primary { background: var(--primary); color: #fff; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.btn-primary:hover { background: var(--primary-600); }
.btn-secondary { background: #e5e7eb; color: #111827; }
.btn-secondary:hover { background: #d1d5db; }

@media (max-width: 840px){
  .grid .col-3, .grid .col-4, .grid .col-6, .grid .col-8 { grid-column: span 12; }
  .header-inner { flex-wrap: wrap; }
  .header-center { order: -1; width: 100%; text-align: center; }
  .header-logo img { height: 48px; }
}
@media (max-width: 400px){
  .form-card__body { padding: 14px; }
  .form-actions { padding: 12px 14px; gap: 8px; }
  .btn { width: 100%; }
  .chips { gap: 8px; }
  .chip { padding: 6px 10px; font-size: 13px; }
}

/* Actions in einer Zeile: links Buttons, rechts Icons */
.actions-inline {
  display: flex;
  align-items: center;
  justify-content: space-between; /* verteilt links/rechts */
  gap: 12px;
}

/* Linke Seite (Buttons) */
.actions-inline .actions-left {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

/* Rechte Seite (Icon-Toolbar) */
.social-toolbar-inline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* dezente Hintergrund-Pille, damit es nach “Toolbar” aussieht */
  background: #f6f7f9;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  padding: 6px 10px;
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* Runde Icon-Buttons in der Toolbar */
.social-toolbar-inline .social-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  color: #fff;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}

/* Farben je Netzwerk */
.social-toolbar-inline .social-btn.home { background: #455a70; }
.social-toolbar-inline .social-btn.fb   { background: #3b5998; }
.social-toolbar-inline .social-btn.ig   { background: #e1306c; }
.social-toolbar-inline .social-btn.mail { background: #2563eb; }

/* Font Awesome neutral – überschreibt globales .fa */
.social-toolbar-inline .social-btn .fa {
  font-size: 16px;
  padding: 0 !important;
  width: auto !important;
}

/* Hover/Focus dezent */
.social-toolbar-inline .social-btn:hover,
.social-toolbar-inline .social-btn:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,.15);
  opacity: .98;
  outline: none;
}

/* Screenreader-Text */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* Responsive: untereinander stapeln, Icons bleiben rechtsbündig */
@media (max-width: 720px) {
  .actions-inline {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .actions-inline .actions-left {
    order: 1;                   /* Buttons zuerst */
    justify-content: flex-start;
  }
  .actions-inline .social-toolbar-inline {
    order: 2;                   /* Toolbar darunter */
    align-self: flex-end;       /* rechtsbündig im Formular */
  }
}