/* corporate-grafikdesign.html - Text- und Typografie-Polish.
   Die Grafik-Container sowie jss-tilt/j-tilt bleiben bewusst unangetastet:
   Illustrationen und ihr Hover-Effekt bleiben exakt wie im Original. */

/* Karten: sichtbare, ruhige Fläche. Die Illustration selbst bleibt unangetastet. */
.j-tilt{
  border-color:rgba(207,22,22,.72)!important;
  border-radius:18px!important;
  background:linear-gradient(155deg,#fff 0%,#fff 72%,#f8f8fa 100%)!important;
  box-shadow:0 18px 42px rgba(25,25,32,.14)!important;
  cursor:pointer;
  transform-style:preserve-3d;
  will-change:transform;
  /* Waehrend die Maus ueber der Karte liegt, setzt das Neige-Skript den
     transform bei jeder Bewegung neu. Eine Transition darauf wuerde
     staendig neue Uebergaenge starten - die Karte haengt dann hinterher
     und ruckelt. Deshalb greift sie nur ausserhalb des Hovers, damit die
     Karte am Ende weich in die Ruhelage zurueckfedert. */
  transition:border-color .28s ease, box-shadow .32s ease!important;
}
.j-tilt:not(:hover){
  transition:transform .42s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .32s ease!important;
}
/* Beim Hineinfahren soll die Karte nicht springen. Deshalb wird fuer den
   Moment des Eintritts kurz eine Transition erlaubt; dskarten.js nimmt
   die Klasse nach dem Uebergang wieder weg, damit die Karte danach der
   Maus unmittelbar folgt. */
.j-tilt.ds-eintritt{
  transition:transform .32s cubic-bezier(.22,1,.36,1), border-color .28s ease, box-shadow .32s ease!important;
}
.j-tilt.ds-eintritt .tilt-image{
  transition:transform .38s cubic-bezier(.22,1,.36,1)!important;
}
.j-tilt .tilt-image{
  will-change:transform;
  transition:none!important;
}
.j-tilt:not(:hover) .tilt-image{
  transition:transform .5s cubic-bezier(.22,1,.36,1)!important;
}
.j-tilt:hover{
  border-color:#CF1616!important;
  box-shadow:0 24px 54px rgba(25,25,32,.20)!important;
}
.j-tilt.is-selected{
  border-color:#CF1616!important;
  box-shadow:0 24px 54px rgba(207,22,22,.22)!important;
}

/* Kartentitel + roter Unterstrich */
.j-tilt h2.dsx-heading-title{
  font-size:22px!important;
  font-weight:700!important;
  color:#1a1a1a!important;
  letter-spacing:-.025em;
  line-height:1.15;
  margin-bottom:14px!important;
  position:relative;
  padding-bottom:12px;
}
.j-tilt h2.dsx-heading-title::before{
  content:"LEISTUNG";
  display:block;
  margin-bottom:7px;
  color:#CF1616;
  font-size:10px;
  font-weight:800;
  letter-spacing:.14em;
  line-height:1;
}
.dsx-element-a86fe7a h2.dsx-heading-title::before,
.dsx-element-9597017 h2.dsx-heading-title::before,
.dsx-element-73e6123 h2.dsx-heading-title::before{
  content:"MARKENAUFTRITT";
}
.dsx-element-1cb94bc h2.dsx-heading-title::before,
.dsx-element-4e275ff h2.dsx-heading-title::before,
.dsx-element-33c5cca h2.dsx-heading-title::before{
  content:"PRINT & HAPTIK";
}
.dsx-element-eebd6e6 h2.dsx-heading-title::before,
.dsx-element-c6b7f0d h2.dsx-heading-title::before,
.dsx-element-7d01263 h2.dsx-heading-title::before{
  content:"MARKENSYSTEM";
}
.j-tilt h2.dsx-heading-title::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:42px;
  height:3px;
  background:#CF1616;
  border-radius:2px;
}

/* Kartenbeschreibung */
.j-tilt .dsx-widget-text-editor p{
  font-size:15px!important;
  line-height:1.62!important;
  color:#5b6066!important;
  margin-bottom:0!important;
  text-wrap:pretty;
}
.j-tilt .service-list{
  display:grid;
  gap:8px;
  margin:22px 0 0!important;
  padding:0!important;
  list-style:none;
}
.j-tilt .service-list li{
  position:relative;
  padding-left:17px;
  color:#343940;
  font-size:13px;
  font-weight:600;
  letter-spacing:.01em;
  line-height:1.25;
}
.j-tilt .service-list li::before{
  content:"";
  position:absolute;
  top:.36em;
  left:0;
  width:6px;
  height:6px;
  border-radius:50%;
  background:#CF1616;
}

/* Deutlicher, aber dezenter Hinweis auf die aufklappbaren Kartendetails. */
.j-tilt .dsx-widget-text-editor{
  position:static!important;
}
.j-tilt .dsx-widget-text-editor::after{
  content:"Klicken für Details  →";
  position:absolute;
  bottom:24px;
  left:32px;
  color:#CF1616;
  font-size:11px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* Aufklappbare Detailbereiche unterhalb der drei Karten */
html{
  /* Beim Öffnen des Detailbereichs darf der Browser die Seite nicht automatisch nachjustieren. */
  overflow-anchor:none;
}
.card-detail-panel{
  position:relative;
  z-index:5;
  width:min(1120px,calc(100% - 40px));
  scroll-margin-top:132px;
  max-height:0;
  margin:0 auto;
  overflow:hidden;
  opacity:0;
  transform:translateY(-14px);
  transition:max-height .78s ease, opacity .36s ease, transform .46s ease, margin .62s ease;
}
.card-detail-panel.is-open{
  max-height:680px;
  margin-top:-80px;
  margin-bottom:70px;
  opacity:1;
  transform:translateY(0);
}
.card-detail-panel__inner{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(260px,.85fr);
  gap:52px;
  padding:46px 52px;
  border:1px solid rgba(207,22,22,.38);
  border-radius:22px;
  background:#fff;
  box-shadow:0 20px 56px rgba(25,25,32,.13);
  transition:opacity .18s ease, transform .18s ease;
}
.card-detail-panel.is-swapping .card-detail-panel__inner{
  opacity:0;
  transform:translateY(10px);
}
.card-detail-panel.is-opening .card-detail-panel__inner{
  opacity:0;
  transform:translateY(-22px);
}
.card-detail-panel__eyebrow{
  margin:0 0 10px;
  color:#CF1616;
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
}
.card-detail-panel h2{
  margin:0;
  color:#202124;
  font-size:clamp(28px,3vw,46px);
  line-height:1;
  letter-spacing:-.04em;
}
.card-detail-panel h2::after{
  content:"";
  display:block;
  width:48px;
  height:4px;
  margin:20px 0 24px;
  border-radius:99px;
  background:#CF1616;
}
.card-detail-panel__copy{
  margin:0;
  color:#525860;
  font-size:17px;
  line-height:1.65;
}
.card-detail-panel__copy--secondary{
  margin-top:18px;
  color:#6b7077;
  font-size:15px;
  line-height:1.62;
}
.card-detail-panel__list{
  display:grid;
  align-content:center;
  gap:14px;
  margin:0;
  padding:0;
  list-style:none;
}
.card-detail-panel__list li{
  position:relative;
  padding:14px 0 14px 28px;
  border-bottom:1px solid #ececee;
  color:#24272c;
  font-size:16px;
  font-weight:700;
}
.card-detail-panel__list li::before{
  content:"";
  position:absolute;
  top:22px;
  left:0;
  width:9px;
  height:9px;
  border-radius:50%;
  background:#CF1616;
}
.card-detail-panel__close{
  position:absolute;
  top:20px;
  right:20px;
  width:36px;
  height:36px;
  border:0;
  border-radius:50%;
  background:#f3f3f5;
  color:#25272b;
  cursor:pointer;
  font-size:24px;
  line-height:1;
}
.card-detail-panel__close:hover{ background:#CF1616; color:#fff; }
@media (max-width:767px){
  .card-detail-panel{ width:calc(100% - 32px); scroll-margin-top:82px; }
  .card-detail-panel.is-open{ margin-top:24px; margin-bottom:42px; }
  .card-detail-panel__inner{ grid-template-columns:1fr; gap:26px; padding:36px 28px 30px; }
}

/* Ueberschrift "Grafikdesign ist / Wettbewerbsstrategie" */
.heading_style .head-title h2.heading-title{
  font-size:clamp(1.9rem,4vw,2.6rem)!important;
  font-weight:600!important;
  color:#1a1a1a!important;
  line-height:1!important;
  letter-spacing:-.035em;
  margin-bottom:.12em!important;
}
.heading_style .sub-heading h3.heading-sub-title{
  display:inline-block;
  font-weight:800!important;
  color:#CF1616!important;
  letter-spacing:-.045em;
  line-height:.92!important;
  white-space:nowrap;
}
.heading_style .sub-heading h3.heading-sub-title::after{
  content:"";
  display:block;
  width:1.35em;
  height:4px;
  margin-top:.34em;
  border-radius:999px;
  background:currentColor;
}

@media (max-width:767px){
  .heading_style .head-title h2.heading-title{
    letter-spacing:-.025em;
  }
  .heading_style .sub-heading h3.heading-sub-title{
    font-size:clamp(2.6rem,12vw,4.6rem)!important;
    white-space:nowrap;
  }
}

@media (prefers-reduced-motion:reduce){
  .j-tilt,
  .j-tilt .tilt-image{
    transition-duration:.01ms!important;
  }
}

/* MOBILE SERVICE CARDS v1 - SOFTWARE & APPS TEST */
@media (max-width:767px){
  body:where(.software-page,.service-mobile-page){overflow-x:hidden;}
  :where(.software-page,.service-mobile-page) .heading_style .head-title h2.heading-title{font-size:clamp(1.65rem,8vw,2.1rem)!important;line-height:1.05!important;}
  :where(.software-page,.service-mobile-page) .heading_style .sub-heading h3.heading-sub-title{font-size:clamp(2.55rem,13vw,3.65rem)!important;line-height:.92!important;white-space:normal;overflow-wrap:anywhere;}
  :where(.software-page,.service-mobile-page) .dsx-widget-tp-heading-title{padding-inline:10px;}
  :where(.software-page,.service-mobile-page) .e-grid{margin-top:0!important;padding-left:0!important;padding-right:0!important;--padding-left:0!important;--padding-right:0!important;}
  :where(.software-page,.service-mobile-page) .e-grid>.e-con-inner{width:100%!important;max-width:none!important;gap:20px!important;padding-left:14px!important;padding-right:14px!important;padding-bottom:38px!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt){width:100%!important;max-width:calc(100vw - 28px)!important;height:auto!important;min-height:0!important;margin:0 auto!important;border:1px solid rgba(207,22,22,.32)!important;border-radius:20px!important;background:linear-gradient(160deg,#fff 0%,#fff 76%,#f7f7f9 100%)!important;box-shadow:0 14px 34px rgba(25,25,32,.13)!important;transform:none!important;overflow:visible;touch-action:manipulation;cursor:pointer;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt)>.e-con-inner{padding:18px 18px 78px!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .tilt-image{position:relative!important;z-index:3!important;height:auto!important;min-height:166px!important;overflow:visible!important;transform:none!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .tilt-image>.dsx-widget-container{height:auto!important;margin-top:0!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .grafik-container,:where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .drucker-container,:where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .paper-container{padding-top:58%!important;margin-bottom:10px;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) h2.dsx-heading-title{font-size:22px!important;font-weight:700!important;color:#1a1a1a!important;line-height:1.12!important;margin-bottom:12px!important;padding-bottom:11px;position:relative;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) h2.dsx-heading-title::before{display:block;margin-bottom:7px;color:#CF1616;font-size:10px;font-weight:800;letter-spacing:.14em;line-height:1.15;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) h2.dsx-heading-title::after{content:"";position:absolute;left:0;bottom:0;width:42px;height:3px;background:#CF1616;border-radius:2px;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .dsx-widget-text-editor p{font-size:15px!important;line-height:1.52!important;color:#5b6066!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .service-list{display:grid;gap:7px;margin:18px 0 0!important;padding:0!important;list-style:none;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .service-list li{position:relative;padding-left:17px;color:#343940;font-size:13px;font-weight:600;line-height:1.3;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .service-list li::before{content:"";position:absolute;top:.36em;left:0;width:6px;height:6px;border-radius:50%;background:#CF1616;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .dsx-widget-text-editor{position:static!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .dsx-widget-text-editor::after{content:"Details anzeigen  ↓";position:absolute;left:18px;right:18px;bottom:16px;min-height:44px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(207,22,22,.38);border-radius:12px;background:rgba(207,22,22,.06);color:#b51212;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:none;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt).is-selected{box-shadow:0 18px 42px rgba(207,22,22,.18)!important;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt).is-selected .dsx-widget-text-editor::after{content:none;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .card-detail-panel{width:100%;scroll-margin-top:84px;margin:0;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .card-detail-panel.is-open{max-height:1100px;margin:24px 0 0;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .card-detail-panel__inner{grid-template-columns:1fr;gap:20px;padding:28px 0 6px;border:0;border-top:1px solid rgba(207,22,22,.24);border-radius:0;background:transparent;box-shadow:none;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .card-detail-panel__close{position:static;width:100%;height:auto;margin-top:4px;padding:14px 18px;border:1px solid rgba(207,22,22,.36);border-radius:12px;background:#CF1616;color:#fff;font-size:14px;font-weight:700;line-height:1.2;letter-spacing:.01em;}
  :where(.software-page,.service-mobile-page) :is(.j-tilt,.jss-tilt) .card-detail-panel__close:hover{background:#a81111;color:#fff;}
  :where(.software-page,.service-mobile-page) .card-detail-panel h2{font-size:clamp(28px,9vw,38px);padding-right:42px;}
  :where(.software-page,.service-mobile-page) .card-detail-panel h2::after{margin:16px 0 20px;}
  :where(.software-page,.service-mobile-page) .card-detail-panel__copy{font-size:15px;line-height:1.55;}
  :where(.software-page,.service-mobile-page) .card-detail-panel__copy--secondary{font-size:14px;line-height:1.5;margin-top:14px;}
  :where(.software-page,.service-mobile-page) .card-detail-panel__list{gap:8px;}
  :where(.software-page,.service-mobile-page) .card-detail-panel__list li{padding:12px 0 12px 24px;font-size:14px;}
}


/* Ab Tablet-Breite ist der Schliessen-Knopf ein 36px-Kreis oben rechts.
   Der Knopftext ("Details schliessen") passt dort nicht hinein und quoll
   ueber den Rand - deshalb wird er ab dieser Breite durch ein Kreuz ersetzt.
   Unterhalb 768px bleibt der beschriftete Balken-Knopf unveraendert. */
@media (min-width:768px){
  .card-detail-panel__close{
    font-size:0;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
  }
  .card-detail-panel__close span{display:none;}
  .card-detail-panel__close::before{
    content:"d7";
    font-size:26px;
    line-height:1;
    font-weight:400;
  }
}

/* Das urspruengliche Desktop-X; explizites Zeichen verhindert
   Encoding-Verlust beim statischen Umbau. */
@media (min-width:768px){
  .card-detail-panel__close::before{content:"×";}
}