:root{ --blau:#00AACD; --blaugrau:#6C8992; --gelb:#EEC43D; --dark:#1A1A1A; --grey:#6b6b6b; --lightgrey:#e4e6e8; --bg:#f5f6f7; --card:#ffffff; --wasser:#2A9D8F; --tirol:#6A4C93; --alpin:#E76F51; --dolomiten:#C9A227; --venedig:#D62828; --green:#2E7D5B; --red:#C23B3B; --accent:#ff5e52; --accent-dark:#d84a40; --content-pad-x:42px; --content-pad-top:34px; --sidebar-w:250px; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} body{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,Helvetica,sans-serif; background:var(--bg); color:var(--dark); line-height:1.5; /* Das ganze Tool ist mit lauter festen px-Schriftgroessen gebaut (kein rem/em-System) -- eine einzelne "html{font-size:...}"-Aenderung wuerde also nirgends greifen. "zoom" skaliert stattdessen die komplette Seite (Schrift UND Abstaende/Layout gleichermassen, inkl. Sidebar, Karten, Chat-Panel) gleichmaessig hoch, ohne dass jede einzelne Regel im Stylesheet angefasst werden muss. Wert bei Bedarf anpassen (1.0 = aus). 17.08.2026: von 1.1 auf 1.21 erhoeht (nochmal +10%, Kundenwunsch). */ zoom:1.21; } h1,h2,h3,h4,.nav a,.badge,.stat-label,.chip,.tab-label,button,.btn{ font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,Helvetica,sans-serif; } /* Seiten-spezifische zusaetzliche Vergroesserung (Kundenwunsch 17.08.2026): "Wettbewerb & Positionierung" nochmal 20% groesser als der globale body-zoom (1.21) -- wirkt zusaetzlich obendrauf, nicht anstelle davon. */ #p-wettbewerb{zoom:1.2;} /* "Social Media Formate" ebenfalls nochmal groesser als der globale body-zoom (Kundenwunsch 17.08.2026). */ #p-smformate{zoom:1.2;} .app{display:flex;min-height:100vh;} /* SIDEBAR */ .sidebar{ width:var(--sidebar-w);flex-shrink:0; background:var(--dark); color:#fff; padding:24px 0; position:sticky;top:0;height:100vh;overflow-y:auto; z-index:60; transition:transform .25s ease; } .menu-toggle{ display:none;align-items:center;justify-content:center; width:34px;height:34px;border-radius:8px;border:1px solid var(--lightgrey);background:#fff;cursor:pointer; color:var(--dark);flex-shrink:0; } .menu-toggle .icon{width:18px;height:18px;} .menu-toggle:hover{background:#f2f3f4;} /* ---- Basis fuer alle linearen Icons im Tool (SVG-Sprite oben im ) ---- */ .icon{width:18px;height:18px;flex-shrink:0;vertical-align:middle;} button .icon, .btn .icon{width:15px;height:15px;margin-right:6px;vertical-align:-2px;} .icon-only .icon{margin-right:0;} .sidebar-backdrop{display:none;position:fixed;inset:0;background:rgba(20,20,20,.4);z-index:55;} .sidebar-backdrop.show{display:block;} .brand{padding:0 20px 20px 20px;border-bottom:1px solid #333;margin-bottom:14px;} .brand img{width:100%;max-width:190px;height:auto;display:block;margin-bottom:10px;} .brand .name{font-size:17px;font-weight:700;letter-spacing:0.5px;} .brand .sub{font-size:11.5px;color:#a9a9a9;margin-top:2px;} nav.navlist{display:flex;flex-direction:column;padding:6px 10px;} nav.navlist a{ display:flex;align-items:center;gap:10px; color:#cfcfcf;text-decoration:none; padding:9px 12px;border-radius:7px; font-size:13.5px;margin-bottom:2px; cursor:pointer; border:none;background:none;text-align:left;width:100%; border-bottom:1px solid rgba(255,255,255,.07); } nav.navlist a:last-of-type{border-bottom:none;} nav.navlist a:has(+ .nav-group-label){border-bottom:none;} nav.navlist a .dot{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0;} nav.navlist a .nav-ic{ width:28px;height:28px;flex-shrink:0; display:flex;align-items:center;justify-content:center;color:inherit; transition:transform .15s ease; } nav.navlist a .nav-ic .icon{width:18px;height:18px;} .nav-group-label{ font-family:Arial,sans-serif;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.6px; color:#7a7a7a;padding:14px 12px 6px 12px; } .nav-group-label:first-child{padding-top:4px;} nav.navlist a:hover{background:#292929;color:#fff;} nav.navlist a:hover .nav-ic{transform:scale(1.06);} nav.navlist a.active{background:var(--accent);color:#fff;border-bottom-color:transparent;} nav.navlist a.active .dot{background:#fff;} .sidebar-footer{padding:16px 20px;font-size:10.5px;color:#888;border-top:1px solid #333;margin-top:14px;} /* Mount-Punkt fuer die Menueleiste (Guideline-PDF, Drucken, Export/Import, Zuruecksetzen, Login-Badge), wird per JS aus der Toolbar hierher verschoben, sobald die Sidebar zum Off-Canvas-Menue wird (siehe cockpit.js layoutToolbarForViewport). Leer/unsichtbar auf dem Desktop. */ .sidebar-actions{padding:14px 20px 4px 20px;border-top:1px solid #333;margin-top:6px;} .sidebar-actions:empty{display:none;} .sidebar-actions .tb-right{display:flex;flex-direction:column;align-items:stretch;gap:8px;} .sidebar-actions .tb-divider{display:none;} .sidebar-actions .btn{width:100%;justify-content:flex-start;background:#2a2a2a;color:#fff;border-color:#3a3a3a;padding:11px 14px;} .sidebar-actions .btn:hover{background:#333;} .sidebar-actions .btn.primary{background:var(--accent);border-color:var(--accent);} .sidebar-actions .btn.primary:hover{background:var(--accent-dark);} /* Im Off-Canvas-Menue ist genug Platz -- Dropdown-Mechanik abschalten, Rolle + Abmelden immer sichtbar */ .sidebar-actions .user-menu-btn{width:100%;justify-content:flex-start;background:#2a2a2a;color:#fff;border-color:#3a3a3a;padding:11px 14px;border-radius:9px;cursor:default;} .sidebar-actions .user-menu-btn .icon.chevron{display:none;} .sidebar-actions .user-menu-name{color:#fff;} .sidebar-actions .user-menu-dropdown{display:block;position:static;box-shadow:none;border:none;background:transparent;margin-top:2px;} .sidebar-actions .user-menu-role{color:#9a9a9a;border-bottom:none;padding:6px 14px 2px 14px;} .sidebar-actions .user-menu-item{color:var(--gelb);padding:8px 14px;} .sidebar-actions .user-menu-item .icon{color:var(--gelb);} .sidebar-actions .btn .btn-label{display:inline;} /* MAIN */ .content{flex:1;min-width:0;padding:var(--content-pad-top) var(--content-pad-x) 80px var(--content-pad-x);max-width:none;width:100%;} .panel{display:none;} .panel.active{display:block;animation:fadein .25s ease;} @keyframes fadein{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:translateY(0);}} .pagehead{margin-bottom:26px;} .pagehead h1{font-size:26px;margin:0 0 6px 0;color:var(--dark);} .pagehead p.lead{color:var(--grey);font-size:15px;margin:0;max-width:760px;} .section-block{margin-bottom:38px;} .section-block h2{ font-size:15px;text-transform:uppercase;letter-spacing:0.6px; color:var(--blaugrau);border-bottom:2px solid var(--lightgrey); padding-bottom:8px;margin:0 0 16px 0; } .section-block h3{font-size:16px;color:var(--dark);margin:20px 0 10px 0;} .card{background:var(--card);border-radius:14px;padding:20px 22px;box-shadow:0 1px 3px rgba(0,0,0,0.07);} .card-half{max-width:50%;} @media(max-width:900px){.card-half{max-width:100%;}} .grid{display:grid;gap:16px;} .grid-2{grid-template-columns:1fr 1fr;} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} @media(max-width:1300px){.grid-4{grid-template-columns:repeat(2,1fr);}} @media(max-width:900px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr;}} ul.plain{margin:0;padding-left:20px;} ul.plain li{margin-bottom:8px;font-size:15.5px;} /* "+ Punkt hinzufuegen" -- am Ende jeder editierbaren Liste, damit neue Aufzaehlungspunkte ergaenzt werden koennen (nicht nur bestehende Punkte bearbeiten) */ li.add-li-btn{ list-style:none;margin-left:-20px;margin-top:2px;margin-bottom:0; color:var(--blau);font-size:13px;font-weight:600;cursor:pointer; padding:3px 8px;border-radius:6px;display:inline-block; border:1px dashed transparent;transition:background .15s ease,border-color .15s ease; } li.add-li-btn:hover{background:#eef7f9;border-color:var(--blau);} li[data-added-list]{outline-offset:2px;} p{font-size:15.5px;} /* KI-Vorschlag-Button neben "+ Punkt hinzufuegen" */ li.ai-suggest-btn{ margin-left:6px;color:#7a3fc9;border-color:transparent; } li.ai-suggest-btn .icon{width:13px;height:13px;margin-right:3px;vertical-align:-2px;} li.ai-suggest-btn:hover{background:#f4eefb;border-color:#7a3fc9;} li.ai-suggest-btn.busy{opacity:.65;pointer-events:none;} li.ai-suggest-btn.disabled{opacity:.4;cursor:not-allowed;pointer-events:none;} /* Zauberstab-Toolbar: schwebt beim Fokussieren editierbaren Textes ein */ .ai-rewrite-toolbar{ position:fixed;z-index:60;display:none;gap:4px; background:#221933;border-radius:10px;padding:5px; box-shadow:0 8px 22px rgba(0,0,0,.28); } .ai-rewrite-toolbar.open{display:flex;} .ai-rewrite-toolbar button{ background:transparent;border:none;color:#e9ddfb;font-size:12px;font-weight:600; padding:6px 10px;border-radius:7px;cursor:pointer;white-space:nowrap; display:flex;align-items:center;transition:background .12s ease; } .ai-rewrite-toolbar button .icon{width:13px;height:13px;margin-right:5px;color:#c9a6ff;} .ai-rewrite-toolbar button:hover:not(:disabled){background:#382952;} .ai-rewrite-toolbar button:disabled{opacity:.6;cursor:default;} @media(max-width:640px){ .ai-rewrite-toolbar{display:none !important;} /* auf Mobile kein Platz fuer Hover-Toolbar, Zauberstab bleibt Desktop-Feature */ } .chip{ display:inline-block;padding:3px 10px;border-radius:20px; font-size:11px;font-weight:700;color:#fff;letter-spacing:.3px; } /* HERO */ .hero{ position:relative;border-radius:14px;overflow:hidden;height:280px; background-size:cover;background-position:center; display:flex;align-items:flex-end;margin-bottom:26px; } .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,0,0,.72) 0%, rgba(0,0,0,.15) 55%, rgba(0,0,0,0) 100%);} .hero .hero-logo{ display:none; position:absolute;top:18px;right:20px;z-index:3; height:58px;width:auto; filter:drop-shadow(0 1px 2px rgba(0,0,0,.45)) drop-shadow(0 0 10px rgba(0,0,0,.25)); } .hero .herotext{position:relative;z-index:2;color:#fff;padding:26px 30px;} .hero .herotext .tag{font-family:Arial,sans-serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gelb);margin-bottom:8px;display:block;} .hero .herotext h1{font-size:30px;margin:0;} /* STAT CARDS */ .stat-card{background:var(--card);border-radius:14px;padding:16px 18px;box-shadow:0 1px 3px rgba(0,0,0,.07);} .stat-card .stat-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:9px;} .stat-card .stat-icon .icon{width:14px;height:14px;} .stat-card .stat-num{font-family:Arial,sans-serif;font-size:24px;font-weight:800;color:var(--blau);} .stat-card .stat-num.warn{color:var(--red);} .stat-card .stat-label{font-size:11.5px;color:var(--grey);margin-top:3px;line-height:1.35;} .stat-card .stat-note{font-size:10.5px;color:#999;margin-top:4px;} .callout{ border-left:4px solid var(--gelb);background:#fffaf0; padding:14px 18px;border-radius:0 8px 8px 0;font-size:13.5px; } .callout.red{border-left-color:var(--red);background:#fdf3f2;} .callout.blue{border-left-color:var(--blau);background:#eef9fb;} .callout b{display:block;margin-bottom:3px;font-family:Arial,sans-serif;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;} .callout b .icon{width:15px;height:15px;margin-right:6px;vertical-align:-3px;} /* KAMPAGNEN-STECKBRIEF -- Icon-Tiles statt Fließtext-Karten */ .grid-5{grid-template-columns:repeat(5,1fr);} @media(max-width:1300px){.grid-5{grid-template-columns:repeat(3,1fr);}} @media(max-width:900px){.grid-5{grid-template-columns:1fr 1fr;}} @media(max-width:600px){.grid-5{grid-template-columns:1fr;}} .brief-tile{background:var(--card);border-radius:14px;padding:16px 16px;box-shadow:0 1px 3px rgba(0,0,0,.07);} .brief-tile .bt-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px;} .brief-tile .bt-icon .icon{width:17px;height:17px;} .brief-tile .bt-label{font-family:Arial,sans-serif;font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--grey);margin-bottom:4px;} .brief-tile p{margin:0;font-size:13.5px;line-height:1.42;} /* LEISTUNGSUMFANG (Überblick) -- Icon-Badge auf Cluster-Card */ .cluster-card .cc-icon{width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;color:#fff;margin-bottom:10px;} .cluster-card .cc-icon .icon{width:17px;height:17px;} /* WOHER DIE INHALTE STAMMEN -- Doc-Cards statt Liste */ .doc-card{display:flex;gap:12px;background:var(--card);border-radius:12px;padding:14px 16px;box-shadow:0 1px 3px rgba(0,0,0,.07);} .doc-card .dc-icon{width:36px;height:36px;border-radius:9px;background:#eef2f3;color:var(--blaugrau);display:flex;align-items:center;justify-content:center;flex-shrink:0;} .doc-card .dc-icon .icon{width:18px;height:18px;} .doc-card b{display:block;font-size:13.5px;margin-bottom:2px;} .doc-card p{margin:0;font-size:12.5px;color:var(--grey);line-height:1.42;} /* STARTSEITE -- Kachel-Navigation (Inhaltsverzeichnis) und Termin-Zeilen */ .qn-tile{cursor:pointer;transition:transform .12s ease, box-shadow .12s ease;} .qn-tile:hover{transform:translateY(-2px);box-shadow:0 4px 14px rgba(0,0,0,.12);} .ss-termin-row{display:flex;align-items:center;gap:16px;background:var(--card);border-radius:12px;padding:14px 18px;box-shadow:0 1px 3px rgba(0,0,0,.07);margin-bottom:10px;} .ss-termin-row .ss-termin-date{flex-shrink:0;min-width:150px;font-family:Arial,sans-serif;font-weight:700;font-size:13px;color:var(--blau);} .ss-termin-row .ss-termin-title{font-weight:600;font-size:14px;} /* Claim card */ .claim-card{border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 1px 3px rgba(0,0,0,.07);} .claim-card .claim-head{padding:14px 18px;color:#fff;} .claim-card .claim-head .num{font-family:Arial,sans-serif;font-size:11px;opacity:.85;} .claim-card .claim-head .quote{font-weight:600;font-size:17px;margin-top:4px;} .claim-card .claim-body{padding:14px 18px;} .claim-card .claim-body img{width:100%;border-radius:6px;margin-bottom:10px;display:block;} .claim-card .claim-body .lbl{font-family:Arial,sans-serif;font-size:10.5px;text-transform:uppercase;color:var(--grey);letter-spacing:.4px;margin-top:8px;} .claim-card .claim-body .lbl:first-child{margin-top:0;} .claim-card .claim-body p{margin:3px 0 0 0;font-size:13.5px;} /* persona accordion */ details.acc{background:var(--card);border-radius:8px;margin-bottom:8px;box-shadow:0 1px 3px rgba(0,0,0,.06);} details.acc summary{padding:12px 16px;cursor:pointer;font-family:Arial,sans-serif;font-size:13.5px;font-weight:700;color:var(--dark);list-style:none;display:flex;align-items:center;justify-content:space-between;} details.acc summary::-webkit-details-marker{display:none;} details.acc summary::after{content:"+";font-size:18px;color:var(--blaugrau);} details.acc[open] summary::after{content:"–";} details.acc .acc-body{padding:0 16px 14px 16px;font-size:13.5px;} /* sujets grid */ .sujet-card{background:var(--card);border-radius:14px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.07);} .sujet-card img{width:100%;display:block;} .sujet-card .cap{padding:10px 14px;font-size:12.5px;color:var(--grey);} .sujet-card .cap b{color:var(--dark);} .swatch{border-radius:8px;padding:14px 16px;color:#fff;} .swatch.dark-txt{color:#1a1a1a;} .swatch .swname{font-family:Arial,sans-serif;font-weight:700;font-size:13px;} .swatch .swcode{font-size:11px;opacity:.9;margin-top:4px;} /* format cards (Social Media Formate) -- Aspect-Ratio-Swatch statt Tabellenzeile */ .format-card{display:flex;gap:14px;align-items:flex-start;} .format-card .fc-swatch{border-radius:7px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08);} .format-card .fc-body{flex:1;min-width:0;} .format-card h4{margin:0;font-size:14.5px;} .format-card .fc-dims{font-size:11.5px;color:var(--grey);margin-top:2px;font-family:Arial,sans-serif;} .format-card .fc-desc{font-size:13px;margin:9px 0 8px;color:var(--dark);} .format-card .fc-len{font-size:11px;color:var(--grey);margin-top:2px;} .format-card .fc-len b{color:var(--blaugrau);} /* Aufklappbare Abschnitte (Text-Tonalitaet, Kampagnengestaltung, Social Media Formate, Budget-Unteransichten) -- beim Reinkommen sind nur die Bereichs-Titel sichtbar (Ueberblick), Klick auf einen Titel blendet den Inhalt ein. Nativer

, kein JS noetig. */ details.sec-acc{margin-bottom:12px;} details.sec-acc > summary{ position:relative; cursor:pointer;list-style:none; display:flex;align-items:center;justify-content:space-between;gap:14px; background:var(--card);border-radius:12px;padding:17px 22px; box-shadow:0 1px 3px rgba(0,0,0,.08); transition:background .15s ease, box-shadow .15s ease; } /* Ziehgriff zum Umsortieren der Sections per Drag-and-Drop -- h2 bekommt flex:1 und bleibt dadurch linksbuendig wie zuvor; der Griff sitzt als normales, nicht absolut positioniertes Flex-Element direkt neben dem +/--Toggle, kein Extra-Padding noetig, keine Verschiebung des Titels. */ details.sec-acc > summary h2{flex:1;} .drag-handle{ flex-shrink:0;display:flex;align-items:center;justify-content:center; width:26px;height:26px;border-radius:6px;color:var(--grey); cursor:grab;transition:background .15s ease,color .15s ease; } .drag-handle:hover{background:#e2eef1;color:var(--blau);} .drag-handle:active{cursor:grabbing;} .drag-handle .icon{width:16px;height:16px;} /* Stift zum Umbenennen des Section-Titels -- gleiche Optik wie der Ziehgriff, sitzt rechts daneben (also zwischen Ziehgriff und +/--Toggle). border:none/background ueberschreiben die Browser-Defaults fuer