/* ---------- Detail pages (routed, replace popup modals). .pdp* classes were introduced for the Projects detail page and are now shared by every routed detail page (Ideen/Fundament/Ziele/Kontakte/Bücher/Meilensteine); .detailForm constrains simple single-column form pages to a readable width. ---------- */ .icon { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; flex: none; } .pdpBack { display: flex; align-items: center; gap: 6px; color: var(--ink-3); font-size: var(--fs-sm); margin-bottom: 20px; cursor: pointer; width: fit-content; transition: color 0.15s ease; } .pdpBack:hover { color: var(--ink); } .pdpTitle { display: flex; align-items: center; gap: 14px; font-size: var(--fs-xl); font-weight: 800; letter-spacing: -0.01em; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 20px 24px; margin: 0 0 18px 0; } .pdpTitle::before { content: ""; width: 44px; height: 44px; border-radius: var(--r-md); background-color: color-mix(in srgb, var(--primary) 14%, transparent); background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.4%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-7.4%22%2F%3E%3Cpath%20d%3D%22M2%206h4%22%2F%3E%3Cpath%20d%3D%22M2%2010h4%22%2F%3E%3Cpath%20d%3D%22M2%2014h4%22%2F%3E%3Cpath%20d%3D%22M2%2018h4%22%2F%3E%3Cpath%20d%3D%22M21.378%205.626a1%201%200%201%200-3.004-3.004l-5.01%205.012a2%202%200%200%200-.506.854l-.837%202.87a.5.5%200%200%200%20.62.62l2.87-.837a2%202%200%200%200%20.854-.506z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; display: flex; flex-shrink: 0; } .pdpTitle[data-lc="user"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%2021v-2a4%204%200%200%200-4-4H9a4%204%200%200%200-4%204v2%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%227%22%20r%3D%224%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="flag"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M4%2022V4a1%201%200%200%201%20.4-.8A6%206%200%200%201%208%202c3%200%205%202%207.333%202q2%200%203.067-.8A1%201%200%200%201%2020%204v10a1%201%200%200%201-.4.8A6%206%200%200%201%2016%2016c-3%200-5-2-8-2a6%206%200%200%200-4%201.528%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="settings"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M9.671%204.136a2.34%202.34%200%200%201%204.659%200%202.34%202.34%200%200%200%203.319%201.915%202.34%202.34%200%200%201%202.33%204.033%202.34%202.34%200%200%200%200%203.831%202.34%202.34%200%200%201-2.33%204.033%202.34%202.34%200%200%200-3.319%201.915%202.34%202.34%200%200%201-4.659%200%202.34%202.34%200%200%200-3.32-1.915%202.34%202.34%200%200%201-2.33-4.033%202.34%202.34%200%200%200%200-3.831A2.34%202.34%200%200%201%206.35%206.051a2.34%202.34%200%200%200%203.319-1.915%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%223%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="wallet"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M19%207V4a1%201%200%200%200-1-1H5a2%202%200%200%200%200%204h15a1%201%200%200%201%201%201v4h-3a2%202%200%200%200%200%204h3a1%201%200%200%200%201-1v-2a1%201%200%200%200-1-1%22%2F%3E%3Cpath%20d%3D%22M3%205v14a2%202%200%200%200%202%202h15a1%201%200%200%200%201-1v-4%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="repeat"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22m17%202%204%204-4%204%22%2F%3E%3Cpath%20d%3D%22M3%2011v-1a4%204%200%200%201%204-4h14%22%2F%3E%3Cpath%20d%3D%22m7%2022-4-4%204-4%22%2F%3E%3Cpath%20d%3D%22M21%2013v1a4%204%200%200%201-4%204H3%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="gem"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10.5%203%208%209l4%2013%204-13-2.5-6%22%2F%3E%3Cpath%20d%3D%22M17%203a2%202%200%200%201%201.6.8l3%204a2%202%200%200%201%20.013%202.382l-7.99%2010.986a2%202%200%200%201-3.247%200l-7.99-10.986A2%202%200%200%201%202.4%207.8l2.998-3.997A2%202%200%200%201%207%203z%22%2F%3E%3Cpath%20d%3D%22M2%209h20%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="biceps-flexed"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.409%2013.017A5%205%200%200%201%2022%2015c0%203.866-4%207-9%207-4.077%200-8.153-.82-10.371-2.462-.426-.316-.631-.832-.62-1.362C2.118%2012.723%202.627%202%2010%202a3%203%200%200%201%203%203%202%202%200%200%201-2%202c-1.105%200-1.64-.444-2-1%22%2F%3E%3Cpath%20d%3D%22M15%2014a5%205%200%200%200-7.584%202%22%2F%3E%3Cpath%20d%3D%22M9.964%206.825C8.019%207.977%209.5%2013%208%2015%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="sprout"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M14%209.536V7a4%204%200%200%201%204-4h1.5a.5.5%200%200%201%20.5.5V5a4%204%200%200%201-4%204%204%204%200%200%200-4%204c0%202%201%203%201%205a5%205%200%200%201-1%203%22%2F%3E%3Cpath%20d%3D%22M4%209a5%205%200%200%201%208%204%205%205%200%200%201-8-4%22%2F%3E%3Cpath%20d%3D%22M5%2021h14%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="drama"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M10%2011h.01%22%2F%3E%3Cpath%20d%3D%22M14%206h.01%22%2F%3E%3Cpath%20d%3D%22M18%206h.01%22%2F%3E%3Cpath%20d%3D%22M6.5%2013.1h.01%22%2F%3E%3Cpath%20d%3D%22M22%205c0%209-4%2012-6%2012s-6-3-6-12c0-2%202-3%206-3s6%201%206%203%22%2F%3E%3Cpath%20d%3D%22M17.4%209.9c-.8.8-2%20.8-2.8%200%22%2F%3E%3Cpath%20d%3D%22M10.1%207.1C9%207.2%207.7%207.7%206%208.6c-3.5%202-4.7%203.9-3.7%205.6%204.5%207.8%209.5%208.4%2011.2%207.4.9-.5%201.9-2.1%201.9-4.7%22%2F%3E%3Cpath%20d%3D%22M9.1%2016.5c.3-1.1%201.4-1.7%202.4-1.4%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="ban"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2212%22%20r%3D%2210%22%2F%3E%3Cpath%20d%3D%22M4.929%204.929%2019.07%2019.071%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="tree-deciduous"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M8%2019a4%204%200%200%201-2.24-7.32A3.5%203.5%200%200%201%209%206.03V6a3%203%200%201%201%206%200v.04a3.5%203.5%200%200%201%203.24%205.65A4%204%200%200%201%2016%2019Z%22%2F%3E%3Cpath%20d%3D%22M12%2019v3%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="scroll-text"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M15%2012h-5%22%2F%3E%3Cpath%20d%3D%22M15%208h-5%22%2F%3E%3Cpath%20d%3D%22M19%2017V5a2%202%200%200%200-2-2H4%22%2F%3E%3Cpath%20d%3D%22M8%2021h12a2%202%200%200%200%202-2v-1a1%201%200%200%200-1-1H11a1%201%200%200%200-1%201v1a2%202%200%201%201-4%200V5a2%202%200%201%200-4%200v2a1%201%200%200%200%201%201h3%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="stethoscope"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M11%202v2%22%2F%3E%3Cpath%20d%3D%22M5%202v2%22%2F%3E%3Cpath%20d%3D%22M5%203H4a2%202%200%200%200-2%202v4a6%206%200%200%200%2012%200V5a2%202%200%200%200-2-2h-1%22%2F%3E%3Cpath%20d%3D%22M8%2015a6%206%200%200%200%2012%200v-3%22%2F%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%2210%22%20r%3D%222%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="dumbbell"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M17.596%2012.768a2%202%200%201%200%202.829-2.829l-1.768-1.767a2%202%200%200%200%202.828-2.829l-2.828-2.828a2%202%200%200%200-2.829%202.828l-1.767-1.768a2%202%200%201%200-2.829%202.829z%22%2F%3E%3Cpath%20d%3D%22m2.5%2021.5%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22m20.1%203.9%201.4-1.4%22%2F%3E%3Cpath%20d%3D%22M5.343%2021.485a2%202%200%201%200%202.829-2.828l1.767%201.768a2%202%200%201%200%202.829-2.829l-6.364-6.364a2%202%200%201%200-2.829%202.829l1.768%201.767a2%202%200%200%200-2.828%202.829z%22%2F%3E%3Cpath%20d%3D%22m9.6%2014.4%204.8-4.8%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="utensils"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M3%202v7c0%201.1.9%202%202%202h4a2%202%200%200%200%202-2V2%22%2F%3E%3Cpath%20d%3D%22M7%202v20%22%2F%3E%3Cpath%20d%3D%22M21%2015V2a5%205%200%200%200-5%205v6c0%201.1.9%202%202%202h3Zm0%200v7%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="tag"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M12.586%202.586A2%202%200%200%200%2011.172%202H4a2%202%200%200%200-2%202v7.172a2%202%200%200%200%20.586%201.414l8.704%208.704a2.426%202.426%200%200%200%203.42%200l6.58-6.58a2.426%202.426%200%200%200%200-3.42z%22%2F%3E%3Ccircle%20cx%3D%227.5%22%20cy%3D%227.5%22%20r%3D%22.5%22%20fill%3D%22currentColor%22%2F%3E%3C%2Fsvg%3E"); } .pdpTitle[data-lc="notebook-pen"]::before { background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23d97b3f%22%20stroke-width%3D%221.75%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpath%20d%3D%22M13.4%202H6a2%202%200%200%200-2%202v16a2%202%200%200%200%202%202h12a2%202%200%200%200%202-2v-7.4%22%2F%3E%3Cpath%20d%3D%22M2%206h4%22%2F%3E%3Cpath%20d%3D%22M2%2010h4%22%2F%3E%3Cpath%20d%3D%22M2%2014h4%22%2F%3E%3Cpath%20d%3D%22M2%2018h4%22%2F%3E%3Cpath%20d%3D%22M21.378%205.626a1%201%200%201%200-3.004-3.004l-5.01%205.012a2%202%200%200%200-.506.854l-.837%202.87a.5.5%200%200%200%20.62.62l2.87-.837a2%202%200%200%200%20.854-.506z%22%2F%3E%3C%2Fsvg%3E"); } /* Bereits reich gestaltete Detailseiten (Projekte, Entscheidungen) betten .pdpTitle in einen eigenen .pdpHeader mit Badges/Buttons ein — dort bleibt die Überschrift schlicht, damit sie nicht doppelt "eingerahmt" wirkt. */ .detailForm .field { padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--border); } .detailForm .field:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .detailForm .field > label { font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .detailForm { padding: 24px 26px; } .detailForm { max-width: 680px; } /* ---------- Einfache Text-Detailseiten (Idee, Ziel, ...): gefüllterer Header statt nackter Überschrift + Formular ---------- */ .pdpTextHero { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, var(--surface-2), var(--surface)); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 26px; margin-bottom: 20px; } .pdpSectionCard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); padding: 22px 24px; margin-bottom: 16px; } .pdpSectionCard input, .pdpSectionCard select, .pdpSectionCard textarea { width: 100%; } /* Gleiche Ausnahme wie bei .field weiter oben (siehe dortigen Kommentar) — Checkboxen/Radios innerhalb eines .pdpSectionCard (z.B. #nt-projects) dürfen nicht auf width:100% aufgeblasen werden. */ .pdpSectionCard input[type="checkbox"], .pdpSectionCard input[type="radio"] { width: 16px; height: 16px; padding: 0; } /* ---------- Cover-Hero-Variante (Ziel-Detail): Bild als Banner statt als separate Sektion weiter unten auf der Seite. Bild wird komplett (object-fit: contain) gezeigt statt zugeschnitten — Titel steht darum unterhalb des Fotos statt als Overlay darüber. ---------- */ .pdpTabs { display: flex; gap: 4px; background: var(--surface-2); padding: 4px; border-radius: var(--r-md); width: fit-content; max-width: 100%; box-sizing: border-box; overflow-x: auto; scrollbar-width: none; border: 1px solid var(--border); } .pdpTab { flex: none; white-space: nowrap; padding: 8px 16px; border-radius: var(--r-sm); font-size: var(--fs-sm); font-weight: 600; color: var(--ink-3); cursor: pointer; display: flex; align-items: center; gap: 7px; } .pdpTab .icon { width: 13px; height: 13px; } .pdpTab.active { background: var(--surface); color: var(--ink); } .pdpTab .n { background: var(--surface); color: var(--ink-3); font-size: var(--fs-xs); font-weight: 700; padding: 1px 6px; border-radius: var(--r-lg); } .pdpTab.active .n { background: color-mix(in srgb, var(--primary) 15%, transparent); color: var(--primary); } .pdpItem { background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--primary); border-radius: var(--r-md); padding: 14px 16px; display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; cursor: pointer; } .pdpAddBtn { width: 100%; text-align: left; background: transparent; border: 1.5px dashed var(--border); color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; padding: 12px 14px; border-radius: var(--r-md); cursor: pointer; display: flex; align-items: center; gap: 8px; margin-top: 2px; transition: border-color 0.15s ease, color 0.15s ease; } .pdpAddBtn:hover { border-color: var(--primary); color: var(--ink); } .pdpAddBtn .icon { width: 14px; height: 14px; } .pdpFormPanel { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .pdpFormPanel.open { max-height: 440px; } /* Größere Variante für Formulare mit mehr Feldern als die üblichen Nächste-Schritte/Aufgaben-Panels (z.B. der Projekt-Steckbrief mit RTE-Editor + Kontaktliste) — sonst würde .open{max-height:440px} den unteren Teil des Formulars (Beteiligte-Liste, Speichern/Löschen-Buttons) abschneiden. */ .pdpFormPanel.pdpFormPanelTall.open { max-height: 1400px; } .pdpFormInner { padding-top: 14px; }