/* ============================================================= * Bild-Seitenverhältnis 16:9 (für 1920×1080-Uploads) * Aktiv, wenn gesetzt ist. * Steuerung über config: app.image_ratio = '16-9' | 'classic' * Diese Regeln überschreiben das klassische 4:3-Layout punktuell. * ============================================================= */ /* Hero kompakt halten — Variante C: Bild füllt die rechte Spalte komplett, Titel und Innenabstand reduziert. Frueher stand hier max-height:380px. Zusammen mit dem overflow:hidden der Karte hat das laengere Einleitungstexte still abgeschnitten: Der Inhalt ist vertikal zentriert, wuchs also oben UND unten aus dem Deckel heraus, und der Knopf klebte an der Kante oder verschwand ganz. Den Deckel braucht es nicht mehr, weil der Text jetzt an der Quelle auf vier Zeilen begrenzt ist (siehe .cl-hero-intro) — der Hero bleibt dadurch von selbst kompakt, ohne je etwas zu verstecken. */ .client--ratio-16-9 .cl-hero-content { padding:36px 40px; } .client--ratio-16-9 .cl-hero-title { font-size:32px; line-height:1.15; } .client--ratio-16-9 .cl-hero-intro { font-size:13px; } .client--ratio-16-9 .cl-hero-image { /* Untergrenze, damit das Bild bei sehr kurzem Text nicht zum schmalen Streifen wird; nach oben waechst es mit der Karte. */ min-height:320px; height:100%; aspect-ratio:auto; } /* Karussell-Kacheln: 16:9 statt 4:3, etwas breiter */ .client--ratio-16-9 .cl-slide { width:280px; } .client--ratio-16-9 .cl-slide-img { aspect-ratio:16/9; } /* Auch die Tile-Variante (Kachel-Galerie ohne Karussell) profitiert */ .client--ratio-16-9 .cl-tile-img { aspect-ratio:16/9; } /* ============================================================= Admin · Projektangaben — Header- und Hintergrundbild-Zeilen Sitzen als regulärer Karten-Bereich mit eigenem Padding direkt in der Karte. Eine durchgehende Trennlinie nach oben grenzt sie vom Formular darüber ab. ============================================================= */ .pinfo-images { border-top:.5px solid var(--line); padding:6px 15px 8px; } .pinfo-image-row { display:flex; align-items:center; gap:11px; padding:7px 0; border-bottom:.5px solid var(--line); } .pinfo-image-row:last-child { border-bottom:none; } .pinfo-image-thumb { width:48px; height:34px; object-fit:cover; border-radius:6px; border:.5px solid var(--line); background:var(--paper); flex-shrink:0; } .pinfo-image-thumb--empty { display:flex; align-items:center; justify-content:center; color:var(--text-3); /* dezentes Schachbrett-Muster — zeigt klar "leer/transparent", statt nach defekter Vorschau auszusehen */ background-color:var(--paper); background-image: linear-gradient(45deg, var(--surface) 25%, transparent 25%), linear-gradient(-45deg, var(--surface) 25%, transparent 25%), linear-gradient(45deg, transparent 75%, var(--surface) 75%), linear-gradient(-45deg, transparent 75%, var(--surface) 75%); background-size:8px 8px; background-position:0 0, 0 4px, 4px -4px, -4px 0; } .pinfo-image-thumb--empty svg { position:relative; z-index:1; background:var(--paper); padding:2px; border-radius:3px; font-size:11px; } .pinfo-image-text { flex:1; min-width:0; } .pinfo-image-title { font-size:11.5px; font-weight:600; margin-bottom:1px; line-height:1.3; } .pinfo-image-hint { font-size:10.5px; color:var(--text-3); line-height:1.4; } .pinfo-image-form { margin:0; flex-shrink:0; } .pinfo-image-actions { flex-shrink:0; display:flex; gap:4px; align-items:center; } /* ============================================================= Universeller Icon-Button für Aktionen in Zeilen und Karten. - .pinfo-icon-btn für die Bildzeilen (Projektangaben) - .row-icon-btn für Datei-/Versionszeilen - …--danger rot-Ton für Entfernen-Aktionen Beide teilen sich dieselbe Optik, eigene Klassen nur für semantische Klarheit im Markup. ============================================================= */ .pinfo-icon-btn, .row-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:28px; height:28px; padding:0; border:.5px solid var(--line); background:var(--paper); color:var(--text-2); border-radius:7px; cursor:pointer; font-size:13px; line-height:1; transition:border-color .12s, color .12s, background .12s; } .pinfo-icon-btn:hover, .row-icon-btn:hover { border-color:var(--accent); color:var(--accent); } .pinfo-icon-btn--danger:hover, .row-icon-btn--danger:hover { border-color:var(--accent-dark); color:var(--accent-dark); background:#fff5f3; } /* file inputs in labels nicht zeigen */ .pinfo-icon-btn input[type="file"], .row-icon-btn input[type="file"] { display:none; } /* Container für die Aktions-Icons rechts in einer Datei-Zeile */ .row-actions { display:flex; gap:4px; align-items:center; flex-shrink:0; } /* ============================================================= Admin · Datei-Typ-Auswahl (Konzept / Angebot / Dokument) Sitzt in der Datei-Zeile neben Dateigröße und Aktionen. Bewusst klein und unauffällig — der Typ ist ein Detail, nicht das wichtigste an einer Datei. ============================================================= */ .file-kind-select { font-size:10.5px; padding:2px 18px 2px 7px; border:.5px solid var(--line); border-radius:6px; background:var(--paper); color:var(--text-2); cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:right 4px center; background-size:10px 10px; } .file-kind-select:hover { border-color:var(--accent); color:var(--ink); } .file-kind-select:focus { outline:none; border-color:var(--accent); } /* -- Datei-Zeilen mobil: Name oben, Bedienelemente in zweite Reihe; größere Tap-Ziele. Desktop bleibt unverändert. -- */ @media (max-width:560px){ .fa-row{flex-wrap:wrap;row-gap:8px;} /* Der Dateiname (flex:1) füllt die erste Zeile, alles dahinter bricht in eine zweite Zeile um. */ .fa-row .row-actions{margin-left:auto;gap:6px;} .fa-row .file-kind-select{font-size:12px;padding:6px 22px 6px 9px;} .fa-row .row-icon-btn{width:34px;height:34px;font-size:15px;} .fa-row .file-clicks{font-size:11px;} } /* Admin-Vorschau: deaktivierte HTML-/Dokument-Slides und -Karten. Diese Elemente führen ohne Token nirgendwohin — wir markieren sie visuell und nehmen den Klick raus. */ .cl-slide--preview-disabled, .cl-concept-card--preview-disabled { cursor:not-allowed; opacity:.78; } .cl-slide--preview-disabled:hover, .cl-concept-card--preview-disabled:hover { transform:none; box-shadow:none; } .cl-concept-preview-note { font-size:11px; color:var(--text-3); font-style:italic; padding:0 12px; flex-shrink:0; }